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

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as _storybook_react_native_theming from '@storybook/react-native-theming';
 import * as react_native from 'react-native';
-import { PressableProps, View, Text, TouchableOpacityProps, TouchableOpacity } from 'react-native';
+import { PressableProps, View, TouchableOpacityProps, TouchableOpacity } from 'react-native';
 import * as React$1 from 'react';
 import React__default, { FC, ComponentProps, ReactElement, PropsWithChildren, ReactNode } from 'react';
 import { State, StoriesHash, API } from '@storybook/core/manager-api';
@@ -43,11 +43,6 @@ declare const GroupNode: FC<ComponentProps<typeof BranchNode> & {
 declare const ComponentNode: FC<ComponentProps<typeof BranchNode>>;
 declare const StoryNode: FC<ComponentProps<typeof LeafNode>>;
 
-interface ExpandAction {
-    ids: string[];
-    value: boolean;
-}
-
 type Refs = State['refs'];
 type RefType = Refs[keyof Refs] & {
     status?: API_StatusState;
@@ -100,6 +95,11 @@ type SearchChildrenFn = (args: {
     highlightedIndex: number | null;
 }) => React.ReactNode;
 
+interface ExpandAction {
+    ids: string[];
+    value: boolean;
+}
+
 interface NodeProps {
     item: Item;
     refId: string;
@@ -132,7 +132,7 @@ declare const RootNodeText: _storybook_react_native_theming.StyledComponent<reac
     theme?: _storybook_react_native_theming.Theme;
     as?: React__default.ElementType<any, keyof React__default.JSX.IntrinsicElements>;
 }, {}, {
-    ref?: React__default.Ref<Text>;
+    ref?: React__default.Ref<react_native.Text>;
 }>;
 declare const Tree: React__default.NamedExoticComponent<{
     isBrowsing: boolean;

package/dist/index.js

@@ -2990,7 +2990,6 @@ function StoryIcon({ color = "#37D5D3", ...props }) {
 
 // src/icon/CollapseIcon.tsx
 var import_react_native_theming = require("@storybook/react-native-theming");
-var import_polished = require("polished");
 var import_react_native_svg4 = __toESM(require("react-native-svg"));
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var CollapseIconWrapper = import_react_native_theming.styled.View(
@@ -3000,7 +2999,7 @@ var CollapseIconWrapper = import_react_native_theming.styled.View(
     display: "flex",
     justifyContent: "center",
     alignItems: "center",
-    color: (0, import_polished.transparentize)(0.4, theme.textMutedColor),
+    color: theme.textMutedColor,
     transform: isExpanded ? "rotateZ(90deg)" : "none",
     transition: "transform .1s ease-out"
   })
@@ -3018,12 +3017,13 @@ function CollapseSVG(props) {
 
 // src/TreeNode.tsx
 var import_react = __toESM(require("react"));
-var import_polished2 = require("polished");
+var import_polished = require("polished");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var BranchNodeText = import_react_native_theming2.styled.Text(({ theme }) => ({
   textAlign: "left",
   fontSize: theme.typography.size.s2,
-  flexShrink: 1
+  flexShrink: 1,
+  color: theme.color.defaultText
 }));
 var BranchNode = import_react_native_theming2.styled.TouchableOpacity(({ depth = 0, isExpandable = false, theme }) => ({
   width: "100%",
@@ -3042,7 +3042,7 @@ var BranchNode = import_react_native_theming2.styled.TouchableOpacity(({ depth =
   paddingBottom: 4,
   // will this actually do anything?
   "&:hover, &:focus": {
-    background: (0, import_polished2.transparentize)(0.93, theme.color.secondary),
+    background: (0, import_polished.transparentize)(0.93, theme.color.secondary),
     outline: "none"
   }
 }));
@@ -3131,7 +3131,7 @@ var StoryNode = import_react.default.memo(function StoryNode2({
 });
 
 // src/Tree.tsx
-var import_react_native_theming5 = require("@storybook/react-native-theming");
+var import_react_native_theming7 = require("@storybook/react-native-theming");
 var import_react6 = __toESM(require("react"));
 
 // src/Button.tsx
@@ -3224,12 +3224,12 @@ var StyledButton = import_react_native_theming3.styled.TouchableOpacity(({ theme
     if (variant === "solid")
       return theme.color.secondary;
     if (variant === "outline")
-      return theme.button$.background;
+      return theme.button.background;
     if (variant === "ghost" && active)
       return theme.background.hoverable;
     return "transparent";
   })(),
-  boxShadow: variant === "outline" ? `${theme.button$.border} 0 0 0 1px inset` : "none",
+  boxShadow: variant === "outline" ? `${theme.button.border} 0 0 0 1px inset` : "none",
   borderRadius: theme.input.borderRadius,
   // Making sure that the button never shrinks below its minimum size
   flexShrink: 0
@@ -3289,18 +3289,116 @@ var IconButton = (0, import_react3.forwardRef)(
 );
 IconButton.displayName = "IconButton";
 
-// src/useExpanded.ts
+// src/LayoutProvider.tsx
 var import_react4 = require("react");
 
-// src/util/tree.ts
-var import_memoizerific = __toESM(require("memoizerific"));
-
 // src/constants.ts
 var BREAKPOINT = 600;
 var MEDIA_DESKTOP_BREAKPOINT = `@media (min-width: ${BREAKPOINT}px)`;
 var DEFAULT_REF_ID = "storybook_internal";
 
+// src/LayoutProvider.tsx
+var import_react_native = require("react-native");
+var import_jsx_runtime8 = (
+  // <BottomSheetModalProvider>
+  require("react/jsx-runtime")
+);
+var LayoutContext = (0, import_react4.createContext)({
+  // isMobileMenuOpen: false,
+  openMobileMenu: () => {
+  },
+  closeMobileMenu: () => {
+  },
+  // isMobileAboutOpen: false,
+  // setMobileAboutOpen: () => {},
+  // isMobilePanelOpen: false,
+  // setMobilePanelOpen: () => {},
+  isDesktop: false,
+  isMobile: false
+});
+var LayoutProvider = ({ children }) => {
+  const { width } = (0, import_react_native.useWindowDimensions)();
+  const isDesktop = width >= BREAKPOINT;
+  const isMobile = !isDesktop;
+  const openMobileMenu = (0, import_react4.useCallback)(() => {
+  }, []);
+  const closeMobileMenu = (0, import_react4.useCallback)(() => {
+  }, []);
+  const contextValue = (0, import_react4.useMemo)(
+    () => ({
+      // isMobileMenuOpen,
+      openMobileMenu,
+      closeMobileMenu,
+      // isMobileAboutOpen,
+      // setMobileAboutOpen,
+      // isMobilePanelOpen,
+      // setMobilePanelOpen,
+      isDesktop,
+      isMobile
+    }),
+    [
+      // isMobileMenuOpen,
+      openMobileMenu,
+      closeMobileMenu,
+      // // isMobileAboutOpen,
+      // setMobileAboutOpen,
+      // isMobilePanelOpen,
+      // setMobilePanelOpen,
+      isDesktop,
+      isMobile
+    ]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(LayoutContext.Provider, { value: contextValue, children }) });
+};
+var useLayout = () => (0, import_react4.useContext)(LayoutContext);
+
+// 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_jsx_runtime9 = require("react/jsx-runtime");
+var CollapseAllIcon = ({
+  color,
+  //= '#2E3438',
+  width = 14,
+  height = 14,
+  ...props
+}) => {
+  const theme = (0, import_react_native_theming4.useTheme)();
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_svg5.Svg, { width, height, viewBox: "0 0 14 14", fill: "none", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime9.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
+    }
+  ) });
+};
+
+// 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_jsx_runtime10 = require("react/jsx-runtime");
+var ExpandAllIcon = ({
+  color,
+  //= '#2E3438',
+  width = 14,
+  height = 14,
+  ...props
+}) => {
+  const theme = (0, import_react_native_theming5.useTheme)();
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native_svg6.Svg, { width, height, viewBox: "0 0 14 14", fill: "none", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime10.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
+    }
+  ) });
+};
+
+// src/useExpanded.ts
+var import_react5 = require("react");
+
 // src/util/tree.ts
+var import_memoizerific = __toESM(require("memoizerific"));
 var createId = (itemId, refId) => !refId || refId === DEFAULT_REF_ID ? itemId : `${refId}_${itemId}`;
 var get = (0, import_memoizerific.default)(1e3)((id, dataset) => dataset[id]);
 var getParent = (0, import_memoizerific.default)(1e3)((id, dataset) => {
@@ -3371,33 +3469,33 @@ var useExpanded = ({
   rootIds,
   selectedStoryId
 }) => {
-  const [expanded, setExpanded] = (0, import_react4.useReducer)(
+  const [expanded, setExpanded] = (0, import_react5.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_react5.useCallback)(({ ids, value }) => {
     setExpanded({ ids, value });
   }, []);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     setExpanded({ ids: getAncestorIds(data, selectedStoryId), value: true });
   }, [data, selectedStoryId]);
   return [expanded, updateExpanded];
 };
 
 // src/util/status.tsx
-var import_react_native_theming4 = require("@storybook/react-native-theming");
-var import_react_native_svg5 = __toESM(require("react-native-svg"));
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_react_native_theming6 = require("@storybook/react-native-theming");
+var import_react_native_svg7 = __toESM(require("react-native-svg"));
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function CircleIcon({ height = 14, width = 14, color, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native_svg5.default, { width, height, viewBox: "0 0 14 14", fill: "none", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native_svg5.Path, { d: "M14 7A7 7 0 110 7a7 7 0 0114 0z", fill: color }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native_svg7.default, { width, height, viewBox: "0 0 14 14", fill: "none", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native_svg7.Path, { d: "M14 7A7 7 0 110 7a7 7 0 0114 0z", fill: color }) });
 }
 function SmallIcons(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CircleIcon, { width: 6, height: 6, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CircleIcon, { width: 6, height: 6, ...props });
 }
 function LoadingIcons(props) {
-  const theme = (0, import_react_native_theming4.useTheme)();
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  const theme = (0, import_react_native_theming6.useTheme)();
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     SmallIcons,
     {
       color: theme.base === "light" ? theme.color.mediumdark : theme.color.darker,
@@ -3408,10 +3506,10 @@ function LoadingIcons(props) {
 var statusPriority = ["unknown", "pending", "success", "warn", "error"];
 var statusMapping = {
   unknown: [null, null],
-  pending: [/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(LoadingIcons, {}, "icon"), "currentColor"],
-  success: [/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SmallIcons, { color: "green" }, "icon"), "currentColor"],
-  warn: [/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SmallIcons, { color: "orange" }, "icon"), "#A15C20"],
-  error: [/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SmallIcons, { color: "red" }, "icon"), "brown"]
+  pending: [/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(LoadingIcons, {}, "icon"), "currentColor"],
+  success: [/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SmallIcons, { color: "green" }, "icon"), "currentColor"],
+  warn: [/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SmallIcons, { color: "orange" }, "icon"), "#A15C20"],
+  error: [/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SmallIcons, { color: "red" }, "icon"), "brown"]
 };
 var getHighestStatus = (statuses) => {
   return statusPriority.reduce(
@@ -3434,103 +3532,11 @@ function getGroupStatus(collapsedData, status) {
   }, {});
 }
 
-// src/Tree.tsx
-var import_react_native2 = require("react-native");
-
-// src/icon/ExpandAllIcon.tsx
-var import_react_native_svg6 = require("react-native-svg");
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var ExpandAllIcon = ({
-  color = "#2E3438",
-  width = 14,
-  height = 14,
-  ...props
-}) => {
-  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
-    }
-  ) });
-};
-
-// src/icon/CollapseAllIcon.tsx
-var import_react_native_svg7 = require("react-native-svg");
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var CollapseAllIcon = ({
-  color = "#2E3438",
-  width = 14,
-  height = 14,
-  ...props
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native_svg7.Svg, { width, height, viewBox: "0 0 14 14", fill: "none", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-    import_react_native_svg7.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
-    }
-  ) });
-};
-
-// src/LayoutProvider.tsx
-var import_react5 = require("react");
-var import_react_native = require("react-native");
-var import_jsx_runtime11 = (
-  // <BottomSheetModalProvider>
-  require("react/jsx-runtime")
-);
-var LayoutContext = (0, import_react5.createContext)({
-  // isMobileMenuOpen: false,
-  openMobileMenu: () => {
-  },
-  closeMobileMenu: () => {
-  },
-  // isMobileAboutOpen: false,
-  // setMobileAboutOpen: () => {},
-  // isMobilePanelOpen: false,
-  // setMobilePanelOpen: () => {},
-  isDesktop: false,
-  isMobile: false
-});
-var LayoutProvider = ({ children }) => {
-  const { width } = (0, import_react_native.useWindowDimensions)();
-  const isDesktop = width >= BREAKPOINT;
-  const isMobile = !isDesktop;
-  const openMobileMenu = (0, import_react5.useCallback)(() => {
-  }, []);
-  const closeMobileMenu = (0, import_react5.useCallback)(() => {
-  }, []);
-  const contextValue = (0, import_react5.useMemo)(
-    () => ({
-      // isMobileMenuOpen,
-      openMobileMenu,
-      closeMobileMenu,
-      // isMobileAboutOpen,
-      // setMobileAboutOpen,
-      // isMobilePanelOpen,
-      // setMobilePanelOpen,
-      isDesktop,
-      isMobile
-    }),
-    [
-      // isMobileMenuOpen,
-      openMobileMenu,
-      closeMobileMenu,
-      // // isMobileAboutOpen,
-      // setMobileAboutOpen,
-      // isMobilePanelOpen,
-      // setMobilePanelOpen,
-      isDesktop,
-      isMobile
-    ]
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(LayoutContext.Provider, { value: contextValue, children }) });
-};
-var useLayout = () => (0, import_react5.useContext)(LayoutContext);
-
 // src/Tree.tsx
 var import_jsx_runtime12 = require("react/jsx-runtime");
