@storybook/addon-onboarding 0.0.16--canary.34.0b84104.0 → 0.0.16--canary.36c6db4.0

package/dist/manager.js

@@ -1,10 +1,10 @@
 'use strict';
 
-var n = require('react');
-var Ct = require('react-confetti');
+var i = require('react');
+var wt = require('react-confetti');
 var theming = require('@storybook/theming');
-var _t = require('react-dom');
-var Ot = require('react-joyride');
+var Zt = require('react-dom');
+var Bt = require('react-joyride');
 var coreEvents = require('@storybook/core-events');
 var m = require('@radix-ui/react-dialog');
 var components = require('@storybook/components');
@@ -30,13 +30,13 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var n__default = /*#__PURE__*/_interopDefault(n);
-var Ct__default = /*#__PURE__*/_interopDefault(Ct);
-var _t__default = /*#__PURE__*/_interopDefault(_t);
-var Ot__default = /*#__PURE__*/_interopDefault(Ot);
+var i__default = /*#__PURE__*/_interopDefault(i);
+var wt__default = /*#__PURE__*/_interopDefault(wt);
+var Zt__default = /*#__PURE__*/_interopDefault(Zt);
+var Bt__default = /*#__PURE__*/_interopDefault(Bt);
 var m__namespace = /*#__PURE__*/_interopNamespace(m);
 
