@remotion/studio 4.0.422 → 4.0.424

package/dist/components/ShowRulersProvider.js

@@ -19,6 +19,6 @@ const ShowRulersProvider = ({ children }) => {
             setEditorShowRulers,
         };
     }, [editorShowRulers, setEditorShowRulers]);
-    return ((0, jsx_runtime_1.jsx)(editor_rulers_1.EditorShowRulersContext.Provider, { value: editorShowRulersCtx, children: children }));
+    return (jsx_runtime_1.jsx(editor_rulers_1.EditorShowRulersContext.Provider, { value: editorShowRulersCtx, children: children }));
 };
 exports.ShowRulersProvider = ShowRulersProvider;

package/dist/components/SidebarCollapserControls.js

@@ -128,11 +128,13 @@ const SidebarCollapserControls = () => {
         };
     }, []);
     const toggleLeftAction = (0, react_1.useCallback)((color) => {
-        return ((0, jsx_runtime_1.jsx)("div", { style: colorStyle(color), title: toggleLeftTooltip, children: (0, jsx_runtime_1.jsx)("div", { style: leftIcon(color) }) }));
+        return (jsx_runtime_1.jsx("div", { style: colorStyle(color), title: toggleLeftTooltip, children: jsx_runtime_1.jsx("div", { style: leftIcon(color) }) }));
     }, [colorStyle, leftIcon, toggleLeftTooltip]);
     const toggleRightAction = (0, react_1.useCallback)((color) => {
-        return ((0, jsx_runtime_1.jsx)("div", { style: colorStyle(color), title: toggleRightTooltip, children: (0, jsx_runtime_1.jsx)("div", { style: rightIcon(color) }) }));
+        return (jsx_runtime_1.jsx("div", { style: colorStyle(color), title: toggleRightTooltip, children: jsx_runtime_1.jsx("div", { style: rightIcon(color) }) }));
     }, [colorStyle, rightIcon, toggleRightTooltip]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { onClick: toggleLeft, renderAction: toggleLeftAction }), (0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { onClick: toggleRight, renderAction: toggleRightAction })] }));
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsx(InlineAction_1.InlineAction, { onClick: toggleLeft, renderAction: toggleLeftAction }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { onClick: toggleRight, renderAction: toggleRightAction })
+        ] }));
 };
 exports.SidebarCollapserControls = SidebarCollapserControls;

package/dist/components/SidebarRenderButton.js

@@ -93,11 +93,11 @@ const SidebarRenderButton = ({ composition, visible }) => {
         setSidebarCollapsedState,
     ]);
     const renderAction = (0, react_1.useCallback)((color) => {
-        return (0, jsx_runtime_1.jsx)(render_1.ThinRenderIcon, { fill: color, svgProps: iconStyle });
+        return jsx_runtime_1.jsx(render_1.ThinRenderIcon, { fill: color, svgProps: iconStyle });
     }, [iconStyle]);
     if (!visible || connectionStatus !== 'connected') {
         return null;
     }
-    return (0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick });
+    return jsx_runtime_1.jsx(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick });
 };
 exports.SidebarRenderButton = SidebarRenderButton;

package/dist/components/SizeSelector.js

@@ -105,7 +105,7 @@ const SizeSelector = () => {
                 type: 'item',
                 value: newSize.size,
                 keyHint: newSize.size === 'auto' ? '0' : null,
-                leftItem: String(size.size) === String(newSize.size) ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
+                leftItem: String(size.size) === String(newSize.size) ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
                 subMenu: null,
                 quickSwitcherLabel: null,
             };
@@ -114,6 +114,6 @@ const SizeSelector = () => {
     if (!zoomable) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)("div", { style: style, "aria-label": accessibilityLabel, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { title: accessibilityLabel, style: comboStyle, selectedId: String(size.size), values: items }) }));
+    return (jsx_runtime_1.jsx("div", { style: style, "aria-label": accessibilityLabel, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { title: accessibilityLabel, style: comboStyle, selectedId: String(size.size), values: items }) }));
 };
 exports.SizeSelector = SizeSelector;

package/dist/components/Spinner.js

@@ -17,7 +17,8 @@ const Spinner = ({ size, duration }) => {
             height: size,
         };
     }, [size]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("style", { type: "text/css", children: `
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsx("style", { type: "text/css", children: `
 				@keyframes ${remotionSpinnerAnimation} {
           0% {
             opacity: 1;
@@ -30,12 +31,13 @@ const Spinner = ({ size, duration }) => {
         .${className} {
             animation: ${remotionSpinnerAnimation} ${duration}s linear infinite;
         }        
-			` }), (0, jsx_runtime_1.jsx)("svg", { style: style, viewBox: `0 0 ${viewBox} ${viewBox}`, children: new Array(lines).fill(true).map((_, index) => {
-                    return ((0, jsx_runtime_1.jsx)("path", { className: className, style: {
+			` }), jsx_runtime_1.jsx("svg", { style: style, viewBox: `0 0 ${viewBox} ${viewBox}`, children: new Array(lines).fill(true).map((_, index) => {
+                    return (jsx_runtime_1.jsx("path", { className: className, style: {
                             rotate: `${(index * Math.PI * 2) / lines}rad`,
                             transformOrigin: 'center center',
                             animationDelay: `${index * (duration / lines) - duration}s`,
                         }, d: translated, fill: colors_1.LIGHT_TEXT }, index));
-                }) })] }));
+                }) })
+        ] }));
 };
 exports.Spinner = Spinner;

package/dist/components/Splitter/SplitterContainer.js

@@ -46,6 +46,6 @@ const SplitterContainer = ({ orientation, children, defaultFlex, maxFlex, minFle
         persistFlex,
         ref,
     ]);
-    return ((0, jsx_runtime_1.jsx)(SplitterContext_1.SplitterContext.Provider, { value: value, children: (0, jsx_runtime_1.jsx)("div", { ref: ref, style: orientation === 'horizontal' ? exports.containerColumn : containerRow, children: children }) }));
+    return (jsx_runtime_1.jsx(SplitterContext_1.SplitterContext.Provider, { value: value, children: jsx_runtime_1.jsx("div", { ref: ref, style: orientation === 'horizontal' ? exports.containerColumn : containerRow, children: children }) }));
 };
 exports.SplitterContainer = SplitterContainer;

package/dist/components/Splitter/SplitterElement.js

