From ce69a48db878098e9a6f046be18ecd25b472fca6 Mon Sep 17 00:00:00 2001
From: Sudev Kiyada <sudev.kiyada@thomsonreuters.com>
Date: Wed, 10 Dec 2025 08:16:47 +0530
Subject: [PATCH] docs

---
 src/components/Lottie/Lottie.mdx    | 2 ++
 src/components/Lottie/Lottie.svelte | 9 +++++----
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/Lottie/Lottie.mdx b/src/components/Lottie/Lottie.mdx
index 292caaf2..b574640f 100644
--- a/src/components/Lottie/Lottie.mdx
+++ b/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.
diff --git a/src/components/Lottie/Lottie.svelte b/src/components/Lottie/Lottie.svelte
index c3c1856a..561e783b 100644
--- a/src/components/Lottie/Lottie.svelte
+++ b/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>