@remotion/cli 4.0.79 → 4.0.82

package/dist/editor/components/MenuBuildIndicator.js

@@ -1,45 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MenuBuildIndicator = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const client_id_1 = require("../helpers/client-id");
-const layout_1 = require("./layout");
-const OpenEditorButton_1 = require("./OpenEditorButton");
-const Spinner_1 = require("./Spinner");
-const cwd = {
-    fontSize: 13,
-    opacity: 0.8,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-};
-const spinnerSize = 14;
-const spinner = {
-    position: 'relative',
-    width: spinnerSize,
-    marginTop: 4,
-};
-const noSpinner = {
-    position: 'relative',
-    width: spinnerSize,
-};
-const MenuBuildIndicator = () => {
-    const [isBuilding, setIsBuilding] = (0, react_1.useState)(false);
-    const ctx = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
-    const showButton = window.remotion_editorName && ctx.type === 'connected';
-    (0, react_1.useEffect)(() => {
-        window.remotion_isBuilding = () => {
-            setIsBuilding(true);
-        };
-        window.remotion_finishedBuilding = () => {
-            setIsBuilding(false);
-        };
-        return () => {
-            window.remotion_isBuilding = undefined;
-            window.remotion_finishedBuilding = undefined;
-        };
-    }, []);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: cwd, title: window.remotion_cwd, children: [showButton ? (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }) : null, isBuilding ? ((0, jsx_runtime_1.jsx)("div", { style: spinner, children: (0, jsx_runtime_1.jsx)(Spinner_1.Spinner, { duration: 0.5, size: spinnerSize }) })) : ((0, jsx_runtime_1.jsx)("div", { style: noSpinner })), showButton ? (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }) : null, window.remotion_projectName, showButton ? (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.25 }) : null, showButton ? (0, jsx_runtime_1.jsx)(OpenEditorButton_1.OpenEditorButton, {}) : null] }));
-};
-exports.MenuBuildIndicator = MenuBuildIndicator;

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

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

package/dist/editor/components/MenuToolbar.js

@@ -1,82 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MenuToolbar = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const colors_1 = require("../helpers/colors");
-const use_menu_structure_1 = require("../helpers/use-menu-structure");
-const layout_1 = require("./layout");
-const MenuItem_1 = require("./Menu/MenuItem");
-const MenuBuildIndicator_1 = require("./MenuBuildIndicator");
-const SidebarCollapserControls_1 = require("./SidebarCollapserControls");
-const UpdateCheck_1 = require("./UpdateCheck");
-const row = {
-    alignItems: 'center',
-    flexDirection: 'row',
-    display: 'flex',
-    color: 'white',
-    borderBottom: '1px solid black',
-    fontSize: 13,
-    paddingLeft: 6,
-    paddingRight: 10,
-    backgroundColor: colors_1.BACKGROUND,
-};
-const fixedWidthRight = {
-    width: '330px',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'flex-end',
-};
-const fixedWidthLeft = {
-    minWidth: '330px',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'flex-start',
-};
-const flex = {
-    flex: 1,
-};
-const MenuToolbar = () => {
-    const [selected, setSelected] = (0, react_1.useState)(null);
-    const itemClicked = (0, react_1.useCallback)((itemId) => {
-        setSelected(itemId);
-    }, [setSelected]);
-    const itemHovered = (0, react_1.useCallback)((itemId) => {
-        if (selected) {
-            setSelected(itemId);
-        }
-    }, [selected, setSelected]);
-    const closeMenu = (0, react_1.useCallback)(() => {
-        setSelected(null);
-    }, []);
-    const structure = (0, use_menu_structure_1.useMenuStructure)(closeMenu);
-    const menus = (0, react_1.useMemo)(() => {
-        return structure.map((s) => s.id);
-    }, [structure]);
-    const onPreviousMenu = (0, react_1.useCallback)(() => {
-        setSelected((s) => {
-            if (s === null) {
-                return null;
-            }
-            return menus[(menus.indexOf(s) + 1) % menus.length];
-        });
-    }, [menus]);
-    const onNextMenu = (0, react_1.useCallback)(() => {
-        setSelected((s) => {
-            if (s === null) {
-                return null;
-            }
-            if (menus.indexOf(s) === 0) {
-                return menus[menus.length - 1];
-            }
-            return menus[(menus.indexOf(s) - 1) % menus.length];
-        });
-    }, [menus]);
-    const onItemQuit = (0, react_1.useCallback)(() => {
-        setSelected(null);
-    }, [setSelected]);
-    return ((0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", className: "css-reset", style: row, children: [(0, jsx_runtime_1.jsxs)("div", { style: fixedWidthLeft, children: [structure.map((s) => {
-                        return ((0, jsx_runtime_1.jsx)(MenuItem_1.MenuItem, { selected: selected === s.id, onItemSelected: itemClicked, onItemHovered: itemHovered, id: s.id, label: s.label, onItemQuit: onItemQuit, menu: s, onPreviousMenu: onPreviousMenu, onNextMenu: onNextMenu, leaveLeftPadding: s.leaveLeftPadding }, s.id));
-                    }), (0, jsx_runtime_1.jsx)(UpdateCheck_1.UpdateCheck, {})] }), (0, jsx_runtime_1.jsx)("div", { style: flex }), (0, jsx_runtime_1.jsx)(MenuBuildIndicator_1.MenuBuildIndicator, {}), (0, jsx_runtime_1.jsx)("div", { style: flex }), (0, jsx_runtime_1.jsx)("div", { style: fixedWidthRight, children: (0, jsx_runtime_1.jsx)(SidebarCollapserControls_1.SidebarCollapserControls, {}) }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 })] }));
-};
-exports.MenuToolbar = MenuToolbar;

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

