@remotion/studio 4.0.527 → 4.0.528

package/dist/esm/{index-9x6e1dq0.mjs → index-hqxc6tzp.mjs}

@@ -75,12 +75,16 @@ var RenderQueueContext = React.createContext({
   updateCaptionJobProgress: noop,
   markCaptionJobDone: noop,
   markCaptionJobFailed: noop,
+  markCaptionJobCancelled: noop,
+  markCaptionJobSaving: noop,
   removeCaptionJob: noop,
   setProcessCaptionJobCallback: noop,
   addVideoMattingJob: noopString,
   updateVideoMattingJobProgress: noop,
   markVideoMattingJobDone: noop,
   markVideoMattingJobFailed: noop,
+  markVideoMattingJobCancelled: noop,
+  markVideoMattingJobSaving: noop,
   removeVideoMattingJob: noop,
   setProcessVideoMattingJobCallback: noop,
   getAbortController: () => new AbortController,
@@ -94,7 +98,7 @@ var RenderQueueContextProvider = ({ children }) => {
   const [clientJobs, setClientJobs] = useState(restorePersistedClientRenders);
   const [captionJobs, setCaptionJobs] = useState([]);
   const [videoMattingJobs, setVideoMattingJobs] = useState([]);
-  const hasActiveLocalJob = clientJobs.some((job) => job.status === "idle" || job.status === "running" || job.status === "saving") || captionJobs.some((job) => job.status === "idle" || job.status === "running") || videoMattingJobs.some((job) => job.status === "idle" || job.status === "running");
+  const hasActiveLocalJob = clientJobs.some((job) => job.status === "idle" || job.status === "running" || job.status === "saving") || captionJobs.some((job) => job.status === "idle" || job.status === "running" || job.status === "saving") || videoMattingJobs.some((job) => job.status === "idle" || job.status === "running" || job.status === "saving");
   const [currentlyProcessing, setCurrentlyProcessing] = useState(null);
   const lastLocalJobStartedAt = useRef(clientJobs.reduce((latest, job) => Math.max(latest, job.startedAt), 0));
   const processJobCallbackRef = useRef(null);
@@ -151,7 +155,7 @@ var RenderQueueContextProvider = ({ children }) => {
         status: "running",
         progress: {
           detail: null,
-          message: "Starting video matting...",
+          message: "outName" in job ? "Starting background removal..." : "Starting video matting...",
           value: 0
         }
       } : job));
@@ -267,13 +271,15 @@ var RenderQueueContextProvider = ({ children }) => {
     return id;
   }, [getLocalJobStartedAt]);
   const updateCaptionJobProgress = useCallback((jobId, progress) => {
-    setCaptionJobs((prev) => prev.map((job) => job.id === jobId ? { ...job, status: "running", progress } : job));
+    setCaptionJobs((prev) => prev.map((job) => job.id === jobId && (job.status === "running" || job.status === "saving") ? { ...job, progress } : job));
   }, []);
   const markCaptionJobDone = useCallback((jobId, captionCount) => {
+    deleteAbortController(jobId);
     setCaptionJobs((prev) => prev.map((job) => job.id === jobId ? { ...job, status: "done", captionCount } : job));
     setCurrentlyProcessing((current) => current === jobId ? null : current);
   }, []);
   const markCaptionJobFailed = useCallback((jobId, error) => {
+    deleteAbortController(jobId);
     setCaptionJobs((prev) => prev.map((job) => job.id === jobId ? {
       ...job,
       status: "failed",
@@ -281,12 +287,21 @@ var RenderQueueContextProvider = ({ children }) => {
     } : job));
     setCurrentlyProcessing((current) => current === jobId ? null : current);
   }, []);
+  const markCaptionJobCancelled = useCallback((jobId) => {
+    deleteAbortController(jobId);
+    setCaptionJobs((prev) => prev.map((job) => job.id === jobId ? { ...job, status: "cancelled" } : job));
+    setCurrentlyProcessing((current) => current === jobId ? null : current);
+  }, []);
+  const markCaptionJobSaving = useCallback((jobId) => {
+    setCaptionJobs((prev) => prev.map((job) => job.id === jobId && job.status === "running" ? { ...job, status: "saving" } : job));
+  }, []);
   const removeCaptionJob = useCallback((jobId) => {
     setCaptionJobs((prev) => {
       const jobToRemove = prev.find((job) => job.id === jobId);
-      if (jobToRemove?.status === "running") {
+      if (jobToRemove?.status === "running" || jobToRemove?.status === "saving") {
         return prev;
       }
+      deleteAbortController(jobId);
       return prev.filter((job) => job.id !== jobId);
     });
   }, []);
@@ -309,13 +324,15 @@ var RenderQueueContextProvider = ({ children }) => {
     return id;
   }, [getLocalJobStartedAt]);
   const updateVideoMattingJobProgress = useCallback((jobId, progress) => {
-    setVideoMattingJobs((prev) => prev.map((job) => job.id === jobId ? { ...job, status: "running", progress } : job));
+    setVideoMattingJobs((prev) => prev.map((job) => job.id === jobId && (job.status === "running" || job.status === "saving") ? { ...job, progress } : job));
   }, []);
   const markVideoMattingJobDone = useCallback((jobId) => {
+    deleteAbortController(jobId);
     setVideoMattingJobs((prev) => prev.map((job) => job.id === jobId ? { ...job, status: "done" } : job));
     setCurrentlyProcessing((current) => current === jobId ? null : current);
   }, []);
   const markVideoMattingJobFailed = useCallback((jobId, error) => {
+    deleteAbortController(jobId);
     setVideoMattingJobs((prev) => prev.map((job) => job.id === jobId ? {
       ...job,
       status: "failed",
@@ -323,12 +340,21 @@ var RenderQueueContextProvider = ({ children }) => {
     } : job));
     setCurrentlyProcessing((current) => current === jobId ? null : current);
   }, []);
+  const markVideoMattingJobCancelled = useCallback((jobId) => {
+    deleteAbortController(jobId);
+    setVideoMattingJobs((prev) => prev.map((job) => job.id === jobId ? { ...job, status: "cancelled" } : job));
+    setCurrentlyProcessing((current) => current === jobId ? null : current);
+  }, []);
+  const markVideoMattingJobSaving = useCallback((jobId) => {
+    setVideoMattingJobs((prev) => prev.map((job) => job.id === jobId && job.status === "running" ? { ...job, status: "saving" } : job));
+  }, []);
   const removeVideoMattingJob = useCallback((jobId) => {
     setVideoMattingJobs((prev) => {
       const jobToRemove = prev.find((job) => job.id === jobId);
-      if (jobToRemove?.status === "running") {
+      if (jobToRemove?.status === "running" || jobToRemove?.status === "saving") {
         return prev;
       }
+      deleteAbortController(jobId);
       return prev.filter((job) => job.id !== jobId);
     });
   }, []);
@@ -380,12 +406,16 @@ var RenderQueueContextProvider = ({ children }) => {
       updateCaptionJobProgress,
       markCaptionJobDone,
       markCaptionJobFailed,
+      markCaptionJobCancelled,
+      markCaptionJobSaving,
       removeCaptionJob,
       setProcessCaptionJobCallback,
       addVideoMattingJob,
       updateVideoMattingJobProgress,
       markVideoMattingJobDone,
       markVideoMattingJobFailed,
+      markVideoMattingJobCancelled,
+      markVideoMattingJobSaving,
       removeVideoMattingJob,
       setProcessVideoMattingJobCallback,
       getAbortController,
@@ -410,12 +440,16 @@ var RenderQueueContextProvider = ({ children }) => {
     updateCaptionJobProgress,
     markCaptionJobDone,
     markCaptionJobFailed,
+    markCaptionJobCancelled,
+    markCaptionJobSaving,
     removeCaptionJob,
     setProcessCaptionJobCallback,
     addVideoMattingJob,
     updateVideoMattingJobProgress,
     markVideoMattingJobDone,
     markVideoMattingJobFailed,
+    markVideoMattingJobCancelled,
+    markVideoMattingJobSaving,
     removeVideoMattingJob,
     setProcessVideoMattingJobCallback
   ]);

package/dist/esm/{index-9xxg6218.mjs → index-qve7mdfp.mjs}

@@ -644,4 +644,22 @@ var useZIndex = () => {
   }), [context.currentIndex, highestContext.highestIndex, isHighestContext]);
 };
 
