@storybook/react-native 6.5.5-alpha.0 → 6.5.5-alpha.1

package/dist/hooks.d.ts

@@ -1,15 +1,14 @@
 import type { StoryContext } from '@storybook/csf';
-import type { Theme } from './preview/components/Shared/theme';
 import type { ReactNativeFramework } from './types/types-6.0';
 import { StoryIndexEntry } from '@storybook/client-api';
 /**
  * Hook that returns a function to set the current story context.
  */
-export declare function useSetStoryContext(): (args_0: StoryContext<ReactNativeFramework, import("@storybook/csf").Args> | ((prev: StoryContext<ReactNativeFramework, import("@storybook/csf").Args>) => StoryContext<ReactNativeFramework, import("@storybook/csf").Args>)) => void;
+export declare function useSetStoryContext(): (args_0: StoryContext<ReactNativeFramework> | ((prev: StoryContext<ReactNativeFramework>) => StoryContext<ReactNativeFramework>)) => void;
 /**
  * Hook to read the current story context.
  */
-export declare function useStoryContext(): StoryContext<ReactNativeFramework, import("@storybook/csf").Args>;
+export declare function useStoryContext(): StoryContext<ReactNativeFramework>;
 /**
  * Hook that reads the value of a specific story context parameter.
  */
@@ -30,7 +29,7 @@ export declare function useUpdateOnStoryChanged(): void;
 /**
  * Hook that gets the current theme values.
  */
