@remotion/cli 4.0.111 → 4.0.113

package/dist/editor/helpers/use-studio-canvas-dimensions.d.ts

@@ -0,0 +1,16 @@
+import type { Size } from '@remotion/player';
+import type { AssetMetadata } from './get-asset-metadata';
+import type { Dimensions } from './is-current-selected-still';
+export declare const useStudioCanvasDimensions: ({ canvasSize, contentDimensions, assetMetadata, }: {
+    canvasSize: Size | null;
+    contentDimensions: Dimensions | 'none' | null;
+    assetMetadata: AssetMetadata | null;
+}) => {
+    canvasDimensions: {
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+    };
+    scale: number;
+};

package/dist/editor/helpers/use-studio-canvas-dimensions.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStudioCanvasDimensions = void 0;
+const player_1 = require("@remotion/player");
+const react_1 = require("react");
+const preview_size_1 = require("../state/preview-size");
+const useStudioCanvasDimensions = ({ canvasSize, contentDimensions, assetMetadata, }) => {
+    const { size: previewSize } = (0, react_1.useContext)(preview_size_1.PreviewSizeContext);
+    const { centerX, centerY, scale } = (0, react_1.useMemo)(() => {
+        if (contentDimensions === 'none' ||
+            contentDimensions === null ||
+            (assetMetadata && assetMetadata.type === 'not-found') ||
+            !canvasSize) {
+            return {
+                centerX: previewSize.translation.x,
+                centerY: previewSize.translation.y,
+                scale: 1,
+            };
+        }
+        return player_1.PlayerInternals.calculateCanvasTransformation({
+            canvasSize,
+            compositionHeight: contentDimensions.height,
+            compositionWidth: contentDimensions.width,
+            previewSize: previewSize.size,
+        });
+    }, [
+        canvasSize,
+        contentDimensions,
+        previewSize.size,
+        previewSize.translation.y,
+        previewSize.translation.x,
+        assetMetadata,
+    ]);
+    const canvasDimensions = (0, react_1.useMemo)(() => {
+        return {
+            left: centerX - previewSize.translation.x,
+            top: centerY - previewSize.translation.y,
+            width: contentDimensions === 'none' || !contentDimensions
+                ? (canvasSize === null || canvasSize === void 0 ? void 0 : canvasSize.width) || 0
+                : contentDimensions.width * scale,
+            height: contentDimensions === 'none' || !contentDimensions
+                ? (canvasSize === null || canvasSize === void 0 ? void 0 : canvasSize.height) || 0
+                : contentDimensions.height * scale,
+        };
+    }, [
+        scale,
+        centerX,
+        previewSize.translation.x,
+        previewSize.translation.y,
+        centerY,
+        canvasSize,
+        contentDimensions,
+    ]);
+    return {
+        canvasDimensions,
+        scale,
+    };
+};
+exports.useStudioCanvasDimensions = useStudioCanvasDimensions;

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

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

package/dist/editor/helpers/validate-new-comp-data.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.validateCompositionDuration = exports.validateCompositionDimension = exports.validateCompositionName = void 0;
+const remotion_1 = require("remotion");
+const validateCompositionName = (compName, compositions) => {
+    if (!remotion_1.Internals.isCompositionIdValid(compName)) {
+        return remotion_1.Internals.invalidCompositionErrorMessage;
+    }
+    if (compositions.find((c) => c.id === compName)) {
+        return `A composition with that name already exists.`;
+    }
+    return null;
+};
+exports.validateCompositionName = validateCompositionName;
+const validateCompositionDimension = (dimension, value) => {
+    if (Number(value) % 2 !== 0) {
+        return `${dimension} should be divisible by 2, since H264 codec doesn't support odd dimensions.`;
+    }
+    if (Number.isNaN(Number(value))) {
+        return 'Invalid number.';
+    }
+    if (Number(value) === 0) {
+        return dimension + ' cannot be zero.';
+    }
+    return null;
+};
+exports.validateCompositionDimension = validateCompositionDimension;
+const validateCompositionDuration = (value) => {
+    if (Number(value) % 1 !== 0) {
+        return `Duration must be an integer.`;
+    }
+    if (Number.isNaN(Number(value))) {
+        return 'Invalid number.';
+    }
+    if (Number(value) === 0) {
+        return 'Duration cannot be zero.';
+    }
+    return null;
+};
+exports.validateCompositionDuration = validateCompositionDuration;

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

