Merge pull request remotion-dev#5370 from remotion-dev/copilot/fix-86d36301-1881-4998-8960-5fb7e3bfa96f

JonnyBurger · web-flow · commit 5bacd32d95e3 · 2025-06-15T10:51:21.000+02:00
diff --git a/packages/docs/blog/2022-11-17-remotion-3-3.mdx b/packages/docs/blog/2022-11-17-remotion-3-3.mdx
@@ -11,7 +11,7 @@ image: /img/remotion-3-3.png
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import {NewMuxVideo} from '../src/components/MuxVideo';
-import {TableOfContents} from '../components/TableOfContents/paths';
+import {TableOfContents} from '../docs/paths/table-of-contents';
 import {FfmpegVideo} from '../components/FFmpegVideo'
 
 ## No more FFmpeg installation!
diff --git a/packages/docs/components/TableOfContents/api.tsx b/packages/docs/components/TableOfContents/api.tsx
@@ -17,22 +17,22 @@ import {TableOfContents as TailwindTableOfContents} from '../../docs/tailwind/Ta
 import {TableOfContents as ThreeTableOfContents} from '../../docs/three/TableOfContents';
 import {TableOfContents as WebcodecsTableOfContents} from '../../docs/webcodecs/TableOfContents';
 import {ZodTypesTableOfContents} from '../../docs/zod-types/TableOfContents';
-import {TableOfContents as AnimationUtilsTableOfContents} from '../TableOfContents/animation-utils';
-import {TableOfContents as BundlerTableOfContents} from '../TableOfContents/bundler';
-import {TableOfContents as CloudrunTableOfContents} from '../TableOfContents/cloudrun';
-import {TableOfContents as GifTableOfContents} from '../TableOfContents/gif';
-import {TableOfContents as LambdaTableOfContents} from '../TableOfContents/lambda';
-import {TableOfContents as LayoutUtilsTableOfContents} from '../TableOfContents/LayoutUtils';
-import {TableOfContents as LottieTableOfContents} from '../TableOfContents/lottie';
-import {TableOfContents as MediaUtilsTableOfContents} from '../TableOfContents/media-utils';
-import {TableOfContents as MotionBlurTableOfContents} from '../TableOfContents/motion-blur';
-import {TableOfContents as NoiseTableOfContents} from '../TableOfContents/noise';
-import {TableOfContents as PathsTableOfContents} from '../TableOfContents/paths';
-import {TableOfContents as PreloadTableOfContents} from '../TableOfContents/preload';
-import {TableOfContents as RemotionTableOfContents} from '../TableOfContents/remotion';
-import {TableOfContents as RiveTableOfContents} from '../TableOfContents/rive';
-import {TableOfContents as ShapesTableOfContents} from '../TableOfContents/shapes';
-import {TableOfContents as TransitionsTableOfContents} from '../TableOfContents/transitions';
+import {TableOfContents as AnimationUtilsTableOfContents} from '../../docs/animation-utils/table-of-contents';
+import {TableOfContents as BundlerTableOfContents} from '../../docs/bundler/table-of-contents';
+import {TableOfContents as CloudrunTableOfContents} from '../../docs/cloudrun/table-of-contents';
+import {TableOfContents as GifTableOfContents} from '../../docs/gif/table-of-contents';
+import {TableOfContents as LambdaTableOfContents} from '../../docs/lambda/table-of-contents';
+import {TableOfContents as LayoutUtilsTableOfContents} from '../../docs/layout-utils/table-of-contents';
+import {TableOfContents as LottieTableOfContents} from '../../docs/lottie/table-of-contents';
+import {TableOfContents as MediaUtilsTableOfContents} from '../../docs/media-utils/table-of-contents';
+import {TableOfContents as MotionBlurTableOfContents} from '../../docs/motion-blur/table-of-contents';
+import {TableOfContents as NoiseTableOfContents} from '../../docs/noise/table-of-contents';
+import {TableOfContents as PathsTableOfContents} from '../../docs/paths/table-of-contents';
+import {TableOfContents as PreloadTableOfContents} from '../../docs/preload/table-of-contents';
+import {TableOfContents as RemotionTableOfContents} from '../../docs/remotion/table-of-contents';
+import {TableOfContents as RiveTableOfContents} from '../../docs/rive/table-of-contents';
+import {TableOfContents as ShapesTableOfContents} from '../../docs/shapes/table-of-contents';
+import {TableOfContents as TransitionsTableOfContents} from '../../docs/transitions/table-of-contents';
 import {Grid} from './Grid';
 import {TOCItem} from './TOCItem';
 
