@wordpress/block-library 6.0.1 → 6.0.5

package/src/cover/edit.js

@@ -38,7 +38,7 @@ import {
 	ColorPalette,
 	useBlockProps,
 	useSetting,
-	__experimentalUseInnerBlocksProps as useInnerBlocksProps,
+	useInnerBlocksProps,
 	__experimentalUseGradient,
 	__experimentalPanelColorGradientSettings as PanelColorGradientSettings,
 	__experimentalUnitControl as UnitControl,
@@ -116,7 +116,7 @@ function CoverHeightInput( {
 	const handleOnChange = ( unprocessedValue ) => {
 		const inputValue =
 			unprocessedValue !== ''
-				? parseInt( unprocessedValue, 10 )
+				? parseFloat( unprocessedValue )
 				: undefined;
 
 		if ( isNaN( inputValue ) && inputValue !== undefined ) {
@@ -148,7 +148,6 @@ function CoverHeightInput( {
 				onBlur={ handleOnBlur }
 				onChange={ handleOnChange }
 				onUnitChange={ onUnitChange }
-				step="1"
 				style={ { maxWidth: 80 } }
 				unit={ unit }
 				units={ units }
@@ -198,7 +197,6 @@ function ResizableCover( {
 				onResizeStop( elt.clientHeight );
 				setIsResizing( false );
 			} }
-			minHeight={ COVER_MIN_HEIGHT }
 			{ ...props }
 		/>
 	);
@@ -274,6 +272,7 @@ function CoverPlaceholder( {
 	noticeUI,
 	noticeOperations,
 	onSelectMedia,
+	style,
 } ) {
 	const { removeAllNotices, createErrorNotice } = noticeOperations;
 	return (
@@ -282,7 +281,7 @@ function CoverPlaceholder( {
 			labels={ {
 				title: __( 'Cover' ),
 				instructions: __(
-					'Upload an image or video file, or pick one from your media library.'
+					'Drag and drop onto this block, upload, or select existing media from your library.'
 				),
 			} }
 			onSelect={ onSelectMedia }
@@ -294,6 +293,7 @@ function CoverPlaceholder( {
 				removeAllNotices();
 				createErrorNotice( message );
 			} }
+			style={ style }
 		>
 			{ children }
 		</MediaPlaceholder>
@@ -318,19 +318,22 @@ function CoverEdit( {
 		dimRatio,
 		focalPoint,
 		hasParallax,
+		isDark,
 		isRepeated,
 		minHeight,
 		minHeightUnit,
 		style: styleAttribute,
 		url,
 		alt,
+		allowedBlocks,
+		templateLock,
 	} = attributes;
 	const {
 		gradientClass,
 		gradientValue,
 		setGradient,
 	} = __experimentalUseGradient();
-	const onSelectMedia = attributesFromMedia( setAttributes );
+	const onSelectMedia = attributesFromMedia( setAttributes, dimRatio );
 	const isUploadingMedia = isTemporaryMedia( id, url );
 
 	const [ prevMinHeightValue, setPrevMinHeightValue ] = useState( minHeight );
@@ -380,13 +383,17 @@ function CoverEdit( {
 	};
 
 	const isDarkElement = useRef();
-	const isDark = useCoverIsDark(
+	const isCoverDark = useCoverIsDark(
 		url,
 		dimRatio,
 		overlayColor.color,
 		isDarkElement
 	);
 
+	useEffect( () => {
+		setAttributes( { isDark: isCoverDark } );
+	}, [ isCoverDark ] );
+
 	const isImageBackground = IMAGE_BACKGROUND_TYPE === backgroundType;
 	const isVideoBackground = VIDEO_BACKGROUND_TYPE === backgroundType;
 
@@ -401,13 +408,11 @@ function CoverEdit( {
 	const style = {
 		...( isImageBackground && ! isImgElement
 			? backgroundImageStyles( url )
-			: {
-					backgroundImage: gradientValue ? gradientValue : undefined,
-			  } ),
-		backgroundColor: overlayColor.color,
+			: undefined ),
 		minHeight: temporaryMinHeight || minHeightWithUnit || undefined,
 	};
 
+	const bgStyle = { backgroundColor: overlayColor.color };
 	const mediaStyle = {
 		objectPosition:
 			focalPoint && isImgElement
@@ -526,7 +531,6 @@ function CoverEdit( {
 										url: undefined,
 										id: undefined,
 										backgroundType: undefined,
-										dimRatio: undefined,
 										focalPoint: undefined,
 										hasParallax: undefined,
 										isRepeated: undefined,
@@ -539,6 +543,7 @@ function CoverEdit( {
 					</PanelBody>
 				) }
 				<PanelColorGradientSettings
+					__experimentalHasMultipleOrigins
 					title={ __( 'Overlay' ) }
 					initialOpen={ true }
 					settings={ [
@@ -551,21 +556,19 @@ function CoverEdit( {
 						},
 					] }
 				>
-					{ !! url && (
-						<RangeControl
-							label={ __( 'Opacity' ) }
-							value={ dimRatio }
-							onChange={ ( newDimRation ) =>
-								setAttributes( {
-									dimRatio: newDimRation,
-								} )
-							}
-							min={ 0 }
-							max={ 100 }
-							step={ 10 }
-							required
-						/>
-					) }
+					<RangeControl
+						label={ __( 'Opacity' ) }
+						value={ dimRatio }
+						onChange={ ( newDimRation ) =>
+							setAttributes( {
+								dimRatio: newDimRation,
+							} )
+						}
+						min={ 0 }
+						max={ 100 }
+						step={ 10 }
+						required
+					/>
 				</PanelColorGradientSettings>
 			</InspectorControls>
 			<InspectorControls __experimentalGroup="dimensions">
@@ -618,6 +621,8 @@ function CoverEdit( {
 		{
 			template: innerBlocksTemplate,
 			templateInsertUpdatesSelection: true,
+			allowedBlocks,
+			templateLock,
 		}
 	);
 
@@ -636,6 +641,12 @@ function CoverEdit( {
 						noticeUI={ noticeUI }
 						onSelectMedia={ onSelectMedia }
 						noticeOperations={ noticeOperations }
+						style={ {
+							minHeight:
+								temporaryMinHeight ||
+								minHeightWithUnit ||
+								undefined,
+						} }
 					>
 						<div className="wp-block-cover__placeholder-background-options">
 							<ColorPalette
@@ -646,22 +657,32 @@ function CoverEdit( {
 							/>
 						</div>
 					</CoverPlaceholder>
+					<ResizableCover
+						className="block-library-cover__resize-container"
+						onResizeStart={ () => {
+							setAttributes( { minHeightUnit: 'px' } );
+							toggleSelection( false );
+						} }
+						onResize={ setTemporaryMinHeight }
+						onResizeStop={ ( newMinHeight ) => {
+							toggleSelection( true );
+							setAttributes( { minHeight: newMinHeight } );
+							setTemporaryMinHeight( null );
+						} }
+						showHandle={ isSelected }
+					/>
 				</div>
 			</>
 		);
 	}
 
 	const classes = classnames(
-		dimRatioToClass( dimRatio ),
 		{
 			'is-dark-theme': isDark,
-			'has-background-dim': dimRatio !== 0,
+			'is-light': ! isDark,
 			'is-transient': isUploadingMedia,
 			'has-parallax': hasParallax,
 			'is-repeated': isRepeated,
-			[ overlayColor.class ]: overlayColor.class,
-			'has-background-gradient': gradientValue,
-			[ gradientClass ]: ! url && gradientClass,
 			'has-custom-content-position': ! isContentPositionCenter(
 				contentPosition
 			),
@@ -696,16 +717,23 @@ function CoverEdit( {
 					} }
 					showHandle={ isSelected }
 				/>
-				{ url && gradientValue && dimRatio !== 0 && (
-					<span
-						aria-hidden="true"
-						className={ classnames(
-							'wp-block-cover__gradient-background',
-							gradientClass
-						) }
-						style={ { backgroundImage: gradientValue } }
-					/>
-				) }
+
+				<span
+					aria-hidden="true"
+					className={ classnames(
+						dimRatioToClass( dimRatio ),
+						{ [ overlayColor.class ]: overlayColor.class },
+						'wp-block-cover__gradient-background',
+						gradientClass,
+						{
+							'has-background-dim': dimRatio !== undefined,
+							'has-background-gradient': gradientValue,
+							[ gradientClass ]: ! url && gradientClass,
+						}
+					) }
+					style={ { backgroundImage: gradientValue, ...bgStyle } }
+				/>
+
 				{ url && isImageBackground && isImgElement && (
 					<img
 						ref={ isDarkElement }

package/src/cover/edit.native.js

@@ -101,6 +101,8 @@ const Cover = ( {
 		style,
 		customOverlayColor,
 		minHeightUnit = 'px',
+		allowedBlocks,
+		templateLock,
 	} = attributes;
 	const [ isScreenReaderEnabled, setIsScreenReaderEnabled ] = useState(
 		false
@@ -188,7 +190,7 @@ const Cover = ( {
 
 	const onSelectMedia = ( media ) => {
 		setDidUploadFail( false );
-		const onSelect = attributesFromMedia( setAttributes );
+		const onSelect = attributesFromMedia( setAttributes, dimRatio );
 		onSelect( media );
 	};
 
@@ -504,7 +506,9 @@ const Cover = ( {
 				style={ [ styles.content, { minHeight: convertedMinHeight } ] }
 			>
 				<InnerBlocks
+					allowedBlocks={ allowedBlocks }
 					template={ INNER_BLOCKS_TEMPLATE }
+					templateLock={ templateLock }
 					templateInsertUpdatesSelection
 					blockWidth={ blockWidth }
 				/>

package/src/cover/editor.scss

@@ -9,6 +9,22 @@
 	&.is-placeholder {
 		min-height: auto !important;
 		padding: 0 !important;
+
+		// Resizeable placeholder for placeholder.
+		.block-library-cover__resize-container {
+			display: none;
+		}
+		.components-placeholder {
+			&.is-large {
+				min-height: 240px;
+				justify-content: flex-start;
+				z-index: z-index(".wp-block-cover.is-placeholder .components-placeholder.is-large");
+				+ .block-library-cover__resize-container {
+					min-height: 240px;
+					display: block;
+				}
+			}
+		}
 	}
 
 	&.components-placeholder h2 {
@@ -64,6 +80,7 @@
 	left: 0;
 	right: 0;
 	bottom: 0;
+	min-height: 50px;
 }
 
 .block-library-cover__resize-container:not(.is-resizing) {
@@ -71,44 +88,9 @@
 	height: auto !important;
 }
 
-// Only target direct dropzone.
-.wp-block-cover > .components-drop-zone {
-	&.is-active {
-		transition: 0.2s opacity, 0.2s border;
-		@include reduce-motion("transition");
-	}
-
-	&.is-dragging-over-element {
-		background-color: transparent;
-		border: $grid-unit-60 solid var(--wp-admin-theme-color);
-
-		.components-drop-zone__content {
-			transform: none;
-		}
-	}
-
-	.components-drop-zone__content {
-		display: flex;
-		align-items: center;
-		top: -($grid-unit-15 * 3);
-		left: -($grid-unit-15 * 3);
-		transform: none;
-	}
-
-	.components-drop-zone__content-icon,
-	.components-drop-zone__content-text {
-		display: inline;
-	}
-
-	.components-drop-zone__content-icon {
-		// Reset margin.
-		margin: 0;
-		margin-right: $grid-unit;
-	}
-
-	.components-drop-zone__content-text {
-		font-size: $default-font-size;
-	}
+// When uploading background images, show a transparent overlay.
+.wp-block-cover > .components-drop-zone .components-drop-zone__content {
+	opacity: 0.8 !important;
 }
 
 // Remove the parallax fixed background when in the patterns preview panel as it

package/src/cover/save.js

@@ -7,7 +7,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import {
-	InnerBlocks,
+	useInnerBlocksProps,
 	getColorClassName,
 	__experimentalGetGradientClass,
 	useBlockProps,
@@ -35,6 +35,7 @@ export default function save( { attributes } ) {
 		dimRatio,
 		focalPoint,
 		hasParallax,
+		isDark,
 		isRepeated,
 		overlayColor,
 		url,
@@ -61,26 +62,25 @@ export default function save( { attributes } ) {
 		...( isImageBackground && ! isImgElement
 			? backgroundImageStyles( url )
 			: {} ),
-		backgroundColor: ! overlayColorClass ? customOverlayColor : undefined,
-		background: customGradient && ! url ? customGradient : undefined,
 		minHeight: minHeight || undefined,
 	};
 
+	const bgStyle = {
+		backgroundColor: ! overlayColorClass ? customOverlayColor : undefined,
+		background: customGradient ? customGradient : undefined,
+	};
+
 	const objectPosition =
 		// prettier-ignore
 		focalPoint && isImgElement
-			? `${ Math.round( focalPoint.x * 100 ) }% ${ Math.round( focalPoint.y * 100 ) }%`
-			: undefined;
+			 ? `${ Math.round( focalPoint.x * 100 ) }% ${ Math.round( focalPoint.y * 100 ) }%`
+			 : undefined;
 
 	const classes = classnames(
-		dimRatioToClass( dimRatio ),
-		overlayColorClass,
 		{
-			'has-background-dim': dimRatio !== 0,
+			'is-light': ! isDark,
 			'has-parallax': hasParallax,
 			'is-repeated': isRepeated,
-			'has-background-gradient': gradient || customGradient,
-			[ gradientClass ]: ! url && gradientClass,
 			'has-custom-content-position': ! isContentPositionCenter(
 				contentPosition
 			),
@@ -90,20 +90,22 @@ export default function save( { attributes } ) {
 
 	return (
 		<div { ...useBlockProps.save( { className: classes, style } ) }>
-			{ url && ( gradient || customGradient ) && dimRatio !== 0 && (
-				<span
-					aria-hidden="true"
-					className={ classnames(
-						'wp-block-cover__gradient-background',
-						gradientClass
-					) }
-					style={
-						customGradient
-							? { background: customGradient }
-							: undefined
+			<span
+				aria-hidden="true"
+				className={ classnames(
+					overlayColorClass,
+					dimRatioToClass( dimRatio ),
+					'wp-block-cover__gradient-background',
+					gradientClass,
+					{
+						'has-background-dim': dimRatio !== undefined,
+						'has-background-gradient': gradient || customGradient,
+						[ gradientClass ]: ! url && gradientClass,
 					}
-				/>
-			) }
+				) }
+				style={ bgStyle }
+			/>
+
 			{ isImageBackground && isImgElement && url && (
 				<img
 					className={ classnames(
@@ -133,9 +135,11 @@ export default function save( { attributes } ) {
 					data-object-position={ objectPosition }
 				/>
 			) }
-			<div className="wp-block-cover__inner-container">
-				<InnerBlocks.Content />
-			</div>
+			<div
+				{ ...useInnerBlocksProps.save( {
+					className: 'wp-block-cover__inner-container',
+				} ) }
+			/>
 		</div>
 	);
 }

package/src/cover/shared.js

@@ -27,12 +27,12 @@ export function backgroundImageStyles( url ) {
 export const ALLOWED_MEDIA_TYPES = [ 'image', 'video' ];
 
 export function dimRatioToClass( ratio ) {
-	return ratio === 0 || ratio === 50 || ! ratio
+	return ratio === 50 || ! ratio === undefined
 		? null
 		: 'has-background-dim-' + 10 * Math.round( ratio / 10 );
 }
 
-export function attributesFromMedia( setAttributes ) {
+export function attributesFromMedia( setAttributes, dimRatio ) {
 	return ( media ) => {
 		if ( ! media || ! media.url ) {
 			setAttributes( { url: undefined, id: undefined } );
@@ -65,6 +65,7 @@ export function attributesFromMedia( setAttributes ) {
 		}
 
 		setAttributes( {
+			dimRatio: dimRatio === 100 ? 50 : dimRatio,
 			url: media.url,
 			id: media.id,
 			alt: media?.alt,

package/src/cover/style.scss

@@ -63,13 +63,9 @@
 		opacity: 0.5;
 	}
 
-
-	@for $i from 1 through 10 {
-		&.has-background-dim.has-background-dim-#{ $i * 10 } {
-			&:not(.has-background-gradient)::before,
-			.wp-block-cover__gradient-background {
-				opacity: $i * 0.1;
-			}
+	@for $i from 0 through 10 {
+		.wp-block-cover__gradient-background.has-background-dim.has-background-dim-#{ $i * 10 } {
+			opacity: $i * 0.1;
 		}
 	}
 
@@ -107,6 +103,12 @@
 		color: $white;
 	}
 
+	&.is-light {
+		.wp-block-cover__inner-container {
+			color: $black;
+		}
+	}
+
 	p,
 	h1,
 	h2,

package/src/editor.scss

@@ -23,7 +23,6 @@
 @import "./page-list/editor.scss";
 @import "./paragraph/editor.scss";
 @import "./post-excerpt/editor.scss";
-@import "./post-author/editor.scss";
 @import "./pullquote/editor.scss";
 @import "./rss/editor.scss";
 @import "./search/editor.scss";
@@ -39,13 +38,11 @@
 @import "./template-part/editor.scss";
 @import "./text-columns/editor.scss";
 @import "./video/editor.scss";
-@import "./query-title/editor.scss";
 @import "./post-template/editor.scss";
 @import "./query/editor.scss";
 @import "./query-pagination/editor.scss";
 @import "./query-pagination-numbers/editor.scss";
 @import "./post-featured-image/editor.scss";
-@import "./term-description/editor.scss";
 
 :root .editor-styles-wrapper {
 	@include background-colors-deprecated();
@@ -53,28 +50,15 @@
 	@include gradient-colors-deprecated();
 }
 
-// Font sizes.
+// Font sizes (not used now, kept because of backward compatibility).
+//
 // The reason we add the editor class wrapper here is
 // to avoid enqueing the classes twice: here and in ./editor.scss
-.editor-styles-wrapper .has-small-font-size {
-	font-size: 13px;
-}
-
-.editor-styles-wrapper .has-regular-font-size, // Not used now, kept because of backward compatibility.
-.editor-styles-wrapper .has-normal-font-size {
+.editor-styles-wrapper .has-regular-font-size {
 	font-size: 16px;
 }
 
-.editor-styles-wrapper .has-medium-font-size {
-	font-size: 20px;
-}
-
-.editor-styles-wrapper .has-large-font-size {
-	font-size: 36px;
-}
-
-.editor-styles-wrapper .has-larger-font-size, // Not used now, kept because of backward compatibility.
-.editor-styles-wrapper .has-huge-font-size {
+.editor-styles-wrapper .has-larger-font-size {
 	font-size: 42px;
 }
 

package/src/embed/edit.native.js

@@ -86,8 +86,8 @@ const EmbedEdit = ( props ) => {
 		( select ) => {
 			const {
 				getEmbedPreview,
+				hasFinishedResolution,
 				isPreviewEmbedFallback,
-				isRequestingEmbedPreview,
 				getThemeSupports,
 			} = select( coreStore );
 			if ( ! url ) {
@@ -95,6 +95,10 @@ const EmbedEdit = ( props ) => {
 			}
 
 			const embedPreview = getEmbedPreview( url );
+			const hasResolvedEmbedPreview = hasFinishedResolution(
+				'getEmbedPreview',
+				[ url ]
+			);
 			const previewIsFallback = isPreviewEmbedFallback( url );
 
 			// The external oEmbed provider does not exist. We got no type info and no html.
@@ -108,16 +112,9 @@ const EmbedEdit = ( props ) => {
 			const validPreview =
 				!! embedPreview && ! badEmbedProvider && ! wordpressCantEmbed;
 
-			// `isRequestingEmbedPreview` is returning false just before an
-			// `apiFetch` is triggered. We're assuming that a fetch is happening
-			// if there is an `attributesUrl` set but there is no data in
-			// `embedPreview` which represents the response returned from the API.
-			const isFetching =
-				isRequestingEmbedPreview( url ) || ( url && ! embedPreview );
-
 			return {
 				preview: validPreview ? embedPreview : undefined,
-				fetching: isFetching,
+				fetching: ! hasResolvedEmbedPreview,
 				themeSupportsResponsive: getThemeSupports()[
 					'responsive-embeds'
 				],

package/src/embed/embed-bottom-sheet.native.js

@@ -48,12 +48,10 @@ const EmbedBottomSheet = ( { value, label, isVisible, onClose, onSubmit } ) => {
 					__( 'Invalid URL. Please enter a valid URL.' )
 				);
 				// If the URL was already defined, we submit it to stop showing the embed placeholder.
-				if ( value !== '' ) {
-					onSubmit( value );
-				}
+				onSubmit( value );
 			}
-		} else if ( value !== '' ) {
-			// Resets the URL when new value is empty and URL was already defined.
+		} else {
+			// Resets the URL when new value is empty
 			onSubmit( '' );
 		}
 	}, [ url, onSubmit, value ] );
@@ -70,6 +68,7 @@ const EmbedBottomSheet = ( { value, label, isVisible, onClose, onSubmit } ) => {
 			onDismiss={ onDismiss }
 			setAttributes={ setAttributes }
 			options={ linkSettingsOptions }
+			testID="embed-edit-url-modal"
 			withBottomSheet
 			showIcon
 		/>

package/src/embed/embed-no-preview.native.js

@@ -163,6 +163,7 @@ const EmbedNoPreview = ( {
 				hideHeader
 				onDismiss={ onDismissSheet }
 				onClose={ onCloseSheet }
+				testID="embed-no-preview-modal"
 			>
 				<View style={ styles[ 'embed-no-preview__container' ] }>
 					<View style={ sheetIconStyle }>

package/src/embed/icons.js

@@ -142,3 +142,14 @@ export const embedDailymotionIcon = (
 		/>
 	</SVG>
 );
+export const embedPinterestIcon = (
+	<SVG width="24" height="24" viewBox="0 0 24 24" version="1.1">
+		<Path d="M12.289,2C6.617,2,3.606,5.648,3.606,9.622c0,1.846,1.025,4.146,2.666,4.878c0.25,0.111,0.381,0.063,0.439-0.169 c0.044-0.175,0.267-1.029,0.365-1.428c0.032-0.128,0.017-0.237-0.091-0.362C6.445,11.911,6.01,10.75,6.01,9.668 c0-2.777,2.194-5.464,5.933-5.464c3.23,0,5.49,2.108,5.49,5.122c0,3.407-1.794,5.768-4.13,5.768c-1.291,0-2.257-1.021-1.948-2.277 c0.372-1.495,1.089-3.112,1.089-4.191c0-0.967-0.542-1.775-1.663-1.775c-1.319,0-2.379,1.309-2.379,3.059 c0,1.115,0.394,1.869,0.394,1.869s-1.302,5.279-1.54,6.261c-0.405,1.666,0.053,4.368,0.094,4.604 c0.021,0.126,0.167,0.169,0.25,0.063c0.129-0.165,1.699-2.419,2.142-4.051c0.158-0.59,0.817-2.995,0.817-2.995 c0.43,0.784,1.681,1.446,3.013,1.446c3.963,0,6.822-3.494,6.822-7.833C20.394,5.112,16.849,2,12.289,2" />
+	</SVG>
+);
+
+export const embedWolframIcon = (
+	<SVG viewBox="0 0 44 44">
+		<Path d="M32.59521,22.001l4.31885-4.84473-6.34131-1.38379.646-6.459-5.94336,2.61035L22,6.31934l-3.27344,5.60351L12.78418,9.3125l.645,6.458L7.08643,17.15234,11.40479,21.999,7.08594,26.84375l6.34131,1.38379-.64551,6.458,5.94287-2.60938L22,37.68066l3.27344-5.60351,5.94287,2.61035-.64551-6.458,6.34277-1.38183Zm.44385,2.75244L30.772,23.97827l-1.59558-2.07391,1.97888.735Zm-8.82147,6.1579L22.75,33.424V30.88977l1.52228-2.22168ZM18.56226,13.48816,19.819,15.09534l-2.49219-.88642L15.94037,12.337Zm6.87719.00116,2.62043-1.15027-1.38654,1.86981L24.183,15.0946Zm3.59357,2.6029-1.22546,1.7381.07525-2.73486,1.44507-1.94867ZM22,29.33008l-2.16406-3.15686L22,23.23688l2.16406,2.93634Zm-4.25458-9.582-.10528-3.836,3.60986,1.284v3.73242Zm5.00458-2.552,3.60986-1.284-.10528,3.836L22.75,20.92853Zm-7.78174-1.10559-.29352-2.94263,1.44245,1.94739.07519,2.73321Zm2.30982,5.08319,3.50817,1.18164-2.16247,2.9342-3.678-1.08447Zm2.4486,7.49285L21.25,30.88977v2.53485L19.78052,30.91Zm3.48707-6.31121,3.50817-1.18164,2.33228,3.03137-3.678,1.08447Zm10.87219-4.28113-2.714,3.04529L28.16418,19.928l1.92176-2.72565ZM24.06036,12.81769l-2.06012,2.6322-2.059-2.63318L22,9.292ZM9.91455,18.07227l4.00079-.87195,1.921,2.72735-3.20794,1.19019Zm2.93024,4.565,1.9801-.73462L13.228,23.97827l-2.26838.77429Zm-1.55591,3.58819L13.701,25.4021l2.64935.78058-2.14447.67853Zm3.64868,1.977L18.19,27.17334l.08313,3.46332L14.52979,32.2793Zm10.7876,2.43549.08447-3.464,3.25165,1.03052.407,4.07684Zm4.06824-3.77478-2.14545-.68,2.65063-.781,2.41266.825Z" />
+	</SVG>
+);