@remotion/studio 4.0.526 → 4.0.528

package/dist/esm/{index-eb5txqp6.mjs → index-s6qya2gg.mjs}

@@ -1,13 +1,14 @@
 import {
+  callApi,
   getBrowserStudioOperations
-} from "./index-cw0pnpg5.mjs";
+} from "./index-dfy1t576.mjs";
 import {
   getStudioInteractivityEnabled
 } from "./index-5zrb1ft4.mjs";
 import {
   CURRENT_COLOR,
   CURRENT_COLOR_LOWERCASE
-} from "./index-k426ye99.mjs";
+} from "./index-wqc43mw0.mjs";
 import {
   __require,
   __toESM
@@ -283,87 +284,6 @@ var TerminalIcon = ({ terminalId, size }) => {
 
 // src/api/delete-static-file.ts
 import { getRemotionEnvironment } from "remotion";
-
-// src/helpers/inserted-element-selection.ts
-var pendingSelection = null;
-var listeners = new Set;
-var requestInsertedElementSelection = (selection) => {
-  pendingSelection = selection;
-  for (const listener of listeners) {
-    listener();
-  }
-};
-var clearInsertedElementSelection = (selection) => {
-  if (pendingSelection !== selection) {
-    return;
-  }
-  pendingSelection = null;
-  for (const listener of listeners) {
-    listener();
-  }
-};
-var subscribeToInsertedElementSelection = (listener) => {
-  listeners.add(listener);
-  return () => listeners.delete(listener);
-};
-var getInsertedElementSelection = () => pendingSelection;
-
-// src/helpers/sequence-node-path-mutations.ts
-var pendingMutations = [];
-var seenMutationIds = new Set;
-var queueSequenceNodePathMutation = (mutation) => {
-  if (seenMutationIds.has(mutation.mutationId)) {
-    return;
-  }
-  seenMutationIds.add(mutation.mutationId);
-  pendingMutations.push(mutation);
-  if (mutation.timelineSelection !== null) {
-    requestInsertedElementSelection({
-      compositionId: mutation.timelineSelection.compositionId,
-      nodePath: {
-        absolutePath: mutation.timelineSelection.absolutePath,
-        nodePath: mutation.timelineSelection.nodePath
-      },
-      notification: null
-    });
-  }
-};
-var queueSequenceNodePathMutationFromApiResponse = (response) => {
-  if (typeof response !== "object" || response === null || !("nodePathMutation" in response)) {
-    return;
-  }
-  const { nodePathMutation } = response;
-  if (typeof nodePathMutation !== "object" || nodePathMutation === null || !("mutationId" in nodePathMutation) || typeof nodePathMutation.mutationId !== "string") {
-    return;
-  }
-  queueSequenceNodePathMutation(nodePathMutation);
-};
-var takePendingSequenceNodePathMutations = () => pendingMutations.splice(0);
-
-// src/components/call-api.ts
-var callApi = (endpoint, body, signal) => {
-  return new Promise((resolve, reject) => {
-    fetch(endpoint, {
-      method: "post",
-      headers: {
-        "content-type": "application/json"
-      },
-      signal,
-      body: JSON.stringify(body)
-    }).then((res) => res.json()).then((data) => {
-      if (data.success) {
-        queueSequenceNodePathMutationFromApiResponse(data.data);
-        resolve(data.data);
-      } else {
-        reject(new Error(data.error));
-      }
-    }).catch((err) => {
-      reject(err);
-    });
-  });
-};
-
-// src/api/delete-static-file.ts
 var deleteStaticFile = async (relativePath) => {
   if (!getRemotionEnvironment().isStudio) {
     throw new Error("deleteStaticFile() is only available in the Studio");
@@ -1106,12 +1026,12 @@ var { useSyncExternalStore } = Internals;
 
 // src/visual-controls/visual-control-store.ts
 var version = 0;
-var listeners2 = new Set;
+var listeners = new Set;
 var visualControlStore = {
   subscribe(listener) {
-    listeners2.add(listener);
+    listeners.add(listener);
     return () => {
-      listeners2.delete(listener);
+      listeners.delete(listener);
     };
   },
   getSnapshot() {
@@ -1119,7 +1039,7 @@ var visualControlStore = {
   },
   emitChange() {
     version++;
-    for (const listener of listeners2) {
+    for (const listener of listeners) {
       listener();
     }
   }
@@ -1366,4 +1286,4 @@ var VisualControlsProvider = ({ children }) => {
   });
 };
 
-export { AppsIcon, CodingAgentIcon, EditorIcon, FinderIcon, TerminalIcon, requestInsertedElementSelection, clearInsertedElementSelection, subscribeToInsertedElementSelection, getInsertedElementSelection, queueSequenceNodePathMutation, takePendingSequenceNodePathMutations, callApi, deleteStaticFile, DEFAULT_PROPS_PATH_CLASSNAME, DEFAULT_PROPS_PATH_ACTIVE_CLASSNAME, defaultPropsEditorScrollableAreaRef, expandDefaultPropsEditorRef, getStaticFiles, restartStudio, zodSafeParse, getZodDef, isZodV3Schema, getZodSchemaType, getZodSchemaDescription, getUserFacingDescription, getObjectShape, getArrayElement, getInnerType, getEffectsInner, getLiteralValue, getEnumValues, getFirstEnumValue, getUnionOptions, getDefaultValue, getDiscriminator, getDiscriminatedOptionKeys, getDiscriminatedOption, getIntersectionSchemas, getTupleItems, getRecordValueType, getRecordKeyType, getPipelineOutput, getPipelineInput, getBrandedInner, extractEnumJsonPaths, addStillRenderJob, addSequenceRenderJob, addVideoRenderJob, unsubscribeFromFileExistenceWatcher, subscribeToFileExistenceWatcher, openInFileExplorer, applyCodemod, removeRenderJob, cancelRenderJob, updateAvailable, getReleaseNotes, callUpdateDefaultPropsApi, applyVisualControlChange, useSyncExternalStore, visualControlStore, useZodIfPossible, useZodTypesIfPossible, ZodProvider, isStudioInteractivityEnabled, isStudioSelectionEnabled, getVisualControlEditedValue, VisualControlsContext, visualControlRef, SetVisualControlsContext, VisualControlsProvider, watchPublicFolder };
+export { AppsIcon, CodingAgentIcon, EditorIcon, FinderIcon, TerminalIcon, deleteStaticFile, DEFAULT_PROPS_PATH_CLASSNAME, DEFAULT_PROPS_PATH_ACTIVE_CLASSNAME, defaultPropsEditorScrollableAreaRef, expandDefaultPropsEditorRef, getStaticFiles, restartStudio, zodSafeParse, getZodDef, isZodV3Schema, getZodSchemaType, getZodSchemaDescription, getUserFacingDescription, getObjectShape, getArrayElement, getInnerType, getEffectsInner, getLiteralValue, getEnumValues, getFirstEnumValue, getUnionOptions, getDefaultValue, getDiscriminator, getDiscriminatedOptionKeys, getDiscriminatedOption, getIntersectionSchemas, getTupleItems, getRecordValueType, getRecordKeyType, getPipelineOutput, getPipelineInput, getBrandedInner, extractEnumJsonPaths, addStillRenderJob, addSequenceRenderJob, addVideoRenderJob, unsubscribeFromFileExistenceWatcher, subscribeToFileExistenceWatcher, openInFileExplorer, applyCodemod, removeRenderJob, cancelRenderJob, updateAvailable, getReleaseNotes, callUpdateDefaultPropsApi, applyVisualControlChange, useSyncExternalStore, visualControlStore, useZodIfPossible, useZodTypesIfPossible, ZodProvider, isStudioInteractivityEnabled, isStudioSelectionEnabled, getVisualControlEditedValue, VisualControlsContext, visualControlRef, SetVisualControlsContext, VisualControlsProvider, watchPublicFolder };

package/dist/esm/index-t7tbt980.mjs

@@ -0,0 +1,103 @@
+// src/helpers/studio-css-variables.ts
+var studioCssVariables = `
+:where(:root) {
+  --remotion-studio-black: black;
+  --remotion-studio-white: white;
+  --remotion-studio-red: red;
+  --remotion-studio-transparent: transparent;
+  --remotion-studio-current-color: currentColor;
+  --remotion-studio-background: rgb(31,36,40);
+  --remotion-studio-background-transparent: rgba(31,36,40, 0);
+  --remotion-studio-input-background: #2f363d;
+  --remotion-studio-light-color: #ddd;
+  --remotion-studio-light-text: #A6A7A9;
+  --remotion-studio-ruler-color: #808080;
+  --remotion-studio-white-alpha-05: rgba(255, 255, 255, 0.05);
+  --remotion-studio-white-alpha-06: rgba(255, 255, 255, 0.06);
+  --remotion-studio-white-alpha-08: rgba(255, 255, 255, 0.08);
+  --remotion-studio-white-alpha-10: rgba(255, 255, 255, 0.1);
+  --remotion-studio-white-alpha-12: rgba(255, 255, 255, 0.12);
+  --remotion-studio-white-alpha-15: rgba(255, 255, 255, 0.15);
+  --remotion-studio-white-alpha-20: rgba(255, 255, 255, 0.2);
+  --remotion-studio-white-alpha-25: rgba(255, 255, 255, 0.25);
+  --remotion-studio-white-alpha-30: rgba(255, 255, 255, 0.3);
+  --remotion-studio-white-alpha-35: rgba(255, 255, 255, 0.35);
+  --remotion-studio-white-alpha-40: rgba(255, 255, 255, 0.4);
+  --remotion-studio-white-alpha-45: rgba(255, 255, 255, 0.45);
+  --remotion-studio-white-alpha-50: rgba(255, 255, 255, 0.5);
+  --remotion-studio-white-alpha-60: rgba(255, 255, 255, 0.6);
+  --remotion-studio-white-alpha-70: rgba(255, 255, 255, 0.7);
+  --remotion-studio-white-alpha-72: rgba(255, 255, 255, 0.72);
+  --remotion-studio-white-alpha-80: rgba(255, 255, 255, 0.8);
+  --remotion-studio-white-alpha-90: rgba(255, 255, 255, 0.9);
+  --remotion-studio-black-alpha-10: rgba(0, 0, 0, 0.1);
+  --remotion-studio-black-alpha-28: rgba(0, 0, 0, 0.28);
+  --remotion-studio-black-alpha-30: rgba(0, 0, 0, 0.3);
+  --remotion-studio-black-alpha-40: rgba(0, 0, 0, 0.4);
+  --remotion-studio-black-alpha-50: rgba(0, 0, 0, 0.5);
+  --remotion-studio-black-alpha-60: rgba(0, 0, 0, 0.6);
+  --remotion-studio-black-alpha-80: rgba(0, 0, 0, 0.8);
+  --remotion-studio-black-alpha-85: rgba(0, 0, 0, 0.85);
+  --remotion-studio-black-alpha-90: rgba(0, 0, 0, 0.9);
+  --remotion-studio-fail-color: #ff3232;
+  --remotion-studio-warning-color: #f1c40f;
+  --remotion-studio-blue: #0b84f3;
+  --remotion-studio-blue-hovered: #4da3f7;
+  --remotion-studio-blue-disabled: #284f73;
+  --remotion-studio-unselected-guide: #7e1219;
+  --remotion-studio-selected-guide: #d22d3a;
+  --remotion-studio-line-color: #363A3E;
+  --remotion-studio-timeline-track-separator: #13161B;
+  --remotion-studio-light-gray: #ccc;
+  --remotion-studio-keyboard-shortcut-key-color: #eee;
+  --remotion-studio-notification-background: #111111;
+  --remotion-studio-render-status-background: #222;
+  --remotion-studio-error-code-frame-background: #070707;
+  --remotion-studio-error-code-frame-line-background: #121212;
+  --remotion-studio-error-link-color: #58a6ff;
+  --remotion-studio-info-blue: #60a5fa;
+  --remotion-studio-server-disconnected-background: #e74c3c;
+  --remotion-studio-timeline-background-color: #15181B;
+  --remotion-studio-timeline-negative-start-background-color: #2C2F32;
+  --remotion-studio-timeline-negative-start-border-color: #414446;
+  --remotion-studio-timeline-selected-background-color: #3B3F42;
+  --remotion-studio-timeline-selected-label-background-color: #B0B0B0;
+  --remotion-studio-timeline-blue: #0b84ff;
+  --remotion-studio-timeline-playhead-color: #f02c00;
+  --remotion-studio-timeline-drop-blue-alpha-12: rgba(0, 155, 255, 0.12);
+  --remotion-studio-timeline-drop-blue-alpha-16: rgba(0, 155, 255, 0.16);
+  --remotion-studio-timeline-drop-blue-alpha-75: rgba(0, 155, 255, 0.75);
+  --remotion-studio-timeline-marquee-blue-alpha-16: rgba(70, 130, 255, 0.16);
+  --remotion-studio-timeline-marquee-blue-alpha-75: rgba(70, 130, 255, 0.75);
+  --remotion-studio-easing-selected-background: rgba(11, 132, 243, 0.18);
+  --remotion-studio-info-blue-background: rgba(59, 130, 246, 0.15);
+  --remotion-studio-color-picker-checker-background-color: #444;
+  --remotion-studio-color-picker-hue-gradient: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
+  --remotion-studio-timeline-audio-gradient: linear-gradient(rgb(16 171 58), rgb(43 165 63) 60%);
+  --remotion-studio-timeline-video-gradient: linear-gradient(to top, #8e44ad, #9b59b6);
+  --remotion-studio-focus-color: #555;
+  --remotion-studio-color-picker-checker-color: #888;
+  --remotion-studio-info-blue-border-color: rgba(59, 130, 246, 0.4);
+  --remotion-studio-black-alpha-22: rgba(0, 0, 0, 0.22);
+  --remotion-studio-font-family-error-color: #ff8a8a;
+  --remotion-studio-selected-outline-snap-color: #ff00ff;
+  --remotion-studio-prism-text-color: #d4d4d4;
+  --remotion-studio-prism-selection-background: #264f78;
+  --remotion-studio-prism-background: #1e1e1e;
+  --remotion-studio-prism-inline-color: #db4c69;
+  --remotion-studio-prism-keyword-color: #569cd6;
+  --remotion-studio-prism-variable-color: #9cdcfe;
+  --remotion-studio-prism-comment-color: #6a9955;
+  --remotion-studio-prism-number-color: #b5cea8;
+  --remotion-studio-prism-string-color: #ce9178;
+  --remotion-studio-prism-control-flow-color: #c586c0;
+  --remotion-studio-prism-function-color: #dcdcaa;
+  --remotion-studio-prism-regex-color: #d16969;
+  --remotion-studio-prism-class-name-color: #4ec9b0;
+  --remotion-studio-prism-selector-color: #d7ba7d;
+  --remotion-studio-prism-line-highlight-background: #f7ebc6;
+  --remotion-studio-prism-line-highlight-border-color: #f7d87c;
+}
+`;
+
+export { studioCssVariables };

package/dist/esm/{index-g7k2dvar.mjs → index-t7xnxdf8.mjs}

@@ -1,19 +1,19 @@
 import {
+  ActionTooltip,
   CheckCircleFilled,
   CloudDownloadIcon,
   InlineAction,
+  ModelsIcon,
   Spinner,
   TrashIcon,
   VERTICAL_SCROLLBAR_CLASSNAME,
   ValidationMessage,
   optionsPanel
-} from "./index-cdy8v54v.mjs";
+} from "./index-890dd9b3.mjs";
 import {
   BLUE,
-  BORDER_WHITE_ALPHA_12,
-  LIGHT_TEXT,
-  WHITE
-} from "./index-k426ye99.mjs";
+  LIGHT_TEXT
+} from "./index-wqc43mw0.mjs";
 
 // src/components/ModelManager.tsx
 import { formatBytes } from "@remotion/studio-shared";
@@ -46,15 +46,14 @@ var descriptionStyle = {
 var list = { marginTop: 14 };
 var modelRow = {
   alignItems: "center",
-  borderBottom: BORDER_WHITE_ALPHA_12,
   display: "flex",
   gap: 10,
-  minHeight: 38,
-  padding: "0 10px"
+  minHeight: 38
 };
-var lastModelRow = {
-  ...modelRow,
-  borderBottom: "none"
+var modelIcon = {
+  flexShrink: 0,
+  height: 16,
+  width: 16
 };
 var statusIcon = {
   flexShrink: 0,
@@ -62,7 +61,7 @@ var statusIcon = {
   width: 14
 };
 var modelName = {
-  color: WHITE,
+  color: LIGHT_TEXT,
   flex: 1,
   fontFamily: "monospace",
   fontSize: 13,
@@ -208,15 +207,20 @@ var ModelManager = ({
           style: description === null ? undefined : list,
           role: "list",
           "aria-label": ariaLabel,
-          children: availableModels.map((model, index) => {
+          children: availableModels.map((model) => {
             const cached = cachedModels?.has(model.name) ?? false;
             const processingThisModel = actionState.type !== "idle" && actionState.type !== "error" && actionState.model === model.name;
             const progress = actionState.type === "downloading" && actionState.model === model.name ? actionState.progress : null;
             const modelStatus = processingThisModel ? actionState.type === "removing" ? "Removing…" : `Downloading${progress === null ? "…" : ` ${Math.round(progress * 100)}%`}` : actionState.type === "error" && actionState.model === model.name ? actionState.message : formatBytes(model.webGpuDownloadSize);
             return /* @__PURE__ */ jsxs("div", {
               role: "listitem",
-              style: index === availableModels.length - 1 ? lastModelRow : modelRow,
+              style: modelRow,
               children: [
+                /* @__PURE__ */ jsx(ModelsIcon, {
+                  "aria-hidden": true,
+                  color: LIGHT_TEXT,
+                  style: modelIcon
+                }),
                 /* @__PURE__ */ jsx("span", {
                   style: modelName,
                   children: model.name
@@ -236,18 +240,32 @@ var ModelManager = ({
                     duration: 0.5,
                     size: 14
                   })
-                }) : cached ? /* @__PURE__ */ jsx(InlineAction, {
-                  disabled: actionInProgress,
-                  onClick: () => remove(model.name),
-                  renderAction: renderRemoveIcon,
-                  title: `Remove ${model.name}`,
-                  variant: null
-                }) : /* @__PURE__ */ jsx(InlineAction, {
-                  disabled: cachedModels === null || actionInProgress,
-                  onClick: () => downloadModel(model.name),
-                  renderAction: renderDownloadIcon,
-                  title: `Download ${model.name}`,
-                  variant: null
+                }) : cached ? /* @__PURE__ */ jsx(ActionTooltip, {
+                  label: "Uninstall",
+                  shortcut: null,
+                  delay: 800,
+                  dismissOnClick: true,
+                  children: /* @__PURE__ */ jsx(InlineAction, {
+                    "aria-label": `Remove ${model.name}`,
+                    title: "",
+                    disabled: actionInProgress,
+                    onClick: () => remove(model.name),
+                    renderAction: renderRemoveIcon,
+                    variant: null
+                  })
+                }) : /* @__PURE__ */ jsx(ActionTooltip, {
+                  label: "Install",
+                  shortcut: null,
+                  delay: 800,
+                  dismissOnClick: true,
+                  children: /* @__PURE__ */ jsx(InlineAction, {
+                    "aria-label": `Download ${model.name}`,
+                    title: "",
+                    disabled: cachedModels === null || actionInProgress,
+                    onClick: () => downloadModel(model.name),
+                    renderAction: renderDownloadIcon,
+                    variant: null
+                  })
                 })
               ]
             }, model.name);

package/dist/esm/index-wqc43mw0.mjs

@@ -0,0 +1,158 @@
+// src/helpers/colors.ts
+var BLACK = "var(--remotion-studio-black)";
+var WHITE = "var(--remotion-studio-white)";
+var RED = "var(--remotion-studio-red)";
+var TRANSPARENT = "var(--remotion-studio-transparent)";
+var CURRENT_COLOR = "var(--remotion-studio-current-color)";
+var CURRENT_COLOR_LOWERCASE = "var(--remotion-studio-current-color)";
+var WHITE_HEX = "var(--remotion-studio-white)";
+var BLACK_HEX = "var(--remotion-studio-black)";
+var BACKGROUND = "var(--remotion-studio-background)";
+var BACKGROUND_HEX = "var(--remotion-studio-background)";
+var BACKGROUND__TRANSPARENT = "var(--remotion-studio-background-transparent)";
+var INPUT_BACKGROUND = "var(--remotion-studio-input-background)";
+var LIGHT_COLOR = "var(--remotion-studio-light-color)";
+var SELECTED_BACKGROUND = "var(--remotion-studio-white-alpha-15)";
+var LIGHT_TEXT = "var(--remotion-studio-light-text)";
+var RULER_COLOR = "var(--remotion-studio-ruler-color)";
+var WHITE_ALPHA_05 = "var(--remotion-studio-white-alpha-05)";
+var WHITE_ALPHA_06 = "var(--remotion-studio-white-alpha-06)";
+var WHITE_ALPHA_08 = "var(--remotion-studio-white-alpha-08)";
+var WHITE_ALPHA_10 = "var(--remotion-studio-white-alpha-10)";
+var WHITE_ALPHA_12 = "var(--remotion-studio-white-alpha-12)";
+var WHITE_ALPHA_15 = "var(--remotion-studio-white-alpha-15)";
+var WHITE_ALPHA_20 = "var(--remotion-studio-white-alpha-20)";
+var WHITE_ALPHA_25 = "var(--remotion-studio-white-alpha-25)";
+var WHITE_ALPHA_30 = "var(--remotion-studio-white-alpha-30)";
+var WHITE_ALPHA_35 = "var(--remotion-studio-white-alpha-35)";
+var WHITE_ALPHA_40 = "var(--remotion-studio-white-alpha-40)";
+var WHITE_ALPHA_45 = "var(--remotion-studio-white-alpha-45)";
+var WHITE_ALPHA_50 = "var(--remotion-studio-white-alpha-50)";
+var WHITE_ALPHA_60 = "var(--remotion-studio-white-alpha-60)";
+var WHITE_ALPHA_70 = "var(--remotion-studio-white-alpha-70)";
+var WHITE_ALPHA_72 = "var(--remotion-studio-white-alpha-72)";
+var WHITE_ALPHA_80 = "var(--remotion-studio-white-alpha-80)";
+var WHITE_ALPHA_90 = "var(--remotion-studio-white-alpha-90)";
+var BLACK_ALPHA_10 = "var(--remotion-studio-black-alpha-10)";
+var BLACK_ALPHA_28 = "var(--remotion-studio-black-alpha-28)";
+var BLACK_ALPHA_30 = "var(--remotion-studio-black-alpha-30)";
+var BLACK_ALPHA_40 = "var(--remotion-studio-black-alpha-40)";
+var BLACK_ALPHA_50 = "var(--remotion-studio-black-alpha-50)";
+var BLACK_ALPHA_60 = "var(--remotion-studio-black-alpha-60)";
+var BLACK_ALPHA_80 = "var(--remotion-studio-black-alpha-80)";
+var BLACK_ALPHA_85 = "var(--remotion-studio-black-alpha-85)";
+var BLACK_ALPHA_90 = "var(--remotion-studio-black-alpha-90)";
+var BLACK_OPAQUE = "var(--remotion-studio-black)";
+var SELECTED_HOVER_BACKGROUND = "var(--remotion-studio-white-alpha-25)";
+var FAIL_COLOR = "var(--remotion-studio-fail-color)";
+var WARNING_COLOR = "var(--remotion-studio-warning-color)";
+var BLUE = "var(--remotion-studio-blue)";
+var BLUE_HOVERED = "var(--remotion-studio-blue-hovered)";
+var BLUE_DISABLED = "var(--remotion-studio-blue-disabled)";
+var UNSELECTED_GUIDE = "var(--remotion-studio-unselected-guide)";
+var SELECTED_GUIDE = "var(--remotion-studio-selected-guide)";
+var LINE_COLOR = "var(--remotion-studio-line-color)";
+var TIMELINE_TRACK_SEPARATOR = "var(--remotion-studio-timeline-track-separator)";
+var LIGHT_GRAY = "var(--remotion-studio-light-gray)";
+var NOTIFICATION_BACKGROUND = "var(--remotion-studio-notification-background)";
+var RENDER_STATUS_BACKGROUND = "var(--remotion-studio-render-status-background)";
+var ERROR_CODE_FRAME_BACKGROUND = "var(--remotion-studio-error-code-frame-background)";
+var ERROR_CODE_FRAME_LINE_BACKGROUND = "var(--remotion-studio-error-code-frame-line-background)";
+var ERROR_LINK_COLOR = "var(--remotion-studio-error-link-color)";
+var INFO_BLUE = "var(--remotion-studio-info-blue)";
+var SERVER_DISCONNECTED_BACKGROUND = "var(--remotion-studio-server-disconnected-background)";
+var TIMELINE_BACKGROUND_COLOR = "var(--remotion-studio-timeline-background-color)";
+var TIMELINE_NEGATIVE_START_BACKGROUND_COLOR = "var(--remotion-studio-timeline-negative-start-background-color)";
+var TIMELINE_NEGATIVE_START_BORDER_COLOR = "var(--remotion-studio-timeline-negative-start-border-color)";
+var TIMELINE_SELECTED_BACKGROUND_COLOR = "var(--remotion-studio-timeline-selected-background-color)";
+var TIMELINE_SELECTED_LABEL_BACKGROUND_COLOR = "var(--remotion-studio-timeline-selected-label-background-color)";
+var TIMELINE_BLUE = "var(--remotion-studio-timeline-blue)";
+var TIMELINE_PLAYHEAD_COLOR = "var(--remotion-studio-timeline-playhead-color)";
+var TIMELINE_DROP_BLUE_ALPHA_12 = "var(--remotion-studio-timeline-drop-blue-alpha-12)";
+var TIMELINE_DROP_BLUE_ALPHA_16 = "var(--remotion-studio-timeline-drop-blue-alpha-16)";
+var TIMELINE_DROP_BLUE_ALPHA_75 = "var(--remotion-studio-timeline-drop-blue-alpha-75)";
+var TIMELINE_MARQUEE_BLUE_ALPHA_16 = "var(--remotion-studio-timeline-marquee-blue-alpha-16)";
+var TIMELINE_MARQUEE_BLUE_ALPHA_75 = "var(--remotion-studio-timeline-marquee-blue-alpha-75)";
+var INFO_BLUE_BACKGROUND = "var(--remotion-studio-info-blue-background)";
+var FOCUS_COLOR = "var(--remotion-studio-focus-color)";
+var COLOR_PICKER_CHECKER_COLOR = "var(--remotion-studio-color-picker-checker-color)";
+var INFO_BLUE_BORDER_COLOR = "var(--remotion-studio-info-blue-border-color)";
+var BLACK_ALPHA_22 = "var(--remotion-studio-black-alpha-22)";
+var FONT_FAMILY_ERROR_COLOR = "var(--remotion-studio-font-family-error-color)";
+var SELECTED_OUTLINE_SNAP_COLOR = "var(--remotion-studio-selected-outline-snap-color)";
+var PRISM_TEXT_COLOR = "var(--remotion-studio-prism-text-color)";
+var PRISM_SELECTION_BACKGROUND = "var(--remotion-studio-prism-selection-background)";
+var PRISM_BACKGROUND = "var(--remotion-studio-prism-background)";
+var PRISM_INLINE_COLOR = "var(--remotion-studio-prism-inline-color)";
+var PRISM_KEYWORD_COLOR = "var(--remotion-studio-prism-keyword-color)";
+var PRISM_VARIABLE_COLOR = "var(--remotion-studio-prism-variable-color)";
+var PRISM_COMMENT_COLOR = "var(--remotion-studio-prism-comment-color)";
+var PRISM_NUMBER_COLOR = "var(--remotion-studio-prism-number-color)";
+var PRISM_STRING_COLOR = "var(--remotion-studio-prism-string-color)";
+var PRISM_CONTROL_FLOW_COLOR = "var(--remotion-studio-prism-control-flow-color)";
+var PRISM_FUNCTION_COLOR = "var(--remotion-studio-prism-function-color)";
+var PRISM_REGEX_COLOR = "var(--remotion-studio-prism-regex-color)";
+var PRISM_CLASS_NAME_COLOR = "var(--remotion-studio-prism-class-name-color)";
+var PRISM_SELECTOR_COLOR = "var(--remotion-studio-prism-selector-color)";
+var PRISM_LINE_HIGHLIGHT_BACKGROUND = "var(--remotion-studio-prism-line-highlight-background)";
+var PRISM_LINE_HIGHLIGHT_BORDER_COLOR = "var(--remotion-studio-prism-line-highlight-border-color)";
+var BORDER_BLACK = `1px solid ${BLACK_HEX}`;
+var BORDER_WHITE = `1px solid ${WHITE_HEX}`;
+var BORDER_WHITE_2PX = `2px solid ${WHITE_HEX}`;
+var BORDER_CURRENT_COLOR = `1px solid ${CURRENT_COLOR}`;
+var BORDER_TRANSPARENT_2PX = `2px solid ${TRANSPARENT}`;
+var BORDER_BLACK_ALPHA_50 = `1px solid ${BLACK_ALPHA_50}`;
+var BORDER_BLACK_ALPHA_60 = `1px solid ${BLACK_ALPHA_60}`;
+var BORDER_WHITE_ALPHA_12 = `1px solid ${WHITE_ALPHA_12}`;
+var BORDER_WHITE_ALPHA_20 = `1px solid ${WHITE_ALPHA_20}`;
+var BORDER_INFO_BLUE = `1px solid ${INFO_BLUE_BORDER_COLOR}`;
+var BORDER_TIMELINE_DROP_BLUE = `1px solid ${TIMELINE_DROP_BLUE_ALPHA_75}`;
+var BORDER_TIMELINE_MARQUEE_BLUE = `1px solid ${TIMELINE_MARQUEE_BLUE_ALPHA_75}`;
+var SHADOW_BLACK = `0 0 4px ${BLACK}`;
+var SHADOW_BLACK_ALPHA_50_TOWARDS_BOTTOM = `0 2px 8px ${BLACK_ALPHA_50}`;
+var SHADOW_BLACK_ALPHA_50_TOWARDS_TOP = `0 -2px 8px ${BLACK_ALPHA_50}`;
+var NOTIFICATION_SHADOW = `0 2px 3px ${BLACK_OPAQUE}`;
+var SERVER_DISCONNECTED_SHADOW = `0 2px 4px ${BLACK_ALPHA_40}`;
+var COLOR_PICKER_POPUP_SHADOW = `0 4px 16px ${BLACK_ALPHA_50}`;
+var COLOR_PICKER_HANDLE_SHADOW = `0 0 0 1px ${BLACK_ALPHA_60}`;
+var NOTIFICATION_BORDER = `0.25px solid ${WHITE_ALPHA_10}`;
+var FOCUS_BOX_SHADOW = `inset 1px 1px ${FOCUS_COLOR}, inset -1px -1px ${FOCUS_COLOR}, ` + `inset 1px -1px ${FOCUS_COLOR}, inset -1px 1px ${FOCUS_COLOR}`;
+var CHECKERBOARD_BACKGROUND_IMAGE = `
+     linear-gradient(
+        45deg,
+        ${BLACK_ALPHA_10} 25%,
+        ${TRANSPARENT} 25%
+      ),
+      linear-gradient(135deg, ${BLACK_ALPHA_10} 25%, ${TRANSPARENT} 25%),
+      linear-gradient(45deg, ${TRANSPARENT} 75%, ${BLACK_ALPHA_10} 75%),
+      linear-gradient(135deg, ${TRANSPARENT} 75%, ${BLACK_ALPHA_10} 75%)
+    `;
+var COLOR_PICKER_CHECKER_BACKGROUND_IMAGE = `linear-gradient(45deg, ${COLOR_PICKER_CHECKER_COLOR} 25%, ${TRANSPARENT} 25%), ` + `linear-gradient(-45deg, ${COLOR_PICKER_CHECKER_COLOR} 25%, ${TRANSPARENT} 25%), ` + `linear-gradient(45deg, ${TRANSPARENT} 75%, ${COLOR_PICKER_CHECKER_COLOR} 75%), ` + `linear-gradient(-45deg, ${TRANSPARENT} 75%, ${COLOR_PICKER_CHECKER_COLOR} 75%)`;
+var COLOR_PICKER_CHECKER_BACKGROUND_COLOR = "var(--remotion-studio-color-picker-checker-background-color)";
+var COLOR_PICKER_SATURATION_VALUE_GRADIENT = `linear-gradient(to right, ${WHITE_HEX}, ${TRANSPARENT})`;
+var COLOR_PICKER_SATURATION_BLACK_GRADIENT = `linear-gradient(to top, ${BLACK_HEX}, ${TRANSPARENT})`;
+var COLOR_PICKER_ALPHA_TRANSPARENT = "var(--remotion-studio-transparent)";
+var COLOR_PICKER_HUE_GRADIENT = "var(--remotion-studio-color-picker-hue-gradient)";
+var ERROR_MESSAGE_MASK_IMAGE = `linear-gradient(to bottom, ${WHITE} 60%, ${TRANSPARENT})`;
+var SELECTED_OUTLINE_DROP_SHADOW = `drop-shadow(0 0 1px ${WHITE_ALPHA_20})`;
+var SELECTED_OUTLINE_UV_DROP_SHADOW = `drop-shadow(0 1px 2px ${BLACK_ALPHA_28})`;
+var LOOPED_INDICATOR_DROP_SHADOW = `drop-shadow(0 0 2px ${BLACK_ALPHA_90}) ` + `drop-shadow(0 1px 2px ${BLACK_ALPHA_80})`;
+var TIMELINE_AUDIO_GRADIENT = "var(--remotion-studio-timeline-audio-gradient)";
+var TIMELINE_VIDEO_GRADIENT = "var(--remotion-studio-timeline-video-gradient)";
+var getBackgroundFromHoverState = ({
+  selected,
+  hovered
+}) => {
+  if (selected) {
+    if (hovered) {
+      return SELECTED_HOVER_BACKGROUND;
+    }
+    return SELECTED_BACKGROUND;
+  }
+  if (hovered) {
+    return WHITE_ALPHA_06;
+  }
+  return TRANSPARENT;
+};
+
+export { BLACK, WHITE, RED, TRANSPARENT, CURRENT_COLOR, CURRENT_COLOR_LOWERCASE, WHITE_HEX, BLACK_HEX, BACKGROUND, BACKGROUND_HEX, BACKGROUND__TRANSPARENT, INPUT_BACKGROUND, LIGHT_COLOR, SELECTED_BACKGROUND, LIGHT_TEXT, RULER_COLOR, WHITE_ALPHA_05, WHITE_ALPHA_06, WHITE_ALPHA_08, WHITE_ALPHA_10, WHITE_ALPHA_12, WHITE_ALPHA_15, WHITE_ALPHA_20, WHITE_ALPHA_25, WHITE_ALPHA_30, WHITE_ALPHA_35, WHITE_ALPHA_40, WHITE_ALPHA_45, WHITE_ALPHA_50, WHITE_ALPHA_60, WHITE_ALPHA_70, WHITE_ALPHA_72, WHITE_ALPHA_80, WHITE_ALPHA_90, BLACK_ALPHA_30, BLACK_ALPHA_40, BLACK_ALPHA_50, BLACK_ALPHA_60, BLACK_ALPHA_85, FAIL_COLOR, WARNING_COLOR, BLUE, BLUE_HOVERED, BLUE_DISABLED, UNSELECTED_GUIDE, SELECTED_GUIDE, LINE_COLOR, TIMELINE_TRACK_SEPARATOR, LIGHT_GRAY, NOTIFICATION_BACKGROUND, RENDER_STATUS_BACKGROUND, ERROR_CODE_FRAME_BACKGROUND, ERROR_CODE_FRAME_LINE_BACKGROUND, ERROR_LINK_COLOR, INFO_BLUE, SERVER_DISCONNECTED_BACKGROUND, TIMELINE_BACKGROUND_COLOR, TIMELINE_NEGATIVE_START_BACKGROUND_COLOR, TIMELINE_NEGATIVE_START_BORDER_COLOR, TIMELINE_SELECTED_BACKGROUND_COLOR, TIMELINE_SELECTED_LABEL_BACKGROUND_COLOR, TIMELINE_BLUE, TIMELINE_PLAYHEAD_COLOR, TIMELINE_DROP_BLUE_ALPHA_12, TIMELINE_DROP_BLUE_ALPHA_16, TIMELINE_MARQUEE_BLUE_ALPHA_16, INFO_BLUE_BACKGROUND, BLACK_ALPHA_22, FONT_FAMILY_ERROR_COLOR, SELECTED_OUTLINE_SNAP_COLOR, PRISM_TEXT_COLOR, PRISM_SELECTION_BACKGROUND, PRISM_BACKGROUND, PRISM_INLINE_COLOR, PRISM_KEYWORD_COLOR, PRISM_VARIABLE_COLOR, PRISM_COMMENT_COLOR, PRISM_NUMBER_COLOR, PRISM_STRING_COLOR, PRISM_CONTROL_FLOW_COLOR, PRISM_FUNCTION_COLOR, PRISM_REGEX_COLOR, PRISM_CLASS_NAME_COLOR, PRISM_SELECTOR_COLOR, PRISM_LINE_HIGHLIGHT_BACKGROUND, PRISM_LINE_HIGHLIGHT_BORDER_COLOR, BORDER_BLACK, BORDER_WHITE, BORDER_WHITE_2PX, BORDER_CURRENT_COLOR, BORDER_TRANSPARENT_2PX, BORDER_BLACK_ALPHA_50, BORDER_BLACK_ALPHA_60, BORDER_WHITE_ALPHA_12, BORDER_WHITE_ALPHA_20, BORDER_INFO_BLUE, BORDER_TIMELINE_DROP_BLUE, BORDER_TIMELINE_MARQUEE_BLUE, SHADOW_BLACK, SHADOW_BLACK_ALPHA_50_TOWARDS_BOTTOM, SHADOW_BLACK_ALPHA_50_TOWARDS_TOP, NOTIFICATION_SHADOW, SERVER_DISCONNECTED_SHADOW, COLOR_PICKER_POPUP_SHADOW, COLOR_PICKER_HANDLE_SHADOW, NOTIFICATION_BORDER, FOCUS_BOX_SHADOW, CHECKERBOARD_BACKGROUND_IMAGE, COLOR_PICKER_CHECKER_BACKGROUND_IMAGE, COLOR_PICKER_CHECKER_BACKGROUND_COLOR, COLOR_PICKER_SATURATION_VALUE_GRADIENT, COLOR_PICKER_SATURATION_BLACK_GRADIENT, COLOR_PICKER_ALPHA_TRANSPARENT, COLOR_PICKER_HUE_GRADIENT, ERROR_MESSAGE_MASK_IMAGE, SELECTED_OUTLINE_DROP_SHADOW, SELECTED_OUTLINE_UV_DROP_SHADOW, LOOPED_INDICATOR_DROP_SHADOW, TIMELINE_AUDIO_GRADIENT, TIMELINE_VIDEO_GRADIENT, getBackgroundFromHoverState };