@remotion/studio 4.0.502 → 4.0.503

package/dist/components/InspectorOpenInEditor.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { OriginalPosition } from '../error-overlay/react-overlay/utils/get-source-map';
+export declare const InspectorOpenInEditor: React.FC<{
+    readonly location: OriginalPosition | null;
+}>;

package/dist/components/InspectorOpenInEditor.js

@@ -0,0 +1,135 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InspectorOpenInEditor = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const client_id_1 = require("../helpers/client-id");
+const colors_1 = require("../helpers/colors");
+const open_in_editor_1 = require("../helpers/open-in-editor");
+const caret_1 = require("../icons/caret");
+const editor_1 = require("../icons/editor");
+const modals_1 = require("../state/modals");
+const z_index_1 = require("../state/z-index");
+const InlineDropdown_1 = require("./InlineDropdown");
+const NotificationCenter_1 = require("./Notifications/NotificationCenter");
+const use_default_editor_info_1 = require("./use-default-editor-info");
+const splitButton = {
+    alignItems: 'center',
+    display: 'inline-flex',
+    flexDirection: 'row',
+    flexShrink: 0,
+    height: 24,
+};
+const mainButtonBase = {
+    alignItems: 'center',
+    background: colors_1.TRANSPARENT,
+    border: 'none',
+    borderRadius: 3,
+    color: colors_1.LIGHT_TEXT,
+    display: 'inline-flex',
+    fontFamily: 'sans-serif',
+    fontSize: 11,
+    height: 24,
+    lineHeight: '14px',
+    padding: '0 6px',
+    whiteSpace: 'nowrap',
+};
+const menuLabel = {
+    color: 'inherit',
+    fontFamily: 'sans-serif',
+    fontSize: 13,
+    lineHeight: '16px',
+};
+const editorButtonIconSize = 18;
+const editorMenuIconSize = 18;
+const InspectorOpenInEditor = ({ location }) => {
+    var _a;
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { tabIndex } = (0, z_index_1.useZIndex)();
+    const [hovered, setHovered] = (0, react_1.useState)(false);
+    const editorPickerAvailable = (0, use_default_editor_info_1.canUseEditorPicker)(previewServerState.type === 'connected');
+    const editorInfo = (0, use_default_editor_info_1.useDefaultEditorInfo)(editorPickerAvailable);
+    const openWithEditor = (0, react_1.useCallback)(async (editorId) => {
+        if (!location) {
+            return;
+        }
+        try {
+            await (0, open_in_editor_1.openOriginalPositionInEditor)(location, editorId);
+        }
+        catch (err) {
+            (0, NotificationCenter_1.showNotification)(err.message, 2000);
+        }
+    }, [location]);
+    const preferredEditorId = (0, use_default_editor_info_1.getPreferredEditorId)(editorInfo);
+    const editorName = (_a = window.remotion_editorName) !== null && _a !== void 0 ? _a : 'default editor';
+    const canOpenDefault = location !== null && window.remotion_editorName !== null;
+    const onOpenDefault = (0, react_1.useCallback)((event) => {
+        event.stopPropagation();
+        openWithEditor(null).catch(() => undefined);
+    }, [openWithEditor]);
+    const mainButtonStyle = (0, react_1.useMemo)(() => {
+        return {
+            ...mainButtonBase,
+            background: (0, colors_1.getBackgroundFromHoverState)({
+                hovered,
+                selected: false,
+            }),
+            color: hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT,
+            opacity: canOpenDefault ? 1 : 0.5,
+            pointerEvents: canOpenDefault ? 'auto' : 'none',
+        };
+    }, [canOpenDefault, hovered]);
+    const renderDropdownAction = (0, react_1.useCallback)((color) => {
+        return jsx_runtime_1.jsx(caret_1.CaretDown, { color: color, small: true });
+    }, []);
+    const menuItems = (0, react_1.useMemo)(() => {
+        var _a;
+        const alternateEditors = ((_a = editorInfo === null || editorInfo === void 0 ? void 0 : editorInfo.installedEditors) !== null && _a !== void 0 ? _a : [])
+            .filter((editor) => editor.id !== preferredEditorId)
+            .map((editor) => ({
+            id: `open-in-${editor.id}`,
+            keyHint: null,
+            label: jsx_runtime_1.jsx("span", { style: menuLabel, children: editor.name }),
+            leftItem: jsx_runtime_1.jsx(editor_1.EditorIcon, { editorId: editor.id, size: editorMenuIconSize }),
+            onClick: () => {
+                openWithEditor(editor.id).catch(() => undefined);
+            },
+            quickSwitcherLabel: null,
+            subMenu: null,
+            type: 'item',
+            value: editor.id,
+        }));
+        const settingsItems = [
+            ...(alternateEditors.length > 0
+                ? [{ type: 'divider', id: 'editor-settings-divider' }]
+                : []),
+            {
+                id: 'set-default-editor',
+                keyHint: null,
+                label: jsx_runtime_1.jsx("span", { style: menuLabel, children: "Set default editor..." }),
+                leftItem: null,
+                onClick: () => {
+                    setSelectedModal({ type: 'configure-default-editor' });
+                },
+                quickSwitcherLabel: null,
+                subMenu: null,
+                type: 'item',
+                value: 'set-default-editor',
+            },
+        ];
+        return [...alternateEditors, ...settingsItems];
+    }, [
+        editorInfo === null || editorInfo === void 0 ? void 0 : editorInfo.installedEditors,
+        openWithEditor,
+        preferredEditorId,
+        setSelectedModal,
+    ]);
+    if (!editorPickerAvailable) {
+        return null;
+    }
+    return (jsx_runtime_1.jsxs("div", { style: splitButton, children: [
+            jsx_runtime_1.jsx("button", { "aria-label": `Open in ${editorName}`, disabled: !canOpenDefault, onClick: onOpenDefault, onPointerEnter: () => setHovered(true), onPointerLeave: () => setHovered(false), style: mainButtonStyle, tabIndex: tabIndex, title: `Open in ${editorName}`, type: "button", children: jsx_runtime_1.jsx(editor_1.EditorIcon, { editorId: preferredEditorId, size: editorButtonIconSize }) }), jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { renderAction: renderDropdownAction, title: "Open in another editor", values: menuItems, variant: "compact" })
+        ] }));
+};
+exports.InspectorOpenInEditor = InspectorOpenInEditor;