-export declare function useTheme(): Theme;
+export declare function useTheme(): import("@emotion/react").Theme;
 /**
  * A boolean atom creator for an atom that can only be toggled between
  * true/false.

package/dist/hooks.js

@@ -26,7 +26,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useSelectedAddon = exports.syncExternalUI = exports.useIsSplitPanelVisible = exports.useIsUIVisible = exports.atomWithToggle = exports.useTheme = exports.useUpdateOnStoryChanged = exports.useIsChildSelected = exports.useIsStorySectionSelected = exports.useIsStorySelected = exports.useStoryContextParam = exports.useStoryContext = exports.useSetStoryContext = void 0;
 var react_1 = __importStar(require("react"));
 var jotai_1 = require("jotai");
-var emotion_theming_1 = require("emotion-theming");
+var react_2 = require("@emotion/react");
 var storyContextAtom = (0, jotai_1.atom)(null);
 /**
  * Hook that returns a function to set the current story context.
@@ -95,7 +95,7 @@ exports.useUpdateOnStoryChanged = useUpdateOnStoryChanged;
  * Hook that gets the current theme values.
  */
 function useTheme() {
-    return (0, emotion_theming_1.useTheme)();
+    return (0, react_2.useTheme)();
 }
 exports.useTheme = useTheme;
 /**

package/dist/index.d.ts

@@ -16,6 +16,6 @@ export declare const clearDecorators: C['clearDecorators'];
 export declare const getStorybook: C['getStorybook'];
 export declare const raw: C['raw'];
 export declare const storiesOf: (kind: string, _module: NodeModule) => StoryApi<ReactNode>;
-export declare const getStorybookUI: (params?: Partial<import("./preview/View").Params>) => () => JSX.Element;
+export declare const getStorybookUI: (params?: Partial<import("./preview/View").Params>) => () => import("react/jsx-runtime").JSX.Element;
 export * from './types/types-6.0';
-export { theme, darkTheme } from './preview/components/Shared/theme';
+export { theme, darkTheme, Theme } from '@storybook/react-native-theming';

package/dist/index.js

@@ -40,6 +40,6 @@ __exportStar(require("./types/types-6.0"), exports);
 global.__STORYBOOK_STORY_STORE__ = {
     initializationPromise: (_a = clientApi.storyStore) === null || _a === void 0 ? void 0 : _a.initializationPromise,
 };
-var theme_1 = require("./preview/components/Shared/theme");
-Object.defineProperty(exports, "theme", { enumerable: true, get: function () { return theme_1.theme; } });
-Object.defineProperty(exports, "darkTheme", { enumerable: true, get: function () { return theme_1.darkTheme; } });
+var react_native_theming_1 = require("@storybook/react-native-theming");
+Object.defineProperty(exports, "theme", { enumerable: true, get: function () { return react_native_theming_1.theme; } });
+Object.defineProperty(exports, "darkTheme", { enumerable: true, get: function () { return react_native_theming_1.darkTheme; } });

package/dist/preview/View.d.ts

@@ -1,7 +1,6 @@
-/// <reference types="react" />
 import { StoryIndex, SelectionSpecifier } from '@storybook/store';
 import { StoryContext } from '@storybook/csf';
-import { Theme } from './components/Shared/theme';
+import { Theme } from '@storybook/react-native-theming';
 import type { ReactNativeFramework } from '../types/types-6.0';
 import { PreviewWeb } from '@storybook/preview-web';
 type StoryKind = string;
@@ -46,6 +45,6 @@ export declare class View {
     constructor(preview: PreviewWeb<ReactNativeFramework>);
     _getInitialStory: ({ initialSelection, shouldPersistSelection, }?: Partial<Params>) => Promise<SelectionSpecifier>;
     _getServerChannel: (params?: Partial<Params>) => import("@storybook/channels").Channel;
-    getStorybookUI: (params?: Partial<Params>) => () => JSX.Element;
+    getStorybookUI: (params?: Partial<Params>) => () => import("react/jsx-runtime").JSX.Element;
 }
 export {};

package/dist/preview/View.js

@@ -1,27 +1,4 @@
 "use strict";
-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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -63,15 +40,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.View = void 0;
-var react_1 = __importStar(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var async_storage_1 = __importDefault(require("@react-native-async-storage/async-storage"));
 var csf_1 = require("@storybook/csf");
 var addons_1 = require("@storybook/addons");
-var emotion_theming_1 = require("emotion-theming");
+var react_2 = require("@emotion/react");
 var react_native_safe_area_context_1 = require("react-native-safe-area-context");
 var hooks_1 = require("../hooks");
 var OnDeviceUI_1 = __importDefault(require("./components/OnDeviceUI"));
-var theme_1 = require("./components/Shared/theme");
+var react_native_theming_1 = require("@storybook/react-native-theming");
 var StoryView_1 = __importDefault(require("./components/StoryView"));
 var channel_websocket_1 = __importDefault(require("@storybook/channel-websocket"));
 var rn_host_detect_1 = __importDefault(require("./rn-host-detect"));
@@ -173,10 +151,7 @@ var View = /** @class */ (function () {
                 var setContext = (0, hooks_1.useSetStoryContext)();
                 var colorScheme = (0, react_native_1.useColorScheme)();
                 var _a = (0, react_1.useReducer)(function (x) { return x + 1; }, 0), forceUpdate = _a[1];
-                var appliedTheme = (0, react_1.useMemo)(function () {
-                    var _a;
-                    return (0, deepmerge_1.default)(colorScheme === 'dark' ? theme_1.darkTheme : theme_1.theme, (_a = params.theme) !== null && _a !== void 0 ? _a : {});
-                }, [colorScheme]);
+                var appliedTheme = (0, react_1.useMemo)(function () { var _a; return (0, deepmerge_1.default)(colorScheme === 'dark' ? react_native_theming_1.darkTheme : react_native_theming_1.theme, (_a = params.theme) !== null && _a !== void 0 ? _a : {}); }, [colorScheme]);
                 (0, react_1.useEffect)(function () {
                     self._setStory = function (newStory) {
                         setContext(newStory);
@@ -194,12 +169,10 @@ var View = /** @class */ (function () {
                     // eslint-disable-next-line react-hooks/exhaustive-deps
                 }, []);
                 if (onDeviceUI) {
-                    return (react_1.default.createElement(react_native_safe_area_context_1.SafeAreaProvider, null,
-                        react_1.default.createElement(emotion_theming_1.ThemeProvider, { theme: appliedTheme },
-                            react_1.default.createElement(OnDeviceUI_1.default, { storyIndex: self._storyIndex, tabOpen: params.tabOpen, shouldDisableKeyboardAvoidingView: params.shouldDisableKeyboardAvoidingView, keyboardAvoidingViewVerticalOffset: params.keyboardAvoidingViewVerticalOffset }))));
+                    return ((0, jsx_runtime_1.jsx)(react_native_safe_area_context_1.SafeAreaProvider, { children: (0, jsx_runtime_1.jsx)(react_2.ThemeProvider, { theme: appliedTheme, children: (0, jsx_runtime_1.jsx)(OnDeviceUI_1.default, { storyIndex: self._storyIndex, tabOpen: params.tabOpen, shouldDisableKeyboardAvoidingView: params.shouldDisableKeyboardAvoidingView, keyboardAvoidingViewVerticalOffset: params.keyboardAvoidingViewVerticalOffset }) }) }));
                 }
                 else {
-                    return react_1.default.createElement(StoryView_1.default, null);
+                    return (0, jsx_runtime_1.jsx)(StoryView_1.default, {});
                 }
             };
         };

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

@@ -8,5 +8,5 @@ interface OnDeviceUIProps {
     shouldDisableKeyboardAvoidingView?: boolean;
     keyboardAvoidingViewVerticalOffset?: number;
 }
-declare const _default: React.MemoExoticComponent<({ storyIndex, shouldDisableKeyboardAvoidingView, keyboardAvoidingViewVerticalOffset, tabOpen: initialTabOpen, }: OnDeviceUIProps) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ storyIndex, shouldDisableKeyboardAvoidingView, keyboardAvoidingViewVerticalOffset, tabOpen: initialTabOpen, }: OnDeviceUIProps) => import("react/jsx-runtime").JSX.Element>;
 export default _default;

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

@@ -38,6 +38,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.IS_EXPO = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
 var native_1 = __importDefault(require("@emotion/native"));
 var react_1 = __importStar(require("react"));
 var react_native_1 = require("react-native");
@@ -68,8 +69,7 @@ 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)));
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { style: [flex, containerStyle], children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [flex, style], children: children }) }));
 }
 var styles = react_native_1.StyleSheet.create({
     expoAndroidContainer: { paddingTop: react_native_1.StatusBar.currentHeight },
@@ -152,27 +152,12 @@ var OnDeviceUI = function (_a) {
     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_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_1.default.createElement(Addons_1.default, { active: tabOpen === constants_2.ADDONS })))),
