@remotion/promo-pages 4.0.430 → 4.0.432

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

@@ -1,174 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useRef } from 'react';
-import { AbsoluteFill, spring } from 'remotion';
-import { cardHeight, cardWidth, getIndexFromPosition, getInitialPositions, getPositionForIndex, } from './math';
-import { Switcher } from './Switcher';
-const arePositionsEqual = (a, b) => {
-    return a.every((pos, i) => {
-        return pos.x === b[i].x && pos.y === b[i].y;
-    });
-};
-export const Card = ({ positions, shouldBePositions, index, refsToUse, onUpdate, content, indices, theme, withSwitcher, onClickLeft, onClickRight, }) => {
-    const refToUse = refsToUse[index];
-    const stopPrevious = useRef([]);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    let newIndices = [...indices];
-    const applyPositions = useCallback((except) => {
-        let stopped = false;
-        stopPrevious.current.forEach((s) => {
-            s();
-        });
-        stopPrevious.current.push(() => {
-            stopped = true;
-        });
-        positions.current.forEach((_, i) => {
-            const shouldBe = shouldBePositions.current[i];
-            const ref = refsToUse[i].current;
-            if (!ref) {
-                return;
-            }
-            if (except === null) {
-                ref.style.pointerEvents = 'none';
-            }
-            if (i === except) {
-                ref.style.left = getPositionForIndex(i).x + 'px';
-                ref.style.top = getPositionForIndex(i).y + 'px';
-                return;
-            }
-            let animationI = 1;
-            const duration = 20;
-            const releasePositionX = positions.current[i].x;
-            const releasePositionY = positions.current[i].y;
-            const finishAnimation = () => {
-                refsToUse.forEach((r) => {
-                    r.current.style.zIndex = '1';
-                    r.current.style.scale = '1';
-                    r.current.style.opacity = '1';
-                });
-                if (i === 0) {
-                    setTimeout(() => {
-                        onUpdate([...newIndices]);
-                    }, 200);
-                }
-            };
-            if (releasePositionX === shouldBe.x &&
-                releasePositionY === shouldBe.y &&
-                animationI === duration &&
-                except === null) {
-                finishAnimation();
-                return;
-            }
-            const update = () => {
-                if (stopped) {
-                    return;
-                }
-                const progress = spring({
-                    fps: 60,
-                    frame: animationI,
-                    config: {
-                        damping: 200,
-                    },
-                    durationInFrames: duration,
-                    durationRestThreshold: 0.001,
-                });
-                const newX = progress * (shouldBe.x - releasePositionX) + releasePositionX;
-                const newY = progress * (shouldBe.y - releasePositionY) + releasePositionY;
-                ref.style.left = `${newX}px`;
-                ref.style.top = `${newY}px`;
-                positions.current[i] = {
-                    x: newX,
-                    y: newY,
-                };
-                animationI++;
-                if (animationI === duration && except === null) {
-                    finishAnimation();
-                    return;
-                }
-                requestAnimationFrame(update);
-            };
-            update();
-        });
-    }, [newIndices, onUpdate, positions, refsToUse, shouldBePositions]);
-    const onPointerDown = useCallback((e) => {
-        e.currentTarget.setPointerCapture(e.pointerId);
-        const cardLeft = refToUse.current.offsetLeft;
-        const cardTop = refToUse.current.offsetTop;
-        const startX = e.clientX;
-        const startY = e.clientY;
-        if (e.button === 2) {
-            return;
-        }
-        let translateX = 0;
-        let translateY = 0;
-        refToUse.current.style.scale = '1.05';
-        refToUse.current.style.cursor = 'grabbing';
-        const onMove = (evt) => {
-            refsToUse.forEach((r) => {
-                if (r !== refToUse) {
-                    r.current.style.opacity = '0';
-                }
-            });
-            const scale = refToUse.current.getBoundingClientRect().width / cardWidth;
-            translateX = (evt.clientX - startX) * (1 / scale);
-            translateY = (evt.clientY - startY) * (1 / scale);
-            const position = getIndexFromPosition(cardLeft + translateX, cardTop + translateY);
-            if (position === undefined) {
-                throw new Error('pos');
-            }
-            if (position === index) {
-                if (!arePositionsEqual(getInitialPositions(), shouldBePositions.current)) {
-                    shouldBePositions.current = getInitialPositions();
-                    applyPositions(index);
-                }
-            }
-            else {
-                const newPos = getInitialPositions();
-                newPos[position] = getPositionForIndex(index);
-                newPos[index] = getPositionForIndex(position);
-                // eslint-disable-next-line react-hooks/exhaustive-deps
-                newIndices = [...indices];
-                const prevIndexPosition = newIndices[position];
-                newIndices[position] = newIndices[index];
-                newIndices[index] = prevIndexPosition;
-                if (!arePositionsEqual(newPos, shouldBePositions.current)) {
-                    shouldBePositions.current = newPos;
-                    applyPositions(index);
-                }
-            }
-            refToUse.current.style.transform = `translateX(${translateX}px) translateY(${translateY}px)`;
-            refToUse.current.style.zIndex = '2';
-        };
-        refToUse.current.addEventListener('pointerup', () => {
-            positions.current[index] = {
-                x: cardLeft + translateX,
-                y: cardTop + translateY,
-            };
-            refToUse.current.style.left = `${cardLeft + translateX}px`;
-            refToUse.current.style.top = `${cardTop + translateY}px`;
-            refToUse.current.style.transform = `translateX(0px) translateY(0px)`;
-            refToUse.current.style.cursor = 'grab';
-            refToUse.current.removeEventListener('pointermove', onMove);
-            applyPositions(null);
-        }, { once: true });
-        refToUse.current.addEventListener('pointermove', onMove);
-    }, [applyPositions, index, positions, refToUse, shouldBePositions]);
-    const onPointerUp = useCallback((e) => {
-        e.currentTarget.releasePointerCapture(e.pointerId);
-    }, []);
-    const { x, y } = getPositionForIndex(index);
-    const color = theme === 'light' ? ' #EAEAEA' : '#333';
-    return (_jsx("div", { ref: refToUse, className: 'transition-opacity duration-200', onPointerDown: onPointerDown, onPointerUp: onPointerUp, style: {
-            width: cardWidth,
-            height: cardHeight,
-            position: 'absolute',
-            left: x,
-            top: y,
-            userSelect: 'none',
-            border: `1px solid ${color}`,
-            borderRadius: 13,
-            cursor: 'grab',
-        }, children: _jsxs(AbsoluteFill, { style: {
-                backgroundColor: color,
-                borderRadius: 12,
-            }, className: 'transition-opacity duration-200', children: [content, withSwitcher ? (_jsxs(_Fragment, { children: [_jsx(Switcher, { onTap: onClickLeft, type: "left", theme: theme }), _jsx(Switcher, { onTap: onClickRight, type: "right", theme: theme })] })) : null] }) }));
-};

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

