@remotion/cli 2.3.3 → 2.3.4

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

@@ -2,21 +2,18 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NewCompAspectRatio = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const new_comp_layout_1 = require("./new-comp-layout");
 const render_aspect_ratio_1 = require("./render-aspect-ratio");
+const ToggleAspectRatio_1 = require("./ToggleAspectRatio");
 const GUIDE_HEIGHT = 55;
 const GUIDE_WIDTH = 10;
-const label = {
-    fontSize: 13,
-    color: 'rgba(255, 255, 255, 0.5)',
-    marginLeft: 10,
-};
-const NewCompAspectRatio = ({ width, height }) => {
+const NewCompAspectRatio = ({ width, height, aspectRatioLocked, setAspectRatioLocked }) => {
     return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ style: {
                 display: 'flex',
                 flexDirection: 'row',
                 marginLeft: 10,
                 alignItems: 'center',
-            } }, { children: [(0, jsx_runtime_1.jsx)("svg", Object.assign({ width: GUIDE_WIDTH, height: GUIDE_HEIGHT }, { children: (0, jsx_runtime_1.jsx)("path", { d: `M 0 0 L ${GUIDE_WIDTH} 0 L ${GUIDE_WIDTH} ${GUIDE_HEIGHT} L 0 ${GUIDE_HEIGHT}`, fill: "transparent", strokeWidth: "2", stroke: "rgba(255, 255, 255, 0.2)" }, void 0) }), void 0), (0, jsx_runtime_1.jsxs)("div", Object.assign({ style: label }, { children: ["Aspect ratio ", (0, render_aspect_ratio_1.aspectRatio)(Number(width), Number(height))] }), void 0)] }), void 0) }, void 0));
+            } }, { children: [(0, jsx_runtime_1.jsx)("svg", Object.assign({ width: GUIDE_WIDTH, height: GUIDE_HEIGHT }, { children: (0, jsx_runtime_1.jsx)("path", { d: `M 0 0 L ${GUIDE_WIDTH} 0 L ${GUIDE_WIDTH} ${GUIDE_HEIGHT} L 0 ${GUIDE_HEIGHT}`, fill: "transparent", strokeWidth: "2", stroke: "rgba(255, 255, 255, 0.2)" }, void 0) }), void 0), (0, jsx_runtime_1.jsx)(ToggleAspectRatio_1.ToggleAspectRatio, { aspectRatioLocked: aspectRatioLocked, setAspectRatioLocked: setAspectRatioLocked }, void 0), (0, jsx_runtime_1.jsxs)("div", Object.assign({ style: new_comp_layout_1.rightLabel }, { children: ["Aspect ratio ", (0, render_aspect_ratio_1.aspectRatio)(Number(width), Number(height))] }), void 0)] }), void 0) }, void 0));
 };
 exports.NewCompAspectRatio = NewCompAspectRatio;
 //# sourceMappingURL=NewCompAspectRatio.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"NewCompAspectRatio.js","sourceRoot":"","sources":["../../../../src/editor/components/NewComposition/NewCompAspectRatio.tsx"],"names":[],"mappings":";;;;AACA,+DAAkD;AAElD,MAAM,YAAY,GAAG,EAAE,CAAC;AACxB,MAAM,WAAW,GAAG,EAAE,CAAC;AAEvB,MAAM,KAAK,GAAwB;IAClC,QAAQ,EAAE,EAAE;IACZ,KAAK,EAAE,0BAA0B;IACjC,UAAU,EAAE,EAAE;CACd,CAAC;AAEK,MAAM,kBAAkB,GAG1B,CAAC,EAAC,KAAK,EAAE,MAAM,EAAC,EAAE,EAAE;IACxB,OAAO,CACN,0CACC,+CACC,KAAK,EAAE;gBACN,OAAO,EAAE,MAAM;gBACf,aAAa,EAAE,KAAK;gBACpB,UAAU,EAAE,EAAE;gBACd,UAAU,EAAE,QAAQ;aACpB,iBAED,8CAAK,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,YAAY,gBAC5C,iCACC,CAAC,EAAE,WAAW,WAAW,QAAQ,WAAW,IAAI,YAAY,QAAQ,YAAY,EAAE,EAClF,IAAI,EAAC,aAAa,EAClB,WAAW,EAAC,GAAG,EACf,MAAM,EAAC,0BAA0B,WAChC,YACG,EACN,+CAAK,KAAK,EAAE,KAAK,kCACF,IAAA,iCAAW,EAAC,MAAM,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC,aACnD,aACD,WACD,CACN,CAAC;AACH,CAAC,CAAC;AA5BW,QAAA,kBAAkB,sBA4B7B"}
