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

package/dist/index.d.ts

@@ -219,4 +219,13 @@ declare const transformStoryIndexToStoriesHash: (input: API_PreparedStoryIndex |
 declare const transformStoryIndexV2toV3: (index: StoryIndexV2) => StoryIndexV3;
 declare const transformStoryIndexV3toV4: (index: StoryIndexV3) => API_PreparedStoryIndex;
 
-export { Button, ButtonIcon, ButtonProps, ButtonText, CombinedDataset, ComponentNode, Dataset, ExpandType, Explorer, ExplorerProps, GetSearchItemProps, GroupNode, Highlight, IconButton, Item, ItemRef, Layout, LayoutProvider, LeafNodeStyleWrapper, Node, NodeProps$1 as NodeProps, RefType, Refs, RootNode, RootNodeText, SearchChildrenFn, SearchItem, SearchResult, SearchResultProps, Selection, Sidebar, SidebarProps, StoryNode, StoryRef, Tree, isExpandType, transformStoryIndexToStoriesHash, transformStoryIndexV2toV3, transformStoryIndexV3toV4, useCombination, useLayout };
+interface Storage {
+    getItem: (key: string) => Promise<string | null>;
+    setItem: (key: string, value: string) => Promise<void>;
+}
+declare const StorageProvider: FC<PropsWithChildren<{
+    storage: Storage;
+}>>;
+declare const useStorage: () => Storage;
+
+export { Button, ButtonIcon, ButtonProps, ButtonText, CombinedDataset, ComponentNode, Dataset, ExpandType, Explorer, ExplorerProps, GetSearchItemProps, GroupNode, Highlight, IconButton, Item, ItemRef, Layout, LayoutProvider, LeafNodeStyleWrapper, Node, NodeProps$1 as NodeProps, RefType, Refs, RootNode, RootNodeText, SearchChildrenFn, SearchItem, SearchResult, SearchResultProps, Selection, Sidebar, SidebarProps, StorageProvider, StoryNode, StoryRef, Tree, isExpandType, transformStoryIndexToStoriesHash, transformStoryIndexV2toV3, transformStoryIndexV3toV4, useCombination, useLayout, useStorage };

package/dist/index.js

@@ -2929,6 +2929,7 @@ __export(src_exports, {
   RootNode: () => RootNode,
   RootNodeText: () => RootNodeText,
   Sidebar: () => Sidebar,
+  StorageProvider: () => StorageProvider,
   StoryNode: () => StoryNode,
   Tree: () => Tree,
   isExpandType: () => isExpandType,
@@ -2936,7 +2937,8 @@ __export(src_exports, {
   transformStoryIndexV2toV3: () => transformStoryIndexV2toV3,
   transformStoryIndexV3toV4: () => transformStoryIndexV3toV4,
   useCombination: () => useCombination,
-  useLayout: () => useLayout
+  useLayout: () => useLayout,
+  useStorage: () => useStorage
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -3331,7 +3333,7 @@ var ExpandAllIcon = ({
   ) });
 };
 
-// src/useExpanded.ts
+// src/hooks/useExpanded.ts
 var import_react4 = require("react");
 
 // src/util/tree.ts
@@ -3395,7 +3397,7 @@ var getStateType = (isLoading, isAuthRequired, isError, isEmpty) => {
 var removeNoiseFromName = (storyName) => storyName.replaceAll(/(\s|-|_)/gi, "");
 var isStoryHoistable = (storyName, componentName) => removeNoiseFromName(storyName) === removeNoiseFromName(componentName);
 
-// src/useExpanded.ts
+// src/hooks/useExpanded.ts
 var initializeExpanded = ({
   initialExpanded,
   rootIds
@@ -4360,7 +4362,7 @@ var SearchResults = import_react11.default.memo(function SearchResults2({
   ] });
 });
 
-// src/useLastViewed.ts
+// src/hooks/useLastViewed.ts
 var import_debounce = __toESM(require_debounce());
 var import_react13 = require("react");
 var import_store2 = __toESM(require("store2"));
@@ -4493,8 +4495,8 @@ 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_theming15 = require("@storybook/react-native-theming");
-var import_react17 = require("react");
-var import_react_native8 = require("react-native");
+var import_react20 = require("react");
+var import_react_native9 = require("react-native");
 var import_react_native_safe_area_context3 = require("react-native-safe-area-context");
 
 // src/MobileAddonsPanel.tsx
@@ -4746,48 +4748,70 @@ var BottomBarToggleIcon = ({
   ] });
 };
 
-// src/icon/DarkLogo.tsx
-var import_react_native_svg11 = __toESM(require("react-native-svg"));
+// src/icon/MenuIcon.tsx
+var import_react_native_svg11 = require("react-native-svg");
 var import_jsx_runtime23 = require("react/jsx-runtime");
+var MenuIcon = ({
+  color = "currentColor",
+  width = 14,
+  height = 14,
+  ...props
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_native_svg11.Svg, { width, height, viewBox: "0 0 14 14", fill: "none", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    import_react_native_svg11.Path,
+    {
+      d: "M13 3.5a.5.5 0 010 1H1a.5.5 0 010-1h12zM13.5 10a.5.5 0 00-.5-.5H1a.5.5 0 000 1h12a.5.5 0 00.5-.5zM13 6.5a.5.5 0 010 1H1a.5.5 0 010-1h12z",
+      fill: color
+    }
+  ) });
+};
+
+// src/StorybookLogo.tsx
+var import_react17 = require("react");
+var import_react_native8 = require("react-native");
+
+// src/icon/DarkLogo.tsx
+var import_react_native_svg12 = __toESM(require("react-native-svg"));
+var import_jsx_runtime24 = require("react/jsx-runtime");
 function DarkLogo({ width = 300, height = 60, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react_native_svg11.default, { width, height, viewBox: "0 0 300 60", ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react_native_svg11.Defs, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-        import_react_native_svg11.Path,
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react_native_svg12.default, { width, height, viewBox: "0 0 300 60", ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react_native_svg12.Defs, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        import_react_native_svg12.Path,
         {
           id: "a",
           d: "M1.848 54.92L.002 5.723A2.997 2.997 0 012.81 2.621L44.654.006a2.997 2.997 0 013.183 2.99v53.607a2.997 2.997 0 01-3.13 2.994l-40-1.796a2.997 2.997 0 01-2.86-2.882z"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-        import_react_native_svg11.Path,
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        import_react_native_svg12.Path,
         {
           id: "c",
           d: "M1.848 54.92L.002 5.723A2.997 2.997 0 012.81 2.621L44.654.006a2.997 2.997 0 013.183 2.99v53.607a2.997 2.997 0 01-3.13 2.994l-40-1.796a2.997 2.997 0 01-2.86-2.882z"
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react_native_svg11.G, { fill: "none", fillRule: "evenodd", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-        import_react_native_svg11.Path,
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react_native_svg12.G, { fill: "none", fillRule: "evenodd", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        import_react_native_svg12.Path,
         {
           fill: "#FFF",
           fillRule: "nonzero",
           d: "M80.387 47.178c-2.543 0-4.99-.342-7.343-1.025-2.352-.684-4.307-1.63-5.864-2.837l2.384-5.293c3.242 2.257 6.882 3.386 10.919 3.386 2.097 0 3.71-.342 4.84-1.026 1.128-.683 1.692-1.629 1.692-2.836 0-1.081-.517-1.924-1.55-2.528-1.033-.603-2.869-1.192-5.507-1.764-2.956-.604-5.316-1.335-7.08-2.193-1.765-.858-3.052-1.915-3.862-3.17-.811-1.256-1.216-2.806-1.216-4.65 0-2.034.564-3.846 1.692-5.435 1.129-1.59 2.71-2.837 4.744-3.743 2.035-.906 4.387-1.359 7.057-1.359 2.384 0 4.68.35 6.89 1.05 2.21.699 3.965 1.636 5.269 2.812l-2.384 5.293c-3.084-2.257-6.326-3.385-9.727-3.385-1.94 0-3.465.373-4.577 1.12-1.113.747-1.67 1.772-1.67 3.075 0 .763.215 1.391.644 1.884.43.492 1.145.93 2.146 1.31 1.001.382 2.424.78 4.267 1.193 4.323.954 7.43 2.177 9.322 3.671 1.891 1.494 2.837 3.56 2.837 6.199 0 3.178-1.224 5.682-3.672 7.51-2.447 1.827-5.864 2.74-10.25 2.74zm31.183-5.34c.731 0 1.494-.048 2.289-.143l-.382 5.244c-.922.128-1.844.191-2.765.191-3.56 0-6.159-.779-7.796-2.336-1.637-1.558-2.456-3.926-2.456-7.104v-8.964h-4.434v-5.388h4.434v-6.866h7.2v6.866h5.865v5.388h-5.865v8.916c0 2.797 1.303 4.196 3.91 4.196zm16.736 5.292c-2.48 0-4.657-.5-6.533-1.502-1.875-1.001-3.321-2.416-4.338-4.243-1.018-1.828-1.526-3.982-1.526-6.46 0-2.48.508-4.634 1.526-6.462 1.017-1.827 2.463-3.234 4.338-4.22 1.876-.985 4.053-1.477 6.533-1.477 2.479 0 4.656.492 6.532 1.478 1.875.985 3.321 2.392 4.339 4.22 1.017 1.827 1.525 3.98 1.525 6.46s-.508 4.633-1.525 6.46c-1.018 1.828-2.464 3.243-4.34 4.244-1.875 1.002-4.052 1.502-6.531 1.502zm0-5.483c3.496 0 5.244-2.24 5.244-6.723 0-2.257-.453-3.941-1.358-5.054-.906-1.113-2.202-1.669-3.886-1.669-3.497 0-5.245 2.241-5.245 6.723 0 4.482 1.748 6.723 5.245 6.723zm32.327-12.969l-4.053.43c-2.003.19-3.417.754-4.244 1.692-.826.938-1.24 2.185-1.24 3.743v12.206h-7.199V23.338h6.914v3.957c1.176-2.702 3.607-4.18 7.295-4.434l2.098-.143.429 5.96zm20.92-5.292h7.056L174.496 55.33H167.2l4.481-9.87-9.63-22.075h7.485l5.912 14.876 6.103-14.876zm23.744-.62c2.034 0 3.83.492 5.388 1.478 1.557.985 2.773 2.392 3.647 4.22.874 1.827 1.311 3.949 1.311 6.365 0 2.416-.437 4.553-1.31 6.413-.875 1.86-2.099 3.306-3.672 4.339-1.574 1.033-3.362 1.55-5.364 1.55-1.621 0-3.083-.343-4.387-1.026-1.303-.683-2.304-1.629-3.004-2.837v3.48h-7.104V13.135h7.2v13.35c.7-1.175 1.692-2.09 2.98-2.74 1.287-.652 2.726-.978 4.315-.978zm-2.098 18.881c1.685 0 2.988-.596 3.91-1.788.922-1.192 1.382-2.869 1.382-5.03 0-2.13-.46-3.759-1.382-4.887-.922-1.129-2.225-1.693-3.91-1.693s-2.988.58-3.91 1.74c-.922 1.16-1.383 2.805-1.383 4.935 0 2.162.461 3.822 1.383 4.983.922 1.16 2.225 1.74 3.91 1.74zm28.083 5.483c-2.479 0-4.656-.5-6.532-1.502-1.875-1.001-3.321-2.416-4.339-4.243-1.017-1.828-1.525-3.982-1.525-6.46 0-2.48.508-4.634 1.525-6.462 1.018-1.827 2.464-3.234 4.34-4.22 1.875-.985 4.052-1.477 6.531-1.477 2.48 0 4.657.492 6.533 1.478 1.875.985 3.321 2.392 4.339 4.22 1.017 1.827 1.525 3.98 1.525 6.46s-.508 4.633-1.525 6.46c-1.018 1.828-2.464 3.243-4.34 4.244-1.875 1.002-4.052 1.502-6.532 1.502zm0-5.483c3.497 0 5.245-2.24 5.245-6.723 0-2.257-.453-3.941-1.359-5.054-.906-1.113-2.2-1.669-3.886-1.669-3.496 0-5.244 2.241-5.244 6.723 0 4.482 1.748 6.723 5.244 6.723zm26.844 5.483c-2.48 0-4.656-.5-6.532-1.502-1.875-1.001-3.322-2.416-4.339-4.243-1.017-1.828-1.525-3.982-1.525-6.46 0-2.48.508-4.634 1.525-6.462 1.017-1.827 2.464-3.234 4.34-4.22 1.875-.985 4.052-1.477 6.531-1.477 2.48 0 4.657.492 6.532 1.478 1.876.985 3.322 2.392 4.34 4.22 1.017 1.827 1.525 3.98 1.525 6.46s-.508 4.633-1.526 6.46c-1.017 1.828-2.463 3.243-4.339 4.244-1.875 1.002-4.052 1.502-6.532 1.502zm0-5.483c3.497 0 5.245-2.24 5.245-6.723 0-2.257-.453-3.941-1.359-5.054-.906-1.113-2.201-1.669-3.886-1.669-3.496 0-5.244 2.241-5.244 6.723 0 4.482 1.748 6.723 5.244 6.723zM299 46.749h-8.82l-8.965-10.442v10.442h-7.2V13.134h7.2v20.217l8.63-9.965h8.583l-9.822 11.157L299 46.749z"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-        import_react_native_svg11.Path,
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        import_react_native_svg12.Path,
         {
           d: "M48.831 2.81c.004.062.006.124.006.187v53.606a2.997 2.997 0 01-3.13 2.994l-40-1.796a2.997 2.997 0 01-2.86-2.882L1.002 5.724A2.997 2.997 0 013.81 2.621L36.609.57l-.285 6.756a.447.447 0 00.05.223l.04.066c.15.196.43.235.627.085l2.623-1.99 2.217 1.746a.447.447 0 00.723-.367L42.356.211l3.298-.205A2.997 2.997 0 0148.83 2.81z",
           fill: "#FF4785",
           fillRule: "nonzero"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react_native_svg11.G, { transform: "translate(1)", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_native_svg11.Mask, { id: "b", fill: "#fff", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_native_svg11.Use, { xlinkHref: "#a" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-          import_react_native_svg11.Path,
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react_native_svg12.G, { transform: "translate(1)", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_native_svg12.Mask, { id: "b", fill: "#fff", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_native_svg12.Use, { xlinkHref: "#a" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          import_react_native_svg12.Path,
           {
             fill: "#FFF",
             fillRule: "nonzero",
@@ -4796,10 +4820,10 @@ function DarkLogo({ width = 300, height = 60, ...props }) {
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react_native_svg11.G, { transform: "translate(1)", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_native_svg11.Mask, { id: "d", fill: "#fff", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_native_svg11.Use, { xlinkHref: "#c" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-          import_react_native_svg11.Path,
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react_native_svg12.G, { transform: "translate(1)", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_native_svg12.Mask, { id: "d", fill: "#fff", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_native_svg12.Use, { xlinkHref: "#c" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          import_react_native_svg12.Path,
           {
             fill: "#FFF",
             fillRule: "nonzero",
@@ -4813,47 +4837,47 @@ function DarkLogo({ width = 300, height = 60, ...props }) {
 }
 
 // src/icon/Logo.tsx
-var import_react_native_svg12 = __toESM(require("react-native-svg"));
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_react_native_svg13 = __toESM(require("react-native-svg"));
+var import_jsx_runtime25 = require("react/jsx-runtime");
 function Logo({ width = 300, height = 60, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react_native_svg12.default, { width, height, viewBox: "0 0 300 60", ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react_native_svg12.Defs, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-        import_react_native_svg12.Path,
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_react_native_svg13.default, { width, height, viewBox: "0 0 300 60", ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_react_native_svg13.Defs, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        import_react_native_svg13.Path,
         {
           id: "a",
           d: "M1.848 54.92L.002 5.723A2.997 2.997 0 012.81 2.621L44.654.006a2.997 2.997 0 013.183 2.99v53.607a2.997 2.997 0 01-3.13 2.994l-40-1.796a2.997 2.997 0 01-2.86-2.882z"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-        import_react_native_svg12.Path,
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        import_react_native_svg13.Path,
         {
           id: "c",
           d: "M1.848 54.92L.002 5.723A2.997 2.997 0 012.81 2.621L44.654.006a2.997 2.997 0 013.183 2.99v53.607a2.997 2.997 0 01-3.13 2.994l-40-1.796a2.997 2.997 0 01-2.86-2.882z"
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react_native_svg12.G, { fill: "none", fillRule: "evenodd", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-        import_react_native_svg12.Path,
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_react_native_svg13.G, { fill: "none", fillRule: "evenodd", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        import_react_native_svg13.Path,
         {
           fill: "#333",
           fillRule: "nonzero",
           d: "M80.387 47.178c-2.543 0-4.99-.342-7.343-1.025-2.352-.684-4.307-1.63-5.864-2.837l2.384-5.293c3.242 2.257 6.882 3.386 10.919 3.386 2.097 0 3.71-.342 4.84-1.026 1.128-.683 1.692-1.629 1.692-2.836 0-1.081-.517-1.924-1.55-2.528-1.033-.603-2.869-1.192-5.507-1.764-2.956-.604-5.316-1.335-7.08-2.193-1.765-.858-3.052-1.915-3.862-3.17-.811-1.256-1.216-2.806-1.216-4.65 0-2.034.564-3.846 1.692-5.435 1.129-1.59 2.71-2.837 4.744-3.743 2.035-.906 4.387-1.359 7.057-1.359 2.384 0 4.68.35 6.89 1.05 2.21.699 3.965 1.636 5.269 2.812l-2.384 5.293c-3.084-2.257-6.326-3.385-9.727-3.385-1.94 0-3.465.373-4.577 1.12-1.113.747-1.67 1.772-1.67 3.075 0 .763.215 1.391.644 1.884.43.492 1.145.93 2.146 1.31 1.001.382 2.424.78 4.267 1.193 4.323.954 7.43 2.177 9.322 3.671 1.891 1.494 2.837 3.56 2.837 6.199 0 3.178-1.224 5.682-3.672 7.51-2.447 1.827-5.864 2.74-10.25 2.74zm31.183-5.34c.731 0 1.494-.048 2.289-.143l-.382 5.244c-.922.128-1.844.191-2.765.191-3.56 0-6.159-.779-7.796-2.336-1.637-1.558-2.456-3.926-2.456-7.104v-8.964h-4.434v-5.388h4.434v-6.866h7.2v6.866h5.865v5.388h-5.865v8.916c0 2.797 1.303 4.196 3.91 4.196zm16.736 5.292c-2.48 0-4.657-.5-6.533-1.502-1.875-1.001-3.321-2.416-4.338-4.243-1.018-1.828-1.526-3.982-1.526-6.46 0-2.48.508-4.634 1.526-6.462 1.017-1.827 2.463-3.234 4.338-4.22 1.876-.985 4.053-1.477 6.533-1.477 2.479 0 4.656.492 6.532 1.478 1.875.985 3.321 2.392 4.339 4.22 1.017 1.827 1.525 3.98 1.525 6.46s-.508 4.633-1.525 6.46c-1.018 1.828-2.464 3.243-4.34 4.244-1.875 1.002-4.052 1.502-6.531 1.502zm0-5.483c3.496 0 5.244-2.24 5.244-6.723 0-2.257-.453-3.941-1.358-5.054-.906-1.113-2.202-1.669-3.886-1.669-3.497 0-5.245 2.241-5.245 6.723 0 4.482 1.748 6.723 5.245 6.723zm32.327-12.969l-4.053.43c-2.003.19-3.417.754-4.244 1.692-.826.938-1.24 2.185-1.24 3.743v12.206h-7.199V23.338h6.914v3.957c1.176-2.702 3.607-4.18 7.295-4.434l2.098-.143.429 5.96zm20.92-5.292h7.056L174.496 55.33H167.2l4.481-9.87-9.63-22.075h7.485l5.912 14.876 6.103-14.876zm23.744-.62c2.034 0 3.83.492 5.388 1.478 1.557.985 2.773 2.392 3.647 4.22.874 1.827 1.311 3.949 1.311 6.365 0 2.416-.437 4.553-1.31 6.413-.875 1.86-2.099 3.306-3.672 4.339-1.574 1.033-3.362 1.55-5.364 1.55-1.621 0-3.083-.343-4.387-1.026-1.303-.683-2.304-1.629-3.004-2.837v3.48h-7.104V13.135h7.2v13.35c.7-1.175 1.692-2.09 2.98-2.74 1.287-.652 2.726-.978 4.315-.978zm-2.098 18.881c1.685 0 2.988-.596 3.91-1.788.922-1.192 1.382-2.869 1.382-5.03 0-2.13-.46-3.759-1.382-4.887-.922-1.129-2.225-1.693-3.91-1.693s-2.988.58-3.91 1.74c-.922 1.16-1.383 2.805-1.383 4.935 0 2.162.461 3.822 1.383 4.983.922 1.16 2.225 1.74 3.91 1.74zm28.083 5.483c-2.479 0-4.656-.5-6.532-1.502-1.875-1.001-3.321-2.416-4.339-4.243-1.017-1.828-1.525-3.982-1.525-6.46 0-2.48.508-4.634 1.525-6.462 1.018-1.827 2.464-3.234 4.34-4.22 1.875-.985 4.052-1.477 6.531-1.477 2.48 0 4.657.492 6.533 1.478 1.875.985 3.321 2.392 4.339 4.22 1.017 1.827 1.525 3.98 1.525 6.46s-.508 4.633-1.525 6.46c-1.018 1.828-2.464 3.243-4.34 4.244-1.875 1.002-4.052 1.502-6.532 1.502zm0-5.483c3.497 0 5.245-2.24 5.245-6.723 0-2.257-.453-3.941-1.359-5.054-.906-1.113-2.2-1.669-3.886-1.669-3.496 0-5.244 2.241-5.244 6.723 0 4.482 1.748 6.723 5.244 6.723zm26.844 5.483c-2.48 0-4.656-.5-6.532-1.502-1.875-1.001-3.322-2.416-4.339-4.243-1.017-1.828-1.525-3.982-1.525-6.46 0-2.48.508-4.634 1.525-6.462 1.017-1.827 2.464-3.234 4.34-4.22 1.875-.985 4.052-1.477 6.531-1.477 2.48 0 4.657.492 6.532 1.478 1.876.985 3.322 2.392 4.34 4.22 1.017 1.827 1.525 3.98 1.525 6.46s-.508 4.633-1.526 6.46c-1.017 1.828-2.463 3.243-4.339 4.244-1.875 1.002-4.052 1.502-6.532 1.502zm0-5.483c3.497 0 5.245-2.24 5.245-6.723 0-2.257-.453-3.941-1.359-5.054-.906-1.113-2.201-1.669-3.886-1.669-3.496 0-5.244 2.241-5.244 6.723 0 4.482 1.748 6.723 5.244 6.723zM299 46.749h-8.82l-8.965-10.442v10.442h-7.2V13.134h7.2v20.217l8.63-9.965h8.583l-9.822 11.157L299 46.749z"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-        import_react_native_svg12.Path,
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        import_react_native_svg13.Path,
         {
           d: "M48.831 2.81c.004.062.006.124.006.187v53.606a2.997 2.997 0 01-3.13 2.994l-40-1.796a2.997 2.997 0 01-2.86-2.882L1.002 5.724A2.997 2.997 0 013.81 2.621L36.609.57l-.285 6.756a.447.447 0 00.05.223l.04.066c.15.196.43.235.627.085l2.623-1.99 2.217 1.746a.447.447 0 00.723-.367L42.356.211l3.298-.205A2.997 2.997 0 0148.83 2.81z",
           fill: "#FF4785",
           fillRule: "nonzero"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react_native_svg12.G, { transform: "translate(1)", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_native_svg12.Mask, { id: "b", fill: "#fff", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_native_svg12.Use, { xlinkHref: "#a" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-          import_react_native_svg12.Path,
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_react_native_svg13.G, { transform: "translate(1)", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_native_svg13.Mask, { id: "b", fill: "#fff", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_native_svg13.Use, { xlinkHref: "#a" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          import_react_native_svg13.Path,
           {
             fill: "#FFF",
             fillRule: "nonzero",
@@ -4862,10 +4886,10 @@ function Logo({ width = 300, height = 60, ...props }) {
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react_native_svg12.G, { transform: "translate(1)", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_native_svg12.Mask, { id: "d", fill: "#fff", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_native_svg12.Use, { xlinkHref: "#c" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-          import_react_native_svg12.Path,
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_react_native_svg13.G, { transform: "translate(1)", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_native_svg13.Mask, { id: "d", fill: "#fff", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_native_svg13.Use, { xlinkHref: "#c" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          import_react_native_svg13.Path,
           {
             fill: "#FFF",
             fillRule: "nonzero",
@@ -4878,41 +4902,148 @@ function Logo({ width = 300, height = 60, ...props }) {
   ] });
 }
 
-// src/icon/MenuIcon.tsx
-var import_react_native_svg13 = require("react-native-svg");
-var import_jsx_runtime25 = require("react/jsx-runtime");
-var MenuIcon = ({
-  color = "currentColor",
-  width = 14,
-  height = 14,
-  ...props
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_native_svg13.Svg, { width, height, viewBox: "0 0 14 14", fill: "none", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-    import_react_native_svg13.Path,
+// src/StorybookLogo.tsx
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var WIDTH = 125;
+var HEIGHT = 25;
+var NoBrandLogo = ({ theme }) => theme.base === "light" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Logo, { height: HEIGHT, width: WIDTH }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DarkLogo, { height: HEIGHT, width: WIDTH });
+function isElement(value) {
+  return (0, import_react17.isValidElement)(value);
+}
+var BrandLogo = ({ theme }) => {
+  const imageHasNoWidthOrHeight = typeof theme.brand.image === "object" && typeof theme.brand.image === "object" && "uri" in theme.brand.image && (!("height" in theme.brand.image) || !("width" in theme.brand.image));
+  (0, import_react17.useEffect)(() => {
+    if (imageHasNoWidthOrHeight) {
+      console.warn(
+        "STORYBOOK: When using a remote image as the brand logo, you must also set the width and height.\nFor example:  brand: { image: { uri: 'https://sb.com/img.png', height: 25, width: 25}}"
+      );
+    }
+  }, [imageHasNoWidthOrHeight]);
+  if (!theme.brand.image) {
+    return null;
+  }
+  if (isElement(theme.brand.image)) {
+    return theme.brand.image;
+  }
+  const image = /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    import_react_native8.Image,
     {
-      d: "M13 3.5a.5.5 0 010 1H1a.5.5 0 010-1h12zM13.5 10a.5.5 0 00-.5-.5H1a.5.5 0 000 1h12a.5.5 0 00.5-.5zM13 6.5a.5.5 0 010 1H1a.5.5 0 010-1h12z",
-      fill: color
+      source: theme.brand.image,
+      resizeMode: theme.brand.resizeMode ?? "contain",
+      style: imageHasNoWidthOrHeight ? { width: WIDTH, height: HEIGHT } : void 0
     }
-  ) });
+  );
+  if (theme.brand.url) {
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+      import_react_native8.TouchableOpacity,
+      {
+        onPress: () => {
+          if (theme.brand.url)
+            import_react_native8.Linking.openURL(theme.brand.url);
+        },
+        children: image
+      }
+    );
+  } else {
+    return image;
+  }
+};
+var BrandTitle = ({ theme }) => {
+  const brandTitleStyle = (0, import_react17.useMemo)(() => {
+    return {
+      width: WIDTH,
+      height: HEIGHT,
+      color: theme.color.defaultText,
+      fontSize: theme.typography.size.m1
+    };
+  }, [theme]);
+  const title = /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_native8.Text, { style: brandTitleStyle, numberOfLines: 1, ellipsizeMode: "tail", children: theme.brand.title });
+  if (theme.brand.url) {
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+      import_react_native8.TouchableOpacity,
+      {
+        onPress: () => {
+          if (theme.brand.url)
+            import_react_native8.Linking.openURL(theme.brand.url);
+        },
+        children: title
+      }
+    );
+  } else {
+    return title;
+  }
+};
+var StorybookLogo = ({ theme }) => {
+  if (theme.brand?.image) {
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(BrandLogo, { theme });
+  } else if (theme.brand?.title) {
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(BrandTitle, { theme });
+  } else {
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(NoBrandLogo, { theme });
+  }
+};
+
+// src/hooks/useStoreState.ts
+var import_react19 = require("react");
+
+// src/StorageProvider.tsx
+var import_react18 = require("react");
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var StorageContext = (0, import_react18.createContext)({
+  getItem: async () => null,
+  setItem: async () => {
+  }
+});
+var StorageProvider = ({
+  storage,
+  children
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(StorageContext.Provider, { value: storage, children });
+};
+var useStorage = () => (0, import_react18.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)(() => {
+    storage.getItem(key).then((newVal) => {
+      if (newVal === null || newVal === void 0) {
+        setVal(defaultValue);
+      } else {
+        setVal(newVal === "true");
+      }
+    });
+  }, [key, storage, defaultValue]);
+  (0, import_react19.useEffect)(() => {
+    storage.setItem(key, val.toString());
+  }, [key, storage, val]);
+  return [val, setVal];
 };
 
 // src/Layout.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var Layout = ({
   storyHash,
   story,
   children
 }) => {
   const theme = (0, import_react_native_theming15.useTheme)();
-  const mobileMenuDrawerRef = (0, import_react17.useRef)(null);
-  const addonPanelRef = (0, import_react17.useRef)(null);
+  const mobileMenuDrawerRef = (0, import_react20.useRef)(null);
+  const addonPanelRef = (0, import_react20.useRef)(null);
   const insets = (0, import_react_native_safe_area_context3.useSafeAreaInsets)();
   const { isDesktop } = useLayout();
-  const [desktopSidebarOpen, setDesktopSidebarOpen] = (0, import_react17.useState)(true);
-  const [desktopAddonsPanelOpen, setDesktopAddonsPanelOpen] = (0, import_react17.useState)(true);
+  const [desktopSidebarOpen, setDesktopSidebarOpen] = useStoreBooleanState(
+    "desktopSidebarState",
+    true
+  );
+  const [desktopAddonsPanelOpen, setDesktopAddonsPanelOpen] = useStoreBooleanState(
+    "desktopPanelState",
+    true
+  );
   if (isDesktop) {
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
-      import_react_native8.View,
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+      import_react_native9.View,
       {
         style: {
           flex: 1,
@@ -4921,8 +5052,8 @@ var Layout = ({
           flexDirection: "row"
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-            import_react_native8.View,
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+            import_react_native9.View,
             {
               style: {
                 width: desktopSidebarOpen ? 240 : void 0,
@@ -4930,16 +5061,16 @@ var Layout = ({
                 borderColor: theme.appBorderColor,
                 borderRightWidth: 1
               },
-              children: desktopSidebarOpen ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
-                import_react_native8.ScrollView,
+              children: desktopSidebarOpen ? /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+                import_react_native9.ScrollView,
                 {
                   keyboardShouldPersistTaps: "handled",
                   contentContainerStyle: {
                     paddingBottom: insets.bottom
                   },
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
-                      import_react_native8.View,
+                    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+                      import_react_native9.View,
                       {
                         style: {
                           flexDirection: "row",
@@ -4951,12 +5082,12 @@ var Layout = ({
                           justifyContent: "space-between"
                         },
                         children: [
-                          theme.base === "light" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Logo, { height: 25, width: 125 }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DarkLogo, { height: 25, width: 125 }),
-                          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(IconButton, { onPress: () => setDesktopSidebarOpen(false), Icon: MenuIcon })
+                          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(StorybookLogo, { theme }),
+                          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(IconButton, { onPress: () => setDesktopSidebarOpen(false), Icon: MenuIcon })
                         ]
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                       Sidebar,
                       {
                         extra: [],
@@ -4975,13 +5106,13 @@ var Layout = ({
                     )
                   ]
                 }
-              ) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(IconButton, { onPress: () => setDesktopSidebarOpen(true), Icon: MenuIcon })
+              ) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(IconButton, { onPress: () => setDesktopSidebarOpen(true), Icon: MenuIcon })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_react_native8.View, { style: { flex: 1 }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_native8.View, { style: { flex: 1, overflow: "hidden" }, children }),
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-              import_react_native8.View,
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react_native9.View, { style: { flex: 1 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_native9.View, { style: { flex: 1, overflow: "hidden" }, children }),
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+              import_react_native9.View,
               {
                 style: {
                   height: desktopAddonsPanelOpen ? 300 : void 0,
@@ -4990,7 +5121,7 @@ var Layout = ({
                   paddingTop: desktopAddonsPanelOpen ? 4 : 0,
                   padding: desktopAddonsPanelOpen ? 0 : 10
                 },
-                children: desktopAddonsPanelOpen ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(AddonsTabs, { storyId: story?.id, onClose: () => setDesktopAddonsPanelOpen(false) }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                children: desktopAddonsPanelOpen ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(AddonsTabs, { storyId: story?.id, onClose: () => setDesktopAddonsPanelOpen(false) }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                   IconButton,
                   {
                     style: { marginLeft: "auto" },
@@ -5005,10 +5136,10 @@ var Layout = ({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_react_native8.View, { style: { flex: 1, paddingTop: insets.top, backgroundColor: theme.background.content }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_native8.View, { style: { flex: 1, overflow: "hidden" }, children }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Container3, { style: { marginBottom: insets.bottom }, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Nav, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react_native9.View, { style: { flex: 1, paddingTop: insets.top, backgroundColor: theme.background.content }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_native9.View, { style: { flex: 1, overflow: "hidden" }, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Container3, { style: { marginBottom: insets.bottom }, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Nav, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
         Button2,
         {
           style: { flexShrink: 1 },
@@ -5017,8 +5148,8 @@ var Layout = ({
             mobileMenuDrawerRef.current.setMobileMenuOpen(true);
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(MenuIcon, { color: theme.color.mediumdark }),
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_react_native8.Text, { style: { flexShrink: 1, color: theme.color.defaultText }, numberOfLines: 1, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(MenuIcon, { color: theme.color.mediumdark }),
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react_native9.Text, { style: { flexShrink: 1, color: theme.color.defaultText }, numberOfLines: 1, children: [
               story?.title,
               "/",
               story?.name
@@ -5026,7 +5157,7 @@ var Layout = ({
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
         IconButton,
         {
           onPress: () => addonPanelRef.current.setAddonsPanelOpen(true),
@@ -5034,9 +5165,9 @@ var Layout = ({
         }
       )
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(MobileMenuDrawer, { ref: mobileMenuDrawerRef, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_native8.View, { style: { paddingLeft: 16, paddingTop: 4, paddingBottom: 4 }, children: theme.base === "light" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Logo, { height: 25, width: 125 }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DarkLogo, { height: 25, width: 125 }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(MobileMenuDrawer, { ref: mobileMenuDrawerRef, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_native9.View, { style: { paddingLeft: 16, paddingTop: 4, paddingBottom: 4 }, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(StorybookLogo, { theme }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
         Sidebar,
         {
           extra: [],
@@ -5054,7 +5185,7 @@ var Layout = ({
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(MobileAddonsPanel, { ref: addonPanelRef, storyId: story?.id })
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(MobileAddonsPanel, { ref: addonPanelRef, storyId: story?.id })
   ] });
 };
 var Nav = import_react_native_theming15.styled.View({
@@ -5389,6 +5520,7 @@ var transformStoryIndexV3toV4 = (index) => {
   RootNode,
   RootNodeText,
   Sidebar,
+  StorageProvider,
   StoryNode,
   Tree,
   isExpandType,
@@ -5396,5 +5528,6 @@ var transformStoryIndexV3toV4 = (index) => {
   transformStoryIndexV2toV3,
   transformStoryIndexV3toV4,
   useCombination,
-  useLayout
+  useLayout,
+  useStorage
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native-ui",
-  "version": "8.4.3-alpha.1",
+  "version": "8.4.3-alpha.2",
   "description": "ui components for react native storybook",
   "keywords": [
     "react",
@@ -60,7 +60,7 @@
   "dependencies": {
     "@storybook/core": "^8.4.2",
     "@storybook/react": "^8.4.2",
-    "@storybook/react-native-theming": "^8.4.3-alpha.1",
+    "@storybook/react-native-theming": "^8.4.3-alpha.2",
     "fuse.js": "^7.0.0",
     "memoizerific": "^1.11.3",
     "polished": "^4.3.1",
@@ -81,5 +81,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "52feddc7a8059e56fa563c27f69a928bb852f96f"
+  "gitHead": "78da05071501569d90a08aa6dee9382bf79f7cd8"
 }

package/src/Layout.tsx

@@ -3,7 +3,7 @@ import { addons } from '@storybook/core/manager-api';
 import { type API_IndexHash, type Args, type StoryContext } from '@storybook/core/types';
 import type { ReactRenderer } from '@storybook/react';
 import { styled, useTheme } from '@storybook/react-native-theming';
-import { ReactNode, useRef, useState } from 'react';
+import { ReactNode, useRef } from 'react';
 import { ScrollView, Text, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { IconButton } from './IconButton';
@@ -13,9 +13,10 @@ import { MobileMenuDrawer, MobileMenuDrawerRef } from './MobileMenuDrawer';
 import { Sidebar } from './Sidebar';
 import { DEFAULT_REF_ID } from './constants';
 import { BottomBarToggleIcon } from './icon/BottomBarToggleIcon';
-import { DarkLogo } from './icon/DarkLogo';
-import { Logo } from './icon/Logo';
+
 import { MenuIcon } from './icon/MenuIcon';
+import { StorybookLogo } from './StorybookLogo';
+import { useStoreBooleanState } from './hooks/useStoreState';
 
 export const Layout = ({
   storyHash,
@@ -32,9 +33,15 @@ export const Layout = ({
   const insets = useSafeAreaInsets();
   const { isDesktop } = useLayout();
 
-  const [desktopSidebarOpen, setDesktopSidebarOpen] = useState(true);
+  const [desktopSidebarOpen, setDesktopSidebarOpen] = useStoreBooleanState(
+    'desktopSidebarState',
+    true
+  );
 
-  const [desktopAddonsPanelOpen, setDesktopAddonsPanelOpen] = useState(true);
+  const [desktopAddonsPanelOpen, setDesktopAddonsPanelOpen] = useStoreBooleanState(
+    'desktopPanelState',
+    true
+  );
 
   if (isDesktop) {
     return (
@@ -72,11 +79,7 @@ export const Layout = ({
                   justifyContent: 'space-between',
                 }}
               >
-                {theme.base === 'light' ? (
-                  <Logo height={25} width={125} />
-                ) : (
-                  <DarkLogo height={25} width={125} />
-                )}
+                <StorybookLogo theme={theme} />
 
                 <IconButton onPress={() => setDesktopSidebarOpen(false)} Icon={MenuIcon} />
               </View>
@@ -157,11 +160,7 @@ export const Layout = ({
 
       <MobileMenuDrawer ref={mobileMenuDrawerRef}>
         <View style={{ paddingLeft: 16, paddingTop: 4, paddingBottom: 4 }}>
-          {theme.base === 'light' ? (
-            <Logo height={25} width={125} />
-          ) : (
-            <DarkLogo height={25} width={125} />
-          )}
+          <StorybookLogo theme={theme} />
         </View>
         <Sidebar
           extra={[]}

package/src/Sidebar.tsx

@@ -10,7 +10,7 @@ import { Explorer } from './Explorer';
 import { Search } from './Search';
 import { SearchResults } from './SearchResults';
 import type { CombinedDataset, Selection } from './types';
-import { useLastViewed } from './useLastViewed';
+import { useLastViewed } from './hooks/useLastViewed';
 import { DEFAULT_REF_ID } from './constants';
 import { View } from 'react-native';
 

package/src/StorageProvider.tsx

@@ -0,0 +1,21 @@
+import type { FC, PropsWithChildren } from 'react';
+import { createContext, useContext } from 'react';
+
+interface Storage {
+  getItem: (key: string) => Promise<string | null>;
+  setItem: (key: string, value: string) => Promise<void>;
+}
+
+const StorageContext = createContext<Storage>({
+  getItem: async () => null,
+  setItem: async () => {},
+});
+
+export const StorageProvider: FC<PropsWithChildren<{ storage: Storage }>> = ({
+  storage,
+  children,
+}) => {
+  return <StorageContext.Provider value={storage}>{children}</StorageContext.Provider>;
+};
+
+export const useStorage = () => useContext(StorageContext);

package/src/StorybookLogo.stories.tsx

@@ -0,0 +1,76 @@
+import type { StoryObj, Meta } from '@storybook/react';
+import { StorybookLogo } from './StorybookLogo';
+import { Theme, theme } from '@storybook/react-native-theming';
+import { Text } from 'react-native';
+
+const meta = {
+  component: StorybookLogo,
+  title: 'UI/StorybookLogo',
+  args: {
+    theme: null,
+  },
+} satisfies Meta<typeof StorybookLogo>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const TitleLogo: Story = {
+  args: {
+    theme: {
+      ...theme,
+      brand: { title: 'React Native' },
+    } satisfies Theme,
+  },
+};
+
+export const ImageLogo: Story = {
+  args: {
+    theme: {
+      ...theme,
+      brand: {
+        image: {
+          uri: 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/512px-React-icon.svg.png',
+          height: 25,
+          width: 25,
+        },
+      },
+    } satisfies Theme,
+  },
+};
+
+export const ImageUrlLogo: Story = {
+  args: {
+    theme: {
+      ...theme,
+      brand: {
+        image: {
+          uri: 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/512px-React-icon.svg.png',
+          width: 25,
+          height: 25,
+        },
+        title: 'React Native',
+        url: 'https://reactnative.dev',
+      },
+    } satisfies Theme,
+  },
+};
+
+export const ImageSourceLogo: Story = {
+  args: {
+    theme: {
+      ...theme,
+      brand: {
+        image: require('./assets/react-native-logo.png'),
+        resizeMode: 'contain',
+        url: 'https://reactnative.dev',
+      },
+    } satisfies Theme,
+  },
+};
+
+export const ImageElementLogo: Story = {
+  args: {
+    theme: { ...theme, brand: { image: <Text>Element</Text> } } satisfies Theme,
+  },
+};

package/src/StorybookLogo.tsx

@@ -0,0 +1,106 @@
+import { Theme } from '@storybook/react-native-theming';
+import { FC, isValidElement, ReactElement, useEffect, useMemo } from 'react';
+import { Image, Linking, StyleProp, Text, TextStyle, TouchableOpacity } from 'react-native';
+import { DarkLogo } from './icon/DarkLogo';
+import { Logo } from './icon/Logo';
+
+const WIDTH = 125;
+const HEIGHT = 25;
+
+const NoBrandLogo: FC<{ theme: Theme }> = ({ theme }) =>
+  theme.base === 'light' ? (
+    <Logo height={HEIGHT} width={WIDTH} />
+  ) : (
+    <DarkLogo height={HEIGHT} width={WIDTH} />
+  );
+
+function isElement(value: unknown): value is ReactElement {
+  return isValidElement(value);
+}
+
+const BrandLogo: FC<{ theme: Theme }> = ({ 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));
+
+  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}}"
+      );
+    }
+  }, [imageHasNoWidthOrHeight]);
+
+  if (!theme.brand.image) {
+    return null;
+  }
+
+  if (isElement(theme.brand.image)) {
+    return theme.brand.image;
+  }
+
+  const image = (
+    <Image
+      source={theme.brand.image}
+      resizeMode={theme.brand.resizeMode ?? 'contain'}
+      style={imageHasNoWidthOrHeight ? { width: WIDTH, height: HEIGHT } : undefined}
+    />
+  );
+
+  if (theme.brand.url) {
+    return (
+      <TouchableOpacity
+        onPress={() => {
+          if (theme.brand.url) Linking.openURL(theme.brand.url);
+        }}
+      >
+        {image}
+      </TouchableOpacity>
+    );
+  } else {
+    return image;
+  }
+};
+
+const BrandTitle: FC<{ theme: Theme }> = ({ theme }) => {
+  const brandTitleStyle = useMemo<StyleProp<TextStyle>>(() => {
+    return {
+      width: WIDTH,
+      height: HEIGHT,
+      color: theme.color.defaultText,
+      fontSize: theme.typography.size.m1,
+    };
+  }, [theme]);
+
+  const title = (
+    <Text style={brandTitleStyle} numberOfLines={1} ellipsizeMode="tail">
+      {theme.brand.title}
+    </Text>
+  );
+
+  if (theme.brand.url) {
+    return (
+      <TouchableOpacity
+        onPress={() => {
+          if (theme.brand.url) Linking.openURL(theme.brand.url);
+        }}
+      >
+        {title}
+      </TouchableOpacity>
+    );
+  } else {
+    return title;
+  }
+};
+
+export const StorybookLogo: FC<{ theme: Theme }> = ({ theme }) => {
+  if (theme.brand?.image) {
+    return <BrandLogo theme={theme} />;
+  } else if (theme.brand?.title) {
+    return <BrandTitle theme={theme} />;
+  } else {
+    return <NoBrandLogo theme={theme} />;
+  }
+};

package/src/Tree.stories.tsx

@@ -77,6 +77,7 @@ export const SingleStoryComponents: Story = {
         data={{
           ...{
             single: {
+              tags: [],
               type: 'component',
               name: 'Single',
               id: 'single',

package/src/Tree.tsx

@@ -14,8 +14,8 @@ import { CollapseAllIcon } from './icon/CollapseAllIcon';
 import { CollapseIcon } from './icon/CollapseIcon';
 import { ExpandAllIcon } from './icon/ExpandAllIcon';
 import { Item } from './types';
-import type { ExpandAction, ExpandedState } from './useExpanded';
-import { useExpanded } from './useExpanded';
+import type { ExpandAction, ExpandedState } from './hooks/useExpanded';
+import { useExpanded } from './hooks/useExpanded';
 import { getGroupStatus, statusMapping } from './util/status';
 import { createId, getAncestorIds, getDescendantIds, isStoryHoistable } from './util/tree';
 

package/src/{useExpanded.ts → hooks/useExpanded.ts}

@@ -1,7 +1,7 @@
 import type { StoriesHash } from '@storybook/core/manager-api';
 import type { Dispatch, Reducer } from 'react';
 import { useCallback, useEffect, useReducer } from 'react';
-import { getAncestorIds } from './util/tree';
+import { getAncestorIds } from '../util/tree';
 
 export type ExpandedState = Record<string, boolean>;
 

package/src/{useLastViewed.ts → hooks/useLastViewed.ts}

@@ -2,7 +2,7 @@ import debounce from 'lodash/debounce.js';
 import { useCallback, useEffect, useMemo, useRef } from 'react';
 import store from 'store2';
 
-import type { Selection, StoryRef } from './types';
+import type { Selection, StoryRef } from '../types';
 
 const save = debounce((value) => store.set('lastViewedStoryIds', value), 1000);
 

package/src/hooks/useStoreState.ts

@@ -0,0 +1,27 @@
+import { useEffect, useState } from 'react';
+import { useStorage } from '../StorageProvider';
+
+export const useStoreBooleanState = (
+  key: string,
+  defaultValue: boolean
+): ReturnType<typeof useState<boolean>> => {
+  const storage = useStorage();
+
+  const [val, setVal] = useState<boolean>(defaultValue);
+
+  useEffect(() => {
+    storage.getItem(key).then((newVal) => {
+      if (newVal === null || newVal === undefined) {
+        setVal(defaultValue);
+      } else {
+        setVal(newVal === 'true');
+      }
+    });
+  }, [key, storage, defaultValue]);
+
+  useEffect(() => {
+    storage.setItem(key, val.toString());
+  }, [key, storage, val]);
+
+  return [val, setVal];
+};

package/src/index.tsx

@@ -8,3 +8,4 @@ export * from './Sidebar';
 export * from './types';
 export * from './Layout';
 export * from './util/StoryHash';
+export * from './StorageProvider';