-            react_1.default.createElement(navigation_1.default, { onLayout: measureNavigation, tabOpen: tabOpen, onChangeTab: handleToggleTab }))));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(Container, { children: [(0, jsx_runtime_1.jsx)(react_native_1.KeyboardAvoidingView, { enabled: !shouldDisableKeyboardAvoidingView || isPreviewInactive, behavior: IS_IOS ? 'padding' : null, keyboardVerticalOffset: keyboardVerticalOffset, style: flex, children: (0, jsx_runtime_1.jsxs)(absolute_positioned_keyboard_aware_view_1.default, { onLayout: setPreviewDimensions, previewDimensions: previewDimensions, children: [(0, jsx_runtime_1.jsxs)(react_native_1.Animated.View, { style: previewWrapperStyles, children: [(0, jsx_runtime_1.jsxs)(Preview, { style: safeAreaMargins, animatedValue: animatedValue.current, children: [(0, jsx_runtime_1.jsx)(StoryView_1.default, {}), isSplitPanelVisible ? ((0, jsx_runtime_1.jsxs)(Panel_1.default, { edge: "top", style: { flex: 1 }, children: [(0, jsx_runtime_1.jsx)(Addons_1.default, { active: true }), (0, jsx_runtime_1.jsx)(AddonsSkeleton_1.AddonsSkeleton, { visible: isPreviewInactive })] })) : null] }), isPreviewInactive ? ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: react_native_1.StyleSheet.absoluteFillObject, onPress: function () { return handleToggleTab(constants_2.CANVAS); } })) : null] }), (0, jsx_runtime_1.jsx)(Panel_1.default, { edge: "right", style: [
+                                    (0, animation_1.getSidebarPanelPosition)(animatedValue.current, previewDimensions.width, wide),
+                                    panelSafeAreaMargins,
+                                ], children: (0, jsx_runtime_1.jsx)(StoryListView_1.default, { storyIndex: storyIndex }) }), (0, jsx_runtime_1.jsx)(Panel_1.default, { edge: "left", style: [
+                                    (0, animation_1.getAddonPanelPosition)(animatedValue.current, previewDimensions.width, wide),
+                                    panelSafeAreaMargins,
+                                ], children: (0, jsx_runtime_1.jsx)(Addons_1.default, { active: tabOpen === constants_2.ADDONS }) })] }) }), (0, jsx_runtime_1.jsx)(navigation_1.default, { onLayout: measureNavigation, tabOpen: tabOpen, onChangeTab: handleToggleTab })] }) }));
 };
 exports.default = react_1.default.memo(OnDeviceUI);

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

