@buoy-gg/shared-ui 7.0.36 → 7.0.38

package/README.md

@@ -1,34 +1,41 @@
-# @buoy/shared-ui
+# @buoy-gg/shared-ui
 
-[![npm](https://img.shields.io/npm/v/@buoy%2Fshared-ui)](https://www.npmjs.com/package/@buoy/shared-ui)
-
-
-Design system pieces shared across the React Buoy dev tools.
+Shared components, colors, hooks, and utilities used by Buoy's React Native tools. Use this package when implementing a custom tool or a compatible internal interface. To install the existing tool suite, start with [@buoy-gg/core](https://www.npmjs.com/package/@buoy-gg/core).
 
 ## Install
+
 ```bash
-pnpm add @buoy/shared-ui
+npm install @buoy-gg/shared-ui
 ```
 
-## What You Get
-- Icon set with cyberpunk variants (`EnvLaptopIcon`, `WifiCircuitIcon`, etc.).
-- Themed UI primitives (`CyberpunkSectionButton`, `CompactRow`).
-- Utility helpers (safe storage wrappers, display formatting).
-- Hooks (`useSafeAreaInsets`, `useHoverState`) tuned for React Native.
-
-## Usage
-```tsx
-import { CyberpunkSectionButton, ReactQueryIcon } from '@buoy/shared-ui';
-
-export function LaunchReactQuery({ onPress }: { onPress: () => void }) {
-  return (
-    <CyberpunkSectionButton
-      label="React Query"
-      icon={<ReactQueryIcon size={18} />}
-      onPress={onPress}
-    />
-  );
-}
+Keep peer dependencies compatible with your other Buoy packages, including the license package. This is the `@buoy-gg` scope.
+
+## Public entry points
+
+| Import | Contents |
+| --- | --- |
+| `@buoy-gg/shared-ui` | Main component and utility exports. |
+| `@buoy-gg/shared-ui/colors` | Palette exports for initialization before component modules load. |
+| `@buoy-gg/shared-ui/ui` | UI components and styling helpers. |
+| `@buoy-gg/shared-ui/hooks` | Shared hooks. |
+| `@buoy-gg/shared-ui/utils` | Utility functions. |
+| `@buoy-gg/shared-ui/dataViewer` | Data inspection components. |
+| `@buoy-gg/shared-ui/history` | History-related exports. |
+
+For example, read the shared palette through its dedicated entry point:
+
+```ts
+import { macOSColors } from "@buoy-gg/shared-ui/colors";
+
+const panelBackground = macOSColors.background.card;
 ```
 
-These primitives back every `@buoy/*` package, but you can also use them directly in your own tooling to stay visually consistent.
+Use the installed declarations to select components and their props. Avoid private source imports. Some components and stores depend on account state or provider context; importing a primitive does not initialize the surrounding tool lifecycle.
+
+Follow the [custom-tool guide](https://buoy.gg/buoy/latest/docs/custom-tools) to register a tool and its adapter. Verify your panel with empty data, a known populated state, and the supported app theme before connecting remote actions.
+
+## Custom floating tools
+
+`FloatingTool` provides the same drag, hide/restore and position behavior used by the DevTools bubble. Use `FloatingToolHost` with `openFloatingTool` to keep compact custom controls mounted across navigation. Each tool supplies its own content and actions. Set `dragFromSurface` to make the background draggable while buttons keep their gestures; the default uses the grip only.
+
+See the [custom floating tools guide](https://buoy.gg/buoy/latest/docs/custom-tools/floating-tools) for native and browser integration, lifecycle rules and examples. Browser consumers can import the dedicated `@buoy-gg/shared-ui/floating` entry.

package/floating.d.ts

@@ -0,0 +1 @@
+export * from "./lib/typescript/module/ui/floating/index";

package/floating.js

@@ -0,0 +1,2 @@
+// Metro compatibility when package exports are disabled.
+module.exports = require("./lib/module/ui/floating/index.js");

package/lib/commonjs/JsModal.js

@@ -4,6 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.JsModal = void 0;
+var _licenseModule = require("./license/licenseModule.js");
+var _AccountSetup = require("./license/AccountSetup");
 var _react = require("react");
 var _reactNative = require("react-native");
 var _absoluteFill = require("./utils/absoluteFill.js");
@@ -381,6 +383,7 @@ const JsModalComponent = ({
   footerHeight = 0,
   onBack,
   onMinimize,
+  minimizeRequest = 0,
   minimizeTargetPosition,
   initialModalState,
   zIndex,
@@ -688,6 +691,12 @@ const JsModalComponent = ({
       });
     }
   }, [mode, onMinimize, minimizeTargetPosition, visibilityProgress, bottomSheetTranslateY, floatingScale, floatingPosition]);
+  const lastMinimizeRequest = (0, _react.useRef)(minimizeRequest);
+  (0, _react.useEffect)(() => {
+    if (lastMinimizeRequest.current === minimizeRequest) return;
+    lastMinimizeRequest.current = minimizeRequest;
+    handleMinimize();
+  }, [minimizeRequest, handleMinimize]);
 
   // Apply initial modal state when restoring from minimized
   (0, _react.useEffect)(() => {
@@ -1796,4 +1805,10 @@ const footerStyles = _reactNative.StyleSheet.create({
 // ============================================================================
 // EXPORT - Memoized modal component for optimal performance
 // ============================================================================
-const JsModal = exports.JsModal = /*#__PURE__*/(0, _react.memo)(JsModalComponent);
+const JsModal = exports.JsModal = /*#__PURE__*/(0, _react.memo)(props => {
+  const access = (0, _licenseModule.getUseAccountAccess)()();
+  if (access.status !== "admitted") return props.visible ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_AccountSetup.AccountSetup, {}) : null;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(JsModalComponent, {
+    ...props
+  });
+});

package/lib/commonjs/JsModal.web.js

@@ -4,6 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.JsModal = void 0;
+var _licenseModule = require("./license/licenseModule.js");
+var _AccountSetup = require("./license/AccountSetup");
 var _react = require("react");
 var _devToolsStorageKeys = require("./storage/devToolsStorageKeys.js");
 var _index = require("./context/index.js");
@@ -757,6 +759,7 @@ const JsModalComponent = ({
   onBack: _onBack,
   // native never invokes it from JsModal either
   onMinimize,
+  minimizeRequest = 0,
   minimizeTargetPosition,
   initialModalState,
   zIndex,
@@ -962,6 +965,12 @@ const JsModalComponent = ({
       }, () => onMinimize(currentState)));
     }
   }, [mode, onMinimize, minimizeTargetPosition, cancelAnims]);
