@depup/lottie-react 3.0.0-depup.0 → 3.1.0-depup.0

package/README.md

@@ -13,8 +13,8 @@ npm install @depup/lottie-react
 
 | Field | Value |
 |-------|-------|
-| Original | [lottie-react](https://www.npmjs.com/package/lottie-react) @ 3.0.0 |
-| Processed | 2026-08-16 |
+| Original | [lottie-react](https://www.npmjs.com/package/lottie-react) @ 3.1.0 |
+| Processed | 2026-08-17 |
 | Smoke test | passed |
 | Deps updated | 0 |
 

package/build/animation/Lottie.cjs

@@ -1,7 +1,6 @@
-const require_runtime = require("../_virtual/_rolldown/runtime.cjs");
+"use client";
 const require_createLottieComponent = require("./createLottieComponent.cjs");
-let lottie_web = require("lottie-web");
-lottie_web = require_runtime.__toESM(lottie_web, 1);
+const require_useLottie = require("./useLottie.cjs");
 //#region src/animation/Lottie.tsx
 /**
 * Renders an animation.
@@ -34,6 +33,6 @@ lottie_web = require_runtime.__toESM(lottie_web, 1);
 * animation uses no expressions either: each carries a smaller copy of the
 * engine.
 */
-const Lottie = require_createLottieComponent.createLottieComponent(lottie_web.default);
+const Lottie = require_createLottieComponent.createLottieComponent(require_useLottie.fullEngine);
 //#endregion
 exports.Lottie = Lottie;

package/build/animation/Lottie.js

@@ -1,5 +1,6 @@
+"use client";
 import { createLottieComponent } from "./createLottieComponent.js";
-import lottie from "lottie-web";
+import { fullEngine } from "./useLottie.js";
 //#region src/animation/Lottie.tsx
 /**
 * Renders an animation.
@@ -32,6 +33,6 @@ import lottie from "lottie-web";
 * animation uses no expressions either: each carries a smaller copy of the
 * engine.
 */
-const Lottie = createLottieComponent(lottie);
+const Lottie = createLottieComponent(fullEngine);
 //#endregion
 export { Lottie };

package/build/animation/LottieDisplay.cjs

@@ -1,3 +1,4 @@
+"use client";
 const require_mergeRefs = require("../utils/mergeRefs.cjs");
 const require_polymorphicForwardRef = require("./polymorphicForwardRef.cjs");
 const require_renderStyledElement = require("./renderStyledElement.cjs");

package/build/animation/LottieDisplay.js

@@ -1,3 +1,4 @@
+"use client";
 import { mergeRefs } from "../utils/mergeRefs.js";
 import { polymorphicForwardRef } from "./polymorphicForwardRef.js";
 import { renderStyledElement } from "./renderStyledElement.js";

package/build/animation/LottieLight.cjs

@@ -1,7 +1,6 @@
-const require_runtime = require("../_virtual/_rolldown/runtime.cjs");
+"use client";
 const require_createLottieComponent = require("./createLottieComponent.cjs");
-let lottie_web_build_player_lottie_light_js = require("lottie-web/build/player/lottie_light.js");
-lottie_web_build_player_lottie_light_js = require_runtime.__toESM(lottie_web_build_player_lottie_light_js, 1);
+const require_useLottieLight = require("./useLottieLight.cjs");
 //#region src/animation/LottieLight.tsx
 /**
 * Renders an animation using the light build of the engine.
@@ -14,6 +13,6 @@ lottie_web_build_player_lottie_light_js = require_runtime.__toESM(lottie_web_bui
 * drawn at its static value; {@link LottieSvg} is the smaller build that keeps
 * expressions.
 */
-const LottieLight = require_createLottieComponent.createLottieComponent(lottie_web_build_player_lottie_light_js.default);
+const LottieLight = require_createLottieComponent.createLottieComponent(require_useLottieLight.lightEngine);
 //#endregion
 exports.LottieLight = LottieLight;

package/build/animation/LottieLight.js

@@ -1,5 +1,6 @@
+"use client";
 import { createLottieComponent } from "./createLottieComponent.js";
-import lottieLight from "lottie-web/build/player/lottie_light.js";
+import { lightEngine } from "./useLottieLight.js";
 //#region src/animation/LottieLight.tsx
 /**
 * Renders an animation using the light build of the engine.
@@ -12,6 +13,6 @@ import lottieLight from "lottie-web/build/player/lottie_light.js";
 * drawn at its static value; {@link LottieSvg} is the smaller build that keeps
 * expressions.
 */
-const LottieLight = createLottieComponent(lottieLight);
+const LottieLight = createLottieComponent(lightEngine);
 //#endregion
 export { LottieLight };

package/build/animation/LottieSvg.cjs

@@ -1,7 +1,6 @@
-const require_runtime = require("../_virtual/_rolldown/runtime.cjs");
+"use client";
 const require_createLottieComponent = require("./createLottieComponent.cjs");
-let lottie_web_build_player_lottie_svg_js = require("lottie-web/build/player/lottie_svg.js");
-lottie_web_build_player_lottie_svg_js = require_runtime.__toESM(lottie_web_build_player_lottie_svg_js, 1);
+const require_useLottieSvg = require("./useLottieSvg.cjs");
 //#region src/animation/LottieSvg.tsx
 /**
 * Renders an animation using the svg build of the engine.
@@ -15,6 +14,6 @@ lottie_web_build_player_lottie_svg_js = require_runtime.__toESM(lottie_web_build
 * expression engine, so an animation whose properties are driven by
 * expressions plays as designed.
 */
-const LottieSvg = require_createLottieComponent.createLottieComponent(lottie_web_build_player_lottie_svg_js.default);
+const LottieSvg = require_createLottieComponent.createLottieComponent(require_useLottieSvg.svgEngine);
 //#endregion
 exports.LottieSvg = LottieSvg;

package/build/animation/LottieSvg.js

@@ -1,5 +1,6 @@
+"use client";
 import { createLottieComponent } from "./createLottieComponent.js";
-import lottieSvg from "lottie-web/build/player/lottie_svg.js";
+import { svgEngine } from "./useLottieSvg.js";
 //#region src/animation/LottieSvg.tsx
 /**
 * Renders an animation using the svg build of the engine.
@@ -13,6 +14,6 @@ import lottieSvg from "lottie-web/build/player/lottie_svg.js";
 * expression engine, so an animation whose properties are driven by
 * expressions plays as designed.
 */
-const LottieSvg = createLottieComponent(lottieSvg);
+const LottieSvg = createLottieComponent(svgEngine);
 //#endregion
 export { LottieSvg };

package/build/animation/configureLottie.cjs

@@ -0,0 +1,50 @@
+"use client";
+//#region src/animation/configureLottie.ts
+/**
+* The engine builds by the name lottie-web gives each, which is the suffix a
+* build's element IDs carry.
+*/
+const LottieEngineName = {
+	full: "lottie",
+	svg: "lottie_svg",
+	light: "lottie_light"
+};
+let idPrefix = "lottie-react";
+let quality;
+const engines = /* @__PURE__ */ new Map();
+function apply(player, name) {
+	player.setIDPrefix(`${idPrefix}-${name}`);
+	if (quality !== void 0) player.setQuality(quality);
+}
+/**
+* Sets what is global to the engine rather than to one animation: the prefix
+* of the element IDs it mints, and how finely it draws curves.
+*
+* ```ts
+* configureLottie({ idPrefix: "crm", quality: "low" });
+* ```
+*
+* Set it once, at startup, before animations load. It takes effect at once on
+* every engine that has loaded an animation, and on the others when they first
+* do, and it reaches what is already on screen: element IDs for everything the
+* engines build from then on, the drawing quality of every animation on them.
+* A field left out keeps its value.
+*/
+function configureLottie(options) {
+	if (options.idPrefix !== void 0) idPrefix = options.idPrefix;
+	if (options.quality !== void 0) quality = options.quality;
+	for (const [player, name] of engines) apply(player, name);
+}
+/**
+* Brings one engine up to the current settings and remembers it for later
+* calls to {@link configureLottie}. The load path calls it right before
+* `loadAnimation`.
+*/
+function applyEngineSettings(engine) {
+	engines.set(engine.player, engine.name);
+	apply(engine.player, engine.name);
+}
+//#endregion
+exports.LottieEngineName = LottieEngineName;
+exports.applyEngineSettings = applyEngineSettings;
+exports.configureLottie = configureLottie;

package/build/animation/configureLottie.d.cts

@@ -0,0 +1,38 @@
+import "lottie-web";
+//#region src/animation/configureLottie.d.ts
+/** What {@link configureLottie} can be told. */
+interface ConfigureLottieOptions {
+  /**
+   * The base of every element ID the engine mints, so that two copies of the
+   * library on one page can be told apart. Each engine build appends its own
+   * suffix (`-lottie`, `-lottie_svg`, `-lottie_light`), so the three builds
+   * never share an ID with each other. `lottie-react` unless set.
+   */
+  idPrefix?: string;
+  /**
+   * How finely curves are drawn: `low`, `medium`, `high`, or a number of
+   * segments above 1. Left alone, the engine draws with 150, between `medium`
+   * (50) and `high` (200); the named levels trade smoothness for work. Set it
+   * once, before animations load: the engine reads it whenever it builds a
+   * curve, so a change reaches every animation on the engine, running ones
+   * included.
+   */
+  quality?: "low" | "medium" | "high" | number;
+}
+/**
+ * Sets what is global to the engine rather than to one animation: the prefix
+ * of the element IDs it mints, and how finely it draws curves.
+ *
+ * ```ts
+ * configureLottie({ idPrefix: "crm", quality: "low" });
+ * ```
+ *
+ * Set it once, at startup, before animations load. It takes effect at once on
+ * every engine that has loaded an animation, and on the others when they first
+ * do, and it reaches what is already on screen: element IDs for everything the
+ * engines build from then on, the drawing quality of every animation on them.
+ * A field left out keeps its value.
+ */
+declare function configureLottie(options: ConfigureLottieOptions): void;
+//#endregion
+export { ConfigureLottieOptions, configureLottie };

package/build/animation/configureLottie.d.ts

@@ -0,0 +1,38 @@
+import "lottie-web";
+//#region src/animation/configureLottie.d.ts
+/** What {@link configureLottie} can be told. */
+interface ConfigureLottieOptions {
+  /**
+   * The base of every element ID the engine mints, so that two copies of the
+   * library on one page can be told apart. Each engine build appends its own
+   * suffix (`-lottie`, `-lottie_svg`, `-lottie_light`), so the three builds
+   * never share an ID with each other. `lottie-react` unless set.
+   */
+  idPrefix?: string;
+  /**
+   * How finely curves are drawn: `low`, `medium`, `high`, or a number of
+   * segments above 1. Left alone, the engine draws with 150, between `medium`
+   * (50) and `high` (200); the named levels trade smoothness for work. Set it
+   * once, before animations load: the engine reads it whenever it builds a
+   * curve, so a change reaches every animation on the engine, running ones
+   * included.
+   */
+  quality?: "low" | "medium" | "high" | number;
+}
+/**
+ * Sets what is global to the engine rather than to one animation: the prefix
+ * of the element IDs it mints, and how finely it draws curves.
+ *
+ * ```ts
+ * configureLottie({ idPrefix: "crm", quality: "low" });
+ * ```
+ *
+ * Set it once, at startup, before animations load. It takes effect at once on
+ * every engine that has loaded an animation, and on the others when they first
+ * do, and it reaches what is already on screen: element IDs for everything the
+ * engines build from then on, the drawing quality of every animation on them.
+ * A field left out keeps its value.
+ */
+declare function configureLottie(options: ConfigureLottieOptions): void;
+//#endregion
+export { ConfigureLottieOptions, configureLottie };

package/build/animation/configureLottie.js

@@ -0,0 +1,48 @@
+"use client";
+//#region src/animation/configureLottie.ts
+/**
+* The engine builds by the name lottie-web gives each, which is the suffix a
+* build's element IDs carry.
+*/
+const LottieEngineName = {
+	full: "lottie",
+	svg: "lottie_svg",
+	light: "lottie_light"
+};
+let idPrefix = "lottie-react";
+let quality;
+const engines = /* @__PURE__ */ new Map();
+function apply(player, name) {
+	player.setIDPrefix(`${idPrefix}-${name}`);
+	if (quality !== void 0) player.setQuality(quality);
+}
+/**
+* Sets what is global to the engine rather than to one animation: the prefix
+* of the element IDs it mints, and how finely it draws curves.
+*
+* ```ts
+* configureLottie({ idPrefix: "crm", quality: "low" });
+* ```
+*
+* Set it once, at startup, before animations load. It takes effect at once on
+* every engine that has loaded an animation, and on the others when they first
+* do, and it reaches what is already on screen: element IDs for everything the
+* engines build from then on, the drawing quality of every animation on them.
+* A field left out keeps its value.
+*/
+function configureLottie(options) {
+	if (options.idPrefix !== void 0) idPrefix = options.idPrefix;
+	if (options.quality !== void 0) quality = options.quality;
+	for (const [player, name] of engines) apply(player, name);
+}
+/**
+* Brings one engine up to the current settings and remembers it for later
+* calls to {@link configureLottie}. The load path calls it right before
+* `loadAnimation`.
+*/
+function applyEngineSettings(engine) {
+	engines.set(engine.player, engine.name);
+	apply(engine.player, engine.name);
+}
+//#endregion
+export { LottieEngineName, applyEngineSettings, configureLottie };

package/build/animation/createLottieComponent.d.cts

@@ -1,6 +1,6 @@
+import "./configureLottie.cjs";
 import { AnyTag, ElementProps, LottieHandle, LottieRenderer } from "./types.cjs";
 import { UseLottieOptions } from "./useLottieAnimation.cjs";
-import "lottie-web";
 import { ReactNode, Ref } from "react";
 //#region src/animation/createLottieComponent.d.ts
 /**

package/build/animation/createLottieComponent.d.ts

@@ -1,6 +1,6 @@
+import "./configureLottie.js";
 import { AnyTag, ElementProps, LottieHandle, LottieRenderer } from "./types.js";
 import { UseLottieOptions } from "./useLottieAnimation.js";
-import "lottie-web";
 import { ReactNode, Ref } from "react";
 //#region src/animation/createLottieComponent.d.ts
 /**

package/build/animation/types.d.cts

@@ -1,5 +1,5 @@
 import { SubscriptionManager } from "../utils/SubscriptionManager.cjs";
-import { AnimationItem, CanvasRendererConfig, HTMLRendererConfig, SVGRendererConfig } from "lottie-web";
+import { AnimationItem, CanvasRendererConfig, FilterSizeConfig, HTMLRendererConfig, SVGRendererConfig } from "lottie-web";
 import { ComponentPropsWithoutRef, JSX, RefCallback } from "react";
 //#region src/animation/types.d.ts
 /**
@@ -111,23 +111,39 @@ type LottieSubscriptions = {
 interface RendererRows {
   svg: {
     puts: "inline";
-    settings: SVGRendererConfig;
+    settings: SVGRendererConfig & SettingsTheEngineReads & SvgSizeSettings;
     inSvg: true;
     inLight: true;
   };
   canvas: {
     puts: "inline";
-    settings: CanvasRendererConfig;
+    settings: CanvasRendererConfig & SettingsTheEngineReads;
     inSvg: false;
     inLight: false;
   };
   html: {
     puts: "block";
-    settings: HTMLRendererConfig;
+    settings: HTMLRendererConfig & Pick<SettingsTheEngineReads, "runExpressions"> & {
+      /** The filter region for effects; declared on svg, read by html too. */
+      filterSize?: FilterSizeConfig;
+    };
     inSvg: false;
     inLight: false;
   };
 }
