@remotion/cli 4.0.136 → 4.0.138

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

@@ -1,204 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const remotion_1 = require("remotion");
-const validate_new_comp_data_1 = require("../../helpers/validate-new-comp-data");
-const Checkmark_1 = require("../../icons/Checkmark");
-const aspect_ratio_locked_1 = require("../../state/aspect-ratio-locked");
-const modals_1 = require("../../state/modals");
-const CopyButton_1 = require("../CopyButton");
-const layout_1 = require("../layout");
-const ModalContainer_1 = require("../ModalContainer");
-const ModalHeader_1 = require("../ModalHeader");
-const ComboBox_1 = require("./ComboBox");
-const CopyHint_1 = require("./CopyHint");
-const InputDragger_1 = require("./InputDragger");
-const new_comp_layout_1 = require("./new-comp-layout");
-const NewCompAspectRatio_1 = require("./NewCompAspectRatio");
-const NewCompCode_1 = require("./NewCompCode");
-const NewCompDuration_1 = require("./NewCompDuration");
-const RemInput_1 = require("./RemInput");
-const ValidationMessage_1 = require("./ValidationMessage");
-const left = {
-    padding: 12,
-    paddingBottom: 80,
-    paddingRight: 12,
-    flex: 1,
-    fontSize: 13,
-};
-const panelRight = {
-    backgroundColor: 'black',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    position: 'relative',
-    width: 400,
-};
-const pre = {
-    fontSize: 17,
-    fontFamily: 'monospace',
-};
-const comboBoxStyle = {
-    width: new_comp_layout_1.inputArea.width,
-};
-const copyRowStyle = {
-    position: 'absolute',
-    bottom: 10,
-    right: 0,
-    paddingRight: 10,
-    paddingLeft: 20,
-    width: '100%',
-    alignItems: 'center',
-    color: new_comp_layout_1.leftLabel.color,
-};
-const commonFrameRates = [24, 25, 29.97, 30, 48, 50];
-const NewComposition = (props) => {
-    const { initialCompType } = props;
-    const [selectedFrameRate, setFrameRate] = (0, react_1.useState)(String(commonFrameRates[0]));
-    const { compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
-    const [type, setType] = (0, react_1.useState)(initialCompType);
-    const [name, setName] = (0, react_1.useState)('MyComp');
-    const [size, setSize] = (0, react_1.useState)({
-        width: '1280',
-        height: '720',
-    });
-    const panelContent = (0, react_1.useMemo)(() => {
-        return {
-            flexDirection: 'row',
-            display: 'flex',
-            width: (0, ModalContainer_1.getMaxModalWidth)(950),
-            height: type === 'composition'
-                ? (0, ModalContainer_1.getMaxModalHeight)(490)
-                : (0, ModalContainer_1.getMaxModalHeight)(340),
-            overflow: 'hidden',
-        };
-    }, [type]);
-    const [lockedAspectRatio, setLockedAspectRatio] = (0, react_1.useState)((0, aspect_ratio_locked_1.loadAspectRatioOption)() ? Number(size.width) / Number(size.height) : null);
-    const [durationInFrames, setDurationInFrames] = (0, react_1.useState)('150');
-    const setAspectRatioLocked = (0, react_1.useCallback)((option) => {
-        (0, aspect_ratio_locked_1.persistAspectRatioOption)(option);
-        setLockedAspectRatio(option ? Number(size.width) / Number(size.height) : null);
-    }, [size.height, size.width]);
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
-    const onQuit = (0, react_1.useCallback)(() => {
-        setSelectedModal(null);
-    }, [setSelectedModal]);
-    const onTypeChanged = (0, react_1.useCallback)((newType) => {
-        setType(newType);
-    }, []);
-    const onWidthChanged = (0, react_1.useCallback)((newValue) => {
-        setSize((s) => {
-            const { height } = s;
-            const newWidth = Number(newValue);
-            return {
-                height: lockedAspectRatio === null
-                    ? height
-                    : String(Math.ceil(newWidth / lockedAspectRatio / 2) * 2),
-                width: String(newWidth),
-            };
-        });
-    }, [lockedAspectRatio]);
-    const onWidthDirectlyChanged = (0, react_1.useCallback)((newWidth) => {
-        setSize((s) => {
-            const { height } = s;
-            return {
-                height: lockedAspectRatio === null
-                    ? height
-                    : String(Math.ceil(newWidth / lockedAspectRatio / 2) * 2),
-                width: String(newWidth),
-            };
-        });
-    }, [lockedAspectRatio]);
-    const onHeightDirectlyChanged = (0, react_1.useCallback)((newHeight) => {
-        setSize((s) => {
-            const { width } = s;
-            return {
-                width: lockedAspectRatio === null
-                    ? width
-                    : String(Math.ceil((newHeight / 2) * lockedAspectRatio) * 2),
-                height: String(newHeight),
-            };
-        });
-    }, [lockedAspectRatio]);
-    const onHeightChanged = (0, react_1.useCallback)((newValue) => {
-        setSize((s) => {
-            const { width } = s;
-            const newHeight = Number(newValue);
-            return {
-                width: lockedAspectRatio === null
-                    ? width
-                    : String(Math.ceil((newHeight / 2) * lockedAspectRatio) * 2),
-                height: String(newHeight),
-            };
-        });
-    }, [lockedAspectRatio]);
-    const onNameChange = (0, react_1.useCallback)((e) => {
-        setName(e.target.value);
-    }, []);
-    const onFpsChange = (0, react_1.useCallback)((newFps) => {
-        setFrameRate(String(newFps));
-    }, []);
-    const items = (0, react_1.useMemo)(() => {
-        return commonFrameRates.map((frameRate) => {
-            return {
-                id: String(frameRate),
-                label: `${frameRate}fps`,
-                onClick: () => onFpsChange(frameRate),
-                type: 'item',
-                value: frameRate,
-                keyHint: null,
-                leftItem: String(frameRate) === selectedFrameRate ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
-                subMenu: null,
-                quickSwitcherLabel: null,
-            };
-        });
-    }, [onFpsChange, selectedFrameRate]);
-    const compNameErrMessage = (0, validate_new_comp_data_1.validateCompositionName)(name, compositions);
-    const compWidthErrMessage = (0, validate_new_comp_data_1.validateCompositionDimension)('Width', size.width);
-    const compHeightErrMessage = (0, validate_new_comp_data_1.validateCompositionDimension)('Height', size.height);
-    const typeValues = (0, react_1.useMemo)(() => {
-        return [
-            {
-                id: 'composition',
-                keyHint: null,
-                label: '<Composition />',
-                leftItem: null,
-                onClick: () => onTypeChanged('composition'),
-                subMenu: null,
-                type: 'item',
-                value: 'composition',
-                quickSwitcherLabel: null,
-            },
-            {
-                id: 'still',
-                keyHint: null,
-                label: '<Still />',
-                leftItem: null,
-                onClick: () => onTypeChanged('still'),
-                subMenu: null,
-                type: 'item',
-                value: 'still',
-                quickSwitcherLabel: null,
-            },
-        ];
-    }, [onTypeChanged]);
-    return ((0, jsx_runtime_1.jsxs)(ModalContainer_1.ModalContainer, { onOutsideClick: onQuit, onEscape: onQuit, children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.NewCompHeader, { title: "New composition" }), (0, jsx_runtime_1.jsxs)("div", { style: panelContent, children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 3 }), (0, jsx_runtime_1.jsxs)("form", { children: [(0, jsx_runtime_1.jsxs)("label", { children: [(0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.leftLabel, children: "Type" }), (0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.inputArea, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { title: "Type of composition", style: comboBoxStyle, values: typeValues, selectedId: type }) })] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.leftLabel, children: "Name" }), (0, jsx_runtime_1.jsxs)("div", { style: new_comp_layout_1.inputArea, children: [(0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { value: name, onChange: onNameChange, type: "text", placeholder: "Composition name", status: "ok", rightAlign: false }), compNameErrMessage ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: compNameErrMessage, type: "error" })] })) : null] })] })] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("label", { children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.leftLabel, children: "Width" }), (0, jsx_runtime_1.jsxs)("div", { style: new_comp_layout_1.inputArea, children: [(0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { type: "number", value: size.width, placeholder: "Width", onTextChange: onWidthChanged, name: "width", step: 2, min: 2, required: true, status: "ok", formatter: (w) => `${w}px`, max: 100000000, onValueChange: onWidthDirectlyChanged, rightAlign: false }), compWidthErrMessage ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: compWidthErrMessage, type: "error" })] })) : null] })] }) }) }), (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)("label", { children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.leftLabel, children: "Height" }), (0, jsx_runtime_1.jsxs)("div", { style: new_comp_layout_1.inputArea, children: [(0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { type: "number", value: size.height, onTextChange: onHeightChanged, placeholder: "Height", name: "height", step: 2, required: true, formatter: (h) => `${h}px`, min: 2, status: "ok", max: 100000000, onValueChange: onHeightDirectlyChanged, rightAlign: false }), compHeightErrMessage ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: compHeightErrMessage, type: "error" })] })) : null] })] }) })] }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(NewCompAspectRatio_1.NewCompAspectRatio, { width: Number(size.width), height: Number(size.height), aspectRatioLocked: lockedAspectRatio, setAspectRatioLocked: setAspectRatioLocked }) })] }), (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), type === 'composition' ? ((0, jsx_runtime_1.jsx)(NewCompDuration_1.NewCompDuration, { durationInFrames: durationInFrames, fps: selectedFrameRate, setDurationInFrames: setDurationInFrames })) : null, (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("div", {}), type === 'composition' ? ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsxs)("label", { children: [(0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.leftLabel, children: "Framerate" }), (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { title: "Framerate", style: comboBoxStyle, values: items, selectedId: selectedFrameRate })] })] })) : null] })] }), (0, jsx_runtime_1.jsxs)("div", { style: panelRight, children: [(0, jsx_runtime_1.jsx)("pre", { style: pre, children: (0, NewCompCode_1.getNewCompositionCode)({
-                                    type,
-                                    durationInFrames: Number(durationInFrames),
-                                    fps: Number(selectedFrameRate),
-                                    height: Number(size.height),
-                                    width: Number(size.width),
-                                    name,
-                                    raw: false,
-                                }) }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", style: copyRowStyle, children: [(0, jsx_runtime_1.jsx)(CopyHint_1.CopyHint, {}), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)(CopyButton_1.CopyButton, { label: "Copy code", labelWhenCopied: "Copied!", textToCopy: (0, NewCompCode_1.getNewCompositionCode)({
-                                            type,
-                                            durationInFrames: Number(durationInFrames),
-                                            fps: Number(selectedFrameRate),
-                                            height: Number(size.height),
-                                            width: Number(size.width),
-                                            name,
-                                            raw: true,
-                                        }) })] })] }), ' '] })] }));
-};
-exports.default = NewComposition;

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