package/dist/components/InspectorPanel/AlignmentControls.js

@@ -44,7 +44,7 @@ const verticalDivider = {
     margin: '0 8px',
 };
 const AlignmentButton = ({ onClick, title, Icon, disabled }) => {
-    return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { title: title, onClick: onClick, renderAction: (color) => jsx_runtime_1.jsx(Icon, { style: iconStyle, color: color }), disabled: disabled }));
+    return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, title: title, onClick: onClick, renderAction: (color) => jsx_runtime_1.jsx(Icon, { style: iconStyle, color: color }), disabled: disabled }));
 };
 const AlignmentControls = ({ track }) => {
     var _a;

package/dist/components/InspectorPanel/CompositionInspectorHeader.js

@@ -72,7 +72,7 @@ const CompositionInspectorHeader = () => {
         if (!validatedLocation) {
             return;
         }
-        (0, open_in_editor_1.openOriginalPositionInEditor)(validatedLocation).catch((err) => {
+        (0, open_in_editor_1.openOriginalPositionInEditor)(validatedLocation, null).catch((err) => {
             (0, NotificationCenter_1.showNotification)(err.message, 2000);
         });
     }, [validatedLocation]);
@@ -80,7 +80,7 @@ const CompositionInspectorHeader = () => {
         if (!componentLocation) {
             return;
         }
-        (0, open_in_editor_1.openOriginalPositionInEditor)(componentLocation).catch((err) => {
+        (0, open_in_editor_1.openOriginalPositionInEditor)(componentLocation, null).catch((err) => {
             (0, NotificationCenter_1.showNotification)(err.message, 2000);
         });
     }, [componentLocation]);
@@ -90,7 +90,7 @@ const CompositionInspectorHeader = () => {
         }
         return (0, is_composition_still_1.isCompositionStill)(video) ? (jsx_runtime_1.jsx(still_1.StillIcon, { color: color, style: sourceLocationIconStyle })) : (jsx_runtime_1.jsx(video_1.FilmIcon, { color: color, style: sourceLocationIconStyle }));
     }, [video]);
-    return (jsx_runtime_1.jsx(InspectorInfoHeader_1.InspectorInfoHeader, { minHeight: COMPOSITION_INSPECTOR_HEADER_HEIGHT, padding: "4px 0", children: video ? (jsx_runtime_1.jsxs(InspectorLocationCopy_1.InspectorLocationCopy, { location: validatedLocation, name: video.id, children: [
+    return (jsx_runtime_1.jsx(InspectorInfoHeader_1.InspectorInfoHeader, { minHeight: COMPOSITION_INSPECTOR_HEADER_HEIGHT, padding: "4px 0", children: video ? (jsx_runtime_1.jsxs(InspectorLocationCopy_1.InspectorLocationCopy, { location: validatedLocation, name: video.id, openInEditorLocation: componentLocation, children: [
                 jsx_runtime_1.jsx(InlineCompositionName_1.InlineCompositionName, { compositionId: video.id, stack: (_e = currentComposition === null || currentComposition === void 0 ? void 0 : currentComposition.stack) !== null && _e !== void 0 ? _e : null, compositions: compositions }, video.id), jsx_runtime_1.jsx(InspectorSourceLocation_1.InspectorSourceLocation, { location: validatedLocation, canOpen: validatedLocation !== null, onOpen: openFileLocation, renderIcon: renderCompositionIcon, size: "inline-action" }), compositionComponentInfo === null &&
                     compositionFile !== null &&
                     compositionId !== null ? (jsx_runtime_1.jsx("div", { "aria-hidden": true, style: componentLocationPlaceholder })) : (jsx_runtime_1.jsx(InspectorSourceLocation_1.InspectorSourceLocation, { location: componentLocation, canOpen: componentLocation !== null, onOpen: openComponentLocation, renderIcon: renderReactIcon, size: "inline-action" }))] })) : null }));

package/dist/components/InspectorPanel/CompositionMetadata.js

@@ -97,7 +97,7 @@ const PresetDropdown = ({ disabled, title, values, visible }) => {
     return (jsx_runtime_1.jsx("div", { style: {
             ...presetDropdownContainer,
             visibility: visible ? 'visible' : 'hidden',
-        }, children: jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { disabled: disabled, renderAction: renderAction, title: title, values: values }) }));
+        }, children: jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { disabled: disabled, renderAction: renderAction, title: title, values: values, variant: "compact" }) }));
 };
 const CompositionMetadataValue = ({ computed, disabled, field, onSave, pendingValue, value }) => {
     var _a;

package/dist/components/InspectorPanel/KeyframeEasingNavigator.js

@@ -139,8 +139,8 @@ const KeyframeEasingNavigator = ({ currentSelection, includeEasings, keyframes,
     if (currentItem === null) {
         return null;
     }
-    return (jsx_runtime_1.jsxs("div", { style: navigatorContainer, children: [jsx_runtime_1.jsx(InlineAction_1.InlineAction, { disabled: previousItem === null, onClick: selectPrevious, title: "Previous animation item", renderAction: (color) => (jsx_runtime_1.jsx(NavigationChevron, { color: previousItem === null ? disabledChevronColor : color, direction: "left" })) }), jsx_runtime_1.jsxs("div", { style: itemStrip, children: [
+    return (jsx_runtime_1.jsxs("div", { style: navigatorContainer, children: [jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, disabled: previousItem === null, onClick: selectPrevious, title: "Previous animation item", renderAction: (color) => (jsx_runtime_1.jsx(NavigationChevron, { color: previousItem === null ? disabledChevronColor : color, direction: "left" })) }), jsx_runtime_1.jsxs("div", { style: itemStrip, children: [
                     jsx_runtime_1.jsx(TimelineNavigatorItem, { extendLineLeft: false, extendLineRight: currentItem.type === 'keyframe', item: previousItem, onSelect: selectItem, selected: previousItem === null ? false : isSelected(previousItem.selection) }), jsx_runtime_1.jsx(TimelineNavigatorItem, { extendLineLeft: (previousItem === null || previousItem === void 0 ? void 0 : previousItem.type) === 'keyframe', extendLineRight: (nextItem === null || nextItem === void 0 ? void 0 : nextItem.type) === 'keyframe', item: currentItem, onSelect: selectItem, selected: isSelected(currentItem.selection) }), jsx_runtime_1.jsx(TimelineNavigatorItem, { extendLineLeft: currentItem.type === 'keyframe', extendLineRight: false, item: nextItem, onSelect: selectItem, selected: nextItem === null ? false : isSelected(nextItem.selection) })
-                ] }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { disabled: nextItem === null, onClick: selectNext, title: "Next animation item", renderAction: (color) => (jsx_runtime_1.jsx(NavigationChevron, { color: nextItem === null ? disabledChevronColor : color, direction: "right" })) })] }));
+                ] }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, disabled: nextItem === null, onClick: selectNext, title: "Next animation item", renderAction: (color) => (jsx_runtime_1.jsx(NavigationChevron, { color: nextItem === null ? disabledChevronColor : color, direction: "right" })) })] }));
 };
 exports.KeyframeEasingNavigator = KeyframeEasingNavigator;

package/dist/components/InspectorPanel/SequenceInspectorHeader.js

@@ -56,7 +56,7 @@ const useSequenceInspectorSourceLocation = (sequence) => {
         if (!canOpenInEditor) {
             return;
         }
-        openInEditor();
+        openInEditor(null);
     }, [canOpenInEditor, openInEditor]);
     return {
         canOpenInEditor,
@@ -94,7 +94,7 @@ const SequenceInspectorHeader = ({ sourceLocation, track }) => {
     const onRename = (0, react_1.useCallback)((newName) => {
         saveName(newName).catch(() => undefined);
     }, [saveName]);
-    return (jsx_runtime_1.jsx(InspectorInfoHeader_1.InspectorInfoHeader, { contentSized: true, padding: "4px 0", children: jsx_runtime_1.jsxs(InspectorLocationCopy_1.InspectorLocationCopy, { location: sourceLocation.validatedLocation, name: componentName !== null && componentName !== void 0 ? componentName : null, children: [
+    return (jsx_runtime_1.jsx(InspectorInfoHeader_1.InspectorInfoHeader, { contentSized: true, padding: "4px 0", children: jsx_runtime_1.jsxs(InspectorLocationCopy_1.InspectorLocationCopy, { location: sourceLocation.validatedLocation, name: componentName !== null && componentName !== void 0 ? componentName : null, openInEditorLocation: sourceLocation.validatedLocation, children: [
                 jsx_runtime_1.jsx(InlineEditableTitle_1.InlineEditableTitle, { value: sequenceDisplayName, canRename: canRename, onCommit: onRename, size: "inspector" }), documentationLink ? (jsx_runtime_1.jsx(common_1.InspectorInlineAction, { disabled: false, style: defaultCursor, size: "compact", title: "Open component docs", onClick: openDocumentationLink, children: componentName })) : (jsx_runtime_1.jsx("div", { style: subtitleStyle, children: componentName })), jsx_runtime_1.jsx(InspectorSourceLocation_1.InspectorSourceLocation, { location: sourceLocation.validatedLocation, canOpen: sourceLocation.canOpenInEditor, onOpen: sourceLocation.openFileLocation, renderIcon: renderReactIcon, size: "inline-action" })
             ] }) }));
 };

package/dist/components/InspectorSequenceSection.js

@@ -468,7 +468,7 @@ const InspectorSequenceSection = ({ sequence, readOnlyStudio, validatedLocation,
         setPropStatuses,
         validatedLocation.source,
     ]);
-    const borderRadiusAction = borderRadiusGroup ? (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { disabled: borderRadiusConversion === null ||
+    const borderRadiusAction = borderRadiusGroup ? (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, disabled: borderRadiusConversion === null ||
             previewServerState.type !== 'connected', onClick: onConvertBorderRadius, title: borderRadiusConversion === null
             ? borderRadiusUsesShorthand
                 ? 'A static border radius is required to use individual corners'
@@ -477,7 +477,7 @@ const InspectorSequenceSection = ({ sequence, readOnlyStudio, validatedLocation,
                 ? 'Use individual corner radii'
                 : 'Use one border radius value', renderAction: (color) => borderRadiusUsesShorthand ? (jsx_runtime_1.jsx(fullscreen_1.FullscreenIcon, { color: color, style: borderRadiusToggleIcon })) : (jsx_runtime_1.jsx(border_radius_1.BorderRadiusIcon, { color: color, style: borderRadiusToggleIcon })) })) : null;
     const effectsHeader = (jsx_runtime_1.jsxs("div", { style: styles_1.sectionHeaderRow, children: [
-            jsx_runtime_1.jsx("div", { style: effectsHeaderTitle, children: "Effects" }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { disabled: !canAddEffect, onClick: onAddEffect, title: canAddEffect ? 'Add effect' : undefined, renderAction: (color) => jsx_runtime_1.jsx(plus_1.Plus, { color: color, style: plusIcon }) })] }));
+            jsx_runtime_1.jsx("div", { style: effectsHeaderTitle, children: "Effects" }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, disabled: !canAddEffect, onClick: onAddEffect, title: canAddEffect ? 'Add effect' : undefined, renderAction: (color) => jsx_runtime_1.jsx(plus_1.Plus, { color: color, style: plusIcon }) })] }));
     const renderRow = ({ node, depth }) => {
         return (jsx_runtime_1.jsx(TimelineRowLayoutContext_1.TimelineRowLayoutContext.Provider, { value: TimelineRowLayoutContext_1.INSPECTOR_TIMELINE_ROW_LAYOUT, children: jsx_runtime_1.jsx(TimelineExpandedRow_1.TimelineExpandedRow, { node: node, depth: depth, nestedDepth: 0, rowDepthBase: 0, getIsExpanded: getIsExpanded, toggleTrack: toggleTrack, validatedLocation: validatedLocation, nodePath: nodePathInfo.sequenceSubscriptionKey, schema: schema, keyframeDisplayOffset: keyframeDisplayOffset, keyframeControlsMode: "inspector" }) }, JSON.stringify(node.nodePathInfo)));
     };

package/dist/components/Menu/MenuItem.js

@@ -9,6 +9,7 @@ const player_1 = require("@remotion/player");
 const react_1 = require("react");
 const react_dom_1 = __importDefault(require("react-dom"));
 const colors_1 = require("../../helpers/colors");
+const pointer_session_1 = require("../../helpers/pointer-session");
 const z_index_1 = require("../../state/z-index");
 const MenuContent_1 = require("../NewComposition/MenuContent");
 const is_menu_item_1 = require("./is-menu-item");
@@ -68,12 +69,18 @@ const MenuItem = ({ label: itemName, selected, id, onItemSelected, onItemHovered
             return;
         }
         onItemSelected(id);
-        window.addEventListener('pointerup', (evt) => {
-            if (!(0, is_menu_item_1.isMenuItem)(evt.target)) {
-                onItemQuit();
-            }
-        }, {
-            once: true,
+        (0, pointer_session_1.startPointerSession)({
+            event: e.nativeEvent,
+            target: e.currentTarget,
+            onEnd: (reason, evt) => {
+                if ((reason === 'pointerup' || reason === 'buttons-released') &&
+                    evt) {
+                    const target = document.elementFromPoint(evt.clientX, evt.clientY);
+                    if (!target || !(0, is_menu_item_1.isMenuItem)(target)) {
+                        onItemQuit();
+                    }
+                }
+            },
         });
     }, [id, onItemQuit, onItemSelected]);
     const onMenuPointerDown = (0, react_1.useCallback)((e) => {

package/dist/components/Menu/MenuSubItem.js

@@ -93,7 +93,9 @@ const MenuSubItem = ({ label, leaveLeftSpace, leftItem, onActionChosen, id, sele
         const minSpaceRequired = mobileLayout
             ? styles_1.MAX_MOBILE_MENU_WIDTH
             : styles_1.MAX_MENU_WIDTH;
-        const canOpenOnRight = size.windowSize.width - size.left - size.width >= minSpaceRequired;
+        const spaceToLeft = size.left;
+        const spaceToRight = size.windowSize.width - size.left - size.width;
+        const canOpenOnRight = spaceToRight >= minSpaceRequired || spaceToRight >= spaceToLeft;
         return {
             ...styles_1.menuContainerTowardsBottom,
             ...(canOpenOnRight

package/dist/components/MenuBuildIndicator.js

@@ -55,7 +55,7 @@ const MenuBuildIndicator = () => {
                 originalColumnNumber: 1,
                 originalFunctionName: null,
                 originalScriptCode: null,
-            })
+            }, null)
                 .then(({ success }) => {
                 if (!success) {
                     (0, NotificationCenter_1.showNotification)(`Could not open ${window.remotion_editorName}`, 2000);

package/dist/components/MenuCompositionName.js

@@ -72,7 +72,7 @@ const MenuCompositionName = () => {
                 });
             }
             else if (resolvedLocation) {
-                await (0, open_in_editor_1.openOriginalPositionInEditor)(resolvedLocation);
+                await (0, open_in_editor_1.openOriginalPositionInEditor)(resolvedLocation, null);
             }
         }
         catch (err) {

package/dist/components/MobilePanel.js

@@ -21,12 +21,15 @@ const overlay = {
 const panel = {
     position: 'fixed',
     top: menu_toolbar_height_1.MENU_TOOLBAR_HEIGHT,
-    width: 'min(350px, calc(100% - 50px))',
     height: `calc(100% - ${menu_toolbar_height_1.MENU_TOOLBAR_HEIGHT}px)`,
     overflow: 'hidden',
     background: colors_1.BACKGROUND,
     boxShadow: colors_1.SHADOW_BLACK,
 };
+const sidebarWidth = {
+    left: 'min(210px, calc(100% - 50px))',
+    right: 'min(245px, calc(100% - 50px))',
+};
 function MobilePanel({ children, onClose, side, }) {
     const { currentZIndex } = (0, z_index_1.useZIndex)();
     const onOutsideClick = react_1.default.useCallback((target) => {
@@ -41,6 +44,7 @@ function MobilePanel({ children, onClose, side, }) {
     }, [onClose, side]);
     return react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { style: overlay, children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onEscape: onClose, onOutsideClick: onOutsideClick, children: jsx_runtime_1.jsx("div", { style: {
                     ...panel,
+                    width: sidebarWidth[side],
                     left: side === 'left' ? 0 : undefined,
                     right: side === 'right' ? 0 : undefined,
                 }, children: children }) }) }), (0, portals_1.getPortal)(currentZIndex));

package/dist/components/ModalContainer.js

@@ -34,6 +34,6 @@ const ModalContainer = ({ children, onEscape, onOutsideClick, noZIndex, panelSty
         // Prevent deselection of currently selected items
         e.stopPropagation();
     }, []);
-    return (jsx_runtime_1.jsx("div", { className: "css-reset", style: backgroundOverlay, role: "dialog", "aria-modal": "true", onPointerDown: onPointerDown, children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { disabled: noZIndex, onOutsideClick: onOutsideClick, onEscape: onEscape, children: jsx_runtime_1.jsx("div", { style: { ...panel, ...panelStyle }, children: children }) }) }));
+    return (jsx_runtime_1.jsx("div", { className: "css-reset", style: backgroundOverlay, role: "dialog", "aria-modal": "true", onPointerDown: onPointerDown, children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { disabled: noZIndex, onOutsideClick: onOutsideClick, onEscape: onEscape, stackOnHighest: true, children: jsx_runtime_1.jsx("div", { style: { ...panel, ...panelStyle }, children: children }) }) }));
 };
 exports.ModalContainer = ModalContainer;

package/dist/components/ModalFooter.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
 export declare const ModalFooterContainer: React.FC<{
     readonly children: React.ReactNode;
+    readonly style?: React.CSSProperties;
 }>;

package/dist/components/ModalFooter.js

@@ -10,7 +10,7 @@ const content = {
     fontSize: 13,
     minWidth: 500,
 };
-const ModalFooterContainer = ({ children }) => {
-    return jsx_runtime_1.jsx("div", { style: { ...content, borderTop: colors_1.BORDER_BLACK }, children: children });
+const ModalFooterContainer = ({ children, style }) => {
+    return (jsx_runtime_1.jsx("div", { style: { ...content, ...style, borderTop: colors_1.BORDER_BLACK }, children: children }));
 };
 exports.ModalFooterContainer = ModalFooterContainer;

package/dist/components/Modals.js

@@ -6,14 +6,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Modals = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const react_dom_1 = __importDefault(require("react-dom"));
 const client_id_1 = require("../helpers/client-id");
 const studio_runtime_config_1 = require("../helpers/studio-runtime-config");
 const modals_1 = require("../state/modals");
+const z_index_1 = require("../state/z-index");
 const AskAiModal_1 = require("./AskAiModal");
+const ConfigureDefaultEditorModal_1 = require("./ConfigureDefaultEditorModal");
 const ConfigureLicenseModal_1 = require("./ConfigureLicenseModal");
 const ConfirmationDialog_1 = require("./ConfirmationDialog");
 const EffectPickerModal_1 = require("./EffectPickerModal");
 const InstallPackage_1 = require("./InstallPackage");
+const portals_1 = require("./Menu/portals");
 const DeleteComposition_1 = require("./NewComposition/DeleteComposition");
 const DeleteFolder_1 = require("./NewComposition/DeleteFolder");
 const DuplicateComposition_1 = require("./NewComposition/DuplicateComposition");
@@ -32,10 +36,15 @@ const UpdateModal_1 = require("./UpdateModal/UpdateModal");
 const Modals = ({ readOnlyStudio }) => {
     var _a;
     const { selectedModal: modalContextType } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { currentZIndex } = (0, z_index_1.useZIndex)();
     const canRender = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx).previewServerState.type ===
         'connected';
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'new-comp' && (jsx_runtime_1.jsx(NewComposition_1.NewComposition, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'new-folder' && (jsx_runtime_1.jsx(NewFolder_1.NewFolder, { parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'duplicate-comp' && (jsx_runtime_1.jsx(DuplicateComposition_1.DuplicateComposition, { compositionType: modalContextType.compositionType, compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-comp' && (jsx_runtime_1.jsx(DeleteComposition_1.DeleteComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'rename-comp' && (jsx_runtime_1.jsx(RenameComposition_1.RenameComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-folder' && (jsx_runtime_1.jsx(DeleteFolder_1.DeleteFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-folder' && (jsx_runtime_1.jsx(RenameFolder_1.RenameFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-static-file' && (jsx_runtime_1.jsx(RenameStaticFile_1.RenameStaticFileModal, { relativePath: modalContextType.relativePath })), modalContextType && modalContextType.type === 'input-props-override' && (jsx_runtime_1.jsx(OverrideInputProps_1.OverrideInputPropsModal, {})), modalContextType && modalContextType.type === 'configure-license' && (jsx_runtime_1.jsx(ConfigureLicenseModal_1.ConfigureLicenseModal, { initialPublicLicenseKey: modalContextType.initialPublicLicenseKey })), modalContextType && modalContextType.type === 'web-render' && (jsx_runtime_1.jsx(WebRenderModal_1.WebRenderModalWithLoader, { ...modalContextType })), modalContextType &&
+    return react_dom_1.default.createPortal(jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'new-comp' && (jsx_runtime_1.jsx(NewComposition_1.NewComposition, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'new-folder' && (jsx_runtime_1.jsx(NewFolder_1.NewFolder, { parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'duplicate-comp' && (jsx_runtime_1.jsx(DuplicateComposition_1.DuplicateComposition, { compositionType: modalContextType.compositionType, compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-comp' && (jsx_runtime_1.jsx(DeleteComposition_1.DeleteComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'rename-comp' && (jsx_runtime_1.jsx(RenameComposition_1.RenameComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-folder' && (jsx_runtime_1.jsx(DeleteFolder_1.DeleteFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-folder' && (jsx_runtime_1.jsx(RenameFolder_1.RenameFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-static-file' && (jsx_runtime_1.jsx(RenameStaticFile_1.RenameStaticFileModal, { relativePath: modalContextType.relativePath })), modalContextType && modalContextType.type === 'input-props-override' && (jsx_runtime_1.jsx(OverrideInputProps_1.OverrideInputPropsModal, {})), modalContextType && modalContextType.type === 'configure-license' && (jsx_runtime_1.jsx(ConfigureLicenseModal_1.ConfigureLicenseModal, { initialPublicLicenseKey: modalContextType.initialPublicLicenseKey })), modalContextType &&
+                modalContextType.type === 'configure-default-editor' && (jsx_runtime_1.jsx(ConfigureDefaultEditorModal_1.ConfigureDefaultEditorModal, {})), modalContextType && modalContextType.type === 'web-render' && (jsx_runtime_1.jsx(WebRenderModal_1.WebRenderModalWithLoader, { ...modalContextType })), modalContextType &&
                 modalContextType.type === 'server-render' &&
-                (canRender || modalContextType.readOnlyStudio) ? (jsx_runtime_1.jsx(ServerRenderModal_1.RenderModalWithLoader, { readOnlyStudio: (_a = modalContextType.readOnlyStudio) !== null && _a !== void 0 ? _a : false, initialFrame: modalContextType.initialFrame, initialDarkMode: modalContextType.initialDarkMode, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialJpegQuality: modalContextType.initialJpegQuality, initialScale: modalContextType.initialScale, initialLogLevel: modalContextType.initialLogLevel, initialOffthreadVideoCacheSizeInBytes: modalContextType.initialOffthreadVideoCacheSizeInBytes, initialOffthreadVideoThreads: modalContextType.initialOffthreadVideoThreads, initialMediaCacheSizeInBytes: modalContextType.initialMediaCacheSizeInBytes, initialConcurrency: modalContextType.initialConcurrency, maxConcurrency: modalContextType.maxConcurrency, minConcurrency: modalContextType.minConcurrency, initialStillImageFormat: modalContextType.initialStillImageFormat, initialMuted: modalContextType.initialMuted, initialEnforceAudioTrack: modalContextType.initialEnforceAudioTrack, initialProResProfile: modalContextType.initialProResProfile, initialx264Preset: modalContextType.initialx264Preset, initialGopSize: modalContextType.initialGopSize, initialPixelFormat: modalContextType.initialPixelFormat, initialAudioBitrate: modalContextType.initialAudioBitrate, initialVideoBitrate: modalContextType.initialVideoBitrate, initialEveryNthFrame: modalContextType.initialEveryNthFrame, initialNumberOfGifLoops: modalContextType.initialNumberOfGifLoops, initialDelayRenderTimeout: modalContextType.initialDelayRenderTimeout, initialEnvVariables: modalContextType.initialEnvVariables, initialDisableWebSecurity: modalContextType.initialDisableWebSecurity, initialGl: modalContextType.initialOpenGlRenderer, initialHeadless: modalContextType.initialHeadless, initialIgnoreCertificateErrors: modalContextType.initialIgnoreCertificateErrors, initialEncodingBufferSize: modalContextType.initialEncodingBufferSize, initialEncodingMaxRate: modalContextType.initialEncodingMaxRate, initialUserAgent: modalContextType.initialUserAgent, initialColorSpace: modalContextType.initialColorSpace, initialMultiProcessOnLinux: modalContextType.initialMultiProcessOnLinux, initialRepro: modalContextType.initialRepro, initialBeep: modalContextType.initialBeep, initialForSeamlessAacConcatenation: modalContextType.initialForSeamlessAacConcatenation, defaultProps: modalContextType.defaultProps, inFrameMark: modalContextType.inFrameMark, outFrameMark: modalContextType.outFrameMark, defaultConfigurationAudioCodec: modalContextType.defaultConfigurationAudioCodec, defaultConfigurationVideoCodec: modalContextType.defaultConfigurationVideoCodec, renderTypeOfLastRender: modalContextType.renderTypeOfLastRender, defaultMetadata: modalContextType.defaulMetadata, initialHardwareAcceleration: modalContextType.initialHardwareAcceleration, initialSampleRate: modalContextType.initialSampleRate, initialChromeMode: modalContextType.initialChromeMode, renderDefaults: modalContextType.renderDefaults })) : null, modalContextType && modalContextType.type === 'render-progress' && (jsx_runtime_1.jsx(RenderStatusModal_1.RenderStatusModal, { jobId: modalContextType.jobId })), modalContextType && modalContextType.type === 'update' && (jsx_runtime_1.jsx(UpdateModal_1.UpdateModal, { info: modalContextType.info, knownBugs: modalContextType.knownBugs })), modalContextType && modalContextType.type === 'install-packages' && (jsx_runtime_1.jsx(InstallPackage_1.InstallPackageModal, { packageManager: modalContextType.packageManager })), modalContextType && modalContextType.type === 'quick-switcher' && (jsx_runtime_1.jsx(QuickSwitcher_1.default, { readOnlyStudio: readOnlyStudio, invocationTimestamp: modalContextType.invocationTimestamp, initialMode: modalContextType.mode, assetSelection: modalContextType.assetSelection, compositionSelection: modalContextType.compositionSelection })), modalContextType && modalContextType.type === 'add-effect' && (jsx_runtime_1.jsx(EffectPickerModal_1.EffectPickerModal, { state: modalContextType })), modalContextType && modalContextType.type === 'confirmation-dialog' && (jsx_runtime_1.jsx(ConfirmationDialog_1.ConfirmationDialog, { state: modalContextType })), modalContextType && modalContextType.type === 'svg-import-dialog' && (jsx_runtime_1.jsx(SvgImportDialog_1.SvgImportDialog, { state: modalContextType })), (0, studio_runtime_config_1.getStudioAskAIEnabled)() && jsx_runtime_1.jsx(AskAiModal_1.AskAiModal, {})] }));
+                (canRender || modalContextType.readOnlyStudio) ? (jsx_runtime_1.jsx(ServerRenderModal_1.RenderModalWithLoader, { readOnlyStudio: (_a = modalContextType.readOnlyStudio) !== null && _a !== void 0 ? _a : false, initialFrame: modalContextType.initialFrame, initialDarkMode: modalContextType.initialDarkMode, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialJpegQuality: modalContextType.initialJpegQuality, initialScale: modalContextType.initialScale, initialLogLevel: modalContextType.initialLogLevel, initialOffthreadVideoCacheSizeInBytes: modalContextType.initialOffthreadVideoCacheSizeInBytes, initialOffthreadVideoThreads: modalContextType.initialOffthreadVideoThreads, initialMediaCacheSizeInBytes: modalContextType.initialMediaCacheSizeInBytes, initialConcurrency: modalContextType.initialConcurrency, maxConcurrency: modalContextType.maxConcurrency, minConcurrency: modalContextType.minConcurrency, initialStillImageFormat: modalContextType.initialStillImageFormat, initialMuted: modalContextType.initialMuted, initialEnforceAudioTrack: modalContextType.initialEnforceAudioTrack, initialProResProfile: modalContextType.initialProResProfile, initialx264Preset: modalContextType.initialx264Preset, initialGopSize: modalContextType.initialGopSize, initialPixelFormat: modalContextType.initialPixelFormat, initialAudioBitrate: modalContextType.initialAudioBitrate, initialVideoBitrate: modalContextType.initialVideoBitrate, initialEveryNthFrame: modalContextType.initialEveryNthFrame, initialNumberOfGifLoops: modalContextType.initialNumberOfGifLoops, initialDelayRenderTimeout: modalContextType.initialDelayRenderTimeout, initialEnvVariables: modalContextType.initialEnvVariables, initialDisableWebSecurity: modalContextType.initialDisableWebSecurity, initialGl: modalContextType.initialOpenGlRenderer, initialHeadless: modalContextType.initialHeadless, initialIgnoreCertificateErrors: modalContextType.initialIgnoreCertificateErrors, initialEncodingBufferSize: modalContextType.initialEncodingBufferSize, initialEncodingMaxRate: modalContextType.initialEncodingMaxRate, initialUserAgent: modalContextType.initialUserAgent, initialColorSpace: modalContextType.initialColorSpace, initialMultiProcessOnLinux: modalContextType.initialMultiProcessOnLinux, initialRepro: modalContextType.initialRepro, initialBeep: modalContextType.initialBeep, initialForSeamlessAacConcatenation: modalContextType.initialForSeamlessAacConcatenation, defaultProps: modalContextType.defaultProps, inFrameMark: modalContextType.inFrameMark, outFrameMark: modalContextType.outFrameMark, defaultConfigurationAudioCodec: modalContextType.defaultConfigurationAudioCodec, defaultConfigurationVideoCodec: modalContextType.defaultConfigurationVideoCodec, renderTypeOfLastRender: modalContextType.renderTypeOfLastRender, defaultMetadata: modalContextType.defaulMetadata, initialHardwareAcceleration: modalContextType.initialHardwareAcceleration, initialSampleRate: modalContextType.initialSampleRate, initialChromeMode: modalContextType.initialChromeMode, renderDefaults: modalContextType.renderDefaults })) : null, modalContextType && modalContextType.type === 'render-progress' && (jsx_runtime_1.jsx(RenderStatusModal_1.RenderStatusModal, { jobId: modalContextType.jobId })), modalContextType && modalContextType.type === 'update' && (jsx_runtime_1.jsx(UpdateModal_1.UpdateModal, { info: modalContextType.info, knownBugs: modalContextType.knownBugs })), modalContextType && modalContextType.type === 'install-packages' && (jsx_runtime_1.jsx(InstallPackage_1.InstallPackageModal, { packageManager: modalContextType.packageManager })), modalContextType && modalContextType.type === 'quick-switcher' && (jsx_runtime_1.jsx(QuickSwitcher_1.default, { readOnlyStudio: readOnlyStudio, invocationTimestamp: modalContextType.invocationTimestamp, initialMode: modalContextType.mode, assetSelection: modalContextType.assetSelection, compositionSelection: modalContextType.compositionSelection })), modalContextType && modalContextType.type === 'add-effect' && (jsx_runtime_1.jsx(EffectPickerModal_1.EffectPickerModal, { state: modalContextType })), modalContextType && modalContextType.type === 'confirmation-dialog' && (jsx_runtime_1.jsx(ConfirmationDialog_1.ConfirmationDialog, { state: modalContextType })), modalContextType && modalContextType.type === 'svg-import-dialog' && (jsx_runtime_1.jsx(SvgImportDialog_1.SvgImportDialog, { state: modalContextType })), (0, studio_runtime_config_1.getStudioAskAIEnabled)() && jsx_runtime_1.jsx(AskAiModal_1.AskAiModal, {})] }), 
+    // Modals must be above overlays opened from the editor, such as the
+    // floating sidebars used in the mobile layout.
+    (0, portals_1.getPortal)(currentZIndex + 1));
 };
 exports.Modals = Modals;

package/dist/components/NewComposition/InputDragger.js

@@ -39,6 +39,7 @@ const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const colors_1 = require("../../helpers/colors");
 const noop_1 = require("../../helpers/noop");
+const pointer_session_1 = require("../../helpers/pointer-session");
 const input_dragger_click_lock_1 = require("../../state/input-dragger-click-lock");
 const z_index_1 = require("../../state/z-index");
 const ForceSpecificCursor_1 = require("../ForceSpecificCursor");
@@ -409,12 +410,12 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
     };
     const onPointerDown = (0, react_1.useCallback)((e) => {
         e.stopPropagation();
-        pointerDownRef.current = true;
         const target = e.currentTarget;
         const { pageX, pageY, button } = e;
         if (button !== 0) {
             return;
         }
+        pointerDownRef.current = true;
         let lastDragValue = null;
         const moveListener = (ev) => {
             const xDistance = ev.pageX - pageX;
@@ -446,34 +447,23 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
             lastDragValue = nextValue;
             onValueChange(nextValue);
         };
-        window.addEventListener('mousemove', moveListener);
-        const endDrag = (commit) => {
-            window.removeEventListener('mousemove', moveListener);
-            window.removeEventListener('pointerup', onPointerUp);
-            window.removeEventListener('pointercancel', onPointerCancel);
-            window.removeEventListener('blur', onWindowBlur);
-            pointerDownRef.current = false;
-            setDragging(false);
-            (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
-            if (commit && lastDragValue !== null && onValueChangeEnd) {
-                onValueChangeEnd(lastDragValue);
-            }
-            setTimeout(() => {
-                (0, input_dragger_click_lock_1.setClickLock)(false);
-            }, 2);
-        };
-        const onPointerUp = () => {
-            endDrag(true);
-        };
-        const onPointerCancel = () => {
-            endDrag(false);
-        };
-        const onWindowBlur = () => {
-            endDrag(false);
-        };
-        window.addEventListener('pointerup', onPointerUp);
-        window.addEventListener('pointercancel', onPointerCancel);
-        window.addEventListener('blur', onWindowBlur);
+        (0, pointer_session_1.startPointerSession)({
+            event: e.nativeEvent,
+            target,
+            onMove: moveListener,
+            onEnd: (reason) => {
+                pointerDownRef.current = false;
+                setDragging(false);
+                (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
+                const commit = reason === 'pointerup' || reason === 'buttons-released';
+                if (commit && lastDragValue !== null && onValueChangeEnd) {
+                    onValueChangeEnd(lastDragValue);
+                }
+                setTimeout(() => {
+                    (0, input_dragger_click_lock_1.setClickLock)(false);
+                }, 2);
+            },
+        });
     }, [
         _step,
         _min,

package/dist/components/PreviewToolbarOverflowButton.js

@@ -212,6 +212,6 @@ const PreviewToolbarOverflowButton = ({ readOnlyStudio, showFullscreen, showPlay
     if (values.length === 0) {
         return null;
     }
-    return (jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { renderAction: renderAction, values: values, title: "More actions", unhoveredColor: colors_1.WHITE }));
+    return (jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { variant: null, renderAction: renderAction, values: values, title: "More actions", unhoveredColor: colors_1.WHITE }));
 };
 exports.PreviewToolbarOverflowButton = PreviewToolbarOverflowButton;

package/dist/components/RenderModal/InlineEyeIcon.js

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

package/dist/components/RenderModal/InlineRemoveButton.js

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

package/dist/components/RenderModal/RenderModalOutputName.js

@@ -44,7 +44,7 @@ const RenderModalOutputName = ({ existence, inputStyle, outName, onValueChange,
                                 jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-end", message: validationMessage, type: 'error' })
                             ] })) : existence ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                                 jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-end", message: jsx_runtime_1.jsxs("span", { style: existsMessageStyle, children: [
-                                            jsx_runtime_1.jsx(InlineAction_1.InlineAction, { onClick: openExistingOutput, renderAction: renderOpenIcon, title: `Open in ${fileManagerName}` }),
+                                            jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: openExistingOutput, renderAction: renderOpenIcon, title: `Open in ${fileManagerName}` }),
                                             "Exists, will be overwritten"] }), type: 'warning' })
                             ] })) : null] }) })
         ] }));

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

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