@@ -27,6 +27,8 @@ const SplitterElement = ({ children, type, sticky }) => {
             backgroundColor: (0, remotion_1.interpolateColors)((0, remotion_1.random)(context.flexValue), [0, 1], ['red', 'blue']),
         };
     }, [context.flexValue, type]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: style, children: children }), (0, jsx_runtime_1.jsx)("div", { style: stickStyle, children: sticky !== null && sticky !== void 0 ? sticky : null })] }));
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsx("div", { style: style, children: children }), jsx_runtime_1.jsx("div", { style: stickStyle, children: sticky !== null && sticky !== void 0 ? sticky : null })
+        ] }));
 };
 exports.SplitterElement = SplitterElement;

package/dist/components/Splitter/SplitterHandle.js

@@ -144,7 +144,7 @@ const SplitterHandle = ({ allowToCollapse, onCollapse }) => {
             window.removeEventListener('mouseup', onMouseUp);
         };
     }, []);
-    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: [
+    return (jsx_runtime_1.jsx("div", { ref: ref, className: [
             'remotion-splitter',
             context.orientation === 'horizontal'
                 ? 'remotion-splitter-horizontal'

package/dist/components/StaticFilePreview.js

@@ -4,11 +4,11 @@ exports.StaticFilePreview = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
-const get_static_files_1 = require("../api/get-static-files");
 const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
 const FilePreview_1 = require("./FilePreview");
 const Preview_1 = require("./Preview");
+const use_static_files_1 = require("./use-static-files");
 const msgStyle = {
     fontSize: 13,
     color: 'white',
@@ -23,19 +23,19 @@ const errMsgStyle = {
 const StaticFilePreview = ({ currentAsset, assetMetadata }) => {
     const fileType = (0, Preview_1.getPreviewFileType)(currentAsset);
     const staticFileSrc = (0, remotion_1.staticFile)(currentAsset);
-    const staticFiles = (0, get_static_files_1.getStaticFiles)();
+    const staticFiles = (0, use_static_files_1.useStaticFiles)();
     const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)
         .previewServerState.type;
     const exists = staticFiles.find((file) => file.name === currentAsset);
     if (connectionStatus === 'disconnected') {
-        return (0, jsx_runtime_1.jsx)("div", { style: errMsgStyle, children: "Studio server disconnected" });
+        return jsx_runtime_1.jsx("div", { style: errMsgStyle, children: "Studio server disconnected" });
     }
     if (!exists) {
-        return ((0, jsx_runtime_1.jsxs)("div", { style: errMsgStyle, children: [currentAsset, " does not exist in your public folder."] }));
+        return (jsx_runtime_1.jsxs("div", { style: errMsgStyle, children: [currentAsset, " does not exist in your public folder."] }));
     }
     if (!currentAsset) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(FilePreview_1.FilePreview, { currentAsset: currentAsset, fileType: fileType, src: `${staticFileSrc}?date=${assetMetadata && assetMetadata.type === 'found' ? assetMetadata.fetchedAt : 0}`, assetMetadata: assetMetadata }));
+    return (jsx_runtime_1.jsx(FilePreview_1.FilePreview, { currentAsset: currentAsset, fileType: fileType, src: `${staticFileSrc}?date=${assetMetadata && assetMetadata.type === 'found' ? assetMetadata.fetchedAt : 0}`, assetMetadata: assetMetadata }));
 };
 exports.StaticFilePreview = StaticFilePreview;

package/dist/components/Tabs/index.js

@@ -16,7 +16,7 @@ const Tabs = ({ children, style }) => {
             ...style,
         };
     }, [style]);
-    return (0, jsx_runtime_1.jsx)("div", { style: definiteStyle, children: children });
+    return jsx_runtime_1.jsx("div", { style: definiteStyle, children: children });
 };
 exports.Tabs = Tabs;
 const selectorButton = {
@@ -53,6 +53,6 @@ const Tab = ({ children, onClick, style, selected }) => {
         boxShadow: selected ? 'none' : undefined,
         ...style,
     }), [hovered, selected, style]);
-    return ((0, jsx_runtime_1.jsx)("div", { style: definiteStyle, role: "button", onClick: onClick, tabIndex: tabIndex, onPointerLeave: onPointerLeave, onPointerEnter: onPointerEnter, children: children }));
+    return (jsx_runtime_1.jsx("div", { style: definiteStyle, role: "button", onClick: onClick, tabIndex: tabIndex, onPointerLeave: onPointerLeave, onPointerEnter: onPointerEnter, children: children }));
 };
 exports.Tab = Tab;

package/dist/components/Tabs/vertical.js

@@ -38,6 +38,6 @@ const VerticalTab = ({ children, onClick, style, selected }) => {
             ...style,
         };
     }, [hovered, selected, style]);
-    return ((0, jsx_runtime_1.jsx)("button", { style: definiteStyle, type: "button", onClick: onClick, tabIndex: tabIndex, onPointerLeave: onPointerLeave, onPointerEnter: onPointerEnter, children: children }));
+    return (jsx_runtime_1.jsx("button", { style: definiteStyle, type: "button", onClick: onClick, tabIndex: tabIndex, onPointerLeave: onPointerLeave, onPointerEnter: onPointerEnter, children: children }));
 };
 exports.VerticalTab = VerticalTab;

package/dist/components/TextViewer.js

@@ -21,6 +21,6 @@ const TextViewer = ({ src }) => {
             setTxt(text);
         });
     }, [src]);
-    return (0, jsx_runtime_1.jsxs)("div", { style: textStyle, children: [txt, " "] });
+    return jsx_runtime_1.jsxs("div", { style: textStyle, children: [txt, " "] });
 };
 exports.TextViewer = TextViewer;

package/dist/components/TimeValue.js

@@ -82,6 +82,8 @@ const TimeValue = () => {
     if (isStill) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { style: text, children: [(0, jsx_runtime_1.jsx)("div", { style: time, children: (0, render_frame_1.renderFrame)(frame, config.fps) }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { ref: ref, value: frame, onTextChange: onTextChange, onValueChange: onValueChange, rightAlign: true, status: "ok", style: frameStyle })] }));