+{"version":3,"file":"NewCompAspectRatio.js","sourceRoot":"","sources":["../../../../src/editor/components/NewComposition/NewCompAspectRatio.tsx"],"names":[],"mappings":";;;;AACA,uDAA6C;AAC7C,+DAAkD;AAClD,2DAAsD;AAEtD,MAAM,YAAY,GAAG,EAAE,CAAC;AACxB,MAAM,WAAW,GAAG,EAAE,CAAC;AAEhB,MAAM,kBAAkB,GAK1B,CAAC,EAAC,KAAK,EAAE,MAAM,EAAE,iBAAiB,EAAE,oBAAoB,EAAC,EAAE,EAAE;IACjE,OAAO,CACN,0CACC,+CACC,KAAK,EAAE;gBACN,OAAO,EAAE,MAAM;gBACf,aAAa,EAAE,KAAK;gBACpB,UAAU,EAAE,EAAE;gBACd,UAAU,EAAE,QAAQ;aACpB,iBAED,8CAAK,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,YAAY,gBAC5C,iCACC,CAAC,EAAE,WAAW,WAAW,QAAQ,WAAW,IAAI,YAAY,QAAQ,YAAY,EAAE,EAClF,IAAI,EAAC,aAAa,EAClB,WAAW,EAAC,GAAG,EACf,MAAM,EAAC,0BAA0B,WAChC,YACG,EACN,uBAAC,qCAAiB,IACjB,iBAAiB,EAAE,iBAAiB,EACpC,oBAAoB,EAAE,oBAAoB,WACzC,EACF,+CAAK,KAAK,EAAE,4BAAU,kCACP,IAAA,iCAAW,EAAC,MAAM,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC,aACnD,aACD,WACD,CACN,CAAC;AACH,CAAC,CAAC;AAlCW,QAAA,kBAAkB,sBAkC7B"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"NewCompCode.d.ts","sourceRoot":"","sources":["../../../../src/editor/components/NewComposition/NewCompCode.tsx"],"names":[],"mappings":"AAwCA,eAAO,MAAM,qBAAqB;UAQ3B,OAAO,GAAG,aAAa;YACrB,MAAM;WACP,MAAM;SACR,MAAM;sBACO,MAAM;UAClB,MAAM;yDAkBZ,CAAC"}
+{"version":3,"file":"NewCompCode.d.ts","sourceRoot":"","sources":["../../../../src/editor/components/NewComposition/NewCompCode.tsx"],"names":[],"mappings":"AA2DA,eAAO,MAAM,qBAAqB;UAS3B,OAAO,GAAG,aAAa;YACrB,MAAM;WACP,MAAM;SACR,MAAM;sBACO,MAAM;UAClB,MAAM;SACP,OAAO;kEA4BZ,CAAC"}

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

@@ -6,7 +6,10 @@ const strColor = '#9ECBFF';
 const consColor = '#79B8FF';
 const propColor = '#B392F0';
 const keywordColor = '#F97583';
