remotion 3.3.45 → 3.3.51

package/dist/esm/interpolate-colors.js

@@ -0,0 +1,397 @@
+/**
+ * Copied from:
+ * https://github.com/software-mansion/react-native-reanimated/blob/master/src/reanimated2/Colors.ts
+ */
+/* eslint no-bitwise: 0 */
+import { interpolate } from './interpolate.js';
+// var INTEGER = '[-+]?\\d+';
+const NUMBER = '[-+]?\\d*\\.?\\d+';
+const PERCENTAGE = NUMBER + '%';
+function call(...args) {
+    return '\\(\\s*(' + args.join(')\\s*,\\s*(') + ')\\s*\\)';
+}
+function getMatchers() {
+    const cachedMatchers = {
+        rgb: undefined,
+        rgba: undefined,
+        hsl: undefined,
+        hsla: undefined,
+        hex3: undefined,
+        hex4: undefined,
+        hex5: undefined,
+        hex6: undefined,
+        hex8: undefined,
+    };
+    if (cachedMatchers.rgb === undefined) {
+        cachedMatchers.rgb = new RegExp('rgb' + call(NUMBER, NUMBER, NUMBER));
+        cachedMatchers.rgba = new RegExp('rgba' + call(NUMBER, NUMBER, NUMBER, NUMBER));
+        cachedMatchers.hsl = new RegExp('hsl' + call(NUMBER, PERCENTAGE, PERCENTAGE));
+        cachedMatchers.hsla = new RegExp('hsla' + call(NUMBER, PERCENTAGE, PERCENTAGE, NUMBER));
+        cachedMatchers.hex3 = /^#([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/;
+        cachedMatchers.hex4 =
+            /^#([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/;
+        cachedMatchers.hex6 = /^#([0-9a-fA-F]{6})$/;
+        cachedMatchers.hex8 = /^#([0-9a-fA-F]{8})$/;
+    }
+    return cachedMatchers;
+}
+function hue2rgb(p, q, t) {
+    if (t < 0) {
+        t += 1;
+    }
+    if (t > 1) {
+        t -= 1;
+    }
+    if (t < 1 / 6) {
+        return p + (q - p) * 6 * t;
+    }
+    if (t < 1 / 2) {
+        return q;
+    }
+    if (t < 2 / 3) {
+        return p + (q - p) * (2 / 3 - t) * 6;
+    }
+    return p;
+}
+function hslToRgb(h, s, l) {
+    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+    const p = 2 * l - q;
+    const r = hue2rgb(p, q, h + 1 / 3);
+    const g = hue2rgb(p, q, h);
+    const b = hue2rgb(p, q, h - 1 / 3);
+    return ((Math.round(r * 255) << 24) |
+        (Math.round(g * 255) << 16) |
+        (Math.round(b * 255) << 8));
+}
+function parse255(str) {
+    const int = Number.parseInt(str, 10);
+    if (int < 0) {
+        return 0;
+    }
+    if (int > 255) {
+        return 255;
+    }
+    return int;
+}
+function parse360(str) {
+    const int = Number.parseFloat(str);
+    return (((int % 360) + 360) % 360) / 360;
+}
+function parse1(str) {
+    const num = Number.parseFloat(str);
+    if (num < 0) {
+        return 0;
+    }
+    if (num > 1) {
+        return 255;
+    }
+    return Math.round(num * 255);
+}
+function parsePercentage(str) {
+    // parseFloat conveniently ignores the final %
+    const int = Number.parseFloat(str);
+    if (int < 0) {
+        return 0;
+    }
+    if (int > 100) {
+        return 1;
+    }
+    return int / 100;
+}
+const names = {
+    transparent: 0x00000000,
+    // http://www.w3.org/TR/css3-color/#svg-color
+    aliceblue: 0xf0f8ffff,
+    antiquewhite: 0xfaebd7ff,
+    aqua: 0x00ffffff,
+    aquamarine: 0x7fffd4ff,
+    azure: 0xf0ffffff,
+    beige: 0xf5f5dcff,
+    bisque: 0xffe4c4ff,
+    black: 0x000000ff,
+    blanchedalmond: 0xffebcdff,
+    blue: 0x0000ffff,
+    blueviolet: 0x8a2be2ff,
+    brown: 0xa52a2aff,
+    burlywood: 0xdeb887ff,
+    burntsienna: 0xea7e5dff,
+    cadetblue: 0x5f9ea0ff,
+    chartreuse: 0x7fff00ff,
+    chocolate: 0xd2691eff,
+    coral: 0xff7f50ff,
+    cornflowerblue: 0x6495edff,
+    cornsilk: 0xfff8dcff,
+    crimson: 0xdc143cff,
+    cyan: 0x00ffffff,
+    darkblue: 0x00008bff,
+    darkcyan: 0x008b8bff,
+    darkgoldenrod: 0xb8860bff,
+    darkgray: 0xa9a9a9ff,
+    darkgreen: 0x006400ff,
+    darkgrey: 0xa9a9a9ff,
+    darkkhaki: 0xbdb76bff,
+    darkmagenta: 0x8b008bff,
+    darkolivegreen: 0x556b2fff,
+    darkorange: 0xff8c00ff,
+    darkorchid: 0x9932ccff,
+    darkred: 0x8b0000ff,
+    darksalmon: 0xe9967aff,
+    darkseagreen: 0x8fbc8fff,
+    darkslateblue: 0x483d8bff,
+    darkslategray: 0x2f4f4fff,
+    darkslategrey: 0x2f4f4fff,
+    darkturquoise: 0x00ced1ff,
+    darkviolet: 0x9400d3ff,
+    deeppink: 0xff1493ff,
+    deepskyblue: 0x00bfffff,
+    dimgray: 0x696969ff,
+    dimgrey: 0x696969ff,
+    dodgerblue: 0x1e90ffff,
+    firebrick: 0xb22222ff,
+    floralwhite: 0xfffaf0ff,
+    forestgreen: 0x228b22ff,
+    fuchsia: 0xff00ffff,
+    gainsboro: 0xdcdcdcff,
+    ghostwhite: 0xf8f8ffff,
+    gold: 0xffd700ff,
+    goldenrod: 0xdaa520ff,
+    gray: 0x808080ff,
+    green: 0x008000ff,
+    greenyellow: 0xadff2fff,
+    grey: 0x808080ff,
+    honeydew: 0xf0fff0ff,
+    hotpink: 0xff69b4ff,
+    indianred: 0xcd5c5cff,
+    indigo: 0x4b0082ff,
+    ivory: 0xfffff0ff,
+    khaki: 0xf0e68cff,
+    lavender: 0xe6e6faff,
+    lavenderblush: 0xfff0f5ff,
+    lawngreen: 0x7cfc00ff,
+    lemonchiffon: 0xfffacdff,
+    lightblue: 0xadd8e6ff,
+    lightcoral: 0xf08080ff,
+    lightcyan: 0xe0ffffff,
+    lightgoldenrodyellow: 0xfafad2ff,
+    lightgray: 0xd3d3d3ff,
+    lightgreen: 0x90ee90ff,
+    lightgrey: 0xd3d3d3ff,
+    lightpink: 0xffb6c1ff,
+    lightsalmon: 0xffa07aff,
+    lightseagreen: 0x20b2aaff,
+    lightskyblue: 0x87cefaff,
+    lightslategray: 0x778899ff,
+    lightslategrey: 0x778899ff,
+    lightsteelblue: 0xb0c4deff,
+    lightyellow: 0xffffe0ff,
+    lime: 0x00ff00ff,
+    limegreen: 0x32cd32ff,
+    linen: 0xfaf0e6ff,
+    magenta: 0xff00ffff,
+    maroon: 0x800000ff,
+    mediumaquamarine: 0x66cdaaff,
+    mediumblue: 0x0000cdff,
+    mediumorchid: 0xba55d3ff,
+    mediumpurple: 0x9370dbff,
+    mediumseagreen: 0x3cb371ff,
+    mediumslateblue: 0x7b68eeff,
+    mediumspringgreen: 0x00fa9aff,
+    mediumturquoise: 0x48d1ccff,
+    mediumvioletred: 0xc71585ff,
+    midnightblue: 0x191970ff,
+    mintcream: 0xf5fffaff,
+    mistyrose: 0xffe4e1ff,
+    moccasin: 0xffe4b5ff,
+    navajowhite: 0xffdeadff,
+    navy: 0x000080ff,
+    oldlace: 0xfdf5e6ff,
+    olive: 0x808000ff,
+    olivedrab: 0x6b8e23ff,
+    orange: 0xffa500ff,
+    orangered: 0xff4500ff,
+    orchid: 0xda70d6ff,
+    palegoldenrod: 0xeee8aaff,
+    palegreen: 0x98fb98ff,
+    paleturquoise: 0xafeeeeff,
+    palevioletred: 0xdb7093ff,
+    papayawhip: 0xffefd5ff,
+    peachpuff: 0xffdab9ff,
+    peru: 0xcd853fff,
+    pink: 0xffc0cbff,
+    plum: 0xdda0ddff,
+    powderblue: 0xb0e0e6ff,
+    purple: 0x800080ff,
+    rebeccapurple: 0x663399ff,
+    red: 0xff0000ff,
+    rosybrown: 0xbc8f8fff,
+    royalblue: 0x4169e1ff,
+    saddlebrown: 0x8b4513ff,
+    salmon: 0xfa8072ff,
+    sandybrown: 0xf4a460ff,
+    seagreen: 0x2e8b57ff,
+    seashell: 0xfff5eeff,
+    sienna: 0xa0522dff,
+    silver: 0xc0c0c0ff,
+    skyblue: 0x87ceebff,
+    slateblue: 0x6a5acdff,
+    slategray: 0x708090ff,
+    slategrey: 0x708090ff,
+    snow: 0xfffafaff,
+    springgreen: 0x00ff7fff,
+    steelblue: 0x4682b4ff,
+    tan: 0xd2b48cff,
+    teal: 0x008080ff,
+    thistle: 0xd8bfd8ff,
+    tomato: 0xff6347ff,
+    turquoise: 0x40e0d0ff,
+    violet: 0xee82eeff,
+    wheat: 0xf5deb3ff,
+    white: 0xffffffff,
+    whitesmoke: 0xf5f5f5ff,
+    yellow: 0xffff00ff,
+    yellowgreen: 0x9acd32ff,
+};
+function normalizeColor(color) {
+    const matchers = getMatchers();
+    let match;
+    // Ordered based on occurrences on Facebook codebase
+    if (matchers.hex6) {
+        if ((match = matchers.hex6.exec(color))) {
+            return Number.parseInt(match[1] + 'ff', 16) >>> 0;
+        }
+    }
+    if (names[color] !== undefined) {
+        return names[color];
+    }
+    if (matchers.rgb) {
+        if ((match = matchers.rgb.exec(color))) {
+            return (
+            // b
+            ((parse255(match[1]) << 24) | // r
+                (parse255(match[2]) << 16) | // g
+                (parse255(match[3]) << 8) |
+                0x000000ff) >>> // a
+                0);
+        }
+    }
+    if (matchers.rgba) {
+        if ((match = matchers.rgba.exec(color))) {
+            return (
+            // b
+            ((parse255(match[1]) << 24) | // r
+                (parse255(match[2]) << 16) | // g
+                (parse255(match[3]) << 8) |
+                parse1(match[4])) >>> // a
+                0);
+        }
+    }
+    if (matchers.hex3) {
+        if ((match = matchers.hex3.exec(color))) {
+            return (Number.parseInt(match[1] +
+                match[1] + // r
+                match[2] +
+                match[2] + // g
+                match[3] +
+                match[3] + // b
+                'ff', // a
+            16) >>> 0);
+        }
+    }
+    // https://drafts.csswg.org/css-color-4/#hex-notation
+    if (matchers.hex8) {
+        if ((match = matchers.hex8.exec(color))) {
+            return Number.parseInt(match[1], 16) >>> 0;
+        }
+    }
+    if (matchers.hex4) {
+        if ((match = matchers.hex4.exec(color))) {
+            return (Number.parseInt(match[1] +
+                match[1] + // r
+                match[2] +
+                match[2] + // g
+                match[3] +
+                match[3] + // b
+                match[4] +
+                match[4], // a
+            16) >>> 0);
+        }
+    }
+    if (matchers.hsl) {
+        if ((match = matchers.hsl.exec(color))) {
+            return ((hslToRgb(parse360(match[1]), // h
+            parsePercentage(match[2]), // s
+            parsePercentage(match[3]) // l
+            ) |
+                0x000000ff) >>> // a
+                0);
+        }
+    }
+    if (matchers.hsla) {
+        if ((match = matchers.hsla.exec(color))) {
+            return ((hslToRgb(parse360(match[1]), // h
+            parsePercentage(match[2]), // s
+            parsePercentage(match[3]) // l
+            ) |
+                parse1(match[4])) >>> // a
+                0);
+        }
+    }
+    throw new Error(`invalid color string ${color} provided`);
+}
+const opacity = (c) => {
+    return ((c >> 24) & 255) / 255;
+};
+const red = (c) => {
+    return (c >> 16) & 255;
+};
+const green = (c) => {
+    return (c >> 8) & 255;
+};
+const blue = (c) => {
+    return c & 255;
+};
+const rgbaColor = (r, g, b, alpha) => {
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+};
+function processColorInitially(color) {
+    let normalizedColor = normalizeColor(color);
+    normalizedColor = ((normalizedColor << 24) | (normalizedColor >>> 8)) >>> 0; // argb
+    return normalizedColor;
+}
+function processColor(color) {
+    const normalizedColor = processColorInitially(color);
+    return normalizedColor;
+}
+const interpolateColorsRGB = (value, inputRange, colors) => {
+    const [r, g, b, a] = [red, green, blue, opacity].map((f) => {
+        const unrounded = interpolate(value, inputRange, colors.map((c) => f(c)), {
+            extrapolateLeft: 'clamp',
+            extrapolateRight: 'clamp',
+        });
+        if (f === opacity) {
+            return Number(unrounded.toFixed(3));
+        }
+        return Math.round(unrounded);
+    });
+    return rgbaColor(r, g, b, a);
+};
+export const interpolateColors = (input, inputRange, outputRange) => {
+    if (typeof input === 'undefined') {
+        throw new TypeError('input can not be undefined');
+    }
+    if (typeof inputRange === 'undefined') {
+        throw new TypeError('inputRange can not be undefined');
+    }
+    if (typeof outputRange === 'undefined') {
+        throw new TypeError('outputRange can not be undefined');
+    }
+    if (inputRange.length !== outputRange.length) {
+        throw new TypeError('inputRange (' +
+            inputRange.length +
+            ' values provided) and outputRange (' +
+            outputRange.length +
+            ' values provided) must have the same length');
+    }
+    const processedOutputRange = outputRange.map((c) => processColor(c));
+    return interpolateColorsRGB(input, inputRange, processedOutputRange);
+};

