@remotion/cli 4.0.113 → 4.0.115

package/dist/editor/components/NewComposition/CancelButton.d.ts

@@ -1,5 +0,0 @@
-import type { SVGProps } from 'react';
-import React from 'react';
-export declare const CancelButton: React.FC<SVGProps<SVGSVGElement> & {
-    onPress: () => void;
-}>;

package/dist/editor/components/NewComposition/CancelButton.js

@@ -1,20 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CancelButton = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const z_index_1 = require("../../state/z-index");
-const style = {
-    appearance: 'none',
-    border: 'none',
-    backgroundColor: 'transparent',
-    color: 'white',
-    cursor: 'pointer',
-    display: 'inline-flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-};
-const CancelButton = ({ onPress, ...props }) => {
-    const { tabIndex } = (0, z_index_1.useZIndex)();
-    return ((0, jsx_runtime_1.jsx)("button", { tabIndex: tabIndex, style: style, type: "button", onClick: onPress, children: (0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 320 512", ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z" }) }) }));
-};
-exports.CancelButton = CancelButton;

package/dist/editor/components/NewComposition/ComboBox.d.ts

@@ -1,29 +0,0 @@
-import React from 'react';
-type DividerItem = {
-    type: 'divider';
-    id: string;
-};
-export type SubMenu = {
-    preselectIndex: number | false;
-    leaveLeftSpace: boolean;
-    items: ComboboxValue[];
-};
-export type SelectionItem = {
-    type: 'item';
-    id: string;
-    label: React.ReactNode;
-    value: string | number;
-    onClick: (id: string, e: React.PointerEvent | null) => void;
-    keyHint: string | null;
-    leftItem: React.ReactNode;
-    subMenu: SubMenu | null;
-    quickSwitcherLabel: string | null;
-};
-export type ComboboxValue = DividerItem | SelectionItem;
-export declare const Combobox: React.FC<{
-    values: ComboboxValue[];
-    selectedId: string | number;
-    style?: React.CSSProperties;
-    title: string;
-}>;
-export {};

package/dist/editor/components/NewComposition/ComboBox.js

