@wordpress/components 27.6.0 → 28.0.0

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

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = require("react");
 var _es = _interopRequireDefault(require("fast-deep-equal/es6"));
 var _element = require("@wordpress/element");
 var _i18n = require("@wordpress/i18n");
@@ -15,6 +14,7 @@ var _vStack = require("../v-stack");
 var _customDuotoneBar = _interopRequireDefault(require("./custom-duotone-bar"));
 var _utils = require("./utils");
 var _spacer = require("../spacer");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * External dependencies
  */
@@ -78,8 +78,7 @@ function DuotonePicker({
   const [defaultDark, defaultLight] = (0, _element.useMemo)(() => (0, _utils.getDefaultColors)(colorPalette), [colorPalette]);
   const isUnset = value === 'unset';
   const unsetOptionLabel = (0, _i18n.__)('Unset');
-  const unsetOption = (0, _react.createElement)(_circularOptionPicker.default.Option, {
-    key: "unset",
+  const unsetOption = /*#__PURE__*/(0, _jsxRuntime.jsx)(_circularOptionPicker.default.Option, {
     value: "unset",
     isSelected: isUnset,
     tooltipText: unsetOptionLabel,
@@ -88,7 +87,7 @@ function DuotonePicker({
     onClick: () => {
       onChange(isUnset ? undefined : 'unset');
     }
-  });
+  }, "unset");
   const duotoneOptions = duotonePalette.map(({
     colors,
     slug,
@@ -105,8 +104,7 @@ function DuotonePicker({
     // translators: %s: The name of the option e.g: "Dark grayscale".
     (0, _i18n.__)('Duotone: %s'), name) : tooltipText;
     const isSelected = (0, _es.default)(colors, value);
-    return (0, _react.createElement)(_circularOptionPicker.default.Option, {
-      key: slug,
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_circularOptionPicker.default.Option, {
       value: colors,
       isSelected: isSelected,
       "aria-label": label,
@@ -115,7 +113,7 @@ function DuotonePicker({
       onClick: () => {
         onChange(isSelected ? undefined : colors);
       }
-    });
+    }, slug);
   });
   let metaProps;
   if (asButtons) {
@@ -145,40 +143,44 @@ function DuotonePicker({
     }
   }
   const options = unsetable ? [unsetOption, ...duotoneOptions] : duotoneOptions;
-  return (0, _react.createElement)(_circularOptionPicker.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_circularOptionPicker.default, {
     ...otherProps,
     ...metaProps,
     options: options,
-    actions: !!clearable && (0, _react.createElement)(_circularOptionPicker.default.ButtonAction, {
-      onClick: () => onChange(undefined)
-    }, (0, _i18n.__)('Clear'))
-  }, (0, _react.createElement)(_spacer.Spacer, {
-    paddingTop: options.length === 0 ? 0 : 4
-  }, (0, _react.createElement)(_vStack.VStack, {
-    spacing: 3
-  }, !disableCustomColors && !disableCustomDuotone && (0, _react.createElement)(_customDuotoneBar.default, {
-    value: isUnset ? undefined : value,
-    onChange: onChange
-  }), !disableCustomDuotone && (0, _react.createElement)(_colorListPicker.default, {
-    labels: [(0, _i18n.__)('Shadows'), (0, _i18n.__)('Highlights')],
-    colors: colorPalette,
-    value: isUnset ? undefined : value,
-    disableCustomColors: disableCustomColors,
-    enableAlpha: true,
-    onChange: newColors => {
-      if (!newColors[0]) {
-        newColors[0] = defaultDark;
-      }
-      if (!newColors[1]) {
-        newColors[1] = defaultLight;
-      }
-      const newValue = newColors.length >= 2 ? newColors : undefined;
-      // @ts-expect-error TODO: The color arrays for a DuotonePicker should be a tuple of two colors,
-      // but it's currently typed as a string[].
-      // See also https://github.com/WordPress/gutenberg/pull/49060#discussion_r1136951035
-      onChange(newValue);
-    }
-  }))));
+    actions: !!clearable && /*#__PURE__*/(0, _jsxRuntime.jsx)(_circularOptionPicker.default.ButtonAction, {
+      onClick: () => onChange(undefined),
+      children: (0, _i18n.__)('Clear')
+    }),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_spacer.Spacer, {
+      paddingTop: options.length === 0 ? 0 : 4,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_vStack.VStack, {
+        spacing: 3,
+        children: [!disableCustomColors && !disableCustomDuotone && /*#__PURE__*/(0, _jsxRuntime.jsx)(_customDuotoneBar.default, {
+          value: isUnset ? undefined : value,
+          onChange: onChange
+        }), !disableCustomDuotone && /*#__PURE__*/(0, _jsxRuntime.jsx)(_colorListPicker.default, {
+          labels: [(0, _i18n.__)('Shadows'), (0, _i18n.__)('Highlights')],
+          colors: colorPalette,
+          value: isUnset ? undefined : value,
+          disableCustomColors: disableCustomColors,
+          enableAlpha: true,
+          onChange: newColors => {
+            if (!newColors[0]) {
+              newColors[0] = defaultDark;
+            }
+            if (!newColors[1]) {
+              newColors[1] = defaultLight;
+            }
+            const newValue = newColors.length >= 2 ? newColors : undefined;
+            // @ts-expect-error TODO: The color arrays for a DuotonePicker should be a tuple of two colors,
+            // but it's currently typed as a string[].
+            // See also https://github.com/WordPress/gutenberg/pull/49060#discussion_r1136951035
+            onChange(newValue);
+          }
+        })]
+      })
+    })
+  });
 }
 var _default = exports.default = DuotonePicker;
 //# sourceMappingURL=duotone-picker.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["_es","_interopRequireDefault","require","_element","_i18n","_colorListPicker","_circularOptionPicker","_vStack","_customDuotoneBar","_utils","_spacer","DuotonePicker","asButtons","loop","clearable","unsetable","colorPalette","duotonePalette","disableCustomColors","disableCustomDuotone","value","onChange","ariaLabel","ariaLabelledby","otherProps","defaultDark","defaultLight","useMemo","getDefaultColors","isUnset","unsetOptionLabel","__","unsetOption","_react","createElement","default","Option","key","isSelected","tooltipText","className","onClick","undefined","duotoneOptions","map","colors","slug","name","style","background","getGradientFromCSSColors","color","sprintf","label","fastDeepEqual","metaProps","_metaProps","options","actions","ButtonAction","Spacer","paddingTop","length","VStack","spacing","labels","enableAlpha","newColors","newValue","_default","exports"],"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":["_es","_interopRequireDefault","require","_element","_i18n","_colorListPicker","_circularOptionPicker","_vStack","_customDuotoneBar","_utils","_spacer","_jsxRuntime","DuotonePicker","asButtons","loop","clearable","unsetable","colorPalette","duotonePalette","disableCustomColors","disableCustomDuotone","value","onChange","ariaLabel","ariaLabelledby","otherProps","defaultDark","defaultLight","useMemo","getDefaultColors","isUnset","unsetOptionLabel","__","unsetOption","jsx","default","Option","isSelected","tooltipText","className","onClick","undefined","duotoneOptions","map","colors","slug","name","style","background","getGradientFromCSSColors","color","sprintf","label","fastDeepEqual","metaProps","_metaProps","options","actions","ButtonAction","children","Spacer","paddingTop","length","jsxs","VStack","spacing","labels","enableAlpha","newColors","newValue","_default","exports"],"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":[]}

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

@@ -5,11 +5,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = require("react");
 var _icons = require("@wordpress/icons");
 var _colorIndicator = _interopRequireDefault(require("../color-indicator"));
 var _icon = _interopRequireDefault(require("../icon"));
 var _utils = require("./utils");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * WordPress dependencies
  */
@@ -21,9 +21,9 @@ var _utils = require("./utils");
 function DuotoneSwatch({
   values
 }) {
-  return values ? (0, _react.createElement)(_colorIndicator.default, {
+  return values ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_colorIndicator.default, {
     colorValue: (0, _utils.getGradientFromCSSColors)(values, '135deg')
-  }) : (0, _react.createElement)(_icon.default, {
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.default, {
     icon: _icons.swatch
   });
 }

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

@@ -1 +1 @@
-{"version":3,"names":["_icons","require","_colorIndicator","_interopRequireDefault","_icon","_utils","DuotoneSwatch","values","_react","createElement","default","colorValue","getGradientFromCSSColors","icon","swatch","_default","exports"],"sources":["@wordpress/components/src/duotone-picker/duotone-swatch.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { swatch } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport ColorIndicator from '../color-indicator';\nimport Icon from '../icon';\nimport { getGradientFromCSSColors } from './utils';\nimport type { DuotoneSwatchProps } from './types';\n\nfunction DuotoneSwatch( { values }: DuotoneSwatchProps ) {\n\treturn values ? (\n\t\t<ColorIndicator\n\t\t\tcolorValue={ getGradientFromCSSColors( values, '135deg' ) }\n\t\t/>\n\t) : (\n\t\t<Icon icon={ swatch } />\n\t);\n}\n\nexport default DuotoneSwatch;\n"],"mappings":";;;;;;;;AAGA,IAAAA,MAAA,GAAAC,OAAA;AAKA,IAAAC,eAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,KAAA,GAAAD,sBAAA,CAAAF,OAAA;AACA,IAAAI,MAAA,GAAAJ,OAAA;AAVA;AACA;AACA;;AAGA;AACA;AACA;;AAMA,SAASK,aAAaA,CAAE;EAAEC;AAA2B,CAAC,EAAG;EACxD,OAAOA,MAAM,GACZ,IAAAC,MAAA,CAAAC,aAAA,EAACP,eAAA,CAAAQ,OAAc;IACdC,UAAU,EAAG,IAAAC,+BAAwB,EAAEL,MAAM,EAAE,QAAS;EAAG,CAC3D,CAAC,GAEF,IAAAC,MAAA,CAAAC,aAAA,EAACL,KAAA,CAAAM,OAAI;IAACG,IAAI,EAAGC;EAAQ,CAAE,CACvB;AACF;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAN,OAAA,GAEcJ,aAAa","ignoreList":[]}
+{"version":3,"names":["_icons","require","_colorIndicator","_interopRequireDefault","_icon","_utils","_jsxRuntime","DuotoneSwatch","values","jsx","default","colorValue","getGradientFromCSSColors","icon","swatch","_default","exports"],"sources":["@wordpress/components/src/duotone-picker/duotone-swatch.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { swatch } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport ColorIndicator from '../color-indicator';\nimport Icon from '../icon';\nimport { getGradientFromCSSColors } from './utils';\nimport type { DuotoneSwatchProps } from './types';\n\nfunction DuotoneSwatch( { values }: DuotoneSwatchProps ) {\n\treturn values ? (\n\t\t<ColorIndicator\n\t\t\tcolorValue={ getGradientFromCSSColors( values, '135deg' ) }\n\t\t/>\n\t) : (\n\t\t<Icon icon={ swatch } />\n\t);\n}\n\nexport default DuotoneSwatch;\n"],"mappings":";;;;;;;AAGA,IAAAA,MAAA,GAAAC,OAAA;AAKA,IAAAC,eAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,KAAA,GAAAD,sBAAA,CAAAF,OAAA;AACA,IAAAI,MAAA,GAAAJ,OAAA;AAAmD,IAAAK,WAAA,GAAAL,OAAA;AAVnD;AACA;AACA;;AAGA;AACA;AACA;;AAMA,SAASM,aAAaA,CAAE;EAAEC;AAA2B,CAAC,EAAG;EACxD,OAAOA,MAAM,gBACZ,IAAAF,WAAA,CAAAG,GAAA,EAACP,eAAA,CAAAQ,OAAc;IACdC,UAAU,EAAG,IAAAC,+BAAwB,EAAEJ,MAAM,EAAE,QAAS;EAAG,CAC3D,CAAC,gBAEF,IAAAF,WAAA,CAAAG,GAAA,EAACL,KAAA,CAAAM,OAAI;IAACG,IAAI,EAAGC;EAAQ,CAAE,CACvB;AACF;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAN,OAAA,GAEcH,aAAa","ignoreList":[]}

package/build/elevation/component.js

@@ -4,10 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.Elevation = void 0;
-var _react = require("react");
 var _context = require("../context");
 var _view = require("../view");
 var _hook = require("./hook");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * External dependencies
  */
@@ -18,7 +18,7 @@ var _hook = require("./hook");
 
 function UnconnectedElevation(props, forwardedRef) {
   const elevationProps = (0, _hook.useElevation)(props);
-  return (0, _react.createElement)(_view.View, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_view.View, {
     ...elevationProps,
     ref: forwardedRef
   });

package/build/elevation/component.js.map

@@ -1 +1 @@
-{"version":3,"names":["_context","require","_view","_hook","UnconnectedElevation","props","forwardedRef","elevationProps","useElevation","_react","createElement","View","ref","Elevation","exports","contextConnect","_default","default"],"sources":["@wordpress/components/src/elevation/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../context';\nimport { contextConnect } from '../context';\nimport { View } from '../view';\nimport { useElevation } from './hook';\nimport type { ElevationProps } from './types';\n\nfunction UnconnectedElevation(\n\tprops: WordPressComponentProps< ElevationProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst elevationProps = useElevation( props );\n\n\treturn <View { ...elevationProps } ref={ forwardedRef } />;\n}\n\n/**\n * `Elevation` is a core component that renders shadow, using the component\n * system's shadow system.\n *\n * The shadow effect is generated using the `value` prop.\n *\n * ```jsx\n * import {\n *\t__experimentalElevation as Elevation,\n *\t__experimentalSurface as Surface,\n *\t__experimentalText as Text,\n * } from '@wordpress/components';\n *\n * function Example() {\n *   return (\n *     <Surface>\n *       <Text>Code is Poetry</Text>\n *       <Elevation value={ 5 } />\n *     </Surface>\n *   );\n * }\n * ```\n */\nexport const Elevation = contextConnect( UnconnectedElevation, 'Elevation' );\n\nexport default Elevation;\n"],"mappings":";;;;;;;AASA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AAXA;AACA;AACA;;AAGA;AACA;AACA;;AAOA,SAASG,oBAAoBA,CAC5BC,KAAuD,EACvDC,YAAiC,EAChC;EACD,MAAMC,cAAc,GAAG,IAAAC,kBAAY,EAAEH,KAAM,CAAC;EAE5C,OAAO,IAAAI,MAAA,CAAAC,aAAA,EAACR,KAAA,CAAAS,IAAI;IAAA,GAAMJ,cAAc;IAAGK,GAAG,EAAGN;EAAc,CAAE,CAAC;AAC3D;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMO,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAG,IAAAE,uBAAc,EAAEX,oBAAoB,EAAE,WAAY,CAAC;AAAC,IAAAY,QAAA,GAAAF,OAAA,CAAAG,OAAA,GAE9DJ,SAAS","ignoreList":[]}
+{"version":3,"names":["_context","require","_view","_hook","_jsxRuntime","UnconnectedElevation","props","forwardedRef","elevationProps","useElevation","jsx","View","ref","Elevation","exports","contextConnect","_default","default"],"sources":["@wordpress/components/src/elevation/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../context';\nimport { contextConnect } from '../context';\nimport { View } from '../view';\nimport { useElevation } from './hook';\nimport type { ElevationProps } from './types';\n\nfunction UnconnectedElevation(\n\tprops: WordPressComponentProps< ElevationProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst elevationProps = useElevation( props );\n\n\treturn <View { ...elevationProps } ref={ forwardedRef } />;\n}\n\n/**\n * `Elevation` is a core component that renders shadow, using the component\n * system's shadow system.\n *\n * The shadow effect is generated using the `value` prop.\n *\n * ```jsx\n * import {\n *\t__experimentalElevation as Elevation,\n *\t__experimentalSurface as Surface,\n *\t__experimentalText as Text,\n * } from '@wordpress/components';\n *\n * function Example() {\n *   return (\n *     <Surface>\n *       <Text>Code is Poetry</Text>\n *       <Elevation value={ 5 } />\n *     </Surface>\n *   );\n * }\n * ```\n */\nexport const Elevation = contextConnect( UnconnectedElevation, 'Elevation' );\n\nexport default Elevation;\n"],"mappings":";;;;;;AASA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AAAsC,IAAAG,WAAA,GAAAH,OAAA;AAXtC;AACA;AACA;;AAGA;AACA;AACA;;AAOA,SAASI,oBAAoBA,CAC5BC,KAAuD,EACvDC,YAAiC,EAChC;EACD,MAAMC,cAAc,GAAG,IAAAC,kBAAY,EAAEH,KAAM,CAAC;EAE5C,oBAAO,IAAAF,WAAA,CAAAM,GAAA,EAACR,KAAA,CAAAS,IAAI;IAAA,GAAMH,cAAc;IAAGI,GAAG,EAAGL;EAAc,CAAE,CAAC;AAC3D;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMM,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAG,IAAAE,uBAAc,EAAEV,oBAAoB,EAAE,WAAY,CAAC;AAAC,IAAAW,QAAA,GAAAF,OAAA,CAAAG,OAAA,GAE9DJ,SAAS","ignoreList":[]}

package/build/external-link/index.js

@@ -5,10 +5,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.ExternalLink = void 0;
-var _react = require("react");
 var _clsx = _interopRequireDefault(require("clsx"));
 var _i18n = require("@wordpress/i18n");
 var _element = require("@wordpress/element");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * External dependencies
  */
@@ -43,22 +43,27 @@ function UnforwardedExternalLink(props, ref) {
       props.onClick(event);
     }
   };
-  return /* eslint-disable react/jsx-no-target-blank */(
-    (0, _react.createElement)("a", {
+  return (
+    /*#__PURE__*/
+    /* eslint-disable react/jsx-no-target-blank */
+    (0, _jsxRuntime.jsxs)("a", {
       ...additionalProps,
       className: classes,
       href: href,
       onClick: onClickHandler,
       target: "_blank",
       rel: optimizedRel,
-      ref: ref
-    }, (0, _react.createElement)("span", {
-      className: "components-external-link__contents"
-    }, children), (0, _react.createElement)("span", {
-      className: "components-external-link__icon",
-      "aria-label": /* translators: accessibility text */
-      (0, _i18n.__)('(opens in a new tab)')
-    }, "\u2197"))
+      ref: ref,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "components-external-link__contents",
+        children: children
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "components-external-link__icon",
+        "aria-label": /* translators: accessibility text */
+        (0, _i18n.__)('(opens in a new tab)'),
+        children: "\u2197"
+      })]
+    })
     /* eslint-enable react/jsx-no-target-blank */
   );
 }

package/build/external-link/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_clsx","_interopRequireDefault","require","_i18n","_element","UnforwardedExternalLink","props","ref","href","children","className","rel","additionalProps","optimizedRel","Set","split","filter","Boolean","join","classes","clsx","isInternalAnchor","startsWith","onClickHandler","event","preventDefault","onClick","_react","createElement","target","__","ExternalLink","exports","forwardRef","_default","default"],"sources":["@wordpress/components/src/external-link/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { ExternalLinkProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\nfunction UnforwardedExternalLink(\n\tprops: Omit<\n\t\tWordPressComponentProps< ExternalLinkProps, 'a', false >,\n\t\t'target'\n\t>,\n\tref: ForwardedRef< HTMLAnchorElement >\n) {\n\tconst { href, children, className, rel = '', ...additionalProps } = props;\n\tconst optimizedRel = [\n\t\t...new Set(\n\t\t\t[\n\t\t\t\t...rel.split( ' ' ),\n\t\t\t\t'external',\n\t\t\t\t'noreferrer',\n\t\t\t\t'noopener',\n\t\t\t].filter( Boolean )\n\t\t),\n\t].join( ' ' );\n\tconst classes = clsx( 'components-external-link', className );\n\t/* Anchor links are perceived as external links.\n\tThis constant helps check for on page anchor links,\n\tto prevent them from being opened in the editor. */\n\tconst isInternalAnchor = !! href?.startsWith( '#' );\n\n\tconst onClickHandler = (\n\t\tevent: React.MouseEvent< HTMLAnchorElement, MouseEvent >\n\t) => {\n\t\tif ( isInternalAnchor ) {\n\t\t\tevent.preventDefault();\n\t\t}\n\n\t\tif ( props.onClick ) {\n\t\t\tprops.onClick( event );\n\t\t}\n\t};\n\n\treturn (\n\t\t/* eslint-disable react/jsx-no-target-blank */\n\t\t<a\n\t\t\t{ ...additionalProps }\n\t\t\tclassName={ classes }\n\t\t\thref={ href }\n\t\t\tonClick={ onClickHandler }\n\t\t\ttarget=\"_blank\"\n\t\t\trel={ optimizedRel }\n\t\t\tref={ ref }\n\t\t>\n\t\t\t<span className=\"components-external-link__contents\">\n\t\t\t\t{ children }\n\t\t\t</span>\n\t\t\t<span\n\t\t\t\tclassName=\"components-external-link__icon\"\n\t\t\t\taria-label={\n\t\t\t\t\t/* translators: accessibility text */\n\t\t\t\t\t__( '(opens in a new tab)' )\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t&#8599;\n\t\t\t</span>\n\t\t</a>\n\t\t/* eslint-enable react/jsx-no-target-blank */\n\t);\n}\n\n/**\n * Link to an external resource.\n *\n * ```jsx\n * import { ExternalLink } from '@wordpress/components';\n *\n * const MyExternalLink = () => (\n *   <ExternalLink href=\"https://wordpress.org\">WordPress.org</ExternalLink>\n * );\n * ```\n */\nexport const ExternalLink = forwardRef( UnforwardedExternalLink );\n\nexport default ExternalLink;\n"],"mappings":";;;;;;;;AAGA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AAMA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AAVA;AACA;AACA;;AAIA;AACA;AACA;;AAIA;AACA;AACA;;AAIA,SAASG,uBAAuBA,CAC/BC,KAGC,EACDC,GAAsC,EACrC;EACD,MAAM;IAAEC,IAAI;IAAEC,QAAQ;IAAEC,SAAS;IAAEC,GAAG,GAAG,EAAE;IAAE,GAAGC;EAAgB,CAAC,GAAGN,KAAK;EACzE,MAAMO,YAAY,GAAG,CACpB,GAAG,IAAIC,GAAG,CACT,CACC,GAAGH,GAAG,CAACI,KAAK,CAAE,GAAI,CAAC,EACnB,UAAU,EACV,YAAY,EACZ,UAAU,CACV,CAACC,MAAM,CAAEC,OAAQ,CACnB,CAAC,CACD,CAACC,IAAI,CAAE,GAAI,CAAC;EACb,MAAMC,OAAO,GAAG,IAAAC,aAAI,EAAE,0BAA0B,EAAEV,SAAU,CAAC;EAC7D;AACD;AACA;EACC,MAAMW,gBAAgB,GAAG,CAAC,CAAEb,IAAI,EAAEc,UAAU,CAAE,GAAI,CAAC;EAEnD,MAAMC,cAAc,GACnBC,KAAwD,IACpD;IACJ,IAAKH,gBAAgB,EAAG;MACvBG,KAAK,CAACC,cAAc,CAAC,CAAC;IACvB;IAEA,IAAKnB,KAAK,CAACoB,OAAO,EAAG;MACpBpB,KAAK,CAACoB,OAAO,CAAEF,KAAM,CAAC;IACvB;EACD,CAAC;EAED,OACC;IACA,IAAAG,MAAA,CAAAC,aAAA;MAAA,GACMhB,eAAe;MACpBF,SAAS,EAAGS,OAAS;MACrBX,IAAI,EAAGA,IAAM;MACbkB,OAAO,EAAGH,cAAgB;MAC1BM,MAAM,EAAC,QAAQ;MACflB,GAAG,EAAGE,YAAc;MACpBN,GAAG,EAAGA;IAAK,GAEX,IAAAoB,MAAA,CAAAC,aAAA;MAAMlB,SAAS,EAAC;IAAoC,GACjDD,QACG,CAAC,EACP,IAAAkB,MAAA,CAAAC,aAAA;MACClB,SAAS,EAAC,gCAAgC;MAC1C,cACC;MACA,IAAAoB,QAAE,EAAE,sBAAuB;IAC3B,GACD,QAEK,CACJ;IACH;EAAA;AAEF;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,YAAY,GAAAC,OAAA,CAAAD,YAAA,GAAG,IAAAE,mBAAU,EAAE5B,uBAAwB,CAAC;AAAC,IAAA6B,QAAA,GAAAF,OAAA,CAAAG,OAAA,GAEnDJ,YAAY","ignoreList":[]}
+{"version":3,"names":["_clsx","_interopRequireDefault","require","_i18n","_element","_jsxRuntime","UnforwardedExternalLink","props","ref","href","children","className","rel","additionalProps","optimizedRel","Set","split","filter","Boolean","join","classes","clsx","isInternalAnchor","startsWith","onClickHandler","event","preventDefault","onClick","jsxs","target","jsx","__","ExternalLink","exports","forwardRef","_default","default"],"sources":["@wordpress/components/src/external-link/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { ExternalLinkProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\nfunction UnforwardedExternalLink(\n\tprops: Omit<\n\t\tWordPressComponentProps< ExternalLinkProps, 'a', false >,\n\t\t'target'\n\t>,\n\tref: ForwardedRef< HTMLAnchorElement >\n) {\n\tconst { href, children, className, rel = '', ...additionalProps } = props;\n\tconst optimizedRel = [\n\t\t...new Set(\n\t\t\t[\n\t\t\t\t...rel.split( ' ' ),\n\t\t\t\t'external',\n\t\t\t\t'noreferrer',\n\t\t\t\t'noopener',\n\t\t\t].filter( Boolean )\n\t\t),\n\t].join( ' ' );\n\tconst classes = clsx( 'components-external-link', className );\n\t/* Anchor links are perceived as external links.\n\tThis constant helps check for on page anchor links,\n\tto prevent them from being opened in the editor. */\n\tconst isInternalAnchor = !! href?.startsWith( '#' );\n\n\tconst onClickHandler = (\n\t\tevent: React.MouseEvent< HTMLAnchorElement, MouseEvent >\n\t) => {\n\t\tif ( isInternalAnchor ) {\n\t\t\tevent.preventDefault();\n\t\t}\n\n\t\tif ( props.onClick ) {\n\t\t\tprops.onClick( event );\n\t\t}\n\t};\n\n\treturn (\n\t\t/* eslint-disable react/jsx-no-target-blank */\n\t\t<a\n\t\t\t{ ...additionalProps }\n\t\t\tclassName={ classes }\n\t\t\thref={ href }\n\t\t\tonClick={ onClickHandler }\n\t\t\ttarget=\"_blank\"\n\t\t\trel={ optimizedRel }\n\t\t\tref={ ref }\n\t\t>\n\t\t\t<span className=\"components-external-link__contents\">\n\t\t\t\t{ children }\n\t\t\t</span>\n\t\t\t<span\n\t\t\t\tclassName=\"components-external-link__icon\"\n\t\t\t\taria-label={\n\t\t\t\t\t/* translators: accessibility text */\n\t\t\t\t\t__( '(opens in a new tab)' )\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t&#8599;\n\t\t\t</span>\n\t\t</a>\n\t\t/* eslint-enable react/jsx-no-target-blank */\n\t);\n}\n\n/**\n * Link to an external resource.\n *\n * ```jsx\n * import { ExternalLink } from '@wordpress/components';\n *\n * const MyExternalLink = () => (\n *   <ExternalLink href=\"https://wordpress.org\">WordPress.org</ExternalLink>\n * );\n * ```\n */\nexport const ExternalLink = forwardRef( UnforwardedExternalLink );\n\nexport default ExternalLink;\n"],"mappings":";;;;;;;AAGA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AAMA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AAAgD,IAAAG,WAAA,GAAAH,OAAA;AAVhD;AACA;AACA;;AAIA;AACA;AACA;;AAIA;AACA;AACA;;AAIA,SAASI,uBAAuBA,CAC/BC,KAGC,EACDC,GAAsC,EACrC;EACD,MAAM;IAAEC,IAAI;IAAEC,QAAQ;IAAEC,SAAS;IAAEC,GAAG,GAAG,EAAE;IAAE,GAAGC;EAAgB,CAAC,GAAGN,KAAK;EACzE,MAAMO,YAAY,GAAG,CACpB,GAAG,IAAIC,GAAG,CACT,CACC,GAAGH,GAAG,CAACI,KAAK,CAAE,GAAI,CAAC,EACnB,UAAU,EACV,YAAY,EACZ,UAAU,CACV,CAACC,MAAM,CAAEC,OAAQ,CACnB,CAAC,CACD,CAACC,IAAI,CAAE,GAAI,CAAC;EACb,MAAMC,OAAO,GAAG,IAAAC,aAAI,EAAE,0BAA0B,EAAEV,SAAU,CAAC;EAC7D;AACD;AACA;EACC,MAAMW,gBAAgB,GAAG,CAAC,CAAEb,IAAI,EAAEc,UAAU,CAAE,GAAI,CAAC;EAEnD,MAAMC,cAAc,GACnBC,KAAwD,IACpD;IACJ,IAAKH,gBAAgB,EAAG;MACvBG,KAAK,CAACC,cAAc,CAAC,CAAC;IACvB;IAEA,IAAKnB,KAAK,CAACoB,OAAO,EAAG;MACpBpB,KAAK,CAACoB,OAAO,CAAEF,KAAM,CAAC;IACvB;EACD,CAAC;EAED;IAAA;IACC;IACA,IAAApB,WAAA,CAAAuB,IAAA;MAAA,GACMf,eAAe;MACpBF,SAAS,EAAGS,OAAS;MACrBX,IAAI,EAAGA,IAAM;MACbkB,OAAO,EAAGH,cAAgB;MAC1BK,MAAM,EAAC,QAAQ;MACfjB,GAAG,EAAGE,YAAc;MACpBN,GAAG,EAAGA,GAAK;MAAAE,QAAA,gBAEX,IAAAL,WAAA,CAAAyB,GAAA;QAAMnB,SAAS,EAAC,oCAAoC;QAAAD,QAAA,EACjDA;MAAQ,CACL,CAAC,eACP,IAAAL,WAAA,CAAAyB,GAAA;QACCnB,SAAS,EAAC,gCAAgC;QAC1C,cACC;QACA,IAAAoB,QAAE,EAAE,sBAAuB,CAC3B;QAAArB,QAAA,EACD;MAED,CAAM,CAAC;IAAA,CACL;IACH;EAAA;AAEF;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMsB,YAAY,GAAAC,OAAA,CAAAD,YAAA,GAAG,IAAAE,mBAAU,EAAE5B,uBAAwB,CAAC;AAAC,IAAA6B,QAAA,GAAAF,OAAA,CAAAG,OAAA,GAEnDJ,YAAY","ignoreList":[]}

package/build/external-link/index.native.js

@@ -5,10 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ExternalLink = ExternalLink;
 exports.default = void 0;
-var _react = require("react");
 var _reactNative = require("react-native");
 var _i18n = require("@wordpress/i18n");
 var _icons = require("@wordpress/icons");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * External dependencies
  */
@@ -21,12 +21,15 @@ function ExternalLink({
   href,
   children
 }) {
-  return (0, _react.createElement)(_reactNative.TouchableOpacity, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
     onPress: () => _reactNative.Linking.openURL(href),
-    accessibilityLabel: (0, _i18n.__)('Open link in a browser')
-  }, (0, _react.createElement)(_reactNative.Text, null, children), (0, _react.createElement)(_icons.Icon, {
-    icon: _icons.external
-  }));
+    accessibilityLabel: (0, _i18n.__)('Open link in a browser'),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      children: children
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
+      icon: _icons.external
+    })]
+  });
 }
 var _default = exports.default = ExternalLink;
 //# sourceMappingURL=index.native.js.map