@@ -0,0 +1 @@
+export declare const Checkmark: () => JSX.Element;

package/dist/editor/icons/Checkmark.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Checkmark = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const style = {
+    width: 14,
+    height: 14,
+};
+const Checkmark = () => ((0, jsx_runtime_1.jsx)("svg", { focusable: "false", role: "img", 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/audio.d.ts

@@ -0,0 +1,2 @@
+import type { SVGProps } from 'react';
+export declare const AudioIcon: (props: SVGProps<SVGSVGElement>) => JSX.Element;

package/dist/editor/icons/audio.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AudioIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const AudioIcon = (props) => ((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: "M243 32.32C105.5 39.15 0 157.8 0 295.5v120.4C0 451.3 28.63 480 64 480h32c17.62 0 32-14.38 32-32V288c0-17.62-14.38-32-32-32H64c-10.79 0-20.8 2.9-29.72 7.7 14.2-106.8 100.5-193.9 210.4-199.4 120.5-5.965 221.7 83.92 234 199.9-9.08-5.1-19.48-8.2-30.68-8.2h-32c-17.62 0-32 14.38-32 32v160c0 17.62 14.38 32 32 32h32c35.38 0 64-28.75 64-64.13V287.9c0-145.4-122-262.88-269-255.58zM64 288h32v160H64c-17.62 0-32-14.5-32-32.13v-95.75C32 302.5 46.38 288 64 288zm416 127.9c0 17.6-14.4 32.1-32 32.1h-32V288h32c17.62 0 32 14.5 32 32.13v95.77z" }) }));
+exports.AudioIcon = AudioIcon;

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

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const CaretRight: () => JSX.Element;
+export declare const CaretDown: () => JSX.Element;
+export declare const AngleDown: React.FC<{
+    down: boolean;
+}>;

package/dist/editor/icons/caret.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AngleDown = exports.CaretDown = exports.CaretRight = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../helpers/colors");
+const caret = {
+    height: 12,
+};
+const caretDown = {
+    width: 10,
+};
+const angleDown = {
+    width: 10,
+};
+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" }) }));
+};
+exports.CaretDown = CaretDown;
+const AngleDown = ({ down }) => {
+    const style = (0, react_1.useMemo)(() => {
+        return {
+            ...angleDown,
+            transform: down ? 'rotate(180deg)' : 'rotate(0deg)',
+            marginTop: 1,
+        };
+    }, [down]);
+    return ((0, jsx_runtime_1.jsx)("svg", { style: style, viewBox: "0 0 448 512", children: (0, jsx_runtime_1.jsx)("path", { fill: colors_1.LIGHT_TEXT, d: "M201.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 274.7 86.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z" }) }));
+};
+exports.AngleDown = AngleDown;

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

@@ -0,0 +1,4 @@
+import type { SVGProps } from 'react';
+export declare const ClipboardIcon: React.FC<SVGProps<SVGSVGElement> & {
+    color?: string;
+}>;

package/dist/editor/icons/clipboard.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ClipboardIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ClipboardIcon = ({ color, ...props }) => ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 384 512", ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: color, d: "M336 64h-80c0-35.3-28.7-64-64-64s-64 28.7-64 64H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM192 40c13.3 0 24 10.7 24 24s-10.7 24-24 24-24-10.7-24-24 10.7-24 24-24zm144 418c0 3.3-2.7 6-6 6H54c-3.3 0-6-2.7-6-6V118c0-3.3 2.7-6 6-6h42v36c0 6.6 5.4 12 12 12h168c6.6 0 12-5.4 12-12v-36h42c3.3 0 6 2.7 6 6z" }) }));
+exports.ClipboardIcon = ClipboardIcon;

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

@@ -0,0 +1,2 @@
+import type { SVGProps } from 'react';
+export declare const DataIcon: (props: SVGProps<SVGSVGElement>) => JSX.Element;

