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

package/dist/blocks.js

@@ -5,9 +5,6 @@ import {
   pickBy,
   uniq
 } from "./_browser-chunks/chunk-ZK6NW3SW.js";
-import {
-  tocbot_default
-} from "./_browser-chunks/chunk-TQ5Q4DDG.js";
 import {
   EmptyBlock,
   Source,
@@ -259,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";
@@ -659,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,
@@ -672,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() {
@@ -705,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,
@@ -722,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
 });
 
@@ -733,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 () => {
       };
@@ -759,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",
@@ -789,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",
@@ -827,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",
@@ -837,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",
@@ -848,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",
@@ -859,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
@@ -937,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",
@@ -947,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",
@@ -957,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,
@@ -992,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();
@@ -1031,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),
@@ -1057,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");
@@ -1070,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 }) => ({
@@ -1117,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: {
@@ -1131,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 }) => ({
@@ -1230,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 = [];
@@ -1248,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 }) => ({
@@ -1300,13 +1406,843 @@ 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";
+
+// ../../node_modules/tocbot/src/js/build-html.js
+function build_html_default(options) {
+  const forEach = [].forEach;
+  const some = [].some;
+  const body = typeof window !== "undefined" && document.body;
+  const SPACE_CHAR = " ";
+  let tocElement;
+  let currentlyHighlighting = true;
+  let eventCount = 0;
+  function createEl(d2, container) {
+    const link = container.appendChild(createLink(d2));
+    if (d2.children.length) {
+      const list = createList(d2.isCollapsed);
+      d2.children.forEach((child) => {
+        createEl(child, list);
+      });
+      link.appendChild(list);
+    }
+  }
+  __name(createEl, "createEl");
+  function render(parent, data) {
+    const collapsed = false;
+    const container = createList(collapsed);
+    data.forEach((d2) => {
+      createEl(d2, container);
+    });
+    tocElement = parent || tocElement;
+    if (tocElement === null) {
+      return;
+    }
+    if (tocElement.firstChild) {
+      tocElement.removeChild(tocElement.firstChild);
+    }
+    if (data.length === 0) {
+      return tocElement;
+    }
+    return tocElement.appendChild(container);
+  }
+  __name(render, "render");
+  function createLink(data) {
+    const item = document.createElement("li");
+    const a2 = document.createElement("a");
+    if (options.listItemClass) {
+      item.setAttribute("class", options.listItemClass);
+    }
+    if (options.onClick) {
+      a2.onclick = options.onClick;
+    }
+    if (options.includeTitleTags) {
+      a2.setAttribute("title", data.textContent);
+    }
+    if (options.includeHtml && data.childNodes.length) {
+      forEach.call(data.childNodes, (node) => {
+        a2.appendChild(node.cloneNode(true));
+      });
+    } else {
+      a2.textContent = data.textContent;
+    }
+    a2.setAttribute("href", `${options.basePath}#${data.id}`);
+    a2.setAttribute(
+      "class",
+      `${options.linkClass + SPACE_CHAR}node-name--${data.nodeName}${SPACE_CHAR}${options.extraLinkClasses}`
+    );
+    item.appendChild(a2);
+    return item;
+  }
+  __name(createLink, "createLink");
+  function createList(isCollapsed) {
+    const listElement = options.orderedList ? "ol" : "ul";
+    const list = document.createElement(listElement);
+    let classes = options.listClass + SPACE_CHAR + options.extraListClasses;
+    if (isCollapsed) {
+      classes = classes + SPACE_CHAR + options.collapsibleClass;
+      classes = classes + SPACE_CHAR + options.isCollapsedClass;
+    }
+    list.setAttribute("class", classes);
+    return list;
+  }
+  __name(createList, "createList");
+  function updateFixedSidebarClass() {
+    const scrollTop = getScrollTop();
+    const posFixedEl = document.querySelector(options.positionFixedSelector);
+    if (options.fixedSidebarOffset === "auto") {
+      options.fixedSidebarOffset = tocElement.offsetTop;
+    }
+    if (scrollTop > options.fixedSidebarOffset) {
+      if (posFixedEl.className.indexOf(options.positionFixedClass) === -1) {
+        posFixedEl.className += SPACE_CHAR + options.positionFixedClass;
+      }
+    } else {
+      posFixedEl.className = posFixedEl.className.replace(
+        SPACE_CHAR + options.positionFixedClass,
+        ""
+      );
+    }
+  }
+  __name(updateFixedSidebarClass, "updateFixedSidebarClass");
+  function getHeadingTopPos(obj) {
+    let position = 0;
+    if (obj !== null) {
+      position = obj.offsetTop;
+      if (options.hasInnerContainers) {
+        position += getHeadingTopPos(obj.offsetParent);
+      }
+    }
+    return position;
+  }
+  __name(getHeadingTopPos, "getHeadingTopPos");
+  function updateClassname(obj, className) {
+    if (obj && obj.className !== className) {
+      obj.className = className;
+    }
+    return obj;
+  }
+  __name(updateClassname, "updateClassname");
+  function updateToc(headingsArray, event) {
+    if (options.positionFixedSelector) {
+      updateFixedSidebarClass();
+    }
+    const headings = headingsArray;
+    const clickedHref = event?.target?.getAttribute ? event?.target?.getAttribute("href") : null;
+    const isBottomMode = clickedHref && clickedHref.charAt(0) === "#" ? getIsHeaderBottomMode(clickedHref.replace("#", "")) : false;
+    const shouldUpdate = currentlyHighlighting || isBottomMode;
+    if (event && eventCount < 5) {
+      eventCount++;
+    }
+    if (shouldUpdate && !!tocElement && headings.length > 0) {
+      const topHeader = getTopHeader(headings);
+      const oldActiveTocLink = tocElement.querySelector(
+        `.${options.activeLinkClass}`
+      );
+      const topHeaderId = topHeader.id.replace(
+        /([ #;&,.+*~':"!^$[\]()=>|/\\@])/g,
+        "\\$1"
+      );
+      const hashId = window.location.hash.replace("#", "");
+      let activeId = topHeaderId;
+      const isPageBottomMode = getIsPageBottomMode();
+      if (clickedHref && isBottomMode) {
+        activeId = clickedHref.replace("#", "");
+      } else if (hashId && hashId !== topHeaderId && isPageBottomMode && (getIsHeaderBottomMode(topHeaderId) || eventCount <= 2)) {
+        activeId = hashId;
+      }
+      const activeTocLink = tocElement.querySelector(
+        `.${options.linkClass}[href="${options.basePath}#${activeId}"]`
+      );
+      if (oldActiveTocLink === activeTocLink) {
+        return;
+      }
+      const tocLinks = tocElement.querySelectorAll(`.${options.linkClass}`);
+      forEach.call(tocLinks, (tocLink) => {
+        updateClassname(
+          tocLink,
+          tocLink.className.replace(SPACE_CHAR + options.activeLinkClass, "")
+        );
+      });
+      const tocLis = tocElement.querySelectorAll(`.${options.listItemClass}`);
+      forEach.call(tocLis, (tocLi) => {
+        updateClassname(
+          tocLi,
+          tocLi.className.replace(SPACE_CHAR + options.activeListItemClass, "")
+        );
+      });
+      if (activeTocLink && activeTocLink.className.indexOf(options.activeLinkClass) === -1) {
+        activeTocLink.className += SPACE_CHAR + options.activeLinkClass;
+      }
+      const li = activeTocLink?.parentNode;
+      if (li && li.className.indexOf(options.activeListItemClass) === -1) {
+        li.className += SPACE_CHAR + options.activeListItemClass;
+      }
+      const tocLists = tocElement.querySelectorAll(
+        `.${options.listClass}.${options.collapsibleClass}`
+      );
+      forEach.call(tocLists, (list) => {
+        if (list.className.indexOf(options.isCollapsedClass) === -1) {
+          list.className += SPACE_CHAR + options.isCollapsedClass;
+        }
+      });
+      if (activeTocLink?.nextSibling && activeTocLink.nextSibling.className.indexOf(
+        options.isCollapsedClass
+      ) !== -1) {
+        updateClassname(
+          activeTocLink.nextSibling,
+          activeTocLink.nextSibling.className.replace(
+            SPACE_CHAR + options.isCollapsedClass,
+            ""
+          )
+        );
+      }
+      removeCollapsedFromParents(activeTocLink?.parentNode.parentNode);
+    }
+  }
+  __name(updateToc, "updateToc");
+  function removeCollapsedFromParents(element) {
+    if (element && element.className.indexOf(options.collapsibleClass) !== -1 && element.className.indexOf(options.isCollapsedClass) !== -1) {
+      updateClassname(
+        element,
+        element.className.replace(SPACE_CHAR + options.isCollapsedClass, "")
+      );
+      return removeCollapsedFromParents(element.parentNode.parentNode);
+    }
+    return element;
+  }
+  __name(removeCollapsedFromParents, "removeCollapsedFromParents");
+  function disableTocAnimation(event) {
+    const target = event.target || event.srcElement;
+    if (typeof target.className !== "string" || target.className.indexOf(options.linkClass) === -1) {
+      return;
+    }
+    currentlyHighlighting = false;
+  }
+  __name(disableTocAnimation, "disableTocAnimation");
+  function enableTocAnimation() {
+    currentlyHighlighting = true;
+  }
+  __name(enableTocAnimation, "enableTocAnimation");
+  function getCurrentlyHighlighting() {
+    return currentlyHighlighting;
+  }
+  __name(getCurrentlyHighlighting, "getCurrentlyHighlighting");
+  function getIsHeaderBottomMode(headerId) {
+    const scrollEl = getScrollEl();
+    const activeHeading = document?.getElementById(headerId);
+    const isBottomMode = activeHeading.offsetTop > scrollEl.offsetHeight - scrollEl.clientHeight * 1.4 - options.bottomModeThreshold;
+    return isBottomMode;
+  }
+  __name(getIsHeaderBottomMode, "getIsHeaderBottomMode");
+  function getIsPageBottomMode() {
+    const scrollEl = getScrollEl();
+    const isScrollable = scrollEl.scrollHeight > scrollEl.clientHeight;
+    const isBottomMode = getScrollTop() + scrollEl.clientHeight > scrollEl.offsetHeight - options.bottomModeThreshold;
+    return isScrollable && isBottomMode;
+  }
+  __name(getIsPageBottomMode, "getIsPageBottomMode");
+  function getScrollEl() {
+    let el;
+    if (options.scrollContainer && document.querySelector(options.scrollContainer)) {
+      el = document.querySelector(options.scrollContainer);
+    } else {
+      el = document.documentElement || body;
+    }
+    return el;
+  }
+  __name(getScrollEl, "getScrollEl");
+  function getScrollTop() {
+    const el = getScrollEl();
+    return el?.scrollTop || 0;
+  }
+  __name(getScrollTop, "getScrollTop");
+  function getTopHeader(headings, scrollTop = getScrollTop()) {
+    let topHeader;
+    some.call(headings, (heading, i2) => {
+      if (getHeadingTopPos(heading) > scrollTop + options.headingsOffset + 10) {
+        const index = i2 === 0 ? i2 : i2 - 1;
+        topHeader = headings[index];
+        return true;
+      }
+      if (i2 === headings.length - 1) {
+        topHeader = headings[headings.length - 1];
+        return true;
+      }
+    });
+    return topHeader;
+  }
+  __name(getTopHeader, "getTopHeader");
+  function updateUrlHashForHeader(headingsArray) {
+    const scrollTop = getScrollTop();
+    const topHeader = getTopHeader(headingsArray, scrollTop);
+    const isPageBottomMode = getIsPageBottomMode();
+    if ((!topHeader || scrollTop < 5) && !isPageBottomMode) {
+      if (!(window.location.hash === "#" || window.location.hash === "")) {
+        window.history.pushState(null, null, "#");
+      }
+    } else if (topHeader && !isPageBottomMode) {
+      const newHash = `#${topHeader.id}`;
+      if (window.location.hash !== newHash) {
+        window.history.pushState(null, null, newHash);
+      }
+    }
+  }
+  __name(updateUrlHashForHeader, "updateUrlHashForHeader");
+  return {
+    enableTocAnimation,
+    disableTocAnimation,
+    render,
+    updateToc,
+    getCurrentlyHighlighting,
+    getTopHeader,
+    getScrollTop,
+    updateUrlHashForHeader
+  };
+}
+__name(build_html_default, "default");
+
+// ../../node_modules/tocbot/src/js/default-options.js
+var default_options_default = {
+  // Where to render the table of contents.
+  tocSelector: ".js-toc",
+  // Or, you can pass in a DOM node instead
+  tocElement: null,
+  // Where to grab the headings to build the table of contents.
+  contentSelector: ".js-toc-content",
+  // Or, you can pass in a DOM node instead
+  contentElement: null,
+  // Which headings to grab inside of the contentSelector element.
+  headingSelector: "h1, h2, h3",
+  // Headings that match the ignoreSelector will be skipped.
+  ignoreSelector: ".js-toc-ignore",
+  // For headings inside relative or absolute positioned
+  // containers within content.
+  hasInnerContainers: false,
+  // Main class to add to links.
+  linkClass: "toc-link",
+  // Extra classes to add to links.
+  extraLinkClasses: "",
+  // Class to add to active links,
+  // the link corresponding to the top most heading on the page.
+  activeLinkClass: "is-active-link",
+  // Main class to add to lists.
+  listClass: "toc-list",
+  // Extra classes to add to lists.
+  extraListClasses: "",
+  // Class that gets added when a list should be collapsed.
+  isCollapsedClass: "is-collapsed",
+  // Class that gets added when a list should be able
+  // to be collapsed but isn't necessarily collapsed.
+  collapsibleClass: "is-collapsible",
+  // Class to add to list items.
+  listItemClass: "toc-list-item",
+  // Class to add to active list items.
+  activeListItemClass: "is-active-li",
+  // How many heading levels should not be collapsed.
+  // For example, number 6 will show everything since
+  // there are only 6 heading levels and number 0 will collapse them all.
+  // The sections that are hidden will open
+  // and close as you scroll to headings within them.
+  collapseDepth: 0,
+  // Smooth scrolling enabled.
+  scrollSmooth: true,
+  // Smooth scroll duration.
+  scrollSmoothDuration: 420,
+  // Smooth scroll offset.
+  scrollSmoothOffset: 0,
+  // Callback for scroll end.
+  scrollEndCallback: /* @__PURE__ */ __name(function(e2) {
+  }, "scrollEndCallback"),
+  // Headings offset between the headings and the top of
+  // the document (this is meant for minor adjustments).
+  headingsOffset: 1,
+  // Enable the URL hash to update with the proper heading ID as
+  // a user scrolls the page.
+  enableUrlHashUpdateOnScroll: false,
+  // type of scroll handler to use. to make scroll event not too rapid.
+  // Options are: "debounce" or "throttle"
+  // when set auto , use debounce less than 333ms , other use throttle.
+  // for ios browser can't use history.pushState() more than 100 times per 30 seconds reason
+  scrollHandlerType: "auto",
+  //  scrollHandler delay in ms.
+  scrollHandlerTimeout: 50,
+  // Timeout between events firing to make sure it's
+  // not too rapid (for performance reasons).
+  throttleTimeout: 50,
+  // Element to add the positionFixedClass to.
+  positionFixedSelector: null,
+  // Fixed position class to add to make sidebar fixed after scrolling
+  // down past the fixedSidebarOffset.
+  positionFixedClass: "is-position-fixed",
+  // fixedSidebarOffset can be any number but by default is set
+  // to auto which sets the fixedSidebarOffset to the sidebar
+  // element's offsetTop from the top of the document on init.
+  fixedSidebarOffset: "auto",
+  // includeHtml can be set to true to include the HTML markup from the
+  // heading node instead of just including the innerText.
+  includeHtml: false,
+  // includeTitleTags automatically sets the html title tag of the link
+  // to match the title. This can be useful for SEO purposes or
+  // when truncating titles.
+  includeTitleTags: false,
+  // onclick function to apply to all links in toc. will be called with
+  // the event as the first parameter, and this can be used to stop,
+  // propagation, prevent default or perform action
+  onClick: /* @__PURE__ */ __name(function(e2) {
+  }, "onClick"),
+  // orderedList can be set to false to generate unordered lists (ul)
+  // instead of ordered lists (ol)
+  orderedList: true,
+  // If there is a fixed article scroll container, set to calculate offset.
+  scrollContainer: null,
+  // prevent ToC DOM rendering if it's already rendered by an external system.
+  skipRendering: false,
+  // Optional callback to change heading labels.
+  // For example it can be used to cut down and put ellipses on multiline headings you deem too long.
+  // Called each time a heading is parsed. Expects a string and returns the modified label to display.
+  // Additionally, the attribute `data-heading-label` may be used on a heading to specify
+  // a shorter string to be used in the TOC.
+  // function (string) => string
+  headingLabelCallback: false,
+  // ignore headings that are hidden in DOM
+  ignoreHiddenElements: false,
+  // Optional callback to modify properties of parsed headings.
+  // The heading element is passed in node parameter and information
+  // parsed by default parser is provided in obj parameter.
+  // Function has to return the same or modified obj.
+  // The heading will be excluded from TOC if nothing is returned.
+  // function (object, HTMLElement) => object | void
+  headingObjectCallback: null,
+  // Set the base path, useful if you use a `base` tag in `head`.
+  basePath: "",
+  // Only takes affect when `tocSelector` is scrolling,
+  // keep the toc scroll position in sync with the content.
+  disableTocScrollSync: false,
+  // If this is null then just use `tocElement` or `tocSelector` instead
+  // assuming `disableTocScrollSync` is set to false. This allows for
+  // scrolling an outer element (like a nav panel w/ search) containing the toc.
+  // Please pass an element, not a selector here.
+  tocScrollingWrapper: null,
+  // Offset for the toc scroll (top) position when scrolling the page.
+  // Only effective if `disableTocScrollSync` is false.
+  tocScrollOffset: 30,
+  // Threshold for when bottom mode should be enabled to handle
+  // highlighting links that cannot be scrolled to.
+  bottomModeThreshold: 30
+};
+
+// ../../node_modules/tocbot/src/js/parse-content.js
+function parseContent(options) {
+  const reduce = [].reduce;
+  function getLastItem(array2) {
+    return array2[array2.length - 1];
+  }
+  __name(getLastItem, "getLastItem");
+  function getHeadingLevel(heading) {
+    return +heading.nodeName.toUpperCase().replace("H", "");
+  }
+  __name(getHeadingLevel, "getHeadingLevel");
+  function isHTMLElement(maybeElement) {
+    try {
+      return maybeElement instanceof window.HTMLElement || maybeElement instanceof window.parent.HTMLElement;
+    } catch (e2) {
+      return maybeElement instanceof window.HTMLElement;
+    }
+  }
+  __name(isHTMLElement, "isHTMLElement");
+  function getHeadingObject(heading) {
+    if (!isHTMLElement(heading)) return heading;
+    if (options.ignoreHiddenElements && (!heading.offsetHeight || !heading.offsetParent)) {
+      return null;
+    }
+    const headingLabel = heading.getAttribute("data-heading-label") || (options.headingLabelCallback ? String(options.headingLabelCallback(heading.innerText)) : (heading.innerText || heading.textContent).trim());
+    const obj = {
+      id: heading.id,
+      children: [],
+      nodeName: heading.nodeName,
+      headingLevel: getHeadingLevel(heading),
+      textContent: headingLabel
+    };
+    if (options.includeHtml) {
+      obj.childNodes = heading.childNodes;
+    }
+    if (options.headingObjectCallback) {
+      return options.headingObjectCallback(obj, heading);
+    }
+    return obj;
+  }
+  __name(getHeadingObject, "getHeadingObject");
+  function addNode(node, nest) {
+    const obj = getHeadingObject(node);
+    const level = obj.headingLevel;
+    let array2 = nest;
+    let lastItem = getLastItem(array2);
+    const lastItemLevel = lastItem ? lastItem.headingLevel : 0;
+    let counter = level - lastItemLevel;
+    while (counter > 0) {
+      lastItem = getLastItem(array2);
+      if (lastItem && level === lastItem.headingLevel) {
+        break;
+      } else if (lastItem && lastItem.children !== void 0) {
+        array2 = lastItem.children;
+      }
+      counter--;
+    }
+    if (level >= options.collapseDepth) {
+      obj.isCollapsed = true;
+    }
+    array2.push(obj);
+    return array2;
+  }
+  __name(addNode, "addNode");
+  function selectHeadings(contentElement, headingSelector) {
+    let selectors = headingSelector;
+    if (options.ignoreSelector) {
+      selectors = headingSelector.split(",").map(/* @__PURE__ */ __name(function mapSelectors(selector) {
+        return `${selector.trim()}:not(${options.ignoreSelector})`;
+      }, "mapSelectors"));
+    }
+    try {
+      return contentElement.querySelectorAll(selectors);
+    } catch (e2) {
+      console.warn(`Headers not found with selector: ${selectors}`);
+      return null;
+    }
+  }
+  __name(selectHeadings, "selectHeadings");
+  function nestHeadingsArray(headingsArray) {
+    return reduce.call(
+      headingsArray,
+      /* @__PURE__ */ __name(function reducer(prev, curr) {
+        const currentHeading = getHeadingObject(curr);
+        if (currentHeading) {
+          addNode(currentHeading, prev.nest);
+        }
+        return prev;
+      }, "reducer"),
+      {
+        nest: []
+      }
+    );
+  }
+  __name(nestHeadingsArray, "nestHeadingsArray");
+  return {
+    nestHeadingsArray,
+    selectHeadings
+  };
+}
+__name(parseContent, "parseContent");
+
+// ../../node_modules/tocbot/src/js/scroll-smooth/index.js
+function initSmoothScrolling(options) {
+  var duration = options.duration;
+  var offset = options.offset;
+  if (typeof window === "undefined" || typeof location === "undefined") return;
+  var pageUrl = location.hash ? stripHash(location.href) : location.href;
+  delegatedLinkHijacking();
+  function delegatedLinkHijacking() {
+    document.body.addEventListener("click", onClick, false);
+    function onClick(e2) {
+      if (!isInPageLink(e2.target) || e2.target.className.indexOf("no-smooth-scroll") > -1 || e2.target.href.charAt(e2.target.href.length - 2) === "#" && e2.target.href.charAt(e2.target.href.length - 1) === "!" || e2.target.className.indexOf(options.linkClass) === -1) {
+        return;
+      }
+      jump(e2.target.hash, {
+        duration,
+        offset,
+        callback: /* @__PURE__ */ __name(function() {
+          setFocus(e2.target.hash);
+        }, "callback")
+      });
+    }
+    __name(onClick, "onClick");
+  }
+  __name(delegatedLinkHijacking, "delegatedLinkHijacking");
+  function isInPageLink(n2) {
+    return n2.tagName.toLowerCase() === "a" && (n2.hash.length > 0 || n2.href.charAt(n2.href.length - 1) === "#") && (stripHash(n2.href) === pageUrl || stripHash(n2.href) + "#" === pageUrl);
+  }
+  __name(isInPageLink, "isInPageLink");
+  function stripHash(url) {
+    return url.slice(0, url.lastIndexOf("#"));
+  }
+  __name(stripHash, "stripHash");
+  function setFocus(hash) {
+    var element = document.getElementById(hash.substring(1));
+    if (element) {
+      if (!/^(?:a|select|input|button|textarea)$/i.test(element.tagName)) {
+        element.tabIndex = -1;
+      }
+      element.focus();
+    }
+  }
+  __name(setFocus, "setFocus");
+}
+__name(initSmoothScrolling, "initSmoothScrolling");
+function jump(target, options) {
+  var start = window.pageYOffset;
+  var opt = {
+    duration: options.duration,
+    offset: options.offset || 0,
+    callback: options.callback,
+    easing: options.easing || easeInOutQuad
+  };
+  var tgt = document.querySelector(
+    '[id="' + decodeURI(target).split("#").join("") + '"]'
+  ) || document.querySelector('[id="' + target.split("#").join("") + '"]');
+  var distance = typeof target === "string" ? opt.offset + (target ? tgt && tgt.getBoundingClientRect().top || 0 : -(document.documentElement.scrollTop || document.body.scrollTop)) : target;
+  var duration = typeof opt.duration === "function" ? opt.duration(distance) : opt.duration;
+  var timeStart;
+  var timeElapsed;
+  requestAnimationFrame(function(time) {
+    timeStart = time;
+    loop(time);
+  });
+  function loop(time) {
+    timeElapsed = time - timeStart;
+    window.scrollTo(0, opt.easing(timeElapsed, start, distance, duration));
+    if (timeElapsed < duration) {
+      requestAnimationFrame(loop);
+    } else {
+      end();
+    }
+  }
+  __name(loop, "loop");
+  function end() {
+    window.scrollTo(0, start + distance);
+    if (typeof opt.callback === "function") {
+      opt.callback();
+    }
+  }
+  __name(end, "end");
+  function easeInOutQuad(t, b2, c2, d2) {
+    t /= d2 / 2;
+    if (t < 1) return c2 / 2 * t * t + b2;
+    t--;
+    return -c2 / 2 * (t * (t - 2) - 1) + b2;
+  }
+  __name(easeInOutQuad, "easeInOutQuad");
+}
+__name(jump, "jump");
+
+// ../../node_modules/tocbot/src/js/update-toc-scroll.js
+function updateTocScroll(options) {
+  const toc = options.tocScrollingWrapper || options.tocElement || document.querySelector(options.tocSelector);
+  if (toc && toc.scrollHeight > toc.clientHeight) {
+    const activeItem = toc.querySelector(`.${options.activeListItemClass}`);
+    if (activeItem) {
+      const eTop = activeItem.offsetTop;
+      const scrollAmount = eTop - options.tocScrollOffset;
+      toc.scrollTop = scrollAmount > 0 ? scrollAmount : 0;
+    }
+  }
+}
+__name(updateTocScroll, "updateTocScroll");
+
+// ../../node_modules/tocbot/src/js/index-esm.js
+var _options = {};
+var _buildHtml;
+var _parseContent;
+var _headingsArray;
+var _scrollListener;
+var clickListener;
+function init(customOptions) {
+  let hasInitialized = false;
+  _options = extend(default_options_default, customOptions || {});
+  if (_options.scrollSmooth) {
+    _options.duration = _options.scrollSmoothDuration;
+    _options.offset = _options.scrollSmoothOffset;
+    initSmoothScrolling(_options);
+  }
+  _buildHtml = build_html_default(_options);
+  _parseContent = parseContent(_options);
+  destroy();
+  const contentElement = getContentElement(_options);
+  if (contentElement === null) {
+    return;
+  }
+  const tocElement = getTocElement(_options);
+  if (tocElement === null) {
+    return;
+  }
+  _headingsArray = _parseContent.selectHeadings(
+    contentElement,
+    _options.headingSelector
+  );
+  if (_headingsArray === null) {
+    return;
+  }
+  const nestedHeadingsObj = _parseContent.nestHeadingsArray(_headingsArray);
+  const nestedHeadings = nestedHeadingsObj.nest;
+  if (!_options.skipRendering) {
+    _buildHtml.render(tocElement, nestedHeadings);
+  } else {
+    return this;
+  }
+  let isClick = false;
+  const scrollHandlerTimeout = _options.scrollHandlerTimeout || _options.throttleTimeout;
+  const scrollHandler = /* @__PURE__ */ __name((fn, delay) => getScrollHandler(fn, delay, _options.scrollHandlerType), "scrollHandler");
+  _scrollListener = scrollHandler((e2) => {
+    _buildHtml.updateToc(_headingsArray, e2);
+    !_options.disableTocScrollSync && !isClick && updateTocScroll(_options);
+    if (_options.enableUrlHashUpdateOnScroll && hasInitialized) {
+      const enableUpdatingHash = _buildHtml.getCurrentlyHighlighting();
+      enableUpdatingHash && _buildHtml.updateUrlHashForHeader(_headingsArray);
+    }
+    const isTop = e2?.target?.scrollingElement?.scrollTop === 0;
+    if (e2 && (e2.eventPhase === 0 || e2.currentTarget === null) || isTop) {
+      _buildHtml.updateToc(_headingsArray);
+      _options.scrollEndCallback?.(e2);
+    }
+  }, scrollHandlerTimeout);
+  if (!hasInitialized) {
+    _scrollListener();
+    hasInitialized = true;
+  }
+  window.onhashchange = window.onscrollend = (e2) => {
+    _scrollListener(e2);
+  };
+  if (_options.scrollContainer && document.querySelector(_options.scrollContainer)) {
+    document.querySelector(_options.scrollContainer).addEventListener("scroll", _scrollListener, false);
+    document.querySelector(_options.scrollContainer).addEventListener("resize", _scrollListener, false);
+  } else {
+    document.addEventListener("scroll", _scrollListener, false);
+    document.addEventListener("resize", _scrollListener, false);
+  }
+  let timeout = null;
+  clickListener = throttle((event) => {
+    isClick = true;
+    if (_options.scrollSmooth) {
+      _buildHtml.disableTocAnimation(event);
+    }
+    _buildHtml.updateToc(_headingsArray, event);
+    timeout && clearTimeout(timeout);
+    timeout = setTimeout(() => {
+      _buildHtml.enableTocAnimation();
+    }, _options.scrollSmoothDuration);
+    setTimeout(() => {
+      isClick = false;
+    }, _options.scrollSmoothDuration + 100);
+  }, _options.throttleTimeout);
+  if (_options.scrollContainer && document.querySelector(_options.scrollContainer)) {
+    document.querySelector(_options.scrollContainer).addEventListener("click", clickListener, false);
+  } else {
+    document.addEventListener("click", clickListener, false);
+  }
+}
+__name(init, "init");
+function destroy() {
+  const tocElement = getTocElement(_options);
+  if (tocElement === null) {
+    return;
+  }
+  if (!_options.skipRendering) {
+    if (tocElement) {
+      tocElement.innerHTML = "";
+    }
+  }
+  if (_options.scrollContainer && document.querySelector(_options.scrollContainer)) {
+    document.querySelector(_options.scrollContainer).removeEventListener("scroll", _scrollListener, false);
+    document.querySelector(_options.scrollContainer).removeEventListener("resize", _scrollListener, false);
+    if (_buildHtml) {
+      document.querySelector(_options.scrollContainer).removeEventListener("click", clickListener, false);
+    }
+  } else {
+    document.removeEventListener("scroll", _scrollListener, false);
+    document.removeEventListener("resize", _scrollListener, false);
+    if (_buildHtml) {
+      document.removeEventListener("click", clickListener, false);
+    }
+  }
+}
+__name(destroy, "destroy");
+function refresh(customOptions) {
+  destroy();
+  init(customOptions || _options);
+}
+__name(refresh, "refresh");
+var hasOwnProp = Object.prototype.hasOwnProperty;
+function extend(...args) {
+  const target = {};
+  for (let i2 = 0; i2 < args.length; i2++) {
+    const source = args[i2];
+    for (const key in source) {
+      if (hasOwnProp.call(source, key)) {
+        target[key] = source[key];
+      }
+    }
+  }
+  return target;
+}
+__name(extend, "extend");
+function throttle(fn, threshold, scope) {
+  threshold || (threshold = 250);
+  let last;
+  let deferTimer;
+  return function(...args) {
+    const context = scope || this;
+    const now = +/* @__PURE__ */ new Date();
+    if (last && now < last + threshold) {
+      clearTimeout(deferTimer);
+      deferTimer = setTimeout(() => {
+        last = now;
+        fn.apply(context, args);
+      }, threshold);
+    } else {
+      last = now;
+      fn.apply(context, args);
+    }
+  };
+}
+__name(throttle, "throttle");
+function debounce(func, wait) {
+  let timeout;
+  return (...args) => {
+    clearTimeout(timeout);
+    timeout = setTimeout(() => func.apply(this, args), wait);
+  };
+}
+__name(debounce, "debounce");
+function getScrollHandler(func, timeout, type = "auto") {
+  switch (type) {
+    case "debounce":
+      return debounce(func, timeout);
+    case "throttle":
+      return throttle(func, timeout);
+    default:
+      return timeout < 334 ? debounce(func, timeout) : throttle(func, timeout);
+  }
+}
+__name(getScrollHandler, "getScrollHandler");
+function getContentElement(options) {
+  try {
+    return options.contentElement || document.querySelector(options.contentSelector);
+  } catch (e2) {
+    console.warn(`Contents element not found: ${options.contentSelector}`);
+    return null;
+  }
+}
+__name(getContentElement, "getContentElement");
+function getTocElement(options) {
+  try {
+    return options.tocElement || document.querySelector(options.tocSelector);
+  } catch (e2) {
+    console.warn(`TOC element not found: ${options.tocSelector}`);
+    return null;
+  }
+}
+__name(getTocElement, "getTocElement");
+
+// ../../node_modules/tocbot/index.js
+var tocbot = { destroy, init, refresh };
+var tocbot_default = tocbot;
+
+// src/blocks/components/TableOfContents.tsx
 var Aside = styled8.aside(() => ({
   width: "10rem",
   "@media (max-width: 768px)": {
@@ -1382,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,
@@ -1396,7 +2332,7 @@ var TableOfContents = /* @__PURE__ */ __name(({
   channel,
   className
 }) => {
-  useEffect2(() => {
+  useEffect3(() => {
     if (disable) {
       return () => {
       };
@@ -1429,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
@@ -1897,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 }) => ({
@@ -1995,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",
@@ -2009,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,
@@ -2020,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) => {
@@ -2079,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) : "";
@@ -2121,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",
@@ -2133,7 +3069,7 @@ var DateControl = /* @__PURE__ */ __name(({ name, value: value2, onChange, onFoc
       onChange: onDateChange,
       ...{ onFocus, onBlur }
     }
-  ), React12.createElement(
+  ), React13.createElement(
     FormInput,
     {
       type: "time",
@@ -2144,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({
@@ -2173,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) => {
@@ -2196,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",
@@ -2220,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,
@@ -2239,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";
 
@@ -2306,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;
@@ -2322,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",
@@ -2339,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(
@@ -2398,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",
@@ -2416,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";
@@ -2499,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) => {
@@ -2509,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,
@@ -2518,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
@@ -2559,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",
@@ -2648,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",
@@ -2660,7 +3596,7 @@ function JsonNodeAccordion({
     },
     name,
     " :"
-  ), React18.createElement(
+  ), React19.createElement(
     Region,
     {
       role: "region",
@@ -2804,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) {
@@ -2881,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({
@@ -2941,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;
@@ -2981,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,
@@ -3008,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,
@@ -3021,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,
@@ -3044,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) {
@@ -3150,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",
@@ -3171,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");
@@ -3181,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) {
@@ -3223,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,
@@ -3251,7 +4188,7 @@ var _JsonNode = class _JsonNode extends Component2 {
           }
         );
       case OBJECT:
-        return React19.createElement(
+        return React20.createElement(
           JsonObject,
           {
             data,
@@ -3279,7 +4216,7 @@ var _JsonNode = class _JsonNode extends Component2 {
           }
         );
       case ARRAY:
-        return React19.createElement(
+        return React20.createElement(
           JsonArray,
           {
             data,
@@ -3307,7 +4244,7 @@ var _JsonNode = class _JsonNode extends Component2 {
           }
         );
       case STRING:
-        return React19.createElement(
+        return React20.createElement(
           JsonValue,
           {
             name,
@@ -3328,7 +4265,7 @@ var _JsonNode = class _JsonNode extends Component2 {
           }
         );
       case NUMBER:
-        return React19.createElement(
+        return React20.createElement(
           JsonValue,
           {
             name,
@@ -3349,7 +4286,7 @@ var _JsonNode = class _JsonNode extends Component2 {
           }
         );
       case BOOLEAN:
-        return React19.createElement(
+        return React20.createElement(
           JsonValue,
           {
             name,
@@ -3370,7 +4307,7 @@ var _JsonNode = class _JsonNode extends Component2 {
           }
         );
       case DATE:
-        return React19.createElement(
+        return React20.createElement(
           JsonValue,
           {
             name,
@@ -3391,7 +4328,7 @@ var _JsonNode = class _JsonNode extends Component2 {
           }
         );
       case NULL:
-        return React19.createElement(
+        return React20.createElement(
           JsonValue,
           {
             name,
@@ -3412,7 +4349,7 @@ var _JsonNode = class _JsonNode extends Component2 {
           }
         );
       case UNDEFINED:
-        return React19.createElement(
+        return React20.createElement(
           JsonValue,
           {
             name,
@@ -3433,7 +4370,7 @@ var _JsonNode = class _JsonNode extends Component2 {
           }
         );
       case FUNCTION:
-        return React19.createElement(
+        return React20.createElement(
           JsonFunctionValue,
           {
             name,
@@ -3454,7 +4391,7 @@ var _JsonNode = class _JsonNode extends Component2 {
           }
         );
       case SYMBOL:
-        return React19.createElement(
+        return React20.createElement(
           JsonValue,
           {
             name,
@@ -3613,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;
@@ -3651,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,
@@ -3681,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,
@@ -3693,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,
@@ -3716,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) {
@@ -3827,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",
@@ -3844,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
@@ -3984,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,
@@ -4041,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
 };
 
@@ -4212,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) => {
@@ -4228,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,
@@ -4257,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",
@@ -4268,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,
@@ -4282,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 }) => ({
@@ -4466,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),
@@ -4476,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({
@@ -4504,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",
@@ -4523,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),
@@ -4536,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)({
@@ -4572,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,
@@ -4595,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 = {
@@ -4615,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 });
     }
@@ -4637,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",
@@ -4645,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 }) => ({
@@ -4713,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);
@@ -4790,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/);
@@ -4812,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;
   }
@@ -4825,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,
@@ -4841,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
@@ -4899,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 || {};
@@ -4907,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";
@@ -4933,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);
@@ -4943,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"
       ))
     }
@@ -4972,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 }) => ({
@@ -5054,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),
@@ -5071,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%",
@@ -5129,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 }) => ({
@@ -5330,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(
@@ -5347,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) {
@@ -5358,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,
@@ -5374,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,
@@ -5384,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,
@@ -5392,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,
@@ -5406,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");
 
@@ -5504,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(
@@ -5524,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
@@ -7075,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,
@@ -7103,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) {
@@ -7207,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?");
@@ -7335,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
@@ -7406,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 || {};
@@ -7468,12 +8305,12 @@ 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";
 import { styled as styled27 } from "storybook/theming";
-var { document } = globalThis;
+var { document: document2 } = globalThis;
 var assertIsFn = /* @__PURE__ */ __name((val) => {
   if (typeof val !== "function") {
     throw new Error(`Expected story function, got: ${val}`);
@@ -7510,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,
     {
@@ -7518,7 +8355,7 @@ var AnchorInPage = /* @__PURE__ */ __name(({ hash, children }) => {
       target: "_self",
       onClick: (event) => {
         const id = hash.substring(1);
-        const element = document.getElementById(id);
+        const element = document2.getElementById(id);
         if (element) {
           navigate(context, hash);
         }
@@ -7529,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 });
   }
@@ -7587,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(
@@ -7598,7 +8435,7 @@ var HeaderWithOcticonAnchor = /* @__PURE__ */ __name(({
       tabIndex: -1,
       target: "_self",
       onClick: (event) => {
-        const element = document.getElementById(id);
+        const element = document2.getElementById(id);
         if (element) {
           navigate(context, hash);
         }
@@ -7726,7 +8563,7 @@ import React53 from "react";
 // src/blocks/blocks/DocsContainer.tsx
 import React44, { useEffect as useEffect15 } from "react";
 import { ThemeProvider, ensure as ensureTheme } from "storybook/theming";
-var { document: document2, window: globalWindow3 } = globalThis;
+var { document: document3, window: globalWindow3 } = globalThis;
 var DocsContainer = /* @__PURE__ */ __name(({
   context,
   theme,
@@ -7744,7 +8581,7 @@ var DocsContainer = /* @__PURE__ */ __name(({
     try {
       url = new URL(globalWindow3.parent.location.toString());
       if (url.hash) {
-        const element = document2.getElementById(decodeURIComponent(url.hash.substring(1)));
+        const element = document3.getElementById(decodeURIComponent(url.hash.substring(1)));
         if (element) {
           setTimeout(() => {
             scrollToElement(element);
@@ -7774,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";
@@ -7894,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`,
@@ -7917,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) {
@@ -8085,7 +8922,8 @@ var _ExternalPreview = class _ExternalPreview extends Preview2 {
           importPath,
           title,
           name,
-          type: "story"
+          type: "story",
+          subtype: "story"
         };
       });
       this.onStoriesChanged({ storyIndex: this.storyIndex });
@@ -8143,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);
   }
@@ -8225,7 +9063,7 @@ export {
   format,
   formatDate,
   formatTime,
-  getStoryId2 as getStoryId,
+  getStoryId,
   getStoryProps,
   parse2 as parse,
   parseDate,