@remotion/cli 4.0.0-lambda.1 → 4.0.0-newpathfunctions.13

package/dist/config/width.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getWidth = exports.overrideWidth = void 0;
+// eslint-disable-next-line no-restricted-imports
+const remotion_1 = require("remotion");
+let passedWidth = null;
+const overrideWidth = (newWidth) => {
+    if (typeof newWidth !== 'number') {
+        remotion_1.Internals.validateDimension(newWidth, 'width', 'passed to `setWidth()`');
+    }
+    passedWidth = newWidth;
+};
+exports.overrideWidth = overrideWidth;
+const getWidth = () => {
+    return passedWidth;
+};
+exports.getWidth = getWidth;

package/dist/convert-entry-point-to-serve-url.d.ts

@@ -0,0 +1 @@
+export declare const convertEntryPointToServeUrl: (entryPoint: string) => string;

package/dist/convert-entry-point-to-serve-url.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.convertEntryPointToServeUrl = void 0;
+const renderer_1 = require("@remotion/renderer");
+const path_1 = __importDefault(require("path"));
+const convertEntryPointToServeUrl = (entryPoint) => {
+    const fullPath = renderer_1.RenderInternals.isServeUrl(entryPoint)
+        ? entryPoint
+        : path_1.default.resolve(process.cwd(), entryPoint);
+    return fullPath;
+};
+exports.convertEntryPointToServeUrl = convertEntryPointToServeUrl;

package/dist/determine-image-format.d.ts

@@ -0,0 +1,11 @@
+import type { ImageFormat, StillImageFormat } from '@remotion/renderer';
+export declare const determineFinalImageFormat: ({ downloadName, outName, configImageFormat, cliFlag, isLambda, }: {
+    downloadName: string | null;
+    outName: string | null;
+    configImageFormat: ImageFormat | null;
+    cliFlag: ImageFormat | null;
+    isLambda: boolean;
+}) => {
+    format: StillImageFormat;
+    source: string;
+};

package/dist/determine-image-format.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.determineFinalImageFormat = void 0;
+const deriveExtensionFromFilename = (filename) => {
+    if (filename === null || filename === void 0 ? void 0 : filename.endsWith('.png')) {
+        return 'png';
+    }
+    if (filename === null || filename === void 0 ? void 0 : filename.endsWith('.jpg')) {
+        return 'jpeg';
+    }
+    if (filename === null || filename === void 0 ? void 0 : filename.endsWith('.jpeg')) {
+        return 'jpeg';
+    }
+    return null;
+};
+const determineFinalImageFormat = ({ downloadName, outName, configImageFormat, cliFlag, isLambda, }) => {
+    const outNameExtension = deriveExtensionFromFilename(outName);
+    const downloadNameExtension = deriveExtensionFromFilename(downloadName);
+    const outNameDescription = isLambda ? 'S3 output key' : 'out name';
+    if (outNameExtension &&
+        downloadNameExtension &&
+        outNameExtension !== downloadNameExtension) {
+        throw new TypeError(`Image format mismatch: ${outName} was given as the ${outNameDescription} and ${downloadName} was given as the download name, but the extensions don't match.`);
+    }
+    if (downloadNameExtension) {
+        if (cliFlag && downloadNameExtension !== cliFlag) {
+            throw new TypeError(`Image format mismatch: ${downloadName} was given as the download name, but --image-format=${cliFlag} was passed. The image formats must match.`);
+        }
+        return { format: downloadNameExtension, source: 'Download name extension' };
+    }
+    if (outNameExtension) {
+        if (cliFlag && outNameExtension !== cliFlag) {
+            throw new TypeError(`Image format mismatch: ${outName} was given as the ${outNameDescription}, but --image-format=${cliFlag} was passed. The image formats must match.`);
+        }
+        return { format: outNameExtension, source: 'Out name extension' };
+    }
+    if (cliFlag === 'none') {
+        throw new TypeError('The --image-format flag must not be "none" for stills.');
+    }
+    if (cliFlag !== null) {
+        return { format: cliFlag, source: '--image-format flag' };
+    }
+    if (configImageFormat !== null && configImageFormat !== 'none') {
+        return { format: configImageFormat, source: 'Config file' };
+    }
+    return { format: 'png', source: 'Default' };
+};
+exports.determineFinalImageFormat = determineFinalImageFormat;

