@remotion/cli 4.0.0-alpha.217 → 4.0.0-alpha4

package/dist/editor/components/RenderToolbarIcon.js

@@ -1,101 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RenderButton = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const client_1 = require("@remotion/renderer/client");
-const react_1 = require("react");
-const remotion_1 = require("remotion");
-const get_default_out_name_1 = require("../../get-default-out-name");
-const Button_1 = require("../../preview-server/error-overlay/remotion-overlay/Button");
-const get_default_video_contexts_1 = require("../../preview-server/render-queue/get-default-video-contexts");
-const client_id_1 = require("../helpers/client-id");
-const use_keybinding_1 = require("../helpers/use-keybinding");
-const render_1 = require("../icons/render");
-const modals_1 = require("../state/modals");
-const layout_1 = require("./layout");
-const button = {
-    paddingLeft: 7,
-    paddingRight: 7,
-    paddingTop: 7,
-    paddingBottom: 7,
-};
-const label = {
-    fontSize: 14,
-};
-const RenderButton = () => {
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
-    const { type } = (0, react_1.useContext)(client_id_1.PreviewServerConnectionCtx);
-    const shortcut = (0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? '' : '(R)';
-    const tooltip = type === 'connected'
-        ? 'Export the current composition ' + shortcut
-        : 'Connect to the preview server to render';
-    const iconStyle = (0, react_1.useMemo)(() => {
-        return {
-            style: {
-                height: 16,
-            },
-        };
-    }, []);
-    const video = remotion_1.Internals.useVideo();
-    const frame = (0, remotion_1.useCurrentFrame)();
-    const { props } = (0, react_1.useContext)(remotion_1.Internals.EditorPropsContext);
-    const onClick = (0, react_1.useCallback)(() => {
-        var _a, _b, _c;
-        if (!video) {
-            return null;
-        }
-        const isVideo = video.durationInFrames > 1;
-        const defaults = window.remotion_renderDefaults;
-        if (!defaults) {
-            throw new TypeError('Expected defaults');
-        }
-        const { initialAudioCodec, initialRenderType, initialVideoCodec } = (0, get_default_video_contexts_1.getDefaultCodecs)({
-            defaultCodec: defaults.codec,
-            isStill: !isVideo,
-        });
-        setSelectedModal({
-            type: 'render',
-            compositionId: video.id,
-            initialFrame: frame,
-            initialStillImageFormat: defaults.stillImageFormat,
-            initialVideoImageFormat: defaults.videoImageFormat,
-            initialOutName: (0, get_default_out_name_1.getDefaultOutLocation)({
-                compositionName: video.id,
-                defaultExtension: isVideo
-                    ? client_1.BrowserSafeApis.getFileExtensionFromCodec(initialVideoCodec, defaults.audioCodec)
-                    : defaults.stillImageFormat,
-                type: 'asset',
-            }),
-            initialJpegQuality: defaults.jpegQuality,
-            initialScale: (_b = (_a = window.remotion_renderDefaults) === null || _a === void 0 ? void 0 : _a.scale) !== null && _b !== void 0 ? _b : 1,
-            initialVerbose: defaults.logLevel === 'verbose',
-            initialVideoCodecForAudioTab: initialAudioCodec,
-            initialRenderType,
-            initialVideoCodecForVideoTab: initialVideoCodec,
-            initialConcurrency: defaults.concurrency,
-            maxConcurrency: defaults.maxConcurrency,
-            minConcurrency: defaults.minConcurrency,
-            initialMuted: defaults.muted,
-            initialEnforceAudioTrack: defaults.enforceAudioTrack,
-            initialProResProfile: defaults.proResProfile,
-            initialPixelFormat: defaults.pixelFormat,
-            initialAudioBitrate: defaults.audioBitrate,
-            initialVideoBitrate: defaults.videoBitrate,
-            initialEveryNthFrame: defaults.everyNthFrame,
-            initialNumberOfGifLoops: defaults.numberOfGifLoops,
-            initialDelayRenderTimeout: defaults.delayRenderTimeout,
-            initialAudioCodec: defaults.audioCodec,
-            initialEnvVariables: window.process.env,
-            initialDisableWebSecurity: defaults.disableWebSecurity,
-            initialOpenGlRenderer: defaults.openGlRenderer,
-            initialHeadless: defaults.headless,
-            initialIgnoreCertificateErrors: defaults.ignoreCertificateErrors,
-            defaultProps: (_c = props[video.id]) !== null && _c !== void 0 ? _c : video.defaultProps,
-        });
-    }, [video, setSelectedModal, frame, props]);
-    if (!video) {
-        return null;
-    }
-    return ((0, jsx_runtime_1.jsx)(Button_1.Button, { id: "render-modal-button", title: tooltip, onClick: onClick, buttonContainerStyle: button, children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)(render_1.RenderIcon, { svgProps: iconStyle }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("span", { style: label, children: "Render" })] }) }));
-};
-exports.RenderButton = RenderButton;

