@buoy-gg/shared-ui 7.0.34 → 7.0.36

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

@@ -10,6 +10,7 @@ var _index = require("../../icons/index.js");
 var _nightTheme = require("../night/nightTheme.js");
 var _SectionHeader = require("./SectionHeader.js");
 var _FilterComponents = require("./FilterComponents.js");
+var _fonts = require("../fonts.js");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * EntityFilterView — the "hide these by name" filter screen the state tools
@@ -268,7 +269,7 @@ const styles = _reactNative.StyleSheet.create({
     flex: 1,
     fontSize: 12,
     fontWeight: "600",
-    fontFamily: "monospace"
+    fontFamily: _fonts.monoFont
   },
   entityTextHidden: {
     color: _nightTheme.night.color.textTertiary,
@@ -278,12 +279,12 @@ const styles = _reactNative.StyleSheet.create({
     fontSize: 10,
     fontWeight: "500",
     color: _nightTheme.night.color.textTertiary,
-    fontFamily: "monospace"
+    fontFamily: _fonts.monoFont
   },
   addLabel: {
     fontSize: 10,
     fontWeight: "600",
-    fontFamily: "monospace"
+    fontFamily: _fonts.monoFont
   },
   addInputWrapper: {
     paddingHorizontal: 16,
@@ -310,7 +311,7 @@ const styles = _reactNative.StyleSheet.create({
   patternText: {
     flex: 1,
     fontSize: 12,
-    fontFamily: "monospace",
+    fontFamily: _fonts.monoFont,
     color: _nightTheme.night.color.text
   },
   emptyText: {
@@ -319,7 +320,7 @@ const styles = _reactNative.StyleSheet.create({
     paddingHorizontal: 16,
     paddingTop: 8,
     paddingBottom: 16,
-    fontFamily: "monospace"
+    fontFamily: _fonts.monoFont
   },
   howItWorksText: {
     fontSize: 11,
@@ -327,7 +328,7 @@ const styles = _reactNative.StyleSheet.create({
     lineHeight: 16,
     marginTop: 8,
     paddingHorizontal: 16,
-    fontFamily: "monospace"
+    fontFamily: _fonts.monoFont
   },
   examplesContainer: {
     paddingTop: 8,
@@ -341,14 +342,14 @@ const styles = _reactNative.StyleSheet.create({
     fontSize: 10,
     fontWeight: "600",
     color: _nightTheme.night.color.textTertiary,
-    fontFamily: "monospace",
+    fontFamily: _fonts.monoFont,
     letterSpacing: 0.5,
     marginBottom: 6
   },
   exampleItem: {
     fontSize: 10,
     color: _nightTheme.night.color.textTertiary,
-    fontFamily: "monospace",
+    fontFamily: _fonts.monoFont,
     lineHeight: 16
   }
 });

package/lib/commonjs/ui/components/EventHistoryViewer/CompareBar.js

@@ -8,6 +8,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _macOSDesignSystemColors = require("../../gameUI/constants/macOSDesignSystemColors.js");
 var _lucideIcons = require("../../../icons/lucide-icons.js");
+var _fonts = require("../../fonts.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 /**
@@ -155,7 +156,7 @@ const styles = _reactNative.StyleSheet.create({
   },
   label: {
     fontSize: 10,
-    fontFamily: "monospace",
+    fontFamily: _fonts.monoFont,
     fontWeight: "700",
     letterSpacing: 0.5,
     textTransform: "uppercase"
@@ -190,17 +191,17 @@ const styles = _reactNative.StyleSheet.create({
   index: {
     fontSize: 10,
     color: _macOSDesignSystemColors.macOSColors.text.secondary,
-    fontFamily: "monospace"
+    fontFamily: _fonts.monoFont
   },
   time: {
     fontSize: 11,
     color: _macOSDesignSystemColors.macOSColors.text.primary,
-    fontFamily: "monospace"
+    fontFamily: _fonts.monoFont
   },
   relative: {
     fontSize: 10,
     color: _macOSDesignSystemColors.macOSColors.text.secondary,
-    fontFamily: "monospace"
+    fontFamily: _fonts.monoFont
   },
   divider: {
     width: 1,

package/lib/commonjs/ui/components/EventHistoryViewer/DiffModeTabs.js

@@ -7,6 +7,7 @@ exports.DiffModeTabs = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _macOSDesignSystemColors = require("../../gameUI/constants/macOSDesignSystemColors.js");
+var _fonts = require("../../fonts.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 /**
@@ -84,7 +85,7 @@ const styles = _reactNative.StyleSheet.create({
   },
   tabText: {
     fontSize: 11,
-    fontFamily: "monospace",
+    fontFamily: _fonts.monoFont,
     fontWeight: "600",
     color: _macOSDesignSystemColors.macOSColors.text.secondary,
     letterSpacing: 0.5

package/lib/commonjs/ui/components/EventHistoryViewer/EventPickerModal.js

@@ -9,6 +9,7 @@ var _reactNative = require("react-native");
 var _absoluteFill = require("../../../utils/absoluteFill.js");
 var _macOSDesignSystemColors = require("../../gameUI/constants/macOSDesignSystemColors.js");
 var _lucideIcons = require("../../../icons/lucide-icons.js");
+var _fonts = require("../../fonts.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 /**
@@ -123,7 +124,7 @@ const styles = _reactNative.StyleSheet.create({
   title: {
     fontSize: 13,
     fontWeight: "700",
-    fontFamily: "monospace",
+    fontFamily: _fonts.monoFont,
     textTransform: "uppercase",
     marginBottom: 8,
     letterSpacing: 0.6
@@ -190,18 +191,18 @@ const styles = _reactNative.StyleSheet.create({
   itemIndex: {
     fontSize: 10,
     color: _macOSDesignSystemColors.macOSColors.text.secondary,
-    fontFamily: "monospace",
+    fontFamily: _fonts.monoFont,
     width: 40
   },
   itemTime: {
     fontSize: 11,
     color: _macOSDesignSystemColors.macOSColors.text.primary,
-    fontFamily: "monospace",
+    fontFamily: _fonts.monoFont,
     flex: 1
   },
   itemRelative: {
     fontSize: 10,
     color: _macOSDesignSystemColors.macOSColors.text.secondary,
-    fontFamily: "monospace"
+    fontFamily: _fonts.monoFont
   }
 });

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

@@ -10,6 +10,7 @@ var _lucideIcons = require("../../icons/lucide-icons.js");
 var _macOSDesignSystemColors = require("../gameUI/constants/macOSDesignSystemColors.js");
 var _nightTheme = require("../night/nightTheme.js");
 var _useSafeAreaInsets = require("../../hooks/useSafeAreaInsets.js");
+var _fonts = require("../fonts.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 /**
@@ -137,7 +138,7 @@ const styles = _reactNative.StyleSheet.create({
     fontSize: 12,
     fontWeight: "600",
     color: _macOSDesignSystemColors.macOSColors.text.primary,
-    fontFamily: "monospace",
+    fontFamily: _fonts.monoFont,
     textTransform: "uppercase"
   },
   navButtonTextDisabled: {
@@ -150,13 +151,13 @@ const styles = _reactNative.StyleSheet.create({
     fontSize: 14,
     fontWeight: "700",
     color: _macOSDesignSystemColors.macOSColors.text.primary,
-    fontFamily: "monospace",
+    fontFamily: _fonts.monoFont,
     textTransform: "uppercase"
   },
   subtitleText: {
     fontSize: 11,
     color: _macOSDesignSystemColors.macOSColors.text.secondary,
-    fontFamily: "monospace",
+    fontFamily: _fonts.monoFont,
     marginTop: 2
   },
   // ── Night variant (see ui/night/nightTheme.ts): near-black glass bar with

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

@@ -31,7 +31,9 @@ function CollapsedPeek({
   width,
   height,
   customContent,
-  label
+  label,
+  testID,
+  attention
 }) {
   // When progress=0 (collapsed): peek is visible (opacity=1, scale=1)
   // When progress=1 (expanded): peek is hidden (opacity=0, scale=0.9)
@@ -51,16 +53,17 @@ function CollapsedPeek({
         scale
       }]
     }],
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
       onPress: onPress,
       activeOpacity: 0.8,
       style: [styles.peekButton, {
         width,
         height
       }],
-      accessibilityLabel: label || `Expand options`,
+      accessibilityLabel: attention?.label ? `${label || "Expand options"} — ${attention.label}` : label || `Expand options`,
       accessibilityRole: "button",
-      children: customContent || /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      testID: testID,
+      children: [customContent || /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ChevronUp, {
           size: 12,
           color: _gameUIColors.buoyColors.textMuted,
@@ -69,7 +72,17 @@ function CollapsedPeek({
           style: styles.peekCount,
           children: count
         })]
-      })
+      }), attention ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        pointerEvents: "none",
+        testID: testID ? `${testID}-attention` : undefined,
+        style: [styles.peekAttention, {
+          backgroundColor: attention.color
+        }],
+        children: attention.glyph ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.peekAttentionGlyph,
+          children: attention.glyph
+        }) : null
+      }) : null]
     })
   });
 }
@@ -85,7 +98,8 @@ function ExpandedWrapper({
   width,
   expandedHeight,
   isExpanded,
-  style
+  style,
+  collapseTestID
 }) {
   // Animate height from 0 to full height
   const animatedHeight = progress.interpolate({
@@ -108,6 +122,7 @@ function ExpandedWrapper({
         style: styles.collapseButton,
         accessibilityLabel: "Collapse",
         accessibilityRole: "button",
+        testID: collapseTestID,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ChevronUp, {
           size: 12,
           color: _gameUIColors.buoyColors.textMuted,
@@ -137,10 +152,13 @@ function ExpandablePopover({
   defaultExpanded = false,
   collapsedContent,
   collapsedLabel,
+  attention = null,
   expandedStyle,
   persistState = false,
   storageKey,
-  peekHeight = DEFAULT_PEEK_HEIGHT
+  peekHeight = DEFAULT_PEEK_HEIGHT,
+  testID,
+  collapseTestID
 }) {
   const [isExpanded, setIsExpanded] = (0, _react.useState)(defaultExpanded);
   const [isStateRestored, setIsStateRestored] = (0, _react.useState)(!persistState);
@@ -243,6 +261,7 @@ function ExpandablePopover({
       style: styles.expandedWrapper,
       pointerEvents: isExpanded ? "box-none" : "none",
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ExpandedWrapper, {
+        collapseTestID: collapseTestID,
         onCollapse: handleCollapse,
         progress: progress,
         width: width,
@@ -262,7 +281,9 @@ function ExpandablePopover({
         width: width,
         height: peekHeight,
         customContent: collapsedContent,
-        label: collapsedLabel
+        label: collapsedLabel,
+        testID: testID,
+        attention: attention
       })
     })]
   });
@@ -273,6 +294,25 @@ function ExpandablePopover({
 // ============================================================================
 
 const styles = _reactNative.StyleSheet.create({
+  peekAttention: {
+    position: "absolute",
+    top: 2,
+    right: 2,
+    minWidth: 11,
+    height: 11,
+    borderRadius: 6,
+    paddingHorizontal: 2,
+    alignItems: "center",
+    justifyContent: "center",
+    borderWidth: 1.5,
+    borderColor: "#0C0C0C"
+  },
+  peekAttentionGlyph: {
+    color: "#000",
+    fontSize: 8,
+    fontWeight: "800",
+    lineHeight: 9
+  },
   container: {
     overflow: "visible",
     zIndex: 1000

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

@@ -7,6 +7,7 @@ exports.ExpandedInfoRow = ExpandedInfoRow;
 exports.PillBadge = PillBadge;
 var _reactNative = require("react-native");
 var _macOSDesignSystemColors = require("../gameUI/constants/macOSDesignSystemColors.js");
+var _fonts = require("../fonts.js");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * ExpandedInfoRow
@@ -77,7 +78,7 @@ const styles = _reactNative.StyleSheet.create({
     color: _macOSDesignSystemColors.macOSColors.text.muted,
     fontWeight: "600",
     minWidth: 70,
-    fontFamily: "monospace"
+    fontFamily: _fonts.monoFont
   },
   pill: {
     flexDirection: "row",
@@ -97,7 +98,7 @@ const styles = _reactNative.StyleSheet.create({
   pillText: {
     fontSize: 10,
     fontWeight: "700",
-    fontFamily: "monospace",
+    fontFamily: _fonts.monoFont,
     letterSpacing: 0.5
   },
   pillTextSm: {

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

@@ -11,6 +11,7 @@ exports.FilterSection = FilterSection;
 var _reactNative = require("react-native");
 var _index = require("../../icons/index.js");
 var _nightTheme = require("../night/nightTheme.js");
+var _fonts = require("../fonts.js");
 var _jsxRuntime = require("react/jsx-runtime");
 // Container for filter section
 
@@ -280,7 +281,7 @@ const styles = _reactNative.StyleSheet.create({
   filterItemText: {
     flex: 1,
     fontSize: 12,
-    fontFamily: "monospace",
+    fontFamily: _fonts.monoFont,
     marginRight: 8,
     color: _nightTheme.night.color.text
   },

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

@@ -7,6 +7,7 @@ exports.InfoRow = InfoRow;
 var _reactNative = require("react-native");
 var _nightTheme = require("../night/nightTheme.js");
 var _CopyButton = require("./CopyButton.js");
+var _fonts = require("../fonts.js");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * InfoRow — the label / value line of every detail screen.
@@ -78,7 +79,7 @@ const styles = _reactNative.StyleSheet.create({
     marginLeft: 12
   },
   valueMono: {
-    fontFamily: "monospace"
+    fontFamily: _fonts.monoFont
   },
   valueNode: {
     flex: 1,

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.Pill = Pill;
 var _reactNative = require("react-native");
 var _nightTheme = require("../night/nightTheme.js");
+var _fonts = require("../fonts.js");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Pill — the small caption chip every tool draws next to a row: a verdict
@@ -104,7 +105,7 @@ const styles = _reactNative.StyleSheet.create({
     fontSize: 11
   },
   mono: {
-    fontFamily: "monospace"
+    fontFamily: _fonts.monoFont
   },
   upper: {
     textTransform: "uppercase",

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

@@ -11,6 +11,7 @@ exports.ToolFooter = ToolFooter;
 var _reactNative = require("react-native");
 var _nightTheme = require("../night/nightTheme.js");
 var _useSafeAreaInsets = require("../../hooks/useSafeAreaInsets.js");
+var _fonts = require("../fonts.js");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * ToolFooter — the night glass bar pinned to the bottom of a tool: dark
@@ -145,7 +146,7 @@ const styles = _reactNative.StyleSheet.create({
   message: {
     color: _nightTheme.night.color.info,
     fontSize: 10,
-    fontFamily: "monospace"
+    fontFamily: _fonts.monoFont
   },
   messageMuted: {
     color: _nightTheme.night.color.textTertiary,
@@ -182,7 +183,7 @@ const styles = _reactNative.StyleSheet.create({
     fontSize: 10,
     fontWeight: "600",
     color: _nightTheme.night.color.textSecondary,
-    fontFamily: "monospace",
+    fontFamily: _fonts.monoFont,
     textTransform: "uppercase"
   },
   buttonTextMd: {

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

@@ -9,6 +9,7 @@ var _index = require("../../icons/index.js");
 var _CyberpunkButtonOutline = require("./CyberpunkButtonOutline.js");
 var _CyberpunkIconContainer = require("./CyberpunkIconContainer.js");
 var _index2 = require("../gameUI/index.js");
+var _fonts = require("../fonts.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function CyberpunkSectionButton({
   id: _id,
@@ -95,14 +96,14 @@ const styles = _reactNative.StyleSheet.create({
     fontSize: 14,
     fontWeight: "700",
     letterSpacing: 0.5,
-    fontFamily: "monospace"
+    fontFamily: _fonts.monoFont
   },
   subtitle: {
     fontSize: 12,
     fontWeight: "600",
     marginTop: 1,
     letterSpacing: 0.5,
-    fontFamily: "monospace",
+    fontFamily: _fonts.monoFont,
     opacity: 0.85
   },
   arrowContainer: {

package/lib/commonjs/ui/fonts.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "monoFont", {
+  enumerable: true,
+  get: function () {
+    return _floatingToolsCore.monoFont;
+  }
+});
+var _floatingToolsCore = require("@buoy-gg/floating-tools-core");

package/lib/commonjs/ui/gameUI/components/GameUICollapsibleSection.js

@@ -7,6 +7,7 @@ exports.GameUICollapsibleSection = GameUICollapsibleSection;
 var _reactNative = require("react-native");
 var _index = require("../../../icons/index.js");
 var _gameUIColors = require("../constants/gameUIColors.js");
+var _fonts = require("../../fonts.js");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Reusable collapsible section component for Game UI
@@ -94,7 +95,7 @@ const styles = _reactNative.StyleSheet.create({
   title: {
     fontSize: 11,
     color: _gameUIColors.gameUIColors.primary,
-    fontFamily: "monospace",
+    fontFamily: _fonts.monoFont,
     fontWeight: "700",
     letterSpacing: 2,
     opacity: 0.9
@@ -102,7 +103,7 @@ const styles = _reactNative.StyleSheet.create({
   subtitle: {
     fontSize: 9,
     color: _gameUIColors.gameUIColors.secondary,
-    fontFamily: "monospace",
+    fontFamily: _fonts.monoFont,
     paddingHorizontal: 4,
     marginTop: 2,
     opacity: 0.7
@@ -114,7 +115,7 @@ const styles = _reactNative.StyleSheet.create({
   },
   badgeText: {
     fontSize: 10,
-    fontFamily: "monospace",
+    fontFamily: _fonts.monoFont,
     fontWeight: "700"
   }
 });

package/lib/commonjs/ui/gameUI/components/GameUICompactStats.js

@@ -7,6 +7,7 @@ exports.GameUICompactStats = GameUICompactStats;
 var _react = require("react");
 var _reactNative = require("react-native");
 var _gameUIColors = require("../constants/gameUIColors.js");
+var _fonts = require("../../fonts.js");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Reusable compact stats display component
@@ -180,13 +181,13 @@ const styles = _reactNative.StyleSheet.create({
     fontSize: 11,
     fontWeight: "700",
     color: _gameUIColors.gameUIColors.primary,
-    fontFamily: "monospace",
+    fontFamily: _fonts.monoFont,
     letterSpacing: 1.5
   },
   headerSubtitle: {
     fontSize: 8,
     color: _gameUIColors.gameUIColors.secondary,
-    fontFamily: "monospace",
+    fontFamily: _fonts.monoFont,
     opacity: 0.7
   },
   statusIndicator: {
@@ -202,7 +203,7 @@ const styles = _reactNative.StyleSheet.create({
   statusText: {
     fontSize: 9,
     fontWeight: "600",
-    fontFamily: "monospace",
+    fontFamily: _fonts.monoFont,
     letterSpacing: 0.5
   },
   // Health section
@@ -215,7 +216,7 @@ const styles = _reactNative.StyleSheet.create({
   healthLabel: {
     fontSize: 8,
     color: _gameUIColors.gameUIColors.secondary,
-    fontFamily: "monospace",
+    fontFamily: _fonts.monoFont,
     letterSpacing: 0.5
   },
   healthBarWrapper: {
@@ -234,7 +235,7 @@ const styles = _reactNative.StyleSheet.create({
   healthPercentage: {
     fontSize: 11,
     fontWeight: "700",
-    fontFamily: "monospace"
+    fontFamily: _fonts.monoFont
   },
   // Stats grid
   statsGrid: {
@@ -261,20 +262,20 @@ const styles = _reactNative.StyleSheet.create({
   cardLabel: {
     fontSize: 11,
     fontWeight: "700",
-    fontFamily: "monospace",
+    fontFamily: _fonts.monoFont,
     letterSpacing: 0.5,
     color: _gameUIColors.gameUIColors.primary
   },
   cardSubtitle: {
     fontSize: 8,
     color: _gameUIColors.gameUIColors.secondary,
-    fontFamily: "monospace",
+    fontFamily: _fonts.monoFont,
     opacity: 0.7
   },
   statNumber: {
     fontSize: 16,
     fontWeight: "700",
-    fontFamily: "monospace",
+    fontFamily: _fonts.monoFont,
     minWidth: 28
   },
   valueBlock: {
@@ -283,7 +284,7 @@ const styles = _reactNative.StyleSheet.create({
   percentText: {
     fontSize: 9,
     color: _gameUIColors.gameUIColors.secondary,
-    fontFamily: "monospace"
+    fontFamily: _fonts.monoFont
   },
   statBar: {
     height: 3,
@@ -309,7 +310,7 @@ const styles = _reactNative.StyleSheet.create({
   bottomStatLabel: {
     fontSize: 7,
     color: _gameUIColors.gameUIColors.muted,
-    fontFamily: "monospace",
+    fontFamily: _fonts.monoFont,
     letterSpacing: 0.5,
     marginBottom: 1
   },
@@ -317,7 +318,7 @@ const styles = _reactNative.StyleSheet.create({
     fontSize: 11,
     fontWeight: "700",
     color: _gameUIColors.gameUIColors.primary,
-    fontFamily: "monospace"
+    fontFamily: _fonts.monoFont
   },
   bottomDivider: {
     width: 1,