@storybook/nextjs 9.0.0-alpha.0 → 9.0.0-alpha.2

package/dist/{chunk-LS3CVOUD.mjs → chunk-35G53GTV.mjs}

@@ -15,6 +15,6 @@ import { PAGE_SEGMENT_KEY } from 'next/dist/shared/lib/segment';
 import { RouterContext } from 'next/dist/shared/lib/router-context.shared-runtime';
 import { StyleRegistry } from 'styled-jsx';
 
-var preview_exports={};__export(preview_exports,{decorators:()=>decorators,loaders:()=>loaders,parameters:()=>parameters});setConfig(process.env.__NEXT_RUNTIME_CONFIG);var HeadManagerProvider=({children})=>{let headManager=useMemo(initHeadManager,[]);return headManager.getIsSsr=()=>!1,React3__default.createElement(HeadManagerContext.Provider,{value:headManager},children)},head_manager_provider_default=HeadManagerProvider;var HeadManagerDecorator=Story=>React3.createElement(head_manager_provider_default,null,React3.createElement(Story,null));function getSelectedParams(currentTree,params={}){let parallelRoutes=currentTree[1];for(let parallelRoute of Object.values(parallelRoutes)){let segment=parallelRoute[0],isDynamicParameter=Array.isArray(segment),segmentValue=isDynamicParameter?segment[1]:segment;if(!segmentValue||segmentValue.startsWith(PAGE_SEGMENT_KEY))continue;isDynamicParameter&&(segment[2]==="c"||segment[2]==="oc")?params[segment[0]]=segment[1].split("/"):isDynamicParameter&&(params[segment[0]]=segment[1]),params=getSelectedParams(parallelRoute,params);}return params}var getParallelRoutes=segmentsList=>{let segment=segmentsList.shift();return segment?[segment,{children:getParallelRoutes(segmentsList)}]:[]},AppRouterProvider=({children,routeParams})=>{let{pathname,query,segments=[]}=routeParams,tree=[pathname,{children:getParallelRoutes([...segments])}],pathParams=useMemo(()=>getSelectedParams(tree),[tree]),newLazyCacheNode={lazyData:null,rsc:null,prefetchRsc:null,head:null,prefetchHead:null,parallelRoutes:new Map,loading:null};return React3__default.createElement(PathParamsContext.Provider,{value:pathParams},React3__default.createElement(PathnameContext.Provider,{value:pathname},React3__default.createElement(SearchParamsContext.Provider,{value:new URLSearchParams(query)},React3__default.createElement(GlobalLayoutRouterContext.Provider,{value:{changeByServerResponse(){},buildId:"storybook",tree,focusAndScrollRef:{apply:!1,hashFragment:null,segmentPaths:[tree],onlyHashChange:!1},nextUrl:pathname}},React3__default.createElement(AppRouterContext.Provider,{value:getRouter()},React3__default.createElement(LayoutRouterContext.Provider,{value:{childNodes:new Map,tree,parentTree:tree,parentCacheNode:newLazyCacheNode,url:pathname,loading:null}},children))))))};var PageRouterProvider=({children})=>React3__default.createElement(RouterContext.Provider,{value:getRouter$1()},children);var defaultRouterParams={pathname:"/",query:{}},RouterDecorator=(Story,{parameters:parameters2})=>parameters2.nextjs?.appDirectory??!1?AppRouterProvider?React3.createElement(AppRouterProvider,{routeParams:{...defaultRouterParams,...parameters2.nextjs?.navigation}},React3.createElement(RedirectBoundary,null,React3.createElement(Story,null))):null:React3.createElement(PageRouterProvider,null,React3.createElement(Story,null));var StyledJsxDecorator=Story=>React3.createElement(StyleRegistry,null,React3.createElement(Story,null));function addNextHeadCount(){let meta=document.createElement("meta");meta.name="next-head-count",meta.content="0",document.head.appendChild(meta);}function isAsyncClientComponentError(error){return typeof error=="string"&&(error.includes("A component was suspended by an uncached promise.")||error.includes("async/await is not yet supported in Client Components"))}addNextHeadCount();var origConsoleError=globalThis.console.error;globalThis.console.error=(...args)=>{let error=args[0];isNextRouterError(error)||isAsyncClientComponentError(error)||origConsoleError.apply(globalThis.console,args);};globalThis.addEventListener("error",ev=>{if(isNextRouterError(ev.error)||isAsyncClientComponentError(ev.error)){ev.preventDefault();return}});var decorators=[StyledJsxDecorator,ImageDecorator,RouterDecorator,HeadManagerDecorator],loaders=async({globals,parameters:parameters2})=>{let{router,appDirectory}=parameters2.nextjs??{};appDirectory?createNavigation(router):createRouter({locale:globals.locale,...router});},parameters={docs:{source:{excludeDecorators:!0}},react:{rootOptions:{onCaughtError(error){isNextRouterError(error)||console.error(error);}}}};
+var preview_exports={};__export(preview_exports,{decorators:()=>decorators,loaders:()=>loaders,parameters:()=>parameters});setConfig(process.env.__NEXT_RUNTIME_CONFIG);var HeadManagerProvider=({children})=>{let headManager=useMemo(initHeadManager,[]);return headManager.getIsSsr=()=>!1,React3__default.createElement(HeadManagerContext.Provider,{value:headManager},children)},head_manager_provider_default=HeadManagerProvider;var HeadManagerDecorator=Story=>React3.createElement(head_manager_provider_default,null,React3.createElement(Story,null));function getSelectedParams(currentTree,params={}){let parallelRoutes=currentTree[1];for(let parallelRoute of Object.values(parallelRoutes)){let segment=parallelRoute[0],isDynamicParameter=Array.isArray(segment),segmentValue=isDynamicParameter?segment[1]:segment;if(!segmentValue||segmentValue.startsWith(PAGE_SEGMENT_KEY))continue;isDynamicParameter&&(segment[2]==="c"||segment[2]==="oc")?params[segment[0]]=segment[1].split("/"):isDynamicParameter&&(params[segment[0]]=segment[1]),params=getSelectedParams(parallelRoute,params);}return params}var getParallelRoutes=segmentsList=>{let segment=segmentsList.shift();return segment?[segment,{children:getParallelRoutes(segmentsList)}]:[]},AppRouterProvider=({children,routeParams})=>{let{pathname,query,segments=[]}=routeParams,tree=[pathname,{children:getParallelRoutes([...segments])}],pathParams=useMemo(()=>getSelectedParams(tree),[tree]),newLazyCacheNode={lazyData:null,rsc:null,prefetchRsc:null,head:null,prefetchHead:null,parallelRoutes:new Map,loading:null};return React3__default.createElement(PathParamsContext.Provider,{value:pathParams},React3__default.createElement(PathnameContext.Provider,{value:pathname},React3__default.createElement(SearchParamsContext.Provider,{value:new URLSearchParams(query)},React3__default.createElement(GlobalLayoutRouterContext.Provider,{value:{changeByServerResponse(){},buildId:"storybook",tree,focusAndScrollRef:{apply:!1,hashFragment:null,segmentPaths:[tree],onlyHashChange:!1},nextUrl:pathname}},React3__default.createElement(AppRouterContext.Provider,{value:getRouter()},React3__default.createElement(LayoutRouterContext.Provider,{value:{childNodes:new Map,tree,parentTree:tree,parentCacheNode:newLazyCacheNode,url:pathname,loading:null}},children))))))};var PageRouterProvider=({children})=>React3__default.createElement(RouterContext.Provider,{value:getRouter$1()},children);var defaultRouterParams={pathname:"/",query:{}},RouterDecorator=(Story,{parameters:parameters2})=>parameters2.nextjs?.appDirectory??!1?AppRouterProvider?React3.createElement(AppRouterProvider,{routeParams:{...defaultRouterParams,...parameters2.nextjs?.navigation}},React3.createElement(RedirectBoundary,null,React3.createElement(Story,null))):null:React3.createElement(PageRouterProvider,null,React3.createElement(Story,null));var StyledJsxDecorator=Story=>React3.createElement(StyleRegistry,null,React3.createElement(Story,null));function addNextHeadCount(){let meta=document.createElement("meta");meta.name="next-head-count",meta.content="0",document.head.appendChild(meta);}function isAsyncClientComponentError(error){return typeof error=="string"&&(error.includes("Only Server Components can be async at the moment.")||error.includes("A component was suspended by an uncached promise.")||error.includes("async/await is not yet supported in Client Components"))}addNextHeadCount();var origConsoleError=globalThis.console.error;globalThis.console.error=(...args)=>{let error=args[0];isNextRouterError(error)||isAsyncClientComponentError(error)||origConsoleError.apply(globalThis.console,args);};globalThis.addEventListener("error",ev=>{if(isNextRouterError(ev.error)||isAsyncClientComponentError(ev.error)){ev.preventDefault();return}});var decorators=[StyledJsxDecorator,ImageDecorator,RouterDecorator,HeadManagerDecorator],loaders=async({globals,parameters:parameters2})=>{let{router,appDirectory}=parameters2.nextjs??{};appDirectory?createNavigation(router):createRouter({locale:globals.locale,...router});},parameters={docs:{source:{excludeDecorators:!0}},react:{rootOptions:{onCaughtError(error){isNextRouterError(error)||console.error(error);}}}};
 
 export { decorators, loaders, parameters, preview_exports };

package/dist/index.js