package/dist/editor/components/RendersTab.d.ts

@@ -1,6 +0,0 @@
-import type { MouseEventHandler } from 'react';
-import React from 'react';
-export declare const RendersTab: React.FC<{
-    selected: boolean;
-    onClick: MouseEventHandler<HTMLButtonElement>;
-}>;

package/dist/editor/components/RendersTab.js

@@ -1,43 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RendersTab = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const colors_1 = require("../helpers/colors");
-const layout_1 = require("./layout");
-const context_1 = require("./RenderQueue/context");
-const Tabs_1 = require("./Tabs");
-const row = {
-    display: 'flex',
-    flexDirection: 'row',
-    fontSize: 14,
-    color: 'inherit',
-    alignItems: 'center',
-    flex: 1,
-};
-const badge = {
-    height: 16,
-    width: 16,
-    borderRadius: 3,
-    fontSize: 10,
-    display: 'inline-flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-};
-const RendersTab = ({ selected, onClick }) => {
-    const { jobs } = (0, react_1.useContext)(context_1.RenderQueueContext);
-    const failedJobs = jobs.filter((j) => j.status === 'failed').length;
-    const jobCount = jobs.length;
-    const badgeStyle = (0, react_1.useMemo)(() => {
-        return {
-            ...badge,
-            backgroundColor: failedJobs > 0 ? colors_1.FAIL_COLOR : 'transparent',
-            color: failedJobs > 0 ? 'white' : colors_1.LIGHT_TEXT,
-            borderWidth: failedJobs > 0 ? 0 : 1,
-            borderStyle: 'solid',
-            borderColor: colors_1.LIGHT_TEXT,
-        };
-    }, [failedJobs]);
-    return ((0, jsx_runtime_1.jsx)(Tabs_1.Tab, { selected: selected, onClick: onClick, children: (0, jsx_runtime_1.jsxs)("div", { style: row, children: ["Renders", jobCount > 0 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)("div", { style: badgeStyle, children: jobCount })] })) : null] }) }));
-};
-exports.RendersTab = RendersTab;

package/dist/editor/components/RightPanel.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-declare type SidebarPanel = 'input-props' | 'renders';
-export declare const persistSelectedPanel: (panel: SidebarPanel) => void;
-export declare const rightSidebarTabs: React.RefObject<{
-    selectRendersPanel: () => void;
-}>;
-export declare const RightPanel: React.FC<{}>;
-export {};

package/dist/editor/components/RightPanel.js