@@ -1,8 +0,0 @@
-import React from 'react';
-export declare const getMaxModalWidth: (width: number) => string;
-export declare const getMaxModalHeight: (height: number) => string;
-export declare const ModalContainer: React.FC<{
-    onEscape: () => void;
-    onOutsideClick: () => void;
-    children: React.ReactNode;
-}>;

package/dist/editor/components/ModalContainer.js

@@ -1,34 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ModalContainer = exports.getMaxModalHeight = exports.getMaxModalWidth = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const colors_1 = require("../helpers/colors");
-const z_index_1 = require("../state/z-index");
-const padding = 20;
-const getMaxModalWidth = (width) => {
-    return `min(calc(100vw - ${padding * 2}px), calc(${width}px - ${padding * 2}px))`;
-};
-exports.getMaxModalWidth = getMaxModalWidth;
-const getMaxModalHeight = (height) => {
-    return `min(calc(100vh - ${padding * 2}px), calc(${height}px - ${padding * 2}px))`;
-};
-exports.getMaxModalHeight = getMaxModalHeight;
-const backgroundOverlay = {
-    backgroundColor: 'rgba(255, 255, 255, 0.2)',
-    backdropFilter: `blur(1px)`,
-    position: 'fixed',
-    height: '100%',
-    width: '100%',
-    display: 'flex',
-    padding,
-};
-const panel = {
-    backgroundColor: colors_1.BACKGROUND,
-    boxShadow: '0 0 4px black',
-    color: 'white',
-    margin: 'auto',
-};
-const ModalContainer = ({ children, onEscape, onOutsideClick }) => {
-    return ((0, jsx_runtime_1.jsx)("div", { className: "css-reset", style: backgroundOverlay, role: "dialog", "aria-modal": "true", children: (0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onOutsideClick: onOutsideClick, onEscape: onEscape, children: (0, jsx_runtime_1.jsx)("div", { style: panel, children: children }) }) }));
-};
-exports.ModalContainer = ModalContainer;

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

@@ -1,4 +0,0 @@
-import React from 'react';
-export declare const NewCompHeader: React.FC<{
-    title: string;
-}>;

package/dist/editor/components/ModalHeader.js

@@ -1,32 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.NewCompHeader = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const modals_1 = require("../state/modals");
-const layout_1 = require("./layout");
-const CancelButton_1 = require("./NewComposition/CancelButton");
-const container = {
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center',
-    padding: '12px 16px',
-    width: '100%',
-    borderBottom: '1px solid black',
-};
-const titleStyle = {
-    fontSize: 14,
-    color: 'white',
-};
-const icon = {
-    height: 20,
-    width: 20,
-};
-const NewCompHeader = ({ title }) => {
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
-    const onPress = (0, react_1.useCallback)(() => {
-        setSelectedModal(null);
-    }, [setSelectedModal]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)("div", { style: titleStyle, children: title }), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)(CancelButton_1.CancelButton, { style: icon, onPress: onPress })] }));
-};
-exports.NewCompHeader = NewCompHeader;

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

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

package/dist/editor/components/Modals.js

