@remotion/promo-pages 4.0.372 → 4.0.373

package/dist/design.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,225 +2031,95 @@ 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 } : {},
-      ...height ? { height } : {},
-      ...styleIfThere ?? {}
-    };
-  }, [height, styleIfThere, width]);
-  if (ref !== null && layout === "none") {
-    throw new TypeError('It is not supported to pass both a `ref` and `layout="none"` to <Sequence />.');
-  }
-  const isSequenceHidden = hidden[id] ?? false;
-  if (isSequenceHidden) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx82(SequenceContext.Provider, {
-    value: contextValue,
-    children: content === null ? null : other.layout === "none" ? content : /* @__PURE__ */ jsx82(AbsoluteFill, {
-      ref,
-      style: defaultStyle,
-      className: other.className,
-      children: content
-    })
-  });
-}, RegularSequence, PremountedPostmountedSequenceRefForwardingFunction = (props, ref) => {
-  const frame = useCurrentFrame();
-  if (props.layout === "none") {
-    throw new Error('`<Sequence>` with `premountFor` and `postmountFor` props does not support layout="none"');
-  }
-  const {
-    style: passedStyle,
-    from = 0,
-    durationInFrames = Infinity,
-    premountFor = 0,
-    postmountFor = 0,
-    styleWhilePremounted,
-    styleWhilePostmounted,
-    ...otherProps
-  } = props;
-  const endThreshold = Math.ceil(from + durationInFrames - 1);
-  const premountingActive = frame < from && frame >= from - premountFor;
-  const postmountingActive = frame > endThreshold && frame <= endThreshold + postmountFor;
-  const freezeFrame = premountingActive ? from : postmountingActive ? from + durationInFrames - 1 : 0;
-  const isFreezingActive = premountingActive || postmountingActive;
-  const style = useMemo9(() => {
-    return {
-      ...passedStyle,
-      opacity: premountingActive || postmountingActive ? 0 : 1,
-      pointerEvents: premountingActive || postmountingActive ? "none" : passedStyle?.pointerEvents ?? undefined,
-      ...premountingActive ? styleWhilePremounted : {},
-      ...postmountingActive ? styleWhilePostmounted : {}
-    };
-  }, [
-    passedStyle,
-    premountingActive,
-    postmountingActive,
-    styleWhilePremounted,
-    styleWhilePostmounted
-  ]);
-  return /* @__PURE__ */ jsx82(Freeze, {
-    frame: freezeFrame,
-    active: isFreezingActive,
-    children: /* @__PURE__ */ jsx82(Sequence, {
-      ref,
-      from,
-      durationInFrames,
-      style,
-      _remotionInternalPremountDisplay: premountFor,
-      _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)
-      };
-    }
-  }
-  if (typeof window !== "undefined") {
-    window.remotion_renderReady = false;
+      ...width ? { width } : {},
+      ...height ? { height } : {},
+      ...styleIfThere ?? {}
+    };
+  }, [height, styleIfThere, width]);
+  if (ref !== null && layout === "none") {
+    throw new TypeError('It is not supported to pass both a `ref` and `layout="none"` to <Sequence />.');
   }
-  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.");
+  const isSequenceHidden = hidden[id] ?? false;
+  if (isSequenceHidden) {
+    return null;
   }