@@ -1,76 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RightPanel = exports.rightSidebarTabs = exports.persistSelectedPanel = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const remotion_1 = require("remotion");
-const RenderModalData_1 = require("./RenderModal/RenderModalData");
-const RenderQueue_1 = require("./RenderQueue");
-const RendersTab_1 = require("./RendersTab");
-const Tabs_1 = require("./Tabs");
-const container = {
-    height: '100%',
-    width: '100%',
-    position: 'absolute',
-    display: 'flex',
-    flexDirection: 'column',
-};
-const PropsEditor = ({ composition }) => {
-    var _a;
-    const { props, updateProps } = (0, react_1.useContext)(remotion_1.Internals.EditorPropsContext);
-    const setInputProps = (0, react_1.useCallback)((newProps) => {
-        updateProps({
-            id: composition.id,
-            defaultProps: composition.defaultProps,
-            newProps: newProps,
-        });
-    }, [composition.defaultProps, composition.id, updateProps]);
-    return ((0, jsx_runtime_1.jsx)(RenderModalData_1.RenderModalData, { composition: composition, inputProps: (_a = props[composition.id]) !== null && _a !== void 0 ? _a : composition.defaultProps, setInputProps: setInputProps, compact: true, mayShowSaveButton: true }));
-};
-const localStorageKey = 'remotion.sidebarPanel';
-const getSelectedPanel = () => {
-    const panel = localStorage.getItem(localStorageKey);
-    if (panel === 'renders') {
-        return 'renders';
-    }
-    return 'input-props';
-};
-const tabsContainer = {};
-const persistSelectedPanel = (panel) => {
-    localStorage.setItem(localStorageKey, panel);
-};
-exports.persistSelectedPanel = persistSelectedPanel;
-exports.rightSidebarTabs = (0, react_1.createRef)();
-const RightPanel = () => {
-    const [panel, setPanel] = (0, react_1.useState)(() => getSelectedPanel());
-    const onCompositionsSelected = (0, react_1.useCallback)(() => {
-        setPanel('input-props');
-        (0, exports.persistSelectedPanel)('input-props');
-    }, []);
-    const onRendersSelected = (0, react_1.useCallback)(() => {
-        setPanel('renders');
-        (0, exports.persistSelectedPanel)('renders');
-    }, []);
-    (0, react_1.useImperativeHandle)(exports.rightSidebarTabs, () => {
-        return {
-            selectRendersPanel: () => {
-                setPanel('renders');
-                (0, exports.persistSelectedPanel)('renders');
-            },
-        };
-    }, []);
-    const { compositions, currentComposition } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
-    const composition = (0, react_1.useMemo)(() => {
-        for (const comp of compositions) {
-            if (comp.id === currentComposition) {
-                return comp;
-            }
-        }
-        return null;
-    }, [compositions, currentComposition]);
-    if (composition === null) {
-        return null;
-    }
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, className: "css-reset", children: [(0, jsx_runtime_1.jsx)("div", { style: tabsContainer, children: (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tab, { selected: panel === 'input-props', onClick: onCompositionsSelected, children: "Props" }), (0, jsx_runtime_1.jsx)(RendersTab_1.RendersTab, { onClick: onRendersSelected, selected: panel === 'renders' })] }) }), panel === 'renders' ? ((0, jsx_runtime_1.jsx)(RenderQueue_1.RenderQueue, {})) : ((0, jsx_runtime_1.jsx)(PropsEditor, { composition: composition }))] }));
-};
-exports.RightPanel = RightPanel;

package/dist/editor/components/SegmentedControl.d.ts

@@ -1,11 +0,0 @@
-import React from 'react';
-export declare type SegmentedControlItem = {
-    label: React.ReactNode;
-    onClick: () => void;
-    key: string;
-    selected: boolean;
-};
-export declare const SegmentedControl: React.FC<{
-    items: SegmentedControlItem[];
-    needsWrapping: boolean;
-}>;

package/dist/editor/components/SegmentedControl.js