+    return (jsx_runtime_1.jsxs("div", { style: text, children: [
+            jsx_runtime_1.jsx("div", { style: time, children: (0, render_frame_1.renderFrame)(frame, config.fps) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsx(InputDragger_1.InputDragger, { ref: ref, value: frame, onTextChange: onTextChange, onValueChange: onValueChange, rightAlign: true, status: "ok", style: frameStyle })
+        ] }));
 };
 exports.TimeValue = TimeValue;

package/dist/components/Timeline/LoopedIndicator.js

@@ -13,7 +13,7 @@ const width = {
 const icon = {
     height: 12,
 };
-const Icon = () => ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 512 512", style: icon, children: (0, jsx_runtime_1.jsx)("path", { fill: colors_1.LIGHT_COLOR, d: "M512 256c0 88.224-71.775 160-160 160H170.067l34.512 32.419c9.875 9.276 10.119 24.883.539 34.464l-10.775 10.775c-9.373 9.372-24.568 9.372-33.941 0l-92.686-92.686c-9.373-9.373-9.373-24.568 0-33.941l92.686-92.686c9.373-9.373 24.568-9.373 33.941 0l10.775 10.775c9.581 9.581 9.337 25.187-.539 34.464L170.067 352H352c52.935 0 96-43.065 96-96 0-13.958-2.996-27.228-8.376-39.204-4.061-9.039-2.284-19.626 4.723-26.633l12.183-12.183c11.499-11.499 30.965-8.526 38.312 5.982C505.814 205.624 512 230.103 512 256zM72.376 295.204C66.996 283.228 64 269.958 64 256c0-52.935 43.065-96 96-96h181.933l-34.512 32.419c-9.875 9.276-10.119 24.883-.539 34.464l10.775 10.775c9.373 9.372 24.568 9.372 33.941 0l92.686-92.686c9.373-9.373 9.373-24.568 0-33.941l-92.686-92.686c-9.373-9.373-24.568-9.373-33.941 0L306.882 29.12c-9.581 9.581-9.337 25.187.539 34.464L341.933 96H160C71.775 96 0 167.776 0 256c0 25.897 6.186 50.376 17.157 72.039 7.347 14.508 26.813 17.481 38.312 5.982l12.183-12.183c7.008-7.008 8.786-17.595 4.724-26.634z" }) }));
+const Icon = () => (jsx_runtime_1.jsx("svg", { viewBox: "0 0 512 512", style: icon, children: jsx_runtime_1.jsx("path", { fill: colors_1.LIGHT_COLOR, d: "M512 256c0 88.224-71.775 160-160 160H170.067l34.512 32.419c9.875 9.276 10.119 24.883.539 34.464l-10.775 10.775c-9.373 9.372-24.568 9.372-33.941 0l-92.686-92.686c-9.373-9.373-9.373-24.568 0-33.941l92.686-92.686c9.373-9.373 24.568-9.373 33.941 0l10.775 10.775c9.581 9.581 9.337 25.187-.539 34.464L170.067 352H352c52.935 0 96-43.065 96-96 0-13.958-2.996-27.228-8.376-39.204-4.061-9.039-2.284-19.626 4.723-26.633l12.183-12.183c11.499-11.499 30.965-8.526 38.312 5.982C505.814 205.624 512 230.103 512 256zM72.376 295.204C66.996 283.228 64 269.958 64 256c0-52.935 43.065-96 96-96h181.933l-34.512 32.419c-9.875 9.276-10.119 24.883-.539 34.464l10.775 10.775c9.373 9.372 24.568 9.372 33.941 0l92.686-92.686c9.373-9.373 9.373-24.568 0-33.941l-92.686-92.686c-9.373-9.373-24.568-9.373-33.941 0L306.882 29.12c-9.581 9.581-9.337 25.187.539 34.464L341.933 96H160C71.775 96 0 167.776 0 256c0 25.897 6.186 50.376 17.157 72.039 7.347 14.508 26.813 17.481 38.312 5.982l12.183-12.183c7.008-7.008 8.786-17.595 4.724-26.634z" }) }));
 const topLine = {
     top: 0,
     height: 2,
@@ -39,6 +39,8 @@ const bottomContainer = {
     alignItems: 'center',
 };
 const LoopedIndicator = () => {
-    return ((0, jsx_runtime_1.jsxs)("div", { style: width, children: [(0, jsx_runtime_1.jsx)(remotion_1.AbsoluteFill, { style: topContainer, children: (0, jsx_runtime_1.jsx)("div", { style: topLine }) }), (0, jsx_runtime_1.jsx)(remotion_1.AbsoluteFill, { style: bottomContainer, children: (0, jsx_runtime_1.jsx)("div", { style: bottomLine }) }), (0, jsx_runtime_1.jsx)(remotion_1.AbsoluteFill, { style: centerContainer, children: (0, jsx_runtime_1.jsx)(Icon, {}) })] }));
+    return (jsx_runtime_1.jsxs("div", { style: width, children: [
+            jsx_runtime_1.jsx(remotion_1.AbsoluteFill, { style: topContainer, children: jsx_runtime_1.jsx("div", { style: topLine }) }), jsx_runtime_1.jsx(remotion_1.AbsoluteFill, { style: bottomContainer, children: jsx_runtime_1.jsx("div", { style: bottomLine }) }), jsx_runtime_1.jsx(remotion_1.AbsoluteFill, { style: centerContainer, children: jsx_runtime_1.jsx(Icon, {}) })
+        ] }));
 };
 exports.LoopedIndicator = LoopedIndicator;

package/dist/components/Timeline/LoopedTimelineIndicators.js

@@ -14,10 +14,11 @@ const row = {
 };
 const LoopedTimelineIndicator = ({ loops }) => {
     const leftOver = loops % 1;
-    return ((0, jsx_runtime_1.jsxs)(remotion_1.AbsoluteFill, { style: row, children: [new Array(Math.floor(loops)).fill(true).map((_l, i) => {
-                return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment
+    return (jsx_runtime_1.jsxs(remotion_1.AbsoluteFill, { style: row, children: [new Array(Math.floor(loops)).fill(true).map((_l, i) => {
+                return (jsx_runtime_1.jsxs(react_1.default.Fragment
                 // eslint-disable-next-line
-                , { children: [(0, jsx_runtime_1.jsx)(layout_1.Flex, {}), i === loops - 1 ? null : (0, jsx_runtime_1.jsx)(LoopedIndicator_1.LoopedIndicator, {})] }, i));
-            }), leftOver > 0 ? (0, jsx_runtime_1.jsx)("div", { style: { flex: leftOver } }) : null] }));
+                , { children: [
+                        jsx_runtime_1.jsx(layout_1.Flex, {}), i === loops - 1 ? null : jsx_runtime_1.jsx(LoopedIndicator_1.LoopedIndicator, {})] }, i));
+            }), leftOver > 0 ? jsx_runtime_1.jsx("div", { style: { flex: leftOver } }) : null] }));
 };
 exports.LoopedTimelineIndicator = LoopedTimelineIndicator;

package/dist/components/Timeline/MaxTimelineTracks.js

@@ -20,6 +20,6 @@ const container = {
     paddingLeft: timeline_layout_1.TIMELINE_PADDING + 5,
 };
 const MaxTimelineTracksReached = () => {
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: ["Limited display to ", exports.MAX_TIMELINE_TRACKS, " tracks to sustain performance.", '', "You can change this by setting Config.setMaxTimelineTracks() in your remotion.config.ts file."] }));
+    return (jsx_runtime_1.jsxs("div", { style: container, children: ["Limited display to ", exports.MAX_TIMELINE_TRACKS, " tracks to sustain performance.", '', "You can change this by setting Config.setMaxTimelineTracks() in your remotion.config.ts file."] }));
 };
 exports.MaxTimelineTracksReached = MaxTimelineTracksReached;

