@remotion/studio 4.0.503 → 4.0.504

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-43m68z1k.js").then(({ StudioInternals }) => {
       window.remotion_isStudio = true;
       window.remotion_isReadOnlyStudio = true;
       window.remotion_inputProps = "{}";

package/dist/helpers/inject-css.js

@@ -85,50 +85,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;
   }
 

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-menu-structure.js

@@ -55,12 +55,34 @@ const getFileMenu = ({ readOnlyStudio, closeMenu, previewServerState, setSelecte
     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 +102,7 @@ const getFileMenu = ({ readOnlyStudio, closeMenu, previewServerState, setSelecte
             ? null
             : {
                 type: 'divider',
-                id: 'new-folder-divider',
+                id: 'new-project-item-divider',
             },
         window.remotion_isReadOnlyStudio
             ? {
@@ -100,42 +122,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 +145,7 @@ const getFileMenu = ({ readOnlyStudio, closeMenu, previewServerState, setSelecte
                 quickSwitcherLabel: 'Download project',
             }
             : null,
-        !readOnlyStudio
+        !readOnlyStudio && downloadProject
             ? {
                 type: 'divider',
                 id: 'open-project-divider',
@@ -229,6 +215,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);
@@ -730,16 +760,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/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;
+}>;

package/dist/icons/external-link.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExternalLinkIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// Font Awesome Pro v7.3.1, Copyright 2026 Fonticons, Inc.
+// https://fontawesome.com/license (Commercial License)
+const ExternalLinkIcon = ({ color, ...props }) => {
+    return (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, d: "M304 0c-8.8 0-16 7.2-16 16s7.2 16 16 16l153.4 0-260.7 260.7c-6.2 6.2-6.2 16.4 0 22.6s16.4 6.2 22.6 0L480 54.6 480 208c0 8.8 7.2 16 16 16s16-7.2 16-16l0-192c0-8.8-7.2-16-16-16L304 0zM80 96C35.8 96 0 131.8 0 176L0 432c0 44.2 35.8 80 80 80l256 0c44.2 0 80-35.8 80-80l0-96c0-8.8-7.2-16-16-16s-16 7.2-16 16l0 96c0 26.5-21.5 48-48 48L80 480c-26.5 0-48-21.5-48-48l0-256c0-26.5 21.5-48 48-48l96 0c8.8 0 16-7.2 16-16s-7.2-16-16-16L80 96z" }) }));
+};
+exports.ExternalLinkIcon = ExternalLinkIcon;

package/dist/icons/fullscreen.js

@@ -2,5 +2,5 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FullscreenIcon = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const FullscreenIcon = ({ color, ...props }) => (jsx_runtime_1.jsx("svg", { viewBox: "0 0 448 512", ...props, children: jsx_runtime_1.jsx("path", { fill: color, d: "M0 180V56c0-13.3 10.7-24 24-24h124c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H64v84c0 6.6-5.4 12-12 12H12c-6.6 0-12-5.4-12-12zM288 44v40c0 6.6 5.4 12 12 12h84v84c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12V56c0-13.3-10.7-24-24-24H300c-6.6 0-12 5.4-12 12zm148 276h-40c-6.6 0-12 5.4-12 12v84h-84c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h124c13.3 0 24-10.7 24-24V332c0-6.6-5.4-12-12-12zM160 468v-40c0-6.6-5.4-12-12-12H64v-84c0-6.6-5.4-12-12-12H12c-6.6 0-12 5.4-12 12v124c0 13.3 10.7 24 24 24h124c6.6 0 12-5.4 12-12z" }) }));
+const FullscreenIcon = ({ color, ...props }) => (jsx_runtime_1.jsx("svg", { viewBox: "0 0 448 512", ...props, children: jsx_runtime_1.jsx("path", { fill: color, d: "M136 32c13.3 0 24 10.7 24 24s-10.7 24-24 24l-88 0 0 88c0 13.3-10.7 24-24 24S0 181.3 0 168L0 56C0 42.7 10.7 32 24 32l112 0zM0 344c0-13.3 10.7-24 24-24s24 10.7 24 24l0 88 88 0c13.3 0 24 10.7 24 24s-10.7 24-24 24L24 480c-13.3 0-24-10.7-24-24L0 344zM424 32c13.3 0 24 10.7 24 24l0 112c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-88-88 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l112 0zM400 344c0-13.3 10.7-24 24-24s24 10.7 24 24l0 112c0 13.3-10.7 24-24 24l-112 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l88 0 0-88z" }) }));
 exports.FullscreenIcon = FullscreenIcon;

package/dist/icons/gear.d.ts

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

package/dist/icons/gear.js

@@ -3,5 +3,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.GearIcon = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const colors_1 = require("../helpers/colors");
-const GearIcon = (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: "M168 255.1c0-47.7 39.4-88 88-88s88 40.3 88 88c0 49.5-39.4 88.9-88 88.9s-88-39.4-88-88.9zm88-56c-30.9 0-56 26-56 56 0 31.8 25.1 56 56 56s56-24.2 56-56c0-30-25.1-56-56-56zM65.67 230.6l-40.33-36.8c-11.12-10.1-13.68-26.6-6.16-39.6l30.24-52.4c7.52-13.02 23.09-19.05 37.42-14.48l51.96 16.58c13.4-10.34 28.2-18.94 44-25.47l11.7-53.27C197.7 10.47 210.7 0 225.8 0h60.4c15.1 0 28.1 10.47 31.3 25.16l11.7 53.27c14.9 6.53 30.6 15.13 44 25.47l52-16.58c14.3-4.57 29.9 1.46 37.4 14.48l30.2 52.4c7.5 13 5 29.5-6.1 39.6l-40.4 36.8c1.1 8.3 1.7 16.8 1.7 24.5 0 9.5-.6 18-1.7 26.3l40.4 36.8c11.1 10.1 13.6 26.6 6.1 39.6l-30.2 52.4c-7.5 13-23.1 19-37.4 14.5l-52-16.6c-13.4 10.3-29.1 18.9-44 25.5l-11.7 53.2c-3.2 14.7-16.2 25.2-31.3 25.2h-60.4c-15.1 0-28.1-10.5-31.3-25.2l-11.7-53.2c-15.8-6.6-30.6-15.2-44-25.5l-51.96 16.6c-14.33 4.5-29.9-1.5-37.42-14.5l-30.24-52.4c-7.52-13-4.96-29.5 6.16-39.6l40.33-36.8c-1.1-8.3-1.67-16.8-1.67-26.3 0-7.7.57-16.2 1.67-24.5zm92.73-101.4-13.3 10.3-67.97-21.7-30.24 52.4 52.69 48-2.19 16.6c-.92 6.9-1.39 14-1.39 20.3 0 8.1.47 15.2 1.39 22.1l2.19 16.6-52.69 48 30.24 52.4 67.97-21.7 13.3 10.3c11.1 8.6 23.5 15.8 36.6 20.3l15.5 7.3 15.3 69.6h60.4l15.3-69.6 14.6-7.3c14-4.5 26.4-11.7 37.5-20.3l13.3-10.3 68 21.7 30.2-52.4-52.7-48 2.2-16.6c.9-6.9 1.4-14 1.4-21.2 0-7.2-.5-14.3-1.4-21.2l-2.2-16.6 52.7-48-30.2-52.4-68 21.7-13.3-10.3c-11.1-8.6-23.5-15.8-37.5-21.2l-14.6-6.4L286.2 32h-60.4l-15.3 69.6L195 108c-13.1 5.4-25.5 12.6-36.6 21.2z" }) }));
+const GearIcon = ({ 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: "M168 255.1c0-47.7 39.4-88 88-88s88 40.3 88 88c0 49.5-39.4 88.9-88 88.9s-88-39.4-88-88.9zm88-56c-30.9 0-56 26-56 56 0 31.8 25.1 56 56 56s56-24.2 56-56c0-30-25.1-56-56-56zM65.67 230.6l-40.33-36.8c-11.12-10.1-13.68-26.6-6.16-39.6l30.24-52.4c7.52-13.02 23.09-19.05 37.42-14.48l51.96 16.58c13.4-10.34 28.2-18.94 44-25.47l11.7-53.27C197.7 10.47 210.7 0 225.8 0h60.4c15.1 0 28.1 10.47 31.3 25.16l11.7 53.27c14.9 6.53 30.6 15.13 44 25.47l52-16.58c14.3-4.57 29.9 1.46 37.4 14.48l30.2 52.4c7.5 13 5 29.5-6.1 39.6l-40.4 36.8c1.1 8.3 1.7 16.8 1.7 24.5 0 9.5-.6 18-1.7 26.3l40.4 36.8c11.1 10.1 13.6 26.6 6.1 39.6l-30.2 52.4c-7.5 13-23.1 19-37.4 14.5l-52-16.6c-13.4 10.3-29.1 18.9-44 25.5l-11.7 53.2c-3.2 14.7-16.2 25.2-31.3 25.2h-60.4c-15.1 0-28.1-10.5-31.3-25.2l-11.7-53.2c-15.8-6.6-30.6-15.2-44-25.5l-51.96 16.6c-14.33 4.5-29.9-1.5-37.42-14.5l-30.24-52.4c-7.52-13-4.96-29.5 6.16-39.6l40.33-36.8c-1.1-8.3-1.67-16.8-1.67-26.3 0-7.7.57-16.2 1.67-24.5zm92.73-101.4-13.3 10.3-67.97-21.7-30.24 52.4 52.69 48-2.19 16.6c-.92 6.9-1.39 14-1.39 20.3 0 8.1.47 15.2 1.39 22.1l2.19 16.6-52.69 48 30.24 52.4 67.97-21.7 13.3 10.3c11.1 8.6 23.5 15.8 36.6 20.3l15.5 7.3 15.3 69.6h60.4l15.3-69.6 14.6-7.3c14-4.5 26.4-11.7 37.5-20.3l13.3-10.3 68 21.7 30.2-52.4-52.7-48 2.2-16.6c.9-6.9 1.4-14 1.4-21.2 0-7.2-.5-14.3-1.4-21.2l-2.2-16.6 52.7-48-30.2-52.4-68 21.7-13.3-10.3c-11.1-8.6-23.5-15.8-37.5-21.2l-14.6-6.4L286.2 32h-60.4l-15.3 69.6L195 108c-13.1 5.4-25.5 12.6-36.6 21.2z" }) }));
 exports.GearIcon = GearIcon;

