fix the component wrapper

Author: HarshVz

registry.json

@@ -920,7 +920,7 @@
         }
       ],
       "dependencies": ["lucide-react"],
-      "registryDependencies": ["card", "separator", "utils"]
+      "registryDependencies": ["separator", "utils"]
     }
   ]
 }

src/components/billingsdk/payment-processing.tsx

@@ -0,0 +1,5 @@
+"use client";
+export {
+  PaymentProcessing,
+  type PaymentProcessingTypes,
+} from "@/registry/billingsdk/payment-processing";

src/components/payment-processing-demo.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState } from "react";
-import PaymentProcessing from "@/registry/billingsdk/payment-processing";
+import { PaymentProcessing } from "@/components/billingsdk/payment-processing";
 import { Button } from "@/components/ui/button";
 
 export function PaymentProcessingDemo() {

src/registry/billingsdk/payment-processing.tsx

@@ -1,16 +1,18 @@
+"use client";
+
 import { Loader2, Shield, LucideIcon } from "lucide-react";
 import { Separator } from "@/components/ui/separator";
 
-type PaymentProcessingTypes = {
+export interface PaymentProcessingTypes {
   status?: boolean;
   title?: string;
   description?: string;
   icon?: LucideIcon;
   processLabel?: string;
   warning?: string;
-};
+}
 
-export default function PaymentProcessing({
+export function PaymentProcessing({
   status = true,
   title = "Processing Payment",
   description = "This may take a few moments",