@@ -1,17 +0,0 @@
-import type { PropsWithChildren } from 'react';
-import React from 'react';
-export type RemInputStatus = 'error' | 'warning' | 'ok';
-type Props = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> & {
-    status: RemInputStatus;
-    rightAlign: boolean;
-};
-export declare const INPUT_HORIZONTAL_PADDING = 8;
-export declare const RightAlignInput: React.FC<PropsWithChildren>;
-export declare const inputBaseStyle: React.CSSProperties;
-export declare const getInputBorderColor: ({ status, isFocused, isHovered, }: {
-    status: 'error' | 'warning' | 'ok';
-    isFocused: boolean;
-    isHovered: boolean;
-}) => "hsla(0, 0%, 100%, 0.15)" | "rgba(0, 0, 0, 0.6)" | "rgba(255, 255, 255, 0.05)" | "#ff3232" | "#f1c40f";
-export declare const RemotionInput: React.ForwardRefExoticComponent<Pick<Props, "status" | "key" | "rightAlign" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
-export {};

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

@@ -1,74 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RemotionInput = exports.getInputBorderColor = exports.inputBaseStyle = exports.RightAlignInput = exports.INPUT_HORIZONTAL_PADDING = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const colors_1 = require("../../helpers/colors");
-const z_index_1 = require("../../state/z-index");
-exports.INPUT_HORIZONTAL_PADDING = 8;
-const aligner = {
-    marginRight: -exports.INPUT_HORIZONTAL_PADDING,
-};
-const RightAlignInput = ({ children }) => {
-    return (0, jsx_runtime_1.jsx)("div", { style: aligner, children: children });
-};
-exports.RightAlignInput = RightAlignInput;
-exports.inputBaseStyle = {
-    padding: `${exports.INPUT_HORIZONTAL_PADDING}px 10px`,
-    color: 'white',
-    borderStyle: 'solid',
-    borderWidth: 1,
-    fontSize: 14,
-};
-const getInputBorderColor = ({ status, isFocused, isHovered, }) => status === 'warning'
-    ? colors_1.WARNING_COLOR
-    : status === 'error'
-        ? colors_1.FAIL_COLOR
-        : isFocused
-            ? colors_1.SELECTED_BACKGROUND
-            : isHovered
-                ? colors_1.INPUT_BORDER_COLOR_HOVERED
-                : colors_1.INPUT_BORDER_COLOR_UNHOVERED;
-exports.getInputBorderColor = getInputBorderColor;
-const RemInputForwardRef = ({ status, rightAlign, ...props }, ref) => {
-    const [isFocused, setIsFocused] = (0, react_1.useState)(false);
-    const [isHovered, setIsHovered] = (0, react_1.useState)(false);
-    const inputRef = (0, react_1.useRef)(null);
-    const { tabIndex } = (0, z_index_1.useZIndex)();
-    const style = (0, react_1.useMemo)(() => {
-        var _a;
-        return {
-            backgroundColor: colors_1.INPUT_BACKGROUND,
-            ...exports.inputBaseStyle,
-            width: '100%',
-            borderColor: (0, exports.getInputBorderColor)({ isFocused, isHovered, status }),
-            textAlign: rightAlign ? 'right' : 'left',
-            ...((_a = props.style) !== null && _a !== void 0 ? _a : {}),
-        };
-    }, [isFocused, isHovered, rightAlign, props.style, status]);
-    (0, react_1.useImperativeHandle)(ref, () => {
-        return inputRef.current;
-    }, []);
-    (0, react_1.useEffect)(() => {
-        if (!inputRef.current) {
-            return;
-        }
-        const { current } = inputRef;
-        const onFocus = () => setIsFocused(true);
-        const onBlur = () => setIsFocused(false);
-        const onMouseEnter = () => setIsHovered(true);
-        const onMouseLeave = () => setIsHovered(false);
-        current.addEventListener('focus', onFocus);
-        current.addEventListener('blur', onBlur);
-        current.addEventListener('mouseenter', onMouseEnter);
-        current.addEventListener('mouseleave', onMouseLeave);
-        return () => {
-            current.removeEventListener('focus', onFocus);
-            current.removeEventListener('blur', onBlur);
-            current.removeEventListener('mouseenter', onMouseEnter);
-            current.removeEventListener('mouseleave', onMouseLeave);
-        };
-    }, [inputRef]);
-    return (0, jsx_runtime_1.jsx)("input", { ref: inputRef, tabIndex: tabIndex, ...props, style: style });
-};
-exports.RemotionInput = (0, react_1.forwardRef)(RemInputForwardRef);

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