package/dist/esm/interpolate.d.ts

@@ -0,0 +1,18 @@
+declare type ExtrapolateType = 'extend' | 'identity' | 'clamp';
+/**
+ * Map a value from an input range to an output range.
+ * @link https://www.remotion.dev/docs/interpolate
+ * @param {!number} input value to interpolate
+ * @param {!number[]} inputRange range of values that you expect the input to assume.
+ * @param {!number[]} outputRange range of output values that you want the input to map to.
+ * @param {?object} options
+ * @param {?Function} options.easing easing function which allows you to customize the input, for example to apply a certain easing function. By default, the input is left unmodified, resulting in a pure linear interpolation {@link https://www.remotion.dev/docs/easing}
+ * @param {string=} [options.extrapolateLeft="extend"] What should happen if the input value is outside left the input range, default: "extend" {@link https://www.remotion.dev/docs/interpolate#extrapolateleft}
+ * @param {string=} [options.extrapolateRight="extend"] Same as extrapolateLeft, except for values outside right the input range {@link https://www.remotion.dev/docs/interpolate#extrapolateright}
+ */
+export declare function interpolate(input: number, inputRange: readonly number[], outputRange: readonly number[], options?: {
+    easing?: (input: number) => number;
+    extrapolateLeft?: ExtrapolateType;
+    extrapolateRight?: ExtrapolateType;
+}): number;
+export {};

