@remotion/cli 4.0.113 → 4.0.115

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

@@ -1,9 +0,0 @@
-export declare const getNewCompositionCode: ({ type, height, width, fps, durationInFrames, name, raw, }: {
-    type: 'still' | 'composition';
-    height: number;
-    width: number;
-    fps: number;
-    durationInFrames: number;
-    name: string;
-    raw: boolean;
-}) => string | (string | JSX.Element | (string | JSX.Element)[])[];

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

@@ -1,67 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getNewCompositionCode = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const strColor = '#9ECBFF';
-const consColor = '#79B8FF';
-const propColor = '#B392F0';
-const keywordColor = '#F97583';
-const cssReset = {
-    fontFamily: 'monospace',
-};
-const makeProperty = (key, val, type, raw) => {
-    if (raw) {
-        return makePropertyRaw(key, val, type);
-    }
-    return [
-        `  `,
-        (0, jsx_runtime_1.jsx)("span", { style: { ...cssReset, color: propColor }, children: key }, key + 'key'),
-        (0, jsx_runtime_1.jsx)("span", { style: { ...cssReset, color: keywordColor }, children: '=' }, key + 'equal'),
-        type === 'string'
-            ? [
-                (0, jsx_runtime_1.jsxs)("span", { style: { ...cssReset, color: strColor }, children: ['"', val, '"'] }, key + 'value'),
-            ]
-            : [
-                '{',
-                (0, jsx_runtime_1.jsx)("span", { style: {
-                        ...cssReset,
-                        color: typeof val === 'number' ? consColor : strColor,
-                    }, children: val }, key + 'value'),
-                '}',
-            ],
-        (0, jsx_runtime_1.jsx)("br", {}, key + 'br'),
-    ];
-};
-const makePropertyRaw = (key, val, type) => {
-    return [
-        `  `,
-        key,
-        '=',
-        type === 'string' ? ['"' + val + '"'].join('') : ['{', val, '}'].join(''),
-        '\n',
-    ].join('');
-};
-const getNewCompositionCode = ({ type, height, width, fps, durationInFrames, name, raw, }) => {
-    const compName = type === 'still' ? 'Still' : 'Composition';
-    const props = [
-        ...makeProperty('id', name, 'string', raw),
-        ...makeProperty('component', name, 'const', raw),
-        ...(type === 'composition'
-            ? makeProperty('durationInFrames', durationInFrames, 'const', raw)
-            : []),
-        ...makeProperty('height', height, 'const', raw),
-        ...makeProperty('width', width, 'const', raw),
-        ...(type === 'composition' ? makeProperty('fps', fps, 'const', raw) : []),
-    ];
-    if (raw) {
-        return ['<', compName, '\n', ...props, '/>'].join('');
-    }
-    return [
-        `<`,
-        (0, jsx_runtime_1.jsx)("span", { style: { ...cssReset, color: '#79B8FF' }, children: compName }, "compname"),
-        (0, jsx_runtime_1.jsx)("br", {}, "linebr1"),
-        ...props,
-        '/>',
-    ];
-};
-exports.getNewCompositionCode = getNewCompositionCode;

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

@@ -1,6 +0,0 @@
-import React from 'react';
-export declare const NewCompDuration: React.FC<{
-    durationInFrames: string;
-    fps: string;
-    setDurationInFrames: React.Dispatch<React.SetStateAction<string>>;
-}>;

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

@@ -1,23 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.NewCompDuration = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const validate_new_comp_data_1 = require("../../helpers/validate-new-comp-data");
-const layout_1 = require("../layout");
-const InputDragger_1 = require("./InputDragger");
-const new_comp_layout_1 = require("./new-comp-layout");
-const ValidationMessage_1 = require("./ValidationMessage");
-const NewCompDuration = ({ durationInFrames, setDurationInFrames, fps }) => {
-    const onDurationInFramesChanged = (0, react_1.useCallback)((newValue) => {
-        setDurationInFrames(String(Number(newValue)));
-    }, [setDurationInFrames]);
-    const onDurationChangedDirectly = (0, react_1.useCallback)((newVal) => {
-        setDurationInFrames(String(newVal));
-    }, [setDurationInFrames]);
-    const compDurationErrMessage = (0, validate_new_comp_data_1.validateCompositionDuration)(durationInFrames);
-    return ((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: " Duration in frames" }), (0, jsx_runtime_1.jsxs)("div", { style: new_comp_layout_1.inputArea, children: [(0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { type: "number", value: durationInFrames, onTextChange: onDurationInFramesChanged, placeholder: "Duration (frames)", name: "durationInFrames", min: 1, step: 1, required: true, status: "ok", 
-                                // Hitting Promise.all() limit in Chrome
-                                max: 300000, onValueChange: onDurationChangedDirectly, rightAlign: false }), compDurationErrMessage ? ((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: compDurationErrMessage, type: "error" })] })) : null] }), (0, jsx_runtime_1.jsxs)("span", { style: new_comp_layout_1.rightLabel, children: [(Number(durationInFrames) / Number(fps)).toFixed(2), "sec"] })] }) }) }));
-};
-exports.NewCompDuration = NewCompDuration;

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

@@ -1,6 +0,0 @@
-import React from 'react';
-import type { CompType } from '../../state/modals';
-declare const NewComposition: React.FC<{
-    initialCompType: CompType;
-}>;
-export default NewComposition;

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