@@ -1,62 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SegmentedControl = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const colors_1 = require("../helpers/colors");
-const z_index_1 = require("../state/z-index");
-const container = {
-    display: 'flex',
-    flexDirection: 'row',
-    overflow: 'hidden',
-    border: '1px solid ' + colors_1.INPUT_BORDER_COLOR_UNHOVERED,
-    flexWrap: 'wrap',
-    maxWidth: '295px',
-    justifyContent: 'flex-end',
-};
-const item = {
-    display: 'flex',
-    fontSize: 15,
-    padding: '4px 12px',
-    cursor: 'pointer',
-    appearance: 'none',
-    border: 'none',
-};
-const SegmentedControl = ({ items, needsWrapping }) => {
-    const controlStyle = (0, react_1.useMemo)(() => {
-        if (needsWrapping) {
-            return {
-                ...container,
-                flexWrap: 'wrap',
-                maxWidth: '248px',
-                justifyContent: 'flex-end',
-                marginBottom: '8px',
-            };
-        }
-        return {
-            ...container,
-        };
-    }, [needsWrapping]);
-    return ((0, jsx_runtime_1.jsx)("div", { style: controlStyle, children: items.map((i) => {
-            return ((0, jsx_runtime_1.jsx)(Item, { onClick: i.onClick, selected: i.selected, children: i.label }, i.key));
-        }) }));
-};
-exports.SegmentedControl = SegmentedControl;
-const Item = ({ selected, onClick, children }) => {
-    const [hovered, setHovered] = (0, react_1.useState)(false);
-    const { tabIndex } = (0, z_index_1.useZIndex)();
-    const onPointerEnter = (0, react_1.useCallback)(() => {
-        setHovered(true);
-    }, []);
-    const onPointerLeave = (0, react_1.useCallback)(() => {
-        setHovered(false);
-    }, []);
-    const itemStyle = (0, react_1.useMemo)(() => {
-        return {
-            ...item,
-            backgroundColor: selected ? colors_1.INPUT_BACKGROUND : 'transparent',
-            color: selected ? 'white' : hovered ? 'white' : colors_1.LIGHT_TEXT,
-        };
-    }, [hovered, selected]);
-    return ((0, jsx_runtime_1.jsx)("button", { type: "button", onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: itemStyle, tabIndex: tabIndex, onClick: onClick, children: children }));
-};

package/dist/editor/components/SetTimelineInOutProvider.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-export declare const SetTimelineInOutProvider: React.FC<{
-    children: React.ReactNode;
-}>;

package/dist/editor/components/SetTimelineInOutProvider.js

@@ -1,19 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SetTimelineInOutProvider = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const in_out_1 = require("../state/in-out");
-const SetTimelineInOutProvider = ({ children }) => {
-    const [inAndOutFrames, setInAndOutFrames] = (0, react_1.useState)({
-        inFrame: null,
-        outFrame: null,
-    });
-    const setTimelineInOutContextValue = (0, react_1.useMemo)(() => {
-        return {
-            setInAndOutFrames,
-        };
-    }, []);
-    return ((0, jsx_runtime_1.jsx)(in_out_1.TimelineInOutContext.Provider, { value: inAndOutFrames, children: (0, jsx_runtime_1.jsx)(in_out_1.SetTimelineInOutContext.Provider, { value: setTimelineInOutContextValue, children: children }) }));
-};
-exports.SetTimelineInOutProvider = SetTimelineInOutProvider;

package/dist/editor/components/SidebarCollapserControls.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const SidebarCollapserControls: React.FC<{}>;

package/dist/editor/components/SidebarCollapserControls.js