package/build/external-link/index.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["_reactNative","require","_i18n","_icons","ExternalLink","href","children","_react","createElement","TouchableOpacity","onPress","Linking","openURL","accessibilityLabel","__","Text","Icon","icon","external","_default","exports","default"],"sources":["@wordpress/components/src/external-link/index.native.js"],"sourcesContent":["/**\n * External dependencies\n */\n\nimport { TouchableOpacity, Text, Linking } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { external, Icon } from '@wordpress/icons';\n\nexport function ExternalLink( { href, children } ) {\n\treturn (\n\t\t<TouchableOpacity\n\t\t\tonPress={ () => Linking.openURL( href ) }\n\t\t\taccessibilityLabel={ __( 'Open link in a browser' ) }\n\t\t>\n\t\t\t<Text>{ children }</Text>\n\t\t\t<Icon icon={ external } />\n\t\t</TouchableOpacity>\n\t);\n}\n\nexport default ExternalLink;\n"],"mappings":";;;;;;;;AAIA,IAAAA,YAAA,GAAAC,OAAA;AAKA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AAVA;AACA;AACA;;AAIA;AACA;AACA;;AAIO,SAASG,YAAYA,CAAE;EAAEC,IAAI;EAAEC;AAAS,CAAC,EAAG;EAClD,OACC,IAAAC,MAAA,CAAAC,aAAA,EAACR,YAAA,CAAAS,gBAAgB;IAChBC,OAAO,EAAGA,CAAA,KAAMC,oBAAO,CAACC,OAAO,CAAEP,IAAK,CAAG;IACzCQ,kBAAkB,EAAG,IAAAC,QAAE,EAAE,wBAAyB;EAAG,GAErD,IAAAP,MAAA,CAAAC,aAAA,EAACR,YAAA,CAAAe,IAAI,QAAGT,QAAgB,CAAC,EACzB,IAAAC,MAAA,CAAAC,aAAA,EAACL,MAAA,CAAAa,IAAI;IAACC,IAAI,EAAGC;EAAU,CAAE,CACR,CAAC;AAErB;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEcjB,YAAY","ignoreList":[]}
+{"version":3,"names":["_reactNative","require","_i18n","_icons","_jsxRuntime","ExternalLink","href","children","jsxs","TouchableOpacity","onPress","Linking","openURL","accessibilityLabel","__","jsx","Text","Icon","icon","external","_default","exports","default"],"sources":["@wordpress/components/src/external-link/index.native.js"],"sourcesContent":["/**\n * External dependencies\n */\n\nimport { TouchableOpacity, Text, Linking } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { external, Icon } from '@wordpress/icons';\n\nexport function ExternalLink( { href, children } ) {\n\treturn (\n\t\t<TouchableOpacity\n\t\t\tonPress={ () => Linking.openURL( href ) }\n\t\t\taccessibilityLabel={ __( 'Open link in a browser' ) }\n\t\t>\n\t\t\t<Text>{ children }</Text>\n\t\t\t<Icon icon={ external } />\n\t\t</TouchableOpacity>\n\t);\n}\n\nexport default ExternalLink;\n"],"mappings":";;;;;;;AAIA,IAAAA,YAAA,GAAAC,OAAA;AAKA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AAAkD,IAAAG,WAAA,GAAAH,OAAA;AAVlD;AACA;AACA;;AAIA;AACA;AACA;;AAIO,SAASI,YAAYA,CAAE;EAAEC,IAAI;EAAEC;AAAS,CAAC,EAAG;EAClD,oBACC,IAAAH,WAAA,CAAAI,IAAA,EAACR,YAAA,CAAAS,gBAAgB;IAChBC,OAAO,EAAGA,CAAA,KAAMC,oBAAO,CAACC,OAAO,CAAEN,IAAK,CAAG;IACzCO,kBAAkB,EAAG,IAAAC,QAAE,EAAE,wBAAyB,CAAG;IAAAP,QAAA,gBAErD,IAAAH,WAAA,CAAAW,GAAA,EAACf,YAAA,CAAAgB,IAAI;MAAAT,QAAA,EAAGA;IAAQ,CAAQ,CAAC,eACzB,IAAAH,WAAA,CAAAW,GAAA,EAACZ,MAAA,CAAAc,IAAI;MAACC,IAAI,EAAGC;IAAU,CAAE,CAAC;EAAA,CACT,CAAC;AAErB;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEcjB,YAAY","ignoreList":[]}