-  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));
+  return /* @__PURE__ */ jsx92(SequenceContext.Provider, {
+    value: contextValue,
+    children: content === null ? null : other.layout === "none" ? content : /* @__PURE__ */ jsx92(AbsoluteFill, {
+      ref,
+      style: defaultStyle,
+      className: other.className,
+      children: content
+    })
+  });
+}, RegularSequence, PremountedPostmountedSequenceRefForwardingFunction = (props, ref) => {
+  const frame = useCurrentFrame();
+  if (props.layout === "none") {
+    throw new Error('`<Sequence>` with `premountFor` and `postmountFor` props does not support layout="none"');
   }
-  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;
+  const {
+    style: passedStyle,
+    from = 0,
+    durationInFrames = Infinity,
+    premountFor = 0,
+    postmountFor = 0,
+    styleWhilePremounted,
+    styleWhilePostmounted,
+    ...otherProps
+  } = props;
+  const endThreshold = Math.ceil(from + durationInFrames - 1);
+  const premountingActive = frame < from && frame >= from - premountFor;
+  const postmountingActive = frame > endThreshold && frame <= endThreshold + postmountFor;
+  const freezeFrame = premountingActive ? from : postmountingActive ? from + durationInFrames - 1 : 0;
+  const isFreezingActive = premountingActive || postmountingActive;
+  const style = useMemo10(() => {
+    return {
+      ...passedStyle,
+      opacity: premountingActive || postmountingActive ? 0 : 1,
+      pointerEvents: premountingActive || postmountingActive ? "none" : passedStyle?.pointerEvents ?? undefined,
+      ...premountingActive ? styleWhilePremounted : {},
+      ...postmountingActive ? styleWhilePostmounted : {}
+    };
+  }, [
+    passedStyle,
+    premountingActive,
+    postmountingActive,
+    styleWhilePremounted,
+    styleWhilePostmounted
+  ]);
+  return /* @__PURE__ */ jsx92(Freeze, {
+    frame: freezeFrame,
+    active: isFreezingActive,
+    children: /* @__PURE__ */ jsx92(Sequence, {
+      ref,
+      from,
+      durationInFrames,
+      style,
+      _remotionInternalPremountDisplay: premountFor,
+      _remotionInternalPostmountDisplay: postmountFor,
+      _remotionInternalIsPremounting: premountingActive,
+      _remotionInternalIsPostmounting: postmountingActive,
+      ...otherProps
+    })
   });
-  if (handles.length === 0 && typeof window !== "undefined") {
-    window.remotion_renderReady = true;
+}, PremountedPostmountedSequence, SequenceRefForwardingFunction = (props, ref) => {
+  const env = useRemotionEnvironment();
+  if (props.layout !== "none" && !env.isRendering) {
+    if (props.premountFor || props.postmountFor) {
+      return /* @__PURE__ */ jsx92(PremountedPostmountedSequence, {
+        ...props,
+        ref
+      });
+    }
   }
-}, 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) => {
+  return /* @__PURE__ */ jsx92(RegularSequence, {
+    ...props,
+    ref
+  });
+}, 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;
@@ -17960,54 +17967,54 @@ var Triangle2 = (props) => {
 };
 
 // src/components/design.tsx
