storybook 10.0.0-beta.6 → 10.0.0-beta.8

package/dist/core-server/presets/common-manager.js

@@ -55,7 +55,7 @@ import {
 import {
   MINIMAL_VIEWPORTS,
   responsiveViewport
-} from "../../_browser-chunks/chunk-O5R5CGFA.js";
+} from "../../_browser-chunks/chunk-TMDZCWME.js";
 import {
   ADDON_ID as ADDON_ID2,
   PARAM_KEY as PARAM_KEY2,
@@ -71,7 +71,7 @@ import { global as global3 } from "@storybook/global";
 import { addons as addons8 } from "storybook/manager-api";
 
 // src/controls/manager.tsx
-import React39 from "react";
+import React40 from "react";
 import { AddonPanel } from "storybook/internal/components";
 import { SAVE_STORY_REQUEST, SAVE_STORY_RESPONSE } from "storybook/internal/core-events";
 import { FailedIcon, PassedIcon } from "@storybook/icons";
@@ -79,19 +79,20 @@ import { addons, experimental_requestResponse, types } from "storybook/manager-a
 import { color } from "storybook/theming";
 
 // src/controls/components/ControlsPanel.tsx
-import React37, { useEffect as useEffect10, useMemo as useMemo3, useState as useState13 } from "react";
+import React38, { useEffect as useEffect11, useMemo as useMemo3, useState as useState14 } from "react";
 import { global } from "@storybook/global";
 import {
   useArgTypes,
   useArgs,
   useGlobals,
   useParameter,
+  useStorybookApi,
   useStorybookState
 } from "storybook/manager-api";
 import { styled as styled30 } from "storybook/theming";
 
 // ../addons/docs/src/blocks/components/ArgsTable/ArgsTable.tsx
-import React35 from "react";
+import React36 from "react";
 import { once } from "storybook/internal/client-logger";
 import { IconButton as IconButton3, Link as Link3, ResetWrapper as ResetWrapper3 } from "storybook/internal/components";
 import { includeConditionalArg } from "storybook/internal/csf";
@@ -599,10 +600,37 @@ var DocsWrapper = styled3.div(({ theme: theme3 }) => ({
 }));
 
 // ../addons/docs/src/blocks/components/Preview.tsx
-import React7, { Children, useCallback, useState as useState2 } from "react";
+import React8, { Children, useCallback, useContext as useContext2, useState as useState3 } from "react";
 import { ActionBar, Zoom } from "storybook/internal/components";
 import { styled as styled6 } from "storybook/theming";
 
+// ../addons/docs/src/blocks/blocks/DocsContext.ts
+import { createContext } from "react";
+if (globalThis && globalThis.__DOCS_CONTEXT__ === void 0) {
+  globalThis.__DOCS_CONTEXT__ = createContext(null);
+  globalThis.__DOCS_CONTEXT__.displayName = "DocsContext";
+}
+var DocsContext = globalThis ? globalThis.__DOCS_CONTEXT__ : createContext(null);
+
+// ../addons/docs/src/blocks/blocks/Story.tsx
+import React4, { useContext } from "react";
+
+// ../addons/docs/src/blocks/blocks/useStory.ts
+import { useEffect, useState } from "react";
+
+// ../addons/docs/src/blocks/blocks/Story.tsx
+var getStoryId = /* @__PURE__ */ __name((props, context) => {
+  const { of, meta } = props;
+  if ("of" in props && of === void 0) {
+    throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");
+  }
+  if (meta) {
+    context.referenceMeta(meta, false);
+  }
+  const resolved = context.resolveOf(of || "story", ["story"]);
+  return resolved.story.id;
+}, "getStoryId");
+
 // ../addons/docs/src/blocks/components/BlockBackgroundStyles.tsx
 var getBlockBackgroundStyle = /* @__PURE__ */ __name((theme3) => ({
   borderRadius: theme3.appBorderRadius,
@@ -612,17 +640,17 @@ var getBlockBackgroundStyle = /* @__PURE__ */ __name((theme3) => ({
 }), "getBlockBackgroundStyle");
 
 // ../addons/docs/src/blocks/components/Story.tsx
-import React5, { useEffect, useRef, useState } from "react";
+import React6, { useEffect as useEffect2, useRef, useState as useState2 } from "react";
 import { ErrorFormatter, Loader, getStoryHref } from "storybook/internal/components";
 import { styled as styled4 } from "storybook/theming";
 
 // ../addons/docs/src/blocks/components/IFrame.tsx
-import React4, { Component } from "react";
+import React5, { Component } from "react";
 var { window: globalWindow } = globalThis;
 
 // ../addons/docs/src/blocks/components/ZoomContext.tsx
-import { createContext } from "react";
-var ZoomContext = createContext({
+import { createContext as createContext2 } from "react";
+var ZoomContext = createContext2({
   scale: 1
 });
 
@@ -633,9 +661,9 @@ var ErrorMessage = styled4.strong(({ theme: theme3 }) => ({
 }));
 
 // ../addons/docs/src/blocks/components/Toolbar.tsx
-import React6 from "react";
-import { FlexBar, IconButton } from "storybook/internal/components";
-import { ZoomIcon, ZoomOutIcon, ZoomResetIcon } from "@storybook/icons";
+import React7 from "react";
+import { FlexBar, IconButton, getStoryHref as getStoryHref2 } from "storybook/internal/components";
+import { ShareAltIcon, ZoomIcon, ZoomOutIcon, ZoomResetIcon } from "@storybook/icons";
 import { styled as styled5 } from "storybook/theming";
 var Bar = styled5(FlexBar)({
   position: "absolute",
@@ -664,7 +692,7 @@ var Toolbar = /* @__PURE__ */ __name(({
   zoom,
   resetZoom,
   ...rest
-}) => React6.createElement(Bar, { ...rest }, React6.createElement(Wrapper2, { key: "left" }, isLoading ? [1, 2, 3].map((key) => React6.createElement(IconPlaceholder, { key })) : React6.createElement(React6.Fragment, null, React6.createElement(
+}) => React7.createElement(Bar, { ...rest }, React7.createElement(Wrapper2, { key: "left" }, isLoading ? [1, 2, 3].map((key) => React7.createElement(IconPlaceholder, { key })) : React7.createElement(React7.Fragment, null, React7.createElement(
   IconButton,
   {
     key: "zoomin",
@@ -674,8 +702,8 @@ var Toolbar = /* @__PURE__ */ __name(({
     },
     title: "Zoom in"
   },
-  React6.createElement(ZoomIcon, null)
-), React6.createElement(
+  React7.createElement(ZoomIcon, null)
+), React7.createElement(
   IconButton,
   {
     key: "zoomout",
@@ -685,8 +713,8 @@ var Toolbar = /* @__PURE__ */ __name(({
     },
     title: "Zoom out"
   },
-  React6.createElement(ZoomOutIcon, null)
-), React6.createElement(
+  React7.createElement(ZoomOutIcon, null)
+), React7.createElement(
   IconButton,
   {
     key: "zoomreset",
@@ -696,7 +724,16 @@ var Toolbar = /* @__PURE__ */ __name(({
     },
     title: "Reset zoom"
   },
-  React6.createElement(ZoomResetIcon, null)
+  React7.createElement(ZoomResetIcon, null)
+))), isLoading ? React7.createElement(Wrapper2, { key: "right" }, React7.createElement(IconPlaceholder, null)) : baseUrl && storyId && React7.createElement(Wrapper2, { key: "right" }, React7.createElement(IconButton, { key: "opener", asChild: true }, React7.createElement(
+  "a",
+  {
+    href: getStoryHref2(baseUrl, storyId),
+    target: "_blank",
+    rel: "noopener noreferrer",
+    "aria-label": "Open canvas in new tab"
+  },
+  React7.createElement(ShareAltIcon, null)
 )))), "Toolbar");
 
 // ../addons/docs/src/blocks/components/Preview.tsx
@@ -774,7 +811,7 @@ var getSource = /* @__PURE__ */ __name((withSource, expanded, setExpanded) => {
     }
     case expanded: {
       return {
-        source: React7.createElement(StyledSource, { ...withSource, dark: true }),
+        source: React8.createElement(StyledSource, { ...withSource, dark: true }),
         actionItem: {
           title: "Hide code",
           className: "docblock-code-toggle docblock-code-toggle--expanded",
@@ -784,7 +821,7 @@ var getSource = /* @__PURE__ */ __name((withSource, expanded, setExpanded) => {
     }
     default: {
       return {
-        source: React7.createElement(StyledSource, { ...withSource, dark: true }),
+        source: React8.createElement(StyledSource, { ...withSource, dark: true }),
         actionItem: {
           title: "Show code",
           className: "docblock-code-toggle",
@@ -794,16 +831,16 @@ var getSource = /* @__PURE__ */ __name((withSource, expanded, setExpanded) => {
     }
   }
 }, "getSource");
-function getStoryId(children) {
+function getChildProps(children) {
   if (Children.count(children) === 1) {
     const elt = children;
     if (elt.props) {
-      return elt.props.id;
+      return elt.props;
     }
   }
   return null;
 }
-__name(getStoryId, "getStoryId");
+__name(getChildProps, "getChildProps");
 var PositionedToolbar = styled6(Toolbar)({
   position: "absolute",
   top: 0,
@@ -829,16 +866,17 @@ var Preview = /* @__PURE__ */ __name(({
   inline = false,
   ...props
 }) => {
-  const [expanded, setExpanded] = useState2(isExpanded);
+  const [expanded, setExpanded] = useState3(isExpanded);
   const { source, actionItem } = getSource(withSource, expanded, setExpanded);
-  const [scale, setScale] = useState2(1);
+  const [scale, setScale] = useState3(1);
   const previewClasses = [className].concat(["sbdocs", "sbdocs-preview", "sb-unstyled"]);
   const defaultActionItems = withSource ? [actionItem] : [];
-  const [additionalActionItems, setAdditionalActionItems] = useState2(
+  const [additionalActionItems, setAdditionalActionItems] = useState3(
     additionalActions ? [...additionalActions] : []
   );
   const actionItems = [...defaultActionItems, ...additionalActionItems];
   const { window: globalWindow3 } = globalThis;
+  const context = useContext2(DocsContext);
   const copyToClipboard = useCallback(async (text) => {
     const { createCopyToClipboardFunction } = await import("storybook/internal/components");
     createCopyToClipboardFunction();
@@ -868,25 +906,26 @@ var Preview = /* @__PURE__ */ __name(({
       });
     }
   }, "onCopyCapture");
-  return React7.createElement(
+  const childProps = getChildProps(children);
+  return React8.createElement(
     PreviewContainer,
     {
       ...{ withSource, withToolbar },
       ...props,
       className: previewClasses.join(" ")
     },
-    withToolbar && React7.createElement(
+    withToolbar && React8.createElement(
       PositionedToolbar,
       {
         isLoading,
         border: true,
         zoom: (z2) => setScale(scale * z2),
         resetZoom: () => setScale(1),
-        storyId: getStoryId(children),
+        storyId: !isLoading && childProps ? getStoryId(childProps, context) : void 0,
         baseUrl: "./iframe.html"
       }
     ),
-    React7.createElement(ZoomContext.Provider, { value: { scale } }, React7.createElement(Relative, { className: "docs-story", onCopyCapture: withSource && onCopyCapture }, React7.createElement(
+    React8.createElement(ZoomContext.Provider, { value: { scale } }, React8.createElement(Relative, { className: "docs-story", onCopyCapture: withSource && onCopyCapture }, React8.createElement(
       ChildrenContainer,
       {
         isColumn: isColumn || !Array.isArray(children),
@@ -894,8 +933,8 @@ var Preview = /* @__PURE__ */ __name(({
         layout,
         inline
       },
-      React7.createElement(Zoom.Element, { centered: layout === "centered", scale: inline ? scale : 1 }, Array.isArray(children) ? children.map((child, i2) => React7.createElement("div", { key: i2 }, child)) : React7.createElement("div", null, children))
-    ), React7.createElement(ActionBar, { actionItems }))),
+      React8.createElement(Zoom.Element, { centered: layout === "centered", scale: inline ? scale : 1 }, Array.isArray(children) ? children.map((child, i2) => React8.createElement("div", { key: i2 }, child)) : React8.createElement("div", null, children))
+    ), React8.createElement(ActionBar, { actionItems }))),
     withSource && expanded && source
   );
 }, "Preview");
@@ -907,11 +946,11 @@ var StyledPreview = styled6(Preview)(() => ({
 }));
 
 // ../addons/docs/src/blocks/components/ArgsTable/TabbedArgsTable.tsx
-import React8 from "react";
+import React9 from "react";
 import { TabsState } from "storybook/internal/components";
 
 // ../addons/docs/src/blocks/components/Typeset.tsx
-import React9 from "react";
+import React10 from "react";
 import { withReset as withReset3 } from "storybook/internal/components";
 import { styled as styled7 } from "storybook/theming";
 var Label = styled7.div(({ theme: theme3 }) => ({
@@ -937,7 +976,7 @@ var Wrapper3 = styled7.div(withReset3, ({ theme: theme3 }) => ({
 }));
 
 // ../addons/docs/src/blocks/components/ColorPalette.tsx
-import React10 from "react";
+import React11 from "react";
 import { ResetWrapper } from "storybook/internal/components";
 import { styled as styled8 } from "storybook/theming";
 var ItemTitle = styled8.div(({ theme: theme3 }) => ({
@@ -1037,7 +1076,7 @@ var List = styled8.div(({ theme: theme3 }) => ({
 }));
 
 // ../addons/docs/src/blocks/components/IconGallery.tsx
-import React11 from "react";
+import React12 from "react";
 import { ResetWrapper as ResetWrapper2 } from "storybook/internal/components";
 import { styled as styled9 } from "storybook/theming";
 var ItemLabel = styled9.div(({ theme: theme3 }) => ({
@@ -1082,7 +1121,7 @@ var List2 = styled9.div({
 });
 
 // ../addons/docs/src/blocks/components/TableOfContents.tsx
-import React12, { useEffect as useEffect2, useId } from "react";
+import React13, { useEffect as useEffect3, useId } from "react";
 import { NAVIGATE_URL } from "storybook/internal/core-events";
 import { styled as styled10 } from "storybook/theming";
 var Aside = styled10.aside(() => ({
@@ -1160,7 +1199,7 @@ var Heading = styled10.p(({ theme: theme3 }) => ({
 }));
 
 // ../addons/docs/src/blocks/components/ArgsTable/ArgRow.tsx
-import React31, { useState as useState10 } from "react";
+import React32, { useState as useState11 } from "react";
 import { codeCommon as codeCommon3 } from "storybook/internal/components";
 
 // ../node_modules/markdown-to-jsx/dist/index.modern.js
@@ -1624,14 +1663,14 @@ var index_modern_default = /* @__PURE__ */ __name((n2) => {
 import { styled as styled24 } from "storybook/theming";
 
 // ../addons/docs/src/blocks/components/ArgsTable/ArgControl.tsx
-import React28, { useCallback as useCallback6, useEffect as useEffect8, useState as useState8 } from "react";
+import React29, { useCallback as useCallback6, useEffect as useEffect9, useState as useState9 } from "react";
 import { Link } from "storybook/internal/components";
 
 // ../addons/docs/src/blocks/controls/index.tsx
-import React27, { Suspense, lazy } from "react";
+import React28, { Suspense, lazy } from "react";
 
 // ../addons/docs/src/blocks/controls/Boolean.tsx
-import React13, { useCallback as useCallback2 } from "react";
+import React14, { useCallback as useCallback2 } from "react";
 import { Button } from "storybook/internal/components";
 import { styled as styled11 } from "storybook/theming";
 var Label2 = styled11.label(({ theme: theme3 }) => ({
@@ -1722,7 +1761,7 @@ var BooleanControl = /* @__PURE__ */ __name(({
   const onSetFalse = useCallback2(() => onChange(false), [onChange]);
   const readonly = !!argType?.table?.readonly;
   if (value2 === void 0) {
-    return React13.createElement(
+    return React14.createElement(
       Button,
       {
         variant: "outline",
@@ -1736,7 +1775,7 @@ var BooleanControl = /* @__PURE__ */ __name(({
   }
   const controlId = getControlId(name);
   const parsedValue = typeof value2 === "string" ? parse(value2) : value2;
-  return React13.createElement(Label2, { "aria-disabled": readonly, htmlFor: controlId, "aria-label": name }, React13.createElement(
+  return React14.createElement(Label2, { "aria-disabled": readonly, htmlFor: controlId, "aria-label": name }, React14.createElement(
     "input",
     {
       id: controlId,
@@ -1747,11 +1786,11 @@ var BooleanControl = /* @__PURE__ */ __name(({
       disabled: readonly,
       ...{ name, onBlur, onFocus }
     }
-  ), React13.createElement("span", { "aria-hidden": "true" }, "False"), React13.createElement("span", { "aria-hidden": "true" }, "True"));
+  ), React14.createElement("span", { "aria-hidden": "true" }, "False"), React14.createElement("span", { "aria-hidden": "true" }, "True"));
 }, "BooleanControl");
 
 // ../addons/docs/src/blocks/controls/Date.tsx
-import React14, { useEffect as useEffect3, useRef as useRef2, useState as useState3 } from "react";
+import React15, { useEffect as useEffect4, useRef as useRef2, useState as useState4 } from "react";
 import { Form } from "storybook/internal/components";
 import { styled as styled12 } from "storybook/theming";
 var parseDate = /* @__PURE__ */ __name((value2) => {
@@ -1806,11 +1845,11 @@ var FlexSpaced = styled12.div(({ theme: theme3 }) => ({
   }
 }));
 var DateControl = /* @__PURE__ */ __name(({ name, value: value2, onChange, onFocus, onBlur, argType }) => {
-  const [valid, setValid] = useState3(true);
+  const [valid, setValid] = useState4(true);
   const dateRef = useRef2();
   const timeRef = useRef2();
   const readonly = !!argType?.table?.readonly;
-  useEffect3(() => {
+  useEffect4(() => {
     if (valid !== false) {
       if (dateRef && dateRef.current) {
         dateRef.current.value = value2 ? formatDate(value2) : "";
@@ -1848,7 +1887,7 @@ var DateControl = /* @__PURE__ */ __name(({ name, value: value2, onChange, onFoc
     setValid(!!time);
   }, "onTimeChange");
   const controlId = getControlId(name);
-  return React14.createElement(FlexSpaced, null, React14.createElement(
+  return React15.createElement(FlexSpaced, null, React15.createElement(
     FormInput,
     {
       type: "date",
@@ -1860,7 +1899,7 @@ var DateControl = /* @__PURE__ */ __name(({ name, value: value2, onChange, onFoc
       onChange: onDateChange,
       ...{ onFocus, onBlur }
     }
-  ), React14.createElement(
+  ), React15.createElement(
     FormInput,
     {
       type: "time",
@@ -1871,11 +1910,11 @@ var DateControl = /* @__PURE__ */ __name(({ name, value: value2, onChange, onFoc
       readOnly: readonly,
       ...{ onFocus, onBlur }
     }
-  ), !valid ? React14.createElement("div", null, "invalid") : null);
+  ), !valid ? React15.createElement("div", null, "invalid") : null);
 }, "DateControl");
 
 // ../addons/docs/src/blocks/controls/Number.tsx
-import React15, { useCallback as useCallback3, useEffect as useEffect4, useRef as useRef3, useState as useState4 } from "react";
+import React16, { useCallback as useCallback3, useEffect as useEffect5, useRef as useRef3, useState as useState5 } from "react";
 import { Button as Button2, Form as Form2 } from "storybook/internal/components";
 import { styled as styled13 } from "storybook/theming";
 var Wrapper4 = styled13.label({
@@ -1899,9 +1938,9 @@ var NumberControl = /* @__PURE__ */ __name(({
   onFocus,
   argType
 }) => {
-  const [inputValue, setInputValue] = useState4(typeof value2 === "number" ? value2 : "");
-  const [forceVisible, setForceVisible] = useState4(false);
-  const [parseError, setParseError] = useState4(null);
+  const [inputValue, setInputValue] = useState5(typeof value2 === "number" ? value2 : "");
+  const [forceVisible, setForceVisible] = useState5(false);
+  const [parseError, setParseError] = useState5(null);
   const readonly = !!argType?.table?.readonly;
   const handleChange = useCallback3(
     (event) => {
@@ -1922,19 +1961,19 @@ var NumberControl = /* @__PURE__ */ __name(({
     setForceVisible(true);
   }, [setForceVisible]);
   const htmlElRef = useRef3(null);
-  useEffect4(() => {
+  useEffect5(() => {
     if (forceVisible && htmlElRef.current) {
       htmlElRef.current.select();
     }
   }, [forceVisible]);
-  useEffect4(() => {
+  useEffect5(() => {
     const newInputValue = typeof value2 === "number" ? value2 : "";
     if (inputValue !== newInputValue) {
       setInputValue(newInputValue);
     }
   }, [value2]);
   if (value2 === void 0) {
-    return React15.createElement(
+    return React16.createElement(
       Button2,
       {
         variant: "outline",
@@ -1946,7 +1985,7 @@ var NumberControl = /* @__PURE__ */ __name(({
       "Set number"
     );
   }
-  return React15.createElement(Wrapper4, null, React15.createElement(
+  return React16.createElement(Wrapper4, null, React16.createElement(
     FormInput2,
     {
       ref: htmlElRef,
@@ -1965,10 +2004,10 @@ var NumberControl = /* @__PURE__ */ __name(({
 }, "NumberControl");
 
 // ../addons/docs/src/blocks/controls/options/Options.tsx
-import React19 from "react";
+import React20 from "react";
 
 // ../addons/docs/src/blocks/controls/options/Checkbox.tsx
-import React16, { useEffect as useEffect5, useState as useState5 } from "react";
+import React17, { useEffect as useEffect6, useState as useState6 } from "react";
 import { logger } from "storybook/internal/client-logger";
 import { styled as styled14 } from "storybook/theming";
 
@@ -2032,10 +2071,10 @@ var CheckboxControl = /* @__PURE__ */ __name(({
 }) => {
   if (!options) {
     logger.warn(`Checkbox with no options: ${name}`);
-    return React16.createElement(React16.Fragment, null, "-");
+    return React17.createElement(React17.Fragment, null, "-");
   }
   const initial = selectedKeys(value2 || [], options);
-  const [selected, setSelected] = useState5(initial);
+  const [selected, setSelected] = useState6(initial);
   const readonly = !!argType?.table?.readonly;
   const handleChange = /* @__PURE__ */ __name((e2) => {
     const option = e2.target.value;
@@ -2048,13 +2087,13 @@ var CheckboxControl = /* @__PURE__ */ __name(({
     onChange(selectedValues(updated, options));
     setSelected(updated);
   }, "handleChange");
-  useEffect5(() => {
+  useEffect6(() => {
     setSelected(selectedKeys(value2 || [], options));
   }, [value2]);
   const controlId = getControlId(name);
-  return React16.createElement(Wrapper5, { "aria-readonly": readonly, isInline }, Object.keys(options).map((key, index) => {
+  return React17.createElement(Wrapper5, { "aria-readonly": readonly, isInline }, Object.keys(options).map((key, index) => {
     const id = `${controlId}-${index}`;
-    return React16.createElement(Label3, { key: id, htmlFor: id }, React16.createElement(
+    return React17.createElement(Label3, { key: id, htmlFor: id }, React17.createElement(
       "input",
       {
         type: "checkbox",
@@ -2065,12 +2104,12 @@ var CheckboxControl = /* @__PURE__ */ __name(({
         onChange: handleChange,
         checked: selected?.includes(key)
       }
-    ), React16.createElement(Text, null, key));
+    ), React17.createElement(Text, null, key));
   }));
 }, "CheckboxControl");
 
 // ../addons/docs/src/blocks/controls/options/Radio.tsx
-import React17 from "react";
+import React18 from "react";
 import { logger as logger2 } from "storybook/internal/client-logger";
 import { styled as styled15 } from "storybook/theming";
 var Wrapper6 = styled15.div(
@@ -2124,14 +2163,14 @@ var RadioControl = /* @__PURE__ */ __name(({
 }) => {
   if (!options) {
     logger2.warn(`Radio with no options: ${name}`);
-    return React17.createElement(React17.Fragment, null, "-");
+    return React18.createElement(React18.Fragment, null, "-");
   }
   const selection = selectedKey(value2, options);
   const controlId = getControlId(name);
   const readonly = !!argType?.table?.readonly;
-  return React17.createElement(Wrapper6, { "aria-readonly": readonly, isInline }, Object.keys(options).map((key, index) => {
+  return React18.createElement(Wrapper6, { "aria-readonly": readonly, isInline }, Object.keys(options).map((key, index) => {
     const id = `${controlId}-${index}`;
-    return React17.createElement(Label4, { key: id, htmlFor: id }, React17.createElement(
+    return React18.createElement(Label4, { key: id, htmlFor: id }, React18.createElement(
       "input",
       {
         type: "radio",
@@ -2142,12 +2181,12 @@ var RadioControl = /* @__PURE__ */ __name(({
         onChange: (e2) => onChange(options[e2.currentTarget.value]),
         checked: key === selection
       }
-    ), React17.createElement(Text2, null, key));
+    ), React18.createElement(Text2, null, key));
   }));
 }, "RadioControl");
 
 // ../addons/docs/src/blocks/controls/options/Select.tsx
-import React18 from "react";
+import React19 from "react";
 import { logger as logger3 } from "storybook/internal/client-logger";
 import { ChevronSmallDownIcon } from "@storybook/icons";
 import { styled as styled16 } from "storybook/theming";
@@ -2225,7 +2264,7 @@ var SingleSelect = /* @__PURE__ */ __name(({ name, value: value2, options, onCha
   const selection = selectedKey(value2, options) || NO_SELECTION;
   const controlId = getControlId(name);
   const readonly = !!argType?.table?.readonly;
-  return React18.createElement(SelectWrapper, null, React18.createElement(ChevronSmallDownIcon, null), React18.createElement(OptionsSelect, { disabled: readonly, id: controlId, value: selection, onChange: handleChange }, React18.createElement("option", { key: "no-selection", disabled: true }, NO_SELECTION), Object.keys(options).map((key) => React18.createElement("option", { key, value: key }, key))));
+  return React19.createElement(SelectWrapper, null, React19.createElement(ChevronSmallDownIcon, null), React19.createElement(OptionsSelect, { disabled: readonly, id: controlId, value: selection, onChange: handleChange }, React19.createElement("option", { key: "no-selection", disabled: true }, NO_SELECTION), Object.keys(options).map((key) => React19.createElement("option", { key, value: key }, key))));
 }, "SingleSelect");
 var MultiSelect = /* @__PURE__ */ __name(({ name, value: value2, options, onChange, argType }) => {
   const handleChange = /* @__PURE__ */ __name((e2) => {
@@ -2235,7 +2274,7 @@ var MultiSelect = /* @__PURE__ */ __name(({ name, value: value2, options, onChan
   const selection = selectedKeys(value2, options);
   const controlId = getControlId(name);
   const readonly = !!argType?.table?.readonly;
-  return React18.createElement(SelectWrapper, null, React18.createElement(
+  return React19.createElement(SelectWrapper, null, React19.createElement(
     OptionsSelect,
     {
       disabled: readonly,
@@ -2244,16 +2283,16 @@ var MultiSelect = /* @__PURE__ */ __name(({ name, value: value2, options, onChan
       value: selection,
       onChange: handleChange
     },
-    Object.keys(options).map((key) => React18.createElement("option", { key, value: key }, key))
+    Object.keys(options).map((key) => React19.createElement("option", { key, value: key }, key))
   ));
 }, "MultiSelect");
 var SelectControl = /* @__PURE__ */ __name((props) => {
   const { name, options } = props;
   if (!options) {
     logger3.warn(`Select with no options: ${name}`);
-    return React18.createElement(React18.Fragment, null, "-");
+    return React19.createElement(React19.Fragment, null, "-");
   }
-  return props.isMulti ? React18.createElement(MultiSelect, { ...props }) : React18.createElement(SingleSelect, { ...props });
+  return props.isMulti ? React19.createElement(MultiSelect, { ...props }) : React19.createElement(SingleSelect, { ...props });
 }, "SelectControl");
 
 // ../addons/docs/src/blocks/controls/options/Options.tsx
@@ -2285,25 +2324,25 @@ var OptionsControl = /* @__PURE__ */ __name((props) => {
   };
   const Control = Controls[type];
   if (Control) {
-    return React19.createElement(Control, { ...normalized });
+    return React20.createElement(Control, { ...normalized });
   }
   throw new Error(`Unknown options type: ${type}`);
 }, "OptionsControl");
 
 // ../addons/docs/src/blocks/controls/Object.tsx
-import React23, { useCallback as useCallback4, useEffect as useEffect6, useMemo, useRef as useRef4, useState as useState6 } from "react";
+import React24, { useCallback as useCallback4, useEffect as useEffect7, useMemo, useRef as useRef4, useState as useState7 } from "react";
 import { Button as Button3, Form as Form3, IconButton as IconButton2 } from "storybook/internal/components";
 import { AddIcon, EyeCloseIcon, EyeIcon, SubtractIcon } from "@storybook/icons";
 import { styled as styled18, useTheme as useTheme2 } from "storybook/theming";
 
 // ../addons/docs/src/blocks/controls/react-editable-json-tree/index.tsx
-import React22, { Component as Component3 } from "react";
+import React23, { Component as Component3 } from "react";
 
 // ../addons/docs/src/blocks/controls/react-editable-json-tree/JsonNodes.tsx
-import React21, { Component as Component2, cloneElement as cloneElement2 } from "react";
+import React22, { Component as Component2, cloneElement as cloneElement2 } from "react";
 
 // ../addons/docs/src/blocks/controls/react-editable-json-tree/JsonNodeAccordion.tsx
-import React20 from "react";
+import React21 from "react";
 import { styled as styled17 } from "storybook/theming";
 var Container = styled17.div(({ theme: theme3 }) => ({
   position: "relative",
@@ -2374,7 +2413,7 @@ function JsonNodeAccordion({
     region: `${accordionKey}-region`
   };
   const containerTag = keyPath.length > 0 ? "li" : "div";
-  return React20.createElement(Container, { as: containerTag }, React20.createElement(
+  return React21.createElement(Container, { as: containerTag }, React21.createElement(
     Trigger,
     {
       type: "button",
@@ -2386,7 +2425,7 @@ function JsonNodeAccordion({
     },
     name,
     " :"
-  ), React20.createElement(
+  ), React21.createElement(
     Region,
     {
       role: "region",
@@ -2530,15 +2569,15 @@ var _JsonAddValue = class _JsonAddValue extends Component2 {
         onKeyDown: this.onKeydown
       });
     }
-    return React21.createElement("span", { className: "rejt-add-value-node" }, inputElementKeyLayout, inputElementValueLayout, addButtonElementLayout, cancelButtonElementLayout);
+    return React22.createElement("span", { className: "rejt-add-value-node" }, inputElementKeyLayout, inputElementValueLayout, addButtonElementLayout, cancelButtonElementLayout);
   }
 };
 __name(_JsonAddValue, "JsonAddValue");
 var JsonAddValue = _JsonAddValue;
 JsonAddValue.defaultProps = {
   onlyValue: false,
-  addButtonElement: React21.createElement("button", null, "+"),
-  cancelButtonElement: React21.createElement("button", null, "c")
+  addButtonElement: React22.createElement("button", null, "+"),
+  cancelButtonElement: React22.createElement("button", null, "c")
 };
 var _JsonArray = class _JsonArray extends Component2 {
   constructor(props) {
@@ -2607,9 +2646,10 @@ var _JsonArray = class _JsonArray extends Component2 {
       }).catch(logger5.error);
     };
   }
-  handleAddValueAdd({ key, newValue }) {
+  handleAddValueAdd({ newValue }) {
     const { data, keyPath = [], nextDeep: deep } = this.state;
     const { beforeAddAction, logger: logger5 } = this.props;
+    const key = data.length;
     (beforeAddAction || Promise.resolve.bind(Promise))(key, keyPath, deep, newValue).then(() => {
       data[key] = newValue;
       this.setState({
@@ -2667,7 +2707,7 @@ var _JsonArray = class _JsonArray extends Component2 {
       style: minus,
       "aria-label": `remove the array '${String(name)}'`
     });
-    return React21.createElement(React21.Fragment, null, React21.createElement("span", { style: collapsed }, "[...] ", data.length, " ", data.length === 1 ? "item" : "items"), !isReadOnly && removeItemButton);
+    return React22.createElement(React22.Fragment, null, React22.createElement("span", { style: collapsed }, "[...] ", data.length, " ", data.length === 1 ? "item" : "items"), !isReadOnly && removeItemButton);
   }
   renderNotCollapsed() {
     const { name, data, keyPath, deep, addFormVisible, nextDeep } = this.state;
@@ -2707,7 +2747,7 @@ var _JsonArray = class _JsonArray extends Component2 {
     const onlyValue = true;
     const startObject = "[";
     const endObject = "]";
-    return React21.createElement(React21.Fragment, null, React21.createElement("span", { className: "rejt-not-collapsed-delimiter", style: delimiter }, startObject), !addFormVisible && addItemButton, React21.createElement("ul", { className: "rejt-not-collapsed-list", style: ul }, data.map((item, index) => React21.createElement(
+    return React22.createElement(React22.Fragment, null, React22.createElement("span", { className: "rejt-not-collapsed-delimiter", style: delimiter }, startObject), !addFormVisible && addItemButton, React22.createElement("ul", { className: "rejt-not-collapsed-list", style: ul }, data.map((item, index) => React22.createElement(
       JsonNode,
       {
         key: index,
@@ -2734,7 +2774,7 @@ var _JsonArray = class _JsonArray extends Component2 {
         logger: logger5,
         onSubmitValueParser
       }
-    ))), !isReadOnly && addFormVisible && React21.createElement("div", { className: "rejt-add-form", style: addForm }, React21.createElement(
+    ))), !isReadOnly && addFormVisible && React22.createElement("div", { className: "rejt-add-form", style: addForm }, React22.createElement(
       JsonAddValue,
       {
         handleAdd: this.handleAddValueAdd,
@@ -2747,12 +2787,12 @@ var _JsonArray = class _JsonArray extends Component2 {
         deep,
         onSubmitValueParser
       }
-    )), React21.createElement("span", { className: "rejt-not-collapsed-delimiter", style: delimiter }, endObject), !isReadOnly && removeItemButton);
+    )), React22.createElement("span", { className: "rejt-not-collapsed-delimiter", style: delimiter }, endObject), !isReadOnly && removeItemButton);
   }
   render() {
     const { name, collapsed, keyPath, deep } = this.state;
     const value2 = collapsed ? this.renderCollapsed() : this.renderNotCollapsed();
-    return React21.createElement(
+    return React22.createElement(
       JsonNodeAccordion,
       {
         name,
@@ -2770,8 +2810,8 @@ var JsonArray = _JsonArray;
 JsonArray.defaultProps = {
   keyPath: [],
   deep: 0,
-  minusMenuElement: React21.createElement("span", null, " - "),
-  plusMenuElement: React21.createElement("span", null, " + ")
+  minusMenuElement: React22.createElement("span", null, " - "),
+  plusMenuElement: React22.createElement("span", null, " + ")
 };
 var _JsonFunctionValue = class _JsonFunctionValue extends Component2 {
   constructor(props) {
@@ -2876,10 +2916,10 @@ var _JsonFunctionValue = class _JsonFunctionValue extends Component2 {
         defaultValue: value2,
         onKeyDown: this.onKeydown
       });
-      result = React21.createElement("span", { className: "rejt-edit-form", style: style.editForm }, textareaElementLayout);
+      result = React22.createElement("span", { className: "rejt-edit-form", style: style.editForm }, textareaElementLayout);
       minusElement = null;
     } else {
-      result = React21.createElement(
+      result = React22.createElement(
         "span",
         {
           className: "rejt-value",
@@ -2897,7 +2937,7 @@ var _JsonFunctionValue = class _JsonFunctionValue extends Component2 {
       });
       minusElement = resultOnlyResult ? null : minusMenuLayout;
     }
-    return React21.createElement("li", { className: "rejt-value-node", style: style.li }, React21.createElement("span", { className: "rejt-name", style: style.name }, name, " :", " "), result, minusElement);
+    return React22.createElement("li", { className: "rejt-value-node", style: style.li }, React22.createElement("span", { className: "rejt-name", style: style.name }, name, " :", " "), result, minusElement);
   }
 };
 __name(_JsonFunctionValue, "JsonFunctionValue");
@@ -2907,8 +2947,8 @@ JsonFunctionValue.defaultProps = {
   deep: 0,
   handleUpdateValue: /* @__PURE__ */ __name(() => {
   }, "handleUpdateValue"),
-  cancelButtonElement: React21.createElement("button", null, "c"),
-  minusMenuElement: React21.createElement("span", null, " - ")
+  cancelButtonElement: React22.createElement("button", null, "c"),
+  minusMenuElement: React22.createElement("span", null, " - ")
 };
 var _JsonNode = class _JsonNode extends Component2 {
   constructor(props) {
@@ -2949,7 +2989,7 @@ var _JsonNode = class _JsonNode extends Component2 {
     const dataType = getObjectType(data);
     switch (dataType) {
       case ERROR:
-        return React21.createElement(
+        return React22.createElement(
           JsonObject,
           {
             data,
@@ -2977,7 +3017,7 @@ var _JsonNode = class _JsonNode extends Component2 {
           }
         );
       case OBJECT:
-        return React21.createElement(
+        return React22.createElement(
           JsonObject,
           {
             data,
@@ -3005,7 +3045,7 @@ var _JsonNode = class _JsonNode extends Component2 {
           }
         );
       case ARRAY:
-        return React21.createElement(
+        return React22.createElement(
           JsonArray,
           {
             data,
@@ -3033,7 +3073,7 @@ var _JsonNode = class _JsonNode extends Component2 {
           }
         );
       case STRING:
-        return React21.createElement(
+        return React22.createElement(
           JsonValue,
           {
             name,
@@ -3054,7 +3094,7 @@ var _JsonNode = class _JsonNode extends Component2 {
           }
         );
       case NUMBER:
-        return React21.createElement(
+        return React22.createElement(
           JsonValue,
           {
             name,
@@ -3075,7 +3115,7 @@ var _JsonNode = class _JsonNode extends Component2 {
           }
         );
       case BOOLEAN:
-        return React21.createElement(
+        return React22.createElement(
           JsonValue,
           {
             name,
@@ -3096,7 +3136,7 @@ var _JsonNode = class _JsonNode extends Component2 {
           }
         );
       case DATE:
-        return React21.createElement(
+        return React22.createElement(
           JsonValue,
           {
             name,
@@ -3117,7 +3157,7 @@ var _JsonNode = class _JsonNode extends Component2 {
           }
         );
       case NULL:
-        return React21.createElement(
+        return React22.createElement(
           JsonValue,
           {
             name,
@@ -3138,7 +3178,7 @@ var _JsonNode = class _JsonNode extends Component2 {
           }
         );
       case UNDEFINED:
-        return React21.createElement(
+        return React22.createElement(
           JsonValue,
           {
             name,
@@ -3159,7 +3199,7 @@ var _JsonNode = class _JsonNode extends Component2 {
           }
         );
       case FUNCTION:
-        return React21.createElement(
+        return React22.createElement(
           JsonFunctionValue,
           {
             name,
@@ -3180,7 +3220,7 @@ var _JsonNode = class _JsonNode extends Component2 {
           }
         );
       case SYMBOL:
-        return React21.createElement(
+        return React22.createElement(
           JsonValue,
           {
             name,
@@ -3339,7 +3379,7 @@ var _JsonObject = class _JsonObject extends Component2 {
       style: minus,
       "aria-label": `remove the object '${String(name)}'`
     });
-    return React21.createElement(React21.Fragment, null, React21.createElement("span", { style: collapsed }, "{...}", " ", keyList.length, " ", keyList.length === 1 ? "key" : "keys"), !isReadOnly && removeItemButton);
+    return React22.createElement(React22.Fragment, null, React22.createElement("span", { style: collapsed }, "{...}", " ", keyList.length, " ", keyList.length === 1 ? "key" : "keys"), !isReadOnly && removeItemButton);
   }
   renderNotCollapsed() {
     const { name, data, keyPath, deep, nextDeep, addFormVisible } = this.state;
@@ -3377,7 +3417,7 @@ var _JsonObject = class _JsonObject extends Component2 {
       style: minus,
       "aria-label": `remove the object '${String(name)}'`
     });
-    const list = keyList.map((key) => React21.createElement(
+    const list = keyList.map((key) => React22.createElement(
       JsonNode,
       {
         key,
@@ -3407,7 +3447,7 @@ var _JsonObject = class _JsonObject extends Component2 {
     ));
     const startObject = "{";
     const endObject = "}";
-    return React21.createElement(React21.Fragment, null, React21.createElement("span", { className: "rejt-not-collapsed-delimiter", style: delimiter }, startObject), !isReadOnly && addItemButton, React21.createElement("ul", { className: "rejt-not-collapsed-list", style: ul }, list), !isReadOnly && addFormVisible && React21.createElement("div", { className: "rejt-add-form", style: addForm }, React21.createElement(
+    return React22.createElement(React22.Fragment, null, React22.createElement("span", { className: "rejt-not-collapsed-delimiter", style: delimiter }, startObject), !isReadOnly && addItemButton, React22.createElement("ul", { className: "rejt-not-collapsed-list", style: ul }, list), !isReadOnly && addFormVisible && React22.createElement("div", { className: "rejt-add-form", style: addForm }, React22.createElement(
       JsonAddValue,
       {
         handleAdd: this.handleAddValueAdd,
@@ -3419,12 +3459,12 @@ var _JsonObject = class _JsonObject extends Component2 {
         deep,
         onSubmitValueParser
       }
-    )), React21.createElement("span", { className: "rejt-not-collapsed-delimiter", style: delimiter }, endObject), !isReadOnly && removeItemButton);
+    )), React22.createElement("span", { className: "rejt-not-collapsed-delimiter", style: delimiter }, endObject), !isReadOnly && removeItemButton);
   }
   render() {
     const { name, collapsed, keyPath, deep = 0 } = this.state;
     const value2 = collapsed ? this.renderCollapsed() : this.renderNotCollapsed();
-    return React21.createElement(
+    return React22.createElement(
       JsonNodeAccordion,
       {
         name,
@@ -3442,8 +3482,8 @@ var JsonObject = _JsonObject;
 JsonObject.defaultProps = {
   keyPath: [],
   deep: 0,
-  minusMenuElement: React21.createElement("span", null, " - "),
-  plusMenuElement: React21.createElement("span", null, " + ")
+  minusMenuElement: React22.createElement("span", null, " - "),
+  plusMenuElement: React22.createElement("span", null, " + ")
 };
 var _JsonValue = class _JsonValue extends Component2 {
   constructor(props) {
@@ -3553,7 +3593,7 @@ var _JsonValue = class _JsonValue extends Component2 {
       style: style.minus,
       "aria-label": `remove the property '${String(name)}' with value '${String(originalValue)}'${String(parentPropertyName) ? ` from '${String(parentPropertyName)}'` : ""}`
     });
-    return React21.createElement("li", { className: "rejt-value-node", style: style.li }, React21.createElement("span", { className: "rejt-name", style: style.name }, name, " : "), isEditing ? React21.createElement("span", { className: "rejt-edit-form", style: style.editForm }, inputElementLayout) : React21.createElement(
+    return React22.createElement("li", { className: "rejt-value-node", style: style.li }, React22.createElement("span", { className: "rejt-name", style: style.name }, name, " : "), isEditing ? React22.createElement("span", { className: "rejt-edit-form", style: style.editForm }, inputElementLayout) : React22.createElement(
       "span",
       {
         className: "rejt-value",
@@ -3570,8 +3610,8 @@ JsonValue.defaultProps = {
   keyPath: [],
   deep: 0,
   handleUpdateValue: /* @__PURE__ */ __name(() => Promise.resolve(), "handleUpdateValue"),
-  cancelButtonElement: React21.createElement("button", null, "c"),
-  minusMenuElement: React21.createElement("span", null, " - ")
+  cancelButtonElement: React22.createElement("button", null, "c"),
+  minusMenuElement: React22.createElement("span", null, " - ")
 };
 
 // ../addons/docs/src/blocks/controls/react-editable-json-tree/utils/parse.ts
@@ -3710,7 +3750,7 @@ var _JsonTree = class _JsonTree extends Component3 {
       textareaElementFunction = /* @__PURE__ */ __name(() => textareaElement, "textareaElementFunction");
     }
     if (dataType === "Object" || dataType === "Array") {
-      return React22.createElement("div", { className: "rejt-tree" }, React22.createElement(
+      return React23.createElement("div", { className: "rejt-tree" }, React23.createElement(
         JsonNode,
         {
           data,
@@ -3767,8 +3807,8 @@ JsonTree.defaultProps = {
   logger: { error: /* @__PURE__ */ __name(() => {
   }, "error") },
   onSubmitValueParser: /* @__PURE__ */ __name((isEditMode, keyPath, deep, name, rawValue) => parse3(rawValue), "onSubmitValueParser"),
-  inputElement: /* @__PURE__ */ __name(() => React22.createElement("input", null), "inputElement"),
-  textareaElement: /* @__PURE__ */ __name(() => React22.createElement("textarea", null), "textareaElement"),
+  inputElement: /* @__PURE__ */ __name(() => React23.createElement("input", null), "inputElement"),
+  textareaElement: /* @__PURE__ */ __name(() => React23.createElement("textarea", null), "textareaElement"),
   fallback: null
 };
 
@@ -3938,8 +3978,8 @@ var ObjectControl = /* @__PURE__ */ __name(({ name, value: value2, onChange, arg
   const theme3 = useTheme2();
   const data = useMemo(() => value2 && cloneDeep(value2), [value2]);
   const hasData = data !== null && data !== void 0;
-  const [showRaw, setShowRaw] = useState6(!hasData);
-  const [parseError, setParseError] = useState6(null);
+  const [showRaw, setShowRaw] = useState7(!hasData);
+  const [parseError, setParseError] = useState7(null);
   const readonly = !!argType?.table?.readonly;
   const updateRaw = useCallback4(
     (raw) => {
@@ -3954,21 +3994,21 @@ var ObjectControl = /* @__PURE__ */ __name(({ name, value: value2, onChange, arg
     },
     [onChange]
   );
-  const [forceVisible, setForceVisible] = useState6(false);
+  const [forceVisible, setForceVisible] = useState7(false);
   const onForceVisible = useCallback4(() => {
     onChange({});
     setForceVisible(true);
   }, [setForceVisible]);
   const htmlElRef = useRef4(null);
-  useEffect6(() => {
+  useEffect7(() => {
     if (forceVisible && htmlElRef.current) {
       htmlElRef.current.select();
     }
   }, [forceVisible]);
   if (!hasData) {
-    return React23.createElement(Button3, { disabled: readonly, id: getControlSetterButtonId(name), onClick: onForceVisible }, "Set object");
+    return React24.createElement(Button3, { disabled: readonly, id: getControlSetterButtonId(name), onClick: onForceVisible }, "Set object");
   }
-  const rawJSONForm = React23.createElement(
+  const rawJSONForm = React24.createElement(
     RawInput,
     {
       ref: htmlElRef,
@@ -3983,7 +4023,7 @@ var ObjectControl = /* @__PURE__ */ __name(({ name, value: value2, onChange, arg
     }
   );
   const isObjectOrArray = Array.isArray(value2) || typeof value2 === "object" && value2?.constructor === Object;
-  return React23.createElement(Wrapper7, { "aria-readonly": readonly }, isObjectOrArray && React23.createElement(
+  return React24.createElement(Wrapper7, { "aria-readonly": readonly }, isObjectOrArray && React24.createElement(
     RawButton,
     {
       role: "switch",
@@ -3994,9 +4034,9 @@ var ObjectControl = /* @__PURE__ */ __name(({ name, value: value2, onChange, arg
         setShowRaw((isRaw) => !isRaw);
       }
     },
-    showRaw ? React23.createElement(EyeCloseIcon, null) : React23.createElement(EyeIcon, null),
-    React23.createElement("span", null, "RAW")
-  ), !showRaw ? React23.createElement(
+    showRaw ? React24.createElement(EyeCloseIcon, null) : React24.createElement(EyeIcon, null),
+    React24.createElement("span", null, "RAW")
+  ), !showRaw ? React24.createElement(
     JsonTree,
     {
       readOnly: readonly || !isObjectOrArray,
@@ -4008,18 +4048,18 @@ var ObjectControl = /* @__PURE__ */ __name(({ name, value: value2, onChange, arg
       rootName: name,
       onFullyUpdate: onChange,
       getStyle: getCustomStyleFunction(theme3),
-      cancelButtonElement: React23.createElement(ButtonInline, { type: "button" }, "Cancel"),
-      addButtonElement: React23.createElement(ButtonInline, { type: "submit", primary: true }, "Save"),
-      plusMenuElement: React23.createElement(ActionButton, { type: "button" }, React23.createElement(AddIcon, null)),
-      minusMenuElement: React23.createElement(ActionButton, { type: "button" }, React23.createElement(SubtractIcon, null)),
-      inputElement: (_2, __, ___, key) => key ? React23.createElement(Input, { onFocus: selectValue, onBlur: dispatchEnterKey }) : React23.createElement(Input, null),
+      cancelButtonElement: React24.createElement(ButtonInline, { type: "button" }, "Cancel"),
+      addButtonElement: React24.createElement(ButtonInline, { type: "submit", primary: true }, "Save"),
+      plusMenuElement: React24.createElement(ActionButton, { type: "button" }, React24.createElement(AddIcon, null)),
+      minusMenuElement: React24.createElement(ActionButton, { type: "button" }, React24.createElement(SubtractIcon, null)),
+      inputElement: (_2, __, ___, key) => key ? React24.createElement(Input, { onFocus: selectValue, onBlur: dispatchEnterKey }) : React24.createElement(Input, null),
       fallback: rawJSONForm
     }
   ) : rawJSONForm);
 }, "ObjectControl");
 
 // ../addons/docs/src/blocks/controls/Range.tsx
-import React24, { useMemo as useMemo2 } from "react";
+import React25, { useMemo as useMemo2 } from "react";
 import { styled as styled19 } from "storybook/theming";
 var RangeInput = styled19.input(
   ({ theme: theme3, min, max, value: value2, disabled }) => ({
@@ -4192,7 +4232,7 @@ var RangeControl = /* @__PURE__ */ __name(({
   const hasValue = value2 !== void 0;
   const numberOFDecimalsPlaces = useMemo2(() => getNumberOfDecimalPlaces(step), [step]);
   const readonly = !!argType?.table?.readonly;
-  return React24.createElement(RangeWrapper, { "aria-readonly": readonly }, React24.createElement(RangeLabel, null, min), React24.createElement(
+  return React25.createElement(RangeWrapper, { "aria-readonly": readonly }, React25.createElement(RangeLabel, null, min), React25.createElement(
     RangeInput,
     {
       id: getControlId(name),
@@ -4202,11 +4242,11 @@ var RangeControl = /* @__PURE__ */ __name(({
       ...{ name, min, max, step, onFocus, onBlur },
       value: value2 ?? min
     }
-  ), React24.createElement(RangeCurrentAndMaxLabel, { numberOFDecimalsPlaces, max }, hasValue ? value2.toFixed(numberOFDecimalsPlaces) : "--", " / ", max));
+  ), React25.createElement(RangeCurrentAndMaxLabel, { numberOFDecimalsPlaces, max }, hasValue ? value2.toFixed(numberOFDecimalsPlaces) : "--", " / ", max));
 }, "RangeControl");
 
 // ../addons/docs/src/blocks/controls/Text.tsx
-import React25, { useCallback as useCallback5, useState as useState7 } from "react";
+import React26, { useCallback as useCallback5, useState as useState8 } from "react";
 import { Button as Button4, Form as Form4 } from "storybook/internal/components";
 import { styled as styled20 } from "storybook/theming";
 var Wrapper8 = styled20.label({
@@ -4230,13 +4270,13 @@ var TextControl = /* @__PURE__ */ __name(({
     onChange(event.target.value);
   }, "handleChange");
   const readonly = !!argType?.table?.readonly;
-  const [forceVisible, setForceVisible] = useState7(false);
+  const [forceVisible, setForceVisible] = useState8(false);
   const onForceVisible = useCallback5(() => {
     onChange("");
     setForceVisible(true);
   }, [setForceVisible]);
   if (value2 === void 0) {
-    return React25.createElement(
+    return React26.createElement(
       Button4,
       {
         variant: "outline",
@@ -4249,7 +4289,7 @@ var TextControl = /* @__PURE__ */ __name(({
     );
   }
   const isValid = typeof value2 === "string";
-  return React25.createElement(Wrapper8, null, React25.createElement(
+  return React26.createElement(Wrapper8, null, React26.createElement(
     Form4.Textarea,
     {
       id: getControlId(name),
@@ -4262,11 +4302,11 @@ var TextControl = /* @__PURE__ */ __name(({
       valid: isValid ? void 0 : "error",
       ...{ name, value: isValid ? value2 : "", onFocus, onBlur }
     }
-  ), maxLength && React25.createElement(MaxLength, { isMaxed: value2?.length === maxLength }, value2?.length ?? 0, " / ", maxLength));
+  ), maxLength && React26.createElement(MaxLength, { isMaxed: value2?.length === maxLength }, value2?.length ?? 0, " / ", maxLength));
 }, "TextControl");
 
 // ../addons/docs/src/blocks/controls/Files.tsx
-import React26, { useEffect as useEffect7, useRef as useRef5 } from "react";
+import React27, { useEffect as useEffect8, useRef as useRef5 } from "react";
 import { Form as Form5 } from "storybook/internal/components";
 import { styled as styled21 } from "storybook/theming";
 var FileInput = styled21(Form5.Input)({
@@ -4298,12 +4338,12 @@ var FilesControl = /* @__PURE__ */ __name(({
     revokeOldUrls(value2 || []);
   }
   __name(handleFileChange, "handleFileChange");
-  useEffect7(() => {
+  useEffect8(() => {
     if (value2 == null && inputElement.current) {
       inputElement.current.value = "";
     }
   }, [value2, name]);
-  return React26.createElement(
+  return React27.createElement(
     FileInput,
     {
       ref: inputElement,
@@ -4321,7 +4361,7 @@ var FilesControl = /* @__PURE__ */ __name(({
 
 // ../addons/docs/src/blocks/controls/index.tsx
 var LazyColorControl = lazy(() => import("../../_browser-chunks/Color-KPLIACXP.js"));
-var ColorControl = /* @__PURE__ */ __name((props) => React27.createElement(Suspense, { fallback: React27.createElement("div", null) }, React27.createElement(LazyColorControl, { ...props })), "ColorControl");
+var ColorControl = /* @__PURE__ */ __name((props) => React28.createElement(Suspense, { fallback: React28.createElement("div", null) }, React28.createElement(LazyColorControl, { ...props })), "ColorControl");
 
 // ../addons/docs/src/blocks/components/ArgsTable/ArgControl.tsx
 var Controls2 = {
@@ -4341,12 +4381,12 @@ var Controls2 = {
   text: TextControl,
   file: FilesControl
 };
-var NoControl = /* @__PURE__ */ __name(() => React28.createElement(React28.Fragment, null, "-"), "NoControl");
+var NoControl = /* @__PURE__ */ __name(() => React29.createElement(React29.Fragment, null, "-"), "NoControl");
 var ArgControl = /* @__PURE__ */ __name(({ row, arg, updateArgs, isHovered }) => {
   const { key, control } = row;
-  const [isFocused, setFocused] = useState8(false);
-  const [boxedValue, setBoxedValue] = useState8({ value: arg });
-  useEffect8(() => {
+  const [isFocused, setFocused] = useState9(false);
+  const [boxedValue, setBoxedValue] = useState9({ value: arg });
+  useEffect9(() => {
     if (!isFocused) {
       setBoxedValue({ value: arg });
     }
@@ -4363,7 +4403,7 @@ var ArgControl = /* @__PURE__ */ __name(({ row, arg, updateArgs, isHovered }) =>
   const onFocus = useCallback6(() => setFocused(true), []);
   if (!control || control.disable) {
     const canBeSetup = control?.disable !== true && row?.type?.name !== "function";
-    return isHovered && canBeSetup ? React28.createElement(
+    return isHovered && canBeSetup ? React29.createElement(
       Link,
       {
         href: "https://storybook.js.org/docs/essentials/controls?ref=ui",
@@ -4371,15 +4411,15 @@ var ArgControl = /* @__PURE__ */ __name(({ row, arg, updateArgs, isHovered }) =>
         withArrow: true
       },
       "Setup controls"
-    ) : React28.createElement(NoControl, null);
+    ) : React29.createElement(NoControl, null);
   }
   const props = { name: key, argType: row, value: boxedValue.value, onChange, onBlur, onFocus };
   const Control = Controls2[control.type] || NoControl;
-  return React28.createElement(Control, { ...props, ...control, controlType: control.type });
+  return React29.createElement(Control, { ...props, ...control, controlType: control.type });
 }, "ArgControl");
 
 // ../addons/docs/src/blocks/components/ArgsTable/ArgJsDoc.tsx
-import React29 from "react";
+import React30 from "react";
 import { codeCommon } from "storybook/internal/components";
 import { styled as styled22 } from "storybook/theming";
 var Table = styled22.table(({ theme: theme3 }) => ({
@@ -4439,13 +4479,13 @@ var ArgJsDoc = /* @__PURE__ */ __name(({ tags }) => {
   if (!hasDisplayableParams && !hasDisplayableReturns && !hasDisplayableDeprecated) {
     return null;
   }
-  return React29.createElement(React29.Fragment, null, React29.createElement(Table, null, React29.createElement("tbody", null, hasDisplayableDeprecated && React29.createElement("tr", { key: "deprecated" }, React29.createElement("td", { colSpan: 2 }, React29.createElement("strong", null, "Deprecated"), ": ", tags.deprecated?.toString())), hasDisplayableParams && params.map((x2) => {
-    return React29.createElement("tr", { key: x2.name }, React29.createElement("td", null, React29.createElement("code", null, x2.name)), React29.createElement("td", null, x2.description));
-  }), hasDisplayableReturns && React29.createElement("tr", { key: "returns" }, React29.createElement("td", null, React29.createElement("code", null, "Returns")), React29.createElement("td", null, tags.returns?.description)))));
+  return React30.createElement(React30.Fragment, null, React30.createElement(Table, null, React30.createElement("tbody", null, hasDisplayableDeprecated && React30.createElement("tr", { key: "deprecated" }, React30.createElement("td", { colSpan: 2 }, React30.createElement("strong", null, "Deprecated"), ": ", tags.deprecated?.toString())), hasDisplayableParams && params.map((x2) => {
+    return React30.createElement("tr", { key: x2.name }, React30.createElement("td", null, React30.createElement("code", null, x2.name)), React30.createElement("td", null, x2.description));
+  }), hasDisplayableReturns && React30.createElement("tr", { key: "returns" }, React30.createElement("td", null, React30.createElement("code", null, "Returns")), React30.createElement("td", null, tags.returns?.description)))));
 }, "ArgJsDoc");
 
 // ../addons/docs/src/blocks/components/ArgsTable/ArgValue.tsx
-import React30, { useState as useState9 } from "react";
+import React31, { useState as useState10 } from "react";
 import { SyntaxHighlighter as SyntaxHighlighter2, WithTooltipPure, codeCommon as codeCommon2 } from "storybook/internal/components";
 import { ChevronSmallDownIcon as ChevronSmallDownIcon2, ChevronSmallUpIcon } from "@storybook/icons";
 var import_memoizerific = __toESM(require_memoizerific(), 1);
@@ -4516,10 +4556,10 @@ var ChevronDownIcon = styled23(ChevronSmallDownIcon2)({
   marginLeft: 4
 });
 var EmptyArg = /* @__PURE__ */ __name(() => {
-  return React30.createElement("span", null, "-");
+  return React31.createElement("span", null, "-");
 }, "EmptyArg");
 var ArgText = /* @__PURE__ */ __name(({ text, simple }) => {
-  return React30.createElement(Text3, { simple }, text);
+  return React31.createElement(Text3, { simple }, text);
 }, "ArgText");
 var calculateDetailWidth = (0, import_memoizerific.default)(1e3)((detail) => {
   const lines = detail.split(/\r?\n/);
@@ -4538,12 +4578,12 @@ var renderSummaryItems = /* @__PURE__ */ __name((summaryItems, isExpanded = true
   if (!isExpanded) {
     items = summaryItems.slice(0, ITEMS_BEFORE_EXPANSION);
   }
-  return items.map((item) => React30.createElement(ArgText, { key: item, text: item === "" ? '""' : item }));
+  return items.map((item) => React31.createElement(ArgText, { key: item, text: item === "" ? '""' : item }));
 }, "renderSummaryItems");
 var ArgSummary = /* @__PURE__ */ __name(({ value: value2, initialExpandedArgs }) => {
   const { summary, detail } = value2;
-  const [isOpen, setIsOpen] = useState9(false);
-  const [isExpanded, setIsExpanded] = useState9(initialExpandedArgs || false);
+  const [isOpen, setIsOpen] = useState10(false);
+  const [isExpanded, setIsExpanded] = useState10(initialExpandedArgs || false);
   if (summary === void 0 || summary === null) {
     return null;
   }
@@ -4551,14 +4591,14 @@ var ArgSummary = /* @__PURE__ */ __name(({ value: value2, initialExpandedArgs })
   if (detail == null) {
     const cannotBeSafelySplitted = /[(){}[\]<>]/.test(summaryAsString);
     if (cannotBeSafelySplitted) {
-      return React30.createElement(ArgText, { text: summaryAsString });
+      return React31.createElement(ArgText, { text: summaryAsString });
     }
     const summaryItems = getSummaryItems(summaryAsString);
     const itemsCount = summaryItems.length;
     const hasManyItems = itemsCount > ITEMS_BEFORE_EXPANSION;
-    return hasManyItems ? React30.createElement(Summary, { isExpanded }, renderSummaryItems(summaryItems, isExpanded), React30.createElement(ExpandButton, { onClick: () => setIsExpanded(!isExpanded) }, isExpanded ? "Show less..." : `Show ${itemsCount - ITEMS_BEFORE_EXPANSION} more...`)) : React30.createElement(Summary, null, renderSummaryItems(summaryItems));
+    return hasManyItems ? React31.createElement(Summary, { isExpanded }, renderSummaryItems(summaryItems, isExpanded), React31.createElement(ExpandButton, { onClick: () => setIsExpanded(!isExpanded) }, isExpanded ? "Show less..." : `Show ${itemsCount - ITEMS_BEFORE_EXPANSION} more...`)) : React31.createElement(Summary, null, renderSummaryItems(summaryItems));
   }
-  return React30.createElement(
+  return React31.createElement(
     WithTooltipPure,
     {
       closeOnOutsideClick: true,
@@ -4567,13 +4607,13 @@ var ArgSummary = /* @__PURE__ */ __name(({ value: value2, initialExpandedArgs })
       onVisibleChange: (isVisible) => {
         setIsOpen(isVisible);
       },
-      tooltip: React30.createElement(Detail, { width: calculateDetailWidth(detail) }, React30.createElement(SyntaxHighlighter2, { language: "jsx", format: false }, detail))
+      tooltip: React31.createElement(Detail, { width: calculateDetailWidth(detail) }, React31.createElement(SyntaxHighlighter2, { language: "jsx", format: false }, detail))
     },
-    React30.createElement(Expandable, { className: "sbdocs-expandable" }, React30.createElement("span", null, summaryAsString), isOpen ? React30.createElement(ChevronUpIcon, null) : React30.createElement(ChevronDownIcon, null))
+    React31.createElement(Expandable, { className: "sbdocs-expandable" }, React31.createElement("span", null, summaryAsString), isOpen ? React31.createElement(ChevronUpIcon, null) : React31.createElement(ChevronDownIcon, null))
   );
 }, "ArgSummary");
 var ArgValue = /* @__PURE__ */ __name(({ value: value2, initialExpandedArgs }) => {
-  return value2 == null ? React30.createElement(EmptyArg, null) : React30.createElement(ArgSummary, { value: value2, initialExpandedArgs });
+  return value2 == null ? React31.createElement(EmptyArg, null) : React31.createElement(ArgSummary, { value: value2, initialExpandedArgs });
 }, "ArgValue");
 
 // ../addons/docs/src/blocks/components/ArgsTable/ArgRow.tsx
@@ -4625,7 +4665,7 @@ var toSummary = /* @__PURE__ */ __name((value2) => {
   return { summary: val };
 }, "toSummary");
 var ArgRow = /* @__PURE__ */ __name((props) => {
-  const [isHovered, setIsHovered] = useState10(false);
+  const [isHovered, setIsHovered] = useState11(false);
   const { row, updateArgs, compact, expandable, initialExpandedArgs } = props;
   const { name, description } = row;
   const table = row.table || {};
@@ -4633,11 +4673,11 @@ var ArgRow = /* @__PURE__ */ __name((props) => {
   const defaultValue = table.defaultValue || row.defaultValue;
   const required = row.type?.required;
   const hasDescription = description != null && description !== "";
-  return React31.createElement("tr", { onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false) }, React31.createElement(StyledTd, { expandable: expandable ?? false }, React31.createElement(Name, null, name), required ? React31.createElement(Required, { title: "Required" }, "*") : null), compact ? null : React31.createElement("td", null, hasDescription && React31.createElement(Description, null, React31.createElement(index_modern_default, null, description)), table.jsDocTags != null ? React31.createElement(React31.Fragment, null, React31.createElement(TypeWithJsDoc, { hasDescription }, React31.createElement(ArgValue, { value: type, initialExpandedArgs })), React31.createElement(ArgJsDoc, { tags: table.jsDocTags })) : React31.createElement(Type, { hasDescription }, React31.createElement(ArgValue, { value: type, initialExpandedArgs }))), compact ? null : React31.createElement("td", null, React31.createElement(ArgValue, { value: defaultValue, initialExpandedArgs })), updateArgs ? React31.createElement("td", null, React31.createElement(ArgControl, { ...props, isHovered })) : null);
+  return React32.createElement("tr", { onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false) }, React32.createElement(StyledTd, { expandable: expandable ?? false }, React32.createElement(Name, null, name), required ? React32.createElement(Required, { title: "Required" }, "*") : null), compact ? null : React32.createElement("td", null, hasDescription && React32.createElement(Description, null, React32.createElement(index_modern_default, null, description)), table.jsDocTags != null ? React32.createElement(React32.Fragment, null, React32.createElement(TypeWithJsDoc, { hasDescription }, React32.createElement(ArgValue, { value: type, initialExpandedArgs })), React32.createElement(ArgJsDoc, { tags: table.jsDocTags })) : React32.createElement(Type, { hasDescription }, React32.createElement(ArgValue, { value: type, initialExpandedArgs }))), compact ? null : React32.createElement("td", null, React32.createElement(ArgValue, { value: defaultValue, initialExpandedArgs })), updateArgs ? React32.createElement("td", null, React32.createElement(ArgControl, { ...props, isHovered })) : null);
 }, "ArgRow");
 
 // ../addons/docs/src/blocks/components/ArgsTable/Empty.tsx
-import React32, { useEffect as useEffect9, useState as useState11 } from "react";
+import React33, { useEffect as useEffect10, useState as useState12 } from "react";
 import { EmptyTabContent, Link as Link2 } from "storybook/internal/components";
 import { DocumentIcon } from "@storybook/icons";
 import { styled as styled25 } from "storybook/theming";
@@ -4659,8 +4699,8 @@ var Links = styled25.div(({ theme: theme3 }) => ({
   gap: 25
 }));
 var Empty = /* @__PURE__ */ __name(({ inAddonPanel }) => {
-  const [isLoading, setIsLoading] = useState11(true);
-  useEffect9(() => {
+  const [isLoading, setIsLoading] = useState12(true);
+  useEffect10(() => {
     const load = setTimeout(() => {
       setIsLoading(false);
     }, 100);
@@ -4669,28 +4709,28 @@ var Empty = /* @__PURE__ */ __name(({ inAddonPanel }) => {
   if (isLoading) {
     return null;
   }
-  return React32.createElement(Wrapper9, { inAddonPanel }, React32.createElement(
+  return React33.createElement(Wrapper9, { inAddonPanel }, React33.createElement(
     EmptyTabContent,
     {
       title: inAddonPanel ? "Interactive story playground" : "Args table with interactive controls couldn't be auto-generated",
-      description: React32.createElement(React32.Fragment, null, "Controls give you an easy to use interface to test your components. Set your story args and you'll see controls appearing here automatically."),
-      footer: React32.createElement(Links, null, inAddonPanel && React32.createElement(React32.Fragment, null, React32.createElement(
+      description: React33.createElement(React33.Fragment, null, "Controls give you an easy to use interface to test your components. Set your story args and you'll see controls appearing here automatically."),
+      footer: React33.createElement(Links, null, inAddonPanel && React33.createElement(React33.Fragment, null, React33.createElement(
         Link2,
         {
           href: "https://storybook.js.org/docs/essentials/controls?ref=ui",
           target: "_blank",
           withArrow: true
         },
-        React32.createElement(DocumentIcon, null),
+        React33.createElement(DocumentIcon, null),
         " Read docs"
-      )), !inAddonPanel && React32.createElement(
+      )), !inAddonPanel && React33.createElement(
         Link2,
         {
           href: "https://storybook.js.org/docs/essentials/controls?ref=ui",
           target: "_blank",
           withArrow: true
         },
-        React32.createElement(DocumentIcon, null),
+        React33.createElement(DocumentIcon, null),
         " Learn how to set that up"
       ))
     }
@@ -4698,7 +4738,7 @@ var Empty = /* @__PURE__ */ __name(({ inAddonPanel }) => {
 }, "Empty");
 
 // ../addons/docs/src/blocks/components/ArgsTable/SectionRow.tsx
-import React33, { useState as useState12 } from "react";
+import React34, { useState as useState13 } from "react";
 import { ChevronDownIcon as ChevronDownIcon2, ChevronRightIcon } from "@storybook/icons";
 import { styled as styled26 } from "storybook/theming";
 var ExpanderIconDown = styled26(ChevronDownIcon2)(({ theme: theme3 }) => ({
@@ -4780,12 +4820,12 @@ var SectionRow = /* @__PURE__ */ __name(({
   initialExpanded = true,
   colSpan = 3
 }) => {
-  const [expanded, setExpanded] = useState12(initialExpanded);
+  const [expanded, setExpanded] = useState13(initialExpanded);
   const Level = level === "subsection" ? Subsection : Section;
   const itemCount = children?.length || 0;
   const caption = level === "subsection" ? `${itemCount} item${itemCount !== 1 ? "s" : ""}` : "";
   const helperText = `${expanded ? "Hide" : "Show"} ${level === "subsection" ? itemCount : label} item${itemCount !== 1 ? "s" : ""}`;
-  return React33.createElement(React33.Fragment, null, React33.createElement(StyledTr, { title: helperText }, React33.createElement(Level, { colSpan: 1 }, React33.createElement(ClickIntercept, { onClick: (e2) => setExpanded(!expanded), tabIndex: 0 }, helperText), React33.createElement(FlexWrapper, null, expanded ? React33.createElement(ExpanderIconDown, null) : React33.createElement(ExpanderIconRight, null), label)), React33.createElement(StyledTd2, { colSpan: colSpan - 1 }, React33.createElement(
+  return React34.createElement(React34.Fragment, null, React34.createElement(StyledTr, { title: helperText }, React34.createElement(Level, { colSpan: 1 }, React34.createElement(ClickIntercept, { onClick: (e2) => setExpanded(!expanded), tabIndex: 0 }, helperText), React34.createElement(FlexWrapper, null, expanded ? React34.createElement(ExpanderIconDown, null) : React34.createElement(ExpanderIconRight, null), label)), React34.createElement(StyledTd2, { colSpan: colSpan - 1 }, React34.createElement(
     ClickIntercept,
     {
       onClick: (e2) => setExpanded(!expanded),
@@ -4797,7 +4837,7 @@ var SectionRow = /* @__PURE__ */ __name(({
 }, "SectionRow");
 
 // ../addons/docs/src/blocks/components/ArgsTable/Skeleton.tsx
-import React34 from "react";
+import React35 from "react";
 import { styled as styled27 } from "storybook/theming";
 var TableWrapper = styled27.div(({ theme: theme3 }) => ({
   width: "100%",
@@ -4855,7 +4895,7 @@ var SkeletonText = styled27.div(
     borderRadius: 3
   })
 );
-var Skeleton = /* @__PURE__ */ __name(() => React34.createElement(TableWrapper, null, React34.createElement(Row, null, React34.createElement(Column, { position: "first" }, React34.createElement(SkeletonText, { width: "60%" })), React34.createElement(Column, { position: "second" }, React34.createElement(SkeletonText, { width: "30%" })), React34.createElement(Column, { position: "third" }, React34.createElement(SkeletonText, { width: "60%" })), React34.createElement(Column, { position: "last" }, React34.createElement(SkeletonText, { width: "60%" }))), React34.createElement(Row, null, React34.createElement(Column, { position: "first" }, React34.createElement(SkeletonText, { width: "60%" })), React34.createElement(Column, { position: "second" }, React34.createElement(SkeletonText, { width: "80%" }), React34.createElement(SkeletonText, { width: "30%" })), React34.createElement(Column, { position: "third" }, React34.createElement(SkeletonText, { width: "60%" })), React34.createElement(Column, { position: "last" }, React34.createElement(SkeletonText, { width: "60%" }))), React34.createElement(Row, null, React34.createElement(Column, { position: "first" }, React34.createElement(SkeletonText, { width: "60%" })), React34.createElement(Column, { position: "second" }, React34.createElement(SkeletonText, { width: "80%" }), React34.createElement(SkeletonText, { width: "30%" })), React34.createElement(Column, { position: "third" }, React34.createElement(SkeletonText, { width: "60%" })), React34.createElement(Column, { position: "last" }, React34.createElement(SkeletonText, { width: "60%" }))), React34.createElement(Row, null, React34.createElement(Column, { position: "first" }, React34.createElement(SkeletonText, { width: "60%" })), React34.createElement(Column, { position: "second" }, React34.createElement(SkeletonText, { width: "80%" }), React34.createElement(SkeletonText, { width: "30%" })), React34.createElement(Column, { position: "third" }, React34.createElement(SkeletonText, { width: "60%" })), React34.createElement(Column, { position: "last" }, React34.createElement(SkeletonText, { width: "60%" })))), "Skeleton");
+var Skeleton = /* @__PURE__ */ __name(() => React35.createElement(TableWrapper, null, React35.createElement(Row, null, React35.createElement(Column, { position: "first" }, React35.createElement(SkeletonText, { width: "60%" })), React35.createElement(Column, { position: "second" }, React35.createElement(SkeletonText, { width: "30%" })), React35.createElement(Column, { position: "third" }, React35.createElement(SkeletonText, { width: "60%" })), React35.createElement(Column, { position: "last" }, React35.createElement(SkeletonText, { width: "60%" }))), React35.createElement(Row, null, React35.createElement(Column, { position: "first" }, React35.createElement(SkeletonText, { width: "60%" })), React35.createElement(Column, { position: "second" }, React35.createElement(SkeletonText, { width: "80%" }), React35.createElement(SkeletonText, { width: "30%" })), React35.createElement(Column, { position: "third" }, React35.createElement(SkeletonText, { width: "60%" })), React35.createElement(Column, { position: "last" }, React35.createElement(SkeletonText, { width: "60%" }))), React35.createElement(Row, null, React35.createElement(Column, { position: "first" }, React35.createElement(SkeletonText, { width: "60%" })), React35.createElement(Column, { position: "second" }, React35.createElement(SkeletonText, { width: "80%" }), React35.createElement(SkeletonText, { width: "30%" })), React35.createElement(Column, { position: "third" }, React35.createElement(SkeletonText, { width: "60%" })), React35.createElement(Column, { position: "last" }, React35.createElement(SkeletonText, { width: "60%" }))), React35.createElement(Row, null, React35.createElement(Column, { position: "first" }, React35.createElement(SkeletonText, { width: "60%" })), React35.createElement(Column, { position: "second" }, React35.createElement(SkeletonText, { width: "80%" }), React35.createElement(SkeletonText, { width: "30%" })), React35.createElement(Column, { position: "third" }, React35.createElement(SkeletonText, { width: "60%" })), React35.createElement(Column, { position: "last" }, React35.createElement(SkeletonText, { width: "60%" })))), "Skeleton");
 
 // ../addons/docs/src/blocks/components/ArgsTable/ArgsTable.tsx
 var TableWrapper2 = styled28.table(({ theme: theme3, compact, inAddonPanel }) => ({
@@ -5056,10 +5096,10 @@ var ArgsTable = /* @__PURE__ */ __name((props) => {
   } = props;
   if ("error" in props) {
     const { error } = props;
-    return React35.createElement(EmptyBlock, null, error, "\xA0", React35.createElement(Link3, { href: "http://storybook.js.org/docs/?ref=ui", target: "_blank", withArrow: true }, React35.createElement(DocumentIcon2, null), " Read the docs"));
+    return React36.createElement(EmptyBlock, null, error, "\xA0", React36.createElement(Link3, { href: "http://storybook.js.org/docs/?ref=ui", target: "_blank", withArrow: true }, React36.createElement(DocumentIcon2, null), " Read the docs"));
   }
   if (isLoading) {
-    return React35.createElement(Skeleton, null);
+    return React36.createElement(Skeleton, null);
   }
   const { rows, args, globals } = "rows" in props ? props : { rows: void 0, args: void 0, globals: void 0 };
   const groups = groupRows(
@@ -5073,7 +5113,7 @@ var ArgsTable = /* @__PURE__ */ __name((props) => {
   const hasNoSections = Object.entries(groups.sections).length === 0;
   const hasNoUngroupedSubsections = Object.entries(groups.ungroupedSubsections).length === 0;
   if (hasNoUngrouped && hasNoSections && hasNoUngroupedSubsections) {
-    return React35.createElement(Empty, { inAddonPanel });
+    return React36.createElement(Empty, { inAddonPanel });
   }
   let colSpan = 1;
   if (updateArgs) {
@@ -5084,15 +5124,15 @@ var ArgsTable = /* @__PURE__ */ __name((props) => {
   }
   const expandable = Object.keys(groups.sections).length > 0;
   const common = { updateArgs, compact, inAddonPanel, initialExpandedArgs };
-  return React35.createElement(ResetWrapper3, null, React35.createElement(TablePositionWrapper, null, updateArgs && !isLoading && resetArgs && React35.createElement(ButtonPositionWrapper, null, React35.createElement(
+  return React36.createElement(ResetWrapper3, null, React36.createElement(TablePositionWrapper, null, updateArgs && !isLoading && resetArgs && React36.createElement(ButtonPositionWrapper, null, React36.createElement(
     IconButton3,
     {
       onClick: () => resetArgs(),
       "aria-label": "Reset controls",
       title: "Reset controls"
     },
-    React35.createElement(UndoIcon, null)
-  )), React35.createElement(TableWrapper2, { ...{ compact, inAddonPanel }, className: "docblock-argstable sb-unstyled" }, React35.createElement("thead", { className: "docblock-argstable-head" }, React35.createElement("tr", null, React35.createElement("th", null, React35.createElement("span", null, "Name")), compact ? null : React35.createElement("th", null, React35.createElement("span", null, "Description")), compact ? null : React35.createElement("th", null, React35.createElement("span", null, "Default")), updateArgs ? React35.createElement("th", null, React35.createElement("span", null, "Control")) : null)), React35.createElement("tbody", { className: "docblock-argstable-body" }, groups.ungrouped.map((row) => React35.createElement(ArgRow, { key: row.key, row, arg: args && args[row.key], ...common })), Object.entries(groups.ungroupedSubsections).map(([subcategory, subsection]) => React35.createElement(
+    React36.createElement(UndoIcon, null)
+  )), React36.createElement(TableWrapper2, { ...{ compact, inAddonPanel }, className: "docblock-argstable sb-unstyled" }, React36.createElement("thead", { className: "docblock-argstable-head" }, React36.createElement("tr", null, React36.createElement("th", null, React36.createElement("span", null, "Name")), compact ? null : React36.createElement("th", null, React36.createElement("span", null, "Description")), compact ? null : React36.createElement("th", null, React36.createElement("span", null, "Default")), updateArgs ? React36.createElement("th", null, React36.createElement("span", null, "Control")) : null)), React36.createElement("tbody", { className: "docblock-argstable-body" }, groups.ungrouped.map((row) => React36.createElement(ArgRow, { key: row.key, row, arg: args && args[row.key], ...common })), Object.entries(groups.ungroupedSubsections).map(([subcategory, subsection]) => React36.createElement(
     SectionRow,
     {
       key: subcategory,
@@ -5100,7 +5140,7 @@ var ArgsTable = /* @__PURE__ */ __name((props) => {
       level: "subsection",
       colSpan
     },
-    subsection.map((row) => React35.createElement(
+    subsection.map((row) => React36.createElement(
       ArgRow,
       {
         key: row.key,
@@ -5110,7 +5150,7 @@ var ArgsTable = /* @__PURE__ */ __name((props) => {
         ...common
       }
     ))
-  )), Object.entries(groups.sections).map(([category, section]) => React35.createElement(SectionRow, { key: category, label: category, level: "section", colSpan }, section.ungrouped.map((row) => React35.createElement(ArgRow, { key: row.key, row, arg: args && args[row.key], ...common })), Object.entries(section.subsections).map(([subcategory, subsection]) => React35.createElement(
+  )), Object.entries(groups.sections).map(([category, section]) => React36.createElement(SectionRow, { key: category, label: category, level: "section", colSpan }, section.ungrouped.map((row) => React36.createElement(ArgRow, { key: row.key, row, arg: args && args[row.key], ...common })), Object.entries(section.subsections).map(([subcategory, subsection]) => React36.createElement(
     SectionRow,
     {
       key: subcategory,
@@ -5118,7 +5158,7 @@ var ArgsTable = /* @__PURE__ */ __name((props) => {
       level: "subsection",
       colSpan
     },
-    subsection.map((row) => React35.createElement(
+    subsection.map((row) => React36.createElement(
       ArgRow,
       {
         key: row.key,
@@ -5136,7 +5176,7 @@ var ADDON_ID6 = "addon-controls";
 var PARAM_KEY5 = "controls";
 
 // src/controls/components/SaveStory.tsx
-import React36 from "react";
+import React37 from "react";
 import {
   Bar as BaseBar,
   Button as Button5,
@@ -5224,11 +5264,11 @@ var SaveStory = /* @__PURE__ */ __name(({
   resetArgs,
   portalSelector
 }) => {
-  const inputRef = React36.useRef(null);
-  const [saving, setSaving] = React36.useState(false);
-  const [creating, setCreating] = React36.useState(false);
-  const [storyName, setStoryName] = React36.useState("");
-  const [errorMessage, setErrorMessage] = React36.useState(null);
+  const inputRef = React37.useRef(null);
+  const [saving, setSaving] = React37.useState(false);
+  const [creating, setCreating] = React37.useState(false);
+  const [storyName, setStoryName] = React37.useState("");
+  const [errorMessage, setErrorMessage] = React37.useState(null);
   const onSaveStory = /* @__PURE__ */ __name(async () => {
     if (saving) {
       return;
@@ -5263,34 +5303,34 @@ var SaveStory = /* @__PURE__ */ __name(({
       setSaving(false);
     }
   }, "onSubmitForm");
-  return React36.createElement(Container2, { id: "save-from-controls" }, React36.createElement(Bar2, null, React36.createElement(Actions, null, React36.createElement(
+  return React37.createElement(Container2, { id: "save-from-controls" }, React37.createElement(Bar2, null, React37.createElement(Actions, null, React37.createElement(
     WithTooltip,
     {
       as: "div",
       hasChrome: false,
       trigger: "hover",
-      tooltip: React36.createElement(TooltipNote, { note: "Save changes to story" })
+      tooltip: React37.createElement(TooltipNote, { note: "Save changes to story" })
     },
-    React36.createElement(IconButton4, { "aria-label": "Save changes to story", disabled: saving, onClick: onSaveStory }, React36.createElement(CheckIcon, null), React36.createElement(Label5, { "data-short-label": "Save" }, "Update story"))
-  ), React36.createElement(
+    React37.createElement(IconButton4, { "aria-label": "Save changes to story", disabled: saving, onClick: onSaveStory }, React37.createElement(CheckIcon, null), React37.createElement(Label5, { "data-short-label": "Save" }, "Update story"))
+  ), React37.createElement(
     WithTooltip,
     {
       as: "div",
       hasChrome: false,
       trigger: "hover",
-      tooltip: React36.createElement(TooltipNote, { note: "Create new story with these settings" })
+      tooltip: React37.createElement(TooltipNote, { note: "Create new story with these settings" })
     },
-    React36.createElement(IconButton4, { "aria-label": "Create new story with these settings", onClick: onShowForm }, React36.createElement(AddIcon2, null), React36.createElement(Label5, { "data-short-label": "New" }, "Create new story"))
-  ), React36.createElement(
+    React37.createElement(IconButton4, { "aria-label": "Create new story with these settings", onClick: onShowForm }, React37.createElement(AddIcon2, null), React37.createElement(Label5, { "data-short-label": "New" }, "Create new story"))
+  ), React37.createElement(
     WithTooltip,
     {
       as: "div",
       hasChrome: false,
       trigger: "hover",
-      tooltip: React36.createElement(TooltipNote, { note: "Reset changes" })
+      tooltip: React37.createElement(TooltipNote, { note: "Reset changes" })
     },
-    React36.createElement(IconButton4, { "aria-label": "Reset changes", onClick: () => resetArgs() }, React36.createElement(UndoIcon2, null), React36.createElement("span", null, "Reset"))
-  )), React36.createElement(Info, null, React36.createElement(Label5, { "data-short-label": "Unsaved changes" }, "You modified this story. Do you want to save your changes?")), React36.createElement(
+    React37.createElement(IconButton4, { "aria-label": "Reset changes", onClick: () => resetArgs() }, React37.createElement(UndoIcon2, null), React37.createElement("span", null, "Reset"))
+  )), React37.createElement(Info, null, React37.createElement(Label5, { "data-short-label": "Unsaved changes" }, "You modified this story. Do you want to save your changes?")), React37.createElement(
     Modal,
     {
       width: 350,
@@ -5298,7 +5338,7 @@ var SaveStory = /* @__PURE__ */ __name(({
       onOpenChange: setCreating,
       portalSelector
     },
-    React36.createElement(Form6, { onSubmit: onSubmitForm, id: "create-new-story-form" }, React36.createElement(Modal.Content, null, React36.createElement(Modal.Header, null, React36.createElement(Modal.Title, null, "Create new story"), React36.createElement(Modal.Description, null, "This will add a new story to your existing stories file.")), React36.createElement(
+    React37.createElement(Form6, { onSubmit: onSubmitForm, id: "create-new-story-form" }, React37.createElement(Modal.Content, null, React37.createElement(Modal.Header, null, React37.createElement(Modal.Title, null, "Create new story"), React37.createElement(Modal.Description, null, "This will add a new story to your existing stories file.")), React37.createElement(
       ModalInput,
       {
         onChange,
@@ -5307,8 +5347,8 @@ var SaveStory = /* @__PURE__ */ __name(({
         ref: inputRef,
         value: storyName
       }
-    ), React36.createElement(Modal.Actions, null, React36.createElement(Button5, { disabled: saving || !storyName, size: "medium", type: "submit", variant: "solid" }, "Create"), React36.createElement(Modal.Dialog.Close, { asChild: true }, React36.createElement(Button5, { disabled: saving, size: "medium", type: "reset" }, "Cancel"))))),
-    errorMessage && React36.createElement(Modal.Error, null, errorMessage)
+    ), React37.createElement(Modal.Actions, null, React37.createElement(Button5, { disabled: saving || !storyName, size: "medium", type: "submit", variant: "solid" }, "Create"), React37.createElement(Modal.Dialog.Close, { asChild: true }, React37.createElement(Button5, { disabled: saving, size: "medium", type: "reset" }, "Cancel"))))),
+    errorMessage && React37.createElement(Modal.Error, null, errorMessage)
   )));
 }, "SaveStory");
 
@@ -5325,7 +5365,8 @@ var AddonWrapper = styled30.div({
   overflowY: "auto"
 });
 var ControlsPanel = /* @__PURE__ */ __name(({ saveStory, createStory }) => {
-  const [isLoading, setIsLoading] = useState13(true);
+  const api = useStorybookApi();
+  const [isLoading, setIsLoading] = useState14(true);
   const [args, updateArgs, resetArgs, initialArgs] = useArgs();
   const [globals] = useGlobals();
   const rows = useArgTypes();
@@ -5336,7 +5377,8 @@ var ControlsPanel = /* @__PURE__ */ __name(({ saveStory, createStory }) => {
     disableSaveFromUI = false
   } = useParameter(PARAM_KEY5, {});
   const { path, previewInitialized } = useStorybookState();
-  useEffect10(() => {
+  const storyData = api.getCurrentStoryData();
+  useEffect11(() => {
     if (previewInitialized) {
       setIsLoading(false);
     }
@@ -5355,7 +5397,7 @@ var ControlsPanel = /* @__PURE__ */ __name(({ saveStory, createStory }) => {
     () => !!args && !!initialArgs && !dequal(clean(args), clean(initialArgs)),
     [args, initialArgs]
   );
-  return React37.createElement(AddonWrapper, null, React37.createElement(
+  return React38.createElement(AddonWrapper, null, React38.createElement(
     ArgsTable,
     {
       key: path,
@@ -5369,22 +5411,22 @@ var ControlsPanel = /* @__PURE__ */ __name(({ saveStory, createStory }) => {
       sort,
       isLoading
     }
-  ), hasControls && hasUpdatedArgs && global.CONFIG_TYPE === "DEVELOPMENT" && disableSaveFromUI !== true && React37.createElement(SaveStory, { ...{ resetArgs, saveStory, createStory } }));
+  ), hasControls && storyData.type === "story" && storyData.subtype !== "test" && hasUpdatedArgs && global.CONFIG_TYPE === "DEVELOPMENT" && disableSaveFromUI !== true && React38.createElement(SaveStory, { ...{ resetArgs, saveStory, createStory } }));
 }, "ControlsPanel");
 
 // src/controls/components/Title.tsx
-import React38 from "react";
+import React39 from "react";
 import { Badge } from "storybook/internal/components";
-import { useArgTypes as useArgTypes2, useStorybookApi } from "storybook/manager-api";
+import { useArgTypes as useArgTypes2, useStorybookApi as useStorybookApi2 } from "storybook/manager-api";
 function Title2() {
-  const api = useStorybookApi();
+  const api = useStorybookApi2();
   const selectedPanel = api.getSelectedPanel();
   const rows = useArgTypes2();
   const controlsCount = Object.values(rows).filter(
     (argType) => argType?.control && !argType?.table?.disable
   ).length;
-  const suffix = controlsCount === 0 ? null : React38.createElement(Badge, { compact: true, status: selectedPanel === ADDON_ID6 ? "active" : "neutral" }, controlsCount);
-  return React38.createElement("div", { style: { display: "flex", alignItems: "center", gap: 6 } }, React38.createElement("span", null, "Controls"), suffix);
+  const suffix = controlsCount === 0 ? null : React39.createElement(Badge, { compact: true, status: selectedPanel === ADDON_ID6 ? "active" : "neutral" }, controlsCount);
+  return React39.createElement("div", { style: { display: "flex", alignItems: "center", gap: 6 } }, React39.createElement("span", null, "Controls"), suffix);
 }
 __name(Title2, "Title");
 
@@ -5421,17 +5463,17 @@ var manager_default = addons.register(ADDON_ID6, (api) => {
         });
         api.addNotification({
           id: "save-story-success",
-          icon: React39.createElement(PassedIcon, { color: color.positive }),
+          icon: React40.createElement(PassedIcon, { color: color.positive }),
           content: {
             headline: "Story saved",
-            subHeadline: React39.createElement(React39.Fragment, null, "Updated story ", React39.createElement("b", null, response.sourceStoryName), ".")
+            subHeadline: React40.createElement(React40.Fragment, null, "Updated story ", React40.createElement("b", null, response.sourceStoryName), ".")
           },
           duration: 8e3
         });
       } catch (error) {
         api.addNotification({
           id: "save-story-error",
-          icon: React39.createElement(FailedIcon, { color: color.negative }),
+          icon: React40.createElement(FailedIcon, { color: color.negative }),
           content: {
             headline: "Failed to save story",
             subHeadline: error?.message || "Check the Storybook process on the command line for more details."
@@ -5454,10 +5496,10 @@ var manager_default = addons.register(ADDON_ID6, (api) => {
       });
       api.addNotification({
         id: "save-story-success",
-        icon: React39.createElement(PassedIcon, { color: color.positive }),
+        icon: React40.createElement(PassedIcon, { color: color.positive }),
         content: {
           headline: "Story created",
-          subHeadline: React39.createElement(React39.Fragment, null, "Added story ", React39.createElement("b", null, response.newStoryName), " based on ", React39.createElement("b", null, response.sourceStoryName), ".")
+          subHeadline: React40.createElement(React40.Fragment, null, "Added story ", React40.createElement("b", null, response.newStoryName), " based on ", React40.createElement("b", null, response.sourceStoryName), ".")
         },
         duration: 8e3,
         onClick: /* @__PURE__ */ __name(({ onDismiss }) => {
@@ -5474,7 +5516,7 @@ var manager_default = addons.register(ADDON_ID6, (api) => {
         if (!active || !api.getCurrentStoryData()) {
           return null;
         }
-        return React39.createElement(AddonPanel, { active }, React39.createElement(ControlsPanel, { saveStory, createStory }));
+        return React40.createElement(AddonPanel, { active }, React40.createElement(ControlsPanel, { saveStory, createStory }));
       }, "render")
     });
     channel.on(SAVE_STORY_RESPONSE, (data) => {
@@ -5494,16 +5536,16 @@ var manager_default = addons.register(ADDON_ID6, (api) => {
 });
 
 // src/actions/manager.tsx
-import React45 from "react";
+import React46 from "react";
 import { addons as addons2, types as types2 } from "storybook/manager-api";
 
 // src/actions/components/Title.tsx
-import React40 from "react";
+import React41 from "react";
 import { Badge as Badge2 } from "storybook/internal/components";
 import { STORY_CHANGED } from "storybook/internal/core-events";
-import { useAddonState, useChannel, useStorybookApi as useStorybookApi2 } from "storybook/manager-api";
+import { useAddonState, useChannel, useStorybookApi as useStorybookApi3 } from "storybook/manager-api";
 function Title3() {
-  const api = useStorybookApi2();
+  const api = useStorybookApi3();
   const selectedPanel = api.getSelectedPanel();
   const [{ count }, setCount] = useAddonState(ADDON_ID, { count: 0 });
   useChannel({
@@ -5517,27 +5559,27 @@ function Title3() {
       setCount((c2) => ({ ...c2, count: 0 }));
     }
   });
-  const suffix = count === 0 ? null : React40.createElement(Badge2, { compact: true, status: selectedPanel === PANEL_ID ? "active" : "neutral" }, count);
-  return React40.createElement("div", { style: { display: "flex", alignItems: "center", gap: 6 } }, React40.createElement("span", null, "Actions"), suffix);
+  const suffix = count === 0 ? null : React41.createElement(Badge2, { compact: true, status: selectedPanel === PANEL_ID ? "active" : "neutral" }, count);
+  return React41.createElement("div", { style: { display: "flex", alignItems: "center", gap: 6 } }, React41.createElement("span", null, "Actions"), suffix);
 }
 __name(Title3, "Title");
 
 // src/actions/containers/ActionLogger/index.tsx
-import React44, { Component as Component4 } from "react";
+import React45, { Component as Component4 } from "react";
 import { STORY_CHANGED as STORY_CHANGED2 } from "storybook/internal/core-events";
 
 // src/actions/components/ActionLogger/index.tsx
-import React43, { Fragment, forwardRef, useEffect as useEffect11, useRef as useRef6 } from "react";
+import React44, { Fragment, forwardRef, useEffect as useEffect12, useRef as useRef6 } from "react";
 import { ActionBar as ActionBar2, ScrollArea } from "storybook/internal/components";
 
 // ../node_modules/react-inspector/dist/index.mjs
 import React92 from "react";
-import React310, { useContext as useContext2, useCallback as useCallback7, useLayoutEffect, useState as useState14, memo as memo2 } from "react";
-import { createContext as createContext2 } from "react";
+import React310, { useContext as useContext22, useCallback as useCallback7, useLayoutEffect, useState as useState15, memo as memo2 } from "react";
+import { createContext as createContext3 } from "react";
 import React210, { Children as Children2, memo } from "react";
-import React41, { createContext as createContext22, useContext, useMemo as useMemo4 } from "react";
+import React42, { createContext as createContext22, useContext as useContext3, useMemo as useMemo4 } from "react";
 import React72 from "react";
-import React42 from "react";
+import React43 from "react";
 import React62 from "react";
 import React52 from "react";
 import React82 from "react";
@@ -5687,7 +5729,7 @@ var theme2 = {
   TABLE_DATA_BACKGROUND_IMAGE: "linear-gradient(to bottom, white, white 50%, rgb(234, 243, 255) 50%, rgb(234, 243, 255))",
   TABLE_DATA_BACKGROUND_SIZE: "128px 32px"
 };
-var ExpandedPathsContext = createContext2([{}, () => {
+var ExpandedPathsContext = createContext3([{}, () => {
 }]);
 var unselectable = {
   WebkitTouchCallout: "none",
@@ -5955,7 +5997,7 @@ var createTheme = /* @__PURE__ */ __name((theme3) => ({
 var DEFAULT_THEME_NAME = "chromeLight";
 var ThemeContext = createContext22(createTheme(themes_exports[DEFAULT_THEME_NAME]));
 var useStyles = /* @__PURE__ */ __name((baseStylesKey) => {
-  const themeStyles = useContext(ThemeContext);
+  const themeStyles = useContext3(ThemeContext);
   return themeStyles[baseStylesKey];
 }, "useStyles");
 var themeAcceptor = /* @__PURE__ */ __name((WrappedComponent) => {
@@ -5970,9 +6012,9 @@ var themeAcceptor = /* @__PURE__ */ __name((WrappedComponent) => {
           return createTheme(themes_exports[DEFAULT_THEME_NAME]);
       }
     }, [theme3]);
-    return React41.createElement(ThemeContext.Provider, {
+    return React42.createElement(ThemeContext.Provider, {
       value: themeStyles
-    }, React41.createElement(WrappedComponent, {
+    }, React42.createElement(WrappedComponent, {
       ...restProps
     }));
   }, "ThemeAcceptor");
@@ -6065,7 +6107,7 @@ var getExpandedPaths = /* @__PURE__ */ __name((data, dataIterator, expandPaths,
 }, "getExpandedPaths");
 var ConnectedTreeNode = memo2((props) => {
   const { data, dataIterator, path, depth, nodeRenderer } = props;
-  const [expandedPaths, setExpandedPaths] = useContext2(ExpandedPathsContext);
+  const [expandedPaths, setExpandedPaths] = useContext22(ExpandedPathsContext);
   const nodeHasChildNodes = hasChildNodes(data, dataIterator);
   const expanded = !!expandedPaths[path];
   const handleClick = useCallback7(() => nodeHasChildNodes && setExpandedPaths((prevExpandedPaths) => ({
@@ -6094,7 +6136,7 @@ var ConnectedTreeNode = memo2((props) => {
 });
 var TreeView = memo2(({ name, data, dataIterator, nodeRenderer, expandPaths, expandLevel }) => {
   const styles = useStyles("TreeView");
-  const stateAndSetter = useState14({});
+  const stateAndSetter = useState15({});
   const [, setExpandedPaths] = stateAndSetter;
   useLayoutEffect(() => setExpandedPaths((prevExpandedPaths) => getExpandedPaths(data, dataIterator, expandPaths, expandLevel, prevExpandedPaths)), [data, dataIterator, expandPaths, expandLevel]);
   return React310.createElement(ExpandedPathsContext.Provider, {
@@ -6118,7 +6160,7 @@ var ObjectName = /* @__PURE__ */ __name(({ name, dimmed = false, styles = {} })
     ...dimmed ? themeStyles["dimmed"] : {},
     ...styles
   };
-  return React42.createElement("span", {
+  return React43.createElement("span", {
     style: appliedStyles
   }, name);
 }, "ObjectName");
@@ -6771,24 +6813,24 @@ var InspectorContainer = styled31.div({
 
 // src/actions/components/ActionLogger/index.tsx
 var UnstyledWrapped = forwardRef(
-  ({ children, className }, ref) => React43.createElement(ScrollArea, { ref, horizontal: true, vertical: true, className }, children)
+  ({ children, className }, ref) => React44.createElement(ScrollArea, { ref, horizontal: true, vertical: true, className }, children)
 );
 UnstyledWrapped.displayName = "UnstyledWrapped";
 var Wrapper10 = styled32(UnstyledWrapped)({
   margin: 0,
   padding: "10px 5px 20px"
 });
-var ThemedInspector = withTheme(({ theme: theme3, ...props }) => React43.createElement(Inspector, { theme: theme3.addonActionsTheme || "chromeLight", table: false, ...props }));
+var ThemedInspector = withTheme(({ theme: theme3, ...props }) => React44.createElement(Inspector, { theme: theme3.addonActionsTheme || "chromeLight", table: false, ...props }));
 var ActionLogger = /* @__PURE__ */ __name(({ actions, onClear }) => {
   const wrapperRef = useRef6(null);
   const wrapper = wrapperRef.current;
   const wasAtBottom = wrapper && wrapper.scrollHeight - wrapper.scrollTop === wrapper.clientHeight;
-  useEffect11(() => {
+  useEffect12(() => {
     if (wasAtBottom) {
       wrapperRef.current.scrollTop = wrapperRef.current.scrollHeight;
     }
   }, [wasAtBottom, actions.length]);
-  return React43.createElement(Fragment, null, React43.createElement(Wrapper10, { ref: wrapperRef }, actions.map((action) => React43.createElement(Action, { key: action.id }, action.count > 1 && React43.createElement(Counter, null, action.count), React43.createElement(InspectorContainer, null, React43.createElement(
+  return React44.createElement(Fragment, null, React44.createElement(Wrapper10, { ref: wrapperRef }, actions.map((action) => React44.createElement(Action, { key: action.id }, action.count > 1 && React44.createElement(Counter, null, action.count), React44.createElement(InspectorContainer, null, React44.createElement(
     ThemedInspector,
     {
       sortObjectKeys: true,
@@ -6796,7 +6838,7 @@ var ActionLogger = /* @__PURE__ */ __name(({ actions, onClear }) => {
       name: action.data.name,
       data: action.data.args ?? action.data
     }
-  ))))), React43.createElement(ActionBar2, { actionItems: [{ title: "Clear", onClick: onClear }] }));
+  ))))), React44.createElement(ActionBar2, { actionItems: [{ title: "Clear", onClick: onClear }] }));
 }, "ActionLogger");
 
 // src/actions/containers/ActionLogger/index.tsx
@@ -6856,7 +6898,7 @@ var _ActionLogger = class _ActionLogger extends Component4 {
       actions,
       onClear: this.clearActions
     };
-    return active ? React44.createElement(ActionLogger, { ...props }) : null;
+    return active ? React45.createElement(ActionLogger, { ...props }) : null;
   }
 };
 __name(_ActionLogger, "ActionLogger");
@@ -6868,19 +6910,19 @@ var manager_default2 = addons2.register(ADDON_ID, (api) => {
     addons2.add(PANEL_ID, {
       title: Title3,
       type: types2.PANEL,
-      render: /* @__PURE__ */ __name(({ active }) => React45.createElement(ActionLogger2, { api, active: !!active }), "render"),
+      render: /* @__PURE__ */ __name(({ active }) => React46.createElement(ActionLogger2, { api, active: !!active }), "render"),
       paramKey: PARAM_KEY
     });
   }
 });
 
 // src/component-testing/manager.tsx
-import React68 from "react";
+import React69 from "react";
 import { AddonPanel as AddonPanel2 } from "storybook/internal/components";
 import { Consumer, addons as addons3, types as types3 } from "storybook/manager-api";
 
 // src/component-testing/components/Panel.tsx
-import React66, { Fragment as Fragment3, memo as memo4, useEffect as useEffect17, useMemo as useMemo5, useRef as useRef7, useState as useState21 } from "react";
+import React67, { Fragment as Fragment3, memo as memo4, useEffect as useEffect18, useMemo as useMemo5, useRef as useRef7, useState as useState23 } from "react";
 import {
   FORCE_REMOUNT,
   PLAY_FUNCTION_THREW_EXCEPTION,
@@ -6894,7 +6936,7 @@ import {
   useAddonState as useAddonState2,
   useChannel as useChannel2,
   useParameter as useParameter2,
-  useStorybookApi as useStorybookApi5,
+  useStorybookApi as useStorybookApi6,
   useStorybookState as useStorybookState2
 } from "storybook/manager-api";
 
@@ -6964,7 +7006,7 @@ var STORE_CHANNEL_EVENT_NAME = `UNIVERSAL_STORE:${storeOptions.id}`;
 var STATUS_TYPE_ID_COMPONENT_TEST = "storybook/component-test";
 
 // src/component-testing/components/InteractionsPanel.tsx
-import * as React65 from "react";
+import * as React66 from "react";
 import { styled as styled41 } from "storybook/theming";
 
 // src/component-testing/utils.ts
@@ -7019,7 +7061,7 @@ function useAnsiToHtmlFilter() {
 __name(useAnsiToHtmlFilter, "useAnsiToHtmlFilter");
 
 // src/component-testing/components/DetachedDebuggerMessage.tsx
-import React46 from "react";
+import React47 from "react";
 import { Link as Link4 } from "storybook/internal/components";
 import { styled as styled33 } from "storybook/theming";
 var Wrapper11 = styled33.div(({ theme: { color: color2, typography: typography4, background } }) => ({
@@ -7035,7 +7077,7 @@ var Wrapper11 = styled33.div(({ theme: { color: color2, typography: typography4,
   position: "relative"
 }));
 var DetachedDebuggerMessage = /* @__PURE__ */ __name(({ storyUrl }) => {
-  return React46.createElement(Wrapper11, null, "Debugger controls are not available on composed Storybooks.", " ", React46.createElement(
+  return React47.createElement(Wrapper11, null, "Debugger controls are not available on composed Storybooks.", " ", React47.createElement(
     Link4,
     {
       href: `${storyUrl}&addonPanel=${PANEL_ID2}`,
@@ -7048,10 +7090,10 @@ var DetachedDebuggerMessage = /* @__PURE__ */ __name(({ storyUrl }) => {
 }, "DetachedDebuggerMessage");
 
 // src/component-testing/components/EmptyState.tsx
-import React47, { useEffect as useEffect12, useState as useState15 } from "react";
+import React48, { useEffect as useEffect13, useState as useState16 } from "react";
 import { EmptyTabContent as EmptyTabContent2, Link as Link5 } from "storybook/internal/components";
 import { DocumentIcon as DocumentIcon3 } from "@storybook/icons";
-import { useStorybookApi as useStorybookApi3 } from "storybook/manager-api";
+import { useStorybookApi as useStorybookApi4 } from "storybook/manager-api";
 import { styled as styled34 } from "storybook/theming";
 var Links2 = styled34.div(({ theme: theme3 }) => ({
   display: "flex",
@@ -7059,14 +7101,14 @@ var Links2 = styled34.div(({ theme: theme3 }) => ({
   gap: 25
 }));
 var Empty2 = /* @__PURE__ */ __name(() => {
-  const [isLoading, setIsLoading] = useState15(true);
-  const api = useStorybookApi3();
+  const [isLoading, setIsLoading] = useState16(true);
+  const api = useStorybookApi4();
   const docsUrl = api.getDocsUrl({
     subpath: DOCUMENTATION_PLAY_FUNCTION_LINK,
     versioned: true,
     renderer: true
   });
-  useEffect12(() => {
+  useEffect13(() => {
     const load = setTimeout(() => {
       setIsLoading(false);
     }, 100);
@@ -7075,32 +7117,32 @@ var Empty2 = /* @__PURE__ */ __name(() => {
   if (isLoading) {
     return null;
   }
-  return React47.createElement("div", null, React47.createElement(
+  return React48.createElement("div", null, React48.createElement(
     EmptyTabContent2,
     {
       title: "Interactions",
-      description: React47.createElement(React47.Fragment, null, "Interactions allow you to verify the functional aspects of UIs. Write a play function for your story and you'll see it run here."),
-      footer: React47.createElement(Links2, null, React47.createElement(Link5, { href: docsUrl, target: "_blank", withArrow: true }, React47.createElement(DocumentIcon3, null), " Read docs"))
+      description: React48.createElement(React48.Fragment, null, "Interactions allow you to verify the functional aspects of UIs. Write a play function for your story and you'll see it run here."),
+      footer: React48.createElement(Links2, null, React48.createElement(Link5, { href: docsUrl, target: "_blank", withArrow: true }, React48.createElement(DocumentIcon3, null), " Read docs"))
     }
   ));
 }, "Empty");
 
 // src/component-testing/components/Interaction.tsx
-import * as React60 from "react";
+import * as React61 from "react";
 import { IconButton as IconButton5, TooltipNote as TooltipNote2, WithTooltip as WithTooltip2 } from "storybook/internal/components";
 import { ChevronDownIcon as ChevronDownIcon3, ChevronUpIcon as ChevronUpIcon2 } from "@storybook/icons";
 import { styled as styled37, typography as typography2 } from "storybook/theming";
 
 // src/component-testing/components/MatcherResult.tsx
-import React58 from "react";
+import React59 from "react";
 import { styled as styled35, typography } from "storybook/theming";
 
 // src/component-testing/components/MethodCall.tsx
-import React57, { Fragment as Fragment2 } from "react";
+import React58, { Fragment as Fragment2 } from "react";
 import { logger as logger4 } from "storybook/internal/client-logger";
 
 // ../node_modules/@devtools-ds/object-inspector/dist/esm/ObjectInspector.js
-import React56, { useEffect as useEffect16, useState as useState19 } from "react";
+import React57, { useEffect as useEffect17, useState as useState20 } from "react";
 
 // ../node_modules/clsx/dist/clsx.m.js
 function toVal(mix) {
@@ -7295,9 +7337,9 @@ function _objectSpread2(e2) {
 __name(_objectSpread2, "_objectSpread2");
 
 // ../node_modules/@devtools-ds/themes/dist/esm/utils.js
-import React48 from "react";
+import React49 from "react";
 var _excluded = ["children"];
-var ThemeContext2 = React48.createContext({
+var ThemeContext2 = React49.createContext({
   theme: "chrome",
   colorScheme: "light"
 });
@@ -7305,13 +7347,13 @@ var ThemeProvider2 = /* @__PURE__ */ __name((_ref) => {
   let {
     children
   } = _ref, value2 = _objectWithoutProperties(_ref, _excluded);
-  const wrappedTheme = React48.useContext(ThemeContext2);
-  return React48.createElement(ThemeContext2.Provider, {
+  const wrappedTheme = React49.useContext(ThemeContext2);
+  return React49.createElement(ThemeContext2.Provider, {
     value: _objectSpread2(_objectSpread2({}, wrappedTheme), value2)
   }, children);
 }, "ThemeProvider");
 var useTheme4 = /* @__PURE__ */ __name((props, styles = {}) => {
-  const themeContext = React48.useContext(ThemeContext2);
+  const themeContext = React49.useContext(ThemeContext2);
   const currentTheme = props.theme || themeContext.theme || "chrome";
   const currentColorScheme = props.colorScheme || themeContext.colorScheme || "light";
   const themeClass = clsx_m_default(styles[currentTheme], styles[currentColorScheme]);
@@ -7323,17 +7365,17 @@ var useTheme4 = /* @__PURE__ */ __name((props, styles = {}) => {
 }, "useTheme");
 
 // ../node_modules/@devtools-ds/themes/dist/esm/AutoThemeProvider.js
-import React49 from "react";
+import React50 from "react";
 
 // ../node_modules/@devtools-ds/object-inspector/dist/esm/ObjectInspectorItem.js
-import React55, { useEffect as useEffect15, useState as useState18 } from "react";
+import React56, { useEffect as useEffect16, useState as useState19 } from "react";
 
 // ../node_modules/@devtools-ds/tree/dist/esm/index.js
-import React51, { useState as useState16, useEffect as useEffect13 } from "react";
+import React53, { useState as useState17, useEffect as useEffect14 } from "react";
 
 // ../node_modules/@devtools-ds/tree/dist/esm/TreeContext.js
-import React50 from "react";
-var TreeContext = React50.createContext({
+import React51 from "react";
+var TreeContext = React51.createContext({
   isChild: false,
   depth: 0,
   hasHover: true
@@ -7364,15 +7406,15 @@ var Tree = /* @__PURE__ */ __name((props) => {
     theme: theme3,
     colorScheme
   }, Tree_css_default);
-  const [isOpen, setOpen] = useState16(open);
-  useEffect13(() => {
+  const [isOpen, setOpen] = useState17(open);
+  useEffect14(() => {
     setOpen(open);
   }, [open]);
   const updateState = /* @__PURE__ */ __name((value2) => {
     setOpen(value2);
     if (onUpdate) onUpdate(value2);
   }, "updateState");
-  const hasChildren = React51.Children.count(children) > 0;
+  const hasChildren = React53.Children.count(children) > 0;
   const updateFocus = /* @__PURE__ */ __name((newNode, previousNode) => {
     if (newNode.isSameNode(previousNode || null)) return;
     const focusableNode = newNode.querySelector('[tabindex="-1"]');
@@ -7513,28 +7555,28 @@ var Tree = /* @__PURE__ */ __name((props) => {
     isChild,
     depth,
     hasHover
-  } = React51.useContext(TreeContext_default);
+  } = React53.useContext(TreeContext_default);
   const showHover = hasHover ? hover : false;
   if (!isChild) {
-    return React51.createElement("ul", _extends({
+    return React53.createElement("ul", _extends({
       role: "tree",
       tabIndex: 0,
       className: clsx_m_default(Tree_css_default.tree, Tree_css_default.group, themeClass, className),
       onFocus: handleFocus,
       onBlur: handleBlur
-    }, html), React51.createElement(TreeContext_default.Provider, {
+    }, html), React53.createElement(TreeContext_default.Provider, {
       value: {
         isChild: true,
         depth: 0,
         hasHover: showHover
       }
-    }, React51.createElement(Tree, props)));
+    }, React53.createElement(Tree, props)));
   }
   if (!hasChildren) {
-    return React51.createElement("li", _extends({
+    return React53.createElement("li", _extends({
       role: "treeitem",
       className: Tree_css_default.item
-    }, html), React51.createElement("div", {
+    }, html), React53.createElement("div", {
       role: "button",
       className: clsx_m_default(Tree_css_default.label, {
         [Tree_css_default.hover]: showHover,
@@ -7547,16 +7589,16 @@ var Tree = /* @__PURE__ */ __name((props) => {
       }, "onKeyDown"),
       onClick: /* @__PURE__ */ __name((e2) => handleClick(e2, true), "onClick"),
       onFocus: handleButtonFocus
-    }, React51.createElement("span", null, label)));
+    }, React53.createElement("span", null, label)));
   }
   const arrowClass = clsx_m_default(Tree_css_default.arrow, {
     [Tree_css_default.open]: isOpen
   });
-  return React51.createElement("li", {
+  return React53.createElement("li", {
     role: "treeitem",
     "aria-expanded": isOpen,
     className: Tree_css_default.item
-  }, React51.createElement("div", {
+  }, React53.createElement("div", {
     role: "button",
     tabIndex: -1,
     className: clsx_m_default(Tree_css_default.label, {
@@ -7567,14 +7609,14 @@ var Tree = /* @__PURE__ */ __name((props) => {
     onClick: /* @__PURE__ */ __name((e2) => handleClick(e2), "onClick"),
     onKeyDown: /* @__PURE__ */ __name((e2) => handleKeypress(e2), "onKeyDown"),
     onFocus: handleButtonFocus
-  }, React51.createElement("span", null, React51.createElement("span", {
+  }, React53.createElement("span", null, React53.createElement("span", {
     "aria-hidden": true,
     className: arrowClass
-  }), React51.createElement("span", null, label))), React51.createElement("ul", _extends({
+  }), React53.createElement("span", null, label))), React53.createElement("ul", _extends({
     role: "group",
     className: clsx_m_default(className, Tree_css_default.group)
-  }, html), isOpen && React51.Children.map(children, (child) => {
-    return React51.createElement(TreeContext_default.Provider, {
+  }, html), isOpen && React53.Children.map(children, (child) => {
+    return React53.createElement(TreeContext_default.Provider, {
       value: {
         isChild: true,
         depth: depth + 1,
@@ -7589,7 +7631,7 @@ Tree.defaultProps = {
 };
 
 // ../node_modules/@devtools-ds/object-inspector/dist/esm/ObjectValue.js
-import React53, { useState as useState17, useEffect as useEffect14 } from "react";
+import React54, { useState as useState18, useEffect as useEffect15 } from "react";
 
 // ../node_modules/@devtools-ds/object-inspector/dist/esm/ObjectInspector.css.js
 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" };
@@ -7599,11 +7641,11 @@ var _excluded3 = ["ast", "theme", "showKey", "colorScheme", "className"];
 var buildValue = /* @__PURE__ */ __name((key, value2, valueClass, showKey, depth) => {
   const computedKey = key.includes("-") ? `"${key}"` : key;
   const isRoot = depth <= 0;
-  return React53.createElement("span", {
+  return React54.createElement("span", {
     className: ObjectInspector_css_default.text
-  }, !isRoot && showKey && React53.createElement(React53.Fragment, null, React53.createElement("span", {
+  }, !isRoot && showKey && React54.createElement(React54.Fragment, null, React54.createElement("span", {
     className: ObjectInspector_css_default.key
-  }, computedKey), React53.createElement("span", null, ":\xA0")), React53.createElement("span", {
+  }, computedKey), React54.createElement("span", null, ":\xA0")), React54.createElement("span", {
     className: valueClass
   }, value2));
 }, "buildValue");
@@ -7621,9 +7663,9 @@ var ObjectValue2 = /* @__PURE__ */ __name((props) => {
     theme: theme3,
     colorScheme
   }, ObjectInspector_css_default);
-  const [asyncValue, setAsyncValue] = useState17(React53.createElement("span", null));
-  let value2 = React53.createElement("span", null);
-  useEffect14(() => {
+  const [asyncValue, setAsyncValue] = useState18(React54.createElement("span", null));
+  let value2 = React54.createElement("span", null);
+  useEffect15(() => {
     if (ast.value instanceof Promise) {
       const waitForPromiseResult = /* @__PURE__ */ __name(async (promise) => {
         setAsyncValue(buildValue(ast.key, `Promise { "${await getPromiseState(promise)}" }`, ObjectInspector_css_default.key, showKey, ast.depth));
@@ -7660,7 +7702,7 @@ var ObjectValue2 = /* @__PURE__ */ __name((props) => {
       value2 = buildValue(ast.key, ast.value.constructor.name, ObjectInspector_css_default.key, showKey, ast.depth);
     }
   }
-  return React53.createElement("span", _extends({
+  return React54.createElement("span", _extends({
     className: clsx_m_default(themeClass, className)
   }, html), asyncValue, value2);
 }, "ObjectValue");
@@ -7670,14 +7712,14 @@ ObjectValue2.defaultProps = {
 var ObjectValue_default = ObjectValue2;
 
 // ../node_modules/@devtools-ds/object-inspector/dist/esm/ObjectLabel.js
-import React54 from "react";
+import React55 from "react";
 var _excluded4 = ["ast", "theme", "previewMax", "open", "colorScheme", "className"];
 var buildPreview = /* @__PURE__ */ __name((children, previewMax, showKey) => {
   const previews = [];
   for (let i2 = 0; i2 < children.length; i2++) {
     const child = children[i2];
     if (!child.isPrototype) {
-      previews.push(React54.createElement(ObjectValue_default, {
+      previews.push(React55.createElement(ObjectValue_default, {
         key: child.key,
         ast: child,
         showKey
@@ -7702,42 +7744,42 @@ var buildPreview = /* @__PURE__ */ __name((children, previewMax, showKey) => {
 var getArrayLabel = /* @__PURE__ */ __name((ast, open, previewMax, theme3) => {
   const l2 = ast.value.length;
   if (open) {
-    return React54.createElement("span", null, "Array(", l2, ")");
+    return React55.createElement("span", null, "Array(", l2, ")");
   }
-  return React54.createElement(React54.Fragment, null, React54.createElement("span", null, `${theme3 === "firefox" ? "Array" : ""}(${l2}) [ `), buildPreview(ast.children, previewMax, false), React54.createElement("span", null, "]"));
+  return React55.createElement(React55.Fragment, null, React55.createElement("span", null, `${theme3 === "firefox" ? "Array" : ""}(${l2}) [ `), buildPreview(ast.children, previewMax, false), React55.createElement("span", null, "]"));
 }, "getArrayLabel");
 var getObjectLabel = /* @__PURE__ */ __name((ast, open, previewMax, theme3) => {
   if (ast.isPrototype) {
-    return React54.createElement("span", null, `Object ${theme3 === "firefox" ? "{ \u2026 }" : ""}`);
+    return React55.createElement("span", null, `Object ${theme3 === "firefox" ? "{ \u2026 }" : ""}`);
   }
   if (open) {
-    return React54.createElement("span", null, "{\u2026}");
+    return React55.createElement("span", null, "{\u2026}");
   }
-  return React54.createElement(React54.Fragment, null, React54.createElement("span", null, `${theme3 === "firefox" ? "Object " : ""}{ `), buildPreview(ast.children, previewMax, true), React54.createElement("span", null, "}"));
+  return React55.createElement(React55.Fragment, null, React55.createElement("span", null, `${theme3 === "firefox" ? "Object " : ""}{ `), buildPreview(ast.children, previewMax, true), React55.createElement("span", null, "}"));
 }, "getObjectLabel");
 var getPromiseLabel = /* @__PURE__ */ __name((ast, open, previewMax) => {
   if (open) {
-    return React54.createElement("span", null, `Promise { "${String(ast.children[0].value)}" }`);
+    return React55.createElement("span", null, `Promise { "${String(ast.children[0].value)}" }`);
   }
-  return React54.createElement(React54.Fragment, null, React54.createElement("span", null, `Promise { `), buildPreview(ast.children, previewMax, true), React54.createElement("span", null, "}"));
+  return React55.createElement(React55.Fragment, null, React55.createElement("span", null, `Promise { `), buildPreview(ast.children, previewMax, true), React55.createElement("span", null, "}"));
 }, "getPromiseLabel");
 var getMapLabel = /* @__PURE__ */ __name((ast, open, previewMax, theme3) => {
   const {
     size
   } = ast.value;
   if (open) {
-    return React54.createElement("span", null, `Map(${size})`);
+    return React55.createElement("span", null, `Map(${size})`);
   }
-  return React54.createElement(React54.Fragment, null, React54.createElement("span", null, `Map${theme3 === "chrome" ? `(${size})` : ""} { `), buildPreview(ast.children, previewMax, true), React54.createElement("span", null, "}"));
+  return React55.createElement(React55.Fragment, null, React55.createElement("span", null, `Map${theme3 === "chrome" ? `(${size})` : ""} { `), buildPreview(ast.children, previewMax, true), React55.createElement("span", null, "}"));
 }, "getMapLabel");
 var getSetLabel = /* @__PURE__ */ __name((ast, open, previewMax) => {
   const {
     size
   } = ast.value;
   if (open) {
-    return React54.createElement("span", null, "Set(", size, ")");
+    return React55.createElement("span", null, "Set(", size, ")");
   }
-  return React54.createElement(React54.Fragment, null, React54.createElement("span", null, `Set(${ast.value.size}) {`), buildPreview(ast.children, previewMax, true), React54.createElement("span", null, "}"));
+  return React55.createElement(React55.Fragment, null, React55.createElement("span", null, `Set(${ast.value.size}) {`), buildPreview(ast.children, previewMax, true), React55.createElement("span", null, "}"));
 }, "getSetLabel");
 var ObjectLabel2 = /* @__PURE__ */ __name((props) => {
   const {
@@ -7761,44 +7803,44 @@ var ObjectLabel2 = /* @__PURE__ */ __name((props) => {
   });
   const isRoot = ast.depth <= 0;
   const Key = /* @__PURE__ */ __name(() => {
-    return React54.createElement("span", {
+    return React55.createElement("span", {
       className: isPrototype ? ObjectInspector_css_default.prototype : ObjectInspector_css_default.key
     }, isRoot ? "" : `${ast.key}: `);
   }, "Key");
   if (ast.type === "array") {
-    return React54.createElement("span", _extends({
+    return React55.createElement("span", _extends({
       className: classes
-    }, html), React54.createElement(Key, null), getArrayLabel(ast, open, previewMax, currentTheme));
+    }, html), React55.createElement(Key, null), getArrayLabel(ast, open, previewMax, currentTheme));
   }
   if (ast.type === "function") {
-    return React54.createElement("span", _extends({
+    return React55.createElement("span", _extends({
       className: classes
-    }, html), React54.createElement(Key, null), currentTheme === "chrome" && React54.createElement("span", {
+    }, html), React55.createElement(Key, null), currentTheme === "chrome" && React55.createElement("span", {
       className: ObjectInspector_css_default.functionDecorator
-    }, "\u0192 "), React54.createElement("span", {
+    }, "\u0192 "), React55.createElement("span", {
       className: clsx_m_default({
         [ObjectInspector_css_default.function]: !isPrototype
       })
     }, `${ast.value.name}()`));
   }
   if (ast.type === "promise") {
-    return React54.createElement("span", _extends({
+    return React55.createElement("span", _extends({
       className: classes
-    }, html), React54.createElement(Key, null), getPromiseLabel(ast, open, previewMax));
+    }, html), React55.createElement(Key, null), getPromiseLabel(ast, open, previewMax));
   }
   if (ast.type === "map") {
-    return React54.createElement("span", _extends({
+    return React55.createElement("span", _extends({
       className: classes
-    }, html), React54.createElement(Key, null), getMapLabel(ast, open, previewMax, currentTheme));
+    }, html), React55.createElement(Key, null), getMapLabel(ast, open, previewMax, currentTheme));
   }
   if (ast.type === "set") {
-    return React54.createElement("span", _extends({
+    return React55.createElement("span", _extends({
       className: classes
-    }, html), React54.createElement(Key, null), getSetLabel(ast, open, previewMax));
+    }, html), React55.createElement(Key, null), getSetLabel(ast, open, previewMax));
   }
-  return React54.createElement("span", _extends({
+  return React55.createElement("span", _extends({
     className: classes
-  }, html), React54.createElement(Key, null), getObjectLabel(ast, open, previewMax, currentTheme));
+  }, html), React55.createElement(Key, null), getObjectLabel(ast, open, previewMax, currentTheme));
 }, "ObjectLabel");
 ObjectLabel2.defaultProps = {
   previewMax: 8,
@@ -7813,9 +7855,9 @@ var ObjectInspectorItem = /* @__PURE__ */ __name((props) => {
     expandLevel,
     depth
   } = props;
-  const [resolved, setResolved] = useState18();
-  const [open, setOpen] = useState18(Boolean(depth < expandLevel));
-  useEffect15(() => {
+  const [resolved, setResolved] = useState19();
+  const [open, setOpen] = useState19(Boolean(depth < expandLevel));
+  useEffect16(() => {
     const resolve = /* @__PURE__ */ __name(async () => {
       if (ast.type !== "value") {
         const promises = ast.children.map((f2) => f2());
@@ -7829,10 +7871,10 @@ var ObjectInspectorItem = /* @__PURE__ */ __name((props) => {
     resolve();
   }, [ast]);
   if (resolved) {
-    return React55.createElement(Tree, {
+    return React56.createElement(Tree, {
       hover: false,
       open,
-      label: React55.createElement(ObjectLabel_default, {
+      label: React56.createElement(ObjectLabel_default, {
         open,
         ast: resolved
       }),
@@ -7844,7 +7886,7 @@ var ObjectInspectorItem = /* @__PURE__ */ __name((props) => {
         setOpen(value2);
       }, "onUpdate")
     }, resolved.children.map((child) => {
-      return React55.createElement(ObjectInspectorItem, {
+      return React56.createElement(ObjectInspectorItem, {
         key: child.key,
         ast: child,
         depth: depth + 1,
@@ -7853,9 +7895,9 @@ var ObjectInspectorItem = /* @__PURE__ */ __name((props) => {
       });
     }));
   }
-  return React55.createElement(Tree, {
+  return React56.createElement(Tree, {
     hover: false,
-    label: React55.createElement(ObjectValue_default, {
+    label: React56.createElement(ObjectValue_default, {
       ast
     }),
     onSelect: /* @__PURE__ */ __name(() => {
@@ -7883,7 +7925,7 @@ var ObjectInspector2 = /* @__PURE__ */ __name((props) => {
     colorScheme,
     onSelect
   } = props, html = _objectWithoutProperties(props, _excluded5);
-  const [ast, setAST] = useState19(void 0);
+  const [ast, setAST] = useState20(void 0);
   const {
     themeClass,
     currentTheme,
@@ -7892,18 +7934,18 @@ var ObjectInspector2 = /* @__PURE__ */ __name((props) => {
     theme: theme3,
     colorScheme
   }, ObjectInspector_css_default);
-  useEffect16(() => {
+  useEffect17(() => {
     const runParser = /* @__PURE__ */ __name(async () => {
       setAST(await parse4(data, sortKeys, includePrototypes));
     }, "runParser");
     runParser();
   }, [data, sortKeys, includePrototypes]);
-  return React56.createElement("div", _extends({
+  return React57.createElement("div", _extends({
     className: clsx_m_default(ObjectInspector_css_default.objectInspector, className, themeClass)
-  }, html), ast && React56.createElement(ThemeProvider2, {
+  }, html), ast && React57.createElement(ThemeProvider2, {
     theme: currentTheme,
     colorScheme: currentColorScheme
-  }, React56.createElement(ObjectInspectorItem_default, {
+  }, React57.createElement(ObjectInspectorItem_default, {
     ast,
     expandLevel,
     onSelect
@@ -7994,7 +8036,7 @@ var stringify = /* @__PURE__ */ __name((value2) => {
   }
 }, "stringify");
 var interleave = /* @__PURE__ */ __name((nodes, separator) => nodes.flatMap(
-  (node, index) => index === nodes.length - 1 ? [node] : [node, React57.cloneElement(separator, { key: `sep${index}` })]
+  (node, index) => index === nodes.length - 1 ? [node] : [node, React58.cloneElement(separator, { key: `sep${index}` })]
 ), "interleave");
 var Node2 = /* @__PURE__ */ __name(({
   value: value2,
@@ -8005,35 +8047,35 @@ var Node2 = /* @__PURE__ */ __name(({
 }) => {
   switch (true) {
     case value2 === null:
-      return React57.createElement(NullNode, { ...props });
+      return React58.createElement(NullNode, { ...props });
     case value2 === void 0:
-      return React57.createElement(UndefinedNode, { ...props });
+      return React58.createElement(UndefinedNode, { ...props });
     case Array.isArray(value2):
-      return React57.createElement(ArrayNode, { ...props, value: value2, callsById });
+      return React58.createElement(ArrayNode, { ...props, value: value2, callsById });
     case typeof value2 === "string":
-      return React57.createElement(StringNode, { ...props, value: value2 });
+      return React58.createElement(StringNode, { ...props, value: value2 });
     case typeof value2 === "number":
-      return React57.createElement(NumberNode, { ...props, value: value2 });
+      return React58.createElement(NumberNode, { ...props, value: value2 });
     case typeof value2 === "boolean":
-      return React57.createElement(BooleanNode, { ...props, value: value2 });
+      return React58.createElement(BooleanNode, { ...props, value: value2 });
     case Object.prototype.hasOwnProperty.call(value2, "__date__"):
-      return React57.createElement(DateNode, { ...props, ...value2.__date__ });
+      return React58.createElement(DateNode, { ...props, ...value2.__date__ });
     case Object.prototype.hasOwnProperty.call(value2, "__error__"):
-      return React57.createElement(ErrorNode, { ...props, ...value2.__error__ });
+      return React58.createElement(ErrorNode, { ...props, ...value2.__error__ });
     case Object.prototype.hasOwnProperty.call(value2, "__regexp__"):
-      return React57.createElement(RegExpNode, { ...props, ...value2.__regexp__ });
+      return React58.createElement(RegExpNode, { ...props, ...value2.__regexp__ });
     case Object.prototype.hasOwnProperty.call(value2, "__function__"):
-      return React57.createElement(FunctionNode, { ...props, ...value2.__function__ });
+      return React58.createElement(FunctionNode, { ...props, ...value2.__function__ });
     case Object.prototype.hasOwnProperty.call(value2, "__symbol__"):
-      return React57.createElement(SymbolNode, { ...props, ...value2.__symbol__ });
+      return React58.createElement(SymbolNode, { ...props, ...value2.__symbol__ });
     case Object.prototype.hasOwnProperty.call(value2, "__element__"):
-      return React57.createElement(ElementNode, { ...props, ...value2.__element__ });
+      return React58.createElement(ElementNode, { ...props, ...value2.__element__ });
     case Object.prototype.hasOwnProperty.call(value2, "__class__"):
-      return React57.createElement(ClassNode, { ...props, ...value2.__class__ });
+      return React58.createElement(ClassNode, { ...props, ...value2.__class__ });
     case Object.prototype.hasOwnProperty.call(value2, "__callId__"):
-      return React57.createElement(MethodCall, { call: callsById?.get(value2.__callId__), callsById });
+      return React58.createElement(MethodCall, { call: callsById?.get(value2.__callId__), callsById });
     case Object.prototype.toString.call(value2) === "[object Object]":
-      return React57.createElement(
+      return React58.createElement(
         ObjectNode,
         {
           value: value2,
@@ -8043,28 +8085,28 @@ var Node2 = /* @__PURE__ */ __name(({
         }
       );
     default:
-      return React57.createElement(OtherNode, { value: value2, ...props });
+      return React58.createElement(OtherNode, { value: value2, ...props });
   }
 }, "Node");
 var NullNode = /* @__PURE__ */ __name((props) => {
   const colors = useThemeColors();
-  return React57.createElement("span", { style: { color: colors.nullish }, ...props }, "null");
+  return React58.createElement("span", { style: { color: colors.nullish }, ...props }, "null");
 }, "NullNode");
 var UndefinedNode = /* @__PURE__ */ __name((props) => {
   const colors = useThemeColors();
-  return React57.createElement("span", { style: { color: colors.nullish }, ...props }, "undefined");
+  return React58.createElement("span", { style: { color: colors.nullish }, ...props }, "undefined");
 }, "UndefinedNode");
 var StringNode = /* @__PURE__ */ __name(({ value: value2, ...props }) => {
   const colors = useThemeColors();
-  return React57.createElement("span", { style: { color: colors.string }, ...props }, JSON.stringify(ellipsize(value2, 50)));
+  return React58.createElement("span", { style: { color: colors.string }, ...props }, JSON.stringify(ellipsize(value2, 50)));
 }, "StringNode");
 var NumberNode = /* @__PURE__ */ __name(({ value: value2, ...props }) => {
   const colors = useThemeColors();
-  return React57.createElement("span", { style: { color: colors.number }, ...props }, value2);
+  return React58.createElement("span", { style: { color: colors.number }, ...props }, value2);
 }, "NumberNode");
 var BooleanNode = /* @__PURE__ */ __name(({ value: value2, ...props }) => {
   const colors = useThemeColors();
-  return React57.createElement("span", { style: { color: colors.boolean }, ...props }, String(value2));
+  return React58.createElement("span", { style: { color: colors.boolean }, ...props }, String(value2));
 }, "BooleanNode");
 var ArrayNode = /* @__PURE__ */ __name(({
   value: value2,
@@ -8073,14 +8115,14 @@ var ArrayNode = /* @__PURE__ */ __name(({
 }) => {
   const colors = useThemeColors();
   if (nested) {
-    return React57.createElement("span", { style: { color: colors.base } }, "[\u2026]");
+    return React58.createElement("span", { style: { color: colors.base } }, "[\u2026]");
   }
-  const nodes = value2.slice(0, 3).map((v2, index) => React57.createElement(Node2, { key: `${index}--${JSON.stringify(v2)}`, value: v2, nested: true, callsById }));
-  const nodelist = interleave(nodes, React57.createElement("span", null, ", "));
+  const nodes = value2.slice(0, 3).map((v2, index) => React58.createElement(Node2, { key: `${index}--${JSON.stringify(v2)}`, value: v2, nested: true, callsById }));
+  const nodelist = interleave(nodes, React58.createElement("span", null, ", "));
   if (value2.length <= 3) {
-    return React57.createElement("span", { style: { color: colors.base } }, "[", nodelist, "]");
+    return React58.createElement("span", { style: { color: colors.base } }, "[", nodelist, "]");
   }
-  return React57.createElement("span", { style: { color: colors.base } }, "(", value2.length, ") [", nodelist, ", \u2026]");
+  return React58.createElement("span", { style: { color: colors.base } }, "(", value2.length, ") [", nodelist, ", \u2026]");
 }, "ArrayNode");
 var ObjectNode = /* @__PURE__ */ __name(({
   showInspector,
@@ -8091,7 +8133,7 @@ var ObjectNode = /* @__PURE__ */ __name(({
   const isDarkMode = useTheme5().base === "dark";
   const colors = useThemeColors();
   if (showInspector) {
-    return React57.createElement(React57.Fragment, null, React57.createElement(
+    return React58.createElement(React58.Fragment, null, React58.createElement(
       ObjectInspector2,
       {
         id: "interactions-object-inspector",
@@ -8102,24 +8144,24 @@ var ObjectNode = /* @__PURE__ */ __name(({
     ));
   }
   if (nested) {
-    return React57.createElement("span", { style: { color: colors.base } }, "{\u2026}");
+    return React58.createElement("span", { style: { color: colors.base } }, "{\u2026}");
   }
   const nodelist = interleave(
-    Object.entries(value2).slice(0, 2).map(([k2, v2]) => React57.createElement(Fragment2, { key: k2 }, React57.createElement("span", { style: { color: colors.objectkey } }, k2, ": "), React57.createElement(Node2, { value: v2, callsById, nested: true }))),
-    React57.createElement("span", null, ", ")
+    Object.entries(value2).slice(0, 2).map(([k2, v2]) => React58.createElement(Fragment2, { key: k2 }, React58.createElement("span", { style: { color: colors.objectkey } }, k2, ": "), React58.createElement(Node2, { value: v2, callsById, nested: true }))),
+    React58.createElement("span", null, ", ")
   );
   if (Object.keys(value2).length <= 2) {
-    return React57.createElement("span", { style: { color: colors.base } }, "{ ", nodelist, " }");
+    return React58.createElement("span", { style: { color: colors.base } }, "{ ", nodelist, " }");
   }
-  return React57.createElement("span", { style: { color: colors.base } }, "(", Object.keys(value2).length, ") ", "{ ", nodelist, ", \u2026 }");
+  return React58.createElement("span", { style: { color: colors.base } }, "(", Object.keys(value2).length, ") ", "{ ", nodelist, ", \u2026 }");
 }, "ObjectNode");
 var ClassNode = /* @__PURE__ */ __name(({ name }) => {
   const colors = useThemeColors();
-  return React57.createElement("span", { style: { color: colors.instance } }, name);
+  return React58.createElement("span", { style: { color: colors.instance } }, name);
 }, "ClassNode");
 var FunctionNode = /* @__PURE__ */ __name(({ name }) => {
   const colors = useThemeColors();
-  return name ? React57.createElement("span", { style: { color: colors.function } }, name) : React57.createElement("span", { style: { color: colors.nullish, fontStyle: "italic" } }, "anonymous");
+  return name ? React58.createElement("span", { style: { color: colors.function } }, name) : React58.createElement("span", { style: { color: colors.nullish, fontStyle: "italic" } }, "anonymous");
 }, "FunctionNode");
 var ElementNode = /* @__PURE__ */ __name(({
   prefix,
@@ -8130,7 +8172,7 @@ var ElementNode = /* @__PURE__ */ __name(({
 }) => {
   const name = prefix ? `${prefix}:${localName}` : localName;
   const colors = useThemeColors();
-  return React57.createElement("span", { style: { wordBreak: "keep-all" } }, React57.createElement("span", { key: `${name}_lt`, style: { color: colors.muted } }, "<"), React57.createElement("span", { key: `${name}_tag`, style: { color: colors.tag.name } }, name), React57.createElement("span", { key: `${name}_suffix`, style: { color: colors.tag.suffix } }, id ? `#${id}` : classNames.reduce((acc, className) => `${acc}.${className}`, "")), React57.createElement("span", { key: `${name}_gt`, style: { color: colors.muted } }, ">"), !id && classNames.length === 0 && innerText && React57.createElement(React57.Fragment, null, React57.createElement("span", { key: `${name}_text` }, innerText), React57.createElement("span", { key: `${name}_close_lt`, style: { color: colors.muted } }, "<"), React57.createElement("span", { key: `${name}_close_tag`, style: { color: colors.tag.name } }, "/", name), React57.createElement("span", { key: `${name}_close_gt`, style: { color: colors.muted } }, ">")));
+  return React58.createElement("span", { style: { wordBreak: "keep-all" } }, React58.createElement("span", { key: `${name}_lt`, style: { color: colors.muted } }, "<"), React58.createElement("span", { key: `${name}_tag`, style: { color: colors.tag.name } }, name), React58.createElement("span", { key: `${name}_suffix`, style: { color: colors.tag.suffix } }, id ? `#${id}` : classNames.reduce((acc, className) => `${acc}.${className}`, "")), React58.createElement("span", { key: `${name}_gt`, style: { color: colors.muted } }, ">"), !id && classNames.length === 0 && innerText && React58.createElement(React58.Fragment, null, React58.createElement("span", { key: `${name}_text` }, innerText), React58.createElement("span", { key: `${name}_close_lt`, style: { color: colors.muted } }, "<"), React58.createElement("span", { key: `${name}_close_tag`, style: { color: colors.tag.name } }, "/", name), React58.createElement("span", { key: `${name}_close_gt`, style: { color: colors.muted } }, ">")));
 }, "ElementNode");
 var DateNode = /* @__PURE__ */ __name(({ value: value2 }) => {
   let parsed = new Date(value2);
@@ -8140,31 +8182,31 @@ var DateNode = /* @__PURE__ */ __name(({ value: value2 }) => {
   }
   const colors = useThemeColors();
   if (!parsed) {
-    return React57.createElement("span", { style: { whiteSpace: "nowrap", color: colors.date } }, "Invalid date");
+    return React58.createElement("span", { style: { whiteSpace: "nowrap", color: colors.date } }, "Invalid date");
   }
   const [date, time, ms] = parsed.toISOString().split(/[T.Z]/);
-  return React57.createElement("span", { style: { whiteSpace: "nowrap", color: colors.date } }, date, React57.createElement("span", { style: { opacity: 0.7 } }, "T"), time === "00:00:00" ? React57.createElement("span", { style: { opacity: 0.7 } }, time) : time, ms === "000" ? React57.createElement("span", { style: { opacity: 0.7 } }, ".", ms) : `.${ms}`, React57.createElement("span", { style: { opacity: 0.7 } }, "Z"));
+  return React58.createElement("span", { style: { whiteSpace: "nowrap", color: colors.date } }, date, React58.createElement("span", { style: { opacity: 0.7 } }, "T"), time === "00:00:00" ? React58.createElement("span", { style: { opacity: 0.7 } }, time) : time, ms === "000" ? React58.createElement("span", { style: { opacity: 0.7 } }, ".", ms) : `.${ms}`, React58.createElement("span", { style: { opacity: 0.7 } }, "Z"));
 }, "DateNode");
 var ErrorNode = /* @__PURE__ */ __name(({ name, message }) => {
   const colors = useThemeColors();
-  return React57.createElement("span", { style: { color: colors.error.name } }, name, message && ": ", message && React57.createElement("span", { style: { color: colors.error.message }, title: message.length > 50 ? message : "" }, ellipsize(message, 50)));
+  return React58.createElement("span", { style: { color: colors.error.name } }, name, message && ": ", message && React58.createElement("span", { style: { color: colors.error.message }, title: message.length > 50 ? message : "" }, ellipsize(message, 50)));
 }, "ErrorNode");
 var RegExpNode = /* @__PURE__ */ __name(({ flags, source }) => {
   const colors = useThemeColors();
-  return React57.createElement("span", { style: { whiteSpace: "nowrap", color: colors.regex.flags } }, "/", React57.createElement("span", { style: { color: colors.regex.source } }, source), "/", flags);
+  return React58.createElement("span", { style: { whiteSpace: "nowrap", color: colors.regex.flags } }, "/", React58.createElement("span", { style: { color: colors.regex.source } }, source), "/", flags);
 }, "RegExpNode");
 var SymbolNode = /* @__PURE__ */ __name(({ description }) => {
   const colors = useThemeColors();
-  return React57.createElement("span", { style: { whiteSpace: "nowrap", color: colors.instance } }, "Symbol(", description && React57.createElement("span", { style: { color: colors.meta } }, '"', description, '"'), ")");
+  return React58.createElement("span", { style: { whiteSpace: "nowrap", color: colors.instance } }, "Symbol(", description && React58.createElement("span", { style: { color: colors.meta } }, '"', description, '"'), ")");
 }, "SymbolNode");
 var OtherNode = /* @__PURE__ */ __name(({ value: value2 }) => {
   const colors = useThemeColors();
-  return React57.createElement("span", { style: { color: colors.meta } }, stringify(value2));
+  return React58.createElement("span", { style: { color: colors.meta } }, stringify(value2));
 }, "OtherNode");
 var StepNode = /* @__PURE__ */ __name(({ label }) => {
   const colors = useThemeColors();
   const { typography: typography4 } = useTheme5();
-  return React57.createElement(
+  return React58.createElement(
     "span",
     {
       style: {
@@ -8184,22 +8226,22 @@ var MethodCall = /* @__PURE__ */ __name(({
     return null;
   }
   if (call.method === "step" && call.path?.length === 0) {
-    return React57.createElement(StepNode, { label: call.args[0] });
+    return React58.createElement(StepNode, { label: call.args[0] });
   }
   const path = call.path?.flatMap((elem, index) => {
     const callId = elem.__callId__;
     return [
-      callId ? React57.createElement(MethodCall, { key: `elem${index}`, call: callsById?.get(callId), callsById }) : React57.createElement("span", { key: `elem${index}` }, elem),
-      React57.createElement("wbr", { key: `wbr${index}` }),
-      React57.createElement("span", { key: `dot${index}` }, ".")
+      callId ? React58.createElement(MethodCall, { key: `elem${index}`, call: callsById?.get(callId), callsById }) : React58.createElement("span", { key: `elem${index}` }, elem),
+      React58.createElement("wbr", { key: `wbr${index}` }),
+      React58.createElement("span", { key: `dot${index}` }, ".")
     ];
   });
   const args = call.args?.flatMap((arg, index, array2) => {
-    const node = React57.createElement(Node2, { key: `node${index}`, value: arg, callsById });
-    return index < array2.length - 1 ? [node, React57.createElement("span", { key: `comma${index}` }, ",\xA0"), React57.createElement("wbr", { key: `wbr${index}` })] : [node];
+    const node = React58.createElement(Node2, { key: `node${index}`, value: arg, callsById });
+    return index < array2.length - 1 ? [node, React58.createElement("span", { key: `comma${index}` }, ",\xA0"), React58.createElement("wbr", { key: `wbr${index}` })] : [node];
   });
   const colors = useThemeColors();
-  return React57.createElement(React57.Fragment, null, React57.createElement("span", { style: { color: colors.base } }, path), React57.createElement("span", { style: { color: colors.method } }, call.method), React57.createElement("span", { style: { color: colors.base } }, "(", React57.createElement("wbr", null), args, React57.createElement("wbr", null), ")"));
+  return React58.createElement(React58.Fragment, null, React58.createElement("span", { style: { color: colors.base } }, path), React58.createElement("span", { style: { color: colors.method } }, call.method), React58.createElement("span", { style: { color: colors.base } }, "(", React58.createElement("wbr", null), args, React58.createElement("wbr", null), ")"));
 }, "MethodCall");
 
 // src/component-testing/components/MatcherResult.tsx
@@ -8229,15 +8271,15 @@ var StyledExpected = styled35.span(({ theme: theme3 }) => ({
 var StyledReceived = styled35.span(({ theme: theme3 }) => ({
   color: theme3.base === "light" ? theme3.color.negativeText : theme3.color.negative
 }));
-var Received = /* @__PURE__ */ __name(({ value: value2, parsed }) => parsed ? React58.createElement(Node2, { showObjectInspector: true, value: value2, style: { color: "#D43900" } }) : React58.createElement(StyledReceived, null, value2), "Received");
+var Received = /* @__PURE__ */ __name(({ value: value2, parsed }) => parsed ? React59.createElement(Node2, { showObjectInspector: true, value: value2, style: { color: "#D43900" } }) : React59.createElement(StyledReceived, null, value2), "Received");
 var Expected = /* @__PURE__ */ __name(({ value: value2, parsed }) => {
   if (parsed) {
     if (typeof value2 === "string" && value2.startsWith("called with")) {
-      return React58.createElement(React58.Fragment, null, value2);
+      return React59.createElement(React59.Fragment, null, value2);
     }
-    return React58.createElement(Node2, { showObjectInspector: true, value: value2, style: { color: "#16B242" } });
+    return React59.createElement(Node2, { showObjectInspector: true, value: value2, style: { color: "#16B242" } });
   }
-  return React58.createElement(StyledExpected, null, value2);
+  return React59.createElement(StyledExpected, null, value2);
 }, "Expected");
 var MatcherResult = /* @__PURE__ */ __name(({
   message,
@@ -8245,7 +8287,7 @@ var MatcherResult = /* @__PURE__ */ __name(({
 }) => {
   const filter = useAnsiToHtmlFilter();
   const lines = message.split("\n");
-  return React58.createElement(
+  return React59.createElement(
     "pre",
     {
       style: {
@@ -8266,65 +8308,65 @@ var MatcherResult = /* @__PURE__ */ __name(({
           if (expected) {
             return [
               "expect(",
-              React58.createElement(Received, { key: `received_${received}`, value: received }),
+              React59.createElement(Received, { key: `received_${received}`, value: received }),
               line.slice(remainderIndex, expectedIndex),
-              React58.createElement(Expected, { key: `expected_${expected}`, value: expected }),
+              React59.createElement(Expected, { key: `expected_${expected}`, value: expected }),
               line.slice(expectedIndex + expected.length),
-              React58.createElement("br", { key: `br${index}` })
+              React59.createElement("br", { key: `br${index}` })
             ];
           }
         }
       }
       if (line.match(/^\s*- /)) {
-        return [React58.createElement(Expected, { key: line + index, value: line }), React58.createElement("br", { key: `br${index}` })];
+        return [React59.createElement(Expected, { key: line + index, value: line }), React59.createElement("br", { key: `br${index}` })];
       }
       if (line.match(/^\s*\+ /) || line.match(/^Received: $/)) {
-        return [React58.createElement(Received, { key: line + index, value: line }), React58.createElement("br", { key: `br${index}` })];
+        return [React59.createElement(Received, { key: line + index, value: line }), React59.createElement("br", { key: `br${index}` })];
       }
       const [, assertionLabel, assertionValue] = line.match(/^(Expected|Received): (.*)$/) || [];
       if (assertionLabel && assertionValue) {
         return assertionLabel === "Expected" ? [
           "Expected: ",
-          React58.createElement(Expected, { key: line + index, value: parseValue(assertionValue), parsed: true }),
-          React58.createElement("br", { key: `br${index}` })
+          React59.createElement(Expected, { key: line + index, value: parseValue(assertionValue), parsed: true }),
+          React59.createElement("br", { key: `br${index}` })
         ] : [
           "Received: ",
-          React58.createElement(Received, { key: line + index, value: parseValue(assertionValue), parsed: true }),
-          React58.createElement("br", { key: `br${index}` })
+          React59.createElement(Received, { key: line + index, value: parseValue(assertionValue), parsed: true }),
+          React59.createElement("br", { key: `br${index}` })
         ];
       }
       const [, prefix, numberOfCalls] = line.match(/(Expected number|Received number|Number) of calls: (\d+)$/i) || [];
       if (prefix && numberOfCalls) {
         return [
           `${prefix} of calls: `,
-          React58.createElement(Node2, { key: line + index, value: Number(numberOfCalls) }),
-          React58.createElement("br", { key: `br${index}` })
+          React59.createElement(Node2, { key: line + index, value: Number(numberOfCalls) }),
+          React59.createElement("br", { key: `br${index}` })
         ];
       }
       const [, receivedValue] = line.match(/^Received has value: (.+)$/) || [];
       if (receivedValue) {
         return [
           "Received has value: ",
-          React58.createElement(Node2, { key: line + index, value: parseValue(receivedValue) }),
-          React58.createElement("br", { key: `br${index}` })
+          React59.createElement(Node2, { key: line + index, value: parseValue(receivedValue) }),
+          React59.createElement("br", { key: `br${index}` })
         ];
       }
       return [
-        React58.createElement(
+        React59.createElement(
           "span",
           {
             key: line + index,
             dangerouslySetInnerHTML: { __html: filter.toHtml(line) }
           }
         ),
-        React58.createElement("br", { key: `br${index}` })
+        React59.createElement("br", { key: `br${index}` })
       ];
     })
   );
 }, "MatcherResult");
 
 // src/component-testing/components/StatusIcon.tsx
-import React59 from "react";
+import React60 from "react";
 import { CheckIcon as CheckIcon2, CircleIcon, PlayIcon, StopAltIcon } from "@storybook/icons";
 import { styled as styled36, useTheme as useTheme6 } from "storybook/theming";
 var WarningContainer = styled36.div({
@@ -8338,16 +8380,16 @@ var StatusIcon = /* @__PURE__ */ __name(({ status }) => {
   const theme3 = useTheme6();
   switch (status) {
     case "done" /* DONE */: {
-      return React59.createElement(CheckIcon2, { color: theme3.color.positive, "data-testid": "icon-done" });
+      return React60.createElement(CheckIcon2, { color: theme3.color.positive, "data-testid": "icon-done" });
     }
     case "error" /* ERROR */: {
-      return React59.createElement(StopAltIcon, { color: theme3.color.negative, "data-testid": "icon-error" });
+      return React60.createElement(StopAltIcon, { color: theme3.color.negative, "data-testid": "icon-error" });
     }
     case "active" /* ACTIVE */: {
-      return React59.createElement(PlayIcon, { color: theme3.color.secondary, "data-testid": "icon-active" });
+      return React60.createElement(PlayIcon, { color: theme3.color.secondary, "data-testid": "icon-active" });
     }
     case "waiting" /* WAITING */: {
-      return React59.createElement(WarningContainer, { "data-testid": "icon-waiting" }, React59.createElement(CircleIcon, { color: curriedTransparentize$1(0.5, "#CCCCCC"), size: 6 }));
+      return React60.createElement(WarningContainer, { "data-testid": "icon-waiting" }, React60.createElement(CircleIcon, { color: curriedTransparentize$1(0.5, "#CCCCCC"), size: 6 }));
     }
     default: {
       return null;
@@ -8463,13 +8505,13 @@ var Exception = /* @__PURE__ */ __name(({ exception }) => {
     return null;
   }
   if (exception.callId === INTERNAL_RENDER_CALL_ID) {
-    return React60.createElement(RowMessage, null, React60.createElement("pre", null, React60.createElement(ErrorName, null, exception.name, ":"), " ", React60.createElement(ErrorMessage2, null, exception.message)), React60.createElement(ErrorExplainer, null, "The component failed to render properly. Automated component tests will not run until this is resolved. Check the full error message in Storybook\u2019s canvas to debug."));
+    return React61.createElement(RowMessage, null, React61.createElement("pre", null, React61.createElement(ErrorName, null, exception.name, ":"), " ", React61.createElement(ErrorMessage2, null, exception.message)), React61.createElement(ErrorExplainer, null, "The component failed to render properly. Automated component tests will not run until this is resolved. Check the full error message in Storybook\u2019s canvas to debug."));
   }
   if (isJestError(exception)) {
-    return React60.createElement(MatcherResult, { ...exception });
+    return React61.createElement(MatcherResult, { ...exception });
   }
   if (isChaiError(exception)) {
-    return React60.createElement(RowMessage, null, React60.createElement(
+    return React61.createElement(RowMessage, null, React61.createElement(
       MatcherResult,
       {
         message: `${exception.message}${exception.diff ? `
@@ -8477,11 +8519,11 @@ var Exception = /* @__PURE__ */ __name(({ exception }) => {
 ${exception.diff}` : ""}`,
         style: { padding: 0 }
       }
-    ), React60.createElement("p", null, "See the full stack trace in the browser console."));
+    ), React61.createElement("p", null, "See the full stack trace in the browser console."));
   }
   const paragraphs = exception.message.split("\n\n");
   const more = paragraphs.length > 1;
-  return React60.createElement(RowMessage, null, React60.createElement("pre", { dangerouslySetInnerHTML: { __html: filter.toHtml(paragraphs[0]) } }), more && React60.createElement("p", null, "See the full stack trace in the browser console."));
+  return React61.createElement(RowMessage, null, React61.createElement("pre", { dangerouslySetInnerHTML: { __html: filter.toHtml(paragraphs[0]) } }), more && React61.createElement("p", null, "See the full stack trace in the browser console."));
 }, "Exception");
 var Interaction = /* @__PURE__ */ __name(({
   call,
@@ -8494,7 +8536,7 @@ var Interaction = /* @__PURE__ */ __name(({
   toggleCollapsed,
   pausedAt
 }) => {
-  const [isHovered, setIsHovered] = React60.useState(false);
+  const [isHovered, setIsHovered] = React61.useState(false);
   const isInteractive = !controlStates.goto || !call.interceptable || !!call.ancestors?.length;
   if (isHidden) {
     return null;
@@ -8502,7 +8544,7 @@ var Interaction = /* @__PURE__ */ __name(({
   if (call.id === INTERNAL_RENDER_CALL_ID) {
     return null;
   }
-  return React60.createElement(RowContainer, { call, pausedAt }, React60.createElement(RowHeader, { isInteractive }, React60.createElement(
+  return React61.createElement(RowContainer, { call, pausedAt }, React61.createElement(RowHeader, { isInteractive }, React61.createElement(
     RowLabel,
     {
       "aria-label": "Interaction step",
@@ -8512,27 +8554,27 @@ var Interaction = /* @__PURE__ */ __name(({
       onMouseEnter: () => controlStates.goto && setIsHovered(true),
       onMouseLeave: () => controlStates.goto && setIsHovered(false)
     },
-    React60.createElement(StatusIcon, { status: isHovered ? "active" /* ACTIVE */ : call.status }),
-    React60.createElement(MethodCallWrapper, { style: { marginLeft: 6, marginBottom: 1 } }, React60.createElement(MethodCall, { call, callsById }))
-  ), React60.createElement(RowActions, null, (childCallIds?.length ?? 0) > 0 && React60.createElement(
+    React61.createElement(StatusIcon, { status: isHovered ? "active" /* ACTIVE */ : call.status }),
+    React61.createElement(MethodCallWrapper, { style: { marginLeft: 6, marginBottom: 1 } }, React61.createElement(MethodCall, { call, callsById }))
+  ), React61.createElement(RowActions, null, (childCallIds?.length ?? 0) > 0 && React61.createElement(
     WithTooltip2,
     {
       hasChrome: false,
-      tooltip: React60.createElement(Note, { note: `${isCollapsed ? "Show" : "Hide"} interactions` })
+      tooltip: React61.createElement(Note, { note: `${isCollapsed ? "Show" : "Hide"} interactions` })
     },
-    React60.createElement(
+    React61.createElement(
       StyledIconButton,
       {
         onClick: toggleCollapsed,
         "aria-label": isCollapsed ? "Expand interaction" : "Collapse interaction"
       },
-      isCollapsed ? React60.createElement(ChevronDownIcon3, null) : React60.createElement(ChevronUpIcon2, null)
+      isCollapsed ? React61.createElement(ChevronDownIcon3, null) : React61.createElement(ChevronUpIcon2, null)
     )
-  ))), call.status === "error" /* ERROR */ && call.exception?.callId === call.id && React60.createElement(Exception, { exception: call.exception }));
+  ))), call.status === "error" /* ERROR */ && call.exception?.callId === call.id && React61.createElement(Exception, { exception: call.exception }));
 }, "Interaction");
 
 // src/component-testing/components/Subnav.tsx
-import React63 from "react";
+import React64 from "react";
 import {
   Bar as Bar3,
   Button as Button6,
@@ -8552,7 +8594,7 @@ import {
 import { styled as styled39, useTheme as useTheme7 } from "storybook/theming";
 
 // src/component-testing/components/StatusBadge.tsx
-import React61 from "react";
+import React63 from "react";
 import { styled as styled38, typography as typography3 } from "storybook/theming";
 var StatusColorMapping = {
   rendering: "mediumdark",
@@ -8587,7 +8629,7 @@ var StyledBadge = styled38.div(({ theme: theme3, status }) => {
 });
 var StatusBadge = /* @__PURE__ */ __name(({ status }) => {
   const badgeText = StatusTextMapping[status];
-  return React61.createElement(StyledBadge, { "aria-label": "Status of the test run", status }, badgeText);
+  return React63.createElement(StyledBadge, { "aria-label": "Status of the test run", status }, badgeText);
 }, "StatusBadge");
 
 // src/component-testing/components/Subnav.tsx
@@ -8668,46 +8710,46 @@ var Subnav = /* @__PURE__ */ __name(({
 }) => {
   const buttonText = status === "errored" ? "Scroll to error" : "Scroll to end";
   const theme3 = useTheme7();
-  return React63.createElement(SubnavWrapper, null, React63.createElement(Bar3, { backgroundColor: theme3.background.app }, React63.createElement(StyledSubnav, { "aria-label": "Component tests toolbar" }, React63.createElement(Group, null, React63.createElement(StatusBadge, { status }), React63.createElement(JumpToEndButton, { onClick: onScrollToEnd, disabled: !onScrollToEnd }, buttonText), React63.createElement(StyledSeparator, null), React63.createElement(WithTooltip3, { trigger: "hover", hasChrome: false, tooltip: React63.createElement(Note2, { note: "Go to start" }) }, React63.createElement(
+  return React64.createElement(SubnavWrapper, null, React64.createElement(Bar3, { backgroundColor: theme3.background.app }, React64.createElement(StyledSubnav, { "aria-label": "Component tests toolbar" }, React64.createElement(Group, null, React64.createElement(StatusBadge, { status }), React64.createElement(JumpToEndButton, { onClick: onScrollToEnd, disabled: !onScrollToEnd }, buttonText), React64.createElement(StyledSeparator, null), React64.createElement(WithTooltip3, { trigger: "hover", hasChrome: false, tooltip: React64.createElement(Note2, { note: "Go to start" }) }, React64.createElement(
     RewindButton,
     {
       "aria-label": "Go to start",
       onClick: controls.start,
       disabled: !controlStates.start
     },
-    React63.createElement(RewindIcon, null)
-  )), React63.createElement(WithTooltip3, { trigger: "hover", hasChrome: false, tooltip: React63.createElement(Note2, { note: "Go back" }) }, React63.createElement(
+    React64.createElement(RewindIcon, null)
+  )), React64.createElement(WithTooltip3, { trigger: "hover", hasChrome: false, tooltip: React64.createElement(Note2, { note: "Go back" }) }, React64.createElement(
     StyledIconButton2,
     {
       "aria-label": "Go back",
       onClick: controls.back,
       disabled: !controlStates.back
     },
-    React63.createElement(PlayBackIcon, null)
-  )), React63.createElement(WithTooltip3, { trigger: "hover", hasChrome: false, tooltip: React63.createElement(Note2, { note: "Go forward" }) }, React63.createElement(
+    React64.createElement(PlayBackIcon, null)
+  )), React64.createElement(WithTooltip3, { trigger: "hover", hasChrome: false, tooltip: React64.createElement(Note2, { note: "Go forward" }) }, React64.createElement(
     StyledIconButton2,
     {
       "aria-label": "Go forward",
       onClick: controls.next,
       disabled: !controlStates.next
     },
-    React63.createElement(PlayNextIcon, null)
-  )), React63.createElement(WithTooltip3, { trigger: "hover", hasChrome: false, tooltip: React63.createElement(Note2, { note: "Go to end" }) }, React63.createElement(
+    React64.createElement(PlayNextIcon, null)
+  )), React64.createElement(WithTooltip3, { trigger: "hover", hasChrome: false, tooltip: React64.createElement(Note2, { note: "Go to end" }) }, React64.createElement(
     StyledIconButton2,
     {
       "aria-label": "Go to end",
       onClick: controls.end,
       disabled: !controlStates.end
     },
-    React63.createElement(FastForwardIcon, null)
-  )), React63.createElement(WithTooltip3, { trigger: "hover", hasChrome: false, tooltip: React63.createElement(Note2, { note: "Rerun" }) }, React63.createElement(RerunButton, { "aria-label": "Rerun", onClick: controls.rerun }, React63.createElement(SyncIcon, null)))), (importPath || storyFileName) && React63.createElement(Group, null, canOpenInEditor ? React63.createElement(
+    React64.createElement(FastForwardIcon, null)
+  )), React64.createElement(WithTooltip3, { trigger: "hover", hasChrome: false, tooltip: React64.createElement(Note2, { note: "Rerun" }) }, React64.createElement(RerunButton, { "aria-label": "Rerun", onClick: controls.rerun }, React64.createElement(SyncIcon, null)))), (importPath || storyFileName) && React64.createElement(Group, null, canOpenInEditor ? React64.createElement(
     WithTooltip3,
     {
       trigger: "hover",
       hasChrome: false,
-      tooltip: React63.createElement(Note2, { note: "Open in editor" })
+      tooltip: React64.createElement(Note2, { note: "Open in editor" })
     },
-    React63.createElement(
+    React64.createElement(
       StyledLocation,
       {
         "aria-label": "Open in editor",
@@ -8719,13 +8761,13 @@ var Subnav = /* @__PURE__ */ __name(({
       },
       storyFileName
     )
-  ) : React63.createElement(StyledLocation, { isText: true }, storyFileName)))));
+  ) : React64.createElement(StyledLocation, { isText: true }, storyFileName)))));
 }, "Subnav");
 
 // src/component-testing/components/TestDiscrepancyMessage.tsx
-import React64 from "react";
+import React65 from "react";
 import { Link as Link6 } from "storybook/internal/components";
-import { useStorybookApi as useStorybookApi4 } from "storybook/manager-api";
+import { useStorybookApi as useStorybookApi5 } from "storybook/manager-api";
 import { styled as styled40 } from "storybook/theming";
 var Wrapper12 = styled40.div(({ theme: { color: color2, typography: typography4, background } }) => ({
   textAlign: "start",
@@ -8749,14 +8791,14 @@ var Wrapper12 = styled40.div(({ theme: { color: color2, typography: typography4,
   }
 }));
 var TestDiscrepancyMessage = /* @__PURE__ */ __name(({ browserTestStatus }) => {
-  const api = useStorybookApi4();
+  const api = useStorybookApi5();
   const docsUrl = api.getDocsUrl({
     subpath: DOCUMENTATION_DISCREPANCY_LINK,
     versioned: true,
     renderer: true
   });
   const [passed, failed] = browserTestStatus === "error" /* ERROR */ ? ["the CLI", "this browser"] : ["this browser", "the CLI"];
-  return React64.createElement(Wrapper12, null, "This interaction test passed in ", passed, ", but the tests failed in ", failed, ".", " ", React64.createElement(Link6, { href: docsUrl, target: "_blank", withArrow: true }, "Learn what could cause this"));
+  return React65.createElement(Wrapper12, null, "This interaction test passed in ", passed, ", but the tests failed in ", failed, ".", " ", React65.createElement(Link6, { href: docsUrl, target: "_blank", withArrow: true }, "Learn what could cause this"));
 }, "TestDiscrepancyMessage");
 
 // src/component-testing/components/InteractionsPanel.tsx
@@ -8797,7 +8839,7 @@ var CaughtExceptionStack = styled41.pre(({ theme: theme3 }) => ({
   },
   fontSize: theme3.typography.size.s1 - 1
 }));
-var InteractionsPanel = React65.memo(
+var InteractionsPanel = React66.memo(
   /* @__PURE__ */ __name(function InteractionsPanel2({
     storyUrl,
     status,
@@ -8820,7 +8862,7 @@ var InteractionsPanel = React65.memo(
   }) {
     const filter = useAnsiToHtmlFilter();
     const hasRealInteractions = interactions.some((i2) => i2.id !== INTERNAL_RENDER_CALL_ID);
-    return React65.createElement(Container3, null, hasResultMismatch && React65.createElement(TestDiscrepancyMessage, { browserTestStatus }), controlStates.detached && (hasRealInteractions || hasException) && React65.createElement(DetachedDebuggerMessage, { storyUrl }), React65.createElement(
+    return React66.createElement(Container3, null, hasResultMismatch && React66.createElement(TestDiscrepancyMessage, { browserTestStatus }), controlStates.detached && (hasRealInteractions || hasException) && React66.createElement(DetachedDebuggerMessage, { storyUrl }), React66.createElement(
       Subnav,
       {
         controls,
@@ -8832,7 +8874,7 @@ var InteractionsPanel = React65.memo(
         canOpenInEditor,
         api
       }
-    ), React65.createElement("div", { "aria-label": "Interactions list" }, interactions.map((call) => React65.createElement(
+    ), React66.createElement("div", { "aria-label": "Interactions list" }, interactions.map((call) => React66.createElement(
       Interaction,
       {
         key: call.id,
@@ -8846,7 +8888,7 @@ var InteractionsPanel = React65.memo(
         toggleCollapsed: call.toggleCollapsed,
         pausedAt
       }
-    ))), caughtException && !isTestAssertionError(caughtException) && React65.createElement(CaughtException, null, React65.createElement(CaughtExceptionTitle, null, "Caught exception in ", React65.createElement(CaughtExceptionCode, null, "play"), " function"), React65.createElement(
+    ))), caughtException && !isTestAssertionError(caughtException) && React66.createElement(CaughtException, null, React66.createElement(CaughtExceptionTitle, null, "Caught exception in ", React66.createElement(CaughtExceptionCode, null, "play"), " function"), React66.createElement(
       CaughtExceptionStack,
       {
         "data-chromatic": "ignore",
@@ -8854,7 +8896,7 @@ var InteractionsPanel = React65.memo(
           __html: filter.toHtml(printSerializedError(caughtException))
         }
       }
-    )), unhandledErrors && React65.createElement(CaughtException, null, React65.createElement(CaughtExceptionTitle, null, "Unhandled Errors"), React65.createElement(CaughtExceptionDescription, null, "Found ", unhandledErrors.length, " unhandled error", unhandledErrors.length > 1 ? "s" : "", " ", "while running the play function. This might cause false positive assertions. Resolve unhandled errors or ignore unhandled errors with setting the", React65.createElement(CaughtExceptionCode, null, "test.dangerouslyIgnoreUnhandledErrors"), " ", "parameter to ", React65.createElement(CaughtExceptionCode, null, "true"), "."), unhandledErrors.map((error, i2) => React65.createElement(CaughtExceptionStack, { key: i2, "data-chromatic": "ignore" }, printSerializedError(error)))), React65.createElement("div", { ref: endRef }), status === "completed" && !caughtException && !hasRealInteractions && React65.createElement(Empty2, null));
+    )), unhandledErrors && React66.createElement(CaughtException, null, React66.createElement(CaughtExceptionTitle, null, "Unhandled Errors"), React66.createElement(CaughtExceptionDescription, null, "Found ", unhandledErrors.length, " unhandled error", unhandledErrors.length > 1 ? "s" : "", " ", "while running the play function. This might cause false positive assertions. Resolve unhandled errors or ignore unhandled errors with setting the", React66.createElement(CaughtExceptionCode, null, "test.dangerouslyIgnoreUnhandledErrors"), " ", "parameter to ", React66.createElement(CaughtExceptionCode, null, "true"), "."), unhandledErrors.map((error, i2) => React66.createElement(CaughtExceptionStack, { key: i2, "data-chromatic": "ignore" }, printSerializedError(error)))), React66.createElement("div", { ref: endRef }), status === "completed" && !caughtException && !hasRealInteractions && React66.createElement(Empty2, null));
   }, "InteractionsPanel")
 );
 function printSerializedError(error) {
@@ -8973,7 +9015,7 @@ var Panel = memo4(
       };
     });
     const state = useStorybookState2();
-    const api = useStorybookApi5();
+    const api = useStorybookApi6();
     const data = api.getData(state.storyId, state.refId);
     const importPath = data?.importPath;
     const canOpenInEditor = global2.CONFIG_TYPE === "DEVELOPMENT" && !state.refId;
@@ -8987,9 +9029,9 @@ var Panel = memo4(
       caughtException: void 0,
       unhandledErrors: void 0
     });
-    const [scrollTarget, setScrollTarget] = useState21(void 0);
-    const [collapsed, setCollapsed] = useState21(/* @__PURE__ */ new Set());
-    const [hasResultMismatch, setResultMismatch] = useState21(false);
+    const [scrollTarget, setScrollTarget] = useState23(void 0);
+    const [collapsed, setCollapsed] = useState23(/* @__PURE__ */ new Set());
+    const [hasResultMismatch, setResultMismatch] = useState23(false);
     const {
       status = "rendering",
       controlStates = INITIAL_CONTROL_STATES,
@@ -9004,7 +9046,7 @@ var Panel = memo4(
     );
     const setCall = /* @__PURE__ */ __name(({ status: status2, ...call }) => calls.current.set(call.id, call), "setCall");
     const endRef = useRef7();
-    useEffect17(() => {
+    useEffect18(() => {
       let observer;
       if (global2.IntersectionObserver) {
         observer = new global2.IntersectionObserver(
@@ -9017,6 +9059,7 @@ var Panel = memo4(
       }
       return () => observer?.disconnect();
     }, []);
+    const lastStoryId = useRef7(void 0);
     const lastRenderId = useRef7(0);
     const emit = useChannel2(
       {
@@ -9031,9 +9074,10 @@ var Panel = memo4(
           );
         },
         [STORY_RENDER_PHASE_CHANGED]: (event) => {
-          if (event.newPhase === "preparing" || event.newPhase === "loading") {
+          if (lastStoryId.current === event.storyId && ["preparing", "loading"].includes(event.newPhase)) {
             return;
           }
+          lastStoryId.current = event.storyId;
           lastRenderId.current = Math.max(lastRenderId.current, event.renderId || 0);
           if (lastRenderId.current !== event.renderId) {
             return;
@@ -9089,7 +9133,7 @@ var Panel = memo4(
       },
       [collapsed]
     );
-    useEffect17(() => {
+    useEffect18(() => {
       set(
         (state2) => getPanelState(state2, { log: log.current, calls: calls.current, collapsed, setCollapsed })
       );
@@ -9117,7 +9161,7 @@ var Panel = memo4(
       }
       return status === "playing" ? "active" /* ACTIVE */ : void 0;
     }, [status, interactions, hasException]);
-    useEffect17(() => {
+    useEffect18(() => {
       const isMismatch = browserTestStatus && statusValue && statusValue !== "status-value:pending" && statusValue !== storyStatusMap[browserTestStatus];
       if (isMismatch) {
         const timeout = setTimeout(
@@ -9142,7 +9186,7 @@ var Panel = memo4(
         setResultMismatch(false);
       }
     }, [emit, browserTestStatus, statusValue, storyId, testRunId]);
-    return React66.createElement(Fragment3, { key: "component-tests" }, React66.createElement(
+    return React67.createElement(Fragment3, { key: "component-tests" }, React67.createElement(
       InteractionsPanel,
       {
         storyUrl,
@@ -9169,15 +9213,15 @@ var Panel = memo4(
 );
 
 // src/component-testing/components/PanelTitle.tsx
-import React67 from "react";
+import React68 from "react";
 import { Badge as Badge3 } from "storybook/internal/components";
-import { useAddonState as useAddonState3, useStorybookApi as useStorybookApi6 } from "storybook/manager-api";
+import { useAddonState as useAddonState3, useStorybookApi as useStorybookApi7 } from "storybook/manager-api";
 function PanelTitle() {
-  const api = useStorybookApi6();
+  const api = useStorybookApi7();
   const selectedPanel = api.getSelectedPanel();
   const [addonState = {}] = useAddonState3(ADDON_ID7);
   const { status, hasException, interactionsCount } = addonState;
-  return React67.createElement("div", { style: { display: "flex", alignItems: "center", gap: 6 } }, React67.createElement("span", null, "Interactions"), interactionsCount && status !== "errored" && !hasException ? React67.createElement(Badge3, { compact: true, status: selectedPanel === PANEL_ID2 ? "active" : "neutral" }, interactionsCount) : null, status === "errored" || hasException ? React67.createElement(StatusIcon, { status: "error" /* ERROR */ }) : null);
+  return React68.createElement("div", { style: { display: "flex", alignItems: "center", gap: 6 } }, React68.createElement("span", null, "Interactions"), interactionsCount && status !== "errored" && !hasException ? React68.createElement(Badge3, { compact: true, status: selectedPanel === PANEL_ID2 ? "active" : "neutral" }, interactionsCount) : null, status === "errored" || hasException ? React68.createElement(StatusIcon, { status: "error" /* ERROR */ }) : null);
 }
 __name(PanelTitle, "PanelTitle");
 
@@ -9196,28 +9240,28 @@ var manager_default3 = addons3.register(ADDON_ID7, () => {
     }, "filter");
     addons3.add(PANEL_ID2, {
       type: types3.PANEL,
-      title: /* @__PURE__ */ __name(() => React68.createElement(PanelTitle, null), "title"),
+      title: /* @__PURE__ */ __name(() => React69.createElement(PanelTitle, null), "title"),
       match: /* @__PURE__ */ __name(({ viewMode }) => viewMode === "story", "match"),
       render: /* @__PURE__ */ __name(({ active }) => {
-        return React68.createElement(AddonPanel2, { active: !!active }, React68.createElement(Consumer, { filter }, (props) => React68.createElement(Panel, { ...props })));
+        return React69.createElement(AddonPanel2, { active: !!active }, React69.createElement(Consumer, { filter }, (props) => React69.createElement(Panel, { ...props })));
       }, "render")
     });
   }
 });
 
 // src/backgrounds/manager.tsx
-import React70 from "react";
+import React71 from "react";
 import { addons as addons4, types as types4 } from "storybook/manager-api";
 
 // src/backgrounds/components/Tool.tsx
-import React69, { Fragment as Fragment4, memo as memo5, useCallback as useCallback8, useState as useState23 } from "react";
+import React70, { Fragment as Fragment4, memo as memo5, useCallback as useCallback8, useState as useState24 } from "react";
 import { IconButton as IconButton7, TooltipLinkList, WithTooltip as WithTooltip4 } from "storybook/internal/components";
 import { CircleIcon as CircleIcon2, GridIcon, PhotoIcon, RefreshIcon } from "@storybook/icons";
 import { useGlobals as useGlobals2, useParameter as useParameter3 } from "storybook/manager-api";
 var BackgroundTool = memo5(/* @__PURE__ */ __name(function BackgroundSelector() {
   const config = useParameter3(PARAM_KEY3);
   const [globals, updateGlobals, storyGlobals] = useGlobals2();
-  const [isTooltipVisible, setIsTooltipVisible] = useState23(false);
+  const [isTooltipVisible, setIsTooltipVisible] = useState24(false);
   const { options = DEFAULT_BACKGROUNDS, disable = true } = config || {};
   if (disable) {
     return null;
@@ -9228,7 +9272,7 @@ var BackgroundTool = memo5(/* @__PURE__ */ __name(function BackgroundSelector()
   const item = options[backgroundName];
   const isLocked = !!storyGlobals?.[PARAM_KEY3];
   const length2 = Object.keys(options).length;
-  return React69.createElement(
+  return React70.createElement(
     Pure,
     {
       ...{
@@ -9265,7 +9309,7 @@ var Pure = memo5(/* @__PURE__ */ __name(function PureTool(props) {
     },
     [updateGlobals]
   );
-  return React69.createElement(Fragment4, null, React69.createElement(
+  return React70.createElement(Fragment4, null, React70.createElement(
     IconButton7,
     {
       key: "grid",
@@ -9274,15 +9318,15 @@ var Pure = memo5(/* @__PURE__ */ __name(function PureTool(props) {
       title: "Apply a grid to the preview",
       onClick: () => update({ value: backgroundName, grid: !isGrid })
     },
-    React69.createElement(GridIcon, null)
-  ), length2 > 0 ? React69.createElement(
+    React70.createElement(GridIcon, null)
+  ), length2 > 0 ? React70.createElement(
     WithTooltip4,
     {
       key: "background",
       placement: "top",
       closeOnOutsideClick: true,
       tooltip: ({ onHide }) => {
-        return React69.createElement(
+        return React70.createElement(
           TooltipLinkList,
           {
             links: [
@@ -9290,7 +9334,7 @@ var Pure = memo5(/* @__PURE__ */ __name(function PureTool(props) {
                 {
                   id: "reset",
                   title: "Reset background",
-                  icon: React69.createElement(RefreshIcon, null),
+                  icon: React70.createElement(RefreshIcon, null),
                   onClick: /* @__PURE__ */ __name(() => {
                     update(void 0);
                     onHide();
@@ -9300,7 +9344,7 @@ var Pure = memo5(/* @__PURE__ */ __name(function PureTool(props) {
               ...Object.entries(backgroundMap).map(([k2, value2]) => ({
                 id: k2,
                 title: value2.name,
-                icon: React69.createElement(CircleIcon2, { color: value2?.value || "grey" }),
+                icon: React70.createElement(CircleIcon2, { color: value2?.value || "grey" }),
                 active: k2 === backgroundName,
                 onClick: /* @__PURE__ */ __name(() => {
                   update({ value: k2, grid: isGrid });
@@ -9313,7 +9357,7 @@ var Pure = memo5(/* @__PURE__ */ __name(function PureTool(props) {
       },
       onVisibleChange: setIsTooltipVisible
     },
-    React69.createElement(
+    React70.createElement(
       IconButton7,
       {
         disabled: isLocked,
@@ -9321,7 +9365,7 @@ var Pure = memo5(/* @__PURE__ */ __name(function PureTool(props) {
         title: "Change the background of the preview",
         active: !!item || isTooltipVisible
       },
-      React69.createElement(PhotoIcon, null)
+      React70.createElement(PhotoIcon, null)
     )
   ) : null);
 }, "PureTool"));
@@ -9333,31 +9377,31 @@ var manager_default4 = addons4.register(ADDON_ID3, () => {
       title: "Backgrounds",
       type: types4.TOOL,
       match: /* @__PURE__ */ __name(({ viewMode, tabId }) => !!(viewMode && viewMode.match(/^(story|docs)$/)) && !tabId, "match"),
-      render: /* @__PURE__ */ __name(() => React70.createElement(BackgroundTool, null), "render")
+      render: /* @__PURE__ */ __name(() => React71.createElement(BackgroundTool, null), "render")
     });
   }
 });
 
 // src/measure/manager.tsx
-import React73 from "react";
+import React74 from "react";
 import { addons as addons5, types as types5 } from "storybook/manager-api";
 
 // src/measure/Tool.tsx
-import React71, { useCallback as useCallback9, useEffect as useEffect18 } from "react";
+import React73, { useCallback as useCallback9, useEffect as useEffect19 } from "react";
 import { IconButton as IconButton8 } from "storybook/internal/components";
 import { RulerIcon } from "@storybook/icons";
-import { useGlobals as useGlobals3, useStorybookApi as useStorybookApi7 } from "storybook/manager-api";
+import { useGlobals as useGlobals3, useStorybookApi as useStorybookApi8 } from "storybook/manager-api";
 var Tool = /* @__PURE__ */ __name(() => {
   const [globals, updateGlobals] = useGlobals3();
   const { measureEnabled } = globals || {};
-  const api = useStorybookApi7();
+  const api = useStorybookApi8();
   const toggleMeasure = useCallback9(
     () => updateGlobals({
       measureEnabled: !measureEnabled
     }),
     [updateGlobals, measureEnabled]
   );
-  useEffect18(() => {
+  useEffect19(() => {
     api.setAddonShortcut(ADDON_ID4, {
       label: "Toggle Measure",
       defaultShortcut: ["M"],
@@ -9366,7 +9410,7 @@ var Tool = /* @__PURE__ */ __name(() => {
       action: toggleMeasure
     });
   }, [toggleMeasure, api]);
-  return React71.createElement(
+  return React73.createElement(
     IconButton8,
     {
       key: TOOL_ID2,
@@ -9374,7 +9418,7 @@ var Tool = /* @__PURE__ */ __name(() => {
       title: "Enable measure",
       onClick: toggleMeasure
     },
-    React71.createElement(RulerIcon, null)
+    React73.createElement(RulerIcon, null)
   );
 }, "Tool");
 
@@ -9385,23 +9429,23 @@ var manager_default5 = addons5.register(ADDON_ID4, () => {
       type: types5.TOOL,
       title: "Measure",
       match: /* @__PURE__ */ __name(({ viewMode, tabId }) => viewMode === "story" && !tabId, "match"),
-      render: /* @__PURE__ */ __name(() => React73.createElement(Tool, null), "render")
+      render: /* @__PURE__ */ __name(() => React74.createElement(Tool, null), "render")
     });
   }
 });
 
 // src/outline/manager.tsx
-import React75 from "react";
+import React76 from "react";
 import { addons as addons6, types as types6 } from "storybook/manager-api";
 
 // src/outline/OutlineSelector.tsx
-import React74, { memo as memo6, useCallback as useCallback10, useEffect as useEffect19 } from "react";
+import React75, { memo as memo6, useCallback as useCallback10, useEffect as useEffect20 } from "react";
 import { IconButton as IconButton9 } from "storybook/internal/components";
 import { OutlineIcon } from "@storybook/icons";
-import { useGlobals as useGlobals4, useStorybookApi as useStorybookApi8 } from "storybook/manager-api";
+import { useGlobals as useGlobals4, useStorybookApi as useStorybookApi9 } from "storybook/manager-api";
 var OutlineSelector = memo6(/* @__PURE__ */ __name(function OutlineSelector2() {
   const [globals, updateGlobals] = useGlobals4();
-  const api = useStorybookApi8();
+  const api = useStorybookApi9();
   const isActive = [true, "true"].includes(globals[PARAM_KEY4]);
   const toggleOutline = useCallback10(
     () => updateGlobals({
@@ -9409,7 +9453,7 @@ var OutlineSelector = memo6(/* @__PURE__ */ __name(function OutlineSelector2() {
     }),
     [isActive]
   );
-  useEffect19(() => {
+  useEffect20(() => {
     api.setAddonShortcut(ADDON_ID5, {
       label: "Toggle Outline",
       defaultShortcut: ["alt", "O"],
@@ -9418,7 +9462,7 @@ var OutlineSelector = memo6(/* @__PURE__ */ __name(function OutlineSelector2() {
       action: toggleOutline
     });
   }, [toggleOutline, api]);
-  return React74.createElement(
+  return React75.createElement(
     IconButton9,
     {
       key: "outline",
@@ -9426,7 +9470,7 @@ var OutlineSelector = memo6(/* @__PURE__ */ __name(function OutlineSelector2() {
       title: "Apply outlines to the preview",
       onClick: toggleOutline
     },
-    React74.createElement(OutlineIcon, null)
+    React75.createElement(OutlineIcon, null)
   );
 }, "OutlineSelector"));
 
@@ -9437,17 +9481,17 @@ var manager_default6 = addons6.register(ADDON_ID5, () => {
       title: "Outline",
       type: types6.TOOL,
       match: /* @__PURE__ */ __name(({ viewMode, tabId }) => !!(viewMode && viewMode.match(/^(story|docs)$/)) && !tabId, "match"),
-      render: /* @__PURE__ */ __name(() => React75.createElement(OutlineSelector, null), "render")
+      render: /* @__PURE__ */ __name(() => React76.createElement(OutlineSelector, null), "render")
     });
   }
 });
 
 // src/viewport/manager.tsx
-import * as React78 from "react";
+import * as React79 from "react";
 import { addons as addons7, types as types7 } from "storybook/manager-api";
 
 // src/viewport/components/Tool.tsx
-import React77, { Fragment as Fragment6, useCallback as useCallback11, useEffect as useEffect20, useState as useState24 } from "react";
+import React78, { Fragment as Fragment6, useCallback as useCallback11, useEffect as useEffect21, useState as useState25 } from "react";
 import { IconButton as IconButton11, TooltipLinkList as TooltipLinkList2, WithTooltip as WithTooltip5 } from "storybook/internal/components";
 import { GrowIcon, RefreshIcon as RefreshIcon2, TransferIcon } from "@storybook/icons";
 import { useGlobals as useGlobals5, useParameter as useParameter4 } from "storybook/manager-api";
@@ -9497,7 +9541,7 @@ var registerShortcuts = /* @__PURE__ */ __name(async (api, viewport, updateGloba
 }, "registerShortcuts");
 
 // src/viewport/utils.tsx
-import React76, { Fragment as Fragment5 } from "react";
+import React77, { Fragment as Fragment5 } from "react";
 import { IconButton as IconButton10 } from "storybook/internal/components";
 import { BrowserIcon, MobileIcon, TabletIcon } from "@storybook/icons";
 import { styled as styled42 } from "storybook/theming";
@@ -9527,26 +9571,26 @@ var IconButtonLabel = styled42.div(({ theme: theme3 }) => ({
   marginLeft: 10
 }));
 var iconsMap = {
-  desktop: React76.createElement(BrowserIcon, null),
-  mobile: React76.createElement(MobileIcon, null),
-  tablet: React76.createElement(TabletIcon, null),
-  other: React76.createElement(Fragment5, null)
+  desktop: React77.createElement(BrowserIcon, null),
+  mobile: React77.createElement(MobileIcon, null),
+  tablet: React77.createElement(TabletIcon, null),
+  other: React77.createElement(Fragment5, null)
 };
 
 // src/viewport/components/Tool.tsx
 var ViewportTool = /* @__PURE__ */ __name(({ api }) => {
   const config = useParameter4(PARAM_KEY2);
   const [globals, updateGlobals, storyGlobals] = useGlobals5();
-  const [isTooltipVisible, setIsTooltipVisible] = useState24(false);
+  const [isTooltipVisible, setIsTooltipVisible] = useState25(false);
   const { options = MINIMAL_VIEWPORTS, disable } = config || {};
   const data = globals?.[PARAM_KEY2] || {};
   const viewportName = typeof data === "string" ? data : data.value;
-  const isRotated = typeof data === "string" ? false : data.isRotated;
+  const isRotated = typeof data === "string" ? false : !!data.isRotated;
   const item = options[viewportName] || responsiveViewport;
   const isActive = isTooltipVisible || item !== responsiveViewport;
   const isLocked = PARAM_KEY2 in storyGlobals;
   const length2 = Object.keys(options).length;
-  useEffect20(() => {
+  useEffect21(() => {
     registerShortcuts(api, viewportName, updateGlobals, Object.keys(options));
   }, [options, viewportName, updateGlobals, api]);
   if (item.styles === null || !options || length2 < 1) {
@@ -9563,7 +9607,7 @@ var ViewportTool = /* @__PURE__ */ __name(({ api }) => {
   if (disable) {
     return null;
   }
-  return React77.createElement(
+  return React78.createElement(
     Pure2,
     {
       ...{
@@ -9581,7 +9625,7 @@ var ViewportTool = /* @__PURE__ */ __name(({ api }) => {
     }
   );
 }, "ViewportTool");
-var Pure2 = React77.memo(/* @__PURE__ */ __name(function PureTool2(props) {
+var Pure2 = React78.memo(/* @__PURE__ */ __name(function PureTool2(props) {
   const {
     item,
     viewportMap,
@@ -9598,11 +9642,11 @@ var Pure2 = React77.memo(/* @__PURE__ */ __name(function PureTool2(props) {
     (input) => updateGlobals({ [PARAM_KEY2]: input }),
     [updateGlobals]
   );
-  return React77.createElement(Fragment6, null, React77.createElement(
+  return React78.createElement(Fragment6, null, React78.createElement(
     WithTooltip5,
     {
       placement: "bottom",
-      tooltip: ({ onHide }) => React77.createElement(
+      tooltip: ({ onHide }) => React78.createElement(
         TooltipLinkList2,
         {
           links: [
@@ -9610,7 +9654,7 @@ var Pure2 = React77.memo(/* @__PURE__ */ __name(function PureTool2(props) {
               {
                 id: "reset",
                 title: "Reset viewport",
-                icon: React77.createElement(RefreshIcon2, null),
+                icon: React78.createElement(RefreshIcon2, null),
                 onClick: /* @__PURE__ */ __name(() => {
                   update(void 0);
                   onHide();
@@ -9633,7 +9677,7 @@ var Pure2 = React77.memo(/* @__PURE__ */ __name(function PureTool2(props) {
       closeOnOutsideClick: true,
       onVisibleChange: setIsTooltipVisible
     },
-    React77.createElement(
+    React78.createElement(
       IconButtonWithLabel,
       {
         disabled: isLocked,
@@ -9644,17 +9688,17 @@ var Pure2 = React77.memo(/* @__PURE__ */ __name(function PureTool2(props) {
           update({ value: void 0, isRotated: false });
         }
       },
-      React77.createElement(GrowIcon, null),
-      item !== responsiveViewport ? React77.createElement(IconButtonLabel, null, item.name, " ", isRotated ? `(L)` : `(P)`) : null
+      React78.createElement(GrowIcon, null),
+      item !== responsiveViewport ? React78.createElement(IconButtonLabel, null, item.name, " ", isRotated ? `(L)` : `(P)`) : null
     )
-  ), React77.createElement(
+  ), React78.createElement(
     Global,
     {
       styles: {
         [`iframe[data-is-storybook="true"]`]: { width, height }
       }
     }
-  ), item !== responsiveViewport ? React77.createElement(ActiveViewportSize, null, React77.createElement(ActiveViewportLabel, { title: "Viewport width" }, width.replace("px", "")), !isLocked ? React77.createElement(
+  ), item !== responsiveViewport ? React78.createElement(ActiveViewportSize, null, React78.createElement(ActiveViewportLabel, { title: "Viewport width" }, width.replace("px", "")), !isLocked ? React78.createElement(
     IconButton11,
     {
       key: "viewport-rotate",
@@ -9663,8 +9707,8 @@ var Pure2 = React77.memo(/* @__PURE__ */ __name(function PureTool2(props) {
         update({ value: viewportName, isRotated: !isRotated });
       }
     },
-    React77.createElement(TransferIcon, null)
-  ) : "/", React77.createElement(ActiveViewportLabel, { title: "Viewport height" }, height.replace("px", ""))) : null);
+    React78.createElement(TransferIcon, null)
+  ) : "/", React78.createElement(ActiveViewportLabel, { title: "Viewport height" }, height.replace("px", ""))) : null);
 }, "PureTool"));
 
 // src/viewport/manager.tsx
@@ -9674,7 +9718,7 @@ var manager_default7 = addons7.register(ADDON_ID2, (api) => {
       title: "viewport / media-queries",
       type: types7.TOOL,
       match: /* @__PURE__ */ __name(({ viewMode, tabId }) => viewMode === "story" && !tabId, "match"),
-      render: /* @__PURE__ */ __name(() => React78.createElement(ViewportTool, { api }), "render")
+      render: /* @__PURE__ */ __name(() => React79.createElement(ViewportTool, { api }), "render")
     });
   }
 });