package/build/flex/flex/component.js

@@ -4,11 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.Flex = void 0;
-var _react = require("react");
 var _context = require("../../context");
 var _hook = require("./hook");
 var _context2 = require("./../context");
 var _view = require("../../view");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * External dependencies
  */
@@ -23,14 +23,16 @@ function UnconnectedFlex(props, forwardedRef) {
     isColumn,
     ...otherProps
   } = (0, _hook.useFlex)(props);
-  return (0, _react.createElement)(_context2.FlexContext.Provider, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_context2.FlexContext.Provider, {
     value: {
       flexItemDisplay: isColumn ? 'block' : undefined
-    }
-  }, (0, _react.createElement)(_view.View, {
-    ...otherProps,
-    ref: forwardedRef
-  }, children));
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_view.View, {
+      ...otherProps,
+      ref: forwardedRef,
+      children: children
+    })
+  });
 }
 
 /**

package/build/flex/flex/component.js.map

@@ -1 +1 @@
-{"version":3,"names":["_context","require","_hook","_context2","_view","UnconnectedFlex","props","forwardedRef","children","isColumn","otherProps","useFlex","_react","createElement","FlexContext","Provider","value","flexItemDisplay","undefined","View","ref","Flex","exports","contextConnect","_default","default"],"sources":["@wordpress/components/src/flex/flex/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../../context';\nimport { contextConnect } from '../../context';\nimport { useFlex } from './hook';\nimport { FlexContext } from './../context';\nimport { View } from '../../view';\nimport type { FlexProps } from '../types';\n\nfunction UnconnectedFlex(\n\tprops: WordPressComponentProps< FlexProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst { children, isColumn, ...otherProps } = useFlex( props );\n\n\treturn (\n\t\t<FlexContext.Provider\n\t\t\tvalue={ { flexItemDisplay: isColumn ? 'block' : undefined } }\n\t\t>\n\t\t\t<View { ...otherProps } ref={ forwardedRef }>\n\t\t\t\t{ children }\n\t\t\t</View>\n\t\t</FlexContext.Provider>\n\t);\n}\n\n/**\n * `Flex` is a primitive layout component that adaptively aligns child content\n * horizontally or vertically. `Flex` powers components like `HStack` and\n * `VStack`.\n *\n * `Flex` is used with any of its two sub-components, `FlexItem` and\n * `FlexBlock`.\n *\n * ```jsx\n * import { Flex, FlexBlock, FlexItem } from '@wordpress/components';\n *\n * function Example() {\n *   return (\n *     <Flex>\n *       <FlexItem>\n *         <p>Code</p>\n *       </FlexItem>\n *       <FlexBlock>\n *         <p>Poetry</p>\n *       </FlexBlock>\n *     </Flex>\n *   );\n * }\n * ```\n */\nexport const Flex = contextConnect( UnconnectedFlex, 'Flex' );\n\nexport default Flex;\n"],"mappings":";;;;;;;AASA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,SAAA,GAAAF,OAAA;AACA,IAAAG,KAAA,GAAAH,OAAA;AAZA;AACA;AACA;;AAGA;AACA;AACA;;AAQA,SAASI,eAAeA,CACvBC,KAAkD,EAClDC,YAAiC,EAChC;EACD,MAAM;IAAEC,QAAQ;IAAEC,QAAQ;IAAE,GAAGC;EAAW,CAAC,GAAG,IAAAC,aAAO,EAAEL,KAAM,CAAC;EAE9D,OACC,IAAAM,MAAA,CAAAC,aAAA,EAACV,SAAA,CAAAW,WAAW,CAACC,QAAQ;IACpBC,KAAK,EAAG;MAAEC,eAAe,EAAER,QAAQ,GAAG,OAAO,GAAGS;IAAU;EAAG,GAE7D,IAAAN,MAAA,CAAAC,aAAA,EAACT,KAAA,CAAAe,IAAI;IAAA,GAAMT,UAAU;IAAGU,GAAG,EAAGb;EAAc,GACzCC,QACG,CACe,CAAC;AAEzB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMa,IAAI,GAAAC,OAAA,CAAAD,IAAA,GAAG,IAAAE,uBAAc,EAAElB,eAAe,EAAE,MAAO,CAAC;AAAC,IAAAmB,QAAA,GAAAF,OAAA,CAAAG,OAAA,GAE/CJ,IAAI","ignoreList":[]}
+{"version":3,"names":["_context","require","_hook","_context2","_view","_jsxRuntime","UnconnectedFlex","props","forwardedRef","children","isColumn","otherProps","useFlex","jsx","FlexContext","Provider","value","flexItemDisplay","undefined","View","ref","Flex","exports","contextConnect","_default","default"],"sources":["@wordpress/components/src/flex/flex/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../../context';\nimport { contextConnect } from '../../context';\nimport { useFlex } from './hook';\nimport { FlexContext } from './../context';\nimport { View } from '../../view';\nimport type { FlexProps } from '../types';\n\nfunction UnconnectedFlex(\n\tprops: WordPressComponentProps< FlexProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst { children, isColumn, ...otherProps } = useFlex( props );\n\n\treturn (\n\t\t<FlexContext.Provider\n\t\t\tvalue={ { flexItemDisplay: isColumn ? 'block' : undefined } }\n\t\t>\n\t\t\t<View { ...otherProps } ref={ forwardedRef }>\n\t\t\t\t{ children }\n\t\t\t</View>\n\t\t</FlexContext.Provider>\n\t);\n}\n\n/**\n * `Flex` is a primitive layout component that adaptively aligns child content\n * horizontally or vertically. `Flex` powers components like `HStack` and\n * `VStack`.\n *\n * `Flex` is used with any of its two sub-components, `FlexItem` and\n * `FlexBlock`.\n *\n * ```jsx\n * import { Flex, FlexBlock, FlexItem } from '@wordpress/components';\n *\n * function Example() {\n *   return (\n *     <Flex>\n *       <FlexItem>\n *         <p>Code</p>\n *       </FlexItem>\n *       <FlexBlock>\n *         <p>Poetry</p>\n *       </FlexBlock>\n *     </Flex>\n *   );\n * }\n * ```\n */\nexport const Flex = contextConnect( UnconnectedFlex, 'Flex' );\n\nexport default Flex;\n"],"mappings":";;;;;;AASA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,SAAA,GAAAF,OAAA;AACA,IAAAG,KAAA,GAAAH,OAAA;AAAkC,IAAAI,WAAA,GAAAJ,OAAA;AAZlC;AACA;AACA;;AAGA;AACA;AACA;;AAQA,SAASK,eAAeA,CACvBC,KAAkD,EAClDC,YAAiC,EAChC;EACD,MAAM;IAAEC,QAAQ;IAAEC,QAAQ;IAAE,GAAGC;EAAW,CAAC,GAAG,IAAAC,aAAO,EAAEL,KAAM,CAAC;EAE9D,oBACC,IAAAF,WAAA,CAAAQ,GAAA,EAACV,SAAA,CAAAW,WAAW,CAACC,QAAQ;IACpBC,KAAK,EAAG;MAAEC,eAAe,EAAEP,QAAQ,GAAG,OAAO,GAAGQ;IAAU,CAAG;IAAAT,QAAA,eAE7D,IAAAJ,WAAA,CAAAQ,GAAA,EAACT,KAAA,CAAAe,IAAI;MAAA,GAAMR,UAAU;MAAGS,GAAG,EAAGZ,YAAc;MAAAC,QAAA,EACzCA;IAAQ,CACL;EAAC,CACc,CAAC;AAEzB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMY,IAAI,GAAAC,OAAA,CAAAD,IAAA,GAAG,IAAAE,uBAAc,EAAEjB,eAAe,EAAE,MAAO,CAAC;AAAC,IAAAkB,QAAA,GAAAF,OAAA,CAAAG,OAAA,GAE/CJ,IAAI","ignoreList":[]}

