@storybook/react-native-ui 8.5.2-alpha.0 → 8.5.2-alpha.2

package/dist/index.js

@@ -3087,17 +3087,13 @@ var GroupNode = import_react.default.memo(function GroupNode2({
   ...props
 }) {
   const theme = (0, import_react_native_theming2.useTheme)();
+  const color = (0, import_react.useMemo)(() => {
+    return theme.base === "dark" ? theme.color.primary : theme.color.ultraviolet;
+  }, [theme.base, theme.color.primary, theme.color.ultraviolet]);
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(BranchNode, { isExpandable, ...props, children: [
     /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Wrapper, { children: [
       isExpandable && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CollapseIcon, { isExpanded }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        GroupIcon,
-        {
-          width: "14",
-          height: "14",
-          color: theme.base === "dark" ? theme.color.primary : theme.color.ultraviolet
-        }
-      )
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(GroupIcon, { width: 14, height: 14, color })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(BranchNodeText, { children })
   ] });
@@ -3105,10 +3101,13 @@ var GroupNode = import_react.default.memo(function GroupNode2({
 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)(() => {
+      return theme.color.secondary;
+    }, [theme.color.secondary]);
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(BranchNode, { isExpandable, ...props, children: [
       /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Wrapper, { children: [
         isExpandable && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CollapseIcon, { isExpanded }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ComponentIcon, { width: 12, height: 12, color: theme.color.secondary })
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ComponentIcon, { width: 12, height: 12, color })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(BranchNodeText, { children })
     ] });
@@ -3119,22 +3118,18 @@ var StoryNode = import_react.default.memo(function StoryNode2({
   ...props
 }) {
   const theme = (0, import_react_native_theming2.useTheme)();
+  const color = (0, import_react.useMemo)(() => {
+    return props.selected ? theme.color.lightest : theme.color.seafoam;
+  }, [props.selected, theme.color.lightest, theme.color.seafoam]);
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(LeafNode, { ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Wrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      StoryIcon,
-      {
-        width: 14,
-        height: 14,
-        color: props.selected ? theme.color.lightest : theme.color.seafoam
-      }
-    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Wrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StoryIcon, { width: 14, height: 14, color }) }),
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(LeafNodeText, { selected: props.selected, children })
   ] });
 });
 
 // src/Tree.tsx
 var import_react_native_theming7 = require("@storybook/react-native-theming");
-var import_react5 = __toESM(require("react"));
+var import_react8 = __toESM(require("react"));
 
 // src/Button.tsx
 var import_react_native_theming3 = require("@storybook/react-native-theming");
@@ -3294,6 +3289,7 @@ IconButton.displayName = "IconButton";
 // src/icon/CollapseAllIcon.tsx
 var import_react_native_svg5 = require("react-native-svg");
 var import_react_native_theming4 = require("@storybook/react-native-theming");
+var import_react4 = require("react");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var CollapseAllIcon = ({
   color,
@@ -3303,11 +3299,14 @@ var CollapseAllIcon = ({
   ...props
 }) => {
   const theme = (0, import_react_native_theming4.useTheme)();
+  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)(
     import_react_native_svg5.Path,
     {
       d: "M3.354.146a.5.5 0 10-.708.708l4 4a.5.5 0 00.708 0l4-4a.5.5 0 00-.708-.708L7 3.793 3.354.146zM6.646 9.146a.5.5 0 01.708 0l4 4a.5.5 0 01-.708.708L7 10.207l-3.646 3.647a.5.5 0 01-.708-.708l4-4z",
-      fill: color ?? theme.color.defaultText
+      fill: fillColor
     }
   ) });
 };
