@storybook/react-native-ui-lite 10.3.0-next.2 → 10.3.0-next.4

package/dist/index.js

@@ -424,26 +424,34 @@ StoryNode.displayName = "StoryNode";
 // src/Tree.tsx
 var import_react_native_theming3 = require("@storybook/react-native-theming");
 var import_react_native_ui_common = require("@storybook/react-native-ui-common");
-var import_react4 = __toESM(require("react"));
-var import_react_native2 = require("react-native");
-var import_list = require("@legendapp/list");
+var import_react5 = __toESM(require("react"));
+var import_react_native4 = require("react-native");
+
+// src/LegendList.tsx
+var import_react3 = require("@legendapp/list/react");
+var import_react_native2 = require("@legendapp/list/react-native");
+var import_react_native3 = require("react-native");
+var isWeb = import_react_native3.Platform.OS === "web";
+var LegendList = isWeb ? import_react3.LegendList : import_react_native2.LegendList;
+
+// src/Tree.tsx
 var import_react_native_safe_area_context = require("react-native-safe-area-context");
 
 // src/SelectedNodeProvider.tsx
-var import_react3 = require("react");
+var import_react4 = require("react");
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var SelectedNodeContext = (0, import_react3.createContext)({
+var SelectedNodeContext = (0, import_react4.createContext)({
   registerCallback: () => {
   },
   scrollCallback: () => {
   }
 });
 var SelectedNodeProvider = ({ children }) => {
-  const [scrollCallbackValue, setScrollCallback] = (0, import_react3.useState)(null);
-  const registerCallback = (0, import_react3.useCallback)((callback) => {
+  const [scrollCallbackValue, setScrollCallback] = (0, import_react4.useState)(null);
+  const registerCallback = (0, import_react4.useCallback)((callback) => {
     setScrollCallback(() => callback);
   }, []);
-  const scrollCallback = (0, import_react3.useCallback)(
+  const scrollCallback = (0, import_react4.useCallback)(
     (options) => {
       scrollCallbackValue?.(options);
     },
@@ -460,11 +468,11 @@ var SelectedNodeProvider = ({ children }) => {
     }
   );
 };
-var useSelectedNode = () => (0, import_react3.useContext)(SelectedNodeContext);
+var useSelectedNode = () => (0, import_react4.useContext)(SelectedNodeContext);
 
 // src/Tree.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var Node = import_react4.default.memo(function Node2({
+var Node = import_react5.default.memo(function Node2({
   item,
   refId,
   isOrphan: _isOrphan,
@@ -599,12 +607,12 @@ var ROOT_ITEM_HEIGHT = 54;
 var getEstimatedItemSize = (item, _index) => {
   return item?.isRoot ? ROOT_ITEM_HEIGHT : ITEM_HEIGHT;
 };
-var Tree = import_react4.default.memo(function Tree2({ isMain, refId, data, status, docsMode, selectedStoryId, onSelectStoryId }) {
+var Tree = import_react5.default.memo(function Tree2({ isMain, refId, data, status, docsMode, selectedStoryId, onSelectStoryId }) {
   const { registerCallback } = useSelectedNode();
-  const [idToScrolllOnMount, setIdToScrolllOnMount] = (0, import_react4.useState)(null);
+  const [idToScrolllOnMount, setIdToScrolllOnMount] = (0, import_react5.useState)(null);
   const insets = (0, import_react_native_safe_area_context.useSafeAreaInsets)();
-  const listRef = (0, import_react4.useRef)(null);
-  const [rootIds, orphanIds, initialExpanded] = (0, import_react4.useMemo)(
+  const listRef = (0, import_react5.useRef)(null);
+  const [rootIds, orphanIds, initialExpanded] = (0, import_react5.useMemo)(
     () => Object.keys(data).reduce(
       (acc, id) => {
         const item = data[id];
@@ -617,7 +625,7 @@ var Tree = import_react4.default.memo(function Tree2({ isMain, refId, data, stat
     ),
     [data]
   );
-  const { expandableDescendants } = (0, import_react4.useMemo)(() => {
+  const { expandableDescendants } = (0, import_react5.useMemo)(() => {
     return [...orphanIds, ...rootIds].reduce(
       (acc, nodeId) => {
         acc.expandableDescendants[nodeId] = (0, import_react_native_ui_common.getDescendantIds)(data, nodeId, false).filter(
@@ -628,7 +636,7 @@ var Tree = import_react4.default.memo(function Tree2({ isMain, refId, data, stat
       { orphansFirst: [], expandableDescendants: {} }
     );
   }, [data, rootIds, orphanIds]);
-  const singleStoryComponentIds = (0, import_react4.useMemo)(() => {
+  const singleStoryComponentIds = (0, import_react5.useMemo)(() => {
     return Object.keys(data).filter((id) => {
       const entry = data[id];
       if (entry.type !== "component") return false;
@@ -640,11 +648,11 @@ var Tree = import_react4.default.memo(function Tree2({ isMain, refId, data, stat
       return false;
     });
   }, [data]);
-  const collapsedItems = (0, import_react4.useMemo)(
+  const collapsedItems = (0, import_react5.useMemo)(
     () => Object.keys(data).filter((id) => !singleStoryComponentIds.includes(id)),
     [singleStoryComponentIds, data]
   );
-  const collapsedData = (0, import_react4.useMemo)(() => {
+  const collapsedData = (0, import_react5.useMemo)(() => {
     return singleStoryComponentIds.reduce(
       (acc, id) => {
         const { children, parent, name } = data[id];
@@ -673,7 +681,7 @@ var Tree = import_react4.default.memo(function Tree2({ isMain, refId, data, stat
     selectedStoryId,
     onSelectStoryId
   });
-  const parentMap = (0, import_react4.useMemo)(() => {
+  const parentMap = (0, import_react5.useMemo)(() => {
     const map = {};
     collapsedItems.forEach((id) => {
       const item = collapsedData[id];
@@ -681,7 +689,7 @@ var Tree = import_react4.default.memo(function Tree2({ isMain, refId, data, stat
     });
     return map;
   }, [collapsedItems, collapsedData]);
-  const isItemVisible = (0, import_react4.useCallback)(
+  const isItemVisible = (0, import_react5.useCallback)(
     (itemId) => {
       const item = collapsedData[itemId];
       if (item.type === "root") return true;
@@ -695,7 +703,7 @@ var Tree = import_react4.default.memo(function Tree2({ isMain, refId, data, stat
     },
     [collapsedData, expanded, parentMap]
   );
-  const treeData = (0, import_react4.useMemo)(() => {
+  const treeData = (0, import_react5.useMemo)(() => {
     return collapsedItems.map((itemId) => {
       const item = collapsedData[itemId];
       if (!isItemVisible(itemId)) {
@@ -720,7 +728,7 @@ var Tree = import_react4.default.memo(function Tree2({ isMain, refId, data, stat
       };
     }).filter(Boolean);
   }, [collapsedData, collapsedItems, expandableDescendants, expanded, isItemVisible, orphanIds]);
-  const renderItem = (0, import_react4.useCallback)(
+  const renderItem = (0, import_react5.useCallback)(
     ({ item: treeItem }) => {
       const { itemId, item, isRoot } = treeItem;
       const id = (0, import_react_native_ui_common.createId)(itemId, refId);
@@ -765,13 +773,13 @@ var Tree = import_react4.default.memo(function Tree2({ isMain, refId, data, stat
     },
     [docsMode, expanded, onSelectStoryId, refId, selectedStoryId, setExpanded, status]
   );
-  const keyExtractor = (0, import_react4.useCallback)(
+  const keyExtractor = (0, import_react5.useCallback)(
     (item) => {
       return (0, import_react_native_ui_common.createId)(item.itemId, refId);
     },
     [refId]
   );
-  const contentContainerStyle2 = (0, import_react4.useMemo)(
+  const contentContainerStyle2 = (0, import_react5.useMemo)(
     () => ({
       marginTop: isMain && orphanIds.length > 0 ? 20 : 0,
       paddingBottom: insets.bottom + 20,
@@ -779,7 +787,7 @@ var Tree = import_react4.default.memo(function Tree2({ isMain, refId, data, stat
     }),
     [isMain, orphanIds.length, insets.bottom]
   );
-  (0, import_react4.useLayoutEffect)(() => {
+  (0, import_react5.useLayoutEffect)(() => {
     registerCallback(({ id: nextId, animated }) => {
       const targetId = nextId ?? selectedStoryId;
       const ancestorIds = (0, import_react_native_ui_common.getAncestorIds)(collapsedData, targetId);
@@ -787,7 +795,7 @@ var Tree = import_react4.default.memo(function Tree2({ isMain, refId, data, stat
       setIdToScrolllOnMount(targetId);
     });
   }, [collapsedData, registerCallback, selectedStoryId, setExpanded]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (idToScrolllOnMount) {
       const index = treeData.findIndex((item) => {
         return item.itemId === idToScrolllOnMount;
@@ -803,8 +811,8 @@ var Tree = import_react4.default.memo(function Tree2({ isMain, refId, data, stat
       }
     }
   }, [idToScrolllOnMount, treeData]);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native2.View, { style: flexStyle, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    import_list.LegendList,
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.View, { style: flexStyle, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    LegendList,
     {
       ref: listRef,
       style: flexStyle,
@@ -818,13 +826,13 @@ var Tree = import_react4.default.memo(function Tree2({ isMain, refId, data, stat
     }
   ) });
 });
-var Root = import_react4.default.memo(function Root2({
+var Root = import_react5.default.memo(function Root2({
   setExpanded,
   isFullyExpanded,
   expandableDescendants,
   ...props
 }) {
-  const setFullyExpanded = (0, import_react4.useCallback)(
+  const setFullyExpanded = (0, import_react5.useCallback)(
     () => setExpanded({ ids: expandableDescendants, value: !isFullyExpanded }),
     [setExpanded, isFullyExpanded, expandableDescendants]
   );
@@ -840,17 +848,17 @@ var Root = import_react4.default.memo(function Root2({
 });
 
 // src/Explorer.tsx
-var import_react6 = __toESM(require("react"));
+var import_react7 = __toESM(require("react"));
 
 // src/Refs.tsx
-var import_react5 = __toESM(require("react"));
+var import_react6 = __toESM(require("react"));
 var import_react_native_theming4 = require("@storybook/react-native-theming");
 var import_react_native_ui_common2 = require("@storybook/react-native-ui-common");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var Wrapper2 = import_react_native_theming4.styled.View(() => ({
   flex: 1
 }));
-var Ref = import_react5.default.memo(
+var Ref = import_react6.default.memo(
   function Ref2(props) {
     const {
       index,
@@ -866,20 +874,20 @@ var Ref = import_react5.default.memo(
       previewInitialized,
       setSelection
     } = props;
-    const length = (0, import_react5.useMemo)(() => index ? Object.keys(index).length : 0, [index]);
+    const length = (0, import_react6.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 = (0, import_react_native_ui_common2.getStateType)(isLoading, isAuthRequired, isError, isEmpty);
-    const [isExpanded, setExpanded] = (0, import_react5.useState)(expanded);
-    (0, import_react5.useEffect)(() => {
+    const [isExpanded, setExpanded] = (0, import_react6.useState)(expanded);
+    (0, import_react6.useEffect)(() => {
       if (index && selectedStoryId && index[selectedStoryId]) {
         setExpanded(true);
       }
     }, [setExpanded, index, selectedStoryId]);
-    const onSelectStoryId = (0, import_react5.useCallback)(
+    const onSelectStoryId = (0, import_react6.useCallback)(
       (storyId) => {
         setSelection({ refId, storyId });
       },
@@ -902,26 +910,26 @@ var Ref = import_react5.default.memo(
 );
 
 // src/Explorer.tsx
-var import_react_native3 = require("react-native");
+var import_react_native5 = require("react-native");
 var import_jsx_runtime6 = require("react/jsx-runtime");
-var import_react7 = require("react");
+var import_react8 = require("react");
 var containerStyle = { flex: 1 };
-var Explorer = import_react6.default.memo(function Explorer2({
+var Explorer = import_react7.default.memo(function Explorer2({
   isLoading,
   isBrowsing,
   dataset,
   selected,
   setSelection
 }) {
-  const containerRef = (0, import_react6.useRef)(null);
+  const containerRef = (0, import_react7.useRef)(null);
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-    import_react_native3.View,
+    import_react_native5.View,
     {
       ref: containerRef,
       style: containerStyle,
       id: "storybook-explorer-tree",
       testID: "storybook-explorer-tree",
-      children: dataset.entries.map(([refId, ref]) => /* @__PURE__ */ (0, import_react7.createElement)(
+      children: dataset.entries.map(([refId, ref]) => /* @__PURE__ */ (0, import_react8.createElement)(
         Ref,
         {
           ...ref,
@@ -939,8 +947,8 @@ var Explorer = import_react6.default.memo(function Explorer2({
 // src/Sidebar.tsx
 var import_react_native_theming7 = require("@storybook/react-native-theming");
 var import_react_native_ui_common5 = require("@storybook/react-native-ui-common");
-var import_react11 = __toESM(require("react"));
-var import_react_native6 = require("react-native");
+var import_react12 = __toESM(require("react"));
+var import_react_native8 = require("react-native");
 
 // src/constants.ts
 var BREAKPOINT = 1e3;
@@ -949,9 +957,9 @@ var DEFAULT_REF_ID = "storybook_internal";
 
 // src/Search.tsx
 var import_react_native_theming5 = require("@storybook/react-native-theming");
-var import_react8 = require("@nozbe/microfuzz/react");
-var import_react9 = __toESM(require("react"));
-var import_react_native4 = require("react-native");
+var import_react9 = require("@nozbe/microfuzz/react");
+var import_react10 = __toESM(require("react"));
+var import_react_native6 = require("react-native");
 var import_react_native_ui_common3 = require("@storybook/react-native-ui-common");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var DEFAULT_MAX_SEARCH_RESULTS = 50;
@@ -969,7 +977,7 @@ var SearchIconWrapper = import_react_native_theming5.styled.View({
 var SearchField = import_react_native_theming5.styled.View({
   flexShrink: 0
 });
-var inputPlatformSpecificStyles = import_react_native4.Platform.select({
+var inputPlatformSpecificStyles = import_react_native6.Platform.select({
   macos: {
     paddingVertical: 6
   },
@@ -981,7 +989,7 @@ var inputPlatformSpecificStyles = import_react_native4.Platform.select({
     height: 32
   }
 });
-var Input = (0, import_react_native_theming5.styled)(import_react_native4.TextInput)(({ theme }) => ({
+var Input = (0, import_react_native_theming5.styled)(import_react_native6.TextInput)(({ theme }) => ({
   ...inputPlatformSpecificStyles,
   paddingLeft: 28,
   paddingRight: 28,
@@ -1009,14 +1017,14 @@ var ClearIcon = import_react_native_theming5.styled.TouchableOpacity(({ theme })
 }));
 var flexStyle2 = { flex: 1 };
 var searchFieldWrapperStyle = { paddingHorizontal: 10, marginBottom: 4 };
-var Search = import_react9.default.memo(function Search2({ children, dataset, setSelection, getLastViewed, initialQuery = "" }) {
+var Search = import_react10.default.memo(function Search2({ children, dataset, setSelection, getLastViewed, initialQuery = "" }) {
   const theme = (0, import_react_native_theming5.useTheme)();
-  const inputRef = (0, import_react9.useRef)(null);
-  const [inputValue, setInputValue] = (0, import_react9.useState)(initialQuery);
-  const [isOpen, setIsOpen] = (0, import_react9.useState)(false);
-  const [allComponents, showAllComponents] = (0, import_react9.useState)(false);
+  const inputRef = (0, import_react10.useRef)(null);
+  const [inputValue, setInputValue] = (0, import_react10.useState)(initialQuery);
+  const [isOpen, setIsOpen] = (0, import_react10.useState)(false);
+  const [allComponents, showAllComponents] = (0, import_react10.useState)(false);
   const { scrollCallback } = useSelectedNode();
-  const selectStory = (0, import_react9.useCallback)(
+  const selectStory = (0, import_react10.useCallback)(
     (id, refId) => {
       setSelection({ storyId: id, refId });
       inputRef.current?.blur();
@@ -1026,7 +1034,7 @@ var Search = import_react9.default.memo(function Search2({ children, dataset, se
     },
     [scrollCallback, setSelection]
   );
-  const getItemProps = (0, import_react9.useCallback)(
+  const getItemProps = (0, import_react10.useCallback)(
     ({ item: result }) => {
       return {
         icon: result?.item?.type === "component" ? "component" : "story",
@@ -1047,8 +1055,8 @@ var Search = import_react9.default.memo(function Search2({ children, dataset, se
     },
     [selectStory]
   );
-  const deferredDataset = (0, import_react9.useDeferredValue)(dataset);
-  const searchList = (0, import_react9.useMemo)(() => {
+  const deferredDataset = (0, import_react10.useDeferredValue)(dataset);
+  const searchList = (0, import_react10.useMemo)(() => {
     return deferredDataset.entries.reduce((acc, [refId, { index }]) => {
       if (index) {
         acc.push(
@@ -1060,10 +1068,10 @@ var Search = import_react9.default.memo(function Search2({ children, dataset, se
       return acc;
     }, []);
   }, [deferredDataset]);
-  const deferredQuery = (0, import_react9.useDeferredValue)(inputValue);
-  const queryText = (0, import_react9.useMemo)(() => deferredQuery ? deferredQuery.trim() : "", [deferredQuery]);
-  const getText = (0, import_react9.useCallback)((item) => [item.name, item.path?.join(" ") ?? ""], []);
-  const mapResultItem = (0, import_react9.useCallback)(
+  const deferredQuery = (0, import_react10.useDeferredValue)(inputValue);
+  const queryText = (0, import_react10.useMemo)(() => deferredQuery ? deferredQuery.trim() : "", [deferredQuery]);
+  const getText = (0, import_react10.useCallback)((item) => [item.name, item.path?.join(" ") ?? ""], []);
+  const mapResultItem = (0, import_react10.useCallback)(
     ({
       item,
       score,
@@ -1075,13 +1083,13 @@ var Search = import_react9.default.memo(function Search2({ children, dataset, se
     }),
     []
   );
-  const fuzzyResults = (0, import_react8.useFuzzySearchList)({
+  const fuzzyResults = (0, import_react9.useFuzzySearchList)({
     list: searchList,
     queryText,
     getText,
     mapResultItem
   });
-  const results = (0, import_react9.useMemo)(() => {
+  const results = (0, import_react10.useMemo)(() => {
     if (!queryText) return [];
     const maxResults = allComponents ? 1e3 : DEFAULT_MAX_SEARCH_RESULTS;
     const processedResults = [];
@@ -1110,8 +1118,8 @@ var Search = import_react9.default.memo(function Search2({ children, dataset, se
     }
     return processedResults;
   }, [queryText, fuzzyResults, allComponents]);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native4.View, { style: flexStyle2, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native4.View, { style: searchFieldWrapperStyle, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(SearchField, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native6.View, { style: flexStyle2, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native6.View, { style: searchFieldWrapperStyle, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(SearchField, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SearchIconWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SearchIcon, {}) }),
       /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         Input,
@@ -1135,7 +1143,7 @@ var Search = import_react9.default.memo(function Search2({ children, dataset, se
         }
       )
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native4.View, { style: flexStyle2, children: children({
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native6.View, { style: flexStyle2, children: children({
       query: queryText,
       results,
       isBrowsing: !isOpen || !inputValue.length,
@@ -1148,15 +1156,13 @@ var Search = import_react9.default.memo(function Search2({ children, dataset, se
 });
 
 // src/SearchResults.tsx
-var import_list2 = require("@legendapp/list");
 var import_react_native_theming6 = require("@storybook/react-native-theming");
 var import_react_native_ui_common4 = require("@storybook/react-native-ui-common");
 var import_polished2 = require("polished");
-var import_react10 = __toESM(require("react"));
-var import_react_native5 = require("react-native");
+var import_react11 = __toESM(require("react"));
+var import_react_native7 = require("react-native");
 var import_react_native_safe_area_context2 = require("react-native-safe-area-context");
 var import_jsx_runtime8 = require("react/jsx-runtime");
-var isWeb = import_react_native5.Platform.OS === "web";
 var noResultsFirstLineStyle = { marginBottom: 4 };
 var flexStyle3 = { flex: 1 };
 var ResultRow = import_react_native_theming6.styled.TouchableOpacity(
@@ -1224,7 +1230,7 @@ var RecentlyOpenedTitle = import_react_native_theming6.styled.View(({ theme }) =
   marginBottom: 4,
   alignItems: "center"
 }));
-var Highlight = import_react10.default.memo(
+var Highlight = import_react11.default.memo(
   function Highlight2({ children, text, ranges }) {
     if (!ranges || ranges.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { children: children ?? text });
     const { nodes: result } = ranges.reduce(
@@ -1259,7 +1265,7 @@ var PathText = import_react_native_theming6.styled.Text(({ theme }) => ({
   fontSize: theme.typography.size.s1 - 1,
   color: theme.textMutedColor
 }));
-var Result = import_react10.default.memo(function Result2({
+var Result = import_react11.default.memo(function Result2({
   item,
   matches,
   icon: _icon,
@@ -1267,7 +1273,7 @@ var Result = import_react10.default.memo(function Result2({
   ...props
 }) {
   const theme = (0, import_react_native_theming6.useTheme)();
-  const press = (0, import_react10.useCallback)(
+  const press = (0, import_react11.useCallback)(
     (event) => {
       event.preventDefault();
       onPress?.(event);
@@ -1299,7 +1305,7 @@ var Result = import_react10.default.memo(function Result2({
 var Text = import_react_native_theming6.styled.Text(({ theme }) => ({
   color: theme.color.defaultText
 }));
-var SearchResults = import_react10.default.memo(function SearchResults2({
+var SearchResults = import_react11.default.memo(function SearchResults2({
   query,
   results,
   closeMenu,
@@ -1308,11 +1314,11 @@ var SearchResults = import_react10.default.memo(function SearchResults2({
   clearLastViewed
 }) {
   const insets = (0, import_react_native_safe_area_context2.useSafeAreaInsets)();
-  const handleClearLastViewed = (0, import_react10.useCallback)(() => {
+  const handleClearLastViewed = (0, import_react11.useCallback)(() => {
     clearLastViewed();
     closeMenu();
   }, [clearLastViewed, closeMenu]);
-  const contentContainerStyle2 = (0, import_react10.useMemo)(
+  const contentContainerStyle2 = (0, import_react11.useMemo)(
     () => ({
       paddingHorizontal: 10,
       paddingTop: 8,
@@ -1320,7 +1326,7 @@ var SearchResults = import_react10.default.memo(function SearchResults2({
     }),
     [insets.bottom]
   );
-  const listData = (0, import_react10.useMemo)(() => {
+  const listData = (0, import_react11.useMemo)(() => {
     const items = [];
     if (results.length > 0 && !query) {
       items.push({ type: "header", clearLastViewed: handleClearLastViewed });
@@ -1337,7 +1343,7 @@ var SearchResults = import_react10.default.memo(function SearchResults2({
     });
     return items;
   }, [results, query, handleClearLastViewed]);
-  const keyExtractor = (0, import_react10.useCallback)((item) => {
+  const keyExtractor = (0, import_react11.useCallback)((item) => {
     switch (item.type) {
       case "header":
         return "header";
@@ -1351,7 +1357,7 @@ var SearchResults = import_react10.default.memo(function SearchResults2({
       }
     }
   }, []);
-  const renderItem = (0, import_react10.useCallback)(
+  const renderItem = (0, import_react11.useCallback)(
     ({ item: listItem }) => {
       switch (listItem.type) {
         case "header":
@@ -1401,11 +1407,8 @@ var SearchResults = import_react10.default.memo(function SearchResults2({
     },
     [getItemProps, highlightedIndex]
   );
-  if (isWeb) {
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native5.View, { style: flexStyle3, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { flex: 1, overflow: "auto", ...contentContainerStyle2 }, children: listData.map((item) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { children: renderItem({ item }) }, keyExtractor(item))) }) });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native5.View, { style: flexStyle3, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-    import_list2.LegendList,
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native7.View, { style: flexStyle3, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    LegendList,
     {
       style: flexStyle3,
       data: listData,
@@ -1437,16 +1440,16 @@ var noneStyle = {
   width: 0,
   opacity: 0
 };
-var Swap = import_react11.default.memo(function Swap2({
+var Swap = import_react12.default.memo(function Swap2({
   children,
   condition
 }) {
-  const [a, b] = import_react11.default.Children.toArray(children);
-  const aStyle = (0, import_react11.useMemo)(() => condition ? flexStyle4 : noneStyle, [condition]);
-  const bStyle = (0, import_react11.useMemo)(() => condition ? noneStyle : flexStyle4, [condition]);
+  const [a, b] = import_react12.default.Children.toArray(children);
+  const aStyle = (0, import_react12.useMemo)(() => condition ? flexStyle4 : noneStyle, [condition]);
+  const bStyle = (0, import_react12.useMemo)(() => condition ? noneStyle : flexStyle4, [condition]);
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-      import_react_native6.View,
+      import_react_native8.View,
       {
         style: aStyle,
         accessibilityElementsHidden: !condition,
@@ -1455,7 +1458,7 @@ var Swap = import_react11.default.memo(function Swap2({
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-      import_react_native6.View,
+      import_react_native8.View,
       {
         style: bStyle,
         accessibilityElementsHidden: condition,
@@ -1466,7 +1469,7 @@ var Swap = import_react11.default.memo(function Swap2({
   ] });
 });
 var useCombination = (index, indexError, previewInitialized, status, refs) => {
-  const hash = (0, import_react11.useMemo)(
+  const hash = (0, import_react12.useMemo)(
     () => ({
       [DEFAULT_REF_ID]: {
         index,
@@ -1481,9 +1484,9 @@ var useCombination = (index, indexError, previewInitialized, status, refs) => {
     }),
     [refs, index, indexError, previewInitialized, status]
   );
-  return (0, import_react11.useMemo)(() => ({ hash, entries: Object.entries(hash) }), [hash]);
+  return (0, import_react12.useMemo)(() => ({ hash, entries: Object.entries(hash) }), [hash]);
 };
-var Sidebar = import_react11.default.memo(function Sidebar2({
+var Sidebar = import_react12.default.memo(function Sidebar2({
   storyId = null,
   refId = DEFAULT_REF_ID,
   index,
@@ -1493,7 +1496,7 @@ var Sidebar = import_react11.default.memo(function Sidebar2({
   refs = {},
   setSelection
 }) {
-  const selected = (0, import_react11.useMemo)(() => storyId && { storyId, refId }, [storyId, refId]);
+  const selected = (0, import_react12.useMemo)(() => storyId && { storyId, refId }, [storyId, refId]);
   const dataset = useCombination(index, indexError, previewInitialized, status, refs);
   const lastViewedProps = (0, import_react_native_ui_common5.useLastViewed)(selected);
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Container, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Top, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Search, { dataset, setSelection, ...lastViewedProps, children: ({ query, results, isBrowsing, closeMenu, getItemProps, highlightedIndex }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Swap, { condition: isBrowsing, children: [
@@ -1526,8 +1529,8 @@ var Sidebar = import_react11.default.memo(function Sidebar2({
 var import_portal2 = require("@gorhom/portal");
 var import_react_native_theming11 = require("@storybook/react-native-theming");
 var import_react_native_ui_common7 = require("@storybook/react-native-ui-common");
-var import_react17 = require("react");
-var import_react_native12 = require("react-native");
+var import_react18 = require("react");
+var import_react_native14 = require("react-native");
 var import_react_native_safe_area_context4 = require("react-native-safe-area-context");
 var import_core_events = require("storybook/internal/core-events");
 var import_manager_api2 = require("storybook/manager-api");
@@ -1535,18 +1538,18 @@ var import_manager_api2 = require("storybook/manager-api");
 // src/MobileAddonsPanel.tsx
 var import_react_native_theming8 = require("@storybook/react-native-theming");
 var import_react_native_ui_common6 = require("@storybook/react-native-ui-common");
-var import_react13 = require("react");
-var import_react_native8 = require("react-native");
+var import_react14 = require("react");
+var import_react_native10 = require("react-native");
 var import_manager_api = require("storybook/manager-api");
 var import_types = require("storybook/internal/types");
 
 // src/useAnimatedValue.ts
-var import_react12 = require("react");
-var import_react_native7 = require("react-native");
+var import_react13 = require("react");
+var import_react_native9 = require("react-native");
 function useAnimatedValue(initialValue, config) {
-  const ref = (0, import_react12.useRef)(null);
+  const ref = (0, import_react13.useRef)(null);
   if (ref.current == null) {
-    ref.current = new import_react_native7.Animated.Value(initialValue, config);
+    ref.current = new import_react_native9.Animated.Value(initialValue, config);
   }
   return ref.current;
 }
@@ -1554,94 +1557,94 @@ function useAnimatedValue(initialValue, config) {
 // src/MobileAddonsPanel.tsx
 var import_react_native_safe_area_context3 = require("react-native-safe-area-context");
 var import_jsx_runtime10 = require("react/jsx-runtime");
-var MobileAddonsPanel = (0, import_react13.forwardRef)(
+var MobileAddonsPanel = (0, import_react14.forwardRef)(
   ({ storyId }, ref) => {
     const theme = (0, import_react_native_theming8.useTheme)();
-    const { height } = (0, import_react_native8.useWindowDimensions)();
+    const { height } = (0, import_react_native10.useWindowDimensions)();
     const panelHeight = useAnimatedValue(0);
     const positionBottomAnimation = useAnimatedValue(height / 2);
-    const [isOpen, setIsOpen] = (0, import_react13.useState)(false);
-    const setMobileMenuOpen = (0, import_react13.useCallback)(
+    const [isOpen, setIsOpen] = (0, import_react14.useState)(false);
+    const setMobileMenuOpen = (0, import_react14.useCallback)(
       (open) => {
         setIsOpen(open);
         if (open) {
-          import_react_native8.Animated.parallel([
-            import_react_native8.Animated.timing(positionBottomAnimation, {
+          import_react_native10.Animated.parallel([
+            import_react_native10.Animated.timing(positionBottomAnimation, {
               toValue: 0,
               // Negative to move up
               duration: 350,
               useNativeDriver: false,
-              easing: import_react_native8.Easing.inOut(import_react_native8.Easing.cubic)
+              easing: import_react_native10.Easing.inOut(import_react_native10.Easing.cubic)
             }),
-            import_react_native8.Animated.timing(panelHeight, {
+            import_react_native10.Animated.timing(panelHeight, {
               toValue: height / 2,
               duration: 350,
               useNativeDriver: false,
-              easing: import_react_native8.Easing.inOut(import_react_native8.Easing.cubic)
+              easing: import_react_native10.Easing.inOut(import_react_native10.Easing.cubic)
             })
           ]).start();
         } else {
-          import_react_native8.Animated.parallel([
-            import_react_native8.Animated.timing(positionBottomAnimation, {
+          import_react_native10.Animated.parallel([
+            import_react_native10.Animated.timing(positionBottomAnimation, {
               toValue: height / 2,
               duration: 350,
               useNativeDriver: false,
-              easing: import_react_native8.Easing.inOut(import_react_native8.Easing.cubic)
+              easing: import_react_native10.Easing.inOut(import_react_native10.Easing.cubic)
             }),
-            import_react_native8.Animated.timing(panelHeight, {
+            import_react_native10.Animated.timing(panelHeight, {
               toValue: 0,
               duration: 350,
               useNativeDriver: false,
-              easing: import_react_native8.Easing.inOut(import_react_native8.Easing.cubic)
+              easing: import_react_native10.Easing.inOut(import_react_native10.Easing.cubic)
             })
           ]).start();
         }
       },
       [height, positionBottomAnimation, panelHeight]
     );
-    (0, import_react13.useEffect)(() => {
+    (0, import_react14.useEffect)(() => {
       const handleKeyboardShow = ({ endCoordinates, duration, easing }) => {
         if (isOpen) {
-          import_react_native8.Animated.parallel([
-            import_react_native8.Animated.timing(panelHeight, {
+          import_react_native10.Animated.parallel([
+            import_react_native10.Animated.timing(panelHeight, {
               toValue: (height - endCoordinates.height) / 2,
               duration,
               useNativeDriver: false,
-              easing: import_react_native8.Easing[easing] || import_react_native8.Easing.out(import_react_native8.Easing.ease)
+              easing: import_react_native10.Easing[easing] || import_react_native10.Easing.out(import_react_native10.Easing.ease)
             }),
-            import_react_native8.Animated.timing(positionBottomAnimation, {
+            import_react_native10.Animated.timing(positionBottomAnimation, {
               toValue: -endCoordinates.height,
               // Negative to move up
               duration,
               useNativeDriver: false,
-              easing: import_react_native8.Easing[easing] || import_react_native8.Easing.out(import_react_native8.Easing.ease)
+              easing: import_react_native10.Easing[easing] || import_react_native10.Easing.out(import_react_native10.Easing.ease)
             })
           ]).start();
         }
       };
       const handleKeyboardHide = ({ duration, easing }) => {
         if (isOpen) {
-          import_react_native8.Animated.parallel([
-            import_react_native8.Animated.timing(positionBottomAnimation, {
+          import_react_native10.Animated.parallel([
+            import_react_native10.Animated.timing(positionBottomAnimation, {
               toValue: 0,
               // Back to original position
               duration,
               useNativeDriver: false,
-              easing: import_react_native8.Easing[easing] || import_react_native8.Easing.out(import_react_native8.Easing.ease)
+              easing: import_react_native10.Easing[easing] || import_react_native10.Easing.out(import_react_native10.Easing.ease)
             }),
-            import_react_native8.Animated.timing(panelHeight, {
+            import_react_native10.Animated.timing(panelHeight, {
               toValue: height / 2,
               duration,
               useNativeDriver: false,
-              easing: import_react_native8.Easing[easing] || import_react_native8.Easing.out(import_react_native8.Easing.ease)
+              easing: import_react_native10.Easing[easing] || import_react_native10.Easing.out(import_react_native10.Easing.ease)
             })
           ]).start();
         }
       };
-      const showSubscription = import_react_native8.Keyboard.addListener("keyboardDidShow", handleKeyboardShow);
-      const willShowSubscription = import_react_native8.Keyboard.addListener("keyboardWillShow", handleKeyboardShow);
-      const hideSubscription = import_react_native8.Keyboard.addListener("keyboardWillHide", handleKeyboardHide);
-      const didHideSubscription = import_react_native8.Keyboard.addListener("keyboardDidHide", handleKeyboardHide);
+      const showSubscription = import_react_native10.Keyboard.addListener("keyboardDidShow", handleKeyboardShow);
+      const willShowSubscription = import_react_native10.Keyboard.addListener("keyboardWillShow", handleKeyboardShow);
+      const hideSubscription = import_react_native10.Keyboard.addListener("keyboardWillHide", handleKeyboardHide);
+      const didHideSubscription = import_react_native10.Keyboard.addListener("keyboardDidHide", handleKeyboardHide);
       return () => {
         showSubscription.remove();
         willShowSubscription.remove();
@@ -1649,7 +1652,7 @@ var MobileAddonsPanel = (0, import_react13.forwardRef)(
         didHideSubscription.remove();
       };
     }, [height, panelHeight, positionBottomAnimation, isOpen]);
-    (0, import_react13.useImperativeHandle)(ref, () => ({
+    (0, import_react14.useImperativeHandle)(ref, () => ({
       setAddonsPanelOpen: (open) => {
         if (open) {
           setMobileMenuOpen(true);
@@ -1659,7 +1662,7 @@ var MobileAddonsPanel = (0, import_react13.forwardRef)(
       }
     }));
     return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      import_react_native8.Animated.View,
+      import_react_native10.Animated.View,
       {
         style: {
           position: "absolute",
@@ -1673,14 +1676,14 @@ var MobileAddonsPanel = (0, import_react13.forwardRef)(
         accessibilityElementsHidden: !isOpen,
         importantForAccessibility: isOpen ? "auto" : "no-hide-descendants",
         children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-          import_react_native8.View,
+          import_react_native10.View,
           {
             style: {
               flex: 1,
               justifyContent: "flex-end"
             },
             children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-              import_react_native8.View,
+              import_react_native10.View,
               {
                 style: {
                   height: "100%",
@@ -1688,14 +1691,14 @@ var MobileAddonsPanel = (0, import_react13.forwardRef)(
                   paddingTop: 10,
                   borderTopColor: theme.appBorderColor,
                   borderTopWidth: 1,
-                  paddingBottom: import_react_native8.Platform.OS === "android" ? 16 : 0
+                  paddingBottom: import_react_native10.Platform.OS === "android" ? 16 : 0
                 },
                 children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                   AddonsTabs,
                   {
                     onClose: () => {
                       setMobileMenuOpen(false);
-                      import_react_native8.Keyboard.dismiss();
+                      import_react_native10.Keyboard.dismiss();
                     },
                     storyId
                   }
@@ -1733,30 +1736,25 @@ var centeredStyle = {
   alignItems: "center",
   justifyContent: "center"
 };
+var hiddenStyle = {
+  display: "none"
+};
 var hitSlop = { top: 10, right: 10, bottom: 10, left: 10 };
 var AddonsTabs = ({ onClose, storyId }) => {
   const panels = import_manager_api.addons.getElements(import_types.Addon_TypesEnum.PANEL);
   const insets = (0, import_react_native_safe_area_context3.useSafeAreaInsets)();
-  const [addonSelected, setAddonSelected] = (0, import_react13.useState)(Object.keys(panels)[0]);
-  const panel = (0, import_react13.useMemo)(() => {
-    if (!storyId) {
-      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native8.View, { style: centeredStyle, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native8.Text, { children: "No Story Selected" }) });
-    }
-    if (Object.keys(panels).length === 0) {
-      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native8.View, { style: centeredStyle, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native8.Text, { children: "No addons loaded." }) });
-    }
-    return panels[addonSelected].render({ active: true });
-  }, [addonSelected, panels, storyId]);
+  const [addonSelected, setAddonSelected] = (0, import_react14.useState)(Object.keys(panels)[0]);
+  const panelEntries = (0, import_react14.useMemo)(() => Object.entries(panels), [panels]);
   const scrollContentContainerStyle = (0, import_react_native_ui_common6.useStyle)(
     () => ({
       paddingBottom: insets.bottom + 16
     }),
     [insets]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native8.View, { style: addonsTabsContainerStyle, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native8.View, { style: addonsTabsStyle, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native10.View, { style: addonsTabsContainerStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native10.View, { style: addonsTabsStyle, children: [
       /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-        import_react_native8.ScrollView,
+        import_react_native10.ScrollView,
         {
           horizontal: true,
           showsHorizontalScrollIndicator: false,
@@ -1769,7 +1767,7 @@ var AddonsTabs = ({ onClose, storyId }) => {
               {
                 active: id === addonSelected,
                 onPress: () => setAddonSelected(id),
-                text: resolvedTitle
+                text: String(resolvedTitle)
               },
               id
             );
@@ -1788,16 +1786,19 @@ var AddonsTabs = ({ onClose, storyId }) => {
       )
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      import_react_native8.ScrollView,
+      import_react_native10.ScrollView,
       {
         style: addonsScrollStyle,
         contentContainerStyle: scrollContentContainerStyle,
-        children: panel
+        children: !storyId ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native10.View, { style: centeredStyle, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native10.Text, { children: "No Story Selected" }) }) : panelEntries.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native10.View, { style: centeredStyle, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native10.Text, { children: "No addons loaded." }) }) : panelEntries.map(([id, p]) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native10.View, { style: id === addonSelected ? void 0 : hiddenStyle, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(PanelRenderer, { panel: p }) }, id))
       },
       `addons-scroll-${storyId}`
     )
   ] });
 };
+var PanelRenderer = ({ panel }) => {
+  return panel.render({ active: true });
+};
 var Tab = ({ active, onPress, text }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     TabButton,
@@ -1829,8 +1830,8 @@ var TabText = import_react_native_theming8.styled.Text(({ theme, active }) => ({
 // src/MobileMenuDrawer.tsx
 var import_portal = require("@gorhom/portal");
 var import_react_native_theming9 = require("@storybook/react-native-theming");
-var import_react14 = require("react");
-var import_react_native9 = require("react-native");
+var import_react15 = require("react");
+var import_react_native11 = require("react-native");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var flexStyle5 = { flex: 1 };
 var portalContainerStyle = {
@@ -1843,48 +1844,48 @@ var portalContainerStyle = {
   zIndex: 1e3
 };
 var useAnimatedModalHeight = () => {
-  const { height } = (0, import_react_native9.useWindowDimensions)();
+  const { height } = (0, import_react_native11.useWindowDimensions)();
   const animatedHeight = useAnimatedValue(0.65 * height);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     const modalHeight = 0.65 * height;
     const maxModalHeight = 0.85 * height;
-    const expand = (duration = 250) => import_react_native9.Animated.timing(animatedHeight, {
+    const expand = (duration = 250) => import_react_native11.Animated.timing(animatedHeight, {
       toValue: maxModalHeight,
       duration,
-      easing: import_react_native9.Easing.out(import_react_native9.Easing.quad),
+      easing: import_react_native11.Easing.out(import_react_native11.Easing.quad),
       useNativeDriver: false
     }).start();
-    const collapse = (duration = 250) => import_react_native9.Animated.timing(animatedHeight, {
+    const collapse = (duration = 250) => import_react_native11.Animated.timing(animatedHeight, {
       toValue: modalHeight,
       duration,
-      easing: import_react_native9.Easing.out(import_react_native9.Easing.quad),
+      easing: import_react_native11.Easing.out(import_react_native11.Easing.quad),
       useNativeDriver: false
     }).start();
     const handleKeyboardWillShow = (e) => {
-      if (import_react_native9.Platform.OS === "ios") {
+      if (import_react_native11.Platform.OS === "ios") {
         expand(e.duration);
       }
     };
     const handleKeyboardDidShow = (e) => {
-      if (import_react_native9.Platform.OS === "android") {
+      if (import_react_native11.Platform.OS === "android") {
         expand();
       }
     };
     const handleKeyboardWillHide = (e) => {
-      if (import_react_native9.Platform.OS === "ios") {
+      if (import_react_native11.Platform.OS === "ios") {
         collapse(e.duration);
       }
     };
     const handleKeyboardDidHide = (e) => {
-      if (import_react_native9.Platform.OS === "android") {
+      if (import_react_native11.Platform.OS === "android") {
         collapse();
       }
     };
     const subscriptions = [
-      import_react_native9.Keyboard.addListener("keyboardWillShow", handleKeyboardWillShow),
-      import_react_native9.Keyboard.addListener("keyboardDidShow", handleKeyboardDidShow),
-      import_react_native9.Keyboard.addListener("keyboardWillHide", handleKeyboardWillHide),
-      import_react_native9.Keyboard.addListener("keyboardDidHide", handleKeyboardDidHide)
+      import_react_native11.Keyboard.addListener("keyboardWillShow", handleKeyboardWillShow),
+      import_react_native11.Keyboard.addListener("keyboardDidShow", handleKeyboardDidShow),
+      import_react_native11.Keyboard.addListener("keyboardWillHide", handleKeyboardWillHide),
+      import_react_native11.Keyboard.addListener("keyboardDidHide", handleKeyboardDidHide)
     ];
     return () => {
       subscriptions.forEach((subscription) => subscription.remove());
@@ -1892,25 +1893,25 @@ var useAnimatedModalHeight = () => {
   }, [animatedHeight, height]);
   return animatedHeight;
 };
-var MobileMenuDrawer = (0, import_react14.memo)(
-  (0, import_react14.forwardRef)(
+var MobileMenuDrawer = (0, import_react15.memo)(
+  (0, import_react15.forwardRef)(
     ({ children, onVisibilityChange }, ref) => {
-      const [isVisible, setIsVisible] = (0, import_react14.useState)(false);
+      const [isVisible, setIsVisible] = (0, import_react15.useState)(false);
       const { scrollCallback } = useSelectedNode();
       const theme = (0, import_react_native_theming9.useTheme)();
-      const { height } = (0, import_react_native9.useWindowDimensions)();
+      const { height } = (0, import_react_native11.useWindowDimensions)();
       const animatedHeight = useAnimatedModalHeight();
       const slideAnim = useAnimatedValue(height);
       const dragY = useAnimatedValue(0);
-      const openDrawer = (0, import_react14.useCallback)(() => {
+      const openDrawer = (0, import_react15.useCallback)(() => {
         dragY.setValue(0);
         slideAnim.setValue(height);
         setIsVisible(true);
         onVisibilityChange?.(true);
-        import_react_native9.Animated.timing(slideAnim, {
+        import_react_native11.Animated.timing(slideAnim, {
           toValue: 0,
           duration: 300,
-          easing: import_react_native9.Easing.out(import_react_native9.Easing.quad),
+          easing: import_react_native11.Easing.out(import_react_native11.Easing.quad),
           useNativeDriver: true
         }).start(({ finished }) => {
           if (finished) {
@@ -1918,13 +1919,13 @@ var MobileMenuDrawer = (0, import_react14.memo)(
           }
         });
       }, [dragY, height, onVisibilityChange, scrollCallback, slideAnim]);
-      const closeDrawer = (0, import_react14.useCallback)(() => {
-        import_react_native9.Keyboard.dismiss();
+      const closeDrawer = (0, import_react15.useCallback)(() => {
+        import_react_native11.Keyboard.dismiss();
         onVisibilityChange?.(false);
-        import_react_native9.Animated.timing(slideAnim, {
+        import_react_native11.Animated.timing(slideAnim, {
           toValue: height,
           duration: 300,
-          easing: import_react_native9.Easing.in(import_react_native9.Easing.quad),
+          easing: import_react_native11.Easing.in(import_react_native11.Easing.quad),
           useNativeDriver: true
         }).start(({ finished }) => {
           if (finished) {
@@ -1932,8 +1933,8 @@ var MobileMenuDrawer = (0, import_react14.memo)(
           }
         });
       }, [height, onVisibilityChange, slideAnim]);
-      const panResponder = (0, import_react14.useMemo)(
-        () => import_react_native9.PanResponder.create({
+      const panResponder = (0, import_react15.useMemo)(
+        () => import_react_native11.PanResponder.create({
           onStartShouldSetPanResponder: () => true,
           onMoveShouldSetPanResponder: (_, gestureState) => {
             return gestureState.dy > 0;
@@ -1947,10 +1948,10 @@ var MobileMenuDrawer = (0, import_react14.memo)(
             if (gestureState.dy > 50) {
               closeDrawer();
             } else {
-              import_react_native9.Animated.timing(dragY, {
+              import_react_native11.Animated.timing(dragY, {
                 toValue: 0,
                 duration: 300,
-                easing: import_react_native9.Easing.out(import_react_native9.Easing.quad),
+                easing: import_react_native11.Easing.out(import_react_native11.Easing.quad),
                 useNativeDriver: true
               }).start();
             }
@@ -1958,7 +1959,7 @@ var MobileMenuDrawer = (0, import_react14.memo)(
         }),
         [closeDrawer, dragY]
       );
-      (0, import_react14.useImperativeHandle)(ref, () => ({
+      (0, import_react15.useImperativeHandle)(ref, () => ({
         setMobileMenuOpen: (open) => {
           if (open) {
             openDrawer();
@@ -1967,7 +1968,7 @@ var MobileMenuDrawer = (0, import_react14.memo)(
           }
         }
       }));
-      const handleStyle = (0, import_react14.useMemo)(
+      const handleStyle = (0, import_react15.useMemo)(
         () => ({
           width: 40,
           height: 5,
@@ -1977,7 +1978,7 @@ var MobileMenuDrawer = (0, import_react14.memo)(
         }),
         [theme.color.mediumdark]
       );
-      const drawerContainerStyle = (0, import_react14.useMemo)(
+      const drawerContainerStyle = (0, import_react15.useMemo)(
         () => ({
           flex: 1,
           borderTopColor: theme.appBorderColor,
@@ -1989,7 +1990,7 @@ var MobileMenuDrawer = (0, import_react14.memo)(
         }),
         [theme.appBorderColor, theme.background.content, theme.color.border]
       );
-      const dragHandleWrapperStyle = (0, import_react14.useMemo)(
+      const dragHandleWrapperStyle = (0, import_react15.useMemo)(
         () => ({
           alignItems: "center",
           justifyContent: "center",
@@ -1999,7 +2000,7 @@ var MobileMenuDrawer = (0, import_react14.memo)(
         }),
         [theme.background.content]
       );
-      const childrenWrapperStyle = (0, import_react14.useMemo)(
+      const childrenWrapperStyle = (0, import_react15.useMemo)(
         () => ({
           flex: 1,
           backgroundColor: theme.background.content
@@ -2007,7 +2008,7 @@ var MobileMenuDrawer = (0, import_react14.memo)(
         [theme.background.content]
       );
       return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_portal.Portal, { hostName: "storybook-lite-ui-root", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
-        import_react_native9.Animated.View,
+        import_react_native11.Animated.View,
         {
           style: [portalContainerStyle, { transform: [{ translateY: slideAnim }] }],
           pointerEvents: isVisible ? "auto" : "none",
@@ -2015,8 +2016,8 @@ var MobileMenuDrawer = (0, import_react14.memo)(
           importantForAccessibility: isVisible ? "auto" : "no-hide-descendants",
           accessibilityViewIsModal: isVisible,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native9.View, { style: flexStyle5, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-              import_react_native9.Pressable,
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native11.View, { style: flexStyle5, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              import_react_native11.Pressable,
               {
                 style: flexStyle5,
                 onPress: closeDrawer,
@@ -2025,14 +2026,14 @@ var MobileMenuDrawer = (0, import_react14.memo)(
               }
             ) }),
             /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-              import_react_native9.Animated.View,
+              import_react_native11.Animated.View,
               {
                 style: {
                   height: animatedHeight
                 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native9.Animated.View, { style: [drawerContainerStyle, { transform: [{ translateY: dragY }] }], children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native9.View, { ...panResponder.panHandlers, style: dragHandleWrapperStyle, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native9.View, { style: handleStyle }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native9.View, { style: childrenWrapperStyle, children })
+                children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native11.Animated.View, { style: [drawerContainerStyle, { transform: [{ translateY: dragY }] }], children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native11.View, { ...panResponder.panHandlers, style: dragHandleWrapperStyle, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native11.View, { style: handleStyle }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native11.View, { style: childrenWrapperStyle, children })
                 ] })
               }
             )
@@ -2045,21 +2046,21 @@ var MobileMenuDrawer = (0, import_react14.memo)(
 
 // src/ResizeHandle.tsx
 var import_react_native_theming10 = require("@storybook/react-native-theming");
-var import_react15 = require("react");
-var import_react_native10 = require("react-native");
+var import_react16 = require("react");
+var import_react_native12 = require("react-native");
 var import_jsx_runtime12 = require("react/jsx-runtime");
-var ResizeHandle = (0, import_react15.memo)(function ResizeHandle2({
+var ResizeHandle = (0, import_react16.memo)(function ResizeHandle2({
   direction,
   onResize,
   onResizeStart,
   onResizeEnd
 }) {
   const theme = (0, import_react_native_theming10.useTheme)();
-  const [active, setActive] = (0, import_react15.useState)(false);
-  const startValueRef = (0, import_react15.useRef)(0);
+  const [active, setActive] = (0, import_react16.useState)(false);
+  const startValueRef = (0, import_react16.useRef)(0);
   const isHorizontal = direction === "horizontal";
-  const panResponder = (0, import_react15.useMemo)(
-    () => import_react_native10.PanResponder.create({
+  const panResponder = (0, import_react16.useMemo)(
+    () => import_react_native12.PanResponder.create({
       onStartShouldSetPanResponder: () => true,
       onMoveShouldSetPanResponder: () => true,
       onPanResponderTerminationRequest: () => false,
@@ -2086,7 +2087,7 @@ var ResizeHandle = (0, import_react15.memo)(function ResizeHandle2({
     }),
     [isHorizontal, onResize, onResizeStart, onResizeEnd]
   );
-  const style = (0, import_react15.useMemo)(() => {
+  const style = (0, import_react16.useMemo)(() => {
     const borderColor = active ? theme.barSelectedColor : theme.appBorderColor;
     if (isHorizontal) {
       return {
@@ -2111,22 +2112,22 @@ var ResizeHandle = (0, import_react15.memo)(function ResizeHandle2({
       cursor: "row-resize"
     };
   }, [active, isHorizontal, theme.appBorderColor, theme.barSelectedColor]);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native10.View, { ...panResponder.panHandlers, style });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native12.View, { ...panResponder.panHandlers, style });
 });
 
 // src/StorybookLogo.tsx
-var import_react16 = require("react");
-var import_react_native11 = require("react-native");
+var import_react17 = require("react");
+var import_react_native13 = require("react-native");
 var import_jsx_runtime13 = require("react/jsx-runtime");
 var WIDTH = 125;
 var HEIGHT = 25;
 var NoBrandLogo = ({ theme }) => theme.base === "light" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Logo, { height: HEIGHT, width: WIDTH }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DarkLogo, { height: HEIGHT, width: WIDTH });
 function isElement(value) {
-  return (0, import_react16.isValidElement)(value);
+  return (0, import_react17.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_react16.useEffect)(() => {
+  (0, import_react17.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}}"
@@ -2140,7 +2141,7 @@ var BrandLogo = ({ theme }) => {
     return theme.brand.image;
   }
   const image = /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-    import_react_native11.Image,
+    import_react_native13.Image,
     {
       source: theme.brand.image,
       resizeMode: theme.brand.resizeMode ?? "contain",
@@ -2149,10 +2150,10 @@ var BrandLogo = ({ theme }) => {
   );
   if (theme.brand.url) {
     return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-      import_react_native11.TouchableOpacity,
+      import_react_native13.TouchableOpacity,
       {
         onPress: () => {
-          if (theme.brand.url) import_react_native11.Linking.openURL(theme.brand.url);
+          if (theme.brand.url) import_react_native13.Linking.openURL(theme.brand.url);
         },
         accessibilityRole: "link",
         accessibilityLabel: theme.brand.title ?? "Brand logo",
@@ -2164,7 +2165,7 @@ var BrandLogo = ({ theme }) => {
   }
 };
 var BrandTitle = ({ theme }) => {
-  const brandTitleStyle = (0, import_react16.useMemo)(() => {
+  const brandTitleStyle = (0, import_react17.useMemo)(() => {
     return {
       width: WIDTH,
       height: HEIGHT,
@@ -2172,13 +2173,13 @@ var BrandTitle = ({ theme }) => {
       fontSize: theme.typography.size.m1
     };
   }, [theme]);
-  const title = /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native11.Text, { style: brandTitleStyle, numberOfLines: 1, ellipsizeMode: "tail", children: theme.brand.title });
+  const title = /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native13.Text, { style: brandTitleStyle, numberOfLines: 1, ellipsizeMode: "tail", children: theme.brand.title });
   if (theme.brand.url) {
     return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-      import_react_native11.TouchableOpacity,
+      import_react_native13.TouchableOpacity,
       {
         onPress: () => {
-          if (theme.brand.url) import_react_native11.Linking.openURL(theme.brand.url);
+          if (theme.brand.url) import_react_native13.Linking.openURL(theme.brand.url);
         },
         accessibilityRole: "link",
         accessibilityLabel: theme.brand.title,
@@ -2190,8 +2191,8 @@ var BrandTitle = ({ theme }) => {
   }
 };
 var StorybookLogo = ({ theme }) => {
-  const image = (0, import_react16.useMemo)(() => theme.brand?.image, [theme.brand?.image]);
-  const title = (0, import_react16.useMemo)(() => theme.brand?.title, [theme.brand?.title]);
+  const image = (0, import_react17.useMemo)(() => theme.brand?.image, [theme.brand?.image]);
+  const title = (0, import_react17.useMemo)(() => theme.brand?.title, [theme.brand?.title]);
   if (image) {
     return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(BrandLogo, { theme });
   } else if (title) {
@@ -2265,24 +2266,24 @@ var Layout = ({
     "desktopAddonsPanelHeight",
     300
   );
-  const { width: windowWidth, height: windowHeight } = (0, import_react_native12.useWindowDimensions)();
-  const handleSidebarResize = (0, import_react17.useCallback)(
+  const { width: windowWidth, height: windowHeight } = (0, import_react_native14.useWindowDimensions)();
+  const handleSidebarResize = (0, import_react18.useCallback)(
     (delta) => {
       setSidebarWidth((prev) => Math.min(Math.max(prev + delta, 180), windowWidth * 0.5));
     },
     [setSidebarWidth, windowWidth]
   );
-  const handleAddonsPanelResize = (0, import_react17.useCallback)(
+  const handleAddonsPanelResize = (0, import_react18.useCallback)(
     (delta) => {
       setAddonsPanelHeight((prev) => Math.min(Math.max(prev - delta, 100), windowHeight * 0.6));
     },
     [setAddonsPanelHeight, windowHeight]
   );
-  const [isResizing, setIsResizing] = (0, import_react17.useState)(false);
-  const onResizeStart = (0, import_react17.useCallback)(() => setIsResizing(true), []);
-  const onResizeEnd = (0, import_react17.useCallback)(() => setIsResizing(false), []);
-  const [uiHidden, setUiHidden] = (0, import_react17.useState)(false);
-  (0, import_react17.useLayoutEffect)(() => {
+  const [isResizing, setIsResizing] = (0, import_react18.useState)(false);
+  const onResizeStart = (0, import_react18.useCallback)(() => setIsResizing(true), []);
+  const onResizeEnd = (0, import_react18.useCallback)(() => setIsResizing(false), []);
+  const [uiHidden, setUiHidden] = (0, import_react18.useState)(false);
+  (0, import_react18.useLayoutEffect)(() => {
     setUiHidden(story?.parameters?.storybookUIVisibility === "hidden");
   }, [story?.parameters?.storybookUIVisibility]);
   const desktopSidebarStyle = (0, import_react_native_ui_common7.useStyle)(
@@ -2352,23 +2353,23 @@ var Layout = ({
     }),
     [theme.barTextColor]
   );
-  const mobileMenuDrawerRef = (0, import_react17.useRef)(null);
-  const addonPanelRef = (0, import_react17.useRef)(null);
-  const [isDrawerOpen, setIsDrawerOpen] = (0, import_react17.useState)(false);
-  const setSelection = (0, import_react17.useCallback)(({ storyId: newStoryId }) => {
+  const mobileMenuDrawerRef = (0, import_react18.useRef)(null);
+  const addonPanelRef = (0, import_react18.useRef)(null);
+  const [isDrawerOpen, setIsDrawerOpen] = (0, import_react18.useState)(false);
+  const setSelection = (0, import_react18.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_runtime14.jsxs)(
-    import_react_native12.View,
+    import_react_native14.View,
     {
       style: containerStyle2,
       accessibilityElementsHidden: isDrawerOpen,
       importantForAccessibility: isDrawerOpen ? "no-hide-descendants" : "auto",
       children: [
         isDesktop ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native12.View, { style: desktopSidebarStyle, pointerEvents: isResizing ? "none" : "auto", children: desktopSidebarOpen ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react_native12.View, { style: desktopLogoContainer, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native14.View, { style: desktopSidebarStyle, pointerEvents: isResizing ? "none" : "auto", children: desktopSidebarOpen ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react_native14.View, { style: desktopLogoContainer, children: [
               /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(StorybookLogo, { theme }),
               /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
                 import_react_native_ui_common7.IconButton,
@@ -2379,7 +2380,7 @@ var Layout = ({
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native12.View, { style: flexStyle6, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native14.View, { style: flexStyle6, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
               Sidebar,
               {
                 previewInitialized: true,
@@ -2410,9 +2411,9 @@ var Layout = ({
             }
           ) : null
         ] }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react_native12.View, { style: mobileContentStyle, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react_native14.View, { style: mobileContentStyle, children: [
           /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-            import_react_native12.View,
+            import_react_native14.View,
             {
               style: isDesktop ? storyContentStyle : contentContainerStyle,
               pointerEvents: isResizing ? "none" : "auto",
@@ -2420,7 +2421,7 @@ var Layout = ({
             }
           ),
           story?.parameters?.hideFullScreenButton || isDesktop ? null : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-            import_react_native12.TouchableOpacity,
+            import_react_native14.TouchableOpacity,
             {
               style: fullScreenButtonStyle,
               hitSlop: { top: 10, bottom: 10, left: 10, right: 10 },
@@ -2440,7 +2441,7 @@ var Layout = ({
                 onResizeEnd
               }
             ) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native12.View, { style: desktopAddonsPanelStyle, pointerEvents: isResizing ? "none" : "auto", children: desktopAddonsPanelOpen ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(AddonsTabs, { storyId: story?.id, onClose: () => setDesktopAddonsPanelOpen(false) }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native14.View, { style: desktopAddonsPanelStyle, pointerEvents: isResizing ? "none" : "auto", children: desktopAddonsPanelOpen ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(AddonsTabs, { storyId: story?.id, onClose: () => setDesktopAddonsPanelOpen(false) }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
               import_react_native_ui_common7.IconButton,
               {
                 style: iconFloatRightStyle,
@@ -2463,7 +2464,7 @@ var Layout = ({
               accessibilityLabel: "Open story list",
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MenuIcon, { color: theme.color.mediumdark }),
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react_native12.Text, { style: navButtonTextStyle, numberOfLines: 1, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react_native14.Text, { style: navButtonTextStyle, numberOfLines: 1, children: [
                   story?.title,
                   "/",
                   story?.name
@@ -2483,7 +2484,7 @@ var Layout = ({
           )
         ] }) }) : null,
         isDesktop ? null : /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(MobileMenuDrawer, { ref: mobileMenuDrawerRef, onVisibilityChange: setIsDrawerOpen, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native12.View, { style: mobileMenuDrawerContentStyle, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(StorybookLogo, { theme }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native14.View, { style: mobileMenuDrawerContentStyle, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(StorybookLogo, { theme }) }),
           /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             Sidebar,
             {