import React , { memo , forwardRef } from 'react' ; import Box from '../Box' ; import type { IFlexProps } from './types' ; import { usePropsResolution } from '../../../hooks/useThemeProps' ; import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps' ; const Flex = ( props , ref ) => { const { align , justify , wrap , basis , grow , shrink , direction , ... resolvedProps } = usePropsResolution ( 'Flex' , props ) ; if ( useHasResponsiveProps ( props ) ) { return null ; } return ( < Box { ... props } { ... resolvedProps } display = "flex" flexDirection = { direction || resolvedProps . flexDirection } alignItems = { align || resolvedProps . alignItems } justifyContent = { justify || resolvedProps . justifyContent } flexGrow = { grow || resolvedProps . flexGrow } flexBasis = { basis || resolvedProps . flexBasis } flexShrink = { shrink || resolvedProps . flexShrink } flexWrap = { wrap || resolvedProps . flexWrap } ref = { ref } / > ) ; } ; export const Spacer = ( props ) => { return < Box flexGrow = { 1 } { ... props } />; } ; export type { IFlexProps } ; export default memo ( forwardRef ( Flex ) ) ;