@remotion/promo-pages 4.0.370 → 4.0.372

package/dist/components/homepage/Demo/DragAndDropNudge.js

@@ -1,26 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { FONTS, PALETTE } from '../layout/colors';
-const origWidth = 37;
-const scale = 0.4;
-export const Icon = () => {
-    return (_jsx("svg", { style: {
-            width: origWidth * scale,
-            overflow: 'visible',
-        }, viewBox: "0 0 37 59", fill: "none", children: _jsx("path", { d: "M5.00003 5C5.00002 36.5 16 44 32.0002 54", stroke: PALETTE.TEXT_COLOR, strokeWidth: "8", strokeLinecap: "round" }) }));
-};
-export const DragAndDropNudge = () => {
-    return (_jsx("div", { style: {
-            position: 'absolute',
-            flexDirection: 'row',
-            display: 'flex',
-            justifyContent: 'flex-start',
-            paddingBottom: 5,
-            marginTop: 50,
-        }, className: 'ml-4 lg:-ml-5', children: _jsxs("div", { children: [_jsx("div", { style: {
-                        fontFamily: FONTS.GTPLANAR,
-                        fontSize: 15,
-                        width: 280,
-                        paddingBottom: 8,
-                        textWrap: 'balance',
-                    }, className: '-ml-3 lg:-ml-5', children: "Drag and drop the cards to reorder them." }), _jsx(Icon, {})] }) }));
-};

package/dist/components/homepage/Demo/EmojiCard.d.ts

@@ -1,10 +0,0 @@
-import type { EmojiName } from '@remotion/animated-emoji';
-import React from 'react';
-export type EmojiCardRef = {
-    onLeft: () => void;
-    onRight: () => void;
-};
-export type EmojiCardProps = {
-    readonly emojiIndex: EmojiName;
-};
-export declare const EmojiCard: React.ForwardRefExoticComponent<EmojiCardProps & React.RefAttributes<EmojiCardRef>>;

package/dist/components/homepage/Demo/EmojiCard.js