@@ -1,8 +0,0 @@
-import React from 'react';
-import type { RemInputStatus } from './RemInput';
-type Props = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> & {
-    status: RemInputStatus;
-    name: string;
-};
-export declare const RemInputTypeColor: React.ForwardRefExoticComponent<Pick<Props, "status" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
-export {};

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

@@ -1,53 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RemInputTypeColor = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const colors_1 = require("../../helpers/colors");
-const z_index_1 = require("../../state/z-index");
-const RemInput_1 = require("./RemInput");
-const inputBaseStyle = {
-    padding: 0,
-    borderStyle: 'solid',
-    borderWidth: 1,
-};
-const RemInputTypeColorForwardRef = ({ status, ...props }, ref) => {
-    const [isFocused, setIsFocused] = (0, react_1.useState)(false);
-    const [isHovered, setIsHovered] = (0, react_1.useState)(false);
-    const inputRef = (0, react_1.useRef)(null);
-    const { tabIndex } = (0, z_index_1.useZIndex)();
-    const style = (0, react_1.useMemo)(() => {
-        var _a;
-        return {
-            backgroundColor: colors_1.INPUT_BACKGROUND,
-            ...inputBaseStyle,
-            borderColor: (0, RemInput_1.getInputBorderColor)({ isFocused, isHovered, status }),
-            ...((_a = props.style) !== null && _a !== void 0 ? _a : {}),
-        };
-    }, [isFocused, isHovered, props.style, status]);
-    (0, react_1.useImperativeHandle)(ref, () => {
-        return inputRef.current;
-    }, []);
-    (0, react_1.useEffect)(() => {
-        if (!inputRef.current) {
-            return;
-        }
-        const { current } = inputRef;
-        const onFocus = () => setIsFocused(true);
-        const onBlur = () => setIsFocused(false);
-        const onMouseEnter = () => setIsHovered(true);
-        const onMouseLeave = () => setIsHovered(false);
-        current.addEventListener('focus', onFocus);
-        current.addEventListener('blur', onBlur);
-        current.addEventListener('mouseenter', onMouseEnter);
-        current.addEventListener('mouseleave', onMouseLeave);
-        return () => {
-            current.removeEventListener('focus', onFocus);
-            current.removeEventListener('blur', onBlur);
-            current.removeEventListener('mouseenter', onMouseEnter);
-            current.removeEventListener('mouseleave', onMouseLeave);
-        };
-    }, [inputRef]);
-    return ((0, jsx_runtime_1.jsx)("input", { ref: inputRef, type: "color", tabIndex: tabIndex, ...props, name: props.name, style: style }));
-};
-exports.RemInputTypeColor = (0, react_1.forwardRef)(RemInputTypeColorForwardRef);

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