-import { useCallback as useCallback26, useState as useState35 } from "react";
-import { jsx as jsx38, jsxs as jsxs5 } from "react/jsx-runtime";
+import { useCallback as useCallback26, useState as useState34 } from "react";
+import { jsx as jsx39, jsxs as jsxs5 } from "react/jsx-runtime";
 var Explainer = ({ children }) => {
-  return /* @__PURE__ */ jsx38("div", {
-    children: /* @__PURE__ */ jsx38("div", {
+  return /* @__PURE__ */ jsx39("div", {
+    children: /* @__PURE__ */ jsx39("div", {
       className: "text-gray-500 font-brand text-sm mb-2",
       children
     })
   });
 };
 var DesignPage = () => {
-  const [count3, setCount] = useState35(10);
-  const [active, setActive] = useState35(false);
-  const [submitButtonActive, setSubmitButtonActive] = useState35(true);
+  const [count3, setCount] = useState34(10);
+  const [active, setActive] = useState34(false);
+  const [submitButtonActive, setSubmitButtonActive] = useState34(true);
   const onClick = useCallback26(() => {
     setSubmitButtonActive(false);
     setTimeout(() => {
       setSubmitButtonActive(true);
     }, 1000);
   }, []);
-  return /* @__PURE__ */ jsx38("div", {
+  return /* @__PURE__ */ jsx39("div", {
     className: "bg-[var(--background)] relative",
     children: /* @__PURE__ */ jsxs5("div", {
       className: "max-w-[800px] mx-auto pt-10 pb-10 px-4",
       children: [
-        /* @__PURE__ */ jsx38("h1", {
+        /* @__PURE__ */ jsx39("h1", {
           children: "@remotion/design"
         }),
-        /* @__PURE__ */ jsx38("a", {
+        /* @__PURE__ */ jsx39("a", {
           href: "https://github.com/remotion-dev/remotion/blob/main/packages/promo-pages/src/components/design.tsx",
           className: "font-brand text-brand",
           target: "_blank",
           children: "View source"
         }),
-        /* @__PURE__ */ jsx38("br", {}),
-        /* @__PURE__ */ jsx38("br", {}),
-        /* @__PURE__ */ jsx38("h2", {
+        /* @__PURE__ */ jsx39("br", {}),
+        /* @__PURE__ */ jsx39("br", {}),
+        /* @__PURE__ */ jsx39("h2", {
           className: "text-brand",
           children: "<Button />"
         }),
-        /* @__PURE__ */ jsx38(Explainer, {
+        /* @__PURE__ */ jsx39(Explainer, {
           children: "Button with label"
         }),
-        /* @__PURE__ */ jsx38(Button, {
+        /* @__PURE__ */ jsx39(Button, {
           children: "Click me"
         }),
-        /* @__PURE__ */ jsx38("br", {}),
-        /* @__PURE__ */ jsx38(Explainer, {
+        /* @__PURE__ */ jsx39("br", {}),
+        /* @__PURE__ */ jsx39(Explainer, {
           children: "Disabled"
         }),
         /* @__PURE__ */ jsxs5(Button, {
@@ -18017,123 +18024,123 @@ var DesignPage = () => {
             " click me"
           ]
         }),
-        /* @__PURE__ */ jsx38("br", {}),
-        /* @__PURE__ */ jsx38(Explainer, {
+        /* @__PURE__ */ jsx39("br", {}),
+        /* @__PURE__ */ jsx39(Explainer, {
           children: "Primary"
         }),
-        /* @__PURE__ */ jsx38(Button, {
+        /* @__PURE__ */ jsx39(Button, {
           className: "bg-brand text-white",
           children: "Primary"
         }),
-        /* @__PURE__ */ jsx38("br", {}),
-        /* @__PURE__ */ jsx38(Explainer, {
+        /* @__PURE__ */ jsx39("br", {}),
+        /* @__PURE__ */ jsx39(Explainer, {
           children: "Click to disable"
         }),
-        /* @__PURE__ */ jsx38(Button, {
+        /* @__PURE__ */ jsx39(Button, {
           onClick,
           disabled: !submitButtonActive,
           children: "Submit"
         }),
-        /* @__PURE__ */ jsx38("br", {}),
-        /* @__PURE__ */ jsx38(Explainer, {
+        /* @__PURE__ */ jsx39("br", {}),
+        /* @__PURE__ */ jsx39(Explainer, {
           children: "Rounded"
         }),
-        /* @__PURE__ */ jsx38(Button, {
+        /* @__PURE__ */ jsx39(Button, {
           className: "rounded-full",
           children: "Rounded"
         }),
-        /* @__PURE__ */ jsx38("br", {}),
-        /* @__PURE__ */ jsx38(Explainer, {
+        /* @__PURE__ */ jsx39("br", {}),
+        /* @__PURE__ */ jsx39(Explainer, {
           children: "Full width"
         }),
-        /* @__PURE__ */ jsx38(Button, {
+        /* @__PURE__ */ jsx39(Button, {
           className: "w-full",
           children: "Choose a template"
         }),
-        /* @__PURE__ */ jsx38("br", {}),
-        /* @__PURE__ */ jsx38(Explainer, {
+        /* @__PURE__ */ jsx39("br", {}),
+        /* @__PURE__ */ jsx39(Explainer, {
           children: "Full width rounded"
         }),
-        /* @__PURE__ */ jsx38(Button, {
+        /* @__PURE__ */ jsx39(Button, {
           className: "w-full rounded-full",
           children: "Fully rounded"
         }),
-        /* @__PURE__ */ jsx38("div", {
+        /* @__PURE__ */ jsx39("div", {
           className: "h-8"
         }),
-        /* @__PURE__ */ jsx38(Explainer, {
+        /* @__PURE__ */ jsx39(Explainer, {
           children: "Circular"
         }),
-        /* @__PURE__ */ jsx38(Button, {
+        /* @__PURE__ */ jsx39(Button, {
           className: "rounded-full bg-brand w-12 h-12"
         }),
-        /* @__PURE__ */ jsx38("div", {
+        /* @__PURE__ */ jsx39("div", {
           className: "h-8"
         }),
-        /* @__PURE__ */ jsx38("h2", {
+        /* @__PURE__ */ jsx39("h2", {
           className: "text-brand",
           children: "<Counter />"
         }),
-        /* @__PURE__ */ jsx38(Counter, {
+        /* @__PURE__ */ jsx39(Counter, {
           count: count3,
           setCount,
           minCount: 1,
           step: 1
         }),
-        /* @__PURE__ */ jsx38("br", {}),
+        /* @__PURE__ */ jsx39("br", {}),
         " ",
-        /* @__PURE__ */ jsx38("h2", {
+        /* @__PURE__ */ jsx39("h2", {
           className: "text-brand",
           children: "<Switch />"
         }),
-        /* @__PURE__ */ jsx38(Switch, {
+        /* @__PURE__ */ jsx39(Switch, {
           active,
           onToggle: () => setActive((e) => !e)
         }),
-        /* @__PURE__ */ jsx38("br", {}),
+        /* @__PURE__ */ jsx39("br", {}),
         " ",
-        /* @__PURE__ */ jsx38("h2", {
+        /* @__PURE__ */ jsx39("h2", {
           className: "text-brand",
           children: "<Card />"
         }),
         /* @__PURE__ */ jsxs5(Card, {
           className: "px-4 py-4",
           children: [
-            /* @__PURE__ */ jsx38("h3", {
+            /* @__PURE__ */ jsx39("h3", {
               className: "text-text",
               children: "Card"
             }),
-            /* @__PURE__ */ jsx38("div", {
+            /* @__PURE__ */ jsx39("div", {
               className: "text-gray-500",
               children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
             })
           ]
         }),
-        /* @__PURE__ */ jsx38("br", {}),
-        /* @__PURE__ */ jsx38("h2", {
+        /* @__PURE__ */ jsx39("br", {}),
+        /* @__PURE__ */ jsx39("h2", {
           className: "text-brand",
           children: "<Select />"
         }),
         /* @__PURE__ */ jsxs5(Select2, {
           defaultValue: "option1",
           children: [
-            /* @__PURE__ */ jsx38(SelectTrigger2, {
+            /* @__PURE__ */ jsx39(SelectTrigger2, {
               style: { width: "200px" },
-              children: /* @__PURE__ */ jsx38(SelectValue2, {
+              children: /* @__PURE__ */ jsx39(SelectValue2, {
                 placeholder: "Select an option"
               })
             }),
             /* @__PURE__ */ jsxs5(SelectContent2, {
               children: [
-                /* @__PURE__ */ jsx38(SelectItem2, {
+                /* @__PURE__ */ jsx39(SelectItem2, {
                   value: "option1",
                   children: "Option 1"
                 }),
-                /* @__PURE__ */ jsx38(SelectItem2, {
+                /* @__PURE__ */ jsx39(SelectItem2, {
                   value: "option2",
                   children: "Option 2"
                 }),
-                /* @__PURE__ */ jsx38(SelectItem2, {
+                /* @__PURE__ */ jsx39(SelectItem2, {
                   value: "option3",
                   children: "Option 3"
                 })