@remotion/cli 4.0.0-preload.13 → 4.0.0-spawn.13

package/dist/editor/components/Splitter/SplitterHandle.js

@@ -14,7 +14,7 @@ const containerColumn = {
     width: exports.SPLITTER_HANDLE_SIZE,
     cursor: 'col-resize',
 };
-const SplitterHandle = () => {
+const SplitterHandle = ({ allowToCollapse, onCollapse }) => {
     const context = (0, react_1.useContext)(SplitterContext_1.SplitterContext);
     if (!context) {
         throw new Error('Cannot find splitter context');
@@ -32,7 +32,7 @@ const SplitterHandle = () => {
         if (!current) {
             return;
         }
-        const getNewValue = (e) => {
+        const getNewValue = (e, clamp) => {
             if (!context.isDragging.current) {
                 throw new Error('cannot get value if not dragging');
             }
@@ -49,7 +49,10 @@ const SplitterHandle = () => {
                     (height - exports.SPLITTER_HANDLE_SIZE));
             })();
             const newFlex = context.flexValue + change;
-            return Math.min(context.maxFlex, Math.max(context.minFlex, newFlex));
+            if (clamp) {
+                return Math.min(context.maxFlex, Math.max(context.minFlex, newFlex));
+            }
+            return newFlex;
         };
         const onPointerDown = (e) => {
             var _a;
@@ -59,7 +62,10 @@ const SplitterHandle = () => {
             };
             (_a = ref.current) === null || _a === void 0 ? void 0 : _a.classList.add('remotion-splitter-active');
             window.addEventListener('pointerup', (ev) => {
-                context.persistFlex(getNewValue(ev));
+                if (!context.isDragging.current) {
+                    return;
+                }
+                context.persistFlex(getNewValue(ev, true));
                 cleanup();
                 setLastPointerUp(Date.now());
             }, { once: true });
@@ -67,8 +73,16 @@ const SplitterHandle = () => {
         };
         const onPointerMove = (e) => {
             if (context.isDragging.current) {
-                const val = getNewValue(e);
+                const val = getNewValue(e, true);
                 context.setFlexValue(val);
+                if (allowToCollapse) {
+                    const unclamped = getNewValue(e, false);
+                    if (unclamped < context.minFlex / 2) {
+                        cleanup();
+                        onCollapse();
+                        setLastPointerUp(Date.now());
+                    }
+                }
             }
         };
         const cleanup = () => {
@@ -85,7 +99,14 @@ const SplitterHandle = () => {
                 cleanup();
             }
         };
-    }, [context, context.domRect, context.flexValue, lastPointerUp]);
-    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: "remotion-splitter", style: context.orientation === 'horizontal' ? containerRow : containerColumn }, void 0));
+    }, [
+        allowToCollapse,
+        context,
+        context.domRect,
+        context.flexValue,
+        lastPointerUp,
+        onCollapse,
+    ]);
+    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: "remotion-splitter", style: context.orientation === 'horizontal' ? containerRow : containerColumn }));
 };
 exports.SplitterHandle = SplitterHandle;

package/dist/editor/components/Thumbnail.js

@@ -71,6 +71,6 @@ const Thumbnail = ({ composition, targetHeight, targetWidth, frameToDisplay }) =
         return (_a = composition.defaultProps) !== null && _a !== void 0 ? _a : {};
     }, [composition.defaultProps]);
     const ThumbnailComponent = composition.component;
-    return ((0, jsx_runtime_1.jsx)("div", { style: container, children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: null, children: (0, jsx_runtime_1.jsx)("div", { style: outer, children: (0, jsx_runtime_1.jsx)("div", { style: inner, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.Timeline.TimelineContext.Provider, { value: timelineState, children: (0, jsx_runtime_1.jsx)(ThumbnailComponent, { ...props }, void 0) }, void 0) }, void 0) }, void 0) }, void 0) }, void 0));
+    return ((0, jsx_runtime_1.jsx)("div", { style: container, children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: null, children: (0, jsx_runtime_1.jsx)("div", { style: outer, children: (0, jsx_runtime_1.jsx)("div", { style: inner, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.Timeline.TimelineContext.Provider, { value: timelineState, children: (0, jsx_runtime_1.jsx)(ThumbnailComponent, { ...props }) }) }) }) }) }));
 };
 exports.Thumbnail = Thumbnail;

package/dist/editor/components/TimeValue.js

@@ -33,6 +33,6 @@ 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) }, void 0), ' ', (0, jsx_runtime_1.jsxs)("div", { style: frameStyle, children: [frame, " ", (0, jsx_runtime_1.jsxs)("span", { style: frameStyle, children: ["(", config.fps, " fps)"] }, void 0)] }, void 0)] }, void 0));
+    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.jsxs)("div", { style: frameStyle, children: [frame, " ", (0, jsx_runtime_1.jsxs)("span", { style: frameStyle, children: ["(", config.fps, " fps)"] })] })] }));
 };
 exports.TimeValue = TimeValue;

package/dist/editor/components/Timeline/LoopedIndicator.js

@@ -13,7 +13,7 @@ const icon = {
     height: 12,
     width: 12,
 };
-const Icon = () => ((0, jsx_runtime_1.jsx)("svg", { "aria-hidden": "true", focusable: "false", "data-prefix": "fas", "data-icon": "repeat", className: "svg-inline--fa fa-repeat fa-w-16", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", style: icon, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", 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" }, void 0) }, void 0));
+const Icon = () => ((0, jsx_runtime_1.jsx)("svg", { "aria-hidden": "true", focusable: "false", "data-prefix": "fas", "data-icon": "repeat", className: "svg-inline--fa fa-repeat fa-w-16", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", style: icon, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", 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: 10,
@@ -39,6 +39,6 @@ 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 }, void 0) }, void 0), (0, jsx_runtime_1.jsx)(remotion_1.AbsoluteFill, { style: bottomContainer, children: (0, jsx_runtime_1.jsx)("div", { style: bottomLine }, void 0) }, void 0), (0, jsx_runtime_1.jsx)(remotion_1.AbsoluteFill, { style: centerContainer, children: (0, jsx_runtime_1.jsx)(Icon, {}, void 0) }, void 0)] }, void 0));
+    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, {}) })] }));
 };
 exports.LoopedIndicator = LoopedIndicator;

package/dist/editor/components/Timeline/LoopedTimelineIndicators.js

