@storybook/manager 0.0.0-pr-24575-sha-3de4e9e0 → 0.0.0-pr-24575-sha-94eee1ff
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{chunk-RG3ESG6T.js → chunk-FZFE7BEW.js} +2 -2
- package/dist/index.js +1 -1
- package/dist/runtime.js +1 -1
- package/package.json +10 -10
|
@@ -48,7 +48,7 @@ Output:
|
|
|
48
48
|
it's possible a CORS error happened.
|
|
49
49
|
|
|
50
50
|
Please check your dev-tools network tab.
|
|
51
|
-
`});let versions=ref.versions&&Object.keys(ref.versions).length?ref.versions:loadedData.versions;await api.setRef(id,{id,url:urlParseResult.url,...loadedData,...versions?{versions}:{},type:loadedData.storyIndex?"lazy":"auto-inject"})},getRefs:()=>{let{refs:refs22={}}=store22.getState();return refs22},setRef:(id,{storyIndex,setStoriesData,...rest},ready=!1)=>{if(singleStory)return;let{storyMapper=defaultStoryMapper}=provider.getConfig(),ref=api.getRefs()[id],index2;setStoriesData?index2=transformSetStoriesStoryDataToStoriesHash(map(setStoriesData,ref,{storyMapper}),{provider,docsOptions,filters:{},status:{}}):storyIndex&&(index2=transformStoryIndexToStoriesHash(storyIndex,{provider,docsOptions,filters:{},status:{}})),index2&&(index2=addRefIds(index2,ref)),api.updateRef(id,{index:index2,...rest})},updateRef:(id,data)=>{let{[id]:ref,...updated}=api.getRefs();updated[id]={...ref,...data};let ordered=Object.keys(initialState).reduce((obj,key2)=>(obj[key2]=updated[key2],obj),{});store22.setState({refs:ordered})}},refs2=!singleStory&&scope.REFS||{},initialState=refs2;return runCheck&&Object.entries(refs2).forEach(([id,ref])=>{api.checkRef({...ref,stories:{}})}),{api,state:{refs:initialState}}},getEventMetadata=(context,fullAPI)=>{let{source:source2,refId,type}=context,[sourceType,sourceLocation]=getSourceType(source2,refId),ref=refId&&fullAPI.getRefs()[refId]?fullAPI.getRefs()[refId]:fullAPI.findRef(sourceLocation),meta={source:source2,sourceType,sourceLocation,refId,ref,type};switch(!0){case typeof refId=="string":case sourceType==="local":case sourceType==="external":return meta;default:return logger.warn(`Received a ${type} frame that was not configured as a ref`),null}},{FEATURES,fetch:fetch2}=scope,STORY_INDEX_PATH="./index.json",removedOptions=["enableShortcuts","theme","showRoots"];function removeRemovedOptions(options3){if(!options3||typeof options3=="string")return options3;let result2={...options3};return removedOptions.forEach(option=>{option in result2&&delete result2[option]}),result2}var init7=({fullAPI,store:store22,navigate,provider,storyId:initialStoryId,viewMode:initialViewMode,docsOptions={}})=>{let api={storyId:N,getData:(storyId,refId)=>{let result2=api.resolveStory(storyId,refId);if(result2?.type==="story"||result2?.type==="docs")return result2},isPrepared:(storyId,refId)=>{let data=api.getData(storyId,refId);return data.type==="story"?data.prepared:!0},resolveStory:(storyId,refId)=>{let{refs:refs2,index:index2}=store22.getState();return refId&&!refs2[refId]?null:refId?refs2[refId].index?refs2[refId].index[storyId]:void 0:index2?index2[storyId]:void 0},getCurrentStoryData:()=>{let{storyId,refId}=store22.getState();return api.getData(storyId,refId)},getParameters:(storyIdOrCombo,parameterName)=>{let{storyId,refId}=typeof storyIdOrCombo=="string"?{storyId:storyIdOrCombo,refId:void 0}:storyIdOrCombo,data=api.getData(storyId,refId);if(["story","docs"].includes(data?.type)){let{parameters}=data;if(parameters)return parameterName?parameters[parameterName]:parameters}return null},getCurrentParameter:parameterName=>{let{storyId,refId}=store22.getState();return api.getParameters({storyId,refId},parameterName)||void 0},jumpToComponent:direction=>{let{index:index2,storyId,refs:refs2,refId}=store22.getState();if(!api.getData(storyId,refId))return;let hash=refId?refs2[refId].index||{}:index2,result2=api.findSiblingStoryId(storyId,hash,direction,!0);result2&&api.selectStory(result2,void 0,{ref:refId})},jumpToStory:direction=>{let{index:index2,storyId,refs:refs2,refId}=store22.getState(),story=api.getData(storyId,refId);if(!story)return;let hash=story.refId?refs2[story.refId].index:index2,result2=api.findSiblingStoryId(storyId,hash,direction,!1);result2&&api.selectStory(result2,void 0,{ref:refId})},selectFirstStory:()=>{let{index:index2}=store22.getState(),firstStory=Object.keys(index2).find(id=>index2[id].type==="story");if(firstStory){api.selectStory(firstStory);return}navigate("/")},selectStory:(titleOrId=void 0,name2=void 0,options3={})=>{let{ref}=options3,{storyId,index:index2,refs:refs2}=store22.getState(),hash=ref?refs2[ref].index:index2,kindSlug=storyId?.split("--",2)[0];if(name2)if(titleOrId){let id=ref?`${ref}_${N(titleOrId,name2)}`:N(titleOrId,name2);if(hash[id])api.selectStory(id,void 0,options3);else{let entry=hash[L(titleOrId)];if(entry?.type==="component"){let foundId=entry.children.find(childId=>hash[childId].name===name2);foundId&&api.selectStory(foundId,void 0,options3)}}}else{let id=N(kindSlug,name2);api.selectStory(id,void 0,options3)}else{let entry=titleOrId?hash[titleOrId]||hash[L(titleOrId)]:hash[kindSlug];if(!entry)throw new Error(`Unknown id or title: '${titleOrId}'`);store22.setState({settings:{...store22.getState().settings,lastTrackedStoryId:entry.id}});let leafEntry=api.findLeafEntry(hash,entry.id),fullId=leafEntry.refId?`${leafEntry.refId}_${leafEntry.id}`:leafEntry.id;navigate(`/${leafEntry.type}/${fullId}`)}},findLeafEntry(index2,storyId){let entry=index2[storyId];if(entry.type==="docs"||entry.type==="story")return entry;let childStoryId=entry.children[0];return api.findLeafEntry(index2,childStoryId)},findLeafStoryId(index2,storyId){return api.findLeafEntry(index2,storyId)?.id},findSiblingStoryId(storyId,index2,direction,toSiblingGroup){if(toSiblingGroup){let lookupList2=getComponentLookupList(index2),position2=lookupList2.findIndex(i3=>i3.includes(storyId));return position2===lookupList2.length-1&&direction>0||position2===0&&direction<0?void 0:lookupList2[position2+direction]?lookupList2[position2+direction][0]:void 0}let lookupList=getStoriesLookupList(index2),position=lookupList.indexOf(storyId);if(!(position===lookupList.length-1&&direction>0)&&!(position===0&&direction<0))return lookupList[position+direction]},updateStoryArgs:(story,updatedArgs)=>{let{id:storyId,refId}=story;provider.channel.emit(UPDATE_STORY_ARGS,{storyId,updatedArgs,options:{target:refId}})},resetStoryArgs:(story,argNames)=>{let{id:storyId,refId}=story;provider.channel.emit(RESET_STORY_ARGS,{storyId,argNames,options:{target:refId}})},fetchIndex:async()=>{try{let result2=await fetch2(STORY_INDEX_PATH);if(result2.status!==200)throw new Error(await result2.text());let storyIndex=await result2.json();if(storyIndex.v<3){logger.warn(`Skipping story index with version v${storyIndex.v}, awaiting SET_STORIES.`);return}await api.setIndex(storyIndex)}catch(err){await store22.setState({indexError:err})}},setIndex:async input=>{let{index:oldHash,status,filters}=store22.getState(),newHash=transformStoryIndexToStoriesHash(input,{provider,docsOptions,status,filters}),output=addPreparedStories(newHash,oldHash);await store22.setState({internal_index:input,index:output,indexError:void 0})},updateStory:async(storyId,update2,ref)=>{if(ref){let{id:refId,index:index2}=ref;index2[storyId]={...index2[storyId],...update2},await fullAPI.updateRef(refId,{index:index2})}else{let{index:index2}=store22.getState();index2[storyId]={...index2[storyId],...update2},await store22.setState({index:index2})}},updateDocs:async(docsId,update2,ref)=>{if(ref){let{id:refId,index:index2}=ref;index2[docsId]={...index2[docsId],...update2},await fullAPI.updateRef(refId,{index:index2})}else{let{index:index2}=store22.getState();index2[docsId]={...index2[docsId],...update2},await store22.setState({index:index2})}},setPreviewInitialized:async ref=>{ref?fullAPI.updateRef(ref.id,{previewInitialized:!0}):store22.setState({previewInitialized:!0})},experimental_updateStatus:async(id,input)=>{let{status,internal_index:index2}=store22.getState(),newStatus={...status},update2=typeof input=="function"?input(status):input;Object.keys(update2).length!==0&&(Object.entries(update2).forEach(([storyId,value2])=>{newStatus[storyId]={...newStatus[storyId]||{}},value2===null?delete newStatus[storyId][id]:newStatus[storyId][id]=value2,Object.keys(newStatus[storyId]).length===0&&delete newStatus[storyId]}),await store22.setState({status:newStatus},{persistence:"session"}),await api.setIndex(index2))},experimental_setFilter:async(id,filterFunction)=>{let{internal_index:index2}=store22.getState();await store22.setState({filters:{...store22.getState().filters,[id]:filterFunction}}),await api.setIndex(index2)}};provider.channel.on(STORY_SPECIFIED,function({storyId,viewMode}){let{sourceType}=getEventMetadata(this,fullAPI);if(sourceType==="local"){let state=store22.getState(),isCanvasRoute=state.path==="/"||state.viewMode==="story"||state.viewMode==="docs",stateHasSelection=state.viewMode&&state.storyId,stateSelectionDifferent=state.viewMode!==viewMode||state.storyId!==storyId,{type}=state.index[state.storyId]||{};isCanvasRoute&&(stateHasSelection&&stateSelectionDifferent&&!(type==="root"||type==="component"||type==="group")?provider.channel.emit(SET_CURRENT_STORY,{storyId:state.storyId,viewMode:state.viewMode}):stateSelectionDifferent&&navigate(`/${viewMode}/${storyId}`))}}),provider.channel.on(CURRENT_STORY_WAS_SET,function(){let{ref}=getEventMetadata(this,fullAPI);api.setPreviewInitialized(ref)}),provider.channel.on(STORY_CHANGED,function(){let{sourceType}=getEventMetadata(this,fullAPI);if(sourceType==="local"){let options3=api.getCurrentParameter("options");options3&&fullAPI.setOptions(removeRemovedOptions(options3))}}),provider.channel.on(STORY_PREPARED,function({id,...update2}){let{ref,sourceType}=getEventMetadata(this,fullAPI);if(api.updateStory(id,{...update2,prepared:!0},ref),!ref&&!store22.getState().hasCalledSetOptions){let{options:options3}=update2.parameters;fullAPI.setOptions(removeRemovedOptions(options3)),store22.setState({hasCalledSetOptions:!0})}if(sourceType==="local"){let{storyId,index:index2,refId}=store22.getState(),toBePreloaded=Array.from(new Set([api.findSiblingStoryId(storyId,index2,1,!0),api.findSiblingStoryId(storyId,index2,-1,!0)])).filter(Boolean);provider.channel.emit(PRELOAD_ENTRIES,{ids:toBePreloaded,options:{target:refId}})}}),provider.channel.on(DOCS_PREPARED,function({id,...update2}){let{ref}=getEventMetadata(this,fullAPI);api.updateStory(id,{...update2,prepared:!0},ref)}),provider.channel.on(SET_INDEX,function(index2){let{ref}=getEventMetadata(this,fullAPI);if(ref)fullAPI.setRef(ref.id,{...ref,storyIndex:index2},!0);else{api.setIndex(index2);let options3=api.getCurrentParameter("options");fullAPI.setOptions(removeRemovedOptions(options3))}}),provider.channel.on(SET_STORIES,function(data){let{ref}=getEventMetadata(this,fullAPI),setStoriesData=data.v?denormalizeStoryParameters(data):data.stories;if(ref)fullAPI.setRef(ref.id,{...ref,setStoriesData},!0);else throw new Error("Cannot call SET_STORIES for local frame")}),provider.channel.on(SELECT_STORY,function({kind,title=kind,story,name:name2=story,storyId,...rest}){let{ref}=getEventMetadata(this,fullAPI);ref?fullAPI.selectStory(storyId||title,name2,{...rest,ref:ref.id}):fullAPI.selectStory(storyId||title,name2,rest)}),provider.channel.on(STORY_ARGS_UPDATED,function({storyId,args:args2}){let{ref}=getEventMetadata(this,fullAPI);api.updateStory(storyId,{args:args2},ref)}),provider.channel.on(CONFIG_ERROR,function(err){let{ref}=getEventMetadata(this,fullAPI);api.setPreviewInitialized(ref)}),provider.channel.on(STORY_MISSING,function(err){let{ref}=getEventMetadata(this,fullAPI);api.setPreviewInitialized(ref)}),provider.channel.on(SET_CONFIG,()=>{let config2=provider.getConfig();config2?.sidebar?.filters&&store22.setState({filters:{...store22.getState().filters,...config2?.sidebar?.filters}})});let config=provider.getConfig();return{api,state:{storyId:initialStoryId,viewMode:initialViewMode,hasCalledSetOptions:!1,previewInitialized:!1,status:{},filters:config?.sidebar?.filters||{}},init:async()=>{FEATURES?.storyStoreV7&&(provider.channel.on(STORY_INDEX_INVALIDATED,()=>api.fetchIndex()),await api.fetchIndex())}}},layout_exports={};__export2(layout_exports,{ActiveTabs:()=>ActiveTabs,focusableUIElements:()=>focusableUIElements,init:()=>init8});var{document:document3}=scope,ActiveTabs={SIDEBAR:"sidebar",CANVAS:"canvas",ADDONS:"addons"},defaultState={ui:{enableShortcuts:!0},layout:{initialActive:ActiveTabs.CANVAS,showToolbar:!0,isFullscreen:!1,showPanel:!0,showNav:!0,panelPosition:"bottom",showTabs:!0},selectedPanel:void 0,theme:create()},focusableUIElements={storySearchField:"storybook-explorer-searchfield",storyListMenu:"storybook-explorer-menu",storyPanelRoot:"storybook-panel-root"},init8=({store:store22,provider,singleStory,fullAPI})=>{let api={toggleFullscreen(toggled){return store22.setState(state=>{let{showNav}=state.layout,value2=typeof toggled=="boolean"?toggled:!state.layout.isFullscreen,shouldShowNav=showNav===!1&&value2===!1;return{layout:{...state.layout,isFullscreen:value2,showNav:!singleStory&&shouldShowNav?!0:showNav}}},{persistence:"session"})},togglePanel(toggled){return store22.setState(state=>{let{showNav,isFullscreen}=state.layout,value2=typeof toggled<"u"?toggled:!state.layout.showPanel,shouldToggleFullScreen=showNav===!1&&value2===!1;return{layout:{...state.layout,showPanel:value2,isFullscreen:shouldToggleFullScreen?!0:isFullscreen}}},{persistence:"session"})},togglePanelPosition(position){return typeof position<"u"?store22.setState(state=>({layout:{...state.layout,panelPosition:position}}),{persistence:"permanent"}):store22.setState(state=>({layout:{...state.layout,panelPosition:state.layout.panelPosition==="right"?"bottom":"right"}}),{persistence:"permanent"})},toggleNav(toggled){return store22.setState(state=>{if(singleStory)return{layout:state.layout};let{showPanel,isFullscreen}=state.layout,showNav=typeof toggled<"u"?toggled:!state.layout.showNav,shouldToggleFullScreen=showPanel===!1&&showNav===!1;return{layout:{...state.layout,showNav,isFullscreen:shouldToggleFullScreen?!0:!showNav&&isFullscreen}}},{persistence:"session"})},toggleToolbar(toggled){return store22.setState(state=>{let value2=typeof toggled<"u"?toggled:!state.layout.showToolbar;return{layout:{...state.layout,showToolbar:value2}}},{persistence:"session"})},resetLayout(){return store22.setState(state=>({layout:{...state.layout,showNav:!1,showPanel:!1,isFullscreen:!1}}),{persistence:"session"})},focusOnUIElement(elementId,select){if(!elementId)return;let element=document3.getElementById(elementId);element&&(element.focus(),select&&element.select())},getInitialOptions(){let{theme,selectedPanel,...options3}=provider.getConfig();return{...defaultState,layout:{...defaultState.layout,...(0,import_pick.default)(options3,Object.keys(defaultState.layout)),...singleStory&&{showNav:!1}},ui:{...defaultState.ui,...(0,import_pick.default)(options3,Object.keys(defaultState.ui))},selectedPanel:selectedPanel||defaultState.selectedPanel,theme:theme||defaultState.theme}},setOptions:options3=>{let{layout,ui,selectedPanel,theme}=store22.getState();if(options3){let updatedLayout={...layout,...options3.layout,...(0,import_pick.default)(options3,Object.keys(layout)),...singleStory&&{showNav:!1}},updatedUi={...ui,...options3.ui,...(0,import_pick.default)(options3,Object.keys(ui))},updatedTheme={...theme,...options3.theme},modification={};dequal2(ui,updatedUi)||(modification.ui=updatedUi),dequal2(layout,updatedLayout)||(modification.layout=updatedLayout),options3.selectedPanel&&!dequal2(selectedPanel,options3.selectedPanel)&&(modification.selectedPanel=options3.selectedPanel),Object.keys(modification).length&&store22.setState(modification,{persistence:"permanent"}),dequal2(theme,updatedTheme)||store22.setState({theme:updatedTheme})}}},persisted=(0,import_pick.default)(store22.getState(),"layout","selectedPanel");return{api,state:merge_default(api.getInitialOptions(),persisted),init:()=>{api.setOptions(merge_default(api.getInitialOptions(),persisted)),provider.channel.on(SET_CONFIG,()=>{api.setOptions(merge_default(api.getInitialOptions(),persisted))})}}},shortcuts_exports={};__export2(shortcuts_exports,{controlOrMetaKey:()=>controlOrMetaKey2,defaultShortcuts:()=>defaultShortcuts,init:()=>init9,isMacLike:()=>isMacLike2,keys:()=>keys});var{navigator:navigator2}=scope,isMacLike=()=>navigator2&&navigator2.platform?!!navigator2.platform.match(/(Mac|iPhone|iPod|iPad)/i):!1,controlOrMetaSymbol=()=>isMacLike()?"\u2318":"ctrl",controlOrMetaKey=()=>isMacLike()?"meta":"control",optionOrAltSymbol=()=>isMacLike()?"\u2325":"alt",isShortcutTaken=(arr1,arr2)=>JSON.stringify(arr1)===JSON.stringify(arr2),eventToShortcut=e3=>{if(["Meta","Alt","Control","Shift"].includes(e3.key))return null;let keys2=[];if(e3.altKey&&keys2.push("alt"),e3.ctrlKey&&keys2.push("control"),e3.metaKey&&keys2.push("meta"),e3.shiftKey&&keys2.push("shift"),e3.key&&e3.key.length===1&&e3.key!==" "){let key2=e3.key.toUpperCase(),code=e3.code?.toUpperCase().replace("KEY","").replace("DIGIT","");code&&code.length===1&&code!==key2?keys2.push([key2,code]):keys2.push(key2)}return e3.key===" "&&keys2.push("space"),e3.key==="Escape"&&keys2.push("escape"),e3.key==="ArrowRight"&&keys2.push("ArrowRight"),e3.key==="ArrowDown"&&keys2.push("ArrowDown"),e3.key==="ArrowUp"&&keys2.push("ArrowUp"),e3.key==="ArrowLeft"&&keys2.push("ArrowLeft"),keys2.length>0?keys2:null},shortcutMatchesShortcut=(inputShortcut,shortcut)=>!inputShortcut||!shortcut||(inputShortcut.join("").startsWith("shift/")&&inputShortcut.shift(),inputShortcut.length!==shortcut.length)?!1:!inputShortcut.find((input,i3)=>Array.isArray(input)?!input.includes(shortcut[i3]):input!==shortcut[i3]),eventMatchesShortcut=(e3,shortcut)=>shortcutMatchesShortcut(eventToShortcut(e3),shortcut),keyToSymbol=key2=>key2==="alt"?optionOrAltSymbol():key2==="control"?"\u2303":key2==="meta"?"\u2318":key2==="shift"?"\u21E7\u200B":key2==="Enter"||key2==="Backspace"||key2==="Esc"||key2==="escape"?"":key2===" "?"SPACE":key2==="ArrowUp"?"\u2191":key2==="ArrowDown"?"\u2193":key2==="ArrowLeft"?"\u2190":key2==="ArrowRight"?"\u2192":key2.toUpperCase(),shortcutToHumanString=shortcut=>shortcut.map(keyToSymbol).join(" "),{navigator:navigator22,document:document23}=scope,isMacLike2=()=>navigator22&&navigator22.platform?!!navigator22.platform.match(/(Mac|iPhone|iPod|iPad)/i):!1,controlOrMetaKey2=()=>isMacLike2()?"meta":"control";function keys(o2){return Object.keys(o2)}var defaultShortcuts=Object.freeze({fullScreen:["F"],togglePanel:["A"],panelPosition:["D"],toggleNav:["S"],toolbar:["T"],search:["/"],focusNav:["1"],focusIframe:["2"],focusPanel:["3"],prevComponent:["alt","ArrowUp"],nextComponent:["alt","ArrowDown"],prevStory:["alt","ArrowLeft"],nextStory:["alt","ArrowRight"],shortcutsPage:[controlOrMetaKey2(),"shift",","],aboutPage:[","],escape:["escape"],collapseAll:[controlOrMetaKey2(),"shift","ArrowUp"],expandAll:[controlOrMetaKey2(),"shift","ArrowDown"],remount:["alt","R"]}),addonsShortcuts={};function focusInInput(event){let target=event.target;return/input|textarea/i.test(target.tagName)||target.getAttribute("contenteditable")!==null}var init9=({store:store22,fullAPI,provider})=>{let api={getShortcutKeys(){return store22.getState().shortcuts},getDefaultShortcuts(){return{...defaultShortcuts,...api.getAddonsShortcutDefaults()}},getAddonsShortcuts(){return addonsShortcuts},getAddonsShortcutLabels(){let labels={};return Object.entries(api.getAddonsShortcuts()).forEach(([actionName,{label}])=>{labels[actionName]=label}),labels},getAddonsShortcutDefaults(){let defaults={};return Object.entries(api.getAddonsShortcuts()).forEach(([actionName,{defaultShortcut}])=>{defaults[actionName]=defaultShortcut}),defaults},async setShortcuts(shortcuts){return await store22.setState({shortcuts},{persistence:"permanent"}),shortcuts},async restoreAllDefaultShortcuts(){return api.setShortcuts(api.getDefaultShortcuts())},async setShortcut(action,value2){let shortcuts=api.getShortcutKeys();return await api.setShortcuts({...shortcuts,[action]:value2}),value2},async setAddonShortcut(addon,shortcut){let shortcuts=api.getShortcutKeys();return await api.setShortcuts({...shortcuts,[`${addon}-${shortcut.actionName}`]:shortcut.defaultShortcut}),addonsShortcuts[`${addon}-${shortcut.actionName}`]=shortcut,shortcut},async restoreDefaultShortcut(action){let defaultShortcut=api.getDefaultShortcuts()[action];return api.setShortcut(action,defaultShortcut)},handleKeydownEvent(event){let shortcut=eventToShortcut(event),shortcuts=api.getShortcutKeys(),matchedFeature=keys(shortcuts).find(feature=>shortcutMatchesShortcut(shortcut,shortcuts[feature]));matchedFeature&&api.handleShortcutFeature(matchedFeature,event)},handleShortcutFeature(feature,event){let{layout:{isFullscreen,showNav,showPanel},ui:{enableShortcuts},storyId}=store22.getState();if(enableShortcuts)switch(event?.preventDefault&&event.preventDefault(),feature){case"escape":{isFullscreen?fullAPI.toggleFullscreen():showNav||fullAPI.toggleNav();break}case"focusNav":{isFullscreen&&fullAPI.toggleFullscreen(),showNav||fullAPI.toggleNav(),fullAPI.focusOnUIElement(focusableUIElements.storyListMenu);break}case"search":{isFullscreen&&fullAPI.toggleFullscreen(),showNav||fullAPI.toggleNav(),setTimeout(()=>{fullAPI.focusOnUIElement(focusableUIElements.storySearchField,!0)},0);break}case"focusIframe":{let element=document23.getElementById("storybook-preview-iframe");if(element)try{element.contentWindow.focus()}catch{}break}case"focusPanel":{isFullscreen&&fullAPI.toggleFullscreen(),showPanel||fullAPI.togglePanel(),fullAPI.focusOnUIElement(focusableUIElements.storyPanelRoot);break}case"nextStory":{fullAPI.jumpToStory(1);break}case"prevStory":{fullAPI.jumpToStory(-1);break}case"nextComponent":{fullAPI.jumpToComponent(1);break}case"prevComponent":{fullAPI.jumpToComponent(-1);break}case"fullScreen":{fullAPI.toggleFullscreen();break}case"togglePanel":{isFullscreen&&(fullAPI.toggleFullscreen(),fullAPI.resetLayout()),fullAPI.togglePanel();break}case"toggleNav":{isFullscreen&&(fullAPI.toggleFullscreen(),fullAPI.resetLayout()),fullAPI.toggleNav();break}case"toolbar":{fullAPI.toggleToolbar();break}case"panelPosition":{isFullscreen&&fullAPI.toggleFullscreen(),showPanel||fullAPI.togglePanel(),fullAPI.togglePanelPosition();break}case"aboutPage":{fullAPI.navigate("/settings/about");break}case"shortcutsPage":{fullAPI.navigate("/settings/shortcuts");break}case"collapseAll":{fullAPI.collapseAll();break}case"expandAll":{fullAPI.expandAll();break}case"remount":{fullAPI.emit(FORCE_REMOUNT,{storyId});break}default:addonsShortcuts[feature].action();break}}},{shortcuts:persistedShortcuts=defaultShortcuts}=store22.getState(),state={shortcuts:keys(defaultShortcuts).reduce((acc,key2)=>({...acc,[key2]:persistedShortcuts[key2]||defaultShortcuts[key2]}),defaultShortcuts)};return{api,state,init:()=>{document23.addEventListener("keydown",event=>{focusInInput(event)||api.handleKeydownEvent(event)}),provider.channel.on(PREVIEW_KEYDOWN,data=>{api.handleKeydownEvent(data.event)})}}},url_exports={};__export2(url_exports,{init:()=>init10});var{window:globalWindow}=scope,parseBoolean=value2=>{if(value2==="true"||value2==="1")return!0;if(value2==="false"||value2==="0")return!1},prevParams,initialUrlSupport=({state:{location:location22,path,viewMode,storyId:storyIdFromUrl},singleStory})=>{let{full,panel,nav,shortcuts,addonPanel,tabs,path:queryPath,...otherParams}=queryFromLocation(location22),layout={isFullscreen:parseBoolean(full),showNav:!singleStory&&parseBoolean(nav),showPanel:parseBoolean(panel),panelPosition:["right","bottom"].includes(panel)?panel:void 0,showTabs:parseBoolean(tabs)},ui={enableShortcuts:parseBoolean(shortcuts)},selectedPanel=addonPanel||void 0,storyId=storyIdFromUrl,customQueryParams=dequal2(prevParams,otherParams)?prevParams:otherParams;return prevParams=customQueryParams,{viewMode,layout,ui,selectedPanel,location:location22,path,customQueryParams,storyId}},init10=moduleArgs=>{let{store:store22,navigate,provider,fullAPI}=moduleArgs,navigateTo=(path,queryParams={},options3={})=>{let params=Object.entries(queryParams).filter(([,v2])=>v2).sort(([a2],[b3])=>a2<b3?-1:1).map(([k2,v2])=>`${k2}=${v2}`),to=[path,...params].join("&");return navigate(to,options3)},api={getQueryParam(key2){let{customQueryParams}=store22.getState();return customQueryParams?customQueryParams[key2]:void 0},getUrlState(){let{path,customQueryParams,storyId,url,viewMode}=store22.getState();return{path,queryParams:customQueryParams,storyId,url,viewMode}},setQueryParams(input){let{customQueryParams}=store22.getState(),queryParams={},update2={...customQueryParams,...Object.entries(input).reduce((acc,[key2,value2])=>(value2!==null&&(acc[key2]=value2),acc),queryParams)};dequal2(customQueryParams,update2)||(store22.setState({customQueryParams:update2}),provider.channel.emit(UPDATE_QUERY_PARAMS,update2))},navigateUrl(url,options3){navigate(url,{plain:!0,...options3})}},updateArgsParam=()=>{let{path,queryParams,viewMode}=api.getUrlState();if(viewMode!=="story")return;let currentStory=fullAPI.getCurrentStoryData();if(currentStory?.type!=="story")return;let{args:args2,initialArgs}=currentStory,argsString=buildArgsParam(initialArgs,args2);navigateTo(path,{...queryParams,args:argsString},{replace:!0}),api.setQueryParams({args:argsString})};provider.channel.on(SET_CURRENT_STORY,()=>updateArgsParam());let handleOrId;return provider.channel.on(STORY_ARGS_UPDATED,()=>{"requestIdleCallback"in globalWindow?(handleOrId&&globalWindow.cancelIdleCallback(handleOrId),handleOrId=globalWindow.requestIdleCallback(updateArgsParam,{timeout:1e3})):(handleOrId&&clearTimeout(handleOrId),setTimeout(updateArgsParam,100))}),provider.channel.on(GLOBALS_UPDATED,({globals,initialGlobals})=>{let{path,queryParams}=api.getUrlState(),globalsString=buildArgsParam(initialGlobals,globals);navigateTo(path,{...queryParams,globals:globalsString},{replace:!0}),api.setQueryParams({globals:globalsString})}),provider.channel.on(NAVIGATE_URL,(url,options3)=>{api.navigateUrl(url,options3)}),{api,state:initialUrlSupport(moduleArgs)}},versions_exports={};__export2(versions_exports,{init:()=>init11});var version="0.0.0-pr-24575-sha-3de4e9e0",{VERSIONCHECK}=scope,getVersionCheckData=(0,import_memoizerific3.default)(1)(()=>{try{return{...JSON.parse(VERSIONCHECK).data||{}}}catch{return{}}}),init11=({store:store22})=>{let{dismissedVersionNotification}=store22.getState(),state={versions:{current:{version},...getVersionCheckData()},dismissedVersionNotification},api={getCurrentVersion:()=>{let{versions:{current}}=store22.getState();return current},getLatestVersion:()=>{let{versions:{latest,next,current}}=store22.getState();return current&&import_semver.default.prerelease(current.version)&&next?latest&&import_semver.default.gt(latest.version,next.version)?latest:next:latest},versionUpdateAvailable:()=>{let latest=api.getLatestVersion(),current=api.getCurrentVersion();if(latest){if(!latest.version||!current.version)return!0;let actualCurrent=import_semver.default.prerelease(current.version)?`${import_semver.default.major(current.version)}.${import_semver.default.minor(current.version)}.${import_semver.default.patch(current.version)}`:current.version,diff=import_semver.default.diff(actualCurrent,latest.version);return import_semver.default.gt(latest.version,actualCurrent)&&diff!=="patch"&&!diff.includes("pre")}return!1}};return{init:async()=>{let{versions={}}=store22.getState(),{latest,next}=getVersionCheckData();await store22.setState({versions:{...versions,latest,next}})},state,api}},whatsnew_exports={};__export2(whatsnew_exports,{init:()=>init12});var WHATS_NEW_NOTIFICATION_ID="whats-new",init12=({fullAPI,store:store22,provider})=>{let state={whatsNewData:void 0};function setWhatsNewState(newState){store22.setState({whatsNewData:newState}),state.whatsNewData=newState}let api={isWhatsNewUnread(){return state.whatsNewData?.status==="SUCCESS"&&!state.whatsNewData.postIsRead},whatsNewHasBeenRead(){state.whatsNewData?.status==="SUCCESS"&&(setWhatsNewCache({lastReadPost:state.whatsNewData.url}),setWhatsNewState({...state.whatsNewData,postIsRead:!0}),fullAPI.clearNotification(WHATS_NEW_NOTIFICATION_ID))},toggleWhatsNewNotifications(){state.whatsNewData?.status==="SUCCESS"&&(setWhatsNewState({...state.whatsNewData,disableWhatsNewNotifications:!state.whatsNewData.disableWhatsNewNotifications}),provider.channel.emit(TOGGLE_WHATS_NEW_NOTIFICATIONS,{disableWhatsNewNotifications:state.whatsNewData.disableWhatsNewNotifications}))}};function getLatestWhatsNewPost(){return provider.channel.emit(REQUEST_WHATS_NEW_DATA),new Promise(resolve=>provider.channel.once(RESULT_WHATS_NEW_DATA,({data})=>resolve(data)))}function setWhatsNewCache(cache){provider.channel.emit(SET_WHATS_NEW_CACHE,cache)}return{init:async()=>{if(scope.CONFIG_TYPE!=="DEVELOPMENT")return;let whatsNewData=await getLatestWhatsNewPost();setWhatsNewState(whatsNewData);let urlState=fullAPI.getUrlState();!(urlState?.path==="/onboarding"||urlState.queryParams?.onboarding==="true")&&whatsNewData.status==="SUCCESS"&&!whatsNewData.disableWhatsNewNotifications&&whatsNewData.showNotification&&fullAPI.addNotification({id:WHATS_NEW_NOTIFICATION_ID,link:"/settings/whats-new",content:{headline:whatsNewData.excerpt,subHeadline:"Click to learn what's new in Storybook"},icon:{name:"hearthollow"},onClear({dismissed}){dismissed&&setWhatsNewCache({lastDismissedPost:whatsNewData.url})}})},state,api}},globals_exports={};__export2(globals_exports,{init:()=>init13});var init13=({store:store22,fullAPI,provider})=>{let api={getGlobals(){return store22.getState().globals},getGlobalTypes(){return store22.getState().globalTypes},updateGlobals(newGlobals){provider.channel.emit(UPDATE_GLOBALS,{globals:newGlobals,options:{target:"storybook-preview-iframe"}})}},state={globals:{},globalTypes:{}},updateGlobals=globals=>{let currentGlobals=store22.getState()?.globals;dequal2(globals,currentGlobals)||store22.setState({globals})};return provider.channel.on(GLOBALS_UPDATED,function({globals}){let{ref}=getEventMetadata(this,fullAPI);ref?logger.warn("received a GLOBALS_UPDATED from a non-local ref. This is not currently supported."):updateGlobals(globals)}),provider.channel.on(SET_GLOBALS,function({globals,globalTypes}){let{ref}=getEventMetadata(this,fullAPI),currentGlobals=store22.getState()?.globals;ref?Object.keys(globals).length>0&&logger.warn("received globals from a non-local ref. This is not currently supported."):store22.setState({globals,globalTypes}),currentGlobals&&Object.keys(currentGlobals).length!==0&&!dequal2(globals,currentGlobals)&&api.updateGlobals(currentGlobals)}),{api,state}};function mockChannel(){let transport={setHandler:()=>{},send:()=>{}};return new Channel({transport})}var AddonStore=class{constructor(){this.loaders={},this.elements={},this.config={},this.getChannel=()=>(this.channel||this.setChannel(mockChannel()),this.channel),this.getServerChannel=()=>{if(!this.serverChannel)throw new Error("Accessing non-existent serverChannel");return this.serverChannel},this.ready=()=>this.promise,this.hasChannel=()=>!!this.channel,this.hasServerChannel=()=>!!this.serverChannel,this.setChannel=channel=>{this.channel=channel,this.resolve()},this.setServerChannel=channel=>{this.serverChannel=channel},this.addPanel=(id,options3)=>{this.add(id,{type:Addon_TypesEnum.PANEL,...options3})},this.setConfig=value2=>{Object.assign(this.config,value2),this.hasChannel()?this.getChannel().emit(SET_CONFIG,this.config):this.ready().then(channel=>{channel.emit(SET_CONFIG,this.config)})},this.getConfig=()=>this.config,this.register=(id,callback)=>{this.loaders[id]&&logger.warn(`${id} was loaded twice, this could have bad side-effects`),this.loaders[id]=callback},this.loadAddons=api=>{Object.values(this.loaders).forEach(value2=>value2(api))},this.promise=new Promise(res=>{this.resolve=()=>res(this.getChannel())})}getElements(type){return this.elements[type]||(this.elements[type]={}),this.elements[type]}add(id,addon){let{type}=addon,collection=this.getElements(type);collection[id]={id,...addon}}},KEY2="__STORYBOOK_ADDONS_MANAGER";function getAddonsStore(){return scope[KEY2]||(scope[KEY2]=new AddonStore),scope[KEY2]}var addons=getAddonsStore(),{ActiveTabs:ActiveTabs2}=layout_exports,ManagerContext=createContext2({api:void 0,state:initial_state_default({})}),combineParameters=(...parameterSets)=>(0,import_mergeWith.default)({},...parameterSets,(objValue,srcValue)=>{if(Array.isArray(srcValue))return srcValue}),ManagerProvider=class extends import_react2.Component{constructor(props){super(props),this.api={},this.initModules=()=>{this.modules.forEach(module=>{"init"in module&&module.init()})};let{location:location22,path,refId,viewMode=props.docsOptions.docsMode?"docs":props.viewMode,singleStory,storyId,docsOptions,navigate}=props,store22=new Store({getState:()=>this.state,setState:(stateChange,callback)=>this.setState(stateChange,callback)}),routeData={location:location22,path,viewMode,singleStory,storyId,refId},optionsData={docsOptions};this.state=store22.getInitialState(initial_state_default({...routeData,...optionsData}));let apiData={navigate,store:store22,provider:props.provider};this.modules=[provider_exports,channel_exports,addons_exports,layout_exports,notifications_exports,settings_exports,shortcuts_exports,stories_exports,refs_exports,globals_exports,url_exports,versions_exports,whatsnew_exports].map(m3=>m3.init({...routeData,...optionsData,...apiData,state:this.state,fullAPI:this.api}));let state=initial_state_default(this.state,...this.modules.map(m3=>m3.state)),api=Object.assign(this.api,{navigate},...this.modules.map(m3=>m3.api));this.state=state,this.api=api}static getDerivedStateFromProps(props,state){return state.path!==props.path?{...state,location:props.location,path:props.path,refId:props.refId,viewMode:props.viewMode,storyId:props.storyId}:null}shouldComponentUpdate(nextProps,nextState){let prevState=this.state,prevProps=this.props;return prevState!==nextState||prevProps.path!==nextProps.path}render(){let{children}=this.props,value2={state:this.state,api:this.api};return import_react2.default.createElement(EffectOnMount,{effect:this.initModules},import_react2.default.createElement(ManagerContext.Provider,{value:value2},import_react2.default.createElement(ManagerConsumer,null,children)))}};ManagerProvider.displayName="Manager";var EffectOnMount=({children,effect})=>(import_react2.default.useEffect(effect,[]),children),defaultFilter=c3=>c3;function ManagerConsumer({filter=defaultFilter,children}){let c3=(0,import_react2.useContext)(ManagerContext),renderer=(0,import_react2.useRef)(children),filterer=(0,import_react2.useRef)(filter);if(typeof renderer.current!="function")return import_react2.default.createElement(import_react2.Fragment,null,renderer.current);let data=filterer.current(c3),l2=(0,import_react2.useMemo)(()=>[...Object.entries(data).reduce((acc,keyval)=>acc.concat(keyval),[])],[c3.state]);return(0,import_react2.useMemo)(()=>{let Child=renderer.current;return import_react2.default.createElement(Child,{...data})},l2)}function useStorybookState(){let{state}=(0,import_react2.useContext)(ManagerContext);return{...state,get storiesHash(){return deprecate("state.storiesHash is deprecated, please use state.index"),this.index||{}},get storiesConfigured(){return deprecate("state.storiesConfigured is deprecated, please use state.previewInitialized"),this.previewInitialized},get storiesFailed(){return deprecate("state.storiesFailed is deprecated, please use state.indexError"),this.indexError}}}function useStorybookApi(){let{api}=(0,import_react2.useContext)(ManagerContext);return api}function orDefault(fromStore,defaultState2){return typeof fromStore>"u"?defaultState2:fromStore}var useChannel=(eventMap,deps=[])=>{let api=useStorybookApi();return(0,import_react2.useEffect)(()=>(Object.entries(eventMap).forEach(([type,listener])=>api.on(type,listener)),()=>{Object.entries(eventMap).forEach(([type,listener])=>api.off(type,listener))}),deps),api.emit};function useStoryPrepared(storyId){return useStorybookApi().isPrepared(storyId)}function useParameter(parameterKey,defaultValue){let result2=useStorybookApi().getCurrentParameter(parameterKey);return orDefault(result2,defaultValue)}globalThis.STORYBOOK_ADDON_STATE={};var{STORYBOOK_ADDON_STATE}=globalThis;function useSharedState(stateId,defaultState2){let api=useStorybookApi(),existingState=api.getAddonState(stateId)||STORYBOOK_ADDON_STATE[stateId],state=orDefault(existingState,STORYBOOK_ADDON_STATE[stateId]?STORYBOOK_ADDON_STATE[stateId]:defaultState2),quicksync=!1;state===defaultState2&&defaultState2!==void 0&&(STORYBOOK_ADDON_STATE[stateId]=defaultState2,quicksync=!0),(0,import_react2.useEffect)(()=>{quicksync&&api.setAddonState(stateId,defaultState2)},[quicksync]);let setState=async(s2,options3)=>{let result2=await api.setAddonState(stateId,s2,options3);return STORYBOOK_ADDON_STATE[stateId]=result2,result2},allListeners=(0,import_react2.useMemo)(()=>{let stateChangeHandlers={[`${SHARED_STATE_CHANGED}-client-${stateId}`]:setState,[`${SHARED_STATE_SET}-client-${stateId}`]:setState},stateInitializationHandlers={[SET_STORIES]:async()=>{let currentState=api.getAddonState(stateId);currentState?(STORYBOOK_ADDON_STATE[stateId]=currentState,api.emit(`${SHARED_STATE_SET}-manager-${stateId}`,currentState)):STORYBOOK_ADDON_STATE[stateId]?(await setState(STORYBOOK_ADDON_STATE[stateId]),api.emit(`${SHARED_STATE_SET}-manager-${stateId}`,STORYBOOK_ADDON_STATE[stateId])):defaultState2!==void 0&&(await setState(defaultState2),STORYBOOK_ADDON_STATE[stateId]=defaultState2,api.emit(`${SHARED_STATE_SET}-manager-${stateId}`,defaultState2))},[STORY_CHANGED]:()=>{let currentState=api.getAddonState(stateId);currentState!==void 0&&api.emit(`${SHARED_STATE_SET}-manager-${stateId}`,currentState)}};return{...stateChangeHandlers,...stateInitializationHandlers}},[stateId]),emit=useChannel(allListeners);return[state,async(newStateOrMerger,options3)=>{let result2=await setState(newStateOrMerger,options3);emit(`${SHARED_STATE_CHANGED}-manager-${stateId}`,result2)}]}function useAddonState(addonId,defaultState2){return useSharedState(addonId,defaultState2)}function useArgs(){let{getCurrentStoryData,updateStoryArgs,resetStoryArgs}=useStorybookApi(),data=getCurrentStoryData(),args2=data?.type==="story"?data.args:{},updateArgs=(0,import_react2.useCallback)(newArgs=>updateStoryArgs(data,newArgs),[data,updateStoryArgs]),resetArgs=(0,import_react2.useCallback)(argNames=>resetStoryArgs(data,argNames),[data,resetStoryArgs]);return[args2,updateArgs,resetArgs]}function useGlobals(){let api=useStorybookApi();return[api.getGlobals(),api.updateGlobals]}function useGlobalTypes(){return useStorybookApi().getGlobalTypes()}function useCurrentStory(){let{getCurrentStoryData}=useStorybookApi();return getCurrentStoryData()}function useArgTypes(){let current=useCurrentStory();return current?.type==="story"&¤t.argTypes||{}}var StorybookError=class extends Error{constructor(){super(...arguments),this.data={},this.documentation=!1,this.fromStorybook=!0}get fullErrorCode(){let paddedCode=String(this.code).padStart(4,"0");return`SB_${this.category}_${paddedCode}`}get name(){let errorName=this.constructor.name;return`${this.fullErrorCode} (${errorName})`}get message(){let page;return this.documentation===!0?page=`https://storybook.js.org/error/${this.fullErrorCode}`:typeof this.documentation=="string"?page=this.documentation:Array.isArray(this.documentation)&&(page=`
|
|
51
|
+
`});let versions=ref.versions&&Object.keys(ref.versions).length?ref.versions:loadedData.versions;await api.setRef(id,{id,url:urlParseResult.url,...loadedData,...versions?{versions}:{},type:loadedData.storyIndex?"lazy":"auto-inject"})},getRefs:()=>{let{refs:refs22={}}=store22.getState();return refs22},setRef:(id,{storyIndex,setStoriesData,...rest},ready=!1)=>{if(singleStory)return;let{storyMapper=defaultStoryMapper}=provider.getConfig(),ref=api.getRefs()[id],index2;setStoriesData?index2=transformSetStoriesStoryDataToStoriesHash(map(setStoriesData,ref,{storyMapper}),{provider,docsOptions,filters:{},status:{}}):storyIndex&&(index2=transformStoryIndexToStoriesHash(storyIndex,{provider,docsOptions,filters:{},status:{}})),index2&&(index2=addRefIds(index2,ref)),api.updateRef(id,{index:index2,...rest})},updateRef:(id,data)=>{let{[id]:ref,...updated}=api.getRefs();updated[id]={...ref,...data};let ordered=Object.keys(initialState).reduce((obj,key2)=>(obj[key2]=updated[key2],obj),{});store22.setState({refs:ordered})}},refs2=!singleStory&&scope.REFS||{},initialState=refs2;return runCheck&&Object.entries(refs2).forEach(([id,ref])=>{api.checkRef({...ref,stories:{}})}),{api,state:{refs:initialState}}},getEventMetadata=(context,fullAPI)=>{let{source:source2,refId,type}=context,[sourceType,sourceLocation]=getSourceType(source2,refId),ref=refId&&fullAPI.getRefs()[refId]?fullAPI.getRefs()[refId]:fullAPI.findRef(sourceLocation),meta={source:source2,sourceType,sourceLocation,refId,ref,type};switch(!0){case typeof refId=="string":case sourceType==="local":case sourceType==="external":return meta;default:return logger.warn(`Received a ${type} frame that was not configured as a ref`),null}},{FEATURES,fetch:fetch2}=scope,STORY_INDEX_PATH="./index.json",removedOptions=["enableShortcuts","theme","showRoots"];function removeRemovedOptions(options3){if(!options3||typeof options3=="string")return options3;let result2={...options3};return removedOptions.forEach(option=>{option in result2&&delete result2[option]}),result2}var init7=({fullAPI,store:store22,navigate,provider,storyId:initialStoryId,viewMode:initialViewMode,docsOptions={}})=>{let api={storyId:N,getData:(storyId,refId)=>{let result2=api.resolveStory(storyId,refId);if(result2?.type==="story"||result2?.type==="docs")return result2},isPrepared:(storyId,refId)=>{let data=api.getData(storyId,refId);return data.type==="story"?data.prepared:!0},resolveStory:(storyId,refId)=>{let{refs:refs2,index:index2}=store22.getState();return refId&&!refs2[refId]?null:refId?refs2[refId].index?refs2[refId].index[storyId]:void 0:index2?index2[storyId]:void 0},getCurrentStoryData:()=>{let{storyId,refId}=store22.getState();return api.getData(storyId,refId)},getParameters:(storyIdOrCombo,parameterName)=>{let{storyId,refId}=typeof storyIdOrCombo=="string"?{storyId:storyIdOrCombo,refId:void 0}:storyIdOrCombo,data=api.getData(storyId,refId);if(["story","docs"].includes(data?.type)){let{parameters}=data;if(parameters)return parameterName?parameters[parameterName]:parameters}return null},getCurrentParameter:parameterName=>{let{storyId,refId}=store22.getState();return api.getParameters({storyId,refId},parameterName)||void 0},jumpToComponent:direction=>{let{index:index2,storyId,refs:refs2,refId}=store22.getState();if(!api.getData(storyId,refId))return;let hash=refId?refs2[refId].index||{}:index2,result2=api.findSiblingStoryId(storyId,hash,direction,!0);result2&&api.selectStory(result2,void 0,{ref:refId})},jumpToStory:direction=>{let{index:index2,storyId,refs:refs2,refId}=store22.getState(),story=api.getData(storyId,refId);if(!story)return;let hash=story.refId?refs2[story.refId].index:index2,result2=api.findSiblingStoryId(storyId,hash,direction,!1);result2&&api.selectStory(result2,void 0,{ref:refId})},selectFirstStory:()=>{let{index:index2}=store22.getState(),firstStory=Object.keys(index2).find(id=>index2[id].type==="story");if(firstStory){api.selectStory(firstStory);return}navigate("/")},selectStory:(titleOrId=void 0,name2=void 0,options3={})=>{let{ref}=options3,{storyId,index:index2,refs:refs2}=store22.getState(),hash=ref?refs2[ref].index:index2,kindSlug=storyId?.split("--",2)[0];if(name2)if(titleOrId){let id=ref?`${ref}_${N(titleOrId,name2)}`:N(titleOrId,name2);if(hash[id])api.selectStory(id,void 0,options3);else{let entry=hash[L(titleOrId)];if(entry?.type==="component"){let foundId=entry.children.find(childId=>hash[childId].name===name2);foundId&&api.selectStory(foundId,void 0,options3)}}}else{let id=N(kindSlug,name2);api.selectStory(id,void 0,options3)}else{let entry=titleOrId?hash[titleOrId]||hash[L(titleOrId)]:hash[kindSlug];if(!entry)throw new Error(`Unknown id or title: '${titleOrId}'`);store22.setState({settings:{...store22.getState().settings,lastTrackedStoryId:entry.id}});let leafEntry=api.findLeafEntry(hash,entry.id),fullId=leafEntry.refId?`${leafEntry.refId}_${leafEntry.id}`:leafEntry.id;navigate(`/${leafEntry.type}/${fullId}`)}},findLeafEntry(index2,storyId){let entry=index2[storyId];if(entry.type==="docs"||entry.type==="story")return entry;let childStoryId=entry.children[0];return api.findLeafEntry(index2,childStoryId)},findLeafStoryId(index2,storyId){return api.findLeafEntry(index2,storyId)?.id},findSiblingStoryId(storyId,index2,direction,toSiblingGroup){if(toSiblingGroup){let lookupList2=getComponentLookupList(index2),position2=lookupList2.findIndex(i3=>i3.includes(storyId));return position2===lookupList2.length-1&&direction>0||position2===0&&direction<0?void 0:lookupList2[position2+direction]?lookupList2[position2+direction][0]:void 0}let lookupList=getStoriesLookupList(index2),position=lookupList.indexOf(storyId);if(!(position===lookupList.length-1&&direction>0)&&!(position===0&&direction<0))return lookupList[position+direction]},updateStoryArgs:(story,updatedArgs)=>{let{id:storyId,refId}=story;provider.channel.emit(UPDATE_STORY_ARGS,{storyId,updatedArgs,options:{target:refId}})},resetStoryArgs:(story,argNames)=>{let{id:storyId,refId}=story;provider.channel.emit(RESET_STORY_ARGS,{storyId,argNames,options:{target:refId}})},fetchIndex:async()=>{try{let result2=await fetch2(STORY_INDEX_PATH);if(result2.status!==200)throw new Error(await result2.text());let storyIndex=await result2.json();if(storyIndex.v<3){logger.warn(`Skipping story index with version v${storyIndex.v}, awaiting SET_STORIES.`);return}await api.setIndex(storyIndex)}catch(err){await store22.setState({indexError:err})}},setIndex:async input=>{let{index:oldHash,status,filters}=store22.getState(),newHash=transformStoryIndexToStoriesHash(input,{provider,docsOptions,status,filters}),output=addPreparedStories(newHash,oldHash);await store22.setState({internal_index:input,index:output,indexError:void 0})},updateStory:async(storyId,update2,ref)=>{if(ref){let{id:refId,index:index2}=ref;index2[storyId]={...index2[storyId],...update2},await fullAPI.updateRef(refId,{index:index2})}else{let{index:index2}=store22.getState();index2[storyId]={...index2[storyId],...update2},await store22.setState({index:index2})}},updateDocs:async(docsId,update2,ref)=>{if(ref){let{id:refId,index:index2}=ref;index2[docsId]={...index2[docsId],...update2},await fullAPI.updateRef(refId,{index:index2})}else{let{index:index2}=store22.getState();index2[docsId]={...index2[docsId],...update2},await store22.setState({index:index2})}},setPreviewInitialized:async ref=>{ref?fullAPI.updateRef(ref.id,{previewInitialized:!0}):store22.setState({previewInitialized:!0})},experimental_updateStatus:async(id,input)=>{let{status,internal_index:index2}=store22.getState(),newStatus={...status},update2=typeof input=="function"?input(status):input;Object.keys(update2).length!==0&&(Object.entries(update2).forEach(([storyId,value2])=>{newStatus[storyId]={...newStatus[storyId]||{}},value2===null?delete newStatus[storyId][id]:newStatus[storyId][id]=value2,Object.keys(newStatus[storyId]).length===0&&delete newStatus[storyId]}),await store22.setState({status:newStatus},{persistence:"session"}),await api.setIndex(index2))},experimental_setFilter:async(id,filterFunction)=>{let{internal_index:index2}=store22.getState();await store22.setState({filters:{...store22.getState().filters,[id]:filterFunction}}),await api.setIndex(index2)}};provider.channel.on(STORY_SPECIFIED,function({storyId,viewMode}){let{sourceType}=getEventMetadata(this,fullAPI);if(sourceType==="local"){let state=store22.getState(),isCanvasRoute=state.path==="/"||state.viewMode==="story"||state.viewMode==="docs",stateHasSelection=state.viewMode&&state.storyId,stateSelectionDifferent=state.viewMode!==viewMode||state.storyId!==storyId,{type}=state.index[state.storyId]||{};isCanvasRoute&&(stateHasSelection&&stateSelectionDifferent&&!(type==="root"||type==="component"||type==="group")?provider.channel.emit(SET_CURRENT_STORY,{storyId:state.storyId,viewMode:state.viewMode}):stateSelectionDifferent&&navigate(`/${viewMode}/${storyId}`))}}),provider.channel.on(CURRENT_STORY_WAS_SET,function(){let{ref}=getEventMetadata(this,fullAPI);api.setPreviewInitialized(ref)}),provider.channel.on(STORY_CHANGED,function(){let{sourceType}=getEventMetadata(this,fullAPI);if(sourceType==="local"){let options3=api.getCurrentParameter("options");options3&&fullAPI.setOptions(removeRemovedOptions(options3))}}),provider.channel.on(STORY_PREPARED,function({id,...update2}){let{ref,sourceType}=getEventMetadata(this,fullAPI);if(api.updateStory(id,{...update2,prepared:!0},ref),!ref&&!store22.getState().hasCalledSetOptions){let{options:options3}=update2.parameters;fullAPI.setOptions(removeRemovedOptions(options3)),store22.setState({hasCalledSetOptions:!0})}if(sourceType==="local"){let{storyId,index:index2,refId}=store22.getState(),toBePreloaded=Array.from(new Set([api.findSiblingStoryId(storyId,index2,1,!0),api.findSiblingStoryId(storyId,index2,-1,!0)])).filter(Boolean);provider.channel.emit(PRELOAD_ENTRIES,{ids:toBePreloaded,options:{target:refId}})}}),provider.channel.on(DOCS_PREPARED,function({id,...update2}){let{ref}=getEventMetadata(this,fullAPI);api.updateStory(id,{...update2,prepared:!0},ref)}),provider.channel.on(SET_INDEX,function(index2){let{ref}=getEventMetadata(this,fullAPI);if(ref)fullAPI.setRef(ref.id,{...ref,storyIndex:index2},!0);else{api.setIndex(index2);let options3=api.getCurrentParameter("options");fullAPI.setOptions(removeRemovedOptions(options3))}}),provider.channel.on(SET_STORIES,function(data){let{ref}=getEventMetadata(this,fullAPI),setStoriesData=data.v?denormalizeStoryParameters(data):data.stories;if(ref)fullAPI.setRef(ref.id,{...ref,setStoriesData},!0);else throw new Error("Cannot call SET_STORIES for local frame")}),provider.channel.on(SELECT_STORY,function({kind,title=kind,story,name:name2=story,storyId,...rest}){let{ref}=getEventMetadata(this,fullAPI);ref?fullAPI.selectStory(storyId||title,name2,{...rest,ref:ref.id}):fullAPI.selectStory(storyId||title,name2,rest)}),provider.channel.on(STORY_ARGS_UPDATED,function({storyId,args:args2}){let{ref}=getEventMetadata(this,fullAPI);api.updateStory(storyId,{args:args2},ref)}),provider.channel.on(CONFIG_ERROR,function(err){let{ref}=getEventMetadata(this,fullAPI);api.setPreviewInitialized(ref)}),provider.channel.on(STORY_MISSING,function(err){let{ref}=getEventMetadata(this,fullAPI);api.setPreviewInitialized(ref)}),provider.channel.on(SET_CONFIG,()=>{let config2=provider.getConfig();config2?.sidebar?.filters&&store22.setState({filters:{...store22.getState().filters,...config2?.sidebar?.filters}})});let config=provider.getConfig();return{api,state:{storyId:initialStoryId,viewMode:initialViewMode,hasCalledSetOptions:!1,previewInitialized:!1,status:{},filters:config?.sidebar?.filters||{}},init:async()=>{FEATURES?.storyStoreV7&&(provider.channel.on(STORY_INDEX_INVALIDATED,()=>api.fetchIndex()),await api.fetchIndex())}}},layout_exports={};__export2(layout_exports,{ActiveTabs:()=>ActiveTabs,focusableUIElements:()=>focusableUIElements,init:()=>init8});var{document:document3}=scope,ActiveTabs={SIDEBAR:"sidebar",CANVAS:"canvas",ADDONS:"addons"},defaultState={ui:{enableShortcuts:!0},layout:{initialActive:ActiveTabs.CANVAS,showToolbar:!0,isFullscreen:!1,showPanel:!0,showNav:!0,panelPosition:"bottom",showTabs:!0},selectedPanel:void 0,theme:create()},focusableUIElements={storySearchField:"storybook-explorer-searchfield",storyListMenu:"storybook-explorer-menu",storyPanelRoot:"storybook-panel-root"},init8=({store:store22,provider,singleStory,fullAPI})=>{let api={toggleFullscreen(toggled){return store22.setState(state=>{let{showNav}=state.layout,value2=typeof toggled=="boolean"?toggled:!state.layout.isFullscreen,shouldShowNav=showNav===!1&&value2===!1;return{layout:{...state.layout,isFullscreen:value2,showNav:!singleStory&&shouldShowNav?!0:showNav}}},{persistence:"session"})},togglePanel(toggled){return store22.setState(state=>{let{showNav,isFullscreen}=state.layout,value2=typeof toggled<"u"?toggled:!state.layout.showPanel,shouldToggleFullScreen=showNav===!1&&value2===!1;return{layout:{...state.layout,showPanel:value2,isFullscreen:shouldToggleFullScreen?!0:isFullscreen}}},{persistence:"session"})},togglePanelPosition(position){return typeof position<"u"?store22.setState(state=>({layout:{...state.layout,panelPosition:position}}),{persistence:"permanent"}):store22.setState(state=>({layout:{...state.layout,panelPosition:state.layout.panelPosition==="right"?"bottom":"right"}}),{persistence:"permanent"})},toggleNav(toggled){return store22.setState(state=>{if(singleStory)return{layout:state.layout};let{showPanel,isFullscreen}=state.layout,showNav=typeof toggled<"u"?toggled:!state.layout.showNav,shouldToggleFullScreen=showPanel===!1&&showNav===!1;return{layout:{...state.layout,showNav,isFullscreen:shouldToggleFullScreen?!0:!showNav&&isFullscreen}}},{persistence:"session"})},toggleToolbar(toggled){return store22.setState(state=>{let value2=typeof toggled<"u"?toggled:!state.layout.showToolbar;return{layout:{...state.layout,showToolbar:value2}}},{persistence:"session"})},resetLayout(){return store22.setState(state=>({layout:{...state.layout,showNav:!1,showPanel:!1,isFullscreen:!1}}),{persistence:"session"})},focusOnUIElement(elementId,select){if(!elementId)return;let element=document3.getElementById(elementId);element&&(element.focus(),select&&element.select())},getInitialOptions(){let{theme,selectedPanel,...options3}=provider.getConfig();return{...defaultState,layout:{...defaultState.layout,...(0,import_pick.default)(options3,Object.keys(defaultState.layout)),...singleStory&&{showNav:!1}},ui:{...defaultState.ui,...(0,import_pick.default)(options3,Object.keys(defaultState.ui))},selectedPanel:selectedPanel||defaultState.selectedPanel,theme:theme||defaultState.theme}},setOptions:options3=>{let{layout,ui,selectedPanel,theme}=store22.getState();if(options3){let updatedLayout={...layout,...options3.layout,...(0,import_pick.default)(options3,Object.keys(layout)),...singleStory&&{showNav:!1}},updatedUi={...ui,...options3.ui,...(0,import_pick.default)(options3,Object.keys(ui))},updatedTheme={...theme,...options3.theme},modification={};dequal2(ui,updatedUi)||(modification.ui=updatedUi),dequal2(layout,updatedLayout)||(modification.layout=updatedLayout),options3.selectedPanel&&!dequal2(selectedPanel,options3.selectedPanel)&&(modification.selectedPanel=options3.selectedPanel),Object.keys(modification).length&&store22.setState(modification,{persistence:"permanent"}),dequal2(theme,updatedTheme)||store22.setState({theme:updatedTheme})}}},persisted=(0,import_pick.default)(store22.getState(),"layout","selectedPanel");return{api,state:merge_default(api.getInitialOptions(),persisted),init:()=>{api.setOptions(merge_default(api.getInitialOptions(),persisted)),provider.channel.on(SET_CONFIG,()=>{api.setOptions(merge_default(api.getInitialOptions(),persisted))})}}},shortcuts_exports={};__export2(shortcuts_exports,{controlOrMetaKey:()=>controlOrMetaKey2,defaultShortcuts:()=>defaultShortcuts,init:()=>init9,isMacLike:()=>isMacLike2,keys:()=>keys});var{navigator:navigator2}=scope,isMacLike=()=>navigator2&&navigator2.platform?!!navigator2.platform.match(/(Mac|iPhone|iPod|iPad)/i):!1,controlOrMetaSymbol=()=>isMacLike()?"\u2318":"ctrl",controlOrMetaKey=()=>isMacLike()?"meta":"control",optionOrAltSymbol=()=>isMacLike()?"\u2325":"alt",isShortcutTaken=(arr1,arr2)=>JSON.stringify(arr1)===JSON.stringify(arr2),eventToShortcut=e3=>{if(["Meta","Alt","Control","Shift"].includes(e3.key))return null;let keys2=[];if(e3.altKey&&keys2.push("alt"),e3.ctrlKey&&keys2.push("control"),e3.metaKey&&keys2.push("meta"),e3.shiftKey&&keys2.push("shift"),e3.key&&e3.key.length===1&&e3.key!==" "){let key2=e3.key.toUpperCase(),code=e3.code?.toUpperCase().replace("KEY","").replace("DIGIT","");code&&code.length===1&&code!==key2?keys2.push([key2,code]):keys2.push(key2)}return e3.key===" "&&keys2.push("space"),e3.key==="Escape"&&keys2.push("escape"),e3.key==="ArrowRight"&&keys2.push("ArrowRight"),e3.key==="ArrowDown"&&keys2.push("ArrowDown"),e3.key==="ArrowUp"&&keys2.push("ArrowUp"),e3.key==="ArrowLeft"&&keys2.push("ArrowLeft"),keys2.length>0?keys2:null},shortcutMatchesShortcut=(inputShortcut,shortcut)=>!inputShortcut||!shortcut||(inputShortcut.join("").startsWith("shift/")&&inputShortcut.shift(),inputShortcut.length!==shortcut.length)?!1:!inputShortcut.find((input,i3)=>Array.isArray(input)?!input.includes(shortcut[i3]):input!==shortcut[i3]),eventMatchesShortcut=(e3,shortcut)=>shortcutMatchesShortcut(eventToShortcut(e3),shortcut),keyToSymbol=key2=>key2==="alt"?optionOrAltSymbol():key2==="control"?"\u2303":key2==="meta"?"\u2318":key2==="shift"?"\u21E7\u200B":key2==="Enter"||key2==="Backspace"||key2==="Esc"||key2==="escape"?"":key2===" "?"SPACE":key2==="ArrowUp"?"\u2191":key2==="ArrowDown"?"\u2193":key2==="ArrowLeft"?"\u2190":key2==="ArrowRight"?"\u2192":key2.toUpperCase(),shortcutToHumanString=shortcut=>shortcut.map(keyToSymbol).join(" "),{navigator:navigator22,document:document23}=scope,isMacLike2=()=>navigator22&&navigator22.platform?!!navigator22.platform.match(/(Mac|iPhone|iPod|iPad)/i):!1,controlOrMetaKey2=()=>isMacLike2()?"meta":"control";function keys(o2){return Object.keys(o2)}var defaultShortcuts=Object.freeze({fullScreen:["F"],togglePanel:["A"],panelPosition:["D"],toggleNav:["S"],toolbar:["T"],search:["/"],focusNav:["1"],focusIframe:["2"],focusPanel:["3"],prevComponent:["alt","ArrowUp"],nextComponent:["alt","ArrowDown"],prevStory:["alt","ArrowLeft"],nextStory:["alt","ArrowRight"],shortcutsPage:[controlOrMetaKey2(),"shift",","],aboutPage:[","],escape:["escape"],collapseAll:[controlOrMetaKey2(),"shift","ArrowUp"],expandAll:[controlOrMetaKey2(),"shift","ArrowDown"],remount:["alt","R"]}),addonsShortcuts={};function focusInInput(event){let target=event.target;return/input|textarea/i.test(target.tagName)||target.getAttribute("contenteditable")!==null}var init9=({store:store22,fullAPI,provider})=>{let api={getShortcutKeys(){return store22.getState().shortcuts},getDefaultShortcuts(){return{...defaultShortcuts,...api.getAddonsShortcutDefaults()}},getAddonsShortcuts(){return addonsShortcuts},getAddonsShortcutLabels(){let labels={};return Object.entries(api.getAddonsShortcuts()).forEach(([actionName,{label}])=>{labels[actionName]=label}),labels},getAddonsShortcutDefaults(){let defaults={};return Object.entries(api.getAddonsShortcuts()).forEach(([actionName,{defaultShortcut}])=>{defaults[actionName]=defaultShortcut}),defaults},async setShortcuts(shortcuts){return await store22.setState({shortcuts},{persistence:"permanent"}),shortcuts},async restoreAllDefaultShortcuts(){return api.setShortcuts(api.getDefaultShortcuts())},async setShortcut(action,value2){let shortcuts=api.getShortcutKeys();return await api.setShortcuts({...shortcuts,[action]:value2}),value2},async setAddonShortcut(addon,shortcut){let shortcuts=api.getShortcutKeys();return await api.setShortcuts({...shortcuts,[`${addon}-${shortcut.actionName}`]:shortcut.defaultShortcut}),addonsShortcuts[`${addon}-${shortcut.actionName}`]=shortcut,shortcut},async restoreDefaultShortcut(action){let defaultShortcut=api.getDefaultShortcuts()[action];return api.setShortcut(action,defaultShortcut)},handleKeydownEvent(event){let shortcut=eventToShortcut(event),shortcuts=api.getShortcutKeys(),matchedFeature=keys(shortcuts).find(feature=>shortcutMatchesShortcut(shortcut,shortcuts[feature]));matchedFeature&&api.handleShortcutFeature(matchedFeature,event)},handleShortcutFeature(feature,event){let{layout:{isFullscreen,showNav,showPanel},ui:{enableShortcuts},storyId}=store22.getState();if(enableShortcuts)switch(event?.preventDefault&&event.preventDefault(),feature){case"escape":{isFullscreen?fullAPI.toggleFullscreen():showNav||fullAPI.toggleNav();break}case"focusNav":{isFullscreen&&fullAPI.toggleFullscreen(),showNav||fullAPI.toggleNav(),fullAPI.focusOnUIElement(focusableUIElements.storyListMenu);break}case"search":{isFullscreen&&fullAPI.toggleFullscreen(),showNav||fullAPI.toggleNav(),setTimeout(()=>{fullAPI.focusOnUIElement(focusableUIElements.storySearchField,!0)},0);break}case"focusIframe":{let element=document23.getElementById("storybook-preview-iframe");if(element)try{element.contentWindow.focus()}catch{}break}case"focusPanel":{isFullscreen&&fullAPI.toggleFullscreen(),showPanel||fullAPI.togglePanel(),fullAPI.focusOnUIElement(focusableUIElements.storyPanelRoot);break}case"nextStory":{fullAPI.jumpToStory(1);break}case"prevStory":{fullAPI.jumpToStory(-1);break}case"nextComponent":{fullAPI.jumpToComponent(1);break}case"prevComponent":{fullAPI.jumpToComponent(-1);break}case"fullScreen":{fullAPI.toggleFullscreen();break}case"togglePanel":{isFullscreen&&(fullAPI.toggleFullscreen(),fullAPI.resetLayout()),fullAPI.togglePanel();break}case"toggleNav":{isFullscreen&&(fullAPI.toggleFullscreen(),fullAPI.resetLayout()),fullAPI.toggleNav();break}case"toolbar":{fullAPI.toggleToolbar();break}case"panelPosition":{isFullscreen&&fullAPI.toggleFullscreen(),showPanel||fullAPI.togglePanel(),fullAPI.togglePanelPosition();break}case"aboutPage":{fullAPI.navigate("/settings/about");break}case"shortcutsPage":{fullAPI.navigate("/settings/shortcuts");break}case"collapseAll":{fullAPI.collapseAll();break}case"expandAll":{fullAPI.expandAll();break}case"remount":{fullAPI.emit(FORCE_REMOUNT,{storyId});break}default:addonsShortcuts[feature].action();break}}},{shortcuts:persistedShortcuts=defaultShortcuts}=store22.getState(),state={shortcuts:keys(defaultShortcuts).reduce((acc,key2)=>({...acc,[key2]:persistedShortcuts[key2]||defaultShortcuts[key2]}),defaultShortcuts)};return{api,state,init:()=>{document23.addEventListener("keydown",event=>{focusInInput(event)||api.handleKeydownEvent(event)}),provider.channel.on(PREVIEW_KEYDOWN,data=>{api.handleKeydownEvent(data.event)})}}},url_exports={};__export2(url_exports,{init:()=>init10});var{window:globalWindow}=scope,parseBoolean=value2=>{if(value2==="true"||value2==="1")return!0;if(value2==="false"||value2==="0")return!1},prevParams,initialUrlSupport=({state:{location:location22,path,viewMode,storyId:storyIdFromUrl},singleStory})=>{let{full,panel,nav,shortcuts,addonPanel,tabs,path:queryPath,...otherParams}=queryFromLocation(location22),layout={isFullscreen:parseBoolean(full),showNav:!singleStory&&parseBoolean(nav),showPanel:parseBoolean(panel),panelPosition:["right","bottom"].includes(panel)?panel:void 0,showTabs:parseBoolean(tabs)},ui={enableShortcuts:parseBoolean(shortcuts)},selectedPanel=addonPanel||void 0,storyId=storyIdFromUrl,customQueryParams=dequal2(prevParams,otherParams)?prevParams:otherParams;return prevParams=customQueryParams,{viewMode,layout,ui,selectedPanel,location:location22,path,customQueryParams,storyId}},init10=moduleArgs=>{let{store:store22,navigate,provider,fullAPI}=moduleArgs,navigateTo=(path,queryParams={},options3={})=>{let params=Object.entries(queryParams).filter(([,v2])=>v2).sort(([a2],[b3])=>a2<b3?-1:1).map(([k2,v2])=>`${k2}=${v2}`),to=[path,...params].join("&");return navigate(to,options3)},api={getQueryParam(key2){let{customQueryParams}=store22.getState();return customQueryParams?customQueryParams[key2]:void 0},getUrlState(){let{path,customQueryParams,storyId,url,viewMode}=store22.getState();return{path,queryParams:customQueryParams,storyId,url,viewMode}},setQueryParams(input){let{customQueryParams}=store22.getState(),queryParams={},update2={...customQueryParams,...Object.entries(input).reduce((acc,[key2,value2])=>(value2!==null&&(acc[key2]=value2),acc),queryParams)};dequal2(customQueryParams,update2)||(store22.setState({customQueryParams:update2}),provider.channel.emit(UPDATE_QUERY_PARAMS,update2))},navigateUrl(url,options3){navigate(url,{plain:!0,...options3})}},updateArgsParam=()=>{let{path,queryParams,viewMode}=api.getUrlState();if(viewMode!=="story")return;let currentStory=fullAPI.getCurrentStoryData();if(currentStory?.type!=="story")return;let{args:args2,initialArgs}=currentStory,argsString=buildArgsParam(initialArgs,args2);navigateTo(path,{...queryParams,args:argsString},{replace:!0}),api.setQueryParams({args:argsString})};provider.channel.on(SET_CURRENT_STORY,()=>updateArgsParam());let handleOrId;return provider.channel.on(STORY_ARGS_UPDATED,()=>{"requestIdleCallback"in globalWindow?(handleOrId&&globalWindow.cancelIdleCallback(handleOrId),handleOrId=globalWindow.requestIdleCallback(updateArgsParam,{timeout:1e3})):(handleOrId&&clearTimeout(handleOrId),setTimeout(updateArgsParam,100))}),provider.channel.on(GLOBALS_UPDATED,({globals,initialGlobals})=>{let{path,queryParams}=api.getUrlState(),globalsString=buildArgsParam(initialGlobals,globals);navigateTo(path,{...queryParams,globals:globalsString},{replace:!0}),api.setQueryParams({globals:globalsString})}),provider.channel.on(NAVIGATE_URL,(url,options3)=>{api.navigateUrl(url,options3)}),{api,state:initialUrlSupport(moduleArgs)}},versions_exports={};__export2(versions_exports,{init:()=>init11});var version="0.0.0-pr-24575-sha-94eee1ff",{VERSIONCHECK}=scope,getVersionCheckData=(0,import_memoizerific3.default)(1)(()=>{try{return{...JSON.parse(VERSIONCHECK).data||{}}}catch{return{}}}),init11=({store:store22})=>{let{dismissedVersionNotification}=store22.getState(),state={versions:{current:{version},...getVersionCheckData()},dismissedVersionNotification},api={getCurrentVersion:()=>{let{versions:{current}}=store22.getState();return current},getLatestVersion:()=>{let{versions:{latest,next,current}}=store22.getState();return current&&import_semver.default.prerelease(current.version)&&next?latest&&import_semver.default.gt(latest.version,next.version)?latest:next:latest},versionUpdateAvailable:()=>{let latest=api.getLatestVersion(),current=api.getCurrentVersion();if(latest){if(!latest.version||!current.version)return!0;let actualCurrent=import_semver.default.prerelease(current.version)?`${import_semver.default.major(current.version)}.${import_semver.default.minor(current.version)}.${import_semver.default.patch(current.version)}`:current.version,diff=import_semver.default.diff(actualCurrent,latest.version);return import_semver.default.gt(latest.version,actualCurrent)&&diff!=="patch"&&!diff.includes("pre")}return!1}};return{init:async()=>{let{versions={}}=store22.getState(),{latest,next}=getVersionCheckData();await store22.setState({versions:{...versions,latest,next}})},state,api}},whatsnew_exports={};__export2(whatsnew_exports,{init:()=>init12});var WHATS_NEW_NOTIFICATION_ID="whats-new",init12=({fullAPI,store:store22,provider})=>{let state={whatsNewData:void 0};function setWhatsNewState(newState){store22.setState({whatsNewData:newState}),state.whatsNewData=newState}let api={isWhatsNewUnread(){return state.whatsNewData?.status==="SUCCESS"&&!state.whatsNewData.postIsRead},whatsNewHasBeenRead(){state.whatsNewData?.status==="SUCCESS"&&(setWhatsNewCache({lastReadPost:state.whatsNewData.url}),setWhatsNewState({...state.whatsNewData,postIsRead:!0}),fullAPI.clearNotification(WHATS_NEW_NOTIFICATION_ID))},toggleWhatsNewNotifications(){state.whatsNewData?.status==="SUCCESS"&&(setWhatsNewState({...state.whatsNewData,disableWhatsNewNotifications:!state.whatsNewData.disableWhatsNewNotifications}),provider.channel.emit(TOGGLE_WHATS_NEW_NOTIFICATIONS,{disableWhatsNewNotifications:state.whatsNewData.disableWhatsNewNotifications}))}};function getLatestWhatsNewPost(){return provider.channel.emit(REQUEST_WHATS_NEW_DATA),new Promise(resolve=>provider.channel.once(RESULT_WHATS_NEW_DATA,({data})=>resolve(data)))}function setWhatsNewCache(cache){provider.channel.emit(SET_WHATS_NEW_CACHE,cache)}return{init:async()=>{if(scope.CONFIG_TYPE!=="DEVELOPMENT")return;let whatsNewData=await getLatestWhatsNewPost();setWhatsNewState(whatsNewData);let urlState=fullAPI.getUrlState();!(urlState?.path==="/onboarding"||urlState.queryParams?.onboarding==="true")&&whatsNewData.status==="SUCCESS"&&!whatsNewData.disableWhatsNewNotifications&&whatsNewData.showNotification&&fullAPI.addNotification({id:WHATS_NEW_NOTIFICATION_ID,link:"/settings/whats-new",content:{headline:whatsNewData.excerpt,subHeadline:"Click to learn what's new in Storybook"},icon:{name:"hearthollow"},onClear({dismissed}){dismissed&&setWhatsNewCache({lastDismissedPost:whatsNewData.url})}})},state,api}},globals_exports={};__export2(globals_exports,{init:()=>init13});var init13=({store:store22,fullAPI,provider})=>{let api={getGlobals(){return store22.getState().globals},getGlobalTypes(){return store22.getState().globalTypes},updateGlobals(newGlobals){provider.channel.emit(UPDATE_GLOBALS,{globals:newGlobals,options:{target:"storybook-preview-iframe"}})}},state={globals:{},globalTypes:{}},updateGlobals=globals=>{let currentGlobals=store22.getState()?.globals;dequal2(globals,currentGlobals)||store22.setState({globals})};return provider.channel.on(GLOBALS_UPDATED,function({globals}){let{ref}=getEventMetadata(this,fullAPI);ref?logger.warn("received a GLOBALS_UPDATED from a non-local ref. This is not currently supported."):updateGlobals(globals)}),provider.channel.on(SET_GLOBALS,function({globals,globalTypes}){let{ref}=getEventMetadata(this,fullAPI),currentGlobals=store22.getState()?.globals;ref?Object.keys(globals).length>0&&logger.warn("received globals from a non-local ref. This is not currently supported."):store22.setState({globals,globalTypes}),currentGlobals&&Object.keys(currentGlobals).length!==0&&!dequal2(globals,currentGlobals)&&api.updateGlobals(currentGlobals)}),{api,state}};function mockChannel(){let transport={setHandler:()=>{},send:()=>{}};return new Channel({transport})}var AddonStore=class{constructor(){this.loaders={},this.elements={},this.config={},this.getChannel=()=>(this.channel||this.setChannel(mockChannel()),this.channel),this.getServerChannel=()=>{if(!this.serverChannel)throw new Error("Accessing non-existent serverChannel");return this.serverChannel},this.ready=()=>this.promise,this.hasChannel=()=>!!this.channel,this.hasServerChannel=()=>!!this.serverChannel,this.setChannel=channel=>{this.channel=channel,this.resolve()},this.setServerChannel=channel=>{this.serverChannel=channel},this.addPanel=(id,options3)=>{this.add(id,{type:Addon_TypesEnum.PANEL,...options3})},this.setConfig=value2=>{Object.assign(this.config,value2),this.hasChannel()?this.getChannel().emit(SET_CONFIG,this.config):this.ready().then(channel=>{channel.emit(SET_CONFIG,this.config)})},this.getConfig=()=>this.config,this.register=(id,callback)=>{this.loaders[id]&&logger.warn(`${id} was loaded twice, this could have bad side-effects`),this.loaders[id]=callback},this.loadAddons=api=>{Object.values(this.loaders).forEach(value2=>value2(api))},this.promise=new Promise(res=>{this.resolve=()=>res(this.getChannel())})}getElements(type){return this.elements[type]||(this.elements[type]={}),this.elements[type]}add(id,addon){let{type}=addon,collection=this.getElements(type);collection[id]={id,...addon}}},KEY2="__STORYBOOK_ADDONS_MANAGER";function getAddonsStore(){return scope[KEY2]||(scope[KEY2]=new AddonStore),scope[KEY2]}var addons=getAddonsStore(),{ActiveTabs:ActiveTabs2}=layout_exports,ManagerContext=createContext2({api:void 0,state:initial_state_default({})}),combineParameters=(...parameterSets)=>(0,import_mergeWith.default)({},...parameterSets,(objValue,srcValue)=>{if(Array.isArray(srcValue))return srcValue}),ManagerProvider=class extends import_react2.Component{constructor(props){super(props),this.api={},this.initModules=()=>{this.modules.forEach(module=>{"init"in module&&module.init()})};let{location:location22,path,refId,viewMode=props.docsOptions.docsMode?"docs":props.viewMode,singleStory,storyId,docsOptions,navigate}=props,store22=new Store({getState:()=>this.state,setState:(stateChange,callback)=>this.setState(stateChange,callback)}),routeData={location:location22,path,viewMode,singleStory,storyId,refId},optionsData={docsOptions};this.state=store22.getInitialState(initial_state_default({...routeData,...optionsData}));let apiData={navigate,store:store22,provider:props.provider};this.modules=[provider_exports,channel_exports,addons_exports,layout_exports,notifications_exports,settings_exports,shortcuts_exports,stories_exports,refs_exports,globals_exports,url_exports,versions_exports,whatsnew_exports].map(m3=>m3.init({...routeData,...optionsData,...apiData,state:this.state,fullAPI:this.api}));let state=initial_state_default(this.state,...this.modules.map(m3=>m3.state)),api=Object.assign(this.api,{navigate},...this.modules.map(m3=>m3.api));this.state=state,this.api=api}static getDerivedStateFromProps(props,state){return state.path!==props.path?{...state,location:props.location,path:props.path,refId:props.refId,viewMode:props.viewMode,storyId:props.storyId}:null}shouldComponentUpdate(nextProps,nextState){let prevState=this.state,prevProps=this.props;return prevState!==nextState||prevProps.path!==nextProps.path}render(){let{children}=this.props,value2={state:this.state,api:this.api};return import_react2.default.createElement(EffectOnMount,{effect:this.initModules},import_react2.default.createElement(ManagerContext.Provider,{value:value2},import_react2.default.createElement(ManagerConsumer,null,children)))}};ManagerProvider.displayName="Manager";var EffectOnMount=({children,effect})=>(import_react2.default.useEffect(effect,[]),children),defaultFilter=c3=>c3;function ManagerConsumer({filter=defaultFilter,children}){let c3=(0,import_react2.useContext)(ManagerContext),renderer=(0,import_react2.useRef)(children),filterer=(0,import_react2.useRef)(filter);if(typeof renderer.current!="function")return import_react2.default.createElement(import_react2.Fragment,null,renderer.current);let data=filterer.current(c3),l2=(0,import_react2.useMemo)(()=>[...Object.entries(data).reduce((acc,keyval)=>acc.concat(keyval),[])],[c3.state]);return(0,import_react2.useMemo)(()=>{let Child=renderer.current;return import_react2.default.createElement(Child,{...data})},l2)}function useStorybookState(){let{state}=(0,import_react2.useContext)(ManagerContext);return{...state,get storiesHash(){return deprecate("state.storiesHash is deprecated, please use state.index"),this.index||{}},get storiesConfigured(){return deprecate("state.storiesConfigured is deprecated, please use state.previewInitialized"),this.previewInitialized},get storiesFailed(){return deprecate("state.storiesFailed is deprecated, please use state.indexError"),this.indexError}}}function useStorybookApi(){let{api}=(0,import_react2.useContext)(ManagerContext);return api}function orDefault(fromStore,defaultState2){return typeof fromStore>"u"?defaultState2:fromStore}var useChannel=(eventMap,deps=[])=>{let api=useStorybookApi();return(0,import_react2.useEffect)(()=>(Object.entries(eventMap).forEach(([type,listener])=>api.on(type,listener)),()=>{Object.entries(eventMap).forEach(([type,listener])=>api.off(type,listener))}),deps),api.emit};function useStoryPrepared(storyId){return useStorybookApi().isPrepared(storyId)}function useParameter(parameterKey,defaultValue){let result2=useStorybookApi().getCurrentParameter(parameterKey);return orDefault(result2,defaultValue)}globalThis.STORYBOOK_ADDON_STATE={};var{STORYBOOK_ADDON_STATE}=globalThis;function useSharedState(stateId,defaultState2){let api=useStorybookApi(),existingState=api.getAddonState(stateId)||STORYBOOK_ADDON_STATE[stateId],state=orDefault(existingState,STORYBOOK_ADDON_STATE[stateId]?STORYBOOK_ADDON_STATE[stateId]:defaultState2),quicksync=!1;state===defaultState2&&defaultState2!==void 0&&(STORYBOOK_ADDON_STATE[stateId]=defaultState2,quicksync=!0),(0,import_react2.useEffect)(()=>{quicksync&&api.setAddonState(stateId,defaultState2)},[quicksync]);let setState=async(s2,options3)=>{let result2=await api.setAddonState(stateId,s2,options3);return STORYBOOK_ADDON_STATE[stateId]=result2,result2},allListeners=(0,import_react2.useMemo)(()=>{let stateChangeHandlers={[`${SHARED_STATE_CHANGED}-client-${stateId}`]:setState,[`${SHARED_STATE_SET}-client-${stateId}`]:setState},stateInitializationHandlers={[SET_STORIES]:async()=>{let currentState=api.getAddonState(stateId);currentState?(STORYBOOK_ADDON_STATE[stateId]=currentState,api.emit(`${SHARED_STATE_SET}-manager-${stateId}`,currentState)):STORYBOOK_ADDON_STATE[stateId]?(await setState(STORYBOOK_ADDON_STATE[stateId]),api.emit(`${SHARED_STATE_SET}-manager-${stateId}`,STORYBOOK_ADDON_STATE[stateId])):defaultState2!==void 0&&(await setState(defaultState2),STORYBOOK_ADDON_STATE[stateId]=defaultState2,api.emit(`${SHARED_STATE_SET}-manager-${stateId}`,defaultState2))},[STORY_CHANGED]:()=>{let currentState=api.getAddonState(stateId);currentState!==void 0&&api.emit(`${SHARED_STATE_SET}-manager-${stateId}`,currentState)}};return{...stateChangeHandlers,...stateInitializationHandlers}},[stateId]),emit=useChannel(allListeners);return[state,async(newStateOrMerger,options3)=>{let result2=await setState(newStateOrMerger,options3);emit(`${SHARED_STATE_CHANGED}-manager-${stateId}`,result2)}]}function useAddonState(addonId,defaultState2){return useSharedState(addonId,defaultState2)}function useArgs(){let{getCurrentStoryData,updateStoryArgs,resetStoryArgs}=useStorybookApi(),data=getCurrentStoryData(),args2=data?.type==="story"?data.args:{},updateArgs=(0,import_react2.useCallback)(newArgs=>updateStoryArgs(data,newArgs),[data,updateStoryArgs]),resetArgs=(0,import_react2.useCallback)(argNames=>resetStoryArgs(data,argNames),[data,resetStoryArgs]);return[args2,updateArgs,resetArgs]}function useGlobals(){let api=useStorybookApi();return[api.getGlobals(),api.updateGlobals]}function useGlobalTypes(){return useStorybookApi().getGlobalTypes()}function useCurrentStory(){let{getCurrentStoryData}=useStorybookApi();return getCurrentStoryData()}function useArgTypes(){let current=useCurrentStory();return current?.type==="story"&¤t.argTypes||{}}var StorybookError=class extends Error{constructor(){super(...arguments),this.data={},this.documentation=!1,this.fromStorybook=!0}get fullErrorCode(){let paddedCode=String(this.code).padStart(4,"0");return`SB_${this.category}_${paddedCode}`}get name(){let errorName=this.constructor.name;return`${this.fullErrorCode} (${errorName})`}get message(){let page;return this.documentation===!0?page=`https://storybook.js.org/error/${this.fullErrorCode}`:typeof this.documentation=="string"?page=this.documentation:Array.isArray(this.documentation)&&(page=`
|
|
52
52
|
${this.documentation.map(doc=>` - ${doc}`).join(`
|
|
53
53
|
`)}`),`${this.template()}${page!=null?`
|
|
54
54
|
|
|
@@ -400,7 +400,7 @@ To pass a single animation please supply them in simple values, e.g. animation('
|
|
|
400
400
|
& + & {
|
|
401
401
|
margin-left: 6px;
|
|
402
402
|
}
|
|
403
|
-
`),Shortcut=({keys:keys2})=>import_react29.default.createElement(import_react29.default.Fragment,null,import_react29.default.createElement(Key,null,keys2.map((key2,index2)=>import_react29.default.createElement(KeyChild,{key:key2},shortcutToHumanString([key2]))))),useMenu=(state,api,showToolbar,isFullscreen,showPanel,showNav,enableShortcuts)=>{let theme=useTheme(),shortcutKeys=api.getShortcutKeys(),about=(0,import_react29.useMemo)(()=>({id:"about",title:"About your Storybook",onClick:()=>api.navigateToSettingsPage("/settings/about")}),[api]),whatsNewNotificationsEnabled=state.whatsNewData?.status==="SUCCESS"&&!state.disableWhatsNewNotifications,isWhatsNewUnread=api.isWhatsNewUnread(),whatsNew=(0,import_react29.useMemo)(()=>({id:"whats-new",title:"What's new?",onClick:()=>api.navigateToSettingsPage("/settings/whats-new"),right:whatsNewNotificationsEnabled&&isWhatsNewUnread&&import_react29.default.createElement(Badge,{status:"positive"},"Check it out")}),[api,whatsNewNotificationsEnabled,isWhatsNewUnread]),shortcuts=(0,import_react29.useMemo)(()=>({id:"shortcuts",title:"Keyboard shortcuts",onClick:()=>api.navigateToSettingsPage("/settings/shortcuts"),right:enableShortcuts?import_react29.default.createElement(Shortcut,{keys:shortcutKeys.shortcutsPage}):null,style:{borderBottom:`4px solid ${theme.appBorderColor}`}}),[api,enableShortcuts,shortcutKeys.shortcutsPage,theme.appBorderColor]),sidebarToggle=(0,import_react29.useMemo)(()=>({id:"S",title:"Show sidebar",onClick:()=>api.toggleNav(),active:showNav,right:enableShortcuts?import_react29.default.createElement(Shortcut,{keys:shortcutKeys.toggleNav}):null,left:showNav?import_react29.default.createElement(Icons,{icon:"check"}):null}),[api,enableShortcuts,shortcutKeys,showNav]),toolbarToogle=(0,import_react29.useMemo)(()=>({id:"T",title:"Show toolbar",onClick:()=>api.toggleToolbar(),active:showToolbar,right:enableShortcuts?import_react29.default.createElement(Shortcut,{keys:shortcutKeys.toolbar}):null,left:showToolbar?import_react29.default.createElement(Icons,{icon:"check"}):null}),[api,enableShortcuts,shortcutKeys,showToolbar]),addonsToggle=(0,import_react29.useMemo)(()=>({id:"A",title:"Show addons",onClick:()=>api.togglePanel(),active:showPanel,right:enableShortcuts?import_react29.default.createElement(Shortcut,{keys:shortcutKeys.togglePanel}):null,left:showPanel?import_react29.default.createElement(Icons,{icon:"check"}):null}),[api,enableShortcuts,shortcutKeys,showPanel]),addonsOrientationToggle=(0,import_react29.useMemo)(()=>({id:"D",title:"Change addons orientation",onClick:()=>api.togglePanelPosition(),right:enableShortcuts?import_react29.default.createElement(Shortcut,{keys:shortcutKeys.panelPosition}):null}),[api,enableShortcuts,shortcutKeys]),fullscreenToggle=(0,import_react29.useMemo)(()=>({id:"F",title:"Go full screen",onClick:()=>api.toggleFullscreen(),active:isFullscreen,right:enableShortcuts?import_react29.default.createElement(Shortcut,{keys:shortcutKeys.fullScreen}):null,left:isFullscreen?import_react29.default.createElement(Icons,{icon:"check"}):null}),[api,enableShortcuts,shortcutKeys,isFullscreen]),searchToggle=(0,import_react29.useMemo)(()=>({id:"/",title:"Search",onClick:()=>api.focusOnUIElement(focusableUIElements2.storySearchField),right:enableShortcuts?import_react29.default.createElement(Shortcut,{keys:shortcutKeys.search}):null}),[api,enableShortcuts,shortcutKeys]),up=(0,import_react29.useMemo)(()=>({id:"up",title:"Previous component",onClick:()=>api.jumpToComponent(-1),right:enableShortcuts?import_react29.default.createElement(Shortcut,{keys:shortcutKeys.prevComponent}):null}),[api,enableShortcuts,shortcutKeys]),down=(0,import_react29.useMemo)(()=>({id:"down",title:"Next component",onClick:()=>api.jumpToComponent(1),right:enableShortcuts?import_react29.default.createElement(Shortcut,{keys:shortcutKeys.nextComponent}):null}),[api,enableShortcuts,shortcutKeys]),prev=(0,import_react29.useMemo)(()=>({id:"prev",title:"Previous story",onClick:()=>api.jumpToStory(-1),right:enableShortcuts?import_react29.default.createElement(Shortcut,{keys:shortcutKeys.prevStory}):null}),[api,enableShortcuts,shortcutKeys]),next=(0,import_react29.useMemo)(()=>({id:"next",title:"Next story",onClick:()=>api.jumpToStory(1),right:enableShortcuts?import_react29.default.createElement(Shortcut,{keys:shortcutKeys.nextStory}):null}),[api,enableShortcuts,shortcutKeys]),collapse=(0,import_react29.useMemo)(()=>({id:"collapse",title:"Collapse all",onClick:()=>api.collapseAll(),right:enableShortcuts?import_react29.default.createElement(Shortcut,{keys:shortcutKeys.collapseAll}):null}),[api,enableShortcuts,shortcutKeys]),getAddonsShortcuts=(0,import_react29.useCallback)(()=>{let addonsShortcuts2=api.getAddonsShortcuts(),keys2=shortcutKeys;return Object.entries(addonsShortcuts2).filter(([_2,{showInMenu}])=>showInMenu).map(([actionName,{label,action}])=>({id:actionName,title:label,onClick:()=>action(),right:enableShortcuts?import_react29.default.createElement(Shortcut,{keys:keys2[actionName]}):null}))},[api,enableShortcuts,shortcutKeys]);return(0,import_react29.useMemo)(()=>[about,...state.whatsNewData?.status==="SUCCESS"?[whatsNew]:[],shortcuts,sidebarToggle,toolbarToogle,addonsToggle,addonsOrientationToggle,fullscreenToggle,searchToggle,up,down,prev,next,collapse,...getAddonsShortcuts()],[about,state,whatsNew,shortcuts,sidebarToggle,toolbarToogle,addonsToggle,addonsOrientationToggle,fullscreenToggle,searchToggle,up,down,prev,next,collapse,getAddonsShortcuts])};var Sidebar4=import_react30.default.memo(function(){return import_react30.default.createElement(ManagerConsumer,{filter:({state,api})=>{let{ui:{name:name2,url,enableShortcuts},viewMode,storyId,refId,layout:{showToolbar,isFullscreen,showPanel,showNav},index:index2,status,indexError,previewInitialized,refs:refs2}=state,menu=useMenu(state,api,showToolbar,isFullscreen,showPanel,showNav,enableShortcuts),whatsNewNotificationsEnabled=state.whatsNewData?.status==="SUCCESS"&&!state.disableWhatsNewNotifications,items=api.getElements(Addon_TypesEnum.experimental_SIDEBAR_BOTTOM),bottom=(0,import_react30.useMemo)(()=>Object.values(items),[items]),top=(0,import_react30.useMemo)(()=>Object.values(api.getElements(Addon_TypesEnum.experimental_SIDEBAR_TOP)),[]);return{title:name2,url,index:index2,indexError,status,previewInitialized,refs:refs2,storyId,refId,viewMode,menu,menuHighlighted:whatsNewNotificationsEnabled&&api.isWhatsNewUnread(),enableShortcuts,bottom,extra:top}}},fromState=>import_react30.default.createElement(Sidebar2,{...fromState}))}),sidebar_default=Sidebar4;var import_react42=__toESM(require_react());var import_react41=__toESM(require_react());var FrameWrap=newStyled.div(({offset})=>({position:"absolute",overflow:"auto",left:0,right:0,bottom:0,top:offset,zIndex:3,transition:"all 0.1s linear",height:`calc(100% - ${offset}px)`,background:"transparent"})),UnstyledLink=newStyled(Link2)({color:"inherit",textDecoration:"inherit",display:"inline-block"}),DesktopOnly=newStyled.span({"@media (max-width: 599px)":{display:"none"}}),IframeWrapper=newStyled.div(({theme})=>({position:"absolute",top:0,left:0,bottom:0,right:0,width:"100%",height:"100%"})),LoaderWrapper2=newStyled.div(({theme})=>({position:"absolute",top:0,left:0,bottom:0,right:0,background:theme.background.content,zIndex:1}));var import_react31=__toESM(require_react());var initialZoom=1,Context=import_react31.default.createContext({value:initialZoom,set:v2=>{}}),ZoomProvider=class extends import_react31.Component{constructor(){super(...arguments);this.state={value:initialZoom};this.set=value2=>this.setState({value:value2})}render(){let{children,shouldScale}=this.props,{set:set3}=this,{value:value2}=this.state;return import_react31.default.createElement(Context.Provider,{value:{value:shouldScale?value2:initialZoom,set:set3}},children)}},{Consumer:ZoomConsumer}=Context,Zoom2=import_react31.default.memo(function({zoomIn,zoomOut,reset}){return import_react31.default.createElement(import_react31.default.Fragment,null,import_react31.default.createElement(IconButton,{key:"zoomin",onClick:zoomIn,title:"Zoom in"},import_react31.default.createElement(Icons,{icon:"zoom"})),import_react31.default.createElement(IconButton,{key:"zoomout",onClick:zoomOut,title:"Zoom out"},import_react31.default.createElement(Icons,{icon:"zoomout"})),import_react31.default.createElement(IconButton,{key:"zoomreset",onClick:reset,title:"Reset zoom"},import_react31.default.createElement(Icons,{icon:"zoomreset"})))});var ZoomWrapper=import_react31.default.memo(function({set:set3,value:value2}){let zoomIn=(0,import_react31.useCallback)(e3=>{e3.preventDefault(),set3(.8*value2)},[set3,value2]),zoomOut=(0,import_react31.useCallback)(e3=>{e3.preventDefault(),set3(1.25*value2)},[set3,value2]),reset=(0,import_react31.useCallback)(e3=>{e3.preventDefault(),set3(initialZoom)},[set3,initialZoom]);return import_react31.default.createElement(Zoom2,{key:"zoom",zoomIn,zoomOut,reset})}),zoomTool={title:"zoom",id:"zoom",type:Addon_TypesEnum.TOOL,match:({viewMode})=>viewMode==="story",render:import_react31.default.memo(function(){return import_react31.default.createElement(import_react31.default.Fragment,null,import_react31.default.createElement(ZoomConsumer,null,({set:set3,value:value2})=>import_react31.default.createElement(ZoomWrapper,{set:set3,value:value2})),import_react31.default.createElement(Separator,null))})};var import_react32=__toESM(require_react());var ApplyWrappers=({wrappers,id,storyId,active,children})=>import_react32.default.createElement(import_react32.Fragment,null,wrappers.reduceRight((acc,wrapper,index2)=>import_react32.default.createElement(wrapper.render,{index:index2,children:acc,id,storyId,active}),children)),defaultWrappers=[{id:"iframe-wrapper",type:Addon_TypesEnum.PREVIEW,render:p2=>import_react32.default.createElement(IframeWrapper,{id:"storybook-preview-wrapper",hidden:!p2.active},p2.children)}];var import_react38=__toESM(require_react());var import_react33=__toESM(require_react()),import_copy_to_clipboard=__toESM(require_copy_to_clipboard());var{PREVIEW_URL,document:document10}=scope,copyMapper=({state})=>{let{storyId,refId,refs:refs2}=state,{location:location3}=document10,ref=refs2[refId],baseUrl=`${location3.origin}${location3.pathname}`;return baseUrl.endsWith("/")||(baseUrl+="/"),{refId,baseUrl:ref?`${ref.url}/iframe.html`:PREVIEW_URL||`${baseUrl}iframe.html`,storyId,queryParams:state.customQueryParams}},copyTool={title:"copy",id:"copy",type:Addon_TypesEnum.TOOL,match:({viewMode})=>viewMode==="story",render:()=>import_react33.default.createElement(ManagerConsumer,{filter:copyMapper},({baseUrl,storyId,queryParams})=>storyId?import_react33.default.createElement(IconButton,{key:"copy",onClick:()=>(0,import_copy_to_clipboard.default)(getStoryHref(baseUrl,storyId,queryParams)),title:"Copy canvas link"},import_react33.default.createElement(Icons,{icon:"link"})):null)};var import_react34=__toESM(require_react());var{PREVIEW_URL:PREVIEW_URL2}=scope,ejectMapper=({state})=>{let{storyId,refId,refs:refs2}=state,ref=refs2[refId];return{refId,baseUrl:ref?`${ref.url}/iframe.html`:PREVIEW_URL2||"iframe.html",storyId,queryParams:state.customQueryParams}},ejectTool={title:"eject",id:"eject",type:Addon_TypesEnum.TOOL,match:({viewMode})=>viewMode==="story",render:()=>import_react34.default.createElement(ManagerConsumer,{filter:ejectMapper},({baseUrl,storyId,queryParams})=>storyId?import_react34.default.createElement(IconButton,{key:"opener",href:getStoryHref(baseUrl,storyId,queryParams),target:"_blank",title:"Open canvas in new tab"},import_react34.default.createElement(Icons,{icon:"sharealt"})):null)};var import_react35=__toESM(require_react());var menuMapper=({api,state})=>({isVisible:state.layout.showNav,singleStory:state.singleStory,toggle:()=>api.toggleNav()}),menuTool={title:"menu",id:"menu",type:Addon_TypesEnum.TOOL,match:({viewMode})=>["story","docs"].includes(viewMode),render:()=>import_react35.default.createElement(ManagerConsumer,{filter:menuMapper},({isVisible,toggle,singleStory})=>!singleStory&&!isVisible&&import_react35.default.createElement(import_react35.default.Fragment,null,import_react35.default.createElement(IconButton,{"aria-label":"Show sidebar",key:"menu",onClick:toggle,title:"Show sidebar"},import_react35.default.createElement(Icons,{icon:"menu"})),import_react35.default.createElement(Separator,null)))};var import_react36=__toESM(require_react());var menuMapper2=({api,state})=>({isVisible:state.layout.showPanel,singleStory:state.singleStory,panelPosition:state.layout.panelPosition,toggle:()=>api.togglePanel()}),addonsTool={title:"addons",id:"addons",type:Addon_TypesEnum.TOOL,match:({viewMode})=>viewMode==="story",render:()=>import_react36.default.createElement(ManagerConsumer,{filter:menuMapper2},({isVisible,toggle,singleStory,panelPosition})=>!singleStory&&!isVisible&&import_react36.default.createElement(import_react36.default.Fragment,null,import_react36.default.createElement(IconButton,{"aria-label":"Show addons",key:"addons",onClick:toggle,title:"Show addons"},import_react36.default.createElement(Icons,{icon:panelPosition==="bottom"?"bottombar":"sidebaralt"}))))};var import_react37=__toESM(require_react());var StyledAnimatedIconButton=newStyled(IconButton)(({theme,animating,disabled})=>({opacity:disabled?.5:1,svg:{animation:animating&&`${theme.animation.rotate360} 1000ms ease-out`}})),menuMapper3=({api,state})=>{let{storyId}=state;return{storyId,remount:()=>api.emit(FORCE_REMOUNT,{storyId:state.storyId}),api}},remountTool={title:"remount",id:"remount",type:Addon_TypesEnum.TOOL,match:({viewMode})=>viewMode==="story",render:()=>import_react37.default.createElement(ManagerConsumer,{filter:menuMapper3},({remount,storyId,api})=>{let[isAnimating,setIsAnimating]=(0,import_react37.useState)(!1),remountComponent=()=>{storyId&&remount()};return api.on(FORCE_REMOUNT,()=>{setIsAnimating(!0)}),import_react37.default.createElement(StyledAnimatedIconButton,{key:"remount",title:"Remount component",onClick:remountComponent,onAnimationEnd:()=>setIsAnimating(!1),animating:isAnimating,disabled:!storyId},import_react37.default.createElement(Icons,{icon:"sync"}))})};var getTools=getFn=>Object.values(getFn(Addon_TypesEnum.TOOL)),getToolsExtra=getFn=>Object.values(getFn(Addon_TypesEnum.TOOLEXTRA)),Bar3=({shown,...props})=>import_react38.default.createElement(FlexBar,{...props}),Toolbar=newStyled(Bar3)({position:"absolute",left:0,right:0,top:0,transition:"transform .2s linear"},({shown})=>({transform:shown?"translateY(0px)":"translateY(-40px)"})),fullScreenMapper=({api,state})=>({toggle:api.toggleFullscreen,value:state.layout.isFullscreen,shortcut:shortcutToHumanString(api.getShortcutKeys().fullScreen),hasPanel:Object.keys(api.getPanels()).length>0,singleStory:state.singleStory}),fullScreenTool={title:"fullscreen",id:"fullscreen",type:Addon_TypesEnum.TOOL,match:p2=>["story","docs"].includes(p2.viewMode),render:()=>import_react38.default.createElement(ManagerConsumer,{filter:fullScreenMapper},({toggle,value:value2,shortcut,hasPanel,singleStory})=>(!singleStory||singleStory&&hasPanel)&&import_react38.default.createElement(IconButton,{key:"full",onClick:toggle,title:`${value2?"Exit full screen":"Go full screen"} [${shortcut}]`},import_react38.default.createElement(Icons,{icon:value2?"close":"expand"})))},tabsMapper=({state})=>({viewMode:state.docsOnly,storyId:state.storyId,path:state.path,location:state.location,refId:state.refId}),createTabsTool=tabs=>({title:"title",id:"title",type:Addon_TypesEnum.TOOL,render:()=>import_react38.default.createElement(ManagerConsumer,{filter:tabsMapper},rp=>import_react38.default.createElement(import_react38.Fragment,null,import_react38.default.createElement(TabBar,{key:"tabs"},tabs.filter(p2=>!p2.hidden).map((t3,index2)=>{let to=t3.route(rp),isActive=rp.path===to;return import_react38.default.createElement(UnstyledLink,{key:t3.id||`l${index2}`,to},import_react38.default.createElement(TabButton,{disabled:t3.disabled,active:isActive},t3.title))})),import_react38.default.createElement(Separator,null)))}),defaultTools=[remountTool,zoomTool],defaultToolsExtra=[addonsTool,fullScreenTool,ejectTool,copyTool],useTools=(getElements,tabs,viewMode,entry,location3,path)=>{let toolsFromConfig=(0,import_react38.useMemo)(()=>getTools(getElements),[getElements]),toolsExtraFromConfig=(0,import_react38.useMemo)(()=>getToolsExtra(getElements),[getElements]),tools=(0,import_react38.useMemo)(()=>[...defaultTools,...toolsFromConfig],[defaultTools,toolsFromConfig]),toolsExtra=(0,import_react38.useMemo)(()=>[...defaultToolsExtra,...toolsExtraFromConfig],[defaultToolsExtra,toolsExtraFromConfig]);return(0,import_react38.useMemo)(()=>["story","docs"].includes(entry?.type)?filterTools(tools,toolsExtra,tabs,{viewMode,entry,location:location3,path}):{left:tools,right:toolsExtra},[viewMode,entry,location3,path,tools,toolsExtra,tabs])},ToolRes=import_react38.default.memo(function({api,entry,tabs,isShown,location:location3,path,viewMode}){let{left,right}=useTools(api.getElements,tabs,viewMode,entry,location3,path);return left||right?import_react38.default.createElement(Toolbar,{key:"toolbar",shown:isShown,border:!0},import_react38.default.createElement(Tools,{key:"left",list:left}),import_react38.default.createElement(Tools,{key:"right",list:right})):null}),ToolbarComp=import_react38.default.memo(function(props){return import_react38.default.createElement(Location,null,({location:location3,path,viewMode})=>import_react38.default.createElement(ToolRes,{...props,location:location3,path,viewMode}))}),Tools=import_react38.default.memo(function({list}){return import_react38.default.createElement(import_react38.default.Fragment,null,list.filter(Boolean).map(({render:Render,id,...t3},index2)=>import_react38.default.createElement(Render,{key:id||t3.key||`f-${index2}`})))});function toolbarItemHasBeenExcluded(item,entry){let parameters=entry.type==="story"&&entry.prepared?entry.parameters:{},toolbarItemsFromStoryParameters="toolbar"in parameters?parameters.toolbar:void 0,{toolbar:toolbarItemsFromAddonsConfig}=addons.getConfig(),toolbarItems=merge_default(toolbarItemsFromAddonsConfig,toolbarItemsFromStoryParameters);return toolbarItems?!!toolbarItems[item.id]?.hidden:!1}function filterTools(tools,toolsExtra,tabs,{viewMode,entry,location:location3,path}){let toolsLeft=[menuTool,tabs.filter(p2=>!p2.hidden).length>1&&createTabsTool(tabs),...tools],toolsRight=[...toolsExtra],filter=item=>item&&(!item.match||item.match({storyId:entry.id,refId:entry.refId,viewMode,location:location3,path}))&&!toolbarItemHasBeenExcluded(item,entry),left=toolsLeft.filter(filter),right=toolsRight.filter(filter);return{left,right}}var import_react40=__toESM(require_react());var import_react39=__toESM(require_react());var StyledIframe=newStyled.iframe(({theme})=>({backgroundColor:theme.background.preview,position:"absolute",display:"block",boxSizing:"content-box",height:"100%",width:"100%",border:"0 none",transition:"background-position 0s, visibility 0s",backgroundPosition:"-1px -1px, -1px -1px, -1px -1px, -1px -1px"}));function IFrame(props){let{active,id,title,src,allowFullScreen,scale,...rest}=props,iFrameRef=import_react39.default.useRef(null);return import_react39.default.createElement(Zoom.IFrame,{scale,active,iFrameRef},import_react39.default.createElement(StyledIframe,{"data-is-storybook":active?"true":"false",onLoad:e3=>e3.currentTarget.setAttribute("data-is-loaded","true"),id,title,src,allow:"clipboard-write;",allowFullScreen,ref:iFrameRef,...rest}))}var import_qs3=__toESM(require_lib()),stringifyQueryParams=queryParams=>import_qs3.default.stringify(queryParams,{addQueryPrefix:!0,encode:!1}).replace(/^\?/,"&");var getActive=(refId,refs2)=>refId&&refs2[refId]?`storybook-ref-${refId}`:"storybook-preview-iframe",SkipToSidebarLink=newStyled(Button)(({theme})=>({display:"none","@media (min-width: 600px)":{position:"absolute",display:"block",top:10,right:15,padding:"10px 15px",fontSize:theme.typography.size.s1,transform:"translateY(-100px)","&:focus":{transform:"translateY(0)",zIndex:1}}})),whenSidebarIsVisible=({state})=>({isFullscreen:state.layout.isFullscreen,showNav:state.layout.showNav,selectedStoryId:state.storyId}),styles2={'#root [data-is-storybook="false"]':{display:"none"},'#root [data-is-storybook="true"]':{display:"block"}},FramesRenderer=({refs:refs2,scale,viewMode="story",refId,queryParams={},baseUrl,storyId="*"})=>{let version2=refs2[refId]?.version,stringifiedQueryParams=stringifyQueryParams({...queryParams,...version2&&{version:version2}}),active=getActive(refId,refs2),{current:frames}=(0,import_react40.useRef)({}),refsToLoad=Object.values(refs2).filter(ref=>ref.type==="auto-inject"||ref.id===refId,{});return frames["storybook-preview-iframe"]||(frames["storybook-preview-iframe"]=getStoryHref(baseUrl,storyId,{...queryParams,...version2&&{version:version2},viewMode})),refsToLoad.forEach(ref=>{let id=`storybook-ref-${ref.id}`,existingUrl=frames[id]?.split("/iframe.html")[0];if(!existingUrl||ref.url!==existingUrl){let newUrl=`${ref.url}/iframe.html?id=${storyId}&viewMode=${viewMode}&refId=${ref.id}${stringifiedQueryParams}`;frames[id]=newUrl}}),import_react40.default.createElement(import_react40.Fragment,null,import_react40.default.createElement(Global,{styles:styles2}),import_react40.default.createElement(ManagerConsumer,{filter:whenSidebarIsVisible},({isFullscreen,showNav,selectedStoryId})=>!isFullscreen&&showNav&&selectedStoryId?import_react40.default.createElement(SkipToSidebarLink,{secondary:!0,isLink:!0,tabIndex:0,href:`#${selectedStoryId}`},"Skip to sidebar"):null),Object.entries(frames).map(([id,src])=>import_react40.default.createElement(import_react40.Fragment,{key:id},import_react40.default.createElement(IFrame,{active:id===active,key:id,id,title:id,src,allowFullScreen:!0,scale}))))};var{FEATURES:FEATURES2}=scope,getWrappers=getFn=>Object.values(getFn(Addon_TypesEnum.PREVIEW)),getTabs=getFn=>Object.values(getFn(Addon_TypesEnum.TAB)),canvasMapper=({state,api})=>({storyId:state.storyId,refId:state.refId,viewMode:state.viewMode,customCanvas:api.renderPreview,queryParams:state.customQueryParams,getElements:api.getElements,entry:api.getData(state.storyId,state.refId),previewInitialized:state.previewInitialized,refs:state.refs,active:!!(state.viewMode&&state.viewMode.match(/^(story|docs)$/))}),createCanvasTab=()=>({id:"canvas",type:Addon_TypesEnum.TAB,title:"Canvas",route:({storyId,refId})=>refId?`/story/${refId}_${storyId}`:`/story/${storyId}`,match:({viewMode})=>!!(viewMode&&viewMode.match(/^(story|docs)$/)),render:()=>null}),useTabs=(getElements,entry)=>{let canvasTab=(0,import_react41.useMemo)(()=>createCanvasTab(),[]),tabsFromConfig=(0,import_react41.useMemo)(()=>getTabs(getElements),[getElements]);return(0,import_react41.useMemo)(()=>entry?.type==="story"&&entry.parameters?filterTabs([canvasTab,...tabsFromConfig],entry.parameters):[canvasTab,...tabsFromConfig],[entry,...tabsFromConfig])},Preview2=import_react41.default.memo(function(props){let{api,id:previewId,options:options3,viewMode,storyId,entry=void 0,description,baseUrl,withLoader=!0}=props,{getElements}=api,tabs=useTabs(getElements,entry),shouldScale=viewMode==="story",{showToolbar,showTabs=!0}=options3,visibleTabsInToolbar=showTabs?tabs:[],previousStoryId=(0,import_react41.useRef)(storyId);return(0,import_react41.useEffect)(()=>{if(entry&&viewMode&&storyId!==previousStoryId.current&&(previousStoryId.current=storyId,viewMode.match(/docs|story/))){let{refId,id}=entry;api.emit(SET_CURRENT_STORY,{storyId:id,viewMode,options:{target:refId}})}},[entry,viewMode]),import_react41.default.createElement(import_react41.Fragment,null,previewId==="main"&&import_react41.default.createElement(W,{key:"description"},import_react41.default.createElement("title",null,description)),import_react41.default.createElement(ZoomProvider,{shouldScale},import_react41.default.createElement(ToolbarComp,{key:"tools",entry,api,isShown:showToolbar,tabs:visibleTabsInToolbar}),import_react41.default.createElement(FrameWrap,{key:"frame",offset:showToolbar?40:0},import_react41.default.createElement(Canvas,{withLoader,baseUrl}),tabs.map(({render:Render,match,...t3},i3)=>{let key2=t3.id||t3.key||i3;return import_react41.default.createElement(import_react41.Fragment,{key:key2},import_react41.default.createElement(Location,null,lp=>import_react41.default.createElement(Render,{active:match(lp)})))}))))});var Canvas=({baseUrl,withLoader})=>import_react41.default.createElement(ManagerConsumer,{filter:canvasMapper},({entry,refs:refs2,customCanvas,storyId,refId,viewMode,queryParams,getElements,previewInitialized,active})=>{let id="canvas",wrappers=(0,import_react41.useMemo)(()=>[...defaultWrappers,...getWrappers(getElements)],[getElements,...defaultWrappers]),[progress,setProgress]=(0,import_react41.useState)(void 0);(0,import_react41.useEffect)(()=>{if(FEATURES2?.storyStoreV7&&scope.CONFIG_TYPE==="DEVELOPMENT")try{addons.getServerChannel().on(PREVIEW_BUILDER_PROGRESS,options3=>{setProgress(options3)})}catch{}},[]);let refLoading=!!refs2[refId]&&!refs2[refId].previewInitialized,isBuilding=!(progress?.value===1||progress===void 0),rootLoading=!refId&&(!previewInitialized||isBuilding),isLoading=entry&&refLoading||rootLoading;return import_react41.default.createElement(ZoomConsumer,null,({value:scale})=>import_react41.default.createElement(import_react41.default.Fragment,null,withLoader&&isLoading&&import_react41.default.createElement(LoaderWrapper2,null,import_react41.default.createElement(Loader,{id:"preview-loader",role:"progressbar",progress})),import_react41.default.createElement(ApplyWrappers,{id,storyId,viewMode,active,wrappers},customCanvas?customCanvas(storyId,viewMode,id,baseUrl,scale,queryParams):import_react41.default.createElement(FramesRenderer,{baseUrl,refs:refs2,scale,entry,viewMode,refId,queryParams,storyId}))))});function filterTabs(panels,parameters){let{previewTabs}=addons.getConfig(),parametersTabs=parameters?parameters.previewTabs:void 0;if(previewTabs||parametersTabs){let tabs=merge_default(previewTabs,parametersTabs),arrTabs=Object.keys(tabs).map((key2,index2)=>({index:index2,...typeof tabs[key2]=="string"?{title:tabs[key2]}:tabs[key2],id:key2}));return panels.filter(panel=>{let t3=arrTabs.find(tab=>tab.id===panel.id);return t3===void 0||t3.id==="canvas"||!t3.hidden}).map((panel,index2)=>({...panel,index:index2})).sort((p1,p2)=>{let tab_1=arrTabs.find(tab=>tab.id===p1.id),index_1=tab_1?tab_1.index:arrTabs.length+p1.index,tab_2=arrTabs.find(tab=>tab.id===p2.id),index_2=tab_2?tab_2.index:arrTabs.length+p2.index;return index_1-index_2}).map(panel=>{let t3=arrTabs.find(tab=>tab.id===panel.id);return t3?{...panel,title:t3.title||panel.title,disabled:t3.disabled,hidden:t3.hidden}:panel})}return panels}var{PREVIEW_URL:PREVIEW_URL3}=scope,splitTitleAddExtraSpace=input=>input.split("/").join(" / ").replace(/\s\s/," "),getDescription=item=>{if(item?.type==="story"||item?.type==="docs"){let{title,name:name2}=item;return title&&name2?splitTitleAddExtraSpace(`${title} - ${name2} \u22C5 Storybook`):"Storybook"}return item?.name?`${item.name} \u22C5 Storybook`:"Storybook"},mapper=({api,state})=>{let{layout,location:location3,customQueryParams,storyId,refs:refs2,viewMode,path,refId}=state,entry=api.getData(storyId,refId);return{api,entry,options:layout,description:getDescription(entry),viewMode,path,refs:refs2,storyId,baseUrl:PREVIEW_URL3||"iframe.html",queryParams:customQueryParams,location:location3}},PreviewConnected=import_react42.default.memo(function(props){return import_react42.default.createElement(ManagerConsumer,{filter:mapper},fromState=>import_react42.default.createElement(Preview2,{...props,...fromState}))}),preview_default=PreviewConnected;var import_react45=__toESM(require_react()),import_memoizerific7=__toESM(require_memoizerific());var import_react44=__toESM(require_react());var import_react43=__toESM(require_react()),useMediaQuery=query=>{let[matches,setMatches]=(0,import_react43.useState)(!1);return(0,import_react43.useEffect)(()=>{let media=window.matchMedia(query);media.matches!==matches&&setMatches(media.matches);let listener=()=>setMatches(media.matches);return window.addEventListener("resize",listener),()=>window.removeEventListener("resize",listener)},[matches,query]),matches},useMedia_default=useMediaQuery;var SafeTab=class extends import_react44.Component{constructor(props){super(props),this.state={hasError:!1}}componentDidCatch(error,info){this.setState({hasError:!0}),console.error(error,info)}render(){let{hasError}=this.state,{children}=this.props;return hasError?import_react44.default.createElement("h1",null,"Something went wrong."):children}},AddonPanel2=import_react44.default.memo(({panels,shortcuts,actions,selectedPanel=null,panelPosition="right",absolute=!0})=>{let isTablet=useMedia_default("(min-width: 599px)");return import_react44.default.createElement(Tabs,{absolute,...selectedPanel?{selected:selectedPanel}:{},menuName:"Addons",actions,tools:isTablet?import_react44.default.createElement(import_react44.Fragment,null,import_react44.default.createElement(IconButton,{key:"position",onClick:actions.togglePosition,title:`Change addon orientation [${shortcutToHumanString(shortcuts.panelPosition)}]`},import_react44.default.createElement(Icons,{icon:panelPosition==="bottom"?"sidebaralt":"bottombar"})),import_react44.default.createElement(IconButton,{key:"visibility",onClick:actions.toggleVisibility,title:`Hide addons [${shortcutToHumanString(shortcuts.togglePanel)}]`},import_react44.default.createElement(Icons,{icon:"close"}))):void 0,id:"storybook-panel-root"},Object.entries(panels).map(([k2,v2])=>import_react44.default.createElement(SafeTab,{key:k2,id:k2,title:typeof v2.title=="function"?import_react44.default.createElement(v2.title,null):v2.title},v2.render)))});AddonPanel2.displayName="AddonPanel";var panel_default=AddonPanel2;var createPanelActions=(0,import_memoizerific7.default)(1)(api=>({onSelect:panel=>api.setSelectedPanel(panel),toggleVisibility:()=>api.togglePanel(),togglePosition:()=>api.togglePanelPosition()})),mapper2=({state,api})=>({panels:api.getStoryPanels(),selectedPanel:api.getSelectedPanel(),panelPosition:state.layout.panelPosition,actions:createPanelActions(api),shortcuts:api.getShortcutKeys()}),Panel2=props=>import_react45.default.createElement(ManagerConsumer,{filter:mapper2},customProps=>import_react45.default.createElement(panel_default,{...props,...customProps})),panel_default2=Panel2;var import_react48=__toESM(require_react());var import_react47=__toESM(require_react());var import_react46=__toESM(require_react());var Notification=newStyled.div(({theme})=>({position:"relative",display:"flex",padding:15,width:280,borderRadius:4,alignItems:"center",background:theme.base==="light"?"hsla(203, 50%, 20%, .97)":"hsla(203, 30%, 95%, .97)",boxShadow:"0 2px 5px 0 rgba(0,0,0,0.05), 0 5px 15px 0 rgba(0,0,0,0.1)",color:theme.color.inverseText,textDecoration:"none"})),NotificationWithInteractiveStates=newStyled(Notification)(()=>({transition:"all 150ms ease-out",transform:"translate3d(0, 0, 0)","&:hover":{transform:"translate3d(0, -3px, 0)",boxShadow:"0 1px 3px 0 rgba(30,167,253,0.5), 0 2px 5px 0 rgba(0,0,0,0.05), 0 5px 15px 0 rgba(0,0,0,0.1)"},"&:active":{transform:"translate3d(0, 0, 0)",boxShadow:"0 1px 3px 0 rgba(30,167,253,0.5), 0 2px 5px 0 rgba(0,0,0,0.05), 0 5px 15px 0 rgba(0,0,0,0.1)"},"&:focus":{boxShadow:"0 1px 3px 0 rgba(30,167,253,0.5), 0 2px 5px 0 rgba(0,0,0,0.05), 0 5px 15px 0 rgba(0,0,0,0.1)"}})),NotificationLink=NotificationWithInteractiveStates.withComponent(Link2),NotificationIconWrapper=newStyled.div(()=>({display:"flex",marginRight:10,alignItems:"center"})),NotificationTextWrapper=newStyled.div(()=>({width:"100%",display:"flex",flexDirection:"column"})),Headline=newStyled.div(({theme,hasIcon})=>({height:"100%",width:hasIcon?205:230,alignItems:"center",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",fontSize:theme.typography.size.s1,lineHeight:"16px",fontWeight:theme.typography.weight.bold})),SubHeadline=newStyled.div(({theme})=>({color:curriedTransparentize$12(.25,theme.color.inverseText),fontSize:theme.typography.size.s1-1,lineHeight:"14px",marginTop:2})),ItemContent=({icon,content:{headline,subHeadline}})=>{let theme=useTheme(),defaultColor=theme.base==="dark"?theme.color.mediumdark:theme.color.mediumlight;return import_react46.default.createElement(import_react46.default.Fragment,null,!icon||import_react46.default.createElement(NotificationIconWrapper,null,import_react46.default.createElement(Icons,{icon:icon.name,width:16,height:16,color:icon.color||defaultColor})),import_react46.default.createElement(NotificationTextWrapper,null,import_react46.default.createElement(Headline,{title:headline,hasIcon:!!icon},headline),subHeadline&&import_react46.default.createElement(SubHeadline,null,subHeadline)))},DismissButtonWrapper=newStyled(IconButton)(({theme})=>({alignSelf:"center",marginTop:0,color:theme.base==="light"?"rgba(255,255,255,0.7)":" #999999"})),DismissNotificationItem=({onDismiss})=>import_react46.default.createElement(DismissButtonWrapper,{title:"Dismiss notification",onClick:e3=>{e3.preventDefault(),onDismiss()}},import_react46.default.createElement(Icons,{icon:"closeAlt",height:12,width:12})),NotificationItemSpacer=newStyled.div({height:48}),NotificationItem=({notification:{content,link,onClear,id,icon},onDismissNotification})=>{let dismissNotificationItem=()=>{onDismissNotification(id),onClear&&onClear({dismissed:!0})};return link?import_react46.default.createElement(NotificationLink,{to:link},import_react46.default.createElement(ItemContent,{icon,content}),import_react46.default.createElement(DismissNotificationItem,{onDismiss:dismissNotificationItem})):import_react46.default.createElement(Notification,null,import_react46.default.createElement(ItemContent,{icon,content}),import_react46.default.createElement(DismissNotificationItem,{onDismiss:dismissNotificationItem}))},NotificationItem_default=NotificationItem;var List2=newStyled.div({zIndex:10,"> * + *":{marginTop:10},"&:empty":{display:"none"}},({placement})=>placement||{bottom:0,left:0,right:0,position:"fixed"}),NotificationList=({notifications,clearNotification,placement=void 0})=>import_react47.default.createElement(List2,{placement},notifications.map(notification=>import_react47.default.createElement(NotificationItem_default,{key:notification.id,onDismissNotification:id=>clearNotification(id),notification}))),NotificationList_default=NotificationList;var mapper3=({state,api})=>({notifications:state.notifications,clearNotification:api.clearNotification}),NotificationConnect=props=>import_react48.default.createElement(ManagerConsumer,{filter:mapper3},fromState=>import_react48.default.createElement(NotificationList_default,{...props,...fromState})),notifications_default=NotificationConnect;var View=newStyled.div({position:"fixed",overflow:"hidden",height:"100vh",width:"100vw"}),App=({viewMode,layout,panelCount,pages})=>{let{width,height,ref}=useResizeDetector(),content,props=(0,import_react49.useMemo)(()=>({Sidebar:sidebar_default,Preview:preview_default,Panel:panel_default2,Notifications:notifications_default}),[]);return!width||!height?content=import_react49.default.createElement("div",null):width<600?content=import_react49.default.createElement(Mobile,{...props,viewMode,options:layout,pages}):content=import_react49.default.createElement(Desktop,{...props,viewMode,options:layout,width,height,panelCount,pages}),import_react49.default.createElement(View,{ref},import_react49.default.createElement(Global,{styles:createGlobal}),import_react49.default.createElement(Symbols,{icons:["folder","component","document","bookmarkhollow"]}),content)};App.displayName="App";var app_default=App;var Provider=class{getElements(_type){throw new Error("Provider.getElements() is not implemented!")}handleAPI(_api){throw new Error("Provider.handleAPI() is not implemented!")}getConfig(){return console.error("Provider.getConfig() is not implemented!"),{}}};var import_react57=__toESM(require_react());var import_react51=__toESM(require_react());var import_react50=__toESM(require_react());var Header=newStyled.header(({theme})=>({marginBottom:32,fontSize:theme.typography.size.l2,color:theme.base==="light"?theme.color.darkest:theme.color.lightest,fontWeight:theme.typography.weight.bold,alignItems:"center",display:"flex","> svg":{height:48,width:"auto",marginRight:8}})),Container4=newStyled.div({display:"flex",alignItems:"center",justifyContent:"center",height:"calc(100% - 40px)",flexDirection:"column"}),UpgradeBlock=newStyled.div(({theme})=>({border:"1px solid",borderRadius:5,padding:20,margin:20,marginTop:0,maxWidth:400,borderColor:theme.appBorderColor,fontSize:theme.typography.size.s2})),Code3=newStyled.pre(({theme})=>({background:theme.base==="light"?"rgba(0, 0, 0, 0.05)":theme.appBorderColor,fontSize:theme.typography.size.s2-1,margin:"4px 0 16px"})),Footer=newStyled.div(({theme})=>({marginBottom:24,display:"flex",flexDirection:"column",alignItems:"center",color:theme.base==="light"?theme.color.dark:theme.color.lightest,fontWeight:theme.typography.weight.regular,fontSize:theme.typography.size.s2})),SquareButton=newStyled(Button)(({theme})=>({"&&":{borderRadius:4,fontSize:"13px",lineHeight:"14px",color:theme.base==="light"?theme.color.darker:theme.color.lightest,padding:"9px 12px",svg:{marginRight:6}}})),TabButton2=newStyled(Button)(({theme,active})=>({"&&":{padding:2,paddingRight:8,margin:0,color:active?theme.color.secondary:theme.base==="light"?theme.color.dark:theme.color.lightest}})),StyledLink=newStyled(Link22)(({theme})=>({"&&":{fontWeight:theme.typography.weight.bold,color:theme.base==="light"?theme.color.dark:theme.color.light},"&:hover":{color:theme.base==="light"?theme.color.darkest:theme.color.lightest}})),AboutScreen=({current,onNavigateToWhatsNew})=>{let[activeTab,setActiveTab]=(0,import_react50.useState)("npm");return import_react50.default.createElement(Container4,null,import_react50.default.createElement("div",{style:{flex:"1"}}),import_react50.default.createElement(Header,null,import_react50.default.createElement(StorybookIcon,null)," Storybook"),import_react50.default.createElement(UpgradeBlock,null,import_react50.default.createElement("strong",null,"You are on Storybook ",current.version),import_react50.default.createElement("p",null,"Run the following script to check for updates and upgrade to the latest version."),import_react50.default.createElement("div",null,import_react50.default.createElement(TabButton2,{active:activeTab==="npm",onClick:()=>setActiveTab("npm")},"npm"),import_react50.default.createElement(TabButton2,{active:activeTab==="pnpm",onClick:()=>setActiveTab("pnpm")},"pnpm")),import_react50.default.createElement(Code3,null,activeTab==="npm"?"npx storybook@latest upgrade":"pnpm dlx storybook@latest upgrade"),onNavigateToWhatsNew&&import_react50.default.createElement(Link22,{onClick:onNavigateToWhatsNew},"See what's new in Storybook")),import_react50.default.createElement("div",{style:{flex:"1.2"}}),import_react50.default.createElement(Footer,null,import_react50.default.createElement("div",{style:{marginBottom:12}},import_react50.default.createElement(SquareButton,{isLink:!0,outline:!0,small:!0,href:"https://github.com/storybookjs/storybook",style:{marginRight:12}},import_react50.default.createElement(Icons,{icon:"github",style:{display:"inline",marginRight:5}}),"GitHub"),import_react50.default.createElement(SquareButton,{isLink:!0,outline:!0,small:!0,href:"https://storybook.js.org/docs"},import_react50.default.createElement(Icons,{icon:"document",style:{display:"inline",marginRight:5}}),"Documentation")),import_react50.default.createElement("div",null,"Open source software maintained by"," ",import_react50.default.createElement(StyledLink,{href:"https://www.chromatic.com/"},"Chromatic")," and the"," ",import_react50.default.createElement(StyledLink,{href:"https://github.com/storybookjs/storybook/graphs/contributors"},"Storybook Community"))))};var NotificationClearer=class extends import_react51.Component{componentDidMount(){let{api,notificationId}=this.props;api.clearNotification(notificationId)}render(){let{children}=this.props;return children}},AboutPage=()=>{let api=useStorybookApi(),state=useStorybookState(),onNavigateToWhatsNew=(0,import_react51.useCallback)(()=>{api.changeSettingsTab("whats-new")},[api]);return import_react51.default.createElement(NotificationClearer,{api,notificationId:"update"},import_react51.default.createElement(AboutScreen,{current:api.getCurrentVersion(),onNavigateToWhatsNew:state.whatsNewData?.status==="SUCCESS"?onNavigateToWhatsNew:void 0}))};var import_react53=__toESM(require_react());var import_react52=__toESM(require_react());var Centered=newStyled.div({top:"50%",position:"absolute",transform:"translateY(-50%)",width:"100%",textAlign:"center"}),LoaderWrapper3=newStyled.div({position:"relative",height:"32px"}),Message4=newStyled.div(({theme})=>({paddingTop:"12px",color:theme.textMutedColor,maxWidth:"295px",margin:"0 auto",fontSize:`${theme.typography.size.s1}px`,lineHeight:"16px"})),Container5=newStyled.div(({theme})=>({position:"absolute",width:"100%",bottom:"40px",background:theme.background.bar,fontSize:"13px",borderTop:"1px solid",borderColor:theme.appBorderColor,padding:"8px 12px",display:"flex",alignItems:"center",justifyContent:"space-between"})),ToggleNotificationButton=newStyled(IconButton)(({theme})=>({fontWeight:theme.typography.weight.regular,color:theme.color.mediumdark,margin:0})),CopyButton=newStyled(Button)(({theme})=>({"&&":{fontSize:"13px",color:theme.color.defaultText,margin:0,padding:0,borderRadius:0}})),WhatsNewFooter=({isNotificationsEnabled,onToggleNotifications,onCopyLink})=>{let theme=useTheme(),[copyText,setCopyText]=(0,import_react52.useState)("Copy Link"),copyLink=()=>{onCopyLink(),setCopyText("Copied!"),setTimeout(()=>setCopyText("Copy Link"),4e3)};return import_react52.default.createElement(Container5,null,import_react52.default.createElement("div",{style:{display:"flex",alignItems:"center",gap:10}},import_react52.default.createElement(Icons,{icon:"heart",color:theme.color.mediumdark}),import_react52.default.createElement("div",null,"Share this with your team."),import_react52.default.createElement(CopyButton,{onClick:copyLink,small:!0},copyText)),import_react52.default.createElement(ToggleNotificationButton,{onClick:onToggleNotifications},isNotificationsEnabled?import_react52.default.createElement(import_react52.default.Fragment,null,import_react52.default.createElement(Icons,{icon:"eyeclose"}),"\xA0Hide notifications"):import_react52.default.createElement(import_react52.default.Fragment,null,import_react52.default.createElement(Icons,{icon:"eye"}),"\xA0Show notifications")))},Iframe=newStyled.iframe({position:"absolute",top:0,left:0,right:0,bottom:0,border:0,margin:0,padding:0,width:"100%",height:"calc(100% - 80px)",background:"white"},({isLoaded})=>({visibility:isLoaded?"visible":"hidden"})),AlertIcon=newStyled(props=>import_react52.default.createElement(Icons,{icon:"alert",...props}))(({theme})=>({color:theme.textMutedColor,width:32,height:32,margin:"0 auto"})),WhatsNewLoader=()=>import_react52.default.createElement(Centered,null,import_react52.default.createElement(LoaderWrapper3,null,import_react52.default.createElement(Loader,null)),import_react52.default.createElement(Message4,null,"Loading...")),MaxWaitTimeMessaging=()=>import_react52.default.createElement(Centered,null,import_react52.default.createElement(AlertIcon,null),import_react52.default.createElement(Message4,null,"The page couldn't be loaded. Check your internet connection and try again.")),PureWhatsNewScreen=({didHitMaxWaitTime,isLoaded,onLoad,url,onCopyLink,onToggleNotifications,isNotificationsEnabled})=>import_react52.default.createElement(import_react52.Fragment,null,!isLoaded&&!didHitMaxWaitTime&&import_react52.default.createElement(WhatsNewLoader,null),didHitMaxWaitTime?import_react52.default.createElement(MaxWaitTimeMessaging,null):import_react52.default.createElement(import_react52.default.Fragment,null,import_react52.default.createElement(Iframe,{isLoaded,onLoad,src:url,title:"What's new?"}),import_react52.default.createElement(WhatsNewFooter,{isNotificationsEnabled,onToggleNotifications,onCopyLink}))),MAX_WAIT_TIME=1e4,WhatsNewScreen=()=>{let api=useStorybookApi(),state=useStorybookState(),{whatsNewData}=state,[isLoaded,setLoaded]=(0,import_react52.useState)(!1),[didHitMaxWaitTime,setDidHitMaxWaitTime]=(0,import_react52.useState)(!1);if((0,import_react52.useEffect)(()=>{let timer=setTimeout(()=>!isLoaded&&setDidHitMaxWaitTime(!0),MAX_WAIT_TIME);return()=>clearTimeout(timer)},[isLoaded]),whatsNewData?.status!=="SUCCESS")return null;let isNotificationsEnabled=!whatsNewData.disableWhatsNewNotifications;return import_react52.default.createElement(PureWhatsNewScreen,{didHitMaxWaitTime,isLoaded,onLoad:()=>{api.whatsNewHasBeenRead(),setLoaded(!0)},url:whatsNewData.url,isNotificationsEnabled,onCopyLink:()=>{navigator.clipboard?.writeText(whatsNewData.blogUrl??whatsNewData.url)},onToggleNotifications:()=>{isNotificationsEnabled?scope.confirm("All update notifications will no longer be shown. Are you sure?")&&api.toggleWhatsNewNotifications():api.toggleWhatsNewNotifications()}})};var WhatsNewPage=()=>import_react53.default.createElement(WhatsNewScreen,null);var import_react56=__toESM(require_react());var import_react55=__toESM(require_react());var import_react54=__toESM(require_react());var Footer2=newStyled.div(({theme})=>({display:"flex",paddingTop:20,marginTop:20,borderTop:`1px solid ${theme.appBorderColor}`,fontWeight:theme.typography.weight.bold,"& > * + *":{marginLeft:20}})),SettingsFooter=props=>import_react54.default.createElement(Footer2,{...props},import_react54.default.createElement(Link22,{secondary:!0,href:"https://storybook.js.org",cancel:!1,target:"_blank"},"Docs"),import_react54.default.createElement(Link22,{secondary:!0,href:"https://github.com/storybookjs/storybook",cancel:!1,target:"_blank"},"GitHub"),import_react54.default.createElement(Link22,{secondary:!0,href:"https://storybook.js.org/community#support",cancel:!1,target:"_blank"},"Support")),SettingsFooter_default=SettingsFooter;var Header2=newStyled.header(({theme})=>({marginBottom:20,fontSize:theme.typography.size.m3,fontWeight:theme.typography.weight.bold,alignItems:"center",display:"flex"})),HeaderItem=newStyled.div(({theme})=>({fontWeight:theme.typography.weight.bold})),GridHeaderRow=newStyled.div({alignSelf:"flex-end",display:"grid",margin:"10px 0",gridTemplateColumns:"1fr 1fr 12px","& > *:last-of-type":{gridColumn:"2 / 2",justifySelf:"flex-end",gridRow:"1"}}),Row=newStyled.div(({theme})=>({padding:"6px 0",borderTop:`1px solid ${theme.appBorderColor}`,display:"grid",gridTemplateColumns:"1fr 1fr 0px"})),GridWrapper=newStyled.div({display:"grid",gridTemplateColumns:"1fr",gridAutoRows:"minmax(auto, auto)",marginBottom:20}),Description=newStyled.div({alignSelf:"center"}),TextInput=newStyled(Form.Input)(({valid,theme})=>valid==="error"?{animation:`${theme.animation.jiggle} 700ms ease-out`}:{},{display:"flex",width:80,flexDirection:"column",justifySelf:"flex-end",paddingLeft:4,paddingRight:4,textAlign:"center"}),Fade=keyframes`
|
|
403
|
+
`),Shortcut=({keys:keys2})=>import_react29.default.createElement(import_react29.default.Fragment,null,import_react29.default.createElement(Key,null,keys2.map((key2,index2)=>import_react29.default.createElement(KeyChild,{key:key2},shortcutToHumanString([key2]))))),useMenu=(state,api,showToolbar,isFullscreen,showPanel,showNav,enableShortcuts)=>{let theme=useTheme(),shortcutKeys=api.getShortcutKeys(),about=(0,import_react29.useMemo)(()=>({id:"about",title:"About your Storybook",onClick:()=>api.navigateToSettingsPage("/settings/about")}),[api]),whatsNewNotificationsEnabled=state.whatsNewData?.status==="SUCCESS"&&!state.disableWhatsNewNotifications,isWhatsNewUnread=api.isWhatsNewUnread(),whatsNew=(0,import_react29.useMemo)(()=>({id:"whats-new",title:"What's new?",onClick:()=>api.navigateToSettingsPage("/settings/whats-new"),right:whatsNewNotificationsEnabled&&isWhatsNewUnread&&import_react29.default.createElement(Badge,{status:"positive"},"Check it out")}),[api,whatsNewNotificationsEnabled,isWhatsNewUnread]),shortcuts=(0,import_react29.useMemo)(()=>({id:"shortcuts",title:"Keyboard shortcuts",onClick:()=>api.navigateToSettingsPage("/settings/shortcuts"),right:enableShortcuts?import_react29.default.createElement(Shortcut,{keys:shortcutKeys.shortcutsPage}):null,style:{borderBottom:`4px solid ${theme.appBorderColor}`}}),[api,enableShortcuts,shortcutKeys.shortcutsPage,theme.appBorderColor]),sidebarToggle=(0,import_react29.useMemo)(()=>({id:"S",title:"Show sidebar",onClick:()=>api.toggleNav(),active:showNav,right:enableShortcuts?import_react29.default.createElement(Shortcut,{keys:shortcutKeys.toggleNav}):null,left:showNav?import_react29.default.createElement(Icons,{icon:"check"}):null}),[api,enableShortcuts,shortcutKeys,showNav]),toolbarToogle=(0,import_react29.useMemo)(()=>({id:"T",title:"Show toolbar",onClick:()=>api.toggleToolbar(),active:showToolbar,right:enableShortcuts?import_react29.default.createElement(Shortcut,{keys:shortcutKeys.toolbar}):null,left:showToolbar?import_react29.default.createElement(Icons,{icon:"check"}):null}),[api,enableShortcuts,shortcutKeys,showToolbar]),addonsToggle=(0,import_react29.useMemo)(()=>({id:"A",title:"Show addons",onClick:()=>api.togglePanel(),active:showPanel,right:enableShortcuts?import_react29.default.createElement(Shortcut,{keys:shortcutKeys.togglePanel}):null,left:showPanel?import_react29.default.createElement(Icons,{icon:"check"}):null}),[api,enableShortcuts,shortcutKeys,showPanel]),addonsOrientationToggle=(0,import_react29.useMemo)(()=>({id:"D",title:"Change addons orientation",onClick:()=>api.togglePanelPosition(),right:enableShortcuts?import_react29.default.createElement(Shortcut,{keys:shortcutKeys.panelPosition}):null}),[api,enableShortcuts,shortcutKeys]),fullscreenToggle=(0,import_react29.useMemo)(()=>({id:"F",title:"Go full screen",onClick:()=>api.toggleFullscreen(),active:isFullscreen,right:enableShortcuts?import_react29.default.createElement(Shortcut,{keys:shortcutKeys.fullScreen}):null,left:isFullscreen?import_react29.default.createElement(Icons,{icon:"check"}):null}),[api,enableShortcuts,shortcutKeys,isFullscreen]),searchToggle=(0,import_react29.useMemo)(()=>({id:"/",title:"Search",onClick:()=>api.focusOnUIElement(focusableUIElements2.storySearchField),right:enableShortcuts?import_react29.default.createElement(Shortcut,{keys:shortcutKeys.search}):null}),[api,enableShortcuts,shortcutKeys]),up=(0,import_react29.useMemo)(()=>({id:"up",title:"Previous component",onClick:()=>api.jumpToComponent(-1),right:enableShortcuts?import_react29.default.createElement(Shortcut,{keys:shortcutKeys.prevComponent}):null}),[api,enableShortcuts,shortcutKeys]),down=(0,import_react29.useMemo)(()=>({id:"down",title:"Next component",onClick:()=>api.jumpToComponent(1),right:enableShortcuts?import_react29.default.createElement(Shortcut,{keys:shortcutKeys.nextComponent}):null}),[api,enableShortcuts,shortcutKeys]),prev=(0,import_react29.useMemo)(()=>({id:"prev",title:"Previous story",onClick:()=>api.jumpToStory(-1),right:enableShortcuts?import_react29.default.createElement(Shortcut,{keys:shortcutKeys.prevStory}):null}),[api,enableShortcuts,shortcutKeys]),next=(0,import_react29.useMemo)(()=>({id:"next",title:"Next story",onClick:()=>api.jumpToStory(1),right:enableShortcuts?import_react29.default.createElement(Shortcut,{keys:shortcutKeys.nextStory}):null}),[api,enableShortcuts,shortcutKeys]),collapse=(0,import_react29.useMemo)(()=>({id:"collapse",title:"Collapse all",onClick:()=>api.collapseAll(),right:enableShortcuts?import_react29.default.createElement(Shortcut,{keys:shortcutKeys.collapseAll}):null}),[api,enableShortcuts,shortcutKeys]),getAddonsShortcuts=(0,import_react29.useCallback)(()=>{let addonsShortcuts2=api.getAddonsShortcuts(),keys2=shortcutKeys;return Object.entries(addonsShortcuts2).filter(([_2,{showInMenu}])=>showInMenu).map(([actionName,{label,action}])=>({id:actionName,title:label,onClick:()=>action(),right:enableShortcuts?import_react29.default.createElement(Shortcut,{keys:keys2[actionName]}):null}))},[api,enableShortcuts,shortcutKeys]);return(0,import_react29.useMemo)(()=>[about,...state.whatsNewData?.status==="SUCCESS"?[whatsNew]:[],shortcuts,sidebarToggle,toolbarToogle,addonsToggle,addonsOrientationToggle,fullscreenToggle,searchToggle,up,down,prev,next,collapse,...getAddonsShortcuts()],[about,state,whatsNew,shortcuts,sidebarToggle,toolbarToogle,addonsToggle,addonsOrientationToggle,fullscreenToggle,searchToggle,up,down,prev,next,collapse,getAddonsShortcuts])};var Sidebar4=import_react30.default.memo(function(){return import_react30.default.createElement(ManagerConsumer,{filter:({state,api})=>{let{ui:{name:name2,url,enableShortcuts},viewMode,storyId,refId,layout:{showToolbar,isFullscreen,showPanel,showNav},index:index2,status,indexError,previewInitialized,refs:refs2}=state,menu=useMenu(state,api,showToolbar,isFullscreen,showPanel,showNav,enableShortcuts),whatsNewNotificationsEnabled=state.whatsNewData?.status==="SUCCESS"&&!state.disableWhatsNewNotifications,items=api.getElements(Addon_TypesEnum.experimental_SIDEBAR_BOTTOM),bottom=(0,import_react30.useMemo)(()=>Object.values(items),[items]),top=(0,import_react30.useMemo)(()=>Object.values(api.getElements(Addon_TypesEnum.experimental_SIDEBAR_TOP)),[]);return{title:name2,url,index:index2,indexError,status,previewInitialized,refs:refs2,storyId,refId,viewMode,menu,menuHighlighted:whatsNewNotificationsEnabled&&api.isWhatsNewUnread(),enableShortcuts,bottom,extra:top}}},fromState=>import_react30.default.createElement(Sidebar2,{...fromState}))}),sidebar_default=Sidebar4;var import_react42=__toESM(require_react());var import_react41=__toESM(require_react());var FrameWrap=newStyled.div(({offset})=>({position:"absolute",overflow:"auto",left:0,right:0,bottom:0,top:offset,zIndex:3,transition:"all 0.1s linear",height:`calc(100% - ${offset}px)`,background:"transparent"})),UnstyledLink=newStyled(Link2)({color:"inherit",textDecoration:"inherit",display:"inline-block"}),DesktopOnly=newStyled.span({"@media (max-width: 599px)":{display:"none"}}),IframeWrapper=newStyled.div(({theme})=>({position:"absolute",top:0,left:0,bottom:0,right:0,width:"100%",height:"100%"})),LoaderWrapper2=newStyled.div(({theme})=>({position:"absolute",top:0,left:0,bottom:0,right:0,background:theme.background.preview,zIndex:1}));var import_react31=__toESM(require_react());var initialZoom=1,Context=import_react31.default.createContext({value:initialZoom,set:v2=>{}}),ZoomProvider=class extends import_react31.Component{constructor(){super(...arguments);this.state={value:initialZoom};this.set=value2=>this.setState({value:value2})}render(){let{children,shouldScale}=this.props,{set:set3}=this,{value:value2}=this.state;return import_react31.default.createElement(Context.Provider,{value:{value:shouldScale?value2:initialZoom,set:set3}},children)}},{Consumer:ZoomConsumer}=Context,Zoom2=import_react31.default.memo(function({zoomIn,zoomOut,reset}){return import_react31.default.createElement(import_react31.default.Fragment,null,import_react31.default.createElement(IconButton,{key:"zoomin",onClick:zoomIn,title:"Zoom in"},import_react31.default.createElement(Icons,{icon:"zoom"})),import_react31.default.createElement(IconButton,{key:"zoomout",onClick:zoomOut,title:"Zoom out"},import_react31.default.createElement(Icons,{icon:"zoomout"})),import_react31.default.createElement(IconButton,{key:"zoomreset",onClick:reset,title:"Reset zoom"},import_react31.default.createElement(Icons,{icon:"zoomreset"})))});var ZoomWrapper=import_react31.default.memo(function({set:set3,value:value2}){let zoomIn=(0,import_react31.useCallback)(e3=>{e3.preventDefault(),set3(.8*value2)},[set3,value2]),zoomOut=(0,import_react31.useCallback)(e3=>{e3.preventDefault(),set3(1.25*value2)},[set3,value2]),reset=(0,import_react31.useCallback)(e3=>{e3.preventDefault(),set3(initialZoom)},[set3,initialZoom]);return import_react31.default.createElement(Zoom2,{key:"zoom",zoomIn,zoomOut,reset})}),zoomTool={title:"zoom",id:"zoom",type:Addon_TypesEnum.TOOL,match:({viewMode})=>viewMode==="story",render:import_react31.default.memo(function(){return import_react31.default.createElement(import_react31.default.Fragment,null,import_react31.default.createElement(ZoomConsumer,null,({set:set3,value:value2})=>import_react31.default.createElement(ZoomWrapper,{set:set3,value:value2})),import_react31.default.createElement(Separator,null))})};var import_react32=__toESM(require_react());var ApplyWrappers=({wrappers,id,storyId,active,children})=>import_react32.default.createElement(import_react32.Fragment,null,wrappers.reduceRight((acc,wrapper,index2)=>import_react32.default.createElement(wrapper.render,{index:index2,children:acc,id,storyId,active}),children)),defaultWrappers=[{id:"iframe-wrapper",type:Addon_TypesEnum.PREVIEW,render:p2=>import_react32.default.createElement(IframeWrapper,{id:"storybook-preview-wrapper",hidden:!p2.active},p2.children)}];var import_react38=__toESM(require_react());var import_react33=__toESM(require_react()),import_copy_to_clipboard=__toESM(require_copy_to_clipboard());var{PREVIEW_URL,document:document10}=scope,copyMapper=({state})=>{let{storyId,refId,refs:refs2}=state,{location:location3}=document10,ref=refs2[refId],baseUrl=`${location3.origin}${location3.pathname}`;return baseUrl.endsWith("/")||(baseUrl+="/"),{refId,baseUrl:ref?`${ref.url}/iframe.html`:PREVIEW_URL||`${baseUrl}iframe.html`,storyId,queryParams:state.customQueryParams}},copyTool={title:"copy",id:"copy",type:Addon_TypesEnum.TOOL,match:({viewMode})=>viewMode==="story",render:()=>import_react33.default.createElement(ManagerConsumer,{filter:copyMapper},({baseUrl,storyId,queryParams})=>storyId?import_react33.default.createElement(IconButton,{key:"copy",onClick:()=>(0,import_copy_to_clipboard.default)(getStoryHref(baseUrl,storyId,queryParams)),title:"Copy canvas link"},import_react33.default.createElement(Icons,{icon:"link"})):null)};var import_react34=__toESM(require_react());var{PREVIEW_URL:PREVIEW_URL2}=scope,ejectMapper=({state})=>{let{storyId,refId,refs:refs2}=state,ref=refs2[refId];return{refId,baseUrl:ref?`${ref.url}/iframe.html`:PREVIEW_URL2||"iframe.html",storyId,queryParams:state.customQueryParams}},ejectTool={title:"eject",id:"eject",type:Addon_TypesEnum.TOOL,match:({viewMode})=>viewMode==="story",render:()=>import_react34.default.createElement(ManagerConsumer,{filter:ejectMapper},({baseUrl,storyId,queryParams})=>storyId?import_react34.default.createElement(IconButton,{key:"opener",href:getStoryHref(baseUrl,storyId,queryParams),target:"_blank",title:"Open canvas in new tab"},import_react34.default.createElement(Icons,{icon:"sharealt"})):null)};var import_react35=__toESM(require_react());var menuMapper=({api,state})=>({isVisible:state.layout.showNav,singleStory:state.singleStory,toggle:()=>api.toggleNav()}),menuTool={title:"menu",id:"menu",type:Addon_TypesEnum.TOOL,match:({viewMode})=>["story","docs"].includes(viewMode),render:()=>import_react35.default.createElement(ManagerConsumer,{filter:menuMapper},({isVisible,toggle,singleStory})=>!singleStory&&!isVisible&&import_react35.default.createElement(import_react35.default.Fragment,null,import_react35.default.createElement(IconButton,{"aria-label":"Show sidebar",key:"menu",onClick:toggle,title:"Show sidebar"},import_react35.default.createElement(Icons,{icon:"menu"})),import_react35.default.createElement(Separator,null)))};var import_react36=__toESM(require_react());var menuMapper2=({api,state})=>({isVisible:state.layout.showPanel,singleStory:state.singleStory,panelPosition:state.layout.panelPosition,toggle:()=>api.togglePanel()}),addonsTool={title:"addons",id:"addons",type:Addon_TypesEnum.TOOL,match:({viewMode})=>viewMode==="story",render:()=>import_react36.default.createElement(ManagerConsumer,{filter:menuMapper2},({isVisible,toggle,singleStory,panelPosition})=>!singleStory&&!isVisible&&import_react36.default.createElement(import_react36.default.Fragment,null,import_react36.default.createElement(IconButton,{"aria-label":"Show addons",key:"addons",onClick:toggle,title:"Show addons"},import_react36.default.createElement(Icons,{icon:panelPosition==="bottom"?"bottombar":"sidebaralt"}))))};var import_react37=__toESM(require_react());var StyledAnimatedIconButton=newStyled(IconButton)(({theme,animating,disabled})=>({opacity:disabled?.5:1,svg:{animation:animating&&`${theme.animation.rotate360} 1000ms ease-out`}})),menuMapper3=({api,state})=>{let{storyId}=state;return{storyId,remount:()=>api.emit(FORCE_REMOUNT,{storyId:state.storyId}),api}},remountTool={title:"remount",id:"remount",type:Addon_TypesEnum.TOOL,match:({viewMode})=>viewMode==="story",render:()=>import_react37.default.createElement(ManagerConsumer,{filter:menuMapper3},({remount,storyId,api})=>{let[isAnimating,setIsAnimating]=(0,import_react37.useState)(!1),remountComponent=()=>{storyId&&remount()};return api.on(FORCE_REMOUNT,()=>{setIsAnimating(!0)}),import_react37.default.createElement(StyledAnimatedIconButton,{key:"remount",title:"Remount component",onClick:remountComponent,onAnimationEnd:()=>setIsAnimating(!1),animating:isAnimating,disabled:!storyId},import_react37.default.createElement(Icons,{icon:"sync"}))})};var getTools=getFn=>Object.values(getFn(Addon_TypesEnum.TOOL)),getToolsExtra=getFn=>Object.values(getFn(Addon_TypesEnum.TOOLEXTRA)),Bar3=({shown,...props})=>import_react38.default.createElement(FlexBar,{...props}),Toolbar=newStyled(Bar3)({position:"absolute",left:0,right:0,top:0,transition:"transform .2s linear"},({shown})=>({transform:shown?"translateY(0px)":"translateY(-40px)"})),fullScreenMapper=({api,state})=>({toggle:api.toggleFullscreen,value:state.layout.isFullscreen,shortcut:shortcutToHumanString(api.getShortcutKeys().fullScreen),hasPanel:Object.keys(api.getPanels()).length>0,singleStory:state.singleStory}),fullScreenTool={title:"fullscreen",id:"fullscreen",type:Addon_TypesEnum.TOOL,match:p2=>["story","docs"].includes(p2.viewMode),render:()=>import_react38.default.createElement(ManagerConsumer,{filter:fullScreenMapper},({toggle,value:value2,shortcut,hasPanel,singleStory})=>(!singleStory||singleStory&&hasPanel)&&import_react38.default.createElement(IconButton,{key:"full",onClick:toggle,title:`${value2?"Exit full screen":"Go full screen"} [${shortcut}]`},import_react38.default.createElement(Icons,{icon:value2?"close":"expand"})))},tabsMapper=({state})=>({viewMode:state.docsOnly,storyId:state.storyId,path:state.path,location:state.location,refId:state.refId}),createTabsTool=tabs=>({title:"title",id:"title",type:Addon_TypesEnum.TOOL,render:()=>import_react38.default.createElement(ManagerConsumer,{filter:tabsMapper},rp=>import_react38.default.createElement(import_react38.Fragment,null,import_react38.default.createElement(TabBar,{key:"tabs"},tabs.filter(p2=>!p2.hidden).map((t3,index2)=>{let to=t3.route(rp),isActive=rp.path===to;return import_react38.default.createElement(UnstyledLink,{key:t3.id||`l${index2}`,to},import_react38.default.createElement(TabButton,{disabled:t3.disabled,active:isActive},t3.title))})),import_react38.default.createElement(Separator,null)))}),defaultTools=[remountTool,zoomTool],defaultToolsExtra=[addonsTool,fullScreenTool,ejectTool,copyTool],useTools=(getElements,tabs,viewMode,entry,location3,path)=>{let toolsFromConfig=(0,import_react38.useMemo)(()=>getTools(getElements),[getElements]),toolsExtraFromConfig=(0,import_react38.useMemo)(()=>getToolsExtra(getElements),[getElements]),tools=(0,import_react38.useMemo)(()=>[...defaultTools,...toolsFromConfig],[defaultTools,toolsFromConfig]),toolsExtra=(0,import_react38.useMemo)(()=>[...defaultToolsExtra,...toolsExtraFromConfig],[defaultToolsExtra,toolsExtraFromConfig]);return(0,import_react38.useMemo)(()=>["story","docs"].includes(entry?.type)?filterTools(tools,toolsExtra,tabs,{viewMode,entry,location:location3,path}):{left:tools,right:toolsExtra},[viewMode,entry,location3,path,tools,toolsExtra,tabs])},ToolRes=import_react38.default.memo(function({api,entry,tabs,isShown,location:location3,path,viewMode}){let{left,right}=useTools(api.getElements,tabs,viewMode,entry,location3,path);return left||right?import_react38.default.createElement(Toolbar,{key:"toolbar",shown:isShown,border:!0},import_react38.default.createElement(Tools,{key:"left",list:left}),import_react38.default.createElement(Tools,{key:"right",list:right})):null}),ToolbarComp=import_react38.default.memo(function(props){return import_react38.default.createElement(Location,null,({location:location3,path,viewMode})=>import_react38.default.createElement(ToolRes,{...props,location:location3,path,viewMode}))}),Tools=import_react38.default.memo(function({list}){return import_react38.default.createElement(import_react38.default.Fragment,null,list.filter(Boolean).map(({render:Render,id,...t3},index2)=>import_react38.default.createElement(Render,{key:id||t3.key||`f-${index2}`})))});function toolbarItemHasBeenExcluded(item,entry){let parameters=entry.type==="story"&&entry.prepared?entry.parameters:{},toolbarItemsFromStoryParameters="toolbar"in parameters?parameters.toolbar:void 0,{toolbar:toolbarItemsFromAddonsConfig}=addons.getConfig(),toolbarItems=merge_default(toolbarItemsFromAddonsConfig,toolbarItemsFromStoryParameters);return toolbarItems?!!toolbarItems[item.id]?.hidden:!1}function filterTools(tools,toolsExtra,tabs,{viewMode,entry,location:location3,path}){let toolsLeft=[menuTool,tabs.filter(p2=>!p2.hidden).length>1&&createTabsTool(tabs),...tools],toolsRight=[...toolsExtra],filter=item=>item&&(!item.match||item.match({storyId:entry.id,refId:entry.refId,viewMode,location:location3,path}))&&!toolbarItemHasBeenExcluded(item,entry),left=toolsLeft.filter(filter),right=toolsRight.filter(filter);return{left,right}}var import_react40=__toESM(require_react());var import_react39=__toESM(require_react());var StyledIframe=newStyled.iframe(({theme})=>({backgroundColor:theme.background.preview,position:"absolute",display:"block",boxSizing:"content-box",height:"100%",width:"100%",border:"0 none",transition:"background-position 0s, visibility 0s",backgroundPosition:"-1px -1px, -1px -1px, -1px -1px, -1px -1px"}));function IFrame(props){let{active,id,title,src,allowFullScreen,scale,...rest}=props,iFrameRef=import_react39.default.useRef(null);return import_react39.default.createElement(Zoom.IFrame,{scale,active,iFrameRef},import_react39.default.createElement(StyledIframe,{"data-is-storybook":active?"true":"false",onLoad:e3=>e3.currentTarget.setAttribute("data-is-loaded","true"),id,title,src,allow:"clipboard-write;",allowFullScreen,ref:iFrameRef,...rest}))}var import_qs3=__toESM(require_lib()),stringifyQueryParams=queryParams=>import_qs3.default.stringify(queryParams,{addQueryPrefix:!0,encode:!1}).replace(/^\?/,"&");var getActive=(refId,refs2)=>refId&&refs2[refId]?`storybook-ref-${refId}`:"storybook-preview-iframe",SkipToSidebarLink=newStyled(Button)(({theme})=>({display:"none","@media (min-width: 600px)":{position:"absolute",display:"block",top:10,right:15,padding:"10px 15px",fontSize:theme.typography.size.s1,transform:"translateY(-100px)","&:focus":{transform:"translateY(0)",zIndex:1}}})),whenSidebarIsVisible=({state})=>({isFullscreen:state.layout.isFullscreen,showNav:state.layout.showNav,selectedStoryId:state.storyId}),styles2={'#root [data-is-storybook="false"]':{display:"none"},'#root [data-is-storybook="true"]':{display:"block"}},FramesRenderer=({refs:refs2,scale,viewMode="story",refId,queryParams={},baseUrl,storyId="*"})=>{let version2=refs2[refId]?.version,stringifiedQueryParams=stringifyQueryParams({...queryParams,...version2&&{version:version2}}),active=getActive(refId,refs2),{current:frames}=(0,import_react40.useRef)({}),refsToLoad=Object.values(refs2).filter(ref=>ref.type==="auto-inject"||ref.id===refId,{});return frames["storybook-preview-iframe"]||(frames["storybook-preview-iframe"]=getStoryHref(baseUrl,storyId,{...queryParams,...version2&&{version:version2},viewMode})),refsToLoad.forEach(ref=>{let id=`storybook-ref-${ref.id}`,existingUrl=frames[id]?.split("/iframe.html")[0];if(!existingUrl||ref.url!==existingUrl){let newUrl=`${ref.url}/iframe.html?id=${storyId}&viewMode=${viewMode}&refId=${ref.id}${stringifiedQueryParams}`;frames[id]=newUrl}}),import_react40.default.createElement(import_react40.Fragment,null,import_react40.default.createElement(Global,{styles:styles2}),import_react40.default.createElement(ManagerConsumer,{filter:whenSidebarIsVisible},({isFullscreen,showNav,selectedStoryId})=>!isFullscreen&&showNav&&selectedStoryId?import_react40.default.createElement(SkipToSidebarLink,{secondary:!0,isLink:!0,tabIndex:0,href:`#${selectedStoryId}`},"Skip to sidebar"):null),Object.entries(frames).map(([id,src])=>import_react40.default.createElement(import_react40.Fragment,{key:id},import_react40.default.createElement(IFrame,{active:id===active,key:id,id,title:id,src,allowFullScreen:!0,scale}))))};var{FEATURES:FEATURES2}=scope,getWrappers=getFn=>Object.values(getFn(Addon_TypesEnum.PREVIEW)),getTabs=getFn=>Object.values(getFn(Addon_TypesEnum.TAB)),canvasMapper=({state,api})=>({storyId:state.storyId,refId:state.refId,viewMode:state.viewMode,customCanvas:api.renderPreview,queryParams:state.customQueryParams,getElements:api.getElements,entry:api.getData(state.storyId,state.refId),previewInitialized:state.previewInitialized,refs:state.refs,active:!!(state.viewMode&&state.viewMode.match(/^(story|docs)$/))}),createCanvasTab=()=>({id:"canvas",type:Addon_TypesEnum.TAB,title:"Canvas",route:({storyId,refId})=>refId?`/story/${refId}_${storyId}`:`/story/${storyId}`,match:({viewMode})=>!!(viewMode&&viewMode.match(/^(story|docs)$/)),render:()=>null}),useTabs=(getElements,entry)=>{let canvasTab=(0,import_react41.useMemo)(()=>createCanvasTab(),[]),tabsFromConfig=(0,import_react41.useMemo)(()=>getTabs(getElements),[getElements]);return(0,import_react41.useMemo)(()=>entry?.type==="story"&&entry.parameters?filterTabs([canvasTab,...tabsFromConfig],entry.parameters):[canvasTab,...tabsFromConfig],[entry,...tabsFromConfig])},Preview2=import_react41.default.memo(function(props){let{api,id:previewId,options:options3,viewMode,storyId,entry=void 0,description,baseUrl,withLoader=!0}=props,{getElements}=api,tabs=useTabs(getElements,entry),shouldScale=viewMode==="story",{showToolbar,showTabs=!0}=options3,visibleTabsInToolbar=showTabs?tabs:[],previousStoryId=(0,import_react41.useRef)(storyId);return(0,import_react41.useEffect)(()=>{if(entry&&viewMode&&storyId!==previousStoryId.current&&(previousStoryId.current=storyId,viewMode.match(/docs|story/))){let{refId,id}=entry;api.emit(SET_CURRENT_STORY,{storyId:id,viewMode,options:{target:refId}})}},[entry,viewMode]),import_react41.default.createElement(import_react41.Fragment,null,previewId==="main"&&import_react41.default.createElement(W,{key:"description"},import_react41.default.createElement("title",null,description)),import_react41.default.createElement(ZoomProvider,{shouldScale},import_react41.default.createElement(ToolbarComp,{key:"tools",entry,api,isShown:showToolbar,tabs:visibleTabsInToolbar}),import_react41.default.createElement(FrameWrap,{key:"frame",offset:showToolbar?40:0},import_react41.default.createElement(Canvas,{withLoader,baseUrl}),tabs.map(({render:Render,match,...t3},i3)=>{let key2=t3.id||t3.key||i3;return import_react41.default.createElement(import_react41.Fragment,{key:key2},import_react41.default.createElement(Location,null,lp=>import_react41.default.createElement(Render,{active:match(lp)})))}))))});var Canvas=({baseUrl,withLoader})=>import_react41.default.createElement(ManagerConsumer,{filter:canvasMapper},({entry,refs:refs2,customCanvas,storyId,refId,viewMode,queryParams,getElements,previewInitialized,active})=>{let id="canvas",wrappers=(0,import_react41.useMemo)(()=>[...defaultWrappers,...getWrappers(getElements)],[getElements,...defaultWrappers]),[progress,setProgress]=(0,import_react41.useState)(void 0);(0,import_react41.useEffect)(()=>{if(FEATURES2?.storyStoreV7&&scope.CONFIG_TYPE==="DEVELOPMENT")try{addons.getServerChannel().on(PREVIEW_BUILDER_PROGRESS,options3=>{setProgress(options3)})}catch{}},[]);let refLoading=!!refs2[refId]&&!refs2[refId].previewInitialized,isBuilding=!(progress?.value===1||progress===void 0),rootLoading=!refId&&(!previewInitialized||isBuilding),isLoading=entry&&refLoading||rootLoading;return import_react41.default.createElement(ZoomConsumer,null,({value:scale})=>import_react41.default.createElement(import_react41.default.Fragment,null,withLoader&&isLoading&&import_react41.default.createElement(LoaderWrapper2,null,import_react41.default.createElement(Loader,{id:"preview-loader",role:"progressbar",progress})),import_react41.default.createElement(ApplyWrappers,{id,storyId,viewMode,active,wrappers},customCanvas?customCanvas(storyId,viewMode,id,baseUrl,scale,queryParams):import_react41.default.createElement(FramesRenderer,{baseUrl,refs:refs2,scale,entry,viewMode,refId,queryParams,storyId}))))});function filterTabs(panels,parameters){let{previewTabs}=addons.getConfig(),parametersTabs=parameters?parameters.previewTabs:void 0;if(previewTabs||parametersTabs){let tabs=merge_default(previewTabs,parametersTabs),arrTabs=Object.keys(tabs).map((key2,index2)=>({index:index2,...typeof tabs[key2]=="string"?{title:tabs[key2]}:tabs[key2],id:key2}));return panels.filter(panel=>{let t3=arrTabs.find(tab=>tab.id===panel.id);return t3===void 0||t3.id==="canvas"||!t3.hidden}).map((panel,index2)=>({...panel,index:index2})).sort((p1,p2)=>{let tab_1=arrTabs.find(tab=>tab.id===p1.id),index_1=tab_1?tab_1.index:arrTabs.length+p1.index,tab_2=arrTabs.find(tab=>tab.id===p2.id),index_2=tab_2?tab_2.index:arrTabs.length+p2.index;return index_1-index_2}).map(panel=>{let t3=arrTabs.find(tab=>tab.id===panel.id);return t3?{...panel,title:t3.title||panel.title,disabled:t3.disabled,hidden:t3.hidden}:panel})}return panels}var{PREVIEW_URL:PREVIEW_URL3}=scope,splitTitleAddExtraSpace=input=>input.split("/").join(" / ").replace(/\s\s/," "),getDescription=item=>{if(item?.type==="story"||item?.type==="docs"){let{title,name:name2}=item;return title&&name2?splitTitleAddExtraSpace(`${title} - ${name2} \u22C5 Storybook`):"Storybook"}return item?.name?`${item.name} \u22C5 Storybook`:"Storybook"},mapper=({api,state})=>{let{layout,location:location3,customQueryParams,storyId,refs:refs2,viewMode,path,refId}=state,entry=api.getData(storyId,refId);return{api,entry,options:layout,description:getDescription(entry),viewMode,path,refs:refs2,storyId,baseUrl:PREVIEW_URL3||"iframe.html",queryParams:customQueryParams,location:location3}},PreviewConnected=import_react42.default.memo(function(props){return import_react42.default.createElement(ManagerConsumer,{filter:mapper},fromState=>import_react42.default.createElement(Preview2,{...props,...fromState}))}),preview_default=PreviewConnected;var import_react45=__toESM(require_react()),import_memoizerific7=__toESM(require_memoizerific());var import_react44=__toESM(require_react());var import_react43=__toESM(require_react()),useMediaQuery=query=>{let[matches,setMatches]=(0,import_react43.useState)(!1);return(0,import_react43.useEffect)(()=>{let media=window.matchMedia(query);media.matches!==matches&&setMatches(media.matches);let listener=()=>setMatches(media.matches);return window.addEventListener("resize",listener),()=>window.removeEventListener("resize",listener)},[matches,query]),matches},useMedia_default=useMediaQuery;var SafeTab=class extends import_react44.Component{constructor(props){super(props),this.state={hasError:!1}}componentDidCatch(error,info){this.setState({hasError:!0}),console.error(error,info)}render(){let{hasError}=this.state,{children}=this.props;return hasError?import_react44.default.createElement("h1",null,"Something went wrong."):children}},AddonPanel2=import_react44.default.memo(({panels,shortcuts,actions,selectedPanel=null,panelPosition="right",absolute=!0})=>{let isTablet=useMedia_default("(min-width: 599px)");return import_react44.default.createElement(Tabs,{absolute,...selectedPanel?{selected:selectedPanel}:{},menuName:"Addons",actions,tools:isTablet?import_react44.default.createElement(import_react44.Fragment,null,import_react44.default.createElement(IconButton,{key:"position",onClick:actions.togglePosition,title:`Change addon orientation [${shortcutToHumanString(shortcuts.panelPosition)}]`},import_react44.default.createElement(Icons,{icon:panelPosition==="bottom"?"sidebaralt":"bottombar"})),import_react44.default.createElement(IconButton,{key:"visibility",onClick:actions.toggleVisibility,title:`Hide addons [${shortcutToHumanString(shortcuts.togglePanel)}]`},import_react44.default.createElement(Icons,{icon:"close"}))):void 0,id:"storybook-panel-root"},Object.entries(panels).map(([k2,v2])=>import_react44.default.createElement(SafeTab,{key:k2,id:k2,title:typeof v2.title=="function"?import_react44.default.createElement(v2.title,null):v2.title},v2.render)))});AddonPanel2.displayName="AddonPanel";var panel_default=AddonPanel2;var createPanelActions=(0,import_memoizerific7.default)(1)(api=>({onSelect:panel=>api.setSelectedPanel(panel),toggleVisibility:()=>api.togglePanel(),togglePosition:()=>api.togglePanelPosition()})),mapper2=({state,api})=>({panels:api.getStoryPanels(),selectedPanel:api.getSelectedPanel(),panelPosition:state.layout.panelPosition,actions:createPanelActions(api),shortcuts:api.getShortcutKeys()}),Panel2=props=>import_react45.default.createElement(ManagerConsumer,{filter:mapper2},customProps=>import_react45.default.createElement(panel_default,{...props,...customProps})),panel_default2=Panel2;var import_react48=__toESM(require_react());var import_react47=__toESM(require_react());var import_react46=__toESM(require_react());var Notification=newStyled.div(({theme})=>({position:"relative",display:"flex",padding:15,width:280,borderRadius:4,alignItems:"center",background:theme.base==="light"?"hsla(203, 50%, 20%, .97)":"hsla(203, 30%, 95%, .97)",boxShadow:"0 2px 5px 0 rgba(0,0,0,0.05), 0 5px 15px 0 rgba(0,0,0,0.1)",color:theme.color.inverseText,textDecoration:"none"})),NotificationWithInteractiveStates=newStyled(Notification)(()=>({transition:"all 150ms ease-out",transform:"translate3d(0, 0, 0)","&:hover":{transform:"translate3d(0, -3px, 0)",boxShadow:"0 1px 3px 0 rgba(30,167,253,0.5), 0 2px 5px 0 rgba(0,0,0,0.05), 0 5px 15px 0 rgba(0,0,0,0.1)"},"&:active":{transform:"translate3d(0, 0, 0)",boxShadow:"0 1px 3px 0 rgba(30,167,253,0.5), 0 2px 5px 0 rgba(0,0,0,0.05), 0 5px 15px 0 rgba(0,0,0,0.1)"},"&:focus":{boxShadow:"0 1px 3px 0 rgba(30,167,253,0.5), 0 2px 5px 0 rgba(0,0,0,0.05), 0 5px 15px 0 rgba(0,0,0,0.1)"}})),NotificationLink=NotificationWithInteractiveStates.withComponent(Link2),NotificationIconWrapper=newStyled.div(()=>({display:"flex",marginRight:10,alignItems:"center"})),NotificationTextWrapper=newStyled.div(()=>({width:"100%",display:"flex",flexDirection:"column"})),Headline=newStyled.div(({theme,hasIcon})=>({height:"100%",width:hasIcon?205:230,alignItems:"center",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",fontSize:theme.typography.size.s1,lineHeight:"16px",fontWeight:theme.typography.weight.bold})),SubHeadline=newStyled.div(({theme})=>({color:curriedTransparentize$12(.25,theme.color.inverseText),fontSize:theme.typography.size.s1-1,lineHeight:"14px",marginTop:2})),ItemContent=({icon,content:{headline,subHeadline}})=>{let theme=useTheme(),defaultColor=theme.base==="dark"?theme.color.mediumdark:theme.color.mediumlight;return import_react46.default.createElement(import_react46.default.Fragment,null,!icon||import_react46.default.createElement(NotificationIconWrapper,null,import_react46.default.createElement(Icons,{icon:icon.name,width:16,height:16,color:icon.color||defaultColor})),import_react46.default.createElement(NotificationTextWrapper,null,import_react46.default.createElement(Headline,{title:headline,hasIcon:!!icon},headline),subHeadline&&import_react46.default.createElement(SubHeadline,null,subHeadline)))},DismissButtonWrapper=newStyled(IconButton)(({theme})=>({alignSelf:"center",marginTop:0,color:theme.base==="light"?"rgba(255,255,255,0.7)":" #999999"})),DismissNotificationItem=({onDismiss})=>import_react46.default.createElement(DismissButtonWrapper,{title:"Dismiss notification",onClick:e3=>{e3.preventDefault(),onDismiss()}},import_react46.default.createElement(Icons,{icon:"closeAlt",height:12,width:12})),NotificationItemSpacer=newStyled.div({height:48}),NotificationItem=({notification:{content,link,onClear,id,icon},onDismissNotification})=>{let dismissNotificationItem=()=>{onDismissNotification(id),onClear&&onClear({dismissed:!0})};return link?import_react46.default.createElement(NotificationLink,{to:link},import_react46.default.createElement(ItemContent,{icon,content}),import_react46.default.createElement(DismissNotificationItem,{onDismiss:dismissNotificationItem})):import_react46.default.createElement(Notification,null,import_react46.default.createElement(ItemContent,{icon,content}),import_react46.default.createElement(DismissNotificationItem,{onDismiss:dismissNotificationItem}))},NotificationItem_default=NotificationItem;var List2=newStyled.div({zIndex:10,"> * + *":{marginTop:10},"&:empty":{display:"none"}},({placement})=>placement||{bottom:0,left:0,right:0,position:"fixed"}),NotificationList=({notifications,clearNotification,placement=void 0})=>import_react47.default.createElement(List2,{placement},notifications.map(notification=>import_react47.default.createElement(NotificationItem_default,{key:notification.id,onDismissNotification:id=>clearNotification(id),notification}))),NotificationList_default=NotificationList;var mapper3=({state,api})=>({notifications:state.notifications,clearNotification:api.clearNotification}),NotificationConnect=props=>import_react48.default.createElement(ManagerConsumer,{filter:mapper3},fromState=>import_react48.default.createElement(NotificationList_default,{...props,...fromState})),notifications_default=NotificationConnect;var View=newStyled.div({position:"fixed",overflow:"hidden",height:"100vh",width:"100vw"}),App=({viewMode,layout,panelCount,pages})=>{let{width,height,ref}=useResizeDetector(),content,props=(0,import_react49.useMemo)(()=>({Sidebar:sidebar_default,Preview:preview_default,Panel:panel_default2,Notifications:notifications_default}),[]);return!width||!height?content=import_react49.default.createElement("div",null):width<600?content=import_react49.default.createElement(Mobile,{...props,viewMode,options:layout,pages}):content=import_react49.default.createElement(Desktop,{...props,viewMode,options:layout,width,height,panelCount,pages}),import_react49.default.createElement(View,{ref},import_react49.default.createElement(Global,{styles:createGlobal}),import_react49.default.createElement(Symbols,{icons:["folder","component","document","bookmarkhollow"]}),content)};App.displayName="App";var app_default=App;var Provider=class{getElements(_type){throw new Error("Provider.getElements() is not implemented!")}handleAPI(_api){throw new Error("Provider.handleAPI() is not implemented!")}getConfig(){return console.error("Provider.getConfig() is not implemented!"),{}}};var import_react57=__toESM(require_react());var import_react51=__toESM(require_react());var import_react50=__toESM(require_react());var Header=newStyled.header(({theme})=>({marginBottom:32,fontSize:theme.typography.size.l2,color:theme.base==="light"?theme.color.darkest:theme.color.lightest,fontWeight:theme.typography.weight.bold,alignItems:"center",display:"flex","> svg":{height:48,width:"auto",marginRight:8}})),Container4=newStyled.div({display:"flex",alignItems:"center",justifyContent:"center",height:"calc(100% - 40px)",flexDirection:"column"}),UpgradeBlock=newStyled.div(({theme})=>({border:"1px solid",borderRadius:5,padding:20,margin:20,marginTop:0,maxWidth:400,borderColor:theme.appBorderColor,fontSize:theme.typography.size.s2})),Code3=newStyled.pre(({theme})=>({background:theme.base==="light"?"rgba(0, 0, 0, 0.05)":theme.appBorderColor,fontSize:theme.typography.size.s2-1,margin:"4px 0 16px"})),Footer=newStyled.div(({theme})=>({marginBottom:24,display:"flex",flexDirection:"column",alignItems:"center",color:theme.base==="light"?theme.color.dark:theme.color.lightest,fontWeight:theme.typography.weight.regular,fontSize:theme.typography.size.s2})),SquareButton=newStyled(Button)(({theme})=>({"&&":{borderRadius:4,fontSize:"13px",lineHeight:"14px",color:theme.base==="light"?theme.color.darker:theme.color.lightest,padding:"9px 12px",svg:{marginRight:6}}})),TabButton2=newStyled(Button)(({theme,active})=>({"&&":{padding:2,paddingRight:8,margin:0,color:active?theme.color.secondary:theme.base==="light"?theme.color.dark:theme.color.lightest}})),StyledLink=newStyled(Link22)(({theme})=>({"&&":{fontWeight:theme.typography.weight.bold,color:theme.base==="light"?theme.color.dark:theme.color.light},"&:hover":{color:theme.base==="light"?theme.color.darkest:theme.color.lightest}})),AboutScreen=({current,onNavigateToWhatsNew})=>{let[activeTab,setActiveTab]=(0,import_react50.useState)("npm");return import_react50.default.createElement(Container4,null,import_react50.default.createElement("div",{style:{flex:"1"}}),import_react50.default.createElement(Header,null,import_react50.default.createElement(StorybookIcon,null)," Storybook"),import_react50.default.createElement(UpgradeBlock,null,import_react50.default.createElement("strong",null,"You are on Storybook ",current.version),import_react50.default.createElement("p",null,"Run the following script to check for updates and upgrade to the latest version."),import_react50.default.createElement("div",null,import_react50.default.createElement(TabButton2,{active:activeTab==="npm",onClick:()=>setActiveTab("npm")},"npm"),import_react50.default.createElement(TabButton2,{active:activeTab==="pnpm",onClick:()=>setActiveTab("pnpm")},"pnpm")),import_react50.default.createElement(Code3,null,activeTab==="npm"?"npx storybook@latest upgrade":"pnpm dlx storybook@latest upgrade"),onNavigateToWhatsNew&&import_react50.default.createElement(Link22,{onClick:onNavigateToWhatsNew},"See what's new in Storybook")),import_react50.default.createElement("div",{style:{flex:"1.2"}}),import_react50.default.createElement(Footer,null,import_react50.default.createElement("div",{style:{marginBottom:12}},import_react50.default.createElement(SquareButton,{isLink:!0,outline:!0,small:!0,href:"https://github.com/storybookjs/storybook",style:{marginRight:12}},import_react50.default.createElement(Icons,{icon:"github",style:{display:"inline",marginRight:5}}),"GitHub"),import_react50.default.createElement(SquareButton,{isLink:!0,outline:!0,small:!0,href:"https://storybook.js.org/docs"},import_react50.default.createElement(Icons,{icon:"document",style:{display:"inline",marginRight:5}}),"Documentation")),import_react50.default.createElement("div",null,"Open source software maintained by"," ",import_react50.default.createElement(StyledLink,{href:"https://www.chromatic.com/"},"Chromatic")," and the"," ",import_react50.default.createElement(StyledLink,{href:"https://github.com/storybookjs/storybook/graphs/contributors"},"Storybook Community"))))};var NotificationClearer=class extends import_react51.Component{componentDidMount(){let{api,notificationId}=this.props;api.clearNotification(notificationId)}render(){let{children}=this.props;return children}},AboutPage=()=>{let api=useStorybookApi(),state=useStorybookState(),onNavigateToWhatsNew=(0,import_react51.useCallback)(()=>{api.changeSettingsTab("whats-new")},[api]);return import_react51.default.createElement(NotificationClearer,{api,notificationId:"update"},import_react51.default.createElement(AboutScreen,{current:api.getCurrentVersion(),onNavigateToWhatsNew:state.whatsNewData?.status==="SUCCESS"?onNavigateToWhatsNew:void 0}))};var import_react53=__toESM(require_react());var import_react52=__toESM(require_react());var Centered=newStyled.div({top:"50%",position:"absolute",transform:"translateY(-50%)",width:"100%",textAlign:"center"}),LoaderWrapper3=newStyled.div({position:"relative",height:"32px"}),Message4=newStyled.div(({theme})=>({paddingTop:"12px",color:theme.textMutedColor,maxWidth:"295px",margin:"0 auto",fontSize:`${theme.typography.size.s1}px`,lineHeight:"16px"})),Container5=newStyled.div(({theme})=>({position:"absolute",width:"100%",bottom:"40px",background:theme.background.bar,fontSize:"13px",borderTop:"1px solid",borderColor:theme.appBorderColor,padding:"8px 12px",display:"flex",alignItems:"center",justifyContent:"space-between"})),ToggleNotificationButton=newStyled(IconButton)(({theme})=>({fontWeight:theme.typography.weight.regular,color:theme.color.mediumdark,margin:0})),CopyButton=newStyled(Button)(({theme})=>({"&&":{fontSize:"13px",color:theme.color.defaultText,margin:0,padding:0,borderRadius:0}})),WhatsNewFooter=({isNotificationsEnabled,onToggleNotifications,onCopyLink})=>{let theme=useTheme(),[copyText,setCopyText]=(0,import_react52.useState)("Copy Link"),copyLink=()=>{onCopyLink(),setCopyText("Copied!"),setTimeout(()=>setCopyText("Copy Link"),4e3)};return import_react52.default.createElement(Container5,null,import_react52.default.createElement("div",{style:{display:"flex",alignItems:"center",gap:10}},import_react52.default.createElement(Icons,{icon:"heart",color:theme.color.mediumdark}),import_react52.default.createElement("div",null,"Share this with your team."),import_react52.default.createElement(CopyButton,{onClick:copyLink,small:!0},copyText)),import_react52.default.createElement(ToggleNotificationButton,{onClick:onToggleNotifications},isNotificationsEnabled?import_react52.default.createElement(import_react52.default.Fragment,null,import_react52.default.createElement(Icons,{icon:"eyeclose"}),"\xA0Hide notifications"):import_react52.default.createElement(import_react52.default.Fragment,null,import_react52.default.createElement(Icons,{icon:"eye"}),"\xA0Show notifications")))},Iframe=newStyled.iframe({position:"absolute",top:0,left:0,right:0,bottom:0,border:0,margin:0,padding:0,width:"100%",height:"calc(100% - 80px)",background:"white"},({isLoaded})=>({visibility:isLoaded?"visible":"hidden"})),AlertIcon=newStyled(props=>import_react52.default.createElement(Icons,{icon:"alert",...props}))(({theme})=>({color:theme.textMutedColor,width:32,height:32,margin:"0 auto"})),WhatsNewLoader=()=>import_react52.default.createElement(Centered,null,import_react52.default.createElement(LoaderWrapper3,null,import_react52.default.createElement(Loader,null)),import_react52.default.createElement(Message4,null,"Loading...")),MaxWaitTimeMessaging=()=>import_react52.default.createElement(Centered,null,import_react52.default.createElement(AlertIcon,null),import_react52.default.createElement(Message4,null,"The page couldn't be loaded. Check your internet connection and try again.")),PureWhatsNewScreen=({didHitMaxWaitTime,isLoaded,onLoad,url,onCopyLink,onToggleNotifications,isNotificationsEnabled})=>import_react52.default.createElement(import_react52.Fragment,null,!isLoaded&&!didHitMaxWaitTime&&import_react52.default.createElement(WhatsNewLoader,null),didHitMaxWaitTime?import_react52.default.createElement(MaxWaitTimeMessaging,null):import_react52.default.createElement(import_react52.default.Fragment,null,import_react52.default.createElement(Iframe,{isLoaded,onLoad,src:url,title:"What's new?"}),import_react52.default.createElement(WhatsNewFooter,{isNotificationsEnabled,onToggleNotifications,onCopyLink}))),MAX_WAIT_TIME=1e4,WhatsNewScreen=()=>{let api=useStorybookApi(),state=useStorybookState(),{whatsNewData}=state,[isLoaded,setLoaded]=(0,import_react52.useState)(!1),[didHitMaxWaitTime,setDidHitMaxWaitTime]=(0,import_react52.useState)(!1);if((0,import_react52.useEffect)(()=>{let timer=setTimeout(()=>!isLoaded&&setDidHitMaxWaitTime(!0),MAX_WAIT_TIME);return()=>clearTimeout(timer)},[isLoaded]),whatsNewData?.status!=="SUCCESS")return null;let isNotificationsEnabled=!whatsNewData.disableWhatsNewNotifications;return import_react52.default.createElement(PureWhatsNewScreen,{didHitMaxWaitTime,isLoaded,onLoad:()=>{api.whatsNewHasBeenRead(),setLoaded(!0)},url:whatsNewData.url,isNotificationsEnabled,onCopyLink:()=>{navigator.clipboard?.writeText(whatsNewData.blogUrl??whatsNewData.url)},onToggleNotifications:()=>{isNotificationsEnabled?scope.confirm("All update notifications will no longer be shown. Are you sure?")&&api.toggleWhatsNewNotifications():api.toggleWhatsNewNotifications()}})};var WhatsNewPage=()=>import_react53.default.createElement(WhatsNewScreen,null);var import_react56=__toESM(require_react());var import_react55=__toESM(require_react());var import_react54=__toESM(require_react());var Footer2=newStyled.div(({theme})=>({display:"flex",paddingTop:20,marginTop:20,borderTop:`1px solid ${theme.appBorderColor}`,fontWeight:theme.typography.weight.bold,"& > * + *":{marginLeft:20}})),SettingsFooter=props=>import_react54.default.createElement(Footer2,{...props},import_react54.default.createElement(Link22,{secondary:!0,href:"https://storybook.js.org",cancel:!1,target:"_blank"},"Docs"),import_react54.default.createElement(Link22,{secondary:!0,href:"https://github.com/storybookjs/storybook",cancel:!1,target:"_blank"},"GitHub"),import_react54.default.createElement(Link22,{secondary:!0,href:"https://storybook.js.org/community#support",cancel:!1,target:"_blank"},"Support")),SettingsFooter_default=SettingsFooter;var Header2=newStyled.header(({theme})=>({marginBottom:20,fontSize:theme.typography.size.m3,fontWeight:theme.typography.weight.bold,alignItems:"center",display:"flex"})),HeaderItem=newStyled.div(({theme})=>({fontWeight:theme.typography.weight.bold})),GridHeaderRow=newStyled.div({alignSelf:"flex-end",display:"grid",margin:"10px 0",gridTemplateColumns:"1fr 1fr 12px","& > *:last-of-type":{gridColumn:"2 / 2",justifySelf:"flex-end",gridRow:"1"}}),Row=newStyled.div(({theme})=>({padding:"6px 0",borderTop:`1px solid ${theme.appBorderColor}`,display:"grid",gridTemplateColumns:"1fr 1fr 0px"})),GridWrapper=newStyled.div({display:"grid",gridTemplateColumns:"1fr",gridAutoRows:"minmax(auto, auto)",marginBottom:20}),Description=newStyled.div({alignSelf:"center"}),TextInput=newStyled(Form.Input)(({valid,theme})=>valid==="error"?{animation:`${theme.animation.jiggle} 700ms ease-out`}:{},{display:"flex",width:80,flexDirection:"column",justifySelf:"flex-end",paddingLeft:4,paddingRight:4,textAlign:"center"}),Fade=keyframes`
|
|
404
404
|
0%,100% { opacity: 0; }
|
|
405
405
|
50% { opacity: 1; }
|
|
406
406
|
`,SuccessIcon=newStyled(Icons)(({valid,theme})=>valid==="valid"?{color:theme.color.positive,animation:`${Fade} 2s ease forwards`}:{opacity:0},{alignSelf:"center",display:"flex",marginLeft:10,height:14,width:14}),Container6=newStyled.div(({theme})=>({fontSize:theme.typography.size.s2,padding:"3rem 20px",maxWidth:600,margin:"0 auto"})),shortcutLabels={fullScreen:"Go full screen",togglePanel:"Toggle addons",panelPosition:"Toggle addons orientation",toggleNav:"Toggle sidebar",toolbar:"Toggle canvas toolbar",search:"Focus search",focusNav:"Focus sidebar",focusIframe:"Focus canvas",focusPanel:"Focus addons",prevComponent:"Previous component",nextComponent:"Next component",prevStory:"Previous story",nextStory:"Next story",shortcutsPage:"Go to shortcuts page",aboutPage:"Go to about page",collapseAll:"Collapse all items on sidebar",expandAll:"Expand all items on sidebar",remount:"Remount component"},fixedShortcuts=["escape"];function toShortcutState(shortcutKeys){return Object.entries(shortcutKeys).reduce((acc,[feature,shortcut])=>fixedShortcuts.includes(feature)?acc:{...acc,[feature]:{shortcut,error:!1}},{})}var ShortcutsScreen=class extends import_react55.Component{constructor(props){super(props);this.onKeyDown=e3=>{let{activeFeature,shortcutKeys}=this.state;if(e3.key==="Backspace")return this.restoreDefault();let shortcut=eventToShortcut(e3);if(!shortcut)return!1;let error=!!Object.entries(shortcutKeys).find(([feature,{shortcut:existingShortcut}])=>feature!==activeFeature&&existingShortcut&&shortcutMatchesShortcut(shortcut,existingShortcut));return this.setState({shortcutKeys:{...shortcutKeys,[activeFeature]:{shortcut,error}}})};this.onFocus=focusedInput=>()=>{let{shortcutKeys}=this.state;this.setState({activeFeature:focusedInput,shortcutKeys:{...shortcutKeys,[focusedInput]:{shortcut:null,error:!1}}})};this.onBlur=async()=>{let{shortcutKeys,activeFeature}=this.state;if(shortcutKeys[activeFeature]){let{shortcut,error}=shortcutKeys[activeFeature];return!shortcut||error?this.restoreDefault():this.saveShortcut()}return!1};this.saveShortcut=async()=>{let{activeFeature,shortcutKeys}=this.state,{setShortcut}=this.props;await setShortcut(activeFeature,shortcutKeys[activeFeature].shortcut),this.setState({successField:activeFeature})};this.restoreDefaults=async()=>{let{restoreAllDefaultShortcuts}=this.props,defaultShortcuts2=await restoreAllDefaultShortcuts();return this.setState({shortcutKeys:toShortcutState(defaultShortcuts2)})};this.restoreDefault=async()=>{let{activeFeature,shortcutKeys}=this.state,{restoreDefaultShortcut}=this.props,defaultShortcut=await restoreDefaultShortcut(activeFeature);return this.setState({shortcutKeys:{...shortcutKeys,...toShortcutState({[activeFeature]:defaultShortcut})}})};this.displaySuccessMessage=activeElement=>{let{successField,shortcutKeys}=this.state;return activeElement===successField&&shortcutKeys[activeElement].error===!1?"valid":void 0};this.displayError=activeElement=>{let{activeFeature,shortcutKeys}=this.state;return activeElement===activeFeature&&shortcutKeys[activeElement].error===!0?"error":void 0};this.renderKeyInput=()=>{let{shortcutKeys,addonsShortcutLabels}=this.state;return Object.entries(shortcutKeys).map(([feature,{shortcut}])=>import_react55.default.createElement(Row,{key:feature},import_react55.default.createElement(Description,null,shortcutLabels[feature]||addonsShortcutLabels[feature]),import_react55.default.createElement(TextInput,{spellCheck:"false",valid:this.displayError(feature),className:"modalInput",onBlur:this.onBlur,onFocus:this.onFocus(feature),onKeyDown:this.onKeyDown,value:shortcut?shortcutToHumanString(shortcut):"",placeholder:"Type keys",readOnly:!0}),import_react55.default.createElement(SuccessIcon,{valid:this.displaySuccessMessage(feature),icon:"check"})))};this.renderKeyForm=()=>import_react55.default.createElement(GridWrapper,null,import_react55.default.createElement(GridHeaderRow,null,import_react55.default.createElement(HeaderItem,null,"Commands"),import_react55.default.createElement(HeaderItem,null,"Shortcut")),this.renderKeyInput());this.state={activeFeature:void 0,successField:void 0,shortcutKeys:toShortcutState(props.shortcutKeys),addonsShortcutLabels:props.addonsShortcutLabels}}render(){let layout=this.renderKeyForm();return import_react55.default.createElement(Container6,null,import_react55.default.createElement(Header2,null,"Keyboard shortcuts"),layout,import_react55.default.createElement(Form.Button,{tertiary:!0,small:!0,id:"restoreDefaultsHotkeys",onClick:this.restoreDefaults},"Restore defaults"),import_react55.default.createElement(SettingsFooter_default,null))}};var ShortcutsPage=()=>import_react56.default.createElement(ManagerConsumer,null,({api:{getShortcutKeys,getAddonsShortcutLabels,setShortcut,restoreDefaultShortcut,restoreAllDefaultShortcuts}})=>import_react56.default.createElement(ShortcutsScreen,{shortcutKeys:getShortcutKeys(),addonsShortcutLabels:getAddonsShortcutLabels(),setShortcut,restoreDefaultShortcut,restoreAllDefaultShortcuts}));var{document:document11}=scope,TabBarButton=import_react57.default.memo(function({changeTab,id,title}){return import_react57.default.createElement(Location,null,({path})=>{let active=path.includes(`settings/${id}`);return import_react57.default.createElement(TabButton,{id:`tabbutton-${id}`,className:["tabbutton"].concat(active?["tabbutton-active"]:[]).join(" "),type:"button",key:"id",active,onClick:()=>changeTab(id),role:"tab"},title)})}),Content2=newStyled(ScrollArea)({position:"absolute",top:40,left:0,right:0,bottom:0,overflow:"auto"},({theme})=>({background:theme.background.content})),Pages=({changeTab,onClose,enableShortcuts=!0,enableWhatsNew})=>(import_react57.default.useEffect(()=>{let handleEscape=event=>{!enableShortcuts||event.repeat||matchesModifiers(!1,event)&&matchesKeyCode("Escape",event)&&(event.preventDefault(),onClose())};return document11.addEventListener("keydown",handleEscape),()=>document11.removeEventListener("keydown",handleEscape)},[enableShortcuts,onClose]),import_react57.default.createElement(import_react57.Fragment,null,import_react57.default.createElement(FlexBar,{border:!0},import_react57.default.createElement(TabBar,{role:"tablist"},import_react57.default.createElement(TabBarButton,{id:"about",title:"About",changeTab}),enableWhatsNew&&import_react57.default.createElement(TabBarButton,{id:"whats-new",title:"What's new?",changeTab}),import_react57.default.createElement(TabBarButton,{id:"shortcuts",title:"Keyboard shortcuts",changeTab})),import_react57.default.createElement(IconButton,{onClick:e3=>(e3.preventDefault(),onClose()),title:"Close settings page"},import_react57.default.createElement(Icons,{icon:"close"}))),import_react57.default.createElement(Content2,{vertical:!0,horizontal:!1},import_react57.default.createElement(Route2,{path:"about"},import_react57.default.createElement(AboutPage,{key:"about"})),import_react57.default.createElement(Route2,{path:"whats-new"},import_react57.default.createElement(WhatsNewPage,{key:"whats-new"})),import_react57.default.createElement(Route2,{path:"shortcuts"},import_react57.default.createElement(ShortcutsPage,{key:"shortcuts"}))))),SettingsPages=()=>{let api=useStorybookApi(),state=useStorybookState(),changeTab=tab=>api.changeSettingsTab(tab);return import_react57.default.createElement(Pages,{enableWhatsNew:state.whatsNewData?.status==="SUCCESS",enableShortcuts:state.ui.enableShortcuts,changeTab,onClose:api.closeSettings})},settingsPageAddon={id:"settings",url:"/settings/",title:"Settings",type:Addon_TypesEnum.experimental_PAGE,render:()=>import_react57.default.createElement(Route2,{path:"/settings/",startsWith:!0},import_react57.default.createElement(SettingsPages,null))};ThemeProvider.displayName="ThemeProvider";q.displayName="HelmetProvider";var Root4=({provider})=>import_react58.default.createElement(q,{key:"helmet.Provider"},import_react58.default.createElement(LocationProvider,{key:"location.provider"},import_react58.default.createElement(Main2,{provider}))),Main2=({provider})=>{let navigate=useNavigate2();return import_react58.default.createElement(Location,{key:"location.consumer"},locationData=>import_react58.default.createElement(ManagerProvider,{key:"manager",provider,...locationData,navigate,docsOptions:scope?.DOCS_OPTIONS||{}},({state,api})=>{let panelCount=Object.keys(api.getElements(Addon_TypesEnum.PANEL)).length,pages=(0,import_react58.useMemo)(()=>[settingsPageAddon,...Object.values(api.getElements(Addon_TypesEnum.experimental_PAGE))],[Object.keys(api.getElements(Addon_TypesEnum.experimental_PAGE)).join()]),isLoading=api.getData(state.storyId,state.refId)?!!state.refs[state.refId]&&!state.refs[state.refId].previewInitialized:!state.previewInitialized,layout=(0,import_react58.useMemo)(()=>isLoading?{...state.layout,showPanel:!1}:state.layout,[isLoading,state.layout]);return import_react58.default.createElement(ThemeProvider,{key:"theme.provider",theme:ensure(state.theme)},import_react58.default.createElement(app_default,{key:"app",viewMode:state.viewMode,layout,panelCount,pages}))}))};function renderStorybookUI(domNode,provider){if(!(provider instanceof Provider))throw new ProviderDoesNotExtendBaseProviderError;import_react_dom2.default.render(import_react58.default.createElement(Root4,{key:"root",provider}),domNode)}export{dist_exports,CHANNEL_CREATED,TELEMETRY_ERROR,dist_exports2,Addon_TypesEnum,createBrowserChannel,dist_exports3,mockChannel,addons,dist_exports4,UncaughtManagerError,dist_exports5,Provider,Root4 as Root,renderStorybookUI};
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{Provider,Root,renderStorybookUI}from"./chunk-
|
|
1
|
+
import{Provider,Root,renderStorybookUI}from"./chunk-FZFE7BEW.js";import"./chunk-KB7OUSC6.js";import"./chunk-LOSSKFNH.js";import"./chunk-OXMP66RC.js";import"./chunk-ZEU7PDD3.js";export{Provider,Root,renderStorybookUI};
|
package/dist/runtime.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{Addon_TypesEnum,CHANNEL_CREATED,Provider,TELEMETRY_ERROR,UncaughtManagerError,addons,createBrowserChannel,dist_exports as dist_exports2,dist_exports2 as dist_exports3,dist_exports3 as dist_exports4,dist_exports4 as dist_exports5,dist_exports5 as dist_exports7,mockChannel,renderStorybookUI}from"./chunk-
|
|
1
|
+
import{Addon_TypesEnum,CHANNEL_CREATED,Provider,TELEMETRY_ERROR,UncaughtManagerError,addons,createBrowserChannel,dist_exports as dist_exports2,dist_exports2 as dist_exports3,dist_exports3 as dist_exports4,dist_exports4 as dist_exports5,dist_exports5 as dist_exports7,mockChannel,renderStorybookUI}from"./chunk-FZFE7BEW.js";import"./chunk-KB7OUSC6.js";import"./chunk-LOSSKFNH.js";import{dist_exports,dist_exports2 as dist_exports6,require_react,require_react_dom,scope}from"./chunk-OXMP66RC.js";import{__commonJS,__toESM}from"./chunk-ZEU7PDD3.js";var require_browser_dtector_umd_min=__commonJS({"../../node_modules/browser-dtector/browser-dtector.umd.min.js"(exports,module){(function(e,o){typeof exports=="object"&&typeof module<"u"?module.exports=o():typeof define=="function"&&define.amd?define(o):(e=typeof globalThis<"u"?globalThis:e||self).BrowserDetector=o()})(exports,function(){"use strict";function e(e2,o2){for(var r2=0;r2<o2.length;r2++){var n2=o2[r2];n2.enumerable=n2.enumerable||!1,n2.configurable=!0,"value"in n2&&(n2.writable=!0),Object.defineProperty(e2,(i2=n2.key,t2=void 0,typeof(t2=function(e3,o3){if(typeof e3!="object"||e3===null)return e3;var r3=e3[Symbol.toPrimitive];if(r3!==void 0){var n3=r3.call(e3,o3||"default");if(typeof n3!="object")return n3;throw new TypeError("@@toPrimitive must return a primitive value.")}return(o3==="string"?String:Number)(e3)}(i2,"string"))=="symbol"?t2:String(t2)),n2)}var i2,t2}var o={chrome:"Google Chrome",brave:"Brave",crios:"Google Chrome",edge:"Microsoft Edge",edg:"Microsoft Edge",edgios:"Microsoft Edge",fennec:"Mozilla Firefox",jsdom:"JsDOM",mozilla:"Mozilla Firefox",fxios:"Mozilla Firefox",msie:"Microsoft Internet Explorer",opera:"Opera",opios:"Opera",opr:"Opera",opt:"Opera",rv:"Microsoft Internet Explorer",safari:"Safari",samsungbrowser:"Samsung Browser",electron:"Electron"},r={android:"Android",androidTablet:"Android Tablet",cros:"Chrome OS",fennec:"Android Tablet",ipad:"IPad",iphone:"IPhone",jsdom:"JsDOM",linux:"Linux",mac:"Macintosh",tablet:"Android Tablet",win:"Windows","windows phone":"Windows Phone",xbox:"Microsoft Xbox"},n=function(e2){var o2=new RegExp("^-?\\d+(?:.\\d{0,".concat(arguments.length>1&&arguments[1]!==void 0?arguments[1]:-1,"})?")),r2=Number(e2).toString().match(o2);return r2?r2[0]:null},i=function(){return typeof window<"u"?window.navigator:null},t=function(){function t2(e2){var o2;(function(e3,o3){if(!(e3 instanceof o3))throw new TypeError("Cannot call a class as a function")})(this,t2),this.userAgent=e2||((o2=i())===null||o2===void 0?void 0:o2.userAgent)||null}var a,l,s;return a=t2,l=[{key:"parseUserAgent",value:function(e2){var t3,a2,l2,s2={},c=e2||this.userAgent||"",d=c.toLowerCase().replace(/\s\s+/g," "),u=/(edge)\/([\w.]+)/.exec(d)||/(edg)[/]([\w.]+)/.exec(d)||/(opr)[/]([\w.]+)/.exec(d)||/(opt)[/]([\w.]+)/.exec(d)||/(fxios)[/]([\w.]+)/.exec(d)||/(edgios)[/]([\w.]+)/.exec(d)||/(jsdom)[/]([\w.]+)/.exec(d)||/(samsungbrowser)[/]([\w.]+)/.exec(d)||/(electron)[/]([\w.]+)/.exec(d)||/(chrome)[/]([\w.]+)/.exec(d)||/(crios)[/]([\w.]+)/.exec(d)||/(opios)[/]([\w.]+)/.exec(d)||/(version)(applewebkit)[/]([\w.]+).*(safari)[/]([\w.]+)/.exec(d)||/(webkit)[/]([\w.]+).*(version)[/]([\w.]+).*(safari)[/]([\w.]+)/.exec(d)||/(applewebkit)[/]([\w.]+).*(safari)[/]([\w.]+)/.exec(d)||/(webkit)[/]([\w.]+)/.exec(d)||/(opera)(?:.*version|)[/]([\w.]+)/.exec(d)||/(msie) ([\w.]+)/.exec(d)||/(fennec)[/]([\w.]+)/.exec(d)||d.indexOf("trident")>=0&&/(rv)(?::| )([\w.]+)/.exec(d)||d.indexOf("compatible")<0&&/(mozilla)(?:.*? rv:([\w.]+)|)/.exec(d)||[],f=/(ipad)/.exec(d)||/(ipod)/.exec(d)||/(iphone)/.exec(d)||/(jsdom)/.exec(d)||/(windows phone)/.exec(d)||/(xbox)/.exec(d)||/(win)/.exec(d)||/(tablet)/.exec(d)||/(android)/.test(d)&&/(mobile)/.test(d)===!1&&["androidTablet"]||/(android)/.exec(d)||/(mac)/.exec(d)||/(linux)/.exec(d)||/(cros)/.exec(d)||[],p=u[5]||u[3]||u[1]||null,w=f[0]||null,x=u[4]||u[2]||null,b=i();p==="chrome"&&typeof(b==null||(t3=b.brave)===null||t3===void 0?void 0:t3.isBrave)=="function"&&(p="brave"),p&&(s2[p]=!0),w&&(s2[w]=!0);var v=!!(s2.tablet||s2.android||s2.androidTablet),m=!!(s2.ipad||s2.tablet||s2.androidTablet),g=!!(s2.android||s2.androidTablet||s2.tablet||s2.ipad||s2.ipod||s2.iphone||s2["windows phone"]),h=!!(s2.cros||s2.mac||s2.linux||s2.win),y=!!(s2.brave||s2.chrome||s2.crios||s2.opr||s2.safari||s2.edg||s2.electron),A=!!(s2.msie||s2.rv);return{name:(a2=o[p])!==null&&a2!==void 0?a2:null,platform:(l2=r[w])!==null&&l2!==void 0?l2:null,userAgent:c,version:x,shortVersion:x?n(parseFloat(x),2):null,isAndroid:v,isTablet:m,isMobile:g,isDesktop:h,isWebkit:y,isIE:A}}},{key:"getBrowserInfo",value:function(){var e2=this.parseUserAgent();return{name:e2.name,platform:e2.platform,userAgent:e2.userAgent,version:e2.version,shortVersion:e2.shortVersion}}}],s=[{key:"VERSION",get:function(){return"3.4.0"}}],l&&e(a.prototype,l),s&&e(a,s),Object.defineProperty(a,"prototype",{writable:!1}),t2}();return t})}});var REACT=__toESM(require_react()),REACTDOM=__toESM(require_react_dom());var values={react:REACT,"react-dom":REACTDOM,"@storybook/components":dist_exports7,"@storybook/channels":dist_exports4,"@storybook/core-events":dist_exports3,"@storybook/router":dist_exports2,"@storybook/theming":dist_exports6,"@storybook/api":dist_exports5,"@storybook/manager-api":dist_exports5,"@storybook/addons":{addons,types:Addon_TypesEnum,mockChannel},"@storybook/client-logger":dist_exports};var Keys=(Keys2=>(Keys2.react="__REACT__",Keys2["react-dom"]="__REACTDOM__",Keys2["@storybook/components"]="__STORYBOOKCOMPONENTS__",Keys2["@storybook/channels"]="__STORYBOOKCHANNELS__",Keys2["@storybook/core-events"]="__STORYBOOKCOREEVENTS__",Keys2["@storybook/router"]="__STORYBOOKROUTER__",Keys2["@storybook/theming"]="__STORYBOOKTHEMING__",Keys2["@storybook/api"]="__STORYBOOKAPI__",Keys2["@storybook/manager-api"]="__STORYBOOKAPI__",Keys2["@storybook/addons"]="__STORYBOOKADDONS__",Keys2["@storybook/client-logger"]="__STORYBOOKCLIENTLOGGER__",Keys2))(Keys||{});var import_browser_dtector=__toESM(require_browser_dtector_umd_min()),browserInfo;function getBrowserInfo(){return browserInfo||(browserInfo=new import_browser_dtector.default(scope.navigator?.userAgent).getBrowserInfo()),browserInfo}var errorMessages=["ResizeObserver loop completed with undelivered notifications.","ResizeObserver loop limit exceeded","Script error."],shouldSkipError=error=>errorMessages.includes(error?.message);function prepareForTelemetry(originalError){let error=originalError;return(originalError.target===scope||originalError.currentTarget===scope||originalError.srcElement===scope)&&(error=new Error(originalError.message),error.name=originalError.name||error.name),originalError.fromStorybook||(error=new UncaughtManagerError({error})),error.browserInfo=getBrowserInfo(),error}var{FEATURES,CONFIG_TYPE}=scope,ReactProvider=class extends Provider{constructor(){super();let channel=createBrowserChannel({page:"manager"});addons.setChannel(channel),channel.emit(CHANNEL_CREATED),this.addons=addons,this.channel=channel,scope.__STORYBOOK_ADDONS_CHANNEL__=channel,FEATURES?.storyStoreV7&&CONFIG_TYPE==="DEVELOPMENT"&&(this.serverChannel=this.channel,addons.setServerChannel(this.serverChannel))}getElements(type){return this.addons.getElements(type)}getConfig(){return this.addons.getConfig()}handleAPI(api){this.addons.loadAddons(api)}};Object.keys(Keys).forEach(key=>{scope[Keys[key]]=values[key]});scope.sendTelemetryError=error=>{shouldSkipError(error)||scope.__STORYBOOK_ADDONS_CHANNEL__.emit(TELEMETRY_ERROR,prepareForTelemetry(error))};scope.addEventListener("error",args=>{let error=args.error||args;scope.sendTelemetryError(error)});scope.addEventListener("unhandledrejection",({reason})=>{scope.sendTelemetryError(reason)});var{document}=scope,rootEl=document.getElementById("root");renderStorybookUI(rootEl,new ReactProvider);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@storybook/manager",
|
|
3
|
-
"version": "0.0.0-pr-24575-sha-
|
|
3
|
+
"version": "0.0.0-pr-24575-sha-94eee1ff",
|
|
4
4
|
"description": "Core Storybook UI",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"storybook"
|
|
@@ -53,16 +53,16 @@
|
|
|
53
53
|
"devDependencies": {
|
|
54
54
|
"@fal-works/esbuild-plugin-global-externals": "^2.1.2",
|
|
55
55
|
"@storybook/addon-designs": "^7.0.4",
|
|
56
|
-
"@storybook/addons": "0.0.0-pr-24575-sha-
|
|
57
|
-
"@storybook/channels": "0.0.0-pr-24575-sha-
|
|
58
|
-
"@storybook/client-logger": "0.0.0-pr-24575-sha-
|
|
59
|
-
"@storybook/components": "0.0.0-pr-24575-sha-
|
|
60
|
-
"@storybook/core-events": "0.0.0-pr-24575-sha-
|
|
56
|
+
"@storybook/addons": "0.0.0-pr-24575-sha-94eee1ff",
|
|
57
|
+
"@storybook/channels": "0.0.0-pr-24575-sha-94eee1ff",
|
|
58
|
+
"@storybook/client-logger": "0.0.0-pr-24575-sha-94eee1ff",
|
|
59
|
+
"@storybook/components": "0.0.0-pr-24575-sha-94eee1ff",
|
|
60
|
+
"@storybook/core-events": "0.0.0-pr-24575-sha-94eee1ff",
|
|
61
61
|
"@storybook/global": "^5.0.0",
|
|
62
|
-
"@storybook/manager-api": "0.0.0-pr-24575-sha-
|
|
63
|
-
"@storybook/router": "0.0.0-pr-24575-sha-
|
|
64
|
-
"@storybook/theming": "0.0.0-pr-24575-sha-
|
|
65
|
-
"@storybook/types": "0.0.0-pr-24575-sha-
|
|
62
|
+
"@storybook/manager-api": "0.0.0-pr-24575-sha-94eee1ff",
|
|
63
|
+
"@storybook/router": "0.0.0-pr-24575-sha-94eee1ff",
|
|
64
|
+
"@storybook/theming": "0.0.0-pr-24575-sha-94eee1ff",
|
|
65
|
+
"@storybook/types": "0.0.0-pr-24575-sha-94eee1ff",
|
|
66
66
|
"@testing-library/react": "^11.2.2",
|
|
67
67
|
"@types/semver": "^7.3.4",
|
|
68
68
|
"browser-dtector": "^3.4.0",
|