package/build/flex/flex-block/component.js

@@ -4,10 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.FlexBlock = void 0;
-var _react = require("react");
 var _context = require("../../context");
 var _view = require("../../view");
 var _hook = require("./hook");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * External dependencies
  */
@@ -18,7 +18,7 @@ var _hook = require("./hook");
 
 function UnconnectedFlexBlock(props, forwardedRef) {
   const flexBlockProps = (0, _hook.useFlexBlock)(props);
-  return (0, _react.createElement)(_view.View, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_view.View, {
     ...flexBlockProps,
     ref: forwardedRef
   });

package/build/flex/flex-block/component.js.map

@@ -1 +1 @@
-{"version":3,"names":["_context","require","_view","_hook","UnconnectedFlexBlock","props","forwardedRef","flexBlockProps","useFlexBlock","_react","createElement","View","ref","FlexBlock","exports","contextConnect","_default","default"],"sources":["@wordpress/components/src/flex/flex-block/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../../context';\nimport { contextConnect } from '../../context';\nimport { View } from '../../view';\nimport type { FlexBlockProps } from '../types';\nimport { useFlexBlock } from './hook';\n\nfunction UnconnectedFlexBlock(\n\tprops: WordPressComponentProps< FlexBlockProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst flexBlockProps = useFlexBlock( props );\n\n\treturn <View { ...flexBlockProps } ref={ forwardedRef } />;\n}\n\n/**\n * `FlexBlock` is a primitive layout component that adaptively resizes content\n * within layout containers like `Flex`.\n *\n * ```jsx\n * import { Flex, FlexBlock } from '@wordpress/components';\n *\n * function Example() {\n *   return (\n *     <Flex>\n *       <FlexBlock>...</FlexBlock>\n *     </Flex>\n *   );\n * }\n * ```\n */\nexport const FlexBlock = contextConnect( UnconnectedFlexBlock, 'FlexBlock' );\n\nexport default FlexBlock;\n"],"mappings":";;;;;;;AASA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AAEA,IAAAE,KAAA,GAAAF,OAAA;AAZA;AACA;AACA;;AAGA;AACA;AACA;;AAOA,SAASG,oBAAoBA,CAC5BC,KAAuD,EACvDC,YAAiC,EAChC;EACD,MAAMC,cAAc,GAAG,IAAAC,kBAAY,EAAEH,KAAM,CAAC;EAE5C,OAAO,IAAAI,MAAA,CAAAC,aAAA,EAACR,KAAA,CAAAS,IAAI;IAAA,GAAMJ,cAAc;IAAGK,GAAG,EAAGN;EAAc,CAAE,CAAC;AAC3D;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMO,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAG,IAAAE,uBAAc,EAAEX,oBAAoB,EAAE,WAAY,CAAC;AAAC,IAAAY,QAAA,GAAAF,OAAA,CAAAG,OAAA,GAE9DJ,SAAS","ignoreList":[]}
+{"version":3,"names":["_context","require","_view","_hook","_jsxRuntime","UnconnectedFlexBlock","props","forwardedRef","flexBlockProps","useFlexBlock","jsx","View","ref","FlexBlock","exports","contextConnect","_default","default"],"sources":["@wordpress/components/src/flex/flex-block/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../../context';\nimport { contextConnect } from '../../context';\nimport { View } from '../../view';\nimport type { FlexBlockProps } from '../types';\nimport { useFlexBlock } from './hook';\n\nfunction UnconnectedFlexBlock(\n\tprops: WordPressComponentProps< FlexBlockProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst flexBlockProps = useFlexBlock( props );\n\n\treturn <View { ...flexBlockProps } ref={ forwardedRef } />;\n}\n\n/**\n * `FlexBlock` is a primitive layout component that adaptively resizes content\n * within layout containers like `Flex`.\n *\n * ```jsx\n * import { Flex, FlexBlock } from '@wordpress/components';\n *\n * function Example() {\n *   return (\n *     <Flex>\n *       <FlexBlock>...</FlexBlock>\n *     </Flex>\n *   );\n * }\n * ```\n */\nexport const FlexBlock = contextConnect( UnconnectedFlexBlock, 'FlexBlock' );\n\nexport default FlexBlock;\n"],"mappings":";;;;;;AASA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AAEA,IAAAE,KAAA,GAAAF,OAAA;AAAsC,IAAAG,WAAA,GAAAH,OAAA;AAZtC;AACA;AACA;;AAGA;AACA;AACA;;AAOA,SAASI,oBAAoBA,CAC5BC,KAAuD,EACvDC,YAAiC,EAChC;EACD,MAAMC,cAAc,GAAG,IAAAC,kBAAY,EAAEH,KAAM,CAAC;EAE5C,oBAAO,IAAAF,WAAA,CAAAM,GAAA,EAACR,KAAA,CAAAS,IAAI;IAAA,GAAMH,cAAc;IAAGI,GAAG,EAAGL;EAAc,CAAE,CAAC;AAC3D;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMM,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAG,IAAAE,uBAAc,EAAEV,oBAAoB,EAAE,WAAY,CAAC;AAAC,IAAAW,QAAA,GAAAF,OAAA,CAAAG,OAAA,GAE9DJ,SAAS","ignoreList":[]}

package/build/flex/flex-item/component.js

@@ -4,10 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.FlexItem = void 0;
-var _react = require("react");
 var _context = require("../../context");
 var _view = require("../../view");
 var _hook = require("./hook");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * External dependencies
  */
@@ -18,7 +18,7 @@ var _hook = require("./hook");
 
 function UnconnectedFlexItem(props, forwardedRef) {
   const flexItemProps = (0, _hook.useFlexItem)(props);
-  return (0, _react.createElement)(_view.View, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_view.View, {
     ...flexItemProps,
     ref: forwardedRef
   });

package/build/flex/flex-item/component.js.map

@@ -1 +1 @@
-{"version":3,"names":["_context","require","_view","_hook","UnconnectedFlexItem","props","forwardedRef","flexItemProps","useFlexItem","_react","createElement","View","ref","FlexItem","exports","contextConnect","_default","default"],"sources":["@wordpress/components/src/flex/flex-item/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../../context';\nimport { contextConnect } from '../../context';\nimport { View } from '../../view';\nimport { useFlexItem } from './hook';\nimport type { FlexItemProps } from '../types';\n\nfunction UnconnectedFlexItem(\n\tprops: WordPressComponentProps< FlexItemProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst flexItemProps = useFlexItem( props );\n\n\treturn <View { ...flexItemProps } ref={ forwardedRef } />;\n}\n\n/**\n * `FlexItem` is a primitive layout component that aligns content within layout\n * containers like `Flex`.\n *\n * ```jsx\n * import { Flex, FlexItem } from '@wordpress/components';\n *\n * function Example() {\n *   return (\n *     <Flex>\n *       <FlexItem>...</FlexItem>\n *     </Flex>\n *   );\n * }\n * ```\n */\nexport const FlexItem = contextConnect( UnconnectedFlexItem, 'FlexItem' );\n\nexport default FlexItem;\n"],"mappings":";;;;;;;AASA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AAXA;AACA;AACA;;AAGA;AACA;AACA;;AAOA,SAASG,mBAAmBA,CAC3BC,KAAsD,EACtDC,YAAiC,EAChC;EACD,MAAMC,aAAa,GAAG,IAAAC,iBAAW,EAAEH,KAAM,CAAC;EAE1C,OAAO,IAAAI,MAAA,CAAAC,aAAA,EAACR,KAAA,CAAAS,IAAI;IAAA,GAAMJ,aAAa;IAAGK,GAAG,EAAGN;EAAc,CAAE,CAAC;AAC1D;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMO,QAAQ,GAAAC,OAAA,CAAAD,QAAA,GAAG,IAAAE,uBAAc,EAAEX,mBAAmB,EAAE,UAAW,CAAC;AAAC,IAAAY,QAAA,GAAAF,OAAA,CAAAG,OAAA,GAE3DJ,QAAQ","ignoreList":[]}
+{"version":3,"names":["_context","require","_view","_hook","_jsxRuntime","UnconnectedFlexItem","props","forwardedRef","flexItemProps","useFlexItem","jsx","View","ref","FlexItem","exports","contextConnect","_default","default"],"sources":["@wordpress/components/src/flex/flex-item/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../../context';\nimport { contextConnect } from '../../context';\nimport { View } from '../../view';\nimport { useFlexItem } from './hook';\nimport type { FlexItemProps } from '../types';\n\nfunction UnconnectedFlexItem(\n\tprops: WordPressComponentProps< FlexItemProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst flexItemProps = useFlexItem( props );\n\n\treturn <View { ...flexItemProps } ref={ forwardedRef } />;\n}\n\n/**\n * `FlexItem` is a primitive layout component that aligns content within layout\n * containers like `Flex`.\n *\n * ```jsx\n * import { Flex, FlexItem } from '@wordpress/components';\n *\n * function Example() {\n *   return (\n *     <Flex>\n *       <FlexItem>...</FlexItem>\n *     </Flex>\n *   );\n * }\n * ```\n */\nexport const FlexItem = contextConnect( UnconnectedFlexItem, 'FlexItem' );\n\nexport default FlexItem;\n"],"mappings":";;;;;;AASA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AAAqC,IAAAG,WAAA,GAAAH,OAAA;AAXrC;AACA;AACA;;AAGA;AACA;AACA;;AAOA,SAASI,mBAAmBA,CAC3BC,KAAsD,EACtDC,YAAiC,EAChC;EACD,MAAMC,aAAa,GAAG,IAAAC,iBAAW,EAAEH,KAAM,CAAC;EAE1C,oBAAO,IAAAF,WAAA,CAAAM,GAAA,EAACR,KAAA,CAAAS,IAAI;IAAA,GAAMH,aAAa;IAAGI,GAAG,EAAGL;EAAc,CAAE,CAAC;AAC1D;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMM,QAAQ,GAAAC,OAAA,CAAAD,QAAA,GAAG,IAAAE,uBAAc,EAAEV,mBAAmB,EAAE,UAAW,CAAC;AAAC,IAAAW,QAAA,GAAAF,OAAA,CAAAG,OAAA,GAE3DJ,QAAQ","ignoreList":[]}

package/build/focal-point-picker/controls.js

@@ -4,10 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = FocalPointPickerControls;
-var _react = require("react");
 var _i18n = require("@wordpress/i18n");
 var _focalPointPickerStyle = require("./styles/focal-point-picker-style");
 var _utils = require("./utils");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * WordPress dependencies
  */
@@ -43,29 +43,30 @@ function FocalPointPickerControls({
       });
     }
   };