package/dist/editor/icons/data.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const DataIcon = (props) => {
+    return ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentcolor", d: "M224 512C100.3 512 0 476.2 0 432V80C0 35.82 100.3 0 224 0C347.7 0 448 35.82 448 80V432C448 476.2 347.7 512 224 512zM416 80.45C415.7 79.69 414.4 77.27 409.8 73.31C402.4 67.11 389.9 60.09 371.6 53.57C335.4 40.62 283.2 32 224 32C164.8 32 112.6 40.62 76.37 53.57C58.1 60.09 45.59 67.11 38.25 73.31C33.55 77.27 32.29 79.69 32 80.45V182.1C46.47 192.7 69.9 202.8 100.9 210.4C135.5 218.9 177.1 224 224 224C270 224 312.5 218.9 347.1 210.4C378.1 202.8 401.5 192.7 416 182.1V80.45zM416 219.5C398.8 228.4 377.9 235.8 354.8 241.5C317.3 250.7 272.2 256 224 256C175.8 256 130.7 250.7 93.22 241.5C70.11 235.8 49.18 228.4 32 219.5V310.1C46.47 320.7 69.9 330.8 100.9 338.4C135.5 346.9 177.1 352 224 352C270 352 312.5 346.9 347.1 338.4C378.1 330.8 401.5 320.7 416 310.1V219.5zM38.25 438.7C45.59 444.9 58.1 451.9 76.37 458.4C112.6 471.4 164.8 480 224 480C283.2 480 335.4 471.4 371.6 458.4C389.9 451.9 402.4 444.9 409.8 438.7C414.4 434.7 415.7 432.3 416 431.6V347.5C398.8 356.4 377.9 363.8 354.8 369.5C317.3 378.7 272.2 384 224 384C175.8 384 130.7 378.7 93.22 369.5C70.11 363.8 49.18 356.4 32 347.5V431.6C32.29 432.3 33.55 434.7 38.25 438.7zM416 431.4C416.1 431.3 416.1 431.3 416.1 431.3L416 431.4zM31.96 431.4C31.94 431.3 31.93 431.3 31.92 431.3L31.96 431.4zM31.96 80.56C31.93 80.65 31.92 80.7 31.92 80.7L31.96 80.56zM416.1 80.7C416.1 80.7 416.1 80.65 416 80.56z" }) }));
+};
+exports.DataIcon = DataIcon;

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

@@ -0,0 +1,4 @@
+import type { SVGProps } from 'react';
+export declare const FileIcon: React.FC<SVGProps<SVGSVGElement> & {
+    color?: string;
+}>;

package/dist/editor/icons/file.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FileIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const FileIcon = ({ color, ...props }) => ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 384 512", ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: color !== null && color !== void 0 ? color : 'currentColor', d: "M0 64C0 28.65 28.65 0 64 0h156.1c12.7 0 25 5.057 34 14.06L369.9 129.9c9 9 14.1 21.3 14.1 34V448c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V64zm352 128H240c-26.5 0-48-21.5-48-48V32H64c-17.67 0-32 14.33-32 32v384c0 17.7 14.33 32 32 32h256c17.7 0 32-14.3 32-32V192zm-4.7-39.4L231.4 36.69c-2-2.07-4.6-3.51-7.4-4.21V144c0 8.8 7.2 16 16 16h111.5c-.7-2.8-2.1-5.4-4.2-7.4z" }) }));
+exports.FileIcon = FileIcon;

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

@@ -0,0 +1,11 @@
+import type { SVGProps } from 'react';
+import React from 'react';
+export declare const CollapsedFolderIcon: React.FC<SVGProps<SVGSVGElement> & {
+    color: string;
+}>;
+export declare const ExpandedFolderIcon: React.FC<SVGProps<SVGSVGElement> & {
+    color: string;
+}>;
+export declare const ExpandedFolderIconSolid: React.FC<SVGProps<SVGSVGElement> & {
+    color: string;
+}>;