package/dist/icons/gif.d.ts

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

package/dist/icons/gif.js

@@ -3,5 +3,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.GifIcon = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const colors_1 = require("../helpers/colors");
-const GifIcon = (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: "M512 32H64C28.65 32 0 60.65 0 96v320c0 35.35 28.65 64 64 64h448c35.35 0 64-28.65 64-64V96c0-35.35-28.7-64-64-64zm32 384c0 17.64-14.36 32-32 32H64c-17.64 0-32-14.36-32-32V96c0-17.64 14.36-32 32-32h448c17.64 0 32 14.36 32 32v320zm-80-256h-96c-8.8 0-16 7.2-16 16v160c0 8.844 7.156 16 16 16s16-7.156 16-16v-64h56c8.844 0 16-7.156 16-16s-7.156-16-16-16h-56v-48h80c8.8 0 16-7.2 16-16s-7.2-16-16-16zm-160 0c-8.8 0-16 7.2-16 16v160c0 8.844 7.156 16 16 16s16-7.156 16-16V176c0-8.8-7.2-16-16-16zm-64 80h-64c-8.8 0-16 7.2-16 16s7.156 16 16 16h48v33.45c-24.83 19.91-69.13 18.16-91.48-4.203-24.95-24.95-24.95-65.55 0-90.5 25.03-25 64.19-25 89.22 0 6.25 6.25 16.38 6.25 22.62 0s6.25-16.38 0-22.62c-37.69-37.72-96.78-37.72-134.5 0-37.42 37.42-37.42 98.33 0 135.8C127.8 341.8 153.5 352 180.6 352c27.06 0 52.84-10.25 70.7-28.12 3-2.98 4.7-7.08 4.7-11.28V256c0-8.8-7.2-16-16-16z" }) }));
+const GifIcon = ({ 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: "M512 32H64C28.65 32 0 60.65 0 96v320c0 35.35 28.65 64 64 64h448c35.35 0 64-28.65 64-64V96c0-35.35-28.7-64-64-64zm32 384c0 17.64-14.36 32-32 32H64c-17.64 0-32-14.36-32-32V96c0-17.64 14.36-32 32-32h448c17.64 0 32 14.36 32 32v320zm-80-256h-96c-8.8 0-16 7.2-16 16v160c0 8.844 7.156 16 16 16s16-7.156 16-16v-64h56c8.844 0 16-7.156 16-16s-7.156-16-16-16h-56v-48h80c8.8 0 16-7.2 16-16s-7.2-16-16-16zm-160 0c-8.8 0-16 7.2-16 16v160c0 8.844 7.156 16 16 16s16-7.156 16-16V176c0-8.8-7.2-16-16-16zm-64 80h-64c-8.8 0-16 7.2-16 16s7.156 16 16 16h48v33.45c-24.83 19.91-69.13 18.16-91.48-4.203-24.95-24.95-24.95-65.55 0-90.5 25.03-25 64.19-25 89.22 0 6.25 6.25 16.38 6.25 22.62 0s6.25-16.38 0-22.62c-37.69-37.72-96.78-37.72-134.5 0-37.42 37.42-37.42 98.33 0 135.8C127.8 341.8 153.5 352 180.6 352c27.06 0 52.84-10.25 70.7-28.12 3-2.98 4.7-7.08 4.7-11.28V256c0-8.8-7.2-16-16-16z" }) }));
 exports.GifIcon = GifIcon;