package/dist/download-progress.d.ts

@@ -1,2 +1,3 @@
-import { DownloadProgress } from './progress-bar';
+import type { DownloadProgress } from './progress-bar';
+export declare const getFileSizeDownloadBar: (downloaded: number) => string;
 export declare const makeMultiDownloadProgress: (progresses: DownloadProgress[]) => string | null;

package/dist/download-progress.js

@@ -1,25 +1,37 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.makeMultiDownloadProgress = void 0;
+exports.makeMultiDownloadProgress = exports.getFileSizeDownloadBar = void 0;
+const format_bytes_1 = require("./format-bytes");
 const make_progress_bar_1 = require("./make-progress-bar");
+const getFileSizeDownloadBar = (downloaded) => {
+    const desiredLength = (0, make_progress_bar_1.makeProgressBar)(0).length;
+    return `[${(0, format_bytes_1.formatBytes)(downloaded).padEnd(desiredLength - 2, ' ')}]`;
+};
+exports.getFileSizeDownloadBar = getFileSizeDownloadBar;
 const makeMultiDownloadProgress = (progresses) => {
     if (progresses.length === 0) {
         return null;
     }
     if (progresses.length === 1) {
         const [progress] = progresses;
-        const truncatedFileName = progress.name.length >= 100
-            ? progress.name.substring(0, 97) + '...'
+        const truncatedFileName = progress.name.length >= 60
+            ? progress.name.substring(0, 57) + '...'
             : progress.name;
         return [
             `    +`,
-            (0, make_progress_bar_1.makeProgressBar)(progress.progress),
+            progress.progress
+                ? (0, make_progress_bar_1.makeProgressBar)(progress.progress)
+                : (0, exports.getFileSizeDownloadBar)(progress.downloaded),
             `Downloading ${truncatedFileName}`,
         ].join(' ');
     }
+    const everyFileHasContentLength = progresses.every((p) => p.totalBytes !== null);
     return [
         `    +`,
-        (0, make_progress_bar_1.makeProgressBar)(progresses.reduce((a, b) => a + b.progress, 0) / progresses.length),
+        everyFileHasContentLength
+            ? (0, make_progress_bar_1.makeProgressBar)(progresses.reduce((a, b) => a + b.progress, 0) /
+                progresses.length)
+            : (0, exports.getFileSizeDownloadBar)(progresses.reduce((a, b) => a + b.downloaded, 0)),
         `Downloading ${progresses.length} files`,
     ].join(' ');
 };

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

@@ -8,4 +8,5 @@ export declare const AudioWaveform: React.FC<{
     setMaxMediaDuration: React.Dispatch<React.SetStateAction<number>>;
     volume: string | number;
     doesVolumeChange: boolean;
+    playbackRate: number;
 }>;

package/dist/editor/components/AudioWaveform.js