+var TextItem = import_react_native_theming7.styled.Text(({ theme }) => ({
+  color: theme.color.defaultText
+}));
 var Node = import_react6.default.memo(function Node2({
   item,
   refId,
@@ -3580,7 +3586,7 @@ var Node = import_react6.default.memo(function Node2({
           "aria-expanded": isExpanded,
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CollapseIcon, { isExpanded }),
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native2.Text, { children: item.renderLabel?.(item, {}) || item.name })
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TextItem, { children: item.renderLabel?.(item, {}) || item.name })
           ]
         }
       ),
@@ -3624,7 +3630,7 @@ var Node = import_react6.default.memo(function Node2({
   }
   return null;
 });
-var LeafNodeStyleWrapper = import_react_native_theming5.styled.View(({ theme }) => ({
+var LeafNodeStyleWrapper = import_react_native_theming7.styled.View(({ theme }) => ({
   position: "relative",
   display: "flex",
   flexDirection: "row",
@@ -3636,7 +3642,7 @@ var LeafNodeStyleWrapper = import_react_native_theming5.styled.View(({ theme })
   minHeight: 28,
   borderRadius: 4
 }));
-var RootNode = import_react_native_theming5.styled.View(({}) => ({
+var RootNode = import_react_native_theming7.styled.View(({}) => ({
   display: "flex",
   flexDirection: "row",
   alignItems: "center",
@@ -3645,7 +3651,7 @@ var RootNode = import_react_native_theming5.styled.View(({}) => ({
   marginBottom: 4,
   minHeight: 28
 }));
-var RootNodeText = import_react_native_theming5.styled.Text(({ theme }) => ({
+var RootNodeText = import_react_native_theming7.styled.Text(({ theme }) => ({
   fontSize: theme.typography.size.s1 - 1,
   fontWeight: theme.typography.weight.bold,
   color: theme.textMutedColor,
@@ -3653,7 +3659,7 @@ var RootNodeText = import_react_native_theming5.styled.Text(({ theme }) => ({
   letterSpacing: 2.5,
   textTransform: "uppercase"
 }));
-var CollapseButton = import_react_native_theming5.styled.TouchableOpacity(({}) => ({
+var CollapseButton = import_react_native_theming7.styled.TouchableOpacity(({}) => ({
   display: "flex",
   flexDirection: "row",
   paddingVertical: 0,
@@ -3814,7 +3820,7 @@ var Tree = import_react6.default.memo(function Tree2({ isMain, refId, data, stat
   ]);
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Container, { ref: containerRef, hasOrphans: isMain && orphanIds.length > 0, children: treeItems });
 });
-var Container = import_react_native_theming5.styled.View((props) => ({
+var Container = import_react_native_theming7.styled.View((props) => ({
   marginTop: props.hasOrphans ? 20 : 0,
   marginBottom: 20
 }));
@@ -3844,9 +3850,9 @@ var import_react8 = __toESM(require("react"));
 
 // src/Refs.tsx
 var import_react7 = __toESM(require("react"));
-var import_react_native_theming6 = require("@storybook/react-native-theming");
+var import_react_native_theming8 = require("@storybook/react-native-theming");
 var import_jsx_runtime13 = require("react/jsx-runtime");
-var Wrapper2 = import_react_native_theming6.styled.View(({}) => ({
+var Wrapper2 = import_react_native_theming8.styled.View(({}) => ({
   position: "relative"
 }));
 var Ref = import_react7.default.memo(function Ref2(props) {
@@ -3899,7 +3905,7 @@ var Ref = import_react7.default.memo(function Ref2(props) {
 });
 
 // src/Explorer.tsx
-var import_react_native3 = require("react-native");
+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({
@@ -3910,7 +3916,7 @@ var Explorer = import_react8.default.memo(function Explorer2({
   setSelection
 }) {
   const containerRef = (0, import_react8.useRef)(null);
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native3.View, { ref: containerRef, id: "storybook-explorer-tree", children: dataset.entries.map(([refId, ref]) => /* @__PURE__ */ (0, import_react9.createElement)(
+  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)(
     Ref,
     {
       ...ref,
@@ -3925,10 +3931,10 @@ var Explorer = import_react8.default.memo(function Explorer2({
 
 // src/Sidebar.tsx
 var import_react14 = __toESM(require("react"));
-var import_react_native_theming9 = require("@storybook/react-native-theming");
+var import_react_native_theming11 = require("@storybook/react-native-theming");
 
 // src/Search.tsx
-var import_react_native_theming7 = require("@storybook/react-native-theming");
+var import_react_native_theming9 = require("@storybook/react-native-theming");
 var import_fuse = __toESM(require("fuse.js"));
 var import_react10 = __toESM(require("react"));
 
@@ -3987,7 +3993,7 @@ var CloseIcon = ({
 };
 
 // src/Search.tsx
-var import_react_native4 = require("react-native");
+var import_react_native3 = require("react-native");
 var import_bottom_sheet = require("@gorhom/bottom-sheet");
 var import_jsx_runtime17 = require("react/jsx-runtime");
 var DEFAULT_MAX_SEARCH_RESULTS = 50;
@@ -4007,7 +4013,7 @@ var options = {
     { name: "path", weight: 0.3 }
   ]
 };
-var SearchIconWrapper = import_react_native_theming7.styled.View(({ theme }) => ({
+var SearchIconWrapper = import_react_native_theming9.styled.View(({ theme }) => ({
   position: "absolute",
   top: 0,
   left: 8,
@@ -4019,12 +4025,12 @@ var SearchIconWrapper = import_react_native_theming7.styled.View(({ theme }) =>
   alignItems: "center",
   height: "100%"
 }));
-var SearchField = import_react_native_theming7.styled.View({
+var SearchField = import_react_native_theming9.styled.View({
   display: "flex",
   flexDirection: "column",
   position: "relative"
 });
-var Input = (0, import_react_native_theming7.styled)(import_bottom_sheet.BottomSheetTextInput)(({ theme }) => ({
+var Input = (0, import_react_native_theming9.styled)(import_bottom_sheet.BottomSheetTextInput)(({ theme }) => ({
   height: 32,
   paddingLeft: 28,
   paddingRight: 28,
@@ -4036,7 +4042,7 @@ var Input = (0, import_react_native_theming7.styled)(import_bottom_sheet.BottomS
   color: theme.color.defaultText,
   width: "100%"
 }));
-var ClearIcon = import_react_native_theming7.styled.TouchableOpacity(({ theme }) => ({
+var ClearIcon = import_react_native_theming9.styled.TouchableOpacity(({ theme }) => ({
   position: "absolute",
   top: 0,
   bottom: 0,
@@ -4147,7 +4153,7 @@ var Search = import_react10.default.memo(function Search2({ children, dataset, s
   );
   const input = inputValue ? inputValue.trim() : "";
   const results = input ? getResults(input) : [];
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react_native4.View, { style: { flex: 1 }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react_native3.View, { style: { flex: 1 }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(SearchField, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SearchIconWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SearchIcon, {}) }),
       /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
@@ -4183,18 +4189,18 @@ var Search = import_react10.default.memo(function Search2({ children, dataset, s
 });
 
 // src/SearchResults.tsx
-var import_react_native_theming8 = require("@storybook/react-native-theming");
+var import_react_native_theming10 = require("@storybook/react-native-theming");
 var import_react11 = __toESM(require("react"));
-var import_polished3 = require("polished");
-var import_react_native5 = require("react-native");
+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 ResultsList = import_react_native_theming8.styled.View({
+var ResultsList = import_react_native_theming10.styled.View({
   margin: 0,
   padding: 0,
   marginTop: 8
 });
-var ResultRow = import_react_native_theming8.styled.TouchableOpacity(
+var ResultRow = import_react_native_theming10.styled.TouchableOpacity(
   ({ theme, isHighlighted }) => ({
     width: "100%",
     border: "none",
@@ -4203,7 +4209,7 @@ var ResultRow = import_react_native_theming8.styled.TouchableOpacity(
     flexDirection: "row",
     alignItems: "flex-start",
     textAlign: "left",
-    color: "inherit",
+    color: theme.color.defaultText,
     fontSize: theme.typography.size.s2,
     backgroundColor: isHighlighted ? theme.background.hoverable : "transparent",
     minHeight: 28,
@@ -4214,33 +4220,33 @@ var ResultRow = import_react_native_theming8.styled.TouchableOpacity(
     paddingLeft: 8,
     paddingRight: 8,
     "&:hover, &:focus": {
-      backgroundColor: (0, import_polished3.transparentize)(0.93, theme.color.secondary),
+      backgroundColor: (0, import_polished2.transparentize)(0.93, theme.color.secondary),
       outline: "none"
     }
   })
 );
-var IconWrapper = import_react_native_theming8.styled.View({
+var IconWrapper = import_react_native_theming10.styled.View({
   marginTop: 2
 });
-var ResultRowContent = import_react_native_theming8.styled.View(() => ({
+var ResultRowContent = import_react_native_theming10.styled.View(() => ({
   display: "flex",
   flexDirection: "column"
 }));
-var NoResults = import_react_native_theming8.styled.View(({ theme }) => ({
+var NoResults = import_react_native_theming10.styled.View(({ theme }) => ({
   marginTop: 20,
   textAlign: "center",
   fontSize: theme.typography.size.s2,
   lineHeight: 18,
   color: theme.color.defaultText
 }));
-var Mark = import_react_native_theming8.styled.Text(({ theme }) => ({
+var Mark = import_react_native_theming10.styled.Text(({ theme }) => ({
   backgroundColor: "transparent",
   color: theme.color.secondary
 }));
-var MoreWrapper = import_react_native_theming8.styled.View({
+var MoreWrapper = import_react_native_theming10.styled.View({
   marginTop: 8
 });
-var RecentlyOpenedTitle = import_react_native_theming8.styled.View(({ theme }) => ({
+var RecentlyOpenedTitle = import_react_native_theming10.styled.View(({ theme }) => ({
   display: "flex",
   flexDirection: "row",
   justifyContent: "space-between",
@@ -4261,31 +4267,31 @@ var Highlight = import_react11.default.memo(
     const { value, indices } = match;
     const { nodes: result } = indices.reduce(
       ({ cursor, nodes }, [start, end], index, { length }) => {
-        nodes.push(/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native5.Text, { children: value.slice(cursor, start) }, `text-${index}`));
+        nodes.push(/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text, { children: value.slice(cursor, start) }, `text-${index}`));
         nodes.push(/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Mark, { children: value.slice(start, end + 1) }, `mark-${index}`));
         if (index === length - 1) {
-          nodes.push(/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native5.Text, { children: value.slice(end + 1) }, `last-${index}`));
+          nodes.push(/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text, { children: value.slice(end + 1) }, `last-${index}`));
         }
         return { cursor: end + 1, nodes };
       },
       { cursor: 0, nodes: [] }
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native5.Text, { children: result }, `end-${match.key}`);
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text, { children: result }, `end-${match.key}`);
   }
 );
-var Title = import_react_native_theming8.styled.Text(({ theme }) => ({
+var Title = import_react_native_theming10.styled.Text(({ theme }) => ({
   justifyContent: "flex-start",
   color: theme.textMutedColor,
   fontSize: theme.typography.size.s2
 }));
-var Path10 = import_react_native_theming8.styled.View(({ theme }) => ({
+var Path10 = import_react_native_theming10.styled.View(({ theme }) => ({
   justifyContent: "flex-start",
   marginVertical: 2,
   color: theme.textMutedColor,
   fontSize: theme.typography.size.s1 - 1,
   flexDirection: "row"
 }));
-var PathText = import_react_native_theming8.styled.Text(({ theme }) => ({
+var PathText = import_react_native_theming10.styled.Text(({ theme }) => ({
   fontSize: theme.typography.size.s1 - 1,
   color: theme.textMutedColor
 }));
@@ -4313,7 +4319,7 @@ var Result = import_react11.default.memo(function Result2({
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(ResultRowContent, { testID: "search-result-item--label", children: [
       /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Title, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Highlight, { match: nameMatch, children: item.name }, "search-result-item--label-highlight") }),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Path10, { children: item.path.map((group, index) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native5.View, { style: { flexShrink: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(PathText, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Path10, { children: item.path.map((group, index) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native4.View, { style: { flexShrink: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(PathText, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         Highlight,
         {
           match: pathMatches.find((match) => match.refIndex === index),
@@ -4324,6 +4330,9 @@ var Result = import_react11.default.memo(function Result2({
     item.status ? i : null
   ] });
 });
+var Text = import_react_native_theming10.styled.Text(({ theme }) => ({
+  color: theme.color.defaultText
+}));
 var SearchResults = import_react11.default.memo(function SearchResults2({
   query,
   results,
@@ -4341,9 +4350,9 @@ var SearchResults = import_react11.default.memo(function SearchResults2({
       "Recently opened",
       /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(IconButton, { onPress: handleClearLastViewed })
     ] }),
-    results.length === 0 && query && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native5.View, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(NoResults, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native5.Text, { style: { marginBottom: 8 }, children: "No components found" }),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native5.Text, { children: "Find components by name or path." })
+    results.length === 0 && query && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native4.View, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(NoResults, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text, { style: { marginBottom: 8 }, children: "No components found" }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text, { children: "Find components by name or path." })
     ] }) }),
     results.map((result, index) => {
       if (isExpandType(result)) {
@@ -4418,16 +4427,16 @@ var useLastViewed = (selection) => {
 };
 
 // src/Sidebar.tsx
-var import_react_native6 = require("react-native");
+var import_react_native5 = require("react-native");
 var import_jsx_runtime19 = require("react/jsx-runtime");
-var Container2 = import_react_native_theming9.styled.View(({ theme }) => ({
+var Container2 = import_react_native_theming11.styled.View(({ theme }) => ({
   width: "100%",
   height: "100%",
   display: "flex",
   flexDirection: "column",
   background: theme.background.content
 }));
-var Top = import_react_native_theming9.styled.View({
+var Top = import_react_native_theming11.styled.View({
   paddingLeft: 4,
   paddingRight: 4,
   paddingTop: 16,
@@ -4440,8 +4449,8 @@ var Swap = import_react14.default.memo(function Swap2({
 }) {
   const [a, b] = import_react14.default.Children.toArray(children);
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_native6.View, { style: { display: condition ? "flex" : "none" }, children: a }),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_native6.View, { style: { display: condition ? "none" : "flex" }, children: b })
+    /* @__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) => {
@@ -4504,9 +4513,9 @@ var Sidebar = import_react14.default.memo(function Sidebar2({
 // src/Layout.tsx
 var import_core_events = require("@storybook/core/core-events");
 var import_manager_api2 = require("@storybook/core/manager-api");
-var import_react_native_theming11 = require("@storybook/react-native-theming");
+var import_react_native_theming15 = require("@storybook/react-native-theming");
 var import_react17 = require("react");
-var import_react_native9 = require("react-native");
+var import_react_native8 = require("react-native");
 var import_react_native_safe_area_context3 = require("react-native-safe-area-context");
 
 // src/icon/BottomBarToggleIcon.tsx
@@ -4559,9 +4568,10 @@ var MenuIcon = ({
 // src/MobileMenuDrawer.tsx
 var import_bottom_sheet2 = require("@gorhom/bottom-sheet");
 var import_react15 = require("react");
-var import_react_native7 = require("react-native");
+var import_react_native6 = require("react-native");
 var import_react_native_reanimated = require("react-native-reanimated");
 var import_react_native_safe_area_context = require("react-native-safe-area-context");
+var import_react_native_theming12 = require("@storybook/react-native-theming");
 var import_jsx_runtime22 = require("react/jsx-runtime");
 var BottomSheetBackdropComponent = (backdropComponentProps) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
   import_bottom_sheet2.BottomSheetBackdrop,
@@ -4577,6 +4587,7 @@ var MobileMenuDrawer = (0, import_react15.forwardRef)(
   ({ children, onStateChange }, ref) => {
     const reducedMotion = (0, import_react_native_reanimated.useReducedMotion)();
     const insets = (0, import_react_native_safe_area_context.useSafeAreaInsets)();
+    const theme = (0, import_react_native_theming12.useTheme)();
     const menuBottomSheetRef = (0, import_react15.useRef)(null);
     (0, import_react15.useImperativeHandle)(ref, () => ({
       setMobileMenuOpen: (open) => {
@@ -4584,7 +4595,7 @@ var MobileMenuDrawer = (0, import_react15.forwardRef)(
           onStateChange(true);
           menuBottomSheetRef.current?.present();
         } else {
-          import_react_native7.Keyboard.dismiss();
+          import_react_native6.Keyboard.dismiss();
           onStateChange(false);
           menuBottomSheetRef.current?.dismiss();
         }
@@ -4607,6 +4618,8 @@ var MobileMenuDrawer = (0, import_react15.forwardRef)(
         keyboardBlurBehavior: "restore",
         stackBehavior: "replace",
         backdropComponent: BottomSheetBackdropComponent,
+        backgroundStyle: { backgroundColor: theme.background.content },
+        handleIndicatorStyle: { backgroundColor: theme.textMutedColor },
         children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           import_bottom_sheet2.BottomSheetScrollView,
           {
@@ -4625,15 +4638,17 @@ var MobileMenuDrawer = (0, import_react15.forwardRef)(
 // src/MobileAddonsPanel.tsx
 var import_bottom_sheet3 = require("@gorhom/bottom-sheet");
 var import_manager_api = require("@storybook/core/manager-api");
-var import_react_native_theming10 = require("@storybook/react-native-theming");
+var import_react_native_theming13 = require("@storybook/react-native-theming");
 var import_types3 = require("@storybook/core/types");
 var import_react16 = require("react");
-var import_react_native8 = require("react-native");
+var import_react_native7 = require("react-native");
 var import_react_native_gesture_handler = require("react-native-gesture-handler");
 var import_react_native_reanimated2 = __toESM(require("react-native-reanimated"));
 var import_react_native_safe_area_context2 = require("react-native-safe-area-context");
+var import_react_native_theming14 = require("@storybook/react-native-theming");
 var import_jsx_runtime23 = require("react/jsx-runtime");
 var MobileAddonsPanel = (0, import_react16.forwardRef)(({ storyId, onStateChange }, ref) => {
+  const theme = (0, import_react_native_theming14.useTheme)();
   const reducedMotion = (0, import_react_native_reanimated2.useReducedMotion)();
   const addonsPanelBottomSheetRef = (0, import_react16.useRef)(null);
   const insets = (0, import_react_native_safe_area_context2.useSafeAreaInsets)();
@@ -4652,7 +4667,7 @@ var MobileAddonsPanel = (0, import_react16.forwardRef)(({ storyId, onStateChange
       }
     }
   }));
-  const { height } = (0, import_react_native8.useWindowDimensions)();
+  const { height } = (0, import_react_native7.useWindowDimensions)();
   const adjustedBottomSheetSize = (0, import_react_native_reanimated2.useAnimatedStyle)(() => {
     return {
       maxHeight: height - animatedPosition.value - insets.bottom
@@ -4675,72 +4690,76 @@ var MobileAddonsPanel = (0, import_react16.forwardRef)(({ storyId, onStateChange
       containerStyle: {},
       backgroundStyle: {
         borderRadius: 0,
-        borderTopColor: "lightgrey",
-        borderTopWidth: 1
+        borderTopColor: theme.appBorderColor,
+        borderTopWidth: 1,
+        backgroundColor: theme.background.content
       },
+      handleIndicatorStyle: { backgroundColor: theme.textMutedColor },
       keyboardBehavior: "extend",
       enableDismissOnClose: true,
       enableHandlePanningGesture: true,
       stackBehavior: "replace",
       children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react_native_reanimated2.default.View, { style: [{ flex: 1 }, adjustedBottomSheetSize], children: [
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react_native8.View, { style: { flexDirection: "row" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-            import_react_native_gesture_handler.ScrollView,
-            {
-              horizontal: true,
-              showsHorizontalScrollIndicator: false,
-              contentContainerStyle: {
-                paddingHorizontal: 8,
-                justifyContent: "center"
-              },
-              children: Object.values(panels).map(({ id, title }) => {
-                const resolvedTitle = typeof title === "function" ? title({}) : title;
-                return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-                  Tab,
-                  {
-                    active: id === addonSelected,
-                    onPress: () => setAddonSelected(id),
-                    text: resolvedTitle
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+          import_react_native7.View,
+          {
+            style: { flexDirection: "row", borderBottomWidth: 1, borderBottomColor: "lightgrey" },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                import_react_native_gesture_handler.ScrollView,
+                {
+                  horizontal: true,
+                  showsHorizontalScrollIndicator: false,
+                  contentContainerStyle: {
+                    justifyContent: "center"
                   },
-                  id
-                );
-              })
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-            IconButton,
-            {
-              style: {
-                marginRight: 4,
-                marginBottom: 4,
-                alignItems: "center",
-                justifyContent: "center"
-              },
-              hitSlop: { top: 10, right: 10, bottom: 10, left: 10 },
-              Icon: CloseIcon,
-              onPress: () => {
-                onStateChange(false);
-                addonsPanelBottomSheetRef.current?.dismiss();
-              }
-            }
-          )
-        ] }),
+                  children: Object.values(panels).map(({ id, title }) => {
+                    const resolvedTitle = typeof title === "function" ? title({}) : title;
+                    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                      Tab,
+                      {
+                        active: id === addonSelected,
+                        onPress: () => setAddonSelected(id),
+                        text: resolvedTitle
+                      },
+                      id
+                    );
+                  })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                IconButton,
+                {
+                  style: {
+                    marginRight: 4,
+                    marginBottom: 4,
+                    alignItems: "center",
+                    justifyContent: "center"
+                  },
+                  hitSlop: { top: 10, right: 10, bottom: 10, left: 10 },
+                  Icon: CloseIcon,
+                  onPress: () => {
+                    onStateChange(false);
+                    addonsPanelBottomSheetRef.current?.dismiss();
+                  }
+                }
+              )
+            ]
+          }
+        ),
         /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           import_react_native_gesture_handler.ScrollView,
           {
             style: { flex: 1 },
-            keyboardShouldPersistTaps: "handled",
             contentContainerStyle: {
-              paddingBottom: insets.bottom + 16,
-              marginTop: 10,
-              paddingHorizontal: 16
+              paddingBottom: insets.bottom + 16
             },
             children: (() => {
               if (!storyId) {
-                return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_native8.View, { style: { alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_native8.Text, { children: "No Story Selected" }) });
+                return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_native7.View, { style: { alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_native7.Text, { children: "No Story Selected" }) });
               }
               if (Object.keys(panels).length === 0) {
-                return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_native8.View, { style: { alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_native8.Text, { children: "No addons loaded." }) });
+                return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_native7.View, { style: { alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_native7.Text, { children: "No addons loaded." }) });
               }
               return panels[addonSelected].render({ active: true });
             })()
@@ -4753,7 +4772,7 @@ var MobileAddonsPanel = (0, import_react16.forwardRef)(({ storyId, onStateChange
 var Tab = ({ active, onPress, text }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(TabButton, { active, onPress, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(TabText, { active, children: text }) });
 };
-var TabButton = import_react_native_theming10.styled.TouchableOpacity(({ theme, active }) => ({
+var TabButton = import_react_native_theming13.styled.TouchableOpacity(({ theme, active }) => ({
   borderBottomWidth: active ? 2 : 0,
   borderBottomColor: active ? theme.barSelectedColor : void 0,
   overflow: "hidden",
@@ -4761,7 +4780,7 @@ var TabButton = import_react_native_theming10.styled.TouchableOpacity(({ theme,
   justifyContent: "center",
   alignItems: "center"
 }));
-var TabText = import_react_native_theming10.styled.Text(({ theme, active }) => ({
+var TabText = import_react_native_theming13.styled.Text(({ theme, active }) => ({
   color: active ? theme.barSelectedColor : theme.color.mediumdark,
   textAlign: "center",
   fontWeight: "bold",
@@ -4776,14 +4795,14 @@ var Layout = ({
   story,
   children
 }) => {
-  const theme = (0, import_react_native_theming11.useTheme)();
+  const theme = (0, import_react_native_theming15.useTheme)();
   const mobileMenuDrawerRef = (0, import_react17.useRef)(null);
   const [menuOpen, setMenuOpen] = (0, import_react17.useState)(false);
   const [drawerOpen, setDrawerOpen] = (0, import_react17.useState)(false);
   const addonPanelRef = (0, import_react17.useRef)(null);
   const insets = (0, import_react_native_safe_area_context3.useSafeAreaInsets)();
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react_native9.View, { style: { flex: 1, paddingTop: insets.top }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_native9.View, { style: { flex: 1 }, children }),
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react_native8.View, { style: { flex: 1, paddingTop: insets.top, backgroundColor: theme.background.content }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_native8.View, { style: { flex: 1 }, children }),
     /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(MobileMenuDrawer, { ref: mobileMenuDrawerRef, onStateChange: setDrawerOpen, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       Sidebar,
       {
@@ -4802,7 +4821,7 @@ var Layout = ({
       }
     ) }),
     /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(MobileAddonsPanel, { ref: addonPanelRef, storyId: story?.id, onStateChange: setMenuOpen }),
-    (import_react_native9.Platform.OS !== "android" || !menuOpen && !drawerOpen) && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Container3, { style: { marginBottom: insets.bottom }, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Nav, { children: [
+    (import_react_native8.Platform.OS !== "android" || !menuOpen && !drawerOpen) && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Container3, { style: { marginBottom: insets.bottom }, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Nav, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
         Button2,
         {
@@ -4813,7 +4832,7 @@ var Layout = ({
           },
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(MenuIcon, { color: theme.color.mediumdark }),
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react_native9.Text, { style: { flexShrink: 1 }, numberOfLines: 1, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react_native8.Text, { style: { flexShrink: 1, color: theme.color.defaultText }, numberOfLines: 1, children: [
               story?.title,
               "/",
               story?.name
@@ -4831,7 +4850,7 @@ var Layout = ({
     ] }) })
   ] });
 };
-var Nav = import_react_native_theming11.styled.View({
+var Nav = import_react_native_theming15.styled.View({
   display: "flex",
   flexDirection: "row",
   alignItems: "center",
@@ -4840,7 +4859,7 @@ var Nav = import_react_native_theming11.styled.View({
   height: 40,
   paddingHorizontal: 12
 });
-var Container3 = import_react_native_theming11.styled.View(({ theme }) => ({
+var Container3 = import_react_native_theming15.styled.View(({ theme }) => ({
   alignSelf: "flex-end",
   width: "100%",
   zIndex: 10,
@@ -4848,7 +4867,7 @@ var Container3 = import_react_native_theming11.styled.View(({ theme }) => ({
   borderTopColor: theme.appBorderColor,
   borderTopWidth: 1
 }));
-var Button2 = import_react_native_theming11.styled.TouchableOpacity(({ theme }) => ({
+var Button2 = import_react_native_theming15.styled.TouchableOpacity(({ theme }) => ({
   display: "flex",
   flexDirection: "row",
   alignItems: "center",

package/package.json

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

package/src/Button.tsx

@@ -111,13 +111,13 @@ const StyledButton = styled.TouchableOpacity<
 
   backgroundColor: (() => {
     if (variant === 'solid') return theme.color.secondary;
-    if (variant === 'outline') return theme.button$.background;
+    if (variant === 'outline') return theme.button.background;
     if (variant === 'ghost' && active) return theme.background.hoverable;
 
     return 'transparent';
   })(),
 
-  boxShadow: variant === 'outline' ? `${theme.button$.border} 0 0 0 1px inset` : 'none',
+  boxShadow: variant === 'outline' ? `${theme.button.border} 0 0 0 1px inset` : 'none',
   borderRadius: theme.input.borderRadius,
   // Making sure that the button never shrinks below its minimum size
   flexShrink: 0,

package/src/Layout.tsx

@@ -32,7 +32,7 @@ export const Layout = ({
   const insets = useSafeAreaInsets();
 
   return (
-    <View style={{ flex: 1, paddingTop: insets.top }}>
+    <View style={{ flex: 1, paddingTop: insets.top, backgroundColor: theme.background.content }}>
       <View style={{ flex: 1 }}>{children}</View>
       <MobileMenuDrawer ref={mobileMenuDrawerRef} onStateChange={setDrawerOpen}>
         <Sidebar
@@ -63,7 +63,7 @@ export const Layout = ({
               }}
             >
               <MenuIcon color={theme.color.mediumdark} />
-              <Text style={{ flexShrink: 1 }} numberOfLines={1}>
+              <Text style={{ flexShrink: 1, color: theme.color.defaultText }} numberOfLines={1}>
                 {story?.title}/{story?.name}
               </Text>
             </Button>

package/src/MobileAddonsPanel.tsx

@@ -12,7 +12,7 @@ import Animated, {
   useSharedValue,
 } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-
+import { useTheme } from '@storybook/react-native-theming';
 import { IconButton } from './IconButton';
 import { CloseIcon } from './icon/CloseIcon';
 
@@ -24,6 +24,7 @@ export const MobileAddonsPanel = forwardRef<
   MobileAddonsPanelRef,
   { storyId?: string; onStateChange: (open: boolean) => void }
 >(({ storyId, onStateChange }, ref) => {
+  const theme = useTheme();
   const reducedMotion = useReducedMotion();
 
   const addonsPanelBottomSheetRef = useRef<BottomSheetModal>(null);
@@ -73,9 +74,11 @@ export const MobileAddonsPanel = forwardRef<
       containerStyle={{}}
       backgroundStyle={{
         borderRadius: 0,
-        borderTopColor: 'lightgrey',
+        borderTopColor: theme.appBorderColor,
         borderTopWidth: 1,
+        backgroundColor: theme.background.content,
       }}
+      handleIndicatorStyle={{ backgroundColor: theme.textMutedColor }}
       keyboardBehavior="extend"
       // keyboardBlurBehavior="restore"
       enableDismissOnClose
@@ -84,12 +87,13 @@ export const MobileAddonsPanel = forwardRef<
       stackBehavior="replace"
     >
       <Animated.View style={[{ flex: 1 }, adjustedBottomSheetSize]}>
-        <View style={{ flexDirection: 'row' }}>
+        <View
+          style={{ flexDirection: 'row', borderBottomWidth: 1, borderBottomColor: 'lightgrey' }}
+        >
           <ScrollView
             horizontal
             showsHorizontalScrollIndicator={false}
             contentContainerStyle={{
-              paddingHorizontal: 8,
               justifyContent: 'center',
             }}
           >
@@ -106,6 +110,7 @@ export const MobileAddonsPanel = forwardRef<
               );
             })}
           </ScrollView>
+
           <IconButton
             style={{
               marginRight: 4,
@@ -123,11 +128,9 @@ export const MobileAddonsPanel = forwardRef<
         </View>
         <ScrollView
           style={{ flex: 1 }}
-          keyboardShouldPersistTaps="handled"
+          // keyboardShouldPersistTaps="handled"
           contentContainerStyle={{
             paddingBottom: insets.bottom + 16,
-            marginTop: 10,
-            paddingHorizontal: 16,
           }}
         >
           {(() => {

package/src/MobileMenuDrawer.tsx

@@ -8,6 +8,7 @@ import { ReactNode, forwardRef, useImperativeHandle, useRef } from 'react';
 import { Keyboard } from 'react-native';
 import { useReducedMotion } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useTheme } from '@storybook/react-native-theming';
 
 interface MobileMenuDrawerProps {
   children: ReactNode | ReactNode[];
@@ -32,6 +33,7 @@ export const MobileMenuDrawer = forwardRef<MobileMenuDrawerRef, MobileMenuDrawer
   ({ children, onStateChange }, ref) => {
     const reducedMotion = useReducedMotion();
     const insets = useSafeAreaInsets();
+    const theme = useTheme();
 
     const menuBottomSheetRef = useRef<BottomSheetModal>(null);
 
@@ -65,6 +67,8 @@ export const MobileMenuDrawer = forwardRef<MobileMenuDrawerRef, MobileMenuDrawer
         keyboardBlurBehavior="restore"
         stackBehavior="replace"
         backdropComponent={BottomSheetBackdropComponent}
+        backgroundStyle={{ backgroundColor: theme.background.content }}
+        handleIndicatorStyle={{ backgroundColor: theme.textMutedColor }}
       >
         <BottomSheetScrollView
           keyboardShouldPersistTaps="handled"

package/src/SearchResults.tsx

@@ -6,7 +6,7 @@ import type { GetSearchItemProps, SearchResult, SearchResultProps } from './type
 import { isExpandType } from './types';
 
 import { FuseResultMatch } from 'fuse.js';
-import { PressableProps, Text, View } from 'react-native';
+import { PressableProps, View } from 'react-native';
 import { Button } from './Button';
 import { IconButton } from './IconButton';
 import { ComponentIcon } from './icon/ComponentIcon';
@@ -28,7 +28,7 @@ const ResultRow = styled.TouchableOpacity<{ isHighlighted: boolean }>(
     flexDirection: 'row',
     alignItems: 'flex-start',
     textAlign: 'left',
-    color: 'inherit',
+    color: theme.color.defaultText,
     fontSize: theme.typography.size.s2,
     backgroundColor: isHighlighted ? theme.background.hoverable : 'transparent',
     minHeight: 28,
@@ -177,6 +177,10 @@ const Result: FC<SearchResultProps> = React.memo(function Result({
   );
 });
 
+const Text = styled.Text(({ theme }) => ({
+  color: theme.color.defaultText,
+}));
+
 export const SearchResults: FC<{
   query: string;
   results: SearchResult[];

package/src/Tree.tsx

@@ -7,18 +7,18 @@ import type {
 } from '@storybook/core/manager-api';
 import { styled } from '@storybook/react-native-theming';
 import React, { useCallback, useMemo, useRef } from 'react';
+import { View } from 'react-native';
 import { IconButton } from './IconButton';
+import { useLayout } from './LayoutProvider';
 import { ComponentNode, GroupNode, StoryNode } from './TreeNode';
+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 { createId, getAncestorIds, getDescendantIds, isStoryHoistable } from './util/tree';
 import { getGroupStatus, statusMapping } from './util/status';
-import { Text, View } from 'react-native';
-import { ExpandAllIcon } from './icon/ExpandAllIcon';
-import { CollapseAllIcon } from './icon/CollapseAllIcon';
-import { Item } from './types';
-import { useLayout } from './LayoutProvider';
+import { createId, getAncestorIds, getDescendantIds, isStoryHoistable } from './util/tree';
 
 interface NodeProps {
   item: Item;
@@ -36,6 +36,10 @@ interface NodeProps {
   status: State['status'][keyof State['status']];
 }
 
+const TextItem = styled.Text(({ theme }) => ({
+  color: theme.color.defaultText,
+}));
+
 export const Node = React.memo<NodeProps>(function Node({
   item,
   refId,
@@ -90,7 +94,7 @@ export const Node = React.memo<NodeProps>(function Node({
           aria-expanded={isExpanded}
         >
           <CollapseIcon isExpanded={isExpanded} />
-          <Text>{item.renderLabel?.(item, {}) || item.name}</Text>
+          <TextItem>{item.renderLabel?.(item, {}) || item.name}</TextItem>
         </CollapseButton>
         {isExpanded && (
           <IconButton

package/src/TreeNode.tsx

@@ -17,6 +17,7 @@ const BranchNodeText = styled.Text<{ isSelected?: boolean }>(({ theme }) => ({
   textAlign: 'left',
   fontSize: theme.typography.size.s2,
   flexShrink: 1,
+  color: theme.color.defaultText,
 }));
 
 const BranchNode = styled.TouchableOpacity<{

package/src/icon/CollapseAllIcon.tsx

@@ -1,16 +1,19 @@
 import { Path, Svg, SvgProps } from 'react-native-svg';
+import { useTheme } from '@storybook/react-native-theming';
 
 export const CollapseAllIcon = ({
-  color = '#2E3438',
+  color, //= '#2E3438',
   width = 14,
   height = 14,
   ...props
 }: SvgProps) => {
+  const theme = useTheme();
+
   return (
     <Svg width={width} height={height} viewBox="0 0 14 14" fill="none" {...props}>
       <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}
+        fill={color ?? theme.color.defaultText}
       />
     </Svg>
   );

package/src/icon/CollapseIcon.tsx

@@ -1,6 +1,5 @@
 import { styled } from '@storybook/react-native-theming';
 import type { FC } from 'react';
-import { transparentize } from 'polished';
 import Svg, { Path, SvgProps } from 'react-native-svg';
 
 interface CollapseIconProps {
@@ -14,7 +13,7 @@ export const CollapseIconWrapper = styled.View<{ isExpanded: boolean }>(
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
-    color: transparentize(0.4, theme.textMutedColor),
+    color: theme.textMutedColor,
     transform: isExpanded ? 'rotateZ(90deg)' : 'none',
     transition: 'transform .1s ease-out',
   })

package/src/icon/ExpandAllIcon.tsx

@@ -1,16 +1,18 @@
 import { Path, Svg, SvgProps } from 'react-native-svg';
-
+import { useTheme } from '@storybook/react-native-theming';
 export const ExpandAllIcon = ({
-  color = '#2E3438',
+  color, //= '#2E3438',
   width = 14,
   height = 14,
   ...props
 }: SvgProps) => {
+  const theme = useTheme();
+
   return (
     <Svg width={width} height={height} viewBox="0 0 14 14" fill="none" {...props}>
       <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}
+        fill={color ?? theme.color.defaultText}
       />
     </Svg>
   );