@remotion/studio 4.0.423 → 4.0.424

package/dist/components/RenderButton.js

@@ -92,7 +92,7 @@ const getInitialRenderType = (readOnlyStudio) => {
 const RenderButton = ({ readOnlyStudio, }) => {
     const { inFrame, outFrame } = (0, in_out_1.useTimelineInOutFramePosition)();
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
-    const [renderType, setRenderType] = (0, react_1.useState)(() => getInitialRenderType(readOnlyStudio));
+    const [preferredRenderType, setPreferredRenderType] = (0, react_1.useState)(() => getInitialRenderType(readOnlyStudio));
     const [dropdownOpened, setDropdownOpened] = (0, react_1.useState)(false);
     const dropdownRef = (0, react_1.useRef)(null);
     const containerRef = (0, react_1.useRef)(null);
@@ -132,8 +132,18 @@ const RenderButton = ({ readOnlyStudio, }) => {
     }, [refresh]);
     const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)
         .previewServerState.type;
+    const canRender = connectionStatus === 'connected' || show_browser_rendering_1.SHOW_BROWSER_RENDERING;
+    const renderType = (0, react_1.useMemo)(() => {
+        if (connectionStatus === 'disconnected' && show_browser_rendering_1.SHOW_BROWSER_RENDERING) {
+            return 'client-render';
+        }
+        if (!show_browser_rendering_1.SHOW_BROWSER_RENDERING) {
+            return 'server-render';
+        }
+        return preferredRenderType;
+    }, [connectionStatus, preferredRenderType]);
     const shortcut = (0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? '' : '(R)';
-    const tooltip = connectionStatus === 'connected'
+    const tooltip = canRender
         ? 'Export the current composition ' + shortcut
         : 'Connect to the Studio server to render';
     const iconStyle = (0, react_1.useMemo)(() => {
@@ -148,7 +158,8 @@ const RenderButton = ({ readOnlyStudio, }) => {
     const getCurrentFrame = player_1.PlayerInternals.useFrameImperative();
     const { props } = (0, react_1.useContext)(remotion_1.Internals.EditorPropsContext);
     const openServerRenderModal = (0, react_1.useCallback)(() => {
-        var _a, _b, _c;
+        var _a;
+        var _b, _c;
         if (!video) {
             return null;
         }
@@ -253,7 +264,7 @@ const RenderButton = ({ readOnlyStudio, }) => {
         setDropdownOpened(false);
     }, []);
     const handleRenderTypeChange = (0, react_1.useCallback)((newType) => {
-        setRenderType(newType);
+        setPreferredRenderType(newType);
         try {
             localStorage.setItem(RENDER_TYPE_STORAGE_KEY, newType);
         }
@@ -333,10 +344,10 @@ const RenderButton = ({ readOnlyStudio, }) => {
         return {
             ...splitButtonContainer,
             borderColor: colors_1.INPUT_BORDER_COLOR_UNHOVERED,
-            opacity: connectionStatus !== 'connected' ? 0.7 : 1,
-            cursor: connectionStatus !== 'connected' ? 'inherit' : 'pointer',
+            opacity: canRender ? 1 : 0.7,
+            cursor: canRender ? 'pointer' : 'inherit',
         };
-    }, [connectionStatus]);
+    }, [canRender]);
     const renderLabel = renderType === 'server-render' ? 'Render' : 'Render on web';
     const shouldShowDropdown = (0, react_1.useMemo)(() => {
         // Server render is not available
@@ -352,8 +363,14 @@ const RenderButton = ({ readOnlyStudio, }) => {
     if (!video) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", { style: { display: 'none' }, id: "render-modal-button-server", disabled: connectionStatus !== 'connected' && renderType === 'server-render', onClick: openServerRenderModal, type: "button" }), ' ', (0, jsx_runtime_1.jsx)("button", { style: { display: 'none' }, id: "render-modal-button-client", onClick: openClientRenderModal, type: "button" }), (0, jsx_runtime_1.jsxs)("div", { ref: containerRef, style: containerStyle, title: tooltip, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", style: mainButtonStyle, onClick: onClick, id: "render-modal-button", disabled: connectionStatus !== 'connected' && renderType === 'server-render', children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", style: mainButtonContent, children: [(0, jsx_runtime_1.jsx)(render_1.ThinRenderIcon, { fill: "currentcolor", svgProps: iconStyle }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("span", { style: label, children: renderLabel })] }) }), shouldShowDropdown ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: dividerStyle }), (0, jsx_runtime_1.jsx)("button", { ref: dropdownRef, type: "button", style: dropdownTriggerStyle, disabled: connectionStatus !== 'connected', className: is_menu_item_1.MENU_INITIATOR_CLASSNAME, onPointerDown: onPointerDown, onClick: onClickDropdown, children: (0, jsx_runtime_1.jsx)(caret_1.CaretDown, {}) })] })) : null] }), portalStyle
-                ? react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)("div", { style: styles_1.fullScreenOverlay, children: (0, jsx_runtime_1.jsx)("div", { style: styles_1.outerPortal, className: "css-reset", children: (0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onOutsideClick: onHideDropdown, onEscape: onHideDropdown, children: (0, jsx_runtime_1.jsx)("div", { style: portalStyle, children: (0, 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))
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsx("button", { style: { display: 'none' }, id: "render-modal-button-server", disabled: !canRender, onClick: openServerRenderModal, type: "button" }), ' ', jsx_runtime_1.jsx("button", { style: { display: 'none' }, id: "render-modal-button-client", onClick: openClientRenderModal, type: "button" }), jsx_runtime_1.jsxs("div", { ref: containerRef, style: containerStyle, title: tooltip, children: [
+                    jsx_runtime_1.jsx("button", { type: "button", style: mainButtonStyle, onClick: onClick, id: "render-modal-button", disabled: !canRender, children: jsx_runtime_1.jsxs(layout_1.Row, { align: "center", style: mainButtonContent, children: [
+                                jsx_runtime_1.jsx(render_1.ThinRenderIcon, { fill: "currentcolor", svgProps: iconStyle }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("span", { style: label, children: renderLabel })
+                            ] }) }), shouldShowDropdown ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                            jsx_runtime_1.jsx("div", { style: dividerStyle }), jsx_runtime_1.jsx("button", { ref: dropdownRef, type: "button", style: dropdownTriggerStyle, disabled: connectionStatus !== 'connected', className: is_menu_item_1.MENU_INITIATOR_CLASSNAME, onPointerDown: onPointerDown, onClick: onClickDropdown, children: jsx_runtime_1.jsx(caret_1.CaretDown, {}) })
+                        ] })) : null] }), 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, 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] }));
 };
 exports.RenderButton = RenderButton;

package/dist/components/RenderModal/CliCopyButton.js

@@ -33,8 +33,8 @@ const CliCopyButton = ({ valueToCopy, }) => {
     const fillColor = (0, react_1.useMemo)(() => {
         return hovered ? 'white' : colors_1.LIGHT_TEXT;
     }, [hovered]);
-    const clipboardIcon = (0, jsx_runtime_1.jsx)(clipboard_1.ClipboardIcon, { color: fillColor, style: svgStyle });
-    const checkSvg = ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", style: svgStyle, children: (0, jsx_runtime_1.jsx)("path", { fill: fillColor, d: "M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z" }) }));
+    const clipboardIcon = jsx_runtime_1.jsx(clipboard_1.ClipboardIcon, { color: fillColor, style: svgStyle });
+    const checkSvg = (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", style: svgStyle, children: jsx_runtime_1.jsx("path", { fill: fillColor, d: "M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z" }) }));
     const onPointerEnter = (0, react_1.useCallback)(() => {
         setHovered(true);
     }, []);
@@ -52,7 +52,7 @@ const CliCopyButton = ({ valueToCopy, }) => {
         const to = setTimeout(() => handleClear(), 2000);
         return () => clearTimeout(to);
     }, [copied]);
-    return copied ? ((0, jsx_runtime_1.jsx)("span", { style: copiedStyle, children: checkSvg })) : ((0, jsx_runtime_1.jsx)("button", { type: "button", onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: buttonStyle, onClick: () => {
+    return copied ? (jsx_runtime_1.jsx("span", { style: copiedStyle, children: checkSvg })) : (jsx_runtime_1.jsx("button", { type: "button", onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: buttonStyle, onClick: () => {
             navigator.clipboard.writeText(valueToCopy);
             setCopied(true);
         }, children: clipboardIcon }));

package/dist/components/RenderModal/ClientRenderProgress.js

@@ -24,22 +24,18 @@ const right = {
     textAlign: 'right',
     flex: 1,
 };
-const RenderingProgress = ({ renderedFrames, totalFrames }) => {
-    const done = renderedFrames === totalFrames;
-    const progress = totalFrames > 0 ? renderedFrames / totalFrames : 0;
-    return ((0, jsx_runtime_1.jsxs)("div", { style: progressItem, children: [done ? (0, jsx_runtime_1.jsx)(SuccessIcon_1.SuccessIcon, {}) : (0, jsx_runtime_1.jsx)(CircularProgress_1.CircularProgress, { progress: progress }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("div", { style: label, children: done
-                    ? `Rendered ${totalFrames} frames`
-                    : `Rendering ${renderedFrames} / ${totalFrames} frames` })] }));
-};
 const EncodingProgress = ({ encodedFrames, totalFrames }) => {
     const done = encodedFrames === totalFrames;
     const progress = totalFrames > 0 ? encodedFrames / totalFrames : 0;
-    return ((0, jsx_runtime_1.jsxs)("div", { style: progressItem, children: [done ? (0, jsx_runtime_1.jsx)(SuccessIcon_1.SuccessIcon, {}) : (0, jsx_runtime_1.jsx)(CircularProgress_1.CircularProgress, { progress: progress }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("div", { style: label, children: done
+    return (jsx_runtime_1.jsxs("div", { style: progressItem, children: [done ? jsx_runtime_1.jsx(SuccessIcon_1.SuccessIcon, {}) : jsx_runtime_1.jsx(CircularProgress_1.CircularProgress, { progress: progress }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: label, children: done
                     ? `Encoded ${totalFrames} frames`
-                    : `Encoding ${encodedFrames} / ${totalFrames} frames` })] }));
+                    : `Encoding ${encodedFrames} / ${totalFrames} frames` })
+        ] }));
 };
 const DoneStatus = ({ job }) => {
-    return ((0, jsx_runtime_1.jsxs)("div", { style: progressItem, children: [(0, jsx_runtime_1.jsx)(SuccessIcon_1.SuccessIcon, {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("div", { style: label, children: job.outName }), (0, jsx_runtime_1.jsx)("div", { style: right, children: (0, studio_shared_1.formatBytes)(job.metadata.sizeInBytes) })] }));
+    return (jsx_runtime_1.jsxs("div", { style: progressItem, children: [
+            jsx_runtime_1.jsx(SuccessIcon_1.SuccessIcon, {}), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: label, children: job.outName }), jsx_runtime_1.jsx("div", { style: right, children: (0, studio_shared_1.formatBytes)(job.metadata.sizeInBytes) })
+        ] }));
 };
 const ClientRenderProgress = ({ job }) => {
     if (job.status === 'idle' ||
@@ -48,12 +44,18 @@ const ClientRenderProgress = ({ job }) => {
         throw new Error('This component should not be rendered when the job is idle, failed, or cancelled');
     }
     if (job.status === 'done') {
-        return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 0.5 }), (0, jsx_runtime_1.jsx)(DoneStatus, { job: job }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 })] }));
+        return (jsx_runtime_1.jsxs("div", { children: [
+                jsx_runtime_1.jsx(layout_1.Spacing, { y: 0.5 }), jsx_runtime_1.jsx(DoneStatus, { job: job }), jsx_runtime_1.jsx(layout_1.Spacing, { y: 1 })
+            ] }));
     }
     if (job.status === 'saving') {
-        return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 0.5 }), (0, jsx_runtime_1.jsx)("div", { style: label, children: "Saving to out/..." }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 })] }));
+        return (jsx_runtime_1.jsxs("div", { children: [
+                jsx_runtime_1.jsx(layout_1.Spacing, { y: 0.5 }), jsx_runtime_1.jsx("div", { style: label, children: "Saving to out/..." }), jsx_runtime_1.jsx(layout_1.Spacing, { y: 1 })
+            ] }));
     }
