@storybook/react-native-ui 8.0.0-alpha.3

package/dist/index.js

@@ -0,0 +1,2860 @@
+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 __commonJS = (cb, mod) => function __require() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
+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);
+
+// ../../node_modules/lodash/isObject.js
+var require_isObject = __commonJS({
+  "../../node_modules/lodash/isObject.js"(exports, module2) {
+    function isObject(value) {
+      var type = typeof value;
+      return value != null && (type == "object" || type == "function");
+    }
+    module2.exports = isObject;
+  }
+});
+
+// ../../node_modules/lodash/_freeGlobal.js
+var require_freeGlobal = __commonJS({
+  "../../node_modules/lodash/_freeGlobal.js"(exports, module2) {
+    var freeGlobal = typeof global == "object" && global && global.Object === Object && global;
+    module2.exports = freeGlobal;
+  }
+});
+
+// ../../node_modules/lodash/_root.js
+var require_root = __commonJS({
+  "../../node_modules/lodash/_root.js"(exports, module2) {
+    var freeGlobal = require_freeGlobal();
+    var freeSelf = typeof self == "object" && self && self.Object === Object && self;
+    var root = freeGlobal || freeSelf || Function("return this")();
+    module2.exports = root;
+  }
+});
+
+// ../../node_modules/lodash/now.js
+var require_now = __commonJS({
+  "../../node_modules/lodash/now.js"(exports, module2) {
+    var root = require_root();
+    var now = function() {
+      return root.Date.now();
+    };
+    module2.exports = now;
+  }
+});
+
+// ../../node_modules/lodash/_trimmedEndIndex.js
+var require_trimmedEndIndex = __commonJS({
+  "../../node_modules/lodash/_trimmedEndIndex.js"(exports, module2) {
+    var reWhitespace = /\s/;
+    function trimmedEndIndex(string) {
+      var index = string.length;
+      while (index-- && reWhitespace.test(string.charAt(index))) {
+      }
+      return index;
+    }
+    module2.exports = trimmedEndIndex;
+  }
+});
+
+// ../../node_modules/lodash/_baseTrim.js
+var require_baseTrim = __commonJS({
+  "../../node_modules/lodash/_baseTrim.js"(exports, module2) {
+    var trimmedEndIndex = require_trimmedEndIndex();
+    var reTrimStart = /^\s+/;
+    function baseTrim(string) {
+      return string ? string.slice(0, trimmedEndIndex(string) + 1).replace(reTrimStart, "") : string;
+    }
+    module2.exports = baseTrim;
+  }
+});
+
+// ../../node_modules/lodash/_Symbol.js
+var require_Symbol = __commonJS({
+  "../../node_modules/lodash/_Symbol.js"(exports, module2) {
+    var root = require_root();
+    var Symbol2 = root.Symbol;
+    module2.exports = Symbol2;
+  }
+});
+
+// ../../node_modules/lodash/_getRawTag.js
+var require_getRawTag = __commonJS({
+  "../../node_modules/lodash/_getRawTag.js"(exports, module2) {
+    var Symbol2 = require_Symbol();
+    var objectProto = Object.prototype;
+    var hasOwnProperty = objectProto.hasOwnProperty;
+    var nativeObjectToString = objectProto.toString;
+    var symToStringTag = Symbol2 ? Symbol2.toStringTag : void 0;
+    function getRawTag(value) {
+      var isOwn = hasOwnProperty.call(value, symToStringTag), tag = value[symToStringTag];
+      try {
+        value[symToStringTag] = void 0;
+        var unmasked = true;
+      } catch (e) {
+      }
+      var result = nativeObjectToString.call(value);
+      if (unmasked) {
+        if (isOwn) {
+          value[symToStringTag] = tag;
+        } else {
+          delete value[symToStringTag];
+        }
+      }
+      return result;
+    }
+    module2.exports = getRawTag;
+  }
+});
+
+// ../../node_modules/lodash/_objectToString.js
+var require_objectToString = __commonJS({
+  "../../node_modules/lodash/_objectToString.js"(exports, module2) {
+    var objectProto = Object.prototype;
+    var nativeObjectToString = objectProto.toString;
+    function objectToString(value) {
+      return nativeObjectToString.call(value);
+    }
+    module2.exports = objectToString;
+  }
+});
+
+// ../../node_modules/lodash/_baseGetTag.js
+var require_baseGetTag = __commonJS({
+  "../../node_modules/lodash/_baseGetTag.js"(exports, module2) {
+    var Symbol2 = require_Symbol();
+    var getRawTag = require_getRawTag();
+    var objectToString = require_objectToString();
+    var nullTag = "[object Null]";
+    var undefinedTag = "[object Undefined]";
+    var symToStringTag = Symbol2 ? Symbol2.toStringTag : void 0;
+    function baseGetTag(value) {
+      if (value == null) {
+        return value === void 0 ? undefinedTag : nullTag;
+      }
+      return symToStringTag && symToStringTag in Object(value) ? getRawTag(value) : objectToString(value);
+    }
+    module2.exports = baseGetTag;
+  }
+});
+
+// ../../node_modules/lodash/isObjectLike.js
+var require_isObjectLike = __commonJS({
+  "../../node_modules/lodash/isObjectLike.js"(exports, module2) {
+    function isObjectLike(value) {
+      return value != null && typeof value == "object";
+    }
+    module2.exports = isObjectLike;
+  }
+});
+
+// ../../node_modules/lodash/isSymbol.js
+var require_isSymbol = __commonJS({
+  "../../node_modules/lodash/isSymbol.js"(exports, module2) {
+    var baseGetTag = require_baseGetTag();
+    var isObjectLike = require_isObjectLike();
+    var symbolTag = "[object Symbol]";
+    function isSymbol(value) {
+      return typeof value == "symbol" || isObjectLike(value) && baseGetTag(value) == symbolTag;
+    }
+    module2.exports = isSymbol;
+  }
+});
+
+// ../../node_modules/lodash/toNumber.js
+var require_toNumber = __commonJS({
+  "../../node_modules/lodash/toNumber.js"(exports, module2) {
+    var baseTrim = require_baseTrim();
+    var isObject = require_isObject();
+    var isSymbol = require_isSymbol();
+    var NAN = 0 / 0;
+    var reIsBadHex = /^[-+]0x[0-9a-f]+$/i;
+    var reIsBinary = /^0b[01]+$/i;
+    var reIsOctal = /^0o[0-7]+$/i;
+    var freeParseInt = parseInt;
+    function toNumber(value) {
+      if (typeof value == "number") {
+        return value;
+      }
+      if (isSymbol(value)) {
+        return NAN;
+      }
+      if (isObject(value)) {
+        var other = typeof value.valueOf == "function" ? value.valueOf() : value;
+        value = isObject(other) ? other + "" : other;
+      }
+      if (typeof value != "string") {
+        return value === 0 ? value : +value;
+      }
+      value = baseTrim(value);
+      var isBinary = reIsBinary.test(value);
+      return isBinary || reIsOctal.test(value) ? freeParseInt(value.slice(2), isBinary ? 2 : 8) : reIsBadHex.test(value) ? NAN : +value;
+    }
+    module2.exports = toNumber;
+  }
+});
+
+// ../../node_modules/lodash/debounce.js
+var require_debounce = __commonJS({
+  "../../node_modules/lodash/debounce.js"(exports, module2) {
+    var isObject = require_isObject();
+    var now = require_now();
+    var toNumber = require_toNumber();
+    var FUNC_ERROR_TEXT = "Expected a function";
+    var nativeMax = Math.max;
+    var nativeMin = Math.min;
+    function debounce2(func, wait, options2) {
+      var lastArgs, lastThis, maxWait, result, timerId, lastCallTime, lastInvokeTime = 0, leading = false, maxing = false, trailing = true;
+      if (typeof func != "function") {
+        throw new TypeError(FUNC_ERROR_TEXT);
+      }
+      wait = toNumber(wait) || 0;
+      if (isObject(options2)) {
+        leading = !!options2.leading;
+        maxing = "maxWait" in options2;
+        maxWait = maxing ? nativeMax(toNumber(options2.maxWait) || 0, wait) : maxWait;
+        trailing = "trailing" in options2 ? !!options2.trailing : trailing;
+      }
+      function invokeFunc(time) {
+        var args = lastArgs, thisArg = lastThis;
+        lastArgs = lastThis = void 0;
+        lastInvokeTime = time;
+        result = func.apply(thisArg, args);
+        return result;
+      }
+      function leadingEdge(time) {
+        lastInvokeTime = time;
+        timerId = setTimeout(timerExpired, wait);
+        return leading ? invokeFunc(time) : result;
+      }
+      function remainingWait(time) {
+        var timeSinceLastCall = time - lastCallTime, timeSinceLastInvoke = time - lastInvokeTime, timeWaiting = wait - timeSinceLastCall;
+        return maxing ? nativeMin(timeWaiting, maxWait - timeSinceLastInvoke) : timeWaiting;
+      }
+      function shouldInvoke(time) {
+        var timeSinceLastCall = time - lastCallTime, timeSinceLastInvoke = time - lastInvokeTime;
+        return lastCallTime === void 0 || timeSinceLastCall >= wait || timeSinceLastCall < 0 || maxing && timeSinceLastInvoke >= maxWait;
+      }
+      function timerExpired() {
+        var time = now();
+        if (shouldInvoke(time)) {
+          return trailingEdge(time);
+        }
+        timerId = setTimeout(timerExpired, remainingWait(time));
+      }
+      function trailingEdge(time) {
+        timerId = void 0;
+        if (trailing && lastArgs) {
+          return invokeFunc(time);
+        }
+        lastArgs = lastThis = void 0;
+        return result;
+      }
+      function cancel() {
+        if (timerId !== void 0) {
+          clearTimeout(timerId);
+        }
+        lastInvokeTime = 0;
+        lastArgs = lastCallTime = lastThis = timerId = void 0;
+      }
+      function flush() {
+        return timerId === void 0 ? result : trailingEdge(now());
+      }
+      function debounced() {
+        var time = now(), isInvoking = shouldInvoke(time);
+        lastArgs = arguments;
+        lastThis = this;
+        lastCallTime = time;
+        if (isInvoking) {
+          if (timerId === void 0) {
+            return leadingEdge(lastCallTime);
+          }
+          if (maxing) {
+            clearTimeout(timerId);
+            timerId = setTimeout(timerExpired, wait);
+            return invokeFunc(lastCallTime);
+          }
+        }
+        if (timerId === void 0) {
+          timerId = setTimeout(timerExpired, wait);
+        }
+        return result;
+      }
+      debounced.cancel = cancel;
+      debounced.flush = flush;
+      return debounced;
+    }
+    module2.exports = debounce2;
+  }
+});
+
+// ../../node_modules/store2/dist/store2.js
+var require_store2 = __commonJS({
+  "../../node_modules/store2/dist/store2.js"(exports, module2) {
+    (function(window, define) {
+      var _ = {
+        version: "2.14.3",
+        areas: {},
+        apis: {},
+        nsdelim: ".",
+        // utilities
+        inherit: function(api, o) {
+          for (var p in api) {
+            if (!o.hasOwnProperty(p)) {
+              Object.defineProperty(o, p, Object.getOwnPropertyDescriptor(api, p));
+            }
+          }
+          return o;
+        },
+        stringify: function(d, fn) {
+          return d === void 0 || typeof d === "function" ? d + "" : JSON.stringify(d, fn || _.replace);
+        },
+        parse: function(s, fn) {
+          try {
+            return JSON.parse(s, fn || _.revive);
+          } catch (e) {
+            return s;
+          }
+        },
+        // extension hooks
+        fn: function(name, fn) {
+          _.storeAPI[name] = fn;
+          for (var api in _.apis) {
+            _.apis[api][name] = fn;
+          }
+        },
+        get: function(area, key) {
+          return area.getItem(key);
+        },
+        set: function(area, key, string) {
+          area.setItem(key, string);
+        },
+        remove: function(area, key) {
+          area.removeItem(key);
+        },
+        key: function(area, i) {
+          return area.key(i);
+        },
+        length: function(area) {
+          return area.length;
+        },
+        clear: function(area) {
+          area.clear();
+        },
+        // core functions
+        Store: function(id, area, namespace) {
+          var store3 = _.inherit(_.storeAPI, function(key, data, overwrite) {
+            if (arguments.length === 0) {
+              return store3.getAll();
+            }
+            if (typeof data === "function") {
+              return store3.transact(key, data, overwrite);
+            }
+            if (data !== void 0) {
+              return store3.set(key, data, overwrite);
+            }
+            if (typeof key === "string" || typeof key === "number") {
+              return store3.get(key);
+            }
+            if (typeof key === "function") {
+              return store3.each(key);
+            }
+            if (!key) {
+              return store3.clear();
+            }
+            return store3.setAll(key, data);
+          });
+          store3._id = id;
+          try {
+            var testKey = "__store2_test";
+            area.setItem(testKey, "ok");
+            store3._area = area;
+            area.removeItem(testKey);
+          } catch (e) {
+            store3._area = _.storage("fake");
+          }
+          store3._ns = namespace || "";
+          if (!_.areas[id]) {
+            _.areas[id] = store3._area;
+          }
+          if (!_.apis[store3._ns + store3._id]) {
+            _.apis[store3._ns + store3._id] = store3;
+          }
+          return store3;
+        },
+        storeAPI: {
+          // admin functions
+          area: function(id, area) {
+            var store3 = this[id];
+            if (!store3 || !store3.area) {
+              store3 = _.Store(id, area, this._ns);
+              if (!this[id]) {
+                this[id] = store3;
+              }
+            }
+            return store3;
+          },
+          namespace: function(namespace, singleArea, delim) {
+            delim = delim || this._delim || _.nsdelim;
+            if (!namespace) {
+              return this._ns ? this._ns.substring(0, this._ns.length - delim.length) : "";
+            }
+            var ns = namespace, store3 = this[ns];
+            if (!store3 || !store3.namespace) {
+              store3 = _.Store(this._id, this._area, this._ns + ns + delim);
+              store3._delim = delim;
+              if (!this[ns]) {
+                this[ns] = store3;
+              }
+              if (!singleArea) {
+                for (var name in _.areas) {
+                  store3.area(name, _.areas[name]);
+                }
+              }
+            }
+            return store3;
+          },
+          isFake: function(force) {
+            if (force) {
+              this._real = this._area;
+              this._area = _.storage("fake");
+            } else if (force === false) {
+              this._area = this._real || this._area;
+            }
+            return this._area.name === "fake";
+          },
+          toString: function() {
+            return "store" + (this._ns ? "." + this.namespace() : "") + "[" + this._id + "]";
+          },
+          // storage functions
+          has: function(key) {
+            if (this._area.has) {
+              return this._area.has(this._in(key));
+            }
+            return !!(this._in(key) in this._area);
+          },
+          size: function() {
+            return this.keys().length;
+          },
+          each: function(fn, fill) {
+            for (var i = 0, m = _.length(this._area); i < m; i++) {
+              var key = this._out(_.key(this._area, i));
+              if (key !== void 0) {
+                if (fn.call(this, key, this.get(key), fill) === false) {
+                  break;
+                }
+              }
+              if (m > _.length(this._area)) {
+                m--;
+                i--;
+              }
+            }
+            return fill || this;
+          },
+          keys: function(fillList) {
+            return this.each(function(k, v, list) {
+              list.push(k);
+            }, fillList || []);
+          },
+          get: function(key, alt) {
+            var s = _.get(this._area, this._in(key)), fn;
+            if (typeof alt === "function") {
+              fn = alt;
+              alt = null;
+            }
+            return s !== null ? _.parse(s, fn) : alt != null ? alt : s;
+          },
+          getAll: function(fillObj) {
+            return this.each(function(k, v, all) {
+              all[k] = v;
+            }, fillObj || {});
+          },
+          transact: function(key, fn, alt) {
+            var val = this.get(key, alt), ret = fn(val);
+            this.set(key, ret === void 0 ? val : ret);
+            return this;
+          },
+          set: function(key, data, overwrite) {
+            var d = this.get(key), replacer;
+            if (d != null && overwrite === false) {
+              return data;
+            }
+            if (typeof overwrite === "function") {
+              replacer = overwrite;
+              overwrite = void 0;
+            }
+            return _.set(this._area, this._in(key), _.stringify(data, replacer), overwrite) || d;
+          },
+          setAll: function(data, overwrite) {
+            var changed, val;
+            for (var key in data) {
+              val = data[key];
+              if (this.set(key, val, overwrite) !== val) {
+                changed = true;
+              }
+            }
+            return changed;
+          },
+          add: function(key, data, replacer) {
+            var d = this.get(key);
+            if (d instanceof Array) {
+              data = d.concat(data);
+            } else if (d !== null) {
+              var type = typeof d;
+              if (type === typeof data && type === "object") {
+                for (var k in data) {
+                  d[k] = data[k];
+                }
+                data = d;
+              } else {
+                data = d + data;
+              }
+            }
+            _.set(this._area, this._in(key), _.stringify(data, replacer));
+            return data;
+          },
+          remove: function(key, alt) {
+            var d = this.get(key, alt);
+            _.remove(this._area, this._in(key));
+            return d;
+          },
+          clear: function() {
+            if (!this._ns) {
+              _.clear(this._area);
+            } else {
+              this.each(function(k) {
+                _.remove(this._area, this._in(k));
+              }, 1);
+            }
+            return this;
+          },
+          clearAll: function() {
+            var area = this._area;
+            for (var id in _.areas) {
+              if (_.areas.hasOwnProperty(id)) {
+                this._area = _.areas[id];
+                this.clear();
+              }
+            }
+            this._area = area;
+            return this;
+          },
+          // internal use functions
+          _in: function(k) {
+            if (typeof k !== "string") {
+              k = _.stringify(k);
+            }
+            return this._ns ? this._ns + k : k;
+          },
+          _out: function(k) {
+            return this._ns ? k && k.indexOf(this._ns) === 0 ? k.substring(this._ns.length) : void 0 : (
+              // so each() knows to skip it
+              k
+            );
+          }
+        },
+        // end _.storeAPI
+        storage: function(name) {
+          return _.inherit(_.storageAPI, { items: {}, name });
+        },
+        storageAPI: {
+          length: 0,
+          has: function(k) {
+            return this.items.hasOwnProperty(k);
+          },
+          key: function(i) {
+            var c = 0;
+            for (var k in this.items) {
+              if (this.has(k) && i === c++) {
+                return k;
+              }
+            }
+          },
+          setItem: function(k, v) {
+            if (!this.has(k)) {
+              this.length++;
+            }
+            this.items[k] = v;
+          },
+          removeItem: function(k) {
+            if (this.has(k)) {
+              delete this.items[k];
+              this.length--;
+            }
+          },
+          getItem: function(k) {
+            return this.has(k) ? this.items[k] : null;
+          },
+          clear: function() {
+            for (var k in this.items) {
+              this.removeItem(k);
+            }
+          }
+        }
+        // end _.storageAPI
+      };
+      var store2 = (
+        // safely set this up (throws error in IE10/32bit mode for local files)
+        _.Store("local", function() {
+          try {
+            return localStorage;
+          } catch (e) {
+          }
+        }())
+      );
+      store2.local = store2;
+      store2._ = _;
+      store2.area("session", function() {
+        try {
+          return sessionStorage;
+        } catch (e) {
+        }
+      }());
+      store2.area("page", _.storage("page"));
+      if (typeof define === "function" && define.amd !== void 0) {
+        define("store2", [], function() {
+          return store2;
+        });
+      } else if (typeof module2 !== "undefined" && module2.exports) {
+        module2.exports = store2;
+      } else {
+        if (window.store) {
+          _.conflict = window.store;
+        }
+        window.store = store2;
+      }
+    })(exports, exports && exports.define);
+  }
+});
+
+// ../../node_modules/@storybook/types/dist/index.js
+var require_dist = __commonJS({
+  "../../node_modules/@storybook/types/dist/index.js"(exports, module2) {
+    "use strict";
+    var __defProp2 = Object.defineProperty;
+    var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
+    var __getOwnPropNames2 = Object.getOwnPropertyNames;
+    var __hasOwnProp2 = Object.prototype.hasOwnProperty;
+    var __export2 = (target, all) => {
+      for (var name in all)
+        __defProp2(target, name, { get: all[name], enumerable: true });
+    };
+    var __copyProps2 = (to, from, except, desc) => {
+      if (from && typeof from == "object" || typeof from == "function")
+        for (let key of __getOwnPropNames2(from))
+          !__hasOwnProp2.call(to, key) && key !== except && __defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
+      return to;
+    };
+    var __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: true }), mod);
+    var src_exports2 = {};
+    __export2(src_exports2, { Addon_TypesEnum: () => Addon_TypesEnum2 });
+    module2.exports = __toCommonJS2(src_exports2);
+    var Addon_TypesEnum2 = ((Addon_TypesEnum22) => (Addon_TypesEnum22.TAB = "tab", Addon_TypesEnum22.PANEL = "panel", Addon_TypesEnum22.TOOL = "tool", Addon_TypesEnum22.TOOLEXTRA = "toolextra", Addon_TypesEnum22.PREVIEW = "preview", Addon_TypesEnum22.experimental_PAGE = "page", Addon_TypesEnum22.experimental_SIDEBAR_BOTTOM = "sidebar-bottom", Addon_TypesEnum22.experimental_SIDEBAR_TOP = "sidebar-top", Addon_TypesEnum22))(Addon_TypesEnum2 || {});
+  }
+});
+
+// src/index.tsx
+var src_exports = {};
+__export(src_exports, {
+  Button: () => Button,
+  ButtonIcon: () => ButtonIcon,
+  ButtonText: () => ButtonText,
+  ComponentNode: () => ComponentNode,
+  Explorer: () => Explorer,
+  GroupNode: () => GroupNode,
+  IconButton: () => IconButton,
+  Layout: () => Layout,
+  LayoutProvider: () => LayoutProvider,
+  LeafNodeStyleWrapper: () => LeafNodeStyleWrapper,
+  Node: () => Node,
+  RootNode: () => RootNode,
+  RootNodeText: () => RootNodeText,
+  Sidebar: () => Sidebar,
+  StoryNode: () => StoryNode,
+  Tree: () => Tree,
+  isExpandType: () => isExpandType,
+  useCombination: () => useCombination,
+  useLayout: () => useLayout
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/TreeNode.tsx
+var import_react_native_theming2 = require("@storybook/react-native-theming");
+
+// src/icon/ComponentIcon.tsx
+var import_react_native_svg = __toESM(require("react-native-svg"));
+var import_jsx_runtime = require("react/jsx-runtime");
+function ComponentIcon({ color = "#029CFD", ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native_svg.default, { width: 12, height: 12, viewBox: "0 0 12 12", fill: "none", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react_native_svg.Path,
+    {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M2.5.004a2.5 2.5 0 00-2.5 2.5v7a2.5 2.5 0 002.5 2.5h7a2.5 2.5 0 002.5-2.5v-7a2.5 2.5 0 00-2.5-2.5h-7zm8.5 5.5H6.5v-4.5h3a1.5 1.5 0 011.5 1.5v3zm0 1v3a1.5 1.5 0 01-1.5 1.5h-3v-4.5H11zm-5.5 4.5v-4.5H1v3a1.5 1.5 0 001.5 1.5h3zM1 5.504h4.5v-4.5h-3a1.5 1.5 0 00-1.5 1.5v3z",
+      fill: color
+    }
+  ) });
+}
+
+// src/icon/GroupIcon.tsx
+var import_react_native_svg2 = __toESM(require("react-native-svg"));
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function GroupIcon({ color = "#6F2CAC", ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_svg2.default, { width: 15, height: 15, viewBox: "0 0 15 15", fill: "none", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_react_native_svg2.Path,
+    {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M6.962 3.704L5.376 2.118H1.057v9.514h12.685V3.704h-6.78zM7.4 2.647L6.124 1.37a1.057 1.057 0 00-.748-.31H.53A.529.529 0 000 1.59v10.57c0 .292.237.529.529.529H14.27a.529.529 0 00.528-.529V3.175a.529.529 0 00-.528-.528H7.4z",
+      fill: color
+    }
+  ) });
+}
+
+// src/icon/StoryIcon.tsx
+var import_react_native_svg3 = __toESM(require("react-native-svg"));
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function StoryIcon({ color = "#37D5D3", ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_svg3.default, { width: 12, height: 12, viewBox: "0 0 12 12", fill: "none", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    import_react_native_svg3.Path,
+    {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M3 0h6c.237 0 .428.192.428.429V11.57c0 .224-.17.407-.389.427a.396.396 0 01-.318-.101L6 9.565l-2.721 2.332a.395.395 0 01-.325.1.429.429 0 01-.383-.426V.43C2.571.192 2.763 0 3 0zm.428 10.64l2.284-1.958.034-.028a.39.39 0 01.289-.081c.087.007.172.04.244.102L8.57 10.64V.857H3.428v9.783z",
+      fill: color
+    }
+  ) });
+}
+
+// src/icon/CollapseIcon.tsx
+var import_react_native_theming = require("@storybook/react-native-theming");
+var import_polished = require("polished");
+var import_react_native_svg4 = __toESM(require("react-native-svg"));
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var CollapseIconWrapper = import_react_native_theming.styled.View(
+  ({ theme, isExpanded }) => ({
+    width: 8,
+    height: 8,
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    color: (0, import_polished.transparentize)(0.4, theme.textMutedColor),
+    transform: isExpanded ? "rotateZ(90deg)" : "none",
+    transition: "transform .1s ease-out"
+  })
+);
+var CollapseIcon = ({ isExpanded }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CollapseIconWrapper, { isExpanded, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CollapseSVG, {}) });
+function CollapseSVG(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_svg4.default, { width: 8, height: 8, fill: "none", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    import_react_native_svg4.Path,
+    {
+      fill: "#73828C",
+      d: "M1.896 7.146a.5.5 0 10.708.708l3.5-3.5a.5.5 0 000-.708l-3.5-3.5a.5.5 0 10-.708.708L5.043 4 1.896 7.146z"
+    }
+  ) });
+}
+
+// src/TreeNode.tsx
+var import_react = __toESM(require("react"));
+var import_polished2 = require("polished");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var BranchNodeText = import_react_native_theming2.styled.Text(({ theme }) => ({
+  textAlign: "left",
+  fontSize: theme.typography.size.s2,
+  flexShrink: 1
+}));
+var BranchNode = import_react_native_theming2.styled.TouchableOpacity(({ depth = 0, isExpandable = false, theme }) => ({
+  width: "100%",
+  border: "none",
+  cursor: "pointer",
+  display: "flex",
+  flexDirection: "row",
+  alignItems: "flex-start",
+  alignSelf: "flex-start",
+  paddingLeft: (isExpandable ? 8 : 22) + depth * 18,
+  background: "transparent",
+  minHeight: 28,
+  borderRadius: 4,
+  gap: 6,
+  paddingTop: 5,
+  paddingBottom: 4,
+  // will this actually do anything?
+  "&:hover, &:focus": {
+    background: (0, import_polished2.transparentize)(0.93, theme.color.secondary),
+    outline: "none"
+  }
+}));
+var LeafNode = import_react_native_theming2.styled.TouchableOpacity(
+  ({ depth = 0, selected, theme }) => ({
+    alignSelf: "flex-start",
+    cursor: "pointer",
+    color: "inherit",
+    display: "flex",
+    gap: 6,
+    flexDirection: "row",
+    alignItems: "flex-start",
+    paddingLeft: 22 + depth * 18,
+    paddingTop: 5,
+    paddingBottom: 4,
+    backgroundColor: selected ? theme.color.secondary : void 0,
+    // flex: 1,
+    // not sure 👇
+    width: "100%",
+    borderRadius: 4,
+    paddingRight: 20,
+    minHeight: 28
+  })
+);
+var LeafNodeText = import_react_native_theming2.styled.Text(({ theme, selected }) => ({
+  fontSize: theme.typography.size.s2,
+  flexShrink: 1,
+  color: selected ? theme.color.lightest : theme.color.defaultText
+}));
+var Wrapper = import_react_native_theming2.styled.View({
+  display: "flex",
+  flexDirection: "row",
+  alignItems: "center",
+  gap: 6,
+  marginTop: 2
+});
+var GroupNode = import_react.default.memo(function GroupNode2({
+  children,
+  isExpanded = false,
+  isExpandable = false,
+  ...props
+}) {
+  const theme = (0, import_react_native_theming2.useTheme)();
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(BranchNode, { isExpandable, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Wrapper, { children: [
+      isExpandable && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CollapseIcon, { isExpanded }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        GroupIcon,
+        {
+          width: "14",
+          height: "14",
+          color: theme.base === "dark" ? theme.color.primary : theme.color.ultraviolet
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(BranchNodeText, { children })
+  ] });
+});
+var ComponentNode = import_react.default.memo(
+  function ComponentNode2({ children, isExpanded, isExpandable, ...props }) {
+    const theme = (0, import_react_native_theming2.useTheme)();
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(BranchNode, { isExpandable, ...props, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Wrapper, { children: [
+        isExpandable && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CollapseIcon, { isExpanded }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ComponentIcon, { width: 12, height: 12, color: theme.color.secondary })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(BranchNodeText, { children })
+    ] });
+  }
+);
+var StoryNode = import_react.default.memo(function StoryNode2({
+  children,
+  ...props
+}) {
+  const theme = (0, import_react_native_theming2.useTheme)();
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(LeafNode, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Wrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      StoryIcon,
+      {
+        width: 14,
+        height: 14,
+        color: props.selected ? theme.color.lightest : theme.color.seafoam
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(LeafNodeText, { selected: props.selected, children })
+  ] });
+});
+
+// src/Tree.tsx
+var import_manager_api2 = require("@storybook/manager-api");
+var import_react_native_theming5 = require("@storybook/react-native-theming");
+var import_react6 = __toESM(require("react"));
+
+// src/Button.tsx
+var import_react_native_theming3 = require("@storybook/react-native-theming");
+var import_react2 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var Button = (0, import_react2.forwardRef)(
+  ({
+    // asChild = false,
+    Icon,
+    animation = "none",
+    size = "small",
+    variant = "outline",
+    padding = "medium",
+    disabled = false,
+    active = false,
+    onPress,
+    children,
+    text,
+    ...props
+  }, ref) => {
+    const [isAnimating, setIsAnimating] = (0, import_react2.useState)(false);
+    const handleClick = (event) => {
+      if (onPress)
+        onPress(event);
+      if (animation === "none")
+        return;
+      setIsAnimating(true);
+    };
+    (0, import_react2.useEffect)(() => {
+      const timer = setTimeout(() => {
+        if (isAnimating)
+          setIsAnimating(false);
+      }, 1e3);
+      return () => clearTimeout(timer);
+    }, [isAnimating]);
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+      StyledButton,
+      {
+        ref,
+        variant,
+        size,
+        padding,
+        disabled,
+        active,
+        animating: isAnimating,
+        animation,
+        onPress: handleClick,
+        ...props,
+        children: [
+          Icon && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ButtonIcon, { Icon, variant, active }),
+          text && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ButtonText, { variant, active, children: text }),
+          children
+        ]
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+var StyledButton = import_react_native_theming3.styled.TouchableOpacity(({
+  theme,
+  variant,
+  size,
+  disabled,
+  active,
+  /* animating, animation, */
+  padding
+}) => ({
+  border: 0,
+  cursor: disabled ? "not-allowed" : "pointer",
+  display: "flex",
+  flexDirection: "row",
+  gap: 6,
+  alignItems: "center",
+  justifyContent: "center",
+  overflow: "hidden",
+  paddingHorizontal: (() => {
+    if (padding === "small" && size === "small")
+      return 7;
+    if (padding === "small" && size === "medium")
+      return 9;
+    if (size === "small")
+      return 10;
+    if (size === "medium")
+      return 12;
+    return 0;
+  })(),
+  paddingVertical: 0,
+  height: size === "small" ? 28 : 32,
+  position: "relative",
+  //   textDecoration: 'none',
+  transitionProperty: "background, box-shadow",
+  transitionDuration: "150ms",
+  transitionTimingFunction: "ease-out",
+  // verticalAlign: 'top',
+  whiteSpace: "nowrap",
+  userSelect: "none",
+  opacity: disabled ? 0.5 : 1,
+  margin: 0,
+  backgroundColor: (() => {
+    if (variant === "solid")
+      return theme.color.secondary;
+    if (variant === "outline")
+      return theme.button$.background;
+    if (variant === "ghost" && active)
+      return theme.background.hoverable;
+    return "transparent";
+  })(),
+  boxShadow: variant === "outline" ? `${theme.button$.border} 0 0 0 1px inset` : "none",
+  borderRadius: theme.input.borderRadius,
+  // Making sure that the button never shrinks below its minimum size
+  flexShrink: 0
+  //   '&:hover': {
+  //     color: variant === 'ghost' ? theme.color.secondary : null,
+  //     background: (() => {
+  //       let bgColor = theme.color.secondary;
+  //       if (variant === 'solid') bgColor = theme.color.secondary;
+  //       if (variant === 'outline') bgColor = theme.button.background;
+  //       if (variant === 'ghost') return transparentize(0.86, theme.color.secondary);
+  //       return theme.base === 'light' ? darken(0.02, bgColor) : lighten(0.03, bgColor);
+  //     })(),
+  //   },
+  //   '&:active': {
+  //     color: variant === 'ghost' ? theme.color.secondary : null,
+  //     background: (() => {
+  //       let bgColor = theme.color.secondary;
+  //       if (variant === 'solid') bgColor = theme.color.secondary;
+  //       if (variant === 'outline') bgColor = theme.button.background;
+  //       if (variant === 'ghost') return theme.background.hoverable;
+  //       return theme.base === 'light' ? darken(0.02, bgColor) : lighten(0.03, bgColor);
+  //     })(),
+  //   },
+  //   '&:focus': {
+  //     boxShadow: `${rgba(theme.color.secondary, 1)} 0 0 0 1px inset`,
+  //     outline: 'none',
+  //   },
+  //   '> svg': {
+  //     animation:
+  //       animating && animation !== 'none' ? `${theme.animation[animation]} 1000ms ease-out` : '',
+  //   },
+}));
+var ButtonText = import_react_native_theming3.styled.Text(({ theme, variant, active }) => ({
+  color: (() => {
+    if (variant === "solid")
+      return theme.color.lightest;
+    if (variant === "outline")
+      return theme.input.color;
+    if (variant === "ghost" && active)
+      return theme.color.secondary;
+    if (variant === "ghost")
+      return theme.color.mediumdark;
+    return theme.input.color;
+  })(),
+  flexDirection: "row",
+  gap: 6,
+  textAlign: "center",
+  // lineHeight: theme.typography.size.s1,
+  fontSize: theme.typography.size.s1,
+  fontWeight: theme.typography.weight.bold
+}));
+var ButtonIcon = ({
+  Icon,
+  active,
+  variant
+}) => {
+  const theme = (0, import_react_native_theming3.useTheme)();
+  const color = (0, import_react2.useMemo)(() => {
+    if (variant === "solid")
+      return theme.color.lightest;
+    if (variant === "outline")
+      return theme.input.color;
+    if (variant === "ghost" && active)
+      return theme.color.secondary;
+    if (variant === "ghost")
+      return theme.color.mediumdark;
+    return theme.input.color;
+  }, [
+    active,
+    theme.color.lightest,
+    theme.color.mediumdark,
+    theme.color.secondary,
+    theme.input.color,
+    variant
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { color });
+};
+
+// src/IconButton.tsx
+var import_react3 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var IconButton = (0, import_react3.forwardRef)(
+  ({ padding = "small", variant = "ghost", ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Button, { padding, variant, ref, ...props });
+  }
+);
+IconButton.displayName = "IconButton";
+
+// src/useExpanded.ts
+var import_manager_api = require("@storybook/manager-api");
+var import_core_events = require("@storybook/core-events");
+var import_react4 = require("react");
+
+// src/util/tree.ts
+var import_memoizerific = __toESM(require("memoizerific"));
+
+// src/constants.ts
+var BREAKPOINT = 600;
+var MEDIA_DESKTOP_BREAKPOINT = `@media (min-width: ${BREAKPOINT}px)`;
+var DEFAULT_REF_ID = "storybook_internal";
+
+// src/util/tree.ts
+var createId = (itemId, refId) => !refId || refId === DEFAULT_REF_ID ? itemId : `${refId}_${itemId}`;
+var get = (0, import_memoizerific.default)(1e3)((id, dataset) => dataset[id]);
+var getParent = (0, import_memoizerific.default)(1e3)((id, dataset) => {
+  const item = get(id, dataset);
+  return item && item.type !== "root" ? get(item.parent, dataset) : void 0;
+});
+var getParents = (0, import_memoizerific.default)(1e3)((id, dataset) => {
+  const parent = getParent(id, dataset);
+  return parent ? [parent, ...getParents(parent.id, dataset)] : [];
+});
+var getAncestorIds = (0, import_memoizerific.default)(1e3)(
+  (data, id) => getParents(id, data).map((item) => item.id)
+);
+var getDescendantIds = (0, import_memoizerific.default)(1e3)(
+  (data, id, skipLeafs) => {
+    const entry = data[id];
+    const children = entry.type === "story" || entry.type === "docs" ? [] : entry.children;
+    return children.reduce((acc, childId) => {
+      const child = data[childId];
+      if (!child || skipLeafs && (child.type === "story" || child.type === "docs"))
+        return acc;
+      acc.push(childId, ...getDescendantIds(data, childId, skipLeafs));
+      return acc;
+    }, []);
+  }
+);
+function getPath(item, ref) {
+  const parent = item.type !== "root" && item.parent ? ref.index[item.parent] : null;
+  if (parent)
+    return [...getPath(parent, ref), parent.name];
+  return ref.id === DEFAULT_REF_ID ? [] : [ref.title || ref.id];
+}
+var searchItem = (item, ref) => {
+  return { ...item, refId: ref.id, path: getPath(item, ref) };
+};
+var getStateType = (isLoading, isAuthRequired, isError, isEmpty) => {
+  switch (true) {
+    case isAuthRequired:
+      return "auth";
+    case isError:
+      return "error";
+    case isLoading:
+      return "loading";
+    case isEmpty:
+      return "empty";
+    default:
+      return "ready";
+  }
+};
+var removeNoiseFromName = (storyName) => storyName.replaceAll(/(\s|-|_)/gi, "");
+var isStoryHoistable = (storyName, componentName) => removeNoiseFromName(storyName) === removeNoiseFromName(componentName);
+
+// src/useExpanded.ts
+var initializeExpanded = ({
+  //   refId,
+  //   data,
+  initialExpanded,
+  //   highlightedRef,
+  rootIds
+}) => {
+  const highlightedAncestors = [];
+  return [...rootIds, ...highlightedAncestors].reduce(
+    (acc, id) => Object.assign(acc, { [id]: id in initialExpanded ? initialExpanded[id] : true }),
+    {}
+  );
+};
+var noop = () => {
+};
+var useExpanded = ({
+  //   containerRef,
+  //   isBrowsing,
+  refId,
+  data,
+  initialExpanded,
+  rootIds,
+  //   highlightedRef,
+  //   setHighlightedItemId,
+  // onSelectStoryId,
+  selectedStoryId
+}) => {
+  const api = (0, import_manager_api.useStorybookApi)();
+  const [expanded, setExpanded] = (0, import_react4.useReducer)(
+    (state, { ids, value }) => ids.reduce((acc, id) => Object.assign(acc, { [id]: value }), { ...state }),
+    {
+      refId,
+      data,
+      /* highlightedRef */
+      rootIds,
+      initialExpanded
+    },
+    initializeExpanded
+  );
+  const updateExpanded = (0, import_react4.useCallback)(({ ids, value }) => {
+    setExpanded({ ids, value });
+  }, []);
+  (0, import_react4.useEffect)(() => {
+    setExpanded({ ids: getAncestorIds(data, selectedStoryId), value: true });
+  }, [data, selectedStoryId]);
+  const collapseAll = (0, import_react4.useCallback)(() => {
+    const ids = Object.keys(data).filter((id) => !rootIds.includes(id));
+    setExpanded({ ids, value: false });
+  }, [data, rootIds]);
+  const expandAll = (0, import_react4.useCallback)(() => {
+    setExpanded({ ids: Object.keys(data), value: true });
+  }, [data]);
+  (0, import_react4.useEffect)(() => {
+    if (!api)
+      return noop;
+    api.on(import_core_events.STORIES_COLLAPSE_ALL, collapseAll);
+    api.on(import_core_events.STORIES_EXPAND_ALL, expandAll);
+    return () => {
+      api.off(import_core_events.STORIES_COLLAPSE_ALL, collapseAll);
+      api.off(import_core_events.STORIES_EXPAND_ALL, expandAll);
+    };
+  }, [api, collapseAll, expandAll]);
+  return [expanded, updateExpanded];
+};
+
+// src/util/status.tsx
+var import_react_native_theming4 = require("@storybook/react-native-theming");
+var import_react_native_svg5 = __toESM(require("react-native-svg"));
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function CircleIcon({ height = 14, width = 14, color, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native_svg5.default, { width, height, viewBox: "0 0 14 14", fill: "none", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native_svg5.Path, { d: "M14 7A7 7 0 110 7a7 7 0 0114 0z", fill: color }) });
+}
+function SmallIcons(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CircleIcon, { width: 6, height: 6, ...props });
+}
+function LoadingIcons(props) {
+  const theme = (0, import_react_native_theming4.useTheme)();
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    SmallIcons,
+    {
+      color: theme.base === "light" ? theme.color.mediumdark : theme.color.darker,
+      ...props
+    }
+  );
+}
+var statusPriority = ["unknown", "pending", "success", "warn", "error"];
+var statusMapping = {
+  unknown: [null, null],
+  pending: [/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(LoadingIcons, {}, "icon"), "currentColor"],
+  success: [/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SmallIcons, { color: "green" }, "icon"), "currentColor"],
+  warn: [/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SmallIcons, { color: "orange" }, "icon"), "#A15C20"],
+  error: [/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SmallIcons, { color: "red" }, "icon"), "brown"]
+};
+var getHighestStatus = (statuses) => {
+  return statusPriority.reduce(
+    (acc, status) => statuses.includes(status) ? status : acc,
+    "unknown"
+  );
+};
+function getGroupStatus(collapsedData, status) {
+  return Object.values(collapsedData).reduce((acc, item) => {
+    if (item.type === "group" || item.type === "component") {
+      const leafs = getDescendantIds(collapsedData, item.id, false).map((id) => collapsedData[id]).filter((i) => i.type === "story");
+      const combinedStatus = getHighestStatus(
+        leafs.flatMap((story) => Object.values(status?.[story.id] || {})).map((s) => s.status)
+      );
+      if (combinedStatus) {
+        acc[item.id] = combinedStatus;
+      }
+    }
+    return acc;
+  }, {});
+}
+
+// src/Tree.tsx
+var import_react_native2 = require("react-native");
+
+// src/icon/ExpandAllIcon.tsx
+var import_react_native_svg6 = require("react-native-svg");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var ExpandAllIcon = ({
+  color = "#2E3438",
+  width = 14,
+  height = 14,
+  ...props
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_svg6.Svg, { width, height, viewBox: "0 0 14 14", fill: "none", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    import_react_native_svg6.Path,
+    {
+      d: "M7.354.146l4 4a.5.5 0 01-.708.708L7 1.207 3.354 4.854a.5.5 0 11-.708-.708l4-4a.5.5 0 01.708 0zM11.354 9.146a.5.5 0 010 .708l-4 4a.5.5 0 01-.708 0l-4-4a.5.5 0 11.708-.708L7 12.793l3.646-3.647a.5.5 0 01.708 0z",
+      fill: color
+    }
+  ) });
+};
+
+// src/icon/CollapseAllIcon.tsx
+var import_react_native_svg7 = require("react-native-svg");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var CollapseAllIcon = ({
+  color = "#2E3438",
+  width = 14,
+  height = 14,
+  ...props
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native_svg7.Svg, { width, height, viewBox: "0 0 14 14", fill: "none", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    import_react_native_svg7.Path,
+    {
+      d: "M3.354.146a.5.5 0 10-.708.708l4 4a.5.5 0 00.708 0l4-4a.5.5 0 00-.708-.708L7 3.793 3.354.146zM6.646 9.146a.5.5 0 01.708 0l4 4a.5.5 0 01-.708.708L7 10.207l-3.646 3.647a.5.5 0 01-.708-.708l4-4z",
+      fill: color
+    }
+  ) });
+};
+
+// src/LayoutProvider.tsx
+var import_react5 = require("react");
+var import_react_native = require("react-native");
+var import_jsx_runtime11 = (
+  // <BottomSheetModalProvider>
+  require("react/jsx-runtime")
+);
+var LayoutContext = (0, import_react5.createContext)({
+  // isMobileMenuOpen: false,
+  openMobileMenu: () => {
+  },
+  closeMobileMenu: () => {
+  },
+  // isMobileAboutOpen: false,
+  // setMobileAboutOpen: () => {},
+  // isMobilePanelOpen: false,
+  // setMobilePanelOpen: () => {},
+  isDesktop: false,
+  isMobile: false
+});
+var LayoutProvider = ({ children }) => {
+  const { width } = (0, import_react_native.useWindowDimensions)();
+  const isDesktop = width >= BREAKPOINT;
+  const isMobile = !isDesktop;
+  const openMobileMenu = (0, import_react5.useCallback)(() => {
+  }, []);
+  const closeMobileMenu = (0, import_react5.useCallback)(() => {
+  }, []);
+  const contextValue = (0, import_react5.useMemo)(
+    () => ({
+      // isMobileMenuOpen,
+      openMobileMenu,
+      closeMobileMenu,
+      // isMobileAboutOpen,
+      // setMobileAboutOpen,
+      // isMobilePanelOpen,
+      // setMobilePanelOpen,
+      isDesktop,
+      isMobile
+    }),
+    [
+      // isMobileMenuOpen,
+      openMobileMenu,
+      closeMobileMenu,
+      // // isMobileAboutOpen,
+      // setMobileAboutOpen,
+      // isMobilePanelOpen,
+      // setMobilePanelOpen,
+      isDesktop,
+      isMobile
+    ]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(LayoutContext.Provider, { value: contextValue, children }) });
+};
+var useLayout = () => (0, import_react5.useContext)(LayoutContext);
+
+// src/Tree.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var Node = import_react6.default.memo(function Node2({
+  item,
+  //   status,
+  refId,
+  isOrphan,
+  isDisplayed,
+  isSelected,
+  isFullyExpanded,
+  color: _2,
+  setFullyExpanded,
+  isExpanded,
+  setExpanded,
+  onSelectStoryId,
+  api: _1
+}) {
+  const { isDesktop, isMobile, closeMobileMenu } = useLayout();
+  if (!isDisplayed) {
+    return null;
+  }
+  const id = createId(item.id, refId);
+  if (item.type === "story") {
+    const LeafNode2 = StoryNode;
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(LeafNodeStyleWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      LeafNode2,
+      {
+        selected: isSelected,
+        id,
+        depth: isOrphan ? item.depth : item.depth - 1,
+        onPress: () => {
+          onSelectStoryId(item.id);
+          if (isMobile)
+            closeMobileMenu();
+        },
+        children: item.renderLabel?.(item) || item.name
+      },
+      id
+    ) });
+  }
+  if (item.type === "root") {
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+      RootNode,
+      {
+        id,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+            CollapseButton,
+            {
+              "data-action": "collapse-root",
+              onPress: (event) => {
+                event.preventDefault();
+                setExpanded({ ids: [item.id], value: !isExpanded });
+              },
+              "aria-expanded": isExpanded,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CollapseIcon, { isExpanded }),
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native2.Text, { children: item.renderLabel?.(item) || item.name })
+              ]
+            }
+          ),
+          isExpanded && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            IconButton,
+            {
+              "aria-label": isFullyExpanded ? "Expand" : "Collapse",
+              "data-action": "expand-all",
+              "data-expanded": isFullyExpanded,
+              onPress: (event) => {
+                event.preventDefault();
+                setFullyExpanded();
+              },
+              children: isFullyExpanded ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CollapseAllIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ExpandAllIcon, {})
+            }
+          )
+        ]
+      },
+      id
+    );
+  }
+  if (item.type === "component" || item.type === "group") {
+    const BranchNode2 = item.type === "component" ? ComponentNode : GroupNode;
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      BranchNode2,
+      {
+        id,
+        "aria-controls": item.children && item.children[0],
+        "aria-expanded": isExpanded,
+        depth: isOrphan ? item.depth : item.depth - 1,
+        isComponent: item.type === "component",
+        isExpandable: item.children && item.children.length > 0,
+        isExpanded,
+        onPress: (event) => {
+          event.preventDefault();
+          setExpanded({ ids: [item.id], value: !isExpanded });
+          if (item.type === "component" && !isExpanded && isDesktop)
+            onSelectStoryId(item.id);
+        },
+        children: item.renderLabel?.(item) || item.name
+      },
+      id
+    );
+  }
+  return null;
+});
+var LeafNodeStyleWrapper = import_react_native_theming5.styled.View(({ theme }) => ({
+  position: "relative",
+  display: "flex",
+  flexDirection: "row",
+  justifyContent: "space-between",
+  alignItems: "center",
+  paddingRight: 20,
+  color: theme.color.defaultText,
+  background: "transparent",
+  minHeight: 28,
+  borderRadius: 4
+}));
+var RootNode = import_react_native_theming5.styled.View(({}) => ({
+  display: "flex",
+  flexDirection: "row",
+  alignItems: "center",
+  justifyContent: "space-between",
+  marginTop: 16,
+  marginBottom: 4,
+  minHeight: 28
+}));
+var RootNodeText = import_react_native_theming5.styled.Text(({ theme }) => ({
+  fontSize: theme.typography.size.s1 - 1,
+  fontWeight: theme.typography.weight.bold,
+  color: theme.textMutedColor,
+  lineHeight: 16,
+  letterSpacing: 2.5,
+  //   letterSpacing: '0.16em',
+  textTransform: "uppercase"
+}));
+var CollapseButton = import_react_native_theming5.styled.TouchableOpacity(({}) => ({
+  display: "flex",
+  flexDirection: "row",
+  paddingVertical: 0,
+  paddingHorizontal: 8,
+  borderRadius: 4,
+  //   transition: 'color 150ms, box-shadow 150ms',
+  gap: 6,
+  alignItems: "center",
+  cursor: "pointer",
+  height: 28
+}));
+var Tree = import_react6.default.memo(function Tree2({
+  // isBrowsing,
+  isMain,
+  refId,
+  data,
+  status,
+  docsMode,
+  selectedStoryId,
+  onSelectStoryId
+}) {
+  const containerRef = (0, import_react6.useRef)(null);
+  const api = (0, import_manager_api2.useStorybookApi)();
+  const [rootIds, orphanIds, initialExpanded] = (0, import_react6.useMemo)(
+    () => Object.keys(data).reduce(
+      (acc, id) => {
+        const item = data[id];
+        if (item.type === "root")
+          acc[0].push(id);
+        else if (!item.parent)
+          acc[1].push(id);
+        if (item.type === "root" && item.startCollapsed)
+          acc[2][id] = false;
+        return acc;
+      },
+      [[], [], {}]
+    ),
+    [data]
+  );
+  const { expandableDescendants } = (0, import_react6.useMemo)(() => {
+    return [...orphanIds, ...rootIds].reduce(
+      (acc, nodeId) => {
+        acc.expandableDescendants[nodeId] = getDescendantIds(data, nodeId, false).filter(
+          (d) => !["story", "docs"].includes(data[d].type)
+        );
+        return acc;
+      },
+      { orphansFirst: [], expandableDescendants: {} }
+    );
+  }, [data, rootIds, orphanIds]);
+  const singleStoryComponentIds = (0, import_react6.useMemo)(() => {
+    return Object.keys(data).filter((id) => {
+      const entry = data[id];
+      if (entry.type !== "component")
+        return false;
+      const { children = [], name } = entry;
+      if (children.length !== 1)
+        return false;
+      const onlyChild = data[children[0]];
+      if (onlyChild.type === "docs")
+        return true;
+      if (onlyChild.type === "story")
+        return isStoryHoistable(onlyChild.name, name);
+      return false;
+    });
+  }, [data]);
+  const collapsedItems = (0, import_react6.useMemo)(
+    () => Object.keys(data).filter((id) => !singleStoryComponentIds.includes(id)),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [singleStoryComponentIds]
+  );
+  const collapsedData = (0, import_react6.useMemo)(() => {
+    return singleStoryComponentIds.reduce(
+      (acc, id) => {
+        const { children, parent, name } = data[id];
+        const [childId] = children;
+        if (parent) {
+          const siblings = [...data[parent].children];
+          siblings[siblings.indexOf(id)] = childId;
+          acc[parent] = { ...data[parent], children: siblings };
+        }
+        acc[childId] = {
+          ...data[childId],
+          name,
+          parent,
+          depth: data[childId].depth - 1
+        };
+        return acc;
+      },
+      { ...data }
+    );
+  }, [data]);
+  const ancestry = (0, import_react6.useMemo)(() => {
+    return collapsedItems.reduce(
+      (acc, id) => Object.assign(acc, { [id]: getAncestorIds(collapsedData, id) }),
+      {}
+    );
+  }, [collapsedItems, collapsedData]);
+  const [expanded, setExpanded] = useExpanded({
+    // containerRef,
+    // isBrowsing,
+    refId,
+    data: collapsedData,
+    initialExpanded,
+    rootIds,
+    // highlightedRef,
+    // setHighlightedItemId,
+    selectedStoryId,
+    onSelectStoryId
+  });
+  const groupStatus = (0, import_react6.useMemo)(() => getGroupStatus(collapsedData, status), [collapsedData, status]);
+  const treeItems = (0, import_react6.useMemo)(() => {
+    return collapsedItems.map((itemId) => {
+      const item = collapsedData[itemId];
+      const id = createId(itemId, refId);
+      if (item.type === "root") {
+        const descendants = expandableDescendants[item.id];
+        const isFullyExpanded = descendants.every((d) => expanded[d]);
+        return (
+          // @ts-expect-error (TODO)
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            Root,
+            {
+              item,
+              refId,
+              isOrphan: false,
+              isDisplayed: true,
+              isSelected: selectedStoryId === itemId,
+              isExpanded: !!expanded[itemId],
+              setExpanded,
+              isFullyExpanded,
+              expandableDescendants: descendants,
+              onSelectStoryId
+            },
+            id
+          )
+        );
+      }
+      const isDisplayed = !item.parent || ancestry[itemId].every((a) => expanded[a]);
+      const color = groupStatus[itemId] ? statusMapping[groupStatus[itemId]][1] : null;
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        Node,
+        {
+          api,
+          item,
+          status: status?.[itemId],
+          refId,
+          color,
+          docsMode,
+          isOrphan: orphanIds.some((oid) => itemId === oid || itemId.startsWith(`${oid}-`)),
+          isDisplayed,
+          isSelected: selectedStoryId === itemId,
+          isExpanded: !!expanded[itemId],
+          setExpanded,
+          onSelectStoryId
+        },
+        id
+      );
+    });
+  }, [
+    ancestry,
+    api,
+    collapsedData,
+    collapsedItems,
+    docsMode,
+    expandableDescendants,
+    expanded,
+    groupStatus,
+    onSelectStoryId,
+    orphanIds,
+    refId,
+    selectedStoryId,
+    setExpanded,
+    status
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Container, { ref: containerRef, hasOrphans: isMain && orphanIds.length > 0, children: treeItems });
+});
+var Container = import_react_native_theming5.styled.View((props) => ({
+  marginTop: props.hasOrphans ? 20 : 0,
+  marginBottom: 20
+}));
+var Root = import_react6.default.memo(function Root2({
+  setExpanded,
+  isFullyExpanded,
+  expandableDescendants,
+  ...props
+}) {
+  const setFullyExpanded = (0, import_react6.useCallback)(
+    () => setExpanded({ ids: expandableDescendants, value: !isFullyExpanded }),
+    [setExpanded, isFullyExpanded, expandableDescendants]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    Node,
+    {
+      ...props,
+      setExpanded,
+      isFullyExpanded,
+      setFullyExpanded
+    }
+  );
+});
+
+// src/Explorer.tsx
+var import_react8 = __toESM(require("react"));
+
+// src/Refs.tsx
+var import_react7 = __toESM(require("react"));
+var import_manager_api3 = require("@storybook/manager-api");
+var import_react_native_theming6 = require("@storybook/react-native-theming");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var Wrapper2 = import_react_native_theming6.styled.View(({}) => ({
+  position: "relative"
+}));
+var Ref = import_react7.default.memo(function Ref2(props) {
+  const { docsOptions } = (0, import_manager_api3.useStorybookState)();
+  const api = (0, import_manager_api3.useStorybookApi)();
+  const {
+    index,
+    id: refId,
+    title = refId,
+    isLoading: isLoadingMain,
+    isBrowsing,
+    selectedStoryId,
+    // highlightedRef,
+    // setHighlighted,
+    loginUrl,
+    type,
+    expanded = true,
+    indexError,
+    previewInitialized,
+    setSelection
+  } = props;
+  const length = (0, import_react7.useMemo)(() => index ? Object.keys(index).length : 0, [index]);
+  const isLoadingInjected = type === "auto-inject" && !previewInitialized || type === "server-checked";
+  const isLoading = isLoadingMain || isLoadingInjected || type === "unknown";
+  const isError = !!indexError;
+  const isEmpty = !isLoading && length === 0;
+  const isAuthRequired = !!loginUrl && length === 0;
+  const state = getStateType(isLoading, isAuthRequired, isError, isEmpty);
+  const [isExpanded, setExpanded] = (0, import_react7.useState)(expanded);
+  (0, import_react7.useEffect)(() => {
+    if (index && selectedStoryId && index[selectedStoryId]) {
+      setExpanded(true);
+    }
+  }, [setExpanded, index, selectedStoryId]);
+  const onSelectStoryId = (0, import_react7.useCallback)(
+    (storyId) => {
+      setSelection({ refId, storyId });
+      return api && api.selectStory(storyId, DEFAULT_REF_ID);
+    },
+    [api, refId, setSelection]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, { children: isExpanded && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Wrapper2, { "data-title": title, isMain: true, children: state === "ready" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    Tree,
+    {
+      status: props.status,
+      isBrowsing,
+      isMain: true,
+      refId,
+      data: index,
+      docsMode: docsOptions?.docsMode,
+      selectedStoryId,
+      onSelectStoryId
+    }
+  ) }) });
+});
+
+// src/Explorer.tsx
+var import_react_native3 = require("react-native");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_react9 = require("react");
+var Explorer = import_react8.default.memo(function Explorer2({
+  isLoading,
+  isBrowsing,
+  dataset,
+  selected,
+  setSelection
+}) {
+  const containerRef = (0, import_react8.useRef)(null);
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native3.View, { ref: containerRef, id: "storybook-explorer-tree", children: dataset.entries.map(([refId, ref]) => /* @__PURE__ */ (0, import_react9.createElement)(
+    Ref,
+    {
+      ...ref,
+      key: refId,
+      isLoading,
+      isBrowsing,
+      selectedStoryId: selected?.refId === ref.id ? selected.storyId : null,
+      setSelection
+    }
+  )) });
+});
+
+// src/Sidebar.tsx
+var import_react14 = __toESM(require("react"));
+var import_react_native_theming9 = require("@storybook/react-native-theming");
+
+// src/Search.tsx
+var import_manager_api4 = require("@storybook/manager-api");
+var import_react_native_theming7 = require("@storybook/react-native-theming");
+var import_fuse = __toESM(require("fuse.js"));
+var import_react10 = __toESM(require("react"));
+
+// src/types.ts
+function isExpandType(x) {
+  return !!(x && x.showAll);
+}
+
+// src/icon/SearchIcon.tsx
+var import_react_native_svg8 = require("react-native-svg");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var SearchIcon = ({ color = "currentColor", width = 14, height = 14, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native_svg8.Svg, { width, height, viewBox: "0 0 14 14", fill: "none", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    import_react_native_svg8.Path,
+    {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M9.544 10.206a5.5 5.5 0 11.662-.662.5.5 0 01.148.102l3 3a.5.5 0 01-.708.708l-3-3a.5.5 0 01-.102-.148zM10.5 6a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0z",
+      fill: color
+    }
+  ) });
+};
+
+// src/icon/CloseIcon.tsx
+var import_react_native_svg9 = require("react-native-svg");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var CloseIcon = ({ color = "currentColor", width = 14, height = 14, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_react_native_svg9.Svg, { width, height, viewBox: "0 0 14 14", fill: "none", ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      import_react_native_svg9.Path,
+      {
+        d: "M9.854 4.146a.5.5 0 010 .708L7.707 7l2.147 2.146a.5.5 0 01-.708.708L7 7.707 4.854 9.854a.5.5 0 01-.708-.708L6.293 7 4.146 4.854a.5.5 0 11.708-.708L7 6.293l2.146-2.147a.5.5 0 01.708 0z",
+        fill: color
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      import_react_native_svg9.Path,
+      {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M7 14A7 7 0 107 0a7 7 0 000 14zm0-1A6 6 0 107 1a6 6 0 000 12z",
+        fill: color
+      }
+    )
+  ] });
+};
+
+// src/Search.tsx
+var import_react_native4 = require("react-native");
+var import_bottom_sheet = require("@gorhom/bottom-sheet");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var DEFAULT_MAX_SEARCH_RESULTS = 50;
+var options = {
+  shouldSort: true,
+  tokenize: true,
+  findAllMatches: true,
+  includeScore: true,
+  includeMatches: true,
+  threshold: 0.2,
+  location: 0,
+  distance: 100,
+  maxPatternLength: 32,
+  minMatchCharLength: 1,
+  keys: [
+    { name: "name", weight: 0.7 },
+    { name: "path", weight: 0.3 }
+  ]
+};
+var SearchIconWrapper = import_react_native_theming7.styled.View(({ theme }) => ({
+  position: "absolute",
+  top: 0,
+  left: 8,
+  zIndex: 1,
+  pointerEvents: "none",
+  color: theme.textMutedColor,
+  display: "flex",
+  flexDirection: "row",
+  alignItems: "center",
+  height: "100%"
+}));
+var SearchField = import_react_native_theming7.styled.View({
+  display: "flex",
+  flexDirection: "column",
+  position: "relative"
+  // marginBottom: 16,
+});
+var Input = (0, import_react_native_theming7.styled)(import_bottom_sheet.BottomSheetTextInput)(({ theme }) => ({
+  // appearance: 'none',
+  height: 32,
+  paddingLeft: 28,
+  paddingRight: 28,
+  borderWidth: 1,
+  borderColor: theme.appBorderColor,
+  backgroundColor: "transparent",
+  borderRadius: 4,
+  fontSize: theme.typography.size.s1 + 1,
+  // transition: 'all 150ms',
+  color: theme.color.defaultText,
+  width: "100%"
+  // '&:focus, &:active': {
+  //   outline: 0,
+  //   borderColor: theme.color.secondary,
+  //   background: theme.background.app,
+  // },
+  // '&::placeholder': {
+  //   color: theme.textMutedColor,
+  //   opacity: 1,
+  // },
+  // '&:valid ~ code, &:focus ~ code': {
+  //   display: 'none',
+  // },
+  // '&:invalid ~ svg': {
+  //   display: 'none',
+  // },
+  // '&:valid ~ svg': {
+  //   display: 'block',
+  // },
+  // '&::-ms-clear': {
+  //   display: 'none',
+  // },
+  // '&::-webkit-search-decoration, &::-webkit-search-cancel-button, &::-webkit-search-results-button, &::-webkit-search-results-decoration':
+  //   {
+  //     display: 'none',
+  //   },
+}));
+var ClearIcon = import_react_native_theming7.styled.TouchableOpacity(({ theme }) => ({
+  position: "absolute",
+  top: 0,
+  bottom: 0,
+  right: 8,
+  zIndex: 1,
+  color: theme.textMutedColor,
+  cursor: "pointer",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  height: "100%"
+}));
+var Search = import_react10.default.memo(function Search2({
+  children,
+  dataset,
+  setSelection,
+  // enableShortcuts = true,
+  getLastViewed,
+  initialQuery = ""
+}) {
+  const api = (0, import_manager_api4.useStorybookApi)();
+  const inputRef = (0, import_react10.useRef)(null);
+  const [inputValue, setInputValue] = (0, import_react10.useState)(initialQuery);
+  const [isOpen, setIsOpen] = (0, import_react10.useState)(false);
+  const [allComponents, showAllComponents] = (0, import_react10.useState)(false);
+  const selectStory = (0, import_react10.useCallback)(
+    (id, refId) => {
+      if (api) {
+        api.selectStory(id, void 0, { ref: refId !== DEFAULT_REF_ID && refId });
+      }
+      setSelection({ storyId: id, refId });
+      inputRef.current?.blur();
+      showAllComponents(false);
+    },
+    [api, setSelection]
+  );
+  const getItemProps = (0, import_react10.useCallback)(
+    ({ item: result }) => {
+      return {
+        icon: result?.item?.type === "component" ? "component" : "story",
+        // isHighlighted:
+        result,
+        onPress: () => {
+          if (result?.item?.type === "story") {
+            selectStory(result.item.id, result.item.refId);
+          } else if (result?.item?.type === "component") {
+            selectStory(result.item.children[0], result.item.refId);
+          } else if (isExpandType(result) && result.showAll) {
+            result.showAll();
+          }
+        },
+        score: result.score,
+        refIndex: result.refIndex,
+        item: result.item,
+        matches: result.matches,
+        isHighlighted: false
+        // isHighlighted: searchItem.
+        // isHighlighted: searchItem.item.
+      };
+    },
+    [selectStory]
+  );
+  const makeFuse = (0, import_react10.useCallback)(() => {
+    const list = dataset.entries.reduce((acc, [refId, { index, status }]) => {
+      const groupStatus = getGroupStatus(index || {}, status);
+      if (index) {
+        acc.push(
+          ...Object.values(index).map((item) => {
+            const statusValue = status && status[item.id] ? getHighestStatus(Object.values(status[item.id] || {}).map((s) => s.status)) : null;
+            return {
+              ...searchItem(item, dataset.hash[refId]),
+              status: statusValue || groupStatus[item.id] || null
+            };
+          })
+        );
+      }
+      return acc;
+    }, []);
+    return new import_fuse.default(list, options);
+  }, [dataset]);
+  const getResults = (0, import_react10.useCallback)(
+    (input2) => {
+      const fuse = makeFuse();
+      if (!input2)
+        return [];
+      let results2 = [];
+      const resultIds = /* @__PURE__ */ new Set();
+      const distinctResults = fuse.search(input2).filter(({ item }) => {
+        if (!(item.type === "component" || item.type === "docs" || item.type === "story") || resultIds.has(item.parent)) {
+          return false;
+        }
+        resultIds.add(item.id);
+        return true;
+      });
+      if (distinctResults.length) {
+        results2 = distinctResults.slice(0, allComponents ? 1e3 : DEFAULT_MAX_SEARCH_RESULTS);
+        if (distinctResults.length > DEFAULT_MAX_SEARCH_RESULTS && !allComponents) {
+          results2.push({
+            showAll: () => showAllComponents(true),
+            totalCount: distinctResults.length,
+            moreCount: distinctResults.length - DEFAULT_MAX_SEARCH_RESULTS
+          });
+        }
+      }
+      const lastViewed = !input2 && getLastViewed();
+      if (lastViewed && lastViewed.length) {
+        results2 = lastViewed.reduce((acc, { storyId, refId }) => {
+          const data = dataset.hash[refId];
+          if (data && data.index && data.index[storyId]) {
+            const story = data.index[storyId];
+            const item = story.type === "story" ? data.index[story.parent] : story;
+            if (!acc.some((res) => res.item.refId === refId && res.item.id === item.id)) {
+              acc.push({ item: searchItem(item, dataset.hash[refId]), matches: [], score: 0 });
+            }
+          }
+          return acc;
+        }, []);
+      }
+      return results2;
+    },
+    [allComponents, dataset.hash, getLastViewed, makeFuse]
+  );
+  const input = inputValue ? inputValue.trim() : "";
+  const results = input ? getResults(input) : [];
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react_native4.View, { style: { flex: 1 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+      SearchField,
+      {
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SearchIconWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SearchIcon, {}) }),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            Input,
+            {
+              ref: inputRef,
+              onChangeText: setInputValue,
+              onFocus: () => setIsOpen(true),
+              onBlur: () => setIsOpen(false)
+            }
+          ),
+          isOpen && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            ClearIcon,
+            {
+              onPress: () => {
+                setInputValue("");
+                inputRef.current.clear();
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CloseIcon, {})
+            }
+          )
+        ]
+      }
+    ),
+    children({
+      query: input,
+      results,
+      isBrowsing: !isOpen || !inputValue.length,
+      closeMenu: () => {
+      },
+      // getMenuProps,
+      getItemProps,
+      highlightedIndex: null
+    })
+  ] });
+});
+
+// src/SearchResults.tsx
+var import_react_native_theming8 = require("@storybook/react-native-theming");
+var import_react11 = __toESM(require("react"));
+var import_polished3 = require("polished");
+var import_react_native5 = require("react-native");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_react12 = require("react");
+var ResultsList = import_react_native_theming8.styled.View({
+  margin: 0,
+  padding: 0,
+  marginTop: 8
+});
+var ResultRow = import_react_native_theming8.styled.TouchableOpacity(
+  ({ theme, isHighlighted }) => ({
+    width: "100%",
+    border: "none",
+    cursor: "pointer",
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "flex-start",
+    textAlign: "left",
+    color: "inherit",
+    fontSize: theme.typography.size.s2,
+    backgroundColor: isHighlighted ? theme.background.hoverable : "transparent",
+    minHeight: 28,
+    borderRadius: 4,
+    gap: 6,
+    paddingTop: 7,
+    paddingBottom: 7,
+    paddingLeft: 8,
+    paddingRight: 8,
+    "&:hover, &:focus": {
+      backgroundColor: (0, import_polished3.transparentize)(0.93, theme.color.secondary),
+      outline: "none"
+    }
+  })
+);
+var IconWrapper = import_react_native_theming8.styled.View({
+  marginTop: 2
+});
+var ResultRowContent = import_react_native_theming8.styled.View(() => ({
+  display: "flex",
+  flexDirection: "column"
+}));
+var NoResults = import_react_native_theming8.styled.View(({ theme }) => ({
+  marginTop: 20,
+  textAlign: "center",
+  fontSize: theme.typography.size.s2,
+  lineHeight: 18,
+  color: theme.color.defaultText
+  // small: {
+  //   color: theme.barTextColor,
+  //   fontSize: theme.typography.size.s1,
+  // },
+}));
+var Mark = import_react_native_theming8.styled.Text(({ theme }) => ({
+  backgroundColor: "transparent",
+  // fontSize: theme.typography.size.s1 - 1,
+  color: theme.color.secondary
+}));
+var MoreWrapper = import_react_native_theming8.styled.View({
+  marginTop: 8
+});
+var RecentlyOpenedTitle = import_react_native_theming8.styled.View(({ theme }) => ({
+  display: "flex",
+  flexDirection: "row",
+  justifyContent: "space-between",
+  fontSize: theme.typography.size.s1 - 1,
+  fontWeight: theme.typography.weight.bold,
+  minHeight: 28,
+  // letterSpacing: '0.16em', <-- todo
+  textTransform: "uppercase",
+  color: theme.textMutedColor,
+  marginTop: 16,
+  marginBottom: 4,
+  alignItems: "center"
+  // '.search-result-recentlyOpened-clear': {
+  //   visibility: 'hidden',
+  // },
+  // '&:hover': {
+  //   '.search-result-recentlyOpened-clear': {
+  //     visibility: 'visible',
+  //   },
+  // },
+}));
+var Highlight = import_react11.default.memo(
+  function Highlight2({ children, match }) {
+    if (!match)
+      return children;
+    const { value, indices } = match;
+    const { nodes: result } = indices.reduce(
+      ({ cursor, nodes }, [start, end], index, { length }) => {
+        nodes.push(/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native5.Text, { children: value.slice(cursor, start) }, `text-${index}`));
+        nodes.push(/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Mark, { children: value.slice(start, end + 1) }, `mark-${index}`));
+        if (index === length - 1) {
+          nodes.push(/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native5.Text, { children: value.slice(end + 1) }, `last-${index}`));
+        }
+        return { cursor: end + 1, nodes };
+      },
+      { cursor: 0, nodes: [] }
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native5.Text, { children: result }, `end-${match.key}`);
+  }
+);
+var Title = import_react_native_theming8.styled.Text(({ theme }) => ({
+  // display: 'grid',
+  justifyContent: "flex-start",
+  // gridAutoColumns: 'auto',
+  // gridAutoFlow: 'column',
+  color: theme.textMutedColor,
+  fontSize: theme.typography.size.s2
+  // '& > span': {
+  //   display: 'block',
+  //   whiteSpace: 'nowrap',
+  //   overflow: 'hidden',
+  //   textOverflow: 'ellipsis',
+  // },
+}));
+var Path10 = import_react_native_theming8.styled.View(({ theme }) => ({
+  // display: 'grid',
+  justifyContent: "flex-start",
+  marginVertical: 2,
+  // gridAutoColumns: 'auto',
+  // gridAutoFlow: 'column',
+  color: theme.textMutedColor,
+  fontSize: theme.typography.size.s1 - 1,
+  flexDirection: "row"
+  // '& > span': {
+  //   display: 'block',
+  //   whiteSpace: 'nowrap',
+  //   overflow: 'hidden',
+  //   textOverflow: 'ellipsis',
+  // },
+  // '& > span + span': {
+  //   '&:before': {
+  //     content: "' / '",
+  //   },
+  // },
+}));
+var PathText = import_react_native_theming8.styled.Text(({ theme }) => ({
+  fontSize: theme.typography.size.s1 - 1,
+  color: theme.textMutedColor
+}));
+var Result = import_react11.default.memo(function Result2({
+  item,
+  matches,
+  icon: _icon,
+  onPress,
+  ...props
+}) {
+  const press = (0, import_react11.useCallback)(
+    (event) => {
+      event.preventDefault();
+      onPress?.(event);
+    },
+    [onPress]
+  );
+  const nameMatch = matches.find((match) => match.key === "name");
+  const pathMatches = matches.filter((match) => match.key === "path");
+  const [i] = item.status ? statusMapping[item.status] : [];
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(ResultRow, { ...props, onPress: press, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(IconWrapper, { children: [
+      item.type === "component" && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ComponentIcon, { width: "14", height: "14" }),
+      item.type === "story" && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(StoryIcon, { width: "14", height: "14" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(ResultRowContent, { testID: "search-result-item--label", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Title, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Highlight, { match: nameMatch, children: item.name }, "search-result-item--label-highlight") }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Path10, { children: item.path.map((group, index) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native5.View, { style: { flexShrink: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(PathText, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        Highlight,
+        {
+          match: pathMatches.find((match) => match.refIndex === index),
+          children: group
+        }
+      ) }) }, index)) })
+    ] }),
+    item.status ? i : null
+  ] });
+});
+var SearchResults = import_react11.default.memo(function SearchResults2({
+  query,
+  results,
+  closeMenu,
+  // getMenuProps,
+  getItemProps,
+  highlightedIndex,
+  // isLoading = false,
+  // enableShortcuts = true,
+  clearLastViewed
+}) {
+  const handleClearLastViewed = () => {
+    clearLastViewed();
+    closeMenu();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(ResultsList, { children: [
+    results.length > 0 && !query && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(RecentlyOpenedTitle, { children: [
+      "Recently opened",
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        IconButton,
+        {
+          onPress: handleClearLastViewed
+        }
+      )
+    ] }),
+    results.length === 0 && query && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native5.View, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(NoResults, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native5.Text, { style: { marginBottom: 8 }, children: "No components found" }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native5.Text, { children: "Find components by name or path." })
+    ] }) }),
+    results.map((result, index) => {
+      if (isExpandType(result)) {
+        return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(MoreWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          Button,
+          {
+            ...result,
+            ...getItemProps({ key: `${index}`, index, item: result }),
+            size: "small",
+            text: `Show ${result.moreCount} more results`
+          }
+        ) }, "search-result-expand");
+      }
+      const { item } = result;
+      const key = `${item.refId}::${item.id}`;
+      return /* @__PURE__ */ (0, import_react12.createElement)(
+        Result,
+        {
+          ...result,
+          ...getItemProps({ key, index, item: result }),
+          isHighlighted: highlightedIndex === index,
+          key: item.id
+        }
+      );
+    })
+  ] });
+});
+
+// src/useLastViewed.ts
+var import_debounce = __toESM(require_debounce());
+var import_react13 = require("react");
+var import_store2 = __toESM(require_store2());
+var save = (0, import_debounce.default)((value) => import_store2.default.set("lastViewedStoryIds", value), 1e3);
+var useLastViewed = (selection) => {
+  const initialLastViewedStoryIds = (0, import_react13.useMemo)(() => {
+    const items = import_store2.default.get("lastViewedStoryIds");
+    if (!items || !Array.isArray(items))
+      return [];
+    if (!items.some((item) => typeof item === "object" && item.storyId && item.refId))
+      return [];
+    return items;
+  }, []);
+  const lastViewedRef = (0, import_react13.useRef)(initialLastViewedStoryIds);
+  const updateLastViewed = (0, import_react13.useCallback)(
+    (story) => {
+      const items = lastViewedRef.current;
+      const index = items.findIndex(
+        ({ storyId, refId }) => storyId === story.storyId && refId === story.refId
+      );
+      if (index === 0)
+        return;
+      if (index === -1) {
+        lastViewedRef.current = [story, ...items];
+      } else {
+        lastViewedRef.current = [story, ...items.slice(0, index), ...items.slice(index + 1)];
+      }
+      save(lastViewedRef.current);
+    },
+    [lastViewedRef]
+  );
+  (0, import_react13.useEffect)(() => {
+    if (selection)
+      updateLastViewed(selection);
+  }, [selection]);
+  return {
+    getLastViewed: (0, import_react13.useCallback)(() => lastViewedRef.current, [lastViewedRef]),
+    clearLastViewed: (0, import_react13.useCallback)(() => {
+      lastViewedRef.current = lastViewedRef.current.slice(0, 1);
+      save(lastViewedRef.current);
+    }, [lastViewedRef])
+  };
+};
+
+// src/Sidebar.tsx
+var import_react_native6 = require("react-native");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var Container2 = import_react_native_theming9.styled.View(({ theme }) => ({
+  // position: 'absolute',
+  // zIndex: 1,
+  // left: 0,
+  // top: 0,
+  // bottom: 0,
+  // right: 0,
+  width: "100%",
+  height: "100%",
+  display: "flex",
+  flexDirection: "column",
+  background: theme.background.content
+  // [MEDIA_DESKTOP_BREAKPOINT]: {
+  //   background: theme.background.app,
+  // },
+}));
+var Top = import_react_native_theming9.styled.View({
+  paddingLeft: 4,
+  paddingRight: 4,
+  // paddingBottom: 20,
+  paddingTop: 16,
+  flex: 1,
+  flexDirection: "row"
+});
+var Swap = import_react14.default.memo(function Swap2({
+  children,
+  condition
+}) {
+  const [a, b] = import_react14.default.Children.toArray(children);
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_native6.View, { style: { display: condition ? "flex" : "none" }, children: a }),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_native6.View, { style: { display: condition ? "none" : "flex" }, children: b })
+  ] });
+});
+var useCombination = (index, indexError, previewInitialized, status, refs) => {
+  const hash = (0, import_react14.useMemo)(
+    () => ({
+      [DEFAULT_REF_ID]: {
+        index,
+        indexError,
+        previewInitialized,
+        status,
+        title: null,
+        id: DEFAULT_REF_ID,
+        url: "iframe.html"
+      },
+      ...refs
+    }),
+    [refs, index, indexError, previewInitialized, status]
+  );
+  return (0, import_react14.useMemo)(() => ({ hash, entries: Object.entries(hash) }), [hash]);
+};
+var Sidebar = import_react14.default.memo(function Sidebar2({
+  storyId = null,
+  refId = DEFAULT_REF_ID,
+  index,
+  indexError,
+  status,
+  previewInitialized,
+  // menu,
+  // extra,
+  // bottom = [],
+  // menuHighlighted = false,
+  // enableShortcuts = true,
+  refs = {},
+  setSelection
+}) {
+  const selected = (0, import_react14.useMemo)(() => storyId && { storyId, refId }, [storyId, refId]);
+  const dataset = useCombination(index, indexError, previewInitialized, status, refs);
+  const lastViewedProps = useLastViewed(selected);
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Container2, { style: { paddingHorizontal: 10 }, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Top, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    Search,
+    {
+      dataset,
+      setSelection,
+      ...lastViewedProps,
+      children: ({
+        query,
+        results,
+        isBrowsing,
+        closeMenu,
+        // getMenuProps,
+        getItemProps,
+        highlightedIndex
+      }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Swap, { condition: isBrowsing, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          Explorer,
+          {
+            dataset,
+            selected,
+            isLoading: false,
+            isBrowsing,
+            setSelection
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          SearchResults,
+          {
+            query,
+            results,
+            closeMenu,
+            getItemProps,
+            highlightedIndex,
+            isLoading: false,
+            clearLastViewed: lastViewedProps.clearLastViewed
+          }
+        )
+      ] })
+    }
+  ) }) });
+});
+
+// src/Layout.tsx
+var import_core_events2 = require("@storybook/core-events");
+var import_manager_api6 = require("@storybook/manager-api");
+var import_react_native_theming11 = require("@storybook/react-native-theming");
+var import_react17 = require("react");
+var import_react_native9 = require("react-native");
+var import_react_native_safe_area_context2 = require("react-native-safe-area-context");
+
+// src/icon/BottomBarToggleIcon.tsx
+var import_react_native_svg10 = require("react-native-svg");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var BottomBarToggleIcon = ({
+  color = "currentColor",
+  width = 14,
+  height = 14,
+  ...props
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react_native_svg10.Svg, { width, height, viewBox: "0 0 14 14", fill: "none", ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      import_react_native_svg10.Path,
+      {
+        d: "M3.5 10.004a.5.5 0 000 1h1a.5.5 0 000-1h-1zM6 10.504a.5.5 0 01.5-.5h1a.5.5 0 010 1h-1a.5.5 0 01-.5-.5zM9.5 10.004a.5.5 0 000 1h1a.5.5 0 000-1h-1z",
+        fill: color
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      import_react_native_svg10.Path,
+      {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M1 12.504v-11a.5.5 0 01.5-.5h11a.5.5 0 01.5.5v11a.5.5 0 01-.5.5h-11a.5.5 0 01-.5-.5zm1-.5v-3h10v3H2zm4.5-4H2v-6h10v6H7.5V5.21l.646.646a.5.5 0 10.708-.707l-1.5-1.5a.5.5 0 00-.708 0l-1.5 1.5a.5.5 0 10.708.707l.646-.646v2.793z",
+        fill: color
+      }
+    )
+  ] });
+};
+
+// src/icon/MenuIcon.tsx
+var import_react_native_svg11 = require("react-native-svg");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var MenuIcon = ({
+  color = "currentColor",
+  width = 14,
+  height = 14,
+  ...props
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_native_svg11.Svg, { width, height, viewBox: "0 0 14 14", fill: "none", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    import_react_native_svg11.Path,
+    {
+      d: "M13 3.5a.5.5 0 010 1H1a.5.5 0 010-1h12zM13.5 10a.5.5 0 00-.5-.5H1a.5.5 0 000 1h12a.5.5 0 00.5-.5zM13 6.5a.5.5 0 010 1H1a.5.5 0 010-1h12z",
+      fill: color
+    }
+  ) });
+};
+
+// src/MobileMenuDrawer.tsx
+var import_bottom_sheet2 = require("@gorhom/bottom-sheet");
+var import_react15 = require("react");
+var import_react_native7 = require("react-native");
+var import_react_native_reanimated = require("react-native-reanimated");
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var BottomSheetBackdropComponent = (backdropComponentProps) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  import_bottom_sheet2.BottomSheetBackdrop,
+  {
+    ...backdropComponentProps,
+    appearsOnIndex: 0,
+    disappearsOnIndex: -1,
+    pressBehavior: "close",
+    style: [backdropComponentProps.style, { backgroundColor: "rgba(0,0,0,0.5)" }]
+  }
+);
+var MobileMenuDrawer = (0, import_react15.forwardRef)(
+  ({ children }, ref) => {
+    const [isMobileMenuOpen, setMobileMenuOpen] = (0, import_react15.useState)(false);
+    const reducedMotion = (0, import_react_native_reanimated.useReducedMotion)();
+    const menuBottomSheetRef = (0, import_react15.useRef)(null);
+    (0, import_react15.useImperativeHandle)(ref, () => ({
+      isMobileMenuOpen,
+      setMobileMenuOpen: (open) => {
+        if (open) {
+          setMobileMenuOpen(true);
+          menuBottomSheetRef.current?.present();
+        } else {
+          import_react_native7.Keyboard.dismiss();
+          setMobileMenuOpen(false);
+          menuBottomSheetRef.current?.dismiss();
+        }
+      }
+    }));
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      import_bottom_sheet2.BottomSheetModal,
+      {
+        ref: menuBottomSheetRef,
+        index: 1,
+        animateOnMount: !reducedMotion,
+        onDismiss: () => {
+          setMobileMenuOpen(false);
+        },
+        snapPoints: ["50%", "75%"],
+        enableDismissOnClose: true,
+        enableHandlePanningGesture: true,
+        enableContentPanningGesture: true,
+        keyboardBehavior: "extend",
+        keyboardBlurBehavior: "restore",
+        stackBehavior: "replace",
+        backdropComponent: BottomSheetBackdropComponent,
+        children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_bottom_sheet2.BottomSheetScrollView, { keyboardShouldPersistTaps: "handled", children })
+      }
+    );
+  }
+);
+
+// src/MobileAddonsPanel.tsx
+var import_bottom_sheet3 = require("@gorhom/bottom-sheet");
+var import_manager_api5 = require("@storybook/manager-api");
+var import_react_native_theming10 = require("@storybook/react-native-theming");
+var import_types3 = __toESM(require_dist());
+var import_react16 = require("react");
+var import_react_native8 = require("react-native");
+var import_react_native_gesture_handler = require("react-native-gesture-handler");
+var import_react_native_reanimated2 = require("react-native-reanimated");
+var import_react_native_safe_area_context = require("react-native-safe-area-context");
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var MobileAddonsPanel = (0, import_react16.forwardRef)(
+  ({ storyId }, ref) => {
+    const [isAddonsPanelOpen, setAddonsPanelOpen] = (0, import_react16.useState)(false);
+    const reducedMotion = (0, import_react_native_reanimated2.useReducedMotion)();
+    const addonsPanelBottomSheetRef = (0, import_react16.useRef)(null);
+    const insets = (0, import_react_native_safe_area_context.useSafeAreaInsets)();
+    const panels = import_manager_api5.addons.getElements(import_types3.Addon_TypesEnum.PANEL);
+    const [addonSelected, setAddonSelected] = (0, import_react16.useState)(Object.keys(panels)[0]);
+    (0, import_react16.useImperativeHandle)(ref, () => ({
+      isAddonsPanelOpen,
+      setAddonsPanelOpen: (open) => {
+        if (open) {
+          setAddonsPanelOpen(true);
+          addonsPanelBottomSheetRef.current?.present();
+        } else {
+          setAddonsPanelOpen(false);
+          addonsPanelBottomSheetRef.current?.dismiss();
+        }
+      }
+    }));
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      import_bottom_sheet3.BottomSheetModal,
+      {
+        ref: addonsPanelBottomSheetRef,
+        index: 1,
+        animateOnMount: !reducedMotion,
+        onDismiss: () => {
+          setAddonsPanelOpen(false);
+        },
+        snapPoints: ["25%", "50%"],
+        style: {
+          paddingTop: 8
+        },
+        containerStyle: {},
+        backgroundStyle: {
+          borderRadius: 0,
+          borderTopColor: "lightgrey",
+          borderTopWidth: 1
+        },
+        keyboardBehavior: "interactive",
+        keyboardBlurBehavior: "restore",
+        enableDismissOnClose: true,
+        enableHandlePanningGesture: true,
+        enableContentPanningGesture: true,
+        stackBehavior: "replace",
+        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react_native8.View, { style: { flex: 1 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react_native8.View, { style: { flexDirection: "row" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+              import_react_native_gesture_handler.ScrollView,
+              {
+                horizontal: true,
+                showsHorizontalScrollIndicator: false,
+                contentContainerStyle: {
+                  paddingHorizontal: 8,
+                  // alignItems: 'center',
+                  justifyContent: "center"
+                },
+                children: Object.values(panels).map(({ id, title }) => {
+                  const resolvedTitle = typeof title === "function" ? title({}) : title;
+                  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                    Tab,
+                    {
+                      active: id === addonSelected,
+                      onPress: () => setAddonSelected(id),
+                      text: resolvedTitle
+                    },
+                    id
+                  );
+                })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+              IconButton,
+              {
+                style: {
+                  marginRight: 4,
+                  marginBottom: 4,
+                  alignItems: "center",
+                  justifyContent: "center"
+                },
+                hitSlop: { top: 10, right: 10, bottom: 10, left: 10 },
+                Icon: CloseIcon,
+                onPress: () => {
+                  setAddonsPanelOpen(false);
+                  addonsPanelBottomSheetRef.current?.dismiss();
+                }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            import_bottom_sheet3.BottomSheetScrollView,
+            {
+              keyboardShouldPersistTaps: "handled",
+              contentContainerStyle: {
+                paddingBottom: insets.bottom + 16,
+                marginTop: 10,
+                paddingHorizontal: 16
+              },
+              children: (() => {
+                if (!storyId) {
+                  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_native8.View, { style: { alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_native8.Text, { children: "No Story Selected" }) });
+                }
+                if (Object.keys(panels).length === 0) {
+                  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_native8.View, { style: { alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_native8.Text, { children: "No addons loaded." }) });
+                }
+                return panels[addonSelected].render({ active: true });
+              })()
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+var Tab = ({ active, onPress, text }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(TabButton, { active, onPress, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(TabText, { active, children: text }) });
+};
+var TabButton = import_react_native_theming10.styled.TouchableOpacity(({ theme, active }) => ({
+  borderBottomWidth: active ? 2 : 0,
+  borderBottomColor: active ? theme.barSelectedColor : void 0,
+  overflow: "hidden",
+  paddingHorizontal: 15,
+  justifyContent: "center",
+  alignItems: "center"
+}));
+var TabText = import_react_native_theming10.styled.Text(({ theme, active }) => ({
+  color: active ? theme.barSelectedColor : theme.color.mediumdark,
+  textAlign: "center",
+  fontWeight: "bold",
+  fontSize: 13,
+  lineHeight: 12
+}));
+
+// src/Layout.tsx
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var Layout = ({
+  storyHash,
+  story,
+  children
+}) => {
+  const theme = (0, import_react_native_theming11.useTheme)();
+  const mobileMenuDrawerRef = (0, import_react17.useRef)(null);
+  const addonPanelRef = (0, import_react17.useRef)(null);
+  const insets = (0, import_react_native_safe_area_context2.useSafeAreaInsets)();
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react_native9.View, { style: { flex: 1, paddingTop: insets.top }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_native9.View, { style: { flex: 1 }, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(MobileMenuDrawer, { ref: mobileMenuDrawerRef, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      Sidebar,
+      {
+        extra: [],
+        previewInitialized: true,
+        indexError: void 0,
+        refs: {},
+        setSelection: ({ storyId: newStoryId }) => {
+          const channel = import_manager_api6.addons.getChannel();
+          channel.emit(import_core_events2.SET_CURRENT_STORY, { storyId: newStoryId });
+        },
+        status: {},
+        index: storyHash,
+        storyId: story?.id,
+        refId: DEFAULT_REF_ID
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(MobileAddonsPanel, { ref: addonPanelRef, storyId: story.id }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Container3, { style: { marginBottom: insets.bottom }, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Nav, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+        Button2,
+        {
+          hitSlop: { bottom: 10, left: 10, right: 10, top: 10 },
+          onPress: () => mobileMenuDrawerRef.current.setMobileMenuOpen(true),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(MenuIcon, { color: theme.color.mediumdark }),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react_native9.Text, { children: [
+              story.title,
+              "/",
+              story.name
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        IconButton,
+        {
+          onPress: () => addonPanelRef.current.setAddonsPanelOpen(true),
+          Icon: BottomBarToggleIcon
+        }
+      )
+    ] }) })
+  ] });
+};
+var Nav = import_react_native_theming11.styled.View({
+  display: "flex",
+  flexDirection: "row",
+  alignItems: "center",
+  justifyContent: "space-between",
+  width: "100%",
+  height: 40,
+  paddingHorizontal: 12
+});
+var Container3 = import_react_native_theming11.styled.View(({ theme }) => ({
+  alignSelf: "flex-end",
+  width: "100%",
+  zIndex: 10,
+  background: theme.barBg,
+  borderTopColor: theme.appBorderColor,
+  borderTopWidth: 1
+}));
+var Button2 = import_react_native_theming11.styled.TouchableOpacity(({ theme }) => ({
+  display: "flex",
+  flexDirection: "row",
+  alignItems: "center",
+  gap: 10,
+  color: theme.color.mediumdark,
+  fontSize: theme.typography.size?.s2 - 1,
+  paddingHorizontal: 7,
+  fontWeight: theme.typography.weight.bold
+}));
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Button,
+  ButtonIcon,
+  ButtonText,
+  ComponentNode,
+  Explorer,
+  GroupNode,
+  IconButton,
+  Layout,
+  LayoutProvider,
+  LeafNodeStyleWrapper,
+  Node,
+  RootNode,
+  RootNodeText,
+  Sidebar,
+  StoryNode,
+  Tree,
+  isExpandType,
+  useCombination,
+  useLayout
+});
+/*! Bundled license information:
+
+store2/dist/store2.js:
+  (*! store2 - v2.14.3 - 2024-02-14
+  * Copyright (c) 2024 Nathan Bubna; Licensed MIT *)
+*/