@remotion/studio 4.0.503 → 4.0.504

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,

package/dist/components/RenderModal/render-modals.js

@@ -4,8 +4,8 @@ exports.flexer = exports.buttonStyle = exports.icon = exports.iconContainer = ex
 const colors_1 = require("../../helpers/colors");
 const ModalContainer_1 = require("../ModalContainer");
 exports.outerModalStyle = {
-    width: (0, ModalContainer_1.getMaxModalWidth)(1000),
-    height: (0, ModalContainer_1.getMaxModalHeight)(640),
+    width: (0, ModalContainer_1.getMaxModalWidth)(800),
+    height: (0, ModalContainer_1.getMaxModalHeight)(490),
     overflow: 'hidden',
     display: 'flex',
     flexDirection: 'column',
@@ -19,7 +19,8 @@ exports.container = {
 };
 exports.optionsPanel = {
     display: 'flex',
-    width: '100%',
+    flex: 1,
+    minWidth: 0,
 };
 exports.horizontalLayout = {
     display: 'flex',
@@ -28,31 +29,33 @@ exports.horizontalLayout = {
     flex: 1,
 };
 exports.leftSidebar = {
-    padding: 12,
+    padding: 6,
 };
 exports.horizontalTab = {
-    width: 250,
+    width: 150,
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'center',
     textAlign: 'left',
-    fontSize: 16,
-    fontWeight: 'bold',
-    paddingLeft: 15,
-    paddingTop: 12,
-    paddingBottom: 12,
+    fontSize: 14,
+    fontWeight: 'normal',
+    paddingLeft: 8,
+    paddingTop: 6,
+    paddingBottom: 6,
+    borderRadius: 4,
 };
 exports.iconContainer = {
-    width: 20,
-    height: 20,
-    marginRight: 15,
+    width: 18,
+    height: 18,
+    marginRight: 8,
+    color: 'inherit',
     display: 'inline-flex',
     justifyContent: 'center',
     alignItems: 'center',
 };
 exports.icon = {
-    color: colors_1.CURRENT_COLOR_LOWERCASE,
-    height: 20,
+    color: 'inherit',
+    height: 18,
 };
 exports.buttonStyle = {
     backgroundColor: colors_1.BLUE,

package/dist/components/RenderQueue/RenderQueueRepeat.js

@@ -4,16 +4,12 @@ exports.RenderQueueRepeatItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../../helpers/colors");
-const mobile_layout_1 = require("../../helpers/mobile-layout");
 const retry_payload_1 = require("../../helpers/retry-payload");
 const modals_1 = require("../../state/modals");
-const sidebar_1 = require("../../state/sidebar");
 const InlineAction_1 = require("../InlineAction");
 const context_1 = require("./context");
 const RenderQueueRepeatItem = ({ job }) => {
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
-    const isMobileLayout = (0, mobile_layout_1.useMobileLayout)();
-    const { setSidebarCollapsedState } = (0, react_1.useContext)(sidebar_1.SidebarContext);
     const isClientJob = (0, context_1.isClientRenderJob)(job);
     const onClick = (0, react_1.useCallback)((e) => {
         e.stopPropagation();
@@ -25,16 +21,7 @@ const RenderQueueRepeatItem = ({ job }) => {
             const retryPayload = (0, retry_payload_1.makeRetryPayload)(job);
             setSelectedModal(retryPayload);
         }
-        if (isMobileLayout) {
-            setSidebarCollapsedState({ left: 'collapsed', right: 'collapsed' });
-        }
-    }, [
-        isMobileLayout,
-        job,
-        isClientJob,
-        setSelectedModal,
-        setSidebarCollapsedState,
-    ]);
+    }, [job, isClientJob, setSelectedModal]);
     const icon = (0, react_1.useMemo)(() => {
         return {
             height: 12,

package/dist/components/SelectedOutlineElement.js

@@ -66,6 +66,7 @@ const disable_sequence_interactivity_1 = require("./Timeline/disable-sequence-in
 const duplicate_selected_timeline_item_1 = require("./Timeline/duplicate-selected-timeline-item");
 const focus_inspector_field_1 = require("./Timeline/focus-inspector-field");
 const get_sequence_context_menu_items_1 = require("./Timeline/get-sequence-context-menu-items");
+const imperative_state_1 = require("./Timeline/imperative-state");
 const save_sequence_prop_1 = require("./Timeline/save-sequence-prop");
 const timeline_asset_link_1 = require("./Timeline/timeline-asset-link");
 const timeline_translate_utils_1 = require("./Timeline/timeline-translate-utils");
@@ -309,9 +310,6 @@ const SelectedOutlinePolygon = ({ allDragTargets, allDragOutlines, contextMenuVa
     const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const { setPropStatuses, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const { editorSnapping } = (0, react_1.useContext)(editor_snapping_1.EditorSnappingContext);
-    const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
-    const timelinePositionRef = (0, react_1.useRef)(timelinePosition);
-    timelinePositionRef.current = timelinePosition;
     const polygonRef = (0, react_1.useRef)(null);
     const points = (0, react_1.useMemo)(() => outline.points.map(selected_outline_measurement_1.pointToString).join(' '), [outline.points]);
     const drag = (_a = target === null || target === void 0 ? void 0 : target.drag) !== null && _a !== void 0 ? _a : null;
@@ -342,7 +340,7 @@ const SelectedOutlinePolygon = ({ allDragTargets, allDragOutlines, contextMenuVa
         const dragStates = (0, selected_outline_drag_1.getSelectedOutlineDragStates)({
             dragTargets: selected ? allDragTargets : [drag],
             getDragOverrides,
-            timelinePosition: timelinePositionRef.current,
+            timelinePosition: (0, imperative_state_1.getCurrentFrame)(),
         });
         let lastValues = new Map();
         let currentPointerX = startPointerX;
@@ -575,9 +573,6 @@ const SelectedOutlineScaleEdgeLine = ({ allScaleDragTargets, contextMenuValues,
     var _a, _b;
     const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const { setPropStatuses, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
-    const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
-    const timelinePositionRef = (0, react_1.useRef)(timelinePosition);
-    timelinePositionRef.current = timelinePosition;
     const scaleDrag = (_a = target === null || target === void 0 ? void 0 : target.scaleDrag) !== null && _a !== void 0 ? _a : null;
     const selected = (_b = target === null || target === void 0 ? void 0 : target.selected) !== null && _b !== void 0 ? _b : false;
     const lineRef = (0, react_1.useRef)(null);
@@ -603,7 +598,7 @@ const SelectedOutlineScaleEdgeLine = ({ allScaleDragTargets, contextMenuValues,
         const dragStates = (0, selected_outline_drag_1.getSelectedOutlineScaleDragStates)({
             dragTargets: selected ? allScaleDragTargets : [scaleDrag],
             getDragOverrides,
-            timelinePosition: timelinePositionRef.current,
+            timelinePosition: (0, imperative_state_1.getCurrentFrame)(),
         });
         let lastValues = new Map();
         let dragStarted = false;
@@ -744,9 +739,6 @@ const SelectedOutlineRotationCornerHandle = ({ allRotationDragTargets, contextMe
     const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const { setPropStatuses, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const { editorSnapping } = (0, react_1.useContext)(editor_snapping_1.EditorSnappingContext);
-    const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
-    const timelinePositionRef = (0, react_1.useRef)(timelinePosition);
-    timelinePositionRef.current = timelinePosition;
     const rotationDrag = (_a = target === null || target === void 0 ? void 0 : target.rotationDrag) !== null && _a !== void 0 ? _a : null;
     const selected = (_b = target === null || target === void 0 ? void 0 : target.selected) !== null && _b !== void 0 ? _b : false;
     const circleRef = (0, react_1.useRef)(null);
@@ -786,7 +778,7 @@ const SelectedOutlineRotationCornerHandle = ({ allRotationDragTargets, contextMe
         const dragStates = (0, selected_outline_drag_1.getSelectedOutlineRotationDragStates)({
             dragTargets: selected ? allRotationDragTargets : [rotationDrag],
             getDragOverrides,
-            timelinePosition: timelinePositionRef.current,
+            timelinePosition: (0, imperative_state_1.getCurrentFrame)(),
         });
         let previousAngle = (0, selected_outline_measurement_1.getAngleDegrees)(center, {
             x: event.clientX,

package/dist/components/SidebarRenderButton.js

@@ -5,15 +5,11 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const client_id_1 = require("../helpers/client-id");
-const mobile_layout_1 = require("../helpers/mobile-layout");
 const render_1 = require("../icons/render");
 const modals_1 = require("../state/modals");
-const sidebar_1 = require("../state/sidebar");
 const InlineAction_1 = require("./InlineAction");
 const SidebarRenderButton = ({ composition, visible }) => {
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
-    const { setSidebarCollapsedState } = (0, react_1.useContext)(sidebar_1.SidebarContext);
-    const isMobileLayout = (0, mobile_layout_1.useMobileLayout)();
     const iconStyle = (0, react_1.useMemo)(() => {
         return {
             style: {
@@ -84,17 +80,7 @@ const SidebarRenderButton = ({ composition, visible }) => {
             initialDarkMode: defaults.darkMode,
             readOnlyStudio: false,
         });
-        if (isMobileLayout) {
-            setSidebarCollapsedState({ left: 'collapsed', right: 'collapsed' });
-        }
-    }, [
-        composition.defaultProps,
-        composition.id,
-        isMobileLayout,
-        props,
-        setSelectedModal,
-        setSidebarCollapsedState,
-    ]);
+    }, [composition.defaultProps, composition.id, props, setSelectedModal]);
     const renderAction = (0, react_1.useCallback)((color) => {
         return jsx_runtime_1.jsx(render_1.ThinRenderIcon, { fill: color, svgProps: iconStyle });
     }, [iconStyle]);

package/dist/components/SizeSelector.js

@@ -4,6 +4,7 @@ exports.SizeSelector = exports.usePreviewSizeMenuItems = exports.getUniqueSizes
 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 get_preview_file_type_1 = require("../helpers/get-preview-file-type");
 const Checkmark_1 = require("../icons/Checkmark");
 const ControlButton_1 = require("./ControlButton");
@@ -123,6 +124,6 @@ const SizeSelector = () => {
     if (!zoomable) {
         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.SizeSelector = SizeSelector;

package/dist/components/SnappingToggle.js

@@ -14,13 +14,12 @@ const SnappingToggle = () => {
     const onClick = (0, react_1.useCallback)(() => {
         setEditorSnapping((current) => !current);
     }, [setEditorSnapping]);
-    const color = editorSnapping ? colors_1.BLUE : colors_1.WHITE;
     const accessibilityLabel = [
         editorSnapping ? 'Disable snapping' : 'Enable snapping',
         (0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? null : '(Shift+M)',
     ]
         .filter(no_react_1.NoReactInternals.truthy)
         .join(' ');
-    return (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, "aria-pressed": editorSnapping, "aria-keyshortcuts": "Shift+M", onClick: onClick, children: jsx_runtime_1.jsx(magnet_1.MagnetIcon, { style: { width: 17, height: 17 }, fill: color, "aria-hidden": "true", focusable: "false" }) }));
+    return (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, "aria-pressed": editorSnapping, "aria-keyshortcuts": "Shift+M", onClick: onClick, children: (color) => (jsx_runtime_1.jsx(magnet_1.MagnetIcon, { style: { width: 18, height: 18, transform: 'translateY(1px)' }, color: editorSnapping ? colors_1.BLUE : color, "aria-hidden": "true", focusable: "false" })) }));
 };
 exports.SnappingToggle = SnappingToggle;

package/dist/components/Spinner.d.ts

@@ -2,4 +2,5 @@ import React from 'react';
 export declare const Spinner: React.FC<{
     readonly size: number;
     readonly duration: number;
+    readonly color?: string;
 }>;

package/dist/components/Spinner.js

@@ -10,7 +10,7 @@ const className = '__remotion_spinner_line';
 const remotionSpinnerAnimation = '__remotion_spinner_animation';
 // Generated from https://github.com/remotion-dev/template-next/commit/9282c93f7c51ada31a42e18a94680fa09a14eee3
 const translated = 'M 44 0 L 50 0 a 6 6 0 0 1 6 6 L 56 26 a 6 6 0 0 1 -6 6 L 50 32 a 6 6 0 0 1 -6 -6 L 44 6 a 6 6 0 0 1 6 -6 Z';
-const Spinner = ({ size, duration }) => {
+const Spinner = ({ size, duration, color = colors_1.LIGHT_TEXT }) => {
     const style = (0, react_1.useMemo)(() => {
         return {
             width: size,
@@ -36,7 +36,7 @@ const Spinner = ({ size, duration }) => {
                             rotate: `${(index * Math.PI * 2) / lines}rad`,
                             transformOrigin: 'center center',
                             animationDelay: `${index * (duration / lines) - duration}s`,
-                        }, d: translated, fill: colors_1.LIGHT_TEXT }, index));
+                        }, d: translated, fill: color }, index));
                 }) })
         ] }));
 };

package/dist/components/Splitter/SplitterContainer.d.ts

@@ -8,6 +8,7 @@ export declare const SplitterContainer: React.FC<{
     readonly maxFlexerSize: number | null;
     readonly minFlexerSize: number | null;
     readonly maxAntiFlexerSize: number | null;
+    readonly minAntiFlexerSize: number | null;
     readonly id: string;
     readonly defaultFlex: number;
     readonly children: React.ReactNode;

package/dist/components/Splitter/SplitterContainer.js

@@ -20,7 +20,7 @@ exports.containerColumn = {
     flex: 1,
     height: 0,
 };
-const SplitterContainer = ({ orientation, children, defaultFlex, maxFlex, minFlex, maxFlexerSize, minFlexerSize, maxAntiFlexerSize, id, }) => {
+const SplitterContainer = ({ orientation, children, defaultFlex, maxFlex, minFlex, maxFlexerSize, minFlexerSize, maxAntiFlexerSize, minAntiFlexerSize, id, }) => {
     const [initialTimelineFlex, persistFlex] = (0, timeline_1.useTimelineFlex)(id);
     const [flexValue, setFlexValue] = (0, react_1.useState)(initialTimelineFlex !== null && initialTimelineFlex !== void 0 ? initialTimelineFlex : defaultFlex);
     const ref = (0, react_1.useRef)(null);
@@ -39,6 +39,7 @@ const SplitterContainer = ({ orientation, children, defaultFlex, maxFlex, minFle
         maxAntiFlexerSize,
         maxFlex,
         maxFlexerSize,
+        minAntiFlexerSize,
         minFlex,
         minFlexerSize,
     });
@@ -55,6 +56,7 @@ const SplitterContainer = ({ orientation, children, defaultFlex, maxFlex, minFle
             maxFlexerSize,
             minFlexerSize,
             maxAntiFlexerSize,
+            minAntiFlexerSize,
             defaultFlex,
             persistFlex,
         };
@@ -66,6 +68,7 @@ const SplitterContainer = ({ orientation, children, defaultFlex, maxFlex, minFle
         maxFlexerSize,
         minFlexerSize,
         maxAntiFlexerSize,
+        minAntiFlexerSize,
         minFlex,
         orientation,
         persistFlex,

package/dist/components/Splitter/SplitterContext.d.ts

@@ -14,6 +14,7 @@ export type TSplitterContext = {
     maxFlexerSize: number | null;
     minFlexerSize: number | null;
     maxAntiFlexerSize: number | null;
+    minAntiFlexerSize: number | null;
     defaultFlex: number;
     id: string;
     persistFlex: (value: number) => void;
@@ -22,14 +23,14 @@ export type TSplitterContext = {
         y: number;
     }>;
 };
-type SplitterFlexBounds = Pick<TSplitterContext, 'maxAntiFlexerSize' | 'maxFlex' | 'maxFlexerSize' | 'minFlex' | 'minFlexerSize'> & {
+type SplitterFlexBounds = Pick<TSplitterContext, 'maxAntiFlexerSize' | 'maxFlex' | 'maxFlexerSize' | 'minAntiFlexerSize' | 'minFlex' | 'minFlexerSize'> & {
     readonly availableSize: number | null;
 };
-export declare const getSplitterFlexBounds: ({ availableSize, maxAntiFlexerSize, maxFlex, maxFlexerSize, minFlex, minFlexerSize, }: SplitterFlexBounds) => {
+export declare const getSplitterFlexBounds: ({ availableSize, maxAntiFlexerSize, maxFlex, maxFlexerSize, minAntiFlexerSize, minFlex, minFlexerSize, }: SplitterFlexBounds) => {
     minFlex: number;
     maxFlex: number;
 };
-export declare const getClampedSplitterFlex: ({ flexValue, ...bounds }: Pick<TSplitterContext, "maxAntiFlexerSize" | "maxFlex" | "maxFlexerSize" | "minFlex" | "minFlexerSize"> & {
+export declare const getClampedSplitterFlex: ({ flexValue, ...bounds }: Pick<TSplitterContext, "maxAntiFlexerSize" | "maxFlex" | "maxFlexerSize" | "minAntiFlexerSize" | "minFlex" | "minFlexerSize"> & {
     readonly availableSize: number | null;
 } & {
     readonly flexValue: number;

package/dist/components/Splitter/SplitterContext.js

@@ -5,12 +5,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SplitterContext = exports.getClampedSplitterFlex = exports.getSplitterFlexBounds = void 0;
 const react_1 = __importDefault(require("react"));
-const getSplitterFlexBounds = ({ availableSize, maxAntiFlexerSize, maxFlex, maxFlexerSize, minFlex, minFlexerSize, }) => {
+const getSplitterFlexBounds = ({ availableSize, maxAntiFlexerSize, maxFlex, maxFlexerSize, minAntiFlexerSize, minFlex, minFlexerSize, }) => {
     if (availableSize === null || availableSize <= 0) {
         return { minFlex, maxFlex };
     }
     const minimum = Math.min(1, Math.max(minFlex, minFlexerSize === null ? 0 : minFlexerSize / availableSize, maxAntiFlexerSize === null ? 0 : 1 - maxAntiFlexerSize / availableSize));
-    const maximum = Math.max(minimum, Math.min(maxFlex, maxFlexerSize === null ? 1 : maxFlexerSize / availableSize));
+    const maximum = Math.max(minimum, Math.min(maxFlex, maxFlexerSize === null ? 1 : maxFlexerSize / availableSize, minAntiFlexerSize === null ? 1 : 1 - minAntiFlexerSize / availableSize));
     return { minFlex: minimum, maxFlex: maximum };
 };
 exports.getSplitterFlexBounds = getSplitterFlexBounds;
@@ -30,6 +30,7 @@ exports.SplitterContext = react_1.default.createContext({
     maxFlexerSize: null,
     minFlexerSize: null,
     maxAntiFlexerSize: null,
+    minAntiFlexerSize: null,
     defaultFlex: 1,
     id: '--',
     persistFlex: () => undefined,

package/dist/components/Splitter/SplitterElement.js

@@ -9,6 +9,7 @@ const SplitterContext_1 = require("./SplitterContext");
 const SplitterElement = ({ children, type, sticky }) => {
     const context = (0, react_1.useContext)(SplitterContext_1.SplitterContext);
     const maxSize = type === 'flexer' ? context.maxFlexerSize : context.maxAntiFlexerSize;
+    const minSize = type === 'flexer' ? context.minFlexerSize : context.minAntiFlexerSize;
     const style = (0, react_1.useMemo)(() => {
         return {
             flex: 
@@ -22,8 +23,12 @@ const SplitterElement = ({ children, type, sticky }) => {
             maxHeight: context.orientation === 'horizontal'
                 ? (maxSize !== null && maxSize !== void 0 ? maxSize : undefined)
                 : undefined,
+            minWidth: context.orientation === 'vertical' ? (minSize !== null && minSize !== void 0 ? minSize : undefined) : undefined,
+            minHeight: context.orientation === 'horizontal'
+                ? (minSize !== null && minSize !== void 0 ? minSize : undefined)
+                : undefined,
         };
-    }, [context.flexValue, context.orientation, maxSize, type]);
+    }, [context.flexValue, context.orientation, maxSize, minSize, type]);
     const stickStyle = (0, react_1.useMemo)(() => {
         return {
             position: 'absolute',

package/dist/components/Splitter/SplitterHandle.js

@@ -54,6 +54,7 @@ const SplitterHandle = ({ allowToCollapse, onCollapse }) => {
                 maxAntiFlexerSize: dragContext.maxAntiFlexerSize,
                 maxFlex: dragContext.maxFlex,
                 maxFlexerSize: dragContext.maxFlexerSize,
+                minAntiFlexerSize: dragContext.minAntiFlexerSize,
                 minFlex: dragContext.minFlex,
                 minFlexerSize: dragContext.minFlexerSize,
             });

package/dist/components/Tabs/vertical.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 export declare const VerticalTab: React.FC<{
     readonly children: React.ReactNode;
     readonly onClick: React.MouseEventHandler<HTMLButtonElement>;
+    readonly renderIcon?: (color: string) => React.ReactNode;
     readonly style?: React.CSSProperties;
     readonly selected: boolean;
 }>;

package/dist/components/Tabs/vertical.js

@@ -12,13 +12,14 @@ const selectorButton = {
     paddingLeft: 16,
     display: 'flex',
     flexDirection: 'row',
+    fontFamily: 'sans-serif',
     fontSize: 14,
     color: 'inherit',
     alignItems: 'center',
     userSelect: 'none',
     WebkitUserSelect: 'none',
 };
-const VerticalTab = ({ children, onClick, style, selected }) => {
+const VerticalTab = ({ children, onClick, renderIcon, style, selected }) => {
     const [hovered, setHovered] = (0, react_1.useState)(false);
     const { tabIndex } = (0, z_index_1.useZIndex)();
     const onPointerEnter = (0, react_1.useCallback)(() => {
@@ -27,19 +28,16 @@ const VerticalTab = ({ children, onClick, style, selected }) => {
     const onPointerLeave = (0, react_1.useCallback)(() => {
         setHovered(false);
     }, []);
+    const color = selected || hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT;
     const definiteStyle = (0, react_1.useMemo)(() => {
         return {
             ...selectorButton,
-            backgroundColor: selected
-                ? colors_1.SELECTED_BACKGROUND
-                : hovered
-                    ? colors_1.WHITE_ALPHA_06
-                    : colors_1.TRANSPARENT,
-            color: selected ? colors_1.WHITE : colors_1.LIGHT_TEXT,
-            boxShadow: selected ? 'none' : undefined,
+            backgroundColor: selected || hovered ? colors_1.WHITE_ALPHA_06 : colors_1.TRANSPARENT,
+            color,
+            boxShadow: 'none',
             ...style,
         };
-    }, [hovered, selected, style]);
-    return (jsx_runtime_1.jsx("button", { style: definiteStyle, type: "button", onClick: onClick, tabIndex: tabIndex, onPointerLeave: onPointerLeave, onPointerEnter: onPointerEnter, children: children }));
+    }, [color, hovered, selected, style]);
+    return (jsx_runtime_1.jsxs("button", { style: definiteStyle, type: "button", onClick: onClick, tabIndex: tabIndex, onPointerLeave: onPointerLeave, onPointerEnter: onPointerEnter, children: [renderIcon ? renderIcon(color) : null, children] }));
 };
 exports.VerticalTab = VerticalTab;