@remotion/promo-pages 4.0.306 → 4.0.310

package/dist/components/homepage/VideoApps.js

@@ -1,72 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-import { BlueButton } from './layout/Button';
-import { useColorMode } from './layout/use-color-mode';
-import { Spacer } from './Spacer';
-import { YouAreHere } from './YouAreHere';
-const row = {
-    display: 'flex',
-    flexDirection: 'row',
-};
-const flex = {
-    flex: 1,
-};
-const list = {
-    listStyleType: 'none',
-    textAlign: 'center',
-    paddingLeft: 0,
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-};
-const hr = {
-    width: 20,
-    textAlign: 'center',
-    borderTop: 0,
-    marginTop: 10,
-    marginBottom: 10,
-};
-const docsButton = {
-    textDecoration: 'none',
-};
-const StepTitle = ({ children }) => {
-    return (_jsx("div", { className: "text-center text-xl font-semibold fontbrand mt-2", children: children }));
-};
-const Subtitle = ({ children }) => {
-    return (_jsx("div", { className: "text-center text-base fontbrand text-[var(--subtitle)]", children: children }));
-};
-const Pane = ({ children }) => {
-    return (_jsx("div", { className: "border-effect bg-pane flex-1 p-3 rounded-lg min-h-[500px] flex flex-col text-center", children: children }));
-};
-export const VideoApps = ({ active }) => {
-    const { colorMode } = useColorMode();
-    const [src, setSrc] = useState('/img/player-example.png');
-    const [src2, setSrc2] = useState('/img/player-example-dark.png');
-    useEffect(() => {
-        if (colorMode === 'dark') {
-            setSrc('/img/player-example-dark.png');
-        }
-        else {
-            setSrc('/img/player-example.png');
-        }
-    }, [colorMode]);
-    useEffect(() => {
-        setSrc2(colorMode === 'dark' ? '/img/cluster-dark.png' : '/img/cluster.png');
-    }, [colorMode]);
-    return (_jsx("div", { className: "w-full", children: _jsxs("div", { className: 'flex flex-col lg:flex-row gap-2', children: [_jsxs(Pane, { children: [active === 'remotion' ? _jsx(YouAreHere, {}) : null, _jsx(StepTitle, { children: "Remotion" }), _jsx(Subtitle, { children: "Make videos programmatically" }), _jsx("br", {}), _jsx("div", { style: {
-                                display: 'flex',
-                                justifyContent: 'center',
-                                alignItems: 'center',
-                                flex: 1,
-                            }, children: _jsx("img", { className: "max-w-[300px]", src: "/img/writeinreact.png" }) }), _jsxs("ul", { style: list, children: [_jsx("li", { children: "Use the Web to create graphics" }), _jsx("hr", { style: hr }), _jsx("li", { children: "Consume user input and APIs" }), _jsx("hr", { style: hr }), _jsx("li", { children: "Render real MP4 videos" })] }), _jsxs("div", { style: row, children: [active === 'remotion' ? null : (_jsxs(_Fragment, { children: [_jsx("div", { style: flex, children: _jsx("a", { style: docsButton, href: "/", children: _jsx(BlueButton, { loading: false, size: "sm", children: "Learn more" }) }) }), _jsx(Spacer, {}), _jsx(Spacer, {})] })), _jsx("div", { style: flex, children: _jsx("a", { style: docsButton, href: "/docs", children: _jsx(BlueButton, { className: "w-full", loading: false, size: "sm", children: "Read docs" }) }) })] })] }), _jsxs(Pane, { children: [active === 'player' ? _jsx(YouAreHere, {}) : null, _jsx(StepTitle, { children: "Remotion Player" }), _jsx(Subtitle, { children: "Embeddable interactive videos" }), _jsx("br", {}), _jsx("div", { style: {
-                                display: 'flex',
-                                justifyContent: 'center',
-                                alignItems: 'center',
-                                flex: 1,
-                            }, children: _jsx("img", { className: "max-w-[300px]", src: src }) }), _jsxs("ul", { style: list, children: [_jsx("li", { children: "Preview videos in the browser" }), _jsx("hr", { style: hr }), _jsx("li", { children: "React to user input" }), _jsx("hr", { style: hr }), _jsx("li", { children: "Customize look and behavior" })] }), _jsxs("div", { style: row, children: [active === 'player' ? null : (_jsxs(_Fragment, { children: [_jsx("div", { style: flex, children: _jsx("a", { style: docsButton, href: "/player", children: _jsx(BlueButton, { className: "w-full", loading: false, size: "sm", children: "Learn more" }) }) }), _jsx(Spacer, {}), _jsx(Spacer, {})] })), _jsx("div", { style: flex, children: _jsx("a", { style: docsButton, href: "/docs/player", children: _jsx(BlueButton, { className: "w-full", loading: false, size: "sm", children: "Read docs" }) }) })] })] }), _jsxs(Pane, { children: [active === 'lambda' ? _jsx(YouAreHere, {}) : null, _jsx(StepTitle, { children: "Remotion Lambda" }), _jsx(Subtitle, { children: "Render at scale" }), _jsx("br", {}), _jsx("div", { style: {
-                                display: 'flex',
-                                justifyContent: 'center',
-                                alignItems: 'center',
-                                flex: 1,
-                            }, children: _jsx("img", { className: "max-w-[300px]", src: src2 }) }), _jsx("div", { className: "flex-1" }), _jsxs("ul", { style: list, children: [_jsx("li", { children: "Render videos in the cloud" }), _jsx("hr", { style: hr }), _jsx("li", { children: "Scale according to your volume" }), _jsx("hr", { style: hr }), _jsx("li", { children: "Fast because distributed" })] }), _jsxs("div", { style: row, children: [active === 'lambda' ? null : (_jsxs(_Fragment, { children: [_jsx("div", { style: flex, children: _jsx("a", { style: docsButton, href: "/lambda", children: _jsx(BlueButton, { className: "w-full", loading: false, size: "sm", children: "Learn more" }) }) }), _jsx(Spacer, {}), _jsx(Spacer, {})] })), _jsx("div", { style: flex, children: _jsx("a", { style: docsButton, href: "/docs/lambda", children: _jsx(BlueButton, { className: "w-full", loading: false, size: "sm", children: "Read docs" }) }) })] })] })] }) }));
-};