@@ -1,15 +0,0 @@
-import type { EmojiName } from '@remotion/animated-emoji';
-import React from 'react';
-import type { RemoteData } from './Comp';
-import type { Location } from './types';
-export declare const Cards: React.FC<{
-    readonly onUpdate: (newIndices: number[]) => void;
-    readonly indices: number[];
-    readonly theme: 'dark' | 'light';
-    readonly location: Location | null;
-    readonly trending: RemoteData | null;
-    readonly onToggle: () => void;
-    readonly onLeft: () => void;
-    readonly onRight: () => void;
-    readonly emojiName: EmojiName;
-}>;

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

@@ -1,57 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createRef, useCallback, useEffect, useRef, useState, } from 'react';
-import { AbsoluteFill, useRemotionEnvironment } from 'remotion';
-import { Card } from './Card';
-import { CurrentCountry } from './CurrentCountry';
-import { EmojiCard } from './EmojiCard';
-import { getInitialPositions } from './math';
-import { Temperature } from './Temperature';
-import { TrendingRepos } from './TrendingRepos';
-export const Cards = ({ onUpdate, indices, theme, onToggle, onLeft: onLeftPress, onRight: onRightPress, emojiName, location, trending, }) => {
-    const container = useRef(null);
-    const [refs] = useState(() => {
-        return new Array(4).fill(true).map(() => {
-            return createRef();
-        });
-    });
-    const positions = useRef(getInitialPositions());
-    const shouldBePositions = useRef(getInitialPositions());
-    const { isRendering } = useRemotionEnvironment();
-    useEffect(() => {
-        const { current } = container;
-        if (!current) {
-            return;
-        }
-        const onClick = (e) => {
-            if (e.target !== current) {
-                return;
-            }
-            onToggle();
-        };
-        current.addEventListener('click', onClick);
-        return () => {
-            current.removeEventListener('click', onClick);
-        };
-    }, [onToggle]);
-    const ref = useRef(null);
-    const onLeft = useCallback(() => {
-        var _a;
-        (_a = ref.current) === null || _a === void 0 ? void 0 : _a.onRight();
-        onRightPress();
-    }, [onRightPress]);
-    const onRight = useCallback(() => {
-        var _a;
-        (_a = ref.current) === null || _a === void 0 ? void 0 : _a.onLeft();
-        onLeftPress();
-    }, [onLeftPress]);
-    return (_jsx(AbsoluteFill, { ref: container, children: new Array(4).fill(true).map((_, i) => {
-            var _a, _b, _c;
-            const index = indices[i];
-            const content = index === 0 ? (_jsx(TrendingRepos, { trending: trending, theme: theme })) : index === 1 ? (_jsx(Temperature, { city: (location === null || location === void 0 ? void 0 : location.city) ? decodeURIComponent(location === null || location === void 0 ? void 0 : location.city) : null, theme: theme, temperatureInCelsius: (_a = trending === null || trending === void 0 ? void 0 : trending.temperatureInCelsius) !== null && _a !== void 0 ? _a : null })) : index === 2 ? (_jsx(CurrentCountry, { countryPaths: (_b = trending === null || trending === void 0 ? void 0 : trending.countryPaths) !== null && _b !== void 0 ? _b : null, countryLabel: (_c = trending === null || trending === void 0 ? void 0 : trending.countryLabel) !== null && _c !== void 0 ? _c : null, theme: theme })) : (_jsx(EmojiCard, { ref: ref, emojiIndex: emojiName }));
-            return (_jsx(Card
-            // eslint-disable-next-line react/no-array-index-key
-            , { onUpdate: onUpdate, 
-                // @ts-expect-error
-                refsToUse: refs, index: i, content: content, positions: positions, shouldBePositions: shouldBePositions, indices: indices, theme: theme, withSwitcher: index === 3 && !isRendering, onClickLeft: onLeft, onClickRight: onRight }, i));
-        }) }));
-};

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