package/dist/editor/icons/folder.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExpandedFolderIconSolid = exports.ExpandedFolderIcon = exports.CollapsedFolderIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const CollapsedFolderIcon = ({ color, ...props }) => {
+    return ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 512 512", ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: color, d: "M447.1 96H272L226.7 50.75C214.7 38.74 198.5 32 181.5 32H63.1c-35.35 0-64 28.65-64 64v320c0 35.35 28.65 64 64 64h384c35.35 0 64-28.65 64-64V160C511.1 124.7 483.3 96 447.1 96zM480 416c0 17.64-14.36 32-32 32H64c-17.64 0-32-14.36-32-32V96c0-17.64 14.36-32 32-32h117.5c8.549 0 16.58 3.328 22.63 9.375L258.7 128H448c17.64 0 32 14.36 32 32V416z" }) }));
+};
+exports.CollapsedFolderIcon = CollapsedFolderIcon;
+const ExpandedFolderIcon = ({ color, ...props }) => {
+    return ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 576 512", ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: color, d: "M566.6 211.6C557.5 199.1 543.4 192 527.1 192H134.2C114.3 192 96.2 204.5 89.23 223.1L32 375.8V96c0-17.64 14.36-32 32-32h117.5c8.549 0 16.58 3.328 22.63 9.375L258.7 128H448c17.64 0 32 14.36 32 32h32c0-35.35-28.65-64-64-64H272L226.7 50.75C214.7 38.74 198.5 32 181.5 32H64C28.65 32 0 60.65 0 96v320c0 35.35 28.65 64 64 64h403.1c21.11 0 39.53-13.53 45.81-33.69l60-192C578.4 239.6 575.8 224 566.6 211.6zM543.2 244.8l-60 192C481.1 443.5 475 448 467.1 448H64c-3.322 0-6.357-.9551-9.373-1.898c-2.184-1.17-4.109-2.832-5.596-4.977c-3.031-4.375-3.703-9.75-1.828-14.73l72-192C121.5 228.2 127.5 224 134.2 224h393.8c5.141 0 9.844 2.375 12.89 6.516C543.9 234.7 544.8 239.9 543.2 244.8z" }) }));
+};
+exports.ExpandedFolderIcon = ExpandedFolderIcon;
+const ExpandedFolderIconSolid = ({ color, ...props }) => {
+    return ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 576 512", ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: color, d: "M384 480h48c11.4 0 21.9-6 27.6-15.9l112-192c5.8-9.9 5.8-22.1 .1-32.1S555.5 224 544 224H144c-11.4 0-21.9 6-27.6 15.9L48 357.1V96c0-8.8 7.2-16 16-16H181.5c4.2 0 8.3 1.7 11.3 4.7l26.5 26.5c21 21 49.5 32.8 79.2 32.8H416c8.8 0 16 7.2 16 16v32h48V160c0-35.3-28.7-64-64-64H298.5c-17 0-33.3-6.7-45.3-18.7L226.7 50.7c-12-12-28.3-18.7-45.3-18.7H64C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H87.7 384z" }) }));
+};
+exports.ExpandedFolderIconSolid = ExpandedFolderIconSolid;

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

@@ -0,0 +1,2 @@
+import type { SVGProps } from 'react';
+export declare const PicIcon: (props: SVGProps<SVGSVGElement>) => JSX.Element;

package/dist/editor/icons/frame.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PicIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const PicIcon = (props) => ((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: "M324.9 157.8c-11.38-17.38-39.89-17.31-51.23-.063L200.5 268.5l-16.4-22.6c-11.4-16.8-38.2-16-49.7 0l-64.52 89.16c-6.797 9.406-7.75 21.72-2.547 32C72.53 377.5 83.05 384 94.75 384h322.5c11.41 0 21.8-6.281 27.14-16.38a30.922 30.922 0 0 0-1.516-31.56L324.9 157.8zM95.8 352l62.39-87.38 29.91 41.34c3.1 4.24 8.3 7.24 13.3 6.64 5.25-.125 10.12-2.781 13.02-7.188l83.83-129.9L415 352H95.8zM447.1 32h-384C28.65 32-.01 60.65-.01 96v320c0 35.35 28.65 64 63.1 64h384c35.35 0 64-28.65 64-64V96c.01-35.35-27.79-64-63.99-64zM480 416c0 17.64-14.36 32-32 32H64c-17.64 0-32-14.36-32-32V96c0-17.64 14.36-32 32-32h384c17.64 0 32 14.36 32 32v320zM144 192c26.5 0 48-21.5 48-48s-21.5-48-48-48-48 21.5-48 48 21.5 48 48 48zm0-64c8.822 0 15.1 7.178 15.1 16s-6.3 16-15.1 16-16-7.2-16-16 7.2-16 16-16z" }) }));
+exports.PicIcon = PicIcon;

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

