@storybook/blocks 8.0.0-alpha.0 → 8.0.0-alpha.2

package/dist/index.d.ts

@@ -3,7 +3,7 @@ export { DocsContextProps } from '@storybook/types';
 import React, { ComponentProps, FunctionComponent, ReactNode, FC, PropsWithChildren, Context, ReactElement } from 'react';
 import { Renderer } from '@storybook/csf';
 import { PropDescriptor } from '@storybook/preview-api';
-import { SyntaxHighlighter, ActionItem, SyntaxHighlighterFormatTypes } from '@storybook/components';
+import { SupportedLanguage, SyntaxHighlighter, ActionItem, SyntaxHighlighterFormatTypes } from '@storybook/components';
 import { SourceType } from '@storybook/docs-tools';
 import { Channel } from '@storybook/channels';
 import { ThemeVars } from '@storybook/theming';
@@ -17,7 +17,7 @@ interface SourceCodeProps {
     /**
      * The language the syntax highlighter uses for your story’s code
      */
-    language?: string;
+    language?: SupportedLanguage;
     /**
      * Use this to override the content of the source block.
      */

package/dist/index.js

@@ -60,7 +60,7 @@ var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropD
     `),children)return(0,import_client_logger8.deprecate)(import_ts_dedent4.default`Passing children to Canvas is deprecated, please use the \`of\` prop instead to reference a story. 
     
     Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#canvas-block
-  `),isLoading?import_react45.default.createElement(PreviewSkeleton,null):import_react45.default.createElement(Preview,{...previewProps},children);let layout=props.layout??story.parameters.layout??((_b=(_a=story.parameters.docs)==null?void 0:_a.canvas)==null?void 0:_b.layout)??"padded",withToolbar=props.withToolbar??((_d=(_c=story.parameters.docs)==null?void 0:_c.canvas)==null?void 0:_d.withToolbar)??!1,additionalActions=props.additionalActions??((_f=(_e=story.parameters.docs)==null?void 0:_e.canvas)==null?void 0:_f.additionalActions),sourceState=props.sourceState??((_h=(_g=story.parameters.docs)==null?void 0:_g.canvas)==null?void 0:_h.sourceState)??"hidden",className=props.className??((_j=(_i=story.parameters.docs)==null?void 0:_i.canvas)==null?void 0:_j.className);return import_react45.default.createElement(Preview,{withSource:sourceState==="none"?void 0:sourceProps,isExpanded:sourceState==="shown",withToolbar,additionalActions,className,layout},import_react45.default.createElement(Story2,{of:of||story.moduleExport,meta:props.meta,...props.story}))};var import_react48=__toESM(require("react")),import_preview_api3=require("@storybook/preview-api");var import_react46=require("react"),import_core_events2=require("@storybook/core-events"),useGlobals2=(story,context)=>{let storyContext=context.getStoryContext(story),[globals,setGlobals]=(0,import_react46.useState)(storyContext.globals);return(0,import_react46.useEffect)(()=>{let onGlobalsUpdated=changed=>{setGlobals(changed.globals)};return context.channel.on(import_core_events2.GLOBALS_UPDATED,onGlobalsUpdated),()=>context.channel.off(import_core_events2.GLOBALS_UPDATED,onGlobalsUpdated)},[context.channel]),[globals]};var import_react47=require("react"),import_core_events3=require("@storybook/core-events"),useArgs2=(story,context)=>{let result=useArgsIfDefined(story,context);if(!result)throw new Error("No result when story was defined");return result},useArgsIfDefined=(story,context)=>{let storyContext=story?context.getStoryContext(story):{args:{}},{id:storyId}=story||{id:"none"},[args,setArgs]=(0,import_react47.useState)(storyContext.args);(0,import_react47.useEffect)(()=>{let onArgsUpdated=changed=>{changed.storyId===storyId&&setArgs(changed.args)};return context.channel.on(import_core_events3.STORY_ARGS_UPDATED,onArgsUpdated),()=>context.channel.off(import_core_events3.STORY_ARGS_UPDATED,onArgsUpdated)},[storyId,context.channel]);let updateArgs=(0,import_react47.useCallback)(updatedArgs=>context.channel.emit(import_core_events3.UPDATE_STORY_ARGS,{storyId,updatedArgs}),[storyId,context.channel]),resetArgs=(0,import_react47.useCallback)(argNames=>context.channel.emit(import_core_events3.RESET_STORY_ARGS,{storyId,argNames}),[storyId,context.channel]);return story&&[args,updateArgs,resetArgs]};var Controls3=props=>{var _a;let{of}=props;if("of"in props&&of===void 0)throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");let context=(0,import_react48.useContext)(DocsContext),{story}=context.resolveOf(of||"story",["story"]),{parameters,argTypes}=story,controlsParameters=((_a=parameters.docs)==null?void 0:_a.controls)||{},include=props.include??controlsParameters.include,exclude=props.exclude??controlsParameters.exclude,sort=props.sort??controlsParameters.sort,[args,updateArgs,resetArgs]=useArgs2(story,context),[globals]=useGlobals2(story,context),filteredArgTypes=(0,import_preview_api3.filterArgTypes)(argTypes,include,exclude);return import_react48.default.createElement(ArgsTable,{rows:filteredArgTypes,args,globals,updateArgs,resetArgs,sort})};var import_react51=__toESM(require("react")),import_docs_tools3=require("@storybook/docs-tools"),import_client_logger9=require("@storybook/client-logger");var import_react50=__toESM(require("react")),import_markdown_to_jsx2=__toESM(require("markdown-to-jsx")),import_ts_dedent5=__toESM(require("ts-dedent"));var import_react49=__toESM(require("react")),import_core_events4=require("@storybook/core-events"),import_components31=require("@storybook/components"),import_global6=require("@storybook/global"),import_theming27=require("@storybook/theming"),import_icons5=require("@storybook/icons");var{document:document2}=import_global6.global,assertIsFn=val=>{if(typeof val!="function")throw new Error(`Expected story function, got: ${val}`);return val},AddContext=props=>{let{children,...rest}=props,parentContext=import_react49.default.useContext(DocsContext);return import_react49.default.createElement(DocsContext.Provider,{value:{...parentContext,...rest}},children)},CodeOrSourceMdx=({className,children,...rest})=>{if(typeof className!="string"&&(typeof children!="string"||!children.match(/[\n\r]/g)))return import_react49.default.createElement(import_components31.Code,null,children);let language=className&&className.split("-");return import_react49.default.createElement(Source,{language:language&&language[1]||"plaintext",format:!1,code:children,...rest})};function navigate(context,url){context.channel.emit(import_core_events4.NAVIGATE_URL,url)}var A=import_components31.components.a,AnchorInPage=({hash,children})=>{let context=(0,import_react49.useContext)(DocsContext);return import_react49.default.createElement(A,{href:hash,target:"_self",onClick:event=>{let id2=hash.substring(1);document2.getElementById(id2)&&navigate(context,hash)}},children)},AnchorMdx=props=>{let{href,target,children,...rest}=props,context=(0,import_react49.useContext)(DocsContext);if(href){if(href.startsWith("#"))return import_react49.default.createElement(AnchorInPage,{hash:href},children);if(target!=="_blank"&&!href.startsWith("https://"))return import_react49.default.createElement(A,{href,onClick:event=>{event.button===0&&!event.altKey&&!event.ctrlKey&&!event.metaKey&&!event.shiftKey&&(event.preventDefault(),navigate(context,event.currentTarget.getAttribute("href")))},target,...rest},children)}return import_react49.default.createElement(A,{...props})},SUPPORTED_MDX_HEADERS=["h1","h2","h3","h4","h5","h6"],OcticonHeaders=SUPPORTED_MDX_HEADERS.reduce((acc,headerType)=>({...acc,[headerType]:(0,import_theming27.styled)(headerType)({"& svg":{position:"relative",top:"-0.1em",visibility:"hidden"},"&:hover svg":{visibility:"visible"}})}),{}),OcticonAnchor=import_theming27.styled.a(()=>({float:"left",lineHeight:"inherit",paddingRight:"10px",marginLeft:"-24px",color:"inherit"})),HeaderWithOcticonAnchor=({as,id:id2,children,...rest})=>{let context=(0,import_react49.useContext)(DocsContext),OcticonHeader=OcticonHeaders[as],hash=`#${id2}`;return import_react49.default.createElement(OcticonHeader,{id:id2,...rest},import_react49.default.createElement(OcticonAnchor,{"aria-hidden":"true",href:hash,tabIndex:-1,target:"_self",onClick:event=>{document2.getElementById(id2)&&navigate(context,hash)}},import_react49.default.createElement(import_icons5.LinkIcon,null)),children)},HeaderMdx=props=>{let{as,id:id2,children,...rest}=props;if(id2)return import_react49.default.createElement(HeaderWithOcticonAnchor,{as,id:id2,...rest},children);let Component4=as,{as:omittedAs,...withoutAs}=props;return import_react49.default.createElement(Component4,{...(0,import_components31.nameSpaceClassNames)(withoutAs,as)})},HeadersMdx=SUPPORTED_MDX_HEADERS.reduce((acc,headerType)=>({...acc,[headerType]:props=>import_react49.default.createElement(HeaderMdx,{as:headerType,...props})}),{});var Markdown2=props=>{var _a;if(!props.children)return null;if(typeof props.children!="string")throw new Error(import_ts_dedent5.default`The Markdown block only accepts children as a single string, but children were of type: '${typeof props.children}'
+  `),isLoading?import_react45.default.createElement(PreviewSkeleton,null):import_react45.default.createElement(Preview,{...previewProps},children);let layout=props.layout??story.parameters.layout??((_b=(_a=story.parameters.docs)==null?void 0:_a.canvas)==null?void 0:_b.layout)??"padded",withToolbar=props.withToolbar??((_d=(_c=story.parameters.docs)==null?void 0:_c.canvas)==null?void 0:_d.withToolbar)??!1,additionalActions=props.additionalActions??((_f=(_e=story.parameters.docs)==null?void 0:_e.canvas)==null?void 0:_f.additionalActions),sourceState=props.sourceState??((_h=(_g=story.parameters.docs)==null?void 0:_g.canvas)==null?void 0:_h.sourceState)??"hidden",className=props.className??((_j=(_i=story.parameters.docs)==null?void 0:_i.canvas)==null?void 0:_j.className);return import_react45.default.createElement(Preview,{withSource:sourceState==="none"?void 0:sourceProps,isExpanded:sourceState==="shown",withToolbar,additionalActions,className,layout},import_react45.default.createElement(Story2,{of:of||story.moduleExport,meta:props.meta,...props.story}))};var import_react48=__toESM(require("react")),import_preview_api3=require("@storybook/preview-api");var import_react46=require("react"),import_core_events2=require("@storybook/core-events"),useGlobals2=(story,context)=>{let storyContext=context.getStoryContext(story),[globals,setGlobals]=(0,import_react46.useState)(storyContext.globals);return(0,import_react46.useEffect)(()=>{let onGlobalsUpdated=changed=>{setGlobals(changed.globals)};return context.channel.on(import_core_events2.GLOBALS_UPDATED,onGlobalsUpdated),()=>context.channel.off(import_core_events2.GLOBALS_UPDATED,onGlobalsUpdated)},[context.channel]),[globals]};var import_react47=require("react"),import_core_events3=require("@storybook/core-events"),useArgs2=(story,context)=>{let result=useArgsIfDefined(story,context);if(!result)throw new Error("No result when story was defined");return result},useArgsIfDefined=(story,context)=>{let storyContext=story?context.getStoryContext(story):{args:{}},{id:storyId}=story||{id:"none"},[args,setArgs]=(0,import_react47.useState)(storyContext.args);(0,import_react47.useEffect)(()=>{let onArgsUpdated=changed=>{changed.storyId===storyId&&setArgs(changed.args)};return context.channel.on(import_core_events3.STORY_ARGS_UPDATED,onArgsUpdated),()=>context.channel.off(import_core_events3.STORY_ARGS_UPDATED,onArgsUpdated)},[storyId,context.channel]);let updateArgs=(0,import_react47.useCallback)(updatedArgs=>context.channel.emit(import_core_events3.UPDATE_STORY_ARGS,{storyId,updatedArgs}),[storyId,context.channel]),resetArgs=(0,import_react47.useCallback)(argNames=>context.channel.emit(import_core_events3.RESET_STORY_ARGS,{storyId,argNames}),[storyId,context.channel]);return story&&[args,updateArgs,resetArgs]};var Controls3=props=>{var _a;let{of}=props;if("of"in props&&of===void 0)throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");let context=(0,import_react48.useContext)(DocsContext),{story}=context.resolveOf(of||"story",["story"]),{parameters,argTypes}=story,controlsParameters=((_a=parameters.docs)==null?void 0:_a.controls)||{},include=props.include??controlsParameters.include,exclude=props.exclude??controlsParameters.exclude,sort=props.sort??controlsParameters.sort,[args,updateArgs,resetArgs]=useArgs2(story,context),[globals]=useGlobals2(story,context),filteredArgTypes=(0,import_preview_api3.filterArgTypes)(argTypes,include,exclude);return import_react48.default.createElement(ArgsTable,{rows:filteredArgTypes,args,globals,updateArgs,resetArgs,sort})};var import_react51=__toESM(require("react")),import_docs_tools3=require("@storybook/docs-tools"),import_client_logger9=require("@storybook/client-logger");var import_react50=__toESM(require("react")),import_markdown_to_jsx2=__toESM(require("markdown-to-jsx")),import_ts_dedent5=__toESM(require("ts-dedent"));var import_react49=__toESM(require("react")),import_core_events4=require("@storybook/core-events"),import_components31=require("@storybook/components"),import_global6=require("@storybook/global"),import_theming27=require("@storybook/theming"),import_icons5=require("@storybook/icons");var{document:document2}=import_global6.global,assertIsFn=val=>{if(typeof val!="function")throw new Error(`Expected story function, got: ${val}`);return val},AddContext=props=>{let{children,...rest}=props,parentContext=import_react49.default.useContext(DocsContext);return import_react49.default.createElement(DocsContext.Provider,{value:{...parentContext,...rest}},children)},CodeOrSourceMdx=({className,children,...rest})=>{if(typeof className!="string"&&(typeof children!="string"||!children.match(/[\n\r]/g)))return import_react49.default.createElement(import_components31.Code,null,children);let language=className&&className.split("-");return import_react49.default.createElement(Source,{language:language&&language[1]||"text",format:!1,code:children,...rest})};function navigate(context,url){context.channel.emit(import_core_events4.NAVIGATE_URL,url)}var A=import_components31.components.a,AnchorInPage=({hash,children})=>{let context=(0,import_react49.useContext)(DocsContext);return import_react49.default.createElement(A,{href:hash,target:"_self",onClick:event=>{let id2=hash.substring(1);document2.getElementById(id2)&&navigate(context,hash)}},children)},AnchorMdx=props=>{let{href,target,children,...rest}=props,context=(0,import_react49.useContext)(DocsContext);if(href){if(href.startsWith("#"))return import_react49.default.createElement(AnchorInPage,{hash:href},children);if(target!=="_blank"&&!href.startsWith("https://"))return import_react49.default.createElement(A,{href,onClick:event=>{event.button===0&&!event.altKey&&!event.ctrlKey&&!event.metaKey&&!event.shiftKey&&(event.preventDefault(),navigate(context,event.currentTarget.getAttribute("href")))},target,...rest},children)}return import_react49.default.createElement(A,{...props})},SUPPORTED_MDX_HEADERS=["h1","h2","h3","h4","h5","h6"],OcticonHeaders=SUPPORTED_MDX_HEADERS.reduce((acc,headerType)=>({...acc,[headerType]:(0,import_theming27.styled)(headerType)({"& svg":{position:"relative",top:"-0.1em",visibility:"hidden"},"&:hover svg":{visibility:"visible"}})}),{}),OcticonAnchor=import_theming27.styled.a(()=>({float:"left",lineHeight:"inherit",paddingRight:"10px",marginLeft:"-24px",color:"inherit"})),HeaderWithOcticonAnchor=({as,id:id2,children,...rest})=>{let context=(0,import_react49.useContext)(DocsContext),OcticonHeader=OcticonHeaders[as],hash=`#${id2}`;return import_react49.default.createElement(OcticonHeader,{id:id2,...rest},import_react49.default.createElement(OcticonAnchor,{"aria-hidden":"true",href:hash,tabIndex:-1,target:"_self",onClick:event=>{document2.getElementById(id2)&&navigate(context,hash)}},import_react49.default.createElement(import_icons5.LinkIcon,null)),children)},HeaderMdx=props=>{let{as,id:id2,children,...rest}=props;if(id2)return import_react49.default.createElement(HeaderWithOcticonAnchor,{as,id:id2,...rest},children);let Component4=as,{as:omittedAs,...withoutAs}=props;return import_react49.default.createElement(Component4,{...(0,import_components31.nameSpaceClassNames)(withoutAs,as)})},HeadersMdx=SUPPORTED_MDX_HEADERS.reduce((acc,headerType)=>({...acc,[headerType]:props=>import_react49.default.createElement(HeaderMdx,{as:headerType,...props})}),{});var Markdown2=props=>{var _a;if(!props.children)return null;if(typeof props.children!="string")throw new Error(import_ts_dedent5.default`The Markdown block only accepts children as a single string, but children were of type: '${typeof props.children}'
         This is often caused by not wrapping the child in a template string.
         
         This is invalid:
@@ -76,6 +76,6 @@ var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropD
           A paragraph
         \`}
         </Markdown>
-      `);return import_react50.default.createElement(import_markdown_to_jsx2.default,{...props,options:{forceBlock:!0,overrides:{code:CodeOrSourceMdx,a:AnchorMdx,...HeadersMdx,...(_a=props==null?void 0:props.options)==null?void 0:_a.overrides},...props==null?void 0:props.options}})};var DescriptionType=(DescriptionType2=>(DescriptionType2.INFO="info",DescriptionType2.NOTES="notes",DescriptionType2.DOCGEN="docgen",DescriptionType2.AUTO="auto",DescriptionType2))(DescriptionType||{}),DEPRECATION_MIGRATION_LINK="https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#description-block-parametersnotes-and-parametersinfo",getNotes=notes=>notes&&(typeof notes=="string"?notes:(0,import_docs_tools3.str)(notes.markdown)||(0,import_docs_tools3.str)(notes.text)),getInfo=info=>info&&(typeof info=="string"?info:(0,import_docs_tools3.str)(info.text)),noDescription=component=>null,getDescriptionFromResolvedOf=resolvedOf=>{var _a,_b,_c,_d,_e,_f,_g,_h;switch(resolvedOf.type){case"story":return((_b=(_a=resolvedOf.story.parameters.docs)==null?void 0:_a.description)==null?void 0:_b.story)||null;case"meta":{let{parameters,component}=resolvedOf.preparedMeta,metaDescription=(_d=(_c=parameters.docs)==null?void 0:_c.description)==null?void 0:_d.component;return metaDescription||((_f=(_e=parameters.docs)==null?void 0:_e.extractComponentDescription)==null?void 0:_f.call(_e,component,{component,parameters}))||null}case"component":{let{component,projectAnnotations:{parameters}}=resolvedOf;return((_h=(_g=parameters.docs)==null?void 0:_g.extractComponentDescription)==null?void 0:_h.call(_g,component,{component,parameters}))||null}default:throw new Error(`Unrecognized module type resolved from 'useOf', got: ${resolvedOf.type}`)}},getDescriptionFromDeprecatedProps=({type,markdown,children},{storyById})=>{let{component,parameters}=storyById();if(children||markdown)return children||markdown;let{notes,info,docs}=parameters;(notes||info)&&(0,import_client_logger9.deprecate)(`Using 'parameters.notes' or 'parameters.info' properties to describe stories is deprecated. See ${DEPRECATION_MIGRATION_LINK}`);let{extractComponentDescription=noDescription,description}=docs||{},componentDescriptionParameter=description==null?void 0:description.component;if(componentDescriptionParameter)return componentDescriptionParameter;switch(type){case"info":return getInfo(info);case"notes":return getNotes(notes);case"docgen":case"auto":default:return extractComponentDescription(component,{component,...parameters})}},DescriptionContainer=props=>{let{of,type,markdown:markdownProp,children}=props;if("of"in props&&of===void 0)throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");let context=(0,import_react51.useContext)(DocsContext),resolvedOf=useOf(of||"meta"),markdown;return type||markdownProp||children?markdown=getDescriptionFromDeprecatedProps(props,context):markdown=getDescriptionFromResolvedOf(resolvedOf),type&&(0,import_client_logger9.deprecate)(`Manually specifying description type is deprecated. See ${DEPRECATION_MIGRATION_LINK}`),markdownProp&&(0,import_client_logger9.deprecate)(`The 'markdown' prop on the Description block is deprecated. See ${DEPRECATION_MIGRATION_LINK}`),children&&(0,import_client_logger9.deprecate)(`The 'children' prop on the Description block is deprecated. See ${DEPRECATION_MIGRATION_LINK}`),markdown?import_react51.default.createElement(Markdown2,null,markdown):null};var import_react62=__toESM(require("react"));var import_react53=__toESM(require("react")),import_global7=require("@storybook/global"),import_theming29=require("@storybook/theming");var import_react52=__toESM(require("react")),import_theming28=require("@storybook/theming"),tocbot=__toESM(require("tocbot")),Wrapper11=import_theming28.styled.div(({theme})=>({width:"10rem","@media (max-width: 768px)":{display:"none"}})),Content2=import_theming28.styled.div(({theme})=>({position:"fixed",bottom:0,top:0,width:"10rem",paddingTop:"4rem",paddingBottom:"2rem",overflowY:"auto",fontFamily:theme.typography.fonts.base,fontSize:theme.typography.size.s2,WebkitFontSmoothing:"antialiased",MozOsxFontSmoothing:"grayscale",WebkitTapHighlightColor:"rgba(0, 0, 0, 0)",WebkitOverflowScrolling:"touch","& *":{boxSizing:"border-box"},"& > .toc-wrapper > .toc-list":{paddingLeft:0,borderLeft:`solid 2px ${theme.color.mediumlight}`,".toc-list":{paddingLeft:0,borderLeft:`solid 2px ${theme.color.mediumlight}`,".toc-list":{paddingLeft:0,borderLeft:`solid 2px ${theme.color.mediumlight}`}}},"& .toc-list-item":{position:"relative",listStyleType:"none",marginLeft:20,paddingTop:3,paddingBottom:3},"& .toc-list-item::before":{content:'""',position:"absolute",height:"100%",top:0,left:0,transform:"translateX(calc(-2px - 20px))",borderLeft:`solid 2px ${theme.color.mediumdark}`,opacity:0,transition:"opacity 0.2s"},"& .toc-list-item.is-active-li::before":{opacity:1},"& .toc-list-item > a":{color:theme.color.defaultText,textDecoration:"none"},"& .toc-list-item.is-active-li > a":{fontWeight:600,color:theme.color.secondary,textDecoration:"none"}})),Heading=import_theming28.styled.p(({theme})=>({fontWeight:600,fontSize:"0.875em",color:theme.textColor,textTransform:"uppercase",marginBottom:10})),OptionalTitle=({title})=>title===null?null:typeof title=="string"?import_react52.default.createElement(Heading,null,title):title,TableOfContents=({title,disable,headingSelector,contentsSelector,ignoreSelector,unsafeTocbotOptions})=>((0,import_react52.useEffect)(()=>{let configuration={tocSelector:".toc-wrapper",contentSelector:contentsSelector??".sbdocs-content",headingSelector:headingSelector??"h3",ignoreSelector:ignoreSelector??".skip-toc",headingsOffset:40,scrollSmoothOffset:-40,orderedList:!1,onClick:()=>!1,...unsafeTocbotOptions},timeout=setTimeout(()=>tocbot.init(configuration),100);return()=>{clearTimeout(timeout),tocbot.destroy()}},[disable]),import_react52.default.createElement(import_react52.default.Fragment,null,import_react52.default.createElement(Wrapper11,null,disable?null:import_react52.default.createElement(Content2,null,import_react52.default.createElement(OptionalTitle,{title:title||null}),import_react52.default.createElement("div",{className:"toc-wrapper"})))));var{document:document3,window:globalWindow3}=import_global7.global,DocsContainer=({context,theme,children})=>{var _a,_b,_c,_d,_e;let toc;try{toc=(_b=(_a=context.resolveOf("meta",["meta"]).preparedMeta.parameters)==null?void 0:_a.docs)==null?void 0:_b.toc}catch{toc=(_e=(_d=(_c=context==null?void 0:context.projectAnnotations)==null?void 0:_c.parameters)==null?void 0:_d.docs)==null?void 0:_e.toc}return(0,import_react53.useEffect)(()=>{let url;try{if(url=new URL(globalWindow3.parent.location.toString()),url.hash){let element=document3.getElementById(url.hash.substring(1));element&&setTimeout(()=>{scrollToElement(element)},200)}}catch{}}),import_react53.default.createElement(DocsContext.Provider,{value:context},import_react53.default.createElement(SourceContainer,{channel:context.channel},import_react53.default.createElement(import_theming29.ThemeProvider,{theme:(0,import_theming29.ensure)(theme)},import_react53.default.createElement(DocsPageWrapper,{toc:toc?import_react53.default.createElement(TableOfContents,{className:"sbdocs sbdocs-toc--custom",...toc}):null},children))))};var import_react61=__toESM(require("react"));var import_react54=__toESM(require("react"));var STORY_KIND_PATH_SEPARATOR=/\s*\/\s*/,extractTitle=title=>{let groups=title.trim().split(STORY_KIND_PATH_SEPARATOR);return groups&&groups[groups.length-1]||title},Title3=({children})=>{let context=(0,import_react54.useContext)(DocsContext),content=children||extractTitle(context.storyById().title);return content?import_react54.default.createElement(Title,{className:"sbdocs-title sb-unstyled"},content):null};var import_react55=__toESM(require("react"));var Subtitle2=({children})=>{let docsContext=(0,import_react55.useContext)(DocsContext),{parameters}=docsContext.storyById(),content=children||(parameters==null?void 0:parameters.componentSubtitle);return content?import_react55.default.createElement(Subtitle,{className:"sbdocs-subtitle sb-unstyled"},content):null};var import_react58=__toESM(require("react")),import_ts_dedent6=__toESM(require("ts-dedent")),import_client_logger10=require("@storybook/client-logger");var import_react57=__toESM(require("react"));var import_react56=__toESM(require("react")),import_components36=require("@storybook/components");var Subheading=({children,disableAnchor})=>{if(disableAnchor||typeof children!="string")return import_react56.default.createElement(import_components36.H3,null,children);let tagID=children.toLowerCase().replace(/[^a-z0-9]/gi,"-");return import_react56.default.createElement(HeaderMdx,{as:"h3",id:tagID},children)};var DocsStory=({of,expanded=!0,withToolbar:withToolbarProp=!1,__forceInitialArgs=!1,__primary=!1})=>{var _a,_b;let{story}=useOf(of||"story",["story"]),withToolbar=((_b=(_a=story.parameters.docs)==null?void 0:_a.canvas)==null?void 0:_b.withToolbar)??withToolbarProp;return import_react57.default.createElement(Anchor,{storyId:story.id},expanded&&import_react57.default.createElement(import_react57.default.Fragment,null,import_react57.default.createElement(Subheading,null,story.name),import_react57.default.createElement(DescriptionContainer,{of})),import_react57.default.createElement(Canvas,{of,withToolbar,story:{__forceInitialArgs,__primary},source:{__forceInitialArgs}}))};var Primary=props=>{let{name,of}=props;if("of"in props&&of===void 0)throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");let docsContext=(0,import_react58.useContext)(DocsContext),story;if(of&&(story=useOf(of||"meta",["meta"]).csfFile.stories[0]||null),!story){let storyId=name&&docsContext.storyIdByName(name);story=docsContext.storyById(storyId)}return name&&(0,import_client_logger10.deprecate)(import_ts_dedent6.default`\`name\` prop is deprecated on the Primary block.
+      `);return import_react50.default.createElement(import_markdown_to_jsx2.default,{...props,options:{forceBlock:!0,overrides:{code:CodeOrSourceMdx,a:AnchorMdx,...HeadersMdx,...(_a=props==null?void 0:props.options)==null?void 0:_a.overrides},...props==null?void 0:props.options}})};var DescriptionType=(DescriptionType2=>(DescriptionType2.INFO="info",DescriptionType2.NOTES="notes",DescriptionType2.DOCGEN="docgen",DescriptionType2.AUTO="auto",DescriptionType2))(DescriptionType||{}),DEPRECATION_MIGRATION_LINK="https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#description-block-parametersnotes-and-parametersinfo",getNotes=notes=>notes&&(typeof notes=="string"?notes:(0,import_docs_tools3.str)(notes.markdown)||(0,import_docs_tools3.str)(notes.text)),getInfo=info=>info&&(typeof info=="string"?info:(0,import_docs_tools3.str)(info.text)),noDescription=component=>null,getDescriptionFromResolvedOf=resolvedOf=>{var _a,_b,_c,_d,_e,_f,_g,_h;switch(resolvedOf.type){case"story":return((_b=(_a=resolvedOf.story.parameters.docs)==null?void 0:_a.description)==null?void 0:_b.story)||null;case"meta":{let{parameters,component}=resolvedOf.preparedMeta,metaDescription=(_d=(_c=parameters.docs)==null?void 0:_c.description)==null?void 0:_d.component;return metaDescription||((_f=(_e=parameters.docs)==null?void 0:_e.extractComponentDescription)==null?void 0:_f.call(_e,component,{component,parameters}))||null}case"component":{let{component,projectAnnotations:{parameters}}=resolvedOf;return((_h=(_g=parameters.docs)==null?void 0:_g.extractComponentDescription)==null?void 0:_h.call(_g,component,{component,parameters}))||null}default:throw new Error(`Unrecognized module type resolved from 'useOf', got: ${resolvedOf.type}`)}},getDescriptionFromDeprecatedProps=({type,markdown,children},{storyById})=>{let{component,parameters}=storyById();if(children||markdown)return children||markdown;let{notes,info,docs}=parameters;(notes||info)&&(0,import_client_logger9.deprecate)(`Using 'parameters.notes' or 'parameters.info' properties to describe stories is deprecated. See ${DEPRECATION_MIGRATION_LINK}`);let{extractComponentDescription=noDescription,description}=docs||{},componentDescriptionParameter=description==null?void 0:description.component;if(componentDescriptionParameter)return componentDescriptionParameter;switch(type){case"info":return getInfo(info);case"notes":return getNotes(notes);case"docgen":case"auto":default:return extractComponentDescription(component,{component,...parameters})}},DescriptionContainer=props=>{let{of,type,markdown:markdownProp,children}=props;if("of"in props&&of===void 0)throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");let context=(0,import_react51.useContext)(DocsContext),resolvedOf=useOf(of||"meta"),markdown;return type||markdownProp||children?markdown=getDescriptionFromDeprecatedProps(props,context):markdown=getDescriptionFromResolvedOf(resolvedOf),type&&(0,import_client_logger9.deprecate)(`Manually specifying description type is deprecated. See ${DEPRECATION_MIGRATION_LINK}`),markdownProp&&(0,import_client_logger9.deprecate)(`The 'markdown' prop on the Description block is deprecated. See ${DEPRECATION_MIGRATION_LINK}`),children&&(0,import_client_logger9.deprecate)(`The 'children' prop on the Description block is deprecated. See ${DEPRECATION_MIGRATION_LINK}`),markdown?import_react51.default.createElement(Markdown2,null,markdown):null};var import_react62=__toESM(require("react"));var import_react53=__toESM(require("react")),import_global7=require("@storybook/global"),import_theming29=require("@storybook/theming");var import_react52=__toESM(require("react")),import_theming28=require("@storybook/theming"),tocbot=__toESM(require("tocbot")),Wrapper11=import_theming28.styled.div(({theme})=>({width:"10rem","@media (max-width: 768px)":{display:"none"}})),Content2=import_theming28.styled.div(({theme})=>({position:"fixed",bottom:0,top:0,width:"10rem",paddingTop:"4rem",paddingBottom:"2rem",overflowY:"auto",fontFamily:theme.typography.fonts.base,fontSize:theme.typography.size.s2,WebkitFontSmoothing:"antialiased",MozOsxFontSmoothing:"grayscale",WebkitTapHighlightColor:"rgba(0, 0, 0, 0)",WebkitOverflowScrolling:"touch","& *":{boxSizing:"border-box"},"& > .toc-wrapper > .toc-list":{paddingLeft:0,borderLeft:`solid 2px ${theme.color.mediumlight}`,".toc-list":{paddingLeft:0,borderLeft:`solid 2px ${theme.color.mediumlight}`,".toc-list":{paddingLeft:0,borderLeft:`solid 2px ${theme.color.mediumlight}`}}},"& .toc-list-item":{position:"relative",listStyleType:"none",marginLeft:20,paddingTop:3,paddingBottom:3},"& .toc-list-item::before":{content:'""',position:"absolute",height:"100%",top:0,left:0,transform:"translateX(calc(-2px - 20px))",borderLeft:`solid 2px ${theme.color.mediumdark}`,opacity:0,transition:"opacity 0.2s"},"& .toc-list-item.is-active-li::before":{opacity:1},"& .toc-list-item > a":{color:theme.color.defaultText,textDecoration:"none"},"& .toc-list-item.is-active-li > a":{fontWeight:600,color:theme.color.secondary,textDecoration:"none"}})),Heading=import_theming28.styled.p(({theme})=>({fontWeight:600,fontSize:"0.875em",color:theme.textColor,textTransform:"uppercase",marginBottom:10})),OptionalTitle=({title})=>title===null?null:typeof title=="string"?import_react52.default.createElement(Heading,null,title):title,TableOfContents=({title,disable,headingSelector,contentsSelector,ignoreSelector,unsafeTocbotOptions})=>((0,import_react52.useEffect)(()=>{let configuration={tocSelector:".toc-wrapper",contentSelector:contentsSelector??".sbdocs-content",headingSelector:headingSelector??"h3",ignoreSelector:ignoreSelector??".skip-toc",headingsOffset:40,scrollSmoothOffset:-40,orderedList:!1,onClick:()=>!1,...unsafeTocbotOptions},timeout=setTimeout(()=>tocbot.init(configuration),100);return()=>{clearTimeout(timeout),tocbot.destroy()}},[disable]),import_react52.default.createElement(import_react52.default.Fragment,null,import_react52.default.createElement(Wrapper11,null,disable?null:import_react52.default.createElement(Content2,null,import_react52.default.createElement(OptionalTitle,{title:title||null}),import_react52.default.createElement("div",{className:"toc-wrapper"})))));var{document:document3,window:globalWindow3}=import_global7.global,DocsContainer=({context,theme,children})=>{var _a,_b,_c,_d,_e;let toc;try{toc=(_b=(_a=context.resolveOf("meta",["meta"]).preparedMeta.parameters)==null?void 0:_a.docs)==null?void 0:_b.toc}catch{toc=(_e=(_d=(_c=context==null?void 0:context.projectAnnotations)==null?void 0:_c.parameters)==null?void 0:_d.docs)==null?void 0:_e.toc}return(0,import_react53.useEffect)(()=>{let url;try{if(url=new URL(globalWindow3.parent.location.toString()),url.hash){let element=document3.getElementById(url.hash.substring(1));element&&setTimeout(()=>{scrollToElement(element)},200)}}catch{}}),import_react53.default.createElement(DocsContext.Provider,{value:context},import_react53.default.createElement(SourceContainer,{channel:context.channel},import_react53.default.createElement(import_theming29.ThemeProvider,{theme:(0,import_theming29.ensure)(theme)},import_react53.default.createElement(DocsPageWrapper,{toc:toc?import_react53.default.createElement(TableOfContents,{className:"sbdocs sbdocs-toc--custom",...toc}):null},children))))};var import_react61=__toESM(require("react"));var import_react54=__toESM(require("react"));var STORY_KIND_PATH_SEPARATOR=/\s*\/\s*/,extractTitle=title=>{let groups=title.trim().split(STORY_KIND_PATH_SEPARATOR);return groups&&groups[groups.length-1]||title},Title3=({children})=>{let context=(0,import_react54.useContext)(DocsContext),content=children||extractTitle(context.storyById().title);return content?import_react54.default.createElement(Title,{className:"sbdocs-title sb-unstyled"},content):null};var import_react55=__toESM(require("react"));var Subtitle2=({children})=>{let docsContext=(0,import_react55.useContext)(DocsContext),{parameters}=docsContext.storyById(),content=children||(parameters==null?void 0:parameters.componentSubtitle);return content?import_react55.default.createElement(Subtitle,{className:"sbdocs-subtitle sb-unstyled"},content):null};var import_react58=__toESM(require("react")),import_ts_dedent6=__toESM(require("ts-dedent")),import_client_logger10=require("@storybook/client-logger");var import_react57=__toESM(require("react"));var import_react56=__toESM(require("react")),import_components36=require("@storybook/components");var Subheading=({children,disableAnchor})=>{if(disableAnchor||typeof children!="string")return import_react56.default.createElement(import_components36.H3,null,children);let tagID=globalThis.encodeURIComponent(children.toLowerCase());return import_react56.default.createElement(HeaderMdx,{as:"h3",id:tagID},children)};var DocsStory=({of,expanded=!0,withToolbar:withToolbarProp=!1,__forceInitialArgs=!1,__primary=!1})=>{var _a,_b;let{story}=useOf(of||"story",["story"]),withToolbar=((_b=(_a=story.parameters.docs)==null?void 0:_a.canvas)==null?void 0:_b.withToolbar)??withToolbarProp;return import_react57.default.createElement(Anchor,{storyId:story.id},expanded&&import_react57.default.createElement(import_react57.default.Fragment,null,import_react57.default.createElement(Subheading,null,story.name),import_react57.default.createElement(DescriptionContainer,{of})),import_react57.default.createElement(Canvas,{of,withToolbar,story:{__forceInitialArgs,__primary},source:{__forceInitialArgs}}))};var Primary=props=>{let{name,of}=props;if("of"in props&&of===void 0)throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");let docsContext=(0,import_react58.useContext)(DocsContext),story;if(of&&(story=useOf(of||"meta",["meta"]).csfFile.stories[0]||null),!story){let storyId=name&&docsContext.storyIdByName(name);story=docsContext.storyById(storyId)}return name&&(0,import_client_logger10.deprecate)(import_ts_dedent6.default`\`name\` prop is deprecated on the Primary block.
     The Primary block should only be used to render the primary story, which is automatically found.
     `),story?import_react58.default.createElement(DocsStory,{of:story.moduleExport,expanded:!1,__primary:!0,withToolbar:!0}):null};var import_react60=__toESM(require("react")),import_theming30=require("@storybook/theming");var import_react59=__toESM(require("react")),import_components37=require("@storybook/components");var Heading2=({children,disableAnchor,...props})=>{if(disableAnchor||typeof children!="string")return import_react59.default.createElement(import_components37.H2,null,children);let tagID=children.toLowerCase().replace(/[^a-z0-9]/gi,"-");return import_react59.default.createElement(HeaderMdx,{as:"h2",id:tagID,...props},children)};var StyledHeading=(0,import_theming30.styled)(Heading2)(({theme})=>({fontSize:`${theme.typography.size.s2-1}px`,fontWeight:theme.typography.weight.bold,lineHeight:"16px",letterSpacing:"0.35em",textTransform:"uppercase",color:theme.textMutedColor,border:0,marginBottom:"12px","&:first-of-type":{marginTop:"56px"}})),Stories=({title="Stories",includePrimary=!0})=>{let{componentStories}=(0,import_react60.useContext)(DocsContext),stories=componentStories().filter(story=>{var _a,_b;return!((_b=(_a=story.parameters)==null?void 0:_a.docs)!=null&&_b.disable)});return includePrimary||(stories=stories.slice(1)),!stories||stories.length===0?null:import_react60.default.createElement(import_react60.default.Fragment,null,import_react60.default.createElement(StyledHeading,null,title),stories.map(story=>story&&import_react60.default.createElement(DocsStory,{key:story.id,of:story.moduleExport,expanded:!0,__forceInitialArgs:!0})))};var DocsPage=()=>{let resolvedOf=useOf("meta",["meta"]),{stories}=resolvedOf.csfFile,isSingleStory=Object.keys(stories).length===1;return import_react61.default.createElement(import_react61.default.Fragment,null,import_react61.default.createElement(Title3,null),import_react61.default.createElement(Subtitle2,null),import_react61.default.createElement(DescriptionContainer,{of:"meta"}),isSingleStory?import_react61.default.createElement(DescriptionContainer,{of:"story"}):null,import_react61.default.createElement(Primary,null),import_react61.default.createElement(Controls3,null),isSingleStory?null:import_react61.default.createElement(Stories,null))};function Docs({context,docsParameter}){let Container=docsParameter.container||DocsContainer,Page=docsParameter.page||DocsPage;return import_react62.default.createElement(Container,{context,theme:docsParameter.theme},import_react62.default.createElement(Page,null))}var import_react63=__toESM(require("react")),import_preview_api6=require("@storybook/preview-api");var import_preview_api5=require("@storybook/preview-api"),import_channels=require("@storybook/channels");var import_preview_api4=require("@storybook/preview-api"),ExternalDocsContext=class extends import_preview_api4.DocsContext{constructor(channel,store,renderStoryToElement,processMetaExports){super(channel,store,renderStoryToElement,[]);this.channel=channel;this.store=store;this.renderStoryToElement=renderStoryToElement;this.processMetaExports=processMetaExports;this.referenceMeta=(metaExports,attach)=>{let csfFile=this.processMetaExports(metaExports);this.referenceCSFFile(csfFile),super.referenceMeta(metaExports,attach)}}};var ConstantMap=class{constructor(prefix){this.prefix=prefix;this.entries=new Map}get(key){return this.entries.has(key)||this.entries.set(key,`${this.prefix}${this.entries.size}`),this.entries.get(key)}},ExternalPreview=class extends import_preview_api5.Preview{constructor(projectAnnotations){super(new import_channels.Channel({}));this.projectAnnotations=projectAnnotations;this.importPaths=new ConstantMap("./importPath/");this.titles=new ConstantMap("title-");this.storyIndex={v:4,entries:{}};this.moduleExportsByImportPath={};this.processMetaExports=metaExports=>{let importPath=this.importPaths.get(metaExports);this.moduleExportsByImportPath[importPath]=metaExports;let title=metaExports.default.title||this.titles.get(metaExports),csfFile=this.storyStore.processCSFFileWithCache(metaExports,importPath,title);return Object.values(csfFile.stories).forEach(({id:id2,name})=>{this.storyIndex.entries[id2]={id:id2,importPath,title,name,type:"story"}}),this.onStoriesChanged({storyIndex:this.storyIndex}),csfFile};this.docsContext=()=>new ExternalDocsContext(this.channel,this.storyStore,this.renderStoryToElement.bind(this),this.processMetaExports.bind(this));this.initialize({getStoryIndex:()=>this.storyIndex,importFn:path=>Promise.resolve(this.moduleExportsByImportPath[path]),getProjectAnnotations:()=>(0,import_preview_api5.composeConfigs)([{parameters:{docs:{story:{inline:!0}}}},this.projectAnnotations])})}};function usePreview(projectAnnotations){let previewRef=(0,import_react63.useRef)();return previewRef.current||(previewRef.current=new ExternalPreview(projectAnnotations)),previewRef.current}function ExternalDocs({projectAnnotationsList,children}){var _a;let projectAnnotations=(0,import_preview_api6.composeConfigs)(projectAnnotationsList),preview2=usePreview(projectAnnotations),docsParameter={...(_a=projectAnnotations.parameters)==null?void 0:_a.docs,page:()=>children};return import_react63.default.createElement(Docs,{docsParameter,context:preview2.docsContext()})}var import_react64=__toESM(require("react")),import_theming31=require("@storybook/theming");var preview,ExternalDocsContainer=({projectAnnotations,children})=>(preview||(preview=new ExternalPreview(projectAnnotations)),import_react64.default.createElement(DocsContext.Provider,{value:preview.docsContext()},import_react64.default.createElement(import_theming31.ThemeProvider,{theme:(0,import_theming31.ensure)(import_theming31.themes.light)},children)));var import_react65=__toESM(require("react"));var Meta=({of})=>{let context=(0,import_react65.useContext)(DocsContext);of&&context.referenceMeta(of,!0);try{let primary=context.storyById();return import_react65.default.createElement(Anchor,{storyId:primary.id})}catch{return null}};var import_react66=__toESM(require("react")),Unstyled=props=>import_react66.default.createElement("div",{...props,className:"sb-unstyled"});var import_react67=__toESM(require("react")),Wrapper12=({children})=>import_react67.default.createElement("div",{style:{fontFamily:"sans-serif"}},children);0&&(module.exports={AddContext,Anchor,AnchorMdx,ArgTypes,ArgsTable,BooleanControl,Canvas,CodeOrSourceMdx,ColorControl,ColorItem,ColorPalette,ComponentsTable,Controls,DateControl,Description,DescriptionType,Docs,DocsContainer,DocsContext,DocsPage,DocsStory,ExternalDocs,ExternalDocsContainer,FilesControl,HeaderMdx,HeadersMdx,Heading,IconGallery,IconItem,Markdown,Meta,NumberControl,ObjectControl,OptionsControl,PRIMARY_STORY,Primary,PureArgsTable,RangeControl,Source,SourceContainer,SourceContext,SourceState,Stories,Story,StoryTable,Subheading,Subtitle,TextControl,Title,Typeset,UNKNOWN_ARGS_HASH,Unstyled,Wrapper,anchorBlockIdFromId,argsHash,assertIsFn,extractComponentArgTypes,extractTitle,format,formatDate,formatTime,getComponent,getStoryId,getStoryProps,parse,parseDate,parseTime,useOf,useSourceProps});