@@ -1,38 +0,0 @@
-import React from 'react';
-import { type CalculateMetadataFunction } from 'remotion';
-import type { Location } from './types';
-export type RemoteData = {
-    repos: string[];
-    date: string | number;
-    temperatureInCelsius: number;
-    countryLabel: string;
-    countryPaths: {
-        d: string;
-        class: string;
-    }[];
-};
-export type LocationAndTrending = {
-    readonly location: Location | null;
-    readonly trending: RemoteData | null;
-};
-export declare const getDataAndProps: () => Promise<{
-    trending: {
-        repos: any;
-        date: any;
-        temperatureInCelsius: number;
-        countryLabel: any;
-        countryPaths: any;
-    };
-    location: Location;
-}>;
-export declare const calculateMetadata: CalculateMetadataFunction<DemoPlayerProps>;
-export type DemoPlayerProps = {
-    readonly onToggle: () => void;
-    readonly cardOrder: number[];
-    readonly updateCardOrder: (newCardOrder: number[]) => void;
-    readonly theme: 'dark' | 'light';
-    readonly onClickLeft: () => void;
-    readonly onClickRight: () => void;
-    readonly emojiIndex: number;
-} & LocationAndTrending;
-export declare const HomepageVideoComp: React.FC<DemoPlayerProps>;

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

