@remotion/cli 4.0.84 → 4.0.85

package/dist/editor/components/AudioWaveform.js

@@ -1,122 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AudioWaveform = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const media_utils_1 = require("@remotion/media-utils");
-const react_1 = require("react");
-const remotion_1 = require("remotion");
-const colors_1 = require("../helpers/colors");
-const timeline_layout_1 = require("../helpers/timeline-layout");
-const AudioWaveformBar_1 = require("./AudioWaveformBar");
-const container = {
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center',
-    position: 'absolute',
-    height: timeline_layout_1.TIMELINE_LAYER_HEIGHT,
-};
-const errorMessage = {
-    fontSize: 13,
-    paddingTop: 6,
-    paddingBottom: 6,
-    paddingLeft: 12,
-    paddingRight: 12,
-    alignSelf: 'flex-start',
-    maxWidth: 450,
-    opacity: 0.75,
-};
-const canvasStyle = {
-    position: 'absolute',
-};
-const AudioWaveform = ({ src, startFrom, durationInFrames, visualizationWidth, setMaxMediaDuration, volume, doesVolumeChange, playbackRate, }) => {
-    const [metadata, setMetadata] = (0, react_1.useState)(null);
-    const [error, setError] = (0, react_1.useState)(null);
-    const mountState = (0, react_1.useRef)({ isMounted: true });
-    const vidConf = remotion_1.Internals.useUnsafeVideoConfig();
-    if (vidConf === null) {
-        throw new Error('Expected video config');
-    }
-    const canvas = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(() => {
-        const { current } = mountState;
-        current.isMounted = true;
-        return () => {
-            current.isMounted = false;
-        };
-    }, []);
-    (0, react_1.useEffect)(() => {
-        if (!canvas.current) {
-            return;
-        }
-        const context = canvas.current.getContext('2d');
-        if (!context) {
-            return;
-        }
-        context.clearRect(0, 0, visualizationWidth, timeline_layout_1.TIMELINE_LAYER_HEIGHT);
-        if (!doesVolumeChange || typeof volume === 'number') {
-            // The volume is a number, meaning it could change on each frame-
-            // User did not use the (f: number) => number syntax, so we can't draw
-            // a visualization.
-            return;
-        }
-        const volumes = volume.split(',').map((v) => Number(v));
-        context.beginPath();
-        context.moveTo(0, timeline_layout_1.TIMELINE_LAYER_HEIGHT);
-        volumes.forEach((v, index) => {
-            const x = (index / (volumes.length - 1)) * visualizationWidth;
-            const y = (1 - v) * (timeline_layout_1.TIMELINE_LAYER_HEIGHT - timeline_layout_1.TIMELINE_BORDER * 2) + 1;
-            if (index === 0) {
-                context.moveTo(x, y);
-            }
-            else {
-                context.lineTo(x, y);
-            }
-        });
-        context.strokeStyle = colors_1.LIGHT_TRANSPARENT;
-        context.stroke();
-    }, [visualizationWidth, metadata, startFrom, volume, doesVolumeChange]);
-    (0, react_1.useEffect)(() => {
-        setError(null);
-        (0, media_utils_1.getAudioData)(src)
-            .then((data) => {
-            if (mountState.current.isMounted) {
-                setMaxMediaDuration(Math.floor(data.durationInSeconds * vidConf.fps));
-                setMetadata(data);
-            }
-        })
-            .catch((err) => {
-            if (mountState.current.isMounted) {
-                setError(err);
-            }
-        });
-    }, [setMaxMediaDuration, src, vidConf.fps]);
-    const normalized = (0, react_1.useMemo)(() => {
-        if (!metadata || metadata.numberOfChannels === 0) {
-            return [];
-        }
-        const numberOfSamples = Math.floor(visualizationWidth / (AudioWaveformBar_1.WAVEFORM_BAR_LENGTH + AudioWaveformBar_1.WAVEFORM_BAR_MARGIN));
-        return (0, media_utils_1.getWaveformPortion)({
-            audioData: metadata,
-            startTimeInSeconds: startFrom / vidConf.fps,
-            durationInSeconds: (durationInFrames / vidConf.fps) * playbackRate,
-            numberOfSamples,
-        });
-    }, [
-        durationInFrames,
-        vidConf.fps,
-        metadata,
-        playbackRate,
-        startFrom,
-        visualizationWidth,
-    ]);
-    if (error) {
-        return ((0, jsx_runtime_1.jsx)("div", { style: container, children: (0, jsx_runtime_1.jsx)("div", { style: errorMessage, children: "No waveform available. Audio might not support CORS." }) }));
-    }
-    if (!metadata) {
-        return null;
-    }
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [normalized.map((w) => {
-                return (0, jsx_runtime_1.jsx)(AudioWaveformBar_1.AudioWaveformBar, { amplitude: w.amplitude }, w.index);
-            }), (0, jsx_runtime_1.jsx)("canvas", { ref: canvas, style: canvasStyle, width: visualizationWidth, height: timeline_layout_1.TIMELINE_LAYER_HEIGHT })] }));
-};
-exports.AudioWaveform = AudioWaveform;