package/dist/icons/input-props.d.ts

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

package/dist/icons/input-props.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InputPropsIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../helpers/colors");
+const InputPropsIcon = (props) => {
+    return (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: "M144 32c-44.2 0-80 35.8-80 80v53.5c0 12.7-5.1 24.9-14.1 33.9L4.7 244.7C1.7 247.7 0 251.8 0 256s1.7 8.3 4.7 11.3L50 312.6c9 9 14.1 21.2 14.1 33.9V400c0 44.2 35.8 80 80 80h64c8.8 0 16-7.2 16-16s-7.2-16-16-16h-64c-26.5 0-48-21.5-48-48v-53.5c0-21.2-8.4-41.6-23.4-56.6L38.6 256l34-33.9c15-15 23.4-35.4 23.4-56.6V112c0-26.5 21.5-48 48-48h64c8.8 0 16-7.2 16-16s-7.2-16-16-16h-64zm288 0h-64c-8.8 0-16 7.2-16 16s7.2 16 16 16h64c26.5 0 48 21.5 48 48v53.5c0 21.2 8.4 41.6 23.4 56.6l33.9 33.9-33.9 33.9c-15 15-23.4 35.4-23.4 56.6V400c0 26.5-21.5 48-48 48h-64c-8.8 0-16 7.2-16 16s7.2 16 16 16h64c44.2 0 80-35.8 80-80v-53.5c0-12.7 5.1-24.9 14.1-33.9l45.3-45.3c3-3 4.7-7.1 4.7-11.3s-1.7-8.3-4.7-11.3l-45.3-45.3c-9-9-14.1-21.2-14.1-33.9V112c0-44.2-35.8-80-80-80z" }) }));
+};
+exports.InputPropsIcon = InputPropsIcon;

