remotion 4.0.498 → 4.0.500

package/dist/cjs/TimelineContext.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineContextProvider = exports.AbsoluteTimeContext = exports.PlaybackRateContext = exports.TimelineContext = exports.SetTimelineContext = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const random_1 = require("./random");
 const timeline_position_state_1 = require("./timeline-position-state");
 const use_delay_render_1 = require("./use-delay-render");
 exports.SetTimelineContext = (0, react_1.createContext)({
@@ -22,7 +21,6 @@ const TimelineContextProvider = ({ children, frameState }) => {
     const imperativePlaying = (0, react_1.useRef)(false);
     const [playbackRate, setPlaybackRate] = (0, react_1.useState)(1);
     const audioAndVideoTags = (0, react_1.useRef)([]);
-    const [remotionRootId] = (0, react_1.useState)(() => String((0, random_1.random)(null)));
     const [_frame, setFrame] = (0, react_1.useState)(() => (0, timeline_position_state_1.getInitialFrameState)());
     const frame = frameState !== null && frameState !== void 0 ? frameState : _frame;
     const { delayRender, continueRender } = (0, use_delay_render_1.useDelayRender)();
@@ -62,10 +60,9 @@ const TimelineContextProvider = ({ children, frameState }) => {
             frame,
             playing,
             imperativePlaying,
-            rootId: remotionRootId,
             audioAndVideoTags,
         };
-    }, [frame, playing, remotionRootId]);
+    }, [frame, playing]);
     const playbackRateContextValue = (0, react_1.useMemo)(() => {
         return {
             playbackRate,

package/dist/cjs/animated-image/AnimatedImage.d.ts

@@ -89,6 +89,46 @@ export declare const animatedImageSchema: {
         readonly hiddenFromList: true;
         readonly keyframable: false;
     };
+    readonly cropLeft: {
+        readonly type: "number";
+        readonly default: 0;
+        readonly description: "Crop left";
+        readonly min: 0;
+        readonly max: 1;
+        readonly step: 0.01;
+        readonly hiddenFromList: false;
+        readonly keyframable: true;
+    };
+    readonly cropRight: {
+        readonly type: "number";
+        readonly default: 0;
+        readonly description: "Crop right";
+        readonly min: 0;
+        readonly max: 1;
+        readonly step: 0.01;
+        readonly hiddenFromList: false;
+        readonly keyframable: true;
+    };
+    readonly cropTop: {
+        readonly type: "number";
+        readonly default: 0;
+        readonly description: "Crop top";
+        readonly min: 0;
+        readonly max: 1;
+        readonly step: 0.01;
+        readonly hiddenFromList: false;
+        readonly keyframable: true;
+    };
+    readonly cropBottom: {
+        readonly type: "number";
+        readonly default: 0;
+        readonly description: "Crop bottom";
+        readonly min: 0;
+        readonly max: 1;
+        readonly step: 0.01;
+        readonly hiddenFromList: false;
+        readonly keyframable: true;
+    };
     readonly durationInFrames: {
         readonly type: "number";
         readonly default: undefined;
@@ -135,7 +175,7 @@ export declare const animatedImageSchema: {
         readonly keyframable: false;
     };
 };
-export declare const AnimatedImage: React.ComponentType<import("../Interactive.js").InteractiveBaseProps & import("../Interactive.js").InteractivePremountProps & {
+export declare const AnimatedImage: React.ComponentType<import("../Interactive.js").InteractiveBaseProps & import("../Interactive.js").InteractiveCropProps & import("../Interactive.js").InteractivePremountProps & {
     src: string;
     width?: number | undefined;
     height?: number | undefined;

package/dist/cjs/animated-image/AnimatedImage.js

@@ -9,6 +9,7 @@ const enable_sequence_stack_traces_js_1 = require("../enable-sequence-stack-trac
 const freeze_js_1 = require("../freeze.js");
 const interactivity_schema_js_1 = require("../interactivity-schema.js");
 const Sequence_js_1 = require("../Sequence.js");
+const use_crop_style_js_1 = require("../use-crop-style.js");
 const use_current_frame_js_1 = require("../use-current-frame.js");
 const use_delay_render_js_1 = require("../use-delay-render.js");
 const use_premounting_js_1 = require("../use-premounting.js");
@@ -27,6 +28,7 @@ exports.animatedImageSchema = {
         keyframable: false,
     },
     ...interactivity_schema_js_1.baseSchema,
+    ...interactivity_schema_js_1.cropSchema,
     ...interactivity_schema_js_1.premountSchema,
     playbackRate: {
         type: 'number',
@@ -196,7 +198,7 @@ const AnimatedImageContent = (0, react_1.forwardRef)(({ src, width, height, onEr
     return (jsx_runtime_1.jsx(canvas_1.Canvas, { ref: ref, width: width, height: height, fit: fit, effects: memoizedEffects, ...props }));
 });
 AnimatedImageContent.displayName = 'AnimatedImageContent';
-const AnimatedImageInner = ({ src, width, height, onError, fit, playbackRate, loopBehavior, id, className, style, durationInFrames, from, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, requestInit, effects = [], controls, ref, ...sequenceProps }) => {
+const AnimatedImageInner = ({ src, width, height, onError, fit, playbackRate, loopBehavior, id, className, style, durationInFrames, from, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, cropLeft, cropRight, cropTop, cropBottom, requestInit, effects = [], controls, ref, ...sequenceProps }) => {
     const actualRef = (0, react_1.useRef)(null);
     const memoizedEffectDefinitions = (0, use_memoized_effects_js_1.useMemoizedEffectDefinitions)(effects);
     (0, react_1.useImperativeHandle)(ref, () => {
@@ -212,6 +214,14 @@ const AnimatedImageInner = ({ src, width, height, onError, fit, playbackRate, lo
         styleWhilePostmounted: styleWhilePostmounted !== null && styleWhilePostmounted !== void 0 ? styleWhilePostmounted : null,
         hideWhilePremounted: 'display-none',
     });
+    const croppedStyle = (0, use_crop_style_js_1.useCropStyle)({
+        cropLeft,
+        cropRight,
+        cropTop,
+        cropBottom,
+        style: premountingStyle,
+        componentName: '<AnimatedImage />',
+    });
     const canvasProps = getCanvasPropsFromSequenceProps(sequenceProps);
     const animatedImageProps = {
         src,
@@ -223,7 +233,7 @@ const AnimatedImageInner = ({ src, width, height, onError, fit, playbackRate, lo
         loopBehavior,
         id,
         className,
-        style: premountingStyle !== null && premountingStyle !== void 0 ? premountingStyle : undefined,
+        style: croppedStyle !== null && croppedStyle !== void 0 ? croppedStyle : undefined,
         requestInit,
         ...canvasProps,
     };

package/dist/cjs/animated-image/props.d.ts

@@ -1,6 +1,6 @@
 import type { ImageFit } from '../calculate-image-fit.js';
 import type { EffectsProp } from '../effects/effect-types.js';
-import type { InteractiveBaseProps, InteractivePremountProps } from '../Interactive.js';
+import type { InteractiveBaseProps, InteractiveCropProps, InteractivePremountProps } from '../Interactive.js';
 export type RemotionAnimatedImageLoopBehavior = 'loop' | 'pause-after-finish' | 'clear-after-finish';
 export type AnimatedImageCanvasProps = React.AriaAttributes & Record<`data-${string}`, string | undefined>;
 export type RemotionAnimatedImageProps = {
@@ -16,7 +16,7 @@ export type RemotionAnimatedImageProps = {
     className?: string;
     requestInit?: RequestInit;
 } & AnimatedImageCanvasProps;
-export type AnimatedImageProps = InteractiveBaseProps & InteractivePremountProps & RemotionAnimatedImageProps & {
+export type AnimatedImageProps = InteractiveBaseProps & InteractiveCropProps & InteractivePremountProps & RemotionAnimatedImageProps & {
     readonly effects?: EffectsProp;
 };
 export type AnimatedImageFillMode = ImageFit;

package/dist/cjs/canvas-image/CanvasImage.d.ts

@@ -89,6 +89,46 @@ export declare const canvasImageSchema: {
         readonly hiddenFromList: true;
         readonly keyframable: false;
     };
+    readonly cropLeft: {
+        readonly type: "number";
+        readonly default: 0;
+        readonly description: "Crop left";
+        readonly min: 0;
+        readonly max: 1;
+        readonly step: 0.01;
+        readonly hiddenFromList: false;
+        readonly keyframable: true;
+    };
+    readonly cropRight: {
+        readonly type: "number";
+        readonly default: 0;
+        readonly description: "Crop right";
+        readonly min: 0;
+        readonly max: 1;
+        readonly step: 0.01;
+        readonly hiddenFromList: false;
+        readonly keyframable: true;
+    };
+    readonly cropTop: {
+        readonly type: "number";
+        readonly default: 0;
+        readonly description: "Crop top";
+        readonly min: 0;
+        readonly max: 1;
+        readonly step: 0.01;
+        readonly hiddenFromList: false;
+        readonly keyframable: true;
+    };
+    readonly cropBottom: {
+        readonly type: "number";
+        readonly default: 0;
+        readonly description: "Crop bottom";
+        readonly min: 0;
+        readonly max: 1;
+        readonly step: 0.01;
+        readonly hiddenFromList: false;
+        readonly keyframable: true;
+    };
     readonly durationInFrames: {
         readonly type: "number";
         readonly default: undefined;
@@ -129,7 +169,7 @@ export declare const canvasImageSchema: {
         };
     };
 };
-export declare const CanvasImage: import("react").ComponentType<import("../Interactive.js").InteractiveBaseProps & import("../Interactive.js").InteractivePremountProps & {
+export declare const CanvasImage: import("react").ComponentType<import("../Interactive.js").InteractiveBaseProps & import("../Interactive.js").InteractiveCropProps & import("../Interactive.js").InteractivePremountProps & {
     readonly stack?: string | undefined;
 } & CanvasImageCanvasProps & {
     readonly src: string;
@@ -146,5 +186,6 @@ export declare const CanvasImage: import("react").ComponentType<import("../Inter
     readonly delayRenderRetries?: number | undefined;
     readonly delayRenderTimeoutInMilliseconds?: number | undefined;
     readonly _remotionInternalDocumentationLink?: string | undefined;
+    readonly _remotionInternalCropComponentName?: string | undefined;
     readonly outlineRef?: RefObject<HTMLElement | null> | null | undefined;
 } & import("react").RefAttributes<HTMLCanvasElement>>;

package/dist/cjs/canvas-image/CanvasImage.js

@@ -15,11 +15,13 @@ const Sequence_js_1 = require("../Sequence.js");
 const SequenceContext_js_1 = require("../SequenceContext.js");
 const truncate_src_for_label_js_1 = require("../truncate-src-for-label.js");
 const use_buffer_state_js_1 = require("../use-buffer-state.js");
+const use_crop_style_js_1 = require("../use-crop-style.js");
 const use_delay_render_js_1 = require("../use-delay-render.js");
 const use_premounting_js_1 = require("../use-premounting.js");
 const with_interactivity_schema_js_1 = require("../with-interactivity-schema.js");
 exports.canvasImageSchema = {
     ...interactivity_schema_js_1.baseSchema,
+    ...interactivity_schema_js_1.cropSchema,
     ...interactivity_schema_js_1.premountSchema,
     fit: {
         type: 'enum',
@@ -319,7 +321,7 @@ const CanvasImageContent = (0, react_1.forwardRef)(({ src, width, height, fit =
     return (jsx_runtime_1.jsx("canvas", { ...canvasProps, ref: canvasRef, width: width, height: height, className: className, style: style, id: id }));
 });
 CanvasImageContent.displayName = 'CanvasImageContent';
-const CanvasImageInner = (0, react_1.forwardRef)(({ src, width, height, fit, effects = [], className, style, id, onError, pauseWhenLoading, maxRetries, delayRenderRetries, delayRenderTimeoutInMilliseconds, durationInFrames, from, trimBefore, freeze, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, hidden, name, showInTimeline, stack, controls, _remotionInternalDocumentationLink, outlineRef, ...canvasProps }, ref) => {
+const CanvasImageInner = (0, react_1.forwardRef)(({ src, width, height, fit, effects = [], className, style, id, onError, pauseWhenLoading, maxRetries, delayRenderRetries, delayRenderTimeoutInMilliseconds, durationInFrames, from, trimBefore, freeze, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, hidden, name, showInTimeline, cropLeft, cropRight, cropTop, cropBottom, stack, controls, _remotionInternalDocumentationLink, _remotionInternalCropComponentName, outlineRef, ...canvasProps }, ref) => {
     if (!src) {
         throw new Error('No "src" prop was passed to <CanvasImage>.');
     }
@@ -338,7 +340,15 @@ const CanvasImageInner = (0, react_1.forwardRef)(({ src, width, height, fit, eff
         styleWhilePostmounted: styleWhilePostmounted !== null && styleWhilePostmounted !== void 0 ? styleWhilePostmounted : null,
         hideWhilePremounted: 'display-none',
     });
-    return (jsx_runtime_1.jsx(freeze_js_1.Freeze, { frame: freezeFrame, active: isPremountingOrPostmounting, children: jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from !== null && from !== void 0 ? from : 0, trimBefore: trimBefore, durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : Infinity, freeze: freeze, hidden: hidden, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, name: name !== null && name !== void 0 ? name : '<CanvasImage>', _remotionInternalDocumentationLink: _remotionInternalDocumentationLink !== null && _remotionInternalDocumentationLink !== void 0 ? _remotionInternalDocumentationLink : 'https://www.remotion.dev/docs/canvasimage', controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, _remotionInternalIsMedia: { type: 'image', src }, _remotionInternalStack: stack, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, outlineRef: outlineRef !== null && outlineRef !== void 0 ? outlineRef : actualRef, children: jsx_runtime_1.jsx(CanvasImageContent, { ref: actualRef, src: src, width: width, height: height, fit: fit, effects: effects, controls: controls, className: className, style: premountingStyle !== null && premountingStyle !== void 0 ? premountingStyle : undefined, id: id, onError: onError, pauseWhenLoading: pauseWhenLoading, maxRetries: maxRetries, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, refForOutline: outlineRef !== null && outlineRef !== void 0 ? outlineRef : null, ...canvasProps }) }) }));
+    const croppedStyle = (0, use_crop_style_js_1.useCropStyle)({
+        cropLeft,
+        cropRight,
+        cropTop,
+        cropBottom,
+        style: premountingStyle,
+        componentName: _remotionInternalCropComponentName !== null && _remotionInternalCropComponentName !== void 0 ? _remotionInternalCropComponentName : '<CanvasImage />',
+    });
+    return (jsx_runtime_1.jsx(freeze_js_1.Freeze, { frame: freezeFrame, active: isPremountingOrPostmounting, children: jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from !== null && from !== void 0 ? from : 0, trimBefore: trimBefore, durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : Infinity, freeze: freeze, hidden: hidden, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, name: name !== null && name !== void 0 ? name : '<CanvasImage>', _remotionInternalDocumentationLink: _remotionInternalDocumentationLink !== null && _remotionInternalDocumentationLink !== void 0 ? _remotionInternalDocumentationLink : 'https://www.remotion.dev/docs/canvasimage', controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, _remotionInternalIsMedia: { type: 'image', src }, _remotionInternalStack: stack, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, outlineRef: outlineRef !== null && outlineRef !== void 0 ? outlineRef : actualRef, children: jsx_runtime_1.jsx(CanvasImageContent, { ref: actualRef, src: src, width: width, height: height, fit: fit, effects: effects, controls: controls, className: className, style: croppedStyle !== null && croppedStyle !== void 0 ? croppedStyle : undefined, id: id, onError: onError, pauseWhenLoading: pauseWhenLoading, maxRetries: maxRetries, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, refForOutline: outlineRef !== null && outlineRef !== void 0 ? outlineRef : null, ...canvasProps }) }) }));
 });
 /*
  * @description Renders a static image to a `<canvas>` and applies Remotion effects.

package/dist/cjs/canvas-image/props.d.ts

@@ -1,8 +1,8 @@
 import type React from 'react';
 import type { ImageFit } from '../calculate-image-fit.js';
 import type { EffectsProp } from '../effects/effect-types.js';
-import type { InteractiveBaseProps, InteractivePremountProps } from '../Interactive.js';
-type CanvasImageSequenceProps = InteractiveBaseProps & InteractivePremountProps & {
+import type { InteractiveBaseProps, InteractiveCropProps, InteractivePremountProps } from '../Interactive.js';
+type CanvasImageSequenceProps = InteractiveBaseProps & InteractiveCropProps & InteractivePremountProps & {
     /**
      * @deprecated For internal use only.
      */
@@ -27,6 +27,10 @@ export type CanvasImageProps = CanvasImageSequenceProps & CanvasImageCanvasProps
      * @deprecated For internal use only.
      */
     readonly _remotionInternalDocumentationLink?: string;
+    /**
+     * @deprecated For internal use only.
+     */
+    readonly _remotionInternalCropComponentName?: string;
     /**
      * A React ref pointing to the element that Remotion Studio should use for
      * drawing the selection outline in the preview.

package/dist/cjs/effects/Solid.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { InteractiveBaseProps } from '../Interactive.js';
+import type { InteractiveBaseProps, InteractiveCropProps } from '../Interactive.js';
 import type { EffectsProp } from './effect-types.js';
 type MandatoryProps = {
     readonly width: number;
@@ -12,7 +12,7 @@ type OptionalProps = {
     readonly style: React.CSSProperties | undefined;
     readonly pixelDensity: number | undefined;
 };
-export type SolidProps = MandatoryProps & Partial<OptionalProps>;
+export type SolidProps = MandatoryProps & Partial<OptionalProps> & InteractiveCropProps;
 export declare const solidSchema: {
     readonly 'style.transformOrigin': {
         readonly type: "transform-origin";
@@ -84,6 +84,46 @@ export declare const solidSchema: {
         readonly default: "transparent";
         readonly description: "Color";
     };
+    readonly cropLeft: {
+        readonly type: "number";
+        readonly default: 0;
+        readonly description: "Crop left";
+        readonly min: 0;
+        readonly max: 1;
+        readonly step: 0.01;
+        readonly hiddenFromList: false;
+        readonly keyframable: true;
+    };
+    readonly cropRight: {
+        readonly type: "number";
+        readonly default: 0;
+        readonly description: "Crop right";
+        readonly min: 0;
+        readonly max: 1;
+        readonly step: 0.01;
+        readonly hiddenFromList: false;
+        readonly keyframable: true;
+    };
+    readonly cropTop: {
+        readonly type: "number";
+        readonly default: 0;
+        readonly description: "Crop top";
+        readonly min: 0;
+        readonly max: 1;
+        readonly step: 0.01;
+        readonly hiddenFromList: false;
+        readonly keyframable: true;
+    };
+    readonly cropBottom: {
+        readonly type: "number";
+        readonly default: 0;
+        readonly description: "Crop bottom";
+        readonly min: 0;
+        readonly max: 1;
+        readonly step: 0.01;
+        readonly hiddenFromList: false;
+        readonly keyframable: true;
+    };
     readonly durationInFrames: {
         readonly type: "number";
         readonly default: undefined;
@@ -144,5 +184,5 @@ export declare const solidSchema: {
         readonly hiddenFromList: false;
     };
 };
-export declare const Solid: React.ComponentType<MandatoryProps & Partial<OptionalProps> & InteractiveBaseProps & React.RefAttributes<HTMLCanvasElement>>;
+export declare const Solid: React.ComponentType<MandatoryProps & Partial<OptionalProps> & InteractiveCropProps & InteractiveBaseProps & React.RefAttributes<HTMLCanvasElement>>;
 export {};

package/dist/cjs/effects/Solid.js

@@ -6,6 +6,7 @@ const react_1 = require("react");
 const enable_sequence_stack_traces_js_1 = require("../enable-sequence-stack-traces.js");
 const interactivity_schema_js_1 = require("../interactivity-schema.js");
 const Sequence_js_1 = require("../Sequence.js");
+const use_crop_style_js_1 = require("../use-crop-style.js");
 const use_delay_render_js_1 = require("../use-delay-render.js");
 const with_interactivity_schema_js_1 = require("../with-interactivity-schema.js");
 const run_effect_chain_js_1 = require("./run-effect-chain.js");
@@ -57,6 +58,7 @@ exports.solidSchema = {
     ...interactivity_schema_js_1.transformSchema,
     ...interactivity_schema_js_1.backgroundSchema,
     ...interactivity_schema_js_1.borderSchema,
+    ...interactivity_schema_js_1.cropSchema,
 };
 const SolidInner = ({ color, width, height, effects = [], className, style, pixelDensity, overrideId, reference, }) => {
     const { delayRender, continueRender, cancelRender } = (0, use_delay_render_js_1.useDelayRender)();
@@ -149,7 +151,7 @@ const SolidInner = ({ color, width, height, effects = [], className, style, pixe
     }, [height, style, width]);
     return (jsx_runtime_1.jsx("canvas", { ref: canvasRef, width: canvasWidth, height: canvasHeight, className: className, style: canvasStyle }));
 };
-const SolidOuter = (0, react_1.forwardRef)(({ effects = [], controls, color, height, width, className, durationInFrames, style, name, from, trimBefore, freeze, hidden, showInTimeline, pixelDensity, ...props }, ref) => {
+const SolidOuter = (0, react_1.forwardRef)(({ effects = [], controls, color, height, width, className, durationInFrames, style, name, from, trimBefore, freeze, hidden, showInTimeline, pixelDensity, cropLeft, cropRight, cropTop, cropBottom, ...props }, ref) => {
     var _a;
     props;
     const memoizedEffectDefinitions = (0, use_memoized_effects_js_1.useMemoizedEffectDefinitions)(effects);
@@ -157,7 +159,15 @@ const SolidOuter = (0, react_1.forwardRef)(({ effects = [], controls, color, hei
     (0, react_1.useImperativeHandle)(ref, () => {
         return actualRef.current;
     }, []);
-    return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from, trimBefore: trimBefore, freeze: freeze, hidden: hidden, showInTimeline: showInTimeline, controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, durationInFrames: durationInFrames, name: name !== null && name !== void 0 ? name : '<Solid>', outlineRef: actualRef, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/solid", ...props, children: jsx_runtime_1.jsx(SolidInner, { reference: actualRef, overrideId: (_a = controls === null || controls === void 0 ? void 0 : controls.overrideId) !== null && _a !== void 0 ? _a : null, color: color, height: height, width: width, className: className, style: style, effects: effects, pixelDensity: pixelDensity }) }));
+    const croppedStyle = (0, use_crop_style_js_1.useCropStyle)({
+        cropLeft,
+        cropRight,
+        cropTop,
+        cropBottom,
+        style: style !== null && style !== void 0 ? style : null,
+        componentName: '<Solid />',
+    });
+    return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from, trimBefore: trimBefore, freeze: freeze, hidden: hidden, showInTimeline: showInTimeline, controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, durationInFrames: durationInFrames, name: name !== null && name !== void 0 ? name : '<Solid>', outlineRef: actualRef, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/solid", ...props, children: jsx_runtime_1.jsx(SolidInner, { reference: actualRef, overrideId: (_a = controls === null || controls === void 0 ? void 0 : controls.overrideId) !== null && _a !== void 0 ? _a : null, color: color, height: height, width: width, className: className, style: croppedStyle !== null && croppedStyle !== void 0 ? croppedStyle : undefined, effects: effects, pixelDensity: pixelDensity }) }));
 });
 exports.Solid = (0, with_interactivity_schema_js_1.withInteractivitySchema)({
     Component: SolidOuter,

package/dist/cjs/index.d.ts

@@ -128,7 +128,7 @@ export { getRemotionEnvironment } from './get-remotion-environment.js';
 export { getStaticFiles, StaticFile } from './get-static-files.js';
 export * from './IFrame.js';
 export { Img, ImgProps } from './Img.js';
-export { Interactive, type InteractiveBaseProps, type InteractivePremountProps, type InteractiveProps, type InteractiveTransformProps, } from './Interactive.js';
+export { Interactive, type InteractiveBaseProps, type InteractiveCropProps, type InteractivePremountProps, type InteractiveProps, type InteractiveTransformProps, } from './Interactive.js';
 export * from './internals.js';
 export { interpolateColors, type InterpolateColorsOptions, } from './interpolate-colors.js';
 export { LogLevel } from './log.js';