import React , { memo , forwardRef } from 'react' ; import Box from '../../primitives/Box' ; import Text from '../../primitives/Text' ; import { useFormControlContext } from './useFormControl' ; import { usePropsResolution } from '../../../hooks/useThemeProps' ; import type { IFormControlLabelProps } from './types' ; import { mergeRefs } from '../../../utils' ; import { combineContextAndProps } from '../../../utils' ; const FormControlLabel = ( { children , ... props } , ref ) => { const formControlContext = useFormControlContext ( ) ; const combinedProps = combineContextAndProps ( formControlContext , props ) ; const _ref = React . useRef < HTMLLabelElement > ( null ) ; const { astrickColor , ... reslovedProps } = usePropsResolution ( 'FormControlLabel' , combinedProps , { isDisabled : combinedProps . isDisabled , isReadOnly : combinedProps . isReadOnly , isInvalid : combinedProps . isInvalid , } ) ; const requiredAsterisk = ( ) => ( < Text _web = { { accessibilityHidden : true , accessibilityRole : 'presentation' , } } color = { astrickColor } > * < /Text>); const mergedRef = mergeRefs ( [ _ref , ref ] ) ; React . useEffect ( ( ) => { if ( _ref . current ) { if ( props . htmlFor ) { _ref . current . htmlFor = props . htmlFor ; } else if ( reslovedProps ?. nativeID ) { _ref . current . htmlFor = reslovedProps . nativeID ; } } } , [ reslovedProps ?. nativeID , props . htmlFor ] ) ; return ( < Box flexDirection = "row" justifyContent = "flex-start" _web = { { accessibilityRole : 'label' , } } { ... reslovedProps } nativeID = { reslovedProps ?. labelId } ref = { mergedRef } > { children } { reslovedProps ?. isRequired && requiredAsterisk ( ) } < /Box>); } ; export default memo ( forwardRef ( FormControlLabel ) ) ;