@@ -5,5 +5,5 @@ interface PanelProps {
     style: StyleProp<Animated.AnimatedProps<ViewStyle>>;
     children: React.ReactNode;
 }
-declare const _default: React.MemoExoticComponent<({ edge, children, style }: PanelProps) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ edge, children, style }: PanelProps) => import("react/jsx-runtime").JSX.Element>;
 export default _default;

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

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = __importDefault(require("react"));
 var react_native_1 = require("react-native");
 var native_1 = __importDefault(require("@emotion/native"));
@@ -22,6 +23,6 @@ var Panel = function (_a) {
         edge === 'top' ? undefined : react_native_1.StyleSheet.absoluteFillObject,
         style,
     ]);
-    return (react_1.default.createElement(Container, { edge: edge, style: containerStyle }, children));
+    return ((0, jsx_runtime_1.jsx)(Container, { edge: edge, style: containerStyle, children: children }));
 };
 exports.default = react_1.default.memo(Panel);

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

@@ -8,5 +8,5 @@ type Props = {
     previewDimensions: PreviewDimens;
     children: ReactNode;
 };
-declare const _default: React.MemoExoticComponent<({ onLayout, previewDimensions: { width, height }, children, }: Props) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ onLayout, previewDimensions: { width, height }, children, }: Props) => import("react/jsx-runtime").JSX.Element>;
 export default _default;

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

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = __importDefault(require("react"));
 var react_native_1 = require("react-native");
 // Android changes screen size when keyboard opens.
@@ -19,10 +20,9 @@ var AbsolutePositionedKeyboardAwareView = function (_a) {
             });
         }
     };
-    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
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.container, onLayout: onLayoutHandler, children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: width === 0
                 ? styles.container
-                : [styles.absolute, { position: 'absolute', width: width, height: height }] }, children)));
+                : [styles.absolute, { position: 'absolute', width: width, height: height }], children: children }) }));
 };
 var styles = react_native_1.StyleSheet.create({
     absolute: { position: 'absolute' },

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

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

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

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = __importDefault(require("react"));
 var addons_1 = require("@storybook/addons");
 var hooks_1 = require("../../../../hooks");
@@ -23,15 +24,11 @@ var Addons = function (_a) {
     var context = (0, hooks_1.useStoryContext)();
     var id = context === null || context === void 0 ? void 0 : context.id;
     if (!id) {
-        return (react_1.default.createElement(layout_1.Box, { alignItems: "center", justifyContent: "center" },
-            react_1.default.createElement(Text, null, "No Story Selected")));
+        return ((0, jsx_runtime_1.jsx)(layout_1.Box, { alignItems: "center", justifyContent: "center", children: (0, jsx_runtime_1.jsx)(Text, { children: "No Story Selected" }) }));
     }
     if (Object.keys(panels).length === 0) {
-        return (react_1.default.createElement(layout_1.Box, { alignItems: "center", justifyContent: "center" },
-            react_1.default.createElement(Text, null, "No addons loaded.")));
+        return ((0, jsx_runtime_1.jsx)(layout_1.Box, { alignItems: "center", justifyContent: "center", children: (0, jsx_runtime_1.jsx)(Text, { children: "No addons loaded." }) }));
     }
-    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 })));
+    return ((0, jsx_runtime_1.jsxs)(layout_1.Box, { flex: true, children: [(0, jsx_runtime_1.jsx)(List_1.default, { onPressAddon: setAddonSelected, panels: panels, addonSelected: active ? addonSelected : null }), (0, jsx_runtime_1.jsx)(Wrapper_1.default, { addonSelected: active ? addonSelected : null, panels: panels })] }));
 };
 exports.default = react_1.default.memo(Addons);

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

