From fd268396163d23b2636ad402592c1163f6603c9f Mon Sep 17 00:00:00 2001
From: Shahed Nasser <shahednasser@gmail.com>
Date: Fri, 25 Oct 2024 11:56:54 +0300
Subject: [PATCH] docs: fixes to ui docs (#9759)

---
 www/apps/ui/src/content/docs/utils/clx.mdx      | 9 +++++----
 www/apps/ui/src/registries/example-registry.tsx | 4 ++--
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/www/apps/ui/src/content/docs/utils/clx.mdx b/www/apps/ui/src/content/docs/utils/clx.mdx
index 1f95c92d75db8..21932fe929bcb 100644
--- a/www/apps/ui/src/content/docs/utils/clx.mdx
+++ b/www/apps/ui/src/content/docs/utils/clx.mdx
@@ -12,12 +12,12 @@ The `clx` function is a utility function for working with classNames. It is buil
 import { clx } from "@medusajs/ui"
 
 type BoxProps = {
-    className?: string
-    children: React.ReactNode
-    mt?: "sm" | "md" | "lg"
+  className?: string
+  children: React.ReactNode
+  mt: "sm" | "md" | "lg"
 }
 
-const Box = ({ className, children }: BoxProps) => {
+const Box = ({ className, children, mt }: BoxProps) => {
   return (
     <div
       className={clx(
@@ -34,6 +34,7 @@ const Box = ({ className, children }: BoxProps) => {
     </div>
   )
 }
+
 ```
 
 In the above example the utility is used to apply a base style, a margin top that is dependent on the `mt` prop and a custom className.
diff --git a/www/apps/ui/src/registries/example-registry.tsx b/www/apps/ui/src/registries/example-registry.tsx
index 4ca975b17f4ac..e01e9e117bd67 100644
--- a/www/apps/ui/src/registries/example-registry.tsx
+++ b/www/apps/ui/src/registries/example-registry.tsx
@@ -25,12 +25,12 @@ export const ExampleRegistry: Record<string, ExampleType> = {
   "alert-success": {
     name: "alert-success",
     component: React.lazy(async () => import("@/examples/alert-success")),
-    file: "src/examples/alert-demo.tsx",
+    file: "src/examples/alert-success.tsx",
   },
   "alert-warning": {
     name: "alert-warning",
     component: React.lazy(async () => import("@/examples/alert-warning")),
-    file: "src/examples/alert-demo.tsx",
+    file: "src/examples/alert-warning.tsx",
   },
   "avatar-demo": {
     name: "avatar-demo",