@@ -1,159 +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.Combobox = 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 colors_1 = require("../../helpers/colors");
-const noop_1 = require("../../helpers/noop");
-const caret_1 = require("../../icons/caret");
-const z_index_1 = require("../../state/z-index");
-const layout_1 = require("../layout");
-const is_menu_item_1 = require("../Menu/is-menu-item");
-const portals_1 = require("../Menu/portals");
-const styles_1 = require("../Menu/styles");
-const MenuContent_1 = require("./MenuContent");
-const container = {
-    padding: '8px 10px',
-    display: 'inline-block',
-    backgroundColor: colors_1.INPUT_BACKGROUND,
-    borderWidth: 1,
-    borderStyle: 'solid',
-    maxWidth: '100%',
-};
-const label = {
-    flex: 1,
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    fontSize: 14,
-    textAlign: 'left',
-};
-const Combobox = ({ values, selectedId, style: customStyle, title }) => {
-    const [hovered, setIsHovered] = (0, react_1.useState)(false);
-    const [opened, setOpened] = (0, react_1.useState)(false);
-    const ref = (0, react_1.useRef)(null);
-    const { tabIndex, currentZIndex } = (0, z_index_1.useZIndex)();
-    const size = player_1.PlayerInternals.useElementSize(ref, {
-        triggerOnWindowResize: true,
-        shouldApplyCssTransforms: true,
-    });
-    const refresh = size === null || size === void 0 ? void 0 : size.refresh;
-    const onHide = (0, react_1.useCallback)(() => {
-        setOpened(false);
-    }, []);
-    (0, react_1.useEffect)(() => {
-        const { current } = ref;
-        if (!current) {
-            return;
-        }
-        const onMouseEnter = () => setIsHovered(true);
-        const onMouseLeave = () => setIsHovered(false);
-        const onPointerDown = () => {
-            return setOpened((o) => {
-                if (!o) {
-                    refresh === null || refresh === void 0 ? void 0 : refresh();
-                }
-                return !o;
-            });
-        };
-        const onClick = (e) => {
-            e.stopPropagation();
-            const isKeyboardInitiated = e.detail === 0;
-            if (!isKeyboardInitiated) {
-                return;
-            }
-            return setOpened((o) => {
-                if (!o) {
-                    refresh === null || refresh === void 0 ? void 0 : refresh();
-                    window.addEventListener('pointerup', (evt) => {
-                        if (!(0, is_menu_item_1.isMenuItem)(evt.target)) {
-                            setOpened(false);
-                        }
-                    }, {
-                        once: true,
-                    });
-                }
-                return !o;
-            });
-        };
-        current.addEventListener('mouseenter', onMouseEnter);
-        current.addEventListener('mouseleave', onMouseLeave);
-        current.addEventListener('pointerdown', onPointerDown);
-        current.addEventListener('click', onClick);
-        return () => {
-            current.removeEventListener('mouseenter', onMouseEnter);
-            current.removeEventListener('mouseleave', onMouseLeave);
-            current.removeEventListener('pointerdown', onPointerDown);
-            current.removeEventListener('click', onClick);
-        };
-    }, [refresh]);
-    const spaceToBottom = (0, react_1.useMemo)(() => {
-        const margin = 10;
-        if (size && opened) {
-            return size.windowSize.height - (size.top + size.height) - margin;
-        }
-        return 0;
-    }, [opened, size]);
-    const spaceToTop = (0, react_1.useMemo)(() => {
-        const margin = 10;
-        if (size && opened) {
-            return size.top - margin;
-        }
-        return 0;
-    }, [opened, size]);
-    const derivedMaxHeight = (0, react_1.useMemo)(() => {
-        return spaceToTop > spaceToBottom ? spaceToTop : spaceToBottom;
-    }, [spaceToBottom, spaceToTop]);
-    const portalStyle = (0, react_1.useMemo)(() => {
-        if (!opened || !size) {
-            return null;
-        }
-        const spaceToRight = size.windowSize.width - (size.left + size.width);
-        const minSpaceToRightRequired = styles_1.MAX_MENU_WIDTH;
-        const verticalLayout = spaceToTop > spaceToBottom ? 'bottom' : 'top';
-        const horizontalLayout = spaceToRight >= minSpaceToRightRequired ? 'left' : 'right';
-        return {
-            ...(verticalLayout === 'top'
-                ? {
-                    ...styles_1.menuContainerTowardsBottom,
-                    top: size.top + size.height,
-                }
-                : {
-                    ...styles_1.menuContainerTowardsTop,
-                    bottom: size.windowSize.height - size.top,
-                }),
-            ...(horizontalLayout === 'left'
-                ? {
-                    left: size.left,
-                }
-                : {
-                    right: size.windowSize.width - size.left - size.width,
-                }),
-        };
-    }, [opened, size, spaceToBottom, spaceToTop]);
-    const selected = values.find((v) => v.id === selectedId);
-    const style = (0, react_1.useMemo)(() => {
-        return {
-            ...container,
-            ...(customStyle !== null && customStyle !== void 0 ? customStyle : {}),
-            userSelect: 'none',
-            color: 'white',
-            display: 'inline-flex',
-            flexDirection: 'row',
-            alignItems: 'center',
-            borderColor: opened
-                ? colors_1.SELECTED_BACKGROUND
-                : hovered
-                    ? colors_1.INPUT_BORDER_COLOR_HOVERED
-                    : colors_1.INPUT_BORDER_COLOR_UNHOVERED,
-        };
-    }, [customStyle, hovered, opened]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("button", { ref: ref, title: title, tabIndex: tabIndex, type: "button", style: style, className: is_menu_item_1.MENU_INITIATOR_CLASSNAME, children: [selected ? ((0, jsx_runtime_1.jsx)("div", { title: typeof selected.label === 'string' ? selected.label : undefined, style: label, children: selected === null || selected === void 0 ? void 0 : selected.label })) : null, (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), " ", (0, jsx_runtime_1.jsx)(caret_1.CaretDown, {})] }), 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: values.findIndex((v) => selected && v.id === selected.id), topItemCanBeUnselected: false, fixedHeight: derivedMaxHeight }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
-                : null] }));
-};
-exports.Combobox = Combobox;

