@storybook/react-native 6.5.3 → 6.5.4

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

@@ -1,83 +1,129 @@
-import styled from '@emotion/native';
-import React, { useState, useRef } from 'react';
-import { Animated, Dimensions, Easing, Keyboard, KeyboardAvoidingView, Platform, TouchableOpacity, StatusBar, StyleSheet, View, } from 'react-native';
-import { useIsSplitPanelVisible, useIsUIVisible, useStoryContextParam, useTheme, } from '../../../hooks';
-import { ANIMATION_DURATION_TRANSITION } from '../../../constants';
-import StoryListView from '../StoryListView';
-import StoryView from '../StoryView';
-import AbsolutePositionedKeyboardAwareView from './absolute-positioned-keyboard-aware-view';
-import Addons from './addons/Addons';
-import { AddonsSkeleton } from './addons/AddonsSkeleton';
-import { getAddonPanelPosition, getSidebarPanelPosition, getPreviewShadowStyle, getPreviewStyle, } from './animation';
-import Navigation from './navigation';
-import { CANVAS, ADDONS } from './navigation/constants';
-import Panel from './Panel';
-import { useWindowDimensions } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-const IS_IOS = Platform.OS === 'ios';
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IS_EXPO = void 0;
+var native_1 = __importDefault(require("@emotion/native"));
+var react_1 = __importStar(require("react"));
+var react_native_1 = require("react-native");
+var hooks_1 = require("../../../hooks");
+var constants_1 = require("../../../constants");
+var StoryListView_1 = __importDefault(require("../StoryListView"));
+var StoryView_1 = __importDefault(require("../StoryView"));
+var absolute_positioned_keyboard_aware_view_1 = __importDefault(require("./absolute-positioned-keyboard-aware-view"));
+var Addons_1 = __importDefault(require("./addons/Addons"));
+var AddonsSkeleton_1 = require("./addons/AddonsSkeleton");
+var animation_1 = require("./animation");
+var navigation_1 = __importDefault(require("./navigation"));
+var constants_2 = require("./navigation/constants");
+var Panel_1 = __importDefault(require("./Panel"));
+var react_native_2 = require("react-native");
+var react_native_safe_area_context_1 = require("react-native-safe-area-context");
+var IS_IOS = react_native_1.Platform.OS === 'ios';
 // @ts-ignore: Property 'Expo' does not exist on type 'Global'
-const getExpoRoot = () => global.Expo || global.__expo || global.__exponent;
-export const IS_EXPO = getExpoRoot() !== undefined;
-const IS_ANDROID = Platform.OS === 'android';
-const BREAKPOINT = 1024;
-const flex = { flex: 1 };
+var getExpoRoot = function () { return global.Expo || global.__expo || global.__exponent; };
+exports.IS_EXPO = getExpoRoot() !== undefined;
+var IS_ANDROID = react_native_1.Platform.OS === 'android';
+var BREAKPOINT = 1024;
+var flex = { flex: 1 };
 /**
  * Story preview container.
  */
-function Preview({ animatedValue, style, children }) {
-    const theme = useTheme();
-    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)));
+function Preview(_a) {
+    var animatedValue = _a.animatedValue, style = _a.style, children = _a.children;
+    var theme = (0, hooks_1.useTheme)();
+    var containerStyle = __assign({ backgroundColor: theme.preview.backgroundColor }, (0, animation_1.getPreviewShadowStyle)(animatedValue));
+    return (react_1.default.createElement(react_native_1.Animated.View, { style: [flex, containerStyle] },
+        react_1.default.createElement(react_native_1.View, { style: [flex, style] }, children)));
 }