-    const { renderedFrames, encodedFrames, totalFrames } = job.progress;
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 0.5 }), (0, jsx_runtime_1.jsx)(RenderingProgress, { renderedFrames: renderedFrames, totalFrames: totalFrames }), job.type === 'client-video' && ((0, jsx_runtime_1.jsx)(EncodingProgress, { encodedFrames: encodedFrames, totalFrames: totalFrames })), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 })] }));
+    const { encodedFrames, totalFrames } = job.progress;
+    return (jsx_runtime_1.jsxs("div", { children: [
+            jsx_runtime_1.jsx(layout_1.Spacing, { y: 0.5 }), job.type === 'client-video' && (jsx_runtime_1.jsx(EncodingProgress, { encodedFrames: encodedFrames, totalFrames: totalFrames })), jsx_runtime_1.jsx(layout_1.Spacing, { y: 1 })
+        ] }));
 };
 exports.ClientRenderProgress = ClientRenderProgress;

package/dist/components/RenderModal/CrfSetting.d.ts

@@ -1,6 +1,5 @@
-import type { Codec } from '@remotion/renderer';
 import type { AvailableOptions } from '@remotion/renderer/client';
-export declare const useCrfState: (codec: Codec) => {
+export declare const useCrfState: (codec: "aac" | "gif" | "h264" | "h264-mkv" | "h264-ts" | "h265" | "mp3" | "prores" | "vp8" | "vp9" | "wav") => {
     crf: number | null;
     setCrf: import("react").Dispatch<import("react").SetStateAction<number>>;
     minCrf: number;

package/dist/components/RenderModal/CrfSetting.js

@@ -41,6 +41,6 @@ const useCrfState = (codec) => {
 };
 exports.useCrfState = useCrfState;
 const CrfSetting = ({ crf, setCrf, min, max, option }) => {
-    return ((0, jsx_runtime_1.jsx)(NumberSetting_1.NumberSetting, { min: min, max: max, name: "CRF", onValueChanged: setCrf, value: crf, step: 1, hint: option }));
+    return (jsx_runtime_1.jsx(NumberSetting_1.NumberSetting, { min: min, max: max, name: "CRF", onValueChanged: setCrf, value: crf, step: 1, hint: option }));
 };
 exports.CrfSetting = CrfSetting;

package/dist/components/RenderModal/DataEditor.js

@@ -291,13 +291,15 @@ const DataEditor = ({ unresolvedComposition, defaultProps, setDefaultProps, mayS
         serializedJSON,
     ]);
     if (connectionStatus === 'disconnected') {
-        return ((0, jsx_runtime_1.jsxs)("div", { style: explainer, children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 5 }), (0, jsx_runtime_1.jsx)("div", { style: errorExplanation, children: "The studio server has disconnected. Reconnect to edit the schema." }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 2, block: true })] }));
+        return (jsx_runtime_1.jsxs("div", { style: explainer, children: [
+                jsx_runtime_1.jsx(layout_1.Spacing, { y: 5 }), jsx_runtime_1.jsx("div", { style: errorExplanation, children: "The studio server has disconnected. Reconnect to edit the schema." }), jsx_runtime_1.jsx(layout_1.Spacing, { y: 2, block: true })
+            ] }));
     }
     if (schema === 'no-zod') {
-        return (0, jsx_runtime_1.jsx)(SchemaErrorMessages_1.ZodNotInstalled, {});
+        return jsx_runtime_1.jsx(SchemaErrorMessages_1.ZodNotInstalled, {});
     }
     if (schema === 'no-schema') {
-        return (0, jsx_runtime_1.jsx)(SchemaErrorMessages_1.NoSchemaDefined, {});
+        return jsx_runtime_1.jsx(SchemaErrorMessages_1.NoSchemaDefined, {});
     }
     if (!z) {
         throw new Error('expected zod');
@@ -312,13 +314,18 @@ const DataEditor = ({ unresolvedComposition, defaultProps, setDefaultProps, mayS
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const typeName = def.typeName;
     if (typeName === z.ZodFirstPartyTypeKind.ZodAny) {
-        return (0, jsx_runtime_1.jsx)(SchemaErrorMessages_1.NoSchemaDefined, {});
+        return jsx_runtime_1.jsx(SchemaErrorMessages_1.NoSchemaDefined, {});
     }
     if (!unresolvedComposition.defaultProps) {
-        return (0, jsx_runtime_1.jsx)(SchemaErrorMessages_1.NoDefaultProps, {});
+        return jsx_runtime_1.jsx(SchemaErrorMessages_1.NoDefaultProps, {});
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { style: outer, children: [(0, jsx_runtime_1.jsxs)("div", { style: controlContainer, children: [(0, jsx_runtime_1.jsxs)("div", { style: tabWrapper, children: [(0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: modeItems, needsWrapping: false }), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), warnings.length > 0 ? ((0, jsx_runtime_1.jsx)(WarningIndicatorButton_1.WarningIndicatorButton, { setShowWarning: setShowWarning, showWarning: showWarning, warningCount: warnings.length })) : null] }), showWarning && warnings.length > 0
-                        ? warnings.map((warning) => ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { message: warning, align: "flex-start", type: "warning" })] }, warning)))
-                        : null] }), mode === 'schema' ? ((0, jsx_runtime_1.jsx)(SchemaEditor_1.SchemaEditor, { unsavedDefaultProps: defaultProps, setValue: setDefaultProps, schema: schema, zodValidationResult: zodValidationResult, savedDefaultProps: unresolvedComposition.defaultProps, onSave: onSave, showSaveButton: showSaveButton, saving: saving, saveDisabledByParent: !zodValidationResult.success })) : ((0, jsx_runtime_1.jsx)(RenderModalJSONPropsEditor_1.RenderModalJSONPropsEditor, { value: defaultProps !== null && defaultProps !== void 0 ? defaultProps : {}, setValue: setDefaultProps, onSave: onUpdate, showSaveButton: showSaveButton, serializedJSON: serializedJSON, defaultProps: unresolvedComposition.defaultProps, schema: schema }))] }));
+    return (jsx_runtime_1.jsxs("div", { style: outer, children: [
+            jsx_runtime_1.jsxs("div", { style: controlContainer, children: [
+                    jsx_runtime_1.jsxs("div", { style: tabWrapper, children: [
+                            jsx_runtime_1.jsx(SegmentedControl_1.SegmentedControl, { items: modeItems, needsWrapping: false }), jsx_runtime_1.jsx(layout_1.Flex, {}), warnings.length > 0 ? (jsx_runtime_1.jsx(WarningIndicatorButton_1.WarningIndicatorButton, { setShowWarning: setShowWarning, showWarning: showWarning, warningCount: warnings.length })) : null] }), showWarning && warnings.length > 0
+                        ? warnings.map((warning) => (jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [
+                                jsx_runtime_1.jsx(layout_1.Spacing, { y: 1 }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { message: warning, align: "flex-start", type: "warning" })
+                            ] }, warning)))
+                        : null] }), mode === 'schema' ? (jsx_runtime_1.jsx(SchemaEditor_1.SchemaEditor, { unsavedDefaultProps: defaultProps, setValue: setDefaultProps, schema: schema, zodValidationResult: zodValidationResult, savedDefaultProps: unresolvedComposition.defaultProps, onSave: onSave, showSaveButton: showSaveButton, saving: saving, saveDisabledByParent: !zodValidationResult.success })) : (jsx_runtime_1.jsx(RenderModalJSONPropsEditor_1.RenderModalJSONPropsEditor, { value: defaultProps !== null && defaultProps !== void 0 ? defaultProps : {}, setValue: setDefaultProps, onSave: onUpdate, showSaveButton: showSaveButton, serializedJSON: serializedJSON, defaultProps: unresolvedComposition.defaultProps, schema: schema }))] }));
 };
 exports.DataEditor = DataEditor;