@@ -13,10 +13,10 @@ const row = {
     flexDirection: 'row',
 };
 const LoopedTimelineIndicator = ({ loops }) => {
-    return ((0, jsx_runtime_1.jsx)(remotion_1.AbsoluteFill, { style: row, children: new Array(loops).fill(true).map((l, i) => {
+    return ((0, jsx_runtime_1.jsx)(remotion_1.AbsoluteFill, { style: row, children: new Array(loops).fill(true).map((_l, i) => {
             return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment
             // eslint-disable-next-line
-            , { children: [(0, jsx_runtime_1.jsx)(layout_1.Flex, {}, void 0), i === loops - 1 ? null : (0, jsx_runtime_1.jsx)(LoopedIndicator_1.LoopedIndicator, {}, void 0)] }, i));
-        }) }, void 0));
+            , { children: [(0, jsx_runtime_1.jsx)(layout_1.Flex, {}), i === loops - 1 ? null : (0, jsx_runtime_1.jsx)(LoopedIndicator_1.LoopedIndicator, {})] }, i));
+        }) }));
 };
 exports.LoopedTimelineIndicator = LoopedTimelineIndicator;

package/dist/editor/components/Timeline/MaxTimelineTracks.js

@@ -16,6 +16,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.Preview.setMaxTimelineTracks() in your remotion.config.ts file."] }, void 0));
+    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.Preview.setMaxTimelineTracks() in your remotion.config.ts file."] }));
 };
 exports.MaxTimelineTracksReached = MaxTimelineTracksReached;

package/dist/editor/components/Timeline/Timeline.js

@@ -25,6 +25,7 @@ const container = {
     height: 0,
     overflow: 'auto',
 };
+const noop = () => undefined;
 const Timeline = () => {
     const { sequences } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
@@ -72,6 +73,6 @@ const Timeline = () => {
     if (!videoConfig) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)("div", { style: container, className: "css-reset", 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", children: (0, jsx_runtime_1.jsx)(TimelineList_1.TimelineList, { dispatchStateChange: dispatch, viewState: state, timeline: shown }, void 0) }, void 0), (0, jsx_runtime_1.jsx)(SplitterHandle_1.SplitterHandle, {}, void 0), (0, jsx_runtime_1.jsxs)(SplitterElement_1.SplitterElement, { type: "anti-flexer", children: [(0, jsx_runtime_1.jsx)(TimelineTracks_1.TimelineTracks, { viewState: state, timeline: shown, fps: videoConfig.fps, hasBeenCut: withoutHidden.length > shown.length }, void 0), (0, jsx_runtime_1.jsx)(TimelineInOutPointer_1.TimelineInOutPointer, {}, void 0), (0, jsx_runtime_1.jsx)(TimelineDragHandler_1.TimelineDragHandler, {}, void 0), (0, jsx_runtime_1.jsx)(TimelineSlider_1.TimelineSlider, {}, void 0)] }, void 0)] }, void 0) }, void 0) }, void 0));
+    return ((0, jsx_runtime_1.jsx)("div", { style: container, className: "css-reset", 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", children: (0, jsx_runtime_1.jsx)(TimelineList_1.TimelineList, { dispatchStateChange: dispatch, viewState: state, timeline: shown }) }), (0, jsx_runtime_1.jsx)(SplitterHandle_1.SplitterHandle, { onCollapse: noop, allowToCollapse: false }), (0, jsx_runtime_1.jsxs)(SplitterElement_1.SplitterElement, { type: "anti-flexer", children: [(0, jsx_runtime_1.jsx)(TimelineTracks_1.TimelineTracks, { viewState: state, timeline: shown, fps: videoConfig.fps, hasBeenCut: withoutHidden.length > shown.length }), (0, jsx_runtime_1.jsx)(TimelineInOutPointer_1.TimelineInOutPointer, {}), (0, jsx_runtime_1.jsx)(TimelineDragHandler_1.TimelineDragHandler, {}), (0, jsx_runtime_1.jsx)(TimelineSlider_1.TimelineSlider, {})] })] }) }) }));
 };
 exports.Timeline = Timeline;

package/dist/editor/components/Timeline/TimelineCollapseToggle.js

@@ -11,9 +11,9 @@ const container = {
     alignItems: 'center',
 };
 const Icon = (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: colors_1.LIGHT_COLOR }, void 0) }, void 0));
+    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: colors_1.LIGHT_COLOR }) }));
 };
 const TimelineCollapseToggle = ({ collapsed }) => {
-    return ((0, jsx_runtime_1.jsx)("div", { style: collapsed ? container : { ...container, transform: 'rotate(90deg)' }, children: (0, jsx_runtime_1.jsx)(Icon, {}, void 0) }, void 0));
+    return ((0, jsx_runtime_1.jsx)("div", { style: collapsed ? container : { ...container, transform: 'rotate(90deg)' }, children: (0, jsx_runtime_1.jsx)(Icon, {}) }));
 };
 exports.TimelineCollapseToggle = TimelineCollapseToggle;

package/dist/editor/components/Timeline/TimelineDragHandler.js

@@ -221,6 +221,6 @@ const TimelineDragHandler = () => {
             window.removeEventListener('pointerup', onPointerUpInOut);
         };
     }, [inOutDragging.dragging, onPointerMoveInOut, onPointerUpInOut]);
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: timeline_refs_1.sliderAreaRef, style: container, onPointerDown: onPointerDown, children: [(0, jsx_runtime_1.jsx)("div", { style: inner }, void 0), inFrame !== null && ((0, jsx_runtime_1.jsx)(TimelineInOutPointerHandle_1.TimelineInOutPointerHandle, { type: "in", atFrame: inFrame, dragging: inOutDragging.dragging === 'in' }, void 0)), outFrame !== null && ((0, jsx_runtime_1.jsx)(TimelineInOutPointerHandle_1.TimelineInOutPointerHandle, { type: "out", dragging: inOutDragging.dragging === 'out', atFrame: outFrame }, void 0))] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: timeline_refs_1.sliderAreaRef, style: container, onPointerDown: onPointerDown, children: [(0, jsx_runtime_1.jsx)("div", { style: inner }), inFrame !== null && ((0, jsx_runtime_1.jsx)(TimelineInOutPointerHandle_1.TimelineInOutPointerHandle, { type: "in", atFrame: inFrame, dragging: inOutDragging.dragging === 'in' })), outFrame !== null && ((0, jsx_runtime_1.jsx)(TimelineInOutPointerHandle_1.TimelineInOutPointerHandle, { type: "out", dragging: inOutDragging.dragging === 'out', atFrame: outFrame }))] }));
 };
 exports.TimelineDragHandler = TimelineDragHandler;

package/dist/editor/components/Timeline/TimelineInOutPointer.js

@@ -25,10 +25,10 @@ const TimelineInOutPointer = () => {
                     ...areaHighlight,
                     left: 0,
                     width: get(inFrame !== null && inFrame !== void 0 ? inFrame : 0),
-                } }, void 0)), outFrame !== null && ((0, jsx_runtime_1.jsx)("div", { ref: exports.outMarkerAreaRef, style: {
+                } })), outFrame !== null && ((0, jsx_runtime_1.jsx)("div", { ref: exports.outMarkerAreaRef, style: {
                     ...areaHighlight,
                     left: get(outFrame),
                     width: width - get(outFrame),
-                } }, void 0))] }, void 0));
+                } }))] }));
 };
 exports.TimelineInOutPointer = TimelineInOutPointer;

