@buoy-gg/highlight-updates 7.0.33 → 7.0.35

package/lib/module/highlight-updates/components/HighlightFilterView.js

@@ -10,7 +10,7 @@
 
 import React, { useState, useCallback } from "react";
 import { View, Text, TouchableOpacity, TextInput, StyleSheet, ScrollView, Modal, Pressable, Switch } from "react-native";
-import { Eye, Filter, Plus, X, Box, Settings, Hash, SectionHeader, night } from "@buoy-gg/shared-ui";
+import { Eye, Filter, Plus, X, Box, Settings, Hash, SectionHeader, night, monoFont } from "@buoy-gg/shared-ui";
 import { IdentifierBadge, IDENTIFIER_CONFIG } from "./IdentifierBadge";
 import { detectedItemTestID, patternChipTestID, settingTestID } from "../utils/testIDs";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
@@ -1095,7 +1095,7 @@ const styles = StyleSheet.create({
   patternChipValue: {
     fontSize: 11,
     color: night.color.text,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     flexShrink: 1
   },
   patternChipX: {
@@ -1238,7 +1238,7 @@ const styles = StyleSheet.create({
   detectedItemText: {
     fontSize: 11,
     color: night.color.text,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   emptyText: {
     fontSize: 11,
@@ -1256,7 +1256,7 @@ const styles = StyleSheet.create({
     fontSize: 11,
     color: night.color.textTertiary,
     lineHeight: 18,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   howItWorksBold: {
     fontWeight: "700",
@@ -1356,7 +1356,7 @@ const styles = StyleSheet.create({
     fontSize: 12,
     fontWeight: "700",
     color: night.color.textTertiary,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   settingDescription: {
     fontSize: 11,
@@ -1399,7 +1399,7 @@ const styles = StyleSheet.create({
     fontSize: 12,
     fontWeight: "500",
     color: night.color.textSecondary,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   batchSizePresetTextActive: {
     color: night.color.textTertiary,
@@ -1438,7 +1438,7 @@ const styles = StyleSheet.create({
     fontSize: 14,
     fontWeight: "600",
     color: night.color.text,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     textAlign: "center"
   },
   renderCountSeparator: {

package/lib/module/highlight-updates/components/IdentifierBadge.js

@@ -9,7 +9,7 @@
 
 import React from "react";
 import { View, Text, StyleSheet } from "react-native";
-import { Box, Hash, Layers, Eye, Search, FileCode, buoyColors, night } from "@buoy-gg/shared-ui";
+import { Box, Hash, Layers, Eye, Search, FileCode, buoyColors, night, monoFont } from "@buoy-gg/shared-ui";
 
 // All possible identifier types
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -198,7 +198,7 @@ const styles = StyleSheet.create({
   value: {
     fontSize: 12,
     color: night.color.text,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     flex: 1
   },
   valueCompact: {
@@ -231,7 +231,7 @@ const styles = StyleSheet.create({
   // Value only
   valueOnly: {
     fontSize: 12,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   valueOnlyCompact: {
     fontSize: 11

package/lib/module/highlight-updates/components/ModalHeaderContent.js

@@ -10,8 +10,8 @@
  */
 
 import React, { memo } from "react";
-import { View, TouchableOpacity, TextInput, StyleSheet } from "react-native";
-import { Trash2, Search, Filter, X, Pause, Copy, ModalHeader, TabSelector, night, PowerToggleButton } from "@buoy-gg/shared-ui";
+import { TouchableOpacity, StyleSheet } from "react-native";
+import { Trash2, Search, Filter, Pause, Copy, ModalHeader, TabSelector, night, PowerToggleButton } from "@buoy-gg/shared-ui";
 import { StatsDisplay } from "./StatsDisplay";
 
 // ============================================================================
@@ -25,41 +25,23 @@ const SearchSectionInner = /*#__PURE__*/memo(function SearchSection({
   onSearchClose
 }) {
   if (!isActive) return null;
-  return /*#__PURE__*/_jsxs(View, {
-    nativeID: "__rn_buoy__search-container",
-    testID: "buoy-highlight-search-container",
-    style: styles.headerSearchContainer,
-    children: [/*#__PURE__*/_jsx(Search, {
-      size: 14,
-      color: night.color.textSecondary
-    }), /*#__PURE__*/_jsx(TextInput, {
-      testID: "buoy-highlight-search-field",
-      style: styles.headerSearchInput,
-      placeholder: "Search testID, nativeID, component...",
-      placeholderTextColor: night.color.placeholder,
-      value: searchText,
-      onChangeText: onSearchChange,
-      onSubmitEditing: onSearchClose,
-      onBlur: onSearchClose,
-      accessibilityLabel: "Search renders",
-      autoCapitalize: "none",
-      autoCorrect: false,
-      returnKeyType: "search",
-      autoFocus: true
-    }), searchText.length > 0 ? /*#__PURE__*/_jsx(TouchableOpacity, {
-      testID: "buoy-highlight-search-clear",
-      accessibilityRole: "button",
-      accessibilityLabel: "Clear search",
-      onPress: () => {
-        onSearchChange("");
-        onSearchClose();
-      },
-      style: styles.headerSearchClear,
-      children: /*#__PURE__*/_jsx(X, {
-        size: 14,
-        color: night.color.textSecondary
-      })
-    }) : null]
+  return /*#__PURE__*/_jsx(ModalHeader.Search, {
+    value: searchText,
+    onChangeText: onSearchChange,
+    onCancel: () => {
+      onSearchChange("");
+      onSearchClose();
+    },
+    onDismiss: onSearchClose,
+    dismissOnBlur: true,
+    clearOnlyWhenText: true,
+    placeholder: "Search testID, nativeID, component...",
+    accessibilityLabel: "Search renders",
+    iconSize: 14,
+    testID: "buoy-highlight-search-field",
+    containerTestID: "buoy-highlight-search-container",
+    containerNativeID: "__rn_buoy__search-container",
+    clearTestID: "buoy-highlight-search-clear"
   });
 });
 export const SearchSection = SearchSectionInner;
@@ -282,27 +264,6 @@ export const CopySettingsViewHeader = /*#__PURE__*/memo(function CopySettingsVie
 // ============================================================================
 
 const styles = StyleSheet.create({
-  headerSearchContainer: {
-    flexDirection: "row",
-    alignItems: "center",
-    backgroundColor: night.color.surfaceElevated,
-    borderRadius: 10,
-    borderWidth: 1,
-    borderColor: night.color.border,
-    paddingHorizontal: 12,
-    paddingVertical: 5
-  },
-  headerSearchInput: {
-    flex: 1,
-    color: night.color.text,
-    fontSize: 13,
-    marginLeft: 6,
-    paddingVertical: 2
-  },
-  headerSearchClear: {
-    marginLeft: 6,
-    padding: 4
-  },
   headerActionButton: {
     width: 32,
     height: 32,

package/lib/module/highlight-updates/components/RenderCauseBadge.js

@@ -13,7 +13,7 @@
 
 import React from "react";
 import { View, Text, StyleSheet } from "react-native";
-import { buoyColors, night } from "@buoy-gg/shared-ui";
+import { buoyColors, night, monoFont } from "@buoy-gg/shared-ui";
 
 // Badge configuration for each cause type
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
@@ -367,7 +367,7 @@ const styles = StyleSheet.create({
   keysText: {
     fontSize: 11,
     color: night.color.textSecondary,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     flex: 1
   },
   keysTextCompact: {
@@ -393,7 +393,7 @@ const styles = StyleSheet.create({
     fontSize: 11,
     fontWeight: "600",
     color: night.color.text,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   twoLevelText: {
     fontSize: 11,
@@ -402,7 +402,7 @@ const styles = StyleSheet.create({
   twoLevelKeys: {
     fontSize: 10,
     color: night.color.textSecondary,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   // Enhanced cause display styles (Phase 5)
   enhancedContainer: {
@@ -418,7 +418,7 @@ const styles = StyleSheet.create({
     fontSize: 14,
     fontWeight: "700",
     color: night.color.text,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   enhancedNativeTag: {
     // Inset display chip — the night track color.
@@ -431,7 +431,7 @@ const styles = StyleSheet.create({
     fontSize: 10,
     fontWeight: "600",
     color: night.color.textTertiary,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   enhancedFlowContainer: {
     flexDirection: "row",
@@ -480,13 +480,13 @@ const styles = StyleSheet.create({
   enhancedChangeIcon: {
     fontSize: 12,
     color: night.color.warning,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     width: 16
   },
   enhancedChangeText: {
     fontSize: 12,
     color: night.color.text,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     flex: 1
   },
   enhancedNoChanges: {

package/lib/module/highlight-updates/components/RenderDetailView.js

@@ -14,7 +14,7 @@
 
 import React, { useMemo, useState, useCallback } from "react";
 import { View, Text, TouchableOpacity, ScrollView, StyleSheet } from "react-native";
-import { CopyButton, formatRelativeTime, PlusIcon, MinusIcon, EventStepperFooter, Lock, night, useLimit } from "@buoy-gg/shared-ui";
+import { CopyButton, formatRelativeTime, PlusIcon, MinusIcon, EventStepperFooter, Lock, night, useLimit, monoFont } from "@buoy-gg/shared-ui";
 import { TreeDiffViewer } from "@buoy-gg/shared-ui/dataViewer";
 import { CAUSE_CONFIG, COMPONENT_CAUSE_CONFIG } from "./RenderCauseBadge";
 import { generateSingleComponentExport } from "../utils/rendersExportFormatter";
@@ -573,7 +573,7 @@ const styles = StyleSheet.create({
     fontSize: 11,
     fontWeight: "600",
     color: night.color.textTertiary,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   // Answer Card
   answerCard: {
@@ -628,7 +628,7 @@ const styles = StyleSheet.create({
   propChangeText: {
     fontSize: 11,
     color: night.color.text,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   // Details Section
   detailsSection: {
@@ -664,7 +664,7 @@ const styles = StyleSheet.create({
   detailValue: {
     fontSize: 12,
     color: night.color.text,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     flex: 1
   },
   // Stats Row
@@ -687,7 +687,7 @@ const styles = StyleSheet.create({
     fontSize: 16,
     fontWeight: "700",
     color: night.color.text,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   statLabel: {
     fontSize: 10,
@@ -727,7 +727,7 @@ const styles = StyleSheet.create({
     fontSize: 12,
     fontWeight: "600",
     color: night.color.text,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   // Quick Actions Section
   quickActionsSection: {
@@ -776,7 +776,7 @@ const styles = StyleSheet.create({
   filterOptionValue: {
     fontSize: 12,
     color: night.color.text,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     flex: 1
   },
   filterOptionValueSelected: {

package/lib/module/highlight-updates/components/RenderHistoryViewer.js

@@ -10,7 +10,7 @@
 
 import React, { useState, useCallback, useMemo } from "react";
 import { View, Text, TouchableOpacity, ScrollView, StyleSheet } from "react-native";
-import { Clock, GitBranch, Database, Lock, formatRelativeTime, SectionHeader, EventStepperFooter, buoyColors, night, useLimit, ToolEmptyState } from "@buoy-gg/shared-ui";
+import { Clock, GitBranch, Database, Lock, formatRelativeTime, SectionHeader, EventStepperFooter, buoyColors, night, useLimit, ToolEmptyState, monoFont } from "@buoy-gg/shared-ui";
 import { TreeDiffViewer } from "@buoy-gg/shared-ui/dataViewer";
 import { RenderTracker } from "../utils/RenderTracker";
 import { EnhancedCauseDisplay, CAUSE_CONFIG } from "./RenderCauseBadge";
@@ -628,7 +628,7 @@ const styles = StyleSheet.create({
   eventTime: {
     fontSize: 11,
     color: night.color.textTertiary,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   eventBadge: {
     flexDirection: "row",
@@ -646,7 +646,7 @@ const styles = StyleSheet.create({
   eventBadgeText: {
     fontSize: 10,
     fontWeight: "700",
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   section: {
     backgroundColor: night.color.surface,
@@ -675,7 +675,7 @@ const styles = StyleSheet.create({
   changedItem: {
     fontSize: 12,
     color: night.color.text,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     marginBottom: 3,
     paddingLeft: 8
   },
@@ -684,7 +684,7 @@ const styles = StyleSheet.create({
   },
   propsJson: {
     fontSize: 11,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     color: night.color.text,
     // Inset code box — the night track color.
     backgroundColor: night.color.bg,
@@ -738,7 +738,7 @@ const styles = StyleSheet.create({
   compareTime: {
     fontSize: 10,
     color: night.color.textTertiary,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   compareDivider: {
     width: 30,
@@ -774,12 +774,12 @@ const styles = StyleSheet.create({
     fontSize: 12,
     fontWeight: "700",
     color: night.color.warning,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   diffChangeKey: {
     fontSize: 12,
     color: night.color.text,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   diffNoChanges: {
     fontSize: 12,
@@ -847,7 +847,7 @@ const styles = StyleSheet.create({
   causeDiffValue: {
     fontSize: 12,
     color: night.color.text,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     fontWeight: "500"
   },
   diffChangesTitle: {

package/lib/module/highlight-updates/components/RenderListItem.js

@@ -9,7 +9,7 @@
 
 import React, { useMemo } from "react";
 import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
-import { ChevronRight, night, useRelativeTime } from "@buoy-gg/shared-ui";
+import { ChevronRight, night, useRelativeTime, monoFont } from "@buoy-gg/shared-ui";
 import { IdentifierBadge } from "./IdentifierBadge";
 import { RenderCauseBadge } from "./RenderCauseBadge";
 import { renderRowTestID } from "../utils/testIDs";
@@ -190,7 +190,7 @@ const styles = StyleSheet.create({
   nativeType: {
     fontSize: 10,
     color: night.color.textTertiary,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     marginTop: 1
   },
   accessibilityLabel: {
@@ -207,7 +207,7 @@ const styles = StyleSheet.create({
   renderCount: {
     fontSize: 11,
     fontWeight: "700",
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   bottomRow: {
     flexDirection: "row",

package/lib/module/highlight-updates/components/RendersCopySettingsView.js

@@ -8,12 +8,12 @@
  */
 
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { Text, StyleSheet, ScrollView, View, TouchableOpacity } from "react-native";
-import { DynamicFilterView, macOSColors, night, FileText, FileCode, Zap, Settings, Eye, ChevronDown, ChevronUp, AlertTriangle, Layers, ToolbarCopyButton } from "@buoy-gg/shared-ui";
+import { Text, StyleSheet, ScrollView } from "react-native";
+import { DynamicFilterView, macOSColors, night, FileText, FileCode, Zap, Settings, Eye, Layers, ToolbarCopyButton, ExportPreview, monoFont } from "@buoy-gg/shared-ui";
 import { DEFAULT_COPY_SETTINGS, COPY_PRESETS, PRESET_METADATA, detectActivePreset } from "../types/copySettings";
 import { generateExport, estimateExportSize, getExportSummary } from "../utils/rendersExportFormatter";
 import { loadCopySettings, saveCopySettings } from "../utils/copySettingsStorage";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const SIZE_WARNING_THRESHOLD = 50 * 1024;
 const SIZE_DANGER_THRESHOLD = 200 * 1024;
 const CAUSE_OPTIONS = [{
@@ -191,77 +191,35 @@ export function RendersCopySettingsView({
       totalComponents,
       totalRenders
     } = getExportSummary(previewRenders);
-    if (!isPreviewExpanded) {
-      const warningColor = sizeWarningLevel === "danger" ? night.color.danger : sizeWarningLevel === "warning" ? night.color.warning : night.color.textSecondary;
-      return /*#__PURE__*/_jsxs(View, {
-        style: styles.collapsedPreview,
-        children: [/*#__PURE__*/_jsx(TouchableOpacity, {
-          testID: "buoy-highlight-copy-preview-show",
-          accessibilityRole: "button",
-          accessibilityLabel: "Show preview",
-          style: styles.expandButton,
-          onPress: () => setIsPreviewExpanded(true),
-          children: /*#__PURE__*/_jsxs(View, {
-            style: styles.expandButtonContent,
-            children: [/*#__PURE__*/_jsx(Eye, {
-              size: 16,
-              color: night.color.info
-            }), /*#__PURE__*/_jsxs(View, {
-              style: styles.expandButtonTextContainer,
-              children: [/*#__PURE__*/_jsx(Text, {
-                style: styles.expandButtonTitle,
-                children: "Show Preview"
-              }), /*#__PURE__*/_jsxs(Text, {
-                testID: "buoy-highlight-copy-preview-summary",
-                style: styles.expandButtonSubtitle,
-                children: [totalComponents, " component", totalComponents !== 1 ? "s" : "", " \xB7 ", totalRenders, " renders \xB7 ~", formatBytes(estimatedSize), !hasLiveData ? " (mock data)" : ""]
-              })]
-            }), /*#__PURE__*/_jsx(ChevronDown, {
-              size: 16,
-              color: night.color.textTertiary
-            })]
+    return /*#__PURE__*/_jsx(ExportPreview, {
+      expanded: isPreviewExpanded,
+      onExpandedChange: setIsPreviewExpanded,
+      summary: `${totalComponents} component${totalComponents !== 1 ? "s" : ""} · ${totalRenders} renders · ~${formatBytes(estimatedSize)}${!hasLiveData ? " (mock data)" : ""}`,
+      warningLevel: sizeWarningLevel,
+      warningText: {
+        warning: "Large payload — preview may be slow",
+        danger: "Very large payload — try a smaller topN or turn off history"
+      },
+      testIDs: {
+        expand: "buoy-highlight-copy-preview-show",
+        collapse: "buoy-highlight-copy-preview-hide",
+        summary: "buoy-highlight-copy-preview-summary",
+        warning: "buoy-highlight-copy-size-warning"
+      },
+      renderBody: () => {
+        const exportText = generateCopyText();
+        return /*#__PURE__*/_jsx(ScrollView, {
+          testID: "buoy-highlight-copy-preview-scroll",
+          style: styles.previewScroll,
+          nestedScrollEnabled: true,
+          children: /*#__PURE__*/_jsx(Text, {
+            testID: "buoy-highlight-copy-preview-text",
+            style: styles.previewText,
+            selectable: true,
+            children: exportText
           })
-        }), sizeWarningLevel !== "none" && /*#__PURE__*/_jsxs(View, {
-          testID: "buoy-highlight-copy-size-warning",
-          style: [styles.sizeWarning, sizeWarningLevel === "danger" && styles.sizeWarningDanger],
-          children: [/*#__PURE__*/_jsx(AlertTriangle, {
-            size: 12,
-            color: warningColor
-          }), /*#__PURE__*/_jsx(Text, {
-            style: [styles.sizeWarningText, {
-              color: warningColor
-            }],
-            children: sizeWarningLevel === "danger" ? "Very large payload — try a smaller topN or turn off history" : "Large payload — preview may be slow"
-          })]
-        })]
-      });
-    }
-    const exportText = generateCopyText();
-    return /*#__PURE__*/_jsxs(View, {
-      children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
-        testID: "buoy-highlight-copy-preview-hide",
-        accessibilityRole: "button",
-        accessibilityLabel: "Hide preview",
-        style: styles.collapseButton,
-        onPress: () => setIsPreviewExpanded(false),
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: styles.collapseButtonText,
-          children: "Hide Preview"
-        }), /*#__PURE__*/_jsx(ChevronUp, {
-          size: 14,
-          color: night.color.textSecondary
-        })]
-      }), /*#__PURE__*/_jsx(ScrollView, {
-        testID: "buoy-highlight-copy-preview-scroll",
-        style: styles.previewScroll,
-        nestedScrollEnabled: true,
-        children: /*#__PURE__*/_jsx(Text, {
-          testID: "buoy-highlight-copy-preview-text",
-          style: styles.previewText,
-          selectable: true,
-          children: exportText
-        })
-      })]
+        });
+      }
     });
   }, [isPreviewExpanded, previewRenders, estimatedSize, sizeWarningLevel, hasLiveData, generateCopyText]);
   const renderPreviewHeaderActions = useCallback(() => {
@@ -486,76 +444,11 @@ export function RendersCopySettingsView({
   });
 }
 const styles = StyleSheet.create({
-  collapsedPreview: {
-    gap: 8
-  },
-  expandButton: {
-    backgroundColor: night.color.surfaceElevated,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: night.color.border,
-    padding: 12
-  },
-  expandButtonContent: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 10
-  },
-  expandButtonTextContainer: {
-    flex: 1
-  },
-  expandButtonTitle: {
-    fontSize: 13,
-    fontWeight: "600",
-    color: night.color.text
-  },
-  expandButtonSubtitle: {
-    fontSize: 11,
-    color: night.color.textSecondary,
-    marginTop: 2
-  },
-  collapseButton: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: 6,
-    paddingVertical: 8,
-    marginBottom: 8,
-    backgroundColor: night.color.surfaceElevated,
-    borderRadius: 6,
-    borderWidth: 1,
-    borderColor: night.color.border
-  },
-  collapseButtonText: {
-    fontSize: 12,
-    fontWeight: "500",
-    color: night.color.textSecondary
-  },
-  sizeWarning: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 6,
-    paddingHorizontal: 10,
-    paddingVertical: 6,
-    backgroundColor: night.color.warningSoft,
-    borderRadius: 6,
-    borderWidth: 1,
-    borderColor: night.color.warning + "30"
-  },
-  sizeWarningDanger: {
-    backgroundColor: night.color.dangerSoft,
-    borderColor: night.color.danger + "30"
-  },
-  sizeWarningText: {
-    fontSize: 11,
-    fontWeight: "500",
-    flex: 1
-  },
   previewScroll: {
     maxHeight: 360
   },
   previewText: {
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     fontSize: 11,
     color: night.color.text,
     lineHeight: 18

package/lib/module/highlight-updates/components/StatsDisplay.js

@@ -12,7 +12,7 @@
 
 import React, { useState, useEffect, memo } from "react";
 import { View, Text, StyleSheet } from "react-native";
-import { Activity, night } from "@buoy-gg/shared-ui";
+import { Activity, night, monoFont } from "@buoy-gg/shared-ui";
 import { RenderTracker } from "../utils/RenderTracker";
 
 /**
@@ -64,7 +64,7 @@ const styles = StyleSheet.create({
   headerChipValue: {
     fontSize: 12,
     fontWeight: "600",
-    fontFamily: "monospace"
+    fontFamily: monoFont
   }
 });
 export default StatsDisplay;