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

package/dist/index.js

@@ -1,45 +1,1595 @@
-"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-var _a;
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.darkTheme = exports.theme = exports.getStorybookUI = exports.storiesOf = exports.raw = exports.getStorybook = exports.clearDecorators = exports.addArgTypesEnhancer = exports.addArgsEnhancer = exports.addParameters = exports.addDecorator = exports.setAddon = exports.configure = void 0;
-var start_1 = require("./preview/start");
-var _b = (0, start_1.start)(), clientApi = _b.clientApi, configure = _b.configure, view = _b.view;
-exports.configure = configure;
-var rawStoriesOf = clientApi.storiesOf.bind(clientApi);
-exports.setAddon = clientApi.setAddon.bind(clientApi);
-exports.addDecorator = clientApi.addDecorator.bind(clientApi);
-exports.addParameters = clientApi.addParameters.bind(clientApi);
-exports.addArgsEnhancer = clientApi.addArgsEnhancer.bind(clientApi);
-exports.addArgTypesEnhancer = clientApi.addArgTypesEnhancer.bind(clientApi);
-exports.clearDecorators = clientApi.clearDecorators.bind(clientApi);
-exports.getStorybook = clientApi.getStorybook.bind(clientApi);
-exports.raw = clientApi.raw.bind(clientApi);
-var storiesOf = function (kind, _module) {
-    return rawStoriesOf(kind, { hot: function () { } }).addParameters({
-        framework: 'react-native',
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  addArgTypesEnhancer: () => addArgTypesEnhancer,
+  addArgsEnhancer: () => addArgsEnhancer,
+  addDecorator: () => addDecorator,
+  addParameters: () => addParameters,
+  clearDecorators: () => clearDecorators,
+  configure: () => configure,
+  darkTheme: () => import_react_native_theming14.darkTheme,
+  getStorybook: () => getStorybook,
+  getStorybookUI: () => getStorybookUI,
+  raw: () => raw,
+  setAddon: () => setAddon,
+  storiesOf: () => storiesOf,
+  theme: () => import_react_native_theming14.theme
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/preview/start.tsx
+var import_addons4 = require("@storybook/addons");
+var import_channels = __toESM(require("@storybook/channels"));
+var import_client_api = require("@storybook/client-api");
+var import_core_events3 = __toESM(require("@storybook/core-events"));
+var import_preview_web = require("@storybook/preview-web");
+
+// src/preview/executeLoadable.ts
+var import_client_logger = require("@storybook/client-logger");
+function executeLoadable(loadable) {
+  let reqs = null;
+  if (Array.isArray(loadable)) {
+    reqs = loadable;
+  } else if (loadable.keys) {
+    reqs = [loadable];
+  }
+  let exportsMap = /* @__PURE__ */ new Map();
+  if (reqs) {
+    reqs.forEach((req) => {
+      req.keys().forEach((filename) => {
+        try {
+          const fileExports = req(filename);
+          exportsMap.set(
+            // NOTE context.resolve is not yet implemented for metro
+            // typeof req.resolve === 'function' ? req.resolve(filename) : filename,
+            filename,
+            fileExports
+          );
+        } catch (error) {
+          const errorString = error.message && error.stack ? `${error.message}
+ ${error.stack}` : error.toString();
+          import_client_logger.logger.error(`Unexpected error while loading ${filename}: ${errorString}`);
+        }
+      });
     });
+  } else {
+    const exported = loadable();
+    if (typeof exported === "object") {
+      const csfExports = Object.entries(exported).filter(
+        ([_key, value]) => value.default != null
+      );
+      exportsMap = new Map(csfExports.map(([filePath, fileExports]) => [filePath, fileExports]));
+    }
+  }
+  return exportsMap;
+}
+global.lastExportsMap = /* @__PURE__ */ new Map();
+function executeLoadableForChanges(loadable, m) {
+  if (m?.hot?.accept) {
+    m.hot.accept();
+  }
+  const lastExportsMap = global.lastExportsMap;
+  const exportsMap = executeLoadable(loadable);
+  const added = /* @__PURE__ */ new Map();
+  Array.from(exportsMap.entries()).filter(([, fileExports]) => !!fileExports.default).filter(([fileName, fileExports]) => lastExportsMap.get(fileName) !== fileExports).forEach(([fileName, fileExports]) => added.set(fileName, fileExports));
+  const removed = /* @__PURE__ */ new Map();
+  Array.from(lastExportsMap.keys()).filter((fileName) => !exportsMap.has(fileName)).forEach((fileName) => removed.set(fileName, lastExportsMap.get(fileName)));
+  global.lastExportsMap = exportsMap;
+  return { added, removed };
+}
+
+// src/preview/View.tsx
+var import_react14 = require("react");
+var import_async_storage = __toESM(require("@react-native-async-storage/async-storage"));
+var import_csf = require("@storybook/csf");
+var import_addons3 = require("@storybook/addons");
+var import_react_native_theming12 = require("@storybook/react-native-theming");
+var import_react_native_safe_area_context3 = require("react-native-safe-area-context");
+
+// src/hooks.tsx
+var import_react = __toESM(require("react"));
+var import_jotai = require("jotai");
+var storyContextAtom = (0, import_jotai.atom)(null);
+function useSetStoryContext() {
+  return (0, import_jotai.useSetAtom)(storyContextAtom);
+}
+function useStoryContext() {
+  return (0, import_jotai.useAtomValue)(storyContextAtom);
+}
+function useStoryContextParam(name, defaultValue) {
+  const paramAtom = (0, import_react.useMemo)(() => (0, import_jotai.atom)((get) => get(storyContextAtom)?.parameters?.[name]), [name]);
+  return (0, import_jotai.useAtomValue)(paramAtom) ?? defaultValue;
+}
+function useIsStorySelected(storyId) {
+  return (0, import_jotai.useAtomValue)(
+    (0, import_react.useMemo)(() => (0, import_jotai.atom)((get) => get(storyContextAtom)?.id === storyId), [storyId])
+  );
+}
+function useIsStorySectionSelected(title) {
+  return (0, import_jotai.useAtomValue)(
+    (0, import_react.useMemo)(
+      () => (0, import_jotai.atom)((get) => {
+        const contextTitle = get(storyContextAtom)?.title;
+        return contextTitle === title || contextTitle?.startsWith(`${title}/`);
+      }),
+      [title]
+    )
+  );
+}
+function useIsChildSelected(entries) {
+  return (0, import_jotai.useAtomValue)(
+    (0, import_react.useMemo)(
+      () => (0, import_jotai.atom)((get) => {
+        const contextId = get(storyContextAtom)?.id;
+        return !!entries.find(({ id }) => id === contextId);
+      }),
+      [entries]
+    )
+  );
+}
+function useUpdateOnStoryChanged() {
+  (0, import_jotai.useAtomValue)((0, import_react.useMemo)(() => (0, import_jotai.atom)((get) => get(storyContextAtom)?.id), []));
+}
+function atomWithToggle(initialValue) {
+  const anAtom = (0, import_jotai.atom)(initialValue, (get, set, nextValue) => {
+    const update = nextValue ?? !get(anAtom);
+    set(anAtom, update);
+  });
+  return anAtom;
+}
+var isUIVisibleAtom = atomWithToggle(true);
+function useIsUIVisible() {
+  return (0, import_jotai.useAtom)(isUIVisibleAtom);
+}
+var isSplitPanelVisibleAtom = atomWithToggle(false);
+function useIsSplitPanelVisible() {
+  return (0, import_jotai.useAtom)(isSplitPanelVisibleAtom);
+}
+function syncExternalUI({ isUIVisible, isSplitPanelVisible }) {
+  const jotaiStore = (0, import_jotai.getDefaultStore)();
+  if (isUIVisible !== void 0) {
+    jotaiStore.set(isUIVisibleAtom, isUIVisible);
+  }
+  if (isSplitPanelVisible !== void 0) {
+    jotaiStore.set(isSplitPanelVisibleAtom, isSplitPanelVisible);
+  }
+}
+var selectedAddonAtom = (0, import_jotai.atom)(void 0);
+function useSelectedAddon(initialValue) {
+  const result = (0, import_jotai.useAtom)(selectedAddonAtom);
+  const set = result[1];
+  import_react.default.useEffect(() => {
+    const jotaiStore = (0, import_jotai.getDefaultStore)();
+    if (jotaiStore.get(selectedAddonAtom) === void 0) {
+      set(initialValue);
+    }
+  }, []);
+  return result;
+}
+
+// src/preview/components/OnDeviceUI/OnDeviceUI.tsx
+var import_react_native_theming10 = require("@storybook/react-native-theming");
+var import_react13 = __toESM(require("react"));
+var import_react_native13 = require("react-native");
+
+// src/constants.ts
+var ANIMATION_DURATION_TRANSITION = 400;
+
+// src/preview/components/StoryListView/StoryListView.tsx
+var import_addons = require("@storybook/addons");
+var import_core_events = __toESM(require("@storybook/core-events"));
+var import_react_native_theming = require("@storybook/react-native-theming");
+var import_react2 = __toESM(require("react"));
+var import_react_native2 = require("react-native");
+
+// src/preview/components/Shared/icons.tsx
+var import_react_native = require("react-native");
+var import_jsx_runtime = require("react/jsx-runtime");
+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=="
+  },
+  "story-white": {
+    uri: "data:image/png;base64,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"
+  },
+  "story-blue": {
+    uri: "data:image/png;base64,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"
+  },
+  search: {
+    uri: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAABgWlDQ1BzUkdCIElFQzYxOTY2LTIuMQAAKJF1kd8rg1EYxz/baGLy88KFsjSuTEyJG2USamnNlOFme+2H2ubtfbe03Cq3K0rc+HXBX8Ctcq0UkZJbrokb1ut5t9Uke07PeT7ne87zdM5zwBpMKim9ZgBS6YwWmPI6F0KLTvsLVlqw00VrWNHVcb/fR1X7vMdixlu3Wav6uX+tYSWqK2CpEx5TVC0jPC3sW8+oJu8ItyuJ8IrwmXCfJhcUvjP1SIlfTY6X+NtkLRiYAGuzsDP+iyO/WEloKWF5Oa5UMquU72O+xBFNz89J7BbvRCfAFF6czDDJBMMMMirzMG489MuKKvkDxfxZ1iRXkVklh8YqcRJk6BM1K9WjEmOiR2UkyZn9/9tXPTbkKVV3eKH22TDee8C+DYW8YXwdGUbhGGxPcJmu5K8dwsiH6PmK5jqApk04v6pokV242IKORzWshYuSTdwai8HbKTSGoO0G6pdKPSvvc/IAwQ35qmvY24deOd+0/AMfDGfFB6WkFAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAqNJREFUWIXF2DmIFFEQBuBvVh3FC0EFdT3QaDORTUTFI9hQPAIRQxE0ETXwQBADD7zAaBEDTQxlIxExE4VFjTzYxQNFERUTr/VCvII3Q78Ze2Z6drvZH5ppmqq//q73XnXVlGRHFzZgJeZiDibjLd7gMa7gOr62wdsWStiEAfzNeH3HhYroXNGNu02CPsN9vMOfBjZHUc5DzBb8qAtwG7uxMMW+jB704kOd3w3MGImYg3WEQ9jehn8nrtVxPMeC4YjZ4v+3S8tIFmzD54jrnnAIMqNbWPcqwRFhU48EC/A04uzLyllSu4Fv5CCmimX4HXGvzeK0Se2eGe4yNcLpiH8QY1s5xHVmR85iYEJFSDXG5mbGXZHhnQLEVLEqinO5meGByHBPgYJKeF2J80XIWirimrGoQEFwLoq1PM2gQyhkhMr8vGBBg9H9nFaC3hYshtAVVNGZZtAhqZ5DhcupjTE+zaBDkplZhcthdnQ/kGbQIUnjTDm1Ck0QL9ODRoKeVO5LQjdYJFZXfj/hVSOjjZKj2FugmGn4WYlzq5nhJMlX/oMGxzEHHJa8+MlWxhcj46sFiFkiyc57TG/lME9tL7Q1RzFlYQNXuXdmdTweOX3C/JwEHYt4BzAuq2MZNyPnx1g6AiFlYer4FXH2tEsyEy8igl84of36tFgYkepHo2F1EwvxsI7oIVZk8J2KQ5INnHbta0bQqG+egktYV/f8lTAuDwoVfkj4HHRijVD44mw+ErLShbPR8/041UxYI7HrK6RZx+jq9RG71G7gvdrIVDOMFea1PuFPhEYiPqMfZ4S9mIaWotoddSYK81unUNHHC0f5AV5WgrTCXrXLNazlyxu5LV+eSBU1ZhQF9eObpFj2CIdh1BFn6s1oZqiKfqHtWYLz/wAUO/neFu9thgAAAABJRU5ErkJggg=="
+  },
+  "layout-bottom": {
+    uri: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAEzSURBVHgB7ZjhDYIwEIWfTsAIjOAIHYGNZANwAnQi3KBu4AhYIiYNNHCF0ivxvuR+mHjNe70eyR0gCIKQOspEZUKb6CJFa6IxkWMD2SC8Y45q0OItvgXALd6uiJeJFG7eVQkSuSNZ49sL3qVcSQF3zylKcoOp+FjCbTJMTdSUxPHbL8CHwvQyFxmXjZMMC3pOjqSO8J+YzOo54+CIAW7EADdigBsxwI0Y4EYMcLPWwNXEG+HGxf4s8si4xNI8sOe8XK7Q450Q8uZdlfDS85c9cMN+PBAAypvrtwOhm7jcoGc2gWOlYuPdA6/R7wv4GK90niDQPw/bsUY6i62GkqgwLVt/UKwFVzZo0A4dOfWQGvt969cGaa1o38Kh1+s/EylUosbGHsxN3BG3InoQriAIgpA0H3BBw2jFymiHAAAAAElFTkSuQmCC"
+  },
+  "layout-bottom-inverse": {
+    uri: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAFgSURBVHgB7ZjhcYMwDIXlTEA2YISOYDbIRmSD0AloJ+kIyQbuBskGqnz4R+OYw7jYchN9dzouwYIn2+LgAQiCIFQNImqKE4XBcpwpRooWUqHkxgnnxmpo5nSqOfF0+KJ4gzq4UHRKqZt/YjeT0EM94i1WSx81kma/DSyjwakXGigA3eeA4Z7TMcljQHwR4Z6OJlDEEJN49pIOwIRb9bvJ9MeoQBLeDSCACbfy19//+XqqLsCypGcH/xwpgBspgBspgBspgBspgBspgJukAugFsae44nbYa51gC/wrB87ndCqOa/Ws/h6ws0WHXJ+YN7rdHlboeckeeId8fMJfWdpzbsyA2zfxMUXPYg8Q+5AjVoqUHvj2frM5dPho6VxikgZv1QzWY2yNMYk6sEcNFjK4nHCNYWuxjb3IgPURtBWf0153AzvI+8yPxWrokp+EONntH/ho+ubE4LSNNQiCIFTND53ElQfvR3pDAAAAAElFTkSuQmCC"
+  },
+  "layout-split": {
+    uri: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADxSURBVHgB7ZjhCcIwFITP4gAdISM4QkZwI0doNqgb1Q3iJjU/Imga5YVK3yveB/ejkJa7vgTCAYQQYh2fNCTFpHkjTUljksMK+mx8VtaQvTSbnwBom3+dSFMIC3++NgkRDlA3+0m+NNtVAlxgl7NkkaW9XyqWZg+VADNs8+a5w85hAG0YQBsG0IYBtNl9gKNgzQG6fL3acAtpwwDaMIA2DKDNXwRorvW2pBbgXjyfoEfZA90gIGDZxWhMoceyER8lL3rUCyVRK/YD+uwhVnw46UcC7LVyAQ3svl5/hrAwiYCVZ9AlXbHtRGI27kEIIaZ5ALildIGPrcQbAAAAAElFTkSuQmCC"
+  },
+  "layout-split-inverse": {
+    uri: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAEaSURBVHgB7ZntDYJADIaLcQBGYARHgAl0I0YQJ8BNdAPZ4BzBDWov8ENrkYuJtJA+SUO4D/K+1yaQAuA4jmMaRCwpjhQB5+NG0VIU8Cu0OR+EaxM15GM6szHxdLlQ7MAGHUWVZdmDT2xGNtRgR3wkaqmliY8MYF93AWwSs3B9HZAyUINdDnxAMmCpdDh7PiCVEIJhqITeNG9g4bgBbdyANm5AGzegzeINbKcW8Ff33Ex92ngJaeMGtHED2rgBbdZv4FtbzwKSgTu7V2uz0OHxPlCXsqlhzdWgkQXsm8uBaWlTNpZChzgIp/EXBuElyu38IvUhDdqjkbSus70+LKwoTqBP1CCKT4KyUVCcsf/tMxcB+zIuwXEcxzRPpfGo9y3IYogAAAAASUVORK5CYII="
+  },
+  folder: {
+    uri: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAuIwAALiMBeKU/dgAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAHTSURBVGiB7Zk7LwRRGIbf7wwRRIJGlDSEpdmI6Fw6lRWZXiJ0lkZUsn8A2dD5B0MhkS1UepGIXZu4hsKlJASxyZyjoJAx4uzutztjc57yXN58T+Z8M5kZoEKg2R4nSpL6IdCQ72YlhQLh3LLc/dUj+7YUBepC8ciWYshxidSy+1a/tHYx+s6QlzeCKcdSihZEzWtqfsCpZcrMCy6RTwgj8knsBCHDKwIEJsPVI36cKOCGK4ygnkHYbcpkNxJISO98lc+eR4Au9eJVG4DmXyY7CejUrvRPCFCIPUQifTjG1I9ZnyuynTyeiOlEx3udDkixB6CVo1RdXCHb19P21fexonokmbZPIeQQgPuiKssTS1K3d6zoZg9Choh+tATLXSuZtk8tSwyC1B1HXiH4NXtBrByNn8V7nWFIMcmVCVJzAGp0lrKJAF/HDFjkyotHtmagKcL/QAwIIxI2jEjYMCJhw4iEDSMSNoxI2DAiYcOIhI2KEfF71W2c7XGiZa/EDwVLd6mfyCApccBYTlmomKNlRAJFymvv0P8TIRzediHjHRYAMgBK9Y+EkxygUpBybHPTdr2TBADT0Z06K/ek9UUvKFpk9Usia+eCrsNgMBgMBkM5+ADkCHptw04GlAAAAABJRU5ErkJggg=="
+  }
+};
+function Icon({ name, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react_native.Image,
+    {
+      source: {
+        ...iconSources[name],
+        width: 16,
+        height: 16
+      },
+      ...props
+    }
+  );
+}
+function BackgroundIcon({ name, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react_native.ImageBackground,
+    {
+      source: {
+        ...iconSources[name],
+        width: 16,
+        height: 16
+      },
+      ...props
+    }
+  );
+}
+
+// src/preview/components/StoryListView/getNestedStories.ts
+function getNestedStories(storyIndex) {
+  const stories = Object.values(storyIndex.stories);
+  const group = [];
+  stories.forEach((story) => {
+    const nameParts = story.title.split("/");
+    formGroup(nameParts, story, group);
+  });
+  return group;
+}
+function formGroup(nameParts, story, group) {
+  if (nameParts.length === 1) {
+    const current = group.find(({ name }) => name === nameParts[0]);
+    if (current) {
+      current.stories.push(story);
+    } else {
+      group.push({
+        title: story.title,
+        name: nameParts[0],
+        children: [],
+        stories: [story]
+      });
+    }
+    return;
+  }
+  const newParts = nameParts.slice(1);
+  const currentListPart = group.find(({ name }) => name === nameParts[0]);
+  if (!currentListPart) {
+    const toPush = {
+      name: nameParts[0],
+      title: story.title,
+      children: [],
+      stories: []
+    };
+    group.push(toPush);
+    return formGroup(newParts, story, toPush.children);
+  } else if (!currentListPart.children) {
+    currentListPart.children = [];
+  }
+  const newGroup = currentListPart.children;
+  return formGroup(newParts, story, newGroup);
+}
+var filterNestedStories = (stories, filter) => {
+  const filteredStories = [];
+  stories.forEach((story) => {
+    const filtered = filterStoryGroup(story, filter);
+    if (filtered) {
+      filteredStories.push(filtered);
+    }
+  });
+  return filteredStories;
+};
+var filterStoryGroup = (story, filter) => {
+  const filteredStories = story.stories.filter(
+    (item) => item.title.toLowerCase().includes(filter.toLowerCase()) || item.name.toLowerCase().includes(filter.toLowerCase())
+  );
+  const filteredChildren = filterNestedStories(story.children, filter);
+  if (filteredStories.length || filteredChildren.length) {
+    return {
+      ...story,
+      children: filteredChildren,
+      stories: filteredStories
+    };
+  }
+};
+var findFirstChildStory = (story) => {
+  if (story.stories.length) {
+    return story.stories[0];
+  }
+  if (story.children.length) {
+    return findFirstChildStory(story.children[0]);
+  }
+};
+
+// src/preview/components/StoryListView/StoryListView.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var SectionHeaderText = import_react_native_theming.styled.Text(({ theme: theme3 }) => ({
+  fontSize: theme3.storyList.fontSize,
+  color: theme3.storyList.headerTextColor,
+  fontWeight: theme3.storyList.headerFontWeight,
+  flexShrink: 1
+}));
+var StoryNameText = import_react_native_theming.styled.Text(({ selected, theme: theme3 }) => ({
+  fontSize: theme3.storyList.fontSize,
+  fontWeight: selected ? theme3.storyList.storySelectedFontWeight : theme3.storyList.storyFontWeight,
+  color: selected ? theme3.storyList.storySelectedTextColor : theme3.storyList.storyTextColor
+}));
+var SEARCH_ICON_SIZE = 24;
+var SearchInput = import_react_native_theming.styled.TextInput(
+  {
+    padding: 0,
+    ...import_react_native2.StyleSheet.absoluteFillObject
+  },
+  ({ theme: theme3 }) => ({
+    fontSize: theme3.storyList.search.fontSize,
+    paddingStart: theme3.storyList.search.paddingHorizontal + SEARCH_ICON_SIZE,
+    color: theme3.storyList.search.textColor
+  })
+);
+var SearchContainer = import_react_native_theming.styled.View(({ theme: theme3 }) => ({
+  flexDirection: "row",
+  alignItems: "center",
+  margin: theme3.panel.paddingHorizontal,
+  paddingVertical: theme3.storyList.search.paddingVertical,
+  paddingStart: theme3.storyList.search.paddingHorizontal,
+  borderColor: theme3.storyList.search.borderColor,
+  borderWidth: theme3.storyList.search.borderWidth,
+  borderRadius: theme3.storyList.search.borderRadius,
+  backgroundColor: theme3.storyList.search.backgroundColor
+}));
+var SearchBar = (props) => {
+  const theme3 = (0, import_react_native_theming.useTheme)();
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(SearchContainer, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { name: "search", style: { opacity: 0.5 } }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      SearchInput,
+      {
+        ...props,
+        autoCapitalize: "none",
+        autoComplete: "off",
+        autoCorrect: false,
+        spellCheck: false,
+        clearButtonMode: "while-editing",
+        disableFullscreenUI: true,
+        placeholderTextColor: theme3.storyList.search.placeholderTextColor,
+        returnKeyType: "search"
+      }
+    )
+  ] });
+};
+var HeaderContainer = import_react_native_theming.styled.TouchableOpacity(
+  {
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  ({ selected, theme: theme3, childSelected }) => ({
+    marginTop: theme3.storyList.sectionSpacing,
+    paddingHorizontal: theme3.storyList.headerPaddingHorizontal,
+    paddingVertical: theme3.storyList.headerPaddingVertical,
+    backgroundColor: selected ? theme3.storyList.sectionActiveBackgroundColor : void 0,
+    borderTopLeftRadius: theme3.storyList.sectionBorderRadius,
+    borderTopRightRadius: theme3.storyList.sectionBorderRadius,
+    borderBottomLeftRadius: selected && !childSelected ? theme3.storyList.sectionBorderRadius : void 0,
+    borderBottomRightRadius: selected && !childSelected ? theme3.storyList.sectionBorderRadius : void 0
+  })
+);
+var SectionHeader = import_react2.default.memo(
+  ({ name, onPress, isChildSelected, icon = "grid", expanded }) => {
+    const selected = useIsStorySectionSelected(name) || isChildSelected;
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      HeaderContainer,
+      {
+        selected,
+        childSelected: isChildSelected,
+        onPress,
+        activeOpacity: 0.8,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            import_react_native2.View,
+            {
+              style: {
+                transform: [{ rotate: expanded ? "90deg" : "0deg" }],
+                marginRight: 6,
+                alignItems: "center",
+                justifyContent: "center"
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.Text, { style: { fontSize: 8, color: "grey", lineHeight: 8 }, children: "\u27A4" })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { name: icon, width: 12, height: 12, style: { marginRight: 6 } }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SectionHeaderText, { numberOfLines: 2, selected, children: name })
+        ]
+      },
+      name
+    );
+  }
+);
+var ItemTouchable = import_react_native_theming.styled.TouchableOpacity(
+  {
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  ({ selected, sectionSelected, isLastItem, theme: theme3 }) => ({
+    padding: theme3.storyList.storyPaddingHorizontal,
+    paddingStart: theme3.storyList.storyIndent,
+    backgroundColor: selected ? theme3.storyList.storySelectedBackgroundColor : sectionSelected ? theme3.storyList.sectionActiveBackgroundColor : void 0,
+    borderBottomLeftRadius: isLastItem ? theme3.storyList.sectionBorderRadius : void 0,
+    borderBottomRightRadius: isLastItem ? theme3.storyList.sectionBorderRadius : void 0
+  })
+);
+var ListItem = ({
+  storyId,
+  kind,
+  title,
+  isLastItem,
+  onPress,
+  isSiblingSelected
+}) => {
+  const selected = useIsStorySelected(storyId);
+  const sectionSelected = useIsStorySectionSelected(kind) || isSiblingSelected;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    ItemTouchable,
+    {
+      onPress,
+      activeOpacity: 0.8,
+      testID: `Storybook.ListItem.${kind}.${title}`,
+      accessibilityLabel: `Storybook.ListItem.${title}`,
+      selected,
+      sectionSelected,
+      isLastItem,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          Icon,
+          {
+            width: 14,
+            height: 14,
+            name: selected ? "story-white" : "story-blue",
+            style: { marginRight: 6 }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(StoryNameText, { selected, children: title })
+      ]
+    },
+    title
+  );
+};
+var styles = import_react_native2.StyleSheet.create({
+  sectionList: { flex: 1 },
+  sectionListContentContainer: { paddingBottom: 6 }
+});
+function keyExtractor(item, index) {
+  return item.name + index;
+}
+var RenderItem = ({
+  item,
+  changeStory
+}) => {
+  const isChildSelected = useIsChildSelected(item.stories);
+  const firstChild = findFirstChildStory(item);
+  const firstChildSelected = useIsStorySelected(firstChild?.id);
+  const [showChildren, setShowChildren] = (0, import_react2.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      SectionHeader,
+      {
+        name: item.name,
+        isChildSelected,
+        onPress: () => {
+          if (firstChildSelected && showChildren) {
+            setShowChildren(false);
+          } else if (!showChildren && firstChild) {
+            setShowChildren(true);
+            changeStory(firstChild.id);
+          } else if (showChildren && !firstChildSelected && firstChild) {
+            changeStory(firstChild.id);
+          }
+        },
+        icon: item.children.length ? "folder" : "grid",
+        expanded: showChildren
+      }
+    ),
+    showChildren && item.stories?.map((story, idx) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      ListItem,
+      {
+        storyId: story.id,
+        title: story.name,
+        kind: item.name,
+        isSiblingSelected: isChildSelected,
+        isLastItem: idx === item.stories.length - 1,
+        onPress: () => changeStory(story.id)
+      },
+      story.id
+    )),
+    showChildren && item.children?.map((child, idx) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.View, { style: { marginLeft: 16 }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RenderItem, { item: child, changeStory }) }, `${child.title}-${idx}`))
+  ] });
+};
+var StoryListView = ({ storyIndex }) => {
+  const originalData = (0, import_react2.useMemo)(() => getNestedStories(storyIndex), [storyIndex]);
+  const [data, setData] = (0, import_react2.useState)(originalData);
+  const theme3 = (0, import_react_native_theming.useTheme)();
+  const handleChangeSearchText = (text) => {
+    const query = text.trim();
+    if (!query) {
+      setData(originalData);
+      return;
+    }
+    setData(filterNestedStories(originalData, query));
+  };
+  const changeStory = (storyId) => {
+    const channel = import_addons.addons.getChannel();
+    channel.emit(import_core_events.default.SET_CURRENT_STORY, { storyId });
+  };
+  const renderItem = import_react2.default.useCallback(({ item }) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RenderItem, { item, changeStory });
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { style: { flex: 1 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      SearchBar,
+      {
+        testID: "Storybook.ListView.SearchBar",
+        onChangeText: handleChangeSearchText,
+        placeholder: "Find by name"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_react_native2.FlatList,
+      {
+        style: styles.sectionList,
+        contentContainerStyle: [
+          styles.sectionListContentContainer,
+          {
+            paddingVertical: theme3.panel.paddingVertical,
+            paddingHorizontal: theme3.panel.paddingHorizontal
+          }
+        ],
+        testID: "Storybook.ListView",
+        renderItem,
+        keyExtractor,
+        data
+      }
+    )
+  ] });
+};
+var StoryListView_default = import_react2.default.memo(StoryListView);
+
+// src/preview/components/StoryView/StoryView.tsx
+var import_react3 = __toESM(require("react"));
+var import_react_native_theming2 = require("@storybook/react-native-theming");
+var import_react_native3 = require("react-native");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function dismissOnStartResponder() {
+  import_react_native3.Keyboard.dismiss();
+  return false;
+}
+var StoryView = () => {
+  const context = useStoryContext();
+  const id = context?.id;
+  const { backgroundColor } = (0, import_react_native_theming2.useTheme)();
+  if (context && context.unboundStoryFn) {
+    const { unboundStoryFn: StoryComponent } = context;
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_react_native3.View,
+      {
+        style: { flex: 1, backgroundColor },
+        testID: id,
+        onStartShouldSetResponder: dismissOnStartResponder,
+        children: StoryComponent && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StoryComponent, { ...context })
+      },
+      id
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.View, { style: { flex: 1, padding: 16, alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.Text, { children: "Please open the sidebar and select a story to preview." }) });
+};
+var StoryView_default = import_react3.default.memo(StoryView);
+
+// src/preview/components/OnDeviceUI/absolute-positioned-keyboard-aware-view.tsx
+var import_react4 = __toESM(require("react"));
+var import_react_native4 = require("react-native");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var AbsolutePositionedKeyboardAwareView = ({
+  onLayout,
+  previewDimensions: { width, height },
+  children
+}) => {
+  const onLayoutHandler = ({ nativeEvent }) => {
+    const { height: layoutHeight, width: layoutWidth } = nativeEvent.layout;
+    if (layoutHeight !== height || layoutWidth !== width) {
+      onLayout({
+        height: layoutHeight,
+        width: layoutWidth
+      });
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.View, { style: styles2.container, onLayout: onLayoutHandler, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    import_react_native4.View,
+    {
+      style: width === 0 ? styles2.container : [styles2.absolute, { position: "absolute", width, height }],
+      children
+    }
+  ) });
+};
+var styles2 = import_react_native4.StyleSheet.create({
+  absolute: { position: "absolute" },
+  container: { flex: 1 }
+});
+var absolute_positioned_keyboard_aware_view_default = import_react4.default.memo(AbsolutePositionedKeyboardAwareView);
+
+// src/preview/components/OnDeviceUI/addons/Addons.tsx
+var import_addons2 = require("@storybook/addons");
+var import_react_native_theming6 = require("@storybook/react-native-theming");
+var import_react8 = __toESM(require("react"));
+var import_react_native7 = require("react-native");
+
+// src/preview/components/OnDeviceUI/addons/List.tsx
+var import_react6 = __toESM(require("react"));
+
+// src/preview/components/Shared/tabs.tsx
+var import_react5 = __toESM(require("react"));
+var import_react_native5 = require("react-native");
+var import_react_native_theming3 = require("@storybook/react-native-theming");
+var import_react_native_theming4 = require("@storybook/react-native-theming");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var TabButtonText = import_react_native_theming3.styled.Text(({ theme: theme3, active }) => ({
+  color: active ? theme3.tabs.activeTextColor : theme3.tabs.inactiveTextColor,
+  paddingVertical: theme3.tabs.paddingVertical,
+  paddingHorizontal: theme3.tabs.paddingHorizontal,
+  fontSize: theme3.tabs.fontSize,
+  fontWeight: theme3.tabs.fontWeight
+}));
+var hitSlop = { top: 8, left: 0, right: 0, bottom: 20 };
+var TabButtonTouchable = import_react_native_theming3.styled.TouchableOpacity(({ theme: theme3, active }) => ({
+  borderWidth: theme3.tabs.borderWidth,
+  borderColor: active ? theme3.tabs.activeBorderColor : theme3.tabs.inactiveBorderColor,
+  borderRadius: theme3.tabs.borderRadius,
+  backgroundColor: active ? theme3.tabs.activeBackgroundColor : theme3.tabs.inactiveBackgroundColor
+}));
+var TabButton = import_react5.default.memo(({ onPress, id, active, children, testID }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    TabButtonTouchable,
+    {
+      active,
+      testID,
+      onPress: () => onPress(id),
+      activeOpacity: 0.8,
+      hitSlop,
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(TabButtonText, { active, children })
+    }
+  );
+});
+var TabBar = import_react5.default.memo(({ scrollable = false, style, children }) => {
+  const theme3 = (0, import_react_native_theming4.useTheme)();
+  if (scrollable) {
+    children = /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      import_react_native5.ScrollView,
+      {
+        showsHorizontalScrollIndicator: false,
+        horizontal: true,
+        contentContainerStyle: { paddingHorizontal: theme3.tokens.spacing2 },
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native5.View, { style, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(TabBarContainer, { children }) });
+});
+var TabBarContainer = import_react_native_theming3.styled.View(() => ({
+  flexDirection: "row",
+  paddingVertical: 6,
+  justifyItems: "center"
+}));
+
+// src/preview/components/OnDeviceUI/addons/List.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var AddonList = ({ panels, addonSelected, onPressAddon }) => {
+  const addonKeys = Object.keys(panels);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(TabBar, { scrollable: true, children: addonKeys.map((id) => {
+    const { title } = panels[id];
+    const resolvedTitle = typeof title === "function" ? title() : title;
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      TabButton,
+      {
+        active: id === addonSelected,
+        id,
+        onPress: () => onPressAddon(id),
+        children: resolvedTitle.toUpperCase()
+      },
+      id
+    );
+  }) });
+};
+var List_default = import_react6.default.memo(AddonList);
+
+// src/preview/components/OnDeviceUI/addons/Wrapper.tsx
+var import_react7 = __toESM(require("react"));
+var import_react_native6 = require("react-native");
+var import_react_native_theming5 = require("@storybook/react-native-theming");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var Container = import_react_native_theming5.styled.View(({ selected }) => ({
+  display: selected ? "flex" : "none",
+  flex: 1
+}));
+var Wrapper = ({ panels, addonSelected }) => {
+  useUpdateOnStoryChanged();
+  const theme3 = (0, import_react_native_theming5.useTheme)();
+  const addonKeys = Object.keys(panels);
+  const content = addonKeys.map((id) => {
+    const selected = addonSelected === id;
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Container, { selected, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native6.ScrollView, { contentContainerStyle: { padding: theme3.panel.paddingHorizontal }, children: panels[id].render({ active: selected, key: id }) }) }, id);
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: content });
+};
+var Wrapper_default = import_react7.default.memo(Wrapper);
+
+// src/preview/components/OnDeviceUI/addons/Addons.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var Text3 = import_react_native_theming6.styled.Text(({ theme: theme3 }) => ({
+  marginTop: theme3.tokens.spacing4
+}));
+var Addons = ({ active }) => {
+  const panels = import_addons2.addons.getElements("panel");
+  const [addonSelected, setAddonSelected] = useSelectedAddon(Object.keys(panels)[0]);
+  const context = useStoryContext();
+  const id = context?.id;
+  if (!id) {
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native7.View, { style: { alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text3, { children: "No Story Selected" }) });
+  }
+  if (Object.keys(panels).length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native7.View, { style: { alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text3, { children: "No addons loaded." }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native7.View, { style: { flex: 1 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      List_default,
+      {
+        onPressAddon: setAddonSelected,
+        panels,
+        addonSelected: active ? addonSelected : null
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Wrapper_default, { addonSelected: active ? addonSelected : null, panels })
+  ] });
 };
-exports.storiesOf = storiesOf;
-exports.getStorybookUI = view.getStorybookUI;
-__exportStar(require("./types/types-6.0"), exports);
-// @storybook/addon-storyshots v6 needs global.__STORYBOOK_STORY_STORE__.initializationPromise
+var Addons_default = import_react8.default.memo(Addons);
+
+// src/preview/components/OnDeviceUI/addons/AddonsSkeleton.tsx
+var import_react9 = __toESM(require("react"));
+var import_react_native_theming7 = require("@storybook/react-native-theming");
+var import_react_native8 = require("react-native");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var AddonsSkeleton = import_react9.default.memo(function AddonsSkeleton2({ visible }) {
+  const progress = import_react9.default.useRef(new import_react_native8.Animated.Value(visible ? 1 : 0));
+  import_react9.default.useEffect(() => {
+    import_react_native8.Animated.timing(progress.current, {
+      toValue: visible ? 1 : 0,
+      duration: ANIMATION_DURATION_TRANSITION,
+      useNativeDriver: true,
+      easing: import_react_native8.Easing.inOut(import_react_native8.Easing.cubic)
+    }).start();
+  }, [visible]);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(AddonsSkeletonContainer, { pointerEvents: "none", style: { opacity: progress.current }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TabsSkeleton, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(AddonsContentSkeleton, {})
+  ] });
+});
+var TabSkeleton = import_react_native_theming7.styled.View(({ theme: theme3, active }) => ({
+  opacity: active ? 1 : 0.5,
+  backgroundColor: active ? theme3.tabs.activeBackgroundColor : theme3.tokens.color.grey200,
+  borderRadius: theme3.tokens.borderRadius.round,
+  width: active ? 100 : 70,
+  height: 30,
+  marginRight: 12
+}));
+var BoxSkeleton = import_react_native_theming7.styled.View(
+  ({ theme: theme3, width, height, marginBottom }) => ({
+    backgroundColor: theme3.tokens.color.blue200,
+    borderRadius: theme3.tokens.borderRadius.large,
+    height,
+    marginBottom,
+    width
+  })
+);
+function AddonsFieldSkeleton({ long = false }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native8.View, { style: { marginBottom: 32 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(BoxSkeleton, { width: 75, height: 10, marginBottom: 12 }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(BoxSkeleton, { width: long ? 200 : 120, height: 15 })
+  ] });
+}
+function AddonsContentSkeleton() {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(AddonsFieldSkeleton, { long: true }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(AddonsFieldSkeleton, { long: true }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(AddonsFieldSkeleton, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(AddonsFieldSkeleton, {})
+  ] });
+}
+function TabsSkeleton() {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native8.View, { style: { flexDirection: "row", marginBottom: 16 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TabSkeleton, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TabSkeleton, { active: true }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TabSkeleton, {})
+  ] });
+}
+var AddonsSkeletonContainer = (0, import_react_native_theming7.styled)(import_react_native8.Animated.View)(
+  ({ theme: theme3 }) => ({
+    ...import_react_native8.StyleSheet.absoluteFillObject,
+    flex: 1,
+    backgroundColor: theme3.panel.backgroundColor,
+    borderTopWidth: theme3.panel.borderWidth,
+    borderColor: theme3.panel.borderColor,
+    padding: theme3.panel.paddingHorizontal,
+    overflow: "hidden"
+  })
+);
+
+// src/preview/components/OnDeviceUI/animation.ts
+var import_react_native9 = require("react-native");
+
+// src/preview/components/OnDeviceUI/navigation/constants.ts
+var SIDEBAR = -1;
+var CANVAS = 0;
+var ADDONS = 1;
+
+// src/preview/components/OnDeviceUI/animation.ts
+var RTL_SCALE = import_react_native9.I18nManager.isRTL ? -1 : 1;
+var PREVIEW_SCALE = 0.3;
+var PREVIEW_SCALE_WIDE = 0.7;
+var PREVIEW_SCALE_SHRINK = 0.9;
+var SCALE_OFFSET = 0.025;
+var TRANSLATE_Y_OFFSET = 12;
+var panelWidth = (width, wide) => {
+  const scale = wide ? PREVIEW_SCALE_WIDE : PREVIEW_SCALE;
+  return width * (1 - scale - SCALE_OFFSET);
+};
+var getSidebarPanelPosition = (animatedValue, previewWidth, wide) => {
+  return [
+    {
+      transform: [
+        {
+          translateX: animatedValue.interpolate({
+            inputRange: [SIDEBAR, CANVAS],
+            outputRange: [0, (-panelWidth(previewWidth, wide) - 1) * RTL_SCALE]
+          })
+        }
+      ],
+      width: panelWidth(previewWidth, wide)
+    }
+  ];
+};
+var getAddonPanelPosition = (animatedValue, previewWidth, wide) => {
+  return [
+    {
+      transform: [
+        {
+          translateX: animatedValue.interpolate({
+            inputRange: [CANVAS, ADDONS],
+            outputRange: [
+              previewWidth * RTL_SCALE,
+              (previewWidth - panelWidth(previewWidth, wide)) * RTL_SCALE
+            ]
+          })
+        }
+      ],
+      width: panelWidth(previewWidth, wide)
+    }
+  ];
+};
+var 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;
+  const nonPanelWidth = previewWidth - panelWidth(previewWidth, wide);
+  const translateXOffset = (nonPanelWidth - scaledPreviewWidth) / 2;
+  const translateX = (previewWidth / 2 - previewWidth * scale / 2 - translateXOffset) * RTL_SCALE;
+  const translateY = -(previewHeight / 2 - scaledPreviewHeight / 2) + insets.top + TRANSLATE_Y_OFFSET;
+  const skipPreview = lastTabOpen !== CANVAS && tabOpen !== CANVAS;
+  return {
+    transform: [
+      {
+        translateX: animatedValue.interpolate({
+          inputRange: [SIDEBAR, CANVAS, ADDONS],
+          outputRange: [translateX, 0, -translateX]
+        })
+      },
+      {
+        translateY: animatedValue.interpolate({
+          inputRange: [SIDEBAR, CANVAS, ADDONS],
+          outputRange: [translateY, skipPreview ? translateY : 0, translateY]
+        })
+      },
+      {
+        scale: animatedValue.interpolate({
+          inputRange: [SIDEBAR, CANVAS, ADDONS],
+          outputRange: [scale, skipPreview ? scale : 1, scale]
+        })
+      }
+    ]
+  };
+};
+var getPreviewShadowStyle = (animatedValue) => ({
+  elevation: 8,
+  shadowColor: "#000",
+  shadowOpacity: animatedValue.interpolate({
+    inputRange: [SIDEBAR, CANVAS, ADDONS],
+    outputRange: [0.25, 0, 0.25]
+  }),
+  shadowRadius: 8,
+  shadowOffset: { width: 0, height: 0 },
+  overflow: "visible"
+});
+
+// src/preview/components/OnDeviceUI/navigation/Navigation.tsx
+var import_react11 = __toESM(require("react"));
+var import_react_native11 = require("react-native");
+var import_react_native_safe_area_context = require("react-native-safe-area-context");
+var import_react_native_swipe_gestures = __toESM(require("react-native-swipe-gestures"));
+
+// src/preview/components/OnDeviceUI/navigation/NavigationBar.tsx
+var import_react10 = __toESM(require("react"));
+var import_react_native_theming8 = require("@storybook/react-native-theming");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var NavigationTabBar = (0, import_react_native_theming8.styled)(TabBar)(({ theme: theme3 }) => ({
+  paddingHorizontal: theme3.tokens.spacing2,
+  backgroundColor: theme3.navigation.backgroundColor,
+  borderColor: theme3.navigation.borderColor,
+  borderTopWidth: theme3.navigation.borderWidth
+}));
+var NavigationBar = import_react10.default.memo(({ index, onPress, style }) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(NavigationTabBar, { style, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    TabButton,
+    {
+      onPress,
+      testID: "BottomMenu.Sidebar",
+      id: SIDEBAR,
+      active: index === SIDEBAR,
+      children: "SIDEBAR"
+    }
+  ),
+  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TabButton, { onPress, testID: "BottomMenu.Canvas", id: CANVAS, active: index === CANVAS, children: "CANVAS" }),
+  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TabButton, { onPress, testID: "BottomMenu.Addons", id: ADDONS, active: index === ADDONS, children: "ADDONS" })
+] }));
+
+// src/preview/components/OnDeviceUI/navigation/NavigationButton.tsx
+var import_react_native10 = require("react-native");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var hitSlop2 = { top: 5, left: 5, right: 5, bottom: 5 };
+function NavigationButton({ iconName, inverseIconName, active, toggle }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native10.TouchableWithoutFeedback, { onPress: toggle, hitSlop: hitSlop2, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native10.View, { style: { marginHorizontal: 8 }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(BackgroundIcon, { style: { flex: 1, opacity: 0.8 }, name: inverseIconName, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, { name: iconName, style: { opacity: active ? 0.6 : 0.25 } }) }) }) });
+}
+function VisibilityButton() {
+  const [active, toggle] = useIsUIVisible();
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    NavigationButton,
+    {
+      iconName: "layout-bottom",
+      inverseIconName: "layout-bottom-inverse",
+      active,
+      toggle: () => toggle()
+    }
+  );
+}
+function AddonsSplitButton() {
+  const [active, toggle] = useIsSplitPanelVisible();
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    NavigationButton,
+    {
+      iconName: "layout-split",
+      inverseIconName: "layout-split-inverse",
+      active,
+      toggle: () => toggle()
+    }
+  );
+}
+
+// src/preview/components/OnDeviceUI/navigation/Navigation.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var SWIPE_CONFIG = {
+  velocityThreshold: 0.2,
+  directionalOffsetThreshold: 80
+};
+var navStyle = {
+  position: "absolute",
+  left: 0,
+  right: 0,
+  bottom: 0
+};
+var Navigation = ({ tabOpen, onChangeTab, onLayout }) => {
+  const insets = (0, import_react_native_safe_area_context.useSafeAreaInsets)();
+  const handleSwipeLeft = () => {
+    if (tabOpen < 1) {
+      onChangeTab(tabOpen + 1);
+    }
+  };
+  const handleSwipeRight = () => {
+    if (tabOpen > -1) {
+      onChangeTab(tabOpen - 1);
+    }
+  };
+  const [isUIVisible] = useIsUIVisible();
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react_native11.View, { style: navStyle, onLayout, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native11.View, { children: isUIVisible && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      import_react_native_swipe_gestures.default,
+      {
+        onSwipeLeft: handleSwipeLeft,
+        onSwipeRight: handleSwipeRight,
+        config: SWIPE_CONFIG,
+        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          NavigationBar,
+          {
+            index: tabOpen,
+            onPress: onChangeTab,
+            style: { paddingBottom: insets.bottom }
+          }
+        )
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(NavigationShortcuts, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(VisibilityButton, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(AddonsSplitButton, {})
+    ] })
+  ] });
+};
+var Navigation_default = import_react11.default.memo(Navigation);
+function NavigationShortcuts({ children }) {
+  const insets = (0, import_react_native_safe_area_context.useSafeAreaInsets)();
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    import_react_native11.View,
+    {
+      style: {
+        zIndex: 100,
+        alignSelf: "center",
+        justifyContent: "center",
+        alignItems: "center",
+        flexDirection: "row-reverse",
+        position: "absolute",
+        bottom: insets.bottom + 14,
+        right: 8
+      },
+      children
+    }
+  );
+}
+
+// src/preview/components/OnDeviceUI/Panel.tsx
+var import_react12 = __toESM(require("react"));
+var import_react_native12 = require("react-native");
+var import_react_native_theming9 = require("@storybook/react-native-theming");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var Container2 = (0, import_react_native_theming9.styled)(import_react_native12.Animated.View)(({ theme: theme3, edge }) => ({
+  backgroundColor: theme3.panel.backgroundColor,
+  borderTopWidth: edge === "top" ? theme3.panel.borderWidth : void 0,
+  borderStartWidth: edge === "left" ? theme3.panel.borderWidth : void 0,
+  borderEndWidth: edge === "right" ? theme3.panel.borderWidth : void 0,
+  borderColor: theme3.panel.borderColor
+}));
+var Panel = ({ edge, children, style }) => {
+  const containerStyle = import_react_native12.StyleSheet.flatten([
+    edge === "top" ? void 0 : import_react_native12.StyleSheet.absoluteFillObject,
+    style
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Container2, { edge, style: containerStyle, children });
+};
+var Panel_default = import_react12.default.memo(Panel);
+
+// src/preview/components/OnDeviceUI/OnDeviceUI.tsx
+var import_react_native14 = require("react-native");
+var import_react_native_safe_area_context2 = require("react-native-safe-area-context");
+var import_react_native_theming11 = require("@storybook/react-native-theming");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var IS_IOS = import_react_native13.Platform.OS === "ios";
+var getExpoRoot = () => global.Expo || global.__expo || global.__exponent;
+var IS_EXPO = getExpoRoot() !== void 0;
+var IS_ANDROID = import_react_native13.Platform.OS === "android";
+var BREAKPOINT = 1024;
+var flex = { flex: 1 };
+function Preview({ animatedValue, style, children }) {
+  const theme3 = (0, import_react_native_theming11.useTheme)();
+  const containerStyle = {
+    backgroundColor: theme3.preview.backgroundColor,
+    ...getPreviewShadowStyle(animatedValue)
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native13.Animated.View, { style: [flex, containerStyle], children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native13.View, { style: [flex, style], children }) });
+}
+var styles3 = import_react_native13.StyleSheet.create({
+  expoAndroidContainer: { paddingTop: import_react_native13.StatusBar.currentHeight }
+});
+var Container3 = import_react_native_theming10.styled.View(({ theme: theme3 }) => ({
+  flex: 1,
+  backgroundColor: theme3.preview.containerBackgroundColor,
+  ...IS_ANDROID && IS_EXPO ? styles3.expoAndroidContainer : void 0,
+  ...import_react_native13.Platform.select({ web: { overflow: "hidden" } })
+}));
+var OnDeviceUI = ({
+  storyIndex,
+  shouldDisableKeyboardAvoidingView,
+  keyboardAvoidingViewVerticalOffset,
+  tabOpen: initialTabOpen
+}) => {
+  const [tabOpen, setTabOpen] = (0, import_react13.useState)(initialTabOpen || CANVAS);
+  const lastTabOpen = import_react13.default.useRef(tabOpen);
+  const [previewDimensions, setPreviewDimensions] = (0, import_react13.useState)(() => ({
+    width: import_react_native13.Dimensions.get("window").width,
+    height: import_react_native13.Dimensions.get("window").height
+  }));
+  const animatedValue = (0, import_react13.useRef)(new import_react_native13.Animated.Value(tabOpen));
+  const wide = (0, import_react_native14.useWindowDimensions)().width >= BREAKPOINT;
+  const insets = (0, import_react_native_safe_area_context2.useSafeAreaInsets)();
+  const handleToggleTab = import_react13.default.useCallback(
+    (newTabOpen) => {
+      if (newTabOpen === tabOpen) {
+        return;
+      }
+      lastTabOpen.current = tabOpen;
+      import_react_native13.Animated.timing(animatedValue.current, {
+        toValue: newTabOpen,
+        duration: ANIMATION_DURATION_TRANSITION,
+        easing: import_react_native13.Easing.inOut(import_react_native13.Easing.cubic),
+        useNativeDriver: true
+      }).start();
+      setTabOpen(newTabOpen);
+      if (newTabOpen === CANVAS) {
+        import_react_native13.Keyboard.dismiss();
+      }
+    },
+    [tabOpen]
+  );
+  const noSafeArea = useStoryContextParam("noSafeArea", false);
+  const previewWrapperStyles = [
+    flex,
+    getPreviewStyle({
+      animatedValue: animatedValue.current,
+      previewDimensions,
+      wide,
+      insets,
+      tabOpen,
+      lastTabOpen: lastTabOpen.current
+    })
+  ];
+  const [isUIVisible] = useIsUIVisible();
+  const [navBarHeight, setNavBarHeight] = import_react13.default.useState(insets.bottom + 40);
+  const measureNavigation = import_react13.default.useCallback(
+    ({ nativeEvent }) => {
+      const inset = insets.bottom;
+      setNavBarHeight(isUIVisible ? nativeEvent.layout.height - inset : 0);
+    },
+    [isUIVisible, insets]
+  );
+  const safeAreaMargins = {
+    paddingBottom: isUIVisible ? insets.bottom + navBarHeight : noSafeArea ? 0 : insets.bottom,
+    paddingTop: !noSafeArea ? insets.top : 0,
+    overflow: "hidden"
+  };
+  const panelSafeAreaMargins = {
+    paddingBottom: insets.bottom + navBarHeight,
+    paddingTop: insets.top
+  };
+  const keyboardVerticalOffset = -panelSafeAreaMargins.paddingBottom + (keyboardAvoidingViewVerticalOffset ?? 0);
+  const [isSplitPanelVisible] = useIsSplitPanelVisible();
+  const isPreviewInactive = tabOpen !== CANVAS;
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_jsx_runtime14.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Container3, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      import_react_native13.KeyboardAvoidingView,
+      {
+        enabled: !shouldDisableKeyboardAvoidingView || isPreviewInactive,
+        behavior: IS_IOS ? "padding" : null,
+        keyboardVerticalOffset,
+        style: flex,
+        children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+          absolute_positioned_keyboard_aware_view_default,
+          {
+            onLayout: setPreviewDimensions,
+            previewDimensions,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react_native13.Animated.View, { style: previewWrapperStyles, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Preview, { style: safeAreaMargins, animatedValue: animatedValue.current, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(StoryView_default, {}),
+                  isSplitPanelVisible ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Panel_default, { edge: "top", style: { flex: 1 }, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Addons_default, { active: true }),
+                    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(AddonsSkeleton, { visible: isPreviewInactive })
+                  ] }) : null
+                ] }),
+                isPreviewInactive ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                  import_react_native13.TouchableOpacity,
+                  {
+                    style: import_react_native13.StyleSheet.absoluteFillObject,
+                    onPress: () => handleToggleTab(CANVAS)
+                  }
+                ) : null
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                Panel_default,
+                {
+                  edge: "right",
+                  style: [
+                    getSidebarPanelPosition(animatedValue.current, previewDimensions.width, wide),
+                    panelSafeAreaMargins
+                  ],
+                  children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(StoryListView_default, { storyIndex })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                Panel_default,
+                {
+                  edge: "left",
+                  style: [
+                    getAddonPanelPosition(animatedValue.current, previewDimensions.width, wide),
+                    panelSafeAreaMargins
+                  ],
+                  children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Addons_default, { active: tabOpen === ADDONS })
+                }
+              )
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Navigation_default, { onLayout: measureNavigation, tabOpen, onChangeTab: handleToggleTab })
+  ] }) });
+};
+var OnDeviceUI_default = import_react13.default.memo(OnDeviceUI);
+
+// src/preview/View.tsx
+var import_react_native_theming13 = require("@storybook/react-native-theming");
+var import_channel_websocket = __toESM(require("@storybook/channel-websocket"));
+
+// src/preview/rn-host-detect.js
+function getByRemoteConfig(hostname) {
+  var remoteModuleConfig = window?.__fbBatchedBridgeConfig?.remoteModuleConfig;
+  if (!Array.isArray(remoteModuleConfig) || hostname !== "localhost" && hostname !== "127.0.0.1") {
+    return { hostname, passed: false };
+  }
+  var constants = (remoteModuleConfig.find(getConstants) || [])[1];
+  if (constants) {
+    var serverHost = constants.ServerHost || hostname;
+    return { hostname: serverHost.split(":")[0], passed: true };
+  }
+  return { hostname, passed: false };
+}
+function getConstants(config) {
+  return config && (config[0] === "AndroidConstants" || config[0] === "PlatformConstants");
+}
+function getByRNRequirePolyfill(hostname) {
+  var NativeModules;
+  var PlatformConstants;
+  var AndroidConstants;
+  if (typeof window === "undefined" || !window.__DEV__ || typeof window.require !== "function" || // RN >= 0.56
+  // TODO: Get NativeModules for RN >= 0.56
+  window.require.name === "metroRequire") {
+    return hostname;
+  }
+  NativeModules = window.require("NativeModules");
+  if (!NativeModules || !NativeModules.PlatformConstants && !NativeModules.AndroidConstants) {
+    return hostname;
+  }
+  PlatformConstants = NativeModules.PlatformConstants;
+  AndroidConstants = NativeModules.AndroidConstants;
+  var serverHost = (PlatformConstants ? PlatformConstants.ServerHost : AndroidConstants.ServerHost) || hostname;
+  return serverHost.split(":")[0];
+}
+function getHost(hostname) {
+  if (typeof __fbBatchedBridge !== "object" || hostname !== "localhost" && hostname !== "127.0.0.1") {
+    return hostname;
+  }
+  var result = getByRemoteConfig(hostname);
+  if (result.passed) {
+    return result.hostname;
+  }
+  return getByRNRequirePolyfill(hostname);
+}
+
+// src/preview/View.tsx
+var import_core_events2 = __toESM(require("@storybook/core-events"));
+var import_react_native15 = require("react-native");
+var import_deepmerge = __toESM(require("deepmerge"));
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var STORAGE_KEY = "lastOpenedStory";
+var View10 = class {
+  _storyIndex;
+  _setStory = () => {
+  };
+  _forceRerender;
+  _ready = false;
+  _preview;
+  _asyncStorageStoryId;
+  _webUrl;
+  constructor(preview) {
+    this._preview = preview;
+  }
+  _getInitialStory = async ({
+    initialSelection,
+    shouldPersistSelection = true
+  } = {}) => {
+    if (initialSelection) {
+      if (typeof initialSelection === "string") {
+        return { storySpecifier: initialSelection, viewMode: "story" };
+      } else {
+        return {
+          storySpecifier: (0, import_csf.toId)(initialSelection.kind, initialSelection.name),
+          viewMode: "story"
+        };
+      }
+    }
+    if (shouldPersistSelection) {
+      try {
+        let value = this._asyncStorageStoryId;
+        if (!value) {
+          value = await import_async_storage.default.getItem(STORAGE_KEY);
+          this._asyncStorageStoryId = value;
+        }
+        return { storySpecifier: value ?? "*", viewMode: "story" };
+      } catch (e) {
+        console.warn("storybook-log: error reading from async storage", e);
+      }
+    }
+    return { storySpecifier: "*", viewMode: "story" };
+  };
+  _getServerChannel = (params = {}) => {
+    const host = getHost(params.host || "localhost");
+    const port = `:${params.port || 7007}`;
+    const query = params.query || "";
+    const websocketType = params.secured ? "wss" : "ws";
+    const url = `${websocketType}://${host}${port}/${query}`;
+    return (0, import_channel_websocket.default)({
+      url,
+      async: true,
+      onError: async () => {
+      }
+    });
+  };
+  getStorybookUI = (params = {}) => {
+    const { shouldPersistSelection = true, onDeviceUI = true, enableWebsockets = false } = params;
+    const initialStory = this._getInitialStory(params);
+    if (enableWebsockets) {
+      const channel = this._getServerChannel(params);
+      import_addons3.addons.setChannel(channel);
+      this._preview.channel = channel;
+      this._preview.setupListeners();
+      channel.emit(import_core_events2.default.CHANNEL_CREATED);
+      this._preview.initializeWithStoryIndex(this._storyIndex);
+    }
+    import_addons3.addons.loadAddons({
+      store: () => ({
+        fromId: (id) => this._preview.storyStore.getStoryContext(this._preview.storyStore.fromId(id)),
+        getSelection: () => {
+          return this._preview.currentSelection;
+        },
+        _channel: this._preview.channel
+      })
+    });
+    const self = this;
+    syncExternalUI({
+      isUIVisible: params.isUIHidden !== void 0 ? !params.isUIHidden : void 0,
+      isSplitPanelVisible: params.isSplitPanelVisible
+    });
+    return () => {
+      const setContext = useSetStoryContext();
+      const colorScheme = (0, import_react_native15.useColorScheme)();
+      const [, forceUpdate] = (0, import_react14.useReducer)((x) => x + 1, 0);
+      const appliedTheme = (0, import_react14.useMemo)(
+        () => (0, import_deepmerge.default)(colorScheme === "dark" ? import_react_native_theming13.darkTheme : import_react_native_theming13.theme, params.theme ?? {}),
+        [colorScheme]
+      );
+      (0, import_react14.useEffect)(() => {
+        self._setStory = (newStory) => {
+          setContext(newStory);
+          if (shouldPersistSelection) {
+            import_async_storage.default.setItem(STORAGE_KEY, newStory.id).catch((e) => {
+              console.warn("storybook-log: error writing to async storage", e);
+            });
+          }
+        };
+        self._forceRerender = () => forceUpdate();
+        initialStory.then((story) => {
+          self._preview.urlStore.selectionSpecifier = story;
+          self._preview.selectSpecifiedStory();
+        });
+      }, []);
+      if (onDeviceUI) {
+        return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native_safe_area_context3.SafeAreaProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native_theming12.ThemeProvider, { theme: appliedTheme, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          OnDeviceUI_default,
+          {
+            storyIndex: self._storyIndex,
+            tabOpen: params.tabOpen,
+            shouldDisableKeyboardAvoidingView: params.shouldDisableKeyboardAvoidingView,
+            keyboardAvoidingViewVerticalOffset: params.keyboardAvoidingViewVerticalOffset
+          }
+        ) }) });
+      } else {
+        return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(StoryView_default, {});
+      }
+    };
+  };
+};
+
+// src/preview/start.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var render = (args, context) => {
+  const { id, component: Component } = context;
+  if (!Component) {
+    throw new Error(
+      `Unable to render story ${id} as the component annotation is missing from the default export`
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Component, { ...args });
+};
+function start() {
+  const channel = new import_channels.default({ async: true });
+  import_addons4.addons.setChannel(channel);
+  const clientApi2 = new import_client_api.ClientApi();
+  const previewView = {
+    prepareForStory: () => null,
+    showNoPreview: () => {
+    },
+    showPreparingStory: () => {
+    },
+    applyLayout: () => {
+    },
+    showErrorDisplay: (e) => {
+      console.log(e);
+    },
+    showStoryDuringRender: () => {
+    },
+    showMain: () => {
+    },
+    checkIfLayoutExists: () => {
+    },
+    showStory: () => {
+    },
+    docsRoot: null,
+    prepareForDocs: () => null,
+    showDocs: () => {
+    },
+    preparingTimeout: setTimeout(() => {
+    }, 0),
+    showMode: () => {
+    },
+    showPreparingDocs: () => {
+    },
+    storyRoot: null,
+    testing: false
+  };
+  const urlStore = {
+    selection: null,
+    selectionSpecifier: null,
+    setQueryParams: () => {
+    },
+    setSelection: (selection) => {
+      preview.urlStore.selection = selection;
+    }
+  };
+  const preview = new import_preview_web.PreviewWeb(urlStore, previewView);
+  clientApi2.storyStore = preview.storyStore;
+  (0, import_client_api.setGlobalRender)(render);
+  let initialized = false;
+  function onStoriesChanged() {
+    const storyIndex = clientApi2.getStoryIndex();
+    preview.onStoriesChanged({ storyIndex });
+    view2._storyIndex = storyIndex;
+  }
+  const view2 = new View10(preview);
+  return {
+    view: view2,
+    forceReRender: () => channel.emit(import_core_events3.default.FORCE_RE_RENDER),
+    clientApi: clientApi2,
+    preview,
+    // This gets called each time the user calls configure (i.e. once per HMR)
+    // The first time, it constructs thecurrentSelection preview, subsequently it updates it
+    configure(loadable, m) {
+      clientApi2.addParameters({ framework: "react-native" });
+      const getProjectAnnotations = () => {
+        const { added, removed } = executeLoadableForChanges(loadable, m);
+        Array.from(added.entries()).forEach(
+          ([fileName, fileExports]) => clientApi2.facade.addStoriesFromExports(fileName, fileExports)
+        );
+        Array.from(removed.entries()).forEach(
+          ([fileName]) => clientApi2.facade.clearFilenameExports(fileName)
+        );
+        return {
+          ...clientApi2.facade.projectAnnotations,
+          renderToDOM: (context) => {
+            view2._setStory(context.storyContext);
+          }
+        };
+      };
+      const importFn = (path) => clientApi2.importFn(path);
+      if (!initialized) {
+        preview.initialize({
+          getStoryIndex: () => {
+            const index = clientApi2.getStoryIndex();
+            view2._storyIndex = index;
+            return index;
+          },
+          importFn,
+          getProjectAnnotations
+        });
+        initialized = true;
+      } else {
+        getProjectAnnotations();
+        onStoriesChanged();
+      }
+    }
+  };
+}
+
+// src/index.ts
+var import_react_native_theming14 = require("@storybook/react-native-theming");
+var { clientApi, configure, view } = start();
+var rawStoriesOf = clientApi.storiesOf.bind(clientApi);
+var setAddon = clientApi.setAddon.bind(clientApi);
+var addDecorator = clientApi.addDecorator.bind(clientApi);
+var addParameters = clientApi.addParameters.bind(clientApi);
+var addArgsEnhancer = clientApi.addArgsEnhancer.bind(clientApi);
+var addArgTypesEnhancer = clientApi.addArgTypesEnhancer.bind(clientApi);
+var clearDecorators = clientApi.clearDecorators.bind(clientApi);
+var getStorybook = clientApi.getStorybook.bind(clientApi);
+var raw = clientApi.raw.bind(clientApi);
+var storiesOf = (kind, _module) => rawStoriesOf(kind, { hot: () => {
+} }).addParameters({
+  framework: "react-native"
+});
+var getStorybookUI = view.getStorybookUI;
 global.__STORYBOOK_STORY_STORE__ = {
-    initializationPromise: (_a = clientApi.storyStore) === null || _a === void 0 ? void 0 : _a.initializationPromise,
+  initializationPromise: clientApi.storyStore?.initializationPromise
 };
-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; } });
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  addArgTypesEnhancer,
+  addArgsEnhancer,
+  addDecorator,
+  addParameters,
+  clearDecorators,
+  configure,
+  darkTheme,
+  getStorybook,
+  getStorybookUI,
+  raw,
+  setAddon,
+  storiesOf,
+  theme
+});