@storybook/react-native 6.5.3 → 6.5.4

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

@@ -1 +1,8 @@
-export { default } from './Addons';
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var Addons_1 = require("./Addons");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Addons_1).default; } });

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

@@ -1,26 +1,29 @@
-import { I18nManager } from 'react-native';
-import { SIDEBAR, CANVAS, ADDONS } from './navigation/constants';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getPreviewShadowStyle = exports.getPreviewStyle = exports.getAddonPanelPosition = exports.getSidebarPanelPosition = void 0;
+var react_native_1 = require("react-native");
+var constants_1 = require("./navigation/constants");
 // Factor that will flip the animation orientation in RTL locales.
-const RTL_SCALE = I18nManager.isRTL ? -1 : 1;
+var RTL_SCALE = react_native_1.I18nManager.isRTL ? -1 : 1;
 // Percentage to scale the preview area by when opening a panel.
-const PREVIEW_SCALE = 0.3;
+var PREVIEW_SCALE = 0.3;
 // Percentage to scale the preview area by when opening a panel, on wide screens.
-const PREVIEW_SCALE_WIDE = 0.7;
+var PREVIEW_SCALE_WIDE = 0.7;
 // Percentage to shrink the visible preview by, without affecting the panel size.
-const PREVIEW_SCALE_SHRINK = 0.9;
-const SCALE_OFFSET = 0.025;
-const TRANSLATE_Y_OFFSET = 12;
-const panelWidth = (width, wide) => {
-    const scale = wide ? PREVIEW_SCALE_WIDE : PREVIEW_SCALE;
+var PREVIEW_SCALE_SHRINK = 0.9;
+var SCALE_OFFSET = 0.025;
+var TRANSLATE_Y_OFFSET = 12;
+var panelWidth = function (width, wide) {
+    var scale = wide ? PREVIEW_SCALE_WIDE : PREVIEW_SCALE;
     return width * (1 - scale - SCALE_OFFSET);
 };
-export const getSidebarPanelPosition = (animatedValue, previewWidth, wide) => {
+var getSidebarPanelPosition = function (animatedValue, previewWidth, wide) {
     return [
         {
             transform: [
                 {
                     translateX: animatedValue.interpolate({
-                        inputRange: [SIDEBAR, CANVAS],
+                        inputRange: [constants_1.SIDEBAR, constants_1.CANVAS],
                         outputRange: [0, (-panelWidth(previewWidth, wide) - 1) * RTL_SCALE],
                     }),
                 },
@@ -29,13 +32,14 @@ export const getSidebarPanelPosition = (animatedValue, previewWidth, wide) => {
         },
     ];
 };
-export const getAddonPanelPosition = (animatedValue, previewWidth, wide) => {
+exports.getSidebarPanelPosition = getSidebarPanelPosition;
+var getAddonPanelPosition = function (animatedValue, previewWidth, wide) {
     return [
         {
             transform: [
                 {
                     translateX: animatedValue.interpolate({
-                        inputRange: [CANVAS, ADDONS],
+                        inputRange: [constants_1.CANVAS, constants_1.ADDONS],
                         outputRange: [
                             previewWidth * RTL_SCALE,
                             (previewWidth - panelWidth(previewWidth, wide)) * RTL_SCALE,
@@ -47,62 +51,66 @@ export const getAddonPanelPosition = (animatedValue, previewWidth, wide) => {
         },
     ];
 };
+exports.getAddonPanelPosition = getAddonPanelPosition;
 /**
  * Build the animated style for the preview container view.
  *
  * When the sidebar or addons panel is focused, the preview container is
  * scaled down and translated to the left (or right) of the panel.
  */
-export const getPreviewStyle = ({ animatedValue, previewDimensions: { width: previewWidth, height: previewHeight }, wide, insets, tabOpen, lastTabOpen, }) => {
-    const scale = (wide ? PREVIEW_SCALE_WIDE : PREVIEW_SCALE) * PREVIEW_SCALE_SHRINK;
-    const scaledPreviewWidth = previewWidth * scale;
-    const scaledPreviewHeight = previewHeight * scale;
+var getPreviewStyle = function (_a) {
+    var animatedValue = _a.animatedValue, _b = _a.previewDimensions, previewWidth = _b.width, previewHeight = _b.height, wide = _a.wide, insets = _a.insets, tabOpen = _a.tabOpen, lastTabOpen = _a.lastTabOpen;
+    var scale = (wide ? PREVIEW_SCALE_WIDE : PREVIEW_SCALE) * PREVIEW_SCALE_SHRINK;
+    var scaledPreviewWidth = previewWidth * scale;
+    var scaledPreviewHeight = previewHeight * scale;
     // Horizontally center the scaled preview in the available space beside the panel.
-    const nonPanelWidth = previewWidth - panelWidth(previewWidth, wide);
-    const translateXOffset = (nonPanelWidth - scaledPreviewWidth) / 2;
-    const translateX = (previewWidth / 2 - (previewWidth * scale) / 2 - translateXOffset) * RTL_SCALE;
+    var nonPanelWidth = previewWidth - panelWidth(previewWidth, wide);
+    var translateXOffset = (nonPanelWidth - scaledPreviewWidth) / 2;
+    var translateX = (previewWidth / 2 - (previewWidth * scale) / 2 - translateXOffset) * RTL_SCALE;
     // Translate the preview to the top edge of the screen, move it down by the
     // safe area inset, then by the preview Y offset.
-    const translateY = -(previewHeight / 2 - scaledPreviewHeight / 2) + insets.top + TRANSLATE_Y_OFFSET;
+    var translateY = -(previewHeight / 2 - scaledPreviewHeight / 2) + insets.top + TRANSLATE_Y_OFFSET;
     // Is navigation moving from one panel to another, skipping preview?
-    const skipPreview = lastTabOpen !== CANVAS && tabOpen !== CANVAS;
+    var skipPreview = lastTabOpen !== constants_1.CANVAS && tabOpen !== constants_1.CANVAS;
     return {
         transform: [
             {
                 translateX: animatedValue.interpolate({
-                    inputRange: [SIDEBAR, CANVAS, ADDONS],
+                    inputRange: [constants_1.SIDEBAR, constants_1.CANVAS, constants_1.ADDONS],
                     outputRange: [translateX, 0, -translateX],
                 }),
             },
             {
                 translateY: animatedValue.interpolate({
-                    inputRange: [SIDEBAR, CANVAS, ADDONS],
+                    inputRange: [constants_1.SIDEBAR, constants_1.CANVAS, constants_1.ADDONS],
                     outputRange: [translateY, skipPreview ? translateY : 0, translateY],
                 }),
             },
             {
                 scale: animatedValue.interpolate({
-                    inputRange: [SIDEBAR, CANVAS, ADDONS],
+                    inputRange: [constants_1.SIDEBAR, constants_1.CANVAS, constants_1.ADDONS],
                     outputRange: [scale, skipPreview ? scale : 1, scale],
                 }),
             },
         ],
     };
 };
+exports.getPreviewStyle = getPreviewStyle;
 /**
  * Build the animated shadow style for the preview.
  *
  * When the sidebar or addons panel are visible the scaled preview will have
  * a shadow, and when going to the preview tab the shadow will be invisible.
  */
-export const getPreviewShadowStyle = (animatedValue) => ({
+var getPreviewShadowStyle = function (animatedValue) { return ({
     elevation: 8,
     shadowColor: '#000',
     shadowOpacity: animatedValue.interpolate({
-        inputRange: [SIDEBAR, CANVAS, ADDONS],
+        inputRange: [constants_1.SIDEBAR, constants_1.CANVAS, constants_1.ADDONS],
         outputRange: [0.25, 0, 0.25],
     }),
     shadowRadius: 8,
     shadowOffset: { width: 0, height: 0 },
     overflow: 'visible',
-});
+}); };
+exports.getPreviewShadowStyle = getPreviewShadowStyle;

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

@@ -1 +1,8 @@
-export { default } from './OnDeviceUI';
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var OnDeviceUI_1 = require("./OnDeviceUI");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(OnDeviceUI_1).default; } });

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

@@ -1,44 +1,51 @@
-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 { useIsUIVisible } from '../../../../hooks';
-import { NavigationBar } from './NavigationBar';
-import { VisibilityButton, AddonsSplitButton } from './NavigationButton';
-const SWIPE_CONFIG = {
+"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 react_native_safe_area_context_1 = require("react-native-safe-area-context");
+var react_native_swipe_gestures_1 = __importDefault(require("react-native-swipe-gestures"));
+var hooks_1 = require("../../../../hooks");
+var NavigationBar_1 = require("./NavigationBar");
+var NavigationButton_1 = require("./NavigationButton");
+var SWIPE_CONFIG = {
     velocityThreshold: 0.2,
     directionalOffsetThreshold: 80,
 };
-const navStyle = {
+var navStyle = {
     position: 'absolute',
     left: 0,
     right: 0,
     bottom: 0,
 };
-const Navigation = ({ tabOpen, onChangeTab, onLayout }) => {
-    const insets = useSafeAreaInsets();
-    const handleSwipeLeft = () => {
+var Navigation = function (_a) {
+    var tabOpen = _a.tabOpen, onChangeTab = _a.onChangeTab, onLayout = _a.onLayout;
+    var insets = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
+    var handleSwipeLeft = function () {
         if (tabOpen < 1) {
             onChangeTab(tabOpen + 1);
         }
     };
-    const handleSwipeRight = () => {
+    var handleSwipeRight = function () {
         if (tabOpen > -1) {
             onChangeTab(tabOpen - 1);
         }
     };
-    const [isUIVisible] = useIsUIVisible();
-    return (React.createElement(View, { style: navStyle, onLayout: onLayout },
-        React.createElement(View, null, isUIVisible && (React.createElement(GestureRecognizer, { onSwipeLeft: handleSwipeLeft, onSwipeRight: handleSwipeRight, config: SWIPE_CONFIG },
-            React.createElement(NavigationBar, { index: tabOpen, onPress: onChangeTab, style: { paddingBottom: insets.bottom } })))),
-        React.createElement(NavigationShortcuts, null,
-            React.createElement(VisibilityButton, null),
-            React.createElement(AddonsSplitButton, null))));
+    var isUIVisible = (0, hooks_1.useIsUIVisible)()[0];
+    return (react_1.default.createElement(react_native_1.View, { style: navStyle, onLayout: onLayout },
+        react_1.default.createElement(react_native_1.View, null, isUIVisible && (react_1.default.createElement(react_native_swipe_gestures_1.default, { onSwipeLeft: handleSwipeLeft, onSwipeRight: handleSwipeRight, config: SWIPE_CONFIG },
+            react_1.default.createElement(NavigationBar_1.NavigationBar, { index: tabOpen, onPress: onChangeTab, style: { paddingBottom: insets.bottom } })))),
+        react_1.default.createElement(NavigationShortcuts, null,
+            react_1.default.createElement(NavigationButton_1.VisibilityButton, null),
+            react_1.default.createElement(NavigationButton_1.AddonsSplitButton, null))));
 };
-export default React.memo(Navigation);
-function NavigationShortcuts({ children }) {
-    const insets = useSafeAreaInsets();
-    return (React.createElement(View, { style: {
+exports.default = react_1.default.memo(Navigation);
+function NavigationShortcuts(_a) {
+    var children = _a.children;
+    var insets = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
+    return (react_1.default.createElement(react_native_1.View, { style: {
             zIndex: 100,
             alignSelf: 'center',
             justifyContent: 'center',

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

@@ -1,14 +1,26 @@
-import React from 'react';
-import styled from '@emotion/native';
-import { SIDEBAR, CANVAS, 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.Sidebar", id: SIDEBAR, active: index === SIDEBAR }, "SIDEBAR"),
-    React.createElement(TabButton, { onPress: onPress, testID: "BottomMenu.Canvas", id: CANVAS, active: index === CANVAS }, "CANVAS"),
-    React.createElement(TabButton, { onPress: onPress, testID: "BottomMenu.Addons", id: ADDONS, active: index === ADDONS }, "ADDONS"))));
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavigationBar = void 0;
+var react_1 = __importDefault(require("react"));
+var native_1 = __importDefault(require("@emotion/native"));
+var constants_1 = require("./constants");
+var tabs_1 = require("../../Shared/tabs");
+var NavigationTabBar = (0, native_1.default)(tabs_1.TabBar)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        paddingHorizontal: theme.tokens.spacing2,
+        backgroundColor: theme.navigation.backgroundColor,
+        borderColor: theme.navigation.borderColor,
+        borderTopWidth: theme.navigation.borderWidth,
+    });
+});
+exports.NavigationBar = react_1.default.memo(function (_a) {
+    var index = _a.index, onPress = _a.onPress, style = _a.style;
+    return (react_1.default.createElement(NavigationTabBar, { style: style },
+        react_1.default.createElement(tabs_1.TabButton, { onPress: onPress, testID: "BottomMenu.Sidebar", id: constants_1.SIDEBAR, active: index === constants_1.SIDEBAR }, "SIDEBAR"),
+        react_1.default.createElement(tabs_1.TabButton, { onPress: onPress, testID: "BottomMenu.Canvas", id: constants_1.CANVAS, active: index === constants_1.CANVAS }, "CANVAS"),
+        react_1.default.createElement(tabs_1.TabButton, { onPress: onPress, testID: "BottomMenu.Addons", id: constants_1.ADDONS, active: index === constants_1.ADDONS }, "ADDONS")));
+});

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

@@ -1,20 +1,29 @@
-import React from 'react';
-import { TouchableWithoutFeedback } from 'react-native';
-import { useIsSplitPanelVisible, useIsUIVisible } from '../../../../hooks';
-import { Icon } from '../../Shared/icons';
-import { Box } from '../../Shared/layout';
-const hitSlop = { top: 5, left: 5, right: 5, bottom: 5 };
-function NavigationButton({ iconName, inverseIconName, active, toggle }) {
-    return (React.createElement(TouchableWithoutFeedback, { onPress: toggle, hitSlop: hitSlop },
-        React.createElement(Box, { marginHorizontal: 8 },
-            React.createElement(Icon, { flex: 1, background: true, name: inverseIconName, opacity: 0.8, pointerEvents: "none" },
-                React.createElement(Icon, { name: iconName, opacity: active ? 0.6 : 0.25 })))));
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AddonsSplitButton = exports.VisibilityButton = void 0;
+var react_1 = __importDefault(require("react"));
+var react_native_1 = require("react-native");
+var hooks_1 = require("../../../../hooks");
+var icons_1 = require("../../Shared/icons");
+var layout_1 = require("../../Shared/layout");
+var hitSlop = { top: 5, left: 5, right: 5, bottom: 5 };
+function NavigationButton(_a) {
+    var iconName = _a.iconName, inverseIconName = _a.inverseIconName, active = _a.active, toggle = _a.toggle;
+    return (react_1.default.createElement(react_native_1.TouchableWithoutFeedback, { onPress: toggle, hitSlop: hitSlop },
+        react_1.default.createElement(layout_1.Box, { marginHorizontal: 8 },
+            react_1.default.createElement(icons_1.Icon, { flex: 1, background: true, name: inverseIconName, opacity: 0.8, pointerEvents: "none" },
+                react_1.default.createElement(icons_1.Icon, { name: iconName, opacity: active ? 0.6 : 0.25 })))));
 }
-export function VisibilityButton() {
-    const [active, toggle] = useIsUIVisible();
-    return (React.createElement(NavigationButton, { iconName: "layout-bottom", inverseIconName: "layout-bottom-inverse", active: active, toggle: () => toggle() }));
+function VisibilityButton() {
+    var _a = (0, hooks_1.useIsUIVisible)(), active = _a[0], toggle = _a[1];
+    return (react_1.default.createElement(NavigationButton, { iconName: "layout-bottom", inverseIconName: "layout-bottom-inverse", active: active, toggle: function () { return toggle(); } }));
 }
-export function AddonsSplitButton() {
-    const [active, toggle] = useIsSplitPanelVisible();
-    return (React.createElement(NavigationButton, { iconName: "layout-split", inverseIconName: "layout-split-inverse", active: active, toggle: () => toggle() }));
+exports.VisibilityButton = VisibilityButton;
+function AddonsSplitButton() {
+    var _a = (0, hooks_1.useIsSplitPanelVisible)(), active = _a[0], toggle = _a[1];
+    return (react_1.default.createElement(NavigationButton, { iconName: "layout-split", inverseIconName: "layout-split-inverse", active: active, toggle: function () { return toggle(); } }));
 }
+exports.AddonsSplitButton = AddonsSplitButton;

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

@@ -1,3 +1,6 @@
-export const SIDEBAR = -1;
-export const CANVAS = 0;
-export const ADDONS = 1;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ADDONS = exports.CANVAS = exports.SIDEBAR = void 0;
+exports.SIDEBAR = -1;
+exports.CANVAS = 0;
+exports.ADDONS = 1;

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

@@ -1 +1,8 @@
-export { default } from './Navigation';
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var Navigation_1 = require("./Navigation");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Navigation_1).default; } });

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

@@ -1,3 +1,15 @@
+"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 __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)
@@ -9,10 +21,15 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React from 'react';
-import { Image, ImageBackground } from 'react-native';
-import styled from '@emotion/native';
-const iconSources = {
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Icon = void 0;
+var react_1 = __importDefault(require("react"));
+var react_native_1 = require("react-native");
+var native_1 = __importDefault(require("@emotion/native"));
+var iconSources = {
     grid: {
         uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAALdQTFRFAAAAIJ//Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqj9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Haf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqb9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqj9Hqf9Hmz01QAAAD10Uk5TAAAEGjNefYqLXDUFAjSY0e79/9KZAghmyMkBQbz6vUIBBnD1cQcOo6Sp76qBePTHVOoC+RQTX4mCDZsBMmX5zDcAAAHcSURBVHic7ZrrcoIwEIVX8W5VpAiUaq33GyJqrfby/s9VacsCDojUJNNx9vzCTLLfZJdkHM4ChJTJSrl8oVj6s4qFckWqZiBed7V6Q24qV6op36uVVgxC042rAQh60LUIhPnY7rBCuOo8dZ9PGb3+gCXC1WA4CjPGE9YIV9NxiNHmwVCUWYAy4rIPV1PMmNnnxVCUoVf9LvOa+xp0f89HqCDzhbWMle3NsuPnWIt5MF7757zogfOxcqLOEGrtzVufm6U5Kz9iR3eHNgYObNWXc4svhQDs1C0GNTbHgZp/l6hnt5ECApqKQZu1471b93O1S1h6OQR2fsbqGcg28JeTtDIFBBwM28iCJON7lZSsVBAN3zFZCpRkkbgwDQQWWJQcvOK2LLYQCwPnoYDPS7aQJQYuwJ4/ZA8l/pASQQhCEIIQhCAEIQhBghB7nSj839xMnmtHQriJIAS5IYiQw3g7dxdBCEIQghCEIAQhyH+ECPmMLsQQKOMzY2vjgIHLYkwaIXaTEOMM+FuAIMbMhJYIW1aIwczaKj9EWuVCTH++7Quml8Qev0aMnl+qtxkfxnu4cYXLXiYhhpg2H4AP1g1L7a55ygDGrVdGZOuVKwFNZN/KSp/XtsPVpOpJ0C+2naE/XA0rpwAAAABJRU5ErkJggg==',
     },
@@ -38,10 +55,11 @@ const iconSources = {
         uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAEaSURBVHgB7ZntDYJADIaLcQBGYARHgAl0I0YQJ8BNdAPZ4BzBDWov8ENrkYuJtJA+SUO4D/K+1yaQAuA4jmMaRCwpjhQB5+NG0VIU8Cu0OR+EaxM15GM6szHxdLlQ7MAGHUWVZdmDT2xGNtRgR3wkaqmliY8MYF93AWwSs3B9HZAyUINdDnxAMmCpdDh7PiCVEIJhqITeNG9g4bgBbdyANm5AGzegzeINbKcW8Ff33Ex92ngJaeMGtHED2rgBbdZv4FtbzwKSgTu7V2uz0OHxPlCXsqlhzdWgkQXsm8uBaWlTNpZChzgIp/EXBuElyu38IvUhDdqjkbSus70+LKwoTqBP1CCKT4KyUVCcsf/tMxcB+zIuwXEcxzRPpfGo9y3IYogAAAAASUVORK5CYII=',
     },
 };
-const StyledImage = styled(Image)();
-const StyledImageBackground = styled(ImageBackground)();
-export function Icon(_a) {
-    var { name, background = false } = _a, props = __rest(_a, ["name", "background"]);
-    const IconComponent = background ? StyledImageBackground : StyledImage;
-    return (React.createElement(IconComponent, Object.assign({ source: Object.assign(Object.assign({}, iconSources[name]), { width: 16, height: 16 }) }, props)));
+var StyledImage = (0, native_1.default)(react_native_1.Image)();
+var StyledImageBackground = (0, native_1.default)(react_native_1.ImageBackground)();
+function Icon(_a) {
+    var name = _a.name, _b = _a.background, background = _b === void 0 ? false : _b, props = __rest(_a, ["name", "background"]);
+    var IconComponent = background ? StyledImageBackground : StyledImage;
+    return (react_1.default.createElement(IconComponent, __assign({ source: __assign(__assign({}, iconSources[name]), { width: 16, height: 16 }) }, props)));
 }
+exports.Icon = Icon;

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

@@ -1,3 +1,15 @@
+"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 __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)
@@ -9,7 +21,12 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import styled from '@emotion/native';
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Box = void 0;
+var native_1 = __importDefault(require("@emotion/native"));
 /**
  * A general (flex)box layout component that accepts props for flexbox layout
  * styles, such as `flex`, `alignItems`, `marginVertical`, etc.
@@ -21,7 +38,7 @@ import styled from '@emotion/native';
  * </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));
+exports.Box = native_1.default.View(function (_a) {
+    var flex = _a.flex, layoutProps = __rest(_a, ["flex"]);
+    return (__assign({ flex: flex === true ? 1 : flex === false ? 0 : flex }, layoutProps));
 });

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

@@ -1,34 +1,48 @@
-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)));
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TabBar = exports.TabButton = void 0;
+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 TabButtonText = native_1.default.Text(function (_a) {
+    var theme = _a.theme, active = _a.active;
+    return ({
+        color: active ? theme.tabs.activeTextColor : theme.tabs.inactiveTextColor,
+        paddingVertical: theme.tabs.paddingVertical,
+        paddingHorizontal: theme.tabs.paddingHorizontal,
+        fontSize: theme.tabs.fontSize,
+        fontWeight: theme.tabs.fontWeight,
+    });
 });
-export const TabBar = React.memo(({ scrollable = false, style, children }) => {
-    const theme = useTheme();
+var hitSlop = { top: 8, left: 0, right: 0, bottom: 20 };
+var TabButtonTouchable = native_1.default.TouchableOpacity(function (_a) {
+    var theme = _a.theme, active = _a.active;
+    return ({
+        borderWidth: theme.tabs.borderWidth,
+        borderColor: active ? theme.tabs.activeBorderColor : theme.tabs.inactiveBorderColor,
+        borderRadius: theme.tabs.borderRadius,
+        backgroundColor: active ? theme.tabs.activeBackgroundColor : theme.tabs.inactiveBackgroundColor,
+    });
+});
+exports.TabButton = react_1.default.memo(function (_a) {
+    var onPress = _a.onPress, id = _a.id, active = _a.active, children = _a.children, testID = _a.testID;
+    return (react_1.default.createElement(TabButtonTouchable, { active: active, testID: testID, onPress: function () { return onPress(id); }, activeOpacity: 0.8, hitSlop: hitSlop },
+        react_1.default.createElement(TabButtonText, { active: active }, children)));
+});
+exports.TabBar = react_1.default.memo(function (_a) {
+    var _b = _a.scrollable, scrollable = _b === void 0 ? false : _b, style = _a.style, children = _a.children;
+    var theme = (0, hooks_1.useTheme)();
     if (scrollable) {
-        children = (React.createElement(ScrollView, { showsHorizontalScrollIndicator: false, horizontal: true, contentContainerStyle: { paddingHorizontal: theme.tokens.spacing2 } }, children));
+        children = (react_1.default.createElement(react_native_1.ScrollView, { showsHorizontalScrollIndicator: false, horizontal: true, contentContainerStyle: { paddingHorizontal: theme.tokens.spacing2 } }, children));
     }
-    return (React.createElement(View, { style: style },
-        React.createElement(TabBarContainer, null, children)));
+    return (react_1.default.createElement(react_native_1.View, { style: style },
+        react_1.default.createElement(TabBarContainer, null, children)));
 });
-const TabBarContainer = styled.View({
+var TabBarContainer = native_1.default.View({
     flexDirection: 'row',
     paddingVertical: 6,
     justifyItems: 'center',

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

@@ -1,4 +1,7 @@
-const tokens = {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.darkTheme = exports.theme = void 0;
+var tokens = {
     spacing1: 4,
     spacing2: 8,
     spacing3: 12,
@@ -44,19 +47,19 @@ const tokens = {
         },
     },
 };
-const text = {
+var text = {
     primaryColor: tokens.color.navy,
     secondaryColor: tokens.color.grey700,
     linkColor: '#0000ff',
 };
-const textOnDark = {
+var textOnDark = {
     primaryColor: tokens.color.white,
     secondaryColor: tokens.color.grey200,
     linkColor: tokens.color.blue600,
 };
-export const theme = {
-    tokens,
-    text,
+exports.theme = {
+    tokens: tokens,
+    text: text,
     backgroundColor: tokens.color.white,
     preview: {
         containerBackgroundColor: tokens.color.white,
@@ -185,8 +188,8 @@ export const theme = {
         },
     },
 };
-export const darkTheme = {
-    tokens,
+exports.darkTheme = {
+    tokens: tokens,
     text: textOnDark,
     backgroundColor: tokens.color.offBlack,
     preview: {