package/dist/components/homepage/VideoAppsShowcase.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-declare const VideoAppsShowcase: React.FC;
-export default VideoAppsShowcase;

package/dist/components/homepage/VideoAppsShowcase.js

@@ -1,160 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from 'react';
-import { BlueButton } from './layout/Button';
-import { MuxVideo } from './MuxVideo';
-import { SectionTitle } from './VideoAppsTitle';
-const tabs = [
-    'Music visualization',
-    'Captions',
-    'Screencast',
-    'Year in review',
-];
-const videoApps = [
-    {
-        title: 'Banger.Show',
-        description: 'The all-in-one 3D visual creation tool for ambitious artists. Seamlessly craft visuals that match your sound and propel your brand forward.',
-        link: 'https://banger.show?ref=remotion',
-        videoWidth: 1080,
-        videoHeight: 1080,
-        muxId: 'riYdneJ2zu1Vqiayoe1qAZXcSIRq0201tHgSBbh9JbtlU',
-        buttonText: 'Banger.Show website',
-    },
-    {
-        title: 'Submagic',
-        description: 'A video editor for creating short-form content fast. Designed for creators, teams and agencies, it accelerates video editing with AI-powered features such as descriptions, zooms, sound effects and music.',
-        additionalInfo: '',
-        link: 'https://www.submagic.co/?ref=remotion',
-        videoWidth: 540,
-        videoHeight: 1080,
-        muxId: 'pxqGEjlBBntnXrEe4v00pYUBw3FPgUPKumfhSym00Vs004',
-        buttonText: 'Submagic website',
-    },
-    {
-        title: 'Remotion Recorder',
-        description: 'The Remotion Recorder is a video production tool built entirely in JavaScript. Create high-quality videos that feel native on each platform while only editing them once.',
-        link: 'https://www.remotion.pro/recorder',
-        videoWidth: 1080,
-        videoHeight: 1080,
-        muxId: 'pHlwqDZFUH00Aubo9M001ty3gZ6YW8z689XTd9R479ayE',
-        buttonText: 'More infos',
-    },
-    {
-        title: 'GitHub Unwrapped',
-        description: 'Your coding year in review. Get a personalized video of your GitHub activity.',
-        additionalInfo: 'Uncover your go-to language, peak productivity hours, and track your GitHub impact – all in one video.',
-        link: 'https://githubunwrapped.com/',
-        videoWidth: 1080,
-        videoHeight: 1080,
-        muxId: 'OwQFvqomOR00q6yj5SWwaA7DBg01NaCPKcOvczoZqCty00',
-        buttonText: 'GitHub Unwrapped website',
-    },
-];
-const VideoAppsShowcase = () => {
-    const [activeTab, setActiveTab] = useState(0);
-    const [isMuted, setIsMuted] = useState(true);
-    const videoRef = useRef(null);
-    const containerRef = useRef(null);
-    useEffect(() => {
-        const observer = new IntersectionObserver((entries) => {
-            if (entries[0].isIntersecting) {
-                if (videoRef.current && videoRef.current.paused) {
-                    videoRef.current.muted = true; // Ensure video is muted before autoplay
-                    setIsMuted(true); // Update state to reflect muted status
-                    videoRef.current
-                        .play()
-                        .then(() => { })
-                        .catch((error) => {
-                        // eslint-disable-next-line no-console
-                        console.error('Playback error:', error);
-                    });
-                }
-            }
-            else if (videoRef.current && !videoRef.current.paused) {
-                videoRef.current.pause();
-            }
-        }, { threshold: 0.5 });
-        const currentContainer = containerRef.current;
-        if (currentContainer) {
-            observer.observe(currentContainer);
-        }
-        return () => {
-            if (currentContainer) {
-                observer.unobserve(currentContainer);
-            }
-        };
-    }, []);
-    useEffect(() => {
-        const video = videoRef.current;
-        if (video) {
-            video.pause();
-            video.currentTime = 0;
-            video.load();
-            // Check if the video is visible and play it if it is
-            const observer = new IntersectionObserver((entries) => {
-                if (entries[0].isIntersecting) {
-                    // Introduce a delay before playing the video
-                    if (video) {
-                        video.muted = true; // Ensure video is muted before autoplay
-                        setIsMuted(true); // Update state to reflect muted status
-                        video
-                            .play()
-                            .then(() => { })
-                            .catch((error) => {
-                            // eslint-disable-next-line no-console
-                            console.error('Playback error:', error);
-                        });
-                    }
-                }
-            }, { threshold: 0.5 });
-            observer.observe(video);
-            return () => {
-                observer.disconnect();
-                video.muted = false; // Unmute the video when it's no longer visible
-                if (video) {
-                    video.pause();
-                    video.currentTime = 0;
-                    video.load();
-                }
-            };
-        }
-    }, [activeTab]);
-    const handlePlayPause = () => {
-        if (videoRef.current) {
-            if (videoRef.current.paused) {
-                const playPromise = videoRef.current.play();
-                if (playPromise !== undefined) {
-                    playPromise
-                        .then(() => {
-                        // Playback started successfully
-                    })
-                        .catch((error) => {
-                        // Auto-play was prevented or there was an error
-                        // eslint-disable-next-line no-console
-                        console.error('Playback error:', error);
-                    });
-                }
-            }
-            else {
-                videoRef.current.pause();
-            }
-        }
-    };
-    const handleMuteToggle = () => {
-        if (videoRef.current) {
-            const newMutedState = !videoRef.current.muted;
-            videoRef.current.muted = newMutedState;
-            setIsMuted(newMutedState);
-        }
-    };
-    return (_jsxs("div", { ref: containerRef, children: [_jsx(SectionTitle, { children: "Use Cases" }), _jsx("div", { className: 'grid justify-center grid-flow-col grid-rows-1 gap-2.5 justify-self-center mb-4 w-[90vw] md:w-auto', children: tabs.map((tab, index) => (_jsx("button", { type: "button", "data-active": index === activeTab, className: `bg-transparent border-none m-0 p-0 lg:mx-3 my-4 cursor-pointer text-base fontbrand font-bold transition-colors text-muted data-[active=true]:text-brand`, onClick: () => setActiveTab(index), children: tab }, tab))) }), _jsx("div", { className: 'card flex p-0 overflow-hidden', children: _jsxs("div", { className: 'flex-1 flex flex-col lg:flex-row justify-center', children: [_jsxs("div", { className: 'w-full max-w-[500px] aspect-square relative overflow-hidden bg-[#eee]', onClick: handlePlayPause, children: [_jsx(MuxVideo, { ref: videoRef, muxId: videoApps[activeTab].muxId, className: 'absolute left-0 top-0 w-full h-full object-contain rounded-lg rounded-tr-none rounded-br-none', loop: true, playsInline: true, muted: isMuted }), isMuted && (_jsx("button", { type: "button", className: 'absolute bottom-2.5 right-2.5 bg-white text-black rounded-full w-8 h-8 flex justify-center items-center text-base cursor-pointer transition-colors border-2 border-black border-solid', onClick: (e) => {
-                                        e.stopPropagation();
-                                        handleMuteToggle();
-                                    }, children: _jsx("svg", { style: { width: 24 }, viewBox: "0 0 576 512", children: _jsx("path", { fill: "black", d: "M0 160L0 352l128 0L272 480l48 0 0-448-48 0L128 160 0 160zm441 23l-17-17L390.1 200l17 17 39 39-39 39-17 17L424 345.9l17-17 39-39 39 39 17 17L569.9 312l-17-17-39-39 39-39 17-17L536 166.1l-17 17-39 39-39-39z" }) }) }))] }), _jsxs("div", { className: 'pl-4 flex-1 lg:pl-4 flex flex-col h-full pt-8 pb-6', children: [_jsx("div", { className: "text-4xl font-bold fontbrand", children: videoApps[activeTab].title }), _jsx("div", { className: "text-muted mt-4 text-base fontbrand", children: videoApps[activeTab].description }), videoApps[activeTab].additionalInfo ? (_jsx("div", { className: "text-muted mt-4 text-base fontbrand", children: videoApps[activeTab].additionalInfo })) : null, _jsx("div", { className: "h-5" }), _jsx("a", { target: "_blank", href: videoApps[activeTab].link, style: { textDecoration: 'none' }, children: _jsx(BlueButton, { loading: false, size: "sm", children: videoApps[activeTab].buttonText }) })] })] }) }), _jsx("div", { style: {
-                    marginTop: '1rem',
-                    justifyContent: 'center',
-                    display: 'flex',
-                }, children: _jsxs("div", { style: {
-                        fontFamily: 'GTPlanar',
-                    }, children: ["For more examples see our", ' ', _jsx("a", { href: "/showcase", className: "bluelink", children: "Showcase page" }), "."] }) })] }));
-};
-export default VideoAppsShowcase;