+  const lastMinimizeRequest = (0, _react.useRef)(minimizeRequest);
+  (0, _react.useEffect)(() => {
+    if (lastMinimizeRequest.current === minimizeRequest) return;
+    lastMinimizeRequest.current = minimizeRequest;
+    handleMinimize();
+  }, [minimizeRequest, handleMinimize]);
 
   // Apply initial modal state when restoring from minimized (native parity).
   (0, _react.useEffect)(() => {
@@ -1634,4 +1643,10 @@ const JsModalComponent = ({
 // ============================================================================
 // EXPORT — memoized like native
 // ============================================================================
-const JsModal = exports.JsModal = /*#__PURE__*/(0, _react.memo)(JsModalComponent);
+const JsModal = exports.JsModal = /*#__PURE__*/(0, _react.memo)(props => {
+  const access = (0, _licenseModule.getUseAccountAccess)()();
+  if (access.status !== "admitted") return props.visible ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_AccountSetup.AccountSetup, {}) : null;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(JsModalComponent, {
+    ...props
+  });
+});

package/lib/commonjs/dataViewer/CyberpunkInput.js

@@ -226,7 +226,12 @@ function CyberpunkInput({
         }), showDeleteButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
           style: [styles.deleteButton, isFocused && styles.deleteButtonFocused],
           onPress: onDelete,
-          activeOpacity: 0.7,
+          activeOpacity: 0.7
+          // The same handle scheme container nodes use (`<node>-delete`):
+          // the input is `<node>-input`, so its delete is `<node>-delete`.
+          ,
+          testID: typeof props.testID === "string" && props.testID.endsWith("-input") ? `${props.testID.slice(0, -"-input".length)}-delete` : undefined,
+          accessibilityLabel: "Delete item",
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Trash, {
             size: 14,
             strokeWidth: 2,

package/lib/commonjs/dataViewer/LiveExplorer.js

@@ -194,22 +194,29 @@ function ToggleValueButton({
   // Pre-compute styles based on value state
   const badgeStyle = value ? styles.toggleBadgeTrue : styles.toggleBadgeFalse;
   const textStyle = value ? styles.toggleTextTrue : styles.toggleTextFalse;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-    "sentry-label": "ignore devtools explorer toggle button",
-    testID: `${testID}-toggle`,
-    accessibilityRole: "button",
-    accessibilityLabel: `${dataPath[dataPath.length - 1] ?? "value"}, ${value ? "true" : "false"}`,
-    style: styles.modernToggleButton,
-    onPress: handleClick,
-    hitSlop: HIT_SLOP_OPTIMIZED,
-    activeOpacity: 0.8,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: [styles.toggleBadge, badgeStyle],
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: [styles.toggleBadgeText, textStyle],
-        children: value ? "TRUE" : "FALSE"
+
+  // Two sibling buttons: on web each renders a real <button>, and a delete
+  // button inside the toggle button is invalid HTML (its press would also
+  // flip the toggle).
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.toggleRow,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+      "sentry-label": "ignore devtools explorer toggle button",
+      testID: `${testID}-toggle`,
+      accessibilityRole: "button",
+      accessibilityLabel: `${dataPath[dataPath.length - 1] ?? "value"}, ${value ? "true" : "false"}`,
+      style: styles.modernToggleButton,
+      onPress: handleClick,
+      hitSlop: HIT_SLOP_OPTIMIZED,
+      activeOpacity: 0.8,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [styles.toggleBadge, badgeStyle],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.toggleBadgeText, textStyle],
+          children: value ? "TRUE" : "FALSE"
+        })
       })
-    }), removable && writer.remove && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+    }), removable && writer.remove ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
       "sentry-label": "ignore devtools explorer delete button in toggle",
       testID: `${testID}-delete`,
       accessibilityRole: "button",