@@ -1,120 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, } from 'react';
-import { AbsoluteFill, useRemotionEnvironment } from 'remotion';
-import { DisplayedEmoji } from './DisplayedEmoji';
-const applyTransforms = ({ ref1, ref2, ref3, transforms }) => {
-    ref1.style.transform = `translateX(${transforms[0]}%)`;
-    ref2.style.transform = `translateX(${transforms[1]}%)`;
-    ref3.style.transform = `translateX(${transforms[2]}%)`;
-};
-const waitForRaq = async () => {
-    await new Promise((resolve) => {
-        requestAnimationFrame(resolve);
-    });
-};
-const moveLeft = async ({ ref1, ref2, ref3, transforms }) => {
-    for (let i = 0; i < 20; i++) {
-        for (const idx in transforms) {
-            transforms[idx] -= 5;
-            if (transforms[idx] <= -200) {
-                transforms[idx] += 300;
-            }
-        }
-        applyTransforms({ ref1, ref2, ref3, transforms });
-        await waitForRaq();
-    }
-};
-const moveRight = async ({ ref1, ref2, ref3, transforms }) => {
-    for (let i = 0; i < 20; i++) {
-        for (const idx in transforms) {
-            transforms[idx] += 5;
-            if (transforms[idx] >= 100) {
-                transforms[idx] -= 300;
-            }
-        }
-        applyTransforms({ ref1, ref2, ref3, transforms });
-        await waitForRaq();
-    }
-};
-const emojiStyle = {
-    width: '100%',
-    position: 'absolute',
-    top: 'calc(50% - 50px)',
-};
-const EmojiCardRefFn = ({ emojiIndex }, ref) => {
-    const ref1 = useRef(null);
-    const ref2 = useRef(null);
-    const ref3 = useRef(null);
-    const transforms = useRef([-100, 0, 100]);
-    const onLeft = useCallback(() => {
-        if (!ref1.current || !ref2.current || !ref3.current) {
-            return;
-        }
-        moveLeft({
-            ref1: ref1.current,
-            ref2: ref2.current,
-            ref3: ref3.current,
-            transforms: transforms.current,
-        });
-    }, []);
-    const onRight = useCallback(() => {
-        if (!ref1.current || !ref2.current || !ref3.current) {
-            return;
-        }
-        moveRight({
-            ref1: ref1.current,
-            ref2: ref2.current,
-            ref3: ref3.current,
-            transforms: transforms.current,
-        });
-    }, []);
-    useEffect(() => {
-        if (!ref1.current || !ref2.current || !ref3.current) {
-            return;
-        }
-        applyTransforms({
-            ref1: ref1.current,
-            ref2: ref2.current,
-            ref3: ref3.current,
-            transforms: transforms.current,
-        });
-    }, []);
-    useImperativeHandle(ref, () => {
-        return {
-            onLeft,
-            onRight,
-        };
-    }, [onLeft, onRight]);
-    useEffect(() => {
-        if (!ref1.current || !ref2.current || !ref3.current) {
-            return;
-        }
-        applyTransforms({
-            ref1: ref1.current,
-            ref2: ref2.current,
-            ref3: ref3.current,
-            transforms: transforms.current,
-        });
-    }, []);
-    const env = useRemotionEnvironment();
-    return (_jsxs(AbsoluteFill, { style: {
-            justifyContent: 'center',
-            alignItems: 'center',
-            overflow: 'hidden',
-        }, children: [_jsx("div", { style: {
-                    color: '#0b84f3',
-                    fontFamily: 'GTPlanar',
-                    fontWeight: '500',
-                    fontSize: 13,
-                    textAlign: 'center',
-                    position: 'absolute',
-                    marginTop: -90,
-                }, children: "Choose an emoji" }), _jsx("div", { style: {
-                    position: 'absolute',
-                    width: '100%',
-                    display: 'flex',
-                    whiteSpace: 'nowrap',
-                    height: '100%',
-                }, children: env.isRendering ? (_jsx("div", { style: emojiStyle, children: _jsx(DisplayedEmoji, { emoji: emojiIndex }) })) : (_jsxs(_Fragment, { children: [_jsx("div", { ref: ref1, style: emojiStyle, children: _jsx(DisplayedEmoji, { emoji: 'melting' }) }), _jsx("div", { ref: ref2, style: emojiStyle, children: _jsx(DisplayedEmoji, { emoji: 'partying-face' }) }), _jsx("div", { ref: ref3, style: emojiStyle, children: _jsx(DisplayedEmoji, { emoji: 'fire' }) })] })) })] }));
-};
-export const EmojiCard = forwardRef(EmojiCardRefFn);

package/dist/components/homepage/Demo/Minus.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-export declare const Minus: React.FC<{
-    readonly leftOffset: number;
-    readonly minusSignOpacity: number;
-}>;

package/dist/components/homepage/Demo/Minus.js

@@ -1,11 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-export const Minus = ({ leftOffset, minusSignOpacity }) => {
-    return (_jsx("div", { style: {
-            position: 'relative',
-            marginLeft: -40 - leftOffset,
-            marginTop: 5,
-            width: 40,
-            opacity: minusSignOpacity,
-            textAlign: 'right',
-        }, children: "-" }));
-};

package/dist/components/homepage/Demo/PlayPauseButton.d.ts

@@ -1,5 +0,0 @@
-import type { PlayerRef } from '@remotion/player';
-import React from 'react';
-export declare const PlayPauseButton: React.FC<{
-    readonly playerRef: React.RefObject<PlayerRef | null>;
-}>;

package/dist/components/homepage/Demo/PlayPauseButton.js

