@remotion/cli 4.0.79 → 4.0.82

package/dist/editor/components/CanvasOrLoading.js

@@ -1,96 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ErrorLoading = exports.CanvasOrLoading = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const remotion_1 = require("remotion");
-const ErrorLoader_1 = require("../../preview-server/error-overlay/remotion-overlay/ErrorLoader");
-const colors_1 = require("../helpers/colors");
-const timeline_zoom_1 = require("../state/timeline-zoom");
-const Canvas_1 = require("./Canvas");
-const FramePersistor_1 = require("./FramePersistor");
-const layout_1 = require("./layout");
-const styles_1 = require("./Menu/styles");
-const Spinner_1 = require("./Spinner");
-const imperative_state_1 = require("./Timeline/imperative-state");
-const timeline_scroll_logic_1 = require("./Timeline/timeline-scroll-logic");
-const ZoomPersistor_1 = require("./ZoomPersistor");
-const container = {
-    color: 'white',
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    display: 'flex',
-    backgroundColor: colors_1.BACKGROUND,
-    flexDirection: 'column',
-};
-const CanvasOrLoading = () => {
-    const resolved = remotion_1.Internals.useResolvedVideoConfig(null);
-    const [takesALongTime, setTakesALongTime] = (0, react_1.useState)(false);
-    const { setZoom } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
-    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
-    (0, react_1.useEffect)(() => {
-        const timeout = setTimeout(() => {
-            setTakesALongTime(true);
-        }, 500);
-        return () => {
-            clearTimeout(timeout);
-        };
-    }, []);
-    (0, react_1.useEffect)(() => {
-        if ((resolved === null || resolved === void 0 ? void 0 : resolved.type) !== 'success') {
-            return;
-        }
-        const c = resolved.result;
-        setTimeout(() => {
-            (0, timeline_scroll_logic_1.ensureFrameIsInViewport)({
-                direction: 'center',
-                frame: (0, imperative_state_1.getCurrentFrame)(),
-                durationInFrames: c.durationInFrames,
-            });
-        });
-    }, [resolved, setZoom]);
-    const style = (0, react_1.useMemo)(() => {
-        return {
-            ...loaderLabel,
-            opacity: takesALongTime ? 1 : 0,
-            transition: 'opacity 0.3s',
-        };
-    }, [takesALongTime]);
-    if (!canvasContent) {
-        return null;
-    }
-    const content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ZoomPersistor_1.ZoomPersistor, {}), (0, jsx_runtime_1.jsx)(Canvas_1.Canvas, { canvasContent: canvasContent })] }));
-    if (canvasContent.type === 'asset' || canvasContent.type === 'output') {
-        return content;
-    }
-    if (!resolved) {
-        return null;
-    }
-    if (resolved.type === 'loading') {
-        return ((0, jsx_runtime_1.jsxs)("div", { style: container, className: "css-reset", children: [(0, jsx_runtime_1.jsx)(Spinner_1.Spinner, { size: 30, duration: 1 }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 2 }), (0, jsx_runtime_1.jsxs)("div", { style: style, children: ["Running ", (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: "calculateMetadata()" }), "..."] })] }));
-    }
-    if (resolved.type === 'error') {
-        return (0, jsx_runtime_1.jsx)(exports.ErrorLoading, { error: resolved.error });
-    }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(FramePersistor_1.FramePersistor, {}), " ", content] }));
-};
-exports.CanvasOrLoading = CanvasOrLoading;
-const loaderLabel = {
-    fontSize: 14,
-    color: colors_1.LIGHT_TEXT,
-    fontFamily: 'sans-serif',
-    lineHeight: 1.5,
-};
-const loaderContainer = {
-    marginLeft: 'auto',
-    marginRight: 'auto',
-    width: '100%',
-    position: 'absolute',
-    height: '100%',
-    overflowY: 'auto',
-};
-const ErrorLoading = ({ error }) => {
-    return ((0, jsx_runtime_1.jsx)("div", { style: loaderContainer, children: (0, jsx_runtime_1.jsx)(ErrorLoader_1.ErrorLoader, { canHaveDismissButton: false, keyboardShortcuts: false, error: error, onRetry: () => { var _a; return (_a = remotion_1.Internals.resolveCompositionsRef.current) === null || _a === void 0 ? void 0 : _a.reloadCurrentlySelectedComposition(); }, calculateMetadata: true }, error.stack) }));
-};
-exports.ErrorLoading = ErrorLoading;