package/dist/components/RenderModal/EnforceAudioTrackSetting.js

@@ -11,6 +11,10 @@ const EnforceAudioTrackSetting = ({ enforceAudioTrack, muted, setEnforceAudioTra
     const onEnforceAudioTrackChanged = (0, react_1.useCallback)((e) => {
         setEnforceAudioTrack(e.target.checked);
     }, [setEnforceAudioTrack]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.label, children: ["Enforce Audio Track", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(OptionExplainerBubble_1.OptionExplainerBubble, { id: "enforceAudioOption" })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { disabled: muted && !enforceAudioTrack, checked: enforceAudioTrack, onChange: onEnforceAudioTrackChanged, name: "enforce-audio-track" }) })] }));
+    return (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+            jsx_runtime_1.jsxs("div", { style: layout_2.label, children: ["Enforce Audio Track",
+                    jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(OptionExplainerBubble_1.OptionExplainerBubble, { id: "enforceAudioOption" })
+                ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(Checkbox_1.Checkbox, { disabled: muted && !enforceAudioTrack, checked: enforceAudioTrack, onChange: onEnforceAudioTrackChanged, name: "enforce-audio-track" }) })
+        ] }));
 };
 exports.EnforceAudioTrackSetting = EnforceAudioTrackSetting;

package/dist/components/RenderModal/EnvInput.js