package/dist/icons/jump-to-start.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.JumpToStart = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const colors_1 = require("../helpers/colors");
-const JumpToStart = (props) => {
-    return (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, d: "M0 415.1V96.03c0-17.67 14.33-31.1 31.1-31.1C49.67 64.03 64 78.36 64 96.03v131.8l171.5-156.5C256.1 54.28 288 68.66 288 96.03v131.9l171.5-156.5C480.1 54.28 512 68.66 512 96.03v319.9c0 27.37-31.88 41.74-52.5 24.62L288 285.2v130.7c0 27.37-31.88 41.74-52.5 24.62L64 285.2v130.7c0 17.67-14.33 31.1-31.1 31.1C14.33 447.1 0 433.6 0 415.1z" }) }));
+const JumpToStart = ({ color = colors_1.CURRENT_COLOR, ...props }) => {
+    return (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, d: "M0 415.1V96.03c0-17.67 14.33-31.1 31.1-31.1C49.67 64.03 64 78.36 64 96.03v131.8l171.5-156.5C256.1 54.28 288 68.66 288 96.03v131.9l171.5-156.5C480.1 54.28 512 68.66 512 96.03v319.9c0 27.37-31.88 41.74-52.5 24.62L288 285.2v130.7c0 27.37-31.88 41.74-52.5 24.62L64 285.2v130.7c0 17.67-14.33 31.1-31.1 31.1C14.33 447.1 0 433.6 0 415.1z" }) }));
 };
 exports.JumpToStart = JumpToStart;

