remotion 3.3.54 → 3.3.55

package/dist/esm/internals.js

@@ -1,4 +1,4 @@
-import { enableLegacyRemotionConfig } from './config';
+import { enableLegacyRemotionConfig } from './config.js';
 import { SharedAudioContext, SharedAudioContextProvider, } from './audio/shared-audio-tags.js';
 import { CanUseRemotionHooks, CanUseRemotionHooksProvider, } from './CanUseRemotionHooks.js';
 import { CompositionManager, compositionsRef } from './CompositionManager.js';
@@ -11,7 +11,7 @@ import { portalNode } from './portal-node.js';
 import { PrefetchProvider } from './prefetch-state.js';
 import { getRoot, waitForRoot } from './register-root.js';
 import { RemotionRoot } from './RemotionRoot.js';
-import { SequenceContext } from './Sequence.js';
+import { SequenceContext } from './SequenceContext.js';
 import { ENV_VARIABLES_ENV_NAME, setupEnvVariables, } from './setup-env-variables.js';
 import * as TimelinePosition from './timeline-position-state.js';
 import { truthy } from './truthy.js';

package/dist/esm/interpolate-colors.js

@@ -375,6 +375,10 @@ const interpolateColorsRGB = (value, inputRange, colors) => {
     });
     return rgbaColor(r, g, b, a);
 };