@@ -26,7 +26,7 @@ const errorMessage = {
 const canvasStyle = {
     position: 'absolute',
 };
-const AudioWaveform = ({ src, fps, startFrom, durationInFrames, visualizationWidth, setMaxMediaDuration, volume, doesVolumeChange, }) => {
+const AudioWaveform = ({ src, fps, 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 });
@@ -93,10 +93,17 @@ const AudioWaveform = ({ src, fps, startFrom, durationInFrames, visualizationWid
         return (0, media_utils_1.getWaveformPortion)({
             audioData: metadata,
             startTimeInSeconds: startFrom / fps,
-            durationInSeconds: durationInFrames / fps,
+            durationInSeconds: (durationInFrames / fps) * playbackRate,
             numberOfSamples,
         });
-    }, [durationInFrames, fps, metadata, startFrom, visualizationWidth]);
+    }, [
+        durationInFrames,
+        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." }) }));
     }

package/dist/editor/components/Canvas.js

@@ -4,19 +4,216 @@ exports.Canvas = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const player_1 = require("@remotion/player");
 const react_1 = require("react");
+const smooth_zoom_1 = require("../../smooth-zoom");
+const colors_1 = require("../helpers/colors");
+const get_effective_translation_1 = require("../helpers/get-effective-translation");
+const is_current_selected_still_1 = require("../helpers/is-current-selected-still");
+const use_keybinding_1 = require("../helpers/use-keybinding");
+const preview_size_1 = require("../state/preview-size");
+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 = () => {
+    const dimensions = (0, is_current_selected_still_1.useDimensions)();
     const ref = (0, react_1.useRef)(null);
+    const { setSize, size: previewSize } = (0, react_1.useContext)(preview_size_1.PreviewSizeContext);
+    const keybindings = (0, use_keybinding_1.useKeybinding)();
     const size = player_1.PlayerInternals.useElementSize(ref, {
         triggerOnWindowResize: false,
         shouldApplyCssTransforms: true,
     });
-    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, style: container, children: size ? (0, jsx_runtime_1.jsx)(Preview_1.VideoPreview, { canvasSize: size }) : null }));
+    const isFit = previewSize.size === 'auto' ||
+        (previewSize.size === 1 &&
+            previewSize.translation.x === 0 &&
+            previewSize.translation.y === 0);
+    const onWheel = (0, react_1.useCallback)((e) => {
+        if (!size) {
+            return;
+        }
+        if (!dimensions) {
+            return;
+        }
+        const wantsToZoom = e.ctrlKey || e.metaKey;
+        if (!wantsToZoom && isFit) {
+            return;
+        }
+        e.preventDefault();
+        setSize((prevSize) => {
+            const scale = player_1.PlayerInternals.calculateScale({
+                canvasSize: size,
+                compositionHeight: dimensions.height,
+                compositionWidth: dimensions.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: dimensions.width,
+                    compositionHeight: dimensions.height,
+                    scale,
+                    translation: prevSize.translation,
+                });
+                const zoomDifference = unsmoothened - oldSize;
+                const uvCoordinatesX = centerX / dimensions.width;
+                const uvCoordinatesY = centerY / dimensions.height;
+                const correctionLeft = -uvCoordinatesX * (zoomDifference * dimensions.width) +
+                    (1 - uvCoordinatesX) * zoomDifference * dimensions.width;
+                const correctionTop = -uvCoordinatesY * (zoomDifference * dimensions.height) +
+                    (1 - uvCoordinatesY) * zoomDifference * dimensions.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: dimensions.height,
+                        compositionWidth: dimensions.width,
+                        scale,
+                    }),
+                    size: unsmoothened,
+                };
+            }
+            const effectiveTranslation = (0, get_effective_translation_1.getEffectiveTranslation)({
+                translation: prevSize.translation,
+                canvasSize: size,
+                compositionHeight: dimensions.height,
+                compositionWidth: dimensions.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: dimensions.height,
+                    compositionWidth: dimensions.width,
+                    scale,
+                }),
+            };
+        });
+    }, [dimensions, isFit, setSize, size]);
+    (0, react_1.useEffect)(() => {
+        const { current } = ref;
+        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 (!dimensions) {
+            return;
+        }
+        if (!size) {
+            return;
+        }
+        setSize((prevSize) => {
+            const scale = player_1.PlayerInternals.calculateScale({
+                canvasSize: size,
+                compositionHeight: dimensions.height,
+                compositionWidth: dimensions.width,
+                previewSize: prevSize.size,
+            });
+            return {
+                translation: {
+                    x: 0,
+                    y: 0,
+                },
+                size: Math.min(smooth_zoom_1.MAX_ZOOM, scale * 2),
+            };
+        });
+    }, [dimensions, setSize, size]);
+    const onZoomOut = (0, react_1.useCallback)(() => {
+        if (!dimensions) {
+            return;
+        }
+        if (!size) {
+            return;
+        }
+        setSize((prevSize) => {
+            const scale = player_1.PlayerInternals.calculateScale({
+                canvasSize: size,
+                compositionHeight: dimensions.height,
+                compositionWidth: dimensions.width,
+                previewSize: prevSize.size,
+            });
+            return {
+                translation: {
+                    x: 0,
+                    y: 0,
+                },
+                size: Math.max(smooth_zoom_1.MIN_ZOOM, scale / 2),
+            };
+        });
+    }, [dimensions, setSize, size]);
+    (0, react_1.useEffect)(() => {
+        const resetBinding = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: '0',
+            commandCtrlKey: false,
+            callback: onReset,
+            preventDefault: true,
+        });
+        const zoomIn = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: '+',
+            commandCtrlKey: false,
+            callback: onZoomIn,
+            preventDefault: true,
+        });
+        const zoomOut = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: '-',
+            commandCtrlKey: false,
+            callback: onZoomOut,
+            preventDefault: true,
+        });
+        return () => {
+            resetBinding.unregister();
+            zoomIn.unregister();
+            zoomOut.unregister();
+        };
+    }, [keybindings, onReset, onZoomIn, onZoomOut]);
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, style: container, children: [size ? (0, jsx_runtime_1.jsx)(Preview_1.VideoPreview, { canvasSize: size }) : null, isFit ? null : ((0, jsx_runtime_1.jsx)("div", { style: resetZoom, children: (0, jsx_runtime_1.jsx)(ResetZoomButton_1.ResetZoomButton, { onClick: onReset }) }))] }));
 };
 exports.Canvas = Canvas;