@@ -0,0 +1,2 @@
+import type { SVGProps } from 'react';
+export declare const GearIcon: (props: SVGProps<SVGSVGElement>) => JSX.Element;

package/dist/editor/icons/gear.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GearIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const GearIcon = (props) => ((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: "M168 255.1c0-47.7 39.4-88 88-88s88 40.3 88 88c0 49.5-39.4 88.9-88 88.9s-88-39.4-88-88.9zm88-56c-30.9 0-56 26-56 56 0 31.8 25.1 56 56 56s56-24.2 56-56c0-30-25.1-56-56-56zM65.67 230.6l-40.33-36.8c-11.12-10.1-13.68-26.6-6.16-39.6l30.24-52.4c7.52-13.02 23.09-19.05 37.42-14.48l51.96 16.58c13.4-10.34 28.2-18.94 44-25.47l11.7-53.27C197.7 10.47 210.7 0 225.8 0h60.4c15.1 0 28.1 10.47 31.3 25.16l11.7 53.27c14.9 6.53 30.6 15.13 44 25.47l52-16.58c14.3-4.57 29.9 1.46 37.4 14.48l30.2 52.4c7.5 13 5 29.5-6.1 39.6l-40.4 36.8c1.1 8.3 1.7 16.8 1.7 24.5 0 9.5-.6 18-1.7 26.3l40.4 36.8c11.1 10.1 13.6 26.6 6.1 39.6l-30.2 52.4c-7.5 13-23.1 19-37.4 14.5l-52-16.6c-13.4 10.3-29.1 18.9-44 25.5l-11.7 53.2c-3.2 14.7-16.2 25.2-31.3 25.2h-60.4c-15.1 0-28.1-10.5-31.3-25.2l-11.7-53.2c-15.8-6.6-30.6-15.2-44-25.5l-51.96 16.6c-14.33 4.5-29.9-1.5-37.42-14.5l-30.24-52.4c-7.52-13-4.96-29.5 6.16-39.6l40.33-36.8c-1.1-8.3-1.67-16.8-1.67-26.3 0-7.7.57-16.2 1.67-24.5zm92.73-101.4-13.3 10.3-67.97-21.7-30.24 52.4 52.69 48-2.19 16.6c-.92 6.9-1.39 14-1.39 20.3 0 8.1.47 15.2 1.39 22.1l2.19 16.6-52.69 48 30.24 52.4 67.97-21.7 13.3 10.3c11.1 8.6 23.5 15.8 36.6 20.3l15.5 7.3 15.3 69.6h60.4l15.3-69.6 14.6-7.3c14-4.5 26.4-11.7 37.5-20.3l13.3-10.3 68 21.7 30.2-52.4-52.7-48 2.2-16.6c.9-6.9 1.4-14 1.4-21.2 0-7.2-.5-14.3-1.4-21.2l-2.2-16.6 52.7-48-30.2-52.4-68 21.7-13.3-10.3c-11.1-8.6-23.5-15.8-37.5-21.2l-14.6-6.4L286.2 32h-60.4l-15.3 69.6L195 108c-13.1 5.4-25.5 12.6-36.6 21.2z" }) }));
+exports.GearIcon = GearIcon;

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

@@ -0,0 +1,2 @@
+import type { SVGProps } from 'react';
+export declare const GifIcon: (props: SVGProps<SVGSVGElement>) => JSX.Element;