@@ -79,6 +79,9 @@ const EnvInput = ({ onEnvKeyChange, onEnvValChange, envKey, envVal, onDelete, in
         setValueWarningEligible(true);
     }, []);
     const isNodeEnvKey = envKey.trim() === 'NODE_ENV';
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { status: isNodeEnvKey || isDuplicate || isKeyMissing ? 'warning' : 'ok', type: "text", placeholder: "Key", style: input, value: envKey, onBlur: makeKeyWarningEligible, autoFocus: autoFocus, onChange: handleKeyChange, rightAlign: false }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { status: isValMissing ? 'warning' : 'ok', placeholder: "Value", type: showInPlainText ? 'text' : 'password', style: input, value: envVal, onBlur: makeValueWarningEligible, onChange: handleValueChange, rightAlign: false }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1.5 }), (0, jsx_runtime_1.jsx)(InlineEyeIcon_1.InlineEyeButton, { enabled: !showInPlainText, onClick: togglePlainText }), (0, jsx_runtime_1.jsx)(InlineRemoveButton_1.InlineRemoveButton, { onClick: handleDelete })] }), isNodeEnvKey ? ((0, jsx_runtime_1.jsx)("div", { style: validationStyle, children: (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", type: "warning", message: "NODE_ENV will be overwritten by Remotion during the render process." }) })) : null, isDuplicate ? ((0, jsx_runtime_1.jsx)("div", { style: validationStyle, children: (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", type: "warning", message: `${envKey.toUpperCase()} is already defined.` }) })) : null, isKeyMissing ? ((0, jsx_runtime_1.jsx)("div", { style: validationStyle, children: (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", type: "warning", message: "Key is missing." }) })) : null, isValMissing ? ((0, jsx_runtime_1.jsx)("div", { style: validationStyle, children: (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", type: "warning", message: "Value is missing." }) })) : null] }));
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsxs(layout_1.Row, { align: "center", style: layout_2.optionRow, children: [
+                    jsx_runtime_1.jsx(RemInput_1.RemotionInput, { status: isNodeEnvKey || isDuplicate || isKeyMissing ? 'warning' : 'ok', type: "text", placeholder: "Key", style: input, value: envKey, onBlur: makeKeyWarningEligible, autoFocus: autoFocus, onChange: handleKeyChange, rightAlign: false }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx(RemInput_1.RemotionInput, { status: isValMissing ? 'warning' : 'ok', placeholder: "Value", type: showInPlainText ? 'text' : 'password', style: input, value: envVal, onBlur: makeValueWarningEligible, onChange: handleValueChange, rightAlign: false }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1.5 }), jsx_runtime_1.jsx(InlineEyeIcon_1.InlineEyeButton, { enabled: !showInPlainText, onClick: togglePlainText }), jsx_runtime_1.jsx(InlineRemoveButton_1.InlineRemoveButton, { onClick: handleDelete })
+                ] }), isNodeEnvKey ? (jsx_runtime_1.jsx("div", { style: validationStyle, children: jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", type: "warning", message: "NODE_ENV will be overwritten by Remotion during the render process." }) })) : null, isDuplicate ? (jsx_runtime_1.jsx("div", { style: validationStyle, children: jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", type: "warning", message: `${envKey.toUpperCase()} is already defined.` }) })) : null, isKeyMissing ? (jsx_runtime_1.jsx("div", { style: validationStyle, children: jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", type: "warning", message: "Key is missing." }) })) : null, isValMissing ? (jsx_runtime_1.jsx("div", { style: validationStyle, children: jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", type: "warning", message: "Value is missing." }) })) : null] }));
 };
 exports.EnvInput = EnvInput;

package/dist/components/RenderModal/FrameRangeSetting.js

@@ -22,6 +22,10 @@ const FrameRangeSetting = ({ startFrame, endFrame, setEndFrame, durationInFrames
     const onEndFrameChanged = (0, react_1.useCallback)((newVal) => {
         onEndFrameChangedDirectly(parseInt(newVal, 10));
     }, [onEndFrameChangedDirectly]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Frame range" }), (0, jsx_runtime_1.jsxs)("div", { style: layout_1.rightRow, children: [(0, jsx_runtime_1.jsx)("div", { style: { width: INPUT_WIDTH }, children: (0, 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 } }) }), (0, jsx_runtime_1.jsx)(MultiRangeSlider_1.MultiRangeSlider, { min: minStartFrame, max: maxEndFrame, start: startFrame, end: endFrame, step: 1, onLeftThumbDrag: onStartFrameChangedDirectly, onRightThumbDrag: onEndFrameChangedDirectly }), ' ', (0, jsx_runtime_1.jsx)("div", { style: { width: INPUT_WIDTH }, children: (0, 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 } }) })] })] }));
+    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 } }) })
+                ] })
+        ] }));
 };
 exports.FrameRangeSetting = FrameRangeSetting;

package/dist/components/RenderModal/GuiRenderStatus.js

