@storybook/react-native 6.5.0-rc.2 → 6.5.0-rc.3

package/dist/hooks.d.ts

@@ -1,4 +1,5 @@
 import type { StoryContext } from '@storybook/csf';
+import type { Theme } from './preview/components/Shared/theme';
 import type { ReactNativeFramework } from './types/types-6.0';
 /**
  * Hook that returns a function to set the current story context.
@@ -20,3 +21,7 @@ export declare function useIsStorySelected(storyId: string): boolean;
  * Hook that indicates if `title` is the currently selected story section.
  */
 export declare function useIsStorySectionSelected(title: string): boolean;
+/**
+ * Hook that gets the current theme values.
+ */
+export declare function useTheme(): Theme;

package/dist/hooks.js

@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
 import { atom, useAtomValue, useSetAtom } from 'jotai';
+import { useTheme as useEmotionTheme } from 'emotion-theming';
 const storyContextAtom = atom(null);
 /**
  * Hook that returns a function to set the current story context.
@@ -18,18 +19,24 @@ export function useStoryContext() {
  */
 export function useStoryContextParam(name, defaultValue) {
     var _a;
-    const paramAtom = useMemo(() => atom(get => { var _a, _b; return (_b = (_a = get(storyContextAtom)) === null || _a === void 0 ? void 0 : _a.parameters) === null || _b === void 0 ? void 0 : _b[name]; }), [name]);
+    const paramAtom = useMemo(() => atom((get) => { var _a, _b; return (_b = (_a = get(storyContextAtom)) === null || _a === void 0 ? void 0 : _a.parameters) === null || _b === void 0 ? void 0 : _b[name]; }), [name]);
     return (_a = useAtomValue(paramAtom)) !== null && _a !== void 0 ? _a : defaultValue;
 }
 /**
  * Hook that indicates if `storyId` is the currently selected story.
  */
 export function useIsStorySelected(storyId) {
-    return useAtomValue(useMemo(() => atom(get => { var _a; return ((_a = get(storyContextAtom)) === null || _a === void 0 ? void 0 : _a.id) === storyId; }), [storyId]));
+    return useAtomValue(useMemo(() => atom((get) => { var _a; return ((_a = get(storyContextAtom)) === null || _a === void 0 ? void 0 : _a.id) === storyId; }), [storyId]));
 }
 /**
  * Hook that indicates if `title` is the currently selected story section.
  */
 export function useIsStorySectionSelected(title) {
-    return useAtomValue(useMemo(() => atom(get => { var _a; return ((_a = get(storyContextAtom)) === null || _a === void 0 ? void 0 : _a.title) === title; }), [title]));
+    return useAtomValue(useMemo(() => atom((get) => { var _a; return ((_a = get(storyContextAtom)) === null || _a === void 0 ? void 0 : _a.title) === title; }), [title]));
+}
+/**
+ * Hook that gets the current theme values.
+ */
+export function useTheme() {
+    return useEmotionTheme();
 }

package/dist/preview/View.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { StoryIndex, SelectionSpecifier } from '@storybook/store';
 import { StoryContext } from '@storybook/csf';
-import { theme } from './components/Shared/theme';
+import { Theme } from './components/Shared/theme';
 import type { ReactNativeFramework } from '../types/types-6.0';
 import { PreviewWeb } from '@storybook/preview-web';
 type StoryKind = string;
@@ -16,6 +16,9 @@ type InitialSelection = `${StoryKind}--${StoryName}` | {
      */
     name: StoryName;
 };