package/dist/editor/icons/gif.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GifIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const GifIcon = (props) => ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 576 512", ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentcolor", d: "M512 32H64C28.65 32 0 60.65 0 96v320c0 35.35 28.65 64 64 64h448c35.35 0 64-28.65 64-64V96c0-35.35-28.7-64-64-64zm32 384c0 17.64-14.36 32-32 32H64c-17.64 0-32-14.36-32-32V96c0-17.64 14.36-32 32-32h448c17.64 0 32 14.36 32 32v320zm-80-256h-96c-8.8 0-16 7.2-16 16v160c0 8.844 7.156 16 16 16s16-7.156 16-16v-64h56c8.844 0 16-7.156 16-16s-7.156-16-16-16h-56v-48h80c8.8 0 16-7.2 16-16s-7.2-16-16-16zm-160 0c-8.8 0-16 7.2-16 16v160c0 8.844 7.156 16 16 16s16-7.156 16-16V176c0-8.8-7.2-16-16-16zm-64 80h-64c-8.8 0-16 7.2-16 16s7.156 16 16 16h48v33.45c-24.83 19.91-69.13 18.16-91.48-4.203-24.95-24.95-24.95-65.55 0-90.5 25.03-25 64.19-25 89.22 0 6.25 6.25 16.38 6.25 22.62 0s6.25-16.38 0-22.62c-37.69-37.72-96.78-37.72-134.5 0-37.42 37.42-37.42 98.33 0 135.8C127.8 341.8 153.5 352 180.6 352c27.06 0 52.84-10.25 70.7-28.12 3-2.98 4.7-7.08 4.7-11.28V256c0-8.8-7.2-16-16-16z" }) }));
+exports.GifIcon = GifIcon;

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

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const ShiftIcon: React.FC;
+export declare const ArrowLeft: React.FC;
+export declare const ArrowRight: React.FC;

package/dist/editor/icons/keys.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ArrowRight = exports.ArrowLeft = exports.ShiftIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const iconStyle = {
+    width: 10,
+    display: 'inline',
+};
+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" }) }));
+};
+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" }) }));
+};
+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" }) }));
+};
+exports.ArrowRight = ArrowRight;

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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,12 @@
+"use strict";
+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" }) }));
+};
+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" }) }));
+};
+exports.UnlockIcon = UnlockIcon;

package/dist/editor/icons/media-volume.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const VolumeOffIcon: React.FC;
+export declare const VolumeOnIcon: React.FC;

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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VolumeOnIcon = exports.VolumeOffIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../helpers/colors");
+const size = 22;
+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: colors_1.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" }) }));
+};
+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

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

package/dist/editor/icons/pause.js

@@ -0,0 +1,6 @@
+"use strict";
+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" }) }));
+exports.Pause = Pause;

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

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

package/dist/editor/icons/play.js