-const makeProperty = (key, val, type) => {
+const makeProperty = (key, val, type, raw) => {
+    if (raw) {
+        return makePropertyRaw(key, val, type);
+    }
     return [
         `  `,
         (0, jsx_runtime_1.jsx)("span", Object.assign({ style: { color: propColor } }, { children: key }), key + 'key'),
@@ -23,19 +26,35 @@ const makeProperty = (key, val, type) => {
         (0, jsx_runtime_1.jsx)("br", {}, key + 'br'),
     ];
 };
-const getNewCompositionCode = ({ type, height, width, fps, durationInFrames, name, }) => {
+const makePropertyRaw = (key, val, type) => {
     return [
-        `<`,
-        (0, jsx_runtime_1.jsx)("span", Object.assign({ style: { color: '#79B8FF' } }, { children: type === 'still' ? 'Still' : 'Composition' }), "compname"),
-        (0, jsx_runtime_1.jsx)("br", {}, "linebr1"),
-        ...makeProperty('id', name, 'string'),
-        ...makeProperty('component', name, 'const'),
+        `  `,
+        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')
+            ? makeProperty('durationInFrames', durationInFrames, 'const', raw)
             : []),
-        ...makeProperty('height', height, 'const'),
-        ...makeProperty('width', width, 'const'),
-        ...(type === 'composition' ? makeProperty('fps', fps, 'const') : []),
+        ...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", Object.assign({ style: { color: '#79B8FF' } }, { children: compName }), "compname"),
+        (0, jsx_runtime_1.jsx)("br", {}, "linebr1"),
+        ...props,
         '/>',
     ];
 };

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

@@ -1 +1 @@
-{"version":3,"file":"NewCompCode.js","sourceRoot":"","sources":["../../../../src/editor/components/NewComposition/NewCompCode.tsx"],"names":[],"mappings":";;;;AAAA,MAAM,QAAQ,GAAG,SAAS,CAAC;AAC3B,MAAM,SAAS,GAAG,SAAS,CAAC;AAC5B,MAAM,SAAS,GAAG,SAAS,CAAC;AAC5B,MAAM,YAAY,GAAG,SAAS,CAAC;AAE/B,MAAM,YAAY,GAAG,CACpB,GAAW,EACX,GAAoB,EACpB,IAAwB,EACvB,EAAE;IACH,OAAO;QACN,IAAI;QACJ,+CAAwB,KAAK,EAAE,EAAC,KAAK,EAAE,SAAS,EAAC,gBAC/C,GAAG,KADM,GAAG,GAAG,KAAK,CAEf;QACP,+CAA0B,KAAK,EAAE,EAAC,KAAK,EAAE,YAAY,EAAC,gBACpD,GAAG,KADM,GAAG,GAAG,OAAO,CAEjB;QACP,IAAI,KAAK,QAAQ;YAChB,CAAC,CAAC;gBACA,gDAA0B,KAAK,EAAE,EAAC,KAAK,EAAE,QAAQ,EAAC,iBAChD,GAAG,EACH,GAAG,EACH,GAAG,MAHM,GAAG,GAAG,OAAO,CAIjB;aACN;YACH,CAAC,CAAC;gBACA,GAAG;gBACH,+CAEC,KAAK,EAAE,EAAC,KAAK,EAAE,OAAO,GAAG,KAAK,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAC,gBAE7D,GAAG,KAHC,GAAG,GAAG,OAAO,CAIZ;gBACP,GAAG;aACF;QACJ,iCAAS,GAAG,GAAG,IAAI,CAAI;KACvB,CAAC;AACH,CAAC,CAAC;AAEK,MAAM,qBAAqB,GAAG,CAAC,EACrC,IAAI,EACJ,MAAM,EACN,KAAK,EACL,GAAG,EACH,gBAAgB,EAChB,IAAI,GAQJ,EAAE,EAAE;IACJ,OAAO;QACN,GAAG;QACH,+CAAqB,KAAK,EAAE,EAAC,KAAK,EAAE,SAAS,EAAC,gBAC5C,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,aAAa,KADlC,UAAU,CAEb;QACP,iCAAQ,SAAS,CAAG;QACpB,GAAG,YAAY,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,CAAC;QACrC,GAAG,YAAY,CAAC,WAAW,EAAE,IAAI,EAAE,OAAO,CAAC;QAC3C,GAAG,CAAC,IAAI,KAAK,aAAa;YACzB,CAAC,CAAC,YAAY,CAAC,kBAAkB,EAAE,gBAAgB,EAAE,OAAO,CAAC;YAC7D,CAAC,CAAC,EAAE,CAAC;QACN,GAAG,YAAY,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,CAAC;QAC1C,GAAG,YAAY,CAAC,OAAO,EAAE,KAAK,EAAE,OAAO,CAAC;QACxC,GAAG,CAAC,IAAI,KAAK,aAAa,CAAC,CAAC,CAAC,YAAY,CAAC,KAAK,EAAE,GAAG,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QACpE,IAAI;KACJ,CAAC;AACH,CAAC,CAAC;AA/BW,QAAA,qBAAqB,yBA+BhC"}
+{"version":3,"file":"NewCompCode.js","sourceRoot":"","sources":["../../../../src/editor/components/NewComposition/NewCompCode.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare const NewCompDuration: React.FC<{
+    durationInFrames: string;
+    fps: string;
+    setDurationInFrames: React.Dispatch<React.SetStateAction<string>>;
+}>;
+//# sourceMappingURL=NewCompDuration.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NewCompDuration.d.ts","sourceRoot":"","sources":["../../../../src/editor/components/NewComposition/NewCompDuration.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAW7D,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC;IACtC,gBAAgB,EAAE,MAAM,CAAC;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,mBAAmB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;CAClE,CAsCA,CAAC"}

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

@@ -0,0 +1,24 @@
+"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 layout_1 = require("../layout");
+const InputDragger_1 = require("./InputDragger");
+const new_comp_layout_1 = require("./new-comp-layout");
+const label = {
+    fontSize: 13,
+    color: 'rgba(255, 255, 255, 0.5)',
+    marginLeft: 10,
+};
+const NewCompDuration = ({ durationInFrames, setDurationInFrames, fps }) => {
+    const onDurationInFramesChanged = (0, react_1.useCallback)((e) => {
+        setDurationInFrames(e.target.value);
+    }, [setDurationInFrames]);
+    const onDurationChangedDirectly = (0, react_1.useCallback)((newVal) => {
+        setDurationInFrames(String(newVal));
+    }, [setDurationInFrames]);
+    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("label", { children: (0, jsx_runtime_1.jsxs)(layout_1.Row, Object.assign({ align: "center" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ style: new_comp_layout_1.leftLabel }, { children: " Duration in frames" }), void 0), (0, jsx_runtime_1.jsx)("div", Object.assign({ style: new_comp_layout_1.inputArea }, { children: (0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { type: "number", value: durationInFrames, onChange: onDurationInFramesChanged, placeholder: "Duration (frames)", name: "height", min: 1, onValueChange: onDurationChangedDirectly }, void 0) }), void 0), (0, jsx_runtime_1.jsxs)("span", Object.assign({ style: new_comp_layout_1.rightLabel }, { children: [(Number(durationInFrames) / Number(fps)).toFixed(2), "sec"] }), void 0)] }), void 0) }, void 0) }, void 0));
+};
+exports.NewCompDuration = NewCompDuration;
+//# sourceMappingURL=NewCompDuration.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NewCompDuration.js","sourceRoot":"","sources":["../../../../src/editor/components/NewComposition/NewCompDuration.tsx"],"names":[],"mappings":";;;;AAAA,iCAA6D;AAC7D,sCAA8B;AAC9B,iDAA4C;AAC5C,uDAAmE;AAEnE,MAAM,KAAK,GAAwB;IAClC,QAAQ,EAAE,EAAE;IACZ,KAAK,EAAE,0BAA0B;IACjC,UAAU,EAAE,EAAE;CACd,CAAC;AAEK,MAAM,eAAe,GAIvB,CAAC,EAAC,gBAAgB,EAAE,mBAAmB,EAAE,GAAG,EAAC,EAAE,EAAE;IACrD,MAAM,yBAAyB,GAAyC,IAAA,mBAAW,EAClF,CAAC,CAAC,EAAE,EAAE;QACL,mBAAmB,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACrC,CAAC,EACD,CAAC,mBAAmB,CAAC,CACrB,CAAC;IAEF,MAAM,yBAAyB,GAAG,IAAA,mBAAW,EAC5C,CAAC,MAAc,EAAE,EAAE;QAClB,mBAAmB,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC;IACrC,CAAC,EACD,CAAC,mBAAmB,CAAC,CACrB,CAAC;IAEF,OAAO,CACN,0CACC,4CACC,wBAAC,YAAG,kBAAC,KAAK,EAAC,QAAQ,iBAClB,8CAAK,KAAK,EAAE,2BAAS,iDAA2B,EAChD,8CAAK,KAAK,EAAE,2BAAS,gBACpB,uBAAC,2BAAY,IACZ,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,gBAAgB,EACvB,QAAQ,EAAE,yBAAyB,EACnC,WAAW,EAAC,mBAAmB,EAC/B,IAAI,EAAC,QAAQ,EACb,GAAG,EAAE,CAAC,EACN,aAAa,EAAE,yBAAyB,WACvC,YACG,EACN,gDAAM,KAAK,EAAE,4BAAU,iBACrB,CAAC,MAAM,CAAC,gBAAgB,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,oBAC9C,aACF,WACC,WACH,CACN,CAAC;AACH,CAAC,CAAC;AA1CW,QAAA,eAAe,mBA0C1B"}

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

