@wordpress/components 23.3.2 → 23.4.0

package/src/combobox-control/stories/index.js

@@ -1,339 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import ComboboxControl from '../';
-
-const countries = [
-	{ name: 'Afghanistan', code: 'AF' },
-	{ name: 'Åland Islands', code: 'AX' },
-	{ name: 'Albania', code: 'AL' },
-	{ name: 'Algeria', code: 'DZ' },
-	{ name: 'American Samoa', code: 'AS' },
-	{ name: 'Andorra', code: 'AD' },
-	{ name: 'Angola', code: 'AO' },
-	{ name: 'Anguilla', code: 'AI' },
-	{ name: 'Antarctica', code: 'AQ' },
-	{ name: 'Antigua and Barbuda', code: 'AG' },
-	{ name: 'Argentina', code: 'AR' },
-	{ name: 'Armenia', code: 'AM' },
-	{ name: 'Aruba', code: 'AW' },
-	{ name: 'Australia', code: 'AU' },
-	{ name: 'Austria', code: 'AT' },
-	{ name: 'Azerbaijan', code: 'AZ' },
-	{ name: 'Bahamas', code: 'BS' },
-	{ name: 'Bahrain', code: 'BH' },
-	{ name: 'Bangladesh', code: 'BD' },
-	{ name: 'Barbados', code: 'BB' },
-	{ name: 'Belarus', code: 'BY' },
-	{ name: 'Belgium', code: 'BE' },
-	{ name: 'Belize', code: 'BZ' },
-	{ name: 'Benin', code: 'BJ' },
-	{ name: 'Bermuda', code: 'BM' },
-	{ name: 'Bhutan', code: 'BT' },
-	{ name: 'Bolivia', code: 'BO' },
-	{ name: 'Bosnia and Herzegovina', code: 'BA' },
-	{ name: 'Botswana', code: 'BW' },
-	{ name: 'Bouvet Island', code: 'BV' },
-	{ name: 'Brazil', code: 'BR' },
-	{ name: 'British Indian Ocean Territory', code: 'IO' },
-	{ name: 'Brunei Darussalam', code: 'BN' },
-	{ name: 'Bulgaria', code: 'BG' },
-	{ name: 'Burkina Faso', code: 'BF' },
-	{ name: 'Burundi', code: 'BI' },
-	{ name: 'Cambodia', code: 'KH' },
-	{ name: 'Cameroon', code: 'CM' },
-	{ name: 'Canada', code: 'CA' },
-	{ name: 'Cape Verde', code: 'CV' },
-	{ name: 'Cayman Islands', code: 'KY' },
-	{ name: 'Central African Republic', code: 'CF' },
-	{ name: 'Chad', code: 'TD' },
-	{ name: 'Chile', code: 'CL' },
-	{ name: 'China', code: 'CN' },
-	{ name: 'Christmas Island', code: 'CX' },
-	{ name: 'Cocos (Keeling) Islands', code: 'CC' },
-	{ name: 'Colombia', code: 'CO' },
-	{ name: 'Comoros', code: 'KM' },
-	{ name: 'Congo', code: 'CG' },
-	{ name: 'Congo, The Democratic Republic of the', code: 'CD' },
-	{ name: 'Cook Islands', code: 'CK' },
-	{ name: 'Costa Rica', code: 'CR' },
-	{ name: "Cote D'Ivoire", code: 'CI' },
-	{ name: 'Croatia', code: 'HR' },
-	{ name: 'Cuba', code: 'CU' },
-	{ name: 'Cyprus', code: 'CY' },
-	{ name: 'Czech Republic', code: 'CZ' },
-	{ name: 'Denmark', code: 'DK' },
-	{ name: 'Djibouti', code: 'DJ' },
-	{ name: 'Dominica', code: 'DM' },
-	{ name: 'Dominican Republic', code: 'DO' },
-	{ name: 'Ecuador', code: 'EC' },
-	{ name: 'Egypt', code: 'EG' },
-	{ name: 'El Salvador', code: 'SV' },
-	{ name: 'Equatorial Guinea', code: 'GQ' },
-	{ name: 'Eritrea', code: 'ER' },
-	{ name: 'Estonia', code: 'EE' },
-	{ name: 'Ethiopia', code: 'ET' },
-	{ name: 'Falkland Islands (Malvinas)', code: 'FK' },
-	{ name: 'Faroe Islands', code: 'FO' },
-	{ name: 'Fiji', code: 'FJ' },
-	{ name: 'Finland', code: 'FI' },
-	{ name: 'France', code: 'FR' },
-	{ name: 'French Guiana', code: 'GF' },
-	{ name: 'French Polynesia', code: 'PF' },
-	{ name: 'French Southern Territories', code: 'TF' },
-	{ name: 'Gabon', code: 'GA' },
-	{ name: 'Gambia', code: 'GM' },
-	{ name: 'Georgia', code: 'GE' },
-	{ name: 'Germany', code: 'DE' },
-	{ name: 'Ghana', code: 'GH' },
-	{ name: 'Gibraltar', code: 'GI' },
-	{ name: 'Greece', code: 'GR' },
-	{ name: 'Greenland', code: 'GL' },
-	{ name: 'Grenada', code: 'GD' },
-	{ name: 'Guadeloupe', code: 'GP' },
-	{ name: 'Guam', code: 'GU' },
-	{ name: 'Guatemala', code: 'GT' },
-	{ name: 'Guernsey', code: 'GG' },
-	{ name: 'Guinea', code: 'GN' },
-	{ name: 'Guinea-Bissau', code: 'GW' },
-	{ name: 'Guyana', code: 'GY' },
-	{ name: 'Haiti', code: 'HT' },
-	{ name: 'Heard Island and Mcdonald Islands', code: 'HM' },
-	{ name: 'Holy See (Vatican City State)', code: 'VA' },
-	{ name: 'Honduras', code: 'HN' },
-	{ name: 'Hong Kong', code: 'HK' },
-	{ name: 'Hungary', code: 'HU' },
-	{ name: 'Iceland', code: 'IS' },
-	{ name: 'India', code: 'IN' },
-	{ name: 'Indonesia', code: 'ID' },
-	{ name: 'Iran, Islamic Republic Of', code: 'IR' },
-	{ name: 'Iraq', code: 'IQ' },
-	{ name: 'Ireland', code: 'IE' },
-	{ name: 'Isle of Man', code: 'IM' },
-	{ name: 'Israel', code: 'IL' },
-	{ name: 'Italy', code: 'IT' },
-	{ name: 'Jamaica', code: 'JM' },
-	{ name: 'Japan', code: 'JP' },
-	{ name: 'Jersey', code: 'JE' },
-	{ name: 'Jordan', code: 'JO' },
-	{ name: 'Kazakhstan', code: 'KZ' },
-	{ name: 'Kenya', code: 'KE' },
-	{ name: 'Kiribati', code: 'KI' },
-	{ name: "Korea, Democratic People'S Republic of", code: 'KP' },
-	{ name: 'Korea, Republic of', code: 'KR' },
-	{ name: 'Kuwait', code: 'KW' },
-	{ name: 'Kyrgyzstan', code: 'KG' },
-	{ name: "Lao People'S Democratic Republic", code: 'LA' },
-	{ name: 'Latvia', code: 'LV' },
-	{ name: 'Lebanon', code: 'LB' },
-	{ name: 'Lesotho', code: 'LS' },
-	{ name: 'Liberia', code: 'LR' },
-	{ name: 'Libyan Arab Jamahiriya', code: 'LY' },
-	{ name: 'Liechtenstein', code: 'LI' },
-	{ name: 'Lithuania', code: 'LT' },
-	{ name: 'Luxembourg', code: 'LU' },
-	{ name: 'Macao', code: 'MO' },
-	{ name: 'Macedonia, The Former Yugoslav Republic of', code: 'MK' },
-	{ name: 'Madagascar', code: 'MG' },
-	{ name: 'Malawi', code: 'MW' },
-	{ name: 'Malaysia', code: 'MY' },
-	{ name: 'Maldives', code: 'MV' },
-	{ name: 'Mali', code: 'ML' },
-	{ name: 'Malta', code: 'MT' },
-	{ name: 'Marshall Islands', code: 'MH' },
-	{ name: 'Martinique', code: 'MQ' },
-	{ name: 'Mauritania', code: 'MR' },
-	{ name: 'Mauritius', code: 'MU' },
-	{ name: 'Mayotte', code: 'YT' },
-	{ name: 'Mexico', code: 'MX' },
-	{ name: 'Micronesia, Federated States of', code: 'FM' },
-	{ name: 'Moldova, Republic of', code: 'MD' },
-	{ name: 'Monaco', code: 'MC' },
-	{ name: 'Mongolia', code: 'MN' },
-	{ name: 'Montserrat', code: 'MS' },
-	{ name: 'Morocco', code: 'MA' },
-	{ name: 'Mozambique', code: 'MZ' },
-	{ name: 'Myanmar', code: 'MM' },
-	{ name: 'Namibia', code: 'NA' },
-	{ name: 'Nauru', code: 'NR' },
-	{ name: 'Nepal', code: 'NP' },
-	{ name: 'Netherlands', code: 'NL' },
-	{ name: 'Netherlands Antilles', code: 'AN' },
-	{ name: 'New Caledonia', code: 'NC' },
-	{ name: 'New Zealand', code: 'NZ' },
-	{ name: 'Nicaragua', code: 'NI' },
-	{ name: 'Niger', code: 'NE' },
-	{ name: 'Nigeria', code: 'NG' },
-	{ name: 'Niue', code: 'NU' },
-	{ name: 'Norfolk Island', code: 'NF' },
-	{ name: 'Northern Mariana Islands', code: 'MP' },
-	{ name: 'Norway', code: 'NO' },
-	{ name: 'Oman', code: 'OM' },
-	{ name: 'Pakistan', code: 'PK' },
-	{ name: 'Palau', code: 'PW' },
-	{ name: 'Palestinian Territory, Occupied', code: 'PS' },
-	{ name: 'Panama', code: 'PA' },
-	{ name: 'Papua New Guinea', code: 'PG' },
-	{ name: 'Paraguay', code: 'PY' },
-	{ name: 'Peru', code: 'PE' },
-	{ name: 'Philippines', code: 'PH' },
-	{ name: 'Pitcairn', code: 'PN' },
-	{ name: 'Poland', code: 'PL' },
-	{ name: 'Portugal', code: 'PT' },
-	{ name: 'Puerto Rico', code: 'PR' },
-	{ name: 'Qatar', code: 'QA' },
-	{ name: 'Reunion', code: 'RE' },
-	{ name: 'Romania', code: 'RO' },
-	{ name: 'Russian Federation', code: 'RU' },
-	{ name: 'RWANDA', code: 'RW' },
-	{ name: 'Saint Helena', code: 'SH' },
-	{ name: 'Saint Kitts and Nevis', code: 'KN' },
-	{ name: 'Saint Lucia', code: 'LC' },
-	{ name: 'Saint Pierre and Miquelon', code: 'PM' },
-	{ name: 'Saint Vincent and the Grenadines', code: 'VC' },
-	{ name: 'Samoa', code: 'WS' },
-	{ name: 'San Marino', code: 'SM' },
-	{ name: 'Sao Tome and Principe', code: 'ST' },
-	{ name: 'Saudi Arabia', code: 'SA' },
-	{ name: 'Senegal', code: 'SN' },
-	{ name: 'Serbia and Montenegro', code: 'CS' },
-	{ name: 'Seychelles', code: 'SC' },
-	{ name: 'Sierra Leone', code: 'SL' },
-	{ name: 'Singapore', code: 'SG' },
-	{ name: 'Slovakia', code: 'SK' },
-	{ name: 'Slovenia', code: 'SI' },
-	{ name: 'Solomon Islands', code: 'SB' },
-	{ name: 'Somalia', code: 'SO' },
-	{ name: 'South Africa', code: 'ZA' },
-	{ name: 'South Georgia and the South Sandwich Islands', code: 'GS' },
-	{ name: 'Spain', code: 'ES' },
-	{ name: 'Sri Lanka', code: 'LK' },
-	{ name: 'Sudan', code: 'SD' },
-	{ name: 'Suriname', code: 'SR' },
-	{ name: 'Svalbard and Jan Mayen', code: 'SJ' },
-	{ name: 'Swaziland', code: 'SZ' },
-	{ name: 'Sweden', code: 'SE' },
-	{ name: 'Switzerland', code: 'CH' },
-	{ name: 'Syrian Arab Republic', code: 'SY' },
-	{ name: 'Taiwan, Province of China', code: 'TW' },
-	{ name: 'Tajikistan', code: 'TJ' },
-	{ name: 'Tanzania, United Republic of', code: 'TZ' },
-	{ name: 'Thailand', code: 'TH' },
-	{ name: 'Timor-Leste', code: 'TL' },
-	{ name: 'Togo', code: 'TG' },
-	{ name: 'Tokelau', code: 'TK' },
-	{ name: 'Tonga', code: 'TO' },
-	{ name: 'Trinidad and Tobago', code: 'TT' },
-	{ name: 'Tunisia', code: 'TN' },
-	{ name: 'Turkey', code: 'TR' },
-	{ name: 'Turkmenistan', code: 'TM' },
-	{ name: 'Turks and Caicos Islands', code: 'TC' },
-	{ name: 'Tuvalu', code: 'TV' },
-	{ name: 'Uganda', code: 'UG' },
-	{ name: 'Ukraine', code: 'UA' },
-	{ name: 'United Arab Emirates', code: 'AE' },
-	{ name: 'United Kingdom', code: 'GB' },
-	{ name: 'United States', code: 'US' },
-	{ name: 'United States Minor Outlying Islands', code: 'UM' },
-	{ name: 'Uruguay', code: 'UY' },
-	{ name: 'Uzbekistan', code: 'UZ' },
-	{ name: 'Vanuatu', code: 'VU' },
-	{ name: 'Venezuela', code: 'VE' },
-	{ name: 'Viet Nam', code: 'VN' },
-	{ name: 'Virgin Islands, British', code: 'VG' },
-	{ name: 'Virgin Islands, U.S.', code: 'VI' },
-	{ name: 'Wallis and Futuna', code: 'WF' },
-	{ name: 'Western Sahara', code: 'EH' },
-	{ name: 'Yemen', code: 'YE' },
-	{ name: 'Zambia', code: 'ZM' },
-	{ name: 'Zimbabwe', code: 'ZW' },
-];
-
-export default {
-	title: 'Components/ComboboxControl',
-	component: ComboboxControl,
-	argTypes: {
-		__nextHasNoMarginBottom: { control: { type: 'boolean' } },
-		onChange: { action: 'onChange' },
-	},
-};
-
-const mapCountryOption = ( country ) => ( {
-	value: country.code,
-	label: country.name,
-} );
-
-const countryOptions = countries.map( mapCountryOption );
-
-function Template( { onChange, ...args } ) {
-	const [ value, setValue ] = useState( null );
-
-	return (
-		<>
-			<ComboboxControl
-				{ ...args }
-				value={ value }
-				onChange={ ( ...changeArgs ) => {
-					setValue( ...changeArgs );
-					onChange?.( ...changeArgs );
-				} }
-			/>
-		</>
-	);
-}
-export const Default = Template.bind( {} );
-Default.args = {
-	__next36pxDefaultSize: false,
-	allowReset: false,
-	label: 'Select a country',
-	options: countryOptions,
-};
-
-const authorOptions = [
-	{
-		value: 'parsley',
-		label: 'Parsley Montana',
-		age: 48,
-		country: 'Germany',
-	},
-	{
-		value: 'cabbage',
-		label: 'Cabbage New York',
-		age: 44,
-		country: 'France',
-	},
-	{
-		value: 'jake',
-		label: 'Jake Weary',
-		age: 41,
-		country: 'United Kingdom',
-	},
-];
-
-/**
- * The rendered output of each suggestion can be customized by passing a
- * render function to the `__experimentalRenderItem` prop. (This is still an experimental feature
- * and is subject to change.)
- */
-export const WithCustomRenderItem = Template.bind( {} );
-WithCustomRenderItem.args = {
-	...Default.args,
-	label: 'Select an author',
-	options: authorOptions,
-	__experimentalRenderItem: ( { item } ) => {
-		const { label, age, country } = item;
-		return (
-			<div>
-				<div style={ { marginBottom: '0.2rem' } }>{ label }</div>
-				<small>
-					Age: { age }, Country: { country }
-				</small>
-			</div>
-		);
-	},
-};