package/dist/editor/components/Timeline/TimelineInOutPointerHandle.js

@@ -26,6 +26,6 @@ const TimelineInOutPointerHandle = ({ dragging, type, atFrame }) => {
             transform: `translateX(${get(atFrame)}px)`,
         };
     }, [atFrame, dragging, get]);
-    return ((0, jsx_runtime_1.jsx)("div", { ref: type === 'in' ? exports.inPointerHandle : exports.outPointerHandle, style: style }, void 0));
+    return ((0, jsx_runtime_1.jsx)("div", { ref: type === 'in' ? exports.inPointerHandle : exports.outPointerHandle, style: style }));
 };
 exports.TimelineInOutPointerHandle = TimelineInOutPointerHandle;

package/dist/editor/components/Timeline/TimelineList.js

@@ -13,6 +13,6 @@ const TimelineList = ({ timeline, viewState, dispatchStateChange }) => {
     return ((0, jsx_runtime_1.jsx)("div", { style: container, children: timeline.map((track, i) => {
             const beforeDepth = i === 0 ? 0 : timeline[i - 1].depth;
             return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(TimelineListItem_1.TimelineListItem, { hash: track.hash, dispatchStateChange: dispatchStateChange, collapsed: (0, is_collapsed_1.isTrackCollapsed)(track.hash, viewState), nestedDepth: track.depth, sequence: track.sequence, beforeDepth: beforeDepth, canCollapse: track.canCollapse }, track.sequence.id) }, track.sequence.id));
-        }) }, void 0));
+        }) }));
 };
 exports.TimelineList = TimelineList;

package/dist/editor/components/Timeline/TimelineListItem.js

@@ -85,6 +85,6 @@ const TimelineListItem = ({ nestedDepth, sequence, collapsed, beforeDepth, dispa
     const text = sequence.displayName.length > 80
         ? sequence.displayName.slice(0, 80) + '...'
         : sequence.displayName;
-    return ((0, jsx_runtime_1.jsxs)("div", { style: outer, children: [(0, jsx_runtime_1.jsx)("div", { style: padder }, void 0), canCollapse ? ((0, jsx_runtime_1.jsx)("button", { tabIndex: tabIndex, type: "button", style: collapserButton, onClick: toggleCollapse, children: (0, jsx_runtime_1.jsx)(TimelineCollapseToggle_1.TimelineCollapseToggle, { collapsed: collapsed }, void 0) }, void 0)) : ((0, jsx_runtime_1.jsx)("div", { style: collapser }, void 0)), sequence.parent && nestedDepth > 0 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: smallSpace }, void 0), (0, jsx_runtime_1.jsx)("div", { style: hookContainer, children: (0, jsx_runtime_1.jsx)("div", { style: hookStyle }, void 0) }, void 0), (0, jsx_runtime_1.jsx)("div", { style: space }, void 0)] }, void 0)) : null, (0, jsx_runtime_1.jsxs)("div", { style: textStyle, children: [text || 'Untitled', (0, jsx_runtime_1.jsx)(TimelineSequenceFrame_1.TimelineSequenceFrame, { duration: sequence.duration, from: sequence.from }, void 0)] }, void 0)] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: outer, children: [(0, jsx_runtime_1.jsx)("div", { style: padder }), canCollapse ? ((0, jsx_runtime_1.jsx)("button", { tabIndex: tabIndex, type: "button", style: collapserButton, onClick: toggleCollapse, children: (0, jsx_runtime_1.jsx)(TimelineCollapseToggle_1.TimelineCollapseToggle, { collapsed: collapsed }) })) : ((0, jsx_runtime_1.jsx)("div", { style: collapser })), sequence.parent && nestedDepth > 0 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: smallSpace }), (0, jsx_runtime_1.jsx)("div", { style: hookContainer, children: (0, jsx_runtime_1.jsx)("div", { style: hookStyle }) }), (0, jsx_runtime_1.jsx)("div", { style: space })] })) : null, (0, jsx_runtime_1.jsxs)("div", { style: textStyle, children: [text || 'Untitled', (0, jsx_runtime_1.jsx)(TimelineSequenceFrame_1.TimelineSequenceFrame, { duration: sequence.duration, from: sequence.from })] })] }));
 };
 exports.TimelineListItem = TimelineListItem;

package/dist/editor/components/Timeline/TimelineSequence.js

@@ -67,6 +67,6 @@ const TimelineSequence = ({ s, fps }) => {
         };
     }, []);
     const thumbnailWidth = timeline_layout_1.TIMELINE_LAYER_HEIGHT * (video.width / video.height);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: style, title: s.displayName, children: [(0, jsx_runtime_1.jsx)("div", { style: row, children: richTimeline && s.type === 'sequence' ? ((0, jsx_runtime_1.jsx)(Thumbnail_1.Thumbnail, { targetHeight: timeline_layout_1.TIMELINE_LAYER_HEIGHT, targetWidth: thumbnailWidth, composition: video, frameToDisplay: Math.floor(s.from + s.duration / 2) }, void 0)) : null }, void 0), 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, fps: fps, volume: s.volume, setMaxMediaDuration: setMaxMediaDuration }, void 0)) : null, s.type === 'video' ? (0, jsx_runtime_1.jsx)(TimelineVideoInfo_1.TimelineVideoInfo, { src: s.src }, void 0) : null, s.showLoopTimesInTimeline === undefined ? null : ((0, jsx_runtime_1.jsx)(LoopedTimelineIndicators_1.LoopedTimelineIndicator, { loops: s.showLoopTimesInTimeline }, void 0))] }, s.id));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: style, title: s.displayName, children: [(0, jsx_runtime_1.jsx)("div", { style: row, children: richTimeline && s.type === 'sequence' ? ((0, jsx_runtime_1.jsx)(Thumbnail_1.Thumbnail, { targetHeight: timeline_layout_1.TIMELINE_LAYER_HEIGHT, targetWidth: thumbnailWidth, composition: video, frameToDisplay: Math.floor(s.from + s.duration / 2) })) : 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, fps: fps, volume: s.volume, setMaxMediaDuration: setMaxMediaDuration })) : null, s.type === 'video' ? (0, jsx_runtime_1.jsx)(TimelineVideoInfo_1.TimelineVideoInfo, { src: s.src }) : null, s.showLoopTimesInTimeline === undefined ? null : ((0, jsx_runtime_1.jsx)(LoopedTimelineIndicators_1.LoopedTimelineIndicator, { loops: s.showLoopTimesInTimeline }))] }, s.id));
 };
 exports.TimelineSequence = TimelineSequence;

package/dist/editor/components/Timeline/TimelineSequenceFrame.js

