@buoy-gg/shared-ui 7.0.7 → 7.0.9

package/lib/commonjs/ui/components/ExpandableSection.js

@@ -1,72 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ExpandableSection = ExpandableSection;
-var _react = require("react");
-var _reactNative = require("react-native");
-var _ExpandableSectionHeader = require("./ExpandableSectionHeader.js");
-var _macOSDesignSystemColors = require("../gameUI/constants/macOSDesignSystemColors.js");
-var _jsxRuntime = require("react/jsx-runtime");
-function ExpandableSection({
-  icon,
-  iconColor,
-  iconBackgroundColor,
-  title,
-  subtitle,
-  children,
-  defaultExpanded = false,
-  onPress
-}) {
-  const [isExpanded, setIsExpanded] = (0, _react.useState)(defaultExpanded);
-  const handlePress = () => {
-    if (onPress) {
-      onPress();
-    } else {
-      setIsExpanded(!isExpanded);
-    }
-  };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: styles.container,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.content,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandableSectionHeader.ExpandableSectionHeader, {
-        icon: icon,
-        iconColor: iconColor,
-        iconBackgroundColor: iconBackgroundColor,
-        title: title,
-        subtitle: subtitle,
-        isExpanded: isExpanded,
-        onPress: handlePress
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.divider
-      }), isExpanded && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
-        style: {
-          opacity: 1
-        },
-        children: children
-      })]
-    })
-  });
-}
-const styles = _reactNative.StyleSheet.create({
-  container: {
-    backgroundColor: _macOSDesignSystemColors.macOSColors.background.card,
-    borderRadius: 12,
-    borderWidth: 1,
-    borderColor: "rgba(128, 128, 128, 0.16)",
-    overflow: "hidden",
-    marginHorizontal: 8,
-    marginBottom: 16
-  },
-  content: {
-    padding: 24
-  },
-  divider: {
-    height: 1,
-    width: "100%",
-    backgroundColor: "rgba(128, 128, 128, 0.12)",
-    marginBottom: 24
-  }
-});

package/lib/commonjs/ui/components/ExpandableSectionHeader.js

@@ -1,87 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ExpandableSectionHeader = ExpandableSectionHeader;
-var _reactNative = require("react-native");
-var _index = require("../../icons/index.js");
-var _gameUIColors = require("../gameUI/constants/gameUIColors.js");
-var _jsxRuntime = require("react/jsx-runtime");
-function ExpandableSectionHeader({
-  icon: Icon,
-  iconColor,
-  iconBackgroundColor,
-  title,
-  subtitle,
-  isExpanded,
-  onPress
-}) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-    "sentry-label": "ignore expand section button",
-    accessibilityRole: "button",
-    onPress: onPress,
-    style: styles.button,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.container,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: [styles.iconContainer, {
-          backgroundColor: iconBackgroundColor.replace(")", ", 0.7)").replace("rgb(", "rgba(")
-        }],
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
-          size: 20,
-          color: iconColor
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.textContainer,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: styles.title,
-          children: title
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: styles.subtitle,
-          numberOfLines: 2,
-          children: subtitle
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.chevronContainer,
-        children: isExpanded ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ChevronDown, {
-          size: 18,
-          color: "#4B5563"
-        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ChevronRight, {
-          size: 18,
-          color: "#4B5563"
-        })
-      })]
-    })
-  });
-}
-const styles = _reactNative.StyleSheet.create({
-  button: {
-    marginBottom: 16
-  },
-  container: {
-    flexDirection: "row",
-    alignItems: "flex-start"
-  },
-  iconContainer: {
-    padding: 12,
-    borderRadius: 12
-  },
-  textContainer: {
-    flex: 1,
-    marginHorizontal: 16
-  },
-  title: {
-    fontSize: 18,
-    fontWeight: "500",
-    color: "white",
-    marginBottom: 4
-  },
-  subtitle: {
-    fontSize: 16,
-    color: _gameUIColors.buoyColors.textSecondary
-  },
-  chevronContainer: {
-    paddingTop: 6
-  }
-});