package/dist/esm/interpolate.js

@@ -0,0 +1,119 @@
+// Taken from https://github.com/facebook/react-native/blob/0b9ea60b4fee8cacc36e7160e31b91fc114dbc0d/Libraries/Animated/src/nodes/AnimatedInterpolation.js
+function interpolateFunction(input, inputRange, outputRange, options) {
+    const { extrapolateLeft, extrapolateRight, easing } = options;
+    let result = input;
+    const [inputMin, inputMax] = inputRange;
+    const [outputMin, outputMax] = outputRange;
+    if (result < inputMin) {
+        if (extrapolateLeft === 'identity') {
+            return result;
+        }
+        if (extrapolateLeft === 'clamp') {
+            result = inputMin;
+        }
+        else if (extrapolateLeft === 'extend') {
+            // noop
+        }
+    }
+    if (result > inputMax) {
+        if (extrapolateRight === 'identity') {
+            return result;
+        }
+        if (extrapolateRight === 'clamp') {
+            result = inputMax;
+        }
+        else if (extrapolateRight === 'extend') {
+            // noop
+        }
+    }
+    if (outputMin === outputMax) {
+        return outputMin;
+    }
+    // Input Range
+    result = (result - inputMin) / (inputMax - inputMin);
+    // Easing
+    result = easing(result);
+    // Output Range
+    result = result * (outputMax - outputMin) + outputMin;
+    return result;
+}
+function findRange(input, inputRange) {
+    let i;
+    for (i = 1; i < inputRange.length - 1; ++i) {
+        if (inputRange[i] >= input) {
+            break;
+        }
+    }
+    return i - 1;
+}
+function checkValidInputRange(arr) {
+    for (let i = 1; i < arr.length; ++i) {
+        if (!(arr[i] > arr[i - 1])) {
+            throw new Error(`inputRange must be strictly monotonically non-decreasing but got [${arr.join(',')}]`);
+        }
+    }
+}
+function checkInfiniteRange(name, arr) {
+    if (arr.length < 2) {
+        throw new Error(name + ' must have at least 2 elements');
+    }
+    for (const index in arr) {
+        if (typeof arr[index] !== 'number') {
+            throw new Error(`${name} must contain only numbers`);
+        }
+        if (arr[index] === -Infinity || arr[index] === Infinity) {
+            throw new Error(`${name} must contain only finite numbers, but got [${arr.join(',')}]`);
+        }
+    }
+}
+/**
+ * Map a value from an input range to an output range.
+ * @link https://www.remotion.dev/docs/interpolate
+ * @param {!number} input value to interpolate
+ * @param {!number[]} inputRange range of values that you expect the input to assume.
+ * @param {!number[]} outputRange range of output values that you want the input to map to.
+ * @param {?object} options
+ * @param {?Function} options.easing easing function which allows you to customize the input, for example to apply a certain easing function. By default, the input is left unmodified, resulting in a pure linear interpolation {@link https://www.remotion.dev/docs/easing}
+ * @param {string=} [options.extrapolateLeft="extend"] What should happen if the input value is outside left the input range, default: "extend" {@link https://www.remotion.dev/docs/interpolate#extrapolateleft}
+ * @param {string=} [options.extrapolateRight="extend"] Same as extrapolateLeft, except for values outside right the input range {@link https://www.remotion.dev/docs/interpolate#extrapolateright}
+ */
+export function interpolate(input, inputRange, outputRange, options) {
+    var _a;
+    if (typeof input === 'undefined') {
+        throw new Error('input can not be undefined');
+    }
+    if (typeof inputRange === 'undefined') {
+        throw new Error('inputRange can not be undefined');
+    }
+    if (typeof outputRange === 'undefined') {
+        throw new Error('outputRange can not be undefined');
+    }
+    if (inputRange.length !== outputRange.length) {
+        throw new Error('inputRange (' +
+            inputRange.length +
+            ') and outputRange (' +
+            outputRange.length +
+            ') must have the same length');
+    }
+    checkInfiniteRange('inputRange', inputRange);
+    checkInfiniteRange('outputRange', outputRange);
+    checkValidInputRange(inputRange);
+    const easing = (_a = options === null || options === void 0 ? void 0 : options.easing) !== null && _a !== void 0 ? _a : ((num) => num);
+    let extrapolateLeft = 'extend';
+    if ((options === null || options === void 0 ? void 0 : options.extrapolateLeft) !== undefined) {
+        extrapolateLeft = options.extrapolateLeft;
+    }
+    let extrapolateRight = 'extend';
+    if ((options === null || options === void 0 ? void 0 : options.extrapolateRight) !== undefined) {
+        extrapolateRight = options.extrapolateRight;
+    }
+    if (typeof input !== 'number') {
+        throw new TypeError('Cannot interpolate an input which is not a number');
+    }
+    const range = findRange(input, inputRange);
+    return interpolateFunction(input, [inputRange[range], inputRange[range + 1]], [outputRange[range], outputRange[range + 1]], {
+        easing,
+        extrapolateLeft,
+        extrapolateRight,
+    });
+}

