fix: updated broken image links in several mdx files in docs/sdk

docs/sdk/alert.mdx

@@ -19,7 +19,7 @@ The `alert` function adds an alert notification to your app.
 <Frame>
 <img
   className="block dark:hidden"
-  src="/images/alert.png"
+  src="../images/alert.png"
   alt="Hero Light"
 />
 </Frame>

docs/sdk/checkbox.mdx

@@ -19,7 +19,7 @@ The `checkbox` function adds an interactive check box to your app.
 <Frame>
 <img
   className="block dark:hidden"
-  src="/images/checkbox.png"
+  src="../images/checkbox.png"
   alt="Hero Light"
 />
 </Frame>

docs/sdk/playground.mdx

@@ -20,7 +20,7 @@ The `playground` function allows you to create an interactive SQL playground wit
 <Frame>
 <img
   className="block dark:hidden"
-  src="/images/playground.png"
+  src="../images/playground.png"
   alt="Playground UI Example"
 />
 </Frame>
@@ -89,4 +89,4 @@ The playground component:
 ## Related Functions
 
 - `query()`: Executes SQL queries directly
-- `get_df()`: Retrieves full datasets
+- `get_df()`: Retrieves full datasets

docs/sdk/plotly.mdx

@@ -18,7 +18,7 @@ The `plotly` function allows you to embed interactive Plotly charts into your ap
 <Frame>
 <img
   className="block dark:hidden"
-  src="/images/plotly.png"
+  src="../images/plotly.png"
   alt="Hero Light"
 />
 </Frame>

docs/sdk/progress.mdx

@@ -19,7 +19,7 @@ The `progress` function adds a progress/work done indicator to your app.
 <Frame>
 <img
   className="block dark:hidden"
-  src="/images/progress.png"
+  src="../images/progress.png"
   alt="Hero Light"
 />
 </Frame>
@@ -44,4 +44,4 @@ for i in range(10):
     # Update progress as work is done
     progress(label="Processing Files", value=i * 10)
     time.sleep(0.5)  # Simulate work being done
-```
+```

docs/sdk/selectbox.mdx

@@ -25,7 +25,7 @@ The `selectbox` function creates a dropdown menu in your app, allowing users to
 <Frame>
 <img
   className="block dark:hidden"
-  src="/images/selectbox.png"
+  src="../images/selectbox.png"
   alt="Hero Light"
 />
 </Frame>

docs/sdk/sidebar.mdx

@@ -26,7 +26,7 @@ The `sidebar` function adds a sidebar to your app, optionally allowing you to cu
 <Frame>
 <img
   className="block dark:hidden"
-  src="/images/sidebar.png"
+  src="../images/sidebar.png"
   alt="Hero Light"
 />
 </Frame>

docs/sdk/slider.mdx

@@ -29,7 +29,7 @@ The `slider` function adds an interactive slider to your app, enabling users to
 <Frame>
 <img
   className="block dark:hidden"
-  src="/images/slider.png"
+  src="../images/slider.png"
   alt="Hero Light"
 />
 </Frame>

docs/sdk/table.mdx

@@ -19,7 +19,7 @@ The `table` function provides an easy way to display datasets in an interactive
 <Frame>
 <img
   className="block dark:hidden"
-  src="/images/table.png"
+  src="../images/table.png"
   alt="Hero Light"
 />
 </Frame>

docs/sdk/topbar.mdx

@@ -34,7 +34,7 @@ This will add the topbar to your app:
 <Frame>
 <img
   className="block dark:hidden"
-  src="/images/topbar.png"
+  src="../images/topbar.png"
   alt="Hero Light"
 />
-</Frame>
+</Frame>

docs/sdk/workflow_dag.mdx

@@ -18,7 +18,7 @@ The `workflow_dag` function renders a Directed Acyclic Graph (DAG) visualization
 <Frame>
 <img
   className="block dark:hidden"
-  src="/images/workflow.png"
+  src="../images/workflow.png"
   alt="Hero Light"
 />
 </Frame>