@@ -3315,6 +3314,7 @@ var CollapseAllIcon = ({
 // src/icon/ExpandAllIcon.tsx
 var import_react_native_svg6 = require("react-native-svg");
 var import_react_native_theming5 = require("@storybook/react-native-theming");
+var import_react5 = require("react");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var ExpandAllIcon = ({
   color,
@@ -3324,17 +3324,20 @@ var ExpandAllIcon = ({
   ...props
 }) => {
   const theme = (0, import_react_native_theming5.useTheme)();
+  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)(
     import_react_native_svg6.Path,
     {
       d: "M7.354.146l4 4a.5.5 0 01-.708.708L7 1.207 3.354 4.854a.5.5 0 11-.708-.708l4-4a.5.5 0 01.708 0zM11.354 9.146a.5.5 0 010 .708l-4 4a.5.5 0 01-.708 0l-4-4a.5.5 0 11.708-.708L7 12.793l3.646-3.647a.5.5 0 01.708 0z",
-      fill: color ?? theme.color.defaultText
+      fill: fillColor
     }
   ) });
 };
 
 // src/hooks/useExpanded.ts
-var import_react4 = require("react");
+var import_react6 = require("react");
 
 // src/util/tree.ts
 var import_memoizerific = __toESM(require("memoizerific"));
@@ -3415,21 +3418,22 @@ var useExpanded = ({
   rootIds,
   selectedStoryId
 }) => {
-  const [expanded, setExpanded] = (0, import_react4.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_react4.useCallback)(({ ids, value }) => {
+  const updateExpanded = (0, import_react6.useCallback)(({ ids, value }) => {
     setExpanded({ ids, value });
   }, []);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     setExpanded({ ids: getAncestorIds(data, selectedStoryId), value: true });
   }, [data, selectedStoryId]);
   return [expanded, updateExpanded];
 };
 
 // src/util/status.tsx
+var import_react7 = require("react");
 var import_react_native_theming6 = require("@storybook/react-native-theming");
 var import_react_native_svg7 = __toESM(require("react-native-svg"));
 var import_jsx_runtime10 = require("react/jsx-runtime");
@@ -3441,13 +3445,10 @@ function SmallIcons(props) {
 }
 function LoadingIcons(props) {
   const theme = (0, import_react_native_theming6.useTheme)();
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-    SmallIcons,
-    {
-      color: theme.base === "light" ? theme.color.mediumdark : theme.color.darker,
-      ...props
-    }
-  );
+  const color = (0, import_react7.useMemo)(() => {
+    return theme.base === "light" ? theme.color.mediumdark : theme.color.darker;
+  }, [theme.base, theme.color.darker, theme.color.mediumdark]);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SmallIcons, { color, ...props });
 }
 var statusPriority = ["unknown", "pending", "success", "warn", "error"];
 var statusMapping = {
@@ -3483,7 +3484,7 @@ var import_jsx_runtime11 = require("react/jsx-runtime");
 var TextItem = import_react_native_theming7.styled.Text(({ theme }) => ({
   color: theme.color.defaultText
 }));
-var Node = import_react5.default.memo(function Node2({
+var Node = import_react8.default.memo(function Node2({
   item,
   refId,
   isOrphan,
@@ -3611,9 +3612,9 @@ var CollapseButton = import_react_native_theming7.styled.TouchableOpacity(({}) =
   cursor: "pointer",
   height: 28
 }));
-var Tree = import_react5.default.memo(function Tree2({ isMain, refId, data, status, docsMode, selectedStoryId, onSelectStoryId }) {
-  const containerRef = (0, import_react5.useRef)(null);
-  const [rootIds, orphanIds, initialExpanded] = (0, import_react5.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];
@@ -3629,7 +3630,7 @@ var Tree = import_react5.default.memo(function Tree2({ isMain, refId, data, stat
     ),
     [data]
   );
-  const { expandableDescendants } = (0, import_react5.useMemo)(() => {
+  const { expandableDescendants } = (0, import_react8.useMemo)(() => {
     return [...orphanIds, ...rootIds].reduce(
       (acc, nodeId) => {
         acc.expandableDescendants[nodeId] = getDescendantIds(data, nodeId, false).filter(
@@ -3640,7 +3641,7 @@ var Tree = import_react5.default.memo(function Tree2({ isMain, refId, data, stat
       { orphansFirst: [], expandableDescendants: {} }
     );
   }, [data, rootIds, orphanIds]);
-  const singleStoryComponentIds = (0, import_react5.useMemo)(() => {
+  const singleStoryComponentIds = (0, import_react8.useMemo)(() => {
     return Object.keys(data).filter((id) => {
       const entry = data[id];
       if (entry.type !== "component")
@@ -3656,12 +3657,12 @@ var Tree = import_react5.default.memo(function Tree2({ isMain, refId, data, stat
       return false;
     });
   }, [data]);
-  const collapsedItems = (0, import_react5.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_react5.useMemo)(() => {
+  const collapsedData = (0, import_react8.useMemo)(() => {
     return singleStoryComponentIds.reduce(
       (acc, id) => {
         const { children, parent, name } = data[id];
@@ -3682,7 +3683,7 @@ var Tree = import_react5.default.memo(function Tree2({ isMain, refId, data, stat
       { ...data }
     );
   }, [data]);
-  const ancestry = (0, import_react5.useMemo)(() => {
+  const ancestry = (0, import_react8.useMemo)(() => {
     return collapsedItems.reduce(
       (acc, id) => Object.assign(acc, { [id]: getAncestorIds(collapsedData, id) }),
       {}
@@ -3696,8 +3697,8 @@ var Tree = import_react5.default.memo(function Tree2({ isMain, refId, data, stat
     selectedStoryId,
     onSelectStoryId
   });
-  const groupStatus = (0, import_react5.useMemo)(() => getGroupStatus(collapsedData, status), [collapsedData, status]);
-  const treeItems = (0, import_react5.useMemo)(() => {
+  const groupStatus = (0, import_react8.useMemo)(() => getGroupStatus(collapsedData, status), [collapsedData, status]);
+  const treeItems = (0, import_react8.useMemo)(() => {
     return collapsedItems.map((itemId) => {
       const item = collapsedData[itemId];
       const id = createId(itemId, refId);
@@ -3765,13 +3766,13 @@ var Container = import_react_native_theming7.styled.View((props) => ({
   marginTop: props.hasOrphans ? 20 : 0,
   marginBottom: 20
 }));
-var Root = import_react5.default.memo(function Root2({
+var Root = import_react8.default.memo(function Root2({
   setExpanded,
   isFullyExpanded,
   expandableDescendants,
   ...props
 }) {
-  const setFullyExpanded = (0, import_react5.useCallback)(
+  const setFullyExpanded = (0, import_react8.useCallback)(
     () => setExpanded({ ids: expandableDescendants, value: !isFullyExpanded }),
     [setExpanded, isFullyExpanded, expandableDescendants]
   );
@@ -3787,10 +3788,10 @@ var Root = import_react5.default.memo(function Root2({
 });
 
 // src/LayoutProvider.tsx
-var import_react6 = 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_react6.createContext)({
+var LayoutContext = (0, import_react9.createContext)({
   isDesktop: false,
   isMobile: true
 });
@@ -3798,7 +3799,7 @@ var LayoutProvider = ({ children }) => {
   const { width } = (0, import_react_native.useWindowDimensions)();
   const isDesktop = width >= BREAKPOINT;
   const isMobile = !isDesktop;
-  const contextValue = (0, import_react6.useMemo)(
+  const contextValue = (0, import_react9.useMemo)(
     () => ({
       isDesktop,
       isMobile
@@ -3807,19 +3808,19 @@ var LayoutProvider = ({ children }) => {
   );
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(LayoutContext.Provider, { value: contextValue, children });
 };
-var useLayout = () => (0, import_react6.useContext)(LayoutContext);
+var useLayout = () => (0, import_react9.useContext)(LayoutContext);
 
 // src/Explorer.tsx
-var import_react8 = __toESM(require("react"));
+var import_react11 = __toESM(require("react"));
 
 // src/Refs.tsx
-var import_react7 = __toESM(require("react"));
+var import_react10 = __toESM(require("react"));
 var import_react_native_theming8 = require("@storybook/react-native-theming");
 var import_jsx_runtime13 = require("react/jsx-runtime");
 var Wrapper2 = import_react_native_theming8.styled.View(({}) => ({
   position: "relative"
 }));
-var Ref = import_react7.default.memo(function Ref2(props) {
+var Ref = import_react10.default.memo(function Ref2(props) {
   const {
     index,
     id: refId,
@@ -3834,20 +3835,20 @@ var Ref = import_react7.default.memo(function Ref2(props) {
     previewInitialized,
     setSelection
   } = props;
-  const length = (0, import_react7.useMemo)(() => index ? Object.keys(index).length : 0, [index]);
+  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_react7.useState)(expanded);
-  (0, import_react7.useEffect)(() => {
+  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_react7.useCallback)(
+  const onSelectStoryId = (0, import_react10.useCallback)(
     (storyId) => {
       setSelection({ refId, storyId });
     },
@@ -3871,16 +3872,16 @@ var Ref = import_react7.default.memo(function Ref2(props) {
 // src/Explorer.tsx
 var import_react_native2 = require("react-native");
 var import_jsx_runtime14 = require("react/jsx-runtime");
-var import_react9 = require("react");
-var Explorer = import_react8.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_react8.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_react9.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,
@@ -3894,14 +3895,14 @@ var Explorer = import_react8.default.memo(function Explorer2({
 });
 
 // src/Sidebar.tsx
-var import_react14 = __toESM(require("react"));
+var import_react17 = __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_react13 = __toESM(require("react"));
 var import_react_native3 = require("react-native");
 
 // src/icon/CloseIcon.tsx
@@ -3998,6 +3999,8 @@ var BottomSheetInput = (0, import_react_native_theming9.styled)(import_bottom_sh
   height: 32,
   paddingLeft: 28,
   paddingRight: 28,
+  paddingTop: import_react_native3.Platform.OS === "android" ? 0 : void 0,
+  paddingBottom: import_react_native3.Platform.OS === "android" ? 0 : void 0,
   borderWidth: 1,
   borderColor: theme.appBorderColor,
   backgroundColor: "transparent",
@@ -4031,13 +4034,13 @@ var ClearIcon = import_react_native_theming9.styled.TouchableOpacity(({ theme })
   justifyContent: "center",
   height: "100%"
 }));
-var Search = import_react10.default.memo(function Search2({ children, dataset, setSelection, getLastViewed, initialQuery = "" }) {
-  const inputRef = (0, import_react10.useRef)(null);
-  const [inputValue, setInputValue] = (0, import_react10.useState)(initialQuery);
-  const [isOpen, setIsOpen] = (0, import_react10.useState)(false);
-  const [allComponents, showAllComponents] = (0, import_react10.useState)(false);
+var Search = import_react13.default.memo(function Search2({ children, dataset, setSelection, getLastViewed, initialQuery = "" }) {
+  const inputRef = (0, import_react13.useRef)(null);
+  const [inputValue, setInputValue] = (0, import_react13.useState)(initialQuery);
+  const [isOpen, setIsOpen] = (0, import_react13.useState)(false);
+  const [allComponents, showAllComponents] = (0, import_react13.useState)(false);
   const { isMobile } = useLayout();
-  const selectStory = (0, import_react10.useCallback)(
+  const selectStory = (0, import_react13.useCallback)(
     (id, refId) => {
       setSelection({ storyId: id, refId });
       inputRef.current?.blur();
@@ -4046,7 +4049,7 @@ var Search = import_react10.default.memo(function Search2({ children, dataset, s
     },
     [setSelection]
   );
-  const getItemProps = (0, import_react10.useCallback)(
+  const getItemProps = (0, import_react13.useCallback)(
     ({ item: result }) => {
       return {
         icon: result?.item?.type === "component" ? "component" : "story",
@@ -4069,7 +4072,7 @@ var Search = import_react10.default.memo(function Search2({ children, dataset, s
     },
     [selectStory]
   );
-  const makeFuse = (0, import_react10.useCallback)(() => {
+  const makeFuse = (0, import_react13.useCallback)(() => {
     const list = dataset.entries.reduce((acc, [refId, { index, status }]) => {
       const groupStatus = getGroupStatus(index || {}, status);
       if (index) {
@@ -4087,7 +4090,7 @@ var Search = import_react10.default.memo(function Search2({ children, dataset, s
     }, []);
     return new import_fuse.default(list, options);
   }, [dataset]);
-  const getResults = (0, import_react10.useCallback)(
+  const getResults = (0, import_react13.useCallback)(
     (input2) => {
       const fuse = makeFuse();
       if (!input2)
@@ -4129,7 +4132,8 @@ var Search = import_react10.default.memo(function Search2({ children, dataset, s
     },
     [allComponents, dataset.hash, getLastViewed, makeFuse]
   );
-  const input = inputValue ? inputValue.trim() : "";
+  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: [
     /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(SearchField, { children: [
@@ -4168,11 +4172,11 @@ var Search = import_react10.default.memo(function Search2({ children, dataset, s
 
 // src/SearchResults.tsx
 var import_react_native_theming10 = require("@storybook/react-native-theming");
-var import_react11 = __toESM(require("react"));
+var import_react14 = __toESM(require("react"));
 var import_polished2 = require("polished");
 var import_react_native4 = require("react-native");
 var import_jsx_runtime18 = require("react/jsx-runtime");
-var import_react12 = require("react");
+var import_react15 = require("react");
 var ResultsList = import_react_native_theming10.styled.View({
   margin: 0,
   padding: 0,
@@ -4238,7 +4242,7 @@ var RecentlyOpenedTitle = import_react_native_theming10.styled.View(({ theme })
   marginBottom: 4,
   alignItems: "center"
 }));
-var Highlight = import_react11.default.memo(
+var Highlight = import_react14.default.memo(
   function Highlight2({ children, match }) {
     if (!match)
       return children;
@@ -4273,14 +4277,14 @@ var PathText = import_react_native_theming10.styled.Text(({ theme }) => ({
   fontSize: theme.typography.size.s1 - 1,
   color: theme.textMutedColor
 }));
-var Result = import_react11.default.memo(function Result2({
+var Result = import_react14.default.memo(function Result2({
   item,
   matches,
   icon: _icon,
   onPress,
   ...props
 }) {
-  const press = (0, import_react11.useCallback)(
+  const press = (0, import_react14.useCallback)(
     (event) => {
       event.preventDefault();
       onPress?.(event);
@@ -4314,7 +4318,7 @@ var Result = import_react11.default.memo(function Result2({
 var Text = import_react_native_theming10.styled.Text(({ theme }) => ({
   color: theme.color.defaultText
 }));
-var SearchResults = import_react11.default.memo(function SearchResults2({
+var SearchResults = import_react14.default.memo(function SearchResults2({
   query,
   results,
   closeMenu,
@@ -4349,7 +4353,7 @@ var SearchResults = import_react11.default.memo(function SearchResults2({
       }
       const { item } = result;
       const key = `${item.refId}::${item.id}`;
-      return /* @__PURE__ */ (0, import_react12.createElement)(
+      return /* @__PURE__ */ (0, import_react15.createElement)(
         Result,
         {
           ...result,
@@ -4364,11 +4368,11 @@ var SearchResults = import_react11.default.memo(function SearchResults2({
 
 // src/hooks/useLastViewed.ts
 var import_debounce = __toESM(require_debounce());
-var import_react13 = require("react");
+var import_react16 = 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_react13.useMemo)(() => {
+  const initialLastViewedStoryIds = (0, import_react16.useMemo)(() => {
     const items = import_store2.default.get("lastViewedStoryIds");
     if (!items || !Array.isArray(items))
       return [];
@@ -4376,8 +4380,8 @@ var useLastViewed = (selection) => {
       return [];
     return items;
   }, []);
-  const lastViewedRef = (0, import_react13.useRef)(initialLastViewedStoryIds);
-  const updateLastViewed = (0, import_react13.useCallback)(
+  const lastViewedRef = (0, import_react16.useRef)(initialLastViewedStoryIds);
+  const updateLastViewed = (0, import_react16.useCallback)(
     (story) => {
       const items = lastViewedRef.current;
       const index = items.findIndex(
@@ -4394,13 +4398,13 @@ var useLastViewed = (selection) => {
     },
     [lastViewedRef]
   );
-  (0, import_react13.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (selection)
       updateLastViewed(selection);
   }, [selection]);
   return {
-    getLastViewed: (0, import_react13.useCallback)(() => lastViewedRef.current, [lastViewedRef]),
-    clearLastViewed: (0, import_react13.useCallback)(() => {
+    getLastViewed: (0, import_react16.useCallback)(() => lastViewedRef.current, [lastViewedRef]),
+    clearLastViewed: (0, import_react16.useCallback)(() => {
       lastViewedRef.current = lastViewedRef.current.slice(0, 1);
       save(lastViewedRef.current);
     }, [lastViewedRef])
@@ -4424,18 +4428,18 @@ var Top = import_react_native_theming11.styled.View({
   flex: 1,
   flexDirection: "row"
 });
-var Swap = import_react14.default.memo(function Swap2({
+var Swap = import_react17.default.memo(function Swap2({
   children,
   condition
 }) {
-  const [a, b] = import_react14.default.Children.toArray(children);
+  const [a, b] = import_react17.default.Children.toArray(children);
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_native5.View, { style: { display: condition ? "flex" : "none" }, children: a }),
     /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_native5.View, { style: { display: condition ? "none" : "flex" }, children: b })
   ] });
 });
 var useCombination = (index, indexError, previewInitialized, status, refs) => {
-  const hash = (0, import_react14.useMemo)(
+  const hash = (0, import_react17.useMemo)(
     () => ({
       [DEFAULT_REF_ID]: {
         index,
@@ -4450,9 +4454,9 @@ var useCombination = (index, indexError, previewInitialized, status, refs) => {
     }),
     [refs, index, indexError, previewInitialized, status]
   );
-  return (0, import_react14.useMemo)(() => ({ hash, entries: Object.entries(hash) }), [hash]);
+  return (0, import_react17.useMemo)(() => ({ hash, entries: Object.entries(hash) }), [hash]);
 };
-var Sidebar = import_react14.default.memo(function Sidebar2({
+var Sidebar = import_react17.default.memo(function Sidebar2({
   storyId = null,
   refId = DEFAULT_REF_ID,
   index,
@@ -4462,7 +4466,7 @@ var Sidebar = import_react14.default.memo(function Sidebar2({
   refs = {},
   setSelection
 }) {
-  const selected = (0, import_react14.useMemo)(() => storyId && { storyId, refId }, [storyId, refId]);
+  const selected = (0, import_react17.useMemo)(() => storyId && { storyId, refId }, [storyId, refId]);
   const dataset = useCombination(index, indexError, previewInitialized, status, refs);
   const lastViewedProps = useLastViewed(selected);
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Container2, { style: { paddingHorizontal: 10 }, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Top, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Search, { dataset, setSelection, ...lastViewedProps, children: ({ query, results, isBrowsing, closeMenu, getItemProps, highlightedIndex }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Swap, { condition: isBrowsing, children: [
@@ -4495,7 +4499,7 @@ var Sidebar = import_react14.default.memo(function Sidebar2({
 var import_core_events = require("@storybook/core/core-events");
 var import_manager_api2 = require("@storybook/core/manager-api");
 var import_react_native_theming17 = require("@storybook/react-native-theming");
-var import_react20 = require("react");
+var import_react26 = require("react");
 var import_react_native9 = require("react-native");
 var import_react_native_safe_area_context3 = require("react-native-safe-area-context");
 
@@ -4504,22 +4508,37 @@ 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_react19 = 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_theming13 = require("@storybook/react-native-theming");
+
+// src/util/useStyle.ts
+var import_react18 = require("react");
+var useStyle = (styleFactory, deps) => (
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  (0, import_react18.useMemo)(styleFactory, deps)
+);
+
+// src/MobileAddonsPanel.tsx
 var import_jsx_runtime20 = require("react/jsx-runtime");
-var MobileAddonsPanel = (0, import_react15.forwardRef)(
+var bottomSheetStyle = {
+  paddingTop: 8
+};
+var contentStyle = {
+  flex: 1
+};
+var MobileAddonsPanel = (0, import_react19.forwardRef)(
   ({ storyId }, 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 addonsPanelBottomSheetRef = (0, import_react19.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, () => ({
+    (0, import_react19.useImperativeHandle)(ref, () => ({
       setAddonsPanelOpen: (open) => {
         if (open) {
           addonsPanelBottomSheetRef.current?.present();
@@ -4535,6 +4554,19 @@ var MobileAddonsPanel = (0, import_react15.forwardRef)(
         maxHeight: height - animatedPosition.value - insets.bottom - extraPadding
       };
     }, [animatedPosition, height, insets.bottom]);
+    const backgroundStyle = useStyle(() => {
+      return {
+        borderRadius: 0,
+        borderTopColor: theme.appBorderColor,
+        borderTopWidth: 1,
+        backgroundColor: theme.background.content
+      };
+    });
+    const handleIndicatorStyle = useStyle(() => {
+      return {
+        backgroundColor: theme.textMutedColor
+      };
+    });
     return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       import_bottom_sheet2.BottomSheetModal,
       {
@@ -4542,24 +4574,16 @@ var MobileAddonsPanel = (0, import_react15.forwardRef)(
         index: 1,
         animateOnMount: !reducedMotion,
         snapPoints: ["25%", "50%", "75%"],
-        style: {
-          paddingTop: 8
-        },
+        style: bottomSheetStyle,
         animatedPosition,
-        containerStyle: {},
-        backgroundStyle: {
-          borderRadius: 0,
-          borderTopColor: theme.appBorderColor,
-          borderTopWidth: 1,
-          backgroundColor: theme.background.content
-        },
-        handleIndicatorStyle: { backgroundColor: theme.textMutedColor },
+        backgroundStyle,
+        handleIndicatorStyle,
         keyboardBehavior: "extend",
         enableDismissOnClose: true,
         enableHandlePanningGesture: true,
         stackBehavior: "replace",
         enableDynamicSizing: false,
-        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native_reanimated.default.View, { style: [{ flex: 1 }, adjustedBottomSheetSize], children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native_reanimated.default.View, { style: [contentStyle, adjustedBottomSheetSize], children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
           AddonsTabs,
           {
             onClose: () => {
@@ -4572,20 +4596,57 @@ var MobileAddonsPanel = (0, import_react15.forwardRef)(
     );
   }
 );
+var addonsTabsContainerStyle = {
+  flex: 1
+};
+var addonsTabsStyle = {
+  flexDirection: "row",
+  borderBottomWidth: 1,
+  borderBottomColor: "lightgrey"
+};
+var addonsTabsContentContainerStyle = {
+  justifyContent: "center"
+};
+var closeIconStyle = {
+  marginRight: 4,
+  marginBottom: 4,
+  alignItems: "center",
+  justifyContent: "center"
+};
+var addonsScrollStyle = {
+  flex: 1
+};
+var centeredStyle = {
+  alignItems: "center",
+  justifyContent: "center"
+};
+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_react15.useState)(Object.keys(panels)[0]);
+  const [addonSelected, setAddonSelected] = (0, import_react19.useState)(Object.keys(panels)[0]);
   const insets = (0, import_react_native_safe_area_context.useSafeAreaInsets)();
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react_native6.View, { style: { flex: 1 }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react_native6.View, { style: { flexDirection: "row", borderBottomWidth: 1, borderBottomColor: "lightgrey" }, children: [
+  const scrollContentContainerStyle = useStyle(() => {
+    return {
+      paddingBottom: insets.bottom + 16
+    };
+  });
+  const panel = (0, import_react19.useMemo)(() => {
+    if (!storyId) {
+      return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native6.View, { style: centeredStyle, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native6.Text, { children: "No Story Selected" }) });
+    }
+    if (Object.keys(panels).length === 0) {
+      return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native6.View, { style: centeredStyle, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native6.Text, { children: "No addons loaded." }) });
+    }
+    return panels[addonSelected].render({ active: true });
+  }, [addonSelected, panels, storyId]);
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react_native6.View, { style: addonsTabsContainerStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react_native6.View, { style: addonsTabsStyle, children: [
       /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
         import_react_native_gesture_handler.ScrollView,
         {
           horizontal: true,
           showsHorizontalScrollIndicator: false,
-          contentContainerStyle: {
-            justifyContent: "center"
-          },
+          contentContainerStyle: addonsTabsContentContainerStyle,
           children: Object.values(panels).map(({ id, title }) => {
             const resolvedTitle = typeof title === "function" ? title({}) : title;
             return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
@@ -4603,13 +4664,8 @@ var AddonsTabs = ({ onClose, storyId }) => {
       /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
         IconButton,
         {
-          style: {
-            marginRight: 4,
-            marginBottom: 4,
-            alignItems: "center",
-            justifyContent: "center"
-          },
-          hitSlop: { top: 10, right: 10, bottom: 10, left: 10 },
+          style: closeIconStyle,
+          hitSlop,
           Icon: CloseIcon,
           onPress: () => onClose?.()
         }
@@ -4618,19 +4674,9 @@ var AddonsTabs = ({ onClose, storyId }) => {
     /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       import_react_native_gesture_handler.ScrollView,
       {
-        style: { flex: 1 },
-        contentContainerStyle: {
-          paddingBottom: insets.bottom + 16
-        },
-        children: (() => {
-          if (!storyId) {
-            return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native6.View, { style: { alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native6.Text, { children: "No Story Selected" }) });
-          }
-          if (Object.keys(panels).length === 0) {
-            return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native6.View, { style: { alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native6.Text, { children: "No addons loaded." }) });
-          }
-          return panels[addonSelected].render({ active: true });
-        })()
+        style: addonsScrollStyle,
+        contentContainerStyle: scrollContentContainerStyle,
+        children: panel
       }
     )
   ] });
@@ -4655,8 +4701,8 @@ var TabText = import_react_native_theming12.styled.Text(({ theme, active }) => (
 }));
 
 // src/MobileMenuDrawer.tsx
-var import_bottom_sheet3 = require("@gorhom/bottom-sheet");
-var import_react16 = require("react");
+var import_bottom_sheet3 = __toESM(require("@gorhom/bottom-sheet"));
+var import_react20 = 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");
@@ -4672,56 +4718,63 @@ var BottomSheetBackdropComponent = (backdropComponentProps) => /* @__PURE__ */ (
     style: [backdropComponentProps.style, { backgroundColor: "rgba(0,0,0,0.5)" }]
   }
 );
-var MobileMenuDrawer = (0, import_react16.forwardRef)(
-  ({ children }, ref) => {
+var snapPoints = ["50%", "75%"];
+var MobileMenuDrawer = (0, import_react20.memo)(
+  (0, import_react20.forwardRef)(({ children }, ref) => {
     const reducedMotion = (0, import_react_native_reanimated2.useReducedMotion)();
     const insets = (0, import_react_native_safe_area_context2.useSafeAreaInsets)();
     const theme = (0, import_react_native_theming14.useTheme)();
-    const menuBottomSheetRef = (0, import_react16.useRef)(null);
-    (0, import_react16.useImperativeHandle)(ref, () => ({
+    const menuBottomSheetRef = (0, import_react20.useRef)(null);
+    (0, import_react20.useImperativeHandle)(ref, () => ({
       setMobileMenuOpen: (open) => {
         if (open) {
-          menuBottomSheetRef.current?.present();
+          menuBottomSheetRef.current?.snapToIndex(1);
         } else {
           import_react_native7.Keyboard.dismiss();
-          menuBottomSheetRef.current?.dismiss();
+          menuBottomSheetRef.current?.close();
         }
       }
     }));
+    const bgColorStyle = (0, import_react20.useMemo)(() => {
+      return { backgroundColor: theme.background.content };
+    }, [theme.background.content]);
+    const handleIndicatorStyle = (0, import_react20.useMemo)(() => {
+      return { backgroundColor: theme.textMutedColor };
+    }, [theme.textMutedColor]);
+    const contentContainerStyle = (0, import_react20.useMemo)(() => {
+      return { paddingBottom: insets.bottom };
+    }, [insets.bottom]);
     return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-      import_bottom_sheet3.BottomSheetModal,
+      import_bottom_sheet3.default,
       {
         ref: menuBottomSheetRef,
-        index: 1,
+        index: -1,
         animateOnMount: !reducedMotion,
-        snapPoints: ["50%", "75%"],
-        enableDismissOnClose: true,
+        snapPoints,
         enableHandlePanningGesture: true,
         enableContentPanningGesture: true,
         enableDynamicSizing: false,
         keyboardBehavior: "extend",
         keyboardBlurBehavior: "restore",
-        stackBehavior: "replace",
+        enablePanDownToClose: true,
         backdropComponent: BottomSheetBackdropComponent,
-        backgroundStyle: { backgroundColor: theme.background.content },
-        handleIndicatorStyle: { backgroundColor: theme.textMutedColor },
+        backgroundStyle: bgColorStyle,
+        handleIndicatorStyle,
         children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           import_bottom_sheet3.BottomSheetScrollView,
           {
             keyboardShouldPersistTaps: "handled",
-            contentContainerStyle: {
-              paddingBottom: insets.bottom
-            },
+            contentContainerStyle,
             children
           }
         )
       }
     );
-  }
+  })
 );
 
 // src/StorybookLogo.tsx
-var import_react17 = require("react");
+var import_react21 = require("react");
 var import_react_native8 = require("react-native");
 
 // src/icon/DarkLogo.tsx
@@ -4862,11 +4915,11 @@ var WIDTH = 125;
 var HEIGHT = 25;
 var NoBrandLogo = ({ theme }) => theme.base === "light" ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Logo, { height: HEIGHT, width: WIDTH }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(DarkLogo, { height: HEIGHT, width: WIDTH });
 function isElement(value) {
-  return (0, import_react17.isValidElement)(value);
+  return (0, import_react21.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_react17.useEffect)(() => {
+  (0, import_react21.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}}"
@@ -4903,7 +4956,7 @@ var BrandLogo = ({ theme }) => {
   }
 };
 var BrandTitle = ({ theme }) => {
-  const brandTitleStyle = (0, import_react17.useMemo)(() => {
+  const brandTitleStyle = (0, import_react21.useMemo)(() => {
     return {
       width: WIDTH,
       height: HEIGHT,
@@ -4928,9 +4981,11 @@ var BrandTitle = ({ theme }) => {
   }
 };
 var StorybookLogo = ({ theme }) => {
-  if (theme.brand?.image) {
+  const image = (0, import_react21.useMemo)(() => theme.brand?.image, [theme.brand?.image]);
+  const title = (0, import_react21.useMemo)(() => theme.brand?.title, [theme.brand?.title]);
+  if (image) {
     return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(BrandLogo, { theme });
-  } else if (theme.brand?.title) {
+  } else if (title) {
     return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(BrandTitle, { theme });
   } else {
     return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(NoBrandLogo, { theme });
@@ -4938,12 +4993,12 @@ var StorybookLogo = ({ theme }) => {
 };
 
 // src/hooks/useStoreState.ts
-var import_react19 = require("react");
+var import_react23 = require("react");
 
 // src/StorageProvider.tsx
-var import_react18 = require("react");
+var import_react22 = require("react");
 var import_jsx_runtime25 = require("react/jsx-runtime");
-var StorageContext = (0, import_react18.createContext)({
+var StorageContext = (0, import_react22.createContext)({
   getItem: async () => null,
   setItem: async () => {
   }
@@ -4954,13 +5009,13 @@ var StorageProvider = ({
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(StorageContext.Provider, { value: storage, children });
 };
-var useStorage = () => (0, import_react18.useContext)(StorageContext);
+var useStorage = () => (0, import_react22.useContext)(StorageContext);
 
 // src/hooks/useStoreState.ts
 var useStoreBooleanState = (key, defaultValue) => {
   const storage = useStorage();
-  const [val, setVal] = (0, import_react19.useState)(defaultValue);
-  (0, import_react19.useEffect)(() => {
+  const [val, setVal] = (0, import_react23.useState)(defaultValue);
+  (0, import_react23.useEffect)(() => {
     storage.getItem(key).then((newVal) => {
       if (newVal === null || newVal === void 0) {
         setVal(defaultValue);
@@ -4969,7 +5024,7 @@ var useStoreBooleanState = (key, defaultValue) => {
       }
     });
   }, [key, storage, defaultValue]);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     storage.setItem(key, val.toString());
   }, [key, storage, val]);
   return [val, setVal];
@@ -5005,35 +5060,33 @@ var BottomBarToggleIcon = ({
 };
 
 // src/icon/CloseFullscreenIcon.tsx
+var import_react24 = require("react");
 var import_react_native_svg13 = __toESM(require("react-native-svg"));
 var import_react_native_theming15 = require("@storybook/react-native-theming");
 var import_jsx_runtime27 = require("react/jsx-runtime");
 function CloseFullscreenIcon({ color, width = 14, height = 14, ...props }) {
   const theme = (0, import_react_native_theming15.useTheme)();
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-    import_react_native_svg13.default,
-    {
-      fill: color ?? theme.color.defaultText,
-      height,
-      viewBox: "0 0 16 16",
-      width,
-      ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react_native_svg13.Path, { d: "M5.5 0a.5.5 0 01.5.5v4A1.5 1.5 0 014.5 6h-4a.5.5 0 010-1h4a.5.5 0 00.5-.5v-4a.5.5 0 01.5-.5zm5 0a.5.5 0 01.5.5v4a.5.5 0 00.5.5h4a.5.5 0 010 1h-4A1.5 1.5 0 0110 4.5v-4a.5.5 0 01.5-.5zM0 10.5a.5.5 0 01.5-.5h4A1.5 1.5 0 016 11.5v4a.5.5 0 01-1 0v-4a.5.5 0 00-.5-.5h-4a.5.5 0 01-.5-.5zm10 1a1.5 1.5 0 011.5-1.5h4a.5.5 0 010 1h-4a.5.5 0 00-.5.5v4a.5.5 0 01-1 0v-4z" })
-    }
-  );
+  const fillColor = (0, import_react24.useMemo)(() => {
+    return color ?? theme.color.defaultText;
+  }, [color, theme.color.defaultText]);
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react_native_svg13.default, { fill: fillColor, height, viewBox: "0 0 16 16", width, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react_native_svg13.Path, { d: "M5.5 0a.5.5 0 01.5.5v4A1.5 1.5 0 014.5 6h-4a.5.5 0 010-1h4a.5.5 0 00.5-.5v-4a.5.5 0 01.5-.5zm5 0a.5.5 0 01.5.5v4a.5.5 0 00.5.5h4a.5.5 0 010 1h-4A1.5 1.5 0 0110 4.5v-4a.5.5 0 01.5-.5zM0 10.5a.5.5 0 01.5-.5h4A1.5 1.5 0 016 11.5v4a.5.5 0 01-1 0v-4a.5.5 0 00-.5-.5h-4a.5.5 0 01-.5-.5zm10 1a1.5 1.5 0 011.5-1.5h4a.5.5 0 010 1h-4a.5.5 0 00-.5.5v4a.5.5 0 01-1 0v-4z" }) });
 }
 
 // src/icon/FullscreenIcon.tsx
 var import_react_native_svg14 = __toESM(require("react-native-svg"));
 var import_react_native_theming16 = require("@storybook/react-native-theming");
+var import_react25 = require("react");
 var import_jsx_runtime28 = require("react/jsx-runtime");
 function FullscreenIcon({ color, width = 14, height = 14, ...props }) {
   const theme = (0, import_react_native_theming16.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_svg14.default, { width, height, viewBox: "0 0 14 14", fill: "none", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     import_react_native_svg14.Path,
     {
       d: "M1.5 1h2a.5.5 0 010 1h-.793l3.147 3.146a.5.5 0 11-.708.708L2 2.707V3.5a.5.5 0 01-1 0v-2a.5.5 0 01.5-.5zm8.5.5a.5.5 0 01.5-.5h2a.5.5 0 01.5.5v2a.5.5 0 01-1 0v-.793L8.854 5.854a.5.5 0 11-.708-.708L11.293 2H10.5a.5.5 0 01-.5-.5zm2.5 8.5a.5.5 0 01.5.5v2a.5.5 0 01-.5.5h-2a.5.5 0 010-1h.793L8.146 8.854a.5.5 0 11.708-.708L12 11.293V10.5a.5.5 0 01.5-.5zM2 11.293V10.5a.5.5 0 00-1 0v2a.5.5 0 00.5.5h2a.5.5 0 000-1h-.793l3.147-3.146a.5.5 0 10-.708-.708L2 11.293z",
-      fill: color ?? theme.color.defaultText
+      fill: fillColor
     }
   ) });
 }
@@ -5058,14 +5111,36 @@ var MenuIcon = ({
 
 // src/Layout.tsx
 var import_jsx_runtime30 = require("react/jsx-runtime");
+var desktopLogoContainer = {
+  flexDirection: "row",
+  alignItems: "center",
+  paddingTop: 10,
+  paddingLeft: 16,
+  paddingBottom: 4,
+  paddingRight: 10,
+  justifyContent: "space-between"
+};
+var desktopContentContainerStyle = { flex: 1 };
+var desktopContentStyle = { 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 };
+var mobileMenuDrawerContentStyle = {
+  paddingLeft: 16,
+  paddingTop: 4,
+  paddingBottom: 4
+};
 var Layout = ({
   storyHash,
   story,
   children
 }) => {
   const theme = (0, import_react_native_theming17.useTheme)();
-  const mobileMenuDrawerRef = (0, import_react20.useRef)(null);
-  const addonPanelRef = (0, import_react20.useRef)(null);
+  const mobileMenuDrawerRef = (0, import_react26.useRef)(null);
+  const addonPanelRef = (0, import_react26.useRef)(null);
   const insets = (0, import_react_native_safe_area_context3.useSafeAreaInsets)();
   const { isDesktop } = useLayout();
   const [desktopSidebarOpen, setDesktopSidebarOpen] = useStoreBooleanState(
@@ -5076,184 +5151,182 @@ var Layout = ({
     "desktopPanelState",
     true
   );
-  const [uiHidden, setUiHidden] = (0, import_react20.useState)(false);
+  const [uiHidden, setUiHidden] = (0, import_react26.useState)(false);
+  const desktopContainerStyle = useStyle(
+    () => ({
+      flex: 1,
+      paddingTop: insets.top,
+      backgroundColor: theme.background.content,
+      flexDirection: "row"
+    }),
+    [theme.background.content, insets.top]
+  );
+  const desktopSidebarStyle = useStyle(
+    () => ({
+      width: desktopSidebarOpen ? 240 : void 0,
+      padding: desktopSidebarOpen ? 0 : 10,
+      borderColor: theme.appBorderColor,
+      borderRightWidth: 1
+    }),
+    [desktopSidebarOpen, theme.appBorderColor]
+  );
+  const desktopScrollViewContentContainerStyle = useStyle(
+    () => ({
+      paddingBottom: insets.bottom
+    }),
+    [insets.bottom]
+  );
+  const desktopAddonsPanelStyle = useStyle(
+    () => ({
+      height: desktopAddonsPanelOpen ? 300 : void 0,
+      borderTopWidth: 1,
+      borderColor: theme.appBorderColor,
+      paddingTop: desktopAddonsPanelOpen ? 4 : 0,
+      padding: desktopAddonsPanelOpen ? 0 : 10
+    }),
+    [desktopAddonsPanelOpen, theme.appBorderColor]
+  );
+  const mobileContainerStyle = useStyle(
+    () => ({
+      flex: 1,
+      paddingTop: story?.parameters?.noSafeArea ? 0 : insets.top,
+      backgroundColor: theme.background.content
+    }),
+    [theme.background.content, insets.top, story?.parameters?.noSafeArea]
+  );
+  const fullScreenButtonStyle = useStyle(
+    () => ({
+      position: "absolute",
+      bottom: uiHidden ? 56 + insets.bottom : 16,
+      right: 16,
+      backgroundColor: theme.background.content,
+      padding: 4,
+      borderRadius: 4,
+      borderWidth: 1,
+      borderColor: theme.appBorderColor
+    }),
+    [uiHidden, insets.bottom, theme.background.content, theme.appBorderColor]
+  );
+  const containerStyle = useStyle(
+    () => ({
+      marginBottom: insets.bottom
+    }),
+    [insets.bottom]
+  );
+  const navButtonTextStyle = useStyle(
+    () => ({
+      flexShrink: 1,
+      color: theme.color.defaultText
+    }),
+    [theme.color.defaultText]
+  );
+  const openMobileMenu = (0, import_react26.useCallback)(() => {
+    mobileMenuDrawerRef.current.setMobileMenuOpen(true);
+  }, [mobileMenuDrawerRef]);
+  const setSelection = (0, import_react26.useCallback)(({ storyId: newStoryId }) => {
+    const channel = import_manager_api2.addons.getChannel();
+    channel.emit(import_core_events.SET_CURRENT_STORY, { storyId: newStoryId });
+  }, []);
   if (isDesktop) {
-    return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
-      import_react_native9.View,
-      {
-        style: {
-          flex: 1,
-          paddingTop: insets.top,
-          backgroundColor: theme.background.content,
-          flexDirection: "row"
-        },
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-            import_react_native9.View,
-            {
-              style: {
-                width: desktopSidebarOpen ? 240 : void 0,
-                padding: desktopSidebarOpen ? 0 : 10,
-                borderColor: theme.appBorderColor,
-                borderRightWidth: 1
-              },
-              children: desktopSidebarOpen ? /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
-                import_react_native9.ScrollView,
-                {
-                  keyboardShouldPersistTaps: "handled",
-                  contentContainerStyle: {
-                    paddingBottom: insets.bottom
-                  },
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
-                      import_react_native9.View,
-                      {
-                        style: {
-                          flexDirection: "row",
-                          alignItems: "center",
-                          paddingTop: 10,
-                          paddingLeft: 16,
-                          paddingBottom: 4,
-                          paddingRight: 10,
-                          justifyContent: "space-between"
-                        },
-                        children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(StorybookLogo, { theme }),
-                          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(IconButton, { onPress: () => setDesktopSidebarOpen(false), Icon: MenuIcon })
-                        ]
-                      }
-                    ),
-                    /* @__PURE__ */ (0, import_jsx_runtime30.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_runtime30.jsx)(IconButton, { onPress: () => setDesktopSidebarOpen(true), Icon: MenuIcon })
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_react_native9.View, { style: { flex: 1 }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react_native9.View, { style: { flex: 1, overflow: "hidden" }, children }),
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_react_native9.View, { style: desktopContainerStyle, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react_native9.View, { style: desktopSidebarStyle, children: desktopSidebarOpen ? /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+        import_react_native9.ScrollView,
+        {
+          keyboardShouldPersistTaps: "handled",
+          contentContainerStyle: desktopScrollViewContentContainerStyle,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_react_native9.View, { style: desktopLogoContainer, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(StorybookLogo, { theme }),
+              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(IconButton, { onPress: () => setDesktopSidebarOpen(false), Icon: MenuIcon })
+            ] }),
             /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-              import_react_native9.View,
+              Sidebar,
               {
-                style: {
-                  height: desktopAddonsPanelOpen ? 300 : void 0,
-                  borderTopWidth: 1,
-                  borderColor: theme.appBorderColor,
-                  paddingTop: desktopAddonsPanelOpen ? 4 : 0,
-                  padding: desktopAddonsPanelOpen ? 0 : 10
-                },
-                children: desktopAddonsPanelOpen ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(AddonsTabs, { storyId: story?.id, onClose: () => setDesktopAddonsPanelOpen(false) }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-                  IconButton,
-                  {
-                    style: { marginLeft: "auto" },
-                    onPress: () => setDesktopAddonsPanelOpen(true),
-                    Icon: BottomBarToggleIcon
-                  }
-                )
+                extra: placeholderArray,
+                previewInitialized: true,
+                indexError: void 0,
+                refs: placeholderObject,
+                setSelection,
+                status: placeholderObject,
+                index: storyHash,
+                storyId: story?.id,
+                refId: DEFAULT_REF_ID
               }
             )
-          ] })
-        ]
-      }
-    );
+          ]
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(IconButton, { onPress: () => setDesktopSidebarOpen(true), Icon: MenuIcon }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_react_native9.View, { style: desktopContentContainerStyle, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react_native9.View, { style: desktopContentStyle, children }),
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react_native9.View, { style: desktopAddonsPanelStyle, children: desktopAddonsPanelOpen ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(AddonsTabs, { storyId: story?.id, onClose: () => setDesktopAddonsPanelOpen(false) }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+          IconButton,
+          {
+            style: iconFloatRightStyle,
+            onPress: () => setDesktopAddonsPanelOpen(true),
+            Icon: BottomBarToggleIcon
+          }
+        ) })
+      ] })
+    ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
-    import_react_native9.View,
-    {
-      style: {
-        flex: 1,
-        paddingTop: story?.parameters?.noSafeArea ? 0 : insets.top,
-        backgroundColor: theme.background.content
-      },
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_react_native9.View, { style: { flex: 1, overflow: "hidden" }, children: [
-          children,
-          story?.parameters?.hideFullScreenButton ? null : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-            import_react_native9.TouchableOpacity,
-            {
-              style: {
-                position: "absolute",
-                bottom: uiHidden ? 56 + insets.bottom : 16,
-                right: 16,
-                backgroundColor: theme.background.content,
-                padding: 4,
-                borderRadius: 4,
-                borderWidth: 1,
-                borderColor: theme.appBorderColor
-              },
-              onPress: () => setUiHidden((prev) => !prev),
-              children: uiHidden ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(CloseFullscreenIcon, { color: theme.color.mediumdark }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(FullscreenIcon, { color: theme.color.mediumdark })
-            }
-          )
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(MobileMenuDrawer, { ref: mobileMenuDrawerRef, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react_native9.View, { style: { paddingLeft: 16, paddingTop: 4, paddingBottom: 4 }, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(StorybookLogo, { theme }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime30.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_runtime30.jsx)(MobileAddonsPanel, { ref: addonPanelRef, storyId: story?.id }),
-        !uiHidden ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Container3, { style: { marginBottom: insets.bottom }, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Nav, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
-            Button2,
-            {
-              testID: "mobile-menu-button",
-              style: { flexShrink: 1 },
-              hitSlop: { bottom: 10, left: 10, right: 10, top: 10 },
-              onPress: () => {
-                mobileMenuDrawerRef.current.setMobileMenuOpen(true);
-              },
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(MenuIcon, { color: theme.color.mediumdark }),
-                /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_react_native9.Text, { style: { flexShrink: 1, color: theme.color.defaultText }, numberOfLines: 1, children: [
-                  story?.title,
-                  "/",
-                  story?.name
-                ] })
-              ]
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-            IconButton,
-            {
-              testID: "mobile-addons-button",
-              onPress: () => addonPanelRef.current.setAddonsPanelOpen(true),
-              Icon: BottomBarToggleIcon
-            }
-          )
-        ] }) }) : null
-      ]
-    }
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_react_native9.View, { style: mobileContainerStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_react_native9.View, { style: mobileContentStyle, children: [
+      children,
+      story?.parameters?.hideFullScreenButton ? null : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        import_react_native9.TouchableOpacity,
+        {
+          style: fullScreenButtonStyle,
+          onPress: () => setUiHidden((prev) => !prev),
+          children: uiHidden ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(CloseFullscreenIcon, { color: theme.color.mediumdark }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(FullscreenIcon, { color: theme.color.mediumdark })
+        }
+      )
+    ] }),
+    !uiHidden ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Container3, { style: containerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Nav, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+        Button2,
+        {
+          testID: "mobile-menu-button",
+          style: navButtonStyle,
+          hitSlop: navButtonHitSlop,
+          onPress: openMobileMenu,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(MenuIcon, { color: theme.color.mediumdark }),
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_react_native9.Text, { style: navButtonTextStyle, numberOfLines: 1, children: [
+              story?.title,
+              "/",
+              story?.name
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        IconButton,
+        {
+          testID: "mobile-addons-button",
+          onPress: () => addonPanelRef.current.setAddonsPanelOpen(true),
+          Icon: BottomBarToggleIcon
+        }
+      )
+    ] }) }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(MobileMenuDrawer, { ref: mobileMenuDrawerRef, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react_native9.View, { style: mobileMenuDrawerContentStyle, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(StorybookLogo, { theme }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        Sidebar,
+        {
+          extra: placeholderArray,
+          previewInitialized: true,
+          indexError: void 0,
+          refs: placeholderObject,
+          setSelection,
+          status: placeholderObject,
+          index: storyHash,
+          storyId: story?.id,
+          refId: DEFAULT_REF_ID
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(MobileAddonsPanel, { ref: addonPanelRef, storyId: story?.id })
+  ] });
 };
 var Nav = import_react_native_theming17.styled.View({
   display: "flex",