@@ -0,0 +1,6 @@
+"use strict";
+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" }) }));
+exports.Play = Play;

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

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

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 = ({ color, ...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: color, 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;

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

@@ -0,0 +1,9 @@
+import type { SVGProps } from 'react';
+import React from 'react';
+export declare const RenderIcon: React.FC<{
+    svgProps: SVGProps<SVGSVGElement>;
+}>;
+export declare const ThinRenderIcon: React.FC<{
+    svgProps: SVGProps<SVGSVGElement>;
+    fill: string;
+}>;

package/dist/editor/icons/render.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThinRenderIcon = exports.RenderIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const RenderIcon = (props) => {
+    return ((0, jsx_runtime_1.jsx)("svg", { ...props.svgProps, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", children: (0, jsx_runtime_1.jsx)("path", { fill: 'currentColor', d: "M156.6 384.9L125.7 354c-8.5-8.5-11.5-20.8-7.7-32.2c3-8.9 7-20.5 11.8-33.8L24 288c-8.6 0-16.6-4.6-20.9-12.1s-4.2-16.7 .2-24.1l52.5-88.5c13-21.9 36.5-35.3 61.9-35.3l82.3 0c2.4-4 4.8-7.7 7.2-11.3C289.1-4.1 411.1-8.1 483.9 5.3c11.6 2.1 20.6 11.2 22.8 22.8c13.4 72.9 9.3 194.8-111.4 276.7c-3.5 2.4-7.3 4.8-11.3 7.2v82.3c0 25.4-13.4 49-35.3 61.9l-88.5 52.5c-7.4 4.4-16.6 4.5-24.1 .2s-12.1-12.2-12.1-20.9V380.8c-14.1 4.9-26.4 8.9-35.7 11.9c-11.2 3.6-23.4 .5-31.8-7.8zM384 168a40 40 0 1 0 0-80 40 40 0 1 0 0 80z" }) }));
+};
+exports.RenderIcon = RenderIcon;
+const ThinRenderIcon = (props) => {
+    return ((0, jsx_runtime_1.jsx)("svg", { ...props.svgProps, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", children: (0, jsx_runtime_1.jsx)("path", { fill: props.fill, d: "M188.9 372l-50.4-50.4c18.6-42.6 61.7-137.7 95.1-187C304.6 30.1 409 24.6 475.7 36.3c11.7 66.7 6.2 171.1-98.4 242c-49.4 33.5-145.5 75.6-188.4 93.7zm-79.9-62.8c-5.2 11.9-2.5 25.7 6.7 34.9l50.7 50.7c9.1 9.1 22.7 11.9 34.5 6.9c6.5-2.7 14.3-6 23-9.8L224 496c0 5.5 2.9 10.7 7.6 13.6s10.6 3.2 15.6 .7l101.5-50.7c21.7-10.8 35.4-33 35.4-57.2V312.1c4-2.5 7.7-4.9 11.3-7.3C516.1 222.9 520.1 100.9 506.7 28.1c-2.1-11.6-11.2-20.6-22.8-22.8C411.1-8.1 289.1-4.1 207.2 116.7c-2.4 3.6-4.9 7.3-7.3 11.3l-90.2 0c-24.2 0-46.4 13.7-57.2 35.4L1.7 264.8c-2.5 5-2.2 10.8 .7 15.6s8.1 7.6 13.6 7.6H118.5c-3.6 8-6.8 15.2-9.4 21.2zM256 470.1l0-92.5c30.3-13.7 65.4-30.3 96-47v71.7c0 12.1-6.8 23.2-17.7 28.6L256 470.1zM109.7 160h71.5c-16.9 30.7-34 65.8-48.1 96H41.9L81 177.7c5.4-10.8 16.5-17.7 28.6-17.7zM392 144a24 24 0 1 1 -48 0 24 24 0 1 1 48 0zM368 88a56 56 0 1 0 0 112 56 56 0 1 0 0-112z" }) }));
+};
+exports.ThinRenderIcon = ThinRenderIcon;

package/dist/editor/icons/step-back.d.ts

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

package/dist/editor/icons/step-back.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StepBack = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const StepBack = (props) => {
+    return ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 448 512", ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M64 468V44c0-6.6 5.4-12 12-12h48c6.6 0 12 5.4 12 12v176.4l195.5-181C352.1 22.3 384 36.6 384 64v384c0 27.4-31.9 41.7-52.5 24.6L136 292.7V468c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12z" }) }));
+};
+exports.StepBack = StepBack;

package/dist/editor/icons/step-forward.d.ts

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

package/dist/editor/icons/step-forward.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StepForward = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const StepForward = (props) => {
+    return ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 448 512", ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M384 44v424c0 6.6-5.4 12-12 12h-48c-6.6 0-12-5.4-12-12V291.6l-195.5 181C95.9 489.7 64 475.4 64 448V64c0-27.4 31.9-41.7 52.5-24.6L312 219.3V44c0-6.6 5.4-12 12-12h48c6.6 0 12 5.4 12 12z" }) }));
+};
+exports.StepForward = StepForward;

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

@@ -0,0 +1,5 @@
+import type { SVGProps } from 'react';
+import React from 'react';
+export declare const StillIcon: React.FC<SVGProps<SVGSVGElement> & {
+    color: string;
+}>;