@@ -27,24 +27,24 @@ const right = {
     flex: 1,
 };
 const BundlingProgress = ({ progress, doneIn }) => {
-    return ((0, jsx_runtime_1.jsxs)("div", { style: progressItem, children: [progress === 1 ? ((0, jsx_runtime_1.jsx)(SuccessIcon_1.SuccessIcon, {})) : ((0, jsx_runtime_1.jsx)(CircularProgress_1.CircularProgress, { progress: progress })), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("div", { style: label, children: progress === 1 ? 'Bundled' : `Bundling ${progress * 100}%` }), doneIn ? (0, jsx_runtime_1.jsxs)("div", { style: right, children: [doneIn, "ms"] }) : null] }));
+    return (jsx_runtime_1.jsxs("div", { style: progressItem, children: [progress === 1 ? (jsx_runtime_1.jsx(SuccessIcon_1.SuccessIcon, {})) : (jsx_runtime_1.jsx(CircularProgress_1.CircularProgress, { progress: progress })), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: label, children: progress === 1 ? 'Bundled' : `Bundling ${progress * 100}%` }), doneIn ? jsx_runtime_1.jsxs("div", { style: right, children: [doneIn, "ms"] }) : null] }));
 };
 const BrowserSetupProgress = ({ progress, doneIn, startedBundling, alreadyAvailable }) => {
-    return ((0, jsx_runtime_1.jsxs)("div", { style: progressItem, children: [progress === 1 || alreadyAvailable ? ((0, jsx_runtime_1.jsx)(SuccessIcon_1.SuccessIcon, {})) : ((0, jsx_runtime_1.jsx)(CircularProgress_1.CircularProgress, { progress: progress })), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("div", { style: label, children: alreadyAvailable && startedBundling
+    return (jsx_runtime_1.jsxs("div", { style: progressItem, children: [progress === 1 || alreadyAvailable ? (jsx_runtime_1.jsx(SuccessIcon_1.SuccessIcon, {})) : (jsx_runtime_1.jsx(CircularProgress_1.CircularProgress, { progress: progress })), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: label, children: alreadyAvailable && startedBundling
                     ? 'Headless browser already available'
                     : progress === 1
                         ? 'Downloaded Headless Shell'
-                        : `Downloading Headless Shell ${Math.round(progress * 100)}%` }), doneIn ? (0, jsx_runtime_1.jsxs)("div", { style: right, children: [doneIn, "ms"] }) : null] }));
+                        : `Downloading Headless Shell ${Math.round(progress * 100)}%` }), doneIn ? jsx_runtime_1.jsxs("div", { style: right, children: [doneIn, "ms"] }) : null] }));
 };
 const RenderingProgress = ({ progress }) => {
-    return ((0, jsx_runtime_1.jsxs)("div", { style: progressItem, children: [progress.frames === progress.totalFrames ? ((0, jsx_runtime_1.jsx)(SuccessIcon_1.SuccessIcon, {})) : ((0, jsx_runtime_1.jsx)(CircularProgress_1.CircularProgress, { progress: progress.frames / progress.totalFrames })), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("div", { style: label, children: progress.doneIn
+    return (jsx_runtime_1.jsxs("div", { style: progressItem, children: [progress.frames === progress.totalFrames ? (jsx_runtime_1.jsx(SuccessIcon_1.SuccessIcon, {})) : (jsx_runtime_1.jsx(CircularProgress_1.CircularProgress, { progress: progress.frames / progress.totalFrames })), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: label, children: progress.doneIn
                     ? `Rendered ${progress.totalFrames} frames`
-                    : `Rendering ${progress.frames} / ${progress.totalFrames} frames` }), progress.doneIn ? (0, jsx_runtime_1.jsxs)("div", { style: right, children: [progress.doneIn, "ms"] }) : null] }));
+                    : `Rendering ${progress.frames} / ${progress.totalFrames} frames` }), progress.doneIn ? jsx_runtime_1.jsxs("div", { style: right, children: [progress.doneIn, "ms"] }) : null] }));
 };
 const StitchingProgress = ({ progress }) => {
-    return ((0, jsx_runtime_1.jsxs)("div", { style: progressItem, children: [progress.frames === progress.totalFrames ? ((0, jsx_runtime_1.jsx)(SuccessIcon_1.SuccessIcon, {})) : ((0, jsx_runtime_1.jsx)(CircularProgress_1.CircularProgress, { progress: progress.frames / progress.totalFrames })), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("div", { style: label, children: progress.doneIn
+    return (jsx_runtime_1.jsxs("div", { style: progressItem, children: [progress.frames === progress.totalFrames ? (jsx_runtime_1.jsx(SuccessIcon_1.SuccessIcon, {})) : (jsx_runtime_1.jsx(CircularProgress_1.CircularProgress, { progress: progress.frames / progress.totalFrames })), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: label, children: progress.doneIn
                     ? `Encoded ${progress.totalFrames} frames`
-                    : `Encoding ${progress.frames} / ${progress.totalFrames} frames` }), progress.doneIn ? (0, jsx_runtime_1.jsxs)("div", { style: right, children: [progress.doneIn, "ms"] }) : null] }));
+                    : `Encoding ${progress.frames} / ${progress.totalFrames} frames` }), progress.doneIn ? jsx_runtime_1.jsxs("div", { style: right, children: [progress.doneIn, "ms"] }) : null] }));
 };
 const DownloadsProgress = ({ downloads }) => {
     const allHaveProgress = downloads.every((a) => a.totalBytes);
@@ -57,7 +57,8 @@ const DownloadsProgress = ({ downloads }) => {
     const progress = allHaveProgress
         ? downloaded / totalBytes
         : 0.1;
-    return ((0, jsx_runtime_1.jsxs)("div", { style: progressItem, children: [progress === 1 ? ((0, jsx_runtime_1.jsx)(SuccessIcon_1.SuccessIcon, {})) : ((0, jsx_runtime_1.jsx)(CircularProgress_1.CircularProgress, { progress: progress })), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsxs)("div", { style: label, children: ["Downloading ", downloads.length, " file", downloads.length === 1 ? '' : 's'] })] }));
+    return (jsx_runtime_1.jsxs("div", { style: progressItem, children: [progress === 1 ? (jsx_runtime_1.jsx(SuccessIcon_1.SuccessIcon, {})) : (jsx_runtime_1.jsx(CircularProgress_1.CircularProgress, { progress: progress })), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsxs("div", { style: label, children: ["Downloading ", downloads.length, " file", downloads.length === 1 ? '' : 's'] })
+        ] }));
 };
 const OpenFile = ({ job }) => {
     const labelStyle = (0, react_1.useMemo)(() => {
@@ -74,12 +75,16 @@ const OpenFile = ({ job }) => {
     const onClick = (0, react_1.useCallback)(() => {
         (0, actions_1.openInFileExplorer)({ directory: job.outName });
     }, [job.outName]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: progressItem, children: [(0, jsx_runtime_1.jsx)(SuccessIcon_1.SuccessIcon, {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("button", { style: labelStyle, type: "button", onClick: onClick, children: job.outName }), (0, jsx_runtime_1.jsx)("div", { style: right, children: (0, jsx_runtime_1.jsx)(RenderQueueOpenInFolder_1.RenderQueueOpenInFinderItem, { job: job }) })] }));
+    return (jsx_runtime_1.jsxs("div", { style: progressItem, children: [
+            jsx_runtime_1.jsx(SuccessIcon_1.SuccessIcon, {}), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("button", { style: labelStyle, type: "button", onClick: onClick, children: job.outName }), jsx_runtime_1.jsx("div", { style: right, children: jsx_runtime_1.jsx(RenderQueueOpenInFolder_1.RenderQueueOpenInFinderItem, { job: job }) })
+        ] }));
 };
 const GuiRenderStatus = ({ job }) => {
     if (job.status === 'idle' || job.status === 'failed') {
         throw new Error('This component should not be rendered when the job is idle');
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 0.5 }), (0, jsx_runtime_1.jsx)(BrowserSetupProgress, { ...job.progress.browser, startedBundling: Boolean(job.progress.bundling) }), job.progress.bundling && ((0, jsx_runtime_1.jsx)(BundlingProgress, { progress: job.progress.bundling.progress, doneIn: job.progress.bundling.doneIn })), job.progress.rendering ? ((0, jsx_runtime_1.jsx)(RenderingProgress, { progress: job.progress.rendering })) : null, job.progress.stitching ? ((0, jsx_runtime_1.jsx)(StitchingProgress, { progress: job.progress.stitching })) : null, job.progress.downloads.length > 0 ? ((0, jsx_runtime_1.jsx)(DownloadsProgress, { downloads: job.progress.downloads })) : null, job.status === 'done' ? (0, jsx_runtime_1.jsx)(OpenFile, { job: job }) : null, (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 })] }));
+    return (jsx_runtime_1.jsxs("div", { children: [
+            jsx_runtime_1.jsx(layout_1.Spacing, { y: 0.5 }), jsx_runtime_1.jsx(BrowserSetupProgress, { ...job.progress.browser, startedBundling: Boolean(job.progress.bundling) }), job.progress.bundling && (jsx_runtime_1.jsx(BundlingProgress, { progress: job.progress.bundling.progress, doneIn: job.progress.bundling.doneIn })), job.progress.rendering ? (jsx_runtime_1.jsx(RenderingProgress, { progress: job.progress.rendering })) : null, job.progress.stitching ? (jsx_runtime_1.jsx(StitchingProgress, { progress: job.progress.stitching })) : null, job.progress.downloads.length > 0 ? (jsx_runtime_1.jsx(DownloadsProgress, { downloads: job.progress.downloads })) : null, job.status === 'done' ? jsx_runtime_1.jsx(OpenFile, { job: job }) : null, jsx_runtime_1.jsx(layout_1.Spacing, { y: 1 })
+        ] }));
 };
 exports.GuiRenderStatus = GuiRenderStatus;

