How to use the @wordpress/block-editor.withColors function in @wordpress/block-editor

be.getColorClassName(undefined, 'bar');

// $ExpectType EditorColor | Pick
be.getColorObjectByAttributeValues(COLORS, 'red', '#ff0000');

// $ExpectType EditorColor | Pick
be.getColorObjectByAttributeValues(COLORS, undefined, '#ff0000');

// $ExpectType EditorColor | undefined
be.getColorObjectByColorValue(COLORS, '#ff0000');

// $ExpectType EditorColor | undefined
be.getColorObjectByColorValue(COLORS, undefined);

// $ExpectType ComponentType
be.withColors('backgroundColor', { textColor: 'color' })(() =&gt; <h1>Hello World</h1>);

//
// contrast-checker
//
;
;
;

//
// font-sizes
//

// $ExpectType Partial &amp; Pick
be.getFontSize(FONT_SIZES, 'small', 15);

// $ExpectType Partial &amp; Pick

setTextButtonColor( nextColour );
									setAttributes( { customTextButtonColor: nextColour } );
								},
								label: __( 'Text Color', 'jetpack' ),
							},
						] }
					/>
					
				
			
		);
	}
}

export default compose( [
	withColors( 'backgroundButtonColor', { textButtonColor: 'color' } ),
	applyFallbackStyles,
] )( SubmitButton );

/**
 * WordPress dependencies
 */
import { withColors } from '@wordpress/block-editor';

/**
 * Generate block colors.
 */
const applyWithColors = withColors(
	'backgroundColor',
	{ textColor: 'color' },
	{ buttonColor: 'background-color' },
);

export default applyWithColors;

/**
 * WordPress dependencies
 */
import { withColors } from '@wordpress/block-editor';

/**
 * Generate block colors.
 */
const applyWithColors = withColors(
	'backgroundColor',
	{ textColor: 'color' },
);

export default applyWithColors;

/**
 * WordPress dependencies
 */
import { withColors } from '@wordpress/block-editor';

/**
 * Generate block colors.
 */
const applyWithColors = withColors(
	'backgroundColor',
	{ textColor: 'color' },
);

export default applyWithColors;

/**
 * WordPress dependencies
 */
import { withColors } from '@wordpress/block-editor';

/**
 * Generate block colors.
 */
const applyWithColors = withColors(
	'backgroundColor',
	{ textColor: 'color' },
);

export default applyWithColors;

/**
 * WordPress dependencies
 */
import { withColors } from '@wordpress/block-editor';

/**
 * Generate block colors.
 */
const applyWithColors = withColors(
	'backgroundColor',
	{ color: 'color' },
);

export default applyWithColors;

/**
 * WordPress dependencies
 */
import { withColors } from '@wordpress/block-editor';

/**
 * Generate block colors.
 */
const applyWithColors = withColors(
	'backgroundColor',
);

export default applyWithColors;

}
}

const applyWithSelect = withSelect( () => {
	const selectedClientId = select( 'core/block-editor' ).getBlockSelectionStart();
	const parentClientId = select( 'core/block-editor' ).getBlockRootClientId(
		selectedClientId
	);

	return {
		selectedParentClientId: parentClientId,
	};
} );

export default compose( [
	withColors( 'backgroundColor', { textColor: 'color' } ),
	withFontSizes( 'fontSize' ),
	applyWithSelect,
] )( AuthorEdit );

/**
 * WordPress dependencies
 */
import { withColors } from '@wordpress/block-editor';

/**
 * Generate block colors.
 */
const applyWithColors = withColors(
	'backgroundColor',
	{ textColor: 'color' },
	'blockBackgroundColor',
);

export default applyWithColors;