package/dist/editor/components/AudioWaveformBar.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-export declare const WAVEFORM_BAR_LENGTH = 4;
-export declare const WAVEFORM_BAR_MARGIN = 2;
-export declare const AudioWaveformBar: React.FC<{
-    amplitude: number;
-}>;

package/dist/editor/components/AudioWaveformBar.js

@@ -1,24 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AudioWaveformBar = exports.WAVEFORM_BAR_MARGIN = exports.WAVEFORM_BAR_LENGTH = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const timeline_layout_1 = require("../helpers/timeline-layout");
-exports.WAVEFORM_BAR_LENGTH = 4;
-exports.WAVEFORM_BAR_MARGIN = 2;
-const container = {
-    width: exports.WAVEFORM_BAR_LENGTH,
-    backgroundColor: 'rgba(255, 255, 255, 0.2)',
-    marginLeft: exports.WAVEFORM_BAR_MARGIN,
-    borderRadius: 2,
-};
-const AudioWaveformBar = ({ amplitude }) => {
-    const style = (0, react_1.useMemo)(() => {
-        return {
-            ...container,
-            height: (timeline_layout_1.TIMELINE_LAYER_HEIGHT / 2) * amplitude,
-        };
-    }, [amplitude]);
-    return (0, jsx_runtime_1.jsx)("div", { style: style });
-};
-exports.AudioWaveformBar = AudioWaveformBar;

package/dist/editor/components/Canvas.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-import type { CanvasContent } from 'remotion';
-export declare const Canvas: React.FC<{
-    canvasContent: CanvasContent;
-}>;

package/dist/editor/components/Canvas.js

