@storybook/react-native-ui 8.3.0-alpha.1 → 8.3.0-alpha.2

package/dist/index.d.ts

@@ -175,8 +175,6 @@ declare const ButtonIcon: ({ Icon, active, variant, }: {
 declare const IconButton: React$1.ForwardRefExoticComponent<ButtonProps & React$1.RefAttributes<TouchableOpacity>>;
 
 type LayoutContextType = {
-    openMobileMenu: () => void;
-    closeMobileMenu: () => void;
     isDesktop: boolean;
     isMobile: boolean;
 };

package/dist/index.js

@@ -3034,7 +3034,7 @@ var BranchNode = import_react_native_theming2.styled.TouchableOpacity(({ depth =
   alignItems: "flex-start",
   alignSelf: "flex-start",
   paddingLeft: (isExpandable ? 8 : 22) + depth * 18,
-  background: "transparent",
+  backgroundColor: "transparent",
   minHeight: 28,
   borderRadius: 4,
   gap: 6,
@@ -3042,7 +3042,7 @@ var BranchNode = import_react_native_theming2.styled.TouchableOpacity(({ depth =
   paddingBottom: 4,
   // will this actually do anything?
   "&:hover, &:focus": {
-    background: (0, import_polished.transparentize)(0.93, theme.color.secondary),
+    backgroundColor: (0, import_polished.transparentize)(0.93, theme.color.secondary),
     outline: "none"
   }
 }));
@@ -3291,64 +3291,31 @@ IconButton.displayName = "IconButton";
 
 // src/LayoutProvider.tsx
 var import_react4 = require("react");
+var import_react_native = require("react-native");
 
 // src/constants.ts
-var BREAKPOINT = 600;
+var BREAKPOINT = 1e3;
 var MEDIA_DESKTOP_BREAKPOINT = `@media (min-width: ${BREAKPOINT}px)`;
 var DEFAULT_REF_ID = "storybook_internal";
 
 // src/LayoutProvider.tsx
-var import_react_native = require("react-native");
-var import_jsx_runtime8 = (
-  // <BottomSheetModalProvider>
-  require("react/jsx-runtime")
-);
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var LayoutContext = (0, import_react4.createContext)({
-  // isMobileMenuOpen: false,
-  openMobileMenu: () => {
-  },
-  closeMobileMenu: () => {
-  },
-  // isMobileAboutOpen: false,
-  // setMobileAboutOpen: () => {},
-  // isMobilePanelOpen: false,
-  // setMobilePanelOpen: () => {},
   isDesktop: false,
-  isMobile: false
+  isMobile: true
 });
 var LayoutProvider = ({ children }) => {
   const { width } = (0, import_react_native.useWindowDimensions)();
   const isDesktop = width >= BREAKPOINT;
   const isMobile = !isDesktop;
-  const openMobileMenu = (0, import_react4.useCallback)(() => {
-  }, []);
-  const closeMobileMenu = (0, import_react4.useCallback)(() => {
-  }, []);
   const contextValue = (0, import_react4.useMemo)(
     () => ({
-      // isMobileMenuOpen,
-      openMobileMenu,
-      closeMobileMenu,
-      // isMobileAboutOpen,
-      // setMobileAboutOpen,
-      // isMobilePanelOpen,
-      // setMobilePanelOpen,
       isDesktop,
       isMobile
     }),
-    [
-      // isMobileMenuOpen,
-      openMobileMenu,
-      closeMobileMenu,
-      // // isMobileAboutOpen,
-      // setMobileAboutOpen,
-      // isMobilePanelOpen,
-      // setMobilePanelOpen,
-      isDesktop,
-      isMobile
-    ]
+    [isDesktop, isMobile]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(LayoutContext.Provider, { value: contextValue, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(LayoutContext.Provider, { value: contextValue, children });
 };
 var useLayout = () => (0, import_react4.useContext)(LayoutContext);
 
@@ -3550,7 +3517,7 @@ var Node = import_react6.default.memo(function Node2({
   setExpanded,
   onSelectStoryId
 }) {
-  const { isDesktop, isMobile, closeMobileMenu } = useLayout();
+  const { isDesktop } = useLayout();
   if (!isDisplayed) {
     return null;
   }
@@ -3565,8 +3532,6 @@ var Node = import_react6.default.memo(function Node2({
         depth: isOrphan ? item.depth : item.depth - 1,
         onPress: () => {
           onSelectStoryId(item.id);
-          if (isMobile)
-            closeMobileMenu();
         },
         children: item.renderLabel?.(item) || item.name
       },
@@ -3638,7 +3603,7 @@ var LeafNodeStyleWrapper = import_react_native_theming7.styled.View(({ theme })
   alignItems: "center",
   paddingRight: 20,
   color: theme.color.defaultText,
-  background: "transparent",
+  backgroundColor: "transparent",
   minHeight: 28,
   borderRadius: 4
 }));
@@ -3934,54 +3899,31 @@ var import_react14 = __toESM(require("react"));
 var import_react_native_theming11 = require("@storybook/react-native-theming");
 
 // src/Search.tsx
+var import_bottom_sheet = require("@gorhom/bottom-sheet");
 var import_react_native_theming9 = require("@storybook/react-native-theming");
 var import_fuse = __toESM(require("fuse.js"));
 var import_react10 = __toESM(require("react"));
+var import_react_native3 = require("react-native");
 
-// src/types.ts
-function isExpandType(x2) {
-  return !!(x2 && x2.showAll);
-}
-
-// src/icon/SearchIcon.tsx
+// src/icon/CloseIcon.tsx
 var import_react_native_svg8 = require("react-native-svg");
 var import_jsx_runtime15 = require("react/jsx-runtime");
-var SearchIcon = ({
-  color = "currentColor",
-  width = 14,
-  height = 14,
-  ...props
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native_svg8.Svg, { width, height, viewBox: "0 0 14 14", fill: "none", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-    import_react_native_svg8.Path,
-    {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M9.544 10.206a5.5 5.5 0 11.662-.662.5.5 0 01.148.102l3 3a.5.5 0 01-.708.708l-3-3a.5.5 0 01-.102-.148zM10.5 6a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0z",
-      fill: color
-    }
-  ) });
-};
-
-// src/icon/CloseIcon.tsx
-var import_react_native_svg9 = require("react-native-svg");
-var import_jsx_runtime16 = require("react/jsx-runtime");
 var CloseIcon = ({
   color = "currentColor",
   width = 14,
   height = 14,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_react_native_svg9.Svg, { width, height, viewBox: "0 0 14 14", fill: "none", ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-      import_react_native_svg9.Path,
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react_native_svg8.Svg, { width, height, viewBox: "0 0 14 14", fill: "none", ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      import_react_native_svg8.Path,
       {
         d: "M9.854 4.146a.5.5 0 010 .708L7.707 7l2.147 2.146a.5.5 0 01-.708.708L7 7.707 4.854 9.854a.5.5 0 01-.708-.708L6.293 7 4.146 4.854a.5.5 0 11.708-.708L7 6.293l2.146-2.147a.5.5 0 01.708 0z",
         fill: color
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-      import_react_native_svg9.Path,
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      import_react_native_svg8.Path,
       {
         fillRule: "evenodd",
         clipRule: "evenodd",
@@ -3992,9 +3934,32 @@ var CloseIcon = ({
   ] });
 };
 
+// src/icon/SearchIcon.tsx
+var import_react_native_svg9 = require("react-native-svg");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var SearchIcon = ({
+  color = "currentColor",
+  width = 14,
+  height = 14,
+  ...props
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native_svg9.Svg, { width, height, viewBox: "0 0 14 14", fill: "none", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    import_react_native_svg9.Path,
+    {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M9.544 10.206a5.5 5.5 0 11.662-.662.5.5 0 01.148.102l3 3a.5.5 0 01-.708.708l-3-3a.5.5 0 01-.102-.148zM10.5 6a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0z",
+      fill: color
+    }
+  ) });
+};
+
+// src/types.ts
+function isExpandType(x2) {
+  return !!(x2 && x2.showAll);
+}
+
 // src/Search.tsx
-var import_react_native3 = require("react-native");
-var import_bottom_sheet = require("@gorhom/bottom-sheet");
 var import_jsx_runtime17 = require("react/jsx-runtime");
 var DEFAULT_MAX_SEARCH_RESULTS = 50;
 var options = {
@@ -4030,7 +3995,19 @@ var SearchField = import_react_native_theming9.styled.View({
   flexDirection: "column",
   position: "relative"
 });
-var Input = (0, import_react_native_theming9.styled)(import_bottom_sheet.BottomSheetTextInput)(({ theme }) => ({
+var BottomSheetInput = (0, import_react_native_theming9.styled)(import_bottom_sheet.BottomSheetTextInput)(({ theme }) => ({
+  height: 32,
+  paddingLeft: 28,
+  paddingRight: 28,
+  borderWidth: 1,
+  borderColor: theme.appBorderColor,
+  backgroundColor: "transparent",
+  borderRadius: 4,
+  fontSize: theme.typography.size.s1 + 1,
+  color: theme.color.defaultText,
+  width: "100%"
+}));
+var Input = (0, import_react_native_theming9.styled)(import_react_native3.TextInput)(({ theme }) => ({
   height: 32,
   paddingLeft: 28,
   paddingRight: 28,
@@ -4060,10 +4037,12 @@ var Search = import_react10.default.memo(function Search2({ children, dataset, s
   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 { isMobile } = useLayout();
   const selectStory = (0, import_react10.useCallback)(
     (id, refId) => {
       setSelection({ storyId: id, refId });
       inputRef.current?.blur();
+      setIsOpen(false);
       showAllComponents(false);
     },
     [setSelection]
@@ -4156,15 +4135,15 @@ var Search = import_react10.default.memo(function Search2({ children, dataset, s
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react_native3.View, { style: { flex: 1 }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(SearchField, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SearchIconWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SearchIcon, {}) }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-        Input,
+      isMobile ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        BottomSheetInput,
         {
           ref: inputRef,
           onChangeText: setInputValue,
           onFocus: () => setIsOpen(true),
           onBlur: () => setIsOpen(false)
         }
-      ),
+      ) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Input, { ref: inputRef, onChangeText: setInputValue, onFocus: () => setIsOpen(true) }),
       isOpen && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
         ClearIcon,
         {
@@ -4347,7 +4326,7 @@ var SearchResults = import_react11.default.memo(function SearchResults2({
   };
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(ResultsList, { children: [
     results.length > 0 && !query && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(RecentlyOpenedTitle, { children: [
-      "Recently opened",
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text, { children: "Recently opened" }),
       /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(IconButton, { onPress: handleClearLastViewed })
     ] }),
     results.length === 0 && query && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native4.View, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(NoResults, { children: [
@@ -4434,7 +4413,7 @@ var Container2 = import_react_native_theming11.styled.View(({ theme }) => ({
   height: "100%",
   display: "flex",
   flexDirection: "column",
-  background: theme.background.content
+  backgroundColor: theme.background.content
 }));
 var Top = import_react_native_theming11.styled.View({
   paddingLeft: 4,
@@ -4565,98 +4544,26 @@ var MenuIcon = ({
   ) });
 };
 
-// src/MobileMenuDrawer.tsx
+// src/MobileAddonsPanel.tsx
 var import_bottom_sheet2 = require("@gorhom/bottom-sheet");
+var import_manager_api = require("@storybook/core/manager-api");
+var import_react_native_theming12 = require("@storybook/react-native-theming");
+var import_types3 = require("@storybook/core/types");
 var import_react15 = require("react");
 var import_react_native6 = require("react-native");
-var import_react_native_reanimated = require("react-native-reanimated");
+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_theming12 = require("@storybook/react-native-theming");
-var import_jsx_runtime22 = require("react/jsx-runtime");
-var BottomSheetBackdropComponent = (backdropComponentProps) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-  import_bottom_sheet2.BottomSheetBackdrop,
-  {
-    ...backdropComponentProps,
-    appearsOnIndex: 0,
-    disappearsOnIndex: -1,
-    pressBehavior: "close",
-    style: [backdropComponentProps.style, { backgroundColor: "rgba(0,0,0,0.5)" }]
-  }
-);
-var MobileMenuDrawer = (0, import_react15.forwardRef)(
-  ({ children, onStateChange }, ref) => {
-    const reducedMotion = (0, import_react_native_reanimated.useReducedMotion)();
-    const insets = (0, import_react_native_safe_area_context.useSafeAreaInsets)();
-    const theme = (0, import_react_native_theming12.useTheme)();
-    const menuBottomSheetRef = (0, import_react15.useRef)(null);
-    (0, import_react15.useImperativeHandle)(ref, () => ({
-      setMobileMenuOpen: (open) => {
-        if (open) {
-          onStateChange(true);
-          menuBottomSheetRef.current?.present();
-        } else {
-          import_react_native6.Keyboard.dismiss();
-          onStateChange(false);
-          menuBottomSheetRef.current?.dismiss();
-        }
-      }
-    }));
-    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-      import_bottom_sheet2.BottomSheetModal,
-      {
-        ref: menuBottomSheetRef,
-        index: 1,
-        animateOnMount: !reducedMotion,
-        onDismiss: () => {
-          onStateChange(false);
-        },
-        snapPoints: ["50%", "75%"],
-        enableDismissOnClose: true,
-        enableHandlePanningGesture: true,
-        enableContentPanningGesture: true,
-        keyboardBehavior: "extend",
-        keyboardBlurBehavior: "restore",
-        stackBehavior: "replace",
-        backdropComponent: BottomSheetBackdropComponent,
-        backgroundStyle: { backgroundColor: theme.background.content },
-        handleIndicatorStyle: { backgroundColor: theme.textMutedColor },
-        children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-          import_bottom_sheet2.BottomSheetScrollView,
-          {
-            keyboardShouldPersistTaps: "handled",
-            contentContainerStyle: {
-              paddingBottom: insets.bottom
-            },
-            children
-          }
-        )
-      }
-    );
-  }
-);
-
-// src/MobileAddonsPanel.tsx
-var import_bottom_sheet3 = require("@gorhom/bottom-sheet");
-var import_manager_api = require("@storybook/core/manager-api");
 var import_react_native_theming13 = require("@storybook/react-native-theming");
-var import_types3 = require("@storybook/core/types");
-var import_react16 = require("react");
-var import_react_native7 = require("react-native");
-var import_react_native_gesture_handler = require("react-native-gesture-handler");
-var import_react_native_reanimated2 = __toESM(require("react-native-reanimated"));
-var import_react_native_safe_area_context2 = require("react-native-safe-area-context");
-var import_react_native_theming14 = require("@storybook/react-native-theming");
-var import_jsx_runtime23 = require("react/jsx-runtime");
-var MobileAddonsPanel = (0, import_react16.forwardRef)(({ storyId, onStateChange }, ref) => {
-  const theme = (0, import_react_native_theming14.useTheme)();
-  const reducedMotion = (0, import_react_native_reanimated2.useReducedMotion)();
-  const addonsPanelBottomSheetRef = (0, import_react16.useRef)(null);
-  const insets = (0, import_react_native_safe_area_context2.useSafeAreaInsets)();
-  const panels = import_manager_api.addons.getElements(import_types3.Addon_TypesEnum.PANEL);
-  const [addonSelected, setAddonSelected] = (0, import_react16.useState)(Object.keys(panels)[0]);
-  const animatedPosition = (0, import_react_native_reanimated2.useSharedValue)(0);
-  (0, import_react_native_reanimated2.useAnimatedKeyboard)();
-  (0, import_react16.useImperativeHandle)(ref, () => ({
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var MobileAddonsPanel = (0, import_react15.forwardRef)(({ storyId, onStateChange }, ref) => {
+  const theme = (0, import_react_native_theming13.useTheme)();
+  const reducedMotion = (0, import_react_native_reanimated.useReducedMotion)();
+  const addonsPanelBottomSheetRef = (0, import_react15.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_react15.useImperativeHandle)(ref, () => ({
     setAddonsPanelOpen: (open) => {
       if (open) {
         onStateChange(true);
@@ -4667,14 +4574,14 @@ var MobileAddonsPanel = (0, import_react16.forwardRef)(({ storyId, onStateChange
       }
     }
   }));
-  const { height } = (0, import_react_native7.useWindowDimensions)();
-  const adjustedBottomSheetSize = (0, import_react_native_reanimated2.useAnimatedStyle)(() => {
+  const { height } = (0, import_react_native6.useWindowDimensions)();
+  const adjustedBottomSheetSize = (0, import_react_native_reanimated.useAnimatedStyle)(() => {
     return {
       maxHeight: height - animatedPosition.value - insets.bottom
     };
   }, [animatedPosition.value, height, insets.bottom]);
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-    import_bottom_sheet3.BottomSheetModal,
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    import_bottom_sheet2.BottomSheetModal,
     {
       ref: addonsPanelBottomSheetRef,
       index: 1,
@@ -4699,80 +4606,86 @@ var MobileAddonsPanel = (0, import_react16.forwardRef)(({ storyId, onStateChange
       enableDismissOnClose: true,
       enableHandlePanningGesture: true,
       stackBehavior: "replace",
-      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react_native_reanimated2.default.View, { style: [{ flex: 1 }, adjustedBottomSheetSize], children: [
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
-          import_react_native7.View,
-          {
-            style: { flexDirection: "row", borderBottomWidth: 1, borderBottomColor: "lightgrey" },
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-                import_react_native_gesture_handler.ScrollView,
-                {
-                  horizontal: true,
-                  showsHorizontalScrollIndicator: false,
-                  contentContainerStyle: {
-                    justifyContent: "center"
-                  },
-                  children: Object.values(panels).map(({ id, title }) => {
-                    const resolvedTitle = typeof title === "function" ? title({}) : title;
-                    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-                      Tab,
-                      {
-                        active: id === addonSelected,
-                        onPress: () => setAddonSelected(id),
-                        text: resolvedTitle
-                      },
-                      id
-                    );
-                  })
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-                IconButton,
-                {
-                  style: {
-                    marginRight: 4,
-                    marginBottom: 4,
-                    alignItems: "center",
-                    justifyContent: "center"
-                  },
-                  hitSlop: { top: 10, right: 10, bottom: 10, left: 10 },
-                  Icon: CloseIcon,
-                  onPress: () => {
-                    onStateChange(false);
-                    addonsPanelBottomSheetRef.current?.dismiss();
-                  }
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-          import_react_native_gesture_handler.ScrollView,
-          {
-            style: { flex: 1 },
-            contentContainerStyle: {
-              paddingBottom: insets.bottom + 16
-            },
-            children: (() => {
-              if (!storyId) {
-                return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_native7.View, { style: { alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_native7.Text, { children: "No Story Selected" }) });
-              }
-              if (Object.keys(panels).length === 0) {
-                return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_native7.View, { style: { alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_native7.Text, { children: "No addons loaded." }) });
-              }
-              return panels[addonSelected].render({ active: true });
-            })()
-          }
-        )
-      ] })
+      children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native_reanimated.default.View, { style: [{ flex: 1 }, adjustedBottomSheetSize], children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        AddonsTabs,
+        {
+          onClose: () => {
+            onStateChange(false);
+            addonsPanelBottomSheetRef.current?.dismiss();
+          },
+          storyId
+        }
+      ) })
     }
   );
 });
+var AddonsTabs = ({ onClose, storyId }) => {
+  const panels = import_manager_api.addons.getElements(import_types3.Addon_TypesEnum.PANEL);
+  const [addonSelected, setAddonSelected] = (0, import_react15.useState)(Object.keys(panels)[0]);
+  const insets = (0, import_react_native_safe_area_context.useSafeAreaInsets)();
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_react_native6.View, { style: { flex: 1 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_react_native6.View, { style: { flexDirection: "row", borderBottomWidth: 1, borderBottomColor: "lightgrey" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        import_react_native_gesture_handler.ScrollView,
+        {
+          horizontal: true,
+          showsHorizontalScrollIndicator: false,
+          contentContainerStyle: {
+            justifyContent: "center"
+          },
+          children: Object.values(panels).map(({ id, title }) => {
+            const resolvedTitle = typeof title === "function" ? title({}) : title;
+            return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+              Tab,
+              {
+                active: id === addonSelected,
+                onPress: () => setAddonSelected(id),
+                text: resolvedTitle
+              },
+              id
+            );
+          })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        IconButton,
+        {
+          style: {
+            marginRight: 4,
+            marginBottom: 4,
+            alignItems: "center",
+            justifyContent: "center"
+          },
+          hitSlop: { top: 10, right: 10, bottom: 10, left: 10 },
+          Icon: CloseIcon,
+          onPress: () => onClose?.()
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      import_react_native_gesture_handler.ScrollView,
+      {
+        style: { flex: 1 },
+        contentContainerStyle: {
+          paddingBottom: insets.bottom + 16
+        },
+        children: (() => {
+          if (!storyId) {
+            return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native6.View, { style: { alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native6.Text, { children: "No Story Selected" }) });
+          }
+          if (Object.keys(panels).length === 0) {
+            return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native6.View, { style: { alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native6.Text, { children: "No addons loaded." }) });
+          }
+          return panels[addonSelected].render({ active: true });
+        })()
+      }
+    )
+  ] });
+};
 var Tab = ({ active, onPress, text }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(TabButton, { active, onPress, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(TabText, { active, children: text }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(TabButton, { active, onPress, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(TabText, { active, children: text }) });
 };
-var TabButton = import_react_native_theming13.styled.TouchableOpacity(({ theme, active }) => ({
+var TabButton = import_react_native_theming12.styled.TouchableOpacity(({ theme, active }) => ({
   borderBottomWidth: active ? 2 : 0,
   borderBottomColor: active ? theme.barSelectedColor : void 0,
   overflow: "hidden",
@@ -4780,7 +4693,7 @@ var TabButton = import_react_native_theming13.styled.TouchableOpacity(({ theme,
   justifyContent: "center",
   alignItems: "center"
 }));
-var TabText = import_react_native_theming13.styled.Text(({ theme, active }) => ({
+var TabText = import_react_native_theming12.styled.Text(({ theme, active }) => ({
   color: active ? theme.barSelectedColor : theme.color.mediumdark,
   textAlign: "center",
   fontWeight: "bold",
@@ -4788,6 +4701,76 @@ var TabText = import_react_native_theming13.styled.Text(({ theme, active }) => (
   lineHeight: 12
 }));
 
+// src/MobileMenuDrawer.tsx
+var import_bottom_sheet3 = require("@gorhom/bottom-sheet");
+var import_react16 = require("react");
+var import_react_native7 = require("react-native");
+var import_react_native_reanimated2 = require("react-native-reanimated");
+var import_react_native_safe_area_context2 = require("react-native-safe-area-context");
+var import_react_native_theming14 = require("@storybook/react-native-theming");
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var BottomSheetBackdropComponent = (backdropComponentProps) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  import_bottom_sheet3.BottomSheetBackdrop,
+  {
+    ...backdropComponentProps,
+    appearsOnIndex: 0,
+    disappearsOnIndex: -1,
+    pressBehavior: "close",
+    style: [backdropComponentProps.style, { backgroundColor: "rgba(0,0,0,0.5)" }]
+  }
+);
+var MobileMenuDrawer = (0, import_react16.forwardRef)(
+  ({ children, onStateChange }, ref) => {
+    const reducedMotion = (0, import_react_native_reanimated2.useReducedMotion)();
+    const insets = (0, import_react_native_safe_area_context2.useSafeAreaInsets)();
+    const theme = (0, import_react_native_theming14.useTheme)();
+    const menuBottomSheetRef = (0, import_react16.useRef)(null);
+    (0, import_react16.useImperativeHandle)(ref, () => ({
+      setMobileMenuOpen: (open) => {
+        if (open) {
+          onStateChange(true);
+          menuBottomSheetRef.current?.present();
+        } else {
+          import_react_native7.Keyboard.dismiss();
+          onStateChange(false);
+          menuBottomSheetRef.current?.dismiss();
+        }
+      }
+    }));
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      import_bottom_sheet3.BottomSheetModal,
+      {
+        ref: menuBottomSheetRef,
+        index: 1,
+        animateOnMount: !reducedMotion,
+        onDismiss: () => {
+          onStateChange(false);
+        },
+        snapPoints: ["50%", "75%"],
+        enableDismissOnClose: true,
+        enableHandlePanningGesture: true,
+        enableContentPanningGesture: true,
+        keyboardBehavior: "extend",
+        keyboardBlurBehavior: "restore",
+        stackBehavior: "replace",
+        backdropComponent: BottomSheetBackdropComponent,
+        backgroundStyle: { backgroundColor: theme.background.content },
+        handleIndicatorStyle: { backgroundColor: theme.textMutedColor },
+        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          import_bottom_sheet3.BottomSheetScrollView,
+          {
+            keyboardShouldPersistTaps: "handled",
+            contentContainerStyle: {
+              paddingBottom: insets.bottom
+            },
+            children
+          }
+        )
+      }
+    );
+  }
+);
+
 // src/Layout.tsx
 var import_jsx_runtime24 = require("react/jsx-runtime");
 var Layout = ({
@@ -4801,6 +4784,73 @@ var Layout = ({
   const [drawerOpen, setDrawerOpen] = (0, import_react17.useState)(false);
   const addonPanelRef = (0, import_react17.useRef)(null);
   const insets = (0, import_react_native_safe_area_context3.useSafeAreaInsets)();
+  const { isDesktop } = useLayout();
+  if (isDesktop) {
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+      import_react_native8.View,
+      {
+        style: {
+          flex: 1,
+          paddingTop: insets.top,
+          backgroundColor: theme.background.content,
+          flexDirection: "row"
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            import_react_native8.View,
+            {
+              style: {
+                width: 240,
+                borderColor: theme.appBorderColor,
+                borderRightWidth: 1
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                import_react_native8.ScrollView,
+                {
+                  keyboardShouldPersistTaps: "handled",
+                  contentContainerStyle: {
+                    paddingBottom: insets.bottom
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                    Sidebar,
+                    {
+                      extra: [],
+                      previewInitialized: true,
+                      indexError: void 0,
+                      refs: {},
+                      setSelection: ({ storyId: newStoryId }) => {
+                        const channel = import_manager_api2.addons.getChannel();
+                        channel.emit(import_core_events.SET_CURRENT_STORY, { storyId: newStoryId });
+                      },
+                      status: {},
+                      index: storyHash,
+                      storyId: story?.id,
+                      refId: DEFAULT_REF_ID
+                    }
+                  )
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react_native8.View, { style: { flex: 1 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_native8.View, { style: { flex: 1 }, children }),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+              import_react_native8.View,
+              {
+                style: {
+                  height: 300,
+                  borderTopWidth: 1,
+                  borderColor: theme.appBorderColor,
+                  paddingTop: 4
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(AddonsTabs, { storyId: story?.id })
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react_native8.View, { style: { flex: 1, paddingTop: insets.top, backgroundColor: theme.background.content }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_native8.View, { style: { flex: 1 }, children }),
     /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(MobileMenuDrawer, { ref: mobileMenuDrawerRef, onStateChange: setDrawerOpen, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
@@ -4863,7 +4913,7 @@ var Container3 = import_react_native_theming15.styled.View(({ theme }) => ({
   alignSelf: "flex-end",
   width: "100%",
   zIndex: 10,
-  background: theme.barBg,
+  backgroundColor: theme.barBg,
   borderTopColor: theme.appBorderColor,
   borderTopWidth: 1
 }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native-ui",
-  "version": "8.3.0-alpha.1",
+  "version": "8.3.0-alpha.2",
   "description": "ui components for react native storybook",
   "keywords": [
     "react",
@@ -57,9 +57,9 @@
     "typescript": "~5.3.3"
   },
   "dependencies": {
-    "@storybook/core": "^8.3.0",
-    "@storybook/react": "^8.3.0",
-    "@storybook/react-native-theming": "^8.3.0-alpha.1",
+    "@storybook/core": "^8.3.1",
+    "@storybook/react": "^8.3.1",
+    "@storybook/react-native-theming": "^8.3.0-alpha.2",
     "fuse.js": "^7.0.0",
     "memoizerific": "^1.11.3",
     "polished": "^4.3.1",
@@ -80,5 +80,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "44d795b125a02dc9f669187d37d6b5f348bb2ea8"
+  "gitHead": "afcce3fd6cfd6625afaddb06527c377449300d6d"
 }

package/src/Layout.tsx

@@ -1,9 +1,9 @@
 import { SET_CURRENT_STORY } from '@storybook/core/core-events';
 import { addons } from '@storybook/core/manager-api';
-import { styled, useTheme } from '@storybook/react-native-theming';
 import { type API_IndexHash, type Args, type StoryContext } from '@storybook/core/types';
+import { styled, useTheme } from '@storybook/react-native-theming';
 import { ReactNode, useRef, useState } from 'react';
-import { Platform, Text, View } from 'react-native';
+import { Platform, ScrollView, Text, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { IconButton } from './IconButton';
 import { Sidebar } from './Sidebar';
@@ -12,8 +12,9 @@ import { BottomBarToggleIcon } from './icon/BottomBarToggleIcon';
 import { MenuIcon } from './icon/MenuIcon';
 
 import type { ReactRenderer } from '@storybook/react';
+import { useLayout } from './LayoutProvider';
+import { AddonsTabs, MobileAddonsPanel, MobileAddonsPanelRef } from './MobileAddonsPanel';
 import { MobileMenuDrawer, MobileMenuDrawerRef } from './MobileMenuDrawer';
-import { MobileAddonsPanel, MobileAddonsPanelRef } from './MobileAddonsPanel';
 
 export const Layout = ({
   storyHash,
@@ -30,10 +31,71 @@ export const Layout = ({
   const [drawerOpen, setDrawerOpen] = useState(false);
   const addonPanelRef = useRef<MobileAddonsPanelRef>(null);
   const insets = useSafeAreaInsets();
+  const { isDesktop } = useLayout();
+
+  if (isDesktop) {
+    return (
+      <View
+        style={{
+          flex: 1,
+          paddingTop: insets.top,
+          backgroundColor: theme.background.content,
+          flexDirection: 'row',
+        }}
+      >
+        <View
+          style={{
+            width: 240,
+            borderColor: theme.appBorderColor,
+            borderRightWidth: 1,
+          }}
+        >
+          <ScrollView
+            keyboardShouldPersistTaps="handled"
+            contentContainerStyle={{
+              paddingBottom: insets.bottom,
+            }}
+          >
+            <Sidebar
+              extra={[]}
+              previewInitialized
+              indexError={undefined}
+              refs={{}}
+              setSelection={({ storyId: newStoryId }) => {
+                const channel = addons.getChannel();
+
+                channel.emit(SET_CURRENT_STORY, { storyId: newStoryId });
+              }}
+              status={{}}
+              index={storyHash}
+              storyId={story?.id}
+              refId={DEFAULT_REF_ID}
+            />
+          </ScrollView>
+        </View>
+
+        <View style={{ flex: 1 }}>
+          <View style={{ flex: 1 }}>{children}</View>
+
+          <View
+            style={{
+              height: 300,
+              borderTopWidth: 1,
+              borderColor: theme.appBorderColor,
+              paddingTop: 4,
+            }}
+          >
+            <AddonsTabs storyId={story?.id} />
+          </View>
+        </View>
+      </View>
+    );
+  }
 
   return (
     <View style={{ flex: 1, paddingTop: insets.top, backgroundColor: theme.background.content }}>
       <View style={{ flex: 1 }}>{children}</View>
+
       <MobileMenuDrawer ref={mobileMenuDrawerRef} onStateChange={setDrawerOpen}>
         <Sidebar
           extra={[]}
@@ -51,6 +113,7 @@ export const Layout = ({
           refId={DEFAULT_REF_ID}
         />
       </MobileMenuDrawer>
+
       <MobileAddonsPanel ref={addonPanelRef} storyId={story?.id} onStateChange={setMenuOpen} />
       {(Platform.OS !== 'android' || (!menuOpen && !drawerOpen)) && (
         <Container style={{ marginBottom: insets.bottom }}>
@@ -93,7 +156,7 @@ const Container = styled.View(({ theme }) => ({
   alignSelf: 'flex-end',
   width: '100%',
   zIndex: 10,
-  background: theme.barBg,
+  backgroundColor: theme.barBg,
   borderTopColor: theme.appBorderColor,
   borderTopWidth: 1,
 }));

package/src/LayoutProvider.tsx

@@ -1,90 +1,32 @@
 import type { FC, PropsWithChildren } from 'react';
-import React, { createContext, useCallback, useContext, useMemo, useRef } from 'react';
-import { BREAKPOINT } from './constants';
+import { createContext, useContext, useMemo } from 'react';
 import { useWindowDimensions } from 'react-native';
-// import {
-// BottomSheetModal,
-// BottomSheetModalProvider,
-// BottomSheetScrollView,
-// } from '@gorhom/bottom-sheet';
+import { BREAKPOINT } from './constants';
 
 type LayoutContextType = {
-  // isMobileMenuOpen: boolean;
-  openMobileMenu: () => void;
-  closeMobileMenu: () => void;
-  // isMobileAboutOpen: boolean;
-  // setMobileAboutOpen: React.Dispatch<React.SetStateAction<boolean>>;
-  // isMobilePanelOpen: boolean;
-  // setMobilePanelOpen: React.Dispatch<React.SetStateAction<boolean>>;
   isDesktop: boolean;
   isMobile: boolean;
 };
 
 const LayoutContext = createContext<LayoutContextType>({
-  // isMobileMenuOpen: false,
-
-  openMobileMenu: () => {},
-  closeMobileMenu: () => {},
-  // isMobileAboutOpen: false,
-  // setMobileAboutOpen: () => {},
-  // isMobilePanelOpen: false,
-  // setMobilePanelOpen: () => {},
-
   isDesktop: false,
-  isMobile: false,
+  isMobile: true,
 });
 
 export const LayoutProvider: FC<PropsWithChildren> = ({ children }) => {
-  // const [isMobileMenuOpen, setMobileMenuOpen] = useState(false);
-  // const [isMobileAboutOpen, setMobileAboutOpen] = useState(false);
-  // const [isMobilePanelOpen, setMobilePanelOpen] = useState(false);
   const { width } = useWindowDimensions();
   const isDesktop = width >= BREAKPOINT;
   const isMobile = !isDesktop;
-  // const bottomSheetModalRef = useRef<BottomSheetModal>(null);
-
-  const openMobileMenu = useCallback(() => {
-    // bottomSheetModalRef.current?.present();
-  }, []);
-  const closeMobileMenu = useCallback(() => {
-    // bottomSheetModalRef.current?.dismiss();
-  }, []);
 
   const contextValue = useMemo(
     () => ({
-      // isMobileMenuOpen,
-      openMobileMenu,
-      closeMobileMenu,
-      // isMobileAboutOpen,
-      // setMobileAboutOpen,
-      // isMobilePanelOpen,
-      // setMobilePanelOpen,
       isDesktop,
       isMobile,
     }),
-    [
-      // isMobileMenuOpen,
-      openMobileMenu,
-      closeMobileMenu,
-      // // isMobileAboutOpen,
-      // setMobileAboutOpen,
-      // isMobilePanelOpen,
-      // setMobilePanelOpen,
-      isDesktop,
-      isMobile,
-    ]
+    [isDesktop, isMobile]
   );
 
-  return (
-    // <BottomSheetModalProvider>
-    <>
-      <LayoutContext.Provider value={contextValue}>{children}</LayoutContext.Provider>
-      {/* <BottomSheetModal ref={bottomSheetModalRef} snapPoints={['70%', '50%']}>
-        <BottomSheetScrollView>bla</BottomSheetScrollView>
-      </BottomSheetModal> */}
-    </>
-    // </BottomSheetModalProvider>
-  );
+  return <LayoutContext.Provider value={contextValue}>{children}</LayoutContext.Provider>;
 };
 
 export const useLayout = () => useContext(LayoutContext);

package/src/MobileAddonsPanel.tsx

@@ -30,8 +30,6 @@ export const MobileAddonsPanel = forwardRef<
   const addonsPanelBottomSheetRef = useRef<BottomSheetModal>(null);
   const insets = useSafeAreaInsets();
 
-  const panels = addons.getElements(Addon_TypesEnum.PANEL);
-  const [addonSelected, setAddonSelected] = useState(Object.keys(panels)[0]);
   const animatedPosition = useSharedValue(0);
 
   // bringing in animated keyboard disables android resizing
@@ -87,76 +85,91 @@ export const MobileAddonsPanel = forwardRef<
       stackBehavior="replace"
     >
       <Animated.View style={[{ flex: 1 }, adjustedBottomSheetSize]}>
-        <View
-          style={{ flexDirection: 'row', borderBottomWidth: 1, borderBottomColor: 'lightgrey' }}
-        >
-          <ScrollView
-            horizontal
-            showsHorizontalScrollIndicator={false}
-            contentContainerStyle={{
-              justifyContent: 'center',
-            }}
-          >
-            {Object.values(panels).map(({ id, title }) => {
-              const resolvedTitle = typeof title === 'function' ? title({}) : title;
-
-              return (
-                <Tab
-                  key={id}
-                  active={id === addonSelected}
-                  onPress={() => setAddonSelected(id)}
-                  text={resolvedTitle}
-                />
-              );
-            })}
-          </ScrollView>
-
-          <IconButton
-            style={{
-              marginRight: 4,
-              marginBottom: 4,
-              alignItems: 'center',
-              justifyContent: 'center',
-            }}
-            hitSlop={{ top: 10, right: 10, bottom: 10, left: 10 }}
-            Icon={CloseIcon}
-            onPress={() => {
-              onStateChange(false);
-              addonsPanelBottomSheetRef.current?.dismiss();
-            }}
-          />
-        </View>
+        <AddonsTabs
+          onClose={() => {
+            onStateChange(false);
+            addonsPanelBottomSheetRef.current?.dismiss();
+          }}
+          storyId={storyId}
+        />
+      </Animated.View>
+    </BottomSheetModal>
+  );
+});
+
+export const AddonsTabs = ({ onClose, storyId }: { onClose?: () => void; storyId?: string }) => {
+  const panels = addons.getElements(Addon_TypesEnum.PANEL);
+
+  const [addonSelected, setAddonSelected] = useState(Object.keys(panels)[0]);
+
+  const insets = useSafeAreaInsets();
+
+  return (
+    <View style={{ flex: 1 }}>
+      <View style={{ flexDirection: 'row', borderBottomWidth: 1, borderBottomColor: 'lightgrey' }}>
         <ScrollView
-          style={{ flex: 1 }}
-          // keyboardShouldPersistTaps="handled"
+          horizontal
+          showsHorizontalScrollIndicator={false}
           contentContainerStyle={{
-            paddingBottom: insets.bottom + 16,
+            justifyContent: 'center',
           }}
         >
-          {(() => {
-            if (!storyId) {
-              return (
-                <View style={{ alignItems: 'center', justifyContent: 'center' }}>
-                  <Text>No Story Selected</Text>
-                </View>
-              );
-            }
-
-            if (Object.keys(panels).length === 0) {
-              return (
-                <View style={{ alignItems: 'center', justifyContent: 'center' }}>
-                  <Text>No addons loaded.</Text>
-                </View>
-              );
-            }
-
-            return panels[addonSelected].render({ active: true });
-          })()}
+          {Object.values(panels).map(({ id, title }) => {
+            const resolvedTitle = typeof title === 'function' ? title({}) : title;
+
+            return (
+              <Tab
+                key={id}
+                active={id === addonSelected}
+                onPress={() => setAddonSelected(id)}
+                text={resolvedTitle}
+              />
+            );
+          })}
         </ScrollView>
-      </Animated.View>
-    </BottomSheetModal>
+
+        <IconButton
+          style={{
+            marginRight: 4,
+            marginBottom: 4,
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+          hitSlop={{ top: 10, right: 10, bottom: 10, left: 10 }}
+          Icon={CloseIcon}
+          onPress={() => onClose?.()}
+        />
+      </View>
+      <ScrollView
+        style={{ flex: 1 }}
+        // keyboardShouldPersistTaps="handled"
+        contentContainerStyle={{
+          paddingBottom: insets.bottom + 16,
+        }}
+      >
+        {(() => {
+          if (!storyId) {
+            return (
+              <View style={{ alignItems: 'center', justifyContent: 'center' }}>
+                <Text>No Story Selected</Text>
+              </View>
+            );
+          }
+
+          if (Object.keys(panels).length === 0) {
+            return (
+              <View style={{ alignItems: 'center', justifyContent: 'center' }}>
+                <Text>No addons loaded.</Text>
+              </View>
+            );
+          }
+
+          return panels[addonSelected].render({ active: true });
+        })()}
+      </ScrollView>
+    </View>
   );
-});
+};
 
 const Tab = ({ active, onPress, text }: { active: boolean; onPress: () => void; text: string }) => {
   return (

package/src/Search.tsx

@@ -1,22 +1,23 @@
+import { BottomSheetTextInput } from '@gorhom/bottom-sheet';
 import { styled } from '@storybook/react-native-theming';
 import type { IFuseOptions } from 'fuse.js';
 import Fuse from 'fuse.js';
-import React, { useRef, useState, useCallback } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
+import { TextInput, View } from 'react-native';
+import { CloseIcon } from './icon/CloseIcon';
+import { SearchIcon } from './icon/SearchIcon';
+import { useLayout } from './LayoutProvider';
 import {
   type CombinedDataset,
+  type GetSearchItemProps,
+  isExpandType,
+  type SearchChildrenFn,
   type SearchItem,
   type SearchResult,
-  type SearchChildrenFn,
   type Selection,
-  type GetSearchItemProps,
-  isExpandType,
 } from './types';
-import { searchItem } from './util/tree';
 import { getGroupStatus, getHighestStatus } from './util/status';
-import { SearchIcon } from './icon/SearchIcon';
-import { CloseIcon } from './icon/CloseIcon';
-import { TextInput, View } from 'react-native';
-import { BottomSheetTextInput } from '@gorhom/bottom-sheet';
+import { searchItem } from './util/tree';
 
 const DEFAULT_MAX_SEARCH_RESULTS = 50;
 
@@ -56,7 +57,20 @@ const SearchField = styled.View({
   position: 'relative',
 });
 
-const Input = styled(BottomSheetTextInput)(({ theme }) => ({
+const BottomSheetInput = styled(BottomSheetTextInput)(({ theme }) => ({
+  height: 32,
+  paddingLeft: 28,
+  paddingRight: 28,
+  borderWidth: 1,
+  borderColor: theme.appBorderColor,
+  backgroundColor: 'transparent',
+  borderRadius: 4,
+  fontSize: theme.typography.size.s1 + 1,
+  color: theme.color.defaultText,
+  width: '100%',
+}));
+
+const Input = styled(TextInput)(({ theme }) => ({
   height: 32,
   paddingLeft: 28,
   paddingRight: 28,
@@ -94,12 +108,16 @@ export const Search = React.memo<{
   const [inputValue, setInputValue] = useState(initialQuery);
   const [isOpen, setIsOpen] = useState(false);
   const [allComponents, showAllComponents] = useState(false);
+  const { isMobile } = useLayout();
 
   const selectStory = useCallback(
     (id: string, refId: string) => {
       setSelection({ storyId: id, refId });
+
       inputRef.current?.blur();
 
+      setIsOpen(false);
+
       showAllComponents(false);
     },
     [setSelection]
@@ -212,12 +230,17 @@ export const Search = React.memo<{
           <SearchIcon />
         </SearchIconWrapper>
 
-        <Input
-          ref={inputRef as any} // TODO find solution for this
-          onChangeText={setInputValue}
-          onFocus={() => setIsOpen(true)}
-          onBlur={() => setIsOpen(false)}
-        />
+        {isMobile ? (
+          <BottomSheetInput
+            ref={inputRef as any} // TODO find solution for this
+            onChangeText={setInputValue}
+            onFocus={() => setIsOpen(true)}
+            onBlur={() => setIsOpen(false)}
+          />
+        ) : (
+          <Input ref={inputRef} onChangeText={setInputValue} onFocus={() => setIsOpen(true)} />
+        )}
+
         {isOpen && (
           <ClearIcon
             onPress={() => {

package/src/SearchResults.tsx

@@ -207,7 +207,7 @@ export const SearchResults: FC<{
     <ResultsList>
       {results.length > 0 && !query && (
         <RecentlyOpenedTitle>
-          Recently opened
+          <Text>Recently opened</Text>
           <IconButton onPress={handleClearLastViewed} />
         </RecentlyOpenedTitle>
       )}

package/src/Sidebar.tsx

@@ -19,7 +19,7 @@ const Container = styled.View(({ theme }) => ({
   height: '100%',
   display: 'flex',
   flexDirection: 'column',
-  background: theme.background.content,
+  backgroundColor: theme.background.content,
 }));
 
 const Top = styled.View({

package/src/Tree.tsx

@@ -53,7 +53,7 @@ export const Node = React.memo<NodeProps>(function Node({
   setExpanded,
   onSelectStoryId,
 }) {
-  const { isDesktop, isMobile, closeMobileMenu } = useLayout();
+  const { isDesktop } = useLayout();
 
   if (!isDisplayed) {
     return null;
@@ -73,7 +73,6 @@ export const Node = React.memo<NodeProps>(function Node({
           depth={isOrphan ? item.depth : item.depth - 1}
           onPress={() => {
             onSelectStoryId(item.id);
-            if (isMobile) closeMobileMenu();
           }}
         >
           {(item.renderLabel as (i: typeof item) => React.ReactNode)?.(item) || item.name}
@@ -147,7 +146,7 @@ export const LeafNodeStyleWrapper = styled.View(({ theme }) => ({
   alignItems: 'center',
   paddingRight: 20,
   color: theme.color.defaultText,
-  background: 'transparent',
+  backgroundColor: 'transparent',
   minHeight: 28,
   borderRadius: 4,
 }));

package/src/TreeNode.tsx

@@ -36,7 +36,7 @@ const BranchNode = styled.TouchableOpacity<{
   alignSelf: 'flex-start',
   paddingLeft: (isExpandable ? 8 : 22) + depth * 18,
 
-  background: 'transparent',
+  backgroundColor: 'transparent',
   minHeight: 28,
   borderRadius: 4,
   gap: 6,
@@ -45,7 +45,7 @@ const BranchNode = styled.TouchableOpacity<{
 
   // will this actually do anything?
   '&:hover, &:focus': {
-    background: transparentize(0.93, theme.color.secondary),
+    backgroundColor: transparentize(0.93, theme.color.secondary),
     outline: 'none',
   },
 }));

package/src/constants.ts

@@ -1,4 +1,4 @@
-export const BREAKPOINT = 600;
+export const BREAKPOINT = 1000;
 export const MEDIA_DESKTOP_BREAKPOINT = `@media (min-width: ${BREAKPOINT}px)`;
 export const MOBILE_TRANSITION_DURATION = 300;
 export const DEFAULT_REF_ID = 'storybook_internal';