@remotion/promo-pages 4.0.433 → 4.0.435

package/dist/Users/jonathanburger/remotion/packages/promo-pages/dist/design.js

@@ -5977,7 +5977,7 @@ var useIsPlayer = () => {
 function truthy2(value) {
   return Boolean(value);
 }
-var VERSION = "4.0.433";
+var VERSION = "4.0.435";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;

package/dist/Users/jonathanburger/remotion/packages/promo-pages/dist/experts/experts-data.js

@@ -547,29 +547,80 @@ var experts = [
     x: null,
     github: "sambowenhughes",
     linkedin: "in/sambowenhughes/",
-    email: "sambowenhughes@icloud.com",
-    videocall: "https://calendly.com/hello-reactvideoeditor/30min",
+    email: "sam@reactvideoeditor.com",
+    videocall: "https://calendly.com/reactvideoeditor/30min",
     since: new Date("2025-06-03").getTime(),
     description: /* @__PURE__ */ jsxs("div", {
       children: [
-        "Full-stack engineer with 10+ years experience. I built",
-        " ",
-        /* @__PURE__ */ jsx("a", {
-          target: "_blank",
-          href: "https://reactvideoeditor.com?utm_source=remotion",
-          children: "React Video Editor"
+        /* @__PURE__ */ jsxs("p", {
+          children: [
+            "Experienced engineer with 10+ years building advanced software products. Creator of",
+            " ",
+            /* @__PURE__ */ jsx("a", {
+              target: "_blank",
+              href: "https://reactvideoeditor.com",
+              children: "React Video Editor"
+            }),
+            "and",
+            " ",
+            /* @__PURE__ */ jsx("a", {
+              target: "_blank",
+              href: "https://clippkit.com",
+              children: "Clippkit"
+            }),
+            "."
+          ]
         }),
-        " ",
-        "and",
-        " ",
-        /* @__PURE__ */ jsx("a", {
-          target: "_blank",
-          href: "https://clippkit.com?utm_source=remotion",
-          children: "Clippkit"
+        /* @__PURE__ */ jsxs("p", {
+          children: [
+            "I work with companies building products with",
+            " ",
+            /* @__PURE__ */ jsx("strong", {
+              children: "Remotion at their core"
+            }),
+            ". Custom video editors, automated video generation tools, and scalable rendering pipelines."
+          ]
         }),
-        ".",
-        /* @__PURE__ */ jsx("br", {}),
-        "I can help with anything Remotion-related, or just be a reliable engineering partner if you need someone who moves fast and builds things right – SaaS, design, backend, whatever's needed."
+        /* @__PURE__ */ jsxs("ul", {
+          children: [
+            /* @__PURE__ */ jsxs("li", {
+              children: [
+                /* @__PURE__ */ jsx("strong", {
+                  children: "Custom video editors"
+                }),
+                " built with Remotion"
+              ]
+            }),
+            /* @__PURE__ */ jsxs("li", {
+              children: [
+                /* @__PURE__ */ jsx("strong", {
+                  children: "Automated video generation"
+                }),
+                " systems"
+              ]
+            }),
+            /* @__PURE__ */ jsxs("li", {
+              children: [
+                /* @__PURE__ */ jsx("strong", {
+                  children: "Rendering infrastructure"
+                }),
+                " and media pipelines"
+              ]
+            }),
+            /* @__PURE__ */ jsx("li", {
+              children: /* @__PURE__ */ jsx("strong", {
+                children: "UI/UX and full-stack product development"
+              })
+            })
+          ]
+        }),
+        /* @__PURE__ */ jsxs("p", {
+          children: [
+            "If you",
+            "'",
+            "re building software around video, or just need a reliable engineering partner who moves fast and builds things right, feel free to reach out."
+          ]
+        })
       ]
     })
   },

package/dist/Users/jonathanburger/remotion/packages/promo-pages/dist/experts.js

@@ -547,29 +547,80 @@ var experts = [
     x: null,
     github: "sambowenhughes",
     linkedin: "in/sambowenhughes/",
-    email: "sambowenhughes@icloud.com",
-    videocall: "https://calendly.com/hello-reactvideoeditor/30min",
+    email: "sam@reactvideoeditor.com",
+    videocall: "https://calendly.com/reactvideoeditor/30min",
     since: new Date("2025-06-03").getTime(),
     description: /* @__PURE__ */ jsxs("div", {
       children: [
-        "Full-stack engineer with 10+ years experience. I built",
-        " ",
-        /* @__PURE__ */ jsx("a", {
-          target: "_blank",
-          href: "https://reactvideoeditor.com?utm_source=remotion",
-          children: "React Video Editor"
+        /* @__PURE__ */ jsxs("p", {
+          children: [
+            "Experienced engineer with 10+ years building advanced software products. Creator of",
+            " ",
+            /* @__PURE__ */ jsx("a", {
+              target: "_blank",
+              href: "https://reactvideoeditor.com",
+              children: "React Video Editor"
+            }),
+            "and",
+            " ",
+            /* @__PURE__ */ jsx("a", {
+              target: "_blank",
+              href: "https://clippkit.com",
+              children: "Clippkit"
+            }),
+            "."
+          ]
         }),
-        " ",
-        "and",
-        " ",
-        /* @__PURE__ */ jsx("a", {
-          target: "_blank",
-          href: "https://clippkit.com?utm_source=remotion",
-          children: "Clippkit"
+        /* @__PURE__ */ jsxs("p", {
+          children: [
+            "I work with companies building products with",
+            " ",
+            /* @__PURE__ */ jsx("strong", {
+              children: "Remotion at their core"
+            }),
+            ". Custom video editors, automated video generation tools, and scalable rendering pipelines."
+          ]
         }),
-        ".",
-        /* @__PURE__ */ jsx("br", {}),
-        "I can help with anything Remotion-related, or just be a reliable engineering partner if you need someone who moves fast and builds things right – SaaS, design, backend, whatever's needed."
+        /* @__PURE__ */ jsxs("ul", {
+          children: [
+            /* @__PURE__ */ jsxs("li", {
+              children: [
+                /* @__PURE__ */ jsx("strong", {
+                  children: "Custom video editors"
+                }),
+                " built with Remotion"
+              ]
+            }),
+            /* @__PURE__ */ jsxs("li", {
+              children: [
+                /* @__PURE__ */ jsx("strong", {
+                  children: "Automated video generation"
+                }),
+                " systems"
+              ]
+            }),
+            /* @__PURE__ */ jsxs("li", {
+              children: [
+                /* @__PURE__ */ jsx("strong", {
+                  children: "Rendering infrastructure"
+                }),
+                " and media pipelines"
+              ]
+            }),
+            /* @__PURE__ */ jsx("li", {
+              children: /* @__PURE__ */ jsx("strong", {
+                children: "UI/UX and full-stack product development"
+              })
+            })
+          ]
+        }),
+        /* @__PURE__ */ jsxs("p", {
+          children: [
+            "If you",
+            "'",
+            "re building software around video, or just need a reliable engineering partner who moves fast and builds things right, feel free to reach out."
+          ]
+        })
       ]
     })
   },
@@ -952,7 +1003,7 @@ var useIsPlayer = () => {
 function truthy(value) {
   return Boolean(value);
 }
-var VERSION = "4.0.433";
+var VERSION = "4.0.435";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;

package/dist/Users/jonathanburger/remotion/packages/promo-pages/dist/homepage/Pricing.js

@@ -5977,7 +5977,7 @@ var useIsPlayer = () => {
 function truthy2(value) {
   return Boolean(value);
 }
-var VERSION = "4.0.433";
+var VERSION = "4.0.435";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;

package/dist/Users/jonathanburger/remotion/packages/promo-pages/dist/prompts/PromptsGallery.js

@@ -5977,7 +5977,7 @@ var useIsPlayer = () => {
 function truthy2(value) {
   return Boolean(value);
 }
-var VERSION = "4.0.433";
+var VERSION = "4.0.435";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;

package/dist/Users/jonathanburger/remotion/packages/promo-pages/dist/prompts/PromptsShow.js

@@ -23311,7 +23311,7 @@ var useIsPlayer = () => {
 function truthy2(value) {
   return Boolean(value);
 }
-var VERSION = "4.0.433";
+var VERSION = "4.0.435";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;

package/dist/Users/jonathanburger/remotion/packages/promo-pages/dist/prompts/PromptsSubmit.js

@@ -23311,7 +23311,7 @@ var useIsPlayer = () => {
 function truthy2(value) {
   return Boolean(value);
 }
-var VERSION = "4.0.433";
+var VERSION = "4.0.435";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;

package/dist/Users/jonathanburger/remotion/packages/promo-pages/dist/template-modal-content.js

@@ -5977,7 +5977,7 @@ var useIsPlayer = () => {
 function truthy2(value) {
   return Boolean(value);
 }
-var VERSION = "4.0.433";
+var VERSION = "4.0.435";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;

package/dist/Users/jonathanburger/remotion/packages/promo-pages/dist/templates.js

@@ -5977,7 +5977,7 @@ var useIsPlayer = () => {
 function truthy2(value) {
   return Boolean(value);
 }
-var VERSION = "4.0.433";
+var VERSION = "4.0.435";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -19911,6 +19911,7 @@ var listOfRemotionPackages = [
   "@remotion/astro-example",
   "@remotion/babel-loader",
   "@remotion/bugs",
+  "@remotion/brand",
   "@remotion/bundler",
   "@remotion/cli",
   "@remotion/cloudrun",
@@ -19989,6 +19990,7 @@ var listOfRemotionPackages = [
   "@remotion/web-renderer",
   "@remotion/design",
   "@remotion/light-leaks",
+  "@remotion/starburst",
   "@remotion/vercel",
   "@remotion/sfx"
 ];

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;
+}>;