@remotion/cli 4.0.0-oops.3 → 4.0.0-prefetch.7

package/dist/editor/helpers/get-effective-translation.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCenterPointWhileScrolling = exports.getEffectiveTranslation = void 0;
+const getEffectiveXTranslation = ({ canvasSize, scale, compositionWidth, translation, }) => {
+    const maxTranslation = Math.abs(canvasSize.width / 2 +
+        (scale * compositionWidth) / 2 -
+        MUST_BE_INSIDE_CANVAS);
+    return Math.max(-maxTranslation, Math.min(translation.x, maxTranslation));
+};
+const MUST_BE_INSIDE_CANVAS = 50;
+const getEffectiveYTranslation = ({ canvasSize, scale, compositionHeight, translation, }) => {
+    const maxTranslation = Math.abs(canvasSize.height / 2 + (scale * compositionHeight) / 2) -
+        MUST_BE_INSIDE_CANVAS;
+    return Math.max(-maxTranslation, Math.min(translation.y, maxTranslation));
+};
+const getEffectiveTranslation = ({ canvasSize, scale, compositionHeight, compositionWidth, translation, }) => {
+    return {
+        x: getEffectiveXTranslation({
+            canvasSize,
+            compositionWidth,
+            scale,
+            translation,
+        }),
+        y: getEffectiveYTranslation({
+            canvasSize,
+            compositionHeight,
+            scale,
+            translation,
+        }),
+    };
+};
+exports.getEffectiveTranslation = getEffectiveTranslation;
+const getCenterPointWhileScrolling = ({ size, clientX, clientY, compositionWidth, compositionHeight, scale, translation, }) => {
+    const mouseLeft = clientX - size.left;
+    const mouseTop = clientY - size.top;
+    const contentLeftPoint = size.width / 2 - (compositionWidth * scale) / 2 - translation.x;
+    const contentTopPoint = size.height / 2 - (compositionHeight * scale) / 2 - translation.y;
+    const offsetFromVideoLeft = Math.min(compositionWidth, Math.max(0, (mouseLeft - contentLeftPoint) / scale));
+    const offsetFromVideoTop = Math.min(compositionHeight, Math.max(0, (mouseTop - contentTopPoint) / scale));
+    return {
+        centerX: offsetFromVideoLeft,
+        centerY: offsetFromVideoTop,
+    };
+};
+exports.getCenterPointWhileScrolling = getCenterPointWhileScrolling;

package/dist/editor/helpers/get-left-of-timeline-slider.d.ts

@@ -2,3 +2,4 @@ export declare const useGetXPositionOfItemInTimeline: () => {
     get: (frame: number) => number;
     width: number;
 };
+export declare const getXPositionOfItemInTimelineImperatively: (frame: number, duration: number, width: number) => number;

package/dist/editor/helpers/get-left-of-timeline-slider.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useGetXPositionOfItemInTimeline = void 0;
+exports.getXPositionOfItemInTimelineImperatively = exports.useGetXPositionOfItemInTimeline = void 0;
 const player_1 = require("@remotion/player");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
@@ -18,12 +18,15 @@ const useGetXPositionOfItemInTimeline = () => {
         if (!videoConfig) {
             return 0;
         }
-        return ((frame / (videoConfig.durationInFrames - 1)) *
-            (width - timeline_layout_1.TIMELINE_PADDING * 2) +
-            timeline_layout_1.TIMELINE_PADDING);
+        return (0, exports.getXPositionOfItemInTimelineImperatively)(frame, videoConfig.durationInFrames, width);
     }, [videoConfig, width]);
     return (0, react_1.useMemo)(() => {
         return { get, width };
     }, [get, width]);
 };
 exports.useGetXPositionOfItemInTimeline = useGetXPositionOfItemInTimeline;
+const getXPositionOfItemInTimelineImperatively = (frame, duration, width) => {
+    const proportion = frame / (duration - 1);
+    return proportion * (width - timeline_layout_1.TIMELINE_PADDING * 2) + timeline_layout_1.TIMELINE_PADDING;
+};
+exports.getXPositionOfItemInTimelineImperatively = getXPositionOfItemInTimelineImperatively;

package/dist/editor/helpers/get-sequence-visible-range.d.ts

@@ -1,4 +1,4 @@
-import { TSequence } from 'remotion';
+import type { TSequence } from 'remotion';
 export declare const getCascadedStart: (sequence: TSequence, sequences: TSequence[]) => number;
 export declare const getTimelineVisibleStart: (sequence: TSequence, sequences: TSequence[]) => number;
 export declare const getTimelineVisibleDuration: (sequence: TSequence, sequences: TSequence[]) => number;

package/dist/editor/helpers/get-timeline-nestedness.d.ts