package/dist/icons/magnet.d.ts

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

package/dist/icons/magnet.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MagnetIcon = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const MagnetIcon = (props) => {
-    return (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", ...props, children: jsx_runtime_1.jsx("path", { transform: "rotate(180 256 256)", d: "M32 176v112c0 123.7 100.3 224 224 224s224-100.3 224-224V176H352v112c0 53-43 96-96 96s-96-43-96-96V176H32zm0-48h128V32c0-17.7-14.3-32-32-32H64C46.3 0 32 14.3 32 32v96zm320 0h128V32c0-17.7-14.3-32-32-32h-64c-17.7 0-32 14.3-32 32v96z" }) }));
+const MagnetIcon = ({ 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, transform: "rotate(180 224 256)", d: "M48 64c-8.8 0-16 7.2-16 16l0 80 80 0 0-80c0-8.8-7.2-16-16-16L48 64zM32 288c0 106 86 192 192 192s192-86 192-192l0-96-80 0 0 96c0 61.9-50.1 112-112 112S112 349.9 112 288l0-96-80 0 0 96zM416 160l0-80c0-8.8-7.2-16-16-16l-48 0c-8.8 0-16 7.2-16 16l0 80 80 0zM0 80C0 53.5 21.5 32 48 32l48 0c26.5 0 48 21.5 48 48l0 208c0 44.2 35.8 80 80 80s80-35.8 80-80l0-208c0-26.5 21.5-48 48-48l48 0c26.5 0 48 21.5 48 48l0 208c0 123.7-100.3 224-224 224S0 411.7 0 288L0 80z" }) }));
 };
 exports.MagnetIcon = MagnetIcon;

package/dist/icons/media-volume.d.ts

@@ -1,2 +1,6 @@
-export declare const VolumeOffIcon: React.FC;
-export declare const VolumeOnIcon: React.FC;
+export declare const VolumeOffIcon: React.FC<{
+    readonly color: string;
+}>;
+export declare const VolumeOnIcon: React.FC<{
+    readonly color: string;
+}>;

package/dist/icons/media-volume.js