package/src/menu-items-choice/index.js

@@ -1,43 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { check } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import MenuItem from '../menu-item';
-
-const noop = () => {};
-
-export default function MenuItemsChoice( {
-	choices = [],
-	onHover = noop,
-	onSelect,
-	value,
-} ) {
-	return choices.map( ( item ) => {
-		const isSelected = value === item.value;
-		return (
-			<MenuItem
-				key={ item.value }
-				role="menuitemradio"
-				icon={ isSelected && check }
-				info={ item.info }
-				isSelected={ isSelected }
-				shortcut={ item.shortcut }
-				className="components-menu-items-choice"
-				onClick={ () => {
-					if ( ! isSelected ) {
-						onSelect( item.value );
-					}
-				} }
-				onMouseEnter={ () => onHover( item.value ) }
-				onMouseLeave={ () => onHover( null ) }
-				aria-label={ item[ 'aria-label' ] }
-			>
-				{ item.label }
-			</MenuItem>
-		);
-	} );
-}

package/src/panel/header.js

@@ -1,10 +0,0 @@
-function PanelHeader( { label, children } ) {
-	return (
-		<div className="components-panel__header">
-			{ label && <h2>{ label }</h2> }
-			{ children }
-		</div>
-	);
-}
-
-export default PanelHeader;