package/dist/esm/is-approximately-the-same.d.ts

@@ -0,0 +1 @@
+export declare const isApproximatelyTheSame: (num1: number, num2: number) => boolean;

package/dist/esm/is-approximately-the-same.js

@@ -0,0 +1,4 @@
+const FLOATING_POINT_ERROR_THRESHOLD = 0.00001;
+export const isApproximatelyTheSame = (num1, num2) => {
+    return Math.abs(num1 - num2) < FLOATING_POINT_ERROR_THRESHOLD;
+};

package/dist/esm/is-player.d.ts

@@ -0,0 +1,3 @@
+import type { PropsWithChildren } from 'react';
+export declare const IsPlayerContextProvider: React.FC<PropsWithChildren>;
+export declare const useIsPlayer: () => boolean;

package/dist/esm/is-player.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+const IsPlayerContext = createContext(false);
+export const IsPlayerContextProvider = ({ children, }) => {
+    return _jsx(IsPlayerContext.Provider, { value: true, children: children });
+};
+export const useIsPlayer = () => {
+    return useContext(IsPlayerContext);
+};

package/dist/esm/loading-indicator.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const Loading: React.FC;

package/dist/esm/loading-indicator.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AbsoluteFill } from './AbsoluteFill.js';
+const rotate = {
+    transform: `rotate(90deg)`,
+};
+const ICON_SIZE = 40;
+const label = {
+    color: '#555',
+    fontSize: 14,
+    fontFamily: 'sans-serif',
+};
+const container = {
+    justifyContent: 'center',
+    alignItems: 'center',
+};
+export const Loading = () => {
+    return (_jsxs(AbsoluteFill, { style: container, id: "remotion-comp-loading", children: [_jsx("style", { type: "text/css", children: `
+				@keyframes anim {
+					from {
+						opacity: 0
+					}
+					to {
+						opacity: 1
+					}
+				}
+				#remotion-comp-loading {
+					animation: anim 2s;
+					animation-fill-mode: forwards;
+				}
+			` }), _jsx("svg", { width: ICON_SIZE, height: ICON_SIZE, viewBox: "-100 -100 400 400", style: rotate, children: _jsx("path", { fill: "#555", stroke: "#555", strokeWidth: "100", strokeLinejoin: "round", d: "M 2 172 a 196 100 0 0 0 195 5 A 196 240 0 0 0 100 2.259 A 196 240 0 0 0 2 172 z" }) }), _jsx("p", { style: label, children: "Loading..." })] }));
+};

