Update checkbox component to be a tad more compact

js/components/src/components/ui/checkbox.tsx

···
 import { Check } from "lucide-react-native";
 import { forwardRef } from "react";
 import { StyleSheet, TouchableOpacity, View } from "react-native";
-import { useTheme } from "../../lib/theme/theme";
+import { Theme, useTheme } from "../../lib/theme/theme";
 import { Text } from "./text";
 
 export interface CheckboxProps {
···
         </View>
         {(label || description) && (
           <View style={styles.content}>
-            {label && <Text style={styles.label}>{label}</Text>}
+            {label && (
+              <Text
+                size={size === "sm" ? "sm" : size === "lg" ? "lg" : "base"}
+                color={disabled ? "muted" : "default"}
+                leading="loose"
+              >
+                {label}
+              </Text>
+            )}
             {description && (
-              <Text style={styles.description}>{description}</Text>
+              <Text
+                size={size === "sm" ? "xs" : size === "lg" ? "base" : "sm"}
+                color={disabled ? "muted" : "muted"}
+                style={{ marginTop: theme.spacing[1] }}
+              >
+                {description}
+              </Text>
             )}
           </View>
         )}
···
 Checkbox.displayName = "Checkbox";
 
 function createStyles(
-  theme: any,
+  theme: Theme,
   size: string,
   disabled: boolean,
   checked: boolean,
···
       checkboxSize: 20,
       borderRadius: 4,
       padding: theme.spacing[1],
-      gap: theme.spacing[2],
+      gap: theme.spacing[1],
     },
     lg: {
       checkboxSize: 24,
       borderRadius: 6,
-      padding: theme.spacing[2],
-      gap: theme.spacing[3],
+      padding: theme.spacing[1],
+      gap: theme.spacing[2],
     },
   };
 
···
         ? theme.colors.border
         : checked
           ? theme.colors.primary
-          : theme.colors.border,
+          : theme.colors.textMuted,
       borderRadius: currentSize.borderRadius,
       backgroundColor: disabled
         ? theme.colors.muted
···
     },
     content: {
       flex: 1,
-      paddingTop: currentSize.padding * 0.5,
+      paddingTop: currentSize.padding * 0.25,
       paddingLeft: theme.spacing[2],
-    },
-    label: {
-      fontSize: size === "sm" ? 14 : size === "lg" ? 18 : 16,
-      fontWeight: "500",
-      color: disabled ? theme.colors.textDisabled : theme.colors.text,
-      lineHeight: size === "sm" ? 18 : size === "lg" ? 22 : 20,
-    },
-    description: {
-      fontSize: size === "sm" ? 12 : size === "lg" ? 16 : 14,
-      color: disabled ? theme.colors.textDisabled : theme.colors.textMuted,
-      marginTop: theme.spacing[1],
-      lineHeight: size === "sm" ? 16 : size === "lg" ? 20 : 18,
     },
   });
 }