@buoy-gg/shared-ui 1.7.2

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

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BackButton = BackButton;
+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 BackButton({
+  onPress,
+  color = _gameUIColors.gameUIColors.primary,
+  size = 16,
+  accessibilityLabel = "Go back",
+  accessibilityHint = "Return to previous screen"
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+    "sentry-label": "ignore back button",
+    onPress: onPress,
+    style: styles.button,
+    hitSlop: {
+      top: 6,
+      bottom: 6,
+      left: 6,
+      right: 6
+    },
+    accessibilityLabel: accessibilityLabel,
+    accessibilityHint: accessibilityHint,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ChevronLeft, {
+      color: color,
+      size: size
+    })
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  button: {
+    width: 28,
+    height: 28,
+    borderRadius: 6,
+    backgroundColor: _gameUIColors.gameUIColors.secondary + "1A",
+    justifyContent: "center",
+    alignItems: "center",
+    borderWidth: 1,
+    borderColor: _gameUIColors.gameUIColors.secondary + "33"
+  }
+});

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

@@ -0,0 +1,221 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Badge = Badge;
+exports.CountBadge = CountBadge;
+exports.MethodBadge = MethodBadge;
+exports.StatusBadge = StatusBadge;
+exports.TypeBadge = TypeBadge;
+var _reactNative = require("react-native");
+var _gameUIColors = require("../gameUI/constants/gameUIColors.js");
+var _jsxRuntime = require("react/jsx-runtime");
+// Badge variants
+
+// Color mapping for common statuses - using Buoy theme colors
+const STATUS_COLORS = {
+  success: _gameUIColors.buoyColors.success,
+  error: _gameUIColors.buoyColors.error,
+  warning: _gameUIColors.buoyColors.warning,
+  info: _gameUIColors.buoyColors.primary,
+  pending: _gameUIColors.buoyColors.textSecondary,
+  active: _gameUIColors.buoyColors.success,
+  inactive: _gameUIColors.buoyColors.textMuted,
+  stale: _gameUIColors.buoyColors.warning,
+  fetching: _gameUIColors.buoyColors.primary
+};
+
+// Color mapping for HTTP methods - using Buoy theme colors
+const METHOD_COLORS = {
+  GET: _gameUIColors.buoyColors.success,
+  POST: _gameUIColors.buoyColors.primary,
+  PUT: _gameUIColors.buoyColors.warning,
+  PATCH: _gameUIColors.buoyColors.textSecondary,
+  DELETE: _gameUIColors.buoyColors.error,
+  HEAD: _gameUIColors.buoyColors.textMuted,
+  OPTIONS: _gameUIColors.buoyColors.primary
+};
+
+// Base Badge component
+
+function Badge({
+  children,
+  variant = "default",
+  color = "#E5E7EB",
+  size = "medium",
+  style
+}) {
+  const badgeStyles = getBadgeStyles(variant, color, size);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [badgeStyles.container, style],
+    children: children
+  });
+}
+
+// Status Badge for success/error/warning states
+
+function StatusBadge({
+  status,
+  size = "medium",
+  style
+}) {
+  const color = STATUS_COLORS[status.toLowerCase()] || "#6B7280";
+  const badgeStyles = getBadgeStyles("status", color, size);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [badgeStyles.container, style],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [styles.statusDot, {
+        backgroundColor: color
+      }]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [badgeStyles.text, {
+        color
+      }],
+      children: status.charAt(0).toUpperCase() + status.slice(1)
+    })]
+  });
+}
+
+// Count Badge for displaying numbers
+
+function CountBadge({
+  count,
+  color = _gameUIColors.buoyColors.primary,
+  size = "small",
+  style,
+  maxCount = 99
+}) {
+  const displayCount = typeof count === "number" && count > maxCount ? `${maxCount}+` : count;
+  const badgeStyles = getBadgeStyles("count", color, size);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [badgeStyles.container, styles.countBadge, style],
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [badgeStyles.text, {
+        color
+      }],
+      children: displayCount
+    })
+  });
+}
+
+// Type Badge for data types
+
+function TypeBadge({
+  type,
+  color,
+  size = "small",
+  style
+}) {
+  const typeColor = color || getTypeColor(type);
+  const badgeStyles = getBadgeStyles("type", typeColor, size);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [badgeStyles.container, style],
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [badgeStyles.text, {
+        color: typeColor
+      }],
+      children: type
+    })
+  });
+}
+
+// Method Badge for HTTP methods
+
+function MethodBadge({
+  method,
+  size = "medium",
+  style
+}) {
+  const color = METHOD_COLORS[method.toUpperCase()] || "#6B7280";
+  const badgeStyles = getBadgeStyles("method", color, size);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [badgeStyles.container, styles.methodBadge, style],
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [badgeStyles.text, styles.methodText, {
+        color
+      }],
+      children: method.toUpperCase()
+    })
+  });
+}
+
+// Helper function to get badge styles
+function getBadgeStyles(variant, color, size) {
+  const isOutline = variant === "outline";
+  const backgroundColor = isOutline ? "transparent" : `${color}15`;
+  const borderColor = `${color}40`;
+  const sizeStyles = {
+    small: {
+      paddingHorizontal: 6,
+      paddingVertical: 2,
+      fontSize: 11
+    },
+    medium: {
+      paddingHorizontal: 8,
+      paddingVertical: 3,
+      fontSize: 12
+    },
+    large: {
+      paddingHorizontal: 10,
+      paddingVertical: 4,
+      fontSize: 14
+    }
+  };
+  const {
+    paddingHorizontal,
+    paddingVertical,
+    fontSize
+  } = sizeStyles[size];
+  return _reactNative.StyleSheet.create({
+    container: {
+      flexDirection: "row",
+      alignItems: "center",
+      backgroundColor,
+      borderColor,
+      borderWidth: 1,
+      borderRadius: variant === "count" ? 12 : 4,
+      paddingHorizontal,
+      paddingVertical
+    },
+    text: {
+      fontSize,
+      fontWeight: "600"
+    }
+  });
+}
+
+// Helper function to get type color - using Buoy theme
+function getTypeColor(type) {
+  const typeColors = {
+    string: _gameUIColors.buoyColors.primary,
+    number: _gameUIColors.buoyColors.primary,
+    boolean: _gameUIColors.buoyColors.primary,
+    object: _gameUIColors.buoyColors.textSecondary,
+    array: _gameUIColors.buoyColors.textSecondary,
+    null: _gameUIColors.buoyColors.textMuted,
+    undefined: _gameUIColors.buoyColors.textMuted,
+    function: _gameUIColors.buoyColors.textSecondary
+  };
+  return typeColors[type.toLowerCase()] || _gameUIColors.buoyColors.textMuted;
+}
+const styles = _reactNative.StyleSheet.create({
+  statusDot: {
+    width: 6,
+    height: 6,
+    borderRadius: 3,
+    marginRight: 4
+  },
+  countBadge: {
+    minWidth: 20,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  methodBadge: {
+    minWidth: 45,
+    alignItems: "center"
+  },
+  methodText: {
+    fontWeight: "700"
+  }
+});

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

@@ -0,0 +1,149 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ClipboardHintBanner = void 0;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _index = require("../gameUI/index.js");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * ClipboardHintBanner - A hint banner that shows users how to fix iOS Simulator clipboard sync
+ *
+ * Displays a dismissible hint to educate users about the iOS Simulator's
+ * "Automatically Sync Pasteboard" setting that needs to be toggled if copy doesn't work.
+ * Automatically manages storage to remember when the user acknowledges the hint.
+ */
+
+/**
+ * A modal hint that teaches users about iOS Simulator clipboard sync
+ */
+const ClipboardHintBanner = exports.ClipboardHintBanner = /*#__PURE__*/(0, _react.memo)(function ClipboardHintBanner({
+  visible,
+  onAcknowledge
+}) {
+  const handleAcknowledge = (0, _react.useCallback)(() => {
+    onAcknowledge();
+  }, [onAcknowledge]);
+  if (!visible) return null;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Modal, {
+    visible: visible,
+    transparent: true,
+    animationType: "fade",
+    onRequestClose: handleAcknowledge,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+      style: styles.overlay,
+      onPress: handleAcknowledge,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+        style: styles.container,
+        onPress: e => e.stopPropagation(),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.inner,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: styles.iconContainer,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: styles.iconText,
+              children: "\uD83D\uDCCB"
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: styles.messageContainer,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: styles.messageTitle,
+              children: "Clipboard Tip"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+              style: styles.messageText,
+              children: ["Content copied! If paste doesn't work on your Mac, go to the iOS Simulator menu:", "\n\n", /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: styles.menuPath,
+                children: "Edit \u2192 Automatically Sync Pasteboard"
+              }), "\n\n", "Toggle it off and on again to fix the sync."]
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+            style: styles.acknowledgeButton,
+            onPress: handleAcknowledge,
+            activeOpacity: 0.7,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: styles.acknowledgeButtonText,
+              children: "Got it!"
+            })
+          })]
+        })
+      })
+    })
+  });
+});
+const styles = _reactNative.StyleSheet.create({
+  overlay: {
+    flex: 1,
+    backgroundColor: "rgba(0, 0, 0, 0.6)",
+    justifyContent: "center",
+    alignItems: "center",
+    padding: 24
+  },
+  container: {
+    backgroundColor: _index.gameUIColors.panel,
+    borderLeftWidth: 3,
+    borderLeftColor: _index.gameUIColors.info,
+    borderRadius: 12,
+    overflow: "hidden",
+    shadowColor: _index.gameUIColors.info,
+    shadowOffset: {
+      width: 0,
+      height: 0
+    },
+    shadowOpacity: 0.4,
+    shadowRadius: 16,
+    elevation: 8,
+    maxWidth: 340
+  },
+  inner: {
+    padding: 20,
+    gap: 16,
+    alignItems: "center"
+  },
+  iconContainer: {
+    width: 48,
+    height: 48,
+    borderRadius: 24,
+    backgroundColor: `${_index.gameUIColors.info}20`,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  iconText: {
+    fontSize: 24
+  },
+  messageContainer: {
+    gap: 8
+  },
+  messageTitle: {
+    fontSize: 16,
+    fontWeight: "700",
+    color: _index.gameUIColors.info,
+    letterSpacing: 0.3,
+    textAlign: "center"
+  },
+  messageText: {
+    fontSize: 13,
+    color: _index.gameUIColors.primaryLight,
+    lineHeight: 20,
+    textAlign: "center"
+  },
+  menuPath: {
+    fontFamily: "monospace",
+    fontSize: 12,
+    color: _index.gameUIColors.primary,
+    fontWeight: "600"
+  },
+  acknowledgeButton: {
+    backgroundColor: _index.gameUIColors.info,
+    paddingHorizontal: 24,
+    paddingVertical: 10,
+    borderRadius: 8,
+    marginTop: 4
+  },
+  acknowledgeButtonText: {
+    fontSize: 14,
+    fontWeight: "700",
+    color: "#FFFFFF"
+  }
+});

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

@@ -0,0 +1,170 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CollapsibleSection = CollapsibleSection;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _index = require("../../icons/index.js");
+var _index2 = require("../gameUI/index.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function CollapsibleSection({
+  title,
+  children,
+  icon: Icon,
+  badge,
+  defaultOpen = false,
+  variant = "bordered",
+  style,
+  headerStyle,
+  titleStyle,
+  contentStyle,
+  onToggle
+}) {
+  const [isOpen, setIsOpen] = (0, _react.useState)(defaultOpen);
+  const rotateAnim = (0, _react.useRef)(new _reactNative.Animated.Value(defaultOpen ? 1 : 0)).current;
+  const toggle = () => {
+    const newState = !isOpen;
+    setIsOpen(newState);
+    onToggle?.(newState);
+    _reactNative.Animated.timing(rotateAnim, {
+      toValue: newState ? 1 : 0,
+      duration: 200,
+      useNativeDriver: true
+    }).start();
+  };
+  const rotation = rotateAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: ["0deg", "180deg"]
+  });
+  const containerStyles = [styles.container, variant === "bordered" && styles.borderedVariant, variant === "card" && styles.cardVariant, style];
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: containerStyles,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+      style: [styles.header, headerStyle],
+      onPress: toggle,
+      activeOpacity: 0.7,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.headerLeft,
+        children: [Icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
+          size: 16,
+          color: variant === "card" ? _index2.gameUIColors.primary : _index2.gameUIColors.secondary
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.title, titleStyle],
+          children: title
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.headerRight,
+        children: [badge !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: styles.badgeContainer,
+          children: typeof badge === "string" || typeof badge === "number" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: styles.badge,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: styles.badgeText,
+              children: badge
+            })
+          }) : badge
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+          style: {
+            transform: [{
+              rotate: rotation
+            }]
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ChevronDown, {
+            size: 16,
+            color: _index2.gameUIColors.secondary
+          })
+        })]
+      })]
+    }), isOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [styles.content, contentStyle],
+      children: children
+    })]
+  });
+}
+CollapsibleSection.Simple = function Simple({
+  title,
+  children,
+  defaultOpen
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(CollapsibleSection, {
+    title: title,
+    defaultOpen: defaultOpen,
+    variant: "plain",
+    children: children
+  });
+};
+CollapsibleSection.WithIcon = function WithIcon({
+  title,
+  icon,
+  children,
+  defaultOpen,
+  badge
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(CollapsibleSection, {
+    title: title,
+    icon: icon,
+    badge: badge,
+    defaultOpen: defaultOpen,
+    variant: "card",
+    children: children
+  });
+};
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    marginBottom: 8
+  },
+  borderedVariant: {
+    borderWidth: 1,
+    borderColor: _index2.gameUIColors.border + "30",
+    borderRadius: 8,
+    overflow: "hidden"
+  },
+  cardVariant: {
+    backgroundColor: _index2.gameUIColors.panel,
+    borderRadius: 8,
+    overflow: "hidden"
+  },
+  header: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    padding: 12
+  },
+  headerLeft: {
+    flexDirection: "row",
+    alignItems: "center",
+    flex: 1,
+    gap: 8
+  },
+  headerRight: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8
+  },
+  title: {
+    fontSize: 14,
+    fontWeight: "600",
+    color: _index2.gameUIColors.text,
+    flex: 1
+  },
+  badgeContainer: {
+    marginRight: 4
+  },
+  badge: {
+    backgroundColor: _index2.gameUIColors.primary + "20",
+    paddingHorizontal: 8,
+    paddingVertical: 2,
+    borderRadius: 4
+  },
+  badgeText: {
+    fontSize: 11,
+    fontWeight: "600",
+    color: _index2.gameUIColors.primary
+  },
+  content: {
+    paddingHorizontal: 12,
+    paddingBottom: 12
+  }
+});

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