+interface SettingsTheEngineReads {
+  /** Whether expressions in the file are evaluated. On unless turned off. */
+  runExpressions?: boolean;
+  /** The `content-visibility` the renderer sets on what it draws. */
+  contentVisibility?: string;
+  /** The `id` the renderer puts on the element it draws. */
+  id?: string;
+}
+/** The svg renderer alone sizes its `<svg>` from these, as attribute values. */
+interface SvgSizeSettings {
+  width?: number | string;
+  height?: number | string;
+}
 /**
  * The renderers the svg build of the engine contains.
  *

package/build/animation/types.d.ts

@@ -1,6 +1,6 @@
 import { SubscriptionManager } from "../utils/SubscriptionManager.js";
-import { AnimationItem, CanvasRendererConfig, HTMLRendererConfig, SVGRendererConfig } from "lottie-web";
 import { ComponentPropsWithoutRef, JSX, RefCallback } from "react";
+import { AnimationItem, CanvasRendererConfig, FilterSizeConfig, HTMLRendererConfig, SVGRendererConfig } from "lottie-web";
 //#region src/animation/types.d.ts
 /**
  * The renderers lottie-web can draw an animation with.
@@ -111,23 +111,39 @@ type LottieSubscriptions = {
 interface RendererRows {
   svg: {
     puts: "inline";
-    settings: SVGRendererConfig;
+    settings: SVGRendererConfig & SettingsTheEngineReads & SvgSizeSettings;
     inSvg: true;
     inLight: true;
   };
   canvas: {
     puts: "inline";
-    settings: CanvasRendererConfig;
+    settings: CanvasRendererConfig & SettingsTheEngineReads;
     inSvg: false;
     inLight: false;
   };
   html: {
     puts: "block";
-    settings: HTMLRendererConfig;
+    settings: HTMLRendererConfig & Pick<SettingsTheEngineReads, "runExpressions"> & {
+      /** The filter region for effects; declared on svg, read by html too. */
+      filterSize?: FilterSizeConfig;
+    };
     inSvg: false;
     inLight: false;
   };
 }