package/dist/editor/components/NewComposition/CopyHint.d.ts

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

package/dist/editor/components/NewComposition/CopyHint.js

@@ -1,30 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CopyHint = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const colors_1 = require("../../helpers/colors");
-const style = {
-    fontSize: 12,
-    color: colors_1.LIGHT_TEXT,
-};
-const CopyHint = () => {
-    const [projectInfo, setProjectInfo] = (0, react_1.useState)(null);
-    (0, react_1.useEffect)(() => {
-        fetch(`/api/project-info`)
-            .then((res) => res.json())
-            .then((res) => {
-            setProjectInfo(res);
-        })
-            .catch((err) => {
-            // eslint-disable-next-line no-console
-            console.log('Error fetching info about the project', err);
-            setProjectInfo(null);
-        });
-    }, []);
-    if (!(projectInfo === null || projectInfo === void 0 ? void 0 : projectInfo.videoFile)) {
-        return null;
-    }
-    return ((0, jsx_runtime_1.jsxs)("div", { style: style, children: ["Copy this into ", (0, jsx_runtime_1.jsx)("br", {}), " your", ' ', (0, jsx_runtime_1.jsx)("span", { style: style, title: projectInfo.videoFile, children: projectInfo.relativeVideoFile }), ' ', "file."] }));
-};
-exports.CopyHint = CopyHint;

package/dist/editor/components/NewComposition/InputDragger.d.ts

@@ -1,12 +0,0 @@
-import type { InputHTMLAttributes } from 'react';
-import React from 'react';
-import type { RemInputStatus } from './RemInput';
-type Props = InputHTMLAttributes<HTMLInputElement> & {
-    onValueChange: (newVal: number) => void;
-    onTextChange: (newVal: string) => void;
-    status: RemInputStatus;
-    formatter?: (str: number | string) => string;
-    rightAlign: boolean;
-};
-export declare const InputDragger: React.FC<Props>;
-export {};

package/dist/editor/components/NewComposition/InputDragger.js

