deletes container width prop

src/components/ScrollerLottie/ScrollerLottie.mdx

@@ -7,7 +7,7 @@ import CompositionMarkerImage from './assets/marker.png?url';
 
 # ScrollerLottie
 
-The `ScrollerLottie` component plays Lottie animations. It uses the [dotLottie-web](https://developers.lottiefiles.com/docs/dotlottie-player/dotlottie-web/) library to render the animations.
+The `ScrollerLottie` component uses the [dotLottie-web](https://developers.lottiefiles.com/docs/dotlottie-player/dotlottie-web/) library to render Lottie animations.
 
 ## How to use .lottie files
 

src/components/ScrollerLottie/ScrollerLottie.stories.svelte

@@ -5,6 +5,8 @@
   import Headline from '../Headline/Headline.svelte';
   import Theme from '../Theme/Theme.svelte';
 
+  // Denmo Lottie file
+  import DemoLottie from './data/demo.lottie?url';
   import MarkerSample from './data/markerSample.lottie?url';
   import ForegroundSample from './data/foregroundSample.lottie?url';
   import ThemesSample from './data/themesLottie.lottie?url';
@@ -37,7 +39,7 @@
 </script>
 
 <Story name="Demo">
-  <ScrollerLottie autoplay loop showDebugInfo />
+  <ScrollerLottie autoplay loop showDebugInfo src={DemoLottie} />
 </Story>
 
 <Story name="Marker">

src/components/ScrollerLottie/ScrollerLottie.svelte

@@ -17,7 +17,6 @@
   // Components
   import Debug from './Debug.svelte';
   import WASM from './data/dotlottie-player.wasm?url';
-  import DefaultLottie from './data/defaultLottie.lottie?url';
 
   // Types
   import type { Props } from './ts/types';
@@ -35,7 +34,7 @@
     autoplay = false,
     loop = false,
     mode = 'forward',
-    src = DefaultLottie,
+    src,
     speed = 1,
     data = undefined,
     backgroundColor = '#ffffff',
@@ -50,7 +49,6 @@
     layout = { fit: 'contain', align: [0.5, 0.5] },
     animationId = '',
     lottiePlayer = $bindable(undefined),
-    width = 'normal',
     height = '100lvh',
     showDebugInfo = false,
     lottieState = createLottieState(),
@@ -399,7 +397,6 @@
   :global(.lottie-block) {
     position: relative;
     height: 100%;
-    outline: 2px solid blue;
 
     .lottie-container {
       width: 100%;

src/components/ScrollerLottie/ts/types.ts

@@ -1,6 +1,5 @@
 
 // Types
-import type { ContainerWidth } from '../../@types/global';
 import type { Snippet } from 'svelte';
 import {
     type Config,
@@ -17,7 +16,7 @@ type DotlottieProps = {
     renderConfig?: Config['renderConfig'];
     segment?: Config['segment'];
     speed?: Config['speed'];
-    src?: Config['src'];
+    src: Config['src'];
     useFrameInterpolation?: Config['useFrameInterpolation'];
     marker?: Config['marker'] | undefined;
     layout?: Config['layout'];
@@ -35,7 +34,6 @@ export type Props = DotlottieProps & {
     // Additional properties can be added here if needed
     lottiePlayer?: DotLottieType | undefined;
     showDebugInfo?: boolean;
-    width?: ContainerWidth;
     height?: string;
     lottieState?: LottieState;
     progress?: number;