package/dist/editor/components/CheckboardToggle.js

@@ -3,9 +3,16 @@ 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 use_keybinding_1 = require("../helpers/use-keybinding");
 const checkerboard_1 = require("../state/checkerboard");
 const ControlButton_1 = require("./ControlButton");
-const accessibilityLabel = 'Show transparency as checkerboard (T)';
+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)(() => {

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

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

package/dist/editor/components/Checkbox.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Checkbox = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../helpers/colors");
+const Checkmark_1 = require("../icons/Checkmark");
+const size = 20;
+const background = {
+    height: size,
+    width: size,
+    position: 'relative',
+};
+const input = {
+    appearance: 'none',
+    background: 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,
+};
+const box = {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    position: 'absolute',
+    height: size,
+    width: size,
+    top: 0,
+    left: 0,
+    pointerEvents: 'none',
+};
+const Checkbox = ({ checked, onChange }) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: background, children: [(0, jsx_runtime_1.jsx)("input", { style: input, type: 'checkbox', checked: checked, onChange: onChange }), (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/CollapsableOptions.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const CollapsableOptions: React.FC<{
+    children: React.ReactNode;
+    showLabel: string;
+    hideLabel: string;
+}>;

package/dist/editor/components/CollapsableOptions.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CollapsableOptions = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../helpers/colors");
+const z_index_1 = require("../state/z-index");
+const layout_1 = require("./layout");
+const TimelineCollapseToggle_1 = require("./Timeline/TimelineCollapseToggle");
+const container = {
+    marginLeft: 16,
+    height: 40,
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+};
+const buttonStyle = {
+    border: 'none',
+    padding: 0,
+    appearance: 'none',
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    fontSize: 14,
+    color: colors_1.LIGHT_TEXT,
+};
+const CollapsableOptions = ({ children, showLabel, hideLabel }) => {
+    const [show, setShow] = (0, react_1.useState)(false);
+    const { tabIndex } = (0, z_index_1.useZIndex)();
+    const onClick = (0, react_1.useCallback)(() => {
+        setShow((s) => !s);
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: container, children: (0, jsx_runtime_1.jsxs)("button", { style: buttonStyle, tabIndex: tabIndex, onClick: onClick, type: "button", children: [(0, jsx_runtime_1.jsx)(TimelineCollapseToggle_1.TimelineCollapseToggle, { color: colors_1.LIGHT_TEXT, collapsed: !show }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { block: true, x: 1 }), show ? hideLabel : showLabel] }) }), show ? children : null] }));
+};
+exports.CollapsableOptions = CollapsableOptions;

package/dist/editor/components/CompositionSelector.js

@@ -4,6 +4,7 @@ exports.CompositionSelector = exports.getKeysToExpand = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const colors_1 = require("../helpers/colors");
 const create_folder_tree_1 = require("../helpers/create-folder-tree");
 const persist_open_folders_1 = require("../helpers/persist-open-folders");
 const z_index_1 = require("../state/z-index");
