@remotion/promo-pages 4.0.465 → 4.0.467

package/dist/design.js

@@ -1,26 +1,15 @@
-var __create = Object.create;
-var __getProtoOf = Object.getPrototypeOf;
 var __defProp = Object.defineProperty;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __toESM = (mod, isNodeMode, target) => {
-  target = mod != null ? __create(__getProtoOf(mod)) : {};
-  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
-  for (let key of __getOwnPropNames(mod))
-    if (!__hasOwnProp.call(to, key))
-      __defProp(to, key, {
-        get: () => mod[key],
-        enumerable: true
-      });
-  return to;
-};
+var __returnValue = (v) => v;
+function __exportSetter(name, newValue) {
+  this[name] = __returnValue.bind(null, newValue);
+}
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, {
       get: all[name],
       enumerable: true,
       configurable: true,
-      set: (newValue) => all[name] = () => newValue
+      set: __exportSetter.bind(all, name)
     });
 };
 var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
@@ -35,8 +24,8 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
 // ../design/dist/esm/index.mjs
 import * as React24 from "react";
 import * as React3 from "react";
-import { Fragment as Fragment2, jsx as jsx38 } from "react/jsx-runtime";
-import React52, { useCallback as useCallback24, useRef as useRef25, useState as useState22 } from "react";
+import { Fragment as Fragment2, jsx as jsx39 } from "react/jsx-runtime";
+import React52, { useCallback as useCallback25, useRef as useRef25, useState as useState22 } from "react";
 
 // ../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
 function r(e) {
@@ -1378,7 +1367,7 @@ var getDefaultConfig = () => {
 var twMerge = /* @__PURE__ */ createTailwindMerge(getDefaultConfig);
 
 // ../design/dist/esm/index.mjs
-import React33, { useEffect as useEffect20, useMemo as useMemo39, useState as useState20 } from "react";
+import React33, { useEffect as useEffect21, useMemo as useMemo40, useState as useState21 } from "react";
 
 // ../paths/dist/esm/index.mjs
 var cutLInstruction = ({
@@ -5883,84 +5872,97 @@ import {
 } from "react";
 import { jsx as jsx23 } from "react/jsx-runtime";
 import { jsx as jsx24 } from "react/jsx-runtime";
-import { forwardRef as forwardRef10, useCallback as useCallback16, useState as useState16 } from "react";
-import { jsx as jsx25 } from "react/jsx-runtime";
 import {
+  forwardRef as forwardRef10,
   useCallback as useCallback17,
+  useContext as useContext33,
+  useEffect as useEffect16,
+  useMemo as useMemo31,
+  useState as useState16
+} from "react";
+import {
+  useCallback as useCallback16,
   useContext as useContext32,
   useImperativeHandle as useImperativeHandle6,
   useLayoutEffect as useLayoutEffect10,
   useRef as useRef21
 } from "react";
+import { jsx as jsx25 } from "react/jsx-runtime";
 import { jsx as jsx26 } from "react/jsx-runtime";
+import { forwardRef as forwardRef11, useCallback as useCallback18, useState as useState17 } from "react";
+import { jsx as jsx27 } from "react/jsx-runtime";
 import { createRef as createRef3 } from "react";
 import React28 from "react";
 import {
-  useCallback as useCallback18,
+  useCallback as useCallback19,
   useImperativeHandle as useImperativeHandle7,
-  useMemo as useMemo31,
+  useMemo as useMemo322,
   useRef as useRef22,
-  useState as useState17
+  useState as useState18
 } from "react";
-import { jsx as jsx27 } from "react/jsx-runtime";
-import React29 from "react";
-import { useMemo as useMemo33 } from "react";
-import { createContext as createContext23, useContext as useContext33, useMemo as useMemo322 } from "react";
 import { jsx as jsx28 } from "react/jsx-runtime";
+import React29 from "react";
+import { useMemo as useMemo34 } from "react";
+import { createContext as createContext23, useContext as useContext34, useMemo as useMemo33 } from "react";
 import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 import React31 from "react";
 import React32, { createContext as createContext24 } from "react";
-import { useCallback as useCallback21 } from "react";
+import { useCallback as useCallback22 } from "react";
 import {
-  useCallback as useCallback19,
-  useContext as useContext34,
-  useEffect as useEffect16,
+  useCallback as useCallback20,
+  useContext as useContext35,
+  useEffect as useEffect17,
   useLayoutEffect as useLayoutEffect11,
-  useMemo as useMemo34,
-  useState as useState18
+  useMemo as useMemo35,
+  useState as useState19
 } from "react";
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 import React34, {
-  forwardRef as forwardRef11,
-  useContext as useContext35,
-  useEffect as useEffect18,
+  forwardRef as forwardRef12,
+  useContext as useContext36,
+  useEffect as useEffect19,
   useImperativeHandle as useImperativeHandle8,
-  useMemo as useMemo35,
+  useMemo as useMemo36,
   useRef as useRef23,
-  useState as useState19,
-  useCallback as useCallback20
+  useState as useState20,
+  useCallback as useCallback21
 } from "react";
-import { useEffect as useEffect17 } from "react";
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { useEffect as useEffect18 } from "react";
 import { jsx as jsx322 } from "react/jsx-runtime";
-import React36, { useMemo as useMemo36 } from "react";
 import { jsx as jsx33 } from "react/jsx-runtime";
-import { Children, forwardRef as forwardRef12, useMemo as useMemo37 } from "react";
+import React36, { useMemo as useMemo37 } from "react";
+import { jsx as jsx34 } from "react/jsx-runtime";
+import { Children, forwardRef as forwardRef13, useMemo as useMemo38 } from "react";
 import React37 from "react";
 import React38, { createContext as createContext25 } from "react";
-import { jsx as jsx34 } from "react/jsx-runtime";
 import { jsx as jsx35 } from "react/jsx-runtime";
+import { jsx as jsx36 } from "react/jsx-runtime";
 import React40 from "react";
-import { forwardRef as forwardRef14, useCallback as useCallback22, useContext as useContext37 } from "react";
+import { forwardRef as forwardRef15, useCallback as useCallback23, useContext as useContext38 } from "react";
 import {
-  forwardRef as forwardRef13,
-  useContext as useContext36,
-  useEffect as useEffect19,
+  forwardRef as forwardRef14,
+  useContext as useContext37,
+  useEffect as useEffect20,
   useImperativeHandle as useImperativeHandle9,
   useLayoutEffect as useLayoutEffect12,
-  useMemo as useMemo38,
+  useMemo as useMemo39,
   useRef as useRef24
 } from "react";
-import { jsx as jsx36 } from "react/jsx-runtime";
 import { jsx as jsx37 } from "react/jsx-runtime";
+import { jsx as jsx38 } from "react/jsx-runtime";
 var __defProp2 = Object.defineProperty;
+var __returnValue2 = (v) => v;
+function __exportSetter2(name, newValue) {
+  this[name] = __returnValue2.bind(null, newValue);
+}
 var __export2 = (target, all) => {
   for (var name in all)
     __defProp2(target, name, {
       get: all[name],
       enumerable: true,
       configurable: true,
-      set: (newValue) => all[name] = () => newValue
+      set: __exportSetter2.bind(all, name)
     });
 };
 if (typeof createContext !== "function") {
@@ -7075,7 +7077,7 @@ var getComponentsToAddStacksTo = () => componentsToAddStacksTo;
 var addSequenceStackTraces = (component) => {
   componentsToAddStacksTo.push(component);
 };
-var VERSION = "4.0.465";
+var VERSION = "4.0.467";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -8123,6 +8125,7 @@ var RegularSequenceRefForwardingFunction = ({
   _remotionInternalEffects,
   _remotionInternalLoopDisplay: loopDisplay,
   _remotionInternalStack: stack,
+  _remotionInternalDocumentationLink: documentationLink,
   _remotionInternalPremountDisplay: premountDisplay,
   _remotionInternalPostmountDisplay: postmountDisplay,
   _remotionInternalIsMedia: isMedia,
@@ -8193,6 +8196,7 @@ var RegularSequenceRefForwardingFunction = ({
   const timelineClipName = useMemo14(() => {
     return name ?? "";
   }, [name]);
+  const resolvedDocumentationLink = documentationLink ?? (name === undefined ? "https://www.remotion.dev/docs/sequence" : null);
   const env = useRemotionEnvironment();
   const inheritedStack = other?.stack ?? null;
   const stackRef = useRef6(null);
@@ -8208,6 +8212,7 @@ var RegularSequenceRefForwardingFunction = ({
           controls: controls ?? null,
           effects: _remotionInternalEffects ?? [],
           displayName: timelineClipName,
+          documentationLink: resolvedDocumentationLink,
           duration: actualDurationInFrames,
           from,
           id,
@@ -8227,6 +8232,7 @@ var RegularSequenceRefForwardingFunction = ({
           controls: controls ?? null,
           effects: _remotionInternalEffects ?? [],
           displayName: timelineClipName,
+          documentationLink: resolvedDocumentationLink,
           doesVolumeChange: isMedia.data.doesVolumeChange,
           duration: actualDurationInFrames,
           from,
@@ -8254,6 +8260,7 @@ var RegularSequenceRefForwardingFunction = ({
       duration: actualDurationInFrames,
       id,
       displayName: timelineClipName,
+      documentationLink: resolvedDocumentationLink,
       parent: parentSequence?.id ?? null,
       type: "sequence",
       rootId,
@@ -8288,7 +8295,8 @@ var RegularSequenceRefForwardingFunction = ({
     env.isStudio,
     controls,
     _remotionInternalEffects,
-    isMedia
+    isMedia,
+    resolvedDocumentationLink
   ]);
   const endThreshold = Math.ceil(cumulatedFrom + from + durationInFrames - 1);
   const content = absoluteFrame < cumulatedFrom + from ? null : absoluteFrame > endThreshold ? null : children;
@@ -8391,6 +8399,54 @@ var SequenceRefForwardingFunction = (props, ref) => {
 };
 var SequenceInner = forwardRef3(SequenceRefForwardingFunction);
 var Sequence = wrapInSchema(SequenceInner, sequenceSchema);
+var calculateImageFit = (fit, imageSize, canvasSize) => {
+  switch (fit) {
+    case "fill": {
+      return [
+        0,
+        0,
+        imageSize.width,
+        imageSize.height,
+        0,
+        0,
+        canvasSize.width,
+        canvasSize.height
+      ];
+    }
+    case "contain": {
+      const ratio = Math.min(canvasSize.width / imageSize.width, canvasSize.height / imageSize.height);
+      const centerX = (canvasSize.width - imageSize.width * ratio) / 2;
+      const centerY = (canvasSize.height - imageSize.height * ratio) / 2;
+      return [
+        0,
+        0,
+        imageSize.width,
+        imageSize.height,
+        centerX,
+        centerY,
+        imageSize.width * ratio,
+        imageSize.height * ratio
+      ];
+    }
+    case "cover": {
+      const ratio = Math.max(canvasSize.width / imageSize.width, canvasSize.height / imageSize.height);
+      const centerX = (canvasSize.width - imageSize.width * ratio) / 2;
+      const centerY = (canvasSize.height - imageSize.height * ratio) / 2;
+      return [
+        0,
+        0,
+        imageSize.width,
+        imageSize.height,
+        centerX,
+        centerY,
+        imageSize.width * ratio,
+        imageSize.height * ratio
+      ];
+    }
+    default:
+      throw new Error("Unknown fit: " + fit);
+  }
+};
 var WEBGL_CONTEXT_DOCS_URL = "https://remotion.dev/docs/troubleshooting/webgl2-context";
 var webGlContextErrorMessage = (versionLabel, effectName) => `Failed to acquire ${versionLabel} context for ${effectName}. ` + 'Pass --gl=angle when using the CLI, set chromiumOptions: { gl: "angle" } when using SSR APIs, ' + 'or set "OpenGL render backend" to "angle" in the Advanced section when rendering in the Studio. ' + `See ${WEBGL_CONTEXT_DOCS_URL}`;
 var createWebGLContextError = (effectName) => new Error(webGlContextErrorMessage("WebGL", effectName));
@@ -8643,54 +8699,6 @@ var useEffectChainState = () => {
     }
   }), []);
 };
-var calcArgs = (fit, frameSize, canvasSize) => {
-  switch (fit) {
-    case "fill": {
-      return [
-        0,
-        0,
-        frameSize.width,
-        frameSize.height,
-        0,
-        0,
-        canvasSize.width,
-        canvasSize.height
-      ];
-    }
-    case "contain": {
-      const ratio = Math.min(canvasSize.width / frameSize.width, canvasSize.height / frameSize.height);
-      const centerX = (canvasSize.width - frameSize.width * ratio) / 2;
-      const centerY = (canvasSize.height - frameSize.height * ratio) / 2;
-      return [
-        0,
-        0,
-        frameSize.width,
-        frameSize.height,
-        centerX,
-        centerY,
-        frameSize.width * ratio,
-        frameSize.height * ratio
-      ];
-    }
-    case "cover": {
-      const ratio = Math.max(canvasSize.width / frameSize.width, canvasSize.height / frameSize.height);
-      const centerX = (canvasSize.width - frameSize.width * ratio) / 2;
-      const centerY = (canvasSize.height - frameSize.height * ratio) / 2;
-      return [
-        0,
-        0,
-        frameSize.width,
-        frameSize.height,
-        centerX,
-        centerY,
-        frameSize.width * ratio,
-        frameSize.height * ratio
-      ];
-    }
-    default:
-      throw new Error("Unknown fit: " + fit);
-  }
-};
 var CanvasRefForwardingFunction = ({ width, height, fit, className, style, effects }, ref) => {
   const canvasRef = useRef8(null);
   const chainState = useEffectChainState();
@@ -8700,7 +8708,7 @@ var CanvasRefForwardingFunction = ({ width, height, fit, className, style, effec
     }
     return document.createElement("canvas");
   }, []);
-  const draw = useCallback6(async (imageData) => {
+  const draw = useCallback6((imageData) => {
     const canvas = canvasRef.current;
     const canvasWidth = width ?? imageData.displayWidth;
     const canvasHeight = height ?? imageData.displayHeight;
@@ -8716,7 +8724,7 @@ var CanvasRefForwardingFunction = ({ width, height, fit, className, style, effec
     if (!sourceCtx) {
       throw new Error("Could not get 2d context for source canvas");
     }
-    sourceCtx.drawImage(imageData, ...calcArgs(fit, {
+    sourceCtx.drawImage(imageData, ...calculateImageFit(fit, {
       height: imageData.displayHeight,
       width: imageData.displayWidth
     }, {
@@ -9076,6 +9084,7 @@ var AnimatedImageInner = ({
     layout: "none",
     durationInFrames: resolvedDuration,
     name: "<AnimatedImage>",
+    _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/animatedimage",
     _experimentalControls: controls,
     _remotionInternalEffects: memoizedEffectDefinitions,
     ...sequenceProps,
@@ -9229,6 +9238,7 @@ var SolidOuter = forwardRef5(({
     _remotionInternalEffects: memoizedEffectDefinitions,
     durationInFrames,
     name: name ?? "<Solid>",
+    _remotionInternalDocumentationLink: name === undefined ? "https://www.remotion.dev/docs/solid" : undefined,
     ...props,
     children: /* @__PURE__ */ jsx14(SolidInner, {
       ref,
@@ -9469,6 +9479,7 @@ var HtmlInCanvasInner = forwardRef6(({
   return /* @__PURE__ */ jsx15(Sequence, {
     durationInFrames: resolvedDuration,
     name: name ?? "<HtmlInCanvas>",
+    _remotionInternalDocumentationLink: name === undefined ? "https://www.remotion.dev/docs/remotion/html-in-canvas" : undefined,
     _experimentalControls: controls,
     _remotionInternalEffects: memoizedEffectDefinitions,
     layout: "none",
@@ -9717,6 +9728,7 @@ var Loop = ({
       durationInFrames,
       from,
       name: name ?? "<Loop>",
+      _remotionInternalDocumentationLink: name === undefined ? "https://www.remotion.dev/docs/loop" : undefined,
       _remotionInternalLoopDisplay: loopDisplay,
       layout: props.layout,
       style,
@@ -10220,9 +10232,43 @@ var useSingletonAudioContext = ({
     gainNode.connect(audioContext.destination);
     Log.trace({ logLevel, tag: "audio" }, "Creating new audio context");
     audioContext.suspend();
+    let transitionTarget = null;
+    const getState = () => {
+      const nativeState = audioContext.state;
+      if (transitionTarget === "running" && nativeState !== "running") {
+        return "suspended-to-running";
+      }
+      if (transitionTarget === "suspended" && nativeState !== "suspended") {
+        return "running-to-suspended";
+      }
+      return nativeState;
+    };
+    const resume = () => {
+      transitionTarget = "running";
+      const promise = audioContext.resume();
+      promise.finally(() => {
+        if (transitionTarget === "running") {
+          transitionTarget = null;
+        }
+      });
+      return promise;
+    };
+    const suspend = () => {
+      transitionTarget = "suspended";
+      const promise = audioContext.suspend();
+      promise.finally(() => {
+        if (transitionTarget === "suspended") {
+          transitionTarget = null;
+        }
+      });
+      return promise;
+    };
     return {
       audioContext,
-      gainNode
+      gainNode,
+      getState,
+      resume,
+      suspend
     };
   }, [logLevel, latencyHint, env.isRendering, audioEnabled]);
   return context;
@@ -10275,6 +10321,15 @@ var didPropChange = (key, newProp, prevProp) => {
 };
 var SharedAudioContext = createContext21(null);
 var SharedAudioTagsContext = createContext21(null);
+var shouldSaveForLater = (state) => {
+  if (state === "suspended" || state === "running-to-suspended" || state === "interrupted") {
+    return true;
+  }
+  if (state === "running" || state === "suspended-to-running") {
+    return false;
+  }
+  throw new Error(`Unexpected audio context state: ${state}`);
+};
 var SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled }) => {
   const logLevel = useLogLevel();
   const ctxAndGain = useSingletonAudioContext({
@@ -10310,7 +10365,6 @@ var SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled })
     return ({
       node,
       mediaTimestamp,
-      currentTime,
       scheduledTime,
       duration,
       offset,
@@ -10319,7 +10373,14 @@ var SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled })
       if (!ctxAndGain) {
         throw new Error("Audio context not found");
       }
-      const saveForLater = ctxAndGain.audioContext.state === "suspended" && !isResuming.current;
+      const currentState = ctxAndGain.getState();
+      if (currentState === "closed") {
+        return {
+          type: "not-started",
+          reason: "audio context is closed"
+        };
+      }
+      const saveForLater = shouldSaveForLater(currentState);
       if (duration > 0) {
         if (saveForLater) {
           nodesToResume.current.set(node, {
@@ -10339,7 +10400,7 @@ var SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled })
       const prev = prevEndTimes.current;
       const scheduledMismatch = prev.scheduledEndTime !== null && Math.abs(scheduledTime - prev.scheduledEndTime) > 0.001;
       const mediaMismatch = prev.mediaEndTime !== null && Math.abs(mediaTime - prev.mediaEndTime) > 0.001;
-      Log.verbose({ logLevel, tag: "audio-scheduling" }, "scheduled %c%s%c %s %c%s%c %s %c%s%c %s %s %s %s %s", scheduledMismatch ? "color: red; font-weight: bold" : "", scheduledTime.toFixed(4), "", scheduledEndTime.toFixed(4), mediaMismatch ? "color: red; font-weight: bold" : "", mediaTime.toFixed(4), "", mediaEndTime.toFixed(4), duration < 0 ? "color: red; font-weight: bold" : timeDiff < 0 ? "color: red; font-weight: bold" : "color: blue; font-weight: bold", duration < 0 ? "missed " + Math.abs(offset).toFixed(2) + "s" : Math.abs(timeDiff).toFixed(2) + (timeDiff < 0 ? " delay" : " ahead"), "", "current=" + currentTime.toFixed(4), "actualcurrent=" + ctxAndGain.audioContext.currentTime.toFixed(4), "offset=" + offset.toFixed(4), "latency=" + latency.toFixed(4), "state=" + ctxAndGain.audioContext.state, originalUnloopedMediaTimestamp !== mediaTime ? "original_ts=" + originalUnloopedMediaTimestamp.toFixed(4) : "", "action=" + (saveForLater ? "schedule" : "start"), "");
+      Log.verbose({ logLevel, tag: "audio-scheduling" }, "scheduled %c%s%c %s %c%s%c %s %c%s%c %s %s %s %s %s", scheduledMismatch ? "color: red; font-weight: bold" : "", scheduledTime.toFixed(4), "", scheduledEndTime.toFixed(4), mediaMismatch ? "color: red; font-weight: bold" : "", mediaTime.toFixed(4), "", mediaEndTime.toFixed(4), duration < 0 ? "color: red; font-weight: bold" : timeDiff < 0 ? "color: red; font-weight: bold" : "color: blue; font-weight: bold", duration < 0 ? "missed " + Math.abs(offset).toFixed(2) + "s" : Math.abs(timeDiff).toFixed(2) + (timeDiff < 0 ? " delay" : " ahead"), "", "current=" + ctxAndGain.audioContext.currentTime.toFixed(4), "offset=" + offset.toFixed(4), "latency=" + latency.toFixed(4), "state=" + ctxAndGain.audioContext.state, originalUnloopedMediaTimestamp !== mediaTime ? "original_ts=" + originalUnloopedMediaTimestamp.toFixed(4) : "", "action=" + (saveForLater ? "schedule" : "start"), "");
       prev.scheduledEndTime = scheduledEndTime;
       prev.mediaEndTime = mediaEndTime;
       return duration > 0 ? {
@@ -10366,7 +10427,7 @@ var SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled })
       node.start(r2.scheduledTime, r2.offset, r2.duration);
     });
     nodesToResume.current.clear();
-    const resumePromise = ctxAndGain.audioContext.resume();
+    const resumePromise = ctxAndGain.resume();
     isResuming.current = new Promise((resolve) => {
       waitUntilActuallyResumed(ctxAndGain.audioContext, logLevel).then(resolve);
       resumePromise.catch((err) => {
@@ -10383,17 +10444,18 @@ var SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled })
   }, []);
   const suspend = useCallback10(() => {
     if (!ctxAndGain) {
-      return;
+      return Promise.resolve();
     }
     if (!audioContextIsPlayingEventually.current) {
-      return;
+      return Promise.resolve();
     }
     audioContextIsPlayingEventually.current = false;
-    ctxAndGain.audioContext.suspend();
+    return ctxAndGain.suspend();
   }, [ctxAndGain]);
   const audioContextValue = useMemo23(() => {
     return {
       audioContext: ctxAndGain?.audioContext ?? null,
+      getAudioContextState: () => ctxAndGain?.getState() ?? null,
       gainNode: ctxAndGain?.gainNode ?? null,
       audioSyncAnchor,
       audioSyncAnchorEmitter,
@@ -10885,7 +10947,8 @@ var getTimelineDuration = ({
     trimAfter
   });
   if (parentSequenceDurationInFrames !== null) {
-    return Math.floor(Math.min(parentSequenceDurationInFrames * playbackRate, mediaDuration));
+    const cappedDuration = Math.min(parentSequenceDurationInFrames * playbackRate, mediaDuration);
+    return Number(cappedDuration.toFixed(10));
   }
   return mediaDuration;
 };
@@ -11004,7 +11067,8 @@ var useMediaInTimeline = ({
   showInTimeline,
   premountDisplay,
   postmountDisplay,
-  loopDisplay
+  loopDisplay,
+  documentationLink
 }) => {
   const parentSequence = useContext24(SequenceContext);
   const startsAt = useMediaStartsAt();
@@ -11043,6 +11107,7 @@ var useMediaInTimeline = ({
       from: 0,
       parent: parentSequence?.id ?? null,
       displayName: finalDisplayName,
+      documentationLink,
       rootId,
       volume: volumes,
       showInTimeline: true,
@@ -11078,6 +11143,7 @@ var useMediaInTimeline = ({
     premountDisplay,
     postmountDisplay,
     loopDisplay,
+    documentationLink,
     rootId,
     finalDisplayName,
     isStudio
@@ -12161,7 +12227,8 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     showInTimeline,
     premountDisplay: sequenceContext?.premountDisplay ?? null,
     postmountDisplay: sequenceContext?.postmountDisplay ?? null,
-    loopDisplay: undefined
+    loopDisplay: undefined,
+    documentationLink: name === undefined ? "https://www.remotion.dev/docs/html5-audio" : null
   });
   useMediaPlayback({
     mediaRef: audioRef,
@@ -12484,41 +12551,6 @@ var AudioRefForwardingFunction = (props, ref) => {
 var Html5Audio = forwardRef9(AudioRefForwardingFunction);
 addSequenceStackTraces(Html5Audio);
 var Audio = Html5Audio;
-var kSplineTableSize = 11;
-var kSampleStepSize = 1 / (kSplineTableSize - 1);
-var IFrameRefForwarding = ({
-  onLoad,
-  onError,
-  delayRenderRetries,
-  delayRenderTimeoutInMilliseconds,
-  ...props2
-}, ref) => {
-  const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
-  const [handle] = useState16(() => delayRender2(`Loading <IFrame> with source ${props2.src}`, {
-    retries: delayRenderRetries ?? undefined,
-    timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined
-  }));
-  const didLoad = useCallback16((e) => {
-    continueRender2(handle);
-    onLoad?.(e);
-  }, [handle, onLoad, continueRender2]);
-  const didGetError = useCallback16((e) => {
-    continueRender2(handle);
-    if (onError) {
-      onError(e);
-    } else {
-      console.error("Error loading iframe:", e, "Handle the event using the onError() prop to make this message disappear.");
-    }
-  }, [handle, onError, continueRender2]);
-  return /* @__PURE__ */ jsx25("iframe", {
-    referrerPolicy: "strict-origin-when-cross-origin",
-    ...props2,
-    ref,
-    onError: didGetError,
-    onLoad: didLoad
-  });
-};
-var IFrame = forwardRef10(IFrameRefForwarding);
 function exponentialBackoff(errorCount) {
   return 1000 * 2 ** (errorCount - 1);
 }
@@ -12537,6 +12569,7 @@ var ImgContent = ({
   delayRenderTimeoutInMilliseconds,
   onImageFrame,
   crossOrigin,
+  decoding,
   ref,
   ...props2
 }) => {
@@ -12552,7 +12585,7 @@ var ImgContent = ({
     return imageRef.current;
   }, []);
   const actualSrc = usePreload(src);
-  const retryIn = useCallback17((timeout) => {
+  const retryIn = useCallback16((timeout) => {
     if (!imageRef.current) {
       return;
     }
@@ -12570,7 +12603,7 @@ var ImgContent = ({
     }, timeout);
   }, []);
   const { delayRender: delayRender2, continueRender: continueRender2, cancelRender: cancelRender2 } = useDelayRender();
-  const didGetError = useCallback17((e) => {
+  const didGetError = useCallback16((e) => {
     if (!errors.current) {
       return;
     }
@@ -12658,18 +12691,18 @@ var ImgContent = ({
       delayRender2
     ]);
   }
-  const { isClientSideRendering } = useRemotionEnvironment();
+  const { isClientSideRendering, isRendering } = useRemotionEnvironment();
   const crossOriginValue = getCrossOriginValue({
     crossOrigin,
     requestsVideoFrame: false,
     isClientSideRendering
   });
-  return /* @__PURE__ */ jsx26("img", {
+  return /* @__PURE__ */ jsx25("img", {
     ...props2,
     ref: imageRef,
     crossOrigin: crossOriginValue,
     onError: didGetError,
-    decoding: "sync"
+    decoding: isRendering ? "sync" : decoding
   });
 };
 var ImgInner = ({
@@ -12686,17 +12719,18 @@ var ImgInner = ({
   if (!src) {
     throw new Error('No "src" prop was passed to <Img>.');
   }
-  return /* @__PURE__ */ jsx26(Sequence, {
+  return /* @__PURE__ */ jsx25(Sequence, {
     layout: "none",
     from: from ?? 0,
     durationInFrames: durationInFrames ?? Infinity,
     _remotionInternalStack: stack,
+    _remotionInternalDocumentationLink: name === undefined ? "https://www.remotion.dev/docs/img" : undefined,
     _remotionInternalIsMedia: { type: "image", src },
     name: name ?? "<Img>",
     _experimentalControls: controls,
     showInTimeline: showInTimeline ?? true,
     hidden,
-    children: /* @__PURE__ */ jsx26(ImgContent, {
+    children: /* @__PURE__ */ jsx25(ImgContent, {
       src,
       ...props2
     })
@@ -12708,6 +12742,331 @@ var imgSchema = {
 };
 var Img = wrapInSchema(ImgInner, imgSchema);
 addSequenceStackTraces(Img);
+var canvasImageSchema = {
+  fit: {
+    type: "enum",
+    default: "fill",
+    description: "Fit",
+    variants: {
+      fill: {},
+      contain: {},
+      cover: {}
+    }
+  },
+  ...sequenceVisualStyleSchema,
+  hidden: hiddenField
+};
+var makeAbortError = () => {
+  if (typeof DOMException !== "undefined") {
+    return new DOMException("Image loading was aborted", "AbortError");
+  }
+  const error2 = new Error("Image loading was aborted");
+  error2.name = "AbortError";
+  return error2;
+};
+var loadImage = ({
+  src,
+  signal
+}) => {
+  return new Promise((resolve, reject) => {
+    const image = new Image;
+    let settled = false;
+    function cleanup() {
+      image.onload = null;
+      image.onerror = null;
+    }
+    function settle(callback) {
+      if (settled) {
+        return;
+      }
+      settled = true;
+      cleanup();
+      callback();
+    }
+    function onAbort() {
+      settle(() => reject(makeAbortError()));
+    }
+    image.onload = () => {
+      Promise.resolve(image.decode?.()).catch(() => {
+        return;
+      }).then(() => {
+        const imageWidth = image.naturalWidth || image.width;
+        const imageHeight = image.naturalHeight || image.height;
+        if (imageWidth <= 0 || imageHeight <= 0) {
+          settle(() => reject(new Error(`Could not determine dimensions for <CanvasImage> with src="${truncateSrcForLabel(src)}"`)));
+          return;
+        }
+        settle(() => resolve({ element: image, width: imageWidth, height: imageHeight }));
+      });
+    };
+    image.onerror = () => {
+      settle(() => reject(new Error(`Could not load <CanvasImage> with src="${truncateSrcForLabel(src)}"`)));
+    };
+    signal.addEventListener("abort", onAbort, { once: true });
+    if (signal.aborted) {
+      onAbort();
+      return;
+    }
+    image.crossOrigin = "anonymous";
+    image.src = src;
+  });
+};
+function exponentialBackoff2(errorCount) {
+  return 1000 * 2 ** (errorCount - 1);
+}
+var CanvasImageContent = forwardRef10(({
+  src,
+  width,
+  height,
+  fit = "fill",
+  effects,
+  controls,
+  onError,
+  className,
+  style,
+  id,
+  pauseWhenLoading,
+  maxRetries = 2,
+  delayRenderRetries,
+  delayRenderTimeoutInMilliseconds
+}, ref) => {
+  const { delayRender: delayRender2, continueRender: continueRender2, cancelRender: cancelRender2 } = useDelayRender();
+  const { delayPlayback } = useBufferState();
+  const [outputCanvas, setOutputCanvas] = useState16(null);
+  const actualSrc = usePreload(src);
+  const chainState = useEffectChainState();
+  const memoizedEffects = useMemoizedEffects({
+    effects,
+    overrideId: controls?.overrideId ?? null
+  });
+  const sequenceContext = useContext33(SequenceContext);
+  const sourceCanvas = useMemo31(() => {
+    if (typeof document === "undefined") {
+      return null;
+    }
+    return document.createElement("canvas");
+  }, []);
+  const canvasRef = useCallback17((canvas) => {
+    setOutputCanvas(canvas);
+    if (typeof ref === "function") {
+      ref(canvas);
+    } else if (ref) {
+      ref.current = canvas;
+    }
+  }, [ref]);
+  useEffect16(() => {
+    if (!outputCanvas || !sourceCanvas) {
+      return;
+    }
+    const isPremounting = Boolean(sequenceContext?.premounting);
+    const isPostmounting = Boolean(sequenceContext?.postmounting);
+    const handle = delayRender2(`Rendering <CanvasImage> with src="${truncateSrcForLabel(actualSrc)}"`, {
+      retries: delayRenderRetries ?? undefined,
+      timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined
+    });
+    const unblock = pauseWhenLoading && !isPremounting && !isPostmounting ? delayPlayback().unblock : () => {
+      return;
+    };
+    const controller = new AbortController;
+    let cancelled = false;
+    let continued = false;
+    let errorCount = 0;
+    let timeoutId = null;
+    const continueRenderOnce = () => {
+      if (continued) {
+        return;
+      }
+      continued = true;
+      unblock();
+      continueRender2(handle);
+    };
+    const attemptLoad = () => {
+      loadImage({ src: actualSrc, signal: controller.signal }).then((image) => {
+        if (cancelled) {
+          return;
+        }
+        const canvasWidth = width ?? image.width;
+        const canvasHeight = height ?? image.height;
+        const sourceContext = sourceCanvas.getContext("2d", {
+          colorSpace: "srgb"
+        });
+        if (!sourceContext) {
+          throw new Error("Could not get 2D context for <CanvasImage> source canvas");
+        }
+        sourceCanvas.width = canvasWidth;
+        sourceCanvas.height = canvasHeight;
+        outputCanvas.width = canvasWidth;
+        outputCanvas.height = canvasHeight;
+        sourceContext.clearRect(0, 0, canvasWidth, canvasHeight);
+        sourceContext.drawImage(image.element, ...calculateImageFit(fit, { width: image.width, height: image.height }, { width: canvasWidth, height: canvasHeight }));
+        return runEffectChain({
+          state: chainState.get(canvasWidth, canvasHeight),
+          source: sourceCanvas,
+          effects: memoizedEffects,
+          output: outputCanvas,
+          width: canvasWidth,
+          height: canvasHeight
+        });
+      }).then((completed) => {
+        if (completed && !cancelled) {
+          continueRenderOnce();
+        }
+      }).catch((err) => {
+        if (err.name === "AbortError") {
+          continueRenderOnce();
+          return;
+        }
+        errorCount++;
+        if (errorCount <= maxRetries) {
+          const backoff = exponentialBackoff2(errorCount);
+          console.warn(`Could not load <CanvasImage> with src="${truncateSrcForLabel(actualSrc)}", retrying in ${backoff}ms`);
+          timeoutId = setTimeout(() => {
+            if (!cancelled) {
+              attemptLoad();
+            }
+          }, backoff);
+        } else if (onError) {
+          onError(err);
+          continueRenderOnce();
+        } else {
+          cancelRender2(err);
+        }
+      });
+    };
+    attemptLoad();
+    return () => {
+      cancelled = true;
+      if (timeoutId !== null) {
+        clearTimeout(timeoutId);
+      }
+      controller.abort();
+      continueRenderOnce();
+    };
+  }, [
+    actualSrc,
+    cancelRender2,
+    chainState,
+    continueRender2,
+    delayPlayback,
+    delayRender2,
+    delayRenderRetries,
+    delayRenderTimeoutInMilliseconds,
+    fit,
+    height,
+    maxRetries,
+    memoizedEffects,
+    onError,
+    outputCanvas,
+    pauseWhenLoading,
+    sequenceContext?.postmounting,
+    sequenceContext?.premounting,
+    sourceCanvas,
+    width
+  ]);
+  return /* @__PURE__ */ jsx26("canvas", {
+    ref: canvasRef,
+    width,
+    height,
+    className,
+    style,
+    id
+  });
+});
+CanvasImageContent.displayName = "CanvasImageContent";
+var CanvasImageInner = forwardRef10(({
+  src,
+  width,
+  height,
+  fit,
+  effects = [],
+  className,
+  style,
+  id,
+  onError,
+  pauseWhenLoading,
+  maxRetries,
+  delayRenderRetries,
+  delayRenderTimeoutInMilliseconds,
+  durationInFrames,
+  from,
+  hidden,
+  name,
+  showInTimeline,
+  stack,
+  _experimentalControls: controls
+}, ref) => {
+  if (!src) {
+    throw new Error('No "src" prop was passed to <CanvasImage>.');
+  }
+  const memoizedEffectDefinitions = useMemoizedEffectDefinitions(effects);
+  return /* @__PURE__ */ jsx26(Sequence, {
+    layout: "none",
+    from: from ?? 0,
+    durationInFrames: durationInFrames ?? Infinity,
+    hidden,
+    showInTimeline: showInTimeline ?? true,
+    name: name ?? "<CanvasImage>",
+    _experimentalControls: controls,
+    _remotionInternalEffects: memoizedEffectDefinitions,
+    _remotionInternalIsMedia: { type: "image", src },
+    _remotionInternalStack: stack,
+    children: /* @__PURE__ */ jsx26(CanvasImageContent, {
+      ref,
+      src,
+      width,
+      height,
+      fit,
+      effects,
+      controls,
+      className,
+      style,
+      id,
+      onError,
+      pauseWhenLoading,
+      maxRetries,
+      delayRenderRetries,
+      delayRenderTimeoutInMilliseconds
+    })
+  });
+});
+var CanvasImage = wrapInSchema(CanvasImageInner, canvasImageSchema);
+CanvasImage.displayName = "CanvasImage";
+addSequenceStackTraces(CanvasImage);
+var kSplineTableSize = 11;
+var kSampleStepSize = 1 / (kSplineTableSize - 1);
+var IFrameRefForwarding = ({
+  onLoad,
+  onError,
+  delayRenderRetries,
+  delayRenderTimeoutInMilliseconds,
+  ...props2
+}, ref) => {
+  const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
+  const [handle] = useState17(() => delayRender2(`Loading <IFrame> with source ${props2.src}`, {
+    retries: delayRenderRetries ?? undefined,
+    timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined
+  }));
+  const didLoad = useCallback18((e) => {
+    continueRender2(handle);
+    onLoad?.(e);
+  }, [handle, onLoad, continueRender2]);
+  const didGetError = useCallback18((e) => {
+    continueRender2(handle);
+    if (onError) {
+      onError(e);
+    } else {
+      console.error("Error loading iframe:", e, "Handle the event using the onError() prop to make this message disappear.");
+    }
+  }, [handle, onError, continueRender2]);
+  return /* @__PURE__ */ jsx27("iframe", {
+    referrerPolicy: "strict-origin-when-cross-origin",
+    ...props2,
+    ref,
+    onError: didGetError,
+    onLoad: didLoad
+  });
+};
+var IFrame = forwardRef11(IFrameRefForwarding);
 var compositionsRef = React28.createRef();
 var CompositionManagerProvider = ({
   children,
@@ -12716,18 +13075,18 @@ var CompositionManagerProvider = ({
   initialCompositions,
   initialCanvasContent
 }) => {
-  const [folders, setFolders] = useState17([]);
-  const [canvasContent, setCanvasContent] = useState17(initialCanvasContent);
-  const [compositions, setCompositions] = useState17(initialCompositions);
+  const [folders, setFolders] = useState18([]);
+  const [canvasContent, setCanvasContent] = useState18(initialCanvasContent);
+  const [compositions, setCompositions] = useState18(initialCompositions);
   const currentcompositionsRef = useRef22(compositions);
-  const updateCompositions = useCallback18((updateComps) => {
+  const updateCompositions = useCallback19((updateComps) => {
     setCompositions((comps) => {
       const updated = updateComps(comps);
       currentcompositionsRef.current = updated;
       return updated;
     });
   }, []);
-  const registerComposition = useCallback18((comp) => {
+  const registerComposition = useCallback19((comp) => {
     updateCompositions((comps) => {
       if (comps.find((c2) => c2.id === comp.id)) {
         throw new Error(`Multiple composition with id ${comp.id} are registered.`);
@@ -12735,12 +13094,12 @@ var CompositionManagerProvider = ({
       return [...comps, comp];
     });
   }, [updateCompositions]);
-  const unregisterComposition = useCallback18((id) => {
+  const unregisterComposition = useCallback19((id) => {
     setCompositions((comps) => {
       return comps.filter((c2) => c2.id !== id);
     });
   }, []);
-  const registerFolder = useCallback18((name, parent, nonce) => {
+  const registerFolder = useCallback19((name, parent, nonce) => {
     setFolders((prevFolders) => {
       return [
         ...prevFolders,
@@ -12752,7 +13111,7 @@ var CompositionManagerProvider = ({
       ];
     });
   }, []);
-  const unregisterFolder = useCallback18((name, parent) => {
+  const unregisterFolder = useCallback19((name, parent) => {
     setFolders((prevFolders) => {
       return prevFolders.filter((p) => !(p.name === name && p.parent === parent));
     });
@@ -12762,7 +13121,7 @@ var CompositionManagerProvider = ({
       getCompositions: () => currentcompositionsRef.current
     };
   }, []);
-  const compositionManagerSetters = useMemo31(() => {
+  const compositionManagerSetters = useMemo322(() => {
     return {
       registerComposition,
       unregisterComposition,
@@ -12778,7 +13137,7 @@ var CompositionManagerProvider = ({
     unregisterFolder,
     onlyRenderComposition
   ]);
-  const compositionManagerContextValue = useMemo31(() => {
+  const compositionManagerContextValue = useMemo322(() => {
     return {
       compositions,
       folders,
@@ -12786,9 +13145,9 @@ var CompositionManagerProvider = ({
       canvasContent
     };
   }, [compositions, folders, currentCompositionMetadata, canvasContent]);
-  return /* @__PURE__ */ jsx27(CompositionManager.Provider, {
+  return /* @__PURE__ */ jsx28(CompositionManager.Provider, {
     value: compositionManagerContextValue,
-    children: /* @__PURE__ */ jsx27(CompositionSetters.Provider, {
+    children: /* @__PURE__ */ jsx28(CompositionSetters.Provider, {
       value: compositionManagerSetters,
       children
     })
@@ -12861,6 +13220,7 @@ var createEffect = (definition) => {
   const { calculateKey: userCalculateKey, validateParams } = definition;
   const widened = {
     ...definition,
+    documentationLink: definition.documentationLink ?? null,
     calculateKey: (params) => {
       const disabled = params.disabled ?? false;
       return `${userCalculateKey(params)}-disabled-${disabled}`;
@@ -12905,7 +13265,7 @@ var waitForRoot = (fn) => {
 };
 var MediaEnabledContext = createContext23(null);
 var useVideoEnabled = () => {
-  const context = useContext33(MediaEnabledContext);
+  const context = useContext34(MediaEnabledContext);
   if (!context) {
     return window.remotion_videoEnabled;
   }
@@ -12915,7 +13275,7 @@ var useVideoEnabled = () => {
   return context.videoEnabled;
 };
 var useAudioEnabled = () => {
-  const context = useContext33(MediaEnabledContext);
+  const context = useContext34(MediaEnabledContext);
   if (!context) {
     return window.remotion_audioEnabled;
   }
@@ -12929,8 +13289,8 @@ var MediaEnabledProvider = ({
   videoEnabled,
   audioEnabled
 }) => {
-  const value = useMemo322(() => ({ videoEnabled, audioEnabled }), [videoEnabled, audioEnabled]);
-  return /* @__PURE__ */ jsx28(MediaEnabledContext.Provider, {
+  const value = useMemo33(() => ({ videoEnabled, audioEnabled }), [videoEnabled, audioEnabled]);
+  return /* @__PURE__ */ jsx29(MediaEnabledContext.Provider, {
     value,
     children
   });
@@ -12944,33 +13304,33 @@ var RemotionRootContexts = ({
   audioEnabled,
   frameState
 }) => {
-  const nonceContext = useMemo33(() => {
+  const nonceContext = useMemo34(() => {
     let counter = 0;
     return {
       getNonce: () => counter++
     };
   }, []);
-  const logging = useMemo33(() => {
+  const logging = useMemo34(() => {
     return { logLevel, mountTime: Date.now() };
   }, [logLevel]);
-  return /* @__PURE__ */ jsx29(LogLevelContext.Provider, {
+  return /* @__PURE__ */ jsx30(LogLevelContext.Provider, {
     value: logging,
-    children: /* @__PURE__ */ jsx29(NonceContext.Provider, {
+    children: /* @__PURE__ */ jsx30(NonceContext.Provider, {
       value: nonceContext,
-      children: /* @__PURE__ */ jsx29(TimelineContextProvider, {
+      children: /* @__PURE__ */ jsx30(TimelineContextProvider, {
         frameState,
-        children: /* @__PURE__ */ jsx29(MediaEnabledProvider, {
+        children: /* @__PURE__ */ jsx30(MediaEnabledProvider, {
           videoEnabled,
           audioEnabled,
-          children: /* @__PURE__ */ jsx29(EditorPropsProvider, {
-            children: /* @__PURE__ */ jsx29(PrefetchProvider, {
-              children: /* @__PURE__ */ jsx29(SequenceManagerProvider, {
-                children: /* @__PURE__ */ jsx29(DurationsContextProvider, {
-                  children: /* @__PURE__ */ jsx29(BufferingProvider, {
-                    children: /* @__PURE__ */ jsx29(SharedAudioContextProvider, {
+          children: /* @__PURE__ */ jsx30(EditorPropsProvider, {
+            children: /* @__PURE__ */ jsx30(PrefetchProvider, {
+              children: /* @__PURE__ */ jsx30(SequenceManagerProvider, {
+                children: /* @__PURE__ */ jsx30(DurationsContextProvider, {
+                  children: /* @__PURE__ */ jsx30(BufferingProvider, {
+                    children: /* @__PURE__ */ jsx30(SharedAudioContextProvider, {
                       audioLatencyHint,
                       audioEnabled,
-                      children: /* @__PURE__ */ jsx29(SharedAudioTagsContextProvider, {
+                      children: /* @__PURE__ */ jsx30(SharedAudioTagsContextProvider, {
                         numberOfAudioTags,
                         children
                       })
@@ -13238,13 +13598,13 @@ var OffthreadVideoForRendering = ({
   const frame = useCurrentFrame();
   const volumePropsFrame = useFrameForVolumeProp(loopVolumeCurveBehavior);
   const videoConfig = useUnsafeVideoConfig();
-  const sequenceContext = useContext34(SequenceContext);
+  const sequenceContext = useContext35(SequenceContext);
   const mediaStartsAt = useMediaStartsAt();
-  const { registerRenderAsset, unregisterRenderAsset } = useContext34(RenderAssetManager);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext35(RenderAssetManager);
   if (!src) {
     throw new TypeError("No `src` was passed to <OffthreadVideo>.");
   }
-  const id = useMemo34(() => `offthreadvideo-${random(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
+  const id = useMemo35(() => `offthreadvideo-${random(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     src,
     sequenceContext?.cumulatedFrom,
     sequenceContext?.relativeFrom,
@@ -13259,7 +13619,7 @@ var OffthreadVideoForRendering = ({
     mediaVolume: 1
   });
   warnAboutTooHighVolume(volume);
-  useEffect16(() => {
+  useEffect17(() => {
     if (!src) {
       throw new Error("No src passed");
     }
@@ -13299,14 +13659,14 @@ var OffthreadVideoForRendering = ({
     sequenceContext?.relativeFrom,
     audioStreamIndex
   ]);
-  const currentTime = useMemo34(() => {
+  const currentTime = useMemo35(() => {
     return getExpectedMediaFrameUncorrected({
       frame,
       playbackRate: playbackRate || 1,
       startFrom: -mediaStartsAt
     }) / videoConfig.fps;
   }, [frame, mediaStartsAt, playbackRate, videoConfig.fps]);
-  const actualSrc = useMemo34(() => {
+  const actualSrc = useMemo35(() => {
     return getOffthreadVideoSource({
       src,
       currentTime,
@@ -13314,7 +13674,7 @@ var OffthreadVideoForRendering = ({
       toneMapped
     });
   }, [toneMapped, currentTime, src, transparent]);
-  const [imageSrc, setImageSrc] = useState18(null);
+  const [imageSrc, setImageSrc] = useState19(null);
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
   useLayoutEffect11(() => {
     if (!window.remotion_videoEnabled) {
@@ -13387,17 +13747,17 @@ var OffthreadVideoForRendering = ({
     continueRender2,
     delayRender2
   ]);
-  const onErr = useCallback19(() => {
+  const onErr = useCallback20(() => {
     if (onError) {
       onError?.(new Error("Failed to load image with src " + imageSrc));
     } else {
       cancelRender("Failed to load image with src " + imageSrc);
     }
   }, [imageSrc, onError]);
-  const className = useMemo34(() => {
+  const className = useMemo35(() => {
     return [OBJECTFIT_CONTAIN_CLASS_NAME, props2.className].filter(truthy2).join(" ");
   }, [props2.className]);
-  const onImageFrame = useCallback19((img) => {
+  const onImageFrame = useCallback20((img) => {
     if (onVideoFrame) {
       onVideoFrame(img);
     }
@@ -13406,7 +13766,7 @@ var OffthreadVideoForRendering = ({
     return null;
   }
   continueRender2(imageSrc.handle);
-  return /* @__PURE__ */ jsx30(Img, {
+  return /* @__PURE__ */ jsx31(Img, {
     src: imageSrc.src,
     delayRenderRetries,
     delayRenderTimeoutInMilliseconds,
@@ -13420,7 +13780,7 @@ var useEmitVideoFrame = ({
   ref,
   onVideoFrame
 }) => {
-  useEffect17(() => {
+  useEffect18(() => {
     const { current } = ref;
     if (!current) {
       return;
@@ -13452,12 +13812,12 @@ class MediaPlaybackError extends Error {
   }
 }
 var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
-  const context = useContext35(SharedAudioContext);
+  const context = useContext36(SharedAudioContext);
   if (!context) {
     throw new Error("SharedAudioContext not found");
   }
   const videoRef = useRef23(null);
-  const sharedSource = useMemo35(() => {
+  const sharedSource = useMemo36(() => {
     if (!context.audioContext) {
       return null;
     }
@@ -13509,10 +13869,10 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   }
   const volumePropFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const { fps, durationInFrames } = useVideoConfig();
-  const parentSequence = useContext35(SequenceContext);
+  const parentSequence = useContext36(SequenceContext);
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
-  const [timelineId] = useState19(() => String(Math.random()));
+  const [timelineId] = useState20(() => String(Math.random()));
   if (typeof acceptableTimeShift !== "undefined") {
     throw new Error("acceptableTimeShift has been removed. Use acceptableTimeShiftInSeconds instead.");
   }
@@ -13524,7 +13884,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     mediaVolume
   });
   warnAboutTooHighVolume(userPreferredVolume);
-  const getStack = useCallback20(() => {
+  const getStack = useCallback21(() => {
     return _remotionInternalStack ?? null;
   }, [_remotionInternalStack]);
   useMediaInTimeline({
@@ -13539,7 +13899,8 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     showInTimeline,
     premountDisplay: parentSequence?.premountDisplay ?? null,
     postmountDisplay: parentSequence?.postmountDisplay ?? null,
-    loopDisplay: undefined
+    loopDisplay: undefined,
+    documentationLink: name === undefined ? onlyWarnForMediaSeekingError ? "https://www.remotion.dev/docs/offthreadvideo" : "https://www.remotion.dev/docs/html5-video" : null
   });
   useMediaPlayback({
     mediaRef: videoRef,
@@ -13581,13 +13942,13 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   useImperativeHandle8(ref, () => {
     return videoRef.current;
   }, []);
-  useState19(() => playbackLogging({
+  useState20(() => playbackLogging({
     logLevel,
     message: `Mounting video with source = ${actualSrc}, v=${VERSION}, user agent=${typeof navigator === "undefined" ? "server" : navigator.userAgent}`,
     tag: "video",
     mountTime
   }));
-  useEffect18(() => {
+  useEffect19(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -13630,7 +13991,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   const currentOnDurationCallback = useRef23(onDuration);
   currentOnDurationCallback.current = onDuration;
   useEmitVideoFrame({ ref: videoRef, onVideoFrame });
-  useEffect18(() => {
+  useEffect19(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -13647,7 +14008,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
       current.removeEventListener("loadedmetadata", onLoadedMetadata);
     };
   }, [src]);
-  useEffect18(() => {
+  useEffect19(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -13658,7 +14019,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
       current.preload = "auto";
     }
   }, []);
-  const actualStyle = useMemo35(() => {
+  const actualStyle = useMemo36(() => {
     return {
       ...style
     };
@@ -13668,7 +14029,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     requestsVideoFrame: Boolean(onVideoFrame),
     isClientSideRendering: false
   });
-  return /* @__PURE__ */ jsx31("video", {
+  return /* @__PURE__ */ jsx322("video", {
     ref: videoRef,
     muted: muted || mediaMuted || userPreferredVolume <= 0,
     playsInline: true,
@@ -13680,7 +14041,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     ...nativeProps
   });
 };
-var VideoForPreview = forwardRef11(VideoForDevelopmentRefForwardingFunction);
+var VideoForPreview = forwardRef12(VideoForDevelopmentRefForwardingFunction);
 var InnerOffthreadVideo = (props2) => {
   const {
     startFrom,
@@ -13697,7 +14058,7 @@ var InnerOffthreadVideo = (props2) => {
   if (environment.isClientSideRendering) {
     throw new Error("<OffthreadVideo> is not supported in @remotion/web-renderer. Use <Video> from @remotion/media instead. See https://remotion.dev/docs/client-side-rendering/limitations");
   }
-  const onDuration = useCallback21(() => {
+  const onDuration = useCallback22(() => {
     return;
   }, []);
   if (typeof props2.src !== "string") {
@@ -13711,13 +14072,13 @@ var InnerOffthreadVideo = (props2) => {
     trimAfter
   });
   if (typeof trimBeforeValue !== "undefined" || typeof trimAfterValue !== "undefined") {
-    return /* @__PURE__ */ jsx322(Sequence, {
+    return /* @__PURE__ */ jsx33(Sequence, {
       layout: "none",
       from: 0 - (trimBeforeValue ?? 0),
       showInTimeline: false,
       durationInFrames: trimAfterValue,
       name,
-      children: /* @__PURE__ */ jsx322(InnerOffthreadVideo, {
+      children: /* @__PURE__ */ jsx33(InnerOffthreadVideo, {
         pauseWhenBuffering: pauseWhenBuffering ?? false,
         ...otherProps,
         trimAfter: undefined,
@@ -13732,7 +14093,7 @@ var InnerOffthreadVideo = (props2) => {
   }
   validateMediaProps(props2, "Video");
   if (environment.isRendering) {
-    return /* @__PURE__ */ jsx322(OffthreadVideoForRendering, {
+    return /* @__PURE__ */ jsx33(OffthreadVideoForRendering, {
       pauseWhenBuffering: pauseWhenBuffering ?? false,
       ...otherProps,
       trimAfter: undefined,
@@ -13754,7 +14115,7 @@ var InnerOffthreadVideo = (props2) => {
     delayRenderTimeoutInMilliseconds,
     ...propsForPreview
   } = otherProps;
-  return /* @__PURE__ */ jsx322(VideoForPreview, {
+  return /* @__PURE__ */ jsx33(VideoForPreview, {
     _remotionInternalStack: stack ?? null,
     onDuration,
     onlyWarnForMediaSeekingError: true,
@@ -13804,7 +14165,7 @@ var OffthreadVideo = ({
   if (imageFormat) {
     throw new TypeError(`The \`<OffthreadVideo>\` tag does no longer accept \`imageFormat\`. Use the \`transparent\` prop if you want to render a transparent video.`);
   }
-  return /* @__PURE__ */ jsx322(InnerOffthreadVideo, {
+  return /* @__PURE__ */ jsx33(InnerOffthreadVideo, {
     acceptableTimeShiftInSeconds,
     allowAmplificationDuringRender: allowAmplificationDuringRender ?? true,
     audioStreamIndex: audioStreamIndex ?? 0,
@@ -13853,7 +14214,7 @@ function useRemotionContexts() {
   const sequenceManagerContext = React36.useContext(SequenceManager);
   const bufferManagerContext = React36.useContext(BufferingContextReact);
   const logLevelContext = React36.useContext(LogLevelContext);
-  return useMemo36(() => ({
+  return useMemo37(() => ({
     compositionManagerCtx,
     timelineContext,
     setTimelineContext,
@@ -13883,29 +14244,29 @@ function useRemotionContexts() {
 }
 var RemotionContextProvider = (props2) => {
   const { children, contexts } = props2;
-  return /* @__PURE__ */ jsx33(LogLevelContext.Provider, {
+  return /* @__PURE__ */ jsx34(LogLevelContext.Provider, {
     value: contexts.logLevelContext,
-    children: /* @__PURE__ */ jsx33(CanUseRemotionHooks.Provider, {
+    children: /* @__PURE__ */ jsx34(CanUseRemotionHooks.Provider, {
       value: contexts.canUseRemotionHooksContext,
-      children: /* @__PURE__ */ jsx33(NonceContext.Provider, {
+      children: /* @__PURE__ */ jsx34(NonceContext.Provider, {
         value: contexts.nonceContext,
-        children: /* @__PURE__ */ jsx33(PreloadContext.Provider, {
+        children: /* @__PURE__ */ jsx34(PreloadContext.Provider, {
           value: contexts.preloadContext,
-          children: /* @__PURE__ */ jsx33(CompositionManager.Provider, {
+          children: /* @__PURE__ */ jsx34(CompositionManager.Provider, {
             value: contexts.compositionManagerCtx,
-            children: /* @__PURE__ */ jsx33(SequenceManager.Provider, {
+            children: /* @__PURE__ */ jsx34(SequenceManager.Provider, {
               value: contexts.sequenceManagerContext,
-              children: /* @__PURE__ */ jsx33(RenderAssetManager.Provider, {
+              children: /* @__PURE__ */ jsx34(RenderAssetManager.Provider, {
                 value: contexts.renderAssetManagerContext,
-                children: /* @__PURE__ */ jsx33(ResolveCompositionContext.Provider, {
+                children: /* @__PURE__ */ jsx34(ResolveCompositionContext.Provider, {
                   value: contexts.resolveCompositionContext,
-                  children: /* @__PURE__ */ jsx33(TimelineContext.Provider, {
+                  children: /* @__PURE__ */ jsx34(TimelineContext.Provider, {
                     value: contexts.timelineContext,
-                    children: /* @__PURE__ */ jsx33(SetTimelineContext.Provider, {
+                    children: /* @__PURE__ */ jsx34(SetTimelineContext.Provider, {
                       value: contexts.setTimelineContext,
-                      children: /* @__PURE__ */ jsx33(SequenceContext.Provider, {
+                      children: /* @__PURE__ */ jsx34(SequenceContext.Provider, {
                         value: contexts.sequenceContext,
-                        children: /* @__PURE__ */ jsx33(BufferingContextReact.Provider, {
+                        children: /* @__PURE__ */ jsx34(BufferingContextReact.Provider, {
                           value: contexts.bufferManagerContext,
                           children
                         })
@@ -13930,6 +14291,7 @@ var Internals = {
   useAbsoluteTimelinePosition,
   evaluateVolume,
   getAbsoluteSrc,
+  getAssetDisplayName,
   Timeline: exports_timeline_position_state,
   validateMediaTrimProps,
   validateMediaProps,
@@ -14090,13 +14452,13 @@ var flattenChildren = (children) => {
 };
 var IsInsideSeriesContext = createContext25(false);
 var IsInsideSeriesContainer = ({ children }) => {
-  return /* @__PURE__ */ jsx34(IsInsideSeriesContext.Provider, {
+  return /* @__PURE__ */ jsx35(IsInsideSeriesContext.Provider, {
     value: true,
     children
   });
 };
 var IsNotInsideSeriesProvider = ({ children }) => {
-  return /* @__PURE__ */ jsx34(IsInsideSeriesContext.Provider, {
+  return /* @__PURE__ */ jsx35(IsInsideSeriesContext.Provider, {
     value: false,
     children
   });
@@ -14109,13 +14471,13 @@ var useRequireToBeInsideSeries = () => {
 };
 var SeriesSequenceRefForwardingFunction = ({ children }, _ref) => {
   useRequireToBeInsideSeries();
-  return /* @__PURE__ */ jsx35(IsNotInsideSeriesProvider, {
+  return /* @__PURE__ */ jsx36(IsNotInsideSeriesProvider, {
     children
   });
 };
-var SeriesSequence = forwardRef12(SeriesSequenceRefForwardingFunction);
+var SeriesSequence = forwardRef13(SeriesSequenceRefForwardingFunction);
 var SeriesInner = (props2) => {
-  const childrenValue = useMemo37(() => {
+  const childrenValue = useMemo38(() => {
     let startFrame = 0;
     const flattenedChildren = flattenChildren(props2.children);
     return Children.map(flattenedChildren, (child, i) => {
@@ -14156,8 +14518,9 @@ var SeriesInner = (props2) => {
       }
       const currentStartFrame = startFrame + offset;
       startFrame += durationInFramesProp + offset;
-      return /* @__PURE__ */ jsx35(Sequence, {
+      return /* @__PURE__ */ jsx36(Sequence, {
         name: name || "<Series.Sequence>",
+        _remotionInternalDocumentationLink: name ? undefined : "https://www.remotion.dev/docs/series",
         from: currentStartFrame,
         durationInFrames: durationInFramesProp,
         ...passedProps,
@@ -14166,10 +14529,11 @@ var SeriesInner = (props2) => {
       });
     });
   }, [props2.children]);
-  return /* @__PURE__ */ jsx35(IsInsideSeriesContainer, {
-    children: /* @__PURE__ */ jsx35(Sequence, {
+  return /* @__PURE__ */ jsx36(IsInsideSeriesContainer, {
+    children: /* @__PURE__ */ jsx36(Sequence, {
       layout: "none",
       name: "<Series>",
+      _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/series",
       ...props2,
       children: childrenValue
     })
@@ -14646,14 +15010,14 @@ var VideoForRenderingForwardFunction = ({
   const volumePropsFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const videoConfig = useUnsafeVideoConfig();
   const videoRef = useRef24(null);
-  const sequenceContext = useContext36(SequenceContext);
+  const sequenceContext = useContext37(SequenceContext);
   const mediaStartsAt = useMediaStartsAt();
   const environment = useRemotionEnvironment();
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
-  const { registerRenderAsset, unregisterRenderAsset } = useContext36(RenderAssetManager);
-  const id = useMemo38(() => `video-${random(props2.src ?? "")}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
+  const { registerRenderAsset, unregisterRenderAsset } = useContext37(RenderAssetManager);
+  const id = useMemo39(() => `video-${random(props2.src ?? "")}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     props2.src,
     sequenceContext?.cumulatedFrom,
     sequenceContext?.relativeFrom,
@@ -14668,7 +15032,7 @@ var VideoForRenderingForwardFunction = ({
     mediaVolume: 1
   });
   warnAboutTooHighVolume(volume);
-  useEffect19(() => {
+  useEffect20(() => {
     if (!props2.src) {
       throw new Error("No src passed");
     }
@@ -14711,7 +15075,7 @@ var VideoForRenderingForwardFunction = ({
   useImperativeHandle9(ref, () => {
     return videoRef.current;
   }, []);
-  useEffect19(() => {
+  useEffect20(() => {
     if (!window.remotion_videoEnabled) {
       return;
     }
@@ -14835,13 +15199,13 @@ var VideoForRenderingForwardFunction = ({
       delayRender2
     ]);
   }
-  return /* @__PURE__ */ jsx36("video", {
+  return /* @__PURE__ */ jsx37("video", {
     ref: videoRef,
     disableRemotePlayback: true,
     ...props2
   });
 };
-var VideoForRendering = forwardRef13(VideoForRenderingForwardFunction);
+var VideoForRendering = forwardRef14(VideoForRenderingForwardFunction);
 var VideoForwardingFunction = (props2, ref) => {
   const {
     startFrom,
@@ -14862,7 +15226,7 @@ var VideoForwardingFunction = (props2, ref) => {
   if (environment.isClientSideRendering) {
     throw new Error("<Html5Video> is not supported in @remotion/web-renderer. Use <Video> from @remotion/media instead. See https://remotion.dev/docs/client-side-rendering/limitations");
   }
-  const { durations, setDurations } = useContext37(DurationsContext);
+  const { durations, setDurations } = useContext38(DurationsContext);
   if (typeof ref === "string") {
     throw new Error("string refs are not supported");
   }
@@ -14870,10 +15234,10 @@ var VideoForwardingFunction = (props2, ref) => {
     throw new TypeError(`The \`<Html5Video>\` tag requires a string for \`src\`, but got ${JSON.stringify(props2.src)} instead.`);
   }
   const preloadedSrc = usePreload(props2.src);
-  const onDuration = useCallback22((src, durationInSeconds) => {
+  const onDuration = useCallback23((src, durationInSeconds) => {
     setDurations({ type: "got-duration", durationInSeconds, src });
   }, [setDurations]);
-  const onVideoFrame = useCallback22(() => {}, []);
+  const onVideoFrame = useCallback23(() => {}, []);
   const durationFetched = durations[getAbsoluteSrc(preloadedSrc)] ?? durations[getAbsoluteSrc(props2.src)];
   validateMediaTrimProps({ startFrom, endAt, trimBefore, trimAfter });
   const { trimBeforeValue, trimAfterValue } = resolveTrimProps({
@@ -14884,7 +15248,7 @@ var VideoForwardingFunction = (props2, ref) => {
   });
   if (loop && durationFetched !== undefined) {
     if (!Number.isFinite(durationFetched)) {
-      return /* @__PURE__ */ jsx37(Html5Video, {
+      return /* @__PURE__ */ jsx38(Html5Video, {
         ...propsOtherThanLoop,
         ref,
         stack,
@@ -14892,7 +15256,7 @@ var VideoForwardingFunction = (props2, ref) => {
       });
     }
     const mediaDuration = durationFetched * fps;
-    return /* @__PURE__ */ jsx37(Loop, {
+    return /* @__PURE__ */ jsx38(Loop, {
       durationInFrames: calculateMediaDuration({
         trimAfter: trimAfterValue,
         mediaDurationInFrames: mediaDuration,
@@ -14902,7 +15266,7 @@ var VideoForwardingFunction = (props2, ref) => {
       layout: "none",
       name,
       showInTimeline: false,
-      children: /* @__PURE__ */ jsx37(Html5Video, {
+      children: /* @__PURE__ */ jsx38(Html5Video, {
         ...propsOtherThanLoop,
         ref,
         stack,
@@ -14911,13 +15275,13 @@ var VideoForwardingFunction = (props2, ref) => {
     });
   }
   if (typeof trimBeforeValue !== "undefined" || typeof trimAfterValue !== "undefined") {
-    return /* @__PURE__ */ jsx37(Sequence, {
+    return /* @__PURE__ */ jsx38(Sequence, {
       layout: "none",
       from: 0 - (trimBeforeValue ?? 0),
       showInTimeline: false,
       durationInFrames: trimAfterValue === undefined ? undefined : trimAfterValue / (props2.playbackRate ?? 1),
       name,
-      children: /* @__PURE__ */ jsx37(Html5Video, {
+      children: /* @__PURE__ */ jsx38(Html5Video, {
         pauseWhenBuffering: pauseWhenBuffering ?? false,
         ...otherProps,
         ref,
@@ -14931,14 +15295,14 @@ var VideoForwardingFunction = (props2, ref) => {
     volume: props2.volume
   }, "Html5Video");
   if (environment.isRendering) {
-    return /* @__PURE__ */ jsx37(VideoForRendering, {
+    return /* @__PURE__ */ jsx38(VideoForRendering, {
       onDuration,
       onVideoFrame: onVideoFrame ?? null,
       ...otherProps,
       ref
     });
   }
-  return /* @__PURE__ */ jsx37(VideoForPreview, {
+  return /* @__PURE__ */ jsx38(VideoForPreview, {
     onlyWarnForMediaSeekingError: false,
     ...otherProps,
     ref,
@@ -14951,7 +15315,7 @@ var VideoForwardingFunction = (props2, ref) => {
     onAutoPlayError: onAutoPlayError ?? undefined
   });
 };
-var Html5Video = forwardRef14(VideoForwardingFunction);
+var Html5Video = forwardRef15(VideoForwardingFunction);
 addSequenceStackTraces(Html5Video);
 checkMultipleRemotionVersions();
 var proxyObj = {};
@@ -14980,7 +15344,7 @@ addSequenceStackTraces(Composition);
 
 // ../design/dist/esm/index.mjs
 import { jsx as jsx210, Fragment as Fragment3 } from "react/jsx-runtime";
-import { jsx as jsx39, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx310, jsxs as jsxs3 } from "react/jsx-runtime";
 import { useEffect as useEffect22, useMemo as useMemo210, useRef as useRef26 } from "react";
 import { jsx as jsx43 } from "react/jsx-runtime";
 import { jsx as jsx53, jsxs as jsxs23 } from "react/jsx-runtime";
@@ -15033,8 +15397,8 @@ import * as React282 from "react";
 import { jsx as jsx232 } from "react/jsx-runtime";
 import * as React35 from "react";
 import * as React312 from "react";
-import { useState as useState112 } from "react";
 import * as React292 from "react";
+import { useState as useState112 } from "react";
 import * as React30 from "react";
 import * as React342 from "react";
 import * as React332 from "react";
@@ -15136,9 +15500,9 @@ function createSlot(ownerName) {
           return child;
         }
       });
-      return /* @__PURE__ */ jsx38(SlotClone, { ...slotProps, ref: forwardedRef, children: React24.isValidElement(newElement) ? React24.cloneElement(newElement, undefined, newChildren) : null });
+      return /* @__PURE__ */ jsx39(SlotClone, { ...slotProps, ref: forwardedRef, children: React24.isValidElement(newElement) ? React24.cloneElement(newElement, undefined, newChildren) : null });
     }
-    return /* @__PURE__ */ jsx38(SlotClone, { ...slotProps, ref: forwardedRef, children });
+    return /* @__PURE__ */ jsx39(SlotClone, { ...slotProps, ref: forwardedRef, children });
   });
   Slot2.displayName = `${ownerName}.Slot`;
   return Slot2;
@@ -15166,7 +15530,7 @@ function createSlotClone(ownerName) {
 var SLOTTABLE_IDENTIFIER = Symbol("radix.slottable");
 function createSlottable(ownerName) {
   const Slottable2 = ({ children }) => {
-    return /* @__PURE__ */ jsx38(Fragment2, { children });
+    return /* @__PURE__ */ jsx39(Fragment2, { children });
   };
   Slottable2.displayName = `${ownerName}.Slottable`;
   Slottable2.__radixId = SLOTTABLE_IDENTIFIER;
@@ -15235,8 +15599,8 @@ var useHoverTransforms = (ref, disabled) => {
     progress: 0,
     isActive: false
   });
-  const eventTarget = useMemo39(() => new EventTarget, []);
-  useEffect20(() => {
+  const eventTarget = useMemo40(() => new EventTarget, []);
+  useEffect21(() => {
     if (disabled) {
       eventTarget.dispatchEvent(new Event("disabled"));
     } else {
@@ -15382,8 +15746,8 @@ var getAngle = (ref, coordinates) => {
 };
 var lastCoordinates = null;
 var useMousePosition = (ref) => {
-  const [angle, setAngle] = useState20(getAngle(ref.current, lastCoordinates));
-  useEffect20(() => {
+  const [angle, setAngle] = useState21(getAngle(ref.current, lastCoordinates));
+  useEffect21(() => {
     const element = ref.current;
     if (!element) {
       return;
@@ -15467,7 +15831,7 @@ var Outer = ({
     className: "relative",
     style: { width, height },
     children: [
-      /* @__PURE__ */ jsx39("svg", {
+      /* @__PURE__ */ jsx310("svg", {
         viewBox,
         style: {
           overflow: "visible",
@@ -15478,11 +15842,11 @@ var Outer = ({
           left: 0
         },
         pointerEvents: "none",
-        children: /* @__PURE__ */ jsx39(Faces, {
+        children: /* @__PURE__ */ jsx310(Faces, {
           elements: inbetween
         })
       }),
-      /* @__PURE__ */ jsx39("div", {
+      /* @__PURE__ */ jsx310("div", {
         style: {
           transform: makeMatrix3dTransform(frontFace),
           width,
@@ -15551,7 +15915,7 @@ var Button = ({
   const [dimensions, setDimensions] = useState22(null);
   const ref = useRef25(null);
   const { isActive, progress } = useHoverTransforms(ref, Boolean(disabled || loading));
-  const onPointerEnter = useCallback24((e) => {
+  const onPointerEnter = useCallback25((e) => {
     if (e.pointerType !== "mouse") {
       return;
     }
@@ -15588,7 +15952,7 @@ var Button = ({
   const isDisabled = disabled || loading;
   const isAnchor = !asChild && "href" in rest && rest.href !== undefined;
   const sharedClasses = cn("text-text", "inline-flex", "justify-center", "bg-button-bg", "items-center", "font-brand", "border-solid", "text-[1em]", "rounded-lg", "border-black", "border-2", "border-b-4", "cursor-pointer", "px-4", "h-12", "flex-row", "items-center", "relative", "overflow-hidden", isDisabled && "cursor-default opacity-50", className);
-  const preventInteraction = useCallback24((e) => {
+  const preventInteraction = useCallback25((e) => {
     e.preventDefault();
     e.stopPropagation();
   }, []);
@@ -18789,7 +19153,7 @@ var hideOthers = function(originalTarget, parentNode, markerName) {
   return applyAttributeToOthers(targets, activeParentNode, markerName, "aria-hidden");
 };
 var __assign = function() {
-  __assign = Object.assign || function __assign(t) {
+  __assign = Object.assign || function __assign2(t) {
     for (var s, i = 1, n = arguments.length;i < n; i++) {
       s = arguments[i];
       for (var p in s)
@@ -20576,17 +20940,17 @@ function createContextScope2(scopeName, createContextScopeDeps = []) {
   let defaultContexts = [];
   function createContext32(rootComponentName, defaultContext) {
     const BaseContext = React382.createContext(defaultContext);
-    const index2 = defaultContexts.length;
+    const index3 = defaultContexts.length;
     defaultContexts = [...defaultContexts, defaultContext];
     const Provider = (props) => {
       const { scope, children, ...context } = props;
-      const Context = scope?.[scopeName]?.[index2] || BaseContext;
+      const Context = scope?.[scopeName]?.[index3] || BaseContext;
       const value = React382.useMemo(() => context, Object.values(context));
       return /* @__PURE__ */ jsx272(Context.Provider, { value, children });
     };
     Provider.displayName = rootComponentName + "Provider";
     function useContext222(consumerName, scope) {
-      const Context = scope?.[scopeName]?.[index2] || BaseContext;
+      const Context = scope?.[scopeName]?.[index3] || BaseContext;
       const context = React382.useContext(Context);
       if (context)
         return context;
@@ -20783,10 +21147,10 @@ var OrderedDict = class _OrderedDict extends Map {
     super.set(key, value);
     return this;
   }
-  insert(index2, key, value) {
+  insert(index3, key, value) {
     const has = this.has(key);
     const length2 = this.#keys.length;
-    const relativeIndex = toSafeInteger(index2);
+    const relativeIndex = toSafeInteger(index3);
     let actualIndex = relativeIndex >= 0 ? relativeIndex : length2 + relativeIndex;
     const safeIndex = actualIndex < 0 || actualIndex >= length2 ? -1 : actualIndex;
     if (safeIndex === this.size || has && safeIndex === this.size - 1 || safeIndex === -1) {
@@ -20824,39 +21188,39 @@ var OrderedDict = class _OrderedDict extends Map {
     }
     return this;
   }
-  with(index2, key, value) {
+  with(index3, key, value) {
     const copy = new _OrderedDict(this);
-    copy.insert(index2, key, value);
+    copy.insert(index3, key, value);
     return copy;
   }
   before(key) {
-    const index2 = this.#keys.indexOf(key) - 1;
-    if (index2 < 0) {
+    const index3 = this.#keys.indexOf(key) - 1;
+    if (index3 < 0) {
       return;
     }
-    return this.entryAt(index2);
+    return this.entryAt(index3);
   }
   setBefore(key, newKey, value) {
-    const index2 = this.#keys.indexOf(key);
-    if (index2 === -1) {
+    const index3 = this.#keys.indexOf(key);
+    if (index3 === -1) {
       return this;
     }
-    return this.insert(index2, newKey, value);
+    return this.insert(index3, newKey, value);
   }
   after(key) {
-    let index2 = this.#keys.indexOf(key);
-    index2 = index2 === -1 || index2 === this.size - 1 ? -1 : index2 + 1;
-    if (index2 === -1) {
+    let index3 = this.#keys.indexOf(key);
+    index3 = index3 === -1 || index3 === this.size - 1 ? -1 : index3 + 1;
+    if (index3 === -1) {
       return;
     }
-    return this.entryAt(index2);
+    return this.entryAt(index3);
   }
   setAfter(key, newKey, value) {
-    const index2 = this.#keys.indexOf(key);
-    if (index2 === -1) {
+    const index3 = this.#keys.indexOf(key);
+    if (index3 === -1) {
       return this;
     }
-    return this.insert(index2 + 1, newKey, value);
+    return this.insert(index3 + 1, newKey, value);
   }
   first() {
     return this.entryAt(0);
@@ -20875,21 +21239,21 @@ var OrderedDict = class _OrderedDict extends Map {
     }
     return deleted;
   }
-  deleteAt(index2) {
-    const key = this.keyAt(index2);
+  deleteAt(index3) {
+    const key = this.keyAt(index3);
     if (key !== undefined) {
       return this.delete(key);
     }
     return false;
   }
-  at(index2) {
-    const key = at(this.#keys, index2);
+  at(index3) {
+    const key = at(this.#keys, index3);
     if (key !== undefined) {
       return this.get(key);
     }
   }
-  entryAt(index2) {
-    const key = at(this.#keys, index2);
+  entryAt(index3) {
+    const key = at(this.#keys, index3);
     if (key !== undefined) {
       return [key, this.get(key)];
     }
@@ -20897,15 +21261,15 @@ var OrderedDict = class _OrderedDict extends Map {
   indexOf(key) {
     return this.#keys.indexOf(key);
   }
-  keyAt(index2) {
-    return at(this.#keys, index2);
+  keyAt(index3) {
+    return at(this.#keys, index3);
   }
   from(key, offset4) {
-    const index2 = this.indexOf(key);
-    if (index2 === -1) {
+    const index3 = this.indexOf(key);
+    if (index3 === -1) {
       return;
     }
-    let dest = index2 + offset4;
+    let dest = index3 + offset4;
     if (dest < 0)
       dest = 0;
     if (dest >= this.size)
@@ -20913,11 +21277,11 @@ var OrderedDict = class _OrderedDict extends Map {
     return this.at(dest);
   }
   keyFrom(key, offset4) {
-    const index2 = this.indexOf(key);
-    if (index2 === -1) {
+    const index3 = this.indexOf(key);
+    if (index3 === -1) {
       return;
     }
-    let dest = index2 + offset4;
+    let dest = index3 + offset4;
     if (dest < 0)
       dest = 0;
     if (dest >= this.size)
@@ -20925,68 +21289,68 @@ var OrderedDict = class _OrderedDict extends Map {
     return this.keyAt(dest);
   }
   find(predicate, thisArg) {
-    let index2 = 0;
+    let index3 = 0;
     for (const entry of this) {
-      if (Reflect.apply(predicate, thisArg, [entry, index2, this])) {
+      if (Reflect.apply(predicate, thisArg, [entry, index3, this])) {
         return entry;
       }
-      index2++;
+      index3++;
     }
     return;
   }
   findIndex(predicate, thisArg) {
-    let index2 = 0;
+    let index3 = 0;
     for (const entry of this) {
-      if (Reflect.apply(predicate, thisArg, [entry, index2, this])) {
-        return index2;
+      if (Reflect.apply(predicate, thisArg, [entry, index3, this])) {
+        return index3;
       }
-      index2++;
+      index3++;
     }
     return -1;
   }
   filter(predicate, thisArg) {
     const entries = [];
-    let index2 = 0;
+    let index3 = 0;
     for (const entry of this) {
-      if (Reflect.apply(predicate, thisArg, [entry, index2, this])) {
+      if (Reflect.apply(predicate, thisArg, [entry, index3, this])) {
         entries.push(entry);
       }
-      index2++;
+      index3++;
     }
     return new _OrderedDict(entries);
   }
   map(callbackfn, thisArg) {
     const entries = [];
-    let index2 = 0;
+    let index3 = 0;
     for (const entry of this) {
-      entries.push([entry[0], Reflect.apply(callbackfn, thisArg, [entry, index2, this])]);
-      index2++;
+      entries.push([entry[0], Reflect.apply(callbackfn, thisArg, [entry, index3, this])]);
+      index3++;
     }
     return new _OrderedDict(entries);
   }
   reduce(...args) {
     const [callbackfn, initialValue] = args;
-    let index2 = 0;
+    let index3 = 0;
     let accumulator = initialValue ?? this.at(0);
     for (const entry of this) {
-      if (index2 === 0 && args.length === 1) {
+      if (index3 === 0 && args.length === 1) {
         accumulator = entry;
       } else {
-        accumulator = Reflect.apply(callbackfn, this, [accumulator, entry, index2, this]);
+        accumulator = Reflect.apply(callbackfn, this, [accumulator, entry, index3, this]);
       }
-      index2++;
+      index3++;
     }
     return accumulator;
   }
   reduceRight(...args) {
     const [callbackfn, initialValue] = args;
     let accumulator = initialValue ?? this.at(-1);
-    for (let index2 = this.size - 1;index2 >= 0; index2--) {
-      const entry = this.at(index2);
-      if (index2 === this.size - 1 && args.length === 1) {
+    for (let index3 = this.size - 1;index3 >= 0; index3--) {
+      const entry = this.at(index3);
+      if (index3 === this.size - 1 && args.length === 1) {
         accumulator = entry;
       } else {
-        accumulator = Reflect.apply(callbackfn, this, [accumulator, entry, index2, this]);
+        accumulator = Reflect.apply(callbackfn, this, [accumulator, entry, index3, this]);
       }
     }
     return accumulator;
@@ -20997,8 +21361,8 @@ var OrderedDict = class _OrderedDict extends Map {
   }
   toReversed() {
     const reversed = new _OrderedDict;
-    for (let index2 = this.size - 1;index2 >= 0; index2--) {
-      const key = this.keyAt(index2);
+    for (let index3 = this.size - 1;index3 >= 0; index3--) {
+      const key = this.keyAt(index3);
       const element = this.get(key);
       reversed.set(key, element);
     }
@@ -21021,44 +21385,44 @@ var OrderedDict = class _OrderedDict extends Map {
     if (end !== undefined && end > 0) {
       stop = end - 1;
     }
-    for (let index2 = start;index2 <= stop; index2++) {
-      const key = this.keyAt(index2);
+    for (let index3 = start;index3 <= stop; index3++) {
+      const key = this.keyAt(index3);
       const element = this.get(key);
       result.set(key, element);
     }
     return result;
   }
   every(predicate, thisArg) {
-    let index2 = 0;
+    let index3 = 0;
     for (const entry of this) {
-      if (!Reflect.apply(predicate, thisArg, [entry, index2, this])) {
+      if (!Reflect.apply(predicate, thisArg, [entry, index3, this])) {
         return false;
       }
-      index2++;
+      index3++;
     }
     return true;
   }
   some(predicate, thisArg) {
-    let index2 = 0;
+    let index3 = 0;
     for (const entry of this) {
-      if (Reflect.apply(predicate, thisArg, [entry, index2, this])) {
+      if (Reflect.apply(predicate, thisArg, [entry, index3, this])) {
         return true;
       }
-      index2++;
+      index3++;
     }
     return false;
   }
 };
-function at(array, index2) {
+function at(array, index3) {
   if ("at" in Array.prototype) {
-    return Array.prototype.at.call(array, index2);
+    return Array.prototype.at.call(array, index3);
   }
-  const actualIndex = toSafeIndex(array, index2);
+  const actualIndex = toSafeIndex(array, index3);
   return actualIndex === -1 ? undefined : array[actualIndex];
 }
-function toSafeIndex(array, index2) {
+function toSafeIndex(array, index3) {
   const length2 = array.length;
-  const relativeIndex = toSafeInteger(index2);
+  const relativeIndex = toSafeInteger(index3);
   const actualIndex = relativeIndex >= 0 ? relativeIndex : length2 + relativeIndex;
   return actualIndex < 0 || actualIndex >= length2 ? -1 : actualIndex;
 }
@@ -21110,7 +21474,7 @@ var Primitive2 = NODES2.reduce((primitive, node) => {
   Node2.displayName = `Primitive.${node}`;
   return { ...primitive, [node]: Node2 };
 }, {});
-function useCallbackRef3(callback) {
+function useCallbackRef4(callback) {
   const callbackRef = React44.useRef(callback);
   React44.useEffect(() => {
     callbackRef.current = callback;
@@ -21214,7 +21578,7 @@ var RovingFocusGroupImpl = React47.forwardRef((props, forwardedRef) => {
     caller: GROUP_NAME2
   });
   const [isTabbingBackOut, setIsTabbingBackOut] = React47.useState(false);
-  const handleEntryFocus = useCallbackRef3(onEntryFocus);
+  const handleEntryFocus = useCallbackRef4(onEntryFocus);
   const getItems = useCollection2(__scopeRovingFocusGroup);
   const isClickFocusRef = React47.useRef(false);
   const [focusableItemsCount, setFocusableItemsCount] = React47.useState(0);
@@ -21367,7 +21731,7 @@ function focusFirst2(candidates, preventScroll = false) {
   }
 }
 function wrapArray2(array, startIndex) {
-  return array.map((_, index2) => array[(startIndex + index2) % array.length]);
+  return array.map((_, index3) => array[(startIndex + index3) % array.length]);
 }
 var Root3 = RovingFocusGroup;
 var Item2 = RovingFocusGroupItem;
@@ -21682,11 +22046,11 @@ var Triangle2 = (props) => {
 };
 
 // src/components/design.tsx
-import { useCallback as useCallback35, useState as useState40 } from "react";
+import { useCallback as useCallback36, useState as useState39 } from "react";
 
 // src/components/ManageTeamMembers.tsx
-import React53, { useCallback as useCallback34, useState as useState39 } from "react";
-import { jsx as jsx40, jsxs as jsxs6, Fragment as Fragment9 } from "react/jsx-runtime";
+import React53, { useCallback as useCallback35, useState as useState38 } from "react";
+import { jsx as jsx41, jsxs as jsxs6, Fragment as Fragment9 } from "react/jsx-runtime";
 function generateId() {
   return Math.random().toString(36).substr(2, 9);
 }
@@ -21698,26 +22062,26 @@ var Row = ({ value, onChange, onDelete, disableDelete }) => {
   return /* @__PURE__ */ jsxs6("div", {
     className: "flex flex-row gap-2 items-center",
     children: [
-      /* @__PURE__ */ jsx40(Input, {
+      /* @__PURE__ */ jsx41(Input, {
         placeholder: "Enter username",
         className: "w-full block flex-1",
         value,
         onChange: (e) => onChange(e.target.value)
       }),
-      /* @__PURE__ */ jsx40(Button, {
+      /* @__PURE__ */ jsx41(Button, {
         className: "hover:text-white hover:bg-warn transition-colors w-10 h-10 p-0 rounded-full",
         onClick: onDelete,
         type: "button",
         disabled: disableDelete,
         "aria-label": "Delete member",
         depth: 0.5,
-        children: /* @__PURE__ */ jsx40("svg", {
+        children: /* @__PURE__ */ jsx41("svg", {
           width: "16",
           height: "16",
           viewBox: "0 0 10 10",
           fill: "none",
           xmlns: "http://www.w3.org/2000/svg",
-          children: /* @__PURE__ */ jsx40("path", {
+          children: /* @__PURE__ */ jsx41("path", {
             d: "M1 1L9 9M1 9L9 1",
             stroke: "currentColor",
             strokeWidth: "1.5",
@@ -21729,9 +22093,9 @@ var Row = ({ value, onChange, onDelete, disableDelete }) => {
   });
 };
 var ManageTeamMembers = () => {
-  const [members, setMembers] = useState39(initialMembers);
+  const [members, setMembers] = useState38(initialMembers);
   const displayedMembers = [...members, { id: "NEW", name: "" }];
-  const updateMember = useCallback34((idx, value) => {
+  const updateMember = useCallback35((idx, value) => {
     if (idx === members.length) {
       if (value.trim() !== "") {
         setMembers((prev) => [...prev, { id: generateId(), name: value }]);
@@ -21740,11 +22104,11 @@ var ManageTeamMembers = () => {
       setMembers((prev) => prev.map((m, i) => i === idx ? { ...m, name: value } : m));
     }
   }, [members.length]);
-  const deleteMember = useCallback34((idx) => {
+  const deleteMember = useCallback35((idx) => {
     setMembers((prev) => prev.filter((_, i) => i !== idx));
   }, []);
-  const [loading, setLoading] = useState39(false);
-  const save = useCallback34(() => {
+  const [loading, setLoading] = useState38(false);
+  const save = useCallback35(() => {
     setLoading(true);
     setTimeout(() => {
       setLoading(false);
@@ -21752,32 +22116,32 @@ var ManageTeamMembers = () => {
   }, []);
   return /* @__PURE__ */ jsxs6(Fragment9, {
     children: [
-      /* @__PURE__ */ jsx40("h2", {
+      /* @__PURE__ */ jsx41("h2", {
         children: "Manage team members"
       }),
-      /* @__PURE__ */ jsx40("p", {
+      /* @__PURE__ */ jsx41("p", {
         className: "font-brand",
         children: "Add a new team member to your team."
       }),
       displayedMembers.map((member, idx) => /* @__PURE__ */ jsxs6(React53.Fragment, {
         children: [
-          /* @__PURE__ */ jsx40(Row, {
+          /* @__PURE__ */ jsx41(Row, {
             value: member.name,
             onChange: (val) => updateMember(idx, val),
             onDelete: idx < members.length ? () => deleteMember(idx) : undefined,
             disableDelete: idx >= members.length
           }),
-          /* @__PURE__ */ jsx40("div", {
+          /* @__PURE__ */ jsx41("div", {
             className: "h-2"
           })
         ]
       }, idx)),
-      /* @__PURE__ */ jsx40("div", {
+      /* @__PURE__ */ jsx41("div", {
         className: "h-4"
       }),
-      /* @__PURE__ */ jsx40("div", {
+      /* @__PURE__ */ jsx41("div", {
         className: "flex flex-row justify-end",
-        children: /* @__PURE__ */ jsx40(Button, {
+        children: /* @__PURE__ */ jsx41(Button, {
           className: "bg-brand text-white",
           loading,
           onClick: save,
@@ -21789,67 +22153,67 @@ var ManageTeamMembers = () => {
 };
 
 // src/components/design.tsx
-import { jsx as jsx41, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs8 } from "react/jsx-runtime";
 var Explainer = ({ children }) => {
-  return /* @__PURE__ */ jsx41("div", {
-    children: /* @__PURE__ */ jsx41("div", {
+  return /* @__PURE__ */ jsx44("div", {
+    children: /* @__PURE__ */ jsx44("div", {
       className: "text-gray-500 font-brand text-sm mb-2",
       children
     })
   });
 };
 var DesignPage = () => {
-  const [count4, setCount] = useState40(10);
-  const [active, setActive] = useState40(false);
-  const [submitButtonActive, setSubmitButtonActive] = useState40(true);
-  const [submitButtonPrimaryActive, setSubmitButtonPrimaryActive] = useState40(true);
-  const onClick = useCallback35(() => {
+  const [count4, setCount] = useState39(10);
+  const [active, setActive] = useState39(false);
+  const [submitButtonActive, setSubmitButtonActive] = useState39(true);
+  const [submitButtonPrimaryActive, setSubmitButtonPrimaryActive] = useState39(true);
+  const onClick = useCallback36(() => {
     setSubmitButtonActive(false);
     setTimeout(() => {
       setSubmitButtonActive(true);
     }, 1000);
   }, []);
-  const onClickPrimary = useCallback35(() => {
+  const onClickPrimary = useCallback36(() => {
     setSubmitButtonPrimaryActive(false);
     setTimeout(() => {
       setSubmitButtonPrimaryActive(true);
     }, 1000);
   }, []);
-  const [saving, setSaving] = useState40(false);
-  const save = useCallback35(() => {
+  const [saving, setSaving] = useState39(false);
+  const save = useCallback36(() => {
     setSaving(true);
     setTimeout(() => {
       setSaving(false);
     }, 1000);
   }, []);
-  return /* @__PURE__ */ jsx41("div", {
+  return /* @__PURE__ */ jsx44("div", {
     className: "bg-[var(--background)] relative",
     children: /* @__PURE__ */ jsxs8("div", {
       className: "max-w-[800px] mx-auto pt-10 pb-10 px-4",
       children: [
-        /* @__PURE__ */ jsx41("h1", {
+        /* @__PURE__ */ jsx44("h1", {
           children: "@remotion/design"
         }),
-        /* @__PURE__ */ jsx41("a", {
+        /* @__PURE__ */ jsx44("a", {
           href: "https://github.com/remotion-dev/remotion/blob/main/packages/promo-pages/src/components/design.tsx",
           className: "font-brand text-brand",
           target: "_blank",
           children: "View source"
         }),
-        /* @__PURE__ */ jsx41("br", {}),
-        /* @__PURE__ */ jsx41("br", {}),
-        /* @__PURE__ */ jsx41("h2", {
+        /* @__PURE__ */ jsx44("br", {}),
+        /* @__PURE__ */ jsx44("br", {}),
+        /* @__PURE__ */ jsx44("h2", {
           className: "text-brand",
           children: "<Button />"
         }),
-        /* @__PURE__ */ jsx41(Explainer, {
+        /* @__PURE__ */ jsx44(Explainer, {
           children: "Button with label"
         }),
-        /* @__PURE__ */ jsx41(Button, {
+        /* @__PURE__ */ jsx44(Button, {
           children: "Click me"
         }),
-        /* @__PURE__ */ jsx41("br", {}),
-        /* @__PURE__ */ jsx41(Explainer, {
+        /* @__PURE__ */ jsx44("br", {}),
+        /* @__PURE__ */ jsx44(Explainer, {
           children: "Disabled"
         }),
         /* @__PURE__ */ jsxs8(Button, {
@@ -21859,101 +22223,101 @@ var DesignPage = () => {
             " click me"
           ]
         }),
-        /* @__PURE__ */ jsx41("br", {}),
-        /* @__PURE__ */ jsx41(Explainer, {
+        /* @__PURE__ */ jsx44("br", {}),
+        /* @__PURE__ */ jsx44(Explainer, {
           children: "Primary"
         }),
-        /* @__PURE__ */ jsx41(Button, {
+        /* @__PURE__ */ jsx44(Button, {
           className: "bg-brand text-white",
           children: "Primary"
         }),
-        /* @__PURE__ */ jsx41("br", {}),
-        /* @__PURE__ */ jsx41(Explainer, {
+        /* @__PURE__ */ jsx44("br", {}),
+        /* @__PURE__ */ jsx44(Explainer, {
           children: "Click to disable"
         }),
-        /* @__PURE__ */ jsx41(Button, {
+        /* @__PURE__ */ jsx44(Button, {
           onClick,
           loading: !submitButtonActive,
           children: "Submit"
         }),
-        /* @__PURE__ */ jsx41("br", {}),
-        /* @__PURE__ */ jsx41(Explainer, {
+        /* @__PURE__ */ jsx44("br", {}),
+        /* @__PURE__ */ jsx44(Explainer, {
           children: "Click to disable (primary)"
         }),
-        /* @__PURE__ */ jsx41(Button, {
+        /* @__PURE__ */ jsx44(Button, {
           onClick: onClickPrimary,
           className: "bg-brand text-white",
           loading: !submitButtonPrimaryActive,
           children: "Submit"
         }),
-        /* @__PURE__ */ jsx41("br", {}),
-        /* @__PURE__ */ jsx41(Explainer, {
+        /* @__PURE__ */ jsx44("br", {}),
+        /* @__PURE__ */ jsx44(Explainer, {
           children: "Loading state"
         }),
-        /* @__PURE__ */ jsx41(Button, {
+        /* @__PURE__ */ jsx44(Button, {
           onClick,
           loading: true,
           children: "Loading"
         }),
-        /* @__PURE__ */ jsx41("br", {}),
-        /* @__PURE__ */ jsx41(Explainer, {
+        /* @__PURE__ */ jsx44("br", {}),
+        /* @__PURE__ */ jsx44(Explainer, {
           children: "Loading state (primary)"
         }),
-        /* @__PURE__ */ jsx41(Button, {
+        /* @__PURE__ */ jsx44(Button, {
           onClick,
           className: "bg-brand text-white",
           loading: true,
           children: "Loading"
         }),
-        /* @__PURE__ */ jsx41("br", {}),
-        /* @__PURE__ */ jsx41(Explainer, {
+        /* @__PURE__ */ jsx44("br", {}),
+        /* @__PURE__ */ jsx44(Explainer, {
           children: "Rounded"
         }),
-        /* @__PURE__ */ jsx41(Button, {
+        /* @__PURE__ */ jsx44(Button, {
           className: "rounded-full",
           children: "Rounded"
         }),
-        /* @__PURE__ */ jsx41("br", {}),
-        /* @__PURE__ */ jsx41(Explainer, {
+        /* @__PURE__ */ jsx44("br", {}),
+        /* @__PURE__ */ jsx44(Explainer, {
           children: "Full width"
         }),
-        /* @__PURE__ */ jsx41(Button, {
+        /* @__PURE__ */ jsx44(Button, {
           className: "w-full",
           children: "Choose a template"
         }),
-        /* @__PURE__ */ jsx41("br", {}),
-        /* @__PURE__ */ jsx41(Explainer, {
+        /* @__PURE__ */ jsx44("br", {}),
+        /* @__PURE__ */ jsx44(Explainer, {
           children: "Full width rounded"
         }),
-        /* @__PURE__ */ jsx41(Button, {
+        /* @__PURE__ */ jsx44(Button, {
           className: "w-full rounded-full",
           children: "Fully rounded"
         }),
-        /* @__PURE__ */ jsx41("div", {
+        /* @__PURE__ */ jsx44("div", {
           className: "h-8"
         }),
-        /* @__PURE__ */ jsx41(Explainer, {
+        /* @__PURE__ */ jsx44(Explainer, {
           children: "Circular"
         }),
-        /* @__PURE__ */ jsx41(Button, {
+        /* @__PURE__ */ jsx44(Button, {
           className: "rounded-full bg-brand w-12 h-12"
         }),
-        /* @__PURE__ */ jsx41("div", {
+        /* @__PURE__ */ jsx44("div", {
           className: "h-8"
         }),
-        /* @__PURE__ */ jsx41(Explainer, {
+        /* @__PURE__ */ jsx44(Explainer, {
           children: "Remove"
         }),
-        /* @__PURE__ */ jsx41(Button, {
+        /* @__PURE__ */ jsx44(Button, {
           className: "hover:text-white hover:bg-warn transition-colors w-10 h-10 p-0 rounded-full",
           depth: 0.5,
-          children: /* @__PURE__ */ jsx41("svg", {
+          children: /* @__PURE__ */ jsx44("svg", {
             width: "16",
             height: "16",
             viewBox: "0 0 10 10",
             fill: "none",
             xmlns: "http://www.w3.org/2000/svg",
-            children: /* @__PURE__ */ jsx41("path", {
+            children: /* @__PURE__ */ jsx44("path", {
               d: "M1 1L9 9M1 9L9 1",
               stroke: "currentColor",
               strokeWidth: "1.5",
@@ -21961,56 +22325,56 @@ var DesignPage = () => {
             })
           })
         }),
-        /* @__PURE__ */ jsx41("div", {
+        /* @__PURE__ */ jsx44("div", {
           className: "h-8"
         }),
-        /* @__PURE__ */ jsx41(Explainer, {
+        /* @__PURE__ */ jsx44(Explainer, {
           children: "Link button"
         }),
-        /* @__PURE__ */ jsx41(Button, {
+        /* @__PURE__ */ jsx44(Button, {
           href: "/design",
           children: "Link button"
         }),
-        /* @__PURE__ */ jsx41("br", {}),
+        /* @__PURE__ */ jsx44("br", {}),
         /* @__PURE__ */ jsxs8(Explainer, {
           children: [
             "Link button with ",
-            /* @__PURE__ */ jsx41("code", {
+            /* @__PURE__ */ jsx44("code", {
               children: "<span>"
             })
           ]
         }),
-        /* @__PURE__ */ jsx41(Button, {
+        /* @__PURE__ */ jsx44(Button, {
           href: "/design",
-          children: /* @__PURE__ */ jsx41("span", {
+          children: /* @__PURE__ */ jsx44("span", {
             children: "Link button with span child"
           })
         }),
-        /* @__PURE__ */ jsx41("br", {}),
-        /* @__PURE__ */ jsx41(Explainer, {
+        /* @__PURE__ */ jsx44("br", {}),
+        /* @__PURE__ */ jsx44(Explainer, {
           children: "External link button"
         }),
-        /* @__PURE__ */ jsx41(Button, {
+        /* @__PURE__ */ jsx44(Button, {
           href: "https://github.com/remotion-dev/remotion",
           target: "_blank",
           children: "GitHub"
         }),
-        /* @__PURE__ */ jsx41("div", {
+        /* @__PURE__ */ jsx44("div", {
           className: "h-8"
         }),
-        /* @__PURE__ */ jsx41(Explainer, {
+        /* @__PURE__ */ jsx44(Explainer, {
           children: "Remove (small)"
         }),
-        /* @__PURE__ */ jsx41(Button, {
+        /* @__PURE__ */ jsx44(Button, {
           className: "hover:text-white hover:bg-warn transition-colors w-6 h-6 p-0 rounded-full",
           depth: 0.5,
-          children: /* @__PURE__ */ jsx41("svg", {
+          children: /* @__PURE__ */ jsx44("svg", {
             width: "10",
             height: "10",
             viewBox: "0 0 10 10",
             fill: "none",
             xmlns: "http://www.w3.org/2000/svg",
-            children: /* @__PURE__ */ jsx41("path", {
+            children: /* @__PURE__ */ jsx44("path", {
               d: "M1 1L9 9M1 9L9 1",
               stroke: "currentColor",
               strokeWidth: "1.5",
@@ -22018,74 +22382,74 @@ var DesignPage = () => {
             })
           })
         }),
-        /* @__PURE__ */ jsx41("div", {
+        /* @__PURE__ */ jsx44("div", {
           className: "h-8"
         }),
-        /* @__PURE__ */ jsx41("h2", {
+        /* @__PURE__ */ jsx44("h2", {
           className: "text-brand",
           children: "<Counter />"
         }),
-        /* @__PURE__ */ jsx41(Counter, {
+        /* @__PURE__ */ jsx44(Counter, {
           count: count4,
           setCount,
           minCount: 1,
           step: 1,
           incrementStep: 1
         }),
-        /* @__PURE__ */ jsx41("br", {}),
+        /* @__PURE__ */ jsx44("br", {}),
         " ",
-        /* @__PURE__ */ jsx41("h2", {
+        /* @__PURE__ */ jsx44("h2", {
           className: "text-brand",
           children: "<Switch />"
         }),
-        /* @__PURE__ */ jsx41(Switch, {
+        /* @__PURE__ */ jsx44(Switch, {
           active,
           onToggle: () => setActive((e) => !e)
         }),
-        /* @__PURE__ */ jsx41("br", {}),
+        /* @__PURE__ */ jsx44("br", {}),
         " ",
-        /* @__PURE__ */ jsx41("h2", {
+        /* @__PURE__ */ jsx44("h2", {
           className: "text-brand",
           children: "<Card />"
         }),
         /* @__PURE__ */ jsxs8(Card, {
           className: "px-4 py-4",
           children: [
-            /* @__PURE__ */ jsx41("h3", {
+            /* @__PURE__ */ jsx44("h3", {
               className: "text-text",
               children: "Card"
             }),
-            /* @__PURE__ */ jsx41("div", {
+            /* @__PURE__ */ jsx44("div", {
               className: "text-gray-500",
               children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
             })
           ]
         }),
-        /* @__PURE__ */ jsx41("br", {}),
-        /* @__PURE__ */ jsx41("h2", {
+        /* @__PURE__ */ jsx44("br", {}),
+        /* @__PURE__ */ jsx44("h2", {
           className: "text-brand",
           children: "<Select />"
         }),
         /* @__PURE__ */ jsxs8(Select2, {
           defaultValue: "option1",
           children: [
-            /* @__PURE__ */ jsx41(SelectTrigger2, {
+            /* @__PURE__ */ jsx44(SelectTrigger2, {
               style: { width: "200px" },
-              children: /* @__PURE__ */ jsx41(SelectValue2, {
+              children: /* @__PURE__ */ jsx44(SelectValue2, {
                 placeholder: "Select an option"
               })
             }),
             /* @__PURE__ */ jsxs8(SelectContent2, {
               children: [
-                /* @__PURE__ */ jsx41(SelectItem2, {
+                /* @__PURE__ */ jsx44(SelectItem2, {
                   value: "option1",
                   children: "Option 1"
                 }),
-                /* @__PURE__ */ jsx41(SelectItem2, {
+                /* @__PURE__ */ jsx44(SelectItem2, {
                   value: "option2",
                   children: "Option 2"
                 }),
-                /* @__PURE__ */ jsx41(SelectItem2, {
+                /* @__PURE__ */ jsx44(SelectItem2, {
                   value: "option3",
                   children: "Option 3"
                 })
@@ -22093,8 +22457,8 @@ var DesignPage = () => {
             })
           ]
         }),
-        /* @__PURE__ */ jsx41("br", {}),
-        /* @__PURE__ */ jsx41("h2", {
+        /* @__PURE__ */ jsx44("br", {}),
+        /* @__PURE__ */ jsx44("h2", {
           className: "text-brand",
           children: "<Tabs />"
         }),
@@ -22103,63 +22467,63 @@ var DesignPage = () => {
           children: [
             /* @__PURE__ */ jsxs8(TabsList2, {
               children: [
-                /* @__PURE__ */ jsx41(TabsTrigger2, {
+                /* @__PURE__ */ jsx44(TabsTrigger2, {
                   value: "tab1",
                   children: "Tab 1"
                 }),
-                /* @__PURE__ */ jsx41(TabsTrigger2, {
+                /* @__PURE__ */ jsx44(TabsTrigger2, {
                   value: "tab2",
                   children: "Tab 2"
                 }),
-                /* @__PURE__ */ jsx41(TabsTrigger2, {
+                /* @__PURE__ */ jsx44(TabsTrigger2, {
                   value: "tab3",
                   children: "Tab 3"
                 })
               ]
             }),
-            /* @__PURE__ */ jsx41(TabsContent2, {
+            /* @__PURE__ */ jsx44(TabsContent2, {
               value: "tab1",
-              children: /* @__PURE__ */ jsx41("div", {
+              children: /* @__PURE__ */ jsx44("div", {
                 className: "font-brand",
                 children: "Content for Tab 1"
               })
             }),
-            /* @__PURE__ */ jsx41(TabsContent2, {
+            /* @__PURE__ */ jsx44(TabsContent2, {
               value: "tab2",
-              children: /* @__PURE__ */ jsx41("div", {
+              children: /* @__PURE__ */ jsx44("div", {
                 className: "font-brand",
                 children: "Content for Tab 2"
               })
             }),
-            /* @__PURE__ */ jsx41(TabsContent2, {
+            /* @__PURE__ */ jsx44(TabsContent2, {
               value: "tab3",
-              children: /* @__PURE__ */ jsx41("div", {
+              children: /* @__PURE__ */ jsx44("div", {
                 className: "font-brand",
                 children: "Content for Tab 3"
               })
             })
           ]
         }),
-        /* @__PURE__ */ jsx41("br", {}),
-        /* @__PURE__ */ jsx41("h2", {
+        /* @__PURE__ */ jsx44("br", {}),
+        /* @__PURE__ */ jsx44("h2", {
           className: "text-brand",
           children: "<Input />"
         }),
-        /* @__PURE__ */ jsx41(Input, {
+        /* @__PURE__ */ jsx44(Input, {
           placeholder: "Enter your email"
         }),
-        /* @__PURE__ */ jsx41("br", {}),
-        /* @__PURE__ */ jsx41("br", {}),
-        /* @__PURE__ */ jsx41("h2", {
+        /* @__PURE__ */ jsx44("br", {}),
+        /* @__PURE__ */ jsx44("br", {}),
+        /* @__PURE__ */ jsx44("h2", {
           className: "text-brand",
           children: "<Textarea />"
         }),
-        /* @__PURE__ */ jsx41(Textarea, {
+        /* @__PURE__ */ jsx44(Textarea, {
           placeholder: "Enter your message"
         }),
-        /* @__PURE__ */ jsx41("br", {}),
-        /* @__PURE__ */ jsx41("br", {}),
-        /* @__PURE__ */ jsx41("h2", {
+        /* @__PURE__ */ jsx44("br", {}),
+        /* @__PURE__ */ jsx44("br", {}),
+        /* @__PURE__ */ jsx44("h2", {
           className: "text-brand",
           children: "<InlineCode />"
         }),
@@ -22167,18 +22531,18 @@ var DesignPage = () => {
           className: "font-brand",
           children: [
             "Use ",
-            /* @__PURE__ */ jsx41(InlineCode, {
+            /* @__PURE__ */ jsx44(InlineCode, {
               children: "useCurrentFrame()"
             }),
             " to get the current frame and ",
-            /* @__PURE__ */ jsx41(InlineCode, {
+            /* @__PURE__ */ jsx44(InlineCode, {
               children: "useVideoConfig()"
             }),
             " to get the video configuration."
           ]
         }),
-        /* @__PURE__ */ jsx41("br", {}),
-        /* @__PURE__ */ jsx41("h2", {
+        /* @__PURE__ */ jsx44("br", {}),
+        /* @__PURE__ */ jsx44("h2", {
           className: "text-brand",
           children: "<Link />"
         }),
@@ -22187,7 +22551,7 @@ var DesignPage = () => {
           children: [
             "See the",
             " ",
-            /* @__PURE__ */ jsx41(Link, {
+            /* @__PURE__ */ jsx44(Link, {
               href: "https://www.remotion.dev/docs",
               target: "_blank",
               rel: "noopener noreferrer",
@@ -22197,38 +22561,38 @@ var DesignPage = () => {
             "for more information."
           ]
         }),
-        /* @__PURE__ */ jsx41("br", {}),
-        /* @__PURE__ */ jsx41("br", {}),
-        /* @__PURE__ */ jsx41("h1", {
+        /* @__PURE__ */ jsx44("br", {}),
+        /* @__PURE__ */ jsx44("br", {}),
+        /* @__PURE__ */ jsx44("h1", {
           children: "Example form set"
         }),
-        /* @__PURE__ */ jsx41("br", {}),
-        /* @__PURE__ */ jsx41("h2", {
+        /* @__PURE__ */ jsx44("br", {}),
+        /* @__PURE__ */ jsx44("h2", {
           children: "Change email"
         }),
-        /* @__PURE__ */ jsx41("p", {
+        /* @__PURE__ */ jsx44("p", {
           className: "font-brand",
           children: "A email will be sent to the new email address. You will need to click on the link in the email to confirm the change."
         }),
-        /* @__PURE__ */ jsx41(Input, {
+        /* @__PURE__ */ jsx44(Input, {
           placeholder: "Enter your email",
           className: "w-full block"
         }),
-        /* @__PURE__ */ jsx41("div", {
+        /* @__PURE__ */ jsx44("div", {
           className: "h-2"
         }),
-        /* @__PURE__ */ jsx41("div", {
+        /* @__PURE__ */ jsx44("div", {
           className: "flex flex-row justify-end",
-          children: /* @__PURE__ */ jsx41(Button, {
+          children: /* @__PURE__ */ jsx44(Button, {
             className: "bg-brand text-white",
             loading: saving,
             onClick: save,
             children: "Change"
           })
         }),
-        /* @__PURE__ */ jsx41("br", {}),
-        /* @__PURE__ */ jsx41("br", {}),
-        /* @__PURE__ */ jsx41(ManageTeamMembers, {})
+        /* @__PURE__ */ jsx44("br", {}),
+        /* @__PURE__ */ jsx44("br", {}),
+        /* @__PURE__ */ jsx44(ManageTeamMembers, {})
       ]
     })
   });