package/dist/editor/icons/still.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StillIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const StillIcon = ({ color, ...props }) => {
+    return ((0, jsx_runtime_1.jsx)("svg", { ...props, viewBox: "0 0 512 512", children: (0, jsx_runtime_1.jsx)("path", { fill: color, d: "M144 288C144 226.1 194.1 176 256 176C317.9 176 368 226.1 368 288C368 349.9 317.9 400 256 400C194.1 400 144 349.9 144 288zM256 208C211.8 208 176 243.8 176 288C176 332.2 211.8 368 256 368C300.2 368 336 332.2 336 288C336 243.8 300.2 208 256 208zM362.9 64.82L373.3 96H448C483.3 96 512 124.7 512 160V416C512 451.3 483.3 480 448 480H64C28.65 480 0 451.3 0 416V160C0 124.7 28.65 96 64 96H138.7L149.1 64.82C155.6 45.22 173.9 32 194.6 32H317.4C338.1 32 356.4 45.22 362.9 64.82H362.9zM64 128C46.33 128 32 142.3 32 160V416C32 433.7 46.33 448 64 448H448C465.7 448 480 433.7 480 416V160C480 142.3 465.7 128 448 128H350.3L332.6 74.94C330.4 68.41 324.3 64 317.4 64H194.6C187.7 64 181.6 68.41 179.4 74.94L161.7 128H64z" }) }));
+};
+exports.StillIcon = StillIcon;

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

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

package/dist/editor/icons/timelineInOutPointer.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineOutPointer = exports.TimelineInPointer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const TimelineInPointer = (props) => {
+    return ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 256 256", fill: "none", ...props, children: (0, jsx_runtime_1.jsx)("path", { d: "M158 25H99V230.5H158", stroke: props.color, strokeWidth: "42", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+};
+exports.TimelineInPointer = TimelineInPointer;
+const TimelineOutPointer = (props) => {
+    return ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 256 256", fill: "none", ...props, children: (0, jsx_runtime_1.jsx)("path", { d: "M98 25H157V230.5H98", stroke: props.color, strokeWidth: "42", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+};
+exports.TimelineOutPointer = TimelineOutPointer;

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

@@ -0,0 +1,5 @@
+import type { SVGProps } from 'react';
+import React from 'react';
+export declare const FilmIcon: React.FC<SVGProps<SVGSVGElement> & {
+    color: string;
+}>;

package/dist/editor/icons/video.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FilmIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const FilmIcon = ({ color, ...props }) => {
+    return ((0, jsx_runtime_1.jsx)("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", children: (0, jsx_runtime_1.jsx)("path", { fill: color, d: "M448 32H64C28.65 32 0 60.65 0 96v320c0 35.35 28.65 64 64 64h384c35.35 0 64-28.65 64-64V96C512 60.65 483.3 32 448 32zM384 64v176H128V64H384zM32 96c0-17.64 14.36-32 32-32h32v80H32V96zM32 176h64v64H32V176zM32 272h64v64H32V272zM64 448c-17.64 0-32-14.36-32-32v-48h64V448H64zM128 448V272h256V448H128zM480 416c0 17.64-14.36 32-32 32h-32v-80h64V416zM480 336h-64v-64h64V336zM480 240h-64v-64h64V240zM480 144h-64V64h32c17.64 0 32 14.36 32 32V144z" }) }));
+};
+exports.FilmIcon = FilmIcon;

package/dist/editor/state/aspect-ratio-locked.d.ts

@@ -0,0 +1,2 @@
+export declare const persistAspectRatioOption: (option: boolean) => void;
+export declare const loadAspectRatioOption: () => boolean;

package/dist/editor/state/aspect-ratio-locked.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.loadAspectRatioOption = exports.persistAspectRatioOption = void 0;
+const aspectRatioLocalStorageKey = 'aspectRatio';
+const persistAspectRatioOption = (option) => {
+    localStorage.setItem(aspectRatioLocalStorageKey, String(option));
+};
+exports.persistAspectRatioOption = persistAspectRatioOption;
+const loadAspectRatioOption = () => {
+    const item = localStorage.getItem(aspectRatioLocalStorageKey);
+    if (item === null) {
+        return true;
+    }
+    return item !== 'false';
+};
+exports.loadAspectRatioOption = loadAspectRatioOption;

package/dist/editor/state/canvas-ref.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const canvasRef: import("react").RefObject<HTMLDivElement>;

package/dist/editor/state/canvas-ref.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.canvasRef = void 0;
+const react_1 = require("react");
+exports.canvasRef = (0, react_1.createRef)();