@storybook/react-native-ui 9.0.0-alpha.8 → 9.0.0-beta.10

package/dist/index.js

@@ -3018,9 +3018,8 @@ function CollapseSVG(props) {
 }
 
 // src/TreeNode.tsx
-var import_react = require("react");
+var import_react = __toESM(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",
@@ -3082,7 +3081,7 @@ var Wrapper = import_react_native_theming2.styled.View({
   gap: 6,
   marginTop: 2
 });
-var GroupNode = import_react2.default.memo(function GroupNode2({
+var GroupNode = import_react.default.memo(function GroupNode2({
   children,
   isExpanded = false,
   isExpandable = false,
@@ -3100,7 +3099,7 @@ var GroupNode = import_react2.default.memo(function GroupNode2({
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(BranchNodeText, { children })
   ] });
 });
-var ComponentNode = import_react2.default.memo(
+var ComponentNode = import_react.default.memo(
   function ComponentNode2({ children, isExpanded, isExpandable, ...props }) {
     const theme = (0, import_react_native_theming2.useTheme)();
     const color = (0, import_react.useMemo)(() => {
@@ -3115,7 +3114,7 @@ var ComponentNode = import_react2.default.memo(
     ] });
   }
 );
-var StoryNode = import_react2.default.memo(
+var StoryNode = import_react.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)(() => {
@@ -3131,13 +3130,13 @@ StoryNode.displayName = "StoryNode";
 
 // src/Tree.tsx
 var import_react_native_theming6 = require("@storybook/react-native-theming");
-var import_react9 = __toESM(require("react"));
+var import_react8 = __toESM(require("react"));
 
 // src/Button.tsx
 var import_react_native_theming3 = require("@storybook/react-native-theming");
-var import_react3 = require("react");
+var import_react2 = require("react");
 var import_jsx_runtime6 = require("react/jsx-runtime");
-var Button = (0, import_react3.forwardRef)(
+var Button = (0, import_react2.forwardRef)(
   ({
     Icon,
     animation = "none",
@@ -3151,7 +3150,7 @@ var Button = (0, import_react3.forwardRef)(
     text,
     ...props
   }, ref) => {
-    const [isAnimating, setIsAnimating] = (0, import_react3.useState)(false);
+    const [isAnimating, setIsAnimating] = (0, import_react2.useState)(false);
     const handleClick = (event) => {
       if (onPress)
         onPress(event);
@@ -3159,7 +3158,7 @@ var Button = (0, import_react3.forwardRef)(
         return;
       setIsAnimating(true);
     };
-    (0, import_react3.useEffect)(() => {
+    (0, import_react2.useEffect)(() => {
       const timer = setTimeout(() => {
         if (isAnimating)
           setIsAnimating(false);
@@ -3257,7 +3256,7 @@ var ButtonIcon = ({
   variant
 }) => {
   const theme = (0, import_react_native_theming3.useTheme)();
-  const color = (0, import_react3.useMemo)(() => {
+  const color = (0, import_react2.useMemo)(() => {
     if (variant === "solid")
       return theme.color.lightest;
     if (variant === "outline")
@@ -3279,9 +3278,9 @@ var ButtonIcon = ({
 };
 
 // src/IconButton.tsx
-var import_react4 = require("react");
+var import_react3 = require("react");
 var import_jsx_runtime7 = require("react/jsx-runtime");
-var IconButton = (0, import_react4.forwardRef)(
+var IconButton = (0, import_react3.forwardRef)(
   ({ padding = "small", variant = "ghost", ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Button, { padding, variant, ref, ...props });
   }
@@ -3291,7 +3290,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_react5 = require("react");
+var import_react4 = require("react");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var CollapseAllIcon = ({
   color,
@@ -3301,7 +3300,7 @@ var CollapseAllIcon = ({
   ...props
 }) => {
   const theme = (0, import_react_native_theming4.useTheme)();
-  const fillColor = (0, import_react5.useMemo)(() => {
+  const fillColor = (0, import_react4.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)(
@@ -3316,7 +3315,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_react6 = require("react");
+var import_react5 = require("react");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var ExpandAllIcon = ({
   color,
@@ -3326,7 +3325,7 @@ var ExpandAllIcon = ({
   ...props
 }) => {
   const theme = (0, import_react_native_theming5.useTheme)();
-  const fillColor = (0, import_react6.useMemo)(() => {
+  const fillColor = (0, import_react5.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)(
@@ -3339,7 +3338,7 @@ var ExpandAllIcon = ({
 };
 
 // src/hooks/useExpanded.ts
-var import_react7 = require("react");
+var import_react6 = require("react");
 
 // src/util/tree.ts
 var import_memoizerific = __toESM(require("memoizerific"));
@@ -3363,19 +3362,17 @@ var getParents = (0, import_memoizerific.default)(1e3)((id, dataset) => {
 var getAncestorIds = (0, import_memoizerific.default)(1e3)(
   (data, id) => getParents(id, data).map((item) => item.id)
 );
-var getDescendantIds = (0, import_memoizerific.default)(1e3)(
-  (data, id, skipLeafs) => {
-    const entry = data[id];
-    const children = entry.type === "story" || entry.type === "docs" ? [] : entry.children;
-    return children.reduce((acc, childId) => {
-      const child = data[childId];
-      if (!child || skipLeafs && (child.type === "story" || child.type === "docs"))
-        return acc;
-      acc.push(childId, ...getDescendantIds(data, childId, skipLeafs));
+var getDescendantIds = (0, import_memoizerific.default)(1e3)((data, id, skipLeafs) => {
+  const entry = data[id];
+  const children = entry.type === "story" || entry.type === "docs" ? [] : entry.children;
+  return children.reduce((acc, childId) => {
+    const child = data[childId];
+    if (!child || skipLeafs && (child.type === "story" || child.type === "docs"))
       return acc;
-    }, []);
-  }
-);
+    acc.push(childId, ...getDescendantIds(data, childId, skipLeafs));
+    return acc;
+  }, []);
+});
 function getPath(item, ref) {
   const parent = item.type !== "root" && item.parent ? ref.index[item.parent] : null;
   if (parent)
@@ -3420,24 +3417,24 @@ var useExpanded = ({
   rootIds,
   selectedStoryId
 }) => {
-  const [expanded, setExpanded] = (0, import_react7.useReducer)(
+  const [expanded, setExpanded] = (0, import_react6.useReducer)(
     (state, { ids, value }) => ids.reduce((acc, id) => Object.assign(acc, { [id]: value }), { ...state }),
     { refId, data, rootIds, initialExpanded },
     initializeExpanded
   );
-  const updateExpanded = (0, import_react7.useCallback)(({ ids, value }) => {
+  const updateExpanded = (0, import_react6.useCallback)(({ ids, value }) => {
     setExpanded({ ids, value });
   }, []);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     setExpanded({ ids: getAncestorIds(data, selectedStoryId), value: true });
   }, [data, selectedStoryId]);
   return [expanded, updateExpanded];
 };
 
 // src/SelectedNodeProvider.tsx
-var import_react8 = require("react");
+var import_react7 = require("react");
 var import_jsx_runtime10 = require("react/jsx-runtime");
-var SelectedNodeContext = (0, import_react8.createContext)({
+var SelectedNodeContext = (0, import_react7.createContext)({
   nodeRef: { current: null },
   setNodeRef: () => {
   },
@@ -3446,19 +3443,19 @@ var SelectedNodeContext = (0, import_react8.createContext)({
   scrollRef: null
 });
 var SelectedNodeProvider = ({ children }) => {
-  const nodeRef = (0, import_react8.useRef)(null);
-  const setNodeRef = (0, import_react8.useCallback)((node) => {
+  const nodeRef = (0, import_react7.useRef)(null);
+  const setNodeRef = (0, import_react7.useCallback)((node) => {
     nodeRef.current = node;
   }, []);
-  const scrollRef = (0, import_react8.useRef)(null);
-  const scrollToSelectedNode = (0, import_react8.useCallback)(() => {
+  const scrollRef = (0, import_react7.useRef)(null);
+  const scrollToSelectedNode = (0, import_react7.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) {
+        } catch (_error) {
         }
       }
     }, 500);
@@ -3476,14 +3473,14 @@ var SelectedNodeProvider = ({ children }) => {
     }
   );
 };
-var useSelectedNode = () => (0, import_react8.useContext)(SelectedNodeContext);
+var useSelectedNode = () => (0, import_react7.useContext)(SelectedNodeContext);
 
 // src/Tree.tsx
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var TextItem = import_react_native_theming6.styled.Text(({ theme }) => ({
   color: theme.color.defaultText
 }));
-var Node = import_react9.default.memo(function Node2({
+var Node = import_react8.default.memo(function Node2({
   item,
   refId,
   isOrphan,
@@ -3497,7 +3494,7 @@ var Node = import_react9.default.memo(function Node2({
   onSelectStoryId
 }) {
   const { setNodeRef } = useSelectedNode();
-  const setRef = (0, import_react9.useCallback)(
+  const setRef = (0, import_react8.useCallback)(
     (node) => {
       if (isSelected && node) {
         setNodeRef(node);
@@ -3592,7 +3589,7 @@ var LeafNodeStyleWrapper = import_react_native_theming6.styled.View(({ theme })
   minHeight: 28,
   borderRadius: 4
 }));
-var RootNode = import_react_native_theming6.styled.View(({}) => ({
+var RootNode = import_react_native_theming6.styled.View(() => ({
   display: "flex",
   flexDirection: "row",
   alignItems: "center",
@@ -3609,7 +3606,7 @@ var RootNodeText = import_react_native_theming6.styled.Text(({ theme }) => ({
   letterSpacing: 2.5,
   textTransform: "uppercase"
 }));
-var CollapseButton = import_react_native_theming6.styled.TouchableOpacity(({}) => ({
+var CollapseButton = import_react_native_theming6.styled.TouchableOpacity(() => ({
   display: "flex",
   flexDirection: "row",
   paddingVertical: 0,
@@ -3620,9 +3617,9 @@ var CollapseButton = import_react_native_theming6.styled.TouchableOpacity(({}) =
   cursor: "pointer",
   height: 28
 }));
-var Tree = import_react9.default.memo(function Tree2({ isMain, refId, data, status, docsMode, selectedStoryId, onSelectStoryId }) {
-  const containerRef = (0, import_react9.useRef)(null);
-  const [rootIds, orphanIds, initialExpanded] = (0, import_react9.useMemo)(
+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)(
     () => Object.keys(data).reduce(
       (acc, id) => {
         const item = data[id];
@@ -3638,7 +3635,7 @@ var Tree = import_react9.default.memo(function Tree2({ isMain, refId, data, stat
     ),
     [data]
   );
-  const { expandableDescendants } = (0, import_react9.useMemo)(() => {
+  const { expandableDescendants } = (0, import_react8.useMemo)(() => {
     return [...orphanIds, ...rootIds].reduce(
       (acc, nodeId) => {
         acc.expandableDescendants[nodeId] = getDescendantIds(data, nodeId, false).filter(
@@ -3649,7 +3646,7 @@ var Tree = import_react9.default.memo(function Tree2({ isMain, refId, data, stat
       { orphansFirst: [], expandableDescendants: {} }
     );
   }, [data, rootIds, orphanIds]);
-  const singleStoryComponentIds = (0, import_react9.useMemo)(() => {
+  const singleStoryComponentIds = (0, import_react8.useMemo)(() => {
     return Object.keys(data).filter((id) => {
       const entry = data[id];
       if (entry.type !== "component")
@@ -3665,12 +3662,12 @@ var Tree = import_react9.default.memo(function Tree2({ isMain, refId, data, stat
       return false;
     });
   }, [data]);
-  const collapsedItems = (0, import_react9.useMemo)(
+  const collapsedItems = (0, import_react8.useMemo)(
     () => Object.keys(data).filter((id) => !singleStoryComponentIds.includes(id)),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [singleStoryComponentIds]
   );
-  const collapsedData = (0, import_react9.useMemo)(() => {
+  const collapsedData = (0, import_react8.useMemo)(() => {
     return singleStoryComponentIds.reduce(
       (acc, id) => {
         const { children, parent, name } = data[id];
@@ -3691,7 +3688,7 @@ var Tree = import_react9.default.memo(function Tree2({ isMain, refId, data, stat
       { ...data }
     );
   }, [data]);
-  const ancestry = (0, import_react9.useMemo)(() => {
+  const ancestry = (0, import_react8.useMemo)(() => {
     return collapsedItems.reduce(
       (acc, id) => Object.assign(acc, { [id]: getAncestorIds(collapsedData, id) }),
       {}
@@ -3705,7 +3702,7 @@ var Tree = import_react9.default.memo(function Tree2({ isMain, refId, data, stat
     selectedStoryId,
     onSelectStoryId
   });
-  const treeItems = (0, import_react9.useMemo)(() => {
+  const treeItems = (0, import_react8.useMemo)(() => {
     return collapsedItems.map((itemId) => {
       const item = collapsedData[itemId];
       const id = createId(itemId, refId);
@@ -3771,13 +3768,13 @@ var Container = import_react_native_theming6.styled.View((props) => ({
   marginTop: props.hasOrphans ? 20 : 0,
   marginBottom: 20
 }));
-var Root = import_react9.default.memo(function Root2({
+var Root = import_react8.default.memo(function Root2({
   setExpanded,
   isFullyExpanded,
   expandableDescendants,
   ...props
 }) {
-  const setFullyExpanded = (0, import_react9.useCallback)(
+  const setFullyExpanded = (0, import_react8.useCallback)(
     () => setExpanded({ ids: expandableDescendants, value: !isFullyExpanded }),
     [setExpanded, isFullyExpanded, expandableDescendants]
   );
@@ -3793,10 +3790,10 @@ var Root = import_react9.default.memo(function Root2({
 });
 
 // src/LayoutProvider.tsx
-var import_react10 = require("react");
+var import_react9 = require("react");
 var import_react_native = require("react-native");
 var import_jsx_runtime12 = require("react/jsx-runtime");
-var LayoutContext = (0, import_react10.createContext)({
+var LayoutContext = (0, import_react9.createContext)({
   isDesktop: false,
   isMobile: true
 });
@@ -3804,7 +3801,7 @@ var LayoutProvider = ({ children }) => {
   const { width } = (0, import_react_native.useWindowDimensions)();
   const isDesktop = width >= BREAKPOINT;
   const isMobile = !isDesktop;
-  const contextValue = (0, import_react10.useMemo)(
+  const contextValue = (0, import_react9.useMemo)(
     () => ({
       isDesktop,
       isMobile
@@ -3813,80 +3810,82 @@ var LayoutProvider = ({ children }) => {
   );
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(LayoutContext.Provider, { value: contextValue, children });
 };
-var useLayout = () => (0, import_react10.useContext)(LayoutContext);
+var useLayout = () => (0, import_react9.useContext)(LayoutContext);
 
 // src/Explorer.tsx
-var import_react12 = __toESM(require("react"));
+var import_react11 = __toESM(require("react"));
 
 // src/Refs.tsx
-var import_react11 = __toESM(require("react"));
+var import_react10 = __toESM(require("react"));
 var import_react_native_theming7 = require("@storybook/react-native-theming");
 var import_jsx_runtime13 = require("react/jsx-runtime");
-var Wrapper2 = import_react_native_theming7.styled.View(({}) => ({
+var Wrapper2 = import_react_native_theming7.styled.View(() => ({
   position: "relative"
 }));
-var Ref = import_react11.default.memo(function Ref2(props) {
-  const {
-    index,
-    id: refId,
-    title = refId,
-    isLoading: isLoadingMain,
-    isBrowsing,
-    selectedStoryId,
-    loginUrl,
-    type,
-    expanded = true,
-    indexError,
-    previewInitialized,
-    setSelection
-  } = props;
-  const length = (0, import_react11.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_react11.useState)(expanded);
-  (0, import_react11.useEffect)(() => {
-    if (index && selectedStoryId && index[selectedStoryId]) {
-      setExpanded(true);
-    }
-  }, [setExpanded, index, selectedStoryId]);
-  const onSelectStoryId = (0, import_react11.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)(
-    Tree,
-    {
-      status: props.status,
+var Ref = import_react10.default.memo(
+  function Ref2(props) {
+    const {
+      index,
+      id: refId,
+      title = refId,
+      isLoading: isLoadingMain,
       isBrowsing,
-      isMain: true,
-      refId,
-      data: index,
-      docsMode: false,
       selectedStoryId,
-      onSelectStoryId
-    }
-  ) }) });
-});
+      loginUrl,
+      type,
+      expanded = true,
+      indexError,
+      previewInitialized,
+      setSelection
+    } = props;
+    const length = (0, import_react10.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)(() => {
+      if (index && selectedStoryId && index[selectedStoryId]) {
+        setExpanded(true);
+      }
+    }, [setExpanded, index, selectedStoryId]);
+    const onSelectStoryId = (0, import_react10.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)(
+      Tree,
+      {
+        status: props.status,
+        isBrowsing,
+        isMain: true,
+        refId,
+        data: index,
+        docsMode: false,
+        selectedStoryId,
+        onSelectStoryId
+      }
+    ) }) });
+  }
+);
 
 // src/Explorer.tsx
 var import_react_native2 = require("react-native");
 var import_jsx_runtime14 = require("react/jsx-runtime");
-var import_react13 = require("react");
-var Explorer = import_react12.default.memo(function Explorer2({
+var import_react12 = require("react");
+var Explorer = import_react11.default.memo(function Explorer2({
   isLoading,
   isBrowsing,
   dataset,
   selected,
   setSelection
 }) {
-  const containerRef = (0, import_react12.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_react13.createElement)(
+  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)(
     Ref,
     {
       ...ref,
@@ -3900,14 +3899,14 @@ var Explorer = import_react12.default.memo(function Explorer2({
 });
 
 // src/Sidebar.tsx
-var import_react19 = __toESM(require("react"));
+var import_react18 = __toESM(require("react"));
 var import_react_native_theming12 = 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_react14 = __toESM(require("react"));
+var import_react13 = __toESM(require("react"));
 var import_react_native3 = require("react-native");
 
 // src/icon/CloseIcon.tsx
@@ -4034,16 +4033,15 @@ var ClearIcon = import_react_native_theming9.styled.TouchableOpacity(({ theme })
   justifyContent: "center",
   height: "100%"
 }));
-var Search = import_react14.default.memo(function Search2({ children, dataset, setSelection, getLastViewed, initialQuery = "" }) {
+var Search = import_react13.default.memo(function Search2({ children, dataset, setSelection, getLastViewed, initialQuery = "" }) {
   const context = (0, import_bottom_sheet.useBottomSheetInternal)(true);
   const isBottomSheet = context !== null;
-  const inputRef = (0, import_react14.useRef)(null);
-  const [inputValue, setInputValue] = (0, import_react14.useState)(initialQuery);
-  const [isOpen, setIsOpen] = (0, import_react14.useState)(false);
-  const [allComponents, showAllComponents] = (0, import_react14.useState)(false);
-  const { isMobile } = useLayout();
+  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);
   const { scrollToSelectedNode } = useSelectedNode();
-  const selectStory = (0, import_react14.useCallback)(
+  const selectStory = (0, import_react13.useCallback)(
     (id, refId) => {
       setSelection({ storyId: id, refId });
       inputRef.current?.blur();
@@ -4053,7 +4051,7 @@ var Search = import_react14.default.memo(function Search2({ children, dataset, s
     },
     [scrollToSelectedNode, setSelection]
   );
-  const getItemProps = (0, import_react14.useCallback)(
+  const getItemProps = (0, import_react13.useCallback)(
     ({ item: result }) => {
       return {
         icon: result?.item?.type === "component" ? "component" : "story",
@@ -4076,7 +4074,7 @@ var Search = import_react14.default.memo(function Search2({ children, dataset, s
     },
     [selectStory]
   );
-  const makeFuse = (0, import_react14.useCallback)(() => {
+  const makeFuse = (0, import_react13.useCallback)(() => {
     const list = dataset.entries.reduce((acc, [refId, { index }]) => {
       if (index) {
         acc.push(
@@ -4089,7 +4087,7 @@ var Search = import_react14.default.memo(function Search2({ children, dataset, s
     }, []);
     return new import_fuse.default(list, options);
   }, [dataset]);
-  const getResults = (0, import_react14.useCallback)(
+  const getResults = (0, import_react13.useCallback)(
     (input2) => {
       const fuse = makeFuse();
       if (!input2)
@@ -4131,7 +4129,7 @@ var Search = import_react14.default.memo(function Search2({ children, dataset, s
     },
     [allComponents, dataset.hash, getLastViewed, makeFuse]
   );
-  const deferredQuery = (0, import_react14.useDeferredValue)(inputValue);
+  const deferredQuery = (0, import_react13.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: [
@@ -4171,12 +4169,12 @@ var Search = import_react14.default.memo(function Search2({ children, dataset, s
 
 // src/SearchResults.tsx
 var import_react_native_theming11 = require("@storybook/react-native-theming");
-var import_react16 = __toESM(require("react"));
+var import_react15 = __toESM(require("react"));
 var import_polished2 = require("polished");
 var import_react_native4 = require("react-native");
 
 // src/util/status.tsx
-var import_react15 = require("react");
+var import_react14 = require("react");
 var import_react_native_theming10 = require("@storybook/react-native-theming");
 var import_react_native_svg9 = __toESM(require("react-native-svg"));
 var import_jsx_runtime18 = require("react/jsx-runtime");
@@ -4188,7 +4186,7 @@ function SmallIcons(props) {
 }
 function LoadingIcons(props) {
   const theme = (0, import_react_native_theming10.useTheme)();
-  const color = (0, import_react15.useMemo)(() => {
+  const color = (0, import_react14.useMemo)(() => {
     return theme.base === "light" ? theme.color.mediumdark : theme.color.darker;
   }, [theme.base, theme.color.darker, theme.color.mediumdark]);
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SmallIcons, { color, ...props });
@@ -4203,7 +4201,7 @@ var statusMapping = {
 
 // src/SearchResults.tsx
 var import_jsx_runtime19 = require("react/jsx-runtime");
-var import_react17 = require("react");
+var import_react16 = require("react");
 var ResultsList = import_react_native_theming11.styled.View({
   margin: 0,
   padding: 0,
@@ -4269,7 +4267,7 @@ var RecentlyOpenedTitle = import_react_native_theming11.styled.View(({ theme })
   marginBottom: 4,
   alignItems: "center"
 }));
-var Highlight = import_react16.default.memo(
+var Highlight = import_react15.default.memo(
   function Highlight2({ children, match }) {
     if (!match)
       return children;
@@ -4304,14 +4302,14 @@ var PathText = import_react_native_theming11.styled.Text(({ theme }) => ({
   fontSize: theme.typography.size.s1 - 1,
   color: theme.textMutedColor
 }));
-var Result = import_react16.default.memo(function Result2({
+var Result = import_react15.default.memo(function Result2({
   item,
   matches,
   icon: _icon,
   onPress,
   ...props
 }) {
-  const press = (0, import_react16.useCallback)(
+  const press = (0, import_react15.useCallback)(
     (event) => {
       event.preventDefault();
       onPress?.(event);
@@ -4345,7 +4343,7 @@ var Result = import_react16.default.memo(function Result2({
 var Text = import_react_native_theming11.styled.Text(({ theme }) => ({
   color: theme.color.defaultText
 }));
-var SearchResults = import_react16.default.memo(function SearchResults2({
+var SearchResults = import_react15.default.memo(function SearchResults2({
   query,
   results,
   closeMenu,
@@ -4380,7 +4378,7 @@ var SearchResults = import_react16.default.memo(function SearchResults2({
       }
       const { item } = result;
       const key = `${item.refId}::${item.id}`;
-      return /* @__PURE__ */ (0, import_react17.createElement)(
+      return /* @__PURE__ */ (0, import_react16.createElement)(
         Result,
         {
           ...result,
@@ -4395,11 +4393,11 @@ var SearchResults = import_react16.default.memo(function SearchResults2({
 
 // src/hooks/useLastViewed.ts
 var import_debounce = __toESM(require_debounce());
-var import_react18 = require("react");
+var import_react17 = 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_react18.useMemo)(() => {
+  const initialLastViewedStoryIds = (0, import_react17.useMemo)(() => {
     const items = import_store2.default.get("lastViewedStoryIds");
     if (!items || !Array.isArray(items))
       return [];
@@ -4407,8 +4405,8 @@ var useLastViewed = (selection) => {
       return [];
     return items;
   }, []);
-  const lastViewedRef = (0, import_react18.useRef)(initialLastViewedStoryIds);
-  const updateLastViewed = (0, import_react18.useCallback)(
+  const lastViewedRef = (0, import_react17.useRef)(initialLastViewedStoryIds);
+  const updateLastViewed = (0, import_react17.useCallback)(
     (story) => {
       const items = lastViewedRef.current;
       const index = items.findIndex(
@@ -4425,13 +4423,13 @@ var useLastViewed = (selection) => {
     },
     [lastViewedRef]
   );
-  (0, import_react18.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (selection)
       updateLastViewed(selection);
   }, [selection]);
   return {
-    getLastViewed: (0, import_react18.useCallback)(() => lastViewedRef.current, [lastViewedRef]),
-    clearLastViewed: (0, import_react18.useCallback)(() => {
+    getLastViewed: (0, import_react17.useCallback)(() => lastViewedRef.current, [lastViewedRef]),
+    clearLastViewed: (0, import_react17.useCallback)(() => {
       lastViewedRef.current = lastViewedRef.current.slice(0, 1);
       save(lastViewedRef.current);
     }, [lastViewedRef])
@@ -4455,18 +4453,18 @@ var Top = import_react_native_theming12.styled.View({
   flex: 1,
   flexDirection: "row"
 });
-var Swap = import_react19.default.memo(function Swap2({
+var Swap = import_react18.default.memo(function Swap2({
   children,
   condition
 }) {
-  const [a, b] = import_react19.default.Children.toArray(children);
+  const [a, b] = import_react18.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_react19.useMemo)(
+  const hash = (0, import_react18.useMemo)(
     () => ({
       [DEFAULT_REF_ID]: {
         index,
@@ -4481,9 +4479,9 @@ var useCombination = (index, indexError, previewInitialized, status, refs) => {
     }),
     [refs, index, indexError, previewInitialized, status]
   );
-  return (0, import_react19.useMemo)(() => ({ hash, entries: Object.entries(hash) }), [hash]);
+  return (0, import_react18.useMemo)(() => ({ hash, entries: Object.entries(hash) }), [hash]);
 };
-var Sidebar = import_react19.default.memo(function Sidebar2({
+var Sidebar = import_react18.default.memo(function Sidebar2({
   storyId = null,
   refId = DEFAULT_REF_ID,
   index,
@@ -4493,7 +4491,7 @@ var Sidebar = import_react19.default.memo(function Sidebar2({
   refs = {},
   setSelection
 }) {
-  const selected = (0, import_react19.useMemo)(() => storyId && { storyId, refId }, [storyId, refId]);
+  const selected = (0, import_react18.useMemo)(() => storyId && { storyId, refId }, [storyId, refId]);
   const dataset = useCombination(index, indexError, previewInitialized, status, refs);
   const lastViewedProps = useLastViewed(selected);
   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: [
@@ -4525,8 +4523,8 @@ var Sidebar = import_react19.default.memo(function Sidebar2({
 // src/Layout.tsx
 var import_core_events = require("storybook/internal/core-events");
 var import_manager_api2 = require("storybook/internal/manager-api");
-var import_react_native_theming18 = require("@storybook/react-native-theming");
-var import_react28 = require("react");
+var import_react_native_theming17 = require("@storybook/react-native-theming");
+var import_react27 = require("react");
 var import_react_native9 = require("react-native");
 var import_react_native_safe_area_context3 = require("react-native-safe-area-context");
 
@@ -4535,18 +4533,17 @@ var import_bottom_sheet2 = require("@gorhom/bottom-sheet");
 var import_manager_api = require("storybook/internal/manager-api");
 var import_react_native_theming13 = require("@storybook/react-native-theming");
 var import_types3 = require("storybook/internal/types");
-var import_react21 = require("react");
+var import_react20 = 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"));
 var import_react_native_safe_area_context = require("react-native-safe-area-context");
-var import_react_native_theming14 = require("@storybook/react-native-theming");
 
 // src/util/useStyle.ts
-var import_react20 = require("react");
+var import_react19 = require("react");
 var useStyle = (styleFactory, deps) => (
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  (0, import_react20.useMemo)(styleFactory, deps)
+  (0, import_react19.useMemo)(styleFactory, deps)
 );
 
 // src/MobileAddonsPanel.tsx
@@ -4557,15 +4554,15 @@ var bottomSheetStyle = {
 var contentStyle = {
   flex: 1
 };
-var MobileAddonsPanel = (0, import_react21.forwardRef)(
+var MobileAddonsPanel = (0, import_react20.forwardRef)(
   ({ storyId }, ref) => {
-    const theme = (0, import_react_native_theming14.useTheme)();
+    const theme = (0, import_react_native_theming13.useTheme)();
     const reducedMotion = (0, import_react_native_reanimated.useReducedMotion)();
-    const addonsPanelBottomSheetRef = (0, import_react21.useRef)(null);
+    const addonsPanelBottomSheetRef = (0, import_react20.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_react21.useImperativeHandle)(ref, () => ({
+    (0, import_react20.useImperativeHandle)(ref, () => ({
       setAddonsPanelOpen: (open) => {
         if (open) {
           addonsPanelBottomSheetRef.current?.present();
@@ -4623,6 +4620,7 @@ var MobileAddonsPanel = (0, import_react21.forwardRef)(
     );
   }
 );
+MobileAddonsPanel.displayName = "MobileAddonsPanel";
 var addonsTabsContainerStyle = {
   flex: 1
 };
@@ -4650,14 +4648,14 @@ 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_react21.useState)(Object.keys(panels)[0]);
+  const [addonSelected, setAddonSelected] = (0, import_react20.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_react21.useMemo)(() => {
+  const panel = (0, import_react20.useMemo)(() => {
     if (!storyId) {
       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" }) });
     }
@@ -4729,8 +4727,8 @@ var TabText = import_react_native_theming13.styled.Text(({ theme, active }) => (
 
 // src/MobileMenuDrawer.tsx
 var import_bottom_sheet3 = __toESM(require("@gorhom/bottom-sheet"));
-var import_react_native_theming15 = require("@storybook/react-native-theming");
-var import_react22 = require("react");
+var import_react_native_theming14 = require("@storybook/react-native-theming");
+var import_react21 = 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");
@@ -4746,14 +4744,14 @@ var BottomSheetBackdropComponent = (backdropComponentProps) => /* @__PURE__ */ (
   }
 );
 var snapPoints = ["50%", "75%"];
-var MobileMenuDrawer = (0, import_react22.memo)(
-  (0, import_react22.forwardRef)(({ children }, ref) => {
+var MobileMenuDrawer = (0, import_react21.memo)(
+  (0, import_react21.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_theming15.useTheme)();
-    const menuBottomSheetRef = (0, import_react22.useRef)(null);
+    const theme = (0, import_react_native_theming14.useTheme)();
+    const menuBottomSheetRef = (0, import_react21.useRef)(null);
     const { scrollToSelectedNode, scrollRef } = useSelectedNode();
-    (0, import_react22.useImperativeHandle)(ref, () => ({
+    (0, import_react21.useImperativeHandle)(ref, () => ({
       setMobileMenuOpen: (open) => {
         if (open) {
           menuBottomSheetRef.current?.snapToIndex(1);
@@ -4764,13 +4762,13 @@ var MobileMenuDrawer = (0, import_react22.memo)(
         }
       }
     }));
-    const bgColorStyle = (0, import_react22.useMemo)(() => {
+    const bgColorStyle = (0, import_react21.useMemo)(() => {
       return { backgroundColor: theme.background.content };
     }, [theme.background.content]);
-    const handleIndicatorStyle = (0, import_react22.useMemo)(() => {
+    const handleIndicatorStyle = (0, import_react21.useMemo)(() => {
       return { backgroundColor: theme.textMutedColor };
     }, [theme.textMutedColor]);
-    const contentContainerStyle2 = (0, import_react22.useMemo)(() => {
+    const contentContainerStyle2 = (0, import_react21.useMemo)(() => {
       return { paddingBottom: insets.bottom };
     }, [insets.bottom]);
     return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
@@ -4804,7 +4802,7 @@ var MobileMenuDrawer = (0, import_react22.memo)(
 );
 
 // src/StorybookLogo.tsx
-var import_react23 = require("react");
+var import_react22 = require("react");
 var import_react_native8 = require("react-native");
 
 // src/icon/DarkLogo.tsx
@@ -4945,11 +4943,11 @@ var WIDTH = 125;
 var HEIGHT = 25;
 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_react23.isValidElement)(value);
+  return (0, import_react22.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_react23.useEffect)(() => {
+  (0, import_react22.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}}"
@@ -4986,7 +4984,7 @@ var BrandLogo = ({ theme }) => {
   }
 };
 var BrandTitle = ({ theme }) => {
-  const brandTitleStyle = (0, import_react23.useMemo)(() => {
+  const brandTitleStyle = (0, import_react22.useMemo)(() => {
     return {
       width: WIDTH,
       height: HEIGHT,
@@ -5011,8 +5009,8 @@ var BrandTitle = ({ theme }) => {
   }
 };
 var StorybookLogo = ({ theme }) => {
-  const image = (0, import_react23.useMemo)(() => theme.brand?.image, [theme.brand?.image]);
-  const title = (0, import_react23.useMemo)(() => theme.brand?.title, [theme.brand?.title]);
+  const image = (0, import_react22.useMemo)(() => theme.brand?.image, [theme.brand?.image]);
+  const title = (0, import_react22.useMemo)(() => theme.brand?.title, [theme.brand?.title]);
   if (image) {
     return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(BrandLogo, { theme });
   } else if (title) {
@@ -5023,12 +5021,12 @@ var StorybookLogo = ({ theme }) => {
 };
 
 // src/hooks/useStoreState.ts
-var import_react25 = require("react");
+var import_react24 = require("react");
 
 // src/StorageProvider.tsx
-var import_react24 = require("react");
+var import_react23 = require("react");
 var import_jsx_runtime26 = require("react/jsx-runtime");
-var StorageContext = (0, import_react24.createContext)({
+var StorageContext = (0, import_react23.createContext)({
   getItem: async () => null,
   setItem: async () => {
   }
@@ -5039,13 +5037,13 @@ var StorageProvider = ({
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(StorageContext.Provider, { value: storage, children });
 };
-var useStorage = () => (0, import_react24.useContext)(StorageContext);
+var useStorage = () => (0, import_react23.useContext)(StorageContext);
 
 // src/hooks/useStoreState.ts
 var useStoreBooleanState = (key, defaultValue) => {
   const storage = useStorage();
-  const [val, setVal] = (0, import_react25.useState)(defaultValue);
-  (0, import_react25.useEffect)(() => {
+  const [val, setVal] = (0, import_react24.useState)(defaultValue);
+  (0, import_react24.useEffect)(() => {
     storage.getItem(key).then((newVal) => {
       if (newVal === null || newVal === void 0) {
         setVal(defaultValue);
@@ -5054,7 +5052,7 @@ var useStoreBooleanState = (key, defaultValue) => {
       }
     });
   }, [key, storage, defaultValue]);
-  (0, import_react25.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     storage.setItem(key, val.toString());
   }, [key, storage, val]);
   return [val, setVal];
@@ -5090,13 +5088,13 @@ var BottomBarToggleIcon = ({
 };
 
 // src/icon/CloseFullscreenIcon.tsx
-var import_react26 = require("react");
+var import_react25 = require("react");
 var import_react_native_svg13 = __toESM(require("react-native-svg"));
-var import_react_native_theming16 = require("@storybook/react-native-theming");
+var import_react_native_theming15 = require("@storybook/react-native-theming");
 var import_jsx_runtime28 = require("react/jsx-runtime");
 function CloseFullscreenIcon({ color, width = 14, height = 14, ...props }) {
-  const theme = (0, import_react_native_theming16.useTheme)();
-  const fillColor = (0, import_react26.useMemo)(() => {
+  const theme = (0, import_react_native_theming15.useTheme)();
+  const fillColor = (0, import_react25.useMemo)(() => {
     return color ?? theme.color.defaultText;
   }, [color, theme.color.defaultText]);
   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" }) });
@@ -5104,12 +5102,12 @@ function CloseFullscreenIcon({ color, width = 14, height = 14, ...props }) {
 
 // src/icon/FullscreenIcon.tsx
 var import_react_native_svg14 = __toESM(require("react-native-svg"));
-var import_react_native_theming17 = require("@storybook/react-native-theming");
-var import_react27 = require("react");
+var import_react_native_theming16 = require("@storybook/react-native-theming");
+var import_react26 = require("react");
 var import_jsx_runtime29 = require("react/jsx-runtime");
 function FullscreenIcon({ color, width = 14, height = 14, ...props }) {
-  const theme = (0, import_react_native_theming17.useTheme)();
-  const fillColor = (0, import_react27.useMemo)(() => {
+  const theme = (0, import_react_native_theming16.useTheme)();
+  const fillColor = (0, import_react26.useMemo)(() => {
     return color ?? theme.color.defaultText;
   }, [color, theme.color.defaultText]);
   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)(
@@ -5153,7 +5151,6 @@ var desktopLogoContainer = {
 var contentContainerStyle = { flex: 1, overflow: "hidden" };
 var mobileContentStyle = { flex: 1, overflow: "hidden" };
 var placeholderObject = {};
-var placeholderArray = [];
 var iconFloatRightStyle = { marginLeft: "auto" };
 var navButtonStyle = { flexShrink: 1 };
 var navButtonHitSlop = { bottom: 10, left: 10, right: 10, top: 10 };
@@ -5167,9 +5164,9 @@ var Layout = ({
   story,
   children
 }) => {
-  const theme = (0, import_react_native_theming18.useTheme)();
-  const mobileMenuDrawerRef = (0, import_react28.useRef)(null);
-  const addonPanelRef = (0, import_react28.useRef)(null);
+  const theme = (0, import_react_native_theming17.useTheme)();
+  const mobileMenuDrawerRef = (0, import_react27.useRef)(null);
+  const addonPanelRef = (0, import_react27.useRef)(null);
   const insets = (0, import_react_native_safe_area_context3.useSafeAreaInsets)();
   const { isDesktop } = useLayout();
   const [desktopSidebarOpen, setDesktopSidebarOpen] = useStoreBooleanState(
@@ -5180,7 +5177,7 @@ var Layout = ({
     "desktopPanelState",
     true
   );
-  const [uiHidden, setUiHidden] = (0, import_react28.useState)(false);
+  const [uiHidden, setUiHidden] = (0, import_react27.useState)(false);
   const desktopSidebarStyle = useStyle(
     () => ({
       width: desktopSidebarOpen ? 240 : void 0,
@@ -5247,10 +5244,10 @@ var Layout = ({
     }),
     [theme.barTextColor]
   );
-  const openMobileMenu = (0, import_react28.useCallback)(() => {
+  const openMobileMenu = (0, import_react27.useCallback)(() => {
     mobileMenuDrawerRef.current.setMobileMenuOpen(true);
   }, [mobileMenuDrawerRef]);
-  const setSelection = (0, import_react28.useCallback)(({ storyId: newStoryId }) => {
+  const setSelection = (0, import_react27.useCallback)(({ storyId: newStoryId }) => {
     const channel = import_manager_api2.addons.getChannel();
     channel.emit(import_core_events.SET_CURRENT_STORY, { storyId: newStoryId });
   }, []);
@@ -5268,7 +5265,6 @@ var Layout = ({
           /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
             Sidebar,
             {
-              extra: placeholderArray,
               previewInitialized: true,
               indexError: void 0,
               refs: placeholderObject,
@@ -5333,7 +5329,6 @@ var Layout = ({
       /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
         Sidebar,
         {
-          extra: placeholderArray,
           previewInitialized: true,
           indexError: void 0,
           refs: placeholderObject,
@@ -5348,7 +5343,7 @@ var Layout = ({
     isDesktop ? null : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(MobileAddonsPanel, { ref: addonPanelRef, storyId: story?.id })
   ] });
 };
-var Nav = import_react_native_theming18.styled.View({
+var Nav = import_react_native_theming17.styled.View({
   display: "flex",
   flexDirection: "row",
   alignItems: "center",
@@ -5357,14 +5352,14 @@ var Nav = import_react_native_theming18.styled.View({
   height: 40,
   paddingHorizontal: 6
 });
-var Container3 = import_react_native_theming18.styled.View(({ theme }) => ({
+var Container3 = import_react_native_theming17.styled.View(({ theme }) => ({
   alignSelf: "flex-end",
   width: "100%",
   backgroundColor: theme.barBg,
   borderTopColor: theme.appBorderColor,
   borderTopWidth: 1
 }));
-var Button2 = import_react_native_theming18.styled.TouchableOpacity(({ theme }) => ({
+var Button2 = import_react_native_theming17.styled.TouchableOpacity(({ theme }) => ({
   display: "flex",
   flexDirection: "row",
   alignItems: "center",
@@ -5633,35 +5628,41 @@ var transformStoryIndexToStoriesHash = (input, { provider, docsOptions, filters,
 var transformStoryIndexV2toV3 = (index) => {
   return {
     v: 3,
-    stories: Object.values(index.stories).reduce((acc, entry) => {
-      acc[entry.id] = {
-        ...entry,
-        title: entry.kind,
-        name: entry.name || entry.story,
-        importPath: entry.parameters.fileName || ""
-      };
-      return acc;
-    }, {})
+    stories: Object.values(index.stories).reduce(
+      (acc, entry) => {
+        acc[entry.id] = {
+          ...entry,
+          title: entry.kind,
+          name: entry.name || entry.story,
+          importPath: entry.parameters.fileName || ""
+        };
+        return acc;
+      },
+      {}
+    )
   };
 };
 var transformStoryIndexV3toV4 = (index) => {
   const countByTitle = (0, import_countBy.default)(Object.values(index.stories), "title");
   return {
     v: 4,
-    entries: Object.values(index.stories).reduce((acc, entry) => {
-      let type = "story";
-      if (entry.parameters?.docsOnly || entry.name === "Page" && countByTitle[entry.title] === 1) {
-        type = "docs";
-      }
-      acc[entry.id] = {
-        type,
-        ...type === "docs" && { tags: ["stories-mdx"], storiesImports: [] },
-        ...entry
-      };
-      delete acc[entry.id].story;
-      delete acc[entry.id].kind;
-      return acc;
-    }, {})
+    entries: Object.values(index.stories).reduce(
+      (acc, entry) => {
+        let type = "story";
+        if (entry.parameters?.docsOnly || entry.name === "Page" && countByTitle[entry.title] === 1) {
+          type = "docs";
+        }
+        acc[entry.id] = {
+          type,
+          ...type === "docs" && { tags: ["stories-mdx"], storiesImports: [] },
+          ...entry
+        };
+        delete acc[entry.id].story;
+        delete acc[entry.id].kind;
+        return acc;
+      },
+      {}
+    )
   };
 };
 // Annotate the CommonJS export names for ESM import in node: