@remotion/studio 4.0.488 → 4.0.490

package/dist/esm/renderEntry.mjs

@@ -212,7 +212,7 @@ var renderContent = (Root) => {
     renderToDOM(/* @__PURE__ */ jsx("div", {
       children: /* @__PURE__ */ jsx(DelayedSpinner, {})
     }));
-    import("./chunk-nn36hyt1.js").then(({ StudioInternals }) => {
+    import("./chunk-16nwrbrm.js").then(({ StudioInternals }) => {
       window.remotion_isStudio = true;
       window.remotion_isReadOnlyStudio = true;
       window.remotion_inputProps = "{}";

package/dist/helpers/install-required-package.d.ts

@@ -1 +1,2 @@
+export declare const getMissingPackages: (packageNames: string[]) => string[];
 export declare const installRequiredPackages: (packageNames: string[]) => Promise<void>;

package/dist/helpers/install-required-package.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.installRequiredPackages = void 0;
+exports.installRequiredPackages = exports.getMissingPackages = void 0;
 const install_package_1 = require("../api/install-package");
 const NotificationCenter_1 = require("../components/Notifications/NotificationCenter");
 let installQueue = Promise.resolve();
@@ -10,6 +10,7 @@ const getMissingPackages = (packageNames) => {
     const installedPackages = (_a = window.remotion_installedPackages) !== null && _a !== void 0 ? _a : [];
     return uniquePackageNames.filter((packageName) => !installedPackages.includes(packageName));
 };
+exports.getMissingPackages = getMissingPackages;
 const addInstalledPackages = (packageNames) => {
     var _a;
     const installedPackages = (_a = window.remotion_installedPackages) !== null && _a !== void 0 ? _a : [];
@@ -23,7 +24,7 @@ const formatPackageList = (packageNames) => {
 };
 const installRequiredPackages = async (packageNames) => {
     const runInstall = async () => {
-        const missingPackages = getMissingPackages(packageNames);
+        const missingPackages = (0, exports.getMissingPackages)(packageNames);
         if (missingPackages.length === 0) {
             return;
         }

package/dist/helpers/interactivity-enabled.js

@@ -1,7 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.studioInteractivityEnabled = void 0;
-const interactivityEnabled = process.env.INTERACTIVITY_ENABLED;
-exports.studioInteractivityEnabled = interactivityEnabled === undefined || interactivityEnabled === null
-    ? true
-    : interactivityEnabled !== false && interactivityEnabled !== 'false';
+const studio_runtime_config_1 = require("./studio-runtime-config");
+exports.studioInteractivityEnabled = (0, studio_runtime_config_1.getStudioInteractivityEnabled)();

package/dist/helpers/show-browser-rendering.js

@@ -1,4 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SHOW_BROWSER_RENDERING = void 0;
-exports.SHOW_BROWSER_RENDERING = Boolean(process.env.EXPERIMENTAL_CLIENT_SIDE_RENDERING_ENABLED);
+const studio_runtime_config_1 = require("./studio-runtime-config");
+exports.SHOW_BROWSER_RENDERING = (0, studio_runtime_config_1.getStudioExperimentalClientSideRenderingEnabled)();

package/dist/helpers/studio-runtime-config.d.ts

@@ -0,0 +1,7 @@
+export declare const DEFAULT_BUFFER_STATE_DELAY_IN_MILLISECONDS = 300;
+export declare const getStudioAskAIEnabled: () => boolean;
+export declare const getStudioInteractivityEnabled: () => boolean;
+export declare const getStudioKeyboardShortcutsEnabled: () => boolean;
+export declare const getStudioExperimentalClientSideRenderingEnabled: () => boolean;
+export declare const getStudioMaxTimelineTracks: () => number;
+export declare const getStudioBufferStateDelayInMilliseconds: () => number;

package/dist/helpers/studio-runtime-config.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getStudioBufferStateDelayInMilliseconds = exports.getStudioMaxTimelineTracks = exports.getStudioExperimentalClientSideRenderingEnabled = exports.getStudioKeyboardShortcutsEnabled = exports.getStudioInteractivityEnabled = exports.getStudioAskAIEnabled = exports.DEFAULT_BUFFER_STATE_DELAY_IN_MILLISECONDS = void 0;
+const studio_shared_1 = require("@remotion/studio-shared");
+exports.DEFAULT_BUFFER_STATE_DELAY_IN_MILLISECONDS = 300;
+const defaultStudioRuntimeConfig = {
+    askAIEnabled: false,
+    bufferStateDelayInMilliseconds: null,
+    experimentalClientSideRenderingEnabled: false,
+    interactivityEnabled: true,
+    keyboardShortcutsEnabled: true,
+    maxTimelineTracks: null,
+};
+const getStudioRuntimeConfig = () => {
+    var _a;
+    if (typeof window === 'undefined') {
+        return defaultStudioRuntimeConfig;
+    }
+    return (_a = window.remotion_studioConfig) !== null && _a !== void 0 ? _a : defaultStudioRuntimeConfig;
+};
+const getStudioAskAIEnabled = () => {
+    return getStudioRuntimeConfig().askAIEnabled;
+};
+exports.getStudioAskAIEnabled = getStudioAskAIEnabled;
+const getStudioInteractivityEnabled = () => {
+    return getStudioRuntimeConfig().interactivityEnabled;
+};
+exports.getStudioInteractivityEnabled = getStudioInteractivityEnabled;
+const getStudioKeyboardShortcutsEnabled = () => {
+    return getStudioRuntimeConfig().keyboardShortcutsEnabled;
+};
+exports.getStudioKeyboardShortcutsEnabled = getStudioKeyboardShortcutsEnabled;
+const getStudioExperimentalClientSideRenderingEnabled = () => {
+    return getStudioRuntimeConfig().experimentalClientSideRenderingEnabled;
+};
+exports.getStudioExperimentalClientSideRenderingEnabled = getStudioExperimentalClientSideRenderingEnabled;
+const getStudioMaxTimelineTracks = () => {
+    var _a;
+    return (_a = getStudioRuntimeConfig().maxTimelineTracks) !== null && _a !== void 0 ? _a : studio_shared_1.DEFAULT_TIMELINE_TRACKS;
+};
+exports.getStudioMaxTimelineTracks = getStudioMaxTimelineTracks;
+const getStudioBufferStateDelayInMilliseconds = () => {
+    var _a;
+    return ((_a = getStudioRuntimeConfig().bufferStateDelayInMilliseconds) !== null && _a !== void 0 ? _a : exports.DEFAULT_BUFFER_STATE_DELAY_IN_MILLISECONDS);
+};
+exports.getStudioBufferStateDelayInMilliseconds = getStudioBufferStateDelayInMilliseconds;

package/dist/helpers/use-keybinding.js

@@ -4,12 +4,13 @@ exports.useKeybinding = exports.areKeyboardShortcutsDisabled = void 0;
 const react_1 = require("react");
 const keybindings_1 = require("../state/keybindings");
 const z_index_1 = require("../state/z-index");
-if (!process.env.KEYBOARD_SHORTCUTS_ENABLED) {
+const studio_runtime_config_1 = require("./studio-runtime-config");
+if (!(0, studio_runtime_config_1.getStudioKeyboardShortcutsEnabled)()) {
     // eslint-disable-next-line no-console
     console.warn('Keyboard shortcuts disabled either due to: a) --disable-keyboard-shortcuts being passed b) Config.setKeyboardShortcutsEnabled(false) being set or c) a Remotion version mismatch.');
 }
 const areKeyboardShortcutsDisabled = () => {
-    return !process.env.KEYBOARD_SHORTCUTS_ENABLED;
+    return !(0, studio_runtime_config_1.getStudioKeyboardShortcutsEnabled)();
 };
 exports.areKeyboardShortcutsDisabled = areKeyboardShortcutsDisabled;
 const useKeybinding = () => {
@@ -17,7 +18,7 @@ const useKeybinding = () => {
     const context = (0, react_1.useContext)(keybindings_1.KeybindingContext);
     const { isHighestContext } = (0, z_index_1.useZIndex)();
     const registerKeybinding = (0, react_1.useCallback)((options) => {
-        if (!process.env.KEYBOARD_SHORTCUTS_ENABLED) {
+        if (!(0, studio_runtime_config_1.getStudioKeyboardShortcutsEnabled)()) {
             return {
                 unregister: () => undefined,
             };

package/dist/helpers/use-menu-structure.js

@@ -32,6 +32,7 @@ const mobile_layout_1 = require("./mobile-layout");
 const open_in_editor_1 = require("./open-in-editor");
 const pick_color_1 = require("./pick-color");
 const show_browser_rendering_1 = require("./show-browser-rendering");
+const studio_runtime_config_1 = require("./studio-runtime-config");
 const use_keybinding_1 = require("./use-keybinding");
 const openExternal = (link) => {
     window.open(link, '_blank');
@@ -682,7 +683,7 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
                 label: 'Tools',
                 leaveLeftPadding: false,
                 items: [
-                    process.env.ASK_AI_ENABLED
+                    (0, studio_runtime_config_1.getStudioAskAIEnabled)()
                         ? {
                             id: 'ask-ai',
                             value: 'ask-ai',

package/dist/icons/align-bottom.d.ts

@@ -0,0 +1,3 @@
+import type { SVGProps } from 'react';
+import React from 'react';
+export declare const AlignBottomIcon: React.FC<SVGProps<SVGSVGElement>>;

package/dist/icons/align-bottom.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AlignBottomIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const align_right_1 = require("./align-right");
+const AlignBottomIcon = (props) => {
+    return (jsx_runtime_1.jsx(align_right_1.AlignRightIcon, { ...props, style: {
+            ...props.style,
+            transform: 'rotate(90deg)',
+        } }));
+};
+exports.AlignBottomIcon = AlignBottomIcon;

package/dist/icons/align-center-horizontal.d.ts

@@ -0,0 +1,3 @@
+import type { SVGProps } from 'react';
+import React from 'react';
+export declare const AlignCenterHorizontalIcon: React.FC<SVGProps<SVGSVGElement>>;

package/dist/icons/align-center-horizontal.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AlignCenterHorizontalIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const AlignCenterHorizontalIcon = (props) => {
+    var _a;
+    const color = (_a = props.color) !== null && _a !== void 0 ? _a : 'currentColor';
+    return (jsx_runtime_1.jsxs("svg", { ...props, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+            jsx_runtime_1.jsx("path", { d: "M8 2V14", stroke: color, strokeOpacity: "0.5", strokeLinecap: "square" }), jsx_runtime_1.jsx("line", { x1: "3", y1: "6", x2: "12", y2: "6", stroke: color, strokeWidth: "2" }), jsx_runtime_1.jsx("line", { x1: "4", y1: "10", x2: "11", y2: "10", stroke: color, strokeWidth: "2" })
+        ] }));
+};
+exports.AlignCenterHorizontalIcon = AlignCenterHorizontalIcon;

package/dist/icons/align-center-vertical.d.ts

@@ -0,0 +1,3 @@
+import type { SVGProps } from 'react';
+import React from 'react';
+export declare const AlignCenterVerticalIcon: React.FC<SVGProps<SVGSVGElement>>;

package/dist/icons/align-center-vertical.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AlignCenterVerticalIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const align_center_horizontal_1 = require("./align-center-horizontal");
+const AlignCenterVerticalIcon = (props) => {
+    return (jsx_runtime_1.jsx(align_center_horizontal_1.AlignCenterHorizontalIcon, { ...props, style: {
+            ...props.style,
+            transform: 'rotate(90deg)',
+        } }));
+};
+exports.AlignCenterVerticalIcon = AlignCenterVerticalIcon;

package/dist/icons/align-left.d.ts

@@ -0,0 +1,3 @@
+import type { SVGProps } from 'react';
+import React from 'react';
+export declare const AlignLeftIcon: React.FC<SVGProps<SVGSVGElement>>;

package/dist/icons/align-left.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AlignLeftIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const AlignLeftIcon = (props) => {
+    var _a;
+    const color = (_a = props.color) !== null && _a !== void 0 ? _a : 'currentColor';
+    return (jsx_runtime_1.jsxs("svg", { ...props, viewBox: "0 0 16 16", fill: "none", children: [
+            jsx_runtime_1.jsx("path", { d: "M2 2L2 14", stroke: color, strokeOpacity: "0.5", strokeLinecap: "square" }), jsx_runtime_1.jsx("line", { x1: "4", y1: "6", x2: "13", y2: "6", stroke: color, strokeWidth: "2" }), jsx_runtime_1.jsx("line", { x1: "4", y1: "10", x2: "11", y2: "10", stroke: color, strokeWidth: "2" })
+        ] }));
+};
+exports.AlignLeftIcon = AlignLeftIcon;

package/dist/icons/align-right.d.ts

@@ -0,0 +1,3 @@
+import type { SVGProps } from 'react';
+import React from 'react';
+export declare const AlignRightIcon: React.FC<SVGProps<SVGSVGElement>>;

package/dist/icons/align-right.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AlignRightIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const AlignRightIcon = (props) => {
+    var _a;
+    const color = (_a = props.color) !== null && _a !== void 0 ? _a : 'currentColor';
+    return (jsx_runtime_1.jsxs("svg", { ...props, viewBox: "0 0 16 16", fill: "none", children: [
+            jsx_runtime_1.jsx("path", { d: "M14 2V14", stroke: color, strokeOpacity: "0.5", strokeLinecap: "square" }), jsx_runtime_1.jsx("line", { x1: "3", y1: "6", x2: "12", y2: "6", stroke: color, strokeWidth: "2" }), jsx_runtime_1.jsx("line", { x1: "5", y1: "10", x2: "12", y2: "10", stroke: color, strokeWidth: "2" })
+        ] }));
+};
+exports.AlignRightIcon = AlignRightIcon;

package/dist/icons/align-top.d.ts

@@ -0,0 +1,3 @@
+import type { SVGProps } from 'react';
+import React from 'react';
+export declare const AlignTopIcon: React.FC<SVGProps<SVGSVGElement>>;

package/dist/icons/align-top.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AlignTopIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const align_left_1 = require("./align-left");
+const AlignTopIcon = (props) => {
+    return (jsx_runtime_1.jsx(align_left_1.AlignLeftIcon, { ...props, style: {
+            ...props.style,
+            transform: 'rotate(90deg)',
+        } }));
+};
+exports.AlignTopIcon = AlignTopIcon;

package/dist/state/modals.d.ts

@@ -7,7 +7,6 @@ import type { SequencePropsSubscriptionKey, _InternalTypes } from 'remotion';
 import type { CompType } from '../components/NewComposition/DuplicateComposition';
 import type { QuickSwitcherMode } from '../components/QuickSwitcher/NoResults';
 import type { RenderType } from '../components/RenderModal/RenderModalAdvanced';
-import type { KeyframeSettingsModalState } from '../components/Timeline/KeyframeSettingsModal';
 import type { Bug, UpdateInfo } from '../components/UpdateCheck';
 export type WebRenderModalState = {
     type: 'web-render';
@@ -138,7 +137,7 @@ export type ModalState = {
     relativePath: string;
 } | {
     type: 'input-props-override';
-} | KeyframeSettingsModalState | RenderModalState | WebRenderModalState | {
+} | RenderModalState | WebRenderModalState | {
     type: 'render-progress';
     jobId: string;
 } | {

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio"
 	},
 	"name": "@remotion/studio",
-	"version": "4.0.488",
+	"version": "4.0.490",
 	"description": "APIs for interacting with the Remotion Studio",
 	"main": "dist",
 	"scripts": {
@@ -25,15 +25,15 @@
 	},
 	"dependencies": {
 		"semver": "7.5.3",
-		"remotion": "4.0.488",
-		"@remotion/canvas-capture": "4.0.488",
-		"@remotion/player": "4.0.488",
-		"@remotion/media-utils": "4.0.488",
-		"@remotion/renderer": "4.0.488",
-		"@remotion/web-renderer": "4.0.488",
-		"@remotion/studio-shared": "4.0.488",
-		"@remotion/timeline-utils": "4.0.488",
-		"@remotion/zod-types": "4.0.488",
+		"remotion": "4.0.490",
+		"@remotion/canvas-capture": "4.0.490",
+		"@remotion/player": "4.0.490",
+		"@remotion/media-utils": "4.0.490",
+		"@remotion/renderer": "4.0.490",
+		"@remotion/web-renderer": "4.0.490",
+		"@remotion/studio-shared": "4.0.490",
+		"@remotion/timeline-utils": "4.0.490",
+		"@remotion/zod-types": "4.0.490",
 		"@jridgewell/trace-mapping": "0.3.31",
 		"mediabunny": "1.50.8",
 		"memfs": "3.4.3",
@@ -44,7 +44,7 @@
 		"react": "19.2.3",
 		"react-dom": "19.2.3",
 		"@types/semver": "7.5.3",
-		"@remotion/eslint-config-internal": "4.0.488",
+		"@remotion/eslint-config-internal": "4.0.490",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},

package/dist/components/Timeline/KeyframeSettingsModal.d.ts

@@ -1,15 +0,0 @@
-import React from 'react';
-import type { CanUpdateSequencePropStatusKeyframed, SequencePropsSubscriptionKey, InteractivitySchema } from 'remotion';
-export type KeyframeSettingsModalState = {
-    type: 'keyframe-settings';
-    fileName: string;
-    nodePath: SequencePropsSubscriptionKey;
-    fieldKey: string;
-    fieldLabel: string;
-    status: CanUpdateSequencePropStatusKeyframed;
-    schema: InteractivitySchema;
-    effectIndex: number | null;
-};
-export declare const KeyframeSettingsModal: React.FC<{
-    readonly state: KeyframeSettingsModalState;
-}>;

package/dist/components/Timeline/KeyframeSettingsModal.js

@@ -1,151 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.KeyframeSettingsModal = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const remotion_1 = require("remotion");
-const client_id_1 = require("../../helpers/client-id");
-const colors_1 = require("../../helpers/colors");
-const modals_1 = require("../../state/modals");
-const Button_1 = require("../Button");
-const layout_1 = require("../layout");
-const ModalButton_1 = require("../ModalButton");
-const ModalFooter_1 = require("../ModalFooter");
-const ModalHeader_1 = require("../ModalHeader");
-const ComboBox_1 = require("../NewComposition/ComboBox");
-const DismissableModal_1 = require("../NewComposition/DismissableModal");
-const InputDragger_1 = require("../NewComposition/InputDragger");
-const call_update_keyframe_settings_1 = require("./call-update-keyframe-settings");
-const container = {
-    padding: 16,
-    width: 520,
-};
-const row = {
-    alignItems: 'center',
-    display: 'flex',
-    justifyContent: 'space-between',
-    marginBottom: 12,
-};
-const label = {
-    fontSize: 13,
-};
-const helperText = {
-    color: colors_1.WHITE_ALPHA_60,
-    fontSize: 12,
-    lineHeight: 1.4,
-    marginTop: 4,
-};
-const comboStyle = {
-    minWidth: 150,
-};
-const posterizeInputStyle = {
-    backgroundColor: colors_1.INPUT_BACKGROUND,
-    borderRadius: 4,
-    minWidth: 64,
-    textAlign: 'right',
-};
-const extrapolateOptions = [
-    'extend',
-    'clamp',
-    'identity',
-    'wrap',
-];
-const labelForExtrapolate = (value) => value[0].toUpperCase() + value.slice(1);
-const getExtrapolateValues = (onSelect) => {
-    return extrapolateOptions.map((value) => ({
-        type: 'item',
-        id: value,
-        keyHint: null,
-        label: labelForExtrapolate(value),
-        leftItem: null,
-        disabled: false,
-        onClick: () => onSelect(value),
-        quickSwitcherLabel: null,
-        subMenu: null,
-        value,
-    }));
-};
-const KeyframeSettingsModal = ({ state }) => {
-    var _a;
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
-    const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
-    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
-    const [left, setLeft] = (0, react_1.useState)(state.status.clamping.left);
-    const [right, setRight] = (0, react_1.useState)(state.status.clamping.right);
-    const [posterize, setPosterize] = (0, react_1.useState)((_a = state.status.posterize) !== null && _a !== void 0 ? _a : 0);
-    const [saving, setSaving] = (0, react_1.useState)(false);
-    const canEditClamping = state.status.interpolationFunction === 'interpolate';
-    const close = (0, react_1.useCallback)(() => {
-        setSelectedModal(null);
-    }, [setSelectedModal]);
-    const leftOptions = (0, react_1.useMemo)(() => getExtrapolateValues(setLeft), []);
-    const rightOptions = (0, react_1.useMemo)(() => getExtrapolateValues(setRight), []);
-    const onPosterizeChange = (0, react_1.useCallback)((value) => {
-        setPosterize(Math.max(0, Math.round(value)));
-    }, []);
-    const posterizeFormatter = (0, react_1.useCallback)((value) => {
-        const numericValue = Number(value);
-        return String(Math.round(numericValue));
-    }, []);
-    const onSave = (0, react_1.useCallback)(() => {
-        if (previewServerState.type !== 'connected') {
-            return;
-        }
-        const settings = {
-            type: 'settings',
-            clamping: canEditClamping ? { left, right } : undefined,
-            posterize: posterize <= 0 ? undefined : posterize,
-        };
-        setSaving(true);
-        const promise = state.effectIndex === null
-            ? (0, call_update_keyframe_settings_1.callUpdateSequenceKeyframeSettings)({
-                fileName: state.fileName,
-                nodePath: state.nodePath,
-                fieldKey: state.fieldKey,
-                settings,
-                schema: state.schema,
-                setPropStatuses,
-                clientId: previewServerState.clientId,
-            })
-            : (0, call_update_keyframe_settings_1.callUpdateEffectKeyframeSettings)({
-                fileName: state.fileName,
-                nodePath: state.nodePath,
-                effectIndex: state.effectIndex,
-                fieldKey: state.fieldKey,
-                settings,
-                schema: state.schema,
-                setPropStatuses,
-                clientId: previewServerState.clientId,
-            });
-        promise.then(close).finally(() => {
-            setSaving(false);
-        });
-    }, [
-        canEditClamping,
-        close,
-        left,
-        posterize,
-        previewServerState,
-        right,
-        setPropStatuses,
-        state,
-    ]);
-    const saveDisabled = saving || previewServerState.type !== 'connected';
-    return (jsx_runtime_1.jsxs(DismissableModal_1.DismissableModal, { children: [
-            jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: `Keyframe settings: ${state.fieldLabel}` }), jsx_runtime_1.jsxs("div", { style: container, children: [canEditClamping ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                            jsx_runtime_1.jsxs("div", { style: row, children: [
-                                    jsx_runtime_1.jsx("div", { style: label, children: "Extrapolate left" }), jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: leftOptions, selectedId: left, title: "Extrapolate left", style: comboStyle })
-                                ] }), jsx_runtime_1.jsxs("div", { style: row, children: [
-                                    jsx_runtime_1.jsx("div", { style: label, children: "Extrapolate right" }), jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: rightOptions, selectedId: right, title: "Extrapolate right", style: comboStyle })
-                                ] })
-                        ] })) : null, jsx_runtime_1.jsxs("div", { style: row, children: [
-                            jsx_runtime_1.jsxs("div", { children: [
-                                    jsx_runtime_1.jsx("div", { style: label, children: "Posterize" }), jsx_runtime_1.jsx("div", { style: helperText, children: "Use 0 to turn posterization off." })
-                                ] }), jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: posterize, status: "ok", onValueChange: onPosterizeChange, onValueChangeEnd: onPosterizeChange, onTextChange: () => undefined, min: 0, step: 1, formatter: posterizeFormatter, rightAlign: true, style: posterizeInputStyle })
-                        ] })
-                ] }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsxs(layout_1.Row, { justify: "flex-end", align: "center", children: [
-                        jsx_runtime_1.jsx(Button_1.Button, { onClick: close, children: "Cancel" }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx(ModalButton_1.ModalButton, { onClick: onSave, disabled: saveDisabled, children: "Save" })
-                    ] }) })
-        ] }));
-};
-exports.KeyframeSettingsModal = KeyframeSettingsModal;