@storybook/addon-interactions 7.2.3 → 7.3.0

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 (3) hide show
  1. package/dist/manager.js +2 -2
  2. package/dist/manager.mjs +3 -2
  3. package/package.json +10 -10
package/dist/manager.js CHANGED
@@ -1,4 +1,4 @@
1
- var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __getProtoOf=Object.getPrototypeOf,__hasOwnProp=Object.prototype.hasOwnProperty;var __commonJS=(cb,mod)=>function(){return mod||(0,cb[__getOwnPropNames(cb)[0]])((mod={exports:{}}).exports,mod),mod.exports};var __copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toESM=(mod,isNodeMode,target)=>(target=mod!=null?__create(__getProtoOf(mod)):{},__copyProps(isNodeMode||!mod||!mod.__esModule?__defProp(target,"default",{value:mod,enumerable:!0}):target,mod));var require_extends=__commonJS({"../../node_modules/@devtools-ds/object-inspector/node_modules/@babel/runtime/helpers/extends.js"(exports,module2){function _extends5(){return module2.exports=_extends5=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends5.apply(this,arguments)}module2.exports=_extends5}});var require_objectWithoutPropertiesLoose=__commonJS({"../../node_modules/@devtools-ds/object-inspector/node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js"(exports,module2){function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return{};var target={},sourceKeys=Object.keys(source),key,i;for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],!(excluded.indexOf(key)>=0)&&(target[key]=source[key]);return target}module2.exports=_objectWithoutPropertiesLoose}});var require_objectWithoutProperties=__commonJS({"../../node_modules/@devtools-ds/object-inspector/node_modules/@babel/runtime/helpers/objectWithoutProperties.js"(exports,module2){var objectWithoutPropertiesLoose=require_objectWithoutPropertiesLoose();function _objectWithoutProperties6(source,excluded){if(source==null)return{};var target=objectWithoutPropertiesLoose(source,excluded),key,i;if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],!(excluded.indexOf(key)>=0)&&Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}module2.exports=_objectWithoutProperties6}});var require_defineProperty=__commonJS({"../../node_modules/@devtools-ds/themes/node_modules/@babel/runtime/helpers/defineProperty.js"(exports,module2){function _defineProperty(obj,key,value){return key in obj?Object.defineProperty(obj,key,{value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}module2.exports=_defineProperty}});var require_objectSpread2=__commonJS({"../../node_modules/@devtools-ds/themes/node_modules/@babel/runtime/helpers/objectSpread2.js"(exports,module2){var defineProperty=require_defineProperty();function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable})),keys.push.apply(keys,symbols)}return keys}function _objectSpread22(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};i%2?ownKeys(source,!0).forEach(function(key){defineProperty(target,key,source[key])}):Object.getOwnPropertyDescriptors?Object.defineProperties(target,Object.getOwnPropertyDescriptors(source)):ownKeys(source).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key))})}return target}module2.exports=_objectSpread22}});var require_objectWithoutPropertiesLoose2=__commonJS({"../../node_modules/@devtools-ds/themes/node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js"(exports,module2){function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return{};var target={},sourceKeys=Object.keys(source),key,i;for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],!(excluded.indexOf(key)>=0)&&(target[key]=source[key]);return target}module2.exports=_objectWithoutPropertiesLoose}});var require_objectWithoutProperties2=__commonJS({"../../node_modules/@devtools-ds/themes/node_modules/@babel/runtime/helpers/objectWithoutProperties.js"(exports,module2){var objectWithoutPropertiesLoose=require_objectWithoutPropertiesLoose2();function _objectWithoutProperties6(source,excluded){if(source==null)return{};var target=objectWithoutPropertiesLoose(source,excluded),key,i;if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],!(excluded.indexOf(key)>=0)&&Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}module2.exports=_objectWithoutProperties6}});var require_defineProperty2=__commonJS({"../../node_modules/@devtools-ds/object-inspector/node_modules/@babel/runtime/helpers/defineProperty.js"(exports,module2){function _defineProperty(obj,key,value){return key in obj?Object.defineProperty(obj,key,{value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}module2.exports=_defineProperty}});var require_objectSpread22=__commonJS({"../../node_modules/@devtools-ds/object-inspector/node_modules/@babel/runtime/helpers/objectSpread2.js"(exports,module2){var defineProperty=require_defineProperty2();function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable})),keys.push.apply(keys,symbols)}return keys}function _objectSpread22(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};i%2?ownKeys(source,!0).forEach(function(key){defineProperty(target,key,source[key])}):Object.getOwnPropertyDescriptors?Object.defineProperties(target,Object.getOwnPropertyDescriptors(source)):ownKeys(source).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key))})}return target}module2.exports=_objectSpread22}});var require_extends2=__commonJS({"../../node_modules/@devtools-ds/tree/node_modules/@babel/runtime/helpers/extends.js"(exports,module2){function _extends5(){return module2.exports=_extends5=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends5.apply(this,arguments)}module2.exports=_extends5}});var require_objectWithoutPropertiesLoose3=__commonJS({"../../node_modules/@devtools-ds/tree/node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js"(exports,module2){function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return{};var target={},sourceKeys=Object.keys(source),key,i;for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],!(excluded.indexOf(key)>=0)&&(target[key]=source[key]);return target}module2.exports=_objectWithoutPropertiesLoose}});var require_objectWithoutProperties3=__commonJS({"../../node_modules/@devtools-ds/tree/node_modules/@babel/runtime/helpers/objectWithoutProperties.js"(exports,module2){var objectWithoutPropertiesLoose=require_objectWithoutPropertiesLoose3();function _objectWithoutProperties6(source,excluded){if(source==null)return{};var target=objectWithoutPropertiesLoose(source,excluded),key,i;if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],!(excluded.indexOf(key)>=0)&&Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}module2.exports=_objectWithoutProperties6}});var import_react14=__toESM(require("react")),import_manager_api2=require("@storybook/manager-api"),import_components5=require("@storybook/components"),import_instrumenter7=require("@storybook/instrumenter");var ADDON_ID="storybook/interactions",PANEL_ID=`${ADDON_ID}/panel`;var import_global=require("@storybook/global"),import_react13=__toESM(require("react")),import_manager_api=require("@storybook/manager-api"),import_core_events=require("@storybook/core-events"),import_instrumenter6=require("@storybook/instrumenter");var React14=__toESM(require("react")),import_components4=require("@storybook/components"),import_instrumenter5=require("@storybook/instrumenter"),import_theming7=require("@storybook/theming"),import_polished3=require("polished");var import_react2=__toESM(require("react")),import_components=require("@storybook/components"),import_instrumenter2=require("@storybook/instrumenter"),import_theming2=require("@storybook/theming");var import_react=__toESM(require("react")),import_instrumenter=require("@storybook/instrumenter"),import_theming=require("@storybook/theming"),StyledBadge=import_theming.styled.div(({theme:theme2,status})=>({padding:"4px 6px 4px 8px;",borderRadius:"4px",backgroundColor:{[import_instrumenter.CallStates.DONE]:theme2.color.positive,[import_instrumenter.CallStates.ERROR]:theme2.color.negative,[import_instrumenter.CallStates.ACTIVE]:theme2.color.warning,[import_instrumenter.CallStates.WAITING]:theme2.color.warning}[status],color:"white",fontFamily:import_theming.typography.fonts.base,textTransform:"uppercase",fontSize:import_theming.typography.size.s1,letterSpacing:3,fontWeight:import_theming.typography.weight.bold,width:65,textAlign:"center"})),StatusBadge=({status})=>{let badgeText={[import_instrumenter.CallStates.DONE]:"Pass",[import_instrumenter.CallStates.ERROR]:"Fail",[import_instrumenter.CallStates.ACTIVE]:"Runs",[import_instrumenter.CallStates.WAITING]:"Runs"}[status];return import_react.default.createElement(StyledBadge,{"aria-label":"Status of the test run",status},badgeText)};var SubnavWrapper=import_theming2.styled.div(({theme:theme2})=>({background:theme2.background.app,borderBottom:`1px solid ${theme2.appBorderColor}`,position:"sticky",top:0,zIndex:1})),StyledSubnav=import_theming2.styled.nav(({theme:theme2})=>({height:40,display:"flex",alignItems:"center",justifyContent:"space-between",paddingLeft:15})),StyledButton=(0,import_theming2.styled)(import_components.Button)(({theme:theme2})=>({borderRadius:4,padding:6,color:theme2.textMutedColor,"&:not(:disabled)":{"&:hover,&:focus-visible":{color:theme2.color.secondary}}})),Note=(0,import_theming2.styled)(import_components.TooltipNote)(({theme:theme2})=>({fontFamily:theme2.typography.fonts.base})),StyledIconButton=(0,import_theming2.styled)(import_components.IconButton)(({theme:theme2})=>({color:theme2.textMutedColor,margin:"0 3px"})),StyledSeparator=(0,import_theming2.styled)(import_components.Separator)({marginTop:0}),StyledLocation=(0,import_theming2.styled)(import_components.P)(({theme:theme2})=>({color:theme2.textMutedColor,justifyContent:"flex-end",textAlign:"right",whiteSpace:"nowrap",marginTop:"auto",marginBottom:1,paddingRight:15,fontSize:13})),Group=import_theming2.styled.div({display:"flex",alignItems:"center"}),RewindButton=(0,import_theming2.styled)(StyledIconButton)({marginLeft:9}),JumpToEndButton=(0,import_theming2.styled)(StyledButton)({marginLeft:9,marginRight:9,marginBottom:1,lineHeight:"12px"}),RerunButton=(0,import_theming2.styled)(StyledIconButton)(({theme:theme2,animating,disabled})=>({opacity:disabled?.5:1,svg:{animation:animating&&`${theme2.animation.rotate360} 200ms ease-out`}})),Subnav=({controls,controlStates,status,storyFileName,onScrollToEnd})=>{let buttonText=status===import_instrumenter2.CallStates.ERROR?"Scroll to error":"Scroll to end";return import_react2.default.createElement(SubnavWrapper,null,import_react2.default.createElement(import_components.Bar,null,import_react2.default.createElement(StyledSubnav,null,import_react2.default.createElement(Group,null,import_react2.default.createElement(StatusBadge,{status}),import_react2.default.createElement(JumpToEndButton,{onClick:onScrollToEnd,disabled:!onScrollToEnd},buttonText),import_react2.default.createElement(StyledSeparator,null),import_react2.default.createElement(import_components.WithTooltip,{trigger:"hover",hasChrome:!1,tooltip:import_react2.default.createElement(Note,{note:"Go to start"})},import_react2.default.createElement(RewindButton,{"aria-label":"Go to start",containsIcon:!0,onClick:controls.start,disabled:!controlStates.start},import_react2.default.createElement(import_components.Icons,{icon:"rewind"}))),import_react2.default.createElement(import_components.WithTooltip,{trigger:"hover",hasChrome:!1,tooltip:import_react2.default.createElement(Note,{note:"Go back"})},import_react2.default.createElement(StyledIconButton,{"aria-label":"Go back",containsIcon:!0,onClick:controls.back,disabled:!controlStates.back},import_react2.default.createElement(import_components.Icons,{icon:"playback"}))),import_react2.default.createElement(import_components.WithTooltip,{trigger:"hover",hasChrome:!1,tooltip:import_react2.default.createElement(Note,{note:"Go forward"})},import_react2.default.createElement(StyledIconButton,{"aria-label":"Go forward",containsIcon:!0,onClick:controls.next,disabled:!controlStates.next},import_react2.default.createElement(import_components.Icons,{icon:"playnext"}))),import_react2.default.createElement(import_components.WithTooltip,{trigger:"hover",hasChrome:!1,tooltip:import_react2.default.createElement(Note,{note:"Go to end"})},import_react2.default.createElement(StyledIconButton,{"aria-label":"Go to end",containsIcon:!0,onClick:controls.end,disabled:!controlStates.end},import_react2.default.createElement(import_components.Icons,{icon:"fastforward"}))),import_react2.default.createElement(import_components.WithTooltip,{trigger:"hover",hasChrome:!1,tooltip:import_react2.default.createElement(Note,{note:"Rerun"})},import_react2.default.createElement(RerunButton,{"aria-label":"Rerun",containsIcon:!0,onClick:controls.rerun},import_react2.default.createElement(import_components.Icons,{icon:"sync"})))),storyFileName&&import_react2.default.createElement(Group,null,import_react2.default.createElement(StyledLocation,null,storyFileName)))))};var React13=__toESM(require("react")),import_components3=require("@storybook/components"),import_instrumenter4=require("@storybook/instrumenter"),import_theming6=require("@storybook/theming"),import_polished2=require("polished");var import_react11=__toESM(require("react")),import_theming4=require("@storybook/theming");var import_extends4=__toESM(require_extends()),import_objectWithoutProperties5=__toESM(require_objectWithoutProperties()),import_react9=__toESM(require("react"));function toVal(mix){var k,y,str="";if(mix)if(typeof mix=="object")if(Array.isArray(mix))for(k=0;k<mix.length;k++)mix[k]&&(y=toVal(mix[k]))&&(str&&(str+=" "),str+=y);else for(k in mix)mix[k]&&(y=toVal(k))&&(str&&(str+=" "),str+=y);else typeof mix!="boolean"&&!mix.call&&(str&&(str+=" "),str+=mix);return str}function clsx_m_default(){for(var i=0,x,str="";i<arguments.length;)(x=toVal(arguments[i++]))&&(str&&(str+=" "),str+=x);return str}var isArray=val=>Array.isArray(val)||ArrayBuffer.isView(val)&&!(val instanceof DataView),isObject=val=>val!==null&&typeof val=="object"&&!isArray(val)&&!(val instanceof Date)&&!(val instanceof RegExp)&&!(val instanceof Error)&&!(val instanceof WeakMap)&&!(val instanceof WeakSet),isKnownObject=val=>isObject(val)||isArray(val)||typeof val=="function"||val instanceof Promise,getPromiseState=promise=>{let unique=/unique/;return Promise.race([promise,unique]).then(result=>result===unique?["pending"]:["fulfilled",result],e=>["rejected",e])},buildAST=async(key,value,depth,sortKeys,isPrototype,showPrototype)=>{let astNode={key,depth,value,type:"value",parent:void 0};if(value&&isKnownObject(value)&&depth<100){let children=[],t="object";if(isArray(value)){for(let i=0;i<value.length;i++)children.push(async()=>{let child=await buildAST(i.toString(),value[i],depth+1,sortKeys);return child.parent=astNode,child});t="array"}else{let keys=Object.getOwnPropertyNames(value);sortKeys&&keys.sort();for(let i=0;i<keys.length;i++){let safeValue;try{safeValue=value[keys[i]]}catch{}children.push(async()=>{let child=await buildAST(keys[i],safeValue,depth+1,sortKeys);return child.parent=astNode,child})}if(typeof value=="function"&&(t="function"),value instanceof Promise){let[status,result]=await getPromiseState(value);children.push(async()=>{let child=await buildAST("<state>",status,depth+1,sortKeys);return child.parent=astNode,child}),status!=="pending"&&children.push(async()=>{let child=await buildAST("<value>",result,depth+1,sortKeys);return child.parent=astNode,child}),t="promise"}if(value instanceof Map){let parsedEntries=Array.from(value.entries()).map(entry=>{let[entryKey,entryValue]=entry;return{"<key>":entryKey,"<value>":entryValue}});children.push(async()=>{let child=await buildAST("<entries>",parsedEntries,depth+1,sortKeys);return child.parent=astNode,child}),children.push(async()=>{let child=await buildAST("size",value.size,depth+1,sortKeys);return child.parent=astNode,child}),t="map"}if(value instanceof Set){let parsedEntries=Array.from(value.entries()).map(entry=>entry[1]);children.push(async()=>{let child=await buildAST("<entries>",parsedEntries,depth+1,sortKeys);return child.parent=astNode,child}),children.push(async()=>{let child=await buildAST("size",value.size,depth+1,sortKeys);return child.parent=astNode,child}),t="set"}}value!==Object.prototype&&showPrototype&&children.push(async()=>{let child=await buildAST("<prototype>",Object.getPrototypeOf(value),depth+1,sortKeys,!0);return child.parent=astNode,child}),astNode.type=t,astNode.children=children,astNode.isPrototype=isPrototype}return astNode},parse=(data,sortKeys,includePrototypes)=>buildAST("root",data,0,sortKeys===!1?sortKeys:!0,void 0,includePrototypes===!1?includePrototypes:!0);var import_objectSpread2=__toESM(require_objectSpread2()),import_objectWithoutProperties=__toESM(require_objectWithoutProperties2()),import_react3=__toESM(require("react"));var _excluded=["children"];var ThemeContext=import_react3.default.createContext({theme:"chrome",colorScheme:"light"});var ThemeProvider=_ref=>{let{children}=_ref,value=(0,import_objectWithoutProperties.default)(_ref,_excluded),wrappedTheme=import_react3.default.useContext(ThemeContext);return import_react3.default.createElement(ThemeContext.Provider,{value:(0,import_objectSpread2.default)((0,import_objectSpread2.default)({},wrappedTheme),value)},children)},useTheme=(props,styles={})=>{let themeContext=import_react3.default.useContext(ThemeContext),currentTheme=props.theme||themeContext.theme||"chrome",currentColorScheme=props.colorScheme||themeContext.colorScheme||"light",themeClass=clsx_m_default(styles[currentTheme],styles[currentColorScheme]);return{currentColorScheme,currentTheme,themeClass}};var import_objectSpread22=__toESM(require_objectSpread22()),import_react8=__toESM(require("react"));var import_extends=__toESM(require_extends2()),import_objectWithoutProperties2=__toESM(require_objectWithoutProperties3()),import_react5=__toESM(require("react"));var import_react4=__toESM(require("react")),TreeContext=import_react4.default.createContext({isChild:!1,depth:0,hasHover:!0}),TreeContext_default=TreeContext;var Tree_css_default={tree:"Tree-tree-fbbbe38",item:"Tree-item-353d6f3",group:"Tree-group-d3c3d8a",label:"Tree-label-d819155",focusWhite:"Tree-focusWhite-f1e00c2",arrow:"Tree-arrow-03ab2e7",hover:"Tree-hover-3cc4e5d",open:"Tree-open-3f1a336",dark:"Tree-dark-1b4aa00",chrome:"Tree-chrome-bcbcac6",light:"Tree-light-09174ee"};var _excluded2=["theme","hover","colorScheme","children","label","className","onUpdate","onSelect","open"],Tree=props=>{let{theme:theme2,hover,colorScheme,children,label,className,onUpdate,onSelect,open}=props,html=(0,import_objectWithoutProperties2.default)(props,_excluded2),{themeClass,currentTheme}=useTheme({theme:theme2,colorScheme},Tree_css_default),[isOpen,setOpen]=(0,import_react5.useState)(open);(0,import_react5.useEffect)(()=>{setOpen(open)},[open]);let updateState=value=>{setOpen(value),onUpdate&&onUpdate(value)},hasChildren=import_react5.default.Children.count(children)>0,updateFocus=(newNode,previousNode)=>{if(newNode.isSameNode(previousNode||null))return;let focusableNode=newNode.querySelector('[tabindex="-1"]');focusableNode==null||focusableNode.focus(),newNode.setAttribute("aria-selected","true"),previousNode==null||previousNode.removeAttribute("aria-selected")},getParent=(node,role)=>{let parent=node;for(;parent&&parent.parentElement;){if(parent.getAttribute("role")===role)return parent;parent=parent.parentElement}return null},getListElements=node=>{let tree=getParent(node,"tree");return tree?Array.from(tree.querySelectorAll("li")):[]},moveBack=node=>{let group=getParent(node,"group"),toggle=group==null?void 0:group.previousElementSibling;if(toggle&&toggle.getAttribute("tabindex")==="-1"){let toggleParent=toggle.parentElement,nodeParent=node.parentElement;updateFocus(toggleParent,nodeParent)}},moveHome=(node,direction)=>{let elements=getListElements(node);elements.forEach(element=>{element.removeAttribute("aria-selected")}),direction==="start"&&elements[0]&&updateFocus(elements[0]),direction==="end"&&elements[elements.length-1]&&updateFocus(elements[elements.length-1])},moveFocusAdjacent=(node,direction)=>{let elements=getListElements(node)||[];for(let i=0;i<elements.length;i++){let currentNode=elements[i];if(currentNode.getAttribute("aria-selected")==="true"){direction==="up"&&elements[i-1]?updateFocus(elements[i-1],currentNode):direction==="down"&&elements[i+1]&&updateFocus(elements[i+1],currentNode);return}}updateFocus(elements[0])},handleKeypress=(event,isChild2)=>{let node=event.target;(event.key==="Enter"||event.key===" ")&&updateState(!isOpen),event.key==="ArrowRight"&&isOpen&&!isChild2?moveFocusAdjacent(node,"down"):event.key==="ArrowRight"&&updateState(!0),event.key==="ArrowLeft"&&(!isOpen||isChild2)?moveBack(node):event.key==="ArrowLeft"&&updateState(!1),event.key==="ArrowDown"&&moveFocusAdjacent(node,"down"),event.key==="ArrowUp"&&moveFocusAdjacent(node,"up"),event.key==="Home"&&moveHome(node,"start"),event.key==="End"&&moveHome(node,"end")},handleClick=(event,isChild2)=>{let node=event.target,parent=getParent(node,"treeitem"),elements=getListElements(node)||[],found=!1;for(let i=0;i<elements.length;i++){let currentNode=elements[i];if(currentNode.getAttribute("aria-selected")==="true"){parent&&(found=!0,updateFocus(parent,currentNode));break}}!found&&parent&&updateFocus(parent),isChild2||updateState(!isOpen)},handleBlur=event=>{let node=event.currentTarget;!node.contains(document.activeElement)&&node.getAttribute("role")==="tree"&&node.setAttribute("tabindex","0")},handleFocus=event=>{let node=event.target;if(node.getAttribute("role")==="tree"){let selected=node.querySelector('[aria-selected="true"]');selected?updateFocus(selected):moveFocusAdjacent(node,"down"),node.setAttribute("tabindex","-1")}},handleButtonFocus=()=>{onSelect==null||onSelect()},getPaddingStyles=depth2=>{let space=depth2*.9+.3;return{paddingLeft:`${space}em`,width:`calc(100% - ${space}em)`}},{isChild,depth,hasHover}=import_react5.default.useContext(TreeContext_default),showHover=hasHover?hover:!1;if(!isChild)return import_react5.default.createElement("ul",(0,import_extends.default)({role:"tree",tabIndex:0,className:clsx_m_default(Tree_css_default.tree,Tree_css_default.group,themeClass,className),onFocus:handleFocus,onBlur:handleBlur},html),import_react5.default.createElement(TreeContext_default.Provider,{value:{isChild:!0,depth:0,hasHover:showHover}},import_react5.default.createElement(Tree,props)));if(!hasChildren)return import_react5.default.createElement("li",(0,import_extends.default)({role:"treeitem",className:Tree_css_default.item},html),import_react5.default.createElement("div",{role:"button",className:clsx_m_default(Tree_css_default.label,{[Tree_css_default.hover]:showHover,[Tree_css_default.focusWhite]:currentTheme==="firefox"}),tabIndex:-1,style:getPaddingStyles(depth),onKeyDown:e=>{handleKeypress(e,isChild)},onClick:e=>handleClick(e,!0),onFocus:handleButtonFocus},import_react5.default.createElement("span",null,label)));let arrowClass=clsx_m_default(Tree_css_default.arrow,{[Tree_css_default.open]:isOpen});return import_react5.default.createElement("li",{role:"treeitem","aria-expanded":isOpen,className:Tree_css_default.item},import_react5.default.createElement("div",{role:"button",tabIndex:-1,className:clsx_m_default(Tree_css_default.label,{[Tree_css_default.hover]:showHover,[Tree_css_default.focusWhite]:currentTheme==="firefox"}),style:getPaddingStyles(depth),onClick:e=>handleClick(e),onKeyDown:e=>handleKeypress(e),onFocus:handleButtonFocus},import_react5.default.createElement("span",null,import_react5.default.createElement("span",{"aria-hidden":!0,className:arrowClass}),import_react5.default.createElement("span",null,label))),import_react5.default.createElement("ul",(0,import_extends.default)({role:"group",className:clsx_m_default(className,Tree_css_default.group)},html),isOpen&&import_react5.default.Children.map(children,child=>import_react5.default.createElement(TreeContext_default.Provider,{value:{isChild:!0,depth:depth+1,hasHover:showHover}},child))))};Tree.defaultProps={open:!1,hover:!0};var import_extends2=__toESM(require_extends()),import_objectWithoutProperties3=__toESM(require_objectWithoutProperties()),import_react6=__toESM(require("react"));var ObjectInspector_css_default={"object-inspector":"ObjectInspector-object-inspector-0c33e82",objectInspector:"ObjectInspector-object-inspector-0c33e82","object-label":"ObjectInspector-object-label-b81482b",objectLabel:"ObjectInspector-object-label-b81482b",text:"ObjectInspector-text-25f57f3",key:"ObjectInspector-key-4f712bb",value:"ObjectInspector-value-f7ec2e5",string:"ObjectInspector-string-c496000",regex:"ObjectInspector-regex-59d45a3",error:"ObjectInspector-error-b818698",boolean:"ObjectInspector-boolean-2dd1642",number:"ObjectInspector-number-a6daabb",undefined:"ObjectInspector-undefined-3a68263",null:"ObjectInspector-null-74acb50",function:"ObjectInspector-function-07bbdcd","function-decorator":"ObjectInspector-function-decorator-3d22c24",functionDecorator:"ObjectInspector-function-decorator-3d22c24",prototype:"ObjectInspector-prototype-f2449ee",dark:"ObjectInspector-dark-0c96c97",chrome:"ObjectInspector-chrome-2f3ca98",light:"ObjectInspector-light-78bef54"};var _excluded3=["ast","theme","showKey","colorScheme","className"],buildValue=(key,value,valueClass,showKey,depth)=>{let computedKey=key.includes("-")?`"${key}"`:key,isRoot=depth<=0;return import_react6.default.createElement("span",{className:ObjectInspector_css_default.text},!isRoot&&showKey&&import_react6.default.createElement(import_react6.default.Fragment,null,import_react6.default.createElement("span",{className:ObjectInspector_css_default.key},computedKey),import_react6.default.createElement("span",null,":\xA0")),import_react6.default.createElement("span",{className:valueClass},value))},ObjectValue=props=>{let{ast,theme:theme2,showKey,colorScheme,className}=props,html=(0,import_objectWithoutProperties3.default)(props,_excluded3),{themeClass}=useTheme({theme:theme2,colorScheme},ObjectInspector_css_default),[asyncValue,setAsyncValue]=(0,import_react6.useState)(import_react6.default.createElement("span",null)),value=import_react6.default.createElement("span",null);return(0,import_react6.useEffect)(()=>{ast.value instanceof Promise&&(async promise=>{setAsyncValue(buildValue(ast.key,`Promise { "${await getPromiseState(promise)}" }`,ObjectInspector_css_default.key,showKey,ast.depth))})(ast.value)},[ast,showKey]),typeof ast.value=="number"||typeof ast.value=="bigint"?value=buildValue(ast.key,String(ast.value),ObjectInspector_css_default.number,showKey,ast.depth):typeof ast.value=="boolean"?value=buildValue(ast.key,String(ast.value),ObjectInspector_css_default.boolean,showKey,ast.depth):typeof ast.value=="string"?value=buildValue(ast.key,`"${ast.value}"`,ObjectInspector_css_default.string,showKey,ast.depth):typeof ast.value>"u"?value=buildValue(ast.key,"undefined",ObjectInspector_css_default.undefined,showKey,ast.depth):typeof ast.value=="symbol"?value=buildValue(ast.key,ast.value.toString(),ObjectInspector_css_default.string,showKey,ast.depth):typeof ast.value=="function"?value=buildValue(ast.key,`${ast.value.name}()`,ObjectInspector_css_default.key,showKey,ast.depth):typeof ast.value=="object"&&(ast.value===null?value=buildValue(ast.key,"null",ObjectInspector_css_default.null,showKey,ast.depth):Array.isArray(ast.value)?value=buildValue(ast.key,`Array(${ast.value.length})`,ObjectInspector_css_default.key,showKey,ast.depth):ast.value instanceof Date?value=buildValue(ast.key,`Date ${ast.value.toString()}`,ObjectInspector_css_default.value,showKey,ast.depth):ast.value instanceof RegExp?value=buildValue(ast.key,ast.value.toString(),ObjectInspector_css_default.regex,showKey,ast.depth):ast.value instanceof Error?value=buildValue(ast.key,ast.value.toString(),ObjectInspector_css_default.error,showKey,ast.depth):isObject(ast.value)?value=buildValue(ast.key,"{\u2026}",ObjectInspector_css_default.key,showKey,ast.depth):value=buildValue(ast.key,ast.value.constructor.name,ObjectInspector_css_default.key,showKey,ast.depth)),import_react6.default.createElement("span",(0,import_extends2.default)({className:clsx_m_default(themeClass,className)},html),asyncValue,value)};ObjectValue.defaultProps={showKey:!0};var ObjectValue_default=ObjectValue;var import_extends3=__toESM(require_extends()),import_objectWithoutProperties4=__toESM(require_objectWithoutProperties()),import_react7=__toESM(require("react"));var _excluded4=["ast","theme","previewMax","open","colorScheme","className"],buildPreview=(children,previewMax,showKey)=>{let previews=[];for(let i=0;i<children.length;i++){let child=children[i];if(child.isPrototype||(previews.push(import_react7.default.createElement(ObjectValue_default,{key:child.key,ast:child,showKey})),i<children.length-1?previews.push(", "):previews.push(" ")),child.isPrototype&&i===children.length-1&&(previews.pop(),previews.push(" ")),i===previewMax-1&&children.length>previewMax){previews.push("\u2026 ");break}}return previews},getArrayLabel=(ast,open,previewMax,theme2)=>{let l=ast.value.length;return open?import_react7.default.createElement("span",null,"Array(",l,")"):import_react7.default.createElement(import_react7.default.Fragment,null,import_react7.default.createElement("span",null,`${theme2==="firefox"?"Array":""}(${l}) [ `),buildPreview(ast.children,previewMax,!1),import_react7.default.createElement("span",null,"]"))},getObjectLabel=(ast,open,previewMax,theme2)=>ast.isPrototype?import_react7.default.createElement("span",null,`Object ${theme2==="firefox"?"{ \u2026 }":""}`):open?import_react7.default.createElement("span",null,"{\u2026}"):import_react7.default.createElement(import_react7.default.Fragment,null,import_react7.default.createElement("span",null,`${theme2==="firefox"?"Object ":""}{ `),buildPreview(ast.children,previewMax,!0),import_react7.default.createElement("span",null,"}")),getPromiseLabel=(ast,open,previewMax)=>open?import_react7.default.createElement("span",null,`Promise { "${String(ast.children[0].value)}" }`):import_react7.default.createElement(import_react7.default.Fragment,null,import_react7.default.createElement("span",null,"Promise { "),buildPreview(ast.children,previewMax,!0),import_react7.default.createElement("span",null,"}")),getMapLabel=(ast,open,previewMax,theme2)=>{let{size}=ast.value;return open?import_react7.default.createElement("span",null,`Map(${size})`):import_react7.default.createElement(import_react7.default.Fragment,null,import_react7.default.createElement("span",null,`Map${theme2==="chrome"?`(${size})`:""} { `),buildPreview(ast.children,previewMax,!0),import_react7.default.createElement("span",null,"}"))},getSetLabel=(ast,open,previewMax)=>{let{size}=ast.value;return open?import_react7.default.createElement("span",null,"Set(",size,")"):import_react7.default.createElement(import_react7.default.Fragment,null,import_react7.default.createElement("span",null,`Set(${ast.value.size}) {`),buildPreview(ast.children,previewMax,!0),import_react7.default.createElement("span",null,"}"))},ObjectLabel=props=>{let{ast,theme:theme2,previewMax,open,colorScheme,className}=props,html=(0,import_objectWithoutProperties4.default)(props,_excluded4),{themeClass,currentTheme}=useTheme({theme:theme2,colorScheme},ObjectInspector_css_default),isPrototype=ast.isPrototype||!1,classes=clsx_m_default(ObjectInspector_css_default.objectLabel,themeClass,className,{[ObjectInspector_css_default.prototype]:isPrototype}),isRoot=ast.depth<=0,Key=()=>import_react7.default.createElement("span",{className:isPrototype?ObjectInspector_css_default.prototype:ObjectInspector_css_default.key},isRoot?"":`${ast.key}: `);return ast.type==="array"?import_react7.default.createElement("span",(0,import_extends3.default)({className:classes},html),import_react7.default.createElement(Key,null),getArrayLabel(ast,open,previewMax,currentTheme)):ast.type==="function"?import_react7.default.createElement("span",(0,import_extends3.default)({className:classes},html),import_react7.default.createElement(Key,null),currentTheme==="chrome"&&import_react7.default.createElement("span",{className:ObjectInspector_css_default.functionDecorator},"\u0192 "),import_react7.default.createElement("span",{className:clsx_m_default({[ObjectInspector_css_default.function]:!isPrototype})},`${ast.value.name}()`)):ast.type==="promise"?import_react7.default.createElement("span",(0,import_extends3.default)({className:classes},html),import_react7.default.createElement(Key,null),getPromiseLabel(ast,open,previewMax)):ast.type==="map"?import_react7.default.createElement("span",(0,import_extends3.default)({className:classes},html),import_react7.default.createElement(Key,null),getMapLabel(ast,open,previewMax,currentTheme)):ast.type==="set"?import_react7.default.createElement("span",(0,import_extends3.default)({className:classes},html),import_react7.default.createElement(Key,null),getSetLabel(ast,open,previewMax)):import_react7.default.createElement("span",(0,import_extends3.default)({className:classes},html),import_react7.default.createElement(Key,null),getObjectLabel(ast,open,previewMax,currentTheme))};ObjectLabel.defaultProps={previewMax:8,open:!1};var ObjectLabel_default=ObjectLabel;var ObjectInspectorItem=props=>{let{ast,expandLevel,depth}=props,[resolved,setResolved]=(0,import_react8.useState)(),[open,setOpen]=(0,import_react8.useState)(depth<expandLevel);return(0,import_react8.useEffect)(()=>{(async()=>{if(ast.type!=="value"){let promises=ast.children.map(f=>f()),children=await Promise.all(promises),r=(0,import_objectSpread22.default)((0,import_objectSpread22.default)({},ast),{},{children});setResolved(r)}})()},[ast]),resolved?import_react8.default.createElement(Tree,{hover:!1,open,label:import_react8.default.createElement(ObjectLabel_default,{open,ast:resolved}),onSelect:()=>{var _props$onSelect;(_props$onSelect=props.onSelect)===null||_props$onSelect===void 0||_props$onSelect.call(props,ast)},onUpdate:value=>{setOpen(value)}},resolved.children.map(child=>import_react8.default.createElement(ObjectInspectorItem,{key:child.key,ast:child,depth:depth+1,expandLevel,onSelect:props.onSelect}))):import_react8.default.createElement(Tree,{hover:!1,label:import_react8.default.createElement(ObjectValue_default,{ast}),onSelect:()=>{var _props$onSelect2;(_props$onSelect2=props.onSelect)===null||_props$onSelect2===void 0||_props$onSelect2.call(props,ast)}})};ObjectInspectorItem.defaultProps={expandLevel:0,depth:0};var ObjectInspectorItem_default=ObjectInspectorItem;var _excluded5=["data","expandLevel","sortKeys","includePrototypes","className","theme","colorScheme","onSelect"],ObjectInspector=props=>{let{data,expandLevel,sortKeys,includePrototypes,className,theme:theme2,colorScheme,onSelect}=props,html=(0,import_objectWithoutProperties5.default)(props,_excluded5),[ast,setAST]=(0,import_react9.useState)(void 0),{themeClass,currentTheme,currentColorScheme}=useTheme({theme:theme2,colorScheme},ObjectInspector_css_default);return(0,import_react9.useEffect)(()=>{(async()=>{setAST(await parse(data,sortKeys,includePrototypes))})()},[data,sortKeys,includePrototypes]),import_react9.default.createElement("div",(0,import_extends4.default)({className:clsx_m_default(ObjectInspector_css_default.objectInspector,className,themeClass)},html),ast&&import_react9.default.createElement(ThemeProvider,{theme:currentTheme,colorScheme:currentColorScheme},import_react9.default.createElement(ObjectInspectorItem_default,{ast,expandLevel,onSelect})))};ObjectInspector.defaultProps={expandLevel:0,sortKeys:!0,includePrototypes:!0};var import_theming3=require("@storybook/theming"),import_react10=__toESM(require("react")),colorsLight={base:"#444",nullish:"#7D99AA",string:"#16B242",number:"#5D40D0",boolean:"#f41840",objectkey:"#698394",instance:"#A15C20",function:"#EA7509",muted:"#7D99AA",tag:{name:"#6F2CAC",suffix:"#1F99E5"},date:"#459D9C",error:{name:"#D43900",message:"#444"},regex:{source:"#A15C20",flags:"#EA7509"},meta:"#EA7509",method:"#0271B6"},colorsDark={base:"#eee",nullish:"#aaa",string:"#5FE584",number:"#6ba5ff",boolean:"#ff4191",objectkey:"#accfe6",instance:"#E3B551",function:"#E3B551",muted:"#aaa",tag:{name:"#f57bff",suffix:"#8EB5FF"},date:"#70D4D3",error:{name:"#f40",message:"#eee"},regex:{source:"#FAD483",flags:"#E3B551"},meta:"#FAD483",method:"#5EC1FF"},useThemeColors=()=>{let{base}=(0,import_theming3.useTheme)();return base==="dark"?colorsDark:colorsLight},special=/[^A-Z0-9]/i,trimEnd=/[\s.,…]+$/gm,ellipsize=(string,maxlength)=>{if(string.length<=maxlength)return string;for(let i=maxlength-1;i>=0;i-=1)if(special.test(string[i])&&i>10)return`${string.slice(0,i).replace(trimEnd,"")}\u2026`;return`${string.slice(0,maxlength).replace(trimEnd,"")}\u2026`},stringify=value=>{try{return JSON.stringify(value,null,1)}catch{return String(value)}},interleave=(nodes,separator)=>nodes.flatMap((node,index)=>index===nodes.length-1?[node]:[node,import_react10.default.cloneElement(separator,{key:`sep${index}`})]),Node=({value,nested,showObjectInspector,callsById,...props})=>{switch(!0){case value===null:return import_react10.default.createElement(NullNode,{...props});case value===void 0:return import_react10.default.createElement(UndefinedNode,{...props});case Array.isArray(value):return import_react10.default.createElement(ArrayNode,{...props,value,callsById});case typeof value=="string":return import_react10.default.createElement(StringNode,{...props,value});case typeof value=="number":return import_react10.default.createElement(NumberNode,{...props,value});case typeof value=="boolean":return import_react10.default.createElement(BooleanNode,{...props,value});case Object.prototype.hasOwnProperty.call(value,"__date__"):return import_react10.default.createElement(DateNode,{...props,...value.__date__});case Object.prototype.hasOwnProperty.call(value,"__error__"):return import_react10.default.createElement(ErrorNode,{...props,...value.__error__});case Object.prototype.hasOwnProperty.call(value,"__regexp__"):return import_react10.default.createElement(RegExpNode,{...props,...value.__regexp__});case Object.prototype.hasOwnProperty.call(value,"__function__"):return import_react10.default.createElement(FunctionNode,{...props,...value.__function__});case Object.prototype.hasOwnProperty.call(value,"__symbol__"):return import_react10.default.createElement(SymbolNode,{...props,...value.__symbol__});case Object.prototype.hasOwnProperty.call(value,"__element__"):return import_react10.default.createElement(ElementNode,{...props,...value.__element__});case Object.prototype.hasOwnProperty.call(value,"__class__"):return import_react10.default.createElement(ClassNode,{...props,...value.__class__});case Object.prototype.hasOwnProperty.call(value,"__callId__"):return import_react10.default.createElement(MethodCall,{call:callsById.get(value.__callId__),callsById});case Object.prototype.toString.call(value)==="[object Object]":return import_react10.default.createElement(ObjectNode,{value,showInspector:showObjectInspector,callsById,...props});default:return import_react10.default.createElement(OtherNode,{value,...props})}},NullNode=props=>{let colors2=useThemeColors();return import_react10.default.createElement("span",{style:{color:colors2.nullish},...props},"null")},UndefinedNode=props=>{let colors2=useThemeColors();return import_react10.default.createElement("span",{style:{color:colors2.nullish},...props},"undefined")},StringNode=({value,...props})=>{let colors2=useThemeColors();return import_react10.default.createElement("span",{style:{color:colors2.string},...props},JSON.stringify(ellipsize(value,50)))},NumberNode=({value,...props})=>{let colors2=useThemeColors();return import_react10.default.createElement("span",{style:{color:colors2.number},...props},value)},BooleanNode=({value,...props})=>{let colors2=useThemeColors();return import_react10.default.createElement("span",{style:{color:colors2.boolean},...props},String(value))},ArrayNode=({value,nested=!1,callsById})=>{let colors2=useThemeColors();if(nested)return import_react10.default.createElement("span",{style:{color:colors2.base}},"[\u2026]");let nodes=value.slice(0,3).map(v=>import_react10.default.createElement(Node,{key:JSON.stringify(v),value:v,nested:!0,callsById})),nodelist=interleave(nodes,import_react10.default.createElement("span",null,", "));return value.length<=3?import_react10.default.createElement("span",{style:{color:colors2.base}},"[",nodelist,"]"):import_react10.default.createElement("span",{style:{color:colors2.base}},"(",value.length,") [",nodelist,", \u2026]")},ObjectNode=({showInspector,value,callsById,nested=!1})=>{let isDarkMode=(0,import_theming3.useTheme)().base==="dark",colors2=useThemeColors();if(showInspector)return import_react10.default.createElement(import_react10.default.Fragment,null,import_react10.default.createElement(ObjectInspector,{id:"interactions-object-inspector",data:value,includePrototypes:!1,colorScheme:isDarkMode?"dark":"light"}));if(nested)return import_react10.default.createElement("span",{style:{color:colors2.base}},"{\u2026}");let nodelist=interleave(Object.entries(value).slice(0,2).map(([k,v])=>import_react10.default.createElement(import_react10.Fragment,{key:k},import_react10.default.createElement("span",{style:{color:colors2.objectkey}},k,": "),import_react10.default.createElement(Node,{value:v,callsById,nested:!0}))),import_react10.default.createElement("span",null,", "));return Object.keys(value).length<=2?import_react10.default.createElement("span",{style:{color:colors2.base}},"{ ",nodelist," }"):import_react10.default.createElement("span",{style:{color:colors2.base}},"(",Object.keys(value).length,") ","{ ",nodelist,", \u2026 }")},ClassNode=({name})=>{let colors2=useThemeColors();return import_react10.default.createElement("span",{style:{color:colors2.instance}},name)},FunctionNode=({name})=>{let colors2=useThemeColors();return name?import_react10.default.createElement("span",{style:{color:colors2.function}},name):import_react10.default.createElement("span",{style:{color:colors2.nullish,fontStyle:"italic"}},"anonymous")},ElementNode=({prefix,localName,id,classNames=[],innerText})=>{let name=prefix?`${prefix}:${localName}`:localName,colors2=useThemeColors();return import_react10.default.createElement("span",{style:{wordBreak:"keep-all"}},import_react10.default.createElement("span",{key:`${name}_lt`,style:{color:colors2.muted}},"<"),import_react10.default.createElement("span",{key:`${name}_tag`,style:{color:colors2.tag.name}},name),import_react10.default.createElement("span",{key:`${name}_suffix`,style:{color:colors2.tag.suffix}},id?`#${id}`:classNames.reduce((acc,className)=>`${acc}.${className}`,"")),import_react10.default.createElement("span",{key:`${name}_gt`,style:{color:colors2.muted}},">"),!id&&classNames.length===0&&innerText&&import_react10.default.createElement(import_react10.default.Fragment,null,import_react10.default.createElement("span",{key:`${name}_text`},innerText),import_react10.default.createElement("span",{key:`${name}_close_lt`,style:{color:colors2.muted}},"<"),import_react10.default.createElement("span",{key:`${name}_close_tag`,style:{color:colors2.tag.name}},"/",name),import_react10.default.createElement("span",{key:`${name}_close_gt`,style:{color:colors2.muted}},">")))},DateNode=({value})=>{let[date,time,ms]=value.split(/[T.Z]/),colors2=useThemeColors();return import_react10.default.createElement("span",{style:{whiteSpace:"nowrap",color:colors2.date}},date,import_react10.default.createElement("span",{style:{opacity:.7}},"T"),time==="00:00:00"?import_react10.default.createElement("span",{style:{opacity:.7}},time):time,ms==="000"?import_react10.default.createElement("span",{style:{opacity:.7}},".",ms):`.${ms}`,import_react10.default.createElement("span",{style:{opacity:.7}},"Z"))},ErrorNode=({name,message})=>{let colors2=useThemeColors();return import_react10.default.createElement("span",{style:{color:colors2.error.name}},name,message&&": ",message&&import_react10.default.createElement("span",{style:{color:colors2.error.message},title:message.length>50?message:""},ellipsize(message,50)))},RegExpNode=({flags,source})=>{let colors2=useThemeColors();return import_react10.default.createElement("span",{style:{whiteSpace:"nowrap",color:colors2.regex.flags}},"/",import_react10.default.createElement("span",{style:{color:colors2.regex.source}},source),"/",flags)},SymbolNode=({description})=>{let colors2=useThemeColors();return import_react10.default.createElement("span",{style:{whiteSpace:"nowrap",color:colors2.instance}},"Symbol(",description&&import_react10.default.createElement("span",{style:{color:colors2.meta}},'"',description,'"'),")")},OtherNode=({value})=>{let colors2=useThemeColors();return import_react10.default.createElement("span",{style:{color:colors2.meta}},stringify(value))},StepNode=({label})=>{let colors2=useThemeColors(),{typography:typography4}=(0,import_theming3.useTheme)();return import_react10.default.createElement("span",{style:{color:colors2.base,fontFamily:typography4.fonts.base,fontSize:typography4.size.s2-1}},label)},MethodCall=({call,callsById})=>{if(!call)return null;if(call.method==="step"&&call.path.length===0)return import_react10.default.createElement(StepNode,{label:call.args[0]});let path=call.path.flatMap((elem,index)=>{let callId=elem.__callId__;return[callId?import_react10.default.createElement(MethodCall,{key:`elem${index}`,call:callsById.get(callId),callsById}):import_react10.default.createElement("span",{key:`elem${index}`},elem),import_react10.default.createElement("wbr",{key:`wbr${index}`}),import_react10.default.createElement("span",{key:`dot${index}`},".")]}),args=call.args.flatMap((arg,index,array)=>{let node=import_react10.default.createElement(Node,{key:`node${index}`,value:arg,callsById});return index<array.length-1?[node,import_react10.default.createElement("span",{key:`comma${index}`},",\xA0"),import_react10.default.createElement("wbr",{key:`wbr${index}`})]:[node]}),colors2=useThemeColors();return import_react10.default.createElement(import_react10.default.Fragment,null,import_react10.default.createElement("span",{style:{color:colors2.base}},path),import_react10.default.createElement("span",{style:{color:colors2.method}},call.method),import_react10.default.createElement("span",{style:{color:colors2.base}},"(",import_react10.default.createElement("wbr",null),args,import_react10.default.createElement("wbr",null),")"))};var getParams=(line,fromIndex=0)=>{for(let i=fromIndex,depth=1;i<line.length;i+=1)if(line[i]==="("?depth+=1:line[i]===")"&&(depth-=1),depth===0)return line.slice(fromIndex,i);return""},parseValue=value=>{try{return value==="undefined"?void 0:JSON.parse(value)}catch{return value}},StyledExpected=import_theming4.styled.span(({theme:theme2})=>({color:theme2.base==="light"?theme2.color.positiveText:theme2.color.positive})),StyledReceived=import_theming4.styled.span(({theme:theme2})=>({color:theme2.base==="light"?theme2.color.negativeText:theme2.color.negative})),Received=({value,parsed})=>parsed?import_react11.default.createElement(Node,{showObjectInspector:!0,value,style:{color:"#D43900"}}):import_react11.default.createElement(StyledReceived,null,value),Expected=({value,parsed})=>parsed?typeof value=="string"&&value.startsWith("called with")?import_react11.default.createElement(import_react11.default.Fragment,null,value):import_react11.default.createElement(Node,{showObjectInspector:!0,value,style:{color:"#16B242"}}):import_react11.default.createElement(StyledExpected,null,value),MatcherResult=({message})=>{let lines=message.split(`
1
+ var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __getProtoOf=Object.getPrototypeOf,__hasOwnProp=Object.prototype.hasOwnProperty;var __commonJS=(cb,mod)=>function(){return mod||(0,cb[__getOwnPropNames(cb)[0]])((mod={exports:{}}).exports,mod),mod.exports};var __copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toESM=(mod,isNodeMode,target)=>(target=mod!=null?__create(__getProtoOf(mod)):{},__copyProps(isNodeMode||!mod||!mod.__esModule?__defProp(target,"default",{value:mod,enumerable:!0}):target,mod));var require_extends=__commonJS({"../../node_modules/@devtools-ds/object-inspector/node_modules/@babel/runtime/helpers/extends.js"(exports,module2){function _extends5(){return module2.exports=_extends5=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends5.apply(this,arguments)}module2.exports=_extends5}});var require_objectWithoutPropertiesLoose=__commonJS({"../../node_modules/@devtools-ds/object-inspector/node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js"(exports,module2){function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return{};var target={},sourceKeys=Object.keys(source),key,i;for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],!(excluded.indexOf(key)>=0)&&(target[key]=source[key]);return target}module2.exports=_objectWithoutPropertiesLoose}});var require_objectWithoutProperties=__commonJS({"../../node_modules/@devtools-ds/object-inspector/node_modules/@babel/runtime/helpers/objectWithoutProperties.js"(exports,module2){var objectWithoutPropertiesLoose=require_objectWithoutPropertiesLoose();function _objectWithoutProperties6(source,excluded){if(source==null)return{};var target=objectWithoutPropertiesLoose(source,excluded),key,i;if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],!(excluded.indexOf(key)>=0)&&Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}module2.exports=_objectWithoutProperties6}});var require_defineProperty=__commonJS({"../../node_modules/@devtools-ds/themes/node_modules/@babel/runtime/helpers/defineProperty.js"(exports,module2){function _defineProperty(obj,key,value){return key in obj?Object.defineProperty(obj,key,{value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}module2.exports=_defineProperty}});var require_objectSpread2=__commonJS({"../../node_modules/@devtools-ds/themes/node_modules/@babel/runtime/helpers/objectSpread2.js"(exports,module2){var defineProperty=require_defineProperty();function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable})),keys.push.apply(keys,symbols)}return keys}function _objectSpread22(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};i%2?ownKeys(source,!0).forEach(function(key){defineProperty(target,key,source[key])}):Object.getOwnPropertyDescriptors?Object.defineProperties(target,Object.getOwnPropertyDescriptors(source)):ownKeys(source).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key))})}return target}module2.exports=_objectSpread22}});var require_objectWithoutPropertiesLoose2=__commonJS({"../../node_modules/@devtools-ds/themes/node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js"(exports,module2){function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return{};var target={},sourceKeys=Object.keys(source),key,i;for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],!(excluded.indexOf(key)>=0)&&(target[key]=source[key]);return target}module2.exports=_objectWithoutPropertiesLoose}});var require_objectWithoutProperties2=__commonJS({"../../node_modules/@devtools-ds/themes/node_modules/@babel/runtime/helpers/objectWithoutProperties.js"(exports,module2){var objectWithoutPropertiesLoose=require_objectWithoutPropertiesLoose2();function _objectWithoutProperties6(source,excluded){if(source==null)return{};var target=objectWithoutPropertiesLoose(source,excluded),key,i;if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],!(excluded.indexOf(key)>=0)&&Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}module2.exports=_objectWithoutProperties6}});var require_defineProperty2=__commonJS({"../../node_modules/@devtools-ds/object-inspector/node_modules/@babel/runtime/helpers/defineProperty.js"(exports,module2){function _defineProperty(obj,key,value){return key in obj?Object.defineProperty(obj,key,{value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}module2.exports=_defineProperty}});var require_objectSpread22=__commonJS({"../../node_modules/@devtools-ds/object-inspector/node_modules/@babel/runtime/helpers/objectSpread2.js"(exports,module2){var defineProperty=require_defineProperty2();function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable})),keys.push.apply(keys,symbols)}return keys}function _objectSpread22(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};i%2?ownKeys(source,!0).forEach(function(key){defineProperty(target,key,source[key])}):Object.getOwnPropertyDescriptors?Object.defineProperties(target,Object.getOwnPropertyDescriptors(source)):ownKeys(source).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key))})}return target}module2.exports=_objectSpread22}});var require_extends2=__commonJS({"../../node_modules/@devtools-ds/tree/node_modules/@babel/runtime/helpers/extends.js"(exports,module2){function _extends5(){return module2.exports=_extends5=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends5.apply(this,arguments)}module2.exports=_extends5}});var require_objectWithoutPropertiesLoose3=__commonJS({"../../node_modules/@devtools-ds/tree/node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js"(exports,module2){function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return{};var target={},sourceKeys=Object.keys(source),key,i;for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],!(excluded.indexOf(key)>=0)&&(target[key]=source[key]);return target}module2.exports=_objectWithoutPropertiesLoose}});var require_objectWithoutProperties3=__commonJS({"../../node_modules/@devtools-ds/tree/node_modules/@babel/runtime/helpers/objectWithoutProperties.js"(exports,module2){var objectWithoutPropertiesLoose=require_objectWithoutPropertiesLoose3();function _objectWithoutProperties6(source,excluded){if(source==null)return{};var target=objectWithoutPropertiesLoose(source,excluded),key,i;if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],!(excluded.indexOf(key)>=0)&&Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}module2.exports=_objectWithoutProperties6}});var import_react14=__toESM(require("react")),import_manager_api2=require("@storybook/manager-api"),import_components5=require("@storybook/components"),import_instrumenter7=require("@storybook/instrumenter");var ADDON_ID="storybook/interactions",PANEL_ID=`${ADDON_ID}/panel`;var import_global=require("@storybook/global"),import_react13=__toESM(require("react")),import_manager_api=require("@storybook/manager-api"),import_core_events=require("@storybook/core-events"),import_instrumenter6=require("@storybook/instrumenter");var React14=__toESM(require("react")),import_components4=require("@storybook/components"),import_instrumenter5=require("@storybook/instrumenter"),import_theming7=require("@storybook/theming"),import_polished3=require("polished");var import_react2=__toESM(require("react")),import_components=require("@storybook/components"),import_experimental=require("@storybook/components/experimental"),import_instrumenter2=require("@storybook/instrumenter"),import_theming2=require("@storybook/theming");var import_react=__toESM(require("react")),import_instrumenter=require("@storybook/instrumenter"),import_theming=require("@storybook/theming"),StyledBadge=import_theming.styled.div(({theme:theme2,status})=>({padding:"4px 6px 4px 8px;",borderRadius:"4px",backgroundColor:{[import_instrumenter.CallStates.DONE]:theme2.color.positive,[import_instrumenter.CallStates.ERROR]:theme2.color.negative,[import_instrumenter.CallStates.ACTIVE]:theme2.color.warning,[import_instrumenter.CallStates.WAITING]:theme2.color.warning}[status],color:"white",fontFamily:import_theming.typography.fonts.base,textTransform:"uppercase",fontSize:import_theming.typography.size.s1,letterSpacing:3,fontWeight:import_theming.typography.weight.bold,width:65,textAlign:"center"})),StatusBadge=({status})=>{let badgeText={[import_instrumenter.CallStates.DONE]:"Pass",[import_instrumenter.CallStates.ERROR]:"Fail",[import_instrumenter.CallStates.ACTIVE]:"Runs",[import_instrumenter.CallStates.WAITING]:"Runs"}[status];return import_react.default.createElement(StyledBadge,{"aria-label":"Status of the test run",status},badgeText)};var SubnavWrapper=import_theming2.styled.div(({theme:theme2})=>({background:theme2.background.app,borderBottom:`1px solid ${theme2.appBorderColor}`,position:"sticky",top:0,zIndex:1})),StyledSubnav=import_theming2.styled.nav(({theme:theme2})=>({height:40,display:"flex",alignItems:"center",justifyContent:"space-between",paddingLeft:15})),StyledButton=(0,import_theming2.styled)(import_components.Button)(({theme:theme2})=>({borderRadius:4,padding:6,color:theme2.textMutedColor,"&:not(:disabled)":{"&:hover,&:focus-visible":{color:theme2.color.secondary}}})),Note=(0,import_theming2.styled)(import_components.TooltipNote)(({theme:theme2})=>({fontFamily:theme2.typography.fonts.base})),StyledIconButton=(0,import_theming2.styled)(import_components.IconButton)(({theme:theme2})=>({color:theme2.textMutedColor,margin:"0 3px"})),StyledSeparator=(0,import_theming2.styled)(import_components.Separator)({marginTop:0}),StyledLocation=(0,import_theming2.styled)(import_components.P)(({theme:theme2})=>({color:theme2.textMutedColor,justifyContent:"flex-end",textAlign:"right",whiteSpace:"nowrap",marginTop:"auto",marginBottom:1,paddingRight:15,fontSize:13})),Group=import_theming2.styled.div({display:"flex",alignItems:"center"}),RewindButton=(0,import_theming2.styled)(StyledIconButton)({marginLeft:9}),JumpToEndButton=(0,import_theming2.styled)(StyledButton)({marginLeft:9,marginRight:9,marginBottom:1,lineHeight:"12px"}),RerunButton=(0,import_theming2.styled)(StyledIconButton)(({theme:theme2,animating,disabled})=>({opacity:disabled?.5:1,svg:{animation:animating&&`${theme2.animation.rotate360} 200ms ease-out`}})),Subnav=({controls,controlStates,status,storyFileName,onScrollToEnd})=>{let buttonText=status===import_instrumenter2.CallStates.ERROR?"Scroll to error":"Scroll to end";return import_react2.default.createElement(SubnavWrapper,null,import_react2.default.createElement(import_components.Bar,null,import_react2.default.createElement(StyledSubnav,null,import_react2.default.createElement(Group,null,import_react2.default.createElement(StatusBadge,{status}),import_react2.default.createElement(JumpToEndButton,{onClick:onScrollToEnd,disabled:!onScrollToEnd},buttonText),import_react2.default.createElement(StyledSeparator,null),import_react2.default.createElement(import_components.WithTooltip,{trigger:"hover",hasChrome:!1,tooltip:import_react2.default.createElement(Note,{note:"Go to start"})},import_react2.default.createElement(RewindButton,{"aria-label":"Go to start",containsIcon:!0,onClick:controls.start,disabled:!controlStates.start},import_react2.default.createElement(import_experimental.Icon.Rewind,null))),import_react2.default.createElement(import_components.WithTooltip,{trigger:"hover",hasChrome:!1,tooltip:import_react2.default.createElement(Note,{note:"Go back"})},import_react2.default.createElement(StyledIconButton,{"aria-label":"Go back",containsIcon:!0,onClick:controls.back,disabled:!controlStates.back},import_react2.default.createElement(import_experimental.Icon.PlayBack,null))),import_react2.default.createElement(import_components.WithTooltip,{trigger:"hover",hasChrome:!1,tooltip:import_react2.default.createElement(Note,{note:"Go forward"})},import_react2.default.createElement(StyledIconButton,{"aria-label":"Go forward",containsIcon:!0,onClick:controls.next,disabled:!controlStates.next},import_react2.default.createElement(import_experimental.Icon.PlayNext,null))),import_react2.default.createElement(import_components.WithTooltip,{trigger:"hover",hasChrome:!1,tooltip:import_react2.default.createElement(Note,{note:"Go to end"})},import_react2.default.createElement(StyledIconButton,{"aria-label":"Go to end",containsIcon:!0,onClick:controls.end,disabled:!controlStates.end},import_react2.default.createElement(import_experimental.Icon.FastForward,null))),import_react2.default.createElement(import_components.WithTooltip,{trigger:"hover",hasChrome:!1,tooltip:import_react2.default.createElement(Note,{note:"Rerun"})},import_react2.default.createElement(RerunButton,{"aria-label":"Rerun",containsIcon:!0,onClick:controls.rerun},import_react2.default.createElement(import_experimental.Icon.Sync,null)))),storyFileName&&import_react2.default.createElement(Group,null,import_react2.default.createElement(StyledLocation,null,storyFileName)))))};var React13=__toESM(require("react")),import_components3=require("@storybook/components"),import_experimental2=require("@storybook/components/experimental"),import_instrumenter4=require("@storybook/instrumenter"),import_theming6=require("@storybook/theming"),import_polished2=require("polished");var import_react11=__toESM(require("react")),import_theming4=require("@storybook/theming");var import_extends4=__toESM(require_extends()),import_objectWithoutProperties5=__toESM(require_objectWithoutProperties()),import_react9=__toESM(require("react"));function toVal(mix){var k,y,str="";if(mix)if(typeof mix=="object")if(Array.isArray(mix))for(k=0;k<mix.length;k++)mix[k]&&(y=toVal(mix[k]))&&(str&&(str+=" "),str+=y);else for(k in mix)mix[k]&&(y=toVal(k))&&(str&&(str+=" "),str+=y);else typeof mix!="boolean"&&!mix.call&&(str&&(str+=" "),str+=mix);return str}function clsx_m_default(){for(var i=0,x,str="";i<arguments.length;)(x=toVal(arguments[i++]))&&(str&&(str+=" "),str+=x);return str}var isArray=val=>Array.isArray(val)||ArrayBuffer.isView(val)&&!(val instanceof DataView),isObject=val=>val!==null&&typeof val=="object"&&!isArray(val)&&!(val instanceof Date)&&!(val instanceof RegExp)&&!(val instanceof Error)&&!(val instanceof WeakMap)&&!(val instanceof WeakSet),isKnownObject=val=>isObject(val)||isArray(val)||typeof val=="function"||val instanceof Promise,getPromiseState=promise=>{let unique=/unique/;return Promise.race([promise,unique]).then(result=>result===unique?["pending"]:["fulfilled",result],e=>["rejected",e])},buildAST=async(key,value,depth,sortKeys,isPrototype,showPrototype)=>{let astNode={key,depth,value,type:"value",parent:void 0};if(value&&isKnownObject(value)&&depth<100){let children=[],t="object";if(isArray(value)){for(let i=0;i<value.length;i++)children.push(async()=>{let child=await buildAST(i.toString(),value[i],depth+1,sortKeys);return child.parent=astNode,child});t="array"}else{let keys=Object.getOwnPropertyNames(value);sortKeys&&keys.sort();for(let i=0;i<keys.length;i++){let safeValue;try{safeValue=value[keys[i]]}catch{}children.push(async()=>{let child=await buildAST(keys[i],safeValue,depth+1,sortKeys);return child.parent=astNode,child})}if(typeof value=="function"&&(t="function"),value instanceof Promise){let[status,result]=await getPromiseState(value);children.push(async()=>{let child=await buildAST("<state>",status,depth+1,sortKeys);return child.parent=astNode,child}),status!=="pending"&&children.push(async()=>{let child=await buildAST("<value>",result,depth+1,sortKeys);return child.parent=astNode,child}),t="promise"}if(value instanceof Map){let parsedEntries=Array.from(value.entries()).map(entry=>{let[entryKey,entryValue]=entry;return{"<key>":entryKey,"<value>":entryValue}});children.push(async()=>{let child=await buildAST("<entries>",parsedEntries,depth+1,sortKeys);return child.parent=astNode,child}),children.push(async()=>{let child=await buildAST("size",value.size,depth+1,sortKeys);return child.parent=astNode,child}),t="map"}if(value instanceof Set){let parsedEntries=Array.from(value.entries()).map(entry=>entry[1]);children.push(async()=>{let child=await buildAST("<entries>",parsedEntries,depth+1,sortKeys);return child.parent=astNode,child}),children.push(async()=>{let child=await buildAST("size",value.size,depth+1,sortKeys);return child.parent=astNode,child}),t="set"}}value!==Object.prototype&&showPrototype&&children.push(async()=>{let child=await buildAST("<prototype>",Object.getPrototypeOf(value),depth+1,sortKeys,!0);return child.parent=astNode,child}),astNode.type=t,astNode.children=children,astNode.isPrototype=isPrototype}return astNode},parse=(data,sortKeys,includePrototypes)=>buildAST("root",data,0,sortKeys===!1?sortKeys:!0,void 0,includePrototypes===!1?includePrototypes:!0);var import_objectSpread2=__toESM(require_objectSpread2()),import_objectWithoutProperties=__toESM(require_objectWithoutProperties2()),import_react3=__toESM(require("react"));var _excluded=["children"];var ThemeContext=import_react3.default.createContext({theme:"chrome",colorScheme:"light"});var ThemeProvider=_ref=>{let{children}=_ref,value=(0,import_objectWithoutProperties.default)(_ref,_excluded),wrappedTheme=import_react3.default.useContext(ThemeContext);return import_react3.default.createElement(ThemeContext.Provider,{value:(0,import_objectSpread2.default)((0,import_objectSpread2.default)({},wrappedTheme),value)},children)},useTheme=(props,styles={})=>{let themeContext=import_react3.default.useContext(ThemeContext),currentTheme=props.theme||themeContext.theme||"chrome",currentColorScheme=props.colorScheme||themeContext.colorScheme||"light",themeClass=clsx_m_default(styles[currentTheme],styles[currentColorScheme]);return{currentColorScheme,currentTheme,themeClass}};var import_objectSpread22=__toESM(require_objectSpread22()),import_react8=__toESM(require("react"));var import_extends=__toESM(require_extends2()),import_objectWithoutProperties2=__toESM(require_objectWithoutProperties3()),import_react5=__toESM(require("react"));var import_react4=__toESM(require("react")),TreeContext=import_react4.default.createContext({isChild:!1,depth:0,hasHover:!0}),TreeContext_default=TreeContext;var Tree_css_default={tree:"Tree-tree-fbbbe38",item:"Tree-item-353d6f3",group:"Tree-group-d3c3d8a",label:"Tree-label-d819155",focusWhite:"Tree-focusWhite-f1e00c2",arrow:"Tree-arrow-03ab2e7",hover:"Tree-hover-3cc4e5d",open:"Tree-open-3f1a336",dark:"Tree-dark-1b4aa00",chrome:"Tree-chrome-bcbcac6",light:"Tree-light-09174ee"};var _excluded2=["theme","hover","colorScheme","children","label","className","onUpdate","onSelect","open"],Tree=props=>{let{theme:theme2,hover,colorScheme,children,label,className,onUpdate,onSelect,open}=props,html=(0,import_objectWithoutProperties2.default)(props,_excluded2),{themeClass,currentTheme}=useTheme({theme:theme2,colorScheme},Tree_css_default),[isOpen,setOpen]=(0,import_react5.useState)(open);(0,import_react5.useEffect)(()=>{setOpen(open)},[open]);let updateState=value=>{setOpen(value),onUpdate&&onUpdate(value)},hasChildren=import_react5.default.Children.count(children)>0,updateFocus=(newNode,previousNode)=>{if(newNode.isSameNode(previousNode||null))return;let focusableNode=newNode.querySelector('[tabindex="-1"]');focusableNode==null||focusableNode.focus(),newNode.setAttribute("aria-selected","true"),previousNode==null||previousNode.removeAttribute("aria-selected")},getParent=(node,role)=>{let parent=node;for(;parent&&parent.parentElement;){if(parent.getAttribute("role")===role)return parent;parent=parent.parentElement}return null},getListElements=node=>{let tree=getParent(node,"tree");return tree?Array.from(tree.querySelectorAll("li")):[]},moveBack=node=>{let group=getParent(node,"group"),toggle=group==null?void 0:group.previousElementSibling;if(toggle&&toggle.getAttribute("tabindex")==="-1"){let toggleParent=toggle.parentElement,nodeParent=node.parentElement;updateFocus(toggleParent,nodeParent)}},moveHome=(node,direction)=>{let elements=getListElements(node);elements.forEach(element=>{element.removeAttribute("aria-selected")}),direction==="start"&&elements[0]&&updateFocus(elements[0]),direction==="end"&&elements[elements.length-1]&&updateFocus(elements[elements.length-1])},moveFocusAdjacent=(node,direction)=>{let elements=getListElements(node)||[];for(let i=0;i<elements.length;i++){let currentNode=elements[i];if(currentNode.getAttribute("aria-selected")==="true"){direction==="up"&&elements[i-1]?updateFocus(elements[i-1],currentNode):direction==="down"&&elements[i+1]&&updateFocus(elements[i+1],currentNode);return}}updateFocus(elements[0])},handleKeypress=(event,isChild2)=>{let node=event.target;(event.key==="Enter"||event.key===" ")&&updateState(!isOpen),event.key==="ArrowRight"&&isOpen&&!isChild2?moveFocusAdjacent(node,"down"):event.key==="ArrowRight"&&updateState(!0),event.key==="ArrowLeft"&&(!isOpen||isChild2)?moveBack(node):event.key==="ArrowLeft"&&updateState(!1),event.key==="ArrowDown"&&moveFocusAdjacent(node,"down"),event.key==="ArrowUp"&&moveFocusAdjacent(node,"up"),event.key==="Home"&&moveHome(node,"start"),event.key==="End"&&moveHome(node,"end")},handleClick=(event,isChild2)=>{let node=event.target,parent=getParent(node,"treeitem"),elements=getListElements(node)||[],found=!1;for(let i=0;i<elements.length;i++){let currentNode=elements[i];if(currentNode.getAttribute("aria-selected")==="true"){parent&&(found=!0,updateFocus(parent,currentNode));break}}!found&&parent&&updateFocus(parent),isChild2||updateState(!isOpen)},handleBlur=event=>{let node=event.currentTarget;!node.contains(document.activeElement)&&node.getAttribute("role")==="tree"&&node.setAttribute("tabindex","0")},handleFocus=event=>{let node=event.target;if(node.getAttribute("role")==="tree"){let selected=node.querySelector('[aria-selected="true"]');selected?updateFocus(selected):moveFocusAdjacent(node,"down"),node.setAttribute("tabindex","-1")}},handleButtonFocus=()=>{onSelect==null||onSelect()},getPaddingStyles=depth2=>{let space=depth2*.9+.3;return{paddingLeft:`${space}em`,width:`calc(100% - ${space}em)`}},{isChild,depth,hasHover}=import_react5.default.useContext(TreeContext_default),showHover=hasHover?hover:!1;if(!isChild)return import_react5.default.createElement("ul",(0,import_extends.default)({role:"tree",tabIndex:0,className:clsx_m_default(Tree_css_default.tree,Tree_css_default.group,themeClass,className),onFocus:handleFocus,onBlur:handleBlur},html),import_react5.default.createElement(TreeContext_default.Provider,{value:{isChild:!0,depth:0,hasHover:showHover}},import_react5.default.createElement(Tree,props)));if(!hasChildren)return import_react5.default.createElement("li",(0,import_extends.default)({role:"treeitem",className:Tree_css_default.item},html),import_react5.default.createElement("div",{role:"button",className:clsx_m_default(Tree_css_default.label,{[Tree_css_default.hover]:showHover,[Tree_css_default.focusWhite]:currentTheme==="firefox"}),tabIndex:-1,style:getPaddingStyles(depth),onKeyDown:e=>{handleKeypress(e,isChild)},onClick:e=>handleClick(e,!0),onFocus:handleButtonFocus},import_react5.default.createElement("span",null,label)));let arrowClass=clsx_m_default(Tree_css_default.arrow,{[Tree_css_default.open]:isOpen});return import_react5.default.createElement("li",{role:"treeitem","aria-expanded":isOpen,className:Tree_css_default.item},import_react5.default.createElement("div",{role:"button",tabIndex:-1,className:clsx_m_default(Tree_css_default.label,{[Tree_css_default.hover]:showHover,[Tree_css_default.focusWhite]:currentTheme==="firefox"}),style:getPaddingStyles(depth),onClick:e=>handleClick(e),onKeyDown:e=>handleKeypress(e),onFocus:handleButtonFocus},import_react5.default.createElement("span",null,import_react5.default.createElement("span",{"aria-hidden":!0,className:arrowClass}),import_react5.default.createElement("span",null,label))),import_react5.default.createElement("ul",(0,import_extends.default)({role:"group",className:clsx_m_default(className,Tree_css_default.group)},html),isOpen&&import_react5.default.Children.map(children,child=>import_react5.default.createElement(TreeContext_default.Provider,{value:{isChild:!0,depth:depth+1,hasHover:showHover}},child))))};Tree.defaultProps={open:!1,hover:!0};var import_extends2=__toESM(require_extends()),import_objectWithoutProperties3=__toESM(require_objectWithoutProperties()),import_react6=__toESM(require("react"));var ObjectInspector_css_default={"object-inspector":"ObjectInspector-object-inspector-0c33e82",objectInspector:"ObjectInspector-object-inspector-0c33e82","object-label":"ObjectInspector-object-label-b81482b",objectLabel:"ObjectInspector-object-label-b81482b",text:"ObjectInspector-text-25f57f3",key:"ObjectInspector-key-4f712bb",value:"ObjectInspector-value-f7ec2e5",string:"ObjectInspector-string-c496000",regex:"ObjectInspector-regex-59d45a3",error:"ObjectInspector-error-b818698",boolean:"ObjectInspector-boolean-2dd1642",number:"ObjectInspector-number-a6daabb",undefined:"ObjectInspector-undefined-3a68263",null:"ObjectInspector-null-74acb50",function:"ObjectInspector-function-07bbdcd","function-decorator":"ObjectInspector-function-decorator-3d22c24",functionDecorator:"ObjectInspector-function-decorator-3d22c24",prototype:"ObjectInspector-prototype-f2449ee",dark:"ObjectInspector-dark-0c96c97",chrome:"ObjectInspector-chrome-2f3ca98",light:"ObjectInspector-light-78bef54"};var _excluded3=["ast","theme","showKey","colorScheme","className"],buildValue=(key,value,valueClass,showKey,depth)=>{let computedKey=key.includes("-")?`"${key}"`:key,isRoot=depth<=0;return import_react6.default.createElement("span",{className:ObjectInspector_css_default.text},!isRoot&&showKey&&import_react6.default.createElement(import_react6.default.Fragment,null,import_react6.default.createElement("span",{className:ObjectInspector_css_default.key},computedKey),import_react6.default.createElement("span",null,":\xA0")),import_react6.default.createElement("span",{className:valueClass},value))},ObjectValue=props=>{let{ast,theme:theme2,showKey,colorScheme,className}=props,html=(0,import_objectWithoutProperties3.default)(props,_excluded3),{themeClass}=useTheme({theme:theme2,colorScheme},ObjectInspector_css_default),[asyncValue,setAsyncValue]=(0,import_react6.useState)(import_react6.default.createElement("span",null)),value=import_react6.default.createElement("span",null);return(0,import_react6.useEffect)(()=>{ast.value instanceof Promise&&(async promise=>{setAsyncValue(buildValue(ast.key,`Promise { "${await getPromiseState(promise)}" }`,ObjectInspector_css_default.key,showKey,ast.depth))})(ast.value)},[ast,showKey]),typeof ast.value=="number"||typeof ast.value=="bigint"?value=buildValue(ast.key,String(ast.value),ObjectInspector_css_default.number,showKey,ast.depth):typeof ast.value=="boolean"?value=buildValue(ast.key,String(ast.value),ObjectInspector_css_default.boolean,showKey,ast.depth):typeof ast.value=="string"?value=buildValue(ast.key,`"${ast.value}"`,ObjectInspector_css_default.string,showKey,ast.depth):typeof ast.value>"u"?value=buildValue(ast.key,"undefined",ObjectInspector_css_default.undefined,showKey,ast.depth):typeof ast.value=="symbol"?value=buildValue(ast.key,ast.value.toString(),ObjectInspector_css_default.string,showKey,ast.depth):typeof ast.value=="function"?value=buildValue(ast.key,`${ast.value.name}()`,ObjectInspector_css_default.key,showKey,ast.depth):typeof ast.value=="object"&&(ast.value===null?value=buildValue(ast.key,"null",ObjectInspector_css_default.null,showKey,ast.depth):Array.isArray(ast.value)?value=buildValue(ast.key,`Array(${ast.value.length})`,ObjectInspector_css_default.key,showKey,ast.depth):ast.value instanceof Date?value=buildValue(ast.key,`Date ${ast.value.toString()}`,ObjectInspector_css_default.value,showKey,ast.depth):ast.value instanceof RegExp?value=buildValue(ast.key,ast.value.toString(),ObjectInspector_css_default.regex,showKey,ast.depth):ast.value instanceof Error?value=buildValue(ast.key,ast.value.toString(),ObjectInspector_css_default.error,showKey,ast.depth):isObject(ast.value)?value=buildValue(ast.key,"{\u2026}",ObjectInspector_css_default.key,showKey,ast.depth):value=buildValue(ast.key,ast.value.constructor.name,ObjectInspector_css_default.key,showKey,ast.depth)),import_react6.default.createElement("span",(0,import_extends2.default)({className:clsx_m_default(themeClass,className)},html),asyncValue,value)};ObjectValue.defaultProps={showKey:!0};var ObjectValue_default=ObjectValue;var import_extends3=__toESM(require_extends()),import_objectWithoutProperties4=__toESM(require_objectWithoutProperties()),import_react7=__toESM(require("react"));var _excluded4=["ast","theme","previewMax","open","colorScheme","className"],buildPreview=(children,previewMax,showKey)=>{let previews=[];for(let i=0;i<children.length;i++){let child=children[i];if(child.isPrototype||(previews.push(import_react7.default.createElement(ObjectValue_default,{key:child.key,ast:child,showKey})),i<children.length-1?previews.push(", "):previews.push(" ")),child.isPrototype&&i===children.length-1&&(previews.pop(),previews.push(" ")),i===previewMax-1&&children.length>previewMax){previews.push("\u2026 ");break}}return previews},getArrayLabel=(ast,open,previewMax,theme2)=>{let l=ast.value.length;return open?import_react7.default.createElement("span",null,"Array(",l,")"):import_react7.default.createElement(import_react7.default.Fragment,null,import_react7.default.createElement("span",null,`${theme2==="firefox"?"Array":""}(${l}) [ `),buildPreview(ast.children,previewMax,!1),import_react7.default.createElement("span",null,"]"))},getObjectLabel=(ast,open,previewMax,theme2)=>ast.isPrototype?import_react7.default.createElement("span",null,`Object ${theme2==="firefox"?"{ \u2026 }":""}`):open?import_react7.default.createElement("span",null,"{\u2026}"):import_react7.default.createElement(import_react7.default.Fragment,null,import_react7.default.createElement("span",null,`${theme2==="firefox"?"Object ":""}{ `),buildPreview(ast.children,previewMax,!0),import_react7.default.createElement("span",null,"}")),getPromiseLabel=(ast,open,previewMax)=>open?import_react7.default.createElement("span",null,`Promise { "${String(ast.children[0].value)}" }`):import_react7.default.createElement(import_react7.default.Fragment,null,import_react7.default.createElement("span",null,"Promise { "),buildPreview(ast.children,previewMax,!0),import_react7.default.createElement("span",null,"}")),getMapLabel=(ast,open,previewMax,theme2)=>{let{size}=ast.value;return open?import_react7.default.createElement("span",null,`Map(${size})`):import_react7.default.createElement(import_react7.default.Fragment,null,import_react7.default.createElement("span",null,`Map${theme2==="chrome"?`(${size})`:""} { `),buildPreview(ast.children,previewMax,!0),import_react7.default.createElement("span",null,"}"))},getSetLabel=(ast,open,previewMax)=>{let{size}=ast.value;return open?import_react7.default.createElement("span",null,"Set(",size,")"):import_react7.default.createElement(import_react7.default.Fragment,null,import_react7.default.createElement("span",null,`Set(${ast.value.size}) {`),buildPreview(ast.children,previewMax,!0),import_react7.default.createElement("span",null,"}"))},ObjectLabel=props=>{let{ast,theme:theme2,previewMax,open,colorScheme,className}=props,html=(0,import_objectWithoutProperties4.default)(props,_excluded4),{themeClass,currentTheme}=useTheme({theme:theme2,colorScheme},ObjectInspector_css_default),isPrototype=ast.isPrototype||!1,classes=clsx_m_default(ObjectInspector_css_default.objectLabel,themeClass,className,{[ObjectInspector_css_default.prototype]:isPrototype}),isRoot=ast.depth<=0,Key=()=>import_react7.default.createElement("span",{className:isPrototype?ObjectInspector_css_default.prototype:ObjectInspector_css_default.key},isRoot?"":`${ast.key}: `);return ast.type==="array"?import_react7.default.createElement("span",(0,import_extends3.default)({className:classes},html),import_react7.default.createElement(Key,null),getArrayLabel(ast,open,previewMax,currentTheme)):ast.type==="function"?import_react7.default.createElement("span",(0,import_extends3.default)({className:classes},html),import_react7.default.createElement(Key,null),currentTheme==="chrome"&&import_react7.default.createElement("span",{className:ObjectInspector_css_default.functionDecorator},"\u0192 "),import_react7.default.createElement("span",{className:clsx_m_default({[ObjectInspector_css_default.function]:!isPrototype})},`${ast.value.name}()`)):ast.type==="promise"?import_react7.default.createElement("span",(0,import_extends3.default)({className:classes},html),import_react7.default.createElement(Key,null),getPromiseLabel(ast,open,previewMax)):ast.type==="map"?import_react7.default.createElement("span",(0,import_extends3.default)({className:classes},html),import_react7.default.createElement(Key,null),getMapLabel(ast,open,previewMax,currentTheme)):ast.type==="set"?import_react7.default.createElement("span",(0,import_extends3.default)({className:classes},html),import_react7.default.createElement(Key,null),getSetLabel(ast,open,previewMax)):import_react7.default.createElement("span",(0,import_extends3.default)({className:classes},html),import_react7.default.createElement(Key,null),getObjectLabel(ast,open,previewMax,currentTheme))};ObjectLabel.defaultProps={previewMax:8,open:!1};var ObjectLabel_default=ObjectLabel;var ObjectInspectorItem=props=>{let{ast,expandLevel,depth}=props,[resolved,setResolved]=(0,import_react8.useState)(),[open,setOpen]=(0,import_react8.useState)(depth<expandLevel);return(0,import_react8.useEffect)(()=>{(async()=>{if(ast.type!=="value"){let promises=ast.children.map(f=>f()),children=await Promise.all(promises),r=(0,import_objectSpread22.default)((0,import_objectSpread22.default)({},ast),{},{children});setResolved(r)}})()},[ast]),resolved?import_react8.default.createElement(Tree,{hover:!1,open,label:import_react8.default.createElement(ObjectLabel_default,{open,ast:resolved}),onSelect:()=>{var _props$onSelect;(_props$onSelect=props.onSelect)===null||_props$onSelect===void 0||_props$onSelect.call(props,ast)},onUpdate:value=>{setOpen(value)}},resolved.children.map(child=>import_react8.default.createElement(ObjectInspectorItem,{key:child.key,ast:child,depth:depth+1,expandLevel,onSelect:props.onSelect}))):import_react8.default.createElement(Tree,{hover:!1,label:import_react8.default.createElement(ObjectValue_default,{ast}),onSelect:()=>{var _props$onSelect2;(_props$onSelect2=props.onSelect)===null||_props$onSelect2===void 0||_props$onSelect2.call(props,ast)}})};ObjectInspectorItem.defaultProps={expandLevel:0,depth:0};var ObjectInspectorItem_default=ObjectInspectorItem;var _excluded5=["data","expandLevel","sortKeys","includePrototypes","className","theme","colorScheme","onSelect"],ObjectInspector=props=>{let{data,expandLevel,sortKeys,includePrototypes,className,theme:theme2,colorScheme,onSelect}=props,html=(0,import_objectWithoutProperties5.default)(props,_excluded5),[ast,setAST]=(0,import_react9.useState)(void 0),{themeClass,currentTheme,currentColorScheme}=useTheme({theme:theme2,colorScheme},ObjectInspector_css_default);return(0,import_react9.useEffect)(()=>{(async()=>{setAST(await parse(data,sortKeys,includePrototypes))})()},[data,sortKeys,includePrototypes]),import_react9.default.createElement("div",(0,import_extends4.default)({className:clsx_m_default(ObjectInspector_css_default.objectInspector,className,themeClass)},html),ast&&import_react9.default.createElement(ThemeProvider,{theme:currentTheme,colorScheme:currentColorScheme},import_react9.default.createElement(ObjectInspectorItem_default,{ast,expandLevel,onSelect})))};ObjectInspector.defaultProps={expandLevel:0,sortKeys:!0,includePrototypes:!0};var import_theming3=require("@storybook/theming"),import_react10=__toESM(require("react")),colorsLight={base:"#444",nullish:"#7D99AA",string:"#16B242",number:"#5D40D0",boolean:"#f41840",objectkey:"#698394",instance:"#A15C20",function:"#EA7509",muted:"#7D99AA",tag:{name:"#6F2CAC",suffix:"#1F99E5"},date:"#459D9C",error:{name:"#D43900",message:"#444"},regex:{source:"#A15C20",flags:"#EA7509"},meta:"#EA7509",method:"#0271B6"},colorsDark={base:"#eee",nullish:"#aaa",string:"#5FE584",number:"#6ba5ff",boolean:"#ff4191",objectkey:"#accfe6",instance:"#E3B551",function:"#E3B551",muted:"#aaa",tag:{name:"#f57bff",suffix:"#8EB5FF"},date:"#70D4D3",error:{name:"#f40",message:"#eee"},regex:{source:"#FAD483",flags:"#E3B551"},meta:"#FAD483",method:"#5EC1FF"},useThemeColors=()=>{let{base}=(0,import_theming3.useTheme)();return base==="dark"?colorsDark:colorsLight},special=/[^A-Z0-9]/i,trimEnd=/[\s.,…]+$/gm,ellipsize=(string,maxlength)=>{if(string.length<=maxlength)return string;for(let i=maxlength-1;i>=0;i-=1)if(special.test(string[i])&&i>10)return`${string.slice(0,i).replace(trimEnd,"")}\u2026`;return`${string.slice(0,maxlength).replace(trimEnd,"")}\u2026`},stringify=value=>{try{return JSON.stringify(value,null,1)}catch{return String(value)}},interleave=(nodes,separator)=>nodes.flatMap((node,index)=>index===nodes.length-1?[node]:[node,import_react10.default.cloneElement(separator,{key:`sep${index}`})]),Node=({value,nested,showObjectInspector,callsById,...props})=>{switch(!0){case value===null:return import_react10.default.createElement(NullNode,{...props});case value===void 0:return import_react10.default.createElement(UndefinedNode,{...props});case Array.isArray(value):return import_react10.default.createElement(ArrayNode,{...props,value,callsById});case typeof value=="string":return import_react10.default.createElement(StringNode,{...props,value});case typeof value=="number":return import_react10.default.createElement(NumberNode,{...props,value});case typeof value=="boolean":return import_react10.default.createElement(BooleanNode,{...props,value});case Object.prototype.hasOwnProperty.call(value,"__date__"):return import_react10.default.createElement(DateNode,{...props,...value.__date__});case Object.prototype.hasOwnProperty.call(value,"__error__"):return import_react10.default.createElement(ErrorNode,{...props,...value.__error__});case Object.prototype.hasOwnProperty.call(value,"__regexp__"):return import_react10.default.createElement(RegExpNode,{...props,...value.__regexp__});case Object.prototype.hasOwnProperty.call(value,"__function__"):return import_react10.default.createElement(FunctionNode,{...props,...value.__function__});case Object.prototype.hasOwnProperty.call(value,"__symbol__"):return import_react10.default.createElement(SymbolNode,{...props,...value.__symbol__});case Object.prototype.hasOwnProperty.call(value,"__element__"):return import_react10.default.createElement(ElementNode,{...props,...value.__element__});case Object.prototype.hasOwnProperty.call(value,"__class__"):return import_react10.default.createElement(ClassNode,{...props,...value.__class__});case Object.prototype.hasOwnProperty.call(value,"__callId__"):return import_react10.default.createElement(MethodCall,{call:callsById.get(value.__callId__),callsById});case Object.prototype.toString.call(value)==="[object Object]":return import_react10.default.createElement(ObjectNode,{value,showInspector:showObjectInspector,callsById,...props});default:return import_react10.default.createElement(OtherNode,{value,...props})}},NullNode=props=>{let colors2=useThemeColors();return import_react10.default.createElement("span",{style:{color:colors2.nullish},...props},"null")},UndefinedNode=props=>{let colors2=useThemeColors();return import_react10.default.createElement("span",{style:{color:colors2.nullish},...props},"undefined")},StringNode=({value,...props})=>{let colors2=useThemeColors();return import_react10.default.createElement("span",{style:{color:colors2.string},...props},JSON.stringify(ellipsize(value,50)))},NumberNode=({value,...props})=>{let colors2=useThemeColors();return import_react10.default.createElement("span",{style:{color:colors2.number},...props},value)},BooleanNode=({value,...props})=>{let colors2=useThemeColors();return import_react10.default.createElement("span",{style:{color:colors2.boolean},...props},String(value))},ArrayNode=({value,nested=!1,callsById})=>{let colors2=useThemeColors();if(nested)return import_react10.default.createElement("span",{style:{color:colors2.base}},"[\u2026]");let nodes=value.slice(0,3).map(v=>import_react10.default.createElement(Node,{key:JSON.stringify(v),value:v,nested:!0,callsById})),nodelist=interleave(nodes,import_react10.default.createElement("span",null,", "));return value.length<=3?import_react10.default.createElement("span",{style:{color:colors2.base}},"[",nodelist,"]"):import_react10.default.createElement("span",{style:{color:colors2.base}},"(",value.length,") [",nodelist,", \u2026]")},ObjectNode=({showInspector,value,callsById,nested=!1})=>{let isDarkMode=(0,import_theming3.useTheme)().base==="dark",colors2=useThemeColors();if(showInspector)return import_react10.default.createElement(import_react10.default.Fragment,null,import_react10.default.createElement(ObjectInspector,{id:"interactions-object-inspector",data:value,includePrototypes:!1,colorScheme:isDarkMode?"dark":"light"}));if(nested)return import_react10.default.createElement("span",{style:{color:colors2.base}},"{\u2026}");let nodelist=interleave(Object.entries(value).slice(0,2).map(([k,v])=>import_react10.default.createElement(import_react10.Fragment,{key:k},import_react10.default.createElement("span",{style:{color:colors2.objectkey}},k,": "),import_react10.default.createElement(Node,{value:v,callsById,nested:!0}))),import_react10.default.createElement("span",null,", "));return Object.keys(value).length<=2?import_react10.default.createElement("span",{style:{color:colors2.base}},"{ ",nodelist," }"):import_react10.default.createElement("span",{style:{color:colors2.base}},"(",Object.keys(value).length,") ","{ ",nodelist,", \u2026 }")},ClassNode=({name})=>{let colors2=useThemeColors();return import_react10.default.createElement("span",{style:{color:colors2.instance}},name)},FunctionNode=({name})=>{let colors2=useThemeColors();return name?import_react10.default.createElement("span",{style:{color:colors2.function}},name):import_react10.default.createElement("span",{style:{color:colors2.nullish,fontStyle:"italic"}},"anonymous")},ElementNode=({prefix,localName,id,classNames=[],innerText})=>{let name=prefix?`${prefix}:${localName}`:localName,colors2=useThemeColors();return import_react10.default.createElement("span",{style:{wordBreak:"keep-all"}},import_react10.default.createElement("span",{key:`${name}_lt`,style:{color:colors2.muted}},"<"),import_react10.default.createElement("span",{key:`${name}_tag`,style:{color:colors2.tag.name}},name),import_react10.default.createElement("span",{key:`${name}_suffix`,style:{color:colors2.tag.suffix}},id?`#${id}`:classNames.reduce((acc,className)=>`${acc}.${className}`,"")),import_react10.default.createElement("span",{key:`${name}_gt`,style:{color:colors2.muted}},">"),!id&&classNames.length===0&&innerText&&import_react10.default.createElement(import_react10.default.Fragment,null,import_react10.default.createElement("span",{key:`${name}_text`},innerText),import_react10.default.createElement("span",{key:`${name}_close_lt`,style:{color:colors2.muted}},"<"),import_react10.default.createElement("span",{key:`${name}_close_tag`,style:{color:colors2.tag.name}},"/",name),import_react10.default.createElement("span",{key:`${name}_close_gt`,style:{color:colors2.muted}},">")))},DateNode=({value})=>{let[date,time,ms]=value.split(/[T.Z]/),colors2=useThemeColors();return import_react10.default.createElement("span",{style:{whiteSpace:"nowrap",color:colors2.date}},date,import_react10.default.createElement("span",{style:{opacity:.7}},"T"),time==="00:00:00"?import_react10.default.createElement("span",{style:{opacity:.7}},time):time,ms==="000"?import_react10.default.createElement("span",{style:{opacity:.7}},".",ms):`.${ms}`,import_react10.default.createElement("span",{style:{opacity:.7}},"Z"))},ErrorNode=({name,message})=>{let colors2=useThemeColors();return import_react10.default.createElement("span",{style:{color:colors2.error.name}},name,message&&": ",message&&import_react10.default.createElement("span",{style:{color:colors2.error.message},title:message.length>50?message:""},ellipsize(message,50)))},RegExpNode=({flags,source})=>{let colors2=useThemeColors();return import_react10.default.createElement("span",{style:{whiteSpace:"nowrap",color:colors2.regex.flags}},"/",import_react10.default.createElement("span",{style:{color:colors2.regex.source}},source),"/",flags)},SymbolNode=({description})=>{let colors2=useThemeColors();return import_react10.default.createElement("span",{style:{whiteSpace:"nowrap",color:colors2.instance}},"Symbol(",description&&import_react10.default.createElement("span",{style:{color:colors2.meta}},'"',description,'"'),")")},OtherNode=({value})=>{let colors2=useThemeColors();return import_react10.default.createElement("span",{style:{color:colors2.meta}},stringify(value))},StepNode=({label})=>{let colors2=useThemeColors(),{typography:typography4}=(0,import_theming3.useTheme)();return import_react10.default.createElement("span",{style:{color:colors2.base,fontFamily:typography4.fonts.base,fontSize:typography4.size.s2-1}},label)},MethodCall=({call,callsById})=>{if(!call)return null;if(call.method==="step"&&call.path.length===0)return import_react10.default.createElement(StepNode,{label:call.args[0]});let path=call.path.flatMap((elem,index)=>{let callId=elem.__callId__;return[callId?import_react10.default.createElement(MethodCall,{key:`elem${index}`,call:callsById.get(callId),callsById}):import_react10.default.createElement("span",{key:`elem${index}`},elem),import_react10.default.createElement("wbr",{key:`wbr${index}`}),import_react10.default.createElement("span",{key:`dot${index}`},".")]}),args=call.args.flatMap((arg,index,array)=>{let node=import_react10.default.createElement(Node,{key:`node${index}`,value:arg,callsById});return index<array.length-1?[node,import_react10.default.createElement("span",{key:`comma${index}`},",\xA0"),import_react10.default.createElement("wbr",{key:`wbr${index}`})]:[node]}),colors2=useThemeColors();return import_react10.default.createElement(import_react10.default.Fragment,null,import_react10.default.createElement("span",{style:{color:colors2.base}},path),import_react10.default.createElement("span",{style:{color:colors2.method}},call.method),import_react10.default.createElement("span",{style:{color:colors2.base}},"(",import_react10.default.createElement("wbr",null),args,import_react10.default.createElement("wbr",null),")"))};var getParams=(line,fromIndex=0)=>{for(let i=fromIndex,depth=1;i<line.length;i+=1)if(line[i]==="("?depth+=1:line[i]===")"&&(depth-=1),depth===0)return line.slice(fromIndex,i);return""},parseValue=value=>{try{return value==="undefined"?void 0:JSON.parse(value)}catch{return value}},StyledExpected=import_theming4.styled.span(({theme:theme2})=>({color:theme2.base==="light"?theme2.color.positiveText:theme2.color.positive})),StyledReceived=import_theming4.styled.span(({theme:theme2})=>({color:theme2.base==="light"?theme2.color.negativeText:theme2.color.negative})),Received=({value,parsed})=>parsed?import_react11.default.createElement(Node,{showObjectInspector:!0,value,style:{color:"#D43900"}}):import_react11.default.createElement(StyledReceived,null,value),Expected=({value,parsed})=>parsed?typeof value=="string"&&value.startsWith("called with")?import_react11.default.createElement(import_react11.default.Fragment,null,value):import_react11.default.createElement(Node,{showObjectInspector:!0,value,style:{color:"#16B242"}}):import_react11.default.createElement(StyledExpected,null,value),MatcherResult=({message})=>{let lines=message.split(`
2
2
  `);return import_react11.default.createElement("pre",{style:{margin:0,padding:"8px 10px 8px 36px",fontSize:import_theming4.typography.size.s1}},lines.flatMap((line,index)=>{if(line.startsWith("expect(")){let received=getParams(line,7),remainderIndex=received&&7+received.length,matcher=received&&line.slice(remainderIndex).match(/\.(to|last|nth)[A-Z]\w+\(/);if(matcher){let expectedIndex=remainderIndex+matcher.index+matcher[0].length,expected=getParams(line,expectedIndex);if(expected)return["expect(",import_react11.default.createElement(Received,{key:`received_${received}`,value:received}),line.slice(remainderIndex,expectedIndex),import_react11.default.createElement(Expected,{key:`expected_${expected}`,value:expected}),line.slice(expectedIndex+expected.length),import_react11.default.createElement("br",{key:`br${index}`})]}}if(line.match(/^\s*- /))return[import_react11.default.createElement(Expected,{key:line+index,value:line}),import_react11.default.createElement("br",{key:`br${index}`})];if(line.match(/^\s*\+ /))return[import_react11.default.createElement(Received,{key:line+index,value:line}),import_react11.default.createElement("br",{key:`br${index}`})];let[,assertionLabel,assertionValue]=line.match(/^(Expected|Received): (.*)$/)||[];if(assertionLabel&&assertionValue)return assertionLabel==="Expected"?["Expected: ",import_react11.default.createElement(Expected,{key:line+index,value:parseValue(assertionValue),parsed:!0}),import_react11.default.createElement("br",{key:`br${index}`})]:["Received: ",import_react11.default.createElement(Received,{key:line+index,value:parseValue(assertionValue),parsed:!0}),import_react11.default.createElement("br",{key:`br${index}`})];let[,prefix,numberOfCalls]=line.match(/(Expected number|Received number|Number) of calls: (\d+)$/i)||[];if(prefix&&numberOfCalls)return[`${prefix} of calls: `,import_react11.default.createElement(Node,{key:line+index,value:Number(numberOfCalls)}),import_react11.default.createElement("br",{key:`br${index}`})];let[,receivedValue]=line.match(/^Received has value: (.+)$/)||[];return receivedValue?["Received has value: ",import_react11.default.createElement(Node,{key:line+index,value:parseValue(receivedValue)}),import_react11.default.createElement("br",{key:`br${index}`})]:[import_react11.default.createElement("span",{key:line+index},line),import_react11.default.createElement("br",{key:`br${index}`})]}))};var import_react12=__toESM(require("react")),import_components2=require("@storybook/components"),import_instrumenter3=require("@storybook/instrumenter"),import_theming5=require("@storybook/theming"),import_polished=require("polished");var colors={pure:{gray:{500:"#CCCCCC"}}},theme={colors},theme_default=theme;var{colors:{pure:{gray}}}=theme_default,StyledStatusIcon=(0,import_theming5.styled)(import_components2.Icons)(({theme:theme2,status})=>{let color={[import_instrumenter3.CallStates.DONE]:theme2.color.positive,[import_instrumenter3.CallStates.ERROR]:theme2.color.negative,[import_instrumenter3.CallStates.ACTIVE]:theme2.color.secondary,[import_instrumenter3.CallStates.WAITING]:(0,import_polished.transparentize)(.5,gray[500])}[status];return{width:status===import_instrumenter3.CallStates.WAITING?6:12,height:status===import_instrumenter3.CallStates.WAITING?6:12,color,justifySelf:"center"}}),StatusIcon=({status,className})=>{let icon={[import_instrumenter3.CallStates.DONE]:"check",[import_instrumenter3.CallStates.ERROR]:"stopalt",[import_instrumenter3.CallStates.ACTIVE]:"play",[import_instrumenter3.CallStates.WAITING]:"circle"}[status];return import_react12.default.createElement(StyledStatusIcon,{"data-testid":`icon-${status}`,status,icon,className})};var MethodCallWrapper=import_theming6.styled.div(()=>({fontFamily:import_theming6.typography.fonts.mono,fontSize:import_theming6.typography.size.s1,overflowWrap:"break-word",inlineSize:"calc( 100% - 40px )"})),RowContainer=(0,import_theming6.styled)("div",{shouldForwardProp:prop=>!["call","pausedAt"].includes(prop.toString())})(({theme:theme2,call})=>({position:"relative",display:"flex",flexDirection:"column",borderBottom:`1px solid ${theme2.appBorderColor}`,fontFamily:import_theming6.typography.fonts.base,fontSize:13,...call.status===import_instrumenter4.CallStates.ERROR&&{backgroundColor:theme2.base==="dark"?(0,import_polished2.transparentize)(.93,theme2.color.negative):theme2.background.warning},paddingLeft:call.ancestors.length*20}),({theme:theme2,call,pausedAt})=>pausedAt===call.id&&{"&::before":{content:'""',position:"absolute",top:-5,zIndex:1,borderTop:"4.5px solid transparent",borderLeft:`7px solid ${theme2.color.warning}`,borderBottom:"4.5px solid transparent"},"&::after":{content:'""',position:"absolute",top:-1,zIndex:1,width:"100%",borderTop:`1.5px solid ${theme2.color.warning}`}}),RowHeader=import_theming6.styled.div(({theme:theme2,isInteractive})=>({display:"flex","&:hover":isInteractive?{}:{background:theme2.background.hoverable}})),RowLabel=(0,import_theming6.styled)("button",{shouldForwardProp:prop=>!["call"].includes(prop.toString())})(({theme:theme2,disabled,call})=>({flex:1,display:"grid",background:"none",border:0,gridTemplateColumns:"15px 1fr",alignItems:"center",minHeight:40,margin:0,padding:"8px 15px",textAlign:"start",cursor:disabled||call.status===import_instrumenter4.CallStates.ERROR?"default":"pointer","&:focus-visible":{outline:0,boxShadow:`inset 3px 0 0 0 ${call.status===import_instrumenter4.CallStates.ERROR?theme2.color.warning:theme2.color.secondary}`,background:call.status===import_instrumenter4.CallStates.ERROR?"transparent":theme2.background.hoverable},"& > div":{opacity:call.status===import_instrumenter4.CallStates.WAITING?.5:1}})),RowActions=import_theming6.styled.div({padding:6}),StyledIconButton2=(0,import_theming6.styled)(import_components3.IconButton)(({theme:theme2})=>({color:theme2.textMutedColor,margin:"0 3px"})),Note2=(0,import_theming6.styled)(import_components3.TooltipNote)(({theme:theme2})=>({fontFamily:theme2.typography.fonts.base})),RowMessage=(0,import_theming6.styled)("div")(({theme:theme2})=>({padding:"8px 10px 8px 36px",fontSize:import_theming6.typography.size.s1,color:theme2.color.defaultText,pre:{margin:0,padding:0}})),Exception=({exception})=>{if(exception.message.startsWith("expect("))return React13.createElement(MatcherResult,{...exception});let paragraphs=exception.message.split(`
3
3
 
4
- `),more=paragraphs.length>1;return React13.createElement(RowMessage,null,React13.createElement("pre",null,paragraphs[0]),more&&React13.createElement("p",null,"See the full stack trace in the browser console."))},Interaction=({call,callsById,controls,controlStates,childCallIds,isHidden,isCollapsed,toggleCollapsed,pausedAt})=>{var _a;let[isHovered,setIsHovered]=React13.useState(!1),isInteractive=!controlStates.goto||!call.interceptable||!!call.ancestors.length;return isHidden?null:React13.createElement(RowContainer,{call,pausedAt},React13.createElement(RowHeader,{isInteractive},React13.createElement(RowLabel,{"aria-label":"Interaction step",call,onClick:()=>controls.goto(call.id),disabled:isInteractive,onMouseEnter:()=>controlStates.goto&&setIsHovered(!0),onMouseLeave:()=>controlStates.goto&&setIsHovered(!1)},React13.createElement(StatusIcon,{status:isHovered?import_instrumenter4.CallStates.ACTIVE:call.status}),React13.createElement(MethodCallWrapper,{style:{marginLeft:6,marginBottom:1}},React13.createElement(MethodCall,{call,callsById}))),React13.createElement(RowActions,null,(childCallIds==null?void 0:childCallIds.length)>0&&React13.createElement(import_components3.WithTooltip,{hasChrome:!1,tooltip:React13.createElement(Note2,{note:`${isCollapsed?"Show":"Hide"} interactions`})},React13.createElement(StyledIconButton2,{containsIcon:!0,onClick:toggleCollapsed},React13.createElement(import_components3.Icons,{icon:"listunordered"}))))),call.status===import_instrumenter4.CallStates.ERROR&&((_a=call.exception)==null?void 0:_a.callId)===call.id&&React13.createElement(Exception,{exception:call.exception}))};var Container=import_theming7.styled.div(({theme:theme2,withException})=>({minHeight:"100%",background:theme2.background.content,...withException&&{backgroundColor:theme2.base==="dark"?(0,import_polished3.transparentize)(.93,theme2.color.negative):theme2.background.warning}})),CaughtException=import_theming7.styled.div(({theme:theme2})=>({padding:15,fontSize:theme2.typography.size.s2-1,lineHeight:"19px"})),CaughtExceptionCode=import_theming7.styled.code(({theme:theme2})=>({margin:"0 1px",padding:3,fontSize:theme2.typography.size.s1-1,lineHeight:1,verticalAlign:"top",background:"rgba(0, 0, 0, 0.05)",border:`1px solid ${theme2.appBorderColor}`,borderRadius:3})),CaughtExceptionTitle=import_theming7.styled.div({paddingBottom:4,fontWeight:"bold"}),CaughtExceptionDescription=import_theming7.styled.p({margin:0,padding:"0 0 20px"}),CaughtExceptionStack=import_theming7.styled.pre(({theme:theme2})=>({margin:0,padding:0,fontSize:theme2.typography.size.s1-1})),InteractionsPanel=React14.memo(function({calls,controls,controlStates,interactions,fileName,hasException,caughtException,isPlaying,pausedAt,onScrollToEnd,endRef}){var _a;return React14.createElement(Container,{withException:!!caughtException},(interactions.length>0||hasException)&&React14.createElement(Subnav,{controls,controlStates,status:isPlaying?import_instrumenter5.CallStates.ACTIVE:hasException?import_instrumenter5.CallStates.ERROR:import_instrumenter5.CallStates.DONE,storyFileName:fileName,onScrollToEnd}),React14.createElement("div",{"aria-label":"Interactions list"},interactions.map(call=>React14.createElement(Interaction,{key:call.id,call,callsById:calls,controls,controlStates,childCallIds:call.childCallIds,isHidden:call.isHidden,isCollapsed:call.isCollapsed,toggleCollapsed:call.toggleCollapsed,pausedAt}))),caughtException&&!((_a=caughtException.message)!=null&&_a.startsWith("ignoredException"))&&React14.createElement(CaughtException,null,React14.createElement(CaughtExceptionTitle,null,"Caught exception in ",React14.createElement(CaughtExceptionCode,null,"play")," function"),React14.createElement(CaughtExceptionDescription,null,"This story threw an error after it finished rendering which means your interactions couldn' t be run.Go to this story' s play function in ",fileName," to fix."),React14.createElement(CaughtExceptionStack,{"data-chromatic":"ignore"},caughtException.stack||`${caughtException.name}: ${caughtException.message}`)),React14.createElement("div",{ref:endRef}),!isPlaying&&!caughtException&&interactions.length===0&&React14.createElement(import_components4.Placeholder,null,"No interactions found",React14.createElement(import_components4.Link,{href:"https://storybook.js.org/docs/react/writing-stories/play-function",target:"_blank",withArrow:!0},"Learn how to add interactions to your story")))});var INITIAL_CONTROL_STATES={start:!1,back:!1,goto:!1,next:!1,end:!1},getInteractions=({log,calls,collapsed,setCollapsed})=>{let callsById=new Map,childCallMap=new Map;return log.map(({callId,ancestors,status})=>{let isHidden=!1;return ancestors.forEach(ancestor=>{collapsed.has(ancestor)&&(isHidden=!0),childCallMap.set(ancestor,(childCallMap.get(ancestor)||[]).concat(callId))}),{...calls.get(callId),status,isHidden}}).map(call=>{var _a;let status=call.status===import_instrumenter6.CallStates.ERROR&&((_a=callsById.get(call.ancestors.slice(-1)[0]))==null?void 0:_a.status)===import_instrumenter6.CallStates.ACTIVE?import_instrumenter6.CallStates.ACTIVE:call.status;return callsById.set(call.id,{...call,status}),{...call,status,childCallIds:childCallMap.get(call.id),isCollapsed:collapsed.has(call.id),toggleCollapsed:()=>setCollapsed(ids=>(ids.has(call.id)?ids.delete(call.id):ids.add(call.id),new Set(ids)))}})},Panel=(0,import_react13.memo)(function({storyId}){let[addonState,set]=(0,import_manager_api.useAddonState)(ADDON_ID,{controlStates:INITIAL_CONTROL_STATES,isErrored:!1,pausedAt:void 0,interactions:[],isPlaying:!1,hasException:!1,caughtException:void 0,interactionsCount:0}),[scrollTarget,setScrollTarget]=(0,import_react13.useState)(void 0),[collapsed,setCollapsed]=(0,import_react13.useState)(new Set),{controlStates=INITIAL_CONTROL_STATES,isErrored=!1,pausedAt=void 0,interactions=[],isPlaying=!1,caughtException=void 0}=addonState,log=(0,import_react13.useRef)([]),calls=(0,import_react13.useRef)(new Map),setCall=({status,...call})=>calls.current.set(call.id,call),endRef=(0,import_react13.useRef)();(0,import_react13.useEffect)(()=>{let observer;return import_global.global.IntersectionObserver&&(observer=new import_global.global.IntersectionObserver(([end])=>setScrollTarget(end.isIntersecting?void 0:end.target),{root:import_global.global.document.querySelector("#panel-tab-content")}),endRef.current&&observer.observe(endRef.current)),()=>observer==null?void 0:observer.disconnect()},[]);let emit=(0,import_manager_api.useChannel)({[import_instrumenter6.EVENTS.CALL]:setCall,[import_instrumenter6.EVENTS.SYNC]:payload=>{set(s=>{let list=getInteractions({log:payload.logItems,calls:calls.current,collapsed,setCollapsed});return{...s,controlStates:payload.controlStates,pausedAt:payload.pausedAt,interactions:list,interactionsCount:list.filter(({method})=>method!=="step").length}}),log.current=payload.logItems},[import_core_events.STORY_RENDER_PHASE_CHANGED]:event=>{if(event.newPhase==="preparing"){set(s=>({controlStates:INITIAL_CONTROL_STATES,isErrored:!1,pausedAt:void 0,interactions:[],isPlaying:!1,isRerunAnimating:!1,scrollTarget,collapsed:new Set,hasException:!1,caughtException:void 0,interactionsCount:0}));return}set(s=>({...s,isPlaying:event.newPhase==="playing",pausedAt:void 0,...event.newPhase==="rendering"?{isErrored:!1,caughtException:void 0}:{}}))},[import_core_events.STORY_THREW_EXCEPTION]:()=>{set(s=>({...s,isErrored:!0}))},[import_core_events.PLAY_FUNCTION_THREW_EXCEPTION]:e=>{(e==null?void 0:e.message)!==import_core_events.IGNORED_EXCEPTION.message?set(s=>({...s,caughtException:e})):set(s=>({...s,caughtException:void 0}))}},[collapsed]);(0,import_react13.useEffect)(()=>{set(s=>{let list=getInteractions({log:log.current,calls:calls.current,collapsed,setCollapsed});return{...s,interactions:list,interactionsCount:list.filter(({method})=>method!=="step").length}})},[collapsed]);let controls=(0,import_react13.useMemo)(()=>({start:()=>emit(import_instrumenter6.EVENTS.START,{storyId}),back:()=>emit(import_instrumenter6.EVENTS.BACK,{storyId}),goto:callId=>emit(import_instrumenter6.EVENTS.GOTO,{storyId,callId}),next:()=>emit(import_instrumenter6.EVENTS.NEXT,{storyId}),end:()=>emit(import_instrumenter6.EVENTS.END,{storyId}),rerun:()=>{emit(import_core_events.FORCE_REMOUNT,{storyId})}}),[storyId]),storyFilePath=(0,import_manager_api.useParameter)("fileName",""),[fileName]=storyFilePath.toString().split("/").slice(-1),scrollToTarget=()=>scrollTarget==null?void 0:scrollTarget.scrollIntoView({behavior:"smooth",block:"end"}),hasException=!!caughtException||interactions.some(v=>v.status===import_instrumenter6.CallStates.ERROR);return isErrored?import_react13.default.createElement(import_react13.Fragment,{key:"interactions"}):import_react13.default.createElement(import_react13.Fragment,{key:"interactions"},import_react13.default.createElement(InteractionsPanel,{calls:calls.current,controls,controlStates,interactions,fileName,hasException,caughtException,isPlaying,pausedAt,endRef,onScrollToEnd:scrollTarget&&scrollToTarget}))});var import_theming8=require("@storybook/theming");var TabIcon=(0,import_theming8.styled)(StatusIcon)({marginLeft:5});function Title(){let[addonState={}]=(0,import_manager_api2.useAddonState)(ADDON_ID),{hasException,interactionsCount}=addonState;return import_react14.default.createElement("div",null,import_react14.default.createElement(import_components5.Spaced,{col:1},import_react14.default.createElement("span",{style:{display:"inline-block",verticalAlign:"middle"}},"Interactions"),interactionsCount&&!hasException?import_react14.default.createElement(import_components5.Badge,{status:"neutral"},interactionsCount):null,hasException?import_react14.default.createElement(TabIcon,{status:import_instrumenter7.CallStates.ERROR}):null))}import_manager_api2.addons.register(ADDON_ID,api=>{import_manager_api2.addons.add(PANEL_ID,{type:import_manager_api2.types.PANEL,title:Title,match:({viewMode})=>viewMode==="story",render:({active})=>{let newLocal=(0,import_react14.useCallback)(({state})=>({storyId:state.storyId}),[]);return import_react14.default.createElement(import_components5.AddonPanel,{active},import_react14.default.createElement(import_manager_api2.Consumer,{filter:newLocal},({storyId})=>import_react14.default.createElement(Panel,{storyId})))}})});
4
+ `),more=paragraphs.length>1;return React13.createElement(RowMessage,null,React13.createElement("pre",null,paragraphs[0]),more&&React13.createElement("p",null,"See the full stack trace in the browser console."))},Interaction=({call,callsById,controls,controlStates,childCallIds,isHidden,isCollapsed,toggleCollapsed,pausedAt})=>{var _a;let[isHovered,setIsHovered]=React13.useState(!1),isInteractive=!controlStates.goto||!call.interceptable||!!call.ancestors.length;return isHidden?null:React13.createElement(RowContainer,{call,pausedAt},React13.createElement(RowHeader,{isInteractive},React13.createElement(RowLabel,{"aria-label":"Interaction step",call,onClick:()=>controls.goto(call.id),disabled:isInteractive,onMouseEnter:()=>controlStates.goto&&setIsHovered(!0),onMouseLeave:()=>controlStates.goto&&setIsHovered(!1)},React13.createElement(StatusIcon,{status:isHovered?import_instrumenter4.CallStates.ACTIVE:call.status}),React13.createElement(MethodCallWrapper,{style:{marginLeft:6,marginBottom:1}},React13.createElement(MethodCall,{call,callsById}))),React13.createElement(RowActions,null,(childCallIds==null?void 0:childCallIds.length)>0&&React13.createElement(import_components3.WithTooltip,{hasChrome:!1,tooltip:React13.createElement(Note2,{note:`${isCollapsed?"Show":"Hide"} interactions`})},React13.createElement(StyledIconButton2,{containsIcon:!0,onClick:toggleCollapsed},React13.createElement(import_experimental2.Icon.ListUnordered,null))))),call.status===import_instrumenter4.CallStates.ERROR&&((_a=call.exception)==null?void 0:_a.callId)===call.id&&React13.createElement(Exception,{exception:call.exception}))};var Container=import_theming7.styled.div(({theme:theme2,withException})=>({minHeight:"100%",background:theme2.background.content,...withException&&{backgroundColor:theme2.base==="dark"?(0,import_polished3.transparentize)(.93,theme2.color.negative):theme2.background.warning}})),CaughtException=import_theming7.styled.div(({theme:theme2})=>({padding:15,fontSize:theme2.typography.size.s2-1,lineHeight:"19px"})),CaughtExceptionCode=import_theming7.styled.code(({theme:theme2})=>({margin:"0 1px",padding:3,fontSize:theme2.typography.size.s1-1,lineHeight:1,verticalAlign:"top",background:"rgba(0, 0, 0, 0.05)",border:`1px solid ${theme2.appBorderColor}`,borderRadius:3})),CaughtExceptionTitle=import_theming7.styled.div({paddingBottom:4,fontWeight:"bold"}),CaughtExceptionDescription=import_theming7.styled.p({margin:0,padding:"0 0 20px"}),CaughtExceptionStack=import_theming7.styled.pre(({theme:theme2})=>({margin:0,padding:0,fontSize:theme2.typography.size.s1-1})),InteractionsPanel=React14.memo(function({calls,controls,controlStates,interactions,fileName,hasException,caughtException,isPlaying,pausedAt,onScrollToEnd,endRef}){var _a;return React14.createElement(Container,{withException:!!caughtException},(interactions.length>0||hasException)&&React14.createElement(Subnav,{controls,controlStates,status:isPlaying?import_instrumenter5.CallStates.ACTIVE:hasException?import_instrumenter5.CallStates.ERROR:import_instrumenter5.CallStates.DONE,storyFileName:fileName,onScrollToEnd}),React14.createElement("div",{"aria-label":"Interactions list"},interactions.map(call=>React14.createElement(Interaction,{key:call.id,call,callsById:calls,controls,controlStates,childCallIds:call.childCallIds,isHidden:call.isHidden,isCollapsed:call.isCollapsed,toggleCollapsed:call.toggleCollapsed,pausedAt}))),caughtException&&!((_a=caughtException.message)!=null&&_a.startsWith("ignoredException"))&&React14.createElement(CaughtException,null,React14.createElement(CaughtExceptionTitle,null,"Caught exception in ",React14.createElement(CaughtExceptionCode,null,"play")," function"),React14.createElement(CaughtExceptionDescription,null,"This story threw an error after it finished rendering which means your interactions couldn' t be run.Go to this story' s play function in ",fileName," to fix."),React14.createElement(CaughtExceptionStack,{"data-chromatic":"ignore"},caughtException.stack||`${caughtException.name}: ${caughtException.message}`)),React14.createElement("div",{ref:endRef}),!isPlaying&&!caughtException&&interactions.length===0&&React14.createElement(import_components4.Placeholder,null,"No interactions found",React14.createElement(import_components4.Link,{href:"https://storybook.js.org/docs/react/writing-stories/play-function",target:"_blank",withArrow:!0},"Learn how to add interactions to your story")))});var INITIAL_CONTROL_STATES={start:!1,back:!1,goto:!1,next:!1,end:!1},getInteractions=({log,calls,collapsed,setCollapsed})=>{let callsById=new Map,childCallMap=new Map;return log.map(({callId,ancestors,status})=>{let isHidden=!1;return ancestors.forEach(ancestor=>{collapsed.has(ancestor)&&(isHidden=!0),childCallMap.set(ancestor,(childCallMap.get(ancestor)||[]).concat(callId))}),{...calls.get(callId),status,isHidden}}).map(call=>{var _a;let status=call.status===import_instrumenter6.CallStates.ERROR&&((_a=callsById.get(call.ancestors.slice(-1)[0]))==null?void 0:_a.status)===import_instrumenter6.CallStates.ACTIVE?import_instrumenter6.CallStates.ACTIVE:call.status;return callsById.set(call.id,{...call,status}),{...call,status,childCallIds:childCallMap.get(call.id),isCollapsed:collapsed.has(call.id),toggleCollapsed:()=>setCollapsed(ids=>(ids.has(call.id)?ids.delete(call.id):ids.add(call.id),new Set(ids)))}})},Panel=(0,import_react13.memo)(function({storyId}){let[addonState,set]=(0,import_manager_api.useAddonState)(ADDON_ID,{controlStates:INITIAL_CONTROL_STATES,isErrored:!1,pausedAt:void 0,interactions:[],isPlaying:!1,hasException:!1,caughtException:void 0,interactionsCount:0}),[scrollTarget,setScrollTarget]=(0,import_react13.useState)(void 0),[collapsed,setCollapsed]=(0,import_react13.useState)(new Set),{controlStates=INITIAL_CONTROL_STATES,isErrored=!1,pausedAt=void 0,interactions=[],isPlaying=!1,caughtException=void 0}=addonState,log=(0,import_react13.useRef)([]),calls=(0,import_react13.useRef)(new Map),setCall=({status,...call})=>calls.current.set(call.id,call),endRef=(0,import_react13.useRef)();(0,import_react13.useEffect)(()=>{let observer;return import_global.global.IntersectionObserver&&(observer=new import_global.global.IntersectionObserver(([end])=>setScrollTarget(end.isIntersecting?void 0:end.target),{root:import_global.global.document.querySelector("#panel-tab-content")}),endRef.current&&observer.observe(endRef.current)),()=>observer==null?void 0:observer.disconnect()},[]);let emit=(0,import_manager_api.useChannel)({[import_instrumenter6.EVENTS.CALL]:setCall,[import_instrumenter6.EVENTS.SYNC]:payload=>{set(s=>{let list=getInteractions({log:payload.logItems,calls:calls.current,collapsed,setCollapsed});return{...s,controlStates:payload.controlStates,pausedAt:payload.pausedAt,interactions:list,interactionsCount:list.filter(({method})=>method!=="step").length}}),log.current=payload.logItems},[import_core_events.STORY_RENDER_PHASE_CHANGED]:event=>{if(event.newPhase==="preparing"){set(s=>({controlStates:INITIAL_CONTROL_STATES,isErrored:!1,pausedAt:void 0,interactions:[],isPlaying:!1,isRerunAnimating:!1,scrollTarget,collapsed:new Set,hasException:!1,caughtException:void 0,interactionsCount:0}));return}set(s=>({...s,isPlaying:event.newPhase==="playing",pausedAt:void 0,...event.newPhase==="rendering"?{isErrored:!1,caughtException:void 0}:{}}))},[import_core_events.STORY_THREW_EXCEPTION]:()=>{set(s=>({...s,isErrored:!0}))},[import_core_events.PLAY_FUNCTION_THREW_EXCEPTION]:e=>{(e==null?void 0:e.message)!==import_core_events.IGNORED_EXCEPTION.message?set(s=>({...s,caughtException:e})):set(s=>({...s,caughtException:void 0}))}},[collapsed]);(0,import_react13.useEffect)(()=>{set(s=>{let list=getInteractions({log:log.current,calls:calls.current,collapsed,setCollapsed});return{...s,interactions:list,interactionsCount:list.filter(({method})=>method!=="step").length}})},[collapsed]);let controls=(0,import_react13.useMemo)(()=>({start:()=>emit(import_instrumenter6.EVENTS.START,{storyId}),back:()=>emit(import_instrumenter6.EVENTS.BACK,{storyId}),goto:callId=>emit(import_instrumenter6.EVENTS.GOTO,{storyId,callId}),next:()=>emit(import_instrumenter6.EVENTS.NEXT,{storyId}),end:()=>emit(import_instrumenter6.EVENTS.END,{storyId}),rerun:()=>{emit(import_core_events.FORCE_REMOUNT,{storyId})}}),[storyId]),storyFilePath=(0,import_manager_api.useParameter)("fileName",""),[fileName]=storyFilePath.toString().split("/").slice(-1),scrollToTarget=()=>scrollTarget==null?void 0:scrollTarget.scrollIntoView({behavior:"smooth",block:"end"}),hasException=!!caughtException||interactions.some(v=>v.status===import_instrumenter6.CallStates.ERROR);return isErrored?import_react13.default.createElement(import_react13.Fragment,{key:"interactions"}):import_react13.default.createElement(import_react13.Fragment,{key:"interactions"},import_react13.default.createElement(InteractionsPanel,{calls:calls.current,controls,controlStates,interactions,fileName,hasException,caughtException,isPlaying,pausedAt,endRef,onScrollToEnd:scrollTarget&&scrollToTarget}))});var import_theming8=require("@storybook/theming");var TabIcon=(0,import_theming8.styled)(StatusIcon)({marginLeft:5});function Title(){let[addonState={}]=(0,import_manager_api2.useAddonState)(ADDON_ID),{hasException,interactionsCount}=addonState;return import_react14.default.createElement("div",null,import_react14.default.createElement(import_components5.Spaced,{col:1},import_react14.default.createElement("span",{style:{display:"inline-block",verticalAlign:"middle"}},"Interactions"),interactionsCount&&!hasException?import_react14.default.createElement(import_components5.Badge,{status:"neutral"},interactionsCount):null,hasException?import_react14.default.createElement(TabIcon,{status:import_instrumenter7.CallStates.ERROR}):null))}import_manager_api2.addons.register(ADDON_ID,api=>{import_manager_api2.addons.add(PANEL_ID,{type:import_manager_api2.types.PANEL,title:Title,match:({viewMode})=>viewMode==="story",render:({active})=>{let newLocal=(0,import_react14.useCallback)(({state})=>({storyId:state.storyId}),[]);return import_react14.default.createElement(import_components5.AddonPanel,{active},import_react14.default.createElement(import_manager_api2.Consumer,{filter:newLocal},({storyId})=>import_react14.default.createElement(Panel,{storyId})))}})});
package/dist/manager.mjs CHANGED
@@ -8,8 +8,9 @@ import { global } from '@storybook/global';
8
8
  import { STORY_RENDER_PHASE_CHANGED, STORY_THREW_EXCEPTION, PLAY_FUNCTION_THREW_EXCEPTION, IGNORED_EXCEPTION, FORCE_REMOUNT } from '@storybook/core-events';
9
9
  import { styled, typography, useTheme as useTheme$1 } from '@storybook/theming';
10
10
  import { transparentize } from 'polished';
11
+ import { Icon } from '@storybook/components/experimental';
11
12
 
12
- var require_extends=__commonJS({"../../node_modules/@devtools-ds/object-inspector/node_modules/@babel/runtime/helpers/extends.js"(exports,module){function _extends5(){return module.exports=_extends5=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key]);}return target},_extends5.apply(this,arguments)}module.exports=_extends5;}});var require_objectWithoutPropertiesLoose=__commonJS({"../../node_modules/@devtools-ds/object-inspector/node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js"(exports,module){function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return {};var target={},sourceKeys=Object.keys(source),key,i;for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],!(excluded.indexOf(key)>=0)&&(target[key]=source[key]);return target}module.exports=_objectWithoutPropertiesLoose;}});var require_objectWithoutProperties=__commonJS({"../../node_modules/@devtools-ds/object-inspector/node_modules/@babel/runtime/helpers/objectWithoutProperties.js"(exports,module){var objectWithoutPropertiesLoose=require_objectWithoutPropertiesLoose();function _objectWithoutProperties6(source,excluded){if(source==null)return {};var target=objectWithoutPropertiesLoose(source,excluded),key,i;if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],!(excluded.indexOf(key)>=0)&&Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key]);}return target}module.exports=_objectWithoutProperties6;}});var require_defineProperty=__commonJS({"../../node_modules/@devtools-ds/themes/node_modules/@babel/runtime/helpers/defineProperty.js"(exports,module){function _defineProperty(obj,key,value){return key in obj?Object.defineProperty(obj,key,{value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}module.exports=_defineProperty;}});var require_objectSpread2=__commonJS({"../../node_modules/@devtools-ds/themes/node_modules/@babel/runtime/helpers/objectSpread2.js"(exports,module){var defineProperty=require_defineProperty();function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable})),keys.push.apply(keys,symbols);}return keys}function _objectSpread22(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};i%2?ownKeys(source,!0).forEach(function(key){defineProperty(target,key,source[key]);}):Object.getOwnPropertyDescriptors?Object.defineProperties(target,Object.getOwnPropertyDescriptors(source)):ownKeys(source).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key));});}return target}module.exports=_objectSpread22;}});var require_objectWithoutPropertiesLoose2=__commonJS({"../../node_modules/@devtools-ds/themes/node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js"(exports,module){function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return {};var target={},sourceKeys=Object.keys(source),key,i;for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],!(excluded.indexOf(key)>=0)&&(target[key]=source[key]);return target}module.exports=_objectWithoutPropertiesLoose;}});var require_objectWithoutProperties2=__commonJS({"../../node_modules/@devtools-ds/themes/node_modules/@babel/runtime/helpers/objectWithoutProperties.js"(exports,module){var objectWithoutPropertiesLoose=require_objectWithoutPropertiesLoose2();function _objectWithoutProperties6(source,excluded){if(source==null)return {};var target=objectWithoutPropertiesLoose(source,excluded),key,i;if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],!(excluded.indexOf(key)>=0)&&Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key]);}return target}module.exports=_objectWithoutProperties6;}});var require_defineProperty2=__commonJS({"../../node_modules/@devtools-ds/object-inspector/node_modules/@babel/runtime/helpers/defineProperty.js"(exports,module){function _defineProperty(obj,key,value){return key in obj?Object.defineProperty(obj,key,{value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}module.exports=_defineProperty;}});var require_objectSpread22=__commonJS({"../../node_modules/@devtools-ds/object-inspector/node_modules/@babel/runtime/helpers/objectSpread2.js"(exports,module){var defineProperty=require_defineProperty2();function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable})),keys.push.apply(keys,symbols);}return keys}function _objectSpread22(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};i%2?ownKeys(source,!0).forEach(function(key){defineProperty(target,key,source[key]);}):Object.getOwnPropertyDescriptors?Object.defineProperties(target,Object.getOwnPropertyDescriptors(source)):ownKeys(source).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key));});}return target}module.exports=_objectSpread22;}});var require_extends2=__commonJS({"../../node_modules/@devtools-ds/tree/node_modules/@babel/runtime/helpers/extends.js"(exports,module){function _extends5(){return module.exports=_extends5=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key]);}return target},_extends5.apply(this,arguments)}module.exports=_extends5;}});var require_objectWithoutPropertiesLoose3=__commonJS({"../../node_modules/@devtools-ds/tree/node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js"(exports,module){function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return {};var target={},sourceKeys=Object.keys(source),key,i;for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],!(excluded.indexOf(key)>=0)&&(target[key]=source[key]);return target}module.exports=_objectWithoutPropertiesLoose;}});var require_objectWithoutProperties3=__commonJS({"../../node_modules/@devtools-ds/tree/node_modules/@babel/runtime/helpers/objectWithoutProperties.js"(exports,module){var objectWithoutPropertiesLoose=require_objectWithoutPropertiesLoose3();function _objectWithoutProperties6(source,excluded){if(source==null)return {};var target=objectWithoutPropertiesLoose(source,excluded),key,i;if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],!(excluded.indexOf(key)>=0)&&Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key]);}return target}module.exports=_objectWithoutProperties6;}});var ADDON_ID="storybook/interactions",PANEL_ID=`${ADDON_ID}/panel`;var StyledBadge=styled.div(({theme:theme2,status})=>({padding:"4px 6px 4px 8px;",borderRadius:"4px",backgroundColor:{[CallStates.DONE]:theme2.color.positive,[CallStates.ERROR]:theme2.color.negative,[CallStates.ACTIVE]:theme2.color.warning,[CallStates.WAITING]:theme2.color.warning}[status],color:"white",fontFamily:typography.fonts.base,textTransform:"uppercase",fontSize:typography.size.s1,letterSpacing:3,fontWeight:typography.weight.bold,width:65,textAlign:"center"})),StatusBadge=({status})=>{let badgeText={[CallStates.DONE]:"Pass",[CallStates.ERROR]:"Fail",[CallStates.ACTIVE]:"Runs",[CallStates.WAITING]:"Runs"}[status];return React10__default.createElement(StyledBadge,{"aria-label":"Status of the test run",status},badgeText)};var SubnavWrapper=styled.div(({theme:theme2})=>({background:theme2.background.app,borderBottom:`1px solid ${theme2.appBorderColor}`,position:"sticky",top:0,zIndex:1})),StyledSubnav=styled.nav(({theme:theme2})=>({height:40,display:"flex",alignItems:"center",justifyContent:"space-between",paddingLeft:15})),StyledButton=styled(Button)(({theme:theme2})=>({borderRadius:4,padding:6,color:theme2.textMutedColor,"&:not(:disabled)":{"&:hover,&:focus-visible":{color:theme2.color.secondary}}})),Note=styled(TooltipNote)(({theme:theme2})=>({fontFamily:theme2.typography.fonts.base})),StyledIconButton=styled(IconButton)(({theme:theme2})=>({color:theme2.textMutedColor,margin:"0 3px"})),StyledSeparator=styled(Separator)({marginTop:0}),StyledLocation=styled(P)(({theme:theme2})=>({color:theme2.textMutedColor,justifyContent:"flex-end",textAlign:"right",whiteSpace:"nowrap",marginTop:"auto",marginBottom:1,paddingRight:15,fontSize:13})),Group=styled.div({display:"flex",alignItems:"center"}),RewindButton=styled(StyledIconButton)({marginLeft:9}),JumpToEndButton=styled(StyledButton)({marginLeft:9,marginRight:9,marginBottom:1,lineHeight:"12px"}),RerunButton=styled(StyledIconButton)(({theme:theme2,animating,disabled})=>({opacity:disabled?.5:1,svg:{animation:animating&&`${theme2.animation.rotate360} 200ms ease-out`}})),Subnav=({controls,controlStates,status,storyFileName,onScrollToEnd})=>{let buttonText=status===CallStates.ERROR?"Scroll to error":"Scroll to end";return React10__default.createElement(SubnavWrapper,null,React10__default.createElement(Bar,null,React10__default.createElement(StyledSubnav,null,React10__default.createElement(Group,null,React10__default.createElement(StatusBadge,{status}),React10__default.createElement(JumpToEndButton,{onClick:onScrollToEnd,disabled:!onScrollToEnd},buttonText),React10__default.createElement(StyledSeparator,null),React10__default.createElement(WithTooltip,{trigger:"hover",hasChrome:!1,tooltip:React10__default.createElement(Note,{note:"Go to start"})},React10__default.createElement(RewindButton,{"aria-label":"Go to start",containsIcon:!0,onClick:controls.start,disabled:!controlStates.start},React10__default.createElement(Icons,{icon:"rewind"}))),React10__default.createElement(WithTooltip,{trigger:"hover",hasChrome:!1,tooltip:React10__default.createElement(Note,{note:"Go back"})},React10__default.createElement(StyledIconButton,{"aria-label":"Go back",containsIcon:!0,onClick:controls.back,disabled:!controlStates.back},React10__default.createElement(Icons,{icon:"playback"}))),React10__default.createElement(WithTooltip,{trigger:"hover",hasChrome:!1,tooltip:React10__default.createElement(Note,{note:"Go forward"})},React10__default.createElement(StyledIconButton,{"aria-label":"Go forward",containsIcon:!0,onClick:controls.next,disabled:!controlStates.next},React10__default.createElement(Icons,{icon:"playnext"}))),React10__default.createElement(WithTooltip,{trigger:"hover",hasChrome:!1,tooltip:React10__default.createElement(Note,{note:"Go to end"})},React10__default.createElement(StyledIconButton,{"aria-label":"Go to end",containsIcon:!0,onClick:controls.end,disabled:!controlStates.end},React10__default.createElement(Icons,{icon:"fastforward"}))),React10__default.createElement(WithTooltip,{trigger:"hover",hasChrome:!1,tooltip:React10__default.createElement(Note,{note:"Rerun"})},React10__default.createElement(RerunButton,{"aria-label":"Rerun",containsIcon:!0,onClick:controls.rerun},React10__default.createElement(Icons,{icon:"sync"})))),storyFileName&&React10__default.createElement(Group,null,React10__default.createElement(StyledLocation,null,storyFileName)))))};var import_extends4=__toESM(require_extends()),import_objectWithoutProperties5=__toESM(require_objectWithoutProperties());function toVal(mix){var k,y,str="";if(mix)if(typeof mix=="object")if(Array.isArray(mix))for(k=0;k<mix.length;k++)mix[k]&&(y=toVal(mix[k]))&&(str&&(str+=" "),str+=y);else for(k in mix)mix[k]&&(y=toVal(k))&&(str&&(str+=" "),str+=y);else typeof mix!="boolean"&&!mix.call&&(str&&(str+=" "),str+=mix);return str}function clsx_m_default(){for(var i=0,x,str="";i<arguments.length;)(x=toVal(arguments[i++]))&&(str&&(str+=" "),str+=x);return str}var isArray=val=>Array.isArray(val)||ArrayBuffer.isView(val)&&!(val instanceof DataView),isObject=val=>val!==null&&typeof val=="object"&&!isArray(val)&&!(val instanceof Date)&&!(val instanceof RegExp)&&!(val instanceof Error)&&!(val instanceof WeakMap)&&!(val instanceof WeakSet),isKnownObject=val=>isObject(val)||isArray(val)||typeof val=="function"||val instanceof Promise,getPromiseState=promise=>{let unique=/unique/;return Promise.race([promise,unique]).then(result=>result===unique?["pending"]:["fulfilled",result],e=>["rejected",e])},buildAST=async(key,value,depth,sortKeys,isPrototype,showPrototype)=>{let astNode={key,depth,value,type:"value",parent:void 0};if(value&&isKnownObject(value)&&depth<100){let children=[],t="object";if(isArray(value)){for(let i=0;i<value.length;i++)children.push(async()=>{let child=await buildAST(i.toString(),value[i],depth+1,sortKeys);return child.parent=astNode,child});t="array";}else {let keys=Object.getOwnPropertyNames(value);sortKeys&&keys.sort();for(let i=0;i<keys.length;i++){let safeValue;try{safeValue=value[keys[i]];}catch{}children.push(async()=>{let child=await buildAST(keys[i],safeValue,depth+1,sortKeys);return child.parent=astNode,child});}if(typeof value=="function"&&(t="function"),value instanceof Promise){let[status,result]=await getPromiseState(value);children.push(async()=>{let child=await buildAST("<state>",status,depth+1,sortKeys);return child.parent=astNode,child}),status!=="pending"&&children.push(async()=>{let child=await buildAST("<value>",result,depth+1,sortKeys);return child.parent=astNode,child}),t="promise";}if(value instanceof Map){let parsedEntries=Array.from(value.entries()).map(entry=>{let[entryKey,entryValue]=entry;return {"<key>":entryKey,"<value>":entryValue}});children.push(async()=>{let child=await buildAST("<entries>",parsedEntries,depth+1,sortKeys);return child.parent=astNode,child}),children.push(async()=>{let child=await buildAST("size",value.size,depth+1,sortKeys);return child.parent=astNode,child}),t="map";}if(value instanceof Set){let parsedEntries=Array.from(value.entries()).map(entry=>entry[1]);children.push(async()=>{let child=await buildAST("<entries>",parsedEntries,depth+1,sortKeys);return child.parent=astNode,child}),children.push(async()=>{let child=await buildAST("size",value.size,depth+1,sortKeys);return child.parent=astNode,child}),t="set";}}value!==Object.prototype&&showPrototype&&children.push(async()=>{let child=await buildAST("<prototype>",Object.getPrototypeOf(value),depth+1,sortKeys,!0);return child.parent=astNode,child}),astNode.type=t,astNode.children=children,astNode.isPrototype=isPrototype;}return astNode},parse=(data,sortKeys,includePrototypes)=>buildAST("root",data,0,sortKeys===!1?sortKeys:!0,void 0,includePrototypes===!1?includePrototypes:!0);var import_objectSpread2=__toESM(require_objectSpread2()),import_objectWithoutProperties=__toESM(require_objectWithoutProperties2());var _excluded=["children"];var ThemeContext=React10__default.createContext({theme:"chrome",colorScheme:"light"});var ThemeProvider=_ref=>{let{children}=_ref,value=(0, import_objectWithoutProperties.default)(_ref,_excluded),wrappedTheme=React10__default.useContext(ThemeContext);return React10__default.createElement(ThemeContext.Provider,{value:(0, import_objectSpread2.default)((0, import_objectSpread2.default)({},wrappedTheme),value)},children)},useTheme=(props,styles={})=>{let themeContext=React10__default.useContext(ThemeContext),currentTheme=props.theme||themeContext.theme||"chrome",currentColorScheme=props.colorScheme||themeContext.colorScheme||"light",themeClass=clsx_m_default(styles[currentTheme],styles[currentColorScheme]);return {currentColorScheme,currentTheme,themeClass}};var import_objectSpread22=__toESM(require_objectSpread22());var import_extends=__toESM(require_extends2()),import_objectWithoutProperties2=__toESM(require_objectWithoutProperties3());var TreeContext=React10__default.createContext({isChild:!1,depth:0,hasHover:!0}),TreeContext_default=TreeContext;var Tree_css_default={tree:"Tree-tree-fbbbe38",item:"Tree-item-353d6f3",group:"Tree-group-d3c3d8a",label:"Tree-label-d819155",focusWhite:"Tree-focusWhite-f1e00c2",arrow:"Tree-arrow-03ab2e7",hover:"Tree-hover-3cc4e5d",open:"Tree-open-3f1a336",dark:"Tree-dark-1b4aa00",chrome:"Tree-chrome-bcbcac6",light:"Tree-light-09174ee"};var _excluded2=["theme","hover","colorScheme","children","label","className","onUpdate","onSelect","open"],Tree=props=>{let{theme:theme2,hover,colorScheme,children,label,className,onUpdate,onSelect,open}=props,html=(0, import_objectWithoutProperties2.default)(props,_excluded2),{themeClass,currentTheme}=useTheme({theme:theme2,colorScheme},Tree_css_default),[isOpen,setOpen]=useState(open);useEffect(()=>{setOpen(open);},[open]);let updateState=value=>{setOpen(value),onUpdate&&onUpdate(value);},hasChildren=React10__default.Children.count(children)>0,updateFocus=(newNode,previousNode)=>{if(newNode.isSameNode(previousNode||null))return;let focusableNode=newNode.querySelector('[tabindex="-1"]');focusableNode?.focus(),newNode.setAttribute("aria-selected","true"),previousNode?.removeAttribute("aria-selected");},getParent=(node,role)=>{let parent=node;for(;parent&&parent.parentElement;){if(parent.getAttribute("role")===role)return parent;parent=parent.parentElement;}return null},getListElements=node=>{let tree=getParent(node,"tree");return tree?Array.from(tree.querySelectorAll("li")):[]},moveBack=node=>{let group=getParent(node,"group"),toggle=group?.previousElementSibling;if(toggle&&toggle.getAttribute("tabindex")==="-1"){let toggleParent=toggle.parentElement,nodeParent=node.parentElement;updateFocus(toggleParent,nodeParent);}},moveHome=(node,direction)=>{let elements=getListElements(node);elements.forEach(element=>{element.removeAttribute("aria-selected");}),direction==="start"&&elements[0]&&updateFocus(elements[0]),direction==="end"&&elements[elements.length-1]&&updateFocus(elements[elements.length-1]);},moveFocusAdjacent=(node,direction)=>{let elements=getListElements(node)||[];for(let i=0;i<elements.length;i++){let currentNode=elements[i];if(currentNode.getAttribute("aria-selected")==="true"){direction==="up"&&elements[i-1]?updateFocus(elements[i-1],currentNode):direction==="down"&&elements[i+1]&&updateFocus(elements[i+1],currentNode);return}}updateFocus(elements[0]);},handleKeypress=(event,isChild2)=>{let node=event.target;(event.key==="Enter"||event.key===" ")&&updateState(!isOpen),event.key==="ArrowRight"&&isOpen&&!isChild2?moveFocusAdjacent(node,"down"):event.key==="ArrowRight"&&updateState(!0),event.key==="ArrowLeft"&&(!isOpen||isChild2)?moveBack(node):event.key==="ArrowLeft"&&updateState(!1),event.key==="ArrowDown"&&moveFocusAdjacent(node,"down"),event.key==="ArrowUp"&&moveFocusAdjacent(node,"up"),event.key==="Home"&&moveHome(node,"start"),event.key==="End"&&moveHome(node,"end");},handleClick=(event,isChild2)=>{let node=event.target,parent=getParent(node,"treeitem"),elements=getListElements(node)||[],found=!1;for(let i=0;i<elements.length;i++){let currentNode=elements[i];if(currentNode.getAttribute("aria-selected")==="true"){parent&&(found=!0,updateFocus(parent,currentNode));break}}!found&&parent&&updateFocus(parent),isChild2||updateState(!isOpen);},handleBlur=event=>{let node=event.currentTarget;!node.contains(document.activeElement)&&node.getAttribute("role")==="tree"&&node.setAttribute("tabindex","0");},handleFocus=event=>{let node=event.target;if(node.getAttribute("role")==="tree"){let selected=node.querySelector('[aria-selected="true"]');selected?updateFocus(selected):moveFocusAdjacent(node,"down"),node.setAttribute("tabindex","-1");}},handleButtonFocus=()=>{onSelect?.();},getPaddingStyles=depth2=>{let space=depth2*.9+.3;return {paddingLeft:`${space}em`,width:`calc(100% - ${space}em)`}},{isChild,depth,hasHover}=React10__default.useContext(TreeContext_default),showHover=hasHover?hover:!1;if(!isChild)return React10__default.createElement("ul",(0, import_extends.default)({role:"tree",tabIndex:0,className:clsx_m_default(Tree_css_default.tree,Tree_css_default.group,themeClass,className),onFocus:handleFocus,onBlur:handleBlur},html),React10__default.createElement(TreeContext_default.Provider,{value:{isChild:!0,depth:0,hasHover:showHover}},React10__default.createElement(Tree,props)));if(!hasChildren)return React10__default.createElement("li",(0, import_extends.default)({role:"treeitem",className:Tree_css_default.item},html),React10__default.createElement("div",{role:"button",className:clsx_m_default(Tree_css_default.label,{[Tree_css_default.hover]:showHover,[Tree_css_default.focusWhite]:currentTheme==="firefox"}),tabIndex:-1,style:getPaddingStyles(depth),onKeyDown:e=>{handleKeypress(e,isChild);},onClick:e=>handleClick(e,!0),onFocus:handleButtonFocus},React10__default.createElement("span",null,label)));let arrowClass=clsx_m_default(Tree_css_default.arrow,{[Tree_css_default.open]:isOpen});return React10__default.createElement("li",{role:"treeitem","aria-expanded":isOpen,className:Tree_css_default.item},React10__default.createElement("div",{role:"button",tabIndex:-1,className:clsx_m_default(Tree_css_default.label,{[Tree_css_default.hover]:showHover,[Tree_css_default.focusWhite]:currentTheme==="firefox"}),style:getPaddingStyles(depth),onClick:e=>handleClick(e),onKeyDown:e=>handleKeypress(e),onFocus:handleButtonFocus},React10__default.createElement("span",null,React10__default.createElement("span",{"aria-hidden":!0,className:arrowClass}),React10__default.createElement("span",null,label))),React10__default.createElement("ul",(0, import_extends.default)({role:"group",className:clsx_m_default(className,Tree_css_default.group)},html),isOpen&&React10__default.Children.map(children,child=>React10__default.createElement(TreeContext_default.Provider,{value:{isChild:!0,depth:depth+1,hasHover:showHover}},child))))};Tree.defaultProps={open:!1,hover:!0};var import_extends2=__toESM(require_extends()),import_objectWithoutProperties3=__toESM(require_objectWithoutProperties());var ObjectInspector_css_default={"object-inspector":"ObjectInspector-object-inspector-0c33e82",objectInspector:"ObjectInspector-object-inspector-0c33e82","object-label":"ObjectInspector-object-label-b81482b",objectLabel:"ObjectInspector-object-label-b81482b",text:"ObjectInspector-text-25f57f3",key:"ObjectInspector-key-4f712bb",value:"ObjectInspector-value-f7ec2e5",string:"ObjectInspector-string-c496000",regex:"ObjectInspector-regex-59d45a3",error:"ObjectInspector-error-b818698",boolean:"ObjectInspector-boolean-2dd1642",number:"ObjectInspector-number-a6daabb",undefined:"ObjectInspector-undefined-3a68263",null:"ObjectInspector-null-74acb50",function:"ObjectInspector-function-07bbdcd","function-decorator":"ObjectInspector-function-decorator-3d22c24",functionDecorator:"ObjectInspector-function-decorator-3d22c24",prototype:"ObjectInspector-prototype-f2449ee",dark:"ObjectInspector-dark-0c96c97",chrome:"ObjectInspector-chrome-2f3ca98",light:"ObjectInspector-light-78bef54"};var _excluded3=["ast","theme","showKey","colorScheme","className"],buildValue=(key,value,valueClass,showKey,depth)=>{let computedKey=key.includes("-")?`"${key}"`:key,isRoot=depth<=0;return React10__default.createElement("span",{className:ObjectInspector_css_default.text},!isRoot&&showKey&&React10__default.createElement(React10__default.Fragment,null,React10__default.createElement("span",{className:ObjectInspector_css_default.key},computedKey),React10__default.createElement("span",null,":\xA0")),React10__default.createElement("span",{className:valueClass},value))},ObjectValue=props=>{let{ast,theme:theme2,showKey,colorScheme,className}=props,html=(0, import_objectWithoutProperties3.default)(props,_excluded3),{themeClass}=useTheme({theme:theme2,colorScheme},ObjectInspector_css_default),[asyncValue,setAsyncValue]=useState(React10__default.createElement("span",null)),value=React10__default.createElement("span",null);return useEffect(()=>{ast.value instanceof Promise&&(async promise=>{setAsyncValue(buildValue(ast.key,`Promise { "${await getPromiseState(promise)}" }`,ObjectInspector_css_default.key,showKey,ast.depth));})(ast.value);},[ast,showKey]),typeof ast.value=="number"||typeof ast.value=="bigint"?value=buildValue(ast.key,String(ast.value),ObjectInspector_css_default.number,showKey,ast.depth):typeof ast.value=="boolean"?value=buildValue(ast.key,String(ast.value),ObjectInspector_css_default.boolean,showKey,ast.depth):typeof ast.value=="string"?value=buildValue(ast.key,`"${ast.value}"`,ObjectInspector_css_default.string,showKey,ast.depth):typeof ast.value>"u"?value=buildValue(ast.key,"undefined",ObjectInspector_css_default.undefined,showKey,ast.depth):typeof ast.value=="symbol"?value=buildValue(ast.key,ast.value.toString(),ObjectInspector_css_default.string,showKey,ast.depth):typeof ast.value=="function"?value=buildValue(ast.key,`${ast.value.name}()`,ObjectInspector_css_default.key,showKey,ast.depth):typeof ast.value=="object"&&(ast.value===null?value=buildValue(ast.key,"null",ObjectInspector_css_default.null,showKey,ast.depth):Array.isArray(ast.value)?value=buildValue(ast.key,`Array(${ast.value.length})`,ObjectInspector_css_default.key,showKey,ast.depth):ast.value instanceof Date?value=buildValue(ast.key,`Date ${ast.value.toString()}`,ObjectInspector_css_default.value,showKey,ast.depth):ast.value instanceof RegExp?value=buildValue(ast.key,ast.value.toString(),ObjectInspector_css_default.regex,showKey,ast.depth):ast.value instanceof Error?value=buildValue(ast.key,ast.value.toString(),ObjectInspector_css_default.error,showKey,ast.depth):isObject(ast.value)?value=buildValue(ast.key,"{\u2026}",ObjectInspector_css_default.key,showKey,ast.depth):value=buildValue(ast.key,ast.value.constructor.name,ObjectInspector_css_default.key,showKey,ast.depth)),React10__default.createElement("span",(0, import_extends2.default)({className:clsx_m_default(themeClass,className)},html),asyncValue,value)};ObjectValue.defaultProps={showKey:!0};var ObjectValue_default=ObjectValue;var import_extends3=__toESM(require_extends()),import_objectWithoutProperties4=__toESM(require_objectWithoutProperties());var _excluded4=["ast","theme","previewMax","open","colorScheme","className"],buildPreview=(children,previewMax,showKey)=>{let previews=[];for(let i=0;i<children.length;i++){let child=children[i];if(child.isPrototype||(previews.push(React10__default.createElement(ObjectValue_default,{key:child.key,ast:child,showKey})),i<children.length-1?previews.push(", "):previews.push(" ")),child.isPrototype&&i===children.length-1&&(previews.pop(),previews.push(" ")),i===previewMax-1&&children.length>previewMax){previews.push("\u2026 ");break}}return previews},getArrayLabel=(ast,open,previewMax,theme2)=>{let l=ast.value.length;return open?React10__default.createElement("span",null,"Array(",l,")"):React10__default.createElement(React10__default.Fragment,null,React10__default.createElement("span",null,`${theme2==="firefox"?"Array":""}(${l}) [ `),buildPreview(ast.children,previewMax,!1),React10__default.createElement("span",null,"]"))},getObjectLabel=(ast,open,previewMax,theme2)=>ast.isPrototype?React10__default.createElement("span",null,`Object ${theme2==="firefox"?"{ \u2026 }":""}`):open?React10__default.createElement("span",null,"{\u2026}"):React10__default.createElement(React10__default.Fragment,null,React10__default.createElement("span",null,`${theme2==="firefox"?"Object ":""}{ `),buildPreview(ast.children,previewMax,!0),React10__default.createElement("span",null,"}")),getPromiseLabel=(ast,open,previewMax)=>open?React10__default.createElement("span",null,`Promise { "${String(ast.children[0].value)}" }`):React10__default.createElement(React10__default.Fragment,null,React10__default.createElement("span",null,"Promise { "),buildPreview(ast.children,previewMax,!0),React10__default.createElement("span",null,"}")),getMapLabel=(ast,open,previewMax,theme2)=>{let{size}=ast.value;return open?React10__default.createElement("span",null,`Map(${size})`):React10__default.createElement(React10__default.Fragment,null,React10__default.createElement("span",null,`Map${theme2==="chrome"?`(${size})`:""} { `),buildPreview(ast.children,previewMax,!0),React10__default.createElement("span",null,"}"))},getSetLabel=(ast,open,previewMax)=>{let{size}=ast.value;return open?React10__default.createElement("span",null,"Set(",size,")"):React10__default.createElement(React10__default.Fragment,null,React10__default.createElement("span",null,`Set(${ast.value.size}) {`),buildPreview(ast.children,previewMax,!0),React10__default.createElement("span",null,"}"))},ObjectLabel=props=>{let{ast,theme:theme2,previewMax,open,colorScheme,className}=props,html=(0, import_objectWithoutProperties4.default)(props,_excluded4),{themeClass,currentTheme}=useTheme({theme:theme2,colorScheme},ObjectInspector_css_default),isPrototype=ast.isPrototype||!1,classes=clsx_m_default(ObjectInspector_css_default.objectLabel,themeClass,className,{[ObjectInspector_css_default.prototype]:isPrototype}),isRoot=ast.depth<=0,Key=()=>React10__default.createElement("span",{className:isPrototype?ObjectInspector_css_default.prototype:ObjectInspector_css_default.key},isRoot?"":`${ast.key}: `);return ast.type==="array"?React10__default.createElement("span",(0, import_extends3.default)({className:classes},html),React10__default.createElement(Key,null),getArrayLabel(ast,open,previewMax,currentTheme)):ast.type==="function"?React10__default.createElement("span",(0, import_extends3.default)({className:classes},html),React10__default.createElement(Key,null),currentTheme==="chrome"&&React10__default.createElement("span",{className:ObjectInspector_css_default.functionDecorator},"\u0192 "),React10__default.createElement("span",{className:clsx_m_default({[ObjectInspector_css_default.function]:!isPrototype})},`${ast.value.name}()`)):ast.type==="promise"?React10__default.createElement("span",(0, import_extends3.default)({className:classes},html),React10__default.createElement(Key,null),getPromiseLabel(ast,open,previewMax)):ast.type==="map"?React10__default.createElement("span",(0, import_extends3.default)({className:classes},html),React10__default.createElement(Key,null),getMapLabel(ast,open,previewMax,currentTheme)):ast.type==="set"?React10__default.createElement("span",(0, import_extends3.default)({className:classes},html),React10__default.createElement(Key,null),getSetLabel(ast,open,previewMax)):React10__default.createElement("span",(0, import_extends3.default)({className:classes},html),React10__default.createElement(Key,null),getObjectLabel(ast,open,previewMax,currentTheme))};ObjectLabel.defaultProps={previewMax:8,open:!1};var ObjectLabel_default=ObjectLabel;var ObjectInspectorItem=props=>{let{ast,expandLevel,depth}=props,[resolved,setResolved]=useState(),[open,setOpen]=useState(depth<expandLevel);return useEffect(()=>{(async()=>{if(ast.type!=="value"){let promises=ast.children.map(f=>f()),children=await Promise.all(promises),r=(0, import_objectSpread22.default)((0, import_objectSpread22.default)({},ast),{},{children});setResolved(r);}})();},[ast]),resolved?React10__default.createElement(Tree,{hover:!1,open,label:React10__default.createElement(ObjectLabel_default,{open,ast:resolved}),onSelect:()=>{var _props$onSelect;(_props$onSelect=props.onSelect)===null||_props$onSelect===void 0||_props$onSelect.call(props,ast);},onUpdate:value=>{setOpen(value);}},resolved.children.map(child=>React10__default.createElement(ObjectInspectorItem,{key:child.key,ast:child,depth:depth+1,expandLevel,onSelect:props.onSelect}))):React10__default.createElement(Tree,{hover:!1,label:React10__default.createElement(ObjectValue_default,{ast}),onSelect:()=>{var _props$onSelect2;(_props$onSelect2=props.onSelect)===null||_props$onSelect2===void 0||_props$onSelect2.call(props,ast);}})};ObjectInspectorItem.defaultProps={expandLevel:0,depth:0};var ObjectInspectorItem_default=ObjectInspectorItem;var _excluded5=["data","expandLevel","sortKeys","includePrototypes","className","theme","colorScheme","onSelect"],ObjectInspector=props=>{let{data,expandLevel,sortKeys,includePrototypes,className,theme:theme2,colorScheme,onSelect}=props,html=(0, import_objectWithoutProperties5.default)(props,_excluded5),[ast,setAST]=useState(void 0),{themeClass,currentTheme,currentColorScheme}=useTheme({theme:theme2,colorScheme},ObjectInspector_css_default);return useEffect(()=>{(async()=>{setAST(await parse(data,sortKeys,includePrototypes));})();},[data,sortKeys,includePrototypes]),React10__default.createElement("div",(0, import_extends4.default)({className:clsx_m_default(ObjectInspector_css_default.objectInspector,className,themeClass)},html),ast&&React10__default.createElement(ThemeProvider,{theme:currentTheme,colorScheme:currentColorScheme},React10__default.createElement(ObjectInspectorItem_default,{ast,expandLevel,onSelect})))};ObjectInspector.defaultProps={expandLevel:0,sortKeys:!0,includePrototypes:!0};var colorsLight={base:"#444",nullish:"#7D99AA",string:"#16B242",number:"#5D40D0",boolean:"#f41840",objectkey:"#698394",instance:"#A15C20",function:"#EA7509",muted:"#7D99AA",tag:{name:"#6F2CAC",suffix:"#1F99E5"},date:"#459D9C",error:{name:"#D43900",message:"#444"},regex:{source:"#A15C20",flags:"#EA7509"},meta:"#EA7509",method:"#0271B6"},colorsDark={base:"#eee",nullish:"#aaa",string:"#5FE584",number:"#6ba5ff",boolean:"#ff4191",objectkey:"#accfe6",instance:"#E3B551",function:"#E3B551",muted:"#aaa",tag:{name:"#f57bff",suffix:"#8EB5FF"},date:"#70D4D3",error:{name:"#f40",message:"#eee"},regex:{source:"#FAD483",flags:"#E3B551"},meta:"#FAD483",method:"#5EC1FF"},useThemeColors=()=>{let{base}=useTheme$1();return base==="dark"?colorsDark:colorsLight},special=/[^A-Z0-9]/i,trimEnd=/[\s.,…]+$/gm,ellipsize=(string,maxlength)=>{if(string.length<=maxlength)return string;for(let i=maxlength-1;i>=0;i-=1)if(special.test(string[i])&&i>10)return `${string.slice(0,i).replace(trimEnd,"")}\u2026`;return `${string.slice(0,maxlength).replace(trimEnd,"")}\u2026`},stringify=value=>{try{return JSON.stringify(value,null,1)}catch{return String(value)}},interleave=(nodes,separator)=>nodes.flatMap((node,index)=>index===nodes.length-1?[node]:[node,React10__default.cloneElement(separator,{key:`sep${index}`})]),Node=({value,nested,showObjectInspector,callsById,...props})=>{switch(!0){case value===null:return React10__default.createElement(NullNode,{...props});case value===void 0:return React10__default.createElement(UndefinedNode,{...props});case Array.isArray(value):return React10__default.createElement(ArrayNode,{...props,value,callsById});case typeof value=="string":return React10__default.createElement(StringNode,{...props,value});case typeof value=="number":return React10__default.createElement(NumberNode,{...props,value});case typeof value=="boolean":return React10__default.createElement(BooleanNode,{...props,value});case Object.prototype.hasOwnProperty.call(value,"__date__"):return React10__default.createElement(DateNode,{...props,...value.__date__});case Object.prototype.hasOwnProperty.call(value,"__error__"):return React10__default.createElement(ErrorNode,{...props,...value.__error__});case Object.prototype.hasOwnProperty.call(value,"__regexp__"):return React10__default.createElement(RegExpNode,{...props,...value.__regexp__});case Object.prototype.hasOwnProperty.call(value,"__function__"):return React10__default.createElement(FunctionNode,{...props,...value.__function__});case Object.prototype.hasOwnProperty.call(value,"__symbol__"):return React10__default.createElement(SymbolNode,{...props,...value.__symbol__});case Object.prototype.hasOwnProperty.call(value,"__element__"):return React10__default.createElement(ElementNode,{...props,...value.__element__});case Object.prototype.hasOwnProperty.call(value,"__class__"):return React10__default.createElement(ClassNode,{...props,...value.__class__});case Object.prototype.hasOwnProperty.call(value,"__callId__"):return React10__default.createElement(MethodCall,{call:callsById.get(value.__callId__),callsById});case Object.prototype.toString.call(value)==="[object Object]":return React10__default.createElement(ObjectNode,{value,showInspector:showObjectInspector,callsById,...props});default:return React10__default.createElement(OtherNode,{value,...props})}},NullNode=props=>{let colors2=useThemeColors();return React10__default.createElement("span",{style:{color:colors2.nullish},...props},"null")},UndefinedNode=props=>{let colors2=useThemeColors();return React10__default.createElement("span",{style:{color:colors2.nullish},...props},"undefined")},StringNode=({value,...props})=>{let colors2=useThemeColors();return React10__default.createElement("span",{style:{color:colors2.string},...props},JSON.stringify(ellipsize(value,50)))},NumberNode=({value,...props})=>{let colors2=useThemeColors();return React10__default.createElement("span",{style:{color:colors2.number},...props},value)},BooleanNode=({value,...props})=>{let colors2=useThemeColors();return React10__default.createElement("span",{style:{color:colors2.boolean},...props},String(value))},ArrayNode=({value,nested=!1,callsById})=>{let colors2=useThemeColors();if(nested)return React10__default.createElement("span",{style:{color:colors2.base}},"[\u2026]");let nodes=value.slice(0,3).map(v=>React10__default.createElement(Node,{key:JSON.stringify(v),value:v,nested:!0,callsById})),nodelist=interleave(nodes,React10__default.createElement("span",null,", "));return value.length<=3?React10__default.createElement("span",{style:{color:colors2.base}},"[",nodelist,"]"):React10__default.createElement("span",{style:{color:colors2.base}},"(",value.length,") [",nodelist,", \u2026]")},ObjectNode=({showInspector,value,callsById,nested=!1})=>{let isDarkMode=useTheme$1().base==="dark",colors2=useThemeColors();if(showInspector)return React10__default.createElement(React10__default.Fragment,null,React10__default.createElement(ObjectInspector,{id:"interactions-object-inspector",data:value,includePrototypes:!1,colorScheme:isDarkMode?"dark":"light"}));if(nested)return React10__default.createElement("span",{style:{color:colors2.base}},"{\u2026}");let nodelist=interleave(Object.entries(value).slice(0,2).map(([k,v])=>React10__default.createElement(Fragment,{key:k},React10__default.createElement("span",{style:{color:colors2.objectkey}},k,": "),React10__default.createElement(Node,{value:v,callsById,nested:!0}))),React10__default.createElement("span",null,", "));return Object.keys(value).length<=2?React10__default.createElement("span",{style:{color:colors2.base}},"{ ",nodelist," }"):React10__default.createElement("span",{style:{color:colors2.base}},"(",Object.keys(value).length,") ","{ ",nodelist,", \u2026 }")},ClassNode=({name})=>{let colors2=useThemeColors();return React10__default.createElement("span",{style:{color:colors2.instance}},name)},FunctionNode=({name})=>{let colors2=useThemeColors();return name?React10__default.createElement("span",{style:{color:colors2.function}},name):React10__default.createElement("span",{style:{color:colors2.nullish,fontStyle:"italic"}},"anonymous")},ElementNode=({prefix,localName,id,classNames=[],innerText})=>{let name=prefix?`${prefix}:${localName}`:localName,colors2=useThemeColors();return React10__default.createElement("span",{style:{wordBreak:"keep-all"}},React10__default.createElement("span",{key:`${name}_lt`,style:{color:colors2.muted}},"<"),React10__default.createElement("span",{key:`${name}_tag`,style:{color:colors2.tag.name}},name),React10__default.createElement("span",{key:`${name}_suffix`,style:{color:colors2.tag.suffix}},id?`#${id}`:classNames.reduce((acc,className)=>`${acc}.${className}`,"")),React10__default.createElement("span",{key:`${name}_gt`,style:{color:colors2.muted}},">"),!id&&classNames.length===0&&innerText&&React10__default.createElement(React10__default.Fragment,null,React10__default.createElement("span",{key:`${name}_text`},innerText),React10__default.createElement("span",{key:`${name}_close_lt`,style:{color:colors2.muted}},"<"),React10__default.createElement("span",{key:`${name}_close_tag`,style:{color:colors2.tag.name}},"/",name),React10__default.createElement("span",{key:`${name}_close_gt`,style:{color:colors2.muted}},">")))},DateNode=({value})=>{let[date,time,ms]=value.split(/[T.Z]/),colors2=useThemeColors();return React10__default.createElement("span",{style:{whiteSpace:"nowrap",color:colors2.date}},date,React10__default.createElement("span",{style:{opacity:.7}},"T"),time==="00:00:00"?React10__default.createElement("span",{style:{opacity:.7}},time):time,ms==="000"?React10__default.createElement("span",{style:{opacity:.7}},".",ms):`.${ms}`,React10__default.createElement("span",{style:{opacity:.7}},"Z"))},ErrorNode=({name,message})=>{let colors2=useThemeColors();return React10__default.createElement("span",{style:{color:colors2.error.name}},name,message&&": ",message&&React10__default.createElement("span",{style:{color:colors2.error.message},title:message.length>50?message:""},ellipsize(message,50)))},RegExpNode=({flags,source})=>{let colors2=useThemeColors();return React10__default.createElement("span",{style:{whiteSpace:"nowrap",color:colors2.regex.flags}},"/",React10__default.createElement("span",{style:{color:colors2.regex.source}},source),"/",flags)},SymbolNode=({description})=>{let colors2=useThemeColors();return React10__default.createElement("span",{style:{whiteSpace:"nowrap",color:colors2.instance}},"Symbol(",description&&React10__default.createElement("span",{style:{color:colors2.meta}},'"',description,'"'),")")},OtherNode=({value})=>{let colors2=useThemeColors();return React10__default.createElement("span",{style:{color:colors2.meta}},stringify(value))},StepNode=({label})=>{let colors2=useThemeColors(),{typography:typography4}=useTheme$1();return React10__default.createElement("span",{style:{color:colors2.base,fontFamily:typography4.fonts.base,fontSize:typography4.size.s2-1}},label)},MethodCall=({call,callsById})=>{if(!call)return null;if(call.method==="step"&&call.path.length===0)return React10__default.createElement(StepNode,{label:call.args[0]});let path=call.path.flatMap((elem,index)=>{let callId=elem.__callId__;return [callId?React10__default.createElement(MethodCall,{key:`elem${index}`,call:callsById.get(callId),callsById}):React10__default.createElement("span",{key:`elem${index}`},elem),React10__default.createElement("wbr",{key:`wbr${index}`}),React10__default.createElement("span",{key:`dot${index}`},".")]}),args=call.args.flatMap((arg,index,array)=>{let node=React10__default.createElement(Node,{key:`node${index}`,value:arg,callsById});return index<array.length-1?[node,React10__default.createElement("span",{key:`comma${index}`},",\xA0"),React10__default.createElement("wbr",{key:`wbr${index}`})]:[node]}),colors2=useThemeColors();return React10__default.createElement(React10__default.Fragment,null,React10__default.createElement("span",{style:{color:colors2.base}},path),React10__default.createElement("span",{style:{color:colors2.method}},call.method),React10__default.createElement("span",{style:{color:colors2.base}},"(",React10__default.createElement("wbr",null),args,React10__default.createElement("wbr",null),")"))};var getParams=(line,fromIndex=0)=>{for(let i=fromIndex,depth=1;i<line.length;i+=1)if(line[i]==="("?depth+=1:line[i]===")"&&(depth-=1),depth===0)return line.slice(fromIndex,i);return ""},parseValue=value=>{try{return value==="undefined"?void 0:JSON.parse(value)}catch{return value}},StyledExpected=styled.span(({theme:theme2})=>({color:theme2.base==="light"?theme2.color.positiveText:theme2.color.positive})),StyledReceived=styled.span(({theme:theme2})=>({color:theme2.base==="light"?theme2.color.negativeText:theme2.color.negative})),Received=({value,parsed})=>parsed?React10__default.createElement(Node,{showObjectInspector:!0,value,style:{color:"#D43900"}}):React10__default.createElement(StyledReceived,null,value),Expected=({value,parsed})=>parsed?typeof value=="string"&&value.startsWith("called with")?React10__default.createElement(React10__default.Fragment,null,value):React10__default.createElement(Node,{showObjectInspector:!0,value,style:{color:"#16B242"}}):React10__default.createElement(StyledExpected,null,value),MatcherResult=({message})=>{let lines=message.split(`
13
+ var require_extends=__commonJS({"../../node_modules/@devtools-ds/object-inspector/node_modules/@babel/runtime/helpers/extends.js"(exports,module){function _extends5(){return module.exports=_extends5=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key]);}return target},_extends5.apply(this,arguments)}module.exports=_extends5;}});var require_objectWithoutPropertiesLoose=__commonJS({"../../node_modules/@devtools-ds/object-inspector/node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js"(exports,module){function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return {};var target={},sourceKeys=Object.keys(source),key,i;for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],!(excluded.indexOf(key)>=0)&&(target[key]=source[key]);return target}module.exports=_objectWithoutPropertiesLoose;}});var require_objectWithoutProperties=__commonJS({"../../node_modules/@devtools-ds/object-inspector/node_modules/@babel/runtime/helpers/objectWithoutProperties.js"(exports,module){var objectWithoutPropertiesLoose=require_objectWithoutPropertiesLoose();function _objectWithoutProperties6(source,excluded){if(source==null)return {};var target=objectWithoutPropertiesLoose(source,excluded),key,i;if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],!(excluded.indexOf(key)>=0)&&Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key]);}return target}module.exports=_objectWithoutProperties6;}});var require_defineProperty=__commonJS({"../../node_modules/@devtools-ds/themes/node_modules/@babel/runtime/helpers/defineProperty.js"(exports,module){function _defineProperty(obj,key,value){return key in obj?Object.defineProperty(obj,key,{value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}module.exports=_defineProperty;}});var require_objectSpread2=__commonJS({"../../node_modules/@devtools-ds/themes/node_modules/@babel/runtime/helpers/objectSpread2.js"(exports,module){var defineProperty=require_defineProperty();function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable})),keys.push.apply(keys,symbols);}return keys}function _objectSpread22(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};i%2?ownKeys(source,!0).forEach(function(key){defineProperty(target,key,source[key]);}):Object.getOwnPropertyDescriptors?Object.defineProperties(target,Object.getOwnPropertyDescriptors(source)):ownKeys(source).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key));});}return target}module.exports=_objectSpread22;}});var require_objectWithoutPropertiesLoose2=__commonJS({"../../node_modules/@devtools-ds/themes/node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js"(exports,module){function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return {};var target={},sourceKeys=Object.keys(source),key,i;for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],!(excluded.indexOf(key)>=0)&&(target[key]=source[key]);return target}module.exports=_objectWithoutPropertiesLoose;}});var require_objectWithoutProperties2=__commonJS({"../../node_modules/@devtools-ds/themes/node_modules/@babel/runtime/helpers/objectWithoutProperties.js"(exports,module){var objectWithoutPropertiesLoose=require_objectWithoutPropertiesLoose2();function _objectWithoutProperties6(source,excluded){if(source==null)return {};var target=objectWithoutPropertiesLoose(source,excluded),key,i;if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],!(excluded.indexOf(key)>=0)&&Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key]);}return target}module.exports=_objectWithoutProperties6;}});var require_defineProperty2=__commonJS({"../../node_modules/@devtools-ds/object-inspector/node_modules/@babel/runtime/helpers/defineProperty.js"(exports,module){function _defineProperty(obj,key,value){return key in obj?Object.defineProperty(obj,key,{value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}module.exports=_defineProperty;}});var require_objectSpread22=__commonJS({"../../node_modules/@devtools-ds/object-inspector/node_modules/@babel/runtime/helpers/objectSpread2.js"(exports,module){var defineProperty=require_defineProperty2();function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable})),keys.push.apply(keys,symbols);}return keys}function _objectSpread22(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};i%2?ownKeys(source,!0).forEach(function(key){defineProperty(target,key,source[key]);}):Object.getOwnPropertyDescriptors?Object.defineProperties(target,Object.getOwnPropertyDescriptors(source)):ownKeys(source).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key));});}return target}module.exports=_objectSpread22;}});var require_extends2=__commonJS({"../../node_modules/@devtools-ds/tree/node_modules/@babel/runtime/helpers/extends.js"(exports,module){function _extends5(){return module.exports=_extends5=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key]);}return target},_extends5.apply(this,arguments)}module.exports=_extends5;}});var require_objectWithoutPropertiesLoose3=__commonJS({"../../node_modules/@devtools-ds/tree/node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js"(exports,module){function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return {};var target={},sourceKeys=Object.keys(source),key,i;for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],!(excluded.indexOf(key)>=0)&&(target[key]=source[key]);return target}module.exports=_objectWithoutPropertiesLoose;}});var require_objectWithoutProperties3=__commonJS({"../../node_modules/@devtools-ds/tree/node_modules/@babel/runtime/helpers/objectWithoutProperties.js"(exports,module){var objectWithoutPropertiesLoose=require_objectWithoutPropertiesLoose3();function _objectWithoutProperties6(source,excluded){if(source==null)return {};var target=objectWithoutPropertiesLoose(source,excluded),key,i;if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],!(excluded.indexOf(key)>=0)&&Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key]);}return target}module.exports=_objectWithoutProperties6;}});var ADDON_ID="storybook/interactions",PANEL_ID=`${ADDON_ID}/panel`;var StyledBadge=styled.div(({theme:theme2,status})=>({padding:"4px 6px 4px 8px;",borderRadius:"4px",backgroundColor:{[CallStates.DONE]:theme2.color.positive,[CallStates.ERROR]:theme2.color.negative,[CallStates.ACTIVE]:theme2.color.warning,[CallStates.WAITING]:theme2.color.warning}[status],color:"white",fontFamily:typography.fonts.base,textTransform:"uppercase",fontSize:typography.size.s1,letterSpacing:3,fontWeight:typography.weight.bold,width:65,textAlign:"center"})),StatusBadge=({status})=>{let badgeText={[CallStates.DONE]:"Pass",[CallStates.ERROR]:"Fail",[CallStates.ACTIVE]:"Runs",[CallStates.WAITING]:"Runs"}[status];return React10__default.createElement(StyledBadge,{"aria-label":"Status of the test run",status},badgeText)};var SubnavWrapper=styled.div(({theme:theme2})=>({background:theme2.background.app,borderBottom:`1px solid ${theme2.appBorderColor}`,position:"sticky",top:0,zIndex:1})),StyledSubnav=styled.nav(({theme:theme2})=>({height:40,display:"flex",alignItems:"center",justifyContent:"space-between",paddingLeft:15})),StyledButton=styled(Button)(({theme:theme2})=>({borderRadius:4,padding:6,color:theme2.textMutedColor,"&:not(:disabled)":{"&:hover,&:focus-visible":{color:theme2.color.secondary}}})),Note=styled(TooltipNote)(({theme:theme2})=>({fontFamily:theme2.typography.fonts.base})),StyledIconButton=styled(IconButton)(({theme:theme2})=>({color:theme2.textMutedColor,margin:"0 3px"})),StyledSeparator=styled(Separator)({marginTop:0}),StyledLocation=styled(P)(({theme:theme2})=>({color:theme2.textMutedColor,justifyContent:"flex-end",textAlign:"right",whiteSpace:"nowrap",marginTop:"auto",marginBottom:1,paddingRight:15,fontSize:13})),Group=styled.div({display:"flex",alignItems:"center"}),RewindButton=styled(StyledIconButton)({marginLeft:9}),JumpToEndButton=styled(StyledButton)({marginLeft:9,marginRight:9,marginBottom:1,lineHeight:"12px"}),RerunButton=styled(StyledIconButton)(({theme:theme2,animating,disabled})=>({opacity:disabled?.5:1,svg:{animation:animating&&`${theme2.animation.rotate360} 200ms ease-out`}})),Subnav=({controls,controlStates,status,storyFileName,onScrollToEnd})=>{let buttonText=status===CallStates.ERROR?"Scroll to error":"Scroll to end";return React10__default.createElement(SubnavWrapper,null,React10__default.createElement(Bar,null,React10__default.createElement(StyledSubnav,null,React10__default.createElement(Group,null,React10__default.createElement(StatusBadge,{status}),React10__default.createElement(JumpToEndButton,{onClick:onScrollToEnd,disabled:!onScrollToEnd},buttonText),React10__default.createElement(StyledSeparator,null),React10__default.createElement(WithTooltip,{trigger:"hover",hasChrome:!1,tooltip:React10__default.createElement(Note,{note:"Go to start"})},React10__default.createElement(RewindButton,{"aria-label":"Go to start",containsIcon:!0,onClick:controls.start,disabled:!controlStates.start},React10__default.createElement(Icon.Rewind,null))),React10__default.createElement(WithTooltip,{trigger:"hover",hasChrome:!1,tooltip:React10__default.createElement(Note,{note:"Go back"})},React10__default.createElement(StyledIconButton,{"aria-label":"Go back",containsIcon:!0,onClick:controls.back,disabled:!controlStates.back},React10__default.createElement(Icon.PlayBack,null))),React10__default.createElement(WithTooltip,{trigger:"hover",hasChrome:!1,tooltip:React10__default.createElement(Note,{note:"Go forward"})},React10__default.createElement(StyledIconButton,{"aria-label":"Go forward",containsIcon:!0,onClick:controls.next,disabled:!controlStates.next},React10__default.createElement(Icon.PlayNext,null))),React10__default.createElement(WithTooltip,{trigger:"hover",hasChrome:!1,tooltip:React10__default.createElement(Note,{note:"Go to end"})},React10__default.createElement(StyledIconButton,{"aria-label":"Go to end",containsIcon:!0,onClick:controls.end,disabled:!controlStates.end},React10__default.createElement(Icon.FastForward,null))),React10__default.createElement(WithTooltip,{trigger:"hover",hasChrome:!1,tooltip:React10__default.createElement(Note,{note:"Rerun"})},React10__default.createElement(RerunButton,{"aria-label":"Rerun",containsIcon:!0,onClick:controls.rerun},React10__default.createElement(Icon.Sync,null)))),storyFileName&&React10__default.createElement(Group,null,React10__default.createElement(StyledLocation,null,storyFileName)))))};var import_extends4=__toESM(require_extends()),import_objectWithoutProperties5=__toESM(require_objectWithoutProperties());function toVal(mix){var k,y,str="";if(mix)if(typeof mix=="object")if(Array.isArray(mix))for(k=0;k<mix.length;k++)mix[k]&&(y=toVal(mix[k]))&&(str&&(str+=" "),str+=y);else for(k in mix)mix[k]&&(y=toVal(k))&&(str&&(str+=" "),str+=y);else typeof mix!="boolean"&&!mix.call&&(str&&(str+=" "),str+=mix);return str}function clsx_m_default(){for(var i=0,x,str="";i<arguments.length;)(x=toVal(arguments[i++]))&&(str&&(str+=" "),str+=x);return str}var isArray=val=>Array.isArray(val)||ArrayBuffer.isView(val)&&!(val instanceof DataView),isObject=val=>val!==null&&typeof val=="object"&&!isArray(val)&&!(val instanceof Date)&&!(val instanceof RegExp)&&!(val instanceof Error)&&!(val instanceof WeakMap)&&!(val instanceof WeakSet),isKnownObject=val=>isObject(val)||isArray(val)||typeof val=="function"||val instanceof Promise,getPromiseState=promise=>{let unique=/unique/;return Promise.race([promise,unique]).then(result=>result===unique?["pending"]:["fulfilled",result],e=>["rejected",e])},buildAST=async(key,value,depth,sortKeys,isPrototype,showPrototype)=>{let astNode={key,depth,value,type:"value",parent:void 0};if(value&&isKnownObject(value)&&depth<100){let children=[],t="object";if(isArray(value)){for(let i=0;i<value.length;i++)children.push(async()=>{let child=await buildAST(i.toString(),value[i],depth+1,sortKeys);return child.parent=astNode,child});t="array";}else {let keys=Object.getOwnPropertyNames(value);sortKeys&&keys.sort();for(let i=0;i<keys.length;i++){let safeValue;try{safeValue=value[keys[i]];}catch{}children.push(async()=>{let child=await buildAST(keys[i],safeValue,depth+1,sortKeys);return child.parent=astNode,child});}if(typeof value=="function"&&(t="function"),value instanceof Promise){let[status,result]=await getPromiseState(value);children.push(async()=>{let child=await buildAST("<state>",status,depth+1,sortKeys);return child.parent=astNode,child}),status!=="pending"&&children.push(async()=>{let child=await buildAST("<value>",result,depth+1,sortKeys);return child.parent=astNode,child}),t="promise";}if(value instanceof Map){let parsedEntries=Array.from(value.entries()).map(entry=>{let[entryKey,entryValue]=entry;return {"<key>":entryKey,"<value>":entryValue}});children.push(async()=>{let child=await buildAST("<entries>",parsedEntries,depth+1,sortKeys);return child.parent=astNode,child}),children.push(async()=>{let child=await buildAST("size",value.size,depth+1,sortKeys);return child.parent=astNode,child}),t="map";}if(value instanceof Set){let parsedEntries=Array.from(value.entries()).map(entry=>entry[1]);children.push(async()=>{let child=await buildAST("<entries>",parsedEntries,depth+1,sortKeys);return child.parent=astNode,child}),children.push(async()=>{let child=await buildAST("size",value.size,depth+1,sortKeys);return child.parent=astNode,child}),t="set";}}value!==Object.prototype&&showPrototype&&children.push(async()=>{let child=await buildAST("<prototype>",Object.getPrototypeOf(value),depth+1,sortKeys,!0);return child.parent=astNode,child}),astNode.type=t,astNode.children=children,astNode.isPrototype=isPrototype;}return astNode},parse=(data,sortKeys,includePrototypes)=>buildAST("root",data,0,sortKeys===!1?sortKeys:!0,void 0,includePrototypes===!1?includePrototypes:!0);var import_objectSpread2=__toESM(require_objectSpread2()),import_objectWithoutProperties=__toESM(require_objectWithoutProperties2());var _excluded=["children"];var ThemeContext=React10__default.createContext({theme:"chrome",colorScheme:"light"});var ThemeProvider=_ref=>{let{children}=_ref,value=(0, import_objectWithoutProperties.default)(_ref,_excluded),wrappedTheme=React10__default.useContext(ThemeContext);return React10__default.createElement(ThemeContext.Provider,{value:(0, import_objectSpread2.default)((0, import_objectSpread2.default)({},wrappedTheme),value)},children)},useTheme=(props,styles={})=>{let themeContext=React10__default.useContext(ThemeContext),currentTheme=props.theme||themeContext.theme||"chrome",currentColorScheme=props.colorScheme||themeContext.colorScheme||"light",themeClass=clsx_m_default(styles[currentTheme],styles[currentColorScheme]);return {currentColorScheme,currentTheme,themeClass}};var import_objectSpread22=__toESM(require_objectSpread22());var import_extends=__toESM(require_extends2()),import_objectWithoutProperties2=__toESM(require_objectWithoutProperties3());var TreeContext=React10__default.createContext({isChild:!1,depth:0,hasHover:!0}),TreeContext_default=TreeContext;var Tree_css_default={tree:"Tree-tree-fbbbe38",item:"Tree-item-353d6f3",group:"Tree-group-d3c3d8a",label:"Tree-label-d819155",focusWhite:"Tree-focusWhite-f1e00c2",arrow:"Tree-arrow-03ab2e7",hover:"Tree-hover-3cc4e5d",open:"Tree-open-3f1a336",dark:"Tree-dark-1b4aa00",chrome:"Tree-chrome-bcbcac6",light:"Tree-light-09174ee"};var _excluded2=["theme","hover","colorScheme","children","label","className","onUpdate","onSelect","open"],Tree=props=>{let{theme:theme2,hover,colorScheme,children,label,className,onUpdate,onSelect,open}=props,html=(0, import_objectWithoutProperties2.default)(props,_excluded2),{themeClass,currentTheme}=useTheme({theme:theme2,colorScheme},Tree_css_default),[isOpen,setOpen]=useState(open);useEffect(()=>{setOpen(open);},[open]);let updateState=value=>{setOpen(value),onUpdate&&onUpdate(value);},hasChildren=React10__default.Children.count(children)>0,updateFocus=(newNode,previousNode)=>{if(newNode.isSameNode(previousNode||null))return;let focusableNode=newNode.querySelector('[tabindex="-1"]');focusableNode?.focus(),newNode.setAttribute("aria-selected","true"),previousNode?.removeAttribute("aria-selected");},getParent=(node,role)=>{let parent=node;for(;parent&&parent.parentElement;){if(parent.getAttribute("role")===role)return parent;parent=parent.parentElement;}return null},getListElements=node=>{let tree=getParent(node,"tree");return tree?Array.from(tree.querySelectorAll("li")):[]},moveBack=node=>{let group=getParent(node,"group"),toggle=group?.previousElementSibling;if(toggle&&toggle.getAttribute("tabindex")==="-1"){let toggleParent=toggle.parentElement,nodeParent=node.parentElement;updateFocus(toggleParent,nodeParent);}},moveHome=(node,direction)=>{let elements=getListElements(node);elements.forEach(element=>{element.removeAttribute("aria-selected");}),direction==="start"&&elements[0]&&updateFocus(elements[0]),direction==="end"&&elements[elements.length-1]&&updateFocus(elements[elements.length-1]);},moveFocusAdjacent=(node,direction)=>{let elements=getListElements(node)||[];for(let i=0;i<elements.length;i++){let currentNode=elements[i];if(currentNode.getAttribute("aria-selected")==="true"){direction==="up"&&elements[i-1]?updateFocus(elements[i-1],currentNode):direction==="down"&&elements[i+1]&&updateFocus(elements[i+1],currentNode);return}}updateFocus(elements[0]);},handleKeypress=(event,isChild2)=>{let node=event.target;(event.key==="Enter"||event.key===" ")&&updateState(!isOpen),event.key==="ArrowRight"&&isOpen&&!isChild2?moveFocusAdjacent(node,"down"):event.key==="ArrowRight"&&updateState(!0),event.key==="ArrowLeft"&&(!isOpen||isChild2)?moveBack(node):event.key==="ArrowLeft"&&updateState(!1),event.key==="ArrowDown"&&moveFocusAdjacent(node,"down"),event.key==="ArrowUp"&&moveFocusAdjacent(node,"up"),event.key==="Home"&&moveHome(node,"start"),event.key==="End"&&moveHome(node,"end");},handleClick=(event,isChild2)=>{let node=event.target,parent=getParent(node,"treeitem"),elements=getListElements(node)||[],found=!1;for(let i=0;i<elements.length;i++){let currentNode=elements[i];if(currentNode.getAttribute("aria-selected")==="true"){parent&&(found=!0,updateFocus(parent,currentNode));break}}!found&&parent&&updateFocus(parent),isChild2||updateState(!isOpen);},handleBlur=event=>{let node=event.currentTarget;!node.contains(document.activeElement)&&node.getAttribute("role")==="tree"&&node.setAttribute("tabindex","0");},handleFocus=event=>{let node=event.target;if(node.getAttribute("role")==="tree"){let selected=node.querySelector('[aria-selected="true"]');selected?updateFocus(selected):moveFocusAdjacent(node,"down"),node.setAttribute("tabindex","-1");}},handleButtonFocus=()=>{onSelect?.();},getPaddingStyles=depth2=>{let space=depth2*.9+.3;return {paddingLeft:`${space}em`,width:`calc(100% - ${space}em)`}},{isChild,depth,hasHover}=React10__default.useContext(TreeContext_default),showHover=hasHover?hover:!1;if(!isChild)return React10__default.createElement("ul",(0, import_extends.default)({role:"tree",tabIndex:0,className:clsx_m_default(Tree_css_default.tree,Tree_css_default.group,themeClass,className),onFocus:handleFocus,onBlur:handleBlur},html),React10__default.createElement(TreeContext_default.Provider,{value:{isChild:!0,depth:0,hasHover:showHover}},React10__default.createElement(Tree,props)));if(!hasChildren)return React10__default.createElement("li",(0, import_extends.default)({role:"treeitem",className:Tree_css_default.item},html),React10__default.createElement("div",{role:"button",className:clsx_m_default(Tree_css_default.label,{[Tree_css_default.hover]:showHover,[Tree_css_default.focusWhite]:currentTheme==="firefox"}),tabIndex:-1,style:getPaddingStyles(depth),onKeyDown:e=>{handleKeypress(e,isChild);},onClick:e=>handleClick(e,!0),onFocus:handleButtonFocus},React10__default.createElement("span",null,label)));let arrowClass=clsx_m_default(Tree_css_default.arrow,{[Tree_css_default.open]:isOpen});return React10__default.createElement("li",{role:"treeitem","aria-expanded":isOpen,className:Tree_css_default.item},React10__default.createElement("div",{role:"button",tabIndex:-1,className:clsx_m_default(Tree_css_default.label,{[Tree_css_default.hover]:showHover,[Tree_css_default.focusWhite]:currentTheme==="firefox"}),style:getPaddingStyles(depth),onClick:e=>handleClick(e),onKeyDown:e=>handleKeypress(e),onFocus:handleButtonFocus},React10__default.createElement("span",null,React10__default.createElement("span",{"aria-hidden":!0,className:arrowClass}),React10__default.createElement("span",null,label))),React10__default.createElement("ul",(0, import_extends.default)({role:"group",className:clsx_m_default(className,Tree_css_default.group)},html),isOpen&&React10__default.Children.map(children,child=>React10__default.createElement(TreeContext_default.Provider,{value:{isChild:!0,depth:depth+1,hasHover:showHover}},child))))};Tree.defaultProps={open:!1,hover:!0};var import_extends2=__toESM(require_extends()),import_objectWithoutProperties3=__toESM(require_objectWithoutProperties());var ObjectInspector_css_default={"object-inspector":"ObjectInspector-object-inspector-0c33e82",objectInspector:"ObjectInspector-object-inspector-0c33e82","object-label":"ObjectInspector-object-label-b81482b",objectLabel:"ObjectInspector-object-label-b81482b",text:"ObjectInspector-text-25f57f3",key:"ObjectInspector-key-4f712bb",value:"ObjectInspector-value-f7ec2e5",string:"ObjectInspector-string-c496000",regex:"ObjectInspector-regex-59d45a3",error:"ObjectInspector-error-b818698",boolean:"ObjectInspector-boolean-2dd1642",number:"ObjectInspector-number-a6daabb",undefined:"ObjectInspector-undefined-3a68263",null:"ObjectInspector-null-74acb50",function:"ObjectInspector-function-07bbdcd","function-decorator":"ObjectInspector-function-decorator-3d22c24",functionDecorator:"ObjectInspector-function-decorator-3d22c24",prototype:"ObjectInspector-prototype-f2449ee",dark:"ObjectInspector-dark-0c96c97",chrome:"ObjectInspector-chrome-2f3ca98",light:"ObjectInspector-light-78bef54"};var _excluded3=["ast","theme","showKey","colorScheme","className"],buildValue=(key,value,valueClass,showKey,depth)=>{let computedKey=key.includes("-")?`"${key}"`:key,isRoot=depth<=0;return React10__default.createElement("span",{className:ObjectInspector_css_default.text},!isRoot&&showKey&&React10__default.createElement(React10__default.Fragment,null,React10__default.createElement("span",{className:ObjectInspector_css_default.key},computedKey),React10__default.createElement("span",null,":\xA0")),React10__default.createElement("span",{className:valueClass},value))},ObjectValue=props=>{let{ast,theme:theme2,showKey,colorScheme,className}=props,html=(0, import_objectWithoutProperties3.default)(props,_excluded3),{themeClass}=useTheme({theme:theme2,colorScheme},ObjectInspector_css_default),[asyncValue,setAsyncValue]=useState(React10__default.createElement("span",null)),value=React10__default.createElement("span",null);return useEffect(()=>{ast.value instanceof Promise&&(async promise=>{setAsyncValue(buildValue(ast.key,`Promise { "${await getPromiseState(promise)}" }`,ObjectInspector_css_default.key,showKey,ast.depth));})(ast.value);},[ast,showKey]),typeof ast.value=="number"||typeof ast.value=="bigint"?value=buildValue(ast.key,String(ast.value),ObjectInspector_css_default.number,showKey,ast.depth):typeof ast.value=="boolean"?value=buildValue(ast.key,String(ast.value),ObjectInspector_css_default.boolean,showKey,ast.depth):typeof ast.value=="string"?value=buildValue(ast.key,`"${ast.value}"`,ObjectInspector_css_default.string,showKey,ast.depth):typeof ast.value>"u"?value=buildValue(ast.key,"undefined",ObjectInspector_css_default.undefined,showKey,ast.depth):typeof ast.value=="symbol"?value=buildValue(ast.key,ast.value.toString(),ObjectInspector_css_default.string,showKey,ast.depth):typeof ast.value=="function"?value=buildValue(ast.key,`${ast.value.name}()`,ObjectInspector_css_default.key,showKey,ast.depth):typeof ast.value=="object"&&(ast.value===null?value=buildValue(ast.key,"null",ObjectInspector_css_default.null,showKey,ast.depth):Array.isArray(ast.value)?value=buildValue(ast.key,`Array(${ast.value.length})`,ObjectInspector_css_default.key,showKey,ast.depth):ast.value instanceof Date?value=buildValue(ast.key,`Date ${ast.value.toString()}`,ObjectInspector_css_default.value,showKey,ast.depth):ast.value instanceof RegExp?value=buildValue(ast.key,ast.value.toString(),ObjectInspector_css_default.regex,showKey,ast.depth):ast.value instanceof Error?value=buildValue(ast.key,ast.value.toString(),ObjectInspector_css_default.error,showKey,ast.depth):isObject(ast.value)?value=buildValue(ast.key,"{\u2026}",ObjectInspector_css_default.key,showKey,ast.depth):value=buildValue(ast.key,ast.value.constructor.name,ObjectInspector_css_default.key,showKey,ast.depth)),React10__default.createElement("span",(0, import_extends2.default)({className:clsx_m_default(themeClass,className)},html),asyncValue,value)};ObjectValue.defaultProps={showKey:!0};var ObjectValue_default=ObjectValue;var import_extends3=__toESM(require_extends()),import_objectWithoutProperties4=__toESM(require_objectWithoutProperties());var _excluded4=["ast","theme","previewMax","open","colorScheme","className"],buildPreview=(children,previewMax,showKey)=>{let previews=[];for(let i=0;i<children.length;i++){let child=children[i];if(child.isPrototype||(previews.push(React10__default.createElement(ObjectValue_default,{key:child.key,ast:child,showKey})),i<children.length-1?previews.push(", "):previews.push(" ")),child.isPrototype&&i===children.length-1&&(previews.pop(),previews.push(" ")),i===previewMax-1&&children.length>previewMax){previews.push("\u2026 ");break}}return previews},getArrayLabel=(ast,open,previewMax,theme2)=>{let l=ast.value.length;return open?React10__default.createElement("span",null,"Array(",l,")"):React10__default.createElement(React10__default.Fragment,null,React10__default.createElement("span",null,`${theme2==="firefox"?"Array":""}(${l}) [ `),buildPreview(ast.children,previewMax,!1),React10__default.createElement("span",null,"]"))},getObjectLabel=(ast,open,previewMax,theme2)=>ast.isPrototype?React10__default.createElement("span",null,`Object ${theme2==="firefox"?"{ \u2026 }":""}`):open?React10__default.createElement("span",null,"{\u2026}"):React10__default.createElement(React10__default.Fragment,null,React10__default.createElement("span",null,`${theme2==="firefox"?"Object ":""}{ `),buildPreview(ast.children,previewMax,!0),React10__default.createElement("span",null,"}")),getPromiseLabel=(ast,open,previewMax)=>open?React10__default.createElement("span",null,`Promise { "${String(ast.children[0].value)}" }`):React10__default.createElement(React10__default.Fragment,null,React10__default.createElement("span",null,"Promise { "),buildPreview(ast.children,previewMax,!0),React10__default.createElement("span",null,"}")),getMapLabel=(ast,open,previewMax,theme2)=>{let{size}=ast.value;return open?React10__default.createElement("span",null,`Map(${size})`):React10__default.createElement(React10__default.Fragment,null,React10__default.createElement("span",null,`Map${theme2==="chrome"?`(${size})`:""} { `),buildPreview(ast.children,previewMax,!0),React10__default.createElement("span",null,"}"))},getSetLabel=(ast,open,previewMax)=>{let{size}=ast.value;return open?React10__default.createElement("span",null,"Set(",size,")"):React10__default.createElement(React10__default.Fragment,null,React10__default.createElement("span",null,`Set(${ast.value.size}) {`),buildPreview(ast.children,previewMax,!0),React10__default.createElement("span",null,"}"))},ObjectLabel=props=>{let{ast,theme:theme2,previewMax,open,colorScheme,className}=props,html=(0, import_objectWithoutProperties4.default)(props,_excluded4),{themeClass,currentTheme}=useTheme({theme:theme2,colorScheme},ObjectInspector_css_default),isPrototype=ast.isPrototype||!1,classes=clsx_m_default(ObjectInspector_css_default.objectLabel,themeClass,className,{[ObjectInspector_css_default.prototype]:isPrototype}),isRoot=ast.depth<=0,Key=()=>React10__default.createElement("span",{className:isPrototype?ObjectInspector_css_default.prototype:ObjectInspector_css_default.key},isRoot?"":`${ast.key}: `);return ast.type==="array"?React10__default.createElement("span",(0, import_extends3.default)({className:classes},html),React10__default.createElement(Key,null),getArrayLabel(ast,open,previewMax,currentTheme)):ast.type==="function"?React10__default.createElement("span",(0, import_extends3.default)({className:classes},html),React10__default.createElement(Key,null),currentTheme==="chrome"&&React10__default.createElement("span",{className:ObjectInspector_css_default.functionDecorator},"\u0192 "),React10__default.createElement("span",{className:clsx_m_default({[ObjectInspector_css_default.function]:!isPrototype})},`${ast.value.name}()`)):ast.type==="promise"?React10__default.createElement("span",(0, import_extends3.default)({className:classes},html),React10__default.createElement(Key,null),getPromiseLabel(ast,open,previewMax)):ast.type==="map"?React10__default.createElement("span",(0, import_extends3.default)({className:classes},html),React10__default.createElement(Key,null),getMapLabel(ast,open,previewMax,currentTheme)):ast.type==="set"?React10__default.createElement("span",(0, import_extends3.default)({className:classes},html),React10__default.createElement(Key,null),getSetLabel(ast,open,previewMax)):React10__default.createElement("span",(0, import_extends3.default)({className:classes},html),React10__default.createElement(Key,null),getObjectLabel(ast,open,previewMax,currentTheme))};ObjectLabel.defaultProps={previewMax:8,open:!1};var ObjectLabel_default=ObjectLabel;var ObjectInspectorItem=props=>{let{ast,expandLevel,depth}=props,[resolved,setResolved]=useState(),[open,setOpen]=useState(depth<expandLevel);return useEffect(()=>{(async()=>{if(ast.type!=="value"){let promises=ast.children.map(f=>f()),children=await Promise.all(promises),r=(0, import_objectSpread22.default)((0, import_objectSpread22.default)({},ast),{},{children});setResolved(r);}})();},[ast]),resolved?React10__default.createElement(Tree,{hover:!1,open,label:React10__default.createElement(ObjectLabel_default,{open,ast:resolved}),onSelect:()=>{var _props$onSelect;(_props$onSelect=props.onSelect)===null||_props$onSelect===void 0||_props$onSelect.call(props,ast);},onUpdate:value=>{setOpen(value);}},resolved.children.map(child=>React10__default.createElement(ObjectInspectorItem,{key:child.key,ast:child,depth:depth+1,expandLevel,onSelect:props.onSelect}))):React10__default.createElement(Tree,{hover:!1,label:React10__default.createElement(ObjectValue_default,{ast}),onSelect:()=>{var _props$onSelect2;(_props$onSelect2=props.onSelect)===null||_props$onSelect2===void 0||_props$onSelect2.call(props,ast);}})};ObjectInspectorItem.defaultProps={expandLevel:0,depth:0};var ObjectInspectorItem_default=ObjectInspectorItem;var _excluded5=["data","expandLevel","sortKeys","includePrototypes","className","theme","colorScheme","onSelect"],ObjectInspector=props=>{let{data,expandLevel,sortKeys,includePrototypes,className,theme:theme2,colorScheme,onSelect}=props,html=(0, import_objectWithoutProperties5.default)(props,_excluded5),[ast,setAST]=useState(void 0),{themeClass,currentTheme,currentColorScheme}=useTheme({theme:theme2,colorScheme},ObjectInspector_css_default);return useEffect(()=>{(async()=>{setAST(await parse(data,sortKeys,includePrototypes));})();},[data,sortKeys,includePrototypes]),React10__default.createElement("div",(0, import_extends4.default)({className:clsx_m_default(ObjectInspector_css_default.objectInspector,className,themeClass)},html),ast&&React10__default.createElement(ThemeProvider,{theme:currentTheme,colorScheme:currentColorScheme},React10__default.createElement(ObjectInspectorItem_default,{ast,expandLevel,onSelect})))};ObjectInspector.defaultProps={expandLevel:0,sortKeys:!0,includePrototypes:!0};var colorsLight={base:"#444",nullish:"#7D99AA",string:"#16B242",number:"#5D40D0",boolean:"#f41840",objectkey:"#698394",instance:"#A15C20",function:"#EA7509",muted:"#7D99AA",tag:{name:"#6F2CAC",suffix:"#1F99E5"},date:"#459D9C",error:{name:"#D43900",message:"#444"},regex:{source:"#A15C20",flags:"#EA7509"},meta:"#EA7509",method:"#0271B6"},colorsDark={base:"#eee",nullish:"#aaa",string:"#5FE584",number:"#6ba5ff",boolean:"#ff4191",objectkey:"#accfe6",instance:"#E3B551",function:"#E3B551",muted:"#aaa",tag:{name:"#f57bff",suffix:"#8EB5FF"},date:"#70D4D3",error:{name:"#f40",message:"#eee"},regex:{source:"#FAD483",flags:"#E3B551"},meta:"#FAD483",method:"#5EC1FF"},useThemeColors=()=>{let{base}=useTheme$1();return base==="dark"?colorsDark:colorsLight},special=/[^A-Z0-9]/i,trimEnd=/[\s.,…]+$/gm,ellipsize=(string,maxlength)=>{if(string.length<=maxlength)return string;for(let i=maxlength-1;i>=0;i-=1)if(special.test(string[i])&&i>10)return `${string.slice(0,i).replace(trimEnd,"")}\u2026`;return `${string.slice(0,maxlength).replace(trimEnd,"")}\u2026`},stringify=value=>{try{return JSON.stringify(value,null,1)}catch{return String(value)}},interleave=(nodes,separator)=>nodes.flatMap((node,index)=>index===nodes.length-1?[node]:[node,React10__default.cloneElement(separator,{key:`sep${index}`})]),Node=({value,nested,showObjectInspector,callsById,...props})=>{switch(!0){case value===null:return React10__default.createElement(NullNode,{...props});case value===void 0:return React10__default.createElement(UndefinedNode,{...props});case Array.isArray(value):return React10__default.createElement(ArrayNode,{...props,value,callsById});case typeof value=="string":return React10__default.createElement(StringNode,{...props,value});case typeof value=="number":return React10__default.createElement(NumberNode,{...props,value});case typeof value=="boolean":return React10__default.createElement(BooleanNode,{...props,value});case Object.prototype.hasOwnProperty.call(value,"__date__"):return React10__default.createElement(DateNode,{...props,...value.__date__});case Object.prototype.hasOwnProperty.call(value,"__error__"):return React10__default.createElement(ErrorNode,{...props,...value.__error__});case Object.prototype.hasOwnProperty.call(value,"__regexp__"):return React10__default.createElement(RegExpNode,{...props,...value.__regexp__});case Object.prototype.hasOwnProperty.call(value,"__function__"):return React10__default.createElement(FunctionNode,{...props,...value.__function__});case Object.prototype.hasOwnProperty.call(value,"__symbol__"):return React10__default.createElement(SymbolNode,{...props,...value.__symbol__});case Object.prototype.hasOwnProperty.call(value,"__element__"):return React10__default.createElement(ElementNode,{...props,...value.__element__});case Object.prototype.hasOwnProperty.call(value,"__class__"):return React10__default.createElement(ClassNode,{...props,...value.__class__});case Object.prototype.hasOwnProperty.call(value,"__callId__"):return React10__default.createElement(MethodCall,{call:callsById.get(value.__callId__),callsById});case Object.prototype.toString.call(value)==="[object Object]":return React10__default.createElement(ObjectNode,{value,showInspector:showObjectInspector,callsById,...props});default:return React10__default.createElement(OtherNode,{value,...props})}},NullNode=props=>{let colors2=useThemeColors();return React10__default.createElement("span",{style:{color:colors2.nullish},...props},"null")},UndefinedNode=props=>{let colors2=useThemeColors();return React10__default.createElement("span",{style:{color:colors2.nullish},...props},"undefined")},StringNode=({value,...props})=>{let colors2=useThemeColors();return React10__default.createElement("span",{style:{color:colors2.string},...props},JSON.stringify(ellipsize(value,50)))},NumberNode=({value,...props})=>{let colors2=useThemeColors();return React10__default.createElement("span",{style:{color:colors2.number},...props},value)},BooleanNode=({value,...props})=>{let colors2=useThemeColors();return React10__default.createElement("span",{style:{color:colors2.boolean},...props},String(value))},ArrayNode=({value,nested=!1,callsById})=>{let colors2=useThemeColors();if(nested)return React10__default.createElement("span",{style:{color:colors2.base}},"[\u2026]");let nodes=value.slice(0,3).map(v=>React10__default.createElement(Node,{key:JSON.stringify(v),value:v,nested:!0,callsById})),nodelist=interleave(nodes,React10__default.createElement("span",null,", "));return value.length<=3?React10__default.createElement("span",{style:{color:colors2.base}},"[",nodelist,"]"):React10__default.createElement("span",{style:{color:colors2.base}},"(",value.length,") [",nodelist,", \u2026]")},ObjectNode=({showInspector,value,callsById,nested=!1})=>{let isDarkMode=useTheme$1().base==="dark",colors2=useThemeColors();if(showInspector)return React10__default.createElement(React10__default.Fragment,null,React10__default.createElement(ObjectInspector,{id:"interactions-object-inspector",data:value,includePrototypes:!1,colorScheme:isDarkMode?"dark":"light"}));if(nested)return React10__default.createElement("span",{style:{color:colors2.base}},"{\u2026}");let nodelist=interleave(Object.entries(value).slice(0,2).map(([k,v])=>React10__default.createElement(Fragment,{key:k},React10__default.createElement("span",{style:{color:colors2.objectkey}},k,": "),React10__default.createElement(Node,{value:v,callsById,nested:!0}))),React10__default.createElement("span",null,", "));return Object.keys(value).length<=2?React10__default.createElement("span",{style:{color:colors2.base}},"{ ",nodelist," }"):React10__default.createElement("span",{style:{color:colors2.base}},"(",Object.keys(value).length,") ","{ ",nodelist,", \u2026 }")},ClassNode=({name})=>{let colors2=useThemeColors();return React10__default.createElement("span",{style:{color:colors2.instance}},name)},FunctionNode=({name})=>{let colors2=useThemeColors();return name?React10__default.createElement("span",{style:{color:colors2.function}},name):React10__default.createElement("span",{style:{color:colors2.nullish,fontStyle:"italic"}},"anonymous")},ElementNode=({prefix,localName,id,classNames=[],innerText})=>{let name=prefix?`${prefix}:${localName}`:localName,colors2=useThemeColors();return React10__default.createElement("span",{style:{wordBreak:"keep-all"}},React10__default.createElement("span",{key:`${name}_lt`,style:{color:colors2.muted}},"<"),React10__default.createElement("span",{key:`${name}_tag`,style:{color:colors2.tag.name}},name),React10__default.createElement("span",{key:`${name}_suffix`,style:{color:colors2.tag.suffix}},id?`#${id}`:classNames.reduce((acc,className)=>`${acc}.${className}`,"")),React10__default.createElement("span",{key:`${name}_gt`,style:{color:colors2.muted}},">"),!id&&classNames.length===0&&innerText&&React10__default.createElement(React10__default.Fragment,null,React10__default.createElement("span",{key:`${name}_text`},innerText),React10__default.createElement("span",{key:`${name}_close_lt`,style:{color:colors2.muted}},"<"),React10__default.createElement("span",{key:`${name}_close_tag`,style:{color:colors2.tag.name}},"/",name),React10__default.createElement("span",{key:`${name}_close_gt`,style:{color:colors2.muted}},">")))},DateNode=({value})=>{let[date,time,ms]=value.split(/[T.Z]/),colors2=useThemeColors();return React10__default.createElement("span",{style:{whiteSpace:"nowrap",color:colors2.date}},date,React10__default.createElement("span",{style:{opacity:.7}},"T"),time==="00:00:00"?React10__default.createElement("span",{style:{opacity:.7}},time):time,ms==="000"?React10__default.createElement("span",{style:{opacity:.7}},".",ms):`.${ms}`,React10__default.createElement("span",{style:{opacity:.7}},"Z"))},ErrorNode=({name,message})=>{let colors2=useThemeColors();return React10__default.createElement("span",{style:{color:colors2.error.name}},name,message&&": ",message&&React10__default.createElement("span",{style:{color:colors2.error.message},title:message.length>50?message:""},ellipsize(message,50)))},RegExpNode=({flags,source})=>{let colors2=useThemeColors();return React10__default.createElement("span",{style:{whiteSpace:"nowrap",color:colors2.regex.flags}},"/",React10__default.createElement("span",{style:{color:colors2.regex.source}},source),"/",flags)},SymbolNode=({description})=>{let colors2=useThemeColors();return React10__default.createElement("span",{style:{whiteSpace:"nowrap",color:colors2.instance}},"Symbol(",description&&React10__default.createElement("span",{style:{color:colors2.meta}},'"',description,'"'),")")},OtherNode=({value})=>{let colors2=useThemeColors();return React10__default.createElement("span",{style:{color:colors2.meta}},stringify(value))},StepNode=({label})=>{let colors2=useThemeColors(),{typography:typography4}=useTheme$1();return React10__default.createElement("span",{style:{color:colors2.base,fontFamily:typography4.fonts.base,fontSize:typography4.size.s2-1}},label)},MethodCall=({call,callsById})=>{if(!call)return null;if(call.method==="step"&&call.path.length===0)return React10__default.createElement(StepNode,{label:call.args[0]});let path=call.path.flatMap((elem,index)=>{let callId=elem.__callId__;return [callId?React10__default.createElement(MethodCall,{key:`elem${index}`,call:callsById.get(callId),callsById}):React10__default.createElement("span",{key:`elem${index}`},elem),React10__default.createElement("wbr",{key:`wbr${index}`}),React10__default.createElement("span",{key:`dot${index}`},".")]}),args=call.args.flatMap((arg,index,array)=>{let node=React10__default.createElement(Node,{key:`node${index}`,value:arg,callsById});return index<array.length-1?[node,React10__default.createElement("span",{key:`comma${index}`},",\xA0"),React10__default.createElement("wbr",{key:`wbr${index}`})]:[node]}),colors2=useThemeColors();return React10__default.createElement(React10__default.Fragment,null,React10__default.createElement("span",{style:{color:colors2.base}},path),React10__default.createElement("span",{style:{color:colors2.method}},call.method),React10__default.createElement("span",{style:{color:colors2.base}},"(",React10__default.createElement("wbr",null),args,React10__default.createElement("wbr",null),")"))};var getParams=(line,fromIndex=0)=>{for(let i=fromIndex,depth=1;i<line.length;i+=1)if(line[i]==="("?depth+=1:line[i]===")"&&(depth-=1),depth===0)return line.slice(fromIndex,i);return ""},parseValue=value=>{try{return value==="undefined"?void 0:JSON.parse(value)}catch{return value}},StyledExpected=styled.span(({theme:theme2})=>({color:theme2.base==="light"?theme2.color.positiveText:theme2.color.positive})),StyledReceived=styled.span(({theme:theme2})=>({color:theme2.base==="light"?theme2.color.negativeText:theme2.color.negative})),Received=({value,parsed})=>parsed?React10__default.createElement(Node,{showObjectInspector:!0,value,style:{color:"#D43900"}}):React10__default.createElement(StyledReceived,null,value),Expected=({value,parsed})=>parsed?typeof value=="string"&&value.startsWith("called with")?React10__default.createElement(React10__default.Fragment,null,value):React10__default.createElement(Node,{showObjectInspector:!0,value,style:{color:"#16B242"}}):React10__default.createElement(StyledExpected,null,value),MatcherResult=({message})=>{let lines=message.split(`
13
14
  `);return React10__default.createElement("pre",{style:{margin:0,padding:"8px 10px 8px 36px",fontSize:typography.size.s1}},lines.flatMap((line,index)=>{if(line.startsWith("expect(")){let received=getParams(line,7),remainderIndex=received&&7+received.length,matcher=received&&line.slice(remainderIndex).match(/\.(to|last|nth)[A-Z]\w+\(/);if(matcher){let expectedIndex=remainderIndex+matcher.index+matcher[0].length,expected=getParams(line,expectedIndex);if(expected)return ["expect(",React10__default.createElement(Received,{key:`received_${received}`,value:received}),line.slice(remainderIndex,expectedIndex),React10__default.createElement(Expected,{key:`expected_${expected}`,value:expected}),line.slice(expectedIndex+expected.length),React10__default.createElement("br",{key:`br${index}`})]}}if(line.match(/^\s*- /))return [React10__default.createElement(Expected,{key:line+index,value:line}),React10__default.createElement("br",{key:`br${index}`})];if(line.match(/^\s*\+ /))return [React10__default.createElement(Received,{key:line+index,value:line}),React10__default.createElement("br",{key:`br${index}`})];let[,assertionLabel,assertionValue]=line.match(/^(Expected|Received): (.*)$/)||[];if(assertionLabel&&assertionValue)return assertionLabel==="Expected"?["Expected: ",React10__default.createElement(Expected,{key:line+index,value:parseValue(assertionValue),parsed:!0}),React10__default.createElement("br",{key:`br${index}`})]:["Received: ",React10__default.createElement(Received,{key:line+index,value:parseValue(assertionValue),parsed:!0}),React10__default.createElement("br",{key:`br${index}`})];let[,prefix,numberOfCalls]=line.match(/(Expected number|Received number|Number) of calls: (\d+)$/i)||[];if(prefix&&numberOfCalls)return [`${prefix} of calls: `,React10__default.createElement(Node,{key:line+index,value:Number(numberOfCalls)}),React10__default.createElement("br",{key:`br${index}`})];let[,receivedValue]=line.match(/^Received has value: (.+)$/)||[];return receivedValue?["Received has value: ",React10__default.createElement(Node,{key:line+index,value:parseValue(receivedValue)}),React10__default.createElement("br",{key:`br${index}`})]:[React10__default.createElement("span",{key:line+index},line),React10__default.createElement("br",{key:`br${index}`})]}))};var colors={pure:{gray:{500:"#CCCCCC"}}},theme={colors},theme_default=theme;var{colors:{pure:{gray}}}=theme_default,StyledStatusIcon=styled(Icons)(({theme:theme2,status})=>{let color={[CallStates.DONE]:theme2.color.positive,[CallStates.ERROR]:theme2.color.negative,[CallStates.ACTIVE]:theme2.color.secondary,[CallStates.WAITING]:transparentize(.5,gray[500])}[status];return {width:status===CallStates.WAITING?6:12,height:status===CallStates.WAITING?6:12,color,justifySelf:"center"}}),StatusIcon=({status,className})=>{let icon={[CallStates.DONE]:"check",[CallStates.ERROR]:"stopalt",[CallStates.ACTIVE]:"play",[CallStates.WAITING]:"circle"}[status];return React10__default.createElement(StyledStatusIcon,{"data-testid":`icon-${status}`,status,icon,className})};var MethodCallWrapper=styled.div(()=>({fontFamily:typography.fonts.mono,fontSize:typography.size.s1,overflowWrap:"break-word",inlineSize:"calc( 100% - 40px )"})),RowContainer=styled("div",{shouldForwardProp:prop=>!["call","pausedAt"].includes(prop.toString())})(({theme:theme2,call})=>({position:"relative",display:"flex",flexDirection:"column",borderBottom:`1px solid ${theme2.appBorderColor}`,fontFamily:typography.fonts.base,fontSize:13,...call.status===CallStates.ERROR&&{backgroundColor:theme2.base==="dark"?transparentize(.93,theme2.color.negative):theme2.background.warning},paddingLeft:call.ancestors.length*20}),({theme:theme2,call,pausedAt})=>pausedAt===call.id&&{"&::before":{content:'""',position:"absolute",top:-5,zIndex:1,borderTop:"4.5px solid transparent",borderLeft:`7px solid ${theme2.color.warning}`,borderBottom:"4.5px solid transparent"},"&::after":{content:'""',position:"absolute",top:-1,zIndex:1,width:"100%",borderTop:`1.5px solid ${theme2.color.warning}`}}),RowHeader=styled.div(({theme:theme2,isInteractive})=>({display:"flex","&:hover":isInteractive?{}:{background:theme2.background.hoverable}})),RowLabel=styled("button",{shouldForwardProp:prop=>!["call"].includes(prop.toString())})(({theme:theme2,disabled,call})=>({flex:1,display:"grid",background:"none",border:0,gridTemplateColumns:"15px 1fr",alignItems:"center",minHeight:40,margin:0,padding:"8px 15px",textAlign:"start",cursor:disabled||call.status===CallStates.ERROR?"default":"pointer","&:focus-visible":{outline:0,boxShadow:`inset 3px 0 0 0 ${call.status===CallStates.ERROR?theme2.color.warning:theme2.color.secondary}`,background:call.status===CallStates.ERROR?"transparent":theme2.background.hoverable},"& > div":{opacity:call.status===CallStates.WAITING?.5:1}})),RowActions=styled.div({padding:6}),StyledIconButton2=styled(IconButton)(({theme:theme2})=>({color:theme2.textMutedColor,margin:"0 3px"})),Note2=styled(TooltipNote)(({theme:theme2})=>({fontFamily:theme2.typography.fonts.base})),RowMessage=styled("div")(({theme:theme2})=>({padding:"8px 10px 8px 36px",fontSize:typography.size.s1,color:theme2.color.defaultText,pre:{margin:0,padding:0}})),Exception=({exception})=>{if(exception.message.startsWith("expect("))return React10.createElement(MatcherResult,{...exception});let paragraphs=exception.message.split(`
14
15
 
15
- `),more=paragraphs.length>1;return React10.createElement(RowMessage,null,React10.createElement("pre",null,paragraphs[0]),more&&React10.createElement("p",null,"See the full stack trace in the browser console."))},Interaction=({call,callsById,controls,controlStates,childCallIds,isHidden,isCollapsed,toggleCollapsed,pausedAt})=>{let[isHovered,setIsHovered]=React10.useState(!1),isInteractive=!controlStates.goto||!call.interceptable||!!call.ancestors.length;return isHidden?null:React10.createElement(RowContainer,{call,pausedAt},React10.createElement(RowHeader,{isInteractive},React10.createElement(RowLabel,{"aria-label":"Interaction step",call,onClick:()=>controls.goto(call.id),disabled:isInteractive,onMouseEnter:()=>controlStates.goto&&setIsHovered(!0),onMouseLeave:()=>controlStates.goto&&setIsHovered(!1)},React10.createElement(StatusIcon,{status:isHovered?CallStates.ACTIVE:call.status}),React10.createElement(MethodCallWrapper,{style:{marginLeft:6,marginBottom:1}},React10.createElement(MethodCall,{call,callsById}))),React10.createElement(RowActions,null,childCallIds?.length>0&&React10.createElement(WithTooltip,{hasChrome:!1,tooltip:React10.createElement(Note2,{note:`${isCollapsed?"Show":"Hide"} interactions`})},React10.createElement(StyledIconButton2,{containsIcon:!0,onClick:toggleCollapsed},React10.createElement(Icons,{icon:"listunordered"}))))),call.status===CallStates.ERROR&&call.exception?.callId===call.id&&React10.createElement(Exception,{exception:call.exception}))};var Container=styled.div(({theme:theme2,withException})=>({minHeight:"100%",background:theme2.background.content,...withException&&{backgroundColor:theme2.base==="dark"?transparentize(.93,theme2.color.negative):theme2.background.warning}})),CaughtException=styled.div(({theme:theme2})=>({padding:15,fontSize:theme2.typography.size.s2-1,lineHeight:"19px"})),CaughtExceptionCode=styled.code(({theme:theme2})=>({margin:"0 1px",padding:3,fontSize:theme2.typography.size.s1-1,lineHeight:1,verticalAlign:"top",background:"rgba(0, 0, 0, 0.05)",border:`1px solid ${theme2.appBorderColor}`,borderRadius:3})),CaughtExceptionTitle=styled.div({paddingBottom:4,fontWeight:"bold"}),CaughtExceptionDescription=styled.p({margin:0,padding:"0 0 20px"}),CaughtExceptionStack=styled.pre(({theme:theme2})=>({margin:0,padding:0,fontSize:theme2.typography.size.s1-1})),InteractionsPanel=React10.memo(function({calls,controls,controlStates,interactions,fileName,hasException,caughtException,isPlaying,pausedAt,onScrollToEnd,endRef}){return React10.createElement(Container,{withException:!!caughtException},(interactions.length>0||hasException)&&React10.createElement(Subnav,{controls,controlStates,status:isPlaying?CallStates.ACTIVE:hasException?CallStates.ERROR:CallStates.DONE,storyFileName:fileName,onScrollToEnd}),React10.createElement("div",{"aria-label":"Interactions list"},interactions.map(call=>React10.createElement(Interaction,{key:call.id,call,callsById:calls,controls,controlStates,childCallIds:call.childCallIds,isHidden:call.isHidden,isCollapsed:call.isCollapsed,toggleCollapsed:call.toggleCollapsed,pausedAt}))),caughtException&&!caughtException.message?.startsWith("ignoredException")&&React10.createElement(CaughtException,null,React10.createElement(CaughtExceptionTitle,null,"Caught exception in ",React10.createElement(CaughtExceptionCode,null,"play")," function"),React10.createElement(CaughtExceptionDescription,null,"This story threw an error after it finished rendering which means your interactions couldn' t be run.Go to this story' s play function in ",fileName," to fix."),React10.createElement(CaughtExceptionStack,{"data-chromatic":"ignore"},caughtException.stack||`${caughtException.name}: ${caughtException.message}`)),React10.createElement("div",{ref:endRef}),!isPlaying&&!caughtException&&interactions.length===0&&React10.createElement(Placeholder,null,"No interactions found",React10.createElement(Link,{href:"https://storybook.js.org/docs/react/writing-stories/play-function",target:"_blank",withArrow:!0},"Learn how to add interactions to your story")))});var INITIAL_CONTROL_STATES={start:!1,back:!1,goto:!1,next:!1,end:!1},getInteractions=({log,calls,collapsed,setCollapsed})=>{let callsById=new Map,childCallMap=new Map;return log.map(({callId,ancestors,status})=>{let isHidden=!1;return ancestors.forEach(ancestor=>{collapsed.has(ancestor)&&(isHidden=!0),childCallMap.set(ancestor,(childCallMap.get(ancestor)||[]).concat(callId));}),{...calls.get(callId),status,isHidden}}).map(call=>{let status=call.status===CallStates.ERROR&&callsById.get(call.ancestors.slice(-1)[0])?.status===CallStates.ACTIVE?CallStates.ACTIVE:call.status;return callsById.set(call.id,{...call,status}),{...call,status,childCallIds:childCallMap.get(call.id),isCollapsed:collapsed.has(call.id),toggleCollapsed:()=>setCollapsed(ids=>(ids.has(call.id)?ids.delete(call.id):ids.add(call.id),new Set(ids)))}})},Panel=memo(function({storyId}){let[addonState,set]=useAddonState(ADDON_ID,{controlStates:INITIAL_CONTROL_STATES,isErrored:!1,pausedAt:void 0,interactions:[],isPlaying:!1,hasException:!1,caughtException:void 0,interactionsCount:0}),[scrollTarget,setScrollTarget]=useState(void 0),[collapsed,setCollapsed]=useState(new Set),{controlStates=INITIAL_CONTROL_STATES,isErrored=!1,pausedAt=void 0,interactions=[],isPlaying=!1,caughtException=void 0}=addonState,log=useRef([]),calls=useRef(new Map),setCall=({status,...call})=>calls.current.set(call.id,call),endRef=useRef();useEffect(()=>{let observer;return global.IntersectionObserver&&(observer=new global.IntersectionObserver(([end])=>setScrollTarget(end.isIntersecting?void 0:end.target),{root:global.document.querySelector("#panel-tab-content")}),endRef.current&&observer.observe(endRef.current)),()=>observer?.disconnect()},[]);let emit=useChannel({[EVENTS.CALL]:setCall,[EVENTS.SYNC]:payload=>{set(s=>{let list=getInteractions({log:payload.logItems,calls:calls.current,collapsed,setCollapsed});return {...s,controlStates:payload.controlStates,pausedAt:payload.pausedAt,interactions:list,interactionsCount:list.filter(({method})=>method!=="step").length}}),log.current=payload.logItems;},[STORY_RENDER_PHASE_CHANGED]:event=>{if(event.newPhase==="preparing"){set(s=>({controlStates:INITIAL_CONTROL_STATES,isErrored:!1,pausedAt:void 0,interactions:[],isPlaying:!1,isRerunAnimating:!1,scrollTarget,collapsed:new Set,hasException:!1,caughtException:void 0,interactionsCount:0}));return}set(s=>({...s,isPlaying:event.newPhase==="playing",pausedAt:void 0,...event.newPhase==="rendering"?{isErrored:!1,caughtException:void 0}:{}}));},[STORY_THREW_EXCEPTION]:()=>{set(s=>({...s,isErrored:!0}));},[PLAY_FUNCTION_THREW_EXCEPTION]:e=>{e?.message!==IGNORED_EXCEPTION.message?set(s=>({...s,caughtException:e})):set(s=>({...s,caughtException:void 0}));}},[collapsed]);useEffect(()=>{set(s=>{let list=getInteractions({log:log.current,calls:calls.current,collapsed,setCollapsed});return {...s,interactions:list,interactionsCount:list.filter(({method})=>method!=="step").length}});},[collapsed]);let controls=useMemo(()=>({start:()=>emit(EVENTS.START,{storyId}),back:()=>emit(EVENTS.BACK,{storyId}),goto:callId=>emit(EVENTS.GOTO,{storyId,callId}),next:()=>emit(EVENTS.NEXT,{storyId}),end:()=>emit(EVENTS.END,{storyId}),rerun:()=>{emit(FORCE_REMOUNT,{storyId});}}),[storyId]),storyFilePath=useParameter("fileName",""),[fileName]=storyFilePath.toString().split("/").slice(-1),scrollToTarget=()=>scrollTarget?.scrollIntoView({behavior:"smooth",block:"end"}),hasException=!!caughtException||interactions.some(v=>v.status===CallStates.ERROR);return isErrored?React10__default.createElement(Fragment,{key:"interactions"}):React10__default.createElement(Fragment,{key:"interactions"},React10__default.createElement(InteractionsPanel,{calls:calls.current,controls,controlStates,interactions,fileName,hasException,caughtException,isPlaying,pausedAt,endRef,onScrollToEnd:scrollTarget&&scrollToTarget}))});var TabIcon=styled(StatusIcon)({marginLeft:5});function Title(){let[addonState={}]=useAddonState(ADDON_ID),{hasException,interactionsCount}=addonState;return React10__default.createElement("div",null,React10__default.createElement(Spaced,{col:1},React10__default.createElement("span",{style:{display:"inline-block",verticalAlign:"middle"}},"Interactions"),interactionsCount&&!hasException?React10__default.createElement(Badge,{status:"neutral"},interactionsCount):null,hasException?React10__default.createElement(TabIcon,{status:CallStates.ERROR}):null))}addons.register(ADDON_ID,api=>{addons.add(PANEL_ID,{type:types.PANEL,title:Title,match:({viewMode})=>viewMode==="story",render:({active})=>{let newLocal=useCallback(({state})=>({storyId:state.storyId}),[]);return React10__default.createElement(AddonPanel,{active},React10__default.createElement(Consumer,{filter:newLocal},({storyId})=>React10__default.createElement(Panel,{storyId})))}});});
16
+ `),more=paragraphs.length>1;return React10.createElement(RowMessage,null,React10.createElement("pre",null,paragraphs[0]),more&&React10.createElement("p",null,"See the full stack trace in the browser console."))},Interaction=({call,callsById,controls,controlStates,childCallIds,isHidden,isCollapsed,toggleCollapsed,pausedAt})=>{let[isHovered,setIsHovered]=React10.useState(!1),isInteractive=!controlStates.goto||!call.interceptable||!!call.ancestors.length;return isHidden?null:React10.createElement(RowContainer,{call,pausedAt},React10.createElement(RowHeader,{isInteractive},React10.createElement(RowLabel,{"aria-label":"Interaction step",call,onClick:()=>controls.goto(call.id),disabled:isInteractive,onMouseEnter:()=>controlStates.goto&&setIsHovered(!0),onMouseLeave:()=>controlStates.goto&&setIsHovered(!1)},React10.createElement(StatusIcon,{status:isHovered?CallStates.ACTIVE:call.status}),React10.createElement(MethodCallWrapper,{style:{marginLeft:6,marginBottom:1}},React10.createElement(MethodCall,{call,callsById}))),React10.createElement(RowActions,null,childCallIds?.length>0&&React10.createElement(WithTooltip,{hasChrome:!1,tooltip:React10.createElement(Note2,{note:`${isCollapsed?"Show":"Hide"} interactions`})},React10.createElement(StyledIconButton2,{containsIcon:!0,onClick:toggleCollapsed},React10.createElement(Icon.ListUnordered,null))))),call.status===CallStates.ERROR&&call.exception?.callId===call.id&&React10.createElement(Exception,{exception:call.exception}))};var Container=styled.div(({theme:theme2,withException})=>({minHeight:"100%",background:theme2.background.content,...withException&&{backgroundColor:theme2.base==="dark"?transparentize(.93,theme2.color.negative):theme2.background.warning}})),CaughtException=styled.div(({theme:theme2})=>({padding:15,fontSize:theme2.typography.size.s2-1,lineHeight:"19px"})),CaughtExceptionCode=styled.code(({theme:theme2})=>({margin:"0 1px",padding:3,fontSize:theme2.typography.size.s1-1,lineHeight:1,verticalAlign:"top",background:"rgba(0, 0, 0, 0.05)",border:`1px solid ${theme2.appBorderColor}`,borderRadius:3})),CaughtExceptionTitle=styled.div({paddingBottom:4,fontWeight:"bold"}),CaughtExceptionDescription=styled.p({margin:0,padding:"0 0 20px"}),CaughtExceptionStack=styled.pre(({theme:theme2})=>({margin:0,padding:0,fontSize:theme2.typography.size.s1-1})),InteractionsPanel=React10.memo(function({calls,controls,controlStates,interactions,fileName,hasException,caughtException,isPlaying,pausedAt,onScrollToEnd,endRef}){return React10.createElement(Container,{withException:!!caughtException},(interactions.length>0||hasException)&&React10.createElement(Subnav,{controls,controlStates,status:isPlaying?CallStates.ACTIVE:hasException?CallStates.ERROR:CallStates.DONE,storyFileName:fileName,onScrollToEnd}),React10.createElement("div",{"aria-label":"Interactions list"},interactions.map(call=>React10.createElement(Interaction,{key:call.id,call,callsById:calls,controls,controlStates,childCallIds:call.childCallIds,isHidden:call.isHidden,isCollapsed:call.isCollapsed,toggleCollapsed:call.toggleCollapsed,pausedAt}))),caughtException&&!caughtException.message?.startsWith("ignoredException")&&React10.createElement(CaughtException,null,React10.createElement(CaughtExceptionTitle,null,"Caught exception in ",React10.createElement(CaughtExceptionCode,null,"play")," function"),React10.createElement(CaughtExceptionDescription,null,"This story threw an error after it finished rendering which means your interactions couldn' t be run.Go to this story' s play function in ",fileName," to fix."),React10.createElement(CaughtExceptionStack,{"data-chromatic":"ignore"},caughtException.stack||`${caughtException.name}: ${caughtException.message}`)),React10.createElement("div",{ref:endRef}),!isPlaying&&!caughtException&&interactions.length===0&&React10.createElement(Placeholder,null,"No interactions found",React10.createElement(Link,{href:"https://storybook.js.org/docs/react/writing-stories/play-function",target:"_blank",withArrow:!0},"Learn how to add interactions to your story")))});var INITIAL_CONTROL_STATES={start:!1,back:!1,goto:!1,next:!1,end:!1},getInteractions=({log,calls,collapsed,setCollapsed})=>{let callsById=new Map,childCallMap=new Map;return log.map(({callId,ancestors,status})=>{let isHidden=!1;return ancestors.forEach(ancestor=>{collapsed.has(ancestor)&&(isHidden=!0),childCallMap.set(ancestor,(childCallMap.get(ancestor)||[]).concat(callId));}),{...calls.get(callId),status,isHidden}}).map(call=>{let status=call.status===CallStates.ERROR&&callsById.get(call.ancestors.slice(-1)[0])?.status===CallStates.ACTIVE?CallStates.ACTIVE:call.status;return callsById.set(call.id,{...call,status}),{...call,status,childCallIds:childCallMap.get(call.id),isCollapsed:collapsed.has(call.id),toggleCollapsed:()=>setCollapsed(ids=>(ids.has(call.id)?ids.delete(call.id):ids.add(call.id),new Set(ids)))}})},Panel=memo(function({storyId}){let[addonState,set]=useAddonState(ADDON_ID,{controlStates:INITIAL_CONTROL_STATES,isErrored:!1,pausedAt:void 0,interactions:[],isPlaying:!1,hasException:!1,caughtException:void 0,interactionsCount:0}),[scrollTarget,setScrollTarget]=useState(void 0),[collapsed,setCollapsed]=useState(new Set),{controlStates=INITIAL_CONTROL_STATES,isErrored=!1,pausedAt=void 0,interactions=[],isPlaying=!1,caughtException=void 0}=addonState,log=useRef([]),calls=useRef(new Map),setCall=({status,...call})=>calls.current.set(call.id,call),endRef=useRef();useEffect(()=>{let observer;return global.IntersectionObserver&&(observer=new global.IntersectionObserver(([end])=>setScrollTarget(end.isIntersecting?void 0:end.target),{root:global.document.querySelector("#panel-tab-content")}),endRef.current&&observer.observe(endRef.current)),()=>observer?.disconnect()},[]);let emit=useChannel({[EVENTS.CALL]:setCall,[EVENTS.SYNC]:payload=>{set(s=>{let list=getInteractions({log:payload.logItems,calls:calls.current,collapsed,setCollapsed});return {...s,controlStates:payload.controlStates,pausedAt:payload.pausedAt,interactions:list,interactionsCount:list.filter(({method})=>method!=="step").length}}),log.current=payload.logItems;},[STORY_RENDER_PHASE_CHANGED]:event=>{if(event.newPhase==="preparing"){set(s=>({controlStates:INITIAL_CONTROL_STATES,isErrored:!1,pausedAt:void 0,interactions:[],isPlaying:!1,isRerunAnimating:!1,scrollTarget,collapsed:new Set,hasException:!1,caughtException:void 0,interactionsCount:0}));return}set(s=>({...s,isPlaying:event.newPhase==="playing",pausedAt:void 0,...event.newPhase==="rendering"?{isErrored:!1,caughtException:void 0}:{}}));},[STORY_THREW_EXCEPTION]:()=>{set(s=>({...s,isErrored:!0}));},[PLAY_FUNCTION_THREW_EXCEPTION]:e=>{e?.message!==IGNORED_EXCEPTION.message?set(s=>({...s,caughtException:e})):set(s=>({...s,caughtException:void 0}));}},[collapsed]);useEffect(()=>{set(s=>{let list=getInteractions({log:log.current,calls:calls.current,collapsed,setCollapsed});return {...s,interactions:list,interactionsCount:list.filter(({method})=>method!=="step").length}});},[collapsed]);let controls=useMemo(()=>({start:()=>emit(EVENTS.START,{storyId}),back:()=>emit(EVENTS.BACK,{storyId}),goto:callId=>emit(EVENTS.GOTO,{storyId,callId}),next:()=>emit(EVENTS.NEXT,{storyId}),end:()=>emit(EVENTS.END,{storyId}),rerun:()=>{emit(FORCE_REMOUNT,{storyId});}}),[storyId]),storyFilePath=useParameter("fileName",""),[fileName]=storyFilePath.toString().split("/").slice(-1),scrollToTarget=()=>scrollTarget?.scrollIntoView({behavior:"smooth",block:"end"}),hasException=!!caughtException||interactions.some(v=>v.status===CallStates.ERROR);return isErrored?React10__default.createElement(Fragment,{key:"interactions"}):React10__default.createElement(Fragment,{key:"interactions"},React10__default.createElement(InteractionsPanel,{calls:calls.current,controls,controlStates,interactions,fileName,hasException,caughtException,isPlaying,pausedAt,endRef,onScrollToEnd:scrollTarget&&scrollToTarget}))});var TabIcon=styled(StatusIcon)({marginLeft:5});function Title(){let[addonState={}]=useAddonState(ADDON_ID),{hasException,interactionsCount}=addonState;return React10__default.createElement("div",null,React10__default.createElement(Spaced,{col:1},React10__default.createElement("span",{style:{display:"inline-block",verticalAlign:"middle"}},"Interactions"),interactionsCount&&!hasException?React10__default.createElement(Badge,{status:"neutral"},interactionsCount):null,hasException?React10__default.createElement(TabIcon,{status:CallStates.ERROR}):null))}addons.register(ADDON_ID,api=>{addons.add(PANEL_ID,{type:types.PANEL,title:Title,match:({viewMode})=>viewMode==="story",render:({active})=>{let newLocal=useCallback(({state})=>({storyId:state.storyId}),[]);return React10__default.createElement(AddonPanel,{active},React10__default.createElement(Consumer,{filter:newLocal},({storyId})=>React10__default.createElement(Panel,{storyId})))}});});
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@storybook/addon-interactions",
3
- "version": "7.2.3",
3
+ "version": "7.3.0",
4
4
  "description": "Automate, test and debug user interactions",
5
5
  "keywords": [
6
6
  "storybook-addons",
@@ -72,16 +72,16 @@
72
72
  "prep": "../../../scripts/prepare/bundle.ts"
73
73
  },
74
74
  "dependencies": {
75
- "@storybook/client-logger": "7.2.3",
76
- "@storybook/components": "7.2.3",
77
- "@storybook/core-common": "7.2.3",
78
- "@storybook/core-events": "7.2.3",
75
+ "@storybook/client-logger": "7.3.0",
76
+ "@storybook/components": "7.3.0",
77
+ "@storybook/core-common": "7.3.0",
78
+ "@storybook/core-events": "7.3.0",
79
79
  "@storybook/global": "^5.0.0",
80
- "@storybook/instrumenter": "7.2.3",
81
- "@storybook/manager-api": "7.2.3",
82
- "@storybook/preview-api": "7.2.3",
83
- "@storybook/theming": "7.2.3",
84
- "@storybook/types": "7.2.3",
80
+ "@storybook/instrumenter": "7.3.0",
81
+ "@storybook/manager-api": "7.3.0",
82
+ "@storybook/preview-api": "7.3.0",
83
+ "@storybook/theming": "7.3.0",
84
+ "@storybook/types": "7.3.0",
85
85
  "jest-mock": "^27.0.6",
86
86
  "polished": "^4.2.2",
87
87
  "ts-dedent": "^2.2.0"