package/dist/esm/loop/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { LayoutAndStyle } from '../Sequence.js';
+export declare type LoopProps = {
+    durationInFrames: number;
+    times?: number;
+    name?: string;
+    children: React.ReactNode;
+} & LayoutAndStyle;
+export declare const Loop: React.FC<LoopProps>;

package/dist/esm/loop/index.js

@@ -0,0 +1,25 @@
+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';
+export const Loop = ({ durationInFrames, times = Infinity, children, name, ...props }) => {
+    const { durationInFrames: compDuration } = useVideoConfig();
+    validateDurationInFrames(durationInFrames, 'of the <Loop /> component');
+    if (typeof times !== 'number') {
+        throw new TypeError(`You passed to "times" an argument of type ${typeof times}, but it must be a number.`);
+    }
+    if (times !== Infinity && times % 1 !== 0) {
+        throw new TypeError(`The "times" prop of a loop must be an integer, but got ${times}.`);
+    }
+    if (times < 0) {
+        throw new TypeError(`The "times" prop of a loop must be at least 0, but got ${times}`);
+    }
+    const maxTimes = Math.ceil(compDuration / durationInFrames);
+    const actualTimes = Math.min(maxTimes, times);
+    const style = props.layout === 'none' ? undefined : props.style;
+    return (_jsx(_Fragment, { children: new Array(actualTimes).fill(true).map((_, i) => {
+            return (_jsx(Sequence
+            // eslint-disable-next-line react/no-array-index-key
+            , { durationInFrames: durationInFrames, from: i * durationInFrames, name: name, showLoopTimesInTimeline: actualTimes, showInTimeline: i === 0, layout: props.layout, style: style, children: children }, `loop-${i}`));
+        }) }));
+};