package/lib/commonjs/ui/components/ExpandableSectionWithModal.js

@@ -1,183 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ExpandableSectionWithModal = ExpandableSectionWithModal;
-var _react = require("react");
-var _reactNative = require("react-native");
-var _absoluteFill = require("../../utils/absoluteFill.js");
-var _useSafeAreaInsets = require("../../hooks/useSafeAreaInsets.js");
-var _index = require("../../icons/index.js");
-var _ExpandableSection = require("./ExpandableSection.js");
-var _jsxRuntime = require("react/jsx-runtime");
-const {
-  height: screenHeight
-} = _reactNative.Dimensions.get("window");
-function ExpandableSectionWithModal({
-  icon,
-  iconColor,
-  iconBackgroundColor,
-  title,
-  subtitle,
-  children,
-  modalBackgroundColor = "#0F0F0F",
-  showModalHeader = true,
-  fullScreen = false,
-  onModalOpen,
-  onModalClose
-}) {
-  const [isModalOpen, setIsModalOpen] = (0, _react.useState)(false);
-  const insets = (0, _useSafeAreaInsets.useSafeAreaInsets)({
-    minBottom: 16
-  });
-  const openModal = () => {
-    setIsModalOpen(true);
-    onModalOpen?.();
-  };
-  const closeModal = () => {
-    setIsModalOpen(false);
-    onModalClose?.();
-  };
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandableSection.ExpandableSection, {
-      icon: icon,
-      iconColor: iconColor,
-      iconBackgroundColor: iconBackgroundColor,
-      title: title,
-      subtitle: subtitle,
-      onPress: openModal,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {})
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Modal, {
-      accessibilityLabel: "Expandable section modal",
-      accessibilityHint: "View expandable section modal",
-      "sentry-label": "ignore expandable section modal",
-      visible: isModalOpen,
-      transparent: true,
-      animationType: "slide",
-      onRequestClose: closeModal,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.container,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          style: styles.backdrop,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-            accessibilityLabel: "Modal backdrop close",
-            accessibilityHint: "View modal backdrop close",
-            "sentry-label": "ignore modal backdrop close",
-            accessibilityRole: "button",
-            style: styles.backdropTouchable,
-            onPress: closeModal,
-            activeOpacity: 1
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          style: fullScreen ? styles.fullScreenModalContainer : styles.modalContainer,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: [fullScreen ? styles.fullScreenModal : styles.modal, {
-              backgroundColor: modalBackgroundColor,
-              paddingTop: fullScreen ? insets.top : showModalHeader ? insets.top : 0
-            }],
-            children: [showModalHeader && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-              style: styles.headerContainer,
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-                accessibilityLabel: "Modal close button",
-                accessibilityHint: "View modal close button",
-                "sentry-label": "ignore modal close button",
-                accessibilityRole: "button",
-                onPress: closeModal,
-                style: styles.closeButton,
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.X, {
-                  size: 20,
-                  color: "#9CA3AF"
-                })
-              })
-            }), showModalHeader ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
-              accessibilityLabel: "Modal content scroll",
-              accessibilityHint: "View modal content scroll",
-              "sentry-label": "ignore modal content scroll",
-              style: styles.scrollView,
-              contentContainerStyle: styles.contentContainer,
-              showsVerticalScrollIndicator: false,
-              nestedScrollEnabled: true,
-              scrollEventThrottle: 16,
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-                style: styles.content,
-                children: typeof children === "function" ? children(closeModal) : children
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-                style: {
-                  paddingBottom: insets.bottom + 20
-                }
-              })]
-            }) :
-            /*#__PURE__*/
-            /* Direct content without ScrollView wrapper when no header - allows internal gesture handling */
-            (0, _jsxRuntime.jsx)(_reactNative.View, {
-              style: styles.directContent,
-              pointerEvents: "box-none",
-              children: typeof children === "function" ? children(closeModal) : children
-            })]
-          })
-        })]
-      })
-    })]
-  });
-}
-const styles = _reactNative.StyleSheet.create({
-  container: {
-    flex: 1
-  },
-  backdrop: {
-    ..._absoluteFill.absoluteFill,
-    backgroundColor: "rgba(0, 0, 0, 0.8)"
-  },
-  backdropTouchable: {
-    flex: 1
-  },
-  modalContainer: {
-    position: "absolute",
-    bottom: 0,
-    left: 0,
-    right: 0,
-    maxHeight: screenHeight * 0.9
-  },
-  fullScreenModalContainer: {
-    position: "absolute",
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    height: screenHeight
-  },
-  modal: {
-    borderTopLeftRadius: 20,
-    borderTopRightRadius: 20,
-    minHeight: 200,
-    flex: 1
-  },
-  fullScreenModal: {
-    flex: 1,
-    minHeight: screenHeight
-  },
-  headerContainer: {
-    alignItems: "flex-end",
-    paddingHorizontal: 20,
-    paddingTop: 16,
-    paddingBottom: 8
-  },
-  closeButton: {
-    padding: 8,
-    borderRadius: 8,
-    backgroundColor: "rgba(156, 163, 175, 0.1)"
-  },
-  scrollView: {
-    flex: 1
-  },
-  contentContainer: {
-    flexGrow: 1
-  },
-  content: {
-    flex: 1
-  },
-  directContent: {
-    flex: 1
-  }
-});

