storybook-addon-playwright 7.8.7 → 7.8.8

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.
Files changed (5) hide show
  1. package/dist/register.js +1 -1
  2. package/dist/register.js.map +1 -1
  3. package/dist/register.mjs +1 -1
  4. package/dist/register.mjs.map +1 -1
  5. package/package.json +1 -1
package/dist/register.js CHANGED
@@ -13,7 +13,7 @@ Required: ${d.required.join(",")}`}).filter(Boolean).join(`
13
13
  Title: ${z}`:""}${o?`
14
14
  Browser: ${o}`:""}`;v.success(H,{duration:5e3,id:`image-diff-message:pass:${H}`,onAutoClose:m,onDismiss:m});}else if(M.diffSize||M.error){let H=Tt(M);v.error(H,{duration:1/0,id:`image-diff-message:error:${H}`,onDismiss:m});}}}),S=I.useCallback(()=>{u(void 0);},[]),b=I.useCallback(()=>{m();},[m]),x=I.useCallback(M=>a?a.screenshotData.browserType===M:false,[a]),O=I.useCallback(()=>a&&a.screenshotData.title,[a]),w=I.useCallback(async(M,N,z,H)=>{if(!s)return new Error("Unable to find story data");if(!z)return new Error("Unable to find screenshot image data");let Se=H?{...H}:void 0,ee={actionSets:c,args:r,base64:z,browserOptions:Se,browserType:M,filePath:s.filePath,globals:n,id:nanoid.nanoid(12),props:r,screenshotOptions:i&&Object.keys(i).length?i:void 0,storyId:s.id,title:N};a&&x(M)&&(ee.updateScreenshot=a.screenshotData);let ye;S();try{ye=await f(ee);}catch{return new Error("Unexpected error occurred")}if(a&&x(M)&&(ye.added&&mc(a.screenshotData.id),l()),ye.added){ee.index=ye.index;let{base64:Ae,...W}=ee;dc(W);}return ye},[c,r,n,i,s,x,a,f,l,S]),C=I.useCallback(()=>{b();},[b]);return {clearError:S,error:p,getUpdatingScreenshotTitle:O,inProgress:h,isUpdating:x,onSuccessClose:C,result:d,saveScreenShot:w}}function Jc(e,t){let o=Kt(),r=Jr(),n=managerApi.useStorybookState(),{screenshotOptions:i}=q(),{currentActions:s}=ze(n.storyId),a=I.useRef(),[l,c]=I.useState(),{mutate:p,isPending:u,data:f}=T.screenshot.takeScreenshot.useMutation({onError:S=>{let b=S.message||"Unexpected error occurred";c(b),v.error(b);}}),[d,m]=I.useState(0);I.useEffect(()=>{let S=managerApi.addons.getChannel(),b=()=>m(x=>x+1);return S.on(coreEvents.STORY_RENDERED,b),()=>{S.off(coreEvents.STORY_RENDERED,b);}},[]);let h=I.useCallback(()=>{e!=="storybook"&&(c(void 0),p({actionSets:s,args:o,browserOptions:t,browserType:e,globals:r,props:o,requestId:nanoid.nanoid(),screenshotOptions:i,storyId:n.storyId}));},[e,s,o,t,r,p,i,n.storyId]);return I.useEffect(()=>{if(u||d===0)return;let S=W0__default.default({args:o,browserOptions:t,currentActions:s,globals:r,id:n.storyId,screenshotOptions:i});a.current!==S&&(a.current=S,h());},[s,h,o,t,r,n.storyId,i,u,d]),{error:l,getSnapshot:h,loading:u,screenshot:f}}function Qc(){let{mutateAsync:e,isPending:t}=T.screenshot.changeScreenshotIndex.useMutation(),o=A(),r=I.useCallback(async n=>{if(o){Bi({newIndex:n.newIndex,oldIndex:n.oldIndex});try{await e({filePath:o.filePath,newIndex:n.newIndex,oldIndex:n.oldIndex,storyId:o.id});}catch{Bi({newIndex:n.oldIndex,oldIndex:n.newIndex});}}},[e,o]);return {ChangeIndexInProgress:t,changeIndex:r}}var Gi=e=>{let{storyData:t,screenShotData:o,onClose:r,open:n=true,...i}=e,{testScreenshot:s,inProgress:a,result:l}=Vt();return I.useEffect(()=>{s({...t,screenshotId:o.id});},[t,o.id,s]),I__namespace.default.createElement(I__namespace.default.Fragment,null,l?.filePath&&I__namespace.default.createElement(ut,{title:o.title,imageDiffResult:l,open:n,onClose:r,titleActions:()=>I__namespace.default.createElement(Ie,{color:"primary",size:"medium",screenshotData:o}),...i}),I__namespace.default.createElement(E,{open:a}))};Gi.displayName="ScreenshotPreviewDialog";var tg=D(J0__default.default),og=D(Q0__default.default),rg=y(()=>({indicatorIcon:{height:16,position:"absolute",right:-1,top:0,zIndex:1},visible:{display:"block"}}),{name:"ScreenshotListItemMenu"});function To({pauseDeleteImageDiffResult:e,showPreviewOnClick:t,screenshot:o,sortableId:r,imageDiffResult:n,selected:i,onClick:s,draggable:a,forceShowMenu:l,showImageDiffResultDialog:c,storyData:p,...u}){let{attributes:f,listeners:d,setActivatorNodeRef:m,setNodeRef:h,transform:S,transition:b,isDragging:x}=sortable.useSortable({disabled:!a,id:r??o.id}),O=rg(),[w,C]=I.useState(false),[M,N]=I.useState(false),z=I.useRef(0),{dragStart:H}=Gr(),[Se,ee]=I.useState(false),{inProgress:ye,testScreenshot:Ae}=Vt(),W=n&&n.pass,le=I.useCallback(()=>{N(false),!e&&W&&n?.screenshotId?Wr(n.screenshotId):window.clearTimeout(z.current);},[e,W,n]);I.useEffect(()=>(!e&&n&&n.pass&&(z.current=window.setTimeout(()=>{le();},1e4)),()=>{window.clearTimeout(z.current);}),[e,le,n]);let Oe=I.useCallback(()=>{N(true);},[]),Mn=I.useCallback(()=>{C(true);},[]),Ko=I.useCallback(()=>{C(false);},[]),Wo=I.useCallback(async()=>{await Ae({...p,screenshotId:o.id}),N(true);},[o.id,p,Ae]),Zt=I.useCallback(()=>{s&&s(o),t&&ee(!Se);},[s,o,Se,t]),{editScreenshot:Go,loadSetting:Uo,editScreenshotState:St,clearScreenshotEdit:jo}=Ve(),$o=I.useCallback(()=>Go(o),[Go,o]),qo=I.useCallback(()=>{Uo(o);},[Uo,o]);return I__namespace.default.createElement("div",{ref:h,style:{opacity:x?.8:1,transform:utilities.CSS.Transform.toString(S),transition:b}},I__namespace.default.createElement(Wi,{onClick:Zt,title:o.title,draggable:a,selected:i||St&&St.screenshotData.id===o.id,tooltip:o.title+(p&&` - ${p.id}`),onMouseEnter:Mn,onMouseLeave:Ko,dragHandleProps:a?{...f,...d,setNodeRef:m}:void 0,style:{cursor:"pointer"}},I__namespace.default.createElement(I__namespace.default.Fragment,null,I__namespace.default.createElement(E,{progressSize:20,position:"absolute",open:ye}),W&&I__namespace.default.createElement(tg,{color:"primary",onClick:le,className:O.indicatorIcon}),n&&!n.pass&&I__namespace.default.createElement(og,{color:"secondary",onClick:Oe,className:O.indicatorIcon}),I__namespace.default.createElement(Ao,{style:{height:16},browserType:o.browserType}),M&&c&&n&&I__namespace.default.createElement(Zc,{result:n,onClose:le,title:o.title,titleActions:()=>I__namespace.default.createElement(Ie,{color:"primary",size:"medium",screenshotData:o})}),I__namespace.default.createElement(Ki,{show:(l||w)&&!H,screenshot:o,onHide:Ko,onRunImageDiff:Wo,imageDiffResult:n,onEditClick:$o,onLoadSettingClick:qo,isEditing:!!St,onDelete:jo,...u}),Se&&t&&I__namespace.default.createElement(Gi,{screenShotData:o,storyData:p,onClose:Zt,open:true,width:"100%",height:"100%",activeTab:W?"newScreenshot":"imageDiff"}))))}To.displayName="ScreenshotListItem";var Po=({children:e,items:t})=>{let{setDragStart:o}=Gr(),{changeIndex:r,ChangeIndexInProgress:n}=Qc(),i=core.useSensors(core.useSensor(core.PointerSensor),core.useSensor(core.KeyboardSensor,{coordinateGetter:sortable.sortableKeyboardCoordinates})),s=I.useCallback(()=>{o(true);},[o]),a=I.useCallback(()=>{o(false);},[o]),l=I.useCallback(({active:c,over:p})=>{if(o(false),!p||c.id===p.id)return;let u=t.findIndex(d=>d===c.id),f=t.findIndex(d=>d===p.id);u<0||f<0||r({newIndex:f,oldIndex:u});},[r,t,o]);return I__namespace.default.createElement(core.DndContext,{sensors:i,collisionDetection:core.closestCenter,onDragStart:s,onDragCancel:a,onDragEnd:l},I__namespace.default.createElement(sortable.SortableContext,{items:t,strategy:sortable.verticalListSortingStrategy},I__namespace.default.createElement(gi,{style:{height:"100%"}},I__namespace.default.createElement(E,{open:n}),e)))};Po.displayName="ScreenshotListSortable";var $i=({children:e})=>{let t=A(),o=He(),r=o.screenshots&&o.screenshots.length>0,n=[...o.screenshots||[]].sort((i,s)=>(i.index??0)-(s.index??0));return I__namespace.default.createElement(I__namespace.default.Fragment,null,I__namespace.default.createElement(Po,{items:n.map(i=>i.id)},r?I__namespace.default.createElement(I__namespace.default.Fragment,null,t&&n.map((i,s)=>I__namespace.default.createElement(To,{index:s,sortableId:i.id,openUpdateDialog:true,key:i.id,screenshot:i,storyData:t,showPreviewOnClick:true,draggable:true,enableImageDiff:true,enableUpdate:true,showImageDiffResultDialog:true,enableLoadSetting:true,enableEditScreenshot:true,pauseDeleteImageDiffResult:o.pauseDeleteImageDiffResult,imageDiffResult:o.imageDiffResults.find(a=>a.screenshotId===i.id)}))):I__namespace.default.createElement("div",{style:{marginTop:30,textAlign:"center"}},I__namespace.default.createElement("div",null,"No screenshot has been found!")),e))};$i.displayName="ScreenshotList";var qi=e=>{let{hasScreenShot:t,title:o,onTestClick:r,onPreviewClick:n,onUpdateClick:i,onDelete:s}=e,[a,l]=I__namespace.default.useState(false);return I__namespace.default.createElement(nt,{border:["bottom"]},I__namespace.default.createElement("div",{className:"left"},I__namespace.default.createElement("div",{title:o},"Story Screenshots")),I__namespace.default.createElement("div",{className:"right"},I__namespace.default.createElement(Gt,{fixFunction:true,onClose:l,open:a}),I__namespace.default.createElement(components.IconButton,{onClick:()=>l(true),title:"Fix screenshot name"},I__namespace.default.createElement(icons.WrenchIcon,null)),t&&I__namespace.default.createElement(I__namespace.default.Fragment,null,I__namespace.default.createElement(components.IconButton,{onClick:i,title:"Update story screenshots"},I__namespace.default.createElement(icons.RefreshIcon,null)),I__namespace.default.createElement(components.IconButton,{onClick:r,title:"Run diff test for story screenshots"},I__namespace.default.createElement(icons.ContrastIcon,null)),I__namespace.default.createElement(components.IconButton,{onClick:n,title:"Display story screenshots"},I__namespace.default.createElement(icons.PhotoIcon,null)),I__namespace.default.createElement(Ce,{IconButton:components.IconButton,onDelete:s}))))};qi.displayName="ScreenshotListToolbar";function Ut(e,t,o=false){I.useEffect(()=>{if(!o)return e&&window.addEventListener("keydown",e),t&&window.addEventListener("keyup",t),()=>{e&&window.removeEventListener("keydown",e),t&&window.removeEventListener("keyup",t);}},[o,e,t]);}var bg=y(e=>{let{palette:{divider:t}}=e;return {line:{backgroundColor:t,width:1},list:{width:"350px",height:"100%"},root:{display:"flex",flexDirection:"row",minHeight:"100%",position:"relative",width:"100%",height:"100%"}}},{name:"ScreenshotListPreviewDialog"}),Xi=({screenshots:e,storyData:t,selectedItem:o,title:r,children:n,draggable:i=true,...s})=>{let[a,l]=I.useState(),c=He(),p=bg(),u=I.useCallback(async m=>{l(m);},[]),f=I.useCallback(m=>{if(!a)return;let h=e.findIndex(S=>S.id===a.id);switch(m.key){case "ArrowDown":{e[h+1]&&l(e[h+1]);break}case "ArrowUp":{e[h-1]&&l(e[h-1]);break}}},[a,e]);Ut(void 0,f),I.useEffect(()=>{if(c.imageDiffResults&&c.imageDiffResults.length&&e&&!a)if(o){let m=e.find(h=>h.id===o);m&&u(m);}else e[0]&&u(e[0]);},[a,u,e,o,c.imageDiffResults]);let d=a&&c.imageDiffResults.find(m=>m.screenshotId===a.id);return I__namespace.default.createElement(ve,{width:"100%",title:r||(a?material.capitalize(a.title):"Loading ..."),subtitle:(r&&a&&a.title)+(t&&` (${t.id})`),height:"100%",...s},I__namespace.default.createElement("div",{className:p.root},I__namespace.default.createElement("div",{className:p.list},I__namespace.default.createElement(Po,{items:e.map(m=>m.id)},a&&e.map((m,h)=>I__namespace.default.createElement(To,{index:h,sortableId:m.id,openUpdateDialog:false,showPreviewOnClick:false,key:m.id,screenshot:m,forceShowMenu:true,enableUpdate:true,draggable:i,storyData:t,pauseDeleteImageDiffResult:c.pauseDeleteImageDiffResult,onClick:u,selected:a.id===m.id,imageDiffResult:c.imageDiffResults.find(S=>S.screenshotId===m.id)})))),I__namespace.default.createElement("div",{className:p.line}),d&&I__namespace.default.createElement(Mo,{imageDiffResult:d}),n))};Xi.displayName="ScreenshotListPreviewDialog";var Zr=e=>{let{onClose:t,updating:o,target:r,onLoad:n}=e,{loading:i,storyData:s}=Gc(r,n),[a,l]=I.useState(false),c=He(),{updateScreenshot:p}=Yr(),u=I.useCallback(async()=>{l(true);try{let f=c.screenshots.reduce((d,m)=>{let h=c.imageDiffResults.find(S=>S.screenshotId===m.id);if(!h)throw new Error(`Unable to find image diff result for '${m.title}' screenshot.`);return d.push(p(h)),d},[]);await Promise.all(f),v.success("Successfully updated.",{duration:1/0,id:"story-screenshot-preview:updated"});}catch(f){v.error(f.message);}l(false);},[c,p]);return I__namespace.default.useEffect(()=>(wo(true),()=>{wo(false),Sc();}),[]),I__namespace.default.createElement(I__namespace.default.Fragment,null,I__namespace.default.createElement(E,{open:i||a}),!i&&I__namespace.default.createElement(Xi,{title:o?"Following screenshots will be saved, would you like to continue?":void 0,screenshots:c.screenshots,onClose:t,open:true,storyData:s||{filePath:"",id:"",name:"",parent:""},draggable:r==="story"&&!a,footerActions:o?()=>I__namespace.default.createElement(I__namespace.default.Fragment,null,I__namespace.default.createElement(material.Button,{onClick:t,color:"primary"},"No"),I__namespace.default.createElement(material.Button,{onClick:u,color:"primary",autoFocus:true},"Yes")):void 0},I__namespace.default.createElement(E,{open:a})))};Zr.displayName="StoryScreenshotPreview";var ru=I__namespace.default.memo(Zr);function Yi(){let[e,t]=I.useState(false),o="screenshot-panel",{runDiffTest:r,updateInf:n}=Ft(o,"story"),{screenshotLoaderInProgress:i}=wc(),{deleteInProgress:s,deleteStoryScreenshots:a}=bc(),l=He(),{testStoryScreenShots:c,imageDiffTestInProgress:p}=Rt(),u=I.useCallback(()=>{t(!e);},[e]),f=l.screenshots&&l.screenshots.length>0;I.useEffect(()=>{wo(e);},[e]);let d=I__namespace.default.useCallback(()=>{c("story");},[c]);return I__namespace.default.createElement(I__namespace.default.Fragment,null,I__namespace.default.createElement(E,{open:i||p||s||n.reqBy!==void 0}),I__namespace.default.createElement(qi,{onUpdateClick:r,title:"Story Screenshots",onTestClick:d,onPreviewClick:u,hasScreenShot:f,onDelete:a}),I__namespace.default.createElement($i,null),e&&I__namespace.default.createElement(Zr,{onClose:u,target:"story"}))}Yi.displayName="ScreenshotPanel";var Ji=({showPanel:e})=>{let[t,o]=I__namespace.default.useState(false),{updateInf:r,handleClose:n,setIsLoadingFinish:i}=Ft(""),s=I__namespace.default.useCallback(()=>{if(o(true),i(true),r.startedAt){let l=Pr(Date.now()-r.startedAt),c=r.target==="file"?"Story file screenshot diff":"Screenshot diff";pc(`${c} finished in ${l}. Review the differences.`);}},[i,r.startedAt,r.target]),a=I__namespace.default.useCallback(()=>{n(),o(false);},[n]);return I__namespace.default.createElement(ke,null,e&&!t&&I__namespace.default.createElement(Yi,null),r.reqBy&&I__namespace.default.createElement(ru,{onClose:a,updating:true,target:r.target??"story",onLoad:s}))};Ji.displayName="ScreenshotMain";function nu(){let e=managerApi.useStorybookState(),[t,o]=I.useState();return I.useEffect(()=>{let r=ul(window.location.host,e.storyId),n=Object.keys(e.customQueryParams);if(n.length>0){let i=n.map(s=>{let a=e.customQueryParams[s];return `${s}=${a}`});r+=`&${i.join("&")}`;}o(r);},[e.customQueryParams,e.storyId]),t}var Fg=D(Vd__default.default),_g=y(()=>({content:{padding:5},root:{padding:5,width:450},title:{display:"flex",fontSize:20,justifyContent:"space-between",padding:5}}),{name:"OptionPopover"}),Io=({title:e,Icon:t,children:o,width:r,active:n})=>{let[i,s]=I.useState(),a=_g(),l=I.useCallback(p=>{s(p.target);},[]),c=I.useCallback(()=>{s(void 0);},[]);return I__namespace.default.createElement(I__namespace.default.Fragment,null,I__namespace.default.createElement(material.Popover,{open:!!i,anchorEl:i,onClose:c,style:{margin:20},anchorOrigin:{horizontal:"center",vertical:"top"},transformOrigin:{horizontal:"right",vertical:"bottom"}},I__namespace.default.createElement("div",{className:a.root,style:{width:r}},I__namespace.default.createElement("div",{className:a.title},I__namespace.default.createElement("span",null,e),I__namespace.default.createElement(material.IconButton,{size:"small",onClick:c},I__namespace.default.createElement(Fg,null))),I__namespace.default.createElement(material.Divider,null),I__namespace.default.createElement("div",null,o))),I__namespace.default.createElement(components.IconButton,{onClick:l,active:n},I__namespace.default.createElement(material.Tooltip,{placement:"top",title:"Browser Options"},I__namespace.default.createElement(t,null))))};Io.displayName="OptionPopover";var Vg=D(zg__default.default),ko=({browserType:e})=>{let{setBrowserOptions:t,browserOptions:o,hasOption:r,setBrowserDeviceOptions:n}=U(e),[i,s]=I.useState(false),a=I.useCallback(c=>{t(e,c);},[e,t]),l=I.useCallback(c=>{n(e,c),s(true);},[e,n]);return I.useEffect(()=>{i&&s(false);},[i]),o?I__namespace.default.createElement(Io,{title:"Browser Options",Icon:Vg,active:r},!i&&I__namespace.default.createElement(en,{onSave:a,schemaName:"browser-options",defaultData:o&&o[e],FooterComponent:I__namespace.default.createElement(vi,{onDeviceSelect:l})})):null};ko.displayName="BrowserOptions";var jg=D(Wg__default.default),$g=D(Gg__default.default),qg=D(Ug__default.default),Xg=y(e=>{let{palette:t}=e;return {label:{textTransform:"uppercase"},root:{alignItems:"center",backgroundColor:t.divider,color:t.text.secondary,display:"flex",flexWrap:"nowrap",fontSize:14,height:30,justifyContent:"space-between",minHeight:"auto",paddingLeft:10,paddingRight:10,textAlign:"right"},toolbarPanels:{"& button":{alignItems:"center",display:"flex",height:30,marginLeft:6,marginTop:0},"& svg:not(.browser-loader)":{width:17},alignItems:"center",display:"flex"}}}),ts=e=>{let{browserType:t,onSave:o,showSaveButton:r,loading:n,onRefresh:i,onFullScreen:s}=e,a=Xg();return I__namespace.default.createElement("div",{className:a.root},I__namespace.default.createElement("div",{className:a.toolbarPanels},I__namespace.default.createElement("label",{className:a.label},t),n&&I__namespace.default.createElement(material.CircularProgress,{classes:{svg:"browser-loader"},style:{marginLeft:10},size:15})),I__namespace.default.createElement("div",{className:a.toolbarPanels},r&&I__namespace.default.createElement(components.IconButton,{onClick:o},I__namespace.default.createElement(material.Tooltip,{placement:"top",title:"Save screenshot"},I__namespace.default.createElement(qg,null))),I__namespace.default.createElement(components.IconButton,{onClick:i},I__namespace.default.createElement(material.Tooltip,{placement:"top",title:"Refresh"},I__namespace.default.createElement($g,null))),t!=="storybook"&&I__namespace.default.createElement(ko,{browserType:t}),I__namespace.default.createElement(components.IconButton,{onClick:s},I__namespace.default.createElement(material.Tooltip,{placement:"top",title:"Full screen"},I__namespace.default.createElement(jg,null)))))};ts.displayName="ScreenShotViewToolbar";var os=(e,t,o=.1)=>e==="dark"?styles.lighten(t,o):styles.darken(t,o);var rS=y(e=>{let t=e.palette.mode==="light"?styles.lighten:styles.darken,{palette:o}=e,{background:r}=o;return {card:{"& .os-scrollbar":{opacity:1,visibility:"visible !important",zIndex:10},"& .os-scrollbar-track":{"& .os-scrollbar-handle":{backgroundColor:os(o.mode,r.paper,.6)},backgroundColor:"transparent",visibility:"visible !important"},overflow:"hidden",position:"relative",width:"100%",zIndex:10,backgroundColor:t(r.default,.1)},container:{alignItems:"center",height:"100%",position:"relative",width:"100%",border:`3px solid ${o.divider}`,borderTop:0},errorContainer:{overflow:"auto"},editMode:{"& $fakeBorder":{borderColor:t(e.palette.warning.main,.5)},backgroundColor:t(e.palette.warning.main,.6)},fakeBorder:{border:`10px solid ${os(o.mode,r.paper,.1)}`,borderTop:0,bottom:0,left:0,pointerEvents:"none",position:"absolute",right:0,top:0,zIndex:5},iframe:{width:"100%"},image:{},innerContainer:{width:"100%"}}},{name:"ScreenshotView"}),tn=e=>{let{browserType:t,url:o,height:r,refresh:n,onRefreshEnd:i,onSave:s,onScreenshotDataChange:a}=e,{isEditing:l}=Ve(),[c,p]=I.useState(false),u=rS(),{getBrowserOptions:f}=U(),d=f(t),{loading:m,screenshot:h,getSnapshot:S,error:b}=Jc(t,d);I.useEffect(()=>{!n||m||(S(),i?.());},[S,m,i,n]);let x=r-30,O=t==="storybook",w=!!(h&&h.base64)&&t!=="storybook",C=I.useCallback(()=>{p(!c);},[c]),M=b||h?.error,N=I.useCallback(()=>{t==="storybook"||!h?.base64||s?.(t);},[t,s,h]);return I.useEffect(()=>{if(!(!a||t==="storybook")){if(!h?.base64){a(t,void 0);return}a(t,{base64:h.base64,browserOptions:d});}},[d,t,a,h]),I__namespace.default.createElement("div",{className:Dr__default.default(u.card,{[u.editMode]:l(t)})},I__namespace.default.createElement(ts,{browserType:t,onSave:N,loading:m,onRefresh:S,showSaveButton:w,onFullScreen:C}),I__namespace.default.createElement("div",{className:u.container,style:{height:x,overflow:O?"hidden":"auto"}},t!=="storybook"?I__namespace.default.createElement("div",{className:u.innerContainer},h&&h.base64&&!M?I__namespace.default.createElement("img",{className:u.image,src:`data:image/gif;base64,${h.base64}`}):I__namespace.default.createElement(I__namespace.default.Fragment,null,M&&I__namespace.default.createElement("div",{className:u.errorContainer},I__namespace.default.createElement(ni,{message:M})))):I__namespace.default.createElement("iframe",{src:o,className:u.iframe,style:{height:x},frameBorder:"0"})),I__namespace.default.createElement(ve,{open:c,width:"100%",height:"100%",onClose:C,title:`${material.capitalize(t)} screenshot`},h&&c&&h.base64&&I__namespace.default.createElement(Do,{imgSrcString:h.base64})))};tn.displayName="ScreenshotView";var aS=y(e=>({overlay:{backgroundColor:"transparent",border:`1px solid ${e.palette.primary.main}`,bottom:0,cursor:"crosshair !important",left:0,position:"absolute",right:0,top:0,zIndex:100}}),{name:"SelectorOverlay"}),rs=I.forwardRef((e,t)=>{let o=aS();return I__namespace.default.createElement("div",{...e,className:Dr__default.default(o.overlay),ref:t})});rs.displayName="IframeOverlay";var ns=zustand.create()(middleware.devtools(e=>({clipping:false,start:()=>{e(()=>({clipping:true}));},stop:()=>{e(()=>({clipping:false}));},toggleClippingState:()=>{e(t=>({clipping:!t.clipping}));}}),{name:"clipper-store"})),is=()=>{let{clipping:e,stop:t}=ns(),{addonState:o,setAddonState:r}=de(),{setBrowserOptions:n,browserOptions:i}=U(),s=o.clippingWarningDismissed??false,{setScreenshotOptions:a,screenshotOptions:l}=q(),c=I__namespace.default.useRef(null),p=cu(),u=I__namespace.default.useCallback(f=>{if(!c.current||!p)return;let d=gl(p),{height:m,width:h,top:S,left:b}=f.rect,x=p.contentDocument??p.contentWindow?.document,O=x?Math.max(x.body?.scrollHeight||0,x.body?.offsetHeight||0,x.documentElement.scrollHeight,x.documentElement.offsetHeight,x.documentElement.clientHeight):p.getBoundingClientRect().height,w=p.getBoundingClientRect(),C=p.contentWindow?.innerWidth??w.width,M=p.contentWindow?.innerHeight??w.height,N=x?.documentElement?.clientWidth??w.width,z=x?.documentElement?.clientHeight??w.height,H=Math.min(w.width,N),Se=Math.min(w.height,z),ee=w.left+H,ye=w.top+Se,Ae=H?C/H:1,W=Se?M/Se:1,le=Number.isFinite(Ae)&&Ae>0?Ae:1,Oe=Number.isFinite(W)&&W>0?W:1,Mn=b+h,Ko=S+m,Wo=Math.max(b,w.left),Zt=Math.max(S,w.top),Go=Math.min(Mn,ee),Uo=Math.min(Ko,ye),St=Math.max(0,Go-Wo),jo=Math.max(0,Uo-Zt);if(St===0||jo===0){t();return}n("all",{...i.all||{},viewport:{height:Math.round(O),width:Math.round(C)}});let $o={left:d.scrollLeft+(Wo-w.left)*le,top:d.scrollTop+(Zt-w.top)*Oe};a({...l,clip:{height:Math.ceil(jo*Oe),width:Math.ceil(St*le),x:Math.floor($o.left),y:Math.floor($o.top)}}),t(),s||v.custom(({dismiss:qo})=>I__namespace.default.createElement(Ir,{variant:"info",onClose:qo},I__namespace.default.createElement(ui,{style:{fontSize:14}},"Clipping may differ from the Storybook preview when browser zoom is not 100%, OS display scaling (DPI) is different, fonts or line height differ, text wraps differently, the preview is resized or transformed, or scrollbar behavior differs from the Playwright viewport."),I__namespace.default.createElement("div",{style:{display:"flex",justifyContent:"flex-start",marginTop:8}},I__namespace.default.createElement(components.IconButton,{type:"button",onClick:()=>{r({...o,clippingWarningDismissed:true}),qo();}},"Do Not Show Again"))));},[o,i.all,p,s,l,n,a,r,t]);return Ut(void 0,f=>{f.code==="Escape"&&t();}),e?I__namespace.default.createElement(rs,{ref:c},I__namespace.default.createElement(cS__default.default,{dragContainer:c.current,hitRate:100,selectByClick:true,selectFromInside:true,ratio:0,onSelectEnd:u})):null};is.displayName="Clipper";var ss=()=>{let{clipping:e,toggleClippingState:t}=ns(),o=I__namespace.default.useCallback(()=>{t();},[t]);return I__namespace.default.createElement(components.IconButton,{active:e,onClick:o},I__namespace.default.createElement(material.Tooltip,{placement:"top",title:e?"Stop Clipping":"Start Clipping"},I__namespace.default.createElement("svg",{className:"MuiSvgIcon-root",focusable:"false","aria-hidden":"true",viewBox:"0 0 24 24",style:{height:20,transform:"rotate(180deg)",width:20,fill:"currentColor"}},I__namespace.default.createElement("path",{d:"M17 5h-2V3h2v2zm-2 16h2v-2.59L19.59 21 21 19.59 18.41 17H21v-2h-6v6zm4-12h2V7h-2v2zm0 4h2v-2h-2v2zm-8 8h2v-2h-2v2zM7 5h2V3H7v2zM3 17h2v-2H3v2zm2 4v-2H3c0 1.1.9 2 2 2zM19 3v2h2c0-1.1-.9-2-2-2zm-8 2h2V3h-2v2zM3 9h2V7H3v2zm4 12h2v-2H7v2zm-4-8h2v-2H3v2zm0-8h2V3c-1.1 0-2 .9-2 2z"}))))};ss.displayName="ClipperButton";var uu=e=>I__namespace.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",version:"1.1",viewBox:"2 -1 38 38",enableBackground:"new 0 0 129 129",height:22,fill:"currentColor",...e},I__namespace.createElement("path",{d:"M12 9.984l3.984 4.031h-3v6h-1.969v-6h-3zM18.984 3.984q0.844 0 1.43 0.586t0.586 1.43v12q0 0.797-0.609 1.406t-1.406 0.609h-3.984v-2.016h3.984v-9.984h-13.969v9.984h3.984v2.016h-3.984q-0.844 0-1.43-0.586t-0.586-1.43v-12q0-0.844 0.586-1.43t1.43-0.586h13.969z"}),I__namespace.createElement("path",{xmlns:"http://www.w3.org/2000/svg",d:"M0 0h24v24H0z",fill:"none"}));var pu=e=>I__namespace.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",version:"1.1",viewBox:"-4 -2 38 38",enableBackground:"new 0 0 129 129",height:22,fill:"currentColor",...e},I__namespace.createElement("path",{d:"M8.071 13.954l-4.579-7.931c2.932-3.671 7.445-6.023 12.508-6.023 5.857 0 10.978 3.148 13.767 7.844h-13.055c-0.235-0.020-0.472-0.031-0.711-0.031-3.809 0-7.018 2.614-7.929 6.142zM21.728 10.156h9.171c0.711 1.81 1.101 3.781 1.101 5.844 0 8.776-7.066 15.9-15.818 15.998l6.544-11.334c0.921-1.324 1.462-2.932 1.462-4.664 0-2.287-0.943-4.357-2.459-5.844zM10.188 16c0-3.205 2.607-5.813 5.813-5.813s5.813 2.607 5.813 5.813c0 3.205-2.608 5.813-5.813 5.813s-5.813-2.608-5.813-5.813zM18.193 23.889l-4.581 7.934c-7.704-1.153-13.613-7.797-13.613-15.822 0-2.851 0.746-5.526 2.053-7.845l6.532 11.314c1.308 2.785 4.14 4.718 7.415 4.718 0.759 0 1.495-0.104 2.193-0.299z"}),I__namespace.createElement("path",{xmlns:"http://www.w3.org/2000/svg",d:"M0 0h24v24H0z",fill:"none"}));var fu=e=>I__namespace.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",version:"1.1",viewBox:"-4 -2 38 38",enableBackground:"new 0 0 129 129",height:22,fill:"currentColor",...e},I__namespace.createElement("path",{d:"M31.954 10.442l-0.371 2.377c0 0-0.53-4.402-1.179-6.047-0.995-2.521-1.438-2.501-1.441-2.498 0.667 1.694 0.546 2.604 0.546 2.604s-1.181-3.219-4.303-4.243c-3.459-1.134-5.33-0.824-5.547-0.765-0.033-0-0.064-0-0.095-0 0.026 0.002 0.050 0.005 0.076 0.007-0.001 0.001-0.003 0.001-0.003 0.002 0.014 0.017 3.822 0.666 4.497 1.594 0 0-1.617 0-3.227 0.464-0.073 0.021 5.923 0.749 7.148 6.74 0 0-0.657-1.371-1.47-1.604 0.535 1.626 0.397 4.712-0.112 6.245-0.066 0.197-0.133-0.853-1.135-1.305 0.321 2.301-0.019 5.952-1.616 6.957-0.124 0.078 1.001-3.603 0.226-2.18-4.46 6.838-9.731 3.155-12.101 1.535 1.215 0.264 3.52-0.041 4.541-0.8 0.001-0.001 0.002-0.002 0.004-0.003 1.108-0.758 1.765-1.311 2.354-1.18s0.982-0.46 0.524-0.985c-0.459-0.526-1.572-1.249-3.079-0.855-1.063 0.278-2.379 1.454-4.389 0.264-1.543-0.914-1.688-1.673-1.702-2.199 0.038-0.186 0.086-0.361 0.143-0.52 0.178-0.496 0.716-0.646 1.015-0.764 0.508 0.087 0.946 0.246 1.405 0.481 0.006-0.153 0.008-0.356-0.001-0.586 0.044-0.088 0.017-0.352-0.054-0.674-0.041-0.322-0.107-0.655-0.211-0.959 0-0 0.001-0 0.001-0 0.002-0.001 0.003-0.001 0.005-0.002s0.005-0.004 0.007-0.006c0-0.001 0.001-0.001 0.001-0.002 0.003-0.004 0.005-0.008 0.006-0.015 0.032-0.144 0.376-0.423 0.804-0.722 0.383-0.268 0.834-0.553 1.19-0.774 0.314-0.195 0.554-0.34 0.605-0.378 0.019-0.015 0.042-0.032 0.068-0.051 0.005-0.004 0.009-0.007 0.014-0.011 0.003-0.002 0.006-0.005 0.009-0.007 0.169-0.135 0.421-0.389 0.474-0.924 0-0.001 0-0.002 0-0.004 0.002-0.016 0.003-0.032 0.004-0.048 0.001-0.011 0.002-0.023 0.002-0.034 0-0.009 0.001-0.018 0.001-0.027 0.001-0.021 0.002-0.043 0.002-0.065 0-0.001 0-0.002 0-0.004 0.001-0.052-0-0.106-0.003-0.163-0.002-0.032-0.004-0.060-0.009-0.086-0-0.001-0.001-0.003-0.001-0.004-0.001-0.003-0.001-0.005-0.002-0.008-0.001-0.005-0.002-0.009-0.004-0.013-0-0.001-0-0.001-0.001-0.001-0.002-0.005-0.004-0.010-0.005-0.014-0-0-0-0-0-0.001-0.055-0.128-0.26-0.177-1.108-0.191-0.001-0-0.002-0-0.002-0v0c-0.346-0.006-0.798-0.006-1.391-0.004-1.039 0.004-1.613-1.016-1.797-1.41 0.251-1.389 0.977-2.379 2.17-3.051 0.023-0.013 0.018-0.023-0.009-0.031 0.233-0.141-2.82-0.004-4.225 1.782-1.247-0.31-2.333-0.289-3.269-0.069-0.18-0.005-0.404-0.027-0.67-0.083-0.623-0.564-1.514-1.606-1.562-2.85 0 0-0.003 0.002-0.008 0.006-0.001-0.012-0.002-0.024-0.002-0.036 0 0-1.897 1.458-1.613 5.434-0.001 0.064-0.002 0.125-0.004 0.184-0.514 0.696-0.768 1.282-0.787 1.411-0.455 0.926-0.917 2.32-1.292 4.437 0 0 0.263-0.833 0.79-1.777-0.388 1.188-0.693 3.036-0.514 5.808 0 0 0.047-0.615 0.215-1.5 0.131 1.719 0.704 3.841 2.152 6.337 2.78 4.791 7.052 7.211 11.775 7.582 0.839 0.069 1.689 0.071 2.544 0.006 0.079-0.006 0.157-0.011 0.236-0.018 0.968-0.068 1.942-0.214 2.914-0.449 13.287-3.212 11.842-19.256 11.842-19.256z"}));var mu=e=>I__namespace.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",version:"1.1",viewBox:"-4 -2 38 38",enableBackground:"new 0 0 129 129",height:22,fill:"currentColor",...e},I__namespace.createElement("path",{d:"M16 0c-8.838 0-16 7.162-16 16s7.162 16 16 16 16-7.163 16-16-7.163-16-16-16zM29.95 14.775l-0.031-0.331c0.006 0.113 0.019 0.219 0.031 0.331zM27.762 8.4l-0.225-0.338c0.075 0.113 0.15 0.225 0.225 0.338zM26.894 7.206l-0.137-0.169c0.050 0.056 0.094 0.112 0.137 0.169zM24.956 5.237l-0.169-0.138c0.063 0.050 0.113 0.094 0.169 0.138zM23.938 4.463l-0.337-0.225c0.113 0.075 0.225 0.15 0.337 0.225zM17.556 2.087l-0.337-0.031c0.113 0.006 0.225 0.019 0.337 0.031zM14.775 2.050l-0.338 0.031c0.113-0.006 0.225-0.019 0.338-0.031zM8.4 4.237l-0.338 0.225c0.113-0.075 0.225-0.15 0.338-0.225zM7.206 5.106l-0.162 0.131c0.056-0.044 0.106-0.088 0.162-0.131zM5.237 7.044l-0.138 0.169c0.050-0.056 0.094-0.112 0.138-0.169zM4.463 8.063l-0.225 0.338c0.075-0.113 0.15-0.225 0.225-0.338zM2.087 14.444l-0.031 0.338c0.006-0.113 0.019-0.225 0.031-0.338zM2.050 17.225l0.031 0.337c-0.006-0.113-0.019-0.225-0.031-0.337zM4.237 23.594l0.225 0.337c-0.075-0.106-0.15-0.219-0.225-0.337zM4.5 23.988l2.494-1.669-0.275-0.419-2.494 1.669c-1.131-1.756-1.875-3.775-2.125-5.95l1.494-0.15-0.050-0.5-1.494 0.15c-0.025-0.288-0.038-0.581-0.044-0.875h3v-0.5h-3c0.006-0.294 0.019-0.581 0.044-0.875l1.494 0.144 0.050-0.5-1.494-0.144c0.25-2.175 1-4.194 2.131-5.95l2.494 1.669 0.275-0.419-2.5-1.656c0.169-0.237 0.338-0.475 0.519-0.7l1.156 0.95 0.319-0.388-1.156-0.95c0.188-0.225 0.388-0.438 0.588-0.65l2.119 2.119 0.356-0.356-2.119-2.119c0.213-0.2 0.425-0.4 0.644-0.588l0.95 1.162 0.387-0.319-0.95-1.156c0.231-0.181 0.463-0.356 0.7-0.525l1.669 2.494 0.419-0.275-1.669-2.494c1.756-1.131 3.775-1.875 5.95-2.125l0.15 1.494 0.5-0.050-0.15-1.494c0.287-0.025 0.581-0.038 0.875-0.044v3h0.5v-3c0.294 0.006 0.581 0.019 0.875 0.044l-0.144 1.494 0.5 0.050 0.144-1.494c2.175 0.25 4.194 1 5.95 2.131l-1.669 2.494 0.419 0.275 1.669-2.494c0.238 0.169 0.475 0.338 0.7 0.519l-0.95 1.156 0.387 0.319 0.95-1.156c0.225 0.188 0.438 0.388 0.65 0.588l-0.8 0.781-10.938 7.294-7.294 10.937-0.781 0.781c-0.2-0.212-0.4-0.425-0.588-0.644l1.156-0.95-0.319-0.387-1.156 0.95c-0.181-0.225-0.35-0.462-0.519-0.7zM5.237 24.956c-0.044-0.056-0.088-0.106-0.131-0.163l0.131 0.163zM7.044 26.762l0.162 0.131c-0.056-0.044-0.106-0.087-0.162-0.131zM8.063 27.531l0.338 0.225c-0.113-0.069-0.225-0.144-0.338-0.225zM14.444 29.913l0.338 0.031c-0.113-0.006-0.225-0.019-0.338-0.031zM17.225 29.95l0.331-0.031c-0.113 0.006-0.219 0.019-0.331 0.031zM23.6 27.762l0.337-0.225c-0.113 0.075-0.225 0.15-0.337 0.225zM24.794 26.894l0.169-0.137c-0.056 0.050-0.113 0.094-0.169 0.137zM25.887 25.913l0.025-0.025c-0.006 0.006-0.019 0.019-0.025 0.025zM26.762 24.956l0.137-0.169c-0.050 0.056-0.094 0.113-0.137 0.169zM26.981 24.688l-1.156-0.95-0.319 0.387 1.156 0.95c-0.188 0.225-0.387 0.438-0.587 0.65l-2.119-2.119-0.356 0.356 2.119 2.119c-0.212 0.2-0.425 0.4-0.644 0.587l-0.95-1.163-0.387 0.319 0.95 1.156c-0.231 0.181-0.462 0.356-0.7 0.525l-1.669-2.494-0.419 0.275 1.669 2.494c-1.756 1.131-3.775 1.875-5.95 2.125l-0.15-1.494-0.5 0.050 0.15 1.494c-0.288 0.025-0.581 0.038-0.875 0.044v-3h-0.5v3c-0.294-0.006-0.581-0.019-0.875-0.044l0.144-1.494-0.5-0.050-0.144 1.494c-2.175-0.25-4.194-1-5.95-2.131l1.669-2.494-0.419-0.275-1.656 2.494c-0.237-0.169-0.475-0.337-0.7-0.519l0.95-1.156-0.388-0.319-0.95 1.156c-0.225-0.188-0.438-0.387-0.65-0.587l0.787-0.781 10.937-7.294 7.294-10.938 0.781-0.781c0.2 0.213 0.4 0.425 0.587 0.644l-1.156 0.95 0.319 0.387 1.156-0.95c0.181 0.231 0.356 0.463 0.525 0.7l-2.494 1.669 0.275 0.419 2.494-1.669c1.131 1.756 1.875 3.775 2.125 5.95l-1.494 0.15 0.050 0.5 1.494-0.15c0.025 0.287 0.038 0.581 0.044 0.875h-3v0.5h3c-0.006 0.294-0.019 0.581-0.044 0.875l-1.494-0.144-0.050 0.5 1.494 0.144c-0.25 2.175-1 4.194-2.131 5.95l-2.494-1.669-0.275 0.419 2.494 1.669c-0.163 0.225-0.337 0.456-0.519 0.688zM29.95 17.219c-0.012 0.113-0.019 0.225-0.031 0.337l0.031-0.337zM27.762 23.6c-0.075 0.113-0.15 0.225-0.225 0.337l0.225-0.337z"}),I__namespace.createElement("path",{d:"M13.517 2.221l0.585 2.942-0.49 0.098-0.585-2.942 0.49-0.098z"}),I__namespace.createElement("path",{d:"M18.489 29.78l-0.585-2.942 0.49-0.098 0.585 2.942-0.49 0.098z"}),I__namespace.createElement("path",{d:"M12.176 2.528l0.436 1.435-0.478 0.145-0.436-1.435 0.478-0.145z"}),I__namespace.createElement("path",{d:"M19.826 29.465l-0.436-1.435 0.478-0.145 0.436 1.435-0.478 0.145z"}),I__namespace.createElement("path",{d:"M10.875 2.972l1.148 2.772-0.462 0.191-1.148-2.772 0.462-0.191z"}),I__namespace.createElement("path",{d:"M21.129 29.030l-1.148-2.772 0.462-0.191 1.148 2.772-0.462 0.191z"}),I__namespace.createElement("path",{d:"M9.176 3.771l0.441-0.236 0.707 1.323-0.441 0.236-0.707-1.323z"}),I__namespace.createElement("path",{d:"M22.816 28.228l-0.441 0.236-0.707-1.323 0.441-0.236 0.707 1.323z"}),I__namespace.createElement("path",{d:"M3.769 9.182l1.323 0.707-0.236 0.441-1.323-0.707 0.236-0.441z"}),I__namespace.createElement("path",{d:"M28.226 22.819l-1.323-0.707 0.236-0.441 1.323 0.707-0.236 0.441z"}),I__namespace.createElement("path",{d:"M5.744 12.019l-2.772-1.148 0.191-0.462 2.772 1.148-0.191 0.462z"}),I__namespace.createElement("path",{d:"M26.26 19.978l2.772 1.148-0.191 0.462-2.772-1.148 0.191-0.462z"}),I__namespace.createElement("path",{d:"M2.673 11.7l1.436 0.435-0.145 0.479-1.436-0.435 0.145-0.479z"}),I__namespace.createElement("path",{d:"M29.322 20.302l-1.436-0.435 0.145-0.479 1.436 0.435-0.145 0.479z"}),I__namespace.createElement("path",{d:"M2.315 13.024l2.942 0.585-0.098 0.49-2.942-0.585 0.098-0.49z"}),I__namespace.createElement("path",{d:"M29.679 18.976l-2.942-0.585 0.098-0.49 2.942 0.585-0.098 0.49z"}),I__namespace.createElement("path",{d:"M2.218 18.486l2.942-0.585 0.098 0.49-2.942 0.585-0.098-0.49z"}),I__namespace.createElement("path",{d:"M29.776 13.513l-2.942 0.585-0.098-0.49 2.942-0.585 0.098 0.49z"}),I__namespace.createElement("path",{d:"M2.53 19.829l1.435-0.436 0.145 0.478-1.435 0.436-0.145-0.478z"}),I__namespace.createElement("path",{d:"M29.468 12.178l-1.435 0.436-0.145-0.478 1.435-0.436 0.145 0.478z"}),I__namespace.createElement("path",{d:"M3.161 21.591l-0.191-0.462 2.772-1.148 0.191 0.462-2.772 1.148z"}),I__namespace.createElement("path",{d:"M28.837 10.413l0.191 0.462-2.772 1.148-0.191-0.462 2.772-1.148z"}),I__namespace.createElement("path",{d:"M3.776 22.821l-0.236-0.441 1.323-0.707 0.236 0.441-1.323 0.707z"}),I__namespace.createElement("path",{d:"M28.233 9.181l0.236 0.441-1.323 0.707-0.236-0.441 1.323-0.707z"}),I__namespace.createElement("path",{d:"M9.621 28.464l-0.441-0.236 0.707-1.323 0.441 0.236-0.707 1.323z"}),I__namespace.createElement("path",{d:"M22.377 3.534l0.441 0.236-0.707 1.323-0.441-0.236 0.707-1.323z"}),I__namespace.createElement("path",{d:"M10.415 28.837l1.148-2.772 0.462 0.191-1.148 2.772-0.462-0.191z"}),I__namespace.createElement("path",{d:"M21.59 3.16l-1.148 2.772-0.462-0.191 1.148-2.772 0.462 0.191z"}),I__namespace.createElement("path",{d:"M12.176 29.47l-0.478-0.145 0.435-1.435 0.478 0.145-0.435 1.435z"}),I__namespace.createElement("path",{d:"M19.823 2.528l0.479 0.145-0.435 1.436-0.479-0.145 0.435-1.436z"}),I__namespace.createElement("path",{d:"M13.515 29.776l-0.49-0.098 0.585-2.942 0.49 0.098-0.585 2.942z"}),I__namespace.createElement("path",{d:"M18.485 2.218l0.49 0.098-0.585 2.942-0.49-0.098 0.585-2.942z"}),I__namespace.createElement("path",{xmlns:"http://www.w3.org/2000/svg",d:"M0 0h24v24H0z",fill:"none"}));var Ao=I.memo(e=>{let{browserType:t,...o}=e;switch(t){case "chromium":return I__namespace.default.createElement(pu,{...o});case "firefox":return I__namespace.default.createElement(fu,{...o});case "webkit":return I__namespace.default.createElement(mu,{...o});default:return I__namespace.default.createElement(uu,{...o})}});Ao.displayName="BrowserIcon";var us=e=>{let{browserType:t,onClick:o,active:r}=e,n=I.useCallback(()=>{o(t);},[t,o]);return I__namespace.default.createElement(components.IconButton,{onClick:n,active:r,title:material.capitalize(t)},I__namespace.default.createElement(Ao,{browserType:t}))};us.displayName="BrowserIconButton";var AS=D(xS__default.default),ps=()=>{let{setBrowserOptions:e,browserOptions:t}=U(),{setScreenshotOptions:o,screenshotOptions:r}=q(),n=I__namespace.default.useCallback(()=>{let i=Pe();if(!i)return;let s=ml(i);s&&(e("all",{...t.all,viewport:{height:Math.round(s.height),width:Math.round(s.width)}}),r&&r.clip!==void 0&&o({...r,clip:void 0}));},[t,r,e,o]);return I__namespace.default.createElement(components.IconButton,{onClick:n,"aria-label":"Match browser viewport to iframe content"},I__namespace.default.createElement(material.Tooltip,{placement:"top",title:"Match browser viewport to iframe content"},I__namespace.default.createElement(AS,null)))};ps.displayName="ResizeBrowserToIframeContent";var IS=D(CS__default.default),fs=()=>{let{setBrowserOptions:e,browserOptions:t}=U(),{setScreenshotOptions:o,screenshotOptions:r}=q(),n=I__namespace.default.useCallback(()=>{let i=Pe();if(!i)return;let s=i.getBoundingClientRect();e("all",{...t.all,viewport:{height:Math.round(s.height),width:Math.round(s.width)}}),r&&r.clip!==void 0&&o({...r,clip:void 0});},[t,r,e,o]);return I__namespace.default.createElement(components.IconButton,{onClick:n,"aria-label":"Match browser viewport to preview"},I__namespace.default.createElement(material.Tooltip,{placement:"top",title:"Match browser viewport to preview"},I__namespace.default.createElement(IS,null)))};fs.displayName="ResizeBrowserToPreview";var OS=D(DS__default.default);function ds(){let{setBrowserOptions:e}=U(),{setScreenshotOptions:t}=q(),o=I__namespace.default.useCallback(()=>{e("all",{}),t({});},[e,t]);return I__namespace.default.createElement(components.IconButton,{onClick:o},I__namespace.default.createElement(material.Tooltip,{placement:"top",title:"Reset Settings"},I__namespace.default.createElement(OS,{style:{marginTop:4,width:"20px"}})))}ds.displayName="ResetSettings";var FS=D(BS__default.default),ms=()=>{let{setScreenshotOptions:e,screenshotOptions:t}=q(),o=I.useCallback(n=>{e(n);},[e]),r=I.useMemo(()=>t&&Object.keys(t).length>0,[t]);return I__namespace.default.createElement(Io,{title:"Screenshot Options",Icon:FS,active:r},I__namespace.default.createElement(en,{onSave:o,schemaName:"screenshot-options",defaultData:t,excludeProps:["path"]}))};ms.displayName="ScreenshotOptions";var KS=D(_S__default.default),WS=D(zS__default.default),GS=D(RS__default.default),US=D(Ug__default.default),hs=e=>{let{browserTypes:t,toggleBrowser:o,activeBrowsers:r,onCLose:n,onRefresh:i,isVertical:s,onSave:a}=e,{setBrowserOptions:l,browserOptions:c}=U(),p=I.useCallback(()=>{let u=c.all&&c.all.cursor;l("all",{...c.all,cursor:u?void 0:true});},[c,l]);return I__namespace.default.createElement(nt,{border:s?void 0:["top"]},I__namespace.default.createElement("div",{className:"left"},t.map(u=>I__namespace.default.createElement(us,{key:u,browserType:u,onClick:o,active:r.find(f=>f===u)!==void 0}))),I__namespace.default.createElement("div",{className:"right"},I__namespace.default.createElement(components.IconButton,{className:"cursor-button",onClick:p,active:c.all&&c.all.cursor},I__namespace.default.createElement(material.Tooltip,{placement:"top",title:c.all&&c.all.cursor?"Hide cursor":"Show cursor"},I__namespace.default.createElement(WS,{style:{transform:"rotate(-80deg)"}}))),I__namespace.default.createElement(ss,null),I__namespace.default.createElement(fs,null),I__namespace.default.createElement(ps,null),I__namespace.default.createElement(components.IconButton,{onClick:a},I__namespace.default.createElement(material.Tooltip,{placement:"top",title:"Save screenshots"},I__namespace.default.createElement(US,null))),I__namespace.default.createElement(components.IconButton,{onClick:i},I__namespace.default.createElement(material.Tooltip,{placement:"top",title:"Refresh"},I__namespace.default.createElement(GS,null))),I__namespace.default.createElement(ds,null),I__namespace.default.createElement(ms,null),I__namespace.default.createElement(ko,{browserType:"all"}),I__namespace.default.createElement(components.IconButton,{onClick:n},I__namespace.default.createElement(material.Tooltip,{placement:"top",title:"Close panel"},I__namespace.default.createElement(KS,null)))))};hs.displayName="Toolbar";var $S=100,yu=2,qS=2,vu=(e,t)=>{let[o,r]=reactUse.useMeasure(),n=I.useMemo(()=>`calc(${$S/(e||t||1)}% - ${qS}px)`,[t,e]);return {itemHeight:I.useMemo(()=>e===1?r.height/(t||1):e===yu?r.height/yu:r.height,[t,e,r.height]),ref:o,width:n}};var bu=e=>{let[t,o]=I.useState(false),r=I.useRef({}),{generateTitle:n,hasGenerator:i}=Vc(null),{getUpdatingScreenshotTitle:s,inProgress:a,saveScreenShot:l}=$c(),c=I.useCallback((m,h)=>{if(!h){delete r.current[m];return}r.current[m]=h;},[]),p=I.useCallback(async(m,h)=>{o(true);try{for(let S of h){let b=r.current[S];b&&await l(S,m,b.base64,b.browserOptions);}}finally{o(false);}},[l]),u=I.useCallback(m=>{if(!m.length)return;let h=m.length>1?"Screenshots Title":"Screenshot Title";It.show({onGenerateContent:i?n:void 0,onSave:S=>{p(S,m);},required:true,title:h,value:s()});},[n,s,i,p]),f=I.useCallback(()=>{u(e);},[e,u]),d=I.useCallback(m=>{u([m]);},[u]);return {isSaving:t||a,requestSaveAll:f,requestSaveOne:d,setScreenshotData:c}};var QS=y(e=>({error:{color:"red",marginTop:"10%",padding:30,textAlign:"center"},list:{display:"flex",height:"100%",position:"relative",width:"100%"},listItem:{marginBottom:2,marginLeft:1,marginRight:1},listWrap:{flexFlow:" row wrap"},preview:{boxShadow:`${e.palette.divider} 0 1px 0 0 inset`,height:"100%",overflow:"hidden",paddingTop:2,width:"100%"},root:{display:"flex",flexDirection:"column",height:"100%"},vertical:{borderLeft:`1px solid ${e.palette.divider}`}})),Bo=e=>{let{showStorybook:t,column:o,onClose:r,viewPanel:n}=e,{activeBrowsers:i,toggleBrowser:s,browserTypes:a,refreshingBrowsers:l,clearBrowserRefresh:c,refreshBrowsers:p}=Xr(n),u=QS(),f=nu(),{itemHeight:d,ref:m,width:h}=vu(o,i.length),{isSaving:S,requestSaveAll:b,requestSaveOne:x,setScreenshotData:O}=bu(i),w=I.useCallback(()=>{p(i);},[i,p]);return I__namespace.default.createElement("div",{className:Dr__default.default(u.root,{[u.vertical]:o===1})},I__namespace.default.createElement(hs,{browserTypes:a,activeBrowsers:i,toggleBrowser:s,onCLose:r,onRefresh:w,onSave:b,isVertical:o===1}),I__namespace.default.createElement("div",{className:u.preview},i&&i.length>0&&I__namespace.default.createElement("div",{ref:m,className:Dr__default.default(u.list,{[u.listWrap]:o!==void 0})},t&&I__namespace.default.createElement("div",{className:u.listItem,style:{width:h}},I__namespace.default.createElement(tn,{browserType:"storybook",url:f,height:d})),i.map(C=>I__namespace.default.createElement("div",{key:C,className:u.listItem,style:{width:h}},I__namespace.default.createElement(tn,{browserType:C,height:d,refresh:l.includes(C),onSave:x,onRefreshEnd:()=>{c(C);},onScreenshotDataChange:O}))))),I__namespace.default.createElement(E,{open:S}))};Bo.displayName="ScreenshotListView";var ey=y(e=>({appBar:{backgroundColor:e.palette.divider,boxShadow:"none"},closeIconAbsolute:{position:"absolute",right:30,top:30},container:{height:"100%"},dialogPaper:{height:"100%",maxHeight:"100%",maxWidth:"100%",minHeight:"100%",minWidth:"100%",overflow:"hidden"},toolbar:{minHeight:"auto"},toolbarRight:{display:"flex",justifyContent:"flex-end",width:"100%"}})),gs=e=>{let{onClose:t,open:o}=e,r=ey();return I__namespace.default.createElement(mo,null,I__namespace.default.createElement(ZS__default.default,{onClose:t,"aria-labelledby":"simple-dialog-title",open:o,hideBackdrop:true,classes:{paper:r.dialogPaper}},I__namespace.default.createElement("div",{className:r.container},I__namespace.default.createElement(Bo,{showStorybook:true,column:2,onClose:t,viewPanel:"dialog"}))))};gs.displayName="PreviewDialog";var ry=y(()=>({alert:{padding:"0px 16px"},icon:{alignSelf:"center"},message:{flex:1},messageWrapper:{alignSelf:"center"},root:{alignSelf:"center",display:"flex",justifyContent:"space-between",width:"100%"}}),{name:"EditScreenshotAlert"}),Ss=()=>{let{editScreenshotState:e,clearScreenshotEdit:t}=Ve(),o=ry();return e?I__namespace.default.createElement(material.Alert,{classes:{icon:o.icon,message:o.message,root:o.alert},severity:"warning"},I__namespace.default.createElement("div",{className:o.root},I__namespace.default.createElement("div",{className:o.messageWrapper},`Editing '${e.screenshotData.title}' screenshot (${e.screenshotData.browserType}).`),I__namespace.default.createElement("div",null,I__namespace.default.createElement(material.Button,{size:"small",color:"inherit",onClick:t},"Cancel")))):null};Ss.displayName="EditScreenshotAlert";function xu(e,t){return e&&e.placement&&e.placement!=="auto"?e.placement==="bottom":t!=="bottom"}var Tu="html>body>#root",ny=8;function Au(e){return typeof e.querySelector=="function"}function iy(e){if(Au(e)){if(e.querySelector(Tu))return Tu;if(e.querySelector(Ni))return Ni}}function Pu(e,t){if(!Au(t))return e;let o=iy(t);if(!o)return e;let r=t.querySelector(o);if(!r)return e;for(let n=1;n<=ny;n+=1){let i=`html>body>div:nth-child(${n})`;if(!e.includes(i))continue;let s=t.querySelector(i);if(s&&s===r)return e.replace(i,o)}return e}var py=y(e=>({hidden:{display:"none",pointerEvents:"none"},info:{bottom:0,color:e.palette.primary.main,fontSize:14,left:2,pointerEvents:"none",position:"absolute"},overlay:{backgroundColor:"transparent",bottom:0,cursor:"crosshair !important",left:0,position:"absolute",right:0,top:0,zIndex:100},preview:{border:`1px solid ${e.palette.primary.main}`,position:"absolute"}}),{name:"SelectorOverlay"}),fy=["id"];function ku(e){return typeof CSS<"u"&&typeof CSS.escape=="function"?CSS.escape(e):e.replace(/\\/g,"\\\\").replace(/"/g,'\\"')}function dy(e){return e.replace(/\\/g,"\\\\").replace(/"/g,'\\"')}function my(e,t){let o=t&&t.length>0?t:fy;for(let r of o){let n=r.trim();if(!n)continue;if(n.toLowerCase()==="id"){if(e.id)return `#${ku(e.id)}`;if(!e.hasAttribute("id"))continue;return "[id]"}if(!e.hasAttribute(n))continue;let s=e.getAttribute(n);if(s==null)continue;let a=ku(n);return s===""?`[${a}]`:`[${a}="${dy(s)}"]`}return ""}var ys={height:"100%",left:0,right:0,width:"100%"},vs=e=>{let{iframe:t}=e,{stopSelector:o,selectorManager:r,setSelectorData:n}=$t(),[i,s]=I.useState(),a=py(),l=I.useRef(null),c=r.type==="id-selector",p=r.type==="selector"||c,[u,f]=I.useState({rect:ys}),{elX:d,elY:m}=reactUse.useMouseHovered(l,{bound:true,whenHovered:true});return reactUse.useKey("Escape",o,void 0,[f,o]),reactUse.useThrottleFn((h,S)=>{if(t&&t.contentWindow){let b=t.contentWindow.document,x=b.elementFromPoint(h,S);if(x)if(c)f({rect:x.getBoundingClientRect(),selector:my(x,r.selectorAttributeNames)});else {let O=Pu(selectorPath.getSelectorPath(x,{minify:true}),b);x.tagName==="HTML"?f({rect:ys,selector:O}):f({rect:x.getBoundingClientRect(),selector:O});}else f({...u,rect:void 0});}},150,[d,m]),I.useEffect(()=>{if(i){let h=l.current?l.current.contains(i):false;o(),n({path:h?u.selector:void 0,x:Math.round(d),y:Math.round(m)});}},[d,m,n,i,u.selector,o]),I.useEffect(()=>{let h=x=>{s(x.target);},S=document.createElement("STYLE");S.innerHTML=`html, body {