@@ -1,122 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SidebarCollapserControls = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const ShortcutHint_1 = require("../../preview-server/error-overlay/remotion-overlay/ShortcutHint");
-const use_keybinding_1 = require("../helpers/use-keybinding");
-const sidebar_1 = require("../state/sidebar");
-const InlineAction_1 = require("./InlineAction");
-const layout_1 = require("./layout");
-const TopPanel_1 = require("./TopPanel");
-const style = {
-    width: 16,
-    height: 16,
-    border: '1px solid white',
-    borderRadius: 3,
-    position: 'relative',
-};
-const SidebarCollapserControls = () => {
-    const { setSidebarCollapsedState, sidebarCollapsedStateRight } = (0, react_1.useContext)(sidebar_1.SidebarContext);
-    const keybindings = (0, use_keybinding_1.useKeybinding)();
-    const leftSidebarStatus = (0, TopPanel_1.useResponsiveSidebarStatus)();
-    const leftIcon = (0, react_1.useMemo)(() => {
-        return {
-            width: '35%',
-            height: '100%',
-            borderRight: '1px solid white',
-            background: leftSidebarStatus === 'expanded' ? 'white' : 'transparent',
-        };
-    }, [leftSidebarStatus]);
-    const rightIcon = (0, react_1.useMemo)(() => {
-        return {
-            width: '35%',
-            height: '100%',
-            right: 0,
-            position: 'absolute',
-            borderLeft: '1px solid white',
-            background: sidebarCollapsedStateRight === 'expanded' ? 'white' : 'transparent',
-        };
-    }, [sidebarCollapsedStateRight]);
-    const toggleLeft = (0, react_1.useCallback)(() => {
-        setSidebarCollapsedState({
-            left: (s) => {
-                if (s === 'responsive') {
-                    return leftSidebarStatus === 'collapsed' ? 'expanded' : 'collapsed';
-                }
-                return s === 'collapsed' ? 'expanded' : 'collapsed';
-            },
-            right: null,
-        });
-    }, [leftSidebarStatus, setSidebarCollapsedState]);
-    const toggleRight = (0, react_1.useCallback)(() => {
-        setSidebarCollapsedState({
-            right: (s) => (s === 'collapsed' ? 'expanded' : 'collapsed'),
-            left: null,
-        });
-    }, [setSidebarCollapsedState]);
-    const toggleBoth = (0, react_1.useCallback)(() => {
-        if (sidebarCollapsedStateRight === leftSidebarStatus) {
-            setSidebarCollapsedState({
-                left: (s) => {
-                    if (s === 'responsive') {
-                        return leftSidebarStatus === 'collapsed' ? 'expanded' : 'collapsed';
-                    }
-                    return s === 'collapsed' ? 'expanded' : 'collapsed';
-                },
-                right: (s) => (s === 'collapsed' ? 'expanded' : 'collapsed'),
-            });
-        }
-        else if (sidebarCollapsedStateRight === 'expanded') {
-            toggleRight();
-        }
-        else if (leftSidebarStatus === 'expanded') {
-            toggleLeft();
-        }
-    }, [
-        leftSidebarStatus,
-        setSidebarCollapsedState,
-        sidebarCollapsedStateRight,
-        toggleLeft,
-        toggleRight,
-    ]);
-    (0, react_1.useEffect)(() => {
-        const left = keybindings.registerKeybinding({
-            event: 'keydown',
-            key: 'b',
-            commandCtrlKey: true,
-            callback: toggleLeft,
-            preventDefault: true,
-            triggerIfInputFieldFocused: false,
-        });
-        const right = keybindings.registerKeybinding({
-            event: 'keydown',
-            key: 'j',
-            commandCtrlKey: true,
-            callback: toggleRight,
-            preventDefault: true,
-            triggerIfInputFieldFocused: false,
-        });
-        const zen = keybindings.registerKeybinding({
-            event: 'keydown',
-            key: 'g',
-            commandCtrlKey: true,
-            callback: toggleBoth,
-            preventDefault: true,
-            triggerIfInputFieldFocused: false,
-        });
-        return () => {
-            left.unregister();
-            right.unregister();
-            zen.unregister();
-        };
-    }, [keybindings, toggleBoth, toggleLeft, toggleRight]);
-    const toggleLeftTooltip = (0, use_keybinding_1.areKeyboardShortcutsDisabled)()
-        ? 'Toggle Left Sidebar'
-        : `Toggle Left Sidebar (${ShortcutHint_1.cmdOrCtrlCharacter}+B)`;
-    const toggleRightTooltip = (0, use_keybinding_1.areKeyboardShortcutsDisabled)()
-        ? 'Toggle Right Sidebar'
-        : `Toggle Right Sidebar (${ShortcutHint_1.cmdOrCtrlCharacter}+J)`;
-    return ((0, jsx_runtime_1.jsxs)(layout_1.Row, { children: [(0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { onClick: toggleLeft, children: (0, jsx_runtime_1.jsx)("div", { style: style, title: toggleLeftTooltip, children: (0, jsx_runtime_1.jsx)("div", { style: leftIcon }) }) }), (0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { onClick: toggleRight, children: (0, jsx_runtime_1.jsx)("div", { style: style, title: toggleRightTooltip, children: (0, jsx_runtime_1.jsx)("div", { style: rightIcon }) }) })] }));
-};
-exports.SidebarCollapserControls = SidebarCollapserControls;

