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

be.getColorClassName('foo', 'bar');

// $ExpectType string | undefined
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.createCustomColorsHOC(COLORS)('backgroundColor', 'borderColor')(() =&gt; <h1>Hello World</h1>);

// $ExpectType string
be.getColorClassName('foo', 'bar');

// $ExpectType string | undefined
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

export const getBackgroundColorWithOpacity = ( colors, backgroundColor, customBackgroundColor, opacity = undefined ) => {
	// Order: 1. Existing colors as set by the theme. 2. Custom color objects. 3. Custom background color.
	const colorObject = backgroundColor ?
		( getColorObjectByColorValue( colors, backgroundColor.color ) || getColorObjectByAttributeValues( colors, backgroundColor.slug, backgroundColor.color || customBackgroundColor ) ) :
		{ color: customBackgroundColor };

	if ( colorObject && colorObject.color ) {
		const [ r, g, b, a ] = getRgbaFromHex( colorObject.color, opacity );

		return `rgba(${ r }, ${ g }, ${ b }, ${ a })`;
	}

	return undefined;
};

onChange={ value => {
					// Allow the selected color to be overridden.
					const colorObject = getColorObjectByColorValue( colors, value )
					onChange( applyFilters( 'stackable.color-palette-control.change', value, colorObject ) )
				} }
				{ ... { colors, disableCustomColors } }

onChange={ ( color ) => {
						if ( color ) {
							const colorObject = getColorObjectByColorValue( colors, color );
							onChange(
								applyFormat( value, {
									type: name,
									attributes: colorObject ? {
										class: getColorClassName( 'color', colorObject.slug ),
									} : {
										style: `color:${ color }`,
									},
								} )
							);
						} else {
							onChange( removeFormat( value, name ) );
						}
					} }
				>

const ColorPaletteControl = props => {
	const {
		disableCustomColors,
		label,
		onChange,
		value,
		className = '',
	} = props

	const colors = props.colors.map( color => {
		return {
			...color,
			name: color.name || color.fallback || color.color || __( 'Untitled Color', i18n ),
		}
	} )
	const colorObject = getColorObjectByColorValue( colors, value )
	const colorName = colorObject && colorObject.name
	const ariaLabel = sprintf( colorIndicatorAriaLabel, label.toLowerCase(), colorName || value )

	const labelElement = (
		
			{ label }
			{ value && (
				
			) }
		
	)

	return (