@@ -1,47 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React, { useCallback, useEffect } from 'react';
-import { PALETTE } from '../layout/colors';
-import { PausedIcon, PlayingIcon } from './icons';
-const playerButtonStyle = {
-    appearance: 'none',
-    border: 'none',
-    borderRadius: 0,
-    background: 'none',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    paddingRight: 20,
-    paddingLeft: 20,
-    cursor: 'pointer',
-    height: 50,
-    color: PALETTE.TEXT_COLOR,
-};
-export const PlayPauseButton = ({ playerRef }) => {
-    const [playing, setPlaying] = React.useState(true);
-    useEffect(() => {
-        const { current } = playerRef;
-        if (!current) {
-            return;
-        }
-        const onPlay = () => {
-            setPlaying(true);
-        };
-        const onPause = () => {
-            setPlaying(false);
-        };
-        current.addEventListener('play', onPlay);
-        current.addEventListener('pause', onPause);
-        return () => {
-            current.removeEventListener('play', onPlay);
-            current.removeEventListener('pause', onPause);
-        };
-    }, [playerRef]);
-    const onToggle = useCallback(() => {
-        var _a;
-        (_a = playerRef.current) === null || _a === void 0 ? void 0 : _a.toggle();
-    }, [playerRef]);
-    const playPauseIconStyle = {
-        width: 15,
-    };
-    return (_jsx("button", { type: "button", style: playerButtonStyle, onClick: onToggle, children: playing ? (_jsx(PlayingIcon, { style: playPauseIconStyle })) : (_jsx(PausedIcon, { style: playPauseIconStyle })) }));
-};

package/dist/components/homepage/Demo/PlayerControls.d.ts

@@ -1,8 +0,0 @@
-import type { PlayerRef } from '@remotion/player';
-import React from 'react';
-export declare const PlayerControls: React.FC<{
-    readonly playerRef: React.RefObject<PlayerRef | null>;
-    readonly durationInFrames: number;
-    readonly fps: number;
-    readonly children: React.ReactNode;
-}>;

package/dist/components/homepage/Demo/PlayerControls.js

@@ -1,15 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { PALETTE } from '../layout/colors';
-import { PlayerSeekBar } from './PlayerSeekBar';
-import { PlayerVolume } from './PlayerVolume';
-import { PlayPauseButton } from './PlayPauseButton';
-import { TimeDisplay } from './TimeDisplay';
-const Separator = () => {
-    return (_jsx("div", { style: {
-            borderRight: `2px solid ${PALETTE.BOX_STROKE}`,
-            height: 50,
-        } }));
-};
-export const PlayerControls = ({ playerRef, durationInFrames, fps, children }) => {
-    return (_jsxs("div", { className: 'flex flex-row items-center bg-pane', children: [_jsx(PlayPauseButton, { playerRef: playerRef }), _jsx(Separator, {}), _jsx(PlayerVolume, { playerRef: playerRef }), _jsx(Separator, {}), _jsx("div", { style: { width: 15 } }), _jsx(TimeDisplay, { playerRef: playerRef, fps: fps }), _jsx("div", { style: { width: 15 } }), _jsx(PlayerSeekBar, { durationInFrames: durationInFrames, playerRef: playerRef, inFrame: null, outFrame: null, onSeekEnd: () => undefined, onSeekStart: () => undefined }), _jsx("div", { style: { width: 20 } }), _jsx(Separator, {}), children] }));
-};

package/dist/components/homepage/Demo/PlayerSeekBar.d.ts

@@ -1,11 +0,0 @@
-import type { PlayerRef } from '@remotion/player';
-import React from 'react';
-export declare const useHoverState: (ref: React.RefObject<HTMLDivElement | null>, hideControlsWhenPointerDoesntMove: boolean | number) => boolean;
-export declare const PlayerSeekBar: React.FC<{
-    readonly durationInFrames: number;
-    readonly onSeekStart: () => void;
-    readonly onSeekEnd: () => void;
-    readonly inFrame: number | null;
-    readonly outFrame: number | null;
-    readonly playerRef: React.RefObject<PlayerRef | null>;
-}>;