@@ -1 +1 @@
-"use strict";var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __getProtoOf=Object.getPrototypeOf,__hasOwnProp=Object.prototype.hasOwnProperty;var __esm=(fn,res)=>function(){return fn&&(res=(0,fn[__getOwnPropNames(fn)[0]])(fn=0)),res};var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toESM=(mod,isNodeMode,target)=>(target=mod!=null?__create(__getProtoOf(mod)):{},__copyProps(isNodeMode||!mod||!mod.__esModule?__defProp(target,"default",{value:mod,enumerable:!0}):target,mod)),__toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var react_18_exports={};__export(react_18_exports,{renderElement:()=>renderElement,unmountElement:()=>unmountElement});function getIsReactActEnvironment(){return globalThis.IS_REACT_ACT_ENVIRONMENT}var React10,ReactDOM,nodes,WithCallback,renderElement,unmountElement,getReactRoot,init_react_18=__esm({"../../lib/react-dom-shim/dist/react-18.mjs"(){"use strict";React10=__toESM(require("react"),1),ReactDOM=__toESM(require("react-dom/client"),1),nodes=new Map;WithCallback=({callback,children})=>{let once=React10.useRef();return React10.useLayoutEffect(()=>{once.current!==callback&&(once.current=callback,callback())},[callback]),children};typeof Promise.withResolvers>"u"&&(Promise.withResolvers=()=>{let resolve=null,reject=null;return{promise:new Promise((res,rej)=>{resolve=res,reject=rej}),resolve,reject}});renderElement=async(node,el,rootOptions)=>{let root=await getReactRoot(el,rootOptions);if(getIsReactActEnvironment()){root.render(node);return}let{promise,resolve}=Promise.withResolvers();return root.render(React10.createElement(WithCallback,{callback:resolve},node)),promise},unmountElement=(el,shouldUseNewRootApi)=>{let root=nodes.get(el);root&&(root.unmount(),nodes.delete(el))},getReactRoot=async(el,rootOptions)=>{let root=nodes.get(el);return root||(root=ReactDOM.createRoot(el,rootOptions),nodes.set(el,root)),root}}});var index_exports={};__export(index_exports,{composeStories:()=>composeStories,composeStory:()=>composeStory,definePreview:()=>definePreview,setProjectAnnotations:()=>setProjectAnnotations});module.exports=__toCommonJS(index_exports);var import_react6=require("@storybook/react");var preview_exports={};__export(preview_exports,{decorators:()=>decorators,loaders:()=>loaders,parameters:()=>parameters});var import_navigation2=require("@storybook/nextjs/navigation.mock"),import_router2=require("@storybook/nextjs/router.mock"),import_is_next_router_error=require("next/dist/client/components/is-next-router-error");var import_config=require("next/config");(0,import_config.setConfig)(process.env.__NEXT_RUNTIME_CONFIG);var React2=__toESM(require("react"));var import_react=__toESM(require("react")),import_head_manager=__toESM(require("next/dist/client/head-manager")),import_head_manager_context=require("next/dist/shared/lib/head-manager-context.shared-runtime"),HeadManagerProvider=({children})=>{let headManager=(0,import_react.useMemo)(import_head_manager.default,[]);return headManager.getIsSsr=()=>!1,import_react.default.createElement(import_head_manager_context.HeadManagerContext.Provider,{value:headManager},children)},head_manager_provider_default=HeadManagerProvider;var HeadManagerDecorator=Story=>React2.createElement(head_manager_provider_default,null,React2.createElement(Story,null));var React3=__toESM(require("react")),import_image_context=require("@storybook/nextjs/dist/image-context"),ImageContext=import_image_context.ImageContext,ImageDecorator=(Story,{parameters:parameters3})=>parameters3.nextjs?.image?React3.createElement(ImageContext.Provider,{value:parameters3.nextjs.image},React3.createElement(Story,null)):React3.createElement(Story,null);var React6=__toESM(require("react")),import_redirect_boundary=require("next/dist/client/components/redirect-boundary");var import_react2=__toESM(require("react")),import_navigation=require("@storybook/nextjs/navigation.mock"),import_app_router_context=require("next/dist/shared/lib/app-router-context.shared-runtime"),import_hooks_client_context=require("next/dist/shared/lib/hooks-client-context.shared-runtime"),import_segment=require("next/dist/shared/lib/segment");function getSelectedParams(currentTree,params={}){let parallelRoutes=currentTree[1];for(let parallelRoute of Object.values(parallelRoutes)){let segment=parallelRoute[0],isDynamicParameter=Array.isArray(segment),segmentValue=isDynamicParameter?segment[1]:segment;if(!segmentValue||segmentValue.startsWith(import_segment.PAGE_SEGMENT_KEY))continue;isDynamicParameter&&(segment[2]==="c"||segment[2]==="oc")?params[segment[0]]=segment[1].split("/"):isDynamicParameter&&(params[segment[0]]=segment[1]),params=getSelectedParams(parallelRoute,params)}return params}var getParallelRoutes=segmentsList=>{let segment=segmentsList.shift();return segment?[segment,{children:getParallelRoutes(segmentsList)}]:[]},AppRouterProvider=({children,routeParams})=>{let{pathname,query,segments=[]}=routeParams,tree=[pathname,{children:getParallelRoutes([...segments])}],pathParams=(0,import_react2.useMemo)(()=>getSelectedParams(tree),[tree]),newLazyCacheNode={lazyData:null,rsc:null,prefetchRsc:null,head:null,prefetchHead:null,parallelRoutes:new Map,loading:null};return import_react2.default.createElement(import_hooks_client_context.PathParamsContext.Provider,{value:pathParams},import_react2.default.createElement(import_hooks_client_context.PathnameContext.Provider,{value:pathname},import_react2.default.createElement(import_hooks_client_context.SearchParamsContext.Provider,{value:new URLSearchParams(query)},import_react2.default.createElement(import_app_router_context.GlobalLayoutRouterContext.Provider,{value:{changeByServerResponse(){},buildId:"storybook",tree,focusAndScrollRef:{apply:!1,hashFragment:null,segmentPaths:[tree],onlyHashChange:!1},nextUrl:pathname}},import_react2.default.createElement(import_app_router_context.AppRouterContext.Provider,{value:(0,import_navigation.getRouter)()},import_react2.default.createElement(import_app_router_context.LayoutRouterContext.Provider,{value:{childNodes:new Map,tree,parentTree:tree,parentCacheNode:newLazyCacheNode,url:pathname,loading:null}},children))))))};var import_react3=__toESM(require("react")),import_router=require("@storybook/nextjs/router.mock"),import_router_context=require("next/dist/shared/lib/router-context.shared-runtime"),PageRouterProvider=({children})=>import_react3.default.createElement(import_router_context.RouterContext.Provider,{value:(0,import_router.getRouter)()},children);var defaultRouterParams={pathname:"/",query:{}},RouterDecorator=(Story,{parameters:parameters3})=>parameters3.nextjs?.appDirectory??!1?AppRouterProvider?React6.createElement(AppRouterProvider,{routeParams:{...defaultRouterParams,...parameters3.nextjs?.navigation}},React6.createElement(import_redirect_boundary.RedirectBoundary,null,React6.createElement(Story,null))):null:React6.createElement(PageRouterProvider,null,React6.createElement(Story,null));var React7=__toESM(require("react")),import_styled_jsx=require("styled-jsx"),StyledJsxDecorator=Story=>React7.createElement(import_styled_jsx.StyleRegistry,null,React7.createElement(Story,null));function addNextHeadCount(){let meta=document.createElement("meta");meta.name="next-head-count",meta.content="0",document.head.appendChild(meta)}function isAsyncClientComponentError(error){return typeof error=="string"&&(error.includes("A component was suspended by an uncached promise.")||error.includes("async/await is not yet supported in Client Components"))}addNextHeadCount();var origConsoleError=globalThis.console.error;globalThis.console.error=(...args)=>{let error=args[0];(0,import_is_next_router_error.isNextRouterError)(error)||isAsyncClientComponentError(error)||origConsoleError.apply(globalThis.console,args)};globalThis.addEventListener("error",ev=>{if((0,import_is_next_router_error.isNextRouterError)(ev.error)||isAsyncClientComponentError(ev.error)){ev.preventDefault();return}});var decorators=[StyledJsxDecorator,ImageDecorator,RouterDecorator,HeadManagerDecorator],loaders=async({globals,parameters:parameters3})=>{let{router,appDirectory}=parameters3.nextjs??{};appDirectory?(0,import_navigation2.createNavigation)(router):(0,import_router2.createRouter)({locale:globals.locale,...router})},parameters={docs:{source:{excludeDecorators:!0}},react:{rootOptions:{onCaughtError(error){(0,import_is_next_router_error.isNextRouterError)(error)||console.error(error)}}}};var import_preview_api2=require("storybook/internal/preview-api");var React13=__toESM(require("react")),import_preview_api=require("storybook/internal/preview-api");var entry_preview_exports={};__export(entry_preview_exports,{beforeAll:()=>beforeAll,decorators:()=>decorators2,mount:()=>mount,parameters:()=>parameters2,render:()=>render,renderToCanvas:()=>renderToCanvas});var React12=__toESM(require("react")),import_semver=__toESM(require("semver"));var React8=__toESM(require("react")),DeprecatedReactTestUtils=__toESM(require("react-dom/test-utils")),clonedReact={...React8},reactAct=typeof clonedReact.act=="function"?clonedReact.act:DeprecatedReactTestUtils.act;function setReactActEnvironment(isReactActEnvironment){globalThis.IS_REACT_ACT_ENVIRONMENT=isReactActEnvironment}function getReactActEnvironment(){return globalThis.IS_REACT_ACT_ENVIRONMENT}function withGlobalActEnvironment(actImplementation){return callback=>{let previousActEnvironment=getReactActEnvironment();setReactActEnvironment(!0);try{let callbackNeedsToBeAwaited=!1,actResult=actImplementation(()=>{let result=callback();return result!==null&&typeof result=="object"&&typeof result.then=="function"&&(callbackNeedsToBeAwaited=!0),result});if(callbackNeedsToBeAwaited){let thenable=actResult;return{then:(resolve,reject)=>{thenable.then(returnValue=>{setReactActEnvironment(previousActEnvironment),resolve(returnValue)},error=>{setReactActEnvironment(previousActEnvironment),reject(error)})}}}else return setReactActEnvironment(previousActEnvironment),actResult}catch(error){throw setReactActEnvironment(previousActEnvironment),error}}}var act2=process.env.NODE_ENV==="production"?cb=>cb():withGlobalActEnvironment(reactAct);var import_react4=__toESM(require("react")),render=(args,context)=>{let{id,component:Component}=context;if(!Component)throw new Error(`Unable to render story ${id} as the component annotation is missing from the default export`);return import_react4.default.createElement(Component,{...args})};var import_react5=__toESM(require("react"));var scope=(()=>{let win;return typeof window<"u"?win=window:typeof globalThis<"u"?win=globalThis:typeof global<"u"?win=global:typeof self<"u"?win=self:win={},win})();var{FRAMEWORK_OPTIONS}=scope,ErrorBoundary=class extends import_react5.Component{constructor(){super(...arguments);this.state={hasError:!1}}static getDerivedStateFromError(){return{hasError:!0}}componentDidMount(){let{hasError}=this.state,{showMain}=this.props;hasError||showMain()}componentDidCatch(err){let{showException}=this.props;showException(err)}render(){let{hasError}=this.state,{children}=this.props;return hasError?null:children}},Wrapper=FRAMEWORK_OPTIONS?.strictMode?import_react5.StrictMode:import_react5.Fragment,actQueue=[],isActing=!1,processActQueue=async()=>{if(isActing||actQueue.length===0)return;isActing=!0;let actTask=actQueue.shift();actTask&&await actTask(),isActing=!1,processActQueue()};async function renderToCanvas({storyContext,unboundStoryFn,showMain,showException,forceRemount},canvasElement){let{renderElement:renderElement2,unmountElement:unmountElement2}=await Promise.resolve().then(()=>(init_react_18(),react_18_exports)),Story=unboundStoryFn,content=storyContext.parameters.__isPortableStory?import_react5.default.createElement(Story,{...storyContext}):import_react5.default.createElement(ErrorBoundary,{showMain,showException},import_react5.default.createElement(Story,{...storyContext})),element=Wrapper?import_react5.default.createElement(Wrapper,null,content):content;return forceRemount&&unmountElement2(canvasElement),await new Promise(async(resolve,reject)=>{actQueue.push(async()=>{try{await act2(async()=>{await renderElement2(element,canvasElement,storyContext?.parameters?.react?.rootOptions)}),resolve()}catch(e){reject(e)}}),processActQueue()}),async()=>{await act2(()=>{unmountElement2(canvasElement)})}}var mount=context=>async ui=>(ui!=null&&(context.originalStoryFn=()=>ui),await context.renderToCanvas(),context.canvas);var parameters2={renderer:"react"},decorators2=[(story,context)=>{if(!context.parameters?.react?.rsc)return story();let major=import_semver.default.major(React12.version),minor=import_semver.default.minor(React12.version);if(major<18||major===18&&minor<3)throw new Error("React Server Components require React >= 18.3");return React12.createElement(React12.Suspense,null,story())}],beforeAll=async()=>{try{let{configure}=await import("@storybook/test");configure({unstable_advanceTimersWrapper:cb=>act2(cb),asyncWrapper:async cb=>{let previousActEnvironment=getReactActEnvironment();setReactActEnvironment(!1);try{let result=await cb();return await new Promise(resolve=>{setTimeout(()=>{resolve()},0),jestFakeTimersAreEnabled()&&jest.advanceTimersByTime(0)}),result}finally{setReactActEnvironment(previousActEnvironment)}},eventWrapper:cb=>{let result;return act2(()=>(result=cb(),result)),result}})}catch{}};function jestFakeTimersAreEnabled(){return typeof jest<"u"&&jest!==null?setTimeout._isMockFunction===!0||Object.prototype.hasOwnProperty.call(setTimeout,"clock"):!1}var INTERNAL_DEFAULT_PROJECT_ANNOTATIONS={...entry_preview_exports,renderToCanvas:async(renderContext,canvasElement)=>{if(renderContext.storyContext.testingLibraryRender==null)return renderToCanvas(renderContext,canvasElement);let{storyContext:{context,unboundStoryFn:Story,testingLibraryRender:render2}}=renderContext,{unmount}=render2(React13.createElement(Story,{...context}),{container:context.canvasElement});return unmount}};function setProjectAnnotations(projectAnnotations){return(0,import_preview_api2.setDefaultProjectAnnotations)(INTERNAL_DEFAULT_PROJECT_ANNOTATIONS2),(0,import_preview_api2.setProjectAnnotations)(projectAnnotations)}var INTERNAL_DEFAULT_PROJECT_ANNOTATIONS2=(0,import_preview_api2.composeConfigs)([INTERNAL_DEFAULT_PROJECT_ANNOTATIONS,preview_exports]);function composeStory(story,componentAnnotations,projectAnnotations,exportsName){return(0,import_preview_api2.composeStory)(story,componentAnnotations,projectAnnotations,globalThis.globalProjectAnnotations??INTERNAL_DEFAULT_PROJECT_ANNOTATIONS2,exportsName)}function composeStories(csfExports,projectAnnotations){return(0,import_preview_api2.composeStories)(csfExports,projectAnnotations,composeStory)}function definePreview(preview){return(0,import_react6.definePreview)({...preview,addons:[preview_exports,...preview.addons??[]]})}0&&(module.exports={composeStories,composeStory,definePreview,setProjectAnnotations});
+"use strict";var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __getProtoOf=Object.getPrototypeOf,__hasOwnProp=Object.prototype.hasOwnProperty;var __esm=(fn,res)=>function(){return fn&&(res=(0,fn[__getOwnPropNames(fn)[0]])(fn=0)),res};var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toESM=(mod,isNodeMode,target)=>(target=mod!=null?__create(__getProtoOf(mod)):{},__copyProps(isNodeMode||!mod||!mod.__esModule?__defProp(target,"default",{value:mod,enumerable:!0}):target,mod)),__toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var react_18_exports={};__export(react_18_exports,{renderElement:()=>renderElement,unmountElement:()=>unmountElement});function getIsReactActEnvironment(){return globalThis.IS_REACT_ACT_ENVIRONMENT}var React10,ReactDOM,nodes,WithCallback,renderElement,unmountElement,getReactRoot,init_react_18=__esm({"../../lib/react-dom-shim/dist/react-18.mjs"(){"use strict";React10=__toESM(require("react"),1),ReactDOM=__toESM(require("react-dom/client"),1),nodes=new Map;WithCallback=({callback,children})=>{let once=React10.useRef();return React10.useLayoutEffect(()=>{once.current!==callback&&(once.current=callback,callback())},[callback]),children};typeof Promise.withResolvers>"u"&&(Promise.withResolvers=()=>{let resolve=null,reject=null;return{promise:new Promise((res,rej)=>{resolve=res,reject=rej}),resolve,reject}});renderElement=async(node,el,rootOptions)=>{let root=await getReactRoot(el,rootOptions);if(getIsReactActEnvironment()){root.render(node);return}let{promise,resolve}=Promise.withResolvers();return root.render(React10.createElement(WithCallback,{callback:resolve},node)),promise},unmountElement=(el,shouldUseNewRootApi)=>{let root=nodes.get(el);root&&(root.unmount(),nodes.delete(el))},getReactRoot=async(el,rootOptions)=>{let root=nodes.get(el);return root||(root=ReactDOM.createRoot(el,rootOptions),nodes.set(el,root)),root}}});var index_exports={};__export(index_exports,{composeStories:()=>composeStories,composeStory:()=>composeStory,definePreview:()=>definePreview,setProjectAnnotations:()=>setProjectAnnotations});module.exports=__toCommonJS(index_exports);var import_react6=require("@storybook/react");var preview_exports={};__export(preview_exports,{decorators:()=>decorators,loaders:()=>loaders,parameters:()=>parameters});var import_navigation2=require("@storybook/nextjs/navigation.mock"),import_router2=require("@storybook/nextjs/router.mock"),import_is_next_router_error=require("next/dist/client/components/is-next-router-error");var import_config=require("next/config");(0,import_config.setConfig)(process.env.__NEXT_RUNTIME_CONFIG);var React2=__toESM(require("react"));var import_react=__toESM(require("react")),import_head_manager=__toESM(require("next/dist/client/head-manager")),import_head_manager_context=require("next/dist/shared/lib/head-manager-context.shared-runtime"),HeadManagerProvider=({children})=>{let headManager=(0,import_react.useMemo)(import_head_manager.default,[]);return headManager.getIsSsr=()=>!1,import_react.default.createElement(import_head_manager_context.HeadManagerContext.Provider,{value:headManager},children)},head_manager_provider_default=HeadManagerProvider;var HeadManagerDecorator=Story=>React2.createElement(head_manager_provider_default,null,React2.createElement(Story,null));var React3=__toESM(require("react")),import_image_context=require("@storybook/nextjs/dist/image-context"),ImageContext=import_image_context.ImageContext,ImageDecorator=(Story,{parameters:parameters3})=>parameters3.nextjs?.image?React3.createElement(ImageContext.Provider,{value:parameters3.nextjs.image},React3.createElement(Story,null)):React3.createElement(Story,null);var React6=__toESM(require("react")),import_redirect_boundary=require("next/dist/client/components/redirect-boundary");var import_react2=__toESM(require("react")),import_navigation=require("@storybook/nextjs/navigation.mock"),import_app_router_context=require("next/dist/shared/lib/app-router-context.shared-runtime"),import_hooks_client_context=require("next/dist/shared/lib/hooks-client-context.shared-runtime"),import_segment=require("next/dist/shared/lib/segment");function getSelectedParams(currentTree,params={}){let parallelRoutes=currentTree[1];for(let parallelRoute of Object.values(parallelRoutes)){let segment=parallelRoute[0],isDynamicParameter=Array.isArray(segment),segmentValue=isDynamicParameter?segment[1]:segment;if(!segmentValue||segmentValue.startsWith(import_segment.PAGE_SEGMENT_KEY))continue;isDynamicParameter&&(segment[2]==="c"||segment[2]==="oc")?params[segment[0]]=segment[1].split("/"):isDynamicParameter&&(params[segment[0]]=segment[1]),params=getSelectedParams(parallelRoute,params)}return params}var getParallelRoutes=segmentsList=>{let segment=segmentsList.shift();return segment?[segment,{children:getParallelRoutes(segmentsList)}]:[]},AppRouterProvider=({children,routeParams})=>{let{pathname,query,segments=[]}=routeParams,tree=[pathname,{children:getParallelRoutes([...segments])}],pathParams=(0,import_react2.useMemo)(()=>getSelectedParams(tree),[tree]),newLazyCacheNode={lazyData:null,rsc:null,prefetchRsc:null,head:null,prefetchHead:null,parallelRoutes:new Map,loading:null};return import_react2.default.createElement(import_hooks_client_context.PathParamsContext.Provider,{value:pathParams},import_react2.default.createElement(import_hooks_client_context.PathnameContext.Provider,{value:pathname},import_react2.default.createElement(import_hooks_client_context.SearchParamsContext.Provider,{value:new URLSearchParams(query)},import_react2.default.createElement(import_app_router_context.GlobalLayoutRouterContext.Provider,{value:{changeByServerResponse(){},buildId:"storybook",tree,focusAndScrollRef:{apply:!1,hashFragment:null,segmentPaths:[tree],onlyHashChange:!1},nextUrl:pathname}},import_react2.default.createElement(import_app_router_context.AppRouterContext.Provider,{value:(0,import_navigation.getRouter)()},import_react2.default.createElement(import_app_router_context.LayoutRouterContext.Provider,{value:{childNodes:new Map,tree,parentTree:tree,parentCacheNode:newLazyCacheNode,url:pathname,loading:null}},children))))))};var import_react3=__toESM(require("react")),import_router=require("@storybook/nextjs/router.mock"),import_router_context=require("next/dist/shared/lib/router-context.shared-runtime"),PageRouterProvider=({children})=>import_react3.default.createElement(import_router_context.RouterContext.Provider,{value:(0,import_router.getRouter)()},children);var defaultRouterParams={pathname:"/",query:{}},RouterDecorator=(Story,{parameters:parameters3})=>parameters3.nextjs?.appDirectory??!1?AppRouterProvider?React6.createElement(AppRouterProvider,{routeParams:{...defaultRouterParams,...parameters3.nextjs?.navigation}},React6.createElement(import_redirect_boundary.RedirectBoundary,null,React6.createElement(Story,null))):null:React6.createElement(PageRouterProvider,null,React6.createElement(Story,null));var React7=__toESM(require("react")),import_styled_jsx=require("styled-jsx"),StyledJsxDecorator=Story=>React7.createElement(import_styled_jsx.StyleRegistry,null,React7.createElement(Story,null));function addNextHeadCount(){let meta=document.createElement("meta");meta.name="next-head-count",meta.content="0",document.head.appendChild(meta)}function isAsyncClientComponentError(error){return typeof error=="string"&&(error.includes("Only Server Components can be async at the moment.")||error.includes("A component was suspended by an uncached promise.")||error.includes("async/await is not yet supported in Client Components"))}addNextHeadCount();var origConsoleError=globalThis.console.error;globalThis.console.error=(...args)=>{let error=args[0];(0,import_is_next_router_error.isNextRouterError)(error)||isAsyncClientComponentError(error)||origConsoleError.apply(globalThis.console,args)};globalThis.addEventListener("error",ev=>{if((0,import_is_next_router_error.isNextRouterError)(ev.error)||isAsyncClientComponentError(ev.error)){ev.preventDefault();return}});var decorators=[StyledJsxDecorator,ImageDecorator,RouterDecorator,HeadManagerDecorator],loaders=async({globals,parameters:parameters3})=>{let{router,appDirectory}=parameters3.nextjs??{};appDirectory?(0,import_navigation2.createNavigation)(router):(0,import_router2.createRouter)({locale:globals.locale,...router})},parameters={docs:{source:{excludeDecorators:!0}},react:{rootOptions:{onCaughtError(error){(0,import_is_next_router_error.isNextRouterError)(error)||console.error(error)}}}};var import_preview_api2=require("storybook/internal/preview-api");var React13=__toESM(require("react")),import_preview_api=require("storybook/internal/preview-api");var entry_preview_exports={};__export(entry_preview_exports,{beforeAll:()=>beforeAll,decorators:()=>decorators2,mount:()=>mount,parameters:()=>parameters2,render:()=>render,renderToCanvas:()=>renderToCanvas});var React12=__toESM(require("react")),import_semver=__toESM(require("semver"));var React8=__toESM(require("react")),DeprecatedReactTestUtils=__toESM(require("react-dom/test-utils")),clonedReact={...React8},reactAct=typeof clonedReact.act=="function"?clonedReact.act:DeprecatedReactTestUtils.act;function setReactActEnvironment(isReactActEnvironment){globalThis.IS_REACT_ACT_ENVIRONMENT=isReactActEnvironment}function getReactActEnvironment(){return globalThis.IS_REACT_ACT_ENVIRONMENT}function withGlobalActEnvironment(actImplementation){return callback=>{let previousActEnvironment=getReactActEnvironment();setReactActEnvironment(!0);try{let callbackNeedsToBeAwaited=!1,actResult=actImplementation(()=>{let result=callback();return result!==null&&typeof result=="object"&&typeof result.then=="function"&&(callbackNeedsToBeAwaited=!0),result});if(callbackNeedsToBeAwaited){let thenable=actResult;return{then:(resolve,reject)=>{thenable.then(returnValue=>{setReactActEnvironment(previousActEnvironment),resolve(returnValue)},error=>{setReactActEnvironment(previousActEnvironment),reject(error)})}}}else return setReactActEnvironment(previousActEnvironment),actResult}catch(error){throw setReactActEnvironment(previousActEnvironment),error}}}var act2=process.env.NODE_ENV==="production"?cb=>cb():withGlobalActEnvironment(reactAct);var import_react4=__toESM(require("react")),render=(args,context)=>{let{id,component:Component}=context;if(!Component)throw new Error(`Unable to render story ${id} as the component annotation is missing from the default export`);return import_react4.default.createElement(Component,{...args})};var import_react5=__toESM(require("react"));var scope=(()=>{let win;return typeof window<"u"?win=window:typeof globalThis<"u"?win=globalThis:typeof global<"u"?win=global:typeof self<"u"?win=self:win={},win})();var{FRAMEWORK_OPTIONS}=scope,ErrorBoundary=class extends import_react5.Component{constructor(){super(...arguments);this.state={hasError:!1}}static getDerivedStateFromError(){return{hasError:!0}}componentDidMount(){let{hasError}=this.state,{showMain}=this.props;hasError||showMain()}componentDidCatch(err){let{showException}=this.props;showException(err)}render(){let{hasError}=this.state,{children}=this.props;return hasError?null:children}},Wrapper=FRAMEWORK_OPTIONS?.strictMode?import_react5.StrictMode:import_react5.Fragment,actQueue=[],isActing=!1,processActQueue=async()=>{if(isActing||actQueue.length===0)return;isActing=!0;let actTask=actQueue.shift();actTask&&await actTask(),isActing=!1,processActQueue()};async function renderToCanvas({storyContext,unboundStoryFn,showMain,showException,forceRemount},canvasElement){let{renderElement:renderElement2,unmountElement:unmountElement2}=await Promise.resolve().then(()=>(init_react_18(),react_18_exports)),Story=unboundStoryFn,content=storyContext.parameters.__isPortableStory?import_react5.default.createElement(Story,{...storyContext}):import_react5.default.createElement(ErrorBoundary,{showMain,showException},import_react5.default.createElement(Story,{...storyContext})),element=Wrapper?import_react5.default.createElement(Wrapper,null,content):content;return forceRemount&&unmountElement2(canvasElement),await new Promise(async(resolve,reject)=>{actQueue.push(async()=>{try{await act2(async()=>{await renderElement2(element,canvasElement,storyContext?.parameters?.react?.rootOptions)}),resolve()}catch(e){reject(e)}}),processActQueue()}),async()=>{await act2(()=>{unmountElement2(canvasElement)})}}var mount=context=>async ui=>(ui!=null&&(context.originalStoryFn=()=>ui),await context.renderToCanvas(),context.canvas);var parameters2={renderer:"react"},decorators2=[(story,context)=>{if(!context.parameters?.react?.rsc)return story();let major=import_semver.default.major(React12.version),minor=import_semver.default.minor(React12.version);if(major<18||major===18&&minor<3)throw new Error("React Server Components require React >= 18.3");return React12.createElement(React12.Suspense,null,story())}],beforeAll=async()=>{try{let{configure}=await import("@storybook/test");configure({unstable_advanceTimersWrapper:cb=>act2(cb),asyncWrapper:async cb=>{let previousActEnvironment=getReactActEnvironment();setReactActEnvironment(!1);try{let result=await cb();return await new Promise(resolve=>{setTimeout(()=>{resolve()},0),jestFakeTimersAreEnabled()&&jest.advanceTimersByTime(0)}),result}finally{setReactActEnvironment(previousActEnvironment)}},eventWrapper:cb=>{let result;return act2(()=>(result=cb(),result)),result}})}catch{}};function jestFakeTimersAreEnabled(){return typeof jest<"u"&&jest!==null?setTimeout._isMockFunction===!0||Object.prototype.hasOwnProperty.call(setTimeout,"clock"):!1}var INTERNAL_DEFAULT_PROJECT_ANNOTATIONS={...entry_preview_exports,renderToCanvas:async(renderContext,canvasElement)=>{if(renderContext.storyContext.testingLibraryRender==null)return renderToCanvas(renderContext,canvasElement);let{storyContext:{context,unboundStoryFn:Story,testingLibraryRender:render2}}=renderContext,{unmount}=render2(React13.createElement(Story,{...context}),{container:context.canvasElement});return unmount}};function setProjectAnnotations(projectAnnotations){return(0,import_preview_api2.setDefaultProjectAnnotations)(INTERNAL_DEFAULT_PROJECT_ANNOTATIONS2),(0,import_preview_api2.setProjectAnnotations)(projectAnnotations)}var INTERNAL_DEFAULT_PROJECT_ANNOTATIONS2=(0,import_preview_api2.composeConfigs)([INTERNAL_DEFAULT_PROJECT_ANNOTATIONS,preview_exports]);function composeStory(story,componentAnnotations,projectAnnotations,exportsName){return(0,import_preview_api2.composeStory)(story,componentAnnotations,projectAnnotations,globalThis.globalProjectAnnotations??INTERNAL_DEFAULT_PROJECT_ANNOTATIONS2,exportsName)}function composeStories(csfExports,projectAnnotations){return(0,import_preview_api2.composeStories)(csfExports,projectAnnotations,composeStory)}function definePreview(preview){return(0,import_react6.__definePreview)({...preview,addons:[preview_exports,...preview.addons??[]]})}0&&(module.exports={composeStories,composeStory,definePreview,setProjectAnnotations});

