@remotion/promo-pages 4.0.466 → 4.0.467

package/dist/experts.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);
@@ -911,7 +900,7 @@ var experts = [
   }
 ];
 // src/components/experts/ExpertsPage.tsx
-import { useMemo as useMemo39 } from "react";
+import { useMemo as useMemo40 } from "react";
 
 // ../core/dist/esm/index.mjs
 import { createContext } from "react";
@@ -1081,84 +1070,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 useMemo32,
   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 useMemo32 } 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 jsx32 } 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") {
@@ -2273,7 +2275,7 @@ var getComponentsToAddStacksTo = () => componentsToAddStacksTo;
 var addSequenceStackTraces = (component) => {
   componentsToAddStacksTo.push(component);
 };
-var VERSION = "4.0.466";
+var VERSION = "4.0.467";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -3595,6 +3597,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));
@@ -3847,54 +3897,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();
@@ -3904,7 +3906,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;
@@ -3920,7 +3922,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
     }, {
@@ -5428,9 +5430,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;
@@ -5483,6 +5519,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({
@@ -5518,7 +5563,6 @@ var SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled })
     return ({
       node,
       mediaTimestamp,
-      currentTime,
       scheduledTime,
       duration,
       offset,
@@ -5527,7 +5571,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, {
@@ -5547,7 +5598,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 ? {
@@ -5574,7 +5625,7 @@ var SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled })
       node.start(r.scheduledTime, r.offset, r.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) => {
@@ -5591,17 +5642,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,
@@ -6093,7 +6145,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;
 };
@@ -7696,41 +7749,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);
 }
@@ -7749,6 +7767,7 @@ var ImgContent = ({
   delayRenderTimeoutInMilliseconds,
   onImageFrame,
   crossOrigin,
+  decoding,
   ref,
   ...props2
 }) => {
@@ -7764,7 +7783,7 @@ var ImgContent = ({
     return imageRef.current;
   }, []);
   const actualSrc = usePreload(src);
-  const retryIn = useCallback17((timeout) => {
+  const retryIn = useCallback16((timeout) => {
     if (!imageRef.current) {
       return;
     }
@@ -7782,7 +7801,7 @@ var ImgContent = ({
     }, timeout);
   }, []);
   const { delayRender: delayRender2, continueRender: continueRender2, cancelRender: cancelRender2 } = useDelayRender();
-  const didGetError = useCallback17((e) => {
+  const didGetError = useCallback16((e) => {
     if (!errors.current) {
       return;
     }
@@ -7870,18 +7889,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 = ({
@@ -7898,7 +7917,7 @@ 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,
@@ -7909,7 +7928,7 @@ var ImgInner = ({
     _experimentalControls: controls,
     showInTimeline: showInTimeline ?? true,
     hidden,
-    children: /* @__PURE__ */ jsx26(ImgContent, {
+    children: /* @__PURE__ */ jsx25(ImgContent, {
       src,
       ...props2
     })
@@ -7921,6 +7940,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,
@@ -7929,18 +8273,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.`);
@@ -7948,12 +8292,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,
@@ -7965,7 +8309,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));
     });
@@ -7975,7 +8319,7 @@ var CompositionManagerProvider = ({
       getCompositions: () => currentcompositionsRef.current
     };
   }, []);
-  const compositionManagerSetters = useMemo31(() => {
+  const compositionManagerSetters = useMemo32(() => {
     return {
       registerComposition,
       unregisterComposition,
@@ -7991,7 +8335,7 @@ var CompositionManagerProvider = ({
     unregisterFolder,
     onlyRenderComposition
   ]);
-  const compositionManagerContextValue = useMemo31(() => {
+  const compositionManagerContextValue = useMemo32(() => {
     return {
       compositions,
       folders,
@@ -7999,9 +8343,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
     })
@@ -8119,7 +8463,7 @@ var waitForRoot = (fn) => {
 };
 var MediaEnabledContext = createContext23(null);
 var useVideoEnabled = () => {
-  const context = useContext33(MediaEnabledContext);
+  const context = useContext34(MediaEnabledContext);
   if (!context) {
     return window.remotion_videoEnabled;
   }
@@ -8129,7 +8473,7 @@ var useVideoEnabled = () => {
   return context.videoEnabled;
 };
 var useAudioEnabled = () => {
-  const context = useContext33(MediaEnabledContext);
+  const context = useContext34(MediaEnabledContext);
   if (!context) {
     return window.remotion_audioEnabled;
   }
@@ -8143,8 +8487,8 @@ var MediaEnabledProvider = ({
   videoEnabled,
   audioEnabled
 }) => {
-  const value = useMemo32(() => ({ videoEnabled, audioEnabled }), [videoEnabled, audioEnabled]);
-  return /* @__PURE__ */ jsx28(MediaEnabledContext.Provider, {
+  const value = useMemo33(() => ({ videoEnabled, audioEnabled }), [videoEnabled, audioEnabled]);
+  return /* @__PURE__ */ jsx29(MediaEnabledContext.Provider, {
     value,
     children
   });
@@ -8158,33 +8502,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
                       })
@@ -8452,13 +8796,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,
@@ -8473,7 +8817,7 @@ var OffthreadVideoForRendering = ({
     mediaVolume: 1
   });
   warnAboutTooHighVolume(volume);
-  useEffect16(() => {
+  useEffect17(() => {
     if (!src) {
       throw new Error("No src passed");
     }
@@ -8513,14 +8857,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,
@@ -8528,7 +8872,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) {
@@ -8601,17 +8945,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(truthy).join(" ");
   }, [props2.className]);
-  const onImageFrame = useCallback19((img) => {
+  const onImageFrame = useCallback20((img) => {
     if (onVideoFrame) {
       onVideoFrame(img);
     }
@@ -8620,7 +8964,7 @@ var OffthreadVideoForRendering = ({
     return null;
   }
   continueRender2(imageSrc.handle);
-  return /* @__PURE__ */ jsx30(Img, {
+  return /* @__PURE__ */ jsx31(Img, {
     src: imageSrc.src,
     delayRenderRetries,
     delayRenderTimeoutInMilliseconds,
@@ -8634,7 +8978,7 @@ var useEmitVideoFrame = ({
   ref,
   onVideoFrame
 }) => {
-  useEffect17(() => {
+  useEffect18(() => {
     const { current } = ref;
     if (!current) {
       return;
@@ -8666,12 +9010,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;
     }
@@ -8723,10 +9067,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.");
   }
@@ -8738,7 +9082,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     mediaVolume
   });
   warnAboutTooHighVolume(userPreferredVolume);
-  const getStack = useCallback20(() => {
+  const getStack = useCallback21(() => {
     return _remotionInternalStack ?? null;
   }, [_remotionInternalStack]);
   useMediaInTimeline({
@@ -8796,13 +9140,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;
@@ -8845,7 +9189,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   const currentOnDurationCallback = useRef23(onDuration);
   currentOnDurationCallback.current = onDuration;
   useEmitVideoFrame({ ref: videoRef, onVideoFrame });
-  useEffect18(() => {
+  useEffect19(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -8862,7 +9206,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
       current.removeEventListener("loadedmetadata", onLoadedMetadata);
     };
   }, [src]);
-  useEffect18(() => {
+  useEffect19(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -8873,7 +9217,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
       current.preload = "auto";
     }
   }, []);
-  const actualStyle = useMemo35(() => {
+  const actualStyle = useMemo36(() => {
     return {
       ...style
     };
@@ -8883,7 +9227,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     requestsVideoFrame: Boolean(onVideoFrame),
     isClientSideRendering: false
   });
-  return /* @__PURE__ */ jsx31("video", {
+  return /* @__PURE__ */ jsx32("video", {
     ref: videoRef,
     muted: muted || mediaMuted || userPreferredVolume <= 0,
     playsInline: true,
@@ -8895,7 +9239,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     ...nativeProps
   });
 };
-var VideoForPreview = forwardRef11(VideoForDevelopmentRefForwardingFunction);
+var VideoForPreview = forwardRef12(VideoForDevelopmentRefForwardingFunction);
 var InnerOffthreadVideo = (props2) => {
   const {
     startFrom,
@@ -8912,7 +9256,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") {
@@ -8926,13 +9270,13 @@ var InnerOffthreadVideo = (props2) => {
     trimAfter
   });
   if (typeof trimBeforeValue !== "undefined" || typeof trimAfterValue !== "undefined") {
-    return /* @__PURE__ */ jsx32(Sequence, {
+    return /* @__PURE__ */ jsx33(Sequence, {
       layout: "none",
       from: 0 - (trimBeforeValue ?? 0),
       showInTimeline: false,
       durationInFrames: trimAfterValue,
       name,
-      children: /* @__PURE__ */ jsx32(InnerOffthreadVideo, {
+      children: /* @__PURE__ */ jsx33(InnerOffthreadVideo, {
         pauseWhenBuffering: pauseWhenBuffering ?? false,
         ...otherProps,
         trimAfter: undefined,
@@ -8947,7 +9291,7 @@ var InnerOffthreadVideo = (props2) => {
   }
   validateMediaProps(props2, "Video");
   if (environment.isRendering) {
-    return /* @__PURE__ */ jsx32(OffthreadVideoForRendering, {
+    return /* @__PURE__ */ jsx33(OffthreadVideoForRendering, {
       pauseWhenBuffering: pauseWhenBuffering ?? false,
       ...otherProps,
       trimAfter: undefined,
@@ -8969,7 +9313,7 @@ var InnerOffthreadVideo = (props2) => {
     delayRenderTimeoutInMilliseconds,
     ...propsForPreview
   } = otherProps;
-  return /* @__PURE__ */ jsx32(VideoForPreview, {
+  return /* @__PURE__ */ jsx33(VideoForPreview, {
     _remotionInternalStack: stack ?? null,
     onDuration,
     onlyWarnForMediaSeekingError: true,
@@ -9019,7 +9363,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__ */ jsx32(InnerOffthreadVideo, {
+  return /* @__PURE__ */ jsx33(InnerOffthreadVideo, {
     acceptableTimeShiftInSeconds,
     allowAmplificationDuringRender: allowAmplificationDuringRender ?? true,
     audioStreamIndex: audioStreamIndex ?? 0,
@@ -9068,7 +9412,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,
@@ -9098,29 +9442,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
                         })
@@ -9145,6 +9489,7 @@ var Internals = {
   useAbsoluteTimelinePosition,
   evaluateVolume,
   getAbsoluteSrc,
+  getAssetDisplayName,
   Timeline: exports_timeline_position_state,
   validateMediaTrimProps,
   validateMediaProps,
@@ -9305,13 +9650,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
   });
@@ -9324,13 +9669,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) => {
@@ -9371,7 +9716,7 @@ 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,
@@ -9382,8 +9727,8 @@ 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",
@@ -9863,14 +10208,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,
@@ -9885,7 +10230,7 @@ var VideoForRenderingForwardFunction = ({
     mediaVolume: 1
   });
   warnAboutTooHighVolume(volume);
-  useEffect19(() => {
+  useEffect20(() => {
     if (!props2.src) {
       throw new Error("No src passed");
     }
@@ -9928,7 +10273,7 @@ var VideoForRenderingForwardFunction = ({
   useImperativeHandle9(ref, () => {
     return videoRef.current;
   }, []);
-  useEffect19(() => {
+  useEffect20(() => {
     if (!window.remotion_videoEnabled) {
       return;
     }
@@ -10052,13 +10397,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,
@@ -10079,7 +10424,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");
   }
@@ -10087,10 +10432,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({
@@ -10101,7 +10446,7 @@ var VideoForwardingFunction = (props2, ref) => {
   });
   if (loop && durationFetched !== undefined) {
     if (!Number.isFinite(durationFetched)) {
-      return /* @__PURE__ */ jsx37(Html5Video, {
+      return /* @__PURE__ */ jsx38(Html5Video, {
         ...propsOtherThanLoop,
         ref,
         stack,
@@ -10109,7 +10454,7 @@ var VideoForwardingFunction = (props2, ref) => {
       });
     }
     const mediaDuration = durationFetched * fps;
-    return /* @__PURE__ */ jsx37(Loop, {
+    return /* @__PURE__ */ jsx38(Loop, {
       durationInFrames: calculateMediaDuration({
         trimAfter: trimAfterValue,
         mediaDurationInFrames: mediaDuration,
@@ -10119,7 +10464,7 @@ var VideoForwardingFunction = (props2, ref) => {
       layout: "none",
       name,
       showInTimeline: false,
-      children: /* @__PURE__ */ jsx37(Html5Video, {
+      children: /* @__PURE__ */ jsx38(Html5Video, {
         ...propsOtherThanLoop,
         ref,
         stack,
@@ -10128,13 +10473,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,
@@ -10148,14 +10493,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,
@@ -10168,7 +10513,7 @@ var VideoForwardingFunction = (props2, ref) => {
     onAutoPlayError: onAutoPlayError ?? undefined
   });
 };
-var Html5Video = forwardRef14(VideoForwardingFunction);
+var Html5Video = forwardRef15(VideoForwardingFunction);
 addSequenceStackTraces(Html5Video);
 checkMultipleRemotionVersions();
 var proxyObj = {};
@@ -10196,46 +10541,46 @@ addSequenceStackTraces(Sequence);
 addSequenceStackTraces(Composition);
 
 // src/components/team/TeamCards.tsx
-import { jsx as jsx38, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs3 } from "react/jsx-runtime";
 var LinkedInLogo = () => {
-  return /* @__PURE__ */ jsx38("svg", {
+  return /* @__PURE__ */ jsx39("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 1000 1000",
     className: "w-[30px]",
-    children: /* @__PURE__ */ jsx38("path", {
+    children: /* @__PURE__ */ jsx39("path", {
       fill: "currentcolor",
       d: "M195.877 0C88.16 0 0 88.158 0 195.877V803.718C0 911.435 88.158 999.563 195.877 999.563H803.718C911.436 999.563 999.563 911.436 999.563 803.718V195.877C999.563 88.16 911.436 0 803.718 0H195.877ZM245.143 164.948C296.791 164.948 328.604 198.854 329.586 243.423C329.586 287.008 296.789 321.867 244.144 321.867H243.175C192.51 321.867 159.763 287.01 159.763 243.423C159.763 198.855 193.501 164.948 245.142 164.948H245.143ZM690.223 373.258C789.552 373.258 864.013 438.18 864.013 577.694V838.143H713.06V595.156C713.06 534.096 691.213 492.438 636.584 492.438C594.88 492.438 570.022 520.516 559.108 547.64C555.121 557.344 554.141 570.897 554.141 584.472V838.143H403.188C403.188 838.143 405.169 426.53 403.188 383.91H554.172V448.234C574.232 417.284 610.114 373.257 690.223 373.257V373.258ZM168.667 383.943H319.62V838.145H168.667V383.943V383.943Z"
     })
   });
 };
 var TwitterLogo = () => {
-  return /* @__PURE__ */ jsx38("svg", {
+  return /* @__PURE__ */ jsx39("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 530 570",
     className: "w-[32px]",
-    children: /* @__PURE__ */ jsx38("path", {
+    children: /* @__PURE__ */ jsx39("path", {
       fill: "currentcolor",
       d: "M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"
     })
   });
 };
 var GitHubLogo = () => {
-  return /* @__PURE__ */ jsx38("svg", {
+  return /* @__PURE__ */ jsx39("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 1084 1084",
     className: "w-[30px]",
-    children: /* @__PURE__ */ jsx38("path", {
+    children: /* @__PURE__ */ jsx39("path", {
       fill: "currentcolor",
       d: "M542 0C242.545 0 0 242.545 0 542C0 781.835 155.147 984.408 370.592 1056.22C397.692 1060.97 407.855 1044.71 407.855 1030.48C407.855 1017.61 407.178 974.923 407.178 929.53C271 954.598 235.77 896.332 224.93 865.845C218.832 850.262 192.41 802.16 169.375 789.287C150.405 779.125 123.305 754.057 168.698 753.38C211.38 752.702 241.868 792.675 252.03 808.935C300.81 890.912 378.723 867.878 409.888 853.65C414.63 818.42 428.857 794.707 444.44 781.157C323.845 767.607 197.83 720.86 197.83 513.545C197.83 454.602 218.833 405.822 253.385 367.882C247.965 354.332 228.995 298.777 258.805 224.252C258.805 224.252 304.198 210.025 407.855 279.808C451.215 267.613 497.285 261.515 543.355 261.515C589.425 261.515 635.495 267.613 678.855 279.808C782.513 209.348 827.905 224.252 827.905 224.252C857.715 298.777 838.745 354.332 833.325 367.882C867.878 405.822 888.88 453.925 888.88 513.545C888.88 721.537 762.188 767.607 641.593 781.157C661.24 798.095 678.178 830.615 678.178 881.428C678.178 953.92 677.5 1012.19 677.5 1030.48C677.5 1044.71 687.663 1061.64 714.763 1056.22C822.365 1019.91 915.868 950.759 982.106 858.512C1048.34 766.264 1083.98 655.565 1084 542C1084 242.545 841.455 0 542 0Z"
     })
   });
 };
 var EmailLogo = () => {
-  return /* @__PURE__ */ jsx38("svg", {
+  return /* @__PURE__ */ jsx39("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 1299 1299",
     className: "w-[30px]",
-    children: /* @__PURE__ */ jsx38("path", {
+    children: /* @__PURE__ */ jsx39("path", {
       fill: "currentcolor",
       d: "M1177.22 202.969H121.781C99.3278 202.969 81.1875 221.109 81.1875 243.562V1055.44C81.1875 1077.89 99.3278 1096.03 121.781 1096.03H1177.22C1199.67 1096.03 1217.81 1077.89 1217.81 1055.44V243.562C1217.81 221.109 1199.67 202.969 1177.22 202.969ZM1126.48 343.525V1004.7H172.523V343.525L137.511 316.251L187.366 252.189L241.66 294.432H1057.47L1111.76 252.189L1161.62 316.251L1126.48 343.525V343.525ZM1057.47 294.305L649.5 611.443L241.533 294.305L187.239 252.062L137.384 316.124L172.397 343.398L605.735 680.326C618.197 690.008 633.529 695.263 649.31 695.263C665.091 695.263 680.422 690.008 692.885 680.326L1126.48 343.525L1161.49 316.251L1111.63 252.189L1057.47 294.305Z"
     })
@@ -10254,54 +10599,54 @@ var TeamMemberCard = ({
   return /* @__PURE__ */ jsxs3("div", {
     className: "flex-1 rounded-[15px] flex flex-col md:flex-row gap-2 md:gap-4",
     children: [
-      /* @__PURE__ */ jsx38("img", {
+      /* @__PURE__ */ jsx39("img", {
         src: image,
         className: "w-[250px] h-[250px] rounded-xl border-effect"
       }),
       /* @__PURE__ */ jsxs3("div", {
         className: "flex flex-col border-effect px-4 py-3 bg-pane",
         children: [
-          /* @__PURE__ */ jsx38("h2", {
+          /* @__PURE__ */ jsx39("h2", {
             className: "ext-[1.6em] mb-1 mt-3 text-[var(--ifm-color-primary)] font-brand",
             children: name
           }),
-          /* @__PURE__ */ jsx38("strong", {
+          /* @__PURE__ */ jsx39("strong", {
             className: "font-brand",
             children: title
           }),
-          /* @__PURE__ */ jsx38("div", {
+          /* @__PURE__ */ jsx39("div", {
             className: "mt-5 mb-5 leading-normal font-brand",
             children: description
           }),
-          /* @__PURE__ */ jsx38("div", {
+          /* @__PURE__ */ jsx39("div", {
             className: "flex-1"
           }),
           /* @__PURE__ */ jsxs3("div", {
             className: "gap-3 flex flex-row",
             children: [
-              /* @__PURE__ */ jsx38("a", {
+              /* @__PURE__ */ jsx39("a", {
                 className: "no-underline text-inherit",
                 target: "_blank",
                 href: twitter,
-                children: /* @__PURE__ */ jsx38(TwitterLogo, {})
+                children: /* @__PURE__ */ jsx39(TwitterLogo, {})
               }),
-              /* @__PURE__ */ jsx38("a", {
+              /* @__PURE__ */ jsx39("a", {
                 className: "no-underline text-inherit",
                 target: "_blank",
                 href: linkedin,
-                children: /* @__PURE__ */ jsx38(LinkedInLogo, {})
+                children: /* @__PURE__ */ jsx39(LinkedInLogo, {})
               }),
-              /* @__PURE__ */ jsx38("a", {
+              /* @__PURE__ */ jsx39("a", {
                 className: "no-underline text-inherit",
                 target: "_blank",
                 href: github,
-                children: /* @__PURE__ */ jsx38(GitHubLogo, {})
+                children: /* @__PURE__ */ jsx39(GitHubLogo, {})
               }),
-              /* @__PURE__ */ jsx38("a", {
+              /* @__PURE__ */ jsx39("a", {
                 className: "no-underline text-inherit",
                 target: "_blank",
                 href: `mailto:${email}`,
-                children: /* @__PURE__ */ jsx38(EmailLogo, {})
+                children: /* @__PURE__ */ jsx39(EmailLogo, {})
               })
             ]
           })
@@ -10314,7 +10659,7 @@ var TeamCardsLayout = () => {
   return /* @__PURE__ */ jsxs3("div", {
     className: "flex flex-col gap-12 md:gap-4",
     children: [
-      /* @__PURE__ */ jsx38(TeamMemberCard, {
+      /* @__PURE__ */ jsx39(TeamMemberCard, {
         name: "Jonny Burger",
         title: "Chief Hacker",
         description: "Making cool software for myself and others and getting to know all kinds of different people - that's what makes Remotion my dream job!",
@@ -10324,7 +10669,7 @@ var TeamCardsLayout = () => {
         github: "https://github.com/JonnyBurger",
         email: "jonny@remotion.dev"
       }),
-      /* @__PURE__ */ jsx38(TeamMemberCard, {
+      /* @__PURE__ */ jsx39(TeamMemberCard, {
         name: "Mehmet Ademi",
         title: "Business Manager",
         description: "Transitioning from traditional business, Remotion allowed me to merge my passion for technology and business in a distinctive way.",
@@ -10334,7 +10679,7 @@ var TeamCardsLayout = () => {
         github: "https://github.com/MehmetAdemi",
         email: "mehmet@remotion.dev"
       }),
-      /* @__PURE__ */ jsx38(TeamMemberCard, {
+      /* @__PURE__ */ jsx39(TeamMemberCard, {
         name: "Igor Samokhovets",
         title: "Product Engineer",
         description: "With a background in music industry and a passion for coding, I've been building tools to help musicians create. Remotion is the perfect place to blend my tech skills and creativity.",
@@ -10349,29 +10694,29 @@ var TeamCardsLayout = () => {
 };
 
 // src/components/experts/experts-icons.tsx
-import { jsx as jsx40 } from "react/jsx-runtime";
+import { jsx as jsx41 } from "react/jsx-runtime";
 var DiscordLogo = () => {
-  return /* @__PURE__ */ jsx40("svg", {
+  return /* @__PURE__ */ jsx41("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
     style: {
       width: 30,
       marginRight: 10
     },
-    children: /* @__PURE__ */ jsx40("path", {
+    children: /* @__PURE__ */ jsx41("path", {
       fill: "white",
       d: "M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"
     })
   });
 };
 var PersonalWebsite = () => {
-  return /* @__PURE__ */ jsx40("svg", {
+  return /* @__PURE__ */ jsx41("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 576 576",
     style: {
       width: 30
     },
-    children: /* @__PURE__ */ jsx40("path", {
+    children: /* @__PURE__ */ jsx41("path", {
       fill: "currentcolor",
       d: "M317.9 422.7C296.4 465.6 272.7 480 256 480c-7.9 0-17.3-3.2-27.3-11l-6.9 18.6c-2.9 7.8-7.7 14.7-13.9 19.9c15.6 3 31.6 4.5 48.1 4.5c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256c0 16.4 1.5 32.5 4.5 48.1c5.3-6.2 12.1-11 19.9-13.9l9.6-3.5c-1.4-10-2.1-20.2-2.1-30.6c0-22.2 3.2-43.7 9.3-64H132c-2.5 19.2-3.9 39.3-4 60l32.2-11.9c.5-16.7 1.9-32.8 4.1-48.1H347.7c2.8 20.2 4.3 41.7 4.3 64s-1.5 43.8-4.3 64H283.6l-11.8 32H342c-5.9 27-14.2 50.9-24.1 70.7zM194.1 89.3C215.6 46.4 239.3 32 256 32s40.4 14.4 61.9 57.3c9.9 19.8 18.2 43.7 24.1 70.7H170c5.9-27 14.2-50.9 24.1-70.7zM384 256c0-22.1-1.4-43.5-4-64h90.8c6 20.3 9.3 41.8 9.3 64s-3.2 43.7-9.3 64H380c2.6-20.5 4-41.9 4-64zm-9.3-96c-9.6-47.6-26.2-88-47.2-116.3c57.8 19.5 105 61.8 130.9 116.3H374.7zM53.6 160c25.9-54.5 73.1-96.9 130.9-116.3c-21 28.3-37.5 68.8-47.2 116.3H53.6zM374.7 352h83.8c-25.9 54.5-73.1 96.9-130.9 116.3c21-28.3 37.6-68.8 47.2-116.3zM271 261.5c2.2-5.9 .7-12.4-3.7-16.8s-11-5.9-16.8-3.7l-215 79.2c-6.2 2.3-10.3 8.1-10.5 14.7s3.8 12.6 9.9 15.1l74 30.5L4.7 484.7c-6.2 6.2-6.2 16.4 0 22.6s16.4 6.2 22.6 0L131.5 403.1l30.5 74c2.5 6.1 8.5 10 15.1 9.9s12.4-4.3 14.7-10.5l79.2-215zM143.3 360L85.1 336 229 283 176 426.9l-24-58.2c-1.6-3.9-4.8-7.1-8.7-8.7z"
     })
@@ -10379,7 +10724,7 @@ var PersonalWebsite = () => {
 };
 
 // src/components/experts/ExpertsPage.tsx
-import { jsx as jsx41, jsxs as jsxs4, Fragment } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs4, Fragment } from "react/jsx-runtime";
 var arrowIcon = {
   height: 16,
   marginLeft: 10
@@ -10413,10 +10758,10 @@ var ExpertCard = ({ expert, Link }) => {
   return /* @__PURE__ */ jsxs4("div", {
     className: "flex-1 rounded-[15px] flex flex-col md:flex-row gap-2 md:gap-4",
     children: [
-      /* @__PURE__ */ jsx41(Link, {
+      /* @__PURE__ */ jsx42(Link, {
         href: `/experts/${expert.slug}`,
         className: "no-underline text-inherit",
-        children: /* @__PURE__ */ jsx41("img", {
+        children: /* @__PURE__ */ jsx42("img", {
           src: expert.image,
           alt: `Profile picture of ${expert.name}`,
           className: "w-[250px] h-[250px] rounded-xl border-effect object-cover"
@@ -10425,15 +10770,15 @@ var ExpertCard = ({ expert, Link }) => {
       /* @__PURE__ */ jsxs4("div", {
         className: "flex flex-col border-effect px-4 py-3 bg-pane flex-1",
         children: [
-          /* @__PURE__ */ jsx41(Link, {
+          /* @__PURE__ */ jsx42(Link, {
             href: `/experts/${expert.slug}`,
             className: "no-underline text-inherit",
-            children: /* @__PURE__ */ jsx41("h2", {
+            children: /* @__PURE__ */ jsx42("h2", {
               className: "text-[1.6em] mb-1 mt-3 text-[var(--ifm-color-primary)] font-brand",
               children: expert.name
             })
           }),
-          /* @__PURE__ */ jsx41("div", {
+          /* @__PURE__ */ jsx42("div", {
             className: "mt-2 mb-3 leading-normal font-brand",
             children: expert.description
           }),
@@ -10446,11 +10791,11 @@ var ExpertCard = ({ expert, Link }) => {
                 children: [
                   "View profile",
                   " ",
-                  /* @__PURE__ */ jsx41("svg", {
+                  /* @__PURE__ */ jsx42("svg", {
                     style: arrowIcon,
                     xmlns: "http://www.w3.org/2000/svg",
                     viewBox: "0 0 448 512",
-                    children: /* @__PURE__ */ jsx41("path", {
+                    children: /* @__PURE__ */ jsx42("path", {
                       fill: "currentColor",
                       d: "M438.6 278.6l-160 160C272.4 444.9 264.2 448 256 448s-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L338.8 288H32C14.33 288 .0016 273.7 .0016 256S14.33 224 32 224h306.8l-105.4-105.4c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l160 160C451.1 245.9 451.1 266.1 438.6 278.6z"
                     })
@@ -10459,7 +10804,7 @@ var ExpertCard = ({ expert, Link }) => {
               }),
               expert.videocall ? /* @__PURE__ */ jsxs4(Fragment, {
                 children: [
-                  /* @__PURE__ */ jsx41("br", {}),
+                  /* @__PURE__ */ jsx42("br", {}),
                   /* @__PURE__ */ jsxs4("a", {
                     className: "no-underline text-brand font-brand font-bold inline-flex flex-row items-center",
                     target: "_blank",
@@ -10467,11 +10812,11 @@ var ExpertCard = ({ expert, Link }) => {
                     children: [
                       "Book a call",
                       " ",
-                      /* @__PURE__ */ jsx41("svg", {
+                      /* @__PURE__ */ jsx42("svg", {
                         style: arrowIcon,
                         xmlns: "http://www.w3.org/2000/svg",
                         viewBox: "0 0 448 512",
-                        children: /* @__PURE__ */ jsx41("path", {
+                        children: /* @__PURE__ */ jsx42("path", {
                           fill: "currentColor",
                           d: "M438.6 278.6l-160 160C272.4 444.9 264.2 448 256 448s-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L338.8 288H32C14.33 288 .0016 273.7 .0016 256S14.33 224 32 224h306.8l-105.4-105.4c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l160 160C451.1 245.9 451.1 266.1 438.6 278.6z"
                         })
@@ -10482,48 +10827,48 @@ var ExpertCard = ({ expert, Link }) => {
               }) : null
             ]
           }),
-          /* @__PURE__ */ jsx41("div", {
+          /* @__PURE__ */ jsx42("div", {
             className: "flex-1"
           }),
           /* @__PURE__ */ jsxs4("div", {
             className: "gap-3 flex flex-row flex-wrap",
             children: [
-              expert.website ? /* @__PURE__ */ jsx41("a", {
+              expert.website ? /* @__PURE__ */ jsx42("a", {
                 className: "no-underline text-inherit",
                 target: "_blank",
                 href: expert.website,
-                children: /* @__PURE__ */ jsx41(PersonalWebsite, {})
+                children: /* @__PURE__ */ jsx42(PersonalWebsite, {})
               }) : null,
-              expert.x ? /* @__PURE__ */ jsx41("a", {
+              expert.x ? /* @__PURE__ */ jsx42("a", {
                 className: "no-underline text-inherit",
                 target: "_blank",
                 href: `https://x.com/${expert.x}`,
-                children: /* @__PURE__ */ jsx41(TwitterLogo, {})
+                children: /* @__PURE__ */ jsx42(TwitterLogo, {})
               }) : null,
-              expert.github ? /* @__PURE__ */ jsx41("a", {
+              expert.github ? /* @__PURE__ */ jsx42("a", {
                 className: "no-underline text-inherit",
                 target: "_blank",
                 href: `https://github.com/${expert.github}`,
-                children: /* @__PURE__ */ jsx41(GitHubLogo, {})
+                children: /* @__PURE__ */ jsx42(GitHubLogo, {})
               }) : null,
-              expert.linkedin ? /* @__PURE__ */ jsx41("a", {
+              expert.linkedin ? /* @__PURE__ */ jsx42("a", {
                 className: "no-underline text-inherit",
                 target: "_blank",
                 href: `https://www.linkedin.com/${expert.linkedin}`,
-                children: /* @__PURE__ */ jsx41(LinkedInLogo, {})
+                children: /* @__PURE__ */ jsx42(LinkedInLogo, {})
               }) : null,
-              expert.email ? /* @__PURE__ */ jsx41("a", {
+              expert.email ? /* @__PURE__ */ jsx42("a", {
                 className: "no-underline text-inherit",
                 target: "_blank",
                 href: `mailto:${expert.email}`,
-                children: /* @__PURE__ */ jsx41(EmailLogo, {})
+                children: /* @__PURE__ */ jsx42(EmailLogo, {})
               }) : null,
-              expert.discord ? /* @__PURE__ */ jsx41("a", {
+              expert.discord ? /* @__PURE__ */ jsx42("a", {
                 className: "no-underline text-inherit",
                 target: "_blank",
                 href: `https://discord.com/users/${expert.discord.userId}`,
                 title: `@${expert.discord.username} on Discord`,
-                children: /* @__PURE__ */ jsx41(DiscordLogo, {})
+                children: /* @__PURE__ */ jsx42(DiscordLogo, {})
               }) : null
             ]
           })
@@ -10533,18 +10878,18 @@ var ExpertCard = ({ expert, Link }) => {
   });
 };
 var ExpertsPageContent = ({ Link }) => {
-  const expertsInRandomOrder = useMemo39(() => {
+  const expertsInRandomOrder = useMemo40(() => {
     if (typeof window === "undefined") {
       return [];
     }
     return experts.sort((a, b) => random(a.name + todayHash) - random(b.name + todayHash));
   }, []);
-  return /* @__PURE__ */ jsx41("div", {
+  return /* @__PURE__ */ jsx42("div", {
     className: "relative bg-[var(--background)]",
     children: /* @__PURE__ */ jsxs4("div", {
       style: wrapperStyle,
       children: [
-        /* @__PURE__ */ jsx41("h1", {
+        /* @__PURE__ */ jsx42("h1", {
           className: "experts-pagetitle",
           children: "Find a Remotion Expert"
         }),
@@ -10552,16 +10897,16 @@ var ExpertsPageContent = ({ Link }) => {
           className: "experts-tagline",
           children: [
             "Get help by booking a call or hiring these freelancers to work on your Remotion project.",
-            /* @__PURE__ */ jsx41("br", {}),
+            /* @__PURE__ */ jsx42("br", {}),
             "They appear in random order.",
             " "
           ]
         }),
-        /* @__PURE__ */ jsx41("p", {
+        /* @__PURE__ */ jsx42("p", {
           className: "experts-tagline",
-          children: /* @__PURE__ */ jsx41("a", {
+          children: /* @__PURE__ */ jsx42("a", {
             href: "mailto:hi@remotion.dev?subject=Remotion+Experts+directory",
-            children: /* @__PURE__ */ jsx41("strong", {
+            children: /* @__PURE__ */ jsx42("strong", {
               children: "Are you available for hire? Let us know!"
             })
           })
@@ -10578,20 +10923,20 @@ var ExpertsPageContent = ({ Link }) => {
                 /* @__PURE__ */ jsxs4("g", {
                   clipPath: "url(#clip0_1_2)",
                   children: [
-                    /* @__PURE__ */ jsx41("path", {
+                    /* @__PURE__ */ jsx42("path", {
                       d: "M511.5 213C532.991 213 551.678 225.088 561.08 242.842C580.293 236.943 602.018 241.615 617.201 256.799C632.385 271.982 637.057 293.765 631.158 312.92C648.912 322.322 661 341.009 661 362.5C661 383.991 648.912 402.678 631.158 412.08C637.057 431.293 632.385 453.018 617.201 468.201C602.018 483.385 580.235 488.057 561.08 482.158C551.678 499.912 532.991 512 511.5 512C490.009 512 471.322 499.912 461.92 482.158C442.707 488.057 420.982 483.385 405.799 468.201C390.615 453.018 385.943 431.235 391.842 412.08C374.088 402.678 362 383.991 362 362.5C362 341.009 374.088 322.322 391.842 312.92C385.943 293.707 390.615 271.982 405.799 256.799C420.982 241.615 442.765 236.943 461.92 242.842C471.322 225.088 490.009 213 511.5 213ZM568.146 344.396L578.074 334.469L558.219 314.672L548.291 324.599L492.812 380.078L470.037 357.303L460.109 347.375L440.312 367.172L450.24 377.1L482.943 409.803L492.871 419.73L502.799 409.803L568.146 344.396Z",
                       fill: "currentcolor"
                     }),
-                    /* @__PURE__ */ jsx41("path", {
+                    /* @__PURE__ */ jsx42("path", {
                       d: "M184 48H328C332.4 48 336 51.6 336 56V96H176V56C176 51.6 179.6 48 184 48ZM128 56V96H64C28.7 96 0 124.7 0 160V256H192H352H360.2C392.5 216.9 441.3 192 496 192C501.4 192 506.7 192.2 512 192.7V160C512 124.7 483.3 96 448 96H384V56C384 25.1 358.9 0 328 0H184C153.1 0 128 25.1 128 56ZM320 352H224C206.3 352 192 337.7 192 320V288H0V416C0 451.3 28.7 480 64 480H360.2C335.1 449.6 320 410.5 320 368C320 362.6 320.2 357.3 320.7 352H320Z",
                       fill: "currentcolor"
                     })
                   ]
                 }),
-                /* @__PURE__ */ jsx41("defs", {
-                  children: /* @__PURE__ */ jsx41("clipPath", {
+                /* @__PURE__ */ jsx42("defs", {
+                  children: /* @__PURE__ */ jsx42("clipPath", {
                     id: "clip0_1_2",
-                    children: /* @__PURE__ */ jsx41("rect", {
+                    children: /* @__PURE__ */ jsx42("rect", {
                       width: "661",
                       height: "512",
                       fill: "white"
@@ -10605,22 +10950,22 @@ var ExpertsPageContent = ({ Link }) => {
               children: [
                 "Remotion Experts are independent freelancers with proven Remotion expertise and portfolios. However,",
                 " ",
-                /* @__PURE__ */ jsx41("strong", {
+                /* @__PURE__ */ jsx42("strong", {
                   children: " perform due diligence "
                 }),
                 " before hiring. ",
-                /* @__PURE__ */ jsx41("br", {}),
+                /* @__PURE__ */ jsx42("br", {}),
                 " ",
                 "Remotion does not arbitrate disputes between experts and clients."
               ]
             })
           ]
         }),
-        /* @__PURE__ */ jsx41("br", {}),
-        /* @__PURE__ */ jsx41("div", {
+        /* @__PURE__ */ jsx42("br", {}),
+        /* @__PURE__ */ jsx42("div", {
           className: "flex flex-col gap-12 md:gap-4",
           children: expertsInRandomOrder.map((e) => {
-            return /* @__PURE__ */ jsx41(ExpertCard, {
+            return /* @__PURE__ */ jsx42(ExpertCard, {
               expert: e,
               Link
             }, e.name);