-export { isPointerSessionRelease, startCapturedPointerSession, startDeferredCapturedPointerSession, isMac, defaultKeyboardShortcuts, keyboardShortcutGroups, askAIKeyboardShortcutGroup, getKeyboardShortcutsForAction, keyboardShortcutsOverlap, formatKeyboardShortcut, getKeyboardShortcutLabel, getKeyboardShortcutAriaKeyShortcuts, shortcutFromKeyboardEvent, KeybindingContextProvider, areKeyboardShortcutsDisabled, useKeybinding, HighestZIndexProvider, getClickLock, setClickLock, HigherZIndex, useZIndex };
+// src/components/Menu/portals.ts
+var portalIds = [
+  "menuportal-0",
+  "menuportal-1",
+  "menuportal-2",
+  "menuportal-3",
+  "menuportal-4",
+  "menuportal-5"
+];
+var portals = typeof document === "undefined" ? [] : portalIds.map((id) => document.getElementById(id));
+var getPortal = (i) => {
+  const portal = portals[i];
+  if (!portal) {
+    throw new Error(`Expected menu portal ${i} to exist`);
+  }
+  return portal;
+};
+
+export { isPointerSessionRelease, startCapturedPointerSession, startDeferredCapturedPointerSession, isMac, defaultKeyboardShortcuts, keyboardShortcutGroups, askAIKeyboardShortcutGroup, getKeyboardShortcutsForAction, keyboardShortcutsOverlap, formatKeyboardShortcut, getKeyboardShortcutLabel, getKeyboardShortcutAriaKeyShortcuts, shortcutFromKeyboardEvent, KeybindingContextProvider, areKeyboardShortcutsDisabled, useKeybinding, HighestZIndexProvider, getClickLock, setClickLock, HigherZIndex, useZIndex, portals, getPortal };

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

@@ -1,16 +1,14 @@
 import {
-  callApi
-} from "./index-r1gr3j3a.mjs";
-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

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-r0ejh5sy.mjs → index-t7xnxdf8.mjs}

@@ -1,19 +1,19 @@
 import {
+  ActionTooltip,
   CheckCircleFilled,
   CloudDownloadIcon,
   InlineAction,
+  ModelsIcon,
   Spinner,
   TrashIcon,
   VERTICAL_SCROLLBAR_CLASSNAME,
   ValidationMessage,
   optionsPanel
-} from "./index-5t2dwxsk.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 };