@remotion/promo-pages 4.0.374 → 4.0.376

package/dist/template-modal-content.js

@@ -89,39 +89,41 @@ import {
 import React11, { useCallback as useCallback5, useImperativeHandle as useImperativeHandle3, useRef as useRef3 } from "react";
 import { jsx as jsx102 } from "react/jsx-runtime";
 import { jsx as jsx11 } from "react/jsx-runtime";
-import { useContext as useContext14, useEffect as useEffect5, useState as useState9 } from "react";
+import { useContext as useContext14, useLayoutEffect as useLayoutEffect4, useState as useState9 } from "react";
 import {
   createContext as createContext12,
   useCallback as useCallback6,
+  useImperativeHandle as useImperativeHandle5,
   useLayoutEffect as useLayoutEffect3,
   useMemo as useMemo11,
   useState as useState8
 } from "react";
+import { flushSync } from "react-dom";
 import { jsx as jsx12 } from "react/jsx-runtime";
 import { forwardRef as forwardRef6, useCallback as useCallback11, useContext as useContext27 } from "react";
 import React12, { createContext as createContext13, useMemo as useMemo12 } from "react";
 import { jsx as jsx13 } from "react/jsx-runtime";
 import { useContext as useContext15 } from "react";
-import { createContext as createContext14, useEffect as useEffect6, useState as useState10 } from "react";
+import { createContext as createContext14, useEffect as useEffect5, useState as useState10 } from "react";
 import { jsx as jsx14 } from "react/jsx-runtime";
 import { createContext as createContext15, useMemo as useMemo13, useReducer } from "react";
 import { jsx as jsx15 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef4,
   useContext as useContext25,
-  useEffect as useEffect14,
-  useImperativeHandle as useImperativeHandle5,
+  useEffect as useEffect13,
+  useImperativeHandle as useImperativeHandle6,
   useMemo as useMemo21,
   useRef as useRef12,
   useState as useState15
 } from "react";
-import { useContext as useContext17, useLayoutEffect as useLayoutEffect4, useRef as useRef7 } from "react";
+import { useContext as useContext17, useLayoutEffect as useLayoutEffect5, useRef as useRef7 } from "react";
 import React15, {
   createContext as createContext16,
   createRef as createRef2,
   useCallback as useCallback7,
   useContext as useContext16,
-  useEffect as useEffect7,
+  useEffect as useEffect6,
   useMemo as useMemo15,
   useRef as useRef5,
   useState as useState11
@@ -129,13 +131,13 @@ import React15, {
 import { useMemo as useMemo14 } from "react";
 import { jsx as jsx16, jsxs as jsxs2 } from "react/jsx-runtime";
 import { useRef as useRef6 } from "react";
-import { useContext as useContext19, useEffect as useEffect8, useMemo as useMemo16, useState as useState12 } from "react";
+import { useContext as useContext19, useEffect as useEffect7, useMemo as useMemo16, useState as useState12 } from "react";
 import { useContext as useContext18 } from "react";
 import {
   useCallback as useCallback10,
   useContext as useContext22,
-  useEffect as useEffect12,
-  useLayoutEffect as useLayoutEffect6,
+  useEffect as useEffect11,
+  useLayoutEffect as useLayoutEffect7,
   useRef as useRef11
 } from "react";
 import { useCallback as useCallback9, useMemo as useMemo19, useRef as useRef9 } from "react";
@@ -143,33 +145,33 @@ import { useContext as useContext21, useMemo as useMemo18 } from "react";
 import React16, {
   useCallback as useCallback8,
   useContext as useContext20,
-  useEffect as useEffect9,
-  useLayoutEffect as useLayoutEffect5,
+  useEffect as useEffect8,
+  useLayoutEffect as useLayoutEffect6,
   useMemo as useMemo17,
   useRef as useRef8,
   useState as useState13
 } from "react";
 import { jsx as jsx17 } from "react/jsx-runtime";
 import React17 from "react";
-import { useEffect as useEffect10, useState as useState14 } from "react";
-import { useEffect as useEffect11, useRef as useRef10 } from "react";
-import { useContext as useContext23, useEffect as useEffect13 } from "react";
+import { useEffect as useEffect9, useState as useState14 } from "react";
+import { useEffect as useEffect10, useRef as useRef10 } from "react";
+import { useContext as useContext23, useEffect as useEffect12 } from "react";
 import { createContext as createContext17, useContext as useContext24, useMemo as useMemo20 } from "react";
 import { jsx as jsx18 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef5,
   useContext as useContext26,
-  useEffect as useEffect15,
-  useImperativeHandle as useImperativeHandle6,
-  useLayoutEffect as useLayoutEffect7,
+  useEffect as useEffect14,
+  useImperativeHandle as useImperativeHandle7,
+  useLayoutEffect as useLayoutEffect8,
   useMemo as useMemo222,
   useRef as useRef13
 } from "react";
 import { jsx as jsx19 } from "react/jsx-runtime";
 import { jsx as jsx20 } from "react/jsx-runtime";
-import { Suspense, useContext as useContext29, useEffect as useEffect17 } from "react";
+import { Suspense, useContext as useContext29, useEffect as useEffect16 } from "react";
 import { createPortal } from "react-dom";
-import { createContext as createContext18, useContext as useContext28, useEffect as useEffect16, useMemo as useMemo23 } from "react";
+import { createContext as createContext18, useContext as useContext28, useEffect as useEffect15, useMemo as useMemo23 } from "react";
 import { jsx as jsx21 } from "react/jsx-runtime";
 import { jsx as jsx222, jsxs as jsxs22 } from "react/jsx-runtime";
 import React21, { useMemo as useMemo24 } from "react";
@@ -180,8 +182,8 @@ import {
   forwardRef as forwardRef8,
   useCallback as useCallback13,
   useContext as useContext30,
-  useImperativeHandle as useImperativeHandle7,
-  useLayoutEffect as useLayoutEffect8,
+  useImperativeHandle as useImperativeHandle8,
+  useLayoutEffect as useLayoutEffect9,
   useRef as useRef14
 } from "react";
 import { jsx as jsx25 } from "react/jsx-runtime";
@@ -189,23 +191,24 @@ import { createRef as createRef3 } from "react";
 import React25 from "react";
 import {
   useCallback as useCallback14,
-  useImperativeHandle as useImperativeHandle8,
+  useImperativeHandle as useImperativeHandle9,
   useMemo as useMemo25,
   useRef as useRef15,
   useState as useState17
 } from "react";
 import { jsx as jsx26 } from "react/jsx-runtime";
-import { useEffect as useEffect18, useMemo as useMemo27, useState as useState18 } from "react";
+import React26 from "react";
+import { useEffect as useEffect17, useMemo as useMemo27, useState as useState18 } from "react";
 import { createContext as createContext19, useContext as useContext31, useMemo as useMemo26 } from "react";
 import { jsx as jsx27 } from "react/jsx-runtime";
 import { jsx as jsx28 } from "react/jsx-runtime";
-import React27, { createContext as createContext20 } from "react";
+import React28, { createContext as createContext20 } from "react";
 import { useCallback as useCallback16 } from "react";
 import {
   useCallback as useCallback15,
   useContext as useContext32,
-  useEffect as useEffect19,
-  useLayoutEffect as useLayoutEffect9,
+  useEffect as useEffect18,
+  useLayoutEffect as useLayoutEffect10,
   useMemo as useMemo28,
   useState as useState19
 } from "react";
@@ -213,30 +216,30 @@ import { jsx as jsx29 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef9,
   useContext as useContext33,
-  useEffect as useEffect21,
-  useImperativeHandle as useImperativeHandle9,
+  useEffect as useEffect20,
+  useImperativeHandle as useImperativeHandle10,
   useMemo as useMemo29,
   useRef as useRef16,
   useState as useState20
 } from "react";
-import { useEffect as useEffect20 } from "react";
+import { useEffect as useEffect19 } from "react";
 import { jsx as jsx30 } from "react/jsx-runtime";
 import { jsx as jsx31 } from "react/jsx-runtime";
-import React31, { useMemo as useMemo30 } from "react";
+import React32, { useMemo as useMemo30 } from "react";
 import { jsx as jsx322 } from "react/jsx-runtime";
 import { Children, forwardRef as forwardRef10, useMemo as useMemo31 } from "react";
-import React32 from "react";
-import React33, { createContext as createContext21 } from "react";
+import React33 from "react";
+import React34, { createContext as createContext21 } from "react";
 import { jsx as jsx33 } from "react/jsx-runtime";
 import { jsx as jsx34 } from "react/jsx-runtime";
-import React35 from "react";
+import React36 from "react";
 import { forwardRef as forwardRef12, useCallback as useCallback17, useContext as useContext35 } from "react";
 import {
   forwardRef as forwardRef11,
   useContext as useContext34,
-  useEffect as useEffect22,
-  useImperativeHandle as useImperativeHandle10,
-  useLayoutEffect as useLayoutEffect10,
+  useEffect as useEffect21,
+  useImperativeHandle as useImperativeHandle11,
+  useLayoutEffect as useLayoutEffect11,
   useMemo as useMemo32,
   useRef as useRef17
 } from "react";
@@ -451,18 +454,18 @@ function exponentialBackoff(errorCount) {
   return 1000 * 2 ** (errorCount - 1);
 }
 function useRemotionContexts() {
-  const compositionManagerCtx = React31.useContext(CompositionManager);
-  const timelineContext = React31.useContext(TimelineContext);
-  const setTimelineContext = React31.useContext(SetTimelineContext);
-  const sequenceContext = React31.useContext(SequenceContext);
-  const nonceContext = React31.useContext(NonceContext);
-  const canUseRemotionHooksContext = React31.useContext(CanUseRemotionHooks);
-  const preloadContext = React31.useContext(PreloadContext);
-  const resolveCompositionContext = React31.useContext(ResolveCompositionContext);
-  const renderAssetManagerContext = React31.useContext(RenderAssetManager);
-  const sequenceManagerContext = React31.useContext(SequenceManager);
-  const bufferManagerContext = React31.useContext(BufferingContextReact);
-  const logLevelContext = React31.useContext(LogLevelContext);
+  const compositionManagerCtx = React32.useContext(CompositionManager);
+  const timelineContext = React32.useContext(TimelineContext);
+  const setTimelineContext = React32.useContext(SetTimelineContext);
+  const sequenceContext = React32.useContext(SequenceContext);
+  const nonceContext = React32.useContext(NonceContext);
+  const canUseRemotionHooksContext = React32.useContext(CanUseRemotionHooks);
+  const preloadContext = React32.useContext(PreloadContext);
+  const resolveCompositionContext = React32.useContext(ResolveCompositionContext);
+  const renderAssetManagerContext = React32.useContext(RenderAssetManager);
+  const sequenceManagerContext = React32.useContext(SequenceManager);
+  const bufferManagerContext = React32.useContext(BufferingContextReact);
+  const logLevelContext = React32.useContext(LogLevelContext);
   return useMemo30(() => ({
     compositionManagerCtx,
     timelineContext,
@@ -753,7 +756,7 @@ var __defProp2, __export2 = (target, all) => {
   });
 }, useIsPlayer = () => {
   return useContext(IsPlayerContext);
-}, VERSION = "4.0.374", checkMultipleRemotionVersions = () => {
+}, VERSION = "4.0.376", checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
   }
@@ -1046,6 +1049,9 @@ Check that all your Remotion packages are on the same version. If your dependenc
   if (override) {
     return override;
   }
+  if (typeof window === "undefined" || typeof window.remotion_inputProps === "undefined") {
+    throw new Error("Cannot call `getInputProps()` - window.remotion_inputProps is not set. This API is only available if you are in the Studio, or while you are rendering server-side.");
+  }
   const param = window.remotion_inputProps;
   if (!param) {
     return {};
@@ -1106,7 +1112,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   calculateMetadata,
   signal,
   defaultProps,
-  originalProps,
+  inputProps: originalProps,
   compositionId,
   compositionDurationInFrames,
   compositionFps,
@@ -1203,7 +1209,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }
 }, ResolveCompositionContext, resolveCompositionsRef, needsResolution = (composition) => {
   return Boolean(composition.calculateMetadata);
-}, PROPS_UPDATED_EXTERNALLY = "remotion.propsUpdatedExternally", ResolveCompositionConfig = ({ children }) => {
+}, PROPS_UPDATED_EXTERNALLY = "remotion.propsUpdatedExternally", ResolveCompositionConfigInStudio = ({ children }) => {
   const [currentRenderModalComposition, setCurrentRenderModalComposition] = useState4(null);
   const { compositions, canvasContent, currentCompositionMetadata } = useContext4(CompositionManager);
   const { fastRefreshes, manualRefreshes } = useContext4(NonceContext);
@@ -1243,7 +1249,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     const result = resolveVideoConfigOrCatch({
       compositionId,
       calculateMetadata,
-      originalProps: combinedProps,
+      inputProps: combinedProps,
       signal,
       defaultProps,
       compositionDurationInFrames,
@@ -1499,7 +1505,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
           props: {
             ...composition.defaultProps ?? {},
             ...selectedEditorProps ?? {},
-            ...typeof window === "undefined" || env.isPlayer ? {} : getInputProps() ?? {}
+            ...typeof window === "undefined" || env.isPlayer || !window.remotion_inputProps ? {} : getInputProps() ?? {}
           },
           defaultCodec: null,
           defaultOutName: null,
@@ -1509,6 +1515,9 @@ Check that all your Remotion packages are on the same version. If your dependenc
         }
       };
     }
+    if (!context) {
+      return null;
+    }
     if (!context[composition.id]) {
       return null;
     }
@@ -2421,7 +2430,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     return;
   }
   validateContent(artifact.content);
-}, RenderAssetManager, RenderAssetManagerProvider = ({ children }) => {
+}, RenderAssetManager, RenderAssetManagerProvider = ({ children, collectAssets }) => {
   const [renderAssets, setRenderAssets] = useState8([]);
   const registerRenderAsset = useCallback6((renderAsset) => {
     validateRenderAsset(renderAsset);
@@ -2429,6 +2438,18 @@ Check that all your Remotion packages are on the same version. If your dependenc
       return [...assets, renderAsset];
     });
   }, []);