@@ -1,122 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.InputDragger = 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 noop_1 = require("../../helpers/noop");
-const input_dragger_click_lock_1 = require("../../state/input-dragger-click-lock");
-const z_index_1 = require("../../state/z-index");
-const RemInput_1 = require("./RemInput");
-const isInt = (num) => {
-    return num % 1 === 0;
-};
-const InputDragger = ({ onValueChange, min: _min, max: _max, step: _step, value, onTextChange, formatter = (q) => String(q), status, rightAlign, ...props }) => {
-    const [inputFallback, setInputFallback] = (0, react_1.useState)(false);
-    const fallbackRef = (0, react_1.useRef)(null);
-    const style = (0, react_1.useMemo)(() => {
-        return {
-            ...RemInput_1.inputBaseStyle,
-            backgroundColor: 'transparent',
-            borderColor: 'transparent',
-        };
-    }, []);
-    const span = (0, react_1.useMemo)(() => ({
-        borderBottom: '1px dotted ' + colors_1.BLUE,
-        paddingBottom: 1,
-        color: colors_1.BLUE,
-        cursor: 'ew-resize',
-        userSelect: 'none',
-        fontSize: 13,
-        fontVariantNumeric: 'tabular-nums',
-    }), []);
-    const onClick = (0, react_1.useCallback)((e) => {
-        if (!(0, input_dragger_click_lock_1.getClickLock)()) {
-            e.stopPropagation();
-        }
-        if ((0, input_dragger_click_lock_1.getClickLock)()) {
-            return;
-        }
-        setInputFallback(true);
-    }, []);
-    const onEscape = (0, react_1.useCallback)(() => {
-        setInputFallback(false);
-    }, []);
-    const onBlur = (0, react_1.useCallback)(() => {
-        if (!fallbackRef.current) {
-            return;
-        }
-        const newValue = fallbackRef.current.value;
-        if (newValue.trim() === '') {
-            onEscape();
-            return;
-        }
-        if (fallbackRef.current.checkValidity()) {
-            onTextChange === null || onTextChange === void 0 ? void 0 : onTextChange(newValue);
-            setInputFallback(false);
-        }
-        else {
-            fallbackRef.current.reportValidity();
-        }
-    }, [onEscape, onTextChange]);
-    const onKeyPress = (0, react_1.useCallback)((e) => {
-        var _a;
-        if (e.key === 'Enter') {
-            (_a = fallbackRef.current) === null || _a === void 0 ? void 0 : _a.blur();
-        }
-    }, []);
-    const roundToStep = (val, stepSize) => {
-        const factor = 1 / stepSize;
-        return Math.ceil(val * factor) / factor;
-    };
-    const onPointerDown = (0, react_1.useCallback)((e) => {
-        const { pageX, pageY, button } = e;
-        if (button !== 0) {
-            return;
-        }
-        const moveListener = (ev) => {
-            const xDistance = ev.pageX - pageX;
-            const distanceFromStart = Math.sqrt(xDistance ** 2 + (ev.pageY - pageY) ** 2);
-            const step = Number(_step !== null && _step !== void 0 ? _step : 1);
-            const min = Number(_min !== null && _min !== void 0 ? _min : 0);
-            const max = Number(_max !== null && _max !== void 0 ? _max : Infinity);
-            if (distanceFromStart > 4) {
-                (0, input_dragger_click_lock_1.setClickLock)(true);
-            }
-            const diff = (0, remotion_1.interpolate)(xDistance, [-5, -4, 0, 4, 5], [-step, 0, 0, 0, step]);
-            const newValue = Math.min(max, Math.max(min, Number(value) + diff));
-            const roundedToStep = roundToStep(newValue, step);
-            onValueChange(roundedToStep);
-        };
-        window.addEventListener('mousemove', moveListener);
-        window.addEventListener('pointerup', () => {
-            window.removeEventListener('mousemove', moveListener);
-            setTimeout(() => {
-                (0, input_dragger_click_lock_1.setClickLock)(false);
-            }, 2);
-        }, {
-            once: true,
-        });
-    }, [_step, _min, _max, value, onValueChange]);
-    (0, react_1.useEffect)(() => {
-        var _a;
-        if (inputFallback) {
-            (_a = fallbackRef.current) === null || _a === void 0 ? void 0 : _a.select();
-        }
-    }, [inputFallback]);
-    const deriveStep = (0, react_1.useMemo)(() => {
-        if (_step !== undefined) {
-            return _step;
-        }
-        if (typeof _min === 'number' && isInt(_min)) {
-            return 1;
-        }
-        return 0.0001;
-    }, [_min, _step]);
-    if (inputFallback) {
-        return ((0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onEscape: onEscape, onOutsideClick: noop_1.noop, children: (0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { ref: fallbackRef, autoFocus: true, onKeyPress: onKeyPress, onBlur: onBlur, min: _min, max: _max, step: deriveStep, defaultValue: value, status: status, pattern: '[0-9]*[.]?[0-9]*', rightAlign: rightAlign, ...props }) }));
-    }
-    return ((0, jsx_runtime_1.jsx)("button", { type: "button", style: style, onClick: onClick, onPointerDown: onPointerDown, children: (0, jsx_runtime_1.jsx)("span", { style: span, children: formatter(value) }) }));
-};
-exports.InputDragger = InputDragger;

package/dist/editor/components/NewComposition/MenuContent.d.ts