package/dist/index.mjs

@@ -1,13 +1,13 @@
-import { preview_exports } from './chunk-LS3CVOUD.mjs';
+import { preview_exports } from './chunk-35G53GTV.mjs';
 import './chunk-NQ32RFK2.mjs';
 import { __export } from './chunk-42AJV46F.mjs';
-import { definePreview as definePreview$1 } from '@storybook/react';
+import { __definePreview } from '@storybook/react';
 import { composeConfigs, setDefaultProjectAnnotations, setProjectAnnotations as setProjectAnnotations$1, composeStory as composeStory$1, composeStories as composeStories$1 } from 'storybook/internal/preview-api';
 import * as React3 from 'react';
 import React3__default, { StrictMode, Fragment, Component } from 'react';
 import semver from 'semver';
 import * as DeprecatedReactTestUtils from 'react-dom/test-utils';
 
-var entry_preview_exports={};__export(entry_preview_exports,{beforeAll:()=>beforeAll,decorators:()=>decorators,mount:()=>mount,parameters:()=>parameters,render:()=>render,renderToCanvas:()=>renderToCanvas});var clonedReact={...React3},reactAct=typeof clonedReact.act=="function"?clonedReact.act:DeprecatedReactTestUtils.act;function setReactActEnvironment(isReactActEnvironment){globalThis.IS_REACT_ACT_ENVIRONMENT=isReactActEnvironment;}function getReactActEnvironment(){return globalThis.IS_REACT_ACT_ENVIRONMENT}function withGlobalActEnvironment(actImplementation){return callback=>{let previousActEnvironment=getReactActEnvironment();setReactActEnvironment(!0);try{let callbackNeedsToBeAwaited=!1,actResult=actImplementation(()=>{let result=callback();return result!==null&&typeof result=="object"&&typeof result.then=="function"&&(callbackNeedsToBeAwaited=!0),result});if(callbackNeedsToBeAwaited){let thenable=actResult;return {then:(resolve,reject)=>{thenable.then(returnValue=>{setReactActEnvironment(previousActEnvironment),resolve(returnValue);},error=>{setReactActEnvironment(previousActEnvironment),reject(error);});}}}else return setReactActEnvironment(previousActEnvironment),actResult}catch(error){throw setReactActEnvironment(previousActEnvironment),error}}}var act2=process.env.NODE_ENV==="production"?cb=>cb():withGlobalActEnvironment(reactAct);var render=(args,context)=>{let{id,component:Component}=context;if(!Component)throw new Error(`Unable to render story ${id} as the component annotation is missing from the default export`);return React3__default.createElement(Component,{...args})};var scope=(()=>{let win;return typeof window<"u"?win=window:typeof globalThis<"u"?win=globalThis:typeof global<"u"?win=global:typeof self<"u"?win=self:win={},win})();var{FRAMEWORK_OPTIONS}=scope,ErrorBoundary=class extends Component{constructor(){super(...arguments);this.state={hasError:!1};}static getDerivedStateFromError(){return {hasError:!0}}componentDidMount(){let{hasError}=this.state,{showMain}=this.props;hasError||showMain();}componentDidCatch(err){let{showException}=this.props;showException(err);}render(){let{hasError}=this.state,{children}=this.props;return hasError?null:children}},Wrapper=FRAMEWORK_OPTIONS?.strictMode?StrictMode:Fragment,actQueue=[],isActing=!1,processActQueue=async()=>{if(isActing||actQueue.length===0)return;isActing=!0;let actTask=actQueue.shift();actTask&&await actTask(),isActing=!1,processActQueue();};async function renderToCanvas({storyContext,unboundStoryFn,showMain,showException,forceRemount},canvasElement){let{renderElement,unmountElement}=await import('./react-18-T4ABSJCR.mjs'),Story=unboundStoryFn,content=storyContext.parameters.__isPortableStory?React3__default.createElement(Story,{...storyContext}):React3__default.createElement(ErrorBoundary,{showMain,showException},React3__default.createElement(Story,{...storyContext})),element=Wrapper?React3__default.createElement(Wrapper,null,content):content;return forceRemount&&unmountElement(canvasElement),await new Promise(async(resolve,reject)=>{actQueue.push(async()=>{try{await act2(async()=>{await renderElement(element,canvasElement,storyContext?.parameters?.react?.rootOptions);}),resolve();}catch(e){reject(e);}}),processActQueue();}),async()=>{await act2(()=>{unmountElement(canvasElement);});}}var mount=context=>async ui=>(ui!=null&&(context.originalStoryFn=()=>ui),await context.renderToCanvas(),context.canvas);var parameters={renderer:"react"},decorators=[(story,context)=>{if(!context.parameters?.react?.rsc)return story();let major=semver.major(React3.version),minor=semver.minor(React3.version);if(major<18||major===18&&minor<3)throw new Error("React Server Components require React >= 18.3");return React3.createElement(React3.Suspense,null,story())}],beforeAll=async()=>{try{let{configure}=await import('@storybook/test');configure({unstable_advanceTimersWrapper:cb=>act2(cb),asyncWrapper:async cb=>{let previousActEnvironment=getReactActEnvironment();setReactActEnvironment(!1);try{let result=await cb();return await new Promise(resolve=>{setTimeout(()=>{resolve();},0),jestFakeTimersAreEnabled()&&jest.advanceTimersByTime(0);}),result}finally{setReactActEnvironment(previousActEnvironment);}},eventWrapper:cb=>{let result;return act2(()=>(result=cb(),result)),result}});}catch{}};function jestFakeTimersAreEnabled(){return typeof jest<"u"&&jest!==null?setTimeout._isMockFunction===!0||Object.prototype.hasOwnProperty.call(setTimeout,"clock"):!1}var INTERNAL_DEFAULT_PROJECT_ANNOTATIONS={...entry_preview_exports,renderToCanvas:async(renderContext,canvasElement)=>{if(renderContext.storyContext.testingLibraryRender==null)return renderToCanvas(renderContext,canvasElement);let{storyContext:{context,unboundStoryFn:Story,testingLibraryRender:render2}}=renderContext,{unmount}=render2(React3.createElement(Story,{...context}),{container:context.canvasElement});return unmount}};function setProjectAnnotations(projectAnnotations){return setDefaultProjectAnnotations(INTERNAL_DEFAULT_PROJECT_ANNOTATIONS2),setProjectAnnotations$1(projectAnnotations)}var INTERNAL_DEFAULT_PROJECT_ANNOTATIONS2=composeConfigs([INTERNAL_DEFAULT_PROJECT_ANNOTATIONS,preview_exports]);function composeStory(story,componentAnnotations,projectAnnotations,exportsName){return composeStory$1(story,componentAnnotations,projectAnnotations,globalThis.globalProjectAnnotations??INTERNAL_DEFAULT_PROJECT_ANNOTATIONS2,exportsName)}function composeStories(csfExports,projectAnnotations){return composeStories$1(csfExports,projectAnnotations,composeStory)}function definePreview(preview){return definePreview$1({...preview,addons:[preview_exports,...preview.addons??[]]})}
+var entry_preview_exports={};__export(entry_preview_exports,{beforeAll:()=>beforeAll,decorators:()=>decorators,mount:()=>mount,parameters:()=>parameters,render:()=>render,renderToCanvas:()=>renderToCanvas});var clonedReact={...React3},reactAct=typeof clonedReact.act=="function"?clonedReact.act:DeprecatedReactTestUtils.act;function setReactActEnvironment(isReactActEnvironment){globalThis.IS_REACT_ACT_ENVIRONMENT=isReactActEnvironment;}function getReactActEnvironment(){return globalThis.IS_REACT_ACT_ENVIRONMENT}function withGlobalActEnvironment(actImplementation){return callback=>{let previousActEnvironment=getReactActEnvironment();setReactActEnvironment(!0);try{let callbackNeedsToBeAwaited=!1,actResult=actImplementation(()=>{let result=callback();return result!==null&&typeof result=="object"&&typeof result.then=="function"&&(callbackNeedsToBeAwaited=!0),result});if(callbackNeedsToBeAwaited){let thenable=actResult;return {then:(resolve,reject)=>{thenable.then(returnValue=>{setReactActEnvironment(previousActEnvironment),resolve(returnValue);},error=>{setReactActEnvironment(previousActEnvironment),reject(error);});}}}else return setReactActEnvironment(previousActEnvironment),actResult}catch(error){throw setReactActEnvironment(previousActEnvironment),error}}}var act2=process.env.NODE_ENV==="production"?cb=>cb():withGlobalActEnvironment(reactAct);var render=(args,context)=>{let{id,component:Component}=context;if(!Component)throw new Error(`Unable to render story ${id} as the component annotation is missing from the default export`);return React3__default.createElement(Component,{...args})};var scope=(()=>{let win;return typeof window<"u"?win=window:typeof globalThis<"u"?win=globalThis:typeof global<"u"?win=global:typeof self<"u"?win=self:win={},win})();var{FRAMEWORK_OPTIONS}=scope,ErrorBoundary=class extends Component{constructor(){super(...arguments);this.state={hasError:!1};}static getDerivedStateFromError(){return {hasError:!0}}componentDidMount(){let{hasError}=this.state,{showMain}=this.props;hasError||showMain();}componentDidCatch(err){let{showException}=this.props;showException(err);}render(){let{hasError}=this.state,{children}=this.props;return hasError?null:children}},Wrapper=FRAMEWORK_OPTIONS?.strictMode?StrictMode:Fragment,actQueue=[],isActing=!1,processActQueue=async()=>{if(isActing||actQueue.length===0)return;isActing=!0;let actTask=actQueue.shift();actTask&&await actTask(),isActing=!1,processActQueue();};async function renderToCanvas({storyContext,unboundStoryFn,showMain,showException,forceRemount},canvasElement){let{renderElement,unmountElement}=await import('./react-18-T4ABSJCR.mjs'),Story=unboundStoryFn,content=storyContext.parameters.__isPortableStory?React3__default.createElement(Story,{...storyContext}):React3__default.createElement(ErrorBoundary,{showMain,showException},React3__default.createElement(Story,{...storyContext})),element=Wrapper?React3__default.createElement(Wrapper,null,content):content;return forceRemount&&unmountElement(canvasElement),await new Promise(async(resolve,reject)=>{actQueue.push(async()=>{try{await act2(async()=>{await renderElement(element,canvasElement,storyContext?.parameters?.react?.rootOptions);}),resolve();}catch(e){reject(e);}}),processActQueue();}),async()=>{await act2(()=>{unmountElement(canvasElement);});}}var mount=context=>async ui=>(ui!=null&&(context.originalStoryFn=()=>ui),await context.renderToCanvas(),context.canvas);var parameters={renderer:"react"},decorators=[(story,context)=>{if(!context.parameters?.react?.rsc)return story();let major=semver.major(React3.version),minor=semver.minor(React3.version);if(major<18||major===18&&minor<3)throw new Error("React Server Components require React >= 18.3");return React3.createElement(React3.Suspense,null,story())}],beforeAll=async()=>{try{let{configure}=await import('@storybook/test');configure({unstable_advanceTimersWrapper:cb=>act2(cb),asyncWrapper:async cb=>{let previousActEnvironment=getReactActEnvironment();setReactActEnvironment(!1);try{let result=await cb();return await new Promise(resolve=>{setTimeout(()=>{resolve();},0),jestFakeTimersAreEnabled()&&jest.advanceTimersByTime(0);}),result}finally{setReactActEnvironment(previousActEnvironment);}},eventWrapper:cb=>{let result;return act2(()=>(result=cb(),result)),result}});}catch{}};function jestFakeTimersAreEnabled(){return typeof jest<"u"&&jest!==null?setTimeout._isMockFunction===!0||Object.prototype.hasOwnProperty.call(setTimeout,"clock"):!1}var INTERNAL_DEFAULT_PROJECT_ANNOTATIONS={...entry_preview_exports,renderToCanvas:async(renderContext,canvasElement)=>{if(renderContext.storyContext.testingLibraryRender==null)return renderToCanvas(renderContext,canvasElement);let{storyContext:{context,unboundStoryFn:Story,testingLibraryRender:render2}}=renderContext,{unmount}=render2(React3.createElement(Story,{...context}),{container:context.canvasElement});return unmount}};function setProjectAnnotations(projectAnnotations){return setDefaultProjectAnnotations(INTERNAL_DEFAULT_PROJECT_ANNOTATIONS2),setProjectAnnotations$1(projectAnnotations)}var INTERNAL_DEFAULT_PROJECT_ANNOTATIONS2=composeConfigs([INTERNAL_DEFAULT_PROJECT_ANNOTATIONS,preview_exports]);function composeStory(story,componentAnnotations,projectAnnotations,exportsName){return composeStory$1(story,componentAnnotations,projectAnnotations,globalThis.globalProjectAnnotations??INTERNAL_DEFAULT_PROJECT_ANNOTATIONS2,exportsName)}function composeStories(csfExports,projectAnnotations){return composeStories$1(csfExports,projectAnnotations,composeStory)}function definePreview(preview){return __definePreview({...preview,addons:[preview_exports,...preview.addons??[]]})}
 
 export { composeStories, composeStory, definePreview, setProjectAnnotations };

