@remotion/promo-pages 4.0.491 → 4.0.493

package/dist/Homepage.js

@@ -941,6 +941,7 @@ import * as React6 from "react";
 import React7, { useMemo as useMemo6, useRef as useRef2 } from "react";
 import { useContext as useContext8, useMemo as useMemo7 } from "react";
 import { jsx as jsx7 } from "react/jsx-runtime";
+import React9 from "react";
 import {
   forwardRef as forwardRef3,
   useCallback as useCallback6,
@@ -966,11 +967,11 @@ import { useContext as useContext13 } from "react";
 import { useContext as useContext12, useMemo as useMemo10 } from "react";
 import { jsx as jsx9 } from "react/jsx-runtime";
 import { createContext as createContext14 } from "react";
-import React11, { useCallback as useCallback5, useMemo as useMemo12, useRef as useRef4, useState as useState3 } from "react";
+import React12, { useCallback as useCallback5, useMemo as useMemo12, useRef as useRef4, useState as useState3 } from "react";
 import { jsx as jsx10 } from "react/jsx-runtime";
-import React12, { createContext as createContext15 } from "react";
+import React13, { createContext as createContext15 } from "react";
 import { jsx as jsx11 } from "react/jsx-runtime";
-import React13, { forwardRef as forwardRef2, useContext as useContext16, useMemo as useMemo13, useState as useState4 } from "react";
+import React14, { forwardRef as forwardRef2, useContext as useContext16, useMemo as useMemo13, useState as useState4 } from "react";
 import { useContext as useContext15, useRef as useRef5 } from "react";
 import { createContext as createContext16 } from "react";
 import { jsx as jsx12 } from "react/jsx-runtime";
@@ -982,7 +983,7 @@ import {
   useRef as useRef9,
   useState as useState6
 } from "react";
-import React15, { useCallback as useCallback7, useImperativeHandle, useMemo as useMemo16, useRef as useRef8 } from "react";
+import React16, { useCallback as useCallback7, useImperativeHandle, useMemo as useMemo16, useRef as useRef8 } from "react";
 import { useEffect as useEffect4, useMemo as useMemo15, useRef as useRef7 } from "react";
 import { jsx as jsx13 } from "react/jsx-runtime";
 import { jsx as jsx14 } from "react/jsx-runtime";
@@ -998,7 +999,7 @@ import {
 } from "react";
 import { jsx as jsx15 } from "react/jsx-runtime";
 import { forwardRef as forwardRef7, useCallback as useCallback14, useContext as useContext30 } from "react";
-import React16, { createContext as createContext18, useMemo as useMemo18 } from "react";
+import React17, { createContext as createContext18, useMemo as useMemo18 } from "react";
 import { jsx as jsx16 } from "react/jsx-runtime";
 import { useContext as useContext19 } from "react";
 import { createContext as createContext19, useEffect as useEffect6, useState as useState9 } from "react";
@@ -1006,7 +1007,7 @@ import { jsx as jsx17 } from "react/jsx-runtime";
 import { createContext as createContext20, useMemo as useMemo19, useReducer } from "react";
 import { jsx as jsx18 } from "react/jsx-runtime";
 import { useCallback as useCallback13 } from "react";
-import React22, {
+import React23, {
   forwardRef as forwardRef5,
   useContext as useContext28,
   useEffect as useEffect14,
@@ -1016,7 +1017,7 @@ import React22, {
   useState as useState14
 } from "react";
 import { useContext as useContext21, useLayoutEffect as useLayoutEffect5, useRef as useRef14 } from "react";
-import React19, {
+import React20, {
   createContext as createContext21,
   createRef as createRef2,
   useCallback as useCallback9,
@@ -1040,7 +1041,7 @@ import {
 } from "react";
 import { useCallback as useCallback11, useMemo as useMemo25, useRef as useRef16 } from "react";
 import { useContext as useContext25, useMemo as useMemo24 } from "react";
-import React20, {
+import React21, {
   useCallback as useCallback10,
   useContext as useContext24,
   useEffect as useEffect9,
@@ -1050,7 +1051,7 @@ import React20, {
   useState as useState12
 } from "react";
 import { jsx as jsx20 } from "react/jsx-runtime";
-import React21 from "react";
+import React22 from "react";
 import { useEffect as useEffect10, useState as useState13 } from "react";
 import { useEffect as useEffect11, useRef as useRef17 } from "react";
 import { useEffect as useEffect13 } from "react";
@@ -1108,10 +1109,10 @@ import {
   useState as useState18
 } from "react";
 import { jsx as jsx28 } from "react/jsx-runtime";
-import React29, { forwardRef as forwardRef12, useCallback as useCallback20, useRef as useRef25 } from "react";
+import React30, { forwardRef as forwardRef12, useCallback as useCallback20, useRef as useRef25 } from "react";
 import { jsx as jsx29 } from "react/jsx-runtime";
 import { createRef as createRef3 } from "react";
-import React30 from "react";
+import React31 from "react";
 import {
   useCallback as useCallback21,
   useImperativeHandle as useImperativeHandle8,
@@ -1120,14 +1121,14 @@ import {
   useState as useState19
 } from "react";
 import { jsx as jsx30 } from "react/jsx-runtime";
-import React31 from "react";
+import React32 from "react";
 import { useMemo as useMemo34 } from "react";
 import { createContext as createContext24, useContext as useContext34, useMemo as useMemo33 } from "react";
 import { jsx as jsx31 } from "react/jsx-runtime";
 import { jsx as jsx32 } from "react/jsx-runtime";
-import React33 from "react";
-import React34, { createContext as createContext25 } from "react";
-import React35, { useContext as useContext35 } from "react";
+import React34 from "react";
+import React35, { createContext as createContext25 } from "react";
+import React36, { useContext as useContext35 } from "react";
 import { useCallback as useCallback24 } from "react";
 import {
   useCallback as useCallback22,
@@ -1138,7 +1139,7 @@ import {
   useState as useState20
 } from "react";
 import { jsx as jsx33 } from "react/jsx-runtime";
-import React37, {
+import React38, {
   forwardRef as forwardRef13,
   useCallback as useCallback23,
   useContext as useContext37,
@@ -1151,15 +1152,15 @@ import React37, {
 import { useEffect as useEffect18 } from "react";
 import { jsx as jsx34 } from "react/jsx-runtime";
 import { jsx as jsx35 } from "react/jsx-runtime";
-import React39, { useMemo as useMemo37 } from "react";
+import React40, { useMemo as useMemo37 } from "react";
 import { jsx as jsx36 } from "react/jsx-runtime";
-import React41, {
+import React42, {
   forwardRef as forwardRef14,
   useMemo as useMemo38
 } from "react";
-import React40 from "react";
+import React41 from "react";
 import { jsx as jsx37, jsxs as jsxs3, Fragment } from "react/jsx-runtime";
-import React42 from "react";
+import React43 from "react";
 import { forwardRef as forwardRef16, useCallback as useCallback25, useContext as useContext39 } from "react";
 import {
   forwardRef as forwardRef15,
@@ -1821,6 +1822,7 @@ var useResolvedVideoConfig = (preferredCompositionId) => {
     if (currentCompositionMetadata) {
       return {
         type: "success",
+        metadataSource: null,
         result: {
           ...currentCompositionMetadata,
           id: composition.id,
@@ -1838,6 +1840,7 @@ var useResolvedVideoConfig = (preferredCompositionId) => {
       validateDimension(composition.height, "height", `in <Composition id="${composition.id}">`);
       return {
         type: "success",
+        metadataSource: null,
         result: {
           width: composition.width,
           height: composition.height,
@@ -2237,6 +2240,7 @@ var InnerComposition = ({
   }
   const { folderName, parentName } = useContext9(FolderContext);
   const stack = compProps.stack ?? null;
+  const componentFromProps = "component" in compProps ? compProps.component : null;
   useEffect2(() => {
     if (!id) {
       throw new Error("No id for composition passed.");
@@ -2254,6 +2258,7 @@ var InnerComposition = ({
       defaultProps: serializeThenDeserializeInStudio(defaultProps ?? {}),
       nonce: nonce.get(),
       parentFolderName: parentName,
+      componentFromProps,
       schema: schema ?? null,
       calculateMetadata: compProps.calculateMetadata ?? null,
       stack
@@ -2272,6 +2277,7 @@ var InnerComposition = ({
     width,
     nonce,
     parentName,
+    componentFromProps,
     schema,
     compProps.calculateMetadata,
     stack,
@@ -2330,11 +2336,30 @@ var Composition = (props) => {
   });
 };
 var componentsToAddStacksTo = [];
+var sequenceComponent = null;
 var getComponentsToAddStacksTo = () => componentsToAddStacksTo;
 var addSequenceStackTraces = (component) => {
   componentsToAddStacksTo.push(component);
 };
-var VERSION = "4.0.491";
+var setSequenceComponent = (component) => {
+  sequenceComponent = component;
+};
+var getSequenceComponent = () => sequenceComponent;
+var getSingleChildComponent = (children) => {
+  const mountedChildren = React9.Children.toArray(children);
+  if (mountedChildren.length !== 1) {
+    return null;
+  }
+  const child = mountedChildren[0];
+  if (!React9.isValidElement(child)) {
+    return null;
+  }
+  if (typeof child.type !== "function" && typeof child.type !== "object") {
+    return null;
+  }
+  return child.type;
+};
+var VERSION = "4.0.493";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -2934,7 +2959,7 @@ var sequenceSchemaDefaultLayoutNone = {
 var PremountContext = createContext14({
   premountFramesRemaining: 0
 });
-var SequenceManager = React11.createContext({
+var SequenceManager = React12.createContext({
   registerSequence: () => {
     throw new Error("SequenceManagerContext not initialized");
   },
@@ -2943,19 +2968,19 @@ var SequenceManager = React11.createContext({
   },
   sequences: []
 });
-var SequenceManagerRefContext = React11.createContext({
+var SequenceManagerRefContext = React12.createContext({
   current: []
 });
 var makeSequencePropsSubscriptionKey = (key) => {
   return `${key.absolutePath}\x00${key.nodePath.join(".")}\x00${key.sequenceKeys.join(".")}\x00${key.effectKeys.map((keys) => keys.join(".")).join(".")}`;
 };
-var VisualModePropStatusesContext = React11.createContext({
+var VisualModePropStatusesContext = React12.createContext({
   propStatuses: {}
 });
-var VisualModePropStatusesRefContext = React11.createContext({
+var VisualModePropStatusesRefContext = React12.createContext({
   current: {}
 });
-var VisualModeDragOverridesContext = React11.createContext({
+var VisualModeDragOverridesContext = React12.createContext({
   getDragOverrides: () => {
     throw new Error("VisualModeDragOverridesContext not initialized");
   },
@@ -2963,7 +2988,7 @@ var VisualModeDragOverridesContext = React11.createContext({
     throw new Error("VisualModeDragOverridesContext not initialized");
   }
 });
-var VisualModeSettersContext = React11.createContext({
+var VisualModeSettersContext = React12.createContext({
   setDragOverrides: () => {
     throw new Error("VisualModeSettersContext not initialized");
   },
@@ -3127,7 +3152,7 @@ var IsNotInsideSeriesProvider = ({ children }) => {
   });
 };
 var useRequireToBeInsideSeries = () => {
-  const isInsideSeries = React12.useContext(IsInsideSeriesContext);
+  const isInsideSeries = React13.useContext(IsInsideSeriesContext);
   if (!isInsideSeries) {
     throw new Error("This component must be inside a <Series /> component.");
   }
@@ -5196,6 +5221,9 @@ var computeEffectiveSchemaValuesDotNotation = ({
         shouldResortToDefaultValueIfUndefined: false
       });
     }
+    if (field?.type === "asset" && typeof value === "string" && value.startsWith(FILE_TOKEN)) {
+      value = `${window.remotion_staticBase}/${value.slice(FILE_TOKEN.length)}`;
+    }
     if (value === undefined) {
       propsToDelete.add(key);
     }
@@ -5294,7 +5322,7 @@ var withInteractivitySchema = ({
   const Wrapped = forwardRef2((props, ref) => {
     const env = useRemotionEnvironment();
     if (!env.isStudio || env.isReadOnlyStudio || env.isRendering) {
-      return React13.createElement(Component, {
+      return React14.createElement(Component, {
         ...props,
         controls: null,
         ref
@@ -5305,7 +5333,7 @@ var withInteractivitySchema = ({
     const nodePathMapping = useContext16(OverrideIdsToNodePathsGettersContext);
     const frame = useCurrentFrame();
     if (props.controls) {
-      return React13.createElement(Component, {
+      return React14.createElement(Component, {
         ...props,
         ref
       });
@@ -5363,7 +5391,7 @@ var withInteractivitySchema = ({
       schemaKeys: activeKeys,
       propsToDelete
     });
-    return React13.createElement(Component, {
+    return React14.createElement(Component, {
       ...mergedProps,
       controls,
       ref
@@ -5389,6 +5417,7 @@ var RegularSequenceRefForwardingFunction = ({
   _remotionInternalLoopDisplay: loopDisplay,
   _remotionInternalStack: stack,
   _remotionInternalDocumentationLink: documentationLink,
+  _remotionInternalSingleChildComponent: singleChildComponent,
   _remotionInternalPremountDisplay: premountDisplay,
   _remotionInternalPostmountDisplay: postmountDisplay,
   _remotionInternalIsMedia: isMedia,
@@ -5535,7 +5564,8 @@ var RegularSequenceRefForwardingFunction = ({
           getStack: () => stackRef.current,
           refForOutline: refForOutline ?? null,
           isInsideSeries,
-          frozenFrame: registeredFrozenFrame
+          frozenFrame: registeredFrozenFrame,
+          singleChildComponent: singleChildComponent ?? null
         });
       } else {
         registerSequence({
@@ -5565,7 +5595,8 @@ var RegularSequenceRefForwardingFunction = ({
           refForOutline: refForOutline ?? null,
           isInsideSeries,
           frozenFrame: registeredFrozenFrame,
-          frozenMediaFrame
+          frozenMediaFrame,
+          singleChildComponent: singleChildComponent ?? null
         });
       }
       return () => {
@@ -5592,7 +5623,8 @@ var RegularSequenceRefForwardingFunction = ({
       effects: _remotionInternalEffects ?? EMPTY_EFFECTS,
       refForOutline: refForOutline ?? null,
       isInsideSeries,
-      frozenFrame: registeredFrozenFrame
+      frozenFrame: registeredFrozenFrame,
+      singleChildComponent: singleChildComponent ?? null
     });
     return () => {
       unregisterSequence(id);
@@ -5625,7 +5657,8 @@ var RegularSequenceRefForwardingFunction = ({
     registeredFrozenFrame,
     startMediaFrom,
     mediaFrameAtSequenceZero,
-    frozenMediaFrame
+    frozenMediaFrame,
+    singleChildComponent
   ]);
   const endThreshold = Math.ceil(cumulatedFrom + from + durationInFrames - 1);
   const content = absoluteFrame < cumulatedFrom + from ? null : absoluteFrame > endThreshold ? null : children;
@@ -6127,7 +6160,7 @@ var CanvasRefForwardingFunction = ({ width, height, fit, className, style, effec
     ...props
   });
 };
-var Canvas = React15.forwardRef(CanvasRefForwardingFunction);
+var Canvas = React16.forwardRef(CanvasRefForwardingFunction);
 var CACHE_SIZE = 5;
 var getActualTime = ({
   loopBehavior,
@@ -6288,6 +6321,12 @@ var resolveAnimatedImageSource = (src) => {
   return new URL(src, window.origin).href;
 };
 var animatedImageSchema = {
+  src: {
+    type: "asset",
+    default: undefined,
+    description: "Source",
+    keyframable: false
+  },
   ...baseSchema,
   playbackRate: {
     type: "number",
@@ -6705,7 +6744,7 @@ var calculateMediaDuration = ({
 };
 var LoopContext = createContext18(null);
 var useLoop = () => {
-  return React16.useContext(LoopContext);
+  return React17.useContext(LoopContext);
 };
 var Loop = ({
   durationInFrames,
@@ -7556,7 +7595,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
       };
     });
   }, [audioContext, numberOfAudioTags]);
-  const effectToUse = React19.useInsertionEffect ?? React19.useLayoutEffect;
+  const effectToUse = React20.useInsertionEffect ?? React20.useLayoutEffect;
   effectToUse(() => {
     return () => {
       requestAnimationFrame(() => {
@@ -7726,7 +7765,7 @@ var useSharedAudio = ({
     if (tagsCtx && tagsCtx.numberOfAudioTags > 0) {
       return tagsCtx.registerAudio({ aud, audioId, premounting, postmounting });
     }
-    const el = React19.createRef();
+    const el = React20.createRef();
     const mediaElementSourceNode = audioCtx?.audioContext ? makeSharedElementSourceNode({
       audioContext: audioCtx.audioContext,
       ref: el
@@ -7745,7 +7784,7 @@ var useSharedAudio = ({
       }
     };
   });
-  const effectToUse = React19.useInsertionEffect ?? React19.useLayoutEffect;
+  const effectToUse = React20.useInsertionEffect ?? React20.useLayoutEffect;
   if (typeof document !== "undefined") {
     effectToUse(() => {
       if (tagsCtx && tagsCtx.numberOfAudioTags > 0) {
@@ -8297,7 +8336,7 @@ var useBufferManager = (logLevel, mountTime) => {
     return { addBlock, listenForBuffering, listenForResume, buffering };
   }, [addBlock, buffering, listenForBuffering, listenForResume]);
 };
-var BufferingContextReact = React20.createContext(null);
+var BufferingContextReact = React21.createContext(null);
 var BufferingProvider = ({ children }) => {
   const { logLevel, mountTime } = useContext24(LogLevelContext);
   const bufferManager = useBufferManager(logLevel ?? "info", mountTime);
@@ -8510,7 +8549,7 @@ var getMediaSyncAction = (input) => {
   return { type: "none" };
 };
 var useCurrentTimeOfMediaTagWithUpdateTimeStamp = (mediaRef) => {
-  const lastUpdate = React21.useRef({
+  const lastUpdate = React22.useRef({
     time: mediaRef.current?.currentTime ?? 0,
     lastUpdate: performance.now()
   });
@@ -9263,7 +9302,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     volume: userPreferredVolume,
     shouldUseWebAudioApi: useWebAudioApi ?? false
   });
-  const effectToUse = React22.useInsertionEffect ?? React22.useLayoutEffect;
+  const effectToUse = React23.useInsertionEffect ?? React23.useLayoutEffect;
   effectToUse(() => {
     return () => {
       requestAnimationFrame(() => {
@@ -10809,6 +10848,12 @@ var NativeImgInner = ({
 };
 var CanvasImageWithPrivateProps = CanvasImage;
 var imgSchema = {
+  src: {
+    type: "asset",
+    default: undefined,
+    description: "Source",
+    keyframable: false
+  },
   ...baseSchema,
   ...transformSchema
 };
@@ -11019,7 +11064,7 @@ var makeInteractiveElement = (tag, displayName) => {
       _remotionInternalStack: stack,
       _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/interactive",
       outlineRef: refForOutline,
-      children: React29.createElement(tag, {
+      children: React30.createElement(tag, {
         ...props2,
         ref: callbackRef
       })
@@ -11083,7 +11128,7 @@ var Interactive = {
   Text: makeInteractiveElement("text", "<Interactive.Text>"),
   Ul: makeInteractiveElement("ul", "<Interactive.Ul>")
 };
-var compositionsRef = React30.createRef();
+var compositionsRef = React31.createRef();
 var CompositionManagerProvider = ({
   children,
   onlyRenderComposition,
@@ -11232,7 +11277,7 @@ var REMOTION_STUDIO_CONTAINER_ELEMENT = "__remotion-studio-container";
 var getPreviewDomElement = () => {
   return document.getElementById(REMOTION_STUDIO_CONTAINER_ELEMENT);
 };
-var MaxMediaCacheSizeContext = React31.createContext(null);
+var MaxMediaCacheSizeContext = React32.createContext(null);
 var Root = null;
 var listeners = [];
 var getRoot = () => {
@@ -11400,7 +11445,46 @@ var validateCalculated = ({
     defaultSampleRate
   };
 };
-var resolveVideoConfig = ({
+var makeVideoConfigWithMetadata = ({
+  calculated,
+  compositionDurationInFrames,
+  compositionFps,
+  compositionHeight,
+  compositionId,
+  compositionWidth,
+  defaultProps,
+  originalProps
+}) => {
+  const data = validateCalculated({
+    calculated,
+    compositionDurationInFrames,
+    compositionFps,
+    compositionHeight,
+    compositionWidth,
+    compositionId
+  });
+  return {
+    metadataSource: {
+      durationInFrames: calculated?.durationInFrames === undefined ? "composition" : "calculate-metadata",
+      fps: calculated?.fps === undefined ? "composition" : "calculate-metadata",
+      height: calculated?.height === undefined ? "composition" : "calculate-metadata",
+      width: calculated?.width === undefined ? "composition" : "calculate-metadata"
+    },
+    videoConfig: {
+      ...data,
+      id: compositionId,
+      defaultProps: serializeThenDeserializeInStudio(defaultProps ?? {}),
+      props: serializeThenDeserializeInStudio(calculated?.props ?? originalProps),
+      defaultCodec: data.defaultCodec ?? null,
+      defaultOutName: data.defaultOutName ?? null,
+      defaultVideoImageFormat: data.defaultVideoImageFormat ?? null,
+      defaultPixelFormat: data.defaultPixelFormat ?? null,
+      defaultProResProfile: data.defaultProResProfile ?? null,
+      defaultSampleRate: data.defaultSampleRate ?? null
+    }
+  };
+};
+var resolveVideoConfigWithMetadata = ({
   calculateMetadata,
   signal,
   defaultProps,
@@ -11420,76 +11504,48 @@ var resolveVideoConfig = ({
   }) : null;
   if (calculatedProm !== null && typeof calculatedProm === "object" && "then" in calculatedProm) {
     return calculatedProm.then((c2) => {
-      const {
-        height,
-        width,
-        durationInFrames,
-        fps,
-        defaultCodec,
-        defaultOutName,
-        defaultVideoImageFormat,
-        defaultPixelFormat,
-        defaultProResProfile,
-        defaultSampleRate
-      } = validateCalculated({
+      return makeVideoConfigWithMetadata({
         calculated: c2,
         compositionDurationInFrames,
         compositionFps,
         compositionHeight,
         compositionWidth,
-        compositionId
+        compositionId,
+        defaultProps,
+        originalProps
       });
-      return {
-        width,
-        height,
-        fps,
-        durationInFrames,
-        id: compositionId,
-        defaultProps: serializeThenDeserializeInStudio(defaultProps),
-        props: serializeThenDeserializeInStudio(c2.props ?? originalProps),
-        defaultCodec: defaultCodec ?? null,
-        defaultOutName: defaultOutName ?? null,
-        defaultVideoImageFormat: defaultVideoImageFormat ?? null,
-        defaultPixelFormat: defaultPixelFormat ?? null,
-        defaultProResProfile: defaultProResProfile ?? null,
-        defaultSampleRate: defaultSampleRate ?? null
-      };
     });
   }
-  const data = validateCalculated({
+  return makeVideoConfigWithMetadata({
     calculated: calculatedProm,
     compositionDurationInFrames,
     compositionFps,
     compositionHeight,
     compositionWidth,
-    compositionId
+    compositionId,
+    defaultProps,
+    originalProps
   });
-  if (calculatedProm === null) {
+};
+var resolveVideoConfig = (params) => {
+  const resolved = resolveVideoConfigWithMetadata(params);
+  if (typeof resolved === "object" && "then" in resolved) {
+    return resolved.then(({ videoConfig }) => videoConfig);
+  }
+  return resolved.videoConfig;
+};
+var resolveVideoConfigWithMetadataOrCatch = (params) => {
+  try {
     return {
-      ...data,
-      id: compositionId,
-      defaultProps: serializeThenDeserializeInStudio(defaultProps ?? {}),
-      props: serializeThenDeserializeInStudio(originalProps),
-      defaultCodec: null,
-      defaultOutName: null,
-      defaultVideoImageFormat: null,
-      defaultPixelFormat: null,
-      defaultProResProfile: null,
-      defaultSampleRate: null
+      type: "success",
+      result: resolveVideoConfigWithMetadata(params)
+    };
+  } catch (err) {
+    return {
+      type: "error",
+      error: err
     };
   }
-  return {
-    ...data,
-    id: compositionId,
-    defaultProps: serializeThenDeserializeInStudio(defaultProps ?? {}),
-    props: serializeThenDeserializeInStudio(calculatedProm.props ?? originalProps),
-    defaultCodec: calculatedProm.defaultCodec ?? null,
-    defaultOutName: calculatedProm.defaultOutName ?? null,
-    defaultVideoImageFormat: calculatedProm.defaultVideoImageFormat ?? null,
-    defaultPixelFormat: calculatedProm.defaultPixelFormat ?? null,
-    defaultProResProfile: calculatedProm.defaultProResProfile ?? null,
-    defaultSampleRate: calculatedProm.defaultSampleRate ?? null
-  };
 };
 var resolveVideoConfigOrCatch = (params) => {
   try {
@@ -11505,7 +11561,7 @@ var resolveVideoConfigOrCatch = (params) => {
     };
   }
 };
-var SequenceStackTracesUpdateContext = React33.createContext(() => {});
+var SequenceStackTracesUpdateContext = React34.createContext(() => {});
 var getEnvVariables = () => {
   if (getRemotionEnvironment().isRendering) {
     const param = window.remotion_envVariables;
@@ -11531,7 +11587,7 @@ var setupEnvVariables = () => {
     window.process.env[key] = env[key];
   });
 };
-var CurrentScaleContext = React34.createContext(null);
+var CurrentScaleContext = React35.createContext(null);
 var PreviewSizeContext = createContext25({
   setSize: () => {
     return;
@@ -11555,7 +11611,7 @@ var calculateScale = ({
   }
   return Number(previewSize);
 };
-var PixelDensityContext = React35.createContext(null);
+var PixelDensityContext = React36.createContext(null);
 var getOffthreadVideoSource = ({
   src,
   transparent,
@@ -11822,7 +11878,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
       ref: videoRef
     });
   }, [context.audioContext]);
-  const effectToUse = React37.useInsertionEffect ?? React37.useLayoutEffect;
+  const effectToUse = React38.useInsertionEffect ?? React38.useLayoutEffect;
   effectToUse(() => {
     return () => {
       requestAnimationFrame(() => {
@@ -12198,20 +12254,20 @@ var OffthreadVideo = ({
 addSequenceStackTraces(OffthreadVideo);
 var WATCH_REMOTION_STATIC_FILES = "remotion_staticFilesChanged";
 function useRemotionContexts() {
-  const compositionManagerCtx = React39.useContext(CompositionManager);
-  const timelineContext = React39.useContext(TimelineContext);
-  const setTimelineContext = React39.useContext(SetTimelineContext);
-  const sequenceContext = React39.useContext(SequenceContext);
-  const nonceContext = React39.useContext(NonceContext);
-  const canUseRemotionHooksContext = React39.useContext(CanUseRemotionHooks);
-  const preloadContext = React39.useContext(PreloadContext);
-  const resolveCompositionContext = React39.useContext(ResolveCompositionContext);
-  const renderAssetManagerContext = React39.useContext(RenderAssetManager);
-  const sequenceManagerContext = React39.useContext(SequenceManager);
-  const sequenceManagerRefContext = React39.useContext(SequenceManagerRefContext);
-  const visualModePropStatusesRefContext = React39.useContext(VisualModePropStatusesRefContext);
-  const bufferManagerContext = React39.useContext(BufferingContextReact);
-  const logLevelContext = React39.useContext(LogLevelContext);
+  const compositionManagerCtx = React40.useContext(CompositionManager);
+  const timelineContext = React40.useContext(TimelineContext);
+  const setTimelineContext = React40.useContext(SetTimelineContext);
+  const sequenceContext = React40.useContext(SequenceContext);
+  const nonceContext = React40.useContext(NonceContext);
+  const canUseRemotionHooksContext = React40.useContext(CanUseRemotionHooks);
+  const preloadContext = React40.useContext(PreloadContext);
+  const resolveCompositionContext = React40.useContext(ResolveCompositionContext);
+  const renderAssetManagerContext = React40.useContext(RenderAssetManager);
+  const sequenceManagerContext = React40.useContext(SequenceManager);
+  const sequenceManagerRefContext = React40.useContext(SequenceManagerRefContext);
+  const visualModePropStatusesRefContext = React40.useContext(VisualModePropStatusesRefContext);
+  const bufferManagerContext = React40.useContext(BufferingContextReact);
+  const logLevelContext = React40.useContext(LogLevelContext);
   return useMemo37(() => ({
     compositionManagerCtx,
     timelineContext,
@@ -12369,6 +12425,7 @@ var Internals = {
   NonceContext,
   resolveVideoConfig,
   resolveVideoConfigOrCatch,
+  resolveVideoConfigWithMetadataOrCatch,
   ResolveCompositionContext,
   useResolvedVideoConfig,
   resolveCompositionsRef,
@@ -12385,6 +12442,8 @@ var Internals = {
   BufferingProvider,
   BufferingContextReact,
   getComponentsToAddStacksTo,
+  getSequenceComponent,
+  getSingleChildComponent,
   CurrentScaleContext,
   PixelDensityContext,
   PreviewSizeContext,
@@ -12442,9 +12501,9 @@ var Internals = {
   fromField
 };
 var flattenChildren = (children) => {
-  const childrenArray = React40.Children.toArray(children);
+  const childrenArray = React41.Children.toArray(children);
   return childrenArray.reduce((flatChildren, child) => {
-    if (child.type === React40.Fragment) {
+    if (child.type === React41.Fragment) {
       return flatChildren.concat(flattenChildren(child.props.children));
     }
     flatChildren.push(child);
@@ -12532,7 +12591,7 @@ var SeriesInner = (props2) => {
         index: i,
         childrenLength: flattenedChildren.length
       });
-      return React41.cloneElement(castedElement, {
+      return React42.cloneElement(castedElement, {
         _remotionInternalRender: (resolvedProps, ref) => {
           const durationInFramesProp = resolvedProps.durationInFrames;
           const {
@@ -12690,7 +12749,7 @@ var Still = (props2) => {
     durationInFrames: 1,
     fps: 1
   };
-  return React42.createElement(Composition, newProps);
+  return React43.createElement(Composition, newProps);
 };
 addSequenceStackTraces(Still);
 var roundTo6Commas = (num) => {
@@ -13169,6 +13228,7 @@ var Config = new Proxy(proxyObj, {
 });
 Sequence.displayName = "Sequence";
 addSequenceStackTraces(Sequence);
+setSequenceComponent(Sequence);
 addSequenceStackTraces(Composition);
 addSequenceStackTraces(Folder);
 
@@ -13611,7 +13671,7 @@ var ExpertsPageContent = ({ Link }) => {
 import { useMemo as useMemo53 } from "react";
 
 // ../design/dist/esm/index.mjs
-import * as React23 from "react";
+import * as React24 from "react";
 import * as React8 from "react";
 import { Fragment as Fragment22, jsx as jsx46 } from "react/jsx-runtime";
 import React52, { useCallback as useCallback27, useRef as useRef210, useState as useState22 } from "react";
@@ -14956,7 +15016,7 @@ var getDefaultConfig = () => {
 var twMerge = /* @__PURE__ */ createTailwindMerge(getDefaultConfig);
 
 // ../design/dist/esm/index.mjs
-import React32, { useEffect as useEffect21, useMemo as useMemo43, useState as useState23 } from "react";
+import React33, { useEffect as useEffect21, useMemo as useMemo43, useState as useState23 } from "react";
 
 // ../paths/dist/esm/index.mjs
 var cutLInstruction = ({
@@ -20647,12 +20707,12 @@ import React72 from "react";
 import { jsx as jsx103 } from "react/jsx-runtime";
 import { jsx as jsx113 } from "react/jsx-runtime";
 import { jsx as jsx123 } from "react/jsx-runtime";
-import * as React36 from "react";
+import * as React362 from "react";
 import * as ReactDOM4 from "react-dom";
-import React112 from "react";
+import React11 from "react";
 import * as React82 from "react";
 import { jsx as jsx132 } from "react/jsx-runtime";
-import * as React9 from "react";
+import * as React92 from "react";
 import * as React10 from "react";
 import { Fragment as Fragment5, jsx as jsx142 } from "react/jsx-runtime";
 import { jsx as jsx152 } from "react/jsx-runtime";
@@ -20662,15 +20722,15 @@ import * as React162 from "react";
 import * as React132 from "react";
 import * as ReactDOM from "react-dom";
 import { jsx as jsx172 } from "react/jsx-runtime";
-import * as React14 from "react";
-import * as React152 from "react";
+import * as React142 from "react";
+import * as React15 from "react";
 import { jsx as jsx182 } from "react/jsx-runtime";
-import * as React17 from "react";
+import * as React172 from "react";
 import * as React18 from "react";
 import { jsx as jsx192 } from "react/jsx-runtime";
 import * as React202 from "react";
-import * as React192 from "react";
-import * as React24 from "react";
+import * as React19 from "react";
+import * as React242 from "react";
 import * as React212 from "react";
 import { useLayoutEffect as useLayoutEffect32, useEffect as useEffect82 } from "react";
 import * as ReactDOM2 from "react-dom";
@@ -20688,7 +20748,7 @@ import { jsx as jsx232 } from "react/jsx-runtime";
 import * as React352 from "react";
 import * as React312 from "react";
 import { useState as useState112 } from "react";
-import * as React292 from "react";
+import * as React29 from "react";
 import * as React302 from "react";
 import * as React342 from "react";
 import * as React332 from "react";
@@ -20696,22 +20756,22 @@ import * as React322 from "react";
 import { Fragment as Fragment8, jsx as jsx242, jsxs as jsxs42 } from "react/jsx-runtime";
 import { forwardRef as forwardRef142, createElement as createElement7 } from "react";
 import { forwardRef as forwardRef132, createElement as createElement6 } from "react";
-import * as React372 from "react";
+import * as React37 from "react";
 import { jsx as jsx252, jsxs as jsxs5 } from "react/jsx-runtime";
 import { jsx as jsx262 } from "react/jsx-runtime";
 import * as React49 from "react";
-import * as React38 from "react";
+import * as React382 from "react";
 import { jsx as jsx272 } from "react/jsx-runtime";
 import * as React47 from "react";
 import React402 from "react";
-import * as React392 from "react";
+import * as React39 from "react";
 import { Fragment as Fragment222, jsx as jsx282 } from "react/jsx-runtime";
 import { jsx as jsx292 } from "react/jsx-runtime";
 import React210 from "react";
 import { jsx as jsx2102 } from "react/jsx-runtime";
 import * as React422 from "react";
 import * as React412 from "react";
-import * as React43 from "react";
+import * as React432 from "react";
 import * as ReactDOM5 from "react-dom";
 import { jsx as jsx302 } from "react/jsx-runtime";
 import * as React44 from "react";
@@ -20763,7 +20823,7 @@ function useComposedRefs(...refs) {
   return React8.useCallback(composeRefs(...refs), refs);
 }
 var REACT_LAZY_TYPE = Symbol.for("react.lazy");
-var use = React23[" use ".trim().toString()];
+var use = React24[" use ".trim().toString()];
 function isPromiseLike(value) {
   return typeof value === "object" && value !== null && "then" in value;
 }
@@ -20772,25 +20832,25 @@ function isLazyComponent(element) {
 }
 function createSlot(ownerName) {
   const SlotClone = /* @__PURE__ */ createSlotClone(ownerName);
-  const Slot2 = React23.forwardRef((props, forwardedRef) => {
+  const Slot2 = React24.forwardRef((props, forwardedRef) => {
     let { children, ...slotProps } = props;
     if (isLazyComponent(children) && typeof use === "function") {
       children = use(children._payload);
     }
-    const childrenArray = React23.Children.toArray(children);
+    const childrenArray = React24.Children.toArray(children);
     const slottable = childrenArray.find(isSlottable);
     if (slottable) {
       const newElement = slottable.props.children;
       const newChildren = childrenArray.map((child) => {
         if (child === slottable) {
-          if (React23.Children.count(newElement) > 1)
-            return React23.Children.only(null);
-          return React23.isValidElement(newElement) ? newElement.props.children : null;
+          if (React24.Children.count(newElement) > 1)
+            return React24.Children.only(null);
+          return React24.isValidElement(newElement) ? newElement.props.children : null;
         } else {
           return child;
         }
       });
-      return /* @__PURE__ */ jsx46(SlotClone, { ...slotProps, ref: forwardedRef, children: React23.isValidElement(newElement) ? React23.cloneElement(newElement, undefined, newChildren) : null });
+      return /* @__PURE__ */ jsx46(SlotClone, { ...slotProps, ref: forwardedRef, children: React24.isValidElement(newElement) ? React24.cloneElement(newElement, undefined, newChildren) : null });
     }
     return /* @__PURE__ */ jsx46(SlotClone, { ...slotProps, ref: forwardedRef, children });
   });
@@ -20799,20 +20859,20 @@ function createSlot(ownerName) {
 }
 var Slot = /* @__PURE__ */ createSlot("Slot");
 function createSlotClone(ownerName) {
-  const SlotClone = React23.forwardRef((props, forwardedRef) => {
+  const SlotClone = React24.forwardRef((props, forwardedRef) => {
     let { children, ...slotProps } = props;
     if (isLazyComponent(children) && typeof use === "function") {
       children = use(children._payload);
     }
-    if (React23.isValidElement(children)) {
+    if (React24.isValidElement(children)) {
       const childrenRef = getElementRef(children);
       const props2 = mergeProps(slotProps, children.props);
-      if (children.type !== React23.Fragment) {
+      if (children.type !== React24.Fragment) {
         props2.ref = forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef;
       }
-      return React23.cloneElement(children, props2);
+      return React24.cloneElement(children, props2);
     }
-    return React23.Children.count(children) > 1 ? React23.Children.only(null) : null;
+    return React24.Children.count(children) > 1 ? React24.Children.only(null) : null;
   });
   SlotClone.displayName = `${ownerName}.SlotClone`;
   return SlotClone;
@@ -20828,7 +20888,7 @@ function createSlottable(ownerName) {
 }
 var Slottable = /* @__PURE__ */ createSlottable("Slottable");
 function isSlottable(child) {
-  return React23.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER;
+  return React24.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER;
 }
 function mergeProps(slotProps, childProps) {
   const overrideProps = { ...childProps };
@@ -20885,7 +20945,7 @@ var getChildNodeFrom = (htmlElement) => {
   return childNode;
 };
 var useHoverTransforms = (ref, disabled) => {
-  const [state, setState] = React32.useState({
+  const [state, setState] = React33.useState({
     progress: 0,
     isActive: false
   });
@@ -20897,7 +20957,7 @@ var useHoverTransforms = (ref, disabled) => {
       eventTarget.dispatchEvent(new Event("enabled"));
     }
   }, [disabled, eventTarget]);
-  React32.useEffect(() => {
+  React33.useEffect(() => {
     const element = ref.current;
     if (!element)
       return;
@@ -20972,8 +21032,8 @@ var useHoverTransforms = (ref, disabled) => {
   return state;
 };
 var useClickTransforms = (ref) => {
-  const [hoverProgress, setHoverProgress] = React32.useState(0);
-  React32.useEffect(() => {
+  const [hoverProgress, setHoverProgress] = React33.useState(0);
+  React33.useEffect(() => {
     const element = getChildNodeFrom(ref.current);
     if (!element) {
       return;
@@ -21549,7 +21609,7 @@ function composeRefs2(...refs) {
   return (node) => refs.forEach((ref) => setRef22(ref, node));
 }
 function useComposedRefs2(...refs) {
-  return React9.useCallback(composeRefs2(...refs), refs);
+  return React92.useCallback(composeRefs2(...refs), refs);
 }
 var Slot2 = React10.forwardRef((props, forwardedRef) => {
   const { children, ...slotProps } = props;
@@ -21631,13 +21691,13 @@ function createCollection(name) {
   const [CollectionProviderImpl, useCollectionContext] = createCollectionContext(PROVIDER_NAME, { collectionRef: { current: null }, itemMap: /* @__PURE__ */ new Map });
   const CollectionProvider = (props) => {
     const { scope, children } = props;
-    const ref = React112.useRef(null);
-    const itemMap = React112.useRef(/* @__PURE__ */ new Map).current;
+    const ref = React11.useRef(null);
+    const itemMap = React11.useRef(/* @__PURE__ */ new Map).current;
     return /* @__PURE__ */ jsx152(CollectionProviderImpl, { scope, itemMap, collectionRef: ref, children });
   };
   CollectionProvider.displayName = PROVIDER_NAME;
   const COLLECTION_SLOT_NAME = name + "CollectionSlot";
-  const CollectionSlot = React112.forwardRef((props, forwardedRef) => {
+  const CollectionSlot = React11.forwardRef((props, forwardedRef) => {
     const { scope, children } = props;
     const context = useCollectionContext(COLLECTION_SLOT_NAME, scope);
     const composedRefs = useComposedRefs2(forwardedRef, context.collectionRef);
@@ -21646,12 +21706,12 @@ function createCollection(name) {
   CollectionSlot.displayName = COLLECTION_SLOT_NAME;
   const ITEM_SLOT_NAME = name + "CollectionItemSlot";
   const ITEM_DATA_ATTR = "data-radix-collection-item";
-  const CollectionItemSlot = React112.forwardRef((props, forwardedRef) => {
+  const CollectionItemSlot = React11.forwardRef((props, forwardedRef) => {
     const { scope, children, ...itemData } = props;
-    const ref = React112.useRef(null);
+    const ref = React11.useRef(null);
     const composedRefs = useComposedRefs2(forwardedRef, ref);
     const context = useCollectionContext(ITEM_SLOT_NAME, scope);
-    React112.useEffect(() => {
+    React11.useEffect(() => {
       context.itemMap.set(ref, { ref, ...itemData });
       return () => void context.itemMap.delete(ref);
     });
@@ -21660,7 +21720,7 @@ function createCollection(name) {
   CollectionItemSlot.displayName = ITEM_SLOT_NAME;
   function useCollection(scope) {
     const context = useCollectionContext(name + "CollectionConsumer", scope);
-    const getItems = React112.useCallback(() => {
+    const getItems = React11.useCallback(() => {
       const collectionNode = context.collectionRef.current;
       if (!collectionNode)
         return [];
@@ -21717,15 +21777,15 @@ function dispatchDiscreteCustomEvent(target, event) {
     ReactDOM.flushSync(() => target.dispatchEvent(event));
 }
 function useCallbackRef(callback) {
-  const callbackRef = React14.useRef(callback);
-  React14.useEffect(() => {
+  const callbackRef = React142.useRef(callback);
+  React142.useEffect(() => {
     callbackRef.current = callback;
   });
-  return React14.useMemo(() => (...args) => callbackRef.current?.(...args), []);
+  return React142.useMemo(() => (...args) => callbackRef.current?.(...args), []);
 }
 function useEscapeKeydown(onEscapeKeyDownProp, ownerDocument = globalThis?.document) {
   const onEscapeKeyDown = useCallbackRef(onEscapeKeyDownProp);
-  React152.useEffect(() => {
+  React15.useEffect(() => {
     const handleKeyDown = (event) => {
       if (event.key === "Escape") {
         onEscapeKeyDown(event);
@@ -21932,7 +21992,7 @@ function handleAndDispatchCustomEvent(name, handler, detail, { discrete }) {
 }
 var count = 0;
 function useFocusGuards() {
-  React17.useEffect(() => {
+  React172.useEffect(() => {
     const edgeGuards = document.querySelectorAll("[data-radix-focus-guard]");
     document.body.insertAdjacentElement("afterbegin", edgeGuards[0] ?? createFocusGuard());
     document.body.insertAdjacentElement("beforeend", edgeGuards[1] ?? createFocusGuard());
@@ -22167,7 +22227,7 @@ function arrayRemove(array, item) {
 function removeLinks(items) {
   return items.filter((item) => item.tagName !== "A");
 }
-var useLayoutEffect22 = Boolean(globalThis?.document) ? React192.useLayoutEffect : () => {};
+var useLayoutEffect22 = Boolean(globalThis?.document) ? React19.useLayoutEffect : () => {};
 var useReactId = React202["useId".toString()] || (() => {
   return;
 });
@@ -24019,17 +24079,17 @@ var [createPopperContext, createPopperScope] = createContextScope(POPPER_NAME);
 var [PopperProvider, usePopperContext] = createPopperContext(POPPER_NAME);
 var Popper = (props) => {
   const { __scopePopper, children } = props;
-  const [anchor, setAnchor] = React24.useState(null);
+  const [anchor, setAnchor] = React242.useState(null);
   return /* @__PURE__ */ jsx213(PopperProvider, { scope: __scopePopper, anchor, onAnchorChange: setAnchor, children });
 };
 Popper.displayName = POPPER_NAME;
 var ANCHOR_NAME = "PopperAnchor";
-var PopperAnchor = React24.forwardRef((props, forwardedRef) => {
+var PopperAnchor = React242.forwardRef((props, forwardedRef) => {
   const { __scopePopper, virtualRef, ...anchorProps } = props;
   const context = usePopperContext(ANCHOR_NAME, __scopePopper);
-  const ref = React24.useRef(null);
+  const ref = React242.useRef(null);
   const composedRefs = useComposedRefs2(forwardedRef, ref);
-  React24.useEffect(() => {
+  React242.useEffect(() => {
     context.onAnchorChange(virtualRef?.current || ref.current);
   });
   return virtualRef ? null : /* @__PURE__ */ jsx213(Primitive.div, { ...anchorProps, ref: composedRefs });
@@ -24037,7 +24097,7 @@ var PopperAnchor = React24.forwardRef((props, forwardedRef) => {
 PopperAnchor.displayName = ANCHOR_NAME;
 var CONTENT_NAME = "PopperContent";
 var [PopperContentProvider, useContentContext] = createPopperContext(CONTENT_NAME);
-var PopperContent = React24.forwardRef((props, forwardedRef) => {
+var PopperContent = React242.forwardRef((props, forwardedRef) => {
   const {
     __scopePopper,
     side = "bottom",
@@ -24055,9 +24115,9 @@ var PopperContent = React24.forwardRef((props, forwardedRef) => {
     ...contentProps
   } = props;
   const context = usePopperContext(CONTENT_NAME, __scopePopper);
-  const [content, setContent] = React24.useState(null);
+  const [content, setContent] = React242.useState(null);
   const composedRefs = useComposedRefs2(forwardedRef, (node) => setContent(node));
-  const [arrow4, setArrow] = React24.useState(null);
+  const [arrow4, setArrow] = React242.useState(null);
   const arrowSize = useSize(arrow4);
   const arrowWidth = arrowSize?.width ?? 0;
   const arrowHeight = arrowSize?.height ?? 0;
@@ -24117,7 +24177,7 @@ var PopperContent = React24.forwardRef((props, forwardedRef) => {
   const arrowX = middlewareData.arrow?.x;
   const arrowY = middlewareData.arrow?.y;
   const cannotCenterArrow = middlewareData.arrow?.centerOffset !== 0;
-  const [contentZIndex, setContentZIndex] = React24.useState();
+  const [contentZIndex, setContentZIndex] = React242.useState();
   useLayoutEffect22(() => {
     if (content)
       setContentZIndex(window.getComputedStyle(content).zIndex);
@@ -24168,7 +24228,7 @@ var OPPOSITE_SIDE = {
   bottom: "top",
   left: "right"
 };
-var PopperArrow = React24.forwardRef(function PopperArrow2(props, forwardedRef) {
+var PopperArrow = React242.forwardRef(function PopperArrow2(props, forwardedRef) {
   const { __scopePopper, ...arrowProps } = props;
   const contentContext = useContentContext(ARROW_NAME, __scopePopper);
   const baseSide = OPPOSITE_SIDE[contentContext.placedSide];
@@ -24511,7 +24571,7 @@ function useCallbackRef2(initialValue, callback) {
   ref.callback = callback;
   return ref.facade;
 }
-var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React292.useLayoutEffect : React292.useEffect;
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React29.useLayoutEffect : React29.useEffect;
 var currentValues = new WeakMap;
 function useMergeRefs(refs, defaultValue) {
   var callbackRef = useCallbackRef2(defaultValue || null, function(newValue) {
@@ -25147,9 +25207,9 @@ var Select = (props) => {
     required
   } = props;
   const popperScope = usePopperScope(__scopeSelect);
-  const [trigger, setTrigger] = React36.useState(null);
-  const [valueNode, setValueNode] = React36.useState(null);
-  const [valueNodeHasChildren, setValueNodeHasChildren] = React36.useState(false);
+  const [trigger, setTrigger] = React362.useState(null);
+  const [valueNode, setValueNode] = React362.useState(null);
+  const [valueNodeHasChildren, setValueNodeHasChildren] = React362.useState(false);
   const direction = useDirection(dir);
   const [open = false, setOpen] = useControllableState({
     prop: openProp,
@@ -25161,9 +25221,9 @@ var Select = (props) => {
     defaultProp: defaultValue,
     onChange: onValueChange
   });
-  const triggerPointerDownPosRef = React36.useRef(null);
+  const triggerPointerDownPosRef = React362.useRef(null);
   const isFormControl = trigger ? Boolean(trigger.closest("form")) : true;
-  const [nativeOptionsSet, setNativeOptionsSet] = React36.useState(/* @__PURE__ */ new Set);
+  const [nativeOptionsSet, setNativeOptionsSet] = React362.useState(/* @__PURE__ */ new Set);
   const nativeSelectKey = Array.from(nativeOptionsSet).map((option) => option.props.value).join(";");
   return /* @__PURE__ */ jsx242(Root22, { ...popperScope, children: /* @__PURE__ */ jsxs42(SelectProvider, {
     required,
@@ -25185,10 +25245,10 @@ var Select = (props) => {
     children: [
       /* @__PURE__ */ jsx242(Collection.Provider, { scope: __scopeSelect, children: /* @__PURE__ */ jsx242(SelectNativeOptionsProvider, {
         scope: props.__scopeSelect,
-        onNativeOptionAdd: React36.useCallback((option) => {
+        onNativeOptionAdd: React362.useCallback((option) => {
           setNativeOptionsSet((prev) => new Set(prev).add(option));
         }, []),
-        onNativeOptionRemove: React36.useCallback((option) => {
+        onNativeOptionRemove: React362.useCallback((option) => {
           setNativeOptionsSet((prev) => {
             const optionsSet = new Set(prev);
             optionsSet.delete(option);
@@ -25216,7 +25276,7 @@ var Select = (props) => {
 };
 Select.displayName = SELECT_NAME;
 var TRIGGER_NAME = "SelectTrigger";
-var SelectTrigger = React36.forwardRef((props, forwardedRef) => {
+var SelectTrigger = React362.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, disabled = false, ...triggerProps } = props;
   const popperScope = usePopperScope(__scopeSelect);
   const context = useSelectContext(TRIGGER_NAME, __scopeSelect);
@@ -25284,7 +25344,7 @@ var SelectTrigger = React36.forwardRef((props, forwardedRef) => {
 });
 SelectTrigger.displayName = TRIGGER_NAME;
 var VALUE_NAME = "SelectValue";
-var SelectValue = React36.forwardRef((props, forwardedRef) => {
+var SelectValue = React362.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, className, style, children, placeholder = "", ...valueProps } = props;
   const context = useSelectContext(VALUE_NAME, __scopeSelect);
   const { onValueNodeHasChildrenChange } = context;
@@ -25302,7 +25362,7 @@ var SelectValue = React36.forwardRef((props, forwardedRef) => {
 });
 SelectValue.displayName = VALUE_NAME;
 var ICON_NAME = "SelectIcon";
-var SelectIcon = React36.forwardRef((props, forwardedRef) => {
+var SelectIcon = React362.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, children, ...iconProps } = props;
   return /* @__PURE__ */ jsx242(Primitive.span, { "aria-hidden": true, ...iconProps, ref: forwardedRef, children: children || "▼" });
 });
@@ -25313,9 +25373,9 @@ var SelectPortal = (props) => {
 };
 SelectPortal.displayName = PORTAL_NAME2;
 var CONTENT_NAME2 = "SelectContent";
-var SelectContent = React36.forwardRef((props, forwardedRef) => {
+var SelectContent = React362.forwardRef((props, forwardedRef) => {
   const context = useSelectContext(CONTENT_NAME2, props.__scopeSelect);
-  const [fragment, setFragment] = React36.useState();
+  const [fragment, setFragment] = React362.useState();
   useLayoutEffect22(() => {
     setFragment(new DocumentFragment);
   }, []);
@@ -25329,7 +25389,7 @@ SelectContent.displayName = CONTENT_NAME2;
 var CONTENT_MARGIN = 10;
 var [SelectContentProvider, useSelectContentContext] = createSelectContext(CONTENT_NAME2);
 var CONTENT_IMPL_NAME = "SelectContentImpl";
-var SelectContentImpl = React36.forwardRef((props, forwardedRef) => {
+var SelectContentImpl = React362.forwardRef((props, forwardedRef) => {
   const {
     __scopeSelect,
     position = "item-aligned",
@@ -25349,20 +25409,20 @@ var SelectContentImpl = React36.forwardRef((props, forwardedRef) => {
     ...contentProps
   } = props;
   const context = useSelectContext(CONTENT_NAME2, __scopeSelect);
-  const [content, setContent] = React36.useState(null);
-  const [viewport, setViewport] = React36.useState(null);
+  const [content, setContent] = React362.useState(null);
+  const [viewport, setViewport] = React362.useState(null);
   const composedRefs = useComposedRefs2(forwardedRef, (node) => setContent(node));
-  const [selectedItem, setSelectedItem] = React36.useState(null);
-  const [selectedItemText, setSelectedItemText] = React36.useState(null);
+  const [selectedItem, setSelectedItem] = React362.useState(null);
+  const [selectedItemText, setSelectedItemText] = React362.useState(null);
   const getItems = useCollection(__scopeSelect);
-  const [isPositioned, setIsPositioned] = React36.useState(false);
-  const firstValidItemFoundRef = React36.useRef(false);
-  React36.useEffect(() => {
+  const [isPositioned, setIsPositioned] = React362.useState(false);
+  const firstValidItemFoundRef = React362.useRef(false);
+  React362.useEffect(() => {
     if (content)
       return hideOthers(content);
   }, [content]);
   useFocusGuards();
-  const focusFirst2 = React36.useCallback((candidates) => {
+  const focusFirst2 = React362.useCallback((candidates) => {
     const [firstItem, ...restItems] = getItems().map((item) => item.ref.current);
     const [lastItem] = restItems.slice(-1);
     const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;
@@ -25379,14 +25439,14 @@ var SelectContentImpl = React36.forwardRef((props, forwardedRef) => {
         return;
     }
   }, [getItems, viewport]);
-  const focusSelectedItem = React36.useCallback(() => focusFirst2([selectedItem, content]), [focusFirst2, selectedItem, content]);
-  React36.useEffect(() => {
+  const focusSelectedItem = React362.useCallback(() => focusFirst2([selectedItem, content]), [focusFirst2, selectedItem, content]);
+  React362.useEffect(() => {
     if (isPositioned) {
       focusSelectedItem();
     }
   }, [isPositioned, focusSelectedItem]);
   const { onOpenChange, triggerPointerDownPosRef } = context;
-  React36.useEffect(() => {
+  React362.useEffect(() => {
     if (content) {
       let pointerMoveDelta = { x: 0, y: 0 };
       const handlePointerMove = (event) => {
@@ -25416,7 +25476,7 @@ var SelectContentImpl = React36.forwardRef((props, forwardedRef) => {
       };
     }
   }, [content, onOpenChange, triggerPointerDownPosRef]);
-  React36.useEffect(() => {
+  React362.useEffect(() => {
     const close = () => onOpenChange(false);
     window.addEventListener("blur", close);
     window.addEventListener("resize", close);
@@ -25433,7 +25493,7 @@ var SelectContentImpl = React36.forwardRef((props, forwardedRef) => {
       setTimeout(() => nextItem.ref.current.focus());
     }
   });
-  const itemRefCallback = React36.useCallback((node, value, disabled) => {
+  const itemRefCallback = React362.useCallback((node, value, disabled) => {
     const isFirstValidItem = !firstValidItemFoundRef.current && !disabled;
     const isSelectedItem = context.value !== undefined && context.value === value;
     if (isSelectedItem || isFirstValidItem) {
@@ -25442,8 +25502,8 @@ var SelectContentImpl = React36.forwardRef((props, forwardedRef) => {
         firstValidItemFoundRef.current = true;
     }
   }, [context.value]);
-  const handleItemLeave = React36.useCallback(() => content?.focus(), [content]);
-  const itemTextRefCallback = React36.useCallback((node, value, disabled) => {
+  const handleItemLeave = React362.useCallback(() => content?.focus(), [content]);
+  const itemTextRefCallback = React362.useCallback((node, value, disabled) => {
     const isFirstValidItem = !firstValidItemFoundRef.current && !disabled;
     const isSelectedItem = context.value !== undefined && context.value === value;
     if (isSelectedItem || isFirstValidItem) {
@@ -25538,18 +25598,18 @@ var SelectContentImpl = React36.forwardRef((props, forwardedRef) => {
 });
 SelectContentImpl.displayName = CONTENT_IMPL_NAME;
 var ITEM_ALIGNED_POSITION_NAME = "SelectItemAlignedPosition";
-var SelectItemAlignedPosition = React36.forwardRef((props, forwardedRef) => {
+var SelectItemAlignedPosition = React362.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, onPlaced, ...popperProps } = props;
   const context = useSelectContext(CONTENT_NAME2, __scopeSelect);
   const contentContext = useSelectContentContext(CONTENT_NAME2, __scopeSelect);
-  const [contentWrapper, setContentWrapper] = React36.useState(null);
-  const [content, setContent] = React36.useState(null);
+  const [contentWrapper, setContentWrapper] = React362.useState(null);
+  const [content, setContent] = React362.useState(null);
   const composedRefs = useComposedRefs2(forwardedRef, (node) => setContent(node));
   const getItems = useCollection(__scopeSelect);
-  const shouldExpandOnScrollRef = React36.useRef(false);
-  const shouldRepositionRef = React36.useRef(true);
+  const shouldExpandOnScrollRef = React362.useRef(false);
+  const shouldRepositionRef = React362.useRef(true);
   const { viewport, selectedItem, selectedItemText, focusSelectedItem } = contentContext;
-  const position = React36.useCallback(() => {
+  const position = React362.useCallback(() => {
     if (context.trigger && context.valueNode && contentWrapper && content && viewport && selectedItem && selectedItemText) {
       const triggerRect = context.trigger.getBoundingClientRect();
       const contentRect = content.getBoundingClientRect();
@@ -25630,12 +25690,12 @@ var SelectItemAlignedPosition = React36.forwardRef((props, forwardedRef) => {
     onPlaced
   ]);
   useLayoutEffect22(() => position(), [position]);
-  const [contentZIndex, setContentZIndex] = React36.useState();
+  const [contentZIndex, setContentZIndex] = React362.useState();
   useLayoutEffect22(() => {
     if (content)
       setContentZIndex(window.getComputedStyle(content).zIndex);
   }, [content]);
-  const handleScrollButtonChange = React36.useCallback((node) => {
+  const handleScrollButtonChange = React362.useCallback((node) => {
     if (node && shouldRepositionRef.current === true) {
       position();
       focusSelectedItem?.();
@@ -25669,7 +25729,7 @@ var SelectItemAlignedPosition = React36.forwardRef((props, forwardedRef) => {
 });
 SelectItemAlignedPosition.displayName = ITEM_ALIGNED_POSITION_NAME;
 var POPPER_POSITION_NAME = "SelectPopperPosition";
-var SelectPopperPosition = React36.forwardRef((props, forwardedRef) => {
+var SelectPopperPosition = React362.forwardRef((props, forwardedRef) => {
   const {
     __scopeSelect,
     align = "start",
@@ -25699,12 +25759,12 @@ var SelectPopperPosition = React36.forwardRef((props, forwardedRef) => {
 SelectPopperPosition.displayName = POPPER_POSITION_NAME;
 var [SelectViewportProvider, useSelectViewportContext] = createSelectContext(CONTENT_NAME2, {});
 var VIEWPORT_NAME = "SelectViewport";
-var SelectViewport = React36.forwardRef((props, forwardedRef) => {
+var SelectViewport = React362.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, nonce, ...viewportProps } = props;
   const contentContext = useSelectContentContext(VIEWPORT_NAME, __scopeSelect);
   const viewportContext = useSelectViewportContext(VIEWPORT_NAME, __scopeSelect);
   const composedRefs = useComposedRefs2(forwardedRef, contentContext.onViewportChange);
-  const prevScrollTopRef = React36.useRef(0);
+  const prevScrollTopRef = React362.useRef(0);
   return /* @__PURE__ */ jsxs42(Fragment8, { children: [
     /* @__PURE__ */ jsx242("style", {
       dangerouslySetInnerHTML: {
@@ -25753,14 +25813,14 @@ var SelectViewport = React36.forwardRef((props, forwardedRef) => {
 SelectViewport.displayName = VIEWPORT_NAME;
 var GROUP_NAME = "SelectGroup";
 var [SelectGroupContextProvider, useSelectGroupContext] = createSelectContext(GROUP_NAME);
-var SelectGroup = React36.forwardRef((props, forwardedRef) => {
+var SelectGroup = React362.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, ...groupProps } = props;
   const groupId = useId();
   return /* @__PURE__ */ jsx242(SelectGroupContextProvider, { scope: __scopeSelect, id: groupId, children: /* @__PURE__ */ jsx242(Primitive.div, { role: "group", "aria-labelledby": groupId, ...groupProps, ref: forwardedRef }) });
 });
 SelectGroup.displayName = GROUP_NAME;
 var LABEL_NAME = "SelectLabel";
-var SelectLabel = React36.forwardRef((props, forwardedRef) => {
+var SelectLabel = React362.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, ...labelProps } = props;
   const groupContext = useSelectGroupContext(LABEL_NAME, __scopeSelect);
   return /* @__PURE__ */ jsx242(Primitive.div, { id: groupContext.id, ...labelProps, ref: forwardedRef });
@@ -25768,7 +25828,7 @@ var SelectLabel = React36.forwardRef((props, forwardedRef) => {
 SelectLabel.displayName = LABEL_NAME;
 var ITEM_NAME = "SelectItem";
 var [SelectItemContextProvider, useSelectItemContext] = createSelectContext(ITEM_NAME);
-var SelectItem = React36.forwardRef((props, forwardedRef) => {
+var SelectItem = React362.forwardRef((props, forwardedRef) => {
   const {
     __scopeSelect,
     value,
@@ -25779,8 +25839,8 @@ var SelectItem = React36.forwardRef((props, forwardedRef) => {
   const context = useSelectContext(ITEM_NAME, __scopeSelect);
   const contentContext = useSelectContentContext(ITEM_NAME, __scopeSelect);
   const isSelected = context.value === value;
-  const [textValue, setTextValue] = React36.useState(textValueProp ?? "");
-  const [isFocused, setIsFocused] = React36.useState(false);
+  const [textValue, setTextValue] = React362.useState(textValueProp ?? "");
+  const [isFocused, setIsFocused] = React362.useState(false);
   const composedRefs = useComposedRefs2(forwardedRef, (node) => contentContext.itemRefCallback?.(node, value, disabled));
   const textId = useId();
   const handleSelect = () => {
@@ -25798,7 +25858,7 @@ var SelectItem = React36.forwardRef((props, forwardedRef) => {
     disabled,
     textId,
     isSelected,
-    onItemTextChange: React36.useCallback((node) => {
+    onItemTextChange: React362.useCallback((node) => {
       setTextValue((prevTextValue) => prevTextValue || (node?.textContent ?? "").trim());
     }, []),
     children: /* @__PURE__ */ jsx242(Collection.ItemSlot, {
@@ -25847,16 +25907,16 @@ var SelectItem = React36.forwardRef((props, forwardedRef) => {
 });
 SelectItem.displayName = ITEM_NAME;
 var ITEM_TEXT_NAME = "SelectItemText";
-var SelectItemText = React36.forwardRef((props, forwardedRef) => {
+var SelectItemText = React362.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, className, style, ...itemTextProps } = props;
   const context = useSelectContext(ITEM_TEXT_NAME, __scopeSelect);
   const contentContext = useSelectContentContext(ITEM_TEXT_NAME, __scopeSelect);
   const itemContext = useSelectItemContext(ITEM_TEXT_NAME, __scopeSelect);
   const nativeOptionsContext = useSelectNativeOptionsContext(ITEM_TEXT_NAME, __scopeSelect);
-  const [itemTextNode, setItemTextNode] = React36.useState(null);
+  const [itemTextNode, setItemTextNode] = React362.useState(null);
   const composedRefs = useComposedRefs2(forwardedRef, (node) => setItemTextNode(node), itemContext.onItemTextChange, (node) => contentContext.itemTextRefCallback?.(node, itemContext.value, itemContext.disabled));
   const textContent = itemTextNode?.textContent;
-  const nativeOption = React36.useMemo(() => /* @__PURE__ */ jsx242("option", { value: itemContext.value, disabled: itemContext.disabled, children: textContent }, itemContext.value), [itemContext.disabled, itemContext.value, textContent]);
+  const nativeOption = React362.useMemo(() => /* @__PURE__ */ jsx242("option", { value: itemContext.value, disabled: itemContext.disabled, children: textContent }, itemContext.value), [itemContext.disabled, itemContext.value, textContent]);
   const { onNativeOptionAdd, onNativeOptionRemove } = nativeOptionsContext;
   useLayoutEffect22(() => {
     onNativeOptionAdd(nativeOption);
@@ -25869,17 +25929,17 @@ var SelectItemText = React36.forwardRef((props, forwardedRef) => {
 });
 SelectItemText.displayName = ITEM_TEXT_NAME;
 var ITEM_INDICATOR_NAME = "SelectItemIndicator";
-var SelectItemIndicator = React36.forwardRef((props, forwardedRef) => {
+var SelectItemIndicator = React362.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, ...itemIndicatorProps } = props;
   const itemContext = useSelectItemContext(ITEM_INDICATOR_NAME, __scopeSelect);
   return itemContext.isSelected ? /* @__PURE__ */ jsx242(Primitive.span, { "aria-hidden": true, ...itemIndicatorProps, ref: forwardedRef }) : null;
 });
 SelectItemIndicator.displayName = ITEM_INDICATOR_NAME;
 var SCROLL_UP_BUTTON_NAME = "SelectScrollUpButton";
-var SelectScrollUpButton = React36.forwardRef((props, forwardedRef) => {
+var SelectScrollUpButton = React362.forwardRef((props, forwardedRef) => {
   const contentContext = useSelectContentContext(SCROLL_UP_BUTTON_NAME, props.__scopeSelect);
   const viewportContext = useSelectViewportContext(SCROLL_UP_BUTTON_NAME, props.__scopeSelect);
-  const [canScrollUp, setCanScrollUp] = React36.useState(false);
+  const [canScrollUp, setCanScrollUp] = React362.useState(false);
   const composedRefs = useComposedRefs2(forwardedRef, viewportContext.onScrollButtonChange);
   useLayoutEffect22(() => {
     if (contentContext.viewport && contentContext.isPositioned) {
@@ -25907,10 +25967,10 @@ var SelectScrollUpButton = React36.forwardRef((props, forwardedRef) => {
 });
 SelectScrollUpButton.displayName = SCROLL_UP_BUTTON_NAME;
 var SCROLL_DOWN_BUTTON_NAME = "SelectScrollDownButton";
-var SelectScrollDownButton = React36.forwardRef((props, forwardedRef) => {
+var SelectScrollDownButton = React362.forwardRef((props, forwardedRef) => {
   const contentContext = useSelectContentContext(SCROLL_DOWN_BUTTON_NAME, props.__scopeSelect);
   const viewportContext = useSelectViewportContext(SCROLL_DOWN_BUTTON_NAME, props.__scopeSelect);
-  const [canScrollDown, setCanScrollDown] = React36.useState(false);
+  const [canScrollDown, setCanScrollDown] = React362.useState(false);
   const composedRefs = useComposedRefs2(forwardedRef, viewportContext.onScrollButtonChange);
   useLayoutEffect22(() => {
     if (contentContext.viewport && contentContext.isPositioned) {
@@ -25938,18 +25998,18 @@ var SelectScrollDownButton = React36.forwardRef((props, forwardedRef) => {
   }) : null;
 });
 SelectScrollDownButton.displayName = SCROLL_DOWN_BUTTON_NAME;
-var SelectScrollButtonImpl = React36.forwardRef((props, forwardedRef) => {
+var SelectScrollButtonImpl = React362.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, onAutoScroll, ...scrollIndicatorProps } = props;
   const contentContext = useSelectContentContext("SelectScrollButton", __scopeSelect);
-  const autoScrollTimerRef = React36.useRef(null);
+  const autoScrollTimerRef = React362.useRef(null);
   const getItems = useCollection(__scopeSelect);
-  const clearAutoScrollTimer = React36.useCallback(() => {
+  const clearAutoScrollTimer = React362.useCallback(() => {
     if (autoScrollTimerRef.current !== null) {
       window.clearInterval(autoScrollTimerRef.current);
       autoScrollTimerRef.current = null;
     }
   }, []);
-  React36.useEffect(() => {
+  React362.useEffect(() => {
     return () => clearAutoScrollTimer();
   }, [clearAutoScrollTimer]);
   useLayoutEffect22(() => {
@@ -25978,13 +26038,13 @@ var SelectScrollButtonImpl = React36.forwardRef((props, forwardedRef) => {
   });
 });
 var SEPARATOR_NAME = "SelectSeparator";
-var SelectSeparator = React36.forwardRef((props, forwardedRef) => {
+var SelectSeparator = React362.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, ...separatorProps } = props;
   return /* @__PURE__ */ jsx242(Primitive.div, { "aria-hidden": true, ...separatorProps, ref: forwardedRef });
 });
 SelectSeparator.displayName = SEPARATOR_NAME;
 var ARROW_NAME2 = "SelectArrow";
-var SelectArrow = React36.forwardRef((props, forwardedRef) => {
+var SelectArrow = React362.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, ...arrowProps } = props;
   const popperScope = usePopperScope(__scopeSelect);
   const context = useSelectContext(ARROW_NAME2, __scopeSelect);
@@ -25995,12 +26055,12 @@ SelectArrow.displayName = ARROW_NAME2;
 function shouldShowPlaceholder(value) {
   return value === "" || value === undefined;
 }
-var BubbleSelect = React36.forwardRef((props, forwardedRef) => {
+var BubbleSelect = React362.forwardRef((props, forwardedRef) => {
   const { value, ...selectProps } = props;
-  const ref = React36.useRef(null);
+  const ref = React362.useRef(null);
   const composedRefs = useComposedRefs2(forwardedRef, ref);
   const prevValue = usePrevious(value);
-  React36.useEffect(() => {
+  React362.useEffect(() => {
     const select = ref.current;
     const selectProto = window.HTMLSelectElement.prototype;
     const descriptor = Object.getOwnPropertyDescriptor(selectProto, "value");
@@ -26016,9 +26076,9 @@ var BubbleSelect = React36.forwardRef((props, forwardedRef) => {
 BubbleSelect.displayName = "BubbleSelect";
 function useTypeaheadSearch(onSearchChange) {
   const handleSearchChange = useCallbackRef(onSearchChange);
-  const searchRef = React36.useRef("");
-  const timerRef = React36.useRef(0);
-  const handleTypeaheadSearch = React36.useCallback((key) => {
+  const searchRef = React362.useRef("");
+  const timerRef = React362.useRef(0);
+  const handleTypeaheadSearch = React362.useCallback((key) => {
     const search = searchRef.current + key;
     handleSearchChange(search);
     (function updateSearch(value) {
@@ -26028,11 +26088,11 @@ function useTypeaheadSearch(onSearchChange) {
         timerRef.current = window.setTimeout(() => updateSearch(""), 1000);
     })(search);
   }, [handleSearchChange]);
-  const resetTypeahead = React36.useCallback(() => {
+  const resetTypeahead = React362.useCallback(() => {
     searchRef.current = "";
     window.clearTimeout(timerRef.current);
   }, []);
-  React36.useEffect(() => {
+  React362.useEffect(() => {
     return () => window.clearTimeout(timerRef.current);
   }, []);
   return [searchRef, handleTypeaheadSearch, resetTypeahead];
@@ -26121,7 +26181,7 @@ var ChevronDown = createLucideIcon("ChevronDown", [
 var ChevronUp = createLucideIcon("ChevronUp", [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]]);
 var Select2 = Root222;
 var SelectValue2 = Value;
-var SelectTrigger2 = React372.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs5(Trigger, {
+var SelectTrigger2 = React37.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs5(Trigger, {
   ref,
   className: cn("flex h-10 w-full items-center justify-between rounded-md border-black border-2 border-b-4 bg-card-bg px-3 py-5 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 font-brand", className),
   ...props,
@@ -26136,7 +26196,7 @@ var SelectTrigger2 = React372.forwardRef(({ className, children, ...props }, ref
   ]
 }));
 SelectTrigger2.displayName = Trigger.displayName;
-var SelectScrollUpButton2 = React372.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx252(ScrollUpButton, {
+var SelectScrollUpButton2 = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx252(ScrollUpButton, {
   ref,
   className: cn("flex cursor-default items-center justify-center py-1", className),
   ...props,
@@ -26145,7 +26205,7 @@ var SelectScrollUpButton2 = React372.forwardRef(({ className, ...props }, ref) =
   })
 }));
 SelectScrollUpButton2.displayName = ScrollUpButton.displayName;
-var SelectScrollDownButton2 = React372.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx252(ScrollDownButton, {
+var SelectScrollDownButton2 = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx252(ScrollDownButton, {
   ref,
   className: cn("flex cursor-default items-center justify-center py-1", className),
   ...props,
@@ -26154,7 +26214,7 @@ var SelectScrollDownButton2 = React372.forwardRef(({ className, ...props }, ref)
   })
 }));
 SelectScrollDownButton2.displayName = ScrollDownButton.displayName;
-var SelectContent2 = React372.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx252(Portal2, {
+var SelectContent2 = React37.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx252(Portal2, {
   children: /* @__PURE__ */ jsxs5(Content2, {
     ref,
     className: cn(" border-2 border-black relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md font-brand bg-card-bg text-text shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className),
@@ -26171,13 +26231,13 @@ var SelectContent2 = React372.forwardRef(({ className, children, position = "pop
   })
 }));
 SelectContent2.displayName = Content2.displayName;
-var SelectLabel2 = React372.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx252(Label, {
+var SelectLabel2 = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx252(Label, {
   ref,
   className: cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className),
   ...props
 }));
 SelectLabel2.displayName = Label.displayName;
-var SelectItem2 = React372.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs5(Item, {
+var SelectItem2 = React37.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs5(Item, {
   ref,
   className: cn("relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden focus:bg-slate-200 dark:focus:bg-white/10 data-disabled:pointer-events-none data-disabled:opacity-50 font-brand", className),
   ...props,
@@ -26196,7 +26256,7 @@ var SelectItem2 = React372.forwardRef(({ className, children, ...props }, ref) =
   ]
 }));
 SelectItem2.displayName = Item.displayName;
-var SelectSeparator2 = React372.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx252(Separator, {
+var SelectSeparator2 = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx252(Separator, {
   ref,
   className: cn("-mx-1 my-1 h-px bg-muted", className),
   ...props
@@ -26229,19 +26289,19 @@ function composeEventHandlers2(originalEventHandler, ourEventHandler, { checkFor
 function createContextScope2(scopeName, createContextScopeDeps = []) {
   let defaultContexts = [];
   function createContext32(rootComponentName, defaultContext) {
-    const BaseContext = React38.createContext(defaultContext);
+    const BaseContext = React382.createContext(defaultContext);
     const index2 = defaultContexts.length;
     defaultContexts = [...defaultContexts, defaultContext];
     const Provider = (props) => {
       const { scope, children, ...context } = props;
       const Context = scope?.[scopeName]?.[index2] || BaseContext;
-      const value = React38.useMemo(() => context, Object.values(context));
+      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 = React38.useContext(Context);
+      const context = React382.useContext(Context);
       if (context)
         return context;
       if (defaultContext !== undefined)
@@ -26252,11 +26312,11 @@ function createContextScope2(scopeName, createContextScopeDeps = []) {
   }
   const createScope = () => {
     const scopeContexts = defaultContexts.map((defaultContext) => {
-      return React38.createContext(defaultContext);
+      return React382.createContext(defaultContext);
     });
     return function useScope(scope) {
       const contexts = scope?.[scopeName] || scopeContexts;
-      return React38.useMemo(() => ({ [`__scope${scopeName}`]: { ...scope, [scopeName]: contexts } }), [scope, contexts]);
+      return React382.useMemo(() => ({ [`__scope${scopeName}`]: { ...scope, [scopeName]: contexts } }), [scope, contexts]);
     };
   };
   createScope.scopeName = scopeName;
@@ -26277,7 +26337,7 @@ function composeContextScopes2(...scopes) {
         const currentScope = scopeProps[`__scope${scopeName}`];
         return { ...nextScopes2, ...currentScope };
       }, {});
-      return React38.useMemo(() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }), [nextScopes]);
+      return React382.useMemo(() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }), [nextScopes]);
     };
   };
   createScope.scopeName = baseScope.scopeName;
@@ -26285,22 +26345,22 @@ function composeContextScopes2(...scopes) {
 }
 function createSlot2(ownerName) {
   const SlotClone2 = /* @__PURE__ */ createSlotClone2(ownerName);
-  const Slot22 = React392.forwardRef((props, forwardedRef) => {
+  const Slot22 = React39.forwardRef((props, forwardedRef) => {
     const { children, ...slotProps } = props;
-    const childrenArray = React392.Children.toArray(children);
+    const childrenArray = React39.Children.toArray(children);
     const slottable = childrenArray.find(isSlottable3);
     if (slottable) {
       const newElement = slottable.props.children;
       const newChildren = childrenArray.map((child) => {
         if (child === slottable) {
-          if (React392.Children.count(newElement) > 1)
-            return React392.Children.only(null);
-          return React392.isValidElement(newElement) ? newElement.props.children : null;
+          if (React39.Children.count(newElement) > 1)
+            return React39.Children.only(null);
+          return React39.isValidElement(newElement) ? newElement.props.children : null;
         } else {
           return child;
         }
       });
-      return /* @__PURE__ */ jsx282(SlotClone2, { ...slotProps, ref: forwardedRef, children: React392.isValidElement(newElement) ? React392.cloneElement(newElement, undefined, newChildren) : null });
+      return /* @__PURE__ */ jsx282(SlotClone2, { ...slotProps, ref: forwardedRef, children: React39.isValidElement(newElement) ? React39.cloneElement(newElement, undefined, newChildren) : null });
     }
     return /* @__PURE__ */ jsx282(SlotClone2, { ...slotProps, ref: forwardedRef, children });
   });
@@ -26308,24 +26368,24 @@ function createSlot2(ownerName) {
   return Slot22;
 }
 function createSlotClone2(ownerName) {
-  const SlotClone2 = React392.forwardRef((props, forwardedRef) => {
+  const SlotClone2 = React39.forwardRef((props, forwardedRef) => {
     const { children, ...slotProps } = props;
-    if (React392.isValidElement(children)) {
+    if (React39.isValidElement(children)) {
       const childrenRef = getElementRef3(children);
       const props2 = mergeProps3(slotProps, children.props);
-      if (children.type !== React392.Fragment) {
+      if (children.type !== React39.Fragment) {
         props2.ref = forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef;
       }
-      return React392.cloneElement(children, props2);
+      return React39.cloneElement(children, props2);
     }
-    return React392.Children.count(children) > 1 ? React392.Children.only(null) : null;
+    return React39.Children.count(children) > 1 ? React39.Children.only(null) : null;
   });
   SlotClone2.displayName = `${ownerName}.SlotClone`;
   return SlotClone2;
 }
 var SLOTTABLE_IDENTIFIER2 = Symbol("radix.slottable");
 function isSlottable3(child) {
-  return React392.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER2;
+  return React39.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER2;
 }
 function mergeProps3(slotProps, childProps) {
   const overrideProps = { ...childProps };
@@ -26753,7 +26813,7 @@ var NODES2 = [
 ];
 var Primitive2 = NODES2.reduce((primitive, node) => {
   const Slot3 = createSlot2(`Primitive.${node}`);
-  const Node2 = React43.forwardRef((props, forwardedRef) => {
+  const Node2 = React432.forwardRef((props, forwardedRef) => {
     const { asChild, ...primitiveProps } = props;
     const Comp = asChild ? Slot3 : node;
     if (typeof window !== "undefined") {
@@ -40740,6 +40800,12 @@ var AudioForRendering2 = ({
 };
 var { validateMediaProps: validateMediaProps2 } = Internals;
 var audioSchema = {
+  src: {
+    type: "asset",
+    default: undefined,
+    description: "Source",
+    keyframable: false
+  },
   ...Internals.baseSchema,
   volume: {
     type: "number",
@@ -40850,6 +40916,24 @@ var Audio2 = Interactive.withSchema({
   schema: audioSchema,
   supportsEffects: false
 });
+var getVideoSequenceDuration = ({
+  durationInFrames,
+  loop,
+  playbackRate,
+  trimAfter,
+  trimBefore
+}) => {
+  if (loop || trimAfter === undefined) {
+    return durationInFrames;
+  }
+  const trimmedDuration = Internals.calculateMediaDuration({
+    trimAfter,
+    trimBefore,
+    playbackRate,
+    mediaDurationInFrames: Infinity
+  });
+  return Math.min(durationInFrames ?? Infinity, trimmedDuration);
+};
 var PRORES_DOCS_URL = "https://www.remotion.dev/docs/videos/prores";
 var proresDecoderNotEnabledMessage = (src) => {
   return `Cannot decode "${src}": it is encoded with Apple ProRes, which WebCodecs does not support natively. ` + `ProRes decoding is not enabled by default. Register the ProRes decoder by calling ` + `registerProresDecoder() from "@mediabunny/prores" in your entry point, before registerRoot(). ` + `See ${PRORES_DOCS_URL}. ` + `(This is required to decode a ProRes source for both preview and rendering — it is unrelated to exporting a video as ProRes.)`;
@@ -41624,6 +41708,12 @@ var VideoForRendering2 = ({
 };
 var { validateMediaTrimProps: validateMediaTrimProps2, resolveTrimProps: resolveTrimProps2, validateMediaProps: validateMediaProps22 } = Internals;
 var videoSchema = {
+  src: {
+    type: "asset",
+    default: undefined,
+    description: "Source",
+    keyframable: false
+  },
   ...Internals.baseSchema,
   volume: {
     type: "number",
@@ -41643,6 +41733,7 @@ var videoSchema = {
     hiddenFromList: false,
     keyframable: false
   },
+  muted: { type: "boolean", default: false, description: "Muted" },
   loop: { type: "boolean", default: false, description: "Loop" },
   ...Internals.transformSchema
 };
@@ -41801,6 +41892,13 @@ var VideoInner = ({
   const mediaStartsAt = Internals.useMediaStartsAt();
   const videoConfig = useVideoConfig();
   const sequenceDurationInFrames = Math.min(durationInFrames ?? Infinity, Math.max(0, videoConfig.durationInFrames - (from ?? 0)));
+  const videoSequenceDuration = getVideoSequenceDuration({
+    durationInFrames,
+    loop: loop ?? false,
+    playbackRate: playbackRate ?? 1,
+    trimAfter,
+    trimBefore
+  });
   const basicInfo = Internals.useBasicMediaInTimeline({
     src,
     volume,
@@ -41848,7 +41946,7 @@ var VideoInner = ({
   return /* @__PURE__ */ jsx65(Sequence, {
     layout: "none",
     from: from ?? 0,
-    durationInFrames: basicInfo.duration,
+    durationInFrames: videoSequenceDuration,
     freeze,
     _remotionInternalStack: stack,
     _remotionInternalIsMedia: isMedia,
@@ -43210,7 +43308,7 @@ import {
 import { BufferTarget, StreamTarget } from "mediabunny";
 
 // ../core/dist/esm/version.mjs
-var VERSION2 = "4.0.491";
+var VERSION2 = "4.0.493";
 
 // ../web-renderer/dist/esm/index.mjs
 import { AudioSample, VideoSample } from "mediabunny";