@@ -1,12 +0,0 @@
-import React from 'react';
-import type { ComboboxValue } from './ComboBox';
-export declare const MenuContent: React.FC<{
-    values: ComboboxValue[];
-    onHide: () => void;
-    onNextMenu: () => void;
-    onPreviousMenu: () => void;
-    leaveLeftSpace: boolean;
-    preselectIndex: false | number;
-    topItemCanBeUnselected: boolean;
-    fixedHeight: number | null;
-}>;

package/dist/editor/components/NewComposition/MenuContent.js

@@ -1,245 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MenuContent = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const colors_1 = require("../../helpers/colors");
-const use_keybinding_1 = require("../../helpers/use-keybinding");
-const is_menu_item_1 = require("../Menu/is-menu-item");
-const MenuDivider_1 = require("../Menu/MenuDivider");
-const MenuSubItem_1 = require("../Menu/MenuSubItem");
-const styles_1 = require("../Menu/styles");
-const BORDER_SIZE = 1;
-const container = {
-    paddingTop: styles_1.MENU_VERTICAL_PADDING,
-    paddingBottom: styles_1.MENU_VERTICAL_PADDING,
-    border: `${BORDER_SIZE}px solid ${colors_1.INPUT_BORDER_COLOR_UNHOVERED}`,
-    marginLeft: 0 - BORDER_SIZE,
-    overflowY: 'auto',
-    overflowX: 'hidden',
-    minWidth: 200,
-    maxWidth: styles_1.MAX_MENU_WIDTH,
-};
-const MenuContent = ({ onHide, values, preselectIndex, onNextMenu, onPreviousMenu, leaveLeftSpace, topItemCanBeUnselected, fixedHeight, }) => {
-    const keybindings = (0, use_keybinding_1.useKeybinding)();
-    const containerRef = (0, react_1.useRef)(null);
-    const [subMenuActivated, setSubMenuActivated] = (0, react_1.useState)(false);
-    if (values[0].type === 'divider') {
-        throw new Error('first value cant be divide');
-    }
-    const [selectedItem, setSelectedItem] = (0, react_1.useState)(typeof preselectIndex === 'number' && preselectIndex >= 0
-        ? values[preselectIndex].id
-        : null);
-    const onEscape = (0, react_1.useCallback)(() => {
-        onHide();
-    }, [onHide]);
-    const onItemSelected = (0, react_1.useCallback)((id) => {
-        setSelectedItem(id);
-    }, []);
-    const onArrowUp = (0, react_1.useCallback)(() => {
-        setSelectedItem((prevItem) => {
-            if (prevItem === null) {
-                return null;
-            }
-            const index = values.findIndex((val) => val.id === prevItem);
-            if ((topItemCanBeUnselected && index === 0) || prevItem === null) {
-                return null;
-            }
-            const previousItems = values.filter((v, i) => i < index && v.type !== 'divider');
-            if (previousItems.length > 0) {
-                return previousItems[previousItems.length - 1].id;
-            }
-            const firstNonDivider = values.find((v) => v.type !== 'divider');
-            if (firstNonDivider) {
-                return firstNonDivider.id;
-            }
-            throw new Error('could not find previous item');
-        });
-    }, [topItemCanBeUnselected, values]);
-    const onArrowDown = (0, react_1.useCallback)(() => {
-        setSelectedItem((prevItem) => {
-            const index = values.findIndex((val) => val.id === prevItem);
-            const nextItem = values.find((v, i) => i > index && v.type !== 'divider');
-            if (nextItem) {
-                return nextItem.id;
-            }
-            const lastNonDivider = values
-                .slice()
-                .reverse()
-                .find((v) => v.type !== 'divider');
-            if (lastNonDivider) {
-                return lastNonDivider.id;
-            }
-            throw new Error('could not find next item');
-        });
-    }, [values]);
-    const onEnter = (0, react_1.useCallback)(() => {
-        if (selectedItem === null) {
-            return onHide();
-        }
-        const item = values.find((i) => i.id === selectedItem);
-        if (!item) {
-            throw new Error('cannot find item');
-        }
-        if (item.type === 'divider') {
-            throw new Error('cannot find divider');
-        }
-        if (item.subMenu) {
-            return setSubMenuActivated('without-mouse');
-        }
-        onHide();
-        item.onClick(item.id, null);
-    }, [onHide, selectedItem, values]);
-    const onArrowRight = (0, react_1.useCallback)(() => {
-        if (selectedItem === null) {
-            return onNextMenu();
-        }
-        const item = values.find((i) => i.id === selectedItem);
-        if (!item) {
-            throw new Error('cannot find item');
-        }
-        if (item.type === 'divider') {
-            throw new Error('cannot find divider');
-        }
-        if (!item.subMenu) {
-            return onNextMenu();
-        }
-        setSubMenuActivated('without-mouse');
-    }, [onNextMenu, selectedItem, values]);
-    const containerWithHeight = (0, react_1.useMemo)(() => {
-        if (fixedHeight === null) {
-            return { ...container, maxHeight: 600 };
-        }
-        return {
-            ...container,
-            maxHeight: fixedHeight,
-        };
-    }, [fixedHeight]);
-    (0, react_1.useEffect)(() => {
-        const escapeBinding = keybindings.registerKeybinding({
-            event: 'keydown',
-            key: 'Escape',
-            callback: onEscape,
-            commandCtrlKey: false,
-            preventDefault: true,
-            triggerIfInputFieldFocused: false,
-            keepRegisteredWhenNotHighestContext: false,
-        });
-        const rightBinding = keybindings.registerKeybinding({
-            event: 'keydown',
-            key: 'ArrowRight',
-            commandCtrlKey: false,
-            callback: onArrowRight,
-            preventDefault: true,
-            triggerIfInputFieldFocused: false,
-            keepRegisteredWhenNotHighestContext: false,
-        });
-        const leftBinding = keybindings.registerKeybinding({
-            event: 'keydown',
-            commandCtrlKey: false,
-            key: 'ArrowLeft',
-            callback: onPreviousMenu,
-            preventDefault: true,
-            triggerIfInputFieldFocused: false,
-            keepRegisteredWhenNotHighestContext: false,
-        });
-        const downBinding = keybindings.registerKeybinding({
-            event: 'keydown',
-            key: 'ArrowDown',
-            commandCtrlKey: false,
-            callback: onArrowDown,
-            preventDefault: true,
-            triggerIfInputFieldFocused: false,
-            keepRegisteredWhenNotHighestContext: false,
-        });
-        const upBinding = keybindings.registerKeybinding({
-            event: 'keydown',
-            key: 'ArrowUp',
-            callback: onArrowUp,
-            commandCtrlKey: false,
-            preventDefault: true,
-            triggerIfInputFieldFocused: false,
-            keepRegisteredWhenNotHighestContext: false,
-        });
-        const enterBinding = keybindings.registerKeybinding({
-            event: 'keydown',
-            key: 'Enter',
-            callback: onEnter,
-            commandCtrlKey: false,
-            preventDefault: true,
-            triggerIfInputFieldFocused: false,
-            keepRegisteredWhenNotHighestContext: false,
-        });
-        const spaceBinding = keybindings.registerKeybinding({
-            event: 'keyup',
-            key: ' ',
-            callback: onEnter,
-            commandCtrlKey: false,
-            preventDefault: true,
-            triggerIfInputFieldFocused: false,
-            keepRegisteredWhenNotHighestContext: false,
-        });
-        return () => {
-            escapeBinding.unregister();
-            leftBinding.unregister();
-            rightBinding.unregister();
-            downBinding.unregister();
-            upBinding.unregister();
-            enterBinding.unregister();
-            spaceBinding.unregister();
-        };
-    }, [
-        keybindings,
-        onEscape,
-        onNextMenu,
-        onPreviousMenu,
-        onArrowDown,
-        onArrowUp,
-        onEnter,
-        onArrowRight,
-    ]);
-    // Disable submenu if not selected
-    (0, react_1.useEffect)(() => {
-        if (!subMenuActivated) {
-            return;
-        }
-        if (selectedItem === null) {
-            return setSubMenuActivated(false);
-        }
-        const item = values.find((i) => i.id === selectedItem);
-        if (!item) {
-            throw new Error('cannot find item');
-        }
-        if (item.type === 'divider') {
-            throw new Error('should not select divider');
-        }
-        if (!item.subMenu && subMenuActivated) {
-            setSubMenuActivated(false);
-        }
-    }, [selectedItem, subMenuActivated, values]);
-    (0, react_1.useEffect)(() => {
-        const { current } = containerRef;
-        if (!current) {
-            return;
-        }
-        const onPointerLeave = () => {
-            if (subMenuActivated) {
-                return;
-            }
-            setSelectedItem(null);
-        };
-        current.addEventListener('pointerleave', onPointerLeave);
-        return () => current.removeEventListener('pointerleave', onPointerLeave);
-    }, [onHide, subMenuActivated]);
-    return ((0, jsx_runtime_1.jsx)("div", { ref: containerRef, style: containerWithHeight, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: values.map((item) => {
-            if (item.type === 'divider') {
-                return (0, jsx_runtime_1.jsx)(MenuDivider_1.MenuDivider, {}, item.id);
-            }
-            const onClick = (id, e) => {
-                onHide();
-                item.onClick(id, e);
-            };
-            return ((0, jsx_runtime_1.jsx)(MenuSubItem_1.MenuSubItem, { selected: item.id === selectedItem, onActionChosen: onClick, onItemSelected: onItemSelected, label: item.label, id: item.id, keyHint: item.keyHint, leaveLeftSpace: leaveLeftSpace, leftItem: item.leftItem, subMenu: item.subMenu, onQuitMenu: onHide, onNextMenu: onNextMenu, subMenuActivated: subMenuActivated, setSubMenuActivated: setSubMenuActivated }, item.id));
-        }) }));
-};
-exports.MenuContent = MenuContent;