@@ -15,6 +15,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AddonsSkeleton = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = __importDefault(require("react"));
 var native_1 = __importDefault(require("@emotion/native"));
 var react_native_1 = require("react-native");
@@ -38,9 +39,7 @@ exports.AddonsSkeleton = react_1.default.memo(function AddonsSkeleton(_a) {
             easing: react_native_1.Easing.inOut(react_native_1.Easing.cubic),
         }).start();
     }, [visible]);
-    return (react_1.default.createElement(AddonsSkeletonContainer, { pointerEvents: "none", opacity: progress.current },
-        react_1.default.createElement(TabsSkeleton, null),
-        react_1.default.createElement(AddonsContentSkeleton, null)));
+    return ((0, jsx_runtime_1.jsxs)(AddonsSkeletonContainer, { pointerEvents: "none", style: { opacity: progress.current }, children: [(0, jsx_runtime_1.jsx)(TabsSkeleton, {}), (0, jsx_runtime_1.jsx)(AddonsContentSkeleton, {})] }));
 });
 var TabSkeleton = native_1.default.View(function (_a) {
     var theme = _a.theme, active = _a.active;
@@ -54,32 +53,24 @@ var TabSkeleton = native_1.default.View(function (_a) {
     });
 });
 var BoxSkeleton = native_1.default.View(function (_a) {
-    var theme = _a.theme, width = _a.width, height = _a.height;
+    var theme = _a.theme, width = _a.width, height = _a.height, marginBottom = _a.marginBottom;
     return ({
         backgroundColor: theme.tokens.color.blue200,
         borderRadius: theme.tokens.borderRadius.large,
         height: height,
+        marginBottom: marginBottom,
         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 })));
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { marginBottom: 32 }, children: [(0, jsx_runtime_1.jsx)(BoxSkeleton, { width: 75, height: 10, marginBottom: 12 }), (0, jsx_runtime_1.jsx)(BoxSkeleton, { width: long ? 200 : 120, height: 15 })] }));
 }
 function AddonsContentSkeleton() {
-    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)));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(AddonsFieldSkeleton, { long: true }), (0, jsx_runtime_1.jsx)(AddonsFieldSkeleton, { long: true }), (0, jsx_runtime_1.jsx)(AddonsFieldSkeleton, {}), (0, jsx_runtime_1.jsx)(AddonsFieldSkeleton, {})] }));
 }
 function TabsSkeleton() {
-    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)));
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { flexDirection: 'row', marginBottom: 16 }, children: [(0, jsx_runtime_1.jsx)(TabSkeleton, {}), (0, jsx_runtime_1.jsx)(TabSkeleton, { active: true }), (0, jsx_runtime_1.jsx)(TabSkeleton, {})] }));
 }
 var AddonsSkeletonContainer = (0, native_1.default)(react_native_1.Animated.View)(function (_a) {
     var theme = _a.theme;

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

@@ -5,5 +5,5 @@ export interface Props {
     addonSelected: string;
     onPressAddon: (id: string) => void;
 }
-declare const _default: React.MemoExoticComponent<({ panels, addonSelected, onPressAddon }: Props) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ panels, addonSelected, onPressAddon }: Props) => import("react/jsx-runtime").JSX.Element>;
 export default _default;

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