+interface SettingsTheEngineReads {
+  /** Whether expressions in the file are evaluated. On unless turned off. */
+  runExpressions?: boolean;
+  /** The `content-visibility` the renderer sets on what it draws. */
+  contentVisibility?: string;
+  /** The `id` the renderer puts on the element it draws. */
+  id?: string;
+}
+/** The svg renderer alone sizes its `<svg>` from these, as attribute values. */
+interface SvgSizeSettings {
+  width?: number | string;
+  height?: number | string;
+}
 /**
  * The renderers the svg build of the engine contains.
  *

package/build/animation/useLottie.cjs

@@ -1,4 +1,6 @@
+"use client";
 const require_runtime = require("../_virtual/_rolldown/runtime.cjs");
+const require_configureLottie = require("./configureLottie.cjs");
 const require_useLottieAnimation = require("./useLottieAnimation.cjs");
 let lottie_web = require("lottie-web");
 lottie_web = require_runtime.__toESM(lottie_web, 1);
@@ -33,8 +35,14 @@ lottie_web = require_runtime.__toESM(lottie_web, 1);
 * the animation uses no expressions either: each carries a smaller copy of the
 * engine.
 */
+/** The full engine: every renderer, expressions included. */
+const fullEngine = {
+	player: lottie_web.default,
+	name: require_configureLottie.LottieEngineName.full
+};
 function useLottie(options) {
-	return require_useLottieAnimation.useLottieAnimation(lottie_web.default, options);
+	return require_useLottieAnimation.useLottieAnimation(fullEngine, options);
 }
 //#endregion