package/dist/index.mjs

@@ -83,7 +83,7 @@ var Wrapper=styled.div(withReset,({theme})=>({backgroundColor:theme.base==="ligh
     `),children)return deprecate(dedent2`Passing children to Canvas is deprecated, please use the \`of\` prop instead to reference a story. 
     
     Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#canvas-block
-  `),isLoading?React17.createElement(PreviewSkeleton,null):React17.createElement(Preview,{...previewProps},children);let layout=props.layout??story.parameters.layout??story.parameters.docs?.canvas?.layout??"padded",withToolbar=props.withToolbar??story.parameters.docs?.canvas?.withToolbar??!1,additionalActions=props.additionalActions??story.parameters.docs?.canvas?.additionalActions,sourceState=props.sourceState??story.parameters.docs?.canvas?.sourceState??"hidden",className=props.className??story.parameters.docs?.canvas?.className;return React17.createElement(Preview,{withSource:sourceState==="none"?void 0:sourceProps,isExpanded:sourceState==="shown",withToolbar,additionalActions,className,layout},React17.createElement(Story2,{of:of||story.moduleExport,meta:props.meta,...props.story}))};var useGlobals2=(story,context)=>{let storyContext=context.getStoryContext(story),[globals,setGlobals]=useState(storyContext.globals);return useEffect(()=>{let onGlobalsUpdated=changed=>{setGlobals(changed.globals);};return context.channel.on(GLOBALS_UPDATED,onGlobalsUpdated),()=>context.channel.off(GLOBALS_UPDATED,onGlobalsUpdated)},[context.channel]),[globals]};var useArgs2=(story,context)=>{let result=useArgsIfDefined(story,context);if(!result)throw new Error("No result when story was defined");return result},useArgsIfDefined=(story,context)=>{let storyContext=story?context.getStoryContext(story):{args:{}},{id:storyId}=story||{id:"none"},[args,setArgs]=useState(storyContext.args);useEffect(()=>{let onArgsUpdated=changed=>{changed.storyId===storyId&&setArgs(changed.args);};return context.channel.on(STORY_ARGS_UPDATED,onArgsUpdated),()=>context.channel.off(STORY_ARGS_UPDATED,onArgsUpdated)},[storyId,context.channel]);let updateArgs=useCallback(updatedArgs=>context.channel.emit(UPDATE_STORY_ARGS,{storyId,updatedArgs}),[storyId,context.channel]),resetArgs=useCallback(argNames=>context.channel.emit(RESET_STORY_ARGS,{storyId,argNames}),[storyId,context.channel]);return story&&[args,updateArgs,resetArgs]};var Controls3=props=>{let{of}=props;if("of"in props&&of===void 0)throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");let context=useContext(DocsContext),{story}=context.resolveOf(of||"story",["story"]),{parameters,argTypes}=story,controlsParameters=parameters.docs?.controls||{},include=props.include??controlsParameters.include,exclude=props.exclude??controlsParameters.exclude,sort=props.sort??controlsParameters.sort,[args,updateArgs,resetArgs]=useArgs2(story,context),[globals]=useGlobals2(story,context),filteredArgTypes=filterArgTypes(argTypes,include,exclude);return React17.createElement(ArgsTable,{rows:filteredArgTypes,args,globals,updateArgs,resetArgs,sort})};var {document:document2}=global,assertIsFn=val=>{if(typeof val!="function")throw new Error(`Expected story function, got: ${val}`);return val},AddContext=props=>{let{children,...rest}=props,parentContext=React17.useContext(DocsContext);return React17.createElement(DocsContext.Provider,{value:{...parentContext,...rest}},children)},CodeOrSourceMdx=({className,children,...rest})=>{if(typeof className!="string"&&(typeof children!="string"||!children.match(/[\n\r]/g)))return React17.createElement(Code,null,children);let language=className&&className.split("-");return React17.createElement(Source,{language:language&&language[1]||"plaintext",format:!1,code:children,...rest})};function navigate(context,url){context.channel.emit(NAVIGATE_URL,url);}var A=components.a,AnchorInPage=({hash,children})=>{let context=useContext(DocsContext);return React17.createElement(A,{href:hash,target:"_self",onClick:event=>{let id=hash.substring(1);document2.getElementById(id)&&navigate(context,hash);}},children)},AnchorMdx=props=>{let{href,target,children,...rest}=props,context=useContext(DocsContext);if(href){if(href.startsWith("#"))return React17.createElement(AnchorInPage,{hash:href},children);if(target!=="_blank"&&!href.startsWith("https://"))return React17.createElement(A,{href,onClick:event=>{event.button===0&&!event.altKey&&!event.ctrlKey&&!event.metaKey&&!event.shiftKey&&(event.preventDefault(),navigate(context,event.currentTarget.getAttribute("href")));},target,...rest},children)}return React17.createElement(A,{...props})},SUPPORTED_MDX_HEADERS=["h1","h2","h3","h4","h5","h6"],OcticonHeaders=SUPPORTED_MDX_HEADERS.reduce((acc,headerType)=>({...acc,[headerType]:styled(headerType)({"& svg":{position:"relative",top:"-0.1em",visibility:"hidden"},"&:hover svg":{visibility:"visible"}})}),{}),OcticonAnchor=styled.a(()=>({float:"left",lineHeight:"inherit",paddingRight:"10px",marginLeft:"-24px",color:"inherit"})),HeaderWithOcticonAnchor=({as,id,children,...rest})=>{let context=useContext(DocsContext),OcticonHeader=OcticonHeaders[as],hash=`#${id}`;return React17.createElement(OcticonHeader,{id,...rest},React17.createElement(OcticonAnchor,{"aria-hidden":"true",href:hash,tabIndex:-1,target:"_self",onClick:event=>{document2.getElementById(id)&&navigate(context,hash);}},React17.createElement(LinkIcon,null)),children)},HeaderMdx=props=>{let{as,id,children,...rest}=props;if(id)return React17.createElement(HeaderWithOcticonAnchor,{as,id,...rest},children);let Component4=as,{as:omittedAs,...withoutAs}=props;return React17.createElement(Component4,{...nameSpaceClassNames(withoutAs,as)})},HeadersMdx=SUPPORTED_MDX_HEADERS.reduce((acc,headerType)=>({...acc,[headerType]:props=>React17.createElement(HeaderMdx,{as:headerType,...props})}),{});var Markdown2=props=>{if(!props.children)return null;if(typeof props.children!="string")throw new Error(dedent2`The Markdown block only accepts children as a single string, but children were of type: '${typeof props.children}'
+  `),isLoading?React17.createElement(PreviewSkeleton,null):React17.createElement(Preview,{...previewProps},children);let layout=props.layout??story.parameters.layout??story.parameters.docs?.canvas?.layout??"padded",withToolbar=props.withToolbar??story.parameters.docs?.canvas?.withToolbar??!1,additionalActions=props.additionalActions??story.parameters.docs?.canvas?.additionalActions,sourceState=props.sourceState??story.parameters.docs?.canvas?.sourceState??"hidden",className=props.className??story.parameters.docs?.canvas?.className;return React17.createElement(Preview,{withSource:sourceState==="none"?void 0:sourceProps,isExpanded:sourceState==="shown",withToolbar,additionalActions,className,layout},React17.createElement(Story2,{of:of||story.moduleExport,meta:props.meta,...props.story}))};var useGlobals2=(story,context)=>{let storyContext=context.getStoryContext(story),[globals,setGlobals]=useState(storyContext.globals);return useEffect(()=>{let onGlobalsUpdated=changed=>{setGlobals(changed.globals);};return context.channel.on(GLOBALS_UPDATED,onGlobalsUpdated),()=>context.channel.off(GLOBALS_UPDATED,onGlobalsUpdated)},[context.channel]),[globals]};var useArgs2=(story,context)=>{let result=useArgsIfDefined(story,context);if(!result)throw new Error("No result when story was defined");return result},useArgsIfDefined=(story,context)=>{let storyContext=story?context.getStoryContext(story):{args:{}},{id:storyId}=story||{id:"none"},[args,setArgs]=useState(storyContext.args);useEffect(()=>{let onArgsUpdated=changed=>{changed.storyId===storyId&&setArgs(changed.args);};return context.channel.on(STORY_ARGS_UPDATED,onArgsUpdated),()=>context.channel.off(STORY_ARGS_UPDATED,onArgsUpdated)},[storyId,context.channel]);let updateArgs=useCallback(updatedArgs=>context.channel.emit(UPDATE_STORY_ARGS,{storyId,updatedArgs}),[storyId,context.channel]),resetArgs=useCallback(argNames=>context.channel.emit(RESET_STORY_ARGS,{storyId,argNames}),[storyId,context.channel]);return story&&[args,updateArgs,resetArgs]};var Controls3=props=>{let{of}=props;if("of"in props&&of===void 0)throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");let context=useContext(DocsContext),{story}=context.resolveOf(of||"story",["story"]),{parameters,argTypes}=story,controlsParameters=parameters.docs?.controls||{},include=props.include??controlsParameters.include,exclude=props.exclude??controlsParameters.exclude,sort=props.sort??controlsParameters.sort,[args,updateArgs,resetArgs]=useArgs2(story,context),[globals]=useGlobals2(story,context),filteredArgTypes=filterArgTypes(argTypes,include,exclude);return React17.createElement(ArgsTable,{rows:filteredArgTypes,args,globals,updateArgs,resetArgs,sort})};var {document:document2}=global,assertIsFn=val=>{if(typeof val!="function")throw new Error(`Expected story function, got: ${val}`);return val},AddContext=props=>{let{children,...rest}=props,parentContext=React17.useContext(DocsContext);return React17.createElement(DocsContext.Provider,{value:{...parentContext,...rest}},children)},CodeOrSourceMdx=({className,children,...rest})=>{if(typeof className!="string"&&(typeof children!="string"||!children.match(/[\n\r]/g)))return React17.createElement(Code,null,children);let language=className&&className.split("-");return React17.createElement(Source,{language:language&&language[1]||"text",format:!1,code:children,...rest})};function navigate(context,url){context.channel.emit(NAVIGATE_URL,url);}var A=components.a,AnchorInPage=({hash,children})=>{let context=useContext(DocsContext);return React17.createElement(A,{href:hash,target:"_self",onClick:event=>{let id=hash.substring(1);document2.getElementById(id)&&navigate(context,hash);}},children)},AnchorMdx=props=>{let{href,target,children,...rest}=props,context=useContext(DocsContext);if(href){if(href.startsWith("#"))return React17.createElement(AnchorInPage,{hash:href},children);if(target!=="_blank"&&!href.startsWith("https://"))return React17.createElement(A,{href,onClick:event=>{event.button===0&&!event.altKey&&!event.ctrlKey&&!event.metaKey&&!event.shiftKey&&(event.preventDefault(),navigate(context,event.currentTarget.getAttribute("href")));},target,...rest},children)}return React17.createElement(A,{...props})},SUPPORTED_MDX_HEADERS=["h1","h2","h3","h4","h5","h6"],OcticonHeaders=SUPPORTED_MDX_HEADERS.reduce((acc,headerType)=>({...acc,[headerType]:styled(headerType)({"& svg":{position:"relative",top:"-0.1em",visibility:"hidden"},"&:hover svg":{visibility:"visible"}})}),{}),OcticonAnchor=styled.a(()=>({float:"left",lineHeight:"inherit",paddingRight:"10px",marginLeft:"-24px",color:"inherit"})),HeaderWithOcticonAnchor=({as,id,children,...rest})=>{let context=useContext(DocsContext),OcticonHeader=OcticonHeaders[as],hash=`#${id}`;return React17.createElement(OcticonHeader,{id,...rest},React17.createElement(OcticonAnchor,{"aria-hidden":"true",href:hash,tabIndex:-1,target:"_self",onClick:event=>{document2.getElementById(id)&&navigate(context,hash);}},React17.createElement(LinkIcon,null)),children)},HeaderMdx=props=>{let{as,id,children,...rest}=props;if(id)return React17.createElement(HeaderWithOcticonAnchor,{as,id,...rest},children);let Component4=as,{as:omittedAs,...withoutAs}=props;return React17.createElement(Component4,{...nameSpaceClassNames(withoutAs,as)})},HeadersMdx=SUPPORTED_MDX_HEADERS.reduce((acc,headerType)=>({...acc,[headerType]:props=>React17.createElement(HeaderMdx,{as:headerType,...props})}),{});var Markdown2=props=>{if(!props.children)return null;if(typeof props.children!="string")throw new Error(dedent2`The Markdown block only accepts children as a single string, but children were of type: '${typeof props.children}'
         This is often caused by not wrapping the child in a template string.
         
         This is invalid:
@@ -99,7 +99,7 @@ var Wrapper=styled.div(withReset,({theme})=>({backgroundColor:theme.base==="ligh
           A paragraph
         \`}
         </Markdown>
-      `);return React17.createElement(Markdown,{...props,options:{forceBlock:!0,overrides:{code:CodeOrSourceMdx,a:AnchorMdx,...HeadersMdx,...props?.options?.overrides},...props?.options}})};var DescriptionType=(DescriptionType2=>(DescriptionType2.INFO="info",DescriptionType2.NOTES="notes",DescriptionType2.DOCGEN="docgen",DescriptionType2.AUTO="auto",DescriptionType2))(DescriptionType||{}),DEPRECATION_MIGRATION_LINK="https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#description-block-parametersnotes-and-parametersinfo",getNotes=notes=>notes&&(typeof notes=="string"?notes:str(notes.markdown)||str(notes.text)),getInfo=info=>info&&(typeof info=="string"?info:str(info.text)),noDescription=component=>null,getDescriptionFromResolvedOf=resolvedOf=>{switch(resolvedOf.type){case"story":return resolvedOf.story.parameters.docs?.description?.story||null;case"meta":{let{parameters,component}=resolvedOf.preparedMeta,metaDescription=parameters.docs?.description?.component;return metaDescription||parameters.docs?.extractComponentDescription?.(component,{component,parameters})||null}case"component":{let{component,projectAnnotations:{parameters}}=resolvedOf;return parameters.docs?.extractComponentDescription?.(component,{component,parameters})||null}default:throw new Error(`Unrecognized module type resolved from 'useOf', got: ${resolvedOf.type}`)}},getDescriptionFromDeprecatedProps=({type,markdown,children},{storyById})=>{let{component,parameters}=storyById();if(children||markdown)return children||markdown;let{notes,info,docs}=parameters;(notes||info)&&deprecate(`Using 'parameters.notes' or 'parameters.info' properties to describe stories is deprecated. See ${DEPRECATION_MIGRATION_LINK}`);let{extractComponentDescription=noDescription,description}=docs||{},componentDescriptionParameter=description?.component;if(componentDescriptionParameter)return componentDescriptionParameter;switch(type){case"info":return getInfo(info);case"notes":return getNotes(notes);case"docgen":case"auto":default:return extractComponentDescription(component,{component,...parameters})}},DescriptionContainer=props=>{let{of,type,markdown:markdownProp,children}=props;if("of"in props&&of===void 0)throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");let context=useContext(DocsContext),resolvedOf=useOf(of||"meta"),markdown;return type||markdownProp||children?markdown=getDescriptionFromDeprecatedProps(props,context):markdown=getDescriptionFromResolvedOf(resolvedOf),type&&deprecate(`Manually specifying description type is deprecated. See ${DEPRECATION_MIGRATION_LINK}`),markdownProp&&deprecate(`The 'markdown' prop on the Description block is deprecated. See ${DEPRECATION_MIGRATION_LINK}`),children&&deprecate(`The 'children' prop on the Description block is deprecated. See ${DEPRECATION_MIGRATION_LINK}`),markdown?React17.createElement(Markdown2,null,markdown):null};var Wrapper10=styled.div(({theme})=>({width:"10rem","@media (max-width: 768px)":{display:"none"}})),Content2=styled.div(({theme})=>({position:"fixed",bottom:0,top:0,width:"10rem",paddingTop:"4rem",paddingBottom:"2rem",overflowY:"auto",fontFamily:theme.typography.fonts.base,fontSize:theme.typography.size.s2,WebkitFontSmoothing:"antialiased",MozOsxFontSmoothing:"grayscale",WebkitTapHighlightColor:"rgba(0, 0, 0, 0)",WebkitOverflowScrolling:"touch","& *":{boxSizing:"border-box"},"& > .toc-wrapper > .toc-list":{paddingLeft:0,borderLeft:`solid 2px ${theme.color.mediumlight}`,".toc-list":{paddingLeft:0,borderLeft:`solid 2px ${theme.color.mediumlight}`,".toc-list":{paddingLeft:0,borderLeft:`solid 2px ${theme.color.mediumlight}`}}},"& .toc-list-item":{position:"relative",listStyleType:"none",marginLeft:20,paddingTop:3,paddingBottom:3},"& .toc-list-item::before":{content:'""',position:"absolute",height:"100%",top:0,left:0,transform:"translateX(calc(-2px - 20px))",borderLeft:`solid 2px ${theme.color.mediumdark}`,opacity:0,transition:"opacity 0.2s"},"& .toc-list-item.is-active-li::before":{opacity:1},"& .toc-list-item > a":{color:theme.color.defaultText,textDecoration:"none"},"& .toc-list-item.is-active-li > a":{fontWeight:600,color:theme.color.secondary,textDecoration:"none"}})),Heading=styled.p(({theme})=>({fontWeight:600,fontSize:"0.875em",color:theme.textColor,textTransform:"uppercase",marginBottom:10})),OptionalTitle=({title})=>title===null?null:typeof title=="string"?React17.createElement(Heading,null,title):title,TableOfContents=({title,disable,headingSelector,contentsSelector,ignoreSelector,unsafeTocbotOptions})=>(useEffect(()=>{let configuration={tocSelector:".toc-wrapper",contentSelector:contentsSelector??".sbdocs-content",headingSelector:headingSelector??"h3",ignoreSelector:ignoreSelector??".skip-toc",headingsOffset:40,scrollSmoothOffset:-40,orderedList:!1,onClick:()=>!1,...unsafeTocbotOptions},timeout=setTimeout(()=>tocbot.init(configuration),100);return ()=>{clearTimeout(timeout),tocbot.destroy();}},[disable]),React17.createElement(React17.Fragment,null,React17.createElement(Wrapper10,null,disable?null:React17.createElement(Content2,null,React17.createElement(OptionalTitle,{title:title||null}),React17.createElement("div",{className:"toc-wrapper"})))));var {document:document3,window:globalWindow3}=global,DocsContainer=({context,theme,children})=>{let toc;try{toc=context.resolveOf("meta",["meta"]).preparedMeta.parameters?.docs?.toc;}catch{toc=context?.projectAnnotations?.parameters?.docs?.toc;}return useEffect(()=>{let url;try{if(url=new URL(globalWindow3.parent.location.toString()),url.hash){let element=document3.getElementById(url.hash.substring(1));element&&setTimeout(()=>{scrollToElement(element);},200);}}catch{}}),React17.createElement(DocsContext.Provider,{value:context},React17.createElement(SourceContainer,{channel:context.channel},React17.createElement(ThemeProvider,{theme:ensure(theme)},React17.createElement(DocsPageWrapper,{toc:toc?React17.createElement(TableOfContents,{className:"sbdocs sbdocs-toc--custom",...toc}):null},children))))};var STORY_KIND_PATH_SEPARATOR=/\s*\/\s*/,extractTitle=title=>{let groups=title.trim().split(STORY_KIND_PATH_SEPARATOR);return groups&&groups[groups.length-1]||title},Title3=({children})=>{let context=useContext(DocsContext),content=children||extractTitle(context.storyById().title);return content?React17.createElement(Title,{className:"sbdocs-title sb-unstyled"},content):null};var Subtitle2=({children})=>{let docsContext=useContext(DocsContext),{parameters}=docsContext.storyById(),content=children||parameters?.componentSubtitle;return content?React17.createElement(Subtitle,{className:"sbdocs-subtitle sb-unstyled"},content):null};var Subheading=({children,disableAnchor})=>{if(disableAnchor||typeof children!="string")return React17.createElement(H3,null,children);let tagID=children.toLowerCase().replace(/[^a-z0-9]/gi,"-");return React17.createElement(HeaderMdx,{as:"h3",id:tagID},children)};var DocsStory=({of,expanded=!0,withToolbar:withToolbarProp=!1,__forceInitialArgs=!1,__primary=!1})=>{let{story}=useOf(of||"story",["story"]),withToolbar=story.parameters.docs?.canvas?.withToolbar??withToolbarProp;return React17.createElement(Anchor,{storyId:story.id},expanded&&React17.createElement(React17.Fragment,null,React17.createElement(Subheading,null,story.name),React17.createElement(DescriptionContainer,{of})),React17.createElement(Canvas,{of,withToolbar,story:{__forceInitialArgs,__primary},source:{__forceInitialArgs}}))};var Primary=props=>{let{name,of}=props;if("of"in props&&of===void 0)throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");let docsContext=useContext(DocsContext),story;if(of&&(story=useOf(of||"meta",["meta"]).csfFile.stories[0]||null),!story){let storyId=name&&docsContext.storyIdByName(name);story=docsContext.storyById(storyId);}return name&&deprecate(dedent2`\`name\` prop is deprecated on the Primary block.
+      `);return React17.createElement(Markdown,{...props,options:{forceBlock:!0,overrides:{code:CodeOrSourceMdx,a:AnchorMdx,...HeadersMdx,...props?.options?.overrides},...props?.options}})};var DescriptionType=(DescriptionType2=>(DescriptionType2.INFO="info",DescriptionType2.NOTES="notes",DescriptionType2.DOCGEN="docgen",DescriptionType2.AUTO="auto",DescriptionType2))(DescriptionType||{}),DEPRECATION_MIGRATION_LINK="https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#description-block-parametersnotes-and-parametersinfo",getNotes=notes=>notes&&(typeof notes=="string"?notes:str(notes.markdown)||str(notes.text)),getInfo=info=>info&&(typeof info=="string"?info:str(info.text)),noDescription=component=>null,getDescriptionFromResolvedOf=resolvedOf=>{switch(resolvedOf.type){case"story":return resolvedOf.story.parameters.docs?.description?.story||null;case"meta":{let{parameters,component}=resolvedOf.preparedMeta,metaDescription=parameters.docs?.description?.component;return metaDescription||parameters.docs?.extractComponentDescription?.(component,{component,parameters})||null}case"component":{let{component,projectAnnotations:{parameters}}=resolvedOf;return parameters.docs?.extractComponentDescription?.(component,{component,parameters})||null}default:throw new Error(`Unrecognized module type resolved from 'useOf', got: ${resolvedOf.type}`)}},getDescriptionFromDeprecatedProps=({type,markdown,children},{storyById})=>{let{component,parameters}=storyById();if(children||markdown)return children||markdown;let{notes,info,docs}=parameters;(notes||info)&&deprecate(`Using 'parameters.notes' or 'parameters.info' properties to describe stories is deprecated. See ${DEPRECATION_MIGRATION_LINK}`);let{extractComponentDescription=noDescription,description}=docs||{},componentDescriptionParameter=description?.component;if(componentDescriptionParameter)return componentDescriptionParameter;switch(type){case"info":return getInfo(info);case"notes":return getNotes(notes);case"docgen":case"auto":default:return extractComponentDescription(component,{component,...parameters})}},DescriptionContainer=props=>{let{of,type,markdown:markdownProp,children}=props;if("of"in props&&of===void 0)throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");let context=useContext(DocsContext),resolvedOf=useOf(of||"meta"),markdown;return type||markdownProp||children?markdown=getDescriptionFromDeprecatedProps(props,context):markdown=getDescriptionFromResolvedOf(resolvedOf),type&&deprecate(`Manually specifying description type is deprecated. See ${DEPRECATION_MIGRATION_LINK}`),markdownProp&&deprecate(`The 'markdown' prop on the Description block is deprecated. See ${DEPRECATION_MIGRATION_LINK}`),children&&deprecate(`The 'children' prop on the Description block is deprecated. See ${DEPRECATION_MIGRATION_LINK}`),markdown?React17.createElement(Markdown2,null,markdown):null};var Wrapper10=styled.div(({theme})=>({width:"10rem","@media (max-width: 768px)":{display:"none"}})),Content2=styled.div(({theme})=>({position:"fixed",bottom:0,top:0,width:"10rem",paddingTop:"4rem",paddingBottom:"2rem",overflowY:"auto",fontFamily:theme.typography.fonts.base,fontSize:theme.typography.size.s2,WebkitFontSmoothing:"antialiased",MozOsxFontSmoothing:"grayscale",WebkitTapHighlightColor:"rgba(0, 0, 0, 0)",WebkitOverflowScrolling:"touch","& *":{boxSizing:"border-box"},"& > .toc-wrapper > .toc-list":{paddingLeft:0,borderLeft:`solid 2px ${theme.color.mediumlight}`,".toc-list":{paddingLeft:0,borderLeft:`solid 2px ${theme.color.mediumlight}`,".toc-list":{paddingLeft:0,borderLeft:`solid 2px ${theme.color.mediumlight}`}}},"& .toc-list-item":{position:"relative",listStyleType:"none",marginLeft:20,paddingTop:3,paddingBottom:3},"& .toc-list-item::before":{content:'""',position:"absolute",height:"100%",top:0,left:0,transform:"translateX(calc(-2px - 20px))",borderLeft:`solid 2px ${theme.color.mediumdark}`,opacity:0,transition:"opacity 0.2s"},"& .toc-list-item.is-active-li::before":{opacity:1},"& .toc-list-item > a":{color:theme.color.defaultText,textDecoration:"none"},"& .toc-list-item.is-active-li > a":{fontWeight:600,color:theme.color.secondary,textDecoration:"none"}})),Heading=styled.p(({theme})=>({fontWeight:600,fontSize:"0.875em",color:theme.textColor,textTransform:"uppercase",marginBottom:10})),OptionalTitle=({title})=>title===null?null:typeof title=="string"?React17.createElement(Heading,null,title):title,TableOfContents=({title,disable,headingSelector,contentsSelector,ignoreSelector,unsafeTocbotOptions})=>(useEffect(()=>{let configuration={tocSelector:".toc-wrapper",contentSelector:contentsSelector??".sbdocs-content",headingSelector:headingSelector??"h3",ignoreSelector:ignoreSelector??".skip-toc",headingsOffset:40,scrollSmoothOffset:-40,orderedList:!1,onClick:()=>!1,...unsafeTocbotOptions},timeout=setTimeout(()=>tocbot.init(configuration),100);return ()=>{clearTimeout(timeout),tocbot.destroy();}},[disable]),React17.createElement(React17.Fragment,null,React17.createElement(Wrapper10,null,disable?null:React17.createElement(Content2,null,React17.createElement(OptionalTitle,{title:title||null}),React17.createElement("div",{className:"toc-wrapper"})))));var {document:document3,window:globalWindow3}=global,DocsContainer=({context,theme,children})=>{let toc;try{toc=context.resolveOf("meta",["meta"]).preparedMeta.parameters?.docs?.toc;}catch{toc=context?.projectAnnotations?.parameters?.docs?.toc;}return useEffect(()=>{let url;try{if(url=new URL(globalWindow3.parent.location.toString()),url.hash){let element=document3.getElementById(url.hash.substring(1));element&&setTimeout(()=>{scrollToElement(element);},200);}}catch{}}),React17.createElement(DocsContext.Provider,{value:context},React17.createElement(SourceContainer,{channel:context.channel},React17.createElement(ThemeProvider,{theme:ensure(theme)},React17.createElement(DocsPageWrapper,{toc:toc?React17.createElement(TableOfContents,{className:"sbdocs sbdocs-toc--custom",...toc}):null},children))))};var STORY_KIND_PATH_SEPARATOR=/\s*\/\s*/,extractTitle=title=>{let groups=title.trim().split(STORY_KIND_PATH_SEPARATOR);return groups&&groups[groups.length-1]||title},Title3=({children})=>{let context=useContext(DocsContext),content=children||extractTitle(context.storyById().title);return content?React17.createElement(Title,{className:"sbdocs-title sb-unstyled"},content):null};var Subtitle2=({children})=>{let docsContext=useContext(DocsContext),{parameters}=docsContext.storyById(),content=children||parameters?.componentSubtitle;return content?React17.createElement(Subtitle,{className:"sbdocs-subtitle sb-unstyled"},content):null};var Subheading=({children,disableAnchor})=>{if(disableAnchor||typeof children!="string")return React17.createElement(H3,null,children);let tagID=globalThis.encodeURIComponent(children.toLowerCase());return React17.createElement(HeaderMdx,{as:"h3",id:tagID},children)};var DocsStory=({of,expanded=!0,withToolbar:withToolbarProp=!1,__forceInitialArgs=!1,__primary=!1})=>{let{story}=useOf(of||"story",["story"]),withToolbar=story.parameters.docs?.canvas?.withToolbar??withToolbarProp;return React17.createElement(Anchor,{storyId:story.id},expanded&&React17.createElement(React17.Fragment,null,React17.createElement(Subheading,null,story.name),React17.createElement(DescriptionContainer,{of})),React17.createElement(Canvas,{of,withToolbar,story:{__forceInitialArgs,__primary},source:{__forceInitialArgs}}))};var Primary=props=>{let{name,of}=props;if("of"in props&&of===void 0)throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");let docsContext=useContext(DocsContext),story;if(of&&(story=useOf(of||"meta",["meta"]).csfFile.stories[0]||null),!story){let storyId=name&&docsContext.storyIdByName(name);story=docsContext.storyById(storyId);}return name&&deprecate(dedent2`\`name\` prop is deprecated on the Primary block.
     The Primary block should only be used to render the primary story, which is automatically found.
     `),story?React17.createElement(DocsStory,{of:story.moduleExport,expanded:!1,__primary:!0,withToolbar:!0}):null};var Heading2=({children,disableAnchor,...props})=>{if(disableAnchor||typeof children!="string")return React17.createElement(H2,null,children);let tagID=children.toLowerCase().replace(/[^a-z0-9]/gi,"-");return React17.createElement(HeaderMdx,{as:"h2",id:tagID,...props},children)};var StyledHeading=styled(Heading2)(({theme})=>({fontSize:`${theme.typography.size.s2-1}px`,fontWeight:theme.typography.weight.bold,lineHeight:"16px",letterSpacing:"0.35em",textTransform:"uppercase",color:theme.textMutedColor,border:0,marginBottom:"12px","&:first-of-type":{marginTop:"56px"}})),Stories=({title="Stories",includePrimary=!0})=>{let{componentStories}=useContext(DocsContext),stories=componentStories().filter(story=>!story.parameters?.docs?.disable);return includePrimary||(stories=stories.slice(1)),!stories||stories.length===0?null:React17.createElement(React17.Fragment,null,React17.createElement(StyledHeading,null,title),stories.map(story=>story&&React17.createElement(DocsStory,{key:story.id,of:story.moduleExport,expanded:!0,__forceInitialArgs:!0})))};var DocsPage=()=>{let resolvedOf=useOf("meta",["meta"]),{stories}=resolvedOf.csfFile,isSingleStory=Object.keys(stories).length===1;return React17.createElement(React17.Fragment,null,React17.createElement(Title3,null),React17.createElement(Subtitle2,null),React17.createElement(DescriptionContainer,{of:"meta"}),isSingleStory?React17.createElement(DescriptionContainer,{of:"story"}):null,React17.createElement(Primary,null),React17.createElement(Controls3,null),isSingleStory?null:React17.createElement(Stories,null))};function Docs({context,docsParameter}){let Container=docsParameter.container||DocsContainer,Page=docsParameter.page||DocsPage;return React17.createElement(Container,{context,theme:docsParameter.theme},React17.createElement(Page,null))}var ExternalDocsContext=class extends DocsContext$1{constructor(channel,store,renderStoryToElement,processMetaExports){super(channel,store,renderStoryToElement,[]);this.channel=channel;this.store=store;this.renderStoryToElement=renderStoryToElement;this.processMetaExports=processMetaExports;this.referenceMeta=(metaExports,attach)=>{let csfFile=this.processMetaExports(metaExports);this.referenceCSFFile(csfFile),super.referenceMeta(metaExports,attach);};}};var ConstantMap=class{constructor(prefix){this.prefix=prefix;this.entries=new Map;}get(key){return this.entries.has(key)||this.entries.set(key,`${this.prefix}${this.entries.size}`),this.entries.get(key)}},ExternalPreview=class extends Preview$1{constructor(projectAnnotations){super(new Channel({}));this.projectAnnotations=projectAnnotations;this.importPaths=new ConstantMap("./importPath/");this.titles=new ConstantMap("title-");this.storyIndex={v:4,entries:{}};this.moduleExportsByImportPath={};this.processMetaExports=metaExports=>{let importPath=this.importPaths.get(metaExports);this.moduleExportsByImportPath[importPath]=metaExports;let title=metaExports.default.title||this.titles.get(metaExports),csfFile=this.storyStore.processCSFFileWithCache(metaExports,importPath,title);return Object.values(csfFile.stories).forEach(({id,name})=>{this.storyIndex.entries[id]={id,importPath,title,name,type:"story"};}),this.onStoriesChanged({storyIndex:this.storyIndex}),csfFile};this.docsContext=()=>new ExternalDocsContext(this.channel,this.storyStore,this.renderStoryToElement.bind(this),this.processMetaExports.bind(this));this.initialize({getStoryIndex:()=>this.storyIndex,importFn:path=>Promise.resolve(this.moduleExportsByImportPath[path]),getProjectAnnotations:()=>composeConfigs([{parameters:{docs:{story:{inline:!0}}}},this.projectAnnotations])});}};function usePreview(projectAnnotations){let previewRef=useRef();return previewRef.current||(previewRef.current=new ExternalPreview(projectAnnotations)),previewRef.current}function ExternalDocs({projectAnnotationsList,children}){let projectAnnotations=composeConfigs(projectAnnotationsList),preview2=usePreview(projectAnnotations),docsParameter={...projectAnnotations.parameters?.docs,page:()=>children};return React17.createElement(Docs,{docsParameter,context:preview2.docsContext()})}var preview,ExternalDocsContainer=({projectAnnotations,children})=>(preview||(preview=new ExternalPreview(projectAnnotations)),React17.createElement(DocsContext.Provider,{value:preview.docsContext()},React17.createElement(ThemeProvider,{theme:ensure(themes.light)},children)));var Meta=({of})=>{let context=useContext(DocsContext);of&&context.referenceMeta(of,!0);try{let primary=context.storyById();return React17.createElement(Anchor,{storyId:primary.id})}catch{return null}};var Unstyled=props=>React17.createElement("div",{...props,className:"sb-unstyled"});var Wrapper11=({children})=>React17.createElement("div",{style:{fontFamily:"sans-serif"}},children);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/blocks",
-  "version": "8.0.0-alpha.0",
+  "version": "8.0.0-alpha.2",
   "description": "Storybook Doc Blocks",
   "keywords": [
     "storybook"
@@ -44,18 +44,18 @@
     "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/channels": "8.0.0-alpha.0",
-    "@storybook/client-logger": "8.0.0-alpha.0",
-    "@storybook/components": "8.0.0-alpha.0",
-    "@storybook/core-events": "8.0.0-alpha.0",
+    "@storybook/channels": "8.0.0-alpha.2",
+    "@storybook/client-logger": "8.0.0-alpha.2",
+    "@storybook/components": "8.0.0-alpha.2",
+    "@storybook/core-events": "8.0.0-alpha.2",
     "@storybook/csf": "^0.1.2",
-    "@storybook/docs-tools": "8.0.0-alpha.0",
+    "@storybook/docs-tools": "8.0.0-alpha.2",
     "@storybook/global": "^5.0.0",
     "@storybook/icons": "^1.2.1",
-    "@storybook/manager-api": "8.0.0-alpha.0",
-    "@storybook/preview-api": "8.0.0-alpha.0",
-    "@storybook/theming": "8.0.0-alpha.0",
-    "@storybook/types": "8.0.0-alpha.0",
+    "@storybook/manager-api": "8.0.0-alpha.2",
+    "@storybook/preview-api": "8.0.0-alpha.2",
+    "@storybook/theming": "8.0.0-alpha.2",
+    "@storybook/types": "8.0.0-alpha.2",
     "@types/lodash": "^4.14.167",
     "color-convert": "^2.0.1",
     "dequal": "^2.0.2",
@@ -70,7 +70,7 @@
     "util-deprecate": "^1.0.2"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "8.0.0-alpha.0",
+    "@storybook/addon-actions": "8.0.0-alpha.2",
     "@types/color-convert": "^2.0.0"
   },
   "peerDependencies": {