package/dist/editor/components/CheckboardToggle.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const CheckboardToggle: React.FC;

package/dist/editor/components/CheckboardToggle.js

@@ -1,26 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CheckboardToggle = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const truthy_1 = require("../../truthy");
-const colors_1 = require("../helpers/colors");
-const use_keybinding_1 = require("../helpers/use-keybinding");
-const checkerboard_1 = require("../state/checkerboard");
-const ControlButton_1 = require("./ControlButton");
-const accessibilityLabel = [
-    'Show transparency as checkerboard',
-    (0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? null : '(T)',
-]
-    .filter(truthy_1.truthy)
-    .join(' ');
-const CheckboardToggle = () => {
-    const { checkerboard, setCheckerboard } = (0, react_1.useContext)(checkerboard_1.CheckerboardContext);
-    const onClick = (0, react_1.useCallback)(() => {
-        setCheckerboard((c) => {
-            return !c;
-        });
-    }, [setCheckerboard]);
-    return ((0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, onClick: onClick, children: (0, jsx_runtime_1.jsx)("svg", { "aria-hidden": "true", focusable: "false", "data-prefix": "fas", "data-icon": "game-board-alt", className: "svg-inline--fa fa-game-board-alt fa-w-16", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", style: { width: 16, height: 16 }, children: (0, jsx_runtime_1.jsx)("path", { fill: checkerboard ? colors_1.BLUE : 'white', d: "M480 0H32A32 32 0 0 0 0 32v448a32 32 0 0 0 32 32h448a32 32 0 0 0 32-32V32a32 32 0 0 0-32-32zm-32 256H256v192H64V256h192V64h192z" }) }) }));
-};
-exports.CheckboardToggle = CheckboardToggle;

package/dist/editor/components/Checkbox.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-export declare const Checkbox: React.FC<{
-    checked: boolean;
-    onChange: React.ChangeEventHandler<HTMLInputElement>;
-    name: string;
-    disabled?: boolean;
-}>;

package/dist/editor/components/Checkbox.js

@@ -1,42 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Checkbox = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const colors_1 = require("../helpers/colors");
-const Checkmark_1 = require("../icons/Checkmark");
-const size = 20;
-const background = {
-    height: size,
-    width: size,
-    position: 'relative',
-};
-const box = {
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    position: 'absolute',
-    height: size,
-    width: size,
-    top: 0,
-    left: 0,
-    pointerEvents: 'none',
-    color: 'white',
-};
-const Checkbox = ({ checked, onChange, disabled, name }) => {
-    const input = (0, react_1.useMemo)(() => {
-        return {
-            appearance: 'none',
-            background: disabled ? 'transparent' : colors_1.INPUT_BACKGROUND,
-            border: '1px solid ' + colors_1.INPUT_BORDER_COLOR_UNHOVERED,
-            height: size,
-            width: size,
-            top: 0,
-            left: 0,
-            position: 'absolute',
-            margin: 0,
-        };
-    }, [disabled]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: background, children: [(0, jsx_runtime_1.jsx)("input", { style: input, type: 'checkbox', checked: checked, onChange: onChange, disabled: disabled, name: name }), (0, jsx_runtime_1.jsx)("div", { style: box, children: checked ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null })] }));
-};
-exports.Checkbox = Checkbox;

package/dist/editor/components/CheckerboardProvider.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-export declare const CheckerboardProvider: React.FC<{
-    children: React.ReactNode;
-}>;

package/dist/editor/components/CheckerboardProvider.js

@@ -1,24 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CheckerboardProvider = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const checkerboard_1 = require("../state/checkerboard");
-const CheckerboardProvider = ({ children }) => {
-    const [checkerboard, setCheckerboardState] = (0, react_1.useState)(() => (0, checkerboard_1.loadCheckerboardOption)());
-    const setCheckerboard = (0, react_1.useCallback)((newValue) => {
-        setCheckerboardState((prevState) => {
-            const newVal = newValue(prevState);
-            (0, checkerboard_1.persistCheckerboardOption)(newVal);
-            return newVal;
-        });
-    }, []);
-    const checkerboardCtx = (0, react_1.useMemo)(() => {
-        return {
-            checkerboard,
-            setCheckerboard,
-        };
-    }, [checkerboard, setCheckerboard]);
-    return ((0, jsx_runtime_1.jsx)(checkerboard_1.CheckerboardContext.Provider, { value: checkerboardCtx, children: children }));
-};
-exports.CheckerboardProvider = CheckerboardProvider;

package/dist/editor/components/CompositionSelector.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-export declare const getKeysToExpand: (initialFolderName: string, parentFolderName: string | null, initial?: string[]) => string[];
-export declare const compositionSelectorRef: React.RefObject<{
-    expandComposition: (compName: string) => void;
-}>;
-export declare const CompositionSelector: React.FC;

package/dist/editor/components/CompositionSelector.js

@@ -1,102 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CompositionSelector = exports.compositionSelectorRef = exports.getKeysToExpand = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const remotion_1 = require("remotion");
-const colors_1 = require("../helpers/colors");
-const create_folder_tree_1 = require("../helpers/create-folder-tree");
-const persist_open_folders_1 = require("../helpers/persist-open-folders");
-const z_index_1 = require("../state/z-index");
-const CompositionSelectorItem_1 = require("./CompositionSelectorItem");
-const CurrentComposition_1 = require("./CurrentComposition");
-const InitialCompositionLoader_1 = require("./InitialCompositionLoader");
-const container = {
-    display: 'flex',
-    flexDirection: 'column',
-    flex: 1,
-    overflow: 'hidden',
-    backgroundColor: colors_1.BACKGROUND,
-};
-const getKeysToExpand = (initialFolderName, parentFolderName, initial = []) => {
-    initial.push((0, persist_open_folders_1.openFolderKey)(initialFolderName, parentFolderName));
-    const { name, parent } = (0, create_folder_tree_1.splitParentIntoNameAndParent)(parentFolderName);
-    if (!name) {
-        return initial;
-    }
-    return (0, exports.getKeysToExpand)(name, parent, initial);
-};
-exports.getKeysToExpand = getKeysToExpand;
-exports.compositionSelectorRef = (0, react_1.createRef)();
-const CompositionSelector = () => {
-    const { compositions, canvasContent, folders } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
-    const [foldersExpanded, setFoldersExpanded] = (0, react_1.useState)((0, persist_open_folders_1.loadExpandedFolders)('compositions'));
-    const { tabIndex } = (0, z_index_1.useZIndex)();
-    const selectComposition = (0, InitialCompositionLoader_1.useSelectComposition)();
-    const toggleFolder = (0, react_1.useCallback)((folderName, parentName) => {
-        setFoldersExpanded((p) => {
-            var _a;
-            const key = (0, persist_open_folders_1.openFolderKey)(folderName, parentName);
-            const prev = (_a = p[key]) !== null && _a !== void 0 ? _a : false;
-            const foldersExpandedState = {
-                ...p,
-                [key]: !prev,
-            };
-            (0, persist_open_folders_1.persistExpandedFolders)('compositions', foldersExpandedState);
-            return foldersExpandedState;
-        });
-    }, []);
-    (0, react_1.useImperativeHandle)(exports.compositionSelectorRef, () => {
-        return {
-            expandComposition: (compName) => {
-                const compositionToExpand = compositions.find((c) => c.id === compName);
-                if (!compositionToExpand) {
-                    return;
-                }
-                const { folderName, parentFolderName } = compositionToExpand;
-                if (folderName === null) {
-                    return;
-                }
-                setFoldersExpanded((previousState) => {
-                    var _a, _b, _c;
-                    const foldersExpandedState = {
-                        ...previousState,
-                    };
-                    let currentFolder = folderName;
-                    let currentParentName = parentFolderName;
-                    while (currentFolder) {
-                        if (currentParentName === null || currentParentName === void 0 ? void 0 : currentParentName.includes('/')) {
-                            const splittedParentName = currentParentName.split('/');
-                            currentParentName = (_a = splittedParentName.pop()) !== null && _a !== void 0 ? _a : null;
-                        }
-                        const key = (0, persist_open_folders_1.openFolderKey)(currentFolder, currentParentName);
-                        foldersExpandedState[key] = true;
-                        const parentFolder = folders.find((f) => {
-                            return f.name === currentParentName && currentParentName;
-                        });
-                        currentFolder = (_b = parentFolder === null || parentFolder === void 0 ? void 0 : parentFolder.name) !== null && _b !== void 0 ? _b : null;
-                        currentParentName = (_c = parentFolder === null || parentFolder === void 0 ? void 0 : parentFolder.parent) !== null && _c !== void 0 ? _c : null;
-                    }
-                    (0, persist_open_folders_1.persistExpandedFolders)('compositions', foldersExpandedState);
-                    return foldersExpandedState;
-                });
-            },
-        };
-    }, [compositions, folders]);
-    const items = (0, react_1.useMemo)(() => {
-        return (0, create_folder_tree_1.createFolderTree)(compositions, folders, foldersExpanded);
-    }, [compositions, folders, foldersExpanded]);
-    const showCurrentComposition = canvasContent && canvasContent.type === 'composition';
-    const list = (0, react_1.useMemo)(() => {
-        return {
-            height: showCurrentComposition
-                ? `calc(100% - ${CurrentComposition_1.CURRENT_COMPOSITION_HEIGHT}px)`
-                : '100%',
-            overflowY: 'auto',
-        };
-    }, [showCurrentComposition]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [showCurrentComposition ? (0, jsx_runtime_1.jsx)(CurrentComposition_1.CurrentComposition, {}) : null, (0, jsx_runtime_1.jsx)("div", { className: "__remotion-vertical-scrollbar", style: list, children: items.map((c) => {
-                    return ((0, jsx_runtime_1.jsx)(CompositionSelectorItem_1.CompositionSelectorItem, { level: 0, currentComposition: showCurrentComposition ? canvasContent.compositionId : null, selectComposition: selectComposition, toggleFolder: toggleFolder, tabIndex: tabIndex, item: c }, c.key + c.type));
-                }) })] }));
-};
-exports.CompositionSelector = CompositionSelector;

package/dist/editor/components/CompositionSelectorItem.d.ts

@@ -1,22 +0,0 @@
-import React from 'react';
-import { type AnyComposition } from 'remotion';
-export type CompositionSelectorItemType = {
-    key: string;
-    type: 'composition';
-    composition: AnyComposition;
-} | {
-    key: string;
-    type: 'folder';
-    folderName: string;
-    parentName: string | null;
-    items: CompositionSelectorItemType[];
-    expanded: boolean;
-};
-export declare const CompositionSelectorItem: React.FC<{
-    item: CompositionSelectorItemType;
-    currentComposition: string | null;
-    tabIndex: number;
-    selectComposition: (c: AnyComposition, push: boolean) => void;
-    toggleFolder: (folderName: string, parentName: string | null) => void;
-    level: number;
-}>;

package/dist/editor/components/CompositionSelectorItem.js

@@ -1,136 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CompositionSelectorItem = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const colors_1 = require("../helpers/colors");
-const is_composition_still_1 = require("../helpers/is-composition-still");
-const folder_1 = require("../icons/folder");
-const still_1 = require("../icons/still");
-const video_1 = require("../icons/video");
-const ContextMenu_1 = require("./ContextMenu");
-const layout_1 = require("./layout");
-const NotificationCenter_1 = require("./Notifications/NotificationCenter");
-const SidebarRenderButton_1 = require("./SidebarRenderButton");
-const COMPOSITION_ITEM_HEIGHT = 32;
-const itemStyle = {
-    paddingRight: 10,
-    paddingTop: 6,
-    paddingBottom: 6,
-    fontSize: 13,
-    display: 'flex',
-    textDecoration: 'none',
-    cursor: 'default',
-    alignItems: 'center',
-    marginBottom: 1,
-    appearance: 'none',
-    border: 'none',
-    width: '100%',
-    textAlign: 'left',
-    backgroundColor: colors_1.BACKGROUND,
-    height: COMPOSITION_ITEM_HEIGHT,
-};
-const labelStyle = {
-    textAlign: 'left',
-    textDecoration: 'none',
-    fontSize: 13,
-    flex: 1,
-    whiteSpace: 'nowrap',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-};
-const iconStyle = {
-    width: 18,
-    height: 18,
-    flexShrink: 0,
-};
-const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, selectComposition, toggleFolder, }) => {
-    const selected = (0, react_1.useMemo)(() => {
-        if (item.type === 'composition') {
-            return currentComposition === item.composition.id;
-        }
-        return false;
-    }, [item, currentComposition]);
-    const [hovered, setHovered] = (0, react_1.useState)(false);
-    const onPointerEnter = (0, react_1.useCallback)(() => {
-        setHovered(true);
-    }, []);
-    const onPointerLeave = (0, react_1.useCallback)(() => {
-        setHovered(false);
-    }, []);
-    const style = (0, react_1.useMemo)(() => {
-        return {
-            ...itemStyle,
-            backgroundColor: (0, colors_1.getBackgroundFromHoverState)({ hovered, selected }),
-            paddingLeft: 12 + level * 8,
-        };
-    }, [hovered, level, selected]);
-    const label = (0, react_1.useMemo)(() => {
-        return {
-            ...labelStyle,
-            color: selected || hovered ? 'white' : colors_1.LIGHT_TEXT,
-        };
-    }, [hovered, selected]);
-    const onClick = (0, react_1.useCallback)((evt) => {
-        evt.preventDefault();
-        if (item.type === 'composition') {
-            selectComposition(item.composition, true);
-        }
-        else {
-            toggleFolder(item.folderName, item.parentName);
-        }
-    }, [item, selectComposition, toggleFolder]);
-    const onKeyPress = (0, react_1.useCallback)((evt) => {
-        if (evt.key === 'Enter') {
-            onClick(evt);
-        }
-    }, [onClick]);
-    const contextMenu = (0, react_1.useMemo)(() => {
-        if (item.type === 'composition') {
-            return [
-                {
-                    id: '1',
-                    keyHint: null,
-                    label: `Copy ID`,
-                    leftItem: null,
-                    onClick: () => {
-                        navigator.clipboard
-                            .writeText(item.composition.id)
-                            .catch((err) => {
-                            var _a;
-                            (_a = NotificationCenter_1.notificationCenter.current) === null || _a === void 0 ? void 0 : _a.addNotification({
-                                content: `Could not copy to clipboard: ${err.message}`,
-                                created: Date.now(),
-                                duration: 1000,
-                                id: String(Math.random()),
-                            });
-                        })
-                            .then(() => {
-                            var _a;
-                            (_a = NotificationCenter_1.notificationCenter.current) === null || _a === void 0 ? void 0 : _a.addNotification({
-                                content: 'Copied to clipboard',
-                                created: Date.now(),
-                                duration: 1000,
-                                id: String(Math.random()),
-                            });
-                        });
-                    },
-                    quickSwitcherLabel: null,
-                    subMenu: null,
-                    type: 'item',
-                    value: 'remove',
-                },
-            ];
-        }
-        return [];
-    }, [item]);
-    if (item.type === 'folder') {
-        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("button", { style: style, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, tabIndex: tabIndex, onClick: onClick, type: "button", title: item.folderName, children: [item.expanded ? ((0, jsx_runtime_1.jsx)(folder_1.ExpandedFolderIcon, { style: iconStyle, color: hovered || selected ? 'white' : colors_1.LIGHT_TEXT })) : ((0, jsx_runtime_1.jsx)(folder_1.CollapsedFolderIcon, { color: hovered || selected ? 'white' : colors_1.LIGHT_TEXT, style: iconStyle })), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("div", { style: label, children: item.folderName })] }), item.expanded
-                    ? item.items.map((childItem) => {
-                        return ((0, jsx_runtime_1.jsx)(exports.CompositionSelectorItem, { currentComposition: currentComposition, selectComposition: selectComposition, item: childItem, tabIndex: tabIndex, level: level + 1, toggleFolder: toggleFolder }, childItem.key + childItem.type));
-                    })
-                    : null] }));
-    }
-    return ((0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, { values: contextMenu, children: (0, jsx_runtime_1.jsx)(layout_1.Row, { align: "center", children: (0, jsx_runtime_1.jsxs)("a", { style: style, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, tabIndex: tabIndex, onClick: onClick, onKeyPress: onKeyPress, type: "button", title: item.composition.id, className: "__remotion-composition", "data-compname": item.composition.id, children: [(0, is_composition_still_1.isCompositionStill)(item.composition) ? ((0, jsx_runtime_1.jsx)(still_1.StillIcon, { color: hovered || selected ? 'white' : colors_1.LIGHT_TEXT, style: iconStyle })) : ((0, jsx_runtime_1.jsx)(video_1.FilmIcon, { color: hovered || selected ? 'white' : colors_1.LIGHT_TEXT, style: iconStyle })), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("div", { style: label, children: item.composition.id }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(SidebarRenderButton_1.SidebarRenderButton, { visible: hovered, composition: item.composition }) })] }) }) }));
-};
-exports.CompositionSelectorItem = CompositionSelectorItem;