package/dist/preview.js

@@ -1 +1 @@
-"use strict";var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __getProtoOf=Object.getPrototypeOf,__hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toESM=(mod,isNodeMode,target)=>(target=mod!=null?__create(__getProtoOf(mod)):{},__copyProps(isNodeMode||!mod||!mod.__esModule?__defProp(target,"default",{value:mod,enumerable:!0}):target,mod)),__toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var preview_exports={};__export(preview_exports,{decorators:()=>decorators,loaders:()=>loaders,parameters:()=>parameters});module.exports=__toCommonJS(preview_exports);var import_navigation2=require("@storybook/nextjs/navigation.mock"),import_router2=require("@storybook/nextjs/router.mock"),import_is_next_router_error=require("next/dist/client/components/is-next-router-error");var import_config=require("next/config");(0,import_config.setConfig)(process.env.__NEXT_RUNTIME_CONFIG);var React2=__toESM(require("react"));var import_react=__toESM(require("react")),import_head_manager=__toESM(require("next/dist/client/head-manager")),import_head_manager_context=require("next/dist/shared/lib/head-manager-context.shared-runtime"),HeadManagerProvider=({children})=>{let headManager=(0,import_react.useMemo)(import_head_manager.default,[]);return headManager.getIsSsr=()=>!1,import_react.default.createElement(import_head_manager_context.HeadManagerContext.Provider,{value:headManager},children)},head_manager_provider_default=HeadManagerProvider;var HeadManagerDecorator=Story=>React2.createElement(head_manager_provider_default,null,React2.createElement(Story,null));var React3=__toESM(require("react")),import_image_context=require("@storybook/nextjs/dist/image-context"),ImageContext=import_image_context.ImageContext,ImageDecorator=(Story,{parameters:parameters2})=>parameters2.nextjs?.image?React3.createElement(ImageContext.Provider,{value:parameters2.nextjs.image},React3.createElement(Story,null)):React3.createElement(Story,null);var React6=__toESM(require("react")),import_redirect_boundary=require("next/dist/client/components/redirect-boundary");var import_react2=__toESM(require("react")),import_navigation=require("@storybook/nextjs/navigation.mock"),import_app_router_context=require("next/dist/shared/lib/app-router-context.shared-runtime"),import_hooks_client_context=require("next/dist/shared/lib/hooks-client-context.shared-runtime"),import_segment=require("next/dist/shared/lib/segment");function getSelectedParams(currentTree,params={}){let parallelRoutes=currentTree[1];for(let parallelRoute of Object.values(parallelRoutes)){let segment=parallelRoute[0],isDynamicParameter=Array.isArray(segment),segmentValue=isDynamicParameter?segment[1]:segment;if(!segmentValue||segmentValue.startsWith(import_segment.PAGE_SEGMENT_KEY))continue;isDynamicParameter&&(segment[2]==="c"||segment[2]==="oc")?params[segment[0]]=segment[1].split("/"):isDynamicParameter&&(params[segment[0]]=segment[1]),params=getSelectedParams(parallelRoute,params)}return params}var getParallelRoutes=segmentsList=>{let segment=segmentsList.shift();return segment?[segment,{children:getParallelRoutes(segmentsList)}]:[]},AppRouterProvider=({children,routeParams})=>{let{pathname,query,segments=[]}=routeParams,tree=[pathname,{children:getParallelRoutes([...segments])}],pathParams=(0,import_react2.useMemo)(()=>getSelectedParams(tree),[tree]),newLazyCacheNode={lazyData:null,rsc:null,prefetchRsc:null,head:null,prefetchHead:null,parallelRoutes:new Map,loading:null};return import_react2.default.createElement(import_hooks_client_context.PathParamsContext.Provider,{value:pathParams},import_react2.default.createElement(import_hooks_client_context.PathnameContext.Provider,{value:pathname},import_react2.default.createElement(import_hooks_client_context.SearchParamsContext.Provider,{value:new URLSearchParams(query)},import_react2.default.createElement(import_app_router_context.GlobalLayoutRouterContext.Provider,{value:{changeByServerResponse(){},buildId:"storybook",tree,focusAndScrollRef:{apply:!1,hashFragment:null,segmentPaths:[tree],onlyHashChange:!1},nextUrl:pathname}},import_react2.default.createElement(import_app_router_context.AppRouterContext.Provider,{value:(0,import_navigation.getRouter)()},import_react2.default.createElement(import_app_router_context.LayoutRouterContext.Provider,{value:{childNodes:new Map,tree,parentTree:tree,parentCacheNode:newLazyCacheNode,url:pathname,loading:null}},children))))))};var import_react3=__toESM(require("react")),import_router=require("@storybook/nextjs/router.mock"),import_router_context=require("next/dist/shared/lib/router-context.shared-runtime"),PageRouterProvider=({children})=>import_react3.default.createElement(import_router_context.RouterContext.Provider,{value:(0,import_router.getRouter)()},children);var defaultRouterParams={pathname:"/",query:{}},RouterDecorator=(Story,{parameters:parameters2})=>parameters2.nextjs?.appDirectory??!1?AppRouterProvider?React6.createElement(AppRouterProvider,{routeParams:{...defaultRouterParams,...parameters2.nextjs?.navigation}},React6.createElement(import_redirect_boundary.RedirectBoundary,null,React6.createElement(Story,null))):null:React6.createElement(PageRouterProvider,null,React6.createElement(Story,null));var React7=__toESM(require("react")),import_styled_jsx=require("styled-jsx"),StyledJsxDecorator=Story=>React7.createElement(import_styled_jsx.StyleRegistry,null,React7.createElement(Story,null));function addNextHeadCount(){let meta=document.createElement("meta");meta.name="next-head-count",meta.content="0",document.head.appendChild(meta)}function isAsyncClientComponentError(error){return typeof error=="string"&&(error.includes("A component was suspended by an uncached promise.")||error.includes("async/await is not yet supported in Client Components"))}addNextHeadCount();var origConsoleError=globalThis.console.error;globalThis.console.error=(...args)=>{let error=args[0];(0,import_is_next_router_error.isNextRouterError)(error)||isAsyncClientComponentError(error)||origConsoleError.apply(globalThis.console,args)};globalThis.addEventListener("error",ev=>{if((0,import_is_next_router_error.isNextRouterError)(ev.error)||isAsyncClientComponentError(ev.error)){ev.preventDefault();return}});var decorators=[StyledJsxDecorator,ImageDecorator,RouterDecorator,HeadManagerDecorator],loaders=async({globals,parameters:parameters2})=>{let{router,appDirectory}=parameters2.nextjs??{};appDirectory?(0,import_navigation2.createNavigation)(router):(0,import_router2.createRouter)({locale:globals.locale,...router})},parameters={docs:{source:{excludeDecorators:!0}},react:{rootOptions:{onCaughtError(error){(0,import_is_next_router_error.isNextRouterError)(error)||console.error(error)}}}};0&&(module.exports={decorators,loaders,parameters});
+"use strict";var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __getProtoOf=Object.getPrototypeOf,__hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toESM=(mod,isNodeMode,target)=>(target=mod!=null?__create(__getProtoOf(mod)):{},__copyProps(isNodeMode||!mod||!mod.__esModule?__defProp(target,"default",{value:mod,enumerable:!0}):target,mod)),__toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var preview_exports={};__export(preview_exports,{decorators:()=>decorators,loaders:()=>loaders,parameters:()=>parameters});module.exports=__toCommonJS(preview_exports);var import_navigation2=require("@storybook/nextjs/navigation.mock"),import_router2=require("@storybook/nextjs/router.mock"),import_is_next_router_error=require("next/dist/client/components/is-next-router-error");var import_config=require("next/config");(0,import_config.setConfig)(process.env.__NEXT_RUNTIME_CONFIG);var React2=__toESM(require("react"));var import_react=__toESM(require("react")),import_head_manager=__toESM(require("next/dist/client/head-manager")),import_head_manager_context=require("next/dist/shared/lib/head-manager-context.shared-runtime"),HeadManagerProvider=({children})=>{let headManager=(0,import_react.useMemo)(import_head_manager.default,[]);return headManager.getIsSsr=()=>!1,import_react.default.createElement(import_head_manager_context.HeadManagerContext.Provider,{value:headManager},children)},head_manager_provider_default=HeadManagerProvider;var HeadManagerDecorator=Story=>React2.createElement(head_manager_provider_default,null,React2.createElement(Story,null));var React3=__toESM(require("react")),import_image_context=require("@storybook/nextjs/dist/image-context"),ImageContext=import_image_context.ImageContext,ImageDecorator=(Story,{parameters:parameters2})=>parameters2.nextjs?.image?React3.createElement(ImageContext.Provider,{value:parameters2.nextjs.image},React3.createElement(Story,null)):React3.createElement(Story,null);var React6=__toESM(require("react")),import_redirect_boundary=require("next/dist/client/components/redirect-boundary");var import_react2=__toESM(require("react")),import_navigation=require("@storybook/nextjs/navigation.mock"),import_app_router_context=require("next/dist/shared/lib/app-router-context.shared-runtime"),import_hooks_client_context=require("next/dist/shared/lib/hooks-client-context.shared-runtime"),import_segment=require("next/dist/shared/lib/segment");function getSelectedParams(currentTree,params={}){let parallelRoutes=currentTree[1];for(let parallelRoute of Object.values(parallelRoutes)){let segment=parallelRoute[0],isDynamicParameter=Array.isArray(segment),segmentValue=isDynamicParameter?segment[1]:segment;if(!segmentValue||segmentValue.startsWith(import_segment.PAGE_SEGMENT_KEY))continue;isDynamicParameter&&(segment[2]==="c"||segment[2]==="oc")?params[segment[0]]=segment[1].split("/"):isDynamicParameter&&(params[segment[0]]=segment[1]),params=getSelectedParams(parallelRoute,params)}return params}var getParallelRoutes=segmentsList=>{let segment=segmentsList.shift();return segment?[segment,{children:getParallelRoutes(segmentsList)}]:[]},AppRouterProvider=({children,routeParams})=>{let{pathname,query,segments=[]}=routeParams,tree=[pathname,{children:getParallelRoutes([...segments])}],pathParams=(0,import_react2.useMemo)(()=>getSelectedParams(tree),[tree]),newLazyCacheNode={lazyData:null,rsc:null,prefetchRsc:null,head:null,prefetchHead:null,parallelRoutes:new Map,loading:null};return import_react2.default.createElement(import_hooks_client_context.PathParamsContext.Provider,{value:pathParams},import_react2.default.createElement(import_hooks_client_context.PathnameContext.Provider,{value:pathname},import_react2.default.createElement(import_hooks_client_context.SearchParamsContext.Provider,{value:new URLSearchParams(query)},import_react2.default.createElement(import_app_router_context.GlobalLayoutRouterContext.Provider,{value:{changeByServerResponse(){},buildId:"storybook",tree,focusAndScrollRef:{apply:!1,hashFragment:null,segmentPaths:[tree],onlyHashChange:!1},nextUrl:pathname}},import_react2.default.createElement(import_app_router_context.AppRouterContext.Provider,{value:(0,import_navigation.getRouter)()},import_react2.default.createElement(import_app_router_context.LayoutRouterContext.Provider,{value:{childNodes:new Map,tree,parentTree:tree,parentCacheNode:newLazyCacheNode,url:pathname,loading:null}},children))))))};var import_react3=__toESM(require("react")),import_router=require("@storybook/nextjs/router.mock"),import_router_context=require("next/dist/shared/lib/router-context.shared-runtime"),PageRouterProvider=({children})=>import_react3.default.createElement(import_router_context.RouterContext.Provider,{value:(0,import_router.getRouter)()},children);var defaultRouterParams={pathname:"/",query:{}},RouterDecorator=(Story,{parameters:parameters2})=>parameters2.nextjs?.appDirectory??!1?AppRouterProvider?React6.createElement(AppRouterProvider,{routeParams:{...defaultRouterParams,...parameters2.nextjs?.navigation}},React6.createElement(import_redirect_boundary.RedirectBoundary,null,React6.createElement(Story,null))):null:React6.createElement(PageRouterProvider,null,React6.createElement(Story,null));var React7=__toESM(require("react")),import_styled_jsx=require("styled-jsx"),StyledJsxDecorator=Story=>React7.createElement(import_styled_jsx.StyleRegistry,null,React7.createElement(Story,null));function addNextHeadCount(){let meta=document.createElement("meta");meta.name="next-head-count",meta.content="0",document.head.appendChild(meta)}function isAsyncClientComponentError(error){return typeof error=="string"&&(error.includes("Only Server Components can be async at the moment.")||error.includes("A component was suspended by an uncached promise.")||error.includes("async/await is not yet supported in Client Components"))}addNextHeadCount();var origConsoleError=globalThis.console.error;globalThis.console.error=(...args)=>{let error=args[0];(0,import_is_next_router_error.isNextRouterError)(error)||isAsyncClientComponentError(error)||origConsoleError.apply(globalThis.console,args)};globalThis.addEventListener("error",ev=>{if((0,import_is_next_router_error.isNextRouterError)(ev.error)||isAsyncClientComponentError(ev.error)){ev.preventDefault();return}});var decorators=[StyledJsxDecorator,ImageDecorator,RouterDecorator,HeadManagerDecorator],loaders=async({globals,parameters:parameters2})=>{let{router,appDirectory}=parameters2.nextjs??{};appDirectory?(0,import_navigation2.createNavigation)(router):(0,import_router2.createRouter)({locale:globals.locale,...router})},parameters={docs:{source:{excludeDecorators:!0}},react:{rootOptions:{onCaughtError(error){(0,import_is_next_router_error.isNextRouterError)(error)||console.error(error)}}}};0&&(module.exports={decorators,loaders,parameters});