+exports.fullEngine = fullEngine;
 exports.useLottie = useLottie;

package/build/animation/useLottie.d.cts

@@ -1,36 +1,7 @@
+import "./configureLottie.cjs";
 import { LottieInstance, LottieRenderer } from "./types.cjs";
 import { UseLottieOptions } from "./useLottieAnimation.cjs";
 //#region src/animation/useLottie.d.ts
-/**
- * Loads and drives an animation, and hands back everything needed to render it
- * and to control it.
- *
- * Give `setDisplayRef` to the element the animation should be drawn inside;
- * nothing appears until you do. Give it a size, too, since the animation fills
- * whatever box it is in and a box of no height shows nothing.
- *
- * ```jsx
- * const lottie = useLottie({ src });
- * return <div ref={lottie.setDisplayRef} style={{ height: 300 }} />;
- * ```
- *
- * An element takes one `ref`, so reach it and hand it to us in one callback
- * when you want both. Wrapping that callback in `useCallback` stops React
- * detaching and reattaching it on every render.
- *
- * ```jsx
- * const mine = useRef(null);
- * const setRef = useCallback(
- *   (node) => { mine.current = node; lottie.setDisplayRef(node); },
- *   [lottie.setDisplayRef],
- * );
- * ```
- *
- * This is the full build, so every renderer is available. Reach for
- * `useLottieSvg` instead when only `svg` is needed, or `useLottieLight` when
- * the animation uses no expressions either: each carries a smaller copy of the
- * engine.
- */
 declare function useLottie<Renderer extends LottieRenderer = typeof LottieRenderer.svg>(options: UseLottieOptions<Renderer>): LottieInstance;
 //#endregion
 export { useLottie };

