@remotion/transitions 4.0.84 → 4.0.86

package/clock-wipe.js

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

package/dist/TransitionSeries.js

@@ -1,9 +1,12 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { Children, useMemo } from 'react';
-import { Internals, Sequence, useCurrentFrame, useVideoConfig } from 'remotion';
-import { flattenChildren } from './flatten-children.js';
-import { slide } from './presentations/slide.js';
-import { validateDurationInFrames } from './validate.js';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TransitionSeries = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const flatten_children_js_1 = require("./flatten-children.js");
+const slide_js_1 = require("./presentations/slide.js");
+const validate_js_1 = require("./validate.js");
 // eslint-disable-next-line react/function-component-definition
 const TransitionSeriesTransition = function (
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -12,16 +15,16 @@ _props) {
 };
 const SeriesSequence = ({ children }) => {
     // eslint-disable-next-line react/jsx-no-useless-fragment
-    return _jsx(_Fragment, { children: children });
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
 };
 const TransitionSeriesChildren = ({ children, }) => {
-    const { fps } = useVideoConfig();
-    const frame = useCurrentFrame();
-    const childrenValue = useMemo(() => {
+    const { fps } = (0, remotion_1.useVideoConfig)();
+    const frame = (0, remotion_1.useCurrentFrame)();
+    const childrenValue = (0, react_1.useMemo)(() => {
         let transitionOffsets = 0;
         let startFrame = 0;
-        const flattedChildren = flattenChildren(children);
-        return Children.map(flattedChildren, (child, i) => {
+        const flattedChildren = (0, flatten_children_js_1.flattenChildren)(children);
+        return react_1.Children.map(flattedChildren, (child, i) => {
             var _a, _b, _c, _d, _e, _f, _g, _h, _j;
             const current = child;
             if (typeof current === 'string') {
@@ -62,7 +65,7 @@ const TransitionSeriesChildren = ({ children, }) => {
             }
             const durationInFramesProp = castedChildAgain.props.durationInFrames;
             const { durationInFrames, children: _children, ...passedProps } = castedChildAgain.props;
-            validateDurationInFrames(durationInFramesProp, {
+            (0, validate_js_1.validateDurationInFrames)(durationInFramesProp, {
                 component: `of a <TransitionSeries.Sequence /> component`,
                 allowFloats: true,
             });
@@ -115,34 +118,34 @@ const TransitionSeriesChildren = ({ children, }) => {
                 throw new Error(`The duration of a <TransitionSeries.Sequence /> must not be shorter than the duration of the previous <TransitionSeries.Transition />. The transition is ${prev.props.timing.getDurationInFrames({ fps })} frames long, but the sequence is only ${durationInFramesProp} frames long (${debugInfo})`);
             }
             if (next && prev && nextProgress !== null && prevProgress !== null) {
-                const nextPresentation = (_b = next.props.presentation) !== null && _b !== void 0 ? _b : slide();
-                const prevPresentation = (_c = prev.props.presentation) !== null && _c !== void 0 ? _c : slide();
+                const nextPresentation = (_b = next.props.presentation) !== null && _b !== void 0 ? _b : (0, slide_js_1.slide)();
+                const prevPresentation = (_c = prev.props.presentation) !== null && _c !== void 0 ? _c : (0, slide_js_1.slide)();
                 const UppercaseNextPresentation = nextPresentation.component;
                 const UppercasePrevPresentation = prevPresentation.component;
-                return (_jsx(Sequence, { name: "<TS.Sequence>", from: Math.floor(actualStartFrame), durationInFrames: durationInFramesProp, layout: "none", stack: passedProps.stack, children: _jsx(UppercaseNextPresentation, { passedProps: (_d = nextPresentation.props) !== null && _d !== void 0 ? _d : {}, presentationDirection: "exiting", presentationProgress: nextProgress, children: _jsx(UppercasePrevPresentation, { passedProps: (_e = prevPresentation.props) !== null && _e !== void 0 ? _e : {}, presentationDirection: "entering", presentationProgress: prevProgress, children: _jsx(Sequence, { showInTimeline: false, ...passedProps, children: child }) }) }) }));
+                return ((0, jsx_runtime_1.jsx)(remotion_1.Sequence, { name: "<TS.Sequence>", from: Math.floor(actualStartFrame), durationInFrames: durationInFramesProp, layout: "none", stack: passedProps.stack, children: (0, jsx_runtime_1.jsx)(UppercaseNextPresentation, { passedProps: (_d = nextPresentation.props) !== null && _d !== void 0 ? _d : {}, presentationDirection: "exiting", presentationProgress: nextProgress, children: (0, jsx_runtime_1.jsx)(UppercasePrevPresentation, { passedProps: (_e = prevPresentation.props) !== null && _e !== void 0 ? _e : {}, presentationDirection: "entering", presentationProgress: prevProgress, children: (0, jsx_runtime_1.jsx)(remotion_1.Sequence, { showInTimeline: false, ...passedProps, children: child }) }) }) }));
             }
             if (prevProgress !== null && prev) {
-                const prevPresentation = (_f = prev.props.presentation) !== null && _f !== void 0 ? _f : slide();
+                const prevPresentation = (_f = prev.props.presentation) !== null && _f !== void 0 ? _f : (0, slide_js_1.slide)();
                 const UppercasePrevPresentation = prevPresentation.component;
-                return (_jsx(Sequence, { name: "<TS.Sequence>", from: Math.floor(actualStartFrame), durationInFrames: durationInFramesProp, layout: "none", stack: passedProps.stack, children: _jsx(UppercasePrevPresentation, { passedProps: (_g = prevPresentation.props) !== null && _g !== void 0 ? _g : {}, presentationDirection: "entering", presentationProgress: prevProgress, children: _jsx(Sequence, { showInTimeline: false, ...passedProps, children: child }) }) }));
+                return ((0, jsx_runtime_1.jsx)(remotion_1.Sequence, { name: "<TS.Sequence>", from: Math.floor(actualStartFrame), durationInFrames: durationInFramesProp, layout: "none", stack: passedProps.stack, children: (0, jsx_runtime_1.jsx)(UppercasePrevPresentation, { passedProps: (_g = prevPresentation.props) !== null && _g !== void 0 ? _g : {}, presentationDirection: "entering", presentationProgress: prevProgress, children: (0, jsx_runtime_1.jsx)(remotion_1.Sequence, { showInTimeline: false, ...passedProps, children: child }) }) }));
             }
             if (nextProgress !== null && next) {
-                const nextPresentation = (_h = next.props.presentation) !== null && _h !== void 0 ? _h : slide();
+                const nextPresentation = (_h = next.props.presentation) !== null && _h !== void 0 ? _h : (0, slide_js_1.slide)();
                 const UppercaseNextPresentation = nextPresentation.component;
-                return (_jsx(Sequence, { name: "<TS.Sequence>", from: Math.floor(actualStartFrame), durationInFrames: durationInFramesProp, layout: "none", stack: passedProps.stack, children: _jsx(UppercaseNextPresentation, { passedProps: (_j = nextPresentation.props) !== null && _j !== void 0 ? _j : {}, presentationDirection: "exiting", presentationProgress: nextProgress, children: _jsx(Sequence, { showInTimeline: false, ...passedProps, children: child }) }) }));
+                return ((0, jsx_runtime_1.jsx)(remotion_1.Sequence, { name: "<TS.Sequence>", from: Math.floor(actualStartFrame), durationInFrames: durationInFramesProp, layout: "none", stack: passedProps.stack, children: (0, jsx_runtime_1.jsx)(UppercaseNextPresentation, { passedProps: (_j = nextPresentation.props) !== null && _j !== void 0 ? _j : {}, presentationDirection: "exiting", presentationProgress: nextProgress, children: (0, jsx_runtime_1.jsx)(remotion_1.Sequence, { showInTimeline: false, ...passedProps, children: child }) }) }));
             }
-            return (_jsx(Sequence, { name: "<TS.Sequence>", from: Math.floor(actualStartFrame), durationInFrames: durationInFramesProp, ...passedProps, children: child }));
+            return ((0, jsx_runtime_1.jsx)(remotion_1.Sequence, { name: "<TS.Sequence>", from: Math.floor(actualStartFrame), durationInFrames: durationInFramesProp, ...passedProps, children: child }));
         });
     }, [children, fps, frame]);
     // eslint-disable-next-line react/jsx-no-useless-fragment
-    return _jsx(_Fragment, { children: childrenValue });
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: childrenValue });
 };
 const TransitionSeries = ({ children, name, ...otherProps }) => {
     const displayName = name !== null && name !== void 0 ? name : '<TransitionSeries>';
-    return (_jsx(Sequence, { name: displayName, ...otherProps, children: _jsx(TransitionSeriesChildren, { children: children }) }));
+    return ((0, jsx_runtime_1.jsx)(remotion_1.Sequence, { name: displayName, ...otherProps, children: (0, jsx_runtime_1.jsx)(TransitionSeriesChildren, { children: children }) }));
 };
+exports.TransitionSeries = TransitionSeries;
 TransitionSeries.Sequence = SeriesSequence;
 TransitionSeries.Transition = TransitionSeriesTransition;
-export { TransitionSeries };
-Internals.addSequenceStackTraces(TransitionSeries);
-Internals.addSequenceStackTraces(SeriesSequence);
+remotion_1.Internals.addSequenceStackTraces(TransitionSeries);
+remotion_1.Internals.addSequenceStackTraces(SeriesSequence);

package/dist/{cjs/clock-wipe.js → esm/clock-wipe.mjs}

@@ -1,22 +1,18 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var paths = require('@remotion/paths');
-var shapes = require('@remotion/shapes');
-var react = require('react');
-var remotion = require('remotion');
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { translatePath } from '@remotion/paths';
+import { makePie } from '@remotion/shapes';
+import { useState, useMemo } from 'react';
+import { random, AbsoluteFill } from 'remotion';
 
 const ClockWipePresentation = ({ children, presentationDirection, presentationProgress, passedProps }) => {
     const finishedRadius = Math.sqrt(passedProps.width ** 2 + passedProps.height ** 2) / 2;
-    const { path } = shapes.makePie({
+    const { path } = makePie({
         radius: finishedRadius,
         progress: presentationProgress,
     });
-    const translatedPath = paths.translatePath(path, -(finishedRadius * 2 - passedProps.width) / 2, -(finishedRadius * 2 - passedProps.height) / 2);
-    const [clipId] = react.useState(() => String(remotion.random(null)));
-    const style = react.useMemo(() => {
+    const translatedPath = translatePath(path, -(finishedRadius * 2 - passedProps.width) / 2, -(finishedRadius * 2 - passedProps.height) / 2);
+    const [clipId] = useState(() => String(random(null)));
+    const style = useMemo(() => {
         return {
             width: '100%',
             height: '100%',
@@ -31,7 +27,7 @@ const ClockWipePresentation = ({ children, presentationDirection, presentationPr
         passedProps.innerExitStyle,
         presentationDirection,
     ]);
-    const outerStyle = react.useMemo(() => {
+    const outerStyle = useMemo(() => {
         return presentationDirection === 'entering'
             ? passedProps.outerEnterStyle
             : passedProps.outerExitStyle;
@@ -40,10 +36,10 @@ const ClockWipePresentation = ({ children, presentationDirection, presentationPr
         passedProps.outerExitStyle,
         presentationDirection,
     ]);
-    return (jsxRuntime.jsxs(remotion.AbsoluteFill, { style: outerStyle, children: [jsxRuntime.jsx(remotion.AbsoluteFill, { style: style, children: children }), presentationDirection === 'exiting' ? null : (jsxRuntime.jsx(remotion.AbsoluteFill, { children: jsxRuntime.jsx("svg", { children: jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", { id: clipId, children: jsxRuntime.jsx("path", { d: translatedPath, fill: "black" }) }) }) }) }))] }));
+    return (jsxs(AbsoluteFill, { style: outerStyle, children: [jsx(AbsoluteFill, { style: style, children: children }), presentationDirection === 'exiting' ? null : (jsx(AbsoluteFill, { children: jsx("svg", { children: jsx("defs", { children: jsx("clipPath", { id: clipId, children: jsx("path", { d: translatedPath, fill: "black" }) }) }) }) }))] }));
 };
 const clockWipe = (props) => {
     return { component: ClockWipePresentation, props: props !== null && props !== void 0 ? props : {} };
 };
 
-exports.clockWipe = clockWipe;
+export { clockWipe };

package/dist/{cjs/fade.js → esm/fade.mjs}

@@ -1,14 +1,10 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var remotion = require('remotion');
+import { jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { AbsoluteFill } from 'remotion';
 
 const FadePresentation = ({ children, presentationDirection, presentationProgress, passedProps }) => {
     const isEntering = presentationDirection === 'entering';
-    const style = react.useMemo(() => {
+    const style = useMemo(() => {
         return {
             opacity: isEntering ? presentationProgress : 1,
             ...(presentationDirection === 'entering'
@@ -22,7 +18,7 @@ const FadePresentation = ({ children, presentationDirection, presentationProgres
         presentationDirection,
         presentationProgress,
     ]);
-    return jsxRuntime.jsx(remotion.AbsoluteFill, { style: style, children: children });
+    return jsx(AbsoluteFill, { style: style, children: children });
 };
 const fade = (props) => {
     return {
@@ -31,4 +27,4 @@ const fade = (props) => {
     };
 };
 
-exports.fade = fade;
+export { fade };

package/dist/{cjs/flip.js → esm/flip.mjs}

@@ -1,18 +1,14 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var remotion = require('remotion');
+import { jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { interpolate, AbsoluteFill } from 'remotion';
 
 const Flip = ({ children, presentationDirection, presentationProgress, passedProps: { direction = 'from-left', perspective = 1000, innerEnterStyle, innerExitStyle, outerEnterStyle, outerExitStyle, }, }) => {
-    const style = react.useMemo(() => {
+    const style = useMemo(() => {
         const startRotationEntering = direction === 'from-right' || direction === 'from-top' ? 180 : -180;
         const endRotationEntering = direction === 'from-right' || direction === 'from-top' ? -180 : 180;
         const rotation = presentationDirection === 'entering'
-            ? remotion.interpolate(presentationProgress, [0, 1], [startRotationEntering, 0])
-            : remotion.interpolate(presentationProgress, [0, 1], [0, endRotationEntering]);
+            ? interpolate(presentationProgress, [0, 1], [startRotationEntering, 0])
+            : interpolate(presentationProgress, [0, 1], [0, endRotationEntering]);
         const rotateProperty = direction === 'from-top' || direction === 'from-bottom'
             ? 'rotateX'
             : 'rotateY';
@@ -33,7 +29,7 @@ const Flip = ({ children, presentationDirection, presentationProgress, passedPro
         presentationDirection,
         presentationProgress,
     ]);
-    const outer = react.useMemo(() => {
+    const outer = useMemo(() => {
         return {
             perspective,
             // Make children also their backface hidden
@@ -43,10 +39,10 @@ const Flip = ({ children, presentationDirection, presentationProgress, passedPro
                 : outerExitStyle),
         };
     }, [outerEnterStyle, outerExitStyle, perspective, presentationDirection]);
-    return (jsxRuntime.jsx(remotion.AbsoluteFill, { style: outer, children: jsxRuntime.jsx(remotion.AbsoluteFill, { style: style, children: children }) }));
+    return (jsx(AbsoluteFill, { style: outer, children: jsx(AbsoluteFill, { style: style, children: children }) }));
 };
 const flip = (props) => {
     return { component: Flip, props: props !== null && props !== void 0 ? props : {} };
 };
 
-exports.flip = flip;
+export { flip };

package/dist/{cjs/index.js → esm/index.mjs}

@@ -1,15 +1,7 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var remotion = require('remotion');
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var noReact = require('remotion/no-react');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+import { interpolate, measureSpring, spring, AbsoluteFill, Internals, Sequence, useVideoConfig, useCurrentFrame } from 'remotion';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import React, { useMemo, Children } from 'react';
+import { NoReactInternals } from 'remotion/no-react';
 
 const linearTiming = (options) => {
     return {
@@ -17,7 +9,7 @@ const linearTiming = (options) => {
             return options.durationInFrames;
         },
         getProgress: ({ frame }) => {
-            return remotion.interpolate(frame, [0, options.durationInFrames], [0, 1], {
+            return interpolate(frame, [0, options.durationInFrames], [0, 1], {
                 easing: options.easing,
                 extrapolateLeft: 'clamp',
                 extrapolateRight: 'clamp',
@@ -30,7 +22,7 @@ const springWithInvalidArgumentRejection = (args) => {
     if (args.to || args.from) {
         throw new Error('to / from values are not supported by springWithRoundUpIfThreshold');
     }
-    return remotion.spring(args);
+    return spring(args);
 };
 const springTiming = (options = {}) => {
     return {
@@ -38,7 +30,7 @@ const springTiming = (options = {}) => {
             if (options.durationInFrames) {
                 return options.durationInFrames;
             }
-            return remotion.measureSpring({
+            return measureSpring({
                 config: options.config,
                 threshold: options.durationRestThreshold,
                 fps,
@@ -57,9 +49,9 @@ const springTiming = (options = {}) => {
 };
 
 const flattenChildren = (children) => {
-    const childrenArray = React__default["default"].Children.toArray(children);
+    const childrenArray = React.Children.toArray(children);
     return childrenArray.reduce((flatChildren, child) => {
-        if (child.type === React__default["default"].Fragment) {
+        if (child.type === React.Fragment) {
             return flatChildren.concat(flattenChildren(child.props
                 .children));
         }
@@ -69,7 +61,7 @@ const flattenChildren = (children) => {
 };
 
 const SlidePresentation = ({ children, presentationProgress, presentationDirection, passedProps: { direction = 'from-left', enterStyle, exitStyle }, }) => {
-    const directionStyle = React.useMemo(() => {
+    const directionStyle = useMemo(() => {
         if (presentationDirection === 'exiting') {
             switch (direction) {
                 case 'from-left':
@@ -113,7 +105,7 @@ const SlidePresentation = ({ children, presentationProgress, presentationDirecti
                 throw new Error(`Invalid direction: ${direction}`);
         }
     }, [presentationDirection, presentationProgress, direction]);
-    const style = React.useMemo(() => {
+    const style = useMemo(() => {
         return {
             width: '100%',
             height: '100%',
@@ -123,7 +115,7 @@ const SlidePresentation = ({ children, presentationProgress, presentationDirecti
             ...(presentationDirection === 'entering' ? enterStyle : exitStyle),
         };
     }, [directionStyle, enterStyle, exitStyle, presentationDirection]);
-    return jsxRuntime.jsx(remotion.AbsoluteFill, { style: style, children: children });
+    return jsx(AbsoluteFill, { style: style, children: children });
 };
 const slide = (props) => {
     return {
@@ -133,7 +125,7 @@ const slide = (props) => {
 };
 
 /* eslint-disable prefer-destructuring */
-const validateDurationInFrames = noReact.NoReactInternals.validateDurationInFrames;
+const validateDurationInFrames = NoReactInternals.validateDurationInFrames;
 
 // eslint-disable-next-line react/function-component-definition
 const TransitionSeriesTransition = function (
@@ -143,16 +135,16 @@ _props) {
 };
 const SeriesSequence = ({ children }) => {
     // eslint-disable-next-line react/jsx-no-useless-fragment
-    return jsxRuntime.jsx(jsxRuntime.Fragment, { children: children });
+    return jsx(Fragment, { children: children });
 };
 const TransitionSeriesChildren = ({ children, }) => {
-    const { fps } = remotion.useVideoConfig();
-    const frame = remotion.useCurrentFrame();
-    const childrenValue = React.useMemo(() => {
+    const { fps } = useVideoConfig();
+    const frame = useCurrentFrame();
+    const childrenValue = useMemo(() => {
         let transitionOffsets = 0;
         let startFrame = 0;
         const flattedChildren = flattenChildren(children);
-        return React.Children.map(flattedChildren, (child, i) => {
+        return Children.map(flattedChildren, (child, i) => {
             var _a, _b, _c, _d, _e, _f, _g, _h, _j;
             const current = child;
             if (typeof current === 'string') {
@@ -250,33 +242,31 @@ const TransitionSeriesChildren = ({ children, }) => {
                 const prevPresentation = (_c = prev.props.presentation) !== null && _c !== void 0 ? _c : slide();
                 const UppercaseNextPresentation = nextPresentation.component;
                 const UppercasePrevPresentation = prevPresentation.component;
-                return (jsxRuntime.jsx(remotion.Sequence, { name: "<TS.Sequence>", from: Math.floor(actualStartFrame), durationInFrames: durationInFramesProp, layout: "none", stack: passedProps.stack, children: jsxRuntime.jsx(UppercaseNextPresentation, { passedProps: (_d = nextPresentation.props) !== null && _d !== void 0 ? _d : {}, presentationDirection: "exiting", presentationProgress: nextProgress, children: jsxRuntime.jsx(UppercasePrevPresentation, { passedProps: (_e = prevPresentation.props) !== null && _e !== void 0 ? _e : {}, presentationDirection: "entering", presentationProgress: prevProgress, children: jsxRuntime.jsx(remotion.Sequence, { showInTimeline: false, ...passedProps, children: child }) }) }) }));
+                return (jsx(Sequence, { name: "<TS.Sequence>", from: Math.floor(actualStartFrame), durationInFrames: durationInFramesProp, layout: "none", stack: passedProps.stack, children: jsx(UppercaseNextPresentation, { passedProps: (_d = nextPresentation.props) !== null && _d !== void 0 ? _d : {}, presentationDirection: "exiting", presentationProgress: nextProgress, children: jsx(UppercasePrevPresentation, { passedProps: (_e = prevPresentation.props) !== null && _e !== void 0 ? _e : {}, presentationDirection: "entering", presentationProgress: prevProgress, children: jsx(Sequence, { showInTimeline: false, ...passedProps, children: child }) }) }) }));
             }
             if (prevProgress !== null && prev) {
                 const prevPresentation = (_f = prev.props.presentation) !== null && _f !== void 0 ? _f : slide();
                 const UppercasePrevPresentation = prevPresentation.component;
-                return (jsxRuntime.jsx(remotion.Sequence, { name: "<TS.Sequence>", from: Math.floor(actualStartFrame), durationInFrames: durationInFramesProp, layout: "none", stack: passedProps.stack, children: jsxRuntime.jsx(UppercasePrevPresentation, { passedProps: (_g = prevPresentation.props) !== null && _g !== void 0 ? _g : {}, presentationDirection: "entering", presentationProgress: prevProgress, children: jsxRuntime.jsx(remotion.Sequence, { showInTimeline: false, ...passedProps, children: child }) }) }));
+                return (jsx(Sequence, { name: "<TS.Sequence>", from: Math.floor(actualStartFrame), durationInFrames: durationInFramesProp, layout: "none", stack: passedProps.stack, children: jsx(UppercasePrevPresentation, { passedProps: (_g = prevPresentation.props) !== null && _g !== void 0 ? _g : {}, presentationDirection: "entering", presentationProgress: prevProgress, children: jsx(Sequence, { showInTimeline: false, ...passedProps, children: child }) }) }));
             }
             if (nextProgress !== null && next) {
                 const nextPresentation = (_h = next.props.presentation) !== null && _h !== void 0 ? _h : slide();
                 const UppercaseNextPresentation = nextPresentation.component;
-                return (jsxRuntime.jsx(remotion.Sequence, { name: "<TS.Sequence>", from: Math.floor(actualStartFrame), durationInFrames: durationInFramesProp, layout: "none", stack: passedProps.stack, children: jsxRuntime.jsx(UppercaseNextPresentation, { passedProps: (_j = nextPresentation.props) !== null && _j !== void 0 ? _j : {}, presentationDirection: "exiting", presentationProgress: nextProgress, children: jsxRuntime.jsx(remotion.Sequence, { showInTimeline: false, ...passedProps, children: child }) }) }));
+                return (jsx(Sequence, { name: "<TS.Sequence>", from: Math.floor(actualStartFrame), durationInFrames: durationInFramesProp, layout: "none", stack: passedProps.stack, children: jsx(UppercaseNextPresentation, { passedProps: (_j = nextPresentation.props) !== null && _j !== void 0 ? _j : {}, presentationDirection: "exiting", presentationProgress: nextProgress, children: jsx(Sequence, { showInTimeline: false, ...passedProps, children: child }) }) }));
             }
-            return (jsxRuntime.jsx(remotion.Sequence, { name: "<TS.Sequence>", from: Math.floor(actualStartFrame), durationInFrames: durationInFramesProp, ...passedProps, children: child }));
+            return (jsx(Sequence, { name: "<TS.Sequence>", from: Math.floor(actualStartFrame), durationInFrames: durationInFramesProp, ...passedProps, children: child }));
         });
     }, [children, fps, frame]);
     // eslint-disable-next-line react/jsx-no-useless-fragment
-    return jsxRuntime.jsx(jsxRuntime.Fragment, { children: childrenValue });
+    return jsx(Fragment, { children: childrenValue });
 };
 const TransitionSeries = ({ children, name, ...otherProps }) => {
     const displayName = name !== null && name !== void 0 ? name : '<TransitionSeries>';
-    return (jsxRuntime.jsx(remotion.Sequence, { name: displayName, ...otherProps, children: jsxRuntime.jsx(TransitionSeriesChildren, { children: children }) }));
+    return (jsx(Sequence, { name: displayName, ...otherProps, children: jsx(TransitionSeriesChildren, { children: children }) }));
 };
 TransitionSeries.Sequence = SeriesSequence;
 TransitionSeries.Transition = TransitionSeriesTransition;
-remotion.Internals.addSequenceStackTraces(TransitionSeries);
-remotion.Internals.addSequenceStackTraces(SeriesSequence);
+Internals.addSequenceStackTraces(TransitionSeries);
+Internals.addSequenceStackTraces(SeriesSequence);
 
-exports.TransitionSeries = TransitionSeries;
-exports.linearTiming = linearTiming;
-exports.springTiming = springTiming;
+export { TransitionSeries, linearTiming, springTiming };

package/dist/{cjs/slide.js → esm/slide.mjs}

@@ -1,13 +1,9 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var remotion = require('remotion');
+import { jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { AbsoluteFill } from 'remotion';
 
 const SlidePresentation = ({ children, presentationProgress, presentationDirection, passedProps: { direction = 'from-left', enterStyle, exitStyle }, }) => {
-    const directionStyle = react.useMemo(() => {
+    const directionStyle = useMemo(() => {
         if (presentationDirection === 'exiting') {
             switch (direction) {
                 case 'from-left':
@@ -51,7 +47,7 @@ const SlidePresentation = ({ children, presentationProgress, presentationDirecti
                 throw new Error(`Invalid direction: ${direction}`);
         }
     }, [presentationDirection, presentationProgress, direction]);
-    const style = react.useMemo(() => {
+    const style = useMemo(() => {
         return {
             width: '100%',
             height: '100%',
@@ -61,7 +57,7 @@ const SlidePresentation = ({ children, presentationProgress, presentationDirecti
             ...(presentationDirection === 'entering' ? enterStyle : exitStyle),
         };
     }, [directionStyle, enterStyle, exitStyle, presentationDirection]);
-    return jsxRuntime.jsx(remotion.AbsoluteFill, { style: style, children: children });
+    return jsx(AbsoluteFill, { style: style, children: children });
 };
 const slide = (props) => {
     return {
@@ -70,4 +66,4 @@ const slide = (props) => {
     };
 };
 
-exports.slide = slide;
+export { slide };

package/dist/{cjs/wipe.js → esm/wipe.mjs}

@@ -1,10 +1,6 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var remotion = require('remotion');
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useMemo } from 'react';
+import { random, AbsoluteFill } from 'remotion';
 
 const makePathIn = (progress, direction) => {
     switch (direction) {
@@ -123,14 +119,14 @@ Z`;
     }
 };
 const WipePresentation = ({ children, presentationProgress, presentationDirection, passedProps: { direction = 'from-left', innerEnterStyle, innerExitStyle, outerEnterStyle, outerExitStyle, }, }) => {
-    const [clipId] = react.useState(() => String(remotion.random(null)));
+    const [clipId] = useState(() => String(random(null)));
     const progressInDirection = presentationDirection === 'entering'
         ? presentationProgress
         : 1 - presentationProgress;
     const path = presentationDirection === 'entering'
         ? makePathIn(progressInDirection, direction)
         : makePathOut(progressInDirection, direction);
-    const style = react.useMemo(() => {
+    const style = useMemo(() => {
         return {
             width: '100%',
             height: '100%',
@@ -142,19 +138,19 @@ const WipePresentation = ({ children, presentationProgress, presentationDirectio
                 : innerExitStyle),
         };
     }, [clipId, innerEnterStyle, innerExitStyle, presentationDirection]);
-    const outerStyle = react.useMemo(() => {
+    const outerStyle = useMemo(() => {
         return presentationDirection === 'entering'
             ? outerEnterStyle
             : outerExitStyle;
     }, [outerEnterStyle, outerExitStyle, presentationDirection]);
-    const svgStyle = react.useMemo(() => {
+    const svgStyle = useMemo(() => {
         return {
             width: '100%',
             height: '100%',
             pointerEvents: 'none',
         };
     }, []);
-    return (jsxRuntime.jsxs(remotion.AbsoluteFill, { style: outerStyle, children: [jsxRuntime.jsx(remotion.AbsoluteFill, { style: style, children: children }), jsxRuntime.jsx(remotion.AbsoluteFill, { children: jsxRuntime.jsx("svg", { viewBox: "0 0 1 1", style: svgStyle, children: jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", { id: clipId, clipPathUnits: "objectBoundingBox", children: jsxRuntime.jsx("path", { d: path, fill: "black" }) }) }) }) })] }));
+    return (jsxs(AbsoluteFill, { style: outerStyle, children: [jsx(AbsoluteFill, { style: style, children: children }), jsx(AbsoluteFill, { children: jsx("svg", { viewBox: "0 0 1 1", style: svgStyle, children: jsx("defs", { children: jsx("clipPath", { id: clipId, clipPathUnits: "objectBoundingBox", children: jsx("path", { d: path, fill: "black" }) }) }) }) })] }));
 };
 const wipe = (props) => {
     return {
@@ -163,4 +159,4 @@ const wipe = (props) => {
     };
 };
 
-exports.wipe = wipe;
+export { wipe };

package/dist/flatten-children.js

@@ -1,12 +1,19 @@
-import React from 'react';
-export const flattenChildren = (children) => {
-    const childrenArray = React.Children.toArray(children);
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.flattenChildren = void 0;
+const react_1 = __importDefault(require("react"));
+const flattenChildren = (children) => {
+    const childrenArray = react_1.default.Children.toArray(children);
     return childrenArray.reduce((flatChildren, child) => {
-        if (child.type === React.Fragment) {
-            return flatChildren.concat(flattenChildren(child.props
+        if (child.type === react_1.default.Fragment) {
+            return flatChildren.concat((0, exports.flattenChildren)(child.props
                 .children));
         }
         flatChildren.push(child);
         return flatChildren;
     }, []);
 };
+exports.flattenChildren = flattenChildren;

package/dist/index.js

@@ -1,5 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TransitionSeries = exports.springTiming = exports.linearTiming = void 0;
 // Timings
-export { linearTiming } from './timings/linear-timing.js';
-export { springTiming } from './timings/spring-timing.js';
+var linear_timing_js_1 = require("./timings/linear-timing.js");
+Object.defineProperty(exports, "linearTiming", { enumerable: true, get: function () { return linear_timing_js_1.linearTiming; } });
+var spring_timing_js_1 = require("./timings/spring-timing.js");
+Object.defineProperty(exports, "springTiming", { enumerable: true, get: function () { return spring_timing_js_1.springTiming; } });
 // Component
-export { TransitionSeries } from './TransitionSeries.js';
+var TransitionSeries_js_1 = require("./TransitionSeries.js");
+Object.defineProperty(exports, "TransitionSeries", { enumerable: true, get: function () { return TransitionSeries_js_1.TransitionSeries; } });

package/dist/presentations/clock-wipe.js

@@ -1,17 +1,20 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { translatePath } from '@remotion/paths';
-import { makePie } from '@remotion/shapes';
-import { useMemo, useState } from 'react';
-import { AbsoluteFill, random } from 'remotion';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.clockWipe = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const paths_1 = require("@remotion/paths");
+const shapes_1 = require("@remotion/shapes");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
 const ClockWipePresentation = ({ children, presentationDirection, presentationProgress, passedProps }) => {
     const finishedRadius = Math.sqrt(passedProps.width ** 2 + passedProps.height ** 2) / 2;
-    const { path } = makePie({
+    const { path } = (0, shapes_1.makePie)({
         radius: finishedRadius,
         progress: presentationProgress,
     });
-    const translatedPath = translatePath(path, -(finishedRadius * 2 - passedProps.width) / 2, -(finishedRadius * 2 - passedProps.height) / 2);
-    const [clipId] = useState(() => String(random(null)));
-    const style = useMemo(() => {
+    const translatedPath = (0, paths_1.translatePath)(path, -(finishedRadius * 2 - passedProps.width) / 2, -(finishedRadius * 2 - passedProps.height) / 2);
+    const [clipId] = (0, react_1.useState)(() => String((0, remotion_1.random)(null)));
+    const style = (0, react_1.useMemo)(() => {
         return {
             width: '100%',
             height: '100%',
@@ -26,7 +29,7 @@ const ClockWipePresentation = ({ children, presentationDirection, presentationPr
         passedProps.innerExitStyle,
         presentationDirection,
     ]);
-    const outerStyle = useMemo(() => {
+    const outerStyle = (0, react_1.useMemo)(() => {
         return presentationDirection === 'entering'
             ? passedProps.outerEnterStyle
             : passedProps.outerExitStyle;
@@ -35,8 +38,9 @@ const ClockWipePresentation = ({ children, presentationDirection, presentationPr
         passedProps.outerExitStyle,
         presentationDirection,
     ]);
-    return (_jsxs(AbsoluteFill, { style: outerStyle, children: [_jsx(AbsoluteFill, { style: style, children: children }), presentationDirection === 'exiting' ? null : (_jsx(AbsoluteFill, { children: _jsx("svg", { children: _jsx("defs", { children: _jsx("clipPath", { id: clipId, children: _jsx("path", { d: translatedPath, fill: "black" }) }) }) }) }))] }));
+    return ((0, jsx_runtime_1.jsxs)(remotion_1.AbsoluteFill, { style: outerStyle, children: [(0, jsx_runtime_1.jsx)(remotion_1.AbsoluteFill, { style: style, children: children }), presentationDirection === 'exiting' ? null : ((0, jsx_runtime_1.jsx)(remotion_1.AbsoluteFill, { children: (0, jsx_runtime_1.jsx)("svg", { children: (0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsx)("clipPath", { id: clipId, children: (0, jsx_runtime_1.jsx)("path", { d: translatedPath, fill: "black" }) }) }) }) }))] }));
 };
-export const clockWipe = (props) => {
+const clockWipe = (props) => {
     return { component: ClockWipePresentation, props: props !== null && props !== void 0 ? props : {} };
 };
+exports.clockWipe = clockWipe;

package/dist/presentations/fade.js

@@ -1,9 +1,12 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useMemo } from 'react';
-import { AbsoluteFill } from 'remotion';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fade = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
 const FadePresentation = ({ children, presentationDirection, presentationProgress, passedProps }) => {
     const isEntering = presentationDirection === 'entering';
-    const style = useMemo(() => {
+    const style = (0, react_1.useMemo)(() => {
         return {
             opacity: isEntering ? presentationProgress : 1,
             ...(presentationDirection === 'entering'
@@ -17,11 +20,12 @@ const FadePresentation = ({ children, presentationDirection, presentationProgres
         presentationDirection,
         presentationProgress,
     ]);
-    return _jsx(AbsoluteFill, { style: style, children: children });
+    return (0, jsx_runtime_1.jsx)(remotion_1.AbsoluteFill, { style: style, children: children });
 };
-export const fade = (props) => {
+const fade = (props) => {
     return {
         component: FadePresentation,
         props: props !== null && props !== void 0 ? props : {},
     };
 };
+exports.fade = fade;

package/dist/presentations/flip.js

@@ -1,13 +1,16 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useMemo } from 'react';
-import { AbsoluteFill, interpolate } from 'remotion';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.flip = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
 const Flip = ({ children, presentationDirection, presentationProgress, passedProps: { direction = 'from-left', perspective = 1000, innerEnterStyle, innerExitStyle, outerEnterStyle, outerExitStyle, }, }) => {
-    const style = useMemo(() => {
+    const style = (0, react_1.useMemo)(() => {
         const startRotationEntering = direction === 'from-right' || direction === 'from-top' ? 180 : -180;
         const endRotationEntering = direction === 'from-right' || direction === 'from-top' ? -180 : 180;
         const rotation = presentationDirection === 'entering'
-            ? interpolate(presentationProgress, [0, 1], [startRotationEntering, 0])
-            : interpolate(presentationProgress, [0, 1], [0, endRotationEntering]);
+            ? (0, remotion_1.interpolate)(presentationProgress, [0, 1], [startRotationEntering, 0])
+            : (0, remotion_1.interpolate)(presentationProgress, [0, 1], [0, endRotationEntering]);
         const rotateProperty = direction === 'from-top' || direction === 'from-bottom'
             ? 'rotateX'
             : 'rotateY';
@@ -28,7 +31,7 @@ const Flip = ({ children, presentationDirection, presentationProgress, passedPro
         presentationDirection,
         presentationProgress,
     ]);
-    const outer = useMemo(() => {
+    const outer = (0, react_1.useMemo)(() => {
         return {
             perspective,
             // Make children also their backface hidden
@@ -38,8 +41,9 @@ const Flip = ({ children, presentationDirection, presentationProgress, passedPro
                 : outerExitStyle),
         };
     }, [outerEnterStyle, outerExitStyle, perspective, presentationDirection]);
-    return (_jsx(AbsoluteFill, { style: outer, children: _jsx(AbsoluteFill, { style: style, children: children }) }));
+    return ((0, jsx_runtime_1.jsx)(remotion_1.AbsoluteFill, { style: outer, children: (0, jsx_runtime_1.jsx)(remotion_1.AbsoluteFill, { style: style, children: children }) }));
 };
-export const flip = (props) => {
+const flip = (props) => {
     return { component: Flip, props: props !== null && props !== void 0 ? props : {} };
 };
+exports.flip = flip;

package/dist/presentations/slide.js

@@ -1,8 +1,11 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useMemo } from 'react';
-import { AbsoluteFill } from 'remotion';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.slide = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
 const SlidePresentation = ({ children, presentationProgress, presentationDirection, passedProps: { direction = 'from-left', enterStyle, exitStyle }, }) => {
-    const directionStyle = useMemo(() => {
+    const directionStyle = (0, react_1.useMemo)(() => {
         if (presentationDirection === 'exiting') {
             switch (direction) {
                 case 'from-left':
@@ -46,7 +49,7 @@ const SlidePresentation = ({ children, presentationProgress, presentationDirecti
                 throw new Error(`Invalid direction: ${direction}`);
         }
     }, [presentationDirection, presentationProgress, direction]);
-    const style = useMemo(() => {
+    const style = (0, react_1.useMemo)(() => {
         return {
             width: '100%',
             height: '100%',
@@ -56,11 +59,12 @@ const SlidePresentation = ({ children, presentationProgress, presentationDirecti
             ...(presentationDirection === 'entering' ? enterStyle : exitStyle),
         };
     }, [directionStyle, enterStyle, exitStyle, presentationDirection]);
-    return _jsx(AbsoluteFill, { style: style, children: children });
+    return (0, jsx_runtime_1.jsx)(remotion_1.AbsoluteFill, { style: style, children: children });
 };
-export const slide = (props) => {
+const slide = (props) => {
     return {
         component: SlidePresentation,
         props: props !== null && props !== void 0 ? props : {},
     };
 };
+exports.slide = slide;

package/dist/presentations/wipe.js

@@ -1,6 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo, useState } from 'react';
-import { AbsoluteFill, random } from 'remotion';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.wipe = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
 const makePathIn = (progress, direction) => {
     switch (direction) {
         case 'from-left':
@@ -118,14 +121,14 @@ Z`;
     }
 };
 const WipePresentation = ({ children, presentationProgress, presentationDirection, passedProps: { direction = 'from-left', innerEnterStyle, innerExitStyle, outerEnterStyle, outerExitStyle, }, }) => {
-    const [clipId] = useState(() => String(random(null)));
+    const [clipId] = (0, react_1.useState)(() => String((0, remotion_1.random)(null)));
     const progressInDirection = presentationDirection === 'entering'
         ? presentationProgress
         : 1 - presentationProgress;
     const path = presentationDirection === 'entering'
         ? makePathIn(progressInDirection, direction)
         : makePathOut(progressInDirection, direction);
-    const style = useMemo(() => {
+    const style = (0, react_1.useMemo)(() => {
         return {
             width: '100%',
             height: '100%',
@@ -137,23 +140,24 @@ const WipePresentation = ({ children, presentationProgress, presentationDirectio
                 : innerExitStyle),
         };
     }, [clipId, innerEnterStyle, innerExitStyle, presentationDirection]);
-    const outerStyle = useMemo(() => {
+    const outerStyle = (0, react_1.useMemo)(() => {
         return presentationDirection === 'entering'
             ? outerEnterStyle
             : outerExitStyle;
     }, [outerEnterStyle, outerExitStyle, presentationDirection]);
-    const svgStyle = useMemo(() => {
+    const svgStyle = (0, react_1.useMemo)(() => {
         return {
             width: '100%',
             height: '100%',
             pointerEvents: 'none',
         };
     }, []);
-    return (_jsxs(AbsoluteFill, { style: outerStyle, children: [_jsx(AbsoluteFill, { style: style, children: children }), _jsx(AbsoluteFill, { children: _jsx("svg", { viewBox: "0 0 1 1", style: svgStyle, children: _jsx("defs", { children: _jsx("clipPath", { id: clipId, clipPathUnits: "objectBoundingBox", children: _jsx("path", { d: path, fill: "black" }) }) }) }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(remotion_1.AbsoluteFill, { style: outerStyle, children: [(0, jsx_runtime_1.jsx)(remotion_1.AbsoluteFill, { style: style, children: children }), (0, jsx_runtime_1.jsx)(remotion_1.AbsoluteFill, { children: (0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 1 1", style: svgStyle, children: (0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsx)("clipPath", { id: clipId, clipPathUnits: "objectBoundingBox", children: (0, jsx_runtime_1.jsx)("path", { d: path, fill: "black" }) }) }) }) })] }));
 };
-export const wipe = (props) => {
+const wipe = (props) => {
     return {
         component: WipePresentation,
         props: props !== null && props !== void 0 ? props : {},
     };
 };
+exports.wipe = wipe;

package/dist/timings/linear-timing.js

@@ -1,11 +1,14 @@
-import { interpolate } from 'remotion';
-export const linearTiming = (options) => {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.linearTiming = void 0;
+const remotion_1 = require("remotion");
+const linearTiming = (options) => {
     return {
         getDurationInFrames: () => {
             return options.durationInFrames;
         },
         getProgress: ({ frame }) => {
-            return interpolate(frame, [0, options.durationInFrames], [0, 1], {
+            return (0, remotion_1.interpolate)(frame, [0, options.durationInFrames], [0, 1], {
                 easing: options.easing,
                 extrapolateLeft: 'clamp',
                 extrapolateRight: 'clamp',
@@ -13,3 +16,4 @@ export const linearTiming = (options) => {
         },
     };
 };
+exports.linearTiming = linearTiming;

package/dist/timings/spring-timing.js

@@ -1,17 +1,20 @@
-import { measureSpring, spring } from 'remotion';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.springTiming = void 0;
+const remotion_1 = require("remotion");
 const springWithInvalidArgumentRejection = (args) => {
     if (args.to || args.from) {
         throw new Error('to / from values are not supported by springWithRoundUpIfThreshold');
     }
-    return spring(args);
+    return (0, remotion_1.spring)(args);
 };
-export const springTiming = (options = {}) => {
+const springTiming = (options = {}) => {
     return {
         getDurationInFrames: ({ fps }) => {
             if (options.durationInFrames) {
                 return options.durationInFrames;
             }
-            return measureSpring({
+            return (0, remotion_1.measureSpring)({
                 config: options.config,
                 threshold: options.durationRestThreshold,
                 fps,
@@ -28,3 +31,4 @@ export const springTiming = (options = {}) => {
         },
     };
 };
+exports.springTiming = springTiming;

package/dist/types.js

@@ -1 +1,2 @@
-export {};
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/validate.js

@@ -1,3 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.validateDurationInFrames = void 0;
 /* eslint-disable prefer-destructuring */
-import { NoReactInternals } from 'remotion/no-react';
-export const validateDurationInFrames = NoReactInternals.validateDurationInFrames;
+const no_react_1 = require("remotion/no-react");
+exports.validateDurationInFrames = no_react_1.NoReactInternals.validateDurationInFrames;

package/fade.js

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

package/flip.js

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

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@remotion/transitions",
-  "version": "4.0.84",
+  "version": "4.0.86",
   "description": "Transition presets for Remotion",
   "sideEffects": false,
-  "main": "dist/cjs/index.js",
-  "module": "dist/index.js",
+  "main": "dist/esm/index.mjs",
+  "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
   "author": "Jonny Burger",
   "contributors": [],
-  "license": "MIT",
+  "license": "UNLICENSED",
   "repository": {
     "url": "https://github.com/remotion-dev/remotion"
   },
@@ -16,9 +16,9 @@
     "url": "https://github.com/remotion-dev/remotion/issues"
   },
   "dependencies": {
-    "@remotion/paths": "4.0.84",
-    "@remotion/shapes": "4.0.84",
-    "remotion": "4.0.84"
+    "@remotion/paths": "4.0.86",
+    "remotion": "4.0.86",
+    "@remotion/shapes": "4.0.86"
   },
   "devDependencies": {
     "@jonny/eslint-config": "3.0.276",
@@ -33,8 +33,8 @@
     "@vitejs/plugin-react": "^2.0.0",
     "rollup": "^2.70.1",
     "@rollup/plugin-typescript": "^8.2.0",
-    "remotion": "4.0.84",
-    "@remotion/test-utils": "4.0.84"
+    "@remotion/test-utils": "4.0.86",
+    "remotion": "4.0.86"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
@@ -49,39 +49,39 @@
   },
   "exports": {
     ".": {
-      "module": "./dist/index.js",
-      "import": "./dist/index.js",
+      "module": "./dist/esm/index.mjs",
+      "import": "./dist/esm/index.mjs",
       "types": "./dist/index.d.ts",
-      "require": "./dist/cjs/index.js"
+      "require": "./dist/index.js"
     },
     "./fade": {
-      "module": "./dist/presentations/fade.js",
-      "import": "./dist/presentations/fade.js",
-      "require": "./dist/cjs/presentations/fade.js",
+      "module": "./dist/esm/fade.mjs",
+      "import": "./dist/esm/fade.mjs",
+      "require": "./dist/presentations/fade.js",
       "types": "./dist/presentations/fade.d.ts"
     },
     "./slide": {
-      "module": "./dist/presentations/slide.js",
-      "import": "./dist/presentations/slide.js",
-      "require": "./dist/cjs/presentations/slide.js",
+      "module": "./dist/esm/slide.mjs",
+      "import": "./dist/esm/slide.mjs",
+      "require": "./dist/presentations/slide.js",
       "types": "./dist/presentations/slide.d.ts"
     },
     "./wipe": {
-      "module": "./dist/presentations/wipe.js",
-      "import": "./dist/presentations/wipe.js",
-      "require": "./dist/cjs/presentations/wipe.js",
+      "module": "./dist/esm/wipe.mjs",
+      "import": "./dist/esm/wipe.mjs",
+      "require": "./dist/presentations/wipe.js",
       "types": "./dist/presentations/wipe.d.ts"
     },
     "./flip": {
-      "module": "./dist/presentations/flip.js",
-      "import": "./dist/presentations/flip.js",
-      "require": "./dist/cjs/presentations/flip.js",
+      "module": "./dist/esm/flip.mjs",
+      "import": "./dist/esm/flip.mjs",
+      "require": "./dist/presentations/flip.js",
       "types": "./dist/presentations/flip.d.ts"
     },
     "./clock-wipe": {
-      "module": "./dist/presentations/clock-wipe.js",
-      "import": "./dist/presentations/clock-wipe.js",
-      "require": "./dist/cjs/presentations/clock-wipe.js",
+      "module": "./dist/esm/clock-wipe.mjs",
+      "import": "./dist/esm/clock-wipe.mjs",
+      "require": "./dist/presentations/clock-wipe.js",
       "types": "./dist/presentations/clock-wipe.d.ts"
     },
     "./package.json": "./package.json"
@@ -109,6 +109,6 @@
     "lint": "eslint src --ext ts,tsx",
     "formatting": "prettier src --check",
     "watch": "tsc -w",
-    "build": "rollup --config rollup.config.js && tsc -d"
+    "build": "tsc -d && rollup --config rollup.config.js"
   }
 }

package/rollup.config.js

@@ -8,15 +8,15 @@ export default [
 		input: 'src/index.ts',
 		output: [
 			{
-				file: 'dist/cjs/index.js',
-				format: 'cjs',
+				file: 'dist/esm/index.mjs',
+				format: 'es',
 				sourcemap: false,
 			},
 		],
 		external: ['remotion', 'remotion/no-react', 'react', 'react/jsx-runtime'],
 		plugins: [
 			typescript({
-				tsconfig: 'tsconfig-cjs.json',
+				tsconfig: 'tsconfig.json',
 				sourceMap: false,
 				outputToFilesystem: true,
 			}),
@@ -27,8 +27,8 @@ export default [
 			input: `src/presentations/${p}.tsx`,
 			output: [
 				{
-					file: `dist/cjs/${p}.js`,
-					format: 'cjs',
+					file: `dist/esm/${p}.mjs`,
+					format: 'es',
 					sourcemap: false,
 				},
 			],
@@ -42,7 +42,7 @@ export default [
 			],
 			plugins: [
 				typescript({
-					tsconfig: 'tsconfig-cjs.json',
+					tsconfig: 'tsconfig.json',
 					sourceMap: false,
 					outputToFilesystem: true,
 				}),

package/slide.js

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

package/wipe.js

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