@remotion/promo-pages 4.0.439 → 4.0.441

package/dist/templates.js

@@ -1375,7 +1375,7 @@ var getDefaultConfig = () => {
 var twMerge = /* @__PURE__ */ createTailwindMerge(getDefaultConfig);
 
 // ../design/dist/esm/index.mjs
-import React4, { useEffect as useEffect18, useMemo as useMemo36, useState as useState19 } from "react";
+import React4, { useEffect as useEffect18, useMemo as useMemo36, useState as useState20 } from "react";
 
 // ../paths/dist/esm/index.mjs
 var cutLInstruction = ({
@@ -5862,7 +5862,8 @@ import {
   useContext as useContext29,
   useImperativeHandle as useImperativeHandle6,
   useLayoutEffect as useLayoutEffect9,
-  useRef as useRef17
+  useRef as useRef17,
+  useState as useState15
 } from "react";
 import { jsx as jsx24 } from "react/jsx-runtime";
 import { createRef as createRef3 } from "react";
@@ -5872,7 +5873,7 @@ import {
   useImperativeHandle as useImperativeHandle7,
   useMemo as useMemo26,
   useRef as useRef18,
-  useState as useState15
+  useState as useState16
 } from "react";
 import { jsx as jsx25 } from "react/jsx-runtime";
 import React25 from "react";
@@ -5882,7 +5883,7 @@ import { jsx as jsx26 } from "react/jsx-runtime";
 import { jsx as jsx27 } from "react/jsx-runtime";
 import React27 from "react";
 import React28, { createContext as createContext21 } from "react";
-import { useContext as useContext31, useMemo as useMemo29, useState as useState16 } from "react";
+import { useContext as useContext31, useMemo as useMemo29, useState as useState17 } from "react";
 import { useContext as useContext32 } from "react";
 import { useCallback as useCallback16 } from "react";
 import {
@@ -5891,7 +5892,7 @@ import {
   useEffect as useEffect14,
   useLayoutEffect as useLayoutEffect10,
   useMemo as useMemo30,
-  useState as useState17
+  useState as useState18
 } from "react";
 import { jsx as jsx28 } from "react/jsx-runtime";
 import React30, {
@@ -5901,7 +5902,7 @@ import React30, {
   useImperativeHandle as useImperativeHandle8,
   useMemo as useMemo31,
   useRef as useRef19,
-  useState as useState18
+  useState as useState19
 } from "react";
 import { useEffect as useEffect15 } from "react";
 import { jsx as jsx29 } from "react/jsx-runtime";
@@ -5972,7 +5973,7 @@ var useIsPlayer = () => {
 function truthy2(value) {
   return Boolean(value);
 }
-var VERSION = "4.0.439";
+var VERSION = "4.0.441";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -9063,6 +9064,76 @@ var useBasicMediaInTimeline = ({
     finalDisplayName: displayName ?? getAssetDisplayName(src)
   };
 };
+var useImageInTimeline = ({
+  src,
+  displayName,
+  id,
+  stack,
+  showInTimeline,
+  premountDisplay,
+  postmountDisplay,
+  loopDisplay
+}) => {
+  const parentSequence = useContext19(SequenceContext);
+  const { registerSequence, unregisterSequence } = useContext19(SequenceManager);
+  const { duration, nonce, rootId, isStudio, finalDisplayName } = useBasicMediaInTimeline({
+    volume: undefined,
+    mediaVolume: 0,
+    mediaType: "image",
+    src,
+    displayName,
+    trimAfter: undefined,
+    trimBefore: undefined,
+    playbackRate: 1
+  });
+  useEffect4(() => {
+    if (!src) {
+      throw new Error("No src passed");
+    }
+    if (!isStudio && window.process?.env?.NODE_ENV !== "test") {
+      return;
+    }
+    if (!showInTimeline) {
+      return;
+    }
+    registerSequence({
+      type: "image",
+      src,
+      id,
+      duration,
+      from: 0,
+      parent: parentSequence?.id ?? null,
+      displayName: finalDisplayName,
+      rootId,
+      showInTimeline: true,
+      nonce: nonce.get(),
+      loopDisplay,
+      stack,
+      premountDisplay,
+      postmountDisplay,
+      controls: null
+    });
+    return () => {
+      unregisterSequence(id);
+    };
+  }, [
+    duration,
+    id,
+    parentSequence,
+    src,
+    registerSequence,
+    unregisterSequence,
+    nonce,
+    stack,
+    showInTimeline,
+    premountDisplay,
+    postmountDisplay,
+    isStudio,
+    loopDisplay,
+    rootId,
+    finalDisplayName
+  ]);
+};
 var useMediaInTimeline = ({
   volume,
   mediaVolume,
@@ -10807,12 +10878,16 @@ var ImgRefForwarding = ({
   delayRenderTimeoutInMilliseconds,
   onImageFrame,
   crossOrigin,
+  showInTimeline,
+  name,
+  stack,
   ...props2
 }, ref) => {
   const imageRef = useRef17(null);
   const errors = useRef17({});
   const { delayPlayback } = useBufferState();
   const sequenceContext = useContext29(SequenceContext);
+  const [timelineId] = useState15(() => String(Math.random()));
   if (!src) {
     throw new Error('No "src" prop was passed to <Img>.');
   }
@@ -10823,6 +10898,16 @@ var ImgRefForwarding = ({
   useImperativeHandle6(ref, () => {
     return imageRef.current;
   }, []);
+  useImageInTimeline({
+    src,
+    displayName: name ?? null,
+    id: timelineId,
+    stack: stack ?? null,
+    showInTimeline: showInTimeline ?? true,
+    premountDisplay: sequenceContext?.premountDisplay ?? null,
+    postmountDisplay: sequenceContext?.postmountDisplay ?? null,
+    loopDisplay: undefined
+  });
   const actualSrc = usePreload(src);
   const retryIn = useCallback13((timeout) => {
     if (!imageRef.current) {
@@ -10945,6 +11030,7 @@ var ImgRefForwarding = ({
   });
 };
 var Img = forwardRef8(ImgRefForwarding);
+addSequenceStackTraces(Img);
 var compositionsRef = React24.createRef();
 var CompositionManagerProvider = ({
   children,
@@ -10953,9 +11039,9 @@ var CompositionManagerProvider = ({
   initialCompositions,
   initialCanvasContent
 }) => {
-  const [folders, setFolders] = useState15([]);
-  const [canvasContent, setCanvasContent] = useState15(initialCanvasContent);
-  const [compositions, setCompositions] = useState15(initialCompositions);
+  const [folders, setFolders] = useState16([]);
+  const [canvasContent, setCanvasContent] = useState16(initialCanvasContent);
+  const [compositions, setCompositions] = useState16(initialCompositions);
   const currentcompositionsRef = useRef18(compositions);
   const updateCompositions = useCallback14((updateComps) => {
     setCompositions((comps) => {
@@ -11219,6 +11305,7 @@ var validCodecs = [
   "h265",
   "vp8",
   "vp9",
+  "av1",
   "mp3",
   "aac",
   "wav",
@@ -11442,7 +11529,7 @@ var useSchema = (schema, currentValue) => {
   if (earlyReturn) {
     return earlyReturn;
   }
-  const [overrideId] = useState16(() => String(Math.random()));
+  const [overrideId] = useState17(() => String(Math.random()));
   const {
     visualModeEnabled,
     dragOverrides: overrides,
@@ -11612,7 +11699,7 @@ var OffthreadVideoForRendering = ({
       toneMapped
     });
   }, [toneMapped, currentTime, src, transparent]);
-  const [imageSrc, setImageSrc] = useState17(null);
+  const [imageSrc, setImageSrc] = useState18(null);
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
   useLayoutEffect10(() => {
     if (!window.remotion_videoEnabled) {
@@ -11801,7 +11888,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   const { hidden } = useContext34(SequenceVisibilityToggleContext);
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
-  const [timelineId] = useState18(() => String(Math.random()));
+  const [timelineId] = useState19(() => String(Math.random()));
   const isSequenceHidden = hidden[timelineId] ?? false;
   if (typeof acceptableTimeShift !== "undefined") {
     throw new Error("acceptableTimeShift has been removed. Use acceptableTimeShiftInSeconds instead.");
@@ -11867,7 +11954,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   useImperativeHandle8(ref, () => {
     return videoRef.current;
   }, []);
-  useState18(() => playbackLogging({
+  useState19(() => playbackLogging({
     logLevel,
     message: `Mounting video with source = ${actualSrc}, v=${VERSION}, user agent=${typeof navigator === "undefined" ? "server" : navigator.userAgent}`,
     tag: "video",
@@ -13544,7 +13631,7 @@ var getAngle = (ref, coordinates) => {
 };
 var lastCoordinates = null;
 var useMousePosition = (ref) => {
-  const [angle, setAngle] = useState19(getAngle(ref.current, lastCoordinates));
+  const [angle, setAngle] = useState20(getAngle(ref.current, lastCoordinates));
   useEffect18(() => {
     const element = ref.current;
     if (!element) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/promo-pages",
-	"version": "4.0.439",
+	"version": "4.0.441",
 	"publishConfig": {
 		"access": "public"
 	},
@@ -11,19 +11,19 @@
 	},
 	"type": "module",
 	"dependencies": {
-		"@remotion/animated-emoji": "4.0.439",
-		"@remotion/design": "4.0.439",
-		"@remotion/web-renderer": "4.0.439",
-		"@remotion/lottie": "4.0.439",
-		"@remotion/paths": "4.0.439",
-		"@remotion/player": "4.0.439",
-		"@remotion/shapes": "4.0.439",
-		"@remotion/media": "4.0.439",
-		"@remotion/svg-3d-engine": "4.0.439",
-		"create-video": "4.0.439",
+		"@remotion/animated-emoji": "4.0.441",
+		"@remotion/design": "4.0.441",
+		"@remotion/web-renderer": "4.0.441",
+		"@remotion/lottie": "4.0.441",
+		"@remotion/paths": "4.0.441",
+		"@remotion/player": "4.0.441",
+		"@remotion/shapes": "4.0.441",
+		"@remotion/media": "4.0.441",
+		"@remotion/svg-3d-engine": "4.0.441",
+		"create-video": "4.0.441",
 		"hls.js": "1.5.19",
 		"polished": "4.3.1",
-		"remotion": "4.0.439",
+		"remotion": "4.0.441",
 		"zod": "4.3.6",
 		"@mux/upchunk": "^3.5.0",
 		"@vidstack/react": "1.12.13",
@@ -34,7 +34,7 @@
 		"@mediabunny/mp3-encoder": "1.39.2"
 	},
 	"devDependencies": {
-		"@remotion/eslint-config-internal": "4.0.439",
+		"@remotion/eslint-config-internal": "4.0.441",
 		"@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 { 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

@@ -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] }) }) }));
-};