ColorPalette: Custom color picker is wrong positioned

[mmtr]

Describe the bug
When rendering a ColorPalette component outside Gutenberg, the custom color picker is wrong positioned.

To Reproduce
Execute the code below in a new React project after installing @wordpress/components and @wordpress/compose.

import React from 'react';
import ReactDOM from 'react-dom';
import { ColorPalette } from '@wordpress/components';
import { withState } from '@wordpress/compose';

import '@wordpress/components/build-style/styles.css';

const MyColorPalette = withState( {
	color: '#f00',
} )( ( { color, setState } ) => { 
	const colors = [ 
		{ name: 'red', color: '#f00' }, 
		{ name: 'white', color: '#fff' }, 
		{ name: 'blue', color: '#00f' }, 
	];
	
	return ( 
		<ColorPalette 
			colors={ colors } 
			value={ color }
			onChange={ ( color ) => setState( { color } ) } 
		/>
	) 
} );

ReactDOM.render(
	<MyColorPalette />,
	document.getElementById( 'root' )
);

Expected behavior
The custom color picker should be displayed below the custom color icon.

Screenshots

Desktop:

• OS: macOS High Sierra
• Browser Chrome
• Version 67

Additional context
Issue found while working on #8338 and Automattic/wp-calypso#26367

[mtias]

Closing as duplicate of #8559.