@remotion/cli 4.0.0-alpha.179 → 4.0.0-alpha.185

package/dist/color-math.d.ts

@@ -0,0 +1 @@
+export declare const colorWithNewOpacity: (color: string, opacity: number) => string;

package/dist/color-math.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.colorWithNewOpacity = void 0;
+const remotion_1 = require("remotion");
+const colorWithNewOpacity = (color, opacity) => {
+    const { r, g, b } = remotion_1.Internals.parseColor(color);
+    if (opacity >= 255) {
+        return `#${r.toString(16)}${g.toString(16)}${b.toString(16)}`;
+    }
+    return `rgba(${r}, ${g}, ${b}, ${(opacity / 255).toFixed(2)})`;
+};
+exports.colorWithNewOpacity = colorWithNewOpacity;

package/dist/editor/components/Canvas.js

@@ -37,10 +37,7 @@ const Canvas = () => {
         triggerOnWindowResize: false,
         shouldApplyCssTransforms: true,
     });
-    const isFit = previewSize.size === 'auto' ||
-        (previewSize.size === 1 &&
-            previewSize.translation.x === 0 &&
-            previewSize.translation.y === 0);
+    const isFit = previewSize.size === 'auto';
     const onWheel = (0, react_1.useCallback)((e) => {
         if (!editorZoomGestures) {
             return;

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

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const CollapsedSidebarExpander: React.FC<{
+    onExpand: () => void;
+    direction: 'left' | 'right';
+}>;

package/dist/editor/components/CollapsedSidebarExpander.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CollapsedSidebarExpander = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../helpers/colors");
+const caret_1 = require("../icons/caret");
+const z_index_1 = require("../state/z-index");
+const CollapsedSidebarExpander = ({ onExpand, direction }) => {
+    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 style = (0, react_1.useMemo)(() => {
+        return {
+            border: 'none',
+            borderRight: `${direction === 'right' ? 1 : 0}px solid black`,
+            borderLeft: `${direction === 'left' ? 1 : 0}px solid black`,
+            cursor: 'pointer',
+            color: 'white',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            paddingLeft: direction === 'right' ? 7 : 5,
+            paddingRight: direction === 'right' ? 4 : 5,
+            backgroundColor: (0, colors_1.getBackgroundFromHoverState)({
+                hovered,
+                selected: false,
+            }),
+            appearance: 'none',
+            WebkitAppearance: 'none',
+        };
+    }, [direction, hovered]);
+    return ((0, jsx_runtime_1.jsx)("button", { style: style, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, type: "button", role: "button", tabIndex: tabIndex, onClick: onExpand, children: direction === 'right' ? (0, jsx_runtime_1.jsx)(caret_1.CaretRight, {}) : (0, jsx_runtime_1.jsx)(caret_1.CaretLeft, {}) }));
+};
+exports.CollapsedSidebarExpander = CollapsedSidebarExpander;

package/dist/editor/components/NewComposition/RemInputTypeColor.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { RemInputStatus } from './RemInput';
+declare type Props = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> & {
+    status: RemInputStatus;
+};
+export declare const inputBaseStyle: React.CSSProperties;
+export declare const RemInputTypeColor: React.ForwardRefExoticComponent<Pick<Props, "key" | "status" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
+export {};

package/dist/editor/components/NewComposition/RemInputTypeColor.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RemInputTypeColor = exports.inputBaseStyle = 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 RemInput_1 = require("./RemInput");
+exports.inputBaseStyle = {
+    padding: 0,
+    borderStyle: 'solid',
+    borderWidth: 1,
+};
+const RemInputTypeColorForwardRef = ({ status, ...props }, ref) => {
+    const [isFocused, setIsFocused] = (0, react_1.useState)(false);
+    const [isHovered, setIsHovered] = (0, react_1.useState)(false);
+    const inputRef = (0, react_1.useRef)(null);
+    const { tabIndex } = (0, z_index_1.useZIndex)();
+    const style = (0, react_1.useMemo)(() => {
+        var _a;
+        return {
+            backgroundColor: colors_1.INPUT_BACKGROUND,
+            ...exports.inputBaseStyle,
+            borderColor: (0, RemInput_1.getInputBorderColor)({ isFocused, isHovered, status }),
+            ...((_a = props.style) !== null && _a !== void 0 ? _a : {}),
+        };
+    }, [isFocused, isHovered, props.style, status]);
+    (0, react_1.useImperativeHandle)(ref, () => {
+        return inputRef.current;
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (!inputRef.current) {
+            return;
+        }
+        const { current } = inputRef;
+        const onFocus = () => setIsFocused(true);
+        const onBlur = () => setIsFocused(false);
+        const onMouseEnter = () => setIsHovered(true);
+        const onMouseLeave = () => setIsHovered(false);
+        current.addEventListener('focus', onFocus);
+        current.addEventListener('blur', onBlur);
+        current.addEventListener('mouseenter', onMouseEnter);
+        current.addEventListener('mouseleave', onMouseLeave);
+        return () => {
+            current.removeEventListener('focus', onFocus);
+            current.removeEventListener('blur', onBlur);
+            current.removeEventListener('mouseenter', onMouseEnter);
+            current.removeEventListener('mouseleave', onMouseLeave);
+        };
+    }, [inputRef]);
+    return ((0, jsx_runtime_1.jsx)("input", { ref: inputRef, type: "color", tabIndex: tabIndex, ...props, style: style }));
+};
+exports.RemInputTypeColor = (0, react_1.forwardRef)(RemInputTypeColorForwardRef);

package/dist/editor/components/RenderModal/SchemaEditor/ZodColorEditor.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { z } from 'remotion';
+import type { JSONPath } from './zod-types';
+export declare const ZodColorEditor: React.FC<{
+    schema: z.ZodTypeAny;
+    jsonPath: JSONPath;
+    value: string;
+    defaultValue: string;
+    setValue: React.Dispatch<React.SetStateAction<string>>;
+    onSave: (updater: (oldNum: unknown) => string) => void;
+    onRemove: null | (() => void);
+    compact: boolean;
+    showSaveButton: boolean;
+}>;

package/dist/editor/components/RenderModal/SchemaEditor/ZodColorEditor.js

@@ -0,0 +1,108 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ZodColorEditor = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const color_math_1 = require("../../../../color-math");
+const layout_1 = require("../../layout");
+const InputDragger_1 = require("../../NewComposition/InputDragger");
+const RemInput_1 = require("../../NewComposition/RemInput");
+const RemInputTypeColor_1 = require("../../NewComposition/RemInputTypeColor");
+const ValidationMessage_1 = require("../../NewComposition/ValidationMessage");
+const layout_2 = require("../layout");
+const SchemaLabel_1 = require("./SchemaLabel");
+const fullWidth = {
+    width: '100%',
+};
+const ZodColorEditor = ({ jsonPath, value, setValue, showSaveButton, defaultValue, schema, compact, onSave, onRemove, }) => {
+    const [localValue, setLocalValue] = (0, react_1.useState)(() => {
+        return {
+            value,
+            zodValidation: schema.safeParse(value),
+        };
+    });
+    const onValueChange = (0, react_1.useCallback)((newValue) => {
+        const safeParse = schema.safeParse(newValue);
+        const newLocalState = {
+            value: newValue,
+            zodValidation: safeParse,
+        };
+        setLocalValue(newLocalState);
+        if (safeParse.success) {
+            setValue(newValue);
+        }
+    }, [schema, setValue]);
+    const { a, b, g, r } = localValue.zodValidation.success
+        ? remotion_1.Internals.parseColor(localValue.value)
+        : { a: 1, b: 0, g: 0, r: 0 };
+    const onChange = (0, react_1.useCallback)((e) => {
+        const newColor = (0, color_math_1.colorWithNewOpacity)(e.target.value, Math.round(a));
+        const safeParse = schema.safeParse(newColor);
+        const newLocalState = {
+            value: newColor,
+            zodValidation: safeParse,
+        };
+        setLocalValue(newLocalState);
+        if (safeParse.success) {
+            setValue(newColor);
+        }
+    }, [a, schema, setValue]);
+    const onTextChange = (0, react_1.useCallback)((e) => {
+        const newValue = e.target.value;
+        const safeParse = schema.safeParse(newValue);
+        const newLocalState = {
+            value: newValue,
+            zodValidation: safeParse,
+        };
+        setLocalValue(newLocalState);
+        if (safeParse.success) {
+            setValue(newValue);
+        }
+    }, [schema, setValue]);
+    const reset = (0, react_1.useCallback)(() => {
+        onValueChange(defaultValue);
+    }, [defaultValue, onValueChange]);
+    const save = (0, react_1.useCallback)(() => {
+        onSave(() => value);
+    }, [onSave, value]);
+    const rgb = `#${r.toString(16).padStart(2, '0')}${g
+        .toString(16)
+        .padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
+    const status = localValue.zodValidation.success ? 'ok' : 'error';
+    const colorPicker = (0, react_1.useMemo)(() => {
+        return {
+            height: 39,
+            width: 45,
+            display: 'inline-block',
+        };
+    }, []);
+    const onOpacityChange = (0, react_1.useCallback)((newValue) => {
+        const newColor = (0, color_math_1.colorWithNewOpacity)(localValue.value, Math.round((Number(newValue) / 100) * 255));
+        const safeParse = schema.safeParse(newColor);
+        const newLocalState = {
+            value: newColor,
+            zodValidation: safeParse,
+        };
+        setLocalValue(newLocalState);
+        if (safeParse.success) {
+            setValue(newColor);
+        }
+    }, [localValue.value, schema, setValue]);
+    const onOpacityValueChange = (0, react_1.useCallback)((newValue) => {
+        const newColor = (0, color_math_1.colorWithNewOpacity)(localValue.value, Math.round((Number(newValue) / 100) * 255));
+        const safeParse = schema.safeParse(newColor);
+        const newLocalState = {
+            value: String(newColor),
+            zodValidation: safeParse,
+        };
+        setLocalValue(newLocalState);
+        if (safeParse.success) {
+            setValue(newColor);
+        }
+    }, [localValue.value, schema, setValue]);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: compact ? layout_2.narrowOption : layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)(SchemaLabel_1.SchemaLabel, { compact: compact, isDefaultValue: value === defaultValue, jsonPath: jsonPath, onReset: reset, onSave: save, showSaveButton: showSaveButton, onRemove: onRemove }), (0, jsx_runtime_1.jsxs)("div", { style: fullWidth, children: [(0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: colorPicker, children: (0, jsx_runtime_1.jsx)(RemInputTypeColor_1.RemInputTypeColor, { type: "color", style: {
+                                        height: 39,
+                                    }, value: rgb, onChange: onChange, className: "__remotion_color_picker", status: status }) }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1, block: true }), (0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { value: localValue.value, status: status, placeholder: jsonPath.join('.'), onChange: onTextChange }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { onTextChange: onOpacityChange, onValueChange: onOpacityValueChange, status: status, value: (a / 255) * 100, min: 0, max: 100, step: 1, formatter: (v) => `${Math.round(Number(v))}%` })] }), !localValue.zodValidation.success && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-end", message: localValue.zodValidation.error.format()._errors[0], type: "error" })] }))] })] }));
+};
+exports.ZodColorEditor = ZodColorEditor;

package/dist/editor/components/RenderModal/SchemaEditor/ZodSwitch.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const remotion_1 = require("remotion");
 const ZodArrayEditor_1 = require("./ZodArrayEditor");
 const ZodBooleanEditor_1 = require("./ZodBooleanEditor");
+const ZodColorEditor_1 = require("./ZodColorEditor");
 const ZodDateEditor_1 = require("./ZodDateEditor");
 const ZodEffectEditor_1 = require("./ZodEffectEditor");
 const ZodEnumEditor_1 = require("./ZodEnumEditor");
@@ -55,6 +56,9 @@ const ZodSwitch = ({ schema, jsonPath, compact, value, setValue, defaultValue, o
         return ((0, jsx_runtime_1.jsx)(ZodEnumEditor_1.ZodEnumEditor, { setValue: setValue, value: value, jsonPath: jsonPath, schema: schema, compact: compact, defaultValue: defaultValue, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove }));
     }
     if (typeName === remotion_1.z.ZodFirstPartyTypeKind.ZodEffects) {
+        if (schema._def.description === remotion_1.Internals.REMOTION_COLOR_BRAND) {
+            return ((0, jsx_runtime_1.jsx)(ZodColorEditor_1.ZodColorEditor, { value: value, setValue: setValue, jsonPath: jsonPath, schema: schema, compact: compact, onSave: onSave, defaultValue: defaultValue, showSaveButton: showSaveButton, onRemove: onRemove }));
+        }
         return ((0, jsx_runtime_1.jsx)(ZodEffectEditor_1.ZodEffectEditor, { value: value, setValue: setValue, jsonPath: jsonPath, schema: schema, compact: compact, defaultValue: defaultValue, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove }));
     }
     if (typeName === remotion_1.z.ZodFirstPartyTypeKind.ZodUnion) {

package/dist/editor/components/RenderModal/SchemaEditor/create-zod-values.js

@@ -59,6 +59,9 @@ const createZodValues = (schema) => {
             return def.value;
         }
         case remotion_1.z.ZodFirstPartyTypeKind.ZodEffects: {
+            if (schema._def.description === remotion_1.Internals.REMOTION_COLOR_BRAND) {
+                return '#ffffff';
+            }
             return (0, exports.createZodValues)(def.schema);
         }
         case remotion_1.z.ZodFirstPartyTypeKind.ZodIntersection: {

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

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const leftSidebarTabs: React.RefObject<{
+    selectRendersPanel: () => void;
+}>;
+export declare const SidebarContent: React.FC;

package/dist/editor/components/SidebarContent.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SidebarContent = exports.leftSidebarTabs = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../helpers/colors");
+const CompositionSelector_1 = require("./CompositionSelector");
+const CurrentCompositionSideEffects_1 = require("./CurrentCompositionSideEffects");
+const RenderQueue_1 = require("./RenderQueue");
+const context_1 = require("./RenderQueue/context");
+const RendersTab_1 = require("./RendersTab");
+const Tabs_1 = require("./Tabs");
+const container = {
+    width: '100%',
+};
+const tabsContainer = {
+    borderBottom: `1px solid ${colors_1.BORDER_COLOR}`,
+};
+exports.leftSidebarTabs = (0, react_1.createRef)();
+const localStorageKey = 'remotion.sidebarPanel';
+const persistSelectedPanel = (panel) => {
+    localStorage.setItem(localStorageKey, panel);
+};
+const getSelectedPanel = (shouldRender) => {
+    const panel = localStorage.getItem(localStorageKey);
+    if (panel === 'renders' && shouldRender) {
+        return 'renders';
+    }
+    return 'compositions';
+};
+const SidebarContent = () => {
+    const shouldRender = (0, context_1.useShouldRenderLeftSidebarTabs)();
+    const [panel, setPanel] = (0, react_1.useState)(() => getSelectedPanel(shouldRender));
+    const onCompositionsSelected = (0, react_1.useCallback)(() => {
+        setPanel('compositions');
+        persistSelectedPanel('compositions');
+    }, []);
+    const onRendersSelected = (0, react_1.useCallback)(() => {
+        setPanel('renders');
+        persistSelectedPanel('renders');
+    }, []);
+    (0, react_1.useImperativeHandle)(exports.leftSidebarTabs, () => {
+        return {
+            selectRendersPanel: () => {
+                setPanel('renders');
+                persistSelectedPanel('renders');
+            },
+        };
+    }, []);
+    // TODO: It is not perfectly aligned in example
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [shouldRender ? ((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 === 'compositions', onClick: onCompositionsSelected, children: "Compositions" }), (0, jsx_runtime_1.jsx)(RendersTab_1.RendersTab, { onClick: onRendersSelected, selected: panel === 'renders' })] }) })) : null, panel === 'renders' && shouldRender ? ((0, jsx_runtime_1.jsx)(RenderQueue_1.RenderQueue, {})) : ((0, jsx_runtime_1.jsx)(CompositionSelector_1.CompositionSelector, {})), (0, jsx_runtime_1.jsx)(CurrentCompositionSideEffects_1.CurrentCompositionKeybindings, {}), (0, jsx_runtime_1.jsx)(CurrentCompositionSideEffects_1.TitleUpdater, {})] }));
+};
+exports.SidebarContent = SidebarContent;

package/dist/editor/components/SizeSelector.js

@@ -84,7 +84,7 @@ const SizeSelector = () => {
                 },
                 type: 'item',
                 value: newSize.size,
-                keyHint: newSize.size === 1 ? '0' : null,
+                keyHint: newSize.size === 'auto' ? '0' : null,
                 leftItem: String(size.size) === String(newSize.size) ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
                 subMenu: null,
                 quickSwitcherLabel: null,

package/dist/editor/icons/save.d.ts

@@ -0,0 +1,2 @@
+import type { SVGProps } from 'react';
+export declare const Save: (props: SVGProps<SVGSVGElement>) => JSX.Element;

package/dist/editor/icons/save.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Save = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Save = (props) => {
+    return ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 448 512", ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentcolor", d: "M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V173.3c0-17-6.7-33.3-18.7-45.3L352 50.7C340 38.7 323.7 32 306.7 32H64zm0 96c0-17.7 14.3-32 32-32H288c17.7 0 32 14.3 32 32v64c0 17.7-14.3 32-32 32H96c-17.7 0-32-14.3-32-32V128zM224 288a64 64 0 1 1 0 128 64 64 0 1 1 0-128z" }) }));
+};
+exports.Save = Save;

package/dist/get-render-media-options.js

@@ -7,12 +7,12 @@ const get_audio_codec_1 = require("./get-audio-codec");
 const get_cli_options_1 = require("./get-cli-options");
 const image_formats_1 = require("./image-formats");
 const getRenderMediaOptions = async ({ outputLocation, config, serveUrl, codec, remotionRoot, }) => {
-    const { proResProfile, concurrency, frameRange, overwrite, inputProps, envVariables, quality, crf, pixelFormat, browserExecutable, scale, chromiumOptions, port, numberOfGifLoops, everyNthFrame, muted, enforceAudioTrack, ffmpegOverride, audioBitrate, videoBitrate, height, width, } = await (0, get_cli_options_1.getCliOptions)({
+    const { proResProfile, concurrency, frameRange, overwrite, inputProps, envVariables, quality, crf, pixelFormat, browserExecutable, ffmpegExecutable, ffprobeExecutable, scale, chromiumOptions, port, numberOfGifLoops, everyNthFrame, muted, enforceAudioTrack, ffmpegOverride, audioBitrate, videoBitrate, height, width, } = await (0, get_cli_options_1.getCliOptions)({
         isLambda: false,
         type: 'series',
         remotionRoot,
     });
-    const imageFormat = (0, image_formats_1.getVideoImageFormat)(codec);
+    const imageFormat = (0, image_formats_1.getImageFormat)(codec);
     const audioCodec = (0, get_audio_codec_1.getResolvedAudioCodec)();
     return {
         outputLocation,
@@ -23,6 +23,8 @@ const getRenderMediaOptions = async ({ outputLocation, config, serveUrl, codec,
         },
         crf,
         envVariables,
+        ffmpegExecutable,
+        ffprobeExecutable,
         frameRange,
         imageFormat,
         inputProps,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/cli",
-	"version": "4.0.0-alpha.179+67a31bc55",
+	"version": "4.0.0-alpha.185+1b8f0e746",
 	"description": "CLI for Remotion",
 	"main": "dist/index.js",
 	"sideEffects": false,
@@ -34,16 +34,16 @@
 	"author": "Jonny Burger <jonny@remotion.dev>",
 	"license": "SEE LICENSE IN LICENSE.md",
 	"dependencies": {
-		"@remotion/bundler": "4.0.0-alpha.179+67a31bc55",
-		"@remotion/media-utils": "4.0.0-alpha.179+67a31bc55",
-		"@remotion/player": "4.0.0-alpha.179+67a31bc55",
-		"@remotion/renderer": "4.0.0-alpha.179+67a31bc55",
+		"@remotion/bundler": "4.0.0-alpha.185+1b8f0e746",
+		"@remotion/media-utils": "4.0.0-alpha.185+1b8f0e746",
+		"@remotion/player": "4.0.0-alpha.185+1b8f0e746",
+		"@remotion/renderer": "4.0.0-alpha.185+1b8f0e746",
 		"dotenv": "9.0.2",
 		"memfs": "3.4.3",
 		"minimist": "1.2.6",
 		"open": "^8.4.2",
 		"prompts": "2.4.1",
-		"remotion": "4.0.0-alpha.179+67a31bc55",
+		"remotion": "4.0.0-alpha.185+1b8f0e746",
 		"semver": "7.3.5",
 		"source-map": "0.6.1"
 	},
@@ -83,5 +83,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "67a31bc55b90f0de65d9538f120b23b6e5c604c5"
+	"gitHead": "1b8f0e746ea4aa1153c4ecc7bc1063752c405f25"
 }

package/styles/styles.css

@@ -37,3 +37,9 @@ a:focus {
 	border-radius: 0 !important;
 }
 
+input[type="color"].__remotion_color_picker::-webkit-color-swatch-wrapper {
+	padding: 0;
+}
+input[type="color"].__remotion_color_picker::-webkit-color-swatch {
+	border: none;
+}