package/dist/components/RenderModal/InfoBubble.js

@@ -110,8 +110,9 @@ const InfoBubble = ({ title, children }) => {
             padding: 6,
         };
     }, []);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", { ref: ref, tabIndex: tabIndex, style: style, title: title, type: "button", children: (0, jsx_runtime_1.jsx)("svg", { style: icon, viewBox: "0 0 512 512", children: (0, jsx_runtime_1.jsx)("path", { fill: hovered ? 'white' : colors_1.LIGHT_TEXT, d: "M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336c-13.3 0-24 10.7-24 24s10.7 24 24 24h80c13.3 0 24-10.7 24-24s-10.7-24-24-24h-8V248c0-13.3-10.7-24-24-24H216c-13.3 0-24 10.7-24 24s10.7 24 24 24h24v64H216zm40-144a32 32 0 1 0 0-64 32 32 0 1 0 0 64z" }) }) }), portalStyle
-                ? react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)("div", { style: styles_1.outerPortal, className: "css-reset", children: (0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onOutsideClick: onHide, onEscape: onHide, children: (0, jsx_runtime_1.jsx)("div", { style: portalStyle, children: (0, jsx_runtime_1.jsx)(InfoTooltip_1.InfoTooltip, { backgroundColor: colors_1.INPUT_BACKGROUND, arrowDirection: layout, children: children }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsx("button", { ref: ref, tabIndex: tabIndex, style: style, title: title, type: "button", children: jsx_runtime_1.jsx("svg", { style: icon, viewBox: "0 0 512 512", children: jsx_runtime_1.jsx("path", { fill: hovered ? 'white' : colors_1.LIGHT_TEXT, d: "M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336c-13.3 0-24 10.7-24 24s10.7 24 24 24h80c13.3 0 24-10.7 24-24s-10.7-24-24-24h-8V248c0-13.3-10.7-24-24-24H216c-13.3 0-24 10.7-24 24s10.7 24 24 24h24v64H216zm40-144a32 32 0 1 0 0-64 32 32 0 1 0 0 64z" }) }) }), portalStyle
+                ? react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { style: styles_1.outerPortal, className: "css-reset", children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onOutsideClick: onHide, onEscape: onHide, children: jsx_runtime_1.jsx("div", { style: portalStyle, children: jsx_runtime_1.jsx(InfoTooltip_1.InfoTooltip, { backgroundColor: colors_1.INPUT_BACKGROUND, arrowDirection: layout, children: children }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
                 : null] }));
 };
 exports.InfoBubble = InfoBubble;

package/dist/components/RenderModal/InfoTooltip.js

@@ -32,10 +32,11 @@ const InfoTooltip = ({ children, arrowDirection, backgroundColor }) => {
             borderRadius: '4px',
         };
     }, [arrowDirection, backgroundColor]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+    return (jsx_runtime_1.jsxs("div", { style: {
             display: 'flex',
             flexDirection: arrowDirection === 'up' ? 'column-reverse' : 'column',
             alignItems: 'flex-start',
-        }, children: [(0, jsx_runtime_1.jsx)("div", { style: container, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: children }), arrowDirection === 'down' ? ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 14 7", style: arrowDown, children: (0, jsx_runtime_1.jsx)("path", { d: `M 14 0 L 7 7 L 0 0`, fill: backgroundColor, strokeLinecap: "butt", stroke: colors_1.BORDER_COLOR, strokeWidth: 0.5 }) })) : null, arrowDirection === 'up' ? ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 14 7", style: arrowUp, children: (0, jsx_runtime_1.jsx)("path", { d: `M 0 7 L 7 0 L 14 7`, fill: backgroundColor, strokeLinecap: "butt", stroke: colors_1.BORDER_COLOR, strokeWidth: 0.5 }) })) : null] }));
+        }, children: [
+            jsx_runtime_1.jsx("div", { style: container, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: children }), arrowDirection === 'down' ? (jsx_runtime_1.jsx("svg", { viewBox: "0 0 14 7", style: arrowDown, children: jsx_runtime_1.jsx("path", { d: `M 14 0 L 7 7 L 0 0`, fill: backgroundColor, strokeLinecap: "butt", stroke: colors_1.BORDER_COLOR, strokeWidth: 0.5 }) })) : null, arrowDirection === 'up' ? (jsx_runtime_1.jsx("svg", { viewBox: "0 0 14 7", style: arrowUp, children: jsx_runtime_1.jsx("path", { d: `M 0 7 L 7 0 L 14 7`, fill: backgroundColor, strokeLinecap: "butt", stroke: colors_1.BORDER_COLOR, strokeWidth: 0.5 }) })) : null] }));
 };
 exports.InfoTooltip = InfoTooltip;