package/dist/preview.mjs

@@ -1,3 +1,3 @@
-export { decorators, loaders, parameters } from './chunk-LS3CVOUD.mjs';
+export { decorators, loaders, parameters } from './chunk-35G53GTV.mjs';
 import './chunk-NQ32RFK2.mjs';
 import './chunk-42AJV46F.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/nextjs",
-  "version": "9.0.0-alpha.0",
+  "version": "9.0.0-alpha.2",
   "description": "Storybook for Next.js",
   "keywords": [
     "storybook",
@@ -153,10 +153,10 @@
     "@babel/preset-typescript": "^7.24.1",
     "@babel/runtime": "^7.24.4",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.11",
-    "@storybook/builder-webpack5": "9.0.0-alpha.0",
-    "@storybook/preset-react-webpack": "9.0.0-alpha.0",
-    "@storybook/react": "9.0.0-alpha.0",
-    "@storybook/test": "9.0.0-alpha.0",
+    "@storybook/builder-webpack5": "9.0.0-alpha.2",
+    "@storybook/preset-react-webpack": "9.0.0-alpha.2",
+    "@storybook/react": "9.0.0-alpha.2",
+    "@storybook/test": "9.0.0-alpha.2",
     "@types/semver": "^7.3.4",
     "babel-loader": "^9.1.3",
     "css-loader": "^6.7.3",
@@ -193,7 +193,7 @@
     "next": "^13.5.0 || ^14.0.0 || ^15.0.0",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
-    "storybook": "^9.0.0-alpha.0",
+    "storybook": "^9.0.0-alpha.2",
     "webpack": "^5.0.0"
   },
   "peerDependenciesMeta": {

package/template/cli/ts-3-8/Button.stories.ts

@@ -1,53 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { fn } from '@storybook/test';
-
-import { Button } from './Button';
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-const meta: Meta<typeof Button> = {
-  title: 'Example/Button',
-  component: Button,
-  parameters: {
-    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
-    layout: 'centered',
-  },
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
-  tags: ['autodocs'],
-  // More on argTypes: https://storybook.js.org/docs/api/argtypes
-  argTypes: {
-    backgroundColor: { control: 'color' },
-  },
-  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
-  args: { onClick: fn() },
-};
-
-export default meta;
-type Story = StoryObj<typeof Button>;
-
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
-export const Primary: Story = {
-  args: {
-    primary: true,
-    label: 'Button',
-  },
-};
-
-export const Secondary: Story = {
-  args: {
-    label: 'Button',
-  },
-};
-
-export const Large: Story = {
-  args: {
-    size: 'large',
-    label: 'Button',
-  },
-};
-
-export const Small: Story = {
-  args: {
-    size: 'small',
-    label: 'Button',
-  },
-};

package/template/cli/ts-3-8/Button.tsx

@@ -1,41 +0,0 @@
-import React from 'react';
-
-import './button.css';
-
-export interface ButtonProps {
-  /** Is this the principal call to action on the page? */
-  primary?: boolean;
-  /** What background color to use */
-  backgroundColor?: string;
-  /** How large should the button be? */
-  size?: 'small' | 'medium' | 'large';
-  /** Button contents */
-  label: string;
-  /** Optional click handler */
-  onClick?: () => void;
-}
-
-/** Primary UI component for user interaction */
-export const Button = ({
-  primary = false,
-  size = 'medium',
-  backgroundColor,
-  label,
-  ...props
-}: ButtonProps) => {
-  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
-  return (
-    <button
-      type="button"
-      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
-      {...props}
-    >
-      {label}
-      <style jsx>{`
-        button {
-          background-color: ${backgroundColor};
-        }
-      `}</style>
-    </button>
-  );
-};

package/template/cli/ts-3-8/Configure.mdx

@@ -1,446 +0,0 @@
-import { Meta } from "@storybook/blocks";
-import Image from "next/image";
-
-import Github from "./assets/github.svg";
-import Discord from "./assets/discord.svg";
-import Youtube from "./assets/youtube.svg";
-import Tutorials from "./assets/tutorials.svg";
-import Styling from "./assets/styling.png";
-import Context from "./assets/context.png";
-import Assets from "./assets/assets.png";
-import Docs from "./assets/docs.png";
-import Share from "./assets/share.png";
-import FigmaPlugin from "./assets/figma-plugin.png";
-import Testing from "./assets/testing.png";
-import Accessibility from "./assets/accessibility.png";
-import Theming from "./assets/theming.png";
-import AddonLibrary from "./assets/addon-library.png";
-
-export const RightArrow = () => <svg 
-    viewBox="0 0 14 14" 
-    width="8px" 
-    height="14px" 
-    style={{ 
-      marginLeft: '4px',
-      display: 'inline-block',
-      shapeRendering: 'inherit',
-      verticalAlign: 'middle',
-      fill: 'currentColor',
-      'path fill': 'currentColor'
-    }}
->
-  <path d="m11.1 7.35-5.5 5.5a.5.5 0 0 1-.7-.7L10.04 7 4.9 1.85a.5.5 0 1 1 .7-.7l5.5 5.5c.2.2.2.5 0 .7Z" />
-</svg>
-
-<Meta title="Configure your project" />
-
-<div className="sb-container">
-  <div className='sb-section-title'>
-    # Configure your project
-
-    Because Storybook works separately from your app, you'll need to configure it for your specific stack and setup. Below, explore guides for configuring Storybook with popular frameworks and tools. If you get stuck, learn how you can ask for help from our community.
-  </div>
-  <div className="sb-section">
-    <div className="sb-section-item">
-      <Image
-        src={Styling}
-        alt="A wall of logos representing different styling technologies"
-        width={0}
-        height={0}
-        style={{ width: '100%', height: 'auto' }}
-      />
-      <h4 className="sb-section-item-heading">Add styling and CSS</h4>
-      <p className="sb-section-item-paragraph">Like with web applications, there are many ways to include CSS within Storybook. Learn more about setting up styling within Storybook.</p>
-      <a
-        href="https://storybook.js.org/docs/configure/styling-and-css/?renderer=react"
-        target="_blank"
-      >Learn more<RightArrow /></a>
-    </div>
-    <div className="sb-section-item">
-      <Image 
-        width={0}
-        height={0}
-        style={{ width: '100%', height: 'auto' }}
-        src={Context}
-        alt="An abstraction representing the composition of data for a component"
-      />
-      <h4 className="sb-section-item-heading">Provide context and mocking</h4>
-      <p className="sb-section-item-paragraph">Often when a story doesn't render, it's because your component is expecting a specific environment or context (like a theme provider) to be available.</p>
-      <a
-        href="https://storybook.js.org/docs/writing-stories/decorators/?renderer=react#context-for-mocking"
-        target="_blank"
-      >Learn more<RightArrow /></a>
-    </div>
-    <div className="sb-section-item">
-      <Image 
-        width={0}
-        height={0}
-        style={{ width: '100%', height: 'auto' }} 
-        src={Assets} 
-        alt="A representation of typography and image assets" 
-      />
-      <div>
-        <h4 className="sb-section-item-heading">Load assets and resources</h4>
-        <p className="sb-section-item-paragraph">To link static files (like fonts) to your projects and stories, use the
-        `staticDirs` configuration option to specify folders to load when
-        starting Storybook.</p>
-        <a
-          href="https://storybook.js.org/docs/configure/images-and-assets/?renderer=react"
-          target="_blank"
-        >Learn more<RightArrow /></a>
-      </div>
-    </div>
-  </div>
-</div>
-<div className="sb-container">
-  <div className='sb-section-title'>
-    # Do more with Storybook
-
-    Now that you know the basics, let's explore other parts of Storybook that will improve your experience. This list is just to get you started. You can customise Storybook in many ways to fit your needs.
-  </div>
-
-  <div className="sb-section">
-    <div className="sb-features-grid">
-      <div className="sb-grid-item">
-        <Image 
-          width={0}
-          height={0}
-          style={{ width: '100%', height: 'auto' }} 
-          src={Docs} 
-          alt="A screenshot showing the autodocs tag being set, pointing a docs page being generated" 
-        />
-        <h4 className="sb-section-item-heading">Autodocs</h4>
-        <p className="sb-section-item-paragraph">Auto-generate living,
-          interactive reference documentation from your components and stories.</p>
-        <a
-          href="https://storybook.js.org/docs/writing-docs/autodocs/?renderer=react"
-          target="_blank"
-        >Learn more<RightArrow /></a>
-      </div>
-      <div className="sb-grid-item">
-        <Image 
-          width={0}
-          height={0}
-          style={{ width: '100%', height: 'auto' }} 
-          src={Share} 
-          alt="A browser window showing a Storybook being published to a chromatic.com URL" 
-        />
-        <h4 className="sb-section-item-heading">Publish to Chromatic</h4>
-        <p className="sb-section-item-paragraph">Publish your Storybook to review and collaborate with your entire team.</p>
-        <a
-          href="https://storybook.js.org/docs/sharing/publish-storybook/?renderer=react#publish-storybook-with-chromatic"
-          target="_blank"
-        >Learn more<RightArrow /></a>
-      </div>
-      <div className="sb-grid-item">
-        <Image 
-          width={0}
-          height={0}
-          style={{ width: '100%', height: 'auto' }} 
-          src={FigmaPlugin} 
-          alt="Windows showing the Storybook plugin in Figma" 
-        />
-        <h4 className="sb-section-item-heading">Figma Plugin</h4>
-        <p className="sb-section-item-paragraph">Embed your stories into Figma to cross-reference the design and live
-          implementation in one place.</p>
-        <a
-          href="https://storybook.js.org/docs/sharing/design-integrations/?renderer=react#embed-storybook-in-figma-with-the-plugin"
-          target="_blank"
-        >Learn more<RightArrow /></a>
-      </div>
-      <div className="sb-grid-item">
-        <Image 
-          width={0}
-          height={0}
-          style={{ width: '100%', height: 'auto' }} 
-          src={Testing} 
-          alt="Screenshot of tests passing and failing" 
-        />
-        <h4 className="sb-section-item-heading">Testing</h4>
-        <p className="sb-section-item-paragraph">Use stories to test a component in all its variations, no matter how
-          complex.</p>
-        <a
-          href="https://storybook.js.org/docs/writing-tests/?renderer=react"
-          target="_blank"
-        >Learn more<RightArrow /></a>
-      </div>
-      <div className="sb-grid-item">
-        <Image 
-          width={0}
-          height={0}
-          style={{ width: '100%', height: 'auto' }} 
-          src={Accessibility} 
-          alt="Screenshot of accessibility tests passing and failing" 
-        />
-        <h4 className="sb-section-item-heading">Accessibility</h4>
-        <p className="sb-section-item-paragraph">Automatically test your components for a11y issues as you develop.</p>
-        <a
-          href="https://storybook.js.org/docs/writing-tests/accessibility-testing/?renderer=react"
-          target="_blank"
-        >Learn more<RightArrow /></a>
-      </div>
-      <div className="sb-grid-item">
-        <Image 
-          width={0}
-          height={0}
-          style={{ width: '100%', height: 'auto' }} 
-          src={Theming} 
-          alt="Screenshot of Storybook in light and dark mode" 
-        />
-        <h4 className="sb-section-item-heading">Theming</h4>
-        <p className="sb-section-item-paragraph">Theme Storybook's UI to personalize it to your project.</p>
-        <a
-          href="https://storybook.js.org/docs/configure/theming/?renderer=react"
-          target="_blank"
-        >Learn more<RightArrow /></a>
-      </div>
-    </div>
-  </div>
-</div>
-<div className='sb-addon'>
-  <div className='sb-addon-text'>
-    <h4>Addons</h4>
-    <p className="sb-section-item-paragraph">Integrate your tools with Storybook to connect workflows.</p>
-    <a
-        href="https://storybook.js.org/addons/"
-        target="_blank"
-      >Discover all addons<RightArrow /></a>
-  </div>
-  <div className='sb-addon-img'>
-    <Image 
-      width={650}
-      height={347}
-      src={AddonLibrary} 
-      alt="Integrate your tools with Storybook to connect workflows." 
-    />
-  </div>
-</div>
-
-<div className="sb-section sb-socials">
-    <div className="sb-section-item">
-      <Image 
-        width={32}
-        height={32}
-        layout="fixed"
-        src={Github} 
-        alt="Github logo" 
-        className="sb-explore-image"
-      />
-      Join our contributors building the future of UI development.
-
-      <a
-        href="https://github.com/storybookjs/storybook"
-        target="_blank"
-      >Star on GitHub<RightArrow /></a>
-    </div>
-    <div className="sb-section-item">
-      <Image 
-        width={33}
-        height={32}
-        layout="fixed"
-        src={Discord} 
-        alt="Discord logo" 
-        className="sb-explore-image"
-      />
-      <div>
-        Get support and chat with frontend developers.
-
-        <a
-          href="https://discord.gg/storybook"
-          target="_blank"
-        >Join Discord server<RightArrow /></a>
-      </div>
-    </div>
-    <div className="sb-section-item">
-      <Image 
-        width={32}
-        height={32}
-        layout="fixed"
-        src={Youtube} 
-        alt="Youtube logo" 
-        className="sb-explore-image"
-      />
-      <div>
-        Watch tutorials, feature previews and interviews.
-
-        <a
-          href="https://www.youtube.com/@chromaticui"
-          target="_blank"
-        >Watch on YouTube<RightArrow /></a>
-      </div>
-    </div>
-    <div className="sb-section-item">
-      <Image 
-        width={33}
-        height={32}
-        layout="fixed"
-        src={Tutorials} 
-        alt="A book" 
-        className="sb-explore-image"
-      />
-      <p>Follow guided walkthroughs on for key workflows.</p>
-
-      <a
-          href="https://storybook.js.org/tutorials/"
-          target="_blank"
-        >Discover tutorials<RightArrow /></a>
-    </div>
-</div>
-
-<style>
-  {`
-  .sb-container {
-    margin-bottom: 48px;
-  }
-
-  .sb-section {
-    width: 100%;
-    display: flex;
-    flex-direction: row;
-    gap: 20px;
-  }
-
-  img {
-    object-fit: cover;
-  }
-
-  .sb-section-title {
-    margin-bottom: 32px;
-  }
-
-  .sb-section a:not(h1 a, h2 a, h3 a) {
-    font-size: 14px;
-  }
-
-  .sb-section-item, .sb-grid-item {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .sb-section-item-heading {
-    padding-top: 20px !important;
-    padding-bottom: 5px !important;
-    margin: 0 !important;
-  }
-  .sb-section-item-paragraph {
-    margin: 0;
-    padding-bottom: 10px;
-  }
-
-  .sb-chevron {
-    margin-left: 5px;
-  }
-
-  .sb-features-grid {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    grid-gap: 32px 20px;
-  }
-
-  .sb-socials {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-  }
-
-  .sb-socials p {
-    margin-bottom: 10px;
-  }
-
-  .sb-explore-image {
-    max-height: 32px;
-    align-self: flex-start;
-  }
-
-  .sb-addon {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    position: relative;
-    background-color: #EEF3F8;
-    border-radius: 5px;
-    border: 1px solid rgba(0, 0, 0, 0.05);
-    background: #EEF3F8;
-    height: 180px;
-    margin-bottom: 48px;
-    overflow: hidden;
-  }
-
-  .sb-addon-text {
-    padding-left: 48px;
-    max-width: 240px;
-  }
-
-  .sb-addon-text h4 {
-    padding-top: 0px;
-  }
-
-  .sb-addon-img {
-    position: absolute;
-    left: 345px;
-    top: 0;
-    height: 100%;
-    width: 200%;
-    overflow: hidden;
-  }
-
-  .sb-addon-img img {
-    width: 650px;
-    transform: rotate(-15deg);
-    margin-left: 40px;
-    margin-top: -72px;
-    box-shadow: 0 0 1px rgba(255, 255, 255, 0);
-    backface-visibility: hidden;
-  }
-
-  @media screen and (max-width: 800px) {
-    .sb-addon-img {
-      left: 300px;
-    }
-  }
-
-  @media screen and (max-width: 600px) {
-    .sb-section {
-      flex-direction: column;
-    }
-
-    .sb-features-grid {
-      grid-template-columns: repeat(1, 1fr);
-    }
-
-    .sb-socials {
-      grid-template-columns: repeat(2, 1fr);
-    }
-
-    .sb-addon {
-      height: 280px;
-      align-items: flex-start;
-      padding-top: 32px;
-      overflow: hidden;
-    }
-
-    .sb-addon-text {
-      padding-left: 24px;
-    }
-
-    .sb-addon-img {
-      right: 0;
-      left: 0;
-      top: 130px;
-      bottom: 0;
-      overflow: hidden;
-      height: auto;
-      width: 124%;
-    }
-
-    .sb-addon-img img {
-      width: 1200px;
-      transform: rotate(-12deg);
-      margin-left: 0;
-      margin-top: 48px;
-      margin-bottom: -40px;
-      margin-left: -24px;
-    }
-  }
-  `}
-</style>

package/template/cli/ts-3-8/Header.stories.ts

@@ -1,33 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { fn } from '@storybook/test';
-
-import { Header } from './Header';
-
-const meta: Meta<typeof Header> = {
-  title: 'Example/Header',
-  component: Header,
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
-  tags: ['autodocs'],
-  parameters: {
-    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
-    layout: 'fullscreen',
-  },
-  args: {
-    onLogin: fn(),
-    onLogout: fn(),
-    onCreateAccount: fn(),
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Header>;
-
-export const LoggedIn: Story = {
-  args: {
-    user: {
-      name: 'Jane Doe',
-    },
-  },
-};
-
-export const LoggedOut: Story = {};

package/template/cli/ts-3-8/Header.tsx

@@ -1,56 +0,0 @@
-import React from 'react';
-
-import { Button } from './Button';
-import './header.css';
-
-type User = {
-  name: string;
-};
-
-export interface HeaderProps {
-  user?: User;
-  onLogin?: () => void;
-  onLogout?: () => void;
-  onCreateAccount?: () => void;
-}
-
-export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => (
-  <header>
-    <div className="storybook-header">
-      <div>
-        <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
-          <g fill="none" fillRule="evenodd">
-            <path
-              d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
-              fill="#FFF"
-            />
-            <path
-              d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
-              fill="#555AB9"
-            />
-            <path
-              d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z"
-              fill="#91BAF8"
-            />
-          </g>
-        </svg>
-        <h1>Acme</h1>
-      </div>
-      <div>
-        {user ? (
-          <>
-            <span className="welcome">
-              Welcome, <b>{user.name}</b>!
-            </span>
-            <Button size="small" onClick={onLogout} label="Log out" />
-          </>
-        ) : (
-          <>
-            <Button size="small" onClick={onLogin} label="Log in" />
-            <Button primary size="small" onClick={onCreateAccount} label="Sign up" />
-          </>
-        )}
-      </div>
-    </div>
-  </header>
-);

package/template/cli/ts-3-8/Page.stories.ts

@@ -1,32 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { expect, userEvent, within } from '@storybook/test';
-
-import { Page } from './Page';
-
-const meta: Meta<typeof Page> = {
-  title: 'Example/Page',
-  component: Page,
-  parameters: {
-    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
-    layout: 'fullscreen',
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Page>;
-
-export const LoggedOut: Story = {};
-
-// More on component testing: https://storybook.js.org/docs/writing-tests/component-testing
-export const LoggedIn: Story = {
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const loginButton = canvas.getByRole('button', { name: /Log in/i });
-    await expect(loginButton).toBeInTheDocument();
-    await userEvent.click(loginButton);
-    await expect(loginButton).not.toBeInTheDocument();
-
-    const logoutButton = canvas.getByRole('button', { name: /Log out/i });
-    await expect(logoutButton).toBeInTheDocument();
-  },
-};

package/template/cli/ts-3-8/Page.tsx

@@ -1,73 +0,0 @@
-import React from 'react';
-
-import { Header } from './Header';
-import './page.css';
-
-type User = {
-  name: string;
-};
-
-export const Page: React.FC = () => {
-  const [user, setUser] = React.useState<User>();
-
-  return (
-    <article>
-      <Header
-        user={user}
-        onLogin={() => setUser({ name: 'Jane Doe' })}
-        onLogout={() => setUser(undefined)}
-        onCreateAccount={() => setUser({ name: 'Jane Doe' })}
-      />
-
-      <section className="storybook-page">
-        <h2>Pages in Storybook</h2>
-        <p>
-          We recommend building UIs with a{' '}
-          <a href="https://componentdriven.org" target="_blank" rel="noopener noreferrer">
-            <strong>component-driven</strong>
-          </a>{' '}
-          process starting with atomic components and ending with pages.
-        </p>
-        <p>
-          Render pages with mock data. This makes it easy to build and review page states without
-          needing to navigate to them in your app. Here are some handy patterns for managing page
-          data in Storybook:
-        </p>
-        <ul>
-          <li>
-            Use a higher-level connected component. Storybook helps you compose such data from the
-            "args" of child component stories
-          </li>
-          <li>
-            Assemble data in the page component from your services. You can mock these services out
-            using Storybook.
-          </li>
-        </ul>
-        <p>
-          Get a guided tutorial on component-driven development at{' '}
-          <a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer">
-            Storybook tutorials
-          </a>
-          . Read more in the{' '}
-          <a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer">
-            docs
-          </a>
-          .
-        </p>
-        <div className="tip-wrapper">
-          <span className="tip">Tip</span> Adjust the width of the canvas with the{' '}
-          <svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
-            <g fill="none" fillRule="evenodd">
-              <path
-                d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
-                id="a"
-                fill="#999"
-              />
-            </g>
-          </svg>
-          Viewports addon in the toolbar
-        </div>
-      </section>
-    </article>
-  );
-};