package/dist/components/homepage/VideoAppsTitle.d.ts

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

package/dist/components/homepage/VideoAppsTitle.js

@@ -1,7 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const VideoAppsTitle = () => {
-    return (_jsxs("div", { className: 'text-center', children: [_jsxs("h2", { className: 'fontbrand text-4xl', children: ["Build video ", _jsx("span", { className: 'fontbrand', children: "apps" })] }), _jsx("p", { children: "Use our suite of tools to build apps that lets others create videos." })] }));
-};
-export const SectionTitle = ({ children, }) => {
-    return (_jsx("div", { className: 'text-center', children: _jsx("h2", { className: 'fontbrand text-4xl', children: children }) }));
-};

package/dist/components/homepage/VideoPlayerWithControls.d.ts

@@ -1,20 +0,0 @@
-import type Plyr from 'plyr';
-import 'plyr/dist/plyr.css';
-import './video-player.css';
-export interface HTMLVideoElementWithPlyr extends HTMLVideoElement {
-    plyr: Plyr;
-}
-type Props = {
-    readonly playbackId: string;
-    readonly poster: string;
-    readonly currentTime?: number;
-    readonly onLoaded: () => void;
-    readonly onError: (error: ErrorEvent) => void;
-    readonly onSize: (dim: {
-        width: number;
-        height: number;
-    }) => void;
-    readonly autoPlay?: boolean;
-};
-export declare const VideoPlayerWithControls: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLVideoElementWithPlyr>>;
-export {};