@@ -16,6 +17,7 @@ const container = {
     height: '100%',
     width: '100%',
     flex: 1,
+    backgroundColor: colors_1.BACKGROUND,
 };
 const list = {
     padding: 5,

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TComposition } from 'remotion';
+import type { TComposition } from 'remotion';
 export declare type CompositionSelectorItemType = {
     key: string;
     type: 'composition';
@@ -16,7 +16,7 @@ export declare const CompositionSelectorItem: React.FC<{
     item: CompositionSelectorItemType;
     currentComposition: string | null;
     tabIndex: number;
-    selectComposition: (c: TComposition) => void;
+    selectComposition: (c: TComposition, push: boolean) => void;
     toggleFolder: (folderName: string, parentName: string | null) => void;
     level: number;
 }>;

package/dist/editor/components/CompositionSelectorItem.js

@@ -22,6 +22,8 @@ const itemStyle = {
     appearance: 'none',
     border: 'none',
     width: '100%',
+    textAlign: 'left',
+    backgroundColor: colors_1.BACKGROUND,
 };
 const iconStyle = {
     width: 18,
@@ -58,7 +60,7 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
     const onClick = (0, react_1.useCallback)((evt) => {
         evt.preventDefault();
         if (item.type === 'composition') {
-            selectComposition(item.composition);
+            selectComposition(item.composition, true);
         }
         else {
             toggleFolder(item.folderName, item.parentName);

package/dist/editor/components/CopyButton.js

@@ -3,36 +3,23 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CopyButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const colors_1 = require("../helpers/colors");
+const Button_1 = require("../../preview-server/error-overlay/remotion-overlay/Button");
 const copy_text_1 = require("../helpers/copy-text");
 const layout_1 = require("./layout");
 const iconStyle = {
     width: 16,
     height: 16,
     color: 'white',
+    verticalAlign: 'sub',
 };
 const copyIcon = ((0, jsx_runtime_1.jsx)("svg", { "aria-hidden": "true", focusable: "false", "data-prefix": "far", "data-icon": "clipboard", className: "svg-inline--fa fa-clipboard fa-w-12", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 384 512", style: iconStyle, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M336 64h-80c0-35.3-28.7-64-64-64s-64 28.7-64 64H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM192 40c13.3 0 24 10.7 24 24s-10.7 24-24 24-24-10.7-24-24 10.7-24 24-24zm144 418c0 3.3-2.7 6-6 6H54c-3.3 0-6-2.7-6-6V118c0-3.3 2.7-6 6-6h42v36c0 6.6 5.4 12 12 12h168c6.6 0 12-5.4 12-12v-36h42c3.3 0 6 2.7 6 6z" }) }));
-const container = {
-    padding: 10,
-    cursor: 'pointer',
-    fontSize: 14,
-};
-const button = {
-    border: `1px solid ${colors_1.INPUT_BORDER_COLOR_UNHOVERED}`,
-    borderRadius: 4,
-    backgroundColor: colors_1.INPUT_BACKGROUND,
-    appearance: 'none',
-    fontFamily: 'inherit',
-    fontSize: 14,
-    color: 'white',
-};
 const labelStyle = {
     fontSize: 14,
 };
 const CopyButton = ({ textToCopy, label, labelWhenCopied }) => {
     const [copied, setCopied] = (0, react_1.useState)(false);
     const onClick = (0, react_1.useCallback)(() => {
-        (0, copy_text_1.copyCmd)(textToCopy);
+        (0, copy_text_1.copyText)(textToCopy);
         setCopied(Date.now());
     }, [textToCopy]);
     (0, react_1.useEffect)(() => {
@@ -42,6 +29,6 @@ const CopyButton = ({ textToCopy, label, labelWhenCopied }) => {
         const to = setTimeout(() => setCopied(false), 2000);
         return () => clearTimeout(to);
     }, [copied]);
-    return ((0, jsx_runtime_1.jsx)("button", { onClick: onClick, style: button, type: "button", children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { style: container, children: [copyIcon, (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1.5 }), ' ', (0, jsx_runtime_1.jsx)("span", { style: labelStyle, children: copied ? labelWhenCopied : label })] }) }));
+    return ((0, jsx_runtime_1.jsxs)(Button_1.Button, { onClick: onClick, children: [copyIcon, (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1.5 }), ' ', (0, jsx_runtime_1.jsx)("span", { style: labelStyle, children: copied ? labelWhenCopied : label })] }));
 };
 exports.CopyButton = CopyButton;