Guided Tour

import {	GuidedTourProvider,	GuidedTour,	GuidedTourTrigger,	GuidedTourStep,	GuidedTourOverlay,} from "@/registry/optics/guided-tour";import { Button } from "@/registry/optics/button";function MyComponent() {	return (		<GuidedTourProvider>			<GuidedTour>				<GuidedTourOverlay />								<GuidedTourTrigger tourId="welcome-tour" asChild>					<Button>Start Tour</Button>				</GuidedTourTrigger>				<div className="space-y-4">					<GuidedTourStep						tourId="welcome-tour"						step={1}						content={							<div>								<h3 className="font-semibold mb-2">Welcome</h3>								<p className="text-sm text-muted-foreground">									This is the first step of the tour.								</p>							</div>						}					>						<Button>Main Button</Button>					</GuidedTourStep>					<GuidedTourStep						tourId="welcome-tour"						step={2}						content={							<div>								<h3 className="font-semibold mb-2">Second Step</h3>								<p className="text-sm text-muted-foreground">									Here you can see the second element.								</p>							</div>						}					>						<Input placeholder="Input field" />					</GuidedTourStep>					<GuidedTourStep						tourId="welcome-tour"						step={3}						content={							<div>								<h3 className="font-semibold mb-2">Final</h3>								<p className="text-sm text-muted-foreground">									This is the last step of the tour.								</p>							</div>						}					>						<Button variant="secondary">Finish</Button>					</GuidedTourStep>				</div>			</GuidedTour>		</GuidedTourProvider>	);}