@remotion/studio 4.0.494 → 4.0.496

package/dist/esm/renderEntry.mjs

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

package/dist/helpers/client-id.js

@@ -71,7 +71,8 @@ const PreviewServerConnection = ({ children, readOnlyStudio }) => {
         const handleEvent = (newEvent) => {
             var _a, _b;
             if (newEvent.type === 'new-input-props' ||
-                newEvent.type === 'new-env-variables') {
+                newEvent.type === 'new-env-variables' ||
+                newEvent.type === 'config-file-changed') {
                 (0, url_state_1.reloadUrl)();
             }
             if (newEvent.type === 'init') {

package/dist/helpers/clipboard-figma.d.ts

@@ -0,0 +1,4 @@
+export declare const getClipboardFigmaHtml: (clipboardData: DataTransfer) => string | null;
+export declare const hasClipboardFigmaPayload: (clipboardData: DataTransfer) => boolean;
+export declare const formatFigmaClipboardError: (reason: string) => string;
+export declare const formatFigmaClipboardErrorNotification: (reason: string) => string;

package/dist/helpers/clipboard-figma.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatFigmaClipboardErrorNotification = exports.formatFigmaClipboardError = exports.hasClipboardFigmaPayload = exports.getClipboardFigmaHtml = void 0;
+const figmaMetaStart = '<!--(figmeta)';
+const figmaMetaEnd = '(/figmeta)-->';
+const figmaDataStart = '<!--(figma)';
+const figmaDataEnd = '(/figma)-->';
+const hasSection = ({ end, html, start, }) => {
+    const startIndex = html.indexOf(start);
+    return (startIndex !== -1 && html.indexOf(end, startIndex + start.length) !== -1);
+};
+const getClipboardFigmaHtml = (clipboardData) => {
+    const html = clipboardData.getData('text/html');
+    if (!hasSection({ end: figmaMetaEnd, html, start: figmaMetaStart }) ||
+        !hasSection({ end: figmaDataEnd, html, start: figmaDataStart })) {
+        return null;
+    }
+    return html;
+};
+exports.getClipboardFigmaHtml = getClipboardFigmaHtml;
+const hasClipboardFigmaPayload = (clipboardData) => {
+    return (0, exports.getClipboardFigmaHtml)(clipboardData) !== null;
+};
+exports.hasClipboardFigmaPayload = hasClipboardFigmaPayload;
+const formatFigmaClipboardError = (reason) => {
+    const withoutPrefix = reason
+        .replace(/^(?:Cannot|Could not) import Figma selection:\s*/i, '')
+        .trim();
+    const message = withoutPrefix.toLowerCase() === 'clipboard scene is incomplete'
+        ? 'Pasting images from Figma is not supported'
+        : withoutPrefix;
+    if (/[.!?]$/.test(message)) {
+        return message;
+    }
+    return `${message}.`;
+};
+exports.formatFigmaClipboardError = formatFigmaClipboardError;
+const formatFigmaClipboardErrorNotification = (reason) => {
+    return `${(0, exports.formatFigmaClipboardError)(reason)} Try “Copy as SVG” in Figma and paste again.`;
+};
+exports.formatFigmaClipboardErrorNotification = formatFigmaClipboardErrorNotification;

package/dist/helpers/clipboard-images.d.ts

@@ -0,0 +1,10 @@
+export declare const hasClipboardImage: (clipboardData: DataTransfer) => boolean;
+export declare const getUniqueClipboardImageName: ({ existingFileNames, fileName, mimeType, }: {
+    existingFileNames: Set<string>;
+    fileName: string;
+    mimeType: string;
+}) => string;
+export declare const getClipboardImageFiles: ({ clipboardData, existingFileNames, }: {
+    clipboardData: DataTransfer;
+    existingFileNames: string[];
+}) => File[];

package/dist/helpers/clipboard-images.js

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getClipboardImageFiles = exports.getUniqueClipboardImageName = exports.hasClipboardImage = void 0;
+const getClipboardFiles = (clipboardData) => {
+    const imageItems = Array.from(clipboardData.items).filter((item) => item.kind === 'file' && item.type.startsWith('image/'));
+    if (imageItems.length > 0) {
+        const files = imageItems
+            .map((item) => item.getAsFile())
+            .filter((file) => file !== null);
+        if (files.length > 0) {
+            return files;
+        }
+    }
+    return Array.from(clipboardData.files).filter((file) => file.type.startsWith('image/'));
+};
+const hasClipboardImage = (clipboardData) => {
+    return (Array.from(clipboardData.items).some((item) => item.kind === 'file' && item.type.startsWith('image/')) ||
+        Array.from(clipboardData.files).some((file) => file.type.startsWith('image/')));
+};
+exports.hasClipboardImage = hasClipboardImage;
+const getExtensionForMimeType = (mimeType) => {
+    switch (mimeType) {
+        case 'image/jpeg':
+            return 'jpg';
+        case 'image/svg+xml':
+            return 'svg';
+        default:
+            return mimeType.startsWith('image/')
+                ? mimeType.slice('image/'.length)
+                : 'png';
+    }
+};
+const getNameParts = ({ fileName, mimeType, }) => {
+    const trimmedName = fileName.trim();
+    const lastDot = trimmedName.lastIndexOf('.');
+    if (lastDot > 0 && lastDot < trimmedName.length - 1) {
+        return {
+            base: trimmedName.slice(0, lastDot),
+            extension: trimmedName.slice(lastDot + 1),
+        };
+    }
+    return {
+        base: 'pasted-image',
+        extension: getExtensionForMimeType(mimeType),
+    };
+};
+const getUniqueClipboardImageName = ({ existingFileNames, fileName, mimeType, }) => {
+    const { base, extension } = getNameParts({ fileName, mimeType });
+    let candidate = `${base}.${extension}`;
+    let suffix = 1;
+    while (existingFileNames.has(candidate)) {
+        candidate = `${base}-${suffix}.${extension}`;
+        suffix++;
+    }
+    return candidate;
+};
+exports.getUniqueClipboardImageName = getUniqueClipboardImageName;
+const getClipboardImageFiles = ({ clipboardData, existingFileNames, }) => {
+    const usedNames = new Set(existingFileNames);
+    return getClipboardFiles(clipboardData).map((file) => {
+        var _a;
+        const candidate = (0, exports.getUniqueClipboardImageName)({
+            existingFileNames: usedNames,
+            fileName: (_a = file.name) !== null && _a !== void 0 ? _a : '',
+            mimeType: file.type,
+        });
+        usedNames.add(candidate);
+        if (candidate === file.name) {
+            return file;
+        }
+        return new File([file.slice()], candidate, {
+            type: file.type,
+            lastModified: file.lastModified,
+        });
+    });
+};
+exports.getClipboardImageFiles = getClipboardImageFiles;

package/dist/helpers/clipboard-svg.d.ts

@@ -0,0 +1,3 @@
+export declare const extractSvgMarkup: (value: string) => string | null;
+export declare const getClipboardSvgMarkup: (clipboardData: DataTransfer) => string | null;
+export declare const hasClipboardSvgMarkup: (clipboardData: DataTransfer) => boolean;

package/dist/helpers/clipboard-svg.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.hasClipboardSvgMarkup = exports.getClipboardSvgMarkup = exports.extractSvgMarkup = void 0;
+const svgOpeningTag = /^<svg(?:\s|>)/i;
+const removeSvgPreamble = (value) => {
+    let remaining = value.trim();
+    while (true) {
+        const withoutPreamble = remaining
+            .replace(/^<\?xml[\s\S]*?\?>\s*/i, '')
+            .replace(/^<!doctype[\s\S]*?>\s*/i, '')
+            .replace(/^<!--[\s\S]*?-->\s*/, '');
+        if (withoutPreamble === remaining) {
+            return remaining;
+        }
+        remaining = withoutPreamble;
+    }
+};
+const extractSvgMarkup = (value) => {
+    const withoutPreamble = removeSvgPreamble(value);
+    if (!svgOpeningTag.test(withoutPreamble)) {
+        return null;
+    }
+    const closingTagIndex = withoutPreamble.toLowerCase().lastIndexOf('</svg>');
+    if (closingTagIndex === -1) {
+        return null;
+    }
+    const afterClosingTag = withoutPreamble.slice(closingTagIndex + '</svg>'.length);
+    if (afterClosingTag.trim() !== '') {
+        return null;
+    }
+    return withoutPreamble.slice(0, closingTagIndex + '</svg>'.length);
+};
+exports.extractSvgMarkup = extractSvgMarkup;
+const getClipboardSvgMarkup = (clipboardData) => {
+    for (const mimeType of ['text/plain', 'text/html']) {
+        const markup = (0, exports.extractSvgMarkup)(clipboardData.getData(mimeType));
+        if (markup !== null) {
+            return markup;
+        }
+    }
+    return null;
+};
+exports.getClipboardSvgMarkup = getClipboardSvgMarkup;
+const hasClipboardSvgMarkup = (clipboardData) => {
+    return (0, exports.getClipboardSvgMarkup)(clipboardData) !== null;
+};
+exports.hasClipboardSvgMarkup = hasClipboardSvgMarkup;

package/dist/helpers/get-effective-translation.d.ts

@@ -25,7 +25,8 @@ export declare const getCenterPointWhileScrolling: ({ size, clientX, clientY, co
     centerX: number;
     centerY: number;
 };
-export declare const applyZoomAroundFocalPoint: ({ canvasSize, contentDimensions, previewSizeBefore, oldNumericSize, newNumericSize, clientX, clientY, }: {
+export declare const applyZoomAroundFocalPoint: ({ addFitPadding, canvasSize, contentDimensions, previewSizeBefore, oldNumericSize, newNumericSize, clientX, clientY, }: {
+    readonly addFitPadding: boolean;
     readonly canvasSize: Size;
     readonly contentDimensions: {
         width: number;

package/dist/helpers/get-effective-translation.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.applyZoomAroundFocalPoint = exports.getCenterPointWhileScrolling = exports.getEffectiveTranslation = void 0;
 const remotion_1 = require("remotion");
 const smooth_zoom_1 = require("./smooth-zoom");
+const studio_fit_padding_1 = require("./studio-fit-padding");
 const getEffectiveXTranslation = ({ canvasSize, scale, compositionWidth, translation, }) => {
     const maxTranslation = Math.abs(canvasSize.width / 2 +
         (scale * compositionWidth) / 2 -
@@ -45,13 +46,20 @@ const getCenterPointWhileScrolling = ({ size, clientX, clientY, compositionWidth
     };
 };
 exports.getCenterPointWhileScrolling = getCenterPointWhileScrolling;
-const applyZoomAroundFocalPoint = ({ canvasSize, contentDimensions, previewSizeBefore, oldNumericSize, newNumericSize, clientX, clientY, }) => {
-    const scale = remotion_1.Internals.calculateScale({
-        canvasSize,
-        compositionHeight: contentDimensions.height,
-        compositionWidth: contentDimensions.width,
-        previewSize: previewSizeBefore.size,
-    });
+const applyZoomAroundFocalPoint = ({ addFitPadding, canvasSize, contentDimensions, previewSizeBefore, oldNumericSize, newNumericSize, clientX, clientY, }) => {
+    const scale = addFitPadding
+        ? (0, studio_fit_padding_1.calculateStudioScale)({
+            canvasSize,
+            compositionHeight: contentDimensions.height,
+            compositionWidth: contentDimensions.width,
+            previewSize: previewSizeBefore.size,
+        })
+        : remotion_1.Internals.calculateScale({
+            canvasSize,
+            compositionHeight: contentDimensions.height,
+            compositionWidth: contentDimensions.width,
+            previewSize: previewSizeBefore.size,
+        });
     const clampedNew = Math.min(smooth_zoom_1.MAX_ZOOM, Math.max(smooth_zoom_1.MIN_ZOOM, newNumericSize));
     if (clampedNew === oldNumericSize) {
         return previewSizeBefore;

package/dist/helpers/get-preview-file-type.d.ts

@@ -1,2 +1,2 @@
-export type AssetFileType = 'audio' | 'video' | 'image' | 'json' | 'txt' | 'other';
+export type AssetFileType = 'audio' | 'font' | 'video' | 'image' | 'json' | 'txt' | 'other';
 export declare const getPreviewFileType: (fileName: string | null) => AssetFileType;

package/dist/helpers/get-preview-file-type.js

@@ -8,7 +8,8 @@ const getPreviewFileType = (fileName) => {
     }
     const audioExtensions = ['mp3', 'wav', 'ogg', 'aac'];
     const videoExtensions = ['mp4', 'avi', 'mkv', 'mov', 'webm'];
-    const imageExtensions = ['jpg', 'jpeg', 'png', 'apng', 'gif', 'bmp'];
+    const imageExtensions = ['jpg', 'jpeg', 'png', 'apng', 'gif', 'bmp', 'webp'];
+    const fontExtensions = ['woff', 'woff2', 'ttf', 'otf', 'eot'];
     const fileExtension = (_a = fileName.split('.').pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase();
     if (fileExtension === undefined) {
         throw new Error('File extension is undefined');
@@ -22,6 +23,9 @@ const getPreviewFileType = (fileName) => {
     if (imageExtensions.includes(fileExtension)) {
         return 'image';
     }
+    if (fontExtensions.includes(fileExtension)) {
+        return 'font';
+    }
     if (fileExtension === 'json') {
         return 'json';
     }

package/dist/helpers/inject-css.js

@@ -89,6 +89,17 @@ const makeDefaultGlobalCSS = () => {
 	    box-shadow: ${colors_1.FOCUS_BOX_SHADOW};
 	  }
 
+  .__remotion-composition-selector-item:focus,
+  .__remotion-inspector-inline-action:focus {
+    outline: none;
+    box-shadow: none;
+  }
+
+  .__remotion-composition-selector-item:focus-visible,
+  .__remotion-inspector-inline-action:focus-visible {
+    box-shadow: ${colors_1.FOCUS_BOX_SHADOW};
+  }
+
   .__remotion_color_swatch:focus {
     outline: none;
   }

package/dist/helpers/studio-fit-padding.d.ts

@@ -0,0 +1,41 @@
+import type { Size } from '@remotion/player';
+export declare const STUDIO_FIT_PADDING = 16;
+type CanvasSize = {
+    readonly width: number;
+    readonly height: number;
+};
+export declare const getStudioPaddedCanvasSize: <T extends CanvasSize>(canvasSize: T) => {
+    canvasSize: T & {
+        width: number;
+        height: number;
+    };
+    horizontalPadding: number;
+    verticalPadding: number;
+};
+export declare const getStudioCurrentScaleContext: (canvasSize: Size) => {
+    type: "canvas-size";
+    canvasSize: Size;
+    canvasSizeForAuto: Size & {
+        width: number;
+        height: number;
+    };
+};
+export declare const calculateStudioScale: ({ canvasSize, compositionHeight, compositionWidth, previewSize, }: {
+    readonly canvasSize: CanvasSize;
+    readonly compositionHeight: number;
+    readonly compositionWidth: number;
+    readonly previewSize: number | "auto";
+}) => number;
+export declare const calculateStudioCanvasTransformation: ({ canvasSize, compositionHeight, compositionWidth, previewSize, }: {
+    readonly canvasSize: Size;
+    readonly compositionHeight: number;
+    readonly compositionWidth: number;
+    readonly previewSize: number | "auto";
+}) => {
+    centerX: number;
+    centerY: number;
+    xCorrection: number;
+    yCorrection: number;
+    scale: number;
+};
+export {};

package/dist/helpers/studio-fit-padding.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.calculateStudioCanvasTransformation = exports.calculateStudioScale = exports.getStudioCurrentScaleContext = exports.getStudioPaddedCanvasSize = exports.STUDIO_FIT_PADDING = void 0;
+const player_1 = require("@remotion/player");
+const remotion_1 = require("remotion");
+exports.STUDIO_FIT_PADDING = 16;
+const getPadding = (length) => {
+    return Math.min(exports.STUDIO_FIT_PADDING, Math.max(0, (length - 1) / 2));
+};
+const getStudioPaddedCanvasSize = (canvasSize) => {
+    const horizontalPadding = getPadding(canvasSize.width);
+    const verticalPadding = getPadding(canvasSize.height);
+    return {
+        canvasSize: {
+            ...canvasSize,
+            width: canvasSize.width - horizontalPadding * 2,
+            height: canvasSize.height - verticalPadding * 2,
+        },
+        horizontalPadding,
+        verticalPadding,
+    };
+};
+exports.getStudioPaddedCanvasSize = getStudioPaddedCanvasSize;
+const getStudioCurrentScaleContext = (canvasSize) => {
+    return {
+        type: 'canvas-size',
+        canvasSize,
+        canvasSizeForAuto: (0, exports.getStudioPaddedCanvasSize)(canvasSize).canvasSize,
+    };
+};
+exports.getStudioCurrentScaleContext = getStudioCurrentScaleContext;
+const calculateStudioScale = ({ canvasSize, compositionHeight, compositionWidth, previewSize, }) => {
+    const paddedCanvasSize = (0, exports.getStudioPaddedCanvasSize)(canvasSize).canvasSize;
+    return remotion_1.Internals.calculateScale({
+        canvasSize: paddedCanvasSize,
+        compositionHeight,
+        compositionWidth,
+        previewSize,
+    });
+};
+exports.calculateStudioScale = calculateStudioScale;
+const calculateStudioCanvasTransformation = ({ canvasSize, compositionHeight, compositionWidth, previewSize, }) => {
+    if (previewSize !== 'auto') {
+        return player_1.PlayerInternals.calculateCanvasTransformation({
+            canvasSize,
+            compositionHeight,
+            compositionWidth,
+            previewSize,
+        });
+    }
+    const { canvasSize: paddedCanvasSize, horizontalPadding, verticalPadding, } = (0, exports.getStudioPaddedCanvasSize)(canvasSize);
+    const transformation = player_1.PlayerInternals.calculateCanvasTransformation({
+        canvasSize: paddedCanvasSize,
+        compositionHeight,
+        compositionWidth,
+        previewSize,
+    });
+    return {
+        ...transformation,
+        centerX: transformation.centerX + horizontalPadding,
+        centerY: transformation.centerY + verticalPadding,
+    };
+};
+exports.calculateStudioCanvasTransformation = calculateStudioCanvasTransformation;

package/dist/helpers/use-image-metadata.d.ts

@@ -0,0 +1,8 @@
+export type ImageMetadata = {
+    readonly format: string;
+    readonly width: number;
+    readonly height: number;
+};
+export declare const getImageMetadataFromData: (data: Uint8Array<ArrayBufferLike>) => ImageMetadata | null;
+export declare const getImageMetadata: (src: string) => Promise<ImageMetadata | null>;
+export declare const useImageMetadata: (src: string | null) => ImageMetadata | null;

package/dist/helpers/use-image-metadata.js

@@ -0,0 +1,82 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useImageMetadata = exports.getImageMetadata = exports.getImageMetadataFromData = void 0;
+const studio_shared_1 = require("@remotion/studio-shared");
+const react_1 = require("react");
+const cache = new Map();
+const pendingRequests = new Map();
+const formatImageType = (fileType) => {
+    if (fileType === 'webp') {
+        return 'WebP';
+    }
+    return fileType.toUpperCase();
+};
+const getImageMetadataFromData = (data) => {
+    const fileType = (0, studio_shared_1.detectFileType)(data);
+    if (!(0, studio_shared_1.isImageFileType)(fileType) || fileType.dimensions === null) {
+        return null;
+    }
+    return {
+        format: formatImageType(fileType.type),
+        width: fileType.dimensions.width,
+        height: fileType.dimensions.height,
+    };
+};
+exports.getImageMetadataFromData = getImageMetadataFromData;
+const getImageMetadata = (src) => {
+    const cached = cache.get(src);
+    if (cached) {
+        return Promise.resolve(cached);
+    }
+    const pendingRequest = pendingRequests.get(src);
+    if (pendingRequest) {
+        return pendingRequest;
+    }
+    const request = fetch(src)
+        .then((response) => {
+        if (!response.ok) {
+            return null;
+        }
+        return response.arrayBuffer();
+    })
+        .then((data) => {
+        if (data === null) {
+            return null;
+        }
+        const metadata = (0, exports.getImageMetadataFromData)(new Uint8Array(data));
+        if (metadata) {
+            cache.set(src, metadata);
+        }
+        return metadata;
+    })
+        .catch(() => null)
+        .finally(() => {
+        pendingRequests.delete(src);
+    });
+    pendingRequests.set(src, request);
+    return request;
+};
+exports.getImageMetadata = getImageMetadata;
+const useImageMetadata = (src) => {
+    var _a;
+    const [imageMetadata, setImageMetadata] = (0, react_1.useState)(src ? ((_a = cache.get(src)) !== null && _a !== void 0 ? _a : null) : null);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        const cached = src ? ((_a = cache.get(src)) !== null && _a !== void 0 ? _a : null) : null;
+        setImageMetadata(cached);
+        if (!src || cached) {
+            return;
+        }
+        let cancelled = false;
+        (0, exports.getImageMetadata)(src).then((metadata) => {
+            if (!cancelled) {
+                setImageMetadata(metadata);
+            }
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [src]);
+    return imageMetadata;
+};
+exports.useImageMetadata = useImageMetadata;

package/dist/helpers/use-studio-canvas-dimensions.js

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useStudioCanvasDimensions = void 0;
-const player_1 = require("@remotion/player");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const studio_fit_padding_1 = require("./studio-fit-padding");
 const useStudioCanvasDimensions = ({ canvasSize, contentDimensions, assetMetadata, }) => {
     const { size: previewSize } = (0, react_1.useContext)(remotion_1.Internals.PreviewSizeContext);
     const { centerX, centerY, scale } = (0, react_1.useMemo)(() => {
@@ -19,7 +19,7 @@ const useStudioCanvasDimensions = ({ canvasSize, contentDimensions, assetMetadat
                 scale: 1,
             };
         }
-        return player_1.PlayerInternals.calculateCanvasTransformation({
+        return (0, studio_fit_padding_1.calculateStudioCanvasTransformation)({
             canvasSize,
             compositionHeight: contentDimensions.height,
             compositionWidth: contentDimensions.width,

package/dist/icons/audio.d.ts

@@ -1,2 +1,5 @@
 import type { SVGProps } from 'react';
 export declare const AudioIcon: (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

@@ -1,7 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AudioIcon = void 0;
+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" }) }));
 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/font.d.ts

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

package/dist/icons/font.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FontFileIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const FontFileIcon = ({ color, ...props }) => {
+    return (jsx_runtime_1.jsx("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", children: jsx_runtime_1.jsx("path", { fill: color, d: "M256 32c6.4 0 12.2 3.8 14.7 9.8L442.6 448 480 448c8.8 0 16 7.2 16 16s-7.2 16-16 16l-112 0c-8.8 0-16-7.2-16-16s7.2-16 16-16l39.9 0-40.6-96-222.5 0-40.6 96 39.9 0c8.8 0 16 7.2 16 16s-7.2 16-16 16L32 480c-8.8 0-16-7.2-16-16s7.2-16 16-16l37.4 0 171.9-406.2c2.5-5.9 8.3-9.8 14.7-9.8zM158.3 320L353.7 320 256 89.1 158.3 320z" }) }));
+};
+exports.FontFileIcon = FontFileIcon;

package/dist/icons/frame.d.ts

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

package/dist/icons/frame.js

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

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

package/dist/icons/json.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.JsonFileIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const JsonFileIcon = ({ color, ...props }) => {
+    return (jsx_runtime_1.jsx("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 576 512", children: jsx_runtime_1.jsx("path", { fill: color, d: "M144 32c-44.2 0-80 35.8-80 80l0 53.5c0 12.7-5.1 24.9-14.1 33.9L4.7 244.7c-3 3-4.7 7.1-4.7 11.3s1.7 8.3 4.7 11.3l45.3 45.3c9 9 14.1 21.2 14.1 33.9L64 400c0 44.2 35.8 80 80 80l64 0c8.8 0 16-7.2 16-16s-7.2-16-16-16l-64 0c-26.5 0-48-21.5-48-48l0-53.5c0-21.2-8.4-41.6-23.4-56.6L38.6 256 72.6 222.1c15-15 23.4-35.4 23.4-56.6L96 112c0-26.5 21.5-48 48-48l64 0c8.8 0 16-7.2 16-16s-7.2-16-16-16l-64 0zm288 0l-64 0c-8.8 0-16 7.2-16 16s7.2 16 16 16l64 0c26.5 0 48 21.5 48 48l0 53.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.6l0 53.5c0 26.5-21.5 48-48 48l-64 0c-8.8 0-16 7.2-16 16s7.2 16 16 16l64 0c44.2 0 80-35.8 80-80l0-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.9l0-53.5c0-44.2-35.8-80-80-80z" }) }));
+};
+exports.JsonFileIcon = JsonFileIcon;

package/dist/icons/magnet.js

@@ -3,6 +3,6 @@ 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-48h128V64c0-17.7-14.3-32-32-32H64C46.3 32 32 46.3 32 64v64zm320 0h128V64c0-17.7-14.3-32-32-32h-64c-17.7 0-32 14.3-32 32v64z" }) }));
+    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" }) }));
 };
 exports.MagnetIcon = MagnetIcon;

package/dist/icons/scissors.d.ts

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

package/dist/icons/scissors.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScissorsIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ScissorsIcon = ({ 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: "M48 112a64 64 0 1 1 128 0 64 64 0 1 1 -128 0zm176 0C224 50.1 173.9 0 112 0S0 50.1 0 112 50.1 224 112 224c24 0 46.3-7.6 64.5-20.4l57.3 52.4-57.3 52.4C158.3 295.6 136 288 112 288 50.1 288 0 338.1 0 400s50.1 112 112 112 112-50.1 112-112c0-20.5-5.5-39.6-15.1-56.2L504.2 73.7c9.8-8.9 10.5-24.1 1.5-33.9s-24.1-10.5-33.9-1.5l-202.4 185.2-60.5-55.3c9.6-16.5 15.1-35.7 15.1-56.2zM471.8 473.7c9.8 8.9 25 8.3 33.9-1.5s8.3-25-1.5-33.9L338.6 286.8 302.7 319 471.8 473.7zM48 400a64 64 0 1 1 128 0 64 64 0 1 1 -128 0z" }) }));
+};
+exports.ScissorsIcon = ScissorsIcon;

package/dist/icons/solid.d.ts

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

package/dist/icons/solid.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SolidIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const SolidIcon = ({ color, ...props }) => {
+    return (jsx_runtime_1.jsx("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", children: jsx_runtime_1.jsx("rect", { x: 16, y: 48, width: 480, height: 416, rx: 48, fill: "none", stroke: color, strokeWidth: 32 }) }));
+};
+exports.SolidIcon = SolidIcon;