import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./Text-DO3xXyuu.js";import{n as o,t as s}from"./OnboardingTour-BoyNpT36.js";import{n as c,t as l}from"./LayoutFlex-BKX2c6Gj.js";var u,d,f=t((()=>{u=e=>null,d=e=>null;try{u.displayName=`OnboardingTourProvider`,u.__docgenInfo={description:`For some reason, storybook fails to render arg tables for the components
when they're created with the \`createOnboardingTour\` function.

As a workaround, we're manually defining fake components with the same
props as originals just for props parsing ¯\\_(ツ)_/¯`,displayName:`OnboardingTourProvider`,props:{totalSteps:{defaultValue:null,description:`Total number of steps in the tour`,name:`totalSteps`,required:!0,type:{name:`number`}},nextActionLabel:{defaultValue:{value:`"Next"`},description:`Label for the "Next" action button`,name:`nextActionLabel`,required:!1,type:{name:`enum`,value:[{value:`null`},{value:`string`},{value:`number`},{value:`false`},{value:`true`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`},{value:`Iterable<ReactNode>`},{value:`ReactPortal`}]}},completeActionLabel:{defaultValue:{value:`"Got it"`},description:`Label for the "Complete" action button`,name:`completeActionLabel`,required:!1,type:{name:`enum`,value:[{value:`null`},{value:`string`},{value:`number`},{value:`false`},{value:`true`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`},{value:`Iterable<ReactNode>`},{value:`ReactPortal`}]}},disabled:{defaultValue:null,description:`Whether the tour is disabled`,name:`disabled`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},onClose:{defaultValue:null,description:`Called when the tour is closed`,name:`onClose`,required:!1,type:{name:`enum`,value:[{value:`() => void`}]}},onComplete:{defaultValue:null,description:`Called when the tour is completed`,name:`onComplete`,required:!1,type:{name:`enum`,value:[{value:`() => void`}]}},onStepChange:{defaultValue:null,description:`Called when the current step index changes`,name:`onStepChange`,required:!1,type:{name:`enum`,value:[{value:`(step: number) => void`}]}}}}}catch{}try{d.displayName=`OnboardingTourStep`,d.__docgenInfo={description:``,displayName:`OnboardingTourStep`,props:{dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}},text:{defaultValue:null,description:``,name:`text`,required:!0,type:{name:`enum`,value:[{value:`undefined`},{value:`null`},{value:`string`},{value:`number`},{value:`false`},{value:`true`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`},{value:`Iterable<ReactNode>`},{value:`ReactPortal`}]}},title:{defaultValue:null,description:``,name:`title`,required:!0,type:{name:`enum`,value:[{value:`undefined`},{value:`null`},{value:`string`},{value:`number`},{value:`false`},{value:`true`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`},{value:`Iterable<ReactNode>`},{value:`ReactPortal`}]}},actionOnClick:{defaultValue:null,description:`By default, the action button closes the tooltip.

Provide \`actionOnClick\` to also perform other action.`,name:`actionOnClick`,required:!1,type:{name:`enum`,value:[{value:`() => void`}]}},side:{defaultValue:null,description:`Preferred side of the tooltip to appear from. Use if default side might block important content.`,name:`side`,required:!1,type:{name:`enum`,value:[{value:`"top"`},{value:`"right"`},{value:`"bottom"`},{value:`"left"`}]}},autoScroll:{defaultValue:{value:`true`},description:`If true, the tooltip will automatically scroll into view when it is opened.`,name:`autoScroll`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},step:{defaultValue:null,description:`Zero-based step index`,name:`step`,required:!0,type:{name:`number`}}}}}catch{}})),p,m,h,g,_,v,y,b,x;t((()=>{p=e(n(),1),o(),i(),f(),c(),m=r(),h=s(),g={title:`Components/OnboardingTour`,component:u,subcomponents:{OnboardingTourStep:d},parameters:{preventIframeFromScrollingParent:!0,docs:{story:{inline:!1,height:250},description:{component:`Are you looking for a tooltip to highlight single element? Check out [OnboardingTooltip](/docs/components-onboardingtooltip--docs)`}}},decorators:[e=>(0,m.jsx)(`div`,{style:{margin:`auto`,width:`max-content`},children:e()})]},_=e=>[!1,!1],v=e=>e=>{},y=()=>{let[e,t]=_(`my-tour`),n=v(`my-tour`);return(0,m.jsxs)(h.Provider,{totalSteps:3,disabled:t||e,onComplete:()=>n(!0),children:[(0,m.jsx)(`div`,{style:{height:250},children:(0,m.jsx)(h.Step,{step:0,title:`Step 1`,text:`This is the first step of the onboarding tour.`,children:(0,m.jsx)(a,{children:`Step 1`})})}),(0,m.jsx)(`div`,{style:{height:250},children:(0,m.jsx)(h.Step,{step:1,title:`Step 2`,text:`This is the second step of the onboarding tour.`,children:(0,m.jsx)(a,{children:`Step 2`})})}),(0,m.jsx)(`div`,{style:{height:250},children:(0,m.jsx)(h.Step,{step:2,title:`Step 3`,text:`This is the final step of the onboarding tour.`,children:(0,m.jsx)(a,{children:`Step 3`})})})]})},y.storyName=`OnboardingTour`,b=()=>{let[e,t]=(0,p.useState)(!0);return(0,m.jsx)(h.Provider,{totalSteps:3,children:(0,m.jsxs)(l,{gap:`12`,children:[(0,m.jsx)(h.Step,{step:0,title:`First step`,text:`This is the first step of the onboarding tour.`,children:(0,m.jsx)(a,{children:`Step 1`})}),(0,m.jsx)(h.Step,{step:1,title:`Second step`,text:`This is the second step of the onboarding tour.`,actionOnClick:()=>t(!1),children:(0,m.jsx)(a,{children:`Step 2`})}),!e&&(0,m.jsx)(h.Step,{step:2,title:`Final step`,text:`This is the final step of the onboarding tour.`,children:(0,m.jsx)(a,{children:`Step 3 (I was hidden)`})})]})})},y.parameters={...y.parameters,docs:{...y.parameters?.docs,source:{originalSource:`() => {
  const [wasTourCompleted, loading] = useIsFeatureActive('my-tour');
  const setTourCompleted = useToggleFeature('my-tour');
  return <Tour.Provider totalSteps={3} disabled={loading || wasTourCompleted} onComplete={() => setTourCompleted(true)}>
            <div style={{
      height: 250
    }}>
                <Tour.Step step={0} title="Step 1" text="This is the first step of the onboarding tour.">
                    <Text>Step 1</Text>
                </Tour.Step>
            </div>
            <div style={{
      height: 250
    }}>
                <Tour.Step step={1} title="Step 2" text="This is the second step of the onboarding tour.">
                    <Text>Step 2</Text>
                </Tour.Step>
            </div>
            <div style={{
      height: 250
    }}>
                <Tour.Step step={2} title="Step 3" text="This is the final step of the onboarding tour.">
                    <Text>Step 3</Text>
                </Tour.Step>
            </div>
        </Tour.Provider>;
}`,...y.parameters?.docs?.source},description:{story:"Basic usage of the onboarding tour.\n\n- Use `disabled` and `onComplete` (or `onClose`) props to control tour's visibility (We recommend using FeatureToggles for this)\n- Wrap each step element into `Tour.Step` component",...y.parameters?.docs?.description}}},b.parameters={...b.parameters,docs:{...b.parameters?.docs,source:{originalSource:`() => {
  const [isStep3Hidden, setIsStep3Hidden] = useState(true);
  return <Tour.Provider totalSteps={3}>
            <LayoutFlex gap="12">
                <Tour.Step step={0} title="First step" text="This is the first step of the onboarding tour.">
                    <Text>Step 1</Text>
                </Tour.Step>
                <Tour.Step step={1} title="Second step" text="This is the second step of the onboarding tour." actionOnClick={() => setIsStep3Hidden(false)}>
                    <Text>Step 2</Text>
                </Tour.Step>
                {!isStep3Hidden && <Tour.Step step={2} title="Final step" text="This is the final step of the onboarding tour.">
                        <Text>Step 3 (I was hidden)</Text>
                    </Tour.Step>}
            </LayoutFlex>
        </Tour.Provider>;
}`,...b.parameters?.docs?.source},description:{story:`Sometimes you need to perform an intermediate action before the tour can continue (e.g. show a modal, switch a tab, etc.)

You can do this by using \`actionOnClick\` prop on the Tour.Step component.`,...b.parameters?.docs?.description}}},x=[`Default`,`WithIntermediateAction`]}))();export{y as Default,b as WithIntermediateAction,x as __namedExportsOrder,g as default};