storybook 10.2.0-alpha.17 → 10.2.0-alpha.18

package/dist/manager/runtime.js

@@ -9,6 +9,9 @@ var __require = /* @__PURE__ */ ((x2) => typeof require < "u" ? require : typeof
   if (typeof require < "u") return require.apply(this, arguments);
   throw Error('Dynamic require of "' + x2 + '" is not supported');
 });
+var __esm = (fn, res) => function() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
 var __commonJS = (cb, mod) => function() {
   return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
 };
@@ -28,7 +31,54 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: !0 }) : target,
   mod
-));
+)), __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
+
+// global-externals:react
+var react_exports = {};
+__export(react_exports, {
+  Children: () => Children,
+  Component: () => Component,
+  Fragment: () => Fragment,
+  Profiler: () => Profiler,
+  PureComponent: () => PureComponent,
+  StrictMode: () => StrictMode,
+  Suspense: () => Suspense,
+  __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: () => __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
+  act: () => act,
+  cloneElement: () => cloneElement,
+  createContext: () => createContext,
+  createElement: () => createElement,
+  createFactory: () => createFactory,
+  createRef: () => createRef,
+  default: () => react_default,
+  forwardRef: () => forwardRef,
+  isValidElement: () => isValidElement,
+  lazy: () => lazy,
+  memo: () => memo,
+  startTransition: () => startTransition,
+  unstable_act: () => unstable_act,
+  useCallback: () => useCallback,
+  useContext: () => useContext,
+  useDebugValue: () => useDebugValue,
+  useDeferredValue: () => useDeferredValue,
+  useEffect: () => useEffect,
+  useId: () => useId,
+  useImperativeHandle: () => useImperativeHandle,
+  useInsertionEffect: () => useInsertionEffect,
+  useLayoutEffect: () => useLayoutEffect,
+  useMemo: () => useMemo,
+  useReducer: () => useReducer,
+  useRef: () => useRef,
+  useState: () => useState,
+  useSyncExternalStore: () => useSyncExternalStore,
+  useTransition: () => useTransition,
+  version: () => version
+});
+var react_default, Children, Component, Fragment, Profiler, PureComponent, StrictMode, Suspense, __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, act, cloneElement, createContext, createElement, createFactory, createRef, forwardRef, isValidElement, lazy, memo, startTransition, unstable_act, useCallback, useContext, useDebugValue, useDeferredValue, useEffect, useId, useImperativeHandle, useInsertionEffect, useLayoutEffect, useMemo, useReducer, useRef, useState, useSyncExternalStore, useTransition, version, init_react = __esm({
+  "global-externals:react"() {
+    react_default = __REACT__, { Children, Component, Fragment, Profiler, PureComponent, StrictMode, Suspense, __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, act, cloneElement, createContext, createElement, createFactory, createRef, forwardRef, isValidElement, lazy, memo, startTransition, unstable_act, useCallback, useContext, useDebugValue, useDeferredValue, useEffect, useId, useImperativeHandle, useInsertionEffect, useLayoutEffect, useMemo, useReducer, useRef, useState, useSyncExternalStore, useTransition, version } = __REACT__;
+  }
+});
 
 // ../../node_modules/prop-types/lib/ReactPropTypesSecret.js
 var require_ReactPropTypesSecret = __commonJS({
@@ -213,6 +263,57 @@ var require_shallowequal = __commonJS({
   }
 });
 
+// ../../node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.production.js
+var require_use_sync_external_store_shim_production = __commonJS({
+  "../../node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.production.js"(exports) {
+    "use strict";
+    var React = (init_react(), __toCommonJS(react_exports));
+    function is4(x2, y2) {
+      return x2 === y2 && (x2 !== 0 || 1 / x2 === 1 / y2) || x2 !== x2 && y2 !== y2;
+    }
+    var objectIs = typeof Object.is == "function" ? Object.is : is4, useState2 = React.useState, useEffect2 = React.useEffect, useLayoutEffect2 = React.useLayoutEffect, useDebugValue2 = React.useDebugValue;
+    function useSyncExternalStore$2(subscribe, getSnapshot) {
+      var value = getSnapshot(), _useState = useState2({ inst: { value, getSnapshot } }), inst = _useState[0].inst, forceUpdate = _useState[1];
+      return useLayoutEffect2(
+        function() {
+          inst.value = value, inst.getSnapshot = getSnapshot, checkIfSnapshotChanged(inst) && forceUpdate({ inst });
+        },
+        [subscribe, value, getSnapshot]
+      ), useEffect2(
+        function() {
+          return checkIfSnapshotChanged(inst) && forceUpdate({ inst }), subscribe(function() {
+            checkIfSnapshotChanged(inst) && forceUpdate({ inst });
+          });
+        },
+        [subscribe]
+      ), useDebugValue2(value), value;
+    }
+    function checkIfSnapshotChanged(inst) {
+      var latestGetSnapshot = inst.getSnapshot;
+      inst = inst.value;
+      try {
+        var nextValue = latestGetSnapshot();
+        return !objectIs(inst, nextValue);
+      } catch {
+        return !0;
+      }
+    }
+    function useSyncExternalStore$1(subscribe, getSnapshot) {
+      return getSnapshot();
+    }
+    var shim = typeof window > "u" || typeof window.document > "u" || typeof window.document.createElement > "u" ? useSyncExternalStore$1 : useSyncExternalStore$2;
+    exports.useSyncExternalStore = React.useSyncExternalStore !== void 0 ? React.useSyncExternalStore : shim;
+  }
+});
+
+// ../../node_modules/use-sync-external-store/shim/index.js
+var require_shim = __commonJS({
+  "../../node_modules/use-sync-external-store/shim/index.js"(exports, module) {
+    "use strict";
+    module.exports = require_use_sync_external_store_shim_production();
+  }
+});
+
 // ../../node_modules/memoizerific/memoizerific.js
 var require_memoizerific = __commonJS({
   "../../node_modules/memoizerific/memoizerific.js"(exports, module) {
@@ -1209,8 +1310,8 @@ var require_store2 = __commonJS({
   }
 });
 
-// global-externals:react
-var react_default = __REACT__, { Children, Component, Fragment, Profiler, PureComponent, StrictMode, Suspense, __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, act, cloneElement, createContext, createElement, createFactory, createRef, forwardRef, isValidElement, lazy, memo, startTransition, unstable_act, useCallback, useContext, useDebugValue, useDeferredValue, useEffect, useId, useImperativeHandle, useInsertionEffect, useLayoutEffect, useMemo, useReducer, useRef, useState, useSyncExternalStore, useTransition, version } = __REACT__;
+// src/manager/runtime.tsx
+init_react();
 
 // global-externals:storybook/internal/channels
 var channels_default = __STORYBOOK_CHANNELS__, { Channel, HEARTBEAT_INTERVAL, HEARTBEAT_MAX_LATENCY, PostMessageTransport, WebsocketTransport, createBrowserChannel } = __STORYBOOK_CHANNELS__;
@@ -1489,6 +1590,9 @@ var manager_api_default = __STORYBOOK_API__, { ActiveTabs, Consumer, ManagerCont
 // global-externals:storybook/theming
 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__;
 
+// src/toolbar/components/ToolbarManager.tsx
+init_react();
+
 // global-externals:storybook/internal/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__;
 
@@ -1509,6 +1613,12 @@ var defaultItemValues = {
   }
 });
 
+// src/toolbar/components/ToolbarMenuSelect.tsx
+init_react();
+
+// src/components/components/icon/icon.tsx
+init_react();
+
 // global-externals:storybook/internal/client-logger
 var client_logger_default = __STORYBOOK_CLIENT_LOGGER__, { deprecate, logger, once, pretty } = __STORYBOOK_CLIENT_LOGGER__;
 
@@ -1755,6 +1865,9 @@ var NEW_ICON_MAP = icons_exports, Svg = styled.svg`
   vscode: "VSCodeIcon"
 };
 
+// src/toolbar/hoc/withKeyboardCycle.tsx
+init_react();
+
 // src/toolbar/utils/create-cycle-value-array.ts
 var disallowedCycleableItemTypes = ["reset"], createCycleValueArray = (items) => items.filter((item) => !disallowedCycleableItemTypes.includes(item.type)).map((item) => item.value);
 
@@ -1873,6 +1986,9 @@ var ToolbarManager = () => {
   })) : null;
 };
 
+// src/manager/index.tsx
+init_react();
+
 // global-externals:react-dom/client
 var client_default = __REACT_DOM_CLIENT__, { createRoot, hydrateRoot } = __REACT_DOM_CLIENT__;
 
@@ -1883,6 +1999,7 @@ var manager_errors_default = __STORYBOOK_CORE_EVENTS_MANAGER_ERRORS__, { Categor
 var router_default = __STORYBOOK_ROUTER__, { BaseLocationProvider, DEEPLY_EQUAL, Link: Link2, Location, LocationProvider, Match, Route, buildArgsParam, deepDiff, getMatch, parsePath, queryFromLocation, stringifyQuery, useNavigate } = __STORYBOOK_ROUTER__;
 
 // ../../node_modules/react-helmet-async/lib/index.module.js
+init_react();
 var import_prop_types = __toESM(require_prop_types()), import_react_fast_compare = __toESM(require_react_fast_compare()), import_invariant = __toESM(require_browser()), import_shallowequal = __toESM(require_shallowequal());
 function a() {
   return a = Object.assign || function(t2) {
@@ -2226,6 +2343,12 @@ var F = ["children"], G = ["children"], W = (function(e2) {
 })(Component);
 W.propTypes = { base: import_prop_types.default.object, bodyAttributes: import_prop_types.default.object, children: import_prop_types.default.oneOfType([import_prop_types.default.arrayOf(import_prop_types.default.node), import_prop_types.default.node]), defaultTitle: import_prop_types.default.string, defer: import_prop_types.default.bool, encodeSpecialCharacters: import_prop_types.default.bool, htmlAttributes: import_prop_types.default.object, link: import_prop_types.default.arrayOf(import_prop_types.default.object), meta: import_prop_types.default.arrayOf(import_prop_types.default.object), noscript: import_prop_types.default.arrayOf(import_prop_types.default.object), onChangeClientState: import_prop_types.default.func, script: import_prop_types.default.arrayOf(import_prop_types.default.object), style: import_prop_types.default.arrayOf(import_prop_types.default.object), title: import_prop_types.default.string, titleAttributes: import_prop_types.default.object, titleTemplate: import_prop_types.default.string, prioritizeSeoTags: import_prop_types.default.bool, helmetData: import_prop_types.default.object }, W.defaultProps = { defer: !0, encodeSpecialCharacters: !0, prioritizeSeoTags: !1 }, W.displayName = "Helmet";
 
+// src/manager/App.tsx
+init_react();
+
+// src/manager/components/error-boundary/ManagerErrorBoundary.tsx
+init_react();
+
 // ../../node_modules/@babel/runtime/helpers/esm/extends.js
 function _extends() {
   return _extends = Object.assign ? Object.assign.bind() : function(n3) {
@@ -2940,10 +3063,23 @@ Component Stack:${errorInfo.componentStack}`)
   }
 };
 
