storybook 10.1.0-beta.3 → 10.1.0-beta.5

package/dist/manager/runtime.js

@@ -2262,7 +2262,7 @@ var manager_api_default = __STORYBOOK_API__, { ActiveTabs, Consumer, ManagerCont
 var theming_default = __STORYBOOK_THEMING__, { CacheProvider, ClassNames, Global, ThemeProvider, background, color, convert, create, createCache, createGlobal, createReset, css, darken, ensure, getPreferredColorScheme, ignoreSsrWarning, isPropValid, jsx, keyframes, lighten, styled, themes, tokens, typography, useTheme, withTheme } = __STORYBOOK_THEMING__;
 
 // global-externals:storybook/internal/components
-var components_default = __STORYBOOK_COMPONENTS__, { A, AbstractToolbar, ActionBar, AddonPanel, Badge, Bar, Blockquote, Button, Card, ClipboardCode, Code, Collapsible, DL, Div, DocumentWrapper, EmptyTabContent, ErrorFormatter, FlexBar, Form, H1, H2, H3, H4, H5, H6, HR, IconButton, Img, LI, Link, ListItem, Listbox, Loader, Modal, ModalDecorator, OL, P, Placeholder, Popover, PopoverProvider, Pre, ProgressSpinner, ResetWrapper, ScrollArea, Select, Separator, Spaced, Span, StatelessTab, StatelessTabList, StatelessTabPanel, StatelessTabsView, StorybookIcon: StorybookIcon2, StorybookLogo, SyntaxHighlighter, TT, TabBar, TabButton, TabList, TabPanel, TabWrapper, Table, Tabs, TabsState, TabsView, ToggleButton, Toolbar, Tooltip, TooltipLinkList, TooltipMessage, TooltipNote, TooltipProvider, UL, WithTooltip, WithTooltipPure, Zoom, codeCommon, components, convertToReactAriaPlacement, createCopyToClipboardFunction, getStoryHref, interleaveSeparators, nameSpaceClassNames, resetComponents, useTabsState, withReset } = __STORYBOOK_COMPONENTS__;
+var components_default = __STORYBOOK_COMPONENTS__, { A, AbstractToolbar, ActionBar, ActionList, AddonPanel, Badge, Bar, Blockquote, Button, Card, ClipboardCode, Code, Collapsible, DL, Div, DocumentWrapper, EmptyTabContent, ErrorFormatter, FlexBar, Form, H1, H2, H3, H4, H5, H6, HR, IconButton, Img, LI, Link, ListItem, Loader, Modal, ModalDecorator, OL, P, Placeholder, Popover, PopoverProvider, Pre, ProgressSpinner, ResetWrapper, ScrollArea, Select, Separator, Spaced, Span, StatelessTab, StatelessTabList, StatelessTabPanel, StatelessTabsView, StorybookIcon: StorybookIcon2, StorybookLogo, SyntaxHighlighter, TT, TabBar, TabButton, TabList, TabPanel, TabWrapper, Table, Tabs, TabsState, TabsView, ToggleButton, Toolbar, Tooltip, TooltipLinkList, TooltipMessage, TooltipNote, TooltipProvider, UL, WithTooltip, WithTooltipPure, Zoom, codeCommon, components, convertToReactAriaPlacement, createCopyToClipboardFunction, getStoryHref, interleaveSeparators, nameSpaceClassNames, resetComponents, useTabsState, withReset } = __STORYBOOK_COMPONENTS__;
 
 // src/toolbar/utils/normalize-toolbar-arg-type.ts
 var defaultItemValues = {
@@ -2606,8 +2606,8 @@ var ToolbarMenuItemContainer = styled("div")({
   }) => {
     let [globals, updateGlobals, storyGlobals] = useGlobals(), currentValue = globals[id], isOverridden = id in storyGlobals, icon = _icon, title2 = _title;
     preventDynamicIcon || (icon = getSelectedIcon({ currentValue, items }) || icon), dynamicTitle && (title2 = getSelectedTitle({ currentValue, items }) || title2), !title2 && !icon && console.warn(`Toolbar '${name}' has no title or icon`);
-    let resetLabel = items.find((item) => item.type === "reset")?.title, options2 = items.filter((item) => item.type === "item").filter((item) => item.value !== void 0).map((item) => {
-      let itemTitle = item.title ?? item.value, iconComponent = !item.hideIcon && item.icon ? react_default.createElement(Icons, { icon: item.icon, __suppressDeprecationWarning: !0 }) : void 0;
+    let resetLabel = items.find((item) => item.type === "reset")?.title, options2 = items.filter((item) => item.type === "item").map((item) => {
+      let itemTitle = item.title ?? item.value ?? "Untitled", iconComponent = !item.hideIcon && item.icon ? react_default.createElement(Icons, { icon: item.icon, __suppressDeprecationWarning: !0 }) : void 0;
       return item.right ? {
         title: itemTitle,
         value: item.value,
@@ -2621,7 +2621,7 @@ var ToolbarMenuItemContainer = styled("div")({
     return react_default.createElement(
       Select,
       {
-        defaultOptions: currentValue,
+        defaultOptions: [currentValue],
         options: options2,
         disabled: isOverridden,
         ariaLabel,
@@ -3128,19 +3128,19 @@ function _wrapNativeSuper(t2) {
     if (typeof t3 != "function") throw new TypeError("Super expression must either be null or a function");
     if (r3 !== void 0) {
       if (r3.has(t3)) return r3.get(t3);
-      r3.set(t3, Wrapper7);
+      r3.set(t3, Wrapper6);
     }
-    function Wrapper7() {
+    function Wrapper6() {
       return _construct(t3, arguments, _getPrototypeOf(this).constructor);
     }
-    return Wrapper7.prototype = Object.create(t3.prototype, {
+    return Wrapper6.prototype = Object.create(t3.prototype, {
       constructor: {
-        value: Wrapper7,
+        value: Wrapper6,
         enumerable: !1,
         writable: !0,
         configurable: !0
       }
-    }), _setPrototypeOf(Wrapper7, t3);
+    }), _setPrototypeOf(Wrapper6, t3);
   }, _wrapNativeSuper(t2);
 }
 
@@ -6537,6 +6537,19 @@ var storeOptions = {
 };
 var STORE_CHANNEL_EVENT_NAME = `UNIVERSAL_STORE:${storeOptions.id}`;
 
+// src/cli/AddonVitestService.constants.ts
+var SUPPORTED_FRAMEWORKS = [
+  "html-vite" /* HTML_VITE */,
+  "nextjs-vite" /* NEXTJS_VITE */,
+  "preact-vite" /* PREACT_VITE */,
+  "react-native-web-vite" /* REACT_NATIVE_WEB_VITE */,
+  "react-vite" /* REACT_VITE */,
+  "svelte-vite" /* SVELTE_VITE */,
+  "sveltekit" /* SVELTEKIT */,
+  "vue3-vite" /* VUE3_VITE */,
+  "web-components-vite" /* WEB_COMPONENTS_VITE */
+];
+
 // src/docs-tools/shared.ts
 var ADDON_ID5 = "storybook/docs", PANEL_ID3 = `${ADDON_ID5}/panel`;
 var SNIPPET_RENDERED = `${ADDON_ID5}/snippet-rendered`;
@@ -10641,6 +10654,30 @@ TourGuide.render = (props) => {
   );
 };
 
+// src/manager/hooks/useLocation.ts
+var LocationMonitor = {
+  _currentHref: globalThis.window?.location.href ?? "",
+  _intervalId: null,
+  _listeners: /* @__PURE__ */ new Set(),
+  start() {
+    this._intervalId === null && (this._intervalId = setInterval(() => {
+      let newLocation = globalThis.window.location;
+      newLocation.href !== this._currentHref && (this._currentHref = newLocation.href, this._listeners.forEach((listener) => listener(newLocation)));
+    }, 100));
+  },
+  stop() {
+    this._intervalId !== null && (clearInterval(this._intervalId), this._intervalId = null);
+  },
+  subscribe(...listeners) {
+    return listeners.forEach((listener) => this._listeners.add(listener)), this.start(), () => {
+      listeners.forEach((listener) => this._listeners.delete(listener)), this._listeners.size === 0 && this.stop();
+    };
+  }
+}, useLocationHash = () => {
+  let [hash, setHash] = useState(globalThis.window?.location.hash ?? "");
+  return useEffect(() => LocationMonitor.subscribe((location2) => setHash(location2.hash)), []), hash.slice(1);
+};
+
 // src/shared/checklist-store/checklistData.tsx
 var CodeWrapper = styled.div(({ theme }) => ({
   alignSelf: "stretch",
@@ -10652,8 +10689,13 @@ var CodeWrapper = styled.div(({ theme }) => ({
   ".linenumber": {
     opacity: 0.5
   }
-})), CodeSnippet = (props) => react_default.createElement(ThemeProvider, { theme: convert(themes.dark) }, react_default.createElement(CodeWrapper, null, react_default.createElement(SyntaxHighlighter, { ...props }))), subscribeToIndex = (condition) => ({ api, done }) => {
-  let check = () => condition(api.getIndex()?.entries || {});
+})), CodeSnippet = (props) => react_default.createElement(ThemeProvider, { theme: convert(themes.dark) }, react_default.createElement(CodeWrapper, null, react_default.createElement(SyntaxHighlighter, { ...props }))), isExample = (id) => id.startsWith("example-") || id.startsWith("configure-your-project--"), subscribeToIndex = (condition) => ({ api, done }) => {
+  let check = () => condition(
+    Object.entries(api.getIndex()?.entries || {}).reduce(
+      (acc, [id, entry]) => isExample(entry.id) ? acc : Object.assign(acc, { [id]: entry }),
+      {}
+    )
+  );
   if (check())
     done();
   else
@@ -10699,7 +10741,10 @@ var CodeWrapper = styled.div(({ theme }) => ({
           id: "renderComponent",
           label: "Render a component",
           criteria: "A story finished rendering successfully",
-          subscribe: ({ api, done }) => api.on(STORY_FINISHED, ({ status }) => status === "success" && done()),
+          subscribe: ({ api, done }) => api.on(
+            STORY_FINISHED,
+            ({ storyId, status }) => status === "success" && !isExample(storyId) && done()
+          ),
           content: ({ api }) => react_default.createElement(react_default.Fragment, null, react_default.createElement("p", null, "Storybook renders your components in isolation, using stories. That allows you to work on the bit of UI you need, without worrying about the rest of the app."), react_default.createElement("p", null, "Rendering your components can often require", " ", react_default.createElement(
             Link,
             {
@@ -10786,7 +10831,7 @@ export const Primary: Story = {
           criteria: "At least 5 components exist in the index",
           subscribe: subscribeToIndex((entries) => {
             let stories = Object.values(entries).filter(
-              (entry) => entry.type === "story" && !entry.id.startsWith("example-")
+              (entry) => entry.type === "story"
             );
             return new Set(stories.map(({ title: title2 }) => title2)).size >= 5;
           })
@@ -10819,7 +10864,7 @@ export const Primary: Story = {
           ))),
           criteria: "At least 20 stories exist in the index",
           subscribe: subscribeToIndex((entries) => Object.values(entries).filter(
-            (entry) => entry.type === "story" && !entry.id.startsWith("example-")
+            (entry) => entry.type === "story"
           ).length >= 20)
         },
         {
@@ -10828,10 +10873,9 @@ export const Primary: Story = {
           criteria: "What's New page is opened",
           action: {
             label: "Go",
-            onClick: ({ api, accept }) => {
-              api.navigate("/settings/whats-new"), accept();
-            }
-          }
+            onClick: ({ api }) => api.navigate("/settings/whats-new")
+          },
+          subscribe: ({ accept }) => LocationMonitor.subscribe((l3) => l3.search.endsWith("/settings/whats-new") && accept())
         }
       ]
     },
@@ -10943,8 +10987,7 @@ export default {
           id: "installVitest",
           label: "Install Vitest addon",
           afterCompletion: "unavailable",
-          available: () => !0,
-          // TODO check for compatibility with the project
+          available: () => !!globalThis.STORYBOOK_FRAMEWORK && SUPPORTED_FRAMEWORKS.includes(globalThis.STORYBOOK_FRAMEWORK),
           criteria: "@storybook/addon-vitest registered in .storybook/main.js|ts",
           subscribe: ({ done }) => {
             addons.experimental_getRegisteredAddons().includes(ADDON_ID4) && done();
@@ -11047,7 +11090,7 @@ export default {
           criteria: "At least one story with a play or test function",
           subscribe: subscribeToIndex(
             (entries) => Object.values(entries).some(
-              ({ id, tags }) => !id.startsWith("example-") && (tags?.includes("play-fn") || tags?.includes("test-fn"))
+              (entry) => entry.tags?.includes("play-fn") || entry.tags?.includes("test-fn")
             )
           ),
           content: ({ api }) => react_default.createElement(react_default.Fragment, null, react_default.createElement("p", null, "When you need to test non-visual or particularly complex behavior of a component, add a play function."), react_default.createElement(CodeSnippet, { language: "typescript" }, `// Button.stories.ts
@@ -11319,16 +11362,16 @@ export const Disabled: Story = {
           label: "Automatically document your components",
           criteria: "At least one component with the autodocs tag applied",
           subscribe: subscribeToIndex(
-            (entries) => Object.values(entries).some(
-              ({ id, tags }) => !id.startsWith("example-") && tags?.includes("autodocs")
-            )
+            (entries) => Object.values(entries).some((entry) => entry.tags?.includes("autodocs"))
           ),
-          content: ({ api }) => react_default.createElement(react_default.Fragment, null, react_default.createElement("p", null, "Add the autodocs tag to a component's meta to automatically generate documentation for that component, complete with examples, source code, an API table, and a description."), react_default.createElement(CodeSnippet, { language: "typescript" }, `// Button.stories.ts
+          content: ({ api }) => react_default.createElement(react_default.Fragment, null, react_default.createElement("p", null, "Add the autodocs tag to a component's meta to automatically generate documentation for that component, complete with examples, source code, an API table, and a description."), react_default.createElement(CodeSnippet, { language: "typescript" }, `// Button.stories.js
 
-export default {
+const meta = {
   component: Button,
   tags: ['autodocs'], // \u{1F448} Add this tag
-}`), react_default.createElement("p", null, "That tag can also be applied in ", react_default.createElement("code", null, ".storybook/preview.ts"), ", to generate documentation for ", react_default.createElement("em", null, "all"), " components."), react_default.createElement(
+}
+  
+export default meta;`), react_default.createElement("p", null, "That tag can also be applied in ", react_default.createElement("code", null, ".storybook/preview.ts"), ", to generate documentation for ", react_default.createElement("em", null, "all"), " components."), react_default.createElement(
             "img",
             {
               src: api.getDocsUrl({
@@ -11356,9 +11399,7 @@ export default {
           label: "Custom content with MDX",
           criteria: "At least one MDX page",
           subscribe: subscribeToIndex(
-            (entries) => Object.values(entries).some(
-              ({ id, type }) => type === "docs" && !id.startsWith("example-")
-            )
+            (entries) => Object.values(entries).some((entry) => entry.type === "docs")
           ),
           content: ({ api }) => react_default.createElement(react_default.Fragment, null, react_default.createElement("p", null, "You can use MDX (markdown + React components) to provide an introduction to your project, document things like design tokens, or go beyond the automatic documentation for your components."), react_default.createElement("p", null, "For a start, create an ", react_default.createElement("code", null, "introduction.mdx"), " file and (using markdown and Storybook's", " ", react_default.createElement(
             Link,
@@ -11558,7 +11599,7 @@ var Key = styled.span(({ theme }) => ({
       onClick: () => api.changeSettingsTab("guide"),
       closeOnClick: !0,
       icon: react_default.createElement(ListUnorderedIcon, null),
-      right: progress < 100 && react_default.createElement(Listbox.Button, { as: "div", readOnly: !0, padding: "none", ariaLabel: `${progress}% completed` }, react_default.createElement(ProgressCircle, { percentage: progress, running: !1, size: 16, width: 1.5 }), progress, "%")
+      right: progress < 100 && react_default.createElement(ActionList.Button, { as: "div", readOnly: !0, padding: "none", ariaLabel: `${progress}% completed` }, react_default.createElement(ProgressCircle, { percentage: progress, running: !1, size: 16, width: 1.5 }), progress, "%")
     }),
     [api, progress]
   ), shortcuts = useMemo(
@@ -11652,7 +11693,7 @@ var Key = styled.span(({ theme }) => ({
     title: "Documentation",
     closeOnClick: !0,
     href: api.getDocsUrl({ versioned: !0, renderer: !0 }),
-    right: react_default.createElement(Listbox.Icon, null, react_default.createElement(ShareAltIcon, null)),
+    right: react_default.createElement(ActionList.Icon, null, react_default.createElement(ShareAltIcon, null)),
     icon: react_default.createElement(DocumentIcon, null)
   }), [api]), getAddonsShortcuts = useCallback(() => {
     let addonsShortcuts = api.getAddonsShortcuts(), keys = shortcutKeys;
@@ -12048,7 +12089,7 @@ var fadeScaleIn = keyframes`
   "&:hover #checklist-module-collapse-toggle": {
     opacity: 1
   }
-}), CollapseToggle = styled(Listbox.Button)({
+}), CollapseToggle = styled(ActionList.Button)({
   opacity: 0,
   transition: "opacity var(--transition-duration, 0.2s)",
   "&:focus, &:hover": {
@@ -12092,20 +12133,20 @@ var fadeScaleIn = keyframes`
     default:
       return "Become an expert";
   }
-}, OpenGuideAction = ({
+}, OpenGuideButton = ({
   children,
   afterClick
 }) => {
   let api = useStorybookApi();
   return react_default.createElement(
-    Listbox.Action,
+    ActionList.Action,
     {
       ariaLabel: "Open onboarding guide",
       onClick: (e2) => {
         e2.stopPropagation(), api.navigate("/settings/guide"), afterClick?.();
       }
     },
-    react_default.createElement(Listbox.Icon, null, react_default.createElement(ListUnorderedIcon, null)),
+    react_default.createElement(ActionList.Icon, null, react_default.createElement(ListUnorderedIcon, null)),
     children
   );
 }, ChecklistWidget = () => {
@@ -12128,13 +12169,13 @@ var fadeScaleIn = keyframes`
     {
       collapsed: !hasItems,
       disabled: !hasItems,
-      summary: ({ isCollapsed, toggleCollapsed, toggleProps }) => react_default.createElement(Listbox, { onClick: toggleCollapsed }, react_default.createElement(Listbox.Item, null, react_default.createElement(Listbox.Item, { style: { flexShrink: 1 } }, loaded && react_default.createElement(
+      summary: ({ isCollapsed, toggleCollapsed, toggleProps }) => react_default.createElement(ActionList, { as: "div", onClick: toggleCollapsed }, react_default.createElement(ActionList.Item, { as: "div" }, react_default.createElement(ActionList.Item, { as: "div", style: { flexShrink: 1 } }, loaded && react_default.createElement(
         Optional,
         {
-          content: react_default.createElement(OpenGuideAction, null, react_default.createElement("strong", null, title(progress))),
-          fallback: react_default.createElement(OpenGuideAction, null)
+          content: react_default.createElement(OpenGuideButton, null, react_default.createElement("strong", null, title(progress))),
+          fallback: react_default.createElement(OpenGuideButton, null)
         }
-      )), react_default.createElement(Listbox.Item, null, react_default.createElement(
+      )), react_default.createElement(ActionList.Item, { as: "div" }, react_default.createElement(
         CollapseToggle,
         {
           ...toggleProps,
@@ -12152,24 +12193,23 @@ var fadeScaleIn = keyframes`
           }
         )
       ), loaded && react_default.createElement(
-        WithTooltip,
+        PopoverProvider,
         {
-          as: "div",
-          closeOnOutsideClick: !0,
-          tooltip: ({ onHide }) => react_default.createElement(Listbox, { as: "ul" }, react_default.createElement(Listbox.Item, { as: "li" }, react_default.createElement(OpenGuideAction, { afterClick: onHide }, react_default.createElement(Listbox.Text, null, "Open full guide"))), react_default.createElement(Listbox.Item, { as: "li" }, react_default.createElement(
-            Listbox.Action,
+          padding: 0,
+          popover: ({ onHide }) => react_default.createElement(ActionList, null, react_default.createElement(ActionList.Item, null, react_default.createElement(OpenGuideButton, { afterClick: onHide }, react_default.createElement(ActionList.Text, null, "Open full guide"))), react_default.createElement(ActionList.Item, null, react_default.createElement(
+            ActionList.Action,
             {
               ariaLabel: !1,
               onClick: (e2) => {
                 e2.stopPropagation(), mute(allItems.map(({ id }) => id)), onHide();
               }
             },
-            react_default.createElement(Listbox.Icon, null, react_default.createElement(EyeCloseIcon, null)),
-            react_default.createElement(Listbox.Text, null, "Remove from sidebar")
+            react_default.createElement(ActionList.Icon, null, react_default.createElement(EyeCloseIcon, null)),
+            react_default.createElement(ActionList.Text, null, "Remove from sidebar")
           )))
         },
         react_default.createElement(
-          Listbox.Button,
+          ActionList.Button,
           {
             ariaLabel: `${progress}% completed`,
             onClick: (e2) => e2.stopPropagation()
@@ -12187,39 +12227,29 @@ var fadeScaleIn = keyframes`
         )
       ))))
     },
-    react_default.createElement(Listbox, { as: "ul" }, transitionItems.map(
-      ([item, { status, isMounted }]) => isMounted && react_default.createElement(
-        Listbox.HoverItem,
+    react_default.createElement(ActionList, null, transitionItems.map(
+      ([item, { status, isMounted }]) => isMounted && react_default.createElement(ActionList.HoverItem, { key: item.id, targetId: item.id, transitionStatus: status }, react_default.createElement(
+        ActionList.Action,
         {
-          as: "li",
-          key: item.id,
-          targetId: item.id,
-          transitionStatus: status
+          ariaLabel: `Open onboarding guide for ${item.label}`,
+          onClick: () => api.navigate(`/settings/guide#${item.id}`)
         },
-        react_default.createElement(
-          Listbox.Action,
-          {
-            ariaLabel: `Open onboarding guide for ${item.label}`,
-            onClick: () => api.navigate(`/settings/guide#${item.id}`)
-          },
-          react_default.createElement(Listbox.Icon, null, item.isCompleted ? react_default.createElement(Particles, { anchor: Checked, key: item.id }) : react_default.createElement(StatusFailIcon, null)),
-          react_default.createElement(Listbox.Text, null, react_default.createElement(ItemLabel, { isCompleted: item.isCompleted, isSkipped: item.isSkipped }, item.label))
-        ),
-        item.action && react_default.createElement(
-          Listbox.Button,
-          {
-            "data-target-id": item.id,
-            ariaLabel: !1,
-            onClick: (e2) => {
-              e2.stopPropagation(), item.action?.onClick({
-                api,
-                accept: () => accept(item.id)
-              });
-            }
-          },
-          item.action.label
-        )
-      )
+        react_default.createElement(ActionList.Icon, null, item.isCompleted ? react_default.createElement(Particles, { anchor: Checked, key: item.id }) : react_default.createElement(StatusFailIcon, null)),
+        react_default.createElement(ActionList.Text, null, react_default.createElement(ItemLabel, { isCompleted: item.isCompleted, isSkipped: item.isSkipped }, item.label))
+      ), item.action && react_default.createElement(
+        ActionList.Button,
+        {
+          "data-target-id": item.id,
+          ariaLabel: !1,
+          onClick: (e2) => {
+            e2.stopPropagation(), item.action?.onClick({
+              api,
+              accept: () => accept(item.id)
+            });
+          }
+        },
+        item.action.label
+      ))
     ))
   )));
 };
@@ -13764,7 +13794,7 @@ var { window: globalWindow2 } = scope, TextStyle = styled.div(({ theme }) => ({
 ), " ", "in your story files.", " "))) : react_default.createElement(Text3, null, "This composed Storybook is empty. Perhaps no stories match your selected filters.")))), LoaderBlock = ({ isMain }) => react_default.createElement(Contained, null, react_default.createElement(Loader2, { size: isMain ? 17 : 5 }));
 
 // src/manager/components/sidebar/RefIndicator.tsx
-var { document: document4, window: globalWindow3 } = scope, IndicatorPlacement = styled.aside(({ theme }) => ({
+var { document: document4, window: globalWindow3 } = scope, IndicatorPlacement = styled.div(({ theme }) => ({
   height: 16,
   display: "flex",
   alignItems: "center",
@@ -14090,6 +14120,7 @@ var withStatusColor = ({ theme, status }) => {
     "&:focus": {
       color: theme.color.secondary,
       borderColor: theme.color.secondary,
+      outlineOffset: -2,
       "&:not(:focus-visible)": {
         borderColor: "transparent"
       }
@@ -14104,6 +14135,9 @@ var withStatusColor = ({ theme, status }) => {
 ), StatusButton = forwardRef((props, ref) => react_default.createElement(StyledButton, { variant: "ghost", padding: "small", ...props, ref }));
 StatusButton.displayName = "StatusButton";
 
+// src/manager/components/sidebar/StatusContext.tsx
+var StatusContext = createContext({});
+
 // src/manager/components/sidebar/ContextMenu.tsx
 var empty = {
   onMouseEnter: () => {
@@ -14119,7 +14153,7 @@ var empty = {
     outlineOffset: -2
   }
 }), useContextMenu = (context, links, api) => {
-  let [hoverCount, setHoverCount] = useState(0), [isOpen, setIsOpen] = useState(!1), [copyText, setCopyText] = react_default.useState("Copy story name"), shortcutKeys = api.getShortcutKeys(), enableShortcuts = !!shortcutKeys, topLinks = useMemo(() => {
+  let [hoverCount, setHoverCount] = useState(0), [isOpen, setIsOpen] = useState(!1), [copyText, setCopyText] = react_default.useState("Copy story name"), { allStatuses, groupStatus } = useContext(StatusContext), shortcutKeys = api.getShortcutKeys(), enableShortcuts = !!shortcutKeys, topLinks = useMemo(() => {
     let defaultLinks = [];
     return context && "importPath" in context && defaultLinks.push({
       id: "open-in-editor",
@@ -14146,7 +14180,7 @@ var empty = {
         }, 2e3);
       }
     }), defaultLinks;
-  }, [context, copyText, enableShortcuts, shortcutKeys]), handlers = useMemo(() => ({
+  }, [api, context, copyText, enableShortcuts, shortcutKeys]), handlers = useMemo(() => ({
     onMouseEnter: () => {
       setHoverCount((c2) => c2 + 1);
     },
@@ -14159,7 +14193,20 @@ var empty = {
   }), []), providerLinks = useMemo(() => {
     let registeredTestProviders = api.getElements(Addon_TypesEnum.experimental_TEST_PROVIDER);
     return hoverCount ? generateTestProviderLinks(registeredTestProviders, context) : [];
-  }, [api, context, hoverCount]), shouldRender = !context.refId && (providerLinks.length > 0 || links.length > 0 || topLinks.length > 0);
+  }, [api, context, hoverCount]), shouldRender = !context.refId && (providerLinks.length > 0 || links.length > 0 || topLinks.length > 0), isLeafNode = context.type === "story" || context.type === "docs", itemStatus = useMemo(() => {
+    let status = "status-value:unknown";
+    if (!context)
+      return status;
+    if (isLeafNode) {
+      let values = Object.values(allStatuses?.[context.id] || {}).map((s2) => s2.value);
+      status = getMostCriticalStatusValue(values);
+    }
+    if (!isLeafNode) {
+      let groupValue = groupStatus && groupStatus[context.id];
+      status = groupValue === "status-value:success" || groupValue === void 0 ? "status-value:unknown" : groupValue;
+    }
+    return status;
+  }, [allStatuses, groupStatus, context, isLeafNode]), MenuIcon2 = useMemo(() => context.type !== "story" && context.type !== "docs" ? itemStatus !== "status-value:success" && itemStatus !== "status-value:unknown" ? react_default.createElement("svg", { key: "icon", viewBox: "0 0 6 6", width: "6", height: "6" }, react_default.createElement(UseSymbol, { type: "dot" })) : react_default.createElement(EllipsisIcon, null) : itemStatus === "status-value:error" ? react_default.createElement("svg", { key: "icon", viewBox: "0 0 14 14", width: "14", height: "14" }, react_default.createElement(UseSymbol, { type: "error" })) : itemStatus === "status-value:warning" ? react_default.createElement("svg", { key: "icon", viewBox: "0 0 14 14", width: "14", height: "14" }, react_default.createElement(UseSymbol, { type: "warning" })) : itemStatus === "status-value:success" ? react_default.createElement("svg", { key: "icon", viewBox: "0 0 14 14", width: "14", height: "14" }, react_default.createElement(UseSymbol, { type: "success" })) : react_default.createElement(EllipsisIcon, null), [itemStatus, context.type]);
   return useMemo(() => globalThis.CONFIG_TYPE !== "DEVELOPMENT" ? empty : {
     onMouseEnter: handlers.onMouseEnter,
     node: shouldRender ? react_default.createElement(
@@ -14180,13 +14227,13 @@ var empty = {
           "data-testid": "context-menu",
           ariaLabel: "Open context menu",
           type: "button",
-          status: "status-value:pending",
+          status: itemStatus,
           onClick: handlers.onOpen
         },
-        react_default.createElement(EllipsisIcon, null)
+        MenuIcon2
       )
     ) : null
-  }, [context, handlers, isOpen, shouldRender, links, topLinks]);
+  }, [context, handlers, isOpen, shouldRender, links, topLinks, itemStatus, MenuIcon2]);
 }, LiveContextMenu = ({
   context,
   links,
@@ -14209,33 +14256,6 @@ function generateTestProviderLinks(registeredTestProviders, context) {
   }).filter(Boolean);
 }
 
-// src/manager/components/sidebar/StatusContext.tsx
-var StatusContext = createContext({}), useStatusSummary = (item) => {
-  let { data, allStatuses, groupStatus } = useContext(StatusContext), summary = {
-    counts: {
-      "status-value:pending": 0,
-      "status-value:success": 0,
-      "status-value:error": 0,
-      "status-value:warning": 0,
-      "status-value:unknown": 0
-    },
-    statusesByValue: {
-      "status-value:pending": {},
-      "status-value:success": {},
-      "status-value:error": {},
-      "status-value:warning": {},
-      "status-value:unknown": {}
-    }
-  };
-  if (data && allStatuses && groupStatus && ["status-value:pending", "status-value:warning", "status-value:error"].includes(
-    groupStatus[item.id]
-  ))
-    for (let storyId of getDescendantIds(data, item.id, !1))
-      for (let status of Object.values(allStatuses[storyId] ?? {}))
-        summary.counts[status.value]++, summary.statusesByValue[status.value][storyId] ??= [], summary.statusesByValue[status.value][storyId].push(status);
-  return summary;
-};
-
 // src/manager/components/sidebar/components/CollapseIcon.tsx
 var CollapseIconWrapper = styled.div(({ theme, isExpanded }) => ({
   width: 8,
@@ -14578,47 +14598,19 @@ var statusOrder = [
     setExpanded,
     onSelectStoryId,
     api
-  } = props, theme = useTheme(), { isDesktop, isMobile: isMobile2, setMobileMenuOpen } = useLayout(), { counts, statusesByValue } = useStatusSummary(item);
+  } = props, theme = useTheme(), { isDesktop, isMobile: isMobile2, setMobileMenuOpen } = useLayout();
   if (!isDisplayed)
     return null;
-  let statusLinks = useMemo(() => {
-    if (item.type === "story" || item.type === "docs")
-      return Object.entries(statuses).filter(([, status]) => status.sidebarContextMenu !== !1).sort((a2, b2) => statusOrder.indexOf(a2[1].value) - statusOrder.indexOf(b2[1].value)).map(([typeId, status]) => ({
-        id: typeId,
-        title: status.title,
-        description: status.description,
-        "aria-label": `Test status for ${status.title}: ${status.value}`,
-        icon: StatusIconMap[status.value],
-        onClick: () => {
-          onSelectStoryId(item.id), internal_fullStatusStore.selectStatuses([status]);
-        }
-      }));
-    if (item.type === "component" || item.type === "group") {
-      let links = [], errorCount = counts["status-value:error"], warningCount = counts["status-value:warning"];
-      return errorCount && links.push({
-        id: "errors",
-        icon: StatusIconMap["status-value:error"],
-        title: `${errorCount} ${errorCount === 1 ? "story" : "stories"} with errors`,
-        onClick: () => {
-          let [firstStoryId] = Object.entries(statusesByValue["status-value:error"])[0];
-          onSelectStoryId(firstStoryId);
-          let errorStatuses = Object.values(statusesByValue["status-value:error"]).flat();
-          internal_fullStatusStore.selectStatuses(errorStatuses);
-        }
-      }), warningCount && links.push({
-        id: "warnings",
-        icon: StatusIconMap["status-value:warning"],
-        title: `${warningCount} ${warningCount === 1 ? "story" : "stories"} with warnings`,
-        onClick: () => {
-          let [firstStoryId] = Object.entries(statusesByValue["status-value:warning"])[0];
-          onSelectStoryId(firstStoryId);
-          let warningStatuses = Object.values(statusesByValue["status-value:warning"]).flat();
-          internal_fullStatusStore.selectStatuses(warningStatuses);
-        }
-      }), links;
+  let statusLinks = useMemo(() => item.type === "story" || item.type === "docs" ? Object.entries(statuses).filter(([, status]) => status.sidebarContextMenu !== !1).sort((a2, b2) => statusOrder.indexOf(a2[1].value) - statusOrder.indexOf(b2[1].value)).map(([typeId, status]) => ({
+    id: typeId,
+    title: status.title,
+    description: status.description,
+    "aria-label": `Test status for ${status.title}: ${status.value}`,
+    icon: StatusIconMap[status.value],
+    onClick: () => {
+      onSelectStoryId(item.id), internal_fullStatusStore.selectStatuses([status]);
     }
-    return [];
-  }, [counts, item.id, item.type, onSelectStoryId, statuses, statusesByValue]), id = createId(item.id, refId), contextMenu = refId === "storybook_internal" ? useContextMenu(item, statusLinks, api) : { node: null, onMouseEnter: () => {
+  })) : [], [item.id, item.type, onSelectStoryId, statuses]), id = createId(item.id, refId), contextMenu = refId === "storybook_internal" ? useContextMenu(item, statusLinks, api) : { node: null, onMouseEnter: () => {
   } };
   if (item.type === "story" && !("children" in item && item.children) && (!("subtype" in item) || item.subtype !== "test") || item.type === "docs") {
     let LeafNode3 = item.type === "docs" ? DocumentNode : StoryNode, statusValue = getMostCriticalStatusValue(
@@ -15223,8 +15215,8 @@ var buttonStyleAdditions = ({
 }), SidebarButton = styled(Button)(buttonStyleAdditions), SidebarToggleButton = styled(ToggleButton)(buttonStyleAdditions), MenuButtonGroup = styled.div({
   display: "flex",
   gap: 6
-}), SidebarMenuList = ({ menu, onHide }) => react_default.createElement(Container6, null, menu.filter((links) => links.length).flatMap((links) => react_default.createElement(Listbox, { as: "ul", key: links.map((link) => link.id).join("_") }, links.map((link) => react_default.createElement(Listbox.Item, { as: "li", key: link.id, active: link.active }, react_default.createElement(
-  Listbox.Action,
+}), SidebarMenuList = ({ menu, onHide }) => react_default.createElement(Container6, null, menu.filter((links) => links.length).flatMap((links) => react_default.createElement(ActionList, { key: links.map((link) => link.id).join("_") }, links.map((link) => react_default.createElement(ActionList.Item, { key: link.id, active: link.active }, react_default.createElement(
+  ActionList.Action,
   {
     ...link.href && { as: "a", href: link.href, target: "_blank" },
     ariaLabel: !1,
@@ -15244,8 +15236,8 @@ var buttonStyleAdditions = ({
       }), link.closeOnClick && onHide();
     }
   },
-  (link.icon || link.input) && react_default.createElement(Listbox.Icon, null, link.icon || link.input),
-  (link.title || link.center) && react_default.createElement(Listbox.Text, null, link.title || link.center),
+  (link.icon || link.input) && react_default.createElement(ActionList.Icon, null, link.icon || link.input),
+  (link.title || link.center) && react_default.createElement(ActionList.Text, null, link.title || link.center),
   link.right
 )))))), SidebarMenu = ({ menu, isHighlighted, onClick }) => {
   let [isTooltipVisible, setIsTooltipVisible] = useState(!1), { isMobile: isMobile2, setMobileMenuOpen } = useLayout();
@@ -17679,7 +17671,7 @@ var { document: document7 } = scope, DEFAULT_MAX_SEARCH_RESULTS = 50, options =
               variant: "ghost",
               ariaLabel: "Clear search",
               onClick: () => {
-                reset({ inputValue: "" }), closeMenu();
+                reset({ inputValue: "" }), closeMenu(), inputRef.current?.focus();
               }
             },
             react_default.createElement(CloseIcon, null)
@@ -17929,14 +17921,32 @@ var DEFAULT_HEIGHT = 500, HoverCard2 = styled(Card)({
   display: "flex",
   justifyContent: "flex-end",
   gap: 4
-}), CollapseToggle2 = styled(Button)({
+}), CollapseToggle2 = styled(ActionList.Button)({
   opacity: 0,
   transition: "opacity 250ms",
   "&:focus, &:hover": {
     opacity: 1
   }
-}), RunButton = ({ children, ...props }) => react_default.createElement(Button, { size: "medium", variant: "ghost", padding: "small", ...props }, react_default.createElement(PlayAllHollowIcon, null), children), StatusButton2 = styled(ToggleButton)(
-  { minWidth: 28 },
+}), RunButton = ({
+  children,
+  isRunning,
+  onRunAll,
+  ...props
+}) => react_default.createElement(
+  ActionList.Button,
+  {
+    ariaLabel: isRunning ? "Running..." : "Run tests",
+    tooltip: isRunning ? "Running tests..." : "Start all tests",
+    disabled: isRunning,
+    onClick: (e2) => {
+      e2.stopPropagation(), onRunAll();
+    },
+    ...props
+  },
+  react_default.createElement(ActionList.Icon, null, react_default.createElement(PlayAllHollowIcon, null)),
+  children
+), StatusButton2 = styled(ActionList.Toggle)(
+  { minWidth: 28, outlineOffset: -2 },
   ({ pressed, status, theme }) => !pressed && (theme.base === "light" ? {
     background: {
       negative: theme.background.negative,
@@ -18023,36 +18033,12 @@ var DEFAULT_HEIGHT = 500, HoverCard2 = styled(Card)({
     react_default.createElement(Bar2, { ...hasTestProviders ? { onClick: (e2) => toggleCollapsed(e2) } : {} }, react_default.createElement(Action, null, hasTestProviders && react_default.createElement(
       Optional,
       {
-        content: react_default.createElement(
-          RunButton,
-          {
-            ariaLabel: !1,
-            tooltip: isRunning ? "Running tests..." : "Start all tests",
-            disabled: isRunning,
-            onClick: (e2) => {
-              e2.stopPropagation(), onRunAll();
-            }
-          },
-          react_default.createElement("span", null, isRunning ? "Running..." : "Run tests")
-        ),
-        fallback: react_default.createElement(
-          RunButton,
-          {
-            ariaLabel: isRunning ? "Running..." : "Run tests",
-            tooltip: isRunning ? "Running tests..." : "Start all tests",
-            disabled: isRunning,
-            onClick: (e2) => {
-              e2.stopPropagation(), onRunAll();
-            }
-          }
-        )
+        content: react_default.createElement(RunButton, { isRunning, onRunAll }, isRunning ? "Running..." : "Run tests"),
+        fallback: react_default.createElement(RunButton, { isRunning, onRunAll })
       }
     )), react_default.createElement(Filters, null, hasTestProviders && react_default.createElement(
       CollapseToggle2,
       {
-        size: "medium",
-        variant: "ghost",
-        padding: "small",
         onClick: (e2) => toggleCollapsed(e2),
         id: "testing-module-collapse-toggle",
         ariaLabel: isCollapsed ? "Expand testing module" : "Collapse testing module"
@@ -18099,12 +18085,9 @@ var DEFAULT_HEIGHT = 500, HoverCard2 = styled(Card)({
       },
       warningCount < 1e3 ? warningCount : "999+"
     ), hasStatuses && react_default.createElement(
-      Button,
+      ActionList.Button,
       {
         id: "clear-statuses",
-        padding: "small",
-        variant: "ghost",
-        size: "medium",
         onClick: (e2) => {
           e2.stopPropagation(), clearStatuses();
         },
@@ -18236,38 +18219,12 @@ var groupByType = (filters) => filters.reduce(
   {}
 ), Wrapper5 = styled.div({
   minWidth: 240,
-  maxWidth: 300
-}), Actions2 = styled.div(({ theme }) => ({
-  display: "flex",
-  justifyContent: "space-between",
-  gap: 4,
-  padding: 4,
-  borderBottom: `1px solid ${theme.appBorderColor}`
-})), TagRow = styled.div({
-  display: "flex",
-  "& button:last-of-type": {
-    width: 64,
-    maxWidth: 64,
-    marginLeft: 4,
-    paddingLeft: 0,
-    paddingRight: 0,
-    fontWeight: "normal",
-    transition: "max-width 150ms"
-  },
-  "&:not(:hover):not(:focus-within)": {
-    "& button:last-of-type": {
-      marginLeft: 0,
-      maxWidth: 0,
-      opacity: 0
-    },
-    "& svg + input": {
-      display: "none"
-    }
-  }
-}), Label = styled.div({
+  maxWidth: 300,
+  maxHeight: 15.5 * 32 + 8,
+  // 15.5 items at 32px each + 8px padding
   overflow: "hidden",
-  textOverflow: "ellipsis",
-  whiteSpace: "nowrap"
+  overflowY: "auto",
+  scrollbarWidth: "thin"
 }), MutedText = styled.span(({ theme }) => ({
   color: theme.textMutedColor
 })), TagsFilterPanel = ({
@@ -18278,7 +18235,6 @@ var groupByType = (filters) => filters.reduce(
   toggleFilter,
   setAllFilters,
   resetFilters,
-  isDevelopment,
   isDefaultSelection,
   hasDefaultSelection
 }) => {
@@ -18289,91 +18245,72 @@ var groupByType = (filters) => filters.reduce(
     icon,
     count
   }) => {
-    let onToggle = (selected, excluded) => toggleFilter(id, selected, excluded), isIncluded = includedFilters.has(id), isExcluded = excludedFilters.has(id), isChecked = isIncluded || isExcluded, toggleTagLabel = `${isChecked ? "Remove" : "Add"} ${type} filter: ${title2}`, invertButtonLabel = `${isExcluded ? "Include" : "Exclude"} ${type}: ${title2}`;
+    let onToggle = (selected, excluded) => toggleFilter(id, selected, excluded), isIncluded = includedFilters.has(id), isExcluded = excludedFilters.has(id), isChecked = isIncluded || isExcluded, toggleLabel = `${type} filter: ${isExcluded ? `exclude ${title2}` : title2}`, toggleTooltip = `${isChecked ? "Remove" : "Add"} ${type} filter: ${title2}`, invertButtonLabel = `${isExcluded ? "Include" : "Exclude"} ${type}: ${title2}`;
     if (!(count === 0 && type === "built-in"))
       return {
         id: `filter-${type}-${id}`,
-        content: react_default.createElement(TagRow, null, react_default.createElement(TooltipProvider, { delayShow: 1e3, tooltip: react_default.createElement(TooltipNote, { note: toggleTagLabel }) }, react_default.createElement(
-          ListItem,
+        content: react_default.createElement(ActionList.HoverItem, { targetId: `filter-${type}-${id}` }, react_default.createElement(ActionList.Action, { as: "label", tabIndex: -1, tooltip: toggleTooltip }, react_default.createElement(ActionList.Icon, null, isExcluded ? react_default.createElement(DeleteIcon, null) : isIncluded ? null : icon, react_default.createElement(
+          Form.Checkbox,
           {
-            style: { minWidth: 0, flex: 1 },
-            onClick: () => onToggle(!isChecked),
-            icon: react_default.createElement(react_default.Fragment, null, isExcluded ? react_default.createElement(DeleteIcon, null) : isIncluded ? null : icon, react_default.createElement(
-              Form.Checkbox,
-              {
-                checked: isChecked,
-                onChange: () => onToggle(!isChecked),
-                "data-tag": title2,
-                "aria-hidden": !0,
-                tabIndex: -1
-              }
-            )),
-            "aria-label": toggleTagLabel,
-            title: react_default.createElement(Label, null, title2, isExcluded && react_default.createElement(MutedText, null, " (excluded)")),
-            right: isExcluded ? react_default.createElement("s", null, count) : react_default.createElement("span", null, count)
+            checked: isChecked,
+            onChange: () => onToggle(!isChecked),
+            "data-tag": title2,
+            "aria-label": toggleLabel
           }
-        )), react_default.createElement(
-          Button,
+        )), react_default.createElement(ActionList.Text, null, react_default.createElement("span", null, title2, isExcluded && react_default.createElement(MutedText, null, " (excluded)"))), isExcluded ? react_default.createElement("s", null, count) : react_default.createElement("span", null, count)), react_default.createElement(
+          ActionList.Button,
           {
-            variant: "ghost",
-            size: "medium",
-            onClick: () => onToggle(!0, !isExcluded),
-            ariaLabel: invertButtonLabel
+            "data-target-id": `filter-${type}-${id}`,
+            ariaLabel: invertButtonLabel,
+            onClick: () => onToggle(!0, !isExcluded)
           },
-          isExcluded ? "Include" : "Exclude"
+          react_default.createElement("span", { style: { minWidth: 45 } }, isExcluded ? "Include" : "Exclude")
         ))
       };
   }, groups = groupByType(Object.values(filtersById)), links = Object.values(groups).map(
-    (group) => group.sort((a2, b2) => a2.id.localeCompare(b2.id)).map((filter) => renderLink(filter)).filter(Boolean)
-  );
-  !groups.tag?.length && isDevelopment && links.push([
-    {
-      id: "tags-docs",
-      title: "Learn how to add tags",
-      icon: react_default.createElement(DocumentIcon, null),
-      right: react_default.createElement(ShareAltIcon, null),
-      href: api.getDocsUrl({ subpath: "writing-stories/tags#custom-tags" })
-    }
-  ]);
-  let isNothingSelectedYet = includedFilters.size === 0 && excludedFilters.size === 0, filtersLabel = isNothingSelectedYet ? "Select all" : "Clear filters";
-  return react_default.createElement(Wrapper5, { ref }, Object.keys(filtersById).length > 0 && react_default.createElement(Actions2, null, isNothingSelectedYet ? react_default.createElement(
-    Button,
+    (group) => group.sort((a2, b2) => a2.id.localeCompare(b2.id)).map((filter) => renderLink(filter)).filter((value) => !!value)
+  ).filter((value) => value.length > 0), hasItems = links.length > 0, hasUserTags = Object.values(filtersById).some(({ type }) => type === "tag"), isNothingSelectedYet = includedFilters.size === 0 && excludedFilters.size === 0;
+  return react_default.createElement(Wrapper5, { ref }, hasItems && react_default.createElement(ActionList, { as: "div" }, react_default.createElement(ActionList.Item, { as: "div" }, isNothingSelectedYet ? react_default.createElement(
+    ActionList.Button,
     {
       ariaLabel: !1,
-      variant: "ghost",
-      padding: "small",
       id: "select-all",
       key: "select-all",
       onClick: () => setAllFilters(!0)
     },
     react_default.createElement(BatchAcceptIcon, null),
-    filtersLabel
+    react_default.createElement(ActionList.Text, null, "Select all")
   ) : react_default.createElement(
-    Button,
+    ActionList.Button,
     {
       ariaLabel: !1,
-      variant: "ghost",
-      padding: "small",
       id: "deselect-all",
       key: "deselect-all",
       onClick: () => setAllFilters(!1)
     },
     react_default.createElement(SweepIcon, null),
-    filtersLabel
+    react_default.createElement(ActionList.Text, null, "Clear filters")
   ), hasDefaultSelection && react_default.createElement(
-    Button,
+    ActionList.Button,
     {
       id: "reset-filters",
       key: "reset-filters",
       onClick: resetFilters,
       ariaLabel: "Reset filters",
-      variant: "ghost",
-      padding: "small",
       tooltip: "Reset to default selection",
       disabled: isDefaultSelection
     },
     react_default.createElement(UndoIcon, null)
-  )), react_default.createElement(TooltipLinkList, { links }));
+  ))), links.map((group) => react_default.createElement(ActionList, { key: group.map((link) => link.id).join("_") }, group.map((link) => react_default.createElement(Fragment, { key: link.id }, link.content)))), !hasUserTags && react_default.createElement(ActionList, { as: "div" }, react_default.createElement(ActionList.Item, { as: "div" }, react_default.createElement(
+    ActionList.Link,
+    {
+      href: api.getDocsUrl({ subpath: "writing-stories/tags#custom-tags" }),
+      target: "_blank"
+    },
+    react_default.createElement(ActionList.Icon, null, react_default.createElement(DocumentIcon, null)),
+    react_default.createElement(ActionList.Text, null, react_default.createElement("span", null, "Learn how to add tags")),
+    react_default.createElement(ActionList.Icon, null, react_default.createElement(ShareAltIcon, null))
+  ))));
 };
 
 // src/manager/components/sidebar/TagsFilter.tsx
@@ -18385,11 +18322,11 @@ var TAGS_FILTER = "tags-filter", BUILT_IN_TAGS = /* @__PURE__ */ new Set([
   "unattached-mdx",
   "play-fn",
   "test-fn"
-]), StyledIconButton = styled(Button)(({ active, theme }) => ({
+]), StyledButton2 = styled(Button)(({ isHighlighted, theme }) => ({
   "&:focus-visible": {
     outlineOffset: 4
   },
-  ...active && {
+  ...isHighlighted && {
     background: theme.background.hoverable,
     color: theme.color.secondary
   }
@@ -18399,9 +18336,7 @@ var TAGS_FILTER = "tags-filter", BUILT_IN_TAGS = /* @__PURE__ */ new Set([
 }, remove = (set, id) => {
   let copy3 = new Set(set);
   return copy3.delete(id), copy3;
-}, equal3 = (left, right) => left.size === right.size && (/* @__PURE__ */ new Set([...left, ...right])).size === left.size, Wrapper6 = styled.div({
-  position: "relative"
-}), TagSelected = styled(Badge)(({ theme }) => ({
+}, equal3 = (left, right) => left.size === right.size && (/* @__PURE__ */ new Set([...left, ...right])).size === left.size, TagSelected = styled(Badge)(({ theme }) => ({
   position: "absolute",
   top: 7,
   right: 7,
@@ -18417,7 +18352,7 @@ var TAGS_FILTER = "tags-filter", BUILT_IN_TAGS = /* @__PURE__ */ new Set([
   fontSize: theme.typography.size.s1 - 1,
   background: theme.barSelectedColor,
   color: theme.color.inverseText
-})), TagsFilter = ({ api, indexJson, isDevelopment, tagPresets }) => {
+})), TagsFilter = ({ api, indexJson, tagPresets }) => {
   let filtersById = useMemo(() => {
     let userTagsCounts = Object.values(indexJson.entries).reduce(
       (acc, entry) => (entry.tags?.forEach((tag) => {
@@ -18491,7 +18426,7 @@ var TAGS_FILTER = "tags-filter", BUILT_IN_TAGS = /* @__PURE__ */ new Set([
     },
     [expanded, setExpanded]
   );
-  return Object.keys(filtersById).length === 0 && !isDevelopment ? null : react_default.createElement(
+  return react_default.createElement(
     PopoverProvider,
     {
       placement: "bottom",
@@ -18508,21 +18443,21 @@ var TAGS_FILTER = "tags-filter", BUILT_IN_TAGS = /* @__PURE__ */ new Set([
           toggleFilter,
           setAllFilters,
           resetFilters,
-          isDevelopment,
           isDefaultSelection: equal3(includedFilters, defaultIncluded) && equal3(excludedFilters, defaultExcluded),
           hasDefaultSelection: defaultIncluded.size > 0 || defaultExcluded.size > 0
         }
       )
     },
     react_default.createElement(
-      StyledIconButton,
+      StyledButton2,
       {
         key: "tags",
         ariaLabel: "Tag filters",
         ariaDescription: "Filter the items shown in a sidebar based on the tags applied to them.",
+        "aria-haspopup": "dialog",
         variant: "ghost",
         padding: "small",
-        active: tagsActive,
+        isHighlighted: tagsActive,
         onClick: handleToggleExpand
       },
       react_default.createElement(FilterIcon, null),
@@ -18663,15 +18598,7 @@ var DEFAULT_REF_ID = "storybook_internal", Container7 = styled.nav(({ theme }) =
           onOpenChange: setIsFileSearchModalOpen
         }
       )),
-      searchFieldContent: indexJson && react_default.createElement(
-        TagsFilter,
-        {
-          api,
-          indexJson,
-          isDevelopment,
-          tagPresets
-        }
-      ),
+      searchFieldContent: indexJson && react_default.createElement(TagsFilter, { api, indexJson, tagPresets }),
       ...lastViewedProps
     },
     ({
@@ -18813,7 +18740,7 @@ var Container8 = styled.div({
   color: theme.base === "light" ? theme.color.dark : theme.color.lightest,
   fontWeight: theme.typography.weight.regular,
   fontSize: theme.typography.size.s2
-})), Actions3 = styled.div({
+})), Actions2 = styled.div({
   display: "flex",
   flexDirection: "row",
   alignItems: "center",
@@ -18828,7 +18755,7 @@ var Container8 = styled.div({
   "&:hover": {
     color: theme.base === "light" ? theme.color.darkest : theme.color.lightest
   }
-})), AboutScreen = ({ onNavigateToWhatsNew }) => react_default.createElement(Container8, null, react_default.createElement(Header, null, react_default.createElement(StorybookLogo, { alt: "Storybook" })), react_default.createElement(UpgradeBlock, { onNavigateToWhatsNew }), react_default.createElement(Footer, null, react_default.createElement(Actions3, null, react_default.createElement(Button, { ariaLabel: !1, asChild: !0 }, react_default.createElement("a", { href: "https://github.com/storybookjs/storybook" }, react_default.createElement(GithubIcon, null), "GitHub")), react_default.createElement(Button, { ariaLabel: !1, asChild: !0 }, react_default.createElement("a", { href: "https://storybook.js.org/docs?ref=ui" }, react_default.createElement(DocumentIcon, { style: { display: "inline", marginRight: 5 } }), "Documentation"))), react_default.createElement("div", null, "Open source software maintained by", " ", react_default.createElement(StyledLink, { href: "https://www.chromatic.com/" }, "Chromatic"), " and the", " ", react_default.createElement(StyledLink, { href: "https://github.com/storybookjs/storybook/graphs/contributors" }, "Storybook Community"))));
+})), AboutScreen = ({ onNavigateToWhatsNew }) => react_default.createElement(Container8, null, react_default.createElement(Header, null, react_default.createElement(StorybookLogo, { alt: "Storybook" })), react_default.createElement(UpgradeBlock, { onNavigateToWhatsNew }), react_default.createElement(Footer, null, react_default.createElement(Actions2, null, react_default.createElement(Button, { ariaLabel: !1, asChild: !0 }, react_default.createElement("a", { href: "https://github.com/storybookjs/storybook" }, react_default.createElement(GithubIcon, null), "GitHub")), react_default.createElement(Button, { ariaLabel: !1, asChild: !0 }, react_default.createElement("a", { href: "https://storybook.js.org/docs?ref=ui" }, react_default.createElement(DocumentIcon, { style: { display: "inline", marginRight: 5 } }), "Documentation"))), react_default.createElement("div", null, "Open source software maintained by", " ", react_default.createElement(StyledLink, { href: "https://www.chromatic.com/" }, "Chromatic"), " and the", " ", react_default.createElement(StyledLink, { href: "https://github.com/storybookjs/storybook/graphs/contributors" }, "Storybook Community"))));
 
 // src/manager/settings/AboutPage.tsx
 var NotificationClearer = class extends Component {
@@ -18852,30 +18779,6 @@ var NotificationClearer = class extends Component {
   ));
 };
 
-// src/manager/components/useLocationHash.ts
-var hashMonitor = {
-  currentHash: globalThis.window?.location.hash ?? "",
-  intervalId: null,
-  listeners: /* @__PURE__ */ new Set(),
-  start() {
-    this.intervalId === null && (this.intervalId = setInterval(() => {
-      let newHash = globalThis.window.location.hash ?? "";
-      newHash !== this.currentHash && (this.currentHash = newHash, this.listeners.forEach((listener) => listener(newHash)));
-    }, 100));
-  },
-  stop() {
-    this.intervalId !== null && (clearInterval(this.intervalId), this.intervalId = null);
-  },
-  subscribe(...listeners) {
-    return listeners.forEach((listener) => this.listeners.add(listener)), this.start(), () => {
-      listeners.forEach((listener) => this.listeners.delete(listener)), this.listeners.size === 0 && this.stop();
-    };
-  }
-}, useLocationHash = () => {
-  let [hash, setHash] = useState(globalThis.window?.location.hash ?? "");
-  return useEffect(() => hashMonitor.subscribe(setHash), []), hash.slice(1);
-};
-
 // src/manager/components/Focus/Focus.tsx
 var FocusOutline = styled.div(
   ({ theme, active = !1, outlineOffset = 0 }) => ({
@@ -19082,7 +18985,7 @@ var Sections = styled.ol(({ theme }) => ({
   width: visible ? "auto" : 0,
   height: visible ? 18 : 16,
   transition: "all var(--transition-duration, 0.2s)"
-})), Actions4 = styled.div({
+})), Actions3 = styled.div({
   alignSelf: "flex-end",
   flexDirection: "row-reverse",
   display: "flex",
@@ -19119,14 +19022,9 @@ var Sections = styled.ol(({ theme }) => ({
       return { id, title: title2, items, progress };
     }),
     [itemsById, sectionsById]
-  ), next = useMemo(
-    () => Object.values(sections).findIndex(
-      ({ items }) => items.some((item) => item.isOpen && item.isAvailable)
-    ),
-    [sections]
   );
-  return react_default.createElement(Sections, null, sections.map(({ id, title: title2, items, progress }, index) => {
-    let collapsed = !items.some((item) => item.id === locationHash) && (progress === 0 || progress === 100) && next !== index;
+  return react_default.createElement(Sections, null, sections.map(({ id, title: title2, items, progress }) => {
+    let collapsed = progress === 100 && items.every((item) => item.id !== locationHash);
     return react_default.createElement("li", { key: id }, react_default.createElement(Focus.Proxy, { targetId: `toggle-${id}` }, react_default.createElement(
       Collapsible,
       {
@@ -19140,7 +19038,7 @@ var Sections = styled.ol(({ theme }) => ({
           },
           react_default.createElement(StatusIcon2, null, react_default.createElement(Checked2, { "data-visible": progress === 100 })),
           react_default.createElement(SectionHeading, null, title2),
-          react_default.createElement(Actions4, null, react_default.createElement(
+          react_default.createElement(Actions3, null, react_default.createElement(
             ToggleButton2,
             {
               ...toggleProps,
@@ -19164,8 +19062,8 @@ var Sections = styled.ol(({ theme }) => ({
           isSkipped,
           ...item
         }) => {
-          let isChecked = isAccepted || isDone, isCollapsed = isChecked && item.id !== locationHash, isLocked = !!isLockedBy, itemContent = content?.({ api });
-          return react_default.createElement(Listbox.Item, { as: "li", key: item.id }, react_default.createElement(
+          let isChecked = isAccepted || isDone, isCollapsed = item.id !== locationHash, isLocked = !!isLockedBy, itemContent = content?.({ api });
+          return react_default.createElement(ActionList.Item, { key: item.id }, react_default.createElement(
             Focus.Target,
             {
               targetHash: item.id,
@@ -19184,7 +19082,7 @@ var Sections = styled.ol(({ theme }) => ({
                   },
                   react_default.createElement(StatusIcon2, null, react_default.createElement(Checked2, { "data-visible": isChecked }), react_default.createElement(Skipped, { visible: isSkipped }, "Skipped")),
                   react_default.createElement(ItemHeading, { skipped: isSkipped }, item.label),
-                  react_default.createElement(Actions4, null, itemContent && react_default.createElement(
+                  react_default.createElement(Actions3, null, itemContent && react_default.createElement(
                     ToggleButton2,
                     {
                       ...toggleProps,