@@ -1,72 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Audio } from '@remotion/media';
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { AbsoluteFill, prefetch, staticFile, } from 'remotion';
-import { Cards } from './Cards';
-export const getDataAndProps = async () => {
-    const location = (await fetch('https://bugs-five.vercel.app/api/location').then((res) => res.json()));
-    const trending = await fetch(`https://bugs.remotion.dev/trending?lat=${location.latitude}&lng=${location.longitude}&country=${location.country}`)
-        .then((res) => res.json())
-        .then((data) => {
-        return {
-            repos: data.trending.repos.slice(0, 3),
-            date: data.trending.dateFetched,
-            temperatureInCelsius: Math.round(data.temperature),
-            countryLabel: data.countryLabel,
-            countryPaths: data.countryPaths,
-        };
-    });
-    return { trending, location };
-};
-export const calculateMetadata = ({ props, }) => {
-    return {
-        durationInFrames: 120,
-        fps: 30,
-        height: 360,
-        width: 640,
-        props: {
-            ...props,
-        },
-    };
-};
-const fireAudio = staticFile('fire.mp3');
-const partyHornAudio = staticFile('partyhorn.mp3');
-const sadAudio = staticFile('sad.mp3');
-export const HomepageVideoComp = ({ theme, onToggle, cardOrder, updateCardOrder, location, trending, emojiIndex, onClickLeft, onClickRight, }) => {
-    const [rerenders, setRerenders] = useState(0);
-    const onUpdate = useCallback((newIndices) => {
-        setRerenders(rerenders + 1);
-        updateCardOrder(newIndices);
-    }, [rerenders, updateCardOrder]);
-    const emoji = useMemo(() => {
-        if ((emojiIndex + 10000 * 3) % 3 === 1) {
-            return 'melting';
-        }
-        if ((emojiIndex + 10000 * 3) % 3 === 2) {
-            return 'fire';
-        }
-        return 'partying-face';
-    }, [emojiIndex]);
-    const audioSrc = useMemo(() => {
-        if (emoji === 'fire') {
-            return fireAudio;
-        }
-        if (emoji === 'partying-face') {
-            return partyHornAudio;
-        }
-        return sadAudio;
-    }, [emoji]);
-    useEffect(() => {
-        const a = prefetch(fireAudio);
-        const b = prefetch(partyHornAudio);
-        const c = prefetch(sadAudio);
-        return () => {
-            a.free();
-            b.free();
-            c.free();
-        };
-    }, []);
-    return (_jsxs(AbsoluteFill, { style: {
-            backgroundColor: theme === 'dark' ? '#222' : '#fafafa',
-        }, children: [_jsx(Cards, { onUpdate: onUpdate, indices: cardOrder, theme: theme, location: location, trending: trending, onToggle: onToggle, onLeft: onClickLeft, onRight: onClickRight, emojiName: emoji }, rerenders), audioSrc ? _jsx(Audio, { src: audioSrc }) : null] }));
-};

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

@@ -1,9 +0,0 @@
-import React from 'react';
-export declare const CurrentCountry: React.FC<{
-    readonly theme: 'dark' | 'light';
-    readonly countryPaths: {
-        d: string;
-        class: string;
-    }[] | null;
-    readonly countryLabel: string | null;
-}>;

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

@@ -1,48 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { getBoundingBox, resetPath } from '@remotion/paths';
-import { AbsoluteFill, interpolate, spring, useCurrentFrame, useVideoConfig, } from 'remotion';
-export const CurrentCountry = ({ theme, countryPaths, countryLabel }) => {
-    const { fps } = useVideoConfig();
-    const frame = useCurrentFrame();
-    if (!countryPaths) {
-        return null;
-    }
-    const joined = countryPaths.map((p) => p.d).join(' ');
-    const reset = resetPath(joined);
-    const boundingBox = getBoundingBox(reset);
-    const progress = spring({
-        fps,
-        frame,
-        delay: 10,
-    });
-    return (_jsxs(AbsoluteFill, { style: { overflow: 'hidden' }, children: [_jsx(AbsoluteFill, { style: {
-                    transform: `scale(${progress})`,
-                }, children: _jsx("svg", { viewBox: boundingBox.viewBox, style: {
-                        scale: '0.8',
-                    }, children: _jsx("path", { fill: theme === 'light' ? '#bbb' : '#222', d: reset }) }) }), _jsxs(AbsoluteFill, { style: {
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                }, children: [_jsx("div", { style: {
-                            color: '#0b84f3',
-                            fontFamily: 'GTPlanar',
-                            fontWeight: '500',
-                            fontSize: 13,
-                            textAlign: 'center',
-                            marginTop: -10,
-                            width: '100%',
-                            paddingLeft: 20,
-                            paddingRight: 20,
-                            transform: 'translateX(' + interpolate(progress, [0, 1], [-100, 0]) + '%)',
-                        }, children: "Your country" }), _jsx("div", { style: {
-                            lineHeight: 1.1,
-                            fontFamily: 'GTPlanar',
-                            textAlign: 'center',
-                            fontWeight: '500',
-                            fontSize: 30,
-                            color: theme === 'dark' ? 'white' : 'black',
-                            width: '100%',
-                            paddingLeft: 20,
-                            paddingRight: 20,
-                            transform: 'translateX(' + interpolate(progress, [0, 1], [100, 0]) + '%)',
-                        }, children: countryLabel })] })] }));
-};

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

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

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