@@ -2,13 +2,15 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VolumeOnIcon = exports.VolumeOffIcon = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const colors_1 = require("../helpers/colors");
-const size = 22;
-const VolumeOffIcon = () => {
-    return (jsx_runtime_1.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", children: jsx_runtime_1.jsx("path", { d: "M3.63 3.63a.996.996 0 000 1.41L7.29 8.7 7 9H4c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1h3l3.29 3.29c.63.63 1.71.18 1.71-.71v-4.17l4.18 4.18c-.49.37-1.02.68-1.6.91-.36.15-.58.53-.58.92 0 .72.73 1.18 1.39.91.8-.33 1.55-.77 2.22-1.31l1.34 1.34a.996.996 0 101.41-1.41L5.05 3.63c-.39-.39-1.02-.39-1.42 0zM19 12c0 .82-.15 1.61-.41 2.34l1.53 1.53c.56-1.17.88-2.48.88-3.87 0-3.83-2.4-7.11-5.78-8.4-.59-.23-1.22.23-1.22.86v.19c0 .38.25.71.61.85C17.18 6.54 19 9.06 19 12zm-8.71-6.29l-.17.17L12 7.76V6.41c0-.89-1.08-1.33-1.71-.7zM16.5 12A4.5 4.5 0 0014 7.97v1.79l2.48 2.48c.01-.08.02-.16.02-.24z", fill: colors_1.BLUE }) }));
+const size = 21;
+const speakerPath = 'M112 320H48c-8.8 0-16-7.2-16-16v-96c0-8.8 7.2-16 16-16h64c8.5 0 16.6-3.4 22.6-9.4L252.7 64.6c.4-.4.9-.6 1.4-.6 1.1 0 1.9.9 1.9 1.9V446c0 1.1-.9 1.9-1.9 1.9-.5 0-1-.2-1.4-.6L134.6 329.4c-6-6-14.1-9.4-22.6-9.4zm0-160H48c-26.5 0-48 21.5-48 48v96c0 26.5 21.5 48 48 48h64l118.1 118.1c6.4 6.4 15 9.9 24 9.9 18.7 0 33.9-15.2 33.9-33.9V65.9C288 47.2 272.8 32 254.1 32c-9 0-17.6 3.6-24 9.9L112 160zm243.2 22.4c-5.3 7.1-3.9 17.1 3.2 22.4 15.6 11.7 25.6 30.3 25.6 51.2s-10 39.5-25.6 51.2c-7.1 5.3-8.5 15.3-3.2 22.4s15.3 8.5 22.4 3.2C400.9 315.3 416 287.4 416 256s-15.1-59.3-38.4-76.8c-7.1-5.3-17.1-3.9-22.4 3.2zm87-74.5c-6.8-5.6-16.9-4.7-22.5 2.1s-4.7 16.9 2.1 22.5C457.4 161.9 480 206.3 480 256s-22.6 94.1-58.2 123.4c-6.8 5.6-7.8 15.7-2.1 22.5s15.7 7.8 22.5 2.2C484.8 368.9 512 315.6 512 256s-27.2-112.9-69.8-148.1z';
+const VolumeOffIcon = ({ color }) => {
+    return (jsx_runtime_1.jsxs("svg", { width: size, height: size, viewBox: "0 0 576 512", children: [
+            jsx_runtime_1.jsx("g", { transform: "translate(32 0)", children: jsx_runtime_1.jsx("path", { d: speakerPath, fill: color }) }), jsx_runtime_1.jsx("path", { d: "M16-16 560 528", fill: "none", stroke: color, strokeLinecap: "round", strokeWidth: "32" })
+        ] }));
 };
 exports.VolumeOffIcon = VolumeOffIcon;
-const VolumeOnIcon = () => {
-    return (jsx_runtime_1.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", children: jsx_runtime_1.jsx("path", { d: "M3 10v4c0 .55.45 1 1 1h3l3.29 3.29c.63.63 1.71.18 1.71-.71V6.41c0-.89-1.08-1.34-1.71-.71L7 9H4c-.55 0-1 .45-1 1zm13.5 2A4.5 4.5 0 0014 7.97v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 4.45v.2c0 .38.25.71.6.85C17.18 6.53 19 9.06 19 12s-1.82 5.47-4.4 6.5c-.36.14-.6.47-.6.85v.2c0 .63.63 1.07 1.21.85C18.6 19.11 21 15.84 21 12s-2.4-7.11-5.79-8.4c-.58-.23-1.21.22-1.21.85z", fill: colors_1.WHITE_HEX }) }));
+const VolumeOnIcon = ({ color }) => {
+    return (jsx_runtime_1.jsx("svg", { width: size, height: size, viewBox: "0 0 576 512", children: jsx_runtime_1.jsx("g", { transform: "translate(32 0)", children: jsx_runtime_1.jsx("path", { d: speakerPath, fill: color }) }) }));
 };
 exports.VolumeOnIcon = VolumeOnIcon;

package/dist/icons/minus.d.ts

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

package/dist/icons/minus.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Minus = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const colors_1 = require("../helpers/colors");
-const Minus = (props) => {
-    return (jsx_runtime_1.jsx("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", children: jsx_runtime_1.jsx("path", { fill: colors_1.CURRENT_COLOR, d: "M400 288h-352c-17.69 0-32-14.32-32-32.01s14.31-31.99 32-31.99h352c17.69 0 32 14.3 32 31.99S417.7 288 400 288z" }) }));
+const Minus = ({ color = colors_1.CURRENT_COLOR, ...props }) => {
+    return (jsx_runtime_1.jsx("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", children: jsx_runtime_1.jsx("path", { fill: color, d: "M0 256c0-8.8 7.2-16 16-16l416 0c8.8 0 16 7.2 16 16s-7.2 16-16 16L16 272c-8.8 0-16-7.2-16-16z" }) }));
 };
 exports.Minus = Minus;