@wordpress/block-editor 12.15.0 → 12.16.0

package/src/components/global-styles/typography-panel.js

@@ -13,6 +13,7 @@ import { useCallback } from '@wordpress/element';
 /**
  * Internal dependencies
  */
+import { mergeOrigins, hasMergedOrigins } from '../use-settings';
 import FontFamilyControl from '../font-family';
 import FontAppearanceControl from '../font-appearance-control';
 import LineHeightControl from '../line-height-control';
@@ -51,25 +52,14 @@ export function useHasTypographyPanel( settings ) {
 }
 
 function useHasFontSizeControl( settings ) {
-	const disableCustomFontSizes = ! settings?.typography?.customFontSize;
-	const fontSizesPerOrigin = settings?.typography?.fontSizes ?? {};
-	const fontSizes = []
-		.concat( fontSizesPerOrigin?.custom ?? [] )
-		.concat( fontSizesPerOrigin?.theme ?? [] )
-		.concat( fontSizesPerOrigin.default ?? [] );
-	return !! fontSizes?.length || ! disableCustomFontSizes;
+	return (
+		hasMergedOrigins( settings?.typography?.fontSizes ) ||
+		settings?.typography?.customFontSize
+	);
 }
 
 function useHasFontFamilyControl( settings ) {
-	const fontFamiliesPerOrigin = settings?.typography?.fontFamilies;
-	const fontFamilies = []
-		.concat( fontFamiliesPerOrigin?.custom ?? [] )
-		.concat( fontFamiliesPerOrigin?.theme ?? [] )
-		.concat( fontFamiliesPerOrigin?.default ?? [] )
-		.sort( ( a, b ) =>
-			( a?.name || a?.slug )?.localeCompare( b?.name || a?.slug )
-		);
-	return !! fontFamilies?.length;
+	return hasMergedOrigins( settings?.typography?.fontFamilies );
 }
 
 function useHasLineHeightControl( settings ) {
@@ -77,18 +67,14 @@ function useHasLineHeightControl( settings ) {
 }
 
 function useHasAppearanceControl( settings ) {
-	const hasFontStyles = settings?.typography?.fontStyle;
-	const hasFontWeights = settings?.typography?.fontWeight;
-	return hasFontStyles || hasFontWeights;
+	return settings?.typography?.fontStyle || settings?.typography?.fontWeight;
 }
 
 function useAppearanceControlLabel( settings ) {
-	const hasFontStyles = settings?.typography?.fontStyle;
-	const hasFontWeights = settings?.typography?.fontWeight;
-	if ( ! hasFontStyles ) {
+	if ( ! settings?.typography?.fontStyle ) {
 		return __( 'Font weight' );
 	}
-	if ( ! hasFontWeights ) {
+	if ( ! settings?.typography?.fontWeight ) {
 		return __( 'Font style' );
 	}
 	return __( 'Appearance' );
@@ -115,18 +101,15 @@ function useHasTextColumnsControl( settings ) {
 }
 
 function getUniqueFontSizesBySlug( settings ) {
-	const fontSizesPerOrigin = settings?.typography?.fontSizes ?? {};
-	const fontSizes = []
-		.concat( fontSizesPerOrigin?.custom ?? [] )
-		.concat( fontSizesPerOrigin?.theme ?? [] )
-		.concat( fontSizesPerOrigin.default ?? [] );
-
-	return fontSizes.reduce( ( acc, currentSize ) => {
-		if ( ! acc.some( ( { slug } ) => slug === currentSize.slug ) ) {
-			acc.push( currentSize );
+	const fontSizes = settings?.typography?.fontSizes;
+	const mergedFontSizes = fontSizes ? mergeOrigins( fontSizes ) : [];
+	const uniqueSizes = [];
+	for ( const currentSize of mergedFontSizes ) {
+		if ( ! uniqueSizes.some( ( { slug } ) => slug === currentSize.slug ) ) {
+			uniqueSizes.push( currentSize );
 		}
-		return acc;
-	}, [] );
+	}
+	return uniqueSizes;
 }
 
 function TypographyToolsPanel( {
@@ -178,14 +161,11 @@ export default function TypographyPanel( {
 
 	// Font Family
 	const hasFontFamilyEnabled = useHasFontFamilyControl( settings );
-	const fontFamiliesPerOrigin = settings?.typography?.fontFamilies;
-	const fontFamilies = []
-		.concat( fontFamiliesPerOrigin?.custom ?? [] )
-		.concat( fontFamiliesPerOrigin?.theme ?? [] )
-		.concat( fontFamiliesPerOrigin?.default ?? [] );
+	const fontFamilies = settings?.typography?.fontFamilies;
+	const mergedFontFamilies = fontFamilies ? mergeOrigins( fontFamilies ) : [];
 	const fontFamily = decodeValue( inheritedValue?.typography?.fontFamily );
 	const setFontFamily = ( newValue ) => {
-		const slug = fontFamilies?.find(
+		const slug = mergedFontFamilies?.find(
 			( { fontFamily: f } ) => f === newValue
 		)?.slug;
 		onChange(
@@ -204,7 +184,7 @@ export default function TypographyPanel( {
 	// Font Size
 	const hasFontSizeEnabled = useHasFontSizeControl( settings );
 	const disableCustomFontSizes = ! settings?.typography?.customFontSize;
-	const fontSizes = getUniqueFontSizesBySlug( settings );
+	const mergedFontSizes = getUniqueFontSizesBySlug( settings );
 
 	const fontSize = decodeValue( inheritedValue?.typography?.fontSize );
 	const setFontSize = ( newValue, metadata ) => {
@@ -368,7 +348,7 @@ export default function TypographyPanel( {
 					panelId={ panelId }
 				>
 					<FontFamilyControl
-						fontFamilies={ fontFamilies }
+						fontFamilies={ mergedFontFamilies }
 						value={ fontFamily }
 						onChange={ setFontFamily }
 						size="__unstable-large"
@@ -387,7 +367,7 @@ export default function TypographyPanel( {
 					<FontSizePicker
 						value={ fontSize }
 						onChange={ setFontSize }
-						fontSizes={ fontSizes }
+						fontSizes={ mergedFontSizes }
 						disableCustomFontSizes={ disableCustomFontSizes }
 						withReset={ false }
 						withSlider

package/src/components/image-link-destinations/index.native.js

@@ -0,0 +1,152 @@
+/**
+ * External dependencies
+ */
+import { useNavigation, useRoute } from '@react-navigation/native';
+import { StyleSheet } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Icon, check, chevronRight } from '@wordpress/icons';
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
+import { BottomSheet, PanelBody } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import styles from './style.native.scss';
+import { blockSettingsScreens } from '../block-settings';
+
+const LINK_DESTINATION_NONE = 'none';
+const LINK_DESTINATION_MEDIA = 'media';
+const LINK_DESTINATION_ATTACHMENT = 'attachment';
+const LINK_DESTINATION_CUSTOM = 'custom';
+
+function LinkDestination( {
+	children,
+	isSelected,
+	label,
+	onPress,
+	value,
+	valueStyle,
+} ) {
+	const optionIcon = usePreferredColorSchemeStyle(
+		styles.optionIcon,
+		styles.optionIconDark
+	);
+
+	return (
+		<BottomSheet.Cell
+			icon={ check }
+			iconStyle={ StyleSheet.flatten( [
+				optionIcon,
+				! isSelected && styles.unselectedOptionIcon,
+			] ) }
+			label={ label }
+			leftAlign
+			onPress={ onPress }
+			value={ value }
+			valueStyle={ valueStyle }
+			separatorType="leftMargin"
+		>
+			{ children }
+		</BottomSheet.Cell>
+	);
+}
+
+function ImageLinkDestinationsScreen( props ) {
+	const navigation = useNavigation();
+	const route = useRoute();
+	const { url = '' } = props;
+	const {
+		inputValue = url,
+		imageUrl,
+		attachmentPageUrl,
+		linkDestination,
+	} = route.params || {};
+
+	function goToLinkPicker() {
+		navigation.navigate( blockSettingsScreens.linkPicker, {
+			inputValue:
+				linkDestination === LINK_DESTINATION_CUSTOM ? inputValue : '',
+		} );
+	}
+
+	const setLinkDestination = ( newLinkDestination ) => () => {
+		let newUrl;
+		switch ( newLinkDestination ) {
+			case LINK_DESTINATION_MEDIA:
+				newUrl = imageUrl;
+				break;
+			case LINK_DESTINATION_ATTACHMENT:
+				newUrl = attachmentPageUrl;
+				break;
+			default:
+				newUrl = '';
+				break;
+		}
+
+		navigation.navigate( blockSettingsScreens.settings, {
+			// The `inputValue` name is reused from LinkPicker, as it helps avoid
+			// bugs from stale values remaining in the React Navigation route
+			// parameters.
+			inputValue: newUrl,
+			// Clear link text value that may be set from LinkPicker.
+			text: '',
+		} );
+	};
+
+	return (
+		<>
+			<BottomSheet.NavBar>
+				<BottomSheet.NavBar.BackButton onPress={ navigation.goBack } />
+				<BottomSheet.NavBar.Heading>
+					{ __( 'Link To' ) }
+				</BottomSheet.NavBar.Heading>
+			</BottomSheet.NavBar>
+			<PanelBody>
+				<LinkDestination
+					isSelected={ linkDestination === LINK_DESTINATION_NONE }
+					label={ __( 'None' ) }
+					onPress={ setLinkDestination( LINK_DESTINATION_NONE ) }
+				/>
+				<LinkDestination
+					isSelected={ linkDestination === LINK_DESTINATION_MEDIA }
+					label={ __( 'Media File' ) }
+					onPress={ setLinkDestination( LINK_DESTINATION_MEDIA ) }
+				/>
+				{ !! attachmentPageUrl && (
+					<LinkDestination
+						isSelected={
+							linkDestination === LINK_DESTINATION_ATTACHMENT
+						}
+						label={ __( 'Attachment Page' ) }
+						onPress={ setLinkDestination(
+							LINK_DESTINATION_ATTACHMENT
+						) }
+					/>
+				) }
+				<LinkDestination
+					isSelected={ linkDestination === LINK_DESTINATION_CUSTOM }
+					label={ __( 'Custom URL' ) }
+					onPress={ goToLinkPicker }
+					value={
+						linkDestination === LINK_DESTINATION_CUSTOM
+							? inputValue
+							: ''
+					}
+					valueStyle={
+						linkDestination === LINK_DESTINATION_CUSTOM
+							? undefined
+							: styles.placeholderTextColor
+					}
+				>
+					<Icon icon={ chevronRight }></Icon>
+				</LinkDestination>
+			</PanelBody>
+		</>
+	);
+}
+
+export default ImageLinkDestinationsScreen;

package/src/components/image-link-destinations/style.native.scss

@@ -0,0 +1,16 @@
+// used in both light and dark modes
+.placeholderTextColor {
+	color: #87a6bc;
+}
+
+.optionIcon {
+	color: $blue-50;
+}
+
+.optionIconDark {
+	color: $blue-30;
+}
+
+.unselectedOptionIcon {
+	opacity: 0;
+}

package/src/components/index.native.js

@@ -90,6 +90,7 @@ export { default as BlockStyles } from './block-styles';
 export { default as DefaultBlockAppender } from './default-block-appender';
 export { default as __unstableEditorStyles } from './editor-styles';
 export { default as Inserter } from './inserter';
+export { default as InserterButton } from './inserter-button';
 export { useBlockProps } from './block-list/use-block-props';
 export { default as FloatingToolbar } from './floating-toolbar';
 

package/src/components/inner-blocks/README.md

@@ -188,8 +188,19 @@ For example, a button block, deeply nested in several levels of block `X` that u
 
 ### `defaultBlock`
 
-- **Type:** `Array`
-- **Default:** - `undefined`. Determines which block type should be inserted by default and any attributes that should be set by default when the block is inserted. Takes an array in the form of `[ blockname, {blockAttributes} ]`.
+- **Type:** `Object`
+- **Default:** - `undefined`
+
+Determines which block type should be inserted by default and any attributes that should be set by default when the block is inserted. Takes an object in the form of `{ name: blockname, attributes: {blockAttributes} }`.
+
+```jsx
+const DEFAULT_BLOCK = { name: 'core/paragraph', attributes: { content: 'Lorem ipsum...' } };
+...
+<InnerBlocks
+    defaultBlock={ DEFAULT_BLOCK }
+    directInsert={ true }
+/>
+```
 
 ### `directInsert`
 

package/src/components/inserter/media-tab/media-panel.js

@@ -5,12 +5,12 @@ import { useRef, useEffect } from '@wordpress/element';
 import { Spinner, SearchControl } from '@wordpress/components';
 import { focus } from '@wordpress/dom';
 import { __ } from '@wordpress/i18n';
+import { useDebouncedInput } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import MediaList from './media-list';
-import useDebouncedInput from '../hooks/use-debounced-input';
 import { useMediaResults } from './hooks';
 import InserterNoResults from '../no-results';
 

package/src/components/inserter/menu.js

@@ -14,13 +14,15 @@ import {
 	useImperativeHandle,
 	useRef,
 } from '@wordpress/element';
-import { VisuallyHidden, SearchControl } from '@wordpress/components';
+import { VisuallyHidden, SearchControl, Popover } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
+import { useDebouncedInput } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
+import { unlock } from '../../lock-unlock';
 import Tips from './tips';
 import InserterPreviewPanel from './preview-panel';
 import BlockTypesTab from './block-types-tab';
@@ -28,7 +30,6 @@ import BlockPatternsTab from './block-patterns-tab';
 import { PatternCategoryPreviewPanel } from './block-patterns-tab/pattern-category-preview-panel';
 import { MediaTab, MediaCategoryDialog, useMediaCategories } from './media-tab';
 import InserterSearchResults from './search-results';
-import useDebouncedInput from './hooks/use-debounced-input';
 import useInsertionPoint from './hooks/use-insertion-point';
 import InserterTabs from './tabs';
 import { store as blockEditorStore } from '../../store';
@@ -68,12 +69,11 @@ function InserterMenu(
 		} );
 	const { showPatterns, inserterItems } = useSelect(
 		( select ) => {
-			const { __experimentalGetAllowedPatterns, getInserterItems } =
-				select( blockEditorStore );
+			const { hasAllowedPatterns, getInserterItems } = unlock(
+				select( blockEditorStore )
+			);
 			return {
-				showPatterns: !! __experimentalGetAllowedPatterns(
-					destinationRootClientId
-				).length,
+				showPatterns: hasAllowedPatterns( destinationRootClientId ),
 				inserterItems: getInserterItems( destinationRootClientId ),
 			};
 		},
@@ -293,7 +293,15 @@ function InserterMenu(
 				/>
 			) }
 			{ showInserterHelpPanel && hoveredItem && (
-				<InserterPreviewPanel item={ hoveredItem } />
+				<Popover
+					className="block-editor-inserter__preview-container__popover"
+					placement="right-start"
+					offset={ 16 }
+					focusOnMount={ false }
+					animate={ false }
+				>
+					<InserterPreviewPanel item={ hoveredItem } />
+				</Popover>
 			) }
 			{ showPatternPanel && (
 				<PatternCategoryPreviewPanel

package/src/components/inserter/preview-panel.js

@@ -40,13 +40,13 @@ function InserterPreviewPanel( { item } ) {
 							blocks={ blocks }
 							viewportWidth={ example?.viewportWidth ?? 500 }
 							additionalStyles={ [
-								{ css: 'body { padding: 16px; }' },
+								{ css: 'body { padding: 24px; }' },
 							] }
 						/>
 					</div>
 				) : (
 					<div className="block-editor-inserter__preview-content-missing">
-						{ __( 'No Preview Available.' ) }
+						{ __( 'No preview available.' ) }
 					</div>
 				) }
 			</div>

package/src/components/inserter/style.scss

@@ -214,15 +214,14 @@ $block-inserter-tabs-height: 44px;
 	}
 }
 
+.block-editor-inserter__preview-container__popover {
+	top: $grid-unit-20 !important;
+}
+
 .block-editor-inserter__preview-container {
 	display: none;
-	width: 300px;
-	background: $white;
-	border-radius: $radius-block-ui;
-	border: $border-width solid $gray-300;
-	position: absolute;
-	top: $grid-unit-20;
-	left: calc(100% + #{$grid-unit-20});
+	width: $sidebar-width;
+	padding: $grid-unit-20;
 	max-height: calc(100% - #{$grid-unit-40});
 	overflow-y: hidden;
 
@@ -230,12 +229,14 @@ $block-inserter-tabs-height: 44px;
 		display: block;
 	}
 
-	.block-editor-block-card {
-		padding: $grid-unit-20;
+	.block-editor-block-preview__container {
+		height: 100%;
 	}
 
-	.block-editor-block-card__title {
-		font-size: $default-font-size;
+	.block-editor-block-card {
+		padding-left: 0;
+		padding-right: 0;
+		padding-bottom: $grid-unit-05;
 	}
 }
 
@@ -271,15 +272,11 @@ $block-inserter-tabs-height: 44px;
 	}
 }
 
-.block-editor-inserter__block-patterns-tabs-container,
-.block-editor-block-patterns-explorer__sidebar {
+.block-editor-inserter__block-patterns-tabs-container {
 	height: 100%;
 	nav {
 		height: 100%;
 	}
-	.block-editor-block-patterns__source-filter select.components-select-control__input {
-		height: 40px;
-	}
 }
 
 .block-editor-inserter__block-patterns-tabs {
@@ -366,6 +363,7 @@ $block-inserter-tabs-height: 44px;
 	min-height: $grid-unit-60 * 3;
 	color: $gray-700;
 	background: $gray-100;
+	border-radius: $radius-block-ui;
 }
 
 .block-editor-inserter__tips {
@@ -447,7 +445,7 @@ $block-inserter-tabs-height: 44px;
 .block-editor-block-patterns-explorer {
 	&__sidebar {
 		position: absolute;
-		top: $header-height + $grid-unit-20;
+		top: $header-height + $grid-unit-15;
 		left: 0;
 		bottom: 0;
 		width: $sidebar-width;

package/src/components/inserter-button/README.md

@@ -0,0 +1,62 @@
+# InserterButton
+
+InserterButton is a type of button component.
+
+## Usage
+
+```jsx
+function render() {
+	return (
+		<View>
+			<Text>Some rendered content here</Text>
+			<InserterButton
+				item={ { title: 'Short Text', icon: <SVG></SVG> } }
+				onSelect={ function ( item ) {
+					console.log( 'selected' );
+				} }
+			/>
+		</View>
+	);
+}
+```
+
+_Note:_
+
+## Props
+
+### `maxWidth`
+
+-   **Type:** `String`
+-   **Default:** `undefined`
+
+The max-width of the button.
+
+### `itemWidth`
+
+-   **Type:** `String`
+-   **Default:** `undefined`
+
+The button width.
+
+### `onSelect`
+
+-   **Type:** `Function`
+-   **Required** `true`
+
+The function that is called once the InserterButton has been selected.
+
+### `item`
+
+-   **Type:** `Object`
+-   **Required** `true`
+
+The object that gets selected.
+
+## Examples
+
+<InserterButton
+item={ item }
+itemWidth={ itemWidth }
+maxWidth={ maxWidth }
+onSelect={ onSelect }
+/>

package/src/components/inserter-button/index.native.js

@@ -0,0 +1,116 @@
+/**
+ * External dependencies
+ */
+import { View, TouchableHighlight, Text } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+import { Icon } from '@wordpress/components';
+import { withPreferredColorScheme } from '@wordpress/compose';
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { BlockIcon } from '../block-icon';
+import styles from './style.scss';
+import sparkles from './sparkles';
+class MenuItem extends Component {
+	constructor() {
+		super( ...arguments );
+
+		this.onPress = this.onPress.bind( this );
+	}
+
+	onPress() {
+		const { onSelect, item } = this.props;
+		onSelect( item );
+	}
+
+	render() {
+		const { getStylesFromColorScheme, item, itemWidth, maxWidth } =
+			this.props;
+
+		const modalIconWrapperStyle = getStylesFromColorScheme(
+			styles.modalIconWrapper,
+			styles.modalIconWrapperDark
+		);
+		const modalIconStyle = styles.modalIcon;
+		const modalItemLabelStyle = getStylesFromColorScheme(
+			styles.modalItemLabel,
+			styles.modalItemLabelDark
+		);
+
+		const clipboardBlockStyles = getStylesFromColorScheme(
+			styles.clipboardBlock,
+			styles.clipboardBlockDark
+		);
+
+		const isClipboardBlock = item.id === 'clipboard';
+		const blockTitle = isClipboardBlock ? __( 'Copied block' ) : item.title;
+		const blockIsNew = item.isNew === true;
+		const accessibilityLabelFormat = blockIsNew
+			? // translators: Newly available block name. %s: The localized block name
+			  __( '%s block, newly available' )
+			: // translators: Block name. %s: The localized block name
+			  __( '%s block' );
+		const accessibilityLabel = sprintf(
+			accessibilityLabelFormat,
+			item.title
+		);
+
+		return (
+			<TouchableHighlight
+				style={ [
+					styles.touchableArea,
+					item.isDisabled ? styles.disabled : null,
+				] }
+				underlayColor="transparent"
+				activeOpacity={ 0.5 }
+				accessibilityRole="button"
+				accessibilityLabel={ accessibilityLabel }
+				onPress={ this.onPress }
+				disabled={ item.isDisabled }
+			>
+				<View style={ [ styles.modalItem, { width: maxWidth } ] }>
+					<View
+						style={ [
+							modalIconWrapperStyle,
+							itemWidth && {
+								width: itemWidth,
+							},
+							isClipboardBlock && clipboardBlockStyles,
+						] }
+					>
+						{ blockIsNew && (
+							<Icon
+								icon={ sparkles }
+								style={ styles.newIndicator }
+							/>
+						) }
+						<View style={ modalIconStyle }>
+							<BlockIcon
+								icon={ item.icon }
+								size={ modalIconStyle.width }
+							/>
+						</View>
+					</View>
+					<Text numberOfLines={ 3 } style={ modalItemLabelStyle }>
+						{ blockTitle }
+					</Text>
+				</View>
+			</TouchableHighlight>
+		);
+	}
+}
+
+const InserterButton = withPreferredColorScheme( MenuItem );
+
+InserterButton.Styles = {
+	modalItem: styles.modalItem,
+	modalIconWrapper: styles.modalIconWrapper,
+};
+
+export default InserterButton;

package/src/components/inserter-button/sparkles.js

@@ -0,0 +1,15 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/components';
+
+const sparkles = (
+	<SVG viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<Path
+			d="M10 11c-1.588-.479-4-.91-4-.91s2-.241 4-.454c1.8-.191 3.365-.502 4-3.181C14.635 3.775 15 1 15 1s.365 2.775 1 5.455c.635 2.679 2 2.969 4 3.181 2 .213 4 .455 4 .455s-2.412.43-4 .909c-1.588.479-3 1-4 4.546-.746 2.643-.893 4.948-1 5.454-.107-.506-.167-2.5-1-5.454C13 12 11.588 11.479 10 11zM7.333 3.5C6.803 3.333 6 3.182 6 3.182s.667-.085 1.333-.16c.6-.066 1.122-.175 1.334-1.113C8.878.971 9 0 9 0s.122.971.333 1.91c.212.937.667 1.038 1.334 1.113.666.074 1.333.159 1.333.159s-.804.15-1.333.318c-.53.167-1 .35-1.334 1.59C9.085 6.017 9.036 6.824 9 7c-.036-.177-.056-.875-.333-1.91-.334-1.24-.804-1.423-1.334-1.59zM2.444 18C1.474 17.713 0 17.454 0 17.454s1.222-.145 2.444-.272c1.1-.115 2.057-.302 2.445-1.91C5.277 13.666 5.5 12 5.5 12s.223 1.665.611 3.273c.388 1.607 1.222 1.781 2.445 1.909 1.222.127 2.444.273 2.444.273s-1.474.258-2.444.545c-.971.287-1.834.6-2.445 2.727-.456 1.586-.546 2.97-.611 3.273-.065-.304-.102-1.5-.611-3.273C4.278 18.6 3.415 18.287 2.444 18z"
+			fill="#F0C930"
+		/>
+	</SVG>
+);
+
+export default sparkles;