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

//
// colors
//

// $ExpectType ComponentType
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
//

//

// $ExpectType ComponentType
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
//
;
;
;

figureClass = getColorClassName( 'background-color', mainColor );
		if ( ! figureClass ) {
			figureStyles = {
				backgroundColor: customMainColor,
			};
		}
		// Is normal style and a custom color is being used ( we can set a style directly with its value)
	} else if ( customMainColor ) {
		figureStyles = {
			borderColor: customMainColor,
		};
		// Is normal style and a named color is being used, we need to retrieve the color value to set the style,
		// as there is no expectation that themes create classes that set border colors.
	} else if ( mainColor ) {
		const colors = get( select( 'core/block-editor' ).getSettings(), [ 'colors' ], [] );
		const colorObject = getColorObjectByAttributeValues( colors, mainColor );
		figureStyles = {
			borderColor: colorObject.color,
		};
	}

	const blockquoteTextColorClass = getColorClassName( 'color', textColor );
	const blockquoteClasses = textColor || customTextColor ? classnames( 'has-text-color', {
		[ blockquoteTextColorClass ]: blockquoteTextColorClass,
	} ) : undefined;
	const blockquoteStyle = blockquoteTextColorClass ? undefined : { color: customTextColor };
	return (
		<figure style="{">
			<blockquote style="{">
				
				{ ! RichText.isEmpty( citation ) &amp;&amp;  }
			</blockquote></figure>

figureClass = getColorClassName( 'background-color', mainColor );
		if ( ! figureClass ) {
			figureStyles = {
				backgroundColor: customMainColor,
			};
		}
		// Is normal style and a custom color is being used ( we can set a style directly with its value)
	} else if ( customMainColor ) {
		figureStyles = {
			borderColor: customMainColor,
		};
		// Is normal style and a named color is being used, we need to retrieve the color value to set the style,
		// as there is no expectation that themes create classes that set border colors.
	} else if ( mainColor ) {
		const colors = get( select( 'core/block-editor' ).getSettings(), [ 'colors' ], [] );
		const colorObject = getColorObjectByAttributeValues( colors, mainColor );
		figureStyles = {
			borderColor: colorObject.color,
		};
	}

	const blockquoteTextColorClass = getColorClassName( 'color', textColor );
	const blockquoteClasses = textColor || customTextColor ? classnames( 'has-text-color', {
		[ blockquoteTextColorClass ]: blockquoteTextColorClass,
	} ) : undefined;
	const blockquoteStyle = blockquoteTextColorClass ? undefined : { color: customTextColor };
	return (
		<figure style="{">
			<blockquote style="{">
				
				{ ! RichText.isEmpty( citation ) &amp;&amp;  }
			</blockquote></figure>

figureClass = getColorClassName( 'background-color', mainColor );
				if ( ! figureClass ) {
					figureStyles = {
						backgroundColor: customMainColor,
					};
				}
				// Is normal style and a custom color is being used ( we can set a style directly with its value)
			} else if ( customMainColor ) {
				figureStyles = {
					borderColor: customMainColor,
				};
				// Is normal style and a named color is being used, we need to retrieve the color value to set the style,
				// as there is no expectation that themes create classes that set border colors.
			} else if ( mainColor ) {
				const colors = get( select( 'core/block-editor' ).getSettings(), [ 'colors' ], [] );
				const colorObject = getColorObjectByAttributeValues( colors, mainColor );
				figureStyles = {
					borderColor: colorObject.color,
				};
			}

			const blockquoteTextColorClass = getColorClassName( 'color', textColor );
			const blockquoteClasses = textColor || customTextColor ? classnames( 'has-text-color', {
				[ blockquoteTextColorClass ]: blockquoteTextColorClass,
			} ) : undefined;
			const blockquoteStyle = blockquoteTextColorClass ? undefined : { color: customTextColor };
			return (
				<figure style="{">
					<blockquote style="{">
						
						{ ! RichText.isEmpty( citation ) &amp;&amp;  }
					</blockquote></figure>

let activeColor;

		const isDisableCustomColors = get( select( 'core/block-editor' ).getSettings(), [ 'disableCustomColors' ], false );
		const colors = get( select( 'core/block-editor' ).getSettings(), [ 'colors' ], [] );
		const activeColorFormat = getActiveFormat( value, name );

		if ( activeColorFormat ) {
			const styleColor = activeColorFormat.attributes.style;
			if ( styleColor ) {
				activeColor = styleColor.replace( new RegExp( `^color:\\s*` ), '' );
			} else {
				const currentClass = activeColorFormat.attributes.class;
				if ( currentClass ) {
					const colorSlug = currentClass.replace( /.*has-(.*?)-color.*/, '$1' );
					activeColor = getColorObjectByAttributeValues( colors, colorSlug ).color;
				}
			}
		}

		return (