package/dist/components/Timeline/Timeline.js

@@ -71,6 +71,10 @@ const Timeline = () => {
             overflowX: 'hidden',
         };
     }, [hasBeenCut, shown]);
-    return ((0, jsx_runtime_1.jsx)("div", { ref: timeline_refs_1.timelineVerticalScroll, style: container, className: 'css-reset ' + is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: (0, jsx_runtime_1.jsx)(TimelineWidthProvider_1.TimelineWidthProvider, { children: (0, jsx_runtime_1.jsx)("div", { style: inner, children: (0, jsx_runtime_1.jsxs)(SplitterContainer_1.SplitterContainer, { orientation: "vertical", defaultFlex: 0.2, id: "names-to-timeline", maxFlex: 0.5, minFlex: 0.15, children: [(0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "flexer", sticky: (0, jsx_runtime_1.jsx)(TimelineTimeIndicators_1.TimelineTimePlaceholders, {}), children: (0, jsx_runtime_1.jsx)(TimelineList_1.TimelineList, { timeline: shown }) }), (0, jsx_runtime_1.jsx)(SplitterHandle_1.SplitterHandle, { onCollapse: noop, allowToCollapse: "none" }), (0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "anti-flexer", sticky: null, children: (0, jsx_runtime_1.jsxs)(TimelineScrollable_1.TimelineScrollable, { children: [(0, jsx_runtime_1.jsx)(TimelineTracks_1.TimelineTracks, { timeline: shown, hasBeenCut: hasBeenCut }), (0, jsx_runtime_1.jsx)(TimelineInOutPointer_1.TimelineInOutPointer, {}), (0, jsx_runtime_1.jsx)(TimelinePlayCursorSyncer_1.TimelinePlayCursorSyncer, {}), (0, jsx_runtime_1.jsx)(TimelineDragHandler_1.TimelineDragHandler, {}), (0, jsx_runtime_1.jsx)(TimelineTimeIndicators_1.TimelineTimeIndicators, {}), (0, jsx_runtime_1.jsx)(TimelineSlider_1.TimelineSlider, {})] }) })] }) }) }) }));
+    return (jsx_runtime_1.jsx("div", { ref: timeline_refs_1.timelineVerticalScroll, style: container, className: 'css-reset ' + is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(TimelineWidthProvider_1.TimelineWidthProvider, { children: jsx_runtime_1.jsx("div", { style: inner, children: jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { orientation: "vertical", defaultFlex: 0.2, id: "names-to-timeline", maxFlex: 0.5, minFlex: 0.15, children: [
+                        jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { type: "flexer", sticky: jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimePlaceholders, {}), children: jsx_runtime_1.jsx(TimelineList_1.TimelineList, { timeline: shown }) }), jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { onCollapse: noop, allowToCollapse: "none" }), jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { type: "anti-flexer", sticky: null, children: jsx_runtime_1.jsxs(TimelineScrollable_1.TimelineScrollable, { children: [
+                                    jsx_runtime_1.jsx(TimelineTracks_1.TimelineTracks, { timeline: shown, hasBeenCut: hasBeenCut }), jsx_runtime_1.jsx(TimelineInOutPointer_1.TimelineInOutPointer, {}), jsx_runtime_1.jsx(TimelinePlayCursorSyncer_1.TimelinePlayCursorSyncer, {}), jsx_runtime_1.jsx(TimelineDragHandler_1.TimelineDragHandler, {}), jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimeIndicators, {}), jsx_runtime_1.jsx(TimelineSlider_1.TimelineSlider, {})
+                                ] }) })
+                    ] }) }) }) }));
 };
 exports.Timeline = Timeline;

package/dist/components/Timeline/TimelineCollapseToggle.js

@@ -10,9 +10,9 @@ const container = {
     alignItems: 'center',
 };
 const Icon = ({ color, ...props }) => {
-    return ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 8 10", ...props, style: { height: 10, width: 8 }, children: (0, jsx_runtime_1.jsx)("path", { d: "M 0 0 L 8 5 L 0 10 z", fill: color }) }));
+    return (jsx_runtime_1.jsx("svg", { viewBox: "0 0 8 10", ...props, style: { height: 10, width: 8 }, children: jsx_runtime_1.jsx("path", { d: "M 0 0 L 8 5 L 0 10 z", fill: color }) }));
 };
 const TimelineCollapseToggle = ({ collapsed, color }) => {
-    return ((0, jsx_runtime_1.jsx)("div", { style: collapsed ? container : { ...container, transform: 'rotate(90deg)' }, children: (0, jsx_runtime_1.jsx)(Icon, { color: color }) }));
+    return (jsx_runtime_1.jsx("div", { style: collapsed ? container : { ...container, transform: 'rotate(90deg)' }, children: jsx_runtime_1.jsx(Icon, { color: color }) }));
 };
 exports.TimelineCollapseToggle = TimelineCollapseToggle;

package/dist/components/Timeline/TimelineDragHandler.js

@@ -58,11 +58,12 @@ const TimelineDragHandler = () => {
     if (!canvasContent || canvasContent.type !== 'composition') {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)("div", { ref: timeline_refs_1.sliderAreaRef, style: containerStyle, children: video ? (0, jsx_runtime_1.jsx)(Inner, {}) : null }));
+    return (jsx_runtime_1.jsx("div", { ref: timeline_refs_1.sliderAreaRef, style: containerStyle, children: video ? jsx_runtime_1.jsx(Inner, {}) : null }));
 };
 exports.TimelineDragHandler = TimelineDragHandler;
 const Inner = () => {
-    var _a, _b, _c;
+    var _a;
+    var _b, _c;
     const videoConfig = (0, remotion_1.useVideoConfig)();
     const size = player_1.PlayerInternals.useElementSize(timeline_refs_1.scrollableRef, {
         triggerOnWindowResize: true,
@@ -456,5 +457,6 @@ const Inner = () => {
             },
         ];
     }, [setInAndOutFrames, videoConfig.id]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: style, onPointerDown: onPointerDown, children: [(0, jsx_runtime_1.jsx)("div", { style: inner, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME }), inFrame !== null && ((0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, { values: inContextMenu, children: (0, jsx_runtime_1.jsx)(TimelineInOutPointerHandle_1.TimelineInOutPointerHandle, { type: "in", atFrame: inFrame, dragging: inOutDragging.dragging === 'in' }) })), outFrame !== null && ((0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, { values: outContextMenu, children: (0, jsx_runtime_1.jsx)(TimelineInOutPointerHandle_1.TimelineInOutPointerHandle, { type: "out", dragging: inOutDragging.dragging === 'out', atFrame: outFrame }) }))] }));
