@remotion/promo-pages 4.0.312 → 4.0.313

package/dist/components/homepage/VideoAppsShowcase.js

@@ -0,0 +1,160 @@
+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.dev/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

@@ -0,0 +1,5 @@
+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

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,20 @@
+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

@@ -0,0 +1,104 @@
+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

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

package/dist/components/homepage/WriteInReact.js

@@ -0,0 +1,10 @@
+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

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

package/dist/components/homepage/YouAreHere.js

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,19 @@
+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

@@ -0,0 +1,29 @@
+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

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,21 @@
+/**
+ * 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

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,5 @@
+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

@@ -0,0 +1,40 @@
+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

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

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

@@ -0,0 +1,6 @@
+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

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

package/dist/components/icons/blank.js

@@ -0,0 +1,4 @@
+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

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

package/dist/components/icons/clone.js

@@ -0,0 +1,2 @@
+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

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

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

@@ -0,0 +1,4 @@
+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" })] }));
+};

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

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

package/dist/components/icons/cubes.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Cubes = (props) => {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", ...props, children: _jsx("path", { fill: "currentColor", d: "M239.5 5.018C250.1 1.106 261.9 1.106 272.5 5.018L480.5 81.28C499.4 88.22 512 106.2 512 126.4V385.7C512 405.8 499.4 423.8 480.5 430.7L272.5 506.1C261.9 510.9 250.1 510.9 239.5 506.1L31.48 430.7C12.57 423.8 0 405.8 0 385.7V126.4C0 106.2 12.57 88.22 31.48 81.28L239.5 5.018zM261.5 35.06C257.1 33.76 254 33.76 250.5 35.06L44.14 110.7L256 193.1L467.9 110.7L261.5 35.06zM42.49 400.7L240 473.1V222L32 140.3V385.7C32 392.4 36.19 398.4 42.49 400.7V400.7zM272 473.1L469.5 400.7C475.8 398.4 480 392.4 480 385.7V140.3L272 222V473.1z" }) }));
+};

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

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

package/dist/components/icons/js.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const JSIcon = (props) => {
+    return (_jsx("svg", { className: "svg-inline--fa fa-js-square fa-w-14", viewBox: "0 0 448 512", ...props, children: _jsx("path", { fill: "currentColor", d: "M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM243.8 381.4c0 43.6-25.6 63.5-62.9 63.5-33.7 0-53.2-17.4-63.2-38.5l34.3-20.7c6.6 11.7 12.6 21.6 27.1 21.6 13.8 0 22.6-5.4 22.6-26.5V237.7h42.1v143.7zm99.6 63.5c-39.1 0-64.4-18.6-76.7-43l34.3-19.8c9 14.7 20.8 25.6 41.5 25.6 17.4 0 28.6-8.7 28.6-20.8 0-14.4-11.4-19.5-30.7-28l-10.5-4.5c-30.4-12.9-50.5-29.2-50.5-63.5 0-31.6 24.1-55.6 61.6-55.6 26.8 0 46 9.3 59.8 33.7L368 290c-7.2-12.9-15-18-27.1-18-12.3 0-20.1 7.8-20.1 18 0 12.6 7.8 17.7 25.9 25.6l10.5 4.5c35.8 15.3 55.9 31 55.9 66.2 0 37.8-29.8 58.6-69.7 58.6z" }) }));
+};

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

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

package/dist/components/icons/music.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const MusicIcon = (props) => {
+    return (_jsx("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", children: _jsx("path", { d: "M499.1 6.3c8.1 6 12.9 15.6 12.9 25.7l0 72 0 264c0 44.2-43 80-96 80s-96-35.8-96-80s43-80 96-80c11.2 0 22 1.6 32 4.6L448 147 192 223.8 192 432c0 44.2-43 80-96 80s-96-35.8-96-80s43-80 96-80c11.2 0 22 1.6 32 4.6L128 200l0-72c0-14.1 9.3-26.6 22.8-30.7l320-96c9.7-2.9 20.2-1.1 28.3 5z" }) }));
+};

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

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const NextIcon: React.FC<{
+    readonly style: React.CSSProperties;
+}>;

package/dist/components/icons/next.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const NextIcon = ({ style }) => {
+    return (_jsxs("svg", { fill: "none", viewBox: "0 0 180 180", style: style, xmlns: "http://www.w3.org/2000/svg", children: [_jsx("mask", { height: "180", id: "mask0_292_250", maskUnits: "userSpaceOnUse", style: { maskType: 'alpha' }, width: "180", x: "0", y: "0", children: _jsx("circle", { cx: "90", cy: "90", fill: "currentcolor", r: "90" }) }), _jsxs("g", { mask: "url(#mask0_292_250)", children: [_jsx("circle", { cx: "90", cy: "90", fill: "currentcolor", r: "90" }), _jsx("path", { d: "M149.508 157.52L69.142 54H54V125.97H66.1136V69.3836L139.999 164.845C143.333 162.614 146.509 160.165 149.508 157.52Z", fill: "url(#paint0_linear_292_250)" }), _jsx("rect", { fill: "url(#paint1_linear_292_250)", height: "72", width: "12", x: "115", y: "54" })] }), _jsxs("defs", { children: [_jsxs("linearGradient", { gradientUnits: "userSpaceOnUse", id: "paint0_linear_292_250", x1: "109", x2: "144.5", y1: "116.5", y2: "160.5", children: [_jsx("stop", { stopColor: "var(--background)" }), _jsx("stop", { offset: "1", stopColor: "var(--background)", stopOpacity: "0" })] }), _jsxs("linearGradient", { gradientUnits: "userSpaceOnUse", id: "paint1_linear_292_250", x1: "121", x2: "120.799", y1: "54", y2: "106.875", children: [_jsx("stop", { stopColor: "var(--background)" }), _jsx("stop", { offset: "1", stopColor: "var(--background)", stopOpacity: "0" })] })] })] }));
+};

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

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

package/dist/components/icons/overlay.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const OverlayIcon = (props) => {
+    return (_jsxs("svg", { viewBox: "0 0 576 512", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [_jsx("path", { d: "M251.1 407.9C274.5 418.7 301.5 418.7 324.9 407.9V407.8L476.9 337.6L530.1 362.2C538.6 366.1 544 374.6 544 384C544 393.4 538.6 401.9 530.1 405.8L311.5 506.8C296.6 513.7 279.4 513.7 264.5 506.8L45.9 405.8C37.4 401.9 32 393.4 32 384C32 374.6 37.4 366.1 45.9 362.2L99.1 337.7L251.1 407.9Z", fill: "currentcolor" }), _jsx("path", { d: "M277.8 132.7L495.2 230.1C505.4 234.7 512 244.8 512 256C512 267.2 505.4 277.3 495.2 281.9L277.8 379.3C270.1 382.4 263.5 384 256 384C248.5 384 241 382.4 234.2 379.3L16.76 281.9C6.561 277.3 0.0003 267.2 0.0003 256C0.0003 244.8 6.561 234.7 16.76 230.1L234.2 132.7C241 129.6 248.5 128 256 128C263.5 128 270.1 129.6 277.8 132.7Z", stroke: "currentcolor", transform: "translate(32, -25)", strokeWidth: "36" })] }));
+};

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

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