@@ -1,2 +1,2 @@
-import { TSequence } from 'remotion';
+import type { TSequence } from 'remotion';
 export declare const getTimelineNestedLevel: (sequence: TSequence, allSequences: TSequence[], depth: number) => number;

package/dist/editor/helpers/get-timeline-sequence-hash.d.ts

@@ -1,4 +1,4 @@
-import { TSequence } from 'remotion';
+import type { TSequence } from 'remotion';
 export declare const getTimelineSequenceHash: (sequence: TSequence, allSequences: TSequence[], hashesUsedInRoot: {
     [rootId: string]: string[];
 }, cache: {

package/dist/editor/helpers/get-timeline-sequence-layout.d.ts

@@ -1,4 +1,4 @@
-import { TComposition } from 'remotion';
+import type { TComposition } from 'remotion';
 export declare const SEQUENCE_BORDER_WIDTH = 1;
 export declare const getTimelineSequenceLayout: ({ durationInFrames, startFrom, maxMediaDuration, startFromMedia, video, windowWidth, }: {
     durationInFrames: number;

package/dist/editor/helpers/get-timeline-sequence-layout.js

@@ -3,23 +3,43 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getTimelineSequenceLayout = exports.SEQUENCE_BORDER_WIDTH = void 0;
 const timeline_layout_1 = require("./timeline-layout");
 exports.SEQUENCE_BORDER_WIDTH = 1;
+const getWidthOfTrack = ({ durationInFrames, lastFrame, windowWidth, spatialDuration, nonNegativeMarginLeft, }) => {
+    const fullWidth = windowWidth - timeline_layout_1.TIMELINE_PADDING * 2;
+    const base = durationInFrames === Infinity || lastFrame === 0
+        ? fullWidth
+        : (spatialDuration / lastFrame) * fullWidth;
+    return base - exports.SEQUENCE_BORDER_WIDTH + nonNegativeMarginLeft;
+};
 const getTimelineSequenceLayout = ({ durationInFrames, startFrom, maxMediaDuration, startFromMedia, video, windowWidth, }) => {
     var _a;
     const maxMediaSequenceDuration = (maxMediaDuration !== null && maxMediaDuration !== void 0 ? maxMediaDuration : Infinity) - startFromMedia;
-    const spatialDuration = Math.min(maxMediaSequenceDuration, durationInFrames - 1);
+    let spatialDuration = Math.min(maxMediaSequenceDuration, durationInFrames - 1);
     const lastFrame = ((_a = video.durationInFrames) !== null && _a !== void 0 ? _a : 1) - 1;
+    const shouldAddHalfAFrameAtEnd = startFrom + durationInFrames < lastFrame;
+    const shouldAddHalfAFrameAtStart = startFrom > 0;
+    if (shouldAddHalfAFrameAtEnd) {
+        spatialDuration += 0.5;
+    }
+    if (shouldAddHalfAFrameAtStart) {
+        spatialDuration += 0.5;
+    }
+    const startFromWithOffset = shouldAddHalfAFrameAtStart
+        ? startFrom - 0.5
+        : startFrom;
     const marginLeft = lastFrame === 0
         ? 0
-        : (startFrom / lastFrame) * (windowWidth - timeline_layout_1.TIMELINE_PADDING * 2);
-    const negativeMarginLeft = Math.min(marginLeft, 0);
-    const width = (durationInFrames === Infinity || lastFrame === 0
-        ? windowWidth - timeline_layout_1.TIMELINE_PADDING * 2
-        : (spatialDuration / lastFrame) * (windowWidth - timeline_layout_1.TIMELINE_PADDING * 2)) -
-        exports.SEQUENCE_BORDER_WIDTH +
-        negativeMarginLeft;
+        : (startFromWithOffset / lastFrame) *
+            (windowWidth - timeline_layout_1.TIMELINE_PADDING * 2);
+    const nonNegativeMarginLeft = Math.min(marginLeft, 0);
     return {
         marginLeft: Math.round(Math.max(marginLeft, 0)),
-        width: Math.floor(width),
+        width: Math.floor(getWidthOfTrack({
+            durationInFrames,
+            lastFrame,
+            nonNegativeMarginLeft,
+            spatialDuration,
+            windowWidth,
+        })),
     };
 };
 exports.getTimelineSequenceLayout = getTimelineSequenceLayout;

package/dist/editor/helpers/get-timeline-sequence-sort-key.d.ts

@@ -1,4 +1,4 @@
-import { TSequence } from 'remotion';
+import type { TSequence } from 'remotion';
 export declare type Track = {
     sequence: TSequence;
     depth: number;

package/dist/editor/helpers/is-composition-still.d.ts

@@ -1,2 +1,2 @@
-import { TComposition } from 'remotion';
+import type { TComposition } from 'remotion';
 export declare const isCompositionStill: (comp: TComposition) => boolean;

package/dist/editor/helpers/is-current-selected-still.d.ts

@@ -1 +1,5 @@
 export declare const useIsStill: () => boolean;
+export declare const useDimensions: () => {
+    width: number;
+    height: number;
+} | null;

package/dist/editor/helpers/is-current-selected-still.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useIsStill = void 0;
+exports.useDimensions = exports.useIsStill = void 0;
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const is_composition_still_1 = require("./is-composition-still");
@@ -13,3 +13,17 @@ const useIsStill = () => {
     return (0, is_composition_still_1.isCompositionStill)(selected);
 };
 exports.useIsStill = useIsStill;
+const useDimensions = () => {
+    const { compositions, currentComposition } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const selected = (0, react_1.useMemo)(() => compositions.find((c) => c.id === currentComposition), [compositions, currentComposition]);
+    return (0, react_1.useMemo)(() => {
+        if (!selected) {
+            return null;
+        }
+        return {
+            width: selected.width,
+            height: selected.height,
+        };
+    }, [selected]);
+};
+exports.useDimensions = useDimensions;

package/dist/editor/helpers/normalize-wheel.d.ts

@@ -0,0 +1,5 @@
+export declare function normalizeWheel(event: WheelEvent): {
+    deltaX: number;
+    deltaY: number;
+    deltaZ: number;
+};

package/dist/editor/helpers/normalize-wheel.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.normalizeWheel = void 0;
+// Taken from https://github.com/tldraw/tldraw/blob/254dfdfd77c4abde53240f7d8ca3558e08688493/packages/core/src/hooks/useZoomEvents.ts which is adapted from https://stackoverflow.com/a/13650579
+const MAX_ZOOM_STEP = 10;
+function normalizeWheel(event) {
+    const { deltaY, deltaX } = event;
+    let deltaZ = 0;
+    if (event.ctrlKey || event.metaKey) {
+        const signY = Math.sign(event.deltaY);
+        const absDeltaY = Math.abs(event.deltaY);
+        let dy = deltaY;
+        if (absDeltaY > MAX_ZOOM_STEP) {
+            dy = MAX_ZOOM_STEP * signY;
+        }
+        deltaZ = dy;
+    }
+    return { deltaX, deltaY, deltaZ };
+}
+exports.normalizeWheel = normalizeWheel;

package/dist/editor/helpers/normalize-zoom.d.ts

@@ -0,0 +1 @@
+declare function normalizeWheel(event: WheelEvent): number[];

package/dist/editor/helpers/normalize-zoom.js

@@ -0,0 +1,16 @@
+"use strict";
+// Adapted from https://stackoverflow.com/a/13650579
+function normalizeWheel(event) {
+    const { deltaY, deltaX } = event;
+    let deltaZ = 0;
+    if (event.ctrlKey || event.metaKey) {
+        const signY = Math.sign(event.deltaY);
+        const absDeltaY = Math.abs(event.deltaY);
+        let dy = deltaY;
+        if (absDeltaY > MAX_ZOOM_STEP) {
+            dy = MAX_ZOOM_STEP * signY;
+        }
+        deltaZ = dy;
+    }
+    return [deltaX, deltaY, deltaZ];
+}

package/dist/editor/helpers/pick-color.d.ts

@@ -0,0 +1 @@
+export declare const pickColor: () => void;

package/dist/editor/helpers/pick-color.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.pickColor = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const layout_1 = require("../components/layout");
+const ColorDot_1 = require("../components/Notifications/ColorDot");
+const NotificationCenter_1 = require("../components/Notifications/NotificationCenter");
+const copy_text_1 = require("./copy-text");
+const pickColor = () => {
+    // @ts-expect-error
+    const open = new EyeDropper().open();
+    open
+        .then((color) => {
+        var _a;
+        (0, copy_text_1.copyText)(color.sRGBHex);
+        (_a = NotificationCenter_1.notificationCenter.current) === null || _a === void 0 ? void 0 : _a.addNotification({
+            content: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ColorDot_1.ColorDot, { color: color.sRGBHex }), " ", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), " Copied", ' ', color.sRGBHex] })),
+            created: Date.now(),
+            duration: 2000,
+            id: String(Math.random()),
+        });
+    })
+        .catch((err) => {
+        var _a;
+        if (err.message.includes('canceled')) {
+            return;
+        }
+        (_a = NotificationCenter_1.notificationCenter.current) === null || _a === void 0 ? void 0 : _a.addNotification({
+            content: `Could not pick color.`,
+            duration: 2000,
+            created: Date.now(),
+            id: String(Math.random()),
+        });
+    });
+};
+exports.pickColor = pickColor;

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/helpers/use-keybinding.d.ts