+    return (jsx_runtime_1.jsxs("div", { style: style, onPointerDown: onPointerDown, children: [
+            jsx_runtime_1.jsx("div", { style: inner, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME }), inFrame !== null && (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: inContextMenu, children: jsx_runtime_1.jsx(TimelineInOutPointerHandle_1.TimelineInOutPointerHandle, { type: "in", atFrame: inFrame, dragging: inOutDragging.dragging === 'in' }) })), outFrame !== null && (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: outContextMenu, children: jsx_runtime_1.jsx(TimelineInOutPointerHandle_1.TimelineInOutPointerHandle, { type: "out", dragging: inOutDragging.dragging === 'out', atFrame: outFrame }) }))] }));
 };

package/dist/components/Timeline/TimelineInOutPointer.js

@@ -23,11 +23,11 @@ const TimelineInOutPointer = () => {
     if (!videoConfig || timelineWidth === null) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [inFrame !== null && ((0, jsx_runtime_1.jsx)("div", { ref: exports.inMarkerAreaRef, style: {
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [inFrame !== null && (jsx_runtime_1.jsx("div", { ref: exports.inMarkerAreaRef, style: {
                     ...areaHighlight,
                     left: 0,
                     width: (0, get_left_of_timeline_slider_1.getXPositionOfItemInTimelineImperatively)(inFrame, videoConfig.durationInFrames, timelineWidth),
-                } })), outFrame !== null && ((0, jsx_runtime_1.jsx)("div", { ref: exports.outMarkerAreaRef, style: {
+                } })), outFrame !== null && (jsx_runtime_1.jsx("div", { ref: exports.outMarkerAreaRef, style: {
                     ...areaHighlight,
                     left: (0, get_left_of_timeline_slider_1.getXPositionOfItemInTimelineImperatively)(outFrame, videoConfig.durationInFrames, timelineWidth),
                     width: timelineWidth -

package/dist/components/Timeline/TimelineInOutPointerHandle.js

@@ -29,7 +29,7 @@ const InnerTimelineInOutPointerHandle = ({ atFrame, dragging, timelineWidth, typ
             transform: `translateX(${(0, get_left_of_timeline_slider_1.getXPositionOfItemInTimelineImperatively)(atFrame, videoConfig.durationInFrames, timelineWidth)}px)`,
         };
     }, [atFrame, dragging, timelineWidth, videoConfig.durationInFrames]);
-    return ((0, jsx_runtime_1.jsx)("div", { ref: type === 'in' ? exports.inPointerHandle : exports.outPointerHandle, style: style }));
+    return (jsx_runtime_1.jsx("div", { ref: type === 'in' ? exports.inPointerHandle : exports.outPointerHandle, style: style }));
 };
 const TimelineInOutPointerHandle = ({ dragging, type, atFrame, }) => {
     const timelineWidth = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
@@ -38,6 +38,6 @@ const TimelineInOutPointerHandle = ({ dragging, type, atFrame, }) => {
     if (timelineWidth === null) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(InnerTimelineInOutPointerHandle, { atFrame: atFrame, dragging: dragging, timelineWidth: timelineWidth, type: type }));
+    return (jsx_runtime_1.jsx(InnerTimelineInOutPointerHandle, { atFrame: atFrame, dragging: dragging, timelineWidth: timelineWidth, type: type }));
 };
 exports.TimelineInOutPointerHandle = TimelineInOutPointerHandle;

package/dist/components/Timeline/TimelineLayerEye.js

@@ -32,9 +32,9 @@ const TimelineLayerEye = ({ onInvoked, hidden, type }) => {
             return null;
         }
         if (type === 'speaker') {
-            return ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 10 14", fill: "none", style: speakerIcon, children: (0, jsx_runtime_1.jsx)("path", { d: "M9.40938 0.0869018C9.76875 0.249402 10 0.605652 10 0.999402V12.9994C10 13.3932 9.76875 13.7494 9.40938 13.9119C9.05 14.0744 8.62813 14.0088 8.33438 13.7463L4.11875 9.9994H2C0.896875 9.9994 0 9.10253 0 7.9994V5.9994C0 4.89628 0.896875 3.9994 2 3.9994H4.11875L8.33438 0.252527C8.62813 -0.0099732 9.05 -0.0724732 9.40938 0.0869018Z", fill: color }) }));
+            return (jsx_runtime_1.jsx("svg", { viewBox: "0 0 10 14", fill: "none", style: speakerIcon, children: jsx_runtime_1.jsx("path", { d: "M9.40938 0.0869018C9.76875 0.249402 10 0.605652 10 0.999402V12.9994C10 13.3932 9.76875 13.7494 9.40938 13.9119C9.05 14.0744 8.62813 14.0088 8.33438 13.7463L4.11875 9.9994H2C0.896875 9.9994 0 9.10253 0 7.9994V5.9994C0 4.89628 0.896875 3.9994 2 3.9994H4.11875L8.33438 0.252527C8.62813 -0.0099732 9.05 -0.0724732 9.40938 0.0869018Z", fill: color }) }));
         }
-        return ((0, jsx_runtime_1.jsx)("svg", { style: eyeIcon, viewBox: "0 0 24 16", fill: "none", children: (0, jsx_runtime_1.jsx)("path", { d: "M24 7.551C24 7.551 19.748 16 12.015 16C4.835 16 0 7.551 0 7.551C0 7.551 4.446 0 12.015 0C19.709 0 24 7.551 24 7.551ZM17 8C17 5.243 14.757 3 12 3C9.243 3 7 5.243 7 8C7 10.757 9.243 13 12 13C14.757 13 17 10.757 17 8Z", fill: color }) }));
+        return (jsx_runtime_1.jsx("svg", { style: eyeIcon, viewBox: "0 0 24 16", fill: "none", children: jsx_runtime_1.jsx("path", { d: "M24 7.551C24 7.551 19.748 16 12.015 16C4.835 16 0 7.551 0 7.551C0 7.551 4.446 0 12.015 0C19.709 0 24 7.551 24 7.551ZM17 8C17 5.243 14.757 3 12 3C9.243 3 7 5.243 7 8C7 10.757 9.243 13 12 13C14.757 13 17 10.757 17 8Z", fill: color }) }));
     }, [hidden, type]);
     const onPointerDown = (0, react_1.useCallback)((e) => {
         if (e.button !== 0) {
@@ -51,6 +51,6 @@ const TimelineLayerEye = ({ onInvoked, hidden, type }) => {
             onInvoked(layerPointedDown);
         }
     }, [onInvoked]);
-    return ((0, jsx_runtime_1.jsx)("div", { style: container, onPointerEnter: onPointerEnter, onPointerDown: onPointerDown, children: renderAction(colors_1.LIGHT_COLOR) }));
+    return (jsx_runtime_1.jsx("div", { style: container, onPointerEnter: onPointerEnter, onPointerDown: onPointerDown, children: renderAction(colors_1.LIGHT_COLOR) }));
 };
 exports.TimelineLayerEye = TimelineLayerEye;

package/dist/components/Timeline/TimelineList.js

@@ -18,8 +18,9 @@ const TimelineList = ({ timeline }) => {
         triggerOnWindowResize: false,
     });
     const isCompact = size ? size.width < 250 : false;
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, style: container, children: [(0, jsx_runtime_1.jsx)(TimelineTimeIndicators_1.TimelineTimePadding, {}), timeline.map((track) => {
-                return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(TimelineListItem_1.TimelineListItem, { nestedDepth: track.depth, sequence: track.sequence, isCompact: isCompact }, track.sequence.id) }, track.sequence.id));
+    return (jsx_runtime_1.jsxs("div", { ref: ref, style: container, children: [
+            jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimePadding, {}), timeline.map((track) => {
+                return (jsx_runtime_1.jsx("div", { children: jsx_runtime_1.jsx(TimelineListItem_1.TimelineListItem, { nestedDepth: track.depth, sequence: track.sequence, isCompact: isCompact }, track.sequence.id) }, track.sequence.id));
             })] }));
 };
 exports.TimelineList = TimelineList;

package/dist/components/Timeline/TimelineListItem.js

@@ -48,6 +48,8 @@ const TimelineListItem = ({ nestedDepth, sequence, isCompact }) => {
             borderBottom: `1px solid ${colors_1.TIMELINE_TRACK_SEPARATOR}`,
         };
     }, [sequence.type]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: outer, children: [(0, jsx_runtime_1.jsx)(TimelineLayerEye_1.TimelineLayerEye, { type: sequence.type === 'audio' ? 'speaker' : 'eye', hidden: isItemHidden, onInvoked: onToggleVisibility }), (0, jsx_runtime_1.jsx)("div", { style: padder }), sequence.parent && nestedDepth > 0 ? (0, jsx_runtime_1.jsx)("div", { style: space }) : null, (0, jsx_runtime_1.jsx)(TimelineStack_1.TimelineStack, { sequence: sequence, isCompact: isCompact })] }));
