@remotion/studio 4.0.502 → 4.0.504

package/dist/components/PlayPause.js

@@ -5,7 +5,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const player_1 = require("@remotion/player");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
-const colors_1 = require("../helpers/colors");
 const is_current_selected_still_1 = require("../helpers/is-current-selected-still");
 const use_keybinding_1 = require("../helpers/use-keybinding");
 const jump_to_start_1 = require("../icons/jump-to-start");
@@ -19,16 +18,13 @@ const imperative_state_1 = require("./Timeline/imperative-state");
 const timeline_scroll_logic_1 = require("./Timeline/timeline-scroll-logic");
 const backStyle = {
     height: 18,
-    color: colors_1.WHITE,
 };
 const forwardBackStyle = {
     height: 16,
-    color: colors_1.WHITE,
 };
 const iconButton = {
     height: 14,
     width: 14,
-    color: colors_1.WHITE,
 };
 const PlayPause = ({ playbackRate, loop, bufferStateDelayInMilliseconds, muted, hideNavigationControls, }) => {
     const { inFrame, outFrame } = (0, in_out_1.useTimelineInOutFramePosition)();
@@ -198,6 +194,6 @@ const PlayPause = ({ playbackRate, loop, bufferStateDelayInMilliseconds, muted,
             stopped = true;
         };
     }, [bufferStateDelayInMilliseconds, emitter]);
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [hideNavigationControls ? null : (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": "Jump to beginning", title: "Jump to beginning", disabled: !videoConfig || isFirstFrame, onClick: jumpToStart, children: jsx_runtime_1.jsx(jump_to_start_1.JumpToStart, { style: backStyle }) })), hideNavigationControls ? null : (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": "Step back one frame", title: "Step back one frame", disabled: !videoConfig || isFirstFrame, onClick: oneFrameBack, children: jsx_runtime_1.jsx(step_back_1.StepBack, { style: forwardBackStyle }) })), jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": playing ? 'Pause' : 'Play', title: playing ? 'Pause' : 'Play', onClick: playing ? pause : play, disabled: !videoConfig, children: playing ? (showBufferIndicator ? (jsx_runtime_1.jsx(player_1.PlayerInternals.BufferingIndicator, { type: "studio" })) : (jsx_runtime_1.jsx(pause_1.Pause, { style: iconButton }))) : (jsx_runtime_1.jsx(play_1.Play, { style: iconButton })) }), hideNavigationControls ? null : (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": "Step forward one frame", title: "Step forward one frame", disabled: !videoConfig || isLastFrame, onClick: oneFrameForward, children: jsx_runtime_1.jsx(step_forward_1.StepForward, { style: forwardBackStyle }) }))] }));
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [hideNavigationControls ? null : (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": "Jump to beginning", title: "Jump to beginning", disabled: !videoConfig || isFirstFrame, onClick: jumpToStart, children: (color) => jsx_runtime_1.jsx(jump_to_start_1.JumpToStart, { style: backStyle, color: color }) })), hideNavigationControls ? null : (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": "Step back one frame", title: "Step back one frame", disabled: !videoConfig || isFirstFrame, onClick: oneFrameBack, children: (color) => jsx_runtime_1.jsx(step_back_1.StepBack, { style: forwardBackStyle, color: color }) })), jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": playing ? 'Pause' : 'Play', title: playing ? 'Pause' : 'Play', onClick: playing ? pause : play, disabled: !videoConfig, children: (color) => playing ? (showBufferIndicator ? (jsx_runtime_1.jsx(player_1.PlayerInternals.BufferingIndicator, { type: "studio", color: color })) : (jsx_runtime_1.jsx(pause_1.Pause, { style: iconButton, color: color }))) : (jsx_runtime_1.jsx(play_1.Play, { style: iconButton, color: color })) }), hideNavigationControls ? null : (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": "Step forward one frame", title: "Step forward one frame", disabled: !videoConfig || isLastFrame, onClick: oneFrameForward, children: (color) => jsx_runtime_1.jsx(step_forward_1.StepForward, { style: forwardBackStyle, color: color }) }))] }));
 };
 exports.PlayPause = PlayPause;

package/dist/components/PlaybackRateSelector.js

@@ -4,6 +4,7 @@ exports.PlaybackRateSelector = exports.usePlaybackRateMenuItems = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const colors_1 = require("../helpers/colors");
 const is_current_selected_still_1 = require("../helpers/is-current-selected-still");
 const Checkmark_1 = require("../icons/Checkmark");
 const playbackrate_1 = require("../state/playbackrate");
@@ -65,6 +66,6 @@ const PlaybackRateSelector = ({ playbackRate, setPlaybackRate, }) => {
     if (isStill || canvasContent === null || canvasContent.type === 'asset') {
         return null;
     }
-    return (jsx_runtime_1.jsx("div", { style: style, "aria-label": accessibilityLabel, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { size: "compact", title: accessibilityLabel, style: comboStyle, selectedId: selectedId, values: items }) }));
+    return (jsx_runtime_1.jsx("div", { style: style, "aria-label": accessibilityLabel, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { size: "compact", title: accessibilityLabel, style: comboStyle, selectedId: selectedId, values: items, unhoveredIconColor: colors_1.WHITE_ALPHA_80 }) }));
 };
 exports.PlaybackRateSelector = PlaybackRateSelector;

package/dist/components/PreviewToolbar.js

@@ -25,7 +25,6 @@ const PreviewToolbarOverflowButton_1 = require("./PreviewToolbarOverflowButton")
 const RenderButton_1 = require("./RenderButton");
 const SizeSelector_1 = require("./SizeSelector");
 const SnappingToggle_1 = require("./SnappingToggle");
