var Component=(()=>{var g=Object.create;var t=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var T=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,D=Object.prototype.hasOwnProperty;var m=(n,o)=>()=>(o||n((o={exports:{}}).exports,o),o.exports),f=(n,o)=>{for(var r in o)t(n,r,{get:o[r],enumerable:!0})},a=(n,o,r,l)=>{if(o&&typeof o=="object"||typeof o=="function")for(let i of T(o))!D.call(n,i)&&i!==r&&t(n,i,{get:()=>o[i],enumerable:!(l=h(o,i))||l.enumerable});return n};var y=(n,o,r)=>(r=n!=null?g(p(n)):{},a(o||!n||!n.__esModule?t(r,"default",{value:n,enumerable:!0}):r,n)),x=n=>a(t({},"__esModule",{value:!0}),n);var d=m((B,c)=>{c.exports=_jsx_runtime});var A={};f(A,{default:()=>s,frontmatter:()=>C});var e=y(d()),C={id:"tour-dialog",title:"Tour Dialog",package:"@saas-ui-pro/react",description:"A tour dialog is used convey benefits or instructions for a new features."};function u(n){let o={code:"code",h2:"h2",li:"li",p:"p",pre:"pre",ul:"ul",...n.components},{ComponentLinks:r}=o;return r||w("ComponentLinks",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)(o.p,{children:[`Tour dialogs are used to explain a highlighted feature or give instructions to people in a guided tour. It's used in combination with the `,(0,e.jsx)(o.code,{children:"Tour"})," mananger."]}),` `,(0,e.jsx)(r,{pro:{gumroad:!0}}),` `,(0,e.jsx)(o.h2,{children:"Import"}),` `,(0,e.jsxs)(o.ul,{children:[` `,(0,e.jsxs)(o.li,{children:[(0,e.jsx)(o.code,{children:"TourDialog"}),": The wrapper that provides context for its children."]}),` `,(0,e.jsxs)(o.li,{children:[(0,e.jsx)(o.code,{children:"TourDialogTrigger"}),": Wrap around the trigger element in stand alone mode."]}),` `,(0,e.jsxs)(o.li,{children:[(0,e.jsx)(o.code,{children:"TourDialagTarget"}),": Positions the dialog in a guided tour."]}),` `,(0,e.jsxs)(o.li,{children:[(0,e.jsx)(o.code,{children:"TourDialogCloseButton"}),": The close button, ends the tour when clicked."]}),` `,(0,e.jsxs)(o.li,{children:[(0,e.jsx)(o.code,{children:"TourDialogHeader"}),": The dialog header with a title."]}),` `,(0,e.jsxs)(o.li,{children:[(0,e.jsx)(o.code,{children:"TourDialogBody"}),": The body containing the message."]}),` `,(0,e.jsxs)(o.li,{children:[(0,e.jsx)(o.code,{children:"TourDialogFooter"}),": The footer."]}),` `,(0,e.jsxs)(o.li,{children:[(0,e.jsx)(o.code,{children:"TourDialogActions"}),": The tour actions."]}),` `,(0,e.jsxs)(o.li,{children:[(0,e.jsx)(o.code,{children:"TourDialogSecondaryAction"}),": The secondary action, dismiss by default."]}),` `,(0,e.jsxs)(o.li,{children:[(0,e.jsx)(o.code,{children:"TourDialogPrimaryAction"}),": The primary action, Ok, Start, Next or Complete."]}),` `]}),` `,(0,e.jsx)(o.pre,{children:(0,e.jsx)(o.code,{className:"language-js",children:`import { TourDialog, TourDialogTrigger, TourDialogCloseButton, TourDialogHeader, TourDialogBody, TourDialogFooter, TourDialogActions, TourDialogSecondaryAction, TourDialogPrimaryAction, } from '@saas-ui-pro/react' `})}),` `,(0,e.jsx)(o.h2,{children:"Usage"}),` `,(0,e.jsx)(o.pre,{children:(0,e.jsx)(o.code,{className:"language-jsx",children:`function BasicUsage() { const { isOpen, onOpen, onClose } = useDisclosure() return (