+    return (jsx_runtime_1.jsxs("div", { style: outer, children: [
+            jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: sequence.type === 'audio' ? 'speaker' : 'eye', hidden: isItemHidden, onInvoked: onToggleVisibility }), jsx_runtime_1.jsx("div", { style: padder }), sequence.parent && nestedDepth > 0 ? jsx_runtime_1.jsx("div", { style: space }) : null, jsx_runtime_1.jsx(TimelineStack_1.TimelineStack, { sequence: sequence, isCompact: isCompact })
+        ] }));
 };
 exports.TimelineListItem = TimelineListItem;

package/dist/components/Timeline/TimelineScrollable.js

@@ -21,6 +21,6 @@ const TimelineScrollable = ({ children }) => {
             minHeight: '100%',
         };
     }, []);
-    return ((0, jsx_runtime_1.jsx)("div", { ref: timeline_refs_1.scrollableRef, style: outer, className: is_menu_item_1.HORIZONTAL_SCROLLBAR_CLASSNAME, children: (0, jsx_runtime_1.jsx)("div", { style: containerStyle, children: children }) }));
+    return (jsx_runtime_1.jsx("div", { ref: timeline_refs_1.scrollableRef, style: outer, className: is_menu_item_1.HORIZONTAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx("div", { style: containerStyle, children: children }) }));
 };
 exports.TimelineScrollable = TimelineScrollable;

package/dist/components/Timeline/TimelineSequence.js

@@ -20,7 +20,7 @@ const TimelineSequence = ({ s }) => {
     if (windowWidth === null) {
         return null;
     }
-    return (0, jsx_runtime_1.jsx)(Inner, { windowWidth: windowWidth, s: s });
+    return jsx_runtime_1.jsx(Inner, { windowWidth: windowWidth, s: s });
 };
 exports.TimelineSequence = TimelineSequence;
 const Inner = ({ s, windowWidth }) => {
@@ -80,7 +80,7 @@ const Inner = ({ s, windowWidth }) => {
     if (maxMediaDuration === null) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { style: style, title: s.displayName, children: [premountWidth ? ((0, jsx_runtime_1.jsx)("div", { style: {
+    return (jsx_runtime_1.jsxs("div", { style: style, title: s.displayName, children: [premountWidth ? (jsx_runtime_1.jsx("div", { style: {
                     width: premountWidth,
                     height: '100%',
                     background: `repeating-linear-gradient(
@@ -91,7 +91,7 @@ const Inner = ({ s, windowWidth }) => {
 							rgba(255, 255, 255, ${isPremounting ? 0.5 : 0.2}) 4px
 						)`,
                     position: 'absolute',
-                } })) : null, postmountWidth ? ((0, jsx_runtime_1.jsx)("div", { style: {
+                } })) : null, postmountWidth ? (jsx_runtime_1.jsx("div", { style: {
                     width: postmountWidth,
                     height: '100%',
                     background: `repeating-linear-gradient(
@@ -103,13 +103,13 @@ const Inner = ({ s, windowWidth }) => {
 						)`,
                     position: 'absolute',
                     right: 0,
-                } })) : null, s.type === 'audio' ? ((0, jsx_runtime_1.jsx)(AudioWaveform_1.AudioWaveform, { src: s.src, doesVolumeChange: s.doesVolumeChange, visualizationWidth: width, startFrom: s.startMediaFrom, durationInFrames: s.duration, volume: s.volume, playbackRate: s.playbackRate })) : null, s.type === 'video' ? ((0, jsx_runtime_1.jsx)(TimelineVideoInfo_1.TimelineVideoInfo, { src: s.src, visualizationWidth: width, naturalWidth: naturalWidth, trimBefore: s.startMediaFrom, durationInFrames: s.duration, playbackRate: s.playbackRate })) : null, s.loopDisplay === undefined ? null : ((0, jsx_runtime_1.jsx)(LoopedTimelineIndicators_1.LoopedTimelineIndicator, { loops: s.loopDisplay.numberOfTimes })), s.type !== 'audio' &&
+                } })) : null, s.type === 'audio' ? (jsx_runtime_1.jsx(AudioWaveform_1.AudioWaveform, { src: s.src, doesVolumeChange: s.doesVolumeChange, visualizationWidth: width, startFrom: s.startMediaFrom, durationInFrames: s.duration, volume: s.volume, playbackRate: s.playbackRate })) : null, s.type === 'video' ? (jsx_runtime_1.jsx(TimelineVideoInfo_1.TimelineVideoInfo, { src: s.src, visualizationWidth: width, naturalWidth: naturalWidth, trimBefore: s.startMediaFrom, durationInFrames: s.duration, playbackRate: s.playbackRate })) : null, s.loopDisplay === undefined ? null : (jsx_runtime_1.jsx(LoopedTimelineIndicators_1.LoopedTimelineIndicator, { loops: s.loopDisplay.numberOfTimes })), s.type !== 'audio' &&
                 s.type !== 'video' &&
                 s.loopDisplay === undefined &&
-                (isInRange || isPremounting || isPostmounting) ? ((0, jsx_runtime_1.jsx)("div", { style: {
+                (isInRange || isPremounting || isPostmounting) ? (jsx_runtime_1.jsx("div", { style: {
                     paddingLeft: 5 + (premountWidth !== null && premountWidth !== void 0 ? premountWidth : 0),
                     height: '100%',
                     display: 'flex',
                     alignItems: 'center',
-                }, children: (0, jsx_runtime_1.jsx)(TimelineSequenceFrame_1.TimelineSequenceFrame, { premounted: isPremounting, postmounted: isPostmounting ? s.duration - 1 : null, roundedFrame: roundedFrame }) })) : null] }, s.id));
+                }, children: jsx_runtime_1.jsx(TimelineSequenceFrame_1.TimelineSequenceFrame, { premounted: isPremounting, postmounted: isPostmounting ? s.duration - 1 : null, roundedFrame: roundedFrame }) })) : null] }, s.id));
 };

