@remotion/studio 4.0.484 → 4.0.486

package/dist/components/NewComposition/use-rename-static-file.js

@@ -0,0 +1,90 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRenameStaticFile = exports.validateStaticFileRename = exports.getRenamedStaticFilePath = exports.getStaticFileRenameSelection = exports.getStaticFileBaseName = exports.getStaticFileParent = void 0;
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const rename_static_file_1 = require("../../api/rename-static-file");
+const url_state_1 = require("../../helpers/url-state");
+const NotificationCenter_1 = require("../Notifications/NotificationCenter");
+const getStaticFileParent = (relativePath) => {
+    const slashIndex = relativePath.lastIndexOf('/');
+    return slashIndex === -1 ? '' : relativePath.slice(0, slashIndex);
+};
+exports.getStaticFileParent = getStaticFileParent;
+const getStaticFileBaseName = (relativePath) => {
+    const slashIndex = relativePath.lastIndexOf('/');
+    return slashIndex === -1 ? relativePath : relativePath.slice(slashIndex + 1);
+};
+exports.getStaticFileBaseName = getStaticFileBaseName;
+const getStaticFileRenameSelection = (fileName) => {
+    const dotIndex = fileName.lastIndexOf('.');
+    return [0, dotIndex > 0 ? dotIndex : fileName.length];
+};
+exports.getStaticFileRenameSelection = getStaticFileRenameSelection;
+const getRenamedStaticFilePath = ({ newName, relativePath, }) => {
+    const parent = (0, exports.getStaticFileParent)(relativePath);
+    return [parent, newName].filter(Boolean).join('/');
+};
+exports.getRenamedStaticFilePath = getRenamedStaticFilePath;
+const validateStaticFileRename = ({ newName, newRelativePath, relativePath, staticFiles, }) => {
+    const trimmedName = newName.trim();
+    if (trimmedName.length === 0) {
+        return 'Name cannot be empty';
+    }
+    if (trimmedName !== newName) {
+        return 'Name cannot start or end with whitespace';
+    }
+    if (newName.includes('/') || newName.includes('\\')) {
+        return 'Name cannot include slashes';
+    }
+    const existingFile = staticFiles.find((file) => {
+        return file.name === newRelativePath && file.name !== relativePath;
+    });
+    if (existingFile) {
+        return 'An asset with this name already exists';
+    }
+    return null;
+};
+exports.validateStaticFileRename = validateStaticFileRename;
+const useRenameStaticFile = ({ relativePath, staticFiles, }) => {
+    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const { setCanvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionSetters);
+    return (0, react_1.useCallback)(async (newName) => {
+        const newRelativePath = (0, exports.getRenamedStaticFilePath)({
+            newName,
+            relativePath,
+        });
+        if (newRelativePath === relativePath) {
+            return true;
+        }
+        const validationMessage = (0, exports.validateStaticFileRename)({
+            newName,
+            newRelativePath,
+            relativePath,
+            staticFiles,
+        });
+        if (validationMessage) {
+            (0, NotificationCenter_1.showNotification)(validationMessage, 2000);
+            return false;
+        }
+        const notification = (0, NotificationCenter_1.showNotification)(`Renaming ${relativePath}...`, null);
+        try {
+            await (0, rename_static_file_1.renameStaticFile)({
+                oldRelativePath: relativePath,
+                newRelativePath,
+            });
+            if ((canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'asset' &&
+                canvasContent.asset === relativePath) {
+                setCanvasContent({ type: 'asset', asset: newRelativePath });
+                (0, url_state_1.pushUrl)(`/assets/${newRelativePath}`);
+            }
+            notification.replaceContent(`Renamed to ${newRelativePath}`, 2000);
+            return true;
+        }
+        catch (err) {
+            notification.replaceContent(`Could not rename ${relativePath}: ${err.message}`, 3000);
+            return false;
+        }
+    }, [canvasContent, relativePath, setCanvasContent, staticFiles]);
+};
+exports.useRenameStaticFile = useRenameStaticFile;

package/dist/components/NoRegisterRoot.js

@@ -4,9 +4,10 @@ exports.NoRegisterRoot = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const colors_1 = require("../helpers/colors");
 const label = {
     fontSize: 13,
-    color: 'white',
+    color: colors_1.WHITE,
     fontFamily: 'Arial, Helvetica, sans-serif',
 };
 const container = {
@@ -17,7 +18,7 @@ const container = {
     lineHeight: 1.5,
 };
 const link = {
-    color: 'white',
+    color: colors_1.WHITE,
     textDecoration: 'none',
     borderBottom: '1px solid',
 };

package/dist/components/Notifications/ColorDot.js

@@ -3,11 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ColorDot = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
 const container = {
     height: 16,
     width: 16,
-    backgroundColor: 'red',
-    border: '1px solid rgba(255, 255, 255, 0.2)',
+    backgroundColor: colors_1.RED,
+    border: colors_1.BORDER_WHITE_ALPHA_20,
     borderRadius: 8,
 };
 const ColorDot = ({ color }) => {

package/dist/components/Notifications/Notification.js

@@ -5,15 +5,15 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../../helpers/colors");
 const notification = {
-    backgroundColor: '#111111',
-    color: colors_1.TEXT_COLOR,
+    backgroundColor: colors_1.NOTIFICATION_BACKGROUND,
+    color: colors_1.WHITE_HEX,
     fontFamily: 'Arial, Helvetica, sans-serif',
     display: 'inline-flex',
     padding: '6px 14px',
     borderRadius: 6,
     fontSize: 13,
-    border: '0.25px solid rgba(255, 255, 255, 0.1)',
-    boxShadow: '0 2px 3px rgba(0, 0, 0, 1)',
+    border: colors_1.NOTIFICATION_BORDER,
+    boxShadow: colors_1.NOTIFICATION_SHADOW,
     marginTop: 3,
     marginBottom: 3,
     alignItems: 'center',

package/dist/components/Notifications/NotificationCenter.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.NotificationCenter = exports.showNotification = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
 const Notification_1 = require("./Notification");
 const container = {
     position: 'absolute',
@@ -13,7 +14,7 @@ const container = {
     flexDirection: 'column',
     paddingTop: 40,
     pointerEvents: 'none',
-    backgroundColor: 'transparent',
+    backgroundColor: colors_1.TRANSPARENT,
 };
 const notificationCenter = (0, react_1.createRef)();
 const showNotification = (content, durationInMs) => {

package/dist/components/Notifications/ServerDisconnected.js

@@ -4,6 +4,7 @@ exports.ServerDisconnected = 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 container = {
     position: 'fixed',
     justifyContent: 'flex-end',
@@ -14,18 +15,18 @@ const container = {
     flexDirection: 'column',
     padding: 30,
     pointerEvents: 'none',
-    backgroundColor: 'transparent',
+    backgroundColor: colors_1.TRANSPARENT,
     fontFamily: 'SF Pro, Arial, Helvetica, sans-serif',
 };
 const message = {
-    backgroundColor: '#e74c3c',
-    color: 'white',
+    backgroundColor: colors_1.SERVER_DISCONNECTED_BACKGROUND,
+    color: colors_1.WHITE,
     paddingLeft: 20,
     paddingRight: 20,
     paddingTop: 12,
     paddingBottom: 12,
     borderRadius: 4,
-    boxShadow: '0 2px 4px rgba(0, 0, 0, 0.4)',
+    boxShadow: colors_1.SERVER_DISCONNECTED_SHADOW,
     lineHeight: 1.5,
 };
 const inlineCode = {

package/dist/components/OptionsPanel.d.ts

@@ -1,9 +1,6 @@
 import React from 'react';
 type OptionsSidebarPanel = 'inspector' | 'renders';
 export declare const persistSelectedOptionsSidebarPanel: (panel: OptionsSidebarPanel) => void;
-export declare const optionsSidebarTabs: React.RefObject<{
-    selectRendersPanel: () => void;
-} | null>;
 export declare const OptionsPanel: React.FC<{
     readonly readOnlyStudio: boolean;
 }>;

package/dist/components/OptionsPanel.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.OptionsPanel = exports.optionsSidebarTabs = exports.persistSelectedOptionsSidebarPanel = void 0;
+exports.OptionsPanel = exports.persistSelectedOptionsSidebarPanel = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
@@ -10,6 +10,7 @@ const show_browser_rendering_1 = require("../helpers/show-browser-rendering");
 const get_zod_if_possible_1 = require("./get-zod-if-possible");
 const InspectorPanel_1 = require("./InspectorPanel");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
+const options_sidebar_tabs_1 = require("./options-sidebar-tabs");
 const deep_equal_1 = require("./RenderModal/SchemaEditor/deep-equal");
 const extract_enum_json_paths_1 = require("./RenderModal/SchemaEditor/extract-enum-json-paths");
 const SchemaResetButton_1 = require("./RenderModal/SchemaEditor/SchemaResetButton");
@@ -35,7 +36,6 @@ const persistSelectedOptionsSidebarPanel = (panel) => {
     localStorage.setItem(localStorageKey, panel);
 };
 exports.persistSelectedOptionsSidebarPanel = persistSelectedOptionsSidebarPanel;
-exports.optionsSidebarTabs = (0, react_1.createRef)();
 const OptionsPanel = ({ readOnlyStudio }) => {
     const { props, updateProps } = (0, react_1.useContext)(remotion_1.Internals.EditorPropsContext);
     const renderingAvailable = !readOnlyStudio || show_browser_rendering_1.SHOW_BROWSER_RENDERING;
@@ -57,8 +57,12 @@ const OptionsPanel = ({ readOnlyStudio }) => {
         setPanel('renders');
         (0, exports.persistSelectedOptionsSidebarPanel)('renders');
     }, []);
-    (0, react_1.useImperativeHandle)(exports.optionsSidebarTabs, () => {
+    (0, react_1.useImperativeHandle)(options_sidebar_tabs_1.optionsSidebarTabs, () => {
         return {
+            selectInspectorPanel: () => {
+                setPanel('inspector');
+                (0, exports.persistSelectedOptionsSidebarPanel)('inspector');
+            },
             selectRendersPanel: () => {
                 setPanel('renders');
                 (0, exports.persistSelectedOptionsSidebarPanel)('renders');
@@ -177,6 +181,6 @@ const OptionsPanel = ({ readOnlyStudio }) => {
     }, []);
     return (jsx_runtime_1.jsxs("div", { style: container, className: "css-reset", onPointerDown: onPointerDown, children: [
             jsx_runtime_1.jsx("div", { style: tabsContainer, children: jsx_runtime_1.jsxs(Tabs_1.Tabs, { children: [
-                        jsx_runtime_1.jsxs(Tabs_1.Tab, { selected: panel === 'inspector', onClick: onInspectorSelected, style: { justifyContent: 'space-between' }, children: ["Inspector", hasLocalModifications ? (jsx_runtime_1.jsx(SchemaResetButton_1.SchemaResetButton, { onClick: resetToOriginal })) : null] }), renderingAvailable ? (jsx_runtime_1.jsx(RendersTab_1.RendersTab, { onClick: onRendersSelected, selected: panel === 'renders' })) : null] }) }), panel === 'inspector' ? (jsx_runtime_1.jsx(InspectorPanel_1.InspectorPanel, { composition: composition, currentDefaultProps: currentDefaultProps, setDefaultProps: setDefaultProps })) : !renderingAvailable ? null : (jsx_runtime_1.jsx(RenderQueue_1.RenderQueue, {}))] }));
+                        jsx_runtime_1.jsxs(Tabs_1.Tab, { selected: panel === 'inspector', onClick: onInspectorSelected, style: { justifyContent: 'space-between' }, children: ["Inspector", hasLocalModifications ? (jsx_runtime_1.jsx(SchemaResetButton_1.SchemaResetButton, { onClick: resetToOriginal })) : null] }), renderingAvailable ? (jsx_runtime_1.jsx(RendersTab_1.RendersTab, { onClick: onRendersSelected, selected: panel === 'renders' })) : null] }) }), panel === 'inspector' ? (jsx_runtime_1.jsx(InspectorPanel_1.InspectorPanel, { composition: composition, currentDefaultProps: currentDefaultProps, readOnlyStudio: readOnlyStudio, setDefaultProps: setDefaultProps })) : !renderingAvailable ? null : (jsx_runtime_1.jsx(RenderQueue_1.RenderQueue, {}))] }));
 };
 exports.OptionsPanel = OptionsPanel;

package/dist/components/OutlineToggle.js

@@ -11,7 +11,7 @@ const OutlineToggle = () => {
     const onClick = (0, react_1.useCallback)(() => {
         setEditorShowOutlines((current) => !current);
     }, [setEditorShowOutlines]);
-    const color = editorShowOutlines ? colors_1.BLUE : 'white';
+    const color = editorShowOutlines ? colors_1.BLUE : colors_1.WHITE;
     const accessibilityLabel = editorShowOutlines
         ? 'Hide outlines'
         : 'Show outlines';

package/dist/components/PlayPause.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const player_1 = require("@remotion/player");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const colors_1 = require("../helpers/colors");
 const is_current_selected_still_1 = require("../helpers/is-current-selected-still");
 const use_keybinding_1 = require("../helpers/use-keybinding");
 const jump_to_start_1 = require("../icons/jump-to-start");
@@ -18,16 +19,16 @@ const imperative_state_1 = require("./Timeline/imperative-state");
 const timeline_scroll_logic_1 = require("./Timeline/timeline-scroll-logic");
 const backStyle = {
     height: 18,
-    color: 'white',
+    color: colors_1.WHITE,
 };
 const forwardBackStyle = {
     height: 16,
-    color: 'white',
+    color: colors_1.WHITE,
 };
 const iconButton = {
     height: 14,
     width: 14,
-    color: 'white',
+    color: colors_1.WHITE,
 };
 const PlayPause = ({ playbackRate, loop, bufferStateDelayInMilliseconds, muted }) => {
     const { inFrame, outFrame } = (0, in_out_1.useTimelineInOutFramePosition)();

package/dist/components/PreviewToolbar.js

@@ -29,7 +29,7 @@ const TOOLBAR_HEIGHT = 50;
 const container = {
     display: 'flex',
     justifyContent: 'center',
-    borderTop: '1px solid rgba(0, 0, 0, 0.5)',
+    borderTop: colors_1.BORDER_BLACK_ALPHA_50,
     alignItems: 'center',
     flexDirection: 'row',
     background: colors_1.BACKGROUND,

package/dist/components/QuickSwitcher/AlgoliaCredit.js

@@ -2,10 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AlgoliaCredit = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../../helpers/colors");
 const link = {
     display: 'inline-flex',
 };
 const AlgoliaCredit = () => {
-    return (jsx_runtime_1.jsx("a", { style: link, href: "https://www.algolia.com/ref/docsearch/?utm_source=www.remotion.dev&utm_medium=referral&utm_content=powered_by&utm_campaign=docsearch", target: "_blank", rel: "noopener noreferrer", children: jsx_runtime_1.jsx("svg", { width: "77", height: "19", "aria-label": "Algolia", role: "img", children: jsx_runtime_1.jsx("path", { d: "M2.5067 0h14.0245c1.384.001 2.5058 1.1205 2.5068 2.5017V16.5c-.0014 1.3808-1.1232 2.4995-2.5068 2.5H2.5067C1.1232 18.9995.0014 17.8808 0 16.5V2.4958A2.495 2.495 0 01.735.7294 2.505 2.505 0 012.5068 0zM37.95 15.0695c-3.7068.0168-3.7068-2.986-3.7068-3.4634L34.2372.3576 36.498 0v11.1794c0 .2715 0 1.9889 1.452 1.994v1.8961zm-9.1666-1.8388c.694 0 1.2086-.0397 1.5678-.1088v-2.2934a5.3639 5.3639 0 00-1.3303-.1679 4.8283 4.8283 0 00-.758.0582 2.2845 2.2845 0 00-.688.2024c-.2029.0979-.371.2362-.4919.4142-.1268.1788-.185.2826-.185.5533 0 .5297.185.8359.5205 1.0375.3355.2016.7928.3053 1.365.3053v-.0008zm-.1969-8.1817c.7463 0 1.3768.092 1.8856.2767.5088.1838.9195.4428 1.2204.7717.3068.334.5147.7777.6423 1.251.1327.4723.196.991.196 1.5603v5.798c-.5235.1036-1.05.192-1.5787.2649-.7048.1037-1.4976.156-2.3774.156-.5832 0-1.1215-.0582-1.6016-.167a3.385 3.385 0 01-1.2432-.5364 2.6034 2.6034 0 01-.8037-.9565c-.191-.3922-.29-.9447-.29-1.5208 0-.5533.11-.905.3246-1.2863a2.7351 2.7351 0 01.8849-.9329c.376-.242.8029-.415 1.2948-.5187a7.4517 7.4517 0 011.5381-.156 7.1162 7.1162 0 011.6667.2024V8.886c0-.259-.0296-.5061-.093-.7372a1.5847 1.5847 0 00-.3245-.6158 1.5079 1.5079 0 00-.6119-.4158 2.6788 2.6788 0 00-.966-.173c-.5206 0-.9948.0634-1.4283.1384a6.5481 6.5481 0 00-1.065.259l-.2712-1.849c.2831-.0986.7048-.1964 1.2491-.2943a9.2979 9.2979 0 011.752-.1501v.0008zm44.6597 8.1193c.6947 0 1.2086-.0405 1.567-.1097v-2.2942a5.3743 5.3743 0 00-1.3303-.1679c-.2485 0-.503.0177-.7573.0582a2.2853 2.2853 0 00-.688.2024 1.2333 1.2333 0 00-.4918.4142c-.1268.1788-.1843.2826-.1843.5533 0 .5297.1843.8359.5198 1.0375.3414.2066.7927.3053 1.365.3053v.0009zm-.191-8.1767c.7463 0 1.3768.0912 1.8856.2759.5087.1847.9195.4436 1.2204.7717.3.329.5147.7786.6414 1.251a5.7248 5.7248 0 01.197 1.562v5.7972c-.3466.0742-.874.1602-1.5788.2648-.7049.1038-1.4976.1552-2.3774.1552-.5832 0-1.1215-.0573-1.6016-.167a3.385 3.385 0 01-1.2432-.5356 2.6034 2.6034 0 01-.8038-.9565c-.191-.3922-.2898-.9447-.2898-1.5216 0-.5533.1098-.905.3245-1.2854a2.7373 2.7373 0 01.8849-.9338c.376-.2412.8029-.4141 1.2947-.5178a7.4545 7.4545 0 012.325-.1097c.2781.0287.5672.081.879.156v-.3686a2.7781 2.7781 0 00-.092-.738 1.5788 1.5788 0 00-.3246-.6166 1.5079 1.5079 0 00-.612-.415 2.6797 2.6797 0 00-.966-.1729c-.5205 0-.9947.0633-1.4282.1384a6.5608 6.5608 0 00-1.065.259l-.2712-1.8498c.283-.0979.7048-.1957 1.2491-.2935a9.8597 9.8597 0 011.752-.1494zm-6.79-1.072c-.7576.001-1.373-.6103-1.3759-1.3664 0-.755.6128-1.3664 1.376-1.3664.764 0 1.3775.6115 1.3775 1.3664s-.6195 1.3664-1.3776 1.3664zm1.1393 11.1507h-2.2726V5.3409l2.2734-.3568v10.0845l-.0008.0017zm-3.984 0c-3.707.0168-3.707-2.986-3.707-3.4642L59.7069.3576 61.9685 0v11.1794c0 .2715 0 1.9889 1.452 1.994V15.0703zm-7.3512-4.979c0-.975-.2138-1.7873-.6305-2.3516-.4167-.571-.9998-.852-1.747-.852-.7454 0-1.3302.281-1.7452.852-.4166.5702-.6195 1.3765-.6195 2.3516 0 .9851.208 1.6473.6254 2.2183.4158.576.9998.8587 1.7461.8587.7454 0 1.3303-.2885 1.747-.8595.4158-.5761.6237-1.2315.6237-2.2184v.0009zm2.3132-.006c0 .7609-.1099 1.3361-.3356 1.9654a4.654 4.654 0 01-.9533 1.6076A4.214 4.214 0 0155.613 14.69c-.579.2412-1.4697.3795-1.9143.3795-.4462-.005-1.3303-.1324-1.9033-.3795a4.307 4.307 0 01-1.474-1.0316c-.4115-.4445-.7293-.9801-.9609-1.6076a5.3423 5.3423 0 01-.3465-1.9653c0-.7608.104-1.493.3356-2.1155a4.683 4.683 0 01.9719-1.5958 4.3383 4.3383 0 011.479-1.0257c.5739-.242 1.2043-.3567 1.8864-.3567.6829 0 1.3125.1197 1.8906.3567a4.1245 4.1245 0 011.4816 1.0257 4.7587 4.7587 0 01.9592 1.5958c.2426.6225.3643 1.3547.3643 2.1155zm-17.0198 0c0 .9448.208 1.9932.6238 2.431.4166.4386.955.6579 1.6142.6579.3584 0 .6998-.0523 1.0176-.1502.3186-.0978.5721-.2134.775-.3517V7.0784a8.8706 8.8706 0 00-1.4926-.1906c-.8206-.0236-1.4452.312-1.8847.8468-.4335.5365-.6533 1.476-.6533 2.3516v-.0008zm6.2863 4.4485c0 1.5385-.3938 2.662-1.1866 3.3773-.791.7136-2.0005 1.0712-3.6308 1.0712-.5958 0-1.834-.1156-2.8228-.334l.3643-1.7865c.8282.173 1.9202.2193 2.4932.2193.9077 0 1.555-.1847 1.943-.5533.388-.3686.578-.916.578-1.643v-.3687a6.8289 6.8289 0 01-.8848.3349c-.3634.1096-.786.167-1.261.167-.6246 0-1.1917-.0979-1.7055-.2944a3.5554 3.5554 0 01-1.3244-.8645c-.3642-.3796-.6541-.8579-.8561-1.4289-.2028-.571-.3068-1.59-.3068-2.339 0-.7034.1099-1.5856.3245-2.1735.2198-.5871.5316-1.0949.9542-1.515.4167-.42.9255-.743 1.5213-.98a5.5923 5.5923 0 012.052-.3855c.7353 0 1.4114.092 2.0707.2024.6592.1088 1.2204.2236 1.6776.35v8.945-.0008zM11.5026 4.2418v-.6511c-.0005-.4553-.3704-.8241-.8266-.8241H8.749c-.4561 0-.826.3688-.8265.824v.669c0 .0742.0693.1264.1445.1096a6.0346 6.0346 0 011.6768-.2362 6.125 6.125 0 011.6202.2185.1116.1116 0 00.1386-.1097zm-5.2806.852l-.3296-.3282a.8266.8266 0 00-1.168 0l-.393.3922a.8199.8199 0 000 1.164l.3237.323c.0524.0515.1268.0397.1733-.0117.191-.259.3989-.507.6305-.7372.2374-.2362.48-.4437.7462-.6335.0575-.0354.0634-.1155.017-.1687zm3.5159 2.069v2.818c0 .081.0879.1392.1622.0987l2.5102-1.2964c.0574-.0287.0752-.0987.0464-.1552a3.1237 3.1237 0 00-2.603-1.574c-.0575 0-.115.0456-.115.1097l-.0008-.0009zm.0008 6.789c-2.0933.0005-3.7915-1.6912-3.7947-3.7804C5.9468 8.0821 7.6452 6.39 9.7387 6.391c2.0932-.0005 3.7911 1.6914 3.794 3.7804a3.7783 3.7783 0 01-1.1124 2.675 3.7936 3.7936 0 01-2.6824 1.1054h.0008zM9.738 4.8002c-1.9218 0-3.6975 1.0232-4.6584 2.6841a5.359 5.359 0 000 5.3683c.9609 1.661 2.7366 2.6841 4.6584 2.6841a5.3891 5.3891 0 003.8073-1.5725 5.3675 5.3675 0 001.578-3.7987 5.3574 5.3574 0 00-1.5771-3.797A5.379 5.379 0 009.7387 4.801l-.0008-.0008z", fill: "currentColor", fillRule: "evenodd" }) }) }));
+    return (jsx_runtime_1.jsx("a", { style: link, href: "https://www.algolia.com/ref/docsearch/?utm_source=www.remotion.dev&utm_medium=referral&utm_content=powered_by&utm_campaign=docsearch", target: "_blank", rel: "noopener noreferrer", children: jsx_runtime_1.jsx("svg", { width: "77", height: "19", "aria-label": "Algolia", role: "img", children: jsx_runtime_1.jsx("path", { d: "M2.5067 0h14.0245c1.384.001 2.5058 1.1205 2.5068 2.5017V16.5c-.0014 1.3808-1.1232 2.4995-2.5068 2.5H2.5067C1.1232 18.9995.0014 17.8808 0 16.5V2.4958A2.495 2.495 0 01.735.7294 2.505 2.505 0 012.5068 0zM37.95 15.0695c-3.7068.0168-3.7068-2.986-3.7068-3.4634L34.2372.3576 36.498 0v11.1794c0 .2715 0 1.9889 1.452 1.994v1.8961zm-9.1666-1.8388c.694 0 1.2086-.0397 1.5678-.1088v-2.2934a5.3639 5.3639 0 00-1.3303-.1679 4.8283 4.8283 0 00-.758.0582 2.2845 2.2845 0 00-.688.2024c-.2029.0979-.371.2362-.4919.4142-.1268.1788-.185.2826-.185.5533 0 .5297.185.8359.5205 1.0375.3355.2016.7928.3053 1.365.3053v-.0008zm-.1969-8.1817c.7463 0 1.3768.092 1.8856.2767.5088.1838.9195.4428 1.2204.7717.3068.334.5147.7777.6423 1.251.1327.4723.196.991.196 1.5603v5.798c-.5235.1036-1.05.192-1.5787.2649-.7048.1037-1.4976.156-2.3774.156-.5832 0-1.1215-.0582-1.6016-.167a3.385 3.385 0 01-1.2432-.5364 2.6034 2.6034 0 01-.8037-.9565c-.191-.3922-.29-.9447-.29-1.5208 0-.5533.11-.905.3246-1.2863a2.7351 2.7351 0 01.8849-.9329c.376-.242.8029-.415 1.2948-.5187a7.4517 7.4517 0 011.5381-.156 7.1162 7.1162 0 011.6667.2024V8.886c0-.259-.0296-.5061-.093-.7372a1.5847 1.5847 0 00-.3245-.6158 1.5079 1.5079 0 00-.6119-.4158 2.6788 2.6788 0 00-.966-.173c-.5206 0-.9948.0634-1.4283.1384a6.5481 6.5481 0 00-1.065.259l-.2712-1.849c.2831-.0986.7048-.1964 1.2491-.2943a9.2979 9.2979 0 011.752-.1501v.0008zm44.6597 8.1193c.6947 0 1.2086-.0405 1.567-.1097v-2.2942a5.3743 5.3743 0 00-1.3303-.1679c-.2485 0-.503.0177-.7573.0582a2.2853 2.2853 0 00-.688.2024 1.2333 1.2333 0 00-.4918.4142c-.1268.1788-.1843.2826-.1843.5533 0 .5297.1843.8359.5198 1.0375.3414.2066.7927.3053 1.365.3053v.0009zm-.191-8.1767c.7463 0 1.3768.0912 1.8856.2759.5087.1847.9195.4436 1.2204.7717.3.329.5147.7786.6414 1.251a5.7248 5.7248 0 01.197 1.562v5.7972c-.3466.0742-.874.1602-1.5788.2648-.7049.1038-1.4976.1552-2.3774.1552-.5832 0-1.1215-.0573-1.6016-.167a3.385 3.385 0 01-1.2432-.5356 2.6034 2.6034 0 01-.8038-.9565c-.191-.3922-.2898-.9447-.2898-1.5216 0-.5533.1098-.905.3245-1.2854a2.7373 2.7373 0 01.8849-.9338c.376-.2412.8029-.4141 1.2947-.5178a7.4545 7.4545 0 012.325-.1097c.2781.0287.5672.081.879.156v-.3686a2.7781 2.7781 0 00-.092-.738 1.5788 1.5788 0 00-.3246-.6166 1.5079 1.5079 0 00-.612-.415 2.6797 2.6797 0 00-.966-.1729c-.5205 0-.9947.0633-1.4282.1384a6.5608 6.5608 0 00-1.065.259l-.2712-1.8498c.283-.0979.7048-.1957 1.2491-.2935a9.8597 9.8597 0 011.752-.1494zm-6.79-1.072c-.7576.001-1.373-.6103-1.3759-1.3664 0-.755.6128-1.3664 1.376-1.3664.764 0 1.3775.6115 1.3775 1.3664s-.6195 1.3664-1.3776 1.3664zm1.1393 11.1507h-2.2726V5.3409l2.2734-.3568v10.0845l-.0008.0017zm-3.984 0c-3.707.0168-3.707-2.986-3.707-3.4642L59.7069.3576 61.9685 0v11.1794c0 .2715 0 1.9889 1.452 1.994V15.0703zm-7.3512-4.979c0-.975-.2138-1.7873-.6305-2.3516-.4167-.571-.9998-.852-1.747-.852-.7454 0-1.3302.281-1.7452.852-.4166.5702-.6195 1.3765-.6195 2.3516 0 .9851.208 1.6473.6254 2.2183.4158.576.9998.8587 1.7461.8587.7454 0 1.3303-.2885 1.747-.8595.4158-.5761.6237-1.2315.6237-2.2184v.0009zm2.3132-.006c0 .7609-.1099 1.3361-.3356 1.9654a4.654 4.654 0 01-.9533 1.6076A4.214 4.214 0 0155.613 14.69c-.579.2412-1.4697.3795-1.9143.3795-.4462-.005-1.3303-.1324-1.9033-.3795a4.307 4.307 0 01-1.474-1.0316c-.4115-.4445-.7293-.9801-.9609-1.6076a5.3423 5.3423 0 01-.3465-1.9653c0-.7608.104-1.493.3356-2.1155a4.683 4.683 0 01.9719-1.5958 4.3383 4.3383 0 011.479-1.0257c.5739-.242 1.2043-.3567 1.8864-.3567.6829 0 1.3125.1197 1.8906.3567a4.1245 4.1245 0 011.4816 1.0257 4.7587 4.7587 0 01.9592 1.5958c.2426.6225.3643 1.3547.3643 2.1155zm-17.0198 0c0 .9448.208 1.9932.6238 2.431.4166.4386.955.6579 1.6142.6579.3584 0 .6998-.0523 1.0176-.1502.3186-.0978.5721-.2134.775-.3517V7.0784a8.8706 8.8706 0 00-1.4926-.1906c-.8206-.0236-1.4452.312-1.8847.8468-.4335.5365-.6533 1.476-.6533 2.3516v-.0008zm6.2863 4.4485c0 1.5385-.3938 2.662-1.1866 3.3773-.791.7136-2.0005 1.0712-3.6308 1.0712-.5958 0-1.834-.1156-2.8228-.334l.3643-1.7865c.8282.173 1.9202.2193 2.4932.2193.9077 0 1.555-.1847 1.943-.5533.388-.3686.578-.916.578-1.643v-.3687a6.8289 6.8289 0 01-.8848.3349c-.3634.1096-.786.167-1.261.167-.6246 0-1.1917-.0979-1.7055-.2944a3.5554 3.5554 0 01-1.3244-.8645c-.3642-.3796-.6541-.8579-.8561-1.4289-.2028-.571-.3068-1.59-.3068-2.339 0-.7034.1099-1.5856.3245-2.1735.2198-.5871.5316-1.0949.9542-1.515.4167-.42.9255-.743 1.5213-.98a5.5923 5.5923 0 012.052-.3855c.7353 0 1.4114.092 2.0707.2024.6592.1088 1.2204.2236 1.6776.35v8.945-.0008zM11.5026 4.2418v-.6511c-.0005-.4553-.3704-.8241-.8266-.8241H8.749c-.4561 0-.826.3688-.8265.824v.669c0 .0742.0693.1264.1445.1096a6.0346 6.0346 0 011.6768-.2362 6.125 6.125 0 011.6202.2185.1116.1116 0 00.1386-.1097zm-5.2806.852l-.3296-.3282a.8266.8266 0 00-1.168 0l-.393.3922a.8199.8199 0 000 1.164l.3237.323c.0524.0515.1268.0397.1733-.0117.191-.259.3989-.507.6305-.7372.2374-.2362.48-.4437.7462-.6335.0575-.0354.0634-.1155.017-.1687zm3.5159 2.069v2.818c0 .081.0879.1392.1622.0987l2.5102-1.2964c.0574-.0287.0752-.0987.0464-.1552a3.1237 3.1237 0 00-2.603-1.574c-.0575 0-.115.0456-.115.1097l-.0008-.0009zm.0008 6.789c-2.0933.0005-3.7915-1.6912-3.7947-3.7804C5.9468 8.0821 7.6452 6.39 9.7387 6.391c2.0932-.0005 3.7911 1.6914 3.794 3.7804a3.7783 3.7783 0 01-1.1124 2.675 3.7936 3.7936 0 01-2.6824 1.1054h.0008zM9.738 4.8002c-1.9218 0-3.6975 1.0232-4.6584 2.6841a5.359 5.359 0 000 5.3683c.9609 1.661 2.7366 2.6841 4.6584 2.6841a5.3891 5.3891 0 003.8073-1.5725 5.3675 5.3675 0 001.578-3.7987 5.3574 5.3574 0 00-1.5771-3.797A5.379 5.379 0 009.7387 4.801l-.0008-.0008z", fill: colors_1.CURRENT_COLOR, fillRule: "evenodd" }) }) }));
 };
 exports.AlgoliaCredit = AlgoliaCredit;

package/dist/components/QuickSwitcher/QuickSwitcherContent.js

@@ -45,7 +45,7 @@ const modeInactive = {
 };
 const modeActive = {
     ...modeItem,
-    color: 'white',
+    color: colors_1.WHITE,
     fontWeight: 'bold',
 };
 const content = {

package/dist/components/QuickSwitcher/QuickSwitcherResult.js

@@ -87,12 +87,12 @@ const QuickSwitcherResult = ({ result, selected }) => {
             color: result.type === 'search-result'
                 ? colors_1.LIGHT_TEXT
                 : selected || hovered
-                    ? 'white'
+                    ? colors_1.WHITE
                     : colors_1.LIGHT_TEXT,
             fontSize: shared_1.QUICK_SWITCHER_RESULT_LABEL_FONT_SIZE,
         };
     }, [hovered, result.type, selected]);
-    return (jsx_runtime_1.jsxs("div", { ref: ref, style: style, onClick: result.onSelected, children: [result.type === 'composition' ? (result.compositionType === 'still' ? (jsx_runtime_1.jsx(still_1.StillIcon, { color: selected ? 'white' : colors_1.LIGHT_TEXT, style: iconStyle })) : (jsx_runtime_1.jsx(video_1.FilmIcon, { color: selected ? 'white' : colors_1.LIGHT_TEXT, style: iconStyle }))) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: labelContainer, children: result.type === 'search-result' ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+    return (jsx_runtime_1.jsxs("div", { ref: ref, style: style, onClick: result.onSelected, children: [result.type === 'composition' ? (result.compositionType === 'still' ? (jsx_runtime_1.jsx(still_1.StillIcon, { color: selected ? colors_1.WHITE : colors_1.LIGHT_TEXT, style: iconStyle })) : (jsx_runtime_1.jsx(video_1.FilmIcon, { color: selected ? colors_1.WHITE : colors_1.LIGHT_TEXT, style: iconStyle }))) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: labelContainer, children: result.type === 'search-result' ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                         jsx_runtime_1.jsx("div", { 
                             // eslint-disable-next-line react/no-danger
                             dangerouslySetInnerHTML: {

package/dist/components/RefreshCompositionOverlay.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RefreshCompositionOverlay = exports.container = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const remotion_1 = require("remotion");
+const colors_1 = require("../helpers/colors");
 const RunningCalculateMetadata_1 = require("./RunningCalculateMetadata");
 exports.container = {
     justifyContent: 'flex-end',
@@ -11,7 +12,7 @@ exports.container = {
     pointerEvents: 'none',
 };
 const shadow = {
-    boxShadow: '0 0 4px black',
+    boxShadow: colors_1.SHADOW_BLACK,
 };
 const RefreshCompositionOverlay = () => {
     return (jsx_runtime_1.jsx(remotion_1.AbsoluteFill, { style: exports.container, children: jsx_runtime_1.jsx("div", { style: shadow, children: jsx_runtime_1.jsx(RunningCalculateMetadata_1.RunningCalculateMetadata, {}) }) }));

package/dist/components/RenderButton.js

@@ -28,7 +28,7 @@ const splitButtonContainer = {
     flexDirection: 'row',
     alignItems: 'stretch',
     borderRadius: 4,
-    border: `1px solid ${colors_1.INPUT_BORDER_COLOR_UNHOVERED}`,
+    border: `1px solid ${colors_1.BLACK_ALPHA_60}`,
     backgroundColor: colors_1.INPUT_BACKGROUND,
     overflow: 'hidden',
 };
@@ -37,9 +37,9 @@ const mainButtonStyle = {
     paddingRight: 7,
     paddingTop: 7,
     paddingBottom: 7,
-    background: 'transparent',
+    background: colors_1.TRANSPARENT,
     border: 'none',
-    color: 'white',
+    color: colors_1.WHITE,
     cursor: 'pointer',
     display: 'flex',
     alignItems: 'center',
@@ -48,7 +48,7 @@ const mainButtonStyle = {
 };
 const dividerStyle = {
     width: 1,
-    backgroundColor: colors_1.INPUT_BORDER_COLOR_UNHOVERED,
+    backgroundColor: colors_1.BLACK_ALPHA_60,
     alignSelf: 'stretch',
 };
 const dropdownTriggerStyle = {
@@ -56,9 +56,9 @@ const dropdownTriggerStyle = {
     paddingRight: 6,
     paddingTop: 7,
     paddingBottom: 7,
-    background: 'transparent',
+    background: colors_1.TRANSPARENT,
     border: 'none',
-    color: 'white',
+    color: colors_1.WHITE,
     cursor: 'pointer',
     display: 'flex',
     alignItems: 'center',
@@ -167,7 +167,7 @@ const RenderButton = ({ readOnlyStudio, }) => {
         return {
             style: {
                 height: 16,
-                color: 'currentColor',
+                color: colors_1.CURRENT_COLOR,
             },
         };
     }, []);
@@ -397,7 +397,7 @@ const RenderButton = ({ readOnlyStudio, }) => {
     const containerStyle = (0, react_1.useMemo)(() => {
         return {
             ...splitButtonContainer,
-            borderColor: colors_1.INPUT_BORDER_COLOR_UNHOVERED,
+            borderColor: colors_1.BLACK_ALPHA_60,
             opacity: canRender ? 1 : 0.7,
             cursor: canRender ? 'pointer' : 'inherit',
         };
@@ -422,7 +422,7 @@ const RenderButton = ({ readOnlyStudio, }) => {
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
             jsx_runtime_1.jsx("button", { style: { display: 'none' }, id: "render-modal-button-server", disabled: !canServerRender, onClick: () => openServerRenderModal(false), type: "button" }), ' ', jsx_runtime_1.jsx("button", { style: { display: 'none' }, id: "render-modal-button-client", onClick: openClientRenderModal, type: "button" }), jsx_runtime_1.jsxs("div", { ref: containerRef, style: containerStyle, title: tooltip, children: [
                     jsx_runtime_1.jsx("button", { type: "button", style: mainButtonStyle, onClick: onClick, id: "render-modal-button", disabled: !canRender, children: jsx_runtime_1.jsxs(layout_1.Row, { align: "center", style: mainButtonContent, children: [
-                                jsx_runtime_1.jsx(render_1.ThinRenderIcon, { fill: "currentcolor", svgProps: iconStyle }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("span", { style: label, children: renderLabel })
+                                jsx_runtime_1.jsx(render_1.ThinRenderIcon, { fill: colors_1.CURRENT_COLOR_LOWERCASE, svgProps: iconStyle }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("span", { style: label, children: renderLabel })
                             ] }) }), shouldShowDropdown ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                             jsx_runtime_1.jsx("div", { style: dividerStyle }), jsx_runtime_1.jsx("button", { ref: dropdownRef, type: "button", style: dropdownTriggerStyle, disabled: !readOnlyStudio && connectionStatus !== 'connected', className: is_menu_item_1.MENU_INITIATOR_CLASSNAME, onPointerDown: onPointerDown, onClick: onClickDropdown, children: jsx_runtime_1.jsx(caret_1.CaretDown, {}) })
                         ] })) : null] }), portalStyle

package/dist/components/RenderModal/CliCopyButton.js

@@ -31,7 +31,7 @@ const CliCopyButton = ({ valueToCopy, }) => {
     const [copied, setCopied] = (0, react_1.useState)(false);
     const [hovered, setHovered] = (0, react_1.useState)(false);
     const fillColor = (0, react_1.useMemo)(() => {
-        return hovered ? 'white' : colors_1.LIGHT_TEXT;
+        return hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT;
     }, [hovered]);
     const clipboardIcon = jsx_runtime_1.jsx(clipboard_1.ClipboardIcon, { color: fillColor, style: svgStyle });
     const checkSvg = (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", style: svgStyle, children: jsx_runtime_1.jsx("path", { fill: fillColor, d: "M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z" }) }));

package/dist/components/RenderModal/ClientRenderProgress.js

@@ -17,7 +17,7 @@ const progressItem = {
 const label = {
     fontSize: 14,
     width: 400,
-    color: 'white',
+    color: colors_1.WHITE,
 };
 const right = {
     fontSize: 14,

package/dist/components/RenderModal/DataEditor.js

@@ -82,7 +82,7 @@ const controlContainer = {
     flexDirection: 'column',
     display: 'flex',
     padding: 12,
-    borderBottom: `1px solid ${colors_1.BORDER_COLOR}`,
+    borderBottom: `1px solid ${colors_1.BLACK_HEX}`,
 };
 const inspectorControlContainer = {
     ...controlContainer,

package/dist/components/RenderModal/GuiRenderStatus.js

@@ -18,7 +18,7 @@ const progressItem = {
 const label = {
     fontSize: 14,
     width: 400,
-    color: 'white',
+    color: colors_1.WHITE,
 };
 const right = {
     fontSize: 14,

package/dist/components/RenderModal/InfoBubble.js

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

package/dist/components/RenderModal/InfoTooltip.js

@@ -25,8 +25,8 @@ const InfoTooltip = ({ children, arrowDirection, backgroundColor }) => {
         return {
             boxShadow: arrowDirection === 'down' ? styles_1.SHADOW_TOWARDS_TOP : styles_1.SHADOW_TOWARDS_BOTTOM,
             background: backgroundColor,
-            color: 'white',
-            border: '0.5px solid ' + colors_1.BORDER_COLOR,
+            color: colors_1.WHITE,
+            border: '0.5px solid ' + colors_1.BLACK_HEX,
             maxHeight: 200,
             overflow: 'auto',
             borderRadius: '4px',
@@ -37,6 +37,6 @@ const InfoTooltip = ({ children, arrowDirection, backgroundColor }) => {
             flexDirection: arrowDirection === 'up' ? 'column-reverse' : 'column',
             alignItems: 'flex-start',
         }, children: [
-            jsx_runtime_1.jsx("div", { style: container, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: children }), arrowDirection === 'down' ? (jsx_runtime_1.jsx("svg", { viewBox: "0 0 14 7", style: arrowDown, children: jsx_runtime_1.jsx("path", { d: `M 14 0 L 7 7 L 0 0`, fill: backgroundColor, strokeLinecap: "butt", stroke: colors_1.BORDER_COLOR, strokeWidth: 0.5 }) })) : null, arrowDirection === 'up' ? (jsx_runtime_1.jsx("svg", { viewBox: "0 0 14 7", style: arrowUp, children: jsx_runtime_1.jsx("path", { d: `M 0 7 L 7 0 L 14 7`, fill: backgroundColor, strokeLinecap: "butt", stroke: colors_1.BORDER_COLOR, strokeWidth: 0.5 }) })) : null] }));
+            jsx_runtime_1.jsx("div", { style: container, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: children }), arrowDirection === 'down' ? (jsx_runtime_1.jsx("svg", { viewBox: "0 0 14 7", style: arrowDown, children: jsx_runtime_1.jsx("path", { d: `M 14 0 L 7 7 L 0 0`, fill: backgroundColor, strokeLinecap: "butt", stroke: colors_1.BLACK_HEX, strokeWidth: 0.5 }) })) : null, arrowDirection === 'up' ? (jsx_runtime_1.jsx("svg", { viewBox: "0 0 14 7", style: arrowUp, children: jsx_runtime_1.jsx("path", { d: `M 0 7 L 7 0 L 14 7`, fill: backgroundColor, strokeLinecap: "butt", stroke: colors_1.BLACK_HEX, strokeWidth: 0.5 }) })) : null] }));
 };
 exports.InfoTooltip = InfoTooltip;

package/dist/components/RenderModal/InlineEyeIcon.js

@@ -3,10 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.InlineEyeButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
 const InlineAction_1 = require("../InlineAction");
 const clearIcon = {
     height: 14,
-    color: 'currentColor',
+    color: colors_1.CURRENT_COLOR,
 };
 const InlineEyeButton = ({ onClick, enabled }) => {
     const renderAction = (0, react_1.useCallback)((color) => {

package/dist/components/RenderModal/InlineRemoveButton.js

@@ -3,10 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.InlineRemoveButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
 const InlineAction_1 = require("../InlineAction");
 const clearIcon = {
     height: 14,
-    color: 'currentColor',
+    color: colors_1.CURRENT_COLOR,
 };
 const InlineRemoveButton = ({ onClick }) => {
     const renderAction = (0, react_1.useCallback)((color) => {

package/dist/components/RenderModal/MultiRangeSlider.js

@@ -5,7 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../../helpers/colors");
 const container = {
-    borderColor: 'black',
+    borderColor: colors_1.BLACK,
     borderStyle: 'solid',
     borderWidth: '2px',
     height: 39,

package/dist/components/RenderModal/OptionExplainer.js

@@ -27,7 +27,7 @@ const description = {
 const link = {
     fontSize: 14,
     maxWidth: 200,
-    color: '#0b84f3',
+    color: colors_1.BLUE,
     wordWrap: 'break-word',
     textDecoration: 'none',
 };
@@ -41,7 +41,7 @@ const infoRow = {
 const infoRowLabel = {
     width: 150,
     fontSize: 14,
-    color: 'white',
+    color: colors_1.WHITE,
 };
 const flexSpacer = {
     display: 'flex',

package/dist/components/RenderModal/RenderModalHr.js

@@ -2,11 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenderModalHr = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../../helpers/colors");
 const hrStyle = {
     margin: '0 0 0 0',
     padding: '0 0 0 0',
     border: 'none',
-    borderTop: '1px solid #000',
+    borderTop: colors_1.BORDER_BLACK,
     marginRight: 16,
     marginLeft: 16,
     marginTop: 8,

package/dist/components/RenderModal/RenderStatusModal.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenderStatusModal = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
 const retry_payload_1 = require("../../helpers/retry-payload");
 const modals_1 = require("../../state/modals");
 const Button_1 = require("../Button");
@@ -22,7 +23,7 @@ const container = {
     paddingTop: 0,
 };
 const codeBlock = {
-    backgroundColor: '#222',
+    backgroundColor: colors_1.RENDER_STATUS_BACKGROUND,
     whiteSpace: 'pre',
     padding: 12,
     borderRadius: 4,