package/build/animation/useLottie.d.ts

@@ -1,36 +1,7 @@
+import "./configureLottie.js";
 import { LottieInstance, LottieRenderer } from "./types.js";
 import { UseLottieOptions } from "./useLottieAnimation.js";
 //#region src/animation/useLottie.d.ts
-/**
- * Loads and drives an animation, and hands back everything needed to render it
- * and to control it.
- *
- * Give `setDisplayRef` to the element the animation should be drawn inside;
- * nothing appears until you do. Give it a size, too, since the animation fills
- * whatever box it is in and a box of no height shows nothing.
- *
- * ```jsx
- * const lottie = useLottie({ src });
- * return <div ref={lottie.setDisplayRef} style={{ height: 300 }} />;
- * ```
- *
- * An element takes one `ref`, so reach it and hand it to us in one callback
- * when you want both. Wrapping that callback in `useCallback` stops React
- * detaching and reattaching it on every render.
- *
- * ```jsx
- * const mine = useRef(null);
- * const setRef = useCallback(
- *   (node) => { mine.current = node; lottie.setDisplayRef(node); },
- *   [lottie.setDisplayRef],
- * );
- * ```
- *
- * This is the full build, so every renderer is available. Reach for
- * `useLottieSvg` instead when only `svg` is needed, or `useLottieLight` when
- * the animation uses no expressions either: each carries a smaller copy of the
- * engine.
- */
 declare function useLottie<Renderer extends LottieRenderer = typeof LottieRenderer.svg>(options: UseLottieOptions<Renderer>): LottieInstance;
 //#endregion
 export { useLottie };