@@ -1,260 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Canvas = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const player_1 = require("@remotion/player");
-const react_1 = require("react");
-const remotion_1 = require("remotion");
-const smooth_zoom_1 = require("../../smooth-zoom");
-const colors_1 = require("../helpers/colors");
-const get_asset_metadata_1 = require("../helpers/get-asset-metadata");
-const get_effective_translation_1 = require("../helpers/get-effective-translation");
-const use_keybinding_1 = require("../helpers/use-keybinding");
-const canvas_ref_1 = require("../state/canvas-ref");
-const editor_guides_1 = require("../state/editor-guides");
-const editor_zoom_gestures_1 = require("../state/editor-zoom-gestures");
-const preview_size_1 = require("../state/preview-size");
-const EditorGuides_1 = __importDefault(require("./EditorGuides"));
-const EditorRuler_1 = require("./EditorRuler");
-const use_is_ruler_visible_1 = require("./EditorRuler/use-is-ruler-visible");
-const layout_1 = require("./layout");
-const Preview_1 = require("./Preview");
-const ResetZoomButton_1 = require("./ResetZoomButton");
-const container = {
-    flex: 1,
-    display: 'flex',
-    overflow: 'hidden',
-    position: 'relative',
-    backgroundColor: colors_1.BACKGROUND,
-};
-const resetZoom = {
-    position: 'absolute',
-    top: layout_1.SPACING_UNIT * 2,
-    right: layout_1.SPACING_UNIT * 2,
-};
-const ZOOM_PX_FACTOR = 0.003;
-const Canvas = ({ canvasContent }) => {
-    const { setSize, size: previewSize } = (0, react_1.useContext)(preview_size_1.PreviewSizeContext);
-    const { editorZoomGestures } = (0, react_1.useContext)(editor_zoom_gestures_1.EditorZoomGesturesContext);
-    const keybindings = (0, use_keybinding_1.useKeybinding)();
-    const config = remotion_1.Internals.useUnsafeVideoConfig();
-    const areRulersVisible = (0, use_is_ruler_visible_1.useIsRulerVisible)();
-    const { editorShowGuides } = (0, react_1.useContext)(editor_guides_1.EditorShowGuidesContext);
-    const [assetResolution, setAssetResolution] = (0, react_1.useState)(null);
-    const contentDimensions = (0, react_1.useMemo)(() => {
-        if ((canvasContent.type === 'asset' || canvasContent.type === 'output') &&
-            assetResolution &&
-            assetResolution.type === 'found') {
-            return assetResolution.dimensions;
-        }
-        if (config) {
-            return { width: config.width, height: config.height };
-        }
-        return null;
-    }, [assetResolution, config, canvasContent]);
-    const size = player_1.PlayerInternals.useElementSize(canvas_ref_1.canvasRef, {
-        triggerOnWindowResize: false,
-        shouldApplyCssTransforms: true,
-    });
-    const isFit = previewSize.size === 'auto';
-    const onWheel = (0, react_1.useCallback)((e) => {
-        if (!editorZoomGestures) {
-            return;
-        }
-        if (!size) {
-            return;
-        }
-        if (!contentDimensions || contentDimensions === 'none') {
-            return;
-        }
-        const wantsToZoom = e.ctrlKey || e.metaKey;
-        if (!wantsToZoom && isFit) {
-            return;
-        }
-        e.preventDefault();
-        setSize((prevSize) => {
-            const scale = player_1.PlayerInternals.calculateScale({
-                canvasSize: size,
-                compositionHeight: contentDimensions.height,
-                compositionWidth: contentDimensions.width,
-                previewSize: prevSize.size,
-            });
-            // Zoom in/out
-            if (wantsToZoom) {
-                const oldSize = prevSize.size === 'auto' ? scale : prevSize.size;
-                const smoothened = (0, smooth_zoom_1.smoothenZoom)(oldSize);
-                const added = smoothened + e.deltaY * ZOOM_PX_FACTOR;
-                const unsmoothened = (0, smooth_zoom_1.unsmoothenZoom)(added);
-                const { centerX, centerY } = (0, get_effective_translation_1.getCenterPointWhileScrolling)({
-                    size,
-                    clientX: e.clientX,
-                    clientY: e.clientY,
-                    compositionWidth: contentDimensions.width,
-                    compositionHeight: contentDimensions.height,
-                    scale,
-                    translation: prevSize.translation,
-                });
-                const zoomDifference = unsmoothened - oldSize;
-                const uvCoordinatesX = centerX / contentDimensions.width;
-                const uvCoordinatesY = centerY / contentDimensions.height;
-                const correctionLeft = -uvCoordinatesX * (zoomDifference * contentDimensions.width) +
-                    (1 - uvCoordinatesX) * zoomDifference * contentDimensions.width;
-                const correctionTop = -uvCoordinatesY * (zoomDifference * contentDimensions.height) +
-                    (1 - uvCoordinatesY) * zoomDifference * contentDimensions.height;
-                return {
-                    translation: (0, get_effective_translation_1.getEffectiveTranslation)({
-                        translation: {
-                            x: prevSize.translation.x - correctionLeft / 2,
-                            y: prevSize.translation.y - correctionTop / 2,
-                        },
-                        canvasSize: size,
-                        compositionHeight: contentDimensions.height,
-                        compositionWidth: contentDimensions.width,
-                        scale,
-                    }),
-                    size: unsmoothened,
-                };
-            }
-            const effectiveTranslation = (0, get_effective_translation_1.getEffectiveTranslation)({
-                translation: prevSize.translation,
-                canvasSize: size,
-                compositionHeight: contentDimensions.height,
-                compositionWidth: contentDimensions.width,
-                scale,
-            });
-            // Pan
-            return {
-                ...prevSize,
-                translation: (0, get_effective_translation_1.getEffectiveTranslation)({
-                    translation: {
-                        x: effectiveTranslation.x + e.deltaX,
-                        y: effectiveTranslation.y + e.deltaY,
-                    },
-                    canvasSize: size,
-                    compositionHeight: contentDimensions.height,
-                    compositionWidth: contentDimensions.width,
-                    scale,
-                }),
-            };
-        });
-    }, [editorZoomGestures, contentDimensions, isFit, setSize, size]);
-    (0, react_1.useEffect)(() => {
-        const { current } = canvas_ref_1.canvasRef;
-        if (!current) {
-            return;
-        }
-        current.addEventListener('wheel', onWheel, { passive: false });
-        return () => 
-        // @ts-expect-error
-        current.removeEventListener('wheel', onWheel, {
-            passive: false,
-        });
-    }, [onWheel]);
-    const onReset = (0, react_1.useCallback)(() => {
-        setSize(() => {
-            return {
-                translation: {
-                    x: 0,
-                    y: 0,
-                },
-                size: 'auto',
-            };
-        });
-    }, [setSize]);
-    const onZoomIn = (0, react_1.useCallback)(() => {
-        if (!contentDimensions || contentDimensions === 'none') {
-            return;
-        }
-        if (!size) {
-            return;
-        }
-        setSize((prevSize) => {
-            const scale = player_1.PlayerInternals.calculateScale({
-                canvasSize: size,
-                compositionHeight: contentDimensions.height,
-                compositionWidth: contentDimensions.width,
-                previewSize: prevSize.size,
-            });
-            return {
-                translation: {
-                    x: 0,
-                    y: 0,
-                },
-                size: Math.min(smooth_zoom_1.MAX_ZOOM, scale * 2),
-            };
-        });
-    }, [contentDimensions, setSize, size]);
-    const onZoomOut = (0, react_1.useCallback)(() => {
-        if (!contentDimensions || contentDimensions === 'none') {
-            return;
-        }
-        if (!size) {
-            return;
-        }
-        setSize((prevSize) => {
-            const scale = player_1.PlayerInternals.calculateScale({
-                canvasSize: size,
-                compositionHeight: contentDimensions.height,
-                compositionWidth: contentDimensions.width,
-                previewSize: prevSize.size,
-            });
-            return {
-                translation: {
-                    x: 0,
-                    y: 0,
-                },
-                size: Math.max(smooth_zoom_1.MIN_ZOOM, scale / 2),
-            };
-        });
-    }, [contentDimensions, setSize, size]);
-    (0, react_1.useEffect)(() => {
-        const resetBinding = keybindings.registerKeybinding({
-            event: 'keydown',
-            key: '0',
-            commandCtrlKey: false,
-            callback: onReset,
-            preventDefault: true,
-            triggerIfInputFieldFocused: false,
-            keepRegisteredWhenNotHighestContext: false,
-        });
-        const zoomIn = keybindings.registerKeybinding({
-            event: 'keydown',
-            key: '+',
-            commandCtrlKey: false,
-            callback: onZoomIn,
-            preventDefault: true,
-            triggerIfInputFieldFocused: false,
-            keepRegisteredWhenNotHighestContext: false,
-        });
-        const zoomOut = keybindings.registerKeybinding({
-            event: 'keydown',
-            key: '-',
-            commandCtrlKey: false,
-            callback: onZoomOut,
-            preventDefault: true,
-            triggerIfInputFieldFocused: false,
-            keepRegisteredWhenNotHighestContext: false,
-        });
-        return () => {
-            resetBinding.unregister();
-            zoomIn.unregister();
-            zoomOut.unregister();
-        };
-    }, [keybindings, onReset, onZoomIn, onZoomOut]);
-    const fetchMetadata = (0, react_1.useCallback)(async () => {
-        setAssetResolution(null);
-        if (canvasContent.type === 'composition') {
-            return;
-        }
-        const metadata = await (0, get_asset_metadata_1.getAssetMetadata)(canvasContent);
-        setAssetResolution(metadata);
-    }, [canvasContent]);
-    (0, react_1.useEffect)(() => {
-        fetchMetadata();
-    }, [fetchMetadata]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { ref: canvas_ref_1.canvasRef, style: container, children: [size ? ((0, jsx_runtime_1.jsx)(Preview_1.VideoPreview, { canvasContent: canvasContent, contentDimensions: contentDimensions, canvasSize: size, assetMetadata: assetResolution })) : null, isFit ? null : ((0, jsx_runtime_1.jsx)("div", { style: resetZoom, className: "css-reset", children: (0, jsx_runtime_1.jsx)(ResetZoomButton_1.ResetZoomButton, { onClick: onReset }) })), editorShowGuides && canvasContent.type === 'composition' && ((0, jsx_runtime_1.jsx)(EditorGuides_1.default, { canvasSize: size, contentDimensions: contentDimensions, assetMetadata: assetResolution }))] }), areRulersVisible && ((0, jsx_runtime_1.jsx)(EditorRuler_1.EditorRulers, { contentDimensions: contentDimensions, canvasSize: size, assetMetadata: assetResolution, containerRef: canvas_ref_1.canvasRef }))] }));
-};
-exports.Canvas = Canvas;

