@remotion/promo-pages 4.0.441 → 4.0.443

package/dist/homepage/Pricing.js

@@ -1375,7 +1375,7 @@ var getDefaultConfig = () => {
 var twMerge = /* @__PURE__ */ createTailwindMerge(getDefaultConfig);
 
 // ../design/dist/esm/index.mjs
-import React4, { useEffect as useEffect18, useMemo as useMemo36, useState as useState20 } from "react";
+import React2, { useEffect as useEffect18, useMemo as useMemo36, useState as useState20 } from "react";
 
 // ../paths/dist/esm/index.mjs
 var cutLInstruction = ({
@@ -5714,176 +5714,176 @@ var extrudeAndTransformElement = (options) => {
 
 // ../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 jsx11 } 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 as useMemo3, useRef } from "react";
+import { jsx as jsx22 } from "react/jsx-runtime";
+import { createContext as createContext6, useContext as useContext3 } from "react";
+import { jsx as jsx32 } from "react/jsx-runtime";
+import { forwardRef, useMemo as useMemo32 } from "react";
+import { jsx as jsx42 } from "react/jsx-runtime";
+import { jsx as jsx52, 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 jsx62 } 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 jsx72 } 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 as useMemo2 } 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 useMemo22,
-  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 jsx32 } 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 jsx42 } from "react/jsx-runtime";
-import { useContext as useContext8 } from "react";
-import { createContext as createContext10 } from "react";
-import { jsx as jsx52 } from "react/jsx-runtime";
-import { useContext as useContext10 } from "react";
-import { useContext as useContext9, useMemo as useMemo7 } from "react";
-import { jsx as jsx62 } 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 jsx72 } from "react/jsx-runtime";
 import { jsx as jsx82 } 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 jsx92 } 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 jsx102 } from "react/jsx-runtime";
+import { jsx as jsx112 } 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 jsx92 } from "react/jsx-runtime";
-import { jsx as jsx102 } 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 jsx112 } 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 useMemo222,
-  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 {
@@ -5891,34 +5891,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 useMemo322,
   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 jsx322 } 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,