@@ -1 +1 @@
-{"version":3,"file":"NewCompHeader.d.ts","sourceRoot":"","sources":["../../../../src/editor/components/NewComposition/NewCompHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAQjC,CAAC"}
+{"version":3,"file":"NewCompHeader.d.ts","sourceRoot":"","sources":["../../../../src/editor/components/NewComposition/NewCompHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAmBrD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAYjC,CAAC"}

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

@@ -2,17 +2,28 @@
 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("./CancelButton");
 const container = {
     display: 'flex',
     flexDirection: 'row',
+    alignItems: 'center',
     padding: 12,
-    textAlign: 'center',
     width: '100%',
     borderBottom: '1px solid black',
 };
+const icon = {
+    height: 20,
+    width: 20,
+};
 const NewCompHeader = () => {
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ style: container }, { children: [(0, jsx_runtime_1.jsx)("div", { children: "New composition" }, void 0), (0, jsx_runtime_1.jsx)("div", { style: { flex: 1 } }, void 0), (0, jsx_runtime_1.jsx)(CancelButton_1.CancelButton, { style: { height: 20, width: 20 } }, void 0)] }), void 0));
+    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", Object.assign({ style: container }, { children: [(0, jsx_runtime_1.jsx)("div", { children: "New composition" }, void 0), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}, void 0), (0, jsx_runtime_1.jsx)(CancelButton_1.CancelButton, { style: icon, onPress: onPress }, void 0)] }), void 0));
 };
 exports.NewCompHeader = NewCompHeader;
 //# sourceMappingURL=NewCompHeader.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"NewCompHeader.js","sourceRoot":"","sources":["../../../../src/editor/components/NewComposition/NewCompHeader.tsx"],"names":[],"mappings":";;;;AACA,iDAA4C;AAE5C,MAAM,SAAS,GAAwB;IACtC,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,KAAK;IACpB,OAAO,EAAE,EAAE;IACX,SAAS,EAAE,QAAQ;IACnB,KAAK,EAAE,MAAM;IACb,YAAY,EAAE,iBAAiB;CAC/B,CAAC;AAEK,MAAM,aAAa,GAAa,GAAG,EAAE;IAC3C,OAAO,CACN,+CAAK,KAAK,EAAE,SAAS,iBACpB,sEAA0B,EAC1B,gCAAK,KAAK,EAAE,EAAC,IAAI,EAAE,CAAC,EAAC,WAAI,EACzB,uBAAC,2BAAY,IAAC,KAAK,EAAE,EAAC,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAC,WAAI,aAC3C,CACN,CAAC;AACH,CAAC,CAAC;AARW,QAAA,aAAa,iBAQxB"}
+{"version":3,"file":"NewCompHeader.js","sourceRoot":"","sources":["../../../../src/editor/components/NewComposition/NewCompHeader.tsx"],"names":[],"mappings":";;;;AAAA,iCAAqD;AACrD,+CAAiD;AACjD,sCAA+B;AAC/B,iDAA4C;AAE5C,MAAM,SAAS,GAAwB;IACtC,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,KAAK;IACpB,UAAU,EAAE,QAAQ;IACpB,OAAO,EAAE,EAAE;IACX,KAAK,EAAE,MAAM;IACb,YAAY,EAAE,iBAAiB;CAC/B,CAAC;AAEF,MAAM,IAAI,GAAwB;IACjC,MAAM,EAAE,EAAE;IACV,KAAK,EAAE,EAAE;CACT,CAAC;AAEK,MAAM,aAAa,GAAa,GAAG,EAAE;IAC3C,MAAM,EAAC,gBAAgB,EAAC,GAAG,IAAA,kBAAU,EAAC,sBAAa,CAAC,CAAC;IACrD,MAAM,OAAO,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QAChC,gBAAgB,CAAC,IAAI,CAAC,CAAC;IACxB,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC;IACvB,OAAO,CACN,+CAAK,KAAK,EAAE,SAAS,iBACpB,sEAA0B,EAC1B,uBAAC,aAAI,aAAG,EACR,uBAAC,2BAAY,IAAC,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,WAAI,aAC1C,CACN,CAAC;AACH,CAAC,CAAC;AAZW,QAAA,aAAa,iBAYxB"}

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

@@ -1,3 +1,6 @@
 import React from 'react';
-export declare const NewSequence: React.FC;
+import { CompType } from './CompositionType';
+export declare const NewComposition: React.FC<{
+    initialCompType: CompType;
+}>;
 //# sourceMappingURL=NewComposition.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"NewComposition.d.ts","sourceRoot":"","sources":["../../../../src/editor/components/NewComposition/NewComposition.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2D,MAAM,OAAO,CAAC;AA+DhF,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAgK/B,CAAC"}