@@ -1,7 +0,0 @@
-import React from 'react';
-type Props = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement> & {
-    status: 'error' | 'warning' | 'ok';
-};
-export declare const inputBaseStyle: React.CSSProperties;
-export declare const RemTextarea: React.ForwardRefExoticComponent<Pick<Props, "status" | "key" | keyof React.InputHTMLAttributes<HTMLTextAreaElement>> & React.RefAttributes<HTMLTextAreaElement>>;
-export {};

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

@@ -1,92 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RemTextarea = exports.inputBaseStyle = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const colors_1 = require("../../helpers/colors");
-const z_index_1 = require("../../state/z-index");
-const is_menu_item_1 = require("../Menu/is-menu-item");
-const RemInput_1 = require("../NewComposition/RemInput");
-exports.inputBaseStyle = {
-    padding: `${RemInput_1.INPUT_HORIZONTAL_PADDING}px 10px`,
-    color: 'white',
-    borderStyle: 'solid',
-    borderWidth: 1,
-    fontSize: 14,
-    resize: 'none',
-    overflowX: 'hidden',
-};
-const RemTextareaFRFunction = ({ status, ...props }, ref) => {
-    const [isFocused, setIsFocused] = (0, react_1.useState)(false);
-    const [isHovered, setIsHovered] = (0, react_1.useState)(false);
-    const inputRef = (0, react_1.useRef)(null);
-    const { tabIndex } = (0, z_index_1.useZIndex)();
-    (0, react_1.useImperativeHandle)(ref, () => {
-        return inputRef.current;
-    }, []);
-    const style = (0, react_1.useMemo)(() => {
-        var _a;
-        return {
-            backgroundColor: colors_1.INPUT_BACKGROUND,
-            ...exports.inputBaseStyle,
-            width: '100%',
-            borderColor: (0, RemInput_1.getInputBorderColor)({ isFocused, isHovered, status }),
-            ...((_a = props.style) !== null && _a !== void 0 ? _a : {}),
-        };
-    }, [isFocused, isHovered, props.style, status]);
-    (0, react_1.useEffect)(() => {
-        if (!inputRef.current) {
-            return;
-        }
-        const { current } = inputRef;
-        const onFocus = () => setIsFocused(true);
-        const onBlur = () => setIsFocused(false);
-        const onMouseEnter = () => setIsHovered(true);
-        const onMouseLeave = () => setIsHovered(false);
-        const onKeyDown = (e) => {
-            if (!inputRef.current) {
-                return;
-            }
-            if (inputRef.current !== document.activeElement) {
-                return;
-            }
-            if (e.code === 'Tab') {
-                e.preventDefault();
-                // Always match up with value in JSON.stringify(content, null, 2)
-                document.execCommand('insertText', false, ' '.repeat(2));
-            }
-            if (e.code === 'Enter') {
-                e.preventDefault();
-                const { selectionStart, selectionEnd, value } = inputRef.current;
-                if (selectionStart !== selectionEnd) {
-                    return;
-                }
-                let prevNewline = selectionStart;
-                for (let i = selectionStart - 1; i >= 0; i--) {
-                    if (value[i] === '\n') {
-                        break;
-                    }
-                    prevNewline = i;
-                }
-                const currentLine = value.substring(prevNewline, selectionStart);
-                const trimmed = currentLine.trim();
-                const difference = currentLine.length - trimmed.length;
-                document.execCommand('insertText', false, '\n' + ' '.repeat(difference));
-            }
-        };
-        current.addEventListener('focus', onFocus);
-        current.addEventListener('blur', onBlur);
-        current.addEventListener('mouseenter', onMouseEnter);
-        current.addEventListener('mouseleave', onMouseLeave);
-        current.addEventListener('keydown', onKeyDown);
-        return () => {
-            current.removeEventListener('focus', onFocus);
-            current.removeEventListener('blur', onBlur);
-            current.removeEventListener('mouseenter', onMouseEnter);
-            current.removeEventListener('mouseleave', onMouseLeave);
-            current.removeEventListener('keydown', onKeyDown);
-        };
-    }, [inputRef]);
-    return ((0, jsx_runtime_1.jsx)("textarea", { ref: inputRef, tabIndex: tabIndex, ...props, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, style: style }));
-};
-exports.RemTextarea = (0, react_1.forwardRef)(RemTextareaFRFunction);

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