-const TimelineZoomControls_1 = require("./Timeline/TimelineZoomControls");
 const TimelineInOutToggle_1 = require("./TimelineInOutToggle");
 const TOOLBAR_HEIGHT = 40;
 const container = {
@@ -80,12 +79,14 @@ const PreviewToolbar = ({ readOnlyStudio, bufferStateDelayInMilliseconds }) => {
     const playPause = (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(PlayPause_1.PlayPause, { bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds, loop: loop, playbackRate: playbackRate, muted: playerMuted, hideNavigationControls: isMobileLayout }) }));
     return (jsx_runtime_1.jsxs("div", { style: container, className: "css-reset", children: [
             jsx_runtime_1.jsxs("div", { style: sideContainer, children: [
-                    jsx_runtime_1.jsx("div", { style: padding }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(TimelineZoomControls_1.TimelineZoomControls, {}) })
-                ] }), jsx_runtime_1.jsx(layout_1.Flex, {}), isMobileLayout ? null : (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(SizeSelector_1.SizeSelector, {}) })), !isMobileLayout && (isStill || isVideoComposition) ? (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(PlaybackRateSelector_1.PlaybackRateSelector, { setPlaybackRate: setPlaybackRate, playbackRate: playbackRate }) })) : null, isVideoComposition && isMobileLayout ? (jsx_runtime_1.jsx("div", { style: centeredPlayButton, children: playPause })) : null, isVideoComposition && !isMobileLayout ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                    jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), playPause, jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(LoopToggle_1.LoopToggle, { loop: loop, setLoop: setLoop }) }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(MuteToggle_1.MuteToggle, { muted: playerMuted, setMuted: setPlayerMuted }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(TimelineInOutToggle_1.TimelineInOutPointToggle, {}) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 })
-                ] })) : null, (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [isMobileLayout ? null : (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(CheckboardToggle_1.CheckboardToggle, {}) })), isMobileLayout ? null : (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(OutlineToggle_1.OutlineToggle, {}) })), readOnlyStudio || isMobileLayout ? null : (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(SnappingToggle_1.SnappingToggle, {}) }))] })) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), canvasContent && isFullscreenSupported ? (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(FullscreenToggle_1.FullScreenToggle, { hidden: isMobileLayout }) })) : null, jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsxs("div", { style: sideContainer, children: [
-                    jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsx(FpsCounter_1.FpsCounter, { playbackSpeed: playbackRate }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(RenderButton_1.RenderButton, { readOnlyStudio: readOnlyStudio, size: "compact", hidden: isMobileLayout }) }), isMobileLayout ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [isVideoComposition ? (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(MuteToggle_1.MuteToggle, { muted: playerMuted, setMuted: setPlayerMuted }) })) : null, jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(PreviewToolbarOverflowButton_1.PreviewToolbarOverflowButton, { readOnlyStudio: readOnlyStudio, showFullscreen: Boolean(canvasContent && isFullscreenSupported), showPlaybackRate: isVideoComposition, showLoop: isVideoComposition, showCompositionControls: (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition', playbackRate: playbackRate, setPlaybackRate: setPlaybackRate, loop: loop, setLoop: setLoop }) })
-                        ] })) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: 1.5 })
+                    jsx_runtime_1.jsx("div", { style: padding }), isMobileLayout ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                            jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(PreviewToolbarOverflowButton_1.PreviewToolbarOverflowButton, { showFullscreen: Boolean(canvasContent && isFullscreenSupported), showPlaybackRate: isVideoComposition, showLoop: isVideoComposition, showCompositionControls: (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition', playbackRate: playbackRate, setPlaybackRate: setPlaybackRate, loop: loop, setLoop: setLoop }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1.5 })
+                        ] })) : null, isVideoComposition && isMobileLayout ? (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(MuteToggle_1.MuteToggle, { muted: playerMuted, setMuted: setPlayerMuted }) })) : null] }), jsx_runtime_1.jsx(layout_1.Flex, {}), isMobileLayout ? null : (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(SizeSelector_1.SizeSelector, {}) })), !isMobileLayout && (isStill || isVideoComposition) ? (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(PlaybackRateSelector_1.PlaybackRateSelector, { setPlaybackRate: setPlaybackRate, playbackRate: playbackRate }) })) : null, isVideoComposition && isMobileLayout ? (jsx_runtime_1.jsx("div", { style: centeredPlayButton, children: playPause })) : null, isVideoComposition && !isMobileLayout ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                    jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), playPause, jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(LoopToggle_1.LoopToggle, { loop: loop, setLoop: setLoop }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.75 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(MuteToggle_1.MuteToggle, { muted: playerMuted, setMuted: setPlayerMuted }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(TimelineInOutToggle_1.TimelineInOutPointToggle, {}) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 })
+                ] })) : null, (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [isMobileLayout ? null : (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(CheckboardToggle_1.CheckboardToggle, {}) })), isMobileLayout ? null : jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.25 }), isMobileLayout ? null : (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(OutlineToggle_1.OutlineToggle, {}) })), readOnlyStudio || isMobileLayout ? null : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                            jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.25 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(SnappingToggle_1.SnappingToggle, {}) })
+                        ] }))] })) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), canvasContent && isFullscreenSupported ? (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(FullscreenToggle_1.FullScreenToggle, { hidden: isMobileLayout }) })) : null, jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsxs("div", { style: sideContainer, children: [
+                    jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsx(FpsCounter_1.FpsCounter, { playbackSpeed: playbackRate }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(RenderButton_1.RenderButton, { readOnlyStudio: readOnlyStudio, size: "compact" }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1.5 })
                 ] }), jsx_runtime_1.jsx(PlaybackKeyboardShortcutsManager_1.PlaybackKeyboardShortcutsManager, { setPlaybackRate: setPlaybackRate }), jsx_runtime_1.jsx(PlaybackRatePersistor_1.PlaybackRatePersistor, {})
         ] }));
 };