15
15
  cursor: crosshair !important;
16
- `;let{body:b}=document;return document.head.appendChild(S),b.addEventListener("mouseup",h),()=>{b.style.cursor="inherit",b.removeEventListener("mouseup",h),document.head.removeChild(S);}},[]),I__namespace.default.createElement("div",{ref:l,className:Dr__default.default(a.overlay)},r&&u&&u.rect&&I__namespace.default.createElement(I__namespace.default.Fragment,null,I__namespace.default.createElement("div",{className:Dr__default.default(a.preview,"selector-preview"),style:p?{height:u.rect.height,left:u.rect.left,top:u.rect.top,width:u.rect.width}:ys}),I__namespace.default.createElement("div",{className:a.info},I__namespace.default.createElement("div",null,`X: ${d}`),I__namespace.default.createElement("div",null,`Y: ${m}`),I__namespace.default.createElement("div",null,u.selector))))};vs.displayName="SelectorOverlay";var bs=I.memo(e=>{let{children:t}=e,{selectorManager:o}=$t(),r=I.useRef(null),[n,i]=I.useState();I.useEffect(()=>{r.current&&i(r.current.querySelector("iframe")||void 0);},[]);let s=o&&o.start;return I__namespace.default.createElement("div",{ref:r,style:{height:"100%"}},t,s&&I__namespace.default.createElement(vs,{iframe:n}))});bs.displayName="Selector";var xy=y(()=>({horizontal:{"& $preview":{position:"relative"}},iframeContainer:{height:"100%",position:"relative"},interactive:{pointerEvents:"auto"},notInteractive:{pointerEvents:"none"},preview:{display:"flex",flexFlow:"column",height:"100%",position:"relative",width:"100%"},root:{height:"100%",position:"relative",width:"100%"},snapshotPanel:{"& > span":{display:"none"},height:"100%",width:"100%"},splitPane:{"&:hover":{backgroundColor:"rgb(2, 156, 253)",transition:"background-color 0.3s ease"},backgroundColor:"transparent"},vertical:{"& $preview":{position:"relative"}}}),{name:"Preview"}),Bu=3,Ty=e=>{let{children:t}=e,{addonState:o,setAddonState:r}=de(),n=managerApi.useStorybookState(),i=xy(),s=xu(o,n.layout.panelPosition),a=I.useCallback(d=>{r({...o,previewPanelSize:d});},[o,r]),l=I.useCallback(()=>{r({...o,previewPanelEnabled:false});},[o,r]);if(!o||!o.previewPanelEnabled)return I__namespace.default.createElement(I__namespace.default.Fragment,null,t);let c=0,p=I__namespace.default.createElement(reactSplitPane.Pane,{key:"preview",minSize:50,size:o&&o.previewPanelSize||"30%",className:Dr__default.default("preview-main",i.preview)},I__namespace.default.createElement("div",{className:i.iframeContainer},I__namespace.default.createElement(bs,null,t)),I__namespace.default.createElement(is,null),I__namespace.default.createElement(Ss,null)),u=I__namespace.default.createElement(reactSplitPane.Pane,{key:"screenshot",minSize:50,className:Dr__default.default(i.snapshotPanel)},I__namespace.default.createElement(components.Separator,null),o&&o.previewPanelEnabled&&I__namespace.default.createElement(Bo,{column:s?void 0:1,onClose:l,viewPanel:"main"})),f=[p,u];return I__namespace.default.createElement("div",{id:"preview-container",className:Dr__default.default(i.root)},I__namespace.default.createElement(reactSplitPane.SplitPane,{direction:s?"vertical":"horizontal",onResize:d=>a(d[c]),dividerClassName:Dr__default.default(i.splitPane),dividerStyle:{...s?{height:Bu}:{width:Bu}}},f))},ws=e=>I__namespace.default.createElement(ke,null,I__namespace.default.createElement(Ty,{...e}));ws.displayName="Preview";var Cy=y(e=>({notFound:{"& > div":{"& > b":{color:e.palette.error.main},"& > p":{margin:0},fontSize:14},border:`1px solid ${e.palette.error.main}`,marginBottom:2,marginTop:2,pointerEvents:"none",userSelect:"text"}}),{name:"ImageDiff"}),xs=e=>{let{imageDiff:t,onClick:o}=e,r=managerApi.useStorybookApi(),n=Cy(),{storyId:i}=t,s=i?r.getData(i):void 0,a=I.useCallback(()=>{i&&(o(),r.selectStory(i),r.setSelectedPanel(Ht));},[r,o,i]);return s?I__namespace.default.createElement(components.ListItem,{onClick:a,title:`${s.parent}--${s.name}`}):I__namespace.default.createElement(components.ListItem,{className:n.notFound,title:"Unable to locate story!"},I__namespace.default.createElement("div",null,I__namespace.default.createElement("b",null,"Unable to locate story!"),I__namespace.default.createElement("p",null,I__namespace.default.createElement("b",null,"ID:")," ",e.imageDiff.storyId),I__namespace.default.createElement("p",null,I__namespace.default.createElement("b",null,"File:")," ",e.imageDiff.filePath)))};xs.displayName="ImageDiffMenuItem";var Oy=y(e=>({button:{overflow:"visible !important"},imageDiffBadge:{"& span":{fontSize:".6rem",height:14,minWidth:15,padding:"0 4px"},position:"absolute",right:-2,top:5,zIndex:1},successIcon:{color:e.palette.primary.main,position:"absolute",right:-10,top:-4}}),{name:"ImageDiff"}),dn=e=>{let{target:t,storyData:o}=e,r=Oy({classes:e.classes}),{imageDiffResult:n}=Kc(),{testStoryScreenShots:i,imageDiffTestInProgress:s}=Rt(),a=t==="file"&&o?n.filter(m=>m.filePath?Mr(m.filePath,o.filePath):false):n,l=a.filter(m=>m.pass===false),c=l.length>0,p=I.useCallback(async()=>{if(c)return;Rr();let m=Date.now(),h=await i(t),S=Pr(Date.now()-m);if(!Array.isArray(h)){fc(`Screenshot diff failed after ${S}.`);return}h.find(x=>!x.pass)||uc(`All screenshot tests passed successfully in ${S}.`);},[c,t,i]),u=I.useCallback(()=>{t==="file"?a.forEach(m=>{m.screenshotId&&Wr(m.screenshotId);}):zt([]);},[a,t]),f=t==="file"&&o?`Run diff test for all stories in '${o.filePath}' file.`:"Run diff test for all stories",d=I__namespace.default.createElement(components.IconButton,{title:f,className:r.button,onClick:p,style:{position:"relative"},disabled:s},c&&I__namespace.default.createElement(material.Badge,{badgeContent:l.length,color:"secondary",className:r.imageDiffBadge,overlap:"rectangular"}),I__namespace.default.createElement(icons.ContrastIcon,null),I__namespace.default.createElement(E,{position:"absolute",open:s,progressSize:15}));return c?I__namespace.default.createElement(components.WithTooltip,{closeOnOutsideClick:true,placement:"bottom",trigger:"click",tooltip:({onHide:m})=>I__namespace.default.createElement("div",{style:{maxHeight:"60vh",overflowY:"auto"},onMouseDown:h=>h.stopPropagation()},I__namespace.default.createElement(components.ListItem,{title:"Clear results",onClick:()=>{u(),m();}}),l.filter((h,S,b)=>S===b.findIndex(x=>x.storyId===h.storyId)).map(h=>I__namespace.default.createElement(xs,{key:`${h.storyId||""}${h.screenshotId||""}`,imageDiff:h,onClick:m})))},d):d};dn.displayName="ImageDiff";var Ts=100;function Fu(){let e=managerApi.useStorybookApi(),t=A(),{addonState:o,setAddonState:r}=de();return ()=>{r({...o,placement:"auto",previewPanelEnabled:true,previewPanelSize:Ts}),e.emit(coreEvents.RESET_STORY_ARGS,{storyId:t?.id}),ct(),t?.id&&Bt(t.id);}}var mn=({target:e})=>{let t=`tool-${e}`,{runDiffTest:o,updateInf:r}=Ft(t,e),n=e=="file"?"Update current story file screenshots":"Update all screen shots";return I__namespace.default.createElement(components.IconButton,{title:n,onClick:o,style:{position:"relative"},disabled:!!r.inProgress},I__namespace.default.createElement(icons.RefreshIcon,null),I__namespace.default.createElement(E,{position:"absolute",open:r.reqBy===t&&!!r.inProgress,progressSize:15}))};mn.displayName="ScreenshotUpdateIcon";var jy=y(()=>({asterisk:{height:2,left:-6,margin:0,position:"relative",top:1,width:1},button:{position:"relative"},progress:{left:-3,pointerEvents:"none",position:"absolute",top:7,zIndex:1},placementArrow:{fill:"#8d9aa3 !important"}})),$y=()=>{let[e,t]=I.useState(false),[o,r]=I.useState(false),{setAddonState:n,addonState:i}=de(),s=A(),a=Fu(),l=jy(),c=i&&i.previewPanelEnabled,p=i?i.placement:"auto",u=()=>{t(true);},f=()=>{t(false);},d=I.useCallback(()=>{n({...i,previewPanelEnabled:!c});},[i,c,n]),m=I.useCallback(h=>{n({...i,placement:h,previewPanelSize:Ts});},[i,n]);return I__namespace.default.createElement(I__namespace.default.Fragment,null,I__namespace.default.createElement(components.Separator,null),I__namespace.default.createElement(components.WithTooltip,{placement:"bottom",trigger:"click",closeOnOutsideClick:true,tooltip:({onHide:h})=>I__namespace.default.createElement("div",{onMouseDown:S=>S.stopPropagation()},I__namespace.default.createElement(components.TooltipLinkList,{links:[{icon:i?.previewPanelEnabled?I__namespace.default.createElement(icons.EyeCloseIcon,null):I__namespace.default.createElement(icons.EyeIcon,null),id:"panel-toggle",onClick:()=>{d();},title:i?.previewPanelEnabled?"Hide Preview Panel":"Show Preview Panel"},{content:I__namespace.default.createElement(components.WithTooltip,{trigger:"click",placement:"right-start",closeOnOutsideClick:true,tooltip:()=>I__namespace.default.createElement("div",{onMouseDown:S=>S.stopPropagation()},I__namespace.default.createElement(components.TooltipLinkList,{links:[{icon:I__namespace.default.createElement(icons.SidebarAltIcon,null),id:"right",onClick:()=>{m("right");},title:"Right"},{icon:I__namespace.default.createElement(icons.BottomBarIcon,null),id:"bottom",onClick:()=>{m("bottom");},title:"Bottom"},{icon:I__namespace.default.createElement(icons.SyncIcon,null),id:"auto",onClick:()=>{m("auto");},title:"Auto"}]}))},I__namespace.default.createElement(components.ListItem,{title:"Preview Panel Placement",icon:p==="right"?I__namespace.default.createElement(icons.SidebarAltIcon,null):p==="bottom"?I__namespace.default.createElement(icons.BottomBarIcon,null):I__namespace.default.createElement(icons.SyncIcon,null),right:I__namespace.default.createElement(icons.ChevronRightIcon,{className:l.placementArrow})})),id:"position",title:"Position"},{icon:I__namespace.default.createElement(icons.ShareAltIcon,null),id:"full-screen",onClick:()=>{u(),h();},title:"Full screen view"},{icon:I__namespace.default.createElement(icons.WrenchIcon,null),id:"fix-screenshot-file-name",onClick:()=>{r(true),h();},title:"Fix screenshot file name"},{icon:I__namespace.default.createElement(icons.RefreshIcon,null),id:"reset",onClick:()=>{a(),h();},title:"Reset Settings"}]}))},I__namespace.default.createElement(components.IconButton,{"aria-label":"Open menu",title:"Open menu"},I__namespace.default.createElement(icons.BrowserIcon,null))),s&&I__namespace.default.createElement(I__namespace.default.Fragment,null,I__namespace.default.createElement(components.Separator,null),I__namespace.default.createElement(dn,{classes:{button:l.button},storyData:s,target:"all"}),I__namespace.default.createElement(mn,{target:"all"}),I__namespace.default.createElement("span",{className:l.asterisk},"*"),I__namespace.default.createElement(components.Separator,null),I__namespace.default.createElement(dn,{classes:{button:l.button},storyData:s,target:"file"}),I__namespace.default.createElement(mn,{target:"file"})),o&&I__namespace.default.createElement(Gt,{open:o,onClose:()=>r(false)}),e&&I__namespace.default.createElement(gs,{open:e,onClose:f}))},Cs=()=>I__namespace.default.createElement(ke,null,I__namespace.default.createElement($y,null));Cs.displayName="Tool";function Yy(e){if(e)return e.reduce((t,o)=>(t[o]=o,t),{})}function Jy(e,t){if(t!==void 0)return t;switch(e){case "boolean":return false;case "number":return "";case "options":return [];default:return ""}}function Gu(e){return ci(e)}var Qy=({onChange:e,knob:t})=>{let o=s=>{e(s);},r=s=>{let a=t.type==="boolean"?s.currentTarget.checked:t.type==="number"?Gu(s.currentTarget.value):s.currentTarget.value;e(a);},n=s=>{e(s.currentTarget.value);},i=s=>{let a=t.type==="number"?Gu(s.currentTarget.value):s.currentTarget.value;e(a);};if(t.type==="boolean")return I__namespace.default.createElement(go,{checked:!!t.value,onClick:()=>{},onChange:o});if(t.type==="number")return I__namespace.default.createElement(components.Form.Input,{onChange:r,type:"number",value:t.value});if(t.type==="select"&&Array.isArray(t.options))return I__namespace.default.createElement(components.Form.Select,{onChange:n,value:t.value},t.options.map(s=>I__namespace.default.createElement("option",{key:s,value:s},s)));if(t.type==="options"&&t.options&&typeof t.options=="object"){let s=t.options;return I__namespace.default.createElement(components.Form.Select,{onChange:n,value:t.value},Object.entries(s).map(([a,l])=>I__namespace.default.createElement("option",{key:a,value:l},a)))}return I__namespace.default.createElement(components.Form.Textarea,{onChange:i,value:t.value||""})};function Zy(e){return Qy}function gn(e){let{label:t,type:o,onChange:r,value:n,options:i,display:s}=e,[a,l]=I.useState(()=>({defaultValue:n,name:t,options:o==="select"?i:i?Yy(i):void 0,optionsObj:{display:s},type:o,value:Jy(o,n)})),c=Zy(),p=I.useCallback(u=>{l({...a,value:u}),r(u);},[a,r]);return {Control:c,handleChange:p,knob:a,setKnob:l}}function Uu(){let e=I__namespace.default.useRef(null),[t,o]=I__namespace.default.useState(),r=I__namespace.default.useCallback(i=>{o(e.current||i.currentTarget);},[]),n=I__namespace.default.useCallback(()=>{o(void 0);},[]);return {anchorEl:t,anchorElRef:e,clearAnchorEl:n,setAnchorEl:r}}function $u(e,t=false){let[o,r]=I.useState(false),n=I.useCallback(({key:s})=>{o||s===e&&r(true);},[o,e]),i=I.useCallback(({key:s})=>{s===e&&r(false);},[e]);return Ut(n,i,t),o}function cu(){let e=I.useRef(void 0);return e.current||(e.current=Pe()||void 0),I.useEffect(()=>()=>{e.current=void 0;},[]),e.current}function $t(){let e=oc(),t=I.useCallback(n=>{let{onData:i,onStop:s,selectorAttributeNames:a,type:l}=n;Ai({onData:i,onStop:s,selectorAttributeNames:a,start:true,type:l});},[]),o=I.useCallback(()=>{e.onStop&&e.onStop(),Ai({onData:void 0,onStop:void 0,start:false});},[e]),r=I.useCallback(n=>{e.onData&&e.onData(n);},[e]);return {selectorManager:e,setSelectorData:r,startSelector:t,stopSelector:o}}var Do=e=>{let{imgSrcString:t,diffDirection:o}=e,r=$u("Control"),n=I.useRef(),[i,s]=I.useState(false);return I.useEffect(()=>{n.current!==t&&s(true),n.current=t;},[t]),I__namespace.default.useEffect(()=>{i&&s(false);},[i]),!t||i?null:I__namespace.default.createElement(reactMapInteraction.MapInteraction,{defaultScale:1,disableZoom:!r},({translation:a,scale:l})=>{let c=`translate(${a.x}px, ${a.y}px) scale(${l})`;return I__namespace.default.createElement("div",{style:{MozUserSelect:"none",WebkitUserSelect:"none",cursor:"all-scroll",height:"100%",msTouchAction:"none",msUserSelect:"none",position:"relative",touchAction:"none",width:"100%"}},I__namespace.default.createElement("div",{style:{display:"inline-block",transform:c,transformOrigin:"0 0 "}},I__namespace.default.createElement("img",{style:{width:o==="horizontal"?"100%":void 0},src:t.startsWith("data:image")?t:`data:image/gif;base64,${t}`})))})};Do.displayName="ImagePreview";var p1=y(()=>({preview:{flexGrow:1,margin:5,overflow:"auto"},root:{display:"flex",flexFlow:"column",height:"100%",overflow:"hidden",position:"relative",width:"100%"}}),{name:"ImageDiffPreview"});var Mo=e=>{let{imageDiffResult:t,activeTab:o}=e,r=o==="imageDiff"||t.error!==void 0,[n,i]=I__namespace.default.useState(r?1:0),[s,a]=I__namespace.default.useState(r),l=p1(),p=(t.pass||!s?t.newScreenshot:t.imgSrcString)||"",u=Tt(t),f=I.useCallback((d,m)=>{i(m),a(!s);},[s]);return I__namespace.default.createElement("div",{className:l.root},!t.pass&&I__namespace.default.createElement(I__namespace.default.Fragment,null,I__namespace.default.createElement(material.Tabs,{textColor:"primary",value:n,variant:"fullWidth",onChange:f,indicatorColor:"primary"},I__namespace.default.createElement(material.Tab,{label:"New screen shot"}),I__namespace.default.createElement(material.Tab,{label:"Screenshot image diff"})),I__namespace.default.createElement(material.Divider,null)),u&&n===1&&I__namespace.default.createElement(material.Alert,{severity:"error"},u.split(`
16
+ `;let{body:b}=document;return document.head.appendChild(S),b.addEventListener("mouseup",h),()=>{b.style.cursor="inherit",b.removeEventListener("mouseup",h),document.head.removeChild(S);}},[]),I__namespace.default.createElement("div",{ref:l,className:Dr__default.default(a.overlay)},r&&u&&u.rect&&I__namespace.default.createElement(I__namespace.default.Fragment,null,I__namespace.default.createElement("div",{className:Dr__default.default(a.preview,"selector-preview"),style:p?{height:u.rect.height,left:u.rect.left,top:u.rect.top,width:u.rect.width}:ys}),I__namespace.default.createElement("div",{className:a.info},I__namespace.default.createElement("div",null,`X: ${d}`),I__namespace.default.createElement("div",null,`Y: ${m}`),I__namespace.default.createElement("div",null,u.selector))))};vs.displayName="SelectorOverlay";var bs=I.memo(e=>{let{children:t}=e,{selectorManager:o}=$t(),r=I.useRef(null),[n,i]=I.useState();I.useEffect(()=>{r.current&&i(r.current.querySelector("iframe")||void 0);},[]);let s=o&&o.start;return I__namespace.default.createElement("div",{ref:r,style:{height:"100%"}},t,s&&I__namespace.default.createElement(vs,{iframe:n}))});bs.displayName="Selector";var xy=y(()=>({horizontal:{"& $preview":{position:"relative"}},iframeContainer:{height:"100%",position:"relative"},interactive:{pointerEvents:"auto"},notInteractive:{pointerEvents:"none"},preview:{display:"flex",flexFlow:"column",height:"100%",position:"relative",width:"100%"},root:{height:"100%",position:"relative",width:"100%"},snapshotPanel:{"& > span":{display:"none"},height:"100%",width:"100%"},splitPane:{"&:hover":{backgroundColor:"rgb(2, 156, 253)",transition:"background-color 0.3s ease"},backgroundColor:"transparent"},vertical:{"& $preview":{position:"relative"}}}),{name:"Preview"}),Bu=3,Ty=e=>{let{children:t}=e,{addonState:o,setAddonState:r}=de(),n=managerApi.useStorybookState(),i=xy(),s=xu(o,n.layout.panelPosition),a=I.useCallback(d=>{r({...o,previewPanelSize:d});},[o,r]),l=I.useCallback(()=>{r({...o,previewPanelEnabled:false});},[o,r]);if(!o||!o.previewPanelEnabled)return I__namespace.default.createElement(I__namespace.default.Fragment,null,t);let c=0,p=I__namespace.default.createElement(reactSplitPane.Pane,{key:"preview",minSize:50,size:o&&o.previewPanelSize||"30%",className:Dr__default.default("preview-main",i.preview)},I__namespace.default.createElement("div",{className:i.iframeContainer},I__namespace.default.createElement(bs,null,t)),I__namespace.default.createElement(is,null),I__namespace.default.createElement(Ss,null)),u=I__namespace.default.createElement(reactSplitPane.Pane,{key:"screenshot",minSize:50,className:Dr__default.default(i.snapshotPanel)},I__namespace.default.createElement(components.Separator,null),o&&o.previewPanelEnabled&&I__namespace.default.createElement(Bo,{column:s?void 0:1,onClose:l,viewPanel:"main"})),f=[p,u];return I__namespace.default.createElement("div",{id:"preview-container",className:Dr__default.default(i.root)},I__namespace.default.createElement(reactSplitPane.SplitPane,{direction:s?"vertical":"horizontal",onResize:d=>a(d[c]),dividerClassName:Dr__default.default(i.splitPane),dividerStyle:{...s?{height:Bu}:{width:Bu}}},f))},ws=e=>I__namespace.default.createElement(ke,null,I__namespace.default.createElement(Ty,{...e}));ws.displayName="Preview";var Cy=y(e=>({notFound:{"& *":{color:e.palette.error.main}}}),{name:"ImageDiff"}),xs=e=>{let{imageDiff:t,onClick:o}=e,r=managerApi.useStorybookApi(),n=Cy(),{storyId:i}=t,s=i?r.getData(i):void 0,a=I.useCallback(()=>{i&&(o(),r.selectStory(i),r.setSelectedPanel(Ht));},[r,o,i]);return s?I__namespace.default.createElement(components.ListItem,{onClick:a,title:`${s.parent}--${s.name}`}):I__namespace.default.createElement(components.ListItem,{className:n.notFound,style:{color:"red"},title:I__namespace.default.createElement("span",{style:{display:"block"}},I__namespace.default.createElement("b",null,"Unable to locate story!"),I__namespace.default.createElement("span",{style:{display:"block"}},I__namespace.default.createElement("b",null,"ID:")," ",e.imageDiff.storyId),I__namespace.default.createElement("span",{style:{display:"block"}},I__namespace.default.createElement("b",null,"File:")," ",e.imageDiff.filePath))})};xs.displayName="ImageDiffMenuItem";var Oy=y(e=>({button:{overflow:"visible !important"},imageDiffBadge:{"& span":{fontSize:".6rem",height:14,minWidth:15,padding:"0 4px"},position:"absolute",right:-2,top:5,zIndex:1},successIcon:{color:e.palette.primary.main,position:"absolute",right:-10,top:-4}}),{name:"ImageDiff"}),dn=e=>{let{target:t,storyData:o}=e,r=Oy({classes:e.classes}),{imageDiffResult:n}=Kc(),{testStoryScreenShots:i,imageDiffTestInProgress:s}=Rt(),a=t==="file"&&o?n.filter(m=>m.filePath?Mr(m.filePath,o.filePath):false):n,l=a.filter(m=>m.pass===false),c=l.length>0,p=I.useCallback(async()=>{if(c)return;Rr();let m=Date.now(),h=await i(t),S=Pr(Date.now()-m);if(!Array.isArray(h)){fc(`Screenshot diff failed after ${S}.`);return}h.find(x=>!x.pass)||uc(`All screenshot tests passed successfully in ${S}.`);},[c,t,i]),u=I.useCallback(()=>{t==="file"?a.forEach(m=>{m.screenshotId&&Wr(m.screenshotId);}):zt([]);},[a,t]),f=t==="file"&&o?`Run diff test for all stories in '${o.filePath}' file.`:"Run diff test for all stories",d=I__namespace.default.createElement(components.IconButton,{title:f,className:r.button,onClick:p,style:{position:"relative"},disabled:s},c&&I__namespace.default.createElement(material.Badge,{badgeContent:l.length,color:"secondary",className:r.imageDiffBadge,overlap:"rectangular"}),I__namespace.default.createElement(icons.ContrastIcon,null),I__namespace.default.createElement(E,{position:"absolute",open:s,progressSize:15}));return c?I__namespace.default.createElement(components.WithTooltip,{closeOnOutsideClick:true,placement:"bottom",trigger:"click",tooltip:({onHide:m})=>I__namespace.default.createElement("div",{style:{maxHeight:"60vh",overflowY:"auto"},onMouseDown:h=>h.stopPropagation()},I__namespace.default.createElement(components.ListItem,{title:"Clear results",onClick:()=>{u(),m();}}),l.filter((h,S,b)=>S===b.findIndex(x=>x.storyId===h.storyId)).map(h=>I__namespace.default.createElement(xs,{key:`${h.storyId||""}${h.screenshotId||""}`,imageDiff:h,onClick:m})))},d):d};dn.displayName="ImageDiff";var Ts=100;function Fu(){let e=managerApi.useStorybookApi(),t=A(),{addonState:o,setAddonState:r}=de();return ()=>{r({...o,placement:"auto",previewPanelEnabled:true,previewPanelSize:Ts}),e.emit(coreEvents.RESET_STORY_ARGS,{storyId:t?.id}),ct(),t?.id&&Bt(t.id);}}var mn=({target:e})=>{let t=`tool-${e}`,{runDiffTest:o,updateInf:r}=Ft(t,e),n=e=="file"?"Update current story file screenshots":"Update all screen shots";return I__namespace.default.createElement(components.IconButton,{title:n,onClick:o,style:{position:"relative"},disabled:!!r.inProgress},I__namespace.default.createElement(icons.RefreshIcon,null),I__namespace.default.createElement(E,{position:"absolute",open:r.reqBy===t&&!!r.inProgress,progressSize:15}))};mn.displayName="ScreenshotUpdateIcon";var jy=y(()=>({asterisk:{height:2,left:-6,margin:0,position:"relative",top:1,width:1},button:{position:"relative"},progress:{left:-3,pointerEvents:"none",position:"absolute",top:7,zIndex:1},placementArrow:{fill:"#8d9aa3 !important"}})),$y=()=>{let[e,t]=I.useState(false),[o,r]=I.useState(false),{setAddonState:n,addonState:i}=de(),s=A(),a=Fu(),l=jy(),c=i&&i.previewPanelEnabled,p=i?i.placement:"auto",u=()=>{t(true);},f=()=>{t(false);},d=I.useCallback(()=>{n({...i,previewPanelEnabled:!c});},[i,c,n]),m=I.useCallback(h=>{n({...i,placement:h,previewPanelSize:Ts});},[i,n]);return I__namespace.default.createElement(I__namespace.default.Fragment,null,I__namespace.default.createElement(components.Separator,null),I__namespace.default.createElement(components.WithTooltip,{placement:"bottom",trigger:"click",closeOnOutsideClick:true,tooltip:({onHide:h})=>I__namespace.default.createElement("div",{onMouseDown:S=>S.stopPropagation()},I__namespace.default.createElement(components.TooltipLinkList,{links:[{icon:i?.previewPanelEnabled?I__namespace.default.createElement(icons.EyeCloseIcon,null):I__namespace.default.createElement(icons.EyeIcon,null),id:"panel-toggle",onClick:()=>{d();},title:i?.previewPanelEnabled?"Hide Preview Panel":"Show Preview Panel"},{content:I__namespace.default.createElement(components.WithTooltip,{trigger:"click",placement:"right-start",closeOnOutsideClick:true,tooltip:()=>I__namespace.default.createElement("div",{onMouseDown:S=>S.stopPropagation()},I__namespace.default.createElement(components.TooltipLinkList,{links:[{icon:I__namespace.default.createElement(icons.SidebarAltIcon,null),id:"right",onClick:()=>{m("right");},title:"Right"},{icon:I__namespace.default.createElement(icons.BottomBarIcon,null),id:"bottom",onClick:()=>{m("bottom");},title:"Bottom"},{icon:I__namespace.default.createElement(icons.SyncIcon,null),id:"auto",onClick:()=>{m("auto");},title:"Auto"}]}))},I__namespace.default.createElement(components.ListItem,{title:"Preview Panel Placement",icon:p==="right"?I__namespace.default.createElement(icons.SidebarAltIcon,null):p==="bottom"?I__namespace.default.createElement(icons.BottomBarIcon,null):I__namespace.default.createElement(icons.SyncIcon,null),right:I__namespace.default.createElement(icons.ChevronRightIcon,{className:l.placementArrow})})),id:"position",title:"Position"},{icon:I__namespace.default.createElement(icons.ShareAltIcon,null),id:"full-screen",onClick:()=>{u(),h();},title:"Full screen view"},{icon:I__namespace.default.createElement(icons.WrenchIcon,null),id:"fix-screenshot-file-name",onClick:()=>{r(true),h();},title:"Fix screenshot file name"},{icon:I__namespace.default.createElement(icons.RefreshIcon,null),id:"reset",onClick:()=>{a(),h();},title:"Reset Settings"}]}))},I__namespace.default.createElement(components.IconButton,{"aria-label":"Open menu",title:"Open menu"},I__namespace.default.createElement(icons.BrowserIcon,null))),s&&I__namespace.default.createElement(I__namespace.default.Fragment,null,I__namespace.default.createElement(components.Separator,null),I__namespace.default.createElement(dn,{classes:{button:l.button},storyData:s,target:"all"}),I__namespace.default.createElement(mn,{target:"all"}),I__namespace.default.createElement("span",{className:l.asterisk},"*"),I__namespace.default.createElement(components.Separator,null),I__namespace.default.createElement(dn,{classes:{button:l.button},storyData:s,target:"file"}),I__namespace.default.createElement(mn,{target:"file"})),o&&I__namespace.default.createElement(Gt,{open:o,onClose:()=>r(false)}),e&&I__namespace.default.createElement(gs,{open:e,onClose:f}))},Cs=()=>I__namespace.default.createElement(ke,null,I__namespace.default.createElement($y,null));Cs.displayName="Tool";function Yy(e){if(e)return e.reduce((t,o)=>(t[o]=o,t),{})}function Jy(e,t){if(t!==void 0)return t;switch(e){case "boolean":return false;case "number":return "";case "options":return [];default:return ""}}function Gu(e){return ci(e)}var Qy=({onChange:e,knob:t})=>{let o=s=>{e(s);},r=s=>{let a=t.type==="boolean"?s.currentTarget.checked:t.type==="number"?Gu(s.currentTarget.value):s.currentTarget.value;e(a);},n=s=>{e(s.currentTarget.value);},i=s=>{let a=t.type==="number"?Gu(s.currentTarget.value):s.currentTarget.value;e(a);};if(t.type==="boolean")return I__namespace.default.createElement(go,{checked:!!t.value,onClick:()=>{},onChange:o});if(t.type==="number")return I__namespace.default.createElement(components.Form.Input,{onChange:r,type:"number",value:t.value});if(t.type==="select"&&Array.isArray(t.options))return I__namespace.default.createElement(components.Form.Select,{onChange:n,value:t.value},t.options.map(s=>I__namespace.default.createElement("option",{key:s,value:s},s)));if(t.type==="options"&&t.options&&typeof t.options=="object"){let s=t.options;return I__namespace.default.createElement(components.Form.Select,{onChange:n,value:t.value},Object.entries(s).map(([a,l])=>I__namespace.default.createElement("option",{key:a,value:l},a)))}return I__namespace.default.createElement(components.Form.Textarea,{onChange:i,value:t.value||""})};function Zy(e){return Qy}function gn(e){let{label:t,type:o,onChange:r,value:n,options:i,display:s}=e,[a,l]=I.useState(()=>({defaultValue:n,name:t,options:o==="select"?i:i?Yy(i):void 0,optionsObj:{display:s},type:o,value:Jy(o,n)})),c=Zy(),p=I.useCallback(u=>{l({...a,value:u}),r(u);},[a,r]);return {Control:c,handleChange:p,knob:a,setKnob:l}}function Uu(){let e=I__namespace.default.useRef(null),[t,o]=I__namespace.default.useState(),r=I__namespace.default.useCallback(i=>{o(e.current||i.currentTarget);},[]),n=I__namespace.default.useCallback(()=>{o(void 0);},[]);return {anchorEl:t,anchorElRef:e,clearAnchorEl:n,setAnchorEl:r}}function $u(e,t=false){let[o,r]=I.useState(false),n=I.useCallback(({key:s})=>{o||s===e&&r(true);},[o,e]),i=I.useCallback(({key:s})=>{s===e&&r(false);},[e]);return Ut(n,i,t),o}function cu(){let e=I.useRef(void 0);return e.current||(e.current=Pe()||void 0),I.useEffect(()=>()=>{e.current=void 0;},[]),e.current}function $t(){let e=oc(),t=I.useCallback(n=>{let{onData:i,onStop:s,selectorAttributeNames:a,type:l}=n;Ai({onData:i,onStop:s,selectorAttributeNames:a,start:true,type:l});},[]),o=I.useCallback(()=>{e.onStop&&e.onStop(),Ai({onData:void 0,onStop:void 0,start:false});},[e]),r=I.useCallback(n=>{e.onData&&e.onData(n);},[e]);return {selectorManager:e,setSelectorData:r,startSelector:t,stopSelector:o}}var Do=e=>{let{imgSrcString:t,diffDirection:o}=e,r=$u("Control"),n=I.useRef(),[i,s]=I.useState(false);return I.useEffect(()=>{n.current!==t&&s(true),n.current=t;},[t]),I__namespace.default.useEffect(()=>{i&&s(false);},[i]),!t||i?null:I__namespace.default.createElement(reactMapInteraction.MapInteraction,{defaultScale:1,disableZoom:!r},({translation:a,scale:l})=>{let c=`translate(${a.x}px, ${a.y}px) scale(${l})`;return I__namespace.default.createElement("div",{style:{MozUserSelect:"none",WebkitUserSelect:"none",cursor:"all-scroll",height:"100%",msTouchAction:"none",msUserSelect:"none",position:"relative",touchAction:"none",width:"100%"}},I__namespace.default.createElement("div",{style:{display:"inline-block",transform:c,transformOrigin:"0 0 "}},I__namespace.default.createElement("img",{style:{width:o==="horizontal"?"100%":void 0},src:t.startsWith("data:image")?t:`data:image/gif;base64,${t}`})))})};Do.displayName="ImagePreview";var p1=y(()=>({preview:{flexGrow:1,margin:5,overflow:"auto"},root:{display:"flex",flexFlow:"column",height:"100%",overflow:"hidden",position:"relative",width:"100%"}}),{name:"ImageDiffPreview"});var Mo=e=>{let{imageDiffResult:t,activeTab:o}=e,r=o==="imageDiff"||t.error!==void 0,[n,i]=I__namespace.default.useState(r?1:0),[s,a]=I__namespace.default.useState(r),l=p1(),p=(t.pass||!s?t.newScreenshot:t.imgSrcString)||"",u=Tt(t),f=I.useCallback((d,m)=>{i(m),a(!s);},[s]);return I__namespace.default.createElement("div",{className:l.root},!t.pass&&I__namespace.default.createElement(I__namespace.default.Fragment,null,I__namespace.default.createElement(material.Tabs,{textColor:"primary",value:n,variant:"fullWidth",onChange:f,indicatorColor:"primary"},I__namespace.default.createElement(material.Tab,{label:"New screen shot"}),I__namespace.default.createElement(material.Tab,{label:"Screenshot image diff"})),I__namespace.default.createElement(material.Divider,null)),u&&n===1&&I__namespace.default.createElement(material.Alert,{severity:"error"},u.split(`
17
17
  `).map((d,m)=>I__namespace.default.createElement("div",{key:m},d))),I__namespace.default.createElement("div",{className:l.preview},I__namespace.default.createElement(Do,{imgSrcString:p,diffDirection:t.diffDirection})))};Mo.displayName="ImageDiffPreview";var ut=e=>{let{imageDiffResult:t,activeTab:o,...r}=e;return I__namespace.default.createElement(ve,{width:"100%",height:"100%",...r},I__namespace.default.createElement(Mo,{imageDiffResult:t,activeTab:o}))};ut.displayName="ImageDiffPreviewDialog";var Yu=e=>{let{title:t,result:o,onClose:r,browserType:n,...i}=e,s=t||o&&o.oldScreenShotTitle;return I__namespace.default.useEffect(()=>{o&&o.added&&v.success(`Screenshot ${`${n?` for '${n}'`:""}`} saved successfully.`,{duration:5e3,onAutoClose:r,onDismiss:r});},[n,r,o]),I__namespace.default.useEffect(()=>{if(o){if(o.pass){v.success(`Testing existing screenshot were successful, no change has been detected.${s?`
18
18
  Title: ${s}`:""}${n?`
19
19
  Browser: ${n}`:""}`,{duration:5e3,onAutoClose:r,onDismiss:r});return}(o.diffSize||o.error)&&v.error(Tt(o),{duration:1/0,onDismiss:r});}},[n,r,o,s]),!o||o.pass||o.added||o.diffSize||o.error?null:I__namespace.default.createElement(ut,{imageDiffResult:o,onClose:r,open:true,activeTab:"imageDiff",title:s,...i})};Yu.displayName="ImageDiffMessage";var Zc=I__namespace.default.memo(Yu);var g1=kl(),Ju=new reactQuery$1.QueryClient({defaultOptions:{mutations:{retry:false},queries:{retry:false}}}),ke=e=>{let{children:t}=e;return I__namespace.default.createElement(T.Provider,{client:g1,queryClient:Ju},I__namespace.default.createElement(reactQuery$1.QueryClientProvider,{client:Ju},I__namespace.default.createElement(mo,null,I__namespace.default.createElement(fi__default.default.Provider,null,I__namespace.default.createElement(reinspect.StateInspector,null,t)))))};ke.displayName="CommonProvider";var x1=D(S1__default.default),T1=D(y1__default.default),A1=D(v1__default.default),P1=y(e=>({active:{color:e.palette.primary.main},controlWrap:{flex:2},iconWrapper:{marginBottom:-2,marginRight:-8,paddingLeft:4,width:14,"& svg":{width:14,height:14}},icons:{"&:hover":{opacity:.8},cursor:"pointer",opacity:.4},labelWrap:{alignItems:"center",display:"flex",flex:1,justifyContent:"space-between"},root:{"& fieldset > div":{"&>div":{margin:0,marginRight:10}},'& input[type="number"], select,textarea':{transition:"none",width:"100%"},"& label":{border:"none !important",margin:"0 !important"},alignItems:"center",display:"flex",justifyContent:"space-between",marginBottom:4}}),{name:"FormControl"}),_o=I.memo(e=>{let{label:t,description:o,appendValueToTitle:r,onAppendValueToTitle:n,children:i,isRequired:s,active:a}=e,l=P1();return I__namespace.default.createElement("div",{className:l.root},I__namespace.default.createElement("div",{className:Dr__default.default(l.labelWrap,{[l.active]:a})},I__namespace.default.createElement("span",{className:"form-label"},Ar(t),s&&I__namespace.default.createElement("span",{style:{marginLeft:2}},"*"))),I__namespace.default.createElement("div",{className:l.controlWrap},i),I__namespace.default.createElement("div",{className:l.iconWrapper},I__namespace.default.createElement("div",null,o&&I__namespace.default.createElement(material.Tooltip,{placement:"top",disableInteractive:false,enterDelay:800,title:o},I__namespace.default.createElement(T1,{className:l.icons}))),n&&I__namespace.default.createElement("div",{onClick:n},I__namespace.default.createElement(material.Tooltip,{placement:"top",enterDelay:800,title:"Append value to title"},r?I__namespace.default.createElement(x1,{style:{opacity:1},className:l.icons}):I__namespace.default.createElement(A1,{className:l.icons})))))});_o.displayName="FormControl";var ht=I.memo(e=>{let{label:t,description:o,appendValueToTitle:r,onAppendValueToTitle:n,isRequired:i,value:s,defaultValue:a}=e,{Control:l,handleChange:c,knob:p}=gn(e);return I__namespace.default.createElement(_o,{label:t,appendValueToTitle:r,onAppendValueToTitle:n,description:o,isRequired:i,active:a!==s&&s!==void 0&&s!==""&&s!==false},I__namespace.default.createElement(l,{onChange:c,knob:p}))});ht.displayName="Control";var D1=["id"],rp=D(M1__default.default),E1=D(I1__default.default),O1=y(e=>({button:{color:e.palette.text.primary,"& svg":{height:20,width:20}},buttonWrap:{alignItems:"center",display:"flex",zIndex:1},error:{"& textarea":{border:"1px solid red"}},errorMessage:{color:"red"},root:{alignItems:"center",display:"flex"},selectorButtonWrap:{alignItems:"center",backgroundColor:e.palette.background.paper,display:"flex",flexDirection:"column"},selectorHashIcon:{"&:before":{backgroundColor:e.palette.background.paper,content:'"#"',fontSize:"12px",left:"6px",position:"absolute",top:"3px"},height:20,position:"relative"},selectorIcon:{fontSize:"1.25rem"}}),{name:"SelectorControl"}),Ds=I.memo(e=>{let{selectorType:t,label:o,appendValueToTitle:r,onAppendValueToTitle:n,description:i,value:s,isFollowedByPositionProp:a,fullObjectPath:l,isRequired:c,onSelectorChange:p}=e,[u,f]=I.useState(false),d=O1(),[m,h]=I.useState(false),{startSelector:S}=$t(),{data:b}=T.schema.getClientConfig.useQuery(),{Control:x,knob:O,handleChange:w,setKnob:C}=gn(e),M=I.useCallback(W=>{f(false),S({onData:le=>{if(W==="selector"||W==="id-selector")p(l,le.path);else if(a){let Oe=l.length===1?"":`${l.slice(0,-2)}.`;p(`${Oe}x`,Math.round(le.x??0)),p(`${Oe}y`,Math.round(le.y??0));}else w(le[o==="top"?"y":o==="left"?"x":o]);},selectorAttributeNames:b?.selectorAttributeNames??D1,type:W});},[S,a,p,l,o,w,b?.selectorAttributeNames]),N=I__namespace.default.useCallback(()=>{M(t);},[t,M]),z=I__namespace.default.useCallback(()=>{M("id-selector");},[M]);I.useEffect(()=>{if(u&&t!=="selector"){h(false);return}h(!vl(s));},[t,u,s]),I.useEffect(()=>{O.defaultValue!==s&&(w(s),C({...O,defaultValue:s,value:s}));},[w,O,C,s]);let H=I.useCallback(W=>{f(true),w(W);},[w]),Se=I.useCallback(W=>f(W.target.tagName==="TEXTAREA"),[]),ee=t==="selector",ye=t==="position"&&o==="y",Ae=t==="position"&&o==="x";return I__namespace.default.createElement(_o,{label:o,appendValueToTitle:r,onAppendValueToTitle:n,description:i,isRequired:c},I__namespace.default.createElement("div",{className:Dr__default.default("selector-root",d.root,{[d.error]:m&&u}),onBlur:Se},I__namespace.default.createElement(x,{onChange:H,knob:O}),I__namespace.default.createElement("div",{className:Dr__default.default({[d.buttonWrap]:a,[d.selectorButtonWrap]:ee})},I__namespace.default.createElement(material.IconButton,{size:"small",onClick:N,className:d.button,title:ee?"Select element on the page to get its selector path":"Select element on the page to get its position relative to the viewport",style:{visibility:ye?"hidden":void 0,...Ae&&{position:"relative",bottom:-20}}},ee?I__namespace.default.createElement(rp,{className:d.selectorIcon}):I__namespace.default.createElement(E1,null)),ee&&I__namespace.default.createElement(material.IconButton,{size:"small",onClick:z,className:d.button,title:"Select element by ID or attributes set on selectorAttributeNames in config"},I__namespace.default.createElement("div",{className:d.selectorHashIcon},I__namespace.default.createElement(rp,{className:d.selectorIcon}))))),m&&u&&I__namespace.default.createElement("div",{className:Dr__default.default("selector-error",d.errorMessage)},"Invalid Selector!"))});Ds.displayName="SelectorControl";var L1=[],ip=({name:e,schema:t,parents:o=L1,nextPropName:r,isRequired:n,onChange:i,getValue:s,shouldAppendToTitle:a,onAppendValueToTitle:l,onSelectorChange:c})=>{let p=[...o,e].join("."),u=I.useCallback(S=>{let b=(t.type==="number"||t.type==="integer")&&S===""?void 0:S;i(p,b);},[i,p,t.type]),f=t.type!=="object"&&s(p,t),m=!!(a&&a(p)),h=I.useCallback(()=>{l&&l(p);},[l,p]);if(c&&(e==="selector"||t.type==="number"&&["x","y","top","left"].includes(e)))return I__namespace.default.createElement(Ds,{label:e,type:e==="selector"?"text":"number",onChange:u,selectorType:e==="selector"?"selector":"position",value:f,description:t.description,onAppendValueToTitle:h,appendValueToTitle:m,isFollowedByPositionProp:r==="x"||r==="y",fullObjectPath:p,isRequired:!!n,onSelectorChange:c,defaultValue:t.default});if(t.enum)return I__namespace.default.createElement(ht,{label:e,type:"select",onChange:u,options:t.enum,value:f,description:t.description,onAppendValueToTitle:h,appendValueToTitle:m,isRequired:!!n,defaultValue:t.default});switch(t.type){case "string":case "any":return I__namespace.default.createElement(ht,{label:e,type:"text",onChange:u,value:f,description:t.description,onAppendValueToTitle:h,appendValueToTitle:m,isRequired:!!n,defaultValue:t.default});case "number":case "integer":return I__namespace.default.createElement(ht,{label:e,type:"number",onChange:u,value:f,description:t.description,onAppendValueToTitle:h,appendValueToTitle:m,isRequired:!!n,defaultValue:t.default});case "boolean":return I__namespace.default.createElement(ht,{label:e,type:"boolean",onChange:u,value:f,description:t.description,onAppendValueToTitle:h,appendValueToTitle:m,isRequired:!!n,defaultValue:t.default});case "array":{if(!t.items)return null;let S=t.items.enum;return S?I__namespace.default.createElement(ht,{label:e,type:"options",onChange:u,display:"inline-check",options:S,value:f,description:t.description,onAppendValueToTitle:h,appendValueToTitle:m,isRequired:!!n,defaultValue:t.default}):null}case "object":return I__namespace.default.createElement("div",{style:{marginBottom:6}},I__namespace.default.createElement("p",{style:{margin:"6px 0",marginTop:14}},material.capitalize(N1__default.default(e).toLowerCase()),":"),I__namespace.default.createElement("div",{style:{paddingLeft:12}},I__namespace.default.createElement(vn,{schemaProps:t.properties||{},parents:[...o,e],required:t.required,onChange:i,getValue:s,shouldAppendToTitle:a,onAppendValueToTitle:l,onSelectorChange:c})));default:return null}};ip.displayName="SchemaProp";var sp=I__namespace.default.memo(ip);var vn=({schemaProps:e,required:t,parents:o=[],onChange:r,getValue:n,shouldAppendToTitle:i,onAppendValueToTitle:s,onSelectorChange:a})=>I__namespace.default.createElement(I__namespace.default.Fragment,null,Object.keys(e).map((l,c,p)=>{let u=e[l];return I__namespace.default.createElement(sp,{key:l,name:l,schema:u,parents:o,nextPropName:p[c+1],isRequired:t&&t.includes(l),onChange:r,getValue:n,shouldAppendToTitle:i,onAppendValueToTitle:s,onSelectorChange:a})}));vn.displayName="SchemaRenderer";var wn=I__namespace.default.memo(vn);var z1=y(()=>({footer:{display:"flex",justifyContent:"space-between",paddingTop:2},main:{fontSize:14,height:400,overflowX:"hidden",overflowY:"auto",padding:5,paddingRight:20}}),{name:"SchemaFormLoader"}),up=({defaultData:e,onSave:t,FooterComponent:o,schemaName:r})=>{let n=z1(),[i,s]=I.useState(e),[a,l]=I.useState(false),c=I.useRef(),{mutate:p,data:u}=T.schema.getSchema.useMutation();I.useEffect(()=>{c.current!==r&&(c.current=r,p({schemaName:r}));},[p,r]);let f=I.useCallback(()=>{t(i);},[t,i]),d=I.useCallback(()=>{t({}),s({}),l(true);},[t]),m=I.useCallback((S,b)=>{let x=xn__namespace.set(i,S,b);s(x);},[i]),h=S=>xn__namespace.get(i,S);return I.useEffect(()=>{a&&l(false);},[a]),I__namespace.default.createElement(I__namespace.default.Fragment,null,I__namespace.default.createElement("div",{className:n.main},I__namespace.default.createElement(E,{open:u===void 0,position:"relative"}),u&&!a&&I__namespace.default.createElement(wn,{schemaProps:u,onChange:m,getValue:h})),I__namespace.default.createElement(material.Divider,null),I__namespace.default.createElement("div",{className:n.footer},I__namespace.default.createElement("div",null,o),I__namespace.default.createElement("div",null,I__namespace.default.createElement(material.Button,{onClick:d},"Clear"),I__namespace.default.createElement(material.Button,{onClick:f},"Save"))))};up.displayName="SchemaFormLoader";var en=I__namespace.default.memo(up);var Gt=({fixFunction:e,onClose:t,open:o})=>{let{fixFileNames:r,clearError:n,fixFileNamesError:i,fixFileNamesInProgress:s,handleReload:a,reload:l,functionName:c,handleFunctionNameInput:p}=zc({fixFunction:e}),u=I__namespace.default.useCallback(()=>{n(),t(false);},[t,n]);return I__namespace.default.createElement(I__namespace.default.Fragment,null,I__namespace.default.createElement(ve,{open:o,onClose:u,title:"Fix Screenshot File Name",width:"400px"},I__namespace.default.createElement(E,{open:s}),I__namespace.default.createElement("div",{style:{padding:20,width:"100%"}},l&&!i?I__namespace.default.createElement("p",null,"Fix applied, reload the page"):I__namespace.default.createElement(I__namespace.default.Fragment,null,I__namespace.default.createElement("p",null,"Screenshot file name consist of the story title and story function name, when the title or function name changes, plugin is no longer able to detect the screenshots, hence it wont list the screenshots in the panel."),I__namespace.default.createElement("p",null,"This utility will apply changes to the screenshot file name and playwright config file.")),e&&I__namespace.default.createElement(material.TextField,{label:"Enter previous name export function",variant:"outlined",onChange:p,value:c,fullWidth:true,focused:true,required:true}),i&&I__namespace.default.createElement("p",{style:{color:"red"}},i)),I__namespace.default.createElement(material.DialogActions,null,I__namespace.default.createElement(I__namespace.default.Fragment,null,l?I__namespace.default.createElement(material.Button,{onClick:a,color:"primary"},"Reload Page"):I__namespace.default.createElement(I__namespace.default.Fragment,null,I__namespace.default.createElement(material.Button,{onClick:u,color:"primary"},"Cancel"),I__namespace.default.createElement(material.Button,{onClick:r,color:"primary",autoFocus:true},"Apply Fix"))))))};Gt.displayName="FixScreenshotFileDialog";I__namespace.default.memo(Gt);var K1=120,W1=12,G1="50vh",U1=(e,t)=>typeof e=="function"?e(t):e,j1=({children:e,className:t,minVisibleHeight:o,style:r,viewportBottomOffset:n})=>{let i=I__namespace.default.useRef(null),s=I__namespace.default.useCallback(()=>{if(!i.current)return;let a=i.current.getBoundingClientRect().top,l=Math.floor(window.innerHeight-a-n),c=Math.max(o,l);i.current.style.maxHeight=`${c}px`;},[o,n]);return I__namespace.default.useEffect(()=>{s();let a=window.requestAnimationFrame(s);return window.addEventListener("resize",s),window.addEventListener("scroll",s,true),()=>{window.cancelAnimationFrame(a),window.removeEventListener("resize",s),window.removeEventListener("scroll",s,true);}},[e,s]),I__namespace.default.createElement("div",{ref:i,className:t,style:{...r,maxHeight:r?.maxHeight??G1,overflowY:r?.overflowY??"auto"},onMouseDown:a=>a.stopPropagation()},e)},Bs=({minVisibleHeight:e=K1,tooltip:t,tooltipClassName:o,tooltipStyle:r,viewportBottomOffset:n=W1,...i})=>{let s=I__namespace.default.useCallback(a=>I__namespace.default.createElement(j1,{className:o,minVisibleHeight:e,style:r,viewportBottomOffset:n},U1(t,a)),[e,t,o,r,n]);return I__namespace.default.createElement(components.WithTooltip,{...i,tooltip:s})};Bs.displayName="AutoHeightWithTooltip";function Tn(e,t,o){return e&&e.args?xn__namespace.get(e.args,t):o?o.default:void 0}var Ns=e=>{let{schema:t,actionId:o,actionSetId:r}=e,i=A()?.id,s=zr(i||"",o),a=I.useCallback((f,d)=>{i&&xi({actionId:o,actionSetId:r,objPath:f,storyId:i,val:d});},[o,r,i]),l=I.useCallback((f,d)=>s?Tn(s,f,d):void 0,[s]),c=I.useCallback(f=>{if(!(!s||!s.subtitleItems))return s.subtitleItems.includes(f)},[s]),p=I.useCallback(f=>{i&&jl({actionId:o,actionOptionPath:f,actionSetId:r,storyId:i});},[o,r,i]),u=I.useCallback((f,d)=>{i&&xi({actionId:o,actionSetId:r,objPath:f,storyId:i,val:d});},[o,r,i]);return s?I__namespace.default.createElement("div",null,I__namespace.default.createElement(wn,{schemaProps:t.parameters,required:t.required,onChange:a,getValue:l,shouldAppendToTitle:c,onAppendValueToTitle:p,onSelectorChange:u})):null};Ns.displayName="ActionSchemaRenderer";var rv=y(e=>{let{divider:t}=e.palette;return {chip:{color:e.palette.text.primary,height:20,maxWidth:150},detailPanel:{display:"block"},expanded:{transform:"rotate(0deg) !important"},expansionPanel:{border:`1px solid ${t}`,boxShadow:"none"},heading:{alignItems:"center",display:"flex",fontWeight:e.typography.fontWeightRegular,marginRight:10},icon:{fontSize:20},root:{padding:4,width:"100%"},subtitleWrap:{width:"100%"},summary:{alignItems:"center",justifyContent:"space-between"},summaryInner:{display:"flex"}}},{name:"ActionOptions"}),Ls=I.memo(e=>{let{actionId:t,actionName:o,DragHandle:r,actionSetId:n,dragHandleProps:i}=e,[s,a]=I.useState(),c=A()?.id,p=pe(),u=zr(c||"",t),f=fo(p.actionSchema,o),d=rv(),m=I.useCallback(()=>{Nt(t);},[t]);I.useEffect(()=>{if(!u||!u.subtitleItems)return;let b=u.subtitleItems.reduce((x,O)=>{let w=O.split(".").pop(),C=Tn(u,O);return C&&x.push(`${w}: ${C}`),x},[]);a(b);},[u,o]);let h=I.useCallback(b=>{b.preventDefault(),b.stopPropagation(),c&&ql({actionId:t,actionSetId:n,storyId:c});},[t,n,c]),S=f&&f.parameters&&Object.keys(f.parameters).length!==0;return I__namespace.default.createElement("div",{className:d.root},I__namespace.default.createElement(Y1__default.default,{expanded:p.expandedActions&&p.expandedActions[t]===true&&S,onChange:m,className:d.expansionPanel,square:true,slotProps:{transition:{timeout:100}}},I__namespace.default.createElement(J1__default.default,{"aria-controls":"panel1a-content",id:"panel1a-header",classes:{content:d.summary,expanded:d.expanded}},I__namespace.default.createElement("div",{className:d.summaryInner},I__namespace.default.createElement(r,{...i}),I__namespace.default.createElement("div",{className:d.heading},Ar(f&&f.title?f.title:o)),I__namespace.default.createElement("div",{className:d.subtitleWrap},s&&s.map(b=>I__namespace.default.createElement(material.Chip,{className:d.chip,key:b,size:"small",label:b,variant:"outlined",title:b})))),I__namespace.default.createElement("div",null,I__namespace.default.createElement(material.Tooltip,{title:f&&f.description?f.description:"Not Available!"},I__namespace.default.createElement(components.IconButton,null,I__namespace.default.createElement(icons.QuestionIcon,{className:d.icon}))),I__namespace.default.createElement(components.IconButton,{onClick:h},I__namespace.default.createElement(icons.TrashIcon,{className:d.icon})))),I__namespace.default.createElement(material.AccordionDetails,{className:d.detailPanel},p.expandedActions&&p.expandedActions[t]&&S&&I__namespace.default.createElement(Ns,{schema:f,actionId:t,actionSetId:n}))))});Ls.displayName="ActionOptions";var Sv=y(e=>{let{palette:{text:t}}=e;return {noActionMessage:{color:t.primary,margin:20,textAlign:"center"}}},{name:"ActionSetList"}),yv=({action:e,actionSetId:t,sortableId:o})=>{let{attributes:r,listeners:n,setActivatorNodeRef:i,setNodeRef:s,transform:a,transition:l,isDragging:c}=sortable.useSortable({id:o});return I__namespace.default.createElement("div",{ref:s,style:{opacity:c?.8:1,transform:utilities.CSS.Transform.toString(a),transition:l}},I__namespace.default.createElement(Ls,{key:e.id,actionName:e.name,actionId:e.id,DragHandle:ho,actionSetId:t,dragHandleProps:{...r,...n,setNodeRef:i}}))},vv=({items:e,actionSetId:t,onSortEnd:o})=>{let[r,n]=I.useState(e);I.useEffect(()=>{n(e);},[e]);let i=core.useSensors(core.useSensor(core.PointerSensor),core.useSensor(core.KeyboardSensor,{coordinateGetter:sortable.sortableKeyboardCoordinates})),s=I.useCallback(({active:c,over:p})=>{!p||c.id===p.id||n(u=>{let f=u.findIndex(m=>m.id===c.id),d=u.findIndex(m=>m.id===p.id);return f<0||d<0?u:sortable.arrayMove(u,f,d)});},[]),a=I.useCallback(()=>{n(e);},[e]),l=I.useCallback(({active:c})=>{let p=e.findIndex(f=>f.id===c.id),u=r.findIndex(f=>f.id===c.id);if(p<0||u<0||p===u||!o){n(e);return}o({newIndex:u,oldIndex:p});},[e,r,o]);return I__namespace.default.createElement(core.DndContext,{sensors:i,collisionDetection:core.closestCenter,onDragOver:s,onDragCancel:a,onDragEnd:l},I__namespace.default.createElement(sortable.SortableContext,{items:r.map(c=>c.id),strategy:sortable.verticalListSortingStrategy},I__namespace.default.createElement("div",null,r.map(c=>I__namespace.default.createElement(yv,{key:`item-${c.id}`,action:c,actionSetId:t,sortableId:c.id})))))},Fs=({actionSet:e})=>{let t=Sv(),o=A(),r=I.useCallback(n=>{o&&$l({actionSetId:e.id,newIndex:n.newIndex,oldIndex:n.oldIndex,storyId:o.id});},[e.id,o]);return !e||!e.actions.length?I__namespace.default.createElement("div",{className:t.noActionMessage},I__namespace.default.createElement("div",null,"Click the '+' button to create an action.")):I__namespace.default.createElement(Dt,null,I__namespace.default.createElement(vv,{items:e.actions,onSortEnd:r,actionSetId:e.id}))};Fs.displayName="ActionList";var _s=I.memo(I.forwardRef((e,t)=>{let{onChange:o,label:r,name:n}=e,i=I.useCallback(()=>{o(n);},[n,o]);return I__namespace.default.createElement(material.MenuItem,{ref:t,onClick:i},r)}));_s.displayName="ActionMenuItem";var zs=(e,t=[])=>{let o=Object.keys(e),r=[];return o.forEach(n=>{let i=e[n];if(i.type==="object"){let s=zs(i.properties,[...t,n]);r=[...r,...s];}else {let s=[...t,n];r.push({label:s.join("."),name:s.join(".")});}}),r.sort((n,i)=>n.name<i.name?-1:n.name>i.name?1:0)};var gp=(e,t)=>e.reduce((o,r)=>{let n=r.visibleTo||"*";return (n==="*"||new RegExp(n).test(t))&&o.push(r),o},[]);var kv=y(()=>({menu:{minWidth:100}}),{name:"ActionMenu"}),Ro=I.memo(e=>{let{onChange:t,onClose:o,anchorEl:r}=e,n=pe(),[i,s]=I.useState([]),a=kv();I__namespace.default.useEffect(()=>{if(!n.actionSchema)return;let c=zs(n.actionSchema);s(c);},[n.actionSchema]);let l=I.useCallback(c=>{t(c);},[t]);return I__namespace.default.createElement(material.Menu,{id:"simple-menu",anchorEl:r,keepMounted:true,open:!!r,onClose:o,className:a.menu},i.map(c=>I__namespace.default.createElement(_s,{key:c.name,name:c.name,label:c.label,onChange:l},"Profile")))});Ro.displayName="ActionMenu";var Vs=e=>{let{onSave:t,onEditTitle:o,onCancel:r,onAddAction:n}=e,{loading:i}=Lt(),[s,a]=I__namespace.default.useState(null),l=I.useCallback(u=>{a(u.currentTarget);},[]),c=I.useCallback(()=>{a(null);},[]),p=I.useCallback(u=>{n(u),a(null);},[n]);return I__namespace.default.createElement(I__namespace.default.Fragment,null,I__namespace.default.createElement(E,{open:i}),I__namespace.default.createElement(components.IconButton,{size:"small",className:"edit-desc",onClick:o,title:"Edit Title"},I__namespace.default.createElement(icons.EditIcon,null)),I__namespace.default.createElement(components.IconButton,{size:"small",className:"open-action-menu",onClick:l,title:"Add Actions"},I__namespace.default.createElement(icons.PlusIcon,null)),I__namespace.default.createElement(components.IconButton,{size:"small",className:"save-action",title:"Save Actions",onClick:t},I__namespace.default.createElement(icons.SaveIcon,null)),I__namespace.default.createElement(components.IconButton,{size:"small",className:"Cancel",title:"Cancel",onClick:r},I__namespace.default.createElement(icons.CrossIcon,null)),I__namespace.default.createElement(Ro,{onClose:c,anchorEl:s,onChange:p}))};Vs.displayName="ActionSetEditorIcons";var Fv=y(e=>{let{palette:{secondary:t}}=e;return {divider:{backgroundColor:t.main},root:{height:"100%"}}},{name:"ActionSetEditor"}),Ks=({actionSet:e,dragHandleProps:t})=>{let{handleAddAction:o,handleDescriptionChange:r,handleSave:n,cancelEditActionSet:i}=sc(e),s=Fv(),{loading:a}=Lt(),l=I.useCallback(()=>{It.show({onSave:r,title:"Edit Description",value:e.title});},[e.title,r]);return I__namespace.default.createElement(it,{tooltip:e.temp?e.title+jr:e.title,title:e.temp?`${e.title} *`:e.title,draggable:true,dragHandleProps:t,selected:true,secondaryColor:true,icons:I__namespace.default.createElement(Vs,{onAddAction:o,onCancel:i,onEditTitle:l,onSave:n})},I__namespace.default.createElement("div",{className:s.root},I__namespace.default.createElement(material.Divider,{className:s.divider}),I__namespace.default.createElement(Fs,{actionSet:e}),I__namespace.default.createElement(E,{open:a})))};Ks.displayName="ActionSetEditor";var Ws=e=>{let{item:t}=e,{anchorEl:o,setAnchorEl:r,clearAnchorEl:n}=Uu(),[i,s]=I__namespace.default.useState("*"),[a,l]=I__namespace.default.useState("*"),c=A(),{mutateAsync:p}=T.favouriteActions.addFavouriteAction.useMutation(),{parent:u="parent"}=c||{},f=I__namespace.default.useCallback(async()=>{t.visibleTo=i,n();try{await p(t),v.success("Successfully added action to favourites",{duration:5e3});}catch(m){v.error(`An error has occurred: