docs

src/components/Lottie/Lottie.mdx

@@ -39,6 +39,8 @@ To use the `Lottie` component, import it and provide the Lottie animation source
 
 **Use `lvh` or `svh` units instead of `vh`** as [these units](https://www.w3.org/TR/css-values-4/#large-viewport-size) are more reliable on mobile and other devices where elements such as the address bar appear and disappear and affect the height.
 
+The component also provides a `width` prop to set the width of the Lottie container. While the `width` prop defaults to `fluid`, it allows any `ContainerWidth` value such as `narrower`, `narrow`, `normal`, `wide`, `wider`, `widest`, `fluid`, or a custom CSS width value like `600px` or `80vw`.
+
 If importing the Lottie file directly into a Svelte component, make sure to append **?url** to the import statement (see example below). This ensures that the file is treated as a URL.
 
 > 💡TIP: Set `showDebugInfo` prop to `true` to display information about the component state.

src/components/Lottie/Lottie.svelte

@@ -400,6 +400,7 @@
 
 <div
   class="lottie-block"
+  class:debug-border={showDebugInfo}
   style="max-width: {isContainerWidth(width) ?
     `var(--${width}-column-width)`
   : width};"
@@ -429,14 +430,10 @@
     height: 100%;
     width: 100%;
     margin: 0 auto;
-    // to remove
-    border: 2px solid green;
 
     .lottie-container {
       width: 100%;
       height: 100%;
-      // to remove
-      border: 2px solid red;
     }
 
     canvas {
@@ -445,4 +442,8 @@
       display: block;
     }
   }
+
+  .debug-border {
+    border: 1px dashed lightgray;
+  }
 </style>