@remotion/promo-pages 4.0.499 → 4.0.500

package/dist/design.js

@@ -1378,7 +1378,7 @@ var getDefaultConfig = () => {
 var twMerge = /* @__PURE__ */ createTailwindMerge(getDefaultConfig);
 
 // ../design/dist/esm/index.mjs
-import React33, { useEffect as useEffect21, useMemo as useMemo43, useState as useState23 } from "react";
+import React33, { useEffect as useEffect21, useMemo as useMemo44, useState as useState23 } from "react";
 
 // ../paths/dist/esm/index.mjs
 var cutLInstruction = ({
@@ -4214,8 +4214,9 @@ import {
   useRef as useRef9,
   useState as useState6
 } from "react";
-import React16, { useCallback as useCallback7, useImperativeHandle, useMemo as useMemo17, useRef as useRef8 } from "react";
-import { useEffect as useEffect4, useMemo as useMemo16, useRef as useRef7 } from "react";
+import { useMemo as useMemo16 } from "react";
+import React16, { useCallback as useCallback7, useImperativeHandle, useMemo as useMemo18, useRef as useRef8 } from "react";
+import { useEffect as useEffect4, useMemo as useMemo17, useRef as useRef7 } from "react";
 import { jsx as jsx13 } from "react/jsx-runtime";
 import { jsx as jsx14 } from "react/jsx-runtime";
 import { useContext as useContext19, useLayoutEffect as useLayoutEffect4, useState as useState8 } from "react";
@@ -4224,18 +4225,18 @@ import {
   useCallback as useCallback8,
   useImperativeHandle as useImperativeHandle3,
   useLayoutEffect as useLayoutEffect3,
-  useMemo as useMemo18,
+  useMemo as useMemo19,
   useRef as useRef10,
   useState as useState7
 } from "react";
 import { jsx as jsx15 } from "react/jsx-runtime";
 import { forwardRef as forwardRef7, useCallback as useCallback14, useContext as useContext31 } from "react";
-import React17, { createContext as createContext18, useMemo as useMemo19 } from "react";
+import React17, { createContext as createContext18, useMemo as useMemo20 } from "react";
 import { jsx as jsx16 } from "react/jsx-runtime";
 import { useContext as useContext20 } from "react";
 import { createContext as createContext19, useEffect as useEffect6, useState as useState9 } from "react";
 import { jsx as jsx17 } from "react/jsx-runtime";
-import { createContext as createContext20, useMemo as useMemo20, useReducer } from "react";
+import { createContext as createContext20, useMemo as useMemo21, useReducer } from "react";
 import { jsx as jsx18 } from "react/jsx-runtime";
 import { useCallback as useCallback13 } from "react";
 import React23, {
@@ -4243,7 +4244,7 @@ import React23, {
   useContext as useContext29,
   useEffect as useEffect14,
   useImperativeHandle as useImperativeHandle4,
-  useMemo as useMemo28,
+  useMemo as useMemo29,
   useRef as useRef19,
   useState as useState14
 } from "react";
@@ -4254,14 +4255,14 @@ import React20, {
   useCallback as useCallback9,
   useContext as useContext21,
   useEffect as useEffect7,
-  useMemo as useMemo22,
+  useMemo as useMemo23,
   useRef as useRef12,
   useState as useState10
 } from "react";
-import { useMemo as useMemo21, useRef as useRef11 } from "react";
+import { useMemo as useMemo22, useRef as useRef11 } from "react";
 import { jsx as jsx19, jsxs as jsxs2 } from "react/jsx-runtime";
 import { useRef as useRef13 } from "react";
-import { useContext as useContext24, useEffect as useEffect8, useMemo as useMemo23, useState as useState11 } from "react";
+import { useContext as useContext24, useEffect as useEffect8, useMemo as useMemo24, useState as useState11 } from "react";
 import { useContext as useContext23 } from "react";
 import {
   useCallback as useCallback12,
@@ -4270,14 +4271,14 @@ import {
   useLayoutEffect as useLayoutEffect7,
   useRef as useRef18
 } from "react";
-import { useCallback as useCallback11, useMemo as useMemo26, useRef as useRef16 } from "react";
-import { useContext as useContext26, useMemo as useMemo25 } from "react";
+import { useCallback as useCallback11, useMemo as useMemo27, useRef as useRef16 } from "react";
+import { useContext as useContext26, useMemo as useMemo26 } from "react";
 import React21, {
   useCallback as useCallback10,
   useContext as useContext25,
   useEffect as useEffect9,
   useLayoutEffect as useLayoutEffect6,
-  useMemo as useMemo24,
+  useMemo as useMemo25,
   useRef as useRef15,
   useState as useState12
 } from "react";
@@ -4286,7 +4287,7 @@ import React22 from "react";
 import { useEffect as useEffect10, useState as useState13 } from "react";
 import { useEffect as useEffect11, useRef as useRef17 } from "react";
 import { useEffect as useEffect13 } from "react";
-import { createContext as createContext22, useContext as useContext28, useMemo as useMemo27 } from "react";
+import { createContext as createContext22, useContext as useContext28, useMemo as useMemo28 } from "react";
 import { jsx as jsx21 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef6,
@@ -4294,7 +4295,7 @@ import {
   useEffect as useEffect15,
   useImperativeHandle as useImperativeHandle5,
   useLayoutEffect as useLayoutEffect8,
-  useMemo as useMemo29,
+  useMemo as useMemo30,
   useRef as useRef20
 } from "react";
 import { jsx as jsx22 } from "react/jsx-runtime";
@@ -4304,7 +4305,7 @@ import {
   useCallback as useCallback15,
   useEffect as useEffect16,
   useImperativeHandle as useImperativeHandle6,
-  useMemo as useMemo30,
+  useMemo as useMemo31,
   useRef as useRef21,
   useState as useState15
 } from "react";
@@ -4315,7 +4316,7 @@ import {
   useCallback as useCallback16,
   useContext as useContext32,
   useLayoutEffect as useLayoutEffect9,
-  useMemo as useMemo31,
+  useMemo as useMemo32,
   useRef as useRef22
 } from "react";
 import { jsx as jsx25 } from "react/jsx-runtime";
@@ -4325,7 +4326,7 @@ import {
   useContext as useContext33,
   useImperativeHandle as useImperativeHandle7,
   useLayoutEffect as useLayoutEffect10,
-  useMemo as useMemo32,
+  useMemo as useMemo33,
   useRef as useRef23,
   useState as useState16
 } from "react";
@@ -4347,14 +4348,14 @@ import React31 from "react";
 import {
   useCallback as useCallback21,
   useImperativeHandle as useImperativeHandle8,
-  useMemo as useMemo33,
+  useMemo as useMemo34,
   useRef as useRef26,
   useState as useState19
 } from "react";
 import { jsx as jsx30 } from "react/jsx-runtime";
 import React32 from "react";
-import { useMemo as useMemo35 } from "react";
-import { createContext as createContext24, useContext as useContext35, useMemo as useMemo34 } from "react";
+import { useMemo as useMemo36 } from "react";
+import { createContext as createContext24, useContext as useContext35, useMemo as useMemo35 } from "react";
 import { jsx as jsx31 } from "react/jsx-runtime";
 import { jsx as jsx32 } from "react/jsx-runtime";
 import React34 from "react";
@@ -4366,7 +4367,7 @@ import {
   useContext as useContext37,
   useEffect as useEffect17,
   useLayoutEffect as useLayoutEffect12,
-  useMemo as useMemo36,
+  useMemo as useMemo37,
   useState as useState20
 } from "react";
 import { jsx as jsx33 } from "react/jsx-runtime";
@@ -4376,18 +4377,18 @@ import React38, {
   useContext as useContext38,
   useEffect as useEffect19,
   useImperativeHandle as useImperativeHandle9,
-  useMemo as useMemo37,
+  useMemo as useMemo38,
   useRef as useRef27,
   useState as useState21
 } from "react";
 import { useEffect as useEffect18 } from "react";
 import { jsx as jsx34 } from "react/jsx-runtime";
 import { jsx as jsx35 } from "react/jsx-runtime";
-import React40, { useMemo as useMemo38 } from "react";
+import React40, { useMemo as useMemo39 } from "react";
 import { jsx as jsx36 } from "react/jsx-runtime";
 import React42, {
   forwardRef as forwardRef14,
-  useMemo as useMemo39
+  useMemo as useMemo40
 } from "react";
 import React41 from "react";
 import { jsx as jsx37, jsxs as jsxs3, Fragment } from "react/jsx-runtime";
@@ -4399,7 +4400,7 @@ import {
   useEffect as useEffect20,
   useImperativeHandle as useImperativeHandle10,
   useLayoutEffect as useLayoutEffect13,
-  useMemo as useMemo40,
+  useMemo as useMemo41,
   useRef as useRef28
 } from "react";
 import { jsx as jsx38 } from "react/jsx-runtime";
@@ -5579,7 +5580,7 @@ var getSingleChildComponent = (children) => {
   }
   return child.type;
 };
-var VERSION = "4.0.499";
+var VERSION = "4.0.500";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -5621,38 +5622,6 @@ __export2(exports_timeline_position_state, {
   getFrameForComposition: () => getFrameForComposition,
   clampFrameToCompositionRange: () => clampFrameToCompositionRange
 });
-function mulberry32(a) {
-  let t = a + 1831565813;
-  t = Math.imul(t ^ t >>> 15, t | 1);
-  t ^= t + Math.imul(t ^ t >>> 7, t | 61);
-  return ((t ^ t >>> 14) >>> 0) / 4294967296;
-}
-function hashCode(str) {
-  let i = 0;
-  let chr = 0;
-  let hash = 0;
-  for (i = 0;i < str.length; i++) {
-    chr = str.charCodeAt(i);
-    hash = (hash << 5) - hash + chr;
-    hash |= 0;
-  }
-  return hash;
-}
-var random = (seed, dummy) => {
-  if (dummy !== undefined) {
-    throw new TypeError("random() takes only one argument");
-  }
-  if (seed === null) {
-    return Math.random();
-  }
-  if (typeof seed === "string") {
-    return mulberry32(hashCode(seed));
-  }
-  if (typeof seed === "number") {
-    return mulberry32(seed * 10000000000);
-  }
-  throw new Error("random() argument must be a number or a string");
-};
 var SetTimelineContext = createContext13({
   setFrame: () => {
     throw new Error("default");
@@ -5669,7 +5638,6 @@ var TimelineContextProvider = ({ children, frameState }) => {
   const imperativePlaying = useRef3(false);
   const [playbackRate, setPlaybackRate] = useState2(1);
   const audioAndVideoTags = useRef3([]);
-  const [remotionRootId] = useState2(() => String(random(null)));
   const [_frame, setFrame] = useState2(() => getInitialFrameState());
   const frame = frameState ?? _frame;
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
@@ -5704,10 +5672,9 @@ var TimelineContextProvider = ({ children, frameState }) => {
       frame,
       playing,
       imperativePlaying,
-      rootId: remotionRootId,
       audioAndVideoTags
     };
-  }, [frame, playing, remotionRootId]);
+  }, [frame, playing]);
   const playbackRateContextValue = useMemo8(() => {
     return {
       playbackRate,
@@ -6096,6 +6063,29 @@ var backgroundSchema = {
     description: "Color"
   }
 };
+var svgStrokeSchema = {
+  stroke: {
+    type: "color",
+    default: "none",
+    description: "Stroke"
+  },
+  strokeWidth: {
+    type: "number",
+    default: 1,
+    description: "Stroke width",
+    min: 0,
+    step: 1,
+    hiddenFromList: false
+  }
+};
+var svgPaintSchema = {
+  fill: {
+    type: "color",
+    default: undefined,
+    description: "Fill"
+  },
+  ...svgStrokeSchema
+};
 var textContentSchema = {
   children: {
     type: "text-content",
@@ -6126,7 +6116,51 @@ var premountSchema = {
 var sequencePremountSchema = {
   ...premountSchema
 };
+var cropSchema = {
+  cropLeft: {
+    type: "number",
+    default: 0,
+    description: "Crop left",
+    min: 0,
+    max: 1,
+    step: 0.01,
+    hiddenFromList: false,
+    keyframable: true
+  },
+  cropRight: {
+    type: "number",
+    default: 0,
+    description: "Crop right",
+    min: 0,
+    max: 1,
+    step: 0.01,
+    hiddenFromList: false,
+    keyframable: true
+  },
+  cropTop: {
+    type: "number",
+    default: 0,
+    description: "Crop top",
+    min: 0,
+    max: 1,
+    step: 0.01,
+    hiddenFromList: false,
+    keyframable: true
+  },
+  cropBottom: {
+    type: "number",
+    default: 0,
+    description: "Crop bottom",
+    min: 0,
+    max: 1,
+    step: 0.01,
+    hiddenFromList: false,
+    keyframable: true
+  }
+};
+var sequenceCropSchema = cropSchema;
 var sequenceStyleSchema = {
+  ...sequenceCropSchema,
   ...transformSchema,
   ...backgroundSchema,
   ...borderSchema,
@@ -6215,6 +6249,54 @@ var sequenceSchemaDefaultLayoutNone = {
     default: "none"
   }
 };
+var clampCrop = (value) => {
+  return Math.min(1, Math.max(0, value ?? 0));
+};
+var resolveAxis = (start, end) => {
+  const resolvedStart = clampCrop(start);
+  const resolvedEnd = clampCrop(end);
+  if (resolvedStart + resolvedEnd > 1) {
+    return [0.5, 0.5];
+  }
+  return [resolvedStart, resolvedEnd];
+};
+var resolveSequenceCrop = ({
+  cropLeft,
+  cropRight,
+  cropTop,
+  cropBottom
+}) => {
+  const [left, right] = resolveAxis(cropLeft, cropRight);
+  const [top, bottom] = resolveAxis(cropTop, cropBottom);
+  return { left, right, top, bottom };
+};
+var getSequenceCropClipPath = ({
+  left,
+  right,
+  top,
+  bottom,
+  borderRadius
+}) => {
+  if (left === 0 && right === 0 && top === 0 && bottom === 0) {
+    return null;
+  }
+  const serializedBorderRadius = typeof borderRadius === "number" ? `${borderRadius}px` : borderRadius;
+  const rounded = serializedBorderRadius ? ` round ${serializedBorderRadius}` : "";
+  return `inset(${top * 100}% ${right * 100}% ${bottom * 100}% ${left * 100}%${rounded})`;
+};
+var validateSequenceCrop = (crop, componentName = "<Sequence />") => {
+  for (const [name, value] of Object.entries(crop)) {
+    if (value === undefined) {
+      continue;
+    }
+    if (typeof value !== "number" || !Number.isFinite(value)) {
+      throw new TypeError(`The "${name}" prop of ${componentName} must be a finite number, but got ${String(value)}.`);
+    }
+    if (value < 0 || value > 1) {
+      throw new RangeError(`The "${name}" prop of ${componentName} must be between 0 and 1, but got ${value}.`);
+    }
+  }
+};
 var SequenceManager = React12.createContext({
   registerSequence: () => {
     throw new Error("SequenceManagerContext not initialized");
@@ -8634,7 +8716,7 @@ var withInteractivitySchema = ({
   const flatKeys = Object.keys(flatSchema);
   const Wrapped = forwardRef2((props, ref) => {
     const env = useRemotionEnvironment();
-    if (!env.isStudio || env.isReadOnlyStudio || env.isRendering) {
+    if (!env.isStudio || env.isRendering) {
       return React14.createElement(Component, {
         ...props,
         controls: null,
@@ -8664,7 +8746,7 @@ var withInteractivitySchema = ({
       stackToOverrideMap[stack] = newOverrideId;
       return newOverrideId;
     });
-    const nodePath = nodePathMapping.overrideIdToNodePathMappings[overrideId] ?? null;
+    const nodePath = env.isReadOnlyStudio ? null : nodePathMapping.overrideIdToNodePathMappings[overrideId] ?? null;
     const runtimeValues = flatKeys.map((key) => getRuntimeValueForSchemaKey({
       flatSchema,
       key,
@@ -8735,17 +8817,32 @@ var RegularSequenceRefForwardingFunction = ({
   _remotionInternalPostmountDisplay: postmountDisplay,
   _remotionInternalIsMedia: isMedia,
   outlineRef: passedRefForOutline,
+  cropLeft,
+  cropRight,
+  cropTop,
+  cropBottom,
   ...other
 }, ref) => {
   const { layout = "absolute-fill" } = other;
   const [id] = useState5(() => String(Math.random()));
   const parentSequence = useContext18(SequenceContext);
-  const { rootId } = useTimelineContext();
   const cumulatedFrom = parentSequence ? parentSequence.cumulatedFrom + parentSequence.relativeFrom : 0;
   const nonce = useNonce();
   if (layout !== "absolute-fill" && layout !== "none") {
     throw new TypeError(`The layout prop of <Sequence /> expects either "absolute-fill" or "none", but you passed: ${layout}`);
   }
+  const cropProps = { cropLeft, cropRight, cropTop, cropBottom };
+  const hasCropProp = Object.values(cropProps).some((value) => value !== undefined);
+  if (layout === "none" && hasCropProp) {
+    throw new TypeError('The cropLeft, cropRight, cropTop and cropBottom props of <Sequence /> are only supported with layout="absolute-fill".');
+  }
+  validateSequenceCrop(cropProps);
+  const {
+    left: resolvedCropLeft,
+    right: resolvedCropRight,
+    top: resolvedCropTop,
+    bottom: resolvedCropBottom
+  } = resolveSequenceCrop(cropProps);
   if (layout === "none" && typeof other.style !== "undefined") {
     throw new TypeError('If layout="none", you may not pass a style. Passed: ' + JSON.stringify(other.style));
   }
@@ -8871,7 +8968,6 @@ var RegularSequenceRefForwardingFunction = ({
           parent: parentSequence?.id ?? null,
           postmountDisplay: postmountDisplay ?? null,
           premountDisplay: premountDisplay ?? null,
-          rootId,
           showInTimeline,
           src: isMedia.src,
           getStack: () => stackRef.current,
@@ -8898,7 +8994,6 @@ var RegularSequenceRefForwardingFunction = ({
           playbackRate: isMedia.data.playbackRate,
           postmountDisplay: postmountDisplay ?? null,
           premountDisplay: premountDisplay ?? null,
-          rootId,
           showInTimeline,
           src: isMedia.data.src,
           getStack: () => stackRef.current,
@@ -8925,7 +9020,6 @@ var RegularSequenceRefForwardingFunction = ({
       documentationLink: resolvedDocumentationLink,
       parent: parentSequence?.id ?? null,
       type: "sequence",
-      rootId,
       showInTimeline,
       nonce: nonce.get(),
       loopDisplay,
@@ -8951,7 +9045,6 @@ var RegularSequenceRefForwardingFunction = ({
     unregisterSequence,
     parentSequence?.id,
     actualDurationInFrames,
-    rootId,
     from,
     trimBefore,
     registeredTrimBefore,
@@ -8980,6 +9073,13 @@ var RegularSequenceRefForwardingFunction = ({
     children: content
   });
   const styleIfThere = other.layout === "none" ? undefined : other.style;
+  const cropClipPath = getSequenceCropClipPath({
+    left: resolvedCropLeft,
+    right: resolvedCropRight,
+    top: resolvedCropTop,
+    bottom: resolvedCropBottom,
+    borderRadius: styleIfThere?.borderRadius
+  });
   const sequenceRef = useCallback6((node) => {
     wrapperRefForOutline.current = node;
     if (typeof ref === "function") {
@@ -8993,9 +9093,12 @@ var RegularSequenceRefForwardingFunction = ({
       flexDirection: undefined,
       ...width ? { width } : {},
       ...height ? { height } : {},
-      ...styleIfThere ?? {}
+      ...styleIfThere ?? {},
+      ...cropClipPath ? {
+        clipPath: cropClipPath
+      } : {}
     };
-  }, [height, styleIfThere, width]);
+  }, [cropClipPath, height, styleIfThere, width]);
   if (ref !== null && layout === "none") {
     throw new TypeError('It is not supported to pass both a `ref` and `layout="none"` to <Sequence />.');
   }
@@ -9094,6 +9197,26 @@ var SequenceWithoutFrom = withInteractivitySchema({
   schema: sequenceSchemaWithoutFrom,
   supportsEffects: false
 });
+var useCropStyle = ({
+  cropLeft,
+  cropRight,
+  cropTop,
+  cropBottom,
+  style,
+  componentName
+}) => {
+  validateSequenceCrop({ cropLeft, cropRight, cropTop, cropBottom }, componentName);
+  return useMemo16(() => {
+    const cropClipPath = getSequenceCropClipPath({
+      ...resolveSequenceCrop({ cropLeft, cropRight, cropTop, cropBottom }),
+      borderRadius: style?.borderRadius
+    });
+    if (cropClipPath === null) {
+      return style;
+    }
+    return { ...style, clipPath: cropClipPath };
+  }, [cropBottom, cropLeft, cropRight, cropTop, style]);
+};
 var calculateImageFit = (fit, imageSize, canvasSize) => {
   switch (fit) {
     case "fill": {
@@ -9386,7 +9509,7 @@ var useEffectChainState = () => {
       }
     };
   }, []);
-  return useMemo16(() => ({
+  return useMemo17(() => ({
     get: (width, height) => {
       if (!sizeRef.current || sizeRef.current.width !== width || sizeRef.current.height !== height) {
         if (chainStateRef.current) {
@@ -9402,7 +9525,7 @@ var useEffectChainState = () => {
 var CanvasRefForwardingFunction = ({ width, height, fit, className, style, effects, ...props }, ref) => {
   const canvasRef = useRef8(null);
   const chainState = useEffectChainState();
-  const sourceCanvas = useMemo17(() => {
+  const sourceCanvas = useMemo18(() => {
     if (typeof document === "undefined") {
       return null;
     }
@@ -9664,6 +9787,7 @@ var animatedImageSchema = {
     keyframable: false
   },
   ...baseSchema,
+  ...cropSchema,
   ...premountSchema,
   playbackRate: {
     type: "number",
@@ -9858,6 +9982,10 @@ var AnimatedImageInner = ({
   postmountFor,
   styleWhilePremounted,
   styleWhilePostmounted,
+  cropLeft,
+  cropRight,
+  cropTop,
+  cropBottom,
   requestInit,
   effects = [],
   controls,
@@ -9887,6 +10015,14 @@ var AnimatedImageInner = ({
     styleWhilePostmounted: styleWhilePostmounted ?? null,
     hideWhilePremounted: "display-none"
   });
+  const croppedStyle = useCropStyle({
+    cropLeft,
+    cropRight,
+    cropTop,
+    cropBottom,
+    style: premountingStyle,
+    componentName: "<AnimatedImage />"
+  });
   const canvasProps = getCanvasPropsFromSequenceProps(sequenceProps);
   const animatedImageProps = {
     src,
@@ -9898,7 +10034,7 @@ var AnimatedImageInner = ({
     loopBehavior,
     id,
     className,
-    style: premountingStyle ?? undefined,
+    style: croppedStyle ?? undefined,
     requestInit,
     ...canvasProps
   };
@@ -10039,7 +10175,7 @@ var RenderAssetManagerProvider = ({ children, collectAssets }) => {
       };
     }
   }, []);
-  const contextValue = useMemo18(() => {
+  const contextValue = useMemo19(() => {
     return {
       registerRenderAsset,
       unregisterRenderAsset,
@@ -10168,14 +10304,14 @@ var Loop = ({
   const iteration = Math.floor(currentFrame / durationInFrames);
   const start = iteration * durationInFrames;
   const from = Math.min(start, maxFrame);
-  const loopDisplay = useMemo19(() => {
+  const loopDisplay = useMemo20(() => {
     return {
       numberOfTimes: Math.min(compDuration / durationInFrames, times),
       startOffset: -from,
       durationInFrames
     };
   }, [compDuration, durationInFrames, from, times]);
-  const loopContext = useMemo19(() => {
+  const loopContext = useMemo20(() => {
     return {
       iteration: Math.floor(currentFrame / durationInFrames),
       durationInFrames
@@ -10547,7 +10683,7 @@ var DurationsContext = createContext20({
 });
 var DurationsContextProvider = ({ children }) => {
   const [durations, setDurations] = useReducer(durationReducer, {});
-  const value = useMemo20(() => {
+  const value = useMemo21(() => {
     return {
       durations,
       setDurations
@@ -10574,6 +10710,38 @@ var getCrossOriginValue = ({
   }
   return;
 };
+function mulberry32(a2) {
+  let t = a2 + 1831565813;
+  t = Math.imul(t ^ t >>> 15, t | 1);
+  t ^= t + Math.imul(t ^ t >>> 7, t | 61);
+  return ((t ^ t >>> 14) >>> 0) / 4294967296;
+}
+function hashCode(str) {
+  let i = 0;
+  let chr = 0;
+  let hash = 0;
+  for (i = 0;i < str.length; i++) {
+    chr = str.charCodeAt(i);
+    hash = (hash << 5) - hash + chr;
+    hash |= 0;
+  }
+  return hash;
+}
+var random = (seed, dummy) => {
+  if (dummy !== undefined) {
+    throw new TypeError("random() takes only one argument");
+  }
+  if (seed === null) {
+    return Math.random();
+  }
+  if (typeof seed === "string") {
+    return mulberry32(hashCode(seed));
+  }
+  if (typeof seed === "number") {
+    return mulberry32(seed * 10000000000);
+  }
+  throw new Error("random() argument must be a number or a string");
+};
 var playAndHandleNotAllowedError = ({
   mediaRef,
   mediaType,
@@ -10690,7 +10858,7 @@ var useSingletonAudioContext = ({
   if (sampleRate !== initialSampleRate.current) {
     throw new Error(`Changing the AudioContext sample rate dynamically is not supported. The sample rate was initialized with ${initialSampleRate.current} Hz, but ${sampleRate} Hz was passed later.`);
   }
-  const context = useMemo21(() => {
+  const context = useMemo22(() => {
     if (env.isRendering) {
       return null;
     }
@@ -10824,9 +10992,9 @@ var SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled, pr
   });
   const audioContextIsPlayingEventually = useRef12(false);
   const isResuming = useRef12(null);
-  const audioSyncAnchor = useMemo22(() => ({ value: 0 }), []);
+  const audioSyncAnchor = useMemo23(() => ({ value: 0 }), []);
   const audioSyncAnchorListeners = useRef12([]);
-  const audioSyncAnchorEmitter = useMemo22(() => {
+  const audioSyncAnchorEmitter = useMemo23(() => {
     return {
       dispatch: (event) => {
         audioSyncAnchorListeners.current.forEach((l) => l(event));
@@ -10846,7 +11014,7 @@ var SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled, pr
   const unscheduleAudioNode = useCallback9((node) => {
     nodesToResume.current.delete(node);
   }, []);
-  const scheduleAudioNode = useMemo22(() => {
+  const scheduleAudioNode = useMemo23(() => {
     return ({
       node,
       mediaTimestamp,
@@ -10938,7 +11106,7 @@ var SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled, pr
     audioContextIsPlayingEventually.current = false;
     return ctxAndGain.suspend();
   }, [ctxAndGain]);
-  const audioContextValue = useMemo22(() => {
+  const audioContextValue = useMemo23(() => {
     return {
       audioContext: ctxAndGain?.audioContext ?? null,
       getAudioContextState: () => ctxAndGain?.getState() ?? null,
@@ -11120,7 +11288,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
     });
     resume?.();
   }, [logLevel, mountTime, refs, env.isPlayer, resume]);
-  const audioTagsValue = useMemo22(() => {
+  const audioTagsValue = useMemo23(() => {
     return {
       registerAudio,
       unregisterAudio,
@@ -11135,7 +11303,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
     unregisterAudio,
     updateAudio
   ]);
-  const sharedAudioTagElements = useMemo22(() => {
+  const sharedAudioTagElements = useMemo23(() => {
     return refs.map(({ id, ref }) => {
       return /* @__PURE__ */ jsx19("audio", {
         ref,
@@ -11503,7 +11671,7 @@ var useBasicMediaInTimeline = ({
     parentSequenceDurationInFrames: parentSequence?.durationInFrames ?? null,
     loop
   });
-  const volumes = useMemo23(() => {
+  const volumes = useMemo24(() => {
     if (typeof volume === "number") {
       return volume;
     }
@@ -11522,15 +11690,13 @@ var useBasicMediaInTimeline = ({
   }, [initialVolume, mediaType, src, volume]);
   const doesVolumeChange = typeof volume === "function";
   const nonce = useNonce();
-  const { rootId } = useTimelineContext();
   const startMediaFrom = 0 - mediaStartsAt + (trimBefore ?? 0);
-  const memoizedResult = useMemo23(() => {
+  const memoizedResult = useMemo24(() => {
     return {
       volumes,
       duration,
       doesVolumeChange,
       nonce,
-      rootId,
       finalDisplayName: displayName ?? getAssetDisplayName(src),
       startMediaFrom,
       src,
@@ -11541,7 +11707,6 @@ var useBasicMediaInTimeline = ({
     duration,
     doesVolumeChange,
     nonce,
-    rootId,
     displayName,
     src,
     startMediaFrom,
@@ -11570,7 +11735,7 @@ var useMediaInTimeline = ({
   const { registerSequence, unregisterSequence } = useContext24(SequenceManager);
   const { durationInFrames } = useVideoConfig();
   const mediaStartsAt = useMediaStartsAt();
-  const { volumes, duration, doesVolumeChange, nonce, rootId, finalDisplayName } = useBasicMediaInTimeline({
+  const { volumes, duration, doesVolumeChange, nonce, finalDisplayName } = useBasicMediaInTimeline({
     volume,
     mediaVolume,
     mediaType,
@@ -11604,7 +11769,6 @@ var useMediaInTimeline = ({
       parent: parentSequence?.id ?? null,
       displayName: finalDisplayName,
       documentationLink,
-      rootId,
       volume: volumes,
       showInTimeline: true,
       nonce: nonce.get(),
@@ -11645,7 +11809,6 @@ var useMediaInTimeline = ({
     postmountDisplay,
     loopDisplay,
     documentationLink,
-    rootId,
     finalDisplayName,
     isStudio,
     refForOutline
@@ -11732,7 +11895,7 @@ var useBufferManager = (logLevel, mountTime) => {
       }
     }, [blocks]);
   }
-  return useMemo24(() => {
+  return useMemo25(() => {
     return { addBlock, listenForBuffering, listenForResume, buffering };
   }, [addBlock, buffering, listenForBuffering, listenForResume]);
 };
@@ -11767,7 +11930,7 @@ var useBufferState = () => {
   const buffer = useContext26(BufferingContextReact);
   const logLevel = useLogLevel();
   const addBlock = buffer ? buffer.addBlock : null;
-  return useMemo25(() => ({
+  return useMemo26(() => ({
     delayPlayback: () => {
       if (!addBlock) {
         throw new Error("Tried to enable the buffering state, but a Remotion context was not found. This API can only be called in a component that was passed to the Remotion Player or a <Composition>. Or you might have experienced a version mismatch - run `npx remotion versions` and ensure all packages have the same version. This error is thrown by the buffer state https://remotion.dev/docs/player/buffer-state");
@@ -11875,7 +12038,7 @@ var useBufferUntilFirstFrame = ({
     onVariableFpsVideoDetected,
     pauseWhenBuffering
   ]);
-  return useMemo26(() => {
+  return useMemo27(() => {
     return {
       isBuffering: () => bufferingRef.current,
       bufferUntilFirstFrame
@@ -12546,14 +12709,14 @@ var SetMediaVolumeContext = createContext22({
 var useMediaVolumeState = () => {
   const { mediaVolume } = useContext28(MediaVolumeContext);
   const { setMediaVolume } = useContext28(SetMediaVolumeContext);
-  return useMemo27(() => {
+  return useMemo28(() => {
     return [mediaVolume, setMediaVolume];
   }, [mediaVolume, setMediaVolume]);
 };
 var usePlayerMutedState = () => {
   const { playerMuted } = useContext28(MediaVolumeContext);
   const { setPlayerMuted } = useContext28(SetMediaVolumeContext);
-  return useMemo27(() => {
+  return useMemo28(() => {
     return [playerMuted, setPlayerMuted];
   }, [playerMuted, setPlayerMuted]);
 };
@@ -12620,7 +12783,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     requestsVideoFrame: false,
     isClientSideRendering: false
   });
-  const propsToPass = useMemo28(() => {
+  const propsToPass = useMemo29(() => {
     return {
       muted: muted || playerMuted || userPreferredVolume <= 0,
       src: preloadedSrc,
@@ -12637,7 +12800,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     userPreferredVolume,
     crossOriginValue
   ]);
-  const id = useMemo28(() => `audio-${random(src ?? "")}-${sequenceContext?.relativeFrom}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.durationInFrames}-muted:${props.muted}-loop:${props.loop}`, [
+  const id = useMemo29(() => `audio-${random(src ?? "")}-${sequenceContext?.relativeFrom}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.durationInFrames}-muted:${props.muted}-loop:${props.loop}`, [
     src,
     sequenceContext?.relativeFrom,
     sequenceContext?.cumulatedFrom,
@@ -12770,7 +12933,7 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
   const sequenceContext = useContext30(SequenceContext);
   const { registerRenderAsset, unregisterRenderAsset } = useContext30(RenderAssetManager);
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
-  const id = useMemo29(() => `audio-${random(props.src ?? "")}-${sequenceContext?.relativeFrom}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.durationInFrames}`, [
+  const id = useMemo30(() => `audio-${random(props.src ?? "")}-${sequenceContext?.relativeFrom}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.durationInFrames}`, [
     props.src,
     sequenceContext?.relativeFrom,
     sequenceContext?.cumulatedFrom,
@@ -13044,7 +13207,8 @@ var solidSchema = {
   },
   ...transformSchema,
   ...backgroundSchema,
-  ...borderSchema
+  ...borderSchema,
+  ...cropSchema
 };
 var SolidInner = ({
   color,
@@ -13066,7 +13230,7 @@ var SolidInner = ({
     effects,
     overrideId: overrideId ?? null
   });
-  const sourceCanvas = useMemo30(() => {
+  const sourceCanvas = useMemo31(() => {
     if (typeof document === "undefined") {
       return null;
     }
@@ -13134,7 +13298,7 @@ var SolidInner = ({
     cancelRender2,
     memoizedEffects
   ]);
-  const canvasStyle = useMemo30(() => {
+  const canvasStyle = useMemo31(() => {
     return {
       width,
       height,
@@ -13165,6 +13329,10 @@ var SolidOuter = forwardRef8(({
   hidden,
   showInTimeline,
   pixelDensity,
+  cropLeft,
+  cropRight,
+  cropTop,
+  cropBottom,
   ...props2
 }, ref) => {
   const memoizedEffectDefinitions = useMemoizedEffectDefinitions(effects);
@@ -13172,6 +13340,14 @@ var SolidOuter = forwardRef8(({
   useImperativeHandle6(ref, () => {
     return actualRef.current;
   }, []);
+  const croppedStyle = useCropStyle({
+    cropLeft,
+    cropRight,
+    cropTop,
+    cropBottom,
+    style: style ?? null,
+    componentName: "<Solid />"
+  });
   return /* @__PURE__ */ jsx24(Sequence, {
     layout: "none",
     from,
@@ -13193,7 +13369,7 @@ var SolidOuter = forwardRef8(({
       height,
       width,
       className,
-      style,
+      style: croppedStyle ?? undefined,
       effects,
       pixelDensity
     })
@@ -13222,6 +13398,17 @@ var isHtmlInCanvasSupported = () => {
   return cachedSupport;
 };
 var HTML_IN_CANVAS_UNSUPPORTED_MESSAGE = "HTML in Canvas is not supported. Two common causes: Chrome is older than version 148 (update Chrome), or the HTML-in-Canvas flag is disabled at chrome://flags/#canvas-draw-element (enable it and restart Chrome).";
+var MINIMUM_CHROME_VERSION_FOR_NESTED_HTML_IN_CANVAS = 152;
+var getChromeMajorVersion = () => {
+  if (typeof navigator === "undefined") {
+    return null;
+  }
+  const match = navigator.userAgent.match(/\b(?:HeadlessChrome|Chrome)\/(\d+)/);
+  if (!match) {
+    return null;
+  }
+  return Number(match[1]);
+};
 function assertHtmlInCanvasDimensions(width, height) {
   if (typeof width !== "number" || typeof height !== "number") {
     throw new Error(`HtmlInCanvas: \`width\` and \`height\` must be numbers. Received width=${String(width)}, height=${String(height)}.`);
@@ -13285,6 +13472,10 @@ var HtmlInCanvasContent = forwardRef9(({
 }, ref) => {
   const ancestor = useContext32(HtmlInCanvasAncestorContext);
   assertHtmlInCanvasDimensions(width, height);
+  const chromeMajorVersion = getChromeMajorVersion();
+  if (ancestor && chromeMajorVersion !== null && chromeMajorVersion < MINIMUM_CHROME_VERSION_FOR_NESTED_HTML_IN_CANVAS) {
+    throw new Error(`Nested <HtmlInCanvas> components require Chrome ${MINIMUM_CHROME_VERSION_FOR_NESTED_HTML_IN_CANVAS} or newer, but the current browser is Chrome ${chromeMajorVersion}. Upgrade Chrome or avoid nesting components that use <HtmlInCanvas>, such as shapes with effects.`);
+  }
   const resolvedPixelDensity = resolveHtmlInCanvasPixelDensity(pixelDensity);
   const canvasWidth = Math.ceil(width * resolvedPixelDensity);
   const canvasHeight = Math.ceil(height * resolvedPixelDensity);
@@ -13503,20 +13694,20 @@ var HtmlInCanvasContent = forwardRef9(({
       continueRender2(handle);
     };
   }, [width, height, continueRender2, delayRender2, canvasSizeKey]);
-  const innerStyle = useMemo31(() => {
+  const innerStyle = useMemo32(() => {
     return {
       width,
       height
     };
   }, [width, height]);
-  const canvasStyle = useMemo31(() => {
+  const canvasStyle = useMemo32(() => {
     return {
       width,
       height,
       ...style ?? {}
     };
   }, [height, style, width]);
-  const ancestorValue = useMemo31(() => {
+  const ancestorValue = useMemo32(() => {
     return {
       requestParentPaint: () => {
         canvas2dRef.current?.requestPaint?.();
@@ -13549,6 +13740,10 @@ var HtmlInCanvasInner = forwardRef9(({
   pixelDensity,
   controls,
   style,
+  cropLeft,
+  cropRight,
+  cropTop,
+  cropBottom,
   durationInFrames,
   name,
   ...sequenceProps
@@ -13563,6 +13758,14 @@ var HtmlInCanvasInner = forwardRef9(({
       ref.current = node;
     }
   }, [ref]);
+  const croppedStyle = useCropStyle({
+    cropLeft,
+    cropRight,
+    cropTop,
+    cropBottom,
+    style: style ?? null,
+    componentName: "<HtmlInCanvas />"
+  });
   return /* @__PURE__ */ jsx25(Sequence, {
     durationInFrames,
     name: name ?? "<HtmlInCanvas>",
@@ -13581,7 +13784,7 @@ var HtmlInCanvasInner = forwardRef9(({
       onInit,
       pixelDensity,
       controls,
-      style,
+      style: croppedStyle ?? undefined,
       children
     })
   });
@@ -13600,7 +13803,8 @@ var htmlInCanvasSchema = {
   },
   ...transformSchema,
   ...backgroundSchema,
-  ...borderSchema
+  ...borderSchema,
+  ...cropSchema
 };
 var HtmlInCanvasWrapped = withInteractivitySchema({
   Component: HtmlInCanvasInner,
@@ -13622,6 +13826,7 @@ function truncateSrcForLabel(src) {
 }
 var canvasImageSchema = {
   ...baseSchema,
+  ...cropSchema,
   ...premountSchema,
   fit: {
     type: "enum",
@@ -13752,7 +13957,7 @@ var CanvasImageContent = forwardRef10(({
     continueRender2(pending.handle);
     pendingLoadDelayRef.current = null;
   }, [continueRender2]);
-  const sourceCanvas = useMemo32(() => {
+  const sourceCanvas = useMemo33(() => {
     if (typeof document === "undefined") {
       return null;
     }
@@ -13966,9 +14171,14 @@ var CanvasImageInner = forwardRef10(({
   hidden,
   name,
   showInTimeline,
+  cropLeft,
+  cropRight,
+  cropTop,
+  cropBottom,
   stack,
   controls,
   _remotionInternalDocumentationLink,
+  _remotionInternalCropComponentName,
   outlineRef,
   ...canvasProps
 }, ref) => {
@@ -13998,6 +14208,14 @@ var CanvasImageInner = forwardRef10(({
     styleWhilePostmounted: styleWhilePostmounted ?? null,
     hideWhilePremounted: "display-none"
   });
+  const croppedStyle = useCropStyle({
+    cropLeft,
+    cropRight,
+    cropTop,
+    cropBottom,
+    style: premountingStyle,
+    componentName: _remotionInternalCropComponentName ?? "<CanvasImage />"
+  });
   return /* @__PURE__ */ jsx26(Freeze, {
     frame: freezeFrame,
     active: isPremountingOrPostmounting,
@@ -14029,7 +14247,7 @@ var CanvasImageInner = forwardRef10(({
         effects,
         controls,
         className,
-        style: premountingStyle ?? undefined,
+        style: croppedStyle ?? undefined,
         id,
         onError,
         pauseWhenLoading,
@@ -14260,6 +14478,10 @@ var NativeImgInner = ({
   style,
   styleWhilePremounted,
   styleWhilePostmounted,
+  cropLeft,
+  cropRight,
+  cropTop,
+  cropBottom,
   controls,
   outlineRef: refForOutline,
   ...props2
@@ -14285,6 +14507,14 @@ var NativeImgInner = ({
     styleWhilePostmounted: styleWhilePostmounted ?? null,
     hideWhilePremounted: "display-none"
   });
+  const croppedStyle = useCropStyle({
+    cropLeft,
+    cropRight,
+    cropTop,
+    cropBottom,
+    style: premountingStyle,
+    componentName: "<Img />"
+  });
   return /* @__PURE__ */ jsx28(Freeze, {
     frame: freezeFrame,
     active: isPremountingOrPostmounting,
@@ -14309,7 +14539,7 @@ var NativeImgInner = ({
       children: /* @__PURE__ */ jsx28(ImgContent, {
         src,
         refForOutline,
-        style: premountingStyle ?? undefined,
+        style: croppedStyle ?? undefined,
         ...props2
       })
     })
@@ -14324,6 +14554,7 @@ var imgSchema = {
     keyframable: false
   },
   ...baseSchema,
+  ...cropSchema,
   ...premountSchema,
   ...transformSchema,
   ...backgroundSchema,
@@ -14392,6 +14623,10 @@ var ImgInner = ({
   height,
   className,
   style,
+  cropLeft,
+  cropRight,
+  cropTop,
+  cropBottom,
   id,
   pauseWhenLoading,
   maxRetries,
@@ -14423,6 +14658,10 @@ var ImgInner = ({
       height,
       className,
       style,
+      cropLeft,
+      cropRight,
+      cropTop,
+      cropBottom,
       id,
       pauseWhenLoading: shouldPauseWhenLoading,
       maxRetries,
@@ -14452,6 +14691,10 @@ var ImgInner = ({
     effects,
     className,
     style,
+    cropLeft,
+    cropRight,
+    cropTop,
+    cropBottom,
     id,
     pauseWhenLoading: shouldPauseWhenLoading,
     maxRetries,
@@ -14470,6 +14713,7 @@ var ImgInner = ({
     showInTimeline,
     stack,
     _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/img",
+    _remotionInternalCropComponentName: "<Img />",
     controls,
     outlineRef: refForOutline,
     ...canvasProps
@@ -14518,9 +14762,22 @@ var interactiveTextElementSchema = {
 };
 var interactiveSvgTextElementSchema = {
   ...interactiveElementSchema,
+  ...svgPaintSchema,
   ...textSchema,
   ...textContentSchema
 };
+var interactiveSvgElementSchema = {
+  ...interactiveElementSchema,
+  ...svgPaintSchema
+};
+var interactiveSvgStrokeElementSchema = {
+  ...interactiveElementSchema,
+  ...svgStrokeSchema
+};
+var interactiveSvgRootElementSchema = {
+  ...interactiveBorderElementSchema,
+  ...svgPaintSchema
+};
 var setRef = (ref, value) => {
   if (typeof ref === "function") {
     ref(value);
@@ -14588,8 +14845,11 @@ var makeInteractiveElement = (tag, displayName, schema) => {
 var makeInteractiveTextElement = (tag, displayName) => {
   return makeInteractiveElement(tag, displayName, interactiveTextElementSchema);
 };
-var makeInteractiveNonTextElement = (tag, displayName) => {
-  return makeInteractiveElement(tag, displayName, interactiveElementSchema);
+var makeInteractiveSvgElement = (tag, displayName) => {
+  return makeInteractiveElement(tag, displayName, interactiveSvgElementSchema);
+};
+var makeInteractiveSvgStrokeElement = (tag, displayName) => {
+  return makeInteractiveElement(tag, displayName, interactiveSvgStrokeElementSchema);
 };
 var Interactive = {
   baseSchema,
@@ -14597,6 +14857,9 @@ var Interactive = {
   textSchema,
   backgroundSchema,
   borderSchema,
+  cropSchema,
+  svgPaintSchema,
+  svgStrokeSchema,
   premountSchema,
   sequenceSchema,
   withSchema,
@@ -14605,13 +14868,13 @@ var Interactive = {
   Article: makeInteractiveTextElement("article", "<Interactive.Article>"),
   Aside: makeInteractiveTextElement("aside", "<Interactive.Aside>"),
   Button: makeInteractiveTextElement("button", "<Interactive.Button>"),
-  Circle: makeInteractiveNonTextElement("circle", "<Interactive.Circle>"),
+  Circle: makeInteractiveSvgElement("circle", "<Interactive.Circle>"),
   Code: makeInteractiveTextElement("code", "<Interactive.Code>"),
   Div: makeInteractiveTextElement("div", "<Interactive.Div>"),
-  Ellipse: makeInteractiveNonTextElement("ellipse", "<Interactive.Ellipse>"),
+  Ellipse: makeInteractiveSvgElement("ellipse", "<Interactive.Ellipse>"),
   Em: makeInteractiveTextElement("em", "<Interactive.Em>"),
   Footer: makeInteractiveTextElement("footer", "<Interactive.Footer>"),
-  G: makeInteractiveNonTextElement("g", "<Interactive.G>"),
+  G: makeInteractiveSvgElement("g", "<Interactive.G>"),
   H1: makeInteractiveTextElement("h1", "<Interactive.H1>"),
   H2: makeInteractiveTextElement("h2", "<Interactive.H2>"),
   H3: makeInteractiveTextElement("h3", "<Interactive.H3>"),
@@ -14621,19 +14884,19 @@ var Interactive = {
   Header: makeInteractiveTextElement("header", "<Interactive.Header>"),
   Label: makeInteractiveTextElement("label", "<Interactive.Label>"),
   Li: makeInteractiveTextElement("li", "<Interactive.Li>"),
-  Line: makeInteractiveNonTextElement("line", "<Interactive.Line>"),
+  Line: makeInteractiveSvgStrokeElement("line", "<Interactive.Line>"),
   Main: makeInteractiveTextElement("main", "<Interactive.Main>"),
   Nav: makeInteractiveTextElement("nav", "<Interactive.Nav>"),
   Ol: makeInteractiveTextElement("ol", "<Interactive.Ol>"),
   P: makeInteractiveTextElement("p", "<Interactive.P>"),
-  Path: makeInteractiveNonTextElement("path", "<Interactive.Path>"),
+  Path: makeInteractiveSvgElement("path", "<Interactive.Path>"),
   Pre: makeInteractiveTextElement("pre", "<Interactive.Pre>"),
-  Rect: makeInteractiveNonTextElement("rect", "<Interactive.Rect>"),
+  Rect: makeInteractiveSvgElement("rect", "<Interactive.Rect>"),
   Section: makeInteractiveTextElement("section", "<Interactive.Section>"),
   Small: makeInteractiveTextElement("small", "<Interactive.Small>"),
   Span: makeInteractiveTextElement("span", "<Interactive.Span>"),
   Strong: makeInteractiveTextElement("strong", "<Interactive.Strong>"),
-  Svg: makeInteractiveElement("svg", "<Interactive.Svg>", interactiveBorderElementSchema),
+  Svg: makeInteractiveElement("svg", "<Interactive.Svg>", interactiveSvgRootElementSchema),
   Text: makeInteractiveElement("text", "<Interactive.Text>", interactiveSvgTextElementSchema),
   Ul: makeInteractiveTextElement("ul", "<Interactive.Ul>")
 };
@@ -14721,7 +14984,7 @@ var CompositionManagerProvider = ({
       getCompositions: () => currentcompositionsRef.current
     };
   }, []);
-  const compositionManagerSetters = useMemo33(() => {
+  const compositionManagerSetters = useMemo34(() => {
     return {
       registerComposition,
       unregisterComposition,
@@ -14737,7 +15000,7 @@ var CompositionManagerProvider = ({
     unregisterFolder,
     onlyRenderComposition
   ]);
-  const compositionManagerContextValue = useMemo33(() => {
+  const compositionManagerContextValue = useMemo34(() => {
     return {
       compositions,
       folders,
@@ -14859,7 +15122,7 @@ var MediaEnabledProvider = ({
   videoEnabled,
   audioEnabled
 }) => {
-  const value = useMemo34(() => ({ videoEnabled, audioEnabled }), [videoEnabled, audioEnabled]);
+  const value = useMemo35(() => ({ videoEnabled, audioEnabled }), [videoEnabled, audioEnabled]);
   return /* @__PURE__ */ jsx31(MediaEnabledContext.Provider, {
     value,
     children
@@ -14875,13 +15138,13 @@ var RemotionRootContexts = ({
   audioEnabled,
   frameState
 }) => {
-  const nonceContext = useMemo35(() => {
+  const nonceContext = useMemo36(() => {
     let counter = 0;
     return {
       getNonce: () => counter++
     };
   }, []);
-  const logging = useMemo35(() => {
+  const logging = useMemo36(() => {
     return { logLevel, mountTime: Date.now() };
   }, [logLevel]);
   return /* @__PURE__ */ jsx32(LogLevelContext.Provider, {
@@ -15188,7 +15451,7 @@ var OffthreadVideoForRendering = ({
   if (!src) {
     throw new TypeError("No `src` was passed to <OffthreadVideo>.");
   }
-  const id = useMemo36(() => `offthreadvideo-${random(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
+  const id = useMemo37(() => `offthreadvideo-${random(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     src,
     sequenceContext?.cumulatedFrom,
     sequenceContext?.relativeFrom,
@@ -15243,14 +15506,14 @@ var OffthreadVideoForRendering = ({
     sequenceContext?.cumulatedNegativeFrom,
     audioStreamIndex
   ]);
-  const currentTime = useMemo36(() => {
+  const currentTime = useMemo37(() => {
     return getExpectedMediaFrameUncorrected({
       frame,
       playbackRate: playbackRate || 1,
       startFrom: -mediaStartsAt
     }) / videoConfig.fps;
   }, [frame, mediaStartsAt, playbackRate, videoConfig.fps]);
-  const actualSrc = useMemo36(() => {
+  const actualSrc = useMemo37(() => {
     return getOffthreadVideoSource({
       src,
       currentTime,
@@ -15338,7 +15601,7 @@ var OffthreadVideoForRendering = ({
       cancelRender("Failed to load image with src " + imageSrc);
     }
   }, [imageSrc, onError]);
-  const className = useMemo36(() => {
+  const className = useMemo37(() => {
     return [OBJECTFIT_CONTAIN_CLASS_NAME, props2.className].filter(truthy).join(" ");
   }, [props2.className]);
   const onImageFrame = useCallback22((img) => {
@@ -15407,7 +15670,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     throw new Error("SharedAudioContext not found");
   }
   const videoRef = useRef27(null);
-  const sharedSource = useMemo37(() => {
+  const sharedSource = useMemo38(() => {
     if (!context.audioContext) {
       return null;
     }
@@ -15610,7 +15873,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
       current.preload = "auto";
     }
   }, []);
-  const actualStyle = useMemo37(() => {
+  const actualStyle = useMemo38(() => {
     return {
       ...style
     };
@@ -15807,7 +16070,7 @@ function useRemotionContexts() {
   const visualModePropStatusesRefContext = React40.useContext(VisualModePropStatusesRefContext);
   const bufferManagerContext = React40.useContext(BufferingContextReact);
   const logLevelContext = React40.useContext(LogLevelContext);
-  return useMemo38(() => ({
+  return useMemo39(() => ({
     compositionManagerCtx,
     timelineContext,
     setTimelineContext,
@@ -15916,6 +16179,7 @@ var Internals = {
   sequenceStyleSchema,
   sequenceVisualStyleSchema,
   sequencePremountSchema,
+  sequenceCropSchema,
   textSchema,
   transformSchema,
   premountSchema,
@@ -16039,7 +16303,9 @@ var Internals = {
   hiddenField,
   durationInFramesField,
   freezeField,
-  fromField
+  fromField,
+  resolveSequenceCrop,
+  useCropStyle
 };
 var flattenChildren = (children) => {
   const childrenArray = React41.Children.toArray(children);
@@ -16109,7 +16375,7 @@ var validateSeriesSequenceProps = ({
   return offset;
 };
 var SeriesInner = (props2) => {
-  const childrenValue = useMemo39(() => {
+  const childrenValue = useMemo40(() => {
     const flattenedChildren = flattenChildren(props2.children);
     const renderChildren = (i, startFrame) => {
       if (i === flattenedChildren.length) {
@@ -16445,7 +16711,7 @@ var VideoForRenderingForwardFunction = ({
   const mountTime = useMountTime();
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
   const { registerRenderAsset, unregisterRenderAsset } = useContext39(RenderAssetManager);
-  const id = useMemo40(() => `video-${random(props2.src ?? "")}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
+  const id = useMemo41(() => `video-${random(props2.src ?? "")}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     props2.src,
     sequenceContext?.cumulatedFrom,
     sequenceContext?.relativeFrom,
@@ -16776,7 +17042,7 @@ addSequenceStackTraces(Composition);
 addSequenceStackTraces(Folder);
 
 // ../shapes/dist/esm/index.mjs
-import React, { useCallback as useCallback26, useMemo as useMemo41, useRef as useRef29 } from "react";
+import React, { useCallback as useCallback26, useMemo as useMemo42, useRef as useRef29 } from "react";
 import { version } from "react-dom";
 import { jsx as jsx40, jsxs as jsxs4 } from "react/jsx-runtime";
 import { jsx as jsx210 } from "react/jsx-runtime";
@@ -16958,13 +17224,13 @@ var RenderSvg = ({
   stack,
   ...props
 }) => {
-  const actualStyle = useMemo41(() => {
+  const actualStyle = useMemo42(() => {
     return {
       overflow: "visible",
       ...style ?? {}
     };
   }, [style]);
-  const actualPathStyle = useMemo41(() => {
+  const actualPathStyle = useMemo42(() => {
     return {
       transformBox: "fill-box",
       ...pathStyle ?? {}
@@ -19945,7 +20211,7 @@ var useHoverTransforms = (ref, disabled) => {
     progress: 0,
     isActive: false
   });
-  const eventTarget = useMemo43(() => new EventTarget, []);
+  const eventTarget = useMemo44(() => new EventTarget, []);
   useEffect21(() => {
     if (disabled) {
       eventTarget.dispatchEvent(new Event("disabled"));