@remotion/maptiler 4.0.529 → 4.0.530

package/dist/MapLayer.d.ts

@@ -4,4 +4,4 @@ export type MapLayerProps = InteractiveBaseProps & Pick<InteractivePremountProps
     readonly beforeId?: string;
     readonly layer: LayerSpecification;
 };
-export declare const MapLayer: ({ from, durationInFrames, trimBefore, playbackRate, freeze, hidden, name, showInTimeline, premountFor, postmountFor, ...props }: MapLayerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MapLayer: ({ from, durationInFrames, trimBefore, playbackRate, loop, freeze, hidden, name, showInTimeline, premountFor, postmountFor, ...props }: MapLayerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/MapOverlay.d.ts

@@ -24,7 +24,7 @@ export declare const MapOverlay: import("react").ComponentType<InteractiveBasePr
     readonly opacity?: number | undefined;
     readonly rotation?: number | undefined;
     readonly rotationAlignment?: "map" | "viewport" | undefined;
-} & import("react").RefAttributes<HTMLDivElement>>;
+}>;
 export declare const MapMarker: import("react").ComponentType<InteractiveBaseProps & InteractivePremountProps & InteractiveTransformProps & {
     readonly anchor?: MapOverlayAnchor | undefined;
     readonly children?: ReactNode;
@@ -36,4 +36,4 @@ export declare const MapMarker: import("react").ComponentType<InteractiveBasePro
     readonly opacity?: number | undefined;
     readonly rotation?: number | undefined;
     readonly rotationAlignment?: "map" | "viewport" | undefined;
-} & import("react").RefAttributes<HTMLDivElement>>;
+}>;

package/dist/MapRegion.d.ts

@@ -20,4 +20,4 @@ export declare const MapRegion: import("react").ComponentType<InteractiveBasePro
     readonly progress?: number | undefined;
     readonly strokeColor?: string | undefined;
     readonly strokeWidth?: number | undefined;
-} & import("react").RefAttributes<HTMLDivElement>>;
+}>;

package/dist/MapRoute.d.ts

@@ -18,4 +18,4 @@ export declare const MapRoute: import("react").ComponentType<InteractiveBaseProp
     readonly progress?: number | undefined;
     readonly strokeColor?: string | undefined;
     readonly strokeWidth?: number | undefined;
-} & import("react").RefAttributes<HTMLDivElement>>;
+}>;

package/dist/MapSource.d.ts

@@ -6,4 +6,4 @@ export type MapSourceProps = InteractiveBaseProps & Pick<InteractivePremountProp
     readonly id: string;
     readonly source: SourceSpecification;
 };