+type DeepPartial<T> = T extends object ? {
+    [P in keyof T]?: DeepPartial<T[P]>;
+} : T;
 export type Params = {
     onDeviceUI?: boolean;
     enableWebsockets?: boolean;
@@ -29,8 +32,7 @@ export type Params = {
     isUIHidden?: boolean;
     shouldDisableKeyboardAvoidingView?: boolean;
     keyboardAvoidingViewVerticalOffset?: number;
-} & {
-    theme?: typeof theme;
+    theme: DeepPartial<Theme>;
 };
 export declare class View {
     _storyIndex: StoryIndex;

package/dist/preview/View.js

@@ -20,6 +20,7 @@ import StoryView from './components/StoryView';
 import createChannel from '@storybook/channel-websocket';
 import getHost from './rn-host-detect';
 import events from '@storybook/core-events';
+import deepmerge from 'deepmerge';
 const STORAGE_KEY = 'lastOpenedStory';
 export class View {
     constructor(preview) {
@@ -65,6 +66,7 @@ export class View {
             });
         };
         this.getStorybookUI = (params = {}) => {
+            var _a;
             const { shouldPersistSelection = true, onDeviceUI = true, enableWebsockets = false } = params;
             const initialStory = this._getInitialStory(params);
             if (enableWebsockets) {
@@ -87,7 +89,7 @@ export class View {
             });
             // eslint-disable-next-line consistent-this
             const self = this;
-            const appliedTheme = Object.assign(Object.assign({}, theme), params.theme);
+            const appliedTheme = deepmerge(theme, (_a = params.theme) !== null && _a !== void 0 ? _a : {});
             return () => {
                 const setContext = useSetStoryContext();
                 const [, forceUpdate] = useReducer((x) => x + 1, 0);

package/dist/preview/components/OnDeviceUI/OnDeviceUI.js

@@ -1,8 +1,7 @@
 import styled from '@emotion/native';
-import { useTheme } from 'emotion-theming';
 import React, { useState, useRef } from 'react';
 import { Animated, Dimensions, Easing, Keyboard, KeyboardAvoidingView, Platform, TouchableOpacity, StatusBar, StyleSheet, View, } from 'react-native';
-import { useStoryContextParam } from '../../../hooks';
+import { useStoryContextParam, useTheme } from '../../../hooks';
 import StoryListView from '../StoryListView';
 import StoryView from '../StoryView';
 import AbsolutePositionedKeyboardAwareView from './absolute-positioned-keyboard-aware-view';
@@ -26,14 +25,14 @@ const flex = { flex: 1 };
  */
 function Preview({ animatedValue, style, children }) {
     const theme = useTheme();
-    const containerStyle = Object.assign({ backgroundColor: theme.backgroundColor }, getPreviewShadowStyle(animatedValue));
+    const containerStyle = Object.assign({ backgroundColor: theme.preview.backgroundColor }, getPreviewShadowStyle(animatedValue));
     return (React.createElement(Animated.View, { style: [flex, containerStyle] },
         React.createElement(View, { style: [flex, style] }, children)));
 }
 const styles = StyleSheet.create({
     expoAndroidContainer: { paddingTop: StatusBar.currentHeight },
 });
-const Container = styled.View(({ theme }) => (Object.assign({ flex: 1, backgroundColor: theme.backgroundColor }, (IS_ANDROID && IS_EXPO ? styles.expoAndroidContainer : undefined))));
+const Container = styled.View(({ theme }) => (Object.assign(Object.assign({ flex: 1, backgroundColor: theme.preview.containerBackgroundColor }, (IS_ANDROID && IS_EXPO ? styles.expoAndroidContainer : undefined)), Platform.select({ web: { overflow: 'hidden' } }))));
 const OnDeviceUI = ({ storyIndex, isUIHidden, shouldDisableKeyboardAvoidingView, keyboardAvoidingViewVerticalOffset, tabOpen: initialTabOpen, }) => {
     const [tabOpen, setTabOpen] = useState(initialTabOpen || PREVIEW);
     const lastTabOpen = React.useRef(tabOpen);
@@ -44,7 +43,6 @@ const OnDeviceUI = ({ storyIndex, isUIHidden, shouldDisableKeyboardAvoidingView,
     const animatedValue = useRef(new Animated.Value(tabOpen));
     const wide = useWindowDimensions().width >= BREAKPOINT;
     const insets = useSafeAreaInsets();
-    const theme = useTheme();
     const [isUIVisible, setIsUIVisible] = useState(isUIHidden !== undefined ? !isUIHidden : true);
     const handleToggleTab = React.useCallback((newTabOpen) => {
         if (newTabOpen === tabOpen) {
@@ -96,23 +94,30 @@ const OnDeviceUI = ({ storyIndex, isUIHidden, shouldDisableKeyboardAvoidingView,
         paddingBottom: isUIVisible ? insets.bottom + navBarHeight : noSafeArea ? 0 : insets.bottom,
         paddingTop: !noSafeArea ? insets.top : 0,
     };
+    // The panels always apply the safe area, regardless of the story parameters.
+    const panelSafeAreaMargins = {
+        paddingBottom: insets.bottom + navBarHeight,
+        paddingTop: insets.top,
+    };
+    // Adjust the keyboard offset (possibly in a negative direction) to account
+    // for the safe area and navigation bar.
+    const keyboardVerticalOffset = -panelSafeAreaMargins.paddingBottom + (keyboardAvoidingViewVerticalOffset !== null && keyboardAvoidingViewVerticalOffset !== void 0 ? keyboardAvoidingViewVerticalOffset : 0);
     return (React.createElement(React.Fragment, null,
         React.createElement(Container, null,
-            React.createElement(KeyboardAvoidingView, { enabled: !shouldDisableKeyboardAvoidingView || tabOpen !== PREVIEW, behavior: IS_IOS ? 'padding' : null, keyboardVerticalOffset: keyboardAvoidingViewVerticalOffset, style: flex },
+            React.createElement(KeyboardAvoidingView, { enabled: !shouldDisableKeyboardAvoidingView || tabOpen !== PREVIEW, behavior: IS_IOS ? 'padding' : null, keyboardVerticalOffset: keyboardVerticalOffset, style: flex },
                 React.createElement(AbsolutePositionedKeyboardAwareView, { onLayout: setPreviewDimensions, previewDimensions: previewDimensions },
                     React.createElement(Animated.View, { style: previewWrapperStyles },
                         React.createElement(Preview, { style: safeAreaMargins, animatedValue: animatedValue.current },
                             React.createElement(StoryView, null)),
                         tabOpen !== PREVIEW ? (React.createElement(TouchableOpacity, { style: StyleSheet.absoluteFillObject, onPress: () => handleToggleTab(PREVIEW) })) : null),
-                    React.createElement(Panel, { style: [
+                    React.createElement(Panel, { edge: "right", style: [
                             getNavigatorPanelPosition(animatedValue.current, previewDimensions.width, wide),
-                            safeAreaMargins,
-                            { backgroundColor: theme.storyListBackgroundColor },
+                            panelSafeAreaMargins,
                         ] },
                         React.createElement(StoryListView, { storyIndex: storyIndex })),
-                    React.createElement(Panel, { style: [
+                    React.createElement(Panel, { edge: "left", style: [
                             getAddonPanelPosition(animatedValue.current, previewDimensions.width, wide),
-                            safeAreaMargins,
+                            panelSafeAreaMargins,
                         ] },
                         React.createElement(Addons, { active: tabOpen === ADDONS })))),
             React.createElement(Navigation, { onLayout: measureNavigation, tabOpen: tabOpen, onChangeTab: handleToggleTab, isUIVisible: isUIVisible, setIsUIVisible: setIsUIVisible }))));

package/dist/preview/components/OnDeviceUI/Panel.d.ts

@@ -1,7 +1,9 @@
-import React, { ReactNode } from 'react';
-interface Props {
-    style: any[];
-    children: ReactNode;
+import React from 'react';
+import { Animated, StyleProp, ViewStyle } from 'react-native';
+interface PanelProps {
+    edge: 'left' | 'right';
+    style: StyleProp<Animated.AnimatedProps<ViewStyle>>;
+    children: React.ReactNode;
 }
-declare const _default: React.MemoExoticComponent<({ children, style }: Props) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ edge, children, style }: PanelProps) => JSX.Element>;
 export default _default;

package/dist/preview/components/OnDeviceUI/Panel.js

@@ -1,9 +1,14 @@
 import React from 'react';
 import { StyleSheet, Animated } from 'react-native';
 import styled from '@emotion/native';
-// @ts-ignore styled is being weird ;(
-const Container = styled(Animated.View)(({ theme }) => ({
-    backgroundColor: theme.backgroundColor || 'white',
+const Container = styled(Animated.View)(({ theme, edge }) => ({
+    backgroundColor: theme.panel.backgroundColor,
+    borderStartWidth: edge === 'left' ? theme.panel.borderWidth : undefined,
+    borderEndWidth: edge === 'right' ? theme.panel.borderWidth : undefined,
+    borderColor: theme.panel.borderColor,
 }));
-const Panel = ({ children, style }) => (React.createElement(Container, { style: [StyleSheet.absoluteFillObject, ...style] }, children));
+const Panel = ({ edge, children, style }) => {
+    const containerStyle = StyleSheet.flatten([StyleSheet.absoluteFillObject, style]);
+    return (React.createElement(Container, { edge: edge, style: containerStyle }, children));
+};
 export default React.memo(Panel);

package/dist/preview/components/OnDeviceUI/addons/Addons.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
-declare const _default: React.MemoExoticComponent<({ active }: {
+interface AddonsProps {
     active: boolean;
-}) => JSX.Element>;
+}
+declare const _default: React.MemoExoticComponent<({ active }: AddonsProps) => JSX.Element>;
 export default _default;

package/dist/preview/components/OnDeviceUI/addons/Addons.js

@@ -1,33 +1,18 @@
 import React, { useState } from 'react';
-import { SafeAreaView, StyleSheet } from 'react-native';
-import styled from '@emotion/native';
+import { Text } from 'react-native';
 import { addons } from '@storybook/addons';
 import AddonsList from './List';
 import AddonWrapper from './Wrapper';
-import { Label } from '../../Shared/text';
-const NoAddonContainer = styled.View({
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-});
-const Container = styled.View(({ theme }) => ({
-    flex: 1,
-    backgroundColor: theme.backgroundColor,
-}));
+import { Box } from '../../Shared/layout';
 const Addons = ({ active }) => {
     const panels = addons.getElements('panel');
     const [addonSelected, setAddonSelected] = useState(Object.keys(panels)[0] || null);
     if (Object.keys(panels).length === 0) {
-        return (React.createElement(SafeAreaView, { style: styles.container },
-            React.createElement(NoAddonContainer, null,
-                React.createElement(Label, null, "No addons loaded."))));
+        return (React.createElement(Box, { alignItems: "center", justifyContent: "center" },
+            React.createElement(Text, null, "No addons loaded.")));
     }
-    return (React.createElement(Container, null,
-        React.createElement(SafeAreaView, { style: styles.container },
-            React.createElement(AddonsList, { onPressAddon: setAddonSelected, panels: panels, addonSelected: active ? addonSelected : null }),
-            React.createElement(AddonWrapper, { addonSelected: active ? addonSelected : null, panels: panels }))));
+    return (React.createElement(Box, { flex: true },
+        React.createElement(AddonsList, { onPressAddon: setAddonSelected, panels: panels, addonSelected: active ? addonSelected : null }),
+        React.createElement(AddonWrapper, { addonSelected: active ? addonSelected : null, panels: panels })));
 };
-const styles = StyleSheet.create({
-    container: { flex: 1 },
-});
 export default React.memo(Addons);

package/dist/preview/components/OnDeviceUI/addons/List.js

@@ -1,20 +1,11 @@
 import React from 'react';
-import { ScrollView } from 'react-native';
-import styled from '@emotion/native';
-import Button from '../navigation/Button';
-const Container = styled.View(({ theme }) => ({
-    flexDirection: 'row',
-    borderBottomWidth: 1,
-    borderBottomColor: theme.borderColor || '#e6e6e6',
-}));
+import { TabBar, TabButton } from '../../Shared/tabs';
 const AddonList = ({ panels, addonSelected, onPressAddon }) => {
     const addonKeys = Object.keys(panels);
-    const renderTab = (id, title) => (React.createElement(Button, { active: id === addonSelected, key: id, id: id, onPress: () => onPressAddon(id) }, title.toUpperCase()));
-    return (React.createElement(Container, null,
-        React.createElement(ScrollView, { showsHorizontalScrollIndicator: false, horizontal: true }, addonKeys.map((id) => {
-            const { title } = panels[id];
-            const resolvedTitle = typeof title === 'function' ? title() : title;
-            return renderTab(id, resolvedTitle);
-        }))));
+    return (React.createElement(TabBar, { scrollable: true }, addonKeys.map((id) => {
+        const { title } = panels[id];
+        const resolvedTitle = typeof title === 'function' ? title() : title;
+        return (React.createElement(TabButton, { active: id === addonSelected, key: id, id: id, onPress: () => onPressAddon(id) }, resolvedTitle.toUpperCase()));
+    })));
 };
 export default React.memo(AddonList);

package/dist/preview/components/OnDeviceUI/addons/Wrapper.js

@@ -1,22 +1,18 @@
 import React from 'react';
-import { View, ScrollView, StyleSheet } from 'react-native';
-const style = StyleSheet.create({
-    invisible: {
-        height: 0,
-        width: 0,
-        opacity: 0,
-        position: 'absolute',
-    },
-    flex: {
-        flex: 1,
-    },
-});
+import { ScrollView } from 'react-native';
+import styled from '@emotion/native';
+import { useTheme } from '../../../../hooks';
+const Container = styled.View(({ selected }) => ({
+    display: selected ? 'flex' : 'none',
+    flex: 1,
+}));
 const Wrapper = ({ panels, addonSelected }) => {
+    const theme = useTheme();
     const addonKeys = Object.keys(panels);
     const content = addonKeys.map((id) => {
         const selected = addonSelected === id;
-        return (React.createElement(View, { key: id, style: selected ? style.flex : style.invisible },
-            React.createElement(ScrollView, null, panels[id].render({ active: selected, key: id }))));
+        return (React.createElement(Container, { key: id, selected: selected },
+            React.createElement(ScrollView, { contentContainerStyle: { padding: theme.panel.paddingHorizontal } }, panels[id].render({ active: selected, key: id }))));
     });
     return React.createElement(React.Fragment, null, content);
 };

package/dist/preview/components/OnDeviceUI/navigation/Navigation.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import GestureRecognizer from 'react-native-swipe-gestures';
-import Bar from './Bar';
+import { NavigationBar } from './NavigationBar';
 import VisibilityButton from './VisibilityButton';
 const SWIPE_CONFIG = {
     velocityThreshold: 0.2,
@@ -31,7 +31,7 @@ const Navigation = ({ tabOpen, onChangeTab, isUIVisible, setIsUIVisible, onLayou
     };
     return (React.createElement(View, { style: navStyle, onLayout: onLayout },
         isUIVisible && (React.createElement(GestureRecognizer, { onSwipeLeft: handleSwipeLeft, onSwipeRight: handleSwipeRight, config: SWIPE_CONFIG },
-            React.createElement(Bar, { index: tabOpen, onPress: onChangeTab, style: { paddingBottom: insets.bottom } }))),
-        React.createElement(VisibilityButton, { onPress: handleToggleUI, style: { marginBottom: insets.bottom } })));
+            React.createElement(NavigationBar, { index: tabOpen, onPress: onChangeTab, style: { paddingBottom: insets.bottom } }))),
+        React.createElement(VisibilityButton, { onPress: handleToggleUI, style: { paddingBottom: insets.bottom } })));
 };
 export default React.memo(Navigation);

package/dist/preview/components/OnDeviceUI/navigation/NavigationBar.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+export interface NavigationBarProps {
+    index: number;
+    onPress: (id: number) => void;
+    style?: StyleProp<ViewStyle>;
+}
+export declare const NavigationBar: React.MemoExoticComponent<({ index, onPress, style }: NavigationBarProps) => JSX.Element>;

package/dist/preview/components/OnDeviceUI/navigation/NavigationBar.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import styled from '@emotion/native';
+import { NAVIGATOR, PREVIEW, ADDONS } from './constants';
+import { TabBar, TabButton } from '../../Shared/tabs';
+const NavigationTabBar = styled(TabBar)(({ theme }) => ({
+    paddingHorizontal: theme.tokens.spacing2,
+    backgroundColor: theme.navigation.backgroundColor,
+    borderColor: theme.navigation.borderColor,
+    borderTopWidth: theme.navigation.borderWidth,
+}));
+export const NavigationBar = React.memo(({ index, onPress, style }) => (React.createElement(NavigationTabBar, { style: style },
+    React.createElement(TabButton, { onPress: onPress, testID: "BottomMenu.Navigator", id: NAVIGATOR, active: index === NAVIGATOR }, "NAVIGATOR"),
+    React.createElement(TabButton, { onPress: onPress, testID: "BottomMenu.Preview", id: PREVIEW, active: index === PREVIEW }, "PREVIEW"),
+    React.createElement(TabButton, { onPress: onPress, testID: "BottomMenu.Addons", id: ADDONS, active: index === ADDONS }, "ADDONS"))));

package/dist/preview/components/OnDeviceUI/navigation/VisibilityButton.js

@@ -1,13 +1,13 @@
 import React from 'react';
 import styled from '@emotion/native';
 import { View } from 'react-native';
-const Touchable = styled.TouchableOpacity({
+const Touchable = styled.TouchableOpacity(({ theme }) => ({
     backgroundColor: 'transparent',
     position: 'absolute',
-    right: 8,
-    bottom: 12,
+    right: theme.tokens.spacing2,
+    bottom: theme.tokens.spacing4,
     zIndex: 100,
-});
+}));
 const HIDE_ICON_SIZE = 14;
 const HIDE_ICON_BORDER_WIDTH = 1;
 const Inner = styled.View(({ theme }) => ({
@@ -16,22 +16,22 @@ const Inner = styled.View(({ theme }) => ({
     left: 0,
     width: HIDE_ICON_SIZE,
     height: HIDE_ICON_SIZE,
-    borderRadius: HIDE_ICON_BORDER_WIDTH,
+    borderRadius: theme.navigation.visibilityBorderRadius,
     overflow: 'hidden',
-    borderColor: theme.buttonTextColor || '#999999',
+    borderColor: theme.navigation.visibilityInnerBorderColor,
     borderWidth: HIDE_ICON_BORDER_WIDTH * 2,
 }));
-const Outer = styled.View({
+const Outer = styled.View(({ theme }) => ({
     position: 'absolute',
     top: 0,
     left: 0,
     width: HIDE_ICON_SIZE,
     height: HIDE_ICON_SIZE,
-    borderRadius: HIDE_ICON_BORDER_WIDTH,
+    borderRadius: theme.navigation.visibilityBorderRadius,
     overflow: 'hidden',
-    borderColor: 'white',
+    borderColor: theme.navigation.visibilityOuterBorderColor,
     borderWidth: HIDE_ICON_BORDER_WIDTH,
-});
+}));
 const hideIconStyles = {
     width: HIDE_ICON_SIZE,
     height: HIDE_ICON_SIZE,

package/dist/preview/components/Shared/layout.d.ts

@@ -0,0 +1,12 @@
+/**
+ * A general (flex)box layout component that accepts props for flexbox layout
+ * styles, such as `flex`, `alignItems`, `marginVertical`, etc.
+ *
+ * @example
+ * ```tsx
+ * <Box flex flexDirection='row' alignItems='center' marginVertical={42}>
+ *   <MyContent />
+ * </Box>
+ * ```
+ */
+export declare const Box: any;

package/dist/preview/components/Shared/layout.js

@@ -0,0 +1,27 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import styled from '@emotion/native';
+/**
+ * A general (flex)box layout component that accepts props for flexbox layout
+ * styles, such as `flex`, `alignItems`, `marginVertical`, etc.
+ *
+ * @example
+ * ```tsx
+ * <Box flex flexDirection='row' alignItems='center' marginVertical={42}>
+ *   <MyContent />
+ * </Box>
+ * ```
+ */
+export const Box = styled.View((_a) => {
+    var { flex } = _a, layoutProps = __rest(_a, ["flex"]);
+    return (Object.assign({ flex: flex === true ? 1 : flex === false ? 0 : flex }, layoutProps));
+});

package/dist/preview/components/Shared/tabs.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+interface TabButtonProps {
+    id: number | string;
+    active: boolean;
+    onPress: (id: number | string) => void;
+    testID?: string;
+    children: React.ReactNode;
+}
+export declare const TabButton: React.MemoExoticComponent<({ onPress, id, active, children, testID }: TabButtonProps) => JSX.Element>;
+interface TabBarProps {
+    /**
+     * Should the tab bar contents scroll horizontally?
+     */
+    scrollable?: boolean;
+    style?: StyleProp<ViewStyle>;
+    children: React.ReactNode;
+}
+export declare const TabBar: React.MemoExoticComponent<({ scrollable, style, children }: TabBarProps) => JSX.Element>;
+export {};

package/dist/preview/components/Shared/tabs.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { ScrollView, View } from 'react-native';
+import styled from '@emotion/native';
+import { useTheme } from '../../../hooks';
+const TabButtonText = styled.Text(({ theme, active }) => ({
+    color: active ? theme.tabs.activeTextColor : theme.tabs.inactiveTextColor,
+    paddingVertical: theme.tabs.paddingVertical,
+    paddingHorizontal: theme.tabs.paddingHorizontal,
+    fontSize: theme.tabs.fontSize,
+    fontWeight: theme.tabs.fontWeight,
+}));
+const hitSlop = { top: 8, left: 0, right: 0, bottom: 20 };
+const TabButtonTouchable = styled.TouchableOpacity(({ theme, active }) => ({
+    borderWidth: theme.tabs.borderWidth,
+    borderColor: active ? theme.tabs.activeBorderColor : theme.tabs.inactiveBorderColor,
+    borderRadius: theme.tabs.borderRadius,
+    backgroundColor: active ? theme.tabs.activeBackgroundColor : theme.tabs.inactiveBackgroundColor,
+}));
+export const TabButton = React.memo(({ onPress, id, active, children, testID }) => {
+    return (React.createElement(TabButtonTouchable, { active: active, testID: testID, onPress: () => onPress(id), activeOpacity: 0.8, hitSlop: hitSlop },
+        React.createElement(TabButtonText, { active: active }, children)));
+});
+export const TabBar = React.memo(({ scrollable = false, style, children }) => {
+    const theme = useTheme();
+    if (scrollable) {
+        children = (React.createElement(ScrollView, { showsHorizontalScrollIndicator: false, horizontal: true, contentContainerStyle: { paddingHorizontal: theme.tokens.spacing2 } }, children));
+    }
+    return (React.createElement(View, { style: style },
+        React.createElement(TabBarContainer, null, children)));
+});
+const TabBarContainer = styled.View({
+    flexDirection: 'row',
+    paddingVertical: 6,
+    justifyItems: 'center',
+});

package/dist/preview/components/Shared/theme.d.ts

@@ -1,15 +1,185 @@
-export declare const theme: {
+import { ShadowStyleIOS, ViewStyle, TextStyle } from 'react-native';
+type ShadowStyle = ShadowStyleIOS | Pick<ViewStyle, 'elevation'>;
+type FontWeight = TextStyle['fontWeight'];
+/**
+ * Primitive tokens used to build the theme.
+ *
+ * Ideally components should not use these values directly, and should prefer
+ * to use more semantic values from the theme.
+ */
+interface ThemeTokens {
+    spacing1: number;
+    spacing2: number;
+    spacing3: number;
+    spacing4: number;
+    spacing5: number;
+    spacing6: number;
+    fontSize: {
+        small: number;
+        smaller: number;
+        normal: number;
+    };
+    color: {
+        black: string;
+        white: string;
+        grey200: string;
+        grey700: string;
+        red500: string;
+        blue100: string;
+        blue200: string;
+        blue250: string;
+        blue300: string;
+        blue400: string;
+        blue600: string;
+        green500: string;
+    };
+    borderRadius: {
+        small: number;
+        medium: number;
+        large: number;
+        round: number;
+    };
+    borderWidthNormal: number;
+    /** Elevation shadows */
+    elevation: {
+        floating: ShadowStyle;
+    };
+}
+interface ThemeButton {
+    textColor: string;
     backgroundColor: string;
-    storyListBackgroundColor: string;
-    listItemTextColor: string;
-    listItemActiveColor: string;
-    listItemActiveTextColor: string;
-    sectionActiveColor: string;
-    headerTextColor: string;
-    labelColor: string;
     borderColor: string;
-    previewBorderColor: string;
-    buttonTextColor: string;
-    buttonActiveTextColor: string;
-    secondaryLabelColor: string;
-};
+    borderWidth: number;
+    borderRadius: number;
+}
+export interface Theme {
+    tokens: ThemeTokens;
+    backgroundColor: string;
+    text: {
+        primaryColor: string;
+        secondaryColor: string;
+        linkColor: string;
+    };
+    preview: {
+        containerBackgroundColor: string;
+        backgroundColor: string;
+    };
+    /** Navigation bar and related area */
+    navigation: {
+        backgroundColor: string;
+        borderColor: string;
+        borderWidth: number;
+        visibilityBorderRadius: number;
+        visibilityInnerBorderColor: string;
+        visibilityOuterBorderColor: string;
+    };
+    /** Side panels (Story list, addons) */
+    panel: {
+        backgroundColor: string;
+        borderWidth: number;
+        borderColor: string;
+        paddingVertical: number;
+        paddingHorizontal: number;
+    };
+    /** Story list and list items */
+    storyList: {
+        fontSize: number;
+        headerPaddingHorizontal: number;
+        headerPaddingVertical: number;
+        headerTextColor: string;
+        headerFontWeight: FontWeight;
+        storyPaddingHorizontal: number;
+        storyPaddingVertical: number;
+        storyIndent: number;
+        storyTextColor: string;
+        storyFontWeight: FontWeight;
+        storySelectedBackgroundColor: string;
+        storySelectedTextColor: string;
+        storySelectedFontWeight: FontWeight;
+        sectionSpacing: number;
+        sectionActiveBackgroundColor: string;
+        sectionBorderRadius: number;
+        search: {
+            fontSize: number;
+            textColor: string;
+            placeholderTextColor: string;
+            borderRadius: number;
+            borderColor: string;
+            borderWidth: number;
+            backgroundColor: string;
+            paddingVertical: number;
+            paddingHorizontal: number;
+        };
+    };
+    /** Buttons */
+    button: {
+        fontSize: number;
+        fontWeight: FontWeight;
+        paddingVertical: number;
+        paddingHorizontal: number;
+        primary: ThemeButton;
+        secondary: ThemeButton;
+    };
+    /** Tabs (navigation and addons) */
+    tabs: {
+        fontSize: number;
+        fontWeight: FontWeight;
+        paddingVertical: number;
+        paddingHorizontal: number;
+        borderWidth: number;
+        borderRadius: number;
+        activeBorderColor: string;
+        activeBackgroundColor: string;
+        activeTextColor: string;
+        inactiveBorderColor: string;
+        inactiveBackgroundColor: string;
+        inactiveTextColor: string;
+    };
+    /** Inputs (text, radio, slider, etc.) */
+    inputs: {
+        errorTextColor: string;
+        labelFontSize: number;
+        labelTextColor: string;
+        text: {
+            fontSize: number;
+            textColor: string;
+            borderWidth: number;
+            borderColor: string;
+            backgroundColor: string;
+            borderRadius: number;
+            paddingVertical: number;
+            paddingHorizontal: number;
+        };
+        radio: {
+            fontSize: number;
+            height: number;
+            borderWidth: number;
+            borderColor: string;
+            backgroundColor: string;
+            paddingVertical: number;
+            paddingHorizontal: number;
+            activeBackgroundColor: string;
+            itemSpacing: number;
+            labelSpacing: number;
+        };
+        swatch: {
+            fontSize: number;
+            height: number;
+            borderWidth: number;
+            borderColor: string;
+            backgroundColor: string;
+            outerBorderRadius: number;
+            innerBorderRadius: number;
+            paddingVertical: number;
+            paddingHorizontal: number;
+            nameTextWeight: FontWeight;
+        };
+        slider: {
+            fontSize: number;
+            labelTextColor: string;
+            valueTextColor: string;
+        };
+    };
+}
+export declare const theme: Theme;
+export {};

package/dist/preview/components/Shared/theme.js

@@ -1,15 +1,179 @@
+const tokens = {
+    spacing1: 4,
+    spacing2: 8,
+    spacing3: 12,
+    spacing4: 16,
+    spacing5: 20,
+    spacing6: 24,
+    fontSize: {
+        small: 12,
+        smaller: 14,
+        normal: 16,
+    },
+    color: {
+        black: '#001a23',
+        white: '#ffffff',
+        grey200: '#dee2e3',
+        grey700: '#859499',
+        red500: '#ff4400',
+        blue100: '#f6f9fc',
+        blue200: '#e0eaf5',
+        blue250: '#dcebf9',
+        blue300: '#b2cbe6',
+        blue400: '#a3c1e0',
+        blue600: '#1ea7fd',
+        green500: '#66bf3c',
+    },
+    borderRadius: {
+        small: 4,
+        medium: 6,
+        large: 8,
+        round: 100,
+    },
+    borderWidthNormal: 1,
+    elevation: {
+        floating: {
+            shadowColor: '#000000',
+            shadowOpacity: 0.2,
+            shadowOffset: { width: 0, height: 0 },
+            shadowRadius: 16,
+            elevation: 10,
+        },
+    },
+};
+const text = {
+    primaryColor: tokens.color.black,
+    secondaryColor: tokens.color.grey700,
+    linkColor: '#0000ff',
+};
 export const theme = {
-    backgroundColor: 'white',
-    storyListBackgroundColor: '#f6f9fc',
-    listItemTextColor: '#444444',
-    listItemActiveColor: '#1ea7fd',
-    listItemActiveTextColor: 'white',
-    sectionActiveColor: '#e0ebf5',
-    headerTextColor: 'black',
-    labelColor: 'black',
-    borderColor: '#e6e6e6',
-    previewBorderColor: '#b3b3b3',
-    buttonTextColor: '#999999',
-    buttonActiveTextColor: '#444444',
-    secondaryLabelColor: '#999999',
+    tokens,
+    text,
+    backgroundColor: tokens.color.white,
+    preview: {
+        containerBackgroundColor: tokens.color.white,
+        backgroundColor: tokens.color.white,
+    },
+    navigation: {
+        backgroundColor: tokens.color.white,
+        borderColor: tokens.color.grey200,
+        borderWidth: tokens.borderWidthNormal,
+        visibilityBorderRadius: tokens.borderRadius.small,
+        visibilityInnerBorderColor: tokens.color.grey700,
+        visibilityOuterBorderColor: tokens.color.white,
+    },
+    panel: {
+        backgroundColor: tokens.color.blue100,
+        borderWidth: tokens.borderWidthNormal,
+        borderColor: tokens.color.blue200,
+        paddingVertical: 0,
+        paddingHorizontal: tokens.spacing2,
+    },
+    storyList: {
+        fontSize: tokens.fontSize.normal,
+        headerPaddingHorizontal: tokens.spacing2,
+        headerPaddingVertical: tokens.spacing2,
+        headerTextColor: text.primaryColor,
+        headerFontWeight: '500',
+        storyPaddingHorizontal: tokens.spacing2,
+        storyPaddingVertical: tokens.spacing1 * 1.5,
+        storyIndent: tokens.spacing6,
+        storyTextColor: text.primaryColor,
+        storyFontWeight: '400',
+        storySelectedBackgroundColor: tokens.color.blue600,
+        storySelectedTextColor: tokens.color.white,
+        storySelectedFontWeight: '700',
+        sectionSpacing: tokens.spacing2,
+        sectionActiveBackgroundColor: tokens.color.blue200,
+        sectionBorderRadius: tokens.borderRadius.medium,
+        search: {
+            fontSize: tokens.fontSize.normal,
+            textColor: text.primaryColor,
+            placeholderTextColor: text.secondaryColor,
+            borderRadius: tokens.borderRadius.round,
+            borderColor: tokens.color.blue400,
+            borderWidth: tokens.borderWidthNormal,
+            backgroundColor: tokens.color.white,
+            paddingVertical: tokens.spacing2,
+            paddingHorizontal: tokens.spacing3,
+        },
+    },
+    button: {
+        fontSize: tokens.fontSize.smaller,
+        fontWeight: '600',
+        paddingVertical: tokens.spacing2,
+        paddingHorizontal: tokens.spacing5,
+        primary: {
+            textColor: text.primaryColor,
+            backgroundColor: tokens.color.blue250,
+            borderColor: tokens.color.blue300,
+            borderWidth: tokens.borderWidthNormal,
+            borderRadius: tokens.borderRadius.medium,
+        },
+        secondary: {
+            textColor: text.primaryColor,
+            backgroundColor: 'transparent',
+            borderColor: tokens.color.blue300,
+            borderWidth: tokens.borderWidthNormal,
+            borderRadius: tokens.borderRadius.medium,
+        },
+    },
+    tabs: {
+        fontSize: tokens.fontSize.small,
+        fontWeight: '500',
+        paddingVertical: tokens.spacing2,
+        paddingHorizontal: tokens.spacing2 * 1.25,
+        borderWidth: tokens.borderWidthNormal,
+        borderRadius: tokens.borderRadius.round,
+        activeBorderColor: tokens.color.blue300,
+        activeBackgroundColor: tokens.color.blue250,
+        activeTextColor: text.primaryColor,
+        inactiveBorderColor: 'transparent',
+        inactiveBackgroundColor: 'transparent',
+        inactiveTextColor: text.secondaryColor,
+    },
+    inputs: {
+        errorTextColor: tokens.color.red500,
+        labelFontSize: tokens.fontSize.smaller,
+        labelTextColor: text.primaryColor,
+        text: {
+            fontSize: tokens.fontSize.smaller,
+            textColor: text.primaryColor,
+            borderWidth: tokens.borderWidthNormal,
+            borderColor: tokens.color.blue400,
+            backgroundColor: tokens.color.white,
+            borderRadius: tokens.borderRadius.medium,
+            paddingVertical: tokens.spacing1 * 1.5,
+            paddingHorizontal: tokens.spacing1 * 1.5,
+        },
+        radio: {
+            fontSize: tokens.fontSize.smaller,
+            height: 20,
+            borderWidth: tokens.borderWidthNormal,
+            borderColor: tokens.color.blue400,
+            backgroundColor: tokens.color.white,
+            paddingVertical: 3,
+            paddingHorizontal: 3,
+            activeBackgroundColor: tokens.color.green500,
+            itemSpacing: tokens.spacing1,
+            labelSpacing: tokens.spacing2,
+        },
+        swatch: {
+            fontSize: tokens.fontSize.smaller,
+            height: 40,
+            borderWidth: tokens.borderWidthNormal,
+            borderColor: tokens.color.blue400,
+            backgroundColor: tokens.color.white,
+            outerBorderRadius: tokens.borderRadius.medium,
+            innerBorderRadius: tokens.borderRadius.small,
+            paddingVertical: tokens.spacing1,
+            paddingHorizontal: tokens.spacing1,
+            nameTextWeight: '600',
+        },
+        slider: {
+            fontSize: tokens.fontSize.smaller,
+            labelTextColor: text.secondaryColor,
+            valueTextColor: text.primaryColor,
+        },
+    },
 };

package/dist/preview/components/StoryListView/StoryListView.js

@@ -3,78 +3,79 @@ import { addons } from '@storybook/addons';
 import Events from '@storybook/core-events';
 import React, { useMemo, useState } from 'react';
 import { SectionList, StyleSheet } from 'react-native';
-import { useIsStorySectionSelected, useIsStorySelected } from '../../../hooks';
 import { GridIcon, SearchIcon, StoryIcon } from '../Shared/icons';
-import { Header, Name } from '../Shared/text';
-const SearchInput = styled.TextInput(Object.assign({ fontSize: 16, padding: 0, paddingHorizontal: 36 }, StyleSheet.absoluteFillObject), ({ theme }) => ({
-    color: theme.buttonActiveTextColor,
+import { Box } from '../Shared/layout';
+import { useIsStorySelected, useIsStorySectionSelected, useTheme } from '../../../hooks';
+const SectionHeaderText = styled.Text(({ theme }) => ({
+    fontSize: theme.storyList.fontSize,
+    color: theme.storyList.headerTextColor,
+    fontWeight: theme.storyList.headerFontWeight,
 }));
-const SearchContainer = styled.View({
-    borderRadius: 100,
-    borderWidth: 1.5,
-    marginVertical: 4,
-    marginHorizontal: 8,
-    paddingVertical: 10,
-    paddingLeft: 12,
+const StoryNameText = styled.Text(({ selected, theme }) => ({
+    fontSize: theme.storyList.fontSize,
+    fontWeight: selected ? theme.storyList.storySelectedFontWeight : theme.storyList.storyFontWeight,
+    color: selected ? theme.storyList.storySelectedTextColor : theme.storyList.storyTextColor,
+}));
+const SEARCH_ICON_SIZE = 24;
+const SearchInput = styled.TextInput(Object.assign({ padding: 0 }, StyleSheet.absoluteFillObject), ({ theme }) => ({
+    fontSize: theme.storyList.search.fontSize,
+    paddingStart: theme.storyList.search.paddingHorizontal + SEARCH_ICON_SIZE,
+    color: theme.storyList.search.textColor,
+}));
+const SearchContainer = styled.View(({ theme }) => ({
     flexDirection: 'row',
     alignItems: 'center',
-}, ({ theme }) => ({
-    borderColor: theme.borderColor,
-    backgroundColor: theme.storyListBackgroundColor,
+    margin: theme.panel.paddingHorizontal,
+    paddingVertical: theme.storyList.search.paddingVertical,
+    paddingStart: theme.storyList.search.paddingHorizontal,
+    borderColor: theme.storyList.search.borderColor,
+    borderWidth: theme.storyList.search.borderWidth,
+    borderRadius: theme.storyList.search.borderRadius,
+    backgroundColor: theme.storyList.search.backgroundColor,
 }));
 const SearchBar = (props) => {
+    const theme = useTheme();
     return (React.createElement(SearchContainer, null,
         React.createElement(SearchIcon, null),
-        React.createElement(SearchInput, Object.assign({}, props, { autoCapitalize: "none", autoComplete: "off", autoCorrect: false, spellCheck: false, clearButtonMode: "while-editing", disableFullscreenUI: true, placeholderTextColor: "#666", returnKeyType: "search" }))));
+        React.createElement(SearchInput, Object.assign({}, props, { autoCapitalize: "none", autoComplete: "off", autoCorrect: false, spellCheck: false, clearButtonMode: "while-editing", disableFullscreenUI: true, placeholderTextColor: theme.storyList.search.placeholderTextColor, returnKeyType: "search" }))));
 };
 const HeaderContainer = styled.TouchableOpacity({
-    marginTop: 8,
-    marginHorizontal: 6,
-    padding: 6,
-    paddingHorizontal: 8,
-    borderTopLeftRadius: 6,
-    borderTopRightRadius: 6,
     flexDirection: 'row',
     alignItems: 'center',
 }, ({ selected, theme }) => ({
-    backgroundColor: selected ? theme.sectionActiveColor : undefined,
-}));
-const StoryListContainer = styled.View(({ theme }) => ({
-    flex: 1,
-    borderRightWidth: StyleSheet.hairlineWidth,
-    borderRightColor: theme.borderColor,
-    backgroundColor: theme.storyListBackgroundColor,
+    marginTop: theme.storyList.sectionSpacing,
+    paddingHorizontal: theme.storyList.headerPaddingHorizontal,
+    paddingVertical: theme.storyList.headerPaddingVertical,
+    backgroundColor: selected ? theme.storyList.sectionActiveBackgroundColor : undefined,
+    borderTopLeftRadius: theme.storyList.sectionBorderRadius,
+    borderTopRightRadius: theme.storyList.sectionBorderRadius,
 }));
 const SectionHeader = React.memo(({ title, onPress }) => {
     const selected = useIsStorySectionSelected(title);
     return (React.createElement(HeaderContainer, { key: title, selected: selected, onPress: onPress, activeOpacity: 0.8 },
         React.createElement(GridIcon, null),
-        React.createElement(Header, { selected: selected }, title)));
+        React.createElement(SectionHeaderText, { selected: selected }, title)));
 });
 const ItemTouchable = styled.TouchableOpacity({
-    marginHorizontal: 6,
-    padding: 6,
-    paddingLeft: 24,
     flexDirection: 'row',
     alignItems: 'center',
-}, ({ selected, sectionSelected, isLastItem, theme }) => {
-    var _a;
-    return {
-        backgroundColor: selected
-            ? (_a = theme === null || theme === void 0 ? void 0 : theme.listItemActiveColor) !== null && _a !== void 0 ? _a : '#1ea7fd'
-            : sectionSelected
-                ? theme === null || theme === void 0 ? void 0 : theme.sectionActiveColor
-                : undefined,
-        borderBottomLeftRadius: isLastItem ? 6 : undefined,
-        borderBottomRightRadius: isLastItem ? 6 : undefined,
-    };
-});
+}, ({ selected, sectionSelected, isLastItem, theme }) => ({
+    padding: theme.storyList.storyPaddingHorizontal,
+    paddingStart: theme.storyList.storyIndent,
+    backgroundColor: selected
+        ? theme.storyList.storySelectedBackgroundColor
+        : sectionSelected
+            ? theme.storyList.sectionActiveBackgroundColor
+            : undefined,
+    borderBottomLeftRadius: isLastItem ? theme.storyList.sectionBorderRadius : undefined,
+    borderBottomRightRadius: isLastItem ? theme.storyList.sectionBorderRadius : undefined,
+}));
 const ListItem = React.memo(({ storyId, kind, title, isLastItem, onPress }) => {
     const selected = useIsStorySelected(storyId);
     const sectionSelected = useIsStorySectionSelected(kind);
     return (React.createElement(ItemTouchable, { key: title, onPress: onPress, activeOpacity: 0.8, testID: `Storybook.ListItem.${kind}.${title}`, accessibilityLabel: `Storybook.ListItem.${title}`, selected: selected, sectionSelected: sectionSelected, isLastItem: isLastItem },
         React.createElement(StoryIcon, { selected: selected }),
-        React.createElement(Name, { selected: selected }, title)));
+        React.createElement(StoryNameText, { selected: selected }, title)));
 }, (prevProps, nextProps) => prevProps.storyId === nextProps.storyId);
 const getStories = (storyIndex) => {
     if (!storyIndex) {
@@ -100,6 +101,7 @@ function keyExtractor(item, index) {
 const StoryListView = ({ storyIndex }) => {
     const originalData = useMemo(() => getStories(storyIndex), [storyIndex]);
     const [data, setData] = useState(originalData);
+    const theme = useTheme();
     const handleChangeSearchText = (text) => {
         const query = text.trim();
         if (!query) {
@@ -127,8 +129,14 @@ const StoryListView = ({ storyIndex }) => {
         return (React.createElement(ListItem, { storyId: item.id, title: item.name, kind: item.title, isLastItem: index === section.data.length - 1, onPress: () => changeStory(item.id) }));
     }, []);
     const renderSectionHeader = React.useCallback(({ section: { title, data } }) => (React.createElement(SectionHeader, { title: title, onPress: () => changeStory(data[0].id) })), []);
-    return (React.createElement(StoryListContainer, null,
+    return (React.createElement(Box, { flex: true },
         React.createElement(SearchBar, { testID: "Storybook.ListView.SearchBar", onChangeText: handleChangeSearchText, placeholder: "Find by name" }),
-        React.createElement(SectionList, { style: styles.sectionList, contentContainerStyle: styles.sectionListContentContainer, testID: "Storybook.ListView", renderItem: renderItem, renderSectionHeader: renderSectionHeader, keyExtractor: keyExtractor, sections: data, stickySectionHeadersEnabled: false })));
+        React.createElement(SectionList, { style: styles.sectionList, contentContainerStyle: [
+                styles.sectionListContentContainer,
+                {
+                    paddingVertical: theme.panel.paddingVertical,
+                    paddingHorizontal: theme.panel.paddingHorizontal,
+                },
+            ], testID: "Storybook.ListView", renderItem: renderItem, renderSectionHeader: renderSectionHeader, keyExtractor: keyExtractor, sections: data, stickySectionHeadersEnabled: false })));
 };
 export default React.memo(StoryListView);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native",
-  "version": "6.5.0-rc.2",
+  "version": "6.5.0-rc.3",
   "description": "A better way to develop React Native Components for your app",
   "keywords": [
     "react",
@@ -61,6 +61,7 @@
     "@storybook/preview-web": "^6.5.14",
     "chokidar": "^3.5.1",
     "commander": "^8.2.0",
+    "deepmerge": "^4.3.0",
     "emotion-theming": "^10.0.19",
     "glob": "^7.1.7",
     "jotai": "^2.0.2",
@@ -86,5 +87,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "f94bf2102a2e59b583d23a89f22e29afe67ef8e4"
+  "gitHead": "f2a1a9100ba5ddf37fa59b58518751a525eb4788"
 }

package/dist/preview/components/OnDeviceUI/navigation/Bar.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-import { ViewStyle } from 'react-native';
-export interface Props {
-    index: number;
-    onPress: (id: number) => void;
-    style: ViewStyle;
-}
-declare const _default: React.MemoExoticComponent<({ index, onPress, style }: Props) => JSX.Element>;
-export default _default;

package/dist/preview/components/OnDeviceUI/navigation/Bar.js

@@ -1,17 +0,0 @@
-import React from 'react';
-import styled from '@emotion/native';
-import Button from './Button';
-import { NAVIGATOR, PREVIEW, ADDONS } from './constants';
-const Container = styled.View(({ theme }) => ({
-    flexDirection: 'row',
-    paddingHorizontal: 8,
-    backgroundColor: theme.backgroundColor || 'white',
-    borderTopWidth: 1,
-    borderBottomWidth: 1,
-    borderColor: theme.borderColor || '#e6e6e6',
-}));
-const Bar = ({ index, onPress, style }) => (React.createElement(Container, { style: style },
-    React.createElement(Button, { onPress: onPress, testID: "BottomMenu.Navigator", id: NAVIGATOR, active: index === NAVIGATOR }, "NAVIGATOR"),
-    React.createElement(Button, { onPress: onPress, testID: "BottomMenu.Preview", id: PREVIEW, active: index === PREVIEW }, "PREVIEW"),
-    React.createElement(Button, { onPress: onPress, testID: "BottomMenu.Addons", id: ADDONS, active: index === ADDONS }, "ADDONS")));
-export default React.memo(Bar);

package/dist/preview/components/OnDeviceUI/navigation/Button.d.ts

@@ -1,10 +0,0 @@
-import React, { ReactNode } from 'react';
-interface Props {
-    id: number | string;
-    active: boolean;
-    onPress: (id: number | string) => void;
-    testID?: string;
-    children: ReactNode;
-}
-declare const _default: React.MemoExoticComponent<({ onPress, id, active, children, testID }: Props) => JSX.Element>;
-export default _default;

package/dist/preview/components/OnDeviceUI/navigation/Button.js

@@ -1,17 +0,0 @@
-import React from 'react';
-import { TouchableOpacity } from 'react-native';
-import styled from '@emotion/native';
-const ActiveBorder = styled.View(({ active, theme }) => ({
-    backgroundColor: active ? theme.borderColor || '#e6e6e6' : 'transparent',
-    height: 3,
-}));
-const ButtonText = styled.Text(({ theme, active }) => ({
-    color: active ? theme.buttonActiveTextColor || '#444444' : theme.buttonTextColor || '#999999',
-    paddingHorizontal: 8,
-    paddingVertical: 10,
-    fontSize: 11,
-}));
-const Button = ({ onPress, id, active, children, testID }) => (React.createElement(TouchableOpacity, { testID: testID, onPress: () => onPress(id), activeOpacity: 0.8 },
-    React.createElement(ButtonText, { active: active }, children),
-    React.createElement(ActiveBorder, { active: active })));
-export default React.memo(Button);

package/dist/preview/components/Shared/text.d.ts

@@ -1,3 +0,0 @@
-export declare const Header: any;
-export declare const Name: any;
-export declare const Label: any;

package/dist/preview/components/Shared/text.js

@@ -1,18 +0,0 @@
-import styled from '@emotion/native';
-export const Header = styled.Text(({ theme }) => ({
-    fontSize: 16,
-    color: theme.headerTextColor || 'black',
-    fontWeight: '500',
-}));
-export const Name = styled.Text({
-    fontSize: 16,
-}, ({ selected, theme }) => {
-    var _a, _b;
-    return selected
-        ? { fontWeight: '700', color: (_a = theme.listItemActiveTextColor) !== null && _a !== void 0 ? _a : 'white' }
-        : { color: (_b = theme.listItemTextColor) !== null && _b !== void 0 ? _b : 'black' };
-});
-export const Label = styled.Text(({ theme }) => ({
-    fontSize: 18,
-    color: theme.labelColor || 'black',
-}));