diff --git a/packages/docs/docs/animation-utils/index.mdx b/packages/docs/docs/animation-utils/index.mdx
@@ -9,7 +9,7 @@ Functions that support you in animating CSS styles.
 
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
-import {TableOfContents} from '../../components/TableOfContents/animation-utils';
+import {TableOfContents} from './table-of-contents';
 
 <Tabs
 defaultValue="npm"
diff --git a/packages/docs/docs/animation-utils/table-of-contents.tsx b/packages/docs/docs/animation-utils/table-of-contents.tsx
@@ -1,6 +1,6 @@
 import React from "react";
-import { Grid } from "./Grid";
-import { TOCItem } from "./TOCItem";
+import { Grid } from "../../components/TableOfContents/Grid";
+import { TOCItem } from "../../components/TableOfContents/TOCItem";
 
 export const TableOfContents: React.FC = () => {
   return (
diff --git a/packages/docs/docs/bundler.mdx b/packages/docs/docs/bundler.mdx
@@ -3,7 +3,7 @@ image: /generated/articles-docs-bundler.png
 title: "@remotion/bundler"
 ---
 
-import {TableOfContents} from '../components/TableOfContents/bundler';
+import {TableOfContents} from './bundler/table-of-contents';
 
 A package containing the [`bundle()`](/docs/bundle) function, which takes a Remotion project and bundles it using Webpack, preparing it to be used by server-side rendering functions such as [`getCompositions()`](/docs/renderer/get-compositions) and [`renderMedia()`](/docs/renderer/render-media)
 
diff --git a/packages/docs/docs/bundler/table-of-contents.tsx b/packages/docs/docs/bundler/table-of-contents.tsx
@@ -1,6 +1,6 @@
 import React from "react";
-import { Grid } from "./Grid";
-import { TOCItem } from "./TOCItem";
+import { Grid } from "../../components/TableOfContents/Grid";
+import { TOCItem } from "../../components/TableOfContents/TOCItem";
 
 export const TableOfContents: React.FC = () => {
   return (
diff --git a/packages/docs/docs/cli/browser/index.mdx b/packages/docs/docs/cli/browser/index.mdx
@@ -5,7 +5,7 @@ crumb: "@remotion/cli"
 sidebar_label: "browser"
 ---
 
-import { TableOfContents } from "../../../components/TableOfContents/cli/browser";
+import { TableOfContents } from "./table-of-contents";
 
 # npx remotion browser<AvailableFrom v="4.0.137"/>
 
diff --git a/packages/docs/docs/cli/browser/table-of-contents.tsx b/packages/docs/docs/cli/browser/table-of-contents.tsx
@@ -1,6 +1,6 @@
 import React from "react";
-import { Grid } from "../Grid";
-import { TOCItem } from "../TOCItem";
+import { Grid } from "../../../components/TableOfContents/Grid";
+import { TOCItem } from "../../../components/TableOfContents/TOCItem";
 
 export const TableOfContents: React.FC = () => {
   return (
@@ -13,4 +13,4 @@ export const TableOfContents: React.FC = () => {
       </Grid>
     </div>
   );
-};
+};
diff --git a/packages/docs/docs/cli/cli.mdx b/packages/docs/docs/cli/cli.mdx
@@ -5,7 +5,7 @@ sidebar_label: CLI reference
 id: cli
 ---
 
-import {TableOfContents} from '../../components/TableOfContents/cli';
+import {TableOfContents} from './table-of-contents';
 
 ## How to use
 
diff --git a/packages/docs/docs/cli/table-of-contents.tsx b/packages/docs/docs/cli/table-of-contents.tsx
@@ -1,6 +1,6 @@
 import React from "react";
-import { Grid } from "./Grid";
-import { TOCItem } from "./TOCItem";
+import { Grid } from "../../components/TableOfContents/Grid";
+import { TOCItem } from "../../components/TableOfContents/TOCItem";
 
 export const TableOfContents: React.FC = () => {
   return (
diff --git a/packages/docs/docs/cloudrun/api.mdx b/packages/docs/docs/cloudrun/api.mdx
@@ -10,7 +10,7 @@ crumb: 'Render videos without servers on GCP'
   </p>
 </ExperimentalBadge>
 
-import {TableOfContents} from '../../components/TableOfContents/cloudrun';
+import {TableOfContents} from './table-of-contents';
 
 <Installation pkg="@remotion/cloudrun" />
 <br />
diff --git a/packages/docs/docs/cloudrun/table-of-contents.tsx b/packages/docs/docs/cloudrun/table-of-contents.tsx
@@ -1,6 +1,6 @@
 import React from "react";
-import { Grid } from "./Grid";
-import { TOCItem } from "./TOCItem";
+import { Grid } from "../../components/TableOfContents/Grid";
+import { TOCItem } from "../../components/TableOfContents/TOCItem";
 
 export const TableOfContents: React.FC = () => {
   return (
diff --git a/packages/docs/docs/gif/index.mdx b/packages/docs/docs/gif/index.mdx
@@ -4,7 +4,7 @@ sidebar_label: "@remotion/gif"
 title: "@remotion/gif"
 ---
 
-import {TableOfContents} from '../../components/TableOfContents/gif';
+import {TableOfContents} from './table-of-contents';
 
 You can install this package from NPM to get a component for displaying GIFs that synchronize with Remotions [`useCurrentFrame()`](/docs/use-current-frame).
 
diff --git a/packages/docs/docs/gif/table-of-contents.tsx b/packages/docs/docs/gif/table-of-contents.tsx
@@ -1,6 +1,6 @@
 import React from "react";
-import { Grid } from "./Grid";
-import { TOCItem } from "./TOCItem";
+import { Grid } from "../../components/TableOfContents/Grid";
+import { TOCItem } from "../../components/TableOfContents/TOCItem";
 
 export const TableOfContents: React.FC = () => {
   return (
diff --git a/packages/docs/docs/lambda/api.mdx b/packages/docs/docs/lambda/api.mdx
@@ -4,7 +4,7 @@ title: "@remotion/lambda"
 crumb: "Render videos without servers on AWS"
 ---
 
-import {TableOfContents} from '../../components/TableOfContents/lambda';
+import {TableOfContents} from './table-of-contents';
 
 <Installation pkg="@remotion/lambda"/>
 <br/>
diff --git a/packages/docs/docs/lambda/table-of-contents.tsx b/packages/docs/docs/lambda/table-of-contents.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import {Grid} from './Grid';
-import {TOCItem} from './TOCItem';
+import {Grid} from '../../components/TableOfContents/Grid';
+import {TOCItem} from '../../components/TableOfContents/TOCItem';
 
 export const TableOfContents: React.FC = () => {
 	return (
diff --git a/packages/docs/docs/layout-utils/index.mdx b/packages/docs/docs/layout-utils/index.mdx
@@ -9,7 +9,7 @@ Utility functions for creating dynamic layouts.
 
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
-import {TableOfContents} from '../../components/TableOfContents/LayoutUtils';
+import {TableOfContents} from './table-of-contents';
 
 <Tabs
 defaultValue="npm"
diff --git a/packages/docs/docs/layout-utils/table-of-contents.tsx b/packages/docs/docs/layout-utils/table-of-contents.tsx
@@ -1,6 +1,6 @@
 import React from "react";
-import { Grid } from "./Grid";
-import { TOCItem } from "./TOCItem";
+import { Grid } from "../../components/TableOfContents/Grid";
+import { TOCItem } from "../../components/TableOfContents/TOCItem";
 
 export const TableOfContents: React.FC = () => {
 	return (
diff --git a/packages/docs/docs/lottie/index.mdx b/packages/docs/docs/lottie/index.mdx
@@ -7,7 +7,7 @@ title: "@remotion/lottie"
 
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
-import {TableOfContents} from "../../components/TableOfContents/lottie"
+import {TableOfContents} from "./table-of-contents"
 
 This package provides a component for displaying [Lottie](http://airbnb.io/lottie/) animations in Remotion.
 
diff --git a/packages/docs/docs/lottie/table-of-contents.tsx b/packages/docs/docs/lottie/table-of-contents.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import {Grid} from './Grid';
-import {TOCItem} from './TOCItem';
+import {Grid} from '../../components/TableOfContents/Grid';
+import {TOCItem} from '../../components/TableOfContents/TOCItem';
 
 export const TableOfContents: React.FC<{
 	readonly apisOnly?: boolean;
diff --git a/packages/docs/docs/media-utils/index.mdx b/packages/docs/docs/media-utils/index.mdx
@@ -3,7 +3,7 @@ image: /generated/articles-docs-media-utils-index.png
 title: "@remotion/media-utils"
 ---
 
-import {TableOfContents} from '../../components/TableOfContents/media-utils';
+import {TableOfContents} from './table-of-contents';
 
 A package providing utility functions for getting information about video and audio, and for visualizing audio.
 
diff --git a/packages/docs/docs/media-utils/table-of-contents.tsx b/packages/docs/docs/media-utils/table-of-contents.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import {Grid} from './Grid';
-import {TOCItem} from './TOCItem';
+import {Grid} from '../../components/TableOfContents/Grid';
+import {TOCItem} from '../../components/TableOfContents/TOCItem';
 
 export const TableOfContents: React.FC = () => {
 	return (
diff --git a/packages/docs/docs/motion-blur/index.mdx b/packages/docs/docs/motion-blur/index.mdx
@@ -7,7 +7,7 @@ _Available from v3.2.31_
 
 Higher order components that create a motion blur and trail effects.
 
-import { TableOfContents } from "../../components/TableOfContents/motion-blur";
+import { TableOfContents } from "./table-of-contents";
 
 <Installation pkg="@remotion/motion-blur" />
 
diff --git a/packages/docs/docs/motion-blur/motion-blur.mdx b/packages/docs/docs/motion-blur/motion-blur.mdx
@@ -4,7 +4,7 @@ title: "<MotionBlur>"
 slug: motion-blur
 ---
 
-import {TableOfContents} from '../../components/TableOfContents/motion-blur';
+import {TableOfContents} from './table-of-contents';
 
 _Deprecated_. Use `<Trail>` or `<CameraMotionBlur>` instead.
 
diff --git a/packages/docs/docs/motion-blur/table-of-contents.tsx b/packages/docs/docs/motion-blur/table-of-contents.tsx
@@ -1,6 +1,6 @@
 import React from "react";
-import { Grid } from "./Grid";
-import { TOCItem } from "./TOCItem";
+import { Grid } from "../../components/TableOfContents/Grid";
+import { TOCItem } from "../../components/TableOfContents/TOCItem";
 
 export const TableOfContents: React.FC = () => {
   return (
diff --git a/packages/docs/docs/noise/index.mdx b/packages/docs/docs/noise/index.mdx
@@ -10,7 +10,7 @@ Utility functions that create a noise effect.
 
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
-import {TableOfContents} from '../../components/TableOfContents/noise';
+import {TableOfContents} from './table-of-contents';
 
 <Tabs
 defaultValue="npm"
diff --git a/packages/docs/docs/noise/table-of-contents.tsx b/packages/docs/docs/noise/table-of-contents.tsx
@@ -1,6 +1,6 @@
 import React from "react";
-import { Grid } from "./Grid";
-import { TOCItem } from "./TOCItem";
+import { Grid } from "../../components/TableOfContents/Grid";
+import { TOCItem } from "../../components/TableOfContents/TOCItem";
 
 export const TableOfContents: React.FC = () => {
   return (
@@ -21,4 +21,4 @@ export const TableOfContents: React.FC = () => {
       </Grid>
     </div>
   );
-};
+};
diff --git a/packages/docs/docs/paths/index.mdx b/packages/docs/docs/paths/index.mdx
@@ -4,7 +4,7 @@ title: "@remotion/paths"
 crumb: "SVG"
 ---
 
-import {TableOfContents} from '../../components/TableOfContents/paths';
+import {TableOfContents} from './table-of-contents';
 
 A package providing utility functions for dealing with SVG paths. This package includes code from [`svg-path-properties`](https://www.npmjs.com/package/svg-path-properties), [`svg-path-reverse`](https://github.com/Pomax/svg-path-reverse#readme), [`svgpath`](https://github.com/fontello/svgpath), [`svg-path-bbox`](https://github.com/mondeja/svg-path-bbox), [`translate-svg-path`](https://github.com/michaelrhodes/translate-svg-path) and [`d3-interpolate-path`](https://github.com/pbeshai/d3-interpolate-path) with the following improvements:
 
diff --git a/packages/docs/docs/paths/table-of-contents.tsx b/packages/docs/docs/paths/table-of-contents.tsx
@@ -1,6 +1,6 @@
 import React from "react";
-import { Grid } from "./Grid";
-import { TOCItem } from "./TOCItem";
+import { Grid } from "../../components/TableOfContents/Grid";
+import { TOCItem } from "../../components/TableOfContents/TOCItem";
 
 export const TableOfContents: React.FC = () => {
   return (
@@ -82,4 +82,4 @@ export const TableOfContents: React.FC = () => {
       </Grid>
     </div>
   );
-};
+};
diff --git a/packages/docs/docs/preload/preload.mdx b/packages/docs/docs/preload/preload.mdx
@@ -7,7 +7,7 @@ title: "@remotion/preload"
 
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
-import {TableOfContents} from '../../components/TableOfContents/preload';
+import {TableOfContents} from './table-of-contents';
 
 This package provides functions for preloading assets. While preload is not necessary for rendering, it can help with seamless playback in the [`<Player />`](/docs/player) and in the Studio. Currently, three functions are implemented:
 
diff --git a/packages/docs/docs/preload/table-of-contents.tsx b/packages/docs/docs/preload/table-of-contents.tsx
@@ -1,6 +1,6 @@
 import React from "react";
-import { Grid } from "./Grid";
-import { TOCItem } from "./TOCItem";
+import { Grid } from "../../components/TableOfContents/Grid";
+import { TOCItem } from "../../components/TableOfContents/TOCItem";
 
 export const TableOfContents: React.FC = () => {
   return (
diff --git a/packages/docs/docs/remotion.mdx b/packages/docs/docs/remotion.mdx
@@ -4,7 +4,7 @@ title: 'remotion'
 crumb: 'Core API Reference'
 ---
 
-import {TableOfContents} from '../components/TableOfContents/remotion';
+import {TableOfContents} from './remotion/table-of-contents';
 
 A package containing the essential building blocks of expressing videos in Remotion.
 
diff --git a/packages/docs/docs/remotion/table-of-contents.tsx b/packages/docs/docs/remotion/table-of-contents.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import {Grid} from './Grid';
-import {TOCItem} from './TOCItem';
+import {Grid} from '../../components/TableOfContents/Grid';
+import {TOCItem} from '../../components/TableOfContents/TOCItem';
 
 export const TableOfContents: React.FC = () => {
 	return (
diff --git a/packages/docs/docs/rive/index.mdx b/packages/docs/docs/rive/index.mdx
@@ -7,7 +7,7 @@ crumb: Integrations
 
 import Tabs from "@theme/Tabs";
 import TabItem from "@theme/TabItem";
-import {TableOfContents} from '../../components/TableOfContents/rive';
+import {TableOfContents} from './table-of-contents';
 
 This package provides a component for rendering [Rive](https://rive.app) animations in Remotion.
 
diff --git a/packages/docs/docs/rive/table-of-contents.tsx b/packages/docs/docs/rive/table-of-contents.tsx
@@ -1,6 +1,6 @@
 import React from "react";
-import { Grid } from "./Grid";
-import { TOCItem } from "./TOCItem";
+import { Grid } from "../../components/TableOfContents/Grid";
+import { TOCItem } from "../../components/TableOfContents/TOCItem";
 
 export const TableOfContents: React.FC = () => {
   return (
diff --git a/packages/docs/docs/shapes/index.mdx b/packages/docs/docs/shapes/index.mdx
@@ -4,7 +4,7 @@ title: "@remotion/shapes"
 crumb: "SVG component library"
 ---
 
-import {TableOfContents} from '../../components/TableOfContents/shapes';
+import {TableOfContents} from './table-of-contents';
 
 A package providing utility functions for generate SVG shapes.
 
diff --git a/packages/docs/docs/shapes/table-of-contents.tsx b/packages/docs/docs/shapes/table-of-contents.tsx
@@ -1,7 +1,7 @@
 import React from "react";
-import { shapeComponents } from "../shapes/shapes-info";
-import { Grid } from "./Grid";
-import { TOCItem } from "./TOCItem";
+import { shapeComponents } from "../../components/shapes/shapes-info";
+import { Grid } from "../../components/TableOfContents/Grid";
+import { TOCItem } from "../../components/TableOfContents/TOCItem";
 
 export const TableOfContents: React.FC = () => {
   return (
diff --git a/packages/docs/docs/transitions/index.mdx b/packages/docs/docs/transitions/index.mdx
@@ -8,7 +8,7 @@ _available from v4.0.53_
 
 import Tabs from "@theme/Tabs";
 import TabItem from "@theme/TabItem";
-import { TableOfContents } from "../../components/TableOfContents/transitions";
+import { TableOfContents } from "./table-of-contents";
 
 This package provides the [`<TransitionSeries>`](/docs/transitions/transitionseries) component for transitioning between two scenes as well as timing presets.
 
diff --git a/packages/docs/docs/transitions/table-of-contents.tsx b/packages/docs/docs/transitions/table-of-contents.tsx
