@wordpress/components 28.11.0 → 28.13.1-next.082ed6819.0

package/build-module/dashicon/types.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["@wordpress/components/src/dashicon/types.ts"],"sourcesContent":["export type DashiconProps = {\n\t/**\n\t * The icon name\n\t */\n\ticon: IconKey;\n\t/**\n\t * Size of the icon\n\t */\n\tsize?: number;\n};\n\nexport type IconKey =\n\t| 'admin-appearance'\n\t| 'admin-collapse'\n\t| 'admin-comments'\n\t| 'admin-customizer'\n\t| 'admin-generic'\n\t| 'admin-home'\n\t| 'admin-links'\n\t| 'admin-media'\n\t| 'admin-multisite'\n\t| 'admin-network'\n\t| 'admin-page'\n\t| 'admin-plugins'\n\t| 'admin-post'\n\t| 'admin-settings'\n\t| 'admin-site-alt'\n\t| 'admin-site-alt2'\n\t| 'admin-site-alt3'\n\t| 'admin-site'\n\t| 'admin-tools'\n\t| 'admin-users'\n\t| 'airplane'\n\t| 'album'\n\t| 'align-center'\n\t| 'align-full-width'\n\t| 'align-left'\n\t| 'align-none'\n\t| 'align-pull-left'\n\t| 'align-pull-right'\n\t| 'align-right'\n\t| 'align-wide'\n\t| 'amazon'\n\t| 'analytics'\n\t| 'archive'\n\t| 'arrow-down-alt'\n\t| 'arrow-down-alt2'\n\t| 'arrow-down'\n\t| 'arrow-left-alt'\n\t| 'arrow-left-alt2'\n\t| 'arrow-left'\n\t| 'arrow-right-alt'\n\t| 'arrow-right-alt2'\n\t| 'arrow-right'\n\t| 'arrow-up-alt'\n\t| 'arrow-up-alt2'\n\t| 'arrow-up'\n\t| 'arrow-up-duplicate'\n\t| 'art'\n\t| 'awards'\n\t| 'backup'\n\t| 'bank'\n\t| 'beer'\n\t| 'bell'\n\t| 'block-default'\n\t| 'book-alt'\n\t| 'book'\n\t| 'buddicons-activity'\n\t| 'buddicons-bbpress-logo'\n\t| 'buddicons-buddypress-logo'\n\t| 'buddicons-community'\n\t| 'buddicons-forums'\n\t| 'buddicons-friends'\n\t| 'buddicons-groups'\n\t| 'buddicons-pm'\n\t| 'buddicons-replies'\n\t| 'buddicons-topics'\n\t| 'buddicons-tracking'\n\t| 'building'\n\t| 'businessman'\n\t| 'businessperson'\n\t| 'businesswoman'\n\t| 'button'\n\t| 'calculator'\n\t| 'camera-alt'\n\t| 'car'\n\t| 'calendar-alt'\n\t| 'calendar'\n\t| 'camera'\n\t| 'carrot'\n\t| 'cart'\n\t| 'category'\n\t| 'chart-area'\n\t| 'chart-bar'\n\t| 'chart-line'\n\t| 'chart-pie'\n\t| 'clipboard'\n\t| 'clock'\n\t| 'cloud-saved'\n\t| 'cloud-upload'\n\t| 'cloud'\n\t| 'columns'\n\t| 'code-standards'\n\t| 'coffee'\n\t| 'color-picker'\n\t| 'controls-back'\n\t| 'controls-forward'\n\t| 'controls-pause'\n\t| 'controls-play'\n\t| 'controls-repeat'\n\t| 'controls-skipback'\n\t| 'controls-skipforward'\n\t| 'controls-volumeoff'\n\t| 'controls-volumeon'\n\t| 'cover-image'\n\t| 'dashboard'\n\t| 'database'\n\t| 'database-add'\n\t| 'database-export'\n\t| 'database-import'\n\t| 'database-remove'\n\t| 'database-view'\n\t| 'desktop'\n\t| 'dismiss'\n\t| 'download'\n\t| 'drumstick'\n\t| 'edit'\n\t| 'edit-large'\n\t| 'edit-page'\n\t| 'editor-aligncenter'\n\t| 'editor-alignleft'\n\t| 'editor-alignright'\n\t| 'editor-bold'\n\t| 'editor-break'\n\t| 'editor-code'\n\t| 'editor-code-duplicate'\n\t| 'editor-contract'\n\t| 'editor-customchar'\n\t| 'editor-expand'\n\t| 'editor-help'\n\t| 'editor-indent'\n\t| 'editor-insertmore'\n\t| 'editor-italic'\n\t| 'editor-justify'\n\t| 'editor-kitchensink'\n\t| 'editor-ltr'\n\t| 'editor-ol-rtl'\n\t| 'editor-ol'\n\t| 'editor-outdent'\n\t| 'editor-paragraph'\n\t| 'editor-paste-text'\n\t| 'editor-paste-word'\n\t| 'editor-quote'\n\t| 'editor-removeformatting'\n\t| 'editor-rtl'\n\t| 'editor-spellcheck'\n\t| 'editor-strikethrough'\n\t| 'editor-table'\n\t| 'editor-textcolor'\n\t| 'editor-ul'\n\t| 'editor-underline'\n\t| 'editor-unlink'\n\t| 'editor-video'\n\t| 'ellipsis'\n\t| 'email-alt'\n\t| 'email-alt2'\n\t| 'email'\n\t| 'embed-audio'\n\t| 'embed-generic'\n\t| 'embed-photo'\n\t| 'embed-post'\n\t| 'embed-video'\n\t| 'excerpt-view'\n\t| 'exit'\n\t| 'external'\n\t| 'facebook-alt'\n\t| 'facebook'\n\t| 'feedback'\n\t| 'filter'\n\t| 'flag'\n\t| 'food'\n\t| 'format-aside'\n\t| 'format-audio'\n\t| 'format-chat'\n\t| 'format-gallery'\n\t| 'format-image'\n\t| 'format-quote'\n\t| 'format-status'\n\t| 'format-video'\n\t| 'forms'\n\t| 'fullscreen-alt'\n\t| 'fullscreen-exit-alt'\n\t| 'games'\n\t| 'google'\n\t| 'googleplus'\n\t| 'grid-view'\n\t| 'groups'\n\t| 'hammer'\n\t| 'heading'\n\t| 'heart'\n\t| 'hidden'\n\t| 'hourglass'\n\t| 'html'\n\t| 'id-alt'\n\t| 'id'\n\t| 'image-crop'\n\t| 'image-filter'\n\t| 'image-flip-horizontal'\n\t| 'image-flip-vertical'\n\t| 'image-rotate-left'\n\t| 'image-rotate-right'\n\t| 'image-rotate'\n\t| 'images-alt'\n\t| 'images-alt2'\n\t| 'index-card'\n\t| 'info-outline'\n\t| 'info'\n\t| 'insert-after'\n\t| 'insert-before'\n\t| 'insert'\n\t| 'instagram'\n\t| 'keyboard-hide'\n\t| 'laptop'\n\t| 'layout'\n\t| 'leftright'\n\t| 'lightbulb'\n\t| 'list-view'\n\t| 'linkedin'\n\t| 'location-alt'\n\t| 'location'\n\t| 'lock-duplicate'\n\t| 'lock'\n\t| 'marker'\n\t| 'media-archive'\n\t| 'media-audio'\n\t| 'media-code'\n\t| 'media-default'\n\t| 'media-document'\n\t| 'media-interactive'\n\t| 'media-spreadsheet'\n\t| 'media-text'\n\t| 'media-video'\n\t| 'megaphone'\n\t| 'menu-alt'\n\t| 'menu-alt2'\n\t| 'menu-alt3'\n\t| 'menu'\n\t| 'money-alt'\n\t| 'microphone'\n\t| 'migrate'\n\t| 'minus'\n\t| 'money'\n\t| 'move'\n\t| 'nametag'\n\t| 'networking'\n\t| 'no-alt'\n\t| 'no'\n\t| 'open-folder'\n\t| 'palmtree'\n\t| 'paperclip'\n\t| 'performance'\n\t| 'pets'\n\t| 'pdf'\n\t| 'phone'\n\t| 'pinterest'\n\t| 'playlist-audio'\n\t| 'playlist-video'\n\t| 'plus-alt'\n\t| 'plus-light'\n\t| 'plus'\n\t| 'portfolio'\n\t| 'post-status'\n\t| 'pressthis'\n\t| 'products'\n\t| 'plugins-checked'\n\t| 'plus-alt2'\n\t| 'podio'\n\t| 'printer'\n\t| 'privacy'\n\t| 'randomize'\n\t| 'reddit'\n\t| 'redo'\n\t| 'remove'\n\t| 'rest-api'\n\t| 'rss'\n\t| 'saved'\n\t| 'schedule'\n\t| 'screenoptions'\n\t| 'search'\n\t| 'share-alt'\n\t| 'share-alt2'\n\t| 'share'\n\t| 'shield-alt'\n\t| 'shield'\n\t| 'shortcode'\n\t| 'slides'\n\t| 'smartphone'\n\t| 'smiley'\n\t| 'sort'\n\t| 'sos'\n\t| 'star-empty'\n\t| 'star-filled'\n\t| 'star-half'\n\t| 'sticky'\n\t| 'store'\n\t| 'spotify'\n\t| 'superhero'\n\t| 'superhero-alt'\n\t| 'table-col-after'\n\t| 'table-col-before'\n\t| 'table-col-delete'\n\t| 'table-row-after'\n\t| 'table-row-before'\n\t| 'table-row-delete'\n\t| 'tablet'\n\t| 'tag'\n\t| 'tagcloud'\n\t| 'testimonial'\n\t| 'text'\n\t| 'text-page'\n\t| 'thumbs-down'\n\t| 'thumbs-up'\n\t| 'tickets-alt'\n\t| 'tickets'\n\t| 'tide'\n\t| 'translation'\n\t| 'trash'\n\t| 'twitch'\n\t| 'twitter'\n\t| 'twitter-alt'\n\t| 'undo'\n\t| 'universal-access-alt'\n\t| 'universal-access'\n\t| 'unlock'\n\t| 'update-alt'\n\t| 'update'\n\t| 'upload'\n\t| 'vault'\n\t| 'video-alt'\n\t| 'video-alt2'\n\t| 'video-alt3'\n\t| 'visibility'\n\t| 'warning'\n\t| 'welcome-add-page'\n\t| 'welcome-comments'\n\t| 'welcome-learn-more'\n\t| 'welcome-view-site'\n\t| 'welcome-widgets-menus'\n\t| 'welcome-write-blog'\n\t| 'whatsapp'\n\t| 'wordpress-alt'\n\t| 'wordpress'\n\t| 'xing'\n\t| 'yes-alt'\n\t| 'yes'\n\t| 'youtube';\n"],"mappings":"","ignoreList":[]}
+{"version":3,"names":[],"sources":["@wordpress/components/src/dashicon/types.ts"],"sourcesContent":["export type DashiconProps = {\n\t/**\n\t * The icon name\n\t */\n\ticon: IconKey;\n\t/**\n\t * Size of the icon\n\t */\n\tsize?: number;\n};\n\nexport type IconKey =\n\t| 'admin-appearance'\n\t| 'admin-collapse'\n\t| 'admin-comments'\n\t| 'admin-customizer'\n\t| 'admin-generic'\n\t| 'admin-home'\n\t| 'admin-links'\n\t| 'admin-media'\n\t| 'admin-multisite'\n\t| 'admin-network'\n\t| 'admin-page'\n\t| 'admin-plugins'\n\t| 'admin-post'\n\t| 'admin-settings'\n\t| 'admin-site-alt'\n\t| 'admin-site-alt2'\n\t| 'admin-site-alt3'\n\t| 'admin-site'\n\t| 'admin-tools'\n\t| 'admin-users'\n\t| 'airplane'\n\t| 'album'\n\t| 'align-center'\n\t| 'align-full-width'\n\t| 'align-left'\n\t| 'align-none'\n\t| 'align-pull-left'\n\t| 'align-pull-right'\n\t| 'align-right'\n\t| 'align-wide'\n\t| 'amazon'\n\t| 'analytics'\n\t| 'archive'\n\t| 'arrow-down-alt'\n\t| 'arrow-down-alt2'\n\t| 'arrow-down'\n\t| 'arrow-left-alt'\n\t| 'arrow-left-alt2'\n\t| 'arrow-left'\n\t| 'arrow-right-alt'\n\t| 'arrow-right-alt2'\n\t| 'arrow-right'\n\t| 'arrow-up-alt'\n\t| 'arrow-up-alt2'\n\t| 'arrow-up'\n\t| 'arrow-up-duplicate'\n\t| 'art'\n\t| 'awards'\n\t| 'backup'\n\t| 'bank'\n\t| 'beer'\n\t| 'bell'\n\t| 'block-default'\n\t| 'book-alt'\n\t| 'book'\n\t| 'buddicons-activity'\n\t| 'buddicons-bbpress-logo'\n\t| 'buddicons-buddypress-logo'\n\t| 'buddicons-community'\n\t| 'buddicons-forums'\n\t| 'buddicons-friends'\n\t| 'buddicons-groups'\n\t| 'buddicons-pm'\n\t| 'buddicons-replies'\n\t| 'buddicons-topics'\n\t| 'buddicons-tracking'\n\t| 'building'\n\t| 'businessman'\n\t| 'businessperson'\n\t| 'businesswoman'\n\t| 'button'\n\t| 'calculator'\n\t| 'camera-alt'\n\t| 'car'\n\t| 'calendar-alt'\n\t| 'calendar'\n\t| 'camera'\n\t| 'carrot'\n\t| 'cart'\n\t| 'category'\n\t| 'chart-area'\n\t| 'chart-bar'\n\t| 'chart-line'\n\t| 'chart-pie'\n\t| 'clipboard'\n\t| 'clock'\n\t| 'cloud-saved'\n\t| 'cloud-upload'\n\t| 'cloud'\n\t| 'columns'\n\t| 'code-standards'\n\t| 'coffee'\n\t| 'color-picker'\n\t| 'controls-back'\n\t| 'controls-forward'\n\t| 'controls-pause'\n\t| 'controls-play'\n\t| 'controls-repeat'\n\t| 'controls-skipback'\n\t| 'controls-skipforward'\n\t| 'controls-volumeoff'\n\t| 'controls-volumeon'\n\t| 'cover-image'\n\t| 'dashboard'\n\t| 'database'\n\t| 'database-add'\n\t| 'database-export'\n\t| 'database-import'\n\t| 'database-remove'\n\t| 'database-view'\n\t| 'desktop'\n\t| 'dismiss'\n\t| 'download'\n\t| 'drumstick'\n\t| 'edit'\n\t| 'edit-large'\n\t| 'edit-page'\n\t| 'editor-aligncenter'\n\t| 'editor-alignleft'\n\t| 'editor-alignright'\n\t| 'editor-bold'\n\t| 'editor-break'\n\t| 'editor-code'\n\t| 'editor-code-duplicate'\n\t| 'editor-contract'\n\t| 'editor-customchar'\n\t| 'editor-expand'\n\t| 'editor-help'\n\t| 'editor-indent'\n\t| 'editor-insertmore'\n\t| 'editor-italic'\n\t| 'editor-justify'\n\t| 'editor-kitchensink'\n\t| 'editor-ltr'\n\t| 'editor-ol-rtl'\n\t| 'editor-ol'\n\t| 'editor-outdent'\n\t| 'editor-paragraph'\n\t| 'editor-paste-text'\n\t| 'editor-paste-word'\n\t| 'editor-quote'\n\t| 'editor-removeformatting'\n\t| 'editor-rtl'\n\t| 'editor-spellcheck'\n\t| 'editor-strikethrough'\n\t| 'editor-table'\n\t| 'editor-textcolor'\n\t| 'editor-ul'\n\t| 'editor-underline'\n\t| 'editor-unlink'\n\t| 'editor-video'\n\t| 'ellipsis'\n\t| 'email-alt'\n\t| 'email-alt2'\n\t| 'email'\n\t| 'embed-audio'\n\t| 'embed-generic'\n\t| 'embed-photo'\n\t| 'embed-post'\n\t| 'embed-video'\n\t| 'excerpt-view'\n\t| 'exit'\n\t| 'external'\n\t| 'facebook-alt'\n\t| 'facebook'\n\t| 'feedback'\n\t| 'filter'\n\t| 'flag'\n\t| 'food'\n\t| 'format-aside'\n\t| 'format-audio'\n\t| 'format-chat'\n\t| 'format-gallery'\n\t| 'format-image'\n\t| 'format-quote'\n\t| 'format-status'\n\t| 'format-video'\n\t| 'forms'\n\t| 'fullscreen-alt'\n\t| 'fullscreen-exit-alt'\n\t| 'games'\n\t| 'google'\n\t| 'googleplus'\n\t| 'grid-view'\n\t| 'groups'\n\t| 'hammer'\n\t| 'heading'\n\t| 'heart'\n\t| 'hidden'\n\t| 'hourglass'\n\t| 'html'\n\t| 'id-alt'\n\t| 'id'\n\t| 'image-crop'\n\t| 'image-filter'\n\t| 'image-flip-horizontal'\n\t| 'image-flip-vertical'\n\t| 'image-rotate-left'\n\t| 'image-rotate-right'\n\t| 'image-rotate'\n\t| 'images-alt'\n\t| 'images-alt2'\n\t| 'index-card'\n\t| 'info-outline'\n\t| 'info'\n\t| 'insert-after'\n\t| 'insert-before'\n\t| 'insert'\n\t| 'instagram'\n\t| 'laptop'\n\t| 'layout'\n\t| 'leftright'\n\t| 'lightbulb'\n\t| 'list-view'\n\t| 'linkedin'\n\t| 'location-alt'\n\t| 'location'\n\t| 'lock-duplicate'\n\t| 'lock'\n\t| 'marker'\n\t| 'media-archive'\n\t| 'media-audio'\n\t| 'media-code'\n\t| 'media-default'\n\t| 'media-document'\n\t| 'media-interactive'\n\t| 'media-spreadsheet'\n\t| 'media-text'\n\t| 'media-video'\n\t| 'megaphone'\n\t| 'menu-alt'\n\t| 'menu-alt2'\n\t| 'menu-alt3'\n\t| 'menu'\n\t| 'money-alt'\n\t| 'microphone'\n\t| 'migrate'\n\t| 'minus'\n\t| 'money'\n\t| 'move'\n\t| 'nametag'\n\t| 'networking'\n\t| 'no-alt'\n\t| 'no'\n\t| 'open-folder'\n\t| 'palmtree'\n\t| 'paperclip'\n\t| 'performance'\n\t| 'pets'\n\t| 'pdf'\n\t| 'phone'\n\t| 'pinterest'\n\t| 'playlist-audio'\n\t| 'playlist-video'\n\t| 'plus-alt'\n\t| 'plus'\n\t| 'portfolio'\n\t| 'post-status'\n\t| 'pressthis'\n\t| 'products'\n\t| 'plugins-checked'\n\t| 'plus-alt2'\n\t| 'podio'\n\t| 'printer'\n\t| 'privacy'\n\t| 'randomize'\n\t| 'reddit'\n\t| 'redo'\n\t| 'remove'\n\t| 'rest-api'\n\t| 'rss'\n\t| 'saved'\n\t| 'schedule'\n\t| 'screenoptions'\n\t| 'search'\n\t| 'share-alt'\n\t| 'share-alt2'\n\t| 'share'\n\t| 'shield-alt'\n\t| 'shield'\n\t| 'shortcode'\n\t| 'slides'\n\t| 'smartphone'\n\t| 'smiley'\n\t| 'sort'\n\t| 'sos'\n\t| 'star-empty'\n\t| 'star-filled'\n\t| 'star-half'\n\t| 'sticky'\n\t| 'store'\n\t| 'spotify'\n\t| 'superhero'\n\t| 'superhero-alt'\n\t| 'table-col-after'\n\t| 'table-col-before'\n\t| 'table-col-delete'\n\t| 'table-row-after'\n\t| 'table-row-before'\n\t| 'table-row-delete'\n\t| 'tablet'\n\t| 'tag'\n\t| 'tagcloud'\n\t| 'testimonial'\n\t| 'text'\n\t| 'text-page'\n\t| 'thumbs-down'\n\t| 'thumbs-up'\n\t| 'tickets-alt'\n\t| 'tickets'\n\t| 'tide'\n\t| 'translation'\n\t| 'trash'\n\t| 'twitch'\n\t| 'twitter'\n\t| 'twitter-alt'\n\t| 'undo'\n\t| 'universal-access-alt'\n\t| 'universal-access'\n\t| 'unlock'\n\t| 'update-alt'\n\t| 'update'\n\t| 'upload'\n\t| 'vault'\n\t| 'video-alt'\n\t| 'video-alt2'\n\t| 'video-alt3'\n\t| 'visibility'\n\t| 'warning'\n\t| 'welcome-add-page'\n\t| 'welcome-comments'\n\t| 'welcome-learn-more'\n\t| 'welcome-view-site'\n\t| 'welcome-widgets-menus'\n\t| 'welcome-write-blog'\n\t| 'whatsapp'\n\t| 'wordpress-alt'\n\t| 'wordpress'\n\t| 'xing'\n\t| 'yes-alt'\n\t| 'yes'\n\t| 'youtube';\n"],"mappings":"","ignoreList":[]}