package/dist/editor/components/CanvasOrLoading.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-export declare const CanvasOrLoading: React.FC;
-export declare const ErrorLoading: React.FC<{
-    error: Error;
-}>;

package/dist/editor/components/CanvasOrLoading.js

@@ -1,96 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ErrorLoading = exports.CanvasOrLoading = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const remotion_1 = require("remotion");
-const ErrorLoader_1 = require("../../preview-server/error-overlay/remotion-overlay/ErrorLoader");
-const colors_1 = require("../helpers/colors");
-const timeline_zoom_1 = require("../state/timeline-zoom");
-const Canvas_1 = require("./Canvas");
-const FramePersistor_1 = require("./FramePersistor");
-const layout_1 = require("./layout");
-const styles_1 = require("./Menu/styles");
-const Spinner_1 = require("./Spinner");
-const imperative_state_1 = require("./Timeline/imperative-state");
-const timeline_scroll_logic_1 = require("./Timeline/timeline-scroll-logic");
-const ZoomPersistor_1 = require("./ZoomPersistor");
-const container = {
-    color: 'white',
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    display: 'flex',
-    backgroundColor: colors_1.BACKGROUND,
-    flexDirection: 'column',
-};
-const CanvasOrLoading = () => {
-    const resolved = remotion_1.Internals.useResolvedVideoConfig(null);
-    const [takesALongTime, setTakesALongTime] = (0, react_1.useState)(false);
-    const { setZoom } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
-    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
-    (0, react_1.useEffect)(() => {
-        const timeout = setTimeout(() => {
-            setTakesALongTime(true);
-        }, 500);
-        return () => {
-            clearTimeout(timeout);
-        };
-    }, []);
-    (0, react_1.useEffect)(() => {
-        if ((resolved === null || resolved === void 0 ? void 0 : resolved.type) !== 'success') {
-            return;
-        }
-        const c = resolved.result;
-        setTimeout(() => {
-            (0, timeline_scroll_logic_1.ensureFrameIsInViewport)({
-                direction: 'center',
-                frame: (0, imperative_state_1.getCurrentFrame)(),
-                durationInFrames: c.durationInFrames,
-            });
-        });
-    }, [resolved, setZoom]);
-    const style = (0, react_1.useMemo)(() => {
-        return {
-            ...loaderLabel,
-            opacity: takesALongTime ? 1 : 0,
-            transition: 'opacity 0.3s',
-        };
-    }, [takesALongTime]);
-    if (!canvasContent) {
-        return null;
-    }
-    const content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ZoomPersistor_1.ZoomPersistor, {}), (0, jsx_runtime_1.jsx)(Canvas_1.Canvas, { canvasContent: canvasContent })] }));
-    if (canvasContent.type === 'asset' || canvasContent.type === 'output') {
-        return content;
-    }
-    if (!resolved) {
-        return null;
-    }
-    if (resolved.type === 'loading') {
-        return ((0, jsx_runtime_1.jsxs)("div", { style: container, className: "css-reset", children: [(0, jsx_runtime_1.jsx)(Spinner_1.Spinner, { size: 30, duration: 1 }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 2 }), (0, jsx_runtime_1.jsxs)("div", { style: style, children: ["Running ", (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: "calculateMetadata()" }), "..."] })] }));
-    }
-    if (resolved.type === 'error') {
-        return (0, jsx_runtime_1.jsx)(exports.ErrorLoading, { error: resolved.error });
-    }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(FramePersistor_1.FramePersistor, {}), " ", content] }));
-};
-exports.CanvasOrLoading = CanvasOrLoading;
-const loaderLabel = {
-    fontSize: 14,
-    color: colors_1.LIGHT_TEXT,
-    fontFamily: 'sans-serif',
-    lineHeight: 1.5,
-};
-const loaderContainer = {
-    marginLeft: 'auto',
-    marginRight: 'auto',
-    width: '100%',
-    position: 'absolute',
-    height: '100%',
-    overflowY: 'auto',
-};
-const ErrorLoading = ({ error }) => {
-    return ((0, jsx_runtime_1.jsx)("div", { style: loaderContainer, children: (0, jsx_runtime_1.jsx)(ErrorLoader_1.ErrorLoader, { canHaveDismissButton: false, keyboardShortcuts: false, error: error, onRetry: () => { var _a; return (_a = remotion_1.Internals.resolveCompositionsRef.current) === null || _a === void 0 ? void 0 : _a.reloadCurrentlySelectedComposition(); }, calculateMetadata: true }, error.stack) }));
-};
-exports.ErrorLoading = ErrorLoading;

