@remotion/studio 4.0.485 → 4.0.487

package/dist/components/selected-outline-snap.js

@@ -0,0 +1,158 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.findSelectedOutlineSnap = exports.getSelectedOutlineSnapTargets = exports.selectedOutlineSnapIndicatorColor = exports.selectedOutlineSnapThresholdPx = void 0;
+exports.selectedOutlineSnapThresholdPx = 10;
+exports.selectedOutlineSnapIndicatorColor = '#ff00ff';
+const EPSILON = 0.000001;
+const getSelectedOutlineSnapTargets = ({ compositionHeight, compositionWidth, guides, }) => {
+    return [
+        { axis: 'x', position: 0, type: 'canvas-left' },
+        {
+            axis: 'x',
+            position: compositionWidth / 2,
+            type: 'canvas-horizontal-center',
+        },
+        { axis: 'x', position: compositionWidth, type: 'canvas-right' },
+        { axis: 'y', position: 0, type: 'canvas-top' },
+        {
+            axis: 'y',
+            position: compositionHeight / 2,
+            type: 'canvas-vertical-center',
+        },
+        { axis: 'y', position: compositionHeight, type: 'canvas-bottom' },
+        ...guides.flatMap((guide) => {
+            if (!guide.show) {
+                return [];
+            }
+            return [
+                guide.orientation === 'vertical'
+                    ? {
+                        axis: 'x',
+                        position: guide.position,
+                        type: 'guide-vertical',
+                    }
+                    : {
+                        axis: 'y',
+                        position: guide.position,
+                        type: 'guide-horizontal',
+                    },
+            ];
+        }),
+    ];
+};
+exports.getSelectedOutlineSnapTargets = getSelectedOutlineSnapTargets;
+const getSelectedOutlineBounds = ({ deltaX, deltaY, outlines, scale, }) => {
+    if (outlines.length === 0) {
+        return null;
+    }
+    const points = outlines.flatMap((outline) => outline.points);
+    const left = Math.min(...points.map((point) => point.x)) / scale + deltaX;
+    const right = Math.max(...points.map((point) => point.x)) / scale + deltaX;
+    const top = Math.min(...points.map((point) => point.y)) / scale + deltaY;
+    const bottom = Math.max(...points.map((point) => point.y)) / scale + deltaY;
+    return {
+        left,
+        right,
+        top,
+        bottom,
+        centerX: left + (right - left) / 2,
+        centerY: top + (bottom - top) / 2,
+    };
+};
+const canSnapEdgeToTarget = (edge, target) => {
+    if (target.type === 'canvas-horizontal-center') {
+        return edge === 'center-x';
+    }
+    if (target.type === 'canvas-vertical-center') {
+        return edge === 'center-y';
+    }
+    if (target.type === 'canvas-left' || target.type === 'canvas-right') {
+        return edge === 'left' || edge === 'right';
+    }
+    if (target.type === 'guide-vertical') {
+        return edge === 'left' || edge === 'right' || edge === 'center-x';
+    }
+    if (target.type === 'canvas-top' || target.type === 'canvas-bottom') {
+        return edge === 'top' || edge === 'bottom';
+    }
+    return edge === 'top' || edge === 'bottom' || edge === 'center-y';
+};
+const findBestSnapForAxis = ({ edges, targets, threshold, }) => {
+    var _a;
+    let bestDistance = Infinity;
+    let bestSnaps = [];
+    for (const target of targets) {
+        for (const edge of edges) {
+            if (!canSnapEdgeToTarget(edge.edge, target)) {
+                continue;
+            }
+            const distance = Math.abs(edge.position - target.position);
+            if (distance > threshold || distance > bestDistance + EPSILON) {
+                continue;
+            }
+            if (distance < bestDistance - EPSILON) {
+                bestSnaps = [];
+                bestDistance = distance;
+            }
+            bestSnaps.push({
+                offset: target.position - edge.position,
+                snapPoint: {
+                    distance,
+                    edge: edge.edge,
+                    target,
+                },
+            });
+        }
+    }
+    if (bestSnaps.length > 1) {
+        const centerSnap = bestSnaps.find((snap) => snap.snapPoint.target.type === 'canvas-horizontal-center' ||
+            snap.snapPoint.target.type === 'canvas-vertical-center');
+        if (centerSnap) {
+            return centerSnap;
+        }
+    }
+    return (_a = bestSnaps[0]) !== null && _a !== void 0 ? _a : null;
+};
+const findSelectedOutlineSnap = ({ allowX, allowY, deltaX, deltaY, outlines, scale, targets, }) => {
+    var _a, _b, _c, _d;
+    const bounds = getSelectedOutlineBounds({ deltaX, deltaY, outlines, scale });
+    if (bounds === null) {
+        return {
+            activeSnapPoints: [],
+            snapOffsetX: null,
+            snapOffsetY: null,
+        };
+    }
+    const threshold = exports.selectedOutlineSnapThresholdPx / scale;
+    const snapX = allowX
+        ? findBestSnapForAxis({
+            edges: [
+                { edge: 'left', position: bounds.left },
+                { edge: 'center-x', position: bounds.centerX },
+                { edge: 'right', position: bounds.right },
+            ],
+            targets: targets.filter((target) => target.axis === 'x'),
+            threshold,
+        })
+        : null;
+    const snapY = allowY
+        ? findBestSnapForAxis({
+            edges: [
+                { edge: 'top', position: bounds.top },
+                { edge: 'center-y', position: bounds.centerY },
+                { edge: 'bottom', position: bounds.bottom },
+            ],
+            targets: targets.filter((target) => target.axis === 'y'),
+            threshold,
+        })
+        : null;
+    return {
+        activeSnapPoints: [
+            (_a = snapX === null || snapX === void 0 ? void 0 : snapX.snapPoint) !== null && _a !== void 0 ? _a : null,
+            (_b = snapY === null || snapY === void 0 ? void 0 : snapY.snapPoint) !== null && _b !== void 0 ? _b : null,
+        ].filter((snapPoint) => snapPoint !== null),
+        snapOffsetX: (_c = snapX === null || snapX === void 0 ? void 0 : snapX.offset) !== null && _c !== void 0 ? _c : null,
+        snapOffsetY: (_d = snapY === null || snapY === void 0 ? void 0 : snapY.offset) !== null && _d !== void 0 ? _d : null,
+    };
+};
+exports.findSelectedOutlineSnap = findSelectedOutlineSnap;