package/dist/components/PreviewToolbarOverflowButton.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
 export declare const PreviewToolbarOverflowButton: React.FC<{
-    readonly readOnlyStudio: boolean;
     readonly showFullscreen: boolean;
     readonly showPlaybackRate: boolean;
     readonly showLoop: boolean;

package/dist/components/PreviewToolbarOverflowButton.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PreviewToolbarOverflowButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const remotion_1 = require("remotion");
 const colors_1 = require("../helpers/colors");
 const use_keybinding_1 = require("../helpers/use-keybinding");
 const Checkmark_1 = require("../icons/Checkmark");
@@ -18,8 +17,7 @@ const clickButton = (id) => {
     var _a;
     (_a = document.getElementById(id)) === null || _a === void 0 ? void 0 : _a.click();
 };
-const PreviewToolbarOverflowButton = ({ readOnlyStudio, showFullscreen, showPlaybackRate, showLoop, showCompositionControls, playbackRate, setPlaybackRate, loop, setLoop, }) => {
-    const video = remotion_1.Internals.useVideo();
+const PreviewToolbarOverflowButton = ({ showFullscreen, showPlaybackRate, showLoop, showCompositionControls, playbackRate, setPlaybackRate, loop, setLoop, }) => {
     const { checkerboard, setCheckerboard } = (0, react_1.useContext)(checkerboard_1.CheckerboardContext);
     const { editorShowOutlines, setEditorShowOutlines } = (0, react_1.useContext)(editor_outlines_1.EditorShowOutlinesContext);
     const { items: previewSizeItems, selectedId: selectedPreviewSize, zoomable, } = (0, SizeSelector_1.usePreviewSizeMenuItems)();
@@ -34,58 +32,6 @@ const PreviewToolbarOverflowButton = ({ readOnlyStudio, showFullscreen, showPlay
         };
     }, []);
     const renderAction = (0, react_1.useCallback)((color) => jsx_runtime_1.jsx(ellipsis_1.EllipsisIcon, { fill: color, svgProps: iconStyle }), [iconStyle]);
-    const renderItems = (0, react_1.useMemo)(() => {
-        if (readOnlyStudio) {
-            return [
-                {
-                    type: 'item',
-                    id: 'client-render',
-                    label: 'Render on web',
-                    value: 'client-render',
-                    onClick: () => clickButton('render-modal-button-client'),
-                    keyHint: null,
-                    leftItem: null,
-                    subMenu: null,
-                    quickSwitcherLabel: null,
-                },
-                {
-                    type: 'item',
-                    id: 'render-command',
-                    label: 'Render via CLI',
-                    value: 'render-command',
-                    onClick: () => clickButton('render-modal-button-command'),
-                    keyHint: null,
-                    leftItem: null,
-                    subMenu: null,
-                    quickSwitcherLabel: null,
-                },
-            ];
-        }
-        return [
-            {
-                type: 'item',
-                id: 'server-render',
-                label: 'Server-side render',
-                value: 'server-render',
-                onClick: () => clickButton('render-modal-button-server'),
-                keyHint: null,
-                leftItem: null,
-                subMenu: null,
-                quickSwitcherLabel: null,
-            },
-            {
-                type: 'item',
-                id: 'client-render',
-                label: 'Client-side render',
-                value: 'client-render',
-                onClick: () => clickButton('render-modal-button-client'),
-                keyHint: null,
-                leftItem: null,
-                subMenu: null,
-                quickSwitcherLabel: null,
-            },
-        ];
-    }, [readOnlyStudio]);
     const values = (0, react_1.useMemo)(() => {
         const items = [];
         if (zoomable) {
@@ -172,28 +118,10 @@ const PreviewToolbarOverflowButton = ({ readOnlyStudio, showFullscreen, showPlay
                 quickSwitcherLabel: null,
             });
         }
-        if (video) {
-            items.push({
-                type: 'item',
-                id: 'render',
-                label: 'Render',
-                value: 'render',
-                onClick: () => undefined,
-                keyHint: null,
-                leftItem: null,
-                subMenu: {
-                    items: renderItems,
-                    leaveLeftSpace: false,
-                    preselectIndex: 0,
-                },
-                quickSwitcherLabel: null,
-            });
-        }
         return items;
     }, [
         previewSizeItems,
         playbackRateItems,
-        renderItems,
         selectedPlaybackRate,
         selectedPreviewSize,
         showFullscreen,
@@ -206,12 +134,11 @@ const PreviewToolbarOverflowButton = ({ readOnlyStudio, showFullscreen, showPlay
         setCheckerboard,
         setEditorShowOutlines,
         setLoop,
-        video,
         zoomable,
     ]);
     if (values.length === 0) {
         return null;
     }
-    return (jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { renderAction: renderAction, values: values, title: "More actions", unhoveredColor: colors_1.WHITE }));
+    return (jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { variant: null, renderAction: renderAction, values: values, title: "More actions", unhoveredColor: colors_1.WHITE_ALPHA_80 }));
 };
 exports.PreviewToolbarOverflowButton = PreviewToolbarOverflowButton;

package/dist/components/QuickSwitcher/QuickSwitcherContent.js

@@ -52,7 +52,6 @@ const modeInactive = {
 const modeActive = {
     ...modeItem,
     color: colors_1.WHITE,
-    fontWeight: 'bold',
 };
 const content = {
     paddingLeft: 16,
@@ -353,7 +352,7 @@ const QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio
                 : 'Search compositions...';
     const container = (0, react_1.useMemo)(() => {
         return {
-            width: showKeyboardShortcuts ? 800 : 500,
+            width: showKeyboardShortcuts ? 800 : 400,
         };
     }, [showKeyboardShortcuts]);
     const results = (0, react_1.useMemo)(() => {

package/dist/components/RenderButton.d.ts

@@ -3,5 +3,4 @@ export type RenderType = 'server-render' | 'client-render' | 'render-command';
 export declare const RenderButton: React.FC<{
     readonly readOnlyStudio: boolean;
     readonly size?: 'default' | 'compact';
-    readonly hidden: boolean;
 }>;

package/dist/components/RenderButton.js

@@ -123,11 +123,13 @@ const getInitialRenderType = (readOnlyStudio) => {
     }
     return 'server-render';
 };
-const RenderButton = ({ readOnlyStudio, size: controlSize = 'default', hidden }) => {
+const RenderButton = ({ readOnlyStudio, size: controlSize = 'default' }) => {
     const { inFrame, outFrame } = (0, in_out_1.useTimelineInOutFramePosition)();
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const [preferredRenderType, setPreferredRenderType] = (0, react_1.useState)(() => getInitialRenderType(readOnlyStudio));
     const [dropdownOpened, setDropdownOpened] = (0, react_1.useState)(false);
+    const [mainButtonHovered, setMainButtonHovered] = (0, react_1.useState)(false);
+    const [dropdownButtonHovered, setDropdownButtonHovered] = (0, react_1.useState)(false);
     const dropdownRef = (0, react_1.useRef)(null);
     const containerRef = (0, react_1.useRef)(null);
     const { currentZIndex } = (0, z_index_1.useZIndex)();
@@ -192,7 +194,6 @@ const RenderButton = ({ readOnlyStudio, size: controlSize = 'default', hidden })
         return {
             style: {
                 height: controlSize === 'compact' ? 14 : 16,
-                color: colors_1.CURRENT_COLOR,
                 flexShrink: 0,
             },
         };
@@ -433,21 +434,21 @@ const RenderButton = ({ readOnlyStudio, size: controlSize = 'default', hidden })
         : renderType === 'render-command'
             ? 'Render via CLI'
             : 'Render on web';
+    const mainIconColor = mainButtonHovered ? colors_1.WHITE : colors_1.WHITE_ALPHA_80;
+    const dropdownIconColor = dropdownOpened || dropdownButtonHovered ? colors_1.WHITE : colors_1.WHITE_ALPHA_80;
     if (!video) {
         return null;
     }
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx("button", { style: { display: 'none' }, id: "render-modal-button-server", disabled: !canServerRender, onClick: () => openServerRenderModal(false), type: "button" }), ' ', jsx_runtime_1.jsx("button", { style: { display: 'none' }, id: "render-modal-button-client", onClick: openClientRenderModal, type: "button" }), jsx_runtime_1.jsx("button", { style: { display: 'none' }, id: "render-modal-button-command", onClick: () => openServerRenderModal(true), type: "button" }), hidden ? (jsx_runtime_1.jsx("button", { style: { display: 'none' }, onClick: onClick, id: "render-modal-button", type: "button" })) : (jsx_runtime_1.jsxs("div", { ref: containerRef, style: containerStyle, title: tooltip, children: [
-                    jsx_runtime_1.jsx("button", { type: "button", style: controlSize === 'compact'
-                            ? compactMainButtonStyle
-                            : mainButtonStyle, onClick: onClick, id: "render-modal-button", children: jsx_runtime_1.jsxs(layout_1.Row, { align: "center", style: controlSize === 'compact'
+            jsx_runtime_1.jsx("button", { style: { display: 'none' }, id: "render-modal-button-server", disabled: !canServerRender, onClick: () => openServerRenderModal(false), type: "button" }), ' ', jsx_runtime_1.jsx("button", { style: { display: 'none' }, id: "render-modal-button-client", onClick: openClientRenderModal, type: "button" }), jsx_runtime_1.jsx("button", { style: { display: 'none' }, id: "render-modal-button-command", onClick: () => openServerRenderModal(true), type: "button" }), jsx_runtime_1.jsxs("div", { ref: containerRef, style: containerStyle, title: tooltip, children: [
+                    jsx_runtime_1.jsx("button", { type: "button", style: controlSize === 'compact' ? compactMainButtonStyle : mainButtonStyle, onClick: onClick, onPointerEnter: () => setMainButtonHovered(true), onPointerLeave: () => setMainButtonHovered(false), id: "render-modal-button", children: jsx_runtime_1.jsxs(layout_1.Row, { align: "center", style: controlSize === 'compact'
                                 ? compactMainButtonContent
                                 : mainButtonContent, children: [
-                                jsx_runtime_1.jsx(render_1.ThinRenderIcon, { fill: colors_1.CURRENT_COLOR_LOWERCASE, svgProps: iconStyle }), jsx_runtime_1.jsx(layout_1.Spacing, { x: controlSize === 'compact' ? 0.75 : 1 }), jsx_runtime_1.jsx("span", { style: controlSize === 'compact' ? compactLabel : label, children: renderLabel })
+                                jsx_runtime_1.jsx(render_1.ThinRenderIcon, { fill: mainIconColor, svgProps: iconStyle }), jsx_runtime_1.jsx(layout_1.Spacing, { x: controlSize === 'compact' ? 0.75 : 1 }), jsx_runtime_1.jsx("span", { style: controlSize === 'compact' ? compactLabel : label, children: renderLabel })
                             ] }) }), jsx_runtime_1.jsx("div", { style: dividerStyle }), jsx_runtime_1.jsx("button", { ref: dropdownRef, type: "button", style: controlSize === 'compact'
                             ? compactDropdownTriggerStyle
-                            : dropdownTriggerStyle, className: is_menu_item_1.MENU_INITIATOR_CLASSNAME, onPointerDown: onPointerDown, onClick: onClickDropdown, children: jsx_runtime_1.jsx(caret_1.CaretDown, {}) })
-                ] })), portalStyle
+                            : dropdownTriggerStyle, className: is_menu_item_1.MENU_INITIATOR_CLASSNAME, onPointerDown: onPointerDown, onClick: onClickDropdown, onPointerEnter: () => setDropdownButtonHovered(true), onPointerLeave: () => setDropdownButtonHovered(false), children: jsx_runtime_1.jsx(caret_1.CaretDown, { color: dropdownIconColor }) })
+                ] }), portalStyle
                 ? react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { style: styles_1.fullScreenOverlay, children: jsx_runtime_1.jsx("div", { style: styles_1.outerPortal, className: "css-reset", children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onOutsideClick: onHideDropdown, onEscape: onHideDropdown, children: jsx_runtime_1.jsx("div", { style: portalStyle, onPointerDown: onMenuPointerDown, children: jsx_runtime_1.jsx(MenuContent_1.MenuContent, { onNextMenu: () => { }, onPreviousMenu: () => { }, values: dropdownValues, onHide: onHideDropdown, leaveLeftSpace: false, preselectIndex: dropdownValues.findIndex((v) => v.id === renderType), topItemCanBeUnselected: false, fixedHeight: derivedMaxHeight }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
                 : null] }));
 };

package/dist/components/RenderModal/FrameRangeSetting.js

@@ -7,6 +7,11 @@ const InputDragger_1 = require("../NewComposition/InputDragger");
 const layout_1 = require("./layout");
 const MultiRangeSlider_1 = require("./MultiRangeSlider");
 const INPUT_WIDTH = 40;
+const startFrameInputContainer = {
+    display: 'flex',
+    justifyContent: 'flex-end',
+    width: INPUT_WIDTH,
+};
 const FrameRangeSetting = ({ startFrame, endFrame, setEndFrame, durationInFrames, setStartFrame }) => {
     const minStartFrame = 0;
     const maxEndFrame = durationInFrames - 1;
@@ -24,7 +29,7 @@ const FrameRangeSetting = ({ startFrame, endFrame, setEndFrame, durationInFrames
     }, [onEndFrameChangedDirectly]);
     return (jsx_runtime_1.jsxs("div", { style: layout_1.optionRow, children: [
             jsx_runtime_1.jsx("div", { style: layout_1.label, children: "Frame range" }), jsx_runtime_1.jsxs("div", { style: layout_1.rightRow, children: [
-                    jsx_runtime_1.jsx("div", { style: { width: INPUT_WIDTH }, children: jsx_runtime_1.jsx(InputDragger_1.InputDragger, { min: minStartFrame, max: endFrame - 1, name: "Start frame", value: startFrame, step: 1, onTextChange: onStartFrameChanged, onValueChange: onStartFrameChangedDirectly, status: "ok", rightAlign: true, style: { width: INPUT_WIDTH } }) }), jsx_runtime_1.jsx(MultiRangeSlider_1.MultiRangeSlider, { min: minStartFrame, max: maxEndFrame, start: startFrame, end: endFrame, step: 1, onLeftThumbDrag: onStartFrameChangedDirectly, onRightThumbDrag: onEndFrameChangedDirectly }), ' ', jsx_runtime_1.jsx("div", { style: { width: INPUT_WIDTH }, children: jsx_runtime_1.jsx(InputDragger_1.InputDragger, { min: startFrame + 1, max: maxEndFrame, name: "End frame", value: endFrame, step: 1, onTextChange: onEndFrameChanged, onValueChange: onEndFrameChangedDirectly, status: "ok", rightAlign: true, style: { width: INPUT_WIDTH } }) })
+                    jsx_runtime_1.jsx("div", { style: startFrameInputContainer, children: jsx_runtime_1.jsx(InputDragger_1.InputDragger, { min: minStartFrame, max: endFrame - 1, name: "Start frame", value: startFrame, step: 1, onTextChange: onStartFrameChanged, onValueChange: onStartFrameChangedDirectly, status: "ok", rightAlign: true, style: { width: INPUT_WIDTH } }) }), jsx_runtime_1.jsx(MultiRangeSlider_1.MultiRangeSlider, { min: minStartFrame, max: maxEndFrame, start: startFrame, end: endFrame, step: 1, onLeftThumbDrag: onStartFrameChangedDirectly, onRightThumbDrag: onEndFrameChangedDirectly }), ' ', jsx_runtime_1.jsx("div", { style: { width: INPUT_WIDTH }, children: jsx_runtime_1.jsx(InputDragger_1.InputDragger, { min: startFrame + 1, max: maxEndFrame, name: "End frame", value: endFrame, step: 1, onTextChange: onEndFrameChanged, onValueChange: onEndFrameChangedDirectly, status: "ok", rightAlign: true, style: { width: INPUT_WIDTH } }) })
                 ] })
         ] }));
 };

package/dist/components/RenderModal/InlineEyeIcon.js

@@ -13,6 +13,6 @@ const InlineEyeButton = ({ onClick, enabled }) => {
     const renderAction = (0, react_1.useCallback)((color) => {
         return enabled ? (jsx_runtime_1.jsx("svg", { style: clearIcon, viewBox: "0 0 640 512", children: jsx_runtime_1.jsx("path", { fill: color, d: "M25.9 3.4C19-2 8.9-.8 3.4 6.1S-.8 23.1 6.1 28.6l608 480c6.9 5.5 17 4.3 22.5-2.6s4.3-17-2.6-22.5L25.9 3.4zM605.5 268.3c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-51.2 0-96 14.8-133.9 36.8l27.3 21.5C244.6 74.2 280.2 64 320 64c70.4 0 127.7 32 170.8 72c43.1 40 71.9 88 85.2 120c-9.2 22.1-25.9 52-49.5 81.5l25.1 19.8c25.6-32 43.7-64.4 53.9-89zM88.4 154.7c-25.6 32-43.7 64.4-53.9 89c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c51.2 0 96-14.8 133.9-36.8l-27.3-21.5C395.4 437.8 359.8 448 320 448c-70.4 0-127.7-32-170.8-72C106.1 336 77.3 288 64 256c9.2-22.1 25.9-52 49.5-81.5L88.4 154.7zM320 384c16.7 0 32.7-3.2 47.4-9.1l-30.9-24.4c-5.4 .9-10.9 1.4-16.5 1.4c-51 0-92.8-39.8-95.8-90.1l-30.9-24.4c-.9 6-1.3 12.2-1.3 18.5c0 70.7 57.3 128 128 128zM448 256c0-70.7-57.3-128-128-128c-16.7 0-32.7 3.2-47.4 9.1l30.9 24.4c5.4-.9 10.9-1.4 16.5-1.4c51 0 92.8 39.8 95.8 90.1l30.9 24.4c.9-6 1.3-12.2 1.3-18.5z" }) })) : (jsx_runtime_1.jsx("svg", { style: clearIcon, viewBox: "0 0 576 512", children: jsx_runtime_1.jsx("path", { fill: color, d: "M117.2 136C160.3 96 217.6 64 288 64s127.7 32 170.8 72c43.1 40 71.9 88 85.2 120c-13.3 32-42.1 80-85.2 120c-43.1 40-100.4 72-170.8 72s-127.7-32-170.8-72C74.1 336 45.3 288 32 256c13.3-32 42.1-80 85.2-120zM288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM192 256a96 96 0 1 1 192 0 96 96 0 1 1 -192 0zm224 0a128 128 0 1 0 -256 0 128 128 0 1 0 256 0z" }) }));
     }, [enabled]);
-    return jsx_runtime_1.jsx(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick });
+    return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick, variant: null }));
 };
 exports.InlineEyeButton = InlineEyeButton;

package/dist/components/RenderModal/InlineRemoveButton.js

@@ -13,6 +13,6 @@ const InlineRemoveButton = ({ onClick }) => {
     const renderAction = (0, react_1.useCallback)((color) => {
         return (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512", style: clearIcon, children: jsx_runtime_1.jsx("path", { d: "M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z", fill: color }) }));
     }, []);
-    return jsx_runtime_1.jsx(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick });
+    return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick, variant: null }));
 };
 exports.InlineRemoveButton = InlineRemoveButton;

package/dist/components/RenderModal/MultiRangeSlider.js

@@ -5,23 +5,23 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../../helpers/colors");
 const container = {
-    borderColor: colors_1.BLACK,
-    borderStyle: 'solid',
-    borderWidth: '2px',
-    height: 39,
-    width: 220,
+    height: 6,
+    flex: 1,
+    minWidth: 80,
+    maxWidth: 220,
     position: 'relative',
-    backgroundColor: colors_1.INPUT_BACKGROUND,
+    backgroundColor: colors_1.WHITE_ALPHA_10,
     marginLeft: 8,
     marginRight: 8,
-    borderRadius: 2,
+    borderRadius: 3,
 };
 // blue slider
 const sliderRange = {
     position: 'absolute',
     top: 0,
     backgroundColor: colors_1.BLUE,
-    height: 35,
+    height: 6,
+    borderRadius: 3,
 };
 const MultiRangeSlider = ({ min, max, start, end, step, onLeftThumbDrag, onRightThumbDrag, }) => {
     const getPercent = (0, react_1.useCallback)((value) => Math.round(((value - min) / (max - min)) * 100), [min, max]);

package/dist/components/RenderModal/RenderModalEnvironmentVariables.js

@@ -3,16 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenderModalEnvironmentVariables = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const colors_1 = require("../../helpers/colors");
 const Button_1 = require("../Button");
 const layout_1 = require("../layout");
 const EnvInput_1 = require("./EnvInput");
-const title = {
-    fontSize: 14,
-    fontWeight: 'bold',
-    color: colors_1.LIGHT_TEXT,
-    marginLeft: 16,
-};
 const container = {
     marginTop: 20,
 };
@@ -41,8 +34,7 @@ const RenderModalEnvironmentVariables = ({ envVariables, setEnvVariables }) => {
         setEnvVariables((oldEnv) => [...oldEnv, ['', '']]);
     }, [setEnvVariables]);
     const usedKeys = [];
-    return (jsx_runtime_1.jsxs("div", { style: container, children: [
-            jsx_runtime_1.jsx("strong", { style: title, children: "Environment variables" }), envVariables.map((env, i) => {
+    return (jsx_runtime_1.jsxs("div", { style: container, children: [envVariables.map((env, i) => {
                 let isDuplicate = false;
                 if (usedKeys.includes(env[0].toUpperCase())) {
                     isDuplicate = true;

package/dist/components/RenderModal/RenderModalOutputName.js

@@ -28,6 +28,15 @@ const openIconStyle = {
     height: 12,
     flexShrink: 0,
 };
+const outputNameRow = {
+    ...layout_2.optionRow,
+    columnGap: 16,
+};
+const outputNameInputContainer = {
+    flex: 1,
+    minWidth: 0,
+    maxWidth: 280,
+};
 const RenderModalOutputName = ({ existence, inputStyle, outName, onValueChange, validationMessage, label: labelText, }) => {
     const openExistingOutput = (0, react_1.useCallback)(() => {
         (0, actions_1.openInFileExplorer)({ directory: outName }).catch((err) => {
@@ -38,13 +47,13 @@ const RenderModalOutputName = ({ existence, inputStyle, outName, onValueChange,
         return jsx_runtime_1.jsx(folder_1.ExpandedFolderIconSolid, { style: openIconStyle, color: color });
     }, []);
     const fileManagerName = (0, get_file_manager_name_1.getFileManagerName)(window.remotion_fileSystemPlatform);
-    return (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
-            jsx_runtime_1.jsx(layout_1.Column, { children: jsx_runtime_1.jsx("div", { style: layout_2.label, children: labelText }) }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsxs("div", { children: [
+    return (jsx_runtime_1.jsxs("div", { style: outputNameRow, children: [
+            jsx_runtime_1.jsx(layout_1.Column, { children: jsx_runtime_1.jsx("div", { style: layout_2.label, children: labelText }) }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsxs("div", { style: outputNameInputContainer, children: [
                         jsx_runtime_1.jsx(RemInput_1.RemotionInput, { status: validationMessage ? 'error' : existence ? 'warning' : 'ok', style: inputStyle, type: "text", value: outName, onChange: onValueChange, rightAlign: true }), validationMessage ? (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-end", message: validationMessage, type: 'error' })
                             ] })) : existence ? (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-end", message: jsx_runtime_1.jsxs("span", { style: existsMessageStyle, children: [
-                                            jsx_runtime_1.jsx(InlineAction_1.InlineAction, { onClick: openExistingOutput, renderAction: renderOpenIcon, title: `Open in ${fileManagerName}` }),
+                                            jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: openExistingOutput, renderAction: renderOpenIcon, title: `Open in ${fileManagerName}` }),
                                             "Exists, will be overwritten"] }), type: 'warning' })
                             ] })) : null] }) })
         ] }));

package/dist/components/RenderModal/SchemaEditor/SchemaResetButton.js

@@ -13,6 +13,6 @@ const SchemaResetButton = ({ onClick }) => {
     const renderAction = (0, react_1.useCallback)((color) => {
         return (jsx_runtime_1.jsx("svg", { style: icon, viewBox: "0 0 512 512", children: jsx_runtime_1.jsx("path", { fill: color, d: "M48.5 224H40c-13.3 0-24-10.7-24-24V72c0-9.7 5.8-18.5 14.8-22.2s19.3-1.7 26.2 5.2L98.6 96.6c87.6-86.5 228.7-86.2 315.8 1c87.5 87.5 87.5 229.3 0 316.8s-229.3 87.5-316.8 0c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0c62.5 62.5 163.8 62.5 226.3 0s62.5-163.8 0-226.3c-62.2-62.2-162.7-62.5-225.3-1L185 183c6.9 6.9 8.9 17.2 5.2 26.2s-12.5 14.8-22.2 14.8H48.5z" }) }));
     }, []);
-    return jsx_runtime_1.jsx(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick });
+    return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick, variant: null }));
 };
 exports.SchemaResetButton = SchemaResetButton;

package/dist/components/RenderModal/ServerRenderModal.js

@@ -19,6 +19,7 @@ const file_1 = require("../../icons/file");
 const frame_1 = require("../../icons/frame");
 const gear_1 = require("../../icons/gear");
 const gif_1 = require("../../icons/gif");
+const input_props_1 = require("../../icons/input-props");
 const video_1 = require("../../icons/video");
 const modals_1 = require("../../state/modals");
 const sidebar_1 = require("../../state/sidebar");
@@ -989,23 +990,7 @@ const RenderModal = ({ readOnlyStudio, initialFrame, initialVideoImageFormat, in
                                     : 'Rendering...', jsx_runtime_1.jsx(ShortcutHint_1.ShortcutHint, { keyToPress: "\u21B5", cmdOrCtrl: true })
                         ] })
                 ] }), jsx_runtime_1.jsxs("div", { style: render_modals_1.horizontalLayout, children: [
-                    jsx_runtime_1.jsxs("div", { style: render_modals_1.leftSidebar, children: [shownTabs.includes('general') ? (jsx_runtime_1.jsxs(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'general', onClick: () => setTab('general'), children: [
-                                    jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(file_1.FileIcon, { style: render_modals_1.icon }) }),
-                                    "General"] })) : null, shownTabs.includes('data') ? (jsx_runtime_1.jsxs(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'data', onClick: () => setTab('data'), children: [
-                                    jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(data_1.DataIcon, { style: render_modals_1.icon }) }),
-                                    "Input Props"] })) : null, shownTabs.includes('picture') ? (jsx_runtime_1.jsxs(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'picture', onClick: () => setTab('picture'), children: [
-                                    jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(frame_1.PicIcon, { style: render_modals_1.icon }) }),
-                                    "Picture"] })) : null, shownTabs.includes('audio') ? (jsx_runtime_1.jsxs(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'audio', onClick: () => setTab('audio'), children: [
-                                    jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(audio_1.AudioIcon, { style: render_modals_1.icon }) }),
-                                    "Audio"] })) : null, shownTabs.includes('gif') ? (jsx_runtime_1.jsxs(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'gif', onClick: () => setTab('gif'), children: [
-                                    jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(gif_1.GifIcon, { style: render_modals_1.icon }) }),
-                                    "GIF"] })) : null, shownTabs.includes('encoding') ? (jsx_runtime_1.jsxs(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'encoding', onClick: () => setTab('encoding'), children: [
-                                    jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(video_1.FilmIcon, { style: render_modals_1.icon, color: colors_1.CURRENT_COLOR_LOWERCASE }) }),
-                                    "Encoding"] })) : null, shownTabs.includes('environment') ? (jsx_runtime_1.jsxs(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'environment', onClick: () => setTab('environment'), children: [
-                                    jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(data_1.DataIcon, { style: render_modals_1.icon }) }),
-                                    "Environment"] })) : null, shownTabs.includes('advanced') ? (jsx_runtime_1.jsxs(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'advanced', onClick: () => setTab('advanced'), children: [
-                                    jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(gear_1.GearIcon, { style: render_modals_1.icon }) }),
-                                    "Other"] })) : null] }), jsx_runtime_1.jsx("div", { style: render_modals_1.optionsPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: tab === 'general' ? (jsx_runtime_1.jsx(RenderModalBasic_1.RenderModalBasic, { codec: codec, resolvedComposition: resolvedComposition, frame: frame, imageFormatOptions: imageFormatOptions, outName: outName, proResProfile: proResProfile, renderMode: renderMode, setVideoCodec: setCodec, setFrame: setFrame, setOutName: setOutName, setProResProfile: setProResProfile, endFrame: endFrame, setEndFrame: setEndFrame, setStartFrame: setStartFrame, setVerboseLogging: setLogLevel, logLevel: logLevel, showOutputName: !readOnlyStudio, startFrame: startFrame, validationMessage: outnameValidation.valid ? null : outnameValidation.error.message })) : tab === 'picture' ? (jsx_runtime_1.jsx(RenderModalPicture_1.RenderModalPicture, { renderMode: renderMode, scale: scale, setScale: setScale, imageFormatOptions: imageFormatOptions, jpegQuality: jpegQuality, setJpegQuality: setJpegQuality, videoImageFormat: videoImageFormat, stillImageFormat: stillImageFormat, compositionWidth: resolvedComposition.width, compositionHeight: resolvedComposition.height })) : tab === 'audio' ? (jsx_runtime_1.jsx(RenderModalAudio_1.RenderModalAudio, { muted: muted, renderMode: renderMode, setMuted: setMuted, codec: codec, audioCodec: audioCodec, setAudioCodec: setAudioCodec, enforceAudioTrack: enforceAudioTrack, setEnforceAudioTrackState: setEnforceAudioTrackState, customTargetAudioBitrate: customTargetAudioBitrate, setCustomTargetAudioBitrateValue: setCustomTargetAudioBitrateValue, setShouldHaveCustomTargetAudioBitrate: setShouldHaveCustomTargetAudioBitrate, shouldHaveCustomTargetAudioBitrate: shouldHaveCustomTargetAudioBitrate, forSeamlessAacConcatenation: forSeamlessAacConcatenation, setForSeamlessAacConcatenation: setForSeamlessAacConcatenation, separateAudioTo: separateAudioTo, setSeparateAudioTo: setSeparateAudioTo, outName: outName, sampleRate: sampleRate, setSampleRate: setSampleRate })) : tab === 'gif' ? (jsx_runtime_1.jsx(RenderModalGif_1.RenderModalGif, { everyNthFrame: everyNthFrame, limitNumberOfGifLoops: limitNumberOfGifLoops, numberOfGifLoopsSetting: numberOfGifLoopsSetting, setEveryNthFrameSetting: setEveryNthFrameSetting, setLimitNumberOfGifLoops: setLimitNumberOfGifLoops, setNumberOfGifLoopsSetting: setNumberOfGifLoopsSetting })) : tab === 'encoding' ? (jsx_runtime_1.jsx(RenderModalEncoding_1.RenderModalEncoding, { renderMode: renderMode, codec: codec, qualityControlType: qualityControlType, setQualityControl: setQualityControl, shouldDisplayQualityControlPicker: supportsBothQualityControls, crf: crf, setCrf: setCrf, maxCrf: maxCrf, minCrf: minCrf, customTargetVideoBitrate: customTargetVideoBitrate, setCustomTargetVideoBitrateValue: setCustomTargetVideoBitrateValue, encodingBufferSize: encodingBufferSize, setEncodingBufferSize: setEncodingBufferSize, encodingMaxRate: encodingMaxRate, setEncodingMaxRate: setEncodingMaxRate, pixelFormat: pixelFormat, pixelFormatOptions: pixelFormatOptions, colorSpace: colorSpace, setColorSpace: setColorSpace, x264Preset: x264Preset, setx264Preset: setx264Preset, gopSize: gopSize, setGopSize: setGopSize, hardwareAcceleration: hardwareAcceleration, setHardwareAcceleration: setHardwareAcceleration, disallowParallelEncoding: disallowParallelEncoding, setDisallowParallelEncoding: setDisallowParallelEncoding })) : tab === 'environment' ? (jsx_runtime_1.jsx(RenderModalEnvironmentVariables_1.RenderModalEnvironmentVariables, { envVariables: envVariables, setEnvVariables: setEnvVariables })) : tab === 'data' ? (jsx_runtime_1.jsx(DataEditor_1.DataEditor, { defaultProps: inputProps, setDefaultProps: setInputProps, unresolvedComposition: unresolvedComposition, propsEditType: "input-props", canSaveDefaultProps: {
+                    jsx_runtime_1.jsxs("div", { style: render_modals_1.leftSidebar, children: [shownTabs.includes('general') ? (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'general', onClick: () => setTab('general'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(file_1.FileIcon, { color: color, style: render_modals_1.icon }) })), children: "General" })) : null, shownTabs.includes('data') ? (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'data', onClick: () => setTab('data'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(input_props_1.InputPropsIcon, { color: color, style: render_modals_1.icon }) })), children: "Input Props" })) : null, shownTabs.includes('picture') ? (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'picture', onClick: () => setTab('picture'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(frame_1.PicIcon, { color: color, style: render_modals_1.icon }) })), children: "Picture" })) : null, shownTabs.includes('audio') ? (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'audio', onClick: () => setTab('audio'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(audio_1.AudioIcon, { color: color, style: render_modals_1.icon }) })), children: "Audio" })) : null, shownTabs.includes('gif') ? (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'gif', onClick: () => setTab('gif'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(gif_1.GifIcon, { color: color, style: render_modals_1.icon }) })), children: "GIF" })) : null, shownTabs.includes('encoding') ? (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'encoding', onClick: () => setTab('encoding'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(video_1.FilmIcon, { color: color, style: render_modals_1.icon }) })), children: "Encoding" })) : null, shownTabs.includes('environment') ? (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'environment', onClick: () => setTab('environment'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(data_1.DataIcon, { color: color, style: render_modals_1.icon }) })), children: "Environment" })) : null, shownTabs.includes('advanced') ? (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'advanced', onClick: () => setTab('advanced'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(gear_1.GearIcon, { color: color, style: render_modals_1.icon }) })), children: "Other" })) : null] }), jsx_runtime_1.jsx("div", { style: render_modals_1.optionsPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: tab === 'general' ? (jsx_runtime_1.jsx(RenderModalBasic_1.RenderModalBasic, { codec: codec, resolvedComposition: resolvedComposition, frame: frame, imageFormatOptions: imageFormatOptions, outName: outName, proResProfile: proResProfile, renderMode: renderMode, setVideoCodec: setCodec, setFrame: setFrame, setOutName: setOutName, setProResProfile: setProResProfile, endFrame: endFrame, setEndFrame: setEndFrame, setStartFrame: setStartFrame, setVerboseLogging: setLogLevel, logLevel: logLevel, showOutputName: !readOnlyStudio, startFrame: startFrame, validationMessage: outnameValidation.valid ? null : outnameValidation.error.message })) : tab === 'picture' ? (jsx_runtime_1.jsx(RenderModalPicture_1.RenderModalPicture, { renderMode: renderMode, scale: scale, setScale: setScale, imageFormatOptions: imageFormatOptions, jpegQuality: jpegQuality, setJpegQuality: setJpegQuality, videoImageFormat: videoImageFormat, stillImageFormat: stillImageFormat, compositionWidth: resolvedComposition.width, compositionHeight: resolvedComposition.height })) : tab === 'audio' ? (jsx_runtime_1.jsx(RenderModalAudio_1.RenderModalAudio, { muted: muted, renderMode: renderMode, setMuted: setMuted, codec: codec, audioCodec: audioCodec, setAudioCodec: setAudioCodec, enforceAudioTrack: enforceAudioTrack, setEnforceAudioTrackState: setEnforceAudioTrackState, customTargetAudioBitrate: customTargetAudioBitrate, setCustomTargetAudioBitrateValue: setCustomTargetAudioBitrateValue, setShouldHaveCustomTargetAudioBitrate: setShouldHaveCustomTargetAudioBitrate, shouldHaveCustomTargetAudioBitrate: shouldHaveCustomTargetAudioBitrate, forSeamlessAacConcatenation: forSeamlessAacConcatenation, setForSeamlessAacConcatenation: setForSeamlessAacConcatenation, separateAudioTo: separateAudioTo, setSeparateAudioTo: setSeparateAudioTo, outName: outName, sampleRate: sampleRate, setSampleRate: setSampleRate })) : tab === 'gif' ? (jsx_runtime_1.jsx(RenderModalGif_1.RenderModalGif, { everyNthFrame: everyNthFrame, limitNumberOfGifLoops: limitNumberOfGifLoops, numberOfGifLoopsSetting: numberOfGifLoopsSetting, setEveryNthFrameSetting: setEveryNthFrameSetting, setLimitNumberOfGifLoops: setLimitNumberOfGifLoops, setNumberOfGifLoopsSetting: setNumberOfGifLoopsSetting })) : tab === 'encoding' ? (jsx_runtime_1.jsx(RenderModalEncoding_1.RenderModalEncoding, { renderMode: renderMode, codec: codec, qualityControlType: qualityControlType, setQualityControl: setQualityControl, shouldDisplayQualityControlPicker: supportsBothQualityControls, crf: crf, setCrf: setCrf, maxCrf: maxCrf, minCrf: minCrf, customTargetVideoBitrate: customTargetVideoBitrate, setCustomTargetVideoBitrateValue: setCustomTargetVideoBitrateValue, encodingBufferSize: encodingBufferSize, setEncodingBufferSize: setEncodingBufferSize, encodingMaxRate: encodingMaxRate, setEncodingMaxRate: setEncodingMaxRate, pixelFormat: pixelFormat, pixelFormatOptions: pixelFormatOptions, colorSpace: colorSpace, setColorSpace: setColorSpace, x264Preset: x264Preset, setx264Preset: setx264Preset, gopSize: gopSize, setGopSize: setGopSize, hardwareAcceleration: hardwareAcceleration, setHardwareAcceleration: setHardwareAcceleration, disallowParallelEncoding: disallowParallelEncoding, setDisallowParallelEncoding: setDisallowParallelEncoding })) : tab === 'environment' ? (jsx_runtime_1.jsx(RenderModalEnvironmentVariables_1.RenderModalEnvironmentVariables, { envVariables: envVariables, setEnvVariables: setEnvVariables })) : tab === 'data' ? (jsx_runtime_1.jsx(DataEditor_1.DataEditor, { defaultProps: inputProps, setDefaultProps: setInputProps, unresolvedComposition: unresolvedComposition, propsEditType: "input-props", canSaveDefaultProps: {
                                 canUpdate: false,
                                 reason: 'render dialogue',
                                 determined: false,

package/dist/components/RenderModal/WebRenderModal.js

@@ -8,10 +8,10 @@ const react_1 = require("react");
 const ShortcutHint_1 = require("../../error-overlay/remotion-overlay/ShortcutHint");
 const audio_1 = require("../../icons/audio");
 const certificate_1 = require("../../icons/certificate");
-const data_1 = require("../../icons/data");
 const file_1 = require("../../icons/file");
 const frame_1 = require("../../icons/frame");
 const gear_1 = require("../../icons/gear");
+const input_props_1 = require("../../icons/input-props");
 const modals_1 = require("../../state/modals");
 const sidebar_1 = require("../../state/sidebar");
 const Button_1 = require("../Button");
@@ -414,24 +414,10 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
                     jsx_runtime_1.jsx(SegmentedControl_1.SegmentedControl, { items: renderTabOptions, needsWrapping: false }), jsx_runtime_1.jsx("div", { style: render_modals_1.flexer }), jsx_runtime_1.jsxs(Button_1.Button, { autoFocus: true, onClick: onAddToQueue, style: render_modals_1.buttonStyle, disabled: !outnameValidation.valid, children: ["Render ", renderMode, jsx_runtime_1.jsx(ShortcutHint_1.ShortcutHint, { keyToPress: "\u21B5", cmdOrCtrl: true })
                         ] })
                 ] }), jsx_runtime_1.jsxs("div", { style: render_modals_1.horizontalLayout, children: [
-                    jsx_runtime_1.jsxs("div", { style: render_modals_1.leftSidebar, children: [
-                            jsx_runtime_1.jsxs(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'general', onClick: () => setTab('general'), children: [
-                                    jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(file_1.FileIcon, { style: render_modals_1.icon }) }),
-                                    "General"] }), jsx_runtime_1.jsxs(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'data', onClick: () => setTab('data'), children: [
-                                    jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(data_1.DataIcon, { style: render_modals_1.icon }) }),
-                                    "Input Props"] }), renderMode !== 'audio' ? (jsx_runtime_1.jsxs(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'picture', onClick: () => setTab('picture'), children: [
-                                    jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(frame_1.PicIcon, { style: render_modals_1.icon }) }),
-                                    "Picture"] })) : null, renderMode === 'video' || renderMode === 'audio' ? (jsx_runtime_1.jsxs(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'audio', onClick: () => setTab('audio'), children: [
-                                    jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(audio_1.AudioIcon, { style: render_modals_1.icon }) }),
-                                    "Audio"] })) : null, jsx_runtime_1.jsxs(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'advanced', onClick: () => setTab('advanced'), children: [
-                                    jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(gear_1.GearIcon, { style: render_modals_1.icon }) }),
-                                    "Other"] }), jsx_runtime_1.jsxs(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: false, onClick: () => setSelectedModal({
+                    jsx_runtime_1.jsxs("div", { style: render_modals_1.leftSidebar, children: [jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'general', onClick: () => setTab('general'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(file_1.FileIcon, { color: color, style: render_modals_1.icon }) })), children: "General" }), jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'data', onClick: () => setTab('data'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(input_props_1.InputPropsIcon, { color: color, style: render_modals_1.icon }) })), children: "Input Props" }), renderMode !== 'audio' ? (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'picture', onClick: () => setTab('picture'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(frame_1.PicIcon, { color: color, style: render_modals_1.icon }) })), children: "Picture" })) : null, renderMode === 'video' || renderMode === 'audio' ? (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'audio', onClick: () => setTab('audio'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(audio_1.AudioIcon, { color: color, style: render_modals_1.icon }) })), children: "Audio" })) : null, jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'advanced', onClick: () => setTab('advanced'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(gear_1.GearIcon, { color: color, style: render_modals_1.icon }) })), children: "Other" }), jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: false, onClick: () => setSelectedModal({
                                     type: 'configure-license',
                                     initialPublicLicenseKey: publicLicenseKey,
-                                }), children: [
-                                    jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(certificate_1.CertificateIcon, { style: render_modals_1.icon }) }),
-                                    "License"] })
-                        ] }), jsx_runtime_1.jsx("div", { style: render_modals_1.optionsPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: tab === 'general' ? (jsx_runtime_1.jsx(WebRenderModalBasic_1.WebRenderModalBasic, { renderMode: renderMode, resolvedComposition: resolvedComposition, imageFormat: imageFormat, setStillFormat: setStillFormat, frame: frame, onFrameChanged: onFrameChanged, onFrameSetDirectly: onFrameSetDirectly, container: container, setContainerFormat: setContainerFormat, setCodec: setCodecWithContainer, encodableVideoCodecs: encodableVideoCodecs, effectiveVideoCodec: effectiveVideoCodec, startFrame: finalStartFrame, setStartFrame: setStartFrame, endFrame: finalEndFrame, setEndFrame: setEndFrame, outName: outName, onOutNameChange: onOutNameChange, validationMessage: outnameValidation.valid ? null : outnameValidation.error.message, logLevel: logLevel, setLogLevel: setLogLevel })) : tab === 'data' ? (jsx_runtime_1.jsx(DataEditor_1.DataEditor, { defaultProps: inputProps, setDefaultProps: setInputProps, unresolvedComposition: unresolvedComposition, propsEditType: "input-props", canSaveDefaultProps: {
+                                }), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(certificate_1.CertificateIcon, { color: color, style: render_modals_1.icon }) })), children: "License" })] }), jsx_runtime_1.jsx("div", { style: render_modals_1.optionsPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: tab === 'general' ? (jsx_runtime_1.jsx(WebRenderModalBasic_1.WebRenderModalBasic, { renderMode: renderMode, resolvedComposition: resolvedComposition, imageFormat: imageFormat, setStillFormat: setStillFormat, frame: frame, onFrameChanged: onFrameChanged, onFrameSetDirectly: onFrameSetDirectly, container: container, setContainerFormat: setContainerFormat, setCodec: setCodecWithContainer, encodableVideoCodecs: encodableVideoCodecs, effectiveVideoCodec: effectiveVideoCodec, startFrame: finalStartFrame, setStartFrame: setStartFrame, endFrame: finalEndFrame, setEndFrame: setEndFrame, outName: outName, onOutNameChange: onOutNameChange, validationMessage: outnameValidation.valid ? null : outnameValidation.error.message, logLevel: logLevel, setLogLevel: setLogLevel })) : tab === 'data' ? (jsx_runtime_1.jsx(DataEditor_1.DataEditor, { defaultProps: inputProps, setDefaultProps: setInputProps, unresolvedComposition: unresolvedComposition, propsEditType: "input-props", canSaveDefaultProps: {
                                 canUpdate: false,
                                 reason: 'render dialogue',
                                 determined: false,

package/dist/components/RenderModal/layout.js

@@ -8,12 +8,12 @@ exports.optionRow = {
     minHeight: 40,
     paddingLeft: 16,
     paddingRight: 16,
-    paddingTop: 8,
-    paddingBottom: 8,
+    paddingTop: 4,
+    paddingBottom: 4,
 };
 exports.label = {
-    width: 290,
-    fontSize: 15,
+    minWidth: 0,
+    fontSize: 14,
     lineHeight: '40px',
     color: colors_1.LIGHT_TEXT,
     fontFamily: 'sans-serif',
@@ -24,12 +24,14 @@ exports.label = {
 exports.rightRow = {
     display: 'flex',
     flexDirection: 'row',
+    alignItems: 'center',
     justifyContent: 'flex-end',
     alignSelf: 'center',
     flex: 1,
+    minWidth: 0,
 };
 exports.input = {
-    minWidth: 250,
+    minWidth: 0,
 };
 exports.fieldSetText = {
     color: colors_1.LIGHT_TEXT,