-const styles = StyleSheet.create({
-    expoAndroidContainer: { paddingTop: StatusBar.currentHeight },
+var styles = react_native_1.StyleSheet.create({
+    expoAndroidContainer: { paddingTop: react_native_1.StatusBar.currentHeight },
+});
+var Container = native_1.default.View(function (_a) {
+    var theme = _a.theme;
+    return (__assign(__assign({ flex: 1, backgroundColor: theme.preview.containerBackgroundColor }, (IS_ANDROID && exports.IS_EXPO ? styles.expoAndroidContainer : undefined)), react_native_1.Platform.select({ web: { overflow: 'hidden' } })));
 });
-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, shouldDisableKeyboardAvoidingView, keyboardAvoidingViewVerticalOffset, tabOpen: initialTabOpen, }) => {
-    const [tabOpen, setTabOpen] = useState(initialTabOpen || CANVAS);
-    const lastTabOpen = React.useRef(tabOpen);
-    const [previewDimensions, setPreviewDimensions] = useState(() => ({
-        width: Dimensions.get('window').width,
-        height: Dimensions.get('window').height,
-    }));
-    const animatedValue = useRef(new Animated.Value(tabOpen));
-    const wide = useWindowDimensions().width >= BREAKPOINT;
-    const insets = useSafeAreaInsets();
-    const handleToggleTab = React.useCallback((newTabOpen) => {
+var OnDeviceUI = function (_a) {
+    var storyIndex = _a.storyIndex, shouldDisableKeyboardAvoidingView = _a.shouldDisableKeyboardAvoidingView, keyboardAvoidingViewVerticalOffset = _a.keyboardAvoidingViewVerticalOffset, initialTabOpen = _a.tabOpen;
+    var _b = (0, react_1.useState)(initialTabOpen || constants_2.CANVAS), tabOpen = _b[0], setTabOpen = _b[1];
+    var lastTabOpen = react_1.default.useRef(tabOpen);
+    var _c = (0, react_1.useState)(function () { return ({
+        width: react_native_1.Dimensions.get('window').width,
+        height: react_native_1.Dimensions.get('window').height,
+    }); }), previewDimensions = _c[0], setPreviewDimensions = _c[1];
+    var animatedValue = (0, react_1.useRef)(new react_native_1.Animated.Value(tabOpen));
+    var wide = (0, react_native_2.useWindowDimensions)().width >= BREAKPOINT;
+    var insets = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
+    var handleToggleTab = react_1.default.useCallback(function (newTabOpen) {
         if (newTabOpen === tabOpen) {
             return;
         }
         lastTabOpen.current = tabOpen;
-        Animated.timing(animatedValue.current, {
+        react_native_1.Animated.timing(animatedValue.current, {
             toValue: newTabOpen,
-            duration: ANIMATION_DURATION_TRANSITION,
-            easing: Easing.inOut(Easing.cubic),
+            duration: constants_1.ANIMATION_DURATION_TRANSITION,
+            easing: react_native_1.Easing.inOut(react_native_1.Easing.cubic),
             useNativeDriver: true,
         }).start();
         setTabOpen(newTabOpen);
         // close the keyboard opened from a TextInput from story list or knobs
-        if (newTabOpen === CANVAS) {
-            Keyboard.dismiss();
+        if (newTabOpen === constants_2.CANVAS) {
+            react_native_1.Keyboard.dismiss();
         }
     }, [tabOpen]);
-    const noSafeArea = useStoryContextParam('noSafeArea', false);
-    const previewWrapperStyles = [
+    var noSafeArea = (0, hooks_1.useStoryContextParam)('noSafeArea', false);
+    var previewWrapperStyles = [
         flex,
-        getPreviewStyle({
+        (0, animation_1.getPreviewStyle)({
             animatedValue: animatedValue.current,
-            previewDimensions,
-            wide,
-            insets,
-            tabOpen,
+            previewDimensions: previewDimensions,
+            wide: wide,
+            insets: insets,
+            tabOpen: tabOpen,
             lastTabOpen: lastTabOpen.current,
         }),
     ];
-    const [isUIVisible] = useIsUIVisible();
+    var isUIVisible = (0, hooks_1.useIsUIVisible)()[0];
     // The initial value is just a guess until the layout calculation has been done.
-    const [navBarHeight, setNavBarHeight] = React.useState(insets.bottom + 40);
-    const measureNavigation = React.useCallback(({ nativeEvent }) => {
-        const inset = insets.bottom;
+    var _d = react_1.default.useState(insets.bottom + 40), navBarHeight = _d[0], setNavBarHeight = _d[1];
+    var measureNavigation = react_1.default.useCallback(function (_a) {
+        var nativeEvent = _a.nativeEvent;
+        var inset = insets.bottom;
         setNavBarHeight(isUIVisible ? nativeEvent.layout.height - inset : 0);
     }, [isUIVisible, insets]);
     // There are 4 cases for the additional UI margin:
@@ -91,42 +137,42 @@ const OnDeviceUI = ({ storyIndex, shouldDisableKeyboardAvoidingView, keyboardAvo
     //      bottom safe area inset and the navigation bar height.
     //
     //   4. Storybook UI is not visible, and `noSafeArea` is true: No margin.
-    const safeAreaMargins = {
+    var safeAreaMargins = {
         paddingBottom: isUIVisible ? insets.bottom + navBarHeight : noSafeArea ? 0 : insets.bottom,
         paddingTop: !noSafeArea ? insets.top : 0,
         overflow: 'hidden',
     };
     // The panels always apply the safe area, regardless of the story parameters.
-    const panelSafeAreaMargins = {
+    var 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);
-    const [isSplitPanelVisible] = useIsSplitPanelVisible();
-    const isPreviewInactive = tabOpen !== CANVAS;
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Container, null,
-            React.createElement(KeyboardAvoidingView, { enabled: !shouldDisableKeyboardAvoidingView || isPreviewInactive, 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),
-                            isSplitPanelVisible ? (React.createElement(Panel, { edge: "top", style: { flex: 1 } },
-                                React.createElement(Addons, { active: true }),
-                                React.createElement(AddonsSkeleton, { visible: isPreviewInactive }))) : null),
-                        isPreviewInactive ? (React.createElement(TouchableOpacity, { style: StyleSheet.absoluteFillObject, onPress: () => handleToggleTab(CANVAS) })) : null),
-                    React.createElement(Panel, { edge: "right", style: [
-                            getSidebarPanelPosition(animatedValue.current, previewDimensions.width, wide),
+    var keyboardVerticalOffset = -panelSafeAreaMargins.paddingBottom + (keyboardAvoidingViewVerticalOffset !== null && keyboardAvoidingViewVerticalOffset !== void 0 ? keyboardAvoidingViewVerticalOffset : 0);
+    var isSplitPanelVisible = (0, hooks_1.useIsSplitPanelVisible)()[0];
+    var isPreviewInactive = tabOpen !== constants_2.CANVAS;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(Container, null,
+            react_1.default.createElement(react_native_1.KeyboardAvoidingView, { enabled: !shouldDisableKeyboardAvoidingView || isPreviewInactive, behavior: IS_IOS ? 'padding' : null, keyboardVerticalOffset: keyboardVerticalOffset, style: flex },
+                react_1.default.createElement(absolute_positioned_keyboard_aware_view_1.default, { onLayout: setPreviewDimensions, previewDimensions: previewDimensions },
+                    react_1.default.createElement(react_native_1.Animated.View, { style: previewWrapperStyles },
+                        react_1.default.createElement(Preview, { style: safeAreaMargins, animatedValue: animatedValue.current },
+                            react_1.default.createElement(StoryView_1.default, null),
+                            isSplitPanelVisible ? (react_1.default.createElement(Panel_1.default, { edge: "top", style: { flex: 1 } },
+                                react_1.default.createElement(Addons_1.default, { active: true }),
+                                react_1.default.createElement(AddonsSkeleton_1.AddonsSkeleton, { visible: isPreviewInactive }))) : null),
+                        isPreviewInactive ? (react_1.default.createElement(react_native_1.TouchableOpacity, { style: react_native_1.StyleSheet.absoluteFillObject, onPress: function () { return handleToggleTab(constants_2.CANVAS); } })) : null),
+                    react_1.default.createElement(Panel_1.default, { edge: "right", style: [
+                            (0, animation_1.getSidebarPanelPosition)(animatedValue.current, previewDimensions.width, wide),
                             panelSafeAreaMargins,
                         ] },
-                        React.createElement(StoryListView, { storyIndex: storyIndex })),
-                    React.createElement(Panel, { edge: "left", style: [
-                            getAddonPanelPosition(animatedValue.current, previewDimensions.width, wide),
+                        react_1.default.createElement(StoryListView_1.default, { storyIndex: storyIndex })),
+                    react_1.default.createElement(Panel_1.default, { edge: "left", style: [
+                            (0, animation_1.getAddonPanelPosition)(animatedValue.current, previewDimensions.width, wide),
                             panelSafeAreaMargins,
                         ] },
-                        React.createElement(Addons, { active: tabOpen === ADDONS })))),
-            React.createElement(Navigation, { onLayout: measureNavigation, tabOpen: tabOpen, onChangeTab: handleToggleTab }))));
+                        react_1.default.createElement(Addons_1.default, { active: tabOpen === constants_2.ADDONS })))),
+            react_1.default.createElement(navigation_1.default, { onLayout: measureNavigation, tabOpen: tabOpen, onChangeTab: handleToggleTab }))));
 };
-export default React.memo(OnDeviceUI);
+exports.default = react_1.default.memo(OnDeviceUI);

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

@@ -1,18 +1,27 @@
-import React from 'react';
-import { StyleSheet, Animated } from 'react-native';
-import styled from '@emotion/native';
-const Container = styled(Animated.View)(({ theme, edge }) => ({
-    backgroundColor: theme.panel.backgroundColor,
-    borderTopWidth: edge === 'top' ? theme.panel.borderWidth : undefined,
-    borderStartWidth: edge === 'left' ? theme.panel.borderWidth : undefined,
-    borderEndWidth: edge === 'right' ? theme.panel.borderWidth : undefined,
-    borderColor: theme.panel.borderColor,
-}));
-const Panel = ({ edge, children, style }) => {
-    const containerStyle = StyleSheet.flatten([
-        edge === 'top' ? undefined : StyleSheet.absoluteFillObject,
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var react_native_1 = require("react-native");
+var native_1 = __importDefault(require("@emotion/native"));
+var Container = (0, native_1.default)(react_native_1.Animated.View)(function (_a) {
+    var theme = _a.theme, edge = _a.edge;
+    return ({
+        backgroundColor: theme.panel.backgroundColor,
+        borderTopWidth: edge === 'top' ? theme.panel.borderWidth : undefined,
+        borderStartWidth: edge === 'left' ? theme.panel.borderWidth : undefined,
+        borderEndWidth: edge === 'right' ? theme.panel.borderWidth : undefined,
+        borderColor: theme.panel.borderColor,
+    });
+});
+var Panel = function (_a) {
+    var edge = _a.edge, children = _a.children, style = _a.style;
+    var containerStyle = react_native_1.StyleSheet.flatten([
+        edge === 'top' ? undefined : react_native_1.StyleSheet.absoluteFillObject,
         style,
     ]);
-    return (React.createElement(Container, { edge: edge, style: containerStyle }, children));
+    return (react_1.default.createElement(Container, { edge: edge, style: containerStyle }, children));
 };
-export default React.memo(Panel);
+exports.default = react_1.default.memo(Panel);

package/dist/preview/components/OnDeviceUI/absolute-positioned-keyboard-aware-view.js

@@ -1,10 +1,17 @@
-import React from 'react';
-import { View, StyleSheet } from 'react-native';
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var react_native_1 = require("react-native");
 // Android changes screen size when keyboard opens.
 // To avoid issues we use absolute positioned element with predefined screen size
-const AbsolutePositionedKeyboardAwareView = ({ onLayout, previewDimensions: { width, height }, children, }) => {
-    const onLayoutHandler = ({ nativeEvent }) => {
-        const { height: layoutHeight, width: layoutWidth } = nativeEvent.layout;
+var AbsolutePositionedKeyboardAwareView = function (_a) {
+    var onLayout = _a.onLayout, _b = _a.previewDimensions, width = _b.width, height = _b.height, children = _a.children;
+    var onLayoutHandler = function (_a) {
+        var nativeEvent = _a.nativeEvent;
+        var _b = nativeEvent.layout, layoutHeight = _b.height, layoutWidth = _b.width;
         if (layoutHeight !== height || layoutWidth !== width) {
             onLayout({
                 height: layoutHeight,
@@ -12,13 +19,13 @@ const AbsolutePositionedKeyboardAwareView = ({ onLayout, previewDimensions: { wi
             });
         }
     };
-    return (React.createElement(View, { style: styles.container, onLayout: onLayoutHandler },
-        React.createElement(View, { style: width === 0
+    return (react_1.default.createElement(react_native_1.View, { style: styles.container, onLayout: onLayoutHandler },
+        react_1.default.createElement(react_native_1.View, { style: width === 0
                 ? styles.container
-                : [styles.absolute, { position: 'absolute', width, height }] }, children)));
+                : [styles.absolute, { position: 'absolute', width: width, height: height }] }, children)));
 };
-const styles = StyleSheet.create({
+var styles = react_native_1.StyleSheet.create({
     absolute: { position: 'absolute' },
     container: { flex: 1 },
 });
-export default React.memo(AbsolutePositionedKeyboardAwareView);
+exports.default = react_1.default.memo(AbsolutePositionedKeyboardAwareView);

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

@@ -1,28 +1,37 @@
-import React from 'react';
-import { addons } from '@storybook/addons';
-import { useSelectedAddon, useStoryContext } from '../../../../hooks';
-import AddonsList from './List';
-import AddonWrapper from './Wrapper';
-import { Box } from '../../Shared/layout';
-import styled from '@emotion/native';
-const Text = styled.Text(({ theme }) => ({
-    marginTop: theme.tokens.spacing4,
-}));
-const Addons = ({ active }) => {
-    const panels = addons.getElements('panel');
-    const [addonSelected, setAddonSelected] = useSelectedAddon(Object.keys(panels)[0]);
-    const context = useStoryContext();
-    const id = context === null || context === void 0 ? void 0 : context.id;
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var addons_1 = require("@storybook/addons");
+var hooks_1 = require("../../../../hooks");
+var List_1 = __importDefault(require("./List"));
+var Wrapper_1 = __importDefault(require("./Wrapper"));
+var layout_1 = require("../../Shared/layout");
+var native_1 = __importDefault(require("@emotion/native"));
+var Text = native_1.default.Text(function (_a) {
+    var theme = _a.theme;
+    return ({
+        marginTop: theme.tokens.spacing4,
+    });
+});
+var Addons = function (_a) {
+    var active = _a.active;
+    var panels = addons_1.addons.getElements('panel');
+    var _b = (0, hooks_1.useSelectedAddon)(Object.keys(panels)[0]), addonSelected = _b[0], setAddonSelected = _b[1];
+    var context = (0, hooks_1.useStoryContext)();
+    var id = context === null || context === void 0 ? void 0 : context.id;
     if (!id) {
-        return (React.createElement(Box, { alignItems: "center", justifyContent: "center" },
-            React.createElement(Text, null, "No Story Selected")));
+        return (react_1.default.createElement(layout_1.Box, { alignItems: "center", justifyContent: "center" },
+            react_1.default.createElement(Text, null, "No Story Selected")));
     }
     if (Object.keys(panels).length === 0) {
-        return (React.createElement(Box, { alignItems: "center", justifyContent: "center" },
-            React.createElement(Text, null, "No addons loaded.")));
+        return (react_1.default.createElement(layout_1.Box, { alignItems: "center", justifyContent: "center" },
+            react_1.default.createElement(Text, null, "No addons loaded.")));
     }
-    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 })));
+    return (react_1.default.createElement(layout_1.Box, { flex: true },
+        react_1.default.createElement(List_1.default, { onPressAddon: setAddonSelected, panels: panels, addonSelected: active ? addonSelected : null }),
+        react_1.default.createElement(Wrapper_1.default, { addonSelected: active ? addonSelected : null, panels: panels })));
 };
-export default React.memo(Addons);
+exports.default = react_1.default.memo(Addons);

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

@@ -1,7 +1,24 @@
-import React from 'react';
-import styled from '@emotion/native';
-import { Animated, Easing, StyleSheet, View } from 'react-native';
-import { ANIMATION_DURATION_TRANSITION } from '../../../../constants';
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AddonsSkeleton = void 0;
+var react_1 = __importDefault(require("react"));
+var native_1 = __importDefault(require("@emotion/native"));
+var react_native_1 = require("react-native");
+var constants_1 = require("../../../../constants");
 /**
  * Component that mimics the addons panel.
  *
@@ -10,50 +27,61 @@ import { ANIMATION_DURATION_TRANSITION } from '../../../../constants';
  * on the story content rather than become distracted by the addons UI in an
  * already small view.
  */
-export const AddonsSkeleton = React.memo(function AddonsSkeleton({ visible }) {
-    const progress = React.useRef(new Animated.Value(visible ? 1 : 0));
-    React.useEffect(() => {
-        Animated.timing(progress.current, {
+exports.AddonsSkeleton = react_1.default.memo(function AddonsSkeleton(_a) {
+    var visible = _a.visible;
+    var progress = react_1.default.useRef(new react_native_1.Animated.Value(visible ? 1 : 0));
+    react_1.default.useEffect(function () {
+        react_native_1.Animated.timing(progress.current, {
             toValue: visible ? 1 : 0,
-            duration: ANIMATION_DURATION_TRANSITION,
+            duration: constants_1.ANIMATION_DURATION_TRANSITION,
             useNativeDriver: true,
-            easing: Easing.inOut(Easing.cubic),
+            easing: react_native_1.Easing.inOut(react_native_1.Easing.cubic),
         }).start();
     }, [visible]);
-    return (React.createElement(AddonsSkeletonContainer, { pointerEvents: "none", opacity: progress.current },
-        React.createElement(TabsSkeleton, null),
-        React.createElement(AddonsContentSkeleton, null)));
+    return (react_1.default.createElement(AddonsSkeletonContainer, { pointerEvents: "none", opacity: progress.current },
+        react_1.default.createElement(TabsSkeleton, null),
+        react_1.default.createElement(AddonsContentSkeleton, null)));
 });
-const TabSkeleton = styled.View(({ theme, active }) => ({
-    opacity: active ? 1 : 0.5,
-    backgroundColor: active ? theme.tabs.activeBackgroundColor : theme.tokens.color.grey200,
-    borderRadius: theme.tokens.borderRadius.round,
-    width: active ? 100 : 70,
-    height: 30,
-    marginRight: 12,
-}));
-const BoxSkeleton = styled.View(({ theme, width, height }) => ({
-    backgroundColor: theme.tokens.color.blue200,
-    borderRadius: theme.tokens.borderRadius.large,
-    height,
-    width,
-}));
-function AddonsFieldSkeleton({ long = false }) {
-    return (React.createElement(View, { style: { marginBottom: 32 } },
-        React.createElement(BoxSkeleton, { width: 75, height: 10, marginBottom: 12 }),
-        React.createElement(BoxSkeleton, { width: long ? 200 : 120, height: 15 })));
+var TabSkeleton = native_1.default.View(function (_a) {
+    var theme = _a.theme, active = _a.active;
+    return ({
+        opacity: active ? 1 : 0.5,
+        backgroundColor: active ? theme.tabs.activeBackgroundColor : theme.tokens.color.grey200,
+        borderRadius: theme.tokens.borderRadius.round,
+        width: active ? 100 : 70,
+        height: 30,
+        marginRight: 12,
+    });
+});
+var BoxSkeleton = native_1.default.View(function (_a) {
+    var theme = _a.theme, width = _a.width, height = _a.height;
+    return ({
+        backgroundColor: theme.tokens.color.blue200,
+        borderRadius: theme.tokens.borderRadius.large,
+        height: height,
+        width: width,
+    });
+});
+function AddonsFieldSkeleton(_a) {
+    var _b = _a.long, long = _b === void 0 ? false : _b;
+    return (react_1.default.createElement(react_native_1.View, { style: { marginBottom: 32 } },
+        react_1.default.createElement(BoxSkeleton, { width: 75, height: 10, marginBottom: 12 }),
+        react_1.default.createElement(BoxSkeleton, { width: long ? 200 : 120, height: 15 })));
 }
 function AddonsContentSkeleton() {
-    return (React.createElement(React.Fragment, null,
-        React.createElement(AddonsFieldSkeleton, { long: true }),
-        React.createElement(AddonsFieldSkeleton, { long: true }),
-        React.createElement(AddonsFieldSkeleton, null),
-        React.createElement(AddonsFieldSkeleton, null)));
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(AddonsFieldSkeleton, { long: true }),
+        react_1.default.createElement(AddonsFieldSkeleton, { long: true }),
+        react_1.default.createElement(AddonsFieldSkeleton, null),
+        react_1.default.createElement(AddonsFieldSkeleton, null)));
 }
 function TabsSkeleton() {
-    return (React.createElement(View, { style: { flexDirection: 'row', marginBottom: 16 } },
-        React.createElement(TabSkeleton, null),
-        React.createElement(TabSkeleton, { active: true }),
-        React.createElement(TabSkeleton, null)));
+    return (react_1.default.createElement(react_native_1.View, { style: { flexDirection: 'row', marginBottom: 16 } },
+        react_1.default.createElement(TabSkeleton, null),
+        react_1.default.createElement(TabSkeleton, { active: true }),
+        react_1.default.createElement(TabSkeleton, null)));
 }
-const AddonsSkeletonContainer = styled(Animated.View)(({ theme }) => (Object.assign(Object.assign({}, StyleSheet.absoluteFillObject), { flex: 1, backgroundColor: theme.panel.backgroundColor, borderTopWidth: theme.panel.borderWidth, borderColor: theme.panel.borderColor, padding: theme.panel.paddingHorizontal, overflow: 'hidden' })));
+var AddonsSkeletonContainer = (0, native_1.default)(react_native_1.Animated.View)(function (_a) {
+    var theme = _a.theme;
+    return (__assign(__assign({}, react_native_1.StyleSheet.absoluteFillObject), { flex: 1, backgroundColor: theme.panel.backgroundColor, borderTopWidth: theme.panel.borderWidth, borderColor: theme.panel.borderColor, padding: theme.panel.paddingHorizontal, overflow: 'hidden' }));
+});

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

@@ -1,11 +1,17 @@
-import React from 'react';
-import { TabBar, TabButton } from '../../Shared/tabs';
-const AddonList = ({ panels, addonSelected, onPressAddon }) => {
-    const addonKeys = Object.keys(panels);
-    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()));
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var tabs_1 = require("../../Shared/tabs");
+var AddonList = function (_a) {
+    var panels = _a.panels, addonSelected = _a.addonSelected, onPressAddon = _a.onPressAddon;
+    var addonKeys = Object.keys(panels);
+    return (react_1.default.createElement(tabs_1.TabBar, { scrollable: true }, addonKeys.map(function (id) {
+        var title = panels[id].title;
+        var resolvedTitle = typeof title === 'function' ? title() : title;
+        return (react_1.default.createElement(tabs_1.TabButton, { active: id === addonSelected, key: id, id: id, onPress: function () { return onPressAddon(id); } }, resolvedTitle.toUpperCase()));
     })));
 };
-export default React.memo(AddonList);
+exports.default = react_1.default.memo(AddonList);

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

@@ -1,22 +1,31 @@
-import React from 'react';
-import { ScrollView } from 'react-native';
-import styled from '@emotion/native';
-import { useTheme, useUpdateOnStoryChanged } from '../../../../hooks';
-const Container = styled.View(({ selected }) => ({
-    display: selected ? 'flex' : 'none',
-    flex: 1,
-}));
-const Wrapper = ({ panels, addonSelected }) => {
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var react_native_1 = require("react-native");
+var native_1 = __importDefault(require("@emotion/native"));
+var hooks_1 = require("../../../../hooks");
+var Container = native_1.default.View(function (_a) {
+    var selected = _a.selected;
+    return ({
+        display: selected ? 'flex' : 'none',
+        flex: 1,
+    });
+});
+var Wrapper = function (_a) {
+    var panels = _a.panels, addonSelected = _a.addonSelected;
     // Force a re-render when the current story changes, to ensure that the addon
     // panels state is not desynced.
-    useUpdateOnStoryChanged();
-    const theme = useTheme();
-    const addonKeys = Object.keys(panels);
-    const content = addonKeys.map((id) => {
-        const selected = addonSelected === id;
-        return (React.createElement(Container, { key: id, selected: selected },
-            React.createElement(ScrollView, { contentContainerStyle: { padding: theme.panel.paddingHorizontal } }, panels[id].render({ active: selected, key: id }))));
+    (0, hooks_1.useUpdateOnStoryChanged)();
+    var theme = (0, hooks_1.useTheme)();
+    var addonKeys = Object.keys(panels);
+    var content = addonKeys.map(function (id) {
+        var selected = addonSelected === id;
+        return (react_1.default.createElement(Container, { key: id, selected: selected },
+            react_1.default.createElement(react_native_1.ScrollView, { contentContainerStyle: { padding: theme.panel.paddingHorizontal } }, panels[id].render({ active: selected, key: id }))));
     });
-    return React.createElement(React.Fragment, null, content);
+    return react_1.default.createElement(react_1.default.Fragment, null, content);
 };
-export default React.memo(Wrapper);
+exports.default = react_1.default.memo(Wrapper);