add Dynamic Portal

package.json

@@ -40,7 +40,6 @@
     "start": "npm run build && node dist/index.js"
   },
   "peerDependencies": {
-    "@radix-ui/react-portal": ">=1.1.1",
     "framer-motion": ">=11",
     "next": ">=13",
     "react": ">=18",

src/DynamicPortal.tsx

@@ -0,0 +1,38 @@
+import { useEffect, useState } from 'react';
+import type { ReactNode } from 'react';
+import { createPortal } from 'react-dom';
+
+interface DynamicPortalProps {
+  wrapperID?: string;
+  children: ReactNode;
+}
+
+const DynamicPortal: React.FC<DynamicPortalProps> = ({ wrapperID, children }) => {
+  const [wrapperElement, setWrapperElement] = useState<HTMLElement | null>(null);
+
+  useEffect(() => {
+    // If wrapperID is provided, attempt to find the corresponding element
+    if (wrapperID) {
+      const targetElement = document.getElementById(wrapperID);
+      if (targetElement) {
+        setWrapperElement(targetElement);
+      } else {
+        console.warn(
+          `Element with ID "${wrapperID}" not found. Rendering into document body.`,
+        );
+        setWrapperElement(document.body); // Default to body if element is not found
+      }
+    } else {
+      // If no wrapperID is provided, default to rendering in the body
+      setWrapperElement(document.body);
+    }
+  }, [wrapperID]);
+
+  if (!wrapperElement) {
+    return null; // Return null while wrapperElement is being determined
+  }
+
+  return createPortal(children, wrapperElement);
+};
+
+export default DynamicPortal;

src/NextStep.tsx

@@ -3,11 +3,11 @@ import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { useNextStep } from './NextStepContext';
 import { motion, useInView } from 'framer-motion';
 import { useRouter } from 'next/navigation';
-import { Portal } from '@radix-ui/react-portal';
 
 // Types
 import { NextStepProps } from './types';
 import DefaultCard from './DefaultCard';
+import DynamicPortal from './DynamicPortal';
 
 const NextStep: React.FC<NextStepProps> = ({
   children,
@@ -650,7 +650,7 @@ const NextStep: React.FC<NextStepProps> = ({
 
       {/* NextStep Overlay Step Content */}
       {pointerPosition && isNextStepVisible && (
-        <Portal>
+        <DynamicPortal wrapperID={currentTourSteps?.[currentStep]?.wrapperID}>
           <motion.div
             data-name="nextstep-overlay"
             className="absolute inset-0 overflow-hidden"
@@ -787,7 +787,7 @@ const NextStep: React.FC<NextStepProps> = ({
               </motion.div>
             </motion.div>
           </motion.div>
-        </Portal>
+        </DynamicPortal>
       )}
     </div>
   );

src/types/index.ts

@@ -28,6 +28,8 @@ export interface Step {
   // Routing
   nextRoute?: string;
   prevRoute?: string;
+  // Dynamic Portal
+  wrapperID?: string;
 }
 
 // Tour