+{"version":3,"file":"NewComposition.d.ts","sourceRoot":"","sources":["../../../../src/editor/components/NewComposition/NewComposition.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AASf,OAAO,EAAkB,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAsC5D,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC;IAAC,eAAe,EAAE,QAAQ,CAAA;CAAC,CAyOhE,CAAC"}

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

@@ -1,41 +1,35 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NewSequence = void 0;
+exports.NewComposition = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const colors_1 = require("../../helpers/colors");
-const font_1 = require("../../helpers/font");
-const Spacing_1 = require("../Spacing");
+const remotion_1 = require("remotion");
+const Checkmark_1 = require("../../icons/Checkmark");
+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 CompositionType_1 = require("./CompositionType");
+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 NewCompHeader_1 = require("./NewCompHeader");
+const NewCompDuration_1 = require("./NewCompDuration");
 const RemInput_1 = require("./RemInput");
-const backgroundOverlay = {
-    backgroundColor: 'rgba(255, 255, 255, 0.2)',
-    backdropFilter: `blur(1px)`,
-    position: 'fixed',
-    height: '100%',
-    width: '100%',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-};
-const panel = {
-    backgroundColor: colors_1.BACKGROUND,
-    boxShadow: '0 0 4px black',
-    color: 'white',
-    fontFamily: font_1.FONT_FAMILY,
-};
+const ValidationMessage_1 = require("./ValidationMessage");
 const panelContent = {
     flexDirection: 'row',
     display: 'flex',
+    width: 1100,
+    height: 450,
 };
 const left = {
     padding: 12,
     paddingBottom: 80,
     paddingRight: 12,
+    flex: 1,
 };
 const panelRight = {
     width: 400,
@@ -43,43 +37,44 @@ const panelRight = {
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
-};
-const leftLabel = {
-    width: 160,
-    display: 'inline-block',
-    textAlign: 'right',
-    paddingRight: 30,
-    fontSize: 14,
-    color: '#ddd',
+    position: 'relative',
 };
 const pre = {
     fontSize: 17,
 };
 const commonFrameRates = [24, 25, 29.97, 30, 48, 50];
-const NewSequence = () => {
-    const [type, setType] = (0, react_1.useState)('composition');
+const NewComposition = ({ initialCompType, }) => {
+    const [selectedFrameRate, setFrameRate] = (0, react_1.useState)(String(commonFrameRates[0]));
+    const [type, setType] = (0, react_1.useState)(initialCompType);
     const [name, setName] = (0, react_1.useState)('MyComp');
     const [width, setWidth] = (0, react_1.useState)('1280');
     const [height, setHeight] = (0, react_1.useState)('720');
-    const [fps, setFps] = (0, react_1.useState)(24);
     const [durationInFrames, setDurationInFrames] = (0, react_1.useState)('150');
+    const [aspectRatioLocked, setAspectRatioLocked] = (0, react_1.useState)(false);
+    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)((e) => {
         setWidth(e.target.value);
     }, []);
+    const onWidthDirectlyChanged = (0, react_1.useCallback)((newWidth) => {
+        setWidth(String(newWidth));
+    }, []);
+    const onHeightDirectlyChanged = (0, react_1.useCallback)((newHeight) => {
+        setHeight(String(newHeight));
+    }, []);
     const onHeightChanged = (0, react_1.useCallback)((e) => {
         setHeight(e.target.value);
     }, []);
-    const onDurationInFramesChanged = (0, react_1.useCallback)((e) => {
-        setDurationInFrames(e.target.value);
-    }, []);
     const onNameChange = (0, react_1.useCallback)((e) => {
         setName(e.target.value);
     }, []);
     const onFpsChange = (0, react_1.useCallback)((newFps) => {
-        setFps(newFps);
+        setFrameRate(String(newFps));
     }, []);
     const items = (0, react_1.useMemo)(() => {
         return commonFrameRates.map((frameRate) => {
@@ -89,21 +84,40 @@ const NewSequence = () => {
                 onClick: () => onFpsChange(frameRate),
                 type: 'item',
                 value: frameRate,
+                keyHint: null,
+                leftItem: String(frameRate) === selectedFrameRate ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}, void 0) : null,
+                subMenu: null,
             };
         });
-    }, [onFpsChange]);
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ style: backgroundOverlay }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ style: panel }, { children: [(0, jsx_runtime_1.jsx)(NewCompHeader_1.NewCompHeader, {}, void 0), (0, jsx_runtime_1.jsxs)("div", Object.assign({ style: panelContent }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ style: left }, { children: [(0, jsx_runtime_1.jsx)(CompositionType_1.CompositionType, { onSelected: onTypeChanged, type: type }, void 0), (0, jsx_runtime_1.jsx)(Spacing_1.Spacing, { y: 3 }, void 0), (0, jsx_runtime_1.jsxs)("form", { children: [(0, jsx_runtime_1.jsxs)("label", { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ style: leftLabel }, { children: "Name" }), void 0), (0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { value: name, onChange: onNameChange, type: "text", placeholder: "Composition name" }, void 0)] }, void 0), (0, jsx_runtime_1.jsx)(Spacing_1.Spacing, { y: 1 }, void 0), (0, jsx_runtime_1.jsxs)("div", Object.assign({ style: {
-                                                display: 'flex',
-                                                flexDirection: 'row',
-                                                alignItems: 'center',
-                                            } }, { children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("label", { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ style: leftLabel }, { children: "Width" }), void 0), (0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { type: "number", value: width, placeholder: "Width (px)", onChange: onWidthChanged, name: "width" }, void 0)] }, void 0) }, void 0), (0, jsx_runtime_1.jsx)(Spacing_1.Spacing, { y: 1 }, void 0), (0, jsx_runtime_1.jsxs)("label", { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ style: leftLabel }, { children: "Height" }), void 0), (0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { type: "number", value: height, onChange: onHeightChanged, placeholder: "Height (px)", name: "height" }, void 0)] }, void 0)] }, void 0), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(NewCompAspectRatio_1.NewCompAspectRatio, { width: Number(width), height: Number(height) }, void 0) }, void 0)] }), void 0), (0, jsx_runtime_1.jsx)(Spacing_1.Spacing, { y: 1 }, void 0), type === 'composition' ? ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("label", { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ style: leftLabel }, { children: " Duration in frames" }), void 0), (0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { type: "number", value: durationInFrames, onChange: onDurationInFramesChanged, placeholder: "Duration (frames)", name: "height" }, void 0), (0, jsx_runtime_1.jsxs)("span", { children: [(Number(durationInFrames) / Number(fps)).toFixed(2), "sec"] }, void 0)] }, void 0) }, void 0)) : null, type === 'composition' ? ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(Spacing_1.Spacing, { y: 1 }, void 0), (0, jsx_runtime_1.jsxs)("label", { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ style: leftLabel }, { children: "Framerate" }), void 0), (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: items }, void 0)] }, void 0)] }, void 0)) : null] }, void 0)] }), void 0), (0, jsx_runtime_1.jsx)("div", Object.assign({ style: panelRight }, { children: (0, jsx_runtime_1.jsx)("pre", Object.assign({ style: pre }, { children: (0, NewCompCode_1.getNewCompositionCode)({
+    }, [onFpsChange, selectedFrameRate]);
+    const isValidCompName = remotion_1.Internals.isCompositionIdValid(name);
+    return ((0, jsx_runtime_1.jsxs)(ModalContainer_1.ModalContainer, Object.assign({ onOutsideClick: onQuit, onEscape: onQuit }, { children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.NewCompHeader, { title: "New composition" }, void 0), (0, jsx_runtime_1.jsxs)("div", Object.assign({ style: panelContent }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ style: left }, { children: [(0, jsx_runtime_1.jsx)(CompositionType_1.CompositionType, { onSelected: onTypeChanged, type: type }, void 0), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 3 }, void 0), (0, jsx_runtime_1.jsxs)("form", { children: [(0, jsx_runtime_1.jsx)("label", { children: (0, jsx_runtime_1.jsxs)(layout_1.Row, Object.assign({ align: "center" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ style: new_comp_layout_1.leftLabel }, { children: "Name" }), void 0), (0, jsx_runtime_1.jsxs)("div", Object.assign({ style: new_comp_layout_1.inputArea }, { children: [(0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { value: name, onChange: onNameChange, type: "text", placeholder: "Composition name" }, void 0), isValidCompName ? null : ((0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { message: remotion_1.Internals.invalidCompositionErrorMessage }, void 0))] }), void 0)] }), void 0) }, void 0), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }, void 0), (0, jsx_runtime_1.jsxs)("div", Object.assign({ style: {
+                                            display: 'flex',
+                                            flexDirection: 'row',
+                                            alignItems: '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, Object.assign({ align: "center" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ style: new_comp_layout_1.leftLabel }, { children: "Width" }), void 0), (0, jsx_runtime_1.jsxs)("div", Object.assign({ style: new_comp_layout_1.inputArea }, { children: [(0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { type: "number", value: width, placeholder: "Width (px)", onChange: onWidthChanged, name: "width", step: 2, min: 2, onValueChange: onWidthDirectlyChanged }, void 0), Number(width) % 2 === 0 ? null : ((0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { message: "Dimension should be divisible by 2, since H264 codec doesn't support odd dimensions.." }, void 0))] }), void 0)] }), void 0) }, void 0) }, void 0), (0, jsx_runtime_1.jsx)("div", {}, void 0), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }, void 0), (0, jsx_runtime_1.jsx)("div", {}, void 0), (0, jsx_runtime_1.jsx)("label", { children: (0, jsx_runtime_1.jsxs)(layout_1.Row, Object.assign({ align: "center" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ style: new_comp_layout_1.leftLabel }, { children: "Height" }), void 0), (0, jsx_runtime_1.jsxs)("div", Object.assign({ style: new_comp_layout_1.inputArea }, { children: [(0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { type: "number", value: height, onChange: onHeightChanged, placeholder: "Height (px)", name: "height", step: 2, min: 2, onValueChange: onHeightDirectlyChanged }, void 0), Number(height) % 2 === 0 ? null : ((0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { message: "Dimension should be divisible by 2, since H264 codec doesn't support odd dimensions.." }, void 0))] }), void 0)] }), void 0) }, void 0)] }, void 0), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(NewCompAspectRatio_1.NewCompAspectRatio, { width: Number(width), height: Number(height), aspectRatioLocked: aspectRatioLocked, setAspectRatioLocked: setAspectRatioLocked }, void 0) }, void 0)] }), void 0), (0, jsx_runtime_1.jsx)("div", {}, void 0), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }, void 0), type === 'composition' ? ((0, jsx_runtime_1.jsx)(NewCompDuration_1.NewCompDuration, { durationInFrames: durationInFrames, fps: selectedFrameRate, setDurationInFrames: setDurationInFrames }, void 0)) : null, (0, jsx_runtime_1.jsx)("div", {}, void 0), (0, jsx_runtime_1.jsx)("br", {}, void 0), (0, jsx_runtime_1.jsx)("div", {}, void 0), type === 'composition' ? ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", {}, void 0), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }, void 0), (0, jsx_runtime_1.jsxs)("label", { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ style: new_comp_layout_1.leftLabel }, { children: "Framerate" }), void 0), (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { style: {
+                                                            width: new_comp_layout_1.inputArea.width,
+                                                        }, values: items, selectedId: selectedFrameRate }, void 0)] }, void 0)] }, void 0)) : null] }, void 0)] }), void 0), (0, jsx_runtime_1.jsxs)("div", Object.assign({ style: panelRight }, { children: [(0, jsx_runtime_1.jsx)("pre", Object.assign({ style: pre }, { children: (0, NewCompCode_1.getNewCompositionCode)({
                                     type,
                                     durationInFrames: Number(durationInFrames),
-                                    fps: Number(fps),
+                                    fps: Number(selectedFrameRate),
                                     height: Number(height),
                                     width: Number(width),
                                     name,
-                                }) }), void 0) }), void 0)] }), void 0)] }), void 0) }), void 0));
+                                    raw: false,
+                                }) }), void 0), (0, jsx_runtime_1.jsx)("div", Object.assign({ style: {
+                                    position: 'absolute',
+                                    bottom: 10,
+                                    right: 10,
+                                } }, { children: (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(height),
+                                        width: Number(width),
+                                        name,
+                                        raw: true,
+                                    }) }, void 0) }), void 0)] }), void 0)] }), void 0)] }), void 0));
 };