@@ -3,15 +3,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
 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()));
-    })));
+    return ((0, jsx_runtime_1.jsx)(tabs_1.TabBar, { scrollable: true, children: addonKeys.map(function (id) {
+            var title = panels[id].title;
+            var resolvedTitle = typeof title === 'function' ? title() : title;
+            return ((0, jsx_runtime_1.jsx)(tabs_1.TabButton, { active: id === addonSelected, id: id, onPress: function () { return onPressAddon(id); }, children: resolvedTitle.toUpperCase() }, id));
+        }) }));
 };
 exports.default = react_1.default.memo(AddonList);

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

@@ -4,5 +4,5 @@ export interface Props {
     panels: Collection;
     addonSelected: string;
 }
-declare const _default: React.MemoExoticComponent<({ panels, addonSelected }: Props) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ panels, addonSelected }: Props) => import("react/jsx-runtime").JSX.Element>;
 export default _default;

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

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = __importDefault(require("react"));
 var react_native_1 = require("react-native");
 var native_1 = __importDefault(require("@emotion/native"));
@@ -23,9 +24,8 @@ var Wrapper = function (_a) {
     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 ((0, jsx_runtime_1.jsx)(Container, { selected: selected, children: (0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { contentContainerStyle: { padding: theme.panel.paddingHorizontal }, children: panels[id].render({ active: selected, key: id }) }) }, id));
     });
-    return react_1.default.createElement(react_1.default.Fragment, null, content);
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: content });
 };
 exports.default = react_1.default.memo(Wrapper);

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

@@ -5,5 +5,5 @@ interface NavigationProps {
     onChangeTab: (index: number) => void;
     onLayout: ViewProps['onLayout'];
 }
-declare const _default: React.MemoExoticComponent<({ tabOpen, onChangeTab, onLayout }: NavigationProps) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ tabOpen, onChangeTab, onLayout }: NavigationProps) => import("react/jsx-runtime").JSX.Element>;
 export default _default;

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

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
 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");
@@ -34,18 +35,13 @@ var Navigation = function (_a) {
         }
     };
     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))));
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: navStyle, onLayout: onLayout, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { children: isUIVisible && ((0, jsx_runtime_1.jsx)(react_native_swipe_gestures_1.default, { onSwipeLeft: handleSwipeLeft, onSwipeRight: handleSwipeRight, config: SWIPE_CONFIG, children: (0, jsx_runtime_1.jsx)(NavigationBar_1.NavigationBar, { index: tabOpen, onPress: onChangeTab, style: { paddingBottom: insets.bottom } }) })) }), (0, jsx_runtime_1.jsxs)(NavigationShortcuts, { children: [(0, jsx_runtime_1.jsx)(NavigationButton_1.VisibilityButton, {}), (0, jsx_runtime_1.jsx)(NavigationButton_1.AddonsSplitButton, {})] })] }));
 };
 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: {
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
             zIndex: 100,
             alignSelf: 'center',
             justifyContent: 'center',
@@ -54,5 +50,5 @@ function NavigationShortcuts(_a) {
             position: 'absolute',
             bottom: insets.bottom + 14,
             right: 8,
-        } }, children));
+        }, children: children }));
 }

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

@@ -5,4 +5,4 @@ export interface NavigationBarProps {
     onPress: (id: number) => void;
     style?: StyleProp<ViewStyle>;
 }
-export declare const NavigationBar: React.MemoExoticComponent<({ index, onPress, style }: NavigationBarProps) => JSX.Element>;
+export declare const NavigationBar: React.MemoExoticComponent<({ index, onPress, style }: NavigationBarProps) => import("react/jsx-runtime").JSX.Element>;

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

@@ -4,6 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NavigationBar = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = __importDefault(require("react"));
 var native_1 = __importDefault(require("@emotion/native"));
 var constants_1 = require("./constants");
@@ -19,8 +20,5 @@ var NavigationTabBar = (0, native_1.default)(tabs_1.TabBar)(function (_a) {
 });
 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")));