@@ -1,10 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { FONTS, RED } from '../layout/colors';
-export const DemoError = () => {
-    return (_jsx("div", { style: {
-            color: RED,
-            fontFamily: FONTS.GTPLANAR,
-            position: 'absolute',
-            paddingTop: 15,
-        }, children: "Sorry, we limit the amount of renders possible per day on this page. Come back tomorrow!" }));
-};

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

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

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

@@ -1,16 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { RED } from '../layout/colors';
-export const DemoErrorIcon = () => {
-    return (_jsx("div", { style: {
-            height: 26,
-            width: 26,
-            borderRadius: 13,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            animation: 'jump 0.2s ease-out',
-        }, children: _jsx("svg", { style: {
-                flexShrink: 0,
-                width: 26,
-            }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", children: _jsx("path", { fill: RED, d: "M17.1 292c-12.9-22.3-12.9-49.7 0-72L105.4 67.1c12.9-22.3 36.6-36 62.4-36l176.6 0c25.7 0 49.5 13.7 62.4 36L494.9 220c12.9 22.3 12.9 49.7 0 72L406.6 444.9c-12.9 22.3-36.6 36-62.4 36l-176.6 0c-25.7 0-49.5-13.7-62.4-36L17.1 292zM256 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z" }) }) }));
-};

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

@@ -1,33 +0,0 @@
-import type { PlayerRef } from '@remotion/player';
-import React from 'react';
-import { z } from 'zod';
-declare const data: z.ZodObject<{
-    trending: z.ZodObject<{
-        repos: z.ZodArray<z.ZodString>;
-        date: z.ZodUnion<[z.ZodString, z.ZodNumber]>;
-        temperatureInCelsius: z.ZodNumber;
-        countryLabel: z.ZodString;
-        countryPaths: z.ZodArray<z.ZodObject<{
-            d: z.ZodString;
-            class: z.ZodString;
-        }, z.core.$strip>>;
-    }, z.core.$strip>;
-    location: z.ZodObject<{
-        country: z.ZodString;
-        city: z.ZodString;
-        latitude: z.ZodUnion<[z.ZodNumber, z.ZodString]>;
-        longitude: z.ZodUnion<[z.ZodNumber, z.ZodString]>;
-    }, z.core.$strip>;
-    emojiIndex: z.ZodNumber;
-    theme: z.ZodEnum<{
-        light: "light";
-        dark: "dark";
-    }>;
-    cardOrder: z.ZodArray<z.ZodNumber>;
-}, z.core.$strip>;
-export declare const RenderButton: React.FC<{
-    readonly renderData: z.infer<typeof data> | null;
-    readonly onError: () => void;
-    readonly playerRef: React.RefObject<PlayerRef | null>;
-}>;
-export {};

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

@@ -1,107 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { renderMediaOnWeb } from '@remotion/web-renderer';
-import React, { useCallback } from 'react';
-import { z } from 'zod';
-import { PALETTE } from '../layout/colors';
-import { HomepageVideoComp } from './Comp';
-import { DemoErrorIcon } from './DemoErrorIcon';
-import { DoneCheckmark } from './DoneCheckmark';
-import { Progress } from './Progress';
-import { Spinner } from './Spinner';
-const countryPath = z.object({
-    d: z.string(),
-    class: z.string(),
-});
-const remoteData = z.object({
-    repos: z.array(z.string()),
-    date: z.string().or(z.number()),
-    temperatureInCelsius: z.number(),
-    countryLabel: z.string(),
-    countryPaths: z.array(countryPath),
-});
-const location = z.object({
-    country: z.string(),
-    city: z.string(),
-    latitude: z.number().or(z.string()),
-    longitude: z.number().or(z.string()),
-});
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const data = z.object({
-    trending: remoteData,
-    location,
-    emojiIndex: z.number(),
-    theme: z.enum(['light', 'dark']),
-    cardOrder: z.array(z.number()),
-});
-const style = {
-    appearance: 'none',
-    border: 'none',
-    outline: 'none',
-    backgroundColor: 'transparent',
-    cursor: 'pointer',
-    width: 55,
-    height: 50,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-};
-export const RenderButton = ({ renderData, onError, playerRef }) => {
-    const [state, setState] = React.useState({
-        type: 'idle',
-    });
-    const triggerRender = useCallback(async () => {
-        if (renderData === null) {
-            return;
-        }
-        try {
-            setState({ type: 'invoking' });
-            const durationInFrames = 120;
-            const inputProps = {
-                ...renderData,
-                onToggle: () => { },
-                updateCardOrder: () => { },
-                onClickLeft: () => { },
-                onClickRight: () => { },
-            };
-            playerRef.current.pause();
-            const { getBlob } = await renderMediaOnWeb({
-                composition: {
-                    component: HomepageVideoComp,
-                    durationInFrames,
-                    fps: 30,
-                    width: 640,
-                    height: 360,
-                    id: 'homepage-demo',
-                    defaultProps: inputProps,
-                },
-                muted: typeof AudioEncoder === 'undefined',
-                scale: 1,
-                inputProps,
-                onProgress: ({ renderedFrames }) => {
-                    setState({
-                        type: 'progress',
-                        progress: renderedFrames / durationInFrames,
-                    });
-                },
-            });
-            const blob = await getBlob();
-            const url = URL.createObjectURL(blob);
-            const a = document.createElement('a');
-            a.href = url;
-            a.download = 'remotion.dev.mp4';
-            a.click();
-            URL.revokeObjectURL(url);
-            setState({ type: 'done' });
-        }
-        catch (error) {
-            // eslint-disable-next-line no-console
-            console.error(error);
-            setState({ type: 'error' });
-            onError();
-        }
-    }, [onError, renderData, playerRef]);
-    return (_jsx("button", { type: "button", onClick: triggerRender, style: style, disabled: !renderData || state.type !== 'idle', children: state.type === 'error' ? (_jsx(DemoErrorIcon, {})) : state.type === 'done' ? (_jsx(DoneCheckmark, {})) : state.type === 'progress' ? (_jsx(Progress, { progress: state.progress })) : state.type === 'invoking' ? (_jsx(Spinner, { size: 20, duration: 1 })) : (_jsx("svg", { style: {
-                width: 18,
-                opacity: renderData ? 1 : 0.5,
-            }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 384 512", children: _jsx("path", { fill: PALETTE.TEXT_COLOR, d: "M214.6 342.6L192 365.3l-22.6-22.6-128-128L18.7 192 64 146.7l22.6 22.6L160 242.7 160 64l0-32 64 0 0 32 0 178.7 73.4-73.4L320 146.7 365.3 192l-22.6 22.6-128 128zM32 416l320 0 32 0 0 64-32 0L32 480 0 480l0-64 32 0z" }) })) }));
-};

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

@@ -1,9 +0,0 @@
-import React from 'react';
-export declare const NUM_WIDTH = 36;
-export declare const Wheel: React.FC<{
-    readonly delay: number;
-    readonly digits: number[];
-    readonly renderDigit: (i: number) => React.ReactNode;
-    readonly isLeadingDigit: boolean;
-    readonly isNegative: boolean[];
-}>;