@remotion/promo-pages 4.0.437 → 4.0.438

package/dist/Homepage.js

@@ -1003,7 +1003,7 @@ var useIsPlayer = () => {
 function truthy(value) {
   return Boolean(value);
 }
-var VERSION = "4.0.437";
+var VERSION = "4.0.438";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -29924,7 +29924,7 @@ class MediaPlayer {
     const timeInSeconds = globalTime - this.sequenceOffset;
     const localTime = this.getTrimmedTime(timeInSeconds);
     if (localTime === null) {
-      throw new Error("hmm, should not render!");
+      return { type: "not-started" };
     }
     const targetTime = (mediaTimestamp - localTime) / (this.playbackRate * this.globalPlaybackRate);
     return this.sharedAudioContext.scheduleAudioNode({
@@ -34818,7 +34818,7 @@ import {
 import { BufferTarget, StreamTarget } from "mediabunny";
 
 // ../core/dist/esm/version.mjs
-var VERSION2 = "4.0.437";
+var VERSION2 = "4.0.438";
 
 // ../web-renderer/dist/esm/index.mjs
 import { AudioSample, VideoSample } from "mediabunny";
@@ -38074,10 +38074,15 @@ var drawText = ({
       fontSize,
       fontWeight,
       fontStyle,
+      fontVariantCaps,
+      fontKerning,
+      fontStretch,
       direction,
       writingMode,
       letterSpacing,
+      wordSpacing,
       textTransform,
+      textRendering,
       webkitTextFillColor,
       webkitTextStrokeWidth,
       webkitTextStrokeColor,
@@ -38100,8 +38105,13 @@ var drawText = ({
     });
     const fontSizePx = parseFloat(fontSize);
     contextToDraw.font = `${fontStyle} ${fontWeight} ${fontSizePx}px ${fontFamily}`;
+    contextToDraw.fontVariantCaps = fontVariantCaps;
+    contextToDraw.fontKerning = fontKerning;
+    contextToDraw.fontStretch = fontStretch;
+    contextToDraw.textRendering = textRendering;
     contextToDraw.fillStyle = onlyBackgroundClipText ? "black" : webkitTextFillColor;
     contextToDraw.letterSpacing = letterSpacing;
+    contextToDraw.wordSpacing = wordSpacing;
     const strokeWidth2 = parseFloat(webkitTextStrokeWidth);
     const hasStroke = strokeWidth2 > 0;
     if (hasStroke) {

package/dist/cn.d.ts

@@ -0,0 +1,2 @@
+import { type ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/cn.js

@@ -0,0 +1,5 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}

package/dist/components/3DEngine/ButtonDemo.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const Button3D: React.FC<React.ButtonHTMLAttributes<HTMLButtonElement>>;

package/dist/components/3DEngine/ButtonDemo.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useRef, useState } from 'react';
+import { cn } from '../../cn';
+import { useHoverTransforms } from './hover-transforms';
+import { Outer } from './Outer';
+export const Button3D = ({ children, className, disabled, ...buttonProps }) => {
+    const [dimensions, setDimensions] = useState(null);
+    const ref = useRef(null);
+    const { isActive, progress } = useHoverTransforms(ref, Boolean(disabled));
+    const onPointerEnter = useCallback((e) => {
+        if (e.pointerType !== 'mouse') {
+            return;
+        }
+        setDimensions((prevDim) => {
+            if (prevDim) {
+                return prevDim;
+            }
+            if (!ref.current) {
+                throw new Error('Ref is not set');
+            }
+            const { childNodes } = ref.current;
+            if (childNodes.length === 0) {
+                throw new Error('No child nodes');
+            }
+            const childNode = childNodes[0];
+            if (!childNode) {
+                throw new Error('No child node');
+            }
+            const rect = childNode.getBoundingClientRect();
+            const { borderRadius } = getComputedStyle(childNode);
+            const cornerRadius = borderRadius.includes('e+0')
+                ? Infinity
+                : parseInt(borderRadius !== null && borderRadius !== void 0 ? borderRadius : '0', 10);
+            return {
+                width: rect.width,
+                height: rect.height,
+                borderRadius: Math.min(cornerRadius, rect.width / 2, rect.height / 2),
+            };
+        });
+    }, []);
+    const content = (_jsx("button", { type: "button", disabled: disabled, className: cn('text-black', 'flex', 'justify-center', 'bg-white', 'items-center', 'font-brand', 'border-solid', 'text-[1em]', 'rounded-md', 'border-black', 'border-2', 'border-b-4', 'cursor-pointer', 'px-4', 'py-3', 'disabled:cursor-default', 'disabled:border-gray-500', 'disabled:text-gray-500', 'transition-colors', className), ...buttonProps, children: children }));
+    return (_jsx("div", { ref: ref, className: "contents", onPointerEnter: onPointerEnter, children: dimensions && (isActive || progress > 0) ? (_jsx(Outer, { parentRef: ref, width: dimensions.width, height: dimensions.height, cornerRadius: dimensions.borderRadius, hoverTransform: progress, children: content })) : (content) }));
+};

package/dist/components/3DEngine/Faces.d.ts

@@ -0,0 +1,5 @@
+import type { FaceType } from '@remotion/svg-3d-engine';
+import React from 'react';
+export declare const Faces: React.FC<{
+    readonly elements: FaceType[];
+}>;

package/dist/components/3DEngine/Faces.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { threeDIntoSvgPath } from '@remotion/svg-3d-engine';
+export const Faces = ({ elements, ...svgProps }) => {
+    return (_jsx(_Fragment, { children: elements.map(({ points, color, crispEdges }, idx) => {
+            return (_jsx("path", { d: threeDIntoSvgPath(points), fill: color, shapeRendering: crispEdges ? 'crispEdges' : undefined, ...svgProps }, idx));
+        }) }));
+};

package/dist/components/3DEngine/Outer.d.ts

@@ -0,0 +1,8 @@
+export declare const Outer: React.FC<{
+    children: React.ReactNode;
+    width: number;
+    height: number;
+    cornerRadius: number;
+    hoverTransform: number;
+    parentRef: React.RefObject<HTMLDivElement | null>;
+}>;

package/dist/components/3DEngine/Outer.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { parsePath, PathInternals, reduceInstructions } from '@remotion/paths';
+import { makeRect } from '@remotion/shapes';
+import { extrudeAndTransformElement, interpolateMatrix4d, makeMatrix3dTransform, reduceMatrices, rotateX, rotateY, scaled, translateX, translateY, translateZ, } from '@remotion/svg-3d-engine';
+import { interpolate } from 'remotion';
+import { Faces } from './Faces';
+import { useClickTransforms, useMousePosition } from './hover-transforms';
+export const Outer = ({ children, width, height, cornerRadius, hoverTransform, parentRef }) => {
+    const clickTransform = useClickTransforms(parentRef);
+    const angle = useMousePosition(parentRef);
+    const appropriateScale = Math.min(1.1, (20 + width) / width);
+    const transformationUnhovered = reduceMatrices([
+        rotateX(-Math.PI / 20),
+    ]);
+    const transformationHovered = reduceMatrices([
+        scaled(appropriateScale),
+        rotateX(-Math.PI / 16),
+        rotateX(Math.sin(angle) / 4),
+        rotateY(-Math.cos(angle) / 4),
+    ]);
+    const transformation = interpolateMatrix4d(hoverTransform, transformationUnhovered, transformationHovered);
+    const depthFromClick = clickTransform * 15;
+    const depthFromHover = interpolate(hoverTransform, [0, 1], [10, 20]);
+    const depth = depthFromHover;
+    const frontFace = reduceMatrices([
+        translateZ(-depth / 2 + depthFromClick),
+        transformation,
+    ]);
+    const centerOriented = reduceMatrices([
+        translateX(-width / 2),
+        translateY(-height / 2),
+        transformation,
+        translateX(width / 2),
+        translateY(height / 2),
+    ]);
+    const { path, instructions } = makeRect({ height, width, cornerRadius });
+    const { viewBox } = PathInternals.getBoundingBoxFromInstructions(reduceInstructions(instructions));
+    const inbetween = extrudeAndTransformElement({
+        sideColor: 'black',
+        crispEdges: false,
+        depth,
+        pressInDepth: depthFromClick,
+        points: parsePath(path),
+        description: 'rect',
+        transformations: centerOriented,
+    });
+    return (_jsxs("div", { className: "relative", style: { width, height }, children: [_jsx("svg", { viewBox: viewBox, style: {
+                    overflow: 'visible',
+                    height,
+                    width,
+                    position: 'absolute',
+                    top: 0,
+                }, pointerEvents: "none", children: _jsx(Faces, { elements: inbetween }) }), _jsx("div", { style: {
+                    transform: makeMatrix3dTransform(frontFace),
+                }, children: children })] }));
+};

package/dist/components/3DEngine/Switch.d.ts

@@ -0,0 +1,4 @@
+export declare const Switch: React.FC<{
+    readonly active: boolean;
+    readonly onToggle: () => void;
+}>;

package/dist/components/3DEngine/Switch.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Switch = ({ active, onToggle }) => {
+    return (_jsx("div", { "data-active": active, className: "h-6 transition-all rounded-full w-12 border-2 border-b-4 bg-gray-200 p-[2px] cursor-pointer data-[active=true]:bg-brand border-black relative", onClick: onToggle, children: _jsx("div", { "data-active": active, className: "h-4 w-4 left-[4px] top-[4px] transition-all rounded-full bg-white border-2  border-black absolute data-[active=true]:left-[calc(100%-24px)]" }) }));
+};

package/dist/components/3DEngine/get-child-node-from.d.ts

@@ -0,0 +1 @@
+export declare const getChildNodeFrom: (htmlElement: HTMLDivElement | null) => HTMLElement | null;

package/dist/components/3DEngine/get-child-node-from.js

@@ -0,0 +1,14 @@
+export const getChildNodeFrom = (htmlElement) => {
+    if (!htmlElement) {
+        return null;
+    }
+    const { childNodes } = htmlElement;
+    if (childNodes.length === 0) {
+        return null;
+    }
+    const childNode = childNodes[0];
+    if (!childNode) {
+        return null;
+    }
+    return childNode;
+};

package/dist/components/3DEngine/hover-transforms.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+type State = {
+    progress: number;
+    isActive: boolean;
+};
+export declare const useHoverTransforms: (ref: React.RefObject<HTMLDivElement | null>, disabled: boolean) => State;
+export declare const useClickTransforms: (ref: React.RefObject<HTMLDivElement | null>) => number;
+export declare const useMousePosition: (ref: React.RefObject<HTMLDivElement | null>) => number;
+export {};

package/dist/components/3DEngine/hover-transforms.js

@@ -0,0 +1,177 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { getChildNodeFrom } from './get-child-node-from';
+export const useHoverTransforms = (ref, disabled) => {
+    const [state, setState] = React.useState({
+        progress: 0,
+        isActive: false,
+    });
+    const eventTarget = useMemo(() => new EventTarget(), []);
+    useEffect(() => {
+        if (disabled) {
+            eventTarget.dispatchEvent(new Event('disabled'));
+        }
+        else {
+            eventTarget.dispatchEvent(new Event('enabled'));
+        }
+    }, [disabled, eventTarget]);
+    React.useEffect(() => {
+        const element = ref.current;
+        if (!element)
+            return;
+        let animationFrame;
+        let start = null;
+        let isHovered = false;
+        let internalDisabled = disabled;
+        const getIsActive = () => {
+            return isHovered && !internalDisabled;
+        };
+        const animate = (timestamp) => {
+            if (start === null)
+                start = timestamp;
+            const progress = Math.min((timestamp - start) / 150, 1);
+            setState(() => ({
+                isActive: getIsActive(),
+                progress: getIsActive() ? progress : 1 - progress,
+            }));
+            if (progress < 1) {
+                animationFrame = requestAnimationFrame(animate);
+            }
+        };
+        const animateIn = () => {
+            start = null;
+            cancelAnimationFrame(animationFrame);
+            animationFrame = requestAnimationFrame(animate);
+        };
+        const handleMouseEnter = () => {
+            const prevIsActive = getIsActive();
+            isHovered = true;
+            if (prevIsActive === getIsActive()) {
+                return;
+            }
+            animateIn();
+        };
+        const handleMouseLeave = () => {
+            const prevIsActive = getIsActive();
+            isHovered = false;
+            if (prevIsActive === getIsActive()) {
+                return;
+            }
+            animateIn();
+        };
+        const handleDisabled = () => {
+            const prevIsActive = getIsActive();
+            internalDisabled = true;
+            if (prevIsActive === getIsActive()) {
+                return;
+            }
+            animateIn();
+        };
+        const handleEnabled = () => {
+            const prevIsActive = getIsActive();
+            internalDisabled = false;
+            if (prevIsActive === getIsActive()) {
+                return;
+            }
+            animateIn();
+        };
+        element.addEventListener('mouseenter', handleMouseEnter);
+        element.addEventListener('mouseleave', handleMouseLeave);
+        eventTarget.addEventListener('disabled', handleDisabled);
+        eventTarget.addEventListener('enabled', handleEnabled);
+        return () => {
+            element.removeEventListener('mouseenter', handleMouseEnter);
+            element.removeEventListener('mouseleave', handleMouseLeave);
+            eventTarget.removeEventListener('disabled', handleDisabled);
+            eventTarget.removeEventListener('enabled', handleEnabled);
+            cancelAnimationFrame(animationFrame);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [ref, eventTarget]);
+    return state;
+};
+export const useClickTransforms = (ref) => {
+    const [hoverProgress, setHoverProgress] = React.useState(0);
+    React.useEffect(() => {
+        const element = getChildNodeFrom(ref.current);
+        if (!element) {
+            return;
+        }
+        let animationFrame;
+        let start = null;
+        let isHovered = false;
+        const animate = (timestamp) => {
+            if (start === null)
+                start = timestamp;
+            const progress = Math.min((timestamp - start) / 150, 1);
+            setHoverProgress(isHovered ? progress : 1 - progress);
+            if (progress < 1) {
+                animationFrame = requestAnimationFrame(animate);
+            }
+        };
+        const handleMouseEnter = () => {
+            isHovered = true;
+            start = null;
+            cancelAnimationFrame(animationFrame);
+            animationFrame = requestAnimationFrame(animate);
+        };
+        const handleMouseLeave = () => {
+            isHovered = false;
+            start = null;
+            cancelAnimationFrame(animationFrame);
+            animationFrame = requestAnimationFrame(animate);
+        };
+        element.addEventListener('pointerdown', handleMouseEnter);
+        element.addEventListener('pointerup', handleMouseLeave);
+        return () => {
+            element.removeEventListener('pointerdown', handleMouseEnter);
+            element.removeEventListener('pointerup', handleMouseLeave);
+            cancelAnimationFrame(animationFrame);
+        };
+    }, [ref]);
+    return hoverProgress;
+};
+const getAngle = (ref, coordinates) => {
+    const element = getChildNodeFrom(ref);
+    if (!element) {
+        return 0;
+    }
+    if (coordinates === null) {
+        return 0;
+    }
+    const clientRect = element.getClientRects();
+    if (!clientRect) {
+        return 0;
+    }
+    if (clientRect.length === 0) {
+        return 0;
+    }
+    const center = {
+        x: clientRect[0].x + clientRect[0].width / 2,
+        y: clientRect[0].y + clientRect[0].height / 2,
+    };
+    const angle = Math.atan2(coordinates.y - center.y, coordinates.x - center.x);
+    return angle;
+};
+let lastCoordinates = null;
+export const useMousePosition = (ref) => {
+    const [angle, setAngle] = useState(getAngle(ref.current, lastCoordinates));
+    useEffect(() => {
+        const element = ref.current;
+        if (!element) {
+            return;
+        }
+        const onMouseMove = (e) => {
+            const clientRect = element.getClientRects();
+            if (!clientRect) {
+                return;
+            }
+            lastCoordinates = { y: e.clientY, x: e.clientX };
+            setAngle(getAngle(element, { y: e.clientY, x: e.clientX }));
+        };
+        window.addEventListener('mousemove', onMouseMove);
+        return () => {
+            window.removeEventListener('mousemove', onMouseMove);
+        };
+    }, [ref]);
+    return angle;
+};

package/dist/components/BackButton.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const BackButton: React.FC<{
+    readonly color: string;
+    readonly text: string;
+    readonly link: string;
+}>;

package/dist/components/BackButton.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '@remotion/design';
+export const BackButton = ({ color, text, link }) => {
+    return (_jsx("div", { className: "justify-center items-center font-medium mb-4 block", style: {
+            fontFamily: 'GTPlanar',
+            fontWeight: 500,
+            color,
+        }, children: _jsx(Button, { href: link, className: "px-4 rounded-full text-sm h-10", children: _jsxs("div", { className: "flex row items-center justify-center px-4", children: [_jsx("svg", { className: "h-4 mr-[15px] inline-block", style: { color }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", children: _jsx("path", { fill: "currentcolor", d: "M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z" }) }), text] }) }) }));
+};

package/dist/components/CommandCopyButton.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const CommandCopyButton: React.FC<{
+    readonly copied: boolean;
+    readonly customSvg: React.ReactNode | null;
+}>;

package/dist/components/CommandCopyButton.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const CommandCopyButton = ({ copied, customSvg }) => {
+    return copied ? (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", className: "h-5", children: _jsx("path", { fill: "currentColor", d: "M438.6 105.4C451.1 117.9 451.1 138.1 438.6 150.6L182.6 406.6C170.1 419.1 149.9 419.1 137.4 406.6L9.372 278.6C-3.124 266.1-3.124 245.9 9.372 233.4C21.87 220.9 42.13 220.9 54.63 233.4L159.1 338.7L393.4 105.4C405.9 92.88 426.1 92.88 438.6 105.4H438.6z" }) })) : customSvg ? (customSvg) : (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 384 512", className: "h-5", children: _jsx("path", { fill: "currentColor", d: "M320 64h-49.61C262.1 27.48 230.7 0 192 0S121 27.48 113.6 64H64C28.65 64 0 92.66 0 128v320c0 35.34 28.65 64 64 64h256c35.35 0 64-28.66 64-64V128C384 92.66 355.3 64 320 64zM192 48c13.23 0 24 10.77 24 24S205.2 96 192 96S168 85.23 168 72S178.8 48 192 48zM336 448c0 8.82-7.178 16-16 16H64c-8.822 0-16-7.18-16-16V128c0-8.82 7.178-16 16-16h18.26C80.93 117.1 80 122.4 80 128v16C80 152.8 87.16 160 96 160h192c8.836 0 16-7.164 16-16V128c0-5.559-.9316-10.86-2.264-16H320c8.822 0 16 7.18 16 16V448z" }) }));
+};

package/dist/components/Homepage.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { ColorMode } from './homepage/layout/use-color-mode';
+export declare const NewLanding: React.FC<{
+    readonly colorMode: ColorMode;
+    readonly setColorMode: (colorMode: ColorMode) => void;
+}>;

package/dist/components/Homepage.js

@@ -0,0 +1,20 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BackgroundAnimation } from './homepage/BackgroundAnimation';
+import CommunityStats from './homepage/CommunityStats';
+import { Demo } from './homepage/Demo';
+import EditorStarterSection from './homepage/EditorStarterSection';
+import EvaluateRemotionSection from './homepage/EvaluateRemotion';
+import { IfYouKnowReact } from './homepage/IfYouKnowReact';
+import { ColorModeProvider } from './homepage/layout/use-color-mode';
+import { NewsletterButton } from './homepage/NewsletterButton';
+import { ParameterizeAndEdit } from './homepage/ParameterizeAndEdit';
+import { Pricing } from './homepage/Pricing';
+import { RealMP4Videos } from './homepage/RealMp4Videos';
+import TrustedByBanner from './homepage/TrustedByBanner';
+import VideoAppsShowcase from './homepage/VideoAppsShowcase';
+import { SectionTitle } from './homepage/VideoAppsTitle';
+import { WriteInReact } from './homepage/WriteInReact';
+export const NewLanding = ({ colorMode, setColorMode }) => {
+    return (_jsx(ColorModeProvider, { colorMode: colorMode, setColorMode: setColorMode, children: _jsx("div", { className: "w-full relative", children: _jsxs("div", { style: { overflow: 'hidden' }, children: [_jsx("div", { children: _jsx(BackgroundAnimation, {}) }), _jsx("br", {}), _jsx("br", {}), _jsx("br", {}), _jsx("br", {}), _jsxs("div", { className: "max-w-[500px] lg:max-w-[1000px] m-auto pl-5 pr-5 overflow-x-clip md:overflow-x-visible relative", children: [_jsx(WriteInReact, {}), _jsx("br", {}), _jsx(IfYouKnowReact, {}), _jsx(ParameterizeAndEdit, {}), _jsx(RealMP4Videos, {}), _jsx("br", {}), _jsx("br", {}), _jsx("br", {}), _jsx(VideoAppsShowcase, {}), _jsx("br", {}), _jsx("br", {}), _jsx(Demo, {}), _jsx("br", {}), _jsx("br", {}), _jsx("br", {}), _jsx(SectionTitle, { children: "Pricing" }), _jsx(Pricing, {}), _jsx(TrustedByBanner, {}), _jsx("br", {}), _jsx(EvaluateRemotionSection, {}), _jsx("br", {}), _jsx("br", {}), _jsx("br", {}), _jsx(CommunityStats, {}), _jsx("br", {}), _jsx("br", {}), _jsx("br", {}), _jsx(EditorStarterSection, {}), _jsx("br", {}), _jsx("br", {}), _jsx("br", {}), _jsx("br", {}), _jsx(NewsletterButton, {}), _jsx("br", {}), _jsx("br", {}), _jsx("br", {})] })] }) }) }));
+};

package/dist/components/ManageTeamMembers.d.ts

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

package/dist/components/ManageTeamMembers.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button, Input } from '@remotion/design';
+import React, { useCallback, useState } from 'react';
+function generateId() {
+    return Math.random().toString(36).substr(2, 9);
+}
+const initialMembers = [
+    { id: generateId(), name: 'alice' },
+    { id: generateId(), name: 'bob' },
+];
+const Row = ({ value, onChange, onDelete, disableDelete }) => {
+    return (_jsxs("div", { className: "flex flex-row gap-2 items-center", children: [_jsx(Input, { placeholder: "Enter username", className: "w-full block flex-1", value: value, onChange: (e) => onChange(e.target.value) }), _jsx(Button, { className: "hover:text-white hover:bg-warn transition-colors w-10 h-10 p-0 rounded-full", onClick: onDelete, type: "button", disabled: disableDelete, "aria-label": "Delete member", depth: 0.5, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 10 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M1 1L9 9M1 9L9 1", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }) })] }));
+};
+export const ManageTeamMembers = () => {
+    const [members, setMembers] = useState(initialMembers);
+    // One extra row for adding new member
+    const displayedMembers = [...members, { id: 'NEW', name: '' }];
+    const updateMember = useCallback((idx, value) => {
+        // If it's last "NEW" row, add as new member if not empty
+        if (idx === members.length) {
+            if (value.trim() !== '') {
+                setMembers((prev) => [...prev, { id: generateId(), name: value }]);
+            }
+        }
+        else {
+            setMembers((prev) => prev.map((m, i) => (i === idx ? { ...m, name: value } : m)));
+        }
+    }, [members.length]);
+    const deleteMember = useCallback((idx) => {
+        setMembers((prev) => prev.filter((_, i) => i !== idx));
+    }, []);
+    const [loading, setLoading] = useState(false);
+    const save = useCallback(() => {
+        setLoading(true);
+        setTimeout(() => {
+            setLoading(false);
+        }, 1000);
+    }, []);
+    return (_jsxs(_Fragment, { children: [_jsx("h2", { children: "Manage team members" }), _jsx("p", { className: "font-brand", children: "Add a new team member to your team." }), displayedMembers.map((member, idx) => (
+            // eslint-disable-next-line react/no-array-index-key
+            _jsxs(React.Fragment, { children: [_jsx(Row, { value: member.name, onChange: (val) => updateMember(idx, val), onDelete: idx < members.length ? () => deleteMember(idx) : undefined, disableDelete: idx >= members.length }), _jsx("div", { className: "h-2" })] }, idx))), _jsx("div", { className: "h-4" }), _jsx("div", { className: "flex flex-row justify-end", children: _jsx(Button, { className: "bg-brand text-white", loading: loading, onClick: save, children: "Save" }) })] }));
+};

package/dist/components/Spinner.d.ts

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

package/dist/components/Spinner.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const Spinner = (props) => {
+    return (_jsxs("svg", { id: "loading", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32", width: "32", height: "32", fill: "currentColor", ...props, children: [_jsx("path", { opacity: ".1", d: "M14 0 H18 V8 H14 z", transform: "rotate(0 16 16)", children: _jsx("animate", { attributeName: "opacity", from: "1", to: ".1", dur: "1s", repeatCount: "indefinite", begin: "0" }) }), _jsx("path", { opacity: ".1", d: "M14 0 H18 V8 H14 z", transform: "rotate(45 16 16)", children: _jsx("animate", { attributeName: "opacity", from: "1", to: ".1", dur: "1s", repeatCount: "indefinite", begin: "0.125s" }) }), _jsx("path", { opacity: ".1", d: "M14 0 H18 V8 H14 z", transform: "rotate(90 16 16)", children: _jsx("animate", { attributeName: "opacity", from: "1", to: ".1", dur: "1s", repeatCount: "indefinite", begin: "0.25s" }) }), _jsx("path", { opacity: ".1", d: "M14 0 H18 V8 H14 z", transform: "rotate(135 16 16)", children: _jsx("animate", { attributeName: "opacity", from: "1", to: ".1", dur: "1s", repeatCount: "indefinite", begin: "0.375s" }) }), _jsx("path", { opacity: ".1", d: "M14 0 H18 V8 H14 z", transform: "rotate(180 16 16)", children: _jsx("animate", { attributeName: "opacity", from: "1", to: ".1", dur: "1s", repeatCount: "indefinite", begin: "0.5s" }) }), _jsx("path", { opacity: ".1", d: "M14 0 H18 V8 H14 z", transform: "rotate(225 16 16)", children: _jsx("animate", { attributeName: "opacity", from: "1", to: ".1", dur: "1s", repeatCount: "indefinite", begin: "0.675s" }) }), _jsx("path", { opacity: ".1", d: "M14 0 H18 V8 H14 z", transform: "rotate(270 16 16)", children: _jsx("animate", { attributeName: "opacity", from: "1", to: ".1", dur: "1s", repeatCount: "indefinite", begin: "0.75s" }) }), _jsx("path", { opacity: ".1", d: "M14 0 H18 V8 H14 z", transform: "rotate(315 16 16)", children: _jsx("animate", { attributeName: "opacity", from: "1", to: ".1", dur: "1s", repeatCount: "indefinite", begin: "0.875s" }) })] }));
+};

package/dist/components/TeamPicture.d.ts

@@ -0,0 +1 @@
+export declare const TeamPicture: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/TeamPicture.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const TeamPicture = () => {
+    return (_jsx("div", { className: "border-effect overflow-hidden mb-10 lg:mb-4", children: _jsx("img", { src: "/img/team/team.jpeg", style: { aspectRatio: '1500 / 1038' }, className: "w-full mb-0 float-left " }) }));
+};

package/dist/components/design.d.ts

@@ -0,0 +1 @@
+export declare const DesignPage: React.FC;

package/dist/components/design.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Card, Counter, InlineCode, Input, Link, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, } from '@remotion/design';
+import { useCallback, useState } from 'react';
+import { ManageTeamMembers } from './ManageTeamMembers';
+const Explainer = ({ children }) => {
+    return (_jsx("div", { children: _jsx("div", { className: "text-gray-500 font-brand text-sm mb-2", children: children }) }));
+};
+export const DesignPage = () => {
+    const [count, setCount] = useState(10);
+    const [active, setActive] = useState(false);
+    const [submitButtonActive, setSubmitButtonActive] = useState(true);
+    const [submitButtonPrimaryActive, setSubmitButtonPrimaryActive] = useState(true);
+    const onClick = useCallback(() => {
+        setSubmitButtonActive(false);
+        setTimeout(() => {
+            setSubmitButtonActive(true);
+        }, 1000);
+    }, []);
+    const onClickPrimary = useCallback(() => {
+        setSubmitButtonPrimaryActive(false);
+        setTimeout(() => {
+            setSubmitButtonPrimaryActive(true);
+        }, 1000);
+    }, []);
+    const [saving, setSaving] = useState(false);
+    const save = useCallback(() => {
+        setSaving(true);
+        setTimeout(() => {
+            setSaving(false);
+        }, 1000);
+    }, []);
+    return (_jsx("div", { className: "bg-[var(--background)] relative", children: _jsxs("div", { className: "max-w-[800px] mx-auto pt-10 pb-10 px-4", children: [_jsx("h1", { children: "@remotion/design" }), _jsx("a", { href: "https://github.com/remotion-dev/remotion/blob/main/packages/promo-pages/src/components/design.tsx", className: "font-brand text-brand", target: "_blank", children: "View source" }), _jsx("br", {}), _jsx("br", {}), _jsx("h2", { className: "text-brand", children: "<Button />" }), _jsx(Explainer, { children: "Button with label" }), _jsx(Button, { children: "Click me" }), _jsx("br", {}), _jsx(Explainer, { children: "Disabled" }), _jsxs(Button, { disabled: true, children: ["Don't", " click me"] }), _jsx("br", {}), _jsx(Explainer, { children: "Primary" }), _jsx(Button, { className: "bg-brand text-white", children: "Primary" }), _jsx("br", {}), _jsx(Explainer, { children: "Click to disable" }), _jsx(Button, { onClick: onClick, loading: !submitButtonActive, children: "Submit" }), _jsx("br", {}), _jsx(Explainer, { children: "Click to disable (primary)" }), _jsx(Button, { onClick: onClickPrimary, className: "bg-brand text-white", loading: !submitButtonPrimaryActive, children: "Submit" }), _jsx("br", {}), _jsx(Explainer, { children: "Loading state" }), _jsx(Button, { onClick: onClick, loading: true, children: "Loading" }), _jsx("br", {}), _jsx(Explainer, { children: "Loading state (primary)" }), _jsx(Button, { onClick: onClick, className: "bg-brand text-white", loading: true, children: "Loading" }), _jsx("br", {}), _jsx(Explainer, { children: "Rounded" }), _jsx(Button, { className: "rounded-full", children: "Rounded" }), _jsx("br", {}), _jsx(Explainer, { children: "Full width" }), _jsx(Button, { className: "w-full", children: "Choose a template" }), _jsx("br", {}), _jsx(Explainer, { children: "Full width rounded" }), _jsx(Button, { className: "w-full rounded-full", children: "Fully rounded" }), _jsx("div", { className: "h-8" }), _jsx(Explainer, { children: "Circular" }), _jsx(Button, { className: "rounded-full bg-brand w-12 h-12" }), _jsx("div", { className: "h-8" }), _jsx(Explainer, { children: "Remove" }), _jsx(Button, { className: "hover:text-white hover:bg-warn transition-colors w-10 h-10 p-0 rounded-full", depth: 0.5, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 10 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M1 1L9 9M1 9L9 1", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }) }), _jsx("div", { className: "h-8" }), _jsx(Explainer, { children: "Link button" }), _jsx(Button, { href: "/design", children: "Link button" }), _jsx("br", {}), _jsxs(Explainer, { children: ["Link button with ", _jsx("code", { children: "<span>" })] }), _jsx(Button, { href: "/design", children: _jsx("span", { children: "Link button with span child" }) }), _jsx("br", {}), _jsx(Explainer, { children: "External link button" }), _jsx(Button, { href: "https://github.com/remotion-dev/remotion", target: "_blank", children: "GitHub" }), _jsx("div", { className: "h-8" }), _jsx(Explainer, { children: "Remove (small)" }), _jsx(Button, { className: "hover:text-white hover:bg-warn transition-colors w-6 h-6 p-0 rounded-full", depth: 0.5, children: _jsx("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M1 1L9 9M1 9L9 1", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }) }), _jsx("div", { className: "h-8" }), _jsx("h2", { className: "text-brand", children: "<Counter />" }), _jsx(Counter, { count: count, setCount: setCount, minCount: 1, step: 1, incrementStep: 1 }), _jsx("br", {}), " ", _jsx("h2", { className: "text-brand", children: "<Switch />" }), _jsx(Switch, { active: active, onToggle: () => setActive((e) => !e) }), _jsx("br", {}), " ", _jsx("h2", { className: "text-brand", children: "<Card />" }), _jsxs(Card, { className: "px-4 py-4", children: [_jsx("h3", { className: "text-text", children: "Card" }), _jsx("div", { className: "text-gray-500", children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." })] }), _jsx("br", {}), _jsx("h2", { className: "text-brand", children: "<Select />" }), _jsxs(Select, { defaultValue: "option1", children: [_jsx(SelectTrigger, { style: { width: '200px' }, children: _jsx(SelectValue, { placeholder: "Select an option" }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "option1", children: "Option 1" }), _jsx(SelectItem, { value: "option2", children: "Option 2" }), _jsx(SelectItem, { value: "option3", children: "Option 3" })] })] }), _jsx("br", {}), _jsx("h2", { className: "text-brand", children: "<Tabs />" }), _jsxs(Tabs, { defaultValue: "tab1", children: [_jsxs(TabsList, { children: [_jsx(TabsTrigger, { value: "tab1", children: "Tab 1" }), _jsx(TabsTrigger, { value: "tab2", children: "Tab 2" }), _jsx(TabsTrigger, { value: "tab3", children: "Tab 3" })] }), _jsx(TabsContent, { value: "tab1", children: _jsx("div", { className: "font-brand", children: "Content for Tab 1" }) }), _jsx(TabsContent, { value: "tab2", children: _jsx("div", { className: "font-brand", children: "Content for Tab 2" }) }), _jsx(TabsContent, { value: "tab3", children: _jsx("div", { className: "font-brand", children: "Content for Tab 3" }) })] }), _jsx("br", {}), _jsx("h2", { className: "text-brand", children: "<Input />" }), _jsx(Input, { placeholder: "Enter your email" }), _jsx("br", {}), _jsx("br", {}), _jsx("h2", { className: "text-brand", children: "<Textarea />" }), _jsx(Textarea, { placeholder: "Enter your message" }), _jsx("br", {}), _jsx("br", {}), _jsx("h2", { className: "text-brand", children: "<InlineCode />" }), _jsxs("p", { className: "font-brand", children: ["Use ", _jsx(InlineCode, { children: "useCurrentFrame()" }), " to get the current frame and ", _jsx(InlineCode, { children: "useVideoConfig()" }), " to get the video configuration."] }), _jsx("br", {}), _jsx("h2", { className: "text-brand", children: "<Link />" }), _jsxs("p", { className: "font-brand", children: ["See the", ' ', _jsx(Link, { href: "https://www.remotion.dev/docs", target: "_blank", rel: "noopener noreferrer", children: "Remotion documentation" }), ' ', "for more information."] }), _jsx("br", {}), _jsx("br", {}), _jsx("h1", { children: "Example form set" }), _jsx("br", {}), _jsx("h2", { children: "Change email" }), _jsx("p", { className: "font-brand", children: "A email will be sent to the new email address. You will need to click on the link in the email to confirm the change." }), _jsx(Input, { placeholder: "Enter your email", className: "w-full block" }), _jsx("div", { className: "h-2" }), _jsx("div", { className: "flex flex-row justify-end", children: _jsx(Button, { className: "bg-brand text-white", loading: saving, onClick: save, children: "Change" }) }), _jsx("br", {}), _jsx("br", {}), _jsx(ManageTeamMembers, {})] }) }));
+};

package/dist/components/experts/ExpertsPage.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+type ExpertsPageProps = {
+    readonly Link: React.ComponentType<{
+        style?: React.CSSProperties;
+        className?: string;
+        href: string;
+        children: React.ReactNode;
+    }>;
+};
+export declare const ExpertsPageContent: React.FC<ExpertsPageProps>;
+export {};