package/dist/editor/components/CheckboardToggle.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const CheckboardToggle: React.FC;

package/dist/editor/components/CheckboardToggle.js

@@ -1,26 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CheckboardToggle = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const truthy_1 = require("../../truthy");
-const colors_1 = require("../helpers/colors");
-const use_keybinding_1 = require("../helpers/use-keybinding");
-const checkerboard_1 = require("../state/checkerboard");
-const ControlButton_1 = require("./ControlButton");
-const accessibilityLabel = [
-    'Show transparency as checkerboard',
-    (0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? null : '(T)',
-]
-    .filter(truthy_1.truthy)
-    .join(' ');
-const CheckboardToggle = () => {
-    const { checkerboard, setCheckerboard } = (0, react_1.useContext)(checkerboard_1.CheckerboardContext);
-    const onClick = (0, react_1.useCallback)(() => {
-        setCheckerboard((c) => {
-            return !c;
-        });
-    }, [setCheckerboard]);
-    return ((0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, onClick: onClick, children: (0, jsx_runtime_1.jsx)("svg", { "aria-hidden": "true", focusable: "false", "data-prefix": "fas", "data-icon": "game-board-alt", className: "svg-inline--fa fa-game-board-alt fa-w-16", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", style: { width: 16, height: 16 }, children: (0, jsx_runtime_1.jsx)("path", { fill: checkerboard ? colors_1.BLUE : 'white', d: "M480 0H32A32 32 0 0 0 0 32v448a32 32 0 0 0 32 32h448a32 32 0 0 0 32-32V32a32 32 0 0 0-32-32zm-32 256H256v192H64V256h192V64h192z" }) }) }));
-};
-exports.CheckboardToggle = CheckboardToggle;

package/dist/editor/components/Checkbox.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-export declare const Checkbox: React.FC<{
-    checked: boolean;
-    onChange: React.ChangeEventHandler<HTMLInputElement>;
-    name: string;
-    disabled?: boolean;
-}>;

package/dist/editor/components/Checkbox.js

@@ -1,42 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Checkbox = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const colors_1 = require("../helpers/colors");
-const Checkmark_1 = require("../icons/Checkmark");
-const size = 20;
-const background = {
-    height: size,
-    width: size,
-    position: 'relative',
-};
-const box = {
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    position: 'absolute',
-    height: size,
-    width: size,
-    top: 0,
-    left: 0,
-    pointerEvents: 'none',
-    color: 'white',
-};
-const Checkbox = ({ checked, onChange, disabled, name }) => {
-    const input = (0, react_1.useMemo)(() => {
-        return {
-            appearance: 'none',
-            background: disabled ? 'transparent' : colors_1.INPUT_BACKGROUND,
-            border: '1px solid ' + colors_1.INPUT_BORDER_COLOR_UNHOVERED,
-            height: size,
-            width: size,
-            top: 0,
-            left: 0,
-            position: 'absolute',
-            margin: 0,
-        };
-    }, [disabled]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: background, children: [(0, jsx_runtime_1.jsx)("input", { style: input, type: 'checkbox', checked: checked, onChange: onChange, disabled: disabled, name: name }), (0, jsx_runtime_1.jsx)("div", { style: box, children: checked ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null })] }));
-};
-exports.Checkbox = Checkbox;

package/dist/editor/components/CheckerboardProvider.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-export declare const CheckerboardProvider: React.FC<{
-    children: React.ReactNode;
-}>;

package/dist/editor/components/CheckerboardProvider.js

@@ -1,24 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CheckerboardProvider = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const checkerboard_1 = require("../state/checkerboard");
-const CheckerboardProvider = ({ children }) => {
-    const [checkerboard, setCheckerboardState] = (0, react_1.useState)(() => (0, checkerboard_1.loadCheckerboardOption)());
-    const setCheckerboard = (0, react_1.useCallback)((newValue) => {
-        setCheckerboardState((prevState) => {
-            const newVal = newValue(prevState);
-            (0, checkerboard_1.persistCheckerboardOption)(newVal);
-            return newVal;
-        });
-    }, []);
-    const checkerboardCtx = (0, react_1.useMemo)(() => {
-        return {
-            checkerboard,
-            setCheckerboard,
-        };
-    }, [checkerboard, setCheckerboard]);
-    return ((0, jsx_runtime_1.jsx)(checkerboard_1.CheckerboardContext.Provider, { value: checkerboardCtx, children: children }));
-};
-exports.CheckerboardProvider = CheckerboardProvider;

package/dist/editor/components/CompositionSelector.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-export declare const getKeysToExpand: (initialFolderName: string, parentFolderName: string | null, initial?: string[]) => string[];
-export declare const compositionSelectorRef: React.RefObject<{
-    expandComposition: (compName: string) => void;
-}>;
-export declare const CompositionSelector: React.FC;