+// src/manager/components/layout/Layout.tsx
+init_react();
+
 // src/manager/constants.ts
 var MEDIA_DESKTOP_BREAKPOINT = "@media (min-width: 600px)";
 
+// src/manager/container/Notifications.tsx
+init_react();
+
+// src/manager/components/notifications/NotificationList.tsx
+init_react();
+
+// src/manager/components/layout/LayoutProvider.tsx
+init_react();
+
 // src/manager/hooks/useMedia.tsx
+init_react();
 function useMediaQuery(query) {
   let getMatches = (queryMatch) => typeof window < "u" ? window.matchMedia(queryMatch).matches : !1, [matches, setMatches] = useState(getMatches(query));
   function handleChange() {
@@ -2997,6 +3133,7 @@ var LayoutContext = createContext({
 }, useLayout = () => useContext(LayoutContext);
 
 // src/manager/components/notifications/NotificationItem.tsx
+init_react();
 var slideIn = keyframes({
   "0%": {
     opacity: 0,
@@ -3175,14 +3312,22 @@ var mapper = ({ state, api }) => ({
   clearNotification: api.clearNotification
 }), Notifications = (props) => react_default.createElement(Consumer, { filter: mapper }, (fromState) => react_default.createElement(NotificationList, { ...props, ...fromState }));
 
+// src/manager/components/mobile/navigation/MobileNavigation.tsx
+init_react();
+
 // ../../node_modules/@react-aria/utils/dist/useLayoutEffect.mjs
+init_react();
 var $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c = typeof document < "u" ? react_default.useLayoutEffect : () => {
 };
 
-// ../../node_modules/@react-aria/utils/dist/useEffectEvent.mjs
-var $8ae05eaa5c114e9c$var$_React_useInsertionEffect, $8ae05eaa5c114e9c$var$useEarlyEffect = ($8ae05eaa5c114e9c$var$_React_useInsertionEffect = react_default.useInsertionEffect) !== null && $8ae05eaa5c114e9c$var$_React_useInsertionEffect !== void 0 ? $8ae05eaa5c114e9c$var$_React_useInsertionEffect : $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c;
+// ../../node_modules/@react-aria/utils/dist/useValueEffect.mjs
+init_react();
+
+// ../../node_modules/@react-aria/utils/dist/useId.mjs
+init_react();
 
 // ../../node_modules/@react-aria/ssr/dist/SSRProvider.mjs
+init_react();
 var $b5e257d569688ac6$var$defaultContext = {
   prefix: String(Math.round(Math.random() * 1e10)),
   current: 0
@@ -3336,6 +3481,7 @@ var $c87311424ea30a05$export$9ac100e40613ea10 = $c87311424ea30a05$var$cached(fun
 });
 
 // ../../node_modules/@react-aria/utils/dist/openLink.mjs
+init_react();
 var $ea8dcbcb9ea1b556$var$RouterContext = createContext({
   isNative: !0,
   open: $ea8dcbcb9ea1b556$var$openSyntheticLink,
@@ -3356,6 +3502,7 @@ function $ea8dcbcb9ea1b556$export$95185d699e05d4d7(target, modifiers2, setOpenin
     ctrlKey,
     altKey,
     shiftKey,
+    detail: 1,
     bubbles: !0,
     cancelable: !0
   });
@@ -3398,12 +3545,59 @@ function $bbed8b41f857bcc0$var$setupGlobalEvents() {
 }
 typeof document < "u" && (document.readyState !== "loading" ? $bbed8b41f857bcc0$var$setupGlobalEvents() : document.addEventListener("DOMContentLoaded", $bbed8b41f857bcc0$var$setupGlobalEvents));
 
+// ../../node_modules/@react-aria/utils/dist/useDrag1D.mjs
+init_react();
+
+// ../../node_modules/@react-aria/utils/dist/useGlobalListeners.mjs
+init_react();
+
+// ../../node_modules/@react-aria/utils/dist/useObjectRef.mjs
+init_react();
+
+// ../../node_modules/@react-aria/utils/dist/useEffectEvent.mjs
+init_react();
+var $8ae05eaa5c114e9c$var$_React_useInsertionEffect, $8ae05eaa5c114e9c$var$useEarlyEffect = ($8ae05eaa5c114e9c$var$_React_useInsertionEffect = react_default.useInsertionEffect) !== null && $8ae05eaa5c114e9c$var$_React_useInsertionEffect !== void 0 ? $8ae05eaa5c114e9c$var$_React_useInsertionEffect : $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c;
+
+// ../../node_modules/@react-aria/utils/dist/useUpdateEffect.mjs
+init_react();
+
+// ../../node_modules/@react-aria/utils/dist/useUpdateLayoutEffect.mjs
+init_react();
+
+// ../../node_modules/@react-aria/utils/dist/useResizeObserver.mjs
+init_react();
+
 // ../../node_modules/@react-aria/utils/dist/useViewportSize.mjs
+init_react();
 var $5df64b3807dc15ee$var$visualViewport = typeof document < "u" && window.visualViewport;
 
+// ../../node_modules/@react-aria/utils/dist/useDescription.mjs
+init_react();
+
+// ../../node_modules/@react-aria/utils/dist/useEvent.mjs
+init_react();
+
+// ../../node_modules/@react-aria/utils/dist/useDeepMemo.mjs
+init_react();
+
+// ../../node_modules/@react-aria/utils/dist/useFormReset.mjs
+init_react();
+
+// ../../node_modules/@react-aria/utils/dist/useLoadMore.mjs
+init_react();
+
+// ../../node_modules/@react-aria/utils/dist/useLoadMoreSentinel.mjs
+init_react();
+
+// ../../node_modules/@react-aria/utils/dist/inertValue.mjs
+init_react();
+
 // global-externals:react-dom
 var react_dom_default = __REACT_DOM__, { __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED2, createPortal, createRoot: createRoot2, findDOMNode, flushSync, hydrate, hydrateRoot: hydrateRoot2, render, unmountComponentAtNode, unstable_batchedUpdates, unstable_renderSubtreeIntoContainer, version: version2 } = __REACT_DOM__;
 
+// ../../node_modules/@react-aria/utils/dist/animation.mjs
+init_react();
+
 // ../../node_modules/@react-aria/utils/dist/isElementVisible.mjs
 var $7d2416ea0959daaa$var$supportsCheckVisibility = typeof Element < "u" && "checkVisibility" in Element.prototype;
 
@@ -3427,7 +3621,284 @@ var $b4b717babfbb907b$var$focusableElements = [
 $b4b717babfbb907b$var$focusableElements.push('[tabindex]:not([tabindex="-1"]):not([disabled])');
 var $b4b717babfbb907b$var$TABBABLE_ELEMENT_SELECTOR = $b4b717babfbb907b$var$focusableElements.join(':not([hidden]):not([tabindex="-1"]),');
 
+// ../../node_modules/@react-stately/utils/dist/useControlledState.mjs
+init_react();
+var $458b0a5536c1a7cf$var$_React_useInsertionEffect, $458b0a5536c1a7cf$var$useEarlyEffect = typeof document < "u" ? ($458b0a5536c1a7cf$var$_React_useInsertionEffect = react_default.useInsertionEffect) !== null && $458b0a5536c1a7cf$var$_React_useInsertionEffect !== void 0 ? $458b0a5536c1a7cf$var$_React_useInsertionEffect : react_default.useLayoutEffect : () => {
+};
+
+// ../../node_modules/@react-aria/landmark/dist/useLandmark.mjs
+init_react();
+var import_shim = __toESM(require_shim(), 1), $a86207c5d7f7e1fb$var$LANDMARK_API_VERSION = 1, $a86207c5d7f7e1fb$var$landmarkSymbol = Symbol.for("react-aria-landmark-manager");
+function $a86207c5d7f7e1fb$var$subscribe(fn) {
+  return document.addEventListener("react-aria-landmark-manager-change", fn), () => document.removeEventListener("react-aria-landmark-manager-change", fn);
+}
+function $a86207c5d7f7e1fb$var$getLandmarkManager() {
+  if (typeof document > "u") return null;
+  let instance = document[$a86207c5d7f7e1fb$var$landmarkSymbol];
+  return instance && instance.version >= $a86207c5d7f7e1fb$var$LANDMARK_API_VERSION ? instance : (document[$a86207c5d7f7e1fb$var$landmarkSymbol] = new $a86207c5d7f7e1fb$var$LandmarkManager(), document.dispatchEvent(new CustomEvent("react-aria-landmark-manager-change")), document[$a86207c5d7f7e1fb$var$landmarkSymbol]);
+}
+function $a86207c5d7f7e1fb$var$useLandmarkManager() {
+  return (0, import_shim.useSyncExternalStore)($a86207c5d7f7e1fb$var$subscribe, $a86207c5d7f7e1fb$var$getLandmarkManager, $a86207c5d7f7e1fb$var$getLandmarkManager);
+}
+var $a86207c5d7f7e1fb$var$LandmarkManager = class {
+  setupIfNeeded() {
+    this.isListening || (document.addEventListener("keydown", this.f6Handler, {
+      capture: !0
+    }), document.addEventListener("focusin", this.focusinHandler, {
+      capture: !0
+    }), document.addEventListener("focusout", this.focusoutHandler, {
+      capture: !0
+    }), this.isListening = !0);
+  }
+  teardownIfNeeded() {
+    !this.isListening || this.landmarks.length > 0 || this.refCount > 0 || (document.removeEventListener("keydown", this.f6Handler, {
+      capture: !0
+    }), document.removeEventListener("focusin", this.focusinHandler, {
+      capture: !0
+    }), document.removeEventListener("focusout", this.focusoutHandler, {
+      capture: !0
+    }), this.isListening = !1);
+  }
+  focusLandmark(landmark, direction) {
+    var _this_landmarks_find_focus, _this_landmarks_find;
+    (_this_landmarks_find = this.landmarks.find((l3) => l3.ref.current === landmark)) === null || _this_landmarks_find === void 0 || (_this_landmarks_find_focus = _this_landmarks_find.focus) === null || _this_landmarks_find_focus === void 0 || _this_landmarks_find_focus.call(_this_landmarks_find, direction);
+  }
+  /**
+  * Return set of landmarks with a specific role.
+  */
+  getLandmarksByRole(role) {
+    return new Set(this.landmarks.filter((l3) => l3.role === role));
+  }
+  /**
+  * Return first landmark with a specific role.
+  */
+  getLandmarkByRole(role) {
+    return this.landmarks.find((l3) => l3.role === role);
+  }
+  addLandmark(newLandmark) {
+    if (this.setupIfNeeded(), this.landmarks.find((landmark) => landmark.ref === newLandmark.ref) || !newLandmark.ref.current) return;
+    if (this.landmarks.filter((landmark) => landmark.role === "main").length > 1, this.landmarks.length === 0) {
+      this.landmarks = [
+        newLandmark
+      ], this.checkLabels(newLandmark.role);
+      return;
+    }
+    let start = 0, end = this.landmarks.length - 1;
+    for (; start <= end; ) {
+      let mid = Math.floor((start + end) / 2), comparedPosition = newLandmark.ref.current.compareDocumentPosition(this.landmarks[mid].ref.current);
+      !!(comparedPosition & Node.DOCUMENT_POSITION_PRECEDING || comparedPosition & Node.DOCUMENT_POSITION_CONTAINS) ? start = mid + 1 : end = mid - 1;
+    }
+    this.landmarks.splice(start, 0, newLandmark), this.checkLabels(newLandmark.role);
+  }
+  updateLandmark(landmark) {
+    let index = this.landmarks.findIndex((l3) => l3.ref === landmark.ref);
+    index >= 0 && (this.landmarks[index] = {
+      ...this.landmarks[index],
+      ...landmark
+    }, this.checkLabels(this.landmarks[index].role));
+  }
+  removeLandmark(ref) {
+    this.landmarks = this.landmarks.filter((landmark) => landmark.ref !== ref), this.teardownIfNeeded();
+  }
+  /**
+  * Warn if there are 2+ landmarks with the same role but no label.
+  * Labels for landmarks with the same role must also be unique.
+  *
+  * See https://www.w3.org/WAI/ARIA/apg/practices/landmark-regions/.
+  */
+  checkLabels(role) {
+    let landmarksWithRole = this.getLandmarksByRole(role);
+    landmarksWithRole.size > 1 && [
+      ...landmarksWithRole
+    ].filter((landmark) => !landmark.label).length > 0;
+  }
+  /**
+  * Get the landmark that is the closest parent in the DOM.
+  * Returns undefined if no parent is a landmark.
+  */
+  closestLandmark(element) {
+    let landmarkMap = new Map(this.landmarks.map((l3) => [
+      l3.ref.current,
+      l3
+    ])), currentElement = element;
+    for (; currentElement && !landmarkMap.has(currentElement) && currentElement !== document.body && currentElement.parentElement; ) currentElement = currentElement.parentElement;
+    return landmarkMap.get(currentElement);
+  }
+  /**
+  * Gets the next landmark, in DOM focus order, or previous if backwards is specified.
+  * If last landmark, next should be the first landmark.
+  * If not inside a landmark, will return first landmark.
+  * Returns undefined if there are no landmarks.
+  */
+  getNextLandmark(element, { backward }) {
+    var _this_landmarks_nextLandmarkIndex_ref_current;
+    let currentLandmark = this.closestLandmark(element), nextLandmarkIndex = backward ? this.landmarks.length - 1 : 0;
+    currentLandmark && (nextLandmarkIndex = this.landmarks.indexOf(currentLandmark) + (backward ? -1 : 1));
+    let wrapIfNeeded = () => {
+      if (nextLandmarkIndex < 0) {
+        if (!element.dispatchEvent(new CustomEvent("react-aria-landmark-navigation", {
+          detail: {
+            direction: "backward"
+          },
+          bubbles: !0,
+          cancelable: !0
+        }))) return !0;
+        nextLandmarkIndex = this.landmarks.length - 1;
+      } else if (nextLandmarkIndex >= this.landmarks.length) {
+        if (!element.dispatchEvent(new CustomEvent("react-aria-landmark-navigation", {
+          detail: {
+            direction: "forward"
+          },
+          bubbles: !0,
+          cancelable: !0
+        }))) return !0;
+        nextLandmarkIndex = 0;
+      }
+      return nextLandmarkIndex < 0 || nextLandmarkIndex >= this.landmarks.length;
+    };
+    if (wrapIfNeeded()) return;
+    let i2 = nextLandmarkIndex;
+    for (; !((_this_landmarks_nextLandmarkIndex_ref_current = this.landmarks[nextLandmarkIndex].ref.current) === null || _this_landmarks_nextLandmarkIndex_ref_current === void 0) && _this_landmarks_nextLandmarkIndex_ref_current.closest("[aria-hidden=true]"); ) {
+      if (nextLandmarkIndex += backward ? -1 : 1, wrapIfNeeded()) return;
+      if (nextLandmarkIndex === i2) break;
+    }
+    return this.landmarks[nextLandmarkIndex];
+  }
+  /**
+  * Look at next landmark. If an element was previously focused inside, restore focus there.
+  * If not, focus the landmark itself.
+  * If no landmarks at all, or none with focusable elements, don't move focus.
+  */
+  f6Handler(e2) {
+    e2.key === "F6" && (e2.altKey ? this.focusMain() : this.navigate(e2.target, e2.shiftKey)) && (e2.preventDefault(), e2.stopPropagation());
+  }
+  focusMain() {
+    let main = this.getLandmarkByRole("main");
+    return main && main.ref.current && document.contains(main.ref.current) ? (this.focusLandmark(main.ref.current, "forward"), !0) : !1;
+  }
+  navigate(from, backward) {
+    let nextLandmark = this.getNextLandmark(from, {
+      backward
+    });
+    if (!nextLandmark) return !1;
+    if (nextLandmark.lastFocused) {
+      let lastFocused = nextLandmark.lastFocused;
+      if (document.body.contains(lastFocused))
+        return lastFocused.focus(), !0;
+    }
+    return nextLandmark.ref.current && document.contains(nextLandmark.ref.current) ? (this.focusLandmark(nextLandmark.ref.current, backward ? "backward" : "forward"), !0) : !1;
+  }
+  /**
+  * Sets lastFocused for a landmark, if focus is moved within that landmark.
+  * Lets the last focused landmark know it was blurred if something else is focused.
+  */
+  focusinHandler(e2) {
+    let currentLandmark = this.closestLandmark(e2.target);
+    currentLandmark && currentLandmark.ref.current !== e2.target && this.updateLandmark({
+      ref: currentLandmark.ref,
+      lastFocused: e2.target
+    });
+    let previousFocusedElement = e2.relatedTarget;
+    if (previousFocusedElement) {
+      let closestPreviousLandmark = this.closestLandmark(previousFocusedElement);
+      closestPreviousLandmark && closestPreviousLandmark.ref.current === previousFocusedElement && closestPreviousLandmark.blur();
+    }
+  }
+  /**
+  * Track if the focus is lost to the body. If it is, do cleanup on the landmark that last had focus.
+  */
+  focusoutHandler(e2) {
+    let previousFocusedElement = e2.target, nextFocusedElement = e2.relatedTarget;
+    if (!nextFocusedElement || nextFocusedElement === document) {
+      let closestPreviousLandmark = this.closestLandmark(previousFocusedElement);
+      closestPreviousLandmark && closestPreviousLandmark.ref.current === previousFocusedElement && closestPreviousLandmark.blur();
+    }
+  }
+  createLandmarkController() {
+    let instance = this;
+    return instance.refCount++, instance.setupIfNeeded(), {
+      navigate(direction, opts) {
+        let element = opts?.from || document.activeElement;
+        return instance.navigate(element, direction === "backward");
+      },
+      focusNext(opts) {
+        let element = opts?.from || document.activeElement;
+        return instance.navigate(element, !1);
+      },
+      focusPrevious(opts) {
+        let element = opts?.from || document.activeElement;
+        return instance.navigate(element, !0);
+      },
+      focusMain() {
+        return instance.focusMain();
+      },
+      dispose() {
+        instance && (instance.refCount--, instance.teardownIfNeeded(), instance = null);
+      }
+    };
+  }
+  registerLandmark(landmark) {
+    return this.landmarks.find((l3) => l3.ref === landmark.ref) ? this.updateLandmark(landmark) : this.addLandmark(landmark), () => this.removeLandmark(landmark.ref);
+  }
+  constructor() {
+    this.landmarks = [], this.isListening = !1, this.refCount = 0, this.version = $a86207c5d7f7e1fb$var$LANDMARK_API_VERSION, this.f6Handler = this.f6Handler.bind(this), this.focusinHandler = this.focusinHandler.bind(this), this.focusoutHandler = this.focusoutHandler.bind(this);
+  }
+};
+function $a86207c5d7f7e1fb$export$4cc632584fd87fae(props, ref) {
+  let { role, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, focus } = props, manager = $a86207c5d7f7e1fb$var$useLandmarkManager(), label = ariaLabel || ariaLabelledby, [isLandmarkFocused, setIsLandmarkFocused] = useState(!1), defaultFocus = useCallback(() => {
+    setIsLandmarkFocused(!0);
+  }, [
+    setIsLandmarkFocused
+  ]), blur = useCallback(() => {
+    setIsLandmarkFocused(!1);
+  }, [
+    setIsLandmarkFocused
+  ]);
+  return $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c(() => {
+    if (manager) return manager.registerLandmark({
+      ref,
+      label,
+      role,
+      focus: focus || defaultFocus,
+      blur
+    });
+  }, [
+    manager,
+    label,
+    ref,
+    role,
+    focus,
+    defaultFocus,
+    blur
+  ]), useEffect(() => {
+    var _ref_current;
+    isLandmarkFocused && ((_ref_current = ref.current) === null || _ref_current === void 0 || _ref_current.focus());
+  }, [
+    isLandmarkFocused,
+    ref
+  ]), {
+    landmarkProps: {
+      role,
+      tabIndex: isLandmarkFocused ? -1 : void 0,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledby
+    }
+  };
+}
+
+// src/manager/hooks/useLandmark.ts
+function useLandmark(props, ref) {
+  let { landmarkProps } = $a86207c5d7f7e1fb$export$4cc632584fd87fae(props, ref);
+  return {
+    landmarkProps: {
+      ...landmarkProps,
+      "data-sb-landmark": !0
+    }
+  };
+}
+
 // src/manager/components/mobile/navigation/MobileAddonsDrawer.tsx
+init_react();
 var MobileAddonsDrawer = ({
   children,
   id,
@@ -3447,6 +3918,15 @@ var MobileAddonsDrawer = ({
   children
 );
 
+// src/manager/components/mobile/navigation/MobileMenuDrawer.tsx
+init_react();
+
+// src/manager/components/mobile/about/MobileAbout.tsx
+init_react();
+
+// ../../node_modules/react-transition-state/dist/esm/hooks/useTransitionState.mjs
+init_react();
+
 // ../../node_modules/react-transition-state/dist/esm/hooks/utils.mjs
 var STATUS = ["preEnter", "entering", "entered", "preExit", "exiting", "exited", "unmounted"], getState = (status) => ({
   _s: status,
@@ -3509,6 +3989,7 @@ var updateState = (status, setState, latestState, timeoutId, onChange) => {
 };
 
 // ../../node_modules/react-transition-state/dist/esm/hooks/useTransitionMap.mjs
+init_react();
 var updateState2 = (key, status, setStateMap, latestStateMap, timeoutId, onChange) => {
   clearTimeout(timeoutId);
   let state = getState(status), stateMap = new Map(latestStateMap.current);
@@ -3578,6 +4059,7 @@ var updateState2 = (key, status, setStateMap, latestStateMap, timeoutId, onChang
 };
 
 // src/manager/components/upgrade/UpgradeBlock.tsx
+init_react();
 var UpgradeBlock = ({ onNavigateToWhatsNew }) => {
   let api = useStorybookApi(), [activeTab, setActiveTab] = useState("npm");
   return react_default.createElement(Container2, null, react_default.createElement("strong", null, "You are on Storybook ", api.getCurrentVersion().version), react_default.createElement("p", null, "Run the following script to check for updates and upgrade to the latest version."), react_default.createElement(Tabs2, null, react_default.createElement(ButtonTab, { active: activeTab === "npm", onClick: () => setActiveTab("npm") }, "npm"), react_default.createElement(ButtonTab, { active: activeTab === "yarn", onClick: () => setActiveTab("yarn") }, "yarn"), react_default.createElement(ButtonTab, { active: activeTab === "pnpm", onClick: () => setActiveTab("pnpm") }, "pnpm")), react_default.createElement(Code2, null, activeTab === "npm" ? "npx storybook@latest upgrade" : `${activeTab} dlx storybook@latest upgrade`), onNavigateToWhatsNew && react_default.createElement(Link, { onClick: onNavigateToWhatsNew }, "See what's new in Storybook"));
@@ -3769,7 +4251,10 @@ var useFullStoryName = () => {
   showPanel,
   ...props
 }) => {
-  let { isMobileMenuOpen, isMobilePanelOpen, setMobileMenuOpen, setMobilePanelOpen } = useLayout(), fullStoryName = useFullStoryName(), headingId = $bdb11010cef70236$export$f680877a34711e37();
+  let { isMobileMenuOpen, isMobilePanelOpen, setMobileMenuOpen, setMobilePanelOpen } = useLayout(), fullStoryName = useFullStoryName(), headingId = $bdb11010cef70236$export$f680877a34711e37(), sectionRef = useRef(null), { landmarkProps } = useLandmark(
+    { "aria-labelledby": headingId, role: "banner" },
+    sectionRef
+  );
   return react_default.createElement(Container4, { ...props }, react_default.createElement(
     MobileMenuDrawer,
     {
@@ -3786,7 +4271,7 @@ var useFullStoryName = () => {
       onOpenChange: setMobilePanelOpen
     },
     panel
-  ), !isMobilePanelOpen && react_default.createElement(MobileBottomBar, { className: "sb-bar", "aria-labelledby": headingId }, react_default.createElement("h2", { id: headingId, className: "sb-sr-only" }, "Navigation controls"), react_default.createElement(
+  ), !isMobilePanelOpen && react_default.createElement(MobileBottomBar, { className: "sb-bar", ...landmarkProps, ref: sectionRef }, react_default.createElement("h2", { id: headingId, className: "sb-sr-only" }, "Navigation controls"), react_default.createElement(
     BottomBarButton,
     {
       padding: "small",
@@ -3810,14 +4295,14 @@ var useFullStoryName = () => {
     },
     react_default.createElement(BottomBarToggleIcon, null)
   )));
-}, Container4 = styled.div(({ theme }) => ({
+}, Container4 = styled.section(({ theme }) => ({
   bottom: 0,
   left: 0,
   width: "100%",
   zIndex: 10,
   background: theme.barBg,
   borderTop: `1px solid ${theme.appBorderColor}`
-})), MobileBottomBar = styled.section({
+})), MobileBottomBar = styled.header({
   display: "flex",
   alignItems: "center",
   justifyContent: "space-between",
@@ -3850,6 +4335,7 @@ var useFullStoryName = () => {
 });
 
 // src/manager/components/layout/useDragging.ts
+init_react();
 var SNAP_THRESHOLD_PX = 30, SIDEBAR_MIN_WIDTH_PX = 240, RIGHT_PANEL_MIN_WIDTH_PX = 270, MIN_WIDTH_STIFFNESS = 0.9;
 function clamp(value, min, max) {
   return Math.min(Math.max(value, min), max);
@@ -3949,6 +4435,46 @@ function useDragging({
   ]), { panelResizerRef, sidebarResizerRef };
 }
 
+// src/manager/components/layout/useLandmarkIndicator.ts
+init_react();
+function findActiveLandmarkElement() {
+  let currentElement = document.activeElement, landmarkElement = null;
+  for (; currentElement; ) {
+    if (currentElement instanceof HTMLElement && currentElement.hasAttribute("data-sb-landmark")) {
+      landmarkElement = currentElement;
+      break;
+    }
+    currentElement = currentElement.parentElement;
+  }
+  return landmarkElement;
+}
+function useLandmarkIndicator() {
+  let theme = useTheme(), currentAnimationRef = useRef(null);
+  useEffect(() => {
+    let handleKeyDown = (e2) => {
+      if (e2.key !== "F6")
+        return;
+      let landmarkElement = findActiveLandmarkElement();
+      if (!landmarkElement)
+        return;
+      currentAnimationRef.current && (currentAnimationRef.current.cancel(), currentAnimationRef.current = null);
+      let animation = landmarkElement.animate(
+        [{ border: `2px solid ${theme.color.primary}` }, { border: "2px solid transparent" }],
+        {
+          duration: 1500,
+          pseudoElement: "::after"
+        }
+      );
+      currentAnimationRef.current = animation, animation.onfinish = () => {
+        currentAnimationRef.current = null;
+      };
+    };
+    return document.addEventListener("keydown", handleKeyDown, { capture: !0 }), () => {
+      document.removeEventListener("keydown", handleKeyDown, { capture: !0 });
+    };
+  }, [theme.color.primary]);
+}
+
 // src/manager/components/layout/Layout.tsx
 var MINIMUM_CONTENT_WIDTH_PX = 100, layoutStateIsEqual = (state, other) => state.navSize === other.navSize && state.bottomPanelHeight === other.bottomPanelHeight && state.rightPanelWidth === other.rightPanelWidth && state.panelPosition === other.panelPosition, useLayoutSyncingState = ({
   api,
@@ -4008,7 +4534,7 @@ var MINIMUM_CONTENT_WIDTH_PX = 100, layoutStateIsEqual = (state, other) => state
     showPanel,
     isDragging
   } = useLayoutSyncingState({ api, managerLayoutState, setManagerLayoutState, isDesktop, hasTab });
-  return react_default.createElement(
+  return useLandmarkIndicator(), react_default.createElement(
     LayoutContainer,
     {
       navSize,
@@ -4134,6 +4660,9 @@ var MINIMUM_CONTENT_WIDTH_PX = 100, layoutStateIsEqual = (state, other) => state
   }
 );
 
+// src/manager/container/Panel.tsx
+init_react();
+
 // global-externals:storybook/internal/types
 var types_default = __STORYBOOK_TYPES__, { Addon_TypesEnum, CoreWebpackCompiler, Feature, SupportedBuilder, SupportedFramework, SupportedLanguage, SupportedRenderer } = __STORYBOOK_TYPES__;
 
@@ -4206,6 +4735,7 @@ var {
 } = events;
 
 // src/manager/components/panel/Panel.tsx
+init_react();
 var TabErrorBoundary = class extends Component {
   constructor(props) {
     super(props), this.state = { hasError: !1 };
@@ -4229,7 +4759,7 @@ var TabErrorBoundary = class extends Component {
     let { children } = this.props;
     return children;
   }
-}, Section = styled.section({
+}, Aside = styled.aside({
   height: "100%",
   display: "flex",
   flexDirection: "column"
@@ -4280,8 +4810,11 @@ var PreRenderAddons = ({ panels }) => Object.entries(panels).map(([k2, v2]) => r
       react_default.createElement(CloseIcon, null)
     )),
     [actions, isDesktop, panelPosition, setMobilePanelOpen, shortcuts]
+  ), asideRef = useRef(null), { landmarkProps } = useLandmark(
+    { "aria-labelledby": "storybook-panel-heading", role: "region" },
+    asideRef
   );
-  return react_default.createElement(Section, { "aria-labelledby": "storybook-panel-heading" }, react_default.createElement("h2", { id: "storybook-panel-heading", className: "sb-sr-only" }, "Addon panel"), react_default.createElement(
+  return react_default.createElement(Aside, { ref: asideRef, ...landmarkProps }, react_default.createElement("h2", { id: "storybook-panel-heading", className: "sb-sr-only" }, "Addon panel"), react_default.createElement(
     StatelessTabsView,
     {
       id: "storybook-panel-root",
@@ -4344,8 +4877,21 @@ var Panel = (props) => {
 }, Panel_default = Panel;
 
 // src/manager/container/Preview.tsx
+init_react();
 var import_memoizerific = __toESM(require_memoizerific(), 1);
 
+// src/manager/components/preview/Preview.tsx
+init_react();
+
+// src/manager/components/preview/FramesRenderer.tsx
+init_react();
+
+// src/manager/components/preview/Viewport.tsx
+init_react();
+
+// src/viewport/useViewport.ts
+init_react();
+
 // src/viewport/constants.ts
 var ADDON_ID = "storybook/viewport", PARAM_KEY = "viewport", PANEL_ID = `${ADDON_ID}/panel`, TOOL_ID = `${ADDON_ID}/tool`;
 
@@ -4524,6 +5070,7 @@ var URL_VALUE_PATTERN = /^([0-9]{1,4})([a-z]{0,4})-([0-9]{1,4})([a-z]{0,4})$/, V
 };
 
 // src/manager/components/preview/Iframe.tsx
+init_react();
 var StyledIframe = styled.iframe(({ theme }) => ({
   backgroundColor: theme.background.preview,
   display: "block",
@@ -4554,6 +5101,7 @@ function IFrame(props) {
 }
 
 // src/manager/components/preview/NumericInput.tsx
+init_react();
 var Wrapper = styled.div(
   ({ after: after2, before: before2, theme }) => ({
     position: "relative",
@@ -4985,10 +5533,11 @@ var getActive = (refId, refs) => refId && refs[refId] ? `storybook-ref-${refId}`
       refId: ref.id,
       viewMode
     }).previewHref);
-  }), react_default.createElement(Fragment, null, react_default.createElement(Global, { styles }), react_default.createElement(Consumer, { filter: whenSidebarIsVisible }, ({ isFullscreen, isNavShown, selectedStoryId }) => isFullscreen || !isNavShown || !selectedStoryId ? null : react_default.createElement(SkipToSidebarLink, { ariaLabel: !1, asChild: !0 }, react_default.createElement("a", { href: `#${selectedStoryId}`, tabIndex: 0, title: "Skip to sidebar" }, "Skip to sidebar"))), Object.entries(frames).map(([id, src]) => react_default.createElement(Viewport, { key: id, id, src, active: id === active, scale })));
+  }), react_default.createElement(Fragment, null, react_default.createElement(Global, { styles }), react_default.createElement(Consumer, { filter: whenSidebarIsVisible }, ({ isFullscreen, isNavShown, selectedStoryId }) => isFullscreen || !isNavShown || !selectedStoryId ? null : react_default.createElement(SkipToSidebarLink, { ariaLabel: !1, asChild: !0 }, react_default.createElement("a", { href: `#${selectedStoryId}`, tabIndex: 0 }, "Skip to sidebar"))), Object.entries(frames).map(([id, src]) => react_default.createElement(Viewport, { key: id, id, src, active: id === active, scale })));
 };
 
 // src/manager/components/preview/Toolbar.tsx
+init_react();
 var fullScreenMapper = ({ api, state }) => ({
   toggle: api.toggleFullscreen,
   isFullscreen: api.getIsFullscreen(),
@@ -5023,13 +5572,18 @@ var fullScreenMapper = ({ api, state }) => ({
   tabs,
   tabState
 }) {
+  let sectionRef = useRef(null), { landmarkProps } = useLandmark(
+    { "aria-labelledby": "sb-preview-toolbar-title", role: "region" },
+    sectionRef
+  );
   return isShown && (tabs || tools || toolsExtra) ? react_default.createElement(
     StyledSection,
     {
       className: "sb-bar",
       key: "toolbar",
       "data-testid": "sb-preview-toolbar",
-      "aria-labelledby": "sb-preview-toolbar-title"
+      ref: sectionRef,
+      ...landmarkProps
     },
     react_default.createElement("h2", { id: "sb-preview-toolbar-title", className: "sb-sr-only" }, "Toolbar"),
     tabs.length > 1 ? react_default.createElement(react_default.Fragment, null, react_default.createElement(TabList, { state: tabState }), react_default.createElement(Separator, null)) : null,
@@ -5090,14 +5644,17 @@ var StyledSection = styled.section(({ theme }) => ({
   alignItems: "center"
 });
 
+// src/manager/components/preview/Wrappers.tsx
+init_react();
+
 // src/manager/components/preview/utils/components.ts
-var PreviewContainer = styled.main({
+var PreviewContainer = styled.div({
   display: "flex",
   flexDirection: "column",
   width: "100%",
   height: "100%",
   overflow: "hidden"
-}), FrameWrap = styled.section({
+}), FrameWrap = styled.main({
   overflow: "auto",
   width: "100%",
   zIndex: 3,
@@ -5165,7 +5722,11 @@ var ApplyWrappers = ({
   }
 ];
 
+// src/manager/components/preview/tools/zoom.tsx
+init_react();
+
 // src/manager/components/Shortcut.tsx
+init_react();
 var Wrapper2 = styled.span(({ theme }) => ({
   display: "inline-flex",
   alignItems: "center",
@@ -5363,7 +5924,7 @@ var canvasMapper = ({ state, api }) => ({
   });
   tabs.length > 1 && deprecate("Addon tabs are deprecated and will be removed in Storybook 11.");
   let tabContent = tabs.find((tab) => tab.id === tabId)?.render, shouldScale = viewMode === "story", { showToolbar } = options2, customisedShowToolbar = api.getShowToolbarWithCustomisations(showToolbar), previousStoryId = useRef(storyId);
-  return useEffect(() => {
+  useEffect(() => {
     if (entry && viewMode) {
       if (storyId === previousStoryId.current)
         return;
@@ -5376,7 +5937,12 @@ var canvasMapper = ({ state, api }) => ({
         });
       }
     }
-  }, [entry, viewMode, storyId, api]), react_default.createElement(Fragment, null, previewId === "main" && react_default.createElement(W, { key: "description" }, react_default.createElement("title", null, description)), react_default.createElement(ZoomProvider, { shouldScale }, react_default.createElement(PreviewContainer, null, react_default.createElement(
+  }, [entry, viewMode, storyId, api]);
+  let mainRef = useRef(null), { landmarkProps } = useLandmark(
+    { "aria-labelledby": "main-preview-heading", role: "main" },
+    mainRef
+  );
+  return react_default.createElement(Fragment, null, previewId === "main" && react_default.createElement(W, { key: "description" }, react_default.createElement("title", null, description)), react_default.createElement(ZoomProvider, { shouldScale }, react_default.createElement(PreviewContainer, null, react_default.createElement(
     ToolbarComp,
     {
       key: "tools",
@@ -5386,7 +5952,7 @@ var canvasMapper = ({ state, api }) => ({
       tools,
       toolsExtra
     }
-  ), react_default.createElement(FrameWrap, { "aria-labelledby": "main-preview-heading" }, react_default.createElement("h2", { id: "main-preview-heading", className: "sb-sr-only" }, "Main preview area"), tabContent && react_default.createElement(IframeWrapper, null, tabContent({ active: !0 })), react_default.createElement(CanvasWrap, { show: !tabId || tabId === "canvas" }, react_default.createElement(Canvas, { withLoader, baseUrl, wrappers }))))));
+  ), react_default.createElement(FrameWrap, { ref: mainRef, ...landmarkProps }, react_default.createElement("h2", { id: "main-preview-heading", className: "sb-sr-only" }, "Main preview area"), tabContent && react_default.createElement(IframeWrapper, null, tabContent({ active: !0 })), react_default.createElement(CanvasWrap, { show: !tabId || tabId === "canvas" }, react_default.createElement(Canvas, { withLoader, baseUrl, wrappers }))))));
 });
 var Canvas = ({ baseUrl, withLoader, wrappers }) => react_default.createElement(Consumer, { filter: canvasMapper }, ({
   api,
@@ -5452,6 +6018,7 @@ function filterTabs(panels, parameters) {
 }
 
 // src/manager/components/preview/tools/addons.tsx
+init_react();
 var menuMapper = ({ api, state }) => ({
   isVisible: api.getIsPanelShown(),
   singleStory: state.singleStory,
@@ -5476,6 +6043,7 @@ var menuMapper = ({ api, state }) => ({
 };
 
 // src/manager/components/preview/tools/menu.tsx
+init_react();
 var menuMapper2 = ({ api, state }) => ({
   isVisible: api.getIsNavShown(),
   singleStory: state.singleStory,
@@ -5500,6 +6068,7 @@ var menuMapper2 = ({ api, state }) => ({
 };
 
 // src/manager/components/preview/tools/open-in-editor.tsx
+init_react();
 var mapper2 = ({ state, api }) => {
   let { storyId, refId } = state, entry = api.getData(storyId, refId);
   return {
@@ -5531,6 +6100,7 @@ var mapper2 = ({ state, api }) => {
 };
 
 // src/manager/components/preview/tools/remount.tsx
+init_react();
 var StyledAnimatedButton = styled(Button)(({ theme, animating, disabled }) => ({
   opacity: disabled ? 0.5 : 1,
   svg: {
@@ -5573,9 +6143,11 @@ var StyledAnimatedButton = styled(Button)(({ theme, animating, disabled }) => ({
 };
 
 // src/manager/components/preview/tools/share.tsx
+init_react();
 var import_copy_to_clipboard = __toESM(require_copy_to_clipboard(), 1);
 
 // ../../node_modules/qrcode.react/lib/esm/index.js
+init_react();
 var __defProp2 = Object.defineProperty, __getOwnPropSymbols = Object.getOwnPropertySymbols, __hasOwnProp2 = Object.prototype.hasOwnProperty, __propIsEnum = Object.prototype.propertyIsEnumerable, __defNormalProp = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value, __spreadValues = (a2, b2) => {
   for (var prop in b2 || (b2 = {}))
     __hasOwnProp2.call(b2, prop) && __defNormalProp(a2, prop, b2[prop]);
@@ -6539,7 +7111,17 @@ var defaultTabs = [createCanvasTab()], defaultTools = [menuTool, remountTool], d
   return react_default.createElement(Consumer, { filter: mapper4 }, (fromState) => react_default.createElement(Preview, { ...props, ...fromState }));
 }), Preview_default = PreviewConnected;
 
+// src/manager/container/Sidebar.tsx
+init_react();
+
+// src/manager/components/sidebar/Sidebar.tsx
+init_react();
+
+// src/manager/components/sidebar/ChecklistWidget.tsx
+init_react();
+
 // src/manager/components/Optional/Optional.tsx
+init_react();
 var Wrapper3 = styled.div({
   display: "inline-grid",
   gridTemplateColumns: "max-content",
@@ -6565,6 +7147,7 @@ var Wrapper3 = styled.div({
 };
 
 // src/manager/components/Particles/Particles.tsx
+init_react();
 var Shape = styled.svg(({ color: color2 }) => ({
   fill: color2,
   position: "absolute",
@@ -6643,6 +7226,7 @@ var Shape = styled.svg(({ color: color2 }) => ({
 });
 
 // src/manager/components/TextFlip.tsx
+init_react();
 var slideIn2 = keyframes({
   from: {
     transform: "translateY(var(--slide-in-from))",
@@ -6701,6 +7285,9 @@ function numericCompare(a2, b2) {
   return Number.isNaN(na) || Number.isNaN(nb) ? a2.localeCompare(b2, void 0, { numeric: !0 }) > 0 : na > nb;
 }
 
+// src/manager/components/sidebar/useChecklist.ts
+init_react();
+
 // ../../node_modules/es-toolkit/dist/function/debounce.mjs
 function debounce(func, debounceMs, { signal, edges } = {}) {
   let pendingThis, pendingArgs = null, leading = edges != null && edges.includes("leading"), trailing = edges == null || edges.includes("trailing"), invoke = () => {
@@ -6772,6 +7359,9 @@ function throttle(func, throttleMs, { signal, edges = ["leading", "trailing"] }
   return throttled.cancel = debounced.cancel, throttled.flush = debounced.flush, throttled;
 }
 
+// src/shared/checklist-store/checklistData.tsx
+init_react();
+
 // ../addons/a11y/src/constants.ts
 var ADDON_ID2 = "storybook/a11y", PANEL_ID2 = `${ADDON_ID2}/panel`;
 var UI_STATE_ID = `${ADDON_ID2}/ui`, RESULT = `${ADDON_ID2}/result`, REQUEST = `${ADDON_ID2}/request`, RUNNING = `${ADDON_ID2}/running`, ERROR = `${ADDON_ID2}/error`, MANUAL = `${ADDON_ID2}/manual`, SELECT = `${ADDON_ID2}/select`, DOCUMENTATION_LINK = "writing-tests/accessibility-testing", DOCUMENTATION_DISCREPANCY_LINK = `${DOCUMENTATION_LINK}#why-are-my-tests-failing-in-different-environments`;
@@ -6842,6 +7432,12 @@ var SUPPORTED_FRAMEWORKS = [
 var ADDON_ID6 = "storybook/docs", PANEL_ID4 = `${ADDON_ID6}/panel`;
 var SNIPPET_RENDERED = `${ADDON_ID6}/snippet-rendered`;
 
+// src/manager/components/TourGuide/TourGuide.tsx
+init_react();
+
+// ../../node_modules/react-joyride/dist/index.mjs
+init_react();
+
 // ../../node_modules/@gilbarbara/deep-equal/dist/index.mjs
 function isOfType(type) {
   return (value) => typeof value === type;
@@ -7172,11 +7768,17 @@ function treeChanges(previousData, data) {
 
 // ../../node_modules/react-joyride/dist/index.mjs
 var import_scroll = __toESM(require_scroll(), 1), import_scrollparent = __toESM(require_scrollparent(), 1);
+init_react();
 var import_react_innertext = __toESM(require_react_innertext(), 1);
 var import_deepmerge2 = __toESM(require_cjs(), 1);
 var import_deepmerge3 = __toESM(require_cjs(), 1);
+init_react();
+init_react();
+init_react();
+init_react();
 
 // ../../node_modules/react-floater/es/index.js
+init_react();
 var import_prop_types2 = __toESM(require_prop_types());
 
 // ../../node_modules/popper.js/dist/esm/popper.js
@@ -9253,6 +9855,10 @@ _defineProperty(ReactFloater, "propTypes", { autoOpen: import_prop_types2.defaul
 _defineProperty(ReactFloater, "defaultProps", { autoOpen: !1, callback: noop2, debug: !1, disableAnimation: !1, disableFlip: !1, disableHoverToClick: !1, event: "click", eventDelay: 0.4, getPopper: noop2, hideArrow: !1, offset: 15, placement: "bottom", showCloseButton: !1, styles: {}, target: null, wrapperOptions: { position: !1 } });
 
 // ../../node_modules/react-joyride/dist/index.mjs
+init_react();
+init_react();
+init_react();
+init_react();
 var __defProp3 = Object.defineProperty, __defNormalProp2 = (obj, key, value) => key in obj ? __defProp3(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value, __publicField = (obj, key, value) => __defNormalProp2(obj, typeof key != "symbol" ? key + "" : key, value), ACTIONS = {
   INIT: "init",
   START: "start",
@@ -10702,6 +11308,7 @@ __publicField(Joyride, "defaultProps", defaultProps);
 var components_default2 = Joyride;
 
 // src/manager/components/TourGuide/HighlightElement.tsx
+init_react();
 var HIGHLIGHT_KEYFRAMES_ID = "storybook-highlight-element-keyframes", keyframes2 = `
   @keyframes sb-highlight-pulsate {
     0% {
@@ -10765,6 +11372,7 @@ function HighlightElement({
 }
 
 // src/manager/components/TourGuide/TourTooltip.tsx
+init_react();
 var ONBOARDING_ARROW_STYLE_ID = "storybook-onboarding-arrow-style", TooltipBody = styled.div`
   padding: 15px;
   border-radius: 5px;
@@ -10943,6 +11551,7 @@ TourGuide.render = (props) => {
 };
 
 // src/manager/hooks/useLocation.ts
+init_react();
 var LocationMonitor = {
   _currentHref: globalThis.window?.location.href ?? "",
   _intervalId: null,
@@ -12061,7 +12670,11 @@ var fadeScaleIn = keyframes`
   )));
 };
 
+// src/manager/components/sidebar/CreateNewStoryFileModal.tsx
+init_react();
+
 // src/manager/hooks/useDebounce.ts
+init_react();
 function useDebounce(value, delay2) {
   let [debouncedValue, setDebouncedValue] = useState(value);
   return useEffect(() => {
@@ -12074,7 +12687,11 @@ function useDebounce(value, delay2) {
   }, [value, delay2]), debouncedValue;
 }
 
+// src/manager/components/sidebar/FileSearchModal.tsx
+init_react();
+
 // src/manager/hooks/useMeasure.tsx
+init_react();
 function useMeasure() {
   let [dimensions, setDimensions] = react_default.useState({
     width: null,
@@ -12093,6 +12710,12 @@ function useMeasure() {
   }, []), dimensions];
 }
 
+// src/manager/components/sidebar/FileSearchList.tsx
+init_react();
+
+// ../../node_modules/@tanstack/react-virtual/dist/esm/index.js
+init_react();
+
 // ../../node_modules/@tanstack/virtual-core/dist/esm/utils.js
 function memo2(getDeps, fn, opts) {
   let deps = opts.initialDeps ?? [], result;
@@ -12645,6 +13268,7 @@ function useVirtualizer(options2) {
 }
 
 // src/manager/components/sidebar/FIleSearchList.utils.tsx
+init_react();
 var useArrowKeyNavigation = ({
   parentRef,
   rowVirtualizer,
@@ -12860,6 +13484,7 @@ var FileListWrapper = styled("div")(({ theme }) => ({
 }));
 
 // src/manager/components/sidebar/FileSearchListSkeleton.tsx
+init_react();
 var FileListItemContentWrapperSkeleton = styled("div")(({ theme }) => ({
   display: "flex",
   alignItems: "flex-start",
@@ -13321,7 +13946,11 @@ var isRendererReact = scope.STORYBOOK_RENDERER === "react", CreateNewStoryFileMo
   );
 };
 
+// src/manager/components/sidebar/Explorer.tsx
+init_react();
+
 // src/manager/components/sidebar/HighlightStyles.tsx
+init_react();
 var HighlightStyles = ({ refId, itemId }) => react_default.createElement(
   Global,
   {
@@ -13344,6 +13973,9 @@ var HighlightStyles = ({ refId, itemId }) => react_default.createElement(
   }
 );
 
+// src/manager/components/sidebar/Refs.tsx
+init_react();
+
 // src/manager/utils/tree.ts
 var import_memoizerific2 = __toESM(require_memoizerific(), 1);
 var { document: document2, window: globalWindow } = scope, createId = (itemId, refId) => !refId || refId === DEFAULT_REF_ID ? itemId : `${refId}_${itemId}`, getLink = (item, refId) => `${document2.location.pathname}?path=/${item.type}/${createId(item.id, refId)}`;
@@ -13394,7 +14026,11 @@ var scrollIntoView = (element, center = !1) => {
   }
 }, isAncestor = (element, maybeAncestor) => !element || !maybeAncestor ? !1 : element === maybeAncestor ? !0 : isAncestor(element.parentElement || void 0, maybeAncestor), removeNoiseFromName = (storyName) => storyName.replaceAll(/(\s|-|_)/gi, ""), isStoryHoistable = (storyName, componentName) => removeNoiseFromName(storyName) === removeNoiseFromName(componentName);
 
+// src/manager/components/sidebar/RefBlocks.tsx
+init_react();
+
 // src/manager/components/sidebar/Loader.tsx
+init_react();
 var LOADER_SEQUENCE = [0, 0, 1, 1, 2, 3, 3, 3, 1, 1, 1, 2, 2, 2, 3], Loadingitem = styled.div(
   {
     cursor: "progress",
@@ -13518,6 +14154,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
+init_react();
 var { document: document3, window: globalWindow3 } = scope, IndicatorPlacement = styled.div(({ theme }) => ({
   height: 16,
   display: "flex",
@@ -13673,10 +14310,15 @@ var { document: document3, window: globalWindow3 } = scope, IndicatorPlacement =
   return react_default.createElement(Message, { href: "https://storybook.js.org/docs/sharing/storybook-composition?ref=ui" }, react_default.createElement(LightningIcon, { color: theme.color.gold }), react_default.createElement("div", null, react_default.createElement(MessageTitle, null, "Reduce lag"), react_default.createElement("div", null, "Learn how to speed up Composition performance.")));
 };
 
+// src/manager/components/sidebar/Tree.tsx
+init_react();
+
 // src/manager/utils/status.tsx
+init_react();
 var import_memoizerific3 = __toESM(require_memoizerific(), 1);
 
 // src/manager/components/sidebar/IconSymbols.tsx
+init_react();
 var Svg2 = styled.svg`
   position: absolute;
   width: 0;
@@ -13805,9 +14447,11 @@ function getGroupStatus(collapsedData, allStatuses) {
 }
 
 // src/manager/components/sidebar/ContextMenu.tsx
+init_react();
 var import_copy_to_clipboard2 = __toESM(require_copy_to_clipboard(), 1);
 
 // src/manager/components/sidebar/StatusButton.tsx
+init_react();
 var withStatusColor = ({ theme, status }) => {
   let defaultColor = theme.base === "light" ? curriedTransparentize$1(0.3, theme.color.defaultText) : curriedTransparentize$1(0.6, theme.color.defaultText);
   return {
@@ -13860,6 +14504,7 @@ var withStatusColor = ({ theme, status }) => {
 StatusButton.displayName = "StatusButton";
 
 // src/manager/components/sidebar/StatusContext.tsx
+init_react();
 var StatusContext = createContext({});
 
 // src/manager/components/sidebar/ContextMenu.tsx
@@ -13978,7 +14623,11 @@ function generateTestProviderLinks(registeredTestProviders, context) {
   }).filter(Boolean);
 }
 
+// src/manager/components/sidebar/TreeNode.tsx
+init_react();
+
 // src/manager/components/sidebar/components/CollapseIcon.tsx
+init_react();
 var CollapseIconWrapper = styled.div(({ theme, isExpanded }) => ({
   width: 8,
   height: 8,
@@ -14092,6 +14741,9 @@ var TypeIcon2 = styled.svg(
   return react_default.createElement(LeafNode, { tabIndex: -1, rel: "canonical", ...props }, react_default.createElement(Wrapper5, null, react_default.createElement(TypeIcon2, { viewBox: "0 0 14 14", width: "12", height: "12", type: "test" }, react_default.createElement(UseSymbol, { type: "test" }))), children);
 });
 
+// src/manager/components/sidebar/useExpanded.ts
+init_react();
+
 // src/manager/keybinding.ts
 var codeToKeyMap = {
   // event.code => event.key
@@ -14374,7 +15026,7 @@ var statusOrder = [
         },
         item.renderLabel?.(item, api) || item.name
       ),
-      isSelected && react_default.createElement(SkipToContentLink, { asChild: !0, ariaLabel: !1 }, react_default.createElement("a", { href: "#storybook-preview-wrapper" }, "Skip to canvas")),
+      isSelected && react_default.createElement(SkipToContentLink, { asChild: !0, ariaLabel: !1 }, react_default.createElement("a", { href: "#storybook-preview-wrapper" }, "Skip to content")),
       contextMenu.node,
       icon ? react_default.createElement(
         StatusButton,
@@ -14479,7 +15131,7 @@ var statusOrder = [
         },
         item.renderLabel?.(item, api) || item.name
       ),
-      isSelected && react_default.createElement(SkipToContentLink, { asChild: !0, ariaLabel: !1 }, react_default.createElement("a", { href: "#storybook-preview-wrapper" }, "Skip to canvas")),
+      isSelected && react_default.createElement(SkipToContentLink, { asChild: !0, ariaLabel: !1 }, react_default.createElement("a", { href: "#storybook-preview-wrapper" }, "Skip to content")),
       contextMenu.node,
       showBranchStatus ? react_default.createElement(
         StatusButton,
@@ -14521,7 +15173,7 @@ var statusOrder = [
       },
       item.renderLabel?.(item, api) || item.name
     ),
-    isSelected && react_default.createElement(SkipToContentLink, { ariaLabel: !1, asChild: !0 }, react_default.createElement("a", { href: "#storybook-preview-wrapper" }, "Skip to canvas")),
+    isSelected && react_default.createElement(SkipToContentLink, { ariaLabel: !1, asChild: !0 }, react_default.createElement("a", { href: "#storybook-preview-wrapper" }, "Skip to content")),
     contextMenu.node,
     itemStatusButton
   );
@@ -14676,7 +15328,7 @@ var statusOrder = [
     setExpanded,
     allStatuses
   ]);
-  return react_default.createElement(StatusContext.Provider, { value: { data, allStatuses, groupStatus } }, react_default.createElement("div", { ref: containerRef }, react_default.createElement(IconSymbols, null), treeItems));
+  return react_default.createElement(StatusContext.Provider, { value: { data, allStatuses, groupStatus } }, react_default.createElement("div", { ref: containerRef }, treeItems));
 });
 
 // src/manager/components/sidebar/Refs.tsx
@@ -14773,6 +15425,7 @@ var Wrapper6 = styled.div(({ isMain }) => ({
 });
 
 // src/manager/components/sidebar/useHighlighted.ts
+init_react();
 var { document: document5, window: globalWindow4 } = scope, fromSelection = (selection) => selection ? { itemId: selection.storyId, refId: selection.refId } : null, scrollToSelector = (selector, options2 = {}, _attempt = 1) => {
   let { containerRef, center = !1, attempts = 3, delay: delay2 = 500 } = options2, element = (containerRef ? containerRef.current : document5)?.querySelector(selector);
   element ? scrollIntoView(element, center) : _attempt <= attempts && setTimeout(scrollToSelector, delay2, selector, options2, _attempt + 1);
@@ -14836,23 +15489,34 @@ var Explorer = react_default.memo(function({
   hasEntries,
   isLoading,
   isBrowsing,
+  isHidden,
   dataset,
-  selected
+  selected,
+  ...restProps
 }) {
   let containerRef = useRef(null), [highlighted, setHighlighted, highlightedRef] = useHighlighted({
     containerRef,
     isLoading,
     isBrowsing,
     selected
-  });
+  }), { landmarkProps } = useLandmark(
+    { "aria-labelledby": "storybook-explorer-tree-heading", role: "navigation" },
+    containerRef
+  );
   return react_default.createElement(
-    "div",
+    "nav",
     {
+      hidden: isHidden || void 0,
+      "aria-hidden": isHidden || void 0,
+      className: isBrowsing ? void 0 : "sb-sr-only",
       ref: containerRef,
       id: "storybook-explorer-tree",
       "data-highlighted-ref-id": highlighted?.refId,
-      "data-highlighted-item-id": highlighted?.itemId
+      "data-highlighted-item-id": highlighted?.itemId,
+      ...landmarkProps,
+      ...restProps
     },
+    react_default.createElement("h2", { id: "storybook-explorer-tree-heading", className: "sb-sr-only" }, "Stories"),
     highlighted && react_default.createElement(HighlightStyles, { ...highlighted }),
     dataset.entries.map(([refId, ref]) => react_default.createElement(
       Ref,
@@ -14870,7 +15534,11 @@ var Explorer = react_default.memo(function({
   );
 });
 
+// src/manager/components/sidebar/Heading.tsx
+init_react();
+
 // src/manager/components/sidebar/Brand.tsx
+init_react();
 var StorybookLogoStyled = styled(StorybookLogo)(({ theme }) => ({
   width: "auto",
   height: "22px !important",
@@ -14903,6 +15571,7 @@ var StorybookLogoStyled = styled(StorybookLogo)(({ theme }) => ({
 });
 
 // src/manager/components/sidebar/Menu.tsx
+init_react();
 var buttonStyleAdditions = ({
   highlighted,
   isMobile: isMobile2,
@@ -15091,7 +15760,10 @@ var BrandArea = styled.div(({ theme }) => ({
   isLoading,
   onMenuClick,
   ...props
-}) => react_default.createElement(HeadingWrapper, { ...props }, skipLinkHref && react_default.createElement(SkipToCanvasLink, { ariaLabel: !1, asChild: !0 }, react_default.createElement("a", { href: skipLinkHref, tabIndex: 0 }, "Skip to canvas")), react_default.createElement(BrandArea, null, react_default.createElement(Brand, null)), react_default.createElement(SidebarMenu, { menu, isHighlighted: menuHighlighted, onClick: onMenuClick }));
+}) => react_default.createElement(HeadingWrapper, { ...props }, skipLinkHref && react_default.createElement(SkipToCanvasLink, { ariaLabel: !1, asChild: !0 }, react_default.createElement("a", { href: skipLinkHref, tabIndex: 0 }, "Skip to content")), react_default.createElement(BrandArea, null, react_default.createElement(Brand, null)), react_default.createElement(SidebarMenu, { menu, isHighlighted: menuHighlighted, onClick: onMenuClick }));
+
+// src/manager/components/sidebar/Search.tsx
+init_react();
 
 // ../../node_modules/@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js
 function _objectWithoutPropertiesLoose2(r3, e2) {
@@ -15106,6 +15778,7 @@ function _objectWithoutPropertiesLoose2(r3, e2) {
 
 // ../../node_modules/downshift/dist/downshift.esm.js
 var import_prop_types3 = __toESM(require_prop_types());
+init_react();
 var import_react_is = __toESM(require_react_is());
 
 // ../../node_modules/compute-scroll-into-view/dist/index.js
@@ -17346,7 +18019,7 @@ var { document: document6 } = scope, DEFAULT_MAX_SEARCH_RESULTS = 50, options =
       }
     },
     []
-  ), { isMobile: isMobile2 } = useLayout();
+  ), { isMobile: isMobile2 } = useLayout(), searchLandmarkRef = useRef(null), { landmarkProps } = useLandmark({ role: "search" }, searchLandmarkRef);
   return (
     // @ts-expect-error (non strict)
     react_default.createElement(
@@ -17397,7 +18070,7 @@ var { document: document6 } = scope, DEFAULT_MAX_SEARCH_RESULTS = 50, options =
         }), labelProps = getLabelProps({
           htmlFor: inputId
         });
-        return react_default.createElement(react_default.Fragment, null, react_default.createElement(ScreenReaderLabel, { ...labelProps }, "Search for components"), react_default.createElement(SearchBar, null, react_default.createElement(
+        return react_default.createElement(react_default.Fragment, null, react_default.createElement(ScreenReaderLabel, { ...labelProps }, "Search for components"), react_default.createElement(SearchBar, { ref: searchLandmarkRef, ...landmarkProps }, react_default.createElement(
           SearchField2,
           {
             ...getRootProps({ refKey: "" }, { suppressRefError: !0 }),
@@ -17422,7 +18095,9 @@ var { document: document6 } = scope, DEFAULT_MAX_SEARCH_RESULTS = 50, options =
         ), searchBarContent), react_default.createElement(FocusContainer, { tabIndex: 0, id: "storybook-explorer-menu" }, children({
           query: input,
           results,
-          isBrowsing: !isOpen && document6.activeElement !== inputRef.current,
+          isNavVisible: !isOpen && document6.activeElement !== inputRef.current,
+          isNavReachable: input.length === 0,
+          isSearchResultRendered: isOpen,
           closeMenu,
           getMenuProps,
           getItemProps,
@@ -17434,6 +18109,7 @@ var { document: document6 } = scope, DEFAULT_MAX_SEARCH_RESULTS = 50, options =
 });
 
 // src/manager/components/sidebar/SearchResults.tsx
+init_react();
 var { document: document7 } = scope, ResultsList = styled.ol({
   listStyle: "none",
   margin: 0,
@@ -17611,7 +18287,14 @@ var { document: document7 } = scope, ResultsList = styled.ol({
   }));
 });
 
+// src/manager/components/sidebar/SidebarBottom.tsx
+init_react();
+
+// src/manager/components/sidebar/TestingWidget.tsx
+init_react();
+
 // src/manager/components/sidebar/useDynamicFavicon.ts
+init_react();
 var STATUSES = ["active", "critical", "negative", "positive", "warning"], initialIcon, getFaviconUrl = (initialHref = "./favicon.svg", status) => {
   initialIcon ??= initialHref;
   let href = initialIcon + (status && STATUSES.includes(status) ? `?status=${status}` : "");
@@ -17765,18 +18448,26 @@ var DEFAULT_HEIGHT = 500, HoverCard2 = styled(Card)({
   ), isCrashed = Object.values(testProviderStates).some(
     (testProviderState) => testProviderState === "test-provider-state:crashed"
   ), hasTestProviders = Object.values(registeredTestProviders).length > 0;
-  return useEffect(() => {
+  useEffect(() => {
     isCrashed && isCollapsed && toggleCollapsed(void 0, !1);
   }, [isCrashed, isCollapsed, toggleCollapsed]), useDynamicFavicon(
     isCrashed ? "critical" : errorCount > 0 ? "negative" : warningCount > 0 ? "warning" : isRunning ? "active" : successCount > 0 ? "positive" : void 0
-  ), !hasTestProviders && !errorCount && !warningCount ? null : react_default.createElement(
+  );
+  let cardRef = useRef(null), { landmarkProps } = useLandmark(
+    { "aria-labelledby": "storybook-testing-widget-heading", role: "region" },
+    cardRef
+  );
+  return !hasTestProviders && !errorCount && !warningCount ? null : react_default.createElement(
     HoverCard2,
     {
       id: "storybook-testing-module",
       "data-updated": isUpdated,
       outlineAnimation: isRunning ? "spin" : "none",
-      outlineColor: isCrashed || isRunning && errorCount > 0 ? "negative" : isUpdated ? "positive" : void 0
+      outlineColor: isCrashed || isRunning && errorCount > 0 ? "negative" : isUpdated ? "positive" : void 0,
+      ref: cardRef,
+      outlineAttrs: landmarkProps
     },
+    react_default.createElement("h2", { id: "storybook-testing-widget-heading", className: "sb-sr-only" }, "Component tests"),
     react_default.createElement(Bar2, { ...hasTestProviders ? { onClick: (e2) => toggleCollapsed(e2) } : {} }, react_default.createElement(Action, null, hasTestProviders && react_default.createElement(
       Optional,
       {
@@ -17960,7 +18651,11 @@ var SIDEBAR_BOTTOM_SPACER_ID = "sidebar-bottom-spacer", SIDEBAR_BOTTOM_WRAPPER_I
   );
 };
 
+// src/manager/components/sidebar/TagsFilter.tsx
+init_react();
+
 // src/manager/components/sidebar/TagsFilterPanel.tsx
+init_react();
 var groupByType = (filters) => filters.reduce(
   (acc, filter) => (acc[filter.type] = acc[filter.type] || [], acc[filter.type].push(filter), acc),
   {}
@@ -18207,6 +18902,7 @@ var TAGS_FILTER = "tags-filter", BUILT_IN_TAGS = new Set(Object.values(Tag)), St
 };
 
 // src/manager/components/sidebar/useLastViewed.ts
+init_react();
 var import_store2 = __toESM(require_store2(), 1), save = debounce((value) => import_store2.default.set("lastViewedStoryIds", value), 1e3), useLastViewed = (selection) => {
   let initialLastViewedStoryIds = useMemo(() => {
     let items = import_store2.default.get("lastViewedStoryIds");
@@ -18231,7 +18927,7 @@ var import_store2 = __toESM(require_store2(), 1), save = debounce((value) => imp
 };
 
 // src/manager/components/sidebar/Sidebar.tsx
-var DEFAULT_REF_ID = "storybook_internal", Container8 = styled.nav(({ theme }) => ({
+var DEFAULT_REF_ID = "storybook_internal", Container8 = styled.header(({ theme }) => ({
   position: "absolute",
   zIndex: 1,
   left: 0,
@@ -18256,13 +18952,7 @@ var DEFAULT_REF_ID = "storybook_internal", Container8 = styled.nav(({ theme }) =
   width: isMobile2 ? 36 : 32,
   height: isMobile2 ? 36 : 32,
   borderRadius: theme.appBorderRadius + 2
-})), Swap = react_default.memo(function({
-  children,
-  condition
-}) {
-  let [a2, b2] = react_default.Children.toArray(children);
-  return react_default.createElement(react_default.Fragment, null, react_default.createElement("div", { style: { display: condition ? "block" : "none" } }, a2), react_default.createElement("div", { style: { display: condition ? "none" : "block" } }, b2));
-}), useCombination = (index, indexError, previewInitialized, allStatuses, refs) => {
+})), useCombination = (index, indexError, previewInitialized, allStatuses, refs) => {
   let hash = useMemo(
     () => ({
       [DEFAULT_REF_ID]: {
@@ -18303,8 +18993,11 @@ var DEFAULT_REF_ID = "storybook_internal", Container8 = styled.nav(({ theme }) =
       return acc[tag] = option, acc;
     }, {}),
     []
+  ), headerRef = useRef(null), { landmarkProps } = useLandmark(
+    { "aria-labelledby": "global-site-h1", role: "banner" },
+    headerRef
   );
-  return react_default.createElement(Container8, { className: "container sidebar-container", "aria-label": "Global" }, react_default.createElement(ScrollArea, { vertical: !0, offset: 3, scrollbarSize: 6, scrollPadding: "4rem" }, react_default.createElement(Stack, null, react_default.createElement("div", null, react_default.createElement(
+  return react_default.createElement(Container8, { className: "container sidebar-container", ref: headerRef, ...landmarkProps }, react_default.createElement("h1", { id: "global-site-h1", className: "sb-sr-only" }, "Storybook"), react_default.createElement(IconSymbols, null), react_default.createElement(ScrollArea, { vertical: !0, offset: 3, scrollbarSize: 6, scrollPadding: "4rem" }, react_default.createElement(Stack, null, react_default.createElement("div", null, react_default.createElement(
     Heading2,
     {
       className: "sidebar-header",
@@ -18344,21 +19037,24 @@ var DEFAULT_REF_ID = "storybook_internal", Container8 = styled.nav(({ theme }) =
     ({
       query,
       results,
-      isBrowsing,
+      isNavVisible,
+      isNavReachable,
+      isSearchResultRendered,
       closeMenu,
       getMenuProps,
       getItemProps,
       highlightedIndex
-    }) => react_default.createElement(Swap, { condition: isBrowsing }, react_default.createElement(
+    }) => react_default.createElement(react_default.Fragment, null, react_default.createElement(
       Explorer,
       {
         dataset,
         selected,
         isLoading,
-        isBrowsing,
+        isBrowsing: isNavVisible,
+        isHidden: !isNavReachable,
         hasEntries
       }
-    ), react_default.createElement(
+    ), isSearchResultRendered && react_default.createElement(
       SearchResults,
       {
         query,
@@ -18376,6 +19072,7 @@ var DEFAULT_REF_ID = "storybook_internal", Container8 = styled.nav(({ theme }) =
 });
 
 // src/manager/container/Menu.tsx
+init_react();
 var ProgressCircle2 = styled(ProgressSpinner)(({ theme }) => ({
   color: theme.color.secondary
 })), useMenu = ({
@@ -18636,7 +19333,14 @@ var Provider2 = class {
   }
 };
 
+// src/manager/settings/index.tsx
+init_react();
+
+// src/manager/settings/AboutPage.tsx
+init_react();
+
 // src/manager/settings/About.tsx
+init_react();
 var Container9 = styled.div({
   display: "flex",
   alignItems: "center",
@@ -18698,7 +19402,14 @@ var NotificationClearer = class extends Component {
   ));
 };
 
+// src/manager/settings/GuidePage.tsx
+init_react();
+
+// src/manager/settings/Checklist/Checklist.tsx
+init_react();
+
 // src/manager/components/Focus/Focus.tsx
+init_react();
 var FocusOutline = styled.div(
   ({ theme, active = !1, outlineOffset = 0 }) => ({
     width: "100%",
@@ -19109,7 +19820,14 @@ var Container10 = styled.div(({ theme }) => ({
   return react_default.createElement(Container10, null, react_default.createElement(Intro, null, react_default.createElement("h1", null, "Guide"), react_default.createElement("p", null, "Whether you're just getting started or looking for ways to level up, this checklist will help you make the most of your Storybook.")), react_default.createElement(Checklist, { ...checklist }), scope.FEATURES?.sidebarOnboardingChecklist !== !1 && react_default.createElement(react_default.Fragment, null, checklist.openItems.length === 0 ? react_default.createElement("center", null, "Your work here is done!") : checklist.widget.disable || checklist.openItems.every((item) => item.isMuted) ? react_default.createElement("center", null, "Want to see this in the sidebar?", " ", react_default.createElement(Link, { onClick: () => checklist.disable(!1) }, "Show in sidebar")) : react_default.createElement("center", null, "Don't want to see this in the sidebar?", " ", react_default.createElement(Link, { onClick: () => checklist.mute(checklist.allItems.map(({ id }) => id)) }, "Remove from sidebar"))));
 };
 
+// src/manager/settings/ShortcutsPage.tsx
+init_react();
+
+// src/manager/settings/shortcuts.tsx
+init_react();
+
 // src/manager/settings/SettingsFooter.tsx
+init_react();
 var Footer2 = styled.div(({ theme }) => ({
   display: "flex",
   paddingTop: 20,
@@ -19217,16 +19935,21 @@ var Header2 = styled.header(({ theme }) => ({
   remount: "Reload story",
   openInEditor: "Open story in editor",
   openInIsolation: "Open story in isolation",
-  copyStoryLink: "Copy story link to clipboard"
+  copyStoryLink: "Copy story link to clipboard",
+  goToPreviousLandmark: "Go to previous landmark",
+  goToNextLandmark: "Go to next landmark"
   // TODO: bring this back once we want to add shortcuts for this
   // copyStoryName: 'Copy story name to clipboard',
-}, fixedShortcuts = ["escape"];
+}, fixedShortcuts = ["escape"], hardcodedShortcuts = ["goToPreviousLandmark", "goToNextLandmark"];
 function toShortcutState(shortcutKeys) {
-  return Object.entries(shortcutKeys).reduce(
-    // @ts-expect-error (non strict)
-    (acc, [feature, shortcut]) => fixedShortcuts.includes(feature) ? acc : { ...acc, [feature]: { shortcut, error: !1 } },
-    {}
-  );
+  let state = {};
+  for (let key of Object.keys(shortcutKeys).filter((k2) => !fixedShortcuts.includes(k2)))
+    state[key] = {
+      shortcut: shortcutKeys[key],
+      error: !1,
+      hardcoded: hardcodedShortcuts.includes(key)
+    };
+  return state;
 }
 var ShortcutsScreen = class extends Component {
   constructor(props) {
@@ -19294,20 +20017,37 @@ var ShortcutsScreen = class extends Component {
       let { shortcutKeys, addonsShortcutLabels } = this.state;
       return Object.entries(shortcutKeys).filter(
         ([feature]) => shortcutLabels[feature] !== void 0 || addonsShortcutLabels && addonsShortcutLabels[feature]
-      ).map(([feature, { shortcut }]) => react_default.createElement(Row, { key: feature }, react_default.createElement(Description, null, shortcutLabels[feature] || addonsShortcutLabels[feature]), react_default.createElement(
-        TextInput,
-        {
-          spellCheck: "false",
-          valid: this.displayError(feature),
-          className: "modalInput",
-          onBlur: this.onBlur,
-          onFocus: this.onFocus(feature),
-          onKeyDown: this.onKeyDown,
-          value: shortcut ? shortcutToHumanString(shortcut) : "",
-          placeholder: "Type keys",
-          readOnly: !0
-        }
-      ), react_default.createElement(SuccessIcon, { valid: this.displaySuccessMessage(feature) })));
+      ).map(
+        ([feature, { shortcut, hardcoded }]) => react_default.createElement(Row, { key: feature }, react_default.createElement(Description, null, shortcutLabels[feature] || addonsShortcutLabels[feature]), hardcoded ? react_default.createElement(react_default.Fragment, null, react_default.createElement(
+          TooltipProvider,
+          {
+            tooltip: react_default.createElement(Tooltip, { hasChrome: !0 }, "This shortcut cannot be changed."),
+            placement: "right"
+          },
+          react_default.createElement(
+            TextInput,
+            {
+              "aria-disabled": !0,
+              readOnly: !0,
+              valid: void 0,
+              value: shortcut ? shortcutToHumanString(shortcut) : ""
+            }
+          )
+        )) : react_default.createElement(
+          TextInput,
+          {
+            spellCheck: "false",
+            valid: this.displayError(feature),
+            className: "modalInput",
+            onBlur: this.onBlur,
+            onFocus: this.onFocus(feature),
+            onKeyDown: this.onKeyDown,
+            value: shortcut ? shortcutToHumanString(shortcut) : "",
+            placeholder: "Type keys",
+            readOnly: !0
+          }
+        ), react_default.createElement(SuccessIcon, { valid: this.displaySuccessMessage(feature) }))
+      );
     };
     this.renderKeyForm = () => react_default.createElement(GridWrapper, null, react_default.createElement(GridHeaderRow, null, react_default.createElement(HeaderItem, null, "Commands"), react_default.createElement(HeaderItem, null, "Shortcut")), this.renderKeyInput());
     this.state = {
@@ -19318,7 +20058,6 @@ var ShortcutsScreen = class extends Component {
       // The initial shortcutKeys that come from props are the defaults/what was saved
       // As the user interacts with the page, the state stores the temporary, unsaved shortcuts
       // This object also includes the error attached to each shortcut
-      // @ts-expect-error (non strict)
       shortcutKeys: toShortcutState(props.shortcutKeys),
       addonsShortcutLabels: props.addonsShortcutLabels
     };
@@ -19359,7 +20098,11 @@ var ShortcutsPage = () => react_default.createElement(Consumer, null, ({
   }
 ));
 
+// src/manager/settings/whats_new_page.tsx
+init_react();
+
 // src/manager/settings/whats_new.tsx
+init_react();
 var Centered = styled.div({
   top: "50%",
   position: "absolute",