@remotion/transitions 4.0.137 → 4.0.138

package/dist/esm/index.mjs

@@ -1,278 +1,349 @@
-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) => {
+// src/presentations/slide.tsx
+import {useMemo} from "react";
+import {AbsoluteFill} from "remotion";
+import {
+jsx
+} from "react/jsx-runtime";
+var epsilon = 0.01;
+var SlidePresentation = ({
+  children,
+  presentationProgress,
+  presentationDirection,
+  passedProps: { direction = "from-left", enterStyle, exitStyle }
+}) => {
+  const directionStyle = useMemo(() => {
+    const presentationProgressWithEpsilonCorrection = presentationProgress === 1 ? presentationProgress * 100 : presentationProgress * 100 - epsilon;
+    if (presentationDirection === "exiting") {
+      switch (direction) {
+        case "from-left":
+          return {
+            transform: `translateX(${presentationProgressWithEpsilonCorrection}%)`
+          };
+        case "from-right":
+          return {
+            transform: `translateX(-${presentationProgress * 100}%)`
+          };
+        case "from-top":
+          return {
+            transform: `translateY(${presentationProgressWithEpsilonCorrection}%)`
+          };
+        case "from-bottom":
+          return {
+            transform: `translateY(-${presentationProgress * 100}%)`
+          };
+        default:
+          throw new Error(`Invalid direction: ${direction}`);
+      }
+    }
+    switch (direction) {
+      case "from-left":
+        return {
+          transform: `translateX(${-100 + presentationProgress * 100}%)`
+        };
+      case "from-right":
+        return {
+          transform: `translateX(${100 - presentationProgressWithEpsilonCorrection}%)`
+        };
+      case "from-top":
+        return {
+          transform: `translateY(${-100 + presentationProgress * 100}%)`
+        };
+      case "from-bottom":
+        return {
+          transform: `translateY(${100 - presentationProgressWithEpsilonCorrection}%)`
+        };
+      default:
+        throw new Error(`Invalid direction: ${direction}`);
+    }
+  }, [presentationDirection, presentationProgress, direction]);
+  const style = useMemo(() => {
     return {
-        getDurationInFrames: () => {
-            return options.durationInFrames;
-        },
-        getProgress: ({ frame }) => {
-            return interpolate(frame, [0, options.durationInFrames], [0, 1], {
-                easing: options.easing,
-                extrapolateLeft: 'clamp',
-                extrapolateRight: 'clamp',
-            });
-        },
+      width: "100%",
+      height: "100%",
+      justifyContent: "center",
+      alignItems: "center",
+      ...directionStyle,
+      ...presentationDirection === "entering" ? enterStyle : exitStyle
     };
+  }, [directionStyle, enterStyle, exitStyle, presentationDirection]);
+  return jsx(AbsoluteFill, {
+    style,
+    children
+  }, undefined, false, undefined, this);
+};
+var slide = (props) => {
+  return {
+    component: SlidePresentation,
+    props: props ?? {}
+  };
 };
 
-const springWithInvalidArgumentRejection = (args) => {
-    if (args.to || args.from) {
-        throw new Error('to / from values are not supported by springWithRoundUpIfThreshold');
+// src/timings/linear-timing.ts
+import {interpolate} from "remotion";
+var linearTiming = (options) => {
+  return {
+    getDurationInFrames: () => {
+      return options.durationInFrames;
+    },
+    getProgress: ({ frame }) => {
+      return interpolate(frame, [0, options.durationInFrames], [0, 1], {
+        easing: options.easing,
+        extrapolateLeft: "clamp",
+        extrapolateRight: "clamp"
+      });
     }
-    return spring(args);
-};
-const springTiming = (options = {}) => {
-    return {
-        getDurationInFrames: ({ fps }) => {
-            if (options.durationInFrames) {
-                return options.durationInFrames;
-            }
-            return measureSpring({
-                config: options.config,
-                threshold: options.durationRestThreshold,
-                fps,
-            });
-        },
-        getProgress: ({ fps, frame }) => {
-            return springWithInvalidArgumentRejection({
-                fps,
-                frame,
-                config: options.config,
-                durationInFrames: options.durationInFrames,
-                durationRestThreshold: options.durationRestThreshold,
-            });
-        },
-    };
+  };
 };
 
-const flattenChildren = (children) => {
-    const childrenArray = React.Children.toArray(children);
-    return childrenArray.reduce((flatChildren, child) => {
-        if (child.type === React.Fragment) {
-            return flatChildren.concat(flattenChildren(child.props
-                .children));
-        }
-        flatChildren.push(child);
-        return flatChildren;
-    }, []);
+// src/timings/spring-timing.ts
+import {measureSpring, spring} from "remotion";
+var springWithInvalidArgumentRejection = (args) => {
+  if (args.to || args.from) {
+    throw new Error("to / from values are not supported by springWithRoundUpIfThreshold");
+  }
+  return spring(args);
 };
-
-const epsilon = 0.01;
-const SlidePresentation = ({ children, presentationProgress, presentationDirection, passedProps: { direction = 'from-left', enterStyle, exitStyle }, }) => {
-    const directionStyle = useMemo(() => {
-        // Overlay the two slides barely to avoid a white line between them
-        // Remove the correction once the presentation progress is 1
-        const presentationProgressWithEpsilonCorrection = presentationProgress === 1
-            ? presentationProgress * 100
-            : presentationProgress * 100 - epsilon;
-        if (presentationDirection === 'exiting') {
-            switch (direction) {
-                case 'from-left':
-                    return {
-                        transform: `translateX(${presentationProgressWithEpsilonCorrection}%)`,
-                    };
-                case 'from-right':
-                    return {
-                        transform: `translateX(-${presentationProgress * 100}%)`,
-                    };
-                case 'from-top':
-                    return {
-                        transform: `translateY(${presentationProgressWithEpsilonCorrection}%)`,
-                    };
-                case 'from-bottom':
-                    return {
-                        transform: `translateY(-${presentationProgress * 100}%)`,
-                    };
-                default:
-                    throw new Error(`Invalid direction: ${direction}`);
-            }
-        }
-        switch (direction) {
-            case 'from-left':
-                return {
-                    transform: `translateX(${-100 + presentationProgress * 100}%)`,
-                };
-            case 'from-right':
-                return {
-                    transform: `translateX(${100 - presentationProgressWithEpsilonCorrection}%)`,
-                };
-            case 'from-top':
-                return {
-                    transform: `translateY(${-100 + presentationProgress * 100}%)`,
-                };
-            case 'from-bottom':
-                return {
-                    transform: `translateY(${100 - presentationProgressWithEpsilonCorrection}%)`,
-                };
-            default:
-                throw new Error(`Invalid direction: ${direction}`);
-        }
-    }, [presentationDirection, presentationProgress, direction]);
-    const style = useMemo(() => {
-        return {
-            width: '100%',
-            height: '100%',
-            justifyContent: 'center',
-            alignItems: 'center',
-            ...directionStyle,
-            ...(presentationDirection === 'entering' ? enterStyle : exitStyle),
-        };
-    }, [directionStyle, enterStyle, exitStyle, presentationDirection]);
-    return jsx(AbsoluteFill, { style: style, children: children });
+var springTiming = (options = {}) => {
+  return {
+    getDurationInFrames: ({ fps }) => {
+      if (options.durationInFrames) {
+        return options.durationInFrames;
+      }
+      return measureSpring({
+        config: options.config,
+        threshold: options.durationRestThreshold,
+        fps
+      });
+    },
+    getProgress: ({ fps, frame }) => {
+      return springWithInvalidArgumentRejection({
+        fps,
+        frame,
+        config: options.config,
+        durationInFrames: options.durationInFrames,
+        durationRestThreshold: options.durationRestThreshold
+      });
+    }
+  };
 };
-const slide = (props) => {
-    return {
-        component: SlidePresentation,
-        props: props !== null && props !== void 0 ? props : {},
-    };
+
+// src/TransitionSeries.tsx
+import {Children, useMemo as useMemo2} from "react";
+import {Internals, Sequence, useCurrentFrame, useVideoConfig} from "remotion";
+
+// src/flatten-children.ts
+import React2 from "react";
+var flattenChildren = (children) => {
+  const childrenArray = React2.Children.toArray(children);
+  return childrenArray.reduce((flatChildren, child) => {
+    if (child.type === React2.Fragment) {
+      return flatChildren.concat(flattenChildren(child.props.children));
+    }
+    flatChildren.push(child);
+    return flatChildren;
+  }, []);
 };
 
-/* eslint-disable prefer-destructuring */
-const validateDurationInFrames = NoReactInternals.validateDurationInFrames;
+// src/validate.ts
+import {NoReactInternals} from "remotion/no-react";
+var validateDurationInFrames = NoReactInternals.validateDurationInFrames;
 
-// eslint-disable-next-line react/function-component-definition
-const TransitionSeriesTransition = function (
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-_props) {
-    return null;
+// src/TransitionSeries.tsx
+import {
+jsx as jsx2,
+Fragment
+} from "react/jsx-runtime";
+var TransitionSeriesTransition = function(_props) {
+  return null;
 };
-const SeriesSequence = ({ children }) => {
-    // eslint-disable-next-line react/jsx-no-useless-fragment
-    return jsx(Fragment, { children: children });
+var SeriesSequence = ({ children }) => {
+  return jsx2(Fragment, {
+    children
+  }, undefined, false, undefined, this);
 };
-const TransitionSeriesChildren = ({ children, }) => {
-    const { fps } = useVideoConfig();
-    const frame = useCurrentFrame();
-    const childrenValue = useMemo(() => {
-        let transitionOffsets = 0;
-        let startFrame = 0;
-        const flattedChildren = flattenChildren(children);
-        return Children.map(flattedChildren, (child, i) => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-            const current = child;
-            if (typeof current === 'string') {
-                // Don't throw if it's just some accidential whitespace
-                if (current.trim() === '') {
-                    return null;
-                }
-                throw new TypeError(`The <TransitionSeries /> component only accepts a list of <TransitionSeries.Sequence /> components as its children, but you passed a string "${current}"`);
-            }
-            const hasPrev = flattedChildren[i - 1];
-            const nextPrev = flattedChildren[i + 1];
-            const prev = typeof hasPrev === 'string' || typeof hasPrev === 'undefined'
-                ? null
-                : hasPrev.type === TransitionSeriesTransition
-                    ? hasPrev
-                    : null;
-            const next = typeof nextPrev === 'string' || typeof nextPrev === 'undefined'
-                ? null
-                : nextPrev.type === TransitionSeriesTransition
-                    ? nextPrev
-                    : null;
-            const prevIsTransition = typeof hasPrev === 'string' || typeof hasPrev === 'undefined'
-                ? false
-                : hasPrev.type === TransitionSeriesTransition;
-            if (current.type === TransitionSeriesTransition) {
-                if (prevIsTransition) {
-                    throw new TypeError(`A <TransitionSeries.Transition /> component must not be followed by another <TransitionSeries.Transition /> component (nth children = ${i - 1} and ${i})`);
-                }
-                return null;
-            }
-            if (current.type !== SeriesSequence) {
-                throw new TypeError(`The <TransitionSeries /> component only accepts a list of <TransitionSeries.Sequence /> and <TransitionSeries.Transition /> components as its children, but got ${current} instead`);
-            }
-            const castedChildAgain = current;
-            const debugInfo = `index = ${i}, duration = ${castedChildAgain.props.durationInFrames}`;
-            if (!(castedChildAgain === null || castedChildAgain === void 0 ? void 0 : castedChildAgain.props.children)) {
-                throw new TypeError(`A <TransitionSeries.Sequence /> component (${debugInfo}) was detected to not have any children. Delete it to fix this error.`);
-            }
-            const durationInFramesProp = castedChildAgain.props.durationInFrames;
-            const { durationInFrames, children: _children, ...passedProps } = castedChildAgain.props;
-            validateDurationInFrames(durationInFramesProp, {
-                component: `of a <TransitionSeries.Sequence /> component`,
-                allowFloats: true,
-            });
-            const offset = (_a = castedChildAgain.props.offset) !== null && _a !== void 0 ? _a : 0;
-            if (Number.isNaN(offset)) {
-                throw new TypeError(`The "offset" property of a <TransitionSeries.Sequence /> must not be NaN, but got NaN (${debugInfo}).`);
-            }
-            if (!Number.isFinite(offset)) {
-                throw new TypeError(`The "offset" property of a <TransitionSeries.Sequence /> must be finite, but got ${offset} (${debugInfo}).`);
-            }
-            if (offset % 1 !== 0) {
-                throw new TypeError(`The "offset" property of a <TransitionSeries.Sequence /> must be finite, but got ${offset} (${debugInfo}).`);
-            }
-            const currentStartFrame = startFrame + offset;
-            let duration = 0;
-            if (prev) {
-                duration = prev.props.timing.getDurationInFrames({
-                    fps,
-                });
-                transitionOffsets -= duration;
-            }
-            let actualStartFrame = currentStartFrame + transitionOffsets;
-            startFrame += durationInFramesProp + offset;
-            // Handle the case where the first item is a transition
-            if (actualStartFrame < 0) {
-                startFrame -= actualStartFrame;
-                actualStartFrame = 0;
-            }
-            const nextProgress = next
-                ? next.props.timing.getProgress({
-                    frame: frame -
-                        actualStartFrame -
-                        durationInFrames +
-                        next.props.timing.getDurationInFrames({ fps }),
-                    fps,
-                })
-                : null;
-            const prevProgress = prev
-                ? prev.props.timing.getProgress({
-                    frame: frame - actualStartFrame,
-                    fps,
-                })
-                : null;
-            if (next &&
-                durationInFramesProp < next.props.timing.getDurationInFrames({ fps })) {
-                throw new Error(`The duration of a <TransitionSeries.Sequence /> must not be shorter than the duration of the next <TransitionSeries.Transition />. The transition is ${next.props.timing.getDurationInFrames({ fps })} frames long, but the sequence is only ${durationInFramesProp} frames long (${debugInfo})`);
-            }
-            if (prev &&
-                durationInFramesProp < prev.props.timing.getDurationInFrames({ fps })) {
-                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 UppercaseNextPresentation = nextPresentation.component;
-                const UppercasePrevPresentation = prevPresentation.component;
-                return (jsx(Sequence, { name: passedProps.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 (jsx(Sequence, { name: passedProps.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 (jsx(Sequence, { name: passedProps.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 (jsx(Sequence, { name: passedProps.name || '<TS.Sequence>', from: Math.floor(actualStartFrame), durationInFrames: durationInFramesProp, ...passedProps, children: child }));
+var TransitionSeriesChildren = ({
+  children
+}) => {
+  const { fps } = useVideoConfig();
+  const frame = useCurrentFrame();
+  const childrenValue = useMemo2(() => {
+    let transitionOffsets = 0;
+    let startFrame = 0;
+    const flattedChildren = flattenChildren(children);
+    return Children.map(flattedChildren, (child, i) => {
+      const current = child;
+      if (typeof current === "string") {
+        if (current.trim() === "") {
+          return null;
+        }
+        throw new TypeError(`The <TransitionSeries /> component only accepts a list of <TransitionSeries.Sequence /> components as its children, but you passed a string "${current}"`);
+      }
+      const hasPrev = flattedChildren[i - 1];
+      const nextPrev = flattedChildren[i + 1];
+      const prev = typeof hasPrev === "string" || typeof hasPrev === "undefined" ? null : hasPrev.type === TransitionSeriesTransition ? hasPrev : null;
+      const next = typeof nextPrev === "string" || typeof nextPrev === "undefined" ? null : nextPrev.type === TransitionSeriesTransition ? nextPrev : null;
+      const prevIsTransition = typeof hasPrev === "string" || typeof hasPrev === "undefined" ? false : hasPrev.type === TransitionSeriesTransition;
+      if (current.type === TransitionSeriesTransition) {
+        if (prevIsTransition) {
+          throw new TypeError(`A <TransitionSeries.Transition /> component must not be followed by another <TransitionSeries.Transition /> component (nth children = ${i - 1} and ${i})`);
+        }
+        return null;
+      }
+      if (current.type !== SeriesSequence) {
+        throw new TypeError(`The <TransitionSeries /> component only accepts a list of <TransitionSeries.Sequence /> and <TransitionSeries.Transition /> components as its children, but got ${current} instead`);
+      }
+      const castedChildAgain = current;
+      const debugInfo = `index = ${i}, duration = ${castedChildAgain.props.durationInFrames}`;
+      if (!castedChildAgain?.props.children) {
+        throw new TypeError(`A <TransitionSeries.Sequence /> component (${debugInfo}) was detected to not have any children. Delete it to fix this error.`);
+      }
+      const durationInFramesProp = castedChildAgain.props.durationInFrames;
+      const {
+        durationInFrames,
+        children: _children,
+        ...passedProps
+      } = castedChildAgain.props;
+      validateDurationInFrames(durationInFramesProp, {
+        component: `of a <TransitionSeries.Sequence /> component`,
+        allowFloats: true
+      });
+      const offset = castedChildAgain.props.offset ?? 0;
+      if (Number.isNaN(offset)) {
+        throw new TypeError(`The "offset" property of a <TransitionSeries.Sequence /> must not be NaN, but got NaN (${debugInfo}).`);
+      }
+      if (!Number.isFinite(offset)) {
+        throw new TypeError(`The "offset" property of a <TransitionSeries.Sequence /> must be finite, but got ${offset} (${debugInfo}).`);
+      }
+      if (offset % 1 !== 0) {
+        throw new TypeError(`The "offset" property of a <TransitionSeries.Sequence /> must be finite, but got ${offset} (${debugInfo}).`);
+      }
+      const currentStartFrame = startFrame + offset;
+      let duration = 0;
+      if (prev) {
+        duration = prev.props.timing.getDurationInFrames({
+          fps
         });
-    }, [children, fps, frame]);
-    // eslint-disable-next-line react/jsx-no-useless-fragment
-    return jsx(Fragment, { children: childrenValue });
+        transitionOffsets -= duration;
+      }
+      let actualStartFrame = currentStartFrame + transitionOffsets;
+      startFrame += durationInFramesProp + offset;
+      if (actualStartFrame < 0) {
+        startFrame -= actualStartFrame;
+        actualStartFrame = 0;
+      }
+      const nextProgress = next ? next.props.timing.getProgress({
+        frame: frame - actualStartFrame - durationInFrames + next.props.timing.getDurationInFrames({ fps }),
+        fps
+      }) : null;
+      const prevProgress = prev ? prev.props.timing.getProgress({
+        frame: frame - actualStartFrame,
+        fps
+      }) : null;
+      if (next && durationInFramesProp < next.props.timing.getDurationInFrames({ fps })) {
+        throw new Error(`The duration of a <TransitionSeries.Sequence /> must not be shorter than the duration of the next <TransitionSeries.Transition />. The transition is ${next.props.timing.getDurationInFrames({ fps })} frames long, but the sequence is only ${durationInFramesProp} frames long (${debugInfo})`);
+      }
+      if (prev && durationInFramesProp < prev.props.timing.getDurationInFrames({ fps })) {
+        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 = next.props.presentation ?? slide();
+        const prevPresentation = prev.props.presentation ?? slide();
+        const UppercaseNextPresentation = nextPresentation.component;
+        const UppercasePrevPresentation = prevPresentation.component;
+        return jsx2(Sequence, {
+          name: passedProps.name || "<TS.Sequence>",
+          from: Math.floor(actualStartFrame),
+          durationInFrames: durationInFramesProp,
+          layout: "none",
+          stack: passedProps.stack,
+          children: jsx2(UppercaseNextPresentation, {
+            passedProps: nextPresentation.props ?? {},
+            presentationDirection: "exiting",
+            presentationProgress: nextProgress,
+            children: jsx2(UppercasePrevPresentation, {
+              passedProps: prevPresentation.props ?? {},
+              presentationDirection: "entering",
+              presentationProgress: prevProgress,
+              children: jsx2(Sequence, {
+                showInTimeline: false,
+                ...passedProps,
+                children: child
+              }, undefined, false, undefined, this)
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this)
+        }, undefined, false, undefined, this);
+      }
+      if (prevProgress !== null && prev) {
+        const prevPresentation = prev.props.presentation ?? slide();
+        const UppercasePrevPresentation = prevPresentation.component;
+        return jsx2(Sequence, {
+          name: passedProps.name || "<TS.Sequence>",
+          from: Math.floor(actualStartFrame),
+          durationInFrames: durationInFramesProp,
+          layout: "none",
+          stack: passedProps.stack,
+          children: jsx2(UppercasePrevPresentation, {
+            passedProps: prevPresentation.props ?? {},
+            presentationDirection: "entering",
+            presentationProgress: prevProgress,
+            children: jsx2(Sequence, {
+              showInTimeline: false,
+              ...passedProps,
+              children: child
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this)
+        }, undefined, false, undefined, this);
+      }
+      if (nextProgress !== null && next) {
+        const nextPresentation = next.props.presentation ?? slide();
+        const UppercaseNextPresentation = nextPresentation.component;
+        return jsx2(Sequence, {
+          name: passedProps.name || "<TS.Sequence>",
+          from: Math.floor(actualStartFrame),
+          durationInFrames: durationInFramesProp,
+          layout: "none",
+          stack: passedProps.stack,
+          children: jsx2(UppercaseNextPresentation, {
+            passedProps: nextPresentation.props ?? {},
+            presentationDirection: "exiting",
+            presentationProgress: nextProgress,
+            children: jsx2(Sequence, {
+              showInTimeline: false,
+              ...passedProps,
+              children: child
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this)
+        }, undefined, false, undefined, this);
+      }
+      return jsx2(Sequence, {
+        name: passedProps.name || "<TS.Sequence>",
+        from: Math.floor(actualStartFrame),
+        durationInFrames: durationInFramesProp,
+        ...passedProps,
+        children: child
+      }, undefined, false, undefined, this);
+    });
+  }, [children, fps, frame]);
+  return jsx2(Fragment, {
+    children: childrenValue
+  }, undefined, false, undefined, this);
 };
-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 }) }));
+var TransitionSeries = ({ children, name, ...otherProps }) => {
+  const displayName = name ?? "<TransitionSeries>";
+  return jsx2(Sequence, {
+    name: displayName,
+    ...otherProps,
+    children: jsx2(TransitionSeriesChildren, {
+      children
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
 };
 TransitionSeries.Sequence = SeriesSequence;
 TransitionSeries.Transition = TransitionSeriesTransition;
 Internals.addSequenceStackTraces(TransitionSeries);
 Internals.addSequenceStackTraces(SeriesSequence);
-
-export { TransitionSeries, linearTiming, springTiming };
+export {
+  springTiming,
+  linearTiming,
+  TransitionSeries
+};