-  return (0, _react.createElement)(_focalPointPickerStyle.ControlWrapper, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_focalPointPickerStyle.ControlWrapper, {
     className: "focal-point-picker__controls",
     __nextHasNoMarginBottom: __nextHasNoMarginBottom,
     hasHelpText: hasHelpText,
-    gap: 4
-  }, (0, _react.createElement)(FocalPointUnitControl, {
-    __next40pxDefaultSize: __next40pxDefaultSize,
-    label: (0, _i18n.__)('Left'),
-    "aria-label": (0, _i18n.__)('Focal point left position'),
-    value: [valueX, '%'].join(''),
-    onChange: next => handleChange(next, 'x'),
-    dragDirection: "e"
-  }), (0, _react.createElement)(FocalPointUnitControl, {
-    __next40pxDefaultSize: __next40pxDefaultSize,
-    label: (0, _i18n.__)('Top'),
-    "aria-label": (0, _i18n.__)('Focal point top position'),
-    value: [valueY, '%'].join(''),
-    onChange: next => handleChange(next, 'y'),
-    dragDirection: "s"
-  }));
+    gap: 4,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(FocalPointUnitControl, {
+      __next40pxDefaultSize: __next40pxDefaultSize,
+      label: (0, _i18n.__)('Left'),
+      "aria-label": (0, _i18n.__)('Focal point left position'),
+      value: [valueX, '%'].join(''),
+      onChange: next => handleChange(next, 'x'),
+      dragDirection: "e"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(FocalPointUnitControl, {
+      __next40pxDefaultSize: __next40pxDefaultSize,
+      label: (0, _i18n.__)('Top'),
+      "aria-label": (0, _i18n.__)('Focal point top position'),
+      value: [valueY, '%'].join(''),
+      onChange: next => handleChange(next, 'y'),
+      dragDirection: "s"
+    })]
+  });
 }
 function FocalPointUnitControl(props) {
-  return (0, _react.createElement)(_focalPointPickerStyle.StyledUnitControl, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_focalPointPickerStyle.StyledUnitControl, {
     className: "focal-point-picker__controls-position-unit-control",
     labelPosition: "top",
     max: TEXTCONTROL_MAX,

package/build/focal-point-picker/controls.js.map

@@ -1 +1 @@
-{"version":3,"names":["_i18n","require","_focalPointPickerStyle","_utils","TEXTCONTROL_MIN","TEXTCONTROL_MAX","noop","FocalPointPickerControls","__nextHasNoMarginBottom","__next40pxDefaultSize","hasHelpText","onChange","point","x","y","valueX","fractionToPercentage","valueY","handleChange","value","axis","undefined","num","parseInt","isNaN","_react","createElement","ControlWrapper","className","gap","FocalPointUnitControl","label","__","join","next","dragDirection","props","StyledUnitControl","labelPosition","max","min","units"],"sources":["@wordpress/components/src/focal-point-picker/controls.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport {\n\tStyledUnitControl,\n\tControlWrapper,\n} from './styles/focal-point-picker-style';\nimport { fractionToPercentage } from './utils';\nimport type {\n\tUnitControlProps,\n\tUnitControlOnChangeCallback,\n} from '../unit-control/types';\nimport type { FocalPointAxis, FocalPointPickerControlsProps } from './types';\n\nconst TEXTCONTROL_MIN = 0;\nconst TEXTCONTROL_MAX = 100;\nconst noop = () => {};\n\nexport default function FocalPointPickerControls( {\n\t__nextHasNoMarginBottom,\n\t__next40pxDefaultSize,\n\thasHelpText,\n\tonChange = noop,\n\tpoint = {\n\t\tx: 0.5,\n\t\ty: 0.5,\n\t},\n}: FocalPointPickerControlsProps ) {\n\tconst valueX = fractionToPercentage( point.x );\n\tconst valueY = fractionToPercentage( point.y );\n\n\tconst handleChange = (\n\t\tvalue: Parameters< UnitControlOnChangeCallback >[ 0 ],\n\t\taxis: FocalPointAxis\n\t) => {\n\t\tif ( value === undefined ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst num = parseInt( value, 10 );\n\n\t\tif ( ! isNaN( num ) ) {\n\t\t\tonChange( { ...point, [ axis ]: num / 100 } );\n\t\t}\n\t};\n\n\treturn (\n\t\t<ControlWrapper\n\t\t\tclassName=\"focal-point-picker__controls\"\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\thasHelpText={ hasHelpText }\n\t\t\tgap={ 4 }\n\t\t>\n\t\t\t<FocalPointUnitControl\n\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\tlabel={ __( 'Left' ) }\n\t\t\t\taria-label={ __( 'Focal point left position' ) }\n\t\t\t\tvalue={ [ valueX, '%' ].join( '' ) }\n\t\t\t\tonChange={\n\t\t\t\t\t( ( next ) =>\n\t\t\t\t\t\thandleChange(\n\t\t\t\t\t\t\tnext,\n\t\t\t\t\t\t\t'x'\n\t\t\t\t\t\t) ) as UnitControlOnChangeCallback\n\t\t\t\t}\n\t\t\t\tdragDirection=\"e\"\n\t\t\t/>\n\t\t\t<FocalPointUnitControl\n\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\tlabel={ __( 'Top' ) }\n\t\t\t\taria-label={ __( 'Focal point top position' ) }\n\t\t\t\tvalue={ [ valueY, '%' ].join( '' ) }\n\t\t\t\tonChange={\n\t\t\t\t\t( ( next ) =>\n\t\t\t\t\t\thandleChange(\n\t\t\t\t\t\t\tnext,\n\t\t\t\t\t\t\t'y'\n\t\t\t\t\t\t) ) as UnitControlOnChangeCallback\n\t\t\t\t}\n\t\t\t\tdragDirection=\"s\"\n\t\t\t/>\n\t\t</ControlWrapper>\n\t);\n}\n\nfunction FocalPointUnitControl( props: UnitControlProps ) {\n\treturn (\n\t\t<StyledUnitControl\n\t\t\tclassName=\"focal-point-picker__controls-position-unit-control\"\n\t\t\tlabelPosition=\"top\"\n\t\t\tmax={ TEXTCONTROL_MAX }\n\t\t\tmin={ TEXTCONTROL_MIN }\n\t\t\tunits={ [ { value: '%', label: '%' } ] }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AAKA,IAAAC,sBAAA,GAAAD,OAAA;AAIA,IAAAE,MAAA,GAAAF,OAAA;AAZA;AACA;AACA;;AAGA;AACA;AACA;;AAYA,MAAMG,eAAe,GAAG,CAAC;AACzB,MAAMC,eAAe,GAAG,GAAG;AAC3B,MAAMC,IAAI,GAAGA,CAAA,KAAM,CAAC,CAAC;AAEN,SAASC,wBAAwBA,CAAE;EACjDC,uBAAuB;EACvBC,qBAAqB;EACrBC,WAAW;EACXC,QAAQ,GAAGL,IAAI;EACfM,KAAK,GAAG;IACPC,CAAC,EAAE,GAAG;IACNC,CAAC,EAAE;EACJ;AAC8B,CAAC,EAAG;EAClC,MAAMC,MAAM,GAAG,IAAAC,2BAAoB,EAAEJ,KAAK,CAACC,CAAE,CAAC;EAC9C,MAAMI,MAAM,GAAG,IAAAD,2BAAoB,EAAEJ,KAAK,CAACE,CAAE,CAAC;EAE9C,MAAMI,YAAY,GAAGA,CACpBC,KAAqD,EACrDC,IAAoB,KAChB;IACJ,IAAKD,KAAK,KAAKE,SAAS,EAAG;MAC1B;IACD;IAEA,MAAMC,GAAG,GAAGC,QAAQ,CAAEJ,KAAK,EAAE,EAAG,CAAC;IAEjC,IAAK,CAAEK,KAAK,CAAEF,GAAI,CAAC,EAAG;MACrBX,QAAQ,CAAE;QAAE,GAAGC,KAAK;QAAE,CAAEQ,IAAI,GAAIE,GAAG,GAAG;MAAI,CAAE,CAAC;IAC9C;EACD,CAAC;EAED,OACC,IAAAG,MAAA,CAAAC,aAAA,EAACxB,sBAAA,CAAAyB,cAAc;IACdC,SAAS,EAAC,8BAA8B;IACxCpB,uBAAuB,EAAGA,uBAAyB;IACnDE,WAAW,EAAGA,WAAa;IAC3BmB,GAAG,EAAG;EAAG,GAET,IAAAJ,MAAA,CAAAC,aAAA,EAACI,qBAAqB;IACrBrB,qBAAqB,EAAGA,qBAAuB;IAC/CsB,KAAK,EAAG,IAAAC,QAAE,EAAE,MAAO,CAAG;IACtB,cAAa,IAAAA,QAAE,EAAE,2BAA4B,CAAG;IAChDb,KAAK,EAAG,CAAEJ,MAAM,EAAE,GAAG,CAAE,CAACkB,IAAI,CAAE,EAAG,CAAG;IACpCtB,QAAQ,EACHuB,IAAI,IACPhB,YAAY,CACXgB,IAAI,EACJ,GACD,CACD;IACDC,aAAa,EAAC;EAAG,CACjB,CAAC,EACF,IAAAV,MAAA,CAAAC,aAAA,EAACI,qBAAqB;IACrBrB,qBAAqB,EAAGA,qBAAuB;IAC/CsB,KAAK,EAAG,IAAAC,QAAE,EAAE,KAAM,CAAG;IACrB,cAAa,IAAAA,QAAE,EAAE,0BAA2B,CAAG;IAC/Cb,KAAK,EAAG,CAAEF,MAAM,EAAE,GAAG,CAAE,CAACgB,IAAI,CAAE,EAAG,CAAG;IACpCtB,QAAQ,EACHuB,IAAI,IACPhB,YAAY,CACXgB,IAAI,EACJ,GACD,CACD;IACDC,aAAa,EAAC;EAAG,CACjB,CACc,CAAC;AAEnB;AAEA,SAASL,qBAAqBA,CAAEM,KAAuB,EAAG;EACzD,OACC,IAAAX,MAAA,CAAAC,aAAA,EAACxB,sBAAA,CAAAmC,iBAAiB;IACjBT,SAAS,EAAC,oDAAoD;IAC9DU,aAAa,EAAC,KAAK;IACnBC,GAAG,EAAGlC,eAAiB;IACvBmC,GAAG,EAAGpC,eAAiB;IACvBqC,KAAK,EAAG,CAAE;MAAEtB,KAAK,EAAE,GAAG;MAAEY,KAAK,EAAE;IAAI,CAAC,CAAI;IAAA,GACnCK;EAAK,CACV,CAAC;AAEJ","ignoreList":[]}
+{"version":3,"names":["_i18n","require","_focalPointPickerStyle","_utils","_jsxRuntime","TEXTCONTROL_MIN","TEXTCONTROL_MAX","noop","FocalPointPickerControls","__nextHasNoMarginBottom","__next40pxDefaultSize","hasHelpText","onChange","point","x","y","valueX","fractionToPercentage","valueY","handleChange","value","axis","undefined","num","parseInt","isNaN","jsxs","ControlWrapper","className","gap","children","jsx","FocalPointUnitControl","label","__","join","next","dragDirection","props","StyledUnitControl","labelPosition","max","min","units"],"sources":["@wordpress/components/src/focal-point-picker/controls.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport {\n\tStyledUnitControl,\n\tControlWrapper,\n} from './styles/focal-point-picker-style';\nimport { fractionToPercentage } from './utils';\nimport type {\n\tUnitControlProps,\n\tUnitControlOnChangeCallback,\n} from '../unit-control/types';\nimport type { FocalPointAxis, FocalPointPickerControlsProps } from './types';\n\nconst TEXTCONTROL_MIN = 0;\nconst TEXTCONTROL_MAX = 100;\nconst noop = () => {};\n\nexport default function FocalPointPickerControls( {\n\t__nextHasNoMarginBottom,\n\t__next40pxDefaultSize,\n\thasHelpText,\n\tonChange = noop,\n\tpoint = {\n\t\tx: 0.5,\n\t\ty: 0.5,\n\t},\n}: FocalPointPickerControlsProps ) {\n\tconst valueX = fractionToPercentage( point.x );\n\tconst valueY = fractionToPercentage( point.y );\n\n\tconst handleChange = (\n\t\tvalue: Parameters< UnitControlOnChangeCallback >[ 0 ],\n\t\taxis: FocalPointAxis\n\t) => {\n\t\tif ( value === undefined ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst num = parseInt( value, 10 );\n\n\t\tif ( ! isNaN( num ) ) {\n\t\t\tonChange( { ...point, [ axis ]: num / 100 } );\n\t\t}\n\t};\n\n\treturn (\n\t\t<ControlWrapper\n\t\t\tclassName=\"focal-point-picker__controls\"\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\thasHelpText={ hasHelpText }\n\t\t\tgap={ 4 }\n\t\t>\n\t\t\t<FocalPointUnitControl\n\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\tlabel={ __( 'Left' ) }\n\t\t\t\taria-label={ __( 'Focal point left position' ) }\n\t\t\t\tvalue={ [ valueX, '%' ].join( '' ) }\n\t\t\t\tonChange={\n\t\t\t\t\t( ( next ) =>\n\t\t\t\t\t\thandleChange(\n\t\t\t\t\t\t\tnext,\n\t\t\t\t\t\t\t'x'\n\t\t\t\t\t\t) ) as UnitControlOnChangeCallback\n\t\t\t\t}\n\t\t\t\tdragDirection=\"e\"\n\t\t\t/>\n\t\t\t<FocalPointUnitControl\n\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\tlabel={ __( 'Top' ) }\n\t\t\t\taria-label={ __( 'Focal point top position' ) }\n\t\t\t\tvalue={ [ valueY, '%' ].join( '' ) }\n\t\t\t\tonChange={\n\t\t\t\t\t( ( next ) =>\n\t\t\t\t\t\thandleChange(\n\t\t\t\t\t\t\tnext,\n\t\t\t\t\t\t\t'y'\n\t\t\t\t\t\t) ) as UnitControlOnChangeCallback\n\t\t\t\t}\n\t\t\t\tdragDirection=\"s\"\n\t\t\t/>\n\t\t</ControlWrapper>\n\t);\n}\n\nfunction FocalPointUnitControl( props: UnitControlProps ) {\n\treturn (\n\t\t<StyledUnitControl\n\t\t\tclassName=\"focal-point-picker__controls-position-unit-control\"\n\t\t\tlabelPosition=\"top\"\n\t\t\tmax={ TEXTCONTROL_MAX }\n\t\t\tmin={ TEXTCONTROL_MIN }\n\t\t\tunits={ [ { value: '%', label: '%' } ] }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n"],"mappings":";;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AAKA,IAAAC,sBAAA,GAAAD,OAAA;AAIA,IAAAE,MAAA,GAAAF,OAAA;AAA+C,IAAAG,WAAA,GAAAH,OAAA;AAZ/C;AACA;AACA;;AAGA;AACA;AACA;;AAYA,MAAMI,eAAe,GAAG,CAAC;AACzB,MAAMC,eAAe,GAAG,GAAG;AAC3B,MAAMC,IAAI,GAAGA,CAAA,KAAM,CAAC,CAAC;AAEN,SAASC,wBAAwBA,CAAE;EACjDC,uBAAuB;EACvBC,qBAAqB;EACrBC,WAAW;EACXC,QAAQ,GAAGL,IAAI;EACfM,KAAK,GAAG;IACPC,CAAC,EAAE,GAAG;IACNC,CAAC,EAAE;EACJ;AAC8B,CAAC,EAAG;EAClC,MAAMC,MAAM,GAAG,IAAAC,2BAAoB,EAAEJ,KAAK,CAACC,CAAE,CAAC;EAC9C,MAAMI,MAAM,GAAG,IAAAD,2BAAoB,EAAEJ,KAAK,CAACE,CAAE,CAAC;EAE9C,MAAMI,YAAY,GAAGA,CACpBC,KAAqD,EACrDC,IAAoB,KAChB;IACJ,IAAKD,KAAK,KAAKE,SAAS,EAAG;MAC1B;IACD;IAEA,MAAMC,GAAG,GAAGC,QAAQ,CAAEJ,KAAK,EAAE,EAAG,CAAC;IAEjC,IAAK,CAAEK,KAAK,CAAEF,GAAI,CAAC,EAAG;MACrBX,QAAQ,CAAE;QAAE,GAAGC,KAAK;QAAE,CAAEQ,IAAI,GAAIE,GAAG,GAAG;MAAI,CAAE,CAAC;IAC9C;EACD,CAAC;EAED,oBACC,IAAAnB,WAAA,CAAAsB,IAAA,EAACxB,sBAAA,CAAAyB,cAAc;IACdC,SAAS,EAAC,8BAA8B;IACxCnB,uBAAuB,EAAGA,uBAAyB;IACnDE,WAAW,EAAGA,WAAa;IAC3BkB,GAAG,EAAG,CAAG;IAAAC,QAAA,gBAET,IAAA1B,WAAA,CAAA2B,GAAA,EAACC,qBAAqB;MACrBtB,qBAAqB,EAAGA,qBAAuB;MAC/CuB,KAAK,EAAG,IAAAC,QAAE,EAAE,MAAO,CAAG;MACtB,cAAa,IAAAA,QAAE,EAAE,2BAA4B,CAAG;MAChDd,KAAK,EAAG,CAAEJ,MAAM,EAAE,GAAG,CAAE,CAACmB,IAAI,CAAE,EAAG,CAAG;MACpCvB,QAAQ,EACHwB,IAAI,IACPjB,YAAY,CACXiB,IAAI,EACJ,GACD,CACD;MACDC,aAAa,EAAC;IAAG,CACjB,CAAC,eACF,IAAAjC,WAAA,CAAA2B,GAAA,EAACC,qBAAqB;MACrBtB,qBAAqB,EAAGA,qBAAuB;MAC/CuB,KAAK,EAAG,IAAAC,QAAE,EAAE,KAAM,CAAG;MACrB,cAAa,IAAAA,QAAE,EAAE,0BAA2B,CAAG;MAC/Cd,KAAK,EAAG,CAAEF,MAAM,EAAE,GAAG,CAAE,CAACiB,IAAI,CAAE,EAAG,CAAG;MACpCvB,QAAQ,EACHwB,IAAI,IACPjB,YAAY,CACXiB,IAAI,EACJ,GACD,CACD;MACDC,aAAa,EAAC;IAAG,CACjB,CAAC;EAAA,CACa,CAAC;AAEnB;AAEA,SAASL,qBAAqBA,CAAEM,KAAuB,EAAG;EACzD,oBACC,IAAAlC,WAAA,CAAA2B,GAAA,EAAC7B,sBAAA,CAAAqC,iBAAiB;IACjBX,SAAS,EAAC,oDAAoD;IAC9DY,aAAa,EAAC,KAAK;IACnBC,GAAG,EAAGnC,eAAiB;IACvBoC,GAAG,EAAGrC,eAAiB;IACvBsC,KAAK,EAAG,CAAE;MAAEvB,KAAK,EAAE,GAAG;MAAEa,KAAK,EAAE;IAAI,CAAC,CAAI;IAAA,GACnCK;EAAK,CACV,CAAC;AAEJ","ignoreList":[]}