@remotion/promo-pages 4.0.431 → 4.0.433

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/promo-pages",
-	"version": "4.0.431",
+	"version": "4.0.433",
 	"publishConfig": {
 		"access": "public"
 	},
@@ -11,26 +11,30 @@
 	},
 	"type": "module",
 	"dependencies": {
-		"@remotion/animated-emoji": "4.0.431",
-		"@remotion/design": "4.0.431",
-		"@remotion/web-renderer": "4.0.431",
-		"@remotion/lottie": "4.0.431",
-		"@remotion/paths": "4.0.431",
-		"@remotion/player": "4.0.431",
-		"@remotion/shapes": "4.0.431",
-		"@remotion/media": "4.0.431",
-		"@remotion/svg-3d-engine": "4.0.431",
-		"create-video": "4.0.431",
+		"@remotion/animated-emoji": "4.0.433",
+		"@remotion/design": "4.0.433",
+		"@remotion/web-renderer": "4.0.433",
+		"@remotion/lottie": "4.0.433",
+		"@remotion/paths": "4.0.433",
+		"@remotion/player": "4.0.433",
+		"@remotion/shapes": "4.0.433",
+		"@remotion/media": "4.0.433",
+		"@remotion/svg-3d-engine": "4.0.433",
+		"create-video": "4.0.433",
 		"hls.js": "1.5.19",
 		"polished": "4.3.1",
-		"remotion": "4.0.431",
+		"remotion": "4.0.433",
 		"zod": "4.3.6",
 		"@mux/upchunk": "^3.5.0",
 		"@vidstack/react": "1.12.13",
-		"bun-plugin-tailwind": "0.1.2"
+		"bun-plugin-tailwind": "0.1.2",
+		"@mediabunny/ac3": "1.37.0",
+		"@mediabunny/aac-encoder": "1.37.0",
+		"@mediabunny/flac-encoder": "1.37.0",
+		"@mediabunny/mp3-encoder": "1.37.0"
 	},
 	"devDependencies": {
-		"@remotion/eslint-config-internal": "4.0.431",
+		"@remotion/eslint-config-internal": "4.0.433",
 		"@eslint/eslintrc": "3.1.0",
 		"@types/react": "19.2.7",
 		"@types/react-dom": "19.2.3",

package/dist/cn.d.ts

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

package/dist/cn.js

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

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

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

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

@@ -1,43 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, useRef, useState } from 'react';
-import { cn } from '../../cn';
-import { Outer } from './Outer';
-import { useHoverTransforms } from './hover-transforms';
-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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/components/BackButton.js

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

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

package/dist/components/CommandCopyButton.js

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

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

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

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

package/dist/components/ManageTeamMembers.js

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

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

package/dist/components/Spinner.js

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

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

package/dist/components/TeamPicture.js

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

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

package/dist/components/design.js

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

@@ -1,11 +0,0 @@
-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 {};