package/dist/editor/components/Tabs/index.d.ts

@@ -1,11 +0,0 @@
-import React from 'react';
-export declare const Tabs: React.FC<{
-    children: React.ReactNode;
-    style?: React.CSSProperties;
-}>;
-export declare const Tab: React.FC<{
-    children: React.ReactNode;
-    onClick: React.MouseEventHandler<HTMLButtonElement>;
-    style?: React.CSSProperties;
-    selected: boolean;
-}>;

package/dist/editor/components/Tabs/index.js

@@ -1,58 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Tab = exports.Tabs = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const colors_1 = require("../../helpers/colors");
-const z_index_1 = require("../../state/z-index");
-const tabsContainer = {
-    display: 'flex',
-    flexDirection: 'row',
-};
-const Tabs = ({ children, style }) => {
-    const definiteStyle = (0, react_1.useMemo)(() => {
-        return {
-            ...tabsContainer,
-            ...style,
-        };
-    }, [style]);
-    return (0, jsx_runtime_1.jsx)("div", { style: definiteStyle, children: children });
-};
-exports.Tabs = Tabs;
-const selectorButton = {
-    border: 'none',
-    flex: 1,
-    padding: 8,
-    paddingLeft: 16,
-    display: 'flex',
-    flexDirection: 'row',
-    fontSize: 14,
-    color: 'inherit',
-    alignItems: 'center',
-};
-const Tab = ({ children, onClick, style, selected }) => {
-    const [hovered, setHovered] = (0, react_1.useState)(false);
-    const { tabIndex } = (0, z_index_1.useZIndex)();
-    const onPointerEnter = (0, react_1.useCallback)(() => {
-        setHovered(true);
-    }, []);
-    const onPointerLeave = (0, react_1.useCallback)(() => {
-        setHovered(false);
-    }, []);
-    const definiteStyle = (0, react_1.useMemo)(() => {
-        return {
-            ...selectorButton,
-            backgroundColor: selected
-                ? 'transparent'
-                : hovered
-                    ? colors_1.CLEAR_HOVER
-                    : colors_1.INPUT_BACKGROUND,
-            color: selected ? 'white' : colors_1.LIGHT_TEXT,
-            borderTop: selected ? '2px solid var(--blue)' : '2px solid transparent',
-            boxShadow: selected ? 'none' : undefined,
-            ...style,
-        };
-    }, [hovered, selected, style]);
-    return ((0, jsx_runtime_1.jsx)("button", { style: definiteStyle, type: "button", onClick: onClick, tabIndex: tabIndex, onPointerLeave: onPointerLeave, onPointerEnter: onPointerEnter, children: children }));
-};
-exports.Tab = Tab;

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

@@ -1,7 +0,0 @@
-import React from 'react';
-export declare const VerticalTab: React.FC<{
-    children: React.ReactNode;
-    onClick: React.MouseEventHandler<HTMLButtonElement>;
-    style?: React.CSSProperties;
-    selected: boolean;
-}>;

