@storybook/addon-onboarding 9.0.0-alpha.9 → 9.0.0-beta.0

package/README.md

@@ -42,7 +42,6 @@ const config = {
     "../stories/**/*.stories.@(js|jsx|ts|tsx)",
   ],
   addons: [
-    "@storybook/addon-essentials",
 -   "@storybook/addon-onboarding"
   ],
 };

package/dist/{Onboarding-EIO2XWOE.js → Onboarding-YPS7CVZE.js}

@@ -1,6 +1,7 @@
 import * as React2 from 'react';
 import React2__default, { forwardRef, useRef, useEffect, createElement, useState, useCallback, isValidElement } from 'react';
 import { SyntaxHighlighter, IconButton } from 'storybook/internal/components';
+import { ADDON_ID } from 'storybook/internal/controls';
 import { SAVE_STORY_RESPONSE } from 'storybook/internal/core-events';
 import { styled, keyframes, convert, ThemeProvider, themes, useTheme, color } from 'storybook/theming';
 import * as ReactDOM from 'react-dom';
@@ -130,7 +131,7 @@ Valid keys: `+JSON.stringify(Object.keys(shapeTypes),null,"  "));var error=check
     radial-gradient(circle at 30% 40%, #fc521f99 0%, #fc521f66 20%, transparent 40%),
     radial-gradient(circle at 75% 75%, #fc521f99 0%, #fc521f77 18%, transparent 30%)`,"&::before":{opacity:.5,background:`
       radial-gradient(circle at 30% 40%, #fc521f99 0%, #fc521f66 10%, transparent 20%),
-      radial-gradient(circle at 75% 75%, #fc521f99 0%, #fc521f77 8%, transparent 20%)`,content:'""',position:"absolute",top:"-50vw",left:"-50vh",transform:"translate(-50%, -50%)",width:"calc(100vw + 100vh)",height:"calc(100vw + 100vh)",animation:`${rotate} 12s linear infinite`}}),Content=styled.div(({visible})=>({position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",color:"white",textAlign:"center",width:"90vw",minWidth:290,maxWidth:410,opacity:visible?1:0,transition:"opacity 0.5s",h1:{fontSize:45,fontWeight:"bold",animation:`${slideIn} 1.5s 1s backwards`}})),Features=styled.div({display:"flex",marginTop:40,div:{display:"flex",flexBasis:"33.33%",flexDirection:"column",alignItems:"center",animation:`${slideIn} 1s backwards`,"&:nth-child(1)":{animationDelay:"2s"},"&:nth-child(2)":{animationDelay:"2.5s"},"&:nth-child(3)":{animationDelay:"3s"}},svg:{marginBottom:10}}),RadialButton=styled.button({display:"inline-flex",position:"relative",alignItems:"center",justifyContent:"center",marginTop:40,width:48,height:48,padding:0,borderRadius:"50%",border:0,outline:"none",background:"rgba(255, 255, 255, 0.3)",cursor:"pointer",transition:"background 0.2s",animation:`${scaleIn} 1.5s 4s backwards`,"&:hover, &:focus":{background:"rgba(255, 255, 255, 0.4)"}}),ArrowIcon=styled(ArrowRightIcon)({width:30,color:"white"}),ProgressCircle=styled.svg(({progress})=>({position:"absolute",top:-1,left:-1,width:"50px!important",height:"50px!important",transform:"rotate(-90deg)",color:"white",circle:{r:"24",cx:"25",cy:"25",fill:"transparent",stroke:progress?"currentColor":"transparent",strokeWidth:"1",strokeLinecap:"round",strokeDasharray:Math.PI*48}})),SplashScreen=({onDismiss,duration=6e3})=>{let[progress,setProgress]=useState(-4e5/duration),[visible,setVisible]=useState(!0),ready=progress>=100,dismiss=useCallback(()=>{setVisible(!1);let timeout=setTimeout(onDismiss,1500);return ()=>clearTimeout(timeout)},[onDismiss]);return useEffect(()=>{if(!duration)return;let framelength=1e3/50,increment=100/(duration/framelength),interval=setInterval(()=>setProgress(prev=>prev+increment),framelength);return ()=>clearInterval(interval)},[duration]),useEffect(()=>{ready&&dismiss();},[ready,dismiss]),React2__default.createElement(Wrapper3,{visible},React2__default.createElement(Backdrop,null),React2__default.createElement(Content,{visible},React2__default.createElement("h1",null,"Meet your new frontend workshop"),React2__default.createElement(Features,null,React2__default.createElement("div",null,React2__default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"33",height:"32"},React2__default.createElement("path",{d:"M4.06 0H32.5v28.44h-3.56V32H.5V3.56h3.56V0Zm21.33 7.11H4.06v21.33h21.33V7.11Z",fill:"currentColor"})),"Development"),React2__default.createElement("div",null,React2__default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"32",height:"32"},React2__default.createElement("path",{d:"M15.95 32c-1.85 0-3.1-1.55-3.1-3.54 0-1.1.45-2.78 1.35-5.03.9-2.3 1.35-4.51 1.35-6.81a22.21 22.21 0 0 0-5.1 3.67c-2.5 2.47-4.95 4.9-7.55 4.9-1.6 0-2.9-1.1-2.9-2.43 0-1.46 1.35-2.91 4.3-3.62 1.45-.36 3.1-.75 4.95-1.06 1.8-.31 3.8-1.02 5.9-2.08a23.77 23.77 0 0 0-6.1-2.12C5.3 13.18 2.3 12.6 1 11.28.35 10.6 0 9.9 0 9.14 0 7.82 1.2 6.8 2.95 6.8c2.65 0 5.75 3.1 7.95 5.3 1.1 1.1 2.65 2.21 4.65 3.27v-.57c0-1.77-.15-3.23-.55-4.3-.8-2.11-2.05-5.43-2.05-6.97 0-2.04 1.3-3.54 3.1-3.54 1.75 0 3.1 1.41 3.1 3.54 0 1.06-.45 2.78-1.35 5.12-.9 2.35-1.35 4.6-1.35 6.72 2.85-1.59 2.5-1.41 4.95-3.5 2.35-2.29 4-3.7 4.9-4.23.95-.58 1.9-.84 2.9-.84 1.6 0 2.8.97 2.8 2.34 0 1.5-1.25 2.78-4.15 3.62-1.4.4-3.05.75-4.9 1.1-1.9.36-3.9 1.07-6.1 2.13a23.3 23.3 0 0 0 5.95 2.08c3.65.7 6.75 1.32 8.15 2.6.7.67 1.05 1.33 1.05 2.08 0 1.33-1.2 2.43-2.95 2.43-2.95 0-6.75-4.15-8.2-5.61-.7-.7-2.2-1.72-4.4-2.96v.57c0 1.9.45 4.03 1.3 6.32.85 2.3 1.3 3.94 1.3 4.95 0 2.08-1.35 3.54-3.1 3.54Z",fill:"currentColor"})),"Testing"),React2__default.createElement("div",null,React2__default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"33",height:"32"},React2__default.createElement("path",{d:"M.5 16a16 16 0 1 1 32 0 16 16 0 0 1-32 0Zm16 12.44A12.44 12.44 0 0 1 4.3 13.53a8 8 0 1 0 9.73-9.73 12.44 12.44 0 1 1 2.47 24.64ZM12.06 16a4.44 4.44 0 1 1 0-8.89 4.44 4.44 0 0 1 0 8.89Z",fill:"currentColor",fillRule:"evenodd"})),"Documentation")),React2__default.createElement(RadialButton,{onClick:dismiss},React2__default.createElement(ArrowIcon,null),React2__default.createElement(ProgressCircle,{xmlns:"http://www.w3.org/2000/svg"},React2__default.createElement("circle",null)),React2__default.createElement(ProgressCircle,{xmlns:"http://www.w3.org/2000/svg",progress:!0},React2__default.createElement("circle",{strokeDashoffset:Math.PI*48*(1-Math.max(0,Math.min(progress,100))/100)})))))};var SpanHighlight=styled.span(({theme:theme2})=>({display:"inline-flex",borderRadius:3,padding:"0 5px",marginBottom:-2,opacity:.8,fontFamily:theme2.typography.fonts.mono,fontSize:11,border:theme2.base==="dark"?theme2.color.darkest:theme2.color.lightest,color:theme2.base==="dark"?theme2.color.lightest:theme2.color.darkest,backgroundColor:theme2.base==="dark"?"black":theme2.color.light,boxSizing:"border-box",lineHeight:"17px"})),CodeWrapper=styled.div(({theme:theme2})=>({background:theme2.background.content,borderRadius:3,marginTop:15,padding:10,fontSize:theme2.typography.size.s1,".linenumber":{opacity:.5}})),theme=convert();function Onboarding({api}){let[enabled,setEnabled]=useState(!0),[showConfetti,setShowConfetti]=useState(!1),[step,setStep]=useState("1:Intro"),[primaryControl,setPrimaryControl]=useState(),[saveFromControls,setSaveFromControls]=useState(),[createNewStoryForm,setCreateNewStoryForm]=useState(),[createdStory,setCreatedStory]=useState(),selectStory=useCallback(storyId=>{try{let{id,refId}=api.getCurrentStoryData()||{};(id!==storyId||refId!==void 0)&&api.selectStory(storyId);}catch{}},[api]),disableOnboarding=useCallback(()=>{let url=new URL(window.location.href),path=decodeURIComponent(url.searchParams.get("path"));url.search=`?path=${path}&onboarding=false`,history.replaceState({},"",url.href),api.setQueryParams({onboarding:"false"}),setEnabled(!1);},[api,setEnabled]),completeOnboarding=useCallback(()=>{api.emit(STORYBOOK_ADDON_ONBOARDING_CHANNEL,{step:"6:FinishedOnboarding",type:"telemetry"}),selectStory("configure-your-project--docs"),disableOnboarding();},[api,selectStory,disableOnboarding]);if(useEffect(()=>{api.setQueryParams({onboarding:"true"}),selectStory("example-button--primary"),api.togglePanel(!0),api.togglePanelPosition("bottom"),api.setSelectedPanel("addon-controls");},[api,selectStory]),useEffect(()=>{let observer=new MutationObserver(()=>{setPrimaryControl(document.getElementById("control-primary")),setSaveFromControls(document.getElementById("save-from-controls")),setCreateNewStoryForm(document.getElementById("create-new-story-form"));});return observer.observe(document.body,{childList:!0,subtree:!0}),()=>observer.disconnect()},[]),useEffect(()=>{setStep(current=>["1:Intro","5:StoryCreated","6:FinishedOnboarding"].includes(current)?current:createNewStoryForm?"4:CreateStory":saveFromControls?"3:SaveFromControls":primaryControl?"2:Controls":"1:Intro");},[createNewStoryForm,primaryControl,saveFromControls]),useEffect(()=>api.on(SAVE_STORY_RESPONSE,({payload,success})=>{!success||!payload?.newStoryName||(setCreatedStory(payload),setShowConfetti(!0),setStep("5:StoryCreated"),setTimeout(()=>api.clearNotification("save-story-success")));}),[api]),useEffect(()=>api.emit(STORYBOOK_ADDON_ONBOARDING_CHANNEL,{step,type:"telemetry"}),[api,step]),!enabled)return null;let source=createdStory?.sourceFileContent,startIndex=source?.lastIndexOf(`export const ${createdStory?.newStoryExportName}`),snippet=source?.slice(startIndex).trim(),startingLineNumber=source?.slice(0,startIndex).split(`
+      radial-gradient(circle at 75% 75%, #fc521f99 0%, #fc521f77 8%, transparent 20%)`,content:'""',position:"absolute",top:"-50vw",left:"-50vh",transform:"translate(-50%, -50%)",width:"calc(100vw + 100vh)",height:"calc(100vw + 100vh)",animation:`${rotate} 12s linear infinite`}}),Content=styled.div(({visible})=>({position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",color:"white",textAlign:"center",width:"90vw",minWidth:290,maxWidth:410,opacity:visible?1:0,transition:"opacity 0.5s",h1:{fontSize:45,fontWeight:"bold",animation:`${slideIn} 1.5s 1s backwards`}})),Features=styled.div({display:"flex",marginTop:40,div:{display:"flex",flexBasis:"33.33%",flexDirection:"column",alignItems:"center",animation:`${slideIn} 1s backwards`,"&:nth-child(1)":{animationDelay:"2s"},"&:nth-child(2)":{animationDelay:"2.5s"},"&:nth-child(3)":{animationDelay:"3s"}},svg:{marginBottom:10}}),RadialButton=styled.button({display:"inline-flex",position:"relative",alignItems:"center",justifyContent:"center",marginTop:40,width:48,height:48,padding:0,borderRadius:"50%",border:0,outline:"none",background:"rgba(255, 255, 255, 0.3)",cursor:"pointer",transition:"background 0.2s",animation:`${scaleIn} 1.5s 4s backwards`,"&:hover, &:focus":{background:"rgba(255, 255, 255, 0.4)"}}),ArrowIcon=styled(ArrowRightIcon)({width:30,color:"white"}),ProgressCircle=styled.svg(({progress})=>({position:"absolute",top:-1,left:-1,width:"50px!important",height:"50px!important",transform:"rotate(-90deg)",color:"white",circle:{r:"24",cx:"25",cy:"25",fill:"transparent",stroke:progress?"currentColor":"transparent",strokeWidth:"1",strokeLinecap:"round",strokeDasharray:Math.PI*48}})),SplashScreen=({onDismiss,duration=6e3})=>{let[progress,setProgress]=useState(-4e5/duration),[visible,setVisible]=useState(!0),ready=progress>=100,dismiss=useCallback(()=>{setVisible(!1);let timeout=setTimeout(onDismiss,1500);return ()=>clearTimeout(timeout)},[onDismiss]);return useEffect(()=>{if(!duration)return;let framelength=1e3/50,increment=100/(duration/framelength),interval=setInterval(()=>setProgress(prev=>prev+increment),framelength);return ()=>clearInterval(interval)},[duration]),useEffect(()=>{ready&&dismiss();},[ready,dismiss]),React2__default.createElement(Wrapper3,{visible},React2__default.createElement(Backdrop,null),React2__default.createElement(Content,{visible},React2__default.createElement("h1",null,"Meet your new frontend workshop"),React2__default.createElement(Features,null,React2__default.createElement("div",null,React2__default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"33",height:"32"},React2__default.createElement("path",{d:"M4.06 0H32.5v28.44h-3.56V32H.5V3.56h3.56V0Zm21.33 7.11H4.06v21.33h21.33V7.11Z",fill:"currentColor"})),"Development"),React2__default.createElement("div",null,React2__default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"32",height:"32"},React2__default.createElement("path",{d:"M15.95 32c-1.85 0-3.1-1.55-3.1-3.54 0-1.1.45-2.78 1.35-5.03.9-2.3 1.35-4.51 1.35-6.81a22.21 22.21 0 0 0-5.1 3.67c-2.5 2.47-4.95 4.9-7.55 4.9-1.6 0-2.9-1.1-2.9-2.43 0-1.46 1.35-2.91 4.3-3.62 1.45-.36 3.1-.75 4.95-1.06 1.8-.31 3.8-1.02 5.9-2.08a23.77 23.77 0 0 0-6.1-2.12C5.3 13.18 2.3 12.6 1 11.28.35 10.6 0 9.9 0 9.14 0 7.82 1.2 6.8 2.95 6.8c2.65 0 5.75 3.1 7.95 5.3 1.1 1.1 2.65 2.21 4.65 3.27v-.57c0-1.77-.15-3.23-.55-4.3-.8-2.11-2.05-5.43-2.05-6.97 0-2.04 1.3-3.54 3.1-3.54 1.75 0 3.1 1.41 3.1 3.54 0 1.06-.45 2.78-1.35 5.12-.9 2.35-1.35 4.6-1.35 6.72 2.85-1.59 2.5-1.41 4.95-3.5 2.35-2.29 4-3.7 4.9-4.23.95-.58 1.9-.84 2.9-.84 1.6 0 2.8.97 2.8 2.34 0 1.5-1.25 2.78-4.15 3.62-1.4.4-3.05.75-4.9 1.1-1.9.36-3.9 1.07-6.1 2.13a23.3 23.3 0 0 0 5.95 2.08c3.65.7 6.75 1.32 8.15 2.6.7.67 1.05 1.33 1.05 2.08 0 1.33-1.2 2.43-2.95 2.43-2.95 0-6.75-4.15-8.2-5.61-.7-.7-2.2-1.72-4.4-2.96v.57c0 1.9.45 4.03 1.3 6.32.85 2.3 1.3 3.94 1.3 4.95 0 2.08-1.35 3.54-3.1 3.54Z",fill:"currentColor"})),"Testing"),React2__default.createElement("div",null,React2__default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"33",height:"32"},React2__default.createElement("path",{d:"M.5 16a16 16 0 1 1 32 0 16 16 0 0 1-32 0Zm16 12.44A12.44 12.44 0 0 1 4.3 13.53a8 8 0 1 0 9.73-9.73 12.44 12.44 0 1 1 2.47 24.64ZM12.06 16a4.44 4.44 0 1 1 0-8.89 4.44 4.44 0 0 1 0 8.89Z",fill:"currentColor",fillRule:"evenodd"})),"Documentation")),React2__default.createElement(RadialButton,{onClick:dismiss},React2__default.createElement(ArrowIcon,null),React2__default.createElement(ProgressCircle,{xmlns:"http://www.w3.org/2000/svg"},React2__default.createElement("circle",null)),React2__default.createElement(ProgressCircle,{xmlns:"http://www.w3.org/2000/svg",progress:!0},React2__default.createElement("circle",{strokeDashoffset:Math.PI*48*(1-Math.max(0,Math.min(progress,100))/100)})))))};var SpanHighlight=styled.span(({theme:theme2})=>({display:"inline-flex",borderRadius:3,padding:"0 5px",marginBottom:-2,opacity:.8,fontFamily:theme2.typography.fonts.mono,fontSize:11,border:theme2.base==="dark"?theme2.color.darkest:theme2.color.lightest,color:theme2.base==="dark"?theme2.color.lightest:theme2.color.darkest,backgroundColor:theme2.base==="dark"?"black":theme2.color.light,boxSizing:"border-box",lineHeight:"17px"})),CodeWrapper=styled.div(({theme:theme2})=>({background:theme2.background.content,borderRadius:3,marginTop:15,padding:10,fontSize:theme2.typography.size.s1,".linenumber":{opacity:.5}})),theme=convert();function Onboarding({api}){let[enabled,setEnabled]=useState(!0),[showConfetti,setShowConfetti]=useState(!1),[step,setStep]=useState("1:Intro"),[primaryControl,setPrimaryControl]=useState(),[saveFromControls,setSaveFromControls]=useState(),[createNewStoryForm,setCreateNewStoryForm]=useState(),[createdStory,setCreatedStory]=useState(),selectStory=useCallback(storyId=>{try{let{id,refId}=api.getCurrentStoryData()||{};(id!==storyId||refId!==void 0)&&api.selectStory(storyId);}catch{}},[api]),disableOnboarding=useCallback(()=>{let url=new URL(window.location.href),path=decodeURIComponent(url.searchParams.get("path"));url.search=`?path=${path}&onboarding=false`,history.replaceState({},"",url.href),api.setQueryParams({onboarding:"false"}),setEnabled(!1);},[api,setEnabled]),completeOnboarding=useCallback(()=>{api.emit(STORYBOOK_ADDON_ONBOARDING_CHANNEL,{step:"6:FinishedOnboarding",type:"telemetry"}),selectStory("configure-your-project--docs"),disableOnboarding();},[api,selectStory,disableOnboarding]);if(useEffect(()=>{api.setQueryParams({onboarding:"true"}),selectStory("example-button--primary"),api.togglePanel(!0),api.togglePanelPosition("bottom"),api.setSelectedPanel(ADDON_ID);},[api,selectStory]),useEffect(()=>{let observer=new MutationObserver(()=>{setPrimaryControl(document.getElementById("control-primary")),setSaveFromControls(document.getElementById("save-from-controls")),setCreateNewStoryForm(document.getElementById("create-new-story-form"));});return observer.observe(document.body,{childList:!0,subtree:!0}),()=>observer.disconnect()},[]),useEffect(()=>{setStep(current=>["1:Intro","5:StoryCreated","6:FinishedOnboarding"].includes(current)?current:createNewStoryForm?"4:CreateStory":saveFromControls?"3:SaveFromControls":primaryControl?"2:Controls":"1:Intro");},[createNewStoryForm,primaryControl,saveFromControls]),useEffect(()=>api.on(SAVE_STORY_RESPONSE,({payload,success})=>{!success||!payload?.newStoryName||(setCreatedStory(payload),setShowConfetti(!0),setStep("5:StoryCreated"),setTimeout(()=>api.clearNotification("save-story-success")));}),[api]),useEffect(()=>api.emit(STORYBOOK_ADDON_ONBOARDING_CHANNEL,{step,type:"telemetry"}),[api,step]),!enabled)return null;let source=createdStory?.sourceFileContent,startIndex=source?.lastIndexOf(`export const ${createdStory?.newStoryExportName}`),snippet=source?.slice(startIndex).trim(),startingLineNumber=source?.slice(0,startIndex).split(`
 `).length,steps=[{key:"2:Controls",target:"#control-primary",title:"Interactive story playground",content:React2__default.createElement(React2__default.Fragment,null,"See how a story renders with different data and state without touching code. Try it out by toggling this button.",React2__default.createElement(HighlightElement,{targetSelector:"#control-primary",pulsating:!0})),offset:20,placement:"right",disableBeacon:!0,disableOverlay:!0,spotlightClicks:!0,onNextButtonClick:()=>{document.querySelector("#control-primary").click();}},{key:"3:SaveFromControls",target:'button[aria-label="Create new story with these settings"]',title:"Save your changes as a new story",content:React2__default.createElement(React2__default.Fragment,null,"Great! Storybook stories represent the key states of each of your components. After modifying a story, you can save your changes from here or reset it.",React2__default.createElement(HighlightElement,{targetSelector:"button[aria-label='Create new story with these settings']"})),offset:6,placement:"top",disableBeacon:!0,disableOverlay:!0,spotlightClicks:!0,onNextButtonClick:()=>{document.querySelector('button[aria-label="Create new story with these settings"]').click();},styles:{tooltip:{width:400}}},{key:"5:StoryCreated",target:'#storybook-explorer-tree [data-selected="true"]',title:"You just added your first story!",content:React2__default.createElement(React2__default.Fragment,null,"Well done! You just created your first story from the Storybook manager. This automatically added a few lines of code in"," ",React2__default.createElement(SpanHighlight,null,createdStory?.sourceFileName),".",snippet&&React2__default.createElement(ThemeProvider,{theme:convert(themes.dark)},React2__default.createElement(CodeWrapper,null,React2__default.createElement(SyntaxHighlighter,{language:"jsx",showLineNumbers:!0,startingLineNumber},snippet)))),offset:12,placement:"right",disableBeacon:!0,disableOverlay:!0,styles:{tooltip:{width:400}}}];return React2__default.createElement(ThemeProvider,{theme},showConfetti&&React2__default.createElement(Confetti,null),step==="1:Intro"?React2__default.createElement(SplashScreen,{onDismiss:()=>setStep("2:Controls")}):React2__default.createElement(GuidedTour,{step,steps,onClose:disableOnboarding,onComplete:completeOnboarding}))}
 
 export { Onboarding as default };

package/dist/manager.js

@@ -1,6 +1,7 @@
 import React, { lazy, Suspense } from 'react';
 import ReactDOM from 'react-dom';
+import { ADDON_ID } from 'storybook/internal/controls';
 import { STORY_SPECIFIED } from 'storybook/internal/core-events';
 import { addons } from 'storybook/manager-api';
 
-var Onboarding=lazy(()=>import('./Onboarding-EIO2XWOE.js'));addons.register("@storybook/addon-onboarding",async api=>{let urlState=api.getUrlState(),isOnboarding=urlState.path==="/onboarding"||urlState.queryParams.onboarding==="true";api.once(STORY_SPECIFIED,()=>{if(!(!!api.getData("example-button--primary")||!!document.getElementById("example-button--primary"))){console.warn("[@storybook/addon-onboarding] It seems like you have finished the onboarding experience in Storybook! Therefore this addon is not necessary anymore and will not be loaded. You are free to remove it from your project. More info: https://github.com/storybookjs/storybook/tree/next/code/addons/onboarding#uninstalling");return}if(!isOnboarding||window.innerWidth<730)return;api.togglePanel(!0),api.togglePanelPosition("bottom"),api.setSelectedPanel("addon-controls");let domNode=document.createElement("div");domNode.id="storybook-addon-onboarding",document.body.appendChild(domNode),ReactDOM.render(React.createElement(Suspense,{fallback:React.createElement("div",null)},React.createElement(Onboarding,{api})),domNode);});});
+var Onboarding=lazy(()=>import('./Onboarding-YPS7CVZE.js'));addons.register("@storybook/addon-onboarding",async api=>{let urlState=api.getUrlState(),isOnboarding=urlState.path==="/onboarding"||urlState.queryParams.onboarding==="true";api.once(STORY_SPECIFIED,()=>{if(!(!!api.getData("example-button--primary")||!!document.getElementById("example-button--primary"))){console.warn("[@storybook/addon-onboarding] It seems like you have finished the onboarding experience in Storybook! Therefore this addon is not necessary anymore and will not be loaded. You are free to remove it from your project. More info: https://github.com/storybookjs/storybook/tree/next/code/addons/onboarding#uninstalling");return}if(!isOnboarding||window.innerWidth<730)return;api.togglePanel(!0),api.togglePanelPosition("bottom"),api.setSelectedPanel(ADDON_ID);let domNode=document.createElement("div");domNode.id="storybook-addon-onboarding",document.body.appendChild(domNode),ReactDOM.render(React.createElement(Suspense,{fallback:React.createElement("div",null)},React.createElement(Onboarding,{api})),domNode);});});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-onboarding",
-  "version": "9.0.0-alpha.9",
+  "version": "9.0.0-beta.0",
   "description": "Storybook Addon Onboarding - Introduces a new onboarding experience",
   "keywords": [
     "storybook-addons",
@@ -56,7 +56,7 @@
     "typescript": "^5.7.3"
   },
   "peerDependencies": {
-    "storybook": "^9.0.0-alpha.9"
+    "storybook": "^9.0.0-beta.0"
   },
   "publishConfig": {
     "access": "public"