@remotion/studio 4.0.484 → 4.0.486

package/dist/helpers/timeline-layout.js

@@ -14,7 +14,7 @@ exports.TIMELINE_ITEM_BORDER_BOTTOM = 1;
 exports.TIMELINE_TRACK_EXPANDED_HEIGHT = 100;
 exports.TREE_GROUP_ROW_HEIGHT = 22;
 exports.EXPANDED_SECTION_PADDING_RIGHT = 10;
-const buildTimelineTree = ({ sequence, nodePathInfo, getDragOverrides, getEffectDragOverrides, propStatuses, }) => {
+const buildTimelineTree = ({ sequence, nodePathInfo, getDragOverrides, getEffectDragOverrides, propStatuses, includeTextContent, }) => {
     var _a;
     const roots = [];
     const { sequenceSubscriptionKey, index, auxiliaryKeys, supportsEffects } = nodePathInfo;
@@ -24,6 +24,7 @@ const buildTimelineTree = ({ sequence, nodePathInfo, getDragOverrides, getEffect
         getDragOverrides,
         propStatuses,
         nodePath: sequenceSubscriptionKey,
+        includeTextContent,
     });
     if (controlFields && controlFields.length > 0) {
         for (const f of controlFields) {
@@ -134,6 +135,7 @@ const getExpandedTrackHeight = ({ sequence, nodePathInfo, getIsExpanded, propSta
         getDragOverrides: () => ({}),
         getEffectDragOverrides: () => ({}),
         propStatuses,
+        includeTextContent: false,
     });
     const flat = (0, exports.flattenVisibleTreeNodes)({ nodes: tree, getIsExpanded });
     if (flat.length === 0) {

package/dist/helpers/use-create-composition.d.ts

@@ -0,0 +1,35 @@
+import type { SymbolicatedStackFrame } from '@remotion/studio-shared';
+export declare const getUniqueCompositionName: (compositions: import("remotion").AnyComposition[]) => string;
+export declare const useCreateComposition: ({ compositions, durationInFrames, folderName, newId, parentName, selectedFrameRate, size, }: {
+    compositions: import("remotion").AnyComposition[];
+    durationInFrames: number;
+    folderName: string | null;
+    newId: string;
+    parentName: string | null;
+    selectedFrameRate: number;
+    size: {
+        width: number;
+        height: number;
+    };
+}) => {
+    codemod: {
+        type: "new-composition";
+        newId: string;
+        componentName: string;
+        componentImportPath: string;
+        folderName: string | null;
+        parentName: string | null;
+        newHeight: number;
+        newWidth: number;
+        newFps: number;
+        newDurationInFrames: number;
+    };
+    createComposition: ({ signal, symbolicatedStack, }: {
+        signal: AbortSignal;
+        symbolicatedStack: SymbolicatedStackFrame | null;
+    }) => Promise<import("@remotion/studio-shared").ApplyCodemodResponse>;
+    heightValidationMessage: string | null;
+    nameValidationMessage: string | null;
+    valid: boolean;
+    widthValidationMessage: string | null;
+};

package/dist/helpers/use-create-composition.js

@@ -0,0 +1,111 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCreateComposition = exports.getUniqueCompositionName = void 0;
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const actions_1 = require("../components/RenderQueue/actions");
+const url_state_1 = require("./url-state");
+const validate_new_comp_data_1 = require("./validate-new-comp-data");
+const toPascalCase = (value) => {
+    var _a;
+    const words = (_a = value.match(/[a-zA-Z0-9]+/g)) !== null && _a !== void 0 ? _a : [];
+    const candidate = words
+        .map((word) => `${word.charAt(0).toUpperCase()}${word.slice(1)}`)
+        .join('');
+    if (!candidate) {
+        return 'NewComposition';
+    }
+    if (/^[0-9]/.test(candidate)) {
+        return `Composition${candidate}`;
+    }
+    return candidate;
+};
+const waitForComposition = (compositionId) => {
+    return new Promise((resolve) => {
+        const started = Date.now();
+        const interval = window.setInterval(() => {
+            var _a;
+            var _b;
+            const compositionNames = (_b = (_a = window.remotion_getCompositionNames) === null || _a === void 0 ? void 0 : _a.call(window)) !== null && _b !== void 0 ? _b : [];
+            if (compositionNames.includes(compositionId) ||
+                Date.now() - started > 10000) {
+                window.clearInterval(interval);
+                resolve();
+            }
+        }, 100);
+    });
+};
+const getUniqueCompositionName = (compositions) => {
+    let counter = 1;
+    while (true) {
+        const name = counter === 1 ? 'NewComposition' : `NewComposition${counter}`;
+        const err = (0, validate_new_comp_data_1.validateCompositionName)(name, compositions);
+        if (!err) {
+            return name;
+        }
+        counter++;
+    }
+};
+exports.getUniqueCompositionName = getUniqueCompositionName;
+const useCreateComposition = ({ compositions, durationInFrames, folderName, newId, parentName, selectedFrameRate, size, }) => {
+    const { setCanvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionSetters);
+    const componentName = (0, react_1.useMemo)(() => toPascalCase(newId), [newId]);
+    const nameValidationMessage = (0, react_1.useMemo)(() => {
+        return (0, validate_new_comp_data_1.validateCompositionName)(newId, compositions);
+    }, [compositions, newId]);
+    const widthValidationMessage = (0, react_1.useMemo)(() => {
+        return (0, validate_new_comp_data_1.validateCompositionDimension)('Width', size.width);
+    }, [size.width]);
+    const heightValidationMessage = (0, react_1.useMemo)(() => {
+        return (0, validate_new_comp_data_1.validateCompositionDimension)('Height', size.height);
+    }, [size.height]);
+    const codemod = (0, react_1.useMemo)(() => {
+        return {
+            type: 'new-composition',
+            newDurationInFrames: Number(durationInFrames),
+            newFps: Number(selectedFrameRate),
+            newHeight: Number(size.height),
+            newWidth: Number(size.width),
+            newId,
+            componentName,
+            componentImportPath: `./${componentName}`,
+            folderName,
+            parentName,
+        };
+    }, [
+        componentName,
+        durationInFrames,
+        folderName,
+        newId,
+        parentName,
+        selectedFrameRate,
+        size.height,
+        size.width,
+    ]);
+    const valid = nameValidationMessage === null &&
+        widthValidationMessage === null &&
+        heightValidationMessage === null;
+    const createComposition = (0, react_1.useCallback)(async ({ signal, symbolicatedStack, }) => {
+        const result = await (0, actions_1.applyCodemod)({
+            codemod,
+            dryRun: false,
+            signal,
+            symbolicatedStack,
+        });
+        if (result.success) {
+            await waitForComposition(newId);
+            setCanvasContent({ type: 'composition', compositionId: newId });
+            (0, url_state_1.pushUrl)(`/${newId}`);
+        }
+        return result;
+    }, [codemod, newId, setCanvasContent]);
+    return {
+        codemod,
+        createComposition,
+        heightValidationMessage,
+        nameValidationMessage,
+        valid,
+        widthValidationMessage,
+    };
+};
+exports.useCreateComposition = useCreateComposition;

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

@@ -24,6 +24,7 @@ const modals_1 = require("../state/modals");
 const sidebar_1 = require("../state/sidebar");
 const check_fullscreen_support_1 = require("./check-fullscreen-support");
 const client_id_1 = require("./client-id");
+const colors_1 = require("./colors");
 const get_git_menu_item_1 = require("./get-git-menu-item");
 const mobile_layout_1 = require("./mobile-layout");
 const open_in_editor_1 = require("./open-in-editor");
@@ -39,6 +40,33 @@ const rotate = {
 const ICON_SIZE = 16;
 const getFileMenu = ({ readOnlyStudio, closeMenu, previewServerState, setSelectedModal, }) => {
     const items = [
+        readOnlyStudio
+            ? null
+            : {
+                id: 'new-folder',
+                value: 'new-folder',
+                label: 'New Folder...',
+                onClick: () => {
+                    closeMenu();
+                    setSelectedModal({
+                        type: 'new-folder',
+                        parentName: null,
+                        stack: null,
+                    });
+                },
+                type: 'item',
+                keyHint: null,
+                leftItem: null,
+                subMenu: null,
+                quickSwitcherLabel: 'New folder...',
+                disabled: previewServerState !== 'connected',
+            },
+        readOnlyStudio
+            ? null
+            : {
+                type: 'divider',
+                id: 'new-folder-divider',
+            },
         window.remotion_isReadOnlyStudio
             ? {
                 id: 'input-props-override',
@@ -184,7 +212,7 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
         let struct = [
             {
                 id: 'remotion',
-                label: (jsx_runtime_1.jsx(layout_1.Row, { align: "center", justify: "center", 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: "#fff", stroke: "#fff", 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", 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.WHITE_HEX, stroke: colors_1.WHITE_HEX, 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" }) }) })),
                 leaveLeftPadding: false,
                 items: [
                     {
@@ -653,7 +681,7 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
                         : {
                             id: 'install-packages',
                             value: 'install-packages',
-                            label: 'Install package',
+                            label: 'Install package...',
                             onClick: () => {
                                 closeMenu();
                                 setSelectedModal({
@@ -665,7 +693,7 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
                             keyHint: null,
                             leftItem: null,
                             subMenu: null,
-                            quickSwitcherLabel: `Install package`,
+                            quickSwitcherLabel: `Install package...`,
                         },
                 ].filter(remotion_1.Internals.truthy),
                 quickSwitcherLabel: null,

package/dist/helpers/use-rename-composition.d.ts

@@ -0,0 +1,16 @@
+import type { RecastCodemod, SymbolicatedStackFrame } from '@remotion/studio-shared';
+export declare const useRenameComposition: ({ compositions, currentId, newId, }: {
+    compositions: import("remotion").AnyComposition[];
+    currentId: string;
+    newId: string;
+}) => {
+    codemod: RecastCodemod;
+    getValidationMessage: (value: string) => string | null;
+    renameComposition: ({ newCompositionId, signal, symbolicatedStack, }: {
+        newCompositionId: string;
+        signal: AbortSignal;
+        symbolicatedStack: SymbolicatedStackFrame | null;
+    }) => Promise<import("@remotion/studio-shared").ApplyCodemodResponse>;
+    valid: boolean;
+    validationMessage: string | null;
+};

package/dist/helpers/use-rename-composition.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRenameComposition = void 0;
+const react_1 = require("react");
+const actions_1 = require("../components/RenderQueue/actions");
+const url_state_1 = require("./url-state");
+const validate_new_comp_data_1 = require("./validate-new-comp-data");
+const useRenameComposition = ({ compositions, currentId, newId, }) => {
+    const getValidationMessage = (0, react_1.useCallback)((value) => {
+        if (value === currentId) {
+            return null;
+        }
+        return (0, validate_new_comp_data_1.validateCompositionName)(value, compositions);
+    }, [compositions, currentId]);
+    const getCodemod = (0, react_1.useCallback)((value) => {
+        return {
+            type: 'rename-composition',
+            idToRename: currentId,
+            newId: value,
+        };
+    }, [currentId]);
+    const validationMessage = (0, react_1.useMemo)(() => {
+        return getValidationMessage(newId);
+    }, [getValidationMessage, newId]);
+    const codemod = (0, react_1.useMemo)(() => {
+        return getCodemod(newId);
+    }, [getCodemod, newId]);
+    const valid = validationMessage === null && currentId !== newId;
+    const renameComposition = (0, react_1.useCallback)(async ({ newCompositionId, signal, symbolicatedStack, }) => {
+        const result = await (0, actions_1.applyCodemod)({
+            codemod: getCodemod(newCompositionId),
+            dryRun: false,
+            signal,
+            symbolicatedStack,
+        });
+        if (result.success) {
+            (0, url_state_1.pushUrl)(`/${newCompositionId}`);
+        }
+        return result;
+    }, [getCodemod]);
+    return {
+        codemod,
+        getValidationMessage,
+        renameComposition,
+        valid,
+        validationMessage,
+    };
+};
+exports.useRenameComposition = useRenameComposition;

package/dist/helpers/validate-folder-rename.js

@@ -1,19 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.validateFolderRename = void 0;
-const remotion_1 = require("remotion");
+const validate_new_folder_name_1 = require("./validate-new-folder-name");
 const validateFolderRename = ({ folders, newName, originalName, parentName, }) => {
-    if (!remotion_1.Internals.isFolderNameValid(newName)) {
-        return remotion_1.Internals.invalidFolderNameErrorMessage;
-    }
     if (newName === originalName) {
         return null;
     }
-    if (folders.find((folder) => {
-        return folder.name === newName && folder.parent === parentName;
-    })) {
-        return `A folder with that name already exists.`;
-    }
-    return null;
+    return (0, validate_new_folder_name_1.validateNewFolderName)({ folders, newName, parentName });
 };
 exports.validateFolderRename = validateFolderRename;

package/dist/helpers/validate-new-folder-name.d.ts

@@ -0,0 +1,5 @@
+export declare const validateNewFolderName: ({ folders, newName, parentName, }: {
+    folders: import("remotion").TFolder[];
+    newName: string;
+    parentName: string | null;
+}) => string | null;

package/dist/helpers/validate-new-folder-name.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.validateNewFolderName = void 0;
+const remotion_1 = require("remotion");
+const validateNewFolderName = ({ folders, newName, parentName, }) => {
+    if (!remotion_1.Internals.isFolderNameValid(newName)) {
+        return remotion_1.Internals.invalidFolderNameErrorMessage;
+    }
+    if (folders.find((folder) => {
+        return folder.name === newName && folder.parent === parentName;
+    })) {
+        return `A folder with that name already exists.`;
+    }
+    return null;
+};
+exports.validateNewFolderName = validateNewFolderName;

package/dist/hot-middleware-client/client.js

@@ -5,12 +5,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.enableHotMiddleware = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
 const error_origin_1 = require("../error-overlay/error-origin");
+const colors_1 = require("../helpers/colors");
 const preview_server_events_1 = require("../helpers/preview-server-events");
 const process_update_1 = require("./process-update");
 function createReporter() {
     const styles = {
-        errors: 'color: #ff0000;',
-        warnings: 'color: #999933;',
+        errors: colors_1.HOT_MIDDLEWARE_ERROR_STYLE,
+        warnings: colors_1.HOT_MIDDLEWARE_WARNING_STYLE,
     };
     let previousProblems = null;
     function log(type, obj) {

package/dist/icons/Checkmark.js

@@ -2,5 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Checkmark = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const Checkmark = ({ size = 14 }) => (jsx_runtime_1.jsx("svg", { focusable: "false", role: "img", viewBox: "0 0 512 512", style: { width: size, height: size }, children: jsx_runtime_1.jsx("path", { fill: "currentColor", d: "M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z" }) }));
+const colors_1 = require("../helpers/colors");
+const Checkmark = ({ size = 14 }) => (jsx_runtime_1.jsx("svg", { focusable: "false", role: "img", viewBox: "0 0 512 512", style: { width: size, height: size }, children: jsx_runtime_1.jsx("path", { fill: colors_1.CURRENT_COLOR, d: "M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z" }) }));
 exports.Checkmark = Checkmark;

package/dist/icons/audio.js

@@ -2,5 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AudioIcon = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-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: "currentcolor", 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 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" }) }));
 exports.AudioIcon = AudioIcon;

package/dist/icons/caret.js

@@ -16,10 +16,10 @@ const caretDownSmall = {
 const angleDown = {
     width: 10,
 };
-const CaretRight = () => (jsx_runtime_1.jsx("svg", { viewBox: "0 0 192 512", style: caret, 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" }) }));
+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 = ({ small = false, }) => {
-    return (jsx_runtime_1.jsx("svg", { viewBox: "0 0 320 512", style: small ? caretDownSmall : caretDown, 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", { viewBox: "0 0 320 512", style: small ? caretDownSmall : caretDown, 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;
 const AngleDown = ({ down }) => {

package/dist/icons/certificate.js

@@ -2,5 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CertificateIcon = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-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: "currentcolor", 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 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" }) }));
 exports.CertificateIcon = CertificateIcon;

package/dist/icons/data.js

@@ -2,7 +2,8 @@
 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: "currentcolor", 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" }) }));
+    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" }) }));
 };
 exports.DataIcon = DataIcon;

package/dist/icons/eyedropper.js

@@ -2,5 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EyedropperIcon = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const EyedropperIcon = ({ color, ...props }) => (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 640 640", ...props, children: jsx_runtime_1.jsx("path", { fill: color !== null && color !== void 0 ? color : 'currentColor', d: "M263 233C278.6 248.6 315.3 285.3 373.1 343.1C400.1 370.1 414 384 415 385C424.4 394.4 439.6 394.4 448.9 385C458.2 375.6 458.3 360.4 448.9 351.1L440.9 343.1C457.3 326.7 492.4 291.6 546.1 237.9C565.2 218.8 575.9 192.9 575.9 165.9C575.9 109.7 530.3 64.1 474.1 64.1C447.1 64.1 421.2 74.8 402.1 93.9C348.4 147.6 313.3 182.7 296.9 199.1L288.9 191.1C279.5 181.7 264.3 181.7 255 191.1C245.7 200.5 245.6 215.7 255 225L255 225L263 233zM512.2 203.9L407 309.1L330.9 233L436.1 127.8C446.2 117.7 459.9 112 474.2 112C503.9 112 528 136.1 528 165.8C528 180.1 522.3 193.8 512.2 203.9zM117.1 393C103.6 406.5 96 424.8 96 443.9L96 496.8L68 538.8C61.7 548.3 62.9 561 71 569.1C79.1 577.2 91.8 578.4 101.3 572.1L143.3 544.1L196.2 544.1C215.3 544.1 233.6 536.5 247.1 523L366.1 404L332.2 370.1L213.2 489.1C208.7 493.6 202.6 496.1 196.2 496.1L144.1 496.1L144.1 444C144.1 437.6 146.6 431.5 151.1 427L270.1 308L236.2 274.1L117.2 393.1z" }) }));
+const colors_1 = require("../helpers/colors");
+const EyedropperIcon = ({ color, ...props }) => (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 640 640", ...props, children: jsx_runtime_1.jsx("path", { fill: color !== null && color !== void 0 ? color : colors_1.CURRENT_COLOR, d: "M263 233C278.6 248.6 315.3 285.3 373.1 343.1C400.1 370.1 414 384 415 385C424.4 394.4 439.6 394.4 448.9 385C458.2 375.6 458.3 360.4 448.9 351.1L440.9 343.1C457.3 326.7 492.4 291.6 546.1 237.9C565.2 218.8 575.9 192.9 575.9 165.9C575.9 109.7 530.3 64.1 474.1 64.1C447.1 64.1 421.2 74.8 402.1 93.9C348.4 147.6 313.3 182.7 296.9 199.1L288.9 191.1C279.5 181.7 264.3 181.7 255 191.1C245.7 200.5 245.6 215.7 255 225L255 225L263 233zM512.2 203.9L407 309.1L330.9 233L436.1 127.8C446.2 117.7 459.9 112 474.2 112C503.9 112 528 136.1 528 165.8C528 180.1 522.3 193.8 512.2 203.9zM117.1 393C103.6 406.5 96 424.8 96 443.9L96 496.8L68 538.8C61.7 548.3 62.9 561 71 569.1C79.1 577.2 91.8 578.4 101.3 572.1L143.3 544.1L196.2 544.1C215.3 544.1 233.6 536.5 247.1 523L366.1 404L332.2 370.1L213.2 489.1C208.7 493.6 202.6 496.1 196.2 496.1L144.1 496.1L144.1 444C144.1 437.6 146.6 431.5 151.1 427L270.1 308L236.2 274.1L117.2 393.1z" }) }));
 exports.EyedropperIcon = EyedropperIcon;

package/dist/icons/file.js

@@ -2,5 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FileIcon = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const FileIcon = ({ color, ...props }) => (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 384 512", ...props, children: jsx_runtime_1.jsx("path", { fill: color !== null && color !== void 0 ? color : 'currentColor', d: "M0 64C0 28.65 28.65 0 64 0h156.1c12.7 0 25 5.057 34 14.06L369.9 129.9c9 9 14.1 21.3 14.1 34V448c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V64zm352 128H240c-26.5 0-48-21.5-48-48V32H64c-17.67 0-32 14.33-32 32v384c0 17.7 14.33 32 32 32h256c17.7 0 32-14.3 32-32V192zm-4.7-39.4L231.4 36.69c-2-2.07-4.6-3.51-7.4-4.21V144c0 8.8 7.2 16 16 16h111.5c-.7-2.8-2.1-5.4-4.2-7.4z" }) }));
+const colors_1 = require("../helpers/colors");
+const FileIcon = ({ color, ...props }) => (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 384 512", ...props, children: jsx_runtime_1.jsx("path", { fill: color !== null && color !== void 0 ? color : colors_1.CURRENT_COLOR, d: "M0 64C0 28.65 28.65 0 64 0h156.1c12.7 0 25 5.057 34 14.06L369.9 129.9c9 9 14.1 21.3 14.1 34V448c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V64zm352 128H240c-26.5 0-48-21.5-48-48V32H64c-17.67 0-32 14.33-32 32v384c0 17.7 14.33 32 32 32h256c17.7 0 32-14.3 32-32V192zm-4.7-39.4L231.4 36.69c-2-2.07-4.6-3.51-7.4-4.21V144c0 8.8 7.2 16 16 16h111.5c-.7-2.8-2.1-5.4-4.2-7.4z" }) }));
 exports.FileIcon = FileIcon;

package/dist/icons/frame.js

@@ -2,5 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PicIcon = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const PicIcon = (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: "currentcolor", d: "M324.9 157.8c-11.38-17.38-39.89-17.31-51.23-.063L200.5 268.5l-16.4-22.6c-11.4-16.8-38.2-16-49.7 0l-64.52 89.16c-6.797 9.406-7.75 21.72-2.547 32C72.53 377.5 83.05 384 94.75 384h322.5c11.41 0 21.8-6.281 27.14-16.38a30.922 30.922 0 0 0-1.516-31.56L324.9 157.8zM95.8 352l62.39-87.38 29.91 41.34c3.1 4.24 8.3 7.24 13.3 6.64 5.25-.125 10.12-2.781 13.02-7.188l83.83-129.9L415 352H95.8zM447.1 32h-384C28.65 32-.01 60.65-.01 96v320c0 35.35 28.65 64 63.1 64h384c35.35 0 64-28.65 64-64V96c.01-35.35-27.79-64-63.99-64zM480 416c0 17.64-14.36 32-32 32H64c-17.64 0-32-14.36-32-32V96c0-17.64 14.36-32 32-32h384c17.64 0 32 14.36 32 32v320zM144 192c26.5 0 48-21.5 48-48s-21.5-48-48-48-48 21.5-48 48 21.5 48 48 48zm0-64c8.822 0 15.1 7.178 15.1 16s-6.3 16-15.1 16-16-7.2-16-16 7.2-16 16-16z" }) }));
+const colors_1 = require("../helpers/colors");
+const PicIcon = (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: "M324.9 157.8c-11.38-17.38-39.89-17.31-51.23-.063L200.5 268.5l-16.4-22.6c-11.4-16.8-38.2-16-49.7 0l-64.52 89.16c-6.797 9.406-7.75 21.72-2.547 32C72.53 377.5 83.05 384 94.75 384h322.5c11.41 0 21.8-6.281 27.14-16.38a30.922 30.922 0 0 0-1.516-31.56L324.9 157.8zM95.8 352l62.39-87.38 29.91 41.34c3.1 4.24 8.3 7.24 13.3 6.64 5.25-.125 10.12-2.781 13.02-7.188l83.83-129.9L415 352H95.8zM447.1 32h-384C28.65 32-.01 60.65-.01 96v320c0 35.35 28.65 64 63.1 64h384c35.35 0 64-28.65 64-64V96c.01-35.35-27.79-64-63.99-64zM480 416c0 17.64-14.36 32-32 32H64c-17.64 0-32-14.36-32-32V96c0-17.64 14.36-32 32-32h384c17.64 0 32 14.36 32 32v320zM144 192c26.5 0 48-21.5 48-48s-21.5-48-48-48-48 21.5-48 48 21.5 48 48 48zm0-64c8.822 0 15.1 7.178 15.1 16s-6.3 16-15.1 16-16-7.2-16-16 7.2-16 16-16z" }) }));
 exports.PicIcon = PicIcon;

package/dist/icons/gear.js

@@ -2,5 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.GearIcon = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-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: "currentcolor", 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 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" }) }));
 exports.GearIcon = GearIcon;

package/dist/icons/gif.js

@@ -2,5 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.GifIcon = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-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: "currentcolor", 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 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" }) }));
 exports.GifIcon = GifIcon;

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

@@ -2,7 +2,8 @@
 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: "currentColor", 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" }) }));
+    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" }) }));
 };
 exports.JumpToStart = JumpToStart;

package/dist/icons/keys.js

@@ -2,19 +2,20 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ArrowRight = exports.ArrowLeft = exports.ShiftIcon = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../helpers/colors");
 const iconStyle = {
     width: 10,
     display: 'inline',
 };
 const ShiftIcon = () => {
-    return (jsx_runtime_1.jsx("svg", { style: iconStyle, viewBox: "0 0 448 512", children: jsx_runtime_1.jsx("path", { fill: "currentColor", d: "M48.048 304h73.798v128c0 26.51 21.49 48 48 48h108.308c26.51 0 48-21.49 48-48V304h73.789c42.638 0 64.151-51.731 33.941-81.941l-175.943-176c-18.745-18.745-49.137-18.746-67.882 0l-175.952 176C-16.042 252.208 5.325 304 48.048 304zM224 80l176 176H278.154v176H169.846V256H48L224 80z" }) }));
+    return (jsx_runtime_1.jsx("svg", { style: iconStyle, viewBox: "0 0 448 512", children: jsx_runtime_1.jsx("path", { fill: colors_1.CURRENT_COLOR, d: "M48.048 304h73.798v128c0 26.51 21.49 48 48 48h108.308c26.51 0 48-21.49 48-48V304h73.789c42.638 0 64.151-51.731 33.941-81.941l-175.943-176c-18.745-18.745-49.137-18.746-67.882 0l-175.952 176C-16.042 252.208 5.325 304 48.048 304zM224 80l176 176H278.154v176H169.846V256H48L224 80z" }) }));
 };
 exports.ShiftIcon = ShiftIcon;
 const ArrowLeft = () => {
-    return (jsx_runtime_1.jsx("svg", { style: iconStyle, viewBox: "0 0 448 512", children: jsx_runtime_1.jsx("path", { fill: "currentColor", d: "M257.5 445.1l-22.2 22.2c-9.4 9.4-24.6 9.4-33.9 0L7 273c-9.4-9.4-9.4-24.6 0-33.9L201.4 44.7c9.4-9.4 24.6-9.4 33.9 0l22.2 22.2c9.5 9.5 9.3 25-.4 34.3L136.6 216H424c13.3 0 24 10.7 24 24v32c0 13.3-10.7 24-24 24H136.6l120.5 114.8c9.8 9.3 10 24.8.4 34.3z" }) }));
+    return (jsx_runtime_1.jsx("svg", { style: iconStyle, viewBox: "0 0 448 512", children: jsx_runtime_1.jsx("path", { fill: colors_1.CURRENT_COLOR, d: "M257.5 445.1l-22.2 22.2c-9.4 9.4-24.6 9.4-33.9 0L7 273c-9.4-9.4-9.4-24.6 0-33.9L201.4 44.7c9.4-9.4 24.6-9.4 33.9 0l22.2 22.2c9.5 9.5 9.3 25-.4 34.3L136.6 216H424c13.3 0 24 10.7 24 24v32c0 13.3-10.7 24-24 24H136.6l120.5 114.8c9.8 9.3 10 24.8.4 34.3z" }) }));
 };
 exports.ArrowLeft = ArrowLeft;
 const ArrowRight = () => {
-    return (jsx_runtime_1.jsx("svg", { style: iconStyle, viewBox: "0 0 448 512", children: jsx_runtime_1.jsx("path", { fill: "currentColor", d: "M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z" }) }));
+    return (jsx_runtime_1.jsx("svg", { style: iconStyle, viewBox: "0 0 448 512", children: jsx_runtime_1.jsx("path", { fill: colors_1.CURRENT_COLOR, d: "M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z" }) }));
 };
 exports.ArrowRight = ArrowRight;

package/dist/icons/media-volume.js

@@ -9,6 +9,6 @@ const VolumeOffIcon = () => {
 };
 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: "#fff" }) }));
+    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 }) }));
 };
 exports.VolumeOnIcon = VolumeOnIcon;

package/dist/icons/minus.js

@@ -2,7 +2,8 @@
 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: "currentColor", 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" }) }));
+    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" }) }));
 };
 exports.Minus = Minus;

package/dist/icons/pause.js

@@ -2,5 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Pause = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const Pause = (props) => (jsx_runtime_1.jsx("svg", { ...props, "aria-hidden": "true", focusable: "false", "data-prefix": "fas", "data-icon": "pause", className: "svg-inline--fa fa-pause fa-w-14", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", children: jsx_runtime_1.jsx("path", { fill: "currentColor", d: "M144 479H48c-26.5 0-48-21.5-48-48V79c0-26.5 21.5-48 48-48h96c26.5 0 48 21.5 48 48v352c0 26.5-21.5 48-48 48zm304-48V79c0-26.5-21.5-48-48-48h-96c-26.5 0-48 21.5-48 48v352c0 26.5 21.5 48 48 48h96c26.5 0 48-21.5 48-48z" }) }));
+const colors_1 = require("../helpers/colors");
+const Pause = (props) => (jsx_runtime_1.jsx("svg", { ...props, "aria-hidden": "true", focusable: "false", "data-prefix": "fas", "data-icon": "pause", className: "svg-inline--fa fa-pause fa-w-14", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", children: jsx_runtime_1.jsx("path", { fill: colors_1.CURRENT_COLOR, d: "M144 479H48c-26.5 0-48-21.5-48-48V79c0-26.5 21.5-48 48-48h96c26.5 0 48 21.5 48 48v352c0 26.5-21.5 48-48 48zm304-48V79c0-26.5-21.5-48-48-48h-96c-26.5 0-48 21.5-48 48v352c0 26.5 21.5 48 48 48h96c26.5 0 48-21.5 48-48z" }) }));
 exports.Pause = Pause;

package/dist/icons/play.js

@@ -2,5 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Play = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const Play = (props) => (jsx_runtime_1.jsx("svg", { ...props, "aria-hidden": "true", focusable: "false", "data-prefix": "fas", "data-icon": "play", className: "svg-inline--fa fa-play fa-w-14", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", children: jsx_runtime_1.jsx("path", { fill: "currentColor", d: "M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z" }) }));
+const colors_1 = require("../helpers/colors");
+const Play = (props) => (jsx_runtime_1.jsx("svg", { ...props, "aria-hidden": "true", focusable: "false", "data-prefix": "fas", "data-icon": "play", className: "svg-inline--fa fa-play fa-w-14", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", children: jsx_runtime_1.jsx("path", { fill: colors_1.CURRENT_COLOR, d: "M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z" }) }));
 exports.Play = Play;

package/dist/icons/redo.js

@@ -2,7 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RedoIcon = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../helpers/colors");
 const RedoIcon = (props) => {
-    return (jsx_runtime_1.jsx("svg", { viewBox: "0 0 640 640", ...props, children: jsx_runtime_1.jsx("path", { fill: "currentColor", d: "M552 256L408 256C398.3 256 389.5 250.2 385.8 241.2C382.1 232.2 384.1 221.9 391 215L437.7 168.3C362.4 109.7 253.4 115 184.2 184.2C109.2 259.2 109.2 380.7 184.2 455.7C259.2 530.7 380.7 530.7 455.7 455.7C463.9 447.5 471.2 438.8 477.6 429.6C487.7 415.1 507.7 411.6 522.2 421.7C536.7 431.8 540.2 451.8 530.1 466.3C521.6 478.5 511.9 490.1 501 501C401 601 238.9 601 139 501C39.1 401 39 239 139 139C233.3 44.7 382.7 39.4 483.3 122.8L535 71C541.9 64.1 552.2 62.1 561.2 65.8C570.2 69.5 576 78.3 576 88L576 232C576 245.3 565.3 256 552 256z" }) }));
+    return (jsx_runtime_1.jsx("svg", { viewBox: "0 0 640 640", ...props, children: jsx_runtime_1.jsx("path", { fill: colors_1.CURRENT_COLOR, d: "M552 256L408 256C398.3 256 389.5 250.2 385.8 241.2C382.1 232.2 384.1 221.9 391 215L437.7 168.3C362.4 109.7 253.4 115 184.2 184.2C109.2 259.2 109.2 380.7 184.2 455.7C259.2 530.7 380.7 530.7 455.7 455.7C463.9 447.5 471.2 438.8 477.6 429.6C487.7 415.1 507.7 411.6 522.2 421.7C536.7 431.8 540.2 451.8 530.1 466.3C521.6 478.5 511.9 490.1 501 501C401 601 238.9 601 139 501C39.1 401 39 239 139 139C233.3 44.7 382.7 39.4 483.3 122.8L535 71C541.9 64.1 552.2 62.1 561.2 65.8C570.2 69.5 576 78.3 576 88L576 232C576 245.3 565.3 256 552 256z" }) }));
 };
 exports.RedoIcon = RedoIcon;

package/dist/icons/step-back.js

@@ -2,7 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StepBack = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../helpers/colors");
 const StepBack = (props) => {
-    return (jsx_runtime_1.jsx("svg", { viewBox: "0 0 448 512", ...props, children: jsx_runtime_1.jsx("path", { fill: "currentColor", d: "M64 468V44c0-6.6 5.4-12 12-12h48c6.6 0 12 5.4 12 12v176.4l195.5-181C352.1 22.3 384 36.6 384 64v384c0 27.4-31.9 41.7-52.5 24.6L136 292.7V468c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12z" }) }));
+    return (jsx_runtime_1.jsx("svg", { viewBox: "0 0 448 512", ...props, children: jsx_runtime_1.jsx("path", { fill: colors_1.CURRENT_COLOR, d: "M64 468V44c0-6.6 5.4-12 12-12h48c6.6 0 12 5.4 12 12v176.4l195.5-181C352.1 22.3 384 36.6 384 64v384c0 27.4-31.9 41.7-52.5 24.6L136 292.7V468c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12z" }) }));
 };
 exports.StepBack = StepBack;