package/dist/components/homepage/Demo/PlayerSeekBar.js

@@ -1,216 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { interpolate } from 'remotion';
-import { useElementSize } from '../layout/use-el-size';
-const getFrameFromX = (clientX, durationInFrames, width) => {
-    const pos = clientX;
-    const frame = Math.round(interpolate(pos, [0, width], [0, durationInFrames - 1], {
-        extrapolateLeft: 'clamp',
-        extrapolateRight: 'clamp',
-    }));
-    return frame;
-};
-const BAR_HEIGHT = 5;
-const KNOB_SIZE = 12;
-const VERTICAL_PADDING = 4;
-const containerStyle = {
-    userSelect: 'none',
-    WebkitUserSelect: 'none',
-    paddingTop: VERTICAL_PADDING,
-    paddingBottom: VERTICAL_PADDING,
-    boxSizing: 'border-box',
-    cursor: 'pointer',
-    position: 'relative',
-    touchAction: 'none',
-    flex: 1,
-};
-const barBackground = {
-    height: BAR_HEIGHT,
-    backgroundColor: 'rgba(0, 0, 0, 0.25)',
-    width: '100%',
-    borderRadius: BAR_HEIGHT / 2,
-};
-const findBodyInWhichDivIsLocated = (div) => {
-    let current = div;
-    while (current.parentElement) {
-        current = current.parentElement;
-    }
-    return current;
-};
-export const useHoverState = (ref, hideControlsWhenPointerDoesntMove) => {
-    const [hovered, setHovered] = useState(false);
-    useEffect(() => {
-        const { current } = ref;
-        if (!current) {
-            return;
-        }
-        let hoverTimeout;
-        const addHoverTimeout = () => {
-            if (hideControlsWhenPointerDoesntMove) {
-                clearTimeout(hoverTimeout);
-                hoverTimeout = setTimeout(() => {
-                    setHovered(false);
-                }, hideControlsWhenPointerDoesntMove === true
-                    ? 3000
-                    : hideControlsWhenPointerDoesntMove);
-            }
-        };
-        const onHover = () => {
-            setHovered(true);
-            addHoverTimeout();
-        };
-        const onLeave = () => {
-            setHovered(false);
-            clearTimeout(hoverTimeout);
-        };
-        const onMove = () => {
-            setHovered(true);
-            addHoverTimeout();
-        };
-        current.addEventListener('mouseenter', onHover);
-        current.addEventListener('mouseleave', onLeave);
-        current.addEventListener('mousemove', onMove);
-        return () => {
-            current.removeEventListener('mouseenter', onHover);
-            current.removeEventListener('mouseleave', onLeave);
-            current.removeEventListener('mousemove', onMove);
-            clearTimeout(hoverTimeout);
-        };
-    }, [hideControlsWhenPointerDoesntMove, ref]);
-    return hovered;
-};
-export const PlayerSeekBar = ({ durationInFrames, onSeekEnd, onSeekStart, inFrame, outFrame, playerRef, }) => {
-    var _a;
-    const containerRef = useRef(null);
-    const barHovered = useHoverState(containerRef, false);
-    const size = useElementSize(containerRef.current);
-    const [playing, setPlaying] = useState(false);
-    const [frame, setFrame] = useState(0);
-    useEffect(() => {
-        const { current } = playerRef;
-        if (!current) {
-            return;
-        }
-        const onFrameUpdate = () => {
-            setFrame(playerRef.current.getCurrentFrame());
-        };
-        current.addEventListener('frameupdate', onFrameUpdate);
-        return () => {
-            current.removeEventListener('frameupdate', onFrameUpdate);
-        };
-    }, [playerRef]);
-    useEffect(() => {
-        const { current } = playerRef;
-        if (!current) {
-            return;
-        }
-        const onPlay = () => {
-            setPlaying(true);
-        };
-        const onPause = () => {
-            setPlaying(false);
-        };
-        current.addEventListener('play', onPlay);
-        current.addEventListener('pause', onPause);
-        return () => {
-            current.removeEventListener('play', onPlay);
-            current.removeEventListener('pause', onPause);
-        };
-    }, [playerRef]);
-    const [dragging, setDragging] = useState({
-        dragging: false,
-    });
-    const width = (_a = size === null || size === void 0 ? void 0 : size.width) !== null && _a !== void 0 ? _a : 0;
-    const onPointerDown = useCallback((e) => {
-        var _a;
-        if (e.button !== 0) {
-            return;
-        }
-        const posLeft = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().left;
-        const _frame = getFrameFromX(e.clientX - posLeft, durationInFrames, width);
-        playerRef.current.pause();
-        playerRef.current.seekTo(_frame);
-        setDragging({
-            dragging: true,
-            wasPlaying: playing,
-        });
-        onSeekStart();
-    }, [durationInFrames, width, playerRef, playing, onSeekStart]);
-    const onPointerMove = useCallback((e) => {
-        var _a;
-        if (!size) {
-            throw new Error('Player has no size');
-        }
-        if (!dragging.dragging) {
-            return;
-        }
-        const posLeft = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().left;
-        const _frame = getFrameFromX(e.clientX - posLeft, durationInFrames, size.width);
-        playerRef.current.seekTo(_frame);
-    }, [dragging.dragging, durationInFrames, playerRef, size]);
-    const onPointerUp = useCallback(() => {
-        setDragging({
-            dragging: false,
-        });
-        if (!dragging.dragging) {
-            return;
-        }
-        if (dragging.wasPlaying) {
-            playerRef.current.play();
-        }
-        else {
-            playerRef.current.pause();
-        }
-        onSeekEnd();
-    }, [dragging, onSeekEnd, playerRef]);
-    useEffect(() => {
-        if (!dragging.dragging) {
-            return;
-        }
-        const body = findBodyInWhichDivIsLocated(containerRef.current);
-        body.addEventListener('pointermove', onPointerMove);
-        body.addEventListener('pointerup', onPointerUp);
-        return () => {
-            body.removeEventListener('pointermove', onPointerMove);
-            body.removeEventListener('pointerup', onPointerUp);
-        };
-    }, [dragging.dragging, onPointerMove, onPointerUp]);
-    const knobStyle = useMemo(() => {
-        return {
-            height: KNOB_SIZE,
-            width: KNOB_SIZE,
-            borderRadius: KNOB_SIZE / 2,
-            position: 'absolute',
-            top: VERTICAL_PADDING - KNOB_SIZE / 2 + 5 / 2,
-            backgroundColor: 'var(--ifm-font-color-base)',
-            left: Math.max(0, (frame / Math.max(1, durationInFrames - 1)) * width - KNOB_SIZE / 2),
-            outline: '2px solid var(--ifm-background-color)',
-            opacity: Number(barHovered),
-            transition: 'opacity 0.s ease',
-        };
-    }, [barHovered, durationInFrames, frame, width]);
-    const fillStyle = useMemo(() => {
-        return {
-            height: BAR_HEIGHT,
-            backgroundColor: 'var(--ifm-font-color-base)',
-            width: ((frame - (inFrame !== null && inFrame !== void 0 ? inFrame : 0)) / (durationInFrames - 1)) * 100 + '%',
-            marginLeft: ((inFrame !== null && inFrame !== void 0 ? inFrame : 0) / (durationInFrames - 1)) * 100 + '%',
-            borderRadius: BAR_HEIGHT / 2,
-        };
-    }, [durationInFrames, frame, inFrame]);
-    const active = useMemo(() => {
-        return {
-            height: BAR_HEIGHT,
-            backgroundColor: 'var(--ifm-font-color-base)',
-            opacity: 0.2,
-            width: (((outFrame !== null && outFrame !== void 0 ? outFrame : durationInFrames - 1) - (inFrame !== null && inFrame !== void 0 ? inFrame : 0)) /
-                (durationInFrames - 1)) *
-                100 +
-                '%',
-            marginLeft: ((inFrame !== null && inFrame !== void 0 ? inFrame : 0) / (durationInFrames - 1)) * 100 + '%',
-            borderRadius: BAR_HEIGHT / 2,
-            position: 'absolute',
-        };
-    }, [durationInFrames, inFrame, outFrame]);
-    return (_jsxs("div", { ref: containerRef, onPointerDown: onPointerDown, style: containerStyle, children: [_jsxs("div", { style: barBackground, children: [_jsx("div", { style: active }), _jsx("div", { style: fillStyle })] }), _jsx("div", { style: knobStyle })] }));
-};