package/dist/components/homepage/VideoPlayerWithControls.js

@@ -1,104 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-/* eslint-disable no-console */
-/* eslint-disable react/require-default-props */
-import Hls from 'hls.js';
-import 'plyr/dist/plyr.css';
-import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
-import './video-player.css';
-const useCombinedRefs = function (...refs) {
-    const targetRef = useRef(null);
-    useEffect(() => {
-        refs.forEach((ref) => {
-            if (!ref)
-                return;
-            if (typeof ref === 'function') {
-                ref(targetRef.current);
-            }
-            else {
-                ref.current = targetRef.current;
-            }
-        });
-    }, [refs]);
-    return targetRef;
-};
-export const VideoPlayerWithControls = forwardRef(({ playbackId, poster, currentTime, onLoaded, onError, onSize, autoPlay }, ref) => {
-    const videoRef = useRef(null);
-    const metaRef = useCombinedRefs(ref, videoRef);
-    const playerRef = useRef(null);
-    const [playerInitTime] = useState(Date.now());
-    const videoError = useCallback((event) => onError(event), [onError]);
-    const onImageLoad = useCallback((event) => {
-        const [w, h] = [event.target.width, event.target.height];
-        if (w && h) {
-            onSize({ width: w, height: h });
-            onLoaded();
-        }
-        else {
-            onLoaded();
-            console.error('Error getting img dimensions', event);
-        }
-    }, [onLoaded, onSize]);
-    /*
-     * See comment above -- we're loading the poster image just so we can grab the dimensions
-     * which determines styles for the player
-     */
-    useEffect(() => {
-        const img = new Image();
-        img.onload = (evt) => onImageLoad(evt);
-        img.src = poster;
-    }, [onImageLoad, poster]);
-    useEffect(() => {
-        const video = videoRef.current;
-        const src = `https://stream.mux.com/${playbackId}.m3u8`;
-        let hls;
-        hls = null;
-        if (video) {
-            video.addEventListener('error', videoError);
-            const Plyr = require('plyr');
-            playerRef.current = new Plyr(video, {
-                previewThumbnails: {
-                    enabled: true,
-                    src: `https://image.mux.com/${playbackId}/storyboard.vtt`,
-                },
-                storage: { enabled: false },
-                fullscreen: {
-                    iosNative: true,
-                },
-                captions: { active: true, language: 'auto', update: true },
-            });
-            if (video.canPlayType('application/vnd.apple.mpegurl')) {
-                // This will run in safari, where HLS is supported natively
-                video.src = src;
-            }
-            else if (Hls.isSupported()) {
-                // This will run in all other modern browsers
-                hls = new Hls();
-                hls.loadSource(src);
-                hls.attachMedia(video);
-                hls.on(Hls.Events.ERROR, (_event, data) => {
-                    if (data.fatal) {
-                        videoError(new ErrorEvent('HLS.js fatal error'));
-                    }
-                });
-            }
-            else {
-                console.error('This is an old browser that does not support MSE https://developer.mozilla.org/en-US/docs/Web/API/Media_Source_Extensions_API');
-            }
-        }
-        return () => {
-            if (video) {
-                video.removeEventListener('error', videoError);
-            }
-            if (hls) {
-                hls.destroy();
-            }
-        };
-    }, [playbackId, playerInitTime, videoError, videoRef]);
-    useEffect(() => {
-        const video = videoRef.current;
-        if (currentTime && video) {
-            video.currentTime = currentTime;
-        }
-    }, [currentTime]);
-    return (_jsx("div", { className: "video-container", children: _jsx("video", { ref: metaRef, autoPlay: autoPlay, poster: poster, controls: true, playsInline: true }) }));
-});

