@storybook/react-native-ui 8.5.5 → 8.6.0-alpha.1

package/dist/index.js

@@ -3951,11 +3951,11 @@ var Explorer = import_react13.default.memo(function Explorer2({
 
 // src/Sidebar.tsx
 var import_react19 = __toESM(require("react"));
-var import_react_native_theming11 = require("@storybook/react-native-theming");
+var import_react_native_theming12 = require("@storybook/react-native-theming");
 
 // src/Search.tsx
 var import_bottom_sheet = require("@gorhom/bottom-sheet");
-var import_react_native_theming9 = require("@storybook/react-native-theming");
+var import_react_native_theming10 = require("@storybook/react-native-theming");
 var import_fuse = __toESM(require("fuse.js"));
 var import_react15 = __toESM(require("react"));
 var import_react_native3 = require("react-native");
@@ -3991,20 +3991,16 @@ var CloseIcon = ({
 
 // src/icon/SearchIcon.tsx
 var import_react_native_svg9 = require("react-native-svg");
+var import_react_native_theming9 = require("@storybook/react-native-theming");
 var import_jsx_runtime17 = require("react/jsx-runtime");
-var SearchIcon = ({
-  color = "currentColor",
-  width = 14,
-  height = 14,
-  ...props
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native_svg9.Svg, { width, height, viewBox: "0 0 14 14", fill: "none", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+var SearchIcon = ({ width = 14, height = 14, ...props }) => {
+  const theme = (0, import_react_native_theming9.useTheme)();
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native_svg9.Svg, { width, height, viewBox: "0 0 14 14", fill: theme.color.dark, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     import_react_native_svg9.Path,
     {
       fillRule: "evenodd",
       clipRule: "evenodd",
-      d: "M9.544 10.206a5.5 5.5 0 11.662-.662.5.5 0 01.148.102l3 3a.5.5 0 01-.708.708l-3-3a.5.5 0 01-.102-.148zM10.5 6a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0z",
-      fill: color
+      d: "M9.544 10.206a5.5 5.5 0 11.662-.662.5.5 0 01.148.102l3 3a.5.5 0 01-.708.708l-3-3a.5.5 0 01-.102-.148zM10.5 6a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0z"
     }
   ) });
 };
@@ -4033,24 +4029,23 @@ var options = {
     { name: "path", weight: 0.3 }
   ]
 };
-var SearchIconWrapper = import_react_native_theming9.styled.View(({ theme }) => ({
+var SearchIconWrapper = import_react_native_theming10.styled.View({
   position: "absolute",
   top: 0,
   left: 8,
   zIndex: 1,
   pointerEvents: "none",
-  color: theme.textMutedColor,
   display: "flex",
   flexDirection: "row",
   alignItems: "center",
   height: "100%"
-}));
-var SearchField = import_react_native_theming9.styled.View({
+});
+var SearchField = import_react_native_theming10.styled.View({
   display: "flex",
   flexDirection: "column",
   position: "relative"
 });
-var BottomSheetInput = (0, import_react_native_theming9.styled)(import_bottom_sheet.BottomSheetTextInput)(({ theme }) => ({
+var BottomSheetInput = (0, import_react_native_theming10.styled)(import_bottom_sheet.BottomSheetTextInput)(({ theme }) => ({
   height: 32,
   paddingLeft: 28,
   paddingRight: 28,
@@ -4064,7 +4059,7 @@ var BottomSheetInput = (0, import_react_native_theming9.styled)(import_bottom_sh
   color: theme.color.defaultText,
   width: "100%"
 }));
-var Input = (0, import_react_native_theming9.styled)(import_react_native3.TextInput)(({ theme }) => ({
+var Input = (0, import_react_native_theming10.styled)(import_react_native3.TextInput)(({ theme }) => ({
   height: 32,
   paddingLeft: 28,
   paddingRight: 28,
@@ -4076,7 +4071,7 @@ var Input = (0, import_react_native_theming9.styled)(import_react_native3.TextIn
   color: theme.color.defaultText,
   width: "100%"
 }));
-var ClearIcon = import_react_native_theming9.styled.TouchableOpacity(({ theme }) => ({
+var ClearIcon = import_react_native_theming10.styled.TouchableOpacity(({ theme }) => ({
   position: "absolute",
   top: 0,
   bottom: 0,
@@ -4228,18 +4223,18 @@ var Search = import_react15.default.memo(function Search2({ children, dataset, s
 });
 
 // src/SearchResults.tsx
-var import_react_native_theming10 = require("@storybook/react-native-theming");
+var import_react_native_theming11 = require("@storybook/react-native-theming");
 var import_react16 = __toESM(require("react"));
 var import_polished2 = require("polished");
 var import_react_native4 = require("react-native");
 var import_jsx_runtime19 = require("react/jsx-runtime");
 var import_react17 = require("react");
-var ResultsList = import_react_native_theming10.styled.View({
+var ResultsList = import_react_native_theming11.styled.View({
   margin: 0,
   padding: 0,
   marginTop: 8
 });
-var ResultRow = import_react_native_theming10.styled.TouchableOpacity(
+var ResultRow = import_react_native_theming11.styled.TouchableOpacity(
   ({ theme, isHighlighted }) => ({
     width: "100%",
     border: "none",
@@ -4264,28 +4259,28 @@ var ResultRow = import_react_native_theming10.styled.TouchableOpacity(
     }
   })
 );
-var IconWrapper = import_react_native_theming10.styled.View({
+var IconWrapper = import_react_native_theming11.styled.View({
   marginTop: 2
 });
-var ResultRowContent = import_react_native_theming10.styled.View(() => ({
+var ResultRowContent = import_react_native_theming11.styled.View(() => ({
   display: "flex",
   flexDirection: "column"
 }));
-var NoResults = import_react_native_theming10.styled.View(({ theme }) => ({
+var NoResults = import_react_native_theming11.styled.View(({ theme }) => ({
   marginTop: 20,
   textAlign: "center",
   fontSize: theme.typography.size.s2,
   lineHeight: 18,
   color: theme.color.defaultText
 }));
-var Mark = import_react_native_theming10.styled.Text(({ theme }) => ({
+var Mark = import_react_native_theming11.styled.Text(({ theme }) => ({
   backgroundColor: "transparent",
   color: theme.color.secondary
 }));
-var MoreWrapper = import_react_native_theming10.styled.View({
+var MoreWrapper = import_react_native_theming11.styled.View({
   marginTop: 8
 });
-var RecentlyOpenedTitle = import_react_native_theming10.styled.View(({ theme }) => ({
+var RecentlyOpenedTitle = import_react_native_theming11.styled.View(({ theme }) => ({
   display: "flex",
   flexDirection: "row",
   justifyContent: "space-between",
@@ -4318,19 +4313,19 @@ var Highlight = import_react16.default.memo(
     return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Text, { children: result }, `end-${match.key}`);
   }
 );
-var Title = import_react_native_theming10.styled.Text(({ theme }) => ({
+var Title = import_react_native_theming11.styled.Text(({ theme }) => ({
   justifyContent: "flex-start",
   color: theme.textMutedColor,
   fontSize: theme.typography.size.s2
 }));
-var Path10 = import_react_native_theming10.styled.View(({ theme }) => ({
+var Path10 = import_react_native_theming11.styled.View(({ theme }) => ({
   justifyContent: "flex-start",
   marginVertical: 2,
   color: theme.textMutedColor,
   fontSize: theme.typography.size.s1 - 1,
   flexDirection: "row"
 }));
-var PathText = import_react_native_theming10.styled.Text(({ theme }) => ({
+var PathText = import_react_native_theming11.styled.Text(({ theme }) => ({
   fontSize: theme.typography.size.s1 - 1,
   color: theme.textMutedColor
 }));
@@ -4372,7 +4367,7 @@ var Result = import_react16.default.memo(function Result2({
     item.status ? i : null
   ] });
 });
-var Text = import_react_native_theming10.styled.Text(({ theme }) => ({
+var Text = import_react_native_theming11.styled.Text(({ theme }) => ({
   color: theme.color.defaultText
 }));
 var SearchResults = import_react16.default.memo(function SearchResults2({
@@ -4471,14 +4466,14 @@ var useLastViewed = (selection) => {
 // src/Sidebar.tsx
 var import_react_native5 = require("react-native");
 var import_jsx_runtime20 = require("react/jsx-runtime");
-var Container2 = import_react_native_theming11.styled.View(({ theme }) => ({
+var Container2 = import_react_native_theming12.styled.View(({ theme }) => ({
   width: "100%",
   height: "100%",
   display: "flex",
   flexDirection: "column",
   backgroundColor: theme.background.content
 }));
-var Top = import_react_native_theming11.styled.View({
+var Top = import_react_native_theming12.styled.View({
   paddingLeft: 4,
   paddingRight: 4,
   paddingTop: 16,
@@ -4555,7 +4550,7 @@ var Sidebar = import_react19.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_theming17 = require("@storybook/react-native-theming");
+var import_react_native_theming18 = require("@storybook/react-native-theming");
 var import_react28 = require("react");
 var import_react_native9 = require("react-native");
 var import_react_native_safe_area_context3 = require("react-native-safe-area-context");
@@ -4563,14 +4558,14 @@ var import_react_native_safe_area_context3 = require("react-native-safe-area-con
 // src/MobileAddonsPanel.tsx
 var import_bottom_sheet2 = require("@gorhom/bottom-sheet");
 var import_manager_api = require("@storybook/core/manager-api");
-var import_react_native_theming12 = require("@storybook/react-native-theming");
+var import_react_native_theming13 = require("@storybook/react-native-theming");
 var import_types3 = require("@storybook/core/types");
 var import_react21 = require("react");
 var import_react_native6 = require("react-native");
 var import_react_native_gesture_handler = require("react-native-gesture-handler");
 var import_react_native_reanimated = __toESM(require("react-native-reanimated"));
 var import_react_native_safe_area_context = require("react-native-safe-area-context");
-var import_react_native_theming13 = require("@storybook/react-native-theming");
+var import_react_native_theming14 = require("@storybook/react-native-theming");
 
 // src/util/useStyle.ts
 var import_react20 = require("react");
@@ -4589,7 +4584,7 @@ var contentStyle = {
 };
 var MobileAddonsPanel = (0, import_react21.forwardRef)(
   ({ storyId }, ref) => {
-    const theme = (0, import_react_native_theming13.useTheme)();
+    const theme = (0, import_react_native_theming14.useTheme)();
     const reducedMotion = (0, import_react_native_reanimated.useReducedMotion)();
     const addonsPanelBottomSheetRef = (0, import_react21.useRef)(null);
     const insets = (0, import_react_native_safe_area_context.useSafeAreaInsets)();
@@ -4741,7 +4736,7 @@ var AddonsTabs = ({ onClose, storyId }) => {
 var Tab = ({ active, onPress, text }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TabButton, { active, onPress, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TabText, { active, children: text }) });
 };
-var TabButton = import_react_native_theming12.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",
@@ -4749,7 +4744,7 @@ var TabButton = import_react_native_theming12.styled.TouchableOpacity(({ theme,
   justifyContent: "center",
   alignItems: "center"
 }));
-var TabText = import_react_native_theming12.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",
@@ -4759,7 +4754,7 @@ var TabText = import_react_native_theming12.styled.Text(({ theme, active }) => (
 
 // src/MobileMenuDrawer.tsx
 var import_bottom_sheet3 = __toESM(require("@gorhom/bottom-sheet"));
-var import_react_native_theming14 = require("@storybook/react-native-theming");
+var import_react_native_theming15 = require("@storybook/react-native-theming");
 var import_react22 = require("react");
 var import_react_native7 = require("react-native");
 var import_react_native_reanimated2 = require("react-native-reanimated");
@@ -4780,7 +4775,7 @@ var MobileMenuDrawer = (0, import_react22.memo)(
   (0, import_react22.forwardRef)(({ children }, ref) => {
     const reducedMotion = (0, import_react_native_reanimated2.useReducedMotion)();
     const insets = (0, import_react_native_safe_area_context2.useSafeAreaInsets)();
-    const theme = (0, import_react_native_theming14.useTheme)();
+    const theme = (0, import_react_native_theming15.useTheme)();
     const menuBottomSheetRef = (0, import_react22.useRef)(null);
     const { scrollToSelectedNode, scrollRef } = useSelectedNode();
     (0, import_react22.useImperativeHandle)(ref, () => ({
@@ -5122,10 +5117,10 @@ var BottomBarToggleIcon = ({
 // src/icon/CloseFullscreenIcon.tsx
 var import_react26 = require("react");
 var import_react_native_svg13 = __toESM(require("react-native-svg"));
-var import_react_native_theming15 = require("@storybook/react-native-theming");
+var import_react_native_theming16 = require("@storybook/react-native-theming");
 var import_jsx_runtime28 = require("react/jsx-runtime");
 function CloseFullscreenIcon({ color, width = 14, height = 14, ...props }) {
-  const theme = (0, import_react_native_theming15.useTheme)();
+  const theme = (0, import_react_native_theming16.useTheme)();
   const fillColor = (0, import_react26.useMemo)(() => {
     return color ?? theme.color.defaultText;
   }, [color, theme.color.defaultText]);
@@ -5134,11 +5129,11 @@ function CloseFullscreenIcon({ color, width = 14, height = 14, ...props }) {
 
 // src/icon/FullscreenIcon.tsx
 var import_react_native_svg14 = __toESM(require("react-native-svg"));
-var import_react_native_theming16 = require("@storybook/react-native-theming");
+var import_react_native_theming17 = require("@storybook/react-native-theming");
 var import_react27 = require("react");
 var import_jsx_runtime29 = require("react/jsx-runtime");
 function FullscreenIcon({ color, width = 14, height = 14, ...props }) {
-  const theme = (0, import_react_native_theming16.useTheme)();
+  const theme = (0, import_react_native_theming17.useTheme)();
   const fillColor = (0, import_react27.useMemo)(() => {
     return color ?? theme.color.defaultText;
   }, [color, theme.color.defaultText]);
@@ -5197,7 +5192,7 @@ var Layout = ({
   story,
   children
 }) => {
-  const theme = (0, import_react_native_theming17.useTheme)();
+  const theme = (0, import_react_native_theming18.useTheme)();
   const mobileMenuDrawerRef = (0, import_react28.useRef)(null);
   const addonPanelRef = (0, import_react28.useRef)(null);
   const insets = (0, import_react_native_safe_area_context3.useSafeAreaInsets)();
@@ -5378,7 +5373,7 @@ var Layout = ({
     isDesktop ? null : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(MobileAddonsPanel, { ref: addonPanelRef, storyId: story?.id })
   ] });
 };
-var Nav = import_react_native_theming17.styled.View({
+var Nav = import_react_native_theming18.styled.View({
   display: "flex",
   flexDirection: "row",
   alignItems: "center",
@@ -5387,14 +5382,14 @@ var Nav = import_react_native_theming17.styled.View({
   height: 40,
   paddingHorizontal: 6
 });
-var Container3 = import_react_native_theming17.styled.View(({ theme }) => ({
+var Container3 = import_react_native_theming18.styled.View(({ theme }) => ({
   alignSelf: "flex-end",
   width: "100%",
   backgroundColor: theme.barBg,
   borderTopColor: theme.appBorderColor,
   borderTopWidth: 1
 }));
-var Button2 = import_react_native_theming17.styled.TouchableOpacity(({ theme }) => ({
+var Button2 = import_react_native_theming18.styled.TouchableOpacity(({ theme }) => ({
   display: "flex",
   flexDirection: "row",
   alignItems: "center",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native-ui",
-  "version": "8.5.5",
+  "version": "8.6.0-alpha.1",
   "description": "ui components for react native storybook",
   "keywords": [
     "react",
@@ -58,9 +58,9 @@
     "typescript": "^5.3.3"
   },
   "dependencies": {
-    "@storybook/core": "^8.5.1",
-    "@storybook/react": "^8.5.1",
-    "@storybook/react-native-theming": "^8.5.5",
+    "@storybook/core": "^8.5.8",
+    "@storybook/react": "^8.5.8",
+    "@storybook/react-native-theming": "^8.6.0-alpha.1",
     "fuse.js": "^7.0.0",
     "memoizerific": "^1.11.3",
     "polished": "^4.3.1",
@@ -81,5 +81,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "08be202a23cb2490d295c6c3476d414163b8d40e"
+  "gitHead": "e3cb59f7869bbd1519c107895e2ae9b7e2ea6544"
 }

package/src/Search.tsx

@@ -39,18 +39,17 @@ const options = {
   ],
 } as IFuseOptions<SearchItem>;
 
-const SearchIconWrapper = styled.View(({ theme }) => ({
+const SearchIconWrapper = styled.View({
   position: 'absolute',
   top: 0,
   left: 8,
   zIndex: 1,
   pointerEvents: 'none',
-  color: theme.textMutedColor,
   display: 'flex',
   flexDirection: 'row',
   alignItems: 'center',
   height: '100%',
-}));
+});
 
 const SearchField = styled.View({
   display: 'flex',

package/src/icon/SearchIcon.tsx

@@ -1,19 +1,14 @@
-import * as React from 'react';
 import { Path, Svg, SvgProps } from 'react-native-svg';
+import { useTheme } from '@storybook/react-native-theming';
 
-export const SearchIcon = ({
-  color = 'currentColor',
-  width = 14,
-  height = 14,
-  ...props
-}: SvgProps) => {
+export const SearchIcon = ({ width = 14, height = 14, ...props }: SvgProps) => {
+  const theme = useTheme();
   return (
-    <Svg width={width} height={height} viewBox="0 0 14 14" fill="none" {...props}>
+    <Svg width={width} height={height} viewBox="0 0 14 14" fill={theme.color.dark} {...props}>
       <Path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M9.544 10.206a5.5 5.5 0 11.662-.662.5.5 0 01.148.102l3 3a.5.5 0 01-.708.708l-3-3a.5.5 0 01-.102-.148zM10.5 6a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0z"
-        fill={color}
       />
     </Svg>
   );