Decouple lottie-web dependency from our repo

[amal-k-joy]

Currently we have exposed a media prop that expects either a render callback(media.render) that returns a component( ) or filepaths(media.filepaths) with animation data.

The new approach is to deprecate the media prop and introduce an new render prop called renderMedia which is a callback that can return any react component. So if user needs lottie animationed component, they can import the package from their end and can return the animated component as it is.

We have the component <SteppedAnimatedMedia> that has implemented lottie-web. User can either import and use that wrapper component or define their own custom component.

Usage at adopter

  <InlineTip  renderMedia={(params) => <SteppedAnimatedMedia
          filePaths={[InlineTipAnimation]}
          playStep={1}
        />} />

<InlineTip  renderMedia={(params) => <img alt="" src={InlineTipImage} />} />

<InlineTip    action={selectedAction}  />  

Sample implementation in component

{ renderMedia && <>{renderMedia({className:${blockClass}__media})}</> }

Here <SteppedAnimatedMedia> will still be part of our repo , but will not be imported in any of our components , there by should be excluded from bundling.

• Deprecate media prop with lots of warnings
• Replace SteppedAnimatedMedia with renderMedia prop

Followup later

• Review and deprecate lottie-web and SteppedAnimatedMedia in 1H2025 #6434