@@ -1,5 +0,0 @@
-import React from 'react';
-export declare const ToggleAspectRatio: React.FC<{
-    aspectRatioLocked: boolean;
-    setAspectRatioLocked: (option: boolean) => void;
-}>;

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

@@ -1,26 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ToggleAspectRatio = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const colors_1 = require("../../helpers/colors");
-const lock_1 = require("../../icons/lock");
-const buttonStyle = {
-    backgroundColor: colors_1.BACKGROUND,
-    border: 'none',
-    position: 'absolute',
-    paddingLeft: 2,
-    paddingRight: 2,
-    marginLeft: 3,
-};
-const iconStyle = {
-    width: 10,
-    color: 'white',
-};
-const ToggleAspectRatio = ({ aspectRatioLocked, setAspectRatioLocked }) => {
-    const onClick = (0, react_1.useCallback)(() => {
-        setAspectRatioLocked(!aspectRatioLocked);
-    }, [aspectRatioLocked, setAspectRatioLocked]);
-    return ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: onClick, style: buttonStyle, children: aspectRatioLocked ? ((0, jsx_runtime_1.jsx)(lock_1.LockIcon, { style: iconStyle })) : ((0, jsx_runtime_1.jsx)(lock_1.UnlockIcon, { style: iconStyle })) }));
-};
-exports.ToggleAspectRatio = ToggleAspectRatio;

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