package/dist/components/homepage/WriteInReact.d.ts

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

package/dist/components/homepage/WriteInReact.js

@@ -1,10 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ChooseTemplate } from './ChooseTemplate';
-import { GetStarted } from './GetStartedStrip';
-export const WriteInReact = () => {
-    return (_jsxs("div", { children: [_jsx("h1", { className: "text-5xl lg:text-[5em] text-center fontbrand font-black leading-none ", style: {
-                    textShadow: '0 5px 30px var(--background)',
-                }, children: "Make videos programmatically." }), _jsxs("p", { style: {
-                    textShadow: '0 5px 30px var(--background)',
-                }, className: "font-medium text-center text-lg", children: ["Create real MP4 videos with React. ", _jsx("br", {}), "Parametrize content, render server-side and build applications."] }), _jsx("br", {}), _jsx("div", { children: _jsx(GetStarted, {}) }), _jsx("br", {}), _jsx("br", {}), _jsx(ChooseTemplate, {})] }));
-};

package/dist/components/homepage/YouAreHere.d.ts

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

package/dist/components/homepage/YouAreHere.js

@@ -1,23 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-const container = {
-    width: '100%',
-    display: 'inline-flex',
-    justifyContent: 'center',
-    position: 'relative',
-};
-const label = {
-    backgroundColor: 'var(--ifm-color-primary)',
-    fontWeight: 'bold',
-    color: 'white',
-    paddingLeft: 8,
-    paddingRight: 8,
-    paddingTop: 4,
-    paddingBottom: 4,
-    borderRadius: 6,
-    fontSize: 13,
-    position: 'absolute',
-    marginTop: -25,
-};
-export const YouAreHere = () => {
-    return (_jsx("div", { style: container, children: _jsx("div", { style: label, children: "YOU ARE HERE" }) }));
-};

