@remotion/studio 4.0.397 → 4.0.398

package/dist/esm/previewEntry.mjs

@@ -34,7 +34,7 @@ import { Internals as Internals65 } from "remotion";
 
 // src/components/Editor.tsx
 import { PlayerInternals as PlayerInternals19 } from "@remotion/player";
-import React176, { useCallback as useCallback134, useEffect as useEffect79, useMemo as useMemo135 } from "react";
+import React177, { useCallback as useCallback135, useEffect as useEffect80, useMemo as useMemo136 } from "react";
 import { Internals as Internals61 } from "remotion";
 
 // src/helpers/colors.ts
@@ -7279,10 +7279,10 @@ var MenuBuildIndicator = () => {
 };
 
 // src/components/SidebarCollapserControls.tsx
-import { useCallback as useCallback91, useContext as useContext57, useEffect as useEffect59 } from "react";
+import { useCallback as useCallback91, useContext as useContext57, useEffect as useEffect60 } from "react";
 
 // src/components/TopPanel.tsx
-import { useCallback as useCallback90, useContext as useContext56, useEffect as useEffect58, useMemo as useMemo96 } from "react";
+import { useCallback as useCallback90, useContext as useContext56, useEffect as useEffect59, useMemo as useMemo96 } from "react";
 
 // src/helpers/use-breakpoint.ts
 import { useEffect as useEffect23, useState as useState29 } from "react";