-exports.NewSequence = NewSequence;
+exports.NewComposition = NewComposition;
 //# sourceMappingURL=NewComposition.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"NewComposition.js","sourceRoot":"","sources":["../../../../src/editor/components/NewComposition/NewComposition.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"NewComposition.js","sourceRoot":"","sources":["../../../../src/editor/components/NewComposition/NewComposition.tsx"],"names":[],"mappings":"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"}

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

@@ -1,4 +1,5 @@
 import React from 'react';
+export declare const inputBaseStyle: React.CSSProperties;
 export declare const RemotionInput: (props: React.ClassAttributes<HTMLInputElement> & React.InputHTMLAttributes<HTMLInputElement> & {
     children?: React.ReactNode;
 } & React.RefAttributes<HTMLInputElement | null>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;

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

@@ -1 +1 @@
-{"version":3,"file":"RemInput.d.ts","sourceRoot":"","sources":["../../../../src/editor/components/NewComposition/RemInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAC;AA0Ef,eAAO,MAAM,aAAa;;8HAAiC,CAAC"}
+{"version":3,"file":"RemInput.d.ts","sourceRoot":"","sources":["../../../../src/editor/components/NewComposition/RemInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAC;AAef,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,aAOlC,CAAC;AAyDF,eAAO,MAAM,aAAa;;8HAAiC,CAAC"}

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

@@ -1,32 +1,35 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RemotionInput = void 0;
+exports.RemotionInput = exports.inputBaseStyle = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../../helpers/colors");
 const font_1 = require("../../helpers/font");
+const z_index_1 = require("../../state/z-index");
+exports.inputBaseStyle = {
+    fontFamily: font_1.FONT_FAMILY,
+    padding: '8px 10px',
+    color: 'white',
+    borderStyle: 'solid',
+    borderWidth: 1,
+    fontSize: 14,
+};
 const RemInputForwardRef = (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: 'rgba(255, 255, 255, 0.06)',
-            border: colors_1.BORDER_COLOR,
-            fontFamily: font_1.FONT_FAMILY,
-            padding: '10px 16px',
-            color: 'white',
-            outline: 'none',
-            borderStyle: 'solid',
-            borderWidth: 2,
-            borderRadius: 5,
-            fontSize: 15,
+            backgroundColor: colors_1.INPUT_BACKGROUND,
+            ...exports.inputBaseStyle,
+            width: '100%',
             borderColor: isFocused
                 ? colors_1.SELECTED_BACKGROUND
                 : isHovered
-                    ? colors_1.CLEAR_HOVER
-                    : 'transparent',
+                    ? colors_1.INPUT_BORDER_COLOR_HOVERED
+                    : colors_1.INPUT_BORDER_COLOR_UNHOVERED,
             ...((_a = props.style) !== null && _a !== void 0 ? _a : {}),
         };
     }, [isFocused, isHovered, props.style]);
@@ -53,7 +56,7 @@ const RemInputForwardRef = (props, ref) => {
             current.removeEventListener('mouseleave', onMouseLeave);
         };
     }, [inputRef]);