+    return ((0, jsx_runtime_1.jsxs)(NavigationTabBar, { style: style, children: [(0, jsx_runtime_1.jsx)(tabs_1.TabButton, { onPress: onPress, testID: "BottomMenu.Sidebar", id: constants_1.SIDEBAR, active: index === constants_1.SIDEBAR, children: "SIDEBAR" }), (0, jsx_runtime_1.jsx)(tabs_1.TabButton, { onPress: onPress, testID: "BottomMenu.Canvas", id: constants_1.CANVAS, active: index === constants_1.CANVAS, children: "CANVAS" }), (0, jsx_runtime_1.jsx)(tabs_1.TabButton, { onPress: onPress, testID: "BottomMenu.Addons", id: constants_1.ADDONS, active: index === constants_1.ADDONS, children: "ADDONS" })] }));
 });

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

@@ -1,3 +1,2 @@
-/// <reference types="react" />
-export declare function VisibilityButton(): JSX.Element;
-export declare function AddonsSplitButton(): JSX.Element;
+export declare function VisibilityButton(): import("react/jsx-runtime").JSX.Element;
+export declare function AddonsSplitButton(): import("react/jsx-runtime").JSX.Element;

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

@@ -1,10 +1,7 @@
 "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 jsx_runtime_1 = require("react/jsx-runtime");
 var react_native_1 = require("react-native");
 var hooks_1 = require("../../../../hooks");
 var icons_1 = require("../../Shared/icons");
@@ -12,18 +9,15 @@ 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 })))));
+    return ((0, jsx_runtime_1.jsx)(react_native_1.TouchableWithoutFeedback, { onPress: toggle, hitSlop: hitSlop, children: (0, jsx_runtime_1.jsx)(layout_1.Box, { marginHorizontal: 8, children: (0, jsx_runtime_1.jsx)(icons_1.BackgroundIcon, { flex: 1, name: inverseIconName, opacity: 0.8, children: (0, jsx_runtime_1.jsx)(icons_1.Icon, { name: iconName, opacity: active ? 0.6 : 0.25 }) }) }) }));
 }
 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(); } }));
+    return ((0, jsx_runtime_1.jsx)(NavigationButton, { iconName: "layout-bottom", inverseIconName: "layout-bottom-inverse", active: active, toggle: function () { return 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(); } }));
+    return ((0, jsx_runtime_1.jsx)(NavigationButton, { iconName: "layout-split", inverseIconName: "layout-split-inverse", active: active, toggle: function () { return toggle(); } }));
 }
 exports.AddonsSplitButton = AddonsSplitButton;

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Image, ImageBackground, ImageBackgroundProps, ImageStyle } from 'react-native';
 declare const iconSources: {
     grid: {
         uri: string;
@@ -29,10 +30,24 @@ declare const iconSources: {
     };
 };
 export type IconName = keyof typeof iconSources;
-declare const StyledImage: any;
-interface IconProps extends React.ComponentProps<typeof StyledImage> {
+declare const StyledImage: import("@emotion/native").StyledComponent<import("react-native").ImageProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType<any>;
+} & ImageStyle & ImageBackgroundProps, {}, {
+    ref?: React.Ref<Image>;
+}>;
+declare const StyledImageBackground: import("@emotion/native").StyledComponent<ImageBackgroundProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType<any>;
+} & ImageStyle, {}, {
+    ref?: React.Ref<ImageBackground>;
+}>;
+interface IconProps extends Omit<React.ComponentProps<typeof StyledImage>, 'source'> {
     name: IconName;
-    background?: boolean;
 }
-export declare function Icon({ name, background, ...props }: IconProps): JSX.Element;
+export declare function Icon({ name, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;
+interface BackgroungIconProps extends Omit<React.ComponentProps<typeof StyledImageBackground>, 'source'> {
+    name: IconName;
+}
+export declare function BackgroundIcon({ name, ...props }: BackgroungIconProps): import("react/jsx-runtime").JSX.Element;
 export {};