package/build-module/dimension-control/index.js

@@ -16,6 +16,7 @@ import SelectControl from '../select-control';
 import sizesTable, { findSizeBySlug } from './sizes';
 import { ContextSystemProvider } from '../context';
 import deprecated from '@wordpress/deprecated';
+import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const CONTEXT_VALUE = {
   BaseControl: {
@@ -41,6 +42,7 @@ const CONTEXT_VALUE = {
  *
  * 	return (
  * 		<DimensionControl
+ * 			__next40pxDefaultSize
  * 			__nextHasNoMarginBottom
  * 			label={ 'Padding' }
  * 			icon={ 'desktop' }
@@ -66,6 +68,11 @@ export function DimensionControl(props) {
     since: '6.7',
     version: '7.0'
   });
+  maybeWarnDeprecated36pxSize({
+    componentName: 'DimensionControl',
+    __next40pxDefaultSize,
+    size: undefined
+  });
   const onChangeSpacingSize = val => {
     const theSize = findSizeBySlug(sizes, val);
     if (!theSize || value === theSize.slug) {

package/build-module/dimension-control/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["clsx","__","Icon","SelectControl","sizesTable","findSizeBySlug","ContextSystemProvider","deprecated","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","CONTEXT_VALUE","BaseControl","_overrides","__associatedWPComponentName","DimensionControl","props","__next40pxDefaultSize","__nextHasNoMarginBottom","label","value","sizes","icon","onChange","className","since","version","onChangeSpacingSize","val","theSize","slug","undefined","formatSizesAsOptions","theSizes","options","map","name","selectLabel","children","hideLabelFromVision"],"sources":["@wordpress/components/src/dimension-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport Icon from '../icon';\nimport SelectControl from '../select-control';\nimport sizesTable, { findSizeBySlug } from './sizes';\nimport type { DimensionControlProps, Size } from './types';\nimport type { SelectControlSingleSelectionProps } from '../select-control/types';\nimport { ContextSystemProvider } from '../context';\nimport deprecated from '@wordpress/deprecated';\n\nconst CONTEXT_VALUE = {\n\tBaseControl: {\n\t\t// Temporary during deprecation grace period: Overrides the underlying `__associatedWPComponentName`\n\t\t// via the context system to override the value set by SelectControl.\n\t\t_overrides: { __associatedWPComponentName: 'DimensionControl' },\n\t},\n};\n\n/**\n * `DimensionControl` is a component designed to provide a UI to control spacing and/or dimensions.\n *\n * @deprecated\n *\n * ```jsx\n * import { __experimentalDimensionControl as DimensionControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * export default function MyCustomDimensionControl() {\n * \tconst [ paddingSize, setPaddingSize ] = useState( '' );\n *\n * \treturn (\n * \t\t<DimensionControl\n * \t\t\t__nextHasNoMarginBottom\n * \t\t\tlabel={ 'Padding' }\n * \t\t\ticon={ 'desktop' }\n * \t\t\tonChange={ ( value ) => setPaddingSize( value ) }\n * \t\t\tvalue={ paddingSize }\n * \t\t/>\n * \t);\n * }\n * ```\n */\nexport function DimensionControl( props: DimensionControlProps ) {\n\tconst {\n\t\t__next40pxDefaultSize = false,\n\t\t__nextHasNoMarginBottom = false,\n\t\tlabel,\n\t\tvalue,\n\t\tsizes = sizesTable,\n\t\ticon,\n\t\tonChange,\n\t\tclassName = '',\n\t} = props;\n\n\tdeprecated( 'wp.components.DimensionControl', {\n\t\tsince: '6.7',\n\t\tversion: '7.0',\n\t} );\n\n\tconst onChangeSpacingSize: SelectControlSingleSelectionProps[ 'onChange' ] =\n\t\t( val ) => {\n\t\t\tconst theSize = findSizeBySlug( sizes, val );\n\n\t\t\tif ( ! theSize || value === theSize.slug ) {\n\t\t\t\tonChange?.( undefined );\n\t\t\t} else if ( typeof onChange === 'function' ) {\n\t\t\t\tonChange( theSize.slug );\n\t\t\t}\n\t\t};\n\n\tconst formatSizesAsOptions = ( theSizes: Size[] ) => {\n\t\tconst options = theSizes.map( ( { name, slug } ) => ( {\n\t\t\tlabel: name,\n\t\t\tvalue: slug,\n\t\t} ) );\n\n\t\treturn [\n\t\t\t{\n\t\t\t\tlabel: __( 'Default' ),\n\t\t\t\tvalue: '',\n\t\t\t},\n\t\t\t...options,\n\t\t];\n\t};\n\n\tconst selectLabel = (\n\t\t<>\n\t\t\t{ icon && <Icon icon={ icon } /> }\n\t\t\t{ label }\n\t\t</>\n\t);\n\n\treturn (\n\t\t<ContextSystemProvider value={ CONTEXT_VALUE }>\n\t\t\t<SelectControl\n\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\t\tclassName={ clsx(\n\t\t\t\t\tclassName,\n\t\t\t\t\t'block-editor-dimension-control'\n\t\t\t\t) }\n\t\t\t\tlabel={ selectLabel }\n\t\t\t\thideLabelFromVision={ false }\n\t\t\t\tvalue={ value }\n\t\t\t\tonChange={ onChangeSpacingSize }\n\t\t\t\toptions={ formatSizesAsOptions( sizes ) }\n\t\t\t/>\n\t\t</ContextSystemProvider>\n\t);\n}\n\nexport default DimensionControl;\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,IAAI,MAAM,MAAM;;AAEvB;AACA;AACA;AACA,SAASC,EAAE,QAAQ,iBAAiB;;AAEpC;AACA;AACA;AACA,OAAOC,IAAI,MAAM,SAAS;AAC1B,OAAOC,aAAa,MAAM,mBAAmB;AAC7C,OAAOC,UAAU,IAAIC,cAAc,QAAQ,SAAS;AAGpD,SAASC,qBAAqB,QAAQ,YAAY;AAClD,OAAOC,UAAU,MAAM,uBAAuB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,QAAA,IAAAC,SAAA,EAAAC,IAAA,IAAAC,KAAA;AAE/C,MAAMC,aAAa,GAAG;EACrBC,WAAW,EAAE;IACZ;IACA;IACAC,UAAU,EAAE;MAAEC,2BAA2B,EAAE;IAAmB;EAC/D;AACD,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,gBAAgBA,CAAEC,KAA4B,EAAG;EAChE,MAAM;IACLC,qBAAqB,GAAG,KAAK;IAC7BC,uBAAuB,GAAG,KAAK;IAC/BC,KAAK;IACLC,KAAK;IACLC,KAAK,GAAGpB,UAAU;IAClBqB,IAAI;IACJC,QAAQ;IACRC,SAAS,GAAG;EACb,CAAC,GAAGR,KAAK;EAETZ,UAAU,CAAE,gCAAgC,EAAE;IAC7CqB,KAAK,EAAE,KAAK;IACZC,OAAO,EAAE;EACV,CAAE,CAAC;EAEH,MAAMC,mBAAoE,GACvEC,GAAG,IAAM;IACV,MAAMC,OAAO,GAAG3B,cAAc,CAAEmB,KAAK,EAAEO,GAAI,CAAC;IAE5C,IAAK,CAAEC,OAAO,IAAIT,KAAK,KAAKS,OAAO,CAACC,IAAI,EAAG;MAC1CP,QAAQ,GAAIQ,SAAU,CAAC;IACxB,CAAC,MAAM,IAAK,OAAOR,QAAQ,KAAK,UAAU,EAAG;MAC5CA,QAAQ,CAAEM,OAAO,CAACC,IAAK,CAAC;IACzB;EACD,CAAC;EAEF,MAAME,oBAAoB,GAAKC,QAAgB,IAAM;IACpD,MAAMC,OAAO,GAAGD,QAAQ,CAACE,GAAG,CAAE,CAAE;MAAEC,IAAI;MAAEN;IAAK,CAAC,MAAQ;MACrDX,KAAK,EAAEiB,IAAI;MACXhB,KAAK,EAAEU;IACR,CAAC,CAAG,CAAC;IAEL,OAAO,CACN;MACCX,KAAK,EAAErB,EAAE,CAAE,SAAU,CAAC;MACtBsB,KAAK,EAAE;IACR,CAAC,EACD,GAAGc,OAAO,CACV;EACF,CAAC;EAED,MAAMG,WAAW,gBAChB3B,KAAA,CAAAF,SAAA;IAAA8B,QAAA,GACGhB,IAAI,iBAAIhB,IAAA,CAACP,IAAI;MAACuB,IAAI,EAAGA;IAAM,CAAE,CAAC,EAC9BH,KAAK;EAAA,CACN,CACF;EAED,oBACCb,IAAA,CAACH,qBAAqB;IAACiB,KAAK,EAAGT,aAAe;IAAA2B,QAAA,eAC7ChC,IAAA,CAACN,aAAa;MACbiB,qBAAqB,EAAGA,qBAAuB;MAC/CC,uBAAuB,EAAGA,uBAAyB;MACnDM,SAAS,EAAG3B,IAAI,CACf2B,SAAS,EACT,gCACD,CAAG;MACHL,KAAK,EAAGkB,WAAa;MACrBE,mBAAmB,EAAG,KAAO;MAC7BnB,KAAK,EAAGA,KAAO;MACfG,QAAQ,EAAGI,mBAAqB;MAChCO,OAAO,EAAGF,oBAAoB,CAAEX,KAAM;IAAG,CACzC;EAAC,CACoB,CAAC;AAE1B;AAEA,eAAeN,gBAAgB","ignoreList":[]}
+{"version":3,"names":["clsx","__","Icon","SelectControl","sizesTable","findSizeBySlug","ContextSystemProvider","deprecated","maybeWarnDeprecated36pxSize","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","CONTEXT_VALUE","BaseControl","_overrides","__associatedWPComponentName","DimensionControl","props","__next40pxDefaultSize","__nextHasNoMarginBottom","label","value","sizes","icon","onChange","className","since","version","componentName","size","undefined","onChangeSpacingSize","val","theSize","slug","formatSizesAsOptions","theSizes","options","map","name","selectLabel","children","hideLabelFromVision"],"sources":["@wordpress/components/src/dimension-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport Icon from '../icon';\nimport SelectControl from '../select-control';\nimport sizesTable, { findSizeBySlug } from './sizes';\nimport type { DimensionControlProps, Size } from './types';\nimport type { SelectControlSingleSelectionProps } from '../select-control/types';\nimport { ContextSystemProvider } from '../context';\nimport deprecated from '@wordpress/deprecated';\nimport { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';\n\nconst CONTEXT_VALUE = {\n\tBaseControl: {\n\t\t// Temporary during deprecation grace period: Overrides the underlying `__associatedWPComponentName`\n\t\t// via the context system to override the value set by SelectControl.\n\t\t_overrides: { __associatedWPComponentName: 'DimensionControl' },\n\t},\n};\n\n/**\n * `DimensionControl` is a component designed to provide a UI to control spacing and/or dimensions.\n *\n * @deprecated\n *\n * ```jsx\n * import { __experimentalDimensionControl as DimensionControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * export default function MyCustomDimensionControl() {\n * \tconst [ paddingSize, setPaddingSize ] = useState( '' );\n *\n * \treturn (\n * \t\t<DimensionControl\n * \t\t\t__next40pxDefaultSize\n * \t\t\t__nextHasNoMarginBottom\n * \t\t\tlabel={ 'Padding' }\n * \t\t\ticon={ 'desktop' }\n * \t\t\tonChange={ ( value ) => setPaddingSize( value ) }\n * \t\t\tvalue={ paddingSize }\n * \t\t/>\n * \t);\n * }\n * ```\n */\nexport function DimensionControl( props: DimensionControlProps ) {\n\tconst {\n\t\t__next40pxDefaultSize = false,\n\t\t__nextHasNoMarginBottom = false,\n\t\tlabel,\n\t\tvalue,\n\t\tsizes = sizesTable,\n\t\ticon,\n\t\tonChange,\n\t\tclassName = '',\n\t} = props;\n\n\tdeprecated( 'wp.components.DimensionControl', {\n\t\tsince: '6.7',\n\t\tversion: '7.0',\n\t} );\n\n\tmaybeWarnDeprecated36pxSize( {\n\t\tcomponentName: 'DimensionControl',\n\t\t__next40pxDefaultSize,\n\t\tsize: undefined,\n\t} );\n\n\tconst onChangeSpacingSize: SelectControlSingleSelectionProps[ 'onChange' ] =\n\t\t( val ) => {\n\t\t\tconst theSize = findSizeBySlug( sizes, val );\n\n\t\t\tif ( ! theSize || value === theSize.slug ) {\n\t\t\t\tonChange?.( undefined );\n\t\t\t} else if ( typeof onChange === 'function' ) {\n\t\t\t\tonChange( theSize.slug );\n\t\t\t}\n\t\t};\n\n\tconst formatSizesAsOptions = ( theSizes: Size[] ) => {\n\t\tconst options = theSizes.map( ( { name, slug } ) => ( {\n\t\t\tlabel: name,\n\t\t\tvalue: slug,\n\t\t} ) );\n\n\t\treturn [\n\t\t\t{\n\t\t\t\tlabel: __( 'Default' ),\n\t\t\t\tvalue: '',\n\t\t\t},\n\t\t\t...options,\n\t\t];\n\t};\n\n\tconst selectLabel = (\n\t\t<>\n\t\t\t{ icon && <Icon icon={ icon } /> }\n\t\t\t{ label }\n\t\t</>\n\t);\n\n\treturn (\n\t\t<ContextSystemProvider value={ CONTEXT_VALUE }>\n\t\t\t<SelectControl\n\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\t\tclassName={ clsx(\n\t\t\t\t\tclassName,\n\t\t\t\t\t'block-editor-dimension-control'\n\t\t\t\t) }\n\t\t\t\tlabel={ selectLabel }\n\t\t\t\thideLabelFromVision={ false }\n\t\t\t\tvalue={ value }\n\t\t\t\tonChange={ onChangeSpacingSize }\n\t\t\t\toptions={ formatSizesAsOptions( sizes ) }\n\t\t\t/>\n\t\t</ContextSystemProvider>\n\t);\n}\n\nexport default DimensionControl;\n"],"mappings":"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","ignoreList":[]}

package/build-module/disabled/index.js

@@ -32,7 +32,14 @@ const {
  * const MyDisabled = () => {
  * 	const [ isDisabled, setIsDisabled ] = useState( true );
  *
- * 	let input = <TextControl label="Input" onChange={ () => {} } />;
+ *	let input = (
+ *		<TextControl
+ *			__next40pxDefaultSize
+ *			__nextHasNoMarginBottom
+ *			label="Input"
+ *			onChange={ () => {} }
+ *		/>
+ *	);
  * 	if ( isDisabled ) {
  * 		input = <Disabled>{ input }</Disabled>;
  * 	}

package/build-module/disabled/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["createContext","disabledStyles","useCx","jsx","_jsx","Context","Consumer","Provider","Disabled","className","children","isDisabled","props","cx","value","inert","undefined"],"sources":["@wordpress/components/src/disabled/index.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { disabledStyles } from './styles/disabled-styles';\nimport type { DisabledProps } from './types';\nimport type { WordPressComponentProps } from '../context';\nimport { useCx } from '../utils';\n\nconst Context = createContext< boolean >( false );\nconst { Consumer, Provider } = Context;\n\n/**\n * `Disabled` is a component which disables descendant tabbable elements and\n * prevents pointer interaction.\n *\n * _Note: this component may not behave as expected in browsers that don't\n * support the `inert` HTML attribute. We recommend adding the official WICG\n * polyfill when using this component in your project._\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\n *\n * ```jsx\n * import { Button, Disabled, TextControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyDisabled = () => {\n * \tconst [ isDisabled, setIsDisabled ] = useState( true );\n *\n * \tlet input = <TextControl label=\"Input\" onChange={ () => {} } />;\n * \tif ( isDisabled ) {\n * \t\tinput = <Disabled>{ input }</Disabled>;\n * \t}\n *\n * \tconst toggleDisabled = () => {\n * \t\tsetIsDisabled( ( state ) => ! state );\n * \t};\n *\n * \treturn (\n * \t\t<div>\n * \t\t\t{ input }\n * \t\t\t<Button variant=\"primary\" onClick={ toggleDisabled }>\n * \t\t\t\tToggle Disabled\n * \t\t\t</Button>\n * \t\t</div>\n * \t);\n * };\n * ```\n */\nfunction Disabled( {\n\tclassName,\n\tchildren,\n\tisDisabled = true,\n\t...props\n}: WordPressComponentProps< DisabledProps, 'div' > ) {\n\tconst cx = useCx();\n\n\treturn (\n\t\t<Provider value={ isDisabled }>\n\t\t\t<div\n\t\t\t\t// @ts-ignore Reason: inert is a recent HTML attribute\n\t\t\t\tinert={ isDisabled ? 'true' : undefined }\n\t\t\t\tclassName={\n\t\t\t\t\tisDisabled\n\t\t\t\t\t\t? cx( disabledStyles, className, 'components-disabled' )\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t\t{ ...props }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</div>\n\t\t</Provider>\n\t);\n}\n\nDisabled.Context = Context;\nDisabled.Consumer = Consumer;\n\nexport default Disabled;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,aAAa,QAAQ,oBAAoB;;AAElD;AACA;AACA;AACA,SAASC,cAAc,QAAQ,0BAA0B;AAGzD,SAASC,KAAK,QAAQ,UAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAEjC,MAAMC,OAAO,GAAGL,aAAa,CAAa,KAAM,CAAC;AACjD,MAAM;EAAEM,QAAQ;EAAEC;AAAS,CAAC,GAAGF,OAAO;;AAEtC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASG,QAAQA,CAAE;EAClBC,SAAS;EACTC,QAAQ;EACRC,UAAU,GAAG,IAAI;EACjB,GAAGC;AAC6C,CAAC,EAAG;EACpD,MAAMC,EAAE,GAAGX,KAAK,CAAC,CAAC;EAElB,oBACCE,IAAA,CAACG,QAAQ;IAACO,KAAK,EAAGH,UAAY;IAAAD,QAAA,eAC7BN,IAAA;MACC;MACAW,KAAK,EAAGJ,UAAU,GAAG,MAAM,GAAGK,SAAW;MACzCP,SAAS,EACRE,UAAU,GACPE,EAAE,CAAEZ,cAAc,EAAEQ,SAAS,EAAE,qBAAsB,CAAC,GACtDO,SACH;MAAA,GACIJ,KAAK;MAAAF,QAAA,EAERA;IAAQ,CACN;EAAC,CACG,CAAC;AAEb;AAEAF,QAAQ,CAACH,OAAO,GAAGA,OAAO;AAC1BG,QAAQ,CAACF,QAAQ,GAAGA,QAAQ;AAE5B,eAAeE,QAAQ","ignoreList":[]}
+{"version":3,"names":["createContext","disabledStyles","useCx","jsx","_jsx","Context","Consumer","Provider","Disabled","className","children","isDisabled","props","cx","value","inert","undefined"],"sources":["@wordpress/components/src/disabled/index.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { disabledStyles } from './styles/disabled-styles';\nimport type { DisabledProps } from './types';\nimport type { WordPressComponentProps } from '../context';\nimport { useCx } from '../utils';\n\nconst Context = createContext< boolean >( false );\nconst { Consumer, Provider } = Context;\n\n/**\n * `Disabled` is a component which disables descendant tabbable elements and\n * prevents pointer interaction.\n *\n * _Note: this component may not behave as expected in browsers that don't\n * support the `inert` HTML attribute. We recommend adding the official WICG\n * polyfill when using this component in your project._\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\n *\n * ```jsx\n * import { Button, Disabled, TextControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyDisabled = () => {\n * \tconst [ isDisabled, setIsDisabled ] = useState( true );\n *\n *\tlet input = (\n *\t\t<TextControl\n *\t\t\t__next40pxDefaultSize\n *\t\t\t__nextHasNoMarginBottom\n *\t\t\tlabel=\"Input\"\n *\t\t\tonChange={ () => {} }\n *\t\t/>\n *\t);\n * \tif ( isDisabled ) {\n * \t\tinput = <Disabled>{ input }</Disabled>;\n * \t}\n *\n * \tconst toggleDisabled = () => {\n * \t\tsetIsDisabled( ( state ) => ! state );\n * \t};\n *\n * \treturn (\n * \t\t<div>\n * \t\t\t{ input }\n * \t\t\t<Button variant=\"primary\" onClick={ toggleDisabled }>\n * \t\t\t\tToggle Disabled\n * \t\t\t</Button>\n * \t\t</div>\n * \t);\n * };\n * ```\n */\nfunction Disabled( {\n\tclassName,\n\tchildren,\n\tisDisabled = true,\n\t...props\n}: WordPressComponentProps< DisabledProps, 'div' > ) {\n\tconst cx = useCx();\n\n\treturn (\n\t\t<Provider value={ isDisabled }>\n\t\t\t<div\n\t\t\t\t// @ts-ignore Reason: inert is a recent HTML attribute\n\t\t\t\tinert={ isDisabled ? 'true' : undefined }\n\t\t\t\tclassName={\n\t\t\t\t\tisDisabled\n\t\t\t\t\t\t? cx( disabledStyles, className, 'components-disabled' )\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t\t{ ...props }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</div>\n\t\t</Provider>\n\t);\n}\n\nDisabled.Context = Context;\nDisabled.Consumer = Consumer;\n\nexport default Disabled;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,aAAa,QAAQ,oBAAoB;;AAElD;AACA;AACA;AACA,SAASC,cAAc,QAAQ,0BAA0B;AAGzD,SAASC,KAAK,QAAQ,UAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAEjC,MAAMC,OAAO,GAAGL,aAAa,CAAa,KAAM,CAAC;AACjD,MAAM;EAAEM,QAAQ;EAAEC;AAAS,CAAC,GAAGF,OAAO;;AAEtC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASG,QAAQA,CAAE;EAClBC,SAAS;EACTC,QAAQ;EACRC,UAAU,GAAG,IAAI;EACjB,GAAGC;AAC6C,CAAC,EAAG;EACpD,MAAMC,EAAE,GAAGX,KAAK,CAAC,CAAC;EAElB,oBACCE,IAAA,CAACG,QAAQ;IAACO,KAAK,EAAGH,UAAY;IAAAD,QAAA,eAC7BN,IAAA;MACC;MACAW,KAAK,EAAGJ,UAAU,GAAG,MAAM,GAAGK,SAAW;MACzCP,SAAS,EACRE,UAAU,GACPE,EAAE,CAAEZ,cAAc,EAAEQ,SAAS,EAAE,qBAAsB,CAAC,GACtDO,SACH;MAAA,GACIJ,KAAK;MAAAF,QAAA,EAERA;IAAQ,CACN;EAAC,CACG,CAAC;AAEb;AAEAF,QAAQ,CAACH,OAAO,GAAGA,OAAO;AAC1BG,QAAQ,CAACF,QAAQ,GAAGA,QAAQ;AAE5B,eAAeE,QAAQ","ignoreList":[]}

package/build-module/duotone-picker/duotone-picker.js

@@ -141,6 +141,8 @@ function DuotonePicker({
     options: options,
     actions: !!clearable && /*#__PURE__*/_jsx(CircularOptionPicker.ButtonAction, {
       onClick: () => onChange(undefined),
+      accessibleWhenDisabled: true,
+      disabled: !value,
       children: __('Clear')
     }),
     children: /*#__PURE__*/_jsx(Spacer, {

package/build-module/duotone-picker/duotone-picker.js.map

@@ -1 +1 @@
-{"version":3,"names":["fastDeepEqual","useMemo","__","sprintf","ColorListPicker","CircularOptionPicker","VStack","CustomDuotoneBar","getDefaultColors","getGradientFromCSSColors","Spacer","jsx","_jsx","jsxs","_jsxs","DuotonePicker","asButtons","loop","clearable","unsetable","colorPalette","duotonePalette","disableCustomColors","disableCustomDuotone","value","onChange","ariaLabel","ariaLabelledby","otherProps","defaultDark","defaultLight","isUnset","unsetOptionLabel","unsetOption","Option","isSelected","tooltipText","className","onClick","undefined","duotoneOptions","map","colors","slug","name","style","background","color","label","metaProps","_metaProps","options","actions","ButtonAction","children","paddingTop","length","spacing","labels","enableAlpha","newColors","newValue"],"sources":["@wordpress/components/src/duotone-picker/duotone-picker.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport fastDeepEqual from 'fast-deep-equal/es6';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport ColorListPicker from './color-list-picker';\nimport CircularOptionPicker from '../circular-option-picker';\nimport { VStack } from '../v-stack';\n\nimport CustomDuotoneBar from './custom-duotone-bar';\nimport { getDefaultColors, getGradientFromCSSColors } from './utils';\nimport { Spacer } from '../spacer';\nimport type { DuotonePickerProps } from './types';\n\n/**\n * ```jsx\n * import { DuotonePicker, DuotoneSwatch } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const DUOTONE_PALETTE = [\n * \t{ colors: [ '#8c00b7', '#fcff41' ], name: 'Purple and yellow', slug: 'purple-yellow' },\n * \t{ colors: [ '#000097', '#ff4747' ], name: 'Blue and red', slug: 'blue-red' },\n * ];\n *\n * const COLOR_PALETTE = [\n * \t{ color: '#ff4747', name: 'Red', slug: 'red' },\n * \t{ color: '#fcff41', name: 'Yellow', slug: 'yellow' },\n * \t{ color: '#000097', name: 'Blue', slug: 'blue' },\n * \t{ color: '#8c00b7', name: 'Purple', slug: 'purple' },\n * ];\n *\n * const Example = () => {\n * \tconst [ duotone, setDuotone ] = useState( [ '#000000', '#ffffff' ] );\n * \treturn (\n * \t\t<>\n * \t\t\t<DuotonePicker\n * \t\t\t\tduotonePalette={ DUOTONE_PALETTE }\n * \t\t\t\tcolorPalette={ COLOR_PALETTE }\n * \t\t\t\tvalue={ duotone }\n * \t\t\t\tonChange={ setDuotone }\n * \t\t\t/>\n * \t\t\t<DuotoneSwatch values={ duotone } />\n * \t\t</>\n * \t);\n * };\n * ```\n */\nfunction DuotonePicker( {\n\tasButtons,\n\tloop,\n\tclearable = true,\n\tunsetable = true,\n\tcolorPalette,\n\tduotonePalette,\n\tdisableCustomColors,\n\tdisableCustomDuotone,\n\tvalue,\n\tonChange,\n\t'aria-label': ariaLabel,\n\t'aria-labelledby': ariaLabelledby,\n\t...otherProps\n}: DuotonePickerProps ) {\n\tconst [ defaultDark, defaultLight ] = useMemo(\n\t\t() => getDefaultColors( colorPalette ),\n\t\t[ colorPalette ]\n\t);\n\n\tconst isUnset = value === 'unset';\n\tconst unsetOptionLabel = __( 'Unset' );\n\n\tconst unsetOption = (\n\t\t<CircularOptionPicker.Option\n\t\t\tkey=\"unset\"\n\t\t\tvalue=\"unset\"\n\t\t\tisSelected={ isUnset }\n\t\t\ttooltipText={ unsetOptionLabel }\n\t\t\taria-label={ unsetOptionLabel }\n\t\t\tclassName=\"components-duotone-picker__color-indicator\"\n\t\t\tonClick={ () => {\n\t\t\t\tonChange( isUnset ? undefined : 'unset' );\n\t\t\t} }\n\t\t/>\n\t);\n\n\tconst duotoneOptions = duotonePalette.map( ( { colors, slug, name } ) => {\n\t\tconst style = {\n\t\t\tbackground: getGradientFromCSSColors( colors, '135deg' ),\n\t\t\tcolor: 'transparent',\n\t\t};\n\t\tconst tooltipText =\n\t\t\tname ??\n\t\t\tsprintf(\n\t\t\t\t// translators: %s: duotone code e.g: \"dark-grayscale\" or \"7f7f7f-ffffff\".\n\t\t\t\t__( 'Duotone code: %s' ),\n\t\t\t\tslug\n\t\t\t);\n\t\tconst label = name\n\t\t\t? sprintf(\n\t\t\t\t\t// translators: %s: The name of the option e.g: \"Dark grayscale\".\n\t\t\t\t\t__( 'Duotone: %s' ),\n\t\t\t\t\tname\n\t\t\t  )\n\t\t\t: tooltipText;\n\t\tconst isSelected = fastDeepEqual( colors, value );\n\n\t\treturn (\n\t\t\t<CircularOptionPicker.Option\n\t\t\t\tkey={ slug }\n\t\t\t\tvalue={ colors }\n\t\t\t\tisSelected={ isSelected }\n\t\t\t\taria-label={ label }\n\t\t\t\ttooltipText={ tooltipText }\n\t\t\t\tstyle={ style }\n\t\t\t\tonClick={ () => {\n\t\t\t\t\tonChange( isSelected ? undefined : colors );\n\t\t\t\t} }\n\t\t\t/>\n\t\t);\n\t} );\n\n\tlet metaProps:\n\t\t| { asButtons: false; loop?: boolean; 'aria-label': string }\n\t\t| { asButtons: false; loop?: boolean; 'aria-labelledby': string }\n\t\t| { asButtons: true };\n\n\tif ( asButtons ) {\n\t\tmetaProps = { asButtons: true };\n\t} else {\n\t\tconst _metaProps: { asButtons: false; loop?: boolean } = {\n\t\t\tasButtons: false,\n\t\t\tloop,\n\t\t};\n\n\t\tif ( ariaLabel ) {\n\t\t\tmetaProps = { ..._metaProps, 'aria-label': ariaLabel };\n\t\t} else if ( ariaLabelledby ) {\n\t\t\tmetaProps = {\n\t\t\t\t..._metaProps,\n\t\t\t\t'aria-labelledby': ariaLabelledby,\n\t\t\t};\n\t\t} else {\n\t\t\tmetaProps = {\n\t\t\t\t..._metaProps,\n\t\t\t\t'aria-label': __( 'Custom color picker.' ),\n\t\t\t};\n\t\t}\n\t}\n\n\tconst options = unsetable\n\t\t? [ unsetOption, ...duotoneOptions ]\n\t\t: duotoneOptions;\n\n\treturn (\n\t\t<CircularOptionPicker\n\t\t\t{ ...otherProps }\n\t\t\t{ ...metaProps }\n\t\t\toptions={ options }\n\t\t\tactions={\n\t\t\t\t!! clearable && (\n\t\t\t\t\t<CircularOptionPicker.ButtonAction\n\t\t\t\t\t\tonClick={ () => onChange( undefined ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Clear' ) }\n\t\t\t\t\t</CircularOptionPicker.ButtonAction>\n\t\t\t\t)\n\t\t\t}\n\t\t>\n\t\t\t<Spacer paddingTop={ options.length === 0 ? 0 : 4 }>\n\t\t\t\t<VStack spacing={ 3 }>\n\t\t\t\t\t{ ! disableCustomColors && ! disableCustomDuotone && (\n\t\t\t\t\t\t<CustomDuotoneBar\n\t\t\t\t\t\t\tvalue={ isUnset ? undefined : value }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! disableCustomDuotone && (\n\t\t\t\t\t\t<ColorListPicker\n\t\t\t\t\t\t\tlabels={ [ __( 'Shadows' ), __( 'Highlights' ) ] }\n\t\t\t\t\t\t\tcolors={ colorPalette }\n\t\t\t\t\t\t\tvalue={ isUnset ? undefined : value }\n\t\t\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\t\t\tenableAlpha\n\t\t\t\t\t\t\tonChange={ ( newColors ) => {\n\t\t\t\t\t\t\t\tif ( ! newColors[ 0 ] ) {\n\t\t\t\t\t\t\t\t\tnewColors[ 0 ] = defaultDark;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tif ( ! newColors[ 1 ] ) {\n\t\t\t\t\t\t\t\t\tnewColors[ 1 ] = defaultLight;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tconst newValue =\n\t\t\t\t\t\t\t\t\tnewColors.length >= 2\n\t\t\t\t\t\t\t\t\t\t? newColors\n\t\t\t\t\t\t\t\t\t\t: undefined;\n\t\t\t\t\t\t\t\t// @ts-expect-error TODO: The color arrays for a DuotonePicker should be a tuple of two colors,\n\t\t\t\t\t\t\t\t// but it's currently typed as a string[].\n\t\t\t\t\t\t\t\t// See also https://github.com/WordPress/gutenberg/pull/49060#discussion_r1136951035\n\t\t\t\t\t\t\t\tonChange( newValue );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</VStack>\n\t\t\t</Spacer>\n\t\t</CircularOptionPicker>\n\t);\n}\n\nexport default DuotonePicker;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["fastDeepEqual","useMemo","__","sprintf","ColorListPicker","CircularOptionPicker","VStack","CustomDuotoneBar","getDefaultColors","getGradientFromCSSColors","Spacer","jsx","_jsx","jsxs","_jsxs","DuotonePicker","asButtons","loop","clearable","unsetable","colorPalette","duotonePalette","disableCustomColors","disableCustomDuotone","value","onChange","ariaLabel","ariaLabelledby","otherProps","defaultDark","defaultLight","isUnset","unsetOptionLabel","unsetOption","Option","isSelected","tooltipText","className","onClick","undefined","duotoneOptions","map","colors","slug","name","style","background","color","label","metaProps","_metaProps","options","actions","ButtonAction","accessibleWhenDisabled","disabled","children","paddingTop","length","spacing","labels","enableAlpha","newColors","newValue"],"sources":["@wordpress/components/src/duotone-picker/duotone-picker.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport fastDeepEqual from 'fast-deep-equal/es6';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport ColorListPicker from './color-list-picker';\nimport CircularOptionPicker from '../circular-option-picker';\nimport { VStack } from '../v-stack';\n\nimport CustomDuotoneBar from './custom-duotone-bar';\nimport { getDefaultColors, getGradientFromCSSColors } from './utils';\nimport { Spacer } from '../spacer';\nimport type { DuotonePickerProps } from './types';\n\n/**\n * ```jsx\n * import { DuotonePicker, DuotoneSwatch } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const DUOTONE_PALETTE = [\n * \t{ colors: [ '#8c00b7', '#fcff41' ], name: 'Purple and yellow', slug: 'purple-yellow' },\n * \t{ colors: [ '#000097', '#ff4747' ], name: 'Blue and red', slug: 'blue-red' },\n * ];\n *\n * const COLOR_PALETTE = [\n * \t{ color: '#ff4747', name: 'Red', slug: 'red' },\n * \t{ color: '#fcff41', name: 'Yellow', slug: 'yellow' },\n * \t{ color: '#000097', name: 'Blue', slug: 'blue' },\n * \t{ color: '#8c00b7', name: 'Purple', slug: 'purple' },\n * ];\n *\n * const Example = () => {\n * \tconst [ duotone, setDuotone ] = useState( [ '#000000', '#ffffff' ] );\n * \treturn (\n * \t\t<>\n * \t\t\t<DuotonePicker\n * \t\t\t\tduotonePalette={ DUOTONE_PALETTE }\n * \t\t\t\tcolorPalette={ COLOR_PALETTE }\n * \t\t\t\tvalue={ duotone }\n * \t\t\t\tonChange={ setDuotone }\n * \t\t\t/>\n * \t\t\t<DuotoneSwatch values={ duotone } />\n * \t\t</>\n * \t);\n * };\n * ```\n */\nfunction DuotonePicker( {\n\tasButtons,\n\tloop,\n\tclearable = true,\n\tunsetable = true,\n\tcolorPalette,\n\tduotonePalette,\n\tdisableCustomColors,\n\tdisableCustomDuotone,\n\tvalue,\n\tonChange,\n\t'aria-label': ariaLabel,\n\t'aria-labelledby': ariaLabelledby,\n\t...otherProps\n}: DuotonePickerProps ) {\n\tconst [ defaultDark, defaultLight ] = useMemo(\n\t\t() => getDefaultColors( colorPalette ),\n\t\t[ colorPalette ]\n\t);\n\n\tconst isUnset = value === 'unset';\n\tconst unsetOptionLabel = __( 'Unset' );\n\n\tconst unsetOption = (\n\t\t<CircularOptionPicker.Option\n\t\t\tkey=\"unset\"\n\t\t\tvalue=\"unset\"\n\t\t\tisSelected={ isUnset }\n\t\t\ttooltipText={ unsetOptionLabel }\n\t\t\taria-label={ unsetOptionLabel }\n\t\t\tclassName=\"components-duotone-picker__color-indicator\"\n\t\t\tonClick={ () => {\n\t\t\t\tonChange( isUnset ? undefined : 'unset' );\n\t\t\t} }\n\t\t/>\n\t);\n\n\tconst duotoneOptions = duotonePalette.map( ( { colors, slug, name } ) => {\n\t\tconst style = {\n\t\t\tbackground: getGradientFromCSSColors( colors, '135deg' ),\n\t\t\tcolor: 'transparent',\n\t\t};\n\t\tconst tooltipText =\n\t\t\tname ??\n\t\t\tsprintf(\n\t\t\t\t// translators: %s: duotone code e.g: \"dark-grayscale\" or \"7f7f7f-ffffff\".\n\t\t\t\t__( 'Duotone code: %s' ),\n\t\t\t\tslug\n\t\t\t);\n\t\tconst label = name\n\t\t\t? sprintf(\n\t\t\t\t\t// translators: %s: The name of the option e.g: \"Dark grayscale\".\n\t\t\t\t\t__( 'Duotone: %s' ),\n\t\t\t\t\tname\n\t\t\t  )\n\t\t\t: tooltipText;\n\t\tconst isSelected = fastDeepEqual( colors, value );\n\n\t\treturn (\n\t\t\t<CircularOptionPicker.Option\n\t\t\t\tkey={ slug }\n\t\t\t\tvalue={ colors }\n\t\t\t\tisSelected={ isSelected }\n\t\t\t\taria-label={ label }\n\t\t\t\ttooltipText={ tooltipText }\n\t\t\t\tstyle={ style }\n\t\t\t\tonClick={ () => {\n\t\t\t\t\tonChange( isSelected ? undefined : colors );\n\t\t\t\t} }\n\t\t\t/>\n\t\t);\n\t} );\n\n\tlet metaProps:\n\t\t| { asButtons: false; loop?: boolean; 'aria-label': string }\n\t\t| { asButtons: false; loop?: boolean; 'aria-labelledby': string }\n\t\t| { asButtons: true };\n\n\tif ( asButtons ) {\n\t\tmetaProps = { asButtons: true };\n\t} else {\n\t\tconst _metaProps: { asButtons: false; loop?: boolean } = {\n\t\t\tasButtons: false,\n\t\t\tloop,\n\t\t};\n\n\t\tif ( ariaLabel ) {\n\t\t\tmetaProps = { ..._metaProps, 'aria-label': ariaLabel };\n\t\t} else if ( ariaLabelledby ) {\n\t\t\tmetaProps = {\n\t\t\t\t..._metaProps,\n\t\t\t\t'aria-labelledby': ariaLabelledby,\n\t\t\t};\n\t\t} else {\n\t\t\tmetaProps = {\n\t\t\t\t..._metaProps,\n\t\t\t\t'aria-label': __( 'Custom color picker.' ),\n\t\t\t};\n\t\t}\n\t}\n\n\tconst options = unsetable\n\t\t? [ unsetOption, ...duotoneOptions ]\n\t\t: duotoneOptions;\n\n\treturn (\n\t\t<CircularOptionPicker\n\t\t\t{ ...otherProps }\n\t\t\t{ ...metaProps }\n\t\t\toptions={ options }\n\t\t\tactions={\n\t\t\t\t!! clearable && (\n\t\t\t\t\t<CircularOptionPicker.ButtonAction\n\t\t\t\t\t\tonClick={ () => onChange( undefined ) }\n\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\tdisabled={ ! value }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Clear' ) }\n\t\t\t\t\t</CircularOptionPicker.ButtonAction>\n\t\t\t\t)\n\t\t\t}\n\t\t>\n\t\t\t<Spacer paddingTop={ options.length === 0 ? 0 : 4 }>\n\t\t\t\t<VStack spacing={ 3 }>\n\t\t\t\t\t{ ! disableCustomColors && ! disableCustomDuotone && (\n\t\t\t\t\t\t<CustomDuotoneBar\n\t\t\t\t\t\t\tvalue={ isUnset ? undefined : value }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! disableCustomDuotone && (\n\t\t\t\t\t\t<ColorListPicker\n\t\t\t\t\t\t\tlabels={ [ __( 'Shadows' ), __( 'Highlights' ) ] }\n\t\t\t\t\t\t\tcolors={ colorPalette }\n\t\t\t\t\t\t\tvalue={ isUnset ? undefined : value }\n\t\t\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\t\t\tenableAlpha\n\t\t\t\t\t\t\tonChange={ ( newColors ) => {\n\t\t\t\t\t\t\t\tif ( ! newColors[ 0 ] ) {\n\t\t\t\t\t\t\t\t\tnewColors[ 0 ] = defaultDark;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tif ( ! newColors[ 1 ] ) {\n\t\t\t\t\t\t\t\t\tnewColors[ 1 ] = defaultLight;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tconst newValue =\n\t\t\t\t\t\t\t\t\tnewColors.length >= 2\n\t\t\t\t\t\t\t\t\t\t? newColors\n\t\t\t\t\t\t\t\t\t\t: undefined;\n\t\t\t\t\t\t\t\t// @ts-expect-error TODO: The color arrays for a DuotonePicker should be a tuple of two colors,\n\t\t\t\t\t\t\t\t// but it's currently typed as a string[].\n\t\t\t\t\t\t\t\t// See also https://github.com/WordPress/gutenberg/pull/49060#discussion_r1136951035\n\t\t\t\t\t\t\t\tonChange( newValue );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</VStack>\n\t\t\t</Spacer>\n\t\t</CircularOptionPicker>\n\t);\n}\n\nexport default DuotonePicker;\n"],"mappings":"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","ignoreList":[]}

package/build-module/font-size-picker/font-size-picker-toggle-group.js

@@ -20,6 +20,7 @@ const FontSizePickerToggleGroup = props => {
   return /*#__PURE__*/_jsx(ToggleGroupControl, {
     __nextHasNoMarginBottom: true,
     __next40pxDefaultSize: __next40pxDefaultSize,
+    __shouldNotWarnDeprecated36pxSize: true,
     label: __('Font size'),
     hideLabelFromVision: true,
     value: value,

package/build-module/font-size-picker/font-size-picker-toggle-group.js.map

@@ -1 +1 @@
-{"version":3,"names":["__","ToggleGroupControl","ToggleGroupControlOption","T_SHIRT_ABBREVIATIONS","T_SHIRT_NAMES","jsx","_jsx","FontSizePickerToggleGroup","props","fontSizes","value","__next40pxDefaultSize","size","onChange","__nextHasNoMarginBottom","label","hideLabelFromVision","isBlock","children","map","fontSize","index","name","showTooltip","slug"],"sources":["@wordpress/components/src/font-size-picker/font-size-picker-toggle-group.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport {\n\tToggleGroupControl,\n\tToggleGroupControlOption,\n} from '../toggle-group-control';\nimport { T_SHIRT_ABBREVIATIONS, T_SHIRT_NAMES } from './constants';\nimport type { FontSizePickerToggleGroupProps } from './types';\n\nconst FontSizePickerToggleGroup = ( props: FontSizePickerToggleGroupProps ) => {\n\tconst { fontSizes, value, __next40pxDefaultSize, size, onChange } = props;\n\treturn (\n\t\t<ToggleGroupControl\n\t\t\t__nextHasNoMarginBottom\n\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\tlabel={ __( 'Font size' ) }\n\t\t\thideLabelFromVision\n\t\t\tvalue={ value }\n\t\t\tonChange={ onChange }\n\t\t\tisBlock\n\t\t\tsize={ size }\n\t\t>\n\t\t\t{ fontSizes.map( ( fontSize, index ) => (\n\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\tkey={ fontSize.slug }\n\t\t\t\t\tvalue={ fontSize.size }\n\t\t\t\t\tlabel={ T_SHIRT_ABBREVIATIONS[ index ] }\n\t\t\t\t\taria-label={ fontSize.name || T_SHIRT_NAMES[ index ] }\n\t\t\t\t\tshowTooltip\n\t\t\t\t/>\n\t\t\t) ) }\n\t\t</ToggleGroupControl>\n\t);\n};\n\nexport default FontSizePickerToggleGroup;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;;AAEpC;AACA;AACA;AACA,SACCC,kBAAkB,EAClBC,wBAAwB,QAClB,yBAAyB;AAChC,SAASC,qBAAqB,EAAEC,aAAa,QAAQ,aAAa;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAGnE,MAAMC,yBAAyB,GAAKC,KAAqC,IAAM;EAC9E,MAAM;IAAEC,SAAS;IAAEC,KAAK;IAAEC,qBAAqB;IAAEC,IAAI;IAAEC;EAAS,CAAC,GAAGL,KAAK;EACzE,oBACCF,IAAA,CAACL,kBAAkB;IAClBa,uBAAuB;IACvBH,qBAAqB,EAAGA,qBAAuB;IAC/CI,KAAK,EAAGf,EAAE,CAAE,WAAY,CAAG;IAC3BgB,mBAAmB;IACnBN,KAAK,EAAGA,KAAO;IACfG,QAAQ,EAAGA,QAAU;IACrBI,OAAO;IACPL,IAAI,EAAGA,IAAM;IAAAM,QAAA,EAEXT,SAAS,CAACU,GAAG,CAAE,CAAEC,QAAQ,EAAEC,KAAK,kBACjCf,IAAA,CAACJ,wBAAwB;MAExBQ,KAAK,EAAGU,QAAQ,CAACR,IAAM;MACvBG,KAAK,EAAGZ,qBAAqB,CAAEkB,KAAK,CAAI;MACxC,cAAaD,QAAQ,CAACE,IAAI,IAAIlB,aAAa,CAAEiB,KAAK,CAAI;MACtDE,WAAW;IAAA,GAJLH,QAAQ,CAACI,IAKf,CACA;EAAC,CACgB,CAAC;AAEvB,CAAC;AAED,eAAejB,yBAAyB","ignoreList":[]}
+{"version":3,"names":["__","ToggleGroupControl","ToggleGroupControlOption","T_SHIRT_ABBREVIATIONS","T_SHIRT_NAMES","jsx","_jsx","FontSizePickerToggleGroup","props","fontSizes","value","__next40pxDefaultSize","size","onChange","__nextHasNoMarginBottom","__shouldNotWarnDeprecated36pxSize","label","hideLabelFromVision","isBlock","children","map","fontSize","index","name","showTooltip","slug"],"sources":["@wordpress/components/src/font-size-picker/font-size-picker-toggle-group.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport {\n\tToggleGroupControl,\n\tToggleGroupControlOption,\n} from '../toggle-group-control';\nimport { T_SHIRT_ABBREVIATIONS, T_SHIRT_NAMES } from './constants';\nimport type { FontSizePickerToggleGroupProps } from './types';\n\nconst FontSizePickerToggleGroup = ( props: FontSizePickerToggleGroupProps ) => {\n\tconst { fontSizes, value, __next40pxDefaultSize, size, onChange } = props;\n\treturn (\n\t\t<ToggleGroupControl\n\t\t\t__nextHasNoMarginBottom\n\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t__shouldNotWarnDeprecated36pxSize\n\t\t\tlabel={ __( 'Font size' ) }\n\t\t\thideLabelFromVision\n\t\t\tvalue={ value }\n\t\t\tonChange={ onChange }\n\t\t\tisBlock\n\t\t\tsize={ size }\n\t\t>\n\t\t\t{ fontSizes.map( ( fontSize, index ) => (\n\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\tkey={ fontSize.slug }\n\t\t\t\t\tvalue={ fontSize.size }\n\t\t\t\t\tlabel={ T_SHIRT_ABBREVIATIONS[ index ] }\n\t\t\t\t\taria-label={ fontSize.name || T_SHIRT_NAMES[ index ] }\n\t\t\t\t\tshowTooltip\n\t\t\t\t/>\n\t\t\t) ) }\n\t\t</ToggleGroupControl>\n\t);\n};\n\nexport default FontSizePickerToggleGroup;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;;AAEpC;AACA;AACA;AACA,SACCC,kBAAkB,EAClBC,wBAAwB,QAClB,yBAAyB;AAChC,SAASC,qBAAqB,EAAEC,aAAa,QAAQ,aAAa;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAGnE,MAAMC,yBAAyB,GAAKC,KAAqC,IAAM;EAC9E,MAAM;IAAEC,SAAS;IAAEC,KAAK;IAAEC,qBAAqB;IAAEC,IAAI;IAAEC;EAAS,CAAC,GAAGL,KAAK;EACzE,oBACCF,IAAA,CAACL,kBAAkB;IAClBa,uBAAuB;IACvBH,qBAAqB,EAAGA,qBAAuB;IAC/CI,iCAAiC;IACjCC,KAAK,EAAGhB,EAAE,CAAE,WAAY,CAAG;IAC3BiB,mBAAmB;IACnBP,KAAK,EAAGA,KAAO;IACfG,QAAQ,EAAGA,QAAU;IACrBK,OAAO;IACPN,IAAI,EAAGA,IAAM;IAAAO,QAAA,EAEXV,SAAS,CAACW,GAAG,CAAE,CAAEC,QAAQ,EAAEC,KAAK,kBACjChB,IAAA,CAACJ,wBAAwB;MAExBQ,KAAK,EAAGW,QAAQ,CAACT,IAAM;MACvBI,KAAK,EAAGb,qBAAqB,CAAEmB,KAAK,CAAI;MACxC,cAAaD,QAAQ,CAACE,IAAI,IAAInB,aAAa,CAAEkB,KAAK,CAAI;MACtDE,WAAW;IAAA,GAJLH,QAAQ,CAACI,IAKf,CACA;EAAC,CACgB,CAAC;AAEvB,CAAC;AAED,eAAelB,yBAAyB","ignoreList":[]}

package/build-module/font-size-picker/index.js

@@ -23,6 +23,7 @@ import { Spacer } from '../spacer';
 import FontSizePickerSelect from './font-size-picker-select';
 import FontSizePickerToggleGroup from './font-size-picker-toggle-group';
 import { T_SHIRT_NAMES } from './constants';
+import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const DEFAULT_UNITS = ['px', 'em', 'rem', 'vw', 'vh'];
 const MAX_TOGGLE_GROUP_SIZES = 5;
@@ -84,6 +85,11 @@ const UnforwardedFontSizePicker = (props, ref) => {
   const [valueQuantity, valueUnit] = parseQuantityAndUnitFromRawValue(value, units);
   const isValueUnitRelative = !!valueUnit && ['em', 'rem', 'vw', 'vh'].includes(valueUnit);
   const isDisabled = value === undefined;
+  maybeWarnDeprecated36pxSize({
+    componentName: 'FontSizePicker',
+    __next40pxDefaultSize,
+    size
+  });
   return /*#__PURE__*/_jsxs(Container, {
     ref: ref,
     className: "components-font-size-picker",
@@ -164,6 +170,7 @@ const UnforwardedFontSizePicker = (props, ref) => {
             children: /*#__PURE__*/_jsx(RangeControl, {
               __nextHasNoMarginBottom: true,
               __next40pxDefaultSize: __next40pxDefaultSize,
+              __shouldNotWarnDeprecated36pxSize: true,
               className: "components-font-size-picker__custom-input",
               label: __('Custom Size'),
               hideLabelFromVision: true,

package/build-module/font-size-picker/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["__","settings","useState","useMemo","forwardRef","Button","RangeControl","Flex","FlexItem","default","UnitControl","parseQuantityAndUnitFromRawValue","useCustomUnits","VisuallyHidden","getCommonSizeUnit","Container","Header","HeaderHint","HeaderLabel","HeaderToggle","Spacer","FontSizePickerSelect","FontSizePickerToggleGroup","T_SHIRT_NAMES","jsx","_jsx","jsxs","_jsxs","DEFAULT_UNITS","MAX_TOGGLE_GROUP_SIZES","UnforwardedFontSizePicker","props","ref","__next40pxDefaultSize","fallbackFontSize","fontSizes","disableCustomFontSizes","onChange","size","units","unitsProp","value","withSlider","withReset","availableUnits","selectedFontSize","find","fontSize","isCustomValue","userRequestedCustom","setUserRequestedCustom","currentPickerType","length","headerHint","name","indexOf","commonUnit","hasUnits","valueQuantity","valueUnit","isValueUnitRelative","includes","isDisabled","undefined","className","children","as","label","icon","onClick","isPressed","newValue","Number","onSelectCustom","isBlock","labelPosition","hideLabelFromVision","parseInt","min","marginX","marginBottom","__nextHasNoMarginBottom","initialPosition","withInputField","max","step","disabled","accessibleWhenDisabled","variant","FontSizePicker"],"sources":["@wordpress/components/src/font-size-picker/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { settings } from '@wordpress/icons';\nimport { useState, useMemo, forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { Button } from '../button';\nimport RangeControl from '../range-control';\nimport { Flex, FlexItem } from '../flex';\nimport {\n\tdefault as UnitControl,\n\tparseQuantityAndUnitFromRawValue,\n\tuseCustomUnits,\n} from '../unit-control';\nimport { VisuallyHidden } from '../visually-hidden';\nimport { getCommonSizeUnit } from './utils';\nimport type { FontSizePickerProps } from './types';\nimport {\n\tContainer,\n\tHeader,\n\tHeaderHint,\n\tHeaderLabel,\n\tHeaderToggle,\n} from './styles';\nimport { Spacer } from '../spacer';\nimport FontSizePickerSelect from './font-size-picker-select';\nimport FontSizePickerToggleGroup from './font-size-picker-toggle-group';\nimport { T_SHIRT_NAMES } from './constants';\n\nconst DEFAULT_UNITS = [ 'px', 'em', 'rem', 'vw', 'vh' ];\n\nconst MAX_TOGGLE_GROUP_SIZES = 5;\n\nconst UnforwardedFontSizePicker = (\n\tprops: FontSizePickerProps,\n\tref: ForwardedRef< any >\n) => {\n\tconst {\n\t\t__next40pxDefaultSize = false,\n\t\tfallbackFontSize,\n\t\tfontSizes = [],\n\t\tdisableCustomFontSizes = false,\n\t\tonChange,\n\t\tsize = 'default',\n\t\tunits: unitsProp = DEFAULT_UNITS,\n\t\tvalue,\n\t\twithSlider = false,\n\t\twithReset = true,\n\t} = props;\n\n\tconst units = useCustomUnits( {\n\t\tavailableUnits: unitsProp,\n\t} );\n\n\tconst selectedFontSize = fontSizes.find(\n\t\t( fontSize ) => fontSize.size === value\n\t);\n\tconst isCustomValue = !! value && ! selectedFontSize;\n\n\t// Initially request a custom picker if the value is not from the predef list.\n\tconst [ userRequestedCustom, setUserRequestedCustom ] =\n\t\tuseState( isCustomValue );\n\n\tlet currentPickerType;\n\tif ( ! disableCustomFontSizes && userRequestedCustom ) {\n\t\t// While showing the custom value picker, switch back to predef only if\n\t\t// `disableCustomFontSizes` is set to `true`.\n\t\tcurrentPickerType = 'custom' as const;\n\t} else {\n\t\tcurrentPickerType =\n\t\t\tfontSizes.length > MAX_TOGGLE_GROUP_SIZES\n\t\t\t\t? ( 'select' as const )\n\t\t\t\t: ( 'togglegroup' as const );\n\t}\n\n\tconst headerHint = useMemo( () => {\n\t\tswitch ( currentPickerType ) {\n\t\t\tcase 'custom':\n\t\t\t\treturn __( 'Custom' );\n\t\t\tcase 'togglegroup':\n\t\t\t\tif ( selectedFontSize ) {\n\t\t\t\t\treturn (\n\t\t\t\t\t\tselectedFontSize.name ||\n\t\t\t\t\t\tT_SHIRT_NAMES[ fontSizes.indexOf( selectedFontSize ) ]\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\tcase 'select':\n\t\t\t\tconst commonUnit = getCommonSizeUnit( fontSizes );\n\t\t\t\tif ( commonUnit ) {\n\t\t\t\t\treturn `(${ commonUnit })`;\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t}\n\n\t\treturn '';\n\t}, [ currentPickerType, selectedFontSize, fontSizes ] );\n\n\tif ( fontSizes.length === 0 && disableCustomFontSizes ) {\n\t\treturn null;\n\t}\n\n\t// If neither the value or first font size is a string, then FontSizePicker\n\t// operates in a legacy \"unitless\" mode where UnitControl can only be used\n\t// to select px values and onChange() is always called with number values.\n\tconst hasUnits =\n\t\ttypeof value === 'string' || typeof fontSizes[ 0 ]?.size === 'string';\n\n\tconst [ valueQuantity, valueUnit ] = parseQuantityAndUnitFromRawValue(\n\t\tvalue,\n\t\tunits\n\t);\n\tconst isValueUnitRelative =\n\t\t!! valueUnit && [ 'em', 'rem', 'vw', 'vh' ].includes( valueUnit );\n\tconst isDisabled = value === undefined;\n\n\treturn (\n\t\t<Container ref={ ref } className=\"components-font-size-picker\">\n\t\t\t<VisuallyHidden as=\"legend\">{ __( 'Font size' ) }</VisuallyHidden>\n\t\t\t<Spacer>\n\t\t\t\t<Header className=\"components-font-size-picker__header\">\n\t\t\t\t\t<HeaderLabel\n\t\t\t\t\t\taria-label={ `${ __( 'Size' ) } ${ headerHint || '' }` }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Size' ) }\n\t\t\t\t\t\t{ headerHint && (\n\t\t\t\t\t\t\t<HeaderHint className=\"components-font-size-picker__header__hint\">\n\t\t\t\t\t\t\t\t{ headerHint }\n\t\t\t\t\t\t\t</HeaderHint>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</HeaderLabel>\n\t\t\t\t\t{ ! disableCustomFontSizes && (\n\t\t\t\t\t\t<HeaderToggle\n\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\tcurrentPickerType === 'custom'\n\t\t\t\t\t\t\t\t\t? __( 'Use size preset' )\n\t\t\t\t\t\t\t\t\t: __( 'Set custom size' )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\ticon={ settings }\n\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\tsetUserRequestedCustom( ! userRequestedCustom )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tisPressed={ currentPickerType === 'custom' }\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</Header>\n\t\t\t</Spacer>\n\t\t\t<div>\n\t\t\t\t{ currentPickerType === 'select' && (\n\t\t\t\t\t<FontSizePickerSelect\n\t\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t\tfontSizes={ fontSizes }\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\tdisableCustomFontSizes={ disableCustomFontSizes }\n\t\t\t\t\t\tsize={ size }\n\t\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\t\tif ( newValue === undefined ) {\n\t\t\t\t\t\t\t\tonChange?.( undefined );\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tonChange?.(\n\t\t\t\t\t\t\t\t\thasUnits ? newValue : Number( newValue ),\n\t\t\t\t\t\t\t\t\tfontSizes.find(\n\t\t\t\t\t\t\t\t\t\t( fontSize ) =>\n\t\t\t\t\t\t\t\t\t\t\tfontSize.size === newValue\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tonSelectCustom={ () => setUserRequestedCustom( true ) }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t{ currentPickerType === 'togglegroup' && (\n\t\t\t\t\t<FontSizePickerToggleGroup\n\t\t\t\t\t\tfontSizes={ fontSizes }\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t\tsize={ size }\n\t\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\t\tif ( newValue === undefined ) {\n\t\t\t\t\t\t\t\tonChange?.( undefined );\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tonChange?.(\n\t\t\t\t\t\t\t\t\thasUnits ? newValue : Number( newValue ),\n\t\t\t\t\t\t\t\t\tfontSizes.find(\n\t\t\t\t\t\t\t\t\t\t( fontSize ) =>\n\t\t\t\t\t\t\t\t\t\t\tfontSize.size === newValue\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t{ currentPickerType === 'custom' && (\n\t\t\t\t\t<Flex className=\"components-font-size-picker__custom-size-control\">\n\t\t\t\t\t\t<FlexItem isBlock>\n\t\t\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t\t\t\tlabel={ __( 'Custom' ) }\n\t\t\t\t\t\t\t\tlabelPosition=\"top\"\n\t\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\t\t\t\tsetUserRequestedCustom( true );\n\n\t\t\t\t\t\t\t\t\tif ( newValue === undefined ) {\n\t\t\t\t\t\t\t\t\t\tonChange?.( undefined );\n\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\tonChange?.(\n\t\t\t\t\t\t\t\t\t\t\thasUnits\n\t\t\t\t\t\t\t\t\t\t\t\t? newValue\n\t\t\t\t\t\t\t\t\t\t\t\t: parseInt( newValue, 10 )\n\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\tsize={ size }\n\t\t\t\t\t\t\t\tunits={ hasUnits ? units : [] }\n\t\t\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t{ withSlider && (\n\t\t\t\t\t\t\t<FlexItem isBlock>\n\t\t\t\t\t\t\t\t<Spacer marginX={ 2 } marginBottom={ 0 }>\n\t\t\t\t\t\t\t\t\t<RangeControl\n\t\t\t\t\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t\t\t\t\t__next40pxDefaultSize={\n\t\t\t\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tclassName=\"components-font-size-picker__custom-input\"\n\t\t\t\t\t\t\t\t\t\tlabel={ __( 'Custom Size' ) }\n\t\t\t\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\t\t\t\tvalue={ valueQuantity }\n\t\t\t\t\t\t\t\t\t\tinitialPosition={ fallbackFontSize }\n\t\t\t\t\t\t\t\t\t\twithInputField={ false }\n\t\t\t\t\t\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\t\t\t\t\t\tsetUserRequestedCustom( true );\n\n\t\t\t\t\t\t\t\t\t\t\tif ( newValue === undefined ) {\n\t\t\t\t\t\t\t\t\t\t\t\tonChange?.( undefined );\n\t\t\t\t\t\t\t\t\t\t\t} else if ( hasUnits ) {\n\t\t\t\t\t\t\t\t\t\t\t\tonChange?.(\n\t\t\t\t\t\t\t\t\t\t\t\t\tnewValue +\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t( valueUnit ?? 'px' )\n\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\tonChange?.( newValue );\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\t\t\t\t\tmax={ isValueUnitRelative ? 10 : 100 }\n\t\t\t\t\t\t\t\t\t\tstep={ isValueUnitRelative ? 0.1 : 1 }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</Spacer>\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ withReset && (\n\t\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tdisabled={ isDisabled }\n\t\t\t\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\tonChange?.( undefined );\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\t\tsize={\n\t\t\t\t\t\t\t\t\t\tsize === '__unstable-large' ||\n\t\t\t\t\t\t\t\t\t\tprops.__next40pxDefaultSize\n\t\t\t\t\t\t\t\t\t\t\t? 'default'\n\t\t\t\t\t\t\t\t\t\t\t: 'small'\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ __( 'Reset' ) }\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</Flex>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t</Container>\n\t);\n};\n\nexport const FontSizePicker = forwardRef( UnforwardedFontSizePicker );\n\nexport default FontSizePicker;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["__","settings","useState","useMemo","forwardRef","Button","RangeControl","Flex","FlexItem","default","UnitControl","parseQuantityAndUnitFromRawValue","useCustomUnits","VisuallyHidden","getCommonSizeUnit","Container","Header","HeaderHint","HeaderLabel","HeaderToggle","Spacer","FontSizePickerSelect","FontSizePickerToggleGroup","T_SHIRT_NAMES","maybeWarnDeprecated36pxSize","jsx","_jsx","jsxs","_jsxs","DEFAULT_UNITS","MAX_TOGGLE_GROUP_SIZES","UnforwardedFontSizePicker","props","ref","__next40pxDefaultSize","fallbackFontSize","fontSizes","disableCustomFontSizes","onChange","size","units","unitsProp","value","withSlider","withReset","availableUnits","selectedFontSize","find","fontSize","isCustomValue","userRequestedCustom","setUserRequestedCustom","currentPickerType","length","headerHint","name","indexOf","commonUnit","hasUnits","valueQuantity","valueUnit","isValueUnitRelative","includes","isDisabled","undefined","componentName","className","children","as","label","icon","onClick","isPressed","newValue","Number","onSelectCustom","isBlock","labelPosition","hideLabelFromVision","parseInt","min","marginX","marginBottom","__nextHasNoMarginBottom","__shouldNotWarnDeprecated36pxSize","initialPosition","withInputField","max","step","disabled","accessibleWhenDisabled","variant","FontSizePicker"],"sources":["@wordpress/components/src/font-size-picker/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { settings } from '@wordpress/icons';\nimport { useState, useMemo, forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { Button } from '../button';\nimport RangeControl from '../range-control';\nimport { Flex, FlexItem } from '../flex';\nimport {\n\tdefault as UnitControl,\n\tparseQuantityAndUnitFromRawValue,\n\tuseCustomUnits,\n} from '../unit-control';\nimport { VisuallyHidden } from '../visually-hidden';\nimport { getCommonSizeUnit } from './utils';\nimport type { FontSizePickerProps } from './types';\nimport {\n\tContainer,\n\tHeader,\n\tHeaderHint,\n\tHeaderLabel,\n\tHeaderToggle,\n} from './styles';\nimport { Spacer } from '../spacer';\nimport FontSizePickerSelect from './font-size-picker-select';\nimport FontSizePickerToggleGroup from './font-size-picker-toggle-group';\nimport { T_SHIRT_NAMES } from './constants';\nimport { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';\n\nconst DEFAULT_UNITS = [ 'px', 'em', 'rem', 'vw', 'vh' ];\n\nconst MAX_TOGGLE_GROUP_SIZES = 5;\n\nconst UnforwardedFontSizePicker = (\n\tprops: FontSizePickerProps,\n\tref: ForwardedRef< any >\n) => {\n\tconst {\n\t\t__next40pxDefaultSize = false,\n\t\tfallbackFontSize,\n\t\tfontSizes = [],\n\t\tdisableCustomFontSizes = false,\n\t\tonChange,\n\t\tsize = 'default',\n\t\tunits: unitsProp = DEFAULT_UNITS,\n\t\tvalue,\n\t\twithSlider = false,\n\t\twithReset = true,\n\t} = props;\n\n\tconst units = useCustomUnits( {\n\t\tavailableUnits: unitsProp,\n\t} );\n\n\tconst selectedFontSize = fontSizes.find(\n\t\t( fontSize ) => fontSize.size === value\n\t);\n\tconst isCustomValue = !! value && ! selectedFontSize;\n\n\t// Initially request a custom picker if the value is not from the predef list.\n\tconst [ userRequestedCustom, setUserRequestedCustom ] =\n\t\tuseState( isCustomValue );\n\n\tlet currentPickerType;\n\tif ( ! disableCustomFontSizes && userRequestedCustom ) {\n\t\t// While showing the custom value picker, switch back to predef only if\n\t\t// `disableCustomFontSizes` is set to `true`.\n\t\tcurrentPickerType = 'custom' as const;\n\t} else {\n\t\tcurrentPickerType =\n\t\t\tfontSizes.length > MAX_TOGGLE_GROUP_SIZES\n\t\t\t\t? ( 'select' as const )\n\t\t\t\t: ( 'togglegroup' as const );\n\t}\n\n\tconst headerHint = useMemo( () => {\n\t\tswitch ( currentPickerType ) {\n\t\t\tcase 'custom':\n\t\t\t\treturn __( 'Custom' );\n\t\t\tcase 'togglegroup':\n\t\t\t\tif ( selectedFontSize ) {\n\t\t\t\t\treturn (\n\t\t\t\t\t\tselectedFontSize.name ||\n\t\t\t\t\t\tT_SHIRT_NAMES[ fontSizes.indexOf( selectedFontSize ) ]\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\tcase 'select':\n\t\t\t\tconst commonUnit = getCommonSizeUnit( fontSizes );\n\t\t\t\tif ( commonUnit ) {\n\t\t\t\t\treturn `(${ commonUnit })`;\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t}\n\n\t\treturn '';\n\t}, [ currentPickerType, selectedFontSize, fontSizes ] );\n\n\tif ( fontSizes.length === 0 && disableCustomFontSizes ) {\n\t\treturn null;\n\t}\n\n\t// If neither the value or first font size is a string, then FontSizePicker\n\t// operates in a legacy \"unitless\" mode where UnitControl can only be used\n\t// to select px values and onChange() is always called with number values.\n\tconst hasUnits =\n\t\ttypeof value === 'string' || typeof fontSizes[ 0 ]?.size === 'string';\n\n\tconst [ valueQuantity, valueUnit ] = parseQuantityAndUnitFromRawValue(\n\t\tvalue,\n\t\tunits\n\t);\n\tconst isValueUnitRelative =\n\t\t!! valueUnit && [ 'em', 'rem', 'vw', 'vh' ].includes( valueUnit );\n\tconst isDisabled = value === undefined;\n\n\tmaybeWarnDeprecated36pxSize( {\n\t\tcomponentName: 'FontSizePicker',\n\t\t__next40pxDefaultSize,\n\t\tsize,\n\t} );\n\n\treturn (\n\t\t<Container ref={ ref } className=\"components-font-size-picker\">\n\t\t\t<VisuallyHidden as=\"legend\">{ __( 'Font size' ) }</VisuallyHidden>\n\t\t\t<Spacer>\n\t\t\t\t<Header className=\"components-font-size-picker__header\">\n\t\t\t\t\t<HeaderLabel\n\t\t\t\t\t\taria-label={ `${ __( 'Size' ) } ${ headerHint || '' }` }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Size' ) }\n\t\t\t\t\t\t{ headerHint && (\n\t\t\t\t\t\t\t<HeaderHint className=\"components-font-size-picker__header__hint\">\n\t\t\t\t\t\t\t\t{ headerHint }\n\t\t\t\t\t\t\t</HeaderHint>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</HeaderLabel>\n\t\t\t\t\t{ ! disableCustomFontSizes && (\n\t\t\t\t\t\t<HeaderToggle\n\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\tcurrentPickerType === 'custom'\n\t\t\t\t\t\t\t\t\t? __( 'Use size preset' )\n\t\t\t\t\t\t\t\t\t: __( 'Set custom size' )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\ticon={ settings }\n\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\tsetUserRequestedCustom( ! userRequestedCustom )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tisPressed={ currentPickerType === 'custom' }\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</Header>\n\t\t\t</Spacer>\n\t\t\t<div>\n\t\t\t\t{ currentPickerType === 'select' && (\n\t\t\t\t\t<FontSizePickerSelect\n\t\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t\tfontSizes={ fontSizes }\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\tdisableCustomFontSizes={ disableCustomFontSizes }\n\t\t\t\t\t\tsize={ size }\n\t\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\t\tif ( newValue === undefined ) {\n\t\t\t\t\t\t\t\tonChange?.( undefined );\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tonChange?.(\n\t\t\t\t\t\t\t\t\thasUnits ? newValue : Number( newValue ),\n\t\t\t\t\t\t\t\t\tfontSizes.find(\n\t\t\t\t\t\t\t\t\t\t( fontSize ) =>\n\t\t\t\t\t\t\t\t\t\t\tfontSize.size === newValue\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tonSelectCustom={ () => setUserRequestedCustom( true ) }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t{ currentPickerType === 'togglegroup' && (\n\t\t\t\t\t<FontSizePickerToggleGroup\n\t\t\t\t\t\tfontSizes={ fontSizes }\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t\tsize={ size }\n\t\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\t\tif ( newValue === undefined ) {\n\t\t\t\t\t\t\t\tonChange?.( undefined );\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tonChange?.(\n\t\t\t\t\t\t\t\t\thasUnits ? newValue : Number( newValue ),\n\t\t\t\t\t\t\t\t\tfontSizes.find(\n\t\t\t\t\t\t\t\t\t\t( fontSize ) =>\n\t\t\t\t\t\t\t\t\t\t\tfontSize.size === newValue\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t{ currentPickerType === 'custom' && (\n\t\t\t\t\t<Flex className=\"components-font-size-picker__custom-size-control\">\n\t\t\t\t\t\t<FlexItem isBlock>\n\t\t\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t\t\t\tlabel={ __( 'Custom' ) }\n\t\t\t\t\t\t\t\tlabelPosition=\"top\"\n\t\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\t\t\t\tsetUserRequestedCustom( true );\n\n\t\t\t\t\t\t\t\t\tif ( newValue === undefined ) {\n\t\t\t\t\t\t\t\t\t\tonChange?.( undefined );\n\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\tonChange?.(\n\t\t\t\t\t\t\t\t\t\t\thasUnits\n\t\t\t\t\t\t\t\t\t\t\t\t? newValue\n\t\t\t\t\t\t\t\t\t\t\t\t: parseInt( newValue, 10 )\n\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\tsize={ size }\n\t\t\t\t\t\t\t\tunits={ hasUnits ? units : [] }\n\t\t\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t{ withSlider && (\n\t\t\t\t\t\t\t<FlexItem isBlock>\n\t\t\t\t\t\t\t\t<Spacer marginX={ 2 } marginBottom={ 0 }>\n\t\t\t\t\t\t\t\t\t<RangeControl\n\t\t\t\t\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t\t\t\t\t__next40pxDefaultSize={\n\t\t\t\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t__shouldNotWarnDeprecated36pxSize\n\t\t\t\t\t\t\t\t\t\tclassName=\"components-font-size-picker__custom-input\"\n\t\t\t\t\t\t\t\t\t\tlabel={ __( 'Custom Size' ) }\n\t\t\t\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\t\t\t\tvalue={ valueQuantity }\n\t\t\t\t\t\t\t\t\t\tinitialPosition={ fallbackFontSize }\n\t\t\t\t\t\t\t\t\t\twithInputField={ false }\n\t\t\t\t\t\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\t\t\t\t\t\tsetUserRequestedCustom( true );\n\n\t\t\t\t\t\t\t\t\t\t\tif ( newValue === undefined ) {\n\t\t\t\t\t\t\t\t\t\t\t\tonChange?.( undefined );\n\t\t\t\t\t\t\t\t\t\t\t} else if ( hasUnits ) {\n\t\t\t\t\t\t\t\t\t\t\t\tonChange?.(\n\t\t\t\t\t\t\t\t\t\t\t\t\tnewValue +\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t( valueUnit ?? 'px' )\n\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\tonChange?.( newValue );\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\t\t\t\t\tmax={ isValueUnitRelative ? 10 : 100 }\n\t\t\t\t\t\t\t\t\t\tstep={ isValueUnitRelative ? 0.1 : 1 }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</Spacer>\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ withReset && (\n\t\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tdisabled={ isDisabled }\n\t\t\t\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\tonChange?.( undefined );\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\t\tsize={\n\t\t\t\t\t\t\t\t\t\tsize === '__unstable-large' ||\n\t\t\t\t\t\t\t\t\t\tprops.__next40pxDefaultSize\n\t\t\t\t\t\t\t\t\t\t\t? 'default'\n\t\t\t\t\t\t\t\t\t\t\t: 'small'\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ __( 'Reset' ) }\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</Flex>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t</Container>\n\t);\n};\n\nexport const FontSizePicker = forwardRef( UnforwardedFontSizePicker );\n\nexport default FontSizePicker;\n"],"mappings":"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","ignoreList":[]}

package/build-module/form-file-upload/index.js

@@ -44,6 +44,12 @@ export function FormFileUpload({
     ...props,
     children: children
   });
+  // @todo: Temporary fix a bug that prevents Chromium browsers from selecting ".heic" files
+  // from the file upload. See https://core.trac.wordpress.org/ticket/62268#comment:4.
+  // This can be removed once the Chromium fix is in the stable channel.
+  // Prevent Safari from adding "image/heic" and "image/heif" to the accept attribute.
+  const isSafari = globalThis.window?.navigator.userAgent.includes('Safari') && !globalThis.window?.navigator.userAgent.includes('Chrome') && !globalThis.window?.navigator.userAgent.includes('Chromium');
+  const compatAccept = !isSafari && !!accept?.includes('image/*') ? `${accept}, image/heic, image/heif` : accept;
   return /*#__PURE__*/_jsxs("div", {
     className: "components-form-file-upload",
     children: [ui, /*#__PURE__*/_jsx("input", {
@@ -53,7 +59,7 @@ export function FormFileUpload({
       style: {
         display: 'none'
       },
-      accept: accept,
+      accept: compatAccept,
       onChange: onChange,
       onClick: onClick,
       "data-testid": "form-file-upload-input"

package/build-module/form-file-upload/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["useRef","Button","jsx","_jsx","jsxs","_jsxs","FormFileUpload","accept","children","multiple","onChange","onClick","render","props","ref","openFileDialog","current","click","ui","className","type","style","display"],"sources":["@wordpress/components/src/form-file-upload/index.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport type { WordPressComponentProps } from '../context';\nimport type { FormFileUploadProps } from './types';\n\n/**\n * FormFileUpload is a component that allows users to select files from their local device.\n *\n * ```jsx\n * import { FormFileUpload } from '@wordpress/components';\n *\n * const MyFormFileUpload = () => (\n *   <FormFileUpload\n *     accept=\"image/*\"\n *     onChange={ ( event ) => console.log( event.currentTarget.files ) }\n *   >\n *     Upload\n *   </FormFileUpload>\n * );\n * ```\n */\nexport function FormFileUpload( {\n\taccept,\n\tchildren,\n\tmultiple = false,\n\tonChange,\n\tonClick,\n\trender,\n\t...props\n}: WordPressComponentProps< FormFileUploadProps, 'button', false > ) {\n\tconst ref = useRef< HTMLInputElement >( null );\n\tconst openFileDialog = () => {\n\t\tref.current?.click();\n\t};\n\n\tconst ui = render ? (\n\t\trender( { openFileDialog } )\n\t) : (\n\t\t<Button onClick={ openFileDialog } { ...props }>\n\t\t\t{ children }\n\t\t</Button>\n\t);\n\n\treturn (\n\t\t<div className=\"components-form-file-upload\">\n\t\t\t{ ui }\n\t\t\t<input\n\t\t\t\ttype=\"file\"\n\t\t\t\tref={ ref }\n\t\t\t\tmultiple={ multiple }\n\t\t\t\tstyle={ { display: 'none' } }\n\t\t\t\taccept={ accept }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tonClick={ onClick }\n\t\t\t\tdata-testid=\"form-file-upload-input\"\n\t\t\t/>\n\t\t</div>\n\t);\n}\n\nexport default FormFileUpload;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,MAAM,QAAQ,oBAAoB;;AAE3C;AACA;AACA;AACA,OAAOC,MAAM,MAAM,WAAW;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAI/B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,cAAcA,CAAE;EAC/BC,MAAM;EACNC,QAAQ;EACRC,QAAQ,GAAG,KAAK;EAChBC,QAAQ;EACRC,OAAO;EACPC,MAAM;EACN,GAAGC;AAC6D,CAAC,EAAG;EACpE,MAAMC,GAAG,GAAGd,MAAM,CAAsB,IAAK,CAAC;EAC9C,MAAMe,cAAc,GAAGA,CAAA,KAAM;IAC5BD,GAAG,CAACE,OAAO,EAAEC,KAAK,CAAC,CAAC;EACrB,CAAC;EAED,MAAMC,EAAE,GAAGN,MAAM,GAChBA,MAAM,CAAE;IAAEG;EAAe,CAAE,CAAC,gBAE5BZ,IAAA,CAACF,MAAM;IAACU,OAAO,EAAGI,cAAgB;IAAA,GAAMF,KAAK;IAAAL,QAAA,EAC1CA;EAAQ,CACH,CACR;EAED,oBACCH,KAAA;IAAKc,SAAS,EAAC,6BAA6B;IAAAX,QAAA,GACzCU,EAAE,eACJf,IAAA;MACCiB,IAAI,EAAC,MAAM;MACXN,GAAG,EAAGA,GAAK;MACXL,QAAQ,EAAGA,QAAU;MACrBY,KAAK,EAAG;QAAEC,OAAO,EAAE;MAAO,CAAG;MAC7Bf,MAAM,EAAGA,MAAQ;MACjBG,QAAQ,EAAGA,QAAU;MACrBC,OAAO,EAAGA,OAAS;MACnB,eAAY;IAAwB,CACpC,CAAC;EAAA,CACE,CAAC;AAER;AAEA,eAAeL,cAAc","ignoreList":[]}
+{"version":3,"names":["useRef","Button","jsx","_jsx","jsxs","_jsxs","FormFileUpload","accept","children","multiple","onChange","onClick","render","props","ref","openFileDialog","current","click","ui","isSafari","globalThis","window","navigator","userAgent","includes","compatAccept","className","type","style","display"],"sources":["@wordpress/components/src/form-file-upload/index.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport type { WordPressComponentProps } from '../context';\nimport type { FormFileUploadProps } from './types';\n\n/**\n * FormFileUpload is a component that allows users to select files from their local device.\n *\n * ```jsx\n * import { FormFileUpload } from '@wordpress/components';\n *\n * const MyFormFileUpload = () => (\n *   <FormFileUpload\n *     accept=\"image/*\"\n *     onChange={ ( event ) => console.log( event.currentTarget.files ) }\n *   >\n *     Upload\n *   </FormFileUpload>\n * );\n * ```\n */\nexport function FormFileUpload( {\n\taccept,\n\tchildren,\n\tmultiple = false,\n\tonChange,\n\tonClick,\n\trender,\n\t...props\n}: WordPressComponentProps< FormFileUploadProps, 'button', false > ) {\n\tconst ref = useRef< HTMLInputElement >( null );\n\tconst openFileDialog = () => {\n\t\tref.current?.click();\n\t};\n\n\tconst ui = render ? (\n\t\trender( { openFileDialog } )\n\t) : (\n\t\t<Button onClick={ openFileDialog } { ...props }>\n\t\t\t{ children }\n\t\t</Button>\n\t);\n\t// @todo: Temporary fix a bug that prevents Chromium browsers from selecting \".heic\" files\n\t// from the file upload. See https://core.trac.wordpress.org/ticket/62268#comment:4.\n\t// This can be removed once the Chromium fix is in the stable channel.\n\t// Prevent Safari from adding \"image/heic\" and \"image/heif\" to the accept attribute.\n\tconst isSafari =\n\t\tglobalThis.window?.navigator.userAgent.includes( 'Safari' ) &&\n\t\t! globalThis.window?.navigator.userAgent.includes( 'Chrome' ) &&\n\t\t! globalThis.window?.navigator.userAgent.includes( 'Chromium' );\n\tconst compatAccept =\n\t\t! isSafari && !! accept?.includes( 'image/*' )\n\t\t\t? `${ accept }, image/heic, image/heif`\n\t\t\t: accept;\n\n\treturn (\n\t\t<div className=\"components-form-file-upload\">\n\t\t\t{ ui }\n\t\t\t<input\n\t\t\t\ttype=\"file\"\n\t\t\t\tref={ ref }\n\t\t\t\tmultiple={ multiple }\n\t\t\t\tstyle={ { display: 'none' } }\n\t\t\t\taccept={ compatAccept }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tonClick={ onClick }\n\t\t\t\tdata-testid=\"form-file-upload-input\"\n\t\t\t/>\n\t\t</div>\n\t);\n}\n\nexport default FormFileUpload;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,MAAM,QAAQ,oBAAoB;;AAE3C;AACA;AACA;AACA,OAAOC,MAAM,MAAM,WAAW;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAI/B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,cAAcA,CAAE;EAC/BC,MAAM;EACNC,QAAQ;EACRC,QAAQ,GAAG,KAAK;EAChBC,QAAQ;EACRC,OAAO;EACPC,MAAM;EACN,GAAGC;AAC6D,CAAC,EAAG;EACpE,MAAMC,GAAG,GAAGd,MAAM,CAAsB,IAAK,CAAC;EAC9C,MAAMe,cAAc,GAAGA,CAAA,KAAM;IAC5BD,GAAG,CAACE,OAAO,EAAEC,KAAK,CAAC,CAAC;EACrB,CAAC;EAED,MAAMC,EAAE,GAAGN,MAAM,GAChBA,MAAM,CAAE;IAAEG;EAAe,CAAE,CAAC,gBAE5BZ,IAAA,CAACF,MAAM;IAACU,OAAO,EAAGI,cAAgB;IAAA,GAAMF,KAAK;IAAAL,QAAA,EAC1CA;EAAQ,CACH,CACR;EACD;EACA;EACA;EACA;EACA,MAAMW,QAAQ,GACbC,UAAU,CAACC,MAAM,EAAEC,SAAS,CAACC,SAAS,CAACC,QAAQ,CAAE,QAAS,CAAC,IAC3D,CAAEJ,UAAU,CAACC,MAAM,EAAEC,SAAS,CAACC,SAAS,CAACC,QAAQ,CAAE,QAAS,CAAC,IAC7D,CAAEJ,UAAU,CAACC,MAAM,EAAEC,SAAS,CAACC,SAAS,CAACC,QAAQ,CAAE,UAAW,CAAC;EAChE,MAAMC,YAAY,GACjB,CAAEN,QAAQ,IAAI,CAAC,CAAEZ,MAAM,EAAEiB,QAAQ,CAAE,SAAU,CAAC,GAC3C,GAAIjB,MAAM,0BAA2B,GACrCA,MAAM;EAEV,oBACCF,KAAA;IAAKqB,SAAS,EAAC,6BAA6B;IAAAlB,QAAA,GACzCU,EAAE,eACJf,IAAA;MACCwB,IAAI,EAAC,MAAM;MACXb,GAAG,EAAGA,GAAK;MACXL,QAAQ,EAAGA,QAAU;MACrBmB,KAAK,EAAG;QAAEC,OAAO,EAAE;MAAO,CAAG;MAC7BtB,MAAM,EAAGkB,YAAc;MACvBf,QAAQ,EAAGA,QAAU;MACrBC,OAAO,EAAGA,OAAS;MACnB,eAAY;IAAwB,CACpC,CAAC;EAAA,CACE,CAAC;AAER;AAEA,eAAeL,cAAc","ignoreList":[]}

package/build-module/form-token-field/token.js

@@ -62,6 +62,7 @@ export default function Token({
       })]
     }), /*#__PURE__*/_jsx(Button, {
       className: "components-form-token-field__remove-token",
+      size: "small",
       icon: closeSmall,
       onClick: !disabled ? onClick : undefined
       // Disable reason: Even when FormTokenField itself is accessibly disabled, token reset buttons shouldn't be in the tab sequence.

package/build-module/form-token-field/token.js.map

@@ -1 +1 @@
-{"version":3,"names":["clsx","useInstanceId","__","sprintf","closeSmall","Button","VisuallyHidden","jsx","_jsx","jsxs","_jsxs","noop","Token","value","status","title","displayTransform","isBorderless","disabled","onClickRemove","onMouseEnter","onMouseLeave","messages","termPosition","termsCount","instanceId","tokenClasses","onClick","transformedValue","termPositionAndCount","className","children","id","as","icon","undefined","label","remove"],"sources":["@wordpress/components/src/form-token-field/token.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { closeSmall } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport { VisuallyHidden } from '../visually-hidden';\nimport type { TokenProps } from './types';\n\nconst noop = () => {};\n\nexport default function Token( {\n\tvalue,\n\tstatus,\n\ttitle,\n\tdisplayTransform,\n\tisBorderless = false,\n\tdisabled = false,\n\tonClickRemove = noop,\n\tonMouseEnter,\n\tonMouseLeave,\n\tmessages,\n\ttermPosition,\n\ttermsCount,\n}: TokenProps ) {\n\tconst instanceId = useInstanceId( Token );\n\tconst tokenClasses = clsx( 'components-form-token-field__token', {\n\t\t'is-error': 'error' === status,\n\t\t'is-success': 'success' === status,\n\t\t'is-validating': 'validating' === status,\n\t\t'is-borderless': isBorderless,\n\t\t'is-disabled': disabled,\n\t} );\n\n\tconst onClick = () => onClickRemove( { value } );\n\n\tconst transformedValue = displayTransform( value );\n\tconst termPositionAndCount = sprintf(\n\t\t/* translators: 1: term name, 2: term position in a set of terms, 3: total term set count. */\n\t\t__( '%1$s (%2$s of %3$s)' ),\n\t\ttransformedValue,\n\t\ttermPosition,\n\t\ttermsCount\n\t);\n\n\treturn (\n\t\t<span\n\t\t\tclassName={ tokenClasses }\n\t\t\tonMouseEnter={ onMouseEnter }\n\t\t\tonMouseLeave={ onMouseLeave }\n\t\t\ttitle={ title }\n\t\t>\n\t\t\t<span\n\t\t\t\tclassName=\"components-form-token-field__token-text\"\n\t\t\t\tid={ `components-form-token-field__token-text-${ instanceId }` }\n\t\t\t>\n\t\t\t\t<VisuallyHidden as=\"span\">\n\t\t\t\t\t{ termPositionAndCount }\n\t\t\t\t</VisuallyHidden>\n\t\t\t\t<span aria-hidden=\"true\">{ transformedValue }</span>\n\t\t\t</span>\n\n\t\t\t<Button\n\t\t\t\tclassName=\"components-form-token-field__remove-token\"\n\t\t\t\ticon={ closeSmall }\n\t\t\t\tonClick={ ! disabled ? onClick : undefined }\n\t\t\t\t// Disable reason: Even when FormTokenField itself is accessibly disabled, token reset buttons shouldn't be in the tab sequence.\n\t\t\t\t// eslint-disable-next-line no-restricted-syntax\n\t\t\t\tdisabled={ disabled }\n\t\t\t\tlabel={ messages.remove }\n\t\t\t\taria-describedby={ `components-form-token-field__token-text-${ instanceId }` }\n\t\t\t/>\n\t\t</span>\n\t);\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,IAAI,MAAM,MAAM;;AAEvB;AACA;AACA;AACA,SAASC,aAAa,QAAQ,oBAAoB;AAClD,SAASC,EAAE,EAAEC,OAAO,QAAQ,iBAAiB;AAC7C,SAASC,UAAU,QAAQ,kBAAkB;;AAE7C;AACA;AACA;AACA,OAAOC,MAAM,MAAM,WAAW;AAC9B,SAASC,cAAc,QAAQ,oBAAoB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAGpD,MAAMC,IAAI,GAAGA,CAAA,KAAM,CAAC,CAAC;AAErB,eAAe,SAASC,KAAKA,CAAE;EAC9BC,KAAK;EACLC,MAAM;EACNC,KAAK;EACLC,gBAAgB;EAChBC,YAAY,GAAG,KAAK;EACpBC,QAAQ,GAAG,KAAK;EAChBC,aAAa,GAAGR,IAAI;EACpBS,YAAY;EACZC,YAAY;EACZC,QAAQ;EACRC,YAAY;EACZC;AACW,CAAC,EAAG;EACf,MAAMC,UAAU,GAAGxB,aAAa,CAAEW,KAAM,CAAC;EACzC,MAAMc,YAAY,GAAG1B,IAAI,CAAE,oCAAoC,EAAE;IAChE,UAAU,EAAE,OAAO,KAAKc,MAAM;IAC9B,YAAY,EAAE,SAAS,KAAKA,MAAM;IAClC,eAAe,EAAE,YAAY,KAAKA,MAAM;IACxC,eAAe,EAAEG,YAAY;IAC7B,aAAa,EAAEC;EAChB,CAAE,CAAC;EAEH,MAAMS,OAAO,GAAGA,CAAA,KAAMR,aAAa,CAAE;IAAEN;EAAM,CAAE,CAAC;EAEhD,MAAMe,gBAAgB,GAAGZ,gBAAgB,CAAEH,KAAM,CAAC;EAClD,MAAMgB,oBAAoB,GAAG1B,OAAO,CACnC;EACAD,EAAE,CAAE,qBAAsB,CAAC,EAC3B0B,gBAAgB,EAChBL,YAAY,EACZC,UACD,CAAC;EAED,oBACCd,KAAA;IACCoB,SAAS,EAAGJ,YAAc;IAC1BN,YAAY,EAAGA,YAAc;IAC7BC,YAAY,EAAGA,YAAc;IAC7BN,KAAK,EAAGA,KAAO;IAAAgB,QAAA,gBAEfrB,KAAA;MACCoB,SAAS,EAAC,yCAAyC;MACnDE,EAAE,EAAG,2CAA4CP,UAAU,EAAK;MAAAM,QAAA,gBAEhEvB,IAAA,CAACF,cAAc;QAAC2B,EAAE,EAAC,MAAM;QAAAF,QAAA,EACtBF;MAAoB,CACP,CAAC,eACjBrB,IAAA;QAAM,eAAY,MAAM;QAAAuB,QAAA,EAAGH;MAAgB,CAAQ,CAAC;IAAA,CAC/C,CAAC,eAEPpB,IAAA,CAACH,MAAM;MACNyB,SAAS,EAAC,2CAA2C;MACrDI,IAAI,EAAG9B,UAAY;MACnBuB,OAAO,EAAG,CAAET,QAAQ,GAAGS,OAAO,GAAGQ;MACjC;MACA;MAAA;MACAjB,QAAQ,EAAGA,QAAU;MACrBkB,KAAK,EAAGd,QAAQ,CAACe,MAAQ;MACzB,oBAAmB,2CAA4CZ,UAAU;IAAK,CAC9E,CAAC;EAAA,CACG,CAAC;AAET","ignoreList":[]}
+{"version":3,"names":["clsx","useInstanceId","__","sprintf","closeSmall","Button","VisuallyHidden","jsx","_jsx","jsxs","_jsxs","noop","Token","value","status","title","displayTransform","isBorderless","disabled","onClickRemove","onMouseEnter","onMouseLeave","messages","termPosition","termsCount","instanceId","tokenClasses","onClick","transformedValue","termPositionAndCount","className","children","id","as","size","icon","undefined","label","remove"],"sources":["@wordpress/components/src/form-token-field/token.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { closeSmall } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport { VisuallyHidden } from '../visually-hidden';\nimport type { TokenProps } from './types';\n\nconst noop = () => {};\n\nexport default function Token( {\n\tvalue,\n\tstatus,\n\ttitle,\n\tdisplayTransform,\n\tisBorderless = false,\n\tdisabled = false,\n\tonClickRemove = noop,\n\tonMouseEnter,\n\tonMouseLeave,\n\tmessages,\n\ttermPosition,\n\ttermsCount,\n}: TokenProps ) {\n\tconst instanceId = useInstanceId( Token );\n\tconst tokenClasses = clsx( 'components-form-token-field__token', {\n\t\t'is-error': 'error' === status,\n\t\t'is-success': 'success' === status,\n\t\t'is-validating': 'validating' === status,\n\t\t'is-borderless': isBorderless,\n\t\t'is-disabled': disabled,\n\t} );\n\n\tconst onClick = () => onClickRemove( { value } );\n\n\tconst transformedValue = displayTransform( value );\n\tconst termPositionAndCount = sprintf(\n\t\t/* translators: 1: term name, 2: term position in a set of terms, 3: total term set count. */\n\t\t__( '%1$s (%2$s of %3$s)' ),\n\t\ttransformedValue,\n\t\ttermPosition,\n\t\ttermsCount\n\t);\n\n\treturn (\n\t\t<span\n\t\t\tclassName={ tokenClasses }\n\t\t\tonMouseEnter={ onMouseEnter }\n\t\t\tonMouseLeave={ onMouseLeave }\n\t\t\ttitle={ title }\n\t\t>\n\t\t\t<span\n\t\t\t\tclassName=\"components-form-token-field__token-text\"\n\t\t\t\tid={ `components-form-token-field__token-text-${ instanceId }` }\n\t\t\t>\n\t\t\t\t<VisuallyHidden as=\"span\">\n\t\t\t\t\t{ termPositionAndCount }\n\t\t\t\t</VisuallyHidden>\n\t\t\t\t<span aria-hidden=\"true\">{ transformedValue }</span>\n\t\t\t</span>\n\n\t\t\t<Button\n\t\t\t\tclassName=\"components-form-token-field__remove-token\"\n\t\t\t\tsize=\"small\"\n\t\t\t\ticon={ closeSmall }\n\t\t\t\tonClick={ ! disabled ? onClick : undefined }\n\t\t\t\t// Disable reason: Even when FormTokenField itself is accessibly disabled, token reset buttons shouldn't be in the tab sequence.\n\t\t\t\t// eslint-disable-next-line no-restricted-syntax\n\t\t\t\tdisabled={ disabled }\n\t\t\t\tlabel={ messages.remove }\n\t\t\t\taria-describedby={ `components-form-token-field__token-text-${ instanceId }` }\n\t\t\t/>\n\t\t</span>\n\t);\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,IAAI,MAAM,MAAM;;AAEvB;AACA;AACA;AACA,SAASC,aAAa,QAAQ,oBAAoB;AAClD,SAASC,EAAE,EAAEC,OAAO,QAAQ,iBAAiB;AAC7C,SAASC,UAAU,QAAQ,kBAAkB;;AAE7C;AACA;AACA;AACA,OAAOC,MAAM,MAAM,WAAW;AAC9B,SAASC,cAAc,QAAQ,oBAAoB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAGpD,MAAMC,IAAI,GAAGA,CAAA,KAAM,CAAC,CAAC;AAErB,eAAe,SAASC,KAAKA,CAAE;EAC9BC,KAAK;EACLC,MAAM;EACNC,KAAK;EACLC,gBAAgB;EAChBC,YAAY,GAAG,KAAK;EACpBC,QAAQ,GAAG,KAAK;EAChBC,aAAa,GAAGR,IAAI;EACpBS,YAAY;EACZC,YAAY;EACZC,QAAQ;EACRC,YAAY;EACZC;AACW,CAAC,EAAG;EACf,MAAMC,UAAU,GAAGxB,aAAa,CAAEW,KAAM,CAAC;EACzC,MAAMc,YAAY,GAAG1B,IAAI,CAAE,oCAAoC,EAAE;IAChE,UAAU,EAAE,OAAO,KAAKc,MAAM;IAC9B,YAAY,EAAE,SAAS,KAAKA,MAAM;IAClC,eAAe,EAAE,YAAY,KAAKA,MAAM;IACxC,eAAe,EAAEG,YAAY;IAC7B,aAAa,EAAEC;EAChB,CAAE,CAAC;EAEH,MAAMS,OAAO,GAAGA,CAAA,KAAMR,aAAa,CAAE;IAAEN;EAAM,CAAE,CAAC;EAEhD,MAAMe,gBAAgB,GAAGZ,gBAAgB,CAAEH,KAAM,CAAC;EAClD,MAAMgB,oBAAoB,GAAG1B,OAAO,CACnC;EACAD,EAAE,CAAE,qBAAsB,CAAC,EAC3B0B,gBAAgB,EAChBL,YAAY,EACZC,UACD,CAAC;EAED,oBACCd,KAAA;IACCoB,SAAS,EAAGJ,YAAc;IAC1BN,YAAY,EAAGA,YAAc;IAC7BC,YAAY,EAAGA,YAAc;IAC7BN,KAAK,EAAGA,KAAO;IAAAgB,QAAA,gBAEfrB,KAAA;MACCoB,SAAS,EAAC,yCAAyC;MACnDE,EAAE,EAAG,2CAA4CP,UAAU,EAAK;MAAAM,QAAA,gBAEhEvB,IAAA,CAACF,cAAc;QAAC2B,EAAE,EAAC,MAAM;QAAAF,QAAA,EACtBF;MAAoB,CACP,CAAC,eACjBrB,IAAA;QAAM,eAAY,MAAM;QAAAuB,QAAA,EAAGH;MAAgB,CAAQ,CAAC;IAAA,CAC/C,CAAC,eAEPpB,IAAA,CAACH,MAAM;MACNyB,SAAS,EAAC,2CAA2C;MACrDI,IAAI,EAAC,OAAO;MACZC,IAAI,EAAG/B,UAAY;MACnBuB,OAAO,EAAG,CAAET,QAAQ,GAAGS,OAAO,GAAGS;MACjC;MACA;MAAA;MACAlB,QAAQ,EAAGA,QAAU;MACrBmB,KAAK,EAAGf,QAAQ,CAACgB,MAAQ;MACzB,oBAAmB,2CAA4Cb,UAAU;IAAK,CAC9E,CAAC;EAAA,CACG,CAAC;AAET","ignoreList":[]}

package/build-module/gradient-picker/index.js

@@ -141,44 +141,44 @@ function Component(props) {
 }
 
 /**
- *  GradientPicker is a React component that renders a color gradient picker to
+ * GradientPicker is a React component that renders a color gradient picker to
  * define a multi step gradient. There's either a _linear_ or a _radial_ type
  * available.
  *
  * ```jsx
- *import { GradientPicker } from '@wordpress/components';
- *import { useState } from '@wordpress/element';
+ * import { useState } from 'react';
+ * import { GradientPicker } from '@wordpress/components';
  *
- *const myGradientPicker = () => {
- *	const [ gradient, setGradient ] = useState( null );
+ * const MyGradientPicker = () => {
+ *   const [ gradient, setGradient ] = useState( null );
  *
- *	return (
- *		<GradientPicker
- *			value={ gradient }
- *			onChange={ ( currentGradient ) => setGradient( currentGradient ) }
- *			gradients={ [
- *				{
- *					name: 'JShine',
- *					gradient:
- *						'linear-gradient(135deg,#12c2e9 0%,#c471ed 50%,#f64f59 100%)',
- *					slug: 'jshine',
- *				},
- *				{
- *					name: 'Moonlit Asteroid',
- *					gradient:
- *						'linear-gradient(135deg,#0F2027 0%, #203A43 0%, #2c5364 100%)',
- *					slug: 'moonlit-asteroid',
- *				},
- *				{
- *					name: 'Rastafarie',
- *					gradient:
- *						'linear-gradient(135deg,#1E9600 0%, #FFF200 0%, #FF0000 100%)',
- *					slug: 'rastafari',
- *				},
- *			] }
- *		/>
- *	);
- *};
+ *   return (
+ *     <GradientPicker
+ *       value={ gradient }
+ *       onChange={ ( currentGradient ) => setGradient( currentGradient ) }
+ *       gradients={ [
+ *         {
+ *           name: 'JShine',
+ *           gradient:
+ *             'linear-gradient(135deg,#12c2e9 0%,#c471ed 50%,#f64f59 100%)',
+ *           slug: 'jshine',
+ *         },
+ *         {
+ *           name: 'Moonlit Asteroid',
+ *           gradient:
+ *             'linear-gradient(135deg,#0F2027 0%, #203A43 0%, #2c5364 100%)',
+ *           slug: 'moonlit-asteroid',
+ *         },
+ *         {
+ *           name: 'Rastafarie',
+ *           gradient:
+ *             'linear-gradient(135deg,#1E9600 0%, #FFF200 0%, #FF0000 100%)',
+ *           slug: 'rastafari',
+ *         },
+ *       ] }
+ *     />
+ *   );
+ * };
  *```
  *
  */
@@ -209,6 +209,8 @@ export function GradientPicker({
       value: value,
       actions: clearable && !disableCustomGradients && /*#__PURE__*/_jsx(CircularOptionPicker.ButtonAction, {
         onClick: clearGradient,
+        accessibleWhenDisabled: true,
+        disabled: !value,
         children: __('Clear')
       }),
       headingLevel: headingLevel