package/dist/components/homepage/layout/Button.d.ts

@@ -1,19 +0,0 @@
-import type { ButtonHTMLAttributes, DetailedHTMLProps } from 'react';
-import React from 'react';
-type ExtraProps = {
-    readonly size: Size;
-    readonly background: string;
-    readonly hoverColor?: string;
-    readonly color: string;
-    readonly loading: boolean;
-};
-type Size = 'sm' | 'bg';
-type Props = DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> & ExtraProps;
-type MandatoryProps = Omit<ExtraProps, 'background' | 'color' | 'hoverColor'>;
-type PrestyledProps = DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> & MandatoryProps;
-export declare const Button: React.FC<Props>;
-export declare const BlueButton: React.FC<PrestyledProps>;
-export declare const PlainButton: React.FC<PrestyledProps>;
-export declare const RedButton: React.FC<PrestyledProps>;
-export declare const ClearButton: React.FC<PrestyledProps>;
-export {};

package/dist/components/homepage/layout/Button.js

@@ -1,29 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { opacify } from 'polished';
-import { cn } from '../../../cn';
-import { RED, UNDERLAY_RED } from './colors';
-export const Button = (props) => {
-    var _a, _b, _c;
-    const { children, loading, hoverColor, color, size, className, ...other } = props;
-    const actualDisabled = other.disabled || loading;
-    return (_jsx("button", { type: "button", className: cn('text-base rounded-lg font-bold appearance-none border-2 border-solid border-black border-b-4 font-sans flex flex-row items-center justify-center ', className), disabled: actualDisabled, ...other, style: {
-            ...((_a = props.style) !== null && _a !== void 0 ? _a : {}),
-            padding: (_c = (_b = props.style) === null || _b === void 0 ? void 0 : _b.padding) !== null && _c !== void 0 ? _c : (props.size === 'sm' ? '10px 16px' : '16px 22px'),
-            color: props.color,
-            cursor: props.disabled ? 'default' : 'pointer',
-            backgroundColor: props.background,
-            opacity: props.disabled ? 0.7 : 1,
-        }, children: children }));
-};
-export const BlueButton = (props) => {
-    return _jsx(Button, { ...props, background: "var(--blue-underlay)", color: "white" });
-};
-export const PlainButton = (props) => {
-    return (_jsx(Button, { ...props, background: "var(--plain-button)", color: "var(--text-color)" }));
-};
-export const RedButton = (props) => {
-    return (_jsx(Button, { ...props, background: UNDERLAY_RED, hoverColor: opacify(0.1, UNDERLAY_RED), color: RED }));
-};
-export const ClearButton = (props) => {
-    return (_jsx(Button, { ...props, background: "transparent", color: "var(--text-color)", hoverColor: "var(--clear-hover)" }));
-};