package/dist/components/RenderModal/InlineEyeIcon.js

@@ -10,8 +10,8 @@ const clearIcon = {
 };
 const InlineEyeButton = ({ onClick, enabled }) => {
     const renderAction = (0, react_1.useCallback)((color) => {
-        return enabled ? ((0, jsx_runtime_1.jsx)("svg", { style: clearIcon, viewBox: "0 0 640 512", children: (0, 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" }) })) : ((0, jsx_runtime_1.jsx)("svg", { style: clearIcon, viewBox: "0 0 576 512", children: (0, 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" }) }));
+        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 (0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick });
+    return jsx_runtime_1.jsx(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick });
 };
 exports.InlineEyeButton = InlineEyeButton;

package/dist/components/RenderModal/InlineRemoveButton.js

@@ -10,8 +10,8 @@ const clearIcon = {
 };
 const InlineRemoveButton = ({ onClick }) => {
     const renderAction = (0, react_1.useCallback)((color) => {
-        return ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512", style: clearIcon, children: (0, 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("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 (0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick });
+    return jsx_runtime_1.jsx(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick });
 };
 exports.InlineRemoveButton = InlineRemoveButton;

package/dist/components/RenderModal/JpegQualitySetting.js

@@ -6,6 +6,6 @@ const NumberSetting_1 = require("./NumberSetting");
 const MIN_JPEG_QUALITY = 1;
 const MAX_JPEG_QUALITY = 100;
 const JpegQualitySetting = ({ jpegQuality, setJpegQuality }) => {
-    return ((0, jsx_runtime_1.jsx)(NumberSetting_1.NumberSetting, { min: MIN_JPEG_QUALITY, max: MAX_JPEG_QUALITY, step: 1, name: "JPEG Quality", onValueChanged: setJpegQuality, value: jpegQuality, hint: 'jpegQualityOption' }));
+    return (jsx_runtime_1.jsx(NumberSetting_1.NumberSetting, { min: MIN_JPEG_QUALITY, max: MAX_JPEG_QUALITY, step: 1, name: "JPEG Quality", onValueChanged: setJpegQuality, value: jpegQuality, hint: 'jpegQualityOption' }));
 };
 exports.JpegQualitySetting = JpegQualitySetting;

package/dist/components/RenderModal/MultiRangeSlider.js

@@ -42,6 +42,8 @@ const MultiRangeSlider = ({ min, max, start, end, step, onLeftThumbDrag, onRight
         const value = Math.max(Number(event.target.value), start + 1);
         onRightThumbDrag(value);
     }, [onRightThumbDrag, start]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)("input", { type: "range", min: min, max: max, value: start, step: step, onChange: onChangeLeft, className: "__remotion_thumb" }), (0, jsx_runtime_1.jsx)("input", { type: "range", min: min, max: max, value: end, step: step, onChange: onChangeRight, className: "__remotion_thumb" }), (0, jsx_runtime_1.jsx)("div", { style: rangeStyle })] }));
+    return (jsx_runtime_1.jsxs("div", { style: container, children: [
+            jsx_runtime_1.jsx("input", { type: "range", min: min, max: max, value: start, step: step, onChange: onChangeLeft, className: "__remotion_thumb" }), jsx_runtime_1.jsx("input", { type: "range", min: min, max: max, value: end, step: step, onChange: onChangeRight, className: "__remotion_thumb" }), jsx_runtime_1.jsx("div", { style: rangeStyle })
+        ] }));
 };
 exports.MultiRangeSlider = MultiRangeSlider;

package/dist/components/RenderModal/MutedSetting.js

@@ -11,6 +11,10 @@ const MutedSetting = ({ muted, setMuted, enforceAudioTrack }) => {
     const onMutedChanged = (0, react_1.useCallback)((e) => {
         setMuted(e.target.checked);
     }, [setMuted]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.label, children: ["Muted", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(OptionExplainerBubble_1.OptionExplainerBubble, { id: "mutedOption" })] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.25 }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: muted, disabled: enforceAudioTrack && !muted, onChange: onMutedChanged, name: "muted" }) })] }));
+    return (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+            jsx_runtime_1.jsxs("div", { style: layout_2.label, children: ["Muted",
+                    jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(OptionExplainerBubble_1.OptionExplainerBubble, { id: "mutedOption" })
+                ] }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.25 }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: muted, disabled: enforceAudioTrack && !muted, onChange: onMutedChanged, name: "muted" }) })
+        ] }));
 };
 exports.MutedSetting = MutedSetting;

package/dist/components/RenderModal/NumberOfLoopsSetting.js

@@ -21,6 +21,8 @@ const NumberOfLoopsSetting = ({ numberOfGifLoops, setNumberOfGifLoops }) => {
             return newConcurrencyClamped;
         });
     }, [setNumberOfGifLoops]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Number of loops" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(RemInput_1.RightAlignInput, { children: (0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { value: numberOfGifLoops, onTextChange: onNumberOfGifLoopsChanged, placeholder: `${min}-`, onValueChange: onNumberOfGifLoopsChangedDirectly, name: "number-of-gif-loops", step: 1, min: min, status: "ok", rightAlign: true }) }) })] }));
