@remotion/promo-pages 4.0.441 → 4.0.443

package/dist/Homepage.js

@@ -740,176 +740,176 @@ import { useMemo as useMemo36 } from "react";
 
 // ../core/dist/esm/index.mjs
 import { createContext } from "react";
-import { createContext as createContext2, useContext } from "react";
+import { Suspense, useContext as useContext9, useEffect as useEffect2 } from "react";
+import { createPortal } from "react-dom";
+import { createContext as createContext2 } from "react";
 import { jsx as jsx2 } from "react/jsx-runtime";
+import { createContext as createContext3 } from "react";
+import { createContext as createContext5, useContext as useContext2, useEffect, useMemo as useMemo2 } from "react";
+import { createContext as createContext4, useCallback, useContext, useMemo, useRef } from "react";
+import { jsx as jsx22 } from "react/jsx-runtime";
+import { createContext as createContext6, useContext as useContext3 } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+import { forwardRef, useMemo as useMemo3 } from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+import { createContext as createContext8, createRef, useContext as useContext5, useMemo as useMemo5 } from "react";
+import React3, { createContext as createContext7, useCallback as useCallback2, useMemo as useMemo4 } from "react";
+import { jsx as jsx6 } from "react/jsx-runtime";
+import { useContext as useContext4, useState } from "react";
+import React4 from "react";
+import { createContext as createContext10, useCallback as useCallback3, useContext as useContext7 } from "react";
+import { createContext as createContext9 } from "react";
+import * as React5 from "react";
+import React6, { useMemo as useMemo6, useRef as useRef2 } from "react";
+import { useContext as useContext8, useMemo as useMemo7 } from "react";
+import { jsx as jsx7 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef2,
-  useContext as useContext13,
-  useEffect,
-  useMemo as useMemo11,
+  useContext as useContext15,
+  useEffect as useEffect3,
+  useMemo as useMemo13,
   useState as useState4
 } from "react";
-import { forwardRef, useMemo } from "react";
-import { jsx as jsx22 } from "react/jsx-runtime";
-import { useContext as useContext11, useMemo as useMemo8 } from "react";
-import { createContext as createContext3 } from "react";
-import { useContext as useContext7, useMemo as useMemo6 } from "react";
+import { useContext as useContext14, useMemo as useMemo11 } from "react";
+import { createContext as createContext11 } from "react";
+import { useContext as useContext10, useMemo as useMemo9 } from "react";
 import {
-  createContext as createContext6,
+  createContext as createContext12,
   useLayoutEffect,
-  useMemo as useMemo2,
-  useRef,
+  useMemo as useMemo8,
+  useRef as useRef3,
   useState as useState2
 } from "react";
-import { createContext as createContext5, useCallback, useContext as useContext4 } from "react";
-import { createContext as createContext4 } from "react";
-import * as React2 from "react";
-import { useContext as useContext3, useState } from "react";
-import React3 from "react";
-import { jsx as jsx3 } from "react/jsx-runtime";
-import { useContext as useContext6, useMemo as useMemo5 } from "react";
-import { createContext as createContext7 } from "react";
-import { createContext as createContext9, createRef, useContext as useContext5, useMemo as useMemo4 } from "react";
-import React5, { createContext as createContext8, useCallback as useCallback2, useMemo as useMemo3 } from "react";
-import { jsx as jsx4 } from "react/jsx-runtime";
-import { useContext as useContext8 } from "react";
-import { createContext as createContext10 } from "react";
-import { jsx as jsx5 } from "react/jsx-runtime";
-import { useContext as useContext10 } from "react";
-import { useContext as useContext9, useMemo as useMemo7 } from "react";
-import { jsx as jsx6 } from "react/jsx-runtime";
-import { createContext as createContext11, useCallback as useCallback3, useContext as useContext12, useMemo as useMemo9, useRef as useRef2 } from "react";
-import { createContext as createContext12 } from "react";
-import React8, { useCallback as useCallback4, useMemo as useMemo10, useRef as useRef3, useState as useState3 } from "react";
-import { jsx as jsx7 } from "react/jsx-runtime";
 import { jsx as jsx8 } from "react/jsx-runtime";
+import { useContext as useContext11 } from "react";
+import { useContext as useContext13 } from "react";
+import { useContext as useContext12, useMemo as useMemo10 } from "react";
+import { jsx as jsx9 } from "react/jsx-runtime";
+import { createContext as createContext13 } from "react";
+import React10, { useCallback as useCallback4, useMemo as useMemo12, useRef as useRef4, useState as useState3 } from "react";
+import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef3,
-  useEffect as useEffect2,
+  useEffect as useEffect4,
   useImperativeHandle as useImperativeHandle2,
   useLayoutEffect as useLayoutEffect2,
-  useRef as useRef5,
+  useRef as useRef6,
   useState as useState5
 } from "react";
-import React10, { useCallback as useCallback5, useImperativeHandle, useRef as useRef4 } from "react";
-import { jsx as jsx9 } from "react/jsx-runtime";
-import { jsx as jsx10 } from "react/jsx-runtime";
-import { useContext as useContext14, useLayoutEffect as useLayoutEffect4, useState as useState7 } from "react";
+import React12, { useCallback as useCallback5, useImperativeHandle, useRef as useRef5 } from "react";
+import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
+import { useContext as useContext16, useLayoutEffect as useLayoutEffect4, useState as useState7 } from "react";
 import {
-  createContext as createContext13,
+  createContext as createContext14,
   useCallback as useCallback6,
   useImperativeHandle as useImperativeHandle3,
   useLayoutEffect as useLayoutEffect3,
-  useMemo as useMemo12,
-  useRef as useRef6,
+  useMemo as useMemo14,
+  useRef as useRef7,
   useState as useState6
 } from "react";
-import { jsx as jsx11 } from "react/jsx-runtime";
-import { forwardRef as forwardRef6, useCallback as useCallback11, useContext as useContext26 } from "react";
-import React11, { createContext as createContext14, useMemo as useMemo13 } from "react";
-import { jsx as jsx12 } from "react/jsx-runtime";
-import { useContext as useContext15 } from "react";
-import { createContext as createContext15, useEffect as useEffect3, useState as useState8 } from "react";
-import { jsx as jsx13 } from "react/jsx-runtime";
-import { createContext as createContext16, useMemo as useMemo14, useReducer } from "react";
 import { jsx as jsx14 } from "react/jsx-runtime";
