@wordpress/block-editor 12.26.0 → 13.0.0

package/build-module/components/date-format-picker/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_x","__","dateI18n","useState","createInterpolateElement","TextControl","ExternalLink","VisuallyHidden","CustomSelectControl","ToggleControl","__experimentalVStack","VStack","EXAMPLE_DATE","Date","DateFormatPicker","format","defaultFormat","onChange","createElement","className","as","__nextHasNoMarginBottom","label","help","checked","NonDefaultControls","_suggestedOptions$fin","suggestedFormats","Set","suggestedOptions","map","suggestedFormat","index","key","name","customOption","__experimentalHint","isCustom","setIsCustom","includes","options","value","find","option","selectedItem","hideLabelFromVision","Link","href"],"sources":["@wordpress/block-editor/src/components/date-format-picker/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { _x, __ } from '@wordpress/i18n';\nimport { dateI18n } from '@wordpress/date';\nimport { useState, createInterpolateElement } from '@wordpress/element';\nimport {\n\tTextControl,\n\tExternalLink,\n\tVisuallyHidden,\n\tCustomSelectControl,\n\tToggleControl,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\n\n// So that we can illustrate the different formats in the dropdown properly,\n// show a date that has a day greater than 12 and a month with more than three\n// letters. Here we're using 2022-01-25 which is when WordPress 5.9 was\n// released.\nconst EXAMPLE_DATE = new Date( 2022, 0, 25 );\n\n/**\n * The `DateFormatPicker` component renders controls that let the user choose a\n * _date format_. That is, how they want their dates to be formatted.\n *\n * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/date-format-picker/README.md\n *\n * @param {Object}                          props\n * @param {string|null}                     props.format        The selected date\n *                                                              format. If\n *                                                              `null`,\n *                                                              _Default_ is\n *                                                              selected.\n * @param {string}                          props.defaultFormat The date format that\n *                                                              will be used if the\n *                                                              user selects\n *                                                              'Default'.\n * @param {( format: string|null ) => void} props.onChange      Called when a\n *                                                              selection is\n *                                                              made. If `null`,\n *                                                              _Default_ is\n *                                                              selected.\n */\nexport default function DateFormatPicker( {\n\tformat,\n\tdefaultFormat,\n\tonChange,\n} ) {\n\treturn (\n\t\t<fieldset className=\"block-editor-date-format-picker\">\n\t\t\t<VisuallyHidden as=\"legend\">{ __( 'Date format' ) }</VisuallyHidden>\n\t\t\t<ToggleControl\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\tlabel={ __( 'Default format' ) }\n\t\t\t\thelp={ `${ __( 'Example:' ) }  ${ dateI18n(\n\t\t\t\t\tdefaultFormat,\n\t\t\t\t\tEXAMPLE_DATE\n\t\t\t\t) }` }\n\t\t\t\tchecked={ ! format }\n\t\t\t\tonChange={ ( checked ) =>\n\t\t\t\t\tonChange( checked ? null : defaultFormat )\n\t\t\t\t}\n\t\t\t/>\n\t\t\t{ format && (\n\t\t\t\t<NonDefaultControls format={ format } onChange={ onChange } />\n\t\t\t) }\n\t\t</fieldset>\n\t);\n}\n\nfunction NonDefaultControls( { format, onChange } ) {\n\t// Suggest a short format, medium format, long format, and a standardised\n\t// (YYYY-MM-DD) format. The short, medium, and long formats are localised as\n\t// different languages have different ways of writing these. For example, 'F\n\t// j, Y' (April 20, 2022) in American English (en_US) is 'j. F Y' (20. April\n\t// 2022) in German (de). The resultant array is de-duplicated as some\n\t// languages will use the same format string for short, medium, and long\n\t// formats.\n\tconst suggestedFormats = [\n\t\t...new Set( [\n\t\t\t/* translators: See https://www.php.net/manual/datetime.format.php */\n\t\t\t'Y-m-d',\n\t\t\t/* translators: See https://www.php.net/manual/datetime.format.php */\n\t\t\t_x( 'n/j/Y', 'short date format' ),\n\t\t\t/* translators: See https://www.php.net/manual/datetime.format.php */\n\t\t\t_x( 'n/j/Y g:i A', 'short date format with time' ),\n\t\t\t/* translators: See https://www.php.net/manual/datetime.format.php */\n\t\t\t_x( 'M j, Y', 'medium date format' ),\n\t\t\t/* translators: See https://www.php.net/manual/datetime.format.php */\n\t\t\t_x( 'M j, Y g:i A', 'medium date format with time' ),\n\t\t\t/* translators: See https://www.php.net/manual/datetime.format.php */\n\t\t\t_x( 'F j, Y', 'long date format' ),\n\t\t\t/* translators: See https://www.php.net/manual/datetime.format.php */\n\t\t\t_x( 'M j', 'short date format without the year' ),\n\t\t] ),\n\t];\n\n\tconst suggestedOptions = suggestedFormats.map(\n\t\t( suggestedFormat, index ) => ( {\n\t\t\tkey: `suggested-${ index }`,\n\t\t\tname: dateI18n( suggestedFormat, EXAMPLE_DATE ),\n\t\t\tformat: suggestedFormat,\n\t\t} )\n\t);\n\tconst customOption = {\n\t\tkey: 'custom',\n\t\tname: __( 'Custom' ),\n\t\tclassName:\n\t\t\t'block-editor-date-format-picker__custom-format-select-control__custom-option',\n\t\t__experimentalHint: __( 'Enter your own date format' ),\n\t};\n\n\tconst [ isCustom, setIsCustom ] = useState(\n\t\t() => !! format && ! suggestedFormats.includes( format )\n\t);\n\n\treturn (\n\t\t<VStack>\n\t\t\t<CustomSelectControl\n\t\t\t\tlabel={ __( 'Choose a format' ) }\n\t\t\t\toptions={ [ ...suggestedOptions, customOption ] }\n\t\t\t\tvalue={\n\t\t\t\t\tisCustom\n\t\t\t\t\t\t? customOption\n\t\t\t\t\t\t: suggestedOptions.find(\n\t\t\t\t\t\t\t\t( option ) => option.format === format\n\t\t\t\t\t\t  ) ?? customOption\n\t\t\t\t}\n\t\t\t\tonChange={ ( { selectedItem } ) => {\n\t\t\t\t\tif ( selectedItem === customOption ) {\n\t\t\t\t\t\tsetIsCustom( true );\n\t\t\t\t\t} else {\n\t\t\t\t\t\tsetIsCustom( false );\n\t\t\t\t\t\tonChange( selectedItem.format );\n\t\t\t\t\t}\n\t\t\t\t} }\n\t\t\t/>\n\t\t\t{ isCustom && (\n\t\t\t\t<TextControl\n\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\tlabel={ __( 'Custom format' ) }\n\t\t\t\t\thideLabelFromVision\n\t\t\t\t\thelp={ createInterpolateElement(\n\t\t\t\t\t\t__(\n\t\t\t\t\t\t\t'Enter a date or time <Link>format string</Link>.'\n\t\t\t\t\t\t),\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tLink: (\n\t\t\t\t\t\t\t\t<ExternalLink\n\t\t\t\t\t\t\t\t\thref={ __(\n\t\t\t\t\t\t\t\t\t\t'https://wordpress.org/documentation/article/customize-date-and-time-format/'\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\tvalue={ format }\n\t\t\t\t\tonChange={ ( value ) => onChange( value ) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_x","__","dateI18n","useState","createInterpolateElement","TextControl","ExternalLink","VisuallyHidden","CustomSelectControl","ToggleControl","__experimentalVStack","VStack","jsx","_jsx","jsxs","_jsxs","EXAMPLE_DATE","Date","DateFormatPicker","format","defaultFormat","onChange","className","children","as","__nextHasNoMarginBottom","label","help","checked","NonDefaultControls","_suggestedOptions$fin","suggestedFormats","Set","suggestedOptions","map","suggestedFormat","index","key","name","customOption","__experimentalHint","isCustom","setIsCustom","includes","options","value","find","option","selectedItem","hideLabelFromVision","Link","href"],"sources":["@wordpress/block-editor/src/components/date-format-picker/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { _x, __ } from '@wordpress/i18n';\nimport { dateI18n } from '@wordpress/date';\nimport { useState, createInterpolateElement } from '@wordpress/element';\nimport {\n\tTextControl,\n\tExternalLink,\n\tVisuallyHidden,\n\tCustomSelectControl,\n\tToggleControl,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\n\n// So that we can illustrate the different formats in the dropdown properly,\n// show a date that has a day greater than 12 and a month with more than three\n// letters. Here we're using 2022-01-25 which is when WordPress 5.9 was\n// released.\nconst EXAMPLE_DATE = new Date( 2022, 0, 25 );\n\n/**\n * The `DateFormatPicker` component renders controls that let the user choose a\n * _date format_. That is, how they want their dates to be formatted.\n *\n * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/date-format-picker/README.md\n *\n * @param {Object}                          props\n * @param {string|null}                     props.format        The selected date\n *                                                              format. If\n *                                                              `null`,\n *                                                              _Default_ is\n *                                                              selected.\n * @param {string}                          props.defaultFormat The date format that\n *                                                              will be used if the\n *                                                              user selects\n *                                                              'Default'.\n * @param {( format: string|null ) => void} props.onChange      Called when a\n *                                                              selection is\n *                                                              made. If `null`,\n *                                                              _Default_ is\n *                                                              selected.\n */\nexport default function DateFormatPicker( {\n\tformat,\n\tdefaultFormat,\n\tonChange,\n} ) {\n\treturn (\n\t\t<fieldset className=\"block-editor-date-format-picker\">\n\t\t\t<VisuallyHidden as=\"legend\">{ __( 'Date format' ) }</VisuallyHidden>\n\t\t\t<ToggleControl\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\tlabel={ __( 'Default format' ) }\n\t\t\t\thelp={ `${ __( 'Example:' ) }  ${ dateI18n(\n\t\t\t\t\tdefaultFormat,\n\t\t\t\t\tEXAMPLE_DATE\n\t\t\t\t) }` }\n\t\t\t\tchecked={ ! format }\n\t\t\t\tonChange={ ( checked ) =>\n\t\t\t\t\tonChange( checked ? null : defaultFormat )\n\t\t\t\t}\n\t\t\t/>\n\t\t\t{ format && (\n\t\t\t\t<NonDefaultControls format={ format } onChange={ onChange } />\n\t\t\t) }\n\t\t</fieldset>\n\t);\n}\n\nfunction NonDefaultControls( { format, onChange } ) {\n\t// Suggest a short format, medium format, long format, and a standardised\n\t// (YYYY-MM-DD) format. The short, medium, and long formats are localised as\n\t// different languages have different ways of writing these. For example, 'F\n\t// j, Y' (April 20, 2022) in American English (en_US) is 'j. F Y' (20. April\n\t// 2022) in German (de). The resultant array is de-duplicated as some\n\t// languages will use the same format string for short, medium, and long\n\t// formats.\n\tconst suggestedFormats = [\n\t\t...new Set( [\n\t\t\t/* translators: See https://www.php.net/manual/datetime.format.php */\n\t\t\t'Y-m-d',\n\t\t\t/* translators: See https://www.php.net/manual/datetime.format.php */\n\t\t\t_x( 'n/j/Y', 'short date format' ),\n\t\t\t/* translators: See https://www.php.net/manual/datetime.format.php */\n\t\t\t_x( 'n/j/Y g:i A', 'short date format with time' ),\n\t\t\t/* translators: See https://www.php.net/manual/datetime.format.php */\n\t\t\t_x( 'M j, Y', 'medium date format' ),\n\t\t\t/* translators: See https://www.php.net/manual/datetime.format.php */\n\t\t\t_x( 'M j, Y g:i A', 'medium date format with time' ),\n\t\t\t/* translators: See https://www.php.net/manual/datetime.format.php */\n\t\t\t_x( 'F j, Y', 'long date format' ),\n\t\t\t/* translators: See https://www.php.net/manual/datetime.format.php */\n\t\t\t_x( 'M j', 'short date format without the year' ),\n\t\t] ),\n\t];\n\n\tconst suggestedOptions = suggestedFormats.map(\n\t\t( suggestedFormat, index ) => ( {\n\t\t\tkey: `suggested-${ index }`,\n\t\t\tname: dateI18n( suggestedFormat, EXAMPLE_DATE ),\n\t\t\tformat: suggestedFormat,\n\t\t} )\n\t);\n\tconst customOption = {\n\t\tkey: 'custom',\n\t\tname: __( 'Custom' ),\n\t\tclassName:\n\t\t\t'block-editor-date-format-picker__custom-format-select-control__custom-option',\n\t\t__experimentalHint: __( 'Enter your own date format' ),\n\t};\n\n\tconst [ isCustom, setIsCustom ] = useState(\n\t\t() => !! format && ! suggestedFormats.includes( format )\n\t);\n\n\treturn (\n\t\t<VStack>\n\t\t\t<CustomSelectControl\n\t\t\t\tlabel={ __( 'Choose a format' ) }\n\t\t\t\toptions={ [ ...suggestedOptions, customOption ] }\n\t\t\t\tvalue={\n\t\t\t\t\tisCustom\n\t\t\t\t\t\t? customOption\n\t\t\t\t\t\t: suggestedOptions.find(\n\t\t\t\t\t\t\t\t( option ) => option.format === format\n\t\t\t\t\t\t  ) ?? customOption\n\t\t\t\t}\n\t\t\t\tonChange={ ( { selectedItem } ) => {\n\t\t\t\t\tif ( selectedItem === customOption ) {\n\t\t\t\t\t\tsetIsCustom( true );\n\t\t\t\t\t} else {\n\t\t\t\t\t\tsetIsCustom( false );\n\t\t\t\t\t\tonChange( selectedItem.format );\n\t\t\t\t\t}\n\t\t\t\t} }\n\t\t\t/>\n\t\t\t{ isCustom && (\n\t\t\t\t<TextControl\n\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\tlabel={ __( 'Custom format' ) }\n\t\t\t\t\thideLabelFromVision\n\t\t\t\t\thelp={ createInterpolateElement(\n\t\t\t\t\t\t__(\n\t\t\t\t\t\t\t'Enter a date or time <Link>format string</Link>.'\n\t\t\t\t\t\t),\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tLink: (\n\t\t\t\t\t\t\t\t<ExternalLink\n\t\t\t\t\t\t\t\t\thref={ __(\n\t\t\t\t\t\t\t\t\t\t'https://wordpress.org/documentation/article/customize-date-and-time-format/'\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\tvalue={ format }\n\t\t\t\t\tonChange={ ( value ) => onChange( value ) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}

package/build-module/components/default-block-appender/index.js

@@ -1,4 +1,3 @@
-import { createElement } from "react";
 /**
  * External dependencies
  */
@@ -22,6 +21,8 @@ import { store as blockEditorStore } from '../../store';
  * Zero width non-breaking space, used as padding for the paragraph when it is
  * empty.
  */
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 export const ZWNBSP = '\ufeff';
 export default function DefaultBlockAppender({
   rootClientId
@@ -58,37 +59,39 @@ export default function DefaultBlockAppender({
     insertDefaultBlock(undefined, rootClientId);
     startTyping();
   };
-  return createElement("div", {
+  return /*#__PURE__*/_jsxs("div", {
     "data-root-client-id": rootClientId || '',
     className: clsx('block-editor-default-block-appender', {
       'has-visible-prompt': showPrompt
-    })
-  }, createElement("p", {
-    tabIndex: "0"
-    // We want this element to be styled as a paragraph by themes.
-    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role
-    ,
-    role: "button",
-    "aria-label": __('Add default block')
-    // A wrapping container for this one already has the wp-block className.
-    ,
-    className: "block-editor-default-block-appender__content",
-    onKeyDown: event => {
-      if (ENTER === event.keyCode || SPACE === event.keyCode) {
-        onAppend();
-      }
-    },
-    onClick: () => onAppend(),
-    onFocus: () => {
-      if (showPrompt) {
-        onAppend();
-      }
-    }
-  }, showPrompt ? value : ZWNBSP), createElement(Inserter, {
-    rootClientId: rootClientId,
-    position: "bottom right",
-    isAppender: true,
-    __experimentalIsQuick: true
-  }));
+    }),
+    children: [/*#__PURE__*/_jsx("p", {
+      tabIndex: "0"
+      // We want this element to be styled as a paragraph by themes.
+      // eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role
+      ,
+      role: "button",
+      "aria-label": __('Add default block')
+      // A wrapping container for this one already has the wp-block className.
+      ,
+      className: "block-editor-default-block-appender__content",
+      onKeyDown: event => {
+        if (ENTER === event.keyCode || SPACE === event.keyCode) {
+          onAppend();
+        }
+      },
+      onClick: () => onAppend(),
+      onFocus: () => {
+        if (showPrompt) {
+          onAppend();
+        }
+      },
+      children: showPrompt ? value : ZWNBSP
+    }), /*#__PURE__*/_jsx(Inserter, {
+      rootClientId: rootClientId,
+      position: "bottom right",
+      isAppender: true,
+      __experimentalIsQuick: true
+    })]
+  });
 }
 //# sourceMappingURL=index.js.map

package/build-module/components/default-block-appender/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["clsx","__","decodeEntities","useSelect","useDispatch","ENTER","SPACE","Inserter","store","blockEditorStore","ZWNBSP","DefaultBlockAppender","rootClientId","showPrompt","isLocked","placeholder","select","getBlockCount","getSettings","getTemplateLock","isEmpty","bodyPlaceholder","insertDefaultBlock","startTyping","value","onAppend","undefined","createElement","className","tabIndex","role","onKeyDown","event","keyCode","onClick","onFocus","position","isAppender","__experimentalIsQuick"],"sources":["@wordpress/block-editor/src/components/default-block-appender/index.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { decodeEntities } from '@wordpress/html-entities';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { ENTER, SPACE } from '@wordpress/keycodes';\n\n/**\n * Internal dependencies\n */\nimport Inserter from '../inserter';\nimport { store as blockEditorStore } from '../../store';\n\n/**\n * Zero width non-breaking space, used as padding for the paragraph when it is\n * empty.\n */\nexport const ZWNBSP = '\\ufeff';\n\nexport default function DefaultBlockAppender( { rootClientId } ) {\n\tconst { showPrompt, isLocked, placeholder } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getBlockCount, getSettings, getTemplateLock } =\n\t\t\t\tselect( blockEditorStore );\n\n\t\t\tconst isEmpty = ! getBlockCount( rootClientId );\n\t\t\tconst { bodyPlaceholder } = getSettings();\n\n\t\t\treturn {\n\t\t\t\tshowPrompt: isEmpty,\n\t\t\t\tisLocked: !! getTemplateLock( rootClientId ),\n\t\t\t\tplaceholder: bodyPlaceholder,\n\t\t\t};\n\t\t},\n\t\t[ rootClientId ]\n\t);\n\n\tconst { insertDefaultBlock, startTyping } = useDispatch( blockEditorStore );\n\n\tif ( isLocked ) {\n\t\treturn null;\n\t}\n\n\tconst value =\n\t\tdecodeEntities( placeholder ) || __( 'Type / to choose a block' );\n\n\tconst onAppend = () => {\n\t\tinsertDefaultBlock( undefined, rootClientId );\n\t\tstartTyping();\n\t};\n\n\treturn (\n\t\t<div\n\t\t\tdata-root-client-id={ rootClientId || '' }\n\t\t\tclassName={ clsx( 'block-editor-default-block-appender', {\n\t\t\t\t'has-visible-prompt': showPrompt,\n\t\t\t} ) }\n\t\t>\n\t\t\t<p\n\t\t\t\ttabIndex=\"0\"\n\t\t\t\t// We want this element to be styled as a paragraph by themes.\n\t\t\t\t// eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role\n\t\t\t\trole=\"button\"\n\t\t\t\taria-label={ __( 'Add default block' ) }\n\t\t\t\t// A wrapping container for this one already has the wp-block className.\n\t\t\t\tclassName=\"block-editor-default-block-appender__content\"\n\t\t\t\tonKeyDown={ ( event ) => {\n\t\t\t\t\tif ( ENTER === event.keyCode || SPACE === event.keyCode ) {\n\t\t\t\t\t\tonAppend();\n\t\t\t\t\t}\n\t\t\t\t} }\n\t\t\t\tonClick={ () => onAppend() }\n\t\t\t\tonFocus={ () => {\n\t\t\t\t\tif ( showPrompt ) {\n\t\t\t\t\t\tonAppend();\n\t\t\t\t\t}\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t{ showPrompt ? value : ZWNBSP }\n\t\t\t</p>\n\t\t\t<Inserter\n\t\t\t\trootClientId={ rootClientId }\n\t\t\t\tposition=\"bottom right\"\n\t\t\t\tisAppender\n\t\t\t\t__experimentalIsQuick\n\t\t\t/>\n\t\t</div>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,OAAOA,IAAI,MAAM,MAAM;;AAEvB;AACA;AACA;AACA,SAASC,EAAE,QAAQ,iBAAiB;AACpC,SAASC,cAAc,QAAQ,0BAA0B;AACzD,SAASC,SAAS,EAAEC,WAAW,QAAQ,iBAAiB;AACxD,SAASC,KAAK,EAAEC,KAAK,QAAQ,qBAAqB;;AAElD;AACA;AACA;AACA,OAAOC,QAAQ,MAAM,aAAa;AAClC,SAASC,KAAK,IAAIC,gBAAgB,QAAQ,aAAa;;AAEvD;AACA;AACA;AACA;AACA,OAAO,MAAMC,MAAM,GAAG,QAAQ;AAE9B,eAAe,SAASC,oBAAoBA,CAAE;EAAEC;AAAa,CAAC,EAAG;EAChE,MAAM;IAAEC,UAAU;IAAEC,QAAQ;IAAEC;EAAY,CAAC,GAAGZ,SAAS,CACpDa,MAAM,IAAM;IACb,MAAM;MAAEC,aAAa;MAAEC,WAAW;MAAEC;IAAgB,CAAC,GACpDH,MAAM,CAAEP,gBAAiB,CAAC;IAE3B,MAAMW,OAAO,GAAG,CAAEH,aAAa,CAAEL,YAAa,CAAC;IAC/C,MAAM;MAAES;IAAgB,CAAC,GAAGH,WAAW,CAAC,CAAC;IAEzC,OAAO;MACNL,UAAU,EAAEO,OAAO;MACnBN,QAAQ,EAAE,CAAC,CAAEK,eAAe,CAAEP,YAAa,CAAC;MAC5CG,WAAW,EAAEM;IACd,CAAC;EACF,CAAC,EACD,CAAET,YAAY,CACf,CAAC;EAED,MAAM;IAAEU,kBAAkB;IAAEC;EAAY,CAAC,GAAGnB,WAAW,CAAEK,gBAAiB,CAAC;EAE3E,IAAKK,QAAQ,EAAG;IACf,OAAO,IAAI;EACZ;EAEA,MAAMU,KAAK,GACVtB,cAAc,CAAEa,WAAY,CAAC,IAAId,EAAE,CAAE,0BAA2B,CAAC;EAElE,MAAMwB,QAAQ,GAAGA,CAAA,KAAM;IACtBH,kBAAkB,CAAEI,SAAS,EAAEd,YAAa,CAAC;IAC7CW,WAAW,CAAC,CAAC;EACd,CAAC;EAED,OACCI,aAAA;IACC,uBAAsBf,YAAY,IAAI,EAAI;IAC1CgB,SAAS,EAAG5B,IAAI,CAAE,qCAAqC,EAAE;MACxD,oBAAoB,EAAEa;IACvB,CAAE;EAAG,GAELc,aAAA;IACCE,QAAQ,EAAC;IACT;IACA;IAAA;IACAC,IAAI,EAAC,QAAQ;IACb,cAAa7B,EAAE,CAAE,mBAAoB;IACrC;IAAA;IACA2B,SAAS,EAAC,8CAA8C;IACxDG,SAAS,EAAKC,KAAK,IAAM;MACxB,IAAK3B,KAAK,KAAK2B,KAAK,CAACC,OAAO,IAAI3B,KAAK,KAAK0B,KAAK,CAACC,OAAO,EAAG;QACzDR,QAAQ,CAAC,CAAC;MACX;IACD,CAAG;IACHS,OAAO,EAAGA,CAAA,KAAMT,QAAQ,CAAC,CAAG;IAC5BU,OAAO,EAAGA,CAAA,KAAM;MACf,IAAKtB,UAAU,EAAG;QACjBY,QAAQ,CAAC,CAAC;MACX;IACD;EAAG,GAEDZ,UAAU,GAAGW,KAAK,GAAGd,MACrB,CAAC,EACJiB,aAAA,CAACpB,QAAQ;IACRK,YAAY,EAAGA,YAAc;IAC7BwB,QAAQ,EAAC,cAAc;IACvBC,UAAU;IACVC,qBAAqB;EAAA,CACrB,CACG,CAAC;AAER","ignoreList":[]}
+{"version":3,"names":["clsx","__","decodeEntities","useSelect","useDispatch","ENTER","SPACE","Inserter","store","blockEditorStore","jsx","_jsx","jsxs","_jsxs","ZWNBSP","DefaultBlockAppender","rootClientId","showPrompt","isLocked","placeholder","select","getBlockCount","getSettings","getTemplateLock","isEmpty","bodyPlaceholder","insertDefaultBlock","startTyping","value","onAppend","undefined","className","children","tabIndex","role","onKeyDown","event","keyCode","onClick","onFocus","position","isAppender","__experimentalIsQuick"],"sources":["@wordpress/block-editor/src/components/default-block-appender/index.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { decodeEntities } from '@wordpress/html-entities';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { ENTER, SPACE } from '@wordpress/keycodes';\n\n/**\n * Internal dependencies\n */\nimport Inserter from '../inserter';\nimport { store as blockEditorStore } from '../../store';\n\n/**\n * Zero width non-breaking space, used as padding for the paragraph when it is\n * empty.\n */\nexport const ZWNBSP = '\\ufeff';\n\nexport default function DefaultBlockAppender( { rootClientId } ) {\n\tconst { showPrompt, isLocked, placeholder } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getBlockCount, getSettings, getTemplateLock } =\n\t\t\t\tselect( blockEditorStore );\n\n\t\t\tconst isEmpty = ! getBlockCount( rootClientId );\n\t\t\tconst { bodyPlaceholder } = getSettings();\n\n\t\t\treturn {\n\t\t\t\tshowPrompt: isEmpty,\n\t\t\t\tisLocked: !! getTemplateLock( rootClientId ),\n\t\t\t\tplaceholder: bodyPlaceholder,\n\t\t\t};\n\t\t},\n\t\t[ rootClientId ]\n\t);\n\n\tconst { insertDefaultBlock, startTyping } = useDispatch( blockEditorStore );\n\n\tif ( isLocked ) {\n\t\treturn null;\n\t}\n\n\tconst value =\n\t\tdecodeEntities( placeholder ) || __( 'Type / to choose a block' );\n\n\tconst onAppend = () => {\n\t\tinsertDefaultBlock( undefined, rootClientId );\n\t\tstartTyping();\n\t};\n\n\treturn (\n\t\t<div\n\t\t\tdata-root-client-id={ rootClientId || '' }\n\t\t\tclassName={ clsx( 'block-editor-default-block-appender', {\n\t\t\t\t'has-visible-prompt': showPrompt,\n\t\t\t} ) }\n\t\t>\n\t\t\t<p\n\t\t\t\ttabIndex=\"0\"\n\t\t\t\t// We want this element to be styled as a paragraph by themes.\n\t\t\t\t// eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role\n\t\t\t\trole=\"button\"\n\t\t\t\taria-label={ __( 'Add default block' ) }\n\t\t\t\t// A wrapping container for this one already has the wp-block className.\n\t\t\t\tclassName=\"block-editor-default-block-appender__content\"\n\t\t\t\tonKeyDown={ ( event ) => {\n\t\t\t\t\tif ( ENTER === event.keyCode || SPACE === event.keyCode ) {\n\t\t\t\t\t\tonAppend();\n\t\t\t\t\t}\n\t\t\t\t} }\n\t\t\t\tonClick={ () => onAppend() }\n\t\t\t\tonFocus={ () => {\n\t\t\t\t\tif ( showPrompt ) {\n\t\t\t\t\t\tonAppend();\n\t\t\t\t\t}\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t{ showPrompt ? value : ZWNBSP }\n\t\t\t</p>\n\t\t\t<Inserter\n\t\t\t\trootClientId={ rootClientId }\n\t\t\t\tposition=\"bottom right\"\n\t\t\t\tisAppender\n\t\t\t\t__experimentalIsQuick\n\t\t\t/>\n\t\t</div>\n\t);\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,IAAI,MAAM,MAAM;;AAEvB;AACA;AACA;AACA,SAASC,EAAE,QAAQ,iBAAiB;AACpC,SAASC,cAAc,QAAQ,0BAA0B;AACzD,SAASC,SAAS,EAAEC,WAAW,QAAQ,iBAAiB;AACxD,SAASC,KAAK,EAAEC,KAAK,QAAQ,qBAAqB;;AAElD;AACA;AACA;AACA,OAAOC,QAAQ,MAAM,aAAa;AAClC,SAASC,KAAK,IAAIC,gBAAgB,QAAQ,aAAa;;AAEvD;AACA;AACA;AACA;AAHA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAIA,OAAO,MAAMC,MAAM,GAAG,QAAQ;AAE9B,eAAe,SAASC,oBAAoBA,CAAE;EAAEC;AAAa,CAAC,EAAG;EAChE,MAAM;IAAEC,UAAU;IAAEC,QAAQ;IAAEC;EAAY,CAAC,GAAGhB,SAAS,CACpDiB,MAAM,IAAM;IACb,MAAM;MAAEC,aAAa;MAAEC,WAAW;MAAEC;IAAgB,CAAC,GACpDH,MAAM,CAAEX,gBAAiB,CAAC;IAE3B,MAAMe,OAAO,GAAG,CAAEH,aAAa,CAAEL,YAAa,CAAC;IAC/C,MAAM;MAAES;IAAgB,CAAC,GAAGH,WAAW,CAAC,CAAC;IAEzC,OAAO;MACNL,UAAU,EAAEO,OAAO;MACnBN,QAAQ,EAAE,CAAC,CAAEK,eAAe,CAAEP,YAAa,CAAC;MAC5CG,WAAW,EAAEM;IACd,CAAC;EACF,CAAC,EACD,CAAET,YAAY,CACf,CAAC;EAED,MAAM;IAAEU,kBAAkB;IAAEC;EAAY,CAAC,GAAGvB,WAAW,CAAEK,gBAAiB,CAAC;EAE3E,IAAKS,QAAQ,EAAG;IACf,OAAO,IAAI;EACZ;EAEA,MAAMU,KAAK,GACV1B,cAAc,CAAEiB,WAAY,CAAC,IAAIlB,EAAE,CAAE,0BAA2B,CAAC;EAElE,MAAM4B,QAAQ,GAAGA,CAAA,KAAM;IACtBH,kBAAkB,CAAEI,SAAS,EAAEd,YAAa,CAAC;IAC7CW,WAAW,CAAC,CAAC;EACd,CAAC;EAED,oBACCd,KAAA;IACC,uBAAsBG,YAAY,IAAI,EAAI;IAC1Ce,SAAS,EAAG/B,IAAI,CAAE,qCAAqC,EAAE;MACxD,oBAAoB,EAAEiB;IACvB,CAAE,CAAG;IAAAe,QAAA,gBAELrB,IAAA;MACCsB,QAAQ,EAAC;MACT;MACA;MAAA;MACAC,IAAI,EAAC,QAAQ;MACb,cAAajC,EAAE,CAAE,mBAAoB;MACrC;MAAA;MACA8B,SAAS,EAAC,8CAA8C;MACxDI,SAAS,EAAKC,KAAK,IAAM;QACxB,IAAK/B,KAAK,KAAK+B,KAAK,CAACC,OAAO,IAAI/B,KAAK,KAAK8B,KAAK,CAACC,OAAO,EAAG;UACzDR,QAAQ,CAAC,CAAC;QACX;MACD,CAAG;MACHS,OAAO,EAAGA,CAAA,KAAMT,QAAQ,CAAC,CAAG;MAC5BU,OAAO,EAAGA,CAAA,KAAM;QACf,IAAKtB,UAAU,EAAG;UACjBY,QAAQ,CAAC,CAAC;QACX;MACD,CAAG;MAAAG,QAAA,EAEDf,UAAU,GAAGW,KAAK,GAAGd;IAAM,CAC3B,CAAC,eACJH,IAAA,CAACJ,QAAQ;MACRS,YAAY,EAAGA,YAAc;MAC7BwB,QAAQ,EAAC,cAAc;MACvBC,UAAU;MACVC,qBAAqB;IAAA,CACrB,CAAC;EAAA,CACE,CAAC;AAER","ignoreList":[]}

package/build-module/components/default-block-appender/index.native.js

@@ -1,4 +1,3 @@
-import { createElement } from "react";
 /**
  * External dependencies
  */
@@ -20,6 +19,7 @@ import { getDefaultBlockName } from '@wordpress/blocks';
 import BlockInsertionPoint from '../block-list/insertion-point';
 import styles from './style.scss';
 import { store as blockEditorStore } from '../../store';
+import { jsx as _jsx } from "react/jsx-runtime";
 const hitSlop = {
   top: 22,
   bottom: 22,
@@ -54,18 +54,20 @@ export function DefaultBlockAppender({
   } : undefined;
   const value = typeof placeholder === 'string' ? decodeEntities(placeholder) : __('Start writing…');
   const appenderStyles = [styles.blockHolder, showSeparator && containerStyle];
-  return createElement(Pressable, {
+  return /*#__PURE__*/_jsx(Pressable, {
     onPress: onAppend,
-    hitSlop: hitSlop
-  }, createElement(View, {
-    style: appenderStyles,
-    pointerEvents: "box-only"
-  }, showSeparator ? createElement(BlockInsertionPoint, null) : createElement(RichText, {
-    placeholder: value,
-    onChange: noop,
-    tagName: "p",
-    style: textStyles
-  })));
+    hitSlop: hitSlop,
+    children: /*#__PURE__*/_jsx(View, {
+      style: appenderStyles,
+      pointerEvents: "box-only",
+      children: showSeparator ? /*#__PURE__*/_jsx(BlockInsertionPoint, {}) : /*#__PURE__*/_jsx(RichText, {
+        placeholder: value,
+        onChange: noop,
+        tagName: "p",
+        style: textStyles
+      })
+    })
+  });
 }
 export default compose(withSelect((select, ownProps) => {
   const {

package/build-module/components/default-block-appender/index.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["Pressable","View","__","RichText","compose","decodeEntities","withSelect","withDispatch","getDefaultBlockName","BlockInsertionPoint","styles","store","blockEditorStore","hitSlop","top","bottom","left","right","noop","DefaultBlockAppender","baseGlobalStyles","isLocked","isVisible","onAppend","placeholder","containerStyle","showSeparator","blockGlobalStyles","blocks","fontSize","lineHeight","typography","textStyles","undefined","value","appenderStyles","blockHolder","createElement","onPress","style","pointerEvents","onChange","tagName","select","ownProps","getBlockCount","getBlockName","getSettings","isBlockValid","getTemplateLock","isEmpty","rootClientId","isLastBlockDefault","lastBlockClientId","isLastBlockValid","globalStylesBaseStyles","__experimentalGlobalStylesBaseStyles","dispatch","insertDefaultBlock","startTyping"],"sources":["@wordpress/block-editor/src/components/default-block-appender/index.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { Pressable, View } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { RichText } from '@wordpress/block-editor';\nimport { compose } from '@wordpress/compose';\nimport { decodeEntities } from '@wordpress/html-entities';\nimport { withSelect, withDispatch } from '@wordpress/data';\nimport { getDefaultBlockName } from '@wordpress/blocks';\n\n/**\n * Internal dependencies\n */\nimport BlockInsertionPoint from '../block-list/insertion-point';\nimport styles from './style.scss';\nimport { store as blockEditorStore } from '../../store';\n\nconst hitSlop = { top: 22, bottom: 22, left: 22, right: 22 };\nconst noop = () => {};\n\nexport function DefaultBlockAppender( {\n\tbaseGlobalStyles,\n\tisLocked,\n\tisVisible,\n\tonAppend,\n\tplaceholder,\n\tcontainerStyle,\n\tshowSeparator,\n} ) {\n\tif ( isLocked || ! isVisible ) {\n\t\treturn null;\n\t}\n\tconst blockGlobalStyles = baseGlobalStyles?.blocks?.[ 'core/paragraph' ];\n\tconst { fontSize, lineHeight } = blockGlobalStyles?.typography || {};\n\n\tconst textStyles = blockGlobalStyles?.typography\n\t\t? {\n\t\t\t\t...( fontSize && { fontSize } ),\n\t\t\t\t...( lineHeight && { lineHeight } ),\n\t\t  }\n\t\t: undefined;\n\n\tconst value =\n\t\ttypeof placeholder === 'string'\n\t\t\t? decodeEntities( placeholder )\n\t\t\t: __( 'Start writing…' );\n\n\tconst appenderStyles = [\n\t\tstyles.blockHolder,\n\t\tshowSeparator && containerStyle,\n\t];\n\n\treturn (\n\t\t<Pressable onPress={ onAppend } hitSlop={ hitSlop }>\n\t\t\t<View style={ appenderStyles } pointerEvents=\"box-only\">\n\t\t\t\t{ showSeparator ? (\n\t\t\t\t\t<BlockInsertionPoint />\n\t\t\t\t) : (\n\t\t\t\t\t<RichText\n\t\t\t\t\t\tplaceholder={ value }\n\t\t\t\t\t\tonChange={ noop }\n\t\t\t\t\t\ttagName=\"p\"\n\t\t\t\t\t\tstyle={ textStyles }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</View>\n\t\t</Pressable>\n\t);\n}\n\nexport default compose(\n\twithSelect( ( select, ownProps ) => {\n\t\tconst {\n\t\t\tgetBlockCount,\n\t\t\tgetBlockName,\n\t\t\tgetSettings,\n\t\t\tisBlockValid,\n\t\t\tgetTemplateLock,\n\t\t} = select( blockEditorStore );\n\n\t\tconst isEmpty = ! getBlockCount( ownProps.rootClientId );\n\t\tconst isLastBlockDefault =\n\t\t\tgetBlockName( ownProps.lastBlockClientId ) ===\n\t\t\tgetDefaultBlockName();\n\t\tconst isLastBlockValid = isBlockValid( ownProps.lastBlockClientId );\n\t\tconst globalStylesBaseStyles =\n\t\t\tgetSettings()?.__experimentalGlobalStylesBaseStyles;\n\n\t\treturn {\n\t\t\tbaseGlobalStyles: globalStylesBaseStyles,\n\t\t\tisVisible: isEmpty || ! isLastBlockDefault || ! isLastBlockValid,\n\t\t\tisLocked: !! getTemplateLock( ownProps.rootClientId ),\n\t\t};\n\t} ),\n\twithDispatch( ( dispatch, ownProps ) => {\n\t\tconst { insertDefaultBlock, startTyping } =\n\t\t\tdispatch( blockEditorStore );\n\n\t\treturn {\n\t\t\tonAppend() {\n\t\t\t\tconst { rootClientId } = ownProps;\n\n\t\t\t\tinsertDefaultBlock( undefined, rootClientId );\n\t\t\t\tstartTyping();\n\t\t\t},\n\t\t};\n\t} )\n)( DefaultBlockAppender );\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["Pressable","View","__","RichText","compose","decodeEntities","withSelect","withDispatch","getDefaultBlockName","BlockInsertionPoint","styles","store","blockEditorStore","jsx","_jsx","hitSlop","top","bottom","left","right","noop","DefaultBlockAppender","baseGlobalStyles","isLocked","isVisible","onAppend","placeholder","containerStyle","showSeparator","blockGlobalStyles","blocks","fontSize","lineHeight","typography","textStyles","undefined","value","appenderStyles","blockHolder","onPress","children","style","pointerEvents","onChange","tagName","select","ownProps","getBlockCount","getBlockName","getSettings","isBlockValid","getTemplateLock","isEmpty","rootClientId","isLastBlockDefault","lastBlockClientId","isLastBlockValid","globalStylesBaseStyles","__experimentalGlobalStylesBaseStyles","dispatch","insertDefaultBlock","startTyping"],"sources":["@wordpress/block-editor/src/components/default-block-appender/index.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { Pressable, View } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { RichText } from '@wordpress/block-editor';\nimport { compose } from '@wordpress/compose';\nimport { decodeEntities } from '@wordpress/html-entities';\nimport { withSelect, withDispatch } from '@wordpress/data';\nimport { getDefaultBlockName } from '@wordpress/blocks';\n\n/**\n * Internal dependencies\n */\nimport BlockInsertionPoint from '../block-list/insertion-point';\nimport styles from './style.scss';\nimport { store as blockEditorStore } from '../../store';\n\nconst hitSlop = { top: 22, bottom: 22, left: 22, right: 22 };\nconst noop = () => {};\n\nexport function DefaultBlockAppender( {\n\tbaseGlobalStyles,\n\tisLocked,\n\tisVisible,\n\tonAppend,\n\tplaceholder,\n\tcontainerStyle,\n\tshowSeparator,\n} ) {\n\tif ( isLocked || ! isVisible ) {\n\t\treturn null;\n\t}\n\tconst blockGlobalStyles = baseGlobalStyles?.blocks?.[ 'core/paragraph' ];\n\tconst { fontSize, lineHeight } = blockGlobalStyles?.typography || {};\n\n\tconst textStyles = blockGlobalStyles?.typography\n\t\t? {\n\t\t\t\t...( fontSize && { fontSize } ),\n\t\t\t\t...( lineHeight && { lineHeight } ),\n\t\t  }\n\t\t: undefined;\n\n\tconst value =\n\t\ttypeof placeholder === 'string'\n\t\t\t? decodeEntities( placeholder )\n\t\t\t: __( 'Start writing…' );\n\n\tconst appenderStyles = [\n\t\tstyles.blockHolder,\n\t\tshowSeparator && containerStyle,\n\t];\n\n\treturn (\n\t\t<Pressable onPress={ onAppend } hitSlop={ hitSlop }>\n\t\t\t<View style={ appenderStyles } pointerEvents=\"box-only\">\n\t\t\t\t{ showSeparator ? (\n\t\t\t\t\t<BlockInsertionPoint />\n\t\t\t\t) : (\n\t\t\t\t\t<RichText\n\t\t\t\t\t\tplaceholder={ value }\n\t\t\t\t\t\tonChange={ noop }\n\t\t\t\t\t\ttagName=\"p\"\n\t\t\t\t\t\tstyle={ textStyles }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</View>\n\t\t</Pressable>\n\t);\n}\n\nexport default compose(\n\twithSelect( ( select, ownProps ) => {\n\t\tconst {\n\t\t\tgetBlockCount,\n\t\t\tgetBlockName,\n\t\t\tgetSettings,\n\t\t\tisBlockValid,\n\t\t\tgetTemplateLock,\n\t\t} = select( blockEditorStore );\n\n\t\tconst isEmpty = ! getBlockCount( ownProps.rootClientId );\n\t\tconst isLastBlockDefault =\n\t\t\tgetBlockName( ownProps.lastBlockClientId ) ===\n\t\t\tgetDefaultBlockName();\n\t\tconst isLastBlockValid = isBlockValid( ownProps.lastBlockClientId );\n\t\tconst globalStylesBaseStyles =\n\t\t\tgetSettings()?.__experimentalGlobalStylesBaseStyles;\n\n\t\treturn {\n\t\t\tbaseGlobalStyles: globalStylesBaseStyles,\n\t\t\tisVisible: isEmpty || ! isLastBlockDefault || ! isLastBlockValid,\n\t\t\tisLocked: !! getTemplateLock( ownProps.rootClientId ),\n\t\t};\n\t} ),\n\twithDispatch( ( dispatch, ownProps ) => {\n\t\tconst { insertDefaultBlock, startTyping } =\n\t\t\tdispatch( blockEditorStore );\n\n\t\treturn {\n\t\t\tonAppend() {\n\t\t\t\tconst { rootClientId } = ownProps;\n\n\t\t\t\tinsertDefaultBlock( undefined, rootClientId );\n\t\t\t\tstartTyping();\n\t\t\t},\n\t\t};\n\t} )\n)( DefaultBlockAppender );\n"],"mappings":"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","ignoreList":[]}

package/build-module/components/dimensions-tool/aspect-ratio-tool.js

@@ -1,4 +1,3 @@
-import { createElement } from "react";
 /**
  * WordPress dependencies
  */
@@ -28,7 +27,7 @@ import { useSettings } from '../use-settings';
  * @property {string}                       [defaultValue]     Default aspect ratio value.
  * @property {boolean}                      [isShownByDefault] Whether the tool is shown by default.
  */
-
+import { jsx as _jsx } from "react/jsx-runtime";
 export default function AspectRatioTool({
   panelId,
   value,
@@ -64,19 +63,20 @@ export default function AspectRatioTool({
     disabled: true,
     hidden: true
   }];
-  return createElement(ToolsPanelItem, {
+  return /*#__PURE__*/_jsx(ToolsPanelItem, {
     hasValue: hasValue ? hasValue : () => displayValue !== defaultValue,
     label: __('Aspect ratio'),
     onDeselect: () => onChange(undefined),
     isShownByDefault: isShownByDefault,
-    panelId: panelId
-  }, createElement(SelectControl, {
-    label: __('Aspect ratio'),
-    value: displayValue,
-    options: options !== null && options !== void 0 ? options : aspectRatioOptions,
-    onChange: onChange,
-    size: '__unstable-large',
-    __nextHasNoMarginBottom: true
-  }));
+    panelId: panelId,
+    children: /*#__PURE__*/_jsx(SelectControl, {
+      label: __('Aspect ratio'),
+      value: displayValue,
+      options: options !== null && options !== void 0 ? options : aspectRatioOptions,
+      onChange: onChange,
+      size: "__unstable-large",
+      __nextHasNoMarginBottom: true
+    })
+  });
 }
 //# sourceMappingURL=aspect-ratio-tool.js.map

package/build-module/components/dimensions-tool/aspect-ratio-tool.js.map

@@ -1 +1 @@
-{"version":3,"names":["SelectControl","__experimentalToolsPanelItem","ToolsPanelItem","__","_x","useSettings","AspectRatioTool","panelId","value","onChange","options","defaultValue","hasValue","isShownByDefault","displayValue","defaultRatios","themeRatios","showDefaultRatios","themeOptions","map","name","ratio","label","defaultOptions","aspectRatioOptions","disabled","hidden","createElement","onDeselect","undefined","size","__nextHasNoMarginBottom"],"sources":["@wordpress/block-editor/src/components/dimensions-tool/aspect-ratio-tool.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tSelectControl,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n} from '@wordpress/components';\nimport { __, _x } from '@wordpress/i18n';\n/**\n * Internal dependencies\n */\nimport { useSettings } from '../use-settings';\n\n/**\n * @typedef {import('@wordpress/components/build-types/select-control/types').SelectControlProps} SelectControlProps\n */\n\n/**\n * @callback AspectRatioToolPropsOnChange\n * @param {string} [value] New aspect ratio value.\n * @return {void} No return.\n */\n\n/**\n * @typedef {Object} AspectRatioToolProps\n * @property {string}                       [panelId]          ID of the panel this tool is associated with.\n * @property {string}                       [value]            Current aspect ratio value.\n * @property {AspectRatioToolPropsOnChange} [onChange]         Callback to update the aspect ratio value.\n * @property {SelectControlProps[]}         [options]          Aspect ratio options.\n * @property {string}                       [defaultValue]     Default aspect ratio value.\n * @property {boolean}                      [isShownByDefault] Whether the tool is shown by default.\n */\n\nexport default function AspectRatioTool( {\n\tpanelId,\n\tvalue,\n\tonChange = () => {},\n\toptions,\n\tdefaultValue = 'auto',\n\thasValue,\n\tisShownByDefault = true,\n} ) {\n\t// Match the CSS default so if the value is used directly in CSS it will look correct in the control.\n\tconst displayValue = value ?? 'auto';\n\n\tconst [ defaultRatios, themeRatios, showDefaultRatios ] = useSettings(\n\t\t'dimensions.aspectRatios.default',\n\t\t'dimensions.aspectRatios.theme',\n\t\t'dimensions.defaultAspectRatios'\n\t);\n\n\tconst themeOptions = themeRatios?.map( ( { name, ratio } ) => ( {\n\t\tlabel: name,\n\t\tvalue: ratio,\n\t} ) );\n\n\tconst defaultOptions = defaultRatios?.map( ( { name, ratio } ) => ( {\n\t\tlabel: name,\n\t\tvalue: ratio,\n\t} ) );\n\n\tconst aspectRatioOptions = [\n\t\t{\n\t\t\tlabel: _x(\n\t\t\t\t'Original',\n\t\t\t\t'Aspect ratio option for dimensions control'\n\t\t\t),\n\t\t\tvalue: 'auto',\n\t\t},\n\t\t...( showDefaultRatios ? defaultOptions : [] ),\n\t\t...( themeOptions ? themeOptions : [] ),\n\t\t{\n\t\t\tlabel: _x( 'Custom', 'Aspect ratio option for dimensions control' ),\n\t\t\tvalue: 'custom',\n\t\t\tdisabled: true,\n\t\t\thidden: true,\n\t\t},\n\t];\n\n\treturn (\n\t\t<ToolsPanelItem\n\t\t\thasValue={\n\t\t\t\thasValue ? hasValue : () => displayValue !== defaultValue\n\t\t\t}\n\t\t\tlabel={ __( 'Aspect ratio' ) }\n\t\t\tonDeselect={ () => onChange( undefined ) }\n\t\t\tisShownByDefault={ isShownByDefault }\n\t\t\tpanelId={ panelId }\n\t\t>\n\t\t\t<SelectControl\n\t\t\t\tlabel={ __( 'Aspect ratio' ) }\n\t\t\t\tvalue={ displayValue }\n\t\t\t\toptions={ options ?? aspectRatioOptions }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tsize={ '__unstable-large' }\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t/>\n\t\t</ToolsPanelItem>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SACCA,aAAa,EACbC,4BAA4B,IAAIC,cAAc,QACxC,uBAAuB;AAC9B,SAASC,EAAE,EAAEC,EAAE,QAAQ,iBAAiB;AACxC;AACA;AACA;AACA,SAASC,WAAW,QAAQ,iBAAiB;;AAE7C;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,eAAe,SAASC,eAAeA,CAAE;EACxCC,OAAO;EACPC,KAAK;EACLC,QAAQ,GAAGA,CAAA,KAAM,CAAC,CAAC;EACnBC,OAAO;EACPC,YAAY,GAAG,MAAM;EACrBC,QAAQ;EACRC,gBAAgB,GAAG;AACpB,CAAC,EAAG;EACH;EACA,MAAMC,YAAY,GAAGN,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,MAAM;EAEpC,MAAM,CAAEO,aAAa,EAAEC,WAAW,EAAEC,iBAAiB,CAAE,GAAGZ,WAAW,CACpE,iCAAiC,EACjC,+BAA+B,EAC/B,gCACD,CAAC;EAED,MAAMa,YAAY,GAAGF,WAAW,EAAEG,GAAG,CAAE,CAAE;IAAEC,IAAI;IAAEC;EAAM,CAAC,MAAQ;IAC/DC,KAAK,EAAEF,IAAI;IACXZ,KAAK,EAAEa;EACR,CAAC,CAAG,CAAC;EAEL,MAAME,cAAc,GAAGR,aAAa,EAAEI,GAAG,CAAE,CAAE;IAAEC,IAAI;IAAEC;EAAM,CAAC,MAAQ;IACnEC,KAAK,EAAEF,IAAI;IACXZ,KAAK,EAAEa;EACR,CAAC,CAAG,CAAC;EAEL,MAAMG,kBAAkB,GAAG,CAC1B;IACCF,KAAK,EAAElB,EAAE,CACR,UAAU,EACV,4CACD,CAAC;IACDI,KAAK,EAAE;EACR,CAAC,EACD,IAAKS,iBAAiB,GAAGM,cAAc,GAAG,EAAE,CAAE,EAC9C,IAAKL,YAAY,GAAGA,YAAY,GAAG,EAAE,CAAE,EACvC;IACCI,KAAK,EAAElB,EAAE,CAAE,QAAQ,EAAE,4CAA6C,CAAC;IACnEI,KAAK,EAAE,QAAQ;IACfiB,QAAQ,EAAE,IAAI;IACdC,MAAM,EAAE;EACT,CAAC,CACD;EAED,OACCC,aAAA,CAACzB,cAAc;IACdU,QAAQ,EACPA,QAAQ,GAAGA,QAAQ,GAAG,MAAME,YAAY,KAAKH,YAC7C;IACDW,KAAK,EAAGnB,EAAE,CAAE,cAAe,CAAG;IAC9ByB,UAAU,EAAGA,CAAA,KAAMnB,QAAQ,CAAEoB,SAAU,CAAG;IAC1ChB,gBAAgB,EAAGA,gBAAkB;IACrCN,OAAO,EAAGA;EAAS,GAEnBoB,aAAA,CAAC3B,aAAa;IACbsB,KAAK,EAAGnB,EAAE,CAAE,cAAe,CAAG;IAC9BK,KAAK,EAAGM,YAAc;IACtBJ,OAAO,EAAGA,OAAO,aAAPA,OAAO,cAAPA,OAAO,GAAIc,kBAAoB;IACzCf,QAAQ,EAAGA,QAAU;IACrBqB,IAAI,EAAG,kBAAoB;IAC3BC,uBAAuB;EAAA,CACvB,CACc,CAAC;AAEnB","ignoreList":[]}
+{"version":3,"names":["SelectControl","__experimentalToolsPanelItem","ToolsPanelItem","__","_x","useSettings","jsx","_jsx","AspectRatioTool","panelId","value","onChange","options","defaultValue","hasValue","isShownByDefault","displayValue","defaultRatios","themeRatios","showDefaultRatios","themeOptions","map","name","ratio","label","defaultOptions","aspectRatioOptions","disabled","hidden","onDeselect","undefined","children","size","__nextHasNoMarginBottom"],"sources":["@wordpress/block-editor/src/components/dimensions-tool/aspect-ratio-tool.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tSelectControl,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n} from '@wordpress/components';\nimport { __, _x } from '@wordpress/i18n';\n/**\n * Internal dependencies\n */\nimport { useSettings } from '../use-settings';\n\n/**\n * @typedef {import('@wordpress/components/build-types/select-control/types').SelectControlProps} SelectControlProps\n */\n\n/**\n * @callback AspectRatioToolPropsOnChange\n * @param {string} [value] New aspect ratio value.\n * @return {void} No return.\n */\n\n/**\n * @typedef {Object} AspectRatioToolProps\n * @property {string}                       [panelId]          ID of the panel this tool is associated with.\n * @property {string}                       [value]            Current aspect ratio value.\n * @property {AspectRatioToolPropsOnChange} [onChange]         Callback to update the aspect ratio value.\n * @property {SelectControlProps[]}         [options]          Aspect ratio options.\n * @property {string}                       [defaultValue]     Default aspect ratio value.\n * @property {boolean}                      [isShownByDefault] Whether the tool is shown by default.\n */\n\nexport default function AspectRatioTool( {\n\tpanelId,\n\tvalue,\n\tonChange = () => {},\n\toptions,\n\tdefaultValue = 'auto',\n\thasValue,\n\tisShownByDefault = true,\n} ) {\n\t// Match the CSS default so if the value is used directly in CSS it will look correct in the control.\n\tconst displayValue = value ?? 'auto';\n\n\tconst [ defaultRatios, themeRatios, showDefaultRatios ] = useSettings(\n\t\t'dimensions.aspectRatios.default',\n\t\t'dimensions.aspectRatios.theme',\n\t\t'dimensions.defaultAspectRatios'\n\t);\n\n\tconst themeOptions = themeRatios?.map( ( { name, ratio } ) => ( {\n\t\tlabel: name,\n\t\tvalue: ratio,\n\t} ) );\n\n\tconst defaultOptions = defaultRatios?.map( ( { name, ratio } ) => ( {\n\t\tlabel: name,\n\t\tvalue: ratio,\n\t} ) );\n\n\tconst aspectRatioOptions = [\n\t\t{\n\t\t\tlabel: _x(\n\t\t\t\t'Original',\n\t\t\t\t'Aspect ratio option for dimensions control'\n\t\t\t),\n\t\t\tvalue: 'auto',\n\t\t},\n\t\t...( showDefaultRatios ? defaultOptions : [] ),\n\t\t...( themeOptions ? themeOptions : [] ),\n\t\t{\n\t\t\tlabel: _x( 'Custom', 'Aspect ratio option for dimensions control' ),\n\t\t\tvalue: 'custom',\n\t\t\tdisabled: true,\n\t\t\thidden: true,\n\t\t},\n\t];\n\n\treturn (\n\t\t<ToolsPanelItem\n\t\t\thasValue={\n\t\t\t\thasValue ? hasValue : () => displayValue !== defaultValue\n\t\t\t}\n\t\t\tlabel={ __( 'Aspect ratio' ) }\n\t\t\tonDeselect={ () => onChange( undefined ) }\n\t\t\tisShownByDefault={ isShownByDefault }\n\t\t\tpanelId={ panelId }\n\t\t>\n\t\t\t<SelectControl\n\t\t\t\tlabel={ __( 'Aspect ratio' ) }\n\t\t\t\tvalue={ displayValue }\n\t\t\t\toptions={ options ?? aspectRatioOptions }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t/>\n\t\t</ToolsPanelItem>\n\t);\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SACCA,aAAa,EACbC,4BAA4B,IAAIC,cAAc,QACxC,uBAAuB;AAC9B,SAASC,EAAE,EAAEC,EAAE,QAAQ,iBAAiB;AACxC;AACA;AACA;AACA,SAASC,WAAW,QAAQ,iBAAiB;;AAE7C;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AARA,SAAAC,GAAA,IAAAC,IAAA;AAUA,eAAe,SAASC,eAAeA,CAAE;EACxCC,OAAO;EACPC,KAAK;EACLC,QAAQ,GAAGA,CAAA,KAAM,CAAC,CAAC;EACnBC,OAAO;EACPC,YAAY,GAAG,MAAM;EACrBC,QAAQ;EACRC,gBAAgB,GAAG;AACpB,CAAC,EAAG;EACH;EACA,MAAMC,YAAY,GAAGN,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,MAAM;EAEpC,MAAM,CAAEO,aAAa,EAAEC,WAAW,EAAEC,iBAAiB,CAAE,GAAGd,WAAW,CACpE,iCAAiC,EACjC,+BAA+B,EAC/B,gCACD,CAAC;EAED,MAAMe,YAAY,GAAGF,WAAW,EAAEG,GAAG,CAAE,CAAE;IAAEC,IAAI;IAAEC;EAAM,CAAC,MAAQ;IAC/DC,KAAK,EAAEF,IAAI;IACXZ,KAAK,EAAEa;EACR,CAAC,CAAG,CAAC;EAEL,MAAME,cAAc,GAAGR,aAAa,EAAEI,GAAG,CAAE,CAAE;IAAEC,IAAI;IAAEC;EAAM,CAAC,MAAQ;IACnEC,KAAK,EAAEF,IAAI;IACXZ,KAAK,EAAEa;EACR,CAAC,CAAG,CAAC;EAEL,MAAMG,kBAAkB,GAAG,CAC1B;IACCF,KAAK,EAAEpB,EAAE,CACR,UAAU,EACV,4CACD,CAAC;IACDM,KAAK,EAAE;EACR,CAAC,EACD,IAAKS,iBAAiB,GAAGM,cAAc,GAAG,EAAE,CAAE,EAC9C,IAAKL,YAAY,GAAGA,YAAY,GAAG,EAAE,CAAE,EACvC;IACCI,KAAK,EAAEpB,EAAE,CAAE,QAAQ,EAAE,4CAA6C,CAAC;IACnEM,KAAK,EAAE,QAAQ;IACfiB,QAAQ,EAAE,IAAI;IACdC,MAAM,EAAE;EACT,CAAC,CACD;EAED,oBACCrB,IAAA,CAACL,cAAc;IACdY,QAAQ,EACPA,QAAQ,GAAGA,QAAQ,GAAG,MAAME,YAAY,KAAKH,YAC7C;IACDW,KAAK,EAAGrB,EAAE,CAAE,cAAe,CAAG;IAC9B0B,UAAU,EAAGA,CAAA,KAAMlB,QAAQ,CAAEmB,SAAU,CAAG;IAC1Cf,gBAAgB,EAAGA,gBAAkB;IACrCN,OAAO,EAAGA,OAAS;IAAAsB,QAAA,eAEnBxB,IAAA,CAACP,aAAa;MACbwB,KAAK,EAAGrB,EAAE,CAAE,cAAe,CAAG;MAC9BO,KAAK,EAAGM,YAAc;MACtBJ,OAAO,EAAGA,OAAO,aAAPA,OAAO,cAAPA,OAAO,GAAIc,kBAAoB;MACzCf,QAAQ,EAAGA,QAAU;MACrBqB,IAAI,EAAC,kBAAkB;MACvBC,uBAAuB;IAAA,CACvB;EAAC,CACa,CAAC;AAEnB","ignoreList":[]}

package/build-module/components/dimensions-tool/index.js

@@ -1,4 +1,3 @@
-import { createElement, Fragment } from "react";
 /**
  * WordPress dependencies
  */
@@ -50,6 +49,9 @@ import WidthHeightTool from './width-height-tool';
  *
  * @return {Element} The dimensions controls.
  */
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 function DimensionsTool({
   panelId,
   value = {},
@@ -81,121 +83,123 @@ function DimensionsTool({
   // as a custom aspect ratio.
   const aspectRatioValue = width && height ? 'custom' : lastAspectRatio;
   const showScaleControl = aspectRatio || width && height;
-  return createElement(Fragment, null, createElement(AspectRatioTool, {
-    panelId: panelId,
-    options: aspectRatioOptions,
-    defaultValue: defaultAspectRatio,
-    value: aspectRatioValue,
-    onChange: nextAspectRatio => {
-      const nextValue = {
-        ...value
-      };
-
-      // 'auto' is CSS default, so it gets treated as null.
-      nextAspectRatio = nextAspectRatio === 'auto' ? null : nextAspectRatio;
-      setLastAspectRatio(nextAspectRatio);
-
-      // Update aspectRatio.
-      if (!nextAspectRatio) {
-        delete nextValue.aspectRatio;
-      } else {
-        nextValue.aspectRatio = nextAspectRatio;
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(AspectRatioTool, {
+      panelId: panelId,
+      options: aspectRatioOptions,
+      defaultValue: defaultAspectRatio,
+      value: aspectRatioValue,
+      onChange: nextAspectRatio => {
+        const nextValue = {
+          ...value
+        };
+
+        // 'auto' is CSS default, so it gets treated as null.
+        nextAspectRatio = nextAspectRatio === 'auto' ? null : nextAspectRatio;
+        setLastAspectRatio(nextAspectRatio);
+
+        // Update aspectRatio.
+        if (!nextAspectRatio) {
+          delete nextValue.aspectRatio;
+        } else {
+          nextValue.aspectRatio = nextAspectRatio;
+        }
+
+        // Auto-update scale.
+        if (!nextAspectRatio) {
+          delete nextValue.scale;
+        } else if (lastScale) {
+          nextValue.scale = lastScale;
+        } else {
+          nextValue.scale = defaultScale;
+          setLastScale(defaultScale);
+        }
+
+        // Auto-update width and height.
+        if ('custom' !== nextAspectRatio && width && height) {
+          delete nextValue.height;
+        }
+        onChange(nextValue);
       }
-
-      // Auto-update scale.
-      if (!nextAspectRatio) {
-        delete nextValue.scale;
-      } else if (lastScale) {
-        nextValue.scale = lastScale;
-      } else {
-        nextValue.scale = defaultScale;
-        setLastScale(defaultScale);
-      }
-
-      // Auto-update width and height.
-      if ('custom' !== nextAspectRatio && width && height) {
-        delete nextValue.height;
-      }
-      onChange(nextValue);
-    }
-  }), createElement(WidthHeightTool, {
-    panelId: panelId,
-    units: unitsOptions,
-    value: {
-      width,
-      height
-    },
-    onChange: ({
-      width: nextWidth,
-      height: nextHeight
-    }) => {
-      const nextValue = {
-        ...value
-      };
-
-      // 'auto' is CSS default, so it gets treated as null.
-      nextWidth = nextWidth === 'auto' ? null : nextWidth;
-      nextHeight = nextHeight === 'auto' ? null : nextHeight;
-
-      // Update width.
-      if (!nextWidth) {
-        delete nextValue.width;
-      } else {
-        nextValue.width = nextWidth;
-      }
-
-      // Update height.
-      if (!nextHeight) {
-        delete nextValue.height;
-      } else {
-        nextValue.height = nextHeight;
-      }
-
-      // Auto-update aspectRatio.
-      if (nextWidth && nextHeight) {
-        delete nextValue.aspectRatio;
-      } else if (lastAspectRatio) {
-        nextValue.aspectRatio = lastAspectRatio;
-      } else {
-        // No setting defaultAspectRatio here, because
-        // aspectRatio is optional in this scenario,
-        // unlike scale.
-      }
-
-      // Auto-update scale.
-      if (!lastAspectRatio && !!nextWidth !== !!nextHeight) {
-        delete nextValue.scale;
-      } else if (lastScale) {
-        nextValue.scale = lastScale;
-      } else {
-        nextValue.scale = defaultScale;
-        setLastScale(defaultScale);
+    }), /*#__PURE__*/_jsx(WidthHeightTool, {
+      panelId: panelId,
+      units: unitsOptions,
+      value: {
+        width,
+        height
+      },
+      onChange: ({
+        width: nextWidth,
+        height: nextHeight
+      }) => {
+        const nextValue = {
+          ...value
+        };
+
+        // 'auto' is CSS default, so it gets treated as null.
+        nextWidth = nextWidth === 'auto' ? null : nextWidth;
+        nextHeight = nextHeight === 'auto' ? null : nextHeight;
+
+        // Update width.
+        if (!nextWidth) {
+          delete nextValue.width;
+        } else {
+          nextValue.width = nextWidth;
+        }
+
+        // Update height.
+        if (!nextHeight) {
+          delete nextValue.height;
+        } else {
+          nextValue.height = nextHeight;
+        }
+
+        // Auto-update aspectRatio.
+        if (nextWidth && nextHeight) {
+          delete nextValue.aspectRatio;
+        } else if (lastAspectRatio) {
+          nextValue.aspectRatio = lastAspectRatio;
+        } else {
+          // No setting defaultAspectRatio here, because
+          // aspectRatio is optional in this scenario,
+          // unlike scale.
+        }
+
+        // Auto-update scale.
+        if (!lastAspectRatio && !!nextWidth !== !!nextHeight) {
+          delete nextValue.scale;
+        } else if (lastScale) {
+          nextValue.scale = lastScale;
+        } else {
+          nextValue.scale = defaultScale;
+          setLastScale(defaultScale);
+        }
+        onChange(nextValue);
       }
-      onChange(nextValue);
-    }
-  }), showScaleControl && createElement(ScaleTool, {
-    panelId: panelId,
-    options: scaleOptions,
-    defaultValue: defaultScale,
-    value: lastScale,
-    onChange: nextScale => {
-      const nextValue = {
-        ...value
-      };
-
-      // 'fill' is CSS default, so it gets treated as null.
-      nextScale = nextScale === 'fill' ? null : nextScale;
-      setLastScale(nextScale);
-
-      // Update scale.
-      if (!nextScale) {
-        delete nextValue.scale;
-      } else {
-        nextValue.scale = nextScale;
+    }), showScaleControl && /*#__PURE__*/_jsx(ScaleTool, {
+      panelId: panelId,
+      options: scaleOptions,
+      defaultValue: defaultScale,
+      value: lastScale,
+      onChange: nextScale => {
+        const nextValue = {
+          ...value
+        };
+
+        // 'fill' is CSS default, so it gets treated as null.
+        nextScale = nextScale === 'fill' ? null : nextScale;
+        setLastScale(nextScale);
+
+        // Update scale.
+        if (!nextScale) {
+          delete nextValue.scale;
+        } else {
+          nextValue.scale = nextScale;
+        }
+        onChange(nextValue);
       }
-      onChange(nextValue);
-    }
-  }));
+    })]
+  });
 }
 export default DimensionsTool;
 //# sourceMappingURL=index.js.map