@@ -0,0 +1,114 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CompactFilterChips = CompactFilterChips;
+var _reactNative = require("react-native");
+var _macOSDesignSystemColors = require("../gameUI/constants/macOSDesignSystemColors.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function CompactFilterChips({
+  groups,
+  onChipPress
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: styles.container,
+    children: groups.map(group => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.group,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.groupTitle,
+        children: group.title
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+        horizontal: true,
+        showsHorizontalScrollIndicator: false,
+        style: styles.chipsScroll,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: styles.chipsRow,
+          children: group.chips.map(chip => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+            style: [styles.chip, chip.isActive && styles.chipActive, chip.isActive && chip.color && {
+              backgroundColor: chip.color + "15",
+              borderColor: chip.color + "40"
+            }],
+            onPress: () => onChipPress(group.id, chip.id, chip.value),
+            children: [chip.icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(chip.icon, {
+              size: 10,
+              color: chip.isActive ? chip.color || _macOSDesignSystemColors.macOSColors.semantic.info : _macOSDesignSystemColors.macOSColors.text.muted
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: [styles.chipLabel, chip.isActive && styles.chipLabelActive, chip.isActive && chip.color && {
+                color: chip.color
+              }],
+              children: chip.label
+            }), chip.count !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: [styles.chipCount, chip.isActive && styles.chipCountActive, chip.isActive && chip.color && {
+                color: chip.color
+              }],
+              children: chip.count
+            })]
+          }, chip.id))
+        })
+      })]
+    }, group.id))
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    gap: 8
+  },
+  group: {
+    gap: 6
+  },
+  groupTitle: {
+    fontSize: 9,
+    fontWeight: "600",
+    color: _macOSDesignSystemColors.macOSColors.text.muted,
+    letterSpacing: 0.5,
+    textTransform: "uppercase",
+    paddingHorizontal: 4
+  },
+  chipsScroll: {
+    flexGrow: 0
+  },
+  chipsRow: {
+    flexDirection: "row",
+    gap: 4,
+    paddingHorizontal: 4
+  },
+  chip: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4,
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    backgroundColor: _macOSDesignSystemColors.macOSColors.background.card,
+    borderRadius: 4,
+    borderWidth: 1,
+    borderColor: _macOSDesignSystemColors.macOSColors.border.default,
+    height: 24
+  },
+  chipActive: {
+    backgroundColor: _macOSDesignSystemColors.macOSColors.semantic.infoBackground,
+    borderColor: _macOSDesignSystemColors.macOSColors.semantic.info + "40"
+  },
+  chipLabel: {
+    fontSize: 10,
+    fontWeight: "500",
+    color: _macOSDesignSystemColors.macOSColors.text.secondary
+  },
+  chipLabelActive: {
+    color: _macOSDesignSystemColors.macOSColors.semantic.info,
+    fontWeight: "600"
+  },
+  chipCount: {
+    fontSize: 9,
+    fontWeight: "600",
+    color: _macOSDesignSystemColors.macOSColors.text.muted,
+    backgroundColor: _macOSDesignSystemColors.macOSColors.background.hover,
+    paddingHorizontal: 4,
+    paddingVertical: 1,
+    borderRadius: 3
+  },
+  chipCountActive: {
+    backgroundColor: _macOSDesignSystemColors.macOSColors.semantic.info + "20",
+    color: _macOSDesignSystemColors.macOSColors.semantic.info
+  }
+});