package/dist/error-overlay/remotion-overlay/CalculateMetadataErrorExplainer.js

@@ -11,9 +11,9 @@ const CalculateMetadataErrorExplainer = () => {
 exports.CalculateMetadataErrorExplainer = CalculateMetadataErrorExplainer;
 const style = {
     borderRadius: 3,
-    color: 'white',
+    color: colors_1.WHITE,
     padding: 12,
-    backgroundColor: colors_1.BORDER_COLOR,
+    backgroundColor: colors_1.BLACK_HEX,
     fontSize: 14,
     fontFamily: 'sans-serif',
 };

package/dist/error-overlay/remotion-overlay/CodeFrame.js

@@ -10,7 +10,7 @@ const container = {
     width: '100%',
 };
 const frame = {
-    backgroundColor: '#070707',
+    backgroundColor: colors_1.ERROR_CODE_FRAME_BACKGROUND,
     marginBottom: 20,
     overflowY: 'auto',
 };
@@ -32,14 +32,16 @@ const CodeFrame = ({ source, lineNumberWidth }) => {
             return (jsx_runtime_1.jsxs("div", { style: container, children: [
                     jsx_runtime_1.jsx("div", { style: {
                             ...lineNumber,
-                            backgroundColor: s.highlight ? 'white' : '#121212',
-                            color: s.highlight ? 'black' : 'rgba(255, 255, 255, 0.6)',
+                            backgroundColor: s.highlight
+                                ? colors_1.WHITE
+                                : colors_1.ERROR_CODE_FRAME_LINE_BACKGROUND,
+                            color: s.highlight ? colors_1.BLACK : colors_1.WHITE_ALPHA_60,
                         }, children: String(s.lineNumber).padStart(lineNumberWidth, ' ') }), jsx_runtime_1.jsx("div", { style: {
                             fontFamily: 'monospace',
                             whiteSpace: 'pre',
                             tabSize: 2,
-                            color: s.highlight ? 'white' : 'rgba(255, 255, 255, 0.6)',
-                            backgroundColor: s.highlight ? colors_1.BLUE : 'transparent',
+                            color: s.highlight ? colors_1.WHITE : colors_1.WHITE_ALPHA_60,
+                            backgroundColor: s.highlight ? colors_1.BLUE : colors_1.TRANSPARENT,
                             lineHeight: 1.7,
                             paddingRight: 12,
                             paddingLeft: 12,

package/dist/error-overlay/remotion-overlay/CompositionIdListItem.js

@@ -12,7 +12,7 @@ exports.listItemStyle = {
     cursor: 'pointer',
     borderRadius: 4,
     lineHeight: 1.4,
-    color: colors_1.TEXT_COLOR,
+    color: colors_1.WHITE_HEX,
     fontFamily: 'inherit',
     fontSize: 14,
 };
@@ -20,7 +20,7 @@ exports.listItemActiveStyle = {
     backgroundColor: colors_1.SELECTED_BACKGROUND,
 };
 exports.listItemHoverStyle = {
-    backgroundColor: colors_1.CLEAR_HOVER,
+    backgroundColor: colors_1.WHITE_ALPHA_06,
 };
 const CompositionIdListItem = ({ id, isActive, onSelect }) => {
     const [hover, setHover] = react_1.default.useState(false);

package/dist/error-overlay/remotion-overlay/DismissButton.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DismissButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
 const url_state_1 = require("../../helpers/url-state");
 const size = {
     height: 20,
@@ -11,7 +12,7 @@ const size = {
 const style = {
     appearance: 'none',
     WebkitAppearance: 'none',
-    backgroundColor: 'transparent',
+    backgroundColor: colors_1.TRANSPARENT,
     border: 'none',
     cursor: 'pointer',
 };
@@ -19,6 +20,6 @@ const DismissButton = () => {
     const dismiss = (0, react_1.useCallback)(() => {
         (0, url_state_1.clearUrl)();
     }, []);
-    return (jsx_runtime_1.jsx("button", { type: "button", style: style, onClick: dismiss, children: jsx_runtime_1.jsx("svg", { focusable: "false", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 352 512", style: size, children: jsx_runtime_1.jsx("path", { fill: "white", d: "M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z" }) }) }));
+    return (jsx_runtime_1.jsx("button", { type: "button", style: style, onClick: dismiss, children: jsx_runtime_1.jsx("svg", { focusable: "false", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 352 512", style: size, children: jsx_runtime_1.jsx("path", { fill: colors_1.WHITE, d: "M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z" }) }) }));
 };
 exports.DismissButton = DismissButton;

package/dist/error-overlay/remotion-overlay/ErrorLoader.js

@@ -4,6 +4,7 @@ exports.ErrorLoader = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
 const error_origin_1 = require("../error-origin");
 const listen_to_runtime_errors_1 = require("../react-overlay/listen-to-runtime-errors");
 const ErrorDisplay_1 = require("./ErrorDisplay");
@@ -20,12 +21,12 @@ const container = {
     paddingTop: '5vh',
 };
 const errorWhileErrorStyle = {
-    color: 'white',
+    color: colors_1.WHITE,
     lineHeight: 1.5,
     whiteSpace: 'pre',
 };
 const errorWhileSymbolicatingStyle = {
-    color: 'white',
+    color: colors_1.WHITE,
     lineHeight: 1.5,
     marginTop: 24,
     opacity: 0.7,

package/dist/error-overlay/remotion-overlay/ErrorMessage.js

@@ -10,7 +10,7 @@ const fontSize = 24;
 const lineHeight = 1.5;
 const maxLines = 2;
 const buttonSize = 32;
-const maskImage = 'linear-gradient(to bottom, white 60%, transparent)';
+const maskImage = colors_1.ERROR_MESSAGE_MASK_IMAGE;
 const container = {
     position: 'relative',
     marginBottom: 15,
@@ -27,7 +27,7 @@ const moreLine = {
     display: 'flex',
     justifyContent: 'center',
     position: 'absolute',
-    border: `1px solid ${colors_1.INPUT_BORDER_COLOR_HOVERED}`,
+    border: `1px solid ${colors_1.WHITE_ALPHA_05}`,
     height: 0,
     marginTop: 4,
 };
@@ -36,13 +36,13 @@ const moreButton = {
     width: buttonSize,
     borderRadius: buttonSize / 2,
     backgroundColor: colors_1.INPUT_BACKGROUND,
-    border: `1px solid ${colors_1.INPUT_BORDER_COLOR_UNHOVERED}`,
+    border: `1px solid ${colors_1.BLACK_ALPHA_60}`,
     marginTop: -buttonSize / 2,
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
     cursor: 'pointer',
-    color: 'white',
+    color: colors_1.WHITE,
 };
 const ErrorMessage = ({ message }) => {
     const [expanded, setExpanded] = (0, react_1.useState)(false);

package/dist/error-overlay/remotion-overlay/HelpLink.js

@@ -9,7 +9,7 @@ const use_keybinding_1 = require("../../helpers/use-keybinding");
 const ShortcutHint_1 = require("./ShortcutHint");
 const buttonStyle = {
     backgroundColor: colors_1.BLUE,
-    color: 'white',
+    color: colors_1.WHITE,
 };
 const HelpLink = ({ canHaveKeyboardShortcuts, link }) => {
     const openLink = (0, react_1.useCallback)(() => {

package/dist/error-overlay/remotion-overlay/MediaPlaybackErrorExplainer.js

@@ -6,22 +6,22 @@ const react_1 = require("react");
 const colors_1 = require("../../helpers/colors");
 const container = {
     borderRadius: 3,
-    color: 'white',
+    color: colors_1.WHITE,
     padding: 12,
-    backgroundColor: colors_1.BORDER_COLOR,
+    backgroundColor: colors_1.BLACK_HEX,
     fontSize: 14,
     fontFamily: 'sans-serif',
     lineHeight: 1.5,
 };
 const codeStyle = {
-    backgroundColor: 'rgba(255,255,255,0.1)',
+    backgroundColor: colors_1.WHITE_ALPHA_10,
     padding: '2px 5px',
     borderRadius: 3,
     fontFamily: 'monospace',
     fontSize: 13,
 };
 const linkStyle = {
-    color: '#58a6ff',
+    color: colors_1.ERROR_LINK_COLOR,
 };
 const MediaPlaybackErrorExplainer = ({ src }) => {
     const [result, setResult] = (0, react_1.useState)({ type: 'loading' });

package/dist/error-overlay/remotion-overlay/Overlay.js

@@ -5,13 +5,14 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const MenuToolbar_1 = require("../../components/MenuToolbar");
+const colors_1 = require("../../helpers/colors");
 const keybindings_1 = require("../../state/keybindings");
 const ErrorLoader_1 = require("./ErrorLoader");
 exports.setErrorsRef = (0, react_1.createRef)();
 const errorsAreTheSame = (first, second) => {
     return first.stack === second.stack && first.message === second.message;
 };
-const BACKGROUND_COLOR = '#1f2428';
+const BACKGROUND_COLOR = colors_1.BACKGROUND_HEX;
 const Overlay = () => {
     const [errors, setErrors] = (0, react_1.useState)({ type: 'clear' });
     const addError = (0, react_1.useCallback)((err) => {
@@ -43,7 +44,7 @@ const Overlay = () => {
     return (jsx_runtime_1.jsx(keybindings_1.KeybindingContextProvider, { children: jsx_runtime_1.jsx(remotion_1.AbsoluteFill, { style: {
                 backgroundColor: BACKGROUND_COLOR,
                 overflow: 'auto',
-                color: 'white',
+                color: colors_1.WHITE,
                 top: MenuToolbar_1.MENU_TOOLBAR_HEIGHT,
                 height: `calc(100% - ${MenuToolbar_1.MENU_TOOLBAR_HEIGHT}px)`,
             }, children: errors.errors.map((err, i) => {

package/dist/error-overlay/remotion-overlay/StackFrame.js

@@ -4,12 +4,13 @@ exports.StackElement = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const Button_1 = require("../../components/Button");
+const colors_1 = require("../../helpers/colors");
 const open_in_editor_1 = require("../../helpers/open-in-editor");
 const carets_1 = require("./carets");
 const CodeFrame_1 = require("./CodeFrame");
 const format_location_1 = require("./format-location");
 const location = {
-    color: 'rgba(255, 255, 255, 0.6)',
+    color: colors_1.WHITE_ALPHA_60,
     fontFamily: 'monospace',
     fontSize: 14,
 };
@@ -21,8 +22,8 @@ const header = {
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'center',
-    borderBottom: '1px solid rgb(66, 144, 245)',
-    backgroundColor: 'black',
+    borderBottom: colors_1.BORDER_STACK_FRAME_BLUE,
+    backgroundColor: colors_1.BLACK,
 };
 const left = {
     paddingRight: 14,

package/dist/error-overlay/remotion-overlay/Symbolicating.js

@@ -2,8 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Symbolicating = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../../helpers/colors");
 const Symbolicating = (props) => {
-    return (jsx_runtime_1.jsxs("svg", { id: "loading", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32", width: "16", height: "16", fill: "white", ...props, children: [
+    return (jsx_runtime_1.jsxs("svg", { id: "loading", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32", width: "16", height: "16", fill: colors_1.WHITE, ...props, children: [
             jsx_runtime_1.jsx("path", { opacity: ".1", d: "M14 0 H18 V8 H14 z", transform: "rotate(0 16 16)", children: jsx_runtime_1.jsx("animate", { attributeName: "opacity", from: "1", to: ".1", dur: "1s", repeatCount: "indefinite", begin: "0" }) }), jsx_runtime_1.jsx("path", { opacity: ".1", d: "M14 0 H18 V8 H14 z", transform: "rotate(45 16 16)", children: jsx_runtime_1.jsx("animate", { attributeName: "opacity", from: "1", to: ".1", dur: "1s", repeatCount: "indefinite", begin: "0.125s" }) }), jsx_runtime_1.jsx("path", { opacity: ".1", d: "M14 0 H18 V8 H14 z", transform: "rotate(90 16 16)", children: jsx_runtime_1.jsx("animate", { attributeName: "opacity", from: "1", to: ".1", dur: "1s", repeatCount: "indefinite", begin: "0.25s" }) }), jsx_runtime_1.jsx("path", { opacity: ".1", d: "M14 0 H18 V8 H14 z", transform: "rotate(135 16 16)", children: jsx_runtime_1.jsx("animate", { attributeName: "opacity", from: "1", to: ".1", dur: "1s", repeatCount: "indefinite", begin: "0.375s" }) }), jsx_runtime_1.jsx("path", { opacity: ".1", d: "M14 0 H18 V8 H14 z", transform: "rotate(180 16 16)", children: jsx_runtime_1.jsx("animate", { attributeName: "opacity", from: "1", to: ".1", dur: "1s", repeatCount: "indefinite", begin: "0.5s" }) }), jsx_runtime_1.jsx("path", { opacity: ".1", d: "M14 0 H18 V8 H14 z", transform: "rotate(225 16 16)", children: jsx_runtime_1.jsx("animate", { attributeName: "opacity", from: "1", to: ".1", dur: "1s", repeatCount: "indefinite", begin: "0.675s" }) }), jsx_runtime_1.jsx("path", { opacity: ".1", d: "M14 0 H18 V8 H14 z", transform: "rotate(270 16 16)", children: jsx_runtime_1.jsx("animate", { attributeName: "opacity", from: "1", to: ".1", dur: "1s", repeatCount: "indefinite", begin: "0.75s" }) }), jsx_runtime_1.jsx("path", { opacity: ".1", d: "M14 0 H18 V8 H14 z", transform: "rotate(315 16 16)", children: jsx_runtime_1.jsx("animate", { attributeName: "opacity", from: "1", to: ".1", dur: "1s", repeatCount: "indefinite", begin: "0.875s" }) })
         ] }));
 };

package/dist/error-overlay/remotion-overlay/carets.js

@@ -2,11 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CaretDown = exports.CaretRight = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../../helpers/colors");
 const CaretRight = ({ size }) => {
-    return (jsx_runtime_1.jsx("svg", { style: { height: size !== null && size !== void 0 ? size : 20 }, "aria-hidden": "true", focusable: "false", role: "img", viewBox: "0 0 192 512", children: jsx_runtime_1.jsx("path", { fill: "currentColor", d: "M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z" }) }));
+    return (jsx_runtime_1.jsx("svg", { style: { height: size !== null && size !== void 0 ? size : 20 }, "aria-hidden": "true", focusable: "false", role: "img", viewBox: "0 0 192 512", children: jsx_runtime_1.jsx("path", { fill: colors_1.CURRENT_COLOR, d: "M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z" }) }));
 };
 exports.CaretRight = CaretRight;
 const CaretDown = ({ invert, size }) => {
-    return (jsx_runtime_1.jsx("svg", { "aria-hidden": "true", focusable: "false", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512", style: { height: size !== null && size !== void 0 ? size : 20, transform: invert ? `rotate(180deg)` : '' }, children: jsx_runtime_1.jsx("path", { fill: "currentColor", d: "M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z" }) }));
+    return (jsx_runtime_1.jsx("svg", { "aria-hidden": "true", focusable: "false", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512", style: { height: size !== null && size !== void 0 ? size : 20, transform: invert ? `rotate(180deg)` : '' }, children: jsx_runtime_1.jsx("path", { fill: colors_1.CURRENT_COLOR, d: "M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z" }) }));
 };
 exports.CaretDown = CaretDown;

package/dist/esm/chunk-jefhcs5z.js

@@ -0,0 +1,164 @@
+var __create = Object.create;
+var __getProtoOf = Object.getPrototypeOf;
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __toESM = (mod, isNodeMode, target) => {
+  target = mod != null ? __create(__getProtoOf(mod)) : {};
+  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
+  for (let key of __getOwnPropNames(mod))
+    if (!__hasOwnProp.call(to, key))
+      __defProp(to, key, {
+        get: () => mod[key],
+        enumerable: true
+      });
+  return to;
+};
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// src/helpers/colors.ts
+var BLACK = "black";
+var WHITE = "white";
+var RED = "red";
+var TRANSPARENT = "transparent";
+var CURRENT_COLOR = "currentColor";
+var CURRENT_COLOR_LOWERCASE = "currentcolor";
+var WHITE_HEX = "#fff";
+var WHITE_FULL_HEX = "#ffffff";
+var BLACK_HEX = "#000";
+var BLACK_FULL_HEX = "#000000";
+var BACKGROUND = "rgb(31,36,40)";
+var BACKGROUND_HEX = "#1f2428";
+var BACKGROUND__TRANSPARENT = "rgba(31,36,40, 0)";
+var INPUT_BACKGROUND = "#2f363d";
+var LIGHT_COLOR = "#ddd";
+var SELECTED_BACKGROUND = "hsla(0, 0%, 100%, 0.15)";
+var LIGHT_TEXT = "#A6A7A9";
+var RULER_COLOR = "#808080";
+var WHITE_ALPHA_05 = "rgba(255, 255, 255, 0.05)";
+var WHITE_ALPHA_06 = "rgba(255, 255, 255, 0.06)";
+var WHITE_ALPHA_08 = "rgba(255, 255, 255, 0.08)";
+var WHITE_ALPHA_10 = "rgba(255, 255, 255, 0.1)";
+var WHITE_ALPHA_12 = "rgba(255, 255, 255, 0.12)";
+var WHITE_ALPHA_15 = "rgba(255, 255, 255, 0.15)";
+var WHITE_ALPHA_20 = "rgba(255, 255, 255, 0.2)";
+var WHITE_ALPHA_25 = "rgba(255, 255, 255, 0.25)";
+var WHITE_ALPHA_30 = "rgba(255, 255, 255, 0.3)";
+var WHITE_ALPHA_35 = "rgba(255, 255, 255, 0.35)";
+var WHITE_ALPHA_40 = "rgba(255, 255, 255, 0.4)";
+var WHITE_ALPHA_45 = "rgba(255, 255, 255, 0.45)";
+var WHITE_ALPHA_50 = "rgba(255, 255, 255, 0.5)";
+var WHITE_ALPHA_60 = "rgba(255, 255, 255, 0.6)";
+var WHITE_ALPHA_70 = "rgba(255, 255, 255, 0.7)";
+var WHITE_ALPHA_72 = "rgba(255, 255, 255, 0.72)";
+var WHITE_ALPHA_80 = "rgba(255, 255, 255, 0.8)";
+var BLACK_ALPHA_10 = "rgba(0, 0, 0, 0.1)";
+var BLACK_ALPHA_28 = "rgba(0, 0, 0, 0.28)";
+var BLACK_ALPHA_30 = "rgba(0, 0, 0, 0.3)";
+var BLACK_ALPHA_40 = "rgba(0, 0, 0, 0.4)";
+var BLACK_ALPHA_50 = "rgba(0, 0, 0, 0.5)";
+var BLACK_ALPHA_60 = "rgba(0, 0, 0, 0.6)";
+var BLACK_ALPHA_80 = "rgba(0, 0, 0, 0.8)";
+var BLACK_ALPHA_85 = "rgba(0, 0, 0, 0.85)";
+var BLACK_ALPHA_90 = "rgba(0, 0, 0, 0.9)";
+var BLACK_OPAQUE = "rgba(0, 0, 0, 1)";
+var SELECTED_HOVER_BACKGROUND = "hsla(0, 0%, 100%, 0.25)";
+var FAIL_COLOR = "#ff3232";
+var WARNING_COLOR = "#f1c40f";
+var BLUE = "#0b84f3";
+var BLUE_HOVERED = "#4da3f7";
+var BLUE_DISABLED = "#284f73";
+var UNSELECTED_GUIDE = "#7e1219";
+var SELECTED_GUIDE = "#d22d3a";
+var LINE_COLOR = "#363A3E";
+var TIMELINE_TRACK_SEPARATOR = "#13161B";
+var LIGHT_GRAY = "#ccc";
+var KEYBOARD_SHORTCUT_KEY_COLOR = "#eee";
+var NOTIFICATION_BACKGROUND = "#111111";
+var RENDER_STATUS_BACKGROUND = "#222";
+var ERROR_CODE_FRAME_BACKGROUND = "#070707";
+var ERROR_CODE_FRAME_LINE_BACKGROUND = "#121212";
+var ERROR_LINK_COLOR = "#58a6ff";
+var INFO_BLUE = "#60a5fa";
+var SERVER_DISCONNECTED_BACKGROUND = "#e74c3c";
+var STACK_FRAME_BORDER_BLUE = "rgb(66, 144, 245)";
+var TIMELINE_BACKGROUND_COLOR = "#0F1113";
+var TIMELINE_SELECTED_BACKGROUND_COLOR = "#3B3F42";
+var TIMELINE_SELECTED_LABEL_BACKGROUND_COLOR = "#B0B0B0";
+var TIMELINE_BLUE = "#0b84ff";
+var TIMELINE_PLAYHEAD_COLOR = "#f02c00";
+var TIMELINE_DROP_BLUE_ALPHA_12 = "rgba(0, 155, 255, 0.12)";
+var TIMELINE_DROP_BLUE_ALPHA_16 = "rgba(0, 155, 255, 0.16)";
+var TIMELINE_DROP_BLUE_ALPHA_75 = "rgba(0, 155, 255, 0.75)";
+var TIMELINE_MARQUEE_BLUE_ALPHA_16 = "rgba(70, 130, 255, 0.16)";
+var TIMELINE_MARQUEE_BLUE_ALPHA_75 = "rgba(70, 130, 255, 0.75)";
+var EASING_SELECTED_BACKGROUND = "rgba(11, 132, 243, 0.18)";
+var INFO_BLUE_BACKGROUND = "rgba(59, 130, 246, 0.15)";
+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 rgba(59, 130, 246, 0.4)";
+var BORDER_STACK_FRAME_BLUE = `1px solid ${STACK_FRAME_BORDER_BLUE}`;
+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 #555, inset -1px -1px #555, ` + `inset 1px -1px #555, inset -1px 1px #555`;
+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, #888 25%, ${TRANSPARENT} 25%), ` + `linear-gradient(-45deg, #888 25%, ${TRANSPARENT} 25%), ` + `linear-gradient(45deg, ${TRANSPARENT} 75%, #888 75%), ` + `linear-gradient(-45deg, ${TRANSPARENT} 75%, #888 75%)`;
+var COLOR_PICKER_CHECKER_BACKGROUND_COLOR = "#444";
+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 = "rgba(0, 0, 0, 0)";
+var COLOR_PICKER_HUE_GRADIENT = "linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)";
+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 = "linear-gradient(rgb(16 171 58), rgb(43 165 63) 60%)";
+var TIMELINE_VIDEO_GRADIENT = "linear-gradient(to top, #8e44ad, #9b59b6)";
+var TIMELINE_IMAGE_GRADIENT = "linear-gradient(to top, #2980b9, #3498db)";
+var getBackgroundFromHoverState = ({
+  selected,
+  hovered
+}) => {
+  if (selected) {
+    if (hovered) {
+      return SELECTED_HOVER_BACKGROUND;
+    }
+    return SELECTED_BACKGROUND;
+  }
+  if (hovered) {
+    return WHITE_ALPHA_06;
+  }
+  return TRANSPARENT;
+};
+
+export { __toESM, __require, BLACK, WHITE, RED, TRANSPARENT, CURRENT_COLOR, CURRENT_COLOR_LOWERCASE, WHITE_HEX, WHITE_FULL_HEX, BLACK_HEX, BLACK_FULL_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, 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, KEYBOARD_SHORTCUT_KEY_COLOR, 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_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, EASING_SELECTED_BACKGROUND, INFO_BLUE_BACKGROUND, 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_STACK_FRAME_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, TIMELINE_IMAGE_GRADIENT, getBackgroundFromHoverState };