-    return (0, jsx_runtime_1.jsx)("input", Object.assign({ ref: inputRef }, props, { style: style }), void 0);
+    return (0, jsx_runtime_1.jsx)("input", Object.assign({ ref: inputRef, tabIndex: tabIndex }, props, { style: style }), void 0);
 };
 exports.RemotionInput = (0, react_1.forwardRef)(RemInputForwardRef);
 //# sourceMappingURL=RemInput.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"RemInput.js","sourceRoot":"","sources":["../../../../src/editor/components/NewComposition/RemInput.tsx"],"names":[],"mappings":";;;;AAAA,iCAOe;AACf,iDAI8B;AAC9B,6CAA+C;AAO/C,MAAM,kBAAkB,GAGpB,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IAClB,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAClD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAClD,MAAM,QAAQ,GAAG,IAAA,cAAM,EAAmB,IAAI,CAAC,CAAC;IAEhD,MAAM,KAAK,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;;QAC1B,OAAO;YACN,eAAe,EAAE,2BAA2B;YAC5C,MAAM,EAAE,qBAAY;YACpB,UAAU,EAAE,kBAAW;YACvB,OAAO,EAAE,WAAW;YACpB,KAAK,EAAE,OAAO;YACd,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,OAAO;YACpB,WAAW,EAAE,CAAC;YACd,YAAY,EAAE,CAAC;YACf,QAAQ,EAAE,EAAE;YACZ,WAAW,EAAE,SAAS;gBACrB,CAAC,CAAC,4BAAmB;gBACrB,CAAC,CAAC,SAAS;oBACX,CAAC,CAAC,oBAAW;oBACb,CAAC,CAAC,aAAa;YAChB,GAAG,CAAC,MAAA,KAAK,CAAC,KAAK,mCAAI,EAAE,CAAC;SACtB,CAAC;IACH,CAAC,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;IAExC,IAAA,2BAAmB,EAAC,GAAG,EAAE,GAAG,EAAE;QAC7B,OAAO,QAAQ,CAAC,OAA2B,CAAC;IAC7C,CAAC,CAAC,CAAC;IAEH,IAAA,iBAAS,EAAC,GAAG,EAAE;QACd,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE;YACtB,OAAO;SACP;QAED,MAAM,EAAC,OAAO,EAAC,GAAG,QAAQ,CAAC;QAE3B,MAAM,OAAO,GAAG,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;QACzC,MAAM,MAAM,GAAG,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;QACzC,MAAM,YAAY,GAAG,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;QAC9C,MAAM,YAAY,GAAG,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;QAE/C,OAAO,CAAC,gBAAgB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;QAC3C,OAAO,CAAC,gBAAgB,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QACzC,OAAO,CAAC,gBAAgB,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC;QACrD,OAAO,CAAC,gBAAgB,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC;QAErD,OAAO,GAAG,EAAE;YACX,OAAO,CAAC,mBAAmB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;YAC9C,OAAO,CAAC,mBAAmB,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;YAC5C,OAAO,CAAC,mBAAmB,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC;YACxD,OAAO,CAAC,mBAAmB,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC;QACzD,CAAC,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,OAAO,gDAAO,GAAG,EAAE,QAAQ,IAAM,KAAK,IAAE,KAAK,EAAE,KAAK,YAAI,CAAC;AAC1D,CAAC,CAAC;AAEW,QAAA,aAAa,GAAG,IAAA,kBAAU,EAAC,kBAAkB,CAAC,CAAC"}