+    return (jsx_runtime_1.jsxs("div", { style: layout_1.optionRow, children: [
+            jsx_runtime_1.jsx("div", { style: layout_1.label, children: "Number of loops" }), jsx_runtime_1.jsx("div", { style: layout_1.rightRow, children: jsx_runtime_1.jsx(RemInput_1.RightAlignInput, { children: jsx_runtime_1.jsx(InputDragger_1.InputDragger, { value: numberOfGifLoops, onTextChange: onNumberOfGifLoopsChanged, placeholder: `${min}-`, onValueChange: onNumberOfGifLoopsChangedDirectly, name: "number-of-gif-loops", step: 1, min: min, status: "ok", rightAlign: true }) }) })
+        ] }));
 };
 exports.NumberOfLoopsSetting = NumberOfLoopsSetting;

package/dist/components/RenderModal/NumberSetting.js

@@ -21,8 +21,12 @@ const NumberSetting = ({ name, value, step, hint, onValueChanged, max, min, form
     const onValueChange = (0, react_1.useCallback)((newConcurrency) => {
         onValueChanged(newConcurrency);
     }, [onValueChanged]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.label, children: [name, hint ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(OptionExplainerBubble_1.OptionExplainerBubble, { id: hint })] })) : null] }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(RemInput_1.RightAlignInput, { children: (0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { value: value, name: name.toLowerCase(), onTextChange: onTextChanged, onValueChange: onValueChange, step: step, placeholder: [min, max]
+    return (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+            jsx_runtime_1.jsxs("div", { style: layout_2.label, children: [name, hint ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                            jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(OptionExplainerBubble_1.OptionExplainerBubble, { id: hint })
+                        ] })) : null] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(RemInput_1.RightAlignInput, { children: jsx_runtime_1.jsx(InputDragger_1.InputDragger, { value: value, name: name.toLowerCase(), onTextChange: onTextChanged, onValueChange: onValueChange, step: step, placeholder: [min, max]
                             .map((f) => (f !== null && f !== undefined ? f : ''))
-                            .join('-'), min: min, max: max, formatter: formatter, status: "ok", rightAlign: true }) }) })] }));
+                            .join('-'), min: min, max: max, formatter: formatter, status: "ok", rightAlign: true }) }) })
+        ] }));
 };
 exports.NumberSetting = NumberSetting;

package/dist/components/RenderModal/OptionExplainer.js

@@ -51,6 +51,19 @@ const copyWrapper = {
     justifyContent: 'flex-end',
 };
 const OptionExplainer = ({ option }) => {
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, className: "__remotion-info-button-container", children: [(0, jsx_runtime_1.jsxs)("div", { style: padding, children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { style: title, children: option.name }), option.docLink ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("a", { style: link, href: option.docLink, target: "_blank", children: "Docs" })] })) : null] }), (0, jsx_runtime_1.jsx)("div", { style: description, children: option.description('ssr') })] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 0.5, block: true }), (0, jsx_runtime_1.jsx)(MenuDivider_1.MenuDivider, {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 0.5, block: true }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { style: infoRow, children: [(0, jsx_runtime_1.jsx)("div", { style: infoRowLabel, children: "CLI flag" }), (0, jsx_runtime_1.jsx)("div", { style: flexSpacer }), (0, jsx_runtime_1.jsxs)("code", { children: ["--", option.cliFlag] }), (0, jsx_runtime_1.jsx)("div", { style: copyWrapper, children: (0, jsx_runtime_1.jsx)(CliCopyButton_1.CliCopyButton, { valueToCopy: option.cliFlag }) })] }), option.ssrName ? ((0, jsx_runtime_1.jsxs)("div", { style: infoRow, children: [(0, jsx_runtime_1.jsx)("div", { style: infoRowLabel, children: "Node.JS option" }), (0, jsx_runtime_1.jsx)("div", { style: flexSpacer }), (0, jsx_runtime_1.jsx)("code", { children: option.ssrName }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 3.75 })] })) : null, (0, jsx_runtime_1.jsx)("div", { style: infoRow })] })] }));
+    return (jsx_runtime_1.jsxs("div", { style: container, className: "__remotion-info-button-container", children: [
+            jsx_runtime_1.jsxs("div", { style: padding, children: [
+                    jsx_runtime_1.jsxs("div", { children: [
+                            jsx_runtime_1.jsx("strong", { style: title, children: option.name }), option.docLink ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                                    jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("a", { style: link, href: option.docLink, target: "_blank", children: "Docs" })
+                                ] })) : null] }), jsx_runtime_1.jsx("div", { style: description, children: option.description('ssr') })
+                ] }), jsx_runtime_1.jsx(layout_1.Spacing, { y: 0.5, block: true }), jsx_runtime_1.jsx(MenuDivider_1.MenuDivider, {}), jsx_runtime_1.jsx(layout_1.Spacing, { y: 0.5, block: true }), jsx_runtime_1.jsxs("div", { children: [
+                    jsx_runtime_1.jsxs("div", { style: infoRow, children: [
+                            jsx_runtime_1.jsx("div", { style: infoRowLabel, children: "CLI flag" }), jsx_runtime_1.jsx("div", { style: flexSpacer }), jsx_runtime_1.jsxs("code", { children: ["--", option.cliFlag] }), jsx_runtime_1.jsx("div", { style: copyWrapper, children: jsx_runtime_1.jsx(CliCopyButton_1.CliCopyButton, { valueToCopy: option.cliFlag }) })
+                        ] }), option.ssrName ? (jsx_runtime_1.jsxs("div", { style: infoRow, children: [
+                            jsx_runtime_1.jsx("div", { style: infoRowLabel, children: "Node.JS option" }), jsx_runtime_1.jsx("div", { style: flexSpacer }), jsx_runtime_1.jsx("code", { children: option.ssrName }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 3.75 })
+                        ] })) : null, jsx_runtime_1.jsx("div", { style: infoRow })
+                ] })
+        ] }));
 };
 exports.OptionExplainer = OptionExplainer;

package/dist/components/RenderModal/OptionExplainerBubble.js

@@ -7,6 +7,6 @@ const InfoBubble_1 = require("./InfoBubble");
 const OptionExplainer_1 = require("./OptionExplainer");
 const OptionExplainerBubble = ({ id }) => {
     const option = client_1.BrowserSafeApis.options[id];
-    return ((0, jsx_runtime_1.jsx)(InfoBubble_1.InfoBubble, { title: "Learn more about this option", children: (0, jsx_runtime_1.jsx)(OptionExplainer_1.OptionExplainer, { option: option }) }));
+    return (jsx_runtime_1.jsx(InfoBubble_1.InfoBubble, { title: "Learn more about this option", children: jsx_runtime_1.jsx(OptionExplainer_1.OptionExplainer, { option: option }) }));
 };
 exports.OptionExplainerBubble = OptionExplainerBubble;