package/lib/commonjs/ui/components/FilterViewPattern.js

@@ -1,175 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.FilterViewPattern = FilterViewPattern;
-var _reactNative = require("react-native");
-var _index = require("../../icons/index.js");
-var _gameUIColors = require("../gameUI/constants/gameUIColors.js");
-var _macOSDesignSystemColors = require("../gameUI/constants/macOSDesignSystemColors.js");
-var _useFilterManager = require("../../hooks/useFilterManager.js");
-var _FilterComponents = require("./FilterComponents.js");
-var _jsxRuntime = require("react/jsx-runtime");
-function FilterViewPattern({
-  patterns,
-  availableItems,
-  onTogglePattern,
-  onAddPattern,
-  icon: Icon,
-  iconColor = _gameUIColors.gameUIColors.network,
-  placeholder = "Enter pattern",
-  emptyText = "No patterns configured",
-  suggestionsTitle = "AVAILABLE ITEMS",
-  type
-}) {
-  const filterManager = (0, _useFilterManager.useFilterManager)(patterns);
-  const suggestedItems = availableItems.filter(item => !patterns.has(item));
-  const handleAddPattern = () => {
-    if (filterManager.newFilter.trim()) {
-      onAddPattern(filterManager.newFilter.trim());
-      filterManager.addFilter(filterManager.newFilter);
-    }
-  };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: styles.container,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_FilterComponents.FilterSection, {
-      style: styles.filterSectionOverrides,
-      children: [!filterManager.showAddInput ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_FilterComponents.AddFilterButton, {
-        onPress: () => filterManager.setShowAddInput(true),
-        color: iconColor
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_FilterComponents.AddFilterInput, {
-        value: filterManager.newFilter,
-        onChange: filterManager.setNewFilter,
-        onSubmit: handleAddPattern,
-        onCancel: () => {
-          filterManager.setShowAddInput(false);
-          filterManager.setNewFilter("");
-        },
-        placeholder: placeholder,
-        color: _gameUIColors.gameUIColors.primaryLight
-      }), suggestedItems.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: [styles.suggestedContainer, !filterManager.showAddInput && {
-          marginTop: 12
-        }],
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: styles.suggestedTitle,
-          children: suggestionsTitle
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
-          style: styles.suggestedScroll,
-          showsVerticalScrollIndicator: true,
-          nestedScrollEnabled: true,
-          children: suggestedItems.map(item => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-            onPress: () => {
-              if (filterManager.showAddInput) {
-                filterManager.setNewFilter(item);
-              } else {
-                onTogglePattern(item);
-              }
-            },
-            style: styles.suggestedItem,
-            children: [Icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
-              size: 14,
-              color: "#9CA3AF"
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: styles.suggestedText,
-              numberOfLines: 1,
-              children: item
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-              onPress: () => {
-                if (filterManager.showAddInput) {
-                  filterManager.setNewFilter(item);
-                } else {
-                  onTogglePattern(item);
-                }
-              },
-              style: styles.addIconButton,
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Plus, {
-                size: 16,
-                color: "#8B5CF6"
-              })
-            })]
-          }, item))
-        })]
-      }) : availableItems.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: [styles.suggestedContainer, {
-          marginTop: 12
-        }],
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-          style: styles.suggestedTitle,
-          children: ["NO ", type.toUpperCase(), " AVAILABLE"]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-          style: styles.emptyText,
-          children: ["Make some requests to see ", type, " here"]
-        })]
-      }), patterns.size > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_FilterComponents.FilterList, {
-        filters: patterns,
-        onRemoveFilter: onTogglePattern,
-        color: iconColor
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: styles.emptyText,
-        children: emptyText
-      })]
-    })
-  });
-}
-const styles = _reactNative.StyleSheet.create({
-  container: {
-    flex: 1
-  },
-  filterSectionOverrides: {
-    paddingHorizontal: 0,
-    paddingTop: 0,
-    backgroundColor: "transparent"
-  },
-  suggestedContainer: {
-    backgroundColor: "rgba(128, 128, 128, 0.06)",
-    borderRadius: 8,
-    padding: 12,
-    marginBottom: 16,
-    maxHeight: 300,
-    borderWidth: 1,
-    borderColor: "rgba(128, 128, 128, 0.16)"
-  },
-  suggestedTitle: {
-    fontSize: 10,
-    color: _macOSDesignSystemColors.macOSColors.text.icon,
-    fontWeight: "600",
-    letterSpacing: 0.5,
-    marginBottom: 12,
-    textTransform: "uppercase"
-  },
-  suggestedScroll: {
-    maxHeight: 250
-  },
-  suggestedItem: {
-    flexDirection: "row",
-    alignItems: "center",
-    backgroundColor: "rgba(128, 128, 128, 0.04)",
-    borderRadius: 6,
-    paddingHorizontal: 10,
-    paddingVertical: 10,
-    marginBottom: 6,
-    borderWidth: 1,
-    borderColor: "rgba(128, 128, 128, 0.1)"
-  },
-  suggestedText: {
-    flex: 1,
-    fontSize: 12,
-    color: _gameUIColors.buoyColors.text,
-    fontFamily: "monospace",
-    marginLeft: 4
-  },
-  emptyText: {
-    fontSize: 11,
-    color: _macOSDesignSystemColors.macOSColors.text.icon,
-    fontStyle: "italic",
-    padding: 12,
-    textAlign: "center"
-  },
-  addIconButton: {
-    padding: 4,
-    borderRadius: 4,
-    backgroundColor: "rgba(139, 92, 246, 0.1)"
-  }
-});