@@ -26,6 +26,6 @@ The current time within the sequence.
 Call \`useCurrentFrame()\` within the sequence to get the time programmatically.
 
 Call \`const {durationInFrames} = useVideoConfig()\` to get the duration of the sequence.
-`.trim(), style: relativeFrameStyle, children: [(0, render_frame_1.renderFrame)(relativeFrame, fps), " (", relativeFrame, ")"] }, void 0));
+`.trim(), style: relativeFrameStyle, children: [(0, render_frame_1.renderFrame)(relativeFrame, fps), " (", relativeFrame, ")"] }));
 };
 exports.TimelineSequenceFrame = TimelineSequenceFrame;

package/dist/editor/components/Timeline/TimelineSlider.js

@@ -28,6 +28,6 @@ const TimelineSlider = () => {
             transform: `translateX(${left}px)`,
         };
     }, [timelinePosition, get]);
-    return ((0, jsx_runtime_1.jsx)("div", { style: style, children: (0, jsx_runtime_1.jsx)("div", { style: line, children: (0, jsx_runtime_1.jsx)(TimelineSliderHandle_1.TimelineSliderHandle, {}, void 0) }, void 0) }, void 0));
+    return ((0, jsx_runtime_1.jsx)("div", { style: style, children: (0, jsx_runtime_1.jsx)("div", { style: line, children: (0, jsx_runtime_1.jsx)(TimelineSliderHandle_1.TimelineSliderHandle, {}) }) }));
 };
 exports.TimelineSlider = TimelineSlider;

package/dist/editor/components/Timeline/TimelineSliderHandle.js

@@ -11,6 +11,6 @@ const style = {
     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", version: "1.1", style: style, 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" }, void 0) }, void 0) }, void 0));
+    return ((0, jsx_runtime_1.jsx)("div", { style: container, children: (0, jsx_runtime_1.jsx)("svg", { width: 17, viewBox: "0 0 159 212", version: "1.1", style: style, 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" }) }) }));
 };
 exports.TimelineSliderHandle = TimelineSliderHandle;

package/dist/editor/components/Timeline/TimelineTracks.js

@@ -26,7 +26,7 @@ const TimelineTracks = ({ timeline, fps, viewState, hasBeenCut }) => {
                     if ((0, is_collapsed_1.isTrackHidden)(track, timeline, viewState)) {
                         return null;
                     }
-                    return ((0, jsx_runtime_1.jsx)("div", { style: inner, children: (0, jsx_runtime_1.jsx)(TimelineSequence_1.TimelineSequence, { fps: fps, s: track.sequence }, void 0) }, track.sequence.id));
-                }) }, void 0), hasBeenCut ? (0, jsx_runtime_1.jsx)(MaxTimelineTracks_1.MaxTimelineTracksReached, {}, void 0) : null] }, void 0));
+                    return ((0, jsx_runtime_1.jsx)("div", { style: inner, children: (0, jsx_runtime_1.jsx)(TimelineSequence_1.TimelineSequence, { fps: fps, s: track.sequence }) }, track.sequence.id));
+                }) }), hasBeenCut ? (0, jsx_runtime_1.jsx)(MaxTimelineTracks_1.MaxTimelineTracksReached, {}) : null] }));
 };
 exports.TimelineTracks = TimelineTracks;

package/dist/editor/components/Timeline/TimelineVideoInfo.js

@@ -45,6 +45,6 @@ const TimelineVideoInfo = ({ src }) => {
     if (!videoMetadata) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)("div", { style: containerStyle, children: (0, jsx_runtime_1.jsx)("svg", { style: svgStyle, role: "img", viewBox: "0 0 576 512", children: (0, jsx_runtime_1.jsx)("path", { style: pathStyle, fill: "currentColor", d: "M336.2 64H47.8C21.4 64 0 85.4 0 111.8v288.4C0 426.6 21.4 448 47.8 448h288.4c26.4 0 47.8-21.4 47.8-47.8V111.8c0-26.4-21.4-47.8-47.8-47.8zm189.4 37.7L416 177.3v157.4l109.6 75.5c21.2 14.6 50.4-.3 50.4-25.8V127.5c0-25.4-29.1-40.4-50.4-25.8z" }, void 0) }, void 0) }, void 0));
+    return ((0, jsx_runtime_1.jsx)("div", { style: containerStyle, children: (0, jsx_runtime_1.jsx)("svg", { style: svgStyle, role: "img", viewBox: "0 0 576 512", children: (0, jsx_runtime_1.jsx)("path", { style: pathStyle, fill: "currentColor", d: "M336.2 64H47.8C21.4 64 0 85.4 0 111.8v288.4C0 426.6 21.4 448 47.8 448h288.4c26.4 0 47.8-21.4 47.8-47.8V111.8c0-26.4-21.4-47.8-47.8-47.8zm189.4 37.7L416 177.3v157.4l109.6 75.5c21.2 14.6 50.4-.3 50.4-25.8V127.5c0-25.4-29.1-40.4-50.4-25.8z" }) }) }));
 };
 exports.TimelineVideoInfo = TimelineVideoInfo;

package/dist/editor/components/TimelineInOutToggle.js

@@ -153,6 +153,6 @@ const TimelineInOutPointToggle = () => {
     if (isStill) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { title: getTooltipText('In (I)'), "aria-label": getTooltipText('In (I)'), onClick: onInMark, disabled: timelinePosition === 0, children: (0, jsx_runtime_1.jsx)(timelineInOutPointer_1.TimelineInPointer, { color: inFrame === null ? 'white' : 'var(--blue)', style: style }, void 0) }, void 0), (0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { title: getTooltipText('Out (O)'), "aria-label": getTooltipText('Out (O)'), onClick: onOutMark, disabled: timelinePosition === videoConfig.durationInFrames - 1, children: (0, jsx_runtime_1.jsx)(timelineInOutPointer_1.TimelineOutPointer, { color: outFrame === null ? 'white' : 'var(--blue)', style: style }, void 0) }, void 0)] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { title: getTooltipText('In (I)'), "aria-label": getTooltipText('In (I)'), onClick: onInMark, disabled: timelinePosition === 0, children: (0, jsx_runtime_1.jsx)(timelineInOutPointer_1.TimelineInPointer, { color: inFrame === null ? 'white' : 'var(--blue)', style: style }) }), (0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { title: getTooltipText('Out (O)'), "aria-label": getTooltipText('Out (O)'), onClick: onOutMark, disabled: timelinePosition === videoConfig.durationInFrames - 1, children: (0, jsx_runtime_1.jsx)(timelineInOutPointer_1.TimelineOutPointer, { color: outFrame === null ? 'white' : 'var(--blue)', style: style }) })] }));
 };
 exports.TimelineInOutPointToggle = TimelineInOutPointToggle;

package/dist/editor/components/TopPanel.js

@@ -2,8 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TopPanel = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const use_compact_ui_1 = require("../helpers/use-compact-ui");
+const sidebar_1 = require("../state/sidebar");
 const Canvas_1 = require("./Canvas");
+const CollapsedCompositionSelector_1 = require("./CollapsedCompositionSelector");
 const CompositionSelector_1 = require("./CompositionSelector");
+const InitialCompositionLoader_1 = require("./InitialCompositionLoader");
 const MenuToolbar_1 = require("./MenuToolbar");
 const PreviewToolbar_1 = require("./PreviewToolbar");
 const SplitterContainer_1 = require("./Splitter/SplitterContainer");
@@ -29,6 +34,23 @@ const leftContainer = {
     display: 'flex',
 };
 const TopPanel = () => {
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)(MenuToolbar_1.MenuToolbar, {}, void 0), (0, jsx_runtime_1.jsx)("div", { style: row, children: (0, jsx_runtime_1.jsxs)(SplitterContainer_1.SplitterContainer, { minFlex: 0.15, maxFlex: 0.4, defaultFlex: 0.2, id: "sidebar-to-preview", orientation: "vertical", children: [(0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "flexer", children: (0, jsx_runtime_1.jsx)("div", { style: leftContainer, className: "css-reset", children: (0, jsx_runtime_1.jsx)(CompositionSelector_1.CompositionSelector, {}, void 0) }, void 0) }, void 0), (0, jsx_runtime_1.jsx)(SplitterHandle_1.SplitterHandle, {}, void 0), (0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "anti-flexer", children: (0, jsx_runtime_1.jsx)("div", { style: canvasContainer, children: (0, jsx_runtime_1.jsx)(Canvas_1.Canvas, {}, void 0) }, void 0) }, void 0)] }, void 0) }, void 0), (0, jsx_runtime_1.jsx)(PreviewToolbar_1.PreviewToolbar, {}, void 0)] }, void 0));
+    const compactUi = (0, use_compact_ui_1.useCompactUI)();
+    const { setSidebarCollapsedState, sidebarCollapsedState } = (0, react_1.useContext)(sidebar_1.SidebarContext);
+    const actualState = (0, react_1.useMemo)(() => {
+        if (sidebarCollapsedState === 'collapsed') {
+            return 'collapsed';
+        }
+        if (sidebarCollapsedState === 'expanded') {
+            return 'expanded';
+        }
+        return compactUi ? 'collapsed' : 'expanded';
+    }, [compactUi, sidebarCollapsedState]);
+    const onCollapse = (0, react_1.useCallback)(() => {
+        setSidebarCollapsedState('collapsed');
+    }, [setSidebarCollapsedState]);
+    const onExpand = (0, react_1.useCallback)(() => {
+        setSidebarCollapsedState('expanded');
+    }, [setSidebarCollapsedState]);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)(InitialCompositionLoader_1.InitialCompositionLoader, {}), (0, jsx_runtime_1.jsx)(MenuToolbar_1.MenuToolbar, {}), (0, jsx_runtime_1.jsxs)("div", { style: row, children: [actualState === 'collapsed' ? ((0, jsx_runtime_1.jsx)(CollapsedCompositionSelector_1.CollapsedCompositionSelector, { onExpand: onExpand })) : null, (0, jsx_runtime_1.jsxs)(SplitterContainer_1.SplitterContainer, { minFlex: 0.15, maxFlex: 0.4, defaultFlex: 0.2, id: "sidebar-to-preview", orientation: "vertical", children: [actualState === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "flexer", children: (0, jsx_runtime_1.jsx)("div", { style: leftContainer, className: "css-reset", children: (0, jsx_runtime_1.jsx)(CompositionSelector_1.CompositionSelector, {}) }) })) : null, actualState === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterHandle_1.SplitterHandle, { allowToCollapse: true, onCollapse: onCollapse })) : null, (0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "anti-flexer", children: (0, jsx_runtime_1.jsx)("div", { style: canvasContainer, children: (0, jsx_runtime_1.jsx)(Canvas_1.Canvas, {}) }) })] })] }), (0, jsx_runtime_1.jsx)(PreviewToolbar_1.PreviewToolbar, {})] }));
 };
 exports.TopPanel = TopPanel;

package/dist/editor/components/UpdateCheck.js

@@ -53,6 +53,6 @@ const UpdateCheck = () => {
     if (!info.updateAvailable) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)("button", { tabIndex: tabIndex, style: buttonStyle, onClick: openModal, type: "button", children: "Update available!" }, void 0));
+    return ((0, jsx_runtime_1.jsx)("button", { tabIndex: tabIndex, style: buttonStyle, onClick: openModal, type: "button", children: "Update available!" }));
 };
 exports.UpdateCheck = UpdateCheck;

package/dist/editor/components/UpdateModal/UpdateModal.js

@@ -38,6 +38,6 @@ const UpdateModal = ({ info }) => {
         setSelectedModal(null);
     }, [setSelectedModal]);
     const command = commands[info.packageManager];
-    return ((0, jsx_runtime_1.jsxs)(ModalContainer_1.ModalContainer, { onOutsideClick: onQuit, onEscape: onQuit, children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.NewCompHeader, { title: "Update available" }, void 0), (0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)("p", { children: "A new update for Remotion is available! Run the following command:" }, void 0), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)(layout_1.Flex, { children: (0, jsx_runtime_1.jsx)("pre", { onClick: () => (0, copy_text_1.copyCmd)(command), style: code, children: command }, void 0) }, void 0), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }, void 0), (0, jsx_runtime_1.jsx)(CopyButton_1.CopyButton, { textToCopy: command, label: "Copy command", labelWhenCopied: "Copied!" }, void 0)] }, void 0), (0, jsx_runtime_1.jsxs)("p", { children: ["This will upgrade Remotion from ", info.currentVersion, " to", ' ', info.latestVersion, "."] }, void 0), (0, jsx_runtime_1.jsxs)("p", { children: ["Read the", ' ', (0, jsx_runtime_1.jsx)("a", { style: link, target: "_blank", href: "https://github.com/remotion-dev/remotion/releases", children: "Release notes" }, void 0), ' ', "to know what", "'s", " new in Remotion."] }, void 0)] }, void 0)] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)(ModalContainer_1.ModalContainer, { onOutsideClick: onQuit, onEscape: onQuit, children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.NewCompHeader, { title: "Update available" }), (0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)("p", { children: "A new update for Remotion is available! Run the following command:" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)(layout_1.Flex, { children: (0, jsx_runtime_1.jsx)("pre", { onClick: () => (0, copy_text_1.copyCmd)(command), style: code, children: command }) }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)(CopyButton_1.CopyButton, { textToCopy: command, label: "Copy command", labelWhenCopied: "Copied!" })] }), (0, jsx_runtime_1.jsxs)("p", { children: ["This will upgrade Remotion from ", info.currentVersion, " to", ' ', info.latestVersion, "."] }), (0, jsx_runtime_1.jsxs)("p", { children: ["Read the", ' ', (0, jsx_runtime_1.jsx)("a", { style: link, target: "_blank", href: "https://github.com/remotion-dev/remotion/releases", children: "Release notes" }), ' ', "to know what", "'s", " new in Remotion."] })] })] }));
 };
 exports.UpdateModal = UpdateModal;

package/dist/editor/components/layout.js

@@ -12,11 +12,11 @@ const Spacing = ({ x = 0, y = 0 }) => {
             height: y * exports.SPACING_UNIT,
         };
     }, [x, y]);
-    return (0, jsx_runtime_1.jsx)("div", { style: style }, void 0);
+    return (0, jsx_runtime_1.jsx)("div", { style: style });
 };
 exports.Spacing = Spacing;
 const flex = { flex: 1 };
-const Flex = ({ children }) => (0, jsx_runtime_1.jsx)("div", { style: flex, children: children }, void 0);
+const Flex = ({ children }) => (0, jsx_runtime_1.jsx)("div", { style: flex, children: children });
 exports.Flex = Flex;
 const Row = ({ children, justify, className, align, style = {} }) => {
     const finalStyle = (0, react_1.useMemo)(() => {
@@ -28,7 +28,7 @@ const Row = ({ children, justify, className, align, style = {} }) => {
             alignItems: align !== null && align !== void 0 ? align : 'flex-start',
         };
     }, [align, justify, style]);
-    return ((0, jsx_runtime_1.jsx)("div", { className: className, style: finalStyle, children: children }, void 0));
+    return ((0, jsx_runtime_1.jsx)("div", { className: className, style: finalStyle, children: children }));
 };
 exports.Row = Row;
 const Column = ({ children, justify, className, align, style = {} }) => {
@@ -41,6 +41,6 @@ const Column = ({ children, justify, className, align, style = {} }) => {
             alignItems: align !== null && align !== void 0 ? align : 'flex-start',
         };
     }, [align, justify, style]);
-    return ((0, jsx_runtime_1.jsx)("div", { className: className, style: finalStyle, children: children }, void 0));
+    return ((0, jsx_runtime_1.jsx)("div", { className: className, style: finalStyle, children: children }));
 };
 exports.Column = Column;

package/dist/editor/helpers/use-compact-ui.d.ts

@@ -0,0 +1 @@
+export declare function useCompactUI(): boolean;

package/dist/editor/helpers/use-compact-ui.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCompactUI = void 0;
+const react_1 = require("react");
+const breakpoint = 1200;
+function useCompactUI() {
+    const [compactUI, setCompactUI] = (0, react_1.useState)(window.innerWidth < breakpoint);
+    (0, react_1.useEffect)(() => {
+        function handleResize() {
+            setCompactUI(window.innerWidth < breakpoint);
+        }
+        window.addEventListener('resize', handleResize);
+        handleResize();
+        return () => window.removeEventListener('resize', handleResize);
+    }, []);
+    return compactUI;
+}
+exports.useCompactUI = useCompactUI;

package/dist/editor/icons/Checkmark.js

@@ -6,5 +6,5 @@ const style = {
     width: 14,
     height: 14,
 };
-const Checkmark = () => ((0, jsx_runtime_1.jsx)("svg", { "aria-hidden": "true", focusable: "false", "data-prefix": "far", "data-icon": "check", className: "svg-inline--fa fa-check fa-w-16", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", style: style, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z" }, void 0) }, void 0));
+const Checkmark = () => ((0, jsx_runtime_1.jsx)("svg", { "aria-hidden": "true", focusable: "false", "data-prefix": "far", "data-icon": "check", className: "svg-inline--fa fa-check fa-w-16", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", style: style, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z" }) }));
 exports.Checkmark = Checkmark;

package/dist/editor/icons/caret.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-export declare const Caret: () => JSX.Element;
+export declare const CaretRight: () => JSX.Element;
 export declare const CaretDown: () => JSX.Element;

package/dist/editor/icons/caret.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CaretDown = exports.Caret = void 0;
+exports.CaretDown = exports.CaretRight = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const caret = {
     height: 12,
@@ -8,9 +8,9 @@ const caret = {
 const caretDown = {
     width: 10,
 };
-const Caret = () => ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 192 512", style: caret, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z" }, void 0) }, void 0));
-exports.Caret = Caret;
+const CaretRight = () => ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 192 512", style: caret, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z" }) }));
+exports.CaretRight = CaretRight;
 const CaretDown = () => {
-    return ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 320 512", style: caretDown, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z" }, void 0) }, void 0));
+    return ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 320 512", style: caretDown, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z" }) }));
 };
 exports.CaretDown = CaretDown;

package/dist/editor/icons/film.js

@@ -3,6 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FilmIcon = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const FilmIcon = (props) => {
-    return ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 512 512", ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M488 64h-8v20c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12V64H96v20c0 6.6-5.4 12-12 12H44c-6.6 0-12-5.4-12-12V64h-8C10.7 64 0 74.7 0 88v336c0 13.3 10.7 24 24 24h8v-20c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v20h320v-20c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v20h8c13.3 0 24-10.7 24-24V88c0-13.3-10.7-24-24-24zM96 372c0 6.6-5.4 12-12 12H44c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40zm0-96c0 6.6-5.4 12-12 12H44c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40zm0-96c0 6.6-5.4 12-12 12H44c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40zm280 208c0 6.6-5.4 12-12 12H148c-6.6 0-12-5.4-12-12V124c0-6.6 5.4-12 12-12h216c6.6 0 12 5.4 12 12v264zm104-16c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40zm0-96c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40zm0-96c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40z" }, void 0) }, void 0));
+    return ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 512 512", ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M488 64h-8v20c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12V64H96v20c0 6.6-5.4 12-12 12H44c-6.6 0-12-5.4-12-12V64h-8C10.7 64 0 74.7 0 88v336c0 13.3 10.7 24 24 24h8v-20c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v20h320v-20c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v20h8c13.3 0 24-10.7 24-24V88c0-13.3-10.7-24-24-24zM96 372c0 6.6-5.4 12-12 12H44c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40zm0-96c0 6.6-5.4 12-12 12H44c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40zm0-96c0 6.6-5.4 12-12 12H44c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40zm280 208c0 6.6-5.4 12-12 12H148c-6.6 0-12-5.4-12-12V124c0-6.6 5.4-12 12-12h216c6.6 0 12 5.4 12 12v264zm104-16c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40zm0-96c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40zm0-96c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40z" }) }));
 };
 exports.FilmIcon = FilmIcon;

package/dist/editor/icons/folder.js

@@ -3,10 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ExpandedFolderIcon = exports.CollapsedFolderIcon = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const CollapsedFolderIcon = (props) => {
-    return ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: "white", d: "M464 128H272l-64-64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V176c0-26.51-21.49-48-48-48z" }, void 0) }, void 0));
+    return ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: "white", d: "M464 128H272l-64-64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V176c0-26.51-21.49-48-48-48z" }) }));
 };
 exports.CollapsedFolderIcon = CollapsedFolderIcon;
 const ExpandedFolderIcon = (props) => {
-    return ((0, jsx_runtime_1.jsx)("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 576 512", children: (0, jsx_runtime_1.jsx)("path", { fill: "white", d: "M572.694 292.093L500.27 416.248A63.997 63.997 0 0 1 444.989 448H45.025c-18.523 0-30.064-20.093-20.731-36.093l72.424-124.155A64 64 0 0 1 152 256h399.964c18.523 0 30.064 20.093 20.73 36.093zM152 224h328v-48c0-26.51-21.49-48-48-48H272l-64-64H48C21.49 64 0 85.49 0 112v278.046l69.077-118.418C86.214 242.25 117.989 224 152 224z" }, void 0) }, void 0));
+    return ((0, jsx_runtime_1.jsx)("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 576 512", children: (0, jsx_runtime_1.jsx)("path", { fill: "white", d: "M572.694 292.093L500.27 416.248A63.997 63.997 0 0 1 444.989 448H45.025c-18.523 0-30.064-20.093-20.731-36.093l72.424-124.155A64 64 0 0 1 152 256h399.964c18.523 0 30.064 20.093 20.73 36.093zM152 224h328v-48c0-26.51-21.49-48-48-48H272l-64-64H48C21.49 64 0 85.49 0 112v278.046l69.077-118.418C86.214 242.25 117.989 224 152 224z" }) }));
 };
 exports.ExpandedFolderIcon = ExpandedFolderIcon;

package/dist/editor/icons/jump-to-start.d.ts

@@ -0,0 +1,2 @@
+import { SVGProps } from 'react';
+export declare const JumpToStart: React.FC<SVGProps<SVGSVGElement>>;

package/dist/editor/icons/jump-to-start.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.JumpToStart = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const JumpToStart = (props) => {
+    return ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M0 415.1V96.03c0-17.67 14.33-31.1 31.1-31.1C49.67 64.03 64 78.36 64 96.03v131.8l171.5-156.5C256.1 54.28 288 68.66 288 96.03v131.9l171.5-156.5C480.1 54.28 512 68.66 512 96.03v319.9c0 27.37-31.88 41.74-52.5 24.62L288 285.2v130.7c0 27.37-31.88 41.74-52.5 24.62L64 285.2v130.7c0 17.67-14.33 31.1-31.1 31.1C14.33 447.1 0 433.6 0 415.1z" }) }));
+};
+exports.JumpToStart = JumpToStart;

package/dist/editor/icons/keys.js

@@ -6,14 +6,14 @@ const iconStyle = {
     width: 10,
 };
 const ShiftIcon = () => {
-    return ((0, jsx_runtime_1.jsx)("svg", { style: iconStyle, viewBox: "0 0 448 512", children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M48.048 304h73.798v128c0 26.51 21.49 48 48 48h108.308c26.51 0 48-21.49 48-48V304h73.789c42.638 0 64.151-51.731 33.941-81.941l-175.943-176c-18.745-18.745-49.137-18.746-67.882 0l-175.952 176C-16.042 252.208 5.325 304 48.048 304zM224 80l176 176H278.154v176H169.846V256H48L224 80z" }, void 0) }, void 0));
+    return ((0, jsx_runtime_1.jsx)("svg", { style: iconStyle, viewBox: "0 0 448 512", children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M48.048 304h73.798v128c0 26.51 21.49 48 48 48h108.308c26.51 0 48-21.49 48-48V304h73.789c42.638 0 64.151-51.731 33.941-81.941l-175.943-176c-18.745-18.745-49.137-18.746-67.882 0l-175.952 176C-16.042 252.208 5.325 304 48.048 304zM224 80l176 176H278.154v176H169.846V256H48L224 80z" }) }));
 };
 exports.ShiftIcon = ShiftIcon;
 const ArrowLeft = () => {
-    return ((0, jsx_runtime_1.jsx)("svg", { style: iconStyle, viewBox: "0 0 448 512", children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M257.5 445.1l-22.2 22.2c-9.4 9.4-24.6 9.4-33.9 0L7 273c-9.4-9.4-9.4-24.6 0-33.9L201.4 44.7c9.4-9.4 24.6-9.4 33.9 0l22.2 22.2c9.5 9.5 9.3 25-.4 34.3L136.6 216H424c13.3 0 24 10.7 24 24v32c0 13.3-10.7 24-24 24H136.6l120.5 114.8c9.8 9.3 10 24.8.4 34.3z" }, void 0) }, void 0));
+    return ((0, jsx_runtime_1.jsx)("svg", { style: iconStyle, viewBox: "0 0 448 512", children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M257.5 445.1l-22.2 22.2c-9.4 9.4-24.6 9.4-33.9 0L7 273c-9.4-9.4-9.4-24.6 0-33.9L201.4 44.7c9.4-9.4 24.6-9.4 33.9 0l22.2 22.2c9.5 9.5 9.3 25-.4 34.3L136.6 216H424c13.3 0 24 10.7 24 24v32c0 13.3-10.7 24-24 24H136.6l120.5 114.8c9.8 9.3 10 24.8.4 34.3z" }) }));
 };
 exports.ArrowLeft = ArrowLeft;
 const ArrowRight = () => {
-    return ((0, jsx_runtime_1.jsx)("svg", { style: iconStyle, viewBox: "0 0 448 512", children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z" }, void 0) }, void 0));
+    return ((0, jsx_runtime_1.jsx)("svg", { style: iconStyle, viewBox: "0 0 448 512", children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z" }) }));
 };
 exports.ArrowRight = ArrowRight;

package/dist/editor/icons/lock.js

@@ -3,10 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.UnlockIcon = exports.LockIcon = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const LockIcon = (props) => {
-    return ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 448 512", ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z" }, void 0) }, void 0));
+    return ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 448 512", ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z" }) }));
 };
 exports.LockIcon = LockIcon;
 const UnlockIcon = (props) => {
-    return ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 448 512", ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M400 256H152V152.9c0-39.6 31.7-72.5 71.3-72.9 40-.4 72.7 32.1 72.7 72v16c0 13.3 10.7 24 24 24h32c13.3 0 24-10.7 24-24v-16C376 68 307.5-.3 223.5 0 139.5.3 72 69.5 72 153.5V256H48c-26.5 0-48 21.5-48 48v160c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V304c0-26.5-21.5-48-48-48z" }, void 0) }, void 0));
+    return ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 448 512", ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M400 256H152V152.9c0-39.6 31.7-72.5 71.3-72.9 40-.4 72.7 32.1 72.7 72v16c0 13.3 10.7 24 24 24h32c13.3 0 24-10.7 24-24v-16C376 68 307.5-.3 223.5 0 139.5.3 72 69.5 72 153.5V256H48c-26.5 0-48 21.5-48 48v160c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V304c0-26.5-21.5-48-48-48z" }) }));
 };
 exports.UnlockIcon = UnlockIcon;

package/dist/editor/icons/media-volume.js

@@ -4,10 +4,10 @@ exports.VolumeOnIcon = exports.VolumeOffIcon = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const size = 25;
 const VolumeOffIcon = () => {
-    return ((0, jsx_runtime_1.jsx)("svg", { width: size, height: size, viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { d: "M3.63 3.63a.996.996 0 000 1.41L7.29 8.7 7 9H4c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1h3l3.29 3.29c.63.63 1.71.18 1.71-.71v-4.17l4.18 4.18c-.49.37-1.02.68-1.6.91-.36.15-.58.53-.58.92 0 .72.73 1.18 1.39.91.8-.33 1.55-.77 2.22-1.31l1.34 1.34a.996.996 0 101.41-1.41L5.05 3.63c-.39-.39-1.02-.39-1.42 0zM19 12c0 .82-.15 1.61-.41 2.34l1.53 1.53c.56-1.17.88-2.48.88-3.87 0-3.83-2.4-7.11-5.78-8.4-.59-.23-1.22.23-1.22.86v.19c0 .38.25.71.61.85C17.18 6.54 19 9.06 19 12zm-8.71-6.29l-.17.17L12 7.76V6.41c0-.89-1.08-1.33-1.71-.7zM16.5 12A4.5 4.5 0 0014 7.97v1.79l2.48 2.48c.01-.08.02-.16.02-.24z", fill: "var(--blue)" }, void 0) }, void 0));
+    return ((0, jsx_runtime_1.jsx)("svg", { width: size, height: size, viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { d: "M3.63 3.63a.996.996 0 000 1.41L7.29 8.7 7 9H4c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1h3l3.29 3.29c.63.63 1.71.18 1.71-.71v-4.17l4.18 4.18c-.49.37-1.02.68-1.6.91-.36.15-.58.53-.58.92 0 .72.73 1.18 1.39.91.8-.33 1.55-.77 2.22-1.31l1.34 1.34a.996.996 0 101.41-1.41L5.05 3.63c-.39-.39-1.02-.39-1.42 0zM19 12c0 .82-.15 1.61-.41 2.34l1.53 1.53c.56-1.17.88-2.48.88-3.87 0-3.83-2.4-7.11-5.78-8.4-.59-.23-1.22.23-1.22.86v.19c0 .38.25.71.61.85C17.18 6.54 19 9.06 19 12zm-8.71-6.29l-.17.17L12 7.76V6.41c0-.89-1.08-1.33-1.71-.7zM16.5 12A4.5 4.5 0 0014 7.97v1.79l2.48 2.48c.01-.08.02-.16.02-.24z", fill: "var(--blue)" }) }));
 };
 exports.VolumeOffIcon = VolumeOffIcon;
 const VolumeOnIcon = () => {
-    return ((0, jsx_runtime_1.jsx)("svg", { width: size, height: size, viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { d: "M3 10v4c0 .55.45 1 1 1h3l3.29 3.29c.63.63 1.71.18 1.71-.71V6.41c0-.89-1.08-1.34-1.71-.71L7 9H4c-.55 0-1 .45-1 1zm13.5 2A4.5 4.5 0 0014 7.97v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 4.45v.2c0 .38.25.71.6.85C17.18 6.53 19 9.06 19 12s-1.82 5.47-4.4 6.5c-.36.14-.6.47-.6.85v.2c0 .63.63 1.07 1.21.85C18.6 19.11 21 15.84 21 12s-2.4-7.11-5.79-8.4c-.58-.23-1.21.22-1.21.85z", fill: "#fff" }, void 0) }, void 0));
+    return ((0, jsx_runtime_1.jsx)("svg", { width: size, height: size, viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { d: "M3 10v4c0 .55.45 1 1 1h3l3.29 3.29c.63.63 1.71.18 1.71-.71V6.41c0-.89-1.08-1.34-1.71-.71L7 9H4c-.55 0-1 .45-1 1zm13.5 2A4.5 4.5 0 0014 7.97v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 4.45v.2c0 .38.25.71.6.85C17.18 6.53 19 9.06 19 12s-1.82 5.47-4.4 6.5c-.36.14-.6.47-.6.85v.2c0 .63.63 1.07 1.21.85C18.6 19.11 21 15.84 21 12s-2.4-7.11-5.79-8.4c-.58-.23-1.21.22-1.21.85z", fill: "#fff" }) }));
 };
 exports.VolumeOnIcon = VolumeOnIcon;

package/dist/editor/icons/pause.js

@@ -2,5 +2,5 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Pause = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const Pause = (props) => ((0, jsx_runtime_1.jsx)("svg", { ...props, "aria-hidden": "true", focusable: "false", "data-prefix": "fas", "data-icon": "pause", className: "svg-inline--fa fa-pause fa-w-14", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M144 479H48c-26.5 0-48-21.5-48-48V79c0-26.5 21.5-48 48-48h96c26.5 0 48 21.5 48 48v352c0 26.5-21.5 48-48 48zm304-48V79c0-26.5-21.5-48-48-48h-96c-26.5 0-48 21.5-48 48v352c0 26.5 21.5 48 48 48h96c26.5 0 48-21.5 48-48z" }, void 0) }, void 0));
+const Pause = (props) => ((0, jsx_runtime_1.jsx)("svg", { ...props, "aria-hidden": "true", focusable: "false", "data-prefix": "fas", "data-icon": "pause", className: "svg-inline--fa fa-pause fa-w-14", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M144 479H48c-26.5 0-48-21.5-48-48V79c0-26.5 21.5-48 48-48h96c26.5 0 48 21.5 48 48v352c0 26.5-21.5 48-48 48zm304-48V79c0-26.5-21.5-48-48-48h-96c-26.5 0-48 21.5-48 48v352c0 26.5 21.5 48 48 48h96c26.5 0 48-21.5 48-48z" }) }));
 exports.Pause = Pause;

package/dist/editor/icons/play.js

@@ -2,5 +2,5 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Play = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const Play = (props) => ((0, jsx_runtime_1.jsx)("svg", { ...props, "aria-hidden": "true", focusable: "false", "data-prefix": "fas", "data-icon": "play", className: "svg-inline--fa fa-play fa-w-14", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z" }, void 0) }, void 0));
+const Play = (props) => ((0, jsx_runtime_1.jsx)("svg", { ...props, "aria-hidden": "true", focusable: "false", "data-prefix": "fas", "data-icon": "play", className: "svg-inline--fa fa-play fa-w-14", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z" }) }));
 exports.Play = Play;