@storybook/addon-docs 10.0.0-beta.7 → 10.0.0-beta.8

package/dist/blocks.js

@@ -256,7 +256,7 @@ var require_memoizerific = __commonJS({
 });
 
 // src/blocks/components/ArgsTable/ArgsTable.tsx
-import React33 from "react";
+import React34 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";
@@ -656,10 +656,108 @@ var DocsWrapper = styled.div(({ theme }) => ({
 var DocsPageWrapper = /* @__PURE__ */ __name(({ children, toc }) => React.createElement(DocsWrapper, { className: "sbdocs sbdocs-wrapper" }, toc, React.createElement(DocsContent, { className: "sbdocs sbdocs-content" }, children)), "DocsPageWrapper");
 
 // src/blocks/components/Preview.tsx
-import React5, { Children, useCallback, useState as useState2 } from "react";
+import React6, { Children, useCallback, useContext as useContext2, useState as useState3 } from "react";
 import { ActionBar, Zoom } from "storybook/internal/components";
 import { styled as styled4 } from "storybook/theming";
 
+// 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);
+
+// src/blocks/blocks/Story.tsx
+import React2, { useContext } from "react";
+
+// src/blocks/blocks/useStory.ts
+import { useEffect, useState } from "react";
+function useStory(storyId, context) {
+  const stories = useStories([storyId], context);
+  return stories && stories[0];
+}
+__name(useStory, "useStory");
+function useStories(storyIds, context) {
+  const [storiesById, setStories] = useState({});
+  useEffect(() => {
+    Promise.all(
+      storyIds.map(async (storyId) => {
+        const story = await context.loadStory(storyId);
+        setStories(
+          (current) => current[storyId] === story ? current : { ...current, [storyId]: story }
+        );
+      })
+    );
+  });
+  return storyIds.map((storyId) => {
+    if (storiesById[storyId]) {
+      return storiesById[storyId];
+    }
+    try {
+      return context.storyById(storyId);
+    } catch (err) {
+      return void 0;
+    }
+  });
+}
+__name(useStories, "useStories");
+
+// 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");
+var getStoryProps = /* @__PURE__ */ __name((props, story, context) => {
+  const { parameters = {} } = story || {};
+  const { docs = {} } = parameters;
+  const storyParameters = docs.story || {};
+  if (docs.disable) {
+    return null;
+  }
+  const inline = props.inline ?? storyParameters.inline ?? false;
+  if (inline) {
+    const height2 = props.height ?? storyParameters.height;
+    const autoplay = props.autoplay ?? storyParameters.autoplay ?? false;
+    return {
+      story,
+      inline: true,
+      height: height2,
+      autoplay,
+      forceInitialArgs: !!props.__forceInitialArgs,
+      primary: !!props.__primary,
+      renderStoryToElement: context.renderStoryToElement
+    };
+  }
+  const height = props.height ?? storyParameters.height ?? storyParameters.iframeHeight ?? "100px";
+  return {
+    story,
+    inline: false,
+    height,
+    primary: !!props.__primary
+  };
+}, "getStoryProps");
+var Story2 = /* @__PURE__ */ __name((props = { __forceInitialArgs: false, __primary: false }) => {
+  const context = useContext(DocsContext);
+  const storyId = getStoryId(props, context);
+  const story = useStory(storyId, context);
+  if (!story) {
+    return React2.createElement(StorySkeleton, null);
+  }
+  const storyProps = getStoryProps(props, story, context);
+  if (!storyProps) {
+    return null;
+  }
+  return React2.createElement(Story, { ...storyProps });
+}, "Story");
+
 // src/blocks/components/BlockBackgroundStyles.tsx
 var getBlockBackgroundStyle = /* @__PURE__ */ __name((theme) => ({
   borderRadius: theme.appBorderRadius,
@@ -669,12 +767,12 @@ var getBlockBackgroundStyle = /* @__PURE__ */ __name((theme) => ({
 }), "getBlockBackgroundStyle");
 
 // src/blocks/components/Story.tsx
-import React3, { useEffect, useRef, useState } from "react";
+import React4, { useEffect as useEffect2, useRef, useState as useState2 } from "react";
 import { ErrorFormatter, Loader, getStoryHref } from "storybook/internal/components";
 import { styled as styled2 } from "storybook/theming";
 
 // src/blocks/components/IFrame.tsx
-import React2, { Component } from "react";
+import React3, { Component } from "react";
 var { window: globalWindow } = globalThis;
 var _IFrame = class _IFrame extends Component {
   constructor() {
@@ -702,7 +800,7 @@ var _IFrame = class _IFrame extends Component {
   }
   render() {
     const { id, title, src, allowFullScreen, scale, ...rest } = this.props;
-    return React2.createElement(
+    return React3.createElement(
       "iframe",
       {
         id,
@@ -719,8 +817,8 @@ __name(_IFrame, "IFrame");
 var IFrame = _IFrame;
 
 // src/blocks/components/ZoomContext.tsx
-import { createContext } from "react";
-var ZoomContext = createContext({
+import { createContext as createContext2 } from "react";
+var ZoomContext = createContext2({
   scale: 1
 });
 
@@ -730,10 +828,10 @@ var BASE_URL = PREVIEW_URL || "iframe.html";
 var storyBlockIdFromId = /* @__PURE__ */ __name(({ story, primary }) => `story--${story.id}${primary ? "--primary" : ""}`, "storyBlockIdFromId");
 var InlineStory = /* @__PURE__ */ __name((props) => {
   const storyRef = useRef();
-  const [showLoader, setShowLoader] = useState(true);
-  const [error, setError] = useState();
+  const [showLoader, setShowLoader] = useState2(true);
+  const [error, setError] = useState2();
   const { story, height, autoplay, forceInitialArgs, renderStoryToElement } = props;
-  useEffect(() => {
+  useEffect2(() => {
     if (!(story && storyRef.current)) {
       return () => {
       };
@@ -756,14 +854,14 @@ var InlineStory = /* @__PURE__ */ __name((props) => {
     };
   }, [autoplay, renderStoryToElement, story]);
   if (error) {
-    return React3.createElement("pre", null, React3.createElement(ErrorFormatter, { error }));
+    return React4.createElement("pre", null, React4.createElement(ErrorFormatter, { error }));
   }
-  return React3.createElement(React3.Fragment, null, height ? React3.createElement("style", null, `#${storyBlockIdFromId(
+  return React4.createElement(React4.Fragment, null, height ? React4.createElement("style", null, `#${storyBlockIdFromId(
     props
-  )} { min-height: ${height}; transform: translateZ(0); overflow: auto }`) : null, showLoader && React3.createElement(StorySkeleton, null), React3.createElement("div", { ref: storyRef, id: `${storyBlockIdFromId(props)}-inner`, "data-name": story.name }));
+  )} { min-height: ${height}; transform: translateZ(0); overflow: auto }`) : null, showLoader && React4.createElement(StorySkeleton, null), React4.createElement("div", { ref: storyRef, id: `${storyBlockIdFromId(props)}-inner`, "data-name": story.name }));
 }, "InlineStory");
-var IFrameStory = /* @__PURE__ */ __name(({ story, height = "500px" }) => React3.createElement("div", { style: { width: "100%", height } }, React3.createElement(ZoomContext.Consumer, null, ({ scale }) => {
-  return React3.createElement(
+var IFrameStory = /* @__PURE__ */ __name(({ story, height = "500px" }) => React4.createElement("div", { style: { width: "100%", height } }, React4.createElement(ZoomContext.Consumer, null, ({ scale }) => {
+  return React4.createElement(
     IFrame,
     {
       key: "iframe",
@@ -786,16 +884,16 @@ var ErrorMessage = styled2.strong(({ theme }) => ({
 var Story = /* @__PURE__ */ __name((props) => {
   const { inline, story } = props;
   if (inline && !props.autoplay && story.usesMount) {
-    return React3.createElement(ErrorMessage, null, "This story mounts inside of play. Set", " ", React3.createElement("a", { href: "https://storybook.js.org/docs/api/doc-blocks/doc-block-story?ref=ui#autoplay" }, "autoplay"), " ", "to true to view this story.");
+    return React4.createElement(ErrorMessage, null, "This story mounts inside of play. Set", " ", React4.createElement("a", { href: "https://storybook.js.org/docs/api/doc-blocks/doc-block-story?ref=ui#autoplay" }, "autoplay"), " ", "to true to view this story.");
   }
-  return React3.createElement("div", { id: storyBlockIdFromId(props), className: "sb-story sb-unstyled", "data-story-block": "true" }, inline ? React3.createElement(InlineStory, { ...props }) : React3.createElement(IFrameStory, { ...props }));
+  return React4.createElement("div", { id: storyBlockIdFromId(props), className: "sb-story sb-unstyled", "data-story-block": "true" }, inline ? React4.createElement(InlineStory, { ...props }) : React4.createElement(IFrameStory, { ...props }));
 }, "Story");
-var StorySkeleton = /* @__PURE__ */ __name(() => React3.createElement(Loader, null), "StorySkeleton");
+var StorySkeleton = /* @__PURE__ */ __name(() => React4.createElement(Loader, null), "StorySkeleton");
 
 // src/blocks/components/Toolbar.tsx
-import React4 from "react";
-import { FlexBar, IconButton } from "storybook/internal/components";
-import { ZoomIcon, ZoomOutIcon, ZoomResetIcon } from "@storybook/icons";
+import React5 from "react";
+import { FlexBar, IconButton, getStoryHref as getStoryHref2 } from "storybook/internal/components";
+import { ShareAltIcon, ZoomIcon, ZoomOutIcon, ZoomResetIcon } from "@storybook/icons";
 import { styled as styled3 } from "storybook/theming";
 var Bar = styled3(FlexBar)({
   position: "absolute",
@@ -824,7 +922,7 @@ var Toolbar = /* @__PURE__ */ __name(({
   zoom,
   resetZoom,
   ...rest
-}) => React4.createElement(Bar, { ...rest }, React4.createElement(Wrapper, { key: "left" }, isLoading ? [1, 2, 3].map((key) => React4.createElement(IconPlaceholder, { key })) : React4.createElement(React4.Fragment, null, React4.createElement(
+}) => React5.createElement(Bar, { ...rest }, React5.createElement(Wrapper, { key: "left" }, isLoading ? [1, 2, 3].map((key) => React5.createElement(IconPlaceholder, { key })) : React5.createElement(React5.Fragment, null, React5.createElement(
   IconButton,
   {
     key: "zoomin",
@@ -834,8 +932,8 @@ var Toolbar = /* @__PURE__ */ __name(({
     },
     title: "Zoom in"
   },
-  React4.createElement(ZoomIcon, null)
-), React4.createElement(
+  React5.createElement(ZoomIcon, null)
+), React5.createElement(
   IconButton,
   {
     key: "zoomout",
@@ -845,8 +943,8 @@ var Toolbar = /* @__PURE__ */ __name(({
     },
     title: "Zoom out"
   },
-  React4.createElement(ZoomOutIcon, null)
-), React4.createElement(
+  React5.createElement(ZoomOutIcon, null)
+), React5.createElement(
   IconButton,
   {
     key: "zoomreset",
@@ -856,7 +954,16 @@ var Toolbar = /* @__PURE__ */ __name(({
     },
     title: "Reset zoom"
   },
-  React4.createElement(ZoomResetIcon, null)
+  React5.createElement(ZoomResetIcon, null)
+))), isLoading ? React5.createElement(Wrapper, { key: "right" }, React5.createElement(IconPlaceholder, null)) : baseUrl && storyId && React5.createElement(Wrapper, { key: "right" }, React5.createElement(IconButton, { key: "opener", asChild: true }, React5.createElement(
+  "a",
+  {
+    href: getStoryHref2(baseUrl, storyId),
+    target: "_blank",
+    rel: "noopener noreferrer",
+    "aria-label": "Open canvas in new tab"
+  },
+  React5.createElement(ShareAltIcon, null)
 )))), "Toolbar");
 
 // src/blocks/components/Preview.tsx
@@ -934,7 +1041,7 @@ var getSource = /* @__PURE__ */ __name((withSource, expanded, setExpanded) => {
     }
     case expanded: {
       return {
-        source: React5.createElement(StyledSource, { ...withSource, dark: true }),
+        source: React6.createElement(StyledSource, { ...withSource, dark: true }),
         actionItem: {
           title: "Hide code",
           className: "docblock-code-toggle docblock-code-toggle--expanded",
@@ -944,7 +1051,7 @@ var getSource = /* @__PURE__ */ __name((withSource, expanded, setExpanded) => {
     }
     default: {
       return {
-        source: React5.createElement(StyledSource, { ...withSource, dark: true }),
+        source: React6.createElement(StyledSource, { ...withSource, dark: true }),
         actionItem: {
           title: "Show code",
           className: "docblock-code-toggle",
@@ -954,16 +1061,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 = styled4(Toolbar)({
   position: "absolute",
   top: 0,
@@ -989,16 +1096,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: globalWindow4 } = globalThis;
+  const context = useContext2(DocsContext);
   const copyToClipboard = useCallback(async (text) => {
     const { createCopyToClipboardFunction } = await import("storybook/internal/components");
     createCopyToClipboardFunction();
@@ -1028,25 +1136,26 @@ var Preview = /* @__PURE__ */ __name(({
       });
     }
   }, "onCopyCapture");
-  return React5.createElement(
+  const childProps = getChildProps(children);
+  return React6.createElement(
     PreviewContainer,
     {
       ...{ withSource, withToolbar },
       ...props,
       className: previewClasses.join(" ")
     },
-    withToolbar && React5.createElement(
+    withToolbar && React6.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"
       }
     ),
-    React5.createElement(ZoomContext.Provider, { value: { scale } }, React5.createElement(Relative, { className: "docs-story", onCopyCapture: withSource && onCopyCapture }, React5.createElement(
+    React6.createElement(ZoomContext.Provider, { value: { scale } }, React6.createElement(Relative, { className: "docs-story", onCopyCapture: withSource && onCopyCapture }, React6.createElement(
       ChildrenContainer,
       {
         isColumn: isColumn || !Array.isArray(children),
@@ -1054,8 +1163,8 @@ var Preview = /* @__PURE__ */ __name(({
         layout,
         inline
       },
-      React5.createElement(Zoom.Element, { centered: layout === "centered", scale: inline ? scale : 1 }, Array.isArray(children) ? children.map((child, i2) => React5.createElement("div", { key: i2 }, child)) : React5.createElement("div", null, children))
-    ), React5.createElement(ActionBar, { actionItems }))),
+      React6.createElement(Zoom.Element, { centered: layout === "centered", scale: inline ? scale : 1 }, Array.isArray(children) ? children.map((child, i2) => React6.createElement("div", { key: i2 }, child)) : React6.createElement("div", null, children))
+    ), React6.createElement(ActionBar, { actionItems }))),
     withSource && expanded && source
   );
 }, "Preview");
@@ -1067,24 +1176,24 @@ var StyledPreview = styled4(Preview)(() => ({
 }));
 
 // src/blocks/components/ArgsTable/TabbedArgsTable.tsx
-import React6 from "react";
+import React7 from "react";
 import { TabsState } from "storybook/internal/components";
 var TabbedArgsTable = /* @__PURE__ */ __name(({ tabs, ...props }) => {
   const entries = Object.entries(tabs);
   if (entries.length === 1) {
-    return React6.createElement(ArgsTable, { ...entries[0][1], ...props });
+    return React7.createElement(ArgsTable, { ...entries[0][1], ...props });
   }
-  return React6.createElement(TabsState, null, entries.map((entry, index) => {
+  return React7.createElement(TabsState, null, entries.map((entry, index) => {
     const [label, table] = entry;
     const id = `prop_table_div_${label}`;
     const Component4 = "div";
     const argsTableProps = index === 0 ? props : { sort: props.sort };
-    return React6.createElement(Component4, { key: id, id, title: label }, ({ active }) => active ? React6.createElement(ArgsTable, { key: `prop_table_${label}`, ...table, ...argsTableProps }) : null);
+    return React7.createElement(Component4, { key: id, id, title: label }, ({ active }) => active ? React7.createElement(ArgsTable, { key: `prop_table_${label}`, ...table, ...argsTableProps }) : null);
   }));
 }, "TabbedArgsTable");
 
 // src/blocks/components/Typeset.tsx
-import React7 from "react";
+import React8 from "react";
 import { withReset as withReset2 } from "storybook/internal/components";
 import { styled as styled5 } from "storybook/theming";
 var Label = styled5.div(({ theme }) => ({
@@ -1114,7 +1223,7 @@ var Typeset = /* @__PURE__ */ __name(({
   fontWeight,
   sampleText,
   ...props
-}) => React7.createElement(Wrapper2, { ...props, className: "docblock-typeset sb-unstyled" }, fontSizes.map((size) => React7.createElement(TypeSpecimen, { key: size }, React7.createElement(Label, null, size), React7.createElement(
+}) => React8.createElement(Wrapper2, { ...props, className: "docblock-typeset sb-unstyled" }, fontSizes.map((size) => React8.createElement(TypeSpecimen, { key: size }, React8.createElement(Label, null, size), React8.createElement(
   Sample,
   {
     style: {
@@ -1128,7 +1237,7 @@ var Typeset = /* @__PURE__ */ __name(({
 )))), "Typeset");
 
 // src/blocks/components/ColorPalette.tsx
-import React8 from "react";
+import React9 from "react";
 import { ResetWrapper } from "storybook/internal/components";
 import { styled as styled6 } from "storybook/theming";
 var ItemTitle = styled6.div(({ theme }) => ({
@@ -1227,16 +1336,16 @@ var List = styled6.div(({ theme }) => ({
   flexDirection: "column"
 }));
 function renderSwatch(color, index) {
-  return React8.createElement(Swatch, { key: `${color}-${index}`, title: color, background: color });
+  return React9.createElement(Swatch, { key: `${color}-${index}`, title: color, background: color });
 }
 __name(renderSwatch, "renderSwatch");
 function renderSwatchLabel(color, index, colorDescription) {
-  return React8.createElement(SwatchLabel, { key: `${color}-${index}`, title: color }, React8.createElement("div", null, color, colorDescription && React8.createElement("span", null, colorDescription)));
+  return React9.createElement(SwatchLabel, { key: `${color}-${index}`, title: color }, React9.createElement("div", null, color, colorDescription && React9.createElement("span", null, colorDescription)));
 }
 __name(renderSwatchLabel, "renderSwatchLabel");
 function renderSwatchSpecimen(colors) {
   if (Array.isArray(colors)) {
-    return React8.createElement(SwatchSpecimen, null, React8.createElement(SwatchColors, null, colors.map((color, index) => renderSwatch(color, index))), React8.createElement(SwatchLabels, null, colors.map((color, index) => renderSwatchLabel(color, index))));
+    return React9.createElement(SwatchSpecimen, null, React9.createElement(SwatchColors, null, colors.map((color, index) => renderSwatch(color, index))), React9.createElement(SwatchLabels, null, colors.map((color, index) => renderSwatchLabel(color, index))));
   }
   const swatchElements = [];
   const labelElements = [];
@@ -1245,16 +1354,16 @@ function renderSwatchSpecimen(colors) {
     swatchElements.push(renderSwatch(colorValue, swatchElements.length));
     labelElements.push(renderSwatchLabel(colorKey, labelElements.length, colorValue));
   }
-  return React8.createElement(SwatchSpecimen, null, React8.createElement(SwatchColors, null, swatchElements), React8.createElement(SwatchLabels, null, labelElements));
+  return React9.createElement(SwatchSpecimen, null, React9.createElement(SwatchColors, null, swatchElements), React9.createElement(SwatchLabels, null, labelElements));
 }
 __name(renderSwatchSpecimen, "renderSwatchSpecimen");
 var ColorItem = /* @__PURE__ */ __name(({ title, subtitle, colors }) => {
-  return React8.createElement(Item, null, React8.createElement(ItemDescription, null, React8.createElement(ItemTitle, null, title), React8.createElement(ItemSubtitle, null, subtitle)), React8.createElement(Swatches, null, renderSwatchSpecimen(colors)));
+  return React9.createElement(Item, null, React9.createElement(ItemDescription, null, React9.createElement(ItemTitle, null, title), React9.createElement(ItemSubtitle, null, subtitle)), React9.createElement(Swatches, null, renderSwatchSpecimen(colors)));
 }, "ColorItem");
-var ColorPalette = /* @__PURE__ */ __name(({ children, ...props }) => React8.createElement(ResetWrapper, null, React8.createElement(List, { ...props, className: "docblock-colorpalette sb-unstyled" }, React8.createElement(ListHeading, null, React8.createElement(ListName, null, "Name"), React8.createElement(ListSwatches, null, "Swatches")), children)), "ColorPalette");
+var ColorPalette = /* @__PURE__ */ __name(({ children, ...props }) => React9.createElement(ResetWrapper, null, React9.createElement(List, { ...props, className: "docblock-colorpalette sb-unstyled" }, React9.createElement(ListHeading, null, React9.createElement(ListName, null, "Name"), React9.createElement(ListSwatches, null, "Swatches")), children)), "ColorPalette");
 
 // src/blocks/components/IconGallery.tsx
-import React9 from "react";
+import React10 from "react";
 import { ResetWrapper as ResetWrapper2 } from "storybook/internal/components";
 import { styled as styled7 } from "storybook/theming";
 var ItemLabel = styled7.div(({ theme }) => ({
@@ -1297,11 +1406,11 @@ var List2 = styled7.div({
   gridAutoFlow: "row dense",
   gridAutoRows: 50
 });
-var IconItem = /* @__PURE__ */ __name(({ name, children }) => React9.createElement(Item2, null, React9.createElement(ItemSpecimen, null, children), React9.createElement(ItemLabel, null, name)), "IconItem");
-var IconGallery = /* @__PURE__ */ __name(({ children, ...props }) => React9.createElement(ResetWrapper2, null, React9.createElement(List2, { ...props, className: "docblock-icongallery sb-unstyled" }, children)), "IconGallery");
+var IconItem = /* @__PURE__ */ __name(({ name, children }) => React10.createElement(Item2, null, React10.createElement(ItemSpecimen, null, children), React10.createElement(ItemLabel, null, name)), "IconItem");
+var IconGallery = /* @__PURE__ */ __name(({ children, ...props }) => React10.createElement(ResetWrapper2, null, React10.createElement(List2, { ...props, className: "docblock-icongallery sb-unstyled" }, children)), "IconGallery");
 
 // src/blocks/components/TableOfContents.tsx
-import React10, { useEffect as useEffect2, useId } from "react";
+import React11, { useEffect as useEffect3, useId } from "react";
 import { NAVIGATE_URL } from "storybook/internal/core-events";
 import { styled as styled8 } from "storybook/theming";
 
@@ -2209,9 +2318,9 @@ var Heading = styled8.p(({ theme }) => ({
 }));
 var Title2 = /* @__PURE__ */ __name(({ headingId, title }) => {
   if (typeof title === "string" || !title) {
-    return React10.createElement(Heading, { as: "h2", id: headingId, className: title ? "" : "sb-sr-only" }, title || "Table of contents");
+    return React11.createElement(Heading, { as: "h2", id: headingId, className: title ? "" : "sb-sr-only" }, title || "Table of contents");
   }
-  return React10.createElement("div", { id: headingId }, title);
+  return React11.createElement("div", { id: headingId }, title);
 }, "Title");
 var TableOfContents = /* @__PURE__ */ __name(({
   title,
@@ -2223,7 +2332,7 @@ var TableOfContents = /* @__PURE__ */ __name(({
   channel,
   className
 }) => {
-  useEffect2(() => {
+  useEffect3(() => {
     if (disable) {
       return () => {
       };
@@ -2256,11 +2365,11 @@ var TableOfContents = /* @__PURE__ */ __name(({
     };
   }, [channel, disable, ignoreSelector, contentsSelector, headingSelector, unsafeTocbotOptions]);
   const headingId = useId();
-  return React10.createElement(Aside, { className }, !disable ? React10.createElement(Nav, { "aria-labelledby": headingId }, React10.createElement(Title2, { headingId, title }), React10.createElement("div", { className: "toc-wrapper" })) : null);
+  return React11.createElement(Aside, { className }, !disable ? React11.createElement(Nav, { "aria-labelledby": headingId }, React11.createElement(Title2, { headingId, title }), React11.createElement("div", { className: "toc-wrapper" })) : null);
 }, "TableOfContents");
 
 // src/blocks/components/ArgsTable/ArgRow.tsx
-import React29, { useState as useState10 } from "react";
+import React30, { useState as useState11 } from "react";
 import { codeCommon as codeCommon3 } from "storybook/internal/components";
 
 // ../../node_modules/markdown-to-jsx/dist/index.modern.js
@@ -2724,14 +2833,14 @@ var index_modern_default = /* @__PURE__ */ __name((n2) => {
 import { styled as styled22 } from "storybook/theming";
 
 // src/blocks/components/ArgsTable/ArgControl.tsx
-import React26, { useCallback as useCallback6, useEffect as useEffect8, useState as useState8 } from "react";
+import React27, { useCallback as useCallback6, useEffect as useEffect9, useState as useState9 } from "react";
 import { Link } from "storybook/internal/components";
 
 // src/blocks/controls/index.tsx
-import React25, { Suspense, lazy } from "react";
+import React26, { Suspense, lazy } from "react";
 
 // src/blocks/controls/Boolean.tsx
-import React11, { useCallback as useCallback2 } from "react";
+import React12, { useCallback as useCallback2 } from "react";
 import { Button } from "storybook/internal/components";
 import { styled as styled9 } from "storybook/theming";
 var Label2 = styled9.label(({ theme }) => ({
@@ -2822,7 +2931,7 @@ var BooleanControl = /* @__PURE__ */ __name(({
   const onSetFalse = useCallback2(() => onChange(false), [onChange]);
   const readonly = !!argType?.table?.readonly;
   if (value2 === void 0) {
-    return React11.createElement(
+    return React12.createElement(
       Button,
       {
         variant: "outline",
@@ -2836,7 +2945,7 @@ var BooleanControl = /* @__PURE__ */ __name(({
   }
   const controlId = getControlId(name);
   const parsedValue = typeof value2 === "string" ? parse(value2) : value2;
-  return React11.createElement(Label2, { "aria-disabled": readonly, htmlFor: controlId, "aria-label": name }, React11.createElement(
+  return React12.createElement(Label2, { "aria-disabled": readonly, htmlFor: controlId, "aria-label": name }, React12.createElement(
     "input",
     {
       id: controlId,
@@ -2847,11 +2956,11 @@ var BooleanControl = /* @__PURE__ */ __name(({
       disabled: readonly,
       ...{ name, onBlur, onFocus }
     }
-  ), React11.createElement("span", { "aria-hidden": "true" }, "False"), React11.createElement("span", { "aria-hidden": "true" }, "True"));
+  ), React12.createElement("span", { "aria-hidden": "true" }, "False"), React12.createElement("span", { "aria-hidden": "true" }, "True"));
 }, "BooleanControl");
 
 // src/blocks/controls/Date.tsx
-import React12, { useEffect as useEffect3, useRef as useRef2, useState as useState3 } from "react";
+import React13, { useEffect as useEffect4, useRef as useRef2, useState as useState4 } from "react";
 import { Form } from "storybook/internal/components";
 import { styled as styled10 } from "storybook/theming";
 var parseDate = /* @__PURE__ */ __name((value2) => {
@@ -2906,11 +3015,11 @@ var FlexSpaced = styled10.div(({ theme }) => ({
   }
 }));
 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) : "";
@@ -2948,7 +3057,7 @@ var DateControl = /* @__PURE__ */ __name(({ name, value: value2, onChange, onFoc
     setValid(!!time);
   }, "onTimeChange");
   const controlId = getControlId(name);
-  return React12.createElement(FlexSpaced, null, React12.createElement(
+  return React13.createElement(FlexSpaced, null, React13.createElement(
     FormInput,
     {
       type: "date",
@@ -2960,7 +3069,7 @@ var DateControl = /* @__PURE__ */ __name(({ name, value: value2, onChange, onFoc
       onChange: onDateChange,
       ...{ onFocus, onBlur }
     }
-  ), React12.createElement(
+  ), React13.createElement(
     FormInput,
     {
       type: "time",
@@ -2971,11 +3080,11 @@ var DateControl = /* @__PURE__ */ __name(({ name, value: value2, onChange, onFoc
       readOnly: readonly,
       ...{ onFocus, onBlur }
     }
-  ), !valid ? React12.createElement("div", null, "invalid") : null);
+  ), !valid ? React13.createElement("div", null, "invalid") : null);
 }, "DateControl");
 
 // src/blocks/controls/Number.tsx
-import React13, { useCallback as useCallback3, useEffect as useEffect4, useRef as useRef3, useState as useState4 } from "react";
+import React14, { 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 styled11 } from "storybook/theming";
 var Wrapper3 = styled11.label({
@@ -3000,9 +3109,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) => {
@@ -3023,19 +3132,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 React13.createElement(
+    return React14.createElement(
       Button2,
       {
         variant: "outline",
@@ -3047,7 +3156,7 @@ var NumberControl = /* @__PURE__ */ __name(({
       "Set number"
     );
   }
-  return React13.createElement(Wrapper3, null, React13.createElement(
+  return React14.createElement(Wrapper3, null, React14.createElement(
     FormInput2,
     {
       ref: htmlElRef,
@@ -3066,10 +3175,10 @@ var NumberControl = /* @__PURE__ */ __name(({
 }, "NumberControl");
 
 // src/blocks/controls/options/Options.tsx
-import React17 from "react";
+import React18 from "react";
 
 // src/blocks/controls/options/Checkbox.tsx
-import React14, { useEffect as useEffect5, useState as useState5 } from "react";
+import React15, { useEffect as useEffect6, useState as useState6 } from "react";
 import { logger } from "storybook/internal/client-logger";
 import { styled as styled12 } from "storybook/theming";
 
@@ -3133,10 +3242,10 @@ var CheckboxControl = /* @__PURE__ */ __name(({
 }) => {
   if (!options) {
     logger.warn(`Checkbox with no options: ${name}`);
-    return React14.createElement(React14.Fragment, null, "-");
+    return React15.createElement(React15.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;
@@ -3149,13 +3258,13 @@ var CheckboxControl = /* @__PURE__ */ __name(({
     onChange(selectedValues(updated, options));
     setSelected(updated);
   }, "handleChange");
-  useEffect5(() => {
+  useEffect6(() => {
     setSelected(selectedKeys(value2 || [], options));
   }, [value2]);
   const controlId = getControlId(name);
-  return React14.createElement(Wrapper4, { "aria-readonly": readonly, isInline }, Object.keys(options).map((key, index) => {
+  return React15.createElement(Wrapper4, { "aria-readonly": readonly, isInline }, Object.keys(options).map((key, index) => {
     const id = `${controlId}-${index}`;
-    return React14.createElement(Label3, { key: id, htmlFor: id }, React14.createElement(
+    return React15.createElement(Label3, { key: id, htmlFor: id }, React15.createElement(
       "input",
       {
         type: "checkbox",
@@ -3166,12 +3275,12 @@ var CheckboxControl = /* @__PURE__ */ __name(({
         onChange: handleChange,
         checked: selected?.includes(key)
       }
-    ), React14.createElement(Text, null, key));
+    ), React15.createElement(Text, null, key));
   }));
 }, "CheckboxControl");
 
 // src/blocks/controls/options/Radio.tsx
-import React15 from "react";
+import React16 from "react";
 import { logger as logger2 } from "storybook/internal/client-logger";
 import { styled as styled13 } from "storybook/theming";
 var Wrapper5 = styled13.div(
@@ -3225,14 +3334,14 @@ var RadioControl = /* @__PURE__ */ __name(({
 }) => {
   if (!options) {
     logger2.warn(`Radio with no options: ${name}`);
-    return React15.createElement(React15.Fragment, null, "-");
+    return React16.createElement(React16.Fragment, null, "-");
   }
   const selection = selectedKey(value2, options);
   const controlId = getControlId(name);
   const readonly = !!argType?.table?.readonly;
-  return React15.createElement(Wrapper5, { "aria-readonly": readonly, isInline }, Object.keys(options).map((key, index) => {
+  return React16.createElement(Wrapper5, { "aria-readonly": readonly, isInline }, Object.keys(options).map((key, index) => {
     const id = `${controlId}-${index}`;
-    return React15.createElement(Label4, { key: id, htmlFor: id }, React15.createElement(
+    return React16.createElement(Label4, { key: id, htmlFor: id }, React16.createElement(
       "input",
       {
         type: "radio",
@@ -3243,12 +3352,12 @@ var RadioControl = /* @__PURE__ */ __name(({
         onChange: (e2) => onChange(options[e2.currentTarget.value]),
         checked: key === selection
       }
-    ), React15.createElement(Text2, null, key));
+    ), React16.createElement(Text2, null, key));
   }));
 }, "RadioControl");
 
 // src/blocks/controls/options/Select.tsx
-import React16 from "react";
+import React17 from "react";
 import { logger as logger3 } from "storybook/internal/client-logger";
 import { ChevronSmallDownIcon } from "@storybook/icons";
 import { styled as styled14 } from "storybook/theming";
@@ -3326,7 +3435,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 React16.createElement(SelectWrapper, null, React16.createElement(ChevronSmallDownIcon, null), React16.createElement(OptionsSelect, { disabled: readonly, id: controlId, value: selection, onChange: handleChange }, React16.createElement("option", { key: "no-selection", disabled: true }, NO_SELECTION), Object.keys(options).map((key) => React16.createElement("option", { key, value: key }, key))));
+  return React17.createElement(SelectWrapper, null, React17.createElement(ChevronSmallDownIcon, null), React17.createElement(OptionsSelect, { disabled: readonly, id: controlId, value: selection, onChange: handleChange }, React17.createElement("option", { key: "no-selection", disabled: true }, NO_SELECTION), Object.keys(options).map((key) => React17.createElement("option", { key, value: key }, key))));
 }, "SingleSelect");
 var MultiSelect = /* @__PURE__ */ __name(({ name, value: value2, options, onChange, argType }) => {
   const handleChange = /* @__PURE__ */ __name((e2) => {
@@ -3336,7 +3445,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 React16.createElement(SelectWrapper, null, React16.createElement(
+  return React17.createElement(SelectWrapper, null, React17.createElement(
     OptionsSelect,
     {
       disabled: readonly,
@@ -3345,16 +3454,16 @@ var MultiSelect = /* @__PURE__ */ __name(({ name, value: value2, options, onChan
       value: selection,
       onChange: handleChange
     },
-    Object.keys(options).map((key) => React16.createElement("option", { key, value: key }, key))
+    Object.keys(options).map((key) => React17.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 React16.createElement(React16.Fragment, null, "-");
+    return React17.createElement(React17.Fragment, null, "-");
   }
-  return props.isMulti ? React16.createElement(MultiSelect, { ...props }) : React16.createElement(SingleSelect, { ...props });
+  return props.isMulti ? React17.createElement(MultiSelect, { ...props }) : React17.createElement(SingleSelect, { ...props });
 }, "SelectControl");
 
 // src/blocks/controls/options/Options.tsx
@@ -3386,25 +3495,25 @@ var OptionsControl = /* @__PURE__ */ __name((props) => {
   };
   const Control = Controls[type];
   if (Control) {
-    return React17.createElement(Control, { ...normalized });
+    return React18.createElement(Control, { ...normalized });
   }
   throw new Error(`Unknown options type: ${type}`);
 }, "OptionsControl");
 
 // src/blocks/controls/Object.tsx
-import React21, { useCallback as useCallback4, useEffect as useEffect6, useMemo, useRef as useRef4, useState as useState6 } from "react";
+import React22, { 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 styled16, useTheme } from "storybook/theming";
 
 // src/blocks/controls/react-editable-json-tree/index.tsx
-import React20, { Component as Component3 } from "react";
+import React21, { Component as Component3 } from "react";
 
 // src/blocks/controls/react-editable-json-tree/JsonNodes.tsx
-import React19, { Component as Component2, cloneElement as cloneElement2 } from "react";
+import React20, { Component as Component2, cloneElement as cloneElement2 } from "react";
 
 // src/blocks/controls/react-editable-json-tree/JsonNodeAccordion.tsx
-import React18 from "react";
+import React19 from "react";
 import { styled as styled15 } from "storybook/theming";
 var Container = styled15.div(({ theme }) => ({
   position: "relative",
@@ -3475,7 +3584,7 @@ function JsonNodeAccordion({
     region: `${accordionKey}-region`
   };
   const containerTag = keyPath.length > 0 ? "li" : "div";
-  return React18.createElement(Container, { as: containerTag }, React18.createElement(
+  return React19.createElement(Container, { as: containerTag }, React19.createElement(
     Trigger,
     {
       type: "button",
@@ -3487,7 +3596,7 @@ function JsonNodeAccordion({
     },
     name,
     " :"
-  ), React18.createElement(
+  ), React19.createElement(
     Region,
     {
       role: "region",
@@ -3631,15 +3740,15 @@ var _JsonAddValue = class _JsonAddValue extends Component2 {
         onKeyDown: this.onKeydown
       });
     }
-    return React19.createElement("span", { className: "rejt-add-value-node" }, inputElementKeyLayout, inputElementValueLayout, addButtonElementLayout, cancelButtonElementLayout);
+    return React20.createElement("span", { className: "rejt-add-value-node" }, inputElementKeyLayout, inputElementValueLayout, addButtonElementLayout, cancelButtonElementLayout);
   }
 };
 __name(_JsonAddValue, "JsonAddValue");
 var JsonAddValue = _JsonAddValue;
 JsonAddValue.defaultProps = {
   onlyValue: false,
-  addButtonElement: React19.createElement("button", null, "+"),
-  cancelButtonElement: React19.createElement("button", null, "c")
+  addButtonElement: React20.createElement("button", null, "+"),
+  cancelButtonElement: React20.createElement("button", null, "c")
 };
 var _JsonArray = class _JsonArray extends Component2 {
   constructor(props) {
@@ -3708,9 +3817,10 @@ var _JsonArray = class _JsonArray extends Component2 {
       }).catch(logger4.error);
     };
   }
-  handleAddValueAdd({ key, newValue }) {
+  handleAddValueAdd({ newValue }) {
     const { data, keyPath = [], nextDeep: deep } = this.state;
     const { beforeAddAction, logger: logger4 } = this.props;
+    const key = data.length;
     (beforeAddAction || Promise.resolve.bind(Promise))(key, keyPath, deep, newValue).then(() => {
       data[key] = newValue;
       this.setState({
@@ -3768,7 +3878,7 @@ var _JsonArray = class _JsonArray extends Component2 {
       style: minus,
       "aria-label": `remove the array '${String(name)}'`
     });
-    return React19.createElement(React19.Fragment, null, React19.createElement("span", { style: collapsed }, "[...] ", data.length, " ", data.length === 1 ? "item" : "items"), !isReadOnly && removeItemButton);
+    return React20.createElement(React20.Fragment, null, React20.createElement("span", { style: collapsed }, "[...] ", data.length, " ", data.length === 1 ? "item" : "items"), !isReadOnly && removeItemButton);
   }
   renderNotCollapsed() {
     const { name, data, keyPath, deep, addFormVisible, nextDeep } = this.state;
@@ -3808,7 +3918,7 @@ var _JsonArray = class _JsonArray extends Component2 {
     const onlyValue = true;
     const startObject = "[";
     const endObject = "]";
-    return React19.createElement(React19.Fragment, null, React19.createElement("span", { className: "rejt-not-collapsed-delimiter", style: delimiter }, startObject), !addFormVisible && addItemButton, React19.createElement("ul", { className: "rejt-not-collapsed-list", style: ul }, data.map((item, index) => React19.createElement(
+    return React20.createElement(React20.Fragment, null, React20.createElement("span", { className: "rejt-not-collapsed-delimiter", style: delimiter }, startObject), !addFormVisible && addItemButton, React20.createElement("ul", { className: "rejt-not-collapsed-list", style: ul }, data.map((item, index) => React20.createElement(
       JsonNode,
       {
         key: index,
@@ -3835,7 +3945,7 @@ var _JsonArray = class _JsonArray extends Component2 {
         logger: logger4,
         onSubmitValueParser
       }
-    ))), !isReadOnly && addFormVisible && React19.createElement("div", { className: "rejt-add-form", style: addForm }, React19.createElement(
+    ))), !isReadOnly && addFormVisible && React20.createElement("div", { className: "rejt-add-form", style: addForm }, React20.createElement(
       JsonAddValue,
       {
         handleAdd: this.handleAddValueAdd,
@@ -3848,12 +3958,12 @@ var _JsonArray = class _JsonArray extends Component2 {
         deep,
         onSubmitValueParser
       }
-    )), React19.createElement("span", { className: "rejt-not-collapsed-delimiter", style: delimiter }, endObject), !isReadOnly && removeItemButton);
+    )), React20.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 React19.createElement(
+    return React20.createElement(
       JsonNodeAccordion,
       {
         name,
@@ -3871,8 +3981,8 @@ var JsonArray = _JsonArray;
 JsonArray.defaultProps = {
   keyPath: [],
   deep: 0,
-  minusMenuElement: React19.createElement("span", null, " - "),
-  plusMenuElement: React19.createElement("span", null, " + ")
+  minusMenuElement: React20.createElement("span", null, " - "),
+  plusMenuElement: React20.createElement("span", null, " + ")
 };
 var _JsonFunctionValue = class _JsonFunctionValue extends Component2 {
   constructor(props) {
@@ -3977,10 +4087,10 @@ var _JsonFunctionValue = class _JsonFunctionValue extends Component2 {
         defaultValue: value2,
         onKeyDown: this.onKeydown
       });
-      result = React19.createElement("span", { className: "rejt-edit-form", style: style.editForm }, textareaElementLayout);
+      result = React20.createElement("span", { className: "rejt-edit-form", style: style.editForm }, textareaElementLayout);
       minusElement = null;
     } else {
-      result = React19.createElement(
+      result = React20.createElement(
         "span",
         {
           className: "rejt-value",
@@ -3998,7 +4108,7 @@ var _JsonFunctionValue = class _JsonFunctionValue extends Component2 {
       });
       minusElement = resultOnlyResult ? null : minusMenuLayout;
     }
-    return React19.createElement("li", { className: "rejt-value-node", style: style.li }, React19.createElement("span", { className: "rejt-name", style: style.name }, name, " :", " "), result, minusElement);
+    return React20.createElement("li", { className: "rejt-value-node", style: style.li }, React20.createElement("span", { className: "rejt-name", style: style.name }, name, " :", " "), result, minusElement);
   }
 };
 __name(_JsonFunctionValue, "JsonFunctionValue");
@@ -4008,8 +4118,8 @@ JsonFunctionValue.defaultProps = {
   deep: 0,
   handleUpdateValue: /* @__PURE__ */ __name(() => {
   }, "handleUpdateValue"),
-  cancelButtonElement: React19.createElement("button", null, "c"),
-  minusMenuElement: React19.createElement("span", null, " - ")
+  cancelButtonElement: React20.createElement("button", null, "c"),
+  minusMenuElement: React20.createElement("span", null, " - ")
 };
 var _JsonNode = class _JsonNode extends Component2 {
   constructor(props) {
@@ -4050,7 +4160,7 @@ var _JsonNode = class _JsonNode extends Component2 {
     const dataType = getObjectType(data);
     switch (dataType) {
       case ERROR:
-        return React19.createElement(
+        return React20.createElement(
           JsonObject,
           {
             data,
@@ -4078,7 +4188,7 @@ var _JsonNode = class _JsonNode extends Component2 {
           }
         );
       case OBJECT:
-        return React19.createElement(
+        return React20.createElement(
           JsonObject,
           {
             data,
@@ -4106,7 +4216,7 @@ var _JsonNode = class _JsonNode extends Component2 {
           }
         );
       case ARRAY:
-        return React19.createElement(
+        return React20.createElement(
           JsonArray,
           {
             data,
@@ -4134,7 +4244,7 @@ var _JsonNode = class _JsonNode extends Component2 {
           }
         );
       case STRING:
-        return React19.createElement(
+        return React20.createElement(
           JsonValue,
           {
             name,
@@ -4155,7 +4265,7 @@ var _JsonNode = class _JsonNode extends Component2 {
           }
         );
       case NUMBER:
-        return React19.createElement(
+        return React20.createElement(
           JsonValue,
           {
             name,
@@ -4176,7 +4286,7 @@ var _JsonNode = class _JsonNode extends Component2 {
           }
         );
       case BOOLEAN:
-        return React19.createElement(
+        return React20.createElement(
           JsonValue,
           {
             name,
@@ -4197,7 +4307,7 @@ var _JsonNode = class _JsonNode extends Component2 {
           }
         );
       case DATE:
-        return React19.createElement(
+        return React20.createElement(
           JsonValue,
           {
             name,
@@ -4218,7 +4328,7 @@ var _JsonNode = class _JsonNode extends Component2 {
           }
         );
       case NULL:
-        return React19.createElement(
+        return React20.createElement(
           JsonValue,
           {
             name,
@@ -4239,7 +4349,7 @@ var _JsonNode = class _JsonNode extends Component2 {
           }
         );
       case UNDEFINED:
-        return React19.createElement(
+        return React20.createElement(
           JsonValue,
           {
             name,
@@ -4260,7 +4370,7 @@ var _JsonNode = class _JsonNode extends Component2 {
           }
         );
       case FUNCTION:
-        return React19.createElement(
+        return React20.createElement(
           JsonFunctionValue,
           {
             name,
@@ -4281,7 +4391,7 @@ var _JsonNode = class _JsonNode extends Component2 {
           }
         );
       case SYMBOL:
-        return React19.createElement(
+        return React20.createElement(
           JsonValue,
           {
             name,
@@ -4440,7 +4550,7 @@ var _JsonObject = class _JsonObject extends Component2 {
       style: minus,
       "aria-label": `remove the object '${String(name)}'`
     });
-    return React19.createElement(React19.Fragment, null, React19.createElement("span", { style: collapsed }, "{...}", " ", keyList.length, " ", keyList.length === 1 ? "key" : "keys"), !isReadOnly && removeItemButton);
+    return React20.createElement(React20.Fragment, null, React20.createElement("span", { style: collapsed }, "{...}", " ", keyList.length, " ", keyList.length === 1 ? "key" : "keys"), !isReadOnly && removeItemButton);
   }
   renderNotCollapsed() {
     const { name, data, keyPath, deep, nextDeep, addFormVisible } = this.state;
@@ -4478,7 +4588,7 @@ var _JsonObject = class _JsonObject extends Component2 {
       style: minus,
       "aria-label": `remove the object '${String(name)}'`
     });
-    const list = keyList.map((key) => React19.createElement(
+    const list = keyList.map((key) => React20.createElement(
       JsonNode,
       {
         key,
@@ -4508,7 +4618,7 @@ var _JsonObject = class _JsonObject extends Component2 {
     ));
     const startObject = "{";
     const endObject = "}";
-    return React19.createElement(React19.Fragment, null, React19.createElement("span", { className: "rejt-not-collapsed-delimiter", style: delimiter }, startObject), !isReadOnly && addItemButton, React19.createElement("ul", { className: "rejt-not-collapsed-list", style: ul }, list), !isReadOnly && addFormVisible && React19.createElement("div", { className: "rejt-add-form", style: addForm }, React19.createElement(
+    return React20.createElement(React20.Fragment, null, React20.createElement("span", { className: "rejt-not-collapsed-delimiter", style: delimiter }, startObject), !isReadOnly && addItemButton, React20.createElement("ul", { className: "rejt-not-collapsed-list", style: ul }, list), !isReadOnly && addFormVisible && React20.createElement("div", { className: "rejt-add-form", style: addForm }, React20.createElement(
       JsonAddValue,
       {
         handleAdd: this.handleAddValueAdd,
@@ -4520,12 +4630,12 @@ var _JsonObject = class _JsonObject extends Component2 {
         deep,
         onSubmitValueParser
       }
-    )), React19.createElement("span", { className: "rejt-not-collapsed-delimiter", style: delimiter }, endObject), !isReadOnly && removeItemButton);
+    )), React20.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 React19.createElement(
+    return React20.createElement(
       JsonNodeAccordion,
       {
         name,
@@ -4543,8 +4653,8 @@ var JsonObject = _JsonObject;
 JsonObject.defaultProps = {
   keyPath: [],
   deep: 0,
-  minusMenuElement: React19.createElement("span", null, " - "),
-  plusMenuElement: React19.createElement("span", null, " + ")
+  minusMenuElement: React20.createElement("span", null, " - "),
+  plusMenuElement: React20.createElement("span", null, " + ")
 };
 var _JsonValue = class _JsonValue extends Component2 {
   constructor(props) {
@@ -4654,7 +4764,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 React19.createElement("li", { className: "rejt-value-node", style: style.li }, React19.createElement("span", { className: "rejt-name", style: style.name }, name, " : "), isEditing ? React19.createElement("span", { className: "rejt-edit-form", style: style.editForm }, inputElementLayout) : React19.createElement(
+    return React20.createElement("li", { className: "rejt-value-node", style: style.li }, React20.createElement("span", { className: "rejt-name", style: style.name }, name, " : "), isEditing ? React20.createElement("span", { className: "rejt-edit-form", style: style.editForm }, inputElementLayout) : React20.createElement(
       "span",
       {
         className: "rejt-value",
@@ -4671,8 +4781,8 @@ JsonValue.defaultProps = {
   keyPath: [],
   deep: 0,
   handleUpdateValue: /* @__PURE__ */ __name(() => Promise.resolve(), "handleUpdateValue"),
-  cancelButtonElement: React19.createElement("button", null, "c"),
-  minusMenuElement: React19.createElement("span", null, " - ")
+  cancelButtonElement: React20.createElement("button", null, "c"),
+  minusMenuElement: React20.createElement("span", null, " - ")
 };
 
 // src/blocks/controls/react-editable-json-tree/utils/parse.ts
@@ -4811,7 +4921,7 @@ var _JsonTree = class _JsonTree extends Component3 {
       textareaElementFunction = /* @__PURE__ */ __name(() => textareaElement, "textareaElementFunction");
     }
     if (dataType === "Object" || dataType === "Array") {
-      return React20.createElement("div", { className: "rejt-tree" }, React20.createElement(
+      return React21.createElement("div", { className: "rejt-tree" }, React21.createElement(
         JsonNode,
         {
           data,
@@ -4868,8 +4978,8 @@ JsonTree.defaultProps = {
   logger: { error: /* @__PURE__ */ __name(() => {
   }, "error") },
   onSubmitValueParser: /* @__PURE__ */ __name((isEditMode, keyPath, deep, name, rawValue) => parse3(rawValue), "onSubmitValueParser"),
-  inputElement: /* @__PURE__ */ __name(() => React20.createElement("input", null), "inputElement"),
-  textareaElement: /* @__PURE__ */ __name(() => React20.createElement("textarea", null), "textareaElement"),
+  inputElement: /* @__PURE__ */ __name(() => React21.createElement("input", null), "inputElement"),
+  textareaElement: /* @__PURE__ */ __name(() => React21.createElement("textarea", null), "textareaElement"),
   fallback: null
 };
 
@@ -5039,8 +5149,8 @@ var ObjectControl = /* @__PURE__ */ __name(({ name, value: value2, onChange, arg
   const theme = useTheme();
   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) => {
@@ -5055,21 +5165,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 React21.createElement(Button3, { disabled: readonly, id: getControlSetterButtonId(name), onClick: onForceVisible }, "Set object");
+    return React22.createElement(Button3, { disabled: readonly, id: getControlSetterButtonId(name), onClick: onForceVisible }, "Set object");
   }
-  const rawJSONForm = React21.createElement(
+  const rawJSONForm = React22.createElement(
     RawInput,
     {
       ref: htmlElRef,
@@ -5084,7 +5194,7 @@ var ObjectControl = /* @__PURE__ */ __name(({ name, value: value2, onChange, arg
     }
   );
   const isObjectOrArray = Array.isArray(value2) || typeof value2 === "object" && value2?.constructor === Object;
-  return React21.createElement(Wrapper6, { "aria-readonly": readonly }, isObjectOrArray && React21.createElement(
+  return React22.createElement(Wrapper6, { "aria-readonly": readonly }, isObjectOrArray && React22.createElement(
     RawButton,
     {
       role: "switch",
@@ -5095,9 +5205,9 @@ var ObjectControl = /* @__PURE__ */ __name(({ name, value: value2, onChange, arg
         setShowRaw((isRaw) => !isRaw);
       }
     },
-    showRaw ? React21.createElement(EyeCloseIcon, null) : React21.createElement(EyeIcon, null),
-    React21.createElement("span", null, "RAW")
-  ), !showRaw ? React21.createElement(
+    showRaw ? React22.createElement(EyeCloseIcon, null) : React22.createElement(EyeIcon, null),
+    React22.createElement("span", null, "RAW")
+  ), !showRaw ? React22.createElement(
     JsonTree,
     {
       readOnly: readonly || !isObjectOrArray,
@@ -5109,18 +5219,18 @@ var ObjectControl = /* @__PURE__ */ __name(({ name, value: value2, onChange, arg
       rootName: name,
       onFullyUpdate: onChange,
       getStyle: getCustomStyleFunction(theme),
-      cancelButtonElement: React21.createElement(ButtonInline, { type: "button" }, "Cancel"),
-      addButtonElement: React21.createElement(ButtonInline, { type: "submit", primary: true }, "Save"),
-      plusMenuElement: React21.createElement(ActionButton, { type: "button" }, React21.createElement(AddIcon, null)),
-      minusMenuElement: React21.createElement(ActionButton, { type: "button" }, React21.createElement(SubtractIcon, null)),
-      inputElement: (_2, __, ___, key) => key ? React21.createElement(Input, { onFocus: selectValue, onBlur: dispatchEnterKey }) : React21.createElement(Input, null),
+      cancelButtonElement: React22.createElement(ButtonInline, { type: "button" }, "Cancel"),
+      addButtonElement: React22.createElement(ButtonInline, { type: "submit", primary: true }, "Save"),
+      plusMenuElement: React22.createElement(ActionButton, { type: "button" }, React22.createElement(AddIcon, null)),
+      minusMenuElement: React22.createElement(ActionButton, { type: "button" }, React22.createElement(SubtractIcon, null)),
+      inputElement: (_2, __, ___, key) => key ? React22.createElement(Input, { onFocus: selectValue, onBlur: dispatchEnterKey }) : React22.createElement(Input, null),
       fallback: rawJSONForm
     }
   ) : rawJSONForm);
 }, "ObjectControl");
 
 // src/blocks/controls/Range.tsx
-import React22, { useMemo as useMemo2 } from "react";
+import React23, { useMemo as useMemo2 } from "react";
 import { styled as styled17 } from "storybook/theming";
 var RangeInput = styled17.input(
   ({ theme, min, max, value: value2, disabled }) => ({
@@ -5293,7 +5403,7 @@ var RangeControl = /* @__PURE__ */ __name(({
   const hasValue = value2 !== void 0;
   const numberOFDecimalsPlaces = useMemo2(() => getNumberOfDecimalPlaces(step), [step]);
   const readonly = !!argType?.table?.readonly;
-  return React22.createElement(RangeWrapper, { "aria-readonly": readonly }, React22.createElement(RangeLabel, null, min), React22.createElement(
+  return React23.createElement(RangeWrapper, { "aria-readonly": readonly }, React23.createElement(RangeLabel, null, min), React23.createElement(
     RangeInput,
     {
       id: getControlId(name),
@@ -5303,11 +5413,11 @@ var RangeControl = /* @__PURE__ */ __name(({
       ...{ name, min, max, step, onFocus, onBlur },
       value: value2 ?? min
     }
-  ), React22.createElement(RangeCurrentAndMaxLabel, { numberOFDecimalsPlaces, max }, hasValue ? value2.toFixed(numberOFDecimalsPlaces) : "--", " / ", max));
+  ), React23.createElement(RangeCurrentAndMaxLabel, { numberOFDecimalsPlaces, max }, hasValue ? value2.toFixed(numberOFDecimalsPlaces) : "--", " / ", max));
 }, "RangeControl");
 
 // src/blocks/controls/Text.tsx
-import React23, { useCallback as useCallback5, useState as useState7 } from "react";
+import React24, { useCallback as useCallback5, useState as useState8 } from "react";
 import { Button as Button4, Form as Form4 } from "storybook/internal/components";
 import { styled as styled18 } from "storybook/theming";
 var Wrapper7 = styled18.label({
@@ -5331,13 +5441,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 React23.createElement(
+    return React24.createElement(
       Button4,
       {
         variant: "outline",
@@ -5350,7 +5460,7 @@ var TextControl = /* @__PURE__ */ __name(({
     );
   }
   const isValid = typeof value2 === "string";
-  return React23.createElement(Wrapper7, null, React23.createElement(
+  return React24.createElement(Wrapper7, null, React24.createElement(
     Form4.Textarea,
     {
       id: getControlId(name),
@@ -5363,11 +5473,11 @@ var TextControl = /* @__PURE__ */ __name(({
       valid: isValid ? void 0 : "error",
       ...{ name, value: isValid ? value2 : "", onFocus, onBlur }
     }
-  ), maxLength && React23.createElement(MaxLength, { isMaxed: value2?.length === maxLength }, value2?.length ?? 0, " / ", maxLength));
+  ), maxLength && React24.createElement(MaxLength, { isMaxed: value2?.length === maxLength }, value2?.length ?? 0, " / ", maxLength));
 }, "TextControl");
 
 // src/blocks/controls/Files.tsx
-import React24, { useEffect as useEffect7, useRef as useRef5 } from "react";
+import React25, { useEffect as useEffect8, useRef as useRef5 } from "react";
 import { Form as Form5 } from "storybook/internal/components";
 import { styled as styled19 } from "storybook/theming";
 var FileInput = styled19(Form5.Input)({
@@ -5399,12 +5509,12 @@ var FilesControl = /* @__PURE__ */ __name(({
     revokeOldUrls(value2 || []);
   }
   __name(handleFileChange, "handleFileChange");
-  useEffect7(() => {
+  useEffect8(() => {
     if (value2 == null && inputElement.current) {
       inputElement.current.value = "";
     }
   }, [value2, name]);
-  return React24.createElement(
+  return React25.createElement(
     FileInput,
     {
       ref: inputElement,
@@ -5422,7 +5532,7 @@ var FilesControl = /* @__PURE__ */ __name(({
 
 // src/blocks/controls/index.tsx
 var LazyColorControl = lazy(() => import("./_browser-chunks/Color-4NTW6CRW.js"));
-var ColorControl = /* @__PURE__ */ __name((props) => React25.createElement(Suspense, { fallback: React25.createElement("div", null) }, React25.createElement(LazyColorControl, { ...props })), "ColorControl");
+var ColorControl = /* @__PURE__ */ __name((props) => React26.createElement(Suspense, { fallback: React26.createElement("div", null) }, React26.createElement(LazyColorControl, { ...props })), "ColorControl");
 
 // src/blocks/components/ArgsTable/ArgControl.tsx
 var Controls2 = {
@@ -5442,12 +5552,12 @@ var Controls2 = {
   text: TextControl,
   file: FilesControl
 };
-var NoControl = /* @__PURE__ */ __name(() => React26.createElement(React26.Fragment, null, "-"), "NoControl");
+var NoControl = /* @__PURE__ */ __name(() => React27.createElement(React27.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 });
     }
@@ -5464,7 +5574,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 ? React26.createElement(
+    return isHovered && canBeSetup ? React27.createElement(
       Link,
       {
         href: "https://storybook.js.org/docs/essentials/controls?ref=ui",
@@ -5472,15 +5582,15 @@ var ArgControl = /* @__PURE__ */ __name(({ row, arg, updateArgs, isHovered }) =>
         withArrow: true
       },
       "Setup controls"
-    ) : React26.createElement(NoControl, null);
+    ) : React27.createElement(NoControl, null);
   }
   const props = { name: key, argType: row, value: boxedValue.value, onChange, onBlur, onFocus };
   const Control = Controls2[control.type] || NoControl;
-  return React26.createElement(Control, { ...props, ...control, controlType: control.type });
+  return React27.createElement(Control, { ...props, ...control, controlType: control.type });
 }, "ArgControl");
 
 // src/blocks/components/ArgsTable/ArgJsDoc.tsx
-import React27 from "react";
+import React28 from "react";
 import { codeCommon } from "storybook/internal/components";
 import { styled as styled20 } from "storybook/theming";
 var Table = styled20.table(({ theme }) => ({
@@ -5540,13 +5650,13 @@ var ArgJsDoc = /* @__PURE__ */ __name(({ tags }) => {
   if (!hasDisplayableParams && !hasDisplayableReturns && !hasDisplayableDeprecated) {
     return null;
   }
-  return React27.createElement(React27.Fragment, null, React27.createElement(Table, null, React27.createElement("tbody", null, hasDisplayableDeprecated && React27.createElement("tr", { key: "deprecated" }, React27.createElement("td", { colSpan: 2 }, React27.createElement("strong", null, "Deprecated"), ": ", tags.deprecated?.toString())), hasDisplayableParams && params.map((x2) => {
-    return React27.createElement("tr", { key: x2.name }, React27.createElement("td", null, React27.createElement("code", null, x2.name)), React27.createElement("td", null, x2.description));
-  }), hasDisplayableReturns && React27.createElement("tr", { key: "returns" }, React27.createElement("td", null, React27.createElement("code", null, "Returns")), React27.createElement("td", null, tags.returns?.description)))));
+  return React28.createElement(React28.Fragment, null, React28.createElement(Table, null, React28.createElement("tbody", null, hasDisplayableDeprecated && React28.createElement("tr", { key: "deprecated" }, React28.createElement("td", { colSpan: 2 }, React28.createElement("strong", null, "Deprecated"), ": ", tags.deprecated?.toString())), hasDisplayableParams && params.map((x2) => {
+    return React28.createElement("tr", { key: x2.name }, React28.createElement("td", null, React28.createElement("code", null, x2.name)), React28.createElement("td", null, x2.description));
+  }), hasDisplayableReturns && React28.createElement("tr", { key: "returns" }, React28.createElement("td", null, React28.createElement("code", null, "Returns")), React28.createElement("td", null, tags.returns?.description)))));
 }, "ArgJsDoc");
 
 // src/blocks/components/ArgsTable/ArgValue.tsx
-import React28, { useState as useState9 } from "react";
+import React29, { useState as useState10 } from "react";
 import { SyntaxHighlighter, WithTooltipPure, codeCommon as codeCommon2 } from "storybook/internal/components";
 import { ChevronSmallDownIcon as ChevronSmallDownIcon2, ChevronSmallUpIcon } from "@storybook/icons";
 var import_memoizerific = __toESM(require_memoizerific(), 1);
@@ -5617,10 +5727,10 @@ var ChevronDownIcon = styled21(ChevronSmallDownIcon2)({
   marginLeft: 4
 });
 var EmptyArg = /* @__PURE__ */ __name(() => {
-  return React28.createElement("span", null, "-");
+  return React29.createElement("span", null, "-");
 }, "EmptyArg");
 var ArgText = /* @__PURE__ */ __name(({ text, simple }) => {
-  return React28.createElement(Text3, { simple }, text);
+  return React29.createElement(Text3, { simple }, text);
 }, "ArgText");
 var calculateDetailWidth = (0, import_memoizerific.default)(1e3)((detail) => {
   const lines = detail.split(/\r?\n/);
@@ -5639,12 +5749,12 @@ var renderSummaryItems = /* @__PURE__ */ __name((summaryItems, isExpanded = true
   if (!isExpanded) {
     items = summaryItems.slice(0, ITEMS_BEFORE_EXPANSION);
   }
-  return items.map((item) => React28.createElement(ArgText, { key: item, text: item === "" ? '""' : item }));
+  return items.map((item) => React29.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;
   }
@@ -5652,14 +5762,14 @@ var ArgSummary = /* @__PURE__ */ __name(({ value: value2, initialExpandedArgs })
   if (detail == null) {
     const cannotBeSafelySplitted = /[(){}[\]<>]/.test(summaryAsString);
     if (cannotBeSafelySplitted) {
-      return React28.createElement(ArgText, { text: summaryAsString });
+      return React29.createElement(ArgText, { text: summaryAsString });
     }
     const summaryItems = getSummaryItems(summaryAsString);
     const itemsCount = summaryItems.length;
     const hasManyItems = itemsCount > ITEMS_BEFORE_EXPANSION;
-    return hasManyItems ? React28.createElement(Summary, { isExpanded }, renderSummaryItems(summaryItems, isExpanded), React28.createElement(ExpandButton, { onClick: () => setIsExpanded(!isExpanded) }, isExpanded ? "Show less..." : `Show ${itemsCount - ITEMS_BEFORE_EXPANSION} more...`)) : React28.createElement(Summary, null, renderSummaryItems(summaryItems));
+    return hasManyItems ? React29.createElement(Summary, { isExpanded }, renderSummaryItems(summaryItems, isExpanded), React29.createElement(ExpandButton, { onClick: () => setIsExpanded(!isExpanded) }, isExpanded ? "Show less..." : `Show ${itemsCount - ITEMS_BEFORE_EXPANSION} more...`)) : React29.createElement(Summary, null, renderSummaryItems(summaryItems));
   }
-  return React28.createElement(
+  return React29.createElement(
     WithTooltipPure,
     {
       closeOnOutsideClick: true,
@@ -5668,13 +5778,13 @@ var ArgSummary = /* @__PURE__ */ __name(({ value: value2, initialExpandedArgs })
       onVisibleChange: (isVisible) => {
         setIsOpen(isVisible);
       },
-      tooltip: React28.createElement(Detail, { width: calculateDetailWidth(detail) }, React28.createElement(SyntaxHighlighter, { language: "jsx", format: false }, detail))
+      tooltip: React29.createElement(Detail, { width: calculateDetailWidth(detail) }, React29.createElement(SyntaxHighlighter, { language: "jsx", format: false }, detail))
     },
-    React28.createElement(Expandable, { className: "sbdocs-expandable" }, React28.createElement("span", null, summaryAsString), isOpen ? React28.createElement(ChevronUpIcon, null) : React28.createElement(ChevronDownIcon, null))
+    React29.createElement(Expandable, { className: "sbdocs-expandable" }, React29.createElement("span", null, summaryAsString), isOpen ? React29.createElement(ChevronUpIcon, null) : React29.createElement(ChevronDownIcon, null))
   );
 }, "ArgSummary");
 var ArgValue = /* @__PURE__ */ __name(({ value: value2, initialExpandedArgs }) => {
-  return value2 == null ? React28.createElement(EmptyArg, null) : React28.createElement(ArgSummary, { value: value2, initialExpandedArgs });
+  return value2 == null ? React29.createElement(EmptyArg, null) : React29.createElement(ArgSummary, { value: value2, initialExpandedArgs });
 }, "ArgValue");
 
 // src/blocks/components/ArgsTable/ArgRow.tsx
@@ -5726,7 +5836,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 || {};
@@ -5734,11 +5844,11 @@ var ArgRow = /* @__PURE__ */ __name((props) => {
   const defaultValue = table.defaultValue || row.defaultValue;
   const required = row.type?.required;
   const hasDescription = description != null && description !== "";
-  return React29.createElement("tr", { onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false) }, React29.createElement(StyledTd, { expandable: expandable ?? false }, React29.createElement(Name, null, name), required ? React29.createElement(Required, { title: "Required" }, "*") : null), compact ? null : React29.createElement("td", null, hasDescription && React29.createElement(Description, null, React29.createElement(index_modern_default, null, description)), table.jsDocTags != null ? React29.createElement(React29.Fragment, null, React29.createElement(TypeWithJsDoc, { hasDescription }, React29.createElement(ArgValue, { value: type, initialExpandedArgs })), React29.createElement(ArgJsDoc, { tags: table.jsDocTags })) : React29.createElement(Type, { hasDescription }, React29.createElement(ArgValue, { value: type, initialExpandedArgs }))), compact ? null : React29.createElement("td", null, React29.createElement(ArgValue, { value: defaultValue, initialExpandedArgs })), updateArgs ? React29.createElement("td", null, React29.createElement(ArgControl, { ...props, isHovered })) : null);
+  return React30.createElement("tr", { onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false) }, React30.createElement(StyledTd, { expandable: expandable ?? false }, React30.createElement(Name, null, name), required ? React30.createElement(Required, { title: "Required" }, "*") : null), compact ? null : React30.createElement("td", null, hasDescription && React30.createElement(Description, null, React30.createElement(index_modern_default, null, description)), table.jsDocTags != null ? React30.createElement(React30.Fragment, null, React30.createElement(TypeWithJsDoc, { hasDescription }, React30.createElement(ArgValue, { value: type, initialExpandedArgs })), React30.createElement(ArgJsDoc, { tags: table.jsDocTags })) : React30.createElement(Type, { hasDescription }, React30.createElement(ArgValue, { value: type, initialExpandedArgs }))), compact ? null : React30.createElement("td", null, React30.createElement(ArgValue, { value: defaultValue, initialExpandedArgs })), updateArgs ? React30.createElement("td", null, React30.createElement(ArgControl, { ...props, isHovered })) : null);
 }, "ArgRow");
 
 // src/blocks/components/ArgsTable/Empty.tsx
-import React30, { useEffect as useEffect9, useState as useState11 } from "react";
+import React31, { 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 styled23 } from "storybook/theming";
@@ -5760,8 +5870,8 @@ var Links = styled23.div(({ theme }) => ({
   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);
@@ -5770,28 +5880,28 @@ var Empty = /* @__PURE__ */ __name(({ inAddonPanel }) => {
   if (isLoading) {
     return null;
   }
-  return React30.createElement(Wrapper8, { inAddonPanel }, React30.createElement(
+  return React31.createElement(Wrapper8, { inAddonPanel }, React31.createElement(
     EmptyTabContent,
     {
       title: inAddonPanel ? "Interactive story playground" : "Args table with interactive controls couldn't be auto-generated",
-      description: React30.createElement(React30.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: React30.createElement(Links, null, inAddonPanel && React30.createElement(React30.Fragment, null, React30.createElement(
+      description: React31.createElement(React31.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: React31.createElement(Links, null, inAddonPanel && React31.createElement(React31.Fragment, null, React31.createElement(
         Link2,
         {
           href: "https://storybook.js.org/docs/essentials/controls?ref=ui",
           target: "_blank",
           withArrow: true
         },
-        React30.createElement(DocumentIcon, null),
+        React31.createElement(DocumentIcon, null),
         " Read docs"
-      )), !inAddonPanel && React30.createElement(
+      )), !inAddonPanel && React31.createElement(
         Link2,
         {
           href: "https://storybook.js.org/docs/essentials/controls?ref=ui",
           target: "_blank",
           withArrow: true
         },
-        React30.createElement(DocumentIcon, null),
+        React31.createElement(DocumentIcon, null),
         " Learn how to set that up"
       ))
     }
@@ -5799,7 +5909,7 @@ var Empty = /* @__PURE__ */ __name(({ inAddonPanel }) => {
 }, "Empty");
 
 // src/blocks/components/ArgsTable/SectionRow.tsx
-import React31, { useState as useState12 } from "react";
+import React32, { useState as useState13 } from "react";
 import { ChevronDownIcon as ChevronDownIcon2, ChevronRightIcon } from "@storybook/icons";
 import { styled as styled24 } from "storybook/theming";
 var ExpanderIconDown = styled24(ChevronDownIcon2)(({ theme }) => ({
@@ -5881,12 +5991,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 React31.createElement(React31.Fragment, null, React31.createElement(StyledTr, { title: helperText }, React31.createElement(Level, { colSpan: 1 }, React31.createElement(ClickIntercept, { onClick: (e2) => setExpanded(!expanded), tabIndex: 0 }, helperText), React31.createElement(FlexWrapper, null, expanded ? React31.createElement(ExpanderIconDown, null) : React31.createElement(ExpanderIconRight, null), label)), React31.createElement(StyledTd2, { colSpan: colSpan - 1 }, React31.createElement(
+  return React32.createElement(React32.Fragment, null, React32.createElement(StyledTr, { title: helperText }, React32.createElement(Level, { colSpan: 1 }, React32.createElement(ClickIntercept, { onClick: (e2) => setExpanded(!expanded), tabIndex: 0 }, helperText), React32.createElement(FlexWrapper, null, expanded ? React32.createElement(ExpanderIconDown, null) : React32.createElement(ExpanderIconRight, null), label)), React32.createElement(StyledTd2, { colSpan: colSpan - 1 }, React32.createElement(
     ClickIntercept,
     {
       onClick: (e2) => setExpanded(!expanded),
@@ -5898,7 +6008,7 @@ var SectionRow = /* @__PURE__ */ __name(({
 }, "SectionRow");
 
 // src/blocks/components/ArgsTable/Skeleton.tsx
-import React32 from "react";
+import React33 from "react";
 import { styled as styled25 } from "storybook/theming";
 var TableWrapper = styled25.div(({ theme }) => ({
   width: "100%",
@@ -5956,7 +6066,7 @@ var SkeletonText = styled25.div(
     borderRadius: 3
   })
 );
-var Skeleton = /* @__PURE__ */ __name(() => React32.createElement(TableWrapper, null, React32.createElement(Row, null, React32.createElement(Column, { position: "first" }, React32.createElement(SkeletonText, { width: "60%" })), React32.createElement(Column, { position: "second" }, React32.createElement(SkeletonText, { width: "30%" })), React32.createElement(Column, { position: "third" }, React32.createElement(SkeletonText, { width: "60%" })), React32.createElement(Column, { position: "last" }, React32.createElement(SkeletonText, { width: "60%" }))), React32.createElement(Row, null, React32.createElement(Column, { position: "first" }, React32.createElement(SkeletonText, { width: "60%" })), React32.createElement(Column, { position: "second" }, React32.createElement(SkeletonText, { width: "80%" }), React32.createElement(SkeletonText, { width: "30%" })), React32.createElement(Column, { position: "third" }, React32.createElement(SkeletonText, { width: "60%" })), React32.createElement(Column, { position: "last" }, React32.createElement(SkeletonText, { width: "60%" }))), React32.createElement(Row, null, React32.createElement(Column, { position: "first" }, React32.createElement(SkeletonText, { width: "60%" })), React32.createElement(Column, { position: "second" }, React32.createElement(SkeletonText, { width: "80%" }), React32.createElement(SkeletonText, { width: "30%" })), React32.createElement(Column, { position: "third" }, React32.createElement(SkeletonText, { width: "60%" })), React32.createElement(Column, { position: "last" }, React32.createElement(SkeletonText, { width: "60%" }))), React32.createElement(Row, null, React32.createElement(Column, { position: "first" }, React32.createElement(SkeletonText, { width: "60%" })), React32.createElement(Column, { position: "second" }, React32.createElement(SkeletonText, { width: "80%" }), React32.createElement(SkeletonText, { width: "30%" })), React32.createElement(Column, { position: "third" }, React32.createElement(SkeletonText, { width: "60%" })), React32.createElement(Column, { position: "last" }, React32.createElement(SkeletonText, { width: "60%" })))), "Skeleton");
+var Skeleton = /* @__PURE__ */ __name(() => React33.createElement(TableWrapper, null, React33.createElement(Row, null, React33.createElement(Column, { position: "first" }, React33.createElement(SkeletonText, { width: "60%" })), React33.createElement(Column, { position: "second" }, React33.createElement(SkeletonText, { width: "30%" })), React33.createElement(Column, { position: "third" }, React33.createElement(SkeletonText, { width: "60%" })), React33.createElement(Column, { position: "last" }, React33.createElement(SkeletonText, { width: "60%" }))), React33.createElement(Row, null, React33.createElement(Column, { position: "first" }, React33.createElement(SkeletonText, { width: "60%" })), React33.createElement(Column, { position: "second" }, React33.createElement(SkeletonText, { width: "80%" }), React33.createElement(SkeletonText, { width: "30%" })), React33.createElement(Column, { position: "third" }, React33.createElement(SkeletonText, { width: "60%" })), React33.createElement(Column, { position: "last" }, React33.createElement(SkeletonText, { width: "60%" }))), React33.createElement(Row, null, React33.createElement(Column, { position: "first" }, React33.createElement(SkeletonText, { width: "60%" })), React33.createElement(Column, { position: "second" }, React33.createElement(SkeletonText, { width: "80%" }), React33.createElement(SkeletonText, { width: "30%" })), React33.createElement(Column, { position: "third" }, React33.createElement(SkeletonText, { width: "60%" })), React33.createElement(Column, { position: "last" }, React33.createElement(SkeletonText, { width: "60%" }))), React33.createElement(Row, null, React33.createElement(Column, { position: "first" }, React33.createElement(SkeletonText, { width: "60%" })), React33.createElement(Column, { position: "second" }, React33.createElement(SkeletonText, { width: "80%" }), React33.createElement(SkeletonText, { width: "30%" })), React33.createElement(Column, { position: "third" }, React33.createElement(SkeletonText, { width: "60%" })), React33.createElement(Column, { position: "last" }, React33.createElement(SkeletonText, { width: "60%" })))), "Skeleton");
 
 // src/blocks/components/ArgsTable/ArgsTable.tsx
 var TableWrapper2 = styled26.table(({ theme, compact, inAddonPanel }) => ({
@@ -6157,10 +6267,10 @@ var ArgsTable = /* @__PURE__ */ __name((props) => {
   } = props;
   if ("error" in props) {
     const { error } = props;
-    return React33.createElement(EmptyBlock, null, error, "\xA0", React33.createElement(Link3, { href: "http://storybook.js.org/docs/?ref=ui", target: "_blank", withArrow: true }, React33.createElement(DocumentIcon2, null), " Read the docs"));
+    return React34.createElement(EmptyBlock, null, error, "\xA0", React34.createElement(Link3, { href: "http://storybook.js.org/docs/?ref=ui", target: "_blank", withArrow: true }, React34.createElement(DocumentIcon2, null), " Read the docs"));
   }
   if (isLoading) {
-    return React33.createElement(Skeleton, null);
+    return React34.createElement(Skeleton, null);
   }
   const { rows, args, globals } = "rows" in props ? props : { rows: void 0, args: void 0, globals: void 0 };
   const groups = groupRows(
@@ -6174,7 +6284,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 React33.createElement(Empty, { inAddonPanel });
+    return React34.createElement(Empty, { inAddonPanel });
   }
   let colSpan = 1;
   if (updateArgs) {
@@ -6185,15 +6295,15 @@ var ArgsTable = /* @__PURE__ */ __name((props) => {
   }
   const expandable = Object.keys(groups.sections).length > 0;
   const common = { updateArgs, compact, inAddonPanel, initialExpandedArgs };
-  return React33.createElement(ResetWrapper3, null, React33.createElement(TablePositionWrapper, null, updateArgs && !isLoading && resetArgs && React33.createElement(ButtonPositionWrapper, null, React33.createElement(
+  return React34.createElement(ResetWrapper3, null, React34.createElement(TablePositionWrapper, null, updateArgs && !isLoading && resetArgs && React34.createElement(ButtonPositionWrapper, null, React34.createElement(
     IconButton3,
     {
       onClick: () => resetArgs(),
       "aria-label": "Reset controls",
       title: "Reset controls"
     },
-    React33.createElement(UndoIcon, null)
-  )), React33.createElement(TableWrapper2, { ...{ compact, inAddonPanel }, className: "docblock-argstable sb-unstyled" }, React33.createElement("thead", { className: "docblock-argstable-head" }, React33.createElement("tr", null, React33.createElement("th", null, React33.createElement("span", null, "Name")), compact ? null : React33.createElement("th", null, React33.createElement("span", null, "Description")), compact ? null : React33.createElement("th", null, React33.createElement("span", null, "Default")), updateArgs ? React33.createElement("th", null, React33.createElement("span", null, "Control")) : null)), React33.createElement("tbody", { className: "docblock-argstable-body" }, groups.ungrouped.map((row) => React33.createElement(ArgRow, { key: row.key, row, arg: args && args[row.key], ...common })), Object.entries(groups.ungroupedSubsections).map(([subcategory, subsection]) => React33.createElement(
+    React34.createElement(UndoIcon, null)
+  )), React34.createElement(TableWrapper2, { ...{ compact, inAddonPanel }, className: "docblock-argstable sb-unstyled" }, React34.createElement("thead", { className: "docblock-argstable-head" }, React34.createElement("tr", null, React34.createElement("th", null, React34.createElement("span", null, "Name")), compact ? null : React34.createElement("th", null, React34.createElement("span", null, "Description")), compact ? null : React34.createElement("th", null, React34.createElement("span", null, "Default")), updateArgs ? React34.createElement("th", null, React34.createElement("span", null, "Control")) : null)), React34.createElement("tbody", { className: "docblock-argstable-body" }, groups.ungrouped.map((row) => React34.createElement(ArgRow, { key: row.key, row, arg: args && args[row.key], ...common })), Object.entries(groups.ungroupedSubsections).map(([subcategory, subsection]) => React34.createElement(
     SectionRow,
     {
       key: subcategory,
@@ -6201,7 +6311,7 @@ var ArgsTable = /* @__PURE__ */ __name((props) => {
       level: "subsection",
       colSpan
     },
-    subsection.map((row) => React33.createElement(
+    subsection.map((row) => React34.createElement(
       ArgRow,
       {
         key: row.key,
@@ -6211,7 +6321,7 @@ var ArgsTable = /* @__PURE__ */ __name((props) => {
         ...common
       }
     ))
-  )), Object.entries(groups.sections).map(([category, section]) => React33.createElement(SectionRow, { key: category, label: category, level: "section", colSpan }, section.ungrouped.map((row) => React33.createElement(ArgRow, { key: row.key, row, arg: args && args[row.key], ...common })), Object.entries(section.subsections).map(([subcategory, subsection]) => React33.createElement(
+  )), Object.entries(groups.sections).map(([category, section]) => React34.createElement(SectionRow, { key: category, label: category, level: "section", colSpan }, section.ungrouped.map((row) => React34.createElement(ArgRow, { key: row.key, row, arg: args && args[row.key], ...common })), Object.entries(section.subsections).map(([subcategory, subsection]) => React34.createElement(
     SectionRow,
     {
       key: subcategory,
@@ -6219,7 +6329,7 @@ var ArgsTable = /* @__PURE__ */ __name((props) => {
       level: "subsection",
       colSpan
     },
-    subsection.map((row) => React33.createElement(
+    subsection.map((row) => React34.createElement(
       ArgRow,
       {
         key: row.key,
@@ -6233,28 +6343,18 @@ var ArgsTable = /* @__PURE__ */ __name((props) => {
 }, "ArgsTable");
 
 // src/blocks/blocks/Anchor.tsx
-import React34 from "react";
+import React35 from "react";
 var anchorBlockIdFromId = /* @__PURE__ */ __name((storyId) => `anchor--${storyId}`, "anchorBlockIdFromId");
-var Anchor = /* @__PURE__ */ __name(({ storyId, children }) => React34.createElement("div", { id: anchorBlockIdFromId(storyId), className: "sb-anchor" }, children), "Anchor");
+var Anchor = /* @__PURE__ */ __name(({ storyId, children }) => React35.createElement("div", { id: anchorBlockIdFromId(storyId), className: "sb-anchor" }, children), "Anchor");
 
 // src/blocks/blocks/ArgTypes.tsx
-import React35 from "react";
+import React36 from "react";
 import { filterArgTypes } from "storybook/preview-api";
 
 // src/blocks/blocks/useOf.ts
-import { useContext } from "react";
-
-// src/blocks/blocks/DocsContext.ts
-import { createContext as createContext2 } from "react";
-if (globalThis && globalThis.__DOCS_CONTEXT__ === void 0) {
-  globalThis.__DOCS_CONTEXT__ = createContext2(null);
-  globalThis.__DOCS_CONTEXT__.displayName = "DocsContext";
-}
-var DocsContext = globalThis ? globalThis.__DOCS_CONTEXT__ : createContext2(null);
-
-// src/blocks/blocks/useOf.ts
+import { useContext as useContext3 } from "react";
 var useOf = /* @__PURE__ */ __name((moduleExportOrType, validTypes) => {
-  const context = useContext(DocsContext);
+  const context = useContext3(DocsContext);
   return context.resolveOf(moduleExportOrType, validTypes);
 }, "useOf");
 
@@ -6331,7 +6431,7 @@ var ArgTypes = /* @__PURE__ */ __name((props) => {
   const filteredArgTypes = filterArgTypes(argTypes, include, exclude);
   const hasSubcomponents = Boolean(subcomponents) && Object.keys(subcomponents || {}).length > 0;
   if (!hasSubcomponents) {
-    return React35.createElement(ArgsTable, { rows: filteredArgTypes, sort });
+    return React36.createElement(ArgsTable, { rows: filteredArgTypes, sort });
   }
   const mainComponentName = getComponentName(component) || "Main";
   const subcomponentTabs = Object.fromEntries(
@@ -6351,18 +6451,18 @@ var ArgTypes = /* @__PURE__ */ __name((props) => {
     [mainComponentName]: { rows: filteredArgTypes, sort },
     ...subcomponentTabs
   };
-  return React35.createElement(TabbedArgsTable, { tabs, sort });
+  return React36.createElement(TabbedArgsTable, { tabs, sort });
 }, "ArgTypes");
 
 // src/blocks/blocks/Canvas.tsx
-import React39, { useContext as useContext4 } from "react";
+import React39, { useContext as useContext5 } from "react";
 
 // src/blocks/blocks/Source.tsx
-import React37, { useContext as useContext2, useMemo as useMemo3 } from "react";
+import React38, { useContext as useContext4, useMemo as useMemo3 } from "react";
 import { SourceType } from "storybook/internal/docs-tools";
 
 // src/blocks/blocks/SourceContainer.tsx
-import React36, { createContext as createContext3, useEffect as useEffect10, useState as useState13 } from "react";
+import React37, { createContext as createContext3, useEffect as useEffect11, useState as useState14 } from "react";
 import { SNIPPET_RENDERED } from "storybook/internal/docs-tools";
 
 // ../../node_modules/telejson/dist/chunk-EAFQLD22.mjs
@@ -7902,8 +8002,8 @@ var SourceContainer = /* @__PURE__ */ __name(({
   children,
   channel
 }) => {
-  const [sources, setSources] = useState13({});
-  useEffect10(() => {
+  const [sources, setSources] = useState14({});
+  useEffect11(() => {
     const handleSnippetRendered = /* @__PURE__ */ __name((idOrEvent, inputSource = null, inputFormat = false) => {
       const {
         id,
@@ -7930,15 +8030,15 @@ var SourceContainer = /* @__PURE__ */ __name(({
     channel.on(SNIPPET_RENDERED, handleSnippetRendered);
     return () => channel.off(SNIPPET_RENDERED, handleSnippetRendered);
   }, []);
-  return React36.createElement(SourceContext.Provider, { value: { sources } }, children);
+  return React37.createElement(SourceContext.Provider, { value: { sources } }, children);
 }, "SourceContainer");
 
 // src/blocks/blocks/useTransformCode.tsx
-import { useEffect as useEffect11, useState as useState14 } from "react";
+import { useEffect as useEffect12, useState as useState15 } from "react";
 function useTransformCode(source, transform, storyContext) {
-  const [transformedCode, setTransformedCode] = useState14("Transforming...");
+  const [transformedCode, setTransformedCode] = useState15("Transforming...");
   const transformed = transform ? transform?.(source, storyContext) : source;
-  useEffect11(() => {
+  useEffect12(() => {
     async function getTransformedCode() {
       const transformResult = await transformed;
       if (transformResult !== transformedCode) {
@@ -8034,106 +8134,16 @@ var useSourceProps = /* @__PURE__ */ __name((props, docsContext, sourceContext)
   };
 }, "useSourceProps");
 var Source2 = /* @__PURE__ */ __name((props) => {
-  const sourceContext = useContext2(SourceContext);
-  const docsContext = useContext2(DocsContext);
+  const sourceContext = useContext4(SourceContext);
+  const docsContext = useContext4(DocsContext);
   const sourceProps = useSourceProps(props, docsContext, sourceContext);
-  return React37.createElement(Source, { ...sourceProps });
+  return React38.createElement(Source, { ...sourceProps });
 }, "Source");
 
-// src/blocks/blocks/Story.tsx
-import React38, { useContext as useContext3 } from "react";
-
-// src/blocks/blocks/useStory.ts
-import { useEffect as useEffect12, useState as useState15 } from "react";
-function useStory(storyId, context) {
-  const stories = useStories([storyId], context);
-  return stories && stories[0];
-}
-__name(useStory, "useStory");
-function useStories(storyIds, context) {
-  const [storiesById, setStories] = useState15({});
-  useEffect12(() => {
-    Promise.all(
-      storyIds.map(async (storyId) => {
-        const story = await context.loadStory(storyId);
-        setStories(
-          (current) => current[storyId] === story ? current : { ...current, [storyId]: story }
-        );
-      })
-    );
-  });
-  return storyIds.map((storyId) => {
-    if (storiesById[storyId]) {
-      return storiesById[storyId];
-    }
-    try {
-      return context.storyById(storyId);
-    } catch (err) {
-      return void 0;
-    }
-  });
-}
-__name(useStories, "useStories");
-
-// src/blocks/blocks/Story.tsx
-var getStoryId2 = /* @__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");
-var getStoryProps = /* @__PURE__ */ __name((props, story, context) => {
-  const { parameters = {} } = story || {};
-  const { docs = {} } = parameters;
-  const storyParameters = docs.story || {};
-  if (docs.disable) {
-    return null;
-  }
-  const inline = props.inline ?? storyParameters.inline ?? false;
-  if (inline) {
-    const height2 = props.height ?? storyParameters.height;
-    const autoplay = props.autoplay ?? storyParameters.autoplay ?? false;
-    return {
-      story,
-      inline: true,
-      height: height2,
-      autoplay,
-      forceInitialArgs: !!props.__forceInitialArgs,
-      primary: !!props.__primary,
-      renderStoryToElement: context.renderStoryToElement
-    };
-  }
-  const height = props.height ?? storyParameters.height ?? storyParameters.iframeHeight ?? "100px";
-  return {
-    story,
-    inline: false,
-    height,
-    primary: !!props.__primary
-  };
-}, "getStoryProps");
-var Story2 = /* @__PURE__ */ __name((props = { __forceInitialArgs: false, __primary: false }) => {
-  const context = useContext3(DocsContext);
-  const storyId = getStoryId2(props, context);
-  const story = useStory(storyId, context);
-  if (!story) {
-    return React38.createElement(StorySkeleton, null);
-  }
-  const storyProps = getStoryProps(props, story, context);
-  if (!storyProps) {
-    return null;
-  }
-  return React38.createElement(Story, { ...storyProps });
-}, "Story");
-
 // src/blocks/blocks/Canvas.tsx
 var Canvas = /* @__PURE__ */ __name((props) => {
-  const docsContext = useContext4(DocsContext);
-  const sourceContext = useContext4(SourceContext);
+  const docsContext = useContext5(DocsContext);
+  const sourceContext = useContext5(SourceContext);
   const { of, source } = props;
   if ("of" in props && of === void 0) {
     throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");
@@ -8162,7 +8172,7 @@ var Canvas = /* @__PURE__ */ __name((props) => {
 }, "Canvas");
 
 // src/blocks/blocks/Controls.tsx
-import React40, { useContext as useContext5 } from "react";
+import React40, { useContext as useContext6 } from "react";
 import { filterArgTypes as filterArgTypes2 } from "storybook/preview-api";
 
 // src/blocks/blocks/useArgs.ts
@@ -8233,7 +8243,7 @@ var Controls3 = /* @__PURE__ */ __name((props) => {
   if ("of" in props && of === void 0) {
     throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");
   }
-  const context = useContext5(DocsContext);
+  const context = useContext6(DocsContext);
   const { story } = context.resolveOf(of || "story", ["story"]);
   const { parameters, argTypes, component, subcomponents } = story;
   const controlsParameters = parameters.docs?.controls || {};
@@ -8295,7 +8305,7 @@ import React42 from "react";
 import { dedent } from "ts-dedent";
 
 // src/blocks/blocks/mdx.tsx
-import React41, { useContext as useContext6 } from "react";
+import React41, { useContext as useContext7 } from "react";
 import { Code, components, nameSpaceClassNames } from "storybook/internal/components";
 import { NAVIGATE_URL as NAVIGATE_URL2 } from "storybook/internal/core-events";
 import { LinkIcon } from "@storybook/icons";
@@ -8337,7 +8347,7 @@ function navigate(context, url) {
 __name(navigate, "navigate");
 var A2 = components.a;
 var AnchorInPage = /* @__PURE__ */ __name(({ hash, children }) => {
-  const context = useContext6(DocsContext);
+  const context = useContext7(DocsContext);
   return React41.createElement(
     A2,
     {
@@ -8356,7 +8366,7 @@ var AnchorInPage = /* @__PURE__ */ __name(({ hash, children }) => {
 }, "AnchorInPage");
 var AnchorMdx = /* @__PURE__ */ __name((props) => {
   const { href, target, children, ...rest } = props;
-  const context = useContext6(DocsContext);
+  const context = useContext7(DocsContext);
   if (!href || target === "_blank" || /^https?:\/\//.test(href)) {
     return React41.createElement(A2, { ...props });
   }
@@ -8414,7 +8424,7 @@ var HeaderWithOcticonAnchor = /* @__PURE__ */ __name(({
   children,
   ...rest
 }) => {
-  const context = useContext6(DocsContext);
+  const context = useContext7(DocsContext);
   const OcticonHeader = OcticonHeaders[as];
   const hash = `#${id}`;
   return React41.createElement(OcticonHeader, { id, ...rest }, React41.createElement(
@@ -8601,7 +8611,7 @@ var DocsContainer = /* @__PURE__ */ __name(({
 import React52 from "react";
 
 // src/blocks/blocks/Primary.tsx
-import React48, { useContext as useContext7 } from "react";
+import React48, { useContext as useContext8 } from "react";
 
 // src/blocks/blocks/DocsStory.tsx
 import React47 from "react";
@@ -8721,13 +8731,13 @@ var Primary = /* @__PURE__ */ __name((props) => {
     throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");
   }
   const { csfFile } = useOf(of || "meta", ["meta"]);
-  const context = useContext7(DocsContext);
+  const context = useContext8(DocsContext);
   const primaryStory = context.componentStoriesFromCSFFile(csfFile)[0];
   return primaryStory ? React48.createElement(DocsStory, { of: primaryStory.moduleExport, expanded: false, __primary: true, withToolbar: true }) : null;
 }, "Primary");
 
 // src/blocks/blocks/Stories.tsx
-import React49, { useContext as useContext8 } from "react";
+import React49, { useContext as useContext9 } from "react";
 import { styled as styled28 } from "storybook/theming";
 var StyledHeading = styled28(Heading2)(({ theme }) => ({
   fontSize: `${theme.typography.size.s2 - 1}px`,
@@ -8744,7 +8754,7 @@ var StyledHeading = styled28(Heading2)(({ theme }) => ({
   }
 }));
 var Stories = /* @__PURE__ */ __name(({ title = "Stories", includePrimary = true }) => {
-  const { componentStories, projectAnnotations, getStoryContext } = useContext8(DocsContext);
+  const { componentStories, projectAnnotations, getStoryContext } = useContext9(DocsContext);
   let stories = componentStories();
   const { stories: { filter } = { filter: void 0 } } = projectAnnotations.parameters?.docs || {};
   if (filter) {
@@ -8971,9 +8981,9 @@ var ExternalDocsContainer = /* @__PURE__ */ __name(({ projectAnnotations, childr
 }, "ExternalDocsContainer");
 
 // src/blocks/blocks/Meta.tsx
-import React56, { useContext as useContext9 } from "react";
+import React56, { useContext as useContext10 } from "react";
 var Meta = /* @__PURE__ */ __name(({ of }) => {
-  const context = useContext9(DocsContext);
+  const context = useContext10(DocsContext);
   if (of) {
     context.referenceMeta(of, true);
   }
@@ -9053,7 +9063,7 @@ export {
   format,
   formatDate,
   formatTime,
-  getStoryId2 as getStoryId,
+  getStoryId,
   getStoryProps,
   parse2 as parse,
   parseDate,