From e5e21e7a290494f0bd33c4c45b5b4bab6a1bdef1 Mon Sep 17 00:00:00 2001
From: Bartosz Kaszubowski <gosimek@gmail.com>
Date: Wed, 18 Mar 2026 21:02:42 +0100
Subject: [PATCH] fix keybinds, caution icon and dependency row appearance, add
 libs

---
 components/Icons/index.tsx           |  3 +-
 components/InputKeyHint.tsx          |  9 +++--
 components/Package/DependencyRow.tsx |  6 ++--
 react-native-libraries.json          | 51 ++++++++++++++++++++++++++++
 styles/styles.css                    | 13 ++++---
 5 files changed, 70 insertions(+), 12 deletions(-)

diff --git a/components/Icons/index.tsx b/components/Icons/index.tsx
index 61ef3431..81ea930c 100644
--- a/components/Icons/index.tsx
+++ b/components/Icons/index.tsx
@@ -1107,6 +1107,7 @@ export function CautionBlockquote({ width = 24, height = 24, style }: IconProps)
         x2="128"
         y2="80"
         fill="none"
+        stroke="currentColor"
         strokeLinecap="round"
         strokeLinejoin="round"
         strokeWidth="24"
@@ -1118,7 +1119,7 @@ export function CautionBlockquote({ width = 24, height = 24, style }: IconProps)
         strokeMiterlimit="10"
         strokeWidth="24"
       />
-      <Circle cx="128" cy="172" r="24" fill="currentColor" />
+      <Circle cx="128" cy="172" r="16" fill="currentColor" />
     </Svg>
   );
 }
diff --git a/components/InputKeyHint.tsx b/components/InputKeyHint.tsx
index e4cac030..f2c249c5 100644
--- a/components/InputKeyHint.tsx
+++ b/components/InputKeyHint.tsx
@@ -8,20 +8,19 @@ type Props = {
   }[];
 };
 
-export const focusHintLabel = tw`font-light text-palette-gray4`;
-export const focusHintKey = tw`min-w-6 rounded-[3px] bg-palette-gray5 px-1 py-[3px] text-center tracking-[0.75px] text-tertiary dark:bg-powder`;
-
 export default function InputKeyHint({ content }: Props) {
   return content.map(entry => {
     if ('key' in entry) {
       return (
-        <Label key={`key-${entry.key}`} style={focusHintKey}>
+        <Label
+          key={`key-${entry.key}`}
+          style={tw`min-w-6 rounded-[3px] bg-palette-gray5 px-1 py-[3px] text-center tracking-[0.75px] text-tertiary dark:bg-powder dark:text-secondary`}>
           {entry.key}
         </Label>
       );
     } else if ('label' in entry) {
       return (
-        <Label key={`key-${entry.label}`} style={focusHintLabel}>
+        <Label key={`key-${entry.label}`} style={tw`font-light text-palette-gray4`}>
           {entry.label}
         </Label>
       );
diff --git a/components/Package/DependencyRow.tsx b/components/Package/DependencyRow.tsx
index a78bc1b1..9f440aa7 100644
--- a/components/Package/DependencyRow.tsx
+++ b/components/Package/DependencyRow.tsx
@@ -18,12 +18,14 @@ type Props = {
 
 export default function DependencyRow({ name, data, packageVersion }: Props) {
   const { isSmallScreen } = useLayout();
+
   const isDataString = typeof data === 'string';
+  const versionString = isDataString ? data : data.version;
+  const hasLongVersion = versionString.length > 18;
   const versionLabel = getVersionLabel(
-    isDataString ? data : data.version,
+    versionString,
     typeof packageVersion === 'string' ? packageVersion : undefined
   );
-  const hasLongVersion = typeof versionLabel !== 'string' || versionLabel.length > 18;
 
   return (
     <View
diff --git a/react-native-libraries.json b/react-native-libraries.json
index 0d420b06..22ab15c8 100644
--- a/react-native-libraries.json
+++ b/react-native-libraries.json
@@ -20069,5 +20069,56 @@
     "npmPkg": "react-zlib-js",
     "ios": true,
     "android": true
+  },
+  {
+    "githubUrl": "https://github.com/hyochan/react-native-audio-recorder-player",
+    "ios": true,
+    "android": true,
+    "web": true,
+    "alternatives": ["react-native-nitro-sound"]
+  },
+  {
+    "githubUrl": "https://github.com/expo/expo-asset-utils",
+    "ios": true,
+    "android": true,
+    "web": true,
+    "alternatives": ["expo-asset", "expo-file-system"]
+  },
+  {
+    "githubUrl": "https://github.com/acostalima/react-native-polyfill-globals",
+    "ios": true,
+    "android": true
+  },
+  {
+    "githubUrl": "https://github.com/ide/react-native-button",
+    "ios": true,
+    "android": true
+  },
+  {
+    "githubUrl": "https://github.com/glepur/react-native-swipe-gestures",
+    "ios": true,
+    "android": true
+  },
+  {
+    "githubUrl": "https://github.com/naeemur/react-native-wheel-color-picker",
+    "images": ["https://naeemur.github.io/asset-bucket/rn-wheel-color-picker.gif"],
+    "ios": true,
+    "android": true,
+    "web": true
+  },
+  {
+    "githubUrl": "https://github.com/nandorojo/sf-symbols-typescript",
+    "ios": true,
+    "macos": true,
+    "tvos": true,
+    "visionos": true
+  },
+  {
+    "githubUrl": "https://github.com/expo/expo/tree/main/packages/@expo/metro-runtime",
+    "npmPkg": "@expo/metro-runtime",
+    "ios": true,
+    "macos": true,
+    "tvos": true,
+    "visionos": true
   }
 ]
diff --git a/styles/styles.css b/styles/styles.css
index 1f521298..6a074922 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -522,6 +522,15 @@ select {
       display: block;
     }
 
+    &.note,
+    &.tip,
+    &.important,
+    &.warning,
+    &.caution {
+      padding-block-start: 0.5rem;
+      padding-block-end: 0.5rem;
+    }
+
     &.note {
       border-left-color: #4493f8;
 
@@ -703,10 +712,6 @@ select {
     }
   }
 
-  td:empty {
-    display: none;
-  }
-
   th {
     background-color: var(--table-header-background);
   }