@@ -10612,7 +10612,7 @@ import {
   createRef as createRef10,
   useCallback as useCallback81,
   useContext as useContext46,
-  useEffect as useEffect49,
+  useEffect as useEffect50,
   useImperativeHandle as useImperativeHandle13,
   useMemo as useMemo90,
   useState as useState56
@@ -11192,7 +11192,7 @@ var GlobalPropsEditorUpdateButton = ({ compositionId, currentDefaultProps }) =>
 import React95, {
   useCallback as useCallback69,
   useContext as useContext36,
-  useEffect as useEffect44,
+  useEffect as useEffect45,
   useMemo as useMemo80,
   useState as useState51
 } from "react";
@@ -11587,7 +11587,7 @@ var RenderModalJSONPropsEditor = ({
 };
 
 // src/components/RenderModal/SchemaEditor/SchemaEditor.tsx
-import { useCallback as useCallback67, useEffect as useEffect43, useMemo as useMemo78, useState as useState50 } from "react";
+import { useCallback as useCallback67, useEffect as useEffect44, useMemo as useMemo78, useState as useState50 } from "react";
 import { Internals as Internals30 } from "remotion";
 
 // src/components/RenderModal/SchemaEditor/SchemaErrorMessages.tsx
@@ -12966,7 +12966,7 @@ var ZodArrayEditor = ({
 import { useCallback as useCallback54 } from "react";
 
 // src/components/Checkbox.tsx
-import { useMemo as useMemo67 } from "react";
+import { useEffect as useEffect41, useMemo as useMemo67, useRef as useRef26 } from "react";
 import { jsx as jsx117, jsxs as jsxs54 } from "react/jsx-runtime";
 var size2 = 20;
 var background = {
@@ -12974,6 +12974,12 @@ var background = {
   width: size2,
   position: "relative"
 };
+var bullet = {
+  width: 10,
+  height: 10,
+  backgroundColor: LIGHT_TEXT,
+  borderRadius: "50%"
+};
 var box = {
   display: "flex",
   justifyContent: "center",
@@ -12986,7 +12992,8 @@ var box = {
   pointerEvents: "none",
   color: "white"
 };
-var Checkbox = ({ checked, onChange, disabled, name }) => {
+var Checkbox = ({ checked, onChange, disabled, name, rounded }) => {
+  const ref = useRef26(null);
   const input2 = useMemo67(() => {
     return {
       appearance: "none",
@@ -13000,10 +13007,16 @@ var Checkbox = ({ checked, onChange, disabled, name }) => {
       margin: 0
     };
   }, [disabled]);
+  useEffect41(() => {
+    if (ref.current) {
+      ref.current.style.setProperty("border-radius", rounded ? "50%" : "0%", "important");
+    }
+  }, [rounded]);
   return /* @__PURE__ */ jsxs54("div", {
     style: background,
     children: [
       /* @__PURE__ */ jsx117("input", {
+        ref,
         style: input2,
         type: "checkbox",
         checked,
@@ -13013,7 +13026,9 @@ var Checkbox = ({ checked, onChange, disabled, name }) => {
       }),
       /* @__PURE__ */ jsx117("div", {
         style: box,
-        children: checked ? /* @__PURE__ */ jsx117(Checkmark, {}) : null
+        children: checked ? rounded ? /* @__PURE__ */ jsx117("div", {
+          style: bullet
+        }) : /* @__PURE__ */ jsx117(Checkmark, {}) : null
       })
     ]
   });
@@ -13092,7 +13107,7 @@ var colorWithNewOpacity = (color, opacity, zodTypes) => {
 };
 
 // src/components/NewComposition/InputDragger.tsx
-import React80, { useCallback as useCallback55, useEffect as useEffect41, useMemo as useMemo68, useRef as useRef26, useState as useState45 } from "react";
+import React80, { useCallback as useCallback55, useEffect as useEffect42, useMemo as useMemo68, useRef as useRef27, useState as useState45 } from "react";
 import { interpolate as interpolate2 } from "remotion";
 import { jsx as jsx119 } from "react/jsx-runtime";
 var isInt = (num) => {
@@ -13111,7 +13126,7 @@ var InputDraggerForwardRefFn = ({
   ...props
 }, ref) => {
   const [inputFallback, setInputFallback] = useState45(false);
-  const fallbackRef = useRef26(null);
+  const fallbackRef = useRef27(null);
   const style8 = useMemo68(() => {
     return {
       ...inputBaseStyle,
@@ -13195,7 +13210,7 @@ var InputDraggerForwardRefFn = ({
       once: true
     });
   }, [_step, _min, _max, value, onValueChange]);
-  useEffect41(() => {
+  useEffect42(() => {
     if (inputFallback) {
       fallbackRef.current?.select();
     }
@@ -13246,10 +13261,10 @@ var InputDragger = React80.forwardRef(InputDraggerForwardRefFn);
 // src/components/NewComposition/RemInputTypeColor.tsx
 import {
   forwardRef as forwardRef4,
-  useEffect as useEffect42,
+  useEffect as useEffect43,
   useImperativeHandle as useImperativeHandle12,
   useMemo as useMemo69,
-  useRef as useRef27,
+  useRef as useRef28,
   useState as useState46
 } from "react";
 import { jsx as jsx120 } from "react/jsx-runtime";
@@ -13261,7 +13276,7 @@ var inputBaseStyle3 = {
 var RemInputTypeColorForwardRef = ({ status, ...props }, ref) => {
   const [isFocused, setIsFocused] = useState46(false);
   const [isHovered, setIsHovered] = useState46(false);
-  const inputRef = useRef27(null);
+  const inputRef = useRef28(null);
   const { tabIndex } = useZIndex();
   const style8 = useMemo69(() => {
     return {
@@ -13274,7 +13289,7 @@ var RemInputTypeColorForwardRef = ({ status, ...props }, ref) => {
   useImperativeHandle12(ref, () => {
     return inputRef.current;
   }, []);
-  useEffect42(() => {
+  useEffect43(() => {
     if (!inputRef.current) {
       return;
     }
@@ -15297,7 +15312,7 @@ var SchemaEditor = ({
       childResetRevision: revision
     };
   }, [revision]);
-  useEffect43(() => {
+  useEffect44(() => {
     const bumpRevision = () => {
       setRevision((old) => old + 1);
     };
@@ -15313,7 +15328,7 @@ var SchemaEditor = ({
   const hasChanged = useMemo78(() => {
     return !deepEqual(savedDefaultProps, unsavedDefaultProps);
   }, [savedDefaultProps, unsavedDefaultProps]);
-  useEffect43(() => {
+  useEffect44(() => {
     setUnsavedProps(hasChanged);
   }, [hasChanged]);
   const onQuickSave = useCallback67(() => {
@@ -15323,7 +15338,7 @@ var SchemaEditor = ({
       });
     }
   }, [hasChanged, onSave, showSaveButton, unsavedDefaultProps]);
-  useEffect43(() => {
+  useEffect44(() => {
     const save = keybindings.registerKeybinding({
       event: "keydown",
       key: "s",
@@ -15664,11 +15679,11 @@ var DataEditor = ({
       }));
     }
   }, [readOnlyStudio, unresolvedComposition.id]);
-  useEffect44(() => {
+  useEffect45(() => {
     checkIfCanSaveDefaultProps();
   }, [checkIfCanSaveDefaultProps]);
   const { previewServerState, subscribeToEvent } = useContext36(StudioServerConnectionCtx);
-  useEffect44(() => {
+  useEffect45(() => {
     const unsub = subscribeToEvent("root-file-changed", checkIfCanSaveDefaultProps);
     return () => {
       unsub();
@@ -15858,14 +15873,14 @@ var DataEditor = ({
 };
 
 // src/components/RenderQueue/index.tsx
-import React105, { useContext as useContext42, useEffect as useEffect46, useMemo as useMemo87 } from "react";
+import React105, { useContext as useContext42, useEffect as useEffect47, useMemo as useMemo87 } from "react";
 import { Internals as Internals33 } from "remotion";
 
 // src/components/RenderQueue/RenderQueueItem.tsx
 import {
   useCallback as useCallback78,
   useContext as useContext41,
-  useEffect as useEffect45,
+  useEffect as useEffect46,
   useMemo as useMemo86,
   useState as useState52
 } from "react";
@@ -16502,7 +16517,7 @@ var RenderQueueItem = ({ job, selected }) => {
     });
     pushUrl(`/outputs/${job.outName}`);
   }, [job, scrollCurrentIntoView, selected, setCanvasContent]);
-  useEffect45(() => {
+  useEffect46(() => {
     if (selected) {
       scrollCurrentIntoView();
     }
@@ -16594,7 +16609,7 @@ var RenderQueue = () => {
   const previousJobCount = React105.useRef(jobs.length);
   const jobCount = jobs.length;
   const divRef = React105.useRef(null);
-  useEffect46(() => {
+  useEffect47(() => {
     if (!divRef.current) {
       return;
     }
@@ -16735,7 +16750,7 @@ var RendersTab = ({ selected, onClick }) => {
 import React108, { useContext as useContext45 } from "react";
 
 // src/components/VisualControls/VisualControlHandle.tsx
-import { useCallback as useCallback80, useContext as useContext44, useEffect as useEffect48, useState as useState55 } from "react";
+import { useCallback as useCallback80, useContext as useContext44, useEffect as useEffect49, useState as useState55 } from "react";
 import { Internals as Internals35 } from "remotion";
 import { NoReactInternals as NoReactInternals12 } from "remotion/no-react";
 
@@ -16808,7 +16823,7 @@ var VisualControlHandleHeader = ({ originalFileName }) => {
 };
 
 // src/components/VisualControls/get-original-stack-trace.ts
-import { useEffect as useEffect47, useState as useState54 } from "react";
+import { useEffect as useEffect48, useState as useState54 } from "react";
 
 // src/components/Timeline/TimelineStack/get-stack.ts
 import { SourceMapConsumer as SourceMapConsumer2 } from "source-map";
@@ -16898,7 +16913,7 @@ var getOriginalLocationFromStack = async (stack2, type) => {
 // src/components/VisualControls/get-original-stack-trace.ts
 var useOriginalFileName = (stack2) => {
   const [originalFileName, setOriginalFileName] = useState54({ type: "loading" });
-  useEffect47(() => {
+  useEffect48(() => {
     if (!stack2) {
       return;
     }
@@ -16990,7 +17005,7 @@ var VisualControlHandle = ({ value, keyName }) => {
     keyName,
     zodTypes
   ]);
-  useEffect48(() => {
+  useEffect49(() => {
     setSaving(false);
   }, [fastRefreshes]);
   return /* @__PURE__ */ jsxs75(Fragment21, {
@@ -17143,7 +17158,7 @@ var OptionsPanel = ({ readOnlyStudio }) => {
       resetUnsaved(e.detail.resetUnsaved);
     }
   }, [resetUnsaved]);
-  useEffect49(() => {
+  useEffect50(() => {
     window.addEventListener(Internals36.PROPS_UPDATED_EXTERNALLY, reset);
     return () => {
       window.removeEventListener(Internals36.PROPS_UPDATED_EXTERNALLY, reset);
@@ -17196,7 +17211,7 @@ var OptionsPanel = ({ readOnlyStudio }) => {
 };
 
 // src/components/PreviewToolbar.tsx
-import { useContext as useContext53, useEffect as useEffect56, useRef as useRef30, useState as useState60 } from "react";
+import { useContext as useContext53, useEffect as useEffect57, useRef as useRef31, useState as useState60 } from "react";
 import { Internals as Internals44 } from "remotion";
 
 // src/helpers/should-show-render-button.ts
@@ -17256,10 +17271,10 @@ var CheckboardToggle = () => {
 
 // src/components/FpsCounter.tsx
 import {
-  useEffect as useEffect50,
+  useEffect as useEffect51,
   useLayoutEffect,
   useMemo as useMemo91,
-  useRef as useRef28,
+  useRef as useRef29,
   useState as useState57
 } from "react";
 import { Internals as Internals37 } from "remotion";
@@ -17280,9 +17295,9 @@ var FpsCounter = ({ playbackSpeed }) => {
   const frame2 = Internals37.Timeline.useTimelinePosition();
   const [marker, rerender] = useState57({});
   const [fps, setFps] = useState57(0);
-  const previousUpdates = useRef28([]);
-  const fpsRef = useRef28(0);
-  const playingRef = useRef28(playing);
+  const previousUpdates = useRef29([]);
+  const fpsRef = useRef29(0);
+  const playingRef = useRef29(playing);
   useLayoutEffect(() => {
     fpsRef.current = 0;
     previousUpdates.current = [];
@@ -17300,7 +17315,7 @@ var FpsCounter = ({ playbackSpeed }) => {
     if (previousUpdates.current.length === 2)
       setFps(fpsRef.current);
   }, [frame2]);
-  useEffect50(() => {
+  useEffect51(() => {
     if (playing) {
       const t = setTimeout(() => {
         rerender({});
@@ -17338,7 +17353,7 @@ var FpsCounter = ({ playbackSpeed }) => {
 };
 
 // src/components/FullscreenToggle.tsx
-import { useCallback as useCallback83, useContext as useContext48, useEffect as useEffect51 } from "react";
+import { useCallback as useCallback83, useContext as useContext48, useEffect as useEffect52 } from "react";
 import { Internals as Internals38 } from "remotion";
 import { NoReactInternals as NoReactInternals14 } from "remotion/no-react";
 import { jsx as jsx163 } from "react/jsx-runtime";
@@ -17360,7 +17375,7 @@ var FullScreenToggle = () => {
         }
       }));
   }, [setSize]);
-  useEffect51(() => {
+  useEffect52(() => {
     const f = keybindings.registerKeybinding({
       event: "keydown",
       key: "f",
@@ -17474,7 +17489,7 @@ var MuteToggle = ({ muted, setMuted }) => {
 
 // src/components/PlayPause.tsx
 import { PlayerInternals as PlayerInternals12 } from "@remotion/player";
-import { useCallback as useCallback86, useEffect as useEffect52, useState as useState58 } from "react";
+import { useCallback as useCallback86, useEffect as useEffect53, useState as useState58 } from "react";
 import { Internals as Internals39 } from "remotion";
 
 // src/icons/jump-to-start.tsx
@@ -17597,7 +17612,7 @@ var PlayPause = ({ playbackRate, loop, bufferStateDelayInMilliseconds }) => {
     }
   });
   const isStill = useIsStill();
-  useEffect52(() => {
+  useEffect53(() => {
     if (isStill) {
       pause();
     }
@@ -17679,7 +17694,7 @@ var PlayPause = ({ playbackRate, loop, bufferStateDelayInMilliseconds }) => {
     seek(outFrame ?? getCurrentDuration() - 1);
   }, [seek, outFrame]);
   const keybindings = useKeybinding();
-  useEffect52(() => {
+  useEffect53(() => {
     const arrowLeft = keybindings.registerKeybinding({
       event: "keydown",
       key: "ArrowLeft",
@@ -17751,7 +17766,7 @@ var PlayPause = ({ playbackRate, loop, bufferStateDelayInMilliseconds }) => {
     onEnter,
     onSpace
   ]);
-  useEffect52(() => {
+  useEffect53(() => {
     let timeout = null;
     let stopped = false;
     const onBuffer = () => {
@@ -17833,7 +17848,7 @@ var PlayPause = ({ playbackRate, loop, bufferStateDelayInMilliseconds }) => {
 
 // src/components/PlaybackKeyboardShortcutsManager.tsx
 import { PlayerInternals as PlayerInternals13 } from "@remotion/player";
-import { useCallback as useCallback87, useEffect as useEffect53 } from "react";
+import { useCallback as useCallback87, useEffect as useEffect54 } from "react";
 var PlaybackKeyboardShortcutsManager = ({ setPlaybackRate }) => {
   const keybindings = useKeybinding();
   const { play, pause, playing } = PlayerInternals13.usePlayer();
@@ -17871,7 +17886,7 @@ var PlaybackKeyboardShortcutsManager = ({ setPlaybackRate }) => {
     });
     play();
   }, [play, playing, setPlaybackRate]);
-  useEffect53(() => {
+  useEffect54(() => {
     const jKey = keybindings.registerKeybinding({
       event: "keydown",
       key: "j",
@@ -17909,7 +17924,7 @@ var PlaybackKeyboardShortcutsManager = ({ setPlaybackRate }) => {
 };
 
 // src/components/PlaybackRatePersistor.tsx
-import { useContext as useContext49, useEffect as useEffect54 } from "react";
+import { useContext as useContext49, useEffect as useEffect55 } from "react";
 import { Internals as Internals40 } from "remotion";
 
 // src/state/playbackrate.ts
@@ -17931,10 +17946,10 @@ var loadPlaybackRate = () => {
 // src/components/PlaybackRatePersistor.tsx
 var PlaybackRatePersistor = () => {
   const { setPlaybackRate, playbackRate } = useContext49(Internals40.TimelineContext);
-  useEffect54(() => {
+  useEffect55(() => {
     setPlaybackRate(loadPlaybackRate());
   }, [setPlaybackRate]);
-  useEffect54(() => {
+  useEffect55(() => {
     persistPlaybackRate(playbackRate);
   }, [playbackRate]);
   return null;
@@ -18016,9 +18031,9 @@ import { PlayerInternals as PlayerInternals14 } from "@remotion/player";
 import {
   useCallback as useCallback88,
   useContext as useContext51,
-  useEffect as useEffect55,
+  useEffect as useEffect56,
   useMemo as useMemo93,
-  useRef as useRef29,
+  useRef as useRef30,
   useState as useState59
 } from "react";
 import ReactDOM8 from "react-dom";
@@ -18094,8 +18109,8 @@ var RenderButton = ({
   const { setSelectedModal } = useContext51(ModalsContext);
   const [renderType, setRenderType] = useState59(() => getInitialRenderType(readOnlyStudio));
   const [dropdownOpened, setDropdownOpened] = useState59(false);
-  const dropdownRef = useRef29(null);
-  const containerRef = useRef29(null);
+  const dropdownRef = useRef30(null);
+  const containerRef = useRef30(null);
   const { currentZIndex } = useZIndex();
   const size4 = PlayerInternals14.useElementSize(dropdownRef, {
     triggerOnWindowResize: true,
@@ -18190,7 +18205,8 @@ var RenderButton = ({
       defaultProps: props[video.id] ?? video.defaultProps,
       inFrameMark: inFrame,
       outFrameMark: outFrame,
-      initialLogLevel: defaults.logLevel
+      initialLogLevel: defaults.logLevel,
+      initialLicenseKey: defaults.publicLicenseKey
     });
   }, [video, setSelectedModal, getCurrentFrame2, props, inFrame, outFrame]);
   const onClick = useCallback88(() => {
@@ -18241,7 +18257,7 @@ var RenderButton = ({
       }
     ];
   }, [handleRenderTypeChange]);
-  useEffect55(() => {
+  useEffect56(() => {
     const { current } = dropdownRef;
     if (!current) {
       return;
@@ -18587,14 +18603,14 @@ var PreviewToolbar = ({ readOnlyStudio, bufferStateDelayInMilliseconds }) => {
   const { mediaMuted } = useContext53(Internals44.MediaVolumeContext);
   const { setMediaMuted } = useContext53(Internals44.SetMediaVolumeContext);
   const isVideoComposition = useIsVideoComposition();
-  const previewToolbarRef = useRef30(null);
-  const leftScrollIndicatorRef = useRef30(null);
-  const rightScrollIndicatorRef = useRef30(null);
+  const previewToolbarRef = useRef31(null);
+  const leftScrollIndicatorRef = useRef31(null);
+  const rightScrollIndicatorRef = useRef31(null);
   const isStill = useIsStill();
   const [loop, setLoop] = useState60(loadLoopOption());
   const isFullscreenSupported = checkFullscreenSupport();
   const isMobileLayout = useMobileLayout();
-  useEffect56(() => {
+  useEffect57(() => {
     if (isMobileLayout && previewToolbarRef.current) {
       const updateScrollableIndicatorProps = (target) => {
         const boundingBox = target.getBoundingClientRect();
@@ -18745,7 +18761,7 @@ var PreviewToolbar = ({ readOnlyStudio, bufferStateDelayInMilliseconds }) => {
 };
 
 // src/components/Splitter/SplitterContainer.tsx
-import { useMemo as useMemo94, useRef as useRef31, useState as useState61 } from "react";
+import { useMemo as useMemo94, useRef as useRef32, useState as useState61 } from "react";
 
 // src/state/timeline.ts
 var localStorageKey4 = (id) => `remotion.editor.timelineFlex.${id}`;
@@ -18800,8 +18816,8 @@ var containerColumn = {
 var SplitterContainer = ({ orientation, children, defaultFlex, maxFlex, minFlex, id }) => {
   const [initialTimelineFlex, persistFlex] = useTimelineFlex(id);
   const [flexValue, setFlexValue] = useState61(initialTimelineFlex ?? defaultFlex);
-  const ref = useRef31(null);
-  const isDragging = useRef31(false);
+  const ref = useRef32(null);
+  const isDragging = useRef32(false);
   const value = useMemo94(() => {
     return {
       flexValue,
@@ -18874,7 +18890,7 @@ var SplitterElement = ({ children, type, sticky }) => {
 
 // src/components/Splitter/SplitterHandle.tsx
 import { PlayerInternals as PlayerInternals15 } from "@remotion/player";
-import { useContext as useContext55, useEffect as useEffect57, useRef as useRef32, useState as useState62 } from "react";
+import { useContext as useContext55, useEffect as useEffect58, useRef as useRef33, useState as useState62 } from "react";
 import { jsx as jsx180 } from "react/jsx-runtime";
 var SPLITTER_HANDLE_SIZE = 3;
 var containerRow2 = {
@@ -18889,8 +18905,8 @@ var SplitterHandle = ({ allowToCollapse, onCollapse }) => {
     throw new Error("Cannot find splitter context");
   }
   const [lastPointerUp, setLastPointerUp] = useState62(() => Date.now());
-  const ref = useRef32(null);
-  useEffect57(() => {
+  const ref = useRef33(null);
+  useEffect58(() => {
     if (context.isDragging.current) {
       return;
     }
@@ -18973,7 +18989,7 @@ var SplitterHandle = ({ allowToCollapse, onCollapse }) => {
       }
     };
   }, [allowToCollapse, context, context.flexValue, lastPointerUp, onCollapse]);
-  useEffect57(() => {
+  useEffect58(() => {
     const { current } = ref;
     if (!current) {
       return;
@@ -19060,7 +19076,7 @@ var TopPanel = ({ readOnlyStudio, onMounted, drawRef: drawRef2, bufferStateDelay
     }
     return "expanded";
   }, [sidebarCollapsedStateRight]);
-  useEffect58(() => {
+  useEffect59(() => {
     onMounted();
   }, [onMounted]);
   const canvasContainerStyle = useMemo96(() => ({
@@ -19230,7 +19246,7 @@ var SidebarCollapserControls = () => {
     toggleLeft,
     toggleRight
   ]);
-  useEffect59(() => {
+  useEffect60(() => {
     const left3 = keybindings.registerKeybinding({
       event: "keydown",
       key: "b",
@@ -19308,7 +19324,7 @@ var SidebarCollapserControls = () => {
 import {
   useCallback as useCallback92,
   useContext as useContext58,
-  useEffect as useEffect60,
+  useEffect as useEffect61,
   useMemo as useMemo97,
   useState as useState63
 } from "react";
@@ -19360,7 +19376,7 @@ var UpdateCheck = () => {
     });
     return controller;
   }, []);
-  useEffect60(() => {
+  useEffect61(() => {
     const abortUpdate = checkForUpdates();
     const abortBugs = checkForBugs();
     return () => {
@@ -19725,9 +19741,9 @@ import { PlayerInternals as PlayerInternals16 } from "@remotion/player";
 import {
   useCallback as useCallback94,
   useContext as useContext61,
-  useEffect as useEffect61,
+  useEffect as useEffect62,
   useMemo as useMemo100,
-  useRef as useRef33,
+  useRef as useRef34,
   useState as useState65
 } from "react";
 import { Internals as Internals46, useVideoConfig as useVideoConfig4 } from "remotion";
@@ -19891,7 +19907,7 @@ var Inner2 = () => {
     dragging: false
   });
   const { playing, play, pause, seek } = PlayerInternals16.usePlayer();
-  const scroller = useRef33(null);
+  const scroller = useRef34(null);
   const stopInterval = () => {
     if (scroller.current) {
       clearInterval(scroller.current);
@@ -20156,7 +20172,7 @@ var Inner2 = () => {
     videoConfig,
     width
   ]);
-  useEffect61(() => {
+  useEffect62(() => {
     if (!dragging.dragging) {
       return;
     }
@@ -20167,7 +20183,7 @@ var Inner2 = () => {
       window.removeEventListener("pointerup", onPointerUpScrubbing);
     };
   }, [dragging.dragging, onPointerMoveScrubbing, onPointerUpScrubbing]);
-  useEffect61(() => {
+  useEffect62(() => {
     if (inOutDragging.dragging === false) {
       return;
     }
@@ -20258,7 +20274,7 @@ var Inner2 = () => {
 
 // src/components/Timeline/TimelineList.tsx
 import { PlayerInternals as PlayerInternals18 } from "@remotion/player";
-import { useRef as useRef36 } from "react";
+import { useRef as useRef37 } from "react";
 
 // src/components/Timeline/TimelineListItem.tsx
 import { useCallback as useCallback97, useContext as useContext63, useMemo as useMemo102 } from "react";
@@ -20343,7 +20359,7 @@ import { SOURCE_MAP_ENDPOINT } from "@remotion/studio-shared";
 import {
   useCallback as useCallback96,
   useContext as useContext62,
-  useEffect as useEffect62,
+  useEffect as useEffect63,
   useMemo as useMemo101,
   useState as useState66
 } from "react";
@@ -20432,7 +20448,7 @@ var TimelineStack = ({ isCompact, sequence }) => {
       window.open(getGitRefUrl(window.remotion_gitSource, originalLocation), "_blank");
     }
   }, [canOpenInEditor, canOpenInGitHub, openEditor, originalLocation]);
-  useEffect62(() => {
+  useEffect63(() => {
     if (!sequence.stack) {
       return;
     }
@@ -20580,16 +20596,16 @@ var TimelineListItem = ({ nestedDepth, sequence, isCompact }) => {
 };
 
 // src/components/Timeline/TimelineTimeIndicators.tsx
-import { useContext as useContext64, useEffect as useEffect64, useMemo as useMemo103, useRef as useRef35 } from "react";
+import { useContext as useContext64, useEffect as useEffect65, useMemo as useMemo103, useRef as useRef36 } from "react";
 import { Internals as Internals49 } from "remotion";
 
 // src/components/TimeValue.tsx
 import { PlayerInternals as PlayerInternals17 } from "@remotion/player";
 import {
   useCallback as useCallback98,
-  useEffect as useEffect63,
+  useEffect as useEffect64,
   useImperativeHandle as useImperativeHandle14,
-  useRef as useRef34
+  useRef as useRef35
 } from "react";
 import { Internals as Internals48, useCurrentFrame } from "remotion";
 import { jsx as jsx191, jsxs as jsxs92 } from "react/jsx-runtime";
@@ -20624,7 +20640,7 @@ var TimeValue = () => {
   const isStill = useIsStill();
   const { seek, play, pause, toggle } = PlayerInternals17.usePlayer();
   const keybindings = useKeybinding();
-  const ref = useRef34(null);
+  const ref = useRef35(null);
   const onTextChange = useCallback98((newVal) => {
     seek(parseInt(newVal, 10));
   }, [seek]);
@@ -20640,7 +20656,7 @@ var TimeValue = () => {
     pause,
     toggle
   }), [seek, play, pause, toggle]);
-  useEffect63(() => {
+  useEffect64(() => {
     const gKey = keybindings.registerKeybinding({
       event: "keypress",
       key: "g",
@@ -20752,8 +20768,8 @@ var TimelineTimeIndicators = () => {
   });
 };
 var Inner3 = ({ windowWidth, durationInFrames, fps }) => {
-  const ref = useRef35(null);
-  useEffect64(() => {
+  const ref = useRef36(null);
+  useEffect65(() => {
     const currentRef = ref.current;
     if (!currentRef) {
       return;
@@ -20835,7 +20851,7 @@ var container41 = {
   background: BACKGROUND
 };
 var TimelineList = ({ timeline }) => {
-  const ref = useRef36(null);
+  const ref = useRef37(null);
   const size4 = PlayerInternals18.useElementSize(ref, {
     shouldApplyCssTransforms: false,
     triggerOnWindowResize: false
@@ -20860,7 +20876,7 @@ var TimelineList = ({ timeline }) => {
 };
 
 // src/components/Timeline/TimelinePlayCursorSyncer.tsx
-import { useContext as useContext65, useEffect as useEffect65 } from "react";
+import { useContext as useContext65, useEffect as useEffect66 } from "react";
 import { Internals as Internals50 } from "remotion";
 var lastTimelinePositionWhileScrolling = null;
 var TimelinePlayCursorSyncer = () => {
@@ -20878,7 +20894,7 @@ var TimelinePlayCursorSyncer = () => {
     setCurrentFps(video.fps);
   }
   const playing = timelineContext.playing ?? false;
-  useEffect65(() => {
+  useEffect66(() => {
     if (!video) {
       return;
     }
@@ -20891,7 +20907,7 @@ var TimelinePlayCursorSyncer = () => {
       frame: timelinePosition
     });
   }, [playing, timelineContext, timelinePosition, video]);
-  useEffect65(() => {
+  useEffect66(() => {
     const { current } = scrollableRef;
     if (!current) {
       return;
@@ -34263,7 +34279,7 @@ var readAscii = (slice, length) => {
  */
 
 // src/helpers/use-max-media-duration.ts
-import { useEffect as useEffect66, useState as useState67 } from "react";
+import { useEffect as useEffect67, useState as useState67 } from "react";
 var cache = new Map;
 var getSrc = (s) => {
   if (s.type === "video") {
@@ -34277,7 +34293,7 @@ var getSrc = (s) => {
 var useMaxMediaDuration = (s, fps) => {
   const src = getSrc(s);
   const [maxMediaDuration, setMaxMediaDuration] = useState67(src ? cache.get(src) ?? null : Infinity);
-  useEffect66(() => {
+  useEffect67(() => {
     if (!src) {
       return;
     }
@@ -34307,7 +34323,7 @@ var useMaxMediaDuration = (s, fps) => {
 
 // src/components/AudioWaveform.tsx
 import { getAudioData, getWaveformPortion } from "@remotion/media-utils";
-import { useEffect as useEffect67, useMemo as useMemo106, useRef as useRef37, useState as useState68 } from "react";
+import { useEffect as useEffect68, useMemo as useMemo106, useRef as useRef38, useState as useState68 } from "react";
 import { Internals as Internals51 } from "remotion";
 
 // src/components/AudioWaveformBar.tsx
@@ -34366,20 +34382,20 @@ var AudioWaveform = ({
 }) => {
   const [metadata, setMetadata] = useState68(null);
   const [error, setError] = useState68(null);
-  const mountState = useRef37({ isMounted: true });
+  const mountState = useRef38({ isMounted: true });
   const vidConf = Internals51.useUnsafeVideoConfig();
   if (vidConf === null) {
     throw new Error("Expected video config");
   }
-  const canvas = useRef37(null);
-  useEffect67(() => {
+  const canvas = useRef38(null);
+  useEffect68(() => {
     const { current } = mountState;
     current.isMounted = true;
     return () => {
       current.isMounted = false;
     };
   }, []);
-  useEffect67(() => {
+  useEffect68(() => {
     if (!canvas.current) {
       return;
     }
@@ -34406,7 +34422,7 @@ var AudioWaveform = ({
     context.strokeStyle = LIGHT_TRANSPARENT;
     context.stroke();
   }, [visualizationWidth, metadata, startFrom, volume, doesVolumeChange]);
-  useEffect67(() => {
+  useEffect68(() => {
     setError(null);
     getAudioData(src).then((data) => {
       if (mountState.current.isMounted) {
@@ -34581,7 +34597,7 @@ var TimelineSequenceFrame = ({ roundedFrame, premounted, postmounted }) => {
 };
 
 // src/components/Timeline/TimelineVideoInfo.tsx
-import { useEffect as useEffect68, useRef as useRef38, useState as useState69 } from "react";
+import { useEffect as useEffect69, useRef as useRef39, useState as useState69 } from "react";
 import { useVideoConfig as useVideoConfig5 } from "remotion";
 
 // src/helpers/extract-frames.ts
@@ -34896,15 +34912,15 @@ var fillFrameWhereItFits = ({
 };
 var TimelineVideoInfo = ({ src, visualizationWidth, startFrom, durationInFrames }) => {
   const { fps } = useVideoConfig5();
-  const ref = useRef38(null);
+  const ref = useRef39(null);
   const [error, setError] = useState69(null);
-  const aspectRatio = useRef38(getAspectRatioFromCache(src));
-  useEffect68(() => {
+  const aspectRatio = useRef39(getAspectRatioFromCache(src));
+  useEffect69(() => {
     return () => {
       clearFramesForSrc(src);
     };
   }, [src]);
-  useEffect68(() => {
+  useEffect69(() => {
     if (error) {
       return;
     }
@@ -35357,13 +35373,13 @@ var EditorContent = ({ readOnlyStudio, children }) => {
 };
 
 // src/components/GlobalKeybindings.tsx
-import { useContext as useContext69, useEffect as useEffect69 } from "react";
+import { useContext as useContext69, useEffect as useEffect70 } from "react";
 var GlobalKeybindings = () => {
   const keybindings = useKeybinding();
   const { setSelectedModal } = useContext69(ModalsContext);
   const { setCheckerboard } = useContext69(CheckerboardContext);
   const { navigateToNextComposition, navigateToPreviousComposition } = useCompositionNavigation();
-  useEffect69(() => {
+  useEffect70(() => {
     const nKey = keybindings.registerKeybinding({
       event: "keypress",
       key: "n",
@@ -35469,7 +35485,7 @@ import { useContext as useContext83 } from "react";
 
 // src/components/InstallPackage.tsx
 import { apiDocs, descriptions, installableMap } from "@remotion/studio-shared";
-import React145, { useCallback as useCallback100, useContext as useContext71, useEffect as useEffect70 } from "react";
+import React145, { useCallback as useCallback100, useContext as useContext71, useEffect as useEffect71 } from "react";
 import { VERSION as VERSION2 } from "remotion";
 
 // src/api/install-package.ts
@@ -35603,7 +35619,7 @@ var InstallPackageModal = ({ packageManager }) => {
   const canSelectPackages = state.type === "idle" && ctx.type === "connected";
   const disabled = !(canSelectPackages || state.type === "done") || selectedPackages.length === 0;
   const { registerKeybinding } = useKeybinding();
-  useEffect70(() => {
+  useEffect71(() => {
     if (disabled) {
       return;
     }
@@ -35727,7 +35743,7 @@ var InstallPackageModal = ({ packageManager }) => {
 import { useCallback as useCallback102, useContext as useContext74, useMemo as useMemo112 } from "react";
 
 // src/components/RenderModal/ResolveCompositionBeforeModal.tsx
-import React146, { useContext as useContext72, useEffect as useEffect71, useMemo as useMemo111 } from "react";
+import React146, { useContext as useContext72, useEffect as useEffect72, useMemo as useMemo111 } from "react";
 import { Internals as Internals55 } from "remotion";
 import { jsx as jsx210, jsxs as jsxs103 } from "react/jsx-runtime";
 var loaderContainer2 = {
@@ -35751,7 +35767,7 @@ var ResolveCompositionBeforeModal = ({ compositionId, children }) => {
   const resolved = Internals55.useResolvedVideoConfig(compositionId);
   const unresolvedContext = useContext72(Internals55.CompositionManager);
   const unresolved = unresolvedContext.compositions.find((c) => compositionId === c.id);
-  useEffect71(() => {
+  useEffect72(() => {
     const { current } = Internals55.resolveCompositionsRef;
     if (!current) {
       throw new Error("No ref to trigger composition calc");
@@ -35809,7 +35825,7 @@ var ResolveCompositionBeforeModal = ({ compositionId, children }) => {
 };
 
 // src/components/NewComposition/CodemodFooter.tsx
-import { useCallback as useCallback101, useContext as useContext73, useEffect as useEffect72, useState as useState70 } from "react";
+import { useCallback as useCallback101, useContext as useContext73, useEffect as useEffect73, useState as useState70 } from "react";
 
 // src/components/NewComposition/DiffPreview.tsx
 import { jsx as jsx211, jsxs as jsxs104 } from "react/jsx-runtime";
@@ -35874,7 +35890,7 @@ var CodemodFooter = ({
     type: "loading"
   });
   const [projectInfo, setProjectInfo] = useState70(null);
-  useEffect72(() => {
+  useEffect73(() => {
     const controller = new AbortController;
     getProjectInfo(controller.signal).then((info) => {
       setProjectInfo(info.projectInfo);
@@ -35920,7 +35936,7 @@ var CodemodFooter = ({
       });
     }
   }, [codemod]);
-  useEffect72(() => {
+  useEffect73(() => {
     const abortController = new AbortController;
     let aborted = false;
     getCanApplyCodemod(abortController.signal).then(() => {
@@ -35938,7 +35954,7 @@ var CodemodFooter = ({
   }, [codemodStatus, getCanApplyCodemod, setSelectedModal]);
   const disabled = !valid || submitting || projectInfo === null || codemodStatus.type !== "success";
   const { registerKeybinding } = useKeybinding();
-  useEffect72(() => {
+  useEffect73(() => {
     if (disabled) {
       return;
     }
@@ -36760,9 +36776,9 @@ var OverrideInputPropsModal = () => {
 import {
   useCallback as useCallback107,
   useContext as useContext78,
-  useEffect as useEffect74,
+  useEffect as useEffect75,
   useMemo as useMemo117,
-  useRef as useRef40,
+  useRef as useRef41,
   useState as useState75
 } from "react";
 import { Internals as Internals60 } from "remotion";
@@ -37556,7 +37572,7 @@ var QuickSwitcherNoResults = ({ query, mode }) => {
 };
 
 // src/components/QuickSwitcher/QuickSwitcherResult.tsx
-import { useEffect as useEffect73, useMemo as useMemo116, useRef as useRef39, useState as useState74 } from "react";
+import { useEffect as useEffect74, useMemo as useMemo116, useRef as useRef40, useState as useState74 } from "react";
 import { jsx as jsx221, jsxs as jsxs113, Fragment as Fragment34 } from "react/jsx-runtime";
 var container49 = {
   paddingLeft: 16,
@@ -37586,9 +37602,9 @@ var labelContainer = {
 };
 var QuickSwitcherResult = ({ result, selected }) => {
   const [hovered, setIsHovered] = useState74(false);
-  const ref = useRef39(null);
+  const ref = useRef40(null);
   const keybindings = useKeybinding();
-  useEffect73(() => {
+  useEffect74(() => {
     const { current } = ref;
     if (!current) {
       return;
@@ -37602,7 +37618,7 @@ var QuickSwitcherResult = ({ result, selected }) => {
       current.removeEventListener("mouseleave", onMouseLeave);
     };
   }, []);
-  useEffect73(() => {
+  useEffect74(() => {
     if (!selected) {
       return;
     }
@@ -37619,7 +37635,7 @@ var QuickSwitcherResult = ({ result, selected }) => {
       binding.unregister();
     };
   }, [keybindings, result.onSelected, selected]);
-  useEffect73(() => {
+  useEffect74(() => {
     if (selected) {
       ref.current?.scrollIntoView({
         block: "nearest",
@@ -37833,13 +37849,13 @@ var QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio }
       selectedIndex: 0
     };
   });
-  useEffect74(() => {
+  useEffect75(() => {
     setState({
       query: mapModeToQuery(initialMode),
       selectedIndex: 0
     });
   }, [initialMode, invocationTimestamp]);
-  const inputRef = useRef40(null);
+  const inputRef = useRef41(null);
   const selectComposition = useSelectComposition();
   const closeMenu = useCallback107(() => {
     return;
@@ -37907,7 +37923,7 @@ var QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio }
       };
     });
   }, []);
-  useEffect74(() => {
+  useEffect75(() => {
     const binding = keybindings.registerKeybinding({
       key: "ArrowUp",
       callback: onArrowUp,
@@ -37921,7 +37937,7 @@ var QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio }
       binding.unregister();
     };
   }, [keybindings, onArrowDown, onArrowUp]);
-  useEffect74(() => {
+  useEffect75(() => {
     if (mode !== "docs") {
       return;
     }
@@ -37946,7 +37962,7 @@ var QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio }
       cancelled = true;
     };
   }, [actualQuery, mode]);
-  useEffect74(() => {
+  useEffect75(() => {
     const binding = keybindings.registerKeybinding({
       key: "ArrowDown",
       callback: onArrowDown,
@@ -38438,10 +38454,10 @@ import { getDefaultOutLocation } from "@remotion/studio-shared";
 import {
   useCallback as useCallback127,
   useContext as useContext81,
-  useEffect as useEffect77,
+  useEffect as useEffect78,
   useMemo as useMemo128,
   useReducer as useReducer2,
-  useRef as useRef42,
+  useRef as useRef43,
   useState as useState81
 } from "react";
 
@@ -38608,7 +38624,7 @@ import { useCallback as useCallback112 } from "react";
 import { BrowserSafeApis } from "@remotion/renderer/client";
 
 // src/components/RenderModal/CliCopyButton.tsx
-import { useCallback as useCallback111, useEffect as useEffect75, useMemo as useMemo121, useState as useState78 } from "react";
+import { useCallback as useCallback111, useEffect as useEffect76, useMemo as useMemo121, useState as useState78 } from "react";
 import { jsx as jsx233 } from "react/jsx-runtime";
 var svgStyle2 = {
   width: 16,
@@ -38659,7 +38675,7 @@ var CliCopyButton = ({
   const onPointerLeave = useCallback111(() => {
     setHovered(false);
   }, []);
-  useEffect75(() => {
+  useEffect76(() => {
     if (!copied) {
       return;
     }
@@ -39981,14 +39997,14 @@ import { BrowserSafeApis as BrowserSafeApis4 } from "@remotion/renderer/client";
 import { useCallback as useCallback119, useMemo as useMemo123 } from "react";
 
 // src/helpers/use-file-existence.ts
-import { useContext as useContext80, useEffect as useEffect76, useRef as useRef41, useState as useState80 } from "react";
+import { useContext as useContext80, useEffect as useEffect77, useRef as useRef42, useState as useState80 } from "react";
 var useFileExistence = (outName) => {
   const [exists, setExists] = useState80(false);
   const { previewServerState: state, subscribeToEvent } = useContext80(StudioServerConnectionCtx);
   const clientId = state.type === "connected" ? state.clientId : undefined;
-  const currentOutName = useRef41("");
+  const currentOutName = useRef42("");
   currentOutName.current = outName;
-  useEffect76(() => {
+  useEffect77(() => {
     if (!clientId) {
       return;
     }
@@ -40004,7 +40020,7 @@ var useFileExistence = (outName) => {
       unsubscribeFromFileExistenceWatcher({ file: outName, clientId });
     };
   }, [clientId, outName]);
-  useEffect76(() => {
+  useEffect77(() => {
     const listener = (event) => {
       if (event.type !== "watched-file-deleted") {
         return;
@@ -40021,7 +40037,7 @@ var useFileExistence = (outName) => {
       unsub();
     };
   }, [outName, subscribeToEvent]);
-  useEffect76(() => {
+  useEffect77(() => {
     const listener = (event) => {
       if (event.type !== "watched-file-undeleted") {
         return;
@@ -41575,7 +41591,7 @@ var RenderModal = ({
     resolved: { result: resolvedComposition },
     unresolved: unresolvedComposition
   } = context;
-  const isMounted = useRef42(true);
+  const isMounted = useRef43(true);
   const [isVideo] = useState81(() => {
     return typeof resolvedComposition.durationInFrames === "undefined" ? true : resolvedComposition.durationInFrames > 1;
   });
@@ -42073,7 +42089,7 @@ var RenderModal = ({
     offthreadVideoThreads,
     mediaCacheSizeInBytes
   ]);
-  useEffect77(() => {
+  useEffect78(() => {
     return () => {
       isMounted.current = false;
     };
@@ -42242,7 +42258,7 @@ var RenderModal = ({
       onClickVideo();
     }
   }, [renderMode, onClickStill, onClickSequence, onClickVideo]);
-  useEffect77(() => {
+  useEffect78(() => {
     if (renderDisabled) {
       return;
     }
@@ -42551,11 +42567,86 @@ var RenderModalWithLoader = (props) => {
 // src/components/RenderModal/WebRenderModal.tsx
 import { getDefaultOutLocation as getDefaultOutLocation2 } from "@remotion/studio-shared";
 import { renderMediaOnWeb, renderStillOnWeb } from "@remotion/web-renderer";
-import { useCallback as useCallback130, useContext as useContext82, useMemo as useMemo132, useState as useState82 } from "react";
+import { useCallback as useCallback131, useContext as useContext82, useMemo as useMemo133, useState as useState82 } from "react";
+
+// src/icons/certificate.tsx
+import { jsx as jsx257 } from "react/jsx-runtime";
+var CertificateIcon = (props) => /* @__PURE__ */ jsx257("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 576 512",
+  ...props,
+  children: /* @__PURE__ */ jsx257("path", {
+    fill: "currentcolor",
+    d: "M192 32l128 0 0 96c0 35.3 28.7 64 64 64l96 0 0 256c0 17.7-14.3 32-32 32l-192 0 0 32 192 0c35.3 0 64-28.7 64-64l0-261.5c0-17-6.7-33.3-18.7-45.3L370.7 18.7C358.7 6.7 342.5 0 325.5 0L192 0c-35.3 0-64 28.7-64 64l0 80c10.9 0 21.6 1 32 2.9L160 64c0-17.7 14.3-32 32-32zM352 45.3L466.7 160 384 160c-17.7 0-32-14.3-32-32l0-82.7zM32 320a96 96 0 1 1 192 0 96 96 0 1 1 -192 0zM176 438.7l0 66.3-40.1-22.9c-4.9-2.8-11-2.8-15.9 0L80 505 80 438.7c14.8 6 31 9.3 48 9.3s33.2-3.3 48-9.3zm32-18.8c29.3-23.5 48-59.5 48-99.9 0-70.7-57.3-128-128-128S0 249.3 0 320c0 40.4 18.7 76.5 48 99.9l0 101.8c0 12.3 10 22.3 22.3 22.3 3.9 0 7.7-1 11.1-2.9l46.6-26.6 46.6 26.6c3.4 1.9 7.2 2.9 11.1 2.9 12.3 0 22.3-10 22.3-22.3l0-101.8zM128 344a24 24 0 1 1 0-48 24 24 0 1 1 0 48zm0-80a56 56 0 1 0 0 112 56 56 0 1 0 0-112z"
+  })
+});
+
+// src/components/RenderModal/WebRendererExperimentalBadge.tsx
+import { jsx as jsx258, jsxs as jsxs135 } from "react/jsx-runtime";
+var row8 = {
+  display: "flex",
+  flexDirection: "row",
+  alignItems: "center",
+  justifyContent: "center"
+};
+var text3 = {
+  fontSize: 14,
+  fontFamily: "sans-serif",
+  color: LIGHT_TEXT
+};
+var icon7 = {
+  width: 14,
+  height: 14,
+  flexShrink: 0,
+  fill: WARNING_COLOR,
+  marginRight: 8
+};
+var link3 = {
+  color: "inherit",
+  textDecoration: "underline",
+  fontSize: 14
+};
+var WebRendererExperimentalBadge = () => {
+  return /* @__PURE__ */ jsxs135("div", {
+    style: row8,
+    children: [
+      /* @__PURE__ */ jsx258(WarningTriangle, {
+        type: "warning",
+        style: icon7
+      }),
+      /* @__PURE__ */ jsxs135("div", {
+        style: text3,
+        children: [
+          "The Remotion Web Renderer is experimental.",
+          " ",
+          /* @__PURE__ */ jsx258("a", {
+            href: "https://github.com/remotion-dev/remotion/issues/5913",
+            target: "_blank",
+            rel: "noopener noreferrer",
+            style: link3,
+            children: "Track progress on GitHub"
+          }),
+          " ",
+          "and discuss in the",
+          " ",
+          /* @__PURE__ */ jsx258("a", {
+            href: "https://remotion.dev/discord",
+            target: "_blank",
+            rel: "noopener noreferrer",
+            style: link3,
+            children: "#web-renderer"
+          }),
+          " ",
+          "channel on Discord."
+        ]
+      })
+    ]
+  });
+};
 
 // src/components/RenderModal/WebRenderModalAdvanced.tsx
 import { useCallback as useCallback128, useMemo as useMemo129 } from "react";
-import { jsx as jsx257, jsxs as jsxs135 } from "react/jsx-runtime";
+import { jsx as jsx259, jsxs as jsxs136 } from "react/jsx-runtime";
 var tabContainer = {
   flex: 1
 };
@@ -42592,7 +42683,7 @@ var WebRenderModalAdvanced = ({
       {
         label: "No Preference",
         onClick: () => setHardwareAcceleration("no-preference"),
-        leftItem: hardwareAcceleration === "no-preference" ? /* @__PURE__ */ jsx257(Checkmark, {}) : null,
+        leftItem: hardwareAcceleration === "no-preference" ? /* @__PURE__ */ jsx259(Checkmark, {}) : null,
         id: "no-preference",
         keyHint: null,
         quickSwitcherLabel: null,
@@ -42603,7 +42694,7 @@ var WebRenderModalAdvanced = ({
       {
         label: "Prefer Hardware",
         onClick: () => setHardwareAcceleration("prefer-hardware"),
-        leftItem: hardwareAcceleration === "prefer-hardware" ? /* @__PURE__ */ jsx257(Checkmark, {}) : null,
+        leftItem: hardwareAcceleration === "prefer-hardware" ? /* @__PURE__ */ jsx259(Checkmark, {}) : null,
         id: "prefer-hardware",
         keyHint: null,
         quickSwitcherLabel: null,
@@ -42614,7 +42705,7 @@ var WebRenderModalAdvanced = ({
       {
         label: "Prefer Software",
         onClick: () => setHardwareAcceleration("prefer-software"),
-        leftItem: hardwareAcceleration === "prefer-software" ? /* @__PURE__ */ jsx257(Checkmark, {}) : null,
+        leftItem: hardwareAcceleration === "prefer-software" ? /* @__PURE__ */ jsx259(Checkmark, {}) : null,
         id: "prefer-software",
         keyHint: null,
         quickSwitcherLabel: null,
@@ -42624,10 +42715,10 @@ var WebRenderModalAdvanced = ({
       }
     ];
   }, [hardwareAcceleration, setHardwareAcceleration]);
-  return /* @__PURE__ */ jsxs135("div", {
+  return /* @__PURE__ */ jsxs136("div", {
     style: tabContainer,
     children: [
-      /* @__PURE__ */ jsx257(NumberSetting, {
+      /* @__PURE__ */ jsx259(NumberSetting, {
         name: "Delay Render Timeout",
         formatter: (v) => `${v}ms`,
         min: 0,
@@ -42637,24 +42728,24 @@ var WebRenderModalAdvanced = ({
         onValueChanged: setDelayRenderTimeout,
         hint: "delayRenderTimeoutInMillisecondsOption"
       }),
-      /* @__PURE__ */ jsxs135("div", {
+      /* @__PURE__ */ jsxs136("div", {
         style: optionRow,
         children: [
-          /* @__PURE__ */ jsxs135("div", {
+          /* @__PURE__ */ jsxs136("div", {
             style: label5,
             children: [
               "Custom @remotion/media cache size ",
-              /* @__PURE__ */ jsx257(Spacing, {
+              /* @__PURE__ */ jsx259(Spacing, {
                 x: 0.5
               }),
-              /* @__PURE__ */ jsx257(OptionExplainerBubble, {
+              /* @__PURE__ */ jsx259(OptionExplainerBubble, {
                 id: "mediaCacheSizeInBytesOption"
               })
             ]
           }),
-          /* @__PURE__ */ jsx257("div", {
+          /* @__PURE__ */ jsx259("div", {
             style: rightRow,
-            children: /* @__PURE__ */ jsx257(Checkbox, {
+            children: /* @__PURE__ */ jsx259(Checkbox, {
               checked: mediaCacheSizeInBytes !== null,
               onChange: toggleCustomMediaCacheSizeInBytes,
               name: "media-cache-size"
@@ -42662,7 +42753,7 @@ var WebRenderModalAdvanced = ({
           })
         ]
       }),
-      mediaCacheSizeInBytes === null ? null : /* @__PURE__ */ jsx257(NumberSetting, {
+      mediaCacheSizeInBytes === null ? null : /* @__PURE__ */ jsx259(NumberSetting, {
         name: "@remotion/media cache size",
         formatter: (w) => `${w} bytes`,
         min: 0,
@@ -42671,16 +42762,16 @@ var WebRenderModalAdvanced = ({
         value: mediaCacheSizeInBytes,
         onValueChanged: changeMediaCacheSizeInBytes
       }),
-      renderMode === "video" ? /* @__PURE__ */ jsxs135("div", {
+      renderMode === "video" ? /* @__PURE__ */ jsxs136("div", {
         style: optionRow,
         children: [
-          /* @__PURE__ */ jsx257("div", {
+          /* @__PURE__ */ jsx259("div", {
             style: label5,
             children: "Hardware Acceleration"
           }),
-          /* @__PURE__ */ jsx257("div", {
+          /* @__PURE__ */ jsx259("div", {
             style: rightRow,
-            children: /* @__PURE__ */ jsx257(Combobox, {
+            children: /* @__PURE__ */ jsx259(Combobox, {
               values: hardwareAccelerationOptions,
               selectedId: hardwareAcceleration,
               title: "Hardware Acceleration"
@@ -42693,16 +42784,16 @@ var WebRenderModalAdvanced = ({
 };
 
 // src/components/RenderModal/WebRenderModalAudio.tsx
-import { jsx as jsx258 } from "react/jsx-runtime";
+import { jsx as jsx260 } from "react/jsx-runtime";
 var container60 = {
   flex: 1,
   overflowY: "auto"
 };
 var WebRenderModalAudio = ({ muted, setMuted }) => {
-  return /* @__PURE__ */ jsx258("div", {
+  return /* @__PURE__ */ jsx260("div", {
     style: container60,
     className: VERTICAL_SCROLLBAR_CLASSNAME,
-    children: /* @__PURE__ */ jsx258(MutedSetting, {
+    children: /* @__PURE__ */ jsx260(MutedSetting, {
       enforceAudioTrack: false,
       muted,
       setMuted
@@ -42712,7 +42803,7 @@ var WebRenderModalAudio = ({ muted, setMuted }) => {
 
 // src/components/RenderModal/WebRenderModalBasic.tsx
 import { useMemo as useMemo130 } from "react";
-import { jsx as jsx259, jsxs as jsxs136, Fragment as Fragment45 } from "react/jsx-runtime";
+import { jsx as jsx261, jsxs as jsxs137, Fragment as Fragment45 } from "react/jsx-runtime";
 var tabContainer2 = {
   flex: 1
 };
@@ -42765,7 +42856,7 @@ var WebRenderModalBasic = ({
       return {
         label: humanReadableLogLevel(level),
         onClick: () => setLogLevel(level),
-        leftItem: logLevel === level ? /* @__PURE__ */ jsx259(Checkmark, {}) : null,
+        leftItem: logLevel === level ? /* @__PURE__ */ jsx261(Checkmark, {}) : null,
         id: level,
         keyHint: null,
         quickSwitcherLabel: null,
@@ -42780,7 +42871,7 @@ var WebRenderModalBasic = ({
       {
         label: "MP4",
         onClick: () => setContainerFormat("mp4"),
-        leftItem: container61 === "mp4" ? /* @__PURE__ */ jsx259(Checkmark, {}) : null,
+        leftItem: container61 === "mp4" ? /* @__PURE__ */ jsx261(Checkmark, {}) : null,
         id: "mp4",
         keyHint: null,
         quickSwitcherLabel: null,
@@ -42791,7 +42882,7 @@ var WebRenderModalBasic = ({
       {
         label: "WebM",
         onClick: () => setContainerFormat("webm"),
-        leftItem: container61 === "webm" ? /* @__PURE__ */ jsx259(Checkmark, {}) : null,
+        leftItem: container61 === "webm" ? /* @__PURE__ */ jsx261(Checkmark, {}) : null,
         id: "webm",
         keyHint: null,
         quickSwitcherLabel: null,
@@ -42806,7 +42897,7 @@ var WebRenderModalBasic = ({
       {
         label: "H.264",
         onClick: () => setCodec("h264"),
-        leftItem: codec === "h264" ? /* @__PURE__ */ jsx259(Checkmark, {}) : null,
+        leftItem: codec === "h264" ? /* @__PURE__ */ jsx261(Checkmark, {}) : null,
         id: "h264",
         keyHint: null,
         quickSwitcherLabel: null,
@@ -42817,7 +42908,7 @@ var WebRenderModalBasic = ({
       {
         label: "H.265",
         onClick: () => setCodec("h265"),
-        leftItem: codec === "h265" ? /* @__PURE__ */ jsx259(Checkmark, {}) : null,
+        leftItem: codec === "h265" ? /* @__PURE__ */ jsx261(Checkmark, {}) : null,
         id: "h265",
         keyHint: null,
         quickSwitcherLabel: null,
@@ -42828,7 +42919,7 @@ var WebRenderModalBasic = ({
       {
         label: "VP8",
         onClick: () => setCodec("vp8"),
-        leftItem: codec === "vp8" ? /* @__PURE__ */ jsx259(Checkmark, {}) : null,
+        leftItem: codec === "vp8" ? /* @__PURE__ */ jsx261(Checkmark, {}) : null,
         id: "vp8",
         keyHint: null,
         quickSwitcherLabel: null,
@@ -42839,7 +42930,7 @@ var WebRenderModalBasic = ({
       {
         label: "VP9",
         onClick: () => setCodec("vp9"),
-        leftItem: codec === "vp9" ? /* @__PURE__ */ jsx259(Checkmark, {}) : null,
+        leftItem: codec === "vp9" ? /* @__PURE__ */ jsx261(Checkmark, {}) : null,
         id: "vp9",
         keyHint: null,
         quickSwitcherLabel: null,
@@ -42850,7 +42941,7 @@ var WebRenderModalBasic = ({
       {
         label: "AV1",
         onClick: () => setCodec("av1"),
-        leftItem: codec === "av1" ? /* @__PURE__ */ jsx259(Checkmark, {}) : null,
+        leftItem: codec === "av1" ? /* @__PURE__ */ jsx261(Checkmark, {}) : null,
         id: "av1",
         keyHint: null,
         quickSwitcherLabel: null,
@@ -42860,38 +42951,38 @@ var WebRenderModalBasic = ({
       }
     ];
   }, [codec, setCodec]);
-  return /* @__PURE__ */ jsxs136("div", {
+  return /* @__PURE__ */ jsxs137("div", {
     style: tabContainer2,
     children: [
-      renderMode === "still" ? /* @__PURE__ */ jsxs136(Fragment45, {
+      renderMode === "still" ? /* @__PURE__ */ jsxs137(Fragment45, {
         children: [
-          /* @__PURE__ */ jsxs136("div", {
+          /* @__PURE__ */ jsxs137("div", {
             style: optionRow,
             children: [
-              /* @__PURE__ */ jsx259("div", {
+              /* @__PURE__ */ jsx261("div", {
                 style: label5,
                 children: "Format"
               }),
-              /* @__PURE__ */ jsx259("div", {
+              /* @__PURE__ */ jsx261("div", {
                 style: rightRow,
-                children: /* @__PURE__ */ jsx259(SegmentedControl, {
+                children: /* @__PURE__ */ jsx261(SegmentedControl, {
                   items: imageFormatOptions,
                   needsWrapping: true
                 })
               })
             ]
           }),
-          resolvedComposition.durationInFrames > 1 ? /* @__PURE__ */ jsxs136("div", {
+          resolvedComposition.durationInFrames > 1 ? /* @__PURE__ */ jsxs137("div", {
             style: optionRow,
             children: [
-              /* @__PURE__ */ jsx259("div", {
+              /* @__PURE__ */ jsx261("div", {
                 style: label5,
                 children: "Frame"
               }),
-              /* @__PURE__ */ jsx259("div", {
+              /* @__PURE__ */ jsx261("div", {
                 style: rightRow,
-                children: /* @__PURE__ */ jsx259(RightAlignInput, {
-                  children: /* @__PURE__ */ jsx259(InputDragger, {
+                children: /* @__PURE__ */ jsx261(RightAlignInput, {
+                  children: /* @__PURE__ */ jsx261(InputDragger, {
                     value: frame2,
                     onTextChange: onFrameChanged,
                     placeholder: `0-${resolvedComposition.durationInFrames - 1}`,
@@ -42908,18 +42999,18 @@ var WebRenderModalBasic = ({
             ]
           }) : null
         ]
-      }) : /* @__PURE__ */ jsxs136(Fragment45, {
+      }) : /* @__PURE__ */ jsxs137(Fragment45, {
         children: [
-          /* @__PURE__ */ jsxs136("div", {
+          /* @__PURE__ */ jsxs137("div", {
             style: optionRow,
             children: [
-              /* @__PURE__ */ jsx259("div", {
+              /* @__PURE__ */ jsx261("div", {
                 style: label5,
                 children: "Container"
               }),
-              /* @__PURE__ */ jsx259("div", {
+              /* @__PURE__ */ jsx261("div", {
                 style: rightRow,
-                children: /* @__PURE__ */ jsx259(Combobox, {
+                children: /* @__PURE__ */ jsx261(Combobox, {
                   values: containerOptions,
                   selectedId: container61,
                   title: "Container"
@@ -42927,24 +43018,24 @@ var WebRenderModalBasic = ({
               })
             ]
           }),
-          /* @__PURE__ */ jsxs136("div", {
+          /* @__PURE__ */ jsxs137("div", {
             style: optionRow,
             children: [
-              /* @__PURE__ */ jsxs136("div", {
+              /* @__PURE__ */ jsxs137("div", {
                 style: label5,
                 children: [
                   "Codec",
-                  /* @__PURE__ */ jsx259(Spacing, {
+                  /* @__PURE__ */ jsx261(Spacing, {
                     x: 0.5
                   }),
-                  /* @__PURE__ */ jsx259(OptionExplainerBubble, {
+                  /* @__PURE__ */ jsx261(OptionExplainerBubble, {
                     id: "videoCodecOption"
                   })
                 ]
               }),
-              /* @__PURE__ */ jsx259("div", {
+              /* @__PURE__ */ jsx261("div", {
                 style: rightRow,
-                children: /* @__PURE__ */ jsx259(Combobox, {
+                children: /* @__PURE__ */ jsx261(Combobox, {
                   values: codecOptions,
                   selectedId: codec,
                   title: "Codec"
@@ -42952,7 +43043,7 @@ var WebRenderModalBasic = ({
               })
             ]
           }),
-          /* @__PURE__ */ jsx259(FrameRangeSetting, {
+          /* @__PURE__ */ jsx261(FrameRangeSetting, {
             durationInFrames: resolvedComposition.durationInFrames,
             startFrame: startFrame ?? 0,
             endFrame: endFrame ?? resolvedComposition.durationInFrames - 1,
@@ -42961,7 +43052,7 @@ var WebRenderModalBasic = ({
           })
         ]
       }),
-      /* @__PURE__ */ jsx259(RenderModalOutputName, {
+      /* @__PURE__ */ jsx261(RenderModalOutputName, {
         existence: false,
         inputStyle: input,
         outName,
@@ -42969,24 +43060,24 @@ var WebRenderModalBasic = ({
         validationMessage,
         label: "Download name"
       }),
-      /* @__PURE__ */ jsxs136("div", {
+      /* @__PURE__ */ jsxs137("div", {
         style: optionRow,
         children: [
-          /* @__PURE__ */ jsxs136("div", {
+          /* @__PURE__ */ jsxs137("div", {
             style: label5,
             children: [
               "Log Level ",
-              /* @__PURE__ */ jsx259(Spacing, {
+              /* @__PURE__ */ jsx261(Spacing, {
                 x: 0.5
               }),
-              /* @__PURE__ */ jsx259(OptionExplainerBubble, {
+              /* @__PURE__ */ jsx261(OptionExplainerBubble, {
                 id: "logLevelOption"
               })
             ]
           }),
-          /* @__PURE__ */ jsx259("div", {
+          /* @__PURE__ */ jsx261("div", {
             style: rightRow,
-            children: /* @__PURE__ */ jsx259(Combobox, {
+            children: /* @__PURE__ */ jsx261(Combobox, {
               values: logLevelOptions,
               selectedId: logLevel,
               title: "Log Level"
@@ -42998,12 +43089,286 @@ var WebRenderModalBasic = ({
   });
 };
 
-// src/components/RenderModal/WebRenderModalPicture.tsx
+// src/components/RenderModal/WebRenderModalLicense.tsx
 import { useCallback as useCallback129, useMemo as useMemo131 } from "react";
-import { jsx as jsx260, jsxs as jsxs137 } from "react/jsx-runtime";
+import { jsx as jsx262, jsxs as jsxs138, Fragment as Fragment46 } from "react/jsx-runtime";
+var row9 = {
+  display: "flex",
+  flexDirection: "row",
+  paddingLeft: 16,
+  paddingRight: 16
+};
 var tabContainer3 = {
   flex: 1
 };
+var descriptionStyle = {
+  color: LIGHT_TEXT,
+  fontSize: 14,
+  fontFamily: "sans-serif",
+  paddingLeft: 16,
+  paddingRight: 16,
+  paddingTop: 16,
+  paddingBottom: 8,
+  lineHeight: 1.5
+};
+var paddedDescriptionStyle = {
+  color: LIGHT_TEXT,
+  fontSize: 14,
+  fontFamily: "sans-serif",
+  padding: 9,
+  border: "1px solid " + INPUT_BORDER_COLOR_UNHOVERED,
+  borderRadius: 8,
+  lineHeight: 1.5,
+  marginLeft: 16,
+  marginRight: 16
+};
+var descriptionLink = {
+  color: "white",
+  fontSize: 14
+};
+var checkboxLabel = {
+  fontSize: 14,
+  lineHeight: "40px",
+  color: LIGHT_TEXT,
+  flex: 1,
+  fontFamily: "sans-serif",
+  cursor: "pointer",
+  userSelect: "none"
+};
+var inputStyle2 = {
+  minWidth: 250
+};
+var justifyCenter = {
+  display: "flex",
+  alignItems: "center",
+  gap: 10,
+  flex: 1
+};
+var codeStyle = {
+  fontSize: 14,
+  fontFamily: "monospace",
+  color: BLUE
+};
+var codeLine = {
+  fontSize: 14,
+  fontFamily: "monospace",
+  color: LIGHT_TEXT,
+  backgroundColor: INPUT_BACKGROUND,
+  padding: 6,
+  borderRadius: 3,
+  marginTop: 6,
+  overflowX: "auto",
+  maxWidth: "100%"
+};
+var codeLineSmall = {
+  ...codeLine,
+  fontSize: 11
+};
+var LICENSE_KEY_LENGTH = 55;
+var LICENSE_KEY_PREFIX = "rm_pub_";
+var validateLicenseKey = (key5) => {
+  if (key5.length === 0) {
+    return { valid: false, message: null };
+  }
+  if (!key5.startsWith(LICENSE_KEY_PREFIX)) {
+    return {
+      valid: false,
+      message: `License key must start with "${LICENSE_KEY_PREFIX}"`
+    };
+  }
+  const afterPrefix = key5.slice(LICENSE_KEY_PREFIX.length);
+  if (!/^[a-zA-Z0-9]*$/.test(afterPrefix)) {
+    return {
+      valid: false,
+      message: "License key must contain only alphanumeric characters after the prefix"
+    };
+  }
+  if (key5.length !== LICENSE_KEY_LENGTH) {
+    return {
+      valid: false,
+      message: `License key must be ${LICENSE_KEY_LENGTH} characters long`
+    };
+  }
+  return { valid: true, message: null };
+};
+var WebRenderModalLicense = ({
+  licenseKey,
+  setLicenseKey,
+  initialPublicLicenseKey
+}) => {
+  const onFreeLicenseChange = useCallback129(() => {
+    setLicenseKey("free-license");
+  }, [setLicenseKey]);
+  const onCompanyLicenseChange = useCallback129(() => {
+    setLicenseKey(initialPublicLicenseKey ?? "");
+  }, [initialPublicLicenseKey, setLicenseKey]);
+  const onLicenseKeyChange = useCallback129((e) => {
+    setLicenseKey(e.target.value);
+  }, [setLicenseKey]);
+  const licenseValidation = useMemo131(() => {
+    if (licenseKey === null || licenseKey === "free-license") {
+      return { valid: true, message: null };
+    }
+    return validateLicenseKey(licenseKey);
+  }, [licenseKey]);
+  return /* @__PURE__ */ jsxs138("div", {
+    style: tabContainer3,
+    children: [
+      /* @__PURE__ */ jsxs138("div", {
+        style: descriptionStyle,
+        children: [
+          "Remotion is free if you are an individual or company with a headcount of 3 or less. See",
+          " ",
+          /* @__PURE__ */ jsx262("a", {
+            style: descriptionLink,
+            href: "https://remotion.dev/license",
+            children: "LICENSE.md"
+          }),
+          "."
+        ]
+      }),
+      /* @__PURE__ */ jsx262("div", {
+        style: row9,
+        children: /* @__PURE__ */ jsxs138("div", {
+          style: justifyCenter,
+          children: [
+            /* @__PURE__ */ jsx262(Checkbox, {
+              checked: licenseKey === "free-license",
+              onChange: onFreeLicenseChange,
+              name: "free-license",
+              rounded: true
+            }),
+            /* @__PURE__ */ jsxs138("div", {
+              style: checkboxLabel,
+              onClick: onFreeLicenseChange,
+              children: [
+                "I am eligible for the Free License, ",
+                "don't",
+                " print a warning"
+              ]
+            })
+          ]
+        })
+      }),
+      licenseKey === "free-license" ? /* @__PURE__ */ jsxs138("div", {
+        style: paddedDescriptionStyle,
+        children: [
+          "Enjoy Remotion! Add the following to",
+          " ",
+          /* @__PURE__ */ jsx262("code", {
+            style: codeStyle,
+            children: "remotion.config.ts"
+          }),
+          " to persist this setting:",
+          /* @__PURE__ */ jsx262("div", {
+            style: codeLine,
+            children: "Config.setPublicLicenseKey('free-license');"
+          })
+        ]
+      }) : null,
+      /* @__PURE__ */ jsx262("div", {
+        style: row9,
+        children: /* @__PURE__ */ jsxs138("div", {
+          style: justifyCenter,
+          children: [
+            /* @__PURE__ */ jsx262(Checkbox, {
+              checked: licenseKey !== "free-license" && licenseKey !== null,
+              onChange: onCompanyLicenseChange,
+              name: "company-license",
+              rounded: true
+            }),
+            /* @__PURE__ */ jsx262("div", {
+              style: checkboxLabel,
+              onClick: onCompanyLicenseChange,
+              children: "I have a Company License"
+            })
+          ]
+        })
+      }),
+      licenseKey !== "free-license" && licenseKey !== null ? /* @__PURE__ */ jsxs138("div", {
+        style: paddedDescriptionStyle,
+        children: [
+          "Add your public license from",
+          " ",
+          /* @__PURE__ */ jsx262("a", {
+            href: "https://remotion.pro/dashboard",
+            target: "_blank",
+            style: descriptionLink,
+            children: "remotion.pro"
+          }),
+          " ",
+          "key below.",
+          /* @__PURE__ */ jsx262(Spacing, {
+            y: 1,
+            block: true
+          }),
+          /* @__PURE__ */ jsx262(RemotionInput, {
+            value: licenseKey,
+            onChange: onLicenseKeyChange,
+            placeholder: "remotion.pro public license key (starts with rm_pub_)",
+            status: licenseValidation.valid || licenseKey.length === 0 ? "ok" : "error",
+            rightAlign: false,
+            style: inputStyle2,
+            autoFocus: true
+          }),
+          licenseValidation.message ? /* @__PURE__ */ jsxs138(Fragment46, {
+            children: [
+              /* @__PURE__ */ jsx262(Spacing, {
+                y: 1,
+                block: true
+              }),
+              /* @__PURE__ */ jsx262(ValidationMessage, {
+                message: licenseValidation.message,
+                align: "flex-start",
+                type: "error"
+              })
+            ]
+          }) : null,
+          licenseValidation.valid && licenseKey.length > 0 ? /* @__PURE__ */ jsxs138(Fragment46, {
+            children: [
+              /* @__PURE__ */ jsx262(Spacing, {
+                y: 1,
+                block: true
+              }),
+              "Add the following to",
+              " ",
+              /* @__PURE__ */ jsx262("code", {
+                style: codeStyle,
+                children: "remotion.config.ts"
+              }),
+              " to persist this setting:",
+              /* @__PURE__ */ jsx262("div", {
+                style: codeLineSmall,
+                children: "Config.setPublicLicenseKey('" + licenseKey + "');"
+              })
+            ]
+          }) : null
+        ]
+      }) : null,
+      licenseKey === null ? /* @__PURE__ */ jsxs138("div", {
+        style: descriptionStyle,
+        children: [
+          "If you are not eligible for the free license, you need to obtain a",
+          " ",
+          /* @__PURE__ */ jsx262("a", {
+            style: descriptionLink,
+            target: "_blank",
+            href: "https://remotion.pro/license",
+            children: "Company License"
+          }),
+          "."
+        ]
+      }) : null
+    ]
+  });
+};
+
+// src/components/RenderModal/WebRenderModalPicture.tsx
+import { useCallback as useCallback130, useMemo as useMemo132 } from "react";
+import { jsx as jsx263, jsxs as jsxs139 } from "react/jsx-runtime";
+var tabContainer4 = {
+  flex: 1
+};
 var WebRenderModalPicture = ({
   renderMode,
   videoBitrate,
@@ -43013,12 +43378,12 @@ var WebRenderModalPicture = ({
   transparent,
   setTransparent
 }) => {
-  const qualityOptions = useMemo131(() => {
+  const qualityOptions = useMemo132(() => {
     return [
       {
         label: "Very Low",
         onClick: () => setVideoBitrate("very-low"),
-        leftItem: videoBitrate === "very-low" ? /* @__PURE__ */ jsx260(Checkmark, {}) : null,
+        leftItem: videoBitrate === "very-low" ? /* @__PURE__ */ jsx263(Checkmark, {}) : null,
         id: "very-low",
         keyHint: null,
         quickSwitcherLabel: null,
@@ -43029,7 +43394,7 @@ var WebRenderModalPicture = ({
       {
         label: "Low",
         onClick: () => setVideoBitrate("low"),
-        leftItem: videoBitrate === "low" ? /* @__PURE__ */ jsx260(Checkmark, {}) : null,
+        leftItem: videoBitrate === "low" ? /* @__PURE__ */ jsx263(Checkmark, {}) : null,
         id: "low",
         keyHint: null,
         quickSwitcherLabel: null,
@@ -43040,7 +43405,7 @@ var WebRenderModalPicture = ({
       {
         label: "Medium",
         onClick: () => setVideoBitrate("medium"),
-        leftItem: videoBitrate === "medium" ? /* @__PURE__ */ jsx260(Checkmark, {}) : null,
+        leftItem: videoBitrate === "medium" ? /* @__PURE__ */ jsx263(Checkmark, {}) : null,
         id: "medium",
         keyHint: null,
         quickSwitcherLabel: null,
@@ -43051,7 +43416,7 @@ var WebRenderModalPicture = ({
       {
         label: "High",
         onClick: () => setVideoBitrate("high"),
-        leftItem: videoBitrate === "high" ? /* @__PURE__ */ jsx260(Checkmark, {}) : null,
+        leftItem: videoBitrate === "high" ? /* @__PURE__ */ jsx263(Checkmark, {}) : null,
         id: "high",
         keyHint: null,
         quickSwitcherLabel: null,
@@ -43062,7 +43427,7 @@ var WebRenderModalPicture = ({
       {
         label: "Very High",
         onClick: () => setVideoBitrate("very-high"),
-        leftItem: videoBitrate === "very-high" ? /* @__PURE__ */ jsx260(Checkmark, {}) : null,
+        leftItem: videoBitrate === "very-high" ? /* @__PURE__ */ jsx263(Checkmark, {}) : null,
         id: "very-high",
         keyHint: null,
         quickSwitcherLabel: null,
@@ -43072,25 +43437,25 @@ var WebRenderModalPicture = ({
       }
     ];
   }, [videoBitrate, setVideoBitrate]);
-  const onTransparentChanged = useCallback129((e) => {
+  const onTransparentChanged = useCallback130((e) => {
     setTransparent(e.target.checked);
   }, [setTransparent]);
   if (renderMode !== "video") {
     return null;
   }
-  return /* @__PURE__ */ jsxs137("div", {
-    style: tabContainer3,
+  return /* @__PURE__ */ jsxs139("div", {
+    style: tabContainer4,
     children: [
-      /* @__PURE__ */ jsxs137("div", {
+      /* @__PURE__ */ jsxs139("div", {
         style: optionRow,
         children: [
-          /* @__PURE__ */ jsx260("div", {
+          /* @__PURE__ */ jsx263("div", {
             style: label5,
             children: "Quality"
           }),
-          /* @__PURE__ */ jsx260("div", {
+          /* @__PURE__ */ jsx263("div", {
             style: rightRow,
-            children: /* @__PURE__ */ jsx260(Combobox, {
+            children: /* @__PURE__ */ jsx263(Combobox, {
               values: qualityOptions,
               selectedId: videoBitrate,
               title: "Quality"
@@ -43098,7 +43463,7 @@ var WebRenderModalPicture = ({
           })
         ]
       }),
-      /* @__PURE__ */ jsx260(NumberSetting, {
+      /* @__PURE__ */ jsx263(NumberSetting, {
         name: "Keyframe Interval",
         formatter: (v) => `${v}s`,
         min: 1,
@@ -43107,16 +43472,16 @@ var WebRenderModalPicture = ({
         value: keyframeIntervalInSeconds,
         onValueChanged: setKeyframeIntervalInSeconds
       }),
-      /* @__PURE__ */ jsxs137("div", {
+      /* @__PURE__ */ jsxs139("div", {
         style: optionRow,
         children: [
-          /* @__PURE__ */ jsx260("div", {
+          /* @__PURE__ */ jsx263("div", {
             style: label5,
             children: "Transparent"
           }),
-          /* @__PURE__ */ jsx260("div", {
+          /* @__PURE__ */ jsx263("div", {
             style: rightRow,
-            children: /* @__PURE__ */ jsx260(Checkbox, {
+            children: /* @__PURE__ */ jsx263(Checkbox, {
               checked: transparent,
               onChange: onTransparentChanged,
               name: "transparent"
@@ -43129,7 +43494,7 @@ var WebRenderModalPicture = ({
 };
 
 // src/components/RenderModal/WebRenderModal.tsx
-import { jsx as jsx261, jsxs as jsxs138 } from "react/jsx-runtime";
+import { jsx as jsx264, jsxs as jsxs140 } from "react/jsx-runtime";
 var invalidCharacters2 = ["?", "*", "+", ":", "%"];
 var isValidStillExtension2 = (extension, stillImageFormat) => {
   if (stillImageFormat === "jpeg" && extension === "jpg") {
@@ -43178,7 +43543,8 @@ var WebRenderModal = ({
   defaultProps,
   inFrameMark,
   outFrameMark,
-  initialLogLevel
+  initialLogLevel,
+  initialLicenseKey
 }) => {
   const context = useContext82(ResolvedCompositionContext);
   if (!context) {
@@ -43210,19 +43576,20 @@ var WebRenderModal = ({
   const [renderProgress, setRenderProgress] = useState82(null);
   const [transparent, setTransparent] = useState82(false);
   const [muted, setMuted] = useState82(false);
-  const finalEndFrame = useMemo132(() => {
+  const [licenseKey, setLicenseKey] = useState82(initialLicenseKey);
+  const finalEndFrame = useMemo133(() => {
     if (endFrame === null) {
       return resolvedComposition.durationInFrames - 1;
     }
     return Math.max(0, Math.min(resolvedComposition.durationInFrames - 1, endFrame));
   }, [endFrame, resolvedComposition.durationInFrames]);
-  const finalStartFrame = useMemo132(() => {
+  const finalStartFrame = useMemo133(() => {
     if (startFrame === null) {
       return 0;
     }
     return Math.max(0, Math.min(finalEndFrame, startFrame));
   }, [finalEndFrame, startFrame]);
-  const frameRange = useMemo132(() => {
+  const frameRange = useMemo133(() => {
     if (startFrame === null && endFrame === null) {
       return null;
     }
@@ -43238,21 +43605,21 @@ var WebRenderModal = ({
     });
   });
   const [outName, setOutName] = useState82(() => initialOutName);
-  const setStillFormat = useCallback130((format) => {
+  const setStillFormat = useCallback131((format) => {
     setImageFormat(format);
     setOutName((prev) => {
       const newFileName = getStringBeforeSuffix(prev) + "." + format;
       return newFileName;
     });
   }, []);
-  const setContainerFormat = useCallback130((newContainer) => {
+  const setContainerFormat = useCallback131((newContainer) => {
     setContainer(newContainer);
     setOutName((prev) => {
       const newFileName = getStringBeforeSuffix(prev) + "." + newContainer;
       return newFileName;
     });
   }, []);
-  const onRenderModeChange = useCallback130((newMode) => {
+  const onRenderModeChange = useCallback131((newMode) => {
     setRenderMode(newMode);
     if (newMode === "video") {
       setOutName((prev) => {
@@ -43266,7 +43633,7 @@ var WebRenderModal = ({
       });
     }
   }, [container61, imageFormat]);
-  const renderTabOptions = useMemo132(() => {
+  const renderTabOptions = useMemo133(() => {
     const options = [
       {
         label: "Still",
@@ -43289,10 +43656,10 @@ var WebRenderModal = ({
     }
     return options;
   }, [renderMode, resolvedComposition.durationInFrames, onRenderModeChange]);
-  const onFrameSetDirectly = useCallback130((newFrame) => {
+  const onFrameSetDirectly = useCallback131((newFrame) => {
     setFrame(newFrame);
   }, [setFrame]);
-  const onFrameChanged = useCallback130((e) => {
+  const onFrameChanged = useCallback131((e) => {
     setFrame((q) => {
       const newFrame = parseFloat(e);
       if (Number.isNaN(newFrame)) {
@@ -43301,10 +43668,10 @@ var WebRenderModal = ({
       return newFrame;
     });
   }, [setFrame]);
-  const onOutNameChange = useCallback130((e) => {
+  const onOutNameChange = useCallback131((e) => {
     setOutName(e.target.value);
   }, []);
-  const outnameValidation = useMemo132(() => {
+  const outnameValidation = useMemo133(() => {
     if (renderMode === "still") {
       return validateOutnameForStill({
         outName,
@@ -43343,7 +43710,7 @@ var WebRenderModal = ({
       return { valid: false, error: err };
     }
   }, [outName, imageFormat, renderMode, container61]);
-  const onRenderStill = useCallback130(async () => {
+  const onRenderStill = useCallback131(async () => {
     const { blob } = await renderStillOnWeb({
       composition: {
         component: unresolvedComposition.component,
@@ -43360,7 +43727,8 @@ var WebRenderModal = ({
       inputProps,
       delayRenderTimeoutInMilliseconds: delayRenderTimeout,
       mediaCacheSizeInBytes,
-      logLevel
+      logLevel,
+      licenseKey: licenseKey ?? undefined
     });
     const url = URL.createObjectURL(blob);
     const a = document.createElement("a");
@@ -43384,9 +43752,10 @@ var WebRenderModal = ({
     outName,
     resolvedComposition.defaultProps,
     unresolvedComposition.calculateMetadata,
-    resolvedComposition.id
+    resolvedComposition.id,
+    licenseKey
   ]);
-  const onRenderVideo = useCallback130(async () => {
+  const onRenderVideo = useCallback131(async () => {
     setRenderProgress({ renderedFrames: 0, encodedFrames: 0 });
     const { getBlob } = await renderMediaOnWeb({
       composition: {
@@ -43403,7 +43772,7 @@ var WebRenderModal = ({
       delayRenderTimeoutInMilliseconds: delayRenderTimeout,
       mediaCacheSizeInBytes,
       logLevel,
-      codec,
+      videoCodec: codec,
       container: container61,
       videoBitrate,
       hardwareAcceleration,
@@ -43414,7 +43783,8 @@ var WebRenderModal = ({
       },
       transparent,
       muted,
-      outputTarget: "web-fs"
+      outputTarget: "web-fs",
+      licenseKey: licenseKey ?? undefined
     });
     setRenderProgress(null);
     const blob = await getBlob();
@@ -43446,39 +43816,40 @@ var WebRenderModal = ({
     muted,
     resolvedComposition.defaultProps,
     resolvedComposition.id,
-    unresolvedComposition.calculateMetadata
+    unresolvedComposition.calculateMetadata,
+    licenseKey
   ]);
-  const onRender = useCallback130(async () => {
+  const onRender = useCallback131(async () => {
     if (renderMode === "still") {
       await onRenderStill();
     } else {
       await onRenderVideo();
     }
   }, [renderMode, onRenderStill, onRenderVideo]);
-  return /* @__PURE__ */ jsxs138("div", {
+  return /* @__PURE__ */ jsxs140("div", {
     style: outerModalStyle,
     children: [
-      /* @__PURE__ */ jsx261(ModalHeader, {
+      /* @__PURE__ */ jsx264(ModalHeader, {
         title: `Render ${resolvedComposition.id}`
       }),
-      /* @__PURE__ */ jsxs138("div", {
+      /* @__PURE__ */ jsxs140("div", {
         style: container59,
         children: [
-          /* @__PURE__ */ jsx261(SegmentedControl, {
+          /* @__PURE__ */ jsx264(SegmentedControl, {
             items: renderTabOptions,
             needsWrapping: false
           }),
-          /* @__PURE__ */ jsx261("div", {
+          /* @__PURE__ */ jsx264("div", {
             style: flexer
           }),
-          /* @__PURE__ */ jsxs138(Button, {
+          /* @__PURE__ */ jsxs140(Button, {
             autoFocus: true,
             onClick: onRender,
             style: buttonStyle7,
             disabled: !outnameValidation.valid,
             children: [
               renderProgress ? `Rendering... ${renderProgress.renderedFrames}/${finalEndFrame}` : `Render ${renderMode}`,
-              /* @__PURE__ */ jsx261(ShortcutHint, {
+              /* @__PURE__ */ jsx264(ShortcutHint, {
                 keyToPress: "↵",
                 cmdOrCtrl: true
               })
@@ -43486,88 +43857,106 @@ var WebRenderModal = ({
           })
         ]
       }),
-      /* @__PURE__ */ jsxs138("div", {
+      /* @__PURE__ */ jsx264("div", {
+        style: container59,
+        children: /* @__PURE__ */ jsx264(WebRendererExperimentalBadge, {})
+      }),
+      /* @__PURE__ */ jsxs140("div", {
         style: horizontalLayout,
         children: [
-          /* @__PURE__ */ jsxs138("div", {
+          /* @__PURE__ */ jsxs140("div", {
             style: leftSidebar,
             children: [
-              /* @__PURE__ */ jsxs138(VerticalTab, {
+              /* @__PURE__ */ jsxs140(VerticalTab, {
                 style: horizontalTab,
                 selected: tab === "general",
                 onClick: () => setTab("general"),
                 children: [
-                  /* @__PURE__ */ jsx261("div", {
+                  /* @__PURE__ */ jsx264("div", {
                     style: iconContainer,
-                    children: /* @__PURE__ */ jsx261(FileIcon, {
+                    children: /* @__PURE__ */ jsx264(FileIcon, {
                       style: icon6
                     })
                   }),
                   "General"
                 ]
               }),
-              /* @__PURE__ */ jsxs138(VerticalTab, {
+              /* @__PURE__ */ jsxs140(VerticalTab, {
                 style: horizontalTab,
                 selected: tab === "data",
                 onClick: () => setTab("data"),
                 children: [
-                  /* @__PURE__ */ jsx261("div", {
+                  /* @__PURE__ */ jsx264("div", {
                     style: iconContainer,
-                    children: /* @__PURE__ */ jsx261(DataIcon, {
+                    children: /* @__PURE__ */ jsx264(DataIcon, {
                       style: icon6
                     })
                   }),
                   "Input Props"
                 ]
               }),
-              renderMode === "video" ? /* @__PURE__ */ jsxs138(VerticalTab, {
+              renderMode === "video" ? /* @__PURE__ */ jsxs140(VerticalTab, {
                 style: horizontalTab,
                 selected: tab === "picture",
                 onClick: () => setTab("picture"),
                 children: [
-                  /* @__PURE__ */ jsx261("div", {
+                  /* @__PURE__ */ jsx264("div", {
                     style: iconContainer,
-                    children: /* @__PURE__ */ jsx261(PicIcon, {
+                    children: /* @__PURE__ */ jsx264(PicIcon, {
                       style: icon6
                     })
                   }),
                   "Picture"
                 ]
               }) : null,
-              renderMode === "video" ? /* @__PURE__ */ jsxs138(VerticalTab, {
+              renderMode === "video" ? /* @__PURE__ */ jsxs140(VerticalTab, {
                 style: horizontalTab,
                 selected: tab === "audio",
                 onClick: () => setTab("audio"),
                 children: [
-                  /* @__PURE__ */ jsx261("div", {
+                  /* @__PURE__ */ jsx264("div", {
                     style: iconContainer,
-                    children: /* @__PURE__ */ jsx261(AudioIcon, {
+                    children: /* @__PURE__ */ jsx264(AudioIcon, {
                       style: icon6
                     })
                   }),
                   "Audio"
                 ]
               }) : null,
-              /* @__PURE__ */ jsxs138(VerticalTab, {
+              /* @__PURE__ */ jsxs140(VerticalTab, {
                 style: horizontalTab,
                 selected: tab === "advanced",
                 onClick: () => setTab("advanced"),
                 children: [
-                  /* @__PURE__ */ jsx261("div", {
+                  /* @__PURE__ */ jsx264("div", {
                     style: iconContainer,
-                    children: /* @__PURE__ */ jsx261(FileIcon, {
+                    children: /* @__PURE__ */ jsx264(GearIcon, {
                       style: icon6
                     })
                   }),
-                  "Advanced"
+                  "Other"
+                ]
+              }),
+              /* @__PURE__ */ jsxs140(VerticalTab, {
+                style: horizontalTab,
+                selected: tab === "license",
+                onClick: () => setTab("license"),
+                children: [
+                  /* @__PURE__ */ jsx264("div", {
+                    style: iconContainer,
+                    children: /* @__PURE__ */ jsx264(CertificateIcon, {
+                      style: icon6
+                    })
+                  }),
+                  "License"
                 ]
               })
             ]
           }),
-          /* @__PURE__ */ jsx261("div", {
+          /* @__PURE__ */ jsx264("div", {
             style: optionsPanel,
             className: VERTICAL_SCROLLBAR_CLASSNAME,
-            children: tab === "general" ? /* @__PURE__ */ jsx261(WebRenderModalBasic, {
+            children: tab === "general" ? /* @__PURE__ */ jsx264(WebRenderModalBasic, {
               renderMode,
               resolvedComposition,
               imageFormat,
@@ -43588,7 +43977,7 @@ var WebRenderModal = ({
               validationMessage: outnameValidation.valid ? null : outnameValidation.error.message,
               logLevel,
               setLogLevel
-            }) : tab === "data" ? /* @__PURE__ */ jsx261(DataEditor, {
+            }) : tab === "data" ? /* @__PURE__ */ jsx264(DataEditor, {
               defaultProps: inputProps,
               setDefaultProps: setInputProps,
               unresolvedComposition,
@@ -43597,7 +43986,7 @@ var WebRenderModal = ({
               saving,
               setSaving,
               readOnlyStudio: false
-            }) : tab === "picture" ? /* @__PURE__ */ jsx261(WebRenderModalPicture, {
+            }) : tab === "picture" ? /* @__PURE__ */ jsx264(WebRenderModalPicture, {
               renderMode,
               videoBitrate,
               setVideoBitrate,
@@ -43605,10 +43994,10 @@ var WebRenderModal = ({
               setKeyframeIntervalInSeconds,
               transparent,
               setTransparent
-            }) : tab === "audio" ? /* @__PURE__ */ jsx261(WebRenderModalAudio, {
+            }) : tab === "audio" ? /* @__PURE__ */ jsx264(WebRenderModalAudio, {
               muted,
               setMuted
-            }) : /* @__PURE__ */ jsx261(WebRenderModalAdvanced, {
+            }) : tab === "advanced" ? /* @__PURE__ */ jsx264(WebRenderModalAdvanced, {
               renderMode,
               delayRenderTimeout,
               setDelayRenderTimeout,
@@ -43616,6 +44005,10 @@ var WebRenderModal = ({
               setMediaCacheSizeInBytes,
               hardwareAcceleration,
               setHardwareAcceleration
+            }) : /* @__PURE__ */ jsx264(WebRenderModalLicense, {
+              licenseKey,
+              setLicenseKey,
+              initialPublicLicenseKey: initialLicenseKey
             })
           })
         ]
@@ -43624,10 +44017,10 @@ var WebRenderModal = ({
   });
 };
 var WebRenderModalWithLoader = (props) => {
-  return /* @__PURE__ */ jsx261(DismissableModal, {
-    children: /* @__PURE__ */ jsx261(ResolveCompositionBeforeModal, {
+  return /* @__PURE__ */ jsx264(DismissableModal, {
+    children: /* @__PURE__ */ jsx264(ResolveCompositionBeforeModal, {
       compositionId: props.compositionId,
-      children: /* @__PURE__ */ jsx261(WebRenderModal, {
+      children: /* @__PURE__ */ jsx264(WebRenderModal, {
         ...props
       })
     })
@@ -43635,11 +44028,11 @@ var WebRenderModalWithLoader = (props) => {
 };
 
 // src/components/UpdateModal/UpdateModal.tsx
-import { useCallback as useCallback133, useMemo as useMemo134 } from "react";
+import { useCallback as useCallback134, useMemo as useMemo135 } from "react";
 
 // src/components/CopyButton.tsx
-import { useCallback as useCallback131, useEffect as useEffect78, useState as useState83 } from "react";
-import { jsx as jsx262, jsxs as jsxs139 } from "react/jsx-runtime";
+import { useCallback as useCallback132, useEffect as useEffect79, useState as useState83 } from "react";
+import { jsx as jsx265, jsxs as jsxs141 } from "react/jsx-runtime";
 var iconStyle8 = {
   width: 16,
   height: 16,
@@ -43649,7 +44042,7 @@ var buttonContainerStyle = {
   display: "flex",
   minWidth: "114px"
 };
-var copyIcon = /* @__PURE__ */ jsx262("svg", {
+var copyIcon = /* @__PURE__ */ jsx265("svg", {
   "aria-hidden": "true",
   focusable: "false",
   "data-prefix": "far",
@@ -43659,7 +44052,7 @@ var copyIcon = /* @__PURE__ */ jsx262("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 384 512",
   style: iconStyle8,
-  children: /* @__PURE__ */ jsx262("path", {
+  children: /* @__PURE__ */ jsx265("path", {
     fill: "currentColor",
     d: "M336 64h-80c0-35.3-28.7-64-64-64s-64 28.7-64 64H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM192 40c13.3 0 24 10.7 24 24s-10.7 24-24 24-24-10.7-24-24 10.7-24 24-24zm144 418c0 3.3-2.7 6-6 6H54c-3.3 0-6-2.7-6-6V118c0-3.3 2.7-6 6-6h42v36c0 6.6 5.4 12 12 12h168c6.6 0 12-5.4 12-12v-36h42c3.3 0 6 2.7 6 6z"
   })
@@ -43669,30 +44062,30 @@ var labelStyle5 = {
 };
 var CopyButton = ({ textToCopy, label: label11, labelWhenCopied }) => {
   const [copied, setCopied] = useState83(false);
-  const onClick = useCallback131(() => {
+  const onClick = useCallback132(() => {
     copyText(textToCopy).then(() => {
       setCopied(Date.now());
     }).catch((err) => {
       showNotification(`Could not copy: ${err.message}`, 2000);
     });
   }, [textToCopy]);
-  useEffect78(() => {
+  useEffect79(() => {
     if (!copied) {
       return;
     }
     const to = setTimeout(() => setCopied(false), 2000);
     return () => clearTimeout(to);
   }, [copied]);
-  return /* @__PURE__ */ jsxs139(Button, {
+  return /* @__PURE__ */ jsxs141(Button, {
     onClick,
     buttonContainerStyle,
     children: [
       copyIcon,
-      /* @__PURE__ */ jsx262(Spacing, {
+      /* @__PURE__ */ jsx265(Spacing, {
         x: 1.5
       }),
       " ",
-      /* @__PURE__ */ jsx262("span", {
+      /* @__PURE__ */ jsx265("span", {
         style: labelStyle5,
         children: copied ? labelWhenCopied : label11
       })
@@ -43701,8 +44094,8 @@ var CopyButton = ({ textToCopy, label: label11, labelWhenCopied }) => {
 };
 
 // src/components/UpdateModal/OpenIssueButton.tsx
-import { useCallback as useCallback132, useMemo as useMemo133, useState as useState84 } from "react";
-import { jsx as jsx263 } from "react/jsx-runtime";
+import { useCallback as useCallback133, useMemo as useMemo134, useState as useState84 } from "react";
+import { jsx as jsx266 } from "react/jsx-runtime";
 var svgStyle3 = {
   width: "11px",
   height: "11px"
@@ -43715,30 +44108,30 @@ var buttonStyle8 = {
   justifyContent: "center",
   alignItems: "center"
 };
-var OpenIssueButton = ({ link: link3 }) => {
+var OpenIssueButton = ({ link: link4 }) => {
   const [hovered, setHovered] = useState84(false);
   const buttonTooltip = `Open GitHub issue in new Tab`;
-  const handleClick = useCallback132(() => {
-    window.open(link3, "_blank");
-  }, [link3]);
-  const svgFillColor = useMemo133(() => {
+  const handleClick = useCallback133(() => {
+    window.open(link4, "_blank");
+  }, [link4]);
+  const svgFillColor = useMemo134(() => {
     return hovered ? "white" : LIGHT_TEXT;
   }, [hovered]);
-  const openInEditorSvg = /* @__PURE__ */ jsx263("svg", {
+  const openInEditorSvg = /* @__PURE__ */ jsx266("svg", {
     viewBox: "0 0 512 512",
     style: svgStyle3,
-    children: /* @__PURE__ */ jsx263("path", {
+    children: /* @__PURE__ */ jsx266("path", {
       fill: svgFillColor,
       d: "M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z"
     })
   });
-  const onPointerEnter = useCallback132(() => {
+  const onPointerEnter = useCallback133(() => {
     setHovered(true);
   }, []);
-  const onPointerLeave = useCallback132(() => {
+  const onPointerLeave = useCallback133(() => {
     setHovered(false);
   }, []);
-  return /* @__PURE__ */ jsx263("button", {
+  return /* @__PURE__ */ jsx266("button", {
     title: buttonTooltip,
     type: "button",
     onPointerEnter,
@@ -43750,52 +44143,52 @@ var OpenIssueButton = ({ link: link3 }) => {
 };
 
 // src/components/KnownBugs.tsx
-import { jsx as jsx264, jsxs as jsxs140 } from "react/jsx-runtime";
+import { jsx as jsx267, jsxs as jsxs142 } from "react/jsx-runtime";
 var container61 = {
   display: "flex",
   flexDirection: "row",
   alignItems: "center"
 };
-var text3 = {
+var text4 = {
   fontSize: 14,
   flex: 1
 };
 var KnownBugs = ({ bugs }) => {
   const bugElements = bugs.map((bug) => {
-    return /* @__PURE__ */ jsxs140("div", {
+    return /* @__PURE__ */ jsxs142("div", {
       style: container61,
       children: [
-        /* @__PURE__ */ jsxs140("div", {
-          style: text3,
+        /* @__PURE__ */ jsxs142("div", {
+          style: text4,
           children: [
             "\uD83E\uDEB2 ",
             bug.title
           ]
         }),
-        /* @__PURE__ */ jsx264(OpenIssueButton, {
+        /* @__PURE__ */ jsx267(OpenIssueButton, {
           link: bug.link
         })
       ]
     }, bug.description + bug.link);
   });
-  return /* @__PURE__ */ jsx264("div", {
+  return /* @__PURE__ */ jsx267("div", {
     children: bugElements
   });
 };
 
 // src/components/UpdateModal/UpdateModal.tsx
-import { jsx as jsx265, jsxs as jsxs141, Fragment as Fragment46 } from "react/jsx-runtime";
+import { jsx as jsx268, jsxs as jsxs143, Fragment as Fragment47 } from "react/jsx-runtime";
 var container62 = {
   padding: 20,
   paddingTop: 0
 };
-var text4 = {
+var text5 = {
   fontSize: 14
 };
 var title7 = {
   paddingTop: 12,
   paddingBottom: 8,
-  ...text4
+  ...text5
 };
 var code = {
   background: SELECTED_BACKGROUND,
@@ -43804,11 +44197,11 @@ var code = {
   marginTop: 10,
   marginBottom: 10
 };
-var link3 = {
+var link4 = {
   fontWeight: "bold",
   color: BLUE,
   textDecoration: "none",
-  ...text4
+  ...text5
 };
 var commands = {
   npm: "npx remotion upgrade",
@@ -43818,26 +44211,26 @@ var commands = {
   unknown: "npx remotion upgrade"
 };
 var UpdateModal = ({ info, knownBugs }) => {
-  const hasKnownBugs = useMemo134(() => {
+  const hasKnownBugs = useMemo135(() => {
     return knownBugs && knownBugs?.length > 0;
   }, [knownBugs]);
   const command = commands[info.packageManager];
-  const onClick = useCallback133(() => {
+  const onClick = useCallback134(() => {
     copyText(command).catch((err) => {
       showNotification(`Could not copy: ${err.message}`, 2000);
     });
   }, [command]);
-  return /* @__PURE__ */ jsxs141(DismissableModal, {
+  return /* @__PURE__ */ jsxs143(DismissableModal, {
     children: [
-      /* @__PURE__ */ jsx265(ModalHeader, {
+      /* @__PURE__ */ jsx268(ModalHeader, {
         title: "Update available"
       }),
-      /* @__PURE__ */ jsxs141("div", {
+      /* @__PURE__ */ jsxs143("div", {
         style: container62,
         children: [
-          hasKnownBugs ? /* @__PURE__ */ jsxs141(Fragment46, {
+          hasKnownBugs ? /* @__PURE__ */ jsxs143(Fragment47, {
             children: [
-              /* @__PURE__ */ jsxs141("div", {
+              /* @__PURE__ */ jsxs143("div", {
                 style: title7,
                 children: [
                   "The currently installed version ",
@@ -43845,43 +44238,43 @@ var UpdateModal = ({ info, knownBugs }) => {
                   " has the following known bugs:"
                 ]
               }),
-              /* @__PURE__ */ jsx265(KnownBugs, {
+              /* @__PURE__ */ jsx268(KnownBugs, {
                 bugs: knownBugs
               }),
-              /* @__PURE__ */ jsx265("div", {
+              /* @__PURE__ */ jsx268("div", {
                 style: { height: "20px" }
               }),
-              /* @__PURE__ */ jsx265("div", {
-                style: text4,
+              /* @__PURE__ */ jsx268("div", {
+                style: text5,
                 children: "To upgrade, run the following command:"
               })
             ]
-          }) : /* @__PURE__ */ jsx265("div", {
+          }) : /* @__PURE__ */ jsx268("div", {
             style: title7,
             children: "A new update for Remotion is available! Run the following command:"
           }),
-          /* @__PURE__ */ jsxs141(Row, {
+          /* @__PURE__ */ jsxs143(Row, {
             align: "center",
             children: [
-              /* @__PURE__ */ jsx265(Flex, {
-                children: /* @__PURE__ */ jsx265("pre", {
+              /* @__PURE__ */ jsx268(Flex, {
+                children: /* @__PURE__ */ jsx268("pre", {
                   onClick,
                   style: code,
                   children: command
                 })
               }),
-              /* @__PURE__ */ jsx265(Spacing, {
+              /* @__PURE__ */ jsx268(Spacing, {
                 x: 1
               }),
-              /* @__PURE__ */ jsx265(CopyButton, {
+              /* @__PURE__ */ jsx268(CopyButton, {
                 textToCopy: command,
                 label: "Copy",
                 labelWhenCopied: "Copied!"
               })
             ]
           }),
-          /* @__PURE__ */ jsxs141("div", {
-            style: text4,
+          /* @__PURE__ */ jsxs143("div", {
+            style: text5,
             children: [
               "This will upgrade Remotion from ",
               info.currentVersion,
@@ -43891,13 +44284,13 @@ var UpdateModal = ({ info, knownBugs }) => {
               "."
             ]
           }),
-          /* @__PURE__ */ jsxs141("div", {
-            style: text4,
+          /* @__PURE__ */ jsxs143("div", {
+            style: text5,
             children: [
               "Read the",
               " ",
-              /* @__PURE__ */ jsx265("a", {
-                style: link3,
+              /* @__PURE__ */ jsx268("a", {
+                style: link4,
                 target: "_blank",
                 href: "https://github.com/remotion-dev/remotion/releases",
                 children: "Release notes"
@@ -43915,33 +44308,34 @@ var UpdateModal = ({ info, knownBugs }) => {
 };
 
 // src/components/Modals.tsx
-import { jsx as jsx266, jsxs as jsxs142, Fragment as Fragment47 } from "react/jsx-runtime";
+import { jsx as jsx269, jsxs as jsxs144, Fragment as Fragment48 } from "react/jsx-runtime";
 var Modals = ({ readOnlyStudio }) => {
   const { selectedModal: modalContextType } = useContext83(ModalsContext);
   const canRender = useContext83(StudioServerConnectionCtx).previewServerState.type === "connected";
-  return /* @__PURE__ */ jsxs142(Fragment47, {
+  return /* @__PURE__ */ jsxs144(Fragment48, {
     children: [
-      modalContextType && modalContextType.type === "duplicate-comp" && /* @__PURE__ */ jsx266(DuplicateComposition, {
+      modalContextType && modalContextType.type === "duplicate-comp" && /* @__PURE__ */ jsx269(DuplicateComposition, {
         compositionType: modalContextType.compositionType,
         compositionId: modalContextType.compositionId
       }),
-      modalContextType && modalContextType.type === "delete-comp" && /* @__PURE__ */ jsx266(DeleteComposition, {
+      modalContextType && modalContextType.type === "delete-comp" && /* @__PURE__ */ jsx269(DeleteComposition, {
         compositionId: modalContextType.compositionId
       }),
-      modalContextType && modalContextType.type === "rename-comp" && /* @__PURE__ */ jsx266(RenameComposition, {
+      modalContextType && modalContextType.type === "rename-comp" && /* @__PURE__ */ jsx269(RenameComposition, {
         compositionId: modalContextType.compositionId
       }),
-      modalContextType && modalContextType.type === "input-props-override" && /* @__PURE__ */ jsx266(OverrideInputPropsModal, {}),
-      modalContextType && modalContextType.type === "web-render" && /* @__PURE__ */ jsx266(WebRenderModalWithLoader, {
+      modalContextType && modalContextType.type === "input-props-override" && /* @__PURE__ */ jsx269(OverrideInputPropsModal, {}),
+      modalContextType && modalContextType.type === "web-render" && /* @__PURE__ */ jsx269(WebRenderModalWithLoader, {
         type: "web-render",
         initialFrame: modalContextType.initialFrame,
         compositionId: modalContextType.compositionId,
         defaultProps: modalContextType.defaultProps,
         inFrameMark: modalContextType.inFrameMark,
         outFrameMark: modalContextType.outFrameMark,
-        initialLogLevel: modalContextType.initialLogLevel
+        initialLogLevel: modalContextType.initialLogLevel,
+        initialLicenseKey: modalContextType.initialLicenseKey
       }),
-      modalContextType && canRender && modalContextType.type === "server-render" && /* @__PURE__ */ jsx266(RenderModalWithLoader, {
+      modalContextType && canRender && modalContextType.type === "server-render" && /* @__PURE__ */ jsx269(RenderModalWithLoader, {
         initialFrame: modalContextType.initialFrame,
         initialDarkMode: modalContextType.initialDarkMode,
         compositionId: modalContextType.compositionId,
@@ -43990,28 +44384,28 @@ var Modals = ({ readOnlyStudio }) => {
         initialChromeMode: modalContextType.initialChromeMode,
         renderDefaults: modalContextType.renderDefaults
       }),
-      modalContextType && canRender && modalContextType.type === "render-progress" && /* @__PURE__ */ jsx266(RenderStatusModal, {
+      modalContextType && canRender && modalContextType.type === "render-progress" && /* @__PURE__ */ jsx269(RenderStatusModal, {
         jobId: modalContextType.jobId
       }),
-      modalContextType && modalContextType.type === "update" && /* @__PURE__ */ jsx266(UpdateModal, {
+      modalContextType && modalContextType.type === "update" && /* @__PURE__ */ jsx269(UpdateModal, {
         info: modalContextType.info,
         knownBugs: modalContextType.knownBugs
       }),
-      modalContextType && modalContextType.type === "install-packages" && /* @__PURE__ */ jsx266(InstallPackageModal, {
+      modalContextType && modalContextType.type === "install-packages" && /* @__PURE__ */ jsx269(InstallPackageModal, {
         packageManager: modalContextType.packageManager
       }),
-      modalContextType && modalContextType.type === "quick-switcher" && /* @__PURE__ */ jsx266(QuickSwitcher_default, {
+      modalContextType && modalContextType.type === "quick-switcher" && /* @__PURE__ */ jsx269(QuickSwitcher_default, {
         readOnlyStudio,
         invocationTimestamp: modalContextType.invocationTimestamp,
         initialMode: modalContextType.mode
       }),
-      /* @__PURE__ */ jsx266(AskAiModal, {})
+      /* @__PURE__ */ jsx269(AskAiModal, {})
     ]
   });
 };
 
 // src/components/Editor.tsx
-import { jsx as jsx267, jsxs as jsxs143 } from "react/jsx-runtime";
+import { jsx as jsx270, jsxs as jsxs145 } from "react/jsx-runtime";
 var background2 = {
   backgroundColor: BACKGROUND,
   display: "flex",
@@ -44027,7 +44421,7 @@ var Editor = ({ Root, readOnlyStudio }) => {
     triggerOnWindowResize: false,
     shouldApplyCssTransforms: true
   });
-  useEffect79(() => {
+  useEffect80(() => {
     if (readOnlyStudio) {
       return;
     }
@@ -44041,11 +44435,11 @@ var Editor = ({ Root, readOnlyStudio }) => {
       window.removeEventListener("beforeunload", listenToChanges);
     };
   }, [readOnlyStudio]);
-  const [canvasMounted, setCanvasMounted] = React176.useState(false);
-  const onMounted = useCallback134(() => {
+  const [canvasMounted, setCanvasMounted] = React177.useState(false);
+  const onMounted = useCallback135(() => {
     setCanvasMounted(true);
   }, []);
-  const value = useMemo135(() => {
+  const value = useMemo136(() => {
     if (!size4) {
       return null;
     }
@@ -44054,41 +44448,41 @@ var Editor = ({ Root, readOnlyStudio }) => {
       canvasSize: size4
     };
   }, [size4]);
-  const MemoRoot = useMemo135(() => {
-    return React176.memo(Root);
+  const MemoRoot = useMemo136(() => {
+    return React177.memo(Root);
   }, [Root]);
-  return /* @__PURE__ */ jsx267(HigherZIndex, {
+  return /* @__PURE__ */ jsx270(HigherZIndex, {
     onEscape: noop,
     onOutsideClick: noop,
-    children: /* @__PURE__ */ jsxs143(TimelineZoomContext, {
+    children: /* @__PURE__ */ jsxs145(TimelineZoomContext, {
       children: [
-        /* @__PURE__ */ jsx267(Internals61.CurrentScaleContext.Provider, {
+        /* @__PURE__ */ jsx270(Internals61.CurrentScaleContext.Provider, {
           value,
-          children: /* @__PURE__ */ jsxs143("div", {
+          children: /* @__PURE__ */ jsxs145("div", {
             style: background2,
             children: [
-              canvasMounted ? /* @__PURE__ */ jsx267(MemoRoot, {}) : null,
-              /* @__PURE__ */ jsxs143(Internals61.CanUseRemotionHooksProvider, {
+              canvasMounted ? /* @__PURE__ */ jsx270(MemoRoot, {}) : null,
+              /* @__PURE__ */ jsxs145(Internals61.CanUseRemotionHooksProvider, {
                 children: [
-                  /* @__PURE__ */ jsx267(EditorContent, {
+                  /* @__PURE__ */ jsx270(EditorContent, {
                     readOnlyStudio,
-                    children: /* @__PURE__ */ jsx267(TopPanel, {
+                    children: /* @__PURE__ */ jsx270(TopPanel, {
                       drawRef,
                       bufferStateDelayInMilliseconds: BUFFER_STATE_DELAY_IN_MILLISECONDS,
                       onMounted,
                       readOnlyStudio
                     })
                   }),
-                  /* @__PURE__ */ jsx267(GlobalKeybindings, {})
+                  /* @__PURE__ */ jsx270(GlobalKeybindings, {})
                 ]
               })
             ]
           })
         }),
-        /* @__PURE__ */ jsx267(Modals, {
+        /* @__PURE__ */ jsx270(Modals, {
           readOnlyStudio
         }),
-        /* @__PURE__ */ jsx267(NotificationCenter, {})
+        /* @__PURE__ */ jsx270(NotificationCenter, {})
       ]
     })
   });
@@ -44098,9 +44492,9 @@ var Editor = ({ Root, readOnlyStudio }) => {
 import { PlayerInternals as PlayerInternals20 } from "@remotion/player";
 
 // src/state/preview-size.tsx
-import { useCallback as useCallback135, useContext as useContext84, useMemo as useMemo136, useState as useState85 } from "react";
+import { useCallback as useCallback136, useContext as useContext84, useMemo as useMemo137, useState as useState85 } from "react";
 import { Internals as Internals62 } from "remotion";
-import { jsx as jsx268 } from "react/jsx-runtime";
+import { jsx as jsx271 } from "react/jsx-runtime";
 var key5 = "remotion.previewSize";
 var persistPreviewSizeOption = (option) => {
   localStorage.setItem(key5, JSON.stringify(option));
@@ -44127,14 +44521,14 @@ var PreviewSizeProvider = ({ children }) => {
     };
   });
   const { editorZoomGestures } = useContext84(EditorZoomGesturesContext);
-  const setSize = useCallback135((newValue) => {
+  const setSize = useCallback136((newValue) => {
     setSizeState((prevState) => {
       const newVal = newValue(prevState);
       persistPreviewSizeOption(newVal);
       return newVal;
     });
   }, []);
-  const previewSizeCtx = useMemo136(() => {
+  const previewSizeCtx = useMemo137(() => {
     return {
       size: editorZoomGestures ? size4 : {
         size: size4.size,
@@ -44148,58 +44542,58 @@ var PreviewSizeProvider = ({ children }) => {
       setTranslation
     };
   }, [editorZoomGestures, size4, setSize, translation]);
-  return /* @__PURE__ */ jsx268(Internals62.PreviewSizeContext.Provider, {
+  return /* @__PURE__ */ jsx271(Internals62.PreviewSizeContext.Provider, {
     value: previewSizeCtx,
     children
   });
 };
 
 // src/components/CheckerboardProvider.tsx
-import { useCallback as useCallback136, useMemo as useMemo137, useState as useState86 } from "react";
-import { jsx as jsx269 } from "react/jsx-runtime";
+import { useCallback as useCallback137, useMemo as useMemo138, useState as useState86 } from "react";
+import { jsx as jsx272 } from "react/jsx-runtime";
 var CheckerboardProvider = ({ children }) => {
   const [checkerboard, setCheckerboardState] = useState86(() => loadCheckerboardOption());
-  const setCheckerboard = useCallback136((newValue) => {
+  const setCheckerboard = useCallback137((newValue) => {
     setCheckerboardState((prevState) => {
       const newVal = newValue(prevState);
       persistCheckerboardOption(newVal);
       return newVal;
     });
   }, []);
-  const checkerboardCtx = useMemo137(() => {
+  const checkerboardCtx = useMemo138(() => {
     return {
       checkerboard,
       setCheckerboard
     };
   }, [checkerboard, setCheckerboard]);
-  return /* @__PURE__ */ jsx269(CheckerboardContext.Provider, {
+  return /* @__PURE__ */ jsx272(CheckerboardContext.Provider, {
     value: checkerboardCtx,
     children
   });
 };
 
 // src/components/MediaVolumeProvider.tsx
-import { useMemo as useMemo138, useState as useState87 } from "react";
+import { useMemo as useMemo139, useState as useState87 } from "react";
 import { Internals as Internals63 } from "remotion";
-import { jsx as jsx270 } from "react/jsx-runtime";
+import { jsx as jsx273 } from "react/jsx-runtime";
 var MediaVolumeProvider = ({ children }) => {
   const [mediaMuted, setMediaMuted] = useState87(() => loadMuteOption());
   const [mediaVolume, setMediaVolume] = useState87(1);
-  const mediaVolumeContextValue = useMemo138(() => {
+  const mediaVolumeContextValue = useMemo139(() => {
     return {
       mediaMuted,
       mediaVolume
     };
   }, [mediaMuted, mediaVolume]);
-  const setMediaVolumeContextValue = useMemo138(() => {
+  const setMediaVolumeContextValue = useMemo139(() => {
     return {
       setMediaMuted,
       setMediaVolume
     };
   }, []);
-  return /* @__PURE__ */ jsx270(Internals63.MediaVolumeContext.Provider, {
+  return /* @__PURE__ */ jsx273(Internals63.MediaVolumeContext.Provider, {
     value: mediaVolumeContextValue,
-    children: /* @__PURE__ */ jsx270(Internals63.SetMediaVolumeContext.Provider, {
+    children: /* @__PURE__ */ jsx273(Internals63.SetMediaVolumeContext.Provider, {
       value: setMediaVolumeContextValue,
       children
     })
@@ -44207,24 +44601,24 @@ var MediaVolumeProvider = ({ children }) => {
 };
 
 // src/components/ModalsProvider.tsx
-import { useMemo as useMemo139, useState as useState88 } from "react";
-import { jsx as jsx271 } from "react/jsx-runtime";
+import { useMemo as useMemo140, useState as useState88 } from "react";
+import { jsx as jsx274 } from "react/jsx-runtime";
 var ModalsProvider = ({ children }) => {
   const [modalContextType, setModalContextType] = useState88(null);
-  const modalsContext = useMemo139(() => {
+  const modalsContext = useMemo140(() => {
     return {
       selectedModal: modalContextType,
       setSelectedModal: setModalContextType
     };
   }, [modalContextType]);
-  return /* @__PURE__ */ jsx271(ModalsContext.Provider, {
+  return /* @__PURE__ */ jsx274(ModalsContext.Provider, {
     value: modalsContext,
     children
   });
 };
 
 // src/components/SetTimelineInOutProvider.tsx
-import { useEffect as useEffect80, useMemo as useMemo140, useState as useState89 } from "react";
+import { useEffect as useEffect81, useMemo as useMemo141, useState as useState89 } from "react";
 
 // src/state/marks.ts
 var localStorageKey5 = () => `remotion.editor.marksv2`;
@@ -44240,20 +44634,20 @@ var loadMarks = () => {
 };
 
 // src/components/SetTimelineInOutProvider.tsx
-import { jsx as jsx272 } from "react/jsx-runtime";
+import { jsx as jsx275 } from "react/jsx-runtime";
 var SetTimelineInOutProvider = ({ children }) => {
   const [inAndOutFrames, setInAndOutFrames] = useState89(() => loadMarks());
-  const setTimelineInOutContextValue = useMemo140(() => {
+  const setTimelineInOutContextValue = useMemo141(() => {
     return {
       setInAndOutFrames
     };
   }, []);
-  useEffect80(() => {
+  useEffect81(() => {
     persistMarks(inAndOutFrames);
   }, [inAndOutFrames]);
-  return /* @__PURE__ */ jsx272(TimelineInOutContext.Provider, {
+  return /* @__PURE__ */ jsx275(TimelineInOutContext.Provider, {
     value: inAndOutFrames,
-    children: /* @__PURE__ */ jsx272(SetTimelineInOutContext.Provider, {
+    children: /* @__PURE__ */ jsx275(SetTimelineInOutContext.Provider, {
       value: setTimelineInOutContextValue,
       children
     })
@@ -44261,23 +44655,23 @@ var SetTimelineInOutProvider = ({ children }) => {
 };
 
 // src/components/ShowGuidesProvider.tsx
-import { useCallback as useCallback137, useMemo as useMemo141, useRef as useRef43, useState as useState90 } from "react";
-import { jsx as jsx273 } from "react/jsx-runtime";
+import { useCallback as useCallback138, useMemo as useMemo142, useRef as useRef44, useState as useState90 } from "react";
+import { jsx as jsx276 } from "react/jsx-runtime";
 var ShowGuidesProvider = ({ children }) => {
   const [guidesList, setGuidesList] = useState90(() => loadGuidesList());
   const [selectedGuideId, setSelectedGuideId] = useState90(null);
   const [hoveredGuideId, setHoveredGuideId] = useState90(null);
   const [editorShowGuides, setEditorShowGuidesState] = useState90(() => loadEditorShowGuidesOption());
-  const shouldCreateGuideRef = useRef43(false);
-  const shouldDeleteGuideRef = useRef43(false);
-  const setEditorShowGuides = useCallback137((newValue) => {
+  const shouldCreateGuideRef = useRef44(false);
+  const shouldDeleteGuideRef = useRef44(false);
+  const setEditorShowGuides = useCallback138((newValue) => {
     setEditorShowGuidesState((prevState) => {
       const newVal = newValue(prevState);
       persistEditorShowGuidesOption(newVal);
       return newVal;
     });
   }, []);
-  const editorShowGuidesCtx = useMemo141(() => {
+  const editorShowGuidesCtx = useMemo142(() => {
     return {
       editorShowGuides,
       setEditorShowGuides,
@@ -44297,82 +44691,82 @@ var ShowGuidesProvider = ({ children }) => {
     selectedGuideId,
     hoveredGuideId
   ]);
-  return /* @__PURE__ */ jsx273(EditorShowGuidesContext.Provider, {
+  return /* @__PURE__ */ jsx276(EditorShowGuidesContext.Provider, {
     value: editorShowGuidesCtx,
     children
   });
 };
 
 // src/components/ShowRulersProvider.tsx
-import { useCallback as useCallback138, useMemo as useMemo142, useState as useState91 } from "react";
-import { jsx as jsx274 } from "react/jsx-runtime";
+import { useCallback as useCallback139, useMemo as useMemo143, useState as useState91 } from "react";
+import { jsx as jsx277 } from "react/jsx-runtime";
 var ShowRulersProvider = ({ children }) => {
   const [editorShowRulers, setEditorShowRulersState] = useState91(() => loadEditorShowRulersOption());
-  const setEditorShowRulers = useCallback138((newValue) => {
+  const setEditorShowRulers = useCallback139((newValue) => {
     setEditorShowRulersState((prevState) => {
       const newVal = newValue(prevState);
       persistEditorShowRulersOption(newVal);
       return newVal;
     });
   }, []);
-  const editorShowRulersCtx = useMemo142(() => {
+  const editorShowRulersCtx = useMemo143(() => {
     return {
       editorShowRulers,
       setEditorShowRulers
     };
   }, [editorShowRulers, setEditorShowRulers]);
-  return /* @__PURE__ */ jsx274(EditorShowRulersContext.Provider, {
+  return /* @__PURE__ */ jsx277(EditorShowRulersContext.Provider, {
     value: editorShowRulersCtx,
     children
   });
 };
 
 // src/components/ZoomGesturesProvider.tsx
-import { useCallback as useCallback139, useMemo as useMemo143, useState as useState92 } from "react";
-import { jsx as jsx275 } from "react/jsx-runtime";
+import { useCallback as useCallback140, useMemo as useMemo144, useState as useState92 } from "react";
+import { jsx as jsx278 } from "react/jsx-runtime";
 var ZoomGesturesProvider = ({ children }) => {
   const [editorZoomGestures, setEditorZoomGesturesState] = useState92(() => loadEditorZoomGesturesOption());
-  const setEditorZoomGestures = useCallback139((newValue) => {
+  const setEditorZoomGestures = useCallback140((newValue) => {
     setEditorZoomGesturesState((prevState) => {
       const newVal = newValue(prevState);
       persistEditorZoomGesturesOption(newVal);
       return newVal;
     });
   }, []);
-  const editorZoomGesturesCtx = useMemo143(() => {
+  const editorZoomGesturesCtx = useMemo144(() => {
     return {
       editorZoomGestures,
       setEditorZoomGestures
     };
   }, [editorZoomGestures, setEditorZoomGestures]);
-  return /* @__PURE__ */ jsx275(EditorZoomGesturesContext.Provider, {
+  return /* @__PURE__ */ jsx278(EditorZoomGesturesContext.Provider, {
     value: editorZoomGesturesCtx,
     children
   });
 };
 
 // src/components/EditorContexts.tsx
-import { jsx as jsx276 } from "react/jsx-runtime";
+import { jsx as jsx279 } from "react/jsx-runtime";
 var EditorContexts = ({ children, readOnlyStudio }) => {
-  return /* @__PURE__ */ jsx276(ZodProvider, {
-    children: /* @__PURE__ */ jsx276(VisualControlsProvider, {
-      children: /* @__PURE__ */ jsx276(PreviewServerConnection, {
+  return /* @__PURE__ */ jsx279(ZodProvider, {
+    children: /* @__PURE__ */ jsx279(VisualControlsProvider, {
+      children: /* @__PURE__ */ jsx279(PreviewServerConnection, {
         readOnlyStudio,
-        children: /* @__PURE__ */ jsx276(RenderQueueContextProvider, {
-          children: /* @__PURE__ */ jsx276(KeybindingContextProvider, {
-            children: /* @__PURE__ */ jsx276(CheckerboardProvider, {
-              children: /* @__PURE__ */ jsx276(ZoomGesturesProvider, {
-                children: /* @__PURE__ */ jsx276(ShowRulersProvider, {
-                  children: /* @__PURE__ */ jsx276(ShowGuidesProvider, {
-                    children: /* @__PURE__ */ jsx276(PreviewSizeProvider, {
-                      children: /* @__PURE__ */ jsx276(ModalsProvider, {
-                        children: /* @__PURE__ */ jsx276(MediaVolumeProvider, {
-                          children: /* @__PURE__ */ jsx276(PlayerInternals20.PlayerEmitterProvider, {
+        children: /* @__PURE__ */ jsx279(RenderQueueContextProvider, {
+          children: /* @__PURE__ */ jsx279(KeybindingContextProvider, {
+            children: /* @__PURE__ */ jsx279(CheckerboardProvider, {
+              children: /* @__PURE__ */ jsx279(ZoomGesturesProvider, {
+                children: /* @__PURE__ */ jsx279(ShowRulersProvider, {
+                  children: /* @__PURE__ */ jsx279(ShowGuidesProvider, {
+                    children: /* @__PURE__ */ jsx279(PreviewSizeProvider, {
+                      children: /* @__PURE__ */ jsx279(ModalsProvider, {
+                        children: /* @__PURE__ */ jsx279(MediaVolumeProvider, {
+                          children: /* @__PURE__ */ jsx279(PlayerInternals20.PlayerEmitterProvider, {
                             currentPlaybackRate: null,
-                            children: /* @__PURE__ */ jsx276(SidebarContextProvider, {
-                              children: /* @__PURE__ */ jsx276(FolderContextProvider, {
-                                children: /* @__PURE__ */ jsx276(HighestZIndexProvider, {
-                                  children: /* @__PURE__ */ jsx276(SetTimelineInOutProvider, {
+                            children: /* @__PURE__ */ jsx279(SidebarContextProvider, {
+                              children: /* @__PURE__ */ jsx279(FolderContextProvider, {
+                                children: /* @__PURE__ */ jsx279(HighestZIndexProvider, {
+                                  children: /* @__PURE__ */ jsx279(SetTimelineInOutProvider, {
                                     children
                                   })
                                 })
@@ -44395,7 +44789,7 @@ var EditorContexts = ({ children, readOnlyStudio }) => {
 
 // src/components/Notifications/ServerDisconnected.tsx
 import { useContext as useContext85 } from "react";
-import { jsx as jsx277, jsxs as jsxs144 } from "react/jsx-runtime";
+import { jsx as jsx280, jsxs as jsxs146 } from "react/jsx-runtime";
 var container63 = {
   position: "fixed",
   justifyContent: "flex-end",
@@ -44440,26 +44834,26 @@ var ServerDisconnected = () => {
   }
   const base64Favicon = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAARiSURBVHgB7d1NThRBFAfw/2tGgru5gXMD8QZ4AmVjAi6kN0TiAm8gnkBcGARNumcx4E48Ae0JaE9gewLHlQSZelaNgyHGL/RVd1X3+y10RQL58+rVx1QBKKWUUkoppZRSSimllFJKKVUjQs32stEiJcktZiwxzKL9Fvqzb6S0/44JVBKbtwa9aj29U6JjagtkJzsYzBEyBi9d5utsQIULCcxvelgo03R5jBarJZCXw/17E+bt82r4Hy4gtuEQekUbK8h7IHvDV5vMZht+VAlRfmYw3EhXKrSA10Ce2X7RIzpGDVzlgM1wPb2bI2JeA9nN99/b/waoV+XCmTAex1g13gLZyUZrdjjJ0CAbTB5bMN4C2ctHxwxaRABiCsZLIG6KmxC/R2BiCCaBBwn4NgJk10B2GOWj3Wz/IQLlpUL28oOjyy4AG1AZppuhVYt4hWRZ1o8gDGc6rL4YHjxCQMQDOcNCEI38bxnmLTc9d30PARAPZAITZP/4A1ctx3bjcw0NEw8koeQ64tRnu25qeggTb+q2/BmRcyv9K7yw3MTOsmiFuLMOtICblJzS5+Mm+opoIBOgFYHMuL5yVHcoooFQuwJxag9FNJCIG/rv1BqKaCDfzshbqbZQxAJxK3SJI9qATUPJstdef0axQGJbof+jwRc6eQ2PxAIx4DZXx3duSrybv3oCTyR7yACdYR762sIXDKQbFfId4ZGPJi8YCA3QLf05YvF+IhYIEV1Dx9hNu8XdbLQFQV6OcDuFaFNyKiwWiJ19DNBN/VN8XoMQrRABDFqCEJ32CiBisT08rRAZAwjRQAKjgcgQO+rVQARMb3gJ0UAkML+DEA1EwAQkdkNMcnOx1Zcxf8V9ol7y88GSm4tdDKRy1xsgSIes/0BM4ndN5HZ7OzZkMePperqSQ5jkkFWhO6r76WrYJ4b2N+YTumF60QeeSG6/d2DI4rHvW1eCPaT9Q9YZw/sVOMlZVoUWM8zpg/Su97dVJGdZFVrKhbFR05MdYoFcwWmF1rF9kbG8UeP7KaI3qBp628QTHrueUccwdZHw/ZDWNHY7tU1u1B2GIxqIYSO2Dd0Ud79wnq/eaOpBgR4EMVDW/oijINu87d7U6hYaJBrInA0k0iu4bvVtZ1KrBRrm4Vr06GNkF3cO7RCVhvK4pmiFOISkjOStk1lVrBQIiPh5SAyN3fWKWeMuEBjxCmEkh3bVvokAzd5idL2iQqDEA1nASXmK+XFIfeTCo5gFAudllvo8G20TUeNVElMQ58QrxLHD1jbB3GumSnhsz7qHE9BhTEGc87aOm16KJHi7rfqj8yfI53E1j/l9eK8L651stJUQeXx/iuzU1QztZLGIsRp+xvtOh3Qo3/qCedumEC6qZetpJztwz7O6UAa4FNsP7ELTfXbWbskUdjgq9M9VCJoFcwvTlfyPDd9t3XNJjA+2IZcGpmxi+7tpjW3OupurJziZhtKWPzWhlFJKKaWUUkoppZRSSiml/uwrgZ/Bfwo/wccAAAAASUVORK5CYII=";
   fav.setAttribute("href", base64Favicon);
-  return /* @__PURE__ */ jsx277("div", {
+  return /* @__PURE__ */ jsx280("div", {
     style: container63,
     className: "css-reset",
-    children: /* @__PURE__ */ jsxs144("div", {
+    children: /* @__PURE__ */ jsxs146("div", {
       style: message,
       children: [
         "The studio server has disconnected. ",
-        /* @__PURE__ */ jsx277("br", {}),
-        window.remotion_studioServerCommand ? /* @__PURE__ */ jsxs144("span", {
+        /* @__PURE__ */ jsx280("br", {}),
+        window.remotion_studioServerCommand ? /* @__PURE__ */ jsxs146("span", {
           children: [
             "Run",
             " ",
-            /* @__PURE__ */ jsx277("code", {
+            /* @__PURE__ */ jsx280("code", {
               style: inlineCode,
               children: window.remotion_studioServerCommand
             }),
             " ",
             "to run it again."
           ]
-        }) : /* @__PURE__ */ jsx277("span", {
+        }) : /* @__PURE__ */ jsx280("span", {
           children: "Fast refresh will not work."
         })
       ]
@@ -44556,7 +44950,6 @@ var makeDefaultGlobalCSS = () => {
       inset -1px -1px #555,
       inset 1px -1px #555,
       inset -1px 1px #555;
-    border-radius: 0 !important;
   }
   
   input[type='color'].__remotion_color_picker::-webkit-color-swatch-wrapper {
@@ -44625,7 +45018,7 @@ var injectCSS = () => {
 };
 
 // src/Studio.tsx
-import { jsx as jsx278, jsxs as jsxs145 } from "react/jsx-runtime";
+import { jsx as jsx281, jsxs as jsxs147 } from "react/jsx-runtime";
 var getServerDisconnectedDomElement = () => {
   return document.getElementById("server-disconnected-overlay");
 };
@@ -44633,27 +45026,27 @@ var Studio = ({ rootComponent, readOnly }) => {
   useLayoutEffect2(() => {
     injectCSS();
   }, []);
-  return /* @__PURE__ */ jsx278(Internals65.CompositionManagerProvider, {
+  return /* @__PURE__ */ jsx281(Internals65.CompositionManagerProvider, {
     onlyRenderComposition: null,
     currentCompositionMetadata: null,
     initialCompositions: [],
     initialCanvasContent: null,
-    children: /* @__PURE__ */ jsx278(Internals65.RemotionRootContexts, {
+    children: /* @__PURE__ */ jsx281(Internals65.RemotionRootContexts, {
       frameState: null,
       audioEnabled: window.remotion_audioEnabled,
       videoEnabled: window.remotion_videoEnabled,
       logLevel: window.remotion_logLevel,
       numberOfAudioTags: window.remotion_numberOfAudioTags,
       audioLatencyHint: window.remotion_audioLatencyHint ?? "interactive",
-      children: /* @__PURE__ */ jsx278(Internals65.ResolveCompositionConfigInStudio, {
-        children: /* @__PURE__ */ jsxs145(EditorContexts, {
+      children: /* @__PURE__ */ jsx281(Internals65.ResolveCompositionConfigInStudio, {
+        children: /* @__PURE__ */ jsxs147(EditorContexts, {
           readOnlyStudio: readOnly,
           children: [
-            /* @__PURE__ */ jsx278(Editor, {
+            /* @__PURE__ */ jsx281(Editor, {
               readOnlyStudio: readOnly,
               Root: rootComponent
             }),
-            readOnly ? null : createPortal(/* @__PURE__ */ jsx278(ServerDisconnected, {}), getServerDisconnectedDomElement())
+            readOnly ? null : createPortal(/* @__PURE__ */ jsx281(ServerDisconnected, {}), getServerDisconnectedDomElement())
           ]
         })
       })
@@ -44662,9 +45055,9 @@ var Studio = ({ rootComponent, readOnly }) => {
 };
 
 // src/components/NoRegisterRoot.tsx
-import { useEffect as useEffect81, useState as useState93 } from "react";
+import { useEffect as useEffect82, useState as useState93 } from "react";
 import { AbsoluteFill as AbsoluteFill6 } from "remotion";
-import { jsx as jsx279, jsxs as jsxs146 } from "react/jsx-runtime";
+import { jsx as jsx282, jsxs as jsxs148 } from "react/jsx-runtime";
 var label11 = {
   fontSize: 13,
   color: "white",
@@ -44677,14 +45070,14 @@ var container64 = {
   textAlign: "center",
   lineHeight: 1.5
 };
-var link4 = {
+var link5 = {
   color: "white",
   textDecoration: "none",
   borderBottom: "1px solid"
 };
 var NoRegisterRoot = () => {
   const [show, setShow] = useState93(() => false);
-  useEffect81(() => {
+  useEffect82(() => {
     const timeout = setTimeout(() => {
       setShow(true);
     }, 2000);
@@ -44695,21 +45088,21 @@ var NoRegisterRoot = () => {
   if (!show) {
     return null;
   }
-  return /* @__PURE__ */ jsxs146(AbsoluteFill6, {
+  return /* @__PURE__ */ jsxs148(AbsoluteFill6, {
     style: container64,
     children: [
-      /* @__PURE__ */ jsx279("div", {
+      /* @__PURE__ */ jsx282("div", {
         style: label11,
         children: "Waiting for registerRoot() to get called."
       }),
-      /* @__PURE__ */ jsxs146("div", {
+      /* @__PURE__ */ jsxs148("div", {
         style: label11,
         children: [
           "Learn more:",
           " ",
-          /* @__PURE__ */ jsx279("a", {
+          /* @__PURE__ */ jsx282("a", {
             target: "_blank",
-            style: link4,
+            style: link5,
             href: "https://www.remotion.dev/docs/register-root",
             children: "remotion.dev/docs/register-root"
           })
@@ -44721,12 +45114,12 @@ var NoRegisterRoot = () => {
 
 // src/error-overlay/remotion-overlay/index.tsx
 import ReactDOM9 from "react-dom/client";
-import { jsx as jsx280 } from "react/jsx-runtime";
+import { jsx as jsx283 } from "react/jsx-runtime";
 var mountRemotionOverlay = () => {
   if (ReactDOM9.createRoot) {
-    ReactDOM9.createRoot(document.getElementById("remotion-error-overlay")).render(/* @__PURE__ */ jsx280(Overlay, {}));
+    ReactDOM9.createRoot(document.getElementById("remotion-error-overlay")).render(/* @__PURE__ */ jsx283(Overlay, {}));
   } else {
-    ReactDOM9.render(/* @__PURE__ */ jsx280(Overlay, {}), document.getElementById("remotion-error-overlay"));
+    ReactDOM9.render(/* @__PURE__ */ jsx283(Overlay, {}), document.getElementById("remotion-error-overlay"));
   }
 };
 
@@ -45031,7 +45424,7 @@ var enableHotMiddleware = () => {
 };
 
 // src/previewEntry.tsx
-import { jsx as jsx281 } from "react/jsx-runtime";
+import { jsx as jsx284 } from "react/jsx-runtime";
 Internals66.CSSUtils.injectCSS(Internals66.CSSUtils.makeDefaultPreviewCSS(null, "#1f2428"));
 var root = null;
 var getRootForElement = () => {
@@ -45051,10 +45444,10 @@ var renderToDOM = (content7) => {
   }
   getRootForElement().render(content7);
 };
-renderToDOM(/* @__PURE__ */ jsx281(NoRegisterRoot, {}));
+renderToDOM(/* @__PURE__ */ jsx284(NoRegisterRoot, {}));
 Internals66.waitForRoot((NewRoot) => {
   Internals66.enableSequenceStackTraces();
-  renderToDOM(/* @__PURE__ */ jsx281(Studio, {
+  renderToDOM(/* @__PURE__ */ jsx284(Studio, {
     readOnly: false,
     rootComponent: NewRoot
   }));