package/dist/components/RenderQueue/RenderQueueCopyToClipboard.js

@@ -53,6 +53,6 @@ const RenderQueueCopyToClipboard = ({ job }) => {
             (0, NotificationCenter_1.showNotification)(`Could not copy to clipboard: ${err.message}`, 2000);
         }
     }, [job.outName]);
-    return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { title: "Copy to clipboard", renderAction: renderCopyAction, onClick: onClick }));
+    return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, title: "Copy to clipboard", renderAction: renderCopyAction, onClick: onClick }));
 };
 exports.RenderQueueCopyToClipboard = RenderQueueCopyToClipboard;

package/dist/components/RenderQueue/RenderQueueDownloadItem.js

@@ -31,6 +31,6 @@ const RenderQueueDownloadItem = ({ job }) => {
     const renderAction = (0, react_1.useCallback)((color) => {
         return (jsx_runtime_1.jsx("svg", { style: icon, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", children: jsx_runtime_1.jsx("path", { fill: color, d: "M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 242.7-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7 288 32zM64 352c-35.3 0-64 28.7-64 64l0 32c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-32c0-35.3-28.7-64-64-64l-101.5 0-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352 64 352zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z" }) }));
     }, [icon]);
-    return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick, title: "Download" }));
+    return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, renderAction: renderAction, onClick: onClick, title: "Download" }));
 };
 exports.RenderQueueDownloadItem = RenderQueueDownloadItem;