package/dist/components/homepage/Demo/PlayerVolume.d.ts

@@ -1,5 +0,0 @@
-import type { PlayerRef } from '@remotion/player';
-import React from 'react';
-export declare const PlayerVolume: React.FC<{
-    readonly playerRef: React.RefObject<PlayerRef | null>;
-}>;

package/dist/components/homepage/Demo/PlayerVolume.js

@@ -1,53 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { PALETTE } from '../layout/colors';
-import { IsMutedIcon, NotMutedIcon } from './icons';
-export const PlayerVolume = ({ playerRef }) => {
-    const [muted, setIsMuted] = useState(() => { var _a, _b; return (_b = (_a = playerRef.current) === null || _a === void 0 ? void 0 : _a.isMuted()) !== null && _b !== void 0 ? _b : true; });
-    const [isHovered, setIsHovered] = useState(false);
-    const timerRef = useRef(null);
-    useEffect(() => {
-        const { current } = playerRef;
-        if (!current) {
-            return;
-        }
-        const onMutedChange = (e) => {
-            setIsMuted(e.detail.isMuted);
-        };
-        current.addEventListener('mutechange', onMutedChange);
-        return () => {
-            current.removeEventListener('mutechange', onMutedChange);
-        };
-    }, [playerRef]);
-    useEffect(() => {
-        if (isHovered) {
-            document.body.style.userSelect = 'none';
-        }
-        else {
-            document.body.style.userSelect = 'auto';
-        }
-    }, [isHovered]);
-    const onClick = useCallback(() => {
-        if (timerRef.current !== null) {
-            clearTimeout(timerRef.current);
-            timerRef.current = null;
-        }
-        if (playerRef.current.isMuted()) {
-            playerRef.current.unmute();
-        }
-        else {
-            playerRef.current.mute();
-        }
-    }, [playerRef]);
-    return (_jsx("div", { className: 'relative cursor-pointer block pl-4 pr-4 h-full', onMouseEnter: () => setIsHovered(true), children: _jsx("button", { type: "button", onClick: onClick, style: {
-                background: 'transparent',
-                border: 0,
-                cursor: 'pointer',
-                padding: 0,
-                display: 'flex',
-                height: 50,
-                justifyContent: 'center',
-                alignItems: 'center',
-                color: PALETTE.TEXT_COLOR,
-            }, children: muted ? (_jsx(IsMutedIcon, { style: { height: 20 } })) : (_jsx(NotMutedIcon, { style: { height: 20 } })) }) }));
-};