package/lib/commonjs/ui/components/TypeBadge.js

@@ -1,100 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TypeBadge = TypeBadge;
-var _reactNative = require("react-native");
-var _gameUIColors = require("../gameUI/constants/gameUIColors.js");
-var _jsxRuntime = require("react/jsx-runtime");
-const getTypeConfig = type => {
-  const normalizedType = type.toLowerCase();
-
-  // Use consistent teal-based styling for all types
-  // This matches the Buoy theme where info = primary = teal
-  switch (normalizedType) {
-    case "string":
-      return {
-        backgroundColor: _gameUIColors.buoyColors.primary + "15",
-        borderColor: _gameUIColors.buoyColors.primary + "40",
-        textColor: _gameUIColors.buoyColors.primary,
-        label: "string"
-      };
-    case "number":
-      return {
-        backgroundColor: _gameUIColors.buoyColors.primary + "15",
-        borderColor: _gameUIColors.buoyColors.primary + "40",
-        textColor: _gameUIColors.buoyColors.primary,
-        label: "number"
-      };
-    case "boolean":
-      return {
-        backgroundColor: _gameUIColors.buoyColors.primary + "15",
-        borderColor: _gameUIColors.buoyColors.primary + "40",
-        textColor: _gameUIColors.buoyColors.primary,
-        label: "boolean"
-      };
-    case "object":
-      return {
-        backgroundColor: _gameUIColors.buoyColors.textMuted + "20",
-        borderColor: _gameUIColors.buoyColors.textMuted + "40",
-        textColor: _gameUIColors.buoyColors.textSecondary,
-        label: "object"
-      };
-    case "array":
-      return {
-        backgroundColor: _gameUIColors.buoyColors.textMuted + "20",
-        borderColor: _gameUIColors.buoyColors.textMuted + "40",
-        textColor: _gameUIColors.buoyColors.textSecondary,
-        label: "array"
-      };
-    case "function":
-      return {
-        backgroundColor: _gameUIColors.buoyColors.textMuted + "20",
-        borderColor: _gameUIColors.buoyColors.textMuted + "40",
-        textColor: _gameUIColors.buoyColors.textSecondary,
-        label: "fn"
-      };
-    default:
-      return {
-        backgroundColor: _gameUIColors.buoyColors.textMuted + "20",
-        borderColor: _gameUIColors.buoyColors.textMuted + "40",
-        textColor: _gameUIColors.buoyColors.textMuted,
-        label: normalizedType.slice(0, 6)
-      };
-  }
-};
-function TypeBadge({
-  type
-}) {
-  if (!type) return null;
-  const config = getTypeConfig(type);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: [styles.badge, {
-      backgroundColor: config.backgroundColor,
-      borderColor: config.borderColor
-    }],
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: [styles.badgeText, {
-        color: config.textColor
-      }],
-      children: config.label
-    })
-  });
-}
-const styles = _reactNative.StyleSheet.create({
-  badge: {
-    paddingHorizontal: 6,
-    paddingVertical: 2,
-    borderRadius: 4,
-    borderWidth: 1,
-    alignSelf: "flex-start"
-  },
-  badgeText: {
-    fontSize: 10,
-    fontWeight: "600",
-    fontFamily: "monospace",
-    textTransform: "uppercase",
-    letterSpacing: 0.5
-  }
-});