package/dist/editor/components/NewComposition/NewCompAspectRatio.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-export declare const NewCompAspectRatio: React.FC<{
-    width: number;
-    height: number;
-    aspectRatioLocked: number | null;
-    setAspectRatioLocked: (newOption: boolean) => void;
-}>;

package/dist/editor/components/NewComposition/NewCompAspectRatio.js

@@ -1,20 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.NewCompAspectRatio = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const new_comp_layout_1 = require("./new-comp-layout");
-const render_aspect_ratio_1 = require("./render-aspect-ratio");
-const ToggleAspectRatio_1 = require("./ToggleAspectRatio");
-const GUIDE_HEIGHT = 55;
-const GUIDE_WIDTH = 10;
-const container = {
-    display: 'flex',
-    flexDirection: 'row',
-    marginLeft: 10,
-    alignItems: 'center',
-};
-const NewCompAspectRatio = ({ width, height, aspectRatioLocked, setAspectRatioLocked }) => {
-    const pixels = Number(width) * Number(height);
-    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)("svg", { width: GUIDE_WIDTH, height: GUIDE_HEIGHT, children: (0, jsx_runtime_1.jsx)("path", { d: `M 0 0 L ${GUIDE_WIDTH} 0 L ${GUIDE_WIDTH} ${GUIDE_HEIGHT} L 0 ${GUIDE_HEIGHT}`, fill: "transparent", strokeWidth: "2", stroke: "rgba(255, 255, 255, 0.2)" }) }), (0, jsx_runtime_1.jsx)(ToggleAspectRatio_1.ToggleAspectRatio, { aspectRatioLocked: Boolean(aspectRatioLocked), setAspectRatioLocked: setAspectRatioLocked }), pixels > 0 ? ((0, jsx_runtime_1.jsxs)("div", { style: new_comp_layout_1.rightLabel, children: ["Aspect ratio ", (0, render_aspect_ratio_1.aspectRatio)(Number(width), Number(height))] })) : null] }) }));
-};
-exports.NewCompAspectRatio = NewCompAspectRatio;