@remotion/studio 4.0.485 → 4.0.486

package/dist/components/InspectorInfoHeader.js

@@ -7,7 +7,7 @@ const InspectorPanelLayout_1 = require("./InspectorPanelLayout");
 exports.INSPECTOR_INFO_HEADER_MIN_HEIGHT = 84;
 const container = {
     backgroundColor: colors_1.BACKGROUND,
-    color: 'white',
+    color: colors_1.WHITE,
     display: 'block',
     minHeight: exports.INSPECTOR_INFO_HEADER_MIN_HEIGHT,
     padding: `6px ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px`,
@@ -25,7 +25,7 @@ const content = {
 };
 const title = {
     backgroundColor: colors_1.BACKGROUND,
-    color: 'white',
+    color: colors_1.WHITE,
     fontSize: 12,
     lineHeight: '18px',
     overflow: 'hidden',

package/dist/components/InspectorPanel/DefaultInspector.d.ts

@@ -4,5 +4,6 @@ import type { UpdaterFunction } from '../RenderModal/SchemaEditor/ZodSwitch';
 export declare const DefaultInspector: React.FC<{
     readonly composition: _InternalTypes['AnyComposition'] | null;
     readonly currentDefaultProps: Record<string, unknown>;
+    readonly readOnlyStudio: boolean;
     readonly setDefaultProps: UpdaterFunction<Record<string, unknown>>;
 }>;

package/dist/components/InspectorPanel/DefaultInspector.js

@@ -18,7 +18,7 @@ const SegmentedControl_1 = require("../SegmentedControl");
 const VisualControlsContent_1 = require("../VisualControls/VisualControlsContent");
 const common_1 = require("./common");
 const styles_1 = require("./styles");
-const DefaultInspector = ({ composition, currentDefaultProps, setDefaultProps }) => {
+const DefaultInspector = ({ composition, currentDefaultProps, readOnlyStudio, setDefaultProps }) => {
     var _a, _b;
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const hasSelectedAsset = (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'asset';
@@ -70,7 +70,7 @@ const DefaultInspector = ({ composition, currentDefaultProps, setDefaultProps })
         showCannotSaveDefaultPropsWarning: canShowDefaultPropsSection,
     });
     if (hasSelectedAsset) {
-        return (jsx_runtime_1.jsx("div", { style: styles_1.scrollableContainer, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx("div", { style: styles_1.compositionSection, children: jsx_runtime_1.jsx(CurrentAsset_1.CurrentAsset, {}) }) }));
+        return (jsx_runtime_1.jsx("div", { style: styles_1.scrollableContainer, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx("div", { style: styles_1.compositionSection, children: jsx_runtime_1.jsx(CurrentAsset_1.CurrentAsset, { readOnlyStudio: readOnlyStudio }) }) }));
     }
     if (composition === null) {
         return jsx_runtime_1.jsx("div", { style: styles_1.container });

package/dist/components/InspectorPanel/KeyframeEasingNavigator.js

@@ -64,7 +64,7 @@ const chevronIcon = {
     height: 12,
     width: 8,
 };
-const disabledChevronColor = 'rgba(255, 255, 255, 0.25)';
+const disabledChevronColor = colors_1.WHITE_ALPHA_25;
 const NavigationChevron = ({ color, direction }) => {
     const path = direction === 'left' ? 'M6 1L2 6L6 11' : 'M2 1L6 6L2 11';
     return (jsx_runtime_1.jsx("svg", { viewBox: "0 0 8 12", style: chevronIcon, children: jsx_runtime_1.jsx("path", { d: path, fill: "none", stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5" }) }));

package/dist/components/InspectorPanel/common.js

@@ -37,7 +37,7 @@ exports.InspectorDetailRow = InspectorDetailRow;
 const inlineLabelButton = {
     alignItems: 'center',
     appearance: 'none',
-    backgroundColor: 'transparent',
+    backgroundColor: colors_1.TRANSPARENT,
     border: 'none',
     color: colors_1.LIGHT_TEXT,
     cursor: 'default',
@@ -69,7 +69,7 @@ const inlineLabelIcon = {
 };
 const InspectorInlineAction = ({ children, disabled, onClick, renderIcon }) => {
     const [hovered, setHovered] = react_1.default.useState(false);
-    const color = hovered && !disabled ? 'white' : colors_1.LIGHT_TEXT;
+    const color = hovered && !disabled ? colors_1.WHITE : colors_1.LIGHT_TEXT;
     const buttonStyle = react_1.default.useMemo(() => ({
         ...(disabled ? inlineLabelButtonDisabled : inlineLabelButton),
         color,

package/dist/components/InspectorPanel/styles.js

@@ -5,7 +5,7 @@ const colors_1 = require("../../helpers/colors");
 const InspectorPanelLayout_1 = require("../InspectorPanelLayout");
 exports.container = {
     backgroundColor: colors_1.BACKGROUND,
-    color: 'white',
+    color: colors_1.WHITE,
     display: 'flex',
     flex: 1,
     flexDirection: 'column',
@@ -55,7 +55,7 @@ exports.sequenceHeaderTitle = {
     alignSelf: 'stretch',
     backgroundColor: colors_1.BACKGROUND,
     border: 'none',
-    color: 'white',
+    color: colors_1.WHITE,
     display: 'flex',
     fontFamily: 'sans-serif',
     fontSize: 12,
@@ -170,7 +170,7 @@ exports.detailLabel = {
     fontSize: 13,
 };
 exports.detailValue = {
-    color: 'white',
+    color: colors_1.WHITE,
     fontSize: 13,
     fontVariantNumeric: 'tabular-nums',
     minWidth: 0,

package/dist/components/InspectorPanel.d.ts

@@ -4,5 +4,6 @@ import type { UpdaterFunction } from './RenderModal/SchemaEditor/ZodSwitch';
 export declare const InspectorPanel: React.FC<{
     readonly composition: _InternalTypes['AnyComposition'] | null;
     readonly currentDefaultProps: Record<string, unknown>;
+    readonly readOnlyStudio: boolean;
     readonly setDefaultProps: UpdaterFunction<Record<string, unknown>>;
 }>;

package/dist/components/InspectorPanel.js

@@ -9,11 +9,11 @@ const inspector_selection_1 = require("./InspectorPanel/inspector-selection");
 const SelectedInspector_1 = require("./InspectorPanel/SelectedInspector");
 const styles_1 = require("./InspectorPanel/styles");
 const TimelineSelection_1 = require("./Timeline/TimelineSelection");
-const InspectorPanel = ({ composition, currentDefaultProps, setDefaultProps }) => {
+const InspectorPanel = ({ composition, currentDefaultProps, readOnlyStudio, setDefaultProps }) => {
     const { selectedItems } = (0, TimelineSelection_1.useTimelineSelection)();
     const sameSequenceInspectorSelection = (0, react_1.useMemo)(() => (0, inspector_selection_1.getSameSequenceInspectorSelection)(selectedItems), [selectedItems]);
     if (selectedItems.length === 0) {
-        return (jsx_runtime_1.jsx(DefaultInspector_1.DefaultInspector, { composition: composition, currentDefaultProps: currentDefaultProps, setDefaultProps: setDefaultProps }));
+        return (jsx_runtime_1.jsx(DefaultInspector_1.DefaultInspector, { composition: composition, currentDefaultProps: currentDefaultProps, readOnlyStudio: readOnlyStudio, setDefaultProps: setDefaultProps }));
     }
     if (selectedItems.length > 1) {
         if (sameSequenceInspectorSelection) {

package/dist/components/InspectorSequenceSection.js

@@ -47,7 +47,7 @@ const TimelineExpandedRow_1 = require("./Timeline/TimelineExpandedRow");
 const TimelineSelection_1 = require("./Timeline/TimelineSelection");
 const use_timeline_expanded_tree_1 = require("./Timeline/use-timeline-expanded-tree");
 const container = {
-    color: 'white',
+    color: colors_1.WHITE,
     display: 'flex',
     flexDirection: 'column',
     fontFamily: 'Arial, Helvetica, sans-serif',

package/dist/components/InstallablePackage.js

@@ -13,7 +13,7 @@ const InstallablePackageComp = ({ isInstalled, pkg, link, description }) => {
         }, children: [
             jsx_runtime_1.jsx("a", { href: link, style: {
                     fontSize: FONT_SIZE,
-                    color: colors_1.TEXT_COLOR,
+                    color: colors_1.WHITE_HEX,
                     textDecoration: 'none',
                 }, target: "_blank", children: pkg }), ' ', isInstalled ? (jsx_runtime_1.jsx("span", { style: { opacity: 0.3, fontSize: 'inherit' }, children: "(installed)" })) : null, jsx_runtime_1.jsx("br", {}), jsx_runtime_1.jsx("span", { style: { color: colors_1.LIGHT_TEXT, fontSize: FONT_SIZE }, children: description })
         ] }));

package/dist/components/KeyboardShortcutsExplainer.js

@@ -15,16 +15,16 @@ const left = {
 const key = {
     background: colors_1.INPUT_BACKGROUND,
     padding: '3px 6px',
-    color: 'white',
+    color: colors_1.WHITE,
     borderRadius: 3,
-    border: '1px solid ' + colors_1.INPUT_BORDER_COLOR_UNHOVERED,
+    border: '1px solid ' + colors_1.BLACK_ALPHA_60,
     borderBottomWidth: 3,
     fontSize: 14,
     fontFamily: 'monospace',
 };
 const right = {
     fontSize: 14,
-    color: '#eee',
+    color: colors_1.KEYBOARD_SHORTCUT_KEY_COLOR,
 };
 const container = {
     paddingLeft: 20,
@@ -34,7 +34,7 @@ const container = {
 };
 const title = {
     fontWeight: 'bold',
-    color: 'white',
+    color: colors_1.WHITE,
     fontSize: 14,
     marginBottom: 10,
 };
@@ -42,7 +42,7 @@ const keyboardShortcutsDisabled = {
     padding: 12,
     width: '100%',
     fontSize: 14,
-    backgroundColor: 'rgba(255, 255, 255, 0.1)',
+    backgroundColor: colors_1.WHITE_ALPHA_10,
 };
 const ul = {
     marginTop: 0,

package/dist/components/LoopToggle.js

@@ -14,6 +14,6 @@ const LoopToggle = ({ loop, setLoop }) => {
             return !c;
         });
     }, [setLoop]);
-    return (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, onClick: onClick, children: jsx_runtime_1.jsx("svg", { viewBox: "0 0 512 512", style: { width: 18, height: 18 }, children: jsx_runtime_1.jsx("path", { fill: loop ? colors_1.BLUE : 'white', d: "M493.544 181.463c11.956 22.605 18.655 48.4 18.452 75.75C511.339 345.365 438.56 416 350.404 416H192v47.495c0 22.475-26.177 32.268-40.971 17.475l-80-80c-9.372-9.373-9.372-24.569 0-33.941l80-80C166.138 271.92 192 282.686 192 304v48h158.875c52.812 0 96.575-42.182 97.12-94.992.155-15.045-3.17-29.312-9.218-42.046-4.362-9.185-2.421-20.124 4.8-27.284 4.745-4.706 8.641-8.555 11.876-11.786 11.368-11.352 30.579-8.631 38.091 5.571zM64.005 254.992c.545-52.81 44.308-94.992 97.12-94.992H320v47.505c0 22.374 26.121 32.312 40.971 17.465l80-80c9.372-9.373 9.372-24.569 0-33.941l-80-80C346.014 16.077 320 26.256 320 48.545V96H161.596C73.44 96 .661 166.635.005 254.788c-.204 27.35 6.495 53.145 18.452 75.75 7.512 14.202 26.723 16.923 38.091 5.57 3.235-3.231 7.13-7.08 11.876-11.786 7.22-7.16 9.162-18.098 4.8-27.284-6.049-12.735-9.374-27.001-9.219-42.046z" }) }) }));
+    return (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, onClick: onClick, children: jsx_runtime_1.jsx("svg", { viewBox: "0 0 512 512", style: { width: 18, height: 18 }, children: jsx_runtime_1.jsx("path", { fill: loop ? colors_1.BLUE : colors_1.WHITE, d: "M493.544 181.463c11.956 22.605 18.655 48.4 18.452 75.75C511.339 345.365 438.56 416 350.404 416H192v47.495c0 22.475-26.177 32.268-40.971 17.475l-80-80c-9.372-9.373-9.372-24.569 0-33.941l80-80C166.138 271.92 192 282.686 192 304v48h158.875c52.812 0 96.575-42.182 97.12-94.992.155-15.045-3.17-29.312-9.218-42.046-4.362-9.185-2.421-20.124 4.8-27.284 4.745-4.706 8.641-8.555 11.876-11.786 11.368-11.352 30.579-8.631 38.091 5.571zM64.005 254.992c.545-52.81 44.308-94.992 97.12-94.992H320v47.505c0 22.374 26.121 32.312 40.971 17.465l80-80c9.372-9.373 9.372-24.569 0-33.941l-80-80C346.014 16.077 320 26.256 320 48.545V96H161.596C73.44 96 .661 166.635.005 254.788c-.204 27.35 6.495 53.145 18.452 75.75 7.512 14.202 26.723 16.923 38.091 5.57 3.235-3.231 7.13-7.08 11.876-11.786 7.22-7.16 9.162-18.098 4.8-27.284-6.049-12.735-9.374-27.001-9.219-42.046z" }) }) }));
 };
 exports.LoopToggle = LoopToggle;

package/dist/components/Menu/MenuDivider.js

@@ -7,7 +7,7 @@ const menuDivider = {
     marginTop: 4,
     marginBottom: 4,
     height: 1,
-    backgroundColor: colors_1.INPUT_BORDER_COLOR_HOVERED,
+    backgroundColor: colors_1.WHITE_ALPHA_05,
 };
 const MenuDivider = () => {
     return jsx_runtime_1.jsx("div", { style: menuDivider });

package/dist/components/Menu/MenuItem.js

@@ -16,7 +16,7 @@ const portals_1 = require("./portals");
 const styles_1 = require("./styles");
 const container = {
     fontSize: 13,
-    color: 'white',
+    color: colors_1.WHITE,
     paddingLeft: 10,
     paddingRight: 10,
     cursor: 'default',

package/dist/components/Menu/MenuSubItem.js

@@ -56,7 +56,7 @@ const MenuSubItem = ({ label, leaveLeftSpace, leftItem, onActionChosen, id, sele
     const style = (0, react_1.useMemo)(() => {
         return {
             ...container,
-            backgroundColor: selected && !disabled ? colors_1.CLEAR_HOVER : 'transparent',
+            backgroundColor: selected && !disabled ? colors_1.WHITE_ALPHA_06 : colors_1.TRANSPARENT,
             opacity: disabled ? 0.5 : 1,
             cursor: disabled ? 'not-allowed' : 'default',
         };

package/dist/components/Menu/styles.js

@@ -9,12 +9,12 @@ exports.MAX_MOBILE_MENU_WIDTH = 300;
 const menuContainer = {
     backgroundColor: colors_1.BACKGROUND,
     position: 'fixed',
-    color: 'white',
+    color: colors_1.WHITE,
     userSelect: 'none',
     WebkitUserSelect: 'none',
 };
-exports.SHADOW_TOWARDS_BOTTOM = '0 2px 8px rgba(0, 0, 0, 0.5)';
-exports.SHADOW_TOWARDS_TOP = '0 -2px 8px rgba(0, 0, 0, 0.5)';
+exports.SHADOW_TOWARDS_BOTTOM = colors_1.SHADOW_BLACK_ALPHA_50_TOWARDS_BOTTOM;
+exports.SHADOW_TOWARDS_TOP = colors_1.SHADOW_BLACK_ALPHA_50_TOWARDS_TOP;
 exports.menuContainerTowardsBottom = {
     ...menuContainer,
     boxShadow: exports.SHADOW_TOWARDS_BOTTOM,

package/dist/components/MenuToolbar.js

@@ -17,8 +17,8 @@ const row = {
     alignItems: 'center',
     flexDirection: 'row',
     display: 'flex',
-    color: 'white',
-    borderBottom: '1px solid black',
+    color: colors_1.WHITE,
+    borderBottom: colors_1.BORDER_BLACK,
     boxSizing: 'border-box',
     fontSize: 13,
     height: exports.MENU_TOOLBAR_HEIGHT,

package/dist/components/ModalButton.js

@@ -7,7 +7,7 @@ const colors_1 = require("../helpers/colors");
 const Button_1 = require("./Button");
 const buttonStyle = {
     backgroundColor: colors_1.BLUE,
-    color: 'white',
+    color: colors_1.WHITE,
 };
 const ModalButton = (props) => {
     const style = (0, react_1.useMemo)(() => {

package/dist/components/ModalContainer.js

@@ -15,7 +15,7 @@ const getMaxModalHeight = (height) => {
 };
 exports.getMaxModalHeight = getMaxModalHeight;
 const backgroundOverlay = {
-    backgroundColor: 'rgba(255, 255, 255, 0.2)',
+    backgroundColor: colors_1.WHITE_ALPHA_20,
     backdropFilter: `blur(1px)`,
     position: 'fixed',
     height: '100%',
@@ -25,8 +25,8 @@ const backgroundOverlay = {
 };
 const panel = {
     backgroundColor: colors_1.BACKGROUND,
-    boxShadow: '0 0 4px black',
-    color: 'white',
+    boxShadow: colors_1.SHADOW_BLACK,
+    color: colors_1.WHITE,
     margin: 'auto',
 };
 const ModalContainer = ({ children, onEscape, onOutsideClick, noZIndex }) => {

package/dist/components/ModalFooter.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ModalFooterContainer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../helpers/colors");
 const content = {
     padding: 12,
     paddingRight: 12,
@@ -10,6 +11,6 @@ const content = {
     minWidth: 500,
 };
 const ModalFooterContainer = ({ children }) => {
-    return (jsx_runtime_1.jsx("div", { style: { ...content, borderTop: '1px solid black' }, children: children }));
+    return jsx_runtime_1.jsx("div", { style: { ...content, borderTop: colors_1.BORDER_BLACK }, children: children });
 };
 exports.ModalFooterContainer = ModalFooterContainer;

package/dist/components/ModalHeader.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ModalHeader = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const colors_1 = require("../helpers/colors");
 const modals_1 = require("../state/modals");
 const layout_1 = require("./layout");
 const CancelButton_1 = require("./NewComposition/CancelButton");
@@ -12,11 +13,11 @@ const container = {
     alignItems: 'center',
     padding: '12px 16px',
     width: '100%',
-    borderBottom: '1px solid black',
+    borderBottom: colors_1.BORDER_BLACK,
 };
 const titleStyle = {
     fontSize: 14,
-    color: 'white',
+    color: colors_1.WHITE,
 };
 const icon = {
     height: 20,

package/dist/components/Modals.js

@@ -16,6 +16,7 @@ const DeleteComposition_1 = require("./NewComposition/DeleteComposition");
 const DeleteFolder_1 = require("./NewComposition/DeleteFolder");
 const DuplicateComposition_1 = require("./NewComposition/DuplicateComposition");
 const NewComposition_1 = require("./NewComposition/NewComposition");
+const NewFolder_1 = require("./NewComposition/NewFolder");
 const RenameComposition_1 = require("./NewComposition/RenameComposition");
 const RenameFolder_1 = require("./NewComposition/RenameFolder");
 const RenameStaticFile_1 = require("./NewComposition/RenameStaticFile");
@@ -31,7 +32,7 @@ const Modals = ({ readOnlyStudio }) => {
     const { selectedModal: modalContextType } = (0, react_1.useContext)(modals_1.ModalsContext);
     const canRender = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx).previewServerState.type ===
         'connected';
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'new-comp' && (jsx_runtime_1.jsx(NewComposition_1.NewComposition, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'duplicate-comp' && (jsx_runtime_1.jsx(DuplicateComposition_1.DuplicateComposition, { compositionType: modalContextType.compositionType, compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-comp' && (jsx_runtime_1.jsx(DeleteComposition_1.DeleteComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'rename-comp' && (jsx_runtime_1.jsx(RenameComposition_1.RenameComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-folder' && (jsx_runtime_1.jsx(DeleteFolder_1.DeleteFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-folder' && (jsx_runtime_1.jsx(RenameFolder_1.RenameFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-static-file' && (jsx_runtime_1.jsx(RenameStaticFile_1.RenameStaticFileModal, { relativePath: modalContextType.relativePath })), modalContextType && modalContextType.type === 'input-props-override' && (jsx_runtime_1.jsx(OverrideInputProps_1.OverrideInputPropsModal, {})), modalContextType && modalContextType.type === 'keyframe-settings' && (jsx_runtime_1.jsx(KeyframeSettingsModal_1.KeyframeSettingsModal, { state: modalContextType })), modalContextType && modalContextType.type === 'web-render' && (jsx_runtime_1.jsx(WebRenderModal_1.WebRenderModalWithLoader, { ...modalContextType })), modalContextType &&
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'new-comp' && (jsx_runtime_1.jsx(NewComposition_1.NewComposition, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'new-folder' && (jsx_runtime_1.jsx(NewFolder_1.NewFolder, { parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'duplicate-comp' && (jsx_runtime_1.jsx(DuplicateComposition_1.DuplicateComposition, { compositionType: modalContextType.compositionType, compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-comp' && (jsx_runtime_1.jsx(DeleteComposition_1.DeleteComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'rename-comp' && (jsx_runtime_1.jsx(RenameComposition_1.RenameComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-folder' && (jsx_runtime_1.jsx(DeleteFolder_1.DeleteFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-folder' && (jsx_runtime_1.jsx(RenameFolder_1.RenameFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-static-file' && (jsx_runtime_1.jsx(RenameStaticFile_1.RenameStaticFileModal, { relativePath: modalContextType.relativePath })), modalContextType && modalContextType.type === 'input-props-override' && (jsx_runtime_1.jsx(OverrideInputProps_1.OverrideInputPropsModal, {})), modalContextType && modalContextType.type === 'keyframe-settings' && (jsx_runtime_1.jsx(KeyframeSettingsModal_1.KeyframeSettingsModal, { state: modalContextType })), modalContextType && modalContextType.type === 'web-render' && (jsx_runtime_1.jsx(WebRenderModal_1.WebRenderModalWithLoader, { ...modalContextType })), modalContextType &&
                 modalContextType.type === 'server-render' &&
                 (canRender || modalContextType.readOnlyStudio) ? (jsx_runtime_1.jsx(ServerRenderModal_1.RenderModalWithLoader, { readOnlyStudio: (_a = modalContextType.readOnlyStudio) !== null && _a !== void 0 ? _a : false, initialFrame: modalContextType.initialFrame, initialDarkMode: modalContextType.initialDarkMode, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialJpegQuality: modalContextType.initialJpegQuality, initialScale: modalContextType.initialScale, initialLogLevel: modalContextType.initialLogLevel, initialOffthreadVideoCacheSizeInBytes: modalContextType.initialOffthreadVideoCacheSizeInBytes, initialOffthreadVideoThreads: modalContextType.initialOffthreadVideoThreads, initialMediaCacheSizeInBytes: modalContextType.initialMediaCacheSizeInBytes, initialConcurrency: modalContextType.initialConcurrency, maxConcurrency: modalContextType.maxConcurrency, minConcurrency: modalContextType.minConcurrency, initialStillImageFormat: modalContextType.initialStillImageFormat, initialMuted: modalContextType.initialMuted, initialEnforceAudioTrack: modalContextType.initialEnforceAudioTrack, initialProResProfile: modalContextType.initialProResProfile, initialx264Preset: modalContextType.initialx264Preset, initialGopSize: modalContextType.initialGopSize, initialPixelFormat: modalContextType.initialPixelFormat, initialAudioBitrate: modalContextType.initialAudioBitrate, initialVideoBitrate: modalContextType.initialVideoBitrate, initialEveryNthFrame: modalContextType.initialEveryNthFrame, initialNumberOfGifLoops: modalContextType.initialNumberOfGifLoops, initialDelayRenderTimeout: modalContextType.initialDelayRenderTimeout, initialEnvVariables: modalContextType.initialEnvVariables, initialDisableWebSecurity: modalContextType.initialDisableWebSecurity, initialGl: modalContextType.initialOpenGlRenderer, initialHeadless: modalContextType.initialHeadless, initialIgnoreCertificateErrors: modalContextType.initialIgnoreCertificateErrors, initialEncodingBufferSize: modalContextType.initialEncodingBufferSize, initialEncodingMaxRate: modalContextType.initialEncodingMaxRate, initialUserAgent: modalContextType.initialUserAgent, initialColorSpace: modalContextType.initialColorSpace, initialMultiProcessOnLinux: modalContextType.initialMultiProcessOnLinux, initialRepro: modalContextType.initialRepro, initialBeep: modalContextType.initialBeep, initialForSeamlessAacConcatenation: modalContextType.initialForSeamlessAacConcatenation, defaultProps: modalContextType.defaultProps, inFrameMark: modalContextType.inFrameMark, outFrameMark: modalContextType.outFrameMark, defaultConfigurationAudioCodec: modalContextType.defaultConfigurationAudioCodec, defaultConfigurationVideoCodec: modalContextType.defaultConfigurationVideoCodec, renderTypeOfLastRender: modalContextType.renderTypeOfLastRender, defaultMetadata: modalContextType.defaulMetadata, initialHardwareAcceleration: modalContextType.initialHardwareAcceleration, initialSampleRate: modalContextType.initialSampleRate, initialChromeMode: modalContextType.initialChromeMode, renderDefaults: modalContextType.renderDefaults })) : null, modalContextType && modalContextType.type === 'render-progress' && (jsx_runtime_1.jsx(RenderStatusModal_1.RenderStatusModal, { jobId: modalContextType.jobId })), modalContextType && modalContextType.type === 'update' && (jsx_runtime_1.jsx(UpdateModal_1.UpdateModal, { info: modalContextType.info, knownBugs: modalContextType.knownBugs })), modalContextType && modalContextType.type === 'install-packages' && (jsx_runtime_1.jsx(InstallPackage_1.InstallPackageModal, { packageManager: modalContextType.packageManager })), modalContextType && modalContextType.type === 'quick-switcher' && (jsx_runtime_1.jsx(QuickSwitcher_1.default, { readOnlyStudio: readOnlyStudio, invocationTimestamp: modalContextType.invocationTimestamp, initialMode: modalContextType.mode })), modalContextType && modalContextType.type === 'add-effect' && (jsx_runtime_1.jsx(EffectPickerModal_1.EffectPickerModal, { state: modalContextType })), modalContextType && modalContextType.type === 'confirmation-dialog' && (jsx_runtime_1.jsx(ConfirmationDialog_1.ConfirmationDialog, { state: modalContextType })), process.env.ASK_AI_ENABLED && jsx_runtime_1.jsx(AskAiModal_1.AskAiModal, {})] }));
 };

package/dist/components/NewComposition/CancelButton.js

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

package/dist/components/NewComposition/ComboBox.js

@@ -167,15 +167,15 @@ const Combobox = ({ values, selectedId, style: customStyle, title, small = false
             ...(customStyle !== null && customStyle !== void 0 ? customStyle : {}),
             userSelect: 'none',
             WebkitUserSelect: 'none',
-            color: 'white',
+            color: colors_1.WHITE,
             display: 'inline-flex',
             flexDirection: 'row',
             alignItems: 'center',
             borderColor: opened
                 ? colors_1.SELECTED_BACKGROUND
                 : hovered
-                    ? colors_1.INPUT_BORDER_COLOR_HOVERED
-                    : colors_1.INPUT_BORDER_COLOR_UNHOVERED,
+                    ? colors_1.WHITE_ALPHA_05
+                    : colors_1.BLACK_ALPHA_60,
         };
     }, [customStyle, hovered, opened, small]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [

package/dist/components/NewComposition/InputDragger.js

@@ -84,8 +84,8 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
     const style = (0, react_1.useMemo)(() => {
         return {
             ...RemInput_1.inputBaseStyle,
-            backgroundColor: 'transparent',
-            borderColor: 'transparent',
+            backgroundColor: colors_1.TRANSPARENT,
+            borderColor: colors_1.TRANSPARENT,
             padding: '4px 6px',
             ...{ outline: 'none' },
         };
@@ -113,6 +113,14 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
         }
         setInputFallback(true);
     }, []);
+    const onKeyDown = (0, react_1.useCallback)((e) => {
+        if (e.key !== 'Enter') {
+            return;
+        }
+        e.preventDefault();
+        e.stopPropagation();
+        setInputFallback(true);
+    }, []);
     const onEscape = (0, react_1.useCallback)(() => {
         setInputFallback(false);
     }, []);
@@ -225,6 +233,6 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
     if (inputFallback) {
         return (jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onEscape: onEscape, onOutsideClick: noop_1.noop, children: jsx_runtime_1.jsx(RemInput_1.RemotionInput, { ref: fallbackRef, autoFocus: true, onKeyPress: onKeyPress, onBlur: onBlur, onChange: onInputChange, min: _min, max: _max, step: deriveStep, defaultValue: value, status: status, pattern: '[0-9]*[.]?[0-9]*', rightAlign: rightAlign, small: small, ...props }) }));
     }
-    return (jsx_runtime_1.jsx("button", { ref: ref, type: "button", className: '__remotion_input_dragger', style: style, onClick: onClick, onFocus: onFocus, onPointerDown: onPointerDown, children: jsx_runtime_1.jsx("span", { style: span, children: formatter(value) }) }));
+    return (jsx_runtime_1.jsx("button", { ref: ref, type: "button", className: '__remotion_input_dragger', style: style, onClick: onClick, onFocus: onFocus, onKeyDown: onKeyDown, onPointerDown: onPointerDown, children: jsx_runtime_1.jsx("span", { style: span, children: formatter(value) }) }));
 };
 exports.InputDragger = react_1.default.forwardRef(InputDraggerForwardRefFn);

package/dist/components/NewComposition/MenuContent.js

@@ -15,7 +15,7 @@ const BORDER_SIZE = 1;
 const container = {
     paddingTop: styles_1.MENU_VERTICAL_PADDING,
     paddingBottom: styles_1.MENU_VERTICAL_PADDING,
-    border: `${BORDER_SIZE}px solid ${colors_1.INPUT_BORDER_COLOR_UNHOVERED}`,
+    border: `${BORDER_SIZE}px solid ${colors_1.BLACK_ALPHA_60}`,
     marginLeft: 0 - BORDER_SIZE,
     overflowY: 'auto',
     overflowX: 'hidden',

package/dist/components/NewComposition/NewComposition.js

@@ -23,6 +23,9 @@ const content = {
     fontSize: 13,
     minWidth: 500,
 };
+const folderPathStyle = {
+    fontSize: 14,
+};
 const NewCompositionLoaded = ({ folderName, parentName, stack }) => {
     const { compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const [newId, setName] = (0, react_1.useState)(() => (0, use_create_composition_1.getUniqueCompositionName)(compositions));
@@ -89,7 +92,7 @@ const NewCompositionLoaded = ({ folderName, parentName, stack }) => {
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
             jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: "New composition" }), jsx_runtime_1.jsxs("form", { onSubmit: onSubmit, children: [
                     jsx_runtime_1.jsxs("div", { style: content, children: [folderPath ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
-                                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Folder" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: folderPath })
+                                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Folder" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx("span", { style: folderPathStyle, children: folderPath }) })
                                 ] })) : null, jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                                     jsx_runtime_1.jsx("div", { style: layout_2.label, children: "ID" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsxs(InputAndValidationContainer_1.InputAndValidationContainer, { children: [
                                                 jsx_runtime_1.jsx(RemInput_1.RemotionInput, { value: newId, onChange: onNameChange, type: "text", autoFocus: true, placeholder: "Composition ID", status: "ok", rightAlign: true }), compNameErrMessage ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [

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

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const NewFolder: React.FC<{
+    readonly parentName: string | null;
+    readonly stack: string | null;
+}>;

package/dist/components/NewComposition/NewFolder.js

@@ -0,0 +1,86 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NewFolder = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const get_folder_id_1 = require("../../helpers/get-folder-id");
+const validate_new_folder_name_1 = require("../../helpers/validate-new-folder-name");
+const layout_1 = require("../layout");
+const ModalFooter_1 = require("../ModalFooter");
+const ModalHeader_1 = require("../ModalHeader");
+const layout_2 = require("../RenderModal/layout");
+const actions_1 = require("../RenderQueue/actions");
+const CodemodFooter_1 = require("./CodemodFooter");
+const DismissableModal_1 = require("./DismissableModal");
+const InputAndValidationContainer_1 = require("./InputAndValidationContainer");
+const RemInput_1 = require("./RemInput");
+const ValidationMessage_1 = require("./ValidationMessage");
+const content = {
+    padding: 12,
+    paddingRight: 12,
+    flex: 1,
+    fontSize: 13,
+    minWidth: 500,
+};
+const getUniqueFolderName = ({ folders, parentName, }) => {
+    let counter = 1;
+    while (true) {
+        const name = counter === 1 ? 'NewFolder' : `NewFolder${counter}`;
+        const err = (0, validate_new_folder_name_1.validateNewFolderName)({ folders, newName: name, parentName });
+        if (!err) {
+            return name;
+        }
+        counter++;
+    }
+};
+const NewFolder = ({ parentName, stack }) => {
+    const { folders } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const [newName, setName] = (0, react_1.useState)(() => getUniqueFolderName({ folders, parentName }));
+    const inputRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        const input = inputRef.current;
+        if (!input)
+            return;
+        input.select();
+    }, []);
+    const onNameChange = (0, react_1.useCallback)((e) => {
+        setName(e.target.value);
+    }, []);
+    const folderNameErrMessage = (0, validate_new_folder_name_1.validateNewFolderName)({
+        folders,
+        newName,
+        parentName,
+    });
+    const valid = folderNameErrMessage === null;
+    const codemod = (0, react_1.useMemo)(() => {
+        return {
+            type: 'new-folder',
+            folderName: newName,
+            parentName,
+        };
+    }, [newName, parentName]);
+    const onSubmit = (0, react_1.useCallback)((e) => {
+        e.preventDefault();
+    }, []);
+    const folderId = (0, get_folder_id_1.getFolderId)({ folderName: newName, parentName });
+    return (jsx_runtime_1.jsxs(DismissableModal_1.DismissableModal, { children: [
+            jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: "New folder" }), jsx_runtime_1.jsxs("form", { onSubmit: onSubmit, children: [
+                    jsx_runtime_1.jsxs("div", { style: content, children: [parentName ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+                                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Parent" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: parentName })
+                                ] })) : null, jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+                                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Name" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsxs(InputAndValidationContainer_1.InputAndValidationContainer, { children: [
+                                                jsx_runtime_1.jsx(RemInput_1.RemotionInput, { ref: inputRef, value: newName, onChange: onNameChange, type: "text", autoFocus: true, placeholder: "Folder name", status: "ok", rightAlign: true }), folderNameErrMessage ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                                                        jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: folderNameErrMessage, type: "error" })
+                                                    ] })) : null] }) })
+                                ] })
+                        ] }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { loadingNotification: 'Creating folder...', errorNotification: 'Could not create folder', successNotification: `Created folder ${folderId}`, genericSubmitLabel: 'Add to root file', submitLabel: ({ relativeRootPath }) => `Add to ${relativeRootPath}`, codemod: codemod, stack: stack, valid: valid, onSuccess: null, fallbackToRootFile: true, applyCodemod: ({ signal, symbolicatedStack }) => (0, actions_1.applyCodemod)({
+                                codemod,
+                                dryRun: false,
+                                signal,
+                                symbolicatedStack,
+                            }) }) })
+                ] })
+        ] }));
+};
+exports.NewFolder = NewFolder;

package/dist/components/NewComposition/RemInput.js

@@ -15,7 +15,7 @@ const RightAlignInput = ({ children }) => {
 exports.RightAlignInput = RightAlignInput;
 exports.inputBaseStyle = {
     padding: `${exports.INPUT_HORIZONTAL_PADDING}px 10px`,
-    color: 'white',
+    color: colors_1.WHITE,
     borderStyle: 'solid',
     borderWidth: 1,
     fontSize: 14,
@@ -32,8 +32,8 @@ const getInputBorderColor = ({ status, isFocused, isHovered, }) => status === 'w
         : isFocused
             ? colors_1.SELECTED_BACKGROUND
             : isHovered
-                ? colors_1.INPUT_BORDER_COLOR_HOVERED
-                : colors_1.INPUT_BORDER_COLOR_UNHOVERED;
+                ? colors_1.WHITE_ALPHA_05
+                : colors_1.BLACK_ALPHA_60;
 exports.getInputBorderColor = getInputBorderColor;
 const RemInputForwardRef = ({ status, rightAlign, small = false, ...props }, ref) => {
     const [isFocused, setIsFocused] = (0, react_1.useState)(false);

package/dist/components/NewComposition/RemTextarea.js

@@ -9,7 +9,7 @@ const is_menu_item_1 = require("../Menu/is-menu-item");
 const RemInput_1 = require("../NewComposition/RemInput");
 const inputBaseStyle = {
     padding: `${RemInput_1.INPUT_HORIZONTAL_PADDING}px 10px`,
-    color: 'white',
+    color: colors_1.WHITE,
     borderStyle: 'solid',
     borderWidth: 1,
     fontSize: 14,