package/src/panel/index.js

@@ -1,26 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { forwardRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import PanelHeader from './header';
-
-function Panel( { header, className, children }, ref ) {
-	const classNames = classnames( className, 'components-panel' );
-	return (
-		<div className={ classNames } ref={ ref }>
-			{ header && <PanelHeader label={ header } /> }
-			{ children }
-		</div>
-	);
-}
-
-export default forwardRef( Panel );

package/src/panel/row.js

@@ -1,20 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { forwardRef } from '@wordpress/element';
-
-const PanelRow = ( { className, children }, ref ) => (
-	<div
-		className={ classnames( 'components-panel__row', className ) }
-		ref={ ref }
-	>
-		{ children }
-	</div>
-);
-
-export default forwardRef( PanelRow );

package/src/tools-panel/stories/utils/tools-panel-with-item-group-slot.js

@@ -1,246 +0,0 @@
-/**
- * External dependencies
- */
-import styled from '@emotion/styled';
-import { css } from '@emotion/react';
-
-/**
- * WordPress dependencies
- */
-import { useContext, useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import Button from '../../../button';
-import ColorIndicator from '../../../color-indicator';
-import ColorPalette from '../../../color-palette';
-import Dropdown from '../../../dropdown';
-import Panel from '../../../panel';
-import { FlexItem } from '../../../flex';
-import { HStack } from '../../../h-stack';
-import { Item, ItemGroup } from '../../../item-group';
-import { ToolsPanel, ToolsPanelItem, ToolsPanelContext } from '../..';
-import {
-	createSlotFill,
-	Provider as SlotFillProvider,
-} from '../../../slot-fill';
-import { useCx } from '../../../utils';
-
-// Available border colors.
-const colors = [
-	{ name: 'Gray 0', color: '#f6f7f7' },
-	{ name: 'Gray 5', color: '#dcdcde' },
-	{ name: 'Gray 20', color: '#a7aaad' },
-	{ name: 'Gray 70', color: '#3c434a' },
-	{ name: 'Gray 100', color: '#101517' },
-	{ name: 'Blue 20', color: '#72aee6' },
-	{ name: 'Blue 40', color: '#3582c4' },
-	{ name: 'Blue 70', color: '#0a4b78' },
-	{ name: 'Red 40', color: '#e65054' },
-	{ name: 'Red 70', color: '#8a2424' },
-	{ name: 'Green 10', color: '#68de7c' },
-	{ name: 'Green 40', color: '#00a32a' },
-	{ name: 'Green 60', color: '#007017' },
-	{ name: 'Yellow 10', color: '#f2d675' },
-	{ name: 'Yellow 40', color: '#bd8600' },
-];
-const panelId = 'unique-tools-panel-id';
-
-const { Fill, Slot } = createSlotFill( 'ToolsPanelSlot' );
-
-// This storybook example aims to replicate a virtual bubbling SlotFill use case
-// for the `ToolsPanel` when the Slot itself is an `ItemGroup`.
-
-// In this scenario the `ToolsPanel` has to render item placeholders so fills
-// maintain their order in the DOM. These placeholders in the DOM prevent the
-// normal styling of the `ItemGroup` in particular the border radii on the first
-// and last items. In case consumers of the ItemGroup and ToolsPanel are
-// applying their own styles to these components, the ToolsPanel needs to assist
-// consumers in identifying which of its visible items are first and last.
-
-// This custom fill is required to re-establish the ToolsPanelContext for
-// injected ToolsPanelItem components as they will not have access to the React
-// Context as the Provider is part of the ToolsPanelItems.Slot tree.
-const ToolsPanelItems = ( { children } ) => {
-	return (
-		<Fill>
-			{ ( fillProps ) => (
-				<ToolsPanelContext.Provider value={ fillProps }>
-					{ children }
-				</ToolsPanelContext.Provider>
-			) }
-		</Fill>
-	);
-};
-
-// This fetches the ToolsPanelContext and passes it through `fillProps` so that
-// rendered fills can re-establish the `ToolsPanelContext.Provider`.
-const SlotContainer = ( { Slot: ToolsPanelSlot, ...props } ) => {
-	const toolsPanelContext = useContext( ToolsPanelContext );
-
-	return (
-		<ToolsPanelSlot
-			{ ...props }
-			fillProps={ toolsPanelContext }
-			bubblesVirtually
-		/>
-	);
-};
-
-// This wraps the slot with a `ToolsPanel` mimicking a real-world use case from
-// the block editor.
-ToolsPanelItems.Slot = ( { resetAll, ...props } ) => (
-	<ToolsPanel
-		label="Tools Panel with Item Group"
-		resetAll={ resetAll }
-		panelId={ panelId }
-		hasInnerWrapper={ true }
-		shouldRenderPlaceholderItems={ true }
-		__experimentalFirstVisibleItemClass="first"
-		__experimentalLastVisibleItemClass="last"
-	>
-		<SlotContainer { ...props } Slot={ Slot } />
-	</ToolsPanel>
-);
-
-export const ToolsPanelWithItemGroupSlot = () => {
-	const [ attributes, setAttributes ] = useState( {} );
-	const { text, background, link } = attributes;
-
-	const cx = useCx();
-	const slotWrapperClassName = cx( SlotWrapper );
-	const itemClassName = cx( ToolsPanelItemClass );
-
-	const resetAll = ( resetFilters = [] ) => {
-		let newAttributes = {};
-
-		resetFilters.forEach( ( resetFilter ) => {
-			newAttributes = {
-				...newAttributes,
-				...resetFilter( newAttributes ),
-			};
-		} );
-
-		setAttributes( newAttributes );
-	};
-
-	const updateAttribute = ( name, value ) => {
-		setAttributes( {
-			...attributes,
-			[ name ]: value,
-		} );
-	};
-
-	const ToolsPanelColorDropdown = ( { attribute, label, value } ) => {
-		return (
-			<ToolsPanelItem
-				className={ itemClassName }
-				hasValue={ () => !! value }
-				label={ label }
-				onDeselect={ () => updateAttribute( attribute, undefined ) }
-				resetAllFilter={ () => ( { [ attribute ]: undefined } ) }
-				panelId={ panelId }
-				as={ Item }
-			>
-				<Dropdown
-					renderToggle={ ( { onToggle } ) => (
-						<Button onClick={ onToggle }>
-							<HStack justify="flex-start">
-								<ColorIndicator colorValue={ value } />
-								<FlexItem>{ label }</FlexItem>
-							</HStack>
-						</Button>
-					) }
-					renderContent={ () => (
-						<ColorPalette
-							value={ value }
-							colors={ colors }
-							onChange={ ( newColor ) =>
-								updateAttribute( attribute, newColor )
-							}
-						/>
-					) }
-				/>
-			</ToolsPanelItem>
-		);
-	};
-
-	// ToolsPanelItems are rendered via two different fills to simulate
-	// injection from multiple locations.
-	return (
-		<SlotFillProvider>
-			<PanelWrapperView>
-				<Panel>
-					<ToolsPanelItems.Slot
-						as={ ItemGroup }
-						isBordered
-						isSeparated
-						isRounded={ false }
-						className={ slotWrapperClassName }
-						resetAll={ resetAll }
-					/>
-				</Panel>
-			</PanelWrapperView>
-			<ToolsPanelItems>
-				<ToolsPanelColorDropdown
-					attribute="text"
-					label="Text"
-					value={ text }
-				/>
-				<ToolsPanelColorDropdown
-					attribute="background"
-					label="Background"
-					value={ background }
-				/>
-			</ToolsPanelItems>
-			<ToolsPanelItems>
-				<ToolsPanelColorDropdown
-					attribute="link"
-					label="Link"
-					value={ link }
-				/>
-			</ToolsPanelItems>
-		</SlotFillProvider>
-	);
-};
-
-const PanelWrapperView = styled.div`
-	font-size: 13px;
-
-	.components-dropdown-menu__menu {
-		max-width: 220px;
-	}
-`;
-
-const SlotWrapper = css`
-	&&& {
-		row-gap: 0;
-		border-radius: 20px;
-	}
-
-	> div {
-		grid-column: span 2;
-		border-radius: inherit;
-	}
-`;
-
-const ToolsPanelItemClass = css`
-	padding: 0;
-
-	&&.first {
-		border-top-left-radius: inherit;
-		border-top-right-radius: inherit;
-	}
-
-	&.last {
-		border-bottom-left-radius: inherit;
-		border-bottom-right-radius: inherit;
-		border-bottom-color: transparent;
-	}
-	&& > div,
-	&& > div > button {
-		width: 100%;
-		border-radius: inherit;
-	}
-`;