-import React17, {
+import { forwardRef as forwardRef6, useCallback as useCallback11, useContext as useContext28 } from "react";
+import React13, { createContext as createContext15, useMemo as useMemo15 } from "react";
+import { jsx as jsx15 } from "react/jsx-runtime";
+import { useContext as useContext17 } from "react";
+import { createContext as createContext16, useEffect as useEffect5, useState as useState8 } from "react";
+import { jsx as jsx16 } from "react/jsx-runtime";
+import { createContext as createContext17, useMemo as useMemo16, useReducer } from "react";
+import { jsx as jsx17 } from "react/jsx-runtime";
+import React19, {
   forwardRef as forwardRef4,
-  useContext as useContext24,
-  useEffect as useEffect10,
+  useContext as useContext26,
+  useEffect as useEffect12,
   useImperativeHandle as useImperativeHandle4,
-  useMemo as useMemo22,
-  useRef as useRef14,
+  useMemo as useMemo24,
+  useRef as useRef15,
   useState as useState13
 } from "react";
-import { useContext as useContext17, useLayoutEffect as useLayoutEffect5, useRef as useRef9 } from "react";
-import React14, {
-  createContext as createContext17,
+import { useContext as useContext19, useLayoutEffect as useLayoutEffect5, useRef as useRef10 } from "react";
+import React16, {
+  createContext as createContext18,
   createRef as createRef2,
   useCallback as useCallback7,
-  useContext as useContext16,
-  useMemo as useMemo16,
-  useRef as useRef7,
+  useContext as useContext18,
+  useMemo as useMemo18,
+  useRef as useRef8,
   useState as useState9
 } from "react";
-import { useMemo as useMemo15 } from "react";
-import { jsx as jsx15, jsxs as jsxs2 } from "react/jsx-runtime";
-import { useRef as useRef8 } from "react";
-import { useContext as useContext19, useEffect as useEffect4, useMemo as useMemo17, useState as useState10 } from "react";
-import { useContext as useContext18 } from "react";
+import { useMemo as useMemo17 } from "react";
+import { jsx as jsx18, jsxs as jsxs22 } from "react/jsx-runtime";
+import { useRef as useRef9 } from "react";
+import { useContext as useContext21, useEffect as useEffect6, useMemo as useMemo19, useState as useState10 } from "react";
+import { useContext as useContext20 } from "react";
 import {
   useCallback as useCallback10,
-  useContext as useContext22,
-  useEffect as useEffect8,
+  useContext as useContext24,
+  useEffect as useEffect10,
   useLayoutEffect as useLayoutEffect7,
-  useRef as useRef13
+  useRef as useRef14
 } from "react";
-import { useCallback as useCallback9, useMemo as useMemo20, useRef as useRef11 } from "react";
-import { useContext as useContext21, useMemo as useMemo19 } from "react";
-import React15, {
+import { useCallback as useCallback9, useMemo as useMemo22, useRef as useRef12 } from "react";
+import { useContext as useContext23, useMemo as useMemo21 } from "react";
+import React17, {
   useCallback as useCallback8,
-  useContext as useContext20,
-  useEffect as useEffect5,
+  useContext as useContext22,
+  useEffect as useEffect7,
   useLayoutEffect as useLayoutEffect6,
-  useMemo as useMemo18,
-  useRef as useRef10,
+  useMemo as useMemo20,
+  useRef as useRef11,
   useState as useState11
 } from "react";
-import { jsx as jsx16 } from "react/jsx-runtime";
-import React16 from "react";
-import { useEffect as useEffect6, useState as useState12 } from "react";
-import { useEffect as useEffect7, useRef as useRef12 } from "react";
-import { useEffect as useEffect9 } from "react";
-import { createContext as createContext18, useContext as useContext23, useMemo as useMemo21 } from "react";
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
+import React18 from "react";
+import { useEffect as useEffect8, useState as useState12 } from "react";
+import { useEffect as useEffect9, useRef as useRef13 } from "react";
+import { useEffect as useEffect11 } from "react";
+import { createContext as createContext19, useContext as useContext25, useMemo as useMemo23 } from "react";
+import { jsx as jsx20 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef5,
-  useContext as useContext25,
-  useEffect as useEffect11,
+  useContext as useContext27,
+  useEffect as useEffect13,
   useImperativeHandle as useImperativeHandle5,
   useLayoutEffect as useLayoutEffect8,
-  useMemo as useMemo23,
-  useRef as useRef15
+  useMemo as useMemo25,
+  useRef as useRef16
 } 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 useEffect13 } from "react";
-import { createPortal } from "react-dom";
-import { createContext as createContext19, useContext as useContext27, useEffect as useEffect12, useMemo as useMemo24 } 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 useMemo25, useRef as useRef16 } from "react";
+import { jsx as jsx21 } from "react/jsx-runtime";
 import { jsx as jsx222 } from "react/jsx-runtime";
 import { forwardRef as forwardRef7, useCallback as useCallback12, useState as useState14 } from "react";
 import { jsx as jsx23 } from "react/jsx-runtime";
 import {
-  forwardRef as forwardRef8,
   useCallback as useCallback13,
-  useContext as useContext29,
+  useContext as useContext30,
   useImperativeHandle as useImperativeHandle6,
   useLayoutEffect as useLayoutEffect9,
   useRef as useRef17,
-  useState as useState15
+  useState as useState16
 } from "react";
+import React23, { forwardRef as forwardRef8, useMemo as useMemo27 } from "react";
+import { useContext as useContext29, useMemo as useMemo26, useState as useState15 } from "react";
 import { jsx as jsx24 } from "react/jsx-runtime";
 import { createRef as createRef3 } from "react";
-import React24 from "react";
+import React25 from "react";
 import {
   useCallback as useCallback14,
   useImperativeHandle as useImperativeHandle7,
-  useMemo as useMemo26,
+  useMemo as useMemo28,
   useRef as useRef18,
-  useState as useState16
+  useState as useState17
 } from "react";
 import { jsx as jsx25 } from "react/jsx-runtime";
-import React25 from "react";
-import { useMemo as useMemo28 } from "react";
-import { createContext as createContext20, useContext as useContext30, useMemo as useMemo27 } from "react";
+import React26 from "react";
+import { useMemo as useMemo30 } from "react";
+import { createContext as createContext20, useContext as useContext31, useMemo as useMemo29 } from "react";
 import { jsx as jsx26 } from "react/jsx-runtime";
 import { jsx as jsx27 } from "react/jsx-runtime";
-import React27 from "react";
-import React28, { createContext as createContext21 } from "react";
-import { useContext as useContext31, useMemo as useMemo29, useState as useState17 } from "react";
+import React28 from "react";
+import React29, { createContext as createContext21 } from "react";
 import { useContext as useContext32 } from "react";
 import { useCallback as useCallback16 } from "react";
 import {
@@ -917,34 +917,33 @@ import {
   useContext as useContext33,
   useEffect as useEffect14,
   useLayoutEffect as useLayoutEffect10,
-  useMemo as useMemo30,
+  useMemo as useMemo31,
   useState as useState18
 } from "react";
 import { jsx as jsx28 } from "react/jsx-runtime";
-import React30, {
+import React31, {
   forwardRef as forwardRef9,
   useContext as useContext34,
   useEffect as useEffect16,
   useImperativeHandle as useImperativeHandle8,
-  useMemo as useMemo31,
+  useMemo as useMemo32,
   useRef as useRef19,
   useState as useState19
 } from "react";
 import { useEffect as useEffect15 } from "react";
 import { jsx as jsx29 } from "react/jsx-runtime";
 import { jsx as jsx30 } from "react/jsx-runtime";
-import React32, { forwardRef as forwardRef10, useMemo as useMemo32 } from "react";
 import React33, { useMemo as useMemo33 } from "react";
 import { jsx as jsx31 } from "react/jsx-runtime";
-import { Children, forwardRef as forwardRef11, useMemo as useMemo34 } from "react";
+import { Children, forwardRef as forwardRef10, useMemo as useMemo34 } from "react";
 import React34 from "react";
 import React35, { createContext as createContext22 } from "react";
 import { jsx as jsx32 } from "react/jsx-runtime";
 import { jsx as jsx33 } from "react/jsx-runtime";
 import React37 from "react";
-import { forwardRef as forwardRef13, useCallback as useCallback17, useContext as useContext36 } from "react";
+import { forwardRef as forwardRef12, useCallback as useCallback17, useContext as useContext36 } from "react";
 import {
-  forwardRef as forwardRef12,
+  forwardRef as forwardRef11,
   useContext as useContext35,
   useEffect as useEffect17,
   useImperativeHandle as useImperativeHandle9,
@@ -979,53 +978,171 @@ if (typeof createContext !== "function") {
   throw new Error(err.join(`
 `));
 }
-var componentsToAddStacksTo = [];
-var getComponentsToAddStacksTo = () => componentsToAddStacksTo;
-var addSequenceStackTraces = (component) => {
-  componentsToAddStacksTo.push(component);
-};
-var IsPlayerContext = createContext2(false);
-var IsPlayerContextProvider = ({
-  children
-}) => {
-  return /* @__PURE__ */ jsx2(IsPlayerContext.Provider, {
+var CanUseRemotionHooks = createContext2(false);
+var CanUseRemotionHooksProvider = ({ children }) => {
+  return /* @__PURE__ */ jsx2(CanUseRemotionHooks.Provider, {
     value: true,
     children
   });
 };
-var useIsPlayer = () => {
-  return useContext(IsPlayerContext);
+var CompositionManager = createContext3({
+  compositions: [],
+  folders: [],
+  currentCompositionMetadata: null,
+  canvasContent: null
+});
+var CompositionSetters = createContext3({
+  registerComposition: () => {
+    return;
+  },
+  unregisterComposition: () => {
+    return;
+  },
+  registerFolder: () => {
+    return;
+  },
+  unregisterFolder: () => {
+    return;
+  },
+  setCanvasContent: () => {
+    return;
+  },
+  onlyRenderComposition: null
+});
+var NonceContext = createContext4({
+  getNonce: () => 0
+});
+var fastRefreshNonce = 0;
+try {
+  if (typeof __webpack_module__ !== "undefined") {
+    if (__webpack_module__.hot) {
+      __webpack_module__.hot.addStatusHandler((status) => {
+        if (status === "idle") {
+          fastRefreshNonce++;
+        }
+      });
+    }
+  }
+} catch {}
+var useNonce = () => {
+  const context = useContext(NonceContext);
+  const nonce = context.getNonce();
+  const nonceRef = useRef(nonce);
+  nonceRef.current = nonce;
+  const history = useRef([[fastRefreshNonce, nonce]]);
+  const get = useCallback(() => {
+    if (fastRefreshNonce !== history.current[history.current.length - 1][0]) {
+      history.current = [
+        ...history.current,
+        [fastRefreshNonce, nonceRef.current]
+      ];
+    }
+    return history.current;
+  }, [history]);
+  return useMemo(() => {
+    return { get };
+  }, [get]);
 };
 function truthy(value) {
   return Boolean(value);
 }
-var VERSION = "4.0.441";
-var checkMultipleRemotionVersions = () => {
-  if (typeof globalThis === "undefined") {
-    return;
-  }
-  const set = () => {
-    globalThis.remotion_imported = VERSION;
-    if (typeof window !== "undefined") {
-      window.remotion_imported = VERSION;
-    }
+var getRegex = () => /^([a-zA-Z0-9-\u4E00-\u9FFF])+$/g;
+var invalidFolderNameErrorMessage = `Folder name must match ${String(getRegex())}`;
+var FolderContext = createContext5({
+  folderName: null,
+  parentName: null
+});
+function getNodeEnvString() {
+  return ["NOD", "E_EN", "V"].join("");
+}
+var getEnvString = () => {
+  return ["e", "nv"].join("");
+};
+var getRemotionEnvironment = () => {
+  const isPlayer = typeof window !== "undefined" && window.remotion_isPlayer;
+  const isRendering = typeof window !== "undefined" && typeof window.process !== "undefined" && typeof window.process.env !== "undefined" && (window.process[getEnvString()][getNodeEnvString()] === "test" || window.process[getEnvString()][getNodeEnvString()] === "production" && typeof window !== "undefined" && typeof window.remotion_puppeteerTimeout !== "undefined");
+  const isStudio = typeof window !== "undefined" && window.remotion_isStudio;
+  const isReadOnlyStudio = typeof window !== "undefined" && window.remotion_isReadOnlyStudio;
+  return {
+    isStudio,
+    isRendering,
+    isPlayer,
+    isReadOnlyStudio,
+    isClientSideRendering: false
   };
-  const alreadyImported = globalThis.remotion_imported || typeof window !== "undefined" && window.remotion_imported;
-  if (alreadyImported) {
-    if (alreadyImported === VERSION) {
-      return;
+};
+var DATE_TOKEN = "remotion-date:";
+var FILE_TOKEN = "remotion-file:";
+var serializeJSONWithSpecialTypes = ({
+  data,
+  indent,
+  staticBase
+}) => {
+  let customDateUsed = false;
+  let customFileUsed = false;
+  let mapUsed = false;
+  let setUsed = false;
+  try {
+    const serializedString = JSON.stringify(data, function(key, value) {
+      const item = this[key];
+      if (item instanceof Date) {
+        customDateUsed = true;
+        return `${DATE_TOKEN}${item.toISOString()}`;
+      }
+      if (item instanceof Map) {
+        mapUsed = true;
+        return value;
+      }
+      if (item instanceof Set) {
+        setUsed = true;
+        return value;
+      }
+      if (typeof item === "string" && staticBase !== null && item.startsWith(staticBase)) {
+        customFileUsed = true;
+        return `${FILE_TOKEN}${item.replace(staticBase + "/", "")}`;
+      }
+      return value;
+    }, indent);
+    return { serializedString, customDateUsed, customFileUsed, mapUsed, setUsed };
+  } catch (err) {
+    throw new Error("Could not serialize the passed input props to JSON: " + err.message);
+  }
+};
+var deserializeJSONWithSpecialTypes = (data) => {
+  return JSON.parse(data, (_, value) => {
+    if (typeof value === "string" && value.startsWith(DATE_TOKEN)) {
+      return new Date(value.replace(DATE_TOKEN, ""));
     }
-    if (typeof alreadyImported === "string" && alreadyImported.includes("webcodecs")) {
-      set();
-      return;
+    if (typeof value === "string" && value.startsWith(FILE_TOKEN)) {
+      return `${window.remotion_staticBase}/${value.replace(FILE_TOKEN, "")}`;
     }
-    throw new TypeError(`\uD83D\uDEA8 Multiple versions of Remotion detected: ${[
-      VERSION,
-      typeof alreadyImported === "string" ? alreadyImported : "an older version"
-    ].filter(truthy).join(" and ")}. This will cause things to break in an unexpected way.
-Check that all your Remotion packages are on the same version. If your dependencies depend on Remotion, make them peer dependencies. You can also run \`npx remotion versions\` from your terminal to see which versions are mismatching.`);
+    return value;
+  });
+};
+var serializeThenDeserialize = (props) => {
+  return deserializeJSONWithSpecialTypes(serializeJSONWithSpecialTypes({
+    data: props,
+    indent: 2,
+    staticBase: window.remotion_staticBase
+  }).serializedString);
+};
+var serializeThenDeserializeInStudio = (props) => {
+  if (getRemotionEnvironment().isStudio) {
+    return serializeThenDeserialize(props);
   }
-  set();
+  return props;
+};
+var IsPlayerContext = createContext6(false);
+var IsPlayerContextProvider = ({
+  children
+}) => {
+  return /* @__PURE__ */ jsx3(IsPlayerContext.Provider, {
+    value: true,
+    children
+  });
+};
+var useIsPlayer = () => {
+  return useContext3(IsPlayerContext);
 };
 var hasTailwindClassName = ({
   className,
@@ -1049,7 +1166,7 @@ var hasTailwindClassName = ({
 };
 var AbsoluteFillRefForwarding = (props, ref) => {
   const { style, ...other } = props;
-  const actualStyle = useMemo(() => {
+  const actualStyle = useMemo3(() => {
     return {
       position: "absolute",
       top: hasTailwindClassName({
@@ -1112,56 +1229,309 @@ var AbsoluteFillRefForwarding = (props, ref) => {
       ...style
     };
   }, [other.className, style]);
-  return /* @__PURE__ */ jsx22("div", {
+  return /* @__PURE__ */ jsx4("div", {
     ref,
     style: actualStyle,
     ...other
   });
 };
 var AbsoluteFill = forwardRef(AbsoluteFillRefForwarding);
-var SequenceContext = createContext3(null);
-var exports_timeline_position_state = {};
-__export2(exports_timeline_position_state, {
-  useTimelineSetFrame: () => useTimelineSetFrame,
-  useTimelinePosition: () => useTimelinePosition,
-  useTimelineContext: () => useTimelineContext,
-  usePlayingState: () => usePlayingState,
-  useAbsoluteTimelinePosition: () => useAbsoluteTimelinePosition,
-  persistCurrentFrame: () => persistCurrentFrame,
-  getInitialFrameState: () => getInitialFrameState,
-  getFrameForComposition: () => getFrameForComposition
+var rotate = {
+  transform: `rotate(90deg)`
+};
+var ICON_SIZE = 40;
+var label = {
+  color: "white",
+  fontSize: 14,
+  fontFamily: "sans-serif"
+};
+var container = {
+  justifyContent: "center",
+  alignItems: "center"
+};
+var Loading = () => {
+  return /* @__PURE__ */ jsxs2(AbsoluteFill, {
+    style: container,
+    id: "remotion-comp-loading",
+    children: [
+      /* @__PURE__ */ jsx5("style", {
+        type: "text/css",
+        children: `
+				@keyframes anim {
+					from {
+						opacity: 0
+					}
+					to {
+						opacity: 1
+					}
+				}
+				#remotion-comp-loading {
+					animation: anim 2s;
+					animation-fill-mode: forwards;
+				}
+			`
+      }),
+      /* @__PURE__ */ jsx5("svg", {
+        width: ICON_SIZE,
+        height: ICON_SIZE,
+        viewBox: "-100 -100 400 400",
+        style: rotate,
+        children: /* @__PURE__ */ jsx5("path", {
+          fill: "#555",
+          stroke: "#555",
+          strokeWidth: "100",
+          strokeLinejoin: "round",
+          d: "M 2 172 a 196 100 0 0 0 195 5 A 196 240 0 0 0 100 2.259 A 196 240 0 0 0 2 172 z"
+        })
+      }),
+      /* @__PURE__ */ jsxs2("p", {
+        style: label,
+        children: [
+          "Resolving ",
+          "<Suspense>",
+          "..."
+        ]
+      })
+    ]
+  });
+};
+var _portalNode = null;
+var portalNode = () => {
+  if (!_portalNode) {
+    if (typeof document === "undefined") {
+      throw new Error("Tried to call an API that only works in the browser from outside the browser");
+    }
+    _portalNode = document.createElement("div");
+    _portalNode.style.position = "absolute";
+    _portalNode.style.top = "0px";
+    _portalNode.style.left = "0px";
+    _portalNode.style.right = "0px";
+    _portalNode.style.bottom = "0px";
+    _portalNode.style.width = "100%";
+    _portalNode.style.height = "100%";
+    _portalNode.style.display = "flex";
+    _portalNode.style.flexDirection = "column";
+    const containerNode = document.createElement("div");
+    containerNode.style.position = "fixed";
+    containerNode.style.top = -999999 + "px";
+    containerNode.appendChild(_portalNode);
+    document.body.appendChild(containerNode);
+  }
+  return _portalNode;
+};
+var getKey = () => {
+  return `remotion_inputPropsOverride` + window.location.origin;
+};
+var getInputPropsOverride = () => {
+  if (typeof localStorage === "undefined")
+    return null;
+  const override = localStorage.getItem(getKey());
+  if (!override)
+    return null;
+  return JSON.parse(override);
+};
+var setInputPropsOverride = (override) => {
+  if (typeof localStorage === "undefined")
+    return;
+  if (override === null) {
+    localStorage.removeItem(getKey());
+    return;
+  }
+  localStorage.setItem(getKey(), JSON.stringify(override));
+};
+var didWarnSSRImport = false;
+var warnOnceSSRImport = () => {
+  if (didWarnSSRImport) {
+    return;
+  }
+  didWarnSSRImport = true;
+  console.warn("Called `getInputProps()` on the server. This function is not available server-side and has returned an empty object.");
+  console.warn("To hide this warning, don't call this function on the server:");
+  console.warn("  typeof window === 'undefined' ? {} : getInputProps()");
+};
+var getInputProps = () => {
+  if (typeof window === "undefined") {
+    warnOnceSSRImport();
+    return {};
+  }
+  if (getRemotionEnvironment().isPlayer) {
+    throw new Error("You cannot call `getInputProps()` from a <Player>. Instead, the props are available as React props from component that you passed as `component` prop.");
+  }
+  const override = getInputPropsOverride();
+  if (override) {
+    return override;
+  }
+  if (typeof window === "undefined" || typeof window.remotion_inputProps === "undefined") {
+    throw new Error("Cannot call `getInputProps()` - window.remotion_inputProps is not set. This API is only available if you are in the Studio, or while you are rendering server-side.");
+  }
+  const param = window.remotion_inputProps;
+  if (!param) {
+    return {};
+  }
+  const parsed = deserializeJSONWithSpecialTypes(param);
+  return parsed;
+};
+var EditorPropsContext = createContext7({
+  props: {},
+  updateProps: () => {
+    throw new Error("Not implemented");
+  }
 });
-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;
+var timeValueRef = React3.createRef();
+var EditorPropsProvider = ({ children }) => {
+  const [props, setProps] = React3.useState({});
+  const updateProps = useCallback2(({
+    defaultProps,
+    id,
+    newProps
+  }) => {
+    setProps((prev) => {
+      return {
+        ...prev,
+        [id]: typeof newProps === "function" ? newProps(prev[id] ?? defaultProps) : newProps
+      };
+    });
+  }, []);
+  const ctx = useMemo4(() => {
+    return { props, updateProps };
+  }, [props, updateProps]);
+  return /* @__PURE__ */ jsx6(EditorPropsContext.Provider, {
+    value: ctx,
+    children
+  });
+};
+var RemotionEnvironmentContext = React4.createContext(null);
+var useRemotionEnvironment = () => {
+  const context = useContext4(RemotionEnvironmentContext);
+  const [env] = useState(() => getRemotionEnvironment());
+  return context ?? env;
+};
+function validateDimension(amount, nameOfProp, location) {
+  if (typeof amount !== "number") {
+    throw new Error(`The "${nameOfProp}" prop ${location} must be a number, but you passed a value of type ${typeof amount}`);
+  }
+  if (isNaN(amount)) {
+    throw new TypeError(`The "${nameOfProp}" prop ${location} must not be NaN, but is NaN.`);
+  }
+  if (!Number.isFinite(amount)) {
+    throw new TypeError(`The "${nameOfProp}" prop ${location} must be finite, but is ${amount}.`);
+  }
+  if (amount % 1 !== 0) {
+    throw new TypeError(`The "${nameOfProp}" prop ${location} must be an integer, but is ${amount}.`);
+  }
+  if (amount <= 0) {
+    throw new TypeError(`The "${nameOfProp}" prop ${location} must be positive, but got ${amount}.`);
+  }
 }
-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;
+function validateDurationInFrames(durationInFrames, options) {
+  const { allowFloats, component } = options;
+  if (typeof durationInFrames === "undefined") {
+    throw new Error(`The "durationInFrames" prop ${component} is missing.`);
+  }
+  if (typeof durationInFrames !== "number") {
+    throw new Error(`The "durationInFrames" prop ${component} must be a number, but you passed a value of type ${typeof durationInFrames}`);
+  }
+  if (durationInFrames <= 0) {
+    throw new TypeError(`The "durationInFrames" prop ${component} must be positive, but got ${durationInFrames}.`);
+  }
+  if (!allowFloats && durationInFrames % 1 !== 0) {
+    throw new TypeError(`The "durationInFrames" prop ${component} must be an integer, but got ${durationInFrames}.`);
+  }
+  if (!Number.isFinite(durationInFrames)) {
+    throw new TypeError(`The "durationInFrames" prop ${component} must be finite, but got ${durationInFrames}.`);
   }
-  return hash;
 }
-var random = (seed, dummy) => {
-  if (dummy !== undefined) {
-    throw new TypeError("random() takes only one argument");
+function validateFps(fps, location, isGif) {
+  if (typeof fps !== "number") {
+    throw new Error(`"fps" must be a number, but you passed a value of type ${typeof fps} ${location}`);
   }
-  if (seed === null) {
-    return Math.random();
+  if (!Number.isFinite(fps)) {
+    throw new Error(`"fps" must be a finite, but you passed ${fps} ${location}`);
   }
-  if (typeof seed === "string") {
-    return mulberry32(hashCode(seed));
+  if (isNaN(fps)) {
+    throw new Error(`"fps" must not be NaN, but got ${fps} ${location}`);
   }
-  if (typeof seed === "number") {
-    return mulberry32(seed * 10000000000);
+  if (fps <= 0) {
+    throw new TypeError(`"fps" must be positive, but got ${fps} ${location}`);
   }
-  throw new Error("random() argument must be a number or a string");
+  if (isGif && fps > 50) {
+    throw new TypeError(`The FPS for a GIF cannot be higher than 50. Use the --every-nth-frame option to lower the FPS: https://remotion.dev/docs/render-as-gif`);
+  }
+}
+var ResolveCompositionContext = createContext8(null);
+var resolveCompositionsRef = createRef();
+var needsResolution = (composition) => {
+  return Boolean(composition.calculateMetadata);
+};
+var useResolvedVideoConfig = (preferredCompositionId) => {
+  const context = useContext5(ResolveCompositionContext);
+  const { props: allEditorProps } = useContext5(EditorPropsContext);
+  const { compositions, canvasContent, currentCompositionMetadata } = useContext5(CompositionManager);
+  const currentComposition = canvasContent?.type === "composition" ? canvasContent.compositionId : null;
+  const compositionId = preferredCompositionId ?? currentComposition;
+  const composition = compositions.find((c) => c.id === compositionId);
+  const selectedEditorProps = useMemo5(() => {
+    return composition ? allEditorProps[composition.id] ?? {} : {};
+  }, [allEditorProps, composition]);
+  const env = useRemotionEnvironment();
+  return useMemo5(() => {
+    if (!composition) {
+      return null;
+    }
+    if (currentCompositionMetadata) {
+      return {
+        type: "success",
+        result: {
+          ...currentCompositionMetadata,
+          id: composition.id,
+          defaultProps: composition.defaultProps ?? {}
+        }
+      };
+    }
+    if (!needsResolution(composition)) {
+      validateDurationInFrames(composition.durationInFrames, {
+        allowFloats: false,
+        component: `in <Composition id="${composition.id}">`
+      });
+      validateFps(composition.fps, `in <Composition id="${composition.id}">`, false);
+      validateDimension(composition.width, "width", `in <Composition id="${composition.id}">`);
+      validateDimension(composition.height, "height", `in <Composition id="${composition.id}">`);
+      return {
+        type: "success",
+        result: {
+          width: composition.width,
+          height: composition.height,
+          fps: composition.fps,
+          id: composition.id,
+          durationInFrames: composition.durationInFrames,
+          defaultProps: composition.defaultProps ?? {},
+          props: {
+            ...composition.defaultProps ?? {},
+            ...selectedEditorProps ?? {},
+            ...typeof window === "undefined" || env.isPlayer || !window.remotion_inputProps ? {} : getInputProps() ?? {}
+          },
+          defaultCodec: null,
+          defaultOutName: null,
+          defaultVideoImageFormat: null,
+          defaultPixelFormat: null,
+          defaultProResProfile: null
+        }
+      };
+    }
+    if (!context) {
+      return null;
+    }
+    if (!context[composition.id]) {
+      return null;
+    }
+    return context[composition.id];
+  }, [
+    composition,
+    context,
+    currentCompositionMetadata,
+    selectedEditorProps,
+    env.isPlayer
+  ]);
 };
 var getErrorStackWithMessage = (error) => {
   const stack = error.stack ?? "";
@@ -1212,25 +1582,6 @@ function cancelRenderInternal(scope, err) {
 function cancelRender(err) {
   return cancelRenderInternal(typeof window !== "undefined" ? window : undefined, err);
 }
-function getNodeEnvString() {
-  return ["NOD", "E_EN", "V"].join("");
-}
-var getEnvString = () => {
-  return ["e", "nv"].join("");
-};
-var getRemotionEnvironment = () => {
-  const isPlayer = typeof window !== "undefined" && window.remotion_isPlayer;
-  const isRendering = typeof window !== "undefined" && typeof window.process !== "undefined" && typeof window.process.env !== "undefined" && (window.process[getEnvString()][getNodeEnvString()] === "test" || window.process[getEnvString()][getNodeEnvString()] === "production" && typeof window !== "undefined" && typeof window.remotion_puppeteerTimeout !== "undefined");
-  const isStudio = typeof window !== "undefined" && window.remotion_isStudio;
-  const isReadOnlyStudio = typeof window !== "undefined" && window.remotion_isReadOnlyStudio;
-  return {
-    isStudio,
-    isRendering,
-    isPlayer,
-    isReadOnlyStudio,
-    isClientSideRendering: false
-  };
-};
 var logLevels = ["trace", "verbose", "info", "warn", "error"];
 var getNumberForLogLevel = (level) => {
   return logLevels.indexOf(level);
@@ -1297,11 +1648,11 @@ var defaultTimeout = 30000;
 var delayRenderInternal = ({
   scope,
   environment,
-  label,
+  label: label2,
   options
 }) => {
-  if (typeof label !== "string" && label !== null) {
-    throw new Error("The label parameter of delayRender() must be a string or undefined, got: " + JSON.stringify(label));
+  if (typeof label2 !== "string" && label2 !== null) {
+    throw new Error("The label parameter of delayRender() must be a string or undefined, got: " + JSON.stringify(label2));
   }
   const handle = Math.random();
   scope.remotion_delayRenderHandles.push(handle);
@@ -1310,12 +1661,12 @@ var delayRenderInternal = ({
     const timeoutToUse = (options?.timeoutInMilliseconds ?? scope.remotion_puppeteerTimeout ?? defaultTimeout) - 2000;
     const retriesLeft = (options?.retries ?? 0) - (scope.remotion_attempt - 1);
     scope.remotion_delayRenderTimeouts[handle] = {
-      label: label ?? null,
+      label: label2 ?? null,
       startTime: Date.now(),
       timeout: setTimeout(() => {
         const message = [
           `A delayRender()`,
-          label ? `"${label}"` : null,
+          label2 ? `"${label2}"` : 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,
@@ -1351,10 +1702,10 @@ var continueRenderInternal = ({
         if (!scope.remotion_delayRenderTimeouts[handle]) {
           return false;
         }
-        const { label, startTime, timeout } = scope.remotion_delayRenderTimeouts[handle];
+        const { label: label2, startTime, timeout } = scope.remotion_delayRenderTimeouts[handle];
         clearTimeout(timeout);
         const message = [
-          label ? `"${label}"` : "A handle",
+          label2 ? `"${label2}"` : "A handle",
           DELAY_RENDER_CLEAR_TOKEN,
           `${Date.now() - startTime}ms`
         ].filter(truthy).join(" ");
@@ -1369,47 +1720,41 @@ var continueRenderInternal = ({
     scope.remotion_renderReady = true;
   }
 };
-var LogLevelContext = createContext4({
+var LogLevelContext = createContext9({
   logLevel: "info",
   mountTime: 0
 });
 var useLogLevel = () => {
-  const { logLevel } = React2.useContext(LogLevelContext);
+  const { logLevel } = React5.useContext(LogLevelContext);
   if (logLevel === null) {
     throw new Error("useLogLevel must be used within a LogLevelProvider");
   }
   return logLevel;
 };
 var useMountTime = () => {
-  const { mountTime } = React2.useContext(LogLevelContext);
+  const { mountTime } = React5.useContext(LogLevelContext);
   if (mountTime === null) {
     throw new Error("useMountTime must be used within a LogLevelProvider");
   }
   return mountTime;
 };
-var RemotionEnvironmentContext = React3.createContext(null);
-var useRemotionEnvironment = () => {
-  const context = useContext3(RemotionEnvironmentContext);
-  const [env] = useState(() => getRemotionEnvironment());
-  return context ?? env;
-};
-var DelayRenderContextType = createContext5(null);
+var DelayRenderContextType = createContext10(null);
 var useDelayRender = () => {
   const environment = useRemotionEnvironment();
-  const scope = useContext4(DelayRenderContextType) ?? (typeof window !== "undefined" ? window : undefined);
+  const scope = useContext7(DelayRenderContextType) ?? (typeof window !== "undefined" ? window : undefined);
   const logLevel = useLogLevel();
-  const delayRender2 = useCallback((label, options) => {
+  const delayRender2 = useCallback3((label2, options) => {
     if (!scope) {
       return Math.random();
     }
     return delayRenderInternal({
       scope,
       environment,
-      label: label ?? null,
+      label: label2 ?? null,
       options: options ?? {}
     });
   }, [environment, scope]);
-  const continueRender2 = useCallback((handle) => {
+  const continueRender2 = useCallback3((handle) => {
     if (!scope) {
       return;
     }
@@ -1420,12 +1765,291 @@ var useDelayRender = () => {
       logLevel
     });
   }, [environment, logLevel, scope]);
-  const cancelRender2 = useCallback((err) => {
+  const cancelRender2 = useCallback3((err) => {
     return cancelRenderInternal(scope ?? (typeof window !== "undefined" ? window : undefined), err);
   }, [scope]);
   return { delayRender: delayRender2, continueRender: continueRender2, cancelRender: cancelRender2 };
 };
-var SetTimelineContext = createContext6({
+var useLazyComponent = ({
+  compProps,
+  componentName,
+  noSuspense
+}) => {
+  const componentRef = useRef2(null);
+  if ("component" in compProps) {
+    componentRef.current = compProps.component;
+  }
+  const lazy = useMemo6(() => {
+    if ("component" in compProps) {
+      if (typeof document === "undefined" || noSuspense) {
+        return compProps.component;
+      }
+      if (typeof compProps.component === "undefined") {
+        throw new Error(`A value of \`undefined\` was passed to the \`component\` prop. Check the value you are passing to the <${componentName}/> component.`);
+      }
+      const Wrapper = (props) => {
+        const Comp = componentRef.current;
+        return React6.createElement(Comp, props);
+      };
+      return Wrapper;
+    }
+    if ("lazyComponent" in compProps && typeof compProps.lazyComponent !== "undefined") {
+      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 React6.lazy(compProps.lazyComponent);
+    }
+    throw new Error("You must pass either 'component' or 'lazyComponent'");
+  }, [compProps.lazyComponent]);
+  return lazy;
+};
+var useVideo = () => {
+  const { canvasContent, compositions, currentCompositionMetadata } = useContext8(CompositionManager);
+  const selected = compositions.find((c) => {
+    return canvasContent?.type === "composition" && c.id === canvasContent.compositionId;
+  });
+  const resolved = useResolvedVideoConfig(selected?.id ?? null);
+  return useMemo7(() => {
+    if (!resolved) {
+      return null;
+    }
+    if (resolved.type === "error") {
+      return null;
+    }
+    if (resolved.type === "loading") {
+      return null;
+    }
+    if (!selected) {
+      return null;
+    }
+    return {
+      ...resolved.result,
+      defaultProps: selected.defaultProps ?? {},
+      id: selected.id,
+      ...currentCompositionMetadata ?? {},
+      component: selected.component
+    };
+  }, [currentCompositionMetadata, resolved, selected]);
+};
+var getRegex2 = () => /^([a-zA-Z0-9-\u4E00-\u9FFF])+$/g;
+var isCompositionIdValid = (id) => id.match(getRegex2());
+var validateCompositionId = (id) => {
+  if (!isCompositionIdValid(id)) {
+    throw new Error(`Composition id can only contain a-z, A-Z, 0-9, CJK characters and -. You passed ${id}`);
+  }
+};
+var invalidCompositionErrorMessage = `Composition ID must match ${String(getRegex2())}`;
+var validateDefaultAndInputProps = (defaultProps, name, compositionId) => {
+  if (!defaultProps) {
+    return;
+  }
+  if (typeof defaultProps !== "object") {
+    throw new Error(`"${name}" must be an object, but you passed a value of type ${typeof defaultProps}`);
+  }
+  if (Array.isArray(defaultProps)) {
+    throw new Error(`"${name}" must be an object, an array was passed ${compositionId ? `for composition "${compositionId}"` : ""}`);
+  }
+};
+var Fallback = () => {
+  const { continueRender: continueRender2, delayRender: delayRender2 } = useDelayRender();
+  useEffect2(() => {
+    const fallback = delayRender2("Waiting for Root component to unsuspend");
+    return () => continueRender2(fallback);
+  }, [continueRender2, delayRender2]);
+  return null;
+};
+var InnerComposition = ({
+  width,
+  height,
+  fps,
+  durationInFrames,
+  id,
+  defaultProps,
+  schema,
+  ...compProps
+}) => {
+  const compManager = useContext9(CompositionSetters);
+  const { registerComposition, unregisterComposition } = compManager;
+  const video = useVideo();
+  const lazy = useLazyComponent({
+    compProps,
+    componentName: "Composition",
+    noSuspense: false
+  });
+  const nonce = useNonce();
+  const isPlayer = useIsPlayer();
+  const environment = useRemotionEnvironment();
+  const canUseComposition = useContext9(CanUseRemotionHooks);
+  if (typeof window !== "undefined") {
+    window.remotion_seenCompositionIds = Array.from(new Set([...window.remotion_seenCompositionIds ?? [], id]));
+  }
+  if (canUseComposition) {
+    if (isPlayer) {
+      throw new Error("<Composition> was mounted inside the `component` that was passed to the <Player>. See https://remotion.dev/docs/wrong-composition-mount for help.");
+    }
+    throw new Error("<Composition> mounted inside another composition. See https://remotion.dev/docs/wrong-composition-mount for help.");
+  }
+  const { folderName, parentName } = useContext9(FolderContext);
+  const stack = compProps.stack ?? null;
+  useEffect2(() => {
+    if (!id) {
+      throw new Error("No id for composition passed.");
+    }
+    validateCompositionId(id);
+    validateDefaultAndInputProps(defaultProps, "defaultProps", id);
+    registerComposition({
+      durationInFrames: durationInFrames ?? undefined,
+      fps: fps ?? undefined,
+      height: height ?? undefined,
+      width: width ?? undefined,
+      id,
+      folderName,
+      component: lazy,
+      defaultProps: serializeThenDeserializeInStudio(defaultProps ?? {}),
+      nonce: nonce.get(),
+      parentFolderName: parentName,
+      schema: schema ?? null,
+      calculateMetadata: compProps.calculateMetadata ?? null,
+      stack
+    });
+    return () => {
+      unregisterComposition(id);
+    };
+  }, [
+    durationInFrames,
+    fps,
+    height,
+    lazy,
+    id,
+    folderName,
+    defaultProps,
+    width,
+    nonce,
+    parentName,
+    schema,
+    compProps.calculateMetadata,
+    stack,
+    registerComposition,
+    unregisterComposition
+  ]);
+  const resolved = useResolvedVideoConfig(id);
+  if (environment.isStudio && video && video.component === lazy && video.id === id) {
+    const Comp = lazy;
+    if (resolved === null || resolved.type !== "success" && resolved.type !== "success-and-refreshing") {
+      return null;
+    }
+    return createPortal(/* @__PURE__ */ jsx7(CanUseRemotionHooksProvider, {
+      children: /* @__PURE__ */ jsx7(Suspense, {
+        fallback: /* @__PURE__ */ jsx7(Loading, {}),
+        children: /* @__PURE__ */ jsx7(Comp, {
+          ...resolved.result.props ?? {}
+        })
+      })
+    }), portalNode());
+  }
+  if (environment.isRendering && video && video.component === lazy && video.id === id) {
+    const Comp = lazy;
+    if (resolved === null || resolved.type !== "success" && resolved.type !== "success-and-refreshing") {
+      return null;
+    }
+    return createPortal(/* @__PURE__ */ jsx7(CanUseRemotionHooksProvider, {
+      children: /* @__PURE__ */ jsx7(Suspense, {
+        fallback: /* @__PURE__ */ jsx7(Fallback, {}),
+        children: /* @__PURE__ */ jsx7(Comp, {
+          ...resolved.result.props ?? {}
+        })
+      })
+    }), portalNode());
+  }
+  return null;
+};
+var Composition = (props) => {
+  const { onlyRenderComposition } = useContext9(CompositionSetters);
+  if (onlyRenderComposition && onlyRenderComposition !== props.id) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx7(InnerComposition, {
+    ...props
+  });
+};
+var componentsToAddStacksTo = [];
+var getComponentsToAddStacksTo = () => componentsToAddStacksTo;
+var addSequenceStackTraces = (component) => {
+  componentsToAddStacksTo.push(component);
+};
+var VERSION = "4.0.443";
+var checkMultipleRemotionVersions = () => {
+  if (typeof globalThis === "undefined") {
+    return;
+  }
+  const set = () => {
+    globalThis.remotion_imported = VERSION;
+    if (typeof window !== "undefined") {
+      window.remotion_imported = VERSION;
+    }
+  };
+  const alreadyImported = globalThis.remotion_imported || typeof window !== "undefined" && window.remotion_imported;
+  if (alreadyImported) {
+    if (alreadyImported === VERSION) {
+      return;
+    }
+    if (typeof alreadyImported === "string" && alreadyImported.includes("webcodecs")) {
+      set();
+      return;
+    }
+    throw new TypeError(`\uD83D\uDEA8 Multiple versions of Remotion detected: ${[
+      VERSION,
+      typeof alreadyImported === "string" ? alreadyImported : "an older version"
+    ].filter(truthy).join(" and ")}. This will cause things to break in an unexpected way.
+Check that all your Remotion packages are on the same version. If your dependencies depend on Remotion, make them peer dependencies. You can also run \`npx remotion versions\` from your terminal to see which versions are mismatching.`);
+  }
+  set();
+};
+var SequenceContext = createContext11(null);
+var exports_timeline_position_state = {};
+__export2(exports_timeline_position_state, {
+  useTimelineSetFrame: () => useTimelineSetFrame,
+  useTimelinePosition: () => useTimelinePosition,
+  useTimelineContext: () => useTimelineContext,
+  usePlayingState: () => usePlayingState,
+  useAbsoluteTimelinePosition: () => useAbsoluteTimelinePosition,
+  persistCurrentFrame: () => persistCurrentFrame,
+  getInitialFrameState: () => getInitialFrameState,
+  getFrameForComposition: () => getFrameForComposition
+});
+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;
+}
+var 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");
+};
+var SetTimelineContext = createContext12({
   setFrame: () => {
     throw new Error("default");
   },
@@ -1433,13 +2057,13 @@ var SetTimelineContext = createContext6({
     throw new Error("default");
   }
 });
-var TimelineContext = createContext6(null);
-var AbsoluteTimeContext = createContext6(null);
+var TimelineContext = createContext12(null);
+var AbsoluteTimeContext = createContext12(null);
 var TimelineContextProvider = ({ children, frameState }) => {
   const [playing, setPlaying] = useState2(false);
-  const imperativePlaying = useRef(false);
+  const imperativePlaying = useRef3(false);
   const [playbackRate, setPlaybackRate] = useState2(1);
-  const audioAndVideoTags = useRef([]);
+  const audioAndVideoTags = useRef3([]);
   const [remotionRootId] = useState2(() => String(random(null)));
   const [_frame, setFrame] = useState2(() => getInitialFrameState());
   const frame = frameState ?? _frame;
@@ -1470,7 +2094,7 @@ var TimelineContextProvider = ({ children, frameState }) => {
       window.remotion_isPlayer = false;
     }, [continueRender2, delayRender2]);
   }
-  const timelineContextValue = useMemo2(() => {
+  const timelineContextValue = useMemo8(() => {
     return {
       frame,
       playing,
@@ -1481,344 +2105,23 @@ var TimelineContextProvider = ({ children, frameState }) => {
       audioAndVideoTags
     };
   }, [frame, playbackRate, playing, remotionRootId]);
-  const setTimelineContextValue = useMemo2(() => {
+  const setTimelineContextValue = useMemo8(() => {
     return {
       setFrame,
       setPlaying
     };
   }, []);
-  return /* @__PURE__ */ jsx3(AbsoluteTimeContext.Provider, {
+  return /* @__PURE__ */ jsx8(AbsoluteTimeContext.Provider, {
     value: timelineContextValue,
-    children: /* @__PURE__ */ jsx3(TimelineContext.Provider, {
+    children: /* @__PURE__ */ jsx8(TimelineContext.Provider, {
       value: timelineContextValue,
-      children: /* @__PURE__ */ jsx3(SetTimelineContext.Provider, {
+      children: /* @__PURE__ */ jsx8(SetTimelineContext.Provider, {
         value: setTimelineContextValue,
         children
       })
     })
   });
 };
-var CompositionManager = createContext7({
-  compositions: [],
-  folders: [],
-  currentCompositionMetadata: null,
-  canvasContent: null
-});
-var CompositionSetters = createContext7({
-  registerComposition: () => {
-    return;
-  },
-  unregisterComposition: () => {
-    return;
-  },
-  registerFolder: () => {
-    return;
-  },
-  unregisterFolder: () => {
-    return;
-  },
-  setCanvasContent: () => {
-    return;
-  },
-  onlyRenderComposition: null
-});
-var getKey = () => {
-  return `remotion_inputPropsOverride` + window.location.origin;
-};
-var getInputPropsOverride = () => {
-  if (typeof localStorage === "undefined")
-    return null;
-  const override = localStorage.getItem(getKey());
-  if (!override)
-    return null;
-  return JSON.parse(override);
-};
-var setInputPropsOverride = (override) => {
-  if (typeof localStorage === "undefined")
-    return;
-  if (override === null) {
-    localStorage.removeItem(getKey());
-    return;
-  }
-  localStorage.setItem(getKey(), JSON.stringify(override));
-};
-var DATE_TOKEN = "remotion-date:";
-var FILE_TOKEN = "remotion-file:";
-var serializeJSONWithSpecialTypes = ({
-  data,
-  indent,
-  staticBase
-}) => {
-  let customDateUsed = false;
-  let customFileUsed = false;
-  let mapUsed = false;
-  let setUsed = false;
-  try {
-    const serializedString = JSON.stringify(data, function(key, value) {
-      const item = this[key];
-      if (item instanceof Date) {
-        customDateUsed = true;
-        return `${DATE_TOKEN}${item.toISOString()}`;
-      }
-      if (item instanceof Map) {
-        mapUsed = true;
-        return value;
-      }
-      if (item instanceof Set) {
-        setUsed = true;
-        return value;
-      }
-      if (typeof item === "string" && staticBase !== null && item.startsWith(staticBase)) {
-        customFileUsed = true;
-        return `${FILE_TOKEN}${item.replace(staticBase + "/", "")}`;
-      }
-      return value;
-    }, indent);
-    return { serializedString, customDateUsed, customFileUsed, mapUsed, setUsed };
-  } catch (err) {
-    throw new Error("Could not serialize the passed input props to JSON: " + err.message);
-  }
-};
-var deserializeJSONWithSpecialTypes = (data) => {
-  return JSON.parse(data, (_, value) => {
-    if (typeof value === "string" && value.startsWith(DATE_TOKEN)) {
-      return new Date(value.replace(DATE_TOKEN, ""));
-    }
-    if (typeof value === "string" && value.startsWith(FILE_TOKEN)) {
-      return `${window.remotion_staticBase}/${value.replace(FILE_TOKEN, "")}`;
-    }
-    return value;
-  });
-};
-var serializeThenDeserialize = (props) => {
-  return deserializeJSONWithSpecialTypes(serializeJSONWithSpecialTypes({
-    data: props,
-    indent: 2,
-    staticBase: window.remotion_staticBase
-  }).serializedString);
-};
-var serializeThenDeserializeInStudio = (props) => {
-  if (getRemotionEnvironment().isStudio) {
-    return serializeThenDeserialize(props);
-  }
-  return props;
-};
-var didWarnSSRImport = false;
-var warnOnceSSRImport = () => {
-  if (didWarnSSRImport) {
-    return;
-  }
-  didWarnSSRImport = true;
-  console.warn("Called `getInputProps()` on the server. This function is not available server-side and has returned an empty object.");
-  console.warn("To hide this warning, don't call this function on the server:");
-  console.warn("  typeof window === 'undefined' ? {} : getInputProps()");
-};
-var getInputProps = () => {
-  if (typeof window === "undefined") {
-    warnOnceSSRImport();
-    return {};
-  }
-  if (getRemotionEnvironment().isPlayer) {
-    throw new Error("You cannot call `getInputProps()` from a <Player>. Instead, the props are available as React props from component that you passed as `component` prop.");
-  }
-  const override = getInputPropsOverride();
-  if (override) {
-    return override;
-  }
-  if (typeof window === "undefined" || typeof window.remotion_inputProps === "undefined") {
-    throw new Error("Cannot call `getInputProps()` - window.remotion_inputProps is not set. This API is only available if you are in the Studio, or while you are rendering server-side.");
-  }
-  const param = window.remotion_inputProps;
-  if (!param) {
-    return {};
-  }
-  const parsed = deserializeJSONWithSpecialTypes(param);
-  return parsed;
-};
-var EditorPropsContext = createContext8({
-  props: {},
-  updateProps: () => {
-    throw new Error("Not implemented");
-  }
-});
-var timeValueRef = React5.createRef();
-var EditorPropsProvider = ({ children }) => {
-  const [props, setProps] = React5.useState({});
-  const updateProps = useCallback2(({
-    defaultProps,
-    id,
-    newProps
-  }) => {
-    setProps((prev) => {
-      return {
-        ...prev,
-        [id]: typeof newProps === "function" ? newProps(prev[id] ?? defaultProps) : newProps
-      };
-    });
-  }, []);
-  const ctx = useMemo3(() => {
-    return { props, updateProps };
-  }, [props, updateProps]);
-  return /* @__PURE__ */ jsx4(EditorPropsContext.Provider, {
-    value: ctx,
-    children
-  });
-};
-function validateDimension(amount, nameOfProp, location) {
-  if (typeof amount !== "number") {
-    throw new Error(`The "${nameOfProp}" prop ${location} must be a number, but you passed a value of type ${typeof amount}`);
-  }
-  if (isNaN(amount)) {
-    throw new TypeError(`The "${nameOfProp}" prop ${location} must not be NaN, but is NaN.`);
-  }
-  if (!Number.isFinite(amount)) {
-    throw new TypeError(`The "${nameOfProp}" prop ${location} must be finite, but is ${amount}.`);
-  }
-  if (amount % 1 !== 0) {
-    throw new TypeError(`The "${nameOfProp}" prop ${location} must be an integer, but is ${amount}.`);
-  }
-  if (amount <= 0) {
-    throw new TypeError(`The "${nameOfProp}" prop ${location} must be positive, but got ${amount}.`);
-  }
-}
-function validateDurationInFrames(durationInFrames, options) {
-  const { allowFloats, component } = options;
-  if (typeof durationInFrames === "undefined") {
-    throw new Error(`The "durationInFrames" prop ${component} is missing.`);
-  }
-  if (typeof durationInFrames !== "number") {
-    throw new Error(`The "durationInFrames" prop ${component} must be a number, but you passed a value of type ${typeof durationInFrames}`);
-  }
-  if (durationInFrames <= 0) {
-    throw new TypeError(`The "durationInFrames" prop ${component} must be positive, but got ${durationInFrames}.`);
-  }
-  if (!allowFloats && durationInFrames % 1 !== 0) {
-    throw new TypeError(`The "durationInFrames" prop ${component} must be an integer, but got ${durationInFrames}.`);
-  }
-  if (!Number.isFinite(durationInFrames)) {
-    throw new TypeError(`The "durationInFrames" prop ${component} must be finite, but got ${durationInFrames}.`);
-  }
-}
-function validateFps(fps, location, isGif) {
-  if (typeof fps !== "number") {
-    throw new Error(`"fps" must be a number, but you passed a value of type ${typeof fps} ${location}`);
-  }
-  if (!Number.isFinite(fps)) {
-    throw new Error(`"fps" must be a finite, but you passed ${fps} ${location}`);
-  }
-  if (isNaN(fps)) {
-    throw new Error(`"fps" must not be NaN, but got ${fps} ${location}`);
-  }
-  if (fps <= 0) {
-    throw new TypeError(`"fps" must be positive, but got ${fps} ${location}`);
-  }
-  if (isGif && fps > 50) {
-    throw new TypeError(`The FPS for a GIF cannot be higher than 50. Use the --every-nth-frame option to lower the FPS: https://remotion.dev/docs/render-as-gif`);
-  }
-}
-var ResolveCompositionContext = createContext9(null);
-var resolveCompositionsRef = createRef();
-var needsResolution = (composition) => {
-  return Boolean(composition.calculateMetadata);
-};
-var useResolvedVideoConfig = (preferredCompositionId) => {
-  const context = useContext5(ResolveCompositionContext);
-  const { props: allEditorProps } = useContext5(EditorPropsContext);
-  const { compositions, canvasContent, currentCompositionMetadata } = useContext5(CompositionManager);
-  const currentComposition = canvasContent?.type === "composition" ? canvasContent.compositionId : null;
-  const compositionId = preferredCompositionId ?? currentComposition;
-  const composition = compositions.find((c) => c.id === compositionId);
-  const selectedEditorProps = useMemo4(() => {
-    return composition ? allEditorProps[composition.id] ?? {} : {};
-  }, [allEditorProps, composition]);
-  const env = useRemotionEnvironment();
-  return useMemo4(() => {
-    if (!composition) {
-      return null;
-    }
-    if (currentCompositionMetadata) {
-      return {
-        type: "success",
-        result: {
-          ...currentCompositionMetadata,
-          id: composition.id,
-          defaultProps: composition.defaultProps ?? {}
-        }
-      };
-    }
-    if (!needsResolution(composition)) {
-      validateDurationInFrames(composition.durationInFrames, {
-        allowFloats: false,
-        component: `in <Composition id="${composition.id}">`
-      });
-      validateFps(composition.fps, `in <Composition id="${composition.id}">`, false);
-      validateDimension(composition.width, "width", `in <Composition id="${composition.id}">`);
-      validateDimension(composition.height, "height", `in <Composition id="${composition.id}">`);
-      return {
-        type: "success",
-        result: {
-          width: composition.width,
-          height: composition.height,
-          fps: composition.fps,
-          id: composition.id,
-          durationInFrames: composition.durationInFrames,
-          defaultProps: composition.defaultProps ?? {},
-          props: {
-            ...composition.defaultProps ?? {},
-            ...selectedEditorProps ?? {},
-            ...typeof window === "undefined" || env.isPlayer || !window.remotion_inputProps ? {} : getInputProps() ?? {}
-          },
-          defaultCodec: null,
-          defaultOutName: null,
-          defaultVideoImageFormat: null,
-          defaultPixelFormat: null,
-          defaultProResProfile: null
-        }
-      };
-    }
-    if (!context) {
-      return null;
-    }
-    if (!context[composition.id]) {
-      return null;
-    }
-    return context[composition.id];
-  }, [
-    composition,
-    context,
-    currentCompositionMetadata,
-    selectedEditorProps,
-    env.isPlayer
-  ]);
-};
-var useVideo = () => {
-  const { canvasContent, compositions, currentCompositionMetadata } = useContext6(CompositionManager);
-  const selected = compositions.find((c) => {
-    return canvasContent?.type === "composition" && c.id === canvasContent.compositionId;
-  });
-  const resolved = useResolvedVideoConfig(selected?.id ?? null);
-  return useMemo5(() => {
-    if (!resolved) {
-      return null;
-    }
-    if (resolved.type === "error") {
-      return null;
-    }
-    if (resolved.type === "loading") {
-      return null;
-    }
-    if (!selected) {
-      return null;
-    }
-    return {
-      ...resolved.result,
-      defaultProps: selected.defaultProps ?? {},
-      id: selected.id,
-      ...currentCompositionMetadata ?? {},
-      component: selected.component
-    };
-  }, [currentCompositionMetadata, resolved, selected]);
-};
 var makeKey = () => {
   return `remotion.time-all`;
 };
@@ -1851,7 +2154,7 @@ var useTimelinePositionFromContext = (state) => {
   return Math.min(videoConfig.durationInFrames - 1, unclamped);
 };
 var useTimelineContext = () => {
-  const state = useContext7(TimelineContext);
+  const state = useContext10(TimelineContext);
   if (state === null) {
     throw new Error("TimelineContext is not available. This hook must be used inside a <Player> or the Remotion Studio.");
   }
@@ -1862,30 +2165,23 @@ var useTimelinePosition = () => {
   return useTimelinePositionFromContext(state);
 };
 var useAbsoluteTimelinePosition = () => {
-  const state = useContext7(AbsoluteTimeContext);
+  const state = useContext10(AbsoluteTimeContext);
   if (state === null) {
     throw new Error("AbsoluteTimeContext is not available. This hook must be used inside a <Player> or the Remotion Studio.");
   }
   return useTimelinePositionFromContext(state);
 };
 var useTimelineSetFrame = () => {
-  const { setFrame } = useContext7(SetTimelineContext);
+  const { setFrame } = useContext10(SetTimelineContext);
   return setFrame;
 };
 var usePlayingState = () => {
   const { playing, imperativePlaying } = useTimelineContext();
-  const { setPlaying } = useContext7(SetTimelineContext);
-  return useMemo6(() => [playing, setPlaying, imperativePlaying], [imperativePlaying, playing, setPlaying]);
-};
-var CanUseRemotionHooks = createContext10(false);
-var CanUseRemotionHooksProvider = ({ children }) => {
-  return /* @__PURE__ */ jsx5(CanUseRemotionHooks.Provider, {
-    value: true,
-    children
-  });
+  const { setPlaying } = useContext10(SetTimelineContext);
+  return useMemo9(() => [playing, setPlaying, imperativePlaying], [imperativePlaying, playing, setPlaying]);
 };
 var useCurrentFrame = () => {
-  const canUseRemotionHooks = useContext8(CanUseRemotionHooks);
+  const canUseRemotionHooks = useContext11(CanUseRemotionHooks);
   const env = useRemotionEnvironment();
   if (!canUseRemotionHooks) {
     if (env.isPlayer) {
@@ -1894,17 +2190,17 @@ var useCurrentFrame = () => {
     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 = useContext8(SequenceContext);
+  const context = useContext11(SequenceContext);
   const contextOffset = context ? context.cumulatedFrom + context.relativeFrom : 0;
   return frame - contextOffset;
 };
 var useUnsafeVideoConfig = () => {
-  const context = useContext9(SequenceContext);
+  const context = useContext12(SequenceContext);
   const ctxWidth = context?.width ?? null;
   const ctxHeight = context?.height ?? null;
   const ctxDuration = context?.durationInFrames ?? null;
   const video = useVideo();
-  return useMemo7(() => {
+  return useMemo10(() => {
     if (!video) {
       return null;
     }
@@ -1940,7 +2236,7 @@ var useUnsafeVideoConfig = () => {
 };
 var useVideoConfig = () => {
   const videoConfig = useUnsafeVideoConfig();
-  const context = useContext10(CanUseRemotionHooks);
+  const context = useContext13(CanUseRemotionHooks);
   const isPlayer = useIsPlayer();
   if (!videoConfig) {
     if (typeof window !== "undefined" && window.remotion_isPlayer || isPlayer) {
@@ -1976,7 +2272,7 @@ var Freeze = ({
   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 = useMemo11(() => {
     if (typeof active === "boolean") {
       return active;
     }
@@ -1985,9 +2281,9 @@ var Freeze = ({
     }
   }, [active, frame]);
   const timelineContext = useTimelineContext();
-  const sequenceContext = useContext11(SequenceContext);
+  const sequenceContext = useContext14(SequenceContext);
   const relativeFrom = sequenceContext?.relativeFrom ?? 0;
-  const timelineValue = useMemo8(() => {
+  const timelineValue = useMemo11(() => {
     if (!isActive) {
       return timelineContext;
     }
@@ -2002,7 +2298,7 @@ var Freeze = ({
       }
     };
   }, [isActive, timelineContext, videoConfig.id, frameToFreeze, relativeFrom]);
-  const newSequenceContext = useMemo8(() => {
+  const newSequenceContext = useMemo11(() => {
     if (!sequenceContext) {
       return null;
     }
@@ -2014,53 +2310,19 @@ var Freeze = ({
       cumulatedFrom: 0
     };
   }, [sequenceContext, isActive]);
-  return /* @__PURE__ */ jsx6(TimelineContext.Provider, {
+  return /* @__PURE__ */ jsx9(TimelineContext.Provider, {
     value: timelineValue,
-    children: /* @__PURE__ */ jsx6(SequenceContext.Provider, {
+    children: /* @__PURE__ */ jsx9(SequenceContext.Provider, {
       value: newSequenceContext,
       children
     })
   });
 };
-var NonceContext = createContext11({
-  getNonce: () => 0
-});
-var fastRefreshNonce = 0;
-try {
-  if (typeof __webpack_module__ !== "undefined") {
-    if (__webpack_module__.hot) {
-      __webpack_module__.hot.addStatusHandler((status) => {
-        if (status === "idle") {
-          fastRefreshNonce++;
-        }
-      });
-    }
-  }
-} catch {}
-var useNonce = () => {
-  const context = useContext12(NonceContext);
-  const nonce = context.getNonce();
-  const nonceRef = useRef2(nonce);
-  nonceRef.current = nonce;
-  const history = useRef2([[fastRefreshNonce, nonce]]);
-  const get = useCallback3(() => {
-    if (fastRefreshNonce !== history.current[history.current.length - 1][0]) {
-      history.current = [
-        ...history.current,
-        [fastRefreshNonce, nonceRef.current]
-      ];
-    }
-    return history.current;
-  }, [history]);
-  return useMemo9(() => {
-    return { get };
-  }, [get]);
-};
-var PremountContext = createContext12({
+var PremountContext = createContext13({
   premountFramesRemaining: 0,
   playing: false
 });
-var SequenceManager = React8.createContext({
+var SequenceManager = React10.createContext({
   registerSequence: () => {
     throw new Error("SequenceManagerContext not initialized");
   },
@@ -2069,13 +2331,13 @@ var SequenceManager = React8.createContext({
   },
   sequences: []
 });
-var SequenceVisibilityToggleContext = React8.createContext({
+var SequenceVisibilityToggleContext = React10.createContext({
   hidden: {},
   setHidden: () => {
     throw new Error("SequenceVisibilityToggle not initialized");
   }
 });
-var VisualModeOverridesContext = React8.createContext({
+var VisualModeOverridesContext = React10.createContext({
   dragOverrides: {},
   setDragOverrides: () => {
     throw new Error("VisualModeOverridesContext not initialized");
@@ -2093,7 +2355,7 @@ var SequenceManagerProvider = ({ children, visualModeEnabled }) => {
   const [sequences, setSequences] = useState3([]);
   const [hidden, setHidden] = useState3({});
   const [dragOverrides, setControlOverrides] = useState3({});
-  const controlOverridesRef = useRef3(dragOverrides);
+  const controlOverridesRef = useRef4(dragOverrides);
   controlOverridesRef.current = dragOverrides;
   const [codeValues, setCodeValuesMapState] = useState3({});
   const setDragOverrides = useCallback4((sequenceId, key, value) => {
@@ -2139,20 +2401,20 @@ var SequenceManagerProvider = ({ children, visualModeEnabled }) => {
   const unregisterSequence = useCallback4((seq) => {
     setSequences((seqs) => seqs.filter((s) => s.id !== seq));
   }, []);
-  const sequenceContext = useMemo10(() => {
+  const sequenceContext = useMemo12(() => {
     return {
       registerSequence,
       sequences,
       unregisterSequence
     };
   }, [registerSequence, sequences, unregisterSequence]);
-  const hiddenContext = useMemo10(() => {
+  const hiddenContext = useMemo12(() => {
     return {
       hidden,
       setHidden
     };
   }, [hidden]);
-  const overrideContext = useMemo10(() => {
+  const overrideContext = useMemo12(() => {
     return {
       visualModeEnabled,
       dragOverrides,
@@ -2169,11 +2431,11 @@ var SequenceManagerProvider = ({ children, visualModeEnabled }) => {
     codeValues,
     setCodeValues
   ]);
-  return /* @__PURE__ */ jsx7(SequenceManager.Provider, {
+  return /* @__PURE__ */ jsx10(SequenceManager.Provider, {
     value: sequenceContext,
-    children: /* @__PURE__ */ jsx7(SequenceVisibilityToggleContext.Provider, {
+    children: /* @__PURE__ */ jsx10(SequenceVisibilityToggleContext.Provider, {
       value: hiddenContext,
-      children: /* @__PURE__ */ jsx7(VisualModeOverridesContext.Provider, {
+      children: /* @__PURE__ */ jsx10(VisualModeOverridesContext.Provider, {
         value: overrideContext,
         children
       })
@@ -2198,7 +2460,7 @@ var RegularSequenceRefForwardingFunction = ({
 }, ref) => {
   const { layout = "absolute-fill" } = other;
   const [id] = useState4(() => String(Math.random()));
-  const parentSequence = useContext13(SequenceContext);
+  const parentSequence = useContext15(SequenceContext);
   const { rootId } = useTimelineContext();
   const cumulatedFrom = parentSequence ? parentSequence.cumulatedFrom + parentSequence.relativeFrom : 0;
   const nonce = useNonce();
@@ -2224,15 +2486,15 @@ var RegularSequenceRefForwardingFunction = ({
   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 } = useContext13(SequenceManager);
-  const { hidden } = useContext13(SequenceVisibilityToggleContext);
-  const premounting = useMemo11(() => {
+  const { registerSequence, unregisterSequence } = useContext15(SequenceManager);
+  const { hidden } = useContext15(SequenceVisibilityToggleContext);
+  const premounting = useMemo13(() => {
     return parentSequence?.premounting || Boolean(other._remotionInternalIsPremounting);
   }, [other._remotionInternalIsPremounting, parentSequence?.premounting]);
-  const postmounting = useMemo11(() => {
+  const postmounting = useMemo13(() => {
     return parentSequence?.postmounting || Boolean(other._remotionInternalIsPostmounting);
   }, [other._remotionInternalIsPostmounting, parentSequence?.postmounting]);
-  const contextValue = useMemo11(() => {
+  const contextValue = useMemo13(() => {
     return {
       cumulatedFrom,
       relativeFrom: from,
@@ -2259,12 +2521,12 @@ var RegularSequenceRefForwardingFunction = ({
     premountDisplay,
     postmountDisplay
   ]);
-  const timelineClipName = useMemo11(() => {
+  const timelineClipName = useMemo13(() => {
     return name ?? "";
   }, [name]);
   const env = useRemotionEnvironment();
   const inheritedStack = other?.stack ?? null;
-  useEffect(() => {
+  useEffect3(() => {
     if (!env.isStudio) {
       return;
     }
@@ -2311,7 +2573,7 @@ var RegularSequenceRefForwardingFunction = ({
   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 = useMemo11(() => {
+  const defaultStyle = useMemo13(() => {
     return {
       flexDirection: undefined,
       ...width ? { width } : {},
@@ -2326,9 +2588,9 @@ var RegularSequenceRefForwardingFunction = ({
   if (isSequenceHidden) {
     return null;
   }
-  return /* @__PURE__ */ jsx8(SequenceContext.Provider, {
+  return /* @__PURE__ */ jsx11(SequenceContext.Provider, {
     value: contextValue,
-    children: content === null ? null : other.layout === "none" ? content : /* @__PURE__ */ jsx8(AbsoluteFill, {
+    children: content === null ? null : other.layout === "none" ? content : /* @__PURE__ */ jsx11(AbsoluteFill, {
       ref,
       style: defaultStyle,
       className: other.className,
@@ -2338,7 +2600,7 @@ var RegularSequenceRefForwardingFunction = ({
 };
 var RegularSequence = forwardRef2(RegularSequenceRefForwardingFunction);
 var PremountedPostmountedSequenceRefForwardingFunction = (props, ref) => {
-  const parentPremountContext = useContext13(PremountContext);
+  const parentPremountContext = useContext15(PremountContext);
   const frame = useCurrentFrame() - parentPremountContext.premountFramesRemaining;
   if (props.layout === "none") {
     throw new Error('`<Sequence>` with `premountFor` and `postmountFor` props does not support layout="none"');
@@ -2358,7 +2620,7 @@ var PremountedPostmountedSequenceRefForwardingFunction = (props, ref) => {
   const postmountingActive = frame > endThreshold && frame <= endThreshold + postmountFor;
   const freezeFrame = premountingActive ? from : postmountingActive ? from + durationInFrames - 1 : 0;
   const isFreezingActive = premountingActive || postmountingActive;
-  const style = useMemo11(() => {
+  const style = useMemo13(() => {
     return {
       ...passedStyle,
       opacity: premountingActive || postmountingActive ? 0 : 1,
@@ -2375,18 +2637,18 @@ var PremountedPostmountedSequenceRefForwardingFunction = (props, ref) => {
   ]);
   const { playing } = useTimelineContext();
   const premountFramesRemaining = premountingActive ? from - frame : 0;
-  const premountContextValue = useMemo11(() => {
+  const premountContextValue = useMemo13(() => {
     return {
       premountFramesRemaining,
       playing: parentPremountContext.playing || playing
     };
   }, [premountFramesRemaining, parentPremountContext.playing, playing]);
-  return /* @__PURE__ */ jsx8(PremountContext.Provider, {
+  return /* @__PURE__ */ jsx11(PremountContext.Provider, {
     value: premountContextValue,
-    children: /* @__PURE__ */ jsx8(Freeze, {
+    children: /* @__PURE__ */ jsx11(Freeze, {
       frame: freezeFrame,
       active: isFreezingActive,
-      children: /* @__PURE__ */ jsx8(Sequence, {
+      children: /* @__PURE__ */ jsx11(Sequence, {
         ref,
         from,
         durationInFrames,
@@ -2407,14 +2669,14 @@ var SequenceRefForwardingFunction = (props, ref) => {
   if (props.layout !== "none" && !env.isRendering) {
     const effectivePremountFor = ENABLE_V5_BREAKING_CHANGES ? props.premountFor ?? fps : props.premountFor;
     if (effectivePremountFor || props.postmountFor) {
-      return /* @__PURE__ */ jsx8(PremountedPostmountedSequence, {
+      return /* @__PURE__ */ jsx11(PremountedPostmountedSequence, {
         ref,
         ...props,
         premountFor: effectivePremountFor
       });
     }
   }
-  return /* @__PURE__ */ jsx8(RegularSequence, {
+  return /* @__PURE__ */ jsx11(RegularSequence, {
     ...props,
     ref
   });
@@ -2469,7 +2731,7 @@ var calcArgs = (fit, frameSize, canvasSize) => {
   }
 };
 var CanvasRefForwardingFunction = ({ width, height, fit, className, style }, ref) => {
-  const canvasRef = useRef4(null);
+  const canvasRef = useRef5(null);
   const draw = useCallback5((imageData) => {
     const canvas = canvasRef.current;
     const canvasWidth = width ?? imageData.displayWidth;
@@ -2509,13 +2771,13 @@ var CanvasRefForwardingFunction = ({ width, height, fit, className, style }, ref
       }
     };
   }, [draw]);
-  return /* @__PURE__ */ jsx9("canvas", {
+  return /* @__PURE__ */ jsx12("canvas", {
     ref: canvasRef,
     className,
     style
   });
 };
-var Canvas = React10.forwardRef(CanvasRefForwardingFunction);
+var Canvas = React12.forwardRef(CanvasRefForwardingFunction);
 var CACHE_SIZE = 5;
 var getActualTime = ({
   loopBehavior,
@@ -2672,8 +2934,8 @@ var AnimatedImage = forwardRef3(({
   fit = "fill",
   ...props
 }, canvasRef) => {
-  const mountState = useRef5({ isMounted: true });
-  useEffect2(() => {
+  const mountState = useRef6({ isMounted: true });
+  useEffect4(() => {
     const { current } = mountState;
     current.isMounted = true;
     return () => {
@@ -2687,9 +2949,9 @@ var AnimatedImage = forwardRef3(({
   const frame = useCurrentFrame();
   const { fps } = useVideoConfig();
   const currentTime = frame / playbackRate / fps;
-  const currentTimeRef = useRef5(currentTime);
+  const currentTimeRef = useRef6(currentTime);
   currentTimeRef.current = currentTime;
-  const ref = useRef5(null);
+  const ref = useRef6(null);
   useImperativeHandle2(canvasRef, () => {
     const c = ref.current?.getCanvas();
     if (!c) {
@@ -2698,7 +2960,7 @@ var AnimatedImage = forwardRef3(({
     return c;
   }, []);
   const [initialLoopBehavior] = useState5(() => loopBehavior);
-  useEffect2(() => {
+  useEffect4(() => {
     const controller = new AbortController;
     decodeImage({
       resolvedSrc,
@@ -2761,7 +3023,7 @@ var AnimatedImage = forwardRef3(({
     continueRender2,
     delayRender2
   ]);
-  return /* @__PURE__ */ jsx10(Canvas, {
+  return /* @__PURE__ */ jsx13(Canvas, {
     ref,
     width,
     height,
@@ -2798,7 +3060,7 @@ var validateRenderAsset = (artifact) => {
   }
   validateContent(artifact.content);
 };
-var RenderAssetManager = createContext13({
+var RenderAssetManager = createContext14({
   registerRenderAsset: () => {
     return;
   },
@@ -2809,7 +3071,7 @@ var RenderAssetManager = createContext13({
 });
 var RenderAssetManagerProvider = ({ children, collectAssets }) => {
   const [renderAssets, setRenderAssets] = useState6([]);
-  const renderAssetsRef = useRef6([]);
+  const renderAssetsRef = useRef7([]);
   const registerRenderAsset = useCallback6((renderAsset) => {
     validateRenderAsset(renderAsset);
     renderAssetsRef.current = [...renderAssetsRef.current, renderAsset];
@@ -2841,21 +3103,21 @@ var RenderAssetManagerProvider = ({ children, collectAssets }) => {
       };
     }
   }, []);
-  const contextValue = useMemo12(() => {
+  const contextValue = useMemo14(() => {
     return {
       registerRenderAsset,
       unregisterRenderAsset,
       renderAssets
     };
   }, [renderAssets, registerRenderAsset, unregisterRenderAsset]);
-  return /* @__PURE__ */ jsx11(RenderAssetManager.Provider, {
+  return /* @__PURE__ */ jsx14(RenderAssetManager.Provider, {
     value: contextValue,
     children
   });
 };
 var ArtifactThumbnail = Symbol("Thumbnail");
 var Artifact = ({ filename, content, downloadBehavior }) => {
-  const { registerRenderAsset, unregisterRenderAsset } = useContext14(RenderAssetManager);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext16(RenderAssetManager);
   const env = useRemotionEnvironment();
   const frame = useCurrentFrame();
   const [id] = useState7(() => {
@@ -2936,9 +3198,9 @@ var calculateMediaDuration = ({
   const actualDuration = duration / playbackRate;
   return Math.floor(actualDuration);
 };
-var LoopContext = createContext14(null);
+var LoopContext = createContext15(null);
 var useLoop = () => {
-  return React11.useContext(LoopContext);
+  return React13.useContext(LoopContext);
 };
 var Loop = ({ durationInFrames, times = Infinity, children, name, ...props }) => {
   const currentFrame = useCurrentFrame();
@@ -2963,22 +3225,22 @@ var Loop = ({ durationInFrames, times = Infinity, children, name, ...props }) =>
   const iteration = Math.floor(currentFrame / durationInFrames);
   const start = iteration * durationInFrames;
   const from = Math.min(start, maxFrame);
-  const loopDisplay = useMemo13(() => {
+  const loopDisplay = useMemo15(() => {
     return {
       numberOfTimes: Math.min(compDuration / durationInFrames, times),
       startOffset: -from,
       durationInFrames
     };
   }, [compDuration, durationInFrames, from, times]);
-  const loopContext = useMemo13(() => {
+  const loopContext = useMemo15(() => {
     return {
       iteration: Math.floor(currentFrame / durationInFrames),
       durationInFrames
     };
   }, [currentFrame, durationInFrames]);
-  return /* @__PURE__ */ jsx12(LoopContext.Provider, {
+  return /* @__PURE__ */ jsx15(LoopContext.Provider, {
     value: loopContext,
-    children: /* @__PURE__ */ jsx12(Sequence, {
+    children: /* @__PURE__ */ jsx15(Sequence, {
       durationInFrames,
       from,
       name: name ?? "<Loop>",
@@ -2999,7 +3261,7 @@ var playbackLogging = ({
   const tags = [mountTime ? Date.now() - mountTime + "ms " : null, tag].filter(Boolean).join(" ");
   Log.trace({ logLevel, tag: null }, `[${tags}]`, message);
 };
-var PreloadContext = createContext15({});
+var PreloadContext = createContext16({});
 var preloads = {};
 var updaters = [];
 var setPreloads = (updater) => {
@@ -3008,7 +3270,7 @@ var setPreloads = (updater) => {
 };
 var PrefetchProvider = ({ children }) => {
   const [_preloads, _setPreloads] = useState8(() => preloads);
-  useEffect3(() => {
+  useEffect5(() => {
     const updaterFunction = () => {
       _setPreloads(preloads);
     };
@@ -3017,7 +3279,7 @@ var PrefetchProvider = ({ children }) => {
       updaters = updaters.filter((u) => u !== updaterFunction);
     };
   }, []);
-  return /* @__PURE__ */ jsx13(PreloadContext.Provider, {
+  return /* @__PURE__ */ jsx16(PreloadContext.Provider, {
     value: _preloads,
     children
   });
@@ -3037,7 +3299,7 @@ var getSrcWithoutHash = (src) => {
   return src.slice(0, hashIndex);
 };
 var usePreload = (src) => {
-  const preloads2 = useContext15(PreloadContext);
+  const preloads2 = useContext17(PreloadContext);
   const hashFragmentIndex = removeAndGetHashFragment(src);
   const withoutHashFragment = getSrcWithoutHash(src);
   if (!preloads2[withoutHashFragment]) {
@@ -3320,7 +3582,7 @@ var durationReducer = (state, action) => {
       return state;
   }
 };
-var DurationsContext = createContext16({
+var DurationsContext = createContext17({
   durations: {},
   setDurations: () => {
     throw new Error("context missing");
@@ -3328,13 +3590,13 @@ var DurationsContext = createContext16({
 });
 var DurationsContextProvider = ({ children }) => {
   const [durations, setDurations] = useReducer(durationReducer, {});
-  const value = useMemo14(() => {
+  const value = useMemo16(() => {
     return {
       durations,
       setDurations
     };
   }, [durations]);
-  return /* @__PURE__ */ jsx14(DurationsContext.Provider, {
+  return /* @__PURE__ */ jsx17(DurationsContext.Provider, {
     value,
     children
   });
@@ -3462,7 +3724,7 @@ var useSingletonAudioContext = ({
   audioEnabled
 }) => {
   const env = useRemotionEnvironment();
-  const audioContext = useMemo15(() => {
+  const audioContext = useMemo17(() => {
     if (env.isRendering) {
       return null;
     }
@@ -3506,9 +3768,9 @@ var didPropChange = (key, newProp, prevProp) => {
   }
   return true;
 };
-var SharedAudioContext = createContext17(null);
+var SharedAudioContext = createContext18(null);
 var SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyHint, audioEnabled }) => {
-  const audios = useRef7([]);
+  const audios = useRef8([]);
   const [initialNumberOfAudioTags] = useState9(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.");
@@ -3519,9 +3781,9 @@ var SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyHin
     latencyHint: audioLatencyHint,
     audioEnabled
   });
-  const audioSyncAnchor = useMemo16(() => ({ value: 0 }), []);
-  const prevEndTimes = useRef7({ scheduledEndTime: null, mediaEndTime: null });
-  const scheduleAudioNode = useMemo16(() => {
+  const audioSyncAnchor = useMemo18(() => ({ value: 0 }), []);
+  const prevEndTimes = useRef8({ scheduledEndTime: null, mediaEndTime: null });
+  const scheduleAudioNode = useMemo18(() => {
     return ({
       node,
       mediaTimestamp,
@@ -3576,7 +3838,7 @@ var SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyHin
       };
     };
   }, [audioContext, logLevel]);
-  const refs = useMemo16(() => {
+  const refs = useMemo18(() => {
     return new Array(numberOfAudioTags).fill(true).map(() => {
       const ref = createRef2();
       return {
@@ -3589,7 +3851,7 @@ var SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyHin
       };
     });
   }, [audioContext, numberOfAudioTags]);
-  const effectToUse = React14.useInsertionEffect ?? React14.useLayoutEffect;
+  const effectToUse = React16.useInsertionEffect ?? React16.useLayoutEffect;
   effectToUse(() => {
     return () => {
       requestAnimationFrame(() => {
@@ -3599,7 +3861,7 @@ var SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyHin
       });
     };
   }, [refs]);
-  const takenAudios = useRef7(new Array(numberOfAudioTags).fill(false));
+  const takenAudios = useRef8(new Array(numberOfAudioTags).fill(false));
   const rerenderAudios = useCallback7(() => {
     refs.forEach(({ ref, id }) => {
       const data = audios.current?.find((a) => a.id === id);
@@ -3715,7 +3977,7 @@ var SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyHin
     });
     audioContext?.resume();
   }, [audioContext, logLevel, mountTime, refs, env.isPlayer]);
-  const value = useMemo16(() => {
+  const value = useMemo18(() => {
     return {
       registerAudio,
       unregisterAudio,
@@ -3736,11 +3998,11 @@ var SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyHin
     audioSyncAnchor,
     scheduleAudioNode
   ]);
-  return /* @__PURE__ */ jsxs2(SharedAudioContext.Provider, {
+  return /* @__PURE__ */ jsxs22(SharedAudioContext.Provider, {
     value,
     children: [
       refs.map(({ id, ref }) => {
-        return /* @__PURE__ */ jsx15("audio", {
+        return /* @__PURE__ */ jsx18("audio", {
           ref,
           preload: "metadata",
           src: EMPTY_AUDIO
@@ -3756,12 +4018,12 @@ var useSharedAudio = ({
   premounting,
   postmounting
 }) => {
-  const ctx = useContext16(SharedAudioContext);
+  const ctx = useContext18(SharedAudioContext);
   const [elem] = useState9(() => {
     if (ctx && ctx.numberOfAudioTags > 0) {
       return ctx.registerAudio({ aud, audioId, premounting, postmounting });
     }
-    const el = React14.createRef();
+    const el = React16.createRef();
     const mediaElementSourceNode = ctx?.audioContext ? makeSharedElementSourceNode({
       audioContext: ctx.audioContext,
       ref: el
@@ -3780,7 +4042,7 @@ var useSharedAudio = ({
       }
     };
   });
-  const effectToUse = React14.useInsertionEffect ?? React14.useLayoutEffect;
+  const effectToUse = React16.useInsertionEffect ?? React16.useLayoutEffect;
   if (typeof document !== "undefined") {
     effectToUse(() => {
       if (ctx && ctx.numberOfAudioTags > 0) {
@@ -3887,9 +4149,9 @@ var useAppendVideoFragment = ({
   duration: initialDuration,
   fps
 }) => {
-  const actualFromRef = useRef8(initialActualFrom);
-  const actualDuration = useRef8(initialDuration);
-  const actualSrc = useRef8(initialActualSrc);
+  const actualFromRef = useRef9(initialActualFrom);
+  const actualDuration = useRef9(initialDuration);
+  const actualSrc = useRef9(initialActualSrc);
   if (!isSubsetOfDuration({
     prevStartFrom: actualFromRef.current,
     newStartFrom: initialActualFrom,
@@ -3926,10 +4188,10 @@ var useVolume = ({
   source,
   shouldUseWebAudioApi
 }) => {
-  const audioStuffRef = useRef9(null);
-  const currentVolumeRef = useRef9(volume);
+  const audioStuffRef = useRef10(null);
+  const currentVolumeRef = useRef10(volume);
   currentVolumeRef.current = volume;
-  const sharedAudioContext = useContext17(SharedAudioContext);
+  const sharedAudioContext = useContext19(SharedAudioContext);
   if (!sharedAudioContext) {
     throw new Error("useAmplification must be used within a SharedAudioContext");
   }
@@ -3984,7 +4246,7 @@ var useVolume = ({
   return audioStuffRef;
 };
 var useMediaStartsAt = () => {
-  const parentSequence = useContext18(SequenceContext);
+  const parentSequence = useContext20(SequenceContext);
   const startsAt = Math.min(0, parentSequence?.relativeFrom ?? 0);
   return startsAt;
 };
@@ -4049,7 +4311,7 @@ var useBasicMediaInTimeline = ({
     throw new Error("No src passed");
   }
   const startsAt = useMediaStartsAt();
-  const parentSequence = useContext19(SequenceContext);
+  const parentSequence = useContext21(SequenceContext);
   const videoConfig = useVideoConfig();
   const [initialVolume] = useState10(() => volume);
   const mediaDuration = calculateMediaDuration({
@@ -4059,7 +4321,7 @@ var useBasicMediaInTimeline = ({
     trimAfter
   });
   const duration = parentSequence ? Math.min(parentSequence.durationInFrames, mediaDuration) : mediaDuration;
-  const volumes = useMemo17(() => {
+  const volumes = useMemo19(() => {
     if (typeof volume === "number") {
       return volume;
     }
@@ -4071,7 +4333,7 @@ var useBasicMediaInTimeline = ({
       });
     }).join(",");
   }, [duration, startsAt, volume, mediaVolume]);
-  useEffect4(() => {
+  useEffect6(() => {
     if (typeof volume === "number" && volume !== initialVolume) {
       warnOnce2(`Remotion: The ${mediaType} with src ${src} has changed it's volume. Prefer the callback syntax for setting volume to get better timeline display: https://www.remotion.dev/docs/audio/volume`);
     }
@@ -4098,10 +4360,11 @@ var useImageInTimeline = ({
   showInTimeline,
   premountDisplay,
   postmountDisplay,
-  loopDisplay
+  loopDisplay,
+  controls
 }) => {
-  const parentSequence = useContext19(SequenceContext);
-  const { registerSequence, unregisterSequence } = useContext19(SequenceManager);
+  const parentSequence = useContext21(SequenceContext);
+  const { registerSequence, unregisterSequence } = useContext21(SequenceManager);
   const { duration, nonce, rootId, isStudio, finalDisplayName } = useBasicMediaInTimeline({
     volume: undefined,
     mediaVolume: 0,
@@ -4112,7 +4375,7 @@ var useImageInTimeline = ({
     trimBefore: undefined,
     playbackRate: 1
   });
-  useEffect4(() => {
+  useEffect6(() => {
     if (!src) {
       throw new Error("No src passed");
     }
@@ -4137,7 +4400,7 @@ var useImageInTimeline = ({
       stack,
       premountDisplay,
       postmountDisplay,
-      controls: null
+      controls
     });
     return () => {
       unregisterSequence(id);
@@ -4157,7 +4420,8 @@ var useImageInTimeline = ({
     isStudio,
     loopDisplay,
     rootId,
-    finalDisplayName
+    finalDisplayName,
+    controls
   ]);
 };
 var useMediaInTimeline = ({
@@ -4174,9 +4438,9 @@ var useMediaInTimeline = ({
   postmountDisplay,
   loopDisplay
 }) => {
-  const parentSequence = useContext19(SequenceContext);
+  const parentSequence = useContext21(SequenceContext);
   const startsAt = useMediaStartsAt();
-  const { registerSequence, unregisterSequence } = useContext19(SequenceManager);
+  const { registerSequence, unregisterSequence } = useContext21(SequenceManager);
   const {
     volumes,
     duration,
@@ -4195,7 +4459,7 @@ var useMediaInTimeline = ({
     trimBefore: undefined,
     playbackRate
   });
-  useEffect4(() => {
+  useEffect6(() => {
     if (!src) {
       throw new Error("No src passed");
     }
@@ -4258,7 +4522,7 @@ var useBufferManager = (logLevel, mountTime) => {
   const [onResumeCallbacks, setOnResumeCallbacks] = useState11([]);
   const env = useRemotionEnvironment();
   const rendering = env.isRendering;
-  const buffering = useRef10(false);
+  const buffering = useRef11(false);
   const addBlock = useCallback8((block) => {
     if (rendering) {
       return {
@@ -4296,7 +4560,7 @@ var useBufferManager = (logLevel, mountTime) => {
       }
     };
   }, []);
-  useEffect5(() => {
+  useEffect7(() => {
     if (rendering) {
       return;
     }
@@ -4326,22 +4590,22 @@ var useBufferManager = (logLevel, mountTime) => {
       }
     }, [blocks]);
   }
-  return useMemo18(() => {
+  return useMemo20(() => {
     return { addBlock, listenForBuffering, listenForResume, buffering };
   }, [addBlock, buffering, listenForBuffering, listenForResume]);
 };
-var BufferingContextReact = React15.createContext(null);
+var BufferingContextReact = React17.createContext(null);
 var BufferingProvider = ({ children }) => {
-  const { logLevel, mountTime } = useContext20(LogLevelContext);
+  const { logLevel, mountTime } = useContext22(LogLevelContext);
   const bufferManager = useBufferManager(logLevel ?? "info", mountTime);
-  return /* @__PURE__ */ jsx16(BufferingContextReact.Provider, {
+  return /* @__PURE__ */ jsx19(BufferingContextReact.Provider, {
     value: bufferManager,
     children
   });
 };
 var useIsPlayerBuffering = (bufferManager) => {
   const [isBuffering, setIsBuffering] = useState11(bufferManager.buffering.current);
-  useEffect5(() => {
+  useEffect7(() => {
     const onBuffer = () => {
       setIsBuffering(true);
     };
@@ -4362,9 +4626,9 @@ var useIsPlayerBuffering = (bufferManager) => {
   return isBuffering;
 };
 var useBufferState = () => {
-  const buffer = useContext21(BufferingContextReact);
+  const buffer = useContext23(BufferingContextReact);
   const addBlock = buffer ? buffer.addBlock : null;
-  return useMemo19(() => ({
+  return useMemo21(() => ({
     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");
@@ -4388,7 +4652,7 @@ var useBufferUntilFirstFrame = ({
   logLevel,
   mountTime
 }) => {
-  const bufferingRef = useRef11(false);
+  const bufferingRef = useRef12(false);
   const { delayPlayback } = useBufferState();
   const bufferUntilFirstFrame = useCallback9((requestedTime) => {
     if (mediaType !== "video") {
@@ -4461,7 +4725,7 @@ var useBufferUntilFirstFrame = ({
     onVariableFpsVideoDetected,
     pauseWhenBuffering
   ]);
-  return useMemo20(() => {
+  return useMemo22(() => {
     return {
       isBuffering: () => bufferingRef.current,
       bufferUntilFirstFrame
@@ -4469,7 +4733,7 @@ var useBufferUntilFirstFrame = ({
   }, [bufferUntilFirstFrame]);
 };
 var useCurrentTimeOfMediaTagWithUpdateTimeStamp = (mediaRef) => {
-  const lastUpdate = React16.useRef({
+  const lastUpdate = React18.useRef({
     time: mediaRef.current?.currentTime ?? 0,
     lastUpdate: performance.now()
   });
@@ -4510,7 +4774,7 @@ var useMediaBuffering = ({
 }) => {
   const buffer = useBufferState();
   const [isBuffering, setIsBuffering] = useState12(false);
-  useEffect6(() => {
+  useEffect8(() => {
     let cleanupFns = [];
     const { current } = element;
     if (!current) {
@@ -4642,8 +4906,8 @@ var useRequestVideoCallbackTime = ({
   lastSeek,
   onVariableFpsVideoDetected
 }) => {
-  const currentTime = useRef12(null);
-  useEffect7(() => {
+  const currentTime = useRef13(null);
+  useEffect9(() => {
     const { current } = mediaRef;
     if (current) {
       currentTime.current = {
@@ -4867,17 +5131,17 @@ var useMediaPlayback = ({
   const frame = useCurrentFrame();
   const absoluteFrame = useTimelinePosition();
   const [playing] = usePlayingState();
-  const buffering = useContext22(BufferingContextReact);
+  const buffering = useContext24(BufferingContextReact);
   const { fps } = useVideoConfig();
   const mediaStartsAt = useMediaStartsAt();
-  const lastSeekDueToShift = useRef13(null);
-  const lastSeek = useRef13(null);
+  const lastSeekDueToShift = useRef14(null);
+  const lastSeek = useRef14(null);
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
   if (!buffering) {
     throw new Error("useMediaPlayback must be used inside a <BufferingContext>");
   }
-  const isVariableFpsVideoMap = useRef13({});
+  const isVariableFpsVideoMap = useRef14({});
   const onVariableFpsVideoDetected = useCallback10(() => {
     if (!src) {
       return;
@@ -4929,7 +5193,7 @@ var useMediaPlayback = ({
     return acceptableTimeshift ?? defaultAcceptableTimeshift;
   })();
   const isPlayerBuffering = useIsPlayerBuffering(buffering);
-  useEffect8(() => {
+  useEffect10(() => {
     if (mediaRef.current?.paused) {
       return;
     }
@@ -4974,7 +5238,7 @@ var useMediaPlayback = ({
       mediaRef.current.playbackRate = playbackRateToSet;
     }
   }, [mediaRef, playbackRate]);
-  useEffect8(() => {
+  useEffect10(() => {
     const tagName = mediaType === "audio" ? "<Html5Audio>" : "<Html5Video>";
     if (!mediaRef.current) {
       throw new Error(`No ${mediaType} ref found`);
@@ -5103,7 +5367,7 @@ var useMediaTag = ({
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
   const env = useRemotionEnvironment();
-  useEffect9(() => {
+  useEffect11(() => {
     const tag = {
       id,
       play: (reason) => {
@@ -5142,11 +5406,11 @@ var useMediaTag = ({
     env.isPlayer
   ]);
 };
-var MediaVolumeContext = createContext18({
+var MediaVolumeContext = createContext19({
   mediaMuted: false,
   mediaVolume: 1
 });
-var SetMediaVolumeContext = createContext18({
+var SetMediaVolumeContext = createContext19({
   setMediaMuted: () => {
     throw new Error("default");
   },
@@ -5155,16 +5419,16 @@ var SetMediaVolumeContext = createContext18({
   }
 });
 var useMediaVolumeState = () => {
-  const { mediaVolume } = useContext23(MediaVolumeContext);
-  const { setMediaVolume } = useContext23(SetMediaVolumeContext);
-  return useMemo21(() => {
+  const { mediaVolume } = useContext25(MediaVolumeContext);
+  const { setMediaVolume } = useContext25(SetMediaVolumeContext);
+  return useMemo23(() => {
     return [mediaVolume, setMediaVolume];
   }, [mediaVolume, setMediaVolume]);
 };
 var useMediaMutedState = () => {
-  const { mediaMuted } = useContext23(MediaVolumeContext);
-  const { setMediaMuted } = useContext23(SetMediaVolumeContext);
-  return useMemo21(() => {
+  const { mediaMuted } = useContext25(MediaVolumeContext);
+  const { setMediaMuted } = useContext25(SetMediaVolumeContext);
+  return useMemo23(() => {
     return [mediaMuted, setMediaMuted];
   }, [mediaMuted, setMediaMuted]);
 };
@@ -5213,12 +5477,12 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
   const [mediaVolume] = useMediaVolumeState();
   const [mediaMuted] = useMediaMutedState();
   const volumePropFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
-  const { hidden } = useContext24(SequenceVisibilityToggleContext);
+  const { hidden } = useContext26(SequenceVisibilityToggleContext);
   if (!src) {
     throw new TypeError("No 'src' was passed to <Html5Audio>.");
   }
   const preloadedSrc = usePreload(src);
-  const sequenceContext = useContext24(SequenceContext);
+  const sequenceContext = useContext26(SequenceContext);
   const [timelineId] = useState13(() => String(Math.random()));
   const isSequenceHidden = hidden[timelineId] ?? false;
   const userPreferredVolume = evaluateVolume({
@@ -5232,7 +5496,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     requestsVideoFrame: false,
     isClientSideRendering: false
   });
-  const propsToPass = useMemo22(() => {
+  const propsToPass = useMemo24(() => {
     return {
       muted: muted || mediaMuted || isSequenceHidden || userPreferredVolume <= 0,
       src: preloadedSrc,
@@ -5250,7 +5514,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     userPreferredVolume,
     crossOriginValue
   ]);
-  const id = useMemo22(() => `audio-${random(src ?? "")}-${sequenceContext?.relativeFrom}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.durationInFrames}-muted:${props.muted}-loop:${props.loop}`, [
+  const id = useMemo24(() => `audio-${random(src ?? "")}-${sequenceContext?.relativeFrom}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.durationInFrames}-muted:${props.muted}-loop:${props.loop}`, [
     src,
     sequenceContext?.relativeFrom,
     sequenceContext?.cumulatedFrom,
@@ -5309,7 +5573,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     volume: userPreferredVolume,
     shouldUseWebAudioApi: useWebAudioApi ?? false
   });
-  const effectToUse = React17.useInsertionEffect ?? React17.useLayoutEffect;
+  const effectToUse = React19.useInsertionEffect ?? React19.useLayoutEffect;
   effectToUse(() => {
     return () => {
       requestAnimationFrame(() => {
@@ -5320,9 +5584,9 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
   useImperativeHandle4(ref, () => {
     return audioRef.current;
   }, [audioRef]);
-  const currentOnDurationCallback = useRef14(onDuration);
+  const currentOnDurationCallback = useRef15(onDuration);
   currentOnDurationCallback.current = onDuration;
-  useEffect10(() => {
+  useEffect12(() => {
     const { current } = audioRef;
     if (!current) {
       return;
@@ -5342,7 +5606,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
   if (initialShouldPreMountAudioElements) {
     return null;
   }
-  return /* @__PURE__ */ jsx17("audio", {
+  return /* @__PURE__ */ jsx20("audio", {
     ref: audioRef,
     preload: "metadata",
     crossOrigin: crossOriginValue,
@@ -5351,7 +5615,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
 };
 var AudioForPreview = forwardRef4(AudioForDevelopmentForwardRefFunction);
 var AudioForRenderingRefForwardingFunction = (props, ref) => {
-  const audioRef = useRef15(null);
+  const audioRef = useRef16(null);
   const {
     volume: volumeProp,
     playbackRate,
@@ -5373,10 +5637,10 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
   const absoluteFrame = useTimelinePosition();
   const volumePropFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const frame = useCurrentFrame();
-  const sequenceContext = useContext25(SequenceContext);
-  const { registerRenderAsset, unregisterRenderAsset } = useContext25(RenderAssetManager);
+  const sequenceContext = useContext27(SequenceContext);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext27(RenderAssetManager);
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
-  const id = useMemo23(() => `audio-${random(props.src ?? "")}-${sequenceContext?.relativeFrom}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.durationInFrames}`, [
+  const id = useMemo25(() => `audio-${random(props.src ?? "")}-${sequenceContext?.relativeFrom}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.durationInFrames}`, [
     props.src,
     sequenceContext?.relativeFrom,
     sequenceContext?.cumulatedFrom,
@@ -5391,7 +5655,7 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
   useImperativeHandle5(ref, () => {
     return audioRef.current;
   }, []);
-  useEffect11(() => {
+  useEffect13(() => {
     if (!props.src) {
       throw new Error("No src passed");
     }
@@ -5475,7 +5739,7 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
   if (!needsToRenderAudioTag) {
     return null;
   }
-  return /* @__PURE__ */ jsx18("audio", {
+  return /* @__PURE__ */ jsx21("audio", {
     ref: audioRef,
     ...nativeProps,
     onError: onNativeError
@@ -5483,7 +5747,7 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
 };
 var AudioForRendering = forwardRef5(AudioForRenderingRefForwardingFunction);
 var AudioRefForwardingFunction = (props, ref) => {
-  const audioContext = useContext26(SharedAudioContext);
+  const audioContext = useContext28(SharedAudioContext);
   const {
     startFrom,
     endAt,
@@ -5502,7 +5766,7 @@ var AudioRefForwardingFunction = (props, ref) => {
   if (environment.isClientSideRendering) {
     throw new Error("<Html5Audio> is not supported in @remotion/web-renderer. Use <Audio> from @remotion/media instead. See https://remotion.dev/docs/client-side-rendering/limitations");
   }
-  const { durations, setDurations } = useContext26(DurationsContext);
+  const { durations, setDurations } = useContext28(DurationsContext);
   if (typeof props.src !== "string") {
     throw new TypeError(`The \`<Html5Audio>\` tag requires a string for \`src\`, but got ${JSON.stringify(props.src)} instead.`);
   }
@@ -5534,14 +5798,14 @@ var AudioRefForwardingFunction = (props, ref) => {
   });
   if (loop && durationFetched !== undefined) {
     if (!Number.isFinite(durationFetched)) {
-      return /* @__PURE__ */ jsx19(Html5Audio, {
+      return /* @__PURE__ */ jsx222(Html5Audio, {
         ...propsOtherThanLoop,
         ref,
         _remotionInternalNativeLoopPassed: true
       });
     }
     const duration = durationFetched * fps;
-    return /* @__PURE__ */ jsx19(Loop, {
+    return /* @__PURE__ */ jsx222(Loop, {
       layout: "none",
       durationInFrames: calculateMediaDuration({
         trimAfter: trimAfterValue,
@@ -5549,7 +5813,7 @@ var AudioRefForwardingFunction = (props, ref) => {
         playbackRate: props.playbackRate ?? 1,
         trimBefore: trimBeforeValue
       }),
-      children: /* @__PURE__ */ jsx19(Html5Audio, {
+      children: /* @__PURE__ */ jsx222(Html5Audio, {
         ...propsOtherThanLoop,
         ref,
         _remotionInternalNativeLoopPassed: true
@@ -5557,13 +5821,13 @@ var AudioRefForwardingFunction = (props, ref) => {
     });
   }
   if (typeof trimBeforeValue !== "undefined" || typeof trimAfterValue !== "undefined") {
-    return /* @__PURE__ */ jsx19(Sequence, {
+    return /* @__PURE__ */ jsx222(Sequence, {
       layout: "none",
       from: 0 - (trimBeforeValue ?? 0),
       showInTimeline: false,
       durationInFrames: trimAfterValue,
       name,
-      children: /* @__PURE__ */ jsx19(Html5Audio, {
+      children: /* @__PURE__ */ jsx222(Html5Audio, {
         _remotionInternalNeedsDurationCalculation: Boolean(loop),
         pauseWhenBuffering: pauseWhenBuffering ?? false,
         ...otherProps,
@@ -5573,7 +5837,7 @@ var AudioRefForwardingFunction = (props, ref) => {
   }
   validateMediaProps({ playbackRate: props.playbackRate, volume: props.volume }, "Html5Audio");
   if (environment.isRendering) {
-    return /* @__PURE__ */ jsx19(AudioForRendering, {
+    return /* @__PURE__ */ jsx222(AudioForRendering, {
       onDuration,
       ...props,
       ref,
@@ -5581,7 +5845,7 @@ var AudioRefForwardingFunction = (props, ref) => {
       _remotionInternalNeedsDurationCalculation: Boolean(loop)
     });
   }
-  return /* @__PURE__ */ jsx19(AudioForPreview, {
+  return /* @__PURE__ */ jsx222(AudioForPreview, {
     _remotionInternalNativeLoopPassed: props._remotionInternalNativeLoopPassed ?? false,
     _remotionInternalStack: stack ?? null,
     shouldPreMountAudioTags: audioContext !== null && audioContext.numberOfAudioTags > 0,
@@ -5597,266 +5861,6 @@ var AudioRefForwardingFunction = (props, ref) => {
 var Html5Audio = forwardRef6(AudioRefForwardingFunction);
 addSequenceStackTraces(Html5Audio);
 var Audio = Html5Audio;
-var getRegex = () => /^([a-zA-Z0-9-\u4E00-\u9FFF])+$/g;
-var invalidFolderNameErrorMessage = `Folder name must match ${String(getRegex())}`;
-var FolderContext = createContext19({
-  folderName: null,
-  parentName: null
-});
-var rotate = {
-  transform: `rotate(90deg)`
-};
-var ICON_SIZE = 40;
-var label = {
-  color: "white",
-  fontSize: 14,
-  fontFamily: "sans-serif"
-};
-var container = {
-  justifyContent: "center",
-  alignItems: "center"
-};
-var Loading = () => {
-  return /* @__PURE__ */ jsxs22(AbsoluteFill, {
-    style: container,
-    id: "remotion-comp-loading",
-    children: [
-      /* @__PURE__ */ jsx21("style", {
-        type: "text/css",
-        children: `
-				@keyframes anim {
-					from {
-						opacity: 0
-					}
-					to {
-						opacity: 1
-					}
-				}
-				#remotion-comp-loading {
-					animation: anim 2s;
-					animation-fill-mode: forwards;
-				}
-			`
-      }),
-      /* @__PURE__ */ jsx21("svg", {
-        width: ICON_SIZE,
-        height: ICON_SIZE,
-        viewBox: "-100 -100 400 400",
-        style: rotate,
-        children: /* @__PURE__ */ jsx21("path", {
-          fill: "#555",
-          stroke: "#555",
-          strokeWidth: "100",
-          strokeLinejoin: "round",
-          d: "M 2 172 a 196 100 0 0 0 195 5 A 196 240 0 0 0 100 2.259 A 196 240 0 0 0 2 172 z"
-        })
-      }),
-      /* @__PURE__ */ jsxs22("p", {
-        style: label,
-        children: [
-          "Resolving ",
-          "<Suspense>",
-          "..."
-        ]
-      })
-    ]
-  });
-};
-var _portalNode = null;
-var portalNode = () => {
-  if (!_portalNode) {
-    if (typeof document === "undefined") {
-      throw new Error("Tried to call an API that only works in the browser from outside the browser");
-    }
-    _portalNode = document.createElement("div");
-    _portalNode.style.position = "absolute";
-    _portalNode.style.top = "0px";
-    _portalNode.style.left = "0px";
-    _portalNode.style.right = "0px";
-    _portalNode.style.bottom = "0px";
-    _portalNode.style.width = "100%";
-    _portalNode.style.height = "100%";
-    _portalNode.style.display = "flex";
-    _portalNode.style.flexDirection = "column";
-    const containerNode = document.createElement("div");
-    containerNode.style.position = "fixed";
-    containerNode.style.top = -999999 + "px";
-    containerNode.appendChild(_portalNode);
-    document.body.appendChild(containerNode);
-  }
-  return _portalNode;
-};
-var useLazyComponent = ({
-  compProps,
-  componentName,
-  noSuspense
-}) => {
-  const componentRef = useRef16(null);
-  if ("component" in compProps) {
-    componentRef.current = compProps.component;
-  }
-  const lazy = useMemo25(() => {
-    if ("component" in compProps) {
-      if (typeof document === "undefined" || noSuspense) {
-        return compProps.component;
-      }
-      if (typeof compProps.component === "undefined") {
-        throw new Error(`A value of \`undefined\` was passed to the \`component\` prop. Check the value you are passing to the <${componentName}/> component.`);
-      }
-      const Wrapper = (props2) => {
-        const Comp = componentRef.current;
-        return React20.createElement(Comp, props2);
-      };
-      return Wrapper;
-    }
-    if ("lazyComponent" in compProps && typeof compProps.lazyComponent !== "undefined") {
-      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);
-    }
-    throw new Error("You must pass either 'component' or 'lazyComponent'");
-  }, [compProps.lazyComponent]);
-  return lazy;
-};
-var getRegex2 = () => /^([a-zA-Z0-9-\u4E00-\u9FFF])+$/g;
-var isCompositionIdValid = (id) => id.match(getRegex2());
-var validateCompositionId = (id) => {
-  if (!isCompositionIdValid(id)) {
-    throw new Error(`Composition id can only contain a-z, A-Z, 0-9, CJK characters and -. You passed ${id}`);
-  }
-};
-var invalidCompositionErrorMessage = `Composition ID must match ${String(getRegex2())}`;
-var validateDefaultAndInputProps = (defaultProps, name, compositionId) => {
-  if (!defaultProps) {
-    return;
-  }
-  if (typeof defaultProps !== "object") {
-    throw new Error(`"${name}" must be an object, but you passed a value of type ${typeof defaultProps}`);
-  }
-  if (Array.isArray(defaultProps)) {
-    throw new Error(`"${name}" must be an object, an array was passed ${compositionId ? `for composition "${compositionId}"` : ""}`);
-  }
-};
-var Fallback = () => {
-  const { continueRender: continueRender2, delayRender: delayRender2 } = useDelayRender();
-  useEffect13(() => {
-    const fallback = delayRender2("Waiting for Root component to unsuspend");
-    return () => continueRender2(fallback);
-  }, [continueRender2, delayRender2]);
-  return null;
-};
-var InnerComposition = ({
-  width,
-  height,
-  fps,
-  durationInFrames,
-  id,
-  defaultProps,
-  schema,
-  ...compProps
-}) => {
-  const compManager = useContext28(CompositionSetters);
-  const { registerComposition, unregisterComposition } = compManager;
-  const video = useVideo();
-  const lazy = useLazyComponent({
-    compProps,
-    componentName: "Composition",
-    noSuspense: false
-  });
-  const nonce = useNonce();
-  const isPlayer = useIsPlayer();
-  const environment = useRemotionEnvironment();
-  const canUseComposition = useContext28(CanUseRemotionHooks);
-  if (typeof window !== "undefined") {
-    window.remotion_seenCompositionIds = Array.from(new Set([...window.remotion_seenCompositionIds ?? [], id]));
-  }
-  if (canUseComposition) {
-    if (isPlayer) {
-      throw new Error("<Composition> was mounted inside the `component` that was passed to the <Player>. See https://remotion.dev/docs/wrong-composition-mount for help.");
-    }
-    throw new Error("<Composition> mounted inside another composition. See https://remotion.dev/docs/wrong-composition-mount for help.");
-  }
-  const { folderName, parentName } = useContext28(FolderContext);
-  useEffect13(() => {
-    if (!id) {
-      throw new Error("No id for composition passed.");
-    }
-    validateCompositionId(id);
-    validateDefaultAndInputProps(defaultProps, "defaultProps", id);
-    registerComposition({
-      durationInFrames: durationInFrames ?? undefined,
-      fps: fps ?? undefined,
-      height: height ?? undefined,
-      width: width ?? undefined,
-      id,
-      folderName,
-      component: lazy,
-      defaultProps: serializeThenDeserializeInStudio(defaultProps ?? {}),
-      nonce: nonce.get(),
-      parentFolderName: parentName,
-      schema: schema ?? null,
-      calculateMetadata: compProps.calculateMetadata ?? null
-    });
-    return () => {
-      unregisterComposition(id);
-    };
-  }, [
-    durationInFrames,
-    fps,
-    height,
-    lazy,
-    id,
-    folderName,
-    defaultProps,
-    width,
-    nonce,
-    parentName,
-    schema,
-    compProps.calculateMetadata,
-    registerComposition,
-    unregisterComposition
-  ]);
-  const resolved = useResolvedVideoConfig(id);
-  if (environment.isStudio && video && video.component === lazy && video.id === id) {
-    const Comp = lazy;
-    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, {
-          ...resolved.result.props ?? {}
-        })
-      })
-    }), portalNode());
-  }
-  if (environment.isRendering && video && video.component === lazy && video.id === id) {
-    const Comp = lazy;
-    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, {
-          ...resolved.result.props ?? {}
-        })
-      })
-    }), portalNode());
-  }
-  return null;
-};
-var Composition = (props2) => {
-  const { onlyRenderComposition } = useContext28(CompositionSetters);
-  if (onlyRenderComposition && onlyRenderComposition !== props2.id) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx222(InnerComposition, {
-    ...props2
-  });
-};
 var kSplineTableSize = 11;
 var kSampleStepSize = 1 / (kSplineTableSize - 1);
 var IFrameRefForwarding = ({
@@ -5892,10 +5896,192 @@ var IFrameRefForwarding = ({
   });
 };
 var IFrame = forwardRef7(IFrameRefForwarding);
+var getEffectiveVisualModeValue = ({
+  codeValue,
+  runtimeValue,
+  dragOverrideValue,
+  defaultValue,
+  shouldResortToDefaultValueIfUndefined = false
+}) => {
+  if (dragOverrideValue !== undefined) {
+    return dragOverrideValue;
+  }
+  if (!codeValue) {
+    return runtimeValue;
+  }
+  if (!codeValue.canUpdate) {
+    return runtimeValue;
+  }
+  if (codeValue.codeValue === undefined && shouldResortToDefaultValueIfUndefined) {
+    return defaultValue;
+  }
+  return codeValue.codeValue;
+};
+var useSchema = (schema, currentValue) => {
+  const env = useRemotionEnvironment();
+  const earlyReturn = useMemo26(() => {
+    if (!env.isStudio || env.isReadOnlyStudio) {
+      return {
+        controls: undefined,
+        values: currentValue ?? {}
+      };
+    }
+    return;
+  }, [env.isStudio, env.isReadOnlyStudio, currentValue]);
+  if (earlyReturn) {
+    return earlyReturn;
+  }
+  const [overrideId] = useState15(() => String(Math.random()));
+  const {
+    visualModeEnabled,
+    dragOverrides: overrides,
+    codeValues
+  } = useContext29(VisualModeOverridesContext);
+  const controls = useMemo26(() => {
+    if (!visualModeEnabled) {
+      return;
+    }
+    if (schema === null || currentValue === null) {
+      return;
+    }
+    return {
+      schema,
+      currentValue,
+      overrideId
+    };
+  }, [schema, currentValue, overrideId, visualModeEnabled]);
+  return useMemo26(() => {
+    if (controls === undefined || currentValue === null || schema === null || !visualModeEnabled) {
+      return {
+        controls: undefined,
+        values: currentValue ?? {}
+      };
+    }
+    const overrideValues = overrides[overrideId] ?? {};
+    const propStatus = codeValues[overrideId];
+    const currentValueKeys = Object.keys(currentValue);
+    const keysToUpdate = [...new Set(currentValueKeys)];
+    const merged = {};
+    for (const key of keysToUpdate) {
+      const codeValueStatus = propStatus?.[key] ?? null;
+      merged[key] = getEffectiveVisualModeValue({
+        codeValue: codeValueStatus,
+        runtimeValue: currentValue[key],
+        dragOverrideValue: overrideValues[key],
+        defaultValue: schema[key]?.default,
+        shouldResortToDefaultValueIfUndefined: false
+      });
+    }
+    return {
+      controls,
+      values: merged
+    };
+  }, [
+    controls,
+    currentValue,
+    overrideId,
+    overrides,
+    codeValues,
+    schema,
+    visualModeEnabled
+  ]);
+};
+var getNestedValue = (obj, key) => {
+  const parts = key.split(".");
+  let current = obj;
+  for (const part of parts) {
+    if (current === null || current === undefined || typeof current !== "object")
+      return;
+    current = current[part];
+  }
+  return current;
+};
+var mergeValues = (props2, values, schemaKeys) => {
+  const merged = { ...props2 };
+  for (const key of schemaKeys) {
+    const value = values[key];
+    const parts = key.split(".");
+    if (parts.length === 1) {
+      merged[key] = value;
+      continue;
+    }
+    let current = merged;
+    for (let i = 0;i < parts.length - 1; i++) {
+      const part = parts[i];
+      if (typeof current[part] === "object" && current[part] !== null) {
+        current[part] = { ...current[part] };
+      } else {
+        current[part] = {};
+      }
+      current = current[part];
+    }
+    current[parts[parts.length - 1]] = value;
+  }
+  return merged;
+};
+var wrapInSchema = (Component, schema) => {
+  const schemaKeys = Object.keys(schema);
+  const Wrapped = forwardRef8((props2, ref) => {
+    const env = useRemotionEnvironment();
+    if (!env.isStudio || env.isReadOnlyStudio || env.isRendering || !process.env.EXPERIMENTAL_VISUAL_MODE_ENABLED) {
+      return React23.createElement(Component, {
+        ...props2,
+        controls: null,
+        ref
+      });
+    }
+    const schemaInput = useMemo27(() => {
+      const input = {};
+      for (const key of schemaKeys) {
+        input[key] = getNestedValue(props2, key);
+      }
+      return input;
+    }, schemaKeys.map((key) => getNestedValue(props2, key)));
+    const { controls, values } = useSchema(schema, schemaInput);
+    const mergedProps = mergeValues(props2, values, schemaKeys);
+    return React23.createElement(Component, {
+      ...mergedProps,
+      controls,
+      ref
+    });
+  });
+  Wrapped.displayName = `wrapInSchema(${Component.displayName || Component.name || "Component"})`;
+  return Wrapped;
+};
 function exponentialBackoff(errorCount) {
   return 1000 * 2 ** (errorCount - 1);
 }
-var ImgRefForwarding = ({
+var imgSchema = {
+  "style.translate": {
+    type: "translate",
+    step: 1,
+    default: "0px 0px",
+    description: "Position"
+  },
+  "style.scale": {
+    type: "number",
+    min: 0.05,
+    max: 100,
+    step: 0.01,
+    default: 1,
+    description: "Scale"
+  },
+  "style.rotate": {
+    type: "rotation",
+    step: 1,
+    default: "0deg",
+    description: "Rotation"
+  },
+  "style.opacity": {
+    type: "number",
+    min: 0,
+    max: 1,
+    step: 0.01,
+    default: 1,
+    description: "Opacity"
+  }
+};
+var ImgInner = ({
   onError,
   maxRetries = 2,
   src,
@@ -5907,13 +6093,15 @@ var ImgRefForwarding = ({
   showInTimeline,
   name,
   stack,
+  ref,
+  controls,
   ...props2
-}, ref) => {
+}) => {
   const imageRef = useRef17(null);
   const errors = useRef17({});
   const { delayPlayback } = useBufferState();
-  const sequenceContext = useContext29(SequenceContext);
-  const [timelineId] = useState15(() => String(Math.random()));
+  const sequenceContext = useContext30(SequenceContext);
+  const [timelineId] = useState16(() => String(Math.random()));
   if (!src) {
     throw new Error('No "src" prop was passed to <Img>.');
   }
@@ -5932,7 +6120,8 @@ var ImgRefForwarding = ({
     showInTimeline: showInTimeline ?? true,
     premountDisplay: sequenceContext?.premountDisplay ?? null,
     postmountDisplay: sequenceContext?.postmountDisplay ?? null,
-    loopDisplay: undefined
+    loopDisplay: undefined,
+    controls: controls ?? null
   });
   const actualSrc = usePreload(src);
   const retryIn = useCallback13((timeout) => {
@@ -6055,9 +6244,9 @@ var ImgRefForwarding = ({
     decoding: "sync"
   });
 };
-var Img = forwardRef8(ImgRefForwarding);
+var Img = wrapInSchema(ImgInner, imgSchema);
 addSequenceStackTraces(Img);
-var compositionsRef = React24.createRef();
+var compositionsRef = React25.createRef();
 var CompositionManagerProvider = ({
   children,
   onlyRenderComposition,
@@ -6065,9 +6254,9 @@ var CompositionManagerProvider = ({
   initialCompositions,
   initialCanvasContent
 }) => {
-  const [folders, setFolders] = useState16([]);
-  const [canvasContent, setCanvasContent] = useState16(initialCanvasContent);
-  const [compositions, setCompositions] = useState16(initialCompositions);
+  const [folders, setFolders] = useState17([]);
+  const [canvasContent, setCanvasContent] = useState17(initialCanvasContent);
+  const [compositions, setCompositions] = useState17(initialCompositions);
   const currentcompositionsRef = useRef18(compositions);
   const updateCompositions = useCallback14((updateComps) => {
     setCompositions((comps) => {
@@ -6111,7 +6300,7 @@ var CompositionManagerProvider = ({
       getCompositions: () => currentcompositionsRef.current
     };
   }, []);
-  const compositionManagerSetters = useMemo26(() => {
+  const compositionManagerSetters = useMemo28(() => {
     return {
       registerComposition,
       unregisterComposition,
@@ -6127,7 +6316,7 @@ var CompositionManagerProvider = ({
     unregisterFolder,
     onlyRenderComposition
   ]);
-  const compositionManagerContextValue = useMemo26(() => {
+  const compositionManagerContextValue = useMemo28(() => {
     return {
       compositions,
       folders,
@@ -6201,32 +6390,11 @@ var makeDefaultPreviewCSS = (scope, backgroundColor) => {
     }
   `;
 };
-var getEffectiveVisualModeValue = ({
-  codeValue,
-  runtimeValue,
-  dragOverrideValue,
-  defaultValue,
-  shouldResortToDefaultValueIfUndefined = false
-}) => {
-  if (dragOverrideValue !== undefined) {
-    return dragOverrideValue;
-  }
-  if (!codeValue) {
-    return runtimeValue;
-  }
-  if (!codeValue.canUpdate) {
-    return runtimeValue;
-  }
-  if (codeValue.codeValue === undefined && shouldResortToDefaultValueIfUndefined) {
-    return defaultValue;
-  }
-  return codeValue.codeValue;
-};
 var REMOTION_STUDIO_CONTAINER_ELEMENT = "__remotion-studio-container";
 var getPreviewDomElement = () => {
   return document.getElementById(REMOTION_STUDIO_CONTAINER_ELEMENT);
 };
-var MaxMediaCacheSizeContext = React25.createContext(null);
+var MaxMediaCacheSizeContext = React26.createContext(null);
 var Root = null;
 var listeners = [];
 var getRoot = () => {
@@ -6246,7 +6414,7 @@ var waitForRoot = (fn) => {
 };
 var MediaEnabledContext = createContext20(null);
 var useVideoEnabled = () => {
-  const context = useContext30(MediaEnabledContext);
+  const context = useContext31(MediaEnabledContext);
   if (!context) {
     return window.remotion_videoEnabled;
   }
@@ -6256,7 +6424,7 @@ var useVideoEnabled = () => {
   return context.videoEnabled;
 };
 var useAudioEnabled = () => {
-  const context = useContext30(MediaEnabledContext);
+  const context = useContext31(MediaEnabledContext);
   if (!context) {
     return window.remotion_audioEnabled;
   }
@@ -6270,7 +6438,7 @@ var MediaEnabledProvider = ({
   videoEnabled,
   audioEnabled
 }) => {
-  const value = useMemo27(() => ({ videoEnabled, audioEnabled }), [videoEnabled, audioEnabled]);
+  const value = useMemo29(() => ({ videoEnabled, audioEnabled }), [videoEnabled, audioEnabled]);
   return /* @__PURE__ */ jsx26(MediaEnabledContext.Provider, {
     value,
     children
@@ -6286,13 +6454,13 @@ var RemotionRootContexts = ({
   frameState,
   visualModeEnabled
 }) => {
-  const nonceContext = useMemo28(() => {
+  const nonceContext = useMemo30(() => {
     let counter = 0;
     return {
       getNonce: () => counter++
     };
   }, []);
-  const logging = useMemo28(() => {
+  const logging = useMemo30(() => {
     return { logLevel, mountTime: Date.now() };
   }, [logLevel]);
   return /* @__PURE__ */ jsx27(LogLevelContext.Provider, {
@@ -6491,7 +6659,7 @@ var resolveVideoConfigOrCatch = (params) => {
     };
   }
 };
-var SequenceStackTracesUpdateContext = React27.createContext(() => {});
+var SequenceStackTracesUpdateContext = React28.createContext(() => {});
 var getEnvVariables = () => {
   if (getRemotionEnvironment().isRendering) {
     const param = window.remotion_envVariables;
@@ -6517,7 +6685,7 @@ var setupEnvVariables = () => {
     window.process.env[key] = env[key];
   });
 };
-var CurrentScaleContext = React28.createContext(null);
+var CurrentScaleContext = React29.createContext(null);
 var PreviewSizeContext = createContext21({
   setSize: () => {
     return;
@@ -6541,75 +6709,6 @@ var calculateScale = ({
   }
   return Number(previewSize);
 };
-var useSchema = (schema, currentValue) => {
-  const env = useRemotionEnvironment();
-  const earlyReturn = useMemo29(() => {
-    if (!env.isStudio || env.isReadOnlyStudio) {
-      return {
-        controls: undefined,
-        values: currentValue ?? {}
-      };
-    }
-    return;
-  }, [env.isStudio, env.isReadOnlyStudio, currentValue]);
-  if (earlyReturn) {
-    return earlyReturn;
-  }
-  const [overrideId] = useState17(() => String(Math.random()));
-  const {
-    visualModeEnabled,
-    dragOverrides: overrides,
-    codeValues
-  } = useContext31(VisualModeOverridesContext);
-  const controls = useMemo29(() => {
-    if (!visualModeEnabled) {
-      return;
-    }
-    if (schema === null || currentValue === null) {
-      return;
-    }
-    return {
-      schema,
-      currentValue,
-      overrideId
-    };
-  }, [schema, currentValue, overrideId, visualModeEnabled]);
-  return useMemo29(() => {
-    if (controls === undefined || currentValue === null || schema === null || !visualModeEnabled) {
-      return {
-        controls: undefined,
-        values: currentValue ?? {}
-      };
-    }
-    const overrideValues = overrides[overrideId] ?? {};
-    const propStatus = codeValues[overrideId];
-    const currentValueKeys = Object.keys(currentValue);
-    const keysToUpdate = [...new Set(currentValueKeys)];
-    const merged = {};
-    for (const key of keysToUpdate) {
-      const codeValueStatus = propStatus?.[key] ?? null;
-      merged[key] = getEffectiveVisualModeValue({
-        codeValue: codeValueStatus,
-        runtimeValue: currentValue[key],
-        dragOverrideValue: overrideValues[key],
-        defaultValue: schema[key]?.default,
-        shouldResortToDefaultValueIfUndefined: false
-      });
-    }
-    return {
-      controls,
-      values: merged
-    };
-  }, [
-    controls,
-    currentValue,
-    overrideId,
-    overrides,
-    codeValues,
-    schema,
-    visualModeEnabled
-  ]);
-};
 var useSequenceControlOverride = (key) => {
   const seqContext = useContext32(SequenceContext);
   const { dragOverrides: overrides } = useContext32(VisualModeOverridesContext);
@@ -6655,7 +6754,7 @@ var OffthreadVideoForRendering = ({
   if (!src) {
     throw new TypeError("No `src` was passed to <OffthreadVideo>.");
   }
-  const id = useMemo30(() => `offthreadvideo-${random(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
+  const id = useMemo31(() => `offthreadvideo-${random(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     src,
     sequenceContext?.cumulatedFrom,
     sequenceContext?.relativeFrom,
@@ -6710,14 +6809,14 @@ var OffthreadVideoForRendering = ({
     sequenceContext?.relativeFrom,
     audioStreamIndex
   ]);
-  const currentTime = useMemo30(() => {
+  const currentTime = useMemo31(() => {
     return getExpectedMediaFrameUncorrected({
       frame,
       playbackRate: playbackRate || 1,
       startFrom: -mediaStartsAt
     }) / videoConfig.fps;
   }, [frame, mediaStartsAt, playbackRate, videoConfig.fps]);
-  const actualSrc = useMemo30(() => {
+  const actualSrc = useMemo31(() => {
     return getOffthreadVideoSource({
       src,
       currentTime,
@@ -6805,7 +6904,7 @@ var OffthreadVideoForRendering = ({
       cancelRender("Failed to load image with src " + imageSrc);
     }
   }, [imageSrc, onError]);
-  const className = useMemo30(() => {
+  const className = useMemo31(() => {
     return [OBJECTFIT_CONTAIN_CLASS_NAME, props2.className].filter(truthy).join(" ");
   }, [props2.className]);
   const onImageFrame = useCallback15((img) => {
@@ -6859,7 +6958,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     throw new Error("SharedAudioContext not found");
   }
   const videoRef = useRef19(null);
-  const sharedSource = useMemo31(() => {
+  const sharedSource = useMemo32(() => {
     if (!context.audioContext) {
       return null;
     }
@@ -6868,7 +6967,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
       ref: videoRef
     });
   }, [context.audioContext]);
-  const effectToUse = React30.useInsertionEffect ?? React30.useLayoutEffect;
+  const effectToUse = React31.useInsertionEffect ?? React31.useLayoutEffect;
   effectToUse(() => {
     return () => {
       requestAnimationFrame(() => {
@@ -7045,7 +7144,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
       current.preload = "auto";
     }
   }, []);
-  const actualStyle = useMemo31(() => {
+  const actualStyle = useMemo32(() => {
     return {
       ...style,
       opacity: isSequenceHidden ? 0 : style?.opacity ?? 1
@@ -7226,68 +7325,6 @@ var OffthreadVideo = ({
 };
 addSequenceStackTraces(OffthreadVideo);
 var WATCH_REMOTION_STATIC_FILES = "remotion_staticFilesChanged";
-var getNestedValue = (obj, key) => {
-  const parts = key.split(".");
-  let current = obj;
-  for (const part of parts) {
-    if (current === null || current === undefined || typeof current !== "object")
-      return;
-    current = current[part];
-  }
-  return current;
-};
-var mergeValues = (props2, values, schemaKeys) => {
-  const merged = { ...props2 };
-  for (const key of schemaKeys) {
-    const value = values[key];
-    const parts = key.split(".");
-    if (parts.length === 1) {
-      merged[key] = value;
-      continue;
-    }
-    let current = merged;
-    for (let i = 0;i < parts.length - 1; i++) {
-      const part = parts[i];
-      if (typeof current[part] === "object" && current[part] !== null) {
-        current[part] = { ...current[part] };
-      } else {
-        current[part] = {};
-      }
-      current = current[part];
-    }
-    current[parts[parts.length - 1]] = value;
-  }
-  return merged;
-};
-var wrapInSchema = (Component, schema) => {
-  const schemaKeys = Object.keys(schema);
-  const Wrapped = forwardRef10((props2, ref) => {
-    const env = useRemotionEnvironment();
-    if (!env.isStudio || env.isReadOnlyStudio || env.isRendering || !process.env.EXPERIMENTAL_VISUAL_MODE_ENABLED) {
-      return React32.createElement(Component, {
-        ...props2,
-        controls: null,
-        ref
-      });
-    }
-    const schemaInput = useMemo32(() => {
-      const input = {};
-      for (const key of schemaKeys) {
-        input[key] = getNestedValue(props2, key);
-      }
-      return input;
-    }, schemaKeys.map((key) => getNestedValue(props2, key)));
-    const { controls, values } = useSchema(schema, schemaInput);
-    const mergedProps = mergeValues(props2, values, schemaKeys);
-    return React32.createElement(Component, {
-      ...mergedProps,
-      controls,
-      ref
-    });
-  });
-  Wrapped.displayName = `wrapInSchema(${Component.displayName || Component.name || "Component"})`;
-  return Wrapped;
-};
 function useRemotionContexts() {
   const compositionManagerCtx = React33.useContext(CompositionManager);
   const timelineContext = React33.useContext(TimelineContext);
@@ -7536,7 +7573,7 @@ var SeriesSequenceRefForwardingFunction = ({ children }, _ref) => {
     children
   });
 };
-var SeriesSequence = forwardRef11(SeriesSequenceRefForwardingFunction);
+var SeriesSequence = forwardRef10(SeriesSequenceRefForwardingFunction);
 var Series = (props2) => {
   const childrenValue = useMemo34(() => {
     let startFrame = 0;
@@ -7592,19 +7629,17 @@ var Series = (props2) => {
       });
     });
   }, [props2.children]);
-  if (ENABLE_V5_BREAKING_CHANGES) {
-    return /* @__PURE__ */ jsx33(IsInsideSeriesContainer, {
-      children: /* @__PURE__ */ jsx33(Sequence, {
-        ...props2,
-        children: childrenValue
-      })
-    });
-  }
   return /* @__PURE__ */ jsx33(IsInsideSeriesContainer, {
-    children: childrenValue
+    children: /* @__PURE__ */ jsx33(Sequence, {
+      layout: "none",
+      name: "<Series>",
+      ...props2,
+      children: childrenValue
+    })
   });
 };
 Series.Sequence = SeriesSequence;
+addSequenceStackTraces(Series);
 addSequenceStackTraces(SeriesSequence);
 var validateSpringDuration = (dur) => {
   if (typeof dur === "undefined") {
@@ -8260,7 +8295,7 @@ var VideoForRenderingForwardFunction = ({
     ...props2
   });
 };
-var VideoForRendering = forwardRef12(VideoForRenderingForwardFunction);
+var VideoForRendering = forwardRef11(VideoForRenderingForwardFunction);
 var VideoForwardingFunction = (props2, ref) => {
   const {
     startFrom,
@@ -8365,7 +8400,7 @@ var VideoForwardingFunction = (props2, ref) => {
     onAutoPlayError: onAutoPlayError ?? undefined
   });
 };
-var Html5Video = forwardRef13(VideoForwardingFunction);
+var Html5Video = forwardRef12(VideoForwardingFunction);
 addSequenceStackTraces(Html5Video);
 checkMultipleRemotionVersions();
 var proxyObj = {};
@@ -8390,6 +8425,7 @@ var Config = new Proxy(proxyObj, {
 });
 Sequence.displayName = "Sequence";
 addSequenceStackTraces(Sequence);
+addSequenceStackTraces(Composition);
 
 // src/components/team/TeamCards.tsx
 import { jsx as jsx36, jsxs as jsxs3 } from "react/jsx-runtime";
@@ -10148,7 +10184,7 @@ var getDefaultConfig = () => {
 var twMerge = /* @__PURE__ */ createTailwindMerge(getDefaultConfig);
 
 // ../design/dist/esm/index.mjs
-import React6, { useEffect as useEffect18, useMemo as useMemo39, useState as useState20 } from "react";
+import React7, { useEffect as useEffect18, useMemo as useMemo39, useState as useState20 } from "react";
 
 // ../paths/dist/esm/index.mjs
 var cutLInstruction = ({
@@ -12914,7 +12950,7 @@ var PathInternals = {
 };
 
 // ../shapes/dist/esm/index.mjs
-import React4, { useMemo as useMemo38 } from "react";
+import React2, { useMemo as useMemo38 } from "react";
 import { version } from "react-dom";
 import { jsx as jsx40, jsxs as jsxs5 } from "react/jsx-runtime";
 import { jsx as jsx210 } from "react/jsx-runtime";
@@ -12983,7 +13019,7 @@ var RenderSvg = ({
           }
           const prevX = prevInstruction.x;
           const prevY = prevInstruction.y;
-          return /* @__PURE__ */ jsxs5(React4.Fragment, {
+          return /* @__PURE__ */ jsxs5(React2.Fragment, {
             children: [
               /* @__PURE__ */ jsx40("path", {
                 d: `M ${prevX} ${prevY} ${i.cp1x} ${i.cp1y}`,
@@ -14505,47 +14541,47 @@ import * as ReactDOM4 from "react-dom";
 import React9 from "react";
 import * as React62 from "react";
 import { jsx as jsx122 } from "react/jsx-runtime";
-import * as React7 from "react";
-import * as React82 from "react";
+import * as React72 from "react";
+import * as React8 from "react";
 import { Fragment as Fragment3, jsx as jsx132 } from "react/jsx-runtime";
 import { jsx as jsx142 } from "react/jsx-runtime";
 import * as React102 from "react";
 import { jsx as jsx152 } from "react/jsx-runtime";
-import * as React142 from "react";
-import * as React112 from "react";
+import * as React14 from "react";
+import * as React11 from "react";
 import * as ReactDOM from "react-dom";
 import { jsx as jsx162 } from "react/jsx-runtime";
-import * as React12 from "react";
-import * as React13 from "react";
+import * as React122 from "react";
+import * as React132 from "react";
 import { jsx as jsx172 } from "react/jsx-runtime";
-import * as React152 from "react";
+import * as React15 from "react";
 import * as React162 from "react";
 import { jsx as jsx182 } from "react/jsx-runtime";
-import * as React18 from "react";
+import * as React182 from "react";
 import * as React172 from "react";
 import * as React22 from "react";
-import * as React19 from "react";
+import * as React192 from "react";
 import { useLayoutEffect as useLayoutEffect32, useEffect as useEffect82 } from "react";
 import * as ReactDOM2 from "react-dom";
-import * as React202 from "react";
+import * as React20 from "react";
 import { jsx as jsx192 } from "react/jsx-runtime";
 import * as React21 from "react";
 import { jsx as jsx202 } from "react/jsx-runtime";
-import * as React23 from "react";
+import * as React232 from "react";
 import ReactDOM3 from "react-dom";
 import { jsx as jsx213 } from "react/jsx-runtime";
-import * as React242 from "react";
+import * as React24 from "react";
 import * as React252 from "react";
-import * as React26 from "react";
+import * as React262 from "react";
 import { jsx as jsx223 } from "react/jsx-runtime";
 import * as React332 from "react";
-import * as React29 from "react";
+import * as React292 from "react";
 import { useState as useState112 } from "react";
-import * as React272 from "react";
+import * as React27 from "react";
 import * as React282 from "react";
-import * as React322 from "react";
-import * as React31 from "react";
-import * as React302 from "react";
+import * as React32 from "react";
+import * as React312 from "react";
+import * as React30 from "react";
 import { Fragment as Fragment62, jsx as jsx232, jsxs as jsxs42 } from "react/jsx-runtime";
 import { forwardRef as forwardRef132, createElement as createElement7 } from "react";
 import { forwardRef as forwardRef122, createElement as createElement6 } from "react";
@@ -14600,7 +14636,7 @@ var getChildNodeFrom = (htmlElement) => {
   return childNode;
 };
 var useHoverTransforms = (ref, disabled) => {
-  const [state, setState] = React6.useState({
+  const [state, setState] = React7.useState({
     progress: 0,
     isActive: false
   });
@@ -14612,7 +14648,7 @@ var useHoverTransforms = (ref, disabled) => {
       eventTarget.dispatchEvent(new Event("enabled"));
     }
   }, [disabled, eventTarget]);
-  React6.useEffect(() => {
+  React7.useEffect(() => {
     const element = ref.current;
     if (!element)
       return;
@@ -14687,8 +14723,8 @@ var useHoverTransforms = (ref, disabled) => {
   return state;
 };
 var useClickTransforms = (ref) => {
-  const [hoverProgress, setHoverProgress] = React6.useState(0);
-  React6.useEffect(() => {
+  const [hoverProgress, setHoverProgress] = React7.useState(0);
+  React7.useEffect(() => {
     const element = getChildNodeFrom(ref.current);
     if (!element) {
       return;
@@ -15240,45 +15276,45 @@ function composeRefs(...refs) {
   return (node) => refs.forEach((ref) => setRef(ref, node));
 }
 function useComposedRefs(...refs) {
-  return React7.useCallback(composeRefs(...refs), refs);
+  return React72.useCallback(composeRefs(...refs), refs);
 }
-var Slot = React82.forwardRef((props, forwardedRef) => {
+var Slot = React8.forwardRef((props, forwardedRef) => {
   const { children, ...slotProps } = props;
-  const childrenArray = React82.Children.toArray(children);
+  const childrenArray = React8.Children.toArray(children);
   const slottable = childrenArray.find(isSlottable);
   if (slottable) {
     const newElement = slottable.props.children;
     const newChildren = childrenArray.map((child) => {
       if (child === slottable) {
-        if (React82.Children.count(newElement) > 1)
-          return React82.Children.only(null);
-        return React82.isValidElement(newElement) ? newElement.props.children : null;
+        if (React8.Children.count(newElement) > 1)
+          return React8.Children.only(null);
+        return React8.isValidElement(newElement) ? newElement.props.children : null;
       } else {
         return child;
       }
     });
-    return /* @__PURE__ */ jsx132(SlotClone, { ...slotProps, ref: forwardedRef, children: React82.isValidElement(newElement) ? React82.cloneElement(newElement, undefined, newChildren) : null });
+    return /* @__PURE__ */ jsx132(SlotClone, { ...slotProps, ref: forwardedRef, children: React8.isValidElement(newElement) ? React8.cloneElement(newElement, undefined, newChildren) : null });
   }
   return /* @__PURE__ */ jsx132(SlotClone, { ...slotProps, ref: forwardedRef, children });
 });
 Slot.displayName = "Slot";
-var SlotClone = React82.forwardRef((props, forwardedRef) => {
+var SlotClone = React8.forwardRef((props, forwardedRef) => {
   const { children, ...slotProps } = props;
-  if (React82.isValidElement(children)) {
+  if (React8.isValidElement(children)) {
     const childrenRef = getElementRef(children);
-    return React82.cloneElement(children, {
+    return React8.cloneElement(children, {
       ...mergeProps(slotProps, children.props),
       ref: forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef
     });
   }
-  return React82.Children.count(children) > 1 ? React82.Children.only(null) : null;
+  return React8.Children.count(children) > 1 ? React8.Children.only(null) : null;
 });
 SlotClone.displayName = "SlotClone";
 var Slottable = ({ children }) => {
   return /* @__PURE__ */ jsx132(Fragment3, { children });
 };
 function isSlottable(child) {
-  return React82.isValidElement(child) && child.type === Slottable;
+  return React8.isValidElement(child) && child.type === Slottable;
 }
 function mergeProps(slotProps, childProps) {
   const overrideProps = { ...childProps };
@@ -15392,7 +15428,7 @@ var NODES = [
   "ul"
 ];
 var Primitive = NODES.reduce((primitive, node) => {
-  const Node2 = React112.forwardRef((props, forwardedRef) => {
+  const Node2 = React11.forwardRef((props, forwardedRef) => {
     const { asChild, ...primitiveProps } = props;
     const Comp = asChild ? Slot : node;
     if (typeof window !== "undefined") {
@@ -15408,15 +15444,15 @@ function dispatchDiscreteCustomEvent(target, event) {
     ReactDOM.flushSync(() => target.dispatchEvent(event));
 }
 function useCallbackRef(callback) {
-  const callbackRef = React12.useRef(callback);
-  React12.useEffect(() => {
+  const callbackRef = React122.useRef(callback);
+  React122.useEffect(() => {
     callbackRef.current = callback;
   });
-  return React12.useMemo(() => (...args) => callbackRef.current?.(...args), []);
+  return React122.useMemo(() => (...args) => callbackRef.current?.(...args), []);
 }
 function useEscapeKeydown(onEscapeKeyDownProp, ownerDocument = globalThis?.document) {
   const onEscapeKeyDown = useCallbackRef(onEscapeKeyDownProp);
-  React13.useEffect(() => {
+  React132.useEffect(() => {
     const handleKeyDown = (event) => {
       if (event.key === "Escape") {
         onEscapeKeyDown(event);
@@ -15431,12 +15467,12 @@ var CONTEXT_UPDATE = "dismissableLayer.update";
 var POINTER_DOWN_OUTSIDE = "dismissableLayer.pointerDownOutside";
 var FOCUS_OUTSIDE = "dismissableLayer.focusOutside";
 var originalBodyPointerEvents;
-var DismissableLayerContext = React142.createContext({
+var DismissableLayerContext = React14.createContext({
   layers: /* @__PURE__ */ new Set,
   layersWithOutsidePointerEventsDisabled: /* @__PURE__ */ new Set,
   branches: /* @__PURE__ */ new Set
 });
-var DismissableLayer = React142.forwardRef((props, forwardedRef) => {
+var DismissableLayer = React14.forwardRef((props, forwardedRef) => {
   const {
     disableOutsidePointerEvents = false,
     onEscapeKeyDown,
@@ -15446,10 +15482,10 @@ var DismissableLayer = React142.forwardRef((props, forwardedRef) => {
     onDismiss,
     ...layerProps
   } = props;
-  const context = React142.useContext(DismissableLayerContext);
-  const [node, setNode] = React142.useState(null);
+  const context = React14.useContext(DismissableLayerContext);
+  const [node, setNode] = React14.useState(null);
   const ownerDocument = node?.ownerDocument ?? globalThis?.document;
-  const [, force] = React142.useState({});
+  const [, force] = React14.useState({});
   const composedRefs = useComposedRefs(forwardedRef, (node2) => setNode(node2));
   const layers = Array.from(context.layers);
   const [highestLayerWithOutsidePointerEventsDisabled] = [...context.layersWithOutsidePointerEventsDisabled].slice(-1);
@@ -15487,7 +15523,7 @@ var DismissableLayer = React142.forwardRef((props, forwardedRef) => {
       onDismiss();
     }
   }, ownerDocument);
-  React142.useEffect(() => {
+  React14.useEffect(() => {
     if (!node)
       return;
     if (disableOutsidePointerEvents) {
@@ -15505,7 +15541,7 @@ var DismissableLayer = React142.forwardRef((props, forwardedRef) => {
       }
     };
   }, [node, ownerDocument, disableOutsidePointerEvents, context]);
-  React142.useEffect(() => {
+  React14.useEffect(() => {
     return () => {
       if (!node)
         return;
@@ -15514,7 +15550,7 @@ var DismissableLayer = React142.forwardRef((props, forwardedRef) => {
       dispatchUpdate();
     };
   }, [node, context]);
-  React142.useEffect(() => {
+  React14.useEffect(() => {
     const handleUpdate = () => force({});
     document.addEventListener(CONTEXT_UPDATE, handleUpdate);
     return () => document.removeEventListener(CONTEXT_UPDATE, handleUpdate);
@@ -15533,11 +15569,11 @@ var DismissableLayer = React142.forwardRef((props, forwardedRef) => {
 });
 DismissableLayer.displayName = DISMISSABLE_LAYER_NAME;
 var BRANCH_NAME = "DismissableLayerBranch";
-var DismissableLayerBranch = React142.forwardRef((props, forwardedRef) => {
-  const context = React142.useContext(DismissableLayerContext);
-  const ref = React142.useRef(null);
+var DismissableLayerBranch = React14.forwardRef((props, forwardedRef) => {
+  const context = React14.useContext(DismissableLayerContext);
+  const ref = React14.useRef(null);
   const composedRefs = useComposedRefs(forwardedRef, ref);
-  React142.useEffect(() => {
+  React14.useEffect(() => {
     const node = ref.current;
     if (node) {
       context.branches.add(node);
@@ -15551,9 +15587,9 @@ var DismissableLayerBranch = React142.forwardRef((props, forwardedRef) => {
 DismissableLayerBranch.displayName = BRANCH_NAME;
 function usePointerDownOutside(onPointerDownOutside, ownerDocument = globalThis?.document) {
   const handlePointerDownOutside = useCallbackRef(onPointerDownOutside);
-  const isPointerInsideReactTreeRef = React142.useRef(false);
-  const handleClickRef = React142.useRef(() => {});
-  React142.useEffect(() => {
+  const isPointerInsideReactTreeRef = React14.useRef(false);
+  const handleClickRef = React14.useRef(() => {});
+  React14.useEffect(() => {
     const handlePointerDown = (event) => {
       if (event.target && !isPointerInsideReactTreeRef.current) {
         let handleAndDispatchPointerDownOutsideEvent2 = function() {
@@ -15588,8 +15624,8 @@ function usePointerDownOutside(onPointerDownOutside, ownerDocument = globalThis?
 }
 function useFocusOutside(onFocusOutside, ownerDocument = globalThis?.document) {
   const handleFocusOutside = useCallbackRef(onFocusOutside);
-  const isFocusInsideReactTreeRef = React142.useRef(false);
-  React142.useEffect(() => {
+  const isFocusInsideReactTreeRef = React14.useRef(false);
+  React14.useEffect(() => {
     const handleFocus = (event) => {
       if (event.target && !isFocusInsideReactTreeRef.current) {
         const eventDetail = { originalEvent: event };
@@ -15623,7 +15659,7 @@ function handleAndDispatchCustomEvent(name, handler, detail, { discrete }) {
 }
 var count = 0;
 function useFocusGuards() {
-  React152.useEffect(() => {
+  React15.useEffect(() => {
     const edgeGuards = document.querySelectorAll("[data-radix-focus-guard]");
     document.body.insertAdjacentElement("afterbegin", edgeGuards[0] ?? createFocusGuard());
     document.body.insertAdjacentElement("beforeend", edgeGuards[1] ?? createFocusGuard());
@@ -15859,12 +15895,12 @@ function removeLinks(items) {
   return items.filter((item) => item.tagName !== "A");
 }
 var useLayoutEffect22 = Boolean(globalThis?.document) ? React172.useLayoutEffect : () => {};
-var useReactId = React18["useId".toString()] || (() => {
+var useReactId = React182["useId".toString()] || (() => {
   return;
 });
 var count2 = 0;
 function useId(deterministicId) {
-  const [id, setId] = React18.useState(useReactId());
+  const [id, setId] = React182.useState(useReactId());
   useLayoutEffect22(() => {
     if (!deterministicId)
       setId((reactId) => reactId ?? String(count2++));
@@ -17443,7 +17479,7 @@ function roundByDPR(element, value) {
   return Math.round(value * dpr) / dpr;
 }
 function useLatestRef(value) {
-  const ref = React19.useRef(value);
+  const ref = React192.useRef(value);
   index(() => {
     ref.current = value;
   });
@@ -17466,7 +17502,7 @@ function useFloating(options) {
     whileElementsMounted,
     open
   } = options;
-  const [data, setData] = React19.useState({
+  const [data, setData] = React192.useState({
     x: 0,
     y: 0,
     strategy,
@@ -17474,19 +17510,19 @@ function useFloating(options) {
     middlewareData: {},
     isPositioned: false
   });
-  const [latestMiddleware, setLatestMiddleware] = React19.useState(middleware);
+  const [latestMiddleware, setLatestMiddleware] = React192.useState(middleware);
   if (!deepEqual(latestMiddleware, middleware)) {
     setLatestMiddleware(middleware);
   }
-  const [_reference, _setReference] = React19.useState(null);
-  const [_floating, _setFloating] = React19.useState(null);
-  const setReference = React19.useCallback((node) => {
+  const [_reference, _setReference] = React192.useState(null);
+  const [_floating, _setFloating] = React192.useState(null);
+  const setReference = React192.useCallback((node) => {
     if (node !== referenceRef.current) {
       referenceRef.current = node;
       _setReference(node);
     }
   }, []);
-  const setFloating = React19.useCallback((node) => {
+  const setFloating = React192.useCallback((node) => {
     if (node !== floatingRef.current) {
       floatingRef.current = node;
       _setFloating(node);
@@ -17494,13 +17530,13 @@ function useFloating(options) {
   }, []);
   const referenceEl = externalReference || _reference;
   const floatingEl = externalFloating || _floating;
-  const referenceRef = React19.useRef(null);
-  const floatingRef = React19.useRef(null);
-  const dataRef = React19.useRef(data);
+  const referenceRef = React192.useRef(null);
+  const floatingRef = React192.useRef(null);
+  const dataRef = React192.useRef(data);
   const hasWhileElementsMounted = whileElementsMounted != null;
   const whileElementsMountedRef = useLatestRef(whileElementsMounted);
   const platformRef = useLatestRef(platform2);
-  const update = React19.useCallback(() => {
+  const update = React192.useCallback(() => {
     if (!referenceRef.current || !floatingRef.current) {
       return;
     }
@@ -17534,7 +17570,7 @@ function useFloating(options) {
       }));
     }
   }, [open]);
-  const isMountedRef = React19.useRef(false);
+  const isMountedRef = React192.useRef(false);
   index(() => {
     isMountedRef.current = true;
     return () => {
@@ -17553,17 +17589,17 @@ function useFloating(options) {
       update();
     }
   }, [referenceEl, floatingEl, update, whileElementsMountedRef, hasWhileElementsMounted]);
-  const refs = React19.useMemo(() => ({
+  const refs = React192.useMemo(() => ({
     reference: referenceRef,
     floating: floatingRef,
     setReference,
     setFloating
   }), [setReference, setFloating]);
-  const elements = React19.useMemo(() => ({
+  const elements = React192.useMemo(() => ({
     reference: referenceEl,
     floating: floatingEl
   }), [referenceEl, floatingEl]);
-  const floatingStyles = React19.useMemo(() => {
+  const floatingStyles = React192.useMemo(() => {
     const initialStyles = {
       position: strategy,
       left: 0,
@@ -17589,7 +17625,7 @@ function useFloating(options) {
       top: y
     };
   }, [strategy, transform, elements.floating, data.x, data.y]);
-  return React19.useMemo(() => ({
+  return React192.useMemo(() => ({
     ...data,
     update,
     refs,
@@ -17657,7 +17693,7 @@ var arrow3 = (options, deps) => ({
   options: [options, deps]
 });
 var NAME = "Arrow";
-var Arrow = React202.forwardRef((props, forwardedRef) => {
+var Arrow = React20.forwardRef((props, forwardedRef) => {
   const { children, width = 10, height = 5, ...arrowProps } = props;
   return /* @__PURE__ */ jsx192(Primitive.svg, {
     ...arrowProps,
@@ -17938,9 +17974,9 @@ var Anchor = PopperAnchor;
 var Content = PopperContent;
 var Arrow2 = PopperArrow;
 var PORTAL_NAME = "Portal";
-var Portal = React23.forwardRef((props, forwardedRef) => {
+var Portal = React232.forwardRef((props, forwardedRef) => {
   const { container: containerProp, ...portalProps } = props;
-  const [mounted, setMounted] = React23.useState(false);
+  const [mounted, setMounted] = React232.useState(false);
   useLayoutEffect22(() => setMounted(true), []);
   const container22 = containerProp || mounted && globalThis?.document?.body;
   return container22 ? ReactDOM3.createPortal(/* @__PURE__ */ jsx213(Primitive.div, { ...portalProps, ref: forwardedRef }), container22) : null;
@@ -17955,7 +17991,7 @@ function useControllableState({
   const isControlled = prop !== undefined;
   const value = isControlled ? prop : uncontrolledProp;
   const handleChange = useCallbackRef(onChange);
-  const setValue = React242.useCallback((nextValue) => {
+  const setValue = React24.useCallback((nextValue) => {
     if (isControlled) {
       const setter = nextValue;
       const value2 = typeof nextValue === "function" ? setter(prop) : nextValue;
@@ -17971,11 +18007,11 @@ function useUncontrolledState({
   defaultProp,
   onChange
 }) {
-  const uncontrolledState = React242.useState(defaultProp);
+  const uncontrolledState = React24.useState(defaultProp);
   const [value] = uncontrolledState;
-  const prevValueRef = React242.useRef(value);
+  const prevValueRef = React24.useRef(value);
   const handleChange = useCallbackRef(onChange);
-  React242.useEffect(() => {
+  React24.useEffect(() => {
     if (prevValueRef.current !== value) {
       handleChange(value);
       prevValueRef.current = value;
@@ -17994,7 +18030,7 @@ function usePrevious(value) {
   }, [value]);
 }
 var NAME2 = "VisuallyHidden";
-var VisuallyHidden = React26.forwardRef((props, forwardedRef) => {
+var VisuallyHidden = React262.forwardRef((props, forwardedRef) => {
   return /* @__PURE__ */ jsx223(Primitive.span, {
     ...props,
     ref: forwardedRef,
@@ -18202,7 +18238,7 @@ function useCallbackRef2(initialValue, callback) {
   ref.callback = callback;
   return ref.facade;
 }
-var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React272.useLayoutEffect : React272.useEffect;
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React27.useLayoutEffect : React27.useEffect;
 var currentValues = new WeakMap;
 function useMergeRefs(refs, defaultValue) {
   var callbackRef = useCallbackRef2(defaultValue || null, function(newValue) {
@@ -18335,9 +18371,9 @@ var effectCar = createSidecarMedium();
 var nothing = function() {
   return;
 };
-var RemoveScroll = React29.forwardRef(function(props, parentRef) {
-  var ref = React29.useRef(null);
-  var _a = React29.useState({
+var RemoveScroll = React292.forwardRef(function(props, parentRef) {
+  var ref = React292.useRef(null);
+  var _a = React292.useState({
     onScrollCapture: nothing,
     onWheelCapture: nothing,
     onTouchMoveCapture: nothing
@@ -18346,7 +18382,7 @@ var RemoveScroll = React29.forwardRef(function(props, parentRef) {
   var SideCar2 = sideCar;
   var containerRef = useMergeRefs([ref, parentRef]);
   var containerProps = __assign(__assign({}, rest), callbacks);
-  return React29.createElement(React29.Fragment, null, enabled && React29.createElement(SideCar2, { sideCar: effectCar, removeScrollBar, shards, noIsolation, inert, setCallbacks, allowPinchZoom: !!allowPinchZoom, lockRef: ref, gapMode }), forwardProps ? React29.cloneElement(React29.Children.only(children), __assign(__assign({}, containerProps), { ref: containerRef })) : React29.createElement(Container, __assign({}, containerProps, { className, ref: containerRef }), children));
+  return React292.createElement(React292.Fragment, null, enabled && React292.createElement(SideCar2, { sideCar: effectCar, removeScrollBar, shards, noIsolation, inert, setCallbacks, allowPinchZoom: !!allowPinchZoom, lockRef: ref, gapMode }), forwardProps ? React292.cloneElement(React292.Children.only(children), __assign(__assign({}, containerProps), { ref: containerRef })) : React292.createElement(Container, __assign({}, containerProps, { className, ref: containerRef }), children));
 });
 RemoveScroll.defaultProps = {
   enabled: true,
@@ -18414,7 +18450,7 @@ var stylesheetSingleton = function() {
 var styleHookSingleton = function() {
   var sheet = stylesheetSingleton();
   return function(styles, isDynamic) {
-    React302.useEffect(function() {
+    React30.useEffect(function() {
       sheet.add(styles);
       return function() {
         sheet.remove();
@@ -18519,7 +18555,7 @@ var getCurrentUseCounter = function() {
   return isFinite(counter) ? counter : 0;
 };
 var useLockAttribute = function() {
-  React31.useEffect(function() {
+  React312.useEffect(function() {
     document.body.setAttribute(lockAttribute, (getCurrentUseCounter() + 1).toString());
     return function() {
       var newCounter = getCurrentUseCounter() - 1;
@@ -18534,10 +18570,10 @@ var useLockAttribute = function() {
 var RemoveScrollBar = function(_a) {
   var { noRelative, noImportant, gapMode: _b } = _a, gapMode = _b === undefined ? "margin" : _b;
   useLockAttribute();
-  var gap = React31.useMemo(function() {
+  var gap = React312.useMemo(function() {
     return getGapWidth(gapMode);
   }, [gapMode]);
-  return React31.createElement(Style, { styles: getStyles(gap, !noRelative, gapMode, !noImportant ? "!important" : "") });
+  return React312.createElement(Style, { styles: getStyles(gap, !noRelative, gapMode, !noImportant ? "!important" : "") });
 };
 var passiveSupported = false;
 if (typeof window !== "undefined") {
@@ -18664,16 +18700,16 @@ var generateStyle = function(id) {
 var idCounter = 0;
 var lockStack = [];
 function RemoveScrollSideCar(props) {
-  var shouldPreventQueue = React322.useRef([]);
-  var touchStartRef = React322.useRef([0, 0]);
-  var activeAxis = React322.useRef();
-  var id = React322.useState(idCounter++)[0];
-  var Style2 = React322.useState(styleSingleton)[0];
-  var lastProps = React322.useRef(props);
-  React322.useEffect(function() {
+  var shouldPreventQueue = React32.useRef([]);
+  var touchStartRef = React32.useRef([0, 0]);
+  var activeAxis = React32.useRef();
+  var id = React32.useState(idCounter++)[0];
+  var Style2 = React32.useState(styleSingleton)[0];
+  var lastProps = React32.useRef(props);
+  React32.useEffect(function() {
     lastProps.current = props;
   }, [props]);
-  React322.useEffect(function() {
+  React32.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);
@@ -18689,7 +18725,7 @@ function RemoveScrollSideCar(props) {
     }
     return;
   }, [props.inert, props.lockRef.current, props.shards]);
-  var shouldCancelEvent = React322.useCallback(function(event, parent) {
+  var shouldCancelEvent = React32.useCallback(function(event, parent) {
     if ("touches" in event && event.touches.length === 2) {
       return !lastProps.current.allowPinchZoom;
     }
@@ -18725,7 +18761,7 @@ function RemoveScrollSideCar(props) {
     var cancelingAxis = activeAxis.current || currentAxis;
     return handleScroll(cancelingAxis, parent, event, cancelingAxis === "h" ? deltaX : deltaY, true);
   }, []);
-  var shouldPrevent = React322.useCallback(function(_event) {
+  var shouldPrevent = React32.useCallback(function(_event) {
     var event = _event;
     if (!lockStack.length || lockStack[lockStack.length - 1] !== Style2) {
       return;
@@ -18752,7 +18788,7 @@ function RemoveScrollSideCar(props) {
       }
     }
   }, []);
-  var shouldCancel = React322.useCallback(function(name, delta, target, should) {
+  var shouldCancel = React32.useCallback(function(name, delta, target, should) {
     var event = { name, delta, target, should, shadowParent: getOutermostShadowParent(target) };
     shouldPreventQueue.current.push(event);
     setTimeout(function() {
@@ -18761,17 +18797,17 @@ function RemoveScrollSideCar(props) {
       });
     }, 1);
   }, []);
-  var scrollTouchStart = React322.useCallback(function(event) {
+  var scrollTouchStart = React32.useCallback(function(event) {
     touchStartRef.current = getTouchXY(event);
     activeAxis.current = undefined;
   }, []);
-  var scrollWheel = React322.useCallback(function(event) {
+  var scrollWheel = React32.useCallback(function(event) {
     shouldCancel(event.type, getDeltaXY(event), event.target, shouldCancelEvent(event, props.lockRef.current));
   }, []);
-  var scrollTouchMove = React322.useCallback(function(event) {
+  var scrollTouchMove = React32.useCallback(function(event) {
     shouldCancel(event.type, getTouchXY(event), event.target, shouldCancelEvent(event, props.lockRef.current));
   }, []);
-  React322.useEffect(function() {
+  React32.useEffect(function() {
     lockStack.push(Style2);
     props.setCallbacks({
       onScrollCapture: scrollWheel,
@@ -18791,7 +18827,7 @@ function RemoveScrollSideCar(props) {
     };
   }, []);
   var { removeScrollBar, inert } = props;
-  return React322.createElement(React322.Fragment, null, inert ? React322.createElement(Style2, { styles: generateStyle(id) }) : null, removeScrollBar ? React322.createElement(RemoveScrollBar, { gapMode: props.gapMode }) : null);
+  return React32.createElement(React32.Fragment, null, inert ? React32.createElement(Style2, { styles: generateStyle(id) }) : null, removeScrollBar ? React32.createElement(RemoveScrollBar, { gapMode: props.gapMode }) : null);
 }
 function getOutermostShadowParent(node) {
   var shadowParent = null;
@@ -19900,7 +19936,7 @@ var Switch = ({ active, onToggle }) => {
     onClick: onToggle,
     children: /* @__PURE__ */ jsx252("div", {
       "data-active": active,
-      className: "h-[20px] w-[20px] box-content left-[4px] top-[4px] transition-all rounded-full bg-white border-2 border-black absolute data-[active=true]:left-[calc(100%-24px)]"
+      className: "h-[20px] w-[20px] left-[4px] top-[4px] transition-all rounded-full bg-white border-2 border-black absolute data-[active=true]:left-[calc(100%-24px)]"
     })
   });
 };
@@ -23265,7 +23301,7 @@ var GitHubStars = () => {
             width: "45px"
           }),
           /* @__PURE__ */ jsx50(StatItemContent, {
-            content: "40k",
+            content: "41k",
             width: "80px",
             fontSize: "2.5rem",
             fontWeight: "bold"
@@ -23478,7 +23514,7 @@ import {
 } from "react";
 import React103, {
   Suspense as Suspense2,
-  forwardRef as forwardRef32,
+  forwardRef as forwardRef31,
   useCallback as useCallback112,
   useContext as useContext52,
   useEffect as useEffect122,
@@ -24306,8 +24342,8 @@ import {
   useRef as useRef142,
   useState as useState142
 } from "react";
-import React132, {
-  forwardRef as forwardRef33,
+import React133, {
+  forwardRef as forwardRef32,
   Suspense as Suspense22,
   useCallback as useCallback132,
   useImperativeHandle as useImperativeHandle32,
@@ -27012,7 +27048,7 @@ var PlayerUI = ({
     })
   });
 };
-var PlayerUI_default = forwardRef32(PlayerUI);
+var PlayerUI_default = forwardRef31(PlayerUI);
 var DEFAULT_VOLUME_PERSISTANCE_KEY = "remotion.volumePreference";
 var persistVolume = (volume, logLevel, volumePersistenceKey) => {
   if (typeof window === "undefined") {
@@ -27066,7 +27102,8 @@ var SharedPlayerContexts = ({
           folderName: null,
           parentFolderName: null,
           schema: null,
-          calculateMetadata: null
+          calculateMetadata: null,
+          stack: null
         }
       ],
       folders: [],
@@ -27516,7 +27553,7 @@ var useThumbnail = () => {
   }, [emitter]);
   return returnValue;
 };
-var reactVersion2 = React132.version.split(".")[0];
+var reactVersion2 = React133.version.split(".")[0];
 if (reactVersion2 === "0") {
   throw new Error(`Version ${reactVersion2} of "react" is not supported by Remotion`);
 }
@@ -27635,7 +27672,7 @@ var ThumbnailUI = ({
     })
   });
 };
-var ThumbnailUI_default = forwardRef33(ThumbnailUI);
+var ThumbnailUI_default = forwardRef32(ThumbnailUI);
 var ThumbnailFn = ({
   frameToDisplay,
   style: style2,
@@ -32865,6 +32902,23 @@ var AudioInner = (props) => {
 };
 var Audio2 = Internals.wrapInSchema(AudioInner, audioSchema);
 Internals.addSequenceStackTraces(Audio2);
+var OBJECT_FIT_CLASS_PATTERN = /\bobject-(contain|cover|fill|none|scale-down)\b/;
+var warnedStyle = false;
+var warnedClassName = false;
+var warnAboutObjectFitInStyleOrClassName = ({
+  style: style2,
+  className: className2,
+  logLevel
+}) => {
+  if (!warnedStyle && style2?.objectFit) {
+    warnedStyle = true;
+    Internals.Log.warn({ logLevel, tag: "@remotion/media" }, "Use the `objectFit` prop instead of the `style` prop.");
+  }
+  if (!warnedClassName && className2 && OBJECT_FIT_CLASS_PATTERN.test(className2)) {
+    warnedClassName = true;
+    Internals.Log.warn({ logLevel, tag: "@remotion/media" }, "Use the `objectFit` prop instead of `object-*` CSS class names.");
+  }
+};
 var {
   useUnsafeVideoConfig: useUnsafeVideoConfig22,
   Timeline: Timeline2,
@@ -32902,7 +32956,8 @@ var VideoForPreviewAssertedShowing = ({
   headless,
   onError,
   credentials,
-  controls
+  controls,
+  objectFit: objectFitProp
 }) => {
   const src = usePreload22(unpreloadedSrc);
   const canvasRef = useRef212(null);
@@ -33099,6 +33154,7 @@ var VideoForPreviewAssertedShowing = ({
     onError,
     credentials
   ]);
+  warnAboutObjectFitInStyleOrClassName({ style: style2, className: className2, logLevel });
   const classNameValue = useMemo412(() => {
     return [Internals.OBJECTFIT_CONTAIN_CLASS_NAME, className2].filter(Internals.truthy).join(" ");
   }, [className2]);
@@ -33144,9 +33200,10 @@ var VideoForPreviewAssertedShowing = ({
   const actualStyle = useMemo412(() => {
     return {
       ...style2,
-      opacity: isSequenceHidden ? 0 : style2?.opacity ?? 1
+      opacity: isSequenceHidden ? 0 : style2?.opacity ?? 1,
+      objectFit: objectFitProp
     };
-  }, [isSequenceHidden, style2]);
+  }, [isSequenceHidden, objectFitProp, style2]);
   if (shouldFallbackToNativeVideo && !disallowFallbackToOffthreadVideo) {
     return /* @__PURE__ */ jsx410(Html5Video, {
       src,
@@ -33230,7 +33287,8 @@ var VideoForRendering2 = ({
   trimBeforeValue,
   headless,
   onError,
-  credentials
+  credentials,
+  objectFit: objectFitProp
 }) => {
   if (!src) {
     throw new TypeError("No `src` was passed to <Video>.");
@@ -33433,9 +33491,16 @@ var VideoForRendering2 = ({
     onError,
     credentials
   ]);
+  warnAboutObjectFitInStyleOrClassName({ style: style2, className: className2, logLevel });
   const classNameValue = useMemo53(() => {
     return [Internals.OBJECTFIT_CONTAIN_CLASS_NAME, className2].filter(Internals.truthy).join(" ");
   }, [className2]);
+  const styleWithObjectFit = useMemo53(() => {
+    return {
+      ...style2,
+      objectFit: objectFitProp
+    };
+  }, [objectFitProp, style2]);
   if (replaceWithOffthreadVideo) {
     const fallback = /* @__PURE__ */ jsx59(Internals.InnerOffthreadVideo, {
       src,
@@ -33445,7 +33510,7 @@ var VideoForRendering2 = ({
       loopVolumeCurveBehavior: loopVolumeCurveBehavior ?? "repeat",
       delayRenderRetries: delayRenderRetries ?? undefined,
       delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined,
-      style: style2,
+      style: styleWithObjectFit,
       allowAmplificationDuringRender: true,
       transparent: fallbackOffthreadVideoProps?.transparent ?? true,
       toneMapped: fallbackOffthreadVideoProps?.toneMapped ?? true,
@@ -33493,7 +33558,7 @@ var VideoForRendering2 = ({
   }
   return /* @__PURE__ */ jsx59("canvas", {
     ref: canvasRef,
-    style: style2,
+    style: styleWithObjectFit,
     className: classNameValue
   });
 };
@@ -33571,7 +33636,8 @@ var InnerVideo = ({
   headless,
   onError,
   credentials,
-  controls
+  controls,
+  objectFit
 }) => {
   const environment = useRemotionEnvironment();
   if (typeof src !== "string") {
@@ -33614,7 +33680,8 @@ var InnerVideo = ({
       trimBeforeValue,
       headless,
       onError,
-      credentials
+      credentials,
+      objectFit
     });
   }
   return /* @__PURE__ */ jsx65(VideoForPreview2, {
@@ -33641,7 +33708,8 @@ var InnerVideo = ({
     headless: headless ?? false,
     onError,
     credentials,
-    controls
+    controls,
+    objectFit
   });
 };
 var VideoInner = ({
@@ -33671,7 +33739,8 @@ var VideoInner = ({
   headless,
   onError,
   credentials,
-  controls
+  controls,
+  objectFit
 }) => {
   const fallbackLogLevel = Internals.useLogLevel();
   return /* @__PURE__ */ jsx65(InnerVideo, {
@@ -33701,7 +33770,8 @@ var VideoInner = ({
     headless: headless ?? false,
     onError,
     credentials,
-    controls
+    controls,
+    objectFit: objectFit ?? "contain"
   });
 };
 var Video = Internals.wrapInSchema(VideoInner, videoSchema);
@@ -34080,7 +34150,7 @@ var CurrentCountry = ({ theme, countryPaths, countryLabel }) => {
 
 // src/components/homepage/Demo/EmojiCard.tsx
 import {
-  forwardRef as forwardRef34,
+  forwardRef as forwardRef33,
   useCallback as useCallback36,
   useEffect as useEffect46,
   useImperativeHandle as useImperativeHandle12,
@@ -34477,7 +34547,7 @@ var EmojiCardRefFn = ({ emojiIndex }, ref) => {
     ]
   });
 };
-var EmojiCard = forwardRef34(EmojiCardRefFn);
+var EmojiCard = forwardRef33(EmojiCardRefFn);
 
 // src/components/homepage/Demo/Minus.tsx
 import { jsx as jsx75 } from "react/jsx-runtime";
@@ -35008,7 +35078,7 @@ import {
 import { BufferTarget, StreamTarget } from "mediabunny";
 
 // ../core/dist/esm/version.mjs
-var VERSION2 = "4.0.441";
+var VERSION2 = "4.0.443";
 
 // ../web-renderer/dist/esm/index.mjs
 import { AudioSample, VideoSample } from "mediabunny";
@@ -39891,7 +39961,7 @@ var PlayerVolume = ({ playerRef }) => {
 };
 
 // src/components/homepage/Demo/PlayPauseButton.tsx
-import React72, { useCallback as useCallback45, useEffect as useEffect53 } from "react";
+import React73, { useCallback as useCallback45, useEffect as useEffect53 } from "react";
 import { jsx as jsx107 } from "react/jsx-runtime";
 var playerButtonStyle2 = {
   appearance: "none",
@@ -39908,7 +39978,7 @@ var playerButtonStyle2 = {
   color: PALETTE.TEXT_COLOR
 };
 var PlayPauseButton = ({ playerRef }) => {
-  const [playing, setPlaying] = React72.useState(true);
+  const [playing, setPlaying] = React73.useState(true);
   useEffect53(() => {
     const { current } = playerRef;
     if (!current) {
@@ -39946,7 +40016,7 @@ var PlayPauseButton = ({ playerRef }) => {
 };
 
 // src/components/homepage/Demo/TimeDisplay.tsx
-import React73, { useEffect as useEffect55 } from "react";
+import React75, { useEffect as useEffect55 } from "react";
 import { jsx as jsx108 } from "react/jsx-runtime";
 var formatTime2 = (timeInSeconds) => {
   const minutes = Math.floor(timeInSeconds / 60);
@@ -39954,7 +40024,7 @@ var formatTime2 = (timeInSeconds) => {
   return `${String(minutes)}:${String(seconds).padStart(2, "0")}`;
 };
 var TimeDisplay = ({ fps, playerRef }) => {
-  const [time, setTime] = React73.useState(0);
+  const [time, setTime] = React75.useState(0);
   useEffect55(() => {
     const { current } = playerRef;
     if (!current) {
@@ -40033,7 +40103,7 @@ var PlayerControls = ({ playerRef, durationInFrames, fps, children }) => {
 };
 
 // src/components/homepage/Demo/ThemeNudge.tsx
-import React74 from "react";
+import React76 from "react";
 import { jsx as jsx110, jsxs as jsxs38 } from "react/jsx-runtime";
 var origWidth3 = 21;
 var scale3 = 0.4;
@@ -40055,7 +40125,7 @@ var Icon6 = () => {
 };
 var ThemeNudge = () => {
   const { colorMode, setColorMode } = useColorMode();
-  const toggleTheme = React74.useCallback((e) => {
+  const toggleTheme = React76.useCallback((e) => {
     e.preventDefault();
     setColorMode(colorMode === "dark" ? "light" : "dark");
   }, [colorMode, setColorMode]);
@@ -40279,12 +40349,12 @@ var ClearButton = (props) => {
 
 // src/components/homepage/MuxVideo.tsx
 import Hls2 from "hls.js";
-import { forwardRef as forwardRef37, useEffect as useEffect58, useImperativeHandle as useImperativeHandle14, useRef as useRef53 } from "react";
+import { forwardRef as forwardRef36, useEffect as useEffect58, useImperativeHandle as useImperativeHandle14, useRef as useRef53 } from "react";
 
 // src/components/homepage/VideoPlayerWithControls.tsx
 import Hls from "hls.js";
 import"plyr/dist/plyr.css";
-import { forwardRef as forwardRef36, useCallback as useCallback47, useEffect as useEffect57, useRef as useRef51, useState as useState57 } from "react";
+import { forwardRef as forwardRef35, useCallback as useCallback47, useEffect as useEffect57, useRef as useRef51, useState as useState57 } from "react";
 import { jsx as jsx116 } from "react/jsx-runtime";
 var useCombinedRefs = function(...refs) {
   const targetRef = useRef51(null);
@@ -40301,7 +40371,7 @@ var useCombinedRefs = function(...refs) {
   }, [refs]);
   return targetRef;
 };
-var VideoPlayerWithControls = forwardRef36(({ playbackId, poster, currentTime, onLoaded, onError, onSize, autoPlay }, ref) => {
+var VideoPlayerWithControls = forwardRef35(({ playbackId, poster, currentTime, onLoaded, onError, onSize, autoPlay }, ref) => {
   const videoRef = useRef51(null);
   const metaRef = useCombinedRefs(ref, videoRef);
   const playerRef = useRef51(null);
@@ -40417,7 +40487,7 @@ var MuxVideoForward = ({ muxId, ...props }, ref) => {
     ...props
   });
 };
-var MuxVideo = forwardRef37(MuxVideoForward);
+var MuxVideo = forwardRef36(MuxVideoForward);
 
 // src/components/homepage/EditorStarterSection.tsx
 import { jsx as jsx118, jsxs as jsxs40 } from "react/jsx-runtime";
@@ -40963,7 +41033,7 @@ var RealMP4Videos = () => {
           /* @__PURE__ */ jsxs48("p", {
             className: "leading-relaxed",
             children: [
-              "Render the video .mp4 or other formats. ",
+              "Render the video as .mp4 or other formats. ",
               /* @__PURE__ */ jsx126("br", {}),
               "Locally, on the server or serverless."
             ]
@@ -41484,6 +41554,7 @@ var listOfRemotionPackages = [
   "@remotion/convert",
   "@remotion/captions",
   "@remotion/openai-whisper",
+  "@remotion/elevenlabs",
   "@remotion/compositor",
   "@remotion/example-videos",
   "@remotion/whisper-web",
@@ -42748,7 +42819,7 @@ var GithubButton = () => {
       " ",
       /* @__PURE__ */ jsx164("div", {
         className: "text-xs inline-block ml-2 leading-none mt-[3px] self-center",
-        children: "40k"
+        children: "41k"
       })
     ]
   });