@aussieljk/forkbook 0.0.1-1 → 0.0.1-2

package/dist/react-native-ui/index.js

@@ -8,82 +8,36 @@ import "../_browser-chunks/chunk-LE2LTDW3.js";
 import "../_browser-chunks/chunk-IMSF75WX.js";
 
 // src/react-native-ui/TreeNode.tsx
-import { styled as styled2, useTheme } from "@aussieljk/forkbook/internal/react-native-theming";
+import { styled as styled2, useTheme as useTheme2 } from "@aussieljk/forkbook/internal/react-native-theming";
+import React, { forwardRef, useMemo } from "react";
 
-// src/react-native-ui/icon/ComponentIcon.tsx
-import Svg, { Path } from "react-native-svg";
+// src/react-native-ui/icon/index.tsx
+import { styled, useTheme } from "@aussieljk/forkbook/internal/react-native-theming";
+import { SymbolView } from "expo-symbols";
 import { jsx } from "react/jsx-runtime";
-function ComponentIcon({ color = "#029CFD", ...props }) {
-  return jsx(Svg, { width: 12, height: 12, viewBox: "0 0 12 12", fill: "none", ...props, children: jsx(
-    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/react-native-ui/icon/GroupIcon.tsx
-import Svg2, { Path as Path2 } from "react-native-svg";
-import { jsx as jsx2 } from "react/jsx-runtime";
-function GroupIcon({ color = "#6F2CAC", ...props }) {
-  return jsx2(Svg2, { width: 15, height: 15, viewBox: "0 0 15 15", fill: "none", ...props, children: jsx2(
-    Path2,
-    {
-      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/react-native-ui/icon/StoryIcon.tsx
-import Svg3, { Path as Path3 } from "react-native-svg";
-import { jsx as jsx3 } from "react/jsx-runtime";
-function StoryIcon({ color = "#37D5D3", ...props }) {
-  return jsx3(Svg3, { width: 12, height: 12, viewBox: "0 0 12 12", fill: "none", ...props, children: jsx3(
-    Path3,
-    {
-      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/react-native-ui/icon/CollapseIcon.tsx
-import { styled } from "@aussieljk/forkbook/internal/react-native-theming";
-import Svg4, { Path as Path4 } from "react-native-svg";
-import { jsx as jsx4 } from "react/jsx-runtime";
-var CollapseIconWrapper = styled.View(
-  ({ theme, isExpanded }) => ({
-    width: 8,
-    height: 8,
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    color: theme.textMutedColor,
-    transform: isExpanded ? "rotateZ(90deg)" : "none",
-    transition: "transform .1s ease-out"
-  })
-), CollapseIcon = ({ isExpanded }) => jsx4(CollapseIconWrapper, { isExpanded, children: jsx4(CollapseSVG, {}) });
-function CollapseSVG(props) {
-  return jsx4(Svg4, { width: 8, height: 8, fill: "none", ...props, children: jsx4(
-    Path4,
-    {
-      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"
-    }
-  ) });
+function symbolIcon(name, size, defaultColor) {
+  return ({ color, width }) => {
+    let theme = useTheme();
+    return jsx(
+      SymbolView,
+      {
+        name,
+        size: Number(width ?? size),
+        tintColor: color === "currentColor" || !color ? defaultColor(theme) : color
+      }
+    );
+  };
 }
+var text = (theme) => theme.color.defaultText, SearchIcon = symbolIcon("magnifyingglass", 14, (theme) => theme.color.dark), CloseIcon = symbolIcon("xmark.circle", 14, text), MenuIcon = symbolIcon("line.3.horizontal", 14, text), FullscreenIcon = symbolIcon("arrow.up.left.and.arrow.down.right", 14, text), CloseFullscreenIcon = symbolIcon("arrow.down.right.and.arrow.up.left", 14, text), BottomBarToggleIcon = symbolIcon("rectangle.bottomthird.inset.filled", 14, text), ExpandAllIcon = symbolIcon("rectangle.expand.vertical", 14, text), CollapseAllIcon = symbolIcon("rectangle.compress.vertical", 14, text), ComponentIcon = symbolIcon("square.grid.2x2", 12, () => "#029CFD"), GroupIcon = symbolIcon("folder", 14, () => "#6F2CAC"), StoryIcon = symbolIcon("bookmark", 12, () => "#37D5D3"), Chevron = symbolIcon("chevron.right", 8, (theme) => theme.textMutedColor), CollapseIconWrapper = styled.View(({ isExpanded }) => ({
+  width: 8,
+  height: 8,
+  justifyContent: "center",
+  alignItems: "center",
+  transform: isExpanded ? "rotateZ(90deg)" : "none"
+})), CollapseIcon = ({ isExpanded }) => jsx(CollapseIconWrapper, { isExpanded, children: jsx(Chevron, {}) });
 
 // src/react-native-ui/TreeNode.tsx
-import React, { forwardRef, useMemo } from "react";
-import { jsx as jsx5, jsxs } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 var BranchNodeText = styled2.Text(({ theme }) => ({
   textAlign: "left",
   fontSize: theme.typography.size.s2,
@@ -145,13 +99,13 @@ var BranchNodeText = styled2.Text(({ theme }) => ({
   isExpandable = !1,
   ...props
 }) {
-  let theme = useTheme(), color = useMemo(() => theme.base === "dark" ? theme.color.primary : theme.color.ultraviolet, [theme.base, theme.color.primary, theme.color.ultraviolet]);
+  let theme = useTheme2(), color = useMemo(() => theme.base === "dark" ? theme.color.primary : theme.color.ultraviolet, [theme.base, theme.color.primary, theme.color.ultraviolet]);
   return jsxs(BranchNode, { isExpandable, ...props, children: [
     jsxs(Wrapper, { children: [
-      isExpandable && jsx5(CollapseIcon, { isExpanded: !!isExpanded }),
-      jsx5(GroupIcon, { width: 14, height: 14, color })
+      isExpandable && jsx2(CollapseIcon, { isExpanded: !!isExpanded }),
+      jsx2(GroupIcon, { width: 14, height: 14, color })
     ] }),
-    jsx5(BranchNodeText, { children })
+    jsx2(BranchNodeText, { children })
   ] });
 }), ComponentNode = React.memo(function({
   children,
@@ -159,20 +113,20 @@ var BranchNodeText = styled2.Text(({ theme }) => ({
   isExpandable,
   ...props
 }) {
-  let theme = useTheme(), color = useMemo(() => theme.color.secondary, [theme.color.secondary]);
+  let theme = useTheme2(), color = useMemo(() => theme.color.secondary, [theme.color.secondary]);
   return jsxs(BranchNode, { isExpandable, ...props, children: [
     jsxs(Wrapper, { children: [
-      isExpandable && jsx5(CollapseIcon, { isExpanded: !!isExpanded }),
-      jsx5(ComponentIcon, { width: 12, height: 12, color })
+      isExpandable && jsx2(CollapseIcon, { isExpanded: !!isExpanded }),
+      jsx2(ComponentIcon, { width: 12, height: 12, color })
     ] }),
-    jsx5(BranchNodeText, { children })
+    jsx2(BranchNodeText, { children })
   ] });
 }), StoryNode = React.memo(
   forwardRef(function({ children, ...props }, ref) {
-    let theme = useTheme(), color = useMemo(() => props.selected ? theme.color.lightest : theme.color.seafoam, [props.selected, theme.color.lightest, theme.color.seafoam]);
+    let theme = useTheme2(), color = useMemo(() => props.selected ? theme.color.lightest : theme.color.seafoam, [props.selected, theme.color.lightest, theme.color.seafoam]);
     return jsxs(LeafNode, { ...props, ref, children: [
-      jsx5(Wrapper, { children: jsx5(StoryIcon, { width: 14, height: 14, color }) }),
-      jsx5(LeafNodeText, { selected: props.selected, children })
+      jsx2(Wrapper, { children: jsx2(StoryIcon, { width: 14, height: 14, color }) }),
+      jsx2(LeafNodeText, { selected: props.selected, children })
     ] });
   })
 );
@@ -180,7 +134,7 @@ StoryNode.displayName = "StoryNode";
 
 // src/react-native-ui/Tree.tsx
 import { styled as styled3 } from "@aussieljk/forkbook/internal/react-native-theming";
-import React2, { useCallback as useCallback2, useMemo as useMemo4, useRef as useRef2 } from "react";
+import React2, { useCallback as useCallback2, useMemo as useMemo2, useRef as useRef2 } from "react";
 import {
   IconButton,
   useExpanded,
@@ -191,53 +145,9 @@ import {
   startCase
 } from "@aussieljk/forkbook/internal/react-native-ui-common";
 
-// src/react-native-ui/icon/CollapseAllIcon.tsx
-import { Path as Path5, Svg as Svg5 } from "react-native-svg";
-import { useTheme as useTheme2 } from "@aussieljk/forkbook/internal/react-native-theming";
-import { useMemo as useMemo2 } from "react";
-import { jsx as jsx6 } from "react/jsx-runtime";
-var CollapseAllIcon = ({
-  color,
-  //= '#2E3438',
-  width = 14,
-  height = 14,
-  ...props
-}) => {
-  let theme = useTheme2(), fillColor = useMemo2(() => color ?? theme.color.defaultText, [color, theme.color.defaultText]);
-  return jsx6(Svg5, { width, height, viewBox: "0 0 14 14", fill: "none", ...props, children: jsx6(
-    Path5,
-    {
-      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: fillColor
-    }
-  ) });
-};
-
-// src/react-native-ui/icon/ExpandAllIcon.tsx
-import { Path as Path6, Svg as Svg6 } from "react-native-svg";
-import { useTheme as useTheme3 } from "@aussieljk/forkbook/internal/react-native-theming";
-import { useMemo as useMemo3 } from "react";
-import { jsx as jsx7 } from "react/jsx-runtime";
-var ExpandAllIcon = ({
-  color,
-  //= '#2E3438',
-  width = 14,
-  height = 14,
-  ...props
-}) => {
-  let theme = useTheme3(), fillColor = useMemo3(() => color ?? theme.color.defaultText, [color, theme.color.defaultText]);
-  return jsx7(Svg6, { width, height, viewBox: "0 0 14 14", fill: "none", ...props, children: jsx7(
-    Path6,
-    {
-      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: fillColor
-    }
-  ) });
-};
-
 // src/react-native-ui/SelectedNodeProvider.tsx
 import { createContext, useCallback, useContext, useRef } from "react";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx3 } from "react/jsx-runtime";
 var SelectedNodeContext = createContext({
   nodeRef: { current: null },
   setNodeRef: () => {
@@ -259,7 +169,7 @@ var SelectedNodeContext = createContext({
         }
     }, 100);
   }, []);
-  return jsx8(
+  return jsx3(
     SelectedNodeContext.Provider,
     {
       value: {
@@ -274,7 +184,7 @@ var SelectedNodeContext = createContext({
 }, useSelectedNode = () => useContext(SelectedNodeContext);
 
 // src/react-native-ui/Tree.tsx
-import { jsx as jsx9, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 var Node = React2.memo(function({
   item,
   refId,
@@ -298,7 +208,7 @@ var Node = React2.memo(function({
     return null;
   let id = createId(item.id, refId);
   if (item.type === "story")
-    return jsx9(LeafNodeStyleWrapper, { children: jsx9(
+    return jsx4(LeafNodeStyleWrapper, { children: jsx4(
       StoryNode,
       {
         ref: setRef,
@@ -323,12 +233,12 @@ var Node = React2.memo(function({
           },
           "aria-expanded": isExpanded,
           children: [
-            jsx9(CollapseIcon, { isExpanded }),
-            jsx9(RootNodeText, { children: startCase(item.name) })
+            jsx4(CollapseIcon, { isExpanded }),
+            jsx4(RootNodeText, { children: startCase(item.name) })
           ]
         }
       ),
-      isExpanded && jsx9(
+      isExpanded && jsx4(
         IconButton,
         {
           "aria-label": isFullyExpanded ? "Expand" : "Collapse",
@@ -337,13 +247,13 @@ var Node = React2.memo(function({
           onPress: (event) => {
             event.preventDefault(), setFullyExpanded?.();
           },
-          children: isFullyExpanded ? jsx9(CollapseAllIcon, {}) : jsx9(ExpandAllIcon, {})
+          children: isFullyExpanded ? jsx4(CollapseAllIcon, {}) : jsx4(ExpandAllIcon, {})
         }
       )
     ] }, id);
   if (item.type === "component" || item.type === "group") {
     let BranchNode2 = item.type === "component" ? ComponentNode : GroupNode;
-    return jsx9(
+    return jsx4(
       BranchNode2,
       {
         id,
@@ -399,7 +309,7 @@ var Node = React2.memo(function({
   cursor: "pointer",
   height: 28
 })), Tree = React2.memo(function({ isMain, refId, data, status, docsMode, selectedStoryId, onSelectStoryId }) {
-  let containerRef = useRef2(null), [rootIds, orphanIds, initialExpanded] = useMemo4(
+  let containerRef = useRef2(null), [rootIds, orphanIds, initialExpanded] = useMemo2(
     () => Object.keys(data).reduce(
       (acc, id) => {
         let item = data[id];
@@ -408,23 +318,23 @@ var Node = React2.memo(function({
       [[], [], {}]
     ),
     [data]
-  ), { expandableDescendants } = useMemo4(() => [...orphanIds, ...rootIds].reduce(
+  ), { expandableDescendants } = useMemo2(() => [...orphanIds, ...rootIds].reduce(
     (acc, nodeId) => (acc.expandableDescendants[nodeId] = getDescendantIds(data, nodeId, !1).filter(
       (d) => !["story", "docs"].includes(data[d].type)
     ), acc),
     { orphansFirst: [], expandableDescendants: {} }
-  ), [data, rootIds, orphanIds]), singleStoryComponentIds = useMemo4(() => Object.keys(data).filter((id) => {
+  ), [data, rootIds, orphanIds]), singleStoryComponentIds = useMemo2(() => Object.keys(data).filter((id) => {
     let entry = data[id];
     if (entry.type !== "component") return !1;
     let { children = [], name } = entry;
     if (children.length !== 1) return !1;
     let onlyChild = data[children[0]];
     return onlyChild.type === "docs" ? !0 : onlyChild.type === "story" ? isStoryHoistable(onlyChild.name, name) : !1;
-  }), [data]), collapsedItems = useMemo4(
+  }), [data]), collapsedItems = useMemo2(
     () => Object.keys(data).filter((id) => !singleStoryComponentIds.includes(id)),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [singleStoryComponentIds]
-  ), collapsedData = useMemo4(() => singleStoryComponentIds.reduce(
+  ), collapsedData = useMemo2(() => singleStoryComponentIds.reduce(
     (acc, id) => {
       let { children, parent, name } = data[id], [childId] = children;
       if (parent) {
@@ -439,7 +349,7 @@ var Node = React2.memo(function({
       }, acc;
     },
     { ...data }
-  ), [data]), ancestry = useMemo4(() => collapsedItems.reduce(
+  ), [data]), ancestry = useMemo2(() => collapsedItems.reduce(
     (acc, id) => Object.assign(acc, { [id]: getAncestorIds(collapsedData, id) }),
     {}
   ), [collapsedItems, collapsedData]), [expanded, setExpanded] = useExpanded({
@@ -449,11 +359,11 @@ var Node = React2.memo(function({
     rootIds,
     selectedStoryId,
     onSelectStoryId
-  }), treeItems = useMemo4(() => collapsedItems.map((itemId) => {
+  }), treeItems = useMemo2(() => collapsedItems.map((itemId) => {
     let item = collapsedData[itemId], id = createId(itemId, refId);
     if (item.type === "root") {
       let descendants = expandableDescendants[item.id], isFullyExpanded = descendants.every((d) => expanded[d]);
-      return jsx9(
+      return jsx4(
         Root,
         {
           item,
@@ -474,7 +384,7 @@ var Node = React2.memo(function({
       );
     }
     let isDisplayed = !item.parent || ancestry[itemId].every((a) => expanded[a]);
-    return jsx9(
+    return jsx4(
       Node,
       {
         item,
@@ -505,7 +415,7 @@ var Node = React2.memo(function({
     setExpanded,
     status
   ]);
-  return jsx9(Container, { ref: containerRef, hasOrphans: isMain && orphanIds.length > 0, children: treeItems });
+  return jsx4(Container, { ref: containerRef, hasOrphans: isMain && orphanIds.length > 0, children: treeItems });
 }), Container = styled3.View((props) => ({
   marginTop: props.hasOrphans ? 20 : 0,
   marginBottom: 20
@@ -519,7 +429,7 @@ var Node = React2.memo(function({
     () => setExpanded({ ids: expandableDescendants, value: !isFullyExpanded }),
     [setExpanded, isFullyExpanded, expandableDescendants]
   );
-  return jsx9(
+  return jsx4(
     Node,
     {
       ...props,
@@ -534,10 +444,10 @@ var Node = React2.memo(function({
 import React4, { useRef as useRef3 } from "react";
 
 // src/react-native-ui/Refs.tsx
-import React3, { useMemo as useMemo5, useCallback as useCallback3, useEffect, useState } from "react";
+import React3, { useMemo as useMemo3, useCallback as useCallback3, useEffect, useState } from "react";
 import { styled as styled4 } from "@aussieljk/forkbook/internal/react-native-theming";
 import { getStateType } from "@aussieljk/forkbook/internal/react-native-ui-common";
-import { Fragment, jsx as jsx10 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx5 } from "react/jsx-runtime";
 var Wrapper2 = styled4.View(() => ({
   position: "relative"
 })), Ref = React3.memo(
@@ -555,7 +465,7 @@ var Wrapper2 = styled4.View(() => ({
       indexError,
       previewInitialized,
       setSelection
-    } = props, length = useMemo5(() => index ? Object.keys(index).length : 0, [index]), isLoading = isLoadingMain || (type === "auto-inject" && !previewInitialized || type === "server-checked") || type === "unknown", state = getStateType(isLoading, !!loginUrl && length === 0, !!indexError, !isLoading && length === 0), [isExpanded, setExpanded] = useState(expanded);
+    } = props, length = useMemo3(() => index ? Object.keys(index).length : 0, [index]), isLoading = isLoadingMain || (type === "auto-inject" && !previewInitialized || type === "server-checked") || type === "unknown", state = getStateType(isLoading, !!loginUrl && length === 0, !!indexError, !isLoading && length === 0), [isExpanded, setExpanded] = useState(expanded);
     useEffect(() => {
       index && selectedStoryId && index[selectedStoryId] && setExpanded(!0);
     }, [setExpanded, index, selectedStoryId]);
@@ -565,7 +475,7 @@ var Wrapper2 = styled4.View(() => ({
       },
       [refId, setSelection]
     );
-    return jsx10(Fragment, { children: isExpanded && jsx10(Wrapper2, { "data-title": title, isMain: !0, children: state === "ready" && jsx10(
+    return jsx5(Fragment, { children: isExpanded && jsx5(Wrapper2, { "data-title": title, isMain: !0, children: state === "ready" && jsx5(
       Tree,
       {
         status: props.status,
@@ -583,7 +493,7 @@ var Wrapper2 = styled4.View(() => ({
 
 // src/react-native-ui/Explorer.tsx
 import { View } from "react-native";
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 import { createElement } from "react";
 var Explorer = React4.memo(function({
   isLoading,
@@ -593,7 +503,7 @@ var Explorer = React4.memo(function({
   setSelection
 }) {
   let containerRef = useRef3(null);
-  return jsx11(View, { ref: containerRef, id: "storybook-explorer-tree", children: dataset.entries.map(([refId, ref]) => createElement(
+  return jsx6(View, { ref: containerRef, id: "storybook-explorer-tree", children: dataset.entries.map(([refId, ref]) => createElement(
     Ref,
     {
       ...ref,
@@ -607,71 +517,25 @@ var Explorer = React4.memo(function({
 });
 
 // src/react-native-ui/Sidebar.tsx
-import React7, { useMemo as useMemo7 } from "react";
+import React7, { useMemo as useMemo5 } from "react";
 import { styled as styled7 } from "@aussieljk/forkbook/internal/react-native-theming";
 
 // src/react-native-ui/Search.tsx
-import { BottomSheetTextInput, useBottomSheetInternal } from "@gorhom/bottom-sheet";
 import { styled as styled5 } from "@aussieljk/forkbook/internal/react-native-theming";
 import { useFuzzySearchList } from "@nozbe/microfuzz/react";
 import React5, {
   useCallback as useCallback4,
   useDeferredValue,
-  useMemo as useMemo6,
+  useMemo as useMemo4,
   useRef as useRef4,
   useState as useState2
 } from "react";
-import { Platform, TextInput, View as View2 } from "react-native";
-
-// src/react-native-ui/icon/CloseIcon.tsx
-import { Path as Path7, Svg as Svg7 } from "react-native-svg";
-import { jsx as jsx12, jsxs as jsxs3 } from "react/jsx-runtime";
-var CloseIcon = ({
-  color = "currentColor",
-  width = 14,
-  height = 14,
-  ...props
-}) => jsxs3(Svg7, { width, height, viewBox: "0 0 14 14", fill: "none", ...props, children: [
-  jsx12(
-    Path7,
-    {
-      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
-    }
-  ),
-  jsx12(
-    Path7,
-    {
-      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/react-native-ui/icon/SearchIcon.tsx
-import { Path as Path8, Svg as Svg8 } from "react-native-svg";
-import { useTheme as useTheme4 } from "@aussieljk/forkbook/internal/react-native-theming";
-import { jsx as jsx13 } from "react/jsx-runtime";
-var SearchIcon = ({ width = 14, height = 14, ...props }) => {
-  let theme = useTheme4();
-  return jsx13(Svg8, { width, height, viewBox: "0 0 14 14", fill: theme.color.dark, ...props, children: jsx13(
-    Path8,
-    {
-      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"
-    }
-  ) });
-};
-
-// src/react-native-ui/Search.tsx
+import { TextInput, View as View2 } from "react-native";
 import {
   isExpandType,
   searchItem
 } from "@aussieljk/forkbook/internal/react-native-ui-common";
-import { jsx as jsx14, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
 var DEFAULT_MAX_SEARCH_RESULTS = 50, SearchIconWrapper = styled5.View({
   position: "absolute",
   top: 0,
@@ -686,20 +550,7 @@ var DEFAULT_MAX_SEARCH_RESULTS = 50, SearchIconWrapper = styled5.View({
   display: "flex",
   flexDirection: "column",
   position: "relative"
-}), BottomSheetInput = styled5(BottomSheetTextInput)(({ theme }) => ({
-  height: 32,
-  paddingLeft: 28,
-  paddingRight: 28,
-  paddingTop: Platform.OS === "android" ? 0 : void 0,
-  paddingBottom: Platform.OS === "android" ? 0 : void 0,
-  borderWidth: 1,
-  borderColor: theme.appBorderColor,
-  backgroundColor: "transparent",
-  borderRadius: 4,
-  fontSize: theme.typography.size.s1 + 1,
-  color: theme.color.defaultText,
-  width: "100%"
-})), Input = styled5(TextInput)(({ theme }) => ({
+}), Input = styled5(TextInput)(({ theme }) => ({
   height: 32,
   paddingLeft: 28,
   paddingRight: 28,
@@ -723,7 +574,7 @@ var DEFAULT_MAX_SEARCH_RESULTS = 50, SearchIconWrapper = styled5.View({
   justifyContent: "center",
   height: "100%"
 })), Search = React5.memo(function({ children, dataset, setSelection, getLastViewed, initialQuery = "" }) {
-  let isBottomSheet = useBottomSheetInternal(!0) !== null, inputRef = useRef4(null), [inputValue, setInputValue] = useState2(initialQuery), [isOpen, setIsOpen] = useState2(!1), [allComponents, showAllComponents] = useState2(!1), { scrollToSelectedNode } = useSelectedNode(), selectStory = useCallback4(
+  let inputRef = useRef4(null), [inputValue, setInputValue] = useState2(initialQuery), [isOpen, setIsOpen] = useState2(!1), [allComponents, showAllComponents] = useState2(!1), { scrollToSelectedNode } = useSelectedNode(), selectStory = useCallback4(
     (id, refId) => {
       setSelection({ storyId: id, refId }), inputRef.current?.blur(), setIsOpen(!1), showAllComponents(!1), scrollToSelectedNode();
     },
@@ -740,9 +591,9 @@ var DEFAULT_MAX_SEARCH_RESULTS = 50, SearchIconWrapper = styled5.View({
       isHighlighted: !1
     }),
     [selectStory]
-  ), deferredDataset = useDeferredValue(dataset), searchList = useMemo6(() => deferredDataset.entries.reduce((acc, [refId, { index }]) => (index && acc.push(
+  ), deferredDataset = useDeferredValue(dataset), searchList = useMemo4(() => deferredDataset.entries.reduce((acc, [refId, { index }]) => (index && acc.push(
     ...Object.values(index).map((item) => searchItem(item, deferredDataset.hash[refId]))
-  ), acc), []), [deferredDataset]), deferredQuery = useDeferredValue(inputValue), queryText = useMemo6(() => deferredQuery ? deferredQuery.trim() : "", [deferredQuery]), getText = useCallback4((item) => [item.name, item.path?.join(" ") ?? ""], []), mapResultItem = useCallback4(
+  ), acc), []), [deferredDataset]), deferredQuery = useDeferredValue(inputValue), queryText = useMemo4(() => deferredQuery ? deferredQuery.trim() : "", [deferredQuery]), getText = useCallback4((item) => [item.name, item.path?.join(" ") ?? ""], []), mapResultItem = useCallback4(
     ({ item, score, matches }) => ({
       item,
       score,
@@ -754,7 +605,7 @@ var DEFAULT_MAX_SEARCH_RESULTS = 50, SearchIconWrapper = styled5.View({
     queryText,
     getText,
     mapResultItem
-  }), results = useMemo6(() => {
+  }), results = useMemo4(() => {
     if (!queryText) return [];
     let maxResults = allComponents ? 1e3 : DEFAULT_MAX_SEARCH_RESULTS, processedResults = [], resultIds = /* @__PURE__ */ new Set(), totalDistinctCount = 0;
     for (let result of fuzzyResults) {
@@ -768,25 +619,25 @@ var DEFAULT_MAX_SEARCH_RESULTS = 50, SearchIconWrapper = styled5.View({
       moreCount: totalDistinctCount - DEFAULT_MAX_SEARCH_RESULTS
     }), processedResults;
   }, [queryText, fuzzyResults, allComponents]);
-  return jsxs4(View2, { style: { flex: 1 }, children: [
-    jsxs4(SearchField, { children: [
-      jsx14(SearchIconWrapper, { children: jsx14(SearchIcon, {}) }),
-      isBottomSheet && (Platform.OS === "ios" || Platform.OS === "android") ? jsx14(
-        BottomSheetInput,
+  return jsxs3(View2, { style: { flex: 1 }, children: [
+    jsxs3(SearchField, { children: [
+      jsx7(SearchIconWrapper, { children: jsx7(SearchIcon, {}) }),
+      jsx7(
+        Input,
         {
           ref: inputRef,
           onChangeText: setInputValue,
           onFocus: () => setIsOpen(!0),
           onBlur: () => setIsOpen(!1)
         }
-      ) : jsx14(Input, { ref: inputRef, onChangeText: setInputValue, onFocus: () => setIsOpen(!0) }),
-      isOpen && jsx14(
+      ),
+      isOpen && jsx7(
         ClearIcon,
         {
           onPress: () => {
             setInputValue(""), inputRef.current?.clear();
           },
-          children: jsx14(CloseIcon, {})
+          children: jsx7(CloseIcon, {})
         }
       )
     ] }),
@@ -812,7 +663,7 @@ import {
   Button
 } from "@aussieljk/forkbook/internal/react-native-ui-common";
 import { View as View3 } from "react-native";
-import { jsx as jsx15, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
 import { createElement as createElement2 } from "react";
 var ResultsList = styled6.View({
   margin: 0,
@@ -872,19 +723,19 @@ var ResultsList = styled6.View({
   marginBottom: 4,
   alignItems: "center"
 })), Highlight = React6.memo(
-  function({ children, text, ranges }) {
-    if (!ranges || ranges.length === 0) return jsx15(Text, { children: children ?? text });
+  function({ children, text: text2, ranges }) {
+    if (!ranges || ranges.length === 0) return jsx8(Text, { children: children ?? text2 });
     let { nodes: result } = ranges.reduce(
-      ({ cursor, nodes }, [start, end], index, { length }) => (cursor < start && nodes.push(jsx15(Text, { children: text.slice(cursor, start) }, `text-${index}`)), nodes.push(jsx15(Mark, { children: text.slice(start, end + 1) }, `mark-${index}`)), index === length - 1 && end + 1 < text.length && nodes.push(jsx15(Text, { children: text.slice(end + 1) }, `last-${index}`)), { cursor: end + 1, nodes }),
+      ({ cursor, nodes }, [start, end], index, { length }) => (cursor < start && nodes.push(jsx8(Text, { children: text2.slice(cursor, start) }, `text-${index}`)), nodes.push(jsx8(Mark, { children: text2.slice(start, end + 1) }, `mark-${index}`)), index === length - 1 && end + 1 < text2.length && nodes.push(jsx8(Text, { children: text2.slice(end + 1) }, `last-${index}`)), { cursor: end + 1, nodes }),
       { cursor: 0, nodes: [] }
     );
-    return jsx15(Text, { children: result });
+    return jsx8(Text, { children: result });
   }
 ), Title = styled6.Text(({ theme }) => ({
   justifyContent: "flex-start",
   color: theme.textMutedColor,
   fontSize: theme.typography.size.s2
-})), Path9 = styled6.View(({ theme }) => ({
+})), Path = styled6.View(({ theme }) => ({
   justifyContent: "flex-start",
   marginVertical: 2,
   color: theme.textMutedColor,
@@ -906,14 +757,14 @@ var ResultsList = styled6.View({
     },
     [onPress]
   ), nameHighlights = matches?.[0], pathString = item.path?.join(" ") ?? "";
-  return jsxs5(ResultRow, { ...props, onPress: press, children: [
-    jsxs5(IconWrapper, { children: [
-      item.type === "component" && jsx15(ComponentIcon, { width: "14", height: "14" }),
-      item.type === "story" && jsx15(StoryIcon, { width: "14", height: "14" })
+  return jsxs4(ResultRow, { ...props, onPress: press, children: [
+    jsxs4(IconWrapper, { children: [
+      item.type === "component" && jsx8(ComponentIcon, { width: "14", height: "14" }),
+      item.type === "story" && jsx8(StoryIcon, { width: "14", height: "14" })
     ] }),
-    jsxs5(ResultRowContent, { testID: "search-result-item--label", children: [
-      jsx15(Title, { children: jsx15(Highlight, { text: item.name, ranges: nameHighlights, children: item.name }) }),
-      jsx15(Path9, { children: jsx15(PathText, { children: jsx15(Highlight, { text: pathString, ranges: matches?.[1], children: item.path?.join(" / ") }) }) })
+    jsxs4(ResultRowContent, { testID: "search-result-item--label", children: [
+      jsx8(Title, { children: jsx8(Highlight, { text: item.name, ranges: nameHighlights, children: item.name }) }),
+      jsx8(Path, { children: jsx8(PathText, { children: jsx8(Highlight, { text: pathString, ranges: matches?.[1], children: item.path?.join(" / ") }) }) })
     ] })
   ] });
 }), Text = styled6.Text(({ theme }) => ({
@@ -929,18 +780,18 @@ var ResultsList = styled6.View({
   let handleClearLastViewed = () => {
     clearLastViewed?.(), closeMenu();
   };
-  return jsxs5(ResultsList, { children: [
-    results.length > 0 && !query ? jsxs5(RecentlyOpenedTitle, { children: [
-      jsx15(Text, { children: "Recently opened" }),
-      jsx15(IconButton2, { onPress: handleClearLastViewed })
+  return jsxs4(ResultsList, { children: [
+    results.length > 0 && !query ? jsxs4(RecentlyOpenedTitle, { children: [
+      jsx8(Text, { children: "Recently opened" }),
+      jsx8(IconButton2, { onPress: handleClearLastViewed })
     ] }) : null,
-    results.length === 0 && query ? jsx15(View3, { children: jsxs5(NoResults, { children: [
-      jsx15(Text, { style: { marginBottom: 8 }, children: "No components found" }),
-      jsx15(Text, { children: "Find components by name or path." })
+    results.length === 0 && query ? jsx8(View3, { children: jsxs4(NoResults, { children: [
+      jsx8(Text, { style: { marginBottom: 8 }, children: "No components found" }),
+      jsx8(Text, { children: "Find components by name or path." })
     ] }) }) : null,
     results.map((result, index) => {
       if (isExpandType2(result))
-        return jsx15(MoreWrapper, { children: jsx15(
+        return jsx8(MoreWrapper, { children: jsx8(
           Button,
           {
             ...result,
@@ -971,7 +822,7 @@ var DEFAULT_REF_ID = "storybook_internal";
 
 // src/react-native-ui/Sidebar.tsx
 import { View as View4 } from "react-native";
-import { Fragment as Fragment2, jsx as jsx16, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 var Container2 = styled7.View(({ theme }) => ({
   width: "100%",
   height: "100%",
@@ -989,12 +840,12 @@ var Container2 = styled7.View(({ theme }) => ({
   condition
 }) {
   let [a, b] = React7.Children.toArray(children);
-  return jsxs6(Fragment2, { children: [
-    jsx16(View4, { style: { display: condition ? "flex" : "none" }, children: a }),
-    jsx16(View4, { style: { display: condition ? "none" : "flex" }, children: b })
+  return jsxs5(Fragment2, { children: [
+    jsx9(View4, { style: { display: condition ? "flex" : "none" }, children: a }),
+    jsx9(View4, { style: { display: condition ? "none" : "flex" }, children: b })
   ] });
 }), useCombination = (index, indexError, previewInitialized, status, refs) => {
-  let hash = useMemo7(
+  let hash = useMemo5(
     () => ({
       [DEFAULT_REF_ID]: {
         index,
@@ -1009,7 +860,7 @@ var Container2 = styled7.View(({ theme }) => ({
     }),
     [refs, index, indexError, previewInitialized, status]
   );
-  return useMemo7(() => ({ hash, entries: Object.entries(hash) }), [hash]);
+  return useMemo5(() => ({ hash, entries: Object.entries(hash) }), [hash]);
 }, Sidebar = React7.memo(function({
   storyId,
   refId = DEFAULT_REF_ID,
@@ -1020,12 +871,12 @@ var Container2 = styled7.View(({ theme }) => ({
   refs = {},
   setSelection
 }) {
-  let selected = useMemo7(
+  let selected = useMemo5(
     () => storyId ? { storyId, refId } : null,
     [storyId, refId]
   ), dataset = useCombination(index, indexError, previewInitialized, status, refs), lastViewedProps = useLastViewed(selected);
-  return jsx16(Container2, { style: { paddingHorizontal: 10 }, children: jsx16(Top, { children: jsx16(Search, { dataset, setSelection, ...lastViewedProps, children: ({ query, results, isBrowsing, closeMenu, getItemProps, highlightedIndex }) => jsxs6(Swap, { condition: isBrowsing, children: [
-    jsx16(
+  return jsx9(Container2, { style: { paddingHorizontal: 10 }, children: jsx9(Top, { children: jsx9(Search, { dataset, setSelection, ...lastViewedProps, children: ({ query, results, isBrowsing, closeMenu, getItemProps, highlightedIndex }) => jsxs5(Swap, { condition: isBrowsing, children: [
+    jsx9(
       Explorer,
       {
         dataset,
@@ -1035,7 +886,7 @@ var Container2 = styled7.View(({ theme }) => ({
         setSelection
       }
     ),
-    jsx16(
+    jsx9(
       SearchResults,
       {
         query,
@@ -1051,8 +902,7 @@ var Container2 = styled7.View(({ theme }) => ({
 });
 
 // src/react-native-ui/Layout.tsx
-import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
-import { styled as styled9, ThemeProvider, useTheme as useTheme9 } from "@aussieljk/forkbook/internal/react-native-theming";
+import { styled as styled9, ThemeProvider, useTheme as useTheme5 } from "@aussieljk/forkbook/internal/react-native-theming";
 import {
   IconButton as IconButton4,
   LayoutProvider,
@@ -1061,9 +911,8 @@ import {
   useStoreBooleanState,
   useStyle as useStyle2
 } from "@aussieljk/forkbook/internal/react-native-ui-common";
-import { useCallback as useCallback7, useLayoutEffect, useMemo as useMemo13, useRef as useRef7, useState as useState4 } from "react";
-import { ScrollView as ScrollView2, Text as Text4, TouchableOpacity as TouchableOpacity2, View as View6 } from "react-native";
-import { GestureHandlerRootView } from "react-native-gesture-handler";
+import { useCallback as useCallback7, useLayoutEffect, useMemo as useMemo9, useRef as useRef7, useState as useState4 } from "react";
+import { ScrollView as ScrollView3, Text as Text4, TouchableOpacity as TouchableOpacity2, View as View6 } from "react-native";
 import { SafeAreaProvider, useSafeAreaInsets as useSafeAreaInsets3 } from "react-native-safe-area-context";
 import { SET_CURRENT_STORY } from "@aussieljk/forkbook/internal/core-events";
 import {
@@ -1071,139 +920,36 @@ import {
 } from "@aussieljk/forkbook/internal/types";
 import { addons as addons2 } from "@aussieljk/forkbook/manager-api";
 
-// src/react-native-ui/icon/BottomBarToggleIcon.tsx
-import { Path as Path10, Svg as Svg9 } from "react-native-svg";
-import { jsx as jsx17, jsxs as jsxs7 } from "react/jsx-runtime";
-var BottomBarToggleIcon = ({
-  color = "currentColor",
-  width = 14,
-  height = 14,
-  ...props
-}) => jsxs7(Svg9, { width, height, viewBox: "0 0 14 14", fill: "none", ...props, children: [
-  jsx17(
-    Path10,
-    {
-      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
-    }
-  ),
-  jsx17(
-    Path10,
-    {
-      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/react-native-ui/icon/CloseFullscreenIcon.tsx
-import { useMemo as useMemo8 } from "react";
-import Svg10, { Path as Path11 } from "react-native-svg";
-import { useTheme as useTheme5 } from "@aussieljk/forkbook/internal/react-native-theming";
-import { jsx as jsx18 } from "react/jsx-runtime";
-function CloseFullscreenIcon({ color, width = 14, height = 14, ...props }) {
-  let theme = useTheme5(), fillColor = useMemo8(() => color ?? theme.color.defaultText, [color, theme.color.defaultText]);
-  return jsx18(Svg10, { fill: fillColor, height, viewBox: "0 0 16 16", width, ...props, children: jsx18(Path11, { d: "M5.5 0a.5.5 0 01.5.5v4A1.5 1.5 0 014.5 6h-4a.5.5 0 010-1h4a.5.5 0 00.5-.5v-4a.5.5 0 01.5-.5zm5 0a.5.5 0 01.5.5v4a.5.5 0 00.5.5h4a.5.5 0 010 1h-4A1.5 1.5 0 0110 4.5v-4a.5.5 0 01.5-.5zM0 10.5a.5.5 0 01.5-.5h4A1.5 1.5 0 016 11.5v4a.5.5 0 01-1 0v-4a.5.5 0 00-.5-.5h-4a.5.5 0 01-.5-.5zm10 1a1.5 1.5 0 011.5-1.5h4a.5.5 0 010 1h-4a.5.5 0 00-.5.5v4a.5.5 0 01-1 0v-4z" }) });
-}
-
-// src/react-native-ui/icon/FullscreenIcon.tsx
-import Svg11, { Path as Path12 } from "react-native-svg";
-import { useTheme as useTheme6 } from "@aussieljk/forkbook/internal/react-native-theming";
-import { useMemo as useMemo9 } from "react";
-import { jsx as jsx19 } from "react/jsx-runtime";
-function FullscreenIcon({ color, width = 14, height = 14, ...props }) {
-  let theme = useTheme6(), fillColor = useMemo9(() => color ?? theme.color.defaultText, [color, theme.color.defaultText]);
-  return jsx19(Svg11, { width, height, viewBox: "0 0 14 14", fill: "none", ...props, children: jsx19(
-    Path12,
-    {
-      d: "M1.5 1h2a.5.5 0 010 1h-.793l3.147 3.146a.5.5 0 11-.708.708L2 2.707V3.5a.5.5 0 01-1 0v-2a.5.5 0 01.5-.5zm8.5.5a.5.5 0 01.5-.5h2a.5.5 0 01.5.5v2a.5.5 0 01-1 0v-.793L8.854 5.854a.5.5 0 11-.708-.708L11.293 2H10.5a.5.5 0 01-.5-.5zm2.5 8.5a.5.5 0 01.5.5v2a.5.5 0 01-.5.5h-2a.5.5 0 010-1h.793L8.146 8.854a.5.5 0 11.708-.708L12 11.293V10.5a.5.5 0 01.5-.5zM2 11.293V10.5a.5.5 0 00-1 0v2a.5.5 0 00.5.5h2a.5.5 0 000-1h-.793l3.147-3.146a.5.5 0 10-.708-.708L2 11.293z",
-      fill: fillColor
-    }
-  ) });
-}
-
-// src/react-native-ui/icon/MenuIcon.tsx
-import { Path as Path13, Svg as Svg12 } from "react-native-svg";
-import { jsx as jsx20 } from "react/jsx-runtime";
-var MenuIcon = ({
-  color = "currentColor",
-  width = 14,
-  height = 14,
-  ...props
-}) => jsx20(Svg12, { width, height, viewBox: "0 0 14 14", fill: "none", ...props, children: jsx20(
-  Path13,
-  {
-    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/react-native-ui/MobileAddonsPanel.tsx
-import { BottomSheetModal } from "@gorhom/bottom-sheet";
+import { BottomSheetModal } from "@expo/ui/community/bottom-sheet";
 import { addons } from "@aussieljk/forkbook/manager-api";
-import { styled as styled8, useTheme as useTheme7 } from "@aussieljk/forkbook/internal/react-native-theming";
+import { styled as styled8, useTheme as useTheme3 } from "@aussieljk/forkbook/internal/react-native-theming";
 import {
   Addon_TypesEnum
 } from "@aussieljk/forkbook/internal/types";
-import { forwardRef as forwardRef2, useImperativeHandle, useMemo as useMemo10, useRef as useRef5, useState as useState3 } from "react";
-import { Platform as Platform2, Text as Text2, View as View5, useWindowDimensions } from "react-native";
-import { ScrollView } from "react-native-gesture-handler";
-import Animated, {
-  useAnimatedKeyboard,
-  useAnimatedStyle,
-  useReducedMotion,
-  useSharedValue
-} from "react-native-reanimated";
+import { forwardRef as forwardRef2, useImperativeHandle, useMemo as useMemo6, useRef as useRef5, useState as useState3 } from "react";
+import { ScrollView, Text as Text2, View as View5 } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { IconButton as IconButton3, useStyle } from "@aussieljk/forkbook/internal/react-native-ui-common";
-import { jsx as jsx21, jsxs as jsxs8 } from "react/jsx-runtime";
-var bottomSheetStyle = {
-  paddingTop: 8
-}, contentStyle = {
-  flex: 1
-}, MobileAddonsPanel = forwardRef2(
+import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+var snapPoints = ["25%", "50%", "75%"], MobileAddonsPanel = forwardRef2(
   ({ storyId, parameters }, ref) => {
-    let theme = useTheme7(), reducedMotion = useReducedMotion(), addonsPanelBottomSheetRef = useRef5(null), insets = useSafeAreaInsets(), animatedPosition = useSharedValue(0);
-    useAnimatedKeyboard(), useImperativeHandle(ref, () => ({
+    let theme = useTheme3(), addonsPanelBottomSheetRef = useRef5(null);
+    useImperativeHandle(ref, () => ({
       setAddonsPanelOpen: (open) => {
         open ? addonsPanelBottomSheetRef.current?.present() : addonsPanelBottomSheetRef.current?.dismiss();
       }
     }));
-    let { height } = useWindowDimensions(), adjustedBottomSheetSize = useAnimatedStyle(() => {
-      let extraPadding = Platform2.OS === "android" ? 32 : 16 + insets.bottom;
-      return {
-        maxHeight: height - animatedPosition.value - extraPadding
-      };
-    }, [animatedPosition, height, insets.bottom]), backgroundStyle = useStyle(() => ({
-      borderRadius: 0,
-      borderTopColor: theme.appBorderColor,
-      borderTopWidth: 1,
-      backgroundColor: theme.background.content
-    })), handleIndicatorStyle = useStyle(() => ({
-      backgroundColor: theme.textMutedColor
-    }));
-    return jsx21(
+    let backgroundStyle = useStyle(() => ({ backgroundColor: theme.background.content }));
+    return jsx10(
       BottomSheetModal,
       {
         ref: addonsPanelBottomSheetRef,
         index: 1,
-        animateOnMount: !reducedMotion,
-        snapPoints: ["25%", "50%", "75%"],
-        style: bottomSheetStyle,
-        animatedPosition,
+        snapPoints,
+        enablePanDownToClose: !0,
         backgroundStyle,
-        handleIndicatorStyle,
-        keyboardBehavior: "extend",
-        enableDismissOnClose: !0,
-        enableHandlePanningGesture: !0,
-        stackBehavior: "replace",
-        enableDynamicSizing: !1,
-        accessible: !1,
-        accessibilityLabel: null,
-        accessibilityRole: null,
-        children: jsx21(Animated.View, { style: [contentStyle, adjustedBottomSheetSize], children: jsx21(
+        children: jsx10(
           AddonsTabs,
           {
             onClose: () => {
@@ -1212,7 +958,7 @@ var bottomSheetStyle = {
             storyId,
             parameters
           }
-        ) })
+        )
       }
     );
   }
@@ -1243,17 +989,17 @@ var addonsTabsContainerStyle = {
   storyId,
   parameters
 }) => {
-  let panels = useMemo10(() => {
+  let panels = useMemo6(() => {
     let allPanels = addons.getElements(Addon_TypesEnum.PANEL);
     return Object.fromEntries(
       Object.entries(allPanels).filter(([, p]) => !p.paramKey || !parameters?.[p.paramKey]?.disable)
     );
   }, [parameters]), [addonSelected, setAddonSelected] = useState3(Object.keys(panels)[0]), insets = useSafeAreaInsets(), scrollContentContainerStyle = useStyle(() => ({
     paddingBottom: insets.bottom + 16
-  })), panelEntries = useMemo10(() => Object.entries(panels), [panels]), activeAddonId = panels[addonSelected] ? addonSelected : panelEntries[0]?.[0];
-  return jsxs8(View5, { style: addonsTabsContainerStyle, children: [
-    jsxs8(View5, { style: addonsTabsStyle, children: [
-      jsx21(
+  })), panelEntries = useMemo6(() => Object.entries(panels), [panels]), activeAddonId = panels[addonSelected] ? addonSelected : panelEntries[0]?.[0];
+  return jsxs6(View5, { style: addonsTabsContainerStyle, children: [
+    jsxs6(View5, { style: addonsTabsStyle, children: [
+      jsx10(
         ScrollView,
         {
           horizontal: !0,
@@ -1261,7 +1007,7 @@ var addonsTabsContainerStyle = {
           contentContainerStyle: addonsTabsContentContainerStyle,
           children: Object.values(panels).map(({ id, title }) => {
             let resolvedTitle = typeof title == "function" ? title({}) : title;
-            return jsx21(
+            return jsx10(
               Tab,
               {
                 active: id === activeAddonId,
@@ -1273,7 +1019,7 @@ var addonsTabsContainerStyle = {
           })
         }
       ),
-      jsx21(
+      jsx10(
         IconButton3,
         {
           style: closeIconStyle,
@@ -1284,18 +1030,11 @@ var addonsTabsContainerStyle = {
         }
       )
     ] }),
-    jsx21(
-      ScrollView,
-      {
-        style: addonsScrollStyle,
-        contentContainerStyle: scrollContentContainerStyle,
-        children: storyId ? panelEntries.length === 0 ? jsx21(View5, { style: centeredStyle, children: jsx21(Text2, { children: "No addons loaded." }) }) : panelEntries.map(([id, p]) => jsx21(View5, { style: id === activeAddonId ? void 0 : hiddenStyle, children: jsx21(PanelRenderer, { panel: p }) }, id)) : jsx21(View5, { style: centeredStyle, children: jsx21(Text2, { children: "No Story Selected" }) })
-      }
-    )
+    jsx10(ScrollView, { style: addonsScrollStyle, contentContainerStyle: scrollContentContainerStyle, children: storyId ? panelEntries.length === 0 ? jsx10(View5, { style: centeredStyle, children: jsx10(Text2, { children: "No addons loaded." }) }) : panelEntries.map(([id, p]) => jsx10(View5, { style: id === activeAddonId ? void 0 : hiddenStyle, children: jsx10(PanelRenderer, { panel: p }) }, id)) : jsx10(View5, { style: centeredStyle, children: jsx10(Text2, { children: "No Story Selected" }) }) })
   ] });
-}, PanelRenderer = ({ panel }) => panel.render({ active: !0 }), Tab = ({ active, onPress, text }) => {
-  let testID = `addon-tab-${text.toLowerCase().replace(/[^a-z0-9]+/g, "-")}`;
-  return jsx21(
+}, PanelRenderer = ({ panel }) => panel.render({ active: !0 }), Tab = ({ active, onPress, text: text2 }) => {
+  let testID = `addon-tab-${text2.toLowerCase().replace(/[^a-z0-9]+/g, "-")}`;
+  return jsx10(
     TabButton,
     {
       active,
@@ -1304,8 +1043,8 @@ var addonsTabsContainerStyle = {
       accessible: !0,
       accessibilityRole: "tab",
       accessibilityState: { selected: active },
-      accessibilityLabel: text,
-      children: jsx21(TabText, { active, children: text })
+      accessibilityLabel: text2,
+      children: jsx10(TabText, { active, children: text2 })
     }
   );
 }, TabButton = styled8.TouchableOpacity(({ theme, active }) => ({
@@ -1324,47 +1063,22 @@ var addonsTabsContainerStyle = {
 }));
 
 // src/react-native-ui/MobileMenuDrawer.tsx
-import BottomSheet, {
-  BottomSheetBackdrop,
-  BottomSheetScrollView
-} from "@gorhom/bottom-sheet";
-import { useTheme as useTheme8 } from "@aussieljk/forkbook/internal/react-native-theming";
+import BottomSheet from "@expo/ui/community/bottom-sheet";
+import { useTheme as useTheme4 } from "@aussieljk/forkbook/internal/react-native-theming";
 import {
   forwardRef as forwardRef3,
   memo,
   useCallback as useCallback6,
   useImperativeHandle as useImperativeHandle2,
-  useMemo as useMemo11,
+  useMemo as useMemo7,
   useRef as useRef6
 } from "react";
-import { Keyboard, Platform as Platform3 } from "react-native";
-import { useAnimatedStyle as useAnimatedStyle2, useReducedMotion as useReducedMotion2 } from "react-native-reanimated";
+import { Keyboard, ScrollView as ScrollView2 } from "react-native";
 import { useSafeAreaInsets as useSafeAreaInsets2 } from "react-native-safe-area-context";
-import { jsx as jsx22 } from "react/jsx-runtime";
-var BottomSheetBackdropComponent = (backdropComponentProps) => {
-  let androidTouchEventFix = useAnimatedStyle2(() => Platform3.OS === "android" ? {
-    zIndex: backdropComponentProps.animatedIndex.value >= 0 ? 0 : -1
-  } : {});
-  return jsx22(
-    BottomSheetBackdrop,
-    {
-      ...backdropComponentProps,
-      appearsOnIndex: 0,
-      disappearsOnIndex: -1,
-      pressBehavior: "close",
-      style: [
-        backdropComponentProps.style,
-        androidTouchEventFix,
-        {
-          backgroundColor: "rgba(0,0,0,0.5)",
-          paddingTop: Platform3.OS === "android" ? 1 : void 0
-        }
-      ]
-    }
-  );
-}, snapPoints = ["50%", "75%"], MobileMenuDrawer = memo(
+import { jsx as jsx11 } from "react/jsx-runtime";
+var snapPoints2 = ["50%", "75%"], MobileMenuDrawer = memo(
   forwardRef3(({ children }, ref) => {
-    let reducedMotion = useReducedMotion2(), insets = useSafeAreaInsets2(), theme = useTheme8(), menuBottomSheetRef = useRef6(null), { scrollToSelectedNode, scrollRef } = useSelectedNode(), shouldScrollOnOpen = useRef6(!1), handleSheetChange = useCallback6(
+    let insets = useSafeAreaInsets2(), theme = useTheme4(), menuBottomSheetRef = useRef6(null), { scrollToSelectedNode, scrollRef } = useSelectedNode(), shouldScrollOnOpen = useRef6(!1), handleSheetChange = useCallback6(
       (index) => {
         index >= 0 && shouldScrollOnOpen.current && (shouldScrollOnOpen.current = !1, scrollToSelectedNode());
       },
@@ -1375,26 +1089,18 @@ var BottomSheetBackdropComponent = (backdropComponentProps) => {
         open ? (shouldScrollOnOpen.current = !0, menuBottomSheetRef.current?.snapToIndex(1)) : (Keyboard.dismiss(), menuBottomSheetRef.current?.close());
       }
     }));
-    let bgColorStyle = useMemo11(() => ({ backgroundColor: theme.background.content }), [theme.background.content]), handleIndicatorStyle = useMemo11(() => ({ backgroundColor: theme.textMutedColor }), [theme.textMutedColor]), contentContainerStyle = useMemo11(() => ({ paddingBottom: insets.bottom }), [insets.bottom]);
-    return jsx22(
+    let bgColorStyle = useMemo7(() => ({ backgroundColor: theme.background.content }), [theme.background.content]), contentContainerStyle = useMemo7(() => ({ paddingBottom: insets.bottom }), [insets.bottom]);
+    return jsx11(
       BottomSheet,
       {
         ref: menuBottomSheetRef,
         index: -1,
-        animateOnMount: !reducedMotion,
-        snapPoints,
-        enableHandlePanningGesture: !0,
-        enableContentPanningGesture: !0,
-        enableDynamicSizing: !1,
-        keyboardBehavior: "extend",
-        keyboardBlurBehavior: "restore",
+        snapPoints: snapPoints2,
         enablePanDownToClose: !0,
-        backdropComponent: BottomSheetBackdropComponent,
         backgroundStyle: bgColorStyle,
-        handleIndicatorStyle,
         onChange: handleSheetChange,
-        children: jsx22(
-          BottomSheetScrollView,
+        children: jsx11(
+          ScrollView2,
           {
             ref: scrollRef,
             keyboardShouldPersistTaps: "handled",
@@ -1408,144 +1114,21 @@ var BottomSheetBackdropComponent = (backdropComponentProps) => {
 );
 
 // src/react-native-ui/StorybookLogo.tsx
-import { isValidElement, useEffect as useEffect2, useMemo as useMemo12 } from "react";
+import { isValidElement, useEffect as useEffect2, useMemo as useMemo8 } from "react";
 import { Image, Linking, Text as Text3, TouchableOpacity } from "react-native";
-
-// src/react-native-ui/icon/DarkLogo.tsx
-import Svg13, { Defs, G, Mask, Path as Path14, Use } from "react-native-svg";
-import { jsx as jsx23, jsxs as jsxs9 } from "react/jsx-runtime";
-function DarkLogo({ width = 300, height = 60, ...props }) {
-  return jsxs9(Svg13, { width, height, viewBox: "0 0 300 60", ...props, children: [
-    jsxs9(Defs, { children: [
-      jsx23(
-        Path14,
-        {
-          id: "a",
-          d: "M1.848 54.92L.002 5.723A2.997 2.997 0 012.81 2.621L44.654.006a2.997 2.997 0 013.183 2.99v53.607a2.997 2.997 0 01-3.13 2.994l-40-1.796a2.997 2.997 0 01-2.86-2.882z"
-        }
-      ),
-      jsx23(
-        Path14,
-        {
-          id: "c",
-          d: "M1.848 54.92L.002 5.723A2.997 2.997 0 012.81 2.621L44.654.006a2.997 2.997 0 013.183 2.99v53.607a2.997 2.997 0 01-3.13 2.994l-40-1.796a2.997 2.997 0 01-2.86-2.882z"
-        }
-      )
-    ] }),
-    jsxs9(G, { fill: "none", fillRule: "evenodd", children: [
-      jsx23(
-        Path14,
-        {
-          fill: "#FFF",
-          fillRule: "nonzero",
-          d: "M80.387 47.178c-2.543 0-4.99-.342-7.343-1.025-2.352-.684-4.307-1.63-5.864-2.837l2.384-5.293c3.242 2.257 6.882 3.386 10.919 3.386 2.097 0 3.71-.342 4.84-1.026 1.128-.683 1.692-1.629 1.692-2.836 0-1.081-.517-1.924-1.55-2.528-1.033-.603-2.869-1.192-5.507-1.764-2.956-.604-5.316-1.335-7.08-2.193-1.765-.858-3.052-1.915-3.862-3.17-.811-1.256-1.216-2.806-1.216-4.65 0-2.034.564-3.846 1.692-5.435 1.129-1.59 2.71-2.837 4.744-3.743 2.035-.906 4.387-1.359 7.057-1.359 2.384 0 4.68.35 6.89 1.05 2.21.699 3.965 1.636 5.269 2.812l-2.384 5.293c-3.084-2.257-6.326-3.385-9.727-3.385-1.94 0-3.465.373-4.577 1.12-1.113.747-1.67 1.772-1.67 3.075 0 .763.215 1.391.644 1.884.43.492 1.145.93 2.146 1.31 1.001.382 2.424.78 4.267 1.193 4.323.954 7.43 2.177 9.322 3.671 1.891 1.494 2.837 3.56 2.837 6.199 0 3.178-1.224 5.682-3.672 7.51-2.447 1.827-5.864 2.74-10.25 2.74zm31.183-5.34c.731 0 1.494-.048 2.289-.143l-.382 5.244c-.922.128-1.844.191-2.765.191-3.56 0-6.159-.779-7.796-2.336-1.637-1.558-2.456-3.926-2.456-7.104v-8.964h-4.434v-5.388h4.434v-6.866h7.2v6.866h5.865v5.388h-5.865v8.916c0 2.797 1.303 4.196 3.91 4.196zm16.736 5.292c-2.48 0-4.657-.5-6.533-1.502-1.875-1.001-3.321-2.416-4.338-4.243-1.018-1.828-1.526-3.982-1.526-6.46 0-2.48.508-4.634 1.526-6.462 1.017-1.827 2.463-3.234 4.338-4.22 1.876-.985 4.053-1.477 6.533-1.477 2.479 0 4.656.492 6.532 1.478 1.875.985 3.321 2.392 4.339 4.22 1.017 1.827 1.525 3.98 1.525 6.46s-.508 4.633-1.525 6.46c-1.018 1.828-2.464 3.243-4.34 4.244-1.875 1.002-4.052 1.502-6.531 1.502zm0-5.483c3.496 0 5.244-2.24 5.244-6.723 0-2.257-.453-3.941-1.358-5.054-.906-1.113-2.202-1.669-3.886-1.669-3.497 0-5.245 2.241-5.245 6.723 0 4.482 1.748 6.723 5.245 6.723zm32.327-12.969l-4.053.43c-2.003.19-3.417.754-4.244 1.692-.826.938-1.24 2.185-1.24 3.743v12.206h-7.199V23.338h6.914v3.957c1.176-2.702 3.607-4.18 7.295-4.434l2.098-.143.429 5.96zm20.92-5.292h7.056L174.496 55.33H167.2l4.481-9.87-9.63-22.075h7.485l5.912 14.876 6.103-14.876zm23.744-.62c2.034 0 3.83.492 5.388 1.478 1.557.985 2.773 2.392 3.647 4.22.874 1.827 1.311 3.949 1.311 6.365 0 2.416-.437 4.553-1.31 6.413-.875 1.86-2.099 3.306-3.672 4.339-1.574 1.033-3.362 1.55-5.364 1.55-1.621 0-3.083-.343-4.387-1.026-1.303-.683-2.304-1.629-3.004-2.837v3.48h-7.104V13.135h7.2v13.35c.7-1.175 1.692-2.09 2.98-2.74 1.287-.652 2.726-.978 4.315-.978zm-2.098 18.881c1.685 0 2.988-.596 3.91-1.788.922-1.192 1.382-2.869 1.382-5.03 0-2.13-.46-3.759-1.382-4.887-.922-1.129-2.225-1.693-3.91-1.693s-2.988.58-3.91 1.74c-.922 1.16-1.383 2.805-1.383 4.935 0 2.162.461 3.822 1.383 4.983.922 1.16 2.225 1.74 3.91 1.74zm28.083 5.483c-2.479 0-4.656-.5-6.532-1.502-1.875-1.001-3.321-2.416-4.339-4.243-1.017-1.828-1.525-3.982-1.525-6.46 0-2.48.508-4.634 1.525-6.462 1.018-1.827 2.464-3.234 4.34-4.22 1.875-.985 4.052-1.477 6.531-1.477 2.48 0 4.657.492 6.533 1.478 1.875.985 3.321 2.392 4.339 4.22 1.017 1.827 1.525 3.98 1.525 6.46s-.508 4.633-1.525 6.46c-1.018 1.828-2.464 3.243-4.34 4.244-1.875 1.002-4.052 1.502-6.532 1.502zm0-5.483c3.497 0 5.245-2.24 5.245-6.723 0-2.257-.453-3.941-1.359-5.054-.906-1.113-2.2-1.669-3.886-1.669-3.496 0-5.244 2.241-5.244 6.723 0 4.482 1.748 6.723 5.244 6.723zm26.844 5.483c-2.48 0-4.656-.5-6.532-1.502-1.875-1.001-3.322-2.416-4.339-4.243-1.017-1.828-1.525-3.982-1.525-6.46 0-2.48.508-4.634 1.525-6.462 1.017-1.827 2.464-3.234 4.34-4.22 1.875-.985 4.052-1.477 6.531-1.477 2.48 0 4.657.492 6.532 1.478 1.876.985 3.322 2.392 4.34 4.22 1.017 1.827 1.525 3.98 1.525 6.46s-.508 4.633-1.526 6.46c-1.017 1.828-2.463 3.243-4.339 4.244-1.875 1.002-4.052 1.502-6.532 1.502zm0-5.483c3.497 0 5.245-2.24 5.245-6.723 0-2.257-.453-3.941-1.359-5.054-.906-1.113-2.201-1.669-3.886-1.669-3.496 0-5.244 2.241-5.244 6.723 0 4.482 1.748 6.723 5.244 6.723zM299 46.749h-8.82l-8.965-10.442v10.442h-7.2V13.134h7.2v20.217l8.63-9.965h8.583l-9.822 11.157L299 46.749z"
-        }
-      ),
-      jsx23(
-        Path14,
-        {
-          d: "M48.831 2.81c.004.062.006.124.006.187v53.606a2.997 2.997 0 01-3.13 2.994l-40-1.796a2.997 2.997 0 01-2.86-2.882L1.002 5.724A2.997 2.997 0 013.81 2.621L36.609.57l-.285 6.756a.447.447 0 00.05.223l.04.066c.15.196.43.235.627.085l2.623-1.99 2.217 1.746a.447.447 0 00.723-.367L42.356.211l3.298-.205A2.997 2.997 0 0148.83 2.81z",
-          fill: "#FF4785",
-          fillRule: "nonzero"
-        }
-      ),
-      jsxs9(G, { transform: "translate(1)", children: [
-        jsx23(Mask, { id: "b", fill: "#fff", children: jsx23(Use, { xlinkHref: "#a" }) }),
-        jsx23(
-          Path14,
-          {
-            fill: "#FFF",
-            fillRule: "nonzero",
-            d: "M35.324 7.326L35.61.569l5.746-.36.248 6.88a.447.447 0 01-.723.367L38.664 5.71 36.041 7.7a.447.447 0 01-.717-.374z",
-            mask: "url(#b)"
-          }
-        )
-      ] }),
-      jsxs9(G, { transform: "translate(1)", children: [
-        jsx23(Mask, { id: "d", fill: "#fff", children: jsx23(Use, { xlinkHref: "#c" }) }),
-        jsx23(
-          Path14,
-          {
-            fill: "#FFF",
-            fillRule: "nonzero",
-            d: "M27.975 22.464c0 1.166 7.853.607 8.907-.212 0-7.939-4.26-12.11-12.06-12.11-7.801 0-12.172 4.236-12.172 10.591 0 11.069 14.938 11.28 14.938 17.318 0 1.695-.83 2.7-2.656 2.7-2.379 0-3.32-1.214-3.209-5.345 0-.896-9.073-1.175-9.35 0-.704 10.01 5.533 12.898 12.67 12.898 6.915 0 12.337-3.686 12.337-10.36 0-11.862-15.159-11.544-15.159-17.423 0-2.383 1.77-2.7 2.822-2.7 1.106 0 3.098.194 2.932 4.643z",
-            mask: "url(#d)"
-          }
-        )
-      ] })
-    ] })
-  ] });
-}
-
-// src/react-native-ui/icon/Logo.tsx
-import Svg14, { Defs as Defs2, G as G2, Mask as Mask2, Path as Path15, Use as Use2 } from "react-native-svg";
-import { jsx as jsx24, jsxs as jsxs10 } from "react/jsx-runtime";
-function Logo({ width = 300, height = 60, ...props }) {
-  return jsxs10(Svg14, { width, height, viewBox: "0 0 300 60", ...props, children: [
-    jsxs10(Defs2, { children: [
-      jsx24(
-        Path15,
-        {
-          id: "a",
-          d: "M1.848 54.92L.002 5.723A2.997 2.997 0 012.81 2.621L44.654.006a2.997 2.997 0 013.183 2.99v53.607a2.997 2.997 0 01-3.13 2.994l-40-1.796a2.997 2.997 0 01-2.86-2.882z"
-        }
-      ),
-      jsx24(
-        Path15,
-        {
-          id: "c",
-          d: "M1.848 54.92L.002 5.723A2.997 2.997 0 012.81 2.621L44.654.006a2.997 2.997 0 013.183 2.99v53.607a2.997 2.997 0 01-3.13 2.994l-40-1.796a2.997 2.997 0 01-2.86-2.882z"
-        }
-      )
-    ] }),
-    jsxs10(G2, { fill: "none", fillRule: "evenodd", children: [
-      jsx24(
-        Path15,
-        {
-          fill: "#333",
-          fillRule: "nonzero",
-          d: "M80.387 47.178c-2.543 0-4.99-.342-7.343-1.025-2.352-.684-4.307-1.63-5.864-2.837l2.384-5.293c3.242 2.257 6.882 3.386 10.919 3.386 2.097 0 3.71-.342 4.84-1.026 1.128-.683 1.692-1.629 1.692-2.836 0-1.081-.517-1.924-1.55-2.528-1.033-.603-2.869-1.192-5.507-1.764-2.956-.604-5.316-1.335-7.08-2.193-1.765-.858-3.052-1.915-3.862-3.17-.811-1.256-1.216-2.806-1.216-4.65 0-2.034.564-3.846 1.692-5.435 1.129-1.59 2.71-2.837 4.744-3.743 2.035-.906 4.387-1.359 7.057-1.359 2.384 0 4.68.35 6.89 1.05 2.21.699 3.965 1.636 5.269 2.812l-2.384 5.293c-3.084-2.257-6.326-3.385-9.727-3.385-1.94 0-3.465.373-4.577 1.12-1.113.747-1.67 1.772-1.67 3.075 0 .763.215 1.391.644 1.884.43.492 1.145.93 2.146 1.31 1.001.382 2.424.78 4.267 1.193 4.323.954 7.43 2.177 9.322 3.671 1.891 1.494 2.837 3.56 2.837 6.199 0 3.178-1.224 5.682-3.672 7.51-2.447 1.827-5.864 2.74-10.25 2.74zm31.183-5.34c.731 0 1.494-.048 2.289-.143l-.382 5.244c-.922.128-1.844.191-2.765.191-3.56 0-6.159-.779-7.796-2.336-1.637-1.558-2.456-3.926-2.456-7.104v-8.964h-4.434v-5.388h4.434v-6.866h7.2v6.866h5.865v5.388h-5.865v8.916c0 2.797 1.303 4.196 3.91 4.196zm16.736 5.292c-2.48 0-4.657-.5-6.533-1.502-1.875-1.001-3.321-2.416-4.338-4.243-1.018-1.828-1.526-3.982-1.526-6.46 0-2.48.508-4.634 1.526-6.462 1.017-1.827 2.463-3.234 4.338-4.22 1.876-.985 4.053-1.477 6.533-1.477 2.479 0 4.656.492 6.532 1.478 1.875.985 3.321 2.392 4.339 4.22 1.017 1.827 1.525 3.98 1.525 6.46s-.508 4.633-1.525 6.46c-1.018 1.828-2.464 3.243-4.34 4.244-1.875 1.002-4.052 1.502-6.531 1.502zm0-5.483c3.496 0 5.244-2.24 5.244-6.723 0-2.257-.453-3.941-1.358-5.054-.906-1.113-2.202-1.669-3.886-1.669-3.497 0-5.245 2.241-5.245 6.723 0 4.482 1.748 6.723 5.245 6.723zm32.327-12.969l-4.053.43c-2.003.19-3.417.754-4.244 1.692-.826.938-1.24 2.185-1.24 3.743v12.206h-7.199V23.338h6.914v3.957c1.176-2.702 3.607-4.18 7.295-4.434l2.098-.143.429 5.96zm20.92-5.292h7.056L174.496 55.33H167.2l4.481-9.87-9.63-22.075h7.485l5.912 14.876 6.103-14.876zm23.744-.62c2.034 0 3.83.492 5.388 1.478 1.557.985 2.773 2.392 3.647 4.22.874 1.827 1.311 3.949 1.311 6.365 0 2.416-.437 4.553-1.31 6.413-.875 1.86-2.099 3.306-3.672 4.339-1.574 1.033-3.362 1.55-5.364 1.55-1.621 0-3.083-.343-4.387-1.026-1.303-.683-2.304-1.629-3.004-2.837v3.48h-7.104V13.135h7.2v13.35c.7-1.175 1.692-2.09 2.98-2.74 1.287-.652 2.726-.978 4.315-.978zm-2.098 18.881c1.685 0 2.988-.596 3.91-1.788.922-1.192 1.382-2.869 1.382-5.03 0-2.13-.46-3.759-1.382-4.887-.922-1.129-2.225-1.693-3.91-1.693s-2.988.58-3.91 1.74c-.922 1.16-1.383 2.805-1.383 4.935 0 2.162.461 3.822 1.383 4.983.922 1.16 2.225 1.74 3.91 1.74zm28.083 5.483c-2.479 0-4.656-.5-6.532-1.502-1.875-1.001-3.321-2.416-4.339-4.243-1.017-1.828-1.525-3.982-1.525-6.46 0-2.48.508-4.634 1.525-6.462 1.018-1.827 2.464-3.234 4.34-4.22 1.875-.985 4.052-1.477 6.531-1.477 2.48 0 4.657.492 6.533 1.478 1.875.985 3.321 2.392 4.339 4.22 1.017 1.827 1.525 3.98 1.525 6.46s-.508 4.633-1.525 6.46c-1.018 1.828-2.464 3.243-4.34 4.244-1.875 1.002-4.052 1.502-6.532 1.502zm0-5.483c3.497 0 5.245-2.24 5.245-6.723 0-2.257-.453-3.941-1.359-5.054-.906-1.113-2.2-1.669-3.886-1.669-3.496 0-5.244 2.241-5.244 6.723 0 4.482 1.748 6.723 5.244 6.723zm26.844 5.483c-2.48 0-4.656-.5-6.532-1.502-1.875-1.001-3.322-2.416-4.339-4.243-1.017-1.828-1.525-3.982-1.525-6.46 0-2.48.508-4.634 1.525-6.462 1.017-1.827 2.464-3.234 4.34-4.22 1.875-.985 4.052-1.477 6.531-1.477 2.48 0 4.657.492 6.532 1.478 1.876.985 3.322 2.392 4.34 4.22 1.017 1.827 1.525 3.98 1.525 6.46s-.508 4.633-1.526 6.46c-1.017 1.828-2.463 3.243-4.339 4.244-1.875 1.002-4.052 1.502-6.532 1.502zm0-5.483c3.497 0 5.245-2.24 5.245-6.723 0-2.257-.453-3.941-1.359-5.054-.906-1.113-2.201-1.669-3.886-1.669-3.496 0-5.244 2.241-5.244 6.723 0 4.482 1.748 6.723 5.244 6.723zM299 46.749h-8.82l-8.965-10.442v10.442h-7.2V13.134h7.2v20.217l8.63-9.965h8.583l-9.822 11.157L299 46.749z"
-        }
-      ),
-      jsx24(
-        Path15,
-        {
-          d: "M48.831 2.81c.004.062.006.124.006.187v53.606a2.997 2.997 0 01-3.13 2.994l-40-1.796a2.997 2.997 0 01-2.86-2.882L1.002 5.724A2.997 2.997 0 013.81 2.621L36.609.57l-.285 6.756a.447.447 0 00.05.223l.04.066c.15.196.43.235.627.085l2.623-1.99 2.217 1.746a.447.447 0 00.723-.367L42.356.211l3.298-.205A2.997 2.997 0 0148.83 2.81z",
-          fill: "#FF4785",
-          fillRule: "nonzero"
-        }
-      ),
-      jsxs10(G2, { transform: "translate(1)", children: [
-        jsx24(Mask2, { id: "b", fill: "#fff", children: jsx24(Use2, { xlinkHref: "#a" }) }),
-        jsx24(
-          Path15,
-          {
-            fill: "#FFF",
-            fillRule: "nonzero",
-            d: "M35.324 7.326L35.61.569l5.746-.36.248 6.88a.447.447 0 01-.723.367L38.664 5.71 36.041 7.7a.447.447 0 01-.717-.374z",
-            mask: "url(#b)"
-          }
-        )
-      ] }),
-      jsxs10(G2, { transform: "translate(1)", children: [
-        jsx24(Mask2, { id: "d", fill: "#fff", children: jsx24(Use2, { xlinkHref: "#c" }) }),
-        jsx24(
-          Path15,
-          {
-            fill: "#FFF",
-            fillRule: "nonzero",
-            d: "M27.975 22.464c0 1.166 7.853.607 8.907-.212 0-7.939-4.26-12.11-12.06-12.11-7.801 0-12.172 4.236-12.172 10.591 0 11.069 14.938 11.28 14.938 17.318 0 1.695-.83 2.7-2.656 2.7-2.379 0-3.32-1.214-3.209-5.345 0-.896-9.073-1.175-9.35 0-.704 10.01 5.533 12.898 12.67 12.898 6.915 0 12.337-3.686 12.337-10.36 0-11.862-15.159-11.544-15.159-17.423 0-2.383 1.77-2.7 2.822-2.7 1.106 0 3.098.194 2.932 4.643z",
-            mask: "url(#d)"
-          }
-        )
-      ] })
-    ] })
-  ] });
-}
-
-// src/react-native-ui/StorybookLogo.tsx
-import { jsx as jsx25 } from "react/jsx-runtime";
-var WIDTH = 125, HEIGHT = 25, NoBrandLogo = ({ theme }) => theme.base === "light" ? jsx25(Logo, { height: HEIGHT, width: WIDTH }) : jsx25(DarkLogo, { height: HEIGHT, width: WIDTH });
+import { jsx as jsx12 } from "react/jsx-runtime";
+var WIDTH = 125, HEIGHT = 25, NoBrandLogo = ({ theme }) => jsx12(
+  Text3,
+  {
+    style: {
+      height: HEIGHT,
+      color: theme.color.defaultText,
+      fontSize: theme.typography.size.m1,
+      fontWeight: "bold"
+    },
+    children: "Forkbook"
+  }
+);
 function isElement(value) {
   return isValidElement(value);
 }
@@ -1560,7 +1143,7 @@ For example:  brand: { image: { uri: 'https://sb.com/img.png', height: 25, width
     return null;
   if (isElement(brand.image))
     return brand.image;
-  let image = jsx25(
+  let image = jsx12(
     Image,
     {
       source: brand.image,
@@ -1568,7 +1151,7 @@ For example:  brand: { image: { uri: 'https://sb.com/img.png', height: 25, width
       style: imageHasNoWidthOrHeight ? { width: WIDTH, height: HEIGHT } : void 0
     }
   );
-  return brand.url ? jsx25(
+  return brand.url ? jsx12(
     TouchableOpacity,
     {
       onPress: () => {
@@ -1578,13 +1161,13 @@ For example:  brand: { image: { uri: 'https://sb.com/img.png', height: 25, width
     }
   ) : image;
 }, BrandTitle = ({ theme }) => {
-  let brandTitleStyle = useMemo12(() => ({
+  let brandTitleStyle = useMemo8(() => ({
     width: WIDTH,
     height: HEIGHT,
     color: theme.color.defaultText,
     fontSize: theme.typography.size.m1
-  }), [theme]), title = jsx25(Text3, { style: brandTitleStyle, numberOfLines: 1, ellipsizeMode: "tail", children: theme.brand?.title });
-  return theme.brand?.url ? jsx25(
+  }), [theme]), title = jsx12(Text3, { style: brandTitleStyle, numberOfLines: 1, ellipsizeMode: "tail", children: theme.brand?.title });
+  return theme.brand?.url ? jsx12(
     TouchableOpacity,
     {
       onPress: () => {
@@ -1594,12 +1177,12 @@ For example:  brand: { image: { uri: 'https://sb.com/img.png', height: 25, width
     }
   ) : title;
 }, StorybookLogo = ({ theme }) => {
-  let image = useMemo12(() => theme.brand?.image, [theme.brand?.image]), title = useMemo12(() => theme.brand?.title, [theme.brand?.title]);
-  return image ? jsx25(BrandLogo, { theme }) : title ? jsx25(BrandTitle, { theme }) : jsx25(NoBrandLogo, { theme });
+  let image = useMemo8(() => theme.brand?.image, [theme.brand?.image]), title = useMemo8(() => theme.brand?.title, [theme.brand?.title]);
+  return image ? jsx12(BrandLogo, { theme }) : title ? jsx12(BrandTitle, { theme }) : jsx12(NoBrandLogo, { theme });
 };
 
 // src/react-native-ui/Layout.tsx
-import { jsx as jsx26, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
 var desktopLogoContainer = {
   flexDirection: "row",
   alignItems: "center",
@@ -1619,8 +1202,8 @@ var desktopLogoContainer = {
   story,
   storyBackgroundColor,
   children
-}) => jsx26(ThemeProvider, { theme, children: jsx26(SafeAreaProvider, { children: jsx26(GestureHandlerRootView, { style: flex1, children: jsx26(BottomSheetModalProvider, { children: jsx26(StorageProvider, { storage, children: jsxs11(LayoutProvider, { children: [
-  jsx26(
+}) => jsx13(ThemeProvider, { theme, children: jsx13(SafeAreaProvider, { children: jsx13(View6, { style: flex1, children: jsx13(StorageProvider, { storage, children: jsxs7(LayoutProvider, { children: [
+  jsx13(
     Layout,
     {
       storyHash,
@@ -1629,20 +1212,20 @@ var desktopLogoContainer = {
       children
     }
   ),
-  jsx26(PortalHost, { name: "storybook-lite-ui-root" })
-] }) }) }) }) }) }), Layout = ({
+  jsx13(PortalHost, { name: "storybook-lite-ui-root" })
+] }) }) }) }) }), Layout = ({
   storyHash,
   story,
   storyBackgroundColor,
   children
 }) => {
-  let theme = useTheme9(), mobileMenuDrawerRef = useRef7(null), addonPanelRef = useRef7(null), insets = useSafeAreaInsets3(), { isDesktop } = useLayout(), [desktopSidebarOpen, setDesktopSidebarOpen] = useStoreBooleanState(
+  let theme = useTheme5(), mobileMenuDrawerRef = useRef7(null), addonPanelRef = useRef7(null), insets = useSafeAreaInsets3(), { isDesktop } = useLayout(), [desktopSidebarOpen, setDesktopSidebarOpen] = useStoreBooleanState(
     "desktopSidebarState",
     !0
   ), [desktopAddonsPanelOpen, setDesktopAddonsPanelOpen] = useStoreBooleanState(
     "desktopPanelState",
     !0
-  ), hasEnabledPanels = useMemo13(() => {
+  ), hasEnabledPanels = useMemo9(() => {
     let allPanels = addons2.getElements(Addon_TypesEnum2.PANEL);
     return Object.values(allPanels).some(
       (p) => !p.paramKey || !story?.parameters?.[p.paramKey]?.disable
@@ -1725,18 +1308,18 @@ var desktopLogoContainer = {
     let newStoryId = selection.storyId;
     addons2.getChannel().emit(SET_CURRENT_STORY, { storyId: newStoryId });
   }, []);
-  return jsxs11(View6, { style: containerStyle, children: [
-    isDesktop ? jsx26(View6, { style: desktopSidebarStyle, children: desktopSidebarOpen ? jsxs11(
-      ScrollView2,
+  return jsxs7(View6, { style: containerStyle, children: [
+    isDesktop ? jsx13(View6, { style: desktopSidebarStyle, children: desktopSidebarOpen ? jsxs7(
+      ScrollView3,
       {
         keyboardShouldPersistTaps: "handled",
         contentContainerStyle: desktopScrollViewContentContainerStyle,
         children: [
-          jsxs11(View6, { style: desktopLogoContainer, children: [
-            jsx26(StorybookLogo, { theme }),
-            jsx26(IconButton4, { onPress: () => setDesktopSidebarOpen(!1), Icon: MenuIcon })
+          jsxs7(View6, { style: desktopLogoContainer, children: [
+            jsx13(StorybookLogo, { theme }),
+            jsx13(IconButton4, { onPress: () => setDesktopSidebarOpen(!1), Icon: MenuIcon })
           ] }),
-          jsx26(
+          jsx13(
             Sidebar,
             {
               previewInitialized: !0,
@@ -1751,25 +1334,25 @@ var desktopLogoContainer = {
           )
         ]
       }
-    ) : jsx26(IconButton4, { onPress: () => setDesktopSidebarOpen(!0), Icon: MenuIcon }) }) : null,
-    jsxs11(View6, { style: mobileContentStyle, children: [
-      jsx26(View6, { style: storyContentStyle, children }),
-      story?.parameters?.hideFullScreenButton || isDesktop ? null : jsx26(
+    ) : jsx13(IconButton4, { onPress: () => setDesktopSidebarOpen(!0), Icon: MenuIcon }) }) : null,
+    jsxs7(View6, { style: mobileContentStyle, children: [
+      jsx13(View6, { style: storyContentStyle, children }),
+      story?.parameters?.hideFullScreenButton || isDesktop ? null : jsx13(
         TouchableOpacity2,
         {
           style: fullScreenButtonStyle,
           onPress: () => setUiHidden((prev) => !prev),
-          children: uiHidden ? jsx26(CloseFullscreenIcon, { color: theme.color.mediumdark }) : jsx26(FullscreenIcon, { color: theme.color.mediumdark })
+          children: uiHidden ? jsx13(CloseFullscreenIcon, { color: theme.color.mediumdark }) : jsx13(FullscreenIcon, { color: theme.color.mediumdark })
         }
       ),
-      isDesktop && hasEnabledPanels ? jsx26(View6, { style: desktopAddonsPanelStyle, children: desktopAddonsPanelOpen ? jsx26(
+      isDesktop && hasEnabledPanels ? jsx13(View6, { style: desktopAddonsPanelStyle, children: desktopAddonsPanelOpen ? jsx13(
         AddonsTabs,
         {
           storyId: story?.id,
           parameters: story?.parameters,
           onClose: () => setDesktopAddonsPanelOpen(!1)
         }
-      ) : jsx26(
+      ) : jsx13(
         IconButton4,
         {
           style: iconFloatRightStyle,
@@ -1778,8 +1361,8 @@ var desktopLogoContainer = {
         }
       ) }) : null
     ] }),
-    !uiHidden && !isDesktop ? jsx26(Container3, { style: menuContainerStyle, children: jsxs11(Nav, { children: [
-      jsxs11(
+    !uiHidden && !isDesktop ? jsx13(Container3, { style: menuContainerStyle, children: jsxs7(Nav, { children: [
+      jsxs7(
         Button2,
         {
           testID: "mobile-menu-button",
@@ -1787,8 +1370,8 @@ var desktopLogoContainer = {
           hitSlop: navButtonHitSlop,
           onPress: openMobileMenu,
           children: [
-            jsx26(MenuIcon, { color: theme.color.mediumdark }),
-            jsxs11(Text4, { style: navButtonTextStyle, numberOfLines: 1, children: [
+            jsx13(MenuIcon, { color: theme.color.mediumdark }),
+            jsxs7(Text4, { style: navButtonTextStyle, numberOfLines: 1, children: [
               story?.title,
               "/",
               story?.name
@@ -1796,7 +1379,7 @@ var desktopLogoContainer = {
           ]
         }
       ),
-      hasEnabledPanels && jsx26(
+      hasEnabledPanels && jsx13(
         IconButton4,
         {
           testID: "mobile-addons-button",
@@ -1806,9 +1389,9 @@ var desktopLogoContainer = {
         }
       )
     ] }) }) : null,
-    isDesktop ? null : jsx26(SelectedNodeProvider, { children: jsxs11(MobileMenuDrawer, { ref: mobileMenuDrawerRef, children: [
-      jsx26(View6, { style: mobileMenuDrawerContentStyle, children: jsx26(StorybookLogo, { theme }) }),
-      jsx26(
+    isDesktop ? null : jsx13(SelectedNodeProvider, { children: jsxs7(MobileMenuDrawer, { ref: mobileMenuDrawerRef, children: [
+      jsx13(View6, { style: mobileMenuDrawerContentStyle, children: jsx13(StorybookLogo, { theme }) }),
+      jsx13(
         Sidebar,
         {
           previewInitialized: !0,
@@ -1822,7 +1405,7 @@ var desktopLogoContainer = {
         }
       )
     ] }) }),
-    !isDesktop && hasEnabledPanels ? jsx26(MobileAddonsPanel, { ref: addonPanelRef, storyId: story?.id, parameters: story?.parameters }) : null
+    !isDesktop && hasEnabledPanels ? jsx13(MobileAddonsPanel, { ref: addonPanelRef, storyId: story?.id, parameters: story?.parameters }) : null
   ] });
 }, Nav = styled9.View({
   display: "flex",