package/dist/components/homepage/layout/colors.d.ts

@@ -1,13 +0,0 @@
-export declare const PALETTE: {
-    BOX_STROKE: string;
-    TEXT_COLOR: string;
-    BORDER_COLOR: string;
-    BRAND: string;
-};
-export declare const FONTS: {
-    GTPLANAR: string;
-};
-export declare const UNDERLAY_BLUE: string;
-export declare const RED = "#e74c3c";
-export declare const UNDERLAY_RED: string;
-export declare const BLUE_TEXT: string;

package/dist/components/homepage/layout/colors.js

@@ -1,14 +0,0 @@
-import { darken, transparentize } from 'polished';
-export const PALETTE = {
-    BOX_STROKE: 'var(--box-stroke)',
-    TEXT_COLOR: 'var(--text-color)',
-    BORDER_COLOR: 'var(--border-color)',
-    BRAND: 'var(--ifm-color-primary)',
-};
-export const FONTS = {
-    GTPLANAR: 'GTPlanar',
-};
-export const UNDERLAY_BLUE = transparentize(0.85, '#42e9f5');
-export const RED = '#e74c3c';
-export const UNDERLAY_RED = transparentize(0.9, RED);
-export const BLUE_TEXT = darken(0.3, '#42e9f5');

package/dist/components/homepage/layout/use-color-mode.d.ts

@@ -1,21 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-import React, { type ReactNode } from 'react';
-type ContextValue = {
-    /** Current color mode. */
-    readonly colorMode: ColorMode;
-    /** Set new color mode. */
-    readonly setColorMode: (colorMode: ColorMode) => void;
-};
-export type ColorMode = 'light' | 'dark';
-export declare const ColorModeProvider: ({ children, colorMode, setColorMode, }: {
-    readonly children: React.ReactNode;
-    readonly setColorMode: (colorMode: ColorMode) => void;
-    readonly colorMode: ColorMode;
-}) => ReactNode;
-export declare function useColorMode(): ContextValue;
-export {};

package/dist/components/homepage/layout/use-color-mode.js

@@ -1,22 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-import React, { useContext, useMemo } from 'react';
-const Context = React.createContext(undefined);
-export const ColorModeProvider = ({ children, colorMode, setColorMode, }) => {
-    const value = useMemo(() => {
-        return { colorMode, setColorMode };
-    }, [colorMode, setColorMode]);
-    return _jsx(Context.Provider, { value: value, children: children });
-};
-export function useColorMode() {
-    const context = useContext(Context);
-    if (context === null || context === undefined) {
-        throw new Error('ColorModeProvider');
-    }
-    return context;
-}

package/dist/components/homepage/layout/use-el-size.d.ts

@@ -1,5 +0,0 @@
-export type Size = {
-    width: number;
-    height: number;
-};
-export declare const useElementSize: (ref: HTMLElement | null) => Size | null;

package/dist/components/homepage/layout/use-el-size.js

@@ -1,40 +0,0 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
-export const useElementSize = (ref) => {
-    const [size, setSize] = useState(null);
-    const observer = useMemo(() => {
-        if (typeof ResizeObserver === 'undefined') {
-            return;
-        }
-        return new ResizeObserver((entries) => {
-            setSize({
-                width: entries[0].contentRect.width,
-                height: entries[0].contentRect.height,
-            });
-        });
-    }, []);
-    const updateSize = useCallback(() => {
-        if (ref === null) {
-            return;
-        }
-        const rect = ref.getClientRects();
-        setSize({
-            width: rect[0].width,
-            height: rect[0].height,
-        });
-    }, [ref]);
-    useEffect(() => {
-        updateSize();
-        if (!observer) {
-            return;
-        }
-        if (ref) {
-            observer.observe(ref);
-        }
-        return () => {
-            if (ref) {
-                observer.unobserve(ref);
-            }
-        };
-    }, [observer, ref, updateSize]);
-    return size;
-};