@@ -1,8 +0,0 @@
-import type { SVGProps } from 'react';
-import React from 'react';
-export declare const WarningTriangle: React.FC<SVGProps<SVGSVGElement>>;
-export declare const ValidationMessage: React.FC<{
-    message: string;
-    align: 'flex-start' | 'flex-end';
-    type: 'warning' | 'error';
-}>;

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

@@ -1,34 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ValidationMessage = exports.WarningTriangle = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const colors_1 = require("../../helpers/colors");
-const layout_1 = require("../layout");
-const WarningTriangle = (props) => {
-    return ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 576 512", ...props, children: (0, jsx_runtime_1.jsx)("path", { d: "M248.747 204.705l6.588 112c.373 6.343 5.626 11.295 11.979 11.295h41.37a12 12 0 0 0 11.979-11.295l6.588-112c.405-6.893-5.075-12.705-11.979-12.705h-54.547c-6.903 0-12.383 5.812-11.978 12.705zM330 384c0 23.196-18.804 42-42 42s-42-18.804-42-42 18.804-42 42-42 42 18.804 42 42zm-.423-360.015c-18.433-31.951-64.687-32.009-83.154 0L6.477 440.013C-11.945 471.946 11.118 512 48.054 512H527.94c36.865 0 60.035-39.993 41.577-71.987L329.577 23.985zM53.191 455.002L282.803 57.008c2.309-4.002 8.085-4.002 10.394 0l229.612 397.993c2.308 4-.579 8.998-5.197 8.998H58.388c-4.617.001-7.504-4.997-5.197-8.997z" }) }));
-};
-exports.WarningTriangle = WarningTriangle;
-const style = {
-    width: 12,
-    height: 12,
-    flexShrink: 0,
-};
-const container = {
-    maxWidth: 500,
-};
-const label = {
-    fontSize: 13,
-    color: 'white',
-    fontFamily: 'sans-serif',
-};
-const ValidationMessage = ({ message, align, type }) => {
-    const finalStyle = (0, react_1.useMemo)(() => {
-        return {
-            ...style,
-            fill: type === 'warning' ? colors_1.WARNING_COLOR : colors_1.FAIL_COLOR,
-        };
-    }, [type]);
-    return ((0, jsx_runtime_1.jsx)("div", { style: container, children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", justify: align, children: [(0, jsx_runtime_1.jsx)(exports.WarningTriangle, { style: finalStyle }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("div", { style: label, children: message })] }) }));
-};
-exports.ValidationMessage = ValidationMessage;

package/dist/editor/components/NewComposition/new-comp-layout.d.ts

@@ -1,4 +0,0 @@
-import type React from 'react';
-export declare const leftLabel: React.CSSProperties;
-export declare const inputArea: React.CSSProperties;
-export declare const rightLabel: React.CSSProperties;

package/dist/editor/components/NewComposition/new-comp-layout.js

@@ -1,20 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.rightLabel = exports.inputArea = exports.leftLabel = void 0;
-const colors_1 = require("../../helpers/colors");
-exports.leftLabel = {
-    width: 160,
-    display: 'inline-block',
-    textAlign: 'right',
-    paddingRight: 30,
-    fontSize: 14,
-    color: colors_1.LIGHT_COLOR,
-};
-exports.inputArea = {
-    width: 190,
-};
-exports.rightLabel = {
-    fontSize: 13,
-    color: colors_1.LIGHT_TEXT,
-    marginLeft: 10,
-};

package/dist/editor/components/NewComposition/render-aspect-ratio.d.ts

@@ -1 +0,0 @@
-export declare const aspectRatio: (width: number, height: number) => string;

package/dist/editor/components/NewComposition/render-aspect-ratio.js

@@ -1,23 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.aspectRatio = void 0;
-function gcd_two_numbers(x, y) {
-    x = Math.abs(x);
-    y = Math.abs(y);
-    while (y) {
-        const t = y;
-        y = x % y;
-        x = t;
-    }
-    return x;
-}
-const aspectRatio = (width, height) => {
-    const commonDivisor = gcd_two_numbers(width, height);
-    const widthDivisor = width / commonDivisor;
-    const heightDivisor = height / commonDivisor;
-    if (widthDivisor < 100) {
-        return widthDivisor + ':' + heightDivisor;
-    }
-    return (widthDivisor / heightDivisor).toFixed(2);
-};
-exports.aspectRatio = aspectRatio;

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

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

package/dist/editor/components/NoRegisterRoot.js

@@ -1,41 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.NoRegisterRoot = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const label = {
-    fontSize: 13,
-    color: 'white',
-    fontFamily: 'Arial, Helvetica, sans-serif',
-};
-const container = {
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    flex: 1,
-    flexDirection: 'column',
-    textAlign: 'center',
-    lineHeight: 1.5,
-};
-const link = {
-    color: 'white',
-    textDecoration: 'none',
-    borderBottom: '1px solid',
-};
-const NoRegisterRoot = () => {
-    const [show, setShow] = (0, react_1.useState)(() => false);
-    (0, react_1.useEffect)(() => {
-        // Only show after 2 seconds so there is no flicker when the load is really fast
-        const timeout = setTimeout(() => {
-            setShow(true);
-        }, 2000);
-        return () => {
-            clearTimeout(timeout);
-        };
-    }, []);
-    if (!show) {
-        return null;
-    }
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)("div", { style: label, children: "Waiting for registerRoot() to get called." }), (0, jsx_runtime_1.jsxs)("div", { style: label, children: ["Learn more:", ' ', (0, jsx_runtime_1.jsx)("a", { target: '_blank', style: link, href: "https://www.remotion.dev/docs/register-root", children: "remotion.dev/docs/register-root" })] })] }));
-};
-exports.NoRegisterRoot = NoRegisterRoot;

package/dist/editor/components/Notifications/ColorDot.d.ts

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