+{"version":3,"file":"RemInput.js","sourceRoot":"","sources":["../../../../src/editor/components/NewComposition/RemInput.tsx"],"names":[],"mappings":";;;;AAAA,iCAOe;AACf,iDAK8B;AAC9B,6CAA+C;AAC/C,iDAA8C;AAOjC,QAAA,cAAc,GAAwB;IAClD,UAAU,EAAE,kBAAW;IACvB,OAAO,EAAE,UAAU;IACnB,KAAK,EAAE,OAAO;IACd,WAAW,EAAE,OAAO;IACpB,WAAW,EAAE,CAAC;IACd,QAAQ,EAAE,EAAE;CACZ,CAAC;AAEF,MAAM,kBAAkB,GAGpB,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IAClB,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAClD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAClD,MAAM,QAAQ,GAAG,IAAA,cAAM,EAAmB,IAAI,CAAC,CAAC;IAChD,MAAM,EAAC,QAAQ,EAAC,GAAG,IAAA,mBAAS,GAAE,CAAC;IAE/B,MAAM,KAAK,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;;QAC1B,OAAO;YACN,eAAe,EAAE,yBAAgB;YACjC,GAAG,sBAAc;YACjB,KAAK,EAAE,MAAM;YACb,WAAW,EAAE,SAAS;gBACrB,CAAC,CAAC,4BAAmB;gBACrB,CAAC,CAAC,SAAS;oBACX,CAAC,CAAC,mCAA0B;oBAC5B,CAAC,CAAC,qCAA4B;YAC/B,GAAG,CAAC,MAAA,KAAK,CAAC,KAAK,mCAAI,EAAE,CAAC;SACtB,CAAC;IACH,CAAC,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;IAExC,IAAA,2BAAmB,EAAC,GAAG,EAAE,GAAG,EAAE;QAC7B,OAAO,QAAQ,CAAC,OAA2B,CAAC;IAC7C,CAAC,CAAC,CAAC;IAEH,IAAA,iBAAS,EAAC,GAAG,EAAE;QACd,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE;YACtB,OAAO;SACP;QAED,MAAM,EAAC,OAAO,EAAC,GAAG,QAAQ,CAAC;QAE3B,MAAM,OAAO,GAAG,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;QACzC,MAAM,MAAM,GAAG,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;QACzC,MAAM,YAAY,GAAG,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;QAC9C,MAAM,YAAY,GAAG,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;QAE/C,OAAO,CAAC,gBAAgB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;QAC3C,OAAO,CAAC,gBAAgB,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QACzC,OAAO,CAAC,gBAAgB,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC;QACrD,OAAO,CAAC,gBAAgB,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC;QAErD,OAAO,GAAG,EAAE;YACX,OAAO,CAAC,mBAAmB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;YAC9C,OAAO,CAAC,mBAAmB,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;YAC5C,OAAO,CAAC,mBAAmB,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC;YACxD,OAAO,CAAC,mBAAmB,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC;QACzD,CAAC,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,OAAO,gDAAO,GAAG,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,IAAM,KAAK,IAAE,KAAK,EAAE,KAAK,YAAI,CAAC;AAC9E,CAAC,CAAC;AAEW,QAAA,aAAa,GAAG,IAAA,kBAAU,EAAC,kBAAkB,CAAC,CAAC"}

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

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const ToggleAspectRatio: React.FC<{
+    aspectRatioLocked: boolean;
+    setAspectRatioLocked: React.Dispatch<React.SetStateAction<boolean>>;
+}>;
+//# sourceMappingURL=ToggleAspectRatio.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleAspectRatio.d.ts","sourceRoot":"","sources":["../../../../src/editor/components/NewComposition/ToggleAspectRatio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAe5D,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC;IACxC,iBAAiB,EAAE,OAAO,CAAC;IAC3B,oBAAoB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;CACpE,CAaA,CAAC"}

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

@@ -0,0 +1,24 @@
+"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',
+};
+const iconStyle = {
+    width: 14,
+    color: 'white',
+};
+const ToggleAspectRatio = ({ aspectRatioLocked, setAspectRatioLocked }) => {
+    const onClick = (0, react_1.useCallback)(() => {
+        setAspectRatioLocked((a) => !a);
+    }, [setAspectRatioLocked]);
+    return ((0, jsx_runtime_1.jsx)("button", Object.assign({ type: "button", onClick: onClick, style: buttonStyle }, { children: aspectRatioLocked ? ((0, jsx_runtime_1.jsx)(lock_1.LockIcon, { style: iconStyle }, void 0)) : ((0, jsx_runtime_1.jsx)(lock_1.UnlockIcon, { style: iconStyle }, void 0)) }), void 0));
+};
+exports.ToggleAspectRatio = ToggleAspectRatio;
+//# sourceMappingURL=ToggleAspectRatio.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleAspectRatio.js","sourceRoot":"","sources":["../../../../src/editor/components/NewComposition/ToggleAspectRatio.tsx"],"names":[],"mappings":";;;;AAAA,iCAA4D;AAC5D,iDAAgD;AAChD,2CAAsD;AAEtD,MAAM,WAAW,GAAwB;IACxC,eAAe,EAAE,mBAAU;IAC3B,MAAM,EAAE,MAAM;IACd,QAAQ,EAAE,UAAU;CACpB,CAAC;AAEF,MAAM,SAAS,GAAwB;IACtC,KAAK,EAAE,EAAE;IACT,KAAK,EAAE,OAAO;CACd,CAAC;AAEK,MAAM,iBAAiB,GAGzB,CAAC,EAAC,iBAAiB,EAAE,oBAAoB,EAAC,EAAE,EAAE;IAClD,MAAM,OAAO,GAAsB,IAAA,mBAAW,EAAC,GAAG,EAAE;QACnD,oBAAoB,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;IACjC,CAAC,EAAE,CAAC,oBAAoB,CAAC,CAAC,CAAC;IAC3B,OAAO,CACN,iDAAQ,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,WAAW,gBACxD,iBAAiB,CAAC,CAAC,CAAC,CACpB,uBAAC,eAAQ,IAAC,KAAK,EAAE,SAAS,WAAI,CAC9B,CAAC,CAAC,CAAC,CACH,uBAAC,iBAAU,IAAC,KAAK,EAAE,SAAS,WAAI,CAChC,YACO,CACT,CAAC;AACH,CAAC,CAAC;AAhBW,QAAA,iBAAiB,qBAgB5B"}

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

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const ValidationMessage: React.FC<{
+    message: string;
+}>;
+//# sourceMappingURL=ValidationMessage.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ValidationMessage.d.ts","sourceRoot":"","sources":["../../../../src/editor/components/NewComposition/ValidationMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AA4BtC,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC;IACxC,OAAO,EAAE,MAAM,CAAC;CAChB,CAUA,CAAC"}