+/**
+ * @description This function allows you to map a range of values to colors using a concise syntax.
+ * @see [Documentation](https://www.remotion.dev/docs/interpolate-colors)
+ */
 export const interpolateColors = (input, inputRange, outputRange) => {
     if (typeof input === 'undefined') {
         throw new TypeError('input can not be undefined');

package/dist/esm/interpolate.js

@@ -1,4 +1,8 @@
 // Taken from https://github.com/facebook/react-native/blob/0b9ea60b4fee8cacc36e7160e31b91fc114dbc0d/Libraries/Animated/src/nodes/AnimatedInterpolation.js
+/**
+ * @description This function allows you to map a range of values to another with a conside syntax
+ * @see [Documentation](https://www.remotion.dev/docs/interpolate)
+ */
 function interpolateFunction(input, inputRange, outputRange, options) {
     const { extrapolateLeft, extrapolateRight, easing } = options;
     let result = input;

package/dist/esm/loop/index.js

@@ -2,6 +2,10 @@ import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { Sequence } from '../Sequence.js';
 import { useVideoConfig } from '../use-video-config.js';
 import { validateDurationInFrames } from '../validation/validate-duration-in-frames.js';
+/**
+ * @description This component allows you to quickly lay out an animation so it repeats itself.
+ * @see [Documentation](https://www.remotion.dev/docs/loop)
+ */
 export const Loop = ({ durationInFrames, times = Infinity, children, name, ...props }) => {
     const { durationInFrames: compDuration } = useVideoConfig();
     validateDurationInFrames(durationInFrames, 'of the <Loop /> component');

package/dist/esm/prefetch.js

@@ -19,6 +19,10 @@ const blobToBase64 = function (blob) {
         reader.readAsDataURL(blob);
     });
 };
+/**
+ * @description When you call the preFetch() function, an asset will be fetched and kept in memory so it is ready when you want to play it in a <Player>.
+ * @see [Documentation](https://www.remotion.dev/docs/prefetch)
+ */
 export const prefetch = (src, options) => {
     var _a;
     const method = (_a = options === null || options === void 0 ? void 0 : options.method) !== null && _a !== void 0 ? _a : 'blob-url';

package/dist/esm/random.js

@@ -17,9 +17,8 @@ function hashCode(str) {
     return hash;
 }
 /**
- * A deterministic pseudo-random number generator.
- * Pass in the same seed and get the same pseudorandom number.
- * See: https://remotion.dev/docs/random
+ * @description A deterministic pseudo-random number generator. Pass in the same seed and get the same pseudorandom number.
+ * @see [Documentation](https://remotion.dev/docs/random)
  */
 export const random = (seed, dummy) => {
     if (dummy !== undefined) {

package/dist/esm/register-root.js

@@ -1,5 +1,9 @@
 let Root = null;
 let listeners = [];
+/**
+ * @description This function registers the root component of the Remotion project
+ * @see [Documentation](https://www.remotion.dev/docs/register-root)
+ */
 export const registerRoot = (comp) => {
     if (!comp) {
         throw new Error(`You must pass a React component to registerRoot(), but ${JSON.stringify(comp)} was passed.`);

package/dist/esm/series/index.js

@@ -9,6 +9,10 @@ const SeriesSequenceRefForwardingFunction = ({ children }, _ref) => {
     return _jsx(_Fragment, { children: children });
 };
 const SeriesSequence = forwardRef(SeriesSequenceRefForwardingFunction);
+/**
+ * @description with this component, you can easily stitch together scenes that should play sequentially after another.
+ * @see [Documentation](https://www.remotion.dev/docs/series)
+ */
 const Series = ({ children }) => {
     const childrenValue = useMemo(() => {
         let startFrame = 0;

package/dist/esm/spring/index.js

@@ -4,8 +4,8 @@ import { validateSpringDuration } from '../validation/validation-spring-duration
 import { measureSpring } from './measure-spring.js';
 import { springCalculation } from './spring-utils.js';
 /**
- * Calculates a position based on physical parameters, start and end value, and time.
- * @link https://www.remotion.dev/docs/spring
+ * @description Calculates a position based on physical parameters, start and end value, and time.
+ * @see [Documentation](https://www.remotion.dev/docs/spring)
  * @param {number} frame The current time value. Most of the time you want to pass in the return value of useCurrentFrame.
  * @param {number} fps The framerate at which the animation runs. Pass in the value obtained by `useVideoConfig()`.
  * @param {?Object} config optional object that allows you to customize the physical properties of the animation.

package/dist/esm/spring/measure-spring.js

@@ -1,5 +1,9 @@
 import { validateFps } from '../validation/validate-fps.js';
 import { springCalculation } from './spring-utils.js';
+/**
+ * @description The function returns how long it takes for a spring animation to settle
+ * @see [Documentation](https://www.remotion.dev/docs/measure-spring)
+ */
 export function measureSpring({ fps, config = {}, threshold = 0.005, from = 0, to = 1, }) {
     if (typeof threshold !== 'number') {
         throw new TypeError(`threshold must be a number, got ${threshold} of type ${typeof threshold}`);

package/dist/esm/static-file.js

@@ -11,8 +11,8 @@ const inner = (path) => {
     return `/${trimLeadingSlash(path)}`;
 };
 /**
- * Reference a file from the public/ folder.
- * If the file does not appear in the autocomplete, type the path manually.
+ * @description Reference a file from the public/ folder. If the file does not appear in the autocomplete, type the path manually.
+ * @see [Documentation](https://www.remotion.dev/docs/staticfile)
  */
 export const staticFile = (path) => {
     if (path.startsWith('http://') || path.startsWith('https://')) {

package/dist/esm/test/audio.test.js

@@ -5,7 +5,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { render } from '@testing-library/react';
 import React, { useContext } from 'react';
 import { describe, expect, test } from 'vitest';
-import { Audio } from '../audio';
+import { Audio } from '../audio/index.js';
 import { CanUseRemotionHooksProvider } from '../CanUseRemotionHooks.js';
 import { Internals } from '../internals.js';
 const Wrapper = ({ children }) => {

package/dist/esm/test/composition-validation.test.js

@@ -4,7 +4,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  */
 import { render } from '@testing-library/react';
 import { describe, expect, test } from 'vitest';
-import { Composition } from '..';
+import { Composition } from '../Composition.js';
 import { RemotionRoot } from '../RemotionRoot.js';
 import { expectToThrow } from './expect-to-throw.js';
 const AnyComp = () => null;

package/dist/esm/test/loop-validation.test.js

@@ -7,7 +7,7 @@ import React, { useContext } from 'react';
 import { describe, expect, test } from 'vitest';
 import { CanUseRemotionHooksProvider } from '../CanUseRemotionHooks.js';
 import { CompositionManager } from '../CompositionManager.js';
-import { Loop } from '../loop';
+import { Loop } from '../loop/index.js';
 import { RemotionRoot } from '../RemotionRoot.js';
 import { expectToThrow } from './expect-to-throw.js';
 const Wrapper = ({ children }) => {

package/dist/esm/test/measure-spring.test.js

@@ -1,5 +1,5 @@
 import { describe, expect, test } from 'vitest';
-import { measureSpring, spring } from '../spring';
+import { measureSpring, spring } from '../spring/index.js';
 import { expectToThrow } from './expect-to-throw.js';
 describe('Measure spring should work', () => {
     const duration = measureSpring({

package/dist/esm/test/series.test.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { renderToString } from 'react-dom/server';
 import { expect, test } from 'vitest';
 import { CanUseRemotionHooksProvider } from '../CanUseRemotionHooks.js';
-import { Series } from '../series';
+import { Series } from '../series/index.js';
 import { TimelineContext } from '../timeline-position-state.js';
 import { useCurrentFrame } from '../use-current-frame.js';
 import { WrapSequenceContext } from './wrap-sequence-context.js';

package/dist/esm/test/spring.test.js

@@ -1,6 +1,6 @@
 import { expect, test } from 'vitest';
 import { isApproximatelyTheSame } from '../is-approximately-the-same.js';
-import { spring } from '../spring';
+import { spring } from '../spring/index.js';
 test('Basic spring to equal 0', () => {
     expect(spring({
         fps: 30,

package/dist/esm/test/use-audio-frame.test.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { afterAll, beforeAll, describe, expect, test, vitest } from 'vitest';
 import * as useAudioFrameModule from '../audio/use-audio-frame.js';
 import { useFrameForVolumeProp, useMediaStartsAt, } from '../audio/use-audio-frame.js';
-import { SequenceContext } from '../Sequence.js';
+import { SequenceContext } from '../SequenceContext.js';
 import * as useFrameModule from '../use-current-frame.js';
 import { renderHook } from './render-hook.js';
 test.skip('Media starts at 0 if it is outside a sequence', () => {

package/dist/esm/test/video.test.js

@@ -7,7 +7,7 @@ import React, { useContext } from 'react';
 import { describe, expect, test } from 'vitest';
 import { CanUseRemotionHooksProvider } from '../CanUseRemotionHooks.js';
 import { Internals } from '../internals.js';
-import { Video } from '../video';
+import { Video } from '../video/index.js';
 import { expectToThrow } from './expect-to-throw.js';
 const Wrapper = ({ children }) => {
     const compositions = useContext(Internals.CompositionManager);

package/dist/esm/use-current-frame.js

@@ -1,11 +1,10 @@
 import { useContext } from 'react';
 import { CanUseRemotionHooks } from './CanUseRemotionHooks.js';
-import { SequenceContext } from './Sequence.js';
+import { SequenceContext } from './SequenceContext.js';
 import { useTimelinePosition } from './timeline-position-state.js';
 /**
- * Get the current frame of the video.
- * Frames are 0-indexed, meaning the first frame is 0, the last frame is the duration of the composition in frames minus one.
- * @link https://www.remotion.dev/docs/use-current-frame
+ * @description Get the current frame of the video. Frames are 0-indexed, meaning the first frame is 0, the last frame is the duration of the composition in frames minus one.
+ * @see [Documentation](https://remotion.dev/docs/use-current-frame)
  */
 export const useCurrentFrame = () => {
     const canUseRemotionHooks = useContext(CanUseRemotionHooks);

package/dist/esm/use-media-in-timeline.js

@@ -5,7 +5,7 @@ import { getAssetDisplayName } from './get-asset-file-name.js';
 import { useRemotionEnvironment } from './get-environment.js';
 import { useNonce } from './nonce.js';
 import { playAndHandleNotAllowedError } from './play-and-handle-not-allowed-error.js';
-import { SequenceContext } from './Sequence.js';
+import { SequenceContext } from './SequenceContext.js';
 import { TimelineContext, usePlayingState } from './timeline-position-state.js';
 import { useVideoConfig } from './use-video-config.js';
 import { evaluateVolume } from './volume-prop.js';

package/dist/esm/use-unsafe-video-config.js

@@ -1,5 +1,5 @@
 import { useContext, useMemo } from 'react';
-import { SequenceContext } from './Sequence.js';
+import { SequenceContext } from './SequenceContext.js';
 import { useVideo } from './use-video.js';
 export const useUnsafeVideoConfig = () => {
     var _a;

package/dist/esm/use-video-config.js

@@ -3,9 +3,10 @@ import { CanUseRemotionHooks } from './CanUseRemotionHooks.js';
 import { useIsPlayer } from './is-player.js';
 import { useUnsafeVideoConfig } from './use-unsafe-video-config.js';
 /**
- * Get some info about the context of the video that you are making.
- * Returns an object containing `fps`, `width`, `height` and `durationInFrames`, all of type `number`.
- * @link https://www.remotion.dev/docs/use-video-config
+ * /**
+ * @description Get some info about the context of the video that you are making.
+ * @see [Documentation](https://www.remotion.dev/docs/use-video-config)
+ * @returns Returns an object containing `fps`, `width`, `height` and `durationInFrames`, all of type `number`.
  */
 export const useVideoConfig = () => {
     const videoConfig = useUnsafeVideoConfig();

package/dist/esm/version.js

@@ -1,2 +1,2 @@
 // Automatically generated on publish
-export const VERSION = '3.3.54';
+export const VERSION = '3.3.55';

package/dist/esm/version.mjs

@@ -0,0 +1,4 @@
+// Automatically generated on publish
+const VERSION = '3.3.55';
+
+export { VERSION };

package/dist/esm/video/OffthreadVideo.js

@@ -7,6 +7,10 @@ import { validateStartFromProps } from '../validate-start-from-props.js';
 import { validateOffthreadVideoImageFormat } from '../validation/validate-offthreadvideo-image-format.js';
 import { OffthreadVideoForRendering } from './OffthreadVideoForRendering.js';
 import { VideoForDevelopment } from './VideoForDevelopment.js';
+/**
+ * @description This method imports and displays a video, similar to <Video />. During rendering, it extracts the exact frame from the video and displays it in an <img> tag
+ * @see [Documentation](https://www.remotion.dev/docs/offthreadvideo)
+ */
 export const OffthreadVideo = (props) => {
     const { startFrom, endAt, ...otherProps } = props;
     const environment = useRemotionEnvironment();

package/dist/esm/video/OffthreadVideoForRendering.js

@@ -7,7 +7,7 @@ import { OFFTHREAD_VIDEO_CLASS_NAME } from '../default-css.js';
 import { Img } from '../Img.js';
 import { Internals } from '../internals.js';
 import { random } from '../random.js';
-import { SequenceContext } from '../Sequence.js';
+import { SequenceContext } from '../SequenceContext.js';
 import { useTimelinePosition } from '../timeline-position-state.js';
 import { useCurrentFrame } from '../use-current-frame.js';
 import { useUnsafeVideoConfig } from '../use-unsafe-video-config.js';

package/dist/esm/video/Video.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, useCallback, useContext } from 'react';
 import { useRemotionEnvironment } from '../get-environment.js';
-import { Loop } from '../loop';
+import { Loop } from '../loop/index.js';
 import { Sequence } from '../Sequence.js';
 import { useVideoConfig } from '../use-video-config.js';
 import { validateMediaProps } from '../validate-media-props.js';
@@ -44,4 +44,8 @@ const VideoForwardingFunction = (props, ref) => {
     return (_jsx(VideoForDevelopment, { onlyWarnForMediaSeekingError: false, ...otherProps, ref: ref, onDuration: onDuration }));
 };
 const forward = forwardRef;
+/**
+ * @description allows you to include a video file in your Remotion project. It wraps the native HTMLVideoElement.
+ * @see [Documentation](https://www.remotion.dev/docs/video)
+ */
 export const Video = forward(VideoForwardingFunction);

package/dist/esm/video/VideoForDevelopment.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, useContext, useEffect, useImperativeHandle, useRef, } from 'react';
 import { useFrameForVolumeProp } from '../audio/use-audio-frame.js';
 import { usePreload } from '../prefetch.js';
-import { SequenceContext } from '../Sequence.js';
+import { SequenceContext } from '../SequenceContext.js';
 import { useMediaInTimeline } from '../use-media-in-timeline.js';
 import { DEFAULT_ACCEPTABLE_TIMESHIFT, useMediaPlayback, } from '../use-media-playback.js';
 import { useMediaTagVolume } from '../use-media-tag-volume.js';

package/dist/esm/video/VideoForRendering.js

@@ -7,7 +7,7 @@ import { continueRender, delayRender } from '../delay-render.js';
 import { useRemotionEnvironment } from '../get-environment.js';
 import { isApproximatelyTheSame } from '../is-approximately-the-same.js';
 import { random } from '../random.js';
-import { SequenceContext } from '../Sequence.js';
+import { SequenceContext } from '../SequenceContext.js';
 import { useTimelinePosition } from '../timeline-position-state.js';
 import { useCurrentFrame } from '../use-current-frame.js';
 import { useUnsafeVideoConfig } from '../use-unsafe-video-config.js';

package/dist/esm/wrap-remotion-context.js

@@ -8,8 +8,8 @@ import { CompositionManager } from './CompositionManager.js';
 import { NativeLayersContext } from './NativeLayers.js';
 import { NonceContext } from './nonce.js';
 import { PreloadContext } from './prefetch-state.js';
-import { SequenceContext } from './Sequence.js';
-import { SetTimelineContext, TimelineContext } from './timeline-position-state.js';
+import { SequenceContext } from './SequenceContext.js';
+import { SetTimelineContext, TimelineContext, } from './timeline-position-state.js';
 export function useRemotionContexts() {
     const compositionManagerCtx = React.useContext(CompositionManager);
     const timelineContext = React.useContext(TimelineContext);

package/package.json

@@ -1,15 +1,15 @@
 {
 	"name": "remotion",
-	"version": "3.3.54",
+	"version": "3.3.55",
 	"description": "Render videos in React",
 	"main": "dist/cjs/index.js",
 	"types": "dist/cjs/index.d.ts",
-	"module": "dist/esm/index.js",
+	"module": "dist/esm/index.mjs",
 	"scripts": {
 		"prepublishOnly": "node ensure-correct-version.js && cp ../../README.md .",
 		"lint": "eslint src --ext ts,tsx",
 		"test": "vitest --run",
-		"build": "tsc -d && tsc -d -p tsconfig-cjs.json",
+		"build": "rollup --config rollup-version.config.js && rollup --config rollup.config.js && tsc -d -p tsconfig-cjs.json",
 		"watch": "tsc -w"
 	},
 	"repository": {
@@ -25,7 +25,8 @@
 		"react-dom": ">=16.8.0"
 	},
 	"devDependencies": {
-		"@jonny/eslint-config": "3.0.266",
+		"@jonny/eslint-config": "3.0.273",
+		"@rollup/plugin-typescript": "^8.2.0",
 		"@testing-library/react": "14.0.0",
 		"@types/node": "^16.7.5",
 		"@types/react": "18.0.26",
@@ -40,6 +41,7 @@
 		"react": "^18.0.0",
 		"react-dom": "^18.0.0",
 		"rimraf": "^3.0.2",
+		"rollup": "^2.70.1",
 		"typescript": "^4.7.0",
 		"vitest": "0.24.3"
 	},
@@ -57,14 +59,14 @@
 		"./package.json": "./package.json",
 		".": {
 			"types": "./dist/cjs/index.d.ts",
-			"module": "./dist/esm/index.js",
-			"import": "./dist/esm/index.js",
+			"module": "./dist/esm/index.mjs",
+			"import": "./dist/esm/index.mjs",
 			"require": "./dist/cjs/index.js"
 		},
 		"./version": {
 			"types": "./dist/cjs/version.d.ts",
-			"module": "./dist/esm/version.js",
-			"import": "./dist/esm/version.js",
+			"module": "./dist/esm/version.mjs",
+			"import": "./dist/esm/version.mjs",
 			"require": "./dist/cjs/version.js"
 		}
 	},
@@ -75,5 +77,5 @@
 			]
 		}
 	},
-	"gitHead": "3a004e0b0e2a805fb276c35dd5922e3389c9f53c"
+	"gitHead": "4cecccc293e9c906c693f55fac65df8f1cfd2338"
 }

package/version.js

@@ -0,0 +1,2 @@
+// For backwards compatibility when you use `esm-wallaby`
+module.exports = require('./dist/cjs/version');

package/.prettierrc.js

@@ -1,14 +0,0 @@
-module.exports = {
-	singleQuote: true,
-	bracketSpacing: false,
-	useTabs: true,
-	overrides: [
-		{
-			files: ['*.yml'],
-			options: {
-				singleQuote: false,
-			},
-		},
-	],
-	plugins: [require.resolve('prettier-plugin-organize-imports')],
-};

package/dist/AbsoluteFill.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-/**
- * An absolutely positioned <div> element with 100% width, height, and a column flex style
- * @link https://www.remotion.dev/docs/absolute-fill
- */
-export declare const AbsoluteFill: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>>;

package/dist/AbsoluteFill.js

@@ -1,28 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AbsoluteFill = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const AbsoluteFillRefForwarding = (props, ref) => {
-    const { style, ...other } = props;
-    const actualStyle = (0, react_1.useMemo)(() => {
-        return {
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-            width: '100%',
-            height: '100%',
-            display: 'flex',
-            flexDirection: 'column',
-            ...style,
-        };
-    }, [style]);
-    return (0, jsx_runtime_1.jsx)("div", { ref: ref, style: actualStyle, ...other });
-};
-/**
- * An absolutely positioned <div> element with 100% width, height, and a column flex style
- * @link https://www.remotion.dev/docs/absolute-fill
- */
-exports.AbsoluteFill = (0, react_1.forwardRef)(AbsoluteFillRefForwarding);

package/dist/CanUseRemotionHooks.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-export declare const CanUseRemotionHooks: React.Context<boolean>;
-export declare const CanUseRemotionHooksProvider: React.FC<{
-    children: React.ReactNode;
-}>;

package/dist/CanUseRemotionHooks.js

@@ -1,10 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CanUseRemotionHooksProvider = exports.CanUseRemotionHooks = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-exports.CanUseRemotionHooks = (0, react_1.createContext)(false);
-const CanUseRemotionHooksProvider = ({ children }) => {
-    return ((0, jsx_runtime_1.jsx)(exports.CanUseRemotionHooks.Provider, { value: true, children: children }));
-};
-exports.CanUseRemotionHooksProvider = CanUseRemotionHooksProvider;

package/dist/Clipper.d.ts

@@ -1,7 +0,0 @@
-import type React from 'react';
-export declare const Clipper: React.FC<{
-    width: number;
-    height: number;
-    x: number;
-    y: number;
-}>;

package/dist/Clipper.js

@@ -1,24 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Clipper = void 0;
-const react_1 = require("react");
-const NativeLayers_1 = require("./NativeLayers");
-const Clipper = ({ height, width, x, y }) => {
-    const { setClipRegion } = (0, react_1.useContext)(NativeLayers_1.NativeLayersContext);
-    (0, react_1.useEffect)(() => {
-        setClipRegion((c) => {
-            if (c === 'hide') {
-                throw new Error('Cannot render <Clipper>, because another <Null> is already rendered');
-            }
-            if (c === null) {
-                return { height, width, x, y };
-            }
-            throw new Error('Cannot render <Clipper>, because another component clipping the region was already rendered (most likely <Clipper>)');
-        });
-        return () => {
-            setClipRegion(null);
-        };
-    }, [height, setClipRegion, width, x, y]);
-    return null;
-};
-exports.Clipper = Clipper;

package/dist/Composition.d.ts

@@ -1,23 +0,0 @@
-import type { ComponentType, PropsWithChildren } from 'react';
-import React from 'react';
-declare type LooseComponentType<T> = ComponentType<T> | ((props: T) => React.ReactNode);
-export declare type CompProps<T> = {
-    lazyComponent: () => Promise<{
-        default: LooseComponentType<T>;
-    }>;
-} | {
-    component: LooseComponentType<T>;
-};
-export declare type StillProps<T> = {
-    width: number;
-    height: number;
-    id: string;
-    defaultProps?: T;
-} & CompProps<T>;
-declare type CompositionProps<T> = StillProps<T> & {
-    fps: number;
-    durationInFrames: number;
-};
-export declare const Composition: <T>({ width, height, fps, durationInFrames, id, defaultProps, ...compProps }: CompositionProps<T>) => React.ReactPortal | null;
-export declare const ClipComposition: React.FC<PropsWithChildren>;
-export {};