@@ -5953,53 +5952,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__ */ jsx11(IsPlayerContext.Provider, {
+var CanUseRemotionHooks = createContext2(false);
+var CanUseRemotionHooksProvider = ({ children }) => {
+  return /* @__PURE__ */ jsx11(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 useMemo3(() => {
+    return { get };
+  }, [get]);
 };
 function truthy2(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(truthy2).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__ */ jsx32(IsPlayerContext.Provider, {
+    value: true,
+    children
+  });
+};
+var useIsPlayer = () => {
+  return useContext3(IsPlayerContext);
 };
 var hasTailwindClassName = ({
   className,
@@ -6023,7 +6140,7 @@ var hasTailwindClassName = ({
 };
 var AbsoluteFillRefForwarding = (props, ref) => {
   const { style, ...other } = props;
-  const actualStyle = useMemo2(() => {
+  const actualStyle = useMemo32(() => {
     return {
       position: "absolute",
       top: hasTailwindClassName({
@@ -6086,168 +6203,402 @@ var AbsoluteFillRefForwarding = (props, ref) => {
       ...style
     };
   }, [other.className, style]);
-  return /* @__PURE__ */ jsx22("div", {
+  return /* @__PURE__ */ jsx42("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
-});
-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);
+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__ */ jsx52("style", {
+        type: "text/css",
+        children: `
+				@keyframes anim {
+					from {
+						opacity: 0
+					}
+					to {
+						opacity: 1
+					}
+				}
+				#remotion-comp-loading {
+					animation: anim 2s;
+					animation-fill-mode: forwards;
+				}
+			`
+      }),
+      /* @__PURE__ */ jsx52("svg", {
+        width: ICON_SIZE,
+        height: ICON_SIZE,
+        viewBox: "-100 -100 400 400",
+        style: rotate,
+        children: /* @__PURE__ */ jsx52("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);
   }
-  throw new Error("random() argument must be a number or a string");
+  return _portalNode;
 };
-var getErrorStackWithMessage = (error) => {
-  const stack = error.stack ?? "";
-  return stack.startsWith("Error:") ? stack : `${error.message}
-${stack}`;
+var getKey = () => {
+  return `remotion_inputPropsOverride` + window.location.origin;
 };
-var isErrorLike = (err) => {
-  if (err instanceof Error) {
-    return true;
+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;
   }
-  if (err === null) {
-    return false;
+  localStorage.setItem(getKey(), JSON.stringify(override));
+};
+var didWarnSSRImport = false;
+var warnOnceSSRImport = () => {
+  if (didWarnSSRImport) {
+    return;
   }
-  if (typeof err !== "object") {
-    return false;
+  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 (!("stack" in err)) {
-    return false;
+  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.");
   }
-  if (typeof err.stack !== "string") {
-    return false;
+  const override = getInputPropsOverride();
+  if (override) {
+    return override;
   }
-  if (!("message" in err)) {
-    return false;
+  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.");
   }
-  if (typeof err.message !== "string") {
-    return false;
+  const param = window.remotion_inputProps;
+  if (!param) {
+    return {};
   }
-  return true;
+  const parsed = deserializeJSONWithSpecialTypes(param);
+  return parsed;
 };
-function cancelRenderInternal(scope, err) {
-  let error;
-  if (isErrorLike(err)) {
-    error = err;
-    if (!error.stack) {
-      error.stack = new Error(error.message).stack;
-    }
-  } else if (typeof err === "string") {
-    error = Error(err);
-  } else {
-    error = Error("Rendering was cancelled");
-  }
-  if (scope) {
-    scope.remotion_cancelledError = getErrorStackWithMessage(error);
+var EditorPropsContext = createContext7({
+  props: {},
+  updateProps: () => {
+    throw new Error("Not implemented");
   }
-  throw error;
-}
-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);
+});
+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__ */ jsx62(EditorPropsContext.Provider, {
+    value: ctx,
+    children
+  });
 };
-var isEqualOrBelowLogLevel = (currentLevel, level) => {
-  return getNumberForLogLevel(currentLevel) <= getNumberForLogLevel(level);
+var RemotionEnvironmentContext = React4.createContext(null);
+var useRemotionEnvironment = () => {
+  const context = useContext4(RemotionEnvironmentContext);
+  const [env] = useState(() => getRemotionEnvironment());
+  return context ?? env;
 };
-var transformArgs = ({
-  args,
-  logLevel,
-  tag
-}) => {
-  const arr = [...args];
-  if (getRemotionEnvironment().isRendering && !getRemotionEnvironment().isClientSideRendering) {
-    arr.unshift(Symbol.for(`__remotion_level_${logLevel}`));
-  }
-  if (tag && getRemotionEnvironment().isRendering && !getRemotionEnvironment().isClientSideRendering) {
-    arr.unshift(Symbol.for(`__remotion_tag_${tag}`));
+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}`);
   }
-  return arr;
-};
-var verbose = (options, ...args) => {
-  if (isEqualOrBelowLogLevel(options.logLevel, "verbose")) {
-    return console.debug(...transformArgs({ args, logLevel: "verbose", tag: options.tag }));
+  if (isNaN(amount)) {
+    throw new TypeError(`The "${nameOfProp}" prop ${location} must not be NaN, but is NaN.`);
   }
-};
-var trace = (options, ...args) => {
-  if (isEqualOrBelowLogLevel(options.logLevel, "trace")) {
-    return console.debug(...transformArgs({ args, logLevel: "trace", tag: options.tag }));
+  if (!Number.isFinite(amount)) {
+    throw new TypeError(`The "${nameOfProp}" prop ${location} must be finite, but is ${amount}.`);
   }
-};
-var info = (options, ...args) => {
-  if (isEqualOrBelowLogLevel(options.logLevel, "info")) {
-    return console.log(...transformArgs({ args, logLevel: "info", tag: options.tag }));
+  if (amount % 1 !== 0) {
+    throw new TypeError(`The "${nameOfProp}" prop ${location} must be an integer, but is ${amount}.`);
   }
-};
-var warn = (options, ...args) => {
-  if (isEqualOrBelowLogLevel(options.logLevel, "warn")) {
-    return console.warn(...transformArgs({ args, logLevel: "warn", tag: options.tag }));
+  if (amount <= 0) {
+    throw new TypeError(`The "${nameOfProp}" prop ${location} must be positive, but got ${amount}.`);
   }
-};
-var error = (options, ...args) => {
-  return console.error(...transformArgs({ args, logLevel: "error", tag: options.tag }));
+}
+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 = 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 ?? "";
+  return stack.startsWith("Error:") ? stack : `${error.message}
+${stack}`;
+};
+var isErrorLike = (err) => {
+  if (err instanceof Error) {
+    return true;
+  }
+  if (err === null) {
+    return false;
+  }
+  if (typeof err !== "object") {
+    return false;
+  }
+  if (!("stack" in err)) {
+    return false;
+  }
+  if (typeof err.stack !== "string") {
+    return false;
+  }
+  if (!("message" in err)) {
+    return false;
+  }
+  if (typeof err.message !== "string") {
+    return false;
+  }
+  return true;
+};
+function cancelRenderInternal(scope, err) {
+  let error;
+  if (isErrorLike(err)) {
+    error = err;
+    if (!error.stack) {
+      error.stack = new Error(error.message).stack;
+    }
+  } else if (typeof err === "string") {
+    error = Error(err);
+  } else {
+    error = Error("Rendering was cancelled");
+  }
+  if (scope) {
+    scope.remotion_cancelledError = getErrorStackWithMessage(error);
+  }
+  throw error;
+}
+function cancelRender(err) {
+  return cancelRenderInternal(typeof window !== "undefined" ? window : undefined, err);
+}
+var logLevels = ["trace", "verbose", "info", "warn", "error"];
+var getNumberForLogLevel = (level) => {
+  return logLevels.indexOf(level);
+};
+var isEqualOrBelowLogLevel = (currentLevel, level) => {
+  return getNumberForLogLevel(currentLevel) <= getNumberForLogLevel(level);
+};
+var transformArgs = ({
+  args,
+  logLevel,
+  tag
+}) => {
+  const arr = [...args];
+  if (getRemotionEnvironment().isRendering && !getRemotionEnvironment().isClientSideRendering) {
+    arr.unshift(Symbol.for(`__remotion_level_${logLevel}`));
+  }
+  if (tag && getRemotionEnvironment().isRendering && !getRemotionEnvironment().isClientSideRendering) {
+    arr.unshift(Symbol.for(`__remotion_tag_${tag}`));
+  }
+  return arr;
+};
+var verbose = (options, ...args) => {
+  if (isEqualOrBelowLogLevel(options.logLevel, "verbose")) {
+    return console.debug(...transformArgs({ args, logLevel: "verbose", tag: options.tag }));
+  }
+};
+var trace = (options, ...args) => {
+  if (isEqualOrBelowLogLevel(options.logLevel, "trace")) {
+    return console.debug(...transformArgs({ args, logLevel: "trace", tag: options.tag }));
+  }
+};
+var info = (options, ...args) => {
+  if (isEqualOrBelowLogLevel(options.logLevel, "info")) {
+    return console.log(...transformArgs({ args, logLevel: "info", tag: options.tag }));
+  }
+};
+var warn = (options, ...args) => {
+  if (isEqualOrBelowLogLevel(options.logLevel, "warn")) {
+    return console.warn(...transformArgs({ args, logLevel: "warn", tag: options.tag }));
+  }
+};
+var error = (options, ...args) => {
+  return console.error(...transformArgs({ args, logLevel: "error", tag: options.tag }));
 };
 var Log = {
   trace,
@@ -6271,11 +6622,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);
@@ -6284,12 +6635,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,
@@ -6325,10 +6676,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(truthy2).join(" ");
@@ -6343,47 +6694,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;
     }
@@ -6394,404 +6739,362 @@ 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({
-  setFrame: () => {
-    throw new Error("default");
-  },
-  setPlaying: () => {
-    throw new Error("default");
+var useLazyComponent = ({
+  compProps,
+  componentName,
+  noSuspense
+}) => {
+  const componentRef = useRef2(null);
+  if ("component" in compProps) {
+    componentRef.current = compProps.component;
   }
-});
-var TimelineContext = createContext6(null);
-var AbsoluteTimeContext = createContext6(null);
-var TimelineContextProvider = ({ children, frameState }) => {
-  const [playing, setPlaying] = useState2(false);
-  const imperativePlaying = useRef(false);
-  const [playbackRate, setPlaybackRate] = useState2(1);
-  const audioAndVideoTags = useRef([]);
-  const [remotionRootId] = useState2(() => String(random(null)));
-  const [_frame, setFrame] = useState2(() => getInitialFrameState());
-  const frame = frameState ?? _frame;
-  const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
-  if (typeof window !== "undefined") {
-    useLayoutEffect(() => {
-      window.remotion_setFrame = (f, composition, attempt) => {
-        window.remotion_attempt = attempt;
-        const id = delayRender2(`Setting the current frame to ${f}`);
-        let asyncUpdate = true;
-        setFrame((s) => {
-          const currentFrame = s[composition] ?? window.remotion_initialFrame;
-          if (currentFrame === f) {
-            asyncUpdate = false;
-            return s;
-          }
-          return {
-            ...s,
-            [composition]: f
-          };
-        });
-        if (asyncUpdate) {
-          requestAnimationFrame(() => continueRender2(id));
-        } else {
-          continueRender2(id);
-        }
+  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);
       };
-      window.remotion_isPlayer = false;
-    }, [continueRender2, delayRender2]);
-  }
-  const timelineContextValue = useMemo22(() => {
-    return {
-      frame,
-      playing,
-      imperativePlaying,
-      rootId: remotionRootId,
-      playbackRate,
-      setPlaybackRate,
-      audioAndVideoTags
-    };
-  }, [frame, playbackRate, playing, remotionRootId]);
-  const setTimelineContextValue = useMemo22(() => {
-    return {
-      setFrame,
-      setPlaying
-    };
-  }, []);
-  return /* @__PURE__ */ jsx32(AbsoluteTimeContext.Provider, {
-    value: timelineContextValue,
-    children: /* @__PURE__ */ jsx32(TimelineContext.Provider, {
-      value: timelineContextValue,
-      children: /* @__PURE__ */ jsx32(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 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 value;
-    }, indent);
-    return { serializedString, customDateUsed, customFileUsed, mapUsed, setUsed };
-  } catch (err) {
-    throw new Error("Could not serialize the passed input props to JSON: " + err.message);
-  }
+      return React6.lazy(compProps.lazyComponent);
+    }
+    throw new Error("You must pass either 'component' or 'lazyComponent'");
+  }, [compProps.lazyComponent]);
+  return lazy;
 };
-var deserializeJSONWithSpecialTypes = (data) => {
-  return JSON.parse(data, (_, value) => {
-    if (typeof value === "string" && value.startsWith(DATE_TOKEN)) {
-      return new Date(value.replace(DATE_TOKEN, ""));
+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 (typeof value === "string" && value.startsWith(FILE_TOKEN)) {
-      return `${window.remotion_staticBase}/${value.replace(FILE_TOKEN, "")}`;
+    if (resolved.type === "error") {
+      return null;
     }
-    return value;
-  });
-};
-var serializeThenDeserialize = (props) => {
-  return deserializeJSONWithSpecialTypes(serializeJSONWithSpecialTypes({
-    data: props,
-    indent: 2,
-    staticBase: window.remotion_staticBase
-  }).serializedString);
+    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 serializeThenDeserializeInStudio = (props) => {
-  if (getRemotionEnvironment().isStudio) {
-    return serializeThenDeserialize(props);
+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}`);
   }
-  return props;
 };
-var didWarnSSRImport = false;
-var warnOnceSSRImport = () => {
-  if (didWarnSSRImport) {
+var invalidCompositionErrorMessage = `Composition ID must match ${String(getRegex2())}`;
+var validateDefaultAndInputProps = (defaultProps, name, compositionId) => {
+  if (!defaultProps) {
     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.");
+  if (typeof defaultProps !== "object") {
+    throw new Error(`"${name}" must be an object, but you passed a value of type ${typeof defaultProps}`);
   }
-  const param = window.remotion_inputProps;
-  if (!param) {
-    return {};
+  if (Array.isArray(defaultProps)) {
+    throw new Error(`"${name}" must be an object, an array was passed ${compositionId ? `for composition "${compositionId}"` : ""}`);
   }
-  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__ */ jsx42(EditorPropsContext.Provider, {
-    value: ctx,
-    children
-  });
+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;
 };
-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}`);
+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 (!Number.isFinite(fps)) {
-    throw new Error(`"fps" must be a finite, but you passed ${fps} ${location}`);
+  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.");
   }
-  if (isNaN(fps)) {
-    throw new Error(`"fps" must not be NaN, but got ${fps} ${location}`);
+  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__ */ jsx72(CanUseRemotionHooksProvider, {
+      children: /* @__PURE__ */ jsx72(Suspense, {
+        fallback: /* @__PURE__ */ jsx72(Loading, {}),
+        children: /* @__PURE__ */ jsx72(Comp, {
+          ...resolved.result.props ?? {}
+        })
+      })
+    }), portalNode());
   }
-  if (fps <= 0) {
-    throw new TypeError(`"fps" must be positive, but got ${fps} ${location}`);
+  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__ */ jsx72(CanUseRemotionHooksProvider, {
+      children: /* @__PURE__ */ jsx72(Suspense, {
+        fallback: /* @__PURE__ */ jsx72(Fallback, {}),
+        children: /* @__PURE__ */ jsx72(Comp, {
+          ...resolved.result.props ?? {}
+        })
+      })
+    }), portalNode());
   }
-  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`);
+  return null;
+};
+var Composition = (props) => {
+  const { onlyRenderComposition } = useContext9(CompositionSetters);
+  if (onlyRenderComposition && onlyRenderComposition !== props.id) {
+    return null;
   }
-}
-var ResolveCompositionContext = createContext9(null);
-var resolveCompositionsRef = createRef();
-var needsResolution = (composition) => {
-  return Boolean(composition.calculateMetadata);
+  return /* @__PURE__ */ jsx72(InnerComposition, {
+    ...props
+  });
 };
-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;
+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;
     }
-    if (currentCompositionMetadata) {
-      return {
-        type: "success",
-        result: {
-          ...currentCompositionMetadata,
-          id: composition.id,
-          defaultProps: composition.defaultProps ?? {}
-        }
-      };
+  };
+  const alreadyImported = globalThis.remotion_imported || typeof window !== "undefined" && window.remotion_imported;
+  if (alreadyImported) {
+    if (alreadyImported === VERSION) {
+      return;
     }
-    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 (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(truthy2).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");
+  },
+  setPlaying: () => {
+    throw new Error("default");
+  }
+});
+var TimelineContext = createContext12(null);
+var AbsoluteTimeContext = createContext12(null);
+var TimelineContextProvider = ({ children, frameState }) => {
+  const [playing, setPlaying] = useState2(false);
+  const imperativePlaying = useRef3(false);
+  const [playbackRate, setPlaybackRate] = useState2(1);
+  const audioAndVideoTags = useRef3([]);
+  const [remotionRootId] = useState2(() => String(random(null)));
+  const [_frame, setFrame] = useState2(() => getInitialFrameState());
+  const frame = frameState ?? _frame;
+  const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
+  if (typeof window !== "undefined") {
+    useLayoutEffect(() => {
+      window.remotion_setFrame = (f, composition, attempt) => {
+        window.remotion_attempt = attempt;
+        const id = delayRender2(`Setting the current frame to ${f}`);
+        let asyncUpdate = true;
+        setFrame((s) => {
+          const currentFrame = s[composition] ?? window.remotion_initialFrame;
+          if (currentFrame === f) {
+            asyncUpdate = false;
+            return s;
+          }
+          return {
+            ...s,
+            [composition]: f
+          };
+        });
+        if (asyncUpdate) {
+          requestAnimationFrame(() => continueRender2(id));
+        } else {
+          continueRender2(id);
         }
       };
-    }
-    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;
-    }
+      window.remotion_isPlayer = false;
+    }, [continueRender2, delayRender2]);
+  }
+  const timelineContextValue = useMemo8(() => {
     return {
-      ...resolved.result,
-      defaultProps: selected.defaultProps ?? {},
-      id: selected.id,
-      ...currentCompositionMetadata ?? {},
-      component: selected.component
+      frame,
+      playing,
+      imperativePlaying,
+      rootId: remotionRootId,
+      playbackRate,
+      setPlaybackRate,
+      audioAndVideoTags
     };
-  }, [currentCompositionMetadata, resolved, selected]);
+  }, [frame, playbackRate, playing, remotionRootId]);
+  const setTimelineContextValue = useMemo8(() => {
+    return {
+      setFrame,
+      setPlaying
+    };
+  }, []);
+  return /* @__PURE__ */ jsx82(AbsoluteTimeContext.Provider, {
+    value: timelineContextValue,
+    children: /* @__PURE__ */ jsx82(TimelineContext.Provider, {
+      value: timelineContextValue,
+      children: /* @__PURE__ */ jsx82(SetTimelineContext.Provider, {
+        value: setTimelineContextValue,
+        children
+      })
+    })
+  });
 };
 var makeKey = () => {
   return `remotion.time-all`;
@@ -6825,7 +7128,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.");
   }
@@ -6836,30 +7139,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__ */ jsx52(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) {
@@ -6868,17 +7164,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;
     }
@@ -6914,7 +7210,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) {
@@ -6950,7 +7246,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;
     }
@@ -6959,9 +7255,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;
     }
@@ -6976,7 +7272,7 @@ var Freeze = ({
       }
     };
   }, [isActive, timelineContext, videoConfig.id, frameToFreeze, relativeFrom]);
-  const newSequenceContext = useMemo8(() => {
+  const newSequenceContext = useMemo11(() => {
     if (!sequenceContext) {
       return null;
     }
@@ -6988,53 +7284,19 @@ var Freeze = ({
       cumulatedFrom: 0
     };
   }, [sequenceContext, isActive]);
-  return /* @__PURE__ */ jsx62(TimelineContext.Provider, {
+  return /* @__PURE__ */ jsx92(TimelineContext.Provider, {
     value: timelineValue,
-    children: /* @__PURE__ */ jsx62(SequenceContext.Provider, {
+    children: /* @__PURE__ */ jsx92(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");
   },
@@ -7043,13 +7305,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");
@@ -7067,7 +7329,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) => {
@@ -7113,20 +7375,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,
@@ -7143,11 +7405,11 @@ var SequenceManagerProvider = ({ children, visualModeEnabled }) => {
     codeValues,
     setCodeValues
   ]);
-  return /* @__PURE__ */ jsx72(SequenceManager.Provider, {
+  return /* @__PURE__ */ jsx102(SequenceManager.Provider, {
     value: sequenceContext,
-    children: /* @__PURE__ */ jsx72(SequenceVisibilityToggleContext.Provider, {
+    children: /* @__PURE__ */ jsx102(SequenceVisibilityToggleContext.Provider, {
       value: hiddenContext,
-      children: /* @__PURE__ */ jsx72(VisualModeOverridesContext.Provider, {
+      children: /* @__PURE__ */ jsx102(VisualModeOverridesContext.Provider, {
         value: overrideContext,
         children
       })
@@ -7172,7 +7434,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();
@@ -7198,15 +7460,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,
@@ -7233,12 +7495,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;
     }
@@ -7285,7 +7547,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 } : {},
@@ -7300,9 +7562,9 @@ var RegularSequenceRefForwardingFunction = ({
   if (isSequenceHidden) {
     return null;
   }
-  return /* @__PURE__ */ jsx82(SequenceContext.Provider, {
+  return /* @__PURE__ */ jsx112(SequenceContext.Provider, {
     value: contextValue,
-    children: content === null ? null : other.layout === "none" ? content : /* @__PURE__ */ jsx82(AbsoluteFill, {
+    children: content === null ? null : other.layout === "none" ? content : /* @__PURE__ */ jsx112(AbsoluteFill, {
       ref,
       style: defaultStyle,
       className: other.className,
@@ -7312,7 +7574,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"');
@@ -7332,7 +7594,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,
@@ -7349,18 +7611,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__ */ jsx82(PremountContext.Provider, {
+  return /* @__PURE__ */ jsx112(PremountContext.Provider, {
     value: premountContextValue,
-    children: /* @__PURE__ */ jsx82(Freeze, {
+    children: /* @__PURE__ */ jsx112(Freeze, {
       frame: freezeFrame,
       active: isFreezingActive,
-      children: /* @__PURE__ */ jsx82(Sequence, {
+      children: /* @__PURE__ */ jsx112(Sequence, {
         ref,
         from,
         durationInFrames,
@@ -7381,14 +7643,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__ */ jsx82(PremountedPostmountedSequence, {
+      return /* @__PURE__ */ jsx112(PremountedPostmountedSequence, {
         ref,
         ...props,
         premountFor: effectivePremountFor
       });
     }
   }
-  return /* @__PURE__ */ jsx82(RegularSequence, {
+  return /* @__PURE__ */ jsx112(RegularSequence, {
     ...props,
     ref
   });
@@ -7443,7 +7705,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;
@@ -7483,13 +7745,13 @@ var CanvasRefForwardingFunction = ({ width, height, fit, className, style }, ref
       }
     };
   }, [draw]);
-  return /* @__PURE__ */ jsx92("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,
@@ -7646,8 +7908,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 () => {
@@ -7661,9 +7923,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) {
@@ -7672,7 +7934,7 @@ var AnimatedImage = forwardRef3(({
     return c;
   }, []);
   const [initialLoopBehavior] = useState5(() => loopBehavior);
-  useEffect2(() => {
+  useEffect4(() => {
     const controller = new AbortController;
     decodeImage({
       resolvedSrc,
@@ -7735,7 +7997,7 @@ var AnimatedImage = forwardRef3(({
     continueRender2,
     delayRender2
   ]);
-  return /* @__PURE__ */ jsx102(Canvas, {
+  return /* @__PURE__ */ jsx13(Canvas, {
     ref,
     width,
     height,
@@ -7772,7 +8034,7 @@ var validateRenderAsset = (artifact) => {
   }
   validateContent(artifact.content);
 };
-var RenderAssetManager = createContext13({
+var RenderAssetManager = createContext14({
   registerRenderAsset: () => {
     return;
   },
@@ -7783,7 +8045,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];
@@ -7815,21 +8077,21 @@ var RenderAssetManagerProvider = ({ children, collectAssets }) => {
       };
     }
   }, []);
-  const contextValue = useMemo12(() => {
+  const contextValue = useMemo14(() => {
     return {
       registerRenderAsset,
       unregisterRenderAsset,
       renderAssets
     };
   }, [renderAssets, registerRenderAsset, unregisterRenderAsset]);
-  return /* @__PURE__ */ jsx112(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(() => {
@@ -7910,9 +8172,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();
@@ -7937,22 +8199,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>",
@@ -7973,7 +8235,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) => {
@@ -7982,7 +8244,7 @@ var setPreloads = (updater) => {
 };
 var PrefetchProvider = ({ children }) => {
   const [_preloads, _setPreloads] = useState8(() => preloads);
-  useEffect3(() => {
+  useEffect5(() => {
     const updaterFunction = () => {
       _setPreloads(preloads);
     };
@@ -7991,7 +8253,7 @@ var PrefetchProvider = ({ children }) => {
       updaters = updaters.filter((u) => u !== updaterFunction);
     };
   }, []);
-  return /* @__PURE__ */ jsx13(PreloadContext.Provider, {
+  return /* @__PURE__ */ jsx16(PreloadContext.Provider, {
     value: _preloads,
     children
   });
@@ -8011,7 +8273,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]) {
@@ -8294,7 +8556,7 @@ var durationReducer = (state, action) => {
       return state;
   }
 };
-var DurationsContext = createContext16({
+var DurationsContext = createContext17({
   durations: {},
   setDurations: () => {
     throw new Error("context missing");
@@ -8302,13 +8564,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
   });
@@ -8436,7 +8698,7 @@ var useSingletonAudioContext = ({
   audioEnabled
 }) => {
   const env = useRemotionEnvironment();
-  const audioContext = useMemo15(() => {
+  const audioContext = useMemo17(() => {
     if (env.isRendering) {
       return null;
     }
@@ -8480,9 +8742,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.");
@@ -8493,9 +8755,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,
@@ -8550,7 +8812,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 {
@@ -8563,7 +8825,7 @@ var SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyHin
       };
     });
   }, [audioContext, numberOfAudioTags]);
-  const effectToUse = React14.useInsertionEffect ?? React14.useLayoutEffect;
+  const effectToUse = React16.useInsertionEffect ?? React16.useLayoutEffect;
   effectToUse(() => {
     return () => {
       requestAnimationFrame(() => {
@@ -8573,7 +8835,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);
@@ -8689,7 +8951,7 @@ var SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyHin
     });
     audioContext?.resume();
   }, [audioContext, logLevel, mountTime, refs, env.isPlayer]);
-  const value = useMemo16(() => {
+  const value = useMemo18(() => {
     return {
       registerAudio,
       unregisterAudio,
@@ -8710,11 +8972,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
@@ -8730,12 +8992,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
@@ -8754,7 +9016,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) {
@@ -8861,9 +9123,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,
@@ -8900,10 +9162,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");
   }
@@ -8958,7 +9220,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;
 };
@@ -9023,7 +9285,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({
@@ -9033,7 +9295,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;
     }
@@ -9045,7 +9307,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`);
     }
@@ -9072,10 +9334,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,
@@ -9086,7 +9349,7 @@ var useImageInTimeline = ({
     trimBefore: undefined,
     playbackRate: 1
   });
-  useEffect4(() => {
+  useEffect6(() => {
     if (!src) {
       throw new Error("No src passed");
     }
@@ -9111,7 +9374,7 @@ var useImageInTimeline = ({
       stack,
       premountDisplay,
       postmountDisplay,
-      controls: null
+      controls
     });
     return () => {
       unregisterSequence(id);
@@ -9131,7 +9394,8 @@ var useImageInTimeline = ({
     isStudio,
     loopDisplay,
     rootId,
-    finalDisplayName
+    finalDisplayName,
+    controls
   ]);
 };
 var useMediaInTimeline = ({
@@ -9148,9 +9412,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,
@@ -9169,7 +9433,7 @@ var useMediaInTimeline = ({
     trimBefore: undefined,
     playbackRate
   });
-  useEffect4(() => {
+  useEffect6(() => {
     if (!src) {
       throw new Error("No src passed");
     }
@@ -9232,7 +9496,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 {
@@ -9270,7 +9534,7 @@ var useBufferManager = (logLevel, mountTime) => {
       }
     };
   }, []);
-  useEffect5(() => {
+  useEffect7(() => {
     if (rendering) {
       return;
     }
@@ -9300,22 +9564,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);
     };
@@ -9336,9 +9600,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");
@@ -9362,7 +9626,7 @@ var useBufferUntilFirstFrame = ({
   logLevel,
   mountTime
 }) => {
-  const bufferingRef = useRef11(false);
+  const bufferingRef = useRef12(false);
   const { delayPlayback } = useBufferState();
   const bufferUntilFirstFrame = useCallback9((requestedTime) => {
     if (mediaType !== "video") {
@@ -9435,7 +9699,7 @@ var useBufferUntilFirstFrame = ({
     onVariableFpsVideoDetected,
     pauseWhenBuffering
   ]);
-  return useMemo20(() => {
+  return useMemo22(() => {
     return {
       isBuffering: () => bufferingRef.current,
       bufferUntilFirstFrame
@@ -9443,7 +9707,7 @@ var useBufferUntilFirstFrame = ({
   }, [bufferUntilFirstFrame]);
 };
 var useCurrentTimeOfMediaTagWithUpdateTimeStamp = (mediaRef) => {
-  const lastUpdate = React16.useRef({
+  const lastUpdate = React18.useRef({
     time: mediaRef.current?.currentTime ?? 0,
     lastUpdate: performance.now()
   });
@@ -9484,7 +9748,7 @@ var useMediaBuffering = ({
 }) => {
   const buffer = useBufferState();
   const [isBuffering, setIsBuffering] = useState12(false);
-  useEffect6(() => {
+  useEffect8(() => {
     let cleanupFns = [];
     const { current } = element;
     if (!current) {
@@ -9616,8 +9880,8 @@ var useRequestVideoCallbackTime = ({
   lastSeek,
   onVariableFpsVideoDetected
 }) => {
-  const currentTime = useRef12(null);
-  useEffect7(() => {
+  const currentTime = useRef13(null);
+  useEffect9(() => {
     const { current } = mediaRef;
     if (current) {
       currentTime.current = {
@@ -9841,17 +10105,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;
@@ -9903,7 +10167,7 @@ var useMediaPlayback = ({
     return acceptableTimeshift ?? defaultAcceptableTimeshift;
   })();
   const isPlayerBuffering = useIsPlayerBuffering(buffering);
-  useEffect8(() => {
+  useEffect10(() => {
     if (mediaRef.current?.paused) {
       return;
     }
@@ -9948,7 +10212,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`);
@@ -10077,7 +10341,7 @@ var useMediaTag = ({
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
   const env = useRemotionEnvironment();
-  useEffect9(() => {
+  useEffect11(() => {
     const tag = {
       id,
       play: (reason) => {
@@ -10116,11 +10380,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");
   },
@@ -10129,16 +10393,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]);
 };
@@ -10187,12 +10451,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({
@@ -10206,7 +10470,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     requestsVideoFrame: false,
     isClientSideRendering: false
   });
-  const propsToPass = useMemo222(() => {
+  const propsToPass = useMemo24(() => {
     return {
       muted: muted || mediaMuted || isSequenceHidden || userPreferredVolume <= 0,
       src: preloadedSrc,
@@ -10224,7 +10488,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     userPreferredVolume,
     crossOriginValue
   ]);
-  const id = useMemo222(() => `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,
@@ -10283,7 +10547,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(() => {
@@ -10294,9 +10558,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;
@@ -10316,7 +10580,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
   if (initialShouldPreMountAudioElements) {
     return null;
   }
-  return /* @__PURE__ */ jsx17("audio", {
+  return /* @__PURE__ */ jsx20("audio", {
     ref: audioRef,
     preload: "metadata",
     crossOrigin: crossOriginValue,
@@ -10325,7 +10589,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,
@@ -10347,10 +10611,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,
@@ -10365,7 +10629,7 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
   useImperativeHandle5(ref, () => {
     return audioRef.current;
   }, []);
-  useEffect11(() => {
+  useEffect13(() => {
     if (!props.src) {
       throw new Error("No src passed");
     }
@@ -10449,7 +10713,7 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
   if (!needsToRenderAudioTag) {
     return null;
   }
-  return /* @__PURE__ */ jsx18("audio", {
+  return /* @__PURE__ */ jsx21("audio", {
     ref: audioRef,
     ...nativeProps,
     onError: onNativeError
@@ -10457,7 +10721,7 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
 };
 var AudioForRendering = forwardRef5(AudioForRenderingRefForwardingFunction);
 var AudioRefForwardingFunction = (props, ref) => {
-  const audioContext = useContext26(SharedAudioContext);
+  const audioContext = useContext28(SharedAudioContext);
   const {
     startFrom,
     endAt,
@@ -10476,7 +10740,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.`);
   }
@@ -10508,14 +10772,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,
@@ -10523,7 +10787,7 @@ var AudioRefForwardingFunction = (props, ref) => {
         playbackRate: props.playbackRate ?? 1,
         trimBefore: trimBeforeValue
       }),
-      children: /* @__PURE__ */ jsx19(Html5Audio, {
+      children: /* @__PURE__ */ jsx222(Html5Audio, {
         ...propsOtherThanLoop,
         ref,
         _remotionInternalNativeLoopPassed: true
@@ -10531,13 +10795,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,
@@ -10547,7 +10811,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,
@@ -10555,321 +10819,243 @@ 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,
     ...props,
     ref,
-    onNativeError: onError,
-    onDuration,
-    pauseWhenBuffering: pauseWhenBuffering ?? false,
-    _remotionInternalNeedsDurationCalculation: Boolean(loop),
-    showInTimeline: showInTimeline ?? true
-  });
-};
-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>",
-          "..."
-        ]
-      })
-    ]
+    onNativeError: onError,
+    onDuration,
+    pauseWhenBuffering: pauseWhenBuffering ?? false,
+    _remotionInternalNeedsDurationCalculation: Boolean(loop),
+    showInTimeline: showInTimeline ?? true
   });
 };
-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");
+var Html5Audio = forwardRef6(AudioRefForwardingFunction);
+addSequenceStackTraces(Html5Audio);
+var Audio = Html5Audio;
+var kSplineTableSize = 11;
+var kSampleStepSize = 1 / (kSplineTableSize - 1);
+var IFrameRefForwarding = ({
+  onLoad,
+  onError,
+  delayRenderRetries,
+  delayRenderTimeoutInMilliseconds,
+  ...props2
+}, ref) => {
+  const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
+  const [handle] = useState14(() => delayRender2(`Loading <IFrame> with source ${props2.src}`, {
+    retries: delayRenderRetries ?? undefined,
+    timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined
+  }));
+  const didLoad = useCallback12((e) => {
+    continueRender2(handle);
+    onLoad?.(e);
+  }, [handle, onLoad, continueRender2]);
+  const didGetError = useCallback12((e) => {
+    continueRender2(handle);
+    if (onError) {
+      onError(e);
+    } else {
+      console.error("Error loading iframe:", e, "Handle the event using the onError() prop to make this message disappear.");
     }
-    _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;
+  }, [handle, onError, continueRender2]);
+  return /* @__PURE__ */ jsx23("iframe", {
+    referrerPolicy: "strict-origin-when-cross-origin",
+    ...props2,
+    ref,
+    onError: didGetError,
+    onLoad: didLoad
+  });
 };
-var useLazyComponent = ({
-  compProps,
-  componentName,
-  noSuspense
+var IFrame = forwardRef7(IFrameRefForwarding);
+var getEffectiveVisualModeValue = ({
+  codeValue,
+  runtimeValue,
+  dragOverrideValue,
+  defaultValue,
+  shouldResortToDefaultValueIfUndefined = false
 }) => {
-  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}`);
+  if (dragOverrideValue !== undefined) {
+    return dragOverrideValue;
   }
-};
-var invalidCompositionErrorMessage = `Composition ID must match ${String(getRegex2())}`;
-var validateDefaultAndInputProps = (defaultProps, name, compositionId) => {
-  if (!defaultProps) {
-    return;
+  if (!codeValue) {
+    return runtimeValue;
   }
-  if (typeof defaultProps !== "object") {
-    throw new Error(`"${name}" must be an object, but you passed a value of type ${typeof defaultProps}`);
+  if (!codeValue.canUpdate) {
+    return runtimeValue;
   }
-  if (Array.isArray(defaultProps)) {
-    throw new Error(`"${name}" must be an object, an array was passed ${compositionId ? `for composition "${compositionId}"` : ""}`);
+  if (codeValue.codeValue === undefined && shouldResortToDefaultValueIfUndefined) {
+    return defaultValue;
   }
+  return codeValue.codeValue;
 };
-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.");
+var useSchema = (schema, currentValue) => {
+  const env = useRemotionEnvironment();
+  const earlyReturn = useMemo26(() => {
+    if (!env.isStudio || env.isReadOnlyStudio) {
+      return {
+        controls: undefined,
+        values: currentValue ?? {}
+      };
     }
-    throw new Error("<Composition> mounted inside another composition. See https://remotion.dev/docs/wrong-composition-mount for help.");
+    return;
+  }, [env.isStudio, env.isReadOnlyStudio, currentValue]);
+  if (earlyReturn) {
+    return earlyReturn;
   }
-  const { folderName, parentName } = useContext28(FolderContext);
-  useEffect13(() => {
-    if (!id) {
-      throw new Error("No id for composition passed.");
+  const [overrideId] = useState15(() => String(Math.random()));
+  const {
+    visualModeEnabled,
+    dragOverrides: overrides,
+    codeValues
+  } = useContext29(VisualModeOverridesContext);
+  const controls = useMemo26(() => {
+    if (!visualModeEnabled) {
+      return;
     }
-    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);
+    if (schema === null || currentValue === null) {
+      return;
+    }
+    return {
+      schema,
+      currentValue,
+      overrideId
     };
-  }, [
-    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;
+  }, [schema, currentValue, overrideId, visualModeEnabled]);
+  return useMemo26(() => {
+    if (controls === undefined || currentValue === null || schema === null || !visualModeEnabled) {
+      return {
+        controls: undefined,
+        values: currentValue ?? {}
+      };
     }
-    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;
+    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 createPortal(/* @__PURE__ */ jsx222(CanUseRemotionHooksProvider, {
-      children: /* @__PURE__ */ jsx222(Suspense, {
-        fallback: /* @__PURE__ */ jsx222(Fallback, {}),
-        children: /* @__PURE__ */ jsx222(Comp, {
-          ...resolved.result.props ?? {}
-        })
-      })
-    }), portalNode());
+    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 null;
+  return current;
 };
-var Composition = (props2) => {
-  const { onlyRenderComposition } = useContext28(CompositionSetters);
-  if (onlyRenderComposition && onlyRenderComposition !== props2.id) {
-    return null;
+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 /* @__PURE__ */ jsx222(InnerComposition, {
-    ...props2
-  });
+  return merged;
 };
-var kSplineTableSize = 11;
-var kSampleStepSize = 1 / (kSplineTableSize - 1);
-var IFrameRefForwarding = ({
-  onLoad,
-  onError,
-  delayRenderRetries,
-  delayRenderTimeoutInMilliseconds,
-  ...props2
-}, ref) => {
-  const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
-  const [handle] = useState14(() => delayRender2(`Loading <IFrame> with source ${props2.src}`, {
-    retries: delayRenderRetries ?? undefined,
-    timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined
-  }));
-  const didLoad = useCallback12((e) => {
-    continueRender2(handle);
-    onLoad?.(e);
-  }, [handle, onLoad, continueRender2]);
-  const didGetError = useCallback12((e) => {
-    continueRender2(handle);
-    if (onError) {
-      onError(e);
-    } else {
-      console.error("Error loading iframe:", e, "Handle the event using the onError() prop to make this message disappear.");
+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
+      });
     }
-  }, [handle, onError, continueRender2]);
-  return /* @__PURE__ */ jsx23("iframe", {
-    referrerPolicy: "strict-origin-when-cross-origin",
-    ...props2,
-    ref,
-    onError: didGetError,
-    onLoad: didLoad
+    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;
 };
-var IFrame = forwardRef7(IFrameRefForwarding);
 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,
@@ -10881,13 +11067,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>.');
   }
@@ -10906,7 +11094,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) => {
@@ -11029,9 +11218,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,
@@ -11039,9 +11228,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) => {
@@ -11085,7 +11274,7 @@ var CompositionManagerProvider = ({
       getCompositions: () => currentcompositionsRef.current
     };
   }, []);
-  const compositionManagerSetters = useMemo26(() => {
+  const compositionManagerSetters = useMemo28(() => {
     return {
       registerComposition,
       unregisterComposition,
@@ -11101,7 +11290,7 @@ var CompositionManagerProvider = ({
     unregisterFolder,
     onlyRenderComposition
   ]);
-  const compositionManagerContextValue = useMemo26(() => {
+  const compositionManagerContextValue = useMemo28(() => {
     return {
       compositions,
       folders,
@@ -11175,32 +11364,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 = () => {
@@ -11220,7 +11388,7 @@ var waitForRoot = (fn) => {
 };
 var MediaEnabledContext = createContext20(null);
 var useVideoEnabled = () => {
-  const context = useContext30(MediaEnabledContext);
+  const context = useContext31(MediaEnabledContext);
   if (!context) {
     return window.remotion_videoEnabled;
   }
@@ -11230,7 +11398,7 @@ var useVideoEnabled = () => {
   return context.videoEnabled;
 };
 var useAudioEnabled = () => {
-  const context = useContext30(MediaEnabledContext);
+  const context = useContext31(MediaEnabledContext);
   if (!context) {
     return window.remotion_audioEnabled;
   }
@@ -11244,7 +11412,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
@@ -11260,13 +11428,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, {
@@ -11465,7 +11633,7 @@ var resolveVideoConfigOrCatch = (params) => {
     };
   }
 };
-var SequenceStackTracesUpdateContext = React27.createContext(() => {});
+var SequenceStackTracesUpdateContext = React28.createContext(() => {});
 var getEnvVariables = () => {
   if (getRemotionEnvironment().isRendering) {
     const param = window.remotion_envVariables;
@@ -11491,7 +11659,7 @@ var setupEnvVariables = () => {
     window.process.env[key] = env[key];
   });
 };
-var CurrentScaleContext = React28.createContext(null);
+var CurrentScaleContext = React29.createContext(null);
 var PreviewSizeContext = createContext21({
   setSize: () => {
     return;
@@ -11515,75 +11683,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);
@@ -11629,7 +11728,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,
@@ -11684,14 +11783,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,
@@ -11779,7 +11878,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(truthy2).join(" ");
   }, [props2.className]);
   const onImageFrame = useCallback15((img) => {
@@ -11833,7 +11932,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     throw new Error("SharedAudioContext not found");
   }
   const videoRef = useRef19(null);
-  const sharedSource = useMemo31(() => {
+  const sharedSource = useMemo322(() => {
     if (!context.audioContext) {
       return null;
     }
@@ -11842,7 +11941,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
       ref: videoRef
     });
   }, [context.audioContext]);
-  const effectToUse = React30.useInsertionEffect ?? React30.useLayoutEffect;
+  const effectToUse = React31.useInsertionEffect ?? React31.useLayoutEffect;
   effectToUse(() => {
     return () => {
       requestAnimationFrame(() => {
@@ -12019,7 +12118,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
       current.preload = "auto";
     }
   }, []);
-  const actualStyle = useMemo31(() => {
+  const actualStyle = useMemo322(() => {
     return {
       ...style,
       opacity: isSequenceHidden ? 0 : style?.opacity ?? 1
@@ -12200,68 +12299,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);
@@ -12510,7 +12547,7 @@ var SeriesSequenceRefForwardingFunction = ({ children }, _ref) => {
     children
   });
 };
-var SeriesSequence = forwardRef11(SeriesSequenceRefForwardingFunction);
+var SeriesSequence = forwardRef10(SeriesSequenceRefForwardingFunction);
 var Series = (props2) => {
   const childrenValue = useMemo34(() => {
     let startFrame = 0;
@@ -12566,19 +12603,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") {
@@ -13234,7 +13269,7 @@ var VideoForRenderingForwardFunction = ({
     ...props2
   });
 };
-var VideoForRendering = forwardRef12(VideoForRenderingForwardFunction);
+var VideoForRendering = forwardRef11(VideoForRenderingForwardFunction);
 var VideoForwardingFunction = (props2, ref) => {
   const {
     startFrom,
@@ -13339,7 +13374,7 @@ var VideoForwardingFunction = (props2, ref) => {
     onAutoPlayError: onAutoPlayError ?? undefined
   });
 };
-var Html5Video = forwardRef13(VideoForwardingFunction);
+var Html5Video = forwardRef12(VideoForwardingFunction);
 addSequenceStackTraces(Html5Video);
 checkMultipleRemotionVersions();
 var proxyObj = {};
@@ -13364,6 +13399,7 @@ var Config = new Proxy(proxyObj, {
 });
 Sequence.displayName = "Sequence";
 addSequenceStackTraces(Sequence);
+addSequenceStackTraces(Composition);
 
 // ../design/dist/esm/index.mjs
 import { jsx as jsx36, Fragment } from "react/jsx-runtime";
@@ -13383,49 +13419,49 @@ import { jsx as jsx113 } from "react/jsx-runtime";
 import * as React342 from "react";
 import * as ReactDOM4 from "react-dom";
 import React9 from "react";
-import * as React6 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 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 jsx212 } 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 jsxs4 } from "react/jsx-runtime";
 import { forwardRef as forwardRef132, createElement as createElement7 } from "react";
 import { forwardRef as forwardRef122, createElement as createElement6 } from "react";
@@ -13480,7 +13516,7 @@ var getChildNodeFrom = (htmlElement) => {
   return childNode;
 };
 var useHoverTransforms = (ref, disabled) => {
-  const [state, setState] = React4.useState({
+  const [state, setState] = React2.useState({
     progress: 0,
     isActive: false
   });
@@ -13492,7 +13528,7 @@ var useHoverTransforms = (ref, disabled) => {
       eventTarget.dispatchEvent(new Event("enabled"));
     }
   }, [disabled, eventTarget]);
-  React4.useEffect(() => {
+  React2.useEffect(() => {
     const element = ref.current;
     if (!element)
       return;
@@ -13567,8 +13603,8 @@ var useHoverTransforms = (ref, disabled) => {
   return state;
 };
 var useClickTransforms = (ref) => {
-  const [hoverProgress, setHoverProgress] = React4.useState(0);
-  React4.useEffect(() => {
+  const [hoverProgress, setHoverProgress] = React2.useState(0);
+  React2.useEffect(() => {
     const element = getChildNodeFrom(ref.current);
     if (!element) {
       return;
@@ -14055,18 +14091,18 @@ function composeEventHandlers(originalEventHandler, ourEventHandler, { checkForD
 function createContextScope(scopeName, createContextScopeDeps = []) {
   let defaultContexts = [];
   function createContext32(rootComponentName, defaultContext) {
-    const BaseContext = React6.createContext(defaultContext);
+    const BaseContext = React62.createContext(defaultContext);
     const index = defaultContexts.length;
     defaultContexts = [...defaultContexts, defaultContext];
     function Provider(props) {
       const { scope, children, ...context } = props;
       const Context = scope?.[scopeName][index] || BaseContext;
-      const value = React6.useMemo(() => context, Object.values(context));
+      const value = React62.useMemo(() => context, Object.values(context));
       return /* @__PURE__ */ jsx122(Context.Provider, { value, children });
     }
     function useContext210(consumerName, scope) {
       const Context = scope?.[scopeName][index] || BaseContext;
-      const context = React6.useContext(Context);
+      const context = React62.useContext(Context);
       if (context)
         return context;
       if (defaultContext !== undefined)
@@ -14078,11 +14114,11 @@ function createContextScope(scopeName, createContextScopeDeps = []) {
   }
   const createScope = () => {
     const scopeContexts = defaultContexts.map((defaultContext) => {
-      return React6.createContext(defaultContext);
+      return React62.createContext(defaultContext);
     });
     return function useScope(scope) {
       const contexts = scope?.[scopeName] || scopeContexts;
-      return React6.useMemo(() => ({ [`__scope${scopeName}`]: { ...scope, [scopeName]: contexts } }), [scope, contexts]);
+      return React62.useMemo(() => ({ [`__scope${scopeName}`]: { ...scope, [scopeName]: contexts } }), [scope, contexts]);
     };
   };
   createScope.scopeName = scopeName;
@@ -14103,7 +14139,7 @@ function composeContextScopes(...scopes) {
         const currentScope = scopeProps[`__scope${scopeName}`];
         return { ...nextScopes2, ...currentScope };
       }, {});
-      return React6.useMemo(() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }), [nextScopes]);
+      return React62.useMemo(() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }), [nextScopes]);
     };
   };
   createScope.scopeName = baseScope.scopeName;
@@ -14122,43 +14158,43 @@ function composeRefs(...refs) {
 function useComposedRefs(...refs) {
   return React7.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 };
@@ -14272,7 +14308,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") {
@@ -14288,15 +14324,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);
@@ -14311,12 +14347,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,
@@ -14326,10 +14362,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);
@@ -14367,7 +14403,7 @@ var DismissableLayer = React142.forwardRef((props, forwardedRef) => {
       onDismiss();
     }
   }, ownerDocument);
-  React142.useEffect(() => {
+  React14.useEffect(() => {
     if (!node)
       return;
     if (disableOutsidePointerEvents) {
@@ -14385,7 +14421,7 @@ var DismissableLayer = React142.forwardRef((props, forwardedRef) => {
       }
     };
   }, [node, ownerDocument, disableOutsidePointerEvents, context]);
-  React142.useEffect(() => {
+  React14.useEffect(() => {
     return () => {
       if (!node)
         return;
@@ -14394,7 +14430,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);
@@ -14413,11 +14449,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);
@@ -14431,9 +14467,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() {
@@ -14468,8 +14504,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 };
@@ -14503,7 +14539,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());
@@ -14739,12 +14775,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++));
@@ -16323,7 +16359,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;
   });
@@ -16346,7 +16382,7 @@ function useFloating(options) {
     whileElementsMounted,
     open
   } = options;
-  const [data, setData] = React19.useState({
+  const [data, setData] = React192.useState({
     x: 0,
     y: 0,
     strategy,
@@ -16354,19 +16390,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);
@@ -16374,13 +16410,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;
     }
@@ -16414,7 +16450,7 @@ function useFloating(options) {
       }));
     }
   }, [open]);
-  const isMountedRef = React19.useRef(false);
+  const isMountedRef = React192.useRef(false);
   index(() => {
     isMountedRef.current = true;
     return () => {
@@ -16433,17 +16469,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,
@@ -16469,7 +16505,7 @@ function useFloating(options) {
       top: y
     };
   }, [strategy, transform, elements.floating, data.x, data.y]);
-  return React19.useMemo(() => ({
+  return React192.useMemo(() => ({
     ...data,
     update,
     refs,
@@ -16537,7 +16573,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,
@@ -16818,9 +16854,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__ */ jsx212(Primitive.div, { ...portalProps, ref: forwardedRef }), container22) : null;
@@ -16835,7 +16871,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;
@@ -16851,11 +16887,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;
@@ -16874,7 +16910,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,
@@ -17082,7 +17118,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) {
@@ -17215,9 +17251,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
@@ -17226,7 +17262,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,
@@ -17294,7 +17330,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();
@@ -17399,7 +17435,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;
@@ -17414,10 +17450,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") {
@@ -17544,16 +17580,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);
@@ -17569,7 +17605,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;
     }
@@ -17605,7 +17641,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;
@@ -17632,7 +17668,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() {
@@ -17641,17 +17677,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,
@@ -17671,7 +17707,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;
@@ -18780,7 +18816,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)]"
     })
   });
 };