@remotion/studio 4.0.503 → 4.0.505

package/dist/esm/renderEntry.mjs

@@ -212,7 +212,7 @@ var renderContent = (Root) => {
     renderToDOM(/* @__PURE__ */ jsx("div", {
       children: /* @__PURE__ */ jsx(DelayedSpinner, {})
     }));
-    import("./chunk-bj1r1hh5.js").then(({ StudioInternals }) => {
+    import("./chunk-7pgk8h5m.js").then(({ StudioInternals }) => {
       window.remotion_isStudio = true;
       window.remotion_isReadOnlyStudio = true;
       window.remotion_inputProps = "{}";

package/dist/helpers/hoverable.d.ts

@@ -0,0 +1,11 @@
+import type React from 'react';
+export declare const HOVERABLE_CLASS_NAME = "__remotion-hoverable";
+export declare const HOVER_GROUP_CLASS_NAME = "__remotion-hover-group";
+export declare const HOVER_GROUP_REVEAL_CLASS_NAME = "__remotion-hover-group-reveal";
+export declare const hoverableStyle: ({ idleBackground, hoverBackground, idleColor, hoverColor, }: {
+    idleBackground: string;
+    hoverBackground: string;
+    idleColor: string;
+    hoverColor: string;
+}) => React.CSSProperties;
+export declare const makeHoverableCSS: () => string;

package/dist/helpers/hoverable.js

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.makeHoverableCSS = exports.hoverableStyle = exports.HOVER_GROUP_REVEAL_CLASS_NAME = exports.HOVER_GROUP_CLASS_NAME = exports.HOVERABLE_CLASS_NAME = void 0;
+const colors_1 = require("./colors");
+// Purely visual hover styling must be driven by CSS `:hover` rather than
+// React state: When the Studio runs in an <iframe> (like in Browser Studio),
+// browsers can fail to deliver `pointerleave` when the pointer exits the
+// frame, which would leave a state-driven hover background stuck forever.
+// CSS `:hover` is maintained by the browser and self-corrects.
+// https://github.com/remotion-dev/remotion/issues/9886
+exports.HOVERABLE_CLASS_NAME = '__remotion-hoverable';
+exports.HOVER_GROUP_CLASS_NAME = '__remotion-hover-group';
+exports.HOVER_GROUP_REVEAL_CLASS_NAME = '__remotion-hover-group-reveal';
+const BG_VARIABLE = '--remotion-hoverable-bg';
+const HOVER_BG_VARIABLE = '--remotion-hoverable-hover-bg';
+const COLOR_VARIABLE = '--remotion-hoverable-color';
+const HOVER_COLOR_VARIABLE = '--remotion-hoverable-hover-color';
+// To disable the hover effect (e.g. for a disabled control), pass the idle
+// values as the hover values.
+const hoverableStyle = ({ idleBackground, hoverBackground, idleColor, hoverColor, }) => {
+    return {
+        [BG_VARIABLE]: idleBackground,
+        [HOVER_BG_VARIABLE]: hoverBackground,
+        [COLOR_VARIABLE]: idleColor,
+        [HOVER_COLOR_VARIABLE]: hoverColor,
+    };
+};
+exports.hoverableStyle = hoverableStyle;
+// The doubled class names give these rules a higher specificity than the
+// `.css-reset, .css-reset *` rule which sets `color` and `background` on
+// every descendant - the injection order of the two stylesheets is not
+// deterministic.
+// The `*` selectors re-establish color inheritance inside the hoverable
+// element so that text and `currentColor`-based icons follow the hover state.
+const hoverable = `.${exports.HOVERABLE_CLASS_NAME}.${exports.HOVERABLE_CLASS_NAME}`;
+const hoverGroup = `.${exports.HOVER_GROUP_CLASS_NAME}`;
+const reveal = `.${exports.HOVER_GROUP_REVEAL_CLASS_NAME}.${exports.HOVER_GROUP_REVEAL_CLASS_NAME}`;
+const makeHoverableCSS = () => `
+  ${hoverable} {
+    background-color: var(${BG_VARIABLE}, ${colors_1.TRANSPARENT});
+  }
+
+  ${hoverable},
+  ${hoverable} * {
+    color: var(${COLOR_VARIABLE}, inherit);
+  }
+
+  @media (hover: hover) {
+    ${hoverable}:hover,
+    ${hoverGroup}:hover ${hoverable} {
+      background-color: var(${HOVER_BG_VARIABLE}, var(${BG_VARIABLE}, ${colors_1.TRANSPARENT}));
+    }
+
+    ${hoverable}:hover,
+    ${hoverable}:hover *,
+    ${hoverGroup}:hover ${hoverable},
+    ${hoverGroup}:hover ${hoverable} * {
+      color: var(${HOVER_COLOR_VARIABLE}, var(${COLOR_VARIABLE}, inherit));
+    }
+
+    ${hoverGroup} ${reveal} {
+      opacity: 0;
+    }
+
+    ${hoverGroup}:hover ${reveal} {
+      opacity: 1;
+    }
+  }
+`;
+exports.makeHoverableCSS = makeHoverableCSS;

package/dist/helpers/inject-css.js

@@ -4,6 +4,7 @@ exports.injectCSS = void 0;
 const remotion_1 = require("remotion");
 const scroll_to_default_props_path_1 = require("../components/RenderModal/SchemaEditor/scroll-to-default-props-path");
 const colors_1 = require("./colors");
+const hoverable_1 = require("./hoverable");
 const makeDefaultGlobalCSS = () => {
     const dragAreaFactor = 2;
     const fromMiddle = 50 / dragAreaFactor;
@@ -85,50 +86,67 @@ const makeDefaultGlobalCSS = () => {
 	    box-shadow: ${colors_1.FOCUS_BOX_SHADOW};
 	  }
 
-  .__remotion_thumb,
-  .__remotion_thumb::-webkit-slider-thumb {
+	  .__remotion_thumb,
+	  .__remotion_thumb::-webkit-slider-thumb {
 	    -webkit-appearance: none;
 	    -webkit-tap-highlight-color: ${colors_1.TRANSPARENT};
 	  }
 
-  .__remotion_thumb {
-    pointer-events: none;
-    position: absolute;
-    height: 0;
-    outline: none;
-    top: 15.5px;
-    width: 221px;
-    margin-left: -2px;
-    z-index: 2;
-  }
+	  .__remotion_thumb {
+	    appearance: none;
+	    background: transparent;
+	    border: 0;
+	    height: 100%;
+	    left: 0;
+	    margin: 0;
+	    outline: none;
+	    padding: 0;
+	    pointer-events: none;
+	    position: absolute;
+	    top: 0;
+	    width: 100%;
+	    z-index: 2;
+	  }
+
+	  .__remotion_thumb::-moz-range-track {
+	    background: transparent;
+	    border: 0;
+	    height: 6px;
+	  }
+
+	  .__remotion_thumb::-webkit-slider-runnable-track {
+	    background: transparent;
+	    border: 0;
+	    height: 6px;
+	  }
 
 	  /* For Firefox browsers */
 	  .__remotion_thumb::-moz-range-thumb {
-	    border: ${colors_1.BORDER_BLACK};
-	    border-radius: 2px;
+	    appearance: none;
+	    border: 0;
+	    border-radius: 50%;
 	    cursor: pointer;
-	    height: 37px;
-	    width: 10px;
+	    height: 14px;
+	    width: 14px;
 	    pointer-events: all;
-	    border-color: ${colors_1.BLACK};
 	    background-color: ${colors_1.WHITE};
 	    position: relative;
 	  }
 
 	  /* For Chrome browsers */
 	  .__remotion_thumb::-webkit-slider-thumb {
-	    border: ${colors_1.BORDER_BLACK};
-	    border-radius: 2px;
+	    border: 0;
+	    border-radius: 50%;
 	    cursor: pointer;
-	    height: 39px;
-	    width: 10px;
+	    height: 14px;
+	    margin-top: -4px;
+	    width: 14px;
 	    pointer-events: all;
-	    border-color: ${colors_1.BLACK};
 	    background-color: ${colors_1.WHITE};
 	    position: relative;
 	  }
 
-  .__remotion_input_dragger:hover span {
+	.__remotion_input_dragger:hover > span:first-child {
     color: var(--remotion-cli-internals-blue-hovered) !important;
   }
 
@@ -136,6 +154,8 @@ const makeDefaultGlobalCSS = () => {
     color: var(--remotion-cli-internals-blue) !important;
     transition: color 0.2s ease-in-out;
   }
+
+  ${(0, hoverable_1.makeHoverableCSS)()}
   `.trim();
 };
 let injected = false;

package/dist/helpers/install-required-package.d.ts

@@ -1,2 +1,3 @@
-export declare const getMissingPackages: (packageNames: string[]) => string[];
-export declare const installRequiredPackages: (packageNames: string[]) => Promise<void>;
+import type { ElementDependency } from '@remotion/studio-protocol';
+export declare const getMissingPackages: (dependencies: (string | ElementDependency)[]) => ElementDependency[];
+export declare const installRequiredPackages: (dependencies: (string | ElementDependency)[]) => Promise<void>;

package/dist/helpers/install-required-package.js

@@ -4,30 +4,35 @@ exports.installRequiredPackages = exports.getMissingPackages = void 0;
 const install_package_1 = require("../api/install-package");
 const NotificationCenter_1 = require("../components/Notifications/NotificationCenter");
 let installQueue = Promise.resolve();
-const getMissingPackages = (packageNames) => {
+const uniqueDependencies = (dependencies) => Array.from(new Map(dependencies.map((dependency) => {
+    const normalized = typeof dependency === 'string'
+        ? { name: dependency, version: null }
+        : dependency;
+    return [normalized.name, normalized];
+})).values());
+const getMissingPackages = (dependencies) => {
     var _a;
-    const uniquePackageNames = Array.from(new Set(packageNames));
     const installedPackages = (_a = window.remotion_installedPackages) !== null && _a !== void 0 ? _a : [];
-    return uniquePackageNames.filter((packageName) => !installedPackages.includes(packageName));
+    return uniqueDependencies(dependencies).filter((dependency) => dependency.version !== null ||
+        !installedPackages.includes(dependency.name));
 };
 exports.getMissingPackages = getMissingPackages;
-const addInstalledPackages = (packageNames) => {
+const addInstalledPackages = (dependencies) => {
     var _a;
     const installedPackages = (_a = window.remotion_installedPackages) !== null && _a !== void 0 ? _a : [];
-    window.remotion_installedPackages = Array.from(new Set([...installedPackages, ...packageNames]));
+    window.remotion_installedPackages = Array.from(new Set([
+        ...installedPackages,
+        ...uniqueDependencies(dependencies).map((dependency) => dependency.name),
+    ]));
 };
-const formatPackageList = (packageNames) => {
-    if (packageNames.length === 1) {
-        return packageNames[0];
-    }
-    return `${packageNames.length} packages`;
-};
-const installRequiredPackages = async (packageNames) => {
+const formatPackageList = (dependencies) => dependencies.length === 1
+    ? dependencies[0].name
+    : `${dependencies.length} packages`;
+const installRequiredPackages = async (dependencies) => {
     const runInstall = async () => {
-        const missingPackages = (0, exports.getMissingPackages)(packageNames);
-        if (missingPackages.length === 0) {
+        const missingPackages = (0, exports.getMissingPackages)(dependencies);
+        if (missingPackages.length === 0)
             return;
-        }
         (0, NotificationCenter_1.showNotification)(`Installing ${formatPackageList(missingPackages)}...`, 3000);
         await (0, install_package_1.installPackages)(missingPackages);
         addInstalledPackages(missingPackages);

package/dist/helpers/use-is-fullscreen.d.ts

@@ -0,0 +1 @@
+export declare const useIsFullscreen: () => boolean;

package/dist/helpers/use-is-fullscreen.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useIsFullscreen = void 0;
+const react_1 = require("react");
+const getIsFullscreen = () => {
+    var _a;
+    return Boolean((_a = document.fullscreenElement) !== null && _a !== void 0 ? _a : document
+        .webkitFullscreenElement);
+};
+const useIsFullscreen = () => {
+    const [isFullscreen, setIsFullscreen] = (0, react_1.useState)(getIsFullscreen);
+    (0, react_1.useEffect)(() => {
+        const onFullscreenChange = () => {
+            setIsFullscreen(getIsFullscreen());
+        };
+        document.addEventListener('fullscreenchange', onFullscreenChange);
+        document.addEventListener('webkitfullscreenchange', onFullscreenChange);
+        return () => {
+            document.removeEventListener('fullscreenchange', onFullscreenChange);
+            document.removeEventListener('webkitfullscreenchange', onFullscreenChange);
+        };
+    }, []);
+    return isFullscreen;
+};
+exports.useIsFullscreen = useIsFullscreen;

package/dist/helpers/use-menu-structure.js

@@ -39,28 +39,43 @@ const use_keybinding_1 = require("./use-keybinding");
 const openExternal = (link) => {
     window.open(link, '_blank');
 };
-const rotate = {
-    transform: `rotate(90deg)`,
+const inheritColor = {
     color: 'inherit',
 };
-const iconContainer = {
-    color: 'inherit',
-};
-const iconPath = {
-    color: 'inherit',
-};
-const ICON_SIZE = 16;
+const ICON_SIZE = 14;
 const getFileMenu = ({ readOnlyStudio, closeMenu, previewServerState, setSelectedModal, }) => {
     const fileManagerName = (0, get_file_manager_name_1.getFileManagerName)(window.remotion_fileSystemPlatform);
     const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
     const downloadProject = browserStudioOperations === null || browserStudioOperations === void 0 ? void 0 : browserStudioOperations.downloadProject;
     const items = [
+        readOnlyStudio
+            ? null
+            : {
+                id: 'new-composition',
+                value: 'new-composition',
+                label: 'New composition...',
+                onClick: () => {
+                    closeMenu();
+                    setSelectedModal({
+                        type: 'new-comp',
+                        folderName: null,
+                        parentName: null,
+                        stack: null,
+                    });
+                },
+                type: 'item',
+                keyHint: null,
+                leftItem: null,
+                subMenu: null,
+                quickSwitcherLabel: 'New composition...',
+                disabled: previewServerState !== 'connected',
+            },
         readOnlyStudio
             ? null
             : {
                 id: 'new-folder',
                 value: 'new-folder',
-                label: 'New Folder...',
+                label: 'New folder...',
                 onClick: () => {
                     closeMenu();
                     setSelectedModal({
@@ -80,7 +95,7 @@ const getFileMenu = ({ readOnlyStudio, closeMenu, previewServerState, setSelecte
             ? null
             : {
                 type: 'divider',
-                id: 'new-folder-divider',
+                id: 'new-project-item-divider',
             },
         window.remotion_isReadOnlyStudio
             ? {
@@ -100,42 +115,6 @@ const getFileMenu = ({ readOnlyStudio, closeMenu, previewServerState, setSelecte
                 quickSwitcherLabel: 'Override input props',
             }
             : null,
-        readOnlyStudio
-            ? null
-            : {
-                id: 'render',
-                value: 'render',
-                label: 'Render...',
-                onClick: () => {
-                    closeMenu();
-                    if (previewServerState !== 'connected') {
-                        (0, NotificationCenter_1.showNotification)('Restart the studio to render', 2000);
-                        return;
-                    }
-                    const renderButton = document.getElementById('render-modal-button-server');
-                    renderButton.click();
-                },
-                type: 'item',
-                keyHint: 'R',
-                leftItem: null,
-                subMenu: null,
-                quickSwitcherLabel: 'Render...',
-            },
-        {
-            id: 'render-on-web',
-            value: 'render-on-web',
-            label: 'Render on web...',
-            onClick: () => {
-                closeMenu();
-                const renderButton = document.getElementById('render-modal-button-client');
-                renderButton.click();
-            },
-            type: 'item',
-            keyHint: null,
-            leftItem: null,
-            subMenu: null,
-            quickSwitcherLabel: 'Render on web...',
-        },
         downloadProject
             ? {
                 id: 'download-project',
@@ -159,7 +138,7 @@ const getFileMenu = ({ readOnlyStudio, closeMenu, previewServerState, setSelecte
                 quickSwitcherLabel: 'Download project',
             }
             : null,
-        !readOnlyStudio
+        !readOnlyStudio && downloadProject
             ? {
                 type: 'divider',
                 id: 'open-project-divider',
@@ -229,6 +208,50 @@ const getFileMenu = ({ readOnlyStudio, closeMenu, previewServerState, setSelecte
         quickSwitcherLabel: null,
     };
 };
+const getRenderMenuItems = ({ closeMenu, previewServerState, readOnlyStudio, }) => {
+    return [
+        readOnlyStudio
+            ? null
+            : {
+                id: 'render',
+                value: 'render',
+                label: 'Render...',
+                onClick: () => {
+                    closeMenu();
+                    if (previewServerState !== 'connected') {
+                        (0, NotificationCenter_1.showNotification)('Restart the studio to render', 2000);
+                        return;
+                    }
+                    const renderButton = document.getElementById('render-modal-button-server');
+                    renderButton.click();
+                },
+                type: 'item',
+                keyHint: 'R',
+                leftItem: null,
+                subMenu: null,
+                quickSwitcherLabel: 'Render...',
+            },
+        {
+            id: 'render-on-web',
+            value: 'render-on-web',
+            label: 'Render on web...',
+            onClick: () => {
+                closeMenu();
+                const renderButton = document.getElementById('render-modal-button-client');
+                renderButton.click();
+            },
+            type: 'item',
+            keyHint: null,
+            leftItem: null,
+            subMenu: null,
+            quickSwitcherLabel: 'Render on web...',
+        },
+        {
+            type: 'divider',
+            id: 'render-divider',
+        },
+    ].filter(no_react_1.NoReactInternals.truthy);
+};
 const useMenuStructure = (closeMenu, readOnlyStudio) => {
     var _a;
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
@@ -272,7 +295,7 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
         let struct = [
             {
                 id: 'remotion',
-                label: (jsx_runtime_1.jsx(layout_1.Row, { align: "center", justify: "center", style: iconContainer, children: jsx_runtime_1.jsx("svg", { width: ICON_SIZE, height: ICON_SIZE, viewBox: "-100 -100 400 400", style: rotate, children: jsx_runtime_1.jsx("path", { fill: colors_1.CURRENT_COLOR, stroke: colors_1.CURRENT_COLOR, style: iconPath, strokeWidth: "100", strokeLinejoin: "round", d: "M 2 172 a 196 100 0 0 0 195 5 A 196 240 0 0 0 100 2.259 A 196 240 0 0 0 2 172 z" }) }) })),
+                label: (jsx_runtime_1.jsx(layout_1.Row, { align: "center", justify: "center", style: inheritColor, children: jsx_runtime_1.jsx("svg", { width: ICON_SIZE, height: ICON_SIZE, viewBox: "0 0 415 426", fill: "none", xmlns: "http://www.w3.org/2000/svg", style: inheritColor, children: jsx_runtime_1.jsx("path", { d: "M93.4691 0.0367432C84.4873 0.520935 77.2494 1.93634 69.9553 4.69266C66.3176 6.05219 60.3548 9.0134 57.0734 11.062C43.3476 19.6103 32.8846 32.4606 27.428 47.4154C26.3405 50.3766 23.3966 59.8188 21.5027 66.3185C8.88329 109.768 1.7204 157.277 0.182822 207.561C-0.0609408 215.569 -0.0609408 234.639 0.182822 242.517C1.21413 275.854 4.42055 305.949 10.2334 336.641C12.596 349.063 16.3837 365.75 18.5776 373.33C23.059 388.732 32.2095 401.843 45.2227 411.453C53.9419 417.896 63.8425 422.217 74.8118 424.34C80.0996 425.365 87.075 425.83 92.2127 425.495C99.3194 425.029 113.42 423.148 124.877 421.118C176.517 411.974 224.22 395.604 267.478 372.175C294.874 357.332 318.294 341.26 340.888 321.761C363.408 302.355 382.609 281.478 399.504 258.049C403.423 252.63 405.392 249.464 407.361 245.478C412.424 235.198 414.805 224.974 414.786 213.539C414.786 202.886 412.761 193.425 408.392 183.741C406.292 179.066 404.286 175.714 399.785 169.345C383.21 145.898 364.815 125.467 342.389 105.614C307.624 74.8481 266.335 49.613 220.226 30.9334C210.232 26.8921 200.387 23.335 188.537 19.4799C163.448 11.3413 132.396 4.28293 106.126 0.763062C102.001 0.204346 96.3942 -0.112244 93.4691 0.0367432Z", fill: colors_1.CURRENT_COLOR, style: inheritColor }) }) })),
                 leaveLeftPadding: false,
                 items: [
                     {
@@ -730,16 +753,22 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
                 id: 'composition',
                 label: 'Composition',
                 leaveLeftPadding: false,
-                items: (0, composition_menu_items_1.getCompositionMenuItems)({
-                    closeMenu,
-                    composition: currentComposition,
-                    connectionStatus: type,
-                    includeCompositionManagementItems: true,
-                    includeNewCompositionItem: true,
-                    resolvedLocation: resolvedCompositionLocation,
-                    setSelectedModal,
-                    readOnlyStudio,
-                }),
+                items: [
+                    ...getRenderMenuItems({
+                        closeMenu,
+                        previewServerState: type,
+                        readOnlyStudio,
+                    }),
+                    ...(0, composition_menu_items_1.getCompositionMenuItems)({
+                        closeMenu,
+                        composition: currentComposition,
+                        connectionStatus: type,
+                        includeCompositionManagementItems: true,
+                        resolvedLocation: resolvedCompositionLocation,
+                        setSelectedModal,
+                        readOnlyStudio,
+                    }),
+                ],
                 quickSwitcherLabel: null,
             },
             {

package/dist/icons/audio.d.ts

@@ -1,5 +1,5 @@
 import type { SVGProps } from 'react';
-export declare const AudioIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export declare const AudioIcon: ({ color, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
 export declare const AudioFileIcon: ({ color, ...props }: SVGProps<SVGSVGElement> & {
     readonly color?: string | undefined;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/icons/audio.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AudioFileIcon = exports.AudioIcon = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const colors_1 = require("../helpers/colors");
-const AudioIcon = (props) => (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", ...props, children: jsx_runtime_1.jsx("path", { fill: colors_1.CURRENT_COLOR_LOWERCASE, d: "M243 32.32C105.5 39.15 0 157.8 0 295.5v120.4C0 451.3 28.63 480 64 480h32c17.62 0 32-14.38 32-32V288c0-17.62-14.38-32-32-32H64c-10.79 0-20.8 2.9-29.72 7.7 14.2-106.8 100.5-193.9 210.4-199.4 120.5-5.965 221.7 83.92 234 199.9-9.08-5.1-19.48-8.2-30.68-8.2h-32c-17.62 0-32 14.38-32 32v160c0 17.62 14.38 32 32 32h32c35.38 0 64-28.75 64-64.13V287.9c0-145.4-122-262.88-269-255.58zM64 288h32v160H64c-17.62 0-32-14.5-32-32.13v-95.75C32 302.5 46.38 288 64 288zm416 127.9c0 17.6-14.4 32.1-32 32.1h-32V288h32c17.62 0 32 14.5 32 32.13v95.77z" }) }));
+const AudioIcon = ({ color, ...props }) => (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", ...props, children: jsx_runtime_1.jsx("path", { fill: color !== null && color !== void 0 ? color : colors_1.CURRENT_COLOR_LOWERCASE, d: "M243 32.32C105.5 39.15 0 157.8 0 295.5v120.4C0 451.3 28.63 480 64 480h32c17.62 0 32-14.38 32-32V288c0-17.62-14.38-32-32-32H64c-10.79 0-20.8 2.9-29.72 7.7 14.2-106.8 100.5-193.9 210.4-199.4 120.5-5.965 221.7 83.92 234 199.9-9.08-5.1-19.48-8.2-30.68-8.2h-32c-17.62 0-32 14.38-32 32v160c0 17.62 14.38 32 32 32h32c35.38 0 64-28.75 64-64.13V287.9c0-145.4-122-262.88-269-255.58zM64 288h32v160H64c-17.62 0-32-14.5-32-32.13v-95.75C32 302.5 46.38 288 64 288zm416 127.9c0 17.6-14.4 32.1-32 32.1h-32V288h32c17.62 0 32 14.5 32 32.13v95.77z" }) }));
 exports.AudioIcon = AudioIcon;
 const AudioFileIcon = ({ color, ...props }) => (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", ...props, children: jsx_runtime_1.jsx("path", { fill: color !== null && color !== void 0 ? color : colors_1.CURRENT_COLOR_LOWERCASE, d: "M480 16l0-19.9-19.5 4.3-288 64-12.5 2.8 0 273.2c-17-12.7-39.4-20.4-64-20.4-53 0-96 35.8-96 80s43 80 96 80 96-35.8 96-80l0-187.2 256-56.9 0 120.4c-17-12.7-39.4-20.4-64-20.4-53 0-96 35.8-96 80s43 80 96 80 96-35.8 96-80l0-320zM448 336c0 26.5-28.7 48-64 48s-64-21.5-64-48 28.7-48 64-48 64 21.5 64 48zM160 400c0 26.5-28.7 48-64 48s-64-21.5-64-48 28.7-48 64-48 64 21.5 64 48zM448 123.2l-256 56.9 0-87.2 256-56.9 0 87.2z" }) }));
 exports.AudioFileIcon = AudioFileIcon;

package/dist/icons/canvas-zoom.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export declare const CanvasZoomIcon: React.FC<{
+    readonly color: string;
+}>;
+export declare const CanvasFitIcon: React.FC<{
+    readonly color: string;
+}>;
+export declare const CanvasZoomOutIcon: React.FC<{
+    readonly color: string;
+}>;

package/dist/icons/canvas-zoom.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CanvasZoomOutIcon = exports.CanvasFitIcon = exports.CanvasZoomIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const iconStyle = {
+    width: 20,
+    height: 20,
+    flexShrink: 0,
+};
+const CanvasZoomIcon = ({ color }) => {
+    return (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 640 640", style: iconStyle, children: jsx_runtime_1.jsx("path", { fill: color, d: "M272 96C369.2 96 448 174.8 448 272C448 369.2 369.2 448 272 448C174.8 448 96 369.2 96 272C96 174.8 174.8 96 272 96zM272 480C323.7 480 371 461.2 407.3 430L548.7 571.3C554.9 577.5 565.1 577.5 571.3 571.3C577.5 565.1 577.5 554.9 571.3 548.7L430 407.3C461.2 371 480 323.7 480 272C480 157.1 386.9 64 272 64C157.1 64 64 157.1 64 272C64 386.9 157.1 480 272 480zM256 344C256 352.8 263.2 360 272 360C280.8 360 288 352.8 288 344L288 288L344 288C352.8 288 360 280.8 360 272C360 263.2 352.8 256 344 256L288 256L288 200C288 191.2 280.8 184 272 184C263.2 184 256 191.2 256 200L256 256L200 256C191.2 256 184 263.2 184 272C184 280.8 191.2 288 200 288L256 288L256 344z" }) }));
+};
+exports.CanvasZoomIcon = CanvasZoomIcon;
+const CanvasFitIcon = ({ color }) => {
+    return (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 640 640", style: iconStyle, children: jsx_runtime_1.jsx("path", { fill: color, d: "M448 272C448 174.8 369.2 96 272 96C174.8 96 96 174.8 96 272C96 369.2 174.8 448 272 448C369.2 448 448 369.2 448 272zM407.3 430C371 461.2 323.7 480 272 480C157.1 480 64 386.9 64 272C64 157.1 157.1 64 272 64C386.9 64 480 157.1 480 272C480 323.7 461.2 371 430 407.3L571.3 548.7C577.5 554.9 577.5 565.1 571.3 571.3C565.1 577.5 554.9 577.5 548.7 571.3L407.3 430z" }) }));
+};
+exports.CanvasFitIcon = CanvasFitIcon;
+const CanvasZoomOutIcon = ({ color }) => {
+    return (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 640 640", style: iconStyle, children: jsx_runtime_1.jsx("path", { fill: color, d: "M272 96C369.2 96 448 174.8 448 272C448 369.2 369.2 448 272 448C174.8 448 96 369.2 96 272C96 174.8 174.8 96 272 96zM272 480C323.7 480 371 461.2 407.3 430L548.7 571.3C554.9 577.5 565.1 577.5 571.3 571.3C577.5 565.1 577.5 554.9 571.3 548.7L430 407.3C461.2 371 480 323.7 480 272C480 157.1 386.9 64 272 64C157.1 64 64 157.1 64 272C64 386.9 157.1 480 272 480zM192 256C183.2 256 176 263.2 176 272C176 280.8 183.2 288 192 288L352 288C360.8 288 368 280.8 368 272C368 263.2 360.8 256 352 256L192 256z" }) }));
+};
+exports.CanvasZoomOutIcon = CanvasZoomOutIcon;

package/dist/icons/caret.js

@@ -19,7 +19,7 @@ const angleDown = {
 const CaretRight = () => (jsx_runtime_1.jsx("svg", { viewBox: "0 0 192 512", style: caret, 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 = ({ color = colors_1.CURRENT_COLOR, small = false }) => {
-    return (jsx_runtime_1.jsx("svg", { viewBox: "0 0 320 512", style: small ? caretDownSmall : caretDown, children: jsx_runtime_1.jsx("path", { fill: 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" }) }));
+    return (jsx_runtime_1.jsx("svg", { viewBox: "0 0 448 512", style: small ? caretDownSmall : caretDown, children: jsx_runtime_1.jsx("path", { fill: color, d: "M235.3 411.3c-6.2 6.2-16.4 6.2-22.6 0l-208-208c-6.2-6.2-6.2-16.4 0-22.6s16.4-6.2 22.6 0L224 377.4 420.7 180.7c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6l-208 208z" }) }));
 };
 exports.CaretDown = CaretDown;
 const AngleDown = ({ down }) => {

package/dist/icons/certificate.d.ts

@@ -1 +1 @@
-export declare const CertificateIcon: (props: import("react").SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export declare const CertificateIcon: ({ color, ...props }: import("react").SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/icons/certificate.js

@@ -3,5 +3,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CertificateIcon = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const colors_1 = require("../helpers/colors");
-const CertificateIcon = (props) => (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 576 512", ...props, children: jsx_runtime_1.jsx("path", { fill: colors_1.CURRENT_COLOR_LOWERCASE, d: "M192 32l128 0 0 96c0 35.3 28.7 64 64 64l96 0 0 256c0 17.7-14.3 32-32 32l-192 0 0 32 192 0c35.3 0 64-28.7 64-64l0-261.5c0-17-6.7-33.3-18.7-45.3L370.7 18.7C358.7 6.7 342.5 0 325.5 0L192 0c-35.3 0-64 28.7-64 64l0 80c10.9 0 21.6 1 32 2.9L160 64c0-17.7 14.3-32 32-32zM352 45.3L466.7 160 384 160c-17.7 0-32-14.3-32-32l0-82.7zM32 320a96 96 0 1 1 192 0 96 96 0 1 1 -192 0zM176 438.7l0 66.3-40.1-22.9c-4.9-2.8-11-2.8-15.9 0L80 505 80 438.7c14.8 6 31 9.3 48 9.3s33.2-3.3 48-9.3zm32-18.8c29.3-23.5 48-59.5 48-99.9 0-70.7-57.3-128-128-128S0 249.3 0 320c0 40.4 18.7 76.5 48 99.9l0 101.8c0 12.3 10 22.3 22.3 22.3 3.9 0 7.7-1 11.1-2.9l46.6-26.6 46.6 26.6c3.4 1.9 7.2 2.9 11.1 2.9 12.3 0 22.3-10 22.3-22.3l0-101.8zM128 344a24 24 0 1 1 0-48 24 24 0 1 1 0 48zm0-80a56 56 0 1 0 0 112 56 56 0 1 0 0-112z" }) }));
+const CertificateIcon = ({ color, ...props }) => (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 576 512", ...props, children: jsx_runtime_1.jsx("path", { fill: color !== null && color !== void 0 ? color : colors_1.CURRENT_COLOR_LOWERCASE, d: "M192 32l128 0 0 96c0 35.3 28.7 64 64 64l96 0 0 256c0 17.7-14.3 32-32 32l-192 0 0 32 192 0c35.3 0 64-28.7 64-64l0-261.5c0-17-6.7-33.3-18.7-45.3L370.7 18.7C358.7 6.7 342.5 0 325.5 0L192 0c-35.3 0-64 28.7-64 64l0 80c10.9 0 21.6 1 32 2.9L160 64c0-17.7 14.3-32 32-32zM352 45.3L466.7 160 384 160c-17.7 0-32-14.3-32-32l0-82.7zM32 320a96 96 0 1 1 192 0 96 96 0 1 1 -192 0zM176 438.7l0 66.3-40.1-22.9c-4.9-2.8-11-2.8-15.9 0L80 505 80 438.7c14.8 6 31 9.3 48 9.3s33.2-3.3 48-9.3zm32-18.8c29.3-23.5 48-59.5 48-99.9 0-70.7-57.3-128-128-128S0 249.3 0 320c0 40.4 18.7 76.5 48 99.9l0 101.8c0 12.3 10 22.3 22.3 22.3 3.9 0 7.7-1 11.1-2.9l46.6-26.6 46.6 26.6c3.4 1.9 7.2 2.9 11.1 2.9 12.3 0 22.3-10 22.3-22.3l0-101.8zM128 344a24 24 0 1 1 0-48 24 24 0 1 1 0 48zm0-80a56 56 0 1 0 0 112 56 56 0 1 0 0-112z" }) }));
 exports.CertificateIcon = CertificateIcon;

package/dist/icons/data.d.ts

@@ -1,2 +1,2 @@
 import type { SVGProps } from 'react';
-export declare const DataIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export declare const DataIcon: ({ color, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/icons/data.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataIcon = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const colors_1 = require("../helpers/colors");
-const DataIcon = (props) => {
-    return (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", ...props, children: jsx_runtime_1.jsx("path", { fill: colors_1.CURRENT_COLOR_LOWERCASE, d: "M224 512C100.3 512 0 476.2 0 432V80C0 35.82 100.3 0 224 0C347.7 0 448 35.82 448 80V432C448 476.2 347.7 512 224 512zM416 80.45C415.7 79.69 414.4 77.27 409.8 73.31C402.4 67.11 389.9 60.09 371.6 53.57C335.4 40.62 283.2 32 224 32C164.8 32 112.6 40.62 76.37 53.57C58.1 60.09 45.59 67.11 38.25 73.31C33.55 77.27 32.29 79.69 32 80.45V182.1C46.47 192.7 69.9 202.8 100.9 210.4C135.5 218.9 177.1 224 224 224C270 224 312.5 218.9 347.1 210.4C378.1 202.8 401.5 192.7 416 182.1V80.45zM416 219.5C398.8 228.4 377.9 235.8 354.8 241.5C317.3 250.7 272.2 256 224 256C175.8 256 130.7 250.7 93.22 241.5C70.11 235.8 49.18 228.4 32 219.5V310.1C46.47 320.7 69.9 330.8 100.9 338.4C135.5 346.9 177.1 352 224 352C270 352 312.5 346.9 347.1 338.4C378.1 330.8 401.5 320.7 416 310.1V219.5zM38.25 438.7C45.59 444.9 58.1 451.9 76.37 458.4C112.6 471.4 164.8 480 224 480C283.2 480 335.4 471.4 371.6 458.4C389.9 451.9 402.4 444.9 409.8 438.7C414.4 434.7 415.7 432.3 416 431.6V347.5C398.8 356.4 377.9 363.8 354.8 369.5C317.3 378.7 272.2 384 224 384C175.8 384 130.7 378.7 93.22 369.5C70.11 363.8 49.18 356.4 32 347.5V431.6C32.29 432.3 33.55 434.7 38.25 438.7zM416 431.4C416.1 431.3 416.1 431.3 416.1 431.3L416 431.4zM31.96 431.4C31.94 431.3 31.93 431.3 31.92 431.3L31.96 431.4zM31.96 80.56C31.93 80.65 31.92 80.7 31.92 80.7L31.96 80.56zM416.1 80.7C416.1 80.7 416.1 80.65 416 80.56z" }) }));
+const DataIcon = ({ color, ...props }) => {
+    return (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", ...props, children: jsx_runtime_1.jsx("path", { fill: color !== null && color !== void 0 ? color : colors_1.CURRENT_COLOR_LOWERCASE, d: "M224 512C100.3 512 0 476.2 0 432V80C0 35.82 100.3 0 224 0C347.7 0 448 35.82 448 80V432C448 476.2 347.7 512 224 512zM416 80.45C415.7 79.69 414.4 77.27 409.8 73.31C402.4 67.11 389.9 60.09 371.6 53.57C335.4 40.62 283.2 32 224 32C164.8 32 112.6 40.62 76.37 53.57C58.1 60.09 45.59 67.11 38.25 73.31C33.55 77.27 32.29 79.69 32 80.45V182.1C46.47 192.7 69.9 202.8 100.9 210.4C135.5 218.9 177.1 224 224 224C270 224 312.5 218.9 347.1 210.4C378.1 202.8 401.5 192.7 416 182.1V80.45zM416 219.5C398.8 228.4 377.9 235.8 354.8 241.5C317.3 250.7 272.2 256 224 256C175.8 256 130.7 250.7 93.22 241.5C70.11 235.8 49.18 228.4 32 219.5V310.1C46.47 320.7 69.9 330.8 100.9 338.4C135.5 346.9 177.1 352 224 352C270 352 312.5 346.9 347.1 338.4C378.1 330.8 401.5 320.7 416 310.1V219.5zM38.25 438.7C45.59 444.9 58.1 451.9 76.37 458.4C112.6 471.4 164.8 480 224 480C283.2 480 335.4 471.4 371.6 458.4C389.9 451.9 402.4 444.9 409.8 438.7C414.4 434.7 415.7 432.3 416 431.6V347.5C398.8 356.4 377.9 363.8 354.8 369.5C317.3 378.7 272.2 384 224 384C175.8 384 130.7 378.7 93.22 369.5C70.11 363.8 49.18 356.4 32 347.5V431.6C32.29 432.3 33.55 434.7 38.25 438.7zM416 431.4C416.1 431.3 416.1 431.3 416.1 431.3L416 431.4zM31.96 431.4C31.94 431.3 31.93 431.3 31.92 431.3L31.96 431.4zM31.96 80.56C31.93 80.65 31.92 80.7 31.92 80.7L31.96 80.56zM416.1 80.7C416.1 80.7 416.1 80.65 416 80.56z" }) }));
 };
 exports.DataIcon = DataIcon;

package/dist/icons/effects.d.ts

@@ -0,0 +1,5 @@
+import type { SVGProps } from 'react';
+import React from 'react';
+export declare const EffectsIcon: React.FC<SVGProps<SVGSVGElement> & {
+    readonly color: string;
+}>;

package/dist/icons/effects.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EffectsIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const EffectsIcon = ({ color, ...props }) => {
+    return (jsx_runtime_1.jsx("svg", { ...props, viewBox: "0 0 16 16", children: jsx_runtime_1.jsx("path", { fill: color, d: "M4.405 4.48C4.575 3.82 4.865 3.325 5.275 2.995C5.695 2.665 6.25 2.5 6.94 2.5H9.235V4.06H7.045C6.555 4.06 6.235 4.3 6.085 4.78L5.83 5.68H7.975V7.255H5.395L3.805 13H2.02L3.625 7.255H1.96V5.68H4.075L4.405 4.48ZM8.57102 9.085L6.87602 5.68H8.79602L9.86102 7.99L11.991 5.68H14.331L10.686 9.415L12.426 13H10.491L9.35102 10.585L7.02602 13H4.68602L8.57102 9.085Z" }) }));
+};
+exports.EffectsIcon = EffectsIcon;

package/dist/icons/ellipsis.js

@@ -3,6 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.EllipsisIcon = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const EllipsisIcon = (props) => {
-    return (jsx_runtime_1.jsx("svg", { ...props.svgProps, viewBox: "0 0 448 512", children: jsx_runtime_1.jsx("path", { fill: props.fill, d: "M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z" }) }));
+    return (jsx_runtime_1.jsx("svg", { ...props.svgProps, viewBox: "0 0 448 512", children: jsx_runtime_1.jsx("path", { fill: props.fill, d: "M448 256a48 48 0 1 1-96 0 48 48 0 1 1 96 0zm-176 0a48 48 0 1 1-96 0 48 48 0 1 1 96 0zM48 304a48 48 0 1 1 0-96 48 48 0 1 1 0 96z" }) }));
 };
 exports.EllipsisIcon = EllipsisIcon;

package/dist/icons/external-link.d.ts

@@ -0,0 +1,5 @@
+import type { SVGProps } from 'react';
+import React from 'react';
+export declare const ExternalLinkIcon: React.FC<SVGProps<SVGSVGElement> & {
+    readonly color: string;
+}>;