package/dist/components/homepage/Demo/Progress.d.ts

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

package/dist/components/homepage/Demo/Progress.js

@@ -1,14 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { makeCircle, makePie } from '@remotion/shapes';
-import { PALETTE } from '../layout/colors';
-export const Progress = ({ progress }) => {
-    const inner = makeCircle({
-        radius: 10,
-    });
-    const outer = makePie({
-        progress,
-        closePath: false,
-        radius: 10,
-    });
-    return (_jsxs("svg", { viewBox: `0 0 ${inner.width} ${inner.height}`, style: { overflow: 'visible', height: 22 }, children: [_jsx("path", { d: inner.path, stroke: PALETTE.BORDER_COLOR, strokeWidth: 4, fill: "transparent" }), _jsx("path", { d: outer.path, stroke: PALETTE.BRAND, strokeWidth: 4, fill: "transparent", strokeLinecap: "round" })] }));
-};

package/dist/components/homepage/Demo/Spinner.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-export declare const Spinner: React.FC<{
-    readonly size: number;
-    readonly duration: number;
-}>;

package/dist/components/homepage/Demo/Spinner.js

@@ -1,37 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from 'react';
-import { PALETTE } from '../layout/colors';
-const viewBox = 100;
-const lines = 8;
-const className = '__remotion_spinner_line';
-const remotionSpinnerAnimation = '__remotion_spinner_animation';
-// Generated from https://github.com/remotion-dev/template-next/commit/9282c93f7c51ada31a42e18a94680fa09a14eee3
-const translated = 'M 44 0 L 50 0 a 6 6 0 0 1 6 6 L 56 26 a 6 6 0 0 1 -6 6 L 50 32 a 6 6 0 0 1 -6 -6 L 44 6 a 6 6 0 0 1 6 -6 Z';
-export const Spinner = ({ size, duration }) => {
-    const style = useMemo(() => {
-        return {
-            width: size,
-            height: size,
-        };
-    }, [size]);
-    return (_jsxs(_Fragment, { children: [_jsx("style", { type: "text/css", children: `
-				@keyframes ${remotionSpinnerAnimation} {
-          0% {
-            opacity: 1;
-          }
-          100% {
-            opacity: 0.15;
-          }
-        }
-        
-        .${className} {
-            animation: ${remotionSpinnerAnimation} ${duration}s linear infinite;
-        }        
-			` }), _jsx("svg", { style: style, viewBox: `0 0 ${viewBox} ${viewBox}`, children: new Array(lines).fill(true).map((_, index) => {
-                    return (_jsx("path", { className: className, style: {
-                            rotate: `${(index * Math.PI * 2) / lines}rad`,
-                            transformOrigin: 'center center',
-                            animationDelay: `${index * (duration / lines) - duration}s`,
-                        }, d: translated, fill: PALETTE.TEXT_COLOR }, index));
-                }) })] }));
-};

