storybook 10.1.0-beta.4 → 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);
 }
 
@@ -10654,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",
@@ -10849,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())
         }
       ]
     },
@@ -11576,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(
@@ -11670,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;
@@ -12066,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": {
@@ -12110,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 = () => {
@@ -12146,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,
@@ -12170,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()
@@ -12205,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
+      ))
     ))
   )));
 };
@@ -13782,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",
@@ -14108,6 +14120,7 @@ var withStatusColor = ({ theme, status }) => {
     "&:focus": {
       color: theme.color.secondary,
       borderColor: theme.color.secondary,
+      outlineOffset: -2,
       "&:not(:focus-visible)": {
         borderColor: "transparent"
       }
@@ -15202,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,
@@ -15223,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();
@@ -17658,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)
@@ -17908,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,
@@ -18002,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"
@@ -18078,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();
         },
@@ -18215,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 = ({
@@ -18257,7 +18235,6 @@ var groupByType = (filters) => filters.reduce(
   toggleFilter,
   setAllFilters,
   resetFilters,
-  isDevelopment,
   isDefaultSelection,
   hasDefaultSelection
 }) => {
@@ -18268,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
@@ -18364,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
   }
@@ -18378,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,
@@ -18396,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) => {
@@ -18470,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",
@@ -18487,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),
@@ -18642,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
     },
     ({
@@ -18792,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",
@@ -18807,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 {
@@ -18831,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 }) => ({
@@ -19061,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",
@@ -19114,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,
@@ -19139,7 +19063,7 @@ var Sections = styled.ol(({ theme }) => ({
           ...item
         }) => {
           let isChecked = isAccepted || isDone, isCollapsed = item.id !== locationHash, isLocked = !!isLockedBy, itemContent = content?.({ api });
-          return react_default.createElement(Listbox.Item, { as: "li", key: item.id }, react_default.createElement(
+          return react_default.createElement(ActionList.Item, { key: item.id }, react_default.createElement(
             Focus.Target,
             {
               targetHash: item.id,
@@ -19158,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,