@wordpress/components 27.6.0 → 28.0.0

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

@@ -1,4 +1,3 @@
-import { createElement } from "react";
 /**
  * External dependencies
  */
@@ -19,6 +18,8 @@ import { VStack } from '../v-stack';
 import CustomDuotoneBar from './custom-duotone-bar';
 import { getDefaultColors, getGradientFromCSSColors } from './utils';
 import { Spacer } from '../spacer';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * ```jsx
  * import { DuotonePicker, DuotoneSwatch } from '@wordpress/components';
@@ -70,8 +71,7 @@ function DuotonePicker({
   const [defaultDark, defaultLight] = useMemo(() => getDefaultColors(colorPalette), [colorPalette]);
   const isUnset = value === 'unset';
   const unsetOptionLabel = __('Unset');
-  const unsetOption = createElement(CircularOptionPicker.Option, {
-    key: "unset",
+  const unsetOption = /*#__PURE__*/_jsx(CircularOptionPicker.Option, {
     value: "unset",
     isSelected: isUnset,
     tooltipText: unsetOptionLabel,
@@ -80,7 +80,7 @@ function DuotonePicker({
     onClick: () => {
       onChange(isUnset ? undefined : 'unset');
     }
-  });
+  }, "unset");
   const duotoneOptions = duotonePalette.map(({
     colors,
     slug,
@@ -97,8 +97,7 @@ function DuotonePicker({
     // translators: %s: The name of the option e.g: "Dark grayscale".
     __('Duotone: %s'), name) : tooltipText;
     const isSelected = fastDeepEqual(colors, value);
-    return createElement(CircularOptionPicker.Option, {
-      key: slug,
+    return /*#__PURE__*/_jsx(CircularOptionPicker.Option, {
       value: colors,
       isSelected: isSelected,
       "aria-label": label,
@@ -107,7 +106,7 @@ function DuotonePicker({
       onClick: () => {
         onChange(isSelected ? undefined : colors);
       }
-    });
+    }, slug);
   });
   let metaProps;
   if (asButtons) {
@@ -137,40 +136,44 @@ function DuotonePicker({
     }
   }
   const options = unsetable ? [unsetOption, ...duotoneOptions] : duotoneOptions;
-  return createElement(CircularOptionPicker, {
+  return /*#__PURE__*/_jsx(CircularOptionPicker, {
     ...otherProps,
     ...metaProps,
     options: options,
-    actions: !!clearable && createElement(CircularOptionPicker.ButtonAction, {
-      onClick: () => onChange(undefined)
-    }, __('Clear'))
-  }, createElement(Spacer, {
-    paddingTop: options.length === 0 ? 0 : 4
-  }, createElement(VStack, {
-    spacing: 3
-  }, !disableCustomColors && !disableCustomDuotone && createElement(CustomDuotoneBar, {
-    value: isUnset ? undefined : value,
-    onChange: onChange
-  }), !disableCustomDuotone && createElement(ColorListPicker, {
-    labels: [__('Shadows'), __('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__*/_jsx(CircularOptionPicker.ButtonAction, {
+      onClick: () => onChange(undefined),
+      children: __('Clear')
+    }),
+    children: /*#__PURE__*/_jsx(Spacer, {
+      paddingTop: options.length === 0 ? 0 : 4,
+      children: /*#__PURE__*/_jsxs(VStack, {
+        spacing: 3,
+        children: [!disableCustomColors && !disableCustomDuotone && /*#__PURE__*/_jsx(CustomDuotoneBar, {
+          value: isUnset ? undefined : value,
+          onChange: onChange
+        }), !disableCustomDuotone && /*#__PURE__*/_jsx(ColorListPicker, {
+          labels: [__('Shadows'), __('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);
+          }
+        })]
+      })
+    })
+  });
 }
 export default DuotonePicker;
 //# sourceMappingURL=duotone-picker.js.map

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

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

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

@@ -1,4 +1,3 @@
-import { createElement } from "react";
 /**
  * WordPress dependencies
  */
@@ -10,12 +9,13 @@ import { swatch } from '@wordpress/icons';
 import ColorIndicator from '../color-indicator';
 import Icon from '../icon';
 import { getGradientFromCSSColors } from './utils';
+import { jsx as _jsx } from "react/jsx-runtime";
 function DuotoneSwatch({
   values
 }) {
-  return values ? createElement(ColorIndicator, {
+  return values ? /*#__PURE__*/_jsx(ColorIndicator, {
     colorValue: getGradientFromCSSColors(values, '135deg')
-  }) : createElement(Icon, {
+  }) : /*#__PURE__*/_jsx(Icon, {
     icon: swatch
   });
 }

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

@@ -1 +1 @@
-{"version":3,"names":["swatch","ColorIndicator","Icon","getGradientFromCSSColors","DuotoneSwatch","values","createElement","colorValue","icon"],"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":";AAAA;AACA;AACA;AACA,SAASA,MAAM,QAAQ,kBAAkB;;AAEzC;AACA;AACA;AACA,OAAOC,cAAc,MAAM,oBAAoB;AAC/C,OAAOC,IAAI,MAAM,SAAS;AAC1B,SAASC,wBAAwB,QAAQ,SAAS;AAGlD,SAASC,aAAaA,CAAE;EAAEC;AAA2B,CAAC,EAAG;EACxD,OAAOA,MAAM,GACZC,aAAA,CAACL,cAAc;IACdM,UAAU,EAAGJ,wBAAwB,CAAEE,MAAM,EAAE,QAAS;EAAG,CAC3D,CAAC,GAEFC,aAAA,CAACJ,IAAI;IAACM,IAAI,EAAGR;EAAQ,CAAE,CACvB;AACF;AAEA,eAAeI,aAAa","ignoreList":[]}
+{"version":3,"names":["swatch","ColorIndicator","Icon","getGradientFromCSSColors","jsx","_jsx","DuotoneSwatch","values","colorValue","icon"],"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":"AAAA;AACA;AACA;AACA,SAASA,MAAM,QAAQ,kBAAkB;;AAEzC;AACA;AACA;AACA,OAAOC,cAAc,MAAM,oBAAoB;AAC/C,OAAOC,IAAI,MAAM,SAAS;AAC1B,SAASC,wBAAwB,QAAQ,SAAS;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAGnD,SAASC,aAAaA,CAAE;EAAEC;AAA2B,CAAC,EAAG;EACxD,OAAOA,MAAM,gBACZF,IAAA,CAACJ,cAAc;IACdO,UAAU,EAAGL,wBAAwB,CAAEI,MAAM,EAAE,QAAS;EAAG,CAC3D,CAAC,gBAEFF,IAAA,CAACH,IAAI;IAACO,IAAI,EAAGT;EAAQ,CAAE,CACvB;AACF;AAEA,eAAeM,aAAa","ignoreList":[]}

package/build-module/elevation/component.js

@@ -1,4 +1,3 @@
-import { createElement } from "react";
 /**
  * External dependencies
  */
@@ -10,9 +9,10 @@ import { createElement } from "react";
 import { contextConnect } from '../context';
 import { View } from '../view';
 import { useElevation } from './hook';
+import { jsx as _jsx } from "react/jsx-runtime";
 function UnconnectedElevation(props, forwardedRef) {
   const elevationProps = useElevation(props);
-  return createElement(View, {
+  return /*#__PURE__*/_jsx(View, {
     ...elevationProps,
     ref: forwardedRef
   });

package/build-module/elevation/component.js.map

@@ -1 +1 @@
-{"version":3,"names":["contextConnect","View","useElevation","UnconnectedElevation","props","forwardedRef","elevationProps","createElement","ref","Elevation"],"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":";AAAA;AACA;AACA;;AAGA;AACA;AACA;;AAEA,SAASA,cAAc,QAAQ,YAAY;AAC3C,SAASC,IAAI,QAAQ,SAAS;AAC9B,SAASC,YAAY,QAAQ,QAAQ;AAGrC,SAASC,oBAAoBA,CAC5BC,KAAuD,EACvDC,YAAiC,EAChC;EACD,MAAMC,cAAc,GAAGJ,YAAY,CAAEE,KAAM,CAAC;EAE5C,OAAOG,aAAA,CAACN,IAAI;IAAA,GAAMK,cAAc;IAAGE,GAAG,EAAGH;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;AACA,OAAO,MAAMI,SAAS,GAAGT,cAAc,CAAEG,oBAAoB,EAAE,WAAY,CAAC;AAE5E,eAAeM,SAAS","ignoreList":[]}
+{"version":3,"names":["contextConnect","View","useElevation","jsx","_jsx","UnconnectedElevation","props","forwardedRef","elevationProps","ref","Elevation"],"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":"AAAA;AACA;AACA;;AAGA;AACA;AACA;;AAEA,SAASA,cAAc,QAAQ,YAAY;AAC3C,SAASC,IAAI,QAAQ,SAAS;AAC9B,SAASC,YAAY,QAAQ,QAAQ;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAGtC,SAASC,oBAAoBA,CAC5BC,KAAuD,EACvDC,YAAiC,EAChC;EACD,MAAMC,cAAc,GAAGN,YAAY,CAAEI,KAAM,CAAC;EAE5C,oBAAOF,IAAA,CAACH,IAAI;IAAA,GAAMO,cAAc;IAAGC,GAAG,EAAGF;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;AACA,OAAO,MAAMG,SAAS,GAAGV,cAAc,CAAEK,oBAAoB,EAAE,WAAY,CAAC;AAE5E,eAAeK,SAAS","ignoreList":[]}

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

@@ -1,4 +1,3 @@
-import { createElement } from "react";
 /**
  * External dependencies
  */
@@ -12,7 +11,8 @@ import { forwardRef } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 function UnforwardedExternalLink(props, ref) {
   const {
     href,
@@ -35,22 +35,27 @@ function UnforwardedExternalLink(props, ref) {
       props.onClick(event);
     }
   };
-  return /* eslint-disable react/jsx-no-target-blank */(
-    createElement("a", {
+  return (
+    /*#__PURE__*/
+    /* eslint-disable react/jsx-no-target-blank */
+    _jsxs("a", {
       ...additionalProps,
       className: classes,
       href: href,
       onClick: onClickHandler,
       target: "_blank",
       rel: optimizedRel,
-      ref: ref
-    }, createElement("span", {
-      className: "components-external-link__contents"
-    }, children), createElement("span", {
-      className: "components-external-link__icon",
-      "aria-label": /* translators: accessibility text */
-      __('(opens in a new tab)')
-    }, "\u2197"))
+      ref: ref,
+      children: [/*#__PURE__*/_jsx("span", {
+        className: "components-external-link__contents",
+        children: children
+      }), /*#__PURE__*/_jsx("span", {
+        className: "components-external-link__icon",
+        "aria-label": /* translators: accessibility text */
+        __('(opens in a new tab)'),
+        children: "\u2197"
+      })]
+    })
     /* eslint-enable react/jsx-no-target-blank */
   );
 }

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

@@ -1 +1 @@
-{"version":3,"names":["clsx","__","forwardRef","UnforwardedExternalLink","props","ref","href","children","className","rel","additionalProps","optimizedRel","Set","split","filter","Boolean","join","classes","isInternalAnchor","startsWith","onClickHandler","event","preventDefault","onClick","createElement","target","ExternalLink"],"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":";AAAA;AACA;AACA;AACA,OAAOA,IAAI,MAAM,MAAM;AAGvB;AACA;AACA;AACA,SAASC,EAAE,QAAQ,iBAAiB;AACpC,SAASC,UAAU,QAAQ,oBAAoB;;AAE/C;AACA;AACA;;AAIA,SAASC,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,GAAGjB,IAAI,CAAE,0BAA0B,EAAEQ,SAAU,CAAC;EAC7D;AACD;AACA;EACC,MAAMU,gBAAgB,GAAG,CAAC,CAAEZ,IAAI,EAAEa,UAAU,CAAE,GAAI,CAAC;EAEnD,MAAMC,cAAc,GACnBC,KAAwD,IACpD;IACJ,IAAKH,gBAAgB,EAAG;MACvBG,KAAK,CAACC,cAAc,CAAC,CAAC;IACvB;IAEA,IAAKlB,KAAK,CAACmB,OAAO,EAAG;MACpBnB,KAAK,CAACmB,OAAO,CAAEF,KAAM,CAAC;IACvB;EACD,CAAC;EAED,OACC;IACAG,aAAA;MAAA,GACMd,eAAe;MACpBF,SAAS,EAAGS,OAAS;MACrBX,IAAI,EAAGA,IAAM;MACbiB,OAAO,EAAGH,cAAgB;MAC1BK,MAAM,EAAC,QAAQ;MACfhB,GAAG,EAAGE,YAAc;MACpBN,GAAG,EAAGA;IAAK,GAEXmB,aAAA;MAAMhB,SAAS,EAAC;IAAoC,GACjDD,QACG,CAAC,EACPiB,aAAA;MACChB,SAAS,EAAC,gCAAgC;MAC1C,cACC;MACAP,EAAE,CAAE,sBAAuB;IAC3B,GACD,QAEK,CACJ;IACH;EAAA;AAEF;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMyB,YAAY,GAAGxB,UAAU,CAAEC,uBAAwB,CAAC;AAEjE,eAAeuB,YAAY","ignoreList":[]}
+{"version":3,"names":["clsx","__","forwardRef","jsx","_jsx","jsxs","_jsxs","UnforwardedExternalLink","props","ref","href","children","className","rel","additionalProps","optimizedRel","Set","split","filter","Boolean","join","classes","isInternalAnchor","startsWith","onClickHandler","event","preventDefault","onClick","target","ExternalLink"],"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":"AAAA;AACA;AACA;AACA,OAAOA,IAAI,MAAM,MAAM;AAGvB;AACA;AACA;AACA,SAASC,EAAE,QAAQ,iBAAiB;AACpC,SAASC,UAAU,QAAQ,oBAAoB;;AAE/C;AACA;AACA;AAFA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAMA,SAASC,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,GAAGrB,IAAI,CAAE,0BAA0B,EAAEY,SAAU,CAAC;EAC7D;AACD;AACA;EACC,MAAMU,gBAAgB,GAAG,CAAC,CAAEZ,IAAI,EAAEa,UAAU,CAAE,GAAI,CAAC;EAEnD,MAAMC,cAAc,GACnBC,KAAwD,IACpD;IACJ,IAAKH,gBAAgB,EAAG;MACvBG,KAAK,CAACC,cAAc,CAAC,CAAC;IACvB;IAEA,IAAKlB,KAAK,CAACmB,OAAO,EAAG;MACpBnB,KAAK,CAACmB,OAAO,CAAEF,KAAM,CAAC;IACvB;EACD,CAAC;EAED;IAAA;IACC;IACAnB,KAAA;MAAA,GACMQ,eAAe;MACpBF,SAAS,EAAGS,OAAS;MACrBX,IAAI,EAAGA,IAAM;MACbiB,OAAO,EAAGH,cAAgB;MAC1BI,MAAM,EAAC,QAAQ;MACff,GAAG,EAAGE,YAAc;MACpBN,GAAG,EAAGA,GAAK;MAAAE,QAAA,gBAEXP,IAAA;QAAMQ,SAAS,EAAC,oCAAoC;QAAAD,QAAA,EACjDA;MAAQ,CACL,CAAC,eACPP,IAAA;QACCQ,SAAS,EAAC,gCAAgC;QAC1C,cACC;QACAX,EAAE,CAAE,sBAAuB,CAC3B;QAAAU,QAAA,EACD;MAED,CAAM,CAAC;IAAA,CACL;IACH;EAAA;AAEF;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMkB,YAAY,GAAG3B,UAAU,CAAEK,uBAAwB,CAAC;AAEjE,eAAesB,YAAY","ignoreList":[]}

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

@@ -1,4 +1,3 @@
-import { createElement } from "react";
 /**
  * External dependencies
  */
@@ -10,16 +9,21 @@ import { TouchableOpacity, Text, Linking } from 'react-native';
  */
 import { __ } from '@wordpress/i18n';
 import { external, Icon } from '@wordpress/icons';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 export function ExternalLink({
   href,
   children
 }) {
-  return createElement(TouchableOpacity, {
+  return /*#__PURE__*/_jsxs(TouchableOpacity, {
     onPress: () => Linking.openURL(href),
-    accessibilityLabel: __('Open link in a browser')
-  }, createElement(Text, null, children), createElement(Icon, {
-    icon: external
-  }));
+    accessibilityLabel: __('Open link in a browser'),
+    children: [/*#__PURE__*/_jsx(Text, {
+      children: children
+    }), /*#__PURE__*/_jsx(Icon, {
+      icon: external
+    })]
+  });
 }
 export default ExternalLink;
 //# sourceMappingURL=index.native.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["TouchableOpacity","Text","Linking","__","external","Icon","ExternalLink","href","children","createElement","onPress","openURL","accessibilityLabel","icon"],"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":";AAAA;AACA;AACA;;AAEA,SAASA,gBAAgB,EAAEC,IAAI,EAAEC,OAAO,QAAQ,cAAc;;AAE9D;AACA;AACA;AACA,SAASC,EAAE,QAAQ,iBAAiB;AACpC,SAASC,QAAQ,EAAEC,IAAI,QAAQ,kBAAkB;AAEjD,OAAO,SAASC,YAAYA,CAAE;EAAEC,IAAI;EAAEC;AAAS,CAAC,EAAG;EAClD,OACCC,aAAA,CAACT,gBAAgB;IAChBU,OAAO,EAAGA,CAAA,KAAMR,OAAO,CAACS,OAAO,CAAEJ,IAAK,CAAG;IACzCK,kBAAkB,EAAGT,EAAE,CAAE,wBAAyB;EAAG,GAErDM,aAAA,CAACR,IAAI,QAAGO,QAAgB,CAAC,EACzBC,aAAA,CAACJ,IAAI;IAACQ,IAAI,EAAGT;EAAU,CAAE,CACR,CAAC;AAErB;AAEA,eAAeE,YAAY","ignoreList":[]}
+{"version":3,"names":["TouchableOpacity","Text","Linking","__","external","Icon","jsx","_jsx","jsxs","_jsxs","ExternalLink","href","children","onPress","openURL","accessibilityLabel","icon"],"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":"AAAA;AACA;AACA;;AAEA,SAASA,gBAAgB,EAAEC,IAAI,EAAEC,OAAO,QAAQ,cAAc;;AAE9D;AACA;AACA;AACA,SAASC,EAAE,QAAQ,iBAAiB;AACpC,SAASC,QAAQ,EAAEC,IAAI,QAAQ,kBAAkB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAElD,OAAO,SAASC,YAAYA,CAAE;EAAEC,IAAI;EAAEC;AAAS,CAAC,EAAG;EAClD,oBACCH,KAAA,CAACT,gBAAgB;IAChBa,OAAO,EAAGA,CAAA,KAAMX,OAAO,CAACY,OAAO,CAAEH,IAAK,CAAG;IACzCI,kBAAkB,EAAGZ,EAAE,CAAE,wBAAyB,CAAG;IAAAS,QAAA,gBAErDL,IAAA,CAACN,IAAI;MAAAW,QAAA,EAAGA;IAAQ,CAAQ,CAAC,eACzBL,IAAA,CAACF,IAAI;MAACW,IAAI,EAAGZ;IAAU,CAAE,CAAC;EAAA,CACT,CAAC;AAErB;AAEA,eAAeM,YAAY","ignoreList":[]}

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

@@ -1,4 +1,3 @@
-import { createElement } from "react";
 /**
  * External dependencies
  */
@@ -11,20 +10,23 @@ import { contextConnect } from '../../context';
 import { useFlex } from './hook';
 import { FlexContext } from './../context';
 import { View } from '../../view';
+import { jsx as _jsx } from "react/jsx-runtime";
 function UnconnectedFlex(props, forwardedRef) {
   const {
     children,
     isColumn,
     ...otherProps
   } = useFlex(props);
-  return createElement(FlexContext.Provider, {
+  return /*#__PURE__*/_jsx(FlexContext.Provider, {
     value: {
       flexItemDisplay: isColumn ? 'block' : undefined
-    }
-  }, createElement(View, {
-    ...otherProps,
-    ref: forwardedRef
-  }, children));
+    },
+    children: /*#__PURE__*/_jsx(View, {
+      ...otherProps,
+      ref: forwardedRef,
+      children: children
+    })
+  });
 }
 
 /**

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

@@ -1 +1 @@
-{"version":3,"names":["contextConnect","useFlex","FlexContext","View","UnconnectedFlex","props","forwardedRef","children","isColumn","otherProps","createElement","Provider","value","flexItemDisplay","undefined","ref","Flex"],"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":";AAAA;AACA;AACA;;AAGA;AACA;AACA;;AAEA,SAASA,cAAc,QAAQ,eAAe;AAC9C,SAASC,OAAO,QAAQ,QAAQ;AAChC,SAASC,WAAW,QAAQ,cAAc;AAC1C,SAASC,IAAI,QAAQ,YAAY;AAGjC,SAASC,eAAeA,CACvBC,KAAkD,EAClDC,YAAiC,EAChC;EACD,MAAM;IAAEC,QAAQ;IAAEC,QAAQ;IAAE,GAAGC;EAAW,CAAC,GAAGR,OAAO,CAAEI,KAAM,CAAC;EAE9D,OACCK,aAAA,CAACR,WAAW,CAACS,QAAQ;IACpBC,KAAK,EAAG;MAAEC,eAAe,EAAEL,QAAQ,GAAG,OAAO,GAAGM;IAAU;EAAG,GAE7DJ,aAAA,CAACP,IAAI;IAAA,GAAMM,UAAU;IAAGM,GAAG,EAAGT;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;AACA,OAAO,MAAMS,IAAI,GAAGhB,cAAc,CAAEI,eAAe,EAAE,MAAO,CAAC;AAE7D,eAAeY,IAAI","ignoreList":[]}
+{"version":3,"names":["contextConnect","useFlex","FlexContext","View","jsx","_jsx","UnconnectedFlex","props","forwardedRef","children","isColumn","otherProps","Provider","value","flexItemDisplay","undefined","ref","Flex"],"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":"AAAA;AACA;AACA;;AAGA;AACA;AACA;;AAEA,SAASA,cAAc,QAAQ,eAAe;AAC9C,SAASC,OAAO,QAAQ,QAAQ;AAChC,SAASC,WAAW,QAAQ,cAAc;AAC1C,SAASC,IAAI,QAAQ,YAAY;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAGlC,SAASC,eAAeA,CACvBC,KAAkD,EAClDC,YAAiC,EAChC;EACD,MAAM;IAAEC,QAAQ;IAAEC,QAAQ;IAAE,GAAGC;EAAW,CAAC,GAAGV,OAAO,CAAEM,KAAM,CAAC;EAE9D,oBACCF,IAAA,CAACH,WAAW,CAACU,QAAQ;IACpBC,KAAK,EAAG;MAAEC,eAAe,EAAEJ,QAAQ,GAAG,OAAO,GAAGK;IAAU,CAAG;IAAAN,QAAA,eAE7DJ,IAAA,CAACF,IAAI;MAAA,GAAMQ,UAAU;MAAGK,GAAG,EAAGR,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;AACA,OAAO,MAAMQ,IAAI,GAAGjB,cAAc,CAAEM,eAAe,EAAE,MAAO,CAAC;AAE7D,eAAeW,IAAI","ignoreList":[]}

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

@@ -1,4 +1,3 @@
-import { createElement } from "react";
 /**
  * External dependencies
  */
@@ -10,9 +9,10 @@ import { createElement } from "react";
 import { contextConnect } from '../../context';
 import { View } from '../../view';
 import { useFlexBlock } from './hook';
+import { jsx as _jsx } from "react/jsx-runtime";
 function UnconnectedFlexBlock(props, forwardedRef) {
   const flexBlockProps = useFlexBlock(props);
-  return createElement(View, {
+  return /*#__PURE__*/_jsx(View, {
     ...flexBlockProps,
     ref: forwardedRef
   });

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

@@ -1 +1 @@
-{"version":3,"names":["contextConnect","View","useFlexBlock","UnconnectedFlexBlock","props","forwardedRef","flexBlockProps","createElement","ref","FlexBlock"],"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":";AAAA;AACA;AACA;;AAGA;AACA;AACA;;AAEA,SAASA,cAAc,QAAQ,eAAe;AAC9C,SAASC,IAAI,QAAQ,YAAY;AAEjC,SAASC,YAAY,QAAQ,QAAQ;AAErC,SAASC,oBAAoBA,CAC5BC,KAAuD,EACvDC,YAAiC,EAChC;EACD,MAAMC,cAAc,GAAGJ,YAAY,CAAEE,KAAM,CAAC;EAE5C,OAAOG,aAAA,CAACN,IAAI;IAAA,GAAMK,cAAc;IAAGE,GAAG,EAAGH;EAAc,CAAE,CAAC;AAC3D;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMI,SAAS,GAAGT,cAAc,CAAEG,oBAAoB,EAAE,WAAY,CAAC;AAE5E,eAAeM,SAAS","ignoreList":[]}
+{"version":3,"names":["contextConnect","View","useFlexBlock","jsx","_jsx","UnconnectedFlexBlock","props","forwardedRef","flexBlockProps","ref","FlexBlock"],"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":"AAAA;AACA;AACA;;AAGA;AACA;AACA;;AAEA,SAASA,cAAc,QAAQ,eAAe;AAC9C,SAASC,IAAI,QAAQ,YAAY;AAEjC,SAASC,YAAY,QAAQ,QAAQ;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAEtC,SAASC,oBAAoBA,CAC5BC,KAAuD,EACvDC,YAAiC,EAChC;EACD,MAAMC,cAAc,GAAGN,YAAY,CAAEI,KAAM,CAAC;EAE5C,oBAAOF,IAAA,CAACH,IAAI;IAAA,GAAMO,cAAc;IAAGC,GAAG,EAAGF;EAAc,CAAE,CAAC;AAC3D;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMG,SAAS,GAAGV,cAAc,CAAEK,oBAAoB,EAAE,WAAY,CAAC;AAE5E,eAAeK,SAAS","ignoreList":[]}

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

@@ -1,4 +1,3 @@
-import { createElement } from "react";
 /**
  * External dependencies
  */
@@ -10,9 +9,10 @@ import { createElement } from "react";
 import { contextConnect } from '../../context';
 import { View } from '../../view';
 import { useFlexItem } from './hook';
+import { jsx as _jsx } from "react/jsx-runtime";
 function UnconnectedFlexItem(props, forwardedRef) {
   const flexItemProps = useFlexItem(props);
-  return createElement(View, {
+  return /*#__PURE__*/_jsx(View, {
     ...flexItemProps,
     ref: forwardedRef
   });

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

@@ -1 +1 @@
-{"version":3,"names":["contextConnect","View","useFlexItem","UnconnectedFlexItem","props","forwardedRef","flexItemProps","createElement","ref","FlexItem"],"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":";AAAA;AACA;AACA;;AAGA;AACA;AACA;;AAEA,SAASA,cAAc,QAAQ,eAAe;AAC9C,SAASC,IAAI,QAAQ,YAAY;AACjC,SAASC,WAAW,QAAQ,QAAQ;AAGpC,SAASC,mBAAmBA,CAC3BC,KAAsD,EACtDC,YAAiC,EAChC;EACD,MAAMC,aAAa,GAAGJ,WAAW,CAAEE,KAAM,CAAC;EAE1C,OAAOG,aAAA,CAACN,IAAI;IAAA,GAAMK,aAAa;IAAGE,GAAG,EAAGH;EAAc,CAAE,CAAC;AAC1D;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMI,QAAQ,GAAGT,cAAc,CAAEG,mBAAmB,EAAE,UAAW,CAAC;AAEzE,eAAeM,QAAQ","ignoreList":[]}
+{"version":3,"names":["contextConnect","View","useFlexItem","jsx","_jsx","UnconnectedFlexItem","props","forwardedRef","flexItemProps","ref","FlexItem"],"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":"AAAA;AACA;AACA;;AAGA;AACA;AACA;;AAEA,SAASA,cAAc,QAAQ,eAAe;AAC9C,SAASC,IAAI,QAAQ,YAAY;AACjC,SAASC,WAAW,QAAQ,QAAQ;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAGrC,SAASC,mBAAmBA,CAC3BC,KAAsD,EACtDC,YAAiC,EAChC;EACD,MAAMC,aAAa,GAAGN,WAAW,CAAEI,KAAM,CAAC;EAE1C,oBAAOF,IAAA,CAACH,IAAI;IAAA,GAAMO,aAAa;IAAGC,GAAG,EAAGF;EAAc,CAAE,CAAC;AAC1D;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMG,QAAQ,GAAGV,cAAc,CAAEK,mBAAmB,EAAE,UAAW,CAAC;AAEzE,eAAeK,QAAQ","ignoreList":[]}

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

@@ -1,4 +1,3 @@
-import { createElement } from "react";
 /**
  * WordPress dependencies
  */
@@ -9,6 +8,8 @@ import { __ } from '@wordpress/i18n';
  */
 import { StyledUnitControl, ControlWrapper } from './styles/focal-point-picker-style';
 import { fractionToPercentage } from './utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const TEXTCONTROL_MIN = 0;
 const TEXTCONTROL_MAX = 100;
 const noop = () => {};
@@ -36,29 +37,30 @@ export default function FocalPointPickerControls({
       });
     }
   };
-  return createElement(ControlWrapper, {
+  return /*#__PURE__*/_jsxs(ControlWrapper, {
     className: "focal-point-picker__controls",
     __nextHasNoMarginBottom: __nextHasNoMarginBottom,
     hasHelpText: hasHelpText,
-    gap: 4
-  }, createElement(FocalPointUnitControl, {
-    __next40pxDefaultSize: __next40pxDefaultSize,
-    label: __('Left'),
-    "aria-label": __('Focal point left position'),
-    value: [valueX, '%'].join(''),
-    onChange: next => handleChange(next, 'x'),
-    dragDirection: "e"
-  }), createElement(FocalPointUnitControl, {
-    __next40pxDefaultSize: __next40pxDefaultSize,
-    label: __('Top'),
-    "aria-label": __('Focal point top position'),
-    value: [valueY, '%'].join(''),
-    onChange: next => handleChange(next, 'y'),
-    dragDirection: "s"
-  }));
+    gap: 4,
+    children: [/*#__PURE__*/_jsx(FocalPointUnitControl, {
+      __next40pxDefaultSize: __next40pxDefaultSize,
+      label: __('Left'),
+      "aria-label": __('Focal point left position'),
+      value: [valueX, '%'].join(''),
+      onChange: next => handleChange(next, 'x'),
+      dragDirection: "e"
+    }), /*#__PURE__*/_jsx(FocalPointUnitControl, {
+      __next40pxDefaultSize: __next40pxDefaultSize,
+      label: __('Top'),
+      "aria-label": __('Focal point top position'),
+      value: [valueY, '%'].join(''),
+      onChange: next => handleChange(next, 'y'),
+      dragDirection: "s"
+    })]
+  });
 }
 function FocalPointUnitControl(props) {
-  return createElement(StyledUnitControl, {
+  return /*#__PURE__*/_jsx(StyledUnitControl, {
     className: "focal-point-picker__controls-position-unit-control",
     labelPosition: "top",
     max: TEXTCONTROL_MAX,

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

@@ -1 +1 @@
-{"version":3,"names":["__","StyledUnitControl","ControlWrapper","fractionToPercentage","TEXTCONTROL_MIN","TEXTCONTROL_MAX","noop","FocalPointPickerControls","__nextHasNoMarginBottom","__next40pxDefaultSize","hasHelpText","onChange","point","x","y","valueX","valueY","handleChange","value","axis","undefined","num","parseInt","isNaN","createElement","className","gap","FocalPointUnitControl","label","join","next","dragDirection","props","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":";AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;;AAEpC;AACA;AACA;AACA,SACCC,iBAAiB,EACjBC,cAAc,QACR,mCAAmC;AAC1C,SAASC,oBAAoB,QAAQ,SAAS;AAO9C,MAAMC,eAAe,GAAG,CAAC;AACzB,MAAMC,eAAe,GAAG,GAAG;AAC3B,MAAMC,IAAI,GAAGA,CAAA,KAAM,CAAC,CAAC;AAErB,eAAe,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,GAAGZ,oBAAoB,CAAES,KAAK,CAACC,CAAE,CAAC;EAC9C,MAAMG,MAAM,GAAGb,oBAAoB,CAAES,KAAK,CAACE,CAAE,CAAC;EAE9C,MAAMG,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;MACrBV,QAAQ,CAAE;QAAE,GAAGC,KAAK;QAAE,CAAEO,IAAI,GAAIE,GAAG,GAAG;MAAI,CAAE,CAAC;IAC9C;EACD,CAAC;EAED,OACCG,aAAA,CAACtB,cAAc;IACduB,SAAS,EAAC,8BAA8B;IACxCjB,uBAAuB,EAAGA,uBAAyB;IACnDE,WAAW,EAAGA,WAAa;IAC3BgB,GAAG,EAAG;EAAG,GAETF,aAAA,CAACG,qBAAqB;IACrBlB,qBAAqB,EAAGA,qBAAuB;IAC/CmB,KAAK,EAAG5B,EAAE,CAAE,MAAO,CAAG;IACtB,cAAaA,EAAE,CAAE,2BAA4B,CAAG;IAChDkB,KAAK,EAAG,CAAEH,MAAM,EAAE,GAAG,CAAE,CAACc,IAAI,CAAE,EAAG,CAAG;IACpClB,QAAQ,EACHmB,IAAI,IACPb,YAAY,CACXa,IAAI,EACJ,GACD,CACD;IACDC,aAAa,EAAC;EAAG,CACjB,CAAC,EACFP,aAAA,CAACG,qBAAqB;IACrBlB,qBAAqB,EAAGA,qBAAuB;IAC/CmB,KAAK,EAAG5B,EAAE,CAAE,KAAM,CAAG;IACrB,cAAaA,EAAE,CAAE,0BAA2B,CAAG;IAC/CkB,KAAK,EAAG,CAAEF,MAAM,EAAE,GAAG,CAAE,CAACa,IAAI,CAAE,EAAG,CAAG;IACpClB,QAAQ,EACHmB,IAAI,IACPb,YAAY,CACXa,IAAI,EACJ,GACD,CACD;IACDC,aAAa,EAAC;EAAG,CACjB,CACc,CAAC;AAEnB;AAEA,SAASJ,qBAAqBA,CAAEK,KAAuB,EAAG;EACzD,OACCR,aAAA,CAACvB,iBAAiB;IACjBwB,SAAS,EAAC,oDAAoD;IAC9DQ,aAAa,EAAC,KAAK;IACnBC,GAAG,EAAG7B,eAAiB;IACvB8B,GAAG,EAAG/B,eAAiB;IACvBgC,KAAK,EAAG,CAAE;MAAElB,KAAK,EAAE,GAAG;MAAEU,KAAK,EAAE;IAAI,CAAC,CAAI;IAAA,GACnCI;EAAK,CACV,CAAC;AAEJ","ignoreList":[]}
+{"version":3,"names":["__","StyledUnitControl","ControlWrapper","fractionToPercentage","jsx","_jsx","jsxs","_jsxs","TEXTCONTROL_MIN","TEXTCONTROL_MAX","noop","FocalPointPickerControls","__nextHasNoMarginBottom","__next40pxDefaultSize","hasHelpText","onChange","point","x","y","valueX","valueY","handleChange","value","axis","undefined","num","parseInt","isNaN","className","gap","children","FocalPointUnitControl","label","join","next","dragDirection","props","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":"AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;;AAEpC;AACA;AACA;AACA,SACCC,iBAAiB,EACjBC,cAAc,QACR,mCAAmC;AAC1C,SAASC,oBAAoB,QAAQ,SAAS;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAO/C,MAAMC,eAAe,GAAG,CAAC;AACzB,MAAMC,eAAe,GAAG,GAAG;AAC3B,MAAMC,IAAI,GAAGA,CAAA,KAAM,CAAC,CAAC;AAErB,eAAe,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,GAAGhB,oBAAoB,CAAEa,KAAK,CAACC,CAAE,CAAC;EAC9C,MAAMG,MAAM,GAAGjB,oBAAoB,CAAEa,KAAK,CAACE,CAAE,CAAC;EAE9C,MAAMG,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;MACrBV,QAAQ,CAAE;QAAE,GAAGC,KAAK;QAAE,CAAEO,IAAI,GAAIE,GAAG,GAAG;MAAI,CAAE,CAAC;IAC9C;EACD,CAAC;EAED,oBACClB,KAAA,CAACL,cAAc;IACd0B,SAAS,EAAC,8BAA8B;IACxChB,uBAAuB,EAAGA,uBAAyB;IACnDE,WAAW,EAAGA,WAAa;IAC3Be,GAAG,EAAG,CAAG;IAAAC,QAAA,gBAETzB,IAAA,CAAC0B,qBAAqB;MACrBlB,qBAAqB,EAAGA,qBAAuB;MAC/CmB,KAAK,EAAGhC,EAAE,CAAE,MAAO,CAAG;MACtB,cAAaA,EAAE,CAAE,2BAA4B,CAAG;MAChDsB,KAAK,EAAG,CAAEH,MAAM,EAAE,GAAG,CAAE,CAACc,IAAI,CAAE,EAAG,CAAG;MACpClB,QAAQ,EACHmB,IAAI,IACPb,YAAY,CACXa,IAAI,EACJ,GACD,CACD;MACDC,aAAa,EAAC;IAAG,CACjB,CAAC,eACF9B,IAAA,CAAC0B,qBAAqB;MACrBlB,qBAAqB,EAAGA,qBAAuB;MAC/CmB,KAAK,EAAGhC,EAAE,CAAE,KAAM,CAAG;MACrB,cAAaA,EAAE,CAAE,0BAA2B,CAAG;MAC/CsB,KAAK,EAAG,CAAEF,MAAM,EAAE,GAAG,CAAE,CAACa,IAAI,CAAE,EAAG,CAAG;MACpClB,QAAQ,EACHmB,IAAI,IACPb,YAAY,CACXa,IAAI,EACJ,GACD,CACD;MACDC,aAAa,EAAC;IAAG,CACjB,CAAC;EAAA,CACa,CAAC;AAEnB;AAEA,SAASJ,qBAAqBA,CAAEK,KAAuB,EAAG;EACzD,oBACC/B,IAAA,CAACJ,iBAAiB;IACjB2B,SAAS,EAAC,oDAAoD;IAC9DS,aAAa,EAAC,KAAK;IACnBC,GAAG,EAAG7B,eAAiB;IACvB8B,GAAG,EAAG/B,eAAiB;IACvBgC,KAAK,EAAG,CAAE;MAAElB,KAAK,EAAE,GAAG;MAAEU,KAAK,EAAE;IAAI,CAAC,CAAI;IAAA,GACnCI;EAAK,CACV,CAAC;AAEJ","ignoreList":[]}

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

@@ -1,4 +1,3 @@
-import { createElement } from "react";
 /**
  * Internal dependencies
  */
@@ -7,20 +6,19 @@ import { PointerCircle } from './styles/focal-point-style';
 /**
  * External dependencies
  */
-import clsx from 'clsx';
+import { jsx as _jsx } from "react/jsx-runtime";
 export default function FocalPoint({
   left = '50%',
   top = '50%',
   ...props
 }) {
-  const classes = clsx('components-focal-point-picker__icon_container');
   const style = {
     left,
     top
   };
-  return createElement(PointerCircle, {
+  return /*#__PURE__*/_jsx(PointerCircle, {
     ...props,
-    className: classes,
+    className: "components-focal-point-picker__icon_container",
     style: style
   });
 }