package/dist/editor/components/ContextMenu.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-import type { ComboboxValue } from './NewComposition/ComboBox';
-export declare const ContextMenu: React.FC<{
-    children: React.ReactNode;
-    values: ComboboxValue[];
-}>;

package/dist/editor/components/ContextMenu.js

@@ -1,91 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ContextMenu = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const player_1 = require("@remotion/player");
-const react_1 = require("react");
-const react_dom_1 = __importDefault(require("react-dom"));
-const noop_1 = require("../helpers/noop");
-const z_index_1 = require("../state/z-index");
-const portals_1 = require("./Menu/portals");
-const styles_1 = require("./Menu/styles");
-const MenuContent_1 = require("./NewComposition/MenuContent");
-const ContextMenu = ({ children, values }) => {
-    const ref = (0, react_1.useRef)(null);
-    const [opened, setOpened] = (0, react_1.useState)({ type: 'not-open' });
-    const { currentZIndex } = (0, z_index_1.useZIndex)();
-    const style = (0, react_1.useMemo)(() => {
-        return {};
-    }, []);
-    const size = player_1.PlayerInternals.useElementSize(ref, {
-        triggerOnWindowResize: true,
-        shouldApplyCssTransforms: true,
-    });
-    (0, react_1.useEffect)(() => {
-        const { current } = ref;
-        if (!current) {
-            return;
-        }
-        const onClick = (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            setOpened({ type: 'open', left: e.clientX, top: e.clientY });
-            return false;
-        };
-        current.addEventListener('contextmenu', onClick);
-        return () => {
-            current.removeEventListener('contextmenu', onClick);
-        };
-    }, [size]);
-    const spaceToBottom = (0, react_1.useMemo)(() => {
-        if (size && opened.type === 'open') {
-            return size.windowSize.height - opened.top;
-        }
-        return 0;
-    }, [opened, size]);
-    const spaceToTop = (0, react_1.useMemo)(() => {
-        if (size && opened.type === 'open') {
-            return opened.top;
-        }
-        return 0;
-    }, [opened, size]);
-    const portalStyle = (0, react_1.useMemo)(() => {
-        if (opened.type === 'not-open') {
-            return;
-        }
-        if (!size) {
-            return;
-        }
-        const spaceToRight = size.windowSize.width - (opened.left + size.width);
-        const minSpaceToRightRequired = styles_1.MAX_MENU_WIDTH;
-        const verticalLayout = spaceToTop > spaceToBottom ? 'bottom' : 'top';
-        const horizontalLayout = spaceToRight >= minSpaceToRightRequired ? 'left' : 'right';
-        return {
-            ...styles_1.menuContainerTowardsTop,
-            ...(verticalLayout === 'top'
-                ? {
-                    top: opened.top,
-                }
-                : {
-                    bottom: size.windowSize.height - opened.top,
-                }),
-            ...(horizontalLayout === 'left'
-                ? {
-                    left: opened.left,
-                }
-                : {
-                    right: size.windowSize.width - opened.left,
-                }),
-        };
-    }, [opened, spaceToBottom, spaceToTop, size]);
-    const onHide = (0, react_1.useCallback)(() => {
-        setOpened({ type: 'not-open' });
-    }, []);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { ref: ref, onContextMenu: () => false, style: style, children: children }), portalStyle
-                ? react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)("div", { style: styles_1.fullScreenOverlay, children: (0, jsx_runtime_1.jsx)("div", { style: styles_1.outerPortal, className: "css-reset", children: (0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onOutsideClick: onHide, onEscape: onHide, children: (0, jsx_runtime_1.jsx)("div", { style: portalStyle, children: (0, jsx_runtime_1.jsx)(MenuContent_1.MenuContent, { onNextMenu: noop_1.noop, onPreviousMenu: noop_1.noop, values: values, onHide: onHide, leaveLeftSpace: true, preselectIndex: false, topItemCanBeUnselected: false, fixedHeight: null }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
-                : null] }));
-};
-exports.ContextMenu = ContextMenu;

package/dist/editor/components/ControlButton.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-export declare const CONTROL_BUTTON_PADDING = 6;
-export declare const ControlButton: (props: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> & {
-    title: string;
-}) => JSX.Element;

package/dist/editor/components/ControlButton.js

@@ -1,21 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ControlButton = exports.CONTROL_BUTTON_PADDING = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const z_index_1 = require("../state/z-index");
-exports.CONTROL_BUTTON_PADDING = 6;
-const ControlButton = (props) => {
-    const style = (0, react_1.useMemo)(() => {
-        return {
-            opacity: props.disabled ? 0.5 : 1,
-            display: 'inline-flex',
-            background: 'none',
-            border: 'none',
-            padding: exports.CONTROL_BUTTON_PADDING,
-        };
-    }, [props.disabled]);
-    const { tabIndex } = (0, z_index_1.useZIndex)();
-    return ((0, jsx_runtime_1.jsx)("button", { type: 'button', tabIndex: tabIndex, ...props, style: style }));
-};
-exports.ControlButton = ControlButton;

package/dist/editor/components/CopyButton.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-export declare const CopyButton: React.FC<{
-    textToCopy: string;
-    label: string;
-    labelWhenCopied: string;
-}>;