@@ -1,6 +1,12 @@
-import { KeyEventType } from '../state/keybindings';
+import type { KeyEventType } from '../state/keybindings';
+export declare const areKeyboardShortcutsDisabled: () => boolean;
 export declare const useKeybinding: () => {
-    registerKeybinding: (event: KeyEventType, key: string, callback: (e: KeyboardEvent) => void) => {
+    registerKeybinding: (options: {
+        event: KeyEventType;
+        key: string;
+        commandCtrlKey: boolean;
+        callback: (e: KeyboardEvent) => void;
+    }) => {
         unregister: () => void;
     };
     isHighestContext: boolean;

package/dist/editor/helpers/use-keybinding.js

@@ -1,28 +1,45 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useKeybinding = void 0;
+exports.useKeybinding = exports.areKeyboardShortcutsDisabled = void 0;
 const react_1 = require("react");
 const keybindings_1 = require("../state/keybindings");
 const z_index_1 = require("../state/z-index");
+if (!process.env.KEYBOARD_SHORTCUTS_ENABLED) {
+    console.warn('Keyboard shortcuts disabled either due to: a) --disable-keyboard-shortcuts being passed b) Config.Preview.setKeyboardShortcutsEnabled(false) being set or c) a Remotion version mismatch.');
+}
+const areKeyboardShortcutsDisabled = () => {
+    return !process.env.KEYBOARD_SHORTCUTS_ENABLED;
+};
+exports.areKeyboardShortcutsDisabled = areKeyboardShortcutsDisabled;
 const useKeybinding = () => {
     const [paneId] = (0, react_1.useState)(() => String(Math.random()));
     const context = (0, react_1.useContext)(keybindings_1.KeybindingContext);
     const { isHighestContext } = (0, z_index_1.useZIndex)();
-    const registerKeybinding = (0, react_1.useCallback)((event, key, callback) => {
+    const registerKeybinding = (0, react_1.useCallback)((options) => {
+        if (!process.env.KEYBOARD_SHORTCUTS_ENABLED) {
+            return {
+                unregister: () => undefined,
+            };
+        }
         if (!isHighestContext) {
             return {
                 unregister: () => undefined,
             };
         }
         const listener = (e) => {
-            if (e.key.toLowerCase() === key.toLowerCase()) {
-                callback(e);
+            const commandKey = window.navigator.platform.startsWith('Mac')
+                ? e.metaKey
+                : e.ctrlKey;
+            if (e.key.toLowerCase() === options.key.toLowerCase() &&
+                options.commandCtrlKey === commandKey) {
+                options.callback(e);
+                e.preventDefault();
             }
         };
         const toRegister = {
             registeredFromPane: paneId,
-            event,
-            key,
+            event: options.event,
+            key: options.key,
             callback: listener,
             id: String(Math.random()),
         };

package/dist/editor/helpers/validate-new-comp-data.d.ts

@@ -1,4 +1,4 @@
-import { TComposition } from 'remotion';
+import type { TComposition } from 'remotion';
 export declare const validateCompositionName: (compName: string, compositions: TComposition<unknown>[]) => string | null;
 export declare const validateCompositionDimension: (dimension: 'Width' | 'Height', value: string) => string | null;
 export declare const validateCompositionDuration: (value: string) => string | null;

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.d.ts

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

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.d.ts

@@ -1,3 +1,4 @@
-import React, { SVGProps } from 'react';
+import type { SVGProps } from 'react';
+import React from 'react';
 export declare const CollapsedFolderIcon: React.FC<SVGProps<SVGSVGElement>>;
 export declare const ExpandedFolderIcon: React.FC<SVGProps<SVGSVGElement>>;

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 type { 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.d.ts

@@ -1,3 +1,4 @@
-import React, { SVGProps } from 'react';
+import type { SVGProps } from 'react';
+import React from 'react';
 export declare const LockIcon: React.FC<SVGProps<SVGSVGElement>>;
 export declare const UnlockIcon: React.FC<SVGProps<SVGSVGElement>>;

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/minus.d.ts

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

package/dist/editor/icons/minus.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Minus = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Minus = (props) => {
+    return ((0, jsx_runtime_1.jsx)("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M400 288h-352c-17.69 0-32-14.32-32-32.01s14.31-31.99 32-31.99h352c17.69 0 32 14.3 32 31.99S417.7 288 400 288z" }) }));
+};
+exports.Minus = Minus;

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

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

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.d.ts

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

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;

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

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

package/dist/editor/icons/plus.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Plus = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Plus = (props) => {
+    return ((0, jsx_runtime_1.jsx)("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M432 256c0 17.69-14.33 32.01-32 32.01H256v144c0 17.69-14.33 31.99-32 31.99s-32-14.3-32-31.99v-144H48c-17.67 0-32-14.32-32-32.01s14.33-31.99 32-31.99H192v-144c0-17.69 14.33-32.01 32-32.01s32 14.32 32 32.01v144h144C417.7 224 432 238.3 432 256z" }) }));
+};
+exports.Plus = Plus;