@@ -223,7 +230,7 @@ function ToggleValueButton({
         strokeWidth: 2,
         color: _nightTheme.night.color.danger + "CC"
       })
-    })]
+    }) : null]
   });
 }
 // Optimized Explorer component following rule2 guidelines [[memory:4875251]]
@@ -866,6 +873,11 @@ const styles = _reactNative.StyleSheet.create({
     borderColor: _nightTheme.night.color.textTertiary + "66",
     minHeight: 34
   },
+  toggleRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6
+  },
   modernToggleButton: {
     flexDirection: "row",
     alignItems: "center",

package/lib/commonjs/hooks/safe-area-impl.js

@@ -7,7 +7,7 @@ exports.useNativeSafeAreaInsets = exports.safeAreaType = exports.hasSafeAreaPack
 /**
  * Auto-generated safe area implementation
  * Detected: none
- * Generated at: 2026-09-10T21:40:50.832Z
+ * Generated at: 2026-09-17T23:44:21.398Z
  *
  * DO NOT EDIT - This file is generated by scripts/detect-safe-area.js
  *

package/lib/commonjs/icons/ReactQueryIcon.js

@@ -3,167 +3,15 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ReactQueryIcon = void 0;
-var _reactNative = require("react-native");
-var _IconBackground = require("./IconBackground.js");
+exports.ReactQueryIcon = ReactQueryIcon;
+var _floatingToolsCore = require("@buoy-gg/floating-tools-core");
 var _jsxRuntime = require("react/jsx-runtime");
-const ColorPresets = {
-  red: {
-    color: "#FF3366",
-    glow: "#FF3366"
-  },
-  orange: {
-    color: "#FF8800",
-    glow: "#FF8800"
-  },
-  yellow: {
-    color: "#FFD700",
-    glow: "#FFD700"
-  },
-  purple: {
-    color: "#9945FF",
-    glow: "#9945FF"
-  },
-  cyan: {
-    color: "#00D4FF",
-    glow: "#00D4FF"
-  },
-  pink: {
-    color: "#FF45FF",
-    glow: "#FF45FF"
-  }
-};
+// Compatibility export: all tool surfaces use the approved raster artwork.
 
-// Simplified orbital dots
-const ORBITAL_DOTS = [{
-  x: 0.08,
-  y: 0.5
-}, {
-  x: 0.92,
-  y: 0.5
-}, {
-  x: 0.5,
-  y: 0.2
-}, {
-  x: 0.5,
-  y: 0.8
-}];
-const ReactQueryIcon = ({
-  size = 24,
-  color,
-  glowColor,
-  colorPreset = "red",
-  variant = "circuit",
-  noBackground = true
-}) => {
-  const scale = noBackground ? size / 24 : size / 60;
-  const preset = ColorPresets[colorPreset] || ColorPresets.red;
-  const activeColor = color || preset.color;
-  const activeGlow = glowColor || preset.glow;
-
-  // Simplified hexagon using loop
-  const renderHexagon = () => {
-    const hexWidth = 8 * scale;
-    const hexHeight = 2.5 * scale;
-    const hexLeft = size / 2 - hexWidth / 2;
-    const hexTop = size / 2 - hexHeight / 2;
-    const rotations = [0, 60, -60];
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [rotations.map((rotation, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: {
-          position: "absolute",
-          width: hexWidth,
-          height: hexHeight,
-          backgroundColor: activeColor,
-          left: hexLeft,
-          top: hexTop,
-          transform: rotation !== 0 ? [{
-            rotate: `${rotation}deg`
-          }] : undefined,
-          opacity: 0.9
-        }
-      }, `hex-${i}`)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: {
-          position: "absolute",
-          width: 10 * scale,
-          height: 10 * scale,
-          borderRadius: 2 * scale,
-          backgroundColor: activeGlow,
-          left: size / 2 - 5 * scale,
-          top: size / 2 - 5 * scale,
-          opacity: 0.15
-        }
-      })]
-    });
-  };
-
-  // Simplified orbital lines using loop
-  const renderOrbitalLines = () => {
-    const lineLength = 18 * scale;
-    const lineThickness = 2 * scale;
-    const orbitRadius = lineThickness / 2;
-    const rotations = [0, 60, -60];
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [rotations.map((rotation, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: {
-          position: "absolute",
-          width: lineLength,
-          height: lineThickness,
-          backgroundColor: activeColor,
-          borderRadius: orbitRadius,
-          left: size / 2 - lineLength / 2,
-          top: size / 2 - lineThickness / 2,
-          transform: rotation !== 0 ? [{
-            rotate: `${rotation}deg`
-          }] : undefined,
-          opacity: 0.7
-        }
-      }, `orbit-${i}`)), ORBITAL_DOTS.map((dot, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: {
-          position: "absolute",
-          width: 2.5 * scale,
-          height: 2.5 * scale,
-          borderRadius: 1.25 * scale,
-          backgroundColor: activeGlow,
-          left: dot.x * size - 1.25 * scale,
-          top: dot.y * size - 1.25 * scale,
-          opacity: 0.5
-        }
-      }, `dot-${i}`))]
-    });
-  };
-  const iconContent = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [renderOrbitalLines(), renderHexagon(), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: {
-        position: "absolute",
-        width: size * 0.7,
-        height: size * 0.7,
-        borderRadius: size * 0.35,
-        borderWidth: 0.5 * scale,
-        borderColor: activeGlow,
-        left: size * 0.15,
-        top: size * 0.15,
-        opacity: 0.2
-      }
-    })]
-  });
-  if (noBackground) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: {
-        width: size,
-        height: size,
-        position: "relative",
-        alignItems: "center",
-        justifyContent: "center"
-      },
-      children: iconContent
-    });
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconBackground.IconBackground, {
-    size: size,
-    glowColor: activeGlow,
-    variant: variant,
-    children: iconContent
+function ReactQueryIcon({
+  size = 24
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingToolsCore.QueryIcon, {
+    size: size
   });
-};
-exports.ReactQueryIcon = ReactQueryIcon;
+}

package/lib/commonjs/icons/SentryBugIcon.js

@@ -3,179 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SentryBugIcon = void 0;
-var _react = require("react");
-var _reactNative = require("react-native");
-var _IconBackground = require("./IconBackground.js");
+exports.SentryBugIcon = SentryBugIcon;
+var _floatingToolsCore = require("@buoy-gg/floating-tools-core");
 var _jsxRuntime = require("react/jsx-runtime");
-const ColorPresets = {
-  red: {
-    color: "#FF3366",
-    glow: "#FF3366"
-  },
-  purple: {
-    color: "#9945FF",
-    glow: "#9945FF"
-  },
-  orange: {
-    color: "#FF8800",
-    glow: "#FF8800"
-  },
-  pink: {
-    color: "#FF45FF",
-    glow: "#FF45FF"
-  },
-  cyan: {
-    color: "#00D4FF",
-    glow: "#00D4FF"
-  },
-  green: {
-    color: "#00FF88",
-    glow: "#00FF88"
-  }
-};
+// Compatibility export: all tool surfaces use the approved raster artwork.
 
-// Leg positions simplified
-const LEGS = [{
-  y: 0.3,
-  side: "left",
-  rotation: -20
-}, {
-  y: 0.5,
-  side: "left",
-  rotation: -20
-}, {
-  y: 0.7,
-  side: "left",
-  rotation: -20
-}, {
-  y: 0.3,
-  side: "right",
-  rotation: 20
-}, {
-  y: 0.5,
-  side: "right",
-  rotation: 20
-}, {
-  y: 0.7,
-  side: "right",
-  rotation: 20
-}];
-const SentryBugIcon = ({
+function SentryBugIcon({
   size = 24,
-  color,
-  glowColor,
-  colorPreset = "red",
-  variant = "circuit",
-  noBackground = true
-}) => {
-  const scale = noBackground ? size / 24 : size / 60;
-  const preset = ColorPresets[colorPreset] || ColorPresets.red;
-  const activeColor = color || preset.color;
-  const activeGlow = glowColor || preset.glow;
-  const iconContent = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: {
-        position: "absolute",
-        width: 12 * scale,
-        height: 14 * scale,
-        borderRadius: 6 * scale,
-        backgroundColor: activeColor,
-        left: size / 2 - 6 * scale,
-        top: size / 2 - 5 * scale,
-        opacity: 0.9
-      }
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: {
-        position: "absolute",
-        width: 8 * scale,
-        height: 6 * scale,
-        borderRadius: 4 * scale,
-        backgroundColor: activeColor,
-        left: size / 2 - 4 * scale,
-        top: size / 2 - 9 * scale,
-        opacity: 0.95
-      }
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: {
-        position: "absolute",
-        width: 14 * scale,
-        height: 16 * scale,
-        borderRadius: 7 * scale,
-        backgroundColor: activeGlow,
-        left: size / 2 - 7 * scale,
-        top: size / 2 - 6 * scale,
-        opacity: 0.15
-      }
-    }), LEGS.map((leg, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: {
-        position: "absolute",
-        width: 4 * scale,
-        height: 0.8 * scale,
-        backgroundColor: activeColor,
-        [leg.side]: size / 2 - 10 * scale,
-        top: size / 2 - 4 * scale + leg.y * 10 * scale,
-        transform: [{
-          rotate: `${leg.rotation}deg`
-        }],
-        opacity: 0.8
-      }
-    }, `leg-${i}`)), [-15, 15].map((rotation, i) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: {
-          position: "absolute",
-          width: 0.5 * scale,
-          height: 4 * scale,
-          backgroundColor: activeColor,
-          [i === 0 ? "left" : "right"]: size / 2 - 2 * scale,
-          top: size / 2 - 11 * scale,
-          transform: [{
-            rotate: `${rotation}deg`
-          }],
-          opacity: 0.7
-        }
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: {
-          position: "absolute",
-          width: 1.5 * scale,
-          height: 1.5 * scale,
-          borderRadius: 0.75 * scale,
-          backgroundColor: activeGlow,
-          [i === 0 ? "left" : "right"]: size / 2 - 3 * scale,
-          top: size / 2 - 12 * scale,
-          opacity: 0.6
-        }
-      })]
-    }, `antenna-${i}`)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: {
-        position: "absolute",
-        width: 1 * scale,
-        height: 1 * scale,
-        borderRadius: 0.5 * scale,
-        backgroundColor: "#fff",
-        left: size / 2 - 0.5 * scale,
-        top: size / 2,
-        opacity: 0.3
-      }
-    })]
-  });
-  if (noBackground) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: {
-        width: size,
-        height: size,
-        position: "relative",
-        alignItems: "center",
-        justifyContent: "center"
-      },
-      children: iconContent
-    });
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconBackground.IconBackground, {
+  color
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingToolsCore.SentryIcon, {
     size: size,
-    glowColor: activeGlow,
-    variant: variant,
-    children: iconContent
+    color: color ?? "#9945FF"
   });
-};
-exports.SentryBugIcon = SentryBugIcon;
+}