package/build/animation/useLottie.js

@@ -1,3 +1,5 @@
+"use client";
+import { LottieEngineName } from "./configureLottie.js";
 import { useLottieAnimation } from "./useLottieAnimation.js";
 import lottie from "lottie-web";
 //#region src/animation/useLottie.ts
@@ -31,8 +33,13 @@ import lottie from "lottie-web";
 * the animation uses no expressions either: each carries a smaller copy of the
 * engine.
 */
+/** The full engine: every renderer, expressions included. */
+const fullEngine = {
+	player: lottie,
+	name: LottieEngineName.full
+};
 function useLottie(options) {
-	return useLottieAnimation(lottie, options);
+	return useLottieAnimation(fullEngine, options);
 }
 //#endregion
-export { useLottie };
+export { fullEngine, useLottie };

package/build/animation/useLottieAnimation.cjs

@@ -1,3 +1,4 @@
+const require_configureLottie = require("./configureLottie.cjs");
 const require_createLogger = require("../utils/createLogger.cjs");
 const require_SubscriptionManager = require("../utils/SubscriptionManager.cjs");
 const require_useStableValue = require("../utils/useStableValue.cjs");
@@ -20,7 +21,7 @@ function toError(cause) {
 * Reach it through `useLottie`, `useLottieSvg` or `useLottieLight` rather than
 * directly.
 */
-function useLottieAnimation(lottie, options) {
+function useLottieAnimation(engine, options) {
 	const { src, renderer, rendererSettings, loop, speed, direction, autoplay = false, segment, assetsPath, debug = false, subscriptions } = options;
 	const [manager] = (0, react.useState)(() => new require_SubscriptionManager.SubscriptionManager());
 	const [display, setDisplay] = (0, react.useState)(null);
@@ -291,9 +292,10 @@ function useLottieAnimation(lottie, options) {
 			loop: valuesRef.current.loop,
 			segment: loadConfig.segment
 		});
+		require_configureLottie.applyEngineSettings(engine);
 		let item;
 		try {
-			item = lottie.loadAnimation({
+			item = engine.player.loadAnimation({
 				...normalized,
 				container: display,
 				renderer: chosenRenderer,
@@ -380,7 +382,7 @@ function useLottieAnimation(lottie, options) {
 		display,
 		source,
 		loadConfig,
-		lottie,
+		engine,
 		manager,
 		refreshRange,
 		loadAttempt

package/build/animation/useLottieAnimation.d.cts

@@ -1,5 +1,5 @@
+import "./configureLottie.cjs";
 import { LottieDirection, LottieRenderer, LottieSubscriptions, RendererRows } from "./types.cjs";
-import "lottie-web";
 //#region src/animation/useLottieAnimation.d.ts
 /** The options both public hooks take. */
 interface UseLottieOptions<Renderer extends LottieRenderer = typeof LottieRenderer.svg> {

package/build/animation/useLottieAnimation.d.ts

@@ -1,5 +1,5 @@
+import "./configureLottie.js";
 import { LottieDirection, LottieRenderer, LottieSubscriptions, RendererRows } from "./types.js";
-import "lottie-web";
 //#region src/animation/useLottieAnimation.d.ts
 /** The options both public hooks take. */
 interface UseLottieOptions<Renderer extends LottieRenderer = typeof LottieRenderer.svg> {

package/build/animation/useLottieAnimation.js

@@ -1,3 +1,4 @@
+import { applyEngineSettings } from "./configureLottie.js";
 import { createLogger } from "../utils/createLogger.js";
 import { SubscriptionManager } from "../utils/SubscriptionManager.js";
 import { useStableValue } from "../utils/useStableValue.js";
@@ -20,7 +21,7 @@ function toError(cause) {
 * Reach it through `useLottie`, `useLottieSvg` or `useLottieLight` rather than
 * directly.
 */
-function useLottieAnimation(lottie, options) {
+function useLottieAnimation(engine, options) {
 	const { src, renderer, rendererSettings, loop, speed, direction, autoplay = false, segment, assetsPath, debug = false, subscriptions } = options;
 	const [manager] = useState(() => new SubscriptionManager());
 	const [display, setDisplay] = useState(null);
@@ -291,9 +292,10 @@ function useLottieAnimation(lottie, options) {
 			loop: valuesRef.current.loop,
 			segment: loadConfig.segment
 		});
+		applyEngineSettings(engine);
 		let item;
 		try {
-			item = lottie.loadAnimation({
+			item = engine.player.loadAnimation({
 				...normalized,
 				container: display,
 				renderer: chosenRenderer,
@@ -380,7 +382,7 @@ function useLottieAnimation(lottie, options) {
 		display,
 		source,
 		loadConfig,
-		lottie,
+		engine,
 		manager,
 		refreshRange,
 		loadAttempt

package/build/animation/useLottieInstance.cjs

@@ -1,3 +1,4 @@
+"use client";
 const require_LottieInstanceContext = require("./LottieInstanceContext.cjs");
 let react = require("react");
 //#region src/animation/useLottieInstance.ts

package/build/animation/useLottieInstance.js

@@ -1,3 +1,4 @@
+"use client";
 import { LottieInstanceContext } from "./LottieInstanceContext.js";
 import { useContext } from "react";
 //#region src/animation/useLottieInstance.ts