-export declare const MapSource: ({ from, durationInFrames, trimBefore, playbackRate, freeze, hidden, name, showInTimeline, premountFor, postmountFor, ...props }: MapSourceProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MapSource: ({ from, durationInFrames, trimBefore, playbackRate, loop, freeze, hidden, name, showInTimeline, premountFor, postmountFor, ...props }: MapSourceProps) => import("react/jsx-runtime").JSX.Element;

package/dist/MapViewport.d.ts

@@ -1,10 +1,10 @@
 import { Map as MapTilerMap, type MapOptions } from '@maptiler/sdk';
-import type { ComponentType, ReactNode } from 'react';
 import '@maptiler/sdk/style.css';
-import { type InteractiveBaseProps, type InteractivePremountProps, type SequenceControls } from 'remotion';
+import type { ComponentType, ReactNode } from 'react';
+import { type InteractiveBaseProps, type InteractiveCropProps, type InteractivePremountProps, type InteractiveTransformProps, type SequenceControls } from 'remotion';
 export type MapViewportMapOptions = Omit<MapOptions, 'apiKey' | 'bearing' | 'center' | 'container' | 'fadeDuration' | 'interactive' | 'language' | 'padding' | 'pitch' | 'projection' | 'style' | 'terrain' | 'terrainExaggeration' | 'zoom'>;
 export type MapAdministrativeBorders = 'all' | 'country-only' | 'none';
-export type MapViewportProps = InteractiveBaseProps & InteractivePremountProps & {
+export type MapViewportProps = InteractiveBaseProps & InteractiveCropProps & InteractivePremountProps & InteractiveTransformProps & {
     readonly apiKey: string | null;
     readonly backgroundColor?: string;
     readonly bearing?: number;

package/dist/esm/index.mjs

@@ -237,7 +237,8 @@ var MapHeatmap = (props) => {
     name,
     showInTimeline,
     trimBefore,
-    playbackRate
+    playbackRate,
+    loop
   } = props;
   const {
     effectivePremountFor,
@@ -248,7 +249,11 @@ var MapHeatmap = (props) => {
     postmountingActive
   } = Internals2.usePremounting({
     from: from ?? 0,
-    durationInFrames: durationInFrames ?? Infinity,
+    durationInFrames: Internals2.resolveSequenceDuration({
+      durationInFrames,
+      playbackRate,
+      loop
+    }),
     premountFor: premountFor ?? null,
     postmountFor: postmountFor ?? null,
     style: null,
@@ -264,6 +269,7 @@ var MapHeatmap = (props) => {
       from: from ?? 0,
       trimBefore,
       playbackRate,
+      loop,
       durationInFrames: durationInFrames ?? Infinity,
       freeze,
       hidden,
@@ -376,6 +382,7 @@ var MapLayer = ({
   durationInFrames,
   trimBefore,
   playbackRate,
+  loop,
   freeze,
   hidden,
   name,
@@ -393,7 +400,11 @@ var MapLayer = ({
     postmountingActive
   } = Internals3.usePremounting({
     from: from ?? 0,
-    durationInFrames: durationInFrames ?? Infinity,
+    durationInFrames: Internals3.resolveSequenceDuration({
+      durationInFrames,
+      playbackRate,
+      loop
+    }),
     premountFor: premountFor ?? null,
     postmountFor: postmountFor ?? null,
     style: null,
@@ -410,6 +421,7 @@ var MapLayer = ({
       durationInFrames,
       trimBefore,
       playbackRate,
+      loop,
       freeze,
       hidden,
       showInTimeline: showInTimeline ?? false,
@@ -425,12 +437,7 @@ var MapLayer = ({
   });
 };
 // src/MapOverlay.tsx
-import {
-  forwardRef,
-  useContext as useContext5,
-  useImperativeHandle,
-  useRef as useRef4
-} from "react";
+import { useContext as useContext5 } from "react";
 import {
   Interactive,
   Freeze as Freeze3,
@@ -501,7 +508,7 @@ var mapOverlaySchema = {
   },
   ...Interactive.transformSchema
 };
-var MapOverlayRefForwardingFunction = ({
+var MapOverlayInner = ({
   anchor = "center",
   children,
   latitude,
@@ -520,18 +527,17 @@ var MapOverlayRefForwardingFunction = ({
   styleWhilePostmounted,
   trimBefore,
   playbackRate,
+  loop,
   freeze,
   hidden,
   name,
   showInTimeline,
   controls
-}, ref) => {
+}) => {
   const { map } = useContext5(MapTilerContext);
-  const refForOutline = useRef4(null);
   const point = map?.project([longitude, latitude]);
   const horizontalAnchor = anchor.includes("left") ? 0 : anchor.includes("right") ? -100 : -50;
   const verticalAnchor = anchor.includes("top") ? 0 : anchor.includes("bottom") ? -100 : -50;
-  useImperativeHandle(ref, () => refForOutline.current, []);
   const {
     effectivePremountFor,
     effectivePostmountFor,
@@ -542,7 +548,11 @@ var MapOverlayRefForwardingFunction = ({
     premountingStyle
   } = Internals4.usePremounting({
     from: from ?? 0,
-    durationInFrames: durationInFrames ?? Infinity,
+    durationInFrames: Internals4.resolveSequenceDuration({
+      durationInFrames,
+      playbackRate,
+      loop
+    }),
     premountFor: premountFor ?? null,
     postmountFor: postmountFor ?? null,
     style: { opacity, ...style },
@@ -558,19 +568,18 @@ var MapOverlayRefForwardingFunction = ({
       from: from ?? 0,
       trimBefore,
       playbackRate,
+      loop,
       durationInFrames: durationInFrames ?? Infinity,
       freeze,
       hidden,
       name: name ?? "<MapOverlay>",
       showInTimeline: showInTimeline ?? true,
       controls,
-      outlineRef: refForOutline,
       _remotionInternalPremountDisplay: effectivePremountFor || null,
       _remotionInternalPostmountDisplay: effectivePostmountFor || null,
       _remotionInternalIsPremounting: premountingActive,
       _remotionInternalIsPostmounting: postmountingActive,
       children: /* @__PURE__ */ jsx3("div", {
-        ref: refForOutline,
         style: {
           left: (point?.x ?? 0) + offsetX,
           opacity,
@@ -587,7 +596,6 @@ var MapOverlayRefForwardingFunction = ({
     })
   });
 };
-var MapOverlayInner = forwardRef(MapOverlayRefForwardingFunction);
 var MapOverlay = Interactive.withSchema({
   Component: MapOverlayInner,
   componentName: "<MapOverlay>",
@@ -599,7 +607,7 @@ var MapMarker = MapOverlay;
 import {
   helpers as helpers2
 } from "@maptiler/sdk";
-import { useContext as useContext6, useEffect as useEffect4, useRef as useRef5 } from "react";
+import { useContext as useContext6, useEffect as useEffect4, useRef as useRef4 } from "react";
 import {
   Freeze as Freeze4,
   Sequence as Sequence4,
@@ -633,9 +641,9 @@ var MapPointDrawing = ({
 }) => {
   const { map, styleRevision } = useContext6(MapTilerContext);
   const { continueRender, delayRender } = useDelayRender3();
-  const layerIdsRef = useRef5(null);
+  const layerIdsRef = useRef4(null);
   const applyPremountVisibility = useMapPremounting(() => Object.entries(layerIdsRef.current ?? {}).filter(([key]) => key.endsWith("LayerId")).map(([, value]) => value));
-  const optionsRef = useRef5(null);
+  const optionsRef = useRef4(null);
   const outlineColorIsDynamic = typeof outlineColor === "string";
   const outlineOpacityIsDynamic = typeof outlineOpacity === "number";
   const outlineWidthIsDynamic = typeof outlineWidth === "number";
@@ -830,7 +838,8 @@ var MapPoint = (props) => {
     name,
     showInTimeline,
     trimBefore,
-    playbackRate
+    playbackRate,
+    loop
   } = props;
   const {
     effectivePremountFor,
@@ -841,7 +850,11 @@ var MapPoint = (props) => {
     postmountingActive
   } = Internals5.usePremounting({
     from: from ?? 0,
-    durationInFrames: durationInFrames ?? Infinity,
+    durationInFrames: Internals5.resolveSequenceDuration({
+      durationInFrames,
+      playbackRate,
+      loop
+    }),
     premountFor: premountFor ?? null,
     postmountFor: postmountFor ?? null,
     style: null,
@@ -857,6 +870,7 @@ var MapPoint = (props) => {
       from: from ?? 0,
       trimBefore,
       playbackRate,
+      loop,
       durationInFrames: durationInFrames ?? Infinity,
       freeze,
       hidden,
@@ -877,7 +891,7 @@ var MapPoint = (props) => {
 import {
   helpers as helpers4
 } from "@maptiler/sdk";
-import { useContext as useContext8, useEffect as useEffect6, useMemo as useMemo2, useRef as useRef7 } from "react";
+import { useContext as useContext8, useEffect as useEffect6, useMemo as useMemo2, useRef as useRef6 } from "react";
 import {
   Freeze as Freeze6,
   Sequence as Sequence6,
@@ -890,7 +904,7 @@ import {
   helpers as helpers3
 } from "@maptiler/sdk";
 import { length as getLineLength, lineSliceAlong, lineString } from "@turf/turf";
-import { useContext as useContext7, useEffect as useEffect5, useRef as useRef6, useState } from "react";
+import { useContext as useContext7, useEffect as useEffect5, useRef as useRef5, useState } from "react";
 import {
   Freeze as Freeze5,
   Sequence as Sequence5,
@@ -974,9 +988,9 @@ var MapPolylineDrawing = ({
 }) => {
   const { map, styleRevision } = useContext7(MapTilerContext);
   const { cancelRender, continueRender, delayRender } = useDelayRender4();
-  const layerIdsRef = useRef6(null);
+  const layerIdsRef = useRef5(null);
   const applyPremountVisibility = useMapPremounting(() => Object.entries(layerIdsRef.current ?? {}).filter(([key]) => key.endsWith("LayerId")).map(([, value]) => value));
-  const optionsRef = useRef6(null);
+  const optionsRef = useRef5(null);
   const [layerRevision, setLayerRevision] = useState(0);
   const lineBlurIsDynamic = typeof lineBlur === "number";
   const lineColorIsDynamic = typeof lineColor === "string";
@@ -1213,7 +1227,8 @@ var MapPolyline = (props) => {
     name,
     showInTimeline,
     trimBefore,
-    playbackRate
+    playbackRate,
+    loop
   } = props;
   const {
     effectivePremountFor,
@@ -1224,7 +1239,11 @@ var MapPolyline = (props) => {
     postmountingActive
   } = Internals6.usePremounting({
     from: from ?? 0,
-    durationInFrames: durationInFrames ?? Infinity,
+    durationInFrames: Internals6.resolveSequenceDuration({
+      durationInFrames,
+      playbackRate,
+      loop
+    }),
     premountFor: premountFor ?? null,
     postmountFor: postmountFor ?? null,
     style: null,
@@ -1240,6 +1259,7 @@ var MapPolyline = (props) => {
       from: from ?? 0,
       trimBefore,
       playbackRate,
+      loop,
       durationInFrames: durationInFrames ?? Infinity,
       freeze,
       hidden,
@@ -1321,9 +1341,9 @@ var MapPolygonDrawing = ({
 }) => {
   const { map, styleRevision } = useContext8(MapTilerContext);
   const { continueRender, delayRender } = useDelayRender5();
-  const layerIdsRef = useRef7(null);
+  const layerIdsRef = useRef6(null);
   const applyPremountVisibility = useMapPremounting(() => Object.entries(layerIdsRef.current ?? {}).filter(([key]) => key.endsWith("LayerId")).map(([, value]) => value));
-  const optionsRef = useRef7(null);
+  const optionsRef = useRef6(null);
   const fillColorIsDynamic = typeof fillColor === "string";
   const fillOpacityIsDynamic = typeof fillOpacity === "number";
   const outlineBlurIsDynamic = typeof outlineBlur === "number";
@@ -1519,7 +1539,8 @@ var MapPolygon = (props) => {
     name,
     showInTimeline,
     trimBefore,
-    playbackRate
+    playbackRate,
+    loop
   } = props;
   const {
     effectivePremountFor,
@@ -1530,7 +1551,11 @@ var MapPolygon = (props) => {
     postmountingActive
   } = Internals7.usePremounting({
     from: from ?? 0,
-    durationInFrames: durationInFrames ?? Infinity,
+    durationInFrames: Internals7.resolveSequenceDuration({
+      durationInFrames,
+      playbackRate,
+      loop
+    }),
     premountFor: premountFor ?? null,
     postmountFor: postmountFor ?? null,
     style: null,
@@ -1546,6 +1571,7 @@ var MapPolygon = (props) => {
       from: from ?? 0,
       trimBefore,
       playbackRate,
+      loop,
       durationInFrames: durationInFrames ?? Infinity,
       freeze,
       hidden,
@@ -1564,15 +1590,7 @@ var MapPolygon = (props) => {
 };
 // src/MapRegion.tsx
 import { length as getLineLength2, lineSliceAlong as lineSliceAlong2, lineString as lineString2 } from "@turf/turf";
-import {
-  forwardRef as forwardRef2,
-  useContext as useContext9,
-  useEffect as useEffect7,
-  useImperativeHandle as useImperativeHandle2,
-  useMemo as useMemo3,
-  useRef as useRef8,
-  useState as useState2
-} from "react";
+import { useContext as useContext9, useEffect as useEffect7, useMemo as useMemo3, useState as useState2 } from "react";
 import {
   Interactive as Interactive2,
   Freeze as Freeze7,
@@ -1792,14 +1810,11 @@ var MapRegionDrawing = ({
   return null;
 };
 var MapRegionBounds = ({
-  feature,
-  refForOutline
+  feature
 }) => {
   const { map } = useContext9(MapTilerContext);
   if (!map) {
-    return /* @__PURE__ */ jsx7("div", {
-      ref: refForOutline
-    });
+    return /* @__PURE__ */ jsx7("div", {});
   }
   const points = feature.geometry.coordinates.flat().map(([longitude, latitude]) => map.project([longitude, latitude]));
   const left = Math.min(...points.map((point) => point.x));
@@ -1807,7 +1822,6 @@ var MapRegionBounds = ({
   const top = Math.min(...points.map((point) => point.y));
   const bottom = Math.max(...points.map((point) => point.y));
   return /* @__PURE__ */ jsx7("div", {
-    ref: refForOutline,
     style: {
       height: bottom - top,
       left,
@@ -1820,7 +1834,7 @@ var MapRegionBounds = ({
     }
   });
 };
-var MapRegionRefForwardingFunction = ({
+var MapRegionInner = ({
   feature,
   fill = 0,
   fillColor,
@@ -1835,14 +1849,13 @@ var MapRegionRefForwardingFunction = ({
   postmountFor,
   trimBefore,
   playbackRate,
+  loop,
   freeze,
   hidden,
   name,
   showInTimeline,
   controls
-}, ref) => {
-  const refForOutline = useRef8(null);
-  useImperativeHandle2(ref, () => refForOutline.current, []);
+}) => {
   const {
     effectivePremountFor,
     effectivePostmountFor,
@@ -1852,7 +1865,11 @@ var MapRegionRefForwardingFunction = ({
     postmountingActive
   } = Internals8.usePremounting({
     from: from ?? 0,
-    durationInFrames: durationInFrames ?? Infinity,
+    durationInFrames: Internals8.resolveSequenceDuration({
+      durationInFrames,
+      playbackRate,
+      loop
+    }),
     premountFor: premountFor ?? null,
     postmountFor: postmountFor ?? null,
     style: null,
@@ -1868,13 +1885,13 @@ var MapRegionRefForwardingFunction = ({
       from: from ?? 0,
       trimBefore,
       playbackRate,
+      loop,
       durationInFrames: durationInFrames ?? Infinity,
       freeze,
       hidden,
       name: name ?? `<${feature.properties.name}>`,
       showInTimeline: showInTimeline ?? true,
       controls,
-      outlineRef: refForOutline,
       _remotionInternalPremountDisplay: effectivePremountFor || null,
       _remotionInternalPostmountDisplay: effectivePostmountFor || null,
       _remotionInternalIsPremounting: premountingActive,
@@ -1892,15 +1909,13 @@ var MapRegionRefForwardingFunction = ({
             strokeWidth
           }),
           /* @__PURE__ */ jsx7(MapRegionBounds, {
-            feature,
-            refForOutline
+            feature
           })
         ]
       })
     })
   });
 };
-var MapRegionInner = forwardRef2(MapRegionRefForwardingFunction);
 var MapRegion = Interactive2.withSchema({
   Component: MapRegionInner,
   componentName: "<MapRegion>",
@@ -1909,15 +1924,7 @@ var MapRegion = Interactive2.withSchema({
 });
 // src/MapRoute.tsx
 import { length as getLineLength3, lineSliceAlong as lineSliceAlong3, lineString as lineString3 } from "@turf/turf";
-import {
-  forwardRef as forwardRef3,
-  useContext as useContext10,
-  useEffect as useEffect8,
-  useImperativeHandle as useImperativeHandle3,
-  useMemo as useMemo4,
-  useRef as useRef9,
-  useState as useState3
-} from "react";
+import { useContext as useContext10, useEffect as useEffect8, useMemo as useMemo4, useState as useState3 } from "react";
 import {
   Interactive as Interactive3,
   Freeze as Freeze8,
@@ -2085,15 +2092,10 @@ var MapRouteDrawing = ({
   }, [glowLayerId, map, sourceId]);
   return null;
 };
-var MapRouteBounds = ({
-  feature,
-  refForOutline
-}) => {
+var MapRouteBounds = ({ feature }) => {
   const { map } = useContext10(MapTilerContext);
   if (!map) {
-    return /* @__PURE__ */ jsx8("div", {
-      ref: refForOutline
-    });
+    return /* @__PURE__ */ jsx8("div", {});
   }
   const points = feature.geometry.coordinates.map(([longitude, latitude]) => map.project([longitude, latitude]));
   const left = Math.min(...points.map((point) => point.x));
@@ -2101,7 +2103,6 @@ var MapRouteBounds = ({
   const top = Math.min(...points.map((point) => point.y));
   const bottom = Math.max(...points.map((point) => point.y));
   return /* @__PURE__ */ jsx8("div", {
-    ref: refForOutline,
     style: {
       height: bottom - top,
       left,
@@ -2114,7 +2115,7 @@ var MapRouteBounds = ({
     }
   });
 };
-var MapRouteRefForwardingFunction = ({
+var MapRouteInner = ({
   feature,
   glow = 0.72,
   id,
@@ -2127,14 +2128,13 @@ var MapRouteRefForwardingFunction = ({
   postmountFor,
   trimBefore,
   playbackRate,
+  loop,
   freeze,
   hidden,
   name,
   showInTimeline,
   controls
-}, ref) => {
-  const refForOutline = useRef9(null);
-  useImperativeHandle3(ref, () => refForOutline.current, []);
+}) => {
   const {
     effectivePremountFor,
     effectivePostmountFor,
@@ -2144,7 +2144,11 @@ var MapRouteRefForwardingFunction = ({
     postmountingActive
   } = Internals9.usePremounting({
     from: from ?? 0,
-    durationInFrames: durationInFrames ?? Infinity,
+    durationInFrames: Internals9.resolveSequenceDuration({
+      durationInFrames,
+      playbackRate,
+      loop
+    }),
     premountFor: premountFor ?? null,
     postmountFor: postmountFor ?? null,
     style: null,
@@ -2160,13 +2164,13 @@ var MapRouteRefForwardingFunction = ({
       from: from ?? 0,
       trimBefore,
       playbackRate,
+      loop,
       durationInFrames: durationInFrames ?? Infinity,
       freeze,
       hidden,
       name: name ?? `<${feature.properties.name}>`,
       showInTimeline: showInTimeline ?? true,
       controls,
-      outlineRef: refForOutline,
       _remotionInternalPremountDisplay: effectivePremountFor || null,
       _remotionInternalPostmountDisplay: effectivePostmountFor || null,
       _remotionInternalIsPremounting: premountingActive,
@@ -2182,15 +2186,13 @@ var MapRouteRefForwardingFunction = ({
             strokeWidth
           }),
           /* @__PURE__ */ jsx8(MapRouteBounds, {
-            feature,
-            refForOutline
+            feature
           })
         ]
       })
     })
   });
 };
-var MapRouteInner = forwardRef3(MapRouteRefForwardingFunction);
 var MapRoute = Interactive3.withSchema({
   Component: MapRouteInner,
   componentName: "<MapRoute>",
@@ -2198,7 +2200,7 @@ var MapRoute = Interactive3.withSchema({
   supportsEffects: false
 });
 // src/MapSource.tsx
-import { useContext as useContext11, useEffect as useEffect9, useRef as useRef10 } from "react";
+import { useContext as useContext11, useEffect as useEffect9, useRef as useRef7 } from "react";
 import {
   Freeze as Freeze9,
   Sequence as Sequence9,
@@ -2208,7 +2210,7 @@ import {
 import { jsx as jsx9 } from "react/jsx-runtime";
 var MapSourceContent = ({ children, id, source }) => {
   const { map, styleRevision } = useContext11(MapTilerContext);
-  const sourceRef = useRef10(source);
+  const sourceRef = useRef7(source);
   const { continueRender, delayRender } = useDelayRender8();
   sourceRef.current = source;
   useEffect9(() => {
@@ -2266,6 +2268,7 @@ var MapSource = ({
   durationInFrames,
   trimBefore,
   playbackRate,
+  loop,
   freeze,
   hidden,
   name,
@@ -2283,7 +2286,11 @@ var MapSource = ({
     postmountingActive
   } = Internals10.usePremounting({
     from: from ?? 0,
-    durationInFrames: durationInFrames ?? Infinity,
+    durationInFrames: Internals10.resolveSequenceDuration({
+      durationInFrames,
+      playbackRate,
+      loop
+    }),
     premountFor: premountFor ?? null,
     postmountFor: postmountFor ?? null,
     style: null,
@@ -2300,6 +2307,7 @@ var MapSource = ({
       durationInFrames,
       trimBefore,
       playbackRate,
+      loop,
       freeze,
       hidden,
       showInTimeline: showInTimeline ?? false,
@@ -2315,21 +2323,11 @@ var MapSource = ({
   });
 };
 // src/MapViewport.tsx
-import { Map as MapTilerMap, MapStyle } from "@maptiler/sdk";
+import { MapStyle, Map as MapTilerMap } from "@maptiler/sdk";
 import"@maptiler/sdk/style.css";
-import {
-  forwardRef as forwardRef4,
-  useEffect as useEffect10,
-  useImperativeHandle as useImperativeHandle4,
-  useMemo as useMemo5,
-  useRef as useRef11,
-  useState as useState4
-} from "react";
+import { useEffect as useEffect10, useMemo as useMemo5, useRef as useRef8, useState as useState4 } from "react";
 import {
   Interactive as Interactive4,
-  Freeze as Freeze10,
-  Sequence as Sequence10,
-  Internals as Internals11,
   useDelayRender as useDelayRender9
 } from "remotion";
 import { jsx as jsx10, jsxs as jsxs3, Fragment as Fragment3 } from "react/jsx-runtime";
@@ -2471,9 +2469,9 @@ var MissingApiKey = () => {
     ]
   });
 };
-var MapViewportContentRefForwardingFunction = ({
+var MapViewportContent = ({
   apiKey,
-  premountingStyle,
+  style,
   backgroundColor = "#dfe7e2",
   bearing = 0,
   centerLatitude = 0,
@@ -2494,11 +2492,10 @@ var MapViewportContentRefForwardingFunction = ({
   terrain = false,
   terrainExaggeration = 1,
   zoom = 4
-}, ref) => {
-  const mapContainerRef = useRef11(null);
-  const mapRef = useRef11(null);
-  const viewportRef = useRef11(null);
-  const initialCameraRef = useRef11({
+}) => {
+  const mapContainerRef = useRef8(null);
+  const mapRef = useRef8(null);
+  const initialCameraRef = useRef8({
     bearing,
     centerLatitude,
     centerLongitude,
@@ -2509,7 +2506,7 @@ var MapViewportContentRefForwardingFunction = ({
     pitch,
     zoom
   });
-  const initialMapOptionsRef = useRef11({
+  const initialMapOptionsRef = useRef8({
     administrativeBorders,
     language,
     mapOptions,
@@ -2519,12 +2516,12 @@ var MapViewportContentRefForwardingFunction = ({
     terrain,
     terrainExaggeration
   });
-  const lastMapStyleRef = useRef11(mapStyle);
-  const lastLayerVisibilityRef = useRef11({
+  const lastMapStyleRef = useRef8(mapStyle);
+  const lastLayerVisibilityRef = useRef8({
     administrativeBorders,
     showLabels
   });
-  const onMapReadyRef = useRef11(onMapReady);
+  const onMapReadyRef = useRef8(onMapReady);
   onMapReadyRef.current = onMapReady;
   const { continueRender, delayRender } = useDelayRender9();
   const [map, setMap] = useState4(null);
@@ -2532,7 +2529,6 @@ var MapViewportContentRefForwardingFunction = ({
   const [styleRevision, setStyleRevision] = useState4(0);
   const [loadingHandle] = useState4(() => delayRender("Loading MapTiler map"));
   const contextValue = useMemo5(() => ({ cameraRevision, map, styleRevision }), [cameraRevision, map, styleRevision]);
-  useImperativeHandle4(ref, () => viewportRef.current, []);
   useEffect10(() => {
     if (!apiKey) {
       continueRender(loadingHandle);
@@ -2710,13 +2706,12 @@ var MapViewportContentRefForwardingFunction = ({
     }
   }, [map, projection]);
   return /* @__PURE__ */ jsx10("div", {
-    ref: viewportRef,
     style: {
       backgroundColor,
       inset: 0,
       overflow: "hidden",
       position: "absolute",
-      ...premountingStyle
+      ...style
     },
     children: apiKey ? /* @__PURE__ */ jsxs3(Fragment3, {
       children: [
@@ -2735,73 +2730,11 @@ var MapViewportContentRefForwardingFunction = ({
     }) : /* @__PURE__ */ jsx10(MissingApiKey, {})
   });
 };
-var MapViewportContent = forwardRef4(MapViewportContentRefForwardingFunction);
-var MapViewportRefForwardingFunction = ({
-  durationInFrames,
-  from,
-  trimBefore,
-  playbackRate,
-  freeze,
-  hidden,
-  name,
-  showInTimeline,
-  controls,
-  premountFor,
-  postmountFor,
-  styleWhilePremounted,
-  styleWhilePostmounted,
-  ...props
-}, ref) => {
-  const {
-    effectivePremountFor,
-    effectivePostmountFor,
-    freezeFrame,
-    isPremountingOrPostmounting,
-    premountingActive,
-    postmountingActive,
-    premountingStyle
-  } = Internals11.usePremounting({
-    from: from ?? 0,
-    durationInFrames: durationInFrames ?? Infinity,
-    premountFor: premountFor ?? null,
-    postmountFor: postmountFor ?? null,
-    style: null,
-    styleWhilePremounted: styleWhilePremounted ?? null,
-    styleWhilePostmounted: styleWhilePostmounted ?? null,
-    hideWhilePremounted: "opacity"
-  });
-  return /* @__PURE__ */ jsx10(Freeze10, {
-    frame: freezeFrame,
-    active: isPremountingOrPostmounting,
-    children: /* @__PURE__ */ jsx10(Sequence10, {
-      layout: "none",
-      durationInFrames,
-      from,
-      trimBefore,
-      playbackRate,
-      freeze,
-      hidden,
-      showInTimeline,
-      controls,
-      name: name ?? "<MapViewport>",
-      _remotionInternalPremountDisplay: effectivePremountFor || null,
-      _remotionInternalPostmountDisplay: effectivePostmountFor || null,
-      _remotionInternalIsPremounting: premountingActive,
-      _remotionInternalIsPostmounting: postmountingActive,
-      children: /* @__PURE__ */ jsx10(MapViewportContent, {
-        ...props,
-        ref,
-        premountingStyle
-      })
-    })
-  });
-};
-var MapViewportInner = forwardRef4(MapViewportRefForwardingFunction);
 var MapViewport = Interactive4.withSchema({
-  Component: MapViewportInner,
+  Component: MapViewportContent,
   componentName: "<MapViewport>",
   schema: mapViewportSchema,
-  supportsEffects: false
+  wrapInSequence: true
 });
 export {
   useMapTiler,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/maptiler",
-	"version": "4.0.529",
+	"version": "4.0.530",
 	"description": "MapTiler components for Remotion",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
@@ -25,7 +25,7 @@
 	"dependencies": {
 		"@maptiler/sdk": "4.0.2",
 		"@turf/turf": "7.3.2",
-		"remotion": "4.0.529"
+		"remotion": "4.0.530"
 	},
 	"peerDependencies": {
 		"react": ">=16.8.0",
@@ -42,7 +42,7 @@
 	"devDependencies": {
 		"react": "19.2.3",
 		"react-dom": "19.2.3",
-		"@remotion/eslint-config-internal": "4.0.529",
+		"@remotion/eslint-config-internal": "4.0.530",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},