package/dist/components/homepage/Demo/Switcher.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-export declare const Switcher: React.FC<{
-    readonly type: 'left' | 'right';
-    readonly theme: 'dark' | 'light';
-    readonly onTap: () => void;
-}>;

package/dist/components/homepage/Demo/Switcher.js

@@ -1,25 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback } from 'react';
-export const Switcher = ({ type, theme, onTap }) => {
-    const onPointerDown = useCallback((e) => {
-        e.stopPropagation();
-        onTap();
-    }, [onTap]);
-    const switcherSize = 40;
-    return (_jsx("div", { onPointerDown: onPointerDown, style: {
-            height: switcherSize,
-            width: switcherSize,
-            borderRadius: switcherSize / 2,
-            position: 'absolute',
-            marginLeft: -switcherSize / 2,
-            top: '50%',
-            left: type === 'left' ? 0 : '100%',
-            marginTop: -switcherSize / 2,
-            backgroundColor: theme === 'dark' ? '#222' : '#fafafa',
-            color: theme === 'dark' ? 'white' : '#222',
-            cursor: 'pointer',
-            justifyContent: 'center',
-            alignItems: 'center',
-            display: 'flex',
-        }, children: _jsxs("svg", { style: { height: switcherSize / 2 }, viewBox: "0 0 320 512", children: [type === 'left' ? (_jsx("path", { fill: "currentcolor", d: "M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z" })) : null, type === 'right' ? (_jsx("path", { fill: "currentcolor", d: "M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z" })) : null] }) }));
-};

package/dist/components/homepage/Demo/Temperature.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-export declare const Temperature: React.FC<{
-    readonly theme: 'dark' | 'light';
-    readonly city: string | null;
-    readonly temperatureInCelsius: number | null;
-}>;