package/dist/components/homepage/layout/use-mobile-layout.d.ts

@@ -1 +0,0 @@
-export declare const useMobileLayout: () => boolean;

package/dist/components/homepage/layout/use-mobile-layout.js

@@ -1,6 +0,0 @@
-import { useElementSize } from './use-el-size';
-export const useMobileLayout = () => {
-    var _a;
-    const containerSize = useElementSize(typeof document === 'undefined' ? null : document.body);
-    return ((_a = containerSize === null || containerSize === void 0 ? void 0 : containerSize.width) !== null && _a !== void 0 ? _a : Infinity) < 900;
-};

package/dist/components/icons/blank.d.ts

@@ -1,3 +0,0 @@
-import type { SVGProps } from 'react';
-import React from 'react';
-export declare const Blank: React.FC<SVGProps<SVGSVGElement>>;

package/dist/components/icons/blank.js

@@ -1,4 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-export const Blank = (props) => {
-    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 384 512", ...props, children: _jsx("path", { fill: "currentColor", d: "M0 64C0 28.65 28.65 0 64 0H220.1C232.8 0 245.1 5.057 254.1 14.06L369.9 129.9C378.9 138.9 384 151.2 384 163.9V448C384 483.3 355.3 512 320 512H64C28.65 512 0 483.3 0 448V64zM352 192H240C213.5 192 192 170.5 192 144V32H64C46.33 32 32 46.33 32 64V448C32 465.7 46.33 480 64 480H320C337.7 480 352 465.7 352 448V192zM347.3 152.6L231.4 36.69C229.4 34.62 226.8 33.18 224 32.48V144C224 152.8 231.2 160 240 160H351.5C350.8 157.2 349.4 154.6 347.3 152.6z" }) }));
-};

package/dist/components/icons/clone.d.ts

@@ -1,2 +0,0 @@
-import type { SVGProps } from 'react';
-export declare const CloneIcon: React.FC<SVGProps<SVGSVGElement>>;

package/dist/components/icons/clone.js

@@ -1,2 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-export const CloneIcon = (props) => (_jsx("svg", { ...props, viewBox: "0 0 512 512", children: _jsx("path", { fill: "currentcolor", d: "M288 448L64 448l0-224 64 0 0-64-64 0c-35.3 0-64 28.7-64 64L0 448c0 35.3 28.7 64 64 64l224 0c35.3 0 64-28.7 64-64l0-64-64 0 0 64zm-64-96l224 0c35.3 0 64-28.7 64-64l0-224c0-35.3-28.7-64-64-64L224 0c-35.3 0-64 28.7-64 64l0 224c0 35.3 28.7 64 64 64z" }) }));

package/dist/components/icons/code-hike.d.ts

@@ -1,3 +0,0 @@
-import type { SVGProps } from 'react';
-import React from 'react';
-export declare const CodeHike: React.FC<SVGProps<SVGSVGElement>>;

package/dist/components/icons/code-hike.js

@@ -1,4 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const CodeHike = (props) => {
-    return (_jsxs("svg", { ...props, viewBox: "-100 -100 200 200", fill: "currentColor", children: [_jsx("path", { d: "M 70 60 L 42 -27 L 72 -27 L 100 60 Z" }), _jsx("path", { d: "M 20.419540229885058 40.05357142857142 L 42 -27 L 72 -27 L 50.41954022988506 40.05357142857142 Z" }), _jsx("path", { d: "M 20.419540229885058 40.05357142857142 L -15 -70 L 15 -70 L 50.41954022988506 40.05357142857142 Z" }), _jsx("path", { d: "M -50.41954022988506 40.05357142857142 L -15 -70 L 15 -70 L -20.419540229885058 40.05357142857142 Z" }), _jsx("path", { d: "M -50.41954022988506 40.05357142857142 L -72 -27 L -42 -27 L -20.419540229885058 40.05357142857142 Z" }), _jsx("path", { d: "M -100 60 L -72 -27 L -42 -27 L -70 60 Z" })] }));
-};