package/lib/commonjs/ui/components/types.js

@@ -1,5 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});

package/lib/commonjs/ui/console/BubbleSettingsModal.js

@@ -1,50 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.BubbleSettingsModal = BubbleSettingsModal;
-var _react = require("react");
-var _ModalHeader = require("../components/ModalHeader.js");
-var _JsModal = require("../../JsModal.js");
-var _index = require("../../settings/index.js");
-var _devToolsStorageKeys = require("../../storage/devToolsStorageKeys.js");
-var _jsxRuntime = require("react/jsx-runtime");
-function BubbleSettingsModal({
-  visible,
-  onClose,
-  onBack,
-  enableSharedModalDimensions = false,
-  onSettingsChange
-}) {
-  const handleModeChange = (0, _react.useCallback)(_mode => {
-    // Mode changes handled by JsModal
-  }, []);
-  if (!visible) return null;
-  const persistenceKey = enableSharedModalDimensions ? _devToolsStorageKeys.devToolsStorageKeys.modal.root() : _devToolsStorageKeys.devToolsStorageKeys.bubble.settings();
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_JsModal.JsModal, {
-    visible: visible,
-    onClose: onClose,
-    persistenceKey: persistenceKey,
-    header: {
-      showToggleButton: true,
-      customContent: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ModalHeader.ModalHeader, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalHeader.ModalHeader.Navigation, {
-          onBack: onBack
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalHeader.ModalHeader.Content, {
-          title: "Bubble Settings",
-          subtitle: "Configure visibility",
-          centered: true
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalHeader.ModalHeader.Actions, {})]
-      })
-    },
-    onModeChange: handleModeChange,
-    enablePersistence: true,
-    initialMode: "bottomSheet",
-    enableGlitchEffects: true,
-    styles: {},
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.BubbleSettingsDetail, {
-      onSettingsChange: onSettingsChange
-    })
-  });
-}