@remotion/promo-pages 4.0.372 → 4.0.373

package/dist/templates.js

@@ -25,22 +25,28 @@ import { createContext as createContext2, useContext } from "react";
 import { jsx as jsx10 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef2,
-  useContext as useContext11,
+  useContext as useContext12,
   useEffect as useEffect3,
-  useMemo as useMemo9,
-  useState as useState5
+  useMemo as useMemo10,
+  useState as useState6
 } from "react";
 import { forwardRef, useMemo as useMemo2 } from "react";
 import { jsx as jsx22 } from "react/jsx-runtime";
 import { createContext as createContext3 } from "react";
 import React3, { useCallback, useMemo as useMemo22, useState } from "react";
 import { jsx as jsx32 } from "react/jsx-runtime";
-import { createContext as createContext4, useContext as useContext2, useEffect, useRef, useState as useState2 } from "react";
-import { createContext as createContext8, useContext as useContext6, useMemo as useMemo6 } from "react";
-import { useContext as useContext3, useState as useState3 } from "react";
+import {
+  createContext as createContext9,
+  useLayoutEffect,
+  useMemo as useMemo7,
+  useRef as useRef2,
+  useState as useState5
+} from "react";
+import { useContext as useContext6, useMemo as useMemo6 } from "react";
+import { useContext as useContext2, useState as useState2 } from "react";
 import React4 from "react";
 import { useContext as useContext5, useMemo as useMemo5 } from "react";