package/dist/components/Timeline/TimelineSequenceFrame.js

@@ -9,7 +9,7 @@ const relativeFrameStyle = {
     opacity: 0.5,
 };
 const TimelineSequenceFrame = ({ roundedFrame, premounted, postmounted }) => {
-    return ((0, jsx_runtime_1.jsx)("div", { style: relativeFrameStyle, children: premounted
+    return (jsx_runtime_1.jsx("div", { style: relativeFrameStyle, children: premounted
             ? '0 (Premounted)'
             : postmounted !== null
                 ? `${postmounted} (Postmounted)`

package/dist/components/Timeline/TimelineSlider.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 export declare const redrawTimelineSliderFast: React.RefObject<{
-    draw: (frame: number, width?: number) => void;
+    draw: (frame: number, width?: number | undefined) => void;
 } | null>;
 export declare const TimelineSlider: React.FC;

package/dist/components/Timeline/TimelineSlider.js

@@ -28,7 +28,7 @@ const TimelineSlider = () => {
     if (videoConfig === null || timelineWidth === null) {
         return null;
     }
-    return (0, jsx_runtime_1.jsx)(Inner, {});
+    return jsx_runtime_1.jsx(Inner, {});
 };
 exports.TimelineSlider = TimelineSlider;
 const Inner = () => {
@@ -49,7 +49,8 @@ const Inner = () => {
     (0, react_1.useImperativeHandle)(exports.redrawTimelineSliderFast, () => {
         return {
             draw: (frame, width) => {
-                var _a, _b;
+                var _a;
+                var _b;
                 const { current } = ref;
                 if (!current) {
                     throw new Error('unexpectedly did not have ref to timelineslider');
@@ -75,5 +76,7 @@ const Inner = () => {
             current.removeEventListener('scroll', onScroll);
         };
     }, []);
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, style: style, children: [(0, jsx_runtime_1.jsx)("div", { style: line }), (0, jsx_runtime_1.jsx)(TimelineSliderHandle_1.TimelineSliderHandle, {})] }));
+    return (jsx_runtime_1.jsxs("div", { ref: ref, style: style, children: [
+            jsx_runtime_1.jsx("div", { style: line }), jsx_runtime_1.jsx(TimelineSliderHandle_1.TimelineSliderHandle, {})
+        ] }));
 };

package/dist/components/Timeline/TimelineSliderHandle.js

@@ -9,6 +9,6 @@ const container = {
     marginLeft: -8,
 };
 const TimelineSliderHandle = () => {
-    return ((0, jsx_runtime_1.jsx)("div", { style: container, children: (0, jsx_runtime_1.jsx)("svg", { width: 17, viewBox: "0 0 159 212", children: (0, jsx_runtime_1.jsx)("path", { d: "M17.0234375,1.07763419 L143.355469,1.07763419 C151.63974,1.07763419 158.355469,7.79336295 158.355469,16.0776342 L158.355469,69.390507 C158.355469,73.7938677 156.420655,77.9748242 153.064021,80.8248415 L89.3980057,134.881757 C83.7986799,139.635978 75.5802263,139.635978 69.9809005,134.881757 L6.66764807,81.1243622 C3.0872392,78.0843437 1.0234375,73.6246568 1.0234375,68.9277387 L1.0234375,17.0776342 C1.0234375,8.2410782 8.1868815,1.07763419 17.0234375,1.07763419 Z", fill: "#f02c00" }) }) }));
+    return (jsx_runtime_1.jsx("div", { style: container, children: jsx_runtime_1.jsx("svg", { width: 17, viewBox: "0 0 159 212", children: jsx_runtime_1.jsx("path", { d: "M17.0234375,1.07763419 L143.355469,1.07763419 C151.63974,1.07763419 158.355469,7.79336295 158.355469,16.0776342 L158.355469,69.390507 C158.355469,73.7938677 156.420655,77.9748242 153.064021,80.8248415 L89.3980057,134.881757 C83.7986799,139.635978 75.5802263,139.635978 69.9809005,134.881757 L6.66764807,81.1243622 C3.0872392,78.0843437 1.0234375,73.6246568 1.0234375,68.9277387 L1.0234375,17.0776342 C1.0234375,8.2410782 8.1868815,1.07763419 17.0234375,1.07763419 Z", fill: "#f02c00" }) }) }));
 };
 exports.TimelineSliderHandle = TimelineSliderHandle;

package/dist/components/Timeline/TimelineStack/index.js

@@ -169,8 +169,11 @@ const TimelineStack = ({ isCompact, sequence }) => {
     const text = sequence.displayName.length > 1000
         ? sequence.displayName.slice(0, 1000) + '...'
         : sequence.displayName;
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { onPointerEnter: onTitlePointerEnter, onPointerLeave: onTitlePointerLeave, title: originalLocation
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsx("div", { onPointerEnter: onTitlePointerEnter, onPointerLeave: onTitlePointerLeave, title: originalLocation
                     ? (0, source_attribution_1.getOriginalSourceAttribution)(originalLocation)
-                    : text || '<Sequence>', style: titleStyle, onClick: onClickTitle, children: text || '<Sequence>' }), isCompact || !originalLocation ? null : ((0, jsx_runtime_1.jsx)("div", { onPointerEnter: onStackPointerEnter, onPointerLeave: onStackPointerLeave, onClick: onClickStack, style: style, children: (0, source_attribution_1.getOriginalSourceAttribution)(originalLocation) })), opening ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(Spinner_1.Spinner, { duration: 0.5, size: 12 })] })) : null] }));
+                    : text || '<Sequence>', style: titleStyle, onClick: onClickTitle, children: text || '<Sequence>' }), isCompact || !originalLocation ? null : (jsx_runtime_1.jsx("div", { onPointerEnter: onStackPointerEnter, onPointerLeave: onStackPointerLeave, onClick: onClickStack, style: style, children: (0, source_attribution_1.getOriginalSourceAttribution)(originalLocation) })), opening ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                    jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(Spinner_1.Spinner, { duration: 0.5, size: 12 })
+                ] })) : null] }));
 };
 exports.TimelineStack = TimelineStack;