-var ht=Object.defineProperty;var a=(t,o)=>()=>(t&&(o=t(t=0)),o);var xt=(t,o)=>{for(var e in o)ht(t,e,{get:o[e],enumerable:!0});};function Y({targetSelector:t}){return n.useEffect(()=>{let o=document.querySelector(t);if(o){o.style.animation="pulsate 3s infinite",o.style.transformOrigin="center",o.style.animationTimingFunction="ease-in-out";let e=`
+var xt=Object.defineProperty;var a=(t,o)=>()=>(t&&(o=t(t=0)),o);var bt=(t,o)=>{for(var e in o)xt(t,e,{get:o[e],enumerable:!0});};function L({targetSelector:t}){return i.useEffect(()=>{let o=document.querySelector(t);if(o){o.style.animation="pulsate 3s infinite",o.style.transformOrigin="center",o.style.animationTimingFunction="ease-in-out";let e=`
         @keyframes pulsate {
           0% {
             box-shadow: 0 0 0 0 rgba(2, 156, 253, 0.7), 0 0 0 0 rgba(2, 156, 253, 0.4);
@@ -48,25 +48,50 @@ var ht=Object.defineProperty;var a=(t,o)=>()=>(t&&(o=t(t=0)),o);var xt=(t,o)=>{f
             box-shadow: 0 0 0 0 rgba(2, 156, 253, 0), 0 0 0 0 rgba(2, 156, 253, 0);
           }
         }
-      `,r=document.createElement("style");r.id="sb-onboarding-pulsating-effect",r.innerHTML=e,document.head.appendChild(r);}return ()=>{document.querySelector("#sb-onboarding-pulsating-effect")?.remove();}},[t]),null}var j=a(()=>{});function h({top:t=0,left:o=0,width:e=window.innerWidth,height:r=window.innerHeight,...d}){let[i]=n.useState(()=>{let l=document.createElement("div");return l.setAttribute("id","confetti-container"),l.setAttribute("style","position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999;"),l});return n.useEffect(()=>(document.body.appendChild(i),()=>{document.body.removeChild(i);}),[]),_t.createPortal(n__default.default.createElement(Tt,{top:t,left:o,width:e,height:r},n__default.default.createElement(Ct__default.default,{...d})),i)}var Tt,P=a(()=>{Tt=theming.styled.div(({width:t,height:o,left:e,top:r})=>({width:`${t}px`,height:`${o}px`,left:`${e}px`,top:`${r}px`,position:"relative",overflow:"hidden"}));});var U,_,G,K=a(()=>{U=theming.styled.div`
+      `,r=document.createElement("style");r.id="sb-onboarding-pulsating-effect",r.innerHTML=e,document.head.appendChild(r);}return ()=>{document.querySelector("#sb-onboarding-pulsating-effect")?.remove();}},[t]),null}var Y=a(()=>{});function x({top:t=0,left:o=0,width:e=window.innerWidth,height:r=window.innerHeight,...l}){let[n]=i.useState(()=>{let d=document.createElement("div");return d.setAttribute("id","confetti-container"),d.setAttribute("style","position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999;"),d});return i.useEffect(()=>(document.body.appendChild(n),()=>{document.body.removeChild(n);}),[]),Zt.createPortal(i__default.default.createElement(Pt,{top:t,left:o,width:e,height:r},i__default.default.createElement(wt__default.default,{...l})),n)}var Pt,P=a(()=>{Pt=theming.styled.div(({width:t,height:o,left:e,top:r})=>({width:`${t}px`,height:`${o}px`,left:`${e}px`,top:`${r}px`,position:"relative",overflow:"hidden"}));});var H,U,_,G=a(()=>{H=theming.styled.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-`,_=theming.styled.strong`
+`,U=theming.styled.strong`
   font-size: 13px;
-`,G=theming.styled.p`
+`,_=theming.styled.p`
   font-size: 13px;
   text-align: start;
   color: #798186;
   margin: 0;
   margin-top: 4px;
-`;});function g({prefix:t,title:o,body:e}){return n__default.default.createElement(U,null,t,n__default.default.createElement(_,null,o),n__default.default.createElement(G,null,e))}var V=a(()=>{K();});function x(t){let o={...O,...t.style||{}};return n__default.default.createElement("button",{type:"button",...t,style:o})}var O,b=a(()=>{O={border:0,cursor:"pointer",fontSize:13,lineHeight:1,padding:"9px 12px",backgroundColor:"#029CFD",borderRadius:4,color:"#fff",fontWeight:700};});function q({api:t,isFinalStep:o,onFirstTourDone:e}){let[r,d]=n.useState();return n.useEffect(()=>{t.on(coreEvents.STORY_ARGS_UPDATED,()=>{B=B+1,B===2&&d(3);});},[]),n__default.default.createElement(Ot__default.default,{steps:o?[{target:"#configure-your-project--docs",content:n__default.default.createElement(g,{title:"Continue setting up your project",body:"You nailed the basics. Now get started writing stories for your own components."}),placement:"right",disableOverlay:!0,disableBeacon:!0,styles:{buttonNext:{display:"none"}},floaterProps:{disableAnimation:!0}}]:[{target:"#storybook-explorer-tree > div",content:n__default.default.createElement(g,{title:"Storybook is built from stories",body:"Storybook uses stories to represent the key states supported by each of your components. For example: this Button component has four stories."}),placement:"right",disableBeacon:!0,styles:{spotlight:{transform:"translateY(30px)"}},floaterProps:{disableAnimation:!0}},{target:"#storybook-preview-iframe",content:n__default.default.createElement(g,{title:"Storybook previews are interactive",body:"Whenever you modify code or stories, Storybook automatically updates how it previews your components."}),placement:"bottom"},{target:"#root div[role=main]",content:n__default.default.createElement(n__default.default.Fragment,null,n__default.default.createElement(g,{title:"Interactive story playground",body:n__default.default.createElement(n__default.default.Fragment,null,"See how a story renders with different data and state without touching code.",n__default.default.createElement("br",null),"Try it out by pressing this button.")}),n__default.default.createElement(Y,{targetSelector:"#control-primary"})),placement:"right",spotlightClicks:!0,floaterProps:{target:"#control-primary"},styles:{buttonNext:{display:"none"}}},{target:"#control-primary",content:n__default.default.createElement(n__default.default.Fragment,null,n__default.default.createElement(h,{numberOfPieces:100}),n__default.default.createElement(g,{title:"Congratulations!",body:"You've learned how to control your stories interactively. Now: let's explore how to write your first story."})),placement:"right",disableOverlay:!0,locale:{last:"Next"}}],continuous:!0,stepIndex:r,spotlightPadding:0,hideBackButton:!0,disableCloseOnEsc:!0,disableOverlayClose:!0,disableScrolling:!0,hideCloseButton:!0,callback:l=>{!o&&l.status===Ot.STATUS.FINISHED&&e();},floaterProps:{styles:{floater:{padding:0,paddingLeft:8,paddingTop:8,filter:"drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1))"}}},styles:{spotlight:{border:"solid 2px #004c7c"},tooltip:{maxWidth:260,borderRadius:4,padding:15},overlay:{backgroundColor:"rgba(0, 0, 0, 0.48)"},buttonNext:{...O,marginTop:5},tooltipContent:{paddingTop:4,padding:0},options:{zIndex:1e4,primaryColor:"#029CFD"}}})}var B,Z=a(()=>{j();P();V();b();B=0;});var X,It,Q,R=a(()=>{X=theming.styled(m__namespace.Overlay)`
+`;});function g({prefix:t,title:o,body:e}){return i__default.default.createElement(H,null,t,i__default.default.createElement(U,null,o),i__default.default.createElement(_,null,e))}var K=a(()=>{G();});var V,Z=a(()=>{V=t=>({border:0,borderRadius:"0.25rem",cursor:"pointer",display:"inline-flex",alignItems:"center",justifyContent:"center",padding:"0 0.75rem",background:t.color.secondary,color:"#FFF",height:32,fontSize:"0.8125rem",fontWeight:700,fontFamily:t.typography.fonts.base,transition:"all 0.16s ease-in-out",textDecoration:"none",outline:"none"});});function q({api:t,isFinalStep:o,onFirstTourDone:e}){let[r,l]=i.useState(),n=theming.useTheme();return i.useEffect(()=>{t.on(coreEvents.STORY_ARGS_UPDATED,()=>{B=B+1,B===2&&l(3);});},[]),i__default.default.createElement(Bt__default.default,{steps:o?[{target:"#configure-your-project--docs",content:i__default.default.createElement(g,{title:"Continue setting up your project",body:"You nailed the basics. Now get started writing stories for your own components."}),placement:"right",disableOverlay:!0,disableBeacon:!0,styles:{buttonNext:{display:"none"}},floaterProps:{disableAnimation:!0}}]:[{target:"#storybook-explorer-tree > div",content:i__default.default.createElement(g,{title:"Storybook is built from stories",body:"Storybook uses stories to represent the key states supported by each of your components. For example: this Button component has four stories."}),placement:"right",disableBeacon:!0,styles:{spotlight:{transform:"translateY(30px)"}},floaterProps:{disableAnimation:!0}},{target:"#storybook-preview-iframe",content:i__default.default.createElement(g,{title:"Storybook previews are interactive",body:"Whenever you modify code or stories, Storybook automatically updates how it previews your components."}),placement:"bottom"},{target:"#root div[role=main]",content:i__default.default.createElement(i__default.default.Fragment,null,i__default.default.createElement(g,{title:"Interactive story playground",body:i__default.default.createElement(i__default.default.Fragment,null,"See how a story renders with different data and state without touching code.",i__default.default.createElement("br",null),"Try it out by pressing this button.")}),i__default.default.createElement(L,{targetSelector:"#control-primary"})),placement:"right",spotlightClicks:!0,floaterProps:{target:"#control-primary"},styles:{buttonNext:{display:"none"}}},{target:"#control-primary",content:i__default.default.createElement(i__default.default.Fragment,null,i__default.default.createElement(x,{numberOfPieces:100}),i__default.default.createElement(g,{title:"Congratulations!",body:"You've learned how to control your stories interactively. Now: let's explore how to write your first story."})),placement:"right",disableOverlay:!0,locale:{last:"Next"}}],continuous:!0,stepIndex:r,spotlightPadding:0,hideBackButton:!0,disableCloseOnEsc:!0,disableOverlayClose:!0,disableScrolling:!0,hideCloseButton:!0,callback:y=>{!o&&y.status===Bt.STATUS.FINISHED&&e();},floaterProps:{styles:{floater:{padding:0,paddingLeft:8,paddingTop:8,filter:"drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1))"}}},styles:{spotlight:{border:"solid 2px #004c7c"},tooltip:{maxWidth:260,borderRadius:4,padding:15},overlay:{backgroundColor:"rgba(0, 0, 0, 0.48)"},buttonNext:{...V(n),marginTop:5},tooltipContent:{paddingTop:4,padding:0},options:{zIndex:1e4,primaryColor:"#029CFD"}}})}var B,J=a(()=>{Y();P();K();Z();B=0;});var It,b,O=a(()=>{It=theming.styled.button`
+  all: unset;
+  border: 0;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 0.75rem;
+  background: ${({theme:t})=>t.color.secondary};
+  color: ${({theme:t})=>t.color.lightest};
+  height: 32px;
+  font-size: 0.8125rem;
+  font-weight: 700;
+  font-family: ${({theme:t})=>t.typography.fonts.base};
+  transition: all 0.16s ease-in-out;
+  text-decoration: none;
+
+  &:hover {
+    background-color: #0b94eb;
+  }
+
+  &:focus {
+    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.1);
+  }
+`,b=({children:t,onClick:o,...e})=>i__default.default.createElement(It,{onClick:o,...e},t);});var Q,zt,R,tt=a(()=>{Q=theming.styled(m__namespace.Overlay)`
   background-color: rgba(27, 28, 29, 0.48);
   position: fixed;
   inset: 0px;
   width: 100%;
   height: 100%;
-`,It=theming.styled.div(({width:t,height:o})=>theming.css`
+`,zt=theming.styled.div(({width:t,height:o})=>theming.css`
     background-color: white;
     border-radius: 6px;
     box-shadow: rgba(14, 18, 22, 0.35) 0px 10px 38px -10px;
@@ -78,20 +103,20 @@ var ht=Object.defineProperty;var a=(t,o)=>()=>(t&&(o=t(t=0)),o);var xt=(t,o)=>{f
     height: ${o?`${o}px`:"auto"};
     max-width: calc(100% - 40px);
     max-height: 85vh;
-  `),Q=n__default.default.forwardRef(({width:t,height:o,children:e,...r},d)=>n__default.default.createElement(m__namespace.Content,{ref:d,asChild:!0,...r},n__default.default.createElement(It,{width:t,height:o},e)));});function S({children:t,width:o,height:e,onEscapeKeyDown:r,onInteractOutside:d=l=>l.preventDefault(),...i}){return n__default.default.createElement(m__namespace.Root,{...i},n__default.default.createElement(m__namespace.Portal,null,n__default.default.createElement(X,null),n__default.default.createElement(Q,{width:o,height:e,onInteractOutside:d,onEscapeKeyDown:r},t({Title:m__namespace.Title,Description:m__namespace.Description,Close:m__namespace.Close}))))}var M=a(()=>{R();});function k(){return n__default.default.createElement("svg",{width:"32px",height:"40px",viewBox:"0 0 256 319",preserveAspectRatio:"xMidYMid"},n__default.default.createElement("defs",null,n__default.default.createElement("path",{d:"M9.87245893,293.324145 L0.0114611411,30.5732167 C-0.314208957,21.8955842 6.33948896,14.5413918 15.0063196,13.9997149 L238.494389,0.0317105427 C247.316188,-0.519651867 254.914637,6.18486163 255.466,15.0066607 C255.486773,15.339032 255.497167,15.6719708 255.497167,16.0049907 L255.497167,302.318596 C255.497167,311.157608 248.331732,318.323043 239.492719,318.323043 C239.253266,318.323043 239.013844,318.317669 238.774632,318.306926 L25.1475605,308.712253 C16.8276309,308.338578 10.1847994,301.646603 9.87245893,293.324145 L9.87245893,293.324145 Z",id:"path-1"})),n__default.default.createElement("g",null,n__default.default.createElement("mask",{id:"mask-2",fill:"white"},n__default.default.createElement("use",{xlinkHref:"#path-1"})),n__default.default.createElement("use",{fill:"#FF4785",fillRule:"nonzero",xlinkHref:"#path-1"}),n__default.default.createElement("path",{d:"M188.665358,39.126973 L190.191903,2.41148534 L220.883535,0 L222.205755,37.8634126 C222.251771,39.1811466 221.22084,40.2866846 219.903106,40.3327009 C219.338869,40.3524045 218.785907,40.1715096 218.342409,39.8221376 L206.506729,30.4984116 L192.493574,41.1282444 C191.443077,41.9251106 189.945493,41.7195021 189.148627,40.6690048 C188.813185,40.2267976 188.6423,39.6815326 188.665358,39.126973 Z M149.413703,119.980309 C149.413703,126.206975 191.355678,123.222696 196.986019,118.848893 C196.986019,76.4467826 174.234041,54.1651411 132.57133,54.1651411 C90.9086182,54.1651411 67.5656805,76.7934542 67.5656805,110.735941 C67.5656805,169.85244 147.345341,170.983856 147.345341,203.229219 C147.345341,212.280549 142.913138,217.654777 133.162291,217.654777 C120.456641,217.654777 115.433477,211.165914 116.024438,189.103298 C116.024438,184.317101 67.5656805,182.824962 66.0882793,189.103298 C62.3262146,242.56887 95.6363019,257.990394 133.753251,257.990394 C170.688279,257.990394 199.645341,238.303123 199.645341,202.663511 C199.645341,139.304202 118.683759,141.001326 118.683759,109.604526 C118.683759,96.8760922 128.139127,95.178968 133.753251,95.178968 C139.662855,95.178968 150.300143,96.2205679 149.413703,119.980309 Z",fill:"#FFFFFF",fillRule:"nonzero",mask:"url(#mask-2)"})))}var I=a(()=>{});var v,tt,ot,et,rt,nt,it,At,st,Lt,pt,zt,at,A=a(()=>{v=theming.styled.div`
+  `),R=i__default.default.forwardRef(({width:t,height:o,children:e,...r},l)=>i__default.default.createElement(m__namespace.Content,{ref:l,asChild:!0,...r},i__default.default.createElement(zt,{width:t,height:o},e)));});function S({children:t,width:o,height:e,onEscapeKeyDown:r,onInteractOutside:l=d=>d.preventDefault(),...n}){return i__default.default.createElement(m__namespace.Root,{...n},i__default.default.createElement(m__namespace.Portal,null,i__default.default.createElement(Q,null),i__default.default.createElement(R,{width:o,height:e,onInteractOutside:l,onEscapeKeyDown:r},t({Title:m__namespace.Title,Description:m__namespace.Description,Close:m__namespace.Close}))))}var M=a(()=>{tt();});function k(){return i__default.default.createElement("svg",{width:"32px",height:"40px",viewBox:"0 0 256 319",preserveAspectRatio:"xMidYMid"},i__default.default.createElement("defs",null,i__default.default.createElement("path",{d:"M9.87245893,293.324145 L0.0114611411,30.5732167 C-0.314208957,21.8955842 6.33948896,14.5413918 15.0063196,13.9997149 L238.494389,0.0317105427 C247.316188,-0.519651867 254.914637,6.18486163 255.466,15.0066607 C255.486773,15.339032 255.497167,15.6719708 255.497167,16.0049907 L255.497167,302.318596 C255.497167,311.157608 248.331732,318.323043 239.492719,318.323043 C239.253266,318.323043 239.013844,318.317669 238.774632,318.306926 L25.1475605,308.712253 C16.8276309,308.338578 10.1847994,301.646603 9.87245893,293.324145 L9.87245893,293.324145 Z",id:"path-1"})),i__default.default.createElement("g",null,i__default.default.createElement("mask",{id:"mask-2",fill:"white"},i__default.default.createElement("use",{xlinkHref:"#path-1"})),i__default.default.createElement("use",{fill:"#FF4785",fillRule:"nonzero",xlinkHref:"#path-1"}),i__default.default.createElement("path",{d:"M188.665358,39.126973 L190.191903,2.41148534 L220.883535,0 L222.205755,37.8634126 C222.251771,39.1811466 221.22084,40.2866846 219.903106,40.3327009 C219.338869,40.3524045 218.785907,40.1715096 218.342409,39.8221376 L206.506729,30.4984116 L192.493574,41.1282444 C191.443077,41.9251106 189.945493,41.7195021 189.148627,40.6690048 C188.813185,40.2267976 188.6423,39.6815326 188.665358,39.126973 Z M149.413703,119.980309 C149.413703,126.206975 191.355678,123.222696 196.986019,118.848893 C196.986019,76.4467826 174.234041,54.1651411 132.57133,54.1651411 C90.9086182,54.1651411 67.5656805,76.7934542 67.5656805,110.735941 C67.5656805,169.85244 147.345341,170.983856 147.345341,203.229219 C147.345341,212.280549 142.913138,217.654777 133.162291,217.654777 C120.456641,217.654777 115.433477,211.165914 116.024438,189.103298 C116.024438,184.317101 67.5656805,182.824962 66.0882793,189.103298 C62.3262146,242.56887 95.6363019,257.990394 133.753251,257.990394 C170.688279,257.990394 199.645341,238.303123 199.645341,202.663511 C199.645341,139.304202 118.683759,141.001326 118.683759,109.604526 C118.683759,96.8760922 128.139127,95.178968 133.753251,95.178968 C139.662855,95.178968 150.300143,96.2205679 149.413703,119.980309 Z",fill:"#FFFFFF",fillRule:"nonzero",mask:"url(#mask-2)"})))}var $=a(()=>{});var T,ot,et,rt,nt,it,st,Lt,at,Yt,pt,jt,lt,I=a(()=>{T=theming.styled.div`
   border-radius: 5px;
   display: flex;
   flex-direction: column;
   align-items: center;
   height: 100%;
   justify-content: space-between;
-`,tt=theming.styled.div`
+`,ot=theming.styled.div`
   display: flex;
   flex: 1;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-`,ot=theming.styled.h1`
+`,et=theming.styled.h1`
   margin: 0;
   margin-top: 20px;
   margin-bottom: 5px;
@@ -99,7 +124,7 @@ var ht=Object.defineProperty;var a=(t,o)=>()=>(t&&(o=t(t=0)),o);var xt=(t,o)=>{f
   font-weight: ${({theme:t})=>t.typography.weight.bold};
   font-size: ${({theme:t})=>t.typography.size.m1}px;
   line-height: ${({theme:t})=>t.typography.size.m3}px;
-`,et=theming.styled.p`
+`,rt=theming.styled.p`
   margin: 0;
   margin-bottom: 20px;
   max-width: 320px;
@@ -108,7 +133,7 @@ var ht=Object.defineProperty;var a=(t,o)=>()=>(t&&(o=t(t=0)),o);var xt=(t,o)=>{f
   font-weight: ${({theme:t})=>t.typography.weight.regular};
   line-height: ${({theme:t})=>t.typography.size.m1}px;
   color: ${({theme:t})=>t.color.darker};
-`,rt=theming.styled.button`
+`,nt=theming.styled.button`
   all: unset;
   cursor: pointer;
   font-size: 13px;
@@ -118,10 +143,10 @@ var ht=Object.defineProperty;var a=(t,o)=>()=>(t&&(o=t(t=0)),o);var xt=(t,o)=>{f
   &:focus-visible {
     outline: auto;
   }
-`,nt=theming.styled(components.Icons)`
+`,it=theming.styled(components.Icons)`
   margin-left: 2px;
   height: 10px;
-`,it=theming.styled.div`
+`,st=theming.styled.div`
   position: absolute;
   top: 0;
   left: 0;
@@ -129,11 +154,11 @@ var ht=Object.defineProperty;var a=(t,o)=>()=>(t&&(o=t(t=0)),o);var xt=(t,o)=>{f
   height: 100%;
   z-index: -1;
   overflow: hidden;
-`,At=theming.keyframes`
+`,Lt=theming.keyframes`
   0% { transform: translate(0px, 0px) }
   50% { transform: translate(-200px, 0px) }
   100% { transform: translate(0px, 0px) }
-`,st=theming.styled.div`
+`,at=theming.styled.div`
   position: absolute;
   width: 1200px;
   height: 1200px;
@@ -144,10 +169,10 @@ var ht=Object.defineProperty;var a=(t,o)=>()=>(t&&(o=t(t=0)),o);var xt=(t,o)=>{f
     rgba(253, 255, 147, 1) 0%,
     rgba(253, 255, 147, 0) 70%
   );
-  animation: ${At} 4s linear infinite;
+  animation: ${Lt} 4s linear infinite;
   animation-timing-function: ease-in-out;
   z-index: 3;
-`,Lt=theming.keyframes`
+`,Yt=theming.keyframes`
   0% { transform: translate(0px, 0px) }
   50% { transform: translate(400px, 0px) }
   100% { transform: translate(0px, 0px) }
@@ -162,14 +187,14 @@ var ht=Object.defineProperty;var a=(t,o)=>()=>(t&&(o=t(t=0)),o);var xt=(t,o)=>{f
     rgba(255, 119, 119, 1) 0%,
     rgba(255, 119, 119, 0) 70%
   );
-  animation: ${Lt} 6s linear infinite;
+  animation: ${Yt} 6s linear infinite;
   animation-timing-function: ease-in-out;
   z-index: 2;
-`,zt=theming.keyframes`
+`,jt=theming.keyframes`
   0% { transform: translate(600px, -40px) }
   50% { transform: translate(600px, -200px) }
   100% { transform: translate(600px, -40px) }
-`,at=theming.styled.div`
+`,lt=theming.styled.div`
   position: absolute;
   width: 1200px;
   height: 1200px;
@@ -180,9 +205,9 @@ var ht=Object.defineProperty;var a=(t,o)=>()=>(t&&(o=t(t=0)),o);var xt=(t,o)=>{f
     rgba(119, 255, 247, 0.8) 0%,
     rgba(119, 255, 247, 0) 70%
   );
-  animation: ${zt} 4s linear infinite;
+  animation: ${jt} 4s linear infinite;
   animation-timing-function: ease-in-out;
   z-index: 4;
-`;});var lt,dt=a(()=>{b();M();I();A();lt=({onSkip:t,onProceed:o})=>n__default.default.createElement(S,{width:540,height:430,defaultOpen:!0},({Close:e})=>n__default.default.createElement(v,{"data-chromatic":"ignore"},n__default.default.createElement(tt,null,n__default.default.createElement(k,null),n__default.default.createElement(ot,null,"Welcome to Storybook"),n__default.default.createElement(et,null,"Storybook helps you develop UI components. Learn the basics in a few simple steps."),n__default.default.createElement(x,{style:{marginTop:4},onClick:o},"Start your 3 minute tour")),n__default.default.createElement(e,{asChild:!0},n__default.default.createElement(rt,{onClick:t},"Skip tour",n__default.default.createElement(nt,{icon:"arrowright"}))),n__default.default.createElement(it,null,n__default.default.createElement(st,null),n__default.default.createElement(pt,null),n__default.default.createElement(at,null))));});function mt({onFinish:t}){return n__default.default.createElement(S,{width:540,defaultOpen:!0},({Title:o,Description:e})=>n__default.default.createElement(v,{"data-chromatic":"ignore"},n__default.default.createElement(k,null),n__default.default.createElement(o,{style:{marginTop:20}},"Create your first story (WORK IN PROGRESS)"),n__default.default.createElement(e,null,"Now it's your turn. ",n__default.default.createElement("br",null),"See how easy it is to create your first story by following these steps below."),n__default.default.createElement(x,{style:{marginTop:4},onClick:t},"Go to story")))}var ut=a(()=>{b();M();I();A();});var gt={};xt(gt,{default:()=>ft});function ft({api:t}){let[o,e]=n.useState(!0),[r,d]=n.useState(!1),[i,l]=n.useState("1:Welcome"),F=n.useCallback(()=>{let s=new URL(window.location.href);s.searchParams.delete("onboarding");let T=decodeURIComponent(s.searchParams.get("path"));s.search=`?path=${T}`,history.replaceState({},"",s.href),e(!1);},[e]);return n.useEffect(()=>{let s;return i==="4:VisitNewStory"&&(s=window.setTimeout(()=>{d(!0),l("5:ConfigureYourProject");},2e3)),()=>{clearTimeout(s);}},[i]),n.useEffect(()=>{t.once(coreEvents.CURRENT_STORY_WAS_SET,({storyId:s})=>{s!=="example-button--primary"&&t.selectStory("example-button--primary",void 0,{ref:void 0}),t.togglePanel(!0),t.togglePanelPosition("bottom"),t.setSelectedPanel("addon-controls");});},[]),n.useEffect(()=>{let s=T=>{T==="configure-your-project--docs"&&F();};return t.on(coreEvents.STORY_CHANGED,s),()=>{t.off(coreEvents.STORY_CHANGED,s);}},[]),o?n__default.default.createElement(theming.ThemeProvider,{theme:Ut},r&&n__default.default.createElement(h,{numberOfPieces:1e3,initialVelocityY:3,recycle:!1,onConfettiComplete:s=>{s.reset(),d(!1);}}),i==="1:Welcome"&&n__default.default.createElement(lt,{onProceed:()=>{l("2:StorybookTour");},onSkip:F}),(i==="2:StorybookTour"||i==="5:ConfigureYourProject")&&n__default.default.createElement(q,{api:t,isFinalStep:i==="5:ConfigureYourProject",onFirstTourDone:()=>{l("3:WriteYourStory");}}),i==="3:WriteYourStory"&&n__default.default.createElement(mt,{onFinish:()=>{l("4:VisitNewStory");}})):null}var Ut,yt=a(()=>{Z();dt();ut();P();Ut=theming.ensure(theming.themes.light);});var qt=n.lazy(()=>Promise.resolve().then(()=>(yt(),gt)));managerApi.addons.register("@storybook/addon-onboarding",async t=>{if(!t.getUrlState().queryParams.onboarding)return;let e=!1;try{e=!!(await(await fetch("./index.json")).json()).entries["example-button--primary"];}catch{}if(e){let r=document.createElement("div");r.id="addon-onboarding",document.body.appendChild(r),_t__default.default.render(n__default.default.createElement(n.Suspense,{fallback:n__default.default.createElement("div",null,"Loading...")},n__default.default.createElement(qt,{api:t})),r);}});
+`;});var dt,mt=a(()=>{O();M();$();I();dt=({onSkip:t,onProceed:o})=>i__default.default.createElement(S,{width:540,height:430,defaultOpen:!0},({Close:e})=>i__default.default.createElement(T,{"data-chromatic":"ignore"},i__default.default.createElement(ot,null,i__default.default.createElement(k,null),i__default.default.createElement(et,null,"Welcome to Storybook"),i__default.default.createElement(rt,null,"Storybook helps you develop UI components. Learn the basics in a few simple steps."),i__default.default.createElement(b,{style:{marginTop:4},onClick:o},"Start your 3 minute tour")),i__default.default.createElement(e,{asChild:!0},i__default.default.createElement(nt,{onClick:t},"Skip tour",i__default.default.createElement(it,{icon:"arrowright"}))),i__default.default.createElement(st,null,i__default.default.createElement(at,null),i__default.default.createElement(pt,null),i__default.default.createElement(lt,null))));});function ct({onFinish:t}){return i__default.default.createElement(S,{width:540,defaultOpen:!0},({Title:o,Description:e})=>i__default.default.createElement(T,{"data-chromatic":"ignore"},i__default.default.createElement(k,null),i__default.default.createElement(o,{style:{marginTop:20}},"Create your first story (WORK IN PROGRESS)"),i__default.default.createElement(e,null,"Now it's your turn. ",i__default.default.createElement("br",null),"See how easy it is to create your first story by following these steps below."),i__default.default.createElement(b,{style:{marginTop:4},onClick:t},"Go to story")))}var ft=a(()=>{O();M();$();I();});var ht={};bt(ht,{default:()=>gt});function gt({api:t}){let[o,e]=i.useState(!0),[r,l]=i.useState(!1),[n,d]=i.useState("1:Welcome"),y=i.useCallback(()=>{let s=new URL(window.location.href);s.searchParams.delete("onboarding");let v=decodeURIComponent(s.searchParams.get("path"));s.search=`?path=${v}`,history.replaceState({},"",s.href),e(!1);},[e]);return i.useEffect(()=>{let s;return n==="4:VisitNewStory"&&(s=window.setTimeout(()=>{l(!0),d("5:ConfigureYourProject");},2e3)),()=>{clearTimeout(s);}},[n]),i.useEffect(()=>{t.once(coreEvents.CURRENT_STORY_WAS_SET,({storyId:s})=>{s!=="example-button--primary"&&t.selectStory("example-button--primary",void 0,{ref:void 0}),t.togglePanel(!0),t.togglePanelPosition("bottom"),t.setSelectedPanel("addon-controls");});},[]),i.useEffect(()=>{let s=v=>{v==="configure-your-project--docs"&&y();};return t.on(coreEvents.STORY_CHANGED,s),()=>{t.off(coreEvents.STORY_CHANGED,s);}},[]),o?i__default.default.createElement(theming.ThemeProvider,{theme:Vt},r&&i__default.default.createElement(x,{numberOfPieces:1e3,initialVelocityY:3,recycle:!1,onConfettiComplete:s=>{s.reset(),l(!1);}}),n==="1:Welcome"&&i__default.default.createElement(dt,{onProceed:()=>{d("2:StorybookTour");},onSkip:y}),(n==="2:StorybookTour"||n==="5:ConfigureYourProject")&&i__default.default.createElement(q,{api:t,isFinalStep:n==="5:ConfigureYourProject",onFirstTourDone:()=>{d("3:WriteYourStory");}}),n==="3:WriteYourStory"&&i__default.default.createElement(ct,{onFinish:()=>{d("4:VisitNewStory");}})):null}var Vt,yt=a(()=>{J();mt();ft();P();Vt=theming.ensure(theming.themes.light);});var Qt=i.lazy(()=>Promise.resolve().then(()=>(yt(),ht)));managerApi.addons.register("@storybook/addon-onboarding",async t=>{if(!(t.getUrlState().path==="/onboarding"))return;let e=!1;try{e=!!(await(await fetch("./index.json")).json()).entries["example-button--primary"];}catch{}if(e){let r=document.createElement("div");r.id="addon-onboarding",document.body.appendChild(r),Zt__default.default.render(i__default.default.createElement(i.Suspense,{fallback:i__default.default.createElement("div",null,"Loading...")},i__default.default.createElement(Qt,{api:t})),r);}});
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=manager.js.map

package/dist/manager.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/PulsatingEffect/PulsatingEffect.tsx","../src/components/Confetti/Confetti.tsx","../src/components/TitleBody/TitleBody.styled.tsx","../src/components/TitleBody/TitleBody.tsx","../src/components/Button/Button.tsx","../src/features/GuidedTour/GuidedTour.tsx","../src/components/Modal/Modal.styled.tsx","../src/components/Modal/Modal.tsx","../src/features/WelcomeModal/StorybookLogo.tsx","../src/features/WelcomeModal/WelcomeModal.styled.tsx","../src/features/WelcomeModal/WelcomeModal.tsx","../src/features/WriteStoriesModal/WriteStoriesModal.tsx","../src/App.tsx","../src/manager.tsx"],"names":["useEffect","PulsatingEffect","targetSelector","element","keyframes","style","init_PulsatingEffect","__esmMin","ReactConfetti","React","styled","createPortal","useState","Confetti","top","left","width","height","confettiProps","confettiContainer","container","Wrapper","init_Confetti","Title","Body","init_TitleBody_styled","TitleBody","prefix","title","body","init_TitleBody","Button","props","buttonStyles","init_Button","Joyride","STATUS","STORY_ARGS_UPDATED","GuidedTour","api","isFinalStep","onFirstTourDone","stepIndex","setStepIndex","INTERACTIONS_COUNT","data","init_GuidedTour","css","Dialog","StyledOverlay","StyledContent","ContentWrapper","init_Modal_styled","children","contentProps","ref","Modal","onEscapeKeyDown","onInteractOutside","ev","rootProps","init_Modal","StorybookLogo","init_StorybookLogo","Icons","ModalContentWrapper","TopContent","Description","SkipButton","StyledIcon","Background","circle1Anim","Circle1","circle2Anim","Circle2","circle3Anim","Circle3","init_WelcomeModal_styled","theme","WelcomeModal","init_WelcomeModal","onSkip","onProceed","Close","WriteStoriesModal","onFinish","init_WriteStoriesModal","App_exports","__export","App","useCallback","ThemeProvider","ensure","themes","STORY_CHANGED","CURRENT_STORY_WAS_SET","enabled","setEnabled","showConfetti","setShowConfetti","step","setStep","skipTour","url","path","stepTimeout","storyId","onStoryChanged","confetti","init_App","ReactDOM","lazy","Suspense","addons","hasButtonStories","domNode"],"mappings":"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","sourcesContent":["import { useEffect } from \"react\";\n\nexport function PulsatingEffect({\n  targetSelector,\n}: {\n  targetSelector: string;\n}): JSX.Element {\n  useEffect(() => {\n    const element = document.querySelector<HTMLElement>(targetSelector);\n    if (element) {\n      element.style.animation = \"pulsate 3s infinite\";\n      element.style.transformOrigin = \"center\";\n      element.style.animationTimingFunction = \"ease-in-out\";\n\n      const keyframes = `\n        @keyframes pulsate {\n          0% {\n            box-shadow: 0 0 0 0 rgba(2, 156, 253, 0.7), 0 0 0 0 rgba(2, 156, 253, 0.4);\n          }\n          50% {\n            box-shadow: 0 0 0 20px rgba(2, 156, 253, 0), 0 0 0 40px rgba(2, 156, 253, 0);\n          }\n          100% {\n            box-shadow: 0 0 0 0 rgba(2, 156, 253, 0), 0 0 0 0 rgba(2, 156, 253, 0);\n          }\n        }\n      `;\n      const style = document.createElement(\"style\");\n      style.id = \"sb-onboarding-pulsating-effect\";\n      style.innerHTML = keyframes;\n      document.head.appendChild(style);\n    }\n\n    return () => {\n      const styleElement = document.querySelector(\n        \"#sb-onboarding-pulsating-effect\"\n      );\n      styleElement?.remove();\n    };\n  }, [targetSelector]);\n\n  return null;\n}\n","import ReactConfetti from \"react-confetti\";\nimport React, { useEffect } from \"react\";\nimport { styled } from \"@storybook/theming\";\nimport { createPortal } from \"react-dom\";\nimport { useState } from \"react\";\n\ninterface ConfettiProps\n  extends Omit<React.ComponentProps<typeof ReactConfetti>, \"drawShape\"> {\n  top?: number;\n  left?: number;\n  width?: number;\n  height?: number;\n}\n\nconst Wrapper = styled.div<{\n  width: number;\n  height: number;\n  top: number;\n  left: number;\n}>(({ width, height, left, top }) => ({\n  width: `${width}px`,\n  height: `${height}px`,\n  left: `${left}px`,\n  top: `${top}px`,\n  position: \"relative\",\n  overflow: \"hidden\",\n}));\n\nexport function Confetti({\n  top = 0,\n  left = 0,\n  width = window.innerWidth,\n  height = window.innerHeight,\n  ...confettiProps\n}: ConfettiProps): React.ReactPortal {\n  const [confettiContainer] = useState(() => {\n    const container = document.createElement(\"div\");\n    container.setAttribute(\"id\", \"confetti-container\");\n    container.setAttribute(\n      \"style\",\n      \"position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999;\"\n    );\n\n    return container;\n  });\n\n  useEffect(() => {\n    document.body.appendChild(confettiContainer);\n\n    return () => {\n      document.body.removeChild(confettiContainer);\n    };\n  }, []);\n\n  return createPortal(\n    <Wrapper top={top} left={left} width={width} height={height}>\n      <ReactConfetti {...confettiProps} />\n    </Wrapper>,\n    confettiContainer\n  );\n}\n","import { styled } from \"@storybook/theming\";\n\nexport const Wrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n`;\n\nexport const Title = styled.strong`\n  font-size: 13px;\n`;\n\nexport const Body = styled.p`\n  font-size: 13px;\n  text-align: start;\n  color: #798186;\n  margin: 0;\n  margin-top: 4px;\n`;\n","import React from \"react\";\nimport { Body, Title, Wrapper } from \"./TitleBody.styled\";\n\nexport function TitleBody({\n  prefix,\n  title,\n  body,\n}: {\n  prefix?: React.ReactNode;\n  title: React.ReactNode;\n  body: React.ReactNode;\n}) {\n  return (\n    <Wrapper>\n      {prefix}\n      <Title>{title}</Title>\n      <Body>{body}</Body>\n    </Wrapper>\n  );\n}\n","import React from \"react\";\n\nexport const buttonStyles: React.ComponentProps<\"button\">[\"style\"] = {\n  border: 0,\n  cursor: \"pointer\",\n  fontSize: 13,\n  lineHeight: 1,\n  padding: \"9px 12px\",\n  backgroundColor: \"#029CFD\",\n  borderRadius: 4,\n  color: \"#fff\",\n  fontWeight: 700,\n};\n\nexport function Button(props: React.ComponentProps<\"button\">) {\n  const style = {\n    ...buttonStyles,\n    ...(props.style || {}),\n  };\n\n  return <button type=\"button\" {...props} style={style} />;\n}\n","import React, { useEffect, useState } from \"react\";\nimport Joyride, { CallBackProps, STATUS, Step } from \"react-joyride\";\n\nimport { PulsatingEffect } from \"../../components/PulsatingEffect/PulsatingEffect\";\nimport { Confetti } from \"../../components/Confetti/Confetti\";\nimport { TitleBody } from \"../../components/TitleBody/TitleBody\";\nimport { API } from \"@storybook/manager-api\";\nimport { STORY_ARGS_UPDATED } from \"@storybook/core-events\";\nimport { buttonStyles } from \"src/components/Button/Button\";\n\nlet INTERACTIONS_COUNT = 0;\n\nexport function GuidedTour({\n  api,\n  isFinalStep,\n  onFirstTourDone,\n}: {\n  api: API;\n  isFinalStep?: boolean;\n  onFirstTourDone: () => void;\n}) {\n  const [stepIndex, setStepIndex] = useState<number>();\n\n  useEffect(() => {\n    api.on(STORY_ARGS_UPDATED, () => {\n      INTERACTIONS_COUNT = INTERACTIONS_COUNT + 1;\n      if (INTERACTIONS_COUNT === 2) {\n        setStepIndex(3);\n      }\n    });\n  }, []);\n\n  const steps: Step[] = isFinalStep\n    ? [\n      {\n        target: \"#configure-your-project--docs\",\n        content: (\n          <TitleBody\n            title=\"Continue setting up your project\"\n            body=\"You nailed the basics. Now get started writing stories for your own components.\"\n          />\n        ),\n        placement: \"right\",\n        disableOverlay: true,\n        disableBeacon: true,\n        styles: {\n          buttonNext: {\n            display: \"none\",\n          },\n        },\n        floaterProps: {\n          disableAnimation: true,\n        },\n      },\n    ]\n    : [\n      {\n        target: \"#storybook-explorer-tree > div\",\n        content: (\n          <TitleBody\n            title=\"Storybook is built from stories\"\n            body=\"Storybook uses stories to represent the key states supported by each of your components. For example: this Button component has four stories.\"\n          />\n        ),\n        placement: \"right\",\n        disableBeacon: true,\n        styles: {\n          spotlight: {\n            transform: 'translateY(30px)',\n          },\n        },\n        floaterProps: {\n          disableAnimation: true,\n        },\n      },\n      {\n        target: \"#storybook-preview-iframe\",\n        content: (\n          <TitleBody\n            title=\"Storybook previews are interactive\"\n            body=\"Whenever you modify code or stories, Storybook automatically updates how it previews your components.\"\n          />\n        ),\n        placement: \"bottom\",\n      },\n      {\n        target: \"#root div[role=main]\",\n        content: (\n          <>\n            <TitleBody\n              title=\"Interactive story playground\"\n              body={\n                <>\n                  See how a story renders with different data and state\n                  without touching code.\n                  <br />\n                  Try it out by pressing this button.\n                </>\n              }\n            />\n            <PulsatingEffect targetSelector=\"#control-primary\" />\n          </>\n        ),\n        placement: \"right\",\n        spotlightClicks: true,\n        floaterProps: {\n          target: \"#control-primary\",\n        },\n        styles: {\n          buttonNext: {\n            display: \"none\",\n          },\n        },\n      },\n      {\n        target: \"#control-primary\",\n        content: (\n          <>\n            <Confetti numberOfPieces={100} />\n            <TitleBody\n              title=\"Congratulations!\"\n              body=\"You've learned how to control your stories interactively. Now: let's explore how to write your first story.\"\n            />\n          </>\n        ),\n        placement: \"right\",\n        disableOverlay: true,\n        locale: {\n          last: \"Next\",\n        },\n      },\n    ];\n\n  return (\n    <Joyride\n      steps={steps}\n      continuous\n      stepIndex={stepIndex}\n      spotlightPadding={0}\n      hideBackButton\n      disableCloseOnEsc\n      disableOverlayClose\n      disableScrolling\n      hideCloseButton\n      callback={(data: CallBackProps) => {\n        if (!isFinalStep && data.status === STATUS.FINISHED) {\n          onFirstTourDone();\n        }\n      }}\n      floaterProps={{\n        styles: {\n          floater: {\n            padding: 0,\n            paddingLeft: 8,\n            paddingTop: 8,\n            filter:\n              \"drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1))\",\n          },\n        },\n      }}\n      styles={{\n        spotlight: {\n          border: \"solid 2px #004c7c\",\n        },\n        tooltip: {\n          maxWidth: 260,\n          borderRadius: 4,\n          padding: 15,\n        },\n        overlay: {\n          backgroundColor: \"rgba(0, 0, 0, 0.48)\",\n        },\n        buttonNext: {\n          ...buttonStyles,\n          marginTop: 5,\n        },\n        tooltipContent: {\n          paddingTop: 4,\n          padding: 0,\n        },\n        options: {\n          zIndex: 10000,\n          primaryColor: \"#029CFD\",\n        },\n      }}\n    />\n  );\n}\n","import { css, styled } from \"@storybook/theming\";\nimport * as Dialog from \"@radix-ui/react-dialog\";\nimport React from \"react\";\n\nexport const StyledOverlay = styled(Dialog.Overlay)`\n  background-color: rgba(27, 28, 29, 0.48);\n  position: fixed;\n  inset: 0px;\n  width: 100%;\n  height: 100%;\n`;\n\nexport const StyledContent = styled.div<{ width: number; height: number }>(\n  ({ width, height }) => css`\n    background-color: white;\n    border-radius: 6px;\n    box-shadow: rgba(14, 18, 22, 0.35) 0px 10px 38px -10px;\n    position: fixed;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    width: ${width ?? 740}px;\n    height: ${height ? `${height}px` : \"auto\"};\n    max-width: calc(100% - 40px);\n    max-height: 85vh;\n  `\n);\n\nexport const ContentWrapper = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof StyledContent> &\n    React.ComponentProps<typeof Dialog.Content>\n>(({ width, height, children, ...contentProps }, ref) => (\n  <Dialog.Content ref={ref} asChild {...contentProps}>\n    <StyledContent width={width} height={height}>\n      {children}\n    </StyledContent>\n  </Dialog.Content>\n));\n","import React from \"react\";\nimport * as Dialog from \"@radix-ui/react-dialog\";\nimport { ContentWrapper, StyledOverlay } from \"./Modal.styled\";\n\ntype ContentProps = React.ComponentProps<typeof ContentWrapper>;\n\ninterface ModalProps\n  extends Omit<React.ComponentProps<typeof Dialog.Root>, \"children\"> {\n  width?: number;\n  height?: number;\n  children: (props: {\n    Title: typeof Dialog.Title;\n    Description: typeof Dialog.Description;\n    Close: typeof Dialog.Close;\n  }) => React.ReactNode;\n  onEscapeKeyDown?: ContentProps[\"onEscapeKeyDown\"];\n  onInteractOutside?: ContentProps[\"onInteractOutside\"];\n}\n\nexport function Modal({\n  children,\n  width,\n  height,\n  onEscapeKeyDown,\n  onInteractOutside = (ev) => ev.preventDefault(),\n  ...rootProps\n}: ModalProps) {\n  return (\n    <Dialog.Root {...rootProps}>\n      <Dialog.Portal>\n        <StyledOverlay />\n        <ContentWrapper\n          width={width}\n          height={height}\n          onInteractOutside={onInteractOutside}\n          onEscapeKeyDown={onEscapeKeyDown}\n        >\n          {children({\n            Title: Dialog.Title,\n            Description: Dialog.Description,\n            Close: Dialog.Close,\n          })}\n        </ContentWrapper>\n      </Dialog.Portal>\n    </Dialog.Root>\n  );\n}\n","import React from \"react\";\n\nexport function StorybookLogo() {\n  return (\n    <svg\n      width=\"32px\"\n      height=\"40px\"\n      viewBox=\"0 0 256 319\"\n      preserveAspectRatio=\"xMidYMid\"\n    >\n      <defs>\n        <path\n          d=\"M9.87245893,293.324145 L0.0114611411,30.5732167 C-0.314208957,21.8955842 6.33948896,14.5413918 15.0063196,13.9997149 L238.494389,0.0317105427 C247.316188,-0.519651867 254.914637,6.18486163 255.466,15.0066607 C255.486773,15.339032 255.497167,15.6719708 255.497167,16.0049907 L255.497167,302.318596 C255.497167,311.157608 248.331732,318.323043 239.492719,318.323043 C239.253266,318.323043 239.013844,318.317669 238.774632,318.306926 L25.1475605,308.712253 C16.8276309,308.338578 10.1847994,301.646603 9.87245893,293.324145 L9.87245893,293.324145 Z\"\n          id=\"path-1\"\n        ></path>\n      </defs>\n      <g>\n        <mask id=\"mask-2\" fill=\"white\">\n          <use xlinkHref=\"#path-1\"></use>\n        </mask>\n        <use fill=\"#FF4785\" fillRule=\"nonzero\" xlinkHref=\"#path-1\"></use>\n        <path\n          d=\"M188.665358,39.126973 L190.191903,2.41148534 L220.883535,0 L222.205755,37.8634126 C222.251771,39.1811466 221.22084,40.2866846 219.903106,40.3327009 C219.338869,40.3524045 218.785907,40.1715096 218.342409,39.8221376 L206.506729,30.4984116 L192.493574,41.1282444 C191.443077,41.9251106 189.945493,41.7195021 189.148627,40.6690048 C188.813185,40.2267976 188.6423,39.6815326 188.665358,39.126973 Z M149.413703,119.980309 C149.413703,126.206975 191.355678,123.222696 196.986019,118.848893 C196.986019,76.4467826 174.234041,54.1651411 132.57133,54.1651411 C90.9086182,54.1651411 67.5656805,76.7934542 67.5656805,110.735941 C67.5656805,169.85244 147.345341,170.983856 147.345341,203.229219 C147.345341,212.280549 142.913138,217.654777 133.162291,217.654777 C120.456641,217.654777 115.433477,211.165914 116.024438,189.103298 C116.024438,184.317101 67.5656805,182.824962 66.0882793,189.103298 C62.3262146,242.56887 95.6363019,257.990394 133.753251,257.990394 C170.688279,257.990394 199.645341,238.303123 199.645341,202.663511 C199.645341,139.304202 118.683759,141.001326 118.683759,109.604526 C118.683759,96.8760922 128.139127,95.178968 133.753251,95.178968 C139.662855,95.178968 150.300143,96.2205679 149.413703,119.980309 Z\"\n          fill=\"#FFFFFF\"\n          fillRule=\"nonzero\"\n          mask=\"url(#mask-2)\"\n        ></path>\n      </g>\n    </svg>\n  );\n}\n","import { Icons } from \"@storybook/components\";\nimport { keyframes, styled } from \"@storybook/theming\";\n\nexport const ModalContentWrapper = styled.div`\n  border-radius: 5px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  height: 100%;\n  justify-content: space-between;\n`;\n\nexport const TopContent = styled.div`\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n`;\n\nexport const Title = styled.h1`\n  margin: 0;\n  margin-top: 20px;\n  margin-bottom: 5px;\n  color: ${({ theme }) => theme.color.darkest};\n  font-weight: ${({ theme }) => theme.typography.weight.bold};\n  font-size: ${({ theme }) => theme.typography.size.m1}px;\n  line-height: ${({ theme }) => theme.typography.size.m3}px;\n`;\n\nexport const Description = styled.p`\n  margin: 0;\n  margin-bottom: 20px;\n  max-width: 320px;\n  text-align: center;\n  font-size: ${({ theme }) => theme.typography.size.s2}px;\n  font-weight: ${({ theme }) => theme.typography.weight.regular};\n  line-height: ${({ theme }) => theme.typography.size.m1}px;\n  color: ${({ theme }) => theme.color.darker};\n`;\n\nexport const SkipButton = styled.button`\n  all: unset;\n  cursor: pointer;\n  font-size: 13px;\n  color: #798186;\n  padding-bottom: 20px;\n\n  &:focus-visible {\n    outline: auto;\n  }\n`;\n\nexport const StyledIcon = styled(Icons)`\n  margin-left: 2px;\n  height: 10px;\n`;\n\nexport const Background = styled.div`\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: -1;\n  overflow: hidden;\n`;\n\nexport const circle1Anim = keyframes`\n  0% { transform: translate(0px, 0px) }\n  50% { transform: translate(-200px, 0px) }\n  100% { transform: translate(0px, 0px) }\n`;\n\nexport const Circle1 = styled.div`\n  position: absolute;\n  width: 1200px;\n  height: 1200px;\n  left: -200px;\n  top: -900px;\n  background: radial-gradient(\n    circle at center,\n    rgba(253, 255, 147, 1) 0%,\n    rgba(253, 255, 147, 0) 70%\n  );\n  animation: ${circle1Anim} 4s linear infinite;\n  animation-timing-function: ease-in-out;\n  z-index: 3;\n`;\n\nexport const circle2Anim = keyframes`\n  0% { transform: translate(0px, 0px) }\n  50% { transform: translate(400px, 0px) }\n  100% { transform: translate(0px, 0px) }\n`;\n\nexport const Circle2 = styled.div`\n  position: absolute;\n  width: 1200px;\n  height: 1200px;\n  left: -600px;\n  top: -840px;\n  background: radial-gradient(\n    circle at center,\n    rgba(255, 119, 119, 1) 0%,\n    rgba(255, 119, 119, 0) 70%\n  );\n  animation: ${circle2Anim} 6s linear infinite;\n  animation-timing-function: ease-in-out;\n  z-index: 2;\n`;\n\nexport const circle3Anim = keyframes`\n  0% { transform: translate(600px, -40px) }\n  50% { transform: translate(600px, -200px) }\n  100% { transform: translate(600px, -40px) }\n`;\n\nexport const Circle3 = styled.div`\n  position: absolute;\n  width: 1200px;\n  height: 1200px;\n  left: -600px;\n  top: -840px;\n  background: radial-gradient(\n    circle at center,\n    rgba(119, 255, 247, 0.8) 0%,\n    rgba(119, 255, 247, 0) 70%\n  );\n  animation: ${circle3Anim} 4s linear infinite;\n  animation-timing-function: ease-in-out;\n  z-index: 4;\n`;\n","import React from \"react\";\n\nimport { Button } from \"../../components/Button/Button\";\nimport { Modal } from \"../../components/Modal/Modal\";\nimport { StorybookLogo } from \"./StorybookLogo\";\nimport {\n  ModalContentWrapper,\n  SkipButton,\n  StyledIcon,\n  Title,\n  Description,\n  Background,\n  Circle1,\n  Circle2,\n  Circle3,\n  TopContent,\n} from \"./WelcomeModal.styled\";\n\nexport const WelcomeModal = ({\n  onSkip,\n  onProceed,\n}: {\n  onSkip: () => void;\n  onProceed: () => void;\n}) => {\n  return (\n    <Modal width={540} height={430} defaultOpen>\n      {({ Close }) => (\n        <ModalContentWrapper data-chromatic=\"ignore\">\n          <TopContent>\n            <StorybookLogo />\n            <Title>Welcome to Storybook</Title>\n            <Description>\n              Storybook helps you develop UI components. Learn the basics in a\n              few simple steps.\n            </Description>\n            <Button style={{ marginTop: 4 }} onClick={onProceed}>\n              Start your 3 minute tour\n            </Button>\n          </TopContent>\n          <Close asChild>\n            <SkipButton onClick={onSkip}>\n              Skip tour\n              <StyledIcon icon=\"arrowright\" />\n            </SkipButton>\n          </Close>\n          <Background>\n            <Circle1 />\n            <Circle2 />\n            <Circle3 />\n          </Background>\n        </ModalContentWrapper>\n      )}\n    </Modal>\n  );\n};\n","import React from \"react\";\nimport { Button } from \"../../components/Button/Button\";\n\nimport { Modal } from \"../../components/Modal/Modal\";\nimport { StorybookLogo } from \"../WelcomeModal/StorybookLogo\";\nimport { ModalContentWrapper } from \"../WelcomeModal/WelcomeModal.styled\";\n\nexport function WriteStoriesModal({ onFinish }: { onFinish: () => void }) {\n  return (\n    <Modal width={540} defaultOpen>\n      {({ Title, Description }) => (\n        <ModalContentWrapper data-chromatic=\"ignore\">\n          <StorybookLogo />\n          <Title style={{ marginTop: 20 }}>\n            Create your first story (WORK IN PROGRESS)\n          </Title>\n          <Description>\n            Now it's your turn. <br />\n            See how easy it is to create your first story by following these\n            steps below.\n          </Description>\n          <Button style={{ marginTop: 4 }} onClick={onFinish}>\n            Go to story\n          </Button>\n        </ModalContentWrapper>\n      )}\n    </Modal>\n  );\n}\n","import React, { useCallback, useEffect, useState } from \"react\";\nimport { ThemeProvider, ensure, themes } from \"@storybook/theming\";\nimport { STORY_CHANGED, CURRENT_STORY_WAS_SET } from \"@storybook/core-events\";\nimport { type API } from \"@storybook/manager-api\";\n\nimport { GuidedTour } from \"./features/GuidedTour/GuidedTour\";\nimport { WelcomeModal } from \"./features/WelcomeModal/WelcomeModal\";\nimport { WriteStoriesModal } from \"./features/WriteStoriesModal/WriteStoriesModal\";\nimport { Confetti } from \"./components/Confetti/Confetti\";\n\ntype Step =\n  | \"1:Welcome\"\n  | \"2:StorybookTour\"\n  | \"3:WriteYourStory\"\n  | \"4:VisitNewStory\"\n  | \"5:ConfigureYourProject\";\n\nconst theme = ensure(themes.light);\n\nexport default function App({ api }: { api: API }) {\n  const [enabled, setEnabled] = useState(true);\n  const [showConfetti, setShowConfetti] = useState(false);\n  const [step, setStep] = useState<Step>(\"1:Welcome\");\n\n  const skipTour = useCallback(() => {\n    // remove onboarding query parameter from current url\n    const url = new URL(window.location.href);\n    url.searchParams.delete(\"onboarding\");\n    const path = decodeURIComponent(url.searchParams.get(\"path\"));\n    url.search = `?path=${path}`;\n    history.replaceState({}, \"\", url.href);\n    setEnabled(false);\n  }, [setEnabled]);\n\n  useEffect(() => {\n    let stepTimeout: number;\n    if (step === \"4:VisitNewStory\") {\n      stepTimeout = window.setTimeout(() => {\n        setShowConfetti(true);\n        setStep(\"5:ConfigureYourProject\");\n      }, 2000);\n    }\n\n    return () => {\n      clearTimeout(stepTimeout);\n    };\n  }, [step]);\n\n  useEffect(() => {\n    api.once(CURRENT_STORY_WAS_SET, ({ storyId }) => {\n      // make sure the initial state is set correctly:\n      // 1. Selected story is primary button\n      // 2. The addon panel is opened, in the bottom and the controls tab is selected\n      if (storyId !== \"example-button--primary\") {\n        api.selectStory(\"example-button--primary\", undefined, {\n          ref: undefined,\n        });\n      }\n      api.togglePanel(true);\n      api.togglePanelPosition(\"bottom\");\n      api.setSelectedPanel(\"addon-controls\");\n    });\n  }, []);\n\n  useEffect(() => {\n    const onStoryChanged = (storyId: string) => {\n      if (storyId === \"configure-your-project--docs\") {\n        skipTour();\n      }\n    };\n\n    api.on(STORY_CHANGED, onStoryChanged);\n\n    return () => {\n      api.off(STORY_CHANGED, onStoryChanged);\n    };\n  }, []);\n\n  if (!enabled) {\n    return null;\n  }\n\n  return (\n    <ThemeProvider theme={theme}>\n      {showConfetti && (\n        <Confetti\n          numberOfPieces={1000}\n          initialVelocityY={3}\n          recycle={false}\n          onConfettiComplete={(confetti) => {\n            confetti.reset();\n            setShowConfetti(false);\n          }}\n        />\n      )}\n      {step === \"1:Welcome\" && (\n        <WelcomeModal\n          onProceed={() => {\n            setStep(\"2:StorybookTour\");\n          }}\n          onSkip={skipTour}\n        />\n      )}\n      {(step === \"2:StorybookTour\" || step === \"5:ConfigureYourProject\") && (\n        <GuidedTour\n          api={api}\n          isFinalStep={step === \"5:ConfigureYourProject\"}\n          onFirstTourDone={() => {\n            setStep(\"3:WriteYourStory\");\n          }}\n        />\n      )}\n      {step === \"3:WriteYourStory\" && (\n        <WriteStoriesModal\n          onFinish={() => {\n            // TODO: enable this\n            // api.selectStory(\"example-button--warning\");\n            setStep(\"4:VisitNewStory\");\n          }}\n        />\n      )}\n    </ThemeProvider>\n  );\n}\n","import ReactDOM from \"react-dom\";\nimport React, { lazy, Suspense } from \"react\";\nimport { addons } from \"@storybook/manager-api\";\n\nconst App = lazy(() => import(\"./App\"));\n\n// The addon is enabled only when:\n// 1. The onboarding query parameter is present\n// 2. The example button stories are present\naddons.register(\"@storybook/addon-onboarding\", async (api) => {\n  const isOnboarding = api.getUrlState().queryParams.onboarding;\n\n  if (!isOnboarding) {\n    return;\n  }\n\n  let hasButtonStories = false;\n  try {\n    const response = await fetch(\"./index.json\");\n    const index = await response.json();\n    hasButtonStories = !!index.entries[\"example-button--primary\"];\n  } catch (e) {}\n\n  if (hasButtonStories) {\n    // Add a new DOM element to document.body, where we will bootstrap our React app\n    const domNode = document.createElement(\"div\");\n\n    domNode.id = \"addon-onboarding\";\n    // Append the new DOM element to document.body\n    document.body.appendChild(domNode);\n\n    // Render the React app\n    ReactDOM.render(\n      <Suspense fallback={<div>Loading...</div>}>\n        <App api={api} />\n      </Suspense>,\n      domNode\n    );\n  }\n});\n"]}
+{"version":3,"sources":["../src/components/PulsatingEffect/PulsatingEffect.tsx","../src/components/Confetti/Confetti.tsx","../src/components/TitleBody/TitleBody.styled.tsx","../src/components/TitleBody/TitleBody.tsx","../src/features/GuidedTour/GuidedTour.styled.tsx","../src/features/GuidedTour/GuidedTour.tsx","../src/components/Button/Button.tsx","../src/components/Modal/Modal.styled.tsx","../src/components/Modal/Modal.tsx","../src/features/WelcomeModal/StorybookLogo.tsx","../src/features/WelcomeModal/WelcomeModal.styled.tsx","../src/features/WelcomeModal/WelcomeModal.tsx","../src/features/WriteStoriesModal/WriteStoriesModal.tsx","../src/App.tsx","../src/manager.tsx"],"names":["useEffect","PulsatingEffect","targetSelector","element","keyframes","style","init_PulsatingEffect","__esmMin","ReactConfetti","React","styled","createPortal","useState","Confetti","top","left","width","height","confettiProps","confettiContainer","container","Wrapper","init_Confetti","Title","Body","init_TitleBody_styled","TitleBody","prefix","title","body","init_TitleBody","getStyles","init_GuidedTour_styled","theme","Joyride","STATUS","STORY_ARGS_UPDATED","useTheme","GuidedTour","api","isFinalStep","onFirstTourDone","stepIndex","setStepIndex","INTERACTIONS_COUNT","data","init_GuidedTour","css","Container","Button","init_Button","children","onClick","rest","Dialog","StyledOverlay","StyledContent","ContentWrapper","init_Modal_styled","contentProps","ref","Modal","onEscapeKeyDown","onInteractOutside","ev","rootProps","init_Modal","StorybookLogo","init_StorybookLogo","Icons","ModalContentWrapper","TopContent","Description","SkipButton","StyledIcon","Background","circle1Anim","Circle1","circle2Anim","Circle2","circle3Anim","Circle3","init_WelcomeModal_styled","WelcomeModal","init_WelcomeModal","onSkip","onProceed","Close","WriteStoriesModal","onFinish","init_WriteStoriesModal","App_exports","__export","App","useCallback","ThemeProvider","ensure","themes","STORY_CHANGED","CURRENT_STORY_WAS_SET","enabled","setEnabled","showConfetti","setShowConfetti","step","setStep","skipTour","url","path","stepTimeout","storyId","onStoryChanged","confetti","init_App","ReactDOM","lazy","Suspense","addons","hasButtonStories","domNode"],"mappings":"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","sourcesContent":["import { useEffect } from \"react\";\n\nexport function PulsatingEffect({\n  targetSelector,\n}: {\n  targetSelector: string;\n}): JSX.Element {\n  useEffect(() => {\n    const element = document.querySelector<HTMLElement>(targetSelector);\n    if (element) {\n      element.style.animation = \"pulsate 3s infinite\";\n      element.style.transformOrigin = \"center\";\n      element.style.animationTimingFunction = \"ease-in-out\";\n\n      const keyframes = `\n        @keyframes pulsate {\n          0% {\n            box-shadow: 0 0 0 0 rgba(2, 156, 253, 0.7), 0 0 0 0 rgba(2, 156, 253, 0.4);\n          }\n          50% {\n            box-shadow: 0 0 0 20px rgba(2, 156, 253, 0), 0 0 0 40px rgba(2, 156, 253, 0);\n          }\n          100% {\n            box-shadow: 0 0 0 0 rgba(2, 156, 253, 0), 0 0 0 0 rgba(2, 156, 253, 0);\n          }\n        }\n      `;\n      const style = document.createElement(\"style\");\n      style.id = \"sb-onboarding-pulsating-effect\";\n      style.innerHTML = keyframes;\n      document.head.appendChild(style);\n    }\n\n    return () => {\n      const styleElement = document.querySelector(\n        \"#sb-onboarding-pulsating-effect\"\n      );\n      styleElement?.remove();\n    };\n  }, [targetSelector]);\n\n  return null;\n}\n","import ReactConfetti from \"react-confetti\";\nimport React, { useEffect } from \"react\";\nimport { styled } from \"@storybook/theming\";\nimport { createPortal } from \"react-dom\";\nimport { useState } from \"react\";\n\ninterface ConfettiProps\n  extends Omit<React.ComponentProps<typeof ReactConfetti>, \"drawShape\"> {\n  top?: number;\n  left?: number;\n  width?: number;\n  height?: number;\n}\n\nconst Wrapper = styled.div<{\n  width: number;\n  height: number;\n  top: number;\n  left: number;\n}>(({ width, height, left, top }) => ({\n  width: `${width}px`,\n  height: `${height}px`,\n  left: `${left}px`,\n  top: `${top}px`,\n  position: \"relative\",\n  overflow: \"hidden\",\n}));\n\nexport function Confetti({\n  top = 0,\n  left = 0,\n  width = window.innerWidth,\n  height = window.innerHeight,\n  ...confettiProps\n}: ConfettiProps): React.ReactPortal {\n  const [confettiContainer] = useState(() => {\n    const container = document.createElement(\"div\");\n    container.setAttribute(\"id\", \"confetti-container\");\n    container.setAttribute(\n      \"style\",\n      \"position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999;\"\n    );\n\n    return container;\n  });\n\n  useEffect(() => {\n    document.body.appendChild(confettiContainer);\n\n    return () => {\n      document.body.removeChild(confettiContainer);\n    };\n  }, []);\n\n  return createPortal(\n    <Wrapper top={top} left={left} width={width} height={height}>\n      <ReactConfetti {...confettiProps} />\n    </Wrapper>,\n    confettiContainer\n  );\n}\n","import { styled } from \"@storybook/theming\";\n\nexport const Wrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n`;\n\nexport const Title = styled.strong`\n  font-size: 13px;\n`;\n\nexport const Body = styled.p`\n  font-size: 13px;\n  text-align: start;\n  color: #798186;\n  margin: 0;\n  margin-top: 4px;\n`;\n","import React from \"react\";\nimport { Body, Title, Wrapper } from \"./TitleBody.styled\";\n\nexport function TitleBody({\n  prefix,\n  title,\n  body,\n}: {\n  prefix?: React.ReactNode;\n  title: React.ReactNode;\n  body: React.ReactNode;\n}) {\n  return (\n    <Wrapper>\n      {prefix}\n      <Title>{title}</Title>\n      <Body>{body}</Body>\n    </Wrapper>\n  );\n}\n","import { type Theme } from \"@storybook/theming\";\n\nexport const getStyles = (theme: Theme) => ({\n  border: 0,\n  borderRadius: \"0.25rem\",\n  cursor: \"pointer\",\n  display: \"inline-flex\",\n  alignItems: \"center\",\n  justifyContent: \"center\",\n  padding: \"0 0.75rem\",\n  background: theme.color.secondary,\n  color: \"#FFF\",\n  height: 32,\n  fontSize: \"0.8125rem\",\n  fontWeight: 700,\n  fontFamily: theme.typography.fonts.base,\n  transition: \"all 0.16s ease-in-out\",\n  textDecoration: \"none\",\n  outline: \"none\",\n});\n","import React, { useEffect, useState } from \"react\";\nimport Joyride, { CallBackProps, STATUS, Step } from \"react-joyride\";\n\nimport { PulsatingEffect } from \"../../components/PulsatingEffect/PulsatingEffect\";\nimport { Confetti } from \"../../components/Confetti/Confetti\";\nimport { TitleBody } from \"../../components/TitleBody/TitleBody\";\nimport { API } from \"@storybook/manager-api\";\nimport { STORY_ARGS_UPDATED } from \"@storybook/core-events\";\nimport { useTheme } from \"@storybook/theming\";\nimport { getStyles } from \"./GuidedTour.styled\";\nimport { Tooltip } from \"./Tooltip\";\n\nlet INTERACTIONS_COUNT = 0;\n\nexport function GuidedTour({\n  api,\n  isFinalStep,\n  onFirstTourDone,\n}: {\n  api: API;\n  isFinalStep?: boolean;\n  onFirstTourDone: () => void;\n}) {\n  const [stepIndex, setStepIndex] = useState<number>();\n  const theme = useTheme();\n\n  useEffect(() => {\n    api.on(STORY_ARGS_UPDATED, () => {\n      INTERACTIONS_COUNT = INTERACTIONS_COUNT + 1;\n      if (INTERACTIONS_COUNT === 2) {\n        setStepIndex(3);\n      }\n    });\n  }, []);\n\n  const steps: Step[] = isFinalStep\n    ? [\n        {\n          target: \"#configure-your-project--docs\",\n          content: (\n            <TitleBody\n              title=\"Continue setting up your project\"\n              body=\"You nailed the basics. Now get started writing stories for your own components.\"\n            />\n          ),\n          placement: \"right\",\n          disableOverlay: true,\n          disableBeacon: true,\n          styles: {\n            buttonNext: {\n              display: \"none\",\n            },\n          },\n          floaterProps: {\n            disableAnimation: true,\n          },\n        },\n      ]\n    : [\n        {\n          target: \"#storybook-explorer-tree > div\",\n          content: (\n            <TitleBody\n              title=\"Storybook is built from stories\"\n              body=\"Storybook uses stories to represent the key states supported by each of your components. For example: this Button component has four stories.\"\n            />\n          ),\n          placement: \"right\",\n          disableBeacon: true,\n          styles: {\n            spotlight: {\n              transform: \"translateY(30px)\",\n            },\n          },\n          floaterProps: {\n            disableAnimation: true,\n          },\n        },\n        {\n          target: \"#storybook-preview-iframe\",\n          content: (\n            <TitleBody\n              title=\"Storybook previews are interactive\"\n              body=\"Whenever you modify code or stories, Storybook automatically updates how it previews your components.\"\n            />\n          ),\n          placement: \"bottom\",\n        },\n        {\n          target: \"#root div[role=main]\",\n          content: (\n            <>\n              <TitleBody\n                title=\"Interactive story playground\"\n                body={\n                  <>\n                    See how a story renders with different data and state\n                    without touching code.\n                    <br />\n                    Try it out by pressing this button.\n                  </>\n                }\n              />\n              <PulsatingEffect targetSelector=\"#control-primary\" />\n            </>\n          ),\n          placement: \"right\",\n          spotlightClicks: true,\n          floaterProps: {\n            target: \"#control-primary\",\n          },\n          styles: {\n            buttonNext: {\n              display: \"none\",\n            },\n          },\n        },\n        {\n          target: \"#control-primary\",\n          content: (\n            <>\n              <Confetti numberOfPieces={100} />\n              <TitleBody\n                title=\"Congratulations!\"\n                body=\"You've learned how to control your stories interactively. Now: let's explore how to write your first story.\"\n              />\n            </>\n          ),\n          placement: \"right\",\n          disableOverlay: true,\n          locale: {\n            last: \"Next\",\n          },\n        },\n      ];\n\n  return (\n    <Joyride\n      steps={steps}\n      continuous\n      stepIndex={stepIndex}\n      spotlightPadding={0}\n      hideBackButton\n      disableCloseOnEsc\n      disableOverlayClose\n      disableScrolling\n      hideCloseButton\n      callback={(data: CallBackProps) => {\n        if (!isFinalStep && data.status === STATUS.FINISHED) {\n          onFirstTourDone();\n        }\n      }}\n      floaterProps={{\n        styles: {\n          floater: {\n            padding: 0,\n            paddingLeft: 8,\n            paddingTop: 8,\n            filter:\n              \"drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1))\",\n          },\n        },\n      }}\n      // tooltipComponent={Tooltip}\n      styles={{\n        spotlight: {\n          border: \"solid 2px #004c7c\",\n        },\n        tooltip: {\n          maxWidth: 260,\n          borderRadius: 4,\n          padding: 15,\n        },\n        overlay: {\n          backgroundColor: \"rgba(0, 0, 0, 0.48)\",\n        },\n        buttonNext: {\n          ...getStyles(theme),\n          marginTop: 5,\n        },\n        tooltipContent: {\n          paddingTop: 4,\n          padding: 0,\n        },\n        options: {\n          zIndex: 10000,\n          primaryColor: \"#029CFD\",\n        },\n      }}\n    />\n  );\n}\n","import { css, styled } from \"@storybook/theming\";\nimport React, { FC } from \"react\";\n\nexport interface ButtonProps {\n  children: string;\n  onClick?: () => void;\n}\n\nconst Container = styled.button`\n  all: unset;\n  border: 0;\n  border-radius: 0.25rem;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 0.75rem;\n  background: ${({ theme }) => theme.color.secondary};\n  color: ${({ theme }) => theme.color.lightest};\n  height: 32px;\n  font-size: 0.8125rem;\n  font-weight: 700;\n  font-family: ${({ theme }) => theme.typography.fonts.base};\n  transition: all 0.16s ease-in-out;\n  text-decoration: none;\n\n  &:hover {\n    background-color: #0b94eb;\n  }\n\n  &:focus {\n    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.1);\n  }\n`;\n\nexport const getStyles = (theme: any) => css`\n  all: unset;\n  border: 0;\n  border-radius: 0.25rem;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 0.75rem;\n  /* background: ${theme.color.secondary}; */\n  background: red;\n  color: ${theme.color.lightest};\n  height: 32px;\n  font-size: 0.8125rem;\n  font-weight: 700;\n  font-family: ${theme.typography.fonts.base};\n  transition: all 0.16s ease-in-out;\n  text-decoration: none;\n\n  &:hover {\n    background-color: #0b94eb;\n  }\n\n  &:focus {\n    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.1);\n  }\n`;\n\nexport const Button: FC<ButtonProps> = ({ children, onClick, ...rest }) => {\n  return (\n    <Container onClick={onClick} {...rest}>\n      {children}\n    </Container>\n  );\n};\n","import { css, styled } from \"@storybook/theming\";\nimport * as Dialog from \"@radix-ui/react-dialog\";\nimport React from \"react\";\n\nexport const StyledOverlay = styled(Dialog.Overlay)`\n  background-color: rgba(27, 28, 29, 0.48);\n  position: fixed;\n  inset: 0px;\n  width: 100%;\n  height: 100%;\n`;\n\nexport const StyledContent = styled.div<{ width: number; height: number }>(\n  ({ width, height }) => css`\n    background-color: white;\n    border-radius: 6px;\n    box-shadow: rgba(14, 18, 22, 0.35) 0px 10px 38px -10px;\n    position: fixed;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    width: ${width ?? 740}px;\n    height: ${height ? `${height}px` : \"auto\"};\n    max-width: calc(100% - 40px);\n    max-height: 85vh;\n  `\n);\n\nexport const ContentWrapper = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof StyledContent> &\n    React.ComponentProps<typeof Dialog.Content>\n>(({ width, height, children, ...contentProps }, ref) => (\n  <Dialog.Content ref={ref} asChild {...contentProps}>\n    <StyledContent width={width} height={height}>\n      {children}\n    </StyledContent>\n  </Dialog.Content>\n));\n","import React from \"react\";\nimport * as Dialog from \"@radix-ui/react-dialog\";\nimport { ContentWrapper, StyledOverlay } from \"./Modal.styled\";\n\ntype ContentProps = React.ComponentProps<typeof ContentWrapper>;\n\ninterface ModalProps\n  extends Omit<React.ComponentProps<typeof Dialog.Root>, \"children\"> {\n  width?: number;\n  height?: number;\n  children: (props: {\n    Title: typeof Dialog.Title;\n    Description: typeof Dialog.Description;\n    Close: typeof Dialog.Close;\n  }) => React.ReactNode;\n  onEscapeKeyDown?: ContentProps[\"onEscapeKeyDown\"];\n  onInteractOutside?: ContentProps[\"onInteractOutside\"];\n}\n\nexport function Modal({\n  children,\n  width,\n  height,\n  onEscapeKeyDown,\n  onInteractOutside = (ev) => ev.preventDefault(),\n  ...rootProps\n}: ModalProps) {\n  return (\n    <Dialog.Root {...rootProps}>\n      <Dialog.Portal>\n        <StyledOverlay />\n        <ContentWrapper\n          width={width}\n          height={height}\n          onInteractOutside={onInteractOutside}\n          onEscapeKeyDown={onEscapeKeyDown}\n        >\n          {children({\n            Title: Dialog.Title,\n            Description: Dialog.Description,\n            Close: Dialog.Close,\n          })}\n        </ContentWrapper>\n      </Dialog.Portal>\n    </Dialog.Root>\n  );\n}\n","import React from \"react\";\n\nexport function StorybookLogo() {\n  return (\n    <svg\n      width=\"32px\"\n      height=\"40px\"\n      viewBox=\"0 0 256 319\"\n      preserveAspectRatio=\"xMidYMid\"\n    >\n      <defs>\n        <path\n          d=\"M9.87245893,293.324145 L0.0114611411,30.5732167 C-0.314208957,21.8955842 6.33948896,14.5413918 15.0063196,13.9997149 L238.494389,0.0317105427 C247.316188,-0.519651867 254.914637,6.18486163 255.466,15.0066607 C255.486773,15.339032 255.497167,15.6719708 255.497167,16.0049907 L255.497167,302.318596 C255.497167,311.157608 248.331732,318.323043 239.492719,318.323043 C239.253266,318.323043 239.013844,318.317669 238.774632,318.306926 L25.1475605,308.712253 C16.8276309,308.338578 10.1847994,301.646603 9.87245893,293.324145 L9.87245893,293.324145 Z\"\n          id=\"path-1\"\n        ></path>\n      </defs>\n      <g>\n        <mask id=\"mask-2\" fill=\"white\">\n          <use xlinkHref=\"#path-1\"></use>\n        </mask>\n        <use fill=\"#FF4785\" fillRule=\"nonzero\" xlinkHref=\"#path-1\"></use>\n        <path\n          d=\"M188.665358,39.126973 L190.191903,2.41148534 L220.883535,0 L222.205755,37.8634126 C222.251771,39.1811466 221.22084,40.2866846 219.903106,40.3327009 C219.338869,40.3524045 218.785907,40.1715096 218.342409,39.8221376 L206.506729,30.4984116 L192.493574,41.1282444 C191.443077,41.9251106 189.945493,41.7195021 189.148627,40.6690048 C188.813185,40.2267976 188.6423,39.6815326 188.665358,39.126973 Z M149.413703,119.980309 C149.413703,126.206975 191.355678,123.222696 196.986019,118.848893 C196.986019,76.4467826 174.234041,54.1651411 132.57133,54.1651411 C90.9086182,54.1651411 67.5656805,76.7934542 67.5656805,110.735941 C67.5656805,169.85244 147.345341,170.983856 147.345341,203.229219 C147.345341,212.280549 142.913138,217.654777 133.162291,217.654777 C120.456641,217.654777 115.433477,211.165914 116.024438,189.103298 C116.024438,184.317101 67.5656805,182.824962 66.0882793,189.103298 C62.3262146,242.56887 95.6363019,257.990394 133.753251,257.990394 C170.688279,257.990394 199.645341,238.303123 199.645341,202.663511 C199.645341,139.304202 118.683759,141.001326 118.683759,109.604526 C118.683759,96.8760922 128.139127,95.178968 133.753251,95.178968 C139.662855,95.178968 150.300143,96.2205679 149.413703,119.980309 Z\"\n          fill=\"#FFFFFF\"\n          fillRule=\"nonzero\"\n          mask=\"url(#mask-2)\"\n        ></path>\n      </g>\n    </svg>\n  );\n}\n","import { Icons } from \"@storybook/components\";\nimport { keyframes, styled } from \"@storybook/theming\";\n\nexport const ModalContentWrapper = styled.div`\n  border-radius: 5px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  height: 100%;\n  justify-content: space-between;\n`;\n\nexport const TopContent = styled.div`\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n`;\n\nexport const Title = styled.h1`\n  margin: 0;\n  margin-top: 20px;\n  margin-bottom: 5px;\n  color: ${({ theme }) => theme.color.darkest};\n  font-weight: ${({ theme }) => theme.typography.weight.bold};\n  font-size: ${({ theme }) => theme.typography.size.m1}px;\n  line-height: ${({ theme }) => theme.typography.size.m3}px;\n`;\n\nexport const Description = styled.p`\n  margin: 0;\n  margin-bottom: 20px;\n  max-width: 320px;\n  text-align: center;\n  font-size: ${({ theme }) => theme.typography.size.s2}px;\n  font-weight: ${({ theme }) => theme.typography.weight.regular};\n  line-height: ${({ theme }) => theme.typography.size.m1}px;\n  color: ${({ theme }) => theme.color.darker};\n`;\n\nexport const SkipButton = styled.button`\n  all: unset;\n  cursor: pointer;\n  font-size: 13px;\n  color: #798186;\n  padding-bottom: 20px;\n\n  &:focus-visible {\n    outline: auto;\n  }\n`;\n\nexport const StyledIcon = styled(Icons)`\n  margin-left: 2px;\n  height: 10px;\n`;\n\nexport const Background = styled.div`\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: -1;\n  overflow: hidden;\n`;\n\nexport const circle1Anim = keyframes`\n  0% { transform: translate(0px, 0px) }\n  50% { transform: translate(-200px, 0px) }\n  100% { transform: translate(0px, 0px) }\n`;\n\nexport const Circle1 = styled.div`\n  position: absolute;\n  width: 1200px;\n  height: 1200px;\n  left: -200px;\n  top: -900px;\n  background: radial-gradient(\n    circle at center,\n    rgba(253, 255, 147, 1) 0%,\n    rgba(253, 255, 147, 0) 70%\n  );\n  animation: ${circle1Anim} 4s linear infinite;\n  animation-timing-function: ease-in-out;\n  z-index: 3;\n`;\n\nexport const circle2Anim = keyframes`\n  0% { transform: translate(0px, 0px) }\n  50% { transform: translate(400px, 0px) }\n  100% { transform: translate(0px, 0px) }\n`;\n\nexport const Circle2 = styled.div`\n  position: absolute;\n  width: 1200px;\n  height: 1200px;\n  left: -600px;\n  top: -840px;\n  background: radial-gradient(\n    circle at center,\n    rgba(255, 119, 119, 1) 0%,\n    rgba(255, 119, 119, 0) 70%\n  );\n  animation: ${circle2Anim} 6s linear infinite;\n  animation-timing-function: ease-in-out;\n  z-index: 2;\n`;\n\nexport const circle3Anim = keyframes`\n  0% { transform: translate(600px, -40px) }\n  50% { transform: translate(600px, -200px) }\n  100% { transform: translate(600px, -40px) }\n`;\n\nexport const Circle3 = styled.div`\n  position: absolute;\n  width: 1200px;\n  height: 1200px;\n  left: -600px;\n  top: -840px;\n  background: radial-gradient(\n    circle at center,\n    rgba(119, 255, 247, 0.8) 0%,\n    rgba(119, 255, 247, 0) 70%\n  );\n  animation: ${circle3Anim} 4s linear infinite;\n  animation-timing-function: ease-in-out;\n  z-index: 4;\n`;\n","import React from \"react\";\n\nimport { Button } from \"../../components/Button/Button\";\nimport { Modal } from \"../../components/Modal/Modal\";\nimport { StorybookLogo } from \"./StorybookLogo\";\nimport {\n  ModalContentWrapper,\n  SkipButton,\n  StyledIcon,\n  Title,\n  Description,\n  Background,\n  Circle1,\n  Circle2,\n  Circle3,\n  TopContent,\n} from \"./WelcomeModal.styled\";\n\nexport const WelcomeModal = ({\n  onSkip,\n  onProceed,\n}: {\n  onSkip: () => void;\n  onProceed: () => void;\n}) => {\n  return (\n    <Modal width={540} height={430} defaultOpen>\n      {({ Close }) => (\n        <ModalContentWrapper data-chromatic=\"ignore\">\n          <TopContent>\n            <StorybookLogo />\n            <Title>Welcome to Storybook</Title>\n            <Description>\n              Storybook helps you develop UI components. Learn the basics in a\n              few simple steps.\n            </Description>\n            <Button style={{ marginTop: 4 }} onClick={onProceed}>\n              Start your 3 minute tour\n            </Button>\n          </TopContent>\n          <Close asChild>\n            <SkipButton onClick={onSkip}>\n              Skip tour\n              <StyledIcon icon=\"arrowright\" />\n            </SkipButton>\n          </Close>\n          <Background>\n            <Circle1 />\n            <Circle2 />\n            <Circle3 />\n          </Background>\n        </ModalContentWrapper>\n      )}\n    </Modal>\n  );\n};\n","import React from \"react\";\nimport { Button } from \"../../components/Button/Button\";\n\nimport { Modal } from \"../../components/Modal/Modal\";\nimport { StorybookLogo } from \"../WelcomeModal/StorybookLogo\";\nimport { ModalContentWrapper } from \"../WelcomeModal/WelcomeModal.styled\";\n\nexport function WriteStoriesModal({ onFinish }: { onFinish: () => void }) {\n  return (\n    <Modal width={540} defaultOpen>\n      {({ Title, Description }) => (\n        <ModalContentWrapper data-chromatic=\"ignore\">\n          <StorybookLogo />\n          <Title style={{ marginTop: 20 }}>\n            Create your first story (WORK IN PROGRESS)\n          </Title>\n          <Description>\n            Now it's your turn. <br />\n            See how easy it is to create your first story by following these\n            steps below.\n          </Description>\n          <Button style={{ marginTop: 4 }} onClick={onFinish}>\n            Go to story\n          </Button>\n        </ModalContentWrapper>\n      )}\n    </Modal>\n  );\n}\n","import React, { useCallback, useEffect, useState } from \"react\";\nimport { ThemeProvider, ensure, themes } from \"@storybook/theming\";\nimport { STORY_CHANGED, CURRENT_STORY_WAS_SET } from \"@storybook/core-events\";\nimport { type API } from \"@storybook/manager-api\";\n\nimport { GuidedTour } from \"./features/GuidedTour/GuidedTour\";\nimport { WelcomeModal } from \"./features/WelcomeModal/WelcomeModal\";\nimport { WriteStoriesModal } from \"./features/WriteStoriesModal/WriteStoriesModal\";\nimport { Confetti } from \"./components/Confetti/Confetti\";\n\ntype Step =\n  | \"1:Welcome\"\n  | \"2:StorybookTour\"\n  | \"3:WriteYourStory\"\n  | \"4:VisitNewStory\"\n  | \"5:ConfigureYourProject\";\n\nconst theme = ensure(themes.light);\n\nexport default function App({ api }: { api: API }) {\n  const [enabled, setEnabled] = useState(true);\n  const [showConfetti, setShowConfetti] = useState(false);\n  const [step, setStep] = useState<Step>(\"1:Welcome\");\n\n  const skipTour = useCallback(() => {\n    // remove onboarding query parameter from current url\n    const url = new URL(window.location.href);\n    url.searchParams.delete(\"onboarding\");\n    const path = decodeURIComponent(url.searchParams.get(\"path\"));\n    url.search = `?path=${path}`;\n    history.replaceState({}, \"\", url.href);\n    setEnabled(false);\n  }, [setEnabled]);\n\n  useEffect(() => {\n    let stepTimeout: number;\n    if (step === \"4:VisitNewStory\") {\n      stepTimeout = window.setTimeout(() => {\n        setShowConfetti(true);\n        setStep(\"5:ConfigureYourProject\");\n      }, 2000);\n    }\n\n    return () => {\n      clearTimeout(stepTimeout);\n    };\n  }, [step]);\n\n  useEffect(() => {\n    api.once(CURRENT_STORY_WAS_SET, ({ storyId }) => {\n      // make sure the initial state is set correctly:\n      // 1. Selected story is primary button\n      // 2. The addon panel is opened, in the bottom and the controls tab is selected\n      if (storyId !== \"example-button--primary\") {\n        api.selectStory(\"example-button--primary\", undefined, {\n          ref: undefined,\n        });\n      }\n      api.togglePanel(true);\n      api.togglePanelPosition(\"bottom\");\n      api.setSelectedPanel(\"addon-controls\");\n    });\n  }, []);\n\n  useEffect(() => {\n    const onStoryChanged = (storyId: string) => {\n      if (storyId === \"configure-your-project--docs\") {\n        skipTour();\n      }\n    };\n\n    api.on(STORY_CHANGED, onStoryChanged);\n\n    return () => {\n      api.off(STORY_CHANGED, onStoryChanged);\n    };\n  }, []);\n\n  if (!enabled) {\n    return null;\n  }\n\n  return (\n    <ThemeProvider theme={theme}>\n      {showConfetti && (\n        <Confetti\n          numberOfPieces={1000}\n          initialVelocityY={3}\n          recycle={false}\n          onConfettiComplete={(confetti) => {\n            confetti.reset();\n            setShowConfetti(false);\n          }}\n        />\n      )}\n      {step === \"1:Welcome\" && (\n        <WelcomeModal\n          onProceed={() => {\n            setStep(\"2:StorybookTour\");\n          }}\n          onSkip={skipTour}\n        />\n      )}\n      {(step === \"2:StorybookTour\" || step === \"5:ConfigureYourProject\") && (\n        <GuidedTour\n          api={api}\n          isFinalStep={step === \"5:ConfigureYourProject\"}\n          onFirstTourDone={() => {\n            setStep(\"3:WriteYourStory\");\n          }}\n        />\n      )}\n      {step === \"3:WriteYourStory\" && (\n        <WriteStoriesModal\n          onFinish={() => {\n            // TODO: enable this\n            // api.selectStory(\"example-button--warning\");\n            setStep(\"4:VisitNewStory\");\n          }}\n        />\n      )}\n    </ThemeProvider>\n  );\n}\n","import ReactDOM from \"react-dom\";\nimport React, { lazy, Suspense } from \"react\";\nimport { addons } from \"@storybook/manager-api\";\n\nconst App = lazy(() => import(\"./App\"));\n\n// The addon is enabled only when:\n// 1. The onboarding query parameter is present\n// 2. The example button stories are present\naddons.register(\"@storybook/addon-onboarding\", async (api) => {\n  const isOnboarding = api.getUrlState().path === '/onboarding';\n\n  if (!isOnboarding) {\n    return;\n  }\n\n  let hasButtonStories = false;\n  try {\n    const response = await fetch(\"./index.json\");\n    const index = await response.json();\n    hasButtonStories = !!index.entries[\"example-button--primary\"];\n  } catch (e) {}\n\n  if (hasButtonStories) {\n    // Add a new DOM element to document.body, where we will bootstrap our React app\n    const domNode = document.createElement(\"div\");\n\n    domNode.id = \"addon-onboarding\";\n    // Append the new DOM element to document.body\n    document.body.appendChild(domNode);\n\n    // Render the React app\n    ReactDOM.render(\n      <Suspense fallback={<div>Loading...</div>}>\n        <App api={api} />\n      </Suspense>,\n      domNode\n    );\n  }\n});\n"]}

package/dist/manager.mjs

@@ -1,14 +1,14 @@
-import n, { lazy, Suspense, useState, useCallback, useEffect } from 'react';
-import Ct from 'react-confetti';
-import { ThemeProvider, ensure, themes, styled, keyframes, css } from '@storybook/theming';
-import _t, { createPortal } from 'react-dom';
-import Ot, { STATUS } from 'react-joyride';
+import i, { lazy, Suspense, useState, useCallback, useEffect } from 'react';
+import wt from 'react-confetti';
+import { ThemeProvider, useTheme, ensure, themes, styled, keyframes, css } from '@storybook/theming';
+import Zt, { createPortal } from 'react-dom';
+import Bt, { STATUS } from 'react-joyride';
 import { CURRENT_STORY_WAS_SET, STORY_CHANGED, STORY_ARGS_UPDATED } from '@storybook/core-events';
 import * as m from '@radix-ui/react-dialog';
 import { Icons } from '@storybook/components';
 import { addons } from '@storybook/manager-api';
 
-var ht=Object.defineProperty;var a=(t,o)=>()=>(t&&(o=t(t=0)),o);var xt=(t,o)=>{for(var e in o)ht(t,e,{get:o[e],enumerable:!0});};function Y({targetSelector:t}){return useEffect(()=>{let o=document.querySelector(t);if(o){o.style.animation="pulsate 3s infinite",o.style.transformOrigin="center",o.style.animationTimingFunction="ease-in-out";let e=`
+var xt=Object.defineProperty;var a=(t,o)=>()=>(t&&(o=t(t=0)),o);var bt=(t,o)=>{for(var e in o)xt(t,e,{get:o[e],enumerable:!0});};function L({targetSelector:t}){return useEffect(()=>{let o=document.querySelector(t);if(o){o.style.animation="pulsate 3s infinite",o.style.transformOrigin="center",o.style.animationTimingFunction="ease-in-out";let e=`
         @keyframes pulsate {
           0% {
             box-shadow: 0 0 0 0 rgba(2, 156, 253, 0.7), 0 0 0 0 rgba(2, 156, 253, 0.4);
@@ -20,25 +20,50 @@ var ht=Object.defineProperty;var a=(t,o)=>()=>(t&&(o=t(t=0)),o);var xt=(t,o)=>{f
             box-shadow: 0 0 0 0 rgba(2, 156, 253, 0), 0 0 0 0 rgba(2, 156, 253, 0);
           }
         }
-      `,r=document.createElement("style");r.id="sb-onboarding-pulsating-effect",r.innerHTML=e,document.head.appendChild(r);}return ()=>{document.querySelector("#sb-onboarding-pulsating-effect")?.remove();}},[t]),null}var j=a(()=>{});function h({top:t=0,left:o=0,width:e=window.innerWidth,height:r=window.innerHeight,...d}){let[i]=useState(()=>{let l=document.createElement("div");return l.setAttribute("id","confetti-container"),l.setAttribute("style","position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999;"),l});return useEffect(()=>(document.body.appendChild(i),()=>{document.body.removeChild(i);}),[]),createPortal(n.createElement(Tt,{top:t,left:o,width:e,height:r},n.createElement(Ct,{...d})),i)}var Tt,P=a(()=>{Tt=styled.div(({width:t,height:o,left:e,top:r})=>({width:`${t}px`,height:`${o}px`,left:`${e}px`,top:`${r}px`,position:"relative",overflow:"hidden"}));});var U,_,G,K=a(()=>{U=styled.div`
+      `,r=document.createElement("style");r.id="sb-onboarding-pulsating-effect",r.innerHTML=e,document.head.appendChild(r);}return ()=>{document.querySelector("#sb-onboarding-pulsating-effect")?.remove();}},[t]),null}var Y=a(()=>{});function x({top:t=0,left:o=0,width:e=window.innerWidth,height:r=window.innerHeight,...l}){let[n]=useState(()=>{let d=document.createElement("div");return d.setAttribute("id","confetti-container"),d.setAttribute("style","position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999;"),d});return useEffect(()=>(document.body.appendChild(n),()=>{document.body.removeChild(n);}),[]),createPortal(i.createElement(Pt,{top:t,left:o,width:e,height:r},i.createElement(wt,{...l})),n)}var Pt,P=a(()=>{Pt=styled.div(({width:t,height:o,left:e,top:r})=>({width:`${t}px`,height:`${o}px`,left:`${e}px`,top:`${r}px`,position:"relative",overflow:"hidden"}));});var H,U,_,G=a(()=>{H=styled.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-`,_=styled.strong`
+`,U=styled.strong`
   font-size: 13px;
-`,G=styled.p`
+`,_=styled.p`
   font-size: 13px;
   text-align: start;
   color: #798186;
   margin: 0;
   margin-top: 4px;
-`;});function g({prefix:t,title:o,body:e}){return n.createElement(U,null,t,n.createElement(_,null,o),n.createElement(G,null,e))}var V=a(()=>{K();});function x(t){let o={...O,...t.style||{}};return n.createElement("button",{type:"button",...t,style:o})}var O,b=a(()=>{O={border:0,cursor:"pointer",fontSize:13,lineHeight:1,padding:"9px 12px",backgroundColor:"#029CFD",borderRadius:4,color:"#fff",fontWeight:700};});function q({api:t,isFinalStep:o,onFirstTourDone:e}){let[r,d]=useState();return useEffect(()=>{t.on(STORY_ARGS_UPDATED,()=>{B=B+1,B===2&&d(3);});},[]),n.createElement(Ot,{steps:o?[{target:"#configure-your-project--docs",content:n.createElement(g,{title:"Continue setting up your project",body:"You nailed the basics. Now get started writing stories for your own components."}),placement:"right",disableOverlay:!0,disableBeacon:!0,styles:{buttonNext:{display:"none"}},floaterProps:{disableAnimation:!0}}]:[{target:"#storybook-explorer-tree > div",content:n.createElement(g,{title:"Storybook is built from stories",body:"Storybook uses stories to represent the key states supported by each of your components. For example: this Button component has four stories."}),placement:"right",disableBeacon:!0,styles:{spotlight:{transform:"translateY(30px)"}},floaterProps:{disableAnimation:!0}},{target:"#storybook-preview-iframe",content:n.createElement(g,{title:"Storybook previews are interactive",body:"Whenever you modify code or stories, Storybook automatically updates how it previews your components."}),placement:"bottom"},{target:"#root div[role=main]",content:n.createElement(n.Fragment,null,n.createElement(g,{title:"Interactive story playground",body:n.createElement(n.Fragment,null,"See how a story renders with different data and state without touching code.",n.createElement("br",null),"Try it out by pressing this button.")}),n.createElement(Y,{targetSelector:"#control-primary"})),placement:"right",spotlightClicks:!0,floaterProps:{target:"#control-primary"},styles:{buttonNext:{display:"none"}}},{target:"#control-primary",content:n.createElement(n.Fragment,null,n.createElement(h,{numberOfPieces:100}),n.createElement(g,{title:"Congratulations!",body:"You've learned how to control your stories interactively. Now: let's explore how to write your first story."})),placement:"right",disableOverlay:!0,locale:{last:"Next"}}],continuous:!0,stepIndex:r,spotlightPadding:0,hideBackButton:!0,disableCloseOnEsc:!0,disableOverlayClose:!0,disableScrolling:!0,hideCloseButton:!0,callback:l=>{!o&&l.status===STATUS.FINISHED&&e();},floaterProps:{styles:{floater:{padding:0,paddingLeft:8,paddingTop:8,filter:"drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1))"}}},styles:{spotlight:{border:"solid 2px #004c7c"},tooltip:{maxWidth:260,borderRadius:4,padding:15},overlay:{backgroundColor:"rgba(0, 0, 0, 0.48)"},buttonNext:{...O,marginTop:5},tooltipContent:{paddingTop:4,padding:0},options:{zIndex:1e4,primaryColor:"#029CFD"}}})}var B,Z=a(()=>{j();P();V();b();B=0;});var X,It,Q,R=a(()=>{X=styled(m.Overlay)`
+`;});function g({prefix:t,title:o,body:e}){return i.createElement(H,null,t,i.createElement(U,null,o),i.createElement(_,null,e))}var K=a(()=>{G();});var V,Z=a(()=>{V=t=>({border:0,borderRadius:"0.25rem",cursor:"pointer",display:"inline-flex",alignItems:"center",justifyContent:"center",padding:"0 0.75rem",background:t.color.secondary,color:"#FFF",height:32,fontSize:"0.8125rem",fontWeight:700,fontFamily:t.typography.fonts.base,transition:"all 0.16s ease-in-out",textDecoration:"none",outline:"none"});});function q({api:t,isFinalStep:o,onFirstTourDone:e}){let[r,l]=useState(),n=useTheme();return useEffect(()=>{t.on(STORY_ARGS_UPDATED,()=>{B=B+1,B===2&&l(3);});},[]),i.createElement(Bt,{steps:o?[{target:"#configure-your-project--docs",content:i.createElement(g,{title:"Continue setting up your project",body:"You nailed the basics. Now get started writing stories for your own components."}),placement:"right",disableOverlay:!0,disableBeacon:!0,styles:{buttonNext:{display:"none"}},floaterProps:{disableAnimation:!0}}]:[{target:"#storybook-explorer-tree > div",content:i.createElement(g,{title:"Storybook is built from stories",body:"Storybook uses stories to represent the key states supported by each of your components. For example: this Button component has four stories."}),placement:"right",disableBeacon:!0,styles:{spotlight:{transform:"translateY(30px)"}},floaterProps:{disableAnimation:!0}},{target:"#storybook-preview-iframe",content:i.createElement(g,{title:"Storybook previews are interactive",body:"Whenever you modify code or stories, Storybook automatically updates how it previews your components."}),placement:"bottom"},{target:"#root div[role=main]",content:i.createElement(i.Fragment,null,i.createElement(g,{title:"Interactive story playground",body:i.createElement(i.Fragment,null,"See how a story renders with different data and state without touching code.",i.createElement("br",null),"Try it out by pressing this button.")}),i.createElement(L,{targetSelector:"#control-primary"})),placement:"right",spotlightClicks:!0,floaterProps:{target:"#control-primary"},styles:{buttonNext:{display:"none"}}},{target:"#control-primary",content:i.createElement(i.Fragment,null,i.createElement(x,{numberOfPieces:100}),i.createElement(g,{title:"Congratulations!",body:"You've learned how to control your stories interactively. Now: let's explore how to write your first story."})),placement:"right",disableOverlay:!0,locale:{last:"Next"}}],continuous:!0,stepIndex:r,spotlightPadding:0,hideBackButton:!0,disableCloseOnEsc:!0,disableOverlayClose:!0,disableScrolling:!0,hideCloseButton:!0,callback:y=>{!o&&y.status===STATUS.FINISHED&&e();},floaterProps:{styles:{floater:{padding:0,paddingLeft:8,paddingTop:8,filter:"drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1))"}}},styles:{spotlight:{border:"solid 2px #004c7c"},tooltip:{maxWidth:260,borderRadius:4,padding:15},overlay:{backgroundColor:"rgba(0, 0, 0, 0.48)"},buttonNext:{...V(n),marginTop:5},tooltipContent:{paddingTop:4,padding:0},options:{zIndex:1e4,primaryColor:"#029CFD"}}})}var B,J=a(()=>{Y();P();K();Z();B=0;});var It,b,O=a(()=>{It=styled.button`
+  all: unset;
+  border: 0;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 0.75rem;
+  background: ${({theme:t})=>t.color.secondary};
+  color: ${({theme:t})=>t.color.lightest};
+  height: 32px;
+  font-size: 0.8125rem;
+  font-weight: 700;
+  font-family: ${({theme:t})=>t.typography.fonts.base};
+  transition: all 0.16s ease-in-out;
+  text-decoration: none;
+
+  &:hover {
+    background-color: #0b94eb;
+  }
+
+  &:focus {
+    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.1);
+  }
+`,b=({children:t,onClick:o,...e})=>i.createElement(It,{onClick:o,...e},t);});var Q,zt,R,tt=a(()=>{Q=styled(m.Overlay)`
   background-color: rgba(27, 28, 29, 0.48);
   position: fixed;
   inset: 0px;
   width: 100%;
   height: 100%;
-`,It=styled.div(({width:t,height:o})=>css`
+`,zt=styled.div(({width:t,height:o})=>css`
     background-color: white;
     border-radius: 6px;
     box-shadow: rgba(14, 18, 22, 0.35) 0px 10px 38px -10px;
@@ -50,20 +75,20 @@ var ht=Object.defineProperty;var a=(t,o)=>()=>(t&&(o=t(t=0)),o);var xt=(t,o)=>{f
     height: ${o?`${o}px`:"auto"};
     max-width: calc(100% - 40px);
     max-height: 85vh;
-  `),Q=n.forwardRef(({width:t,height:o,children:e,...r},d)=>n.createElement(m.Content,{ref:d,asChild:!0,...r},n.createElement(It,{width:t,height:o},e)));});function S({children:t,width:o,height:e,onEscapeKeyDown:r,onInteractOutside:d=l=>l.preventDefault(),...i}){return n.createElement(m.Root,{...i},n.createElement(m.Portal,null,n.createElement(X,null),n.createElement(Q,{width:o,height:e,onInteractOutside:d,onEscapeKeyDown:r},t({Title:m.Title,Description:m.Description,Close:m.Close}))))}var M=a(()=>{R();});function k(){return n.createElement("svg",{width:"32px",height:"40px",viewBox:"0 0 256 319",preserveAspectRatio:"xMidYMid"},n.createElement("defs",null,n.createElement("path",{d:"M9.87245893,293.324145 L0.0114611411,30.5732167 C-0.314208957,21.8955842 6.33948896,14.5413918 15.0063196,13.9997149 L238.494389,0.0317105427 C247.316188,-0.519651867 254.914637,6.18486163 255.466,15.0066607 C255.486773,15.339032 255.497167,15.6719708 255.497167,16.0049907 L255.497167,302.318596 C255.497167,311.157608 248.331732,318.323043 239.492719,318.323043 C239.253266,318.323043 239.013844,318.317669 238.774632,318.306926 L25.1475605,308.712253 C16.8276309,308.338578 10.1847994,301.646603 9.87245893,293.324145 L9.87245893,293.324145 Z",id:"path-1"})),n.createElement("g",null,n.createElement("mask",{id:"mask-2",fill:"white"},n.createElement("use",{xlinkHref:"#path-1"})),n.createElement("use",{fill:"#FF4785",fillRule:"nonzero",xlinkHref:"#path-1"}),n.createElement("path",{d:"M188.665358,39.126973 L190.191903,2.41148534 L220.883535,0 L222.205755,37.8634126 C222.251771,39.1811466 221.22084,40.2866846 219.903106,40.3327009 C219.338869,40.3524045 218.785907,40.1715096 218.342409,39.8221376 L206.506729,30.4984116 L192.493574,41.1282444 C191.443077,41.9251106 189.945493,41.7195021 189.148627,40.6690048 C188.813185,40.2267976 188.6423,39.6815326 188.665358,39.126973 Z M149.413703,119.980309 C149.413703,126.206975 191.355678,123.222696 196.986019,118.848893 C196.986019,76.4467826 174.234041,54.1651411 132.57133,54.1651411 C90.9086182,54.1651411 67.5656805,76.7934542 67.5656805,110.735941 C67.5656805,169.85244 147.345341,170.983856 147.345341,203.229219 C147.345341,212.280549 142.913138,217.654777 133.162291,217.654777 C120.456641,217.654777 115.433477,211.165914 116.024438,189.103298 C116.024438,184.317101 67.5656805,182.824962 66.0882793,189.103298 C62.3262146,242.56887 95.6363019,257.990394 133.753251,257.990394 C170.688279,257.990394 199.645341,238.303123 199.645341,202.663511 C199.645341,139.304202 118.683759,141.001326 118.683759,109.604526 C118.683759,96.8760922 128.139127,95.178968 133.753251,95.178968 C139.662855,95.178968 150.300143,96.2205679 149.413703,119.980309 Z",fill:"#FFFFFF",fillRule:"nonzero",mask:"url(#mask-2)"})))}var I=a(()=>{});var v,tt,ot,et,rt,nt,it,At,st,Lt,pt,zt,at,A=a(()=>{v=styled.div`
+  `),R=i.forwardRef(({width:t,height:o,children:e,...r},l)=>i.createElement(m.Content,{ref:l,asChild:!0,...r},i.createElement(zt,{width:t,height:o},e)));});function S({children:t,width:o,height:e,onEscapeKeyDown:r,onInteractOutside:l=d=>d.preventDefault(),...n}){return i.createElement(m.Root,{...n},i.createElement(m.Portal,null,i.createElement(Q,null),i.createElement(R,{width:o,height:e,onInteractOutside:l,onEscapeKeyDown:r},t({Title:m.Title,Description:m.Description,Close:m.Close}))))}var M=a(()=>{tt();});function k(){return i.createElement("svg",{width:"32px",height:"40px",viewBox:"0 0 256 319",preserveAspectRatio:"xMidYMid"},i.createElement("defs",null,i.createElement("path",{d:"M9.87245893,293.324145 L0.0114611411,30.5732167 C-0.314208957,21.8955842 6.33948896,14.5413918 15.0063196,13.9997149 L238.494389,0.0317105427 C247.316188,-0.519651867 254.914637,6.18486163 255.466,15.0066607 C255.486773,15.339032 255.497167,15.6719708 255.497167,16.0049907 L255.497167,302.318596 C255.497167,311.157608 248.331732,318.323043 239.492719,318.323043 C239.253266,318.323043 239.013844,318.317669 238.774632,318.306926 L25.1475605,308.712253 C16.8276309,308.338578 10.1847994,301.646603 9.87245893,293.324145 L9.87245893,293.324145 Z",id:"path-1"})),i.createElement("g",null,i.createElement("mask",{id:"mask-2",fill:"white"},i.createElement("use",{xlinkHref:"#path-1"})),i.createElement("use",{fill:"#FF4785",fillRule:"nonzero",xlinkHref:"#path-1"}),i.createElement("path",{d:"M188.665358,39.126973 L190.191903,2.41148534 L220.883535,0 L222.205755,37.8634126 C222.251771,39.1811466 221.22084,40.2866846 219.903106,40.3327009 C219.338869,40.3524045 218.785907,40.1715096 218.342409,39.8221376 L206.506729,30.4984116 L192.493574,41.1282444 C191.443077,41.9251106 189.945493,41.7195021 189.148627,40.6690048 C188.813185,40.2267976 188.6423,39.6815326 188.665358,39.126973 Z M149.413703,119.980309 C149.413703,126.206975 191.355678,123.222696 196.986019,118.848893 C196.986019,76.4467826 174.234041,54.1651411 132.57133,54.1651411 C90.9086182,54.1651411 67.5656805,76.7934542 67.5656805,110.735941 C67.5656805,169.85244 147.345341,170.983856 147.345341,203.229219 C147.345341,212.280549 142.913138,217.654777 133.162291,217.654777 C120.456641,217.654777 115.433477,211.165914 116.024438,189.103298 C116.024438,184.317101 67.5656805,182.824962 66.0882793,189.103298 C62.3262146,242.56887 95.6363019,257.990394 133.753251,257.990394 C170.688279,257.990394 199.645341,238.303123 199.645341,202.663511 C199.645341,139.304202 118.683759,141.001326 118.683759,109.604526 C118.683759,96.8760922 128.139127,95.178968 133.753251,95.178968 C139.662855,95.178968 150.300143,96.2205679 149.413703,119.980309 Z",fill:"#FFFFFF",fillRule:"nonzero",mask:"url(#mask-2)"})))}var $=a(()=>{});var T,ot,et,rt,nt,it,st,Lt,at,Yt,pt,jt,lt,I=a(()=>{T=styled.div`
   border-radius: 5px;
   display: flex;
   flex-direction: column;
   align-items: center;
   height: 100%;
   justify-content: space-between;
-`,tt=styled.div`
+`,ot=styled.div`
   display: flex;
   flex: 1;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-`,ot=styled.h1`
+`,et=styled.h1`
   margin: 0;
   margin-top: 20px;
   margin-bottom: 5px;
@@ -71,7 +96,7 @@ var ht=Object.defineProperty;var a=(t,o)=>()=>(t&&(o=t(t=0)),o);var xt=(t,o)=>{f
   font-weight: ${({theme:t})=>t.typography.weight.bold};
   font-size: ${({theme:t})=>t.typography.size.m1}px;
   line-height: ${({theme:t})=>t.typography.size.m3}px;
-`,et=styled.p`
+`,rt=styled.p`
   margin: 0;
   margin-bottom: 20px;
   max-width: 320px;
@@ -80,7 +105,7 @@ var ht=Object.defineProperty;var a=(t,o)=>()=>(t&&(o=t(t=0)),o);var xt=(t,o)=>{f
   font-weight: ${({theme:t})=>t.typography.weight.regular};
   line-height: ${({theme:t})=>t.typography.size.m1}px;
   color: ${({theme:t})=>t.color.darker};
-`,rt=styled.button`
+`,nt=styled.button`
   all: unset;
   cursor: pointer;
   font-size: 13px;
@@ -90,10 +115,10 @@ var ht=Object.defineProperty;var a=(t,o)=>()=>(t&&(o=t(t=0)),o);var xt=(t,o)=>{f
   &:focus-visible {
     outline: auto;
   }
-`,nt=styled(Icons)`
+`,it=styled(Icons)`
   margin-left: 2px;
   height: 10px;
-`,it=styled.div`
+`,st=styled.div`
   position: absolute;
   top: 0;
   left: 0;
@@ -101,11 +126,11 @@ var ht=Object.defineProperty;var a=(t,o)=>()=>(t&&(o=t(t=0)),o);var xt=(t,o)=>{f
   height: 100%;
   z-index: -1;
   overflow: hidden;
-`,At=keyframes`
+`,Lt=keyframes`
   0% { transform: translate(0px, 0px) }
   50% { transform: translate(-200px, 0px) }
   100% { transform: translate(0px, 0px) }
-`,st=styled.div`
+`,at=styled.div`
   position: absolute;
   width: 1200px;
   height: 1200px;
@@ -116,10 +141,10 @@ var ht=Object.defineProperty;var a=(t,o)=>()=>(t&&(o=t(t=0)),o);var xt=(t,o)=>{f
     rgba(253, 255, 147, 1) 0%,
     rgba(253, 255, 147, 0) 70%
   );
-  animation: ${At} 4s linear infinite;
+  animation: ${Lt} 4s linear infinite;
   animation-timing-function: ease-in-out;
   z-index: 3;
-`,Lt=keyframes`
+`,Yt=keyframes`
   0% { transform: translate(0px, 0px) }
   50% { transform: translate(400px, 0px) }
   100% { transform: translate(0px, 0px) }
@@ -134,14 +159,14 @@ var ht=Object.defineProperty;var a=(t,o)=>()=>(t&&(o=t(t=0)),o);var xt=(t,o)=>{f
     rgba(255, 119, 119, 1) 0%,
     rgba(255, 119, 119, 0) 70%
   );
-  animation: ${Lt} 6s linear infinite;
+  animation: ${Yt} 6s linear infinite;
   animation-timing-function: ease-in-out;
   z-index: 2;
-`,zt=keyframes`
+`,jt=keyframes`
   0% { transform: translate(600px, -40px) }
   50% { transform: translate(600px, -200px) }
   100% { transform: translate(600px, -40px) }
-`,at=styled.div`
+`,lt=styled.div`
   position: absolute;
   width: 1200px;
   height: 1200px;
@@ -152,9 +177,9 @@ var ht=Object.defineProperty;var a=(t,o)=>()=>(t&&(o=t(t=0)),o);var xt=(t,o)=>{f
     rgba(119, 255, 247, 0.8) 0%,
     rgba(119, 255, 247, 0) 70%
   );
-  animation: ${zt} 4s linear infinite;
+  animation: ${jt} 4s linear infinite;
   animation-timing-function: ease-in-out;
   z-index: 4;
-`;});var lt,dt=a(()=>{b();M();I();A();lt=({onSkip:t,onProceed:o})=>n.createElement(S,{width:540,height:430,defaultOpen:!0},({Close:e})=>n.createElement(v,{"data-chromatic":"ignore"},n.createElement(tt,null,n.createElement(k,null),n.createElement(ot,null,"Welcome to Storybook"),n.createElement(et,null,"Storybook helps you develop UI components. Learn the basics in a few simple steps."),n.createElement(x,{style:{marginTop:4},onClick:o},"Start your 3 minute tour")),n.createElement(e,{asChild:!0},n.createElement(rt,{onClick:t},"Skip tour",n.createElement(nt,{icon:"arrowright"}))),n.createElement(it,null,n.createElement(st,null),n.createElement(pt,null),n.createElement(at,null))));});function mt({onFinish:t}){return n.createElement(S,{width:540,defaultOpen:!0},({Title:o,Description:e})=>n.createElement(v,{"data-chromatic":"ignore"},n.createElement(k,null),n.createElement(o,{style:{marginTop:20}},"Create your first story (WORK IN PROGRESS)"),n.createElement(e,null,"Now it's your turn. ",n.createElement("br",null),"See how easy it is to create your first story by following these steps below."),n.createElement(x,{style:{marginTop:4},onClick:t},"Go to story")))}var ut=a(()=>{b();M();I();A();});var gt={};xt(gt,{default:()=>ft});function ft({api:t}){let[o,e]=useState(!0),[r,d]=useState(!1),[i,l]=useState("1:Welcome"),F=useCallback(()=>{let s=new URL(window.location.href);s.searchParams.delete("onboarding");let T=decodeURIComponent(s.searchParams.get("path"));s.search=`?path=${T}`,history.replaceState({},"",s.href),e(!1);},[e]);return useEffect(()=>{let s;return i==="4:VisitNewStory"&&(s=window.setTimeout(()=>{d(!0),l("5:ConfigureYourProject");},2e3)),()=>{clearTimeout(s);}},[i]),useEffect(()=>{t.once(CURRENT_STORY_WAS_SET,({storyId:s})=>{s!=="example-button--primary"&&t.selectStory("example-button--primary",void 0,{ref:void 0}),t.togglePanel(!0),t.togglePanelPosition("bottom"),t.setSelectedPanel("addon-controls");});},[]),useEffect(()=>{let s=T=>{T==="configure-your-project--docs"&&F();};return t.on(STORY_CHANGED,s),()=>{t.off(STORY_CHANGED,s);}},[]),o?n.createElement(ThemeProvider,{theme:Ut},r&&n.createElement(h,{numberOfPieces:1e3,initialVelocityY:3,recycle:!1,onConfettiComplete:s=>{s.reset(),d(!1);}}),i==="1:Welcome"&&n.createElement(lt,{onProceed:()=>{l("2:StorybookTour");},onSkip:F}),(i==="2:StorybookTour"||i==="5:ConfigureYourProject")&&n.createElement(q,{api:t,isFinalStep:i==="5:ConfigureYourProject",onFirstTourDone:()=>{l("3:WriteYourStory");}}),i==="3:WriteYourStory"&&n.createElement(mt,{onFinish:()=>{l("4:VisitNewStory");}})):null}var Ut,yt=a(()=>{Z();dt();ut();P();Ut=ensure(themes.light);});var qt=lazy(()=>Promise.resolve().then(()=>(yt(),gt)));addons.register("@storybook/addon-onboarding",async t=>{if(!t.getUrlState().queryParams.onboarding)return;let e=!1;try{e=!!(await(await fetch("./index.json")).json()).entries["example-button--primary"];}catch{}if(e){let r=document.createElement("div");r.id="addon-onboarding",document.body.appendChild(r),_t.render(n.createElement(Suspense,{fallback:n.createElement("div",null,"Loading...")},n.createElement(qt,{api:t})),r);}});
+`;});var dt,mt=a(()=>{O();M();$();I();dt=({onSkip:t,onProceed:o})=>i.createElement(S,{width:540,height:430,defaultOpen:!0},({Close:e})=>i.createElement(T,{"data-chromatic":"ignore"},i.createElement(ot,null,i.createElement(k,null),i.createElement(et,null,"Welcome to Storybook"),i.createElement(rt,null,"Storybook helps you develop UI components. Learn the basics in a few simple steps."),i.createElement(b,{style:{marginTop:4},onClick:o},"Start your 3 minute tour")),i.createElement(e,{asChild:!0},i.createElement(nt,{onClick:t},"Skip tour",i.createElement(it,{icon:"arrowright"}))),i.createElement(st,null,i.createElement(at,null),i.createElement(pt,null),i.createElement(lt,null))));});function ct({onFinish:t}){return i.createElement(S,{width:540,defaultOpen:!0},({Title:o,Description:e})=>i.createElement(T,{"data-chromatic":"ignore"},i.createElement(k,null),i.createElement(o,{style:{marginTop:20}},"Create your first story (WORK IN PROGRESS)"),i.createElement(e,null,"Now it's your turn. ",i.createElement("br",null),"See how easy it is to create your first story by following these steps below."),i.createElement(b,{style:{marginTop:4},onClick:t},"Go to story")))}var ft=a(()=>{O();M();$();I();});var ht={};bt(ht,{default:()=>gt});function gt({api:t}){let[o,e]=useState(!0),[r,l]=useState(!1),[n,d]=useState("1:Welcome"),y=useCallback(()=>{let s=new URL(window.location.href);s.searchParams.delete("onboarding");let v=decodeURIComponent(s.searchParams.get("path"));s.search=`?path=${v}`,history.replaceState({},"",s.href),e(!1);},[e]);return useEffect(()=>{let s;return n==="4:VisitNewStory"&&(s=window.setTimeout(()=>{l(!0),d("5:ConfigureYourProject");},2e3)),()=>{clearTimeout(s);}},[n]),useEffect(()=>{t.once(CURRENT_STORY_WAS_SET,({storyId:s})=>{s!=="example-button--primary"&&t.selectStory("example-button--primary",void 0,{ref:void 0}),t.togglePanel(!0),t.togglePanelPosition("bottom"),t.setSelectedPanel("addon-controls");});},[]),useEffect(()=>{let s=v=>{v==="configure-your-project--docs"&&y();};return t.on(STORY_CHANGED,s),()=>{t.off(STORY_CHANGED,s);}},[]),o?i.createElement(ThemeProvider,{theme:Vt},r&&i.createElement(x,{numberOfPieces:1e3,initialVelocityY:3,recycle:!1,onConfettiComplete:s=>{s.reset(),l(!1);}}),n==="1:Welcome"&&i.createElement(dt,{onProceed:()=>{d("2:StorybookTour");},onSkip:y}),(n==="2:StorybookTour"||n==="5:ConfigureYourProject")&&i.createElement(q,{api:t,isFinalStep:n==="5:ConfigureYourProject",onFirstTourDone:()=>{d("3:WriteYourStory");}}),n==="3:WriteYourStory"&&i.createElement(ct,{onFinish:()=>{d("4:VisitNewStory");}})):null}var Vt,yt=a(()=>{J();mt();ft();P();Vt=ensure(themes.light);});var Qt=lazy(()=>Promise.resolve().then(()=>(yt(),ht)));addons.register("@storybook/addon-onboarding",async t=>{if(!(t.getUrlState().path==="/onboarding"))return;let e=!1;try{e=!!(await(await fetch("./index.json")).json()).entries["example-button--primary"];}catch{}if(e){let r=document.createElement("div");r.id="addon-onboarding",document.body.appendChild(r),Zt.render(i.createElement(Suspense,{fallback:i.createElement("div",null,"Loading...")},i.createElement(Qt,{api:t})),r);}});
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=manager.mjs.map

package/dist/manager.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/PulsatingEffect/PulsatingEffect.tsx","../src/components/Confetti/Confetti.tsx","../src/components/TitleBody/TitleBody.styled.tsx","../src/components/TitleBody/TitleBody.tsx","../src/components/Button/Button.tsx","../src/features/GuidedTour/GuidedTour.tsx","../src/components/Modal/Modal.styled.tsx","../src/components/Modal/Modal.tsx","../src/features/WelcomeModal/StorybookLogo.tsx","../src/features/WelcomeModal/WelcomeModal.styled.tsx","../src/features/WelcomeModal/WelcomeModal.tsx","../src/features/WriteStoriesModal/WriteStoriesModal.tsx","../src/App.tsx","../src/manager.tsx"],"names":["useEffect","PulsatingEffect","targetSelector","element","keyframes","style","init_PulsatingEffect","__esmMin","ReactConfetti","React","styled","createPortal","useState","Confetti","top","left","width","height","confettiProps","confettiContainer","container","Wrapper","init_Confetti","Title","Body","init_TitleBody_styled","TitleBody","prefix","title","body","init_TitleBody","Button","props","buttonStyles","init_Button","Joyride","STATUS","STORY_ARGS_UPDATED","GuidedTour","api","isFinalStep","onFirstTourDone","stepIndex","setStepIndex","INTERACTIONS_COUNT","data","init_GuidedTour","css","Dialog","StyledOverlay","StyledContent","ContentWrapper","init_Modal_styled","children","contentProps","ref","Modal","onEscapeKeyDown","onInteractOutside","ev","rootProps","init_Modal","StorybookLogo","init_StorybookLogo","Icons","ModalContentWrapper","TopContent","Description","SkipButton","StyledIcon","Background","circle1Anim","Circle1","circle2Anim","Circle2","circle3Anim","Circle3","init_WelcomeModal_styled","theme","WelcomeModal","init_WelcomeModal","onSkip","onProceed","Close","WriteStoriesModal","onFinish","init_WriteStoriesModal","App_exports","__export","App","useCallback","ThemeProvider","ensure","themes","STORY_CHANGED","CURRENT_STORY_WAS_SET","enabled","setEnabled","showConfetti","setShowConfetti","step","setStep","skipTour","url","path","stepTimeout","storyId","onStoryChanged","confetti","init_App","ReactDOM","lazy","Suspense","addons","hasButtonStories","domNode"],"mappings":"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","sourcesContent":["import { useEffect } from \"react\";\n\nexport function PulsatingEffect({\n  targetSelector,\n}: {\n  targetSelector: string;\n}): JSX.Element {\n  useEffect(() => {\n    const element = document.querySelector<HTMLElement>(targetSelector);\n    if (element) {\n      element.style.animation = \"pulsate 3s infinite\";\n      element.style.transformOrigin = \"center\";\n      element.style.animationTimingFunction = \"ease-in-out\";\n\n      const keyframes = `\n        @keyframes pulsate {\n          0% {\n            box-shadow: 0 0 0 0 rgba(2, 156, 253, 0.7), 0 0 0 0 rgba(2, 156, 253, 0.4);\n          }\n          50% {\n            box-shadow: 0 0 0 20px rgba(2, 156, 253, 0), 0 0 0 40px rgba(2, 156, 253, 0);\n          }\n          100% {\n            box-shadow: 0 0 0 0 rgba(2, 156, 253, 0), 0 0 0 0 rgba(2, 156, 253, 0);\n          }\n        }\n      `;\n      const style = document.createElement(\"style\");\n      style.id = \"sb-onboarding-pulsating-effect\";\n      style.innerHTML = keyframes;\n      document.head.appendChild(style);\n    }\n\n    return () => {\n      const styleElement = document.querySelector(\n        \"#sb-onboarding-pulsating-effect\"\n      );\n      styleElement?.remove();\n    };\n  }, [targetSelector]);\n\n  return null;\n}\n","import ReactConfetti from \"react-confetti\";\nimport React, { useEffect } from \"react\";\nimport { styled } from \"@storybook/theming\";\nimport { createPortal } from \"react-dom\";\nimport { useState } from \"react\";\n\ninterface ConfettiProps\n  extends Omit<React.ComponentProps<typeof ReactConfetti>, \"drawShape\"> {\n  top?: number;\n  left?: number;\n  width?: number;\n  height?: number;\n}\n\nconst Wrapper = styled.div<{\n  width: number;\n  height: number;\n  top: number;\n  left: number;\n}>(({ width, height, left, top }) => ({\n  width: `${width}px`,\n  height: `${height}px`,\n  left: `${left}px`,\n  top: `${top}px`,\n  position: \"relative\",\n  overflow: \"hidden\",\n}));\n\nexport function Confetti({\n  top = 0,\n  left = 0,\n  width = window.innerWidth,\n  height = window.innerHeight,\n  ...confettiProps\n}: ConfettiProps): React.ReactPortal {\n  const [confettiContainer] = useState(() => {\n    const container = document.createElement(\"div\");\n    container.setAttribute(\"id\", \"confetti-container\");\n    container.setAttribute(\n      \"style\",\n      \"position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999;\"\n    );\n\n    return container;\n  });\n\n  useEffect(() => {\n    document.body.appendChild(confettiContainer);\n\n    return () => {\n      document.body.removeChild(confettiContainer);\n    };\n  }, []);\n\n  return createPortal(\n    <Wrapper top={top} left={left} width={width} height={height}>\n      <ReactConfetti {...confettiProps} />\n    </Wrapper>,\n    confettiContainer\n  );\n}\n","import { styled } from \"@storybook/theming\";\n\nexport const Wrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n`;\n\nexport const Title = styled.strong`\n  font-size: 13px;\n`;\n\nexport const Body = styled.p`\n  font-size: 13px;\n  text-align: start;\n  color: #798186;\n  margin: 0;\n  margin-top: 4px;\n`;\n","import React from \"react\";\nimport { Body, Title, Wrapper } from \"./TitleBody.styled\";\n\nexport function TitleBody({\n  prefix,\n  title,\n  body,\n}: {\n  prefix?: React.ReactNode;\n  title: React.ReactNode;\n  body: React.ReactNode;\n}) {\n  return (\n    <Wrapper>\n      {prefix}\n      <Title>{title}</Title>\n      <Body>{body}</Body>\n    </Wrapper>\n  );\n}\n","import React from \"react\";\n\nexport const buttonStyles: React.ComponentProps<\"button\">[\"style\"] = {\n  border: 0,\n  cursor: \"pointer\",\n  fontSize: 13,\n  lineHeight: 1,\n  padding: \"9px 12px\",\n  backgroundColor: \"#029CFD\",\n  borderRadius: 4,\n  color: \"#fff\",\n  fontWeight: 700,\n};\n\nexport function Button(props: React.ComponentProps<\"button\">) {\n  const style = {\n    ...buttonStyles,\n    ...(props.style || {}),\n  };\n\n  return <button type=\"button\" {...props} style={style} />;\n}\n","import React, { useEffect, useState } from \"react\";\nimport Joyride, { CallBackProps, STATUS, Step } from \"react-joyride\";\n\nimport { PulsatingEffect } from \"../../components/PulsatingEffect/PulsatingEffect\";\nimport { Confetti } from \"../../components/Confetti/Confetti\";\nimport { TitleBody } from \"../../components/TitleBody/TitleBody\";\nimport { API } from \"@storybook/manager-api\";\nimport { STORY_ARGS_UPDATED } from \"@storybook/core-events\";\nimport { buttonStyles } from \"src/components/Button/Button\";\n\nlet INTERACTIONS_COUNT = 0;\n\nexport function GuidedTour({\n  api,\n  isFinalStep,\n  onFirstTourDone,\n}: {\n  api: API;\n  isFinalStep?: boolean;\n  onFirstTourDone: () => void;\n}) {\n  const [stepIndex, setStepIndex] = useState<number>();\n\n  useEffect(() => {\n    api.on(STORY_ARGS_UPDATED, () => {\n      INTERACTIONS_COUNT = INTERACTIONS_COUNT + 1;\n      if (INTERACTIONS_COUNT === 2) {\n        setStepIndex(3);\n      }\n    });\n  }, []);\n\n  const steps: Step[] = isFinalStep\n    ? [\n      {\n        target: \"#configure-your-project--docs\",\n        content: (\n          <TitleBody\n            title=\"Continue setting up your project\"\n            body=\"You nailed the basics. Now get started writing stories for your own components.\"\n          />\n        ),\n        placement: \"right\",\n        disableOverlay: true,\n        disableBeacon: true,\n        styles: {\n          buttonNext: {\n            display: \"none\",\n          },\n        },\n        floaterProps: {\n          disableAnimation: true,\n        },\n      },\n    ]\n    : [\n      {\n        target: \"#storybook-explorer-tree > div\",\n        content: (\n          <TitleBody\n            title=\"Storybook is built from stories\"\n            body=\"Storybook uses stories to represent the key states supported by each of your components. For example: this Button component has four stories.\"\n          />\n        ),\n        placement: \"right\",\n        disableBeacon: true,\n        styles: {\n          spotlight: {\n            transform: 'translateY(30px)',\n          },\n        },\n        floaterProps: {\n          disableAnimation: true,\n        },\n      },\n      {\n        target: \"#storybook-preview-iframe\",\n        content: (\n          <TitleBody\n            title=\"Storybook previews are interactive\"\n            body=\"Whenever you modify code or stories, Storybook automatically updates how it previews your components.\"\n          />\n        ),\n        placement: \"bottom\",\n      },\n      {\n        target: \"#root div[role=main]\",\n        content: (\n          <>\n            <TitleBody\n              title=\"Interactive story playground\"\n              body={\n                <>\n                  See how a story renders with different data and state\n                  without touching code.\n                  <br />\n                  Try it out by pressing this button.\n                </>\n              }\n            />\n            <PulsatingEffect targetSelector=\"#control-primary\" />\n          </>\n        ),\n        placement: \"right\",\n        spotlightClicks: true,\n        floaterProps: {\n          target: \"#control-primary\",\n        },\n        styles: {\n          buttonNext: {\n            display: \"none\",\n          },\n        },\n      },\n      {\n        target: \"#control-primary\",\n        content: (\n          <>\n            <Confetti numberOfPieces={100} />\n            <TitleBody\n              title=\"Congratulations!\"\n              body=\"You've learned how to control your stories interactively. Now: let's explore how to write your first story.\"\n            />\n          </>\n        ),\n        placement: \"right\",\n        disableOverlay: true,\n        locale: {\n          last: \"Next\",\n        },\n      },\n    ];\n\n  return (\n    <Joyride\n      steps={steps}\n      continuous\n      stepIndex={stepIndex}\n      spotlightPadding={0}\n      hideBackButton\n      disableCloseOnEsc\n      disableOverlayClose\n      disableScrolling\n      hideCloseButton\n      callback={(data: CallBackProps) => {\n        if (!isFinalStep && data.status === STATUS.FINISHED) {\n          onFirstTourDone();\n        }\n      }}\n      floaterProps={{\n        styles: {\n          floater: {\n            padding: 0,\n            paddingLeft: 8,\n            paddingTop: 8,\n            filter:\n              \"drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1))\",\n          },\n        },\n      }}\n      styles={{\n        spotlight: {\n          border: \"solid 2px #004c7c\",\n        },\n        tooltip: {\n          maxWidth: 260,\n          borderRadius: 4,\n          padding: 15,\n        },\n        overlay: {\n          backgroundColor: \"rgba(0, 0, 0, 0.48)\",\n        },\n        buttonNext: {\n          ...buttonStyles,\n          marginTop: 5,\n        },\n        tooltipContent: {\n          paddingTop: 4,\n          padding: 0,\n        },\n        options: {\n          zIndex: 10000,\n          primaryColor: \"#029CFD\",\n        },\n      }}\n    />\n  );\n}\n","import { css, styled } from \"@storybook/theming\";\nimport * as Dialog from \"@radix-ui/react-dialog\";\nimport React from \"react\";\n\nexport const StyledOverlay = styled(Dialog.Overlay)`\n  background-color: rgba(27, 28, 29, 0.48);\n  position: fixed;\n  inset: 0px;\n  width: 100%;\n  height: 100%;\n`;\n\nexport const StyledContent = styled.div<{ width: number; height: number }>(\n  ({ width, height }) => css`\n    background-color: white;\n    border-radius: 6px;\n    box-shadow: rgba(14, 18, 22, 0.35) 0px 10px 38px -10px;\n    position: fixed;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    width: ${width ?? 740}px;\n    height: ${height ? `${height}px` : \"auto\"};\n    max-width: calc(100% - 40px);\n    max-height: 85vh;\n  `\n);\n\nexport const ContentWrapper = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof StyledContent> &\n    React.ComponentProps<typeof Dialog.Content>\n>(({ width, height, children, ...contentProps }, ref) => (\n  <Dialog.Content ref={ref} asChild {...contentProps}>\n    <StyledContent width={width} height={height}>\n      {children}\n    </StyledContent>\n  </Dialog.Content>\n));\n","import React from \"react\";\nimport * as Dialog from \"@radix-ui/react-dialog\";\nimport { ContentWrapper, StyledOverlay } from \"./Modal.styled\";\n\ntype ContentProps = React.ComponentProps<typeof ContentWrapper>;\n\ninterface ModalProps\n  extends Omit<React.ComponentProps<typeof Dialog.Root>, \"children\"> {\n  width?: number;\n  height?: number;\n  children: (props: {\n    Title: typeof Dialog.Title;\n    Description: typeof Dialog.Description;\n    Close: typeof Dialog.Close;\n  }) => React.ReactNode;\n  onEscapeKeyDown?: ContentProps[\"onEscapeKeyDown\"];\n  onInteractOutside?: ContentProps[\"onInteractOutside\"];\n}\n\nexport function Modal({\n  children,\n  width,\n  height,\n  onEscapeKeyDown,\n  onInteractOutside = (ev) => ev.preventDefault(),\n  ...rootProps\n}: ModalProps) {\n  return (\n    <Dialog.Root {...rootProps}>\n      <Dialog.Portal>\n        <StyledOverlay />\n        <ContentWrapper\n          width={width}\n          height={height}\n          onInteractOutside={onInteractOutside}\n          onEscapeKeyDown={onEscapeKeyDown}\n        >\n          {children({\n            Title: Dialog.Title,\n            Description: Dialog.Description,\n            Close: Dialog.Close,\n          })}\n        </ContentWrapper>\n      </Dialog.Portal>\n    </Dialog.Root>\n  );\n}\n","import React from \"react\";\n\nexport function StorybookLogo() {\n  return (\n    <svg\n      width=\"32px\"\n      height=\"40px\"\n      viewBox=\"0 0 256 319\"\n      preserveAspectRatio=\"xMidYMid\"\n    >\n      <defs>\n        <path\n          d=\"M9.87245893,293.324145 L0.0114611411,30.5732167 C-0.314208957,21.8955842 6.33948896,14.5413918 15.0063196,13.9997149 L238.494389,0.0317105427 C247.316188,-0.519651867 254.914637,6.18486163 255.466,15.0066607 C255.486773,15.339032 255.497167,15.6719708 255.497167,16.0049907 L255.497167,302.318596 C255.497167,311.157608 248.331732,318.323043 239.492719,318.323043 C239.253266,318.323043 239.013844,318.317669 238.774632,318.306926 L25.1475605,308.712253 C16.8276309,308.338578 10.1847994,301.646603 9.87245893,293.324145 L9.87245893,293.324145 Z\"\n          id=\"path-1\"\n        ></path>\n      </defs>\n      <g>\n        <mask id=\"mask-2\" fill=\"white\">\n          <use xlinkHref=\"#path-1\"></use>\n        </mask>\n        <use fill=\"#FF4785\" fillRule=\"nonzero\" xlinkHref=\"#path-1\"></use>\n        <path\n          d=\"M188.665358,39.126973 L190.191903,2.41148534 L220.883535,0 L222.205755,37.8634126 C222.251771,39.1811466 221.22084,40.2866846 219.903106,40.3327009 C219.338869,40.3524045 218.785907,40.1715096 218.342409,39.8221376 L206.506729,30.4984116 L192.493574,41.1282444 C191.443077,41.9251106 189.945493,41.7195021 189.148627,40.6690048 C188.813185,40.2267976 188.6423,39.6815326 188.665358,39.126973 Z M149.413703,119.980309 C149.413703,126.206975 191.355678,123.222696 196.986019,118.848893 C196.986019,76.4467826 174.234041,54.1651411 132.57133,54.1651411 C90.9086182,54.1651411 67.5656805,76.7934542 67.5656805,110.735941 C67.5656805,169.85244 147.345341,170.983856 147.345341,203.229219 C147.345341,212.280549 142.913138,217.654777 133.162291,217.654777 C120.456641,217.654777 115.433477,211.165914 116.024438,189.103298 C116.024438,184.317101 67.5656805,182.824962 66.0882793,189.103298 C62.3262146,242.56887 95.6363019,257.990394 133.753251,257.990394 C170.688279,257.990394 199.645341,238.303123 199.645341,202.663511 C199.645341,139.304202 118.683759,141.001326 118.683759,109.604526 C118.683759,96.8760922 128.139127,95.178968 133.753251,95.178968 C139.662855,95.178968 150.300143,96.2205679 149.413703,119.980309 Z\"\n          fill=\"#FFFFFF\"\n          fillRule=\"nonzero\"\n          mask=\"url(#mask-2)\"\n        ></path>\n      </g>\n    </svg>\n  );\n}\n","import { Icons } from \"@storybook/components\";\nimport { keyframes, styled } from \"@storybook/theming\";\n\nexport const ModalContentWrapper = styled.div`\n  border-radius: 5px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  height: 100%;\n  justify-content: space-between;\n`;\n\nexport const TopContent = styled.div`\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n`;\n\nexport const Title = styled.h1`\n  margin: 0;\n  margin-top: 20px;\n  margin-bottom: 5px;\n  color: ${({ theme }) => theme.color.darkest};\n  font-weight: ${({ theme }) => theme.typography.weight.bold};\n  font-size: ${({ theme }) => theme.typography.size.m1}px;\n  line-height: ${({ theme }) => theme.typography.size.m3}px;\n`;\n\nexport const Description = styled.p`\n  margin: 0;\n  margin-bottom: 20px;\n  max-width: 320px;\n  text-align: center;\n  font-size: ${({ theme }) => theme.typography.size.s2}px;\n  font-weight: ${({ theme }) => theme.typography.weight.regular};\n  line-height: ${({ theme }) => theme.typography.size.m1}px;\n  color: ${({ theme }) => theme.color.darker};\n`;\n\nexport const SkipButton = styled.button`\n  all: unset;\n  cursor: pointer;\n  font-size: 13px;\n  color: #798186;\n  padding-bottom: 20px;\n\n  &:focus-visible {\n    outline: auto;\n  }\n`;\n\nexport const StyledIcon = styled(Icons)`\n  margin-left: 2px;\n  height: 10px;\n`;\n\nexport const Background = styled.div`\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: -1;\n  overflow: hidden;\n`;\n\nexport const circle1Anim = keyframes`\n  0% { transform: translate(0px, 0px) }\n  50% { transform: translate(-200px, 0px) }\n  100% { transform: translate(0px, 0px) }\n`;\n\nexport const Circle1 = styled.div`\n  position: absolute;\n  width: 1200px;\n  height: 1200px;\n  left: -200px;\n  top: -900px;\n  background: radial-gradient(\n    circle at center,\n    rgba(253, 255, 147, 1) 0%,\n    rgba(253, 255, 147, 0) 70%\n  );\n  animation: ${circle1Anim} 4s linear infinite;\n  animation-timing-function: ease-in-out;\n  z-index: 3;\n`;\n\nexport const circle2Anim = keyframes`\n  0% { transform: translate(0px, 0px) }\n  50% { transform: translate(400px, 0px) }\n  100% { transform: translate(0px, 0px) }\n`;\n\nexport const Circle2 = styled.div`\n  position: absolute;\n  width: 1200px;\n  height: 1200px;\n  left: -600px;\n  top: -840px;\n  background: radial-gradient(\n    circle at center,\n    rgba(255, 119, 119, 1) 0%,\n    rgba(255, 119, 119, 0) 70%\n  );\n  animation: ${circle2Anim} 6s linear infinite;\n  animation-timing-function: ease-in-out;\n  z-index: 2;\n`;\n\nexport const circle3Anim = keyframes`\n  0% { transform: translate(600px, -40px) }\n  50% { transform: translate(600px, -200px) }\n  100% { transform: translate(600px, -40px) }\n`;\n\nexport const Circle3 = styled.div`\n  position: absolute;\n  width: 1200px;\n  height: 1200px;\n  left: -600px;\n  top: -840px;\n  background: radial-gradient(\n    circle at center,\n    rgba(119, 255, 247, 0.8) 0%,\n    rgba(119, 255, 247, 0) 70%\n  );\n  animation: ${circle3Anim} 4s linear infinite;\n  animation-timing-function: ease-in-out;\n  z-index: 4;\n`;\n","import React from \"react\";\n\nimport { Button } from \"../../components/Button/Button\";\nimport { Modal } from \"../../components/Modal/Modal\";\nimport { StorybookLogo } from \"./StorybookLogo\";\nimport {\n  ModalContentWrapper,\n  SkipButton,\n  StyledIcon,\n  Title,\n  Description,\n  Background,\n  Circle1,\n  Circle2,\n  Circle3,\n  TopContent,\n} from \"./WelcomeModal.styled\";\n\nexport const WelcomeModal = ({\n  onSkip,\n  onProceed,\n}: {\n  onSkip: () => void;\n  onProceed: () => void;\n}) => {\n  return (\n    <Modal width={540} height={430} defaultOpen>\n      {({ Close }) => (\n        <ModalContentWrapper data-chromatic=\"ignore\">\n          <TopContent>\n            <StorybookLogo />\n            <Title>Welcome to Storybook</Title>\n            <Description>\n              Storybook helps you develop UI components. Learn the basics in a\n              few simple steps.\n            </Description>\n            <Button style={{ marginTop: 4 }} onClick={onProceed}>\n              Start your 3 minute tour\n            </Button>\n          </TopContent>\n          <Close asChild>\n            <SkipButton onClick={onSkip}>\n              Skip tour\n              <StyledIcon icon=\"arrowright\" />\n            </SkipButton>\n          </Close>\n          <Background>\n            <Circle1 />\n            <Circle2 />\n            <Circle3 />\n          </Background>\n        </ModalContentWrapper>\n      )}\n    </Modal>\n  );\n};\n","import React from \"react\";\nimport { Button } from \"../../components/Button/Button\";\n\nimport { Modal } from \"../../components/Modal/Modal\";\nimport { StorybookLogo } from \"../WelcomeModal/StorybookLogo\";\nimport { ModalContentWrapper } from \"../WelcomeModal/WelcomeModal.styled\";\n\nexport function WriteStoriesModal({ onFinish }: { onFinish: () => void }) {\n  return (\n    <Modal width={540} defaultOpen>\n      {({ Title, Description }) => (\n        <ModalContentWrapper data-chromatic=\"ignore\">\n          <StorybookLogo />\n          <Title style={{ marginTop: 20 }}>\n            Create your first story (WORK IN PROGRESS)\n          </Title>\n          <Description>\n            Now it's your turn. <br />\n            See how easy it is to create your first story by following these\n            steps below.\n          </Description>\n          <Button style={{ marginTop: 4 }} onClick={onFinish}>\n            Go to story\n          </Button>\n        </ModalContentWrapper>\n      )}\n    </Modal>\n  );\n}\n","import React, { useCallback, useEffect, useState } from \"react\";\nimport { ThemeProvider, ensure, themes } from \"@storybook/theming\";\nimport { STORY_CHANGED, CURRENT_STORY_WAS_SET } from \"@storybook/core-events\";\nimport { type API } from \"@storybook/manager-api\";\n\nimport { GuidedTour } from \"./features/GuidedTour/GuidedTour\";\nimport { WelcomeModal } from \"./features/WelcomeModal/WelcomeModal\";\nimport { WriteStoriesModal } from \"./features/WriteStoriesModal/WriteStoriesModal\";\nimport { Confetti } from \"./components/Confetti/Confetti\";\n\ntype Step =\n  | \"1:Welcome\"\n  | \"2:StorybookTour\"\n  | \"3:WriteYourStory\"\n  | \"4:VisitNewStory\"\n  | \"5:ConfigureYourProject\";\n\nconst theme = ensure(themes.light);\n\nexport default function App({ api }: { api: API }) {\n  const [enabled, setEnabled] = useState(true);\n  const [showConfetti, setShowConfetti] = useState(false);\n  const [step, setStep] = useState<Step>(\"1:Welcome\");\n\n  const skipTour = useCallback(() => {\n    // remove onboarding query parameter from current url\n    const url = new URL(window.location.href);\n    url.searchParams.delete(\"onboarding\");\n    const path = decodeURIComponent(url.searchParams.get(\"path\"));\n    url.search = `?path=${path}`;\n    history.replaceState({}, \"\", url.href);\n    setEnabled(false);\n  }, [setEnabled]);\n\n  useEffect(() => {\n    let stepTimeout: number;\n    if (step === \"4:VisitNewStory\") {\n      stepTimeout = window.setTimeout(() => {\n        setShowConfetti(true);\n        setStep(\"5:ConfigureYourProject\");\n      }, 2000);\n    }\n\n    return () => {\n      clearTimeout(stepTimeout);\n    };\n  }, [step]);\n\n  useEffect(() => {\n    api.once(CURRENT_STORY_WAS_SET, ({ storyId }) => {\n      // make sure the initial state is set correctly:\n      // 1. Selected story is primary button\n      // 2. The addon panel is opened, in the bottom and the controls tab is selected\n      if (storyId !== \"example-button--primary\") {\n        api.selectStory(\"example-button--primary\", undefined, {\n          ref: undefined,\n        });\n      }\n      api.togglePanel(true);\n      api.togglePanelPosition(\"bottom\");\n      api.setSelectedPanel(\"addon-controls\");\n    });\n  }, []);\n\n  useEffect(() => {\n    const onStoryChanged = (storyId: string) => {\n      if (storyId === \"configure-your-project--docs\") {\n        skipTour();\n      }\n    };\n\n    api.on(STORY_CHANGED, onStoryChanged);\n\n    return () => {\n      api.off(STORY_CHANGED, onStoryChanged);\n    };\n  }, []);\n\n  if (!enabled) {\n    return null;\n  }\n\n  return (\n    <ThemeProvider theme={theme}>\n      {showConfetti && (\n        <Confetti\n          numberOfPieces={1000}\n          initialVelocityY={3}\n          recycle={false}\n          onConfettiComplete={(confetti) => {\n            confetti.reset();\n            setShowConfetti(false);\n          }}\n        />\n      )}\n      {step === \"1:Welcome\" && (\n        <WelcomeModal\n          onProceed={() => {\n            setStep(\"2:StorybookTour\");\n          }}\n          onSkip={skipTour}\n        />\n      )}\n      {(step === \"2:StorybookTour\" || step === \"5:ConfigureYourProject\") && (\n        <GuidedTour\n          api={api}\n          isFinalStep={step === \"5:ConfigureYourProject\"}\n          onFirstTourDone={() => {\n            setStep(\"3:WriteYourStory\");\n          }}\n        />\n      )}\n      {step === \"3:WriteYourStory\" && (\n        <WriteStoriesModal\n          onFinish={() => {\n            // TODO: enable this\n            // api.selectStory(\"example-button--warning\");\n            setStep(\"4:VisitNewStory\");\n          }}\n        />\n      )}\n    </ThemeProvider>\n  );\n}\n","import ReactDOM from \"react-dom\";\nimport React, { lazy, Suspense } from \"react\";\nimport { addons } from \"@storybook/manager-api\";\n\nconst App = lazy(() => import(\"./App\"));\n\n// The addon is enabled only when:\n// 1. The onboarding query parameter is present\n// 2. The example button stories are present\naddons.register(\"@storybook/addon-onboarding\", async (api) => {\n  const isOnboarding = api.getUrlState().queryParams.onboarding;\n\n  if (!isOnboarding) {\n    return;\n  }\n\n  let hasButtonStories = false;\n  try {\n    const response = await fetch(\"./index.json\");\n    const index = await response.json();\n    hasButtonStories = !!index.entries[\"example-button--primary\"];\n  } catch (e) {}\n\n  if (hasButtonStories) {\n    // Add a new DOM element to document.body, where we will bootstrap our React app\n    const domNode = document.createElement(\"div\");\n\n    domNode.id = \"addon-onboarding\";\n    // Append the new DOM element to document.body\n    document.body.appendChild(domNode);\n\n    // Render the React app\n    ReactDOM.render(\n      <Suspense fallback={<div>Loading...</div>}>\n        <App api={api} />\n      </Suspense>,\n      domNode\n    );\n  }\n});\n"]}
+{"version":3,"sources":["../src/components/PulsatingEffect/PulsatingEffect.tsx","../src/components/Confetti/Confetti.tsx","../src/components/TitleBody/TitleBody.styled.tsx","../src/components/TitleBody/TitleBody.tsx","../src/features/GuidedTour/GuidedTour.styled.tsx","../src/features/GuidedTour/GuidedTour.tsx","../src/components/Button/Button.tsx","../src/components/Modal/Modal.styled.tsx","../src/components/Modal/Modal.tsx","../src/features/WelcomeModal/StorybookLogo.tsx","../src/features/WelcomeModal/WelcomeModal.styled.tsx","../src/features/WelcomeModal/WelcomeModal.tsx","../src/features/WriteStoriesModal/WriteStoriesModal.tsx","../src/App.tsx","../src/manager.tsx"],"names":["useEffect","PulsatingEffect","targetSelector","element","keyframes","style","init_PulsatingEffect","__esmMin","ReactConfetti","React","styled","createPortal","useState","Confetti","top","left","width","height","confettiProps","confettiContainer","container","Wrapper","init_Confetti","Title","Body","init_TitleBody_styled","TitleBody","prefix","title","body","init_TitleBody","getStyles","init_GuidedTour_styled","theme","Joyride","STATUS","STORY_ARGS_UPDATED","useTheme","GuidedTour","api","isFinalStep","onFirstTourDone","stepIndex","setStepIndex","INTERACTIONS_COUNT","data","init_GuidedTour","css","Container","Button","init_Button","children","onClick","rest","Dialog","StyledOverlay","StyledContent","ContentWrapper","init_Modal_styled","contentProps","ref","Modal","onEscapeKeyDown","onInteractOutside","ev","rootProps","init_Modal","StorybookLogo","init_StorybookLogo","Icons","ModalContentWrapper","TopContent","Description","SkipButton","StyledIcon","Background","circle1Anim","Circle1","circle2Anim","Circle2","circle3Anim","Circle3","init_WelcomeModal_styled","WelcomeModal","init_WelcomeModal","onSkip","onProceed","Close","WriteStoriesModal","onFinish","init_WriteStoriesModal","App_exports","__export","App","useCallback","ThemeProvider","ensure","themes","STORY_CHANGED","CURRENT_STORY_WAS_SET","enabled","setEnabled","showConfetti","setShowConfetti","step","setStep","skipTour","url","path","stepTimeout","storyId","onStoryChanged","confetti","init_App","ReactDOM","lazy","Suspense","addons","hasButtonStories","domNode"],"mappings":"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","sourcesContent":["import { useEffect } from \"react\";\n\nexport function PulsatingEffect({\n  targetSelector,\n}: {\n  targetSelector: string;\n}): JSX.Element {\n  useEffect(() => {\n    const element = document.querySelector<HTMLElement>(targetSelector);\n    if (element) {\n      element.style.animation = \"pulsate 3s infinite\";\n      element.style.transformOrigin = \"center\";\n      element.style.animationTimingFunction = \"ease-in-out\";\n\n      const keyframes = `\n        @keyframes pulsate {\n          0% {\n            box-shadow: 0 0 0 0 rgba(2, 156, 253, 0.7), 0 0 0 0 rgba(2, 156, 253, 0.4);\n          }\n          50% {\n            box-shadow: 0 0 0 20px rgba(2, 156, 253, 0), 0 0 0 40px rgba(2, 156, 253, 0);\n          }\n          100% {\n            box-shadow: 0 0 0 0 rgba(2, 156, 253, 0), 0 0 0 0 rgba(2, 156, 253, 0);\n          }\n        }\n      `;\n      const style = document.createElement(\"style\");\n      style.id = \"sb-onboarding-pulsating-effect\";\n      style.innerHTML = keyframes;\n      document.head.appendChild(style);\n    }\n\n    return () => {\n      const styleElement = document.querySelector(\n        \"#sb-onboarding-pulsating-effect\"\n      );\n      styleElement?.remove();\n    };\n  }, [targetSelector]);\n\n  return null;\n}\n","import ReactConfetti from \"react-confetti\";\nimport React, { useEffect } from \"react\";\nimport { styled } from \"@storybook/theming\";\nimport { createPortal } from \"react-dom\";\nimport { useState } from \"react\";\n\ninterface ConfettiProps\n  extends Omit<React.ComponentProps<typeof ReactConfetti>, \"drawShape\"> {\n  top?: number;\n  left?: number;\n  width?: number;\n  height?: number;\n}\n\nconst Wrapper = styled.div<{\n  width: number;\n  height: number;\n  top: number;\n  left: number;\n}>(({ width, height, left, top }) => ({\n  width: `${width}px`,\n  height: `${height}px`,\n  left: `${left}px`,\n  top: `${top}px`,\n  position: \"relative\",\n  overflow: \"hidden\",\n}));\n\nexport function Confetti({\n  top = 0,\n  left = 0,\n  width = window.innerWidth,\n  height = window.innerHeight,\n  ...confettiProps\n}: ConfettiProps): React.ReactPortal {\n  const [confettiContainer] = useState(() => {\n    const container = document.createElement(\"div\");\n    container.setAttribute(\"id\", \"confetti-container\");\n    container.setAttribute(\n      \"style\",\n      \"position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999;\"\n    );\n\n    return container;\n  });\n\n  useEffect(() => {\n    document.body.appendChild(confettiContainer);\n\n    return () => {\n      document.body.removeChild(confettiContainer);\n    };\n  }, []);\n\n  return createPortal(\n    <Wrapper top={top} left={left} width={width} height={height}>\n      <ReactConfetti {...confettiProps} />\n    </Wrapper>,\n    confettiContainer\n  );\n}\n","import { styled } from \"@storybook/theming\";\n\nexport const Wrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n`;\n\nexport const Title = styled.strong`\n  font-size: 13px;\n`;\n\nexport const Body = styled.p`\n  font-size: 13px;\n  text-align: start;\n  color: #798186;\n  margin: 0;\n  margin-top: 4px;\n`;\n","import React from \"react\";\nimport { Body, Title, Wrapper } from \"./TitleBody.styled\";\n\nexport function TitleBody({\n  prefix,\n  title,\n  body,\n}: {\n  prefix?: React.ReactNode;\n  title: React.ReactNode;\n  body: React.ReactNode;\n}) {\n  return (\n    <Wrapper>\n      {prefix}\n      <Title>{title}</Title>\n      <Body>{body}</Body>\n    </Wrapper>\n  );\n}\n","import { type Theme } from \"@storybook/theming\";\n\nexport const getStyles = (theme: Theme) => ({\n  border: 0,\n  borderRadius: \"0.25rem\",\n  cursor: \"pointer\",\n  display: \"inline-flex\",\n  alignItems: \"center\",\n  justifyContent: \"center\",\n  padding: \"0 0.75rem\",\n  background: theme.color.secondary,\n  color: \"#FFF\",\n  height: 32,\n  fontSize: \"0.8125rem\",\n  fontWeight: 700,\n  fontFamily: theme.typography.fonts.base,\n  transition: \"all 0.16s ease-in-out\",\n  textDecoration: \"none\",\n  outline: \"none\",\n});\n","import React, { useEffect, useState } from \"react\";\nimport Joyride, { CallBackProps, STATUS, Step } from \"react-joyride\";\n\nimport { PulsatingEffect } from \"../../components/PulsatingEffect/PulsatingEffect\";\nimport { Confetti } from \"../../components/Confetti/Confetti\";\nimport { TitleBody } from \"../../components/TitleBody/TitleBody\";\nimport { API } from \"@storybook/manager-api\";\nimport { STORY_ARGS_UPDATED } from \"@storybook/core-events\";\nimport { useTheme } from \"@storybook/theming\";\nimport { getStyles } from \"./GuidedTour.styled\";\nimport { Tooltip } from \"./Tooltip\";\n\nlet INTERACTIONS_COUNT = 0;\n\nexport function GuidedTour({\n  api,\n  isFinalStep,\n  onFirstTourDone,\n}: {\n  api: API;\n  isFinalStep?: boolean;\n  onFirstTourDone: () => void;\n}) {\n  const [stepIndex, setStepIndex] = useState<number>();\n  const theme = useTheme();\n\n  useEffect(() => {\n    api.on(STORY_ARGS_UPDATED, () => {\n      INTERACTIONS_COUNT = INTERACTIONS_COUNT + 1;\n      if (INTERACTIONS_COUNT === 2) {\n        setStepIndex(3);\n      }\n    });\n  }, []);\n\n  const steps: Step[] = isFinalStep\n    ? [\n        {\n          target: \"#configure-your-project--docs\",\n          content: (\n            <TitleBody\n              title=\"Continue setting up your project\"\n              body=\"You nailed the basics. Now get started writing stories for your own components.\"\n            />\n          ),\n          placement: \"right\",\n          disableOverlay: true,\n          disableBeacon: true,\n          styles: {\n            buttonNext: {\n              display: \"none\",\n            },\n          },\n          floaterProps: {\n            disableAnimation: true,\n          },\n        },\n      ]\n    : [\n        {\n          target: \"#storybook-explorer-tree > div\",\n          content: (\n            <TitleBody\n              title=\"Storybook is built from stories\"\n              body=\"Storybook uses stories to represent the key states supported by each of your components. For example: this Button component has four stories.\"\n            />\n          ),\n          placement: \"right\",\n          disableBeacon: true,\n          styles: {\n            spotlight: {\n              transform: \"translateY(30px)\",\n            },\n          },\n          floaterProps: {\n            disableAnimation: true,\n          },\n        },\n        {\n          target: \"#storybook-preview-iframe\",\n          content: (\n            <TitleBody\n              title=\"Storybook previews are interactive\"\n              body=\"Whenever you modify code or stories, Storybook automatically updates how it previews your components.\"\n            />\n          ),\n          placement: \"bottom\",\n        },\n        {\n          target: \"#root div[role=main]\",\n          content: (\n            <>\n              <TitleBody\n                title=\"Interactive story playground\"\n                body={\n                  <>\n                    See how a story renders with different data and state\n                    without touching code.\n                    <br />\n                    Try it out by pressing this button.\n                  </>\n                }\n              />\n              <PulsatingEffect targetSelector=\"#control-primary\" />\n            </>\n          ),\n          placement: \"right\",\n          spotlightClicks: true,\n          floaterProps: {\n            target: \"#control-primary\",\n          },\n          styles: {\n            buttonNext: {\n              display: \"none\",\n            },\n          },\n        },\n        {\n          target: \"#control-primary\",\n          content: (\n            <>\n              <Confetti numberOfPieces={100} />\n              <TitleBody\n                title=\"Congratulations!\"\n                body=\"You've learned how to control your stories interactively. Now: let's explore how to write your first story.\"\n              />\n            </>\n          ),\n          placement: \"right\",\n          disableOverlay: true,\n          locale: {\n            last: \"Next\",\n          },\n        },\n      ];\n\n  return (\n    <Joyride\n      steps={steps}\n      continuous\n      stepIndex={stepIndex}\n      spotlightPadding={0}\n      hideBackButton\n      disableCloseOnEsc\n      disableOverlayClose\n      disableScrolling\n      hideCloseButton\n      callback={(data: CallBackProps) => {\n        if (!isFinalStep && data.status === STATUS.FINISHED) {\n          onFirstTourDone();\n        }\n      }}\n      floaterProps={{\n        styles: {\n          floater: {\n            padding: 0,\n            paddingLeft: 8,\n            paddingTop: 8,\n            filter:\n              \"drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1))\",\n          },\n        },\n      }}\n      // tooltipComponent={Tooltip}\n      styles={{\n        spotlight: {\n          border: \"solid 2px #004c7c\",\n        },\n        tooltip: {\n          maxWidth: 260,\n          borderRadius: 4,\n          padding: 15,\n        },\n        overlay: {\n          backgroundColor: \"rgba(0, 0, 0, 0.48)\",\n        },\n        buttonNext: {\n          ...getStyles(theme),\n          marginTop: 5,\n        },\n        tooltipContent: {\n          paddingTop: 4,\n          padding: 0,\n        },\n        options: {\n          zIndex: 10000,\n          primaryColor: \"#029CFD\",\n        },\n      }}\n    />\n  );\n}\n","import { css, styled } from \"@storybook/theming\";\nimport React, { FC } from \"react\";\n\nexport interface ButtonProps {\n  children: string;\n  onClick?: () => void;\n}\n\nconst Container = styled.button`\n  all: unset;\n  border: 0;\n  border-radius: 0.25rem;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 0.75rem;\n  background: ${({ theme }) => theme.color.secondary};\n  color: ${({ theme }) => theme.color.lightest};\n  height: 32px;\n  font-size: 0.8125rem;\n  font-weight: 700;\n  font-family: ${({ theme }) => theme.typography.fonts.base};\n  transition: all 0.16s ease-in-out;\n  text-decoration: none;\n\n  &:hover {\n    background-color: #0b94eb;\n  }\n\n  &:focus {\n    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.1);\n  }\n`;\n\nexport const getStyles = (theme: any) => css`\n  all: unset;\n  border: 0;\n  border-radius: 0.25rem;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 0.75rem;\n  /* background: ${theme.color.secondary}; */\n  background: red;\n  color: ${theme.color.lightest};\n  height: 32px;\n  font-size: 0.8125rem;\n  font-weight: 700;\n  font-family: ${theme.typography.fonts.base};\n  transition: all 0.16s ease-in-out;\n  text-decoration: none;\n\n  &:hover {\n    background-color: #0b94eb;\n  }\n\n  &:focus {\n    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.1);\n  }\n`;\n\nexport const Button: FC<ButtonProps> = ({ children, onClick, ...rest }) => {\n  return (\n    <Container onClick={onClick} {...rest}>\n      {children}\n    </Container>\n  );\n};\n","import { css, styled } from \"@storybook/theming\";\nimport * as Dialog from \"@radix-ui/react-dialog\";\nimport React from \"react\";\n\nexport const StyledOverlay = styled(Dialog.Overlay)`\n  background-color: rgba(27, 28, 29, 0.48);\n  position: fixed;\n  inset: 0px;\n  width: 100%;\n  height: 100%;\n`;\n\nexport const StyledContent = styled.div<{ width: number; height: number }>(\n  ({ width, height }) => css`\n    background-color: white;\n    border-radius: 6px;\n    box-shadow: rgba(14, 18, 22, 0.35) 0px 10px 38px -10px;\n    position: fixed;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    width: ${width ?? 740}px;\n    height: ${height ? `${height}px` : \"auto\"};\n    max-width: calc(100% - 40px);\n    max-height: 85vh;\n  `\n);\n\nexport const ContentWrapper = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof StyledContent> &\n    React.ComponentProps<typeof Dialog.Content>\n>(({ width, height, children, ...contentProps }, ref) => (\n  <Dialog.Content ref={ref} asChild {...contentProps}>\n    <StyledContent width={width} height={height}>\n      {children}\n    </StyledContent>\n  </Dialog.Content>\n));\n","import React from \"react\";\nimport * as Dialog from \"@radix-ui/react-dialog\";\nimport { ContentWrapper, StyledOverlay } from \"./Modal.styled\";\n\ntype ContentProps = React.ComponentProps<typeof ContentWrapper>;\n\ninterface ModalProps\n  extends Omit<React.ComponentProps<typeof Dialog.Root>, \"children\"> {\n  width?: number;\n  height?: number;\n  children: (props: {\n    Title: typeof Dialog.Title;\n    Description: typeof Dialog.Description;\n    Close: typeof Dialog.Close;\n  }) => React.ReactNode;\n  onEscapeKeyDown?: ContentProps[\"onEscapeKeyDown\"];\n  onInteractOutside?: ContentProps[\"onInteractOutside\"];\n}\n\nexport function Modal({\n  children,\n  width,\n  height,\n  onEscapeKeyDown,\n  onInteractOutside = (ev) => ev.preventDefault(),\n  ...rootProps\n}: ModalProps) {\n  return (\n    <Dialog.Root {...rootProps}>\n      <Dialog.Portal>\n        <StyledOverlay />\n        <ContentWrapper\n          width={width}\n          height={height}\n          onInteractOutside={onInteractOutside}\n          onEscapeKeyDown={onEscapeKeyDown}\n        >\n          {children({\n            Title: Dialog.Title,\n            Description: Dialog.Description,\n            Close: Dialog.Close,\n          })}\n        </ContentWrapper>\n      </Dialog.Portal>\n    </Dialog.Root>\n  );\n}\n","import React from \"react\";\n\nexport function StorybookLogo() {\n  return (\n    <svg\n      width=\"32px\"\n      height=\"40px\"\n      viewBox=\"0 0 256 319\"\n      preserveAspectRatio=\"xMidYMid\"\n    >\n      <defs>\n        <path\n          d=\"M9.87245893,293.324145 L0.0114611411,30.5732167 C-0.314208957,21.8955842 6.33948896,14.5413918 15.0063196,13.9997149 L238.494389,0.0317105427 C247.316188,-0.519651867 254.914637,6.18486163 255.466,15.0066607 C255.486773,15.339032 255.497167,15.6719708 255.497167,16.0049907 L255.497167,302.318596 C255.497167,311.157608 248.331732,318.323043 239.492719,318.323043 C239.253266,318.323043 239.013844,318.317669 238.774632,318.306926 L25.1475605,308.712253 C16.8276309,308.338578 10.1847994,301.646603 9.87245893,293.324145 L9.87245893,293.324145 Z\"\n          id=\"path-1\"\n        ></path>\n      </defs>\n      <g>\n        <mask id=\"mask-2\" fill=\"white\">\n          <use xlinkHref=\"#path-1\"></use>\n        </mask>\n        <use fill=\"#FF4785\" fillRule=\"nonzero\" xlinkHref=\"#path-1\"></use>\n        <path\n          d=\"M188.665358,39.126973 L190.191903,2.41148534 L220.883535,0 L222.205755,37.8634126 C222.251771,39.1811466 221.22084,40.2866846 219.903106,40.3327009 C219.338869,40.3524045 218.785907,40.1715096 218.342409,39.8221376 L206.506729,30.4984116 L192.493574,41.1282444 C191.443077,41.9251106 189.945493,41.7195021 189.148627,40.6690048 C188.813185,40.2267976 188.6423,39.6815326 188.665358,39.126973 Z M149.413703,119.980309 C149.413703,126.206975 191.355678,123.222696 196.986019,118.848893 C196.986019,76.4467826 174.234041,54.1651411 132.57133,54.1651411 C90.9086182,54.1651411 67.5656805,76.7934542 67.5656805,110.735941 C67.5656805,169.85244 147.345341,170.983856 147.345341,203.229219 C147.345341,212.280549 142.913138,217.654777 133.162291,217.654777 C120.456641,217.654777 115.433477,211.165914 116.024438,189.103298 C116.024438,184.317101 67.5656805,182.824962 66.0882793,189.103298 C62.3262146,242.56887 95.6363019,257.990394 133.753251,257.990394 C170.688279,257.990394 199.645341,238.303123 199.645341,202.663511 C199.645341,139.304202 118.683759,141.001326 118.683759,109.604526 C118.683759,96.8760922 128.139127,95.178968 133.753251,95.178968 C139.662855,95.178968 150.300143,96.2205679 149.413703,119.980309 Z\"\n          fill=\"#FFFFFF\"\n          fillRule=\"nonzero\"\n          mask=\"url(#mask-2)\"\n        ></path>\n      </g>\n    </svg>\n  );\n}\n","import { Icons } from \"@storybook/components\";\nimport { keyframes, styled } from \"@storybook/theming\";\n\nexport const ModalContentWrapper = styled.div`\n  border-radius: 5px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  height: 100%;\n  justify-content: space-between;\n`;\n\nexport const TopContent = styled.div`\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n`;\n\nexport const Title = styled.h1`\n  margin: 0;\n  margin-top: 20px;\n  margin-bottom: 5px;\n  color: ${({ theme }) => theme.color.darkest};\n  font-weight: ${({ theme }) => theme.typography.weight.bold};\n  font-size: ${({ theme }) => theme.typography.size.m1}px;\n  line-height: ${({ theme }) => theme.typography.size.m3}px;\n`;\n\nexport const Description = styled.p`\n  margin: 0;\n  margin-bottom: 20px;\n  max-width: 320px;\n  text-align: center;\n  font-size: ${({ theme }) => theme.typography.size.s2}px;\n  font-weight: ${({ theme }) => theme.typography.weight.regular};\n  line-height: ${({ theme }) => theme.typography.size.m1}px;\n  color: ${({ theme }) => theme.color.darker};\n`;\n\nexport const SkipButton = styled.button`\n  all: unset;\n  cursor: pointer;\n  font-size: 13px;\n  color: #798186;\n  padding-bottom: 20px;\n\n  &:focus-visible {\n    outline: auto;\n  }\n`;\n\nexport const StyledIcon = styled(Icons)`\n  margin-left: 2px;\n  height: 10px;\n`;\n\nexport const Background = styled.div`\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: -1;\n  overflow: hidden;\n`;\n\nexport const circle1Anim = keyframes`\n  0% { transform: translate(0px, 0px) }\n  50% { transform: translate(-200px, 0px) }\n  100% { transform: translate(0px, 0px) }\n`;\n\nexport const Circle1 = styled.div`\n  position: absolute;\n  width: 1200px;\n  height: 1200px;\n  left: -200px;\n  top: -900px;\n  background: radial-gradient(\n    circle at center,\n    rgba(253, 255, 147, 1) 0%,\n    rgba(253, 255, 147, 0) 70%\n  );\n  animation: ${circle1Anim} 4s linear infinite;\n  animation-timing-function: ease-in-out;\n  z-index: 3;\n`;\n\nexport const circle2Anim = keyframes`\n  0% { transform: translate(0px, 0px) }\n  50% { transform: translate(400px, 0px) }\n  100% { transform: translate(0px, 0px) }\n`;\n\nexport const Circle2 = styled.div`\n  position: absolute;\n  width: 1200px;\n  height: 1200px;\n  left: -600px;\n  top: -840px;\n  background: radial-gradient(\n    circle at center,\n    rgba(255, 119, 119, 1) 0%,\n    rgba(255, 119, 119, 0) 70%\n  );\n  animation: ${circle2Anim} 6s linear infinite;\n  animation-timing-function: ease-in-out;\n  z-index: 2;\n`;\n\nexport const circle3Anim = keyframes`\n  0% { transform: translate(600px, -40px) }\n  50% { transform: translate(600px, -200px) }\n  100% { transform: translate(600px, -40px) }\n`;\n\nexport const Circle3 = styled.div`\n  position: absolute;\n  width: 1200px;\n  height: 1200px;\n  left: -600px;\n  top: -840px;\n  background: radial-gradient(\n    circle at center,\n    rgba(119, 255, 247, 0.8) 0%,\n    rgba(119, 255, 247, 0) 70%\n  );\n  animation: ${circle3Anim} 4s linear infinite;\n  animation-timing-function: ease-in-out;\n  z-index: 4;\n`;\n","import React from \"react\";\n\nimport { Button } from \"../../components/Button/Button\";\nimport { Modal } from \"../../components/Modal/Modal\";\nimport { StorybookLogo } from \"./StorybookLogo\";\nimport {\n  ModalContentWrapper,\n  SkipButton,\n  StyledIcon,\n  Title,\n  Description,\n  Background,\n  Circle1,\n  Circle2,\n  Circle3,\n  TopContent,\n} from \"./WelcomeModal.styled\";\n\nexport const WelcomeModal = ({\n  onSkip,\n  onProceed,\n}: {\n  onSkip: () => void;\n  onProceed: () => void;\n}) => {\n  return (\n    <Modal width={540} height={430} defaultOpen>\n      {({ Close }) => (\n        <ModalContentWrapper data-chromatic=\"ignore\">\n          <TopContent>\n            <StorybookLogo />\n            <Title>Welcome to Storybook</Title>\n            <Description>\n              Storybook helps you develop UI components. Learn the basics in a\n              few simple steps.\n            </Description>\n            <Button style={{ marginTop: 4 }} onClick={onProceed}>\n              Start your 3 minute tour\n            </Button>\n          </TopContent>\n          <Close asChild>\n            <SkipButton onClick={onSkip}>\n              Skip tour\n              <StyledIcon icon=\"arrowright\" />\n            </SkipButton>\n          </Close>\n          <Background>\n            <Circle1 />\n            <Circle2 />\n            <Circle3 />\n          </Background>\n        </ModalContentWrapper>\n      )}\n    </Modal>\n  );\n};\n","import React from \"react\";\nimport { Button } from \"../../components/Button/Button\";\n\nimport { Modal } from \"../../components/Modal/Modal\";\nimport { StorybookLogo } from \"../WelcomeModal/StorybookLogo\";\nimport { ModalContentWrapper } from \"../WelcomeModal/WelcomeModal.styled\";\n\nexport function WriteStoriesModal({ onFinish }: { onFinish: () => void }) {\n  return (\n    <Modal width={540} defaultOpen>\n      {({ Title, Description }) => (\n        <ModalContentWrapper data-chromatic=\"ignore\">\n          <StorybookLogo />\n          <Title style={{ marginTop: 20 }}>\n            Create your first story (WORK IN PROGRESS)\n          </Title>\n          <Description>\n            Now it's your turn. <br />\n            See how easy it is to create your first story by following these\n            steps below.\n          </Description>\n          <Button style={{ marginTop: 4 }} onClick={onFinish}>\n            Go to story\n          </Button>\n        </ModalContentWrapper>\n      )}\n    </Modal>\n  );\n}\n","import React, { useCallback, useEffect, useState } from \"react\";\nimport { ThemeProvider, ensure, themes } from \"@storybook/theming\";\nimport { STORY_CHANGED, CURRENT_STORY_WAS_SET } from \"@storybook/core-events\";\nimport { type API } from \"@storybook/manager-api\";\n\nimport { GuidedTour } from \"./features/GuidedTour/GuidedTour\";\nimport { WelcomeModal } from \"./features/WelcomeModal/WelcomeModal\";\nimport { WriteStoriesModal } from \"./features/WriteStoriesModal/WriteStoriesModal\";\nimport { Confetti } from \"./components/Confetti/Confetti\";\n\ntype Step =\n  | \"1:Welcome\"\n  | \"2:StorybookTour\"\n  | \"3:WriteYourStory\"\n  | \"4:VisitNewStory\"\n  | \"5:ConfigureYourProject\";\n\nconst theme = ensure(themes.light);\n\nexport default function App({ api }: { api: API }) {\n  const [enabled, setEnabled] = useState(true);\n  const [showConfetti, setShowConfetti] = useState(false);\n  const [step, setStep] = useState<Step>(\"1:Welcome\");\n\n  const skipTour = useCallback(() => {\n    // remove onboarding query parameter from current url\n    const url = new URL(window.location.href);\n    url.searchParams.delete(\"onboarding\");\n    const path = decodeURIComponent(url.searchParams.get(\"path\"));\n    url.search = `?path=${path}`;\n    history.replaceState({}, \"\", url.href);\n    setEnabled(false);\n  }, [setEnabled]);\n\n  useEffect(() => {\n    let stepTimeout: number;\n    if (step === \"4:VisitNewStory\") {\n      stepTimeout = window.setTimeout(() => {\n        setShowConfetti(true);\n        setStep(\"5:ConfigureYourProject\");\n      }, 2000);\n    }\n\n    return () => {\n      clearTimeout(stepTimeout);\n    };\n  }, [step]);\n\n  useEffect(() => {\n    api.once(CURRENT_STORY_WAS_SET, ({ storyId }) => {\n      // make sure the initial state is set correctly:\n      // 1. Selected story is primary button\n      // 2. The addon panel is opened, in the bottom and the controls tab is selected\n      if (storyId !== \"example-button--primary\") {\n        api.selectStory(\"example-button--primary\", undefined, {\n          ref: undefined,\n        });\n      }\n      api.togglePanel(true);\n      api.togglePanelPosition(\"bottom\");\n      api.setSelectedPanel(\"addon-controls\");\n    });\n  }, []);\n\n  useEffect(() => {\n    const onStoryChanged = (storyId: string) => {\n      if (storyId === \"configure-your-project--docs\") {\n        skipTour();\n      }\n    };\n\n    api.on(STORY_CHANGED, onStoryChanged);\n\n    return () => {\n      api.off(STORY_CHANGED, onStoryChanged);\n    };\n  }, []);\n\n  if (!enabled) {\n    return null;\n  }\n\n  return (\n    <ThemeProvider theme={theme}>\n      {showConfetti && (\n        <Confetti\n          numberOfPieces={1000}\n          initialVelocityY={3}\n          recycle={false}\n          onConfettiComplete={(confetti) => {\n            confetti.reset();\n            setShowConfetti(false);\n          }}\n        />\n      )}\n      {step === \"1:Welcome\" && (\n        <WelcomeModal\n          onProceed={() => {\n            setStep(\"2:StorybookTour\");\n          }}\n          onSkip={skipTour}\n        />\n      )}\n      {(step === \"2:StorybookTour\" || step === \"5:ConfigureYourProject\") && (\n        <GuidedTour\n          api={api}\n          isFinalStep={step === \"5:ConfigureYourProject\"}\n          onFirstTourDone={() => {\n            setStep(\"3:WriteYourStory\");\n          }}\n        />\n      )}\n      {step === \"3:WriteYourStory\" && (\n        <WriteStoriesModal\n          onFinish={() => {\n            // TODO: enable this\n            // api.selectStory(\"example-button--warning\");\n            setStep(\"4:VisitNewStory\");\n          }}\n        />\n      )}\n    </ThemeProvider>\n  );\n}\n","import ReactDOM from \"react-dom\";\nimport React, { lazy, Suspense } from \"react\";\nimport { addons } from \"@storybook/manager-api\";\n\nconst App = lazy(() => import(\"./App\"));\n\n// The addon is enabled only when:\n// 1. The onboarding query parameter is present\n// 2. The example button stories are present\naddons.register(\"@storybook/addon-onboarding\", async (api) => {\n  const isOnboarding = api.getUrlState().path === '/onboarding';\n\n  if (!isOnboarding) {\n    return;\n  }\n\n  let hasButtonStories = false;\n  try {\n    const response = await fetch(\"./index.json\");\n    const index = await response.json();\n    hasButtonStories = !!index.entries[\"example-button--primary\"];\n  } catch (e) {}\n\n  if (hasButtonStories) {\n    // Add a new DOM element to document.body, where we will bootstrap our React app\n    const domNode = document.createElement(\"div\");\n\n    domNode.id = \"addon-onboarding\";\n    // Append the new DOM element to document.body\n    document.body.appendChild(domNode);\n\n    // Render the React app\n    ReactDOM.render(\n      <Suspense fallback={<div>Loading...</div>}>\n        <App api={api} />\n      </Suspense>,\n      domNode\n    );\n  }\n});\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-onboarding",
-  "version": "0.0.16--canary.34.0b84104.0",
+  "version": "0.0.16--canary.36c6db4.0",
   "description": "Storybook Addon Onboarding - Introduces a new onboarding experience",
   "keywords": [
     "storybook-addons",
@@ -65,7 +65,7 @@
       "vite.config.ts"
     ],
     "ext": "js,jsx,ts,tsx",
-    "exec": "yarn storybook"
+    "exec": "yarn storybook --ci"
   },
   "devDependencies": {
     "@storybook/addon-essentials": "^7.0.0",