@@ -1,23 +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.Modals = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const client_id_1 = require("../helpers/client-id");
-const modals_1 = require("../state/modals");
-const NewComposition_1 = __importDefault(require("./NewComposition/NewComposition"));
-const QuickSwitcher_1 = __importDefault(require("./QuickSwitcher/QuickSwitcher"));
-const RenderModal_1 = require("./RenderModal/RenderModal");
-const RenderStatusModal_1 = require("./RenderModal/RenderStatusModal");
-const UpdateModal_1 = require("./UpdateModal/UpdateModal");
-const Modals = () => {
-    const { selectedModal: modalContextType } = (0, react_1.useContext)(modals_1.ModalsContext);
-    const canRender = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx).type === 'connected';
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'new-comp' && ((0, jsx_runtime_1.jsx)(NewComposition_1.default, { initialCompType: modalContextType.compType })), modalContextType && canRender && modalContextType.type === 'render' && ((0, jsx_runtime_1.jsx)(RenderModal_1.RenderModalWithLoader, { initialFrame: modalContextType.initialFrame, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialJpegQuality: modalContextType.initialJpegQuality, initialScale: modalContextType.initialScale, initialLogLevel: modalContextType.initialLogLevel, initialOffthreadVideoCacheSizeInBytes: modalContextType.initialOffthreadVideoCacheSizeInBytes, initialConcurrency: modalContextType.initialConcurrency, maxConcurrency: modalContextType.maxConcurrency, minConcurrency: modalContextType.minConcurrency, initialStillImageFormat: modalContextType.initialStillImageFormat, initialMuted: modalContextType.initialMuted, initialEnforceAudioTrack: modalContextType.initialEnforceAudioTrack, initialProResProfile: modalContextType.initialProResProfile, initialx264Preset: modalContextType.initialx264Preset, initialPixelFormat: modalContextType.initialPixelFormat, initialAudioBitrate: modalContextType.initialAudioBitrate, initialVideoBitrate: modalContextType.initialVideoBitrate, initialEveryNthFrame: modalContextType.initialEveryNthFrame, initialNumberOfGifLoops: modalContextType.initialNumberOfGifLoops, initialDelayRenderTimeout: modalContextType.initialDelayRenderTimeout, initialEnvVariables: modalContextType.initialEnvVariables, initialDisableWebSecurity: modalContextType.initialDisableWebSecurity, initialGl: modalContextType.initialOpenGlRenderer, initialHeadless: modalContextType.initialHeadless, initialIgnoreCertificateErrors: modalContextType.initialIgnoreCertificateErrors, initialEncodingBufferSize: modalContextType.initialEncodingBufferSize, initialEncodingMaxRate: modalContextType.initialEncodingMaxRate, initialUserAgent: modalContextType.initialUserAgent, initialColorSpace: modalContextType.initialColorSpace, initialMultiProcessOnLinux: modalContextType.initialMultiProcessOnLinux, defaultProps: modalContextType.defaultProps, inFrameMark: modalContextType.inFrameMark, outFrameMark: modalContextType.outFrameMark, defaultConfigurationAudioCodec: modalContextType.defaultConfigurationAudioCodec, defaultConfigurationVideoCodec: modalContextType.defaultConfigurationVideoCodec })), modalContextType &&
-                canRender &&
-                modalContextType.type === 'render-progress' && ((0, jsx_runtime_1.jsx)(RenderStatusModal_1.RenderStatusModal, { jobId: modalContextType.jobId })), modalContextType && modalContextType.type === 'update' && ((0, jsx_runtime_1.jsx)(UpdateModal_1.UpdateModal, { info: modalContextType.info, knownBugs: modalContextType.knownBugs })), modalContextType && modalContextType.type === 'quick-switcher' && ((0, jsx_runtime_1.jsx)(QuickSwitcher_1.default, { invocationTimestamp: modalContextType.invocationTimestamp, initialMode: modalContextType.mode }))] }));
-};
-exports.Modals = Modals;

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

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

package/dist/editor/components/ModalsProvider.js

@@ -1,17 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ModalsProvider = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const modals_1 = require("../state/modals");
-const ModalsProvider = ({ children }) => {
-    const [modalContextType, setModalContextType] = (0, react_1.useState)(null);
-    const modalsContext = (0, react_1.useMemo)(() => {
-        return {
-            selectedModal: modalContextType,
-            setSelectedModal: setModalContextType,
-        };
-    }, [modalContextType]);
-    return ((0, jsx_runtime_1.jsx)(modals_1.ModalsContext.Provider, { value: modalsContext, children: children }));
-};
-exports.ModalsProvider = ModalsProvider;

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

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-export declare const MuteToggle: React.FC<{
-    muted: boolean;
-    setMuted: React.Dispatch<React.SetStateAction<boolean>>;
-}>;

package/dist/editor/components/MuteToggle.js

@@ -1,19 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MuteToggle = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const media_volume_1 = require("../icons/media-volume");
-const mute_1 = require("../state/mute");
-const ControlButton_1 = require("./ControlButton");
-const MuteToggle = ({ muted, setMuted }) => {
-    const onClick = (0, react_1.useCallback)(() => {
-        setMuted((m) => {
-            (0, mute_1.persistMuteOption)(!m);
-            return !m;
-        });
-    }, [setMuted]);
-    const accessibilityLabel = muted ? 'Unmute video' : 'Mute video';
-    return ((0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, onClick: onClick, children: muted ? (0, jsx_runtime_1.jsx)(media_volume_1.VolumeOffIcon, {}) : (0, jsx_runtime_1.jsx)(media_volume_1.VolumeOnIcon, {}) }));
-};
-exports.MuteToggle = MuteToggle;

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 {};