Convert .lottie to .zip

src/components/Lottie/Lottie.stories.svelte

@@ -8,10 +8,10 @@
   import Theme from '../Theme/Theme.svelte';
 
   // Denmo Lottie file
-  import DemoLottie from './lottie/demo.lottie?url';
-  import MarkerSample from './lottie/markerSample.lottie?url';
-  import ForegroundSample from './lottie/foregroundSample.lottie?url';
-  import ThemesSample from './lottie/themesLottie.lottie?url';
+  import DemoLottie from './lottie/demo.zip?url';
+  import MarkerSample from './lottie/markerSample.zip?url';
+  import ForegroundSample from './lottie/foregroundSample.zip?url';
+  import ThemesSample from './lottie/themesLottie.zip?url';
   import WithScrollerBase from './demo/withScrollerBase.svelte';
 
   const { Story } = defineMeta({
@@ -83,7 +83,7 @@
 </Story>
 
 <Story name="With foregrounds">
-  <Lottie src={ForegroundSample} autoplay>
+  <Lottie src={ForegroundSample} autoplay showDebugInfo>
     <LottieForeground
       startFrame={0}
       endFrame={50}

src/components/Lottie/demo/withScrollerBase.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import ScrollerBase from '../../ScrollerBase/ScrollerBase.svelte';
   import Lottie from '../Lottie.svelte';
-  import LottieSample from '../lottie/themesLottie.lottie?url';
+  import LottieSample from '../lottie/themesLottie.zip?url';
 
   // Optional: Bind your own variables to use them in your code.
   let count = $state(1);