+  if (collectAssets) {
+    useImperativeHandle5(collectAssets, () => {
+      return {
+        collectAssets: () => {
+          flushSync(() => {
+            setRenderAssets([]);
+          });
+          return renderAssets;
+        }
+      };
+    }, [renderAssets]);
+  }
   const unregisterRenderAsset = useCallback6((id) => {
     setRenderAssets((assts) => {
       return assts.filter((a) => a.id !== id);
@@ -2460,7 +2481,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const [id] = useState9(() => {
     return String(Math.random());
   });
-  useEffect5(() => {
+  useLayoutEffect4(() => {
     if (!env.isRendering) {
       return;
     }
@@ -2594,7 +2615,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   updaters.forEach((u) => u());
 }, PrefetchProvider = ({ children }) => {
   const [_preloads, _setPreloads] = useState10(() => preloads);
-  useEffect6(() => {
+  useEffect5(() => {
     const updaterFunction = () => {
       _setPreloads(preloads);
     };
@@ -3187,7 +3208,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     audios.current = [];
     rerenderAudios();
   }, [numberOfAudioTags, rerenderAudios]);
-  useEffect7(() => {
+  useEffect6(() => {
     return () => {
       resetAudio();
     };
@@ -3370,7 +3391,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }
   const { audioContext } = sharedAudioContext;
   if (typeof window !== "undefined") {
-    useLayoutEffect4(() => {
+    useLayoutEffect5(() => {
       if (!audioContext) {
         return;
       }
@@ -3499,7 +3520,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
       });
     }).join(",");
   }, [duration, startsAt, volume, mediaVolume]);
-  useEffect8(() => {
+  useEffect7(() => {
     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`);
     }
@@ -3552,7 +3573,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     trimBefore: undefined,
     playbackRate
   });
-  useEffect8(() => {
+  useEffect7(() => {
     if (!src) {
       throw new Error("No src passed");
     }
@@ -3642,7 +3663,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
       }
     };
   }, []);
-  useEffect9(() => {
+  useEffect8(() => {
     if (blocks.length > 0) {
       onBufferingCallbacks.forEach((c) => c());
       playbackLogging({
@@ -3654,7 +3675,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     }
   }, [blocks]);
   if (typeof window !== "undefined") {
-    useLayoutEffect5(() => {
+    useLayoutEffect6(() => {
       if (blocks.length === 0) {
         onResumeCallbacks.forEach((c) => c());
         playbackLogging({
@@ -3678,7 +3699,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   });
 }, useIsPlayerBuffering = (bufferManager) => {
   const [isBuffering, setIsBuffering] = useState13(bufferManager.buffering.current);
-  useEffect9(() => {
+  useEffect8(() => {
     const onBuffer = () => {
       setIsBuffering(true);
     };
@@ -3841,7 +3862,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
 }) => {
   const buffer = useBufferState();
   const [isBuffering, setIsBuffering] = useState14(false);
-  useEffect10(() => {
+  useEffect9(() => {
     let cleanupFns = [];
     const { current } = element;
     if (!current) {
@@ -3973,7 +3994,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   onVariableFpsVideoDetected
 }) => {
   const currentTime = useRef10(null);
-  useEffect11(() => {
+  useEffect10(() => {
     const { current } = mediaRef;
     if (current) {
       currentTime.current = {
@@ -4155,7 +4176,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     return acceptableTimeshift ?? defaultAcceptableTimeshift;
   })();
   const isPlayerBuffering = useIsPlayerBuffering(buffering);
-  useEffect12(() => {
+  useEffect11(() => {
     if (mediaRef.current?.paused) {
       return;
     }
@@ -4194,13 +4215,13 @@ Check that all your Remotion packages are on the same version. If your dependenc
     isPostmounting
   ]);
   const env = useRemotionEnvironment();
-  useLayoutEffect6(() => {
+  useLayoutEffect7(() => {
     const playbackRateToSet = Math.max(0, playbackRate);
     if (mediaRef.current && mediaRef.current.playbackRate !== playbackRateToSet) {
       mediaRef.current.playbackRate = playbackRateToSet;
     }
   }, [mediaRef, playbackRate]);
-  useEffect12(() => {
+  useEffect11(() => {
     const tagName = mediaType === "audio" ? "<Html5Audio>" : "<Html5Video>";
     if (!mediaRef.current) {
       throw new Error(`No ${mediaType} ref found`);
@@ -4328,7 +4349,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
   const env = useRemotionEnvironment();
-  useEffect13(() => {
+  useEffect12(() => {
     const tag = {
       id,
       play: (reason) => {
@@ -4516,12 +4537,12 @@ Check that all your Remotion packages are on the same version. If your dependenc
     volume: userPreferredVolume,
     shouldUseWebAudioApi: useWebAudioApi ?? false
   });
-  useImperativeHandle5(ref, () => {
+  useImperativeHandle6(ref, () => {
     return audioRef.current;
   }, [audioRef]);
   const currentOnDurationCallback = useRef12(onDuration);
   currentOnDurationCallback.current = onDuration;
-  useEffect14(() => {
+  useEffect13(() => {
     const { current } = audioRef;
     if (!current) {
       return;
@@ -4585,10 +4606,10 @@ Check that all your Remotion packages are on the same version. If your dependenc
     mediaVolume: 1
   });
   warnAboutTooHighVolume(volume);
-  useImperativeHandle6(ref, () => {
+  useImperativeHandle7(ref, () => {
     return audioRef.current;
   }, []);
-  useEffect15(() => {
+  useEffect14(() => {
     if (!props.src) {
       throw new Error("No src passed");
     }
@@ -4632,7 +4653,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   ]);
   const { src } = props;
   const needsToRenderAudioTag = ref || _remotionInternalNeedsDurationCalculation;
-  useLayoutEffect7(() => {
+  useLayoutEffect8(() => {
     if (window.process?.env?.NODE_ENV === "test") {
       return;
     }
@@ -4892,7 +4913,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }
 }, Fallback = () => {
   const { continueRender: continueRender2, delayRender: delayRender2 } = useDelayRender();
-  useEffect17(() => {
+  useEffect16(() => {
     const fallback = delayRender2("Waiting for Root component to unsuspend");
     return () => continueRender2(fallback);
   }, [continueRender2, delayRender2]);
@@ -4929,7 +4950,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     throw new Error("<Composition> mounted inside another composition. See https://remotion.dev/docs/wrong-composition-mount for help.");
   }
   const { folderName, parentName } = useContext29(FolderContext);
-  useEffect17(() => {
+  useEffect16(() => {
     if (!id) {
       throw new Error("No id for composition passed.");
     }
@@ -4968,7 +4989,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     registerComposition,
     unregisterComposition
   ]);
-  useEffect17(() => {
+  useEffect16(() => {
     window.dispatchEvent(new CustomEvent(PROPS_UPDATED_EXTERNALLY, {
       detail: {
         resetUnsaved: id
@@ -5066,7 +5087,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   if (!_propsValid) {
     throw new Error("typecheck error");
   }
-  useImperativeHandle7(ref, () => {
+  useImperativeHandle8(ref, () => {
     return imageRef.current;
   }, []);
   const actualSrc = usePreload(src);
@@ -5108,7 +5129,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   if (typeof window !== "undefined") {
     const isPremounting = Boolean(sequenceContext?.premounting);
     const isPostmounting = Boolean(sequenceContext?.postmounting);
-    useLayoutEffect8(() => {
+    useLayoutEffect9(() => {
       if (window.process?.env?.NODE_ENV === "test") {
         if (imageRef.current) {
           imageRef.current.src = actualSrc;
@@ -5233,7 +5254,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
       return prevFolders.filter((p) => !(p.name === name && p.parent === parent));
     });
   }, []);
-  useImperativeHandle8(compositionsRef, () => {
+  useImperativeHandle9(compositionsRef, () => {
     return {
       getCompositions: () => currentcompositionsRef.current
     };
@@ -5326,7 +5347,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   `;
 }, REMOTION_STUDIO_CONTAINER_ELEMENT = "__remotion-studio-container", getPreviewDomElement = () => {
   return document.getElementById(REMOTION_STUDIO_CONTAINER_ELEMENT);
-}, Root = null, listeners, getRoot = () => {
+}, MaxMediaCacheSizeContext, Root = null, listeners, getRoot = () => {
   return Root;
 }, waitForRoot = (fn) => {
   if (Root) {
@@ -5367,7 +5388,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     value,
     children
   });
-}, RemotionRoot = ({
+}, RemotionRootContexts = ({
   children,
   numberOfAudioTags,
   logLevel,
@@ -5393,7 +5414,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
       }
     };
   }, []);
-  useEffect18(() => {
+  useEffect17(() => {
     if (typeof __webpack_module__ !== "undefined") {
       if (__webpack_module__.hot) {
         __webpack_module__.hot.addStatusHandler((status) => {
@@ -5421,16 +5442,12 @@ Check that all your Remotion packages are on the same version. If your dependenc
             children: /* @__PURE__ */ jsx28(EditorPropsProvider, {
               children: /* @__PURE__ */ jsx28(PrefetchProvider, {
                 children: /* @__PURE__ */ jsx28(SequenceManagerProvider, {
-                  children: /* @__PURE__ */ jsx28(RenderAssetManagerProvider, {
-                    children: /* @__PURE__ */ jsx28(ResolveCompositionConfig, {
-                      children: /* @__PURE__ */ jsx28(SharedAudioContextProvider, {
-                        numberOfAudioTags,
-                        audioLatencyHint,
-                        children: /* @__PURE__ */ jsx28(DurationsContextProvider, {
-                          children: /* @__PURE__ */ jsx28(BufferingProvider, {
-                            children
-                          })
-                        })
+                  children: /* @__PURE__ */ jsx28(SharedAudioContextProvider, {
+                    numberOfAudioTags,
+                    audioLatencyHint,
+                    children: /* @__PURE__ */ jsx28(DurationsContextProvider, {
+                      children: /* @__PURE__ */ jsx28(BufferingProvider, {
+                        children
                       })
                     })
                   })
@@ -5532,7 +5549,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     mediaVolume: 1
   });
   warnAboutTooHighVolume(volume);
-  useEffect19(() => {
+  useEffect18(() => {
     if (!src) {
       throw new Error("No src passed");
     }
@@ -5589,7 +5606,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }, [toneMapped, currentTime, src, transparent]);
   const [imageSrc, setImageSrc] = useState19(null);
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
-  useLayoutEffect9(() => {
+  useLayoutEffect10(() => {
     if (!window.remotion_videoEnabled) {
       return;
     }
@@ -5692,7 +5709,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   ref,
   onVideoFrame
 }) => {
-  useEffect20(() => {
+  useEffect19(() => {
     const { current } = ref;
     if (!current) {
       return;
@@ -5829,7 +5846,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     duration,
     fps
   });
-  useImperativeHandle9(ref, () => {
+  useImperativeHandle10(ref, () => {
     return videoRef.current;
   }, []);
   useState20(() => playbackLogging({
@@ -5838,7 +5855,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     tag: "video",
     mountTime
   }));
-  useEffect21(() => {
+  useEffect20(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -5869,7 +5886,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const currentOnDurationCallback = useRef16(onDuration);
   currentOnDurationCallback.current = onDuration;
   useEmitVideoFrame({ ref: videoRef, onVideoFrame });
-  useEffect21(() => {
+  useEffect20(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -5886,7 +5903,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
       current.removeEventListener("loadedmetadata", onLoadedMetadata);
     };
   }, [src]);
-  useEffect21(() => {
+  useEffect20(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -6131,9 +6148,9 @@ Check that all your Remotion packages are on the same version. If your dependenc
     throw new RangeError(`Cannot use frame ${frame}: Duration of composition is ${durationInFrames}, therefore the highest frame that can be rendered is ${durationInFrames - 1}`);
   }
 }, flattenChildren = (children) => {
-  const childrenArray = React32.Children.toArray(children);
+  const childrenArray = React33.Children.toArray(children);
   return childrenArray.reduce((flatChildren, child) => {
-    if (child.type === React32.Fragment) {
+    if (child.type === React33.Fragment) {
       return flatChildren.concat(flattenChildren(child.props.children));
     }
     flatChildren.push(child);
@@ -6150,7 +6167,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     children
   });
 }, useRequireToBeInsideSeries = () => {
-  const isInsideSeries = React33.useContext(IsInsideSeriesContext);
+  const isInsideSeries = React34.useContext(IsInsideSeriesContext);
   if (!isInsideSeries) {
     throw new Error("This component must be inside a <Series /> component.");
   }
@@ -6464,7 +6481,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     mediaVolume: 1
   });
   warnAboutTooHighVolume(volume);
-  useEffect22(() => {
+  useEffect21(() => {
     if (!props2.src) {
       throw new Error("No src passed");
     }
@@ -6504,10 +6521,10 @@ Check that all your Remotion packages are on the same version. If your dependenc
     sequenceContext?.relativeFrom,
     audioStreamIndex
   ]);
-  useImperativeHandle10(ref, () => {
+  useImperativeHandle11(ref, () => {
     return videoRef.current;
   }, []);
-  useEffect22(() => {
+  useEffect21(() => {
     if (!window.remotion_videoEnabled) {
       return;
     }
@@ -6591,7 +6608,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   ]);
   const { src } = props2;
   if (environment.isRendering) {
-    useLayoutEffect10(() => {
+    useLayoutEffect11(() => {
       if (window.process?.env?.NODE_ENV === "test") {
         return;
       }
@@ -7061,9 +7078,10 @@ var init_esm = __esm(() => {
     OBJECTFIT_CONTAIN_CLASS_NAME: () => OBJECTFIT_CONTAIN_CLASS_NAME
   });
   injected = {};
+  MaxMediaCacheSizeContext = React26.createContext(null);
   listeners = [];
   MediaEnabledContext = createContext19(null);
-  CurrentScaleContext = React27.createContext(null);
+  CurrentScaleContext = React28.createContext(null);
   PreviewSizeContext = createContext20({
     setSize: () => {
       return;
@@ -7074,6 +7092,7 @@ var init_esm = __esm(() => {
   addSequenceStackTraces(OffthreadVideo);
   compositionSelectorRef = createRef3();
   Internals = {
+    MaxMediaCacheSizeContext,
     useUnsafeVideoConfig,
     useFrameForVolumeProp,
     useTimelinePosition,
@@ -7088,7 +7107,7 @@ var init_esm = __esm(() => {
     CompositionSetters,
     SequenceManager,
     SequenceVisibilityToggleContext,
-    RemotionRoot,
+    RemotionRootContexts,
     CompositionManagerProvider,
     useVideo,
     getRoot,
@@ -7129,7 +7148,7 @@ var init_esm = __esm(() => {
     resolveVideoConfig,
     useResolvedVideoConfig,
     resolveCompositionsRef,
-    ResolveCompositionConfig,
+    ResolveCompositionConfigInStudio,
     REMOTION_STUDIO_CONTAINER_ELEMENT,
     RenderAssetManager,
     persistCurrentFrame,
@@ -7166,7 +7185,8 @@ var init_esm = __esm(() => {
     useIsPlayerBuffering,
     TimelinePosition: exports_timeline_position_state,
     DelayRenderContextType,
-    TimelineContext
+    TimelineContext,
+    RenderAssetManagerProvider
   };
   PERCENTAGE = NUMBER + "%";
   IsInsideSeriesContext = createContext21(false);
@@ -8571,7 +8591,7 @@ var getDefaultConfig = () => {
 var twMerge = /* @__PURE__ */ createTailwindMerge(getDefaultConfig);
 
 // ../design/dist/esm/index.mjs
-import React7, { useEffect as useEffect23, useMemo as useMemo33, useState as useState21 } from "react";
+import React7, { useEffect as useEffect22, useMemo as useMemo33, useState as useState21 } from "react";
 
 // ../paths/dist/esm/index.mjs
 var cutLInstruction = ({
@@ -12712,7 +12732,7 @@ var extrudeAndTransformElement = (options) => {
 init_esm();
 import { jsx as jsx37, Fragment } from "react/jsx-runtime";
 import { jsx as jsx210, jsxs as jsxs3 } from "react/jsx-runtime";
-import { useEffect as useEffect24, useMemo as useMemo210, useRef as useRef18 } from "react";
+import { useEffect as useEffect23, useMemo as useMemo210, useRef as useRef18 } from "react";
 import { jsx as jsx38 } from "react/jsx-runtime";
 import { jsx as jsx43, jsxs as jsxs23 } from "react/jsx-runtime";
 import React42 from "react";
@@ -12722,7 +12742,7 @@ import { jsx as jsx73, jsxs as jsxs32 } from "react/jsx-runtime";
 import React52 from "react";
 import { jsx as jsx83 } from "react/jsx-runtime";
 import { jsx as jsx93 } from "react/jsx-runtime";
-import * as React34 from "react";
+import * as React342 from "react";
 import * as ReactDOM4 from "react-dom";
 import React9 from "react";
 import * as React62 from "react";
@@ -12758,20 +12778,20 @@ import ReactDOM3 from "react-dom";
 import { jsx as jsx192 } from "react/jsx-runtime";
 import * as React24 from "react";
 import * as React252 from "react";
-import * as React26 from "react";
+import * as React262 from "react";
 import { jsx as jsx202 } from "react/jsx-runtime";
 import * as React332 from "react";
 import * as React29 from "react";
 import { useState as useState112 } from "react";
-import * as React272 from "react";
-import * as React28 from "react";
+import * as React27 from "react";
+import * as React282 from "react";
 import * as React322 from "react";
-import * as React312 from "react";
+import * as React31 from "react";
 import * as React30 from "react";
 import { Fragment as Fragment52, jsx as jsx212, 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";
-import * as React352 from "react";
+import * as React35 from "react";
 import { jsx as jsx223, jsxs as jsxs5 } from "react/jsx-runtime";
 import { jsx as jsx232 } from "react/jsx-runtime";
 import { jsx as jsx242 } from "react/jsx-runtime";
@@ -12798,7 +12818,7 @@ var useHoverTransforms = (ref, disabled) => {
     isActive: false
   });
   const eventTarget = useMemo33(() => new EventTarget, []);
-  useEffect23(() => {
+  useEffect22(() => {
     if (disabled) {
       eventTarget.dispatchEvent(new Event("disabled"));
     } else {
@@ -12945,7 +12965,7 @@ var getAngle = (ref, coordinates) => {
 var lastCoordinates = null;
 var useMousePosition = (ref) => {
   const [angle, setAngle] = useState21(getAngle(ref.current, lastCoordinates));
-  useEffect23(() => {
+  useEffect22(() => {
     const element = ref.current;
     if (!element) {
       return;
@@ -13004,6 +13024,7 @@ var Outer = ({
   const depth = depthFromHover;
   const frontFace = reduceMatrices([
     translateZ(-depth / 2 + depthFromClick),
+    translateZ(1.1),
     transformation
   ]);
   const centerOriented = reduceMatrices([
@@ -13065,7 +13086,7 @@ var Spinner = ({ size, duration }) => {
     };
   }, [size]);
   const pathsRef = useRef18([]);
-  useEffect24(() => {
+  useEffect23(() => {
     const animate = () => {
       const now = performance.now();
       for (let index = 0;index < lines; index++) {
@@ -13145,7 +13166,7 @@ var Button = ({ children, className, disabled, depth, loading, ...buttonProps })
     ...buttonProps,
     children: [
       /* @__PURE__ */ jsx43("div", {
-        className: cn(loading && "invisible"),
+        className: cn(loading && "invisible", "inline-flex"),
         children
       }),
       loading ? /* @__PURE__ */ jsx43("div", {
@@ -16143,7 +16164,7 @@ function usePrevious(value) {
   }, [value]);
 }
 var NAME2 = "VisuallyHidden";
-var VisuallyHidden = React26.forwardRef((props, forwardedRef) => {
+var VisuallyHidden = React262.forwardRef((props, forwardedRef) => {
   return /* @__PURE__ */ jsx202(Primitive.span, {
     ...props,
     ref: forwardedRef,
@@ -16351,7 +16372,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) {
@@ -16473,7 +16494,7 @@ var SideCar = function(_a) {
   if (!Target) {
     throw new Error("Sidecar medium not found");
   }
-  return React28.createElement(Target, __assign({}, rest));
+  return React282.createElement(Target, __assign({}, rest));
 };
 SideCar.isSideCarExport = true;
 function exportSidecar(medium, exported) {
@@ -16668,7 +16689,7 @@ var getCurrentUseCounter = function() {
   return isFinite(counter) ? counter : 0;
 };
 var useLockAttribute = function() {
-  React312.useEffect(function() {
+  React31.useEffect(function() {
     document.body.setAttribute(lockAttribute, (getCurrentUseCounter() + 1).toString());
     return function() {
       var newCounter = getCurrentUseCounter() - 1;
@@ -16683,10 +16704,10 @@ var useLockAttribute = function() {
 var RemoveScrollBar = function(_a) {
   var { noRelative, noImportant, gapMode: _b } = _a, gapMode = _b === undefined ? "margin" : _b;
   useLockAttribute();
-  var gap = React312.useMemo(function() {
+  var gap = React31.useMemo(function() {
     return getGapWidth(gapMode);
   }, [gapMode]);
-  return React312.createElement(Style, { styles: getStyles(gap, !noRelative, gapMode, !noImportant ? "!important" : "") });
+  return React31.createElement(Style, { styles: getStyles(gap, !noRelative, gapMode, !noImportant ? "!important" : "") });
 };
 var passiveSupported = false;
 if (typeof window !== "undefined") {
@@ -16987,9 +17008,9 @@ var Select = (props) => {
     required
   } = props;
   const popperScope = usePopperScope(__scopeSelect);
-  const [trigger, setTrigger] = React34.useState(null);
-  const [valueNode, setValueNode] = React34.useState(null);
-  const [valueNodeHasChildren, setValueNodeHasChildren] = React34.useState(false);
+  const [trigger, setTrigger] = React342.useState(null);
+  const [valueNode, setValueNode] = React342.useState(null);
+  const [valueNodeHasChildren, setValueNodeHasChildren] = React342.useState(false);
   const direction = useDirection(dir);
   const [open = false, setOpen] = useControllableState({
     prop: openProp,
@@ -17001,9 +17022,9 @@ var Select = (props) => {
     defaultProp: defaultValue,
     onChange: onValueChange
   });
-  const triggerPointerDownPosRef = React34.useRef(null);
+  const triggerPointerDownPosRef = React342.useRef(null);
   const isFormControl = trigger ? Boolean(trigger.closest("form")) : true;
-  const [nativeOptionsSet, setNativeOptionsSet] = React34.useState(/* @__PURE__ */ new Set);
+  const [nativeOptionsSet, setNativeOptionsSet] = React342.useState(/* @__PURE__ */ new Set);
   const nativeSelectKey = Array.from(nativeOptionsSet).map((option) => option.props.value).join(";");
   return /* @__PURE__ */ jsx212(Root22, { ...popperScope, children: /* @__PURE__ */ jsxs4(SelectProvider, {
     required,
@@ -17025,10 +17046,10 @@ var Select = (props) => {
     children: [
       /* @__PURE__ */ jsx212(Collection.Provider, { scope: __scopeSelect, children: /* @__PURE__ */ jsx212(SelectNativeOptionsProvider, {
         scope: props.__scopeSelect,
-        onNativeOptionAdd: React34.useCallback((option) => {
+        onNativeOptionAdd: React342.useCallback((option) => {
           setNativeOptionsSet((prev) => new Set(prev).add(option));
         }, []),
-        onNativeOptionRemove: React34.useCallback((option) => {
+        onNativeOptionRemove: React342.useCallback((option) => {
           setNativeOptionsSet((prev) => {
             const optionsSet = new Set(prev);
             optionsSet.delete(option);
@@ -17056,7 +17077,7 @@ var Select = (props) => {
 };
 Select.displayName = SELECT_NAME;
 var TRIGGER_NAME = "SelectTrigger";
-var SelectTrigger = React34.forwardRef((props, forwardedRef) => {
+var SelectTrigger = React342.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, disabled = false, ...triggerProps } = props;
   const popperScope = usePopperScope(__scopeSelect);
   const context = useSelectContext(TRIGGER_NAME, __scopeSelect);
@@ -17124,7 +17145,7 @@ var SelectTrigger = React34.forwardRef((props, forwardedRef) => {
 });
 SelectTrigger.displayName = TRIGGER_NAME;
 var VALUE_NAME = "SelectValue";
-var SelectValue = React34.forwardRef((props, forwardedRef) => {
+var SelectValue = React342.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, className, style, children, placeholder = "", ...valueProps } = props;
   const context = useSelectContext(VALUE_NAME, __scopeSelect);
   const { onValueNodeHasChildrenChange } = context;
@@ -17142,7 +17163,7 @@ var SelectValue = React34.forwardRef((props, forwardedRef) => {
 });
 SelectValue.displayName = VALUE_NAME;
 var ICON_NAME = "SelectIcon";
-var SelectIcon = React34.forwardRef((props, forwardedRef) => {
+var SelectIcon = React342.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, children, ...iconProps } = props;
   return /* @__PURE__ */ jsx212(Primitive.span, { "aria-hidden": true, ...iconProps, ref: forwardedRef, children: children || "▼" });
 });
@@ -17153,9 +17174,9 @@ var SelectPortal = (props) => {
 };
 SelectPortal.displayName = PORTAL_NAME2;
 var CONTENT_NAME2 = "SelectContent";
-var SelectContent = React34.forwardRef((props, forwardedRef) => {
+var SelectContent = React342.forwardRef((props, forwardedRef) => {
   const context = useSelectContext(CONTENT_NAME2, props.__scopeSelect);
-  const [fragment, setFragment] = React34.useState();
+  const [fragment, setFragment] = React342.useState();
   useLayoutEffect22(() => {
     setFragment(new DocumentFragment);
   }, []);
@@ -17169,7 +17190,7 @@ SelectContent.displayName = CONTENT_NAME2;
 var CONTENT_MARGIN = 10;
 var [SelectContentProvider, useSelectContentContext] = createSelectContext(CONTENT_NAME2);
 var CONTENT_IMPL_NAME = "SelectContentImpl";
-var SelectContentImpl = React34.forwardRef((props, forwardedRef) => {
+var SelectContentImpl = React342.forwardRef((props, forwardedRef) => {
   const {
     __scopeSelect,
     position = "item-aligned",
@@ -17189,20 +17210,20 @@ var SelectContentImpl = React34.forwardRef((props, forwardedRef) => {
     ...contentProps
   } = props;
   const context = useSelectContext(CONTENT_NAME2, __scopeSelect);
-  const [content, setContent] = React34.useState(null);
-  const [viewport, setViewport] = React34.useState(null);
+  const [content, setContent] = React342.useState(null);
+  const [viewport, setViewport] = React342.useState(null);
   const composedRefs = useComposedRefs(forwardedRef, (node) => setContent(node));
-  const [selectedItem, setSelectedItem] = React34.useState(null);
-  const [selectedItemText, setSelectedItemText] = React34.useState(null);
+  const [selectedItem, setSelectedItem] = React342.useState(null);
+  const [selectedItemText, setSelectedItemText] = React342.useState(null);
   const getItems = useCollection(__scopeSelect);
-  const [isPositioned, setIsPositioned] = React34.useState(false);
-  const firstValidItemFoundRef = React34.useRef(false);
-  React34.useEffect(() => {
+  const [isPositioned, setIsPositioned] = React342.useState(false);
+  const firstValidItemFoundRef = React342.useRef(false);
+  React342.useEffect(() => {
     if (content)
       return hideOthers(content);
   }, [content]);
   useFocusGuards();
-  const focusFirst2 = React34.useCallback((candidates) => {
+  const focusFirst2 = React342.useCallback((candidates) => {
     const [firstItem, ...restItems] = getItems().map((item) => item.ref.current);
     const [lastItem] = restItems.slice(-1);
     const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;
@@ -17219,14 +17240,14 @@ var SelectContentImpl = React34.forwardRef((props, forwardedRef) => {
         return;
     }
   }, [getItems, viewport]);
-  const focusSelectedItem = React34.useCallback(() => focusFirst2([selectedItem, content]), [focusFirst2, selectedItem, content]);
-  React34.useEffect(() => {
+  const focusSelectedItem = React342.useCallback(() => focusFirst2([selectedItem, content]), [focusFirst2, selectedItem, content]);
+  React342.useEffect(() => {
     if (isPositioned) {
       focusSelectedItem();
     }
   }, [isPositioned, focusSelectedItem]);
   const { onOpenChange, triggerPointerDownPosRef } = context;
-  React34.useEffect(() => {
+  React342.useEffect(() => {
     if (content) {
       let pointerMoveDelta = { x: 0, y: 0 };
       const handlePointerMove = (event) => {
@@ -17256,7 +17277,7 @@ var SelectContentImpl = React34.forwardRef((props, forwardedRef) => {
       };
     }
   }, [content, onOpenChange, triggerPointerDownPosRef]);
-  React34.useEffect(() => {
+  React342.useEffect(() => {
     const close = () => onOpenChange(false);
     window.addEventListener("blur", close);
     window.addEventListener("resize", close);
@@ -17273,7 +17294,7 @@ var SelectContentImpl = React34.forwardRef((props, forwardedRef) => {
       setTimeout(() => nextItem.ref.current.focus());
     }
   });
-  const itemRefCallback = React34.useCallback((node, value, disabled) => {
+  const itemRefCallback = React342.useCallback((node, value, disabled) => {
     const isFirstValidItem = !firstValidItemFoundRef.current && !disabled;
     const isSelectedItem = context.value !== undefined && context.value === value;
     if (isSelectedItem || isFirstValidItem) {
@@ -17282,8 +17303,8 @@ var SelectContentImpl = React34.forwardRef((props, forwardedRef) => {
         firstValidItemFoundRef.current = true;
     }
   }, [context.value]);
-  const handleItemLeave = React34.useCallback(() => content?.focus(), [content]);
-  const itemTextRefCallback = React34.useCallback((node, value, disabled) => {
+  const handleItemLeave = React342.useCallback(() => content?.focus(), [content]);
+  const itemTextRefCallback = React342.useCallback((node, value, disabled) => {
     const isFirstValidItem = !firstValidItemFoundRef.current && !disabled;
     const isSelectedItem = context.value !== undefined && context.value === value;
     if (isSelectedItem || isFirstValidItem) {
@@ -17378,18 +17399,18 @@ var SelectContentImpl = React34.forwardRef((props, forwardedRef) => {
 });
 SelectContentImpl.displayName = CONTENT_IMPL_NAME;
 var ITEM_ALIGNED_POSITION_NAME = "SelectItemAlignedPosition";
-var SelectItemAlignedPosition = React34.forwardRef((props, forwardedRef) => {
+var SelectItemAlignedPosition = React342.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, onPlaced, ...popperProps } = props;
   const context = useSelectContext(CONTENT_NAME2, __scopeSelect);
   const contentContext = useSelectContentContext(CONTENT_NAME2, __scopeSelect);
-  const [contentWrapper, setContentWrapper] = React34.useState(null);
-  const [content, setContent] = React34.useState(null);
+  const [contentWrapper, setContentWrapper] = React342.useState(null);
+  const [content, setContent] = React342.useState(null);
   const composedRefs = useComposedRefs(forwardedRef, (node) => setContent(node));
   const getItems = useCollection(__scopeSelect);
-  const shouldExpandOnScrollRef = React34.useRef(false);
-  const shouldRepositionRef = React34.useRef(true);
+  const shouldExpandOnScrollRef = React342.useRef(false);
+  const shouldRepositionRef = React342.useRef(true);
   const { viewport, selectedItem, selectedItemText, focusSelectedItem } = contentContext;
-  const position = React34.useCallback(() => {
+  const position = React342.useCallback(() => {
     if (context.trigger && context.valueNode && contentWrapper && content && viewport && selectedItem && selectedItemText) {
       const triggerRect = context.trigger.getBoundingClientRect();
       const contentRect = content.getBoundingClientRect();
@@ -17470,12 +17491,12 @@ var SelectItemAlignedPosition = React34.forwardRef((props, forwardedRef) => {
     onPlaced
   ]);
   useLayoutEffect22(() => position(), [position]);
-  const [contentZIndex, setContentZIndex] = React34.useState();
+  const [contentZIndex, setContentZIndex] = React342.useState();
   useLayoutEffect22(() => {
     if (content)
       setContentZIndex(window.getComputedStyle(content).zIndex);
   }, [content]);
-  const handleScrollButtonChange = React34.useCallback((node) => {
+  const handleScrollButtonChange = React342.useCallback((node) => {
     if (node && shouldRepositionRef.current === true) {
       position();
       focusSelectedItem?.();
@@ -17509,7 +17530,7 @@ var SelectItemAlignedPosition = React34.forwardRef((props, forwardedRef) => {
 });
 SelectItemAlignedPosition.displayName = ITEM_ALIGNED_POSITION_NAME;
 var POPPER_POSITION_NAME = "SelectPopperPosition";
-var SelectPopperPosition = React34.forwardRef((props, forwardedRef) => {
+var SelectPopperPosition = React342.forwardRef((props, forwardedRef) => {
   const {
     __scopeSelect,
     align = "start",
@@ -17539,12 +17560,12 @@ var SelectPopperPosition = React34.forwardRef((props, forwardedRef) => {
 SelectPopperPosition.displayName = POPPER_POSITION_NAME;
 var [SelectViewportProvider, useSelectViewportContext] = createSelectContext(CONTENT_NAME2, {});
 var VIEWPORT_NAME = "SelectViewport";
-var SelectViewport = React34.forwardRef((props, forwardedRef) => {
+var SelectViewport = React342.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, nonce, ...viewportProps } = props;
   const contentContext = useSelectContentContext(VIEWPORT_NAME, __scopeSelect);
   const viewportContext = useSelectViewportContext(VIEWPORT_NAME, __scopeSelect);
   const composedRefs = useComposedRefs(forwardedRef, contentContext.onViewportChange);
-  const prevScrollTopRef = React34.useRef(0);
+  const prevScrollTopRef = React342.useRef(0);
   return /* @__PURE__ */ jsxs4(Fragment52, { children: [
     /* @__PURE__ */ jsx212("style", {
       dangerouslySetInnerHTML: {
@@ -17593,14 +17614,14 @@ var SelectViewport = React34.forwardRef((props, forwardedRef) => {
 SelectViewport.displayName = VIEWPORT_NAME;
 var GROUP_NAME = "SelectGroup";
 var [SelectGroupContextProvider, useSelectGroupContext] = createSelectContext(GROUP_NAME);
-var SelectGroup = React34.forwardRef((props, forwardedRef) => {
+var SelectGroup = React342.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, ...groupProps } = props;
   const groupId = useId();
   return /* @__PURE__ */ jsx212(SelectGroupContextProvider, { scope: __scopeSelect, id: groupId, children: /* @__PURE__ */ jsx212(Primitive.div, { role: "group", "aria-labelledby": groupId, ...groupProps, ref: forwardedRef }) });
 });
 SelectGroup.displayName = GROUP_NAME;
 var LABEL_NAME = "SelectLabel";
-var SelectLabel = React34.forwardRef((props, forwardedRef) => {
+var SelectLabel = React342.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, ...labelProps } = props;
   const groupContext = useSelectGroupContext(LABEL_NAME, __scopeSelect);
   return /* @__PURE__ */ jsx212(Primitive.div, { id: groupContext.id, ...labelProps, ref: forwardedRef });
@@ -17608,7 +17629,7 @@ var SelectLabel = React34.forwardRef((props, forwardedRef) => {
 SelectLabel.displayName = LABEL_NAME;
 var ITEM_NAME = "SelectItem";
 var [SelectItemContextProvider, useSelectItemContext] = createSelectContext(ITEM_NAME);
-var SelectItem = React34.forwardRef((props, forwardedRef) => {
+var SelectItem = React342.forwardRef((props, forwardedRef) => {
   const {
     __scopeSelect,
     value,
@@ -17619,8 +17640,8 @@ var SelectItem = React34.forwardRef((props, forwardedRef) => {
   const context = useSelectContext(ITEM_NAME, __scopeSelect);
   const contentContext = useSelectContentContext(ITEM_NAME, __scopeSelect);
   const isSelected = context.value === value;
-  const [textValue, setTextValue] = React34.useState(textValueProp ?? "");
-  const [isFocused, setIsFocused] = React34.useState(false);
+  const [textValue, setTextValue] = React342.useState(textValueProp ?? "");
+  const [isFocused, setIsFocused] = React342.useState(false);
   const composedRefs = useComposedRefs(forwardedRef, (node) => contentContext.itemRefCallback?.(node, value, disabled));
   const textId = useId();
   const handleSelect = () => {
@@ -17638,7 +17659,7 @@ var SelectItem = React34.forwardRef((props, forwardedRef) => {
     disabled,
     textId,
     isSelected,
-    onItemTextChange: React34.useCallback((node) => {
+    onItemTextChange: React342.useCallback((node) => {
       setTextValue((prevTextValue) => prevTextValue || (node?.textContent ?? "").trim());
     }, []),
     children: /* @__PURE__ */ jsx212(Collection.ItemSlot, {
@@ -17687,16 +17708,16 @@ var SelectItem = React34.forwardRef((props, forwardedRef) => {
 });
 SelectItem.displayName = ITEM_NAME;
 var ITEM_TEXT_NAME = "SelectItemText";
-var SelectItemText = React34.forwardRef((props, forwardedRef) => {
+var SelectItemText = React342.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, className, style, ...itemTextProps } = props;
   const context = useSelectContext(ITEM_TEXT_NAME, __scopeSelect);
   const contentContext = useSelectContentContext(ITEM_TEXT_NAME, __scopeSelect);
   const itemContext = useSelectItemContext(ITEM_TEXT_NAME, __scopeSelect);
   const nativeOptionsContext = useSelectNativeOptionsContext(ITEM_TEXT_NAME, __scopeSelect);
-  const [itemTextNode, setItemTextNode] = React34.useState(null);
+  const [itemTextNode, setItemTextNode] = React342.useState(null);
   const composedRefs = useComposedRefs(forwardedRef, (node) => setItemTextNode(node), itemContext.onItemTextChange, (node) => contentContext.itemTextRefCallback?.(node, itemContext.value, itemContext.disabled));
   const textContent = itemTextNode?.textContent;
-  const nativeOption = React34.useMemo(() => /* @__PURE__ */ jsx212("option", { value: itemContext.value, disabled: itemContext.disabled, children: textContent }, itemContext.value), [itemContext.disabled, itemContext.value, textContent]);
+  const nativeOption = React342.useMemo(() => /* @__PURE__ */ jsx212("option", { value: itemContext.value, disabled: itemContext.disabled, children: textContent }, itemContext.value), [itemContext.disabled, itemContext.value, textContent]);
   const { onNativeOptionAdd, onNativeOptionRemove } = nativeOptionsContext;
   useLayoutEffect22(() => {
     onNativeOptionAdd(nativeOption);
@@ -17709,17 +17730,17 @@ var SelectItemText = React34.forwardRef((props, forwardedRef) => {
 });
 SelectItemText.displayName = ITEM_TEXT_NAME;
 var ITEM_INDICATOR_NAME = "SelectItemIndicator";
-var SelectItemIndicator = React34.forwardRef((props, forwardedRef) => {
+var SelectItemIndicator = React342.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, ...itemIndicatorProps } = props;
   const itemContext = useSelectItemContext(ITEM_INDICATOR_NAME, __scopeSelect);
   return itemContext.isSelected ? /* @__PURE__ */ jsx212(Primitive.span, { "aria-hidden": true, ...itemIndicatorProps, ref: forwardedRef }) : null;
 });
 SelectItemIndicator.displayName = ITEM_INDICATOR_NAME;
 var SCROLL_UP_BUTTON_NAME = "SelectScrollUpButton";
-var SelectScrollUpButton = React34.forwardRef((props, forwardedRef) => {
+var SelectScrollUpButton = React342.forwardRef((props, forwardedRef) => {
   const contentContext = useSelectContentContext(SCROLL_UP_BUTTON_NAME, props.__scopeSelect);
   const viewportContext = useSelectViewportContext(SCROLL_UP_BUTTON_NAME, props.__scopeSelect);
-  const [canScrollUp, setCanScrollUp] = React34.useState(false);
+  const [canScrollUp, setCanScrollUp] = React342.useState(false);
   const composedRefs = useComposedRefs(forwardedRef, viewportContext.onScrollButtonChange);
   useLayoutEffect22(() => {
     if (contentContext.viewport && contentContext.isPositioned) {
@@ -17747,10 +17768,10 @@ var SelectScrollUpButton = React34.forwardRef((props, forwardedRef) => {
 });
 SelectScrollUpButton.displayName = SCROLL_UP_BUTTON_NAME;
 var SCROLL_DOWN_BUTTON_NAME = "SelectScrollDownButton";
-var SelectScrollDownButton = React34.forwardRef((props, forwardedRef) => {
+var SelectScrollDownButton = React342.forwardRef((props, forwardedRef) => {
   const contentContext = useSelectContentContext(SCROLL_DOWN_BUTTON_NAME, props.__scopeSelect);
   const viewportContext = useSelectViewportContext(SCROLL_DOWN_BUTTON_NAME, props.__scopeSelect);
-  const [canScrollDown, setCanScrollDown] = React34.useState(false);
+  const [canScrollDown, setCanScrollDown] = React342.useState(false);
   const composedRefs = useComposedRefs(forwardedRef, viewportContext.onScrollButtonChange);
   useLayoutEffect22(() => {
     if (contentContext.viewport && contentContext.isPositioned) {
@@ -17778,18 +17799,18 @@ var SelectScrollDownButton = React34.forwardRef((props, forwardedRef) => {
   }) : null;
 });
 SelectScrollDownButton.displayName = SCROLL_DOWN_BUTTON_NAME;
-var SelectScrollButtonImpl = React34.forwardRef((props, forwardedRef) => {
+var SelectScrollButtonImpl = React342.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, onAutoScroll, ...scrollIndicatorProps } = props;
   const contentContext = useSelectContentContext("SelectScrollButton", __scopeSelect);
-  const autoScrollTimerRef = React34.useRef(null);
+  const autoScrollTimerRef = React342.useRef(null);
   const getItems = useCollection(__scopeSelect);
-  const clearAutoScrollTimer = React34.useCallback(() => {
+  const clearAutoScrollTimer = React342.useCallback(() => {
     if (autoScrollTimerRef.current !== null) {
       window.clearInterval(autoScrollTimerRef.current);
       autoScrollTimerRef.current = null;
     }
   }, []);
-  React34.useEffect(() => {
+  React342.useEffect(() => {
     return () => clearAutoScrollTimer();
   }, [clearAutoScrollTimer]);
   useLayoutEffect22(() => {
@@ -17818,13 +17839,13 @@ var SelectScrollButtonImpl = React34.forwardRef((props, forwardedRef) => {
   });
 });
 var SEPARATOR_NAME = "SelectSeparator";
-var SelectSeparator = React34.forwardRef((props, forwardedRef) => {
+var SelectSeparator = React342.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, ...separatorProps } = props;
   return /* @__PURE__ */ jsx212(Primitive.div, { "aria-hidden": true, ...separatorProps, ref: forwardedRef });
 });
 SelectSeparator.displayName = SEPARATOR_NAME;
 var ARROW_NAME2 = "SelectArrow";
-var SelectArrow = React34.forwardRef((props, forwardedRef) => {
+var SelectArrow = React342.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, ...arrowProps } = props;
   const popperScope = usePopperScope(__scopeSelect);
   const context = useSelectContext(ARROW_NAME2, __scopeSelect);
@@ -17835,12 +17856,12 @@ SelectArrow.displayName = ARROW_NAME2;
 function shouldShowPlaceholder(value) {
   return value === "" || value === undefined;
 }
-var BubbleSelect = React34.forwardRef((props, forwardedRef) => {
+var BubbleSelect = React342.forwardRef((props, forwardedRef) => {
   const { value, ...selectProps } = props;
-  const ref = React34.useRef(null);
+  const ref = React342.useRef(null);
   const composedRefs = useComposedRefs(forwardedRef, ref);
   const prevValue = usePrevious(value);
-  React34.useEffect(() => {
+  React342.useEffect(() => {
     const select = ref.current;
     const selectProto = window.HTMLSelectElement.prototype;
     const descriptor = Object.getOwnPropertyDescriptor(selectProto, "value");
@@ -17856,9 +17877,9 @@ var BubbleSelect = React34.forwardRef((props, forwardedRef) => {
 BubbleSelect.displayName = "BubbleSelect";
 function useTypeaheadSearch(onSearchChange) {
   const handleSearchChange = useCallbackRef(onSearchChange);
-  const searchRef = React34.useRef("");
-  const timerRef = React34.useRef(0);
-  const handleTypeaheadSearch = React34.useCallback((key) => {
+  const searchRef = React342.useRef("");
+  const timerRef = React342.useRef(0);
+  const handleTypeaheadSearch = React342.useCallback((key) => {
     const search = searchRef.current + key;
     handleSearchChange(search);
     (function updateSearch(value) {
@@ -17868,11 +17889,11 @@ function useTypeaheadSearch(onSearchChange) {
         timerRef.current = window.setTimeout(() => updateSearch(""), 1000);
     })(search);
   }, [handleSearchChange]);
-  const resetTypeahead = React34.useCallback(() => {
+  const resetTypeahead = React342.useCallback(() => {
     searchRef.current = "";
     window.clearTimeout(timerRef.current);
   }, []);
-  React34.useEffect(() => {
+  React342.useEffect(() => {
     return () => window.clearTimeout(timerRef.current);
   }, []);
   return [searchRef, handleTypeaheadSearch, resetTypeahead];
@@ -17961,7 +17982,7 @@ var ChevronDown = createLucideIcon("ChevronDown", [
 var ChevronUp = createLucideIcon("ChevronUp", [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]]);
 var Select2 = Root222;
 var SelectValue2 = Value;
-var SelectTrigger2 = React352.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs5(Trigger, {
+var SelectTrigger2 = React35.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs5(Trigger, {
   ref,
   className: cn("flex h-10 w-full items-center justify-between rounded-md border-black border-2 border-b-4 bg-card-bg px-3 py-5 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 font-brand", className),
   ...props,
@@ -17976,7 +17997,7 @@ var SelectTrigger2 = React352.forwardRef(({ className, children, ...props }, ref
   ]
 }));
 SelectTrigger2.displayName = Trigger.displayName;
-var SelectScrollUpButton2 = React352.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx223(ScrollUpButton, {
+var SelectScrollUpButton2 = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx223(ScrollUpButton, {
   ref,
   className: cn("flex cursor-default items-center justify-center py-1", className),
   ...props,
@@ -17985,7 +18006,7 @@ var SelectScrollUpButton2 = React352.forwardRef(({ className, ...props }, ref) =
   })
 }));
 SelectScrollUpButton2.displayName = ScrollUpButton.displayName;
-var SelectScrollDownButton2 = React352.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx223(ScrollDownButton, {
+var SelectScrollDownButton2 = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx223(ScrollDownButton, {
   ref,
   className: cn("flex cursor-default items-center justify-center py-1", className),
   ...props,
@@ -17994,7 +18015,7 @@ var SelectScrollDownButton2 = React352.forwardRef(({ className, ...props }, ref)
   })
 }));
 SelectScrollDownButton2.displayName = ScrollDownButton.displayName;
-var SelectContent2 = React352.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx223(Portal2, {
+var SelectContent2 = React35.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx223(Portal2, {
   children: /* @__PURE__ */ jsxs5(Content2, {
     ref,
     className: cn(" border-2 border-black relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md font-brand bg-card-bg text-text shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className),
@@ -18011,13 +18032,13 @@ var SelectContent2 = React352.forwardRef(({ className, children, position = "pop
   })
 }));
 SelectContent2.displayName = Content2.displayName;
-var SelectLabel2 = React352.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx223(Label, {
+var SelectLabel2 = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx223(Label, {
   ref,
   className: cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className),
   ...props
 }));
 SelectLabel2.displayName = Label.displayName;
-var SelectItem2 = React352.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs5(Item, {
+var SelectItem2 = React35.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs5(Item, {
   ref,
   className: cn("relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden focus:bg-slate-200 dark:focus:bg-white/10 data-disabled:pointer-events-none data-disabled:opacity-50 font-brand", className),
   ...props,
@@ -18036,7 +18057,7 @@ var SelectItem2 = React352.forwardRef(({ className, children, ...props }, ref) =
   ]
 }));
 SelectItem2.displayName = Item.displayName;
-var SelectSeparator2 = React352.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx223(Separator, {
+var SelectSeparator2 = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx223(Separator, {
   ref,
   className: cn("-mx-1 my-1 h-px bg-muted", className),
   ...props
@@ -19385,7 +19406,7 @@ function cn2(...inputs) {
 }
 
 // src/helpers/use-el-size.ts
-import { useCallback as useCallback26, useEffect as useEffect37, useMemo as useMemo41, useState as useState34 } from "react";
+import { useCallback as useCallback26, useEffect as useEffect36, useMemo as useMemo41, useState as useState34 } from "react";
 var useElementSize = (ref) => {
   const [size4, setSize] = useState34(null);
   const observer = useMemo41(() => {
@@ -19409,7 +19430,7 @@ var useElementSize = (ref) => {
       height: rect[0].height
     });
   }, [ref]);
-  useEffect37(() => {
+  useEffect36(() => {
     updateSize();
     if (!observer) {
       return;
@@ -19489,16 +19510,16 @@ var CommandCopyButton = ({ copied, customSvg }) => {
 
 // src/components/homepage/MuxVideo.tsx
 import Hls2 from "hls.js";
-import { forwardRef as forwardRef27, useEffect as useEffect39, useImperativeHandle as useImperativeHandle11, useRef as useRef33 } from "react";
+import { forwardRef as forwardRef27, useEffect as useEffect38, useImperativeHandle as useImperativeHandle12, useRef as useRef33 } from "react";
 
 // src/components/homepage/VideoPlayerWithControls.tsx
 import Hls from "hls.js";
 import"plyr/dist/plyr.css";
-import { forwardRef as forwardRef26, useCallback as useCallback27, useEffect as useEffect38, useRef as useRef32, useState as useState35 } from "react";
+import { forwardRef as forwardRef26, useCallback as useCallback27, useEffect as useEffect37, useRef as useRef32, useState as useState35 } from "react";
 import { jsx as jsx41 } from "react/jsx-runtime";
 var useCombinedRefs = function(...refs) {
   const targetRef = useRef32(null);
-  useEffect38(() => {
+  useEffect37(() => {
     refs.forEach((ref) => {
       if (!ref)
         return;
@@ -19527,12 +19548,12 @@ var VideoPlayerWithControls = forwardRef26(({ playbackId, poster, currentTime, o
       console.error("Error getting img dimensions", event);
     }
   }, [onLoaded, onSize]);
-  useEffect38(() => {
+  useEffect37(() => {
     const img = new Image;
     img.onload = (evt) => onImageLoad(evt);
     img.src = poster;
   }, [onImageLoad, poster]);
-  useEffect38(() => {
+  useEffect37(() => {
     const video = videoRef.current;
     const src = `https://stream.mux.com/${playbackId}.m3u8`;
     let hls;
@@ -19575,7 +19596,7 @@ var VideoPlayerWithControls = forwardRef26(({ playbackId, poster, currentTime, o
       }
     };
   }, [playbackId, playerInitTime, videoError, videoRef]);
-  useEffect38(() => {
+  useEffect37(() => {
     const video = videoRef.current;
     if (currentTime && video) {
       video.currentTime = currentTime;
@@ -19601,8 +19622,8 @@ var getVideoToPlayUrl = (muxId) => {
 var MuxVideoForward = ({ muxId, ...props }, ref) => {
   const videoRef = useRef33(null);
   const vidUrl = getVideoToPlayUrl(muxId);
-  useImperativeHandle11(ref, () => videoRef.current, []);
-  useEffect39(() => {
+  useImperativeHandle12(ref, () => videoRef.current, []);
+  useEffect38(() => {
     let hls;
     if (videoRef.current) {
       const { current } = videoRef;