package/dist/esm/multiple-versions-warning.d.ts

@@ -0,0 +1 @@
+export declare const checkMultipleRemotionVersions: () => void;

package/dist/esm/multiple-versions-warning.js

@@ -0,0 +1,28 @@
+import { truthy } from './truthy.js';
+import { VERSION } from './version.js';
+export const checkMultipleRemotionVersions = () => {
+    if (typeof globalThis === 'undefined') {
+        return;
+    }
+    const alreadyImported = globalThis.remotion_imported ||
+        (typeof window !== 'undefined' && window.remotion_imported);
+    if (alreadyImported) {
+        if (typeof window === 'undefined' && alreadyImported === VERSION) {
+            // Next.JS will reload the package and cause a server-side warning.
+            // It's okay if this happens during SSR in developement
+            return;
+        }
+        throw new TypeError(`🚨 Multiple versions of Remotion detected: ${[
+            VERSION,
+            typeof alreadyImported === 'string'
+                ? alreadyImported
+                : 'an older version',
+        ]
+            .filter(truthy)
+            .join(' and ')}. This will cause things to break in an unexpected way.\nCheck that all your Remotion packages are on the same version. If your dependencies depend on Remotion, make them peer dependencies. You can also run \`npx remotion versions\` from your terminal to see which versions are mismatching.`);
+    }
+    globalThis.remotion_imported = VERSION;
+    if (typeof window !== 'undefined') {
+        window.remotion_imported = VERSION;
+    }
+};

package/dist/esm/nonce.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare type TNonceContext = {
+    getNonce: () => number;
+    fastRefreshes: number;
+};
+export declare const NonceContext: import("react").Context<TNonceContext>;
+export declare const useNonce: () => number;

package/dist/esm/nonce.js

@@ -0,0 +1,13 @@
+import { createContext, useContext, useEffect, useState } from 'react';
+export const NonceContext = createContext({
+    getNonce: () => 0,
+    fastRefreshes: 0,
+});
+export const useNonce = () => {
+    const context = useContext(NonceContext);
+    const [nonce, setNonce] = useState(() => context.getNonce());
+    useEffect(() => {
+        setNonce(context.getNonce);
+    }, [context]);
+    return nonce;
+};