package/dist/editor/components/Tabs/vertical.js

@@ -1,43 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.VerticalTab = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const colors_1 = require("../../helpers/colors");
-const z_index_1 = require("../../state/z-index");
-const selectorButton = {
-    border: 'none',
-    flex: 1,
-    padding: 8,
-    paddingLeft: 16,
-    display: 'flex',
-    flexDirection: 'row',
-    fontSize: 14,
-    color: 'inherit',
-    alignItems: 'center',
-};
-const VerticalTab = ({ children, onClick, style, selected }) => {
-    const [hovered, setHovered] = (0, react_1.useState)(false);
-    const { tabIndex } = (0, z_index_1.useZIndex)();
-    const onPointerEnter = (0, react_1.useCallback)(() => {
-        setHovered(true);
-    }, []);
-    const onPointerLeave = (0, react_1.useCallback)(() => {
-        setHovered(false);
-    }, []);
-    const definiteStyle = (0, react_1.useMemo)(() => {
-        return {
-            ...selectorButton,
-            backgroundColor: selected
-                ? colors_1.SELECTED_BACKGROUND
-                : hovered
-                    ? colors_1.CLEAR_HOVER
-                    : 'transparent',
-            color: selected ? 'white' : colors_1.LIGHT_TEXT,
-            boxShadow: selected ? 'none' : undefined,
-            ...style,
-        };
-    }, [hovered, selected, style]);
-    return ((0, jsx_runtime_1.jsx)("button", { style: definiteStyle, type: "button", onClick: onClick, tabIndex: tabIndex, onPointerLeave: onPointerLeave, onPointerEnter: onPointerEnter, children: children }));
-};
-exports.VerticalTab = VerticalTab;

package/dist/editor/components/ZoomGesturesProvider.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-export declare const ZoomGesturesProvider: React.FC<{
-    children: React.ReactNode;
-}>;

package/dist/editor/components/ZoomGesturesProvider.js

@@ -1,24 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ZoomGesturesProvider = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const editor_zoom_gestures_1 = require("../state/editor-zoom-gestures");
-const ZoomGesturesProvider = ({ children }) => {
-    const [editorZoomGestures, setEditorZoomGesturesState] = (0, react_1.useState)(() => (0, editor_zoom_gestures_1.loadEditorZoomGesturesOption)());
-    const setEditorZoomGestures = (0, react_1.useCallback)((newValue) => {
-        setEditorZoomGesturesState((prevState) => {
-            const newVal = newValue(prevState);
-            (0, editor_zoom_gestures_1.persistEditorZoomGesturesOption)(newVal);
-            return newVal;
-        });
-    }, []);
-    const editorZoomGesturesCtx = (0, react_1.useMemo)(() => {
-        return {
-            editorZoomGestures,
-            setEditorZoomGestures,
-        };
-    }, [editorZoomGestures, setEditorZoomGestures]);
-    return ((0, jsx_runtime_1.jsx)(editor_zoom_gestures_1.EditorZoomGesturesContext.Provider, { value: editorZoomGesturesCtx, children: children }));
-};
-exports.ZoomGesturesProvider = ZoomGesturesProvider;

package/dist/editor/components/get-zod-if-possible.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-export declare type ZodType = Awaited<typeof import('zod')>['z'];
-export declare type ZodColorType = Awaited<typeof import('@remotion/z-color')>;
-export declare const getZodIfPossible: () => Promise<ZodType | null>;
-export declare const getZColorIfPossible: () => Promise<ZodColorType | null>;
-export declare const useZodIfPossible: () => typeof import("zod/lib/external") | null;
-export declare const useZodColorIfPossible: () => typeof import("@remotion/z-color") | null;
-export declare const ZodProvider: React.FC<{
-    children: React.ReactNode;
-}>;