package/dist/components/RenderQueue/RenderQueueItemCancelButton.js

@@ -30,6 +30,6 @@ const RenderQueueCancelButton = ({ job }) => {
     const renderAction = (0, react_1.useCallback)((color) => {
         return (jsx_runtime_1.jsx("svg", { style: icon, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", children: jsx_runtime_1.jsx("path", { fill: color, d: "M367.2 412.5L99.5 144.8C77.1 176.1 64 214.5 64 256c0 106 86 192 192 192c41.5 0 79.9-13.1 111.2-35.5zm45.3-45.3C434.9 335.9 448 297.5 448 256c0-106-86-192-192-192c-41.5 0-79.9 13.1-111.2 35.5L412.5 367.2zM512 256c0 141.4-114.6 256-256 256S0 397.4 0 256S114.6 0 256 0S512 114.6 512 256z" }) }));
     }, [icon]);
-    return jsx_runtime_1.jsx(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick });
+    return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick, variant: null }));
 };
 exports.RenderQueueCancelButton = RenderQueueCancelButton;

package/dist/components/RenderQueue/RenderQueueOpenInFolder.js

@@ -24,6 +24,6 @@ const RenderQueueOpenInFinderItem = ({ job }) => {
     const renderAction = (0, react_1.useCallback)((color) => {
         return jsx_runtime_1.jsx(folder_1.ExpandedFolderIconSolid, { style: icon, color: color });
     }, [icon]);
-    return jsx_runtime_1.jsx(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick });
+    return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick, variant: null }));
 };
 exports.RenderQueueOpenInFinderItem = RenderQueueOpenInFinderItem;

package/dist/components/RenderQueue/RenderQueueRemoveItem.js

@@ -46,6 +46,6 @@ const RenderQueueRemoveItem = ({ job }) => {
     const renderAction = (0, react_1.useCallback)((color) => {
         return (jsx_runtime_1.jsx("svg", { style: icon, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512", children: jsx_runtime_1.jsx("path", { fill: color, 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" }) }));
     }, [icon]);
-    return jsx_runtime_1.jsx(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick });
+    return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick, variant: null }));
 };
 exports.RenderQueueRemoveItem = RenderQueueRemoveItem;