@storybook/react-native-ui 8.5.5-alpha.2 → 8.5.5-alpha.4

package/dist/index.js

@@ -3018,8 +3018,9 @@ function CollapseSVG(props) {
 }
 
 // src/TreeNode.tsx
-var import_react = __toESM(require("react"));
+var import_react = require("react");
 var import_polished = require("polished");
+var import_react2 = __toESM(require("react"));
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var BranchNodeText = import_react_native_theming2.styled.Text(({ theme }) => ({
   textAlign: "left",
@@ -3081,7 +3082,7 @@ var Wrapper = import_react_native_theming2.styled.View({
   gap: 6,
   marginTop: 2
 });
-var GroupNode = import_react.default.memo(function GroupNode2({
+var GroupNode = import_react2.default.memo(function GroupNode2({
   children,
   isExpanded = false,
   isExpandable = false,
@@ -3099,7 +3100,7 @@ var GroupNode = import_react.default.memo(function GroupNode2({
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(BranchNodeText, { children })
   ] });
 });
-var ComponentNode = import_react.default.memo(
+var ComponentNode = import_react2.default.memo(
   function ComponentNode2({ children, isExpanded, isExpandable, ...props }) {
     const theme = (0, import_react_native_theming2.useTheme)();
     const color = (0, import_react.useMemo)(() => {
@@ -3114,29 +3115,29 @@ var ComponentNode = import_react.default.memo(
     ] });
   }
 );
-var StoryNode = import_react.default.memo(function StoryNode2({
-  children,
-  ...props
-}) {
-  const theme = (0, import_react_native_theming2.useTheme)();
-  const color = (0, import_react.useMemo)(() => {
-    return props.selected ? theme.color.lightest : theme.color.seafoam;
-  }, [props.selected, theme.color.lightest, theme.color.seafoam]);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(LeafNode, { ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Wrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StoryIcon, { width: 14, height: 14, color }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(LeafNodeText, { selected: props.selected, children })
-  ] });
-});
+var StoryNode = import_react2.default.memo(
+  (0, import_react.forwardRef)(function StoryNode2({ children, ...props }, ref) {
+    const theme = (0, import_react_native_theming2.useTheme)();
+    const color = (0, import_react.useMemo)(() => {
+      return props.selected ? theme.color.lightest : theme.color.seafoam;
+    }, [props.selected, theme.color.lightest, theme.color.seafoam]);
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(LeafNode, { ...props, ref, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Wrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StoryIcon, { width: 14, height: 14, color }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(LeafNodeText, { selected: props.selected, children })
+    ] });
+  })
+);
+StoryNode.displayName = "StoryNode";
 
 // src/Tree.tsx
 var import_react_native_theming7 = require("@storybook/react-native-theming");
-var import_react8 = __toESM(require("react"));
+var import_react10 = __toESM(require("react"));
 
 // src/Button.tsx
 var import_react_native_theming3 = require("@storybook/react-native-theming");
-var import_react2 = require("react");
+var import_react3 = require("react");
 var import_jsx_runtime6 = require("react/jsx-runtime");
-var Button = (0, import_react2.forwardRef)(
+var Button = (0, import_react3.forwardRef)(
   ({
     Icon,
     animation = "none",
@@ -3150,7 +3151,7 @@ var Button = (0, import_react2.forwardRef)(
     text,
     ...props
   }, ref) => {
-    const [isAnimating, setIsAnimating] = (0, import_react2.useState)(false);
+    const [isAnimating, setIsAnimating] = (0, import_react3.useState)(false);
     const handleClick = (event) => {
       if (onPress)
         onPress(event);
@@ -3158,7 +3159,7 @@ var Button = (0, import_react2.forwardRef)(
         return;
       setIsAnimating(true);
     };
-    (0, import_react2.useEffect)(() => {
+    (0, import_react3.useEffect)(() => {
       const timer = setTimeout(() => {
         if (isAnimating)
           setIsAnimating(false);
@@ -3256,7 +3257,7 @@ var ButtonIcon = ({
   variant
 }) => {
   const theme = (0, import_react_native_theming3.useTheme)();
-  const color = (0, import_react2.useMemo)(() => {
+  const color = (0, import_react3.useMemo)(() => {
     if (variant === "solid")
       return theme.color.lightest;
     if (variant === "outline")
@@ -3278,9 +3279,9 @@ var ButtonIcon = ({
 };
 
 // src/IconButton.tsx
-var import_react3 = require("react");
+var import_react4 = require("react");
 var import_jsx_runtime7 = require("react/jsx-runtime");
-var IconButton = (0, import_react3.forwardRef)(
+var IconButton = (0, import_react4.forwardRef)(
   ({ padding = "small", variant = "ghost", ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Button, { padding, variant, ref, ...props });
   }
@@ -3290,7 +3291,7 @@ IconButton.displayName = "IconButton";
 // src/icon/CollapseAllIcon.tsx
 var import_react_native_svg5 = require("react-native-svg");
 var import_react_native_theming4 = require("@storybook/react-native-theming");
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var CollapseAllIcon = ({
   color,
@@ -3300,7 +3301,7 @@ var CollapseAllIcon = ({
   ...props
 }) => {
   const theme = (0, import_react_native_theming4.useTheme)();
-  const fillColor = (0, import_react4.useMemo)(() => {
+  const fillColor = (0, import_react5.useMemo)(() => {
     return color ?? theme.color.defaultText;
   }, [color, theme.color.defaultText]);
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native_svg5.Svg, { width, height, viewBox: "0 0 14 14", fill: "none", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
@@ -3315,7 +3316,7 @@ var CollapseAllIcon = ({
 // src/icon/ExpandAllIcon.tsx
 var import_react_native_svg6 = require("react-native-svg");
 var import_react_native_theming5 = require("@storybook/react-native-theming");
-var import_react5 = require("react");
+var import_react6 = require("react");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var ExpandAllIcon = ({
   color,
@@ -3325,7 +3326,7 @@ var ExpandAllIcon = ({
   ...props
 }) => {
   const theme = (0, import_react_native_theming5.useTheme)();
-  const fillColor = (0, import_react5.useMemo)(() => {
+  const fillColor = (0, import_react6.useMemo)(() => {
     return color ?? theme.color.defaultText;
   }, [color, theme.color.defaultText]);
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_svg6.Svg, { width, height, viewBox: "0 0 14 14", fill: "none", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
@@ -3338,7 +3339,7 @@ var ExpandAllIcon = ({
 };
 
 // src/hooks/useExpanded.ts
-var import_react6 = require("react");
+var import_react7 = require("react");
 
 // src/util/tree.ts
 var import_memoizerific = __toESM(require("memoizerific"));
@@ -3419,22 +3420,22 @@ var useExpanded = ({
   rootIds,
   selectedStoryId
 }) => {
-  const [expanded, setExpanded] = (0, import_react6.useReducer)(
+  const [expanded, setExpanded] = (0, import_react7.useReducer)(
     (state, { ids, value }) => ids.reduce((acc, id) => Object.assign(acc, { [id]: value }), { ...state }),
     { refId, data, rootIds, initialExpanded },
     initializeExpanded
   );
-  const updateExpanded = (0, import_react6.useCallback)(({ ids, value }) => {
+  const updateExpanded = (0, import_react7.useCallback)(({ ids, value }) => {
     setExpanded({ ids, value });
   }, []);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     setExpanded({ ids: getAncestorIds(data, selectedStoryId), value: true });
   }, [data, selectedStoryId]);
   return [expanded, updateExpanded];
 };
 
 // src/util/status.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_react_native_theming6 = require("@storybook/react-native-theming");
 var import_react_native_svg7 = __toESM(require("react-native-svg"));
 var import_jsx_runtime10 = require("react/jsx-runtime");
@@ -3446,7 +3447,7 @@ function SmallIcons(props) {
 }
 function LoadingIcons(props) {
   const theme = (0, import_react_native_theming6.useTheme)();
-  const color = (0, import_react7.useMemo)(() => {
+  const color = (0, import_react8.useMemo)(() => {
     return theme.base === "light" ? theme.color.mediumdark : theme.color.darker;
   }, [theme.base, theme.color.darker, theme.color.mediumdark]);
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SmallIcons, { color, ...props });
@@ -3480,12 +3481,56 @@ function getGroupStatus(collapsedData, status) {
   }, {});
 }
 
-// src/Tree.tsx
+// src/SelectedNodeProvider.tsx
+var import_react9 = require("react");
 var import_jsx_runtime11 = require("react/jsx-runtime");
+var SelectedNodeContext = (0, import_react9.createContext)({
+  nodeRef: { current: null },
+  setNodeRef: () => {
+  },
+  scrollToSelectedNode: () => {
+  },
+  scrollRef: null
+});
+var SelectedNodeProvider = ({ children }) => {
+  const nodeRef = (0, import_react9.useRef)(null);
+  const setNodeRef = (0, import_react9.useCallback)((node) => {
+    nodeRef.current = node;
+  }, []);
+  const scrollRef = (0, import_react9.useRef)(null);
+  const scrollToSelectedNode = (0, import_react9.useCallback)(() => {
+    setTimeout(() => {
+      if (nodeRef?.current && scrollRef?.current) {
+        try {
+          nodeRef.current.measureLayout?.(scrollRef.current, (_x, y) => {
+            scrollRef.current?.scrollTo({ y: y - 100, animated: true });
+          });
+        } catch (error) {
+        }
+      }
+    }, 500);
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    SelectedNodeContext.Provider,
+    {
+      value: {
+        nodeRef,
+        setNodeRef,
+        scrollToSelectedNode,
+        scrollRef
+      },
+      children
+    }
+  );
+};
+var useSelectedNode = () => (0, import_react9.useContext)(SelectedNodeContext);
+
+// src/Tree.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var TextItem = import_react_native_theming7.styled.Text(({ theme }) => ({
   color: theme.color.defaultText
 }));
-var Node = import_react8.default.memo(function Node2({
+var Node = import_react10.default.memo(function Node2({
   item,
   refId,
   isOrphan,
@@ -3498,15 +3543,24 @@ var Node = import_react8.default.memo(function Node2({
   setExpanded,
   onSelectStoryId
 }) {
+  const { setNodeRef } = useSelectedNode();
+  const setRef = (0, import_react10.useCallback)(
+    (node) => {
+      if (isSelected && node) {
+        setNodeRef(node);
+      }
+    },
+    [isSelected, setNodeRef]
+  );
   if (!isDisplayed) {
     return null;
   }
   const id = createId(item.id, refId);
   if (item.type === "story") {
-    const LeafNode2 = StoryNode;
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(LeafNodeStyleWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-      LeafNode2,
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(LeafNodeStyleWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      StoryNode,
       {
+        ref: setRef,
         selected: isSelected,
         id,
         depth: isOrphan ? item.depth : item.depth - 1,
@@ -3519,8 +3573,8 @@ var Node = import_react8.default.memo(function Node2({
     ) });
   }
   if (item.type === "root") {
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(RootNode, { id, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(RootNode, { id, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
         CollapseButton,
         {
           "data-action": "collapse-root",
@@ -3530,12 +3584,12 @@ var Node = import_react8.default.memo(function Node2({
           },
           "aria-expanded": isExpanded,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CollapseIcon, { isExpanded }),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TextItem, { children: item.renderLabel?.(item, {}) || item.name })
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CollapseIcon, { isExpanded }),
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TextItem, { children: item.renderLabel?.(item, {}) || item.name })
           ]
         }
       ),
-      isExpanded && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      isExpanded && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         IconButton,
         {
           "aria-label": isFullyExpanded ? "Expand" : "Collapse",
@@ -3545,14 +3599,14 @@ var Node = import_react8.default.memo(function Node2({
             event.preventDefault();
             setFullyExpanded();
           },
-          children: isFullyExpanded ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CollapseAllIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ExpandAllIcon, {})
+          children: isFullyExpanded ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CollapseAllIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ExpandAllIcon, {})
         }
       )
     ] }, id);
   }
   if (item.type === "component" || item.type === "group") {
     const BranchNode2 = item.type === "component" ? ComponentNode : GroupNode;
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       BranchNode2,
       {
         id,
@@ -3613,9 +3667,9 @@ var CollapseButton = import_react_native_theming7.styled.TouchableOpacity(({}) =
   cursor: "pointer",
   height: 28
 }));
-var Tree = import_react8.default.memo(function Tree2({ isMain, refId, data, status, docsMode, selectedStoryId, onSelectStoryId }) {
-  const containerRef = (0, import_react8.useRef)(null);
-  const [rootIds, orphanIds, initialExpanded] = (0, import_react8.useMemo)(
+var Tree = import_react10.default.memo(function Tree2({ isMain, refId, data, status, docsMode, selectedStoryId, onSelectStoryId }) {
+  const containerRef = (0, import_react10.useRef)(null);
+  const [rootIds, orphanIds, initialExpanded] = (0, import_react10.useMemo)(
     () => Object.keys(data).reduce(
       (acc, id) => {
         const item = data[id];
@@ -3631,7 +3685,7 @@ var Tree = import_react8.default.memo(function Tree2({ isMain, refId, data, stat
     ),
     [data]
   );
-  const { expandableDescendants } = (0, import_react8.useMemo)(() => {
+  const { expandableDescendants } = (0, import_react10.useMemo)(() => {
     return [...orphanIds, ...rootIds].reduce(
       (acc, nodeId) => {
         acc.expandableDescendants[nodeId] = getDescendantIds(data, nodeId, false).filter(
@@ -3642,7 +3696,7 @@ var Tree = import_react8.default.memo(function Tree2({ isMain, refId, data, stat
       { orphansFirst: [], expandableDescendants: {} }
     );
   }, [data, rootIds, orphanIds]);
-  const singleStoryComponentIds = (0, import_react8.useMemo)(() => {
+  const singleStoryComponentIds = (0, import_react10.useMemo)(() => {
     return Object.keys(data).filter((id) => {
       const entry = data[id];
       if (entry.type !== "component")
@@ -3658,12 +3712,12 @@ var Tree = import_react8.default.memo(function Tree2({ isMain, refId, data, stat
       return false;
     });
   }, [data]);
-  const collapsedItems = (0, import_react8.useMemo)(
+  const collapsedItems = (0, import_react10.useMemo)(
     () => Object.keys(data).filter((id) => !singleStoryComponentIds.includes(id)),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [singleStoryComponentIds]
   );
-  const collapsedData = (0, import_react8.useMemo)(() => {
+  const collapsedData = (0, import_react10.useMemo)(() => {
     return singleStoryComponentIds.reduce(
       (acc, id) => {
         const { children, parent, name } = data[id];
@@ -3684,7 +3738,7 @@ var Tree = import_react8.default.memo(function Tree2({ isMain, refId, data, stat
       { ...data }
     );
   }, [data]);
-  const ancestry = (0, import_react8.useMemo)(() => {
+  const ancestry = (0, import_react10.useMemo)(() => {
     return collapsedItems.reduce(
       (acc, id) => Object.assign(acc, { [id]: getAncestorIds(collapsedData, id) }),
       {}
@@ -3698,15 +3752,15 @@ var Tree = import_react8.default.memo(function Tree2({ isMain, refId, data, stat
     selectedStoryId,
     onSelectStoryId
   });
-  const groupStatus = (0, import_react8.useMemo)(() => getGroupStatus(collapsedData, status), [collapsedData, status]);
-  const treeItems = (0, import_react8.useMemo)(() => {
+  const groupStatus = (0, import_react10.useMemo)(() => getGroupStatus(collapsedData, status), [collapsedData, status]);
+  const treeItems = (0, import_react10.useMemo)(() => {
     return collapsedItems.map((itemId) => {
       const item = collapsedData[itemId];
       const id = createId(itemId, refId);
       if (item.type === "root") {
         const descendants = expandableDescendants[item.id];
         const isFullyExpanded = descendants.every((d) => expanded[d]);
-        return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           Root,
           {
             item,
@@ -3728,7 +3782,7 @@ var Tree = import_react8.default.memo(function Tree2({ isMain, refId, data, stat
       }
       const isDisplayed = !item.parent || ancestry[itemId].every((a) => expanded[a]);
       const color = groupStatus[itemId] ? statusMapping[groupStatus[itemId]][1] : null;
-      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         Node,
         {
           item,
@@ -3761,23 +3815,23 @@ var Tree = import_react8.default.memo(function Tree2({ isMain, refId, data, stat
     setExpanded,
     status
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Container, { ref: containerRef, hasOrphans: isMain && orphanIds.length > 0, children: treeItems });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Container, { ref: containerRef, hasOrphans: isMain && orphanIds.length > 0, children: treeItems });
 });
 var Container = import_react_native_theming7.styled.View((props) => ({
   marginTop: props.hasOrphans ? 20 : 0,
   marginBottom: 20
 }));
-var Root = import_react8.default.memo(function Root2({
+var Root = import_react10.default.memo(function Root2({
   setExpanded,
   isFullyExpanded,
   expandableDescendants,
   ...props
 }) {
-  const setFullyExpanded = (0, import_react8.useCallback)(
+  const setFullyExpanded = (0, import_react10.useCallback)(
     () => setExpanded({ ids: expandableDescendants, value: !isFullyExpanded }),
     [setExpanded, isFullyExpanded, expandableDescendants]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     Node,
     {
       ...props,
@@ -3789,10 +3843,10 @@ var Root = import_react8.default.memo(function Root2({
 });
 
 // src/LayoutProvider.tsx
-var import_react9 = require("react");
+var import_react11 = require("react");
 var import_react_native = require("react-native");
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var LayoutContext = (0, import_react9.createContext)({
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var LayoutContext = (0, import_react11.createContext)({
   isDesktop: false,
   isMobile: true
 });
@@ -3800,28 +3854,28 @@ var LayoutProvider = ({ children }) => {
   const { width } = (0, import_react_native.useWindowDimensions)();
   const isDesktop = width >= BREAKPOINT;
   const isMobile = !isDesktop;
-  const contextValue = (0, import_react9.useMemo)(
+  const contextValue = (0, import_react11.useMemo)(
     () => ({
       isDesktop,
       isMobile
     }),
     [isDesktop, isMobile]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(LayoutContext.Provider, { value: contextValue, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(LayoutContext.Provider, { value: contextValue, children });
 };
-var useLayout = () => (0, import_react9.useContext)(LayoutContext);
+var useLayout = () => (0, import_react11.useContext)(LayoutContext);
 
 // src/Explorer.tsx
-var import_react11 = __toESM(require("react"));
+var import_react13 = __toESM(require("react"));
 
 // src/Refs.tsx
-var import_react10 = __toESM(require("react"));
+var import_react12 = __toESM(require("react"));
 var import_react_native_theming8 = require("@storybook/react-native-theming");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var Wrapper2 = import_react_native_theming8.styled.View(({}) => ({
   position: "relative"
 }));
-var Ref = import_react10.default.memo(function Ref2(props) {
+var Ref = import_react12.default.memo(function Ref2(props) {
   const {
     index,
     id: refId,
@@ -3836,26 +3890,26 @@ var Ref = import_react10.default.memo(function Ref2(props) {
     previewInitialized,
     setSelection
   } = props;
-  const length = (0, import_react10.useMemo)(() => index ? Object.keys(index).length : 0, [index]);
+  const length = (0, import_react12.useMemo)(() => index ? Object.keys(index).length : 0, [index]);
   const isLoadingInjected = type === "auto-inject" && !previewInitialized || type === "server-checked";
   const isLoading = isLoadingMain || isLoadingInjected || type === "unknown";
   const isError = !!indexError;
   const isEmpty = !isLoading && length === 0;
   const isAuthRequired = !!loginUrl && length === 0;
   const state = getStateType(isLoading, isAuthRequired, isError, isEmpty);
-  const [isExpanded, setExpanded] = (0, import_react10.useState)(expanded);
-  (0, import_react10.useEffect)(() => {
+  const [isExpanded, setExpanded] = (0, import_react12.useState)(expanded);
+  (0, import_react12.useEffect)(() => {
     if (index && selectedStoryId && index[selectedStoryId]) {
       setExpanded(true);
     }
   }, [setExpanded, index, selectedStoryId]);
-  const onSelectStoryId = (0, import_react10.useCallback)(
+  const onSelectStoryId = (0, import_react12.useCallback)(
     (storyId) => {
       setSelection({ refId, storyId });
     },
     [refId, setSelection]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, { children: isExpanded && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Wrapper2, { "data-title": title, isMain: true, children: state === "ready" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_jsx_runtime14.Fragment, { children: isExpanded && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Wrapper2, { "data-title": title, isMain: true, children: state === "ready" && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     Tree,
     {
       status: props.status,
@@ -3872,17 +3926,17 @@ var Ref = import_react10.default.memo(function Ref2(props) {
 
 // src/Explorer.tsx
 var import_react_native2 = require("react-native");
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var import_react12 = require("react");
-var Explorer = import_react11.default.memo(function Explorer2({
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_react14 = require("react");
+var Explorer = import_react13.default.memo(function Explorer2({
   isLoading,
   isBrowsing,
   dataset,
   selected,
   setSelection
 }) {
-  const containerRef = (0, import_react11.useRef)(null);
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native2.View, { ref: containerRef, id: "storybook-explorer-tree", children: dataset.entries.map(([refId, ref]) => /* @__PURE__ */ (0, import_react12.createElement)(
+  const containerRef = (0, import_react13.useRef)(null);
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native2.View, { ref: containerRef, id: "storybook-explorer-tree", children: dataset.entries.map(([refId, ref]) => /* @__PURE__ */ (0, import_react14.createElement)(
     Ref,
     {
       ...ref,
@@ -3896,34 +3950,34 @@ var Explorer = import_react11.default.memo(function Explorer2({
 });
 
 // src/Sidebar.tsx
-var import_react17 = __toESM(require("react"));
+var import_react19 = __toESM(require("react"));
 var import_react_native_theming11 = require("@storybook/react-native-theming");
 
 // src/Search.tsx
 var import_bottom_sheet = require("@gorhom/bottom-sheet");
 var import_react_native_theming9 = require("@storybook/react-native-theming");
 var import_fuse = __toESM(require("fuse.js"));
-var import_react13 = __toESM(require("react"));
+var import_react15 = __toESM(require("react"));
 var import_react_native3 = require("react-native");
 
 // src/icon/CloseIcon.tsx
 var import_react_native_svg8 = require("react-native-svg");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var CloseIcon = ({
   color = "currentColor",
   width = 14,
   height = 14,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react_native_svg8.Svg, { width, height, viewBox: "0 0 14 14", fill: "none", ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_react_native_svg8.Svg, { width, height, viewBox: "0 0 14 14", fill: "none", ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       import_react_native_svg8.Path,
       {
         d: "M9.854 4.146a.5.5 0 010 .708L7.707 7l2.147 2.146a.5.5 0 01-.708.708L7 7.707 4.854 9.854a.5.5 0 01-.708-.708L6.293 7 4.146 4.854a.5.5 0 11.708-.708L7 6.293l2.146-2.147a.5.5 0 01.708 0z",
         fill: color
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       import_react_native_svg8.Path,
       {
         fillRule: "evenodd",
@@ -3937,14 +3991,14 @@ var CloseIcon = ({
 
 // src/icon/SearchIcon.tsx
 var import_react_native_svg9 = require("react-native-svg");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var SearchIcon = ({
   color = "currentColor",
   width = 14,
   height = 14,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native_svg9.Svg, { width, height, viewBox: "0 0 14 14", fill: "none", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native_svg9.Svg, { width, height, viewBox: "0 0 14 14", fill: "none", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     import_react_native_svg9.Path,
     {
       fillRule: "evenodd",
@@ -3961,7 +4015,7 @@ function isExpandType(x2) {
 }
 
 // src/Search.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var DEFAULT_MAX_SEARCH_RESULTS = 50;
 var options = {
   shouldSort: true,
@@ -4035,22 +4089,24 @@ var ClearIcon = import_react_native_theming9.styled.TouchableOpacity(({ theme })
   justifyContent: "center",
   height: "100%"
 }));
-var Search = import_react13.default.memo(function Search2({ children, dataset, setSelection, getLastViewed, initialQuery = "" }) {
-  const inputRef = (0, import_react13.useRef)(null);
-  const [inputValue, setInputValue] = (0, import_react13.useState)(initialQuery);
-  const [isOpen, setIsOpen] = (0, import_react13.useState)(false);
-  const [allComponents, showAllComponents] = (0, import_react13.useState)(false);
+var Search = import_react15.default.memo(function Search2({ children, dataset, setSelection, getLastViewed, initialQuery = "" }) {
+  const inputRef = (0, import_react15.useRef)(null);
+  const [inputValue, setInputValue] = (0, import_react15.useState)(initialQuery);
+  const [isOpen, setIsOpen] = (0, import_react15.useState)(false);
+  const [allComponents, showAllComponents] = (0, import_react15.useState)(false);
   const { isMobile } = useLayout();
-  const selectStory = (0, import_react13.useCallback)(
+  const { scrollToSelectedNode } = useSelectedNode();
+  const selectStory = (0, import_react15.useCallback)(
     (id, refId) => {
       setSelection({ storyId: id, refId });
       inputRef.current?.blur();
       setIsOpen(false);
       showAllComponents(false);
+      scrollToSelectedNode();
     },
-    [setSelection]
+    [scrollToSelectedNode, setSelection]
   );
-  const getItemProps = (0, import_react13.useCallback)(
+  const getItemProps = (0, import_react15.useCallback)(
     ({ item: result }) => {
       return {
         icon: result?.item?.type === "component" ? "component" : "story",
@@ -4073,7 +4129,7 @@ var Search = import_react13.default.memo(function Search2({ children, dataset, s
     },
     [selectStory]
   );
-  const makeFuse = (0, import_react13.useCallback)(() => {
+  const makeFuse = (0, import_react15.useCallback)(() => {
     const list = dataset.entries.reduce((acc, [refId, { index, status }]) => {
       const groupStatus = getGroupStatus(index || {}, status);
       if (index) {
@@ -4091,7 +4147,7 @@ var Search = import_react13.default.memo(function Search2({ children, dataset, s
     }, []);
     return new import_fuse.default(list, options);
   }, [dataset]);
-  const getResults = (0, import_react13.useCallback)(
+  const getResults = (0, import_react15.useCallback)(
     (input2) => {
       const fuse = makeFuse();
       if (!input2)
@@ -4133,13 +4189,13 @@ var Search = import_react13.default.memo(function Search2({ children, dataset, s
     },
     [allComponents, dataset.hash, getLastViewed, makeFuse]
   );
-  const deferredQuery = (0, import_react13.useDeferredValue)(inputValue);
+  const deferredQuery = (0, import_react15.useDeferredValue)(inputValue);
   const input = deferredQuery ? deferredQuery.trim() : "";
   const results = input ? getResults(input) : [];
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react_native3.View, { style: { flex: 1 }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(SearchField, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SearchIconWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SearchIcon, {}) }),
-      isMobile ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react_native3.View, { style: { flex: 1 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(SearchField, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SearchIconWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SearchIcon, {}) }),
+      isMobile ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         BottomSheetInput,
         {
           ref: inputRef,
@@ -4147,15 +4203,15 @@ var Search = import_react13.default.memo(function Search2({ children, dataset, s
           onFocus: () => setIsOpen(true),
           onBlur: () => setIsOpen(false)
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Input, { ref: inputRef, onChangeText: setInputValue, onFocus: () => setIsOpen(true) }),
-      isOpen && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      ) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Input, { ref: inputRef, onChangeText: setInputValue, onFocus: () => setIsOpen(true) }),
+      isOpen && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         ClearIcon,
         {
           onPress: () => {
             setInputValue("");
             inputRef.current.clear();
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CloseIcon, {})
+          children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(CloseIcon, {})
         }
       )
     ] }),
@@ -4173,11 +4229,11 @@ var Search = import_react13.default.memo(function Search2({ children, dataset, s
 
 // src/SearchResults.tsx
 var import_react_native_theming10 = require("@storybook/react-native-theming");
-var import_react14 = __toESM(require("react"));
+var import_react16 = __toESM(require("react"));
 var import_polished2 = require("polished");
 var import_react_native4 = require("react-native");
-var import_jsx_runtime18 = require("react/jsx-runtime");
-var import_react15 = require("react");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_react17 = require("react");
 var ResultsList = import_react_native_theming10.styled.View({
   margin: 0,
   padding: 0,
@@ -4243,23 +4299,23 @@ var RecentlyOpenedTitle = import_react_native_theming10.styled.View(({ theme })
   marginBottom: 4,
   alignItems: "center"
 }));
-var Highlight = import_react14.default.memo(
+var Highlight = import_react16.default.memo(
   function Highlight2({ children, match }) {
     if (!match)
       return children;
     const { value, indices } = match;
     const { nodes: result } = indices.reduce(
       ({ cursor, nodes }, [start, end], index, { length }) => {
-        nodes.push(/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text, { children: value.slice(cursor, start) }, `text-${index}`));
-        nodes.push(/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Mark, { children: value.slice(start, end + 1) }, `mark-${index}`));
+        nodes.push(/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Text, { children: value.slice(cursor, start) }, `text-${index}`));
+        nodes.push(/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Mark, { children: value.slice(start, end + 1) }, `mark-${index}`));
         if (index === length - 1) {
-          nodes.push(/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text, { children: value.slice(end + 1) }, `last-${index}`));
+          nodes.push(/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Text, { children: value.slice(end + 1) }, `last-${index}`));
         }
         return { cursor: end + 1, nodes };
       },
       { cursor: 0, nodes: [] }
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text, { children: result }, `end-${match.key}`);
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Text, { children: result }, `end-${match.key}`);
   }
 );
 var Title = import_react_native_theming10.styled.Text(({ theme }) => ({
@@ -4278,14 +4334,14 @@ var PathText = import_react_native_theming10.styled.Text(({ theme }) => ({
   fontSize: theme.typography.size.s1 - 1,
   color: theme.textMutedColor
 }));
-var Result = import_react14.default.memo(function Result2({
+var Result = import_react16.default.memo(function Result2({
   item,
   matches,
   icon: _icon,
   onPress,
   ...props
 }) {
-  const press = (0, import_react14.useCallback)(
+  const press = (0, import_react16.useCallback)(
     (event) => {
       event.preventDefault();
       onPress?.(event);
@@ -4295,16 +4351,16 @@ var Result = import_react14.default.memo(function Result2({
   const nameMatch = matches.find((match) => match.key === "name");
   const pathMatches = matches.filter((match) => match.key === "path");
   const [i] = item.status ? statusMapping[item.status] : [];
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(ResultRow, { ...props, onPress: press, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(IconWrapper, { children: [
-      item.type === "component" && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ComponentIcon, { width: "14", height: "14" }),
-      item.type === "story" && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(StoryIcon, { width: "14", height: "14" })
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(ResultRow, { ...props, onPress: press, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(IconWrapper, { children: [
+      item.type === "component" && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ComponentIcon, { width: "14", height: "14" }),
+      item.type === "story" && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(StoryIcon, { width: "14", height: "14" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(ResultRowContent, { testID: "search-result-item--label", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Title, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Highlight, { match: nameMatch, children: item.name }, "search-result-item--label-highlight") }),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Path10, { children: item.path.map((group, index) => {
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(ResultRowContent, { testID: "search-result-item--label", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Title, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Highlight, { match: nameMatch, children: item.name }, "search-result-item--label-highlight") }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Path10, { children: item.path.map((group, index) => {
         const pathSeparator = index === item.path.length - 1 ? "" : "/";
-        return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native4.View, { style: { flexShrink: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(PathText, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_native4.View, { style: { flexShrink: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(PathText, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           Highlight,
           {
             match: pathMatches.find((match) => match.refIndex === index),
@@ -4319,7 +4375,7 @@ var Result = import_react14.default.memo(function Result2({
 var Text = import_react_native_theming10.styled.Text(({ theme }) => ({
   color: theme.color.defaultText
 }));
-var SearchResults = import_react14.default.memo(function SearchResults2({
+var SearchResults = import_react16.default.memo(function SearchResults2({
   query,
   results,
   closeMenu,
@@ -4331,18 +4387,18 @@ var SearchResults = import_react14.default.memo(function SearchResults2({
     clearLastViewed();
     closeMenu();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(ResultsList, { children: [
-    results.length > 0 && !query ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(RecentlyOpenedTitle, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text, { children: "Recently opened" }),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(IconButton, { onPress: handleClearLastViewed })
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(ResultsList, { children: [
+    results.length > 0 && !query ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(RecentlyOpenedTitle, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Text, { children: "Recently opened" }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(IconButton, { onPress: handleClearLastViewed })
     ] }) : null,
-    results.length === 0 && query ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native4.View, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(NoResults, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text, { style: { marginBottom: 8 }, children: "No components found" }),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text, { children: "Find components by name or path." })
+    results.length === 0 && query ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_native4.View, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(NoResults, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Text, { style: { marginBottom: 8 }, children: "No components found" }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Text, { children: "Find components by name or path." })
     ] }) }) : null,
     results.map((result, index) => {
       if (isExpandType(result)) {
-        return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(MoreWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(MoreWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           Button,
           {
             ...result,
@@ -4354,7 +4410,7 @@ var SearchResults = import_react14.default.memo(function SearchResults2({
       }
       const { item } = result;
       const key = `${item.refId}::${item.id}`;
-      return /* @__PURE__ */ (0, import_react15.createElement)(
+      return /* @__PURE__ */ (0, import_react17.createElement)(
         Result,
         {
           ...result,
@@ -4369,11 +4425,11 @@ var SearchResults = import_react14.default.memo(function SearchResults2({
 
 // src/hooks/useLastViewed.ts
 var import_debounce = __toESM(require_debounce());
-var import_react16 = require("react");
+var import_react18 = require("react");
 var import_store2 = __toESM(require("store2"));
 var save = (0, import_debounce.default)((value) => import_store2.default.set("lastViewedStoryIds", value), 1e3);
 var useLastViewed = (selection) => {
-  const initialLastViewedStoryIds = (0, import_react16.useMemo)(() => {
+  const initialLastViewedStoryIds = (0, import_react18.useMemo)(() => {
     const items = import_store2.default.get("lastViewedStoryIds");
     if (!items || !Array.isArray(items))
       return [];
@@ -4381,8 +4437,8 @@ var useLastViewed = (selection) => {
       return [];
     return items;
   }, []);
-  const lastViewedRef = (0, import_react16.useRef)(initialLastViewedStoryIds);
-  const updateLastViewed = (0, import_react16.useCallback)(
+  const lastViewedRef = (0, import_react18.useRef)(initialLastViewedStoryIds);
+  const updateLastViewed = (0, import_react18.useCallback)(
     (story) => {
       const items = lastViewedRef.current;
       const index = items.findIndex(
@@ -4399,13 +4455,13 @@ var useLastViewed = (selection) => {
     },
     [lastViewedRef]
   );
-  (0, import_react16.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     if (selection)
       updateLastViewed(selection);
   }, [selection]);
   return {
-    getLastViewed: (0, import_react16.useCallback)(() => lastViewedRef.current, [lastViewedRef]),
-    clearLastViewed: (0, import_react16.useCallback)(() => {
+    getLastViewed: (0, import_react18.useCallback)(() => lastViewedRef.current, [lastViewedRef]),
+    clearLastViewed: (0, import_react18.useCallback)(() => {
       lastViewedRef.current = lastViewedRef.current.slice(0, 1);
       save(lastViewedRef.current);
     }, [lastViewedRef])
@@ -4414,7 +4470,7 @@ var useLastViewed = (selection) => {
 
 // src/Sidebar.tsx
 var import_react_native5 = require("react-native");
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var Container2 = import_react_native_theming11.styled.View(({ theme }) => ({
   width: "100%",
   height: "100%",
@@ -4429,18 +4485,18 @@ var Top = import_react_native_theming11.styled.View({
   flex: 1,
   flexDirection: "row"
 });
-var Swap = import_react17.default.memo(function Swap2({
+var Swap = import_react19.default.memo(function Swap2({
   children,
   condition
 }) {
-  const [a, b] = import_react17.default.Children.toArray(children);
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_native5.View, { style: { display: condition ? "flex" : "none" }, children: a }),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_native5.View, { style: { display: condition ? "none" : "flex" }, children: b })
+  const [a, b] = import_react19.default.Children.toArray(children);
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native5.View, { style: { display: condition ? "flex" : "none" }, children: a }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native5.View, { style: { display: condition ? "none" : "flex" }, children: b })
   ] });
 });
 var useCombination = (index, indexError, previewInitialized, status, refs) => {
-  const hash = (0, import_react17.useMemo)(
+  const hash = (0, import_react19.useMemo)(
     () => ({
       [DEFAULT_REF_ID]: {
         index,
@@ -4455,9 +4511,9 @@ var useCombination = (index, indexError, previewInitialized, status, refs) => {
     }),
     [refs, index, indexError, previewInitialized, status]
   );
-  return (0, import_react17.useMemo)(() => ({ hash, entries: Object.entries(hash) }), [hash]);
+  return (0, import_react19.useMemo)(() => ({ hash, entries: Object.entries(hash) }), [hash]);
 };
-var Sidebar = import_react17.default.memo(function Sidebar2({
+var Sidebar = import_react19.default.memo(function Sidebar2({
   storyId = null,
   refId = DEFAULT_REF_ID,
   index,
@@ -4467,11 +4523,11 @@ var Sidebar = import_react17.default.memo(function Sidebar2({
   refs = {},
   setSelection
 }) {
-  const selected = (0, import_react17.useMemo)(() => storyId && { storyId, refId }, [storyId, refId]);
+  const selected = (0, import_react19.useMemo)(() => storyId && { storyId, refId }, [storyId, refId]);
   const dataset = useCombination(index, indexError, previewInitialized, status, refs);
   const lastViewedProps = useLastViewed(selected);
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Container2, { style: { paddingHorizontal: 10 }, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Top, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Search, { dataset, setSelection, ...lastViewedProps, children: ({ query, results, isBrowsing, closeMenu, getItemProps, highlightedIndex }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Swap, { condition: isBrowsing, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Container2, { style: { paddingHorizontal: 10 }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Top, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Search, { dataset, setSelection, ...lastViewedProps, children: ({ query, results, isBrowsing, closeMenu, getItemProps, highlightedIndex }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Swap, { condition: isBrowsing, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       Explorer,
       {
         dataset,
@@ -4481,7 +4537,7 @@ var Sidebar = import_react17.default.memo(function Sidebar2({
         setSelection
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       SearchResults,
       {
         query,
@@ -4500,7 +4556,7 @@ var Sidebar = import_react17.default.memo(function Sidebar2({
 var import_core_events = require("@storybook/core/core-events");
 var import_manager_api2 = require("@storybook/core/manager-api");
 var import_react_native_theming17 = require("@storybook/react-native-theming");
-var import_react26 = require("react");
+var import_react28 = require("react");
 var import_react_native9 = require("react-native");
 var import_react_native_safe_area_context3 = require("react-native-safe-area-context");
 
@@ -4509,7 +4565,7 @@ var import_bottom_sheet2 = require("@gorhom/bottom-sheet");
 var import_manager_api = require("@storybook/core/manager-api");
 var import_react_native_theming12 = require("@storybook/react-native-theming");
 var import_types3 = require("@storybook/core/types");
-var import_react19 = require("react");
+var import_react21 = require("react");
 var import_react_native6 = require("react-native");
 var import_react_native_gesture_handler = require("react-native-gesture-handler");
 var import_react_native_reanimated = __toESM(require("react-native-reanimated"));
@@ -4517,29 +4573,29 @@ var import_react_native_safe_area_context = require("react-native-safe-area-cont
 var import_react_native_theming13 = require("@storybook/react-native-theming");
 
 // src/util/useStyle.ts
-var import_react18 = require("react");
+var import_react20 = require("react");
 var useStyle = (styleFactory, deps) => (
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  (0, import_react18.useMemo)(styleFactory, deps)
+  (0, import_react20.useMemo)(styleFactory, deps)
 );
 
 // src/MobileAddonsPanel.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var bottomSheetStyle = {
   paddingTop: 8
 };
 var contentStyle = {
   flex: 1
 };
-var MobileAddonsPanel = (0, import_react19.forwardRef)(
+var MobileAddonsPanel = (0, import_react21.forwardRef)(
   ({ storyId }, ref) => {
     const theme = (0, import_react_native_theming13.useTheme)();
     const reducedMotion = (0, import_react_native_reanimated.useReducedMotion)();
-    const addonsPanelBottomSheetRef = (0, import_react19.useRef)(null);
+    const addonsPanelBottomSheetRef = (0, import_react21.useRef)(null);
     const insets = (0, import_react_native_safe_area_context.useSafeAreaInsets)();
     const animatedPosition = (0, import_react_native_reanimated.useSharedValue)(0);
     (0, import_react_native_reanimated.useAnimatedKeyboard)();
-    (0, import_react19.useImperativeHandle)(ref, () => ({
+    (0, import_react21.useImperativeHandle)(ref, () => ({
       setAddonsPanelOpen: (open) => {
         if (open) {
           addonsPanelBottomSheetRef.current?.present();
@@ -4568,7 +4624,7 @@ var MobileAddonsPanel = (0, import_react19.forwardRef)(
         backgroundColor: theme.textMutedColor
       };
     });
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       import_bottom_sheet2.BottomSheetModal,
       {
         ref: addonsPanelBottomSheetRef,
@@ -4584,7 +4640,7 @@ var MobileAddonsPanel = (0, import_react19.forwardRef)(
         enableHandlePanningGesture: true,
         stackBehavior: "replace",
         enableDynamicSizing: false,
-        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native_reanimated.default.View, { style: [contentStyle, adjustedBottomSheetSize], children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_native_reanimated.default.View, { style: [contentStyle, adjustedBottomSheetSize], children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           AddonsTabs,
           {
             onClose: () => {
@@ -4624,25 +4680,25 @@ var centeredStyle = {
 var hitSlop = { top: 10, right: 10, bottom: 10, left: 10 };
 var AddonsTabs = ({ onClose, storyId }) => {
   const panels = import_manager_api.addons.getElements(import_types3.Addon_TypesEnum.PANEL);
-  const [addonSelected, setAddonSelected] = (0, import_react19.useState)(Object.keys(panels)[0]);
+  const [addonSelected, setAddonSelected] = (0, import_react21.useState)(Object.keys(panels)[0]);
   const insets = (0, import_react_native_safe_area_context.useSafeAreaInsets)();
   const scrollContentContainerStyle = useStyle(() => {
     return {
       paddingBottom: insets.bottom + 16
     };
   });
-  const panel = (0, import_react19.useMemo)(() => {
+  const panel = (0, import_react21.useMemo)(() => {
     if (!storyId) {
-      return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native6.View, { style: centeredStyle, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native6.Text, { children: "No Story Selected" }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_native6.View, { style: centeredStyle, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_native6.Text, { children: "No Story Selected" }) });
     }
     if (Object.keys(panels).length === 0) {
-      return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native6.View, { style: centeredStyle, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native6.Text, { children: "No addons loaded." }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_native6.View, { style: centeredStyle, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_native6.Text, { children: "No addons loaded." }) });
     }
     return panels[addonSelected].render({ active: true });
   }, [addonSelected, panels, storyId]);
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react_native6.View, { style: addonsTabsContainerStyle, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react_native6.View, { style: addonsTabsStyle, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_react_native6.View, { style: addonsTabsContainerStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_react_native6.View, { style: addonsTabsStyle, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
         import_react_native_gesture_handler.ScrollView,
         {
           horizontal: true,
@@ -4650,7 +4706,7 @@ var AddonsTabs = ({ onClose, storyId }) => {
           contentContainerStyle: addonsTabsContentContainerStyle,
           children: Object.values(panels).map(({ id, title }) => {
             const resolvedTitle = typeof title === "function" ? title({}) : title;
-            return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
               Tab,
               {
                 active: id === addonSelected,
@@ -4662,7 +4718,7 @@ var AddonsTabs = ({ onClose, storyId }) => {
           })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
         IconButton,
         {
           style: closeIconStyle,
@@ -4672,7 +4728,7 @@ var AddonsTabs = ({ onClose, storyId }) => {
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       import_react_native_gesture_handler.ScrollView,
       {
         style: addonsScrollStyle,
@@ -4683,7 +4739,7 @@ var AddonsTabs = ({ onClose, storyId }) => {
   ] });
 };
 var Tab = ({ active, onPress, text }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TabButton, { active, onPress, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TabText, { active, children: text }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TabButton, { active, onPress, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TabText, { active, children: text }) });
 };
 var TabButton = import_react_native_theming12.styled.TouchableOpacity(({ theme, active }) => ({
   borderBottomWidth: active ? 2 : 0,
@@ -4703,13 +4759,13 @@ var TabText = import_react_native_theming12.styled.Text(({ theme, active }) => (
 
 // src/MobileMenuDrawer.tsx
 var import_bottom_sheet3 = __toESM(require("@gorhom/bottom-sheet"));
-var import_react20 = require("react");
+var import_react_native_theming14 = require("@storybook/react-native-theming");
+var import_react22 = require("react");
 var import_react_native7 = require("react-native");
 var import_react_native_reanimated2 = require("react-native-reanimated");
 var import_react_native_safe_area_context2 = require("react-native-safe-area-context");
-var import_react_native_theming14 = require("@storybook/react-native-theming");
-var import_jsx_runtime21 = require("react/jsx-runtime");
-var BottomSheetBackdropComponent = (backdropComponentProps) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var BottomSheetBackdropComponent = (backdropComponentProps) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
   import_bottom_sheet3.BottomSheetBackdrop,
   {
     ...backdropComponentProps,
@@ -4720,32 +4776,34 @@ var BottomSheetBackdropComponent = (backdropComponentProps) => /* @__PURE__ */ (
   }
 );
 var snapPoints = ["50%", "75%"];
-var MobileMenuDrawer = (0, import_react20.memo)(
-  (0, import_react20.forwardRef)(({ children }, ref) => {
+var MobileMenuDrawer = (0, import_react22.memo)(
+  (0, import_react22.forwardRef)(({ children }, ref) => {
     const reducedMotion = (0, import_react_native_reanimated2.useReducedMotion)();
     const insets = (0, import_react_native_safe_area_context2.useSafeAreaInsets)();
     const theme = (0, import_react_native_theming14.useTheme)();
-    const menuBottomSheetRef = (0, import_react20.useRef)(null);
-    (0, import_react20.useImperativeHandle)(ref, () => ({
+    const menuBottomSheetRef = (0, import_react22.useRef)(null);
+    const { scrollToSelectedNode, scrollRef } = useSelectedNode();
+    (0, import_react22.useImperativeHandle)(ref, () => ({
       setMobileMenuOpen: (open) => {
         if (open) {
           menuBottomSheetRef.current?.snapToIndex(1);
+          scrollToSelectedNode();
         } else {
           import_react_native7.Keyboard.dismiss();
           menuBottomSheetRef.current?.close();
         }
       }
     }));
-    const bgColorStyle = (0, import_react20.useMemo)(() => {
+    const bgColorStyle = (0, import_react22.useMemo)(() => {
       return { backgroundColor: theme.background.content };
     }, [theme.background.content]);
-    const handleIndicatorStyle = (0, import_react20.useMemo)(() => {
+    const handleIndicatorStyle = (0, import_react22.useMemo)(() => {
       return { backgroundColor: theme.textMutedColor };
     }, [theme.textMutedColor]);
-    const contentContainerStyle2 = (0, import_react20.useMemo)(() => {
+    const contentContainerStyle2 = (0, import_react22.useMemo)(() => {
       return { paddingBottom: insets.bottom };
     }, [insets.bottom]);
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       import_bottom_sheet3.default,
       {
         ref: menuBottomSheetRef,
@@ -4761,9 +4819,10 @@ var MobileMenuDrawer = (0, import_react20.memo)(
         backdropComponent: BottomSheetBackdropComponent,
         backgroundStyle: bgColorStyle,
         handleIndicatorStyle,
-        children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           import_bottom_sheet3.BottomSheetScrollView,
           {
+            ref: scrollRef,
             keyboardShouldPersistTaps: "handled",
             contentContainerStyle: contentContainerStyle2,
             children
@@ -4775,23 +4834,23 @@ var MobileMenuDrawer = (0, import_react20.memo)(
 );
 
 // src/StorybookLogo.tsx
-var import_react21 = require("react");
+var import_react23 = require("react");
 var import_react_native8 = require("react-native");
 
 // src/icon/DarkLogo.tsx
 var import_react_native_svg10 = __toESM(require("react-native-svg"));
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 function DarkLogo({ width = 300, height = 60, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_react_native_svg10.default, { width, height, viewBox: "0 0 300 60", ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_react_native_svg10.Defs, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react_native_svg10.default, { width, height, viewBox: "0 0 300 60", ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react_native_svg10.Defs, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
         import_react_native_svg10.Path,
         {
           id: "a",
           d: "M1.848 54.92L.002 5.723A2.997 2.997 0 012.81 2.621L44.654.006a2.997 2.997 0 013.183 2.99v53.607a2.997 2.997 0 01-3.13 2.994l-40-1.796a2.997 2.997 0 01-2.86-2.882z"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
         import_react_native_svg10.Path,
         {
           id: "c",
@@ -4799,8 +4858,8 @@ function DarkLogo({ width = 300, height = 60, ...props }) {
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_react_native_svg10.G, { fill: "none", fillRule: "evenodd", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react_native_svg10.G, { fill: "none", fillRule: "evenodd", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
         import_react_native_svg10.Path,
         {
           fill: "#FFF",
@@ -4808,7 +4867,7 @@ function DarkLogo({ width = 300, height = 60, ...props }) {
           d: "M80.387 47.178c-2.543 0-4.99-.342-7.343-1.025-2.352-.684-4.307-1.63-5.864-2.837l2.384-5.293c3.242 2.257 6.882 3.386 10.919 3.386 2.097 0 3.71-.342 4.84-1.026 1.128-.683 1.692-1.629 1.692-2.836 0-1.081-.517-1.924-1.55-2.528-1.033-.603-2.869-1.192-5.507-1.764-2.956-.604-5.316-1.335-7.08-2.193-1.765-.858-3.052-1.915-3.862-3.17-.811-1.256-1.216-2.806-1.216-4.65 0-2.034.564-3.846 1.692-5.435 1.129-1.59 2.71-2.837 4.744-3.743 2.035-.906 4.387-1.359 7.057-1.359 2.384 0 4.68.35 6.89 1.05 2.21.699 3.965 1.636 5.269 2.812l-2.384 5.293c-3.084-2.257-6.326-3.385-9.727-3.385-1.94 0-3.465.373-4.577 1.12-1.113.747-1.67 1.772-1.67 3.075 0 .763.215 1.391.644 1.884.43.492 1.145.93 2.146 1.31 1.001.382 2.424.78 4.267 1.193 4.323.954 7.43 2.177 9.322 3.671 1.891 1.494 2.837 3.56 2.837 6.199 0 3.178-1.224 5.682-3.672 7.51-2.447 1.827-5.864 2.74-10.25 2.74zm31.183-5.34c.731 0 1.494-.048 2.289-.143l-.382 5.244c-.922.128-1.844.191-2.765.191-3.56 0-6.159-.779-7.796-2.336-1.637-1.558-2.456-3.926-2.456-7.104v-8.964h-4.434v-5.388h4.434v-6.866h7.2v6.866h5.865v5.388h-5.865v8.916c0 2.797 1.303 4.196 3.91 4.196zm16.736 5.292c-2.48 0-4.657-.5-6.533-1.502-1.875-1.001-3.321-2.416-4.338-4.243-1.018-1.828-1.526-3.982-1.526-6.46 0-2.48.508-4.634 1.526-6.462 1.017-1.827 2.463-3.234 4.338-4.22 1.876-.985 4.053-1.477 6.533-1.477 2.479 0 4.656.492 6.532 1.478 1.875.985 3.321 2.392 4.339 4.22 1.017 1.827 1.525 3.98 1.525 6.46s-.508 4.633-1.525 6.46c-1.018 1.828-2.464 3.243-4.34 4.244-1.875 1.002-4.052 1.502-6.531 1.502zm0-5.483c3.496 0 5.244-2.24 5.244-6.723 0-2.257-.453-3.941-1.358-5.054-.906-1.113-2.202-1.669-3.886-1.669-3.497 0-5.245 2.241-5.245 6.723 0 4.482 1.748 6.723 5.245 6.723zm32.327-12.969l-4.053.43c-2.003.19-3.417.754-4.244 1.692-.826.938-1.24 2.185-1.24 3.743v12.206h-7.199V23.338h6.914v3.957c1.176-2.702 3.607-4.18 7.295-4.434l2.098-.143.429 5.96zm20.92-5.292h7.056L174.496 55.33H167.2l4.481-9.87-9.63-22.075h7.485l5.912 14.876 6.103-14.876zm23.744-.62c2.034 0 3.83.492 5.388 1.478 1.557.985 2.773 2.392 3.647 4.22.874 1.827 1.311 3.949 1.311 6.365 0 2.416-.437 4.553-1.31 6.413-.875 1.86-2.099 3.306-3.672 4.339-1.574 1.033-3.362 1.55-5.364 1.55-1.621 0-3.083-.343-4.387-1.026-1.303-.683-2.304-1.629-3.004-2.837v3.48h-7.104V13.135h7.2v13.35c.7-1.175 1.692-2.09 2.98-2.74 1.287-.652 2.726-.978 4.315-.978zm-2.098 18.881c1.685 0 2.988-.596 3.91-1.788.922-1.192 1.382-2.869 1.382-5.03 0-2.13-.46-3.759-1.382-4.887-.922-1.129-2.225-1.693-3.91-1.693s-2.988.58-3.91 1.74c-.922 1.16-1.383 2.805-1.383 4.935 0 2.162.461 3.822 1.383 4.983.922 1.16 2.225 1.74 3.91 1.74zm28.083 5.483c-2.479 0-4.656-.5-6.532-1.502-1.875-1.001-3.321-2.416-4.339-4.243-1.017-1.828-1.525-3.982-1.525-6.46 0-2.48.508-4.634 1.525-6.462 1.018-1.827 2.464-3.234 4.34-4.22 1.875-.985 4.052-1.477 6.531-1.477 2.48 0 4.657.492 6.533 1.478 1.875.985 3.321 2.392 4.339 4.22 1.017 1.827 1.525 3.98 1.525 6.46s-.508 4.633-1.525 6.46c-1.018 1.828-2.464 3.243-4.34 4.244-1.875 1.002-4.052 1.502-6.532 1.502zm0-5.483c3.497 0 5.245-2.24 5.245-6.723 0-2.257-.453-3.941-1.359-5.054-.906-1.113-2.2-1.669-3.886-1.669-3.496 0-5.244 2.241-5.244 6.723 0 4.482 1.748 6.723 5.244 6.723zm26.844 5.483c-2.48 0-4.656-.5-6.532-1.502-1.875-1.001-3.322-2.416-4.339-4.243-1.017-1.828-1.525-3.982-1.525-6.46 0-2.48.508-4.634 1.525-6.462 1.017-1.827 2.464-3.234 4.34-4.22 1.875-.985 4.052-1.477 6.531-1.477 2.48 0 4.657.492 6.532 1.478 1.876.985 3.322 2.392 4.34 4.22 1.017 1.827 1.525 3.98 1.525 6.46s-.508 4.633-1.526 6.46c-1.017 1.828-2.463 3.243-4.339 4.244-1.875 1.002-4.052 1.502-6.532 1.502zm0-5.483c3.497 0 5.245-2.24 5.245-6.723 0-2.257-.453-3.941-1.359-5.054-.906-1.113-2.201-1.669-3.886-1.669-3.496 0-5.244 2.241-5.244 6.723 0 4.482 1.748 6.723 5.244 6.723zM299 46.749h-8.82l-8.965-10.442v10.442h-7.2V13.134h7.2v20.217l8.63-9.965h8.583l-9.822 11.157L299 46.749z"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
         import_react_native_svg10.Path,
         {
           d: "M48.831 2.81c.004.062.006.124.006.187v53.606a2.997 2.997 0 01-3.13 2.994l-40-1.796a2.997 2.997 0 01-2.86-2.882L1.002 5.724A2.997 2.997 0 013.81 2.621L36.609.57l-.285 6.756a.447.447 0 00.05.223l.04.066c.15.196.43.235.627.085l2.623-1.99 2.217 1.746a.447.447 0 00.723-.367L42.356.211l3.298-.205A2.997 2.997 0 0148.83 2.81z",
@@ -4816,9 +4875,9 @@ function DarkLogo({ width = 300, height = 60, ...props }) {
           fillRule: "nonzero"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_react_native_svg10.G, { transform: "translate(1)", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native_svg10.Mask, { id: "b", fill: "#fff", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native_svg10.Use, { xlinkHref: "#a" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react_native_svg10.G, { transform: "translate(1)", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_native_svg10.Mask, { id: "b", fill: "#fff", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_native_svg10.Use, { xlinkHref: "#a" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           import_react_native_svg10.Path,
           {
             fill: "#FFF",
@@ -4828,9 +4887,9 @@ function DarkLogo({ width = 300, height = 60, ...props }) {
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_react_native_svg10.G, { transform: "translate(1)", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native_svg10.Mask, { id: "d", fill: "#fff", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native_svg10.Use, { xlinkHref: "#c" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react_native_svg10.G, { transform: "translate(1)", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_native_svg10.Mask, { id: "d", fill: "#fff", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_native_svg10.Use, { xlinkHref: "#c" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           import_react_native_svg10.Path,
           {
             fill: "#FFF",
@@ -4846,18 +4905,18 @@ function DarkLogo({ width = 300, height = 60, ...props }) {
 
 // src/icon/Logo.tsx
 var import_react_native_svg11 = __toESM(require("react-native-svg"));
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 function Logo({ width = 300, height = 60, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react_native_svg11.default, { width, height, viewBox: "0 0 300 60", ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react_native_svg11.Defs, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react_native_svg11.default, { width, height, viewBox: "0 0 300 60", ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react_native_svg11.Defs, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
         import_react_native_svg11.Path,
         {
           id: "a",
           d: "M1.848 54.92L.002 5.723A2.997 2.997 0 012.81 2.621L44.654.006a2.997 2.997 0 013.183 2.99v53.607a2.997 2.997 0 01-3.13 2.994l-40-1.796a2.997 2.997 0 01-2.86-2.882z"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
         import_react_native_svg11.Path,
         {
           id: "c",
@@ -4865,8 +4924,8 @@ function Logo({ width = 300, height = 60, ...props }) {
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react_native_svg11.G, { fill: "none", fillRule: "evenodd", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react_native_svg11.G, { fill: "none", fillRule: "evenodd", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
         import_react_native_svg11.Path,
         {
           fill: "#333",
@@ -4874,7 +4933,7 @@ function Logo({ width = 300, height = 60, ...props }) {
           d: "M80.387 47.178c-2.543 0-4.99-.342-7.343-1.025-2.352-.684-4.307-1.63-5.864-2.837l2.384-5.293c3.242 2.257 6.882 3.386 10.919 3.386 2.097 0 3.71-.342 4.84-1.026 1.128-.683 1.692-1.629 1.692-2.836 0-1.081-.517-1.924-1.55-2.528-1.033-.603-2.869-1.192-5.507-1.764-2.956-.604-5.316-1.335-7.08-2.193-1.765-.858-3.052-1.915-3.862-3.17-.811-1.256-1.216-2.806-1.216-4.65 0-2.034.564-3.846 1.692-5.435 1.129-1.59 2.71-2.837 4.744-3.743 2.035-.906 4.387-1.359 7.057-1.359 2.384 0 4.68.35 6.89 1.05 2.21.699 3.965 1.636 5.269 2.812l-2.384 5.293c-3.084-2.257-6.326-3.385-9.727-3.385-1.94 0-3.465.373-4.577 1.12-1.113.747-1.67 1.772-1.67 3.075 0 .763.215 1.391.644 1.884.43.492 1.145.93 2.146 1.31 1.001.382 2.424.78 4.267 1.193 4.323.954 7.43 2.177 9.322 3.671 1.891 1.494 2.837 3.56 2.837 6.199 0 3.178-1.224 5.682-3.672 7.51-2.447 1.827-5.864 2.74-10.25 2.74zm31.183-5.34c.731 0 1.494-.048 2.289-.143l-.382 5.244c-.922.128-1.844.191-2.765.191-3.56 0-6.159-.779-7.796-2.336-1.637-1.558-2.456-3.926-2.456-7.104v-8.964h-4.434v-5.388h4.434v-6.866h7.2v6.866h5.865v5.388h-5.865v8.916c0 2.797 1.303 4.196 3.91 4.196zm16.736 5.292c-2.48 0-4.657-.5-6.533-1.502-1.875-1.001-3.321-2.416-4.338-4.243-1.018-1.828-1.526-3.982-1.526-6.46 0-2.48.508-4.634 1.526-6.462 1.017-1.827 2.463-3.234 4.338-4.22 1.876-.985 4.053-1.477 6.533-1.477 2.479 0 4.656.492 6.532 1.478 1.875.985 3.321 2.392 4.339 4.22 1.017 1.827 1.525 3.98 1.525 6.46s-.508 4.633-1.525 6.46c-1.018 1.828-2.464 3.243-4.34 4.244-1.875 1.002-4.052 1.502-6.531 1.502zm0-5.483c3.496 0 5.244-2.24 5.244-6.723 0-2.257-.453-3.941-1.358-5.054-.906-1.113-2.202-1.669-3.886-1.669-3.497 0-5.245 2.241-5.245 6.723 0 4.482 1.748 6.723 5.245 6.723zm32.327-12.969l-4.053.43c-2.003.19-3.417.754-4.244 1.692-.826.938-1.24 2.185-1.24 3.743v12.206h-7.199V23.338h6.914v3.957c1.176-2.702 3.607-4.18 7.295-4.434l2.098-.143.429 5.96zm20.92-5.292h7.056L174.496 55.33H167.2l4.481-9.87-9.63-22.075h7.485l5.912 14.876 6.103-14.876zm23.744-.62c2.034 0 3.83.492 5.388 1.478 1.557.985 2.773 2.392 3.647 4.22.874 1.827 1.311 3.949 1.311 6.365 0 2.416-.437 4.553-1.31 6.413-.875 1.86-2.099 3.306-3.672 4.339-1.574 1.033-3.362 1.55-5.364 1.55-1.621 0-3.083-.343-4.387-1.026-1.303-.683-2.304-1.629-3.004-2.837v3.48h-7.104V13.135h7.2v13.35c.7-1.175 1.692-2.09 2.98-2.74 1.287-.652 2.726-.978 4.315-.978zm-2.098 18.881c1.685 0 2.988-.596 3.91-1.788.922-1.192 1.382-2.869 1.382-5.03 0-2.13-.46-3.759-1.382-4.887-.922-1.129-2.225-1.693-3.91-1.693s-2.988.58-3.91 1.74c-.922 1.16-1.383 2.805-1.383 4.935 0 2.162.461 3.822 1.383 4.983.922 1.16 2.225 1.74 3.91 1.74zm28.083 5.483c-2.479 0-4.656-.5-6.532-1.502-1.875-1.001-3.321-2.416-4.339-4.243-1.017-1.828-1.525-3.982-1.525-6.46 0-2.48.508-4.634 1.525-6.462 1.018-1.827 2.464-3.234 4.34-4.22 1.875-.985 4.052-1.477 6.531-1.477 2.48 0 4.657.492 6.533 1.478 1.875.985 3.321 2.392 4.339 4.22 1.017 1.827 1.525 3.98 1.525 6.46s-.508 4.633-1.525 6.46c-1.018 1.828-2.464 3.243-4.34 4.244-1.875 1.002-4.052 1.502-6.532 1.502zm0-5.483c3.497 0 5.245-2.24 5.245-6.723 0-2.257-.453-3.941-1.359-5.054-.906-1.113-2.2-1.669-3.886-1.669-3.496 0-5.244 2.241-5.244 6.723 0 4.482 1.748 6.723 5.244 6.723zm26.844 5.483c-2.48 0-4.656-.5-6.532-1.502-1.875-1.001-3.322-2.416-4.339-4.243-1.017-1.828-1.525-3.982-1.525-6.46 0-2.48.508-4.634 1.525-6.462 1.017-1.827 2.464-3.234 4.34-4.22 1.875-.985 4.052-1.477 6.531-1.477 2.48 0 4.657.492 6.532 1.478 1.876.985 3.322 2.392 4.34 4.22 1.017 1.827 1.525 3.98 1.525 6.46s-.508 4.633-1.526 6.46c-1.017 1.828-2.463 3.243-4.339 4.244-1.875 1.002-4.052 1.502-6.532 1.502zm0-5.483c3.497 0 5.245-2.24 5.245-6.723 0-2.257-.453-3.941-1.359-5.054-.906-1.113-2.201-1.669-3.886-1.669-3.496 0-5.244 2.241-5.244 6.723 0 4.482 1.748 6.723 5.244 6.723zM299 46.749h-8.82l-8.965-10.442v10.442h-7.2V13.134h7.2v20.217l8.63-9.965h8.583l-9.822 11.157L299 46.749z"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
         import_react_native_svg11.Path,
         {
           d: "M48.831 2.81c.004.062.006.124.006.187v53.606a2.997 2.997 0 01-3.13 2.994l-40-1.796a2.997 2.997 0 01-2.86-2.882L1.002 5.724A2.997 2.997 0 013.81 2.621L36.609.57l-.285 6.756a.447.447 0 00.05.223l.04.066c.15.196.43.235.627.085l2.623-1.99 2.217 1.746a.447.447 0 00.723-.367L42.356.211l3.298-.205A2.997 2.997 0 0148.83 2.81z",
@@ -4882,9 +4941,9 @@ function Logo({ width = 300, height = 60, ...props }) {
           fillRule: "nonzero"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react_native_svg11.G, { transform: "translate(1)", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_native_svg11.Mask, { id: "b", fill: "#fff", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_native_svg11.Use, { xlinkHref: "#a" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react_native_svg11.G, { transform: "translate(1)", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_native_svg11.Mask, { id: "b", fill: "#fff", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_native_svg11.Use, { xlinkHref: "#a" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           import_react_native_svg11.Path,
           {
             fill: "#FFF",
@@ -4894,9 +4953,9 @@ function Logo({ width = 300, height = 60, ...props }) {
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react_native_svg11.G, { transform: "translate(1)", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_native_svg11.Mask, { id: "d", fill: "#fff", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_native_svg11.Use, { xlinkHref: "#c" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react_native_svg11.G, { transform: "translate(1)", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_native_svg11.Mask, { id: "d", fill: "#fff", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_native_svg11.Use, { xlinkHref: "#c" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           import_react_native_svg11.Path,
           {
             fill: "#FFF",
@@ -4911,16 +4970,16 @@ function Logo({ width = 300, height = 60, ...props }) {
 }
 
 // src/StorybookLogo.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var WIDTH = 125;
 var HEIGHT = 25;
-var NoBrandLogo = ({ theme }) => theme.base === "light" ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Logo, { height: HEIGHT, width: WIDTH }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(DarkLogo, { height: HEIGHT, width: WIDTH });
+var NoBrandLogo = ({ theme }) => theme.base === "light" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Logo, { height: HEIGHT, width: WIDTH }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(DarkLogo, { height: HEIGHT, width: WIDTH });
 function isElement(value) {
-  return (0, import_react21.isValidElement)(value);
+  return (0, import_react23.isValidElement)(value);
 }
 var BrandLogo = ({ theme }) => {
   const imageHasNoWidthOrHeight = typeof theme.brand.image === "object" && typeof theme.brand.image === "object" && "uri" in theme.brand.image && (!("height" in theme.brand.image) || !("width" in theme.brand.image));
-  (0, import_react21.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     if (imageHasNoWidthOrHeight) {
       console.warn(
         "STORYBOOK: When using a remote image as the brand logo, you must also set the width and height.\nFor example:  brand: { image: { uri: 'https://sb.com/img.png', height: 25, width: 25}}"
@@ -4933,7 +4992,7 @@ var BrandLogo = ({ theme }) => {
   if (isElement(theme.brand.image)) {
     return theme.brand.image;
   }
-  const image = /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  const image = /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     import_react_native8.Image,
     {
       source: theme.brand.image,
@@ -4942,7 +5001,7 @@ var BrandLogo = ({ theme }) => {
     }
   );
   if (theme.brand.url) {
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       import_react_native8.TouchableOpacity,
       {
         onPress: () => {
@@ -4957,7 +5016,7 @@ var BrandLogo = ({ theme }) => {
   }
 };
 var BrandTitle = ({ theme }) => {
-  const brandTitleStyle = (0, import_react21.useMemo)(() => {
+  const brandTitleStyle = (0, import_react23.useMemo)(() => {
     return {
       width: WIDTH,
       height: HEIGHT,
@@ -4965,9 +5024,9 @@ var BrandTitle = ({ theme }) => {
       fontSize: theme.typography.size.m1
     };
   }, [theme]);
-  const title = /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_native8.Text, { style: brandTitleStyle, numberOfLines: 1, ellipsizeMode: "tail", children: theme.brand.title });
+  const title = /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_native8.Text, { style: brandTitleStyle, numberOfLines: 1, ellipsizeMode: "tail", children: theme.brand.title });
   if (theme.brand.url) {
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       import_react_native8.TouchableOpacity,
       {
         onPress: () => {
@@ -4982,24 +5041,24 @@ var BrandTitle = ({ theme }) => {
   }
 };
 var StorybookLogo = ({ theme }) => {
-  const image = (0, import_react21.useMemo)(() => theme.brand?.image, [theme.brand?.image]);
-  const title = (0, import_react21.useMemo)(() => theme.brand?.title, [theme.brand?.title]);
+  const image = (0, import_react23.useMemo)(() => theme.brand?.image, [theme.brand?.image]);
+  const title = (0, import_react23.useMemo)(() => theme.brand?.title, [theme.brand?.title]);
   if (image) {
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(BrandLogo, { theme });
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(BrandLogo, { theme });
   } else if (title) {
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(BrandTitle, { theme });
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(BrandTitle, { theme });
   } else {
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(NoBrandLogo, { theme });
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(NoBrandLogo, { theme });
   }
 };
 
 // src/hooks/useStoreState.ts
-var import_react23 = require("react");
+var import_react25 = require("react");
 
 // src/StorageProvider.tsx
-var import_react22 = require("react");
-var import_jsx_runtime25 = require("react/jsx-runtime");
-var StorageContext = (0, import_react22.createContext)({
+var import_react24 = require("react");
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var StorageContext = (0, import_react24.createContext)({
   getItem: async () => null,
   setItem: async () => {
   }
@@ -5008,15 +5067,15 @@ var StorageProvider = ({
   storage,
   children
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(StorageContext.Provider, { value: storage, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(StorageContext.Provider, { value: storage, children });
 };
-var useStorage = () => (0, import_react22.useContext)(StorageContext);
+var useStorage = () => (0, import_react24.useContext)(StorageContext);
 
 // src/hooks/useStoreState.ts
 var useStoreBooleanState = (key, defaultValue) => {
   const storage = useStorage();
-  const [val, setVal] = (0, import_react23.useState)(defaultValue);
-  (0, import_react23.useEffect)(() => {
+  const [val, setVal] = (0, import_react25.useState)(defaultValue);
+  (0, import_react25.useEffect)(() => {
     storage.getItem(key).then((newVal) => {
       if (newVal === null || newVal === void 0) {
         setVal(defaultValue);
@@ -5025,7 +5084,7 @@ var useStoreBooleanState = (key, defaultValue) => {
       }
     });
   }, [key, storage, defaultValue]);
-  (0, import_react23.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     storage.setItem(key, val.toString());
   }, [key, storage, val]);
   return [val, setVal];
@@ -5033,22 +5092,22 @@ var useStoreBooleanState = (key, defaultValue) => {
 
 // src/icon/BottomBarToggleIcon.tsx
 var import_react_native_svg12 = require("react-native-svg");
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var BottomBarToggleIcon = ({
   color = "currentColor",
   width = 14,
   height = 14,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_react_native_svg12.Svg, { width, height, viewBox: "0 0 14 14", fill: "none", ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_react_native_svg12.Svg, { width, height, viewBox: "0 0 14 14", fill: "none", ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
       import_react_native_svg12.Path,
       {
         d: "M3.5 10.004a.5.5 0 000 1h1a.5.5 0 000-1h-1zM6 10.504a.5.5 0 01.5-.5h1a.5.5 0 010 1h-1a.5.5 0 01-.5-.5zM9.5 10.004a.5.5 0 000 1h1a.5.5 0 000-1h-1z",
         fill: color
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
       import_react_native_svg12.Path,
       {
         fillRule: "evenodd",
@@ -5061,29 +5120,29 @@ var BottomBarToggleIcon = ({
 };
 
 // src/icon/CloseFullscreenIcon.tsx
-var import_react24 = require("react");
+var import_react26 = require("react");
 var import_react_native_svg13 = __toESM(require("react-native-svg"));
 var import_react_native_theming15 = require("@storybook/react-native-theming");
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 function CloseFullscreenIcon({ color, width = 14, height = 14, ...props }) {
   const theme = (0, import_react_native_theming15.useTheme)();
-  const fillColor = (0, import_react24.useMemo)(() => {
+  const fillColor = (0, import_react26.useMemo)(() => {
     return color ?? theme.color.defaultText;
   }, [color, theme.color.defaultText]);
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react_native_svg13.default, { fill: fillColor, height, viewBox: "0 0 16 16", width, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react_native_svg13.Path, { d: "M5.5 0a.5.5 0 01.5.5v4A1.5 1.5 0 014.5 6h-4a.5.5 0 010-1h4a.5.5 0 00.5-.5v-4a.5.5 0 01.5-.5zm5 0a.5.5 0 01.5.5v4a.5.5 0 00.5.5h4a.5.5 0 010 1h-4A1.5 1.5 0 0110 4.5v-4a.5.5 0 01.5-.5zM0 10.5a.5.5 0 01.5-.5h4A1.5 1.5 0 016 11.5v4a.5.5 0 01-1 0v-4a.5.5 0 00-.5-.5h-4a.5.5 0 01-.5-.5zm10 1a1.5 1.5 0 011.5-1.5h4a.5.5 0 010 1h-4a.5.5 0 00-.5.5v4a.5.5 0 01-1 0v-4z" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_native_svg13.default, { fill: fillColor, height, viewBox: "0 0 16 16", width, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_native_svg13.Path, { d: "M5.5 0a.5.5 0 01.5.5v4A1.5 1.5 0 014.5 6h-4a.5.5 0 010-1h4a.5.5 0 00.5-.5v-4a.5.5 0 01.5-.5zm5 0a.5.5 0 01.5.5v4a.5.5 0 00.5.5h4a.5.5 0 010 1h-4A1.5 1.5 0 0110 4.5v-4a.5.5 0 01.5-.5zM0 10.5a.5.5 0 01.5-.5h4A1.5 1.5 0 016 11.5v4a.5.5 0 01-1 0v-4a.5.5 0 00-.5-.5h-4a.5.5 0 01-.5-.5zm10 1a1.5 1.5 0 011.5-1.5h4a.5.5 0 010 1h-4a.5.5 0 00-.5.5v4a.5.5 0 01-1 0v-4z" }) });
 }
 
 // src/icon/FullscreenIcon.tsx
 var import_react_native_svg14 = __toESM(require("react-native-svg"));
 var import_react_native_theming16 = require("@storybook/react-native-theming");
-var import_react25 = require("react");
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_react27 = require("react");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 function FullscreenIcon({ color, width = 14, height = 14, ...props }) {
   const theme = (0, import_react_native_theming16.useTheme)();
-  const fillColor = (0, import_react25.useMemo)(() => {
+  const fillColor = (0, import_react27.useMemo)(() => {
     return color ?? theme.color.defaultText;
   }, [color, theme.color.defaultText]);
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_native_svg14.default, { width, height, viewBox: "0 0 14 14", fill: "none", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react_native_svg14.default, { width, height, viewBox: "0 0 14 14", fill: "none", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     import_react_native_svg14.Path,
     {
       d: "M1.5 1h2a.5.5 0 010 1h-.793l3.147 3.146a.5.5 0 11-.708.708L2 2.707V3.5a.5.5 0 01-1 0v-2a.5.5 0 01.5-.5zm8.5.5a.5.5 0 01.5-.5h2a.5.5 0 01.5.5v2a.5.5 0 01-1 0v-.793L8.854 5.854a.5.5 0 11-.708-.708L11.293 2H10.5a.5.5 0 01-.5-.5zm2.5 8.5a.5.5 0 01.5.5v2a.5.5 0 01-.5.5h-2a.5.5 0 010-1h.793L8.146 8.854a.5.5 0 11.708-.708L12 11.293V10.5a.5.5 0 01.5-.5zM2 11.293V10.5a.5.5 0 00-1 0v2a.5.5 0 00.5.5h2a.5.5 0 000-1h-.793l3.147-3.146a.5.5 0 10-.708-.708L2 11.293z",
@@ -5094,14 +5153,14 @@ function FullscreenIcon({ color, width = 14, height = 14, ...props }) {
 
 // src/icon/MenuIcon.tsx
 var import_react_native_svg15 = require("react-native-svg");
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var MenuIcon = ({
   color = "currentColor",
   width = 14,
   height = 14,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react_native_svg15.Svg, { width, height, viewBox: "0 0 14 14", fill: "none", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react_native_svg15.Svg, { width, height, viewBox: "0 0 14 14", fill: "none", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     import_react_native_svg15.Path,
     {
       d: "M13 3.5a.5.5 0 010 1H1a.5.5 0 010-1h12zM13.5 10a.5.5 0 00-.5-.5H1a.5.5 0 000 1h12a.5.5 0 00.5-.5zM13 6.5a.5.5 0 010 1H1a.5.5 0 010-1h12z",
@@ -5111,7 +5170,7 @@ var MenuIcon = ({
 };
 
 // src/Layout.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var desktopLogoContainer = {
   flexDirection: "row",
   alignItems: "center",
@@ -5139,8 +5198,8 @@ var Layout = ({
   children
 }) => {
   const theme = (0, import_react_native_theming17.useTheme)();
-  const mobileMenuDrawerRef = (0, import_react26.useRef)(null);
-  const addonPanelRef = (0, import_react26.useRef)(null);
+  const mobileMenuDrawerRef = (0, import_react28.useRef)(null);
+  const addonPanelRef = (0, import_react28.useRef)(null);
   const insets = (0, import_react_native_safe_area_context3.useSafeAreaInsets)();
   const { isDesktop } = useLayout();
   const [desktopSidebarOpen, setDesktopSidebarOpen] = useStoreBooleanState(
@@ -5151,7 +5210,7 @@ var Layout = ({
     "desktopPanelState",
     true
   );
-  const [uiHidden, setUiHidden] = (0, import_react26.useState)(false);
+  const [uiHidden, setUiHidden] = (0, import_react28.useState)(false);
   const desktopSidebarStyle = useStyle(
     () => ({
       width: desktopSidebarOpen ? 240 : void 0,
@@ -5218,25 +5277,25 @@ var Layout = ({
     }),
     [theme.color.defaultText]
   );
-  const openMobileMenu = (0, import_react26.useCallback)(() => {
+  const openMobileMenu = (0, import_react28.useCallback)(() => {
     mobileMenuDrawerRef.current.setMobileMenuOpen(true);
   }, [mobileMenuDrawerRef]);
-  const setSelection = (0, import_react26.useCallback)(({ storyId: newStoryId }) => {
+  const setSelection = (0, import_react28.useCallback)(({ storyId: newStoryId }) => {
     const channel = import_manager_api2.addons.getChannel();
     channel.emit(import_core_events.SET_CURRENT_STORY, { storyId: newStoryId });
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_react_native9.View, { style: containerStyle, children: [
-    isDesktop ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react_native9.View, { style: desktopSidebarStyle, children: desktopSidebarOpen ? /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_react_native9.View, { style: containerStyle, children: [
+    isDesktop ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react_native9.View, { style: desktopSidebarStyle, children: desktopSidebarOpen ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
       import_react_native9.ScrollView,
       {
         keyboardShouldPersistTaps: "handled",
         contentContainerStyle: desktopScrollViewContentContainerStyle,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_react_native9.View, { style: desktopLogoContainer, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(StorybookLogo, { theme }),
-            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(IconButton, { onPress: () => setDesktopSidebarOpen(false), Icon: MenuIcon })
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_react_native9.View, { style: desktopLogoContainer, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(StorybookLogo, { theme }),
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(IconButton, { onPress: () => setDesktopSidebarOpen(false), Icon: MenuIcon })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
             Sidebar,
             {
               extra: placeholderArray,
@@ -5252,18 +5311,18 @@ var Layout = ({
           )
         ]
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(IconButton, { onPress: () => setDesktopSidebarOpen(true), Icon: MenuIcon }) }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_react_native9.View, { style: mobileContentStyle, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react_native9.View, { style: contentContainerStyle, children }),
-      story?.parameters?.hideFullScreenButton || isDesktop ? null : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    ) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(IconButton, { onPress: () => setDesktopSidebarOpen(true), Icon: MenuIcon }) }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_react_native9.View, { style: mobileContentStyle, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react_native9.View, { style: contentContainerStyle, children }),
+      story?.parameters?.hideFullScreenButton || isDesktop ? null : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
         import_react_native9.TouchableOpacity,
         {
           style: fullScreenButtonStyle,
           onPress: () => setUiHidden((prev) => !prev),
-          children: uiHidden ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(CloseFullscreenIcon, { color: theme.color.mediumdark }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(FullscreenIcon, { color: theme.color.mediumdark })
+          children: uiHidden ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(CloseFullscreenIcon, { color: theme.color.mediumdark }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(FullscreenIcon, { color: theme.color.mediumdark })
         }
       ),
-      isDesktop ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react_native9.View, { style: desktopAddonsPanelStyle, children: desktopAddonsPanelOpen ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(AddonsTabs, { storyId: story?.id, onClose: () => setDesktopAddonsPanelOpen(false) }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      isDesktop ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react_native9.View, { style: desktopAddonsPanelStyle, children: desktopAddonsPanelOpen ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(AddonsTabs, { storyId: story?.id, onClose: () => setDesktopAddonsPanelOpen(false) }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
         IconButton,
         {
           style: iconFloatRightStyle,
@@ -5272,8 +5331,8 @@ var Layout = ({
         }
       ) }) : null
     ] }),
-    !uiHidden && !isDesktop ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Container3, { style: menuContainerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Nav, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+    !uiHidden && !isDesktop ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Container3, { style: menuContainerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Nav, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
         Button2,
         {
           testID: "mobile-menu-button",
@@ -5281,8 +5340,8 @@ var Layout = ({
           hitSlop: navButtonHitSlop,
           onPress: openMobileMenu,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(MenuIcon, { color: theme.color.mediumdark }),
-            /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_react_native9.Text, { style: navButtonTextStyle, numberOfLines: 1, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(MenuIcon, { color: theme.color.mediumdark }),
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_react_native9.Text, { style: navButtonTextStyle, numberOfLines: 1, children: [
               story?.title,
               "/",
               story?.name
@@ -5290,7 +5349,7 @@ var Layout = ({
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
         IconButton,
         {
           testID: "mobile-addons-button",
@@ -5299,9 +5358,9 @@ var Layout = ({
         }
       )
     ] }) }) : null,
-    isDesktop ? null : /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(MobileMenuDrawer, { ref: mobileMenuDrawerRef, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react_native9.View, { style: mobileMenuDrawerContentStyle, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(StorybookLogo, { theme }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    isDesktop ? null : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SelectedNodeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(MobileMenuDrawer, { ref: mobileMenuDrawerRef, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react_native9.View, { style: mobileMenuDrawerContentStyle, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(StorybookLogo, { theme }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
         Sidebar,
         {
           extra: placeholderArray,
@@ -5315,8 +5374,8 @@ var Layout = ({
           refId: DEFAULT_REF_ID
         }
       )
-    ] }),
-    isDesktop ? null : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(MobileAddonsPanel, { ref: addonPanelRef, storyId: story?.id })
+    ] }) }),
+    isDesktop ? null : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(MobileAddonsPanel, { ref: addonPanelRef, storyId: story?.id })
   ] });
 };
 var Nav = import_react_native_theming17.styled.View({