-import { createContext as createContext5 } from "react";
+import { createContext as createContext4 } from "react";
 import {
   createContext as createContext7,
   createRef,
@@ -52,199 +58,213 @@ import {
   useState as useState4
 } from "react";
 import React5, {
-  createContext as createContext6,
+  createContext as createContext5,
   useCallback as useCallback2,
   useImperativeHandle,
   useMemo as useMemo3
 } from "react";
 import { jsx as jsx42 } from "react/jsx-runtime";
+import { createContext as createContext6, useContext as useContext3, useEffect, useRef, useState as useState3 } from "react";
 import { jsx as jsx52 } from "react/jsx-runtime";
-import { useContext as useContext8 } from "react";
-import { createContext as createContext9 } from "react";
+import { createContext as createContext8, useCallback as useCallback4, useContext as useContext7 } from "react";
 import { jsx as jsx62 } from "react/jsx-runtime";
-import { useContext as useContext7, useMemo as useMemo7 } from "react";
-import { useContext as useContext10, useMemo as useMemo8 } from "react";
 import { useContext as useContext9 } from "react";
+import { createContext as createContext10 } from "react";
 import { jsx as jsx72 } from "react/jsx-runtime";
+import { useContext as useContext8, useMemo as useMemo8 } from "react";
+import { useContext as useContext11, useMemo as useMemo9 } from "react";
+import { useContext as useContext10 } from "react";
 import { jsx as jsx82 } from "react/jsx-runtime";
+import { jsx as jsx92 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef3,
   useEffect as useEffect4,
   useImperativeHandle as useImperativeHandle4,
-  useLayoutEffect,
-  useRef as useRef3,
-  useState as useState6
+  useLayoutEffect as useLayoutEffect2,
+  useRef as useRef4,
+  useState as useState7
 } from "react";
-import { useCallback as useCallback4 } from "react";
-import React9, { useCallback as useCallback5, useImperativeHandle as useImperativeHandle3, useRef as useRef2 } from "react";
-import { jsx as jsx92 } from "react/jsx-runtime";
+import React10, { useCallback as useCallback5, useImperativeHandle as useImperativeHandle3, useRef as useRef3 } from "react";
 import { jsx as jsx102 } from "react/jsx-runtime";
-import { useContext as useContext12, useEffect as useEffect5, useState as useState8 } from "react";
+import { jsx as jsx11 } from "react/jsx-runtime";
+import { useContext as useContext13, useEffect as useEffect5, useState as useState9 } from "react";
 import {
-  createContext as createContext10,
+  createContext as createContext11,
   useCallback as useCallback6,
-  useLayoutEffect as useLayoutEffect2,
-  useMemo as useMemo10,
-  useState as useState7
+  useLayoutEffect as useLayoutEffect3,
+  useMemo as useMemo11,
+  useState as useState8
 } from "react";
-import { jsx as jsx11 } from "react/jsx-runtime";
-import { forwardRef as forwardRef6, useCallback as useCallback11, useContext as useContext26 } from "react";
-import React10, { createContext as createContext11, useMemo as useMemo11 } from "react";
 import { jsx as jsx12 } from "react/jsx-runtime";
-import { useContext as useContext13 } from "react";
-import { createContext as createContext12, useEffect as useEffect6, useState as useState9 } from "react";
+import { forwardRef as forwardRef6, useCallback as useCallback11, useContext as useContext27 } from "react";
+import React11, { createContext as createContext12, useMemo as useMemo12 } from "react";
 import { jsx as jsx13 } from "react/jsx-runtime";
-import { createContext as createContext13, useMemo as useMemo12, useReducer } from "react";
+import { useContext as useContext14 } from "react";
+import { createContext as createContext13, useEffect as useEffect6, useState as useState10 } from "react";
 import { jsx as jsx14 } from "react/jsx-runtime";
+import { createContext as createContext14, useMemo as useMemo13, useReducer } from "react";
+import { jsx as jsx15 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef4,
-  useContext as useContext24,
+  useContext as useContext25,
   useEffect as useEffect14,
   useImperativeHandle as useImperativeHandle5,
-  useMemo as useMemo20,
-  useRef as useRef11,
-  useState as useState14
+  useMemo as useMemo21,
+  useRef as useRef12,
+  useState as useState15
 } from "react";
-import { createContext as createContext14 } from "react";
-import * as React13 from "react";
-import { useContext as useContext16, useLayoutEffect as useLayoutEffect3, useRef as useRef6 } from "react";
-import React14, {
-  createContext as createContext15,
+import { createContext as createContext15 } from "react";
+import * as React14 from "react";
+import { useContext as useContext17, useLayoutEffect as useLayoutEffect4, useRef as useRef7 } from "react";
+import React15, {
+  createContext as createContext16,
   createRef as createRef2,
   useCallback as useCallback7,
-  useContext as useContext15,
+  useContext as useContext16,
   useEffect as useEffect7,
-  useMemo as useMemo14,
-  useRef as useRef4,
-  useState as useState10
+  useMemo as useMemo15,
+  useRef as useRef5,
+  useState as useState11
 } from "react";
-import { useMemo as useMemo13 } from "react";
-import { jsx as jsx15, jsxs as jsxs2 } from "react/jsx-runtime";
-import { useRef as useRef5 } from "react";
-import { useContext as useContext18, useEffect as useEffect8, useMemo as useMemo15, useState as useState11 } from "react";
-import { useContext as useContext17 } from "react";
+import { useMemo as useMemo14 } from "react";
+import { jsx as jsx16, jsxs as jsxs2 } from "react/jsx-runtime";
+import { useRef as useRef6 } from "react";
+import { useContext as useContext19, useEffect as useEffect8, useMemo as useMemo16, useState as useState12 } from "react";
+import { useContext as useContext18 } from "react";
 import {
   useCallback as useCallback10,
-  useContext as useContext21,
+  useContext as useContext22,
   useEffect as useEffect12,
-  useLayoutEffect as useLayoutEffect5,
-  useRef as useRef10
+  useLayoutEffect as useLayoutEffect6,
+  useRef as useRef11
 } from "react";
-import { useCallback as useCallback9, useMemo as useMemo18, useRef as useRef8 } from "react";
-import { useContext as useContext20, useMemo as useMemo17 } from "react";
-import React15, {
+import { useCallback as useCallback9, useMemo as useMemo19, useRef as useRef9 } from "react";
+import { useContext as useContext21, useMemo as useMemo18 } from "react";
+import React16, {
   useCallback as useCallback8,
-  useContext as useContext19,
+  useContext as useContext20,
   useEffect as useEffect9,
-  useLayoutEffect as useLayoutEffect4,
-  useMemo as useMemo16,
-  useRef as useRef7,
-  useState as useState12
+  useLayoutEffect as useLayoutEffect5,
+  useMemo as useMemo17,
+  useRef as useRef8,
+  useState as useState13
 } from "react";
-import { jsx as jsx16 } from "react/jsx-runtime";
-import React16 from "react";
-import { useEffect as useEffect10, useState as useState13 } from "react";
-import { useEffect as useEffect11, useRef as useRef9 } from "react";
-import { useContext as useContext22, useEffect as useEffect13 } from "react";
-import { createContext as createContext16, useContext as useContext23, useMemo as useMemo19 } from "react";
 import { jsx as jsx17 } from "react/jsx-runtime";
+import React17 from "react";
+import { useEffect as useEffect10, useState as useState14 } from "react";
+import { useEffect as useEffect11, useRef as useRef10 } from "react";
+import { useContext as useContext23, useEffect as useEffect13 } from "react";
+import { createContext as createContext17, useContext as useContext24, useMemo as useMemo20 } from "react";
+import { jsx as jsx18 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef5,
-  useContext as useContext25,
+  useContext as useContext26,
   useEffect as useEffect15,
   useImperativeHandle as useImperativeHandle6,
-  useLayoutEffect as useLayoutEffect6,
-  useMemo as useMemo21,
-  useRef as useRef12
+  useLayoutEffect as useLayoutEffect7,
+  useMemo as useMemo222,
+  useRef as useRef13
 } from "react";
-import { jsx as jsx18 } from "react/jsx-runtime";
 import { jsx as jsx19 } from "react/jsx-runtime";
-import { Suspense, useContext as useContext28, useEffect as useEffect17 } from "react";
-import { createPortal } from "react-dom";
-import { createContext as createContext17, useContext as useContext27, useEffect as useEffect16, useMemo as useMemo222 } from "react";
 import { jsx as jsx20 } from "react/jsx-runtime";
-import { jsx as jsx21, jsxs as jsxs22 } from "react/jsx-runtime";
-import React20, { useMemo as useMemo23 } from "react";
-import { jsx as jsx222 } from "react/jsx-runtime";
-import { forwardRef as forwardRef7, useCallback as useCallback12, useState as useState15 } from "react";
+import { Suspense, useContext as useContext29, useEffect as useEffect17 } from "react";
+import { createPortal } from "react-dom";
+import { createContext as createContext18, useContext as useContext28, useEffect as useEffect16, useMemo as useMemo23 } from "react";
+import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx222, jsxs as jsxs22 } from "react/jsx-runtime";
+import React21, { useMemo as useMemo24 } from "react";
 import { jsx as jsx23 } from "react/jsx-runtime";
+import { forwardRef as forwardRef7, useCallback as useCallback12, useState as useState16 } from "react";
+import { jsx as jsx24 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef8,
   useCallback as useCallback13,
-  useContext as useContext29,
+  useContext as useContext30,
   useImperativeHandle as useImperativeHandle7,
-  useLayoutEffect as useLayoutEffect7,
-  useRef as useRef13
+  useLayoutEffect as useLayoutEffect8,
+  useRef as useRef14
 } from "react";
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 import { createRef as createRef3 } from "react";
-import React24, {
+import React25 from "react";
+import {
   useCallback as useCallback14,
   useImperativeHandle as useImperativeHandle8,
-  useMemo as useMemo24,
-  useRef as useRef14,
-  useState as useState16
-} from "react";
-import { jsx as jsx25 } from "react/jsx-runtime";
-import {
-  useEffect as useEffect18,
-  useLayoutEffect as useLayoutEffect8,
-  useMemo as useMemo26,
+  useMemo as useMemo25,
   useRef as useRef15,
   useState as useState17
 } from "react";
-import { createContext as createContext18, useContext as useContext30, useMemo as useMemo25 } from "react";
 import { jsx as jsx26 } from "react/jsx-runtime";
+import { useEffect as useEffect18, useMemo as useMemo27, useState as useState18 } from "react";
+import { createContext as createContext19, useContext as useContext31, useMemo as useMemo26 } from "react";
 import { jsx as jsx27 } from "react/jsx-runtime";
-import React26, { createContext as createContext19 } from "react";
+import { jsx as jsx28 } from "react/jsx-runtime";
+import React27, { createContext as createContext20 } from "react";
 import { useCallback as useCallback16 } from "react";
 import {
   useCallback as useCallback15,
-  useContext as useContext31,
+  useContext as useContext32,
   useEffect as useEffect19,
   useLayoutEffect as useLayoutEffect9,
-  useMemo as useMemo27,
-  useState as useState18
+  useMemo as useMemo28,
+  useState as useState19
 } from "react";
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef9,
-  useContext as useContext32,
+  useContext as useContext33,
   useEffect as useEffect21,
   useImperativeHandle as useImperativeHandle9,
-  useMemo as useMemo28,
+  useMemo as useMemo29,
   useRef as useRef16,
-  useState as useState19
+  useState as useState20
 } from "react";
 import { useEffect as useEffect20 } from "react";
-import { jsx as jsx29 } from "react/jsx-runtime";
 import { jsx as jsx30 } from "react/jsx-runtime";
-import React30, { useMemo as useMemo29 } from "react";
 import { jsx as jsx31 } from "react/jsx-runtime";
-import { Children, forwardRef as forwardRef10, useMemo as useMemo30 } from "react";
-import React31 from "react";
-import React32, { createContext as createContext20 } from "react";
+import React31, { useMemo as useMemo30 } from "react";
 import { jsx as jsx322 } from "react/jsx-runtime";
+import { Children, forwardRef as forwardRef10, useMemo as useMemo31 } from "react";
+import React32 from "react";
+import React33, { createContext as createContext21 } from "react";
 import { jsx as jsx33 } from "react/jsx-runtime";
-import React34 from "react";
-import { forwardRef as forwardRef12, useCallback as useCallback17, useContext as useContext34 } from "react";
+import { jsx as jsx34 } from "react/jsx-runtime";
+import React35 from "react";
+import { forwardRef as forwardRef12, useCallback as useCallback17, useContext as useContext35 } from "react";
 import {
   forwardRef as forwardRef11,
-  useContext as useContext33,
+  useContext as useContext34,
   useEffect as useEffect22,
   useImperativeHandle as useImperativeHandle10,
   useLayoutEffect as useLayoutEffect10,
-  useMemo as useMemo31,
+  useMemo as useMemo32,
   useRef as useRef17
 } from "react";
-import { jsx as jsx34 } from "react/jsx-runtime";
 import { jsx as jsx35 } from "react/jsx-runtime";
+import { jsx as jsx36 } from "react/jsx-runtime";
 function getNodeEnvString() {
   return ["NOD", "E_EN", "V"].join("");
 }
 function truthy2(value) {
   return Boolean(value);
 }
+function mulberry32(a) {
+  let t = a + 1831565813;
+  t = Math.imul(t ^ t >>> 15, t | 1);
+  t ^= t + Math.imul(t ^ t >>> 7, t | 61);
+  return ((t ^ t >>> 14) >>> 0) / 4294967296;
+}
+function hashCode(str) {
+  let i = 0;
+  let chr = 0;
+  let hash = 0;
+  for (i = 0;i < str.length; i++) {
+    chr = str.charCodeAt(i);
+    hash = (hash << 5) - hash + chr;
+    hash |= 0;
+  }
+  return hash;
+}
 function validateCodec(defaultCodec, location, name) {
   if (typeof defaultCodec === "undefined") {
     return;
@@ -323,23 +343,6 @@ function cancelRender(err) {
   window.remotion_cancelledError = error.stack;
   throw error;
 }
-function mulberry32(a) {
-  let t = a + 1831565813;
-  t = Math.imul(t ^ t >>> 15, t | 1);
-  t ^= t + Math.imul(t ^ t >>> 7, t | 61);
-  return ((t ^ t >>> 14) >>> 0) / 4294967296;
-}
-function hashCode(str) {
-  let i = 0;
-  let chr = 0;
-  let hash = 0;
-  for (i = 0;i < str.length; i++) {
-    chr = str.charCodeAt(i);
-    hash = (hash << 5) - hash + chr;
-    hash |= 0;
-  }
-  return hash;
-}
 function interpolateFunction(input, inputRange, outputRange, options) {
   const { extrapolateLeft, extrapolateRight, easing } = options;
   let result = input;
@@ -443,19 +446,19 @@ function exponentialBackoff(errorCount) {
   return 1000 * 2 ** (errorCount - 1);
 }
 function useRemotionContexts() {
-  const compositionManagerCtx = React30.useContext(CompositionManager);
-  const timelineContext = React30.useContext(TimelineContext);
-  const setTimelineContext = React30.useContext(SetTimelineContext);
-  const sequenceContext = React30.useContext(SequenceContext);
-  const nonceContext = React30.useContext(NonceContext);
-  const canUseRemotionHooksContext = React30.useContext(CanUseRemotionHooks);
-  const preloadContext = React30.useContext(PreloadContext);
-  const resolveCompositionContext = React30.useContext(ResolveCompositionContext);
-  const renderAssetManagerContext = React30.useContext(RenderAssetManager);
-  const sequenceManagerContext = React30.useContext(SequenceManager);
-  const bufferManagerContext = React30.useContext(BufferingContextReact);
-  const logLevelContext = React30.useContext(LogLevelContext);
-  return useMemo29(() => ({
+  const compositionManagerCtx = React31.useContext(CompositionManager);
+  const timelineContext = React31.useContext(TimelineContext);
+  const setTimelineContext = React31.useContext(SetTimelineContext);
+  const sequenceContext = React31.useContext(SequenceContext);
+  const nonceContext = React31.useContext(NonceContext);
+  const canUseRemotionHooksContext = React31.useContext(CanUseRemotionHooks);
+  const preloadContext = React31.useContext(PreloadContext);
+  const resolveCompositionContext = React31.useContext(ResolveCompositionContext);
+  const renderAssetManagerContext = React31.useContext(RenderAssetManager);
+  const sequenceManagerContext = React31.useContext(SequenceManager);
+  const bufferManagerContext = React31.useContext(BufferingContextReact);
+  const logLevelContext = React31.useContext(LogLevelContext);
+  return useMemo30(() => ({
     compositionManagerCtx,
     timelineContext,
     setTimelineContext,
@@ -745,7 +748,7 @@ var __defProp2, __export2 = (target, all) => {
   });
 }, useIsPlayer = () => {
   return useContext(IsPlayerContext);
-}, VERSION = "4.0.372", checkMultipleRemotionVersions = () => {
+}, VERSION = "4.0.373", checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
   }
@@ -891,21 +894,23 @@ Check that all your Remotion packages are on the same version. If your dependenc
       children
     })
   });
-}, NonceContext, SetNonceContext, useNonce = () => {
-  const context = useContext2(NonceContext);
-  const [nonce, setNonce] = useState2(() => context.getNonce());
-  const lastContext = useRef(context);
-  useEffect(() => {
-    if (lastContext.current === context) {
-      return;
-    }
-    lastContext.current = context;
-    setNonce(context.getNonce);
-  }, [context]);
-  return nonce;
+}, random = (seed, dummy) => {
+  if (dummy !== undefined) {
+    throw new TypeError("random() takes only one argument");
+  }
+  if (seed === null) {
+    return Math.random();
+  }
+  if (typeof seed === "string") {
+    return mulberry32(hashCode(seed));
+  }
+  if (typeof seed === "number") {
+    return mulberry32(seed * 10000000000);
+  }
+  throw new Error("random() argument must be a number or a string");
 }, exports_timeline_position_state, RemotionEnvironmentContext, useRemotionEnvironment = () => {
-  const context = useContext3(RemotionEnvironmentContext);
-  const [env] = useState3(() => getRemotionEnvironment());
+  const context = useContext2(RemotionEnvironmentContext);
+  const [env] = useState2(() => getRemotionEnvironment());
   return context ?? env;
 }, CompositionManager, CompositionSetters, EditorPropsContext, editorPropsProviderRef, timeValueRef, EditorPropsProvider = ({ children }) => {
   const [props, setProps] = React5.useState({});
@@ -1042,6 +1047,18 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }
   const parsed = deserializeJSONWithSpecialTypes(param);
   return parsed;
+}, NonceContext, SetNonceContext, useNonce = () => {
+  const context = useContext3(NonceContext);
+  const [nonce, setNonce] = useState3(() => context.getNonce());
+  const lastContext = useRef(context);
+  useEffect(() => {
+    if (lastContext.current === context) {
+      return;
+    }
+    lastContext.current = context;
+    setNonce(context.getNonce);
+  }, [context]);
+  return nonce;
 }, validCodecs, validateCalculated = ({
   calculated,
   compositionId,
@@ -1525,7 +1542,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
       component: selected.component
     };
   }, [currentCompositionMetadata, resolved, selected]);
-}, TimelineContext, SetTimelineContext, makeKey = () => {
+}, makeKey = () => {
   return `remotion.time-all`;
 }, persistCurrentFrame = (time) => {
   localStorage.setItem(makeKey(), JSON.stringify(time));
@@ -1559,18 +1576,208 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const { playing, imperativePlaying } = useContext6(TimelineContext);
   const { setPlaying } = useContext6(SetTimelineContext);
   return useMemo6(() => [playing, setPlaying, imperativePlaying], [imperativePlaying, playing, setPlaying]);
+}, isErrorLike = (err) => {
+  if (err instanceof Error) {
+    return true;
+  }
+  if (err === null) {
+    return false;
+  }
+  if (typeof err !== "object") {
+    return false;
+  }
+  if (!("stack" in err)) {
+    return false;
+  }
+  if (typeof err.stack !== "string") {
+    return false;
+  }
+  if (!("message" in err)) {
+    return false;
+  }
+  if (typeof err.message !== "string") {
+    return false;
+  }
+  return true;
+}, logLevels, getNumberForLogLevel = (level) => {
+  return logLevels.indexOf(level);
+}, isEqualOrBelowLogLevel = (currentLevel, level) => {
+  return getNumberForLogLevel(currentLevel) <= getNumberForLogLevel(level);
+}, transformArgs = ({
+  args,
+  logLevel,
+  tag
+}) => {
+  const arr = [...args];
+  if (getRemotionEnvironment().isRendering && !getRemotionEnvironment().isClientSideRendering) {
+    arr.unshift(Symbol.for(`__remotion_level_${logLevel}`));
+  }
+  if (tag && getRemotionEnvironment().isRendering && !getRemotionEnvironment().isClientSideRendering) {
+    arr.unshift(Symbol.for(`__remotion_tag_${tag}`));
+  }
+  return arr;
+}, verbose = (options, ...args) => {
+  if (isEqualOrBelowLogLevel(options.logLevel, "verbose")) {
+    return console.debug(...transformArgs({ args, logLevel: "verbose", tag: options.tag }));
+  }
+}, trace = (options, ...args) => {
+  if (isEqualOrBelowLogLevel(options.logLevel, "trace")) {
+    return console.debug(...transformArgs({ args, logLevel: "trace", tag: options.tag }));
+  }
+}, info = (options, ...args) => {
+  if (isEqualOrBelowLogLevel(options.logLevel, "info")) {
+    return console.log(...transformArgs({ args, logLevel: "info", tag: options.tag }));
+  }
+}, warn = (options, ...args) => {
+  if (isEqualOrBelowLogLevel(options.logLevel, "warn")) {
+    return console.warn(...transformArgs({ args, logLevel: "warn", tag: options.tag }));
+  }
+}, error = (options, ...args) => {
+  return console.error(...transformArgs({ args, logLevel: "error", tag: options.tag }));
+}, Log, handles, DELAY_RENDER_CALLSTACK_TOKEN = "The delayRender was called:", DELAY_RENDER_RETRIES_LEFT = "Retries left: ", DELAY_RENDER_RETRY_TOKEN = "- Rendering the frame will be retried.", DELAY_RENDER_CLEAR_TOKEN = "handle was cleared after", defaultTimeout = 30000, delayRenderInternal = (scope, environment, label, options) => {
+  if (typeof label !== "string" && typeof label !== "undefined") {
+    throw new Error("The label parameter of delayRender() must be a string or undefined, got: " + JSON.stringify(label));
+  }
+  const handle = Math.random();
+  handles.push(handle);
+  const called = Error().stack?.replace(/^Error/g, "") ?? "";
+  if (environment.isRendering) {
+    const timeoutToUse = (options?.timeoutInMilliseconds ?? (typeof scope === "undefined" ? defaultTimeout : scope.remotion_puppeteerTimeout ?? defaultTimeout)) - 2000;
+    if (typeof scope !== "undefined") {
+      const retriesLeft = (options?.retries ?? 0) - (scope.remotion_attempt - 1);
+      scope.remotion_delayRenderTimeouts[handle] = {
+        label: label ?? null,
+        startTime: Date.now(),
+        timeout: setTimeout(() => {
+          const message = [
+            `A delayRender()`,
+            label ? `"${label}"` : null,
+            `was called but not cleared after ${timeoutToUse}ms. See https://remotion.dev/docs/timeout for help.`,
+            retriesLeft > 0 ? DELAY_RENDER_RETRIES_LEFT + retriesLeft : null,
+            retriesLeft > 0 ? DELAY_RENDER_RETRY_TOKEN : null,
+            DELAY_RENDER_CALLSTACK_TOKEN,
+            called
+          ].filter(truthy2).join(" ");
+          cancelRender(Error(message));
+        }, timeoutToUse)
+      };
+    }
+  }
+  if (typeof scope !== "undefined") {
+    scope.remotion_renderReady = false;
+  }
+  return handle;
+}, continueRenderInternal = (scope, handle, environment) => {
+  if (typeof handle === "undefined") {
+    throw new TypeError("The continueRender() method must be called with a parameter that is the return value of delayRender(). No value was passed.");
+  }
+  if (typeof handle !== "number") {
+    throw new TypeError("The parameter passed into continueRender() must be the return value of delayRender() which is a number. Got: " + JSON.stringify(handle));
+  }
+  handles = handles.filter((h) => {
+    if (h === handle) {
+      if (environment.isRendering && scope !== undefined) {
+        if (!scope.remotion_delayRenderTimeouts[handle]) {
+          return false;
+        }
+        const { label, startTime, timeout } = scope.remotion_delayRenderTimeouts[handle];
+        clearTimeout(timeout);
+        const message = [
+          label ? `"${label}"` : "A handle",
+          DELAY_RENDER_CLEAR_TOKEN,
+          `${Date.now() - startTime}ms`
+        ].filter(truthy2).join(" ");
+        Log.verbose({ logLevel: window.remotion_logLevel, tag: "delayRender()" }, message);
+        delete scope.remotion_delayRenderTimeouts[handle];
+      }
+      return false;
+    }
+    return true;
+  });
+  if (handles.length === 0 && typeof scope !== "undefined") {
+    scope.remotion_renderReady = true;
+  }
+}, DelayRenderContextType, useDelayRender = () => {
+  const environment = useRemotionEnvironment();
+  const scope = useContext7(DelayRenderContextType);
+  const delayRender2 = useCallback4((label, options) => {
+    return delayRenderInternal(scope ?? (typeof window !== "undefined" ? window : undefined), environment, label, options);
+  }, [environment, scope]);
+  const continueRender2 = useCallback4((handle) => {
+    continueRenderInternal(scope ?? (typeof window !== "undefined" ? window : undefined), handle, environment);
+  }, [environment, scope]);
+  return { delayRender: delayRender2, continueRender: continueRender2 };
+}, SetTimelineContext, TimelineContext, TimelineContextProvider = ({ children, frameState }) => {
+  const [playing, setPlaying] = useState5(false);
+  const imperativePlaying = useRef2(false);
+  const [playbackRate, setPlaybackRate] = useState5(1);
+  const audioAndVideoTags = useRef2([]);
+  const [remotionRootId] = useState5(() => String(random(null)));
+  const [_frame, setFrame] = useState5(() => getInitialFrameState());
+  const frame = frameState ?? _frame;
+  const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
+  if (typeof window !== "undefined") {
+    useLayoutEffect(() => {
+      window.remotion_setFrame = (f, composition, attempt) => {
+        window.remotion_attempt = attempt;
+        const id = delayRender2(`Setting the current frame to ${f}`);
+        let asyncUpdate = true;
+        setFrame((s) => {
+          const currentFrame = s[composition] ?? window.remotion_initialFrame;
+          if (currentFrame === f) {
+            asyncUpdate = false;
+            return s;
+          }
+          return {
+            ...s,
+            [composition]: f
+          };
+        });
+        if (asyncUpdate) {
+          requestAnimationFrame(() => continueRender2(id));
+        } else {
+          continueRender2(id);
+        }
+      };
+      window.remotion_isPlayer = false;
+    }, [continueRender2, delayRender2]);
+  }
+  const timelineContextValue = useMemo7(() => {
+    return {
+      frame,
+      playing,
+      imperativePlaying,
+      rootId: remotionRootId,
+      playbackRate,
+      setPlaybackRate,
+      audioAndVideoTags
+    };
+  }, [frame, playbackRate, playing, remotionRootId]);
+  const setTimelineContextValue = useMemo7(() => {
+    return {
+      setFrame,
+      setPlaying
+    };
+  }, []);
+  return /* @__PURE__ */ jsx62(TimelineContext.Provider, {
+    value: timelineContextValue,
+    children: /* @__PURE__ */ jsx62(SetTimelineContext.Provider, {
+      value: setTimelineContextValue,
+      children
+    })
+  });
 }, CanUseRemotionHooks, CanUseRemotionHooksProvider = ({ children }) => {
-  return /* @__PURE__ */ jsx62(CanUseRemotionHooks.Provider, {
+  return /* @__PURE__ */ jsx72(CanUseRemotionHooks.Provider, {
     value: true,
     children
   });
 }, useUnsafeVideoConfig = () => {
-  const context = useContext7(SequenceContext);
+  const context = useContext8(SequenceContext);
   const ctxWidth = context?.width ?? null;
   const ctxHeight = context?.height ?? null;
   const ctxDuration = context?.durationInFrames ?? null;
   const video = useVideo();
-  return useMemo7(() => {
+  return useMemo8(() => {
     if (!video) {
       return null;
     }
@@ -1605,7 +1812,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }, [ctxDuration, ctxHeight, ctxWidth, video]);
 }, useVideoConfig = () => {
   const videoConfig = useUnsafeVideoConfig();
-  const context = useContext8(CanUseRemotionHooks);
+  const context = useContext9(CanUseRemotionHooks);
   const isPlayer = useIsPlayer();
   if (!videoConfig) {
     if (typeof window !== "undefined" && window.remotion_isPlayer || isPlayer) {
@@ -1622,7 +1829,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }
   return videoConfig;
 }, useCurrentFrame = () => {
-  const canUseRemotionHooks = useContext9(CanUseRemotionHooks);
+  const canUseRemotionHooks = useContext10(CanUseRemotionHooks);
   const env = useRemotionEnvironment();
   if (!canUseRemotionHooks) {
     if (env.isPlayer) {
@@ -1631,7 +1838,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     throw new Error(`useCurrentFrame() can only be called inside a component that was registered as a composition. See https://www.remotion.dev/docs/the-fundamentals#defining-compositions`);
   }
   const frame = useTimelinePosition();
-  const context = useContext9(SequenceContext);
+  const context = useContext10(SequenceContext);
   const contextOffset = context ? context.cumulatedFrom + context.relativeFrom : 0;
   return frame - contextOffset;
 }, Freeze = ({
@@ -1653,7 +1860,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   if (!Number.isFinite(frameToFreeze)) {
     throw new Error(`The 'frame' prop of <Freeze /> must be a finite number, but it is ${frameToFreeze}.`);
   }
-  const isActive = useMemo8(() => {
+  const isActive = useMemo9(() => {
     if (typeof active === "boolean") {
       return active;
     }
@@ -1661,10 +1868,10 @@ Check that all your Remotion packages are on the same version. If your dependenc
       return active(frame);
     }
   }, [active, frame]);
-  const timelineContext = useContext10(TimelineContext);
-  const sequenceContext = useContext10(SequenceContext);
+  const timelineContext = useContext11(TimelineContext);
+  const sequenceContext = useContext11(SequenceContext);
   const relativeFrom = sequenceContext?.relativeFrom ?? 0;
-  const timelineValue = useMemo8(() => {
+  const timelineValue = useMemo9(() => {
     if (!isActive) {
       return timelineContext;
     }
@@ -1679,7 +1886,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
       }
     };
   }, [isActive, timelineContext, videoConfig.id, frameToFreeze, relativeFrom]);
-  const newSequenceContext = useMemo8(() => {
+  const newSequenceContext = useMemo9(() => {
     if (!sequenceContext) {
       return null;
     }
@@ -1692,9 +1899,9 @@ Check that all your Remotion packages are on the same version. If your dependenc
       cumulatedFrom: 0
     };
   }, [sequenceContext, isActive]);
-  return /* @__PURE__ */ jsx72(TimelineContext.Provider, {
+  return /* @__PURE__ */ jsx82(TimelineContext.Provider, {
     value: timelineValue,
-    children: /* @__PURE__ */ jsx72(SequenceContext.Provider, {
+    children: /* @__PURE__ */ jsx82(SequenceContext.Provider, {
       value: newSequenceContext,
       children
     })
@@ -1714,9 +1921,9 @@ Check that all your Remotion packages are on the same version. If your dependenc
   ...other
 }, ref) => {
   const { layout = "absolute-fill" } = other;
-  const [id] = useState5(() => String(Math.random()));
-  const parentSequence = useContext11(SequenceContext);
-  const { rootId } = useContext11(TimelineContext);
+  const [id] = useState6(() => String(Math.random()));
+  const parentSequence = useContext12(SequenceContext);
+  const { rootId } = useContext12(TimelineContext);
   const cumulatedFrom = parentSequence ? parentSequence.cumulatedFrom + parentSequence.relativeFrom : 0;
   const nonce = useNonce();
   if (layout !== "absolute-fill" && layout !== "none") {
@@ -1741,15 +1948,15 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const videoConfig = useVideoConfig();
   const parentSequenceDuration = parentSequence ? Math.min(parentSequence.durationInFrames - from, durationInFrames) : durationInFrames;
   const actualDurationInFrames = Math.max(0, Math.min(videoConfig.durationInFrames - from, parentSequenceDuration));
-  const { registerSequence, unregisterSequence } = useContext11(SequenceManager);
-  const { hidden } = useContext11(SequenceVisibilityToggleContext);
-  const premounting = useMemo9(() => {
+  const { registerSequence, unregisterSequence } = useContext12(SequenceManager);
+  const { hidden } = useContext12(SequenceVisibilityToggleContext);
+  const premounting = useMemo10(() => {
     return parentSequence?.premounting || Boolean(other._remotionInternalIsPremounting);
   }, [other._remotionInternalIsPremounting, parentSequence?.premounting]);
-  const postmounting = useMemo9(() => {
+  const postmounting = useMemo10(() => {
     return parentSequence?.postmounting || Boolean(other._remotionInternalIsPostmounting);
   }, [other._remotionInternalIsPostmounting, parentSequence?.postmounting]);
-  const contextValue = useMemo9(() => {
+  const contextValue = useMemo10(() => {
     return {
       cumulatedFrom,
       relativeFrom: from,
@@ -1776,7 +1983,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     premountDisplay,
     postmountDisplay
   ]);
-  const timelineClipName = useMemo9(() => {
+  const timelineClipName = useMemo10(() => {
     return name ?? "";
   }, [name]);
   const env = useRemotionEnvironment();
@@ -1824,7 +2031,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const endThreshold = Math.ceil(cumulatedFrom + from + durationInFrames - 1);
   const content = absoluteFrame < cumulatedFrom + from ? null : absoluteFrame > endThreshold ? null : children;
   const styleIfThere = other.layout === "none" ? undefined : other.style;
-  const defaultStyle = useMemo9(() => {
+  const defaultStyle = useMemo10(() => {
     return {
       flexDirection: undefined,
       ...width ? { width } : {},
@@ -1839,9 +2046,9 @@ Check that all your Remotion packages are on the same version. If your dependenc
   if (isSequenceHidden) {
     return null;
   }
-  return /* @__PURE__ */ jsx82(SequenceContext.Provider, {
+  return /* @__PURE__ */ jsx92(SequenceContext.Provider, {
     value: contextValue,
-    children: content === null ? null : other.layout === "none" ? content : /* @__PURE__ */ jsx82(AbsoluteFill, {
+    children: content === null ? null : other.layout === "none" ? content : /* @__PURE__ */ jsx92(AbsoluteFill, {
       ref,
       style: defaultStyle,
       className: other.className,
@@ -1868,7 +2075,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const postmountingActive = frame > endThreshold && frame <= endThreshold + postmountFor;
   const freezeFrame = premountingActive ? from : postmountingActive ? from + durationInFrames - 1 : 0;
   const isFreezingActive = premountingActive || postmountingActive;
-  const style = useMemo9(() => {
+  const style = useMemo10(() => {
     return {
       ...passedStyle,
       opacity: premountingActive || postmountingActive ? 0 : 1,
@@ -1883,10 +2090,10 @@ Check that all your Remotion packages are on the same version. If your dependenc
     styleWhilePremounted,
     styleWhilePostmounted
   ]);
-  return /* @__PURE__ */ jsx82(Freeze, {
+  return /* @__PURE__ */ jsx92(Freeze, {
     frame: freezeFrame,
     active: isFreezingActive,
-    children: /* @__PURE__ */ jsx82(Sequence, {
+    children: /* @__PURE__ */ jsx92(Sequence, {
       ref,
       from,
       durationInFrames,
@@ -1895,154 +2102,24 @@ Check that all your Remotion packages are on the same version. If your dependenc
       _remotionInternalPostmountDisplay: postmountFor,
       _remotionInternalIsPremounting: premountingActive,
       _remotionInternalIsPostmounting: postmountingActive,
-      ...otherProps
-    })
-  });
-}, PremountedPostmountedSequence, SequenceRefForwardingFunction = (props, ref) => {
-  const env = useRemotionEnvironment();
-  if (props.layout !== "none" && !env.isRendering) {
-    if (props.premountFor || props.postmountFor) {
-      return /* @__PURE__ */ jsx82(PremountedPostmountedSequence, {
-        ...props,
-        ref
-      });
-    }
-  }
-  return /* @__PURE__ */ jsx82(RegularSequence, {
-    ...props,
-    ref
-  });
-}, Sequence, isErrorLike = (err) => {
-  if (err instanceof Error) {
-    return true;
-  }
-  if (err === null) {
-    return false;
-  }
-  if (typeof err !== "object") {
-    return false;
-  }
-  if (!("stack" in err)) {
-    return false;
-  }
-  if (typeof err.stack !== "string") {
-    return false;
-  }
-  if (!("message" in err)) {
-    return false;
-  }
-  if (typeof err.message !== "string") {
-    return false;
-  }
-  return true;
-}, logLevels, getNumberForLogLevel = (level) => {
-  return logLevels.indexOf(level);
-}, isEqualOrBelowLogLevel = (currentLevel, level) => {
-  return getNumberForLogLevel(currentLevel) <= getNumberForLogLevel(level);
-}, transformArgs = ({
-  args,
-  logLevel,
-  tag
-}) => {
-  const arr = [...args];
-  if (getRemotionEnvironment().isRendering && !getRemotionEnvironment().isClientSideRendering) {
-    arr.unshift(Symbol.for(`__remotion_level_${logLevel}`));
-  }
-  if (tag && getRemotionEnvironment().isRendering && !getRemotionEnvironment().isClientSideRendering) {
-    arr.unshift(Symbol.for(`__remotion_tag_${tag}`));
-  }
-  return arr;
-}, verbose = (options, ...args) => {
-  if (isEqualOrBelowLogLevel(options.logLevel, "verbose")) {
-    return console.debug(...transformArgs({ args, logLevel: "verbose", tag: options.tag }));
-  }
-}, trace = (options, ...args) => {
-  if (isEqualOrBelowLogLevel(options.logLevel, "trace")) {
-    return console.debug(...transformArgs({ args, logLevel: "trace", tag: options.tag }));
-  }
-}, info = (options, ...args) => {
-  if (isEqualOrBelowLogLevel(options.logLevel, "info")) {
-    return console.log(...transformArgs({ args, logLevel: "info", tag: options.tag }));
-  }
-}, warn = (options, ...args) => {
-  if (isEqualOrBelowLogLevel(options.logLevel, "warn")) {
-    return console.warn(...transformArgs({ args, logLevel: "warn", tag: options.tag }));
-  }
-}, error = (options, ...args) => {
-  return console.error(...transformArgs({ args, logLevel: "error", tag: options.tag }));
-}, Log, handles, DELAY_RENDER_CALLSTACK_TOKEN = "The delayRender was called:", DELAY_RENDER_RETRIES_LEFT = "Retries left: ", DELAY_RENDER_RETRY_TOKEN = "- Rendering the frame will be retried.", DELAY_RENDER_CLEAR_TOKEN = "handle was cleared after", defaultTimeout = 30000, delayRenderInternal = (environment, label, options) => {
-  if (typeof label !== "string" && typeof label !== "undefined") {
-    throw new Error("The label parameter of delayRender() must be a string or undefined, got: " + JSON.stringify(label));
-  }
-  const handle = Math.random();
-  handles.push(handle);
-  const called = Error().stack?.replace(/^Error/g, "") ?? "";
-  if (environment.isRendering) {
-    const timeoutToUse = (options?.timeoutInMilliseconds ?? (typeof window === "undefined" ? defaultTimeout : window.remotion_puppeteerTimeout ?? defaultTimeout)) - 2000;
-    if (typeof window !== "undefined") {
-      const retriesLeft = (options?.retries ?? 0) - (window.remotion_attempt - 1);
-      window.remotion_delayRenderTimeouts[handle] = {
-        label: label ?? null,
-        startTime: Date.now(),
-        timeout: setTimeout(() => {
-          const message = [
-            `A delayRender()`,
-            label ? `"${label}"` : null,
-            `was called but not cleared after ${timeoutToUse}ms. See https://remotion.dev/docs/timeout for help.`,
-            retriesLeft > 0 ? DELAY_RENDER_RETRIES_LEFT + retriesLeft : null,
-            retriesLeft > 0 ? DELAY_RENDER_RETRY_TOKEN : null,
-            DELAY_RENDER_CALLSTACK_TOKEN,
-            called
-          ].filter(truthy2).join(" ");
-          cancelRender(Error(message));
-        }, timeoutToUse)
-      };
+      ...otherProps
+    })
+  });
+}, PremountedPostmountedSequence, SequenceRefForwardingFunction = (props, ref) => {
+  const env = useRemotionEnvironment();
+  if (props.layout !== "none" && !env.isRendering) {
+    if (props.premountFor || props.postmountFor) {
+      return /* @__PURE__ */ jsx92(PremountedPostmountedSequence, {
+        ...props,
+        ref
+      });
     }
   }
-  if (typeof window !== "undefined") {
-    window.remotion_renderReady = false;
-  }
-  return handle;
-}, continueRenderInternal = (handle, environment) => {
-  if (typeof handle === "undefined") {
-    throw new TypeError("The continueRender() method must be called with a parameter that is the return value of delayRender(). No value was passed.");
-  }
-  if (typeof handle !== "number") {
-    throw new TypeError("The parameter passed into continueRender() must be the return value of delayRender() which is a number. Got: " + JSON.stringify(handle));
-  }
-  handles = handles.filter((h) => {
-    if (h === handle) {
-      if (environment.isRendering) {
-        if (!window.remotion_delayRenderTimeouts[handle]) {
-          return false;
-        }
-        const { label, startTime, timeout } = window.remotion_delayRenderTimeouts[handle];
-        clearTimeout(timeout);
-        const message = [
-          label ? `"${label}"` : "A handle",
-          DELAY_RENDER_CLEAR_TOKEN,
-          `${Date.now() - startTime}ms`
-        ].filter(truthy2).join(" ");
-        Log.verbose({ logLevel: window.remotion_logLevel, tag: "delayRender()" }, message);
-        delete window.remotion_delayRenderTimeouts[handle];
-      }
-      return false;
-    }
-    return true;
+  return /* @__PURE__ */ jsx92(RegularSequence, {
+    ...props,
+    ref
   });
-  if (handles.length === 0 && typeof window !== "undefined") {
-    window.remotion_renderReady = true;
-  }
-}, useDelayRender = () => {
-  const environment = useRemotionEnvironment();
-  const delayRender2 = useCallback4((label, options) => {
-    return delayRenderInternal(environment, label, options);
-  }, [environment]);
-  const continueRender2 = useCallback4((handle) => {
-    continueRenderInternal(handle, environment);
-  }, [environment]);
-  return { delayRender: delayRender2, continueRender: continueRender2 };
-}, calcArgs = (fit, frameSize, canvasSize) => {
+}, Sequence, calcArgs = (fit, frameSize, canvasSize) => {
   switch (fit) {
     case "fill": {
       return [
@@ -2090,7 +2167,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
       throw new Error("Unknown fit: " + fit);
   }
 }, CanvasRefForwardingFunction = ({ width, height, fit, className, style }, ref) => {
-  const canvasRef = useRef2(null);
+  const canvasRef = useRef3(null);
   const draw = useCallback5((imageData) => {
     const canvas = canvasRef.current;
     const canvasWidth = width ?? imageData.displayWidth;
@@ -2130,7 +2207,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
       }
     };
   }, [draw]);
-  return /* @__PURE__ */ jsx92("canvas", {
+  return /* @__PURE__ */ jsx102("canvas", {
     ref: canvasRef,
     className,
     style
@@ -2304,7 +2381,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }
   validateContent(artifact.content);
 }, RenderAssetManager, RenderAssetManagerProvider = ({ children }) => {
-  const [renderAssets, setRenderAssets] = useState7([]);
+  const [renderAssets, setRenderAssets] = useState8([]);
   const registerRenderAsset = useCallback6((renderAsset) => {
     validateRenderAsset(renderAsset);
     setRenderAssets((assets) => {
@@ -2316,7 +2393,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
       return assts.filter((a) => a.id !== id);
     });
   }, []);
-  useLayoutEffect2(() => {
+  useLayoutEffect3(() => {
     if (typeof window !== "undefined") {
       window.remotion_collectAssets = () => {
         setRenderAssets([]);
@@ -2324,22 +2401,22 @@ Check that all your Remotion packages are on the same version. If your dependenc
       };
     }
   }, [renderAssets]);
-  const contextValue = useMemo10(() => {
+  const contextValue = useMemo11(() => {
     return {
       registerRenderAsset,
       unregisterRenderAsset,
       renderAssets
     };
   }, [renderAssets, registerRenderAsset, unregisterRenderAsset]);
-  return /* @__PURE__ */ jsx11(RenderAssetManager.Provider, {
+  return /* @__PURE__ */ jsx12(RenderAssetManager.Provider, {
     value: contextValue,
     children
   });
 }, ArtifactThumbnail, Artifact = ({ filename, content, downloadBehavior }) => {
-  const { registerRenderAsset, unregisterRenderAsset } = useContext12(RenderAssetManager);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext13(RenderAssetManager);
   const env = useRemotionEnvironment();
   const frame = useCurrentFrame();
-  const [id] = useState8(() => {
+  const [id] = useState9(() => {
     return String(Math.random());
   });
   useEffect5(() => {
@@ -2414,7 +2491,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const actualDuration = duration / playbackRate;
   return Math.floor(actualDuration);
 }, LoopContext, useLoop = () => {
-  return React10.useContext(LoopContext);
+  return React11.useContext(LoopContext);
 }, Loop = ({ durationInFrames, times = Infinity, children, name, ...props }) => {
   const currentFrame = useCurrentFrame();
   const { durationInFrames: compDuration } = useVideoConfig();
@@ -2438,22 +2515,22 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const iteration = Math.floor(currentFrame / durationInFrames);
   const start = iteration * durationInFrames;
   const from = Math.min(start, maxFrame);
-  const loopDisplay = useMemo11(() => {
+  const loopDisplay = useMemo12(() => {
     return {
       numberOfTimes: actualTimes,
       startOffset: -from,
       durationInFrames
     };
   }, [actualTimes, durationInFrames, from]);
-  const loopContext = useMemo11(() => {
+  const loopContext = useMemo12(() => {
     return {
       iteration: Math.floor(currentFrame / durationInFrames),
       durationInFrames
     };
   }, [currentFrame, durationInFrames]);
-  return /* @__PURE__ */ jsx12(LoopContext.Provider, {
+  return /* @__PURE__ */ jsx13(LoopContext.Provider, {
     value: loopContext,
-    children: /* @__PURE__ */ jsx12(Sequence, {
+    children: /* @__PURE__ */ jsx13(Sequence, {
       durationInFrames,
       from,
       name: name ?? "<Loop>",
@@ -2475,7 +2552,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   preloads = updater(preloads);
   updaters.forEach((u) => u());
 }, PrefetchProvider = ({ children }) => {
-  const [_preloads, _setPreloads] = useState9(() => preloads);
+  const [_preloads, _setPreloads] = useState10(() => preloads);
   useEffect6(() => {
     const updaterFunction = () => {
       _setPreloads(preloads);
@@ -2485,7 +2562,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
       updaters = updaters.filter((u) => u !== updaterFunction);
     };
   }, []);
-  return /* @__PURE__ */ jsx13(PreloadContext.Provider, {
+  return /* @__PURE__ */ jsx14(PreloadContext.Provider, {
     value: _preloads,
     children
   });
@@ -2502,7 +2579,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }
   return src.slice(0, hashIndex);
 }, usePreload = (src) => {
-  const preloads2 = useContext13(PreloadContext);
+  const preloads2 = useContext14(PreloadContext);
   const hashFragmentIndex = removeAndGetHashFragment(src);
   const withoutHashFragment = getSrcWithoutHash(src);
   if (!preloads2[withoutHashFragment]) {
@@ -2777,13 +2854,13 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }
 }, DurationsContext, DurationsContextProvider = ({ children }) => {
   const [durations, setDurations] = useReducer(durationReducer, {});
-  const value = useMemo12(() => {
+  const value = useMemo13(() => {
     return {
       durations,
       setDurations
     };
   }, [durations]);
-  return /* @__PURE__ */ jsx14(DurationsContext.Provider, {
+  return /* @__PURE__ */ jsx15(DurationsContext.Provider, {
     value,
     children
   });
@@ -2799,31 +2876,17 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }
   return;
 }, LogLevelContext, useLogLevel = () => {
-  const { logLevel } = React13.useContext(LogLevelContext);
+  const { logLevel } = React14.useContext(LogLevelContext);
   if (logLevel === null) {
     throw new Error("useLogLevel must be used within a LogLevelProvider");
   }
   return logLevel;
 }, useMountTime = () => {
-  const { mountTime } = React13.useContext(LogLevelContext);
+  const { mountTime } = React14.useContext(LogLevelContext);
   if (mountTime === null) {
     throw new Error("useMountTime must be used within a LogLevelProvider");
   }
   return mountTime;
-}, random = (seed, dummy) => {
-  if (dummy !== undefined) {
-    throw new TypeError("random() takes only one argument");
-  }
-  if (seed === null) {
-    return Math.random();
-  }
-  if (typeof seed === "string") {
-    return mulberry32(hashCode(seed));
-  }
-  if (typeof seed === "number") {
-    return mulberry32(seed * 10000000000);
-  }
-  throw new Error("random() argument must be a number or a string");
 }, playAndHandleNotAllowedError = ({
   mediaRef,
   mediaType,
@@ -2911,7 +2974,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     Log.warn({ logLevel, tag: null }, "AudioContext is not supported in this browser");
   }
 }, useSingletonAudioContext = (logLevel, latencyHint) => {
-  const audioContext = useMemo13(() => {
+  const audioContext = useMemo14(() => {
     if (typeof AudioContext === "undefined") {
       warnOnce(logLevel);
       return null;
@@ -2944,15 +3007,17 @@ Check that all your Remotion packages are on the same version. If your dependenc
     return false;
   }
   return true;
-}, SharedAudioContext, SharedAudioContextProvider = ({ children, numberOfAudioTags, component, audioLatencyHint }) => {
-  const audios = useRef4([]);
-  const [initialNumberOfAudioTags] = useState10(numberOfAudioTags);
+}, SharedAudioContext, SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyHint }) => {
+  const audios = useRef5([]);
+  const [initialNumberOfAudioTags] = useState11(numberOfAudioTags);
   if (numberOfAudioTags !== initialNumberOfAudioTags) {
     throw new Error("The number of shared audio tags has changed dynamically. Once you have set this property, you cannot change it afterwards.");
   }
+  const compositionManager = useContext16(CompositionManager);
+  const component = compositionManager.compositions.find((c) => compositionManager.canvasContent?.type === "composition" ? c.id === compositionManager.canvasContent.compositionId : null);
   const logLevel = useLogLevel();
   const audioContext = useSingletonAudioContext(logLevel, audioLatencyHint);
-  const refs = useMemo14(() => {
+  const refs = useMemo15(() => {
     return new Array(numberOfAudioTags).fill(true).map(() => {
       const ref = createRef2();
       return {
@@ -2965,7 +3030,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
       };
     });
   }, [audioContext, numberOfAudioTags]);
-  const takenAudios = useRef4(new Array(numberOfAudioTags).fill(false));
+  const takenAudios = useRef5(new Array(numberOfAudioTags).fill(false));
   const rerenderAudios = useCallback7(() => {
     refs.forEach(({ ref, id }) => {
       const data = audios.current?.find((a) => a.id === id);
@@ -3071,7 +3136,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     });
     audioContext?.resume();
   }, [audioContext, logLevel, mountTime, refs, env.isPlayer]);
-  const value = useMemo14(() => {
+  const value = useMemo15(() => {
     return {
       registerAudio,
       unregisterAudio,
@@ -3102,7 +3167,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     value,
     children: [
       refs.map(({ id, ref }) => {
-        return /* @__PURE__ */ jsx15("audio", {
+        return /* @__PURE__ */ jsx16("audio", {
           ref,
           preload: "metadata",
           src: EMPTY_AUDIO
@@ -3116,12 +3181,12 @@ Check that all your Remotion packages are on the same version. If your dependenc
   audioId,
   premounting
 }) => {
-  const ctx = useContext15(SharedAudioContext);
-  const [elem] = useState10(() => {
+  const ctx = useContext16(SharedAudioContext);
+  const [elem] = useState11(() => {
     if (ctx && ctx.numberOfAudioTags > 0) {
       return ctx.registerAudio({ aud, audioId, premounting });
     }
-    const el = React14.createRef();
+    const el = React15.createRef();
     const mediaElementSourceNode = ctx?.audioContext ? makeSharedElementSourceNode({
       audioContext: ctx.audioContext,
       ref: el
@@ -3135,7 +3200,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
       premounting
     };
   });
-  const effectToUse = React14.useInsertionEffect ?? React14.useLayoutEffect;
+  const effectToUse = React15.useInsertionEffect ?? React15.useLayoutEffect;
   if (typeof document !== "undefined") {
     effectToUse(() => {
       if (ctx && ctx.numberOfAudioTags > 0) {
@@ -3231,9 +3296,9 @@ Check that all your Remotion packages are on the same version. If your dependenc
   duration: initialDuration,
   fps
 }) => {
-  const actualFromRef = useRef5(initialActualFrom);
-  const actualDuration = useRef5(initialDuration);
-  const actualSrc = useRef5(initialActualSrc);
+  const actualFromRef = useRef6(initialActualFrom);
+  const actualDuration = useRef6(initialDuration);
+  const actualSrc = useRef6(initialActualSrc);
   if (!isSubsetOfDuration({
     prevStartFrom: actualFromRef.current,
     newStartFrom: initialActualFrom,
@@ -3267,16 +3332,16 @@ Check that all your Remotion packages are on the same version. If your dependenc
   source,
   shouldUseWebAudioApi
 }) => {
-  const audioStuffRef = useRef6(null);
-  const currentVolumeRef = useRef6(volume);
+  const audioStuffRef = useRef7(null);
+  const currentVolumeRef = useRef7(volume);
   currentVolumeRef.current = volume;
-  const sharedAudioContext = useContext16(SharedAudioContext);
+  const sharedAudioContext = useContext17(SharedAudioContext);
   if (!sharedAudioContext) {
     throw new Error("useAmplification must be used within a SharedAudioContext");
   }
   const { audioContext } = sharedAudioContext;
   if (typeof window !== "undefined") {
-    useLayoutEffect3(() => {
+    useLayoutEffect4(() => {
       if (!audioContext) {
         return;
       }
@@ -3324,7 +3389,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }
   return audioStuffRef;
 }, useMediaStartsAt = () => {
-  const parentSequence = useContext17(SequenceContext);
+  const parentSequence = useContext18(SequenceContext);
   const startsAt = Math.min(0, parentSequence?.relativeFrom ?? 0);
   return startsAt;
 }, useFrameForVolumeProp = (behavior) => {
@@ -3383,9 +3448,9 @@ Check that all your Remotion packages are on the same version. If your dependenc
     throw new Error("No src passed");
   }
   const startsAt = useMediaStartsAt();
-  const parentSequence = useContext18(SequenceContext);
+  const parentSequence = useContext19(SequenceContext);
   const videoConfig = useVideoConfig();
-  const [initialVolume] = useState11(() => volume);
+  const [initialVolume] = useState12(() => volume);
   const mediaDuration = calculateMediaDuration({
     mediaDurationInFrames: videoConfig.durationInFrames,
     playbackRate,
@@ -3393,7 +3458,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     trimAfter
   });
   const duration = parentSequence ? Math.min(parentSequence.durationInFrames, mediaDuration) : mediaDuration;
-  const volumes = useMemo15(() => {
+  const volumes = useMemo16(() => {
     if (typeof volume === "number") {
       return volume;
     }
@@ -3412,7 +3477,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }, [initialVolume, mediaType, src, volume]);
   const doesVolumeChange = typeof volume === "function";
   const nonce = useNonce();
-  const { rootId } = useContext18(TimelineContext);
+  const { rootId } = useContext19(TimelineContext);
   const env = useRemotionEnvironment();
   return {
     volumes,
@@ -3437,9 +3502,9 @@ Check that all your Remotion packages are on the same version. If your dependenc
   postmountDisplay,
   loopDisplay
 }) => {
-  const parentSequence = useContext18(SequenceContext);
+  const parentSequence = useContext19(SequenceContext);
   const startsAt = useMediaStartsAt();
-  const { registerSequence, unregisterSequence } = useContext18(SequenceManager);
+  const { registerSequence, unregisterSequence } = useContext19(SequenceManager);
   const {
     volumes,
     duration,
@@ -3514,10 +3579,10 @@ Check that all your Remotion packages are on the same version. If your dependenc
     finalDisplayName
   ]);
 }, useBufferManager = (logLevel, mountTime) => {
-  const [blocks, setBlocks] = useState12([]);
-  const [onBufferingCallbacks, setOnBufferingCallbacks] = useState12([]);
-  const [onResumeCallbacks, setOnResumeCallbacks] = useState12([]);
-  const buffering = useRef7(false);
+  const [blocks, setBlocks] = useState13([]);
+  const [onBufferingCallbacks, setOnBufferingCallbacks] = useState13([]);
+  const [onResumeCallbacks, setOnResumeCallbacks] = useState13([]);
+  const buffering = useRef8(false);
   const addBlock = useCallback8((block) => {
     setBlocks((b) => [...b, block]);
     return {
@@ -3560,7 +3625,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     }
   }, [blocks]);
   if (typeof window !== "undefined") {
-    useLayoutEffect4(() => {
+    useLayoutEffect5(() => {
       if (blocks.length === 0) {
         onResumeCallbacks.forEach((c) => c());
         playbackLogging({
@@ -3572,18 +3637,18 @@ Check that all your Remotion packages are on the same version. If your dependenc
       }
     }, [blocks]);
   }
-  return useMemo16(() => {
+  return useMemo17(() => {
     return { addBlock, listenForBuffering, listenForResume, buffering };
   }, [addBlock, buffering, listenForBuffering, listenForResume]);
 }, BufferingContextReact, BufferingProvider = ({ children }) => {
-  const { logLevel, mountTime } = useContext19(LogLevelContext);
+  const { logLevel, mountTime } = useContext20(LogLevelContext);
   const bufferManager = useBufferManager(logLevel ?? "info", mountTime);
-  return /* @__PURE__ */ jsx16(BufferingContextReact.Provider, {
+  return /* @__PURE__ */ jsx17(BufferingContextReact.Provider, {
     value: bufferManager,
     children
   });
 }, useIsPlayerBuffering = (bufferManager) => {
-  const [isBuffering, setIsBuffering] = useState12(bufferManager.buffering.current);
+  const [isBuffering, setIsBuffering] = useState13(bufferManager.buffering.current);
   useEffect9(() => {
     const onBuffer = () => {
       setIsBuffering(true);
@@ -3604,9 +3669,9 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }, [bufferManager]);
   return isBuffering;
 }, useBufferState = () => {
-  const buffer = useContext20(BufferingContextReact);
+  const buffer = useContext21(BufferingContextReact);
   const addBlock = buffer ? buffer.addBlock : null;
-  return useMemo17(() => ({
+  return useMemo18(() => ({
     delayPlayback: () => {
       if (!addBlock) {
         throw new Error("Tried to enable the buffering state, but a Remotion context was not found. This API can only be called in a component that was passed to the Remotion Player or a <Composition>. Or you might have experienced a version mismatch - run `npx remotion versions` and ensure all packages have the same version. This error is thrown by the buffer state https://remotion.dev/docs/player/buffer-state");
@@ -3628,7 +3693,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   logLevel,
   mountTime
 }) => {
-  const bufferingRef = useRef8(false);
+  const bufferingRef = useRef9(false);
   const { delayPlayback } = useBufferState();
   const bufferUntilFirstFrame = useCallback9((requestedTime) => {
     if (mediaType !== "video") {
@@ -3701,14 +3766,14 @@ Check that all your Remotion packages are on the same version. If your dependenc
     onVariableFpsVideoDetected,
     pauseWhenBuffering
   ]);
-  return useMemo18(() => {
+  return useMemo19(() => {
     return {
       isBuffering: () => bufferingRef.current,
       bufferUntilFirstFrame
     };
   }, [bufferUntilFirstFrame]);
 }, useCurrentTimeOfMediaTagWithUpdateTimeStamp = (mediaRef) => {
-  const lastUpdate = React16.useRef({
+  const lastUpdate = React17.useRef({
     time: mediaRef.current?.currentTime ?? 0,
     lastUpdate: performance.now()
   });
@@ -3746,7 +3811,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   src
 }) => {
   const buffer = useBufferState();
-  const [isBuffering, setIsBuffering] = useState13(false);
+  const [isBuffering, setIsBuffering] = useState14(false);
   useEffect10(() => {
     let cleanupFns = [];
     const { current } = element;
@@ -3878,7 +3943,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   lastSeek,
   onVariableFpsVideoDetected
 }) => {
-  const currentTime = useRef9(null);
+  const currentTime = useRef10(null);
   useEffect11(() => {
     const { current } = mediaRef;
     if (current) {
@@ -3995,21 +4060,21 @@ Check that all your Remotion packages are on the same version. If your dependenc
   isPostmounting,
   onAutoPlayError
 }) => {
-  const { playbackRate: globalPlaybackRate } = useContext21(TimelineContext);
+  const { playbackRate: globalPlaybackRate } = useContext22(TimelineContext);
   const frame = useCurrentFrame();
   const absoluteFrame = useTimelinePosition();
   const [playing] = usePlayingState();
-  const buffering = useContext21(BufferingContextReact);
+  const buffering = useContext22(BufferingContextReact);
   const { fps } = useVideoConfig();
   const mediaStartsAt = useMediaStartsAt();
-  const lastSeekDueToShift = useRef10(null);
-  const lastSeek = useRef10(null);
+  const lastSeekDueToShift = useRef11(null);
+  const lastSeek = useRef11(null);
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
   if (!buffering) {
     throw new Error("useMediaPlayback must be used inside a <BufferingContext>");
   }
-  const isVariableFpsVideoMap = useRef10({});
+  const isVariableFpsVideoMap = useRef11({});
   const onVariableFpsVideoDetected = useCallback10(() => {
     if (!src) {
       return;
@@ -4100,7 +4165,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     isPostmounting
   ]);
   const env = useRemotionEnvironment();
-  useLayoutEffect5(() => {
+  useLayoutEffect6(() => {
     const playbackRateToSet = Math.max(0, playbackRate);
     if (mediaRef.current && mediaRef.current.playbackRate !== playbackRateToSet) {
       mediaRef.current.playbackRate = playbackRateToSet;
@@ -4230,7 +4295,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   isPremounting,
   isPostmounting
 }) => {
-  const { audioAndVideoTags, imperativePlaying } = useContext22(TimelineContext);
+  const { audioAndVideoTags, imperativePlaying } = useContext23(TimelineContext);
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
   const env = useRemotionEnvironment();
@@ -4273,15 +4338,15 @@ Check that all your Remotion packages are on the same version. If your dependenc
     env.isPlayer
   ]);
 }, MediaVolumeContext, SetMediaVolumeContext, useMediaVolumeState = () => {
-  const { mediaVolume } = useContext23(MediaVolumeContext);
-  const { setMediaVolume } = useContext23(SetMediaVolumeContext);
-  return useMemo19(() => {
+  const { mediaVolume } = useContext24(MediaVolumeContext);
+  const { setMediaVolume } = useContext24(SetMediaVolumeContext);
+  return useMemo20(() => {
     return [mediaVolume, setMediaVolume];
   }, [mediaVolume, setMediaVolume]);
 }, useMediaMutedState = () => {
-  const { mediaMuted } = useContext23(MediaVolumeContext);
-  const { setMediaMuted } = useContext23(SetMediaVolumeContext);
-  return useMemo19(() => {
+  const { mediaMuted } = useContext24(MediaVolumeContext);
+  const { setMediaMuted } = useContext24(SetMediaVolumeContext);
+  return useMemo20(() => {
     return [mediaMuted, setMediaMuted];
   }, [mediaMuted, setMediaMuted]);
 }, warnAboutTooHighVolume = (volume) => {
@@ -4289,7 +4354,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     throw new Error(`Volume was set to ${volume}, but regular volume is 1, not 100. Did you forget to divide by 100? Set a volume of less than 100 to dismiss this error.`);
   }
 }, AudioForDevelopmentForwardRefFunction = (props, ref) => {
-  const [initialShouldPreMountAudioElements] = useState14(props.shouldPreMountAudioTags);
+  const [initialShouldPreMountAudioElements] = useState15(props.shouldPreMountAudioTags);
   if (props.shouldPreMountAudioTags !== initialShouldPreMountAudioElements) {
     throw new Error("Cannot change the behavior for pre-mounting audio tags dynamically.");
   }
@@ -4328,13 +4393,13 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const [mediaVolume] = useMediaVolumeState();
   const [mediaMuted] = useMediaMutedState();
   const volumePropFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
-  const { hidden } = useContext24(SequenceVisibilityToggleContext);
+  const { hidden } = useContext25(SequenceVisibilityToggleContext);
   if (!src) {
     throw new TypeError("No 'src' was passed to <Html5Audio>.");
   }
   const preloadedSrc = usePreload(src);
-  const sequenceContext = useContext24(SequenceContext);
-  const [timelineId] = useState14(() => String(Math.random()));
+  const sequenceContext = useContext25(SequenceContext);
+  const [timelineId] = useState15(() => String(Math.random()));
   const isSequenceHidden = hidden[timelineId] ?? false;
   const userPreferredVolume = evaluateVolume({
     frame: volumePropFrame,
@@ -4346,7 +4411,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     crossOrigin,
     requestsVideoFrame: false
   });
-  const propsToPass = useMemo20(() => {
+  const propsToPass = useMemo21(() => {
     return {
       muted: muted || mediaMuted || isSequenceHidden || userPreferredVolume <= 0,
       src: preloadedSrc,
@@ -4364,7 +4429,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     userPreferredVolume,
     crossOriginValue
   ]);
-  const id = useMemo20(() => `audio-${random(src ?? "")}-${sequenceContext?.relativeFrom}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.durationInFrames}-muted:${props.muted}-loop:${props.loop}`, [
+  const id = useMemo21(() => `audio-${random(src ?? "")}-${sequenceContext?.relativeFrom}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.durationInFrames}-muted:${props.muted}-loop:${props.loop}`, [
     src,
     sequenceContext?.relativeFrom,
     sequenceContext?.cumulatedFrom,
@@ -4372,7 +4437,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     props.muted,
     props.loop
   ]);
-  const context = useContext24(SharedAudioContext);
+  const context = useContext25(SharedAudioContext);
   if (!context) {
     throw new Error("SharedAudioContext not found");
   }
@@ -4425,7 +4490,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   useImperativeHandle5(ref, () => {
     return audioRef.current;
   }, [audioRef]);
-  const currentOnDurationCallback = useRef11(onDuration);
+  const currentOnDurationCallback = useRef12(onDuration);
   currentOnDurationCallback.current = onDuration;
   useEffect14(() => {
     const { current } = audioRef;
@@ -4447,14 +4512,14 @@ Check that all your Remotion packages are on the same version. If your dependenc
   if (initialShouldPreMountAudioElements) {
     return null;
   }
-  return /* @__PURE__ */ jsx17("audio", {
+  return /* @__PURE__ */ jsx18("audio", {
     ref: audioRef,
     preload: "metadata",
     crossOrigin: crossOriginValue,
     ...propsToPass
   });
 }, AudioForPreview, AudioForRenderingRefForwardingFunction = (props, ref) => {
-  const audioRef = useRef12(null);
+  const audioRef = useRef13(null);
   const {
     volume: volumeProp,
     playbackRate,
@@ -4476,10 +4541,10 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const absoluteFrame = useTimelinePosition();
   const volumePropFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const frame = useCurrentFrame();
-  const sequenceContext = useContext25(SequenceContext);
-  const { registerRenderAsset, unregisterRenderAsset } = useContext25(RenderAssetManager);
+  const sequenceContext = useContext26(SequenceContext);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext26(RenderAssetManager);
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
-  const id = useMemo21(() => `audio-${random(props.src ?? "")}-${sequenceContext?.relativeFrom}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.durationInFrames}`, [
+  const id = useMemo222(() => `audio-${random(props.src ?? "")}-${sequenceContext?.relativeFrom}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.durationInFrames}`, [
     props.src,
     sequenceContext?.relativeFrom,
     sequenceContext?.cumulatedFrom,
@@ -4538,7 +4603,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   ]);
   const { src } = props;
   const needsToRenderAudioTag = ref || _remotionInternalNeedsDurationCalculation;
-  useLayoutEffect6(() => {
+  useLayoutEffect7(() => {
     if (window.process?.env?.NODE_ENV === "test") {
       return;
     }
@@ -4578,13 +4643,13 @@ Check that all your Remotion packages are on the same version. If your dependenc
   if (!needsToRenderAudioTag) {
     return null;
   }
-  return /* @__PURE__ */ jsx18("audio", {
+  return /* @__PURE__ */ jsx19("audio", {
     ref: audioRef,
     ...nativeProps,
     onError: onNativeError
   });
 }, AudioForRendering, AudioRefForwardingFunction = (props, ref) => {
-  const audioContext = useContext26(SharedAudioContext);
+  const audioContext = useContext27(SharedAudioContext);
   const {
     startFrom,
     endAt,
@@ -4600,7 +4665,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const { loop, ...propsOtherThanLoop } = props;
   const { fps } = useVideoConfig();
   const environment = useRemotionEnvironment();
-  const { durations, setDurations } = useContext26(DurationsContext);
+  const { durations, setDurations } = useContext27(DurationsContext);
   if (typeof props.src !== "string") {
     throw new TypeError(`The \`<Html5Audio>\` tag requires a string for \`src\`, but got ${JSON.stringify(props.src)} instead.`);
   }
@@ -4632,14 +4697,14 @@ Check that all your Remotion packages are on the same version. If your dependenc
   });
   if (loop && durationFetched !== undefined) {
     if (!Number.isFinite(durationFetched)) {
-      return /* @__PURE__ */ jsx19(Html5Audio, {
+      return /* @__PURE__ */ jsx20(Html5Audio, {
         ...propsOtherThanLoop,
         ref,
         _remotionInternalNativeLoopPassed: true
       });
     }
     const duration = durationFetched * fps;
-    return /* @__PURE__ */ jsx19(Loop, {
+    return /* @__PURE__ */ jsx20(Loop, {
       layout: "none",
       durationInFrames: calculateMediaDuration({
         trimAfter: trimAfterValue,
@@ -4647,7 +4712,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
         playbackRate: props.playbackRate ?? 1,
         trimBefore: trimBeforeValue
       }),
-      children: /* @__PURE__ */ jsx19(Html5Audio, {
+      children: /* @__PURE__ */ jsx20(Html5Audio, {
         ...propsOtherThanLoop,
         ref,
         _remotionInternalNativeLoopPassed: true
@@ -4655,13 +4720,13 @@ Check that all your Remotion packages are on the same version. If your dependenc
     });
   }
   if (typeof trimBeforeValue !== "undefined" || typeof trimAfterValue !== "undefined") {
-    return /* @__PURE__ */ jsx19(Sequence, {
+    return /* @__PURE__ */ jsx20(Sequence, {
       layout: "none",
       from: 0 - (trimBeforeValue ?? 0),
       showInTimeline: false,
       durationInFrames: trimAfterValue,
       name,
-      children: /* @__PURE__ */ jsx19(Html5Audio, {
+      children: /* @__PURE__ */ jsx20(Html5Audio, {
         _remotionInternalNeedsDurationCalculation: Boolean(loop),
         pauseWhenBuffering: pauseWhenBuffering ?? false,
         ...otherProps,
@@ -4671,7 +4736,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }
   validateMediaProps({ playbackRate: props.playbackRate, volume: props.volume }, "Html5Audio");
   if (environment.isRendering) {
-    return /* @__PURE__ */ jsx19(AudioForRendering, {
+    return /* @__PURE__ */ jsx20(AudioForRendering, {
       onDuration,
       ...props,
       ref,
@@ -4679,7 +4744,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
       _remotionInternalNeedsDurationCalculation: Boolean(loop)
     });
   }
-  return /* @__PURE__ */ jsx19(AudioForPreview, {
+  return /* @__PURE__ */ jsx20(AudioForPreview, {
     _remotionInternalNativeLoopPassed: props._remotionInternalNativeLoopPassed ?? false,
     _remotionInternalStack: stack ?? null,
     shouldPreMountAudioTags: audioContext !== null && audioContext.numberOfAudioTags > 0,
@@ -4696,7 +4761,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     style: container,
     id: "remotion-comp-loading",
     children: [
-      /* @__PURE__ */ jsx21("style", {
+      /* @__PURE__ */ jsx222("style", {
         type: "text/css",
         children: `
 				@keyframes anim {
@@ -4713,12 +4778,12 @@ Check that all your Remotion packages are on the same version. If your dependenc
 				}
 			`
       }),
-      /* @__PURE__ */ jsx21("svg", {
+      /* @__PURE__ */ jsx222("svg", {
         width: ICON_SIZE,
         height: ICON_SIZE,
         viewBox: "-100 -100 400 400",
         style: rotate,
-        children: /* @__PURE__ */ jsx21("path", {
+        children: /* @__PURE__ */ jsx222("path", {
           fill: "#555",
           stroke: "#555",
           strokeWidth: "100",
@@ -4763,7 +4828,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   componentName,
   noSuspense
 }) => {
-  const lazy = useMemo23(() => {
+  const lazy = useMemo24(() => {
     if ("component" in compProps) {
       if (typeof document === "undefined" || noSuspense) {
         return compProps.component;
@@ -4777,7 +4842,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
       if (typeof compProps.lazyComponent === "undefined") {
         throw new Error(`A value of \`undefined\` was passed to the \`lazyComponent\` prop. Check the value you are passing to the <${componentName}/> component.`);
       }
-      return React20.lazy(compProps.lazyComponent);
+      return React21.lazy(compProps.lazyComponent);
     }
     throw new Error("You must pass either 'component' or 'lazyComponent'");
   }, [compProps.component, compProps.lazyComponent]);
@@ -4813,7 +4878,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   schema,
   ...compProps
 }) => {
-  const compManager = useContext28(CompositionSetters);
+  const compManager = useContext29(CompositionSetters);
   const { registerComposition, unregisterComposition } = compManager;
   const video = useVideo();
   const lazy = useLazyComponent({
@@ -4824,7 +4889,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const nonce = useNonce();
   const isPlayer = useIsPlayer();
   const environment = useRemotionEnvironment();
-  const canUseComposition = useContext28(CanUseRemotionHooks);
+  const canUseComposition = useContext29(CanUseRemotionHooks);
   if (typeof window !== "undefined") {
     window.remotion_seenCompositionIds = Array.from(new Set([...window.remotion_seenCompositionIds ?? [], id]));
   }
@@ -4834,7 +4899,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     }
     throw new Error("<Composition> mounted inside another composition. See https://remotion.dev/docs/wrong-composition-mount for help.");
   }
-  const { folderName, parentName } = useContext28(FolderContext);
+  const { folderName, parentName } = useContext29(FolderContext);
   useEffect17(() => {
     if (!id) {
       throw new Error("No id for composition passed.");
@@ -4887,10 +4952,10 @@ Check that all your Remotion packages are on the same version. If your dependenc
     if (resolved === null || resolved.type !== "success" && resolved.type !== "success-and-refreshing") {
       return null;
     }
-    return createPortal(/* @__PURE__ */ jsx222(CanUseRemotionHooksProvider, {
-      children: /* @__PURE__ */ jsx222(Suspense, {
-        fallback: /* @__PURE__ */ jsx222(Loading, {}),
-        children: /* @__PURE__ */ jsx222(Comp, {
+    return createPortal(/* @__PURE__ */ jsx23(CanUseRemotionHooksProvider, {
+      children: /* @__PURE__ */ jsx23(Suspense, {
+        fallback: /* @__PURE__ */ jsx23(Loading, {}),
+        children: /* @__PURE__ */ jsx23(Comp, {
           ...resolved.result.props ?? {}
         })
       })
@@ -4901,10 +4966,10 @@ Check that all your Remotion packages are on the same version. If your dependenc
     if (resolved === null || resolved.type !== "success" && resolved.type !== "success-and-refreshing") {
       return null;
     }
-    return createPortal(/* @__PURE__ */ jsx222(CanUseRemotionHooksProvider, {
-      children: /* @__PURE__ */ jsx222(Suspense, {
-        fallback: /* @__PURE__ */ jsx222(Fallback, {}),
-        children: /* @__PURE__ */ jsx222(Comp, {
+    return createPortal(/* @__PURE__ */ jsx23(CanUseRemotionHooksProvider, {
+      children: /* @__PURE__ */ jsx23(Suspense, {
+        fallback: /* @__PURE__ */ jsx23(Fallback, {}),
+        children: /* @__PURE__ */ jsx23(Comp, {
           ...resolved.result.props ?? {}
         })
       })
@@ -4912,11 +4977,11 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }
   return null;
 }, Composition = (props2) => {
-  const { onlyRenderComposition } = useContext28(CompositionSetters);
+  const { onlyRenderComposition } = useContext29(CompositionSetters);
   if (onlyRenderComposition && onlyRenderComposition !== props2.id) {
     return null;
   }
-  return /* @__PURE__ */ jsx222(InnerComposition, {
+  return /* @__PURE__ */ jsx23(InnerComposition, {
     ...props2
   });
 }, kSplineTableSize = 11, kSampleStepSize, ENABLE_V5_BREAKING_CHANGES = false, IFrameRefForwarding = ({
@@ -4927,7 +4992,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   ...props2
 }, ref) => {
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
-  const [handle] = useState15(() => delayRender2(`Loading <IFrame> with source ${props2.src}`, {
+  const [handle] = useState16(() => delayRender2(`Loading <IFrame> with source ${props2.src}`, {
     retries: delayRenderRetries ?? undefined,
     timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined
   }));
@@ -4943,7 +5008,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
       console.error("Error loading iframe:", e, "Handle the event using the onError() prop to make this message disappear.");
     }
   }, [handle, onError, continueRender2]);
-  return /* @__PURE__ */ jsx23("iframe", {
+  return /* @__PURE__ */ jsx24("iframe", {
     referrerPolicy: "strict-origin-when-cross-origin",
     ...props2,
     ref,
@@ -4961,10 +5026,10 @@ Check that all your Remotion packages are on the same version. If your dependenc
   crossOrigin,
   ...props2
 }, ref) => {
-  const imageRef = useRef13(null);
-  const errors = useRef13({});
+  const imageRef = useRef14(null);
+  const errors = useRef14({});
   const { delayPlayback } = useBufferState();
-  const sequenceContext = useContext29(SequenceContext);
+  const sequenceContext = useContext30(SequenceContext);
   if (!src) {
     throw new Error('No "src" prop was passed to <Img>.');
   }
@@ -5014,7 +5079,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   if (typeof window !== "undefined") {
     const isPremounting = Boolean(sequenceContext?.premounting);
     const isPostmounting = Boolean(sequenceContext?.postmounting);
-    useLayoutEffect7(() => {
+    useLayoutEffect8(() => {
       if (window.process?.env?.NODE_ENV === "test") {
         if (imageRef.current) {
           imageRef.current.src = actualSrc;
@@ -5084,7 +5149,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     crossOrigin,
     requestsVideoFrame: false
   });
-  return /* @__PURE__ */ jsx24("img", {
+  return /* @__PURE__ */ jsx25("img", {
     ...props2,
     ref: imageRef,
     crossOrigin: crossOriginValue,
@@ -5093,15 +5158,15 @@ Check that all your Remotion packages are on the same version. If your dependenc
   });
 }, Img, compositionsRef, CompositionManagerProvider = ({
   children,
-  numberOfAudioTags,
   onlyRenderComposition,
   currentCompositionMetadata,
-  audioLatencyHint
+  initialCompositions,
+  initialCanvasContent
 }) => {
-  const [compositions, setCompositions] = useState16([]);
-  const currentcompositionsRef = useRef14(compositions);
-  const [folders, setFolders] = useState16([]);
-  const [canvasContent, setCanvasContent] = useState16(null);
+  const [folders, setFolders] = useState17([]);
+  const [canvasContent, setCanvasContent] = useState17(initialCanvasContent);
+  const [compositions, setCompositions] = useState17(initialCompositions);
+  const currentcompositionsRef = useRef15(compositions);
   const updateCompositions = useCallback14((updateComps) => {
     setCompositions((comps) => {
       const updated = updateComps(comps);
@@ -5144,7 +5209,6 @@ Check that all your Remotion packages are on the same version. If your dependenc
       getCompositions: () => currentcompositionsRef.current
     };
   }, []);
-  const composition = compositions.find((c2) => canvasContent?.type === "composition" ? c2.id === canvasContent.compositionId : null);
   const updateCompositionDefaultProps = useCallback14((id, newDefaultProps) => {
     setCompositions((comps) => {
       const updated = comps.map((c2) => {
@@ -5159,15 +5223,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
       return updated;
     });
   }, []);
-  const contextValue = useMemo24(() => {
-    return {
-      compositions,
-      folders,
-      currentCompositionMetadata,
-      canvasContent
-    };
-  }, [compositions, folders, currentCompositionMetadata, canvasContent]);
-  const setters = useMemo24(() => {
+  const compositionManagerSetters = useMemo25(() => {
     return {
       registerComposition,
       unregisterComposition,
@@ -5185,22 +5241,19 @@ Check that all your Remotion packages are on the same version. If your dependenc
     updateCompositionDefaultProps,
     onlyRenderComposition
   ]);
-  return /* @__PURE__ */ jsx25(CompositionManager.Provider, {
-    value: contextValue,
-    children: /* @__PURE__ */ jsx25(CompositionSetters.Provider, {
-      value: setters,
-      children: /* @__PURE__ */ jsx25(SequenceManagerProvider, {
-        children: /* @__PURE__ */ jsx25(RenderAssetManagerProvider, {
-          children: /* @__PURE__ */ jsx25(ResolveCompositionConfig, {
-            children: /* @__PURE__ */ jsx25(SharedAudioContextProvider, {
-              numberOfAudioTags,
-              component: composition?.component ?? null,
-              audioLatencyHint,
-              children
-            })
-          })
-        })
-      })
+  const compositionManagerContextValue = useMemo25(() => {
+    return {
+      compositions,
+      folders,
+      currentCompositionMetadata,
+      canvasContent
+    };
+  }, [compositions, folders, currentCompositionMetadata, canvasContent]);
+  return /* @__PURE__ */ jsx26(CompositionManager.Provider, {
+    value: compositionManagerContextValue,
+    children: /* @__PURE__ */ jsx26(CompositionSetters.Provider, {
+      value: compositionManagerSetters,
+      children
     })
   });
 }, exports_default_css, injected, injectCSS = (css) => {
@@ -5258,7 +5311,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     listeners = listeners.filter((l) => l !== fn);
   };
 }, MediaEnabledContext, useVideoEnabled = () => {
-  const context = useContext30(MediaEnabledContext);
+  const context = useContext31(MediaEnabledContext);
   if (!context) {
     return window.remotion_videoEnabled;
   }
@@ -5267,7 +5320,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }
   return context.videoEnabled;
 }, useAudioEnabled = () => {
-  const context = useContext30(MediaEnabledContext);
+  const context = useContext31(MediaEnabledContext);
   if (!context) {
     return window.remotion_audioEnabled;
   }
@@ -5280,8 +5333,8 @@ Check that all your Remotion packages are on the same version. If your dependenc
   videoEnabled,
   audioEnabled
 }) => {
-  const value = useMemo25(() => ({ videoEnabled, audioEnabled }), [videoEnabled, audioEnabled]);
-  return /* @__PURE__ */ jsx26(MediaEnabledContext.Provider, {
+  const value = useMemo26(() => ({ videoEnabled, audioEnabled }), [videoEnabled, audioEnabled]);
+  return /* @__PURE__ */ jsx27(MediaEnabledContext.Provider, {
     value,
     children
   });
@@ -5289,65 +5342,14 @@ Check that all your Remotion packages are on the same version. If your dependenc
   children,
   numberOfAudioTags,
   logLevel,
-  onlyRenderComposition,
-  currentCompositionMetadata,
   audioLatencyHint,
   videoEnabled,
-  audioEnabled
+  audioEnabled,
+  frameState
 }) => {
-  const [remotionRootId] = useState17(() => String(random(null)));
-  const [frame, setFrame] = useState17(() => getInitialFrameState());
-  const [playing, setPlaying] = useState17(false);
-  const imperativePlaying = useRef15(false);
-  const [fastRefreshes, setFastRefreshes] = useState17(0);
-  const [manualRefreshes, setManualRefreshes] = useState17(0);
-  const [playbackRate, setPlaybackRate] = useState17(1);
-  const audioAndVideoTags = useRef15([]);
-  const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
-  if (typeof window !== "undefined") {
-    useLayoutEffect8(() => {
-      window.remotion_setFrame = (f, composition, attempt) => {
-        window.remotion_attempt = attempt;
-        const id = delayRender2(`Setting the current frame to ${f}`);
-        let asyncUpdate = true;
-        setFrame((s) => {
-          const currentFrame = s[composition] ?? window.remotion_initialFrame;
-          if (currentFrame === f) {
-            asyncUpdate = false;
-            return s;
-          }
-          return {
-            ...s,
-            [composition]: f
-          };
-        });
-        if (asyncUpdate) {
-          requestAnimationFrame(() => continueRender2(id));
-        } else {
-          continueRender2(id);
-        }
-      };
-      window.remotion_isPlayer = false;
-    }, [continueRender2, delayRender2]);
-  }
-  const timelineContextValue = useMemo26(() => {
-    return {
-      frame,
-      playing,
-      imperativePlaying,
-      rootId: remotionRootId,
-      playbackRate,
-      setPlaybackRate,
-      audioAndVideoTags
-    };
-  }, [frame, playbackRate, playing, remotionRootId]);
-  const setTimelineContextValue = useMemo26(() => {
-    return {
-      setFrame,
-      setPlaying
-    };
-  }, []);
-  const nonceContext = useMemo26(() => {
+  const [fastRefreshes, setFastRefreshes] = useState18(0);
+  const [manualRefreshes, setManualRefreshes] = useState18(0);
+  const nonceContext = useMemo27(() => {
     let counter = 0;
     return {
       getNonce: () => counter++,
@@ -5355,7 +5357,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
       manualRefreshes
     };
   }, [fastRefreshes, manualRefreshes]);
-  const setNonceContext = useMemo26(() => {
+  const setNonceContext = useMemo27(() => {
     return {
       increaseManualRefreshes: () => {
         setManualRefreshes((i) => i + 1);
@@ -5373,32 +5375,33 @@ Check that all your Remotion packages are on the same version. If your dependenc
       }
     }
   }, []);
-  const logging = useMemo26(() => {
+  const logging = useMemo27(() => {
     return { logLevel, mountTime: Date.now() };
   }, [logLevel]);
-  return /* @__PURE__ */ jsx27(LogLevelContext.Provider, {
+  return /* @__PURE__ */ jsx28(LogLevelContext.Provider, {
     value: logging,
-    children: /* @__PURE__ */ jsx27(NonceContext.Provider, {
+    children: /* @__PURE__ */ jsx28(NonceContext.Provider, {
       value: nonceContext,
-      children: /* @__PURE__ */ jsx27(SetNonceContext.Provider, {
+      children: /* @__PURE__ */ jsx28(SetNonceContext.Provider, {
         value: setNonceContext,
-        children: /* @__PURE__ */ jsx27(TimelineContext.Provider, {
-          value: timelineContextValue,
-          children: /* @__PURE__ */ jsx27(SetTimelineContext.Provider, {
-            value: setTimelineContextValue,
-            children: /* @__PURE__ */ jsx27(MediaEnabledProvider, {
-              videoEnabled,
-              audioEnabled,
-              children: /* @__PURE__ */ jsx27(EditorPropsProvider, {
-                children: /* @__PURE__ */ jsx27(PrefetchProvider, {
-                  children: /* @__PURE__ */ jsx27(CompositionManagerProvider, {
-                    numberOfAudioTags,
-                    onlyRenderComposition,
-                    currentCompositionMetadata,
-                    audioLatencyHint,
-                    children: /* @__PURE__ */ jsx27(DurationsContextProvider, {
-                      children: /* @__PURE__ */ jsx27(BufferingProvider, {
-                        children
+        children: /* @__PURE__ */ jsx28(TimelineContextProvider, {
+          frameState,
+          children: /* @__PURE__ */ jsx28(MediaEnabledProvider, {
+            videoEnabled,
+            audioEnabled,
+            children: /* @__PURE__ */ jsx28(EditorPropsProvider, {
+              children: /* @__PURE__ */ jsx28(PrefetchProvider, {
+                children: /* @__PURE__ */ jsx28(SequenceManagerProvider, {
+                  children: /* @__PURE__ */ jsx28(RenderAssetManagerProvider, {
+                    children: /* @__PURE__ */ jsx28(ResolveCompositionConfig, {
+                      children: /* @__PURE__ */ jsx28(SharedAudioContextProvider, {
+                        numberOfAudioTags,
+                        audioLatencyHint,
+                        children: /* @__PURE__ */ jsx28(DurationsContextProvider, {
+                          children: /* @__PURE__ */ jsx28(BufferingProvider, {
+                            children
+                          })
+                        })
                       })
                     })
                   })
@@ -5479,13 +5482,13 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const frame = useCurrentFrame();
   const volumePropsFrame = useFrameForVolumeProp(loopVolumeCurveBehavior);
   const videoConfig = useUnsafeVideoConfig();
-  const sequenceContext = useContext31(SequenceContext);
+  const sequenceContext = useContext32(SequenceContext);
   const mediaStartsAt = useMediaStartsAt();
-  const { registerRenderAsset, unregisterRenderAsset } = useContext31(RenderAssetManager);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext32(RenderAssetManager);
   if (!src) {
     throw new TypeError("No `src` was passed to <OffthreadVideo>.");
   }
-  const id = useMemo27(() => `offthreadvideo-${random(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
+  const id = useMemo28(() => `offthreadvideo-${random(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     src,
     sequenceContext?.cumulatedFrom,
     sequenceContext?.relativeFrom,
@@ -5540,14 +5543,14 @@ Check that all your Remotion packages are on the same version. If your dependenc
     sequenceContext?.relativeFrom,
     audioStreamIndex
   ]);
-  const currentTime = useMemo27(() => {
+  const currentTime = useMemo28(() => {
     return getExpectedMediaFrameUncorrected({
       frame,
       playbackRate: playbackRate || 1,
       startFrom: -mediaStartsAt
     }) / videoConfig.fps;
   }, [frame, mediaStartsAt, playbackRate, videoConfig.fps]);
-  const actualSrc = useMemo27(() => {
+  const actualSrc = useMemo28(() => {
     return getOffthreadVideoSource({
       src,
       currentTime,
@@ -5555,7 +5558,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
       toneMapped
     });
   }, [toneMapped, currentTime, src, transparent]);
-  const [imageSrc, setImageSrc] = useState18(null);
+  const [imageSrc, setImageSrc] = useState19(null);
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
   useLayoutEffect9(() => {
     if (!window.remotion_videoEnabled) {
@@ -5635,7 +5638,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
       cancelRender("Failed to load image with src " + imageSrc);
     }
   }, [imageSrc, onError]);
-  const className = useMemo27(() => {
+  const className = useMemo28(() => {
     return [OBJECTFIT_CONTAIN_CLASS_NAME, props2.className].filter(truthy2).join(" ");
   }, [props2.className]);
   const onImageFrame = useCallback15((img) => {
@@ -5647,7 +5650,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     return null;
   }
   continueRender2(imageSrc.handle);
-  return /* @__PURE__ */ jsx28(Img, {
+  return /* @__PURE__ */ jsx29(Img, {
     src: imageSrc.src,
     delayRenderRetries,
     delayRenderTimeoutInMilliseconds,
@@ -5682,12 +5685,12 @@ Check that all your Remotion packages are on the same version. If your dependenc
     };
   }, [onVideoFrame, ref]);
 }, VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
-  const context = useContext32(SharedAudioContext);
+  const context = useContext33(SharedAudioContext);
   if (!context) {
     throw new Error("SharedAudioContext not found");
   }
   const videoRef = useRef16(null);
-  const sharedSource = useMemo28(() => {
+  const sharedSource = useMemo29(() => {
     if (!context.audioContext) {
       return null;
     }
@@ -5730,11 +5733,11 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }
   const volumePropFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const { fps, durationInFrames } = useVideoConfig();
-  const parentSequence = useContext32(SequenceContext);
-  const { hidden } = useContext32(SequenceVisibilityToggleContext);
+  const parentSequence = useContext33(SequenceContext);
+  const { hidden } = useContext33(SequenceVisibilityToggleContext);
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
-  const [timelineId] = useState19(() => String(Math.random()));
+  const [timelineId] = useState20(() => String(Math.random()));
   const isSequenceHidden = hidden[timelineId] ?? false;
   if (typeof acceptableTimeShift !== "undefined") {
     throw new Error("acceptableTimeShift has been removed. Use acceptableTimeShiftInSeconds instead.");
@@ -5800,7 +5803,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   useImperativeHandle9(ref, () => {
     return videoRef.current;
   }, []);
-  useState19(() => playbackLogging({
+  useState20(() => playbackLogging({
     logLevel,
     message: `Mounting video with source = ${actualSrc}, v=${VERSION}, user agent=${typeof navigator === "undefined" ? "server" : navigator.userAgent}`,
     tag: "video",
@@ -5865,7 +5868,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
       current.preload = "auto";
     }
   }, []);
-  const actualStyle = useMemo28(() => {
+  const actualStyle = useMemo29(() => {
     return {
       ...style,
       opacity: isSequenceHidden ? 0 : style?.opacity ?? 1
@@ -5875,7 +5878,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     crossOrigin,
     requestsVideoFrame: Boolean(onVideoFrame)
   });
-  return /* @__PURE__ */ jsx29("video", {
+  return /* @__PURE__ */ jsx30("video", {
     ref: videoRef,
     muted: muted || mediaMuted || isSequenceHidden || userPreferredVolume <= 0,
     playsInline: true,
@@ -5913,13 +5916,13 @@ Check that all your Remotion packages are on the same version. If your dependenc
     trimAfter
   });
   if (typeof trimBeforeValue !== "undefined" || typeof trimAfterValue !== "undefined") {
-    return /* @__PURE__ */ jsx30(Sequence, {
+    return /* @__PURE__ */ jsx31(Sequence, {
       layout: "none",
       from: 0 - (trimBeforeValue ?? 0),
       showInTimeline: false,
       durationInFrames: trimAfterValue,
       name,
-      children: /* @__PURE__ */ jsx30(InnerOffthreadVideo, {
+      children: /* @__PURE__ */ jsx31(InnerOffthreadVideo, {
         pauseWhenBuffering: pauseWhenBuffering ?? false,
         ...otherProps,
         trimAfter: undefined,
@@ -5934,7 +5937,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }
   validateMediaProps(props2, "Video");
   if (environment.isRendering) {
-    return /* @__PURE__ */ jsx30(OffthreadVideoForRendering, {
+    return /* @__PURE__ */ jsx31(OffthreadVideoForRendering, {
       pauseWhenBuffering: pauseWhenBuffering ?? false,
       ...otherProps,
       trimAfter: undefined,
@@ -5956,7 +5959,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     delayRenderTimeoutInMilliseconds,
     ...propsForPreview
   } = otherProps;
-  return /* @__PURE__ */ jsx30(VideoForPreview, {
+  return /* @__PURE__ */ jsx31(VideoForPreview, {
     _remotionInternalStack: stack ?? null,
     onDuration,
     onlyWarnForMediaSeekingError: true,
@@ -6004,7 +6007,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   if (imageFormat) {
     throw new TypeError(`The \`<OffthreadVideo>\` tag does no longer accept \`imageFormat\`. Use the \`transparent\` prop if you want to render a transparent video.`);
   }
-  return /* @__PURE__ */ jsx30(InnerOffthreadVideo, {
+  return /* @__PURE__ */ jsx31(InnerOffthreadVideo, {
     acceptableTimeShiftInSeconds,
     allowAmplificationDuringRender: allowAmplificationDuringRender ?? true,
     audioStreamIndex: audioStreamIndex ?? 0,
@@ -6038,29 +6041,29 @@ Check that all your Remotion packages are on the same version. If your dependenc
   });
 }, WATCH_REMOTION_STATIC_FILES = "remotion_staticFilesChanged", RemotionContextProvider = (props2) => {
   const { children, contexts } = props2;
-  return /* @__PURE__ */ jsx31(LogLevelContext.Provider, {
+  return /* @__PURE__ */ jsx322(LogLevelContext.Provider, {
     value: contexts.logLevelContext,
-    children: /* @__PURE__ */ jsx31(CanUseRemotionHooks.Provider, {
+    children: /* @__PURE__ */ jsx322(CanUseRemotionHooks.Provider, {
       value: contexts.canUseRemotionHooksContext,
-      children: /* @__PURE__ */ jsx31(NonceContext.Provider, {
+      children: /* @__PURE__ */ jsx322(NonceContext.Provider, {
         value: contexts.nonceContext,
-        children: /* @__PURE__ */ jsx31(PreloadContext.Provider, {
+        children: /* @__PURE__ */ jsx322(PreloadContext.Provider, {
           value: contexts.preloadContext,
-          children: /* @__PURE__ */ jsx31(CompositionManager.Provider, {
+          children: /* @__PURE__ */ jsx322(CompositionManager.Provider, {
             value: contexts.compositionManagerCtx,
-            children: /* @__PURE__ */ jsx31(SequenceManager.Provider, {
+            children: /* @__PURE__ */ jsx322(SequenceManager.Provider, {
               value: contexts.sequenceManagerContext,
-              children: /* @__PURE__ */ jsx31(RenderAssetManager.Provider, {
+              children: /* @__PURE__ */ jsx322(RenderAssetManager.Provider, {
                 value: contexts.renderAssetManagerContext,
-                children: /* @__PURE__ */ jsx31(ResolveCompositionContext.Provider, {
+                children: /* @__PURE__ */ jsx322(ResolveCompositionContext.Provider, {
                   value: contexts.resolveCompositionContext,
-                  children: /* @__PURE__ */ jsx31(TimelineContext.Provider, {
+                  children: /* @__PURE__ */ jsx322(TimelineContext.Provider, {
                     value: contexts.timelineContext,
-                    children: /* @__PURE__ */ jsx31(SetTimelineContext.Provider, {
+                    children: /* @__PURE__ */ jsx322(SetTimelineContext.Provider, {
                       value: contexts.setTimelineContext,
-                      children: /* @__PURE__ */ jsx31(SequenceContext.Provider, {
+                      children: /* @__PURE__ */ jsx322(SequenceContext.Provider, {
                         value: contexts.sequenceContext,
-                        children: /* @__PURE__ */ jsx31(BufferingContextReact.Provider, {
+                        children: /* @__PURE__ */ jsx322(BufferingContextReact.Provider, {
                           value: contexts.bufferManagerContext,
                           children
                         })
@@ -6099,36 +6102,36 @@ Check that all your Remotion packages are on the same version. If your dependenc
     throw new RangeError(`Cannot use frame ${frame}: Duration of composition is ${durationInFrames}, therefore the highest frame that can be rendered is ${durationInFrames - 1}`);
   }
 }, flattenChildren = (children) => {
-  const childrenArray = React31.Children.toArray(children);
+  const childrenArray = React32.Children.toArray(children);
   return childrenArray.reduce((flatChildren, child) => {
-    if (child.type === React31.Fragment) {
+    if (child.type === React32.Fragment) {
       return flatChildren.concat(flattenChildren(child.props.children));
     }
     flatChildren.push(child);
     return flatChildren;
   }, []);
 }, IsInsideSeriesContext, IsInsideSeriesContainer = ({ children }) => {
-  return /* @__PURE__ */ jsx322(IsInsideSeriesContext.Provider, {
+  return /* @__PURE__ */ jsx33(IsInsideSeriesContext.Provider, {
     value: true,
     children
   });
 }, IsNotInsideSeriesProvider = ({ children }) => {
-  return /* @__PURE__ */ jsx322(IsInsideSeriesContext.Provider, {
+  return /* @__PURE__ */ jsx33(IsInsideSeriesContext.Provider, {
     value: false,
     children
   });
 }, useRequireToBeInsideSeries = () => {
-  const isInsideSeries = React32.useContext(IsInsideSeriesContext);
+  const isInsideSeries = React33.useContext(IsInsideSeriesContext);
   if (!isInsideSeries) {
     throw new Error("This component must be inside a <Series /> component.");
   }
 }, SeriesSequenceRefForwardingFunction = ({ children }, _ref) => {
   useRequireToBeInsideSeries();
-  return /* @__PURE__ */ jsx33(IsNotInsideSeriesProvider, {
+  return /* @__PURE__ */ jsx34(IsNotInsideSeriesProvider, {
     children
   });
 }, SeriesSequence, Series = (props2) => {
-  const childrenValue = useMemo30(() => {
+  const childrenValue = useMemo31(() => {
     let startFrame = 0;
     const flattenedChildren = flattenChildren(props2.children);
     return Children.map(flattenedChildren, (child, i) => {
@@ -6172,7 +6175,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
       }
       const currentStartFrame = startFrame + offset;
       startFrame += durationInFramesProp + offset;
-      return /* @__PURE__ */ jsx33(Sequence, {
+      return /* @__PURE__ */ jsx34(Sequence, {
         name: name || "<Series.Sequence>",
         from: currentStartFrame,
         durationInFrames: durationInFramesProp,
@@ -6183,14 +6186,14 @@ Check that all your Remotion packages are on the same version. If your dependenc
     });
   }, [props2.children]);
   if (ENABLE_V5_BREAKING_CHANGES) {
-    return /* @__PURE__ */ jsx33(IsInsideSeriesContainer, {
-      children: /* @__PURE__ */ jsx33(Sequence, {
+    return /* @__PURE__ */ jsx34(IsInsideSeriesContainer, {
+      children: /* @__PURE__ */ jsx34(Sequence, {
         ...props2,
         children: childrenValue
       })
     });
   }
-  return /* @__PURE__ */ jsx33(IsInsideSeriesContainer, {
+  return /* @__PURE__ */ jsx34(IsInsideSeriesContainer, {
     children: childrenValue
   });
 }, validateSpringDuration = (dur) => {
@@ -6410,14 +6413,14 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const volumePropsFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const videoConfig = useUnsafeVideoConfig();
   const videoRef = useRef17(null);
-  const sequenceContext = useContext33(SequenceContext);
+  const sequenceContext = useContext34(SequenceContext);
   const mediaStartsAt = useMediaStartsAt();
   const environment = useRemotionEnvironment();
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
-  const { registerRenderAsset, unregisterRenderAsset } = useContext33(RenderAssetManager);
-  const id = useMemo31(() => `video-${random(props2.src ?? "")}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
+  const { registerRenderAsset, unregisterRenderAsset } = useContext34(RenderAssetManager);
+  const id = useMemo32(() => `video-${random(props2.src ?? "")}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     props2.src,
     sequenceContext?.cumulatedFrom,
     sequenceContext?.relativeFrom,
@@ -6593,7 +6596,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
       delayRender2
     ]);
   }
-  return /* @__PURE__ */ jsx34("video", {
+  return /* @__PURE__ */ jsx35("video", {
     ref: videoRef,
     disableRemotePlayback: true,
     ...props2
@@ -6615,7 +6618,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const { loop, ...propsOtherThanLoop } = props2;
   const { fps } = useVideoConfig();
   const environment = useRemotionEnvironment();
-  const { durations, setDurations } = useContext34(DurationsContext);
+  const { durations, setDurations } = useContext35(DurationsContext);
   if (typeof ref === "string") {
     throw new Error("string refs are not supported");
   }
@@ -6637,14 +6640,14 @@ Check that all your Remotion packages are on the same version. If your dependenc
   });
   if (loop && durationFetched !== undefined) {
     if (!Number.isFinite(durationFetched)) {
-      return /* @__PURE__ */ jsx35(Html5Video, {
+      return /* @__PURE__ */ jsx36(Html5Video, {
         ...propsOtherThanLoop,
         ref,
         _remotionInternalNativeLoopPassed: true
       });
     }
     const mediaDuration = durationFetched * fps;
-    return /* @__PURE__ */ jsx35(Loop, {
+    return /* @__PURE__ */ jsx36(Loop, {
       durationInFrames: calculateMediaDuration({
         trimAfter: trimAfterValue,
         mediaDurationInFrames: mediaDuration,
@@ -6653,7 +6656,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
       }),
       layout: "none",
       name,
-      children: /* @__PURE__ */ jsx35(Html5Video, {
+      children: /* @__PURE__ */ jsx36(Html5Video, {
         ...propsOtherThanLoop,
         ref,
         _remotionInternalNativeLoopPassed: true
@@ -6661,13 +6664,13 @@ Check that all your Remotion packages are on the same version. If your dependenc
     });
   }
   if (typeof trimBeforeValue !== "undefined" || typeof trimAfterValue !== "undefined") {
-    return /* @__PURE__ */ jsx35(Sequence, {
+    return /* @__PURE__ */ jsx36(Sequence, {
       layout: "none",
       from: 0 - (trimBeforeValue ?? 0),
       showInTimeline: false,
       durationInFrames: trimAfterValue,
       name,
-      children: /* @__PURE__ */ jsx35(Html5Video, {
+      children: /* @__PURE__ */ jsx36(Html5Video, {
         pauseWhenBuffering: pauseWhenBuffering ?? false,
         ...otherProps,
         ref
@@ -6676,14 +6679,14 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }
   validateMediaProps({ playbackRate: props2.playbackRate, volume: props2.volume }, "Html5Video");
   if (environment.isRendering) {
-    return /* @__PURE__ */ jsx35(VideoForRendering, {
+    return /* @__PURE__ */ jsx36(VideoForRendering, {
       onDuration,
       onVideoFrame: onVideoFrame ?? null,
       ...otherProps,
       ref
     });
   }
-  return /* @__PURE__ */ jsx35(VideoForPreview, {
+  return /* @__PURE__ */ jsx36(VideoForPreview, {
     onlyWarnForMediaSeekingError: false,
     ...otherProps,
     ref,
@@ -6734,14 +6737,6 @@ var init_esm = __esm(() => {
       throw new Error("SequenceVisibilityToggle not initialized");
     }
   });
-  NonceContext = createContext4({
-    getNonce: () => 0,
-    fastRefreshes: 0,
-    manualRefreshes: 0
-  });
-  SetNonceContext = createContext4({
-    increaseManualRefreshes: () => {}
-  });
   exports_timeline_position_state = {};
   __export2(exports_timeline_position_state, {
     useTimelineSetFrame: () => useTimelineSetFrame,
@@ -6749,18 +6744,16 @@ var init_esm = __esm(() => {
     usePlayingState: () => usePlayingState,
     persistCurrentFrame: () => persistCurrentFrame,
     getInitialFrameState: () => getInitialFrameState,
-    getFrameForComposition: () => getFrameForComposition,
-    TimelineContext: () => TimelineContext,
-    SetTimelineContext: () => SetTimelineContext
+    getFrameForComposition: () => getFrameForComposition
   });
   RemotionEnvironmentContext = React4.createContext(null);
-  CompositionManager = createContext5({
+  CompositionManager = createContext4({
     compositions: [],
     folders: [],
     currentCompositionMetadata: null,
     canvasContent: null
   });
-  CompositionSetters = createContext5({
+  CompositionSetters = createContext4({
     registerComposition: () => {
       return;
     },
@@ -6781,7 +6774,7 @@ var init_esm = __esm(() => {
     },
     onlyRenderComposition: null
   });
-  EditorPropsContext = createContext6({
+  EditorPropsContext = createContext5({
     props: {},
     updateProps: () => {
       throw new Error("Not implemented");
@@ -6792,6 +6785,14 @@ var init_esm = __esm(() => {
   });
   editorPropsProviderRef = React5.createRef();
   timeValueRef = React5.createRef();
+  NonceContext = createContext6({
+    getNonce: () => 0,
+    fastRefreshes: 0,
+    manualRefreshes: 0
+  });
+  SetNonceContext = createContext6({
+    increaseManualRefreshes: () => {}
+  });
   validCodecs = [
     "h264",
     "h265",
@@ -6807,31 +6808,6 @@ var init_esm = __esm(() => {
   ];
   ResolveCompositionContext = createContext7(null);
   resolveCompositionsRef = createRef();
-  TimelineContext = createContext8({
-    frame: {},
-    playing: false,
-    playbackRate: 1,
-    rootId: "",
-    imperativePlaying: {
-      current: false
-    },
-    setPlaybackRate: () => {
-      throw new Error("default");
-    },
-    audioAndVideoTags: { current: [] }
-  });
-  SetTimelineContext = createContext8({
-    setFrame: () => {
-      throw new Error("default");
-    },
-    setPlaying: () => {
-      throw new Error("default");
-    }
-  });
-  CanUseRemotionHooks = createContext9(false);
-  RegularSequence = forwardRef2(RegularSequenceRefForwardingFunction);
-  PremountedPostmountedSequence = forwardRef2(PremountedPostmountedSequenceRefForwardingFunction);
-  Sequence = forwardRef2(SequenceRefForwardingFunction);
   logLevels = ["trace", "verbose", "info", "warn", "error"];
   Log = {
     trace,
@@ -6847,7 +6823,33 @@ var init_esm = __esm(() => {
       window.remotion_delayRenderTimeouts = {};
     }
   }
-  Canvas = React9.forwardRef(CanvasRefForwardingFunction);
+  DelayRenderContextType = createContext8(null);
+  SetTimelineContext = createContext9({
+    setFrame: () => {
+      throw new Error("default");
+    },
+    setPlaying: () => {
+      throw new Error("default");
+    }
+  });
+  TimelineContext = createContext9({
+    frame: {},
+    playing: false,
+    playbackRate: 1,
+    rootId: "",
+    imperativePlaying: {
+      current: false
+    },
+    setPlaybackRate: () => {
+      throw new Error("default");
+    },
+    audioAndVideoTags: { current: [] }
+  });
+  CanUseRemotionHooks = createContext10(false);
+  RegularSequence = forwardRef2(RegularSequenceRefForwardingFunction);
+  PremountedPostmountedSequence = forwardRef2(PremountedPostmountedSequenceRefForwardingFunction);
+  Sequence = forwardRef2(SequenceRefForwardingFunction);
+  Canvas = React10.forwardRef(CanvasRefForwardingFunction);
   AnimatedImage = forwardRef3(({
     src,
     width,
@@ -6858,7 +6860,7 @@ var init_esm = __esm(() => {
     fit = "fill",
     ...props
   }, canvasRef) => {
-    const mountState = useRef3({ isMounted: true });
+    const mountState = useRef4({ isMounted: true });
     useEffect4(() => {
       const { current } = mountState;
       current.isMounted = true;
@@ -6867,15 +6869,15 @@ var init_esm = __esm(() => {
       };
     }, []);
     const resolvedSrc = resolveAnimatedImageSource(src);
-    const [imageDecoder, setImageDecoder] = useState6(null);
+    const [imageDecoder, setImageDecoder] = useState7(null);
     const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
-    const [decodeHandle] = useState6(() => delayRender2(`Rendering <AnimatedImage/> with src="${resolvedSrc}"`));
+    const [decodeHandle] = useState7(() => delayRender2(`Rendering <AnimatedImage/> with src="${resolvedSrc}"`));
     const frame = useCurrentFrame();
     const { fps } = useVideoConfig();
     const currentTime = frame / playbackRate / fps;
-    const currentTimeRef = useRef3(currentTime);
+    const currentTimeRef = useRef4(currentTime);
     currentTimeRef.current = currentTime;
-    const ref = useRef3(null);
+    const ref = useRef4(null);
     useImperativeHandle4(canvasRef, () => {
       const c = ref.current?.getCanvas();
       if (!c) {
@@ -6883,7 +6885,7 @@ var init_esm = __esm(() => {
       }
       return c;
     }, []);
-    const [initialLoopBehavior] = useState6(() => loopBehavior);
+    const [initialLoopBehavior] = useState7(() => loopBehavior);
     useEffect4(() => {
       const controller = new AbortController;
       decodeImage({
@@ -6916,7 +6918,7 @@ var init_esm = __esm(() => {
       initialLoopBehavior,
       continueRender2
     ]);
-    useLayoutEffect(() => {
+    useLayoutEffect2(() => {
       if (!imageDecoder) {
         return;
       }
@@ -6947,7 +6949,7 @@ var init_esm = __esm(() => {
       continueRender2,
       delayRender2
     ]);
-    return /* @__PURE__ */ jsx102(Canvas, {
+    return /* @__PURE__ */ jsx11(Canvas, {
       ref,
       width,
       height,
@@ -6955,7 +6957,7 @@ var init_esm = __esm(() => {
       ...props
     });
   });
-  RenderAssetManager = createContext10({
+  RenderAssetManager = createContext11({
     registerRenderAsset: () => {
       return;
     },
@@ -6966,30 +6968,30 @@ var init_esm = __esm(() => {
   });
   ArtifactThumbnail = Symbol("Thumbnail");
   Artifact.Thumbnail = ArtifactThumbnail;
-  LoopContext = createContext11(null);
+  LoopContext = createContext12(null);
   Loop.useLoop = useLoop;
-  PreloadContext = createContext12({});
+  PreloadContext = createContext13({});
   preloads = {};
   updaters = [];
-  DurationsContext = createContext13({
+  DurationsContext = createContext14({
     durations: {},
     setDurations: () => {
       throw new Error("context missing");
     }
   });
-  LogLevelContext = createContext14({
+  LogLevelContext = createContext15({
     logLevel: "info",
     mountTime: 0
   });
-  SharedAudioContext = createContext15(null);
+  SharedAudioContext = createContext16(null);
   didWarn = {};
-  BufferingContextReact = React15.createContext(null);
+  BufferingContextReact = React16.createContext(null);
   alreadyWarned = {};
-  MediaVolumeContext = createContext16({
+  MediaVolumeContext = createContext17({
     mediaMuted: false,
     mediaVolume: 1
   });
-  SetMediaVolumeContext = createContext16({
+  SetMediaVolumeContext = createContext17({
     setMediaMuted: () => {
       throw new Error("default");
     },
@@ -7002,7 +7004,7 @@ var init_esm = __esm(() => {
   Html5Audio = forwardRef6(AudioRefForwardingFunction);
   addSequenceStackTraces(Html5Audio);
   invalidFolderNameErrorMessage = `Folder name must match ${String(getRegex())}`;
-  FolderContext = createContext17({
+  FolderContext = createContext18({
     folderName: null,
     parentName: null
   });
@@ -7022,7 +7024,7 @@ var init_esm = __esm(() => {
   kSampleStepSize = 1 / (kSplineTableSize - 1);
   IFrame = forwardRef7(IFrameRefForwarding);
   Img = forwardRef8(ImgRefForwarding);
-  compositionsRef = React24.createRef();
+  compositionsRef = React25.createRef();
   exports_default_css = {};
   __export2(exports_default_css, {
     makeDefaultPreviewCSS: () => makeDefaultPreviewCSS,
@@ -7031,9 +7033,9 @@ var init_esm = __esm(() => {
   });
   injected = {};
   listeners = [];
-  MediaEnabledContext = createContext18(null);
-  CurrentScaleContext = React26.createContext(null);
-  PreviewSizeContext = createContext19({
+  MediaEnabledContext = createContext19(null);
+  CurrentScaleContext = React27.createContext(null);
+  PreviewSizeContext = createContext20({
     setSize: () => {
       return;
     },
@@ -7058,6 +7060,7 @@ var init_esm = __esm(() => {
     SequenceManager,
     SequenceVisibilityToggleContext,
     RemotionRoot,
+    CompositionManagerProvider,
     useVideo,
     getRoot,
     useMediaVolumeState,
@@ -7082,6 +7085,7 @@ var init_esm = __esm(() => {
     compositionsRef,
     portalNode,
     waitForRoot,
+    SetTimelineContext,
     CanUseRemotionHooksProvider,
     CanUseRemotionHooks,
     PrefetchProvider,
@@ -7130,10 +7134,13 @@ var init_esm = __esm(() => {
     setInputPropsOverride,
     useVideoEnabled,
     useAudioEnabled,
-    useIsPlayerBuffering
+    useIsPlayerBuffering,
+    TimelinePosition: exports_timeline_position_state,
+    DelayRenderContextType,
+    TimelineContext
   };
   PERCENTAGE = NUMBER + "%";
-  IsInsideSeriesContext = createContext20(false);
+  IsInsideSeriesContext = createContext21(false);
   SeriesSequence = forwardRef10(SeriesSequenceRefForwardingFunction);
   Series.Sequence = SeriesSequence;
   addSequenceStackTraces(SeriesSequence);
@@ -8535,7 +8542,7 @@ var getDefaultConfig = () => {
 var twMerge = /* @__PURE__ */ createTailwindMerge(getDefaultConfig);
 
 // ../design/dist/esm/index.mjs
-import React6, { useEffect as useEffect23, useMemo as useMemo32, useState as useState20 } from "react";
+import React6, { useEffect as useEffect23, useMemo as useMemo33, useState as useState21 } from "react";
 
 // ../paths/dist/esm/index.mjs
 var cutLInstruction = ({
@@ -12674,10 +12681,10 @@ var extrudeAndTransformElement = (options) => {
 
 // ../design/dist/esm/index.mjs
 init_esm();
-import { jsx as jsx36, Fragment } from "react/jsx-runtime";
+import { jsx as jsx37, Fragment } from "react/jsx-runtime";
 import { jsx as jsx210, jsxs as jsxs3 } from "react/jsx-runtime";
-import { jsx as jsx37 } from "react/jsx-runtime";
-import React33 from "react";
+import { jsx as jsx38 } from "react/jsx-runtime";
+import React34 from "react";
 import { jsx as jsx43 } from "react/jsx-runtime";
 import { jsx as jsx53 } from "react/jsx-runtime";
 import { jsx as jsx63, jsxs as jsxs23 } from "react/jsx-runtime";
@@ -12694,38 +12701,38 @@ import { jsx as jsx103 } from "react/jsx-runtime";
 import * as React8 from "react";
 import { jsx as jsx112 } from "react/jsx-runtime";
 import * as React12 from "react";
-import * as React92 from "react";
+import * as React9 from "react";
 import * as ReactDOM from "react-dom";
 import { jsx as jsx122 } from "react/jsx-runtime";
 import * as React102 from "react";
-import * as React11 from "react";
+import * as React112 from "react";
 import { jsx as jsx132 } from "react/jsx-runtime";
-import * as React132 from "react";
+import * as React13 from "react";
 import * as React142 from "react";
 import { jsx as jsx142 } from "react/jsx-runtime";
 import * as React162 from "react";
 import * as React152 from "react";
-import * as React202 from "react";
-import * as React17 from "react";
+import * as React20 from "react";
+import * as React172 from "react";
 import { useLayoutEffect as useLayoutEffect32, useEffect as useEffect72 } from "react";
 import * as ReactDOM2 from "react-dom";
 import * as React18 from "react";
 import { jsx as jsx152 } from "react/jsx-runtime";
 import * as React19 from "react";
 import { jsx as jsx162 } from "react/jsx-runtime";
-import * as React21 from "react";
+import * as React212 from "react";
 import ReactDOM3 from "react-dom";
 import { jsx as jsx172 } from "react/jsx-runtime";
 import * as React22 from "react";
 import * as React23 from "react";
-import * as React242 from "react";
+import * as React24 from "react";
 import { jsx as jsx182 } from "react/jsx-runtime";
 import * as React312 from "react";
-import * as React27 from "react";
+import * as React272 from "react";
 import { useState as useState112 } from "react";
-import * as React25 from "react";
-import * as React262 from "react";
-import * as React302 from "react";
+import * as React252 from "react";
+import * as React26 from "react";
+import * as React30 from "react";
 import * as React29 from "react";
 import * as React28 from "react";
 import { Fragment as Fragment52, jsx as jsx192, jsxs as jsxs32 } from "react/jsx-runtime";
@@ -12757,7 +12764,7 @@ var useHoverTransforms = (ref, disabled) => {
     progress: 0,
     isActive: false
   });
-  const eventTarget = useMemo32(() => new EventTarget, []);
+  const eventTarget = useMemo33(() => new EventTarget, []);
   useEffect23(() => {
     if (disabled) {
       eventTarget.dispatchEvent(new Event("disabled"));
@@ -12904,7 +12911,7 @@ var getAngle = (ref, coordinates) => {
 };
 var lastCoordinates = null;
 var useMousePosition = (ref) => {
-  const [angle, setAngle] = useState20(getAngle(ref.current, lastCoordinates));
+  const [angle, setAngle] = useState21(getAngle(ref.current, lastCoordinates));
   useEffect23(() => {
     const element = ref.current;
     if (!element) {
@@ -12926,9 +12933,9 @@ var useMousePosition = (ref) => {
   return angle;
 };
 var Faces = ({ elements, ...svgProps }) => {
-  return /* @__PURE__ */ jsx36(Fragment, {
+  return /* @__PURE__ */ jsx37(Fragment, {
     children: elements.map(({ points, color, crispEdges }, idx) => {
-      return /* @__PURE__ */ jsx36("path", {
+      return /* @__PURE__ */ jsx37("path", {
         d: threeDIntoSvgPath(points),
         fill: color,
         shapeRendering: crispEdges ? "crispEdges" : undefined,
@@ -13052,18 +13059,18 @@ var Button = ({ children, className, disabled, depth, ...buttonProps }) => {
       };
     });
   }, []);
-  const content = /* @__PURE__ */ jsx37("button", {
+  const content = /* @__PURE__ */ jsx38("button", {
     type: "button",
     disabled,
     className: cn("text-text", "flex", "justify-center", "bg-button-bg", "items-center", "font-brand", "border-solid", "text-[1em]", "rounded-lg", "border-black", "border-2", "border-b-4", "cursor-pointer", "px-4", "h-12", "flex", "flex-row", "items-center", "disabled:cursor-default", "disabled:border-gray-500", "disabled:text-gray-500", className),
     ...buttonProps,
     children
   });
-  return /* @__PURE__ */ jsx37("div", {
+  return /* @__PURE__ */ jsx38("div", {
     ref,
     className: "contents",
     onPointerEnter,
-    children: dimensions && (isActive || progress > 0) ? /* @__PURE__ */ jsx37(Outer, {
+    children: dimensions && (isActive || progress > 0) ? /* @__PURE__ */ jsx38(Outer, {
       parentRef: ref,
       width: dimensions.width,
       height: dimensions.height,
@@ -13074,7 +13081,7 @@ var Button = ({ children, className, disabled, depth, ...buttonProps }) => {
     }) : content
   });
 };
-var Card = React33.forwardRef(({ children, className, ...rest }, ref) => {
+var Card = React34.forwardRef(({ children, className, ...rest }, ref) => {
   return /* @__PURE__ */ jsx43("div", {
     ref,
     className: cn("rounded-lg border-2 border-black bg-card-bg text-text border-b-4", className),
@@ -13435,7 +13442,7 @@ var NODES = [
   "ul"
 ];
 var Primitive = NODES.reduce((primitive, node) => {
-  const Node2 = React92.forwardRef((props, forwardedRef) => {
+  const Node2 = React9.forwardRef((props, forwardedRef) => {
     const { asChild, ...primitiveProps } = props;
     const Comp = asChild ? Slot : node;
     if (typeof window !== "undefined") {
@@ -13459,7 +13466,7 @@ function useCallbackRef(callback) {
 }
 function useEscapeKeydown(onEscapeKeyDownProp, ownerDocument = globalThis?.document) {
   const onEscapeKeyDown = useCallbackRef(onEscapeKeyDownProp);
-  React11.useEffect(() => {
+  React112.useEffect(() => {
     const handleKeyDown = (event) => {
       if (event.key === "Escape") {
         onEscapeKeyDown(event);
@@ -13666,7 +13673,7 @@ function handleAndDispatchCustomEvent(name, handler, detail, { discrete }) {
 }
 var count = 0;
 function useFocusGuards() {
-  React132.useEffect(() => {
+  React13.useEffect(() => {
     const edgeGuards = document.querySelectorAll("[data-radix-focus-guard]");
     document.body.insertAdjacentElement("afterbegin", edgeGuards[0] ?? createFocusGuard());
     document.body.insertAdjacentElement("beforeend", edgeGuards[1] ?? createFocusGuard());
@@ -15486,7 +15493,7 @@ function roundByDPR(element, value) {
   return Math.round(value * dpr) / dpr;
 }
 function useLatestRef(value) {
-  const ref = React17.useRef(value);
+  const ref = React172.useRef(value);
   index(() => {
     ref.current = value;
   });
@@ -15509,7 +15516,7 @@ function useFloating(options) {
     whileElementsMounted,
     open
   } = options;
-  const [data, setData] = React17.useState({
+  const [data, setData] = React172.useState({
     x: 0,
     y: 0,
     strategy,
@@ -15517,19 +15524,19 @@ function useFloating(options) {
     middlewareData: {},
     isPositioned: false
   });
-  const [latestMiddleware, setLatestMiddleware] = React17.useState(middleware);
+  const [latestMiddleware, setLatestMiddleware] = React172.useState(middleware);
   if (!deepEqual(latestMiddleware, middleware)) {
     setLatestMiddleware(middleware);
   }
-  const [_reference, _setReference] = React17.useState(null);
-  const [_floating, _setFloating] = React17.useState(null);
-  const setReference = React17.useCallback((node) => {
+  const [_reference, _setReference] = React172.useState(null);
+  const [_floating, _setFloating] = React172.useState(null);
+  const setReference = React172.useCallback((node) => {
     if (node !== referenceRef.current) {
       referenceRef.current = node;
       _setReference(node);
     }
   }, []);
-  const setFloating = React17.useCallback((node) => {
+  const setFloating = React172.useCallback((node) => {
     if (node !== floatingRef.current) {
       floatingRef.current = node;
       _setFloating(node);
@@ -15537,13 +15544,13 @@ function useFloating(options) {
   }, []);
   const referenceEl = externalReference || _reference;
   const floatingEl = externalFloating || _floating;
-  const referenceRef = React17.useRef(null);
-  const floatingRef = React17.useRef(null);
-  const dataRef = React17.useRef(data);
+  const referenceRef = React172.useRef(null);
+  const floatingRef = React172.useRef(null);
+  const dataRef = React172.useRef(data);
   const hasWhileElementsMounted = whileElementsMounted != null;
   const whileElementsMountedRef = useLatestRef(whileElementsMounted);
   const platformRef = useLatestRef(platform2);
-  const update = React17.useCallback(() => {
+  const update = React172.useCallback(() => {
     if (!referenceRef.current || !floatingRef.current) {
       return;
     }
@@ -15577,7 +15584,7 @@ function useFloating(options) {
       }));
     }
   }, [open]);
-  const isMountedRef = React17.useRef(false);
+  const isMountedRef = React172.useRef(false);
   index(() => {
     isMountedRef.current = true;
     return () => {
@@ -15596,17 +15603,17 @@ function useFloating(options) {
       update();
     }
   }, [referenceEl, floatingEl, update, whileElementsMountedRef, hasWhileElementsMounted]);
-  const refs = React17.useMemo(() => ({
+  const refs = React172.useMemo(() => ({
     reference: referenceRef,
     floating: floatingRef,
     setReference,
     setFloating
   }), [setReference, setFloating]);
-  const elements = React17.useMemo(() => ({
+  const elements = React172.useMemo(() => ({
     reference: referenceEl,
     floating: floatingEl
   }), [referenceEl, floatingEl]);
-  const floatingStyles = React17.useMemo(() => {
+  const floatingStyles = React172.useMemo(() => {
     const initialStyles = {
       position: strategy,
       left: 0,
@@ -15632,7 +15639,7 @@ function useFloating(options) {
       top: y
     };
   }, [strategy, transform, elements.floating, data.x, data.y]);
-  return React17.useMemo(() => ({
+  return React172.useMemo(() => ({
     ...data,
     update,
     refs,
@@ -15753,17 +15760,17 @@ var [createPopperContext, createPopperScope] = createContextScope(POPPER_NAME);
 var [PopperProvider, usePopperContext] = createPopperContext(POPPER_NAME);
 var Popper = (props) => {
   const { __scopePopper, children } = props;
-  const [anchor, setAnchor] = React202.useState(null);
+  const [anchor, setAnchor] = React20.useState(null);
   return /* @__PURE__ */ jsx162(PopperProvider, { scope: __scopePopper, anchor, onAnchorChange: setAnchor, children });
 };
 Popper.displayName = POPPER_NAME;
 var ANCHOR_NAME = "PopperAnchor";
-var PopperAnchor = React202.forwardRef((props, forwardedRef) => {
+var PopperAnchor = React20.forwardRef((props, forwardedRef) => {
   const { __scopePopper, virtualRef, ...anchorProps } = props;
   const context = usePopperContext(ANCHOR_NAME, __scopePopper);
-  const ref = React202.useRef(null);
+  const ref = React20.useRef(null);
   const composedRefs = useComposedRefs(forwardedRef, ref);
-  React202.useEffect(() => {
+  React20.useEffect(() => {
     context.onAnchorChange(virtualRef?.current || ref.current);
   });
   return virtualRef ? null : /* @__PURE__ */ jsx162(Primitive.div, { ...anchorProps, ref: composedRefs });
@@ -15771,7 +15778,7 @@ var PopperAnchor = React202.forwardRef((props, forwardedRef) => {
 PopperAnchor.displayName = ANCHOR_NAME;
 var CONTENT_NAME = "PopperContent";
 var [PopperContentProvider, useContentContext] = createPopperContext(CONTENT_NAME);
-var PopperContent = React202.forwardRef((props, forwardedRef) => {
+var PopperContent = React20.forwardRef((props, forwardedRef) => {
   const {
     __scopePopper,
     side = "bottom",
@@ -15789,9 +15796,9 @@ var PopperContent = React202.forwardRef((props, forwardedRef) => {
     ...contentProps
   } = props;
   const context = usePopperContext(CONTENT_NAME, __scopePopper);
-  const [content, setContent] = React202.useState(null);
+  const [content, setContent] = React20.useState(null);
   const composedRefs = useComposedRefs(forwardedRef, (node) => setContent(node));
-  const [arrow4, setArrow] = React202.useState(null);
+  const [arrow4, setArrow] = React20.useState(null);
   const arrowSize = useSize(arrow4);
   const arrowWidth = arrowSize?.width ?? 0;
   const arrowHeight = arrowSize?.height ?? 0;
@@ -15851,7 +15858,7 @@ var PopperContent = React202.forwardRef((props, forwardedRef) => {
   const arrowX = middlewareData.arrow?.x;
   const arrowY = middlewareData.arrow?.y;
   const cannotCenterArrow = middlewareData.arrow?.centerOffset !== 0;
-  const [contentZIndex, setContentZIndex] = React202.useState();
+  const [contentZIndex, setContentZIndex] = React20.useState();
   useLayoutEffect22(() => {
     if (content)
       setContentZIndex(window.getComputedStyle(content).zIndex);
@@ -15902,7 +15909,7 @@ var OPPOSITE_SIDE = {
   bottom: "top",
   left: "right"
 };
-var PopperArrow = React202.forwardRef(function PopperArrow2(props, forwardedRef) {
+var PopperArrow = React20.forwardRef(function PopperArrow2(props, forwardedRef) {
   const { __scopePopper, ...arrowProps } = props;
   const contentContext = useContentContext(ARROW_NAME, __scopePopper);
   const baseSide = OPPOSITE_SIDE[contentContext.placedSide];
@@ -15981,9 +15988,9 @@ var Anchor = PopperAnchor;
 var Content = PopperContent;
 var Arrow2 = PopperArrow;
 var PORTAL_NAME = "Portal";
-var Portal = React21.forwardRef((props, forwardedRef) => {
+var Portal = React212.forwardRef((props, forwardedRef) => {
   const { container: containerProp, ...portalProps } = props;
-  const [mounted, setMounted] = React21.useState(false);
+  const [mounted, setMounted] = React212.useState(false);
   useLayoutEffect22(() => setMounted(true), []);
   const container22 = containerProp || mounted && globalThis?.document?.body;
   return container22 ? ReactDOM3.createPortal(/* @__PURE__ */ jsx172(Primitive.div, { ...portalProps, ref: forwardedRef }), container22) : null;
@@ -16037,7 +16044,7 @@ function usePrevious(value) {
   }, [value]);
 }
 var NAME2 = "VisuallyHidden";
-var VisuallyHidden = React242.forwardRef((props, forwardedRef) => {
+var VisuallyHidden = React24.forwardRef((props, forwardedRef) => {
   return /* @__PURE__ */ jsx182(Primitive.span, {
     ...props,
     ref: forwardedRef,
@@ -16245,7 +16252,7 @@ function useCallbackRef2(initialValue, callback) {
   ref.callback = callback;
   return ref.facade;
 }
-var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React25.useLayoutEffect : React25.useEffect;
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React252.useLayoutEffect : React252.useEffect;
 var currentValues = new WeakMap;
 function useMergeRefs(refs, defaultValue) {
   var callbackRef = useCallbackRef2(defaultValue || null, function(newValue) {
@@ -16367,7 +16374,7 @@ var SideCar = function(_a) {
   if (!Target) {
     throw new Error("Sidecar medium not found");
   }
-  return React262.createElement(Target, __assign({}, rest));
+  return React26.createElement(Target, __assign({}, rest));
 };
 SideCar.isSideCarExport = true;
 function exportSidecar(medium, exported) {
@@ -16378,9 +16385,9 @@ var effectCar = createSidecarMedium();
 var nothing = function() {
   return;
 };
-var RemoveScroll = React27.forwardRef(function(props, parentRef) {
-  var ref = React27.useRef(null);
-  var _a = React27.useState({
+var RemoveScroll = React272.forwardRef(function(props, parentRef) {
+  var ref = React272.useRef(null);
+  var _a = React272.useState({
     onScrollCapture: nothing,
     onWheelCapture: nothing,
     onTouchMoveCapture: nothing
@@ -16389,7 +16396,7 @@ var RemoveScroll = React27.forwardRef(function(props, parentRef) {
   var SideCar2 = sideCar;
   var containerRef = useMergeRefs([ref, parentRef]);
   var containerProps = __assign(__assign({}, rest), callbacks);
-  return React27.createElement(React27.Fragment, null, enabled && React27.createElement(SideCar2, { sideCar: effectCar, removeScrollBar, shards, noIsolation, inert, setCallbacks, allowPinchZoom: !!allowPinchZoom, lockRef: ref, gapMode }), forwardProps ? React27.cloneElement(React27.Children.only(children), __assign(__assign({}, containerProps), { ref: containerRef })) : React27.createElement(Container, __assign({}, containerProps, { className, ref: containerRef }), children));
+  return React272.createElement(React272.Fragment, null, enabled && React272.createElement(SideCar2, { sideCar: effectCar, removeScrollBar, shards, noIsolation, inert, setCallbacks, allowPinchZoom: !!allowPinchZoom, lockRef: ref, gapMode }), forwardProps ? React272.cloneElement(React272.Children.only(children), __assign(__assign({}, containerProps), { ref: containerRef })) : React272.createElement(Container, __assign({}, containerProps, { className, ref: containerRef }), children));
 });
 RemoveScroll.defaultProps = {
   enabled: true,
@@ -16707,16 +16714,16 @@ var generateStyle = function(id) {
 var idCounter = 0;
 var lockStack = [];
 function RemoveScrollSideCar(props) {
-  var shouldPreventQueue = React302.useRef([]);
-  var touchStartRef = React302.useRef([0, 0]);
-  var activeAxis = React302.useRef();
-  var id = React302.useState(idCounter++)[0];
-  var Style2 = React302.useState(styleSingleton)[0];
-  var lastProps = React302.useRef(props);
-  React302.useEffect(function() {
+  var shouldPreventQueue = React30.useRef([]);
+  var touchStartRef = React30.useRef([0, 0]);
+  var activeAxis = React30.useRef();
+  var id = React30.useState(idCounter++)[0];
+  var Style2 = React30.useState(styleSingleton)[0];
+  var lastProps = React30.useRef(props);
+  React30.useEffect(function() {
     lastProps.current = props;
   }, [props]);
-  React302.useEffect(function() {
+  React30.useEffect(function() {
     if (props.inert) {
       document.body.classList.add("block-interactivity-".concat(id));
       var allow_1 = __spreadArray([props.lockRef.current], (props.shards || []).map(extractRef), true).filter(Boolean);
@@ -16732,7 +16739,7 @@ function RemoveScrollSideCar(props) {
     }
     return;
   }, [props.inert, props.lockRef.current, props.shards]);
-  var shouldCancelEvent = React302.useCallback(function(event, parent) {
+  var shouldCancelEvent = React30.useCallback(function(event, parent) {
     if ("touches" in event && event.touches.length === 2) {
       return !lastProps.current.allowPinchZoom;
     }
@@ -16768,7 +16775,7 @@ function RemoveScrollSideCar(props) {
     var cancelingAxis = activeAxis.current || currentAxis;
     return handleScroll(cancelingAxis, parent, event, cancelingAxis === "h" ? deltaX : deltaY, true);
   }, []);
-  var shouldPrevent = React302.useCallback(function(_event) {
+  var shouldPrevent = React30.useCallback(function(_event) {
     var event = _event;
     if (!lockStack.length || lockStack[lockStack.length - 1] !== Style2) {
       return;
@@ -16795,7 +16802,7 @@ function RemoveScrollSideCar(props) {
       }
     }
   }, []);
-  var shouldCancel = React302.useCallback(function(name, delta, target, should) {
+  var shouldCancel = React30.useCallback(function(name, delta, target, should) {
     var event = { name, delta, target, should, shadowParent: getOutermostShadowParent(target) };
     shouldPreventQueue.current.push(event);
     setTimeout(function() {
@@ -16804,17 +16811,17 @@ function RemoveScrollSideCar(props) {
       });
     }, 1);
   }, []);
-  var scrollTouchStart = React302.useCallback(function(event) {
+  var scrollTouchStart = React30.useCallback(function(event) {
     touchStartRef.current = getTouchXY(event);
     activeAxis.current = undefined;
   }, []);
-  var scrollWheel = React302.useCallback(function(event) {
+  var scrollWheel = React30.useCallback(function(event) {
     shouldCancel(event.type, getDeltaXY(event), event.target, shouldCancelEvent(event, props.lockRef.current));
   }, []);
-  var scrollTouchMove = React302.useCallback(function(event) {
+  var scrollTouchMove = React30.useCallback(function(event) {
     shouldCancel(event.type, getTouchXY(event), event.target, shouldCancelEvent(event, props.lockRef.current));
   }, []);
-  React302.useEffect(function() {
+  React30.useEffect(function() {
     lockStack.push(Style2);
     props.setCallbacks({
       onScrollCapture: scrollWheel,
@@ -16834,7 +16841,7 @@ function RemoveScrollSideCar(props) {
     };
   }, []);
   var { removeScrollBar, inert } = props;
-  return React302.createElement(React302.Fragment, null, inert ? React302.createElement(Style2, { styles: generateStyle(id) }) : null, removeScrollBar ? React302.createElement(RemoveScrollBar, { gapMode: props.gapMode }) : null);
+  return React30.createElement(React30.Fragment, null, inert ? React30.createElement(Style2, { styles: generateStyle(id) }) : null, removeScrollBar ? React30.createElement(RemoveScrollBar, { gapMode: props.gapMode }) : null);
 }
 function getOutermostShadowParent(node) {
   var shadowParent = null;
@@ -18518,13 +18525,13 @@ var CreateVideoInternals = {
 };
 
 // src/components/icons/blank.tsx
-import { jsx as jsx38 } from "react/jsx-runtime";
+import { jsx as jsx39 } from "react/jsx-runtime";
 var Blank = (props) => {
-  return /* @__PURE__ */ jsx38("svg", {
+  return /* @__PURE__ */ jsx39("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 384 512",
     ...props,
-    children: /* @__PURE__ */ jsx38("path", {
+    children: /* @__PURE__ */ jsx39("path", {
       fill: "currentColor",
       d: "M0 64C0 28.65 28.65 0 64 0H220.1C232.8 0 245.1 5.057 254.1 14.06L369.9 129.9C378.9 138.9 384 151.2 384 163.9V448C384 483.3 355.3 512 320 512H64C28.65 512 0 483.3 0 448V64zM352 192H240C213.5 192 192 170.5 192 144V32H64C46.33 32 32 46.33 32 64V448C32 465.7 46.33 480 64 480H320C337.7 480 352 465.7 352 448V192zM347.3 152.6L231.4 36.69C229.4 34.62 226.8 33.18 224 32.48V144C224 152.8 231.2 160 240 160H351.5C350.8 157.2 349.4 154.6 347.3 152.6z"
     })
@@ -18532,29 +18539,29 @@ var Blank = (props) => {
 };
 
 // src/components/icons/code-hike.tsx
-import { jsx as jsx39, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs5 } from "react/jsx-runtime";
 var CodeHike = (props) => {
   return /* @__PURE__ */ jsxs5("svg", {
     ...props,
     viewBox: "-100 -100 200 200",
     fill: "currentColor",
     children: [
-      /* @__PURE__ */ jsx39("path", {
+      /* @__PURE__ */ jsx40("path", {
         d: "M 70 60 L 42 -27 L 72 -27 L 100 60 Z"
       }),
-      /* @__PURE__ */ jsx39("path", {
+      /* @__PURE__ */ jsx40("path", {
         d: "M 20.419540229885058 40.05357142857142 L 42 -27 L 72 -27 L 50.41954022988506 40.05357142857142 Z"
       }),
-      /* @__PURE__ */ jsx39("path", {
+      /* @__PURE__ */ jsx40("path", {
         d: "M 20.419540229885058 40.05357142857142 L -15 -70 L 15 -70 L 50.41954022988506 40.05357142857142 Z"
       }),
-      /* @__PURE__ */ jsx39("path", {
+      /* @__PURE__ */ jsx40("path", {
         d: "M -50.41954022988506 40.05357142857142 L -15 -70 L 15 -70 L -20.419540229885058 40.05357142857142 Z"
       }),
-      /* @__PURE__ */ jsx39("path", {
+      /* @__PURE__ */ jsx40("path", {
         d: "M -50.41954022988506 40.05357142857142 L -72 -27 L -42 -27 L -20.419540229885058 40.05357142857142 Z"
       }),
-      /* @__PURE__ */ jsx39("path", {
+      /* @__PURE__ */ jsx40("path", {
         d: "M -100 60 L -72 -27 L -42 -27 L -70 60 Z"
       })
     ]
@@ -18562,13 +18569,13 @@ var CodeHike = (props) => {
 };
 
 // src/components/icons/cubes.tsx
-import { jsx as jsx40 } from "react/jsx-runtime";
+import { jsx as jsx41 } from "react/jsx-runtime";
 var Cubes = (props) => {
-  return /* @__PURE__ */ jsx40("svg", {
+  return /* @__PURE__ */ jsx41("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 512 512",
     ...props,
-    children: /* @__PURE__ */ jsx40("path", {
+    children: /* @__PURE__ */ jsx41("path", {
       fill: "currentColor",
       d: "M239.5 5.018C250.1 1.106 261.9 1.106 272.5 5.018L480.5 81.28C499.4 88.22 512 106.2 512 126.4V385.7C512 405.8 499.4 423.8 480.5 430.7L272.5 506.1C261.9 510.9 250.1 510.9 239.5 506.1L31.48 430.7C12.57 423.8 0 405.8 0 385.7V126.4C0 106.2 12.57 88.22 31.48 81.28L239.5 5.018zM261.5 35.06C257.1 33.76 254 33.76 250.5 35.06L44.14 110.7L256 193.1L467.9 110.7L261.5 35.06zM42.49 400.7L240 473.1V222L32 140.3V385.7C32 392.4 36.19 398.4 42.49 400.7V400.7zM272 473.1L469.5 400.7C475.8 398.4 480 392.4 480 385.7V140.3L272 222V473.1z"
     })
@@ -18576,13 +18583,13 @@ var Cubes = (props) => {
 };
 
 // src/components/icons/js.tsx
-import { jsx as jsx41 } from "react/jsx-runtime";
+import { jsx as jsx44 } from "react/jsx-runtime";
 var JSIcon = (props) => {
-  return /* @__PURE__ */ jsx41("svg", {
+  return /* @__PURE__ */ jsx44("svg", {
     className: "svg-inline--fa fa-js-square fa-w-14",
     viewBox: "0 0 448 512",
     ...props,
-    children: /* @__PURE__ */ jsx41("path", {
+    children: /* @__PURE__ */ jsx44("path", {
       fill: "currentColor",
       d: "M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM243.8 381.4c0 43.6-25.6 63.5-62.9 63.5-33.7 0-53.2-17.4-63.2-38.5l34.3-20.7c6.6 11.7 12.6 21.6 27.1 21.6 13.8 0 22.6-5.4 22.6-26.5V237.7h42.1v143.7zm99.6 63.5c-39.1 0-64.4-18.6-76.7-43l34.3-19.8c9 14.7 20.8 25.6 41.5 25.6 17.4 0 28.6-8.7 28.6-20.8 0-14.4-11.4-19.5-30.7-28l-10.5-4.5c-30.4-12.9-50.5-29.2-50.5-63.5 0-31.6 24.1-55.6 61.6-55.6 26.8 0 46 9.3 59.8 33.7L368 290c-7.2-12.9-15-18-27.1-18-12.3 0-20.1 7.8-20.1 18 0 12.6 7.8 17.7 25.9 25.6l10.5 4.5c35.8 15.3 55.9 31 55.9 66.2 0 37.8-29.8 58.6-69.7 58.6z"
     })
@@ -18590,13 +18597,13 @@ var JSIcon = (props) => {
 };
 
 // src/components/icons/music.tsx
-import { jsx as jsx44 } from "react/jsx-runtime";
+import { jsx as jsx46 } from "react/jsx-runtime";
 var MusicIcon = (props) => {
-  return /* @__PURE__ */ jsx44("svg", {
+  return /* @__PURE__ */ jsx46("svg", {
     ...props,
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 512 512",
-    children: /* @__PURE__ */ jsx44("path", {
+    children: /* @__PURE__ */ jsx46("path", {
       fill: "currentColor",
       d: "M499.1 6.3c8.1 6 12.9 15.6 12.9 25.7l0 72 0 264c0 44.2-43 80-96 80s-96-35.8-96-80s43-80 96-80c11.2 0 22 1.6 32 4.6L448 147 192 223.8 192 432c0 44.2-43 80-96 80s-96-35.8-96-80s43-80 96-80c11.2 0 22 1.6 32 4.6L128 200l0-72c0-14.1 9.3-26.6 22.8-30.7l320-96c9.7-2.9 20.2-1.1 28.3 5z"
     })
@@ -18604,7 +18611,7 @@ var MusicIcon = (props) => {
 };
 
 // src/components/icons/next.tsx
-import { jsx as jsx46, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs7 } from "react/jsx-runtime";
 var NextIcon = ({ style }) => {
   return /* @__PURE__ */ jsxs7("svg", {
     fill: "none",
@@ -18612,7 +18619,7 @@ var NextIcon = ({ style }) => {
     style,
     xmlns: "http://www.w3.org/2000/svg",
     children: [
-      /* @__PURE__ */ jsx46("mask", {
+      /* @__PURE__ */ jsx47("mask", {
         height: "180",
         id: "mask0_292_250",
         maskUnits: "userSpaceOnUse",
@@ -18620,7 +18627,7 @@ var NextIcon = ({ style }) => {
         width: "180",
         x: "0",
         y: "0",
-        children: /* @__PURE__ */ jsx46("circle", {
+        children: /* @__PURE__ */ jsx47("circle", {
           cx: "90",
           cy: "90",
           fill: "currentcolor",
@@ -18630,17 +18637,17 @@ var NextIcon = ({ style }) => {
       /* @__PURE__ */ jsxs7("g", {
         mask: "url(#mask0_292_250)",
         children: [
-          /* @__PURE__ */ jsx46("circle", {
+          /* @__PURE__ */ jsx47("circle", {
             cx: "90",
             cy: "90",
             fill: "currentcolor",
             r: "90"
           }),
-          /* @__PURE__ */ jsx46("path", {
+          /* @__PURE__ */ jsx47("path", {
             d: "M149.508 157.52L69.142 54H54V125.97H66.1136V69.3836L139.999 164.845C143.333 162.614 146.509 160.165 149.508 157.52Z",
             fill: "url(#paint0_linear_292_250)"
           }),
-          /* @__PURE__ */ jsx46("rect", {
+          /* @__PURE__ */ jsx47("rect", {
             fill: "url(#paint1_linear_292_250)",
             height: "72",
             width: "12",
@@ -18659,10 +18666,10 @@ var NextIcon = ({ style }) => {
             y1: "116.5",
             y2: "160.5",
             children: [
-              /* @__PURE__ */ jsx46("stop", {
+              /* @__PURE__ */ jsx47("stop", {
                 stopColor: "var(--background)"
               }),
-              /* @__PURE__ */ jsx46("stop", {
+              /* @__PURE__ */ jsx47("stop", {
                 offset: "1",
                 stopColor: "var(--background)",
                 stopOpacity: "0"
@@ -18677,10 +18684,10 @@ var NextIcon = ({ style }) => {
             y1: "54",
             y2: "106.875",
             children: [
-              /* @__PURE__ */ jsx46("stop", {
+              /* @__PURE__ */ jsx47("stop", {
                 stopColor: "var(--background)"
               }),
-              /* @__PURE__ */ jsx46("stop", {
+              /* @__PURE__ */ jsx47("stop", {
                 offset: "1",
                 stopColor: "var(--background)",
                 stopOpacity: "0"
@@ -18694,7 +18701,7 @@ var NextIcon = ({ style }) => {
 };
 
 // src/components/icons/overlay.tsx
-import { jsx as jsx47, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs8 } from "react/jsx-runtime";
 var OverlayIcon = (props) => {
   return /* @__PURE__ */ jsxs8("svg", {
     viewBox: "0 0 576 512",
@@ -18702,11 +18709,11 @@ var OverlayIcon = (props) => {
     xmlns: "http://www.w3.org/2000/svg",
     ...props,
     children: [
-      /* @__PURE__ */ jsx47("path", {
+      /* @__PURE__ */ jsx48("path", {
         d: "M251.1 407.9C274.5 418.7 301.5 418.7 324.9 407.9V407.8L476.9 337.6L530.1 362.2C538.6 366.1 544 374.6 544 384C544 393.4 538.6 401.9 530.1 405.8L311.5 506.8C296.6 513.7 279.4 513.7 264.5 506.8L45.9 405.8C37.4 401.9 32 393.4 32 384C32 374.6 37.4 366.1 45.9 362.2L99.1 337.7L251.1 407.9Z",
         fill: "currentcolor"
       }),
-      /* @__PURE__ */ jsx47("path", {
+      /* @__PURE__ */ jsx48("path", {
         d: "M277.8 132.7L495.2 230.1C505.4 234.7 512 244.8 512 256C512 267.2 505.4 277.3 495.2 281.9L277.8 379.3C270.1 382.4 263.5 384 256 384C248.5 384 241 382.4 234.2 379.3L16.76 281.9C6.561 277.3 0.0003 267.2 0.0003 256C0.0003 244.8 6.561 234.7 16.76 230.1L234.2 132.7C241 129.6 248.5 128 256 128C263.5 128 270.1 129.6 277.8 132.7Z",
         stroke: "currentcolor",
         transform: "translate(32, -25)",
@@ -18717,13 +18724,13 @@ var OverlayIcon = (props) => {
 };
 
 // src/components/icons/prompt-to-video.tsx
-import { jsx as jsx48 } from "react/jsx-runtime";
+import { jsx as jsx49 } from "react/jsx-runtime";
 var PromptToVideoIcon = (props) => {
-  return /* @__PURE__ */ jsx48("svg", {
+  return /* @__PURE__ */ jsx49("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 512 512",
     ...props,
-    children: /* @__PURE__ */ jsx48("path", {
+    children: /* @__PURE__ */ jsx49("path", {
       d: "M278.5 15.6C275 6.2 266 0 256 0s-19 6.2-22.5 15.6L174.2 174.2 15.6 233.5C6.2 237 0 246 0 256s6.2 19 15.6 22.5l158.6 59.4 59.4 158.6C237 505.8 246 512 256 512s19-6.2 22.5-15.6l59.4-158.6 158.6-59.4C505.8 275 512 266 512 256s-6.2-19-15.6-22.5L337.8 174.2 278.5 15.6z",
       fill: "currentColor"
     })
@@ -18731,23 +18738,23 @@ var PromptToVideoIcon = (props) => {
 };
 
 // src/components/icons/recorder.tsx
-import { jsx as jsx49, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs9 } from "react/jsx-runtime";
 var Recorder = (props) => {
   return /* @__PURE__ */ jsxs9("svg", {
     viewBox: "0 0 700 700",
     ...props,
     children: [
-      /* @__PURE__ */ jsx49("path", {
+      /* @__PURE__ */ jsx50("path", {
         d: "M0 350C0 115.5 115.5 0 350 0C584.5 0 700 115.5 700 350C700 584.5 584.5 700 350 700C115.5 700 0 584.5 0 350Z",
         fill: "#F43B00",
         fillOpacity: "0.15"
       }),
-      /* @__PURE__ */ jsx49("path", {
+      /* @__PURE__ */ jsx50("path", {
         d: "M79.4595 344.324C79.4595 161.794 169.362 71.8915 351.892 71.8915C534.422 71.8915 624.324 161.794 624.324 344.324C624.324 526.854 534.422 616.756 351.892 616.756C169.362 616.756 79.4595 526.854 79.4595 344.324Z",
         fill: "#F43B00",
         fillOpacity: "0.3"
       }),
-      /* @__PURE__ */ jsx49("path", {
+      /* @__PURE__ */ jsx50("path", {
         d: "M155.135 343.378C155.135 212.185 219.752 147.567 350.946 147.567C482.139 147.567 546.756 212.185 546.756 343.378C546.756 474.571 482.139 539.189 350.946 539.189C219.752 539.189 155.135 474.571 155.135 343.378Z",
         fill: "#F43B00"
       })
@@ -18756,9 +18763,9 @@ var Recorder = (props) => {
 };
 
 // src/components/icons/remix.tsx
-import { jsx as jsx50, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs10 } from "react/jsx-runtime";
 var ReactRouterIcon = (props) => {
-  return /* @__PURE__ */ jsx50("svg", {
+  return /* @__PURE__ */ jsx51("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "800px",
     height: "800px",
@@ -18768,11 +18775,11 @@ var ReactRouterIcon = (props) => {
     ...props,
     children: /* @__PURE__ */ jsxs10("g", {
       children: [
-        /* @__PURE__ */ jsx50("path", {
+        /* @__PURE__ */ jsx51("path", {
           d: "M78.0659341,92.5875806 C90.8837956,92.5875806 101.274726,82.1966508 101.274726,69.3787894 C101.274726,56.5609279 90.8837956,46.1699982 78.0659341,46.1699982 C65.2480726,46.1699982 54.8571429,56.5609279 54.8571429,69.3787894 C54.8571429,82.1966508 65.2480726,92.5875806 78.0659341,92.5875806 Z M23.2087913,139.005163 C36.0266526,139.005163 46.4175825,128.614233 46.4175825,115.796372 C46.4175825,102.97851 36.0266526,92.5875806 23.2087913,92.5875806 C10.3909298,92.5875806 0,102.97851 0,115.796372 C0,128.614233 10.3909298,139.005163 23.2087913,139.005163 Z M232.791209,139.005163 C245.60907,139.005163 256,128.614233 256,115.796372 C256,102.97851 245.60907,92.5875806 232.791209,92.5875806 C219.973347,92.5875806 209.582418,102.97851 209.582418,115.796372 C209.582418,128.614233 219.973347,139.005163 232.791209,139.005163 Z",
           fill: "currentcolor"
         }),
-        /* @__PURE__ */ jsx50("path", {
+        /* @__PURE__ */ jsx51("path", {
           d: "M156.565464,70.3568084 C155.823426,62.6028163 155.445577,56.1490255 149.505494,51.6131676 C141.982638,45.8687002 133.461166,49.5960243 122.964463,45.8072968 C112.650326,43.3121427 105,34.1545727 105,23.2394367 C105,10.4046502 115.577888,0 128.626373,0 C138.29063,0 146.599638,5.70747659 150.259573,13.8825477 C155.861013,24.5221258 152.220489,35.3500418 159.258242,40.8041273 C167.591489,47.2621895 178.826167,42.5329154 191.362109,48.6517412 C195.390112,50.5026944 198.799584,53.4384578 201.202056,57.0769224 C203.604528,60.7153869 205,65.0565524 205,69.7183101 C205,80.633446 197.349674,89.7910161 187.035538,92.2861702 C176.538834,96.0748977 168.017363,92.3475736 160.494506,98.092041 C152.03503,104.551712 156.563892,115.358642 149.669352,126.774447 C145.756163,134.291567 137.802119,139.43662 128.626373,139.43662 C115.577888,139.43662 105,129.03197 105,116.197184 C105,106.873668 110.581887,98.832521 118.637891,95.1306146 C131.173833,89.0117889 142.408511,93.7410629 150.741758,87.2830007 C155.549106,83.5574243 156.565464,77.8102648 156.565464,70.3568084 Z",
           fill: "currentcolor"
         })
@@ -18782,7 +18789,7 @@ var ReactRouterIcon = (props) => {
 };
 
 // src/components/icons/render-server.tsx
-import { jsx as jsx51, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs11 } from "react/jsx-runtime";
 var RenderServerIcon = (props) => {
   return /* @__PURE__ */ jsxs11("svg", {
     ...props,
@@ -18794,14 +18801,14 @@ var RenderServerIcon = (props) => {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     children: [
-      /* @__PURE__ */ jsx51("rect", {
+      /* @__PURE__ */ jsx54("rect", {
         width: "18",
         height: "18",
         x: "3",
         y: "3",
         rx: "2"
       }),
-      /* @__PURE__ */ jsx51("path", {
+      /* @__PURE__ */ jsx54("path", {
         d: "m10 8 4 4-4 4"
       })
     ]
@@ -18809,13 +18816,13 @@ var RenderServerIcon = (props) => {
 };
 
 // src/components/icons/skia.tsx
-import { jsx as jsx54 } from "react/jsx-runtime";
+import { jsx as jsx56 } from "react/jsx-runtime";
 var SkiaIcon = (props) => {
-  return /* @__PURE__ */ jsx54("svg", {
+  return /* @__PURE__ */ jsx56("svg", {
     ...props,
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 576 512",
-    children: /* @__PURE__ */ jsx54("path", {
+    children: /* @__PURE__ */ jsx56("path", {
       fill: "currentColor",
       d: "M288 400C288 461.9 237.9 512 176 512H32C14.33 512 0 497.7 0 480C0 462.3 14.33 448 32 448H36.81C54.44 448 66.4 429.1 64.59 411.6C64.2 407.8 64 403.9 64 400C64 338.1 114.1 288 176 288C178.8 288 181.5 288.1 184.3 288.3C184.1 285.7 183.1 282.1 183.1 280.3C183.1 244.6 201.1 210.1 229.1 189.1L474.3 12.25C499.7-6.279 534.9-3.526 557.2 18.74C579.4 41 582.2 76.16 563.7 101.6L386.1 345.1C365 374.9 331.4 392 295.7 392C293 392 290.3 391.9 287.7 391.7C287.9 394.5 287.1 397.2 287.1 400H288zM295.7 360C321.2 360 345.2 347.8 360.2 327.2L537.8 82.82C547.1 70.08 545.7 52.5 534.5 41.37C523.4 30.24 505.8 28.86 493.1 38.12L248.8 215.8C228.2 230.8 215.1 254.8 215.1 280.3C215.1 285.7 216.5 290.9 217.5 295.1L217.6 295.1C217.9 297.3 218.2 298.6 218.5 299.9L276.1 357.5C277.4 357.8 278.7 358.1 280 358.4L280 358.5C285.1 359.5 290.3 360 295.7 360L295.7 360zM253.5 380.1L195.9 322.5C194.5 322.2 193.2 321.8 191.9 321.6C186.7 320.5 181.4 320 176 320C131.8 320 96 355.8 96 400C96 402.8 96.14 405.6 96.43 408.3C98.15 425 93.42 441.9 83.96 455.1C74.31 468.5 58 480 36.81 480H176C220.2 480 256 444.2 256 400C256 394.6 255.5 389.3 254.4 384.1C254.2 382.8 253.9 381.5 253.5 380.1V380.1z"
     })
@@ -18823,13 +18830,13 @@ var SkiaIcon = (props) => {
 };
 
 // src/components/icons/stargazer.tsx
-import { jsx as jsx56 } from "react/jsx-runtime";
+import { jsx as jsx57 } from "react/jsx-runtime";
 var Stargazer = (props) => {
-  return /* @__PURE__ */ jsx56("svg", {
+  return /* @__PURE__ */ jsx57("svg", {
     height: "1em",
     viewBox: "0 0 512 512",
     ...props,
-    children: /* @__PURE__ */ jsx56("path", {
+    children: /* @__PURE__ */ jsx57("path", {
       fill: "currentcolor",
       d: "M325.8 152.3c1.3 4.6 5.5 7.7 10.2 7.7s8.9-3.1 10.2-7.7L360 104l48.3-13.8c4.6-1.3 7.7-5.5 7.7-10.2s-3.1-8.9-7.7-10.2L360 56 346.2 7.7C344.9 3.1 340.7 0 336 0s-8.9 3.1-10.2 7.7L312 56 263.7 69.8c-4.6 1.3-7.7 5.5-7.7 10.2s3.1 8.9 7.7 10.2L312 104l13.8 48.3zM115.7 346.2L75.5 307l55.5-8.1c15.6-2.3 29.2-12.1 36.1-26.3l24.8-50.3 24.8 50.3c7 14.2 20.5 24 36.1 26.3l55.5 8.1-40.2 39.2c-11.3 11-16.4 26.9-13.8 42.4l9.5 55.4-49.5-26.1c-14-7.4-30.7-7.4-44.7 0L120 444l9.5-55.4c2.7-15.6-2.5-31.4-13.8-42.4zm54.7-188.8l-46.3 94L20.5 266.5C.9 269.3-7 293.5 7.2 307.4l74.9 73.2L64.5 483.9c-3.4 19.6 17.2 34.6 34.8 25.3l92.6-48.8 92.6 48.8c17.6 9.3 38.2-5.7 34.8-25.3L301.6 380.6l74.9-73.2c14.2-13.9 6.4-38.1-13.3-40.9L259.7 251.4l-46.3-94c-8.8-17.9-34.3-17.9-43.1 0zm258.4 85.8l11 38.6c1 3.6 4.4 6.2 8.2 6.2s7.1-2.5 8.2-6.2l11-38.6 38.6-11c3.6-1 6.2-4.4 6.2-8.2s-2.5-7.1-6.2-8.2l-38.6-11-11-38.6c-1-3.6-4.4-6.2-8.2-6.2s-7.1 2.5-8.2 6.2l-11 38.6-38.6 11c-3.6 1-6.2 4.4-6.2 8.2s2.5 7.1 6.2 8.2l38.6 11z"
     })
@@ -18837,13 +18844,13 @@ var Stargazer = (props) => {
 };
 
 // src/components/icons/still.tsx
-import { jsx as jsx57 } from "react/jsx-runtime";
+import { jsx as jsx58 } from "react/jsx-runtime";
 var StillIcon = (props) => {
-  return /* @__PURE__ */ jsx57("svg", {
+  return /* @__PURE__ */ jsx58("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 512 512",
     ...props,
-    children: /* @__PURE__ */ jsx57("path", {
+    children: /* @__PURE__ */ jsx58("path", {
       fill: "currentColor",
       d: "M324.9 157.8c-11.38-17.38-39.89-17.31-51.23-.0625L200.5 268.5L184.1 245.9C172.7 229.1 145.9 229.9 134.4 245.9l-64.52 89.16c-6.797 9.406-7.75 21.72-2.547 32C72.53 377.5 83.05 384 94.75 384h322.5c11.41 0 21.8-6.281 27.14-16.38c5.312-10 4.734-22.09-1.516-31.56L324.9 157.8zM95.8 352l62.39-87.38l29.91 41.34C191.2 310.2 196.4 313.2 201.4 312.6c5.25-.125 10.12-2.781 13.02-7.188l83.83-129.9L415 352H95.8zM447.1 32h-384C28.65 32-.0091 60.65-.0091 96v320c0 35.35 28.65 64 63.1 64h384c35.35 0 64-28.65 64-64V96C511.1 60.65 483.3 32 447.1 32zM480 416c0 17.64-14.36 32-32 32H64c-17.64 0-32-14.36-32-32V96c0-17.64 14.36-32 32-32h384c17.64 0 32 14.36 32 32V416zM144 192C170.5 192 192 170.5 192 144S170.5 96 144 96S96 117.5 96 144S117.5 192 144 192zM144 128c8.822 0 15.1 7.178 15.1 16S152.8 160 144 160S128 152.8 128 144S135.2 128 144 128z"
     })
@@ -18851,12 +18858,12 @@ var StillIcon = (props) => {
 };
 
 // src/components/icons/tiktok.tsx
-import { jsx as jsx58 } from "react/jsx-runtime";
+import { jsx as jsx59 } from "react/jsx-runtime";
 var TikTok = (props) => {
-  return /* @__PURE__ */ jsx58("svg", {
+  return /* @__PURE__ */ jsx59("svg", {
     ...props,
     viewBox: "0 0 448 512",
-    children: /* @__PURE__ */ jsx58("path", {
+    children: /* @__PURE__ */ jsx59("path", {
       fill: "currentcolor",
       d: "M448 209.9a210.1 210.1 0 0 1 -122.8-39.3V349.4A162.6 162.6 0 1 1 185 188.3V278.2a74.6 74.6 0 1 0 52.2 71.2V0l88 0a121.2 121.2 0 0 0 1.9 22.2h0A122.2 122.2 0 0 0 381 102.4a121.4 121.4 0 0 0 67 20.1z"
     })
@@ -18864,14 +18871,14 @@ var TikTok = (props) => {
 };
 
 // src/components/icons/ts.tsx
-import { jsx as jsx59 } from "react/jsx-runtime";
+import { jsx as jsx60 } from "react/jsx-runtime";
 var TypeScriptIcon = (props) => {
-  return /* @__PURE__ */ jsx59("svg", {
+  return /* @__PURE__ */ jsx60("svg", {
     fill: "#000000",
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
     ...props,
-    children: /* @__PURE__ */ jsx59("path", {
+    children: /* @__PURE__ */ jsx60("path", {
       fill: "currentColor",
       d: "M3,5v14c0,1.105,0.895,2,2,2h14c1.105,0,2-0.895,2-2V5c0-1.105-0.895-2-2-2H5C3.895,3,3,3.895,3,5z M13.666,12.451h-2.118\tV19H9.841v-6.549H7.767V11h5.899V12.451z M13.998,18.626v-1.751c0,0,0.956,0.721,2.104,0.721c1.148,0,1.103-0.75,1.103-0.853\tc0-1.089-3.251-1.089-3.251-3.501c0-3.281,4.737-1.986,4.737-1.986l-0.059,1.559c0,0-0.794-0.53-1.692-0.53\tc-0.897,0-1.221,0.427-1.221,0.883c0,1.177,3.281,1.059,3.281,3.428C19,20.244,13.998,18.626,13.998,18.626z"
     })
@@ -18879,13 +18886,13 @@ var TypeScriptIcon = (props) => {
 };
 
 // src/components/icons/tts.tsx
-import { jsx as jsx60 } from "react/jsx-runtime";
+import { jsx as jsx61 } from "react/jsx-runtime";
 var TTSIcon = (props) => {
-  return /* @__PURE__ */ jsx60("svg", {
+  return /* @__PURE__ */ jsx61("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 512 512",
     ...props,
-    children: /* @__PURE__ */ jsx60("path", {
+    children: /* @__PURE__ */ jsx61("path", {
       fill: "currentColor",
       d: "M256 31.1c-141.4 0-255.1 93.13-255.1 208c0 47.62 19.91 91.25 52.91 126.3c-14.87 39.5-45.87 72.88-46.37 73.25c-6.623 7-8.373 17.25-4.623 26C5.816 474.3 14.38 480 24 480c61.49 0 109.1-25.75 139.1-46.25c28.1 9 60.16 14.25 92.9 14.25c141.4 0 255.1-93.13 255.1-207.1S397.4 31.1 256 31.1zM256 416c-28.25 0-56.24-4.25-83.24-12.75c-9.516-3.068-19.92-1.461-28.07 4.338c-22.1 16.25-58.54 35.29-102.7 39.66c11.1-15.12 29.75-40.5 40.74-69.63l.1289-.3398c4.283-11.27 1.791-23.1-6.43-32.82C47.51 313.1 32.06 277.6 32.06 240c0-97 100.5-176 223.1-176c123.5 0 223.1 79 223.1 176S379.5 416 256 416zM272 272h-128c-8.801 0-16 7.199-16 15.1C127.1 296.8 135.2 304 144 304h128c8.801 0 15.1-7.204 15.1-16C287.1 279.2 280.8 272 272 272zM368 176h-224c-8.801 0-16 7.199-16 15.1C127.1 200.8 135.2 208 144 208h224c8.801 0 15.1-7.204 15.1-16C383.1 183.2 376.8 176 368 176z"
     })
@@ -18893,13 +18900,13 @@ var TTSIcon = (props) => {
 };
 
 // src/components/icons/waveform.tsx
-import { jsx as jsx61 } from "react/jsx-runtime";
+import { jsx as jsx64 } from "react/jsx-runtime";
 var Waveform = (props) => {
-  return /* @__PURE__ */ jsx61("svg", {
+  return /* @__PURE__ */ jsx64("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 640 512",
     ...props,
-    children: /* @__PURE__ */ jsx61("path", {
+    children: /* @__PURE__ */ jsx64("path", {
       fill: "currentColor",
       d: "M224 96C215.2 96 208 103.2 208 111.1v288C208 408.8 215.2 416 223.1 416C232.8 416 240 408.8 240 400V111.1C240 103.2 232.8 96 224 96zM128 192C119.2 192 112 199.2 112 207.1V304C112 312.8 119.2 320 127.1 320S144 312.8 144 304V207.1C144 199.2 136.8 192 128 192zM32 224C23.2 224 16 231.2 16 239.1V272C16 280.8 23.2 288 31.1 288S48 280.8 48 272V239.1C48 231.2 40.8 224 32 224zM416 128C407.2 128 400 135.2 400 143.1v224C400 376.8 407.2 384 415.1 384S432 376.8 432 368V143.1C432 135.2 424.8 128 416 128zM608 224c-8.8 0-16 7.2-16 15.1V272C592 280.8 599.2 288 608 288s16-7.2 16-15.1V239.1C624 231.2 616.8 224 608 224zM512 64c-8.8 0-16 7.2-16 15.1V432C496 440.8 503.2 448 511.1 448C520.8 448 528 440.8 528 432V79.1C528 71.2 520.8 64 512 64zM320 0C311.2 0 304 7.2 304 15.1V496C304 504.8 311.2 512 319.1 512S336 504.8 336 496V15.1C336 7.2 328.8 0 320 0z"
     })
@@ -18907,17 +18914,17 @@ var Waveform = (props) => {
 };
 
 // src/components/homepage/IconForTemplate.tsx
-import { jsx as jsx64 } from "react/jsx-runtime";
+import { jsx as jsx66 } from "react/jsx-runtime";
 var IconForTemplate = ({ template, scale = 1 }) => {
   if (template.cliId === "hello-world") {
-    return /* @__PURE__ */ jsx64(TypeScriptIcon, {
+    return /* @__PURE__ */ jsx66(TypeScriptIcon, {
       style: {
         height: scale * 48
       }
     });
   }
   if (template.cliId === "blank") {
-    return /* @__PURE__ */ jsx64(Blank, {
+    return /* @__PURE__ */ jsx66(Blank, {
       style: {
         height: scale * 36,
         overflow: "visible"
@@ -18925,105 +18932,105 @@ var IconForTemplate = ({ template, scale = 1 }) => {
     });
   }
   if (template.cliId === "javascript") {
-    return /* @__PURE__ */ jsx64(JSIcon, {
+    return /* @__PURE__ */ jsx66(JSIcon, {
       style: {
         height: scale * 40
       }
     });
   }
   if (template.cliId === "three") {
-    return /* @__PURE__ */ jsx64(Cubes, {
+    return /* @__PURE__ */ jsx66(Cubes, {
       style: {
         height: scale * 36
       }
     });
   }
   if (template.cliId === "still") {
-    return /* @__PURE__ */ jsx64(StillIcon, {
+    return /* @__PURE__ */ jsx66(StillIcon, {
       style: {
         height: scale * 36
       }
     });
   }
   if (template.cliId === "audiogram") {
-    return /* @__PURE__ */ jsx64(Waveform, {
+    return /* @__PURE__ */ jsx66(Waveform, {
       style: {
         height: scale * 36
       }
     });
   }
   if (template.cliId === "tts") {
-    return /* @__PURE__ */ jsx64(TTSIcon, {
+    return /* @__PURE__ */ jsx66(TTSIcon, {
       style: {
         height: scale * 36
       }
     });
   }
   if (template.cliId === "google-tts") {
-    return /* @__PURE__ */ jsx64(TTSIcon, {
+    return /* @__PURE__ */ jsx66(TTSIcon, {
       style: {
         height: scale * 36
       }
     });
   }
   if (template.cliId === "skia") {
-    return /* @__PURE__ */ jsx64(SkiaIcon, {
+    return /* @__PURE__ */ jsx66(SkiaIcon, {
       style: {
         height: scale * 32
       }
     });
   }
   if (template.cliId === "music-visualization") {
-    return /* @__PURE__ */ jsx64(MusicIcon, {
+    return /* @__PURE__ */ jsx66(MusicIcon, {
       style: {
         height: scale * 32
       }
     });
   }
   if (template.cliId === "react-router") {
-    return /* @__PURE__ */ jsx64(ReactRouterIcon, {
+    return /* @__PURE__ */ jsx66(ReactRouterIcon, {
       style: {
         height: scale * 32
       }
     });
   }
   if (template.cliId === "overlay") {
-    return /* @__PURE__ */ jsx64(OverlayIcon, {
+    return /* @__PURE__ */ jsx66(OverlayIcon, {
       style: { height: scale * 42 }
     });
   }
   if (template.cliId === "render-server") {
-    return /* @__PURE__ */ jsx64(RenderServerIcon, {
+    return /* @__PURE__ */ jsx66(RenderServerIcon, {
       style: { height: scale * 36 }
     });
   }
   if (template.cliId === "recorder") {
-    return /* @__PURE__ */ jsx64(Recorder, {
+    return /* @__PURE__ */ jsx66(Recorder, {
       style: { height: scale * 36 }
     });
   }
   if (template.cliId === "next" || template.cliId === "next-tailwind" || template.cliId === "next-pages-dir") {
-    return /* @__PURE__ */ jsx64(NextIcon, {
+    return /* @__PURE__ */ jsx66(NextIcon, {
       style: { height: scale * 36 }
     });
   }
   if (template.cliId === "stargazer") {
-    return /* @__PURE__ */ jsx64(Stargazer, {
+    return /* @__PURE__ */ jsx66(Stargazer, {
       style: { height: scale * 36 }
     });
   }
   if (template.cliId === "tiktok") {
-    return /* @__PURE__ */ jsx64(TikTok, {
+    return /* @__PURE__ */ jsx66(TikTok, {
       style: { height: scale * 36 }
     });
   }
   if (template.cliId === "code-hike") {
-    return /* @__PURE__ */ jsx64(CodeHike, {
+    return /* @__PURE__ */ jsx66(CodeHike, {
       style: { height: scale * 36 }
     });
   }
   if (template.cliId === "prompt-to-video") {
-    return /* @__PURE__ */ jsx64(PromptToVideoIcon, {
+    return /* @__PURE__ */ jsx66(PromptToVideoIcon, {
       style: { height: scale * 36 }
     });
   }
@@ -19031,7 +19038,7 @@ var IconForTemplate = ({ template, scale = 1 }) => {
 };
 
 // src/components/icons/editor.tsx
-import { jsx as jsx66, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx67, jsxs as jsxs12 } from "react/jsx-runtime";
 var EditorIcon = (props) => {
   return /* @__PURE__ */ jsxs12("svg", {
     viewBox: "0 0 251 251",
@@ -19039,7 +19046,7 @@ var EditorIcon = (props) => {
     xmlns: "http://www.w3.org/2000/svg",
     ...props,
     children: [
-      /* @__PURE__ */ jsx66("rect", {
+      /* @__PURE__ */ jsx67("rect", {
         x: "4",
         y: "4",
         width: "52",
@@ -19048,7 +19055,7 @@ var EditorIcon = (props) => {
         stroke: "currentColor",
         strokeWidth: "16"
       }),
-      /* @__PURE__ */ jsx66("rect", {
+      /* @__PURE__ */ jsx67("rect", {
         x: "195",
         y: "4",
         width: "52",
@@ -19057,7 +19064,7 @@ var EditorIcon = (props) => {
         stroke: "currentColor",
         strokeWidth: "16"
       }),
-      /* @__PURE__ */ jsx66("rect", {
+      /* @__PURE__ */ jsx67("rect", {
         x: "4",
         y: "195",
         width: "52",
@@ -19066,7 +19073,7 @@ var EditorIcon = (props) => {
         stroke: "currentColor",
         strokeWidth: "16"
       }),
-      /* @__PURE__ */ jsx66("rect", {
+      /* @__PURE__ */ jsx67("rect", {
         x: "195",
         y: "195",
         width: "52",
@@ -19075,22 +19082,22 @@ var EditorIcon = (props) => {
         stroke: "currentColor",
         strokeWidth: "16"
       }),
-      /* @__PURE__ */ jsx66("path", {
+      /* @__PURE__ */ jsx67("path", {
         d: "M55 222H196",
         stroke: "currentColor",
         strokeWidth: "16"
       }),
-      /* @__PURE__ */ jsx66("path", {
+      /* @__PURE__ */ jsx67("path", {
         d: "M30 60L30 191",
         stroke: "currentColor",
         strokeWidth: "16"
       }),
-      /* @__PURE__ */ jsx66("path", {
+      /* @__PURE__ */ jsx67("path", {
         d: "M221 60V191",
         stroke: "currentColor",
         strokeWidth: "16"
       }),
-      /* @__PURE__ */ jsx66("path", {
+      /* @__PURE__ */ jsx67("path", {
         d: "M55 30H196",
         stroke: "currentColor",
         strokeWidth: "16"
@@ -19100,7 +19107,7 @@ var EditorIcon = (props) => {
 };
 
 // src/components/icons/timeline.tsx
-import { jsx as jsx67, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx68, jsxs as jsxs13 } from "react/jsx-runtime";
 var TimelineIcon = (props) => {
   return /* @__PURE__ */ jsxs13("svg", {
     ...props,
@@ -19108,14 +19115,14 @@ var TimelineIcon = (props) => {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     children: [
-      /* @__PURE__ */ jsx67("path", {
+      /* @__PURE__ */ jsx68("path", {
         d: "M51.4313 38.0917L31.4998 52.4424C30.2419 53.3481 28.5581 53.3925 27.2543 52.5543L4.73299 38.0763C3.65291 37.382 3 36.1861 3 34.9021V6.77359C3 4.68949 4.68949 3 6.77358 3H49.2264C51.3105 3 53 4.68949 53 6.77358V35.0293C53 36.243 52.4163 37.3826 51.4313 38.0917Z",
         stroke: "currentcolor",
         strokeWidth: "5",
         strokeLinecap: "round",
         strokeLinejoin: "round"
       }),
-      /* @__PURE__ */ jsx67("path", {
+      /* @__PURE__ */ jsx68("path", {
         d: "M29 55L29 66",
         stroke: "currentcolor",
         strokeWidth: "5",
@@ -19126,7 +19133,7 @@ var TimelineIcon = (props) => {
 };
 
 // src/components/templates.tsx
-import { jsx as jsx68, jsxs as jsxs14, Fragment as Fragment6 } from "react/jsx-runtime";
+import { jsx as jsx69, jsxs as jsxs14, Fragment as Fragment6 } from "react/jsx-runtime";
 var Item2 = ({ children, label: label2, description }) => {
   return /* @__PURE__ */ jsxs14("div", {
     className: "h-full w-full flex-1",
@@ -19134,18 +19141,18 @@ var Item2 = ({ children, label: label2, description }) => {
       /* @__PURE__ */ jsxs14("div", {
         className: "flex flex-row items-center",
         children: [
-          /* @__PURE__ */ jsx68("div", {
+          /* @__PURE__ */ jsx69("div", {
             className: "flex mr-2.5 h-[30px] w-[30px] justify-center items-center",
             children
           }),
-          /* @__PURE__ */ jsx68("div", {
+          /* @__PURE__ */ jsx69("div", {
             className: "font-bold",
             children: label2
           })
         ]
       }),
-      /* @__PURE__ */ jsx68("div", {
-        children: /* @__PURE__ */ jsx68("p", {
+      /* @__PURE__ */ jsx69("div", {
+        children: /* @__PURE__ */ jsx69("p", {
           dangerouslySetInnerHTML: {
             __html: description
           },
@@ -19165,30 +19172,30 @@ var Templates = () => {
             className: "text-4xl  md:text-7xl lg:text-8xl font-black leading-none mt-[75px] text-center mb-10",
             children: [
               "Find the right",
-              /* @__PURE__ */ jsx68("br", {}),
+              /* @__PURE__ */ jsx69("br", {}),
               "template"
             ]
           }),
-          /* @__PURE__ */ jsx68("p", {
+          /* @__PURE__ */ jsx69("p", {
             className: "text-center mb-[50px] font-brand",
             children: "Jumpstart your project with a template that fits your usecase."
           }),
-          /* @__PURE__ */ jsx68("h3", {
+          /* @__PURE__ */ jsx69("h3", {
             children: "Free templates"
           }),
-          /* @__PURE__ */ jsx68("div", {
+          /* @__PURE__ */ jsx69("div", {
             className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-[15px]",
             children: CreateVideoInternals.FEATURED_TEMPLATES.map((template) => {
-              return /* @__PURE__ */ jsx68("a", {
+              return /* @__PURE__ */ jsx69("a", {
                 href: `/templates/${template.cliId}`,
                 className: "no-underline",
-                children: /* @__PURE__ */ jsx68(Button, {
+                children: /* @__PURE__ */ jsx69(Button, {
                   depth: 0.5,
                   className: "items-start justify-start text-left p-3.5 flex flex-col relative cursor-pointer text-[var(--text-color)] no-underline h-full w-full",
-                  children: /* @__PURE__ */ jsx68(Item2, {
+                  children: /* @__PURE__ */ jsx69(Item2, {
                     label: template.homePageLabel,
                     description: template.description,
-                    children: /* @__PURE__ */ jsx68(IconForTemplate, {
+                    children: /* @__PURE__ */ jsx69(IconForTemplate, {
                       scale: 0.7,
                       template
                     })
@@ -19197,24 +19204,24 @@ var Templates = () => {
               }, template.cliId);
             })
           }),
-          /* @__PURE__ */ jsx68("br", {}),
-          /* @__PURE__ */ jsx68("br", {}),
-          /* @__PURE__ */ jsx68("h3", {
+          /* @__PURE__ */ jsx69("br", {}),
+          /* @__PURE__ */ jsx69("br", {}),
+          /* @__PURE__ */ jsx69("h3", {
             children: "Paid templates"
           }),
           /* @__PURE__ */ jsxs14("div", {
             className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-[15px]",
             children: [
-              /* @__PURE__ */ jsx68("a", {
+              /* @__PURE__ */ jsx69("a", {
                 className: "no-underline",
                 href: `https://www.remotion.pro/editor-starter`,
-                children: /* @__PURE__ */ jsx68(Button, {
+                children: /* @__PURE__ */ jsx69(Button, {
                   depth: 0.5,
                   className: "text-left p-3.5 flex flex-col relative cursor-pointer text-[var(--text-color)] no-underline h-full w-full",
-                  children: /* @__PURE__ */ jsx68(Item2, {
+                  children: /* @__PURE__ */ jsx69(Item2, {
                     label: "Editor Starter",
                     description: "A boilerplate for starting your own video editor",
-                    children: /* @__PURE__ */ jsx68(EditorIcon, {
+                    children: /* @__PURE__ */ jsx69(EditorIcon, {
                       style: {
                         height: 0.7 * 32,
                         overflow: "visible"
@@ -19223,19 +19230,19 @@ var Templates = () => {
                   })
                 })
               }, "editor-starter"),
-              /* @__PURE__ */ jsx68("a", {
+              /* @__PURE__ */ jsx69("a", {
                 className: "no-underline",
                 href: `https://www.remotion.pro/mapbox-globe`,
-                children: /* @__PURE__ */ jsx68(Button, {
+                children: /* @__PURE__ */ jsx69(Button, {
                   depth: 0.5,
                   className: "text-left p-3.5 flex flex-col relative cursor-pointer text-[var(--text-color)] no-underline h-full w-full",
-                  children: /* @__PURE__ */ jsx68(Item2, {
+                  children: /* @__PURE__ */ jsx69(Item2, {
                     label: "Mapbox Globe",
                     description: "A rotateable and zoomeable 3D Globe",
-                    children: /* @__PURE__ */ jsx68("svg", {
+                    children: /* @__PURE__ */ jsx69("svg", {
                       style: { height: 0.7 * 36, overflow: "visible" },
                       viewBox: "0 0 512 512",
-                      children: /* @__PURE__ */ jsx68("path", {
+                      children: /* @__PURE__ */ jsx69("path", {
                         fill: "currentcolor",
                         d: "M256 464c7.4 0 27-7.2 47.6-48.4c8.8-17.7 16.4-39.2 22-63.6H186.4c5.6 24.4 13.2 45.9 22 63.6C229 456.8 248.6 464 256 464zM178.5 304h155c1.6-15.3 2.5-31.4 2.5-48s-.9-32.7-2.5-48h-155c-1.6 15.3-2.5 31.4-2.5 48s.9 32.7 2.5 48zm7.9-144H325.6c-5.6-24.4-13.2-45.9-22-63.6C283 55.2 263.4 48 256 48s-27 7.2-47.6 48.4c-8.8 17.7-16.4 39.2-22 63.6zm195.3 48c1.5 15.5 2.2 31.6 2.2 48s-.8 32.5-2.2 48h76.7c3.6-15.4 5.6-31.5 5.6-48s-1.9-32.6-5.6-48H381.8zm58.8-48c-21.4-41.1-56.1-74.1-98.4-93.4c14.1 25.6 25.3 57.5 32.6 93.4h65.9zm-303.3 0c7.3-35.9 18.5-67.7 32.6-93.4c-42.3 19.3-77 52.3-98.4 93.4h65.9zM53.6 208c-3.6 15.4-5.6 31.5-5.6 48s1.9 32.6 5.6 48h76.7c-1.5-15.5-2.2-31.6-2.2-48s.8-32.5 2.2-48H53.6zM342.1 445.4c42.3-19.3 77-52.3 98.4-93.4H374.7c-7.3 35.9-18.5 67.7-32.6 93.4zm-172.2 0c-14.1-25.6-25.3-57.5-32.6-93.4H71.4c21.4 41.1 56.1 74.1 98.4 93.4zM256 512A256 256 0 1 1 256 0a256 256 0 1 1 0 512z"
                       })
@@ -19243,16 +19250,16 @@ var Templates = () => {
                   })
                 })
               }, "mapbox-globe"),
-              /* @__PURE__ */ jsx68("a", {
+              /* @__PURE__ */ jsx69("a", {
                 className: "no-underline",
                 href: `https://www.remotion.pro/watercolor-map`,
-                children: /* @__PURE__ */ jsx68(Button, {
+                children: /* @__PURE__ */ jsx69(Button, {
                   depth: 0.5,
                   className: "text-left p-3.5 flex flex-col relative cursor-pointer text-[var(--text-color)] no-underline h-full w-full",
-                  children: /* @__PURE__ */ jsx68(Item2, {
+                  children: /* @__PURE__ */ jsx69(Item2, {
                     label: "Watercolor Map",
                     description: "A beautiful 2D map for travel videos",
-                    children: /* @__PURE__ */ jsx68(SkiaIcon, {
+                    children: /* @__PURE__ */ jsx69(SkiaIcon, {
                       style: {
                         height: 0.7 * 32,
                         overflow: "visible"
@@ -19261,16 +19268,16 @@ var Templates = () => {
                   })
                 })
               }, "watercolor-map"),
-              /* @__PURE__ */ jsx68("a", {
+              /* @__PURE__ */ jsx69("a", {
                 className: "no-underline",
                 href: `https://www.remotion.pro/timeline`,
-                children: /* @__PURE__ */ jsx68(Button, {
+                children: /* @__PURE__ */ jsx69(Button, {
                   depth: 0.5,
                   className: "text-left p-3.5 flex flex-col relative cursor-pointer text-[var(--text-color)] no-underline h-full w-full",
-                  children: /* @__PURE__ */ jsx68(Item2, {
+                  children: /* @__PURE__ */ jsx69(Item2, {
                     label: "<Timeline />",
                     description: "A copy pasteable component for timeline-based editing",
-                    children: /* @__PURE__ */ jsx68(TimelineIcon, {
+                    children: /* @__PURE__ */ jsx69(TimelineIcon, {
                       style: {
                         height: 0.7 * 32
                       }
@@ -19280,14 +19287,14 @@ var Templates = () => {
               }, "timeline")
             ]
           }),
-          /* @__PURE__ */ jsx68("br", {}),
+          /* @__PURE__ */ jsx69("br", {}),
           /* @__PURE__ */ jsxs14("p", {
             className: "text-center text-gray-500 font-brand text-sm",
             children: [
               "Couldn't",
               " find what you need? Find more in the list of",
               " ",
-              /* @__PURE__ */ jsx68("a", {
+              /* @__PURE__ */ jsx69("a", {
                 href: "/docs/resources",
                 children: "Resources"
               }),
@@ -19296,7 +19303,7 @@ var Templates = () => {
           })
         ]
       }),
-      /* @__PURE__ */ jsx68("br", {})
+      /* @__PURE__ */ jsx69("br", {})
     ]
   });
 };