package/dist/components/Timeline/TimelineTimeIndicators.js

@@ -48,11 +48,11 @@ const timeValue = {
     borderBottom: `${timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM}px solid ${colors_1.TIMELINE_TRACK_SEPARATOR}`,
 };
 const TimelineTimePlaceholders = () => {
-    return ((0, jsx_runtime_1.jsx)("div", { style: timeValue, children: (0, jsx_runtime_1.jsx)(TimeValue_1.TimeValue, {}) }));
+    return (jsx_runtime_1.jsx("div", { style: timeValue, children: jsx_runtime_1.jsx(TimeValue_1.TimeValue, {}) }));
 };
 exports.TimelineTimePlaceholders = TimelineTimePlaceholders;
 const TimelineTimePadding = () => {
-    return ((0, jsx_runtime_1.jsx)("div", { style: {
+    return (jsx_runtime_1.jsx("div", { style: {
             height: exports.TIMELINE_TIME_INDICATOR_HEIGHT,
         } }));
 };
@@ -66,7 +66,7 @@ const TimelineTimeIndicators = () => {
     if (video === null) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(Inner, { durationInFrames: video.durationInFrames, fps: video.fps, windowWidth: sliderTrack }));
+    return (jsx_runtime_1.jsx(Inner, { durationInFrames: video.durationInFrames, fps: video.fps, windowWidth: sliderTrack }));
 };
 exports.TimelineTimeIndicators = TimelineTimeIndicators;
 const Inner = ({ windowWidth, durationInFrames, fps }) => {
@@ -148,7 +148,7 @@ const Inner = ({ windowWidth, durationInFrames, fps }) => {
             return !alreadyUsed;
         });
     }, [durationInFrames, fps, windowWidth]);
-    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, style: style, children: ticks.map((t) => {
-            return ((0, jsx_runtime_1.jsx)("div", { style: t.style, children: t.showTime ? ((0, jsx_runtime_1.jsx)("div", { style: tickLabel, children: (0, render_frame_1.renderFrame)(t.frame, fps) })) : null }, t.frame));
+    return (jsx_runtime_1.jsx("div", { ref: ref, style: style, children: ticks.map((t) => {
+            return (jsx_runtime_1.jsx("div", { style: t.style, children: t.showTime ? (jsx_runtime_1.jsx("div", { style: tickLabel, children: (0, render_frame_1.renderFrame)(t.frame, fps) })) : null }, t.frame));
         }) }));
 };

package/dist/components/Timeline/TimelineTracks.js

@@ -23,14 +23,16 @@ const TimelineTracks = ({ timeline, hasBeenCut }) => {
             width: 100 + '%',
         };
     }, []);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: timelineStyle, children: [(0, jsx_runtime_1.jsxs)("div", { style: content, children: [(0, jsx_runtime_1.jsx)(TimelineTimeIndicators_1.TimelineTimePadding, {}), timeline.map((track) => {
+    return (jsx_runtime_1.jsxs("div", { style: timelineStyle, children: [
+            jsx_runtime_1.jsxs("div", { style: content, children: [
+                    jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimePadding, {}), timeline.map((track) => {
                         if ((0, is_collapsed_1.isTrackHidden)(track)) {
                             return null;
                         }
-                        return ((0, jsx_runtime_1.jsx)("div", { style: {
+                        return (jsx_runtime_1.jsx("div", { style: {
                                 height: (0, timeline_layout_1.getTimelineLayerHeight)(track.sequence.type === 'video' ? 'video' : 'other'),
                                 marginBottom: timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM,
-                            }, children: (0, jsx_runtime_1.jsx)(TimelineSequence_1.TimelineSequence, { s: track.sequence }) }, track.sequence.id));
-                    })] }), hasBeenCut ? (0, jsx_runtime_1.jsx)(MaxTimelineTracks_1.MaxTimelineTracksReached, {}) : null] }));
+                            }, children: jsx_runtime_1.jsx(TimelineSequence_1.TimelineSequence, { s: track.sequence }) }, track.sequence.id));
+                    })] }), hasBeenCut ? jsx_runtime_1.jsx(MaxTimelineTracks_1.MaxTimelineTracksReached, {}) : null] }));
 };
 exports.TimelineTracks = TimelineTracks;

package/dist/components/Timeline/TimelineVideoInfo.js

@@ -283,6 +283,6 @@ const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, trimBefore,
         trimBefore,
         visualizationWidth,
     ]);
-    return (0, jsx_runtime_1.jsx)("div", { ref: ref, style: containerStyle });
+    return jsx_runtime_1.jsx("div", { ref: ref, style: containerStyle });
 };
 exports.TimelineVideoInfo = TimelineVideoInfo;

package/dist/components/Timeline/TimelineWidthProvider.js

@@ -12,6 +12,6 @@ const TimelineWidthProvider = ({ children }) => {
         triggerOnWindowResize: false,
         shouldApplyCssTransforms: true,
     });
-    return ((0, jsx_runtime_1.jsx)(exports.TimelineWidthContext.Provider, { value: (_a = size === null || size === void 0 ? void 0 : size.width) !== null && _a !== void 0 ? _a : null, children: children }));
+    return (jsx_runtime_1.jsx(exports.TimelineWidthContext.Provider, { value: (_a = size === null || size === void 0 ? void 0 : size.width) !== null && _a !== void 0 ? _a : null, children: children }));
 };
 exports.TimelineWidthProvider = TimelineWidthProvider;