@wordpress/components 25.0.0 → 25.1.1

package/build/gradient-picker/index.js

@@ -10,8 +10,6 @@ exports.default = void 0;
 
 var _element = require("@wordpress/element");
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _i18n = require("@wordpress/i18n");
 
 var _deprecated = _interopRequireDefault(require("@wordpress/deprecated"));
@@ -41,37 +39,33 @@ const isMultipleOriginArray = arr => {
   return arr.length > 0 && arr.every(gradientObj => isMultipleOriginObject(gradientObj));
 };
 
-function SingleOrigin(_ref) {
-  let {
-    className,
-    clearGradient,
-    gradients,
-    onChange,
-    value,
-    actions
-  } = _ref;
+function SingleOrigin({
+  className,
+  clearGradient,
+  gradients,
+  onChange,
+  value,
+  actions
+}) {
   const gradientOptions = (0, _element.useMemo)(() => {
-    return gradients.map((_ref2, index) => {
-      let {
-        gradient,
-        name
-      } = _ref2;
-      return (0, _element.createElement)(_circularOptionPicker.default.Option, {
-        key: gradient,
-        value: gradient,
-        isSelected: value === gradient,
-        tooltipText: name || // translators: %s: gradient code e.g: "linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);".
-        (0, _i18n.sprintf)((0, _i18n.__)('Gradient code: %s'), gradient),
-        style: {
-          color: 'rgba( 0,0,0,0 )',
-          background: gradient
-        },
-        onClick: value === gradient ? clearGradient : () => onChange(gradient, index),
-        "aria-label": name ? // translators: %s: The name of the gradient e.g: "Angular red to blue".
-        (0, _i18n.sprintf)((0, _i18n.__)('Gradient: %s'), name) : // translators: %s: gradient code e.g: "linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);".
-        (0, _i18n.sprintf)((0, _i18n.__)('Gradient code: %s'), gradient)
-      });
-    });
+    return gradients.map(({
+      gradient,
+      name
+    }, index) => (0, _element.createElement)(_circularOptionPicker.default.Option, {
+      key: gradient,
+      value: gradient,
+      isSelected: value === gradient,
+      tooltipText: name || // translators: %s: gradient code e.g: "linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);".
+      (0, _i18n.sprintf)((0, _i18n.__)('Gradient code: %s'), gradient),
+      style: {
+        color: 'rgba( 0,0,0,0 )',
+        background: gradient
+      },
+      onClick: value === gradient ? clearGradient : () => onChange(gradient, index),
+      "aria-label": name ? // translators: %s: The name of the gradient e.g: "Angular red to blue".
+      (0, _i18n.sprintf)((0, _i18n.__)('Gradient: %s'), name) : // translators: %s: gradient code e.g: "linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);".
+      (0, _i18n.sprintf)((0, _i18n.__)('Gradient code: %s'), gradient)
+    }));
   }, [gradients, value, onChange, clearGradient]);
   return (0, _element.createElement)(_circularOptionPicker.default, {
     className: className,
@@ -80,46 +74,47 @@ function SingleOrigin(_ref) {
   });
 }
 
-function MultipleOrigin(_ref3) {
-  let {
-    className,
-    clearGradient,
-    gradients,
-    onChange,
-    value,
-    actions,
-    headingLevel
-  } = _ref3;
+function MultipleOrigin({
+  className,
+  clearGradient,
+  gradients,
+  onChange,
+  value,
+  actions,
+  headingLevel
+}) {
   return (0, _element.createElement)(_vStack.VStack, {
     spacing: 3,
     className: className
-  }, gradients.map((_ref4, index) => {
-    let {
-      name,
-      gradients: gradientSet
-    } = _ref4;
+  }, gradients.map(({
+    name,
+    gradients: gradientSet
+  }, index) => {
     return (0, _element.createElement)(_vStack.VStack, {
       spacing: 2,
       key: index
     }, (0, _element.createElement)(_styles.ColorHeading, {
       level: headingLevel
-    }, name), (0, _element.createElement)(SingleOrigin, (0, _extends2.default)({
+    }, name), (0, _element.createElement)(SingleOrigin, {
       clearGradient: clearGradient,
       gradients: gradientSet,
       onChange: gradient => onChange(gradient, index),
-      value: value
-    }, gradients.length === index + 1 ? {
-      actions
-    } : {})));
+      value: value,
+      ...(gradients.length === index + 1 ? {
+        actions
+      } : {})
+    }));
   }));
 }
 
 function Component(props) {
   if (isMultipleOriginArray(props.gradients)) {
-    return (0, _element.createElement)(MultipleOrigin, props);
+    return (0, _element.createElement)(MultipleOrigin, { ...props
+    });
   }
 
-  return (0, _element.createElement)(SingleOrigin, props);
+  return (0, _element.createElement)(SingleOrigin, { ...props
+  });
 }
 /**
  *  GradientPicker is a React component that renders a color gradient picker to
@@ -166,19 +161,18 @@ function Component(props) {
  */
 
 
-function GradientPicker(_ref5) {
-  let {
-    /** Start opting into the new margin-free styles that will become the default in a future version. */
-    __nextHasNoMargin = false,
-    className,
-    gradients = [],
-    onChange,
-    value,
-    clearable = true,
-    disableCustomGradients = false,
-    __experimentalIsRenderedInSidebar,
-    headingLevel = 2
-  } = _ref5;
+function GradientPicker({
+  /** Start opting into the new margin-free styles that will become the default in a future version. */
+  __nextHasNoMargin = false,
+  className,
+  gradients = [],
+  onChange,
+  value,
+  clearable = true,
+  disableCustomGradients = false,
+  __experimentalIsRenderedInSidebar,
+  headingLevel = 2
+}) {
   const clearGradient = (0, _element.useCallback)(() => onChange(undefined), [onChange]);
 
   if (!__nextHasNoMargin) {
@@ -194,9 +188,10 @@ function GradientPicker(_ref5) {
     marginBottom: !clearable ? 6 : 0
   } : {};
   return (// Outmost Spacer wrapper can be removed when deprecation period is over
-    (0, _element.createElement)(_spacer.Spacer, (0, _extends2.default)({
-      marginBottom: 0
-    }, deprecatedMarginSpacerProps), (0, _element.createElement)(_vStack.VStack, {
+    (0, _element.createElement)(_spacer.Spacer, {
+      marginBottom: 0,
+      ...deprecatedMarginSpacerProps
+    }, (0, _element.createElement)(_vStack.VStack, {
       spacing: gradients.length ? 4 : 0
     }, !disableCustomGradients && (0, _element.createElement)(_customGradientPicker.default, {
       __nextHasNoMargin: true,

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/gradient-picker/index.tsx"],"names":["isMultipleOriginObject","obj","Array","isArray","gradients","isMultipleOriginArray","arr","length","every","gradientObj","SingleOrigin","className","clearGradient","onChange","value","actions","gradientOptions","map","index","gradient","name","color","background","MultipleOrigin","headingLevel","gradientSet","Component","props","GradientPicker","__nextHasNoMargin","clearable","disableCustomGradients","__experimentalIsRenderedInSidebar","undefined","since","version","hint","deprecatedMarginSpacerProps","marginTop","marginBottom"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useCallback, useMemo } from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport CircularOptionPicker from '../circular-option-picker';\nimport CustomGradientPicker from '../custom-gradient-picker';\nimport { VStack } from '../v-stack';\nimport { ColorHeading } from '../color-palette/styles';\nimport { Spacer } from '../spacer';\nimport type {\n\tGradientPickerComponentProps,\n\tPickerProps,\n\tOriginObject,\n\tGradientObject,\n} from './types';\n\n// The Multiple Origin Gradients have a `gradients` property (an array of\n// gradient objects), while Single Origin ones have a `gradient` property.\nconst isMultipleOriginObject = (\n\tobj: Record< string, any >\n): obj is OriginObject =>\n\tArray.isArray( obj.gradients ) && ! ( 'gradient' in obj );\n\nconst isMultipleOriginArray = ( arr: any[] ): arr is OriginObject[] => {\n\treturn (\n\t\tarr.length > 0 &&\n\t\tarr.every( ( gradientObj ) => isMultipleOriginObject( gradientObj ) )\n\t);\n};\n\nfunction SingleOrigin( {\n\tclassName,\n\tclearGradient,\n\tgradients,\n\tonChange,\n\tvalue,\n\tactions,\n}: PickerProps< GradientObject > ) {\n\tconst gradientOptions = useMemo( () => {\n\t\treturn gradients.map( ( { gradient, name }, index ) => (\n\t\t\t<CircularOptionPicker.Option\n\t\t\t\tkey={ gradient }\n\t\t\t\tvalue={ gradient }\n\t\t\t\tisSelected={ value === gradient }\n\t\t\t\ttooltipText={\n\t\t\t\t\tname ||\n\t\t\t\t\t// translators: %s: gradient code e.g: \"linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);\".\n\t\t\t\t\tsprintf( __( 'Gradient code: %s' ), gradient )\n\t\t\t\t}\n\t\t\t\tstyle={ { color: 'rgba( 0,0,0,0 )', background: gradient } }\n\t\t\t\tonClick={\n\t\t\t\t\tvalue === gradient\n\t\t\t\t\t\t? clearGradient\n\t\t\t\t\t\t: () => onChange( gradient, index )\n\t\t\t\t}\n\t\t\t\taria-label={\n\t\t\t\t\tname\n\t\t\t\t\t\t? // translators: %s: The name of the gradient e.g: \"Angular red to blue\".\n\t\t\t\t\t\t  sprintf( __( 'Gradient: %s' ), name )\n\t\t\t\t\t\t: // translators: %s: gradient code e.g: \"linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);\".\n\t\t\t\t\t\t  sprintf( __( 'Gradient code: %s' ), gradient )\n\t\t\t\t}\n\t\t\t/>\n\t\t) );\n\t}, [ gradients, value, onChange, clearGradient ] );\n\treturn (\n\t\t<CircularOptionPicker\n\t\t\tclassName={ className }\n\t\t\toptions={ gradientOptions }\n\t\t\tactions={ actions }\n\t\t/>\n\t);\n}\n\nfunction MultipleOrigin( {\n\tclassName,\n\tclearGradient,\n\tgradients,\n\tonChange,\n\tvalue,\n\tactions,\n\theadingLevel,\n}: PickerProps< OriginObject > ) {\n\treturn (\n\t\t<VStack spacing={ 3 } className={ className }>\n\t\t\t{ gradients.map( ( { name, gradients: gradientSet }, index ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<VStack spacing={ 2 } key={ index }>\n\t\t\t\t\t\t<ColorHeading level={ headingLevel }>\n\t\t\t\t\t\t\t{ name }\n\t\t\t\t\t\t</ColorHeading>\n\t\t\t\t\t\t<SingleOrigin\n\t\t\t\t\t\t\tclearGradient={ clearGradient }\n\t\t\t\t\t\t\tgradients={ gradientSet }\n\t\t\t\t\t\t\tonChange={ ( gradient ) =>\n\t\t\t\t\t\t\t\tonChange( gradient, index )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\t{ ...( gradients.length === index + 1\n\t\t\t\t\t\t\t\t? { actions }\n\t\t\t\t\t\t\t\t: {} ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</VStack>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</VStack>\n\t);\n}\n\nfunction Component( props: PickerProps< any > ) {\n\tif ( isMultipleOriginArray( props.gradients ) ) {\n\t\treturn <MultipleOrigin { ...props } />;\n\t}\n\treturn <SingleOrigin { ...props } />;\n}\n\n/**\n *  GradientPicker is a React component that renders a color gradient picker to\n * define a multi step gradient. There's either a _linear_ or a _radial_ type\n * available.\n *\n * ```jsx\n *import { GradientPicker } from '@wordpress/components';\n *import { useState } from '@wordpress/element';\n *\n *const myGradientPicker = () => {\n *\tconst [ gradient, setGradient ] = useState( null );\n *\n *\treturn (\n *\t\t<GradientPicker\n *\t\t\t__nextHasNoMargin\n *\t\t\tvalue={ gradient }\n *\t\t\tonChange={ ( currentGradient ) => setGradient( currentGradient ) }\n *\t\t\tgradients={ [\n *\t\t\t\t{\n *\t\t\t\t\tname: 'JShine',\n *\t\t\t\t\tgradient:\n *\t\t\t\t\t\t'linear-gradient(135deg,#12c2e9 0%,#c471ed 50%,#f64f59 100%)',\n *\t\t\t\t\tslug: 'jshine',\n *\t\t\t\t},\n *\t\t\t\t{\n *\t\t\t\t\tname: 'Moonlit Asteroid',\n *\t\t\t\t\tgradient:\n *\t\t\t\t\t\t'linear-gradient(135deg,#0F2027 0%, #203A43 0%, #2c5364 100%)',\n *\t\t\t\t\tslug: 'moonlit-asteroid',\n *\t\t\t\t},\n *\t\t\t\t{\n *\t\t\t\t\tname: 'Rastafarie',\n *\t\t\t\t\tgradient:\n *\t\t\t\t\t\t'linear-gradient(135deg,#1E9600 0%, #FFF200 0%, #FF0000 100%)',\n *\t\t\t\t\tslug: 'rastafari',\n *\t\t\t\t},\n *\t\t\t] }\n *\t\t/>\n *\t);\n *};\n *```\n *\n */\nexport function GradientPicker( {\n\t/** Start opting into the new margin-free styles that will become the default in a future version. */\n\t__nextHasNoMargin = false,\n\tclassName,\n\tgradients = [],\n\tonChange,\n\tvalue,\n\tclearable = true,\n\tdisableCustomGradients = false,\n\t__experimentalIsRenderedInSidebar,\n\theadingLevel = 2,\n}: GradientPickerComponentProps ) {\n\tconst clearGradient = useCallback(\n\t\t() => onChange( undefined ),\n\t\t[ onChange ]\n\t);\n\n\tif ( ! __nextHasNoMargin ) {\n\t\tdeprecated( 'Outer margin styles for wp.components.GradientPicker', {\n\t\t\tsince: '6.1',\n\t\t\tversion: '6.4',\n\t\t\thint: 'Set the `__nextHasNoMargin` prop to true to start opting into the new styles, which will become the default in a future version',\n\t\t} );\n\t}\n\n\tconst deprecatedMarginSpacerProps = ! __nextHasNoMargin\n\t\t? {\n\t\t\t\tmarginTop: ! gradients.length ? 3 : undefined,\n\t\t\t\tmarginBottom: ! clearable ? 6 : 0,\n\t\t  }\n\t\t: {};\n\n\treturn (\n\t\t// Outmost Spacer wrapper can be removed when deprecation period is over\n\t\t<Spacer marginBottom={ 0 } { ...deprecatedMarginSpacerProps }>\n\t\t\t<VStack spacing={ gradients.length ? 4 : 0 }>\n\t\t\t\t{ ! disableCustomGradients && (\n\t\t\t\t\t<CustomGradientPicker\n\t\t\t\t\t\t__nextHasNoMargin\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t}\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t{ ( gradients.length || clearable ) && (\n\t\t\t\t\t<Component\n\t\t\t\t\t\tclassName={ className }\n\t\t\t\t\t\tclearGradient={ clearGradient }\n\t\t\t\t\t\tgradients={ gradients }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\tactions={\n\t\t\t\t\t\t\tclearable &&\n\t\t\t\t\t\t\t! disableCustomGradients && (\n\t\t\t\t\t\t\t\t<CircularOptionPicker.ButtonAction\n\t\t\t\t\t\t\t\t\tonClick={ clearGradient }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ __( 'Clear' ) }\n\t\t\t\t\t\t\t\t</CircularOptionPicker.ButtonAction>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t}\n\t\t\t\t\t\theadingLevel={ headingLevel }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</VStack>\n\t\t</Spacer>\n\t);\n}\n\nexport default GradientPicker;\n"]}
+{"version":3,"sources":["@wordpress/components/src/gradient-picker/index.tsx"],"names":["isMultipleOriginObject","obj","Array","isArray","gradients","isMultipleOriginArray","arr","length","every","gradientObj","SingleOrigin","className","clearGradient","onChange","value","actions","gradientOptions","map","gradient","name","index","color","background","MultipleOrigin","headingLevel","gradientSet","Component","props","GradientPicker","__nextHasNoMargin","clearable","disableCustomGradients","__experimentalIsRenderedInSidebar","undefined","since","version","hint","deprecatedMarginSpacerProps","marginTop","marginBottom"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useCallback, useMemo } from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport CircularOptionPicker from '../circular-option-picker';\nimport CustomGradientPicker from '../custom-gradient-picker';\nimport { VStack } from '../v-stack';\nimport { ColorHeading } from '../color-palette/styles';\nimport { Spacer } from '../spacer';\nimport type {\n\tGradientPickerComponentProps,\n\tPickerProps,\n\tOriginObject,\n\tGradientObject,\n} from './types';\n\n// The Multiple Origin Gradients have a `gradients` property (an array of\n// gradient objects), while Single Origin ones have a `gradient` property.\nconst isMultipleOriginObject = (\n\tobj: Record< string, any >\n): obj is OriginObject =>\n\tArray.isArray( obj.gradients ) && ! ( 'gradient' in obj );\n\nconst isMultipleOriginArray = ( arr: any[] ): arr is OriginObject[] => {\n\treturn (\n\t\tarr.length > 0 &&\n\t\tarr.every( ( gradientObj ) => isMultipleOriginObject( gradientObj ) )\n\t);\n};\n\nfunction SingleOrigin( {\n\tclassName,\n\tclearGradient,\n\tgradients,\n\tonChange,\n\tvalue,\n\tactions,\n}: PickerProps< GradientObject > ) {\n\tconst gradientOptions = useMemo( () => {\n\t\treturn gradients.map( ( { gradient, name }, index ) => (\n\t\t\t<CircularOptionPicker.Option\n\t\t\t\tkey={ gradient }\n\t\t\t\tvalue={ gradient }\n\t\t\t\tisSelected={ value === gradient }\n\t\t\t\ttooltipText={\n\t\t\t\t\tname ||\n\t\t\t\t\t// translators: %s: gradient code e.g: \"linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);\".\n\t\t\t\t\tsprintf( __( 'Gradient code: %s' ), gradient )\n\t\t\t\t}\n\t\t\t\tstyle={ { color: 'rgba( 0,0,0,0 )', background: gradient } }\n\t\t\t\tonClick={\n\t\t\t\t\tvalue === gradient\n\t\t\t\t\t\t? clearGradient\n\t\t\t\t\t\t: () => onChange( gradient, index )\n\t\t\t\t}\n\t\t\t\taria-label={\n\t\t\t\t\tname\n\t\t\t\t\t\t? // translators: %s: The name of the gradient e.g: \"Angular red to blue\".\n\t\t\t\t\t\t  sprintf( __( 'Gradient: %s' ), name )\n\t\t\t\t\t\t: // translators: %s: gradient code e.g: \"linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);\".\n\t\t\t\t\t\t  sprintf( __( 'Gradient code: %s' ), gradient )\n\t\t\t\t}\n\t\t\t/>\n\t\t) );\n\t}, [ gradients, value, onChange, clearGradient ] );\n\treturn (\n\t\t<CircularOptionPicker\n\t\t\tclassName={ className }\n\t\t\toptions={ gradientOptions }\n\t\t\tactions={ actions }\n\t\t/>\n\t);\n}\n\nfunction MultipleOrigin( {\n\tclassName,\n\tclearGradient,\n\tgradients,\n\tonChange,\n\tvalue,\n\tactions,\n\theadingLevel,\n}: PickerProps< OriginObject > ) {\n\treturn (\n\t\t<VStack spacing={ 3 } className={ className }>\n\t\t\t{ gradients.map( ( { name, gradients: gradientSet }, index ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<VStack spacing={ 2 } key={ index }>\n\t\t\t\t\t\t<ColorHeading level={ headingLevel }>\n\t\t\t\t\t\t\t{ name }\n\t\t\t\t\t\t</ColorHeading>\n\t\t\t\t\t\t<SingleOrigin\n\t\t\t\t\t\t\tclearGradient={ clearGradient }\n\t\t\t\t\t\t\tgradients={ gradientSet }\n\t\t\t\t\t\t\tonChange={ ( gradient ) =>\n\t\t\t\t\t\t\t\tonChange( gradient, index )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\t{ ...( gradients.length === index + 1\n\t\t\t\t\t\t\t\t? { actions }\n\t\t\t\t\t\t\t\t: {} ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</VStack>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</VStack>\n\t);\n}\n\nfunction Component( props: PickerProps< any > ) {\n\tif ( isMultipleOriginArray( props.gradients ) ) {\n\t\treturn <MultipleOrigin { ...props } />;\n\t}\n\treturn <SingleOrigin { ...props } />;\n}\n\n/**\n *  GradientPicker is a React component that renders a color gradient picker to\n * define a multi step gradient. There's either a _linear_ or a _radial_ type\n * available.\n *\n * ```jsx\n *import { GradientPicker } from '@wordpress/components';\n *import { useState } from '@wordpress/element';\n *\n *const myGradientPicker = () => {\n *\tconst [ gradient, setGradient ] = useState( null );\n *\n *\treturn (\n *\t\t<GradientPicker\n *\t\t\t__nextHasNoMargin\n *\t\t\tvalue={ gradient }\n *\t\t\tonChange={ ( currentGradient ) => setGradient( currentGradient ) }\n *\t\t\tgradients={ [\n *\t\t\t\t{\n *\t\t\t\t\tname: 'JShine',\n *\t\t\t\t\tgradient:\n *\t\t\t\t\t\t'linear-gradient(135deg,#12c2e9 0%,#c471ed 50%,#f64f59 100%)',\n *\t\t\t\t\tslug: 'jshine',\n *\t\t\t\t},\n *\t\t\t\t{\n *\t\t\t\t\tname: 'Moonlit Asteroid',\n *\t\t\t\t\tgradient:\n *\t\t\t\t\t\t'linear-gradient(135deg,#0F2027 0%, #203A43 0%, #2c5364 100%)',\n *\t\t\t\t\tslug: 'moonlit-asteroid',\n *\t\t\t\t},\n *\t\t\t\t{\n *\t\t\t\t\tname: 'Rastafarie',\n *\t\t\t\t\tgradient:\n *\t\t\t\t\t\t'linear-gradient(135deg,#1E9600 0%, #FFF200 0%, #FF0000 100%)',\n *\t\t\t\t\tslug: 'rastafari',\n *\t\t\t\t},\n *\t\t\t] }\n *\t\t/>\n *\t);\n *};\n *```\n *\n */\nexport function GradientPicker( {\n\t/** Start opting into the new margin-free styles that will become the default in a future version. */\n\t__nextHasNoMargin = false,\n\tclassName,\n\tgradients = [],\n\tonChange,\n\tvalue,\n\tclearable = true,\n\tdisableCustomGradients = false,\n\t__experimentalIsRenderedInSidebar,\n\theadingLevel = 2,\n}: GradientPickerComponentProps ) {\n\tconst clearGradient = useCallback(\n\t\t() => onChange( undefined ),\n\t\t[ onChange ]\n\t);\n\n\tif ( ! __nextHasNoMargin ) {\n\t\tdeprecated( 'Outer margin styles for wp.components.GradientPicker', {\n\t\t\tsince: '6.1',\n\t\t\tversion: '6.4',\n\t\t\thint: 'Set the `__nextHasNoMargin` prop to true to start opting into the new styles, which will become the default in a future version',\n\t\t} );\n\t}\n\n\tconst deprecatedMarginSpacerProps = ! __nextHasNoMargin\n\t\t? {\n\t\t\t\tmarginTop: ! gradients.length ? 3 : undefined,\n\t\t\t\tmarginBottom: ! clearable ? 6 : 0,\n\t\t  }\n\t\t: {};\n\n\treturn (\n\t\t// Outmost Spacer wrapper can be removed when deprecation period is over\n\t\t<Spacer marginBottom={ 0 } { ...deprecatedMarginSpacerProps }>\n\t\t\t<VStack spacing={ gradients.length ? 4 : 0 }>\n\t\t\t\t{ ! disableCustomGradients && (\n\t\t\t\t\t<CustomGradientPicker\n\t\t\t\t\t\t__nextHasNoMargin\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t}\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t{ ( gradients.length || clearable ) && (\n\t\t\t\t\t<Component\n\t\t\t\t\t\tclassName={ className }\n\t\t\t\t\t\tclearGradient={ clearGradient }\n\t\t\t\t\t\tgradients={ gradients }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\tactions={\n\t\t\t\t\t\t\tclearable &&\n\t\t\t\t\t\t\t! disableCustomGradients && (\n\t\t\t\t\t\t\t\t<CircularOptionPicker.ButtonAction\n\t\t\t\t\t\t\t\t\tonClick={ clearGradient }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ __( 'Clear' ) }\n\t\t\t\t\t\t\t\t</CircularOptionPicker.ButtonAction>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t}\n\t\t\t\t\t\theadingLevel={ headingLevel }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</VStack>\n\t\t</Spacer>\n\t);\n}\n\nexport default GradientPicker;\n"]}

package/build/grid/component.js

@@ -9,8 +9,6 @@ exports.default = exports.Grid = void 0;
 
 var _element = require("@wordpress/element");
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _context = require("../ui/context");
 
 var _view = require("../view");
@@ -26,9 +24,9 @@ var _hook = _interopRequireDefault(require("./hook"));
  */
 function UnconnectedGrid(props, forwardedRef) {
   const gridProps = (0, _hook.default)(props);
-  return (0, _element.createElement)(_view.View, (0, _extends2.default)({}, gridProps, {
+  return (0, _element.createElement)(_view.View, { ...gridProps,
     ref: forwardedRef
-  }));
+  });
 }
 /**
  * `Grid` is a primitive layout component that can arrange content in a grid configuration.

package/build/grid/component.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/grid/component.tsx"],"names":["UnconnectedGrid","props","forwardedRef","gridProps","Grid"],"mappings":";;;;;;;;;;;;;AAQA;;AACA;;AACA;;AAVA;AACA;AACA;;AAGA;AACA;AACA;AAMA,SAASA,eAAT,CACCC,KADD,EAECC,YAFD,EAGE;AACD,QAAMC,SAAS,GAAG,mBAASF,KAAT,CAAlB;AAEA,SAAO,4BAAC,UAAD,6BAAWE,SAAX;AAAuB,IAAA,GAAG,EAAGD;AAA7B,KAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,MAAME,IAAI,GAAG,6BAAgBJ,eAAhB,EAAiC,MAAjC,CAAb;;eAEQI,I","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport { contextConnect, WordPressComponentProps } from '../ui/context';\nimport { View } from '../view';\nimport useGrid from './hook';\nimport type { GridProps } from './types';\n\nfunction UnconnectedGrid(\n\tprops: WordPressComponentProps< GridProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst gridProps = useGrid( props );\n\n\treturn <View { ...gridProps } ref={ forwardedRef } />;\n}\n\n/**\n * `Grid` is a primitive layout component that can arrange content in a grid configuration.\n *\n * ```jsx\n * import {\n * \t__experimentalGrid as Grid,\n * \t__experimentalText as Text\n * } from `@wordpress/components`;\n *\n * function Example() {\n * \treturn (\n * \t\t<Grid columns={ 3 }>\n * \t\t\t<Text>Code</Text>\n * \t\t\t<Text>is</Text>\n * \t\t\t<Text>Poetry</Text>\n * \t\t</Grid>\n * \t);\n * }\n * ```\n */\nexport const Grid = contextConnect( UnconnectedGrid, 'Grid' );\n\nexport default Grid;\n"]}
+{"version":3,"sources":["@wordpress/components/src/grid/component.tsx"],"names":["UnconnectedGrid","props","forwardedRef","gridProps","Grid"],"mappings":";;;;;;;;;;;AAQA;;AACA;;AACA;;AAVA;AACA;AACA;;AAGA;AACA;AACA;AAMA,SAASA,eAAT,CACCC,KADD,EAECC,YAFD,EAGE;AACD,QAAMC,SAAS,GAAG,mBAASF,KAAT,CAAlB;AAEA,SAAO,4BAAC,UAAD,OAAWE,SAAX;AAAuB,IAAA,GAAG,EAAGD;AAA7B,IAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,MAAME,IAAI,GAAG,6BAAgBJ,eAAhB,EAAiC,MAAjC,CAAb;;eAEQI,I","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport { contextConnect, WordPressComponentProps } from '../ui/context';\nimport { View } from '../view';\nimport useGrid from './hook';\nimport type { GridProps } from './types';\n\nfunction UnconnectedGrid(\n\tprops: WordPressComponentProps< GridProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst gridProps = useGrid( props );\n\n\treturn <View { ...gridProps } ref={ forwardedRef } />;\n}\n\n/**\n * `Grid` is a primitive layout component that can arrange content in a grid configuration.\n *\n * ```jsx\n * import {\n * \t__experimentalGrid as Grid,\n * \t__experimentalText as Text\n * } from `@wordpress/components`;\n *\n * function Example() {\n * \treturn (\n * \t\t<Grid columns={ 3 }>\n * \t\t\t<Text>Code</Text>\n * \t\t\t<Text>is</Text>\n * \t\t\t<Text>Poetry</Text>\n * \t\t</Grid>\n * \t);\n * }\n * ```\n */\nexport const Grid = contextConnect( UnconnectedGrid, 'Grid' );\n\nexport default Grid;\n"]}

package/build/guide/icons.js

@@ -12,22 +12,19 @@ var _primitives = require("@wordpress/primitives");
 /**
  * WordPress dependencies
  */
-const PageControlIcon = _ref => {
-  let {
-    isSelected
-  } = _ref;
-  return (0, _element.createElement)(_primitives.SVG, {
-    width: "8",
-    height: "8",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, (0, _element.createElement)(_primitives.Circle, {
-    cx: "4",
-    cy: "4",
-    r: "4",
-    fill: isSelected ? '#419ECD' : '#E1E3E6'
-  }));
-};
+const PageControlIcon = ({
+  isSelected
+}) => (0, _element.createElement)(_primitives.SVG, {
+  width: "8",
+  height: "8",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, (0, _element.createElement)(_primitives.Circle, {
+  cx: "4",
+  cy: "4",
+  r: "4",
+  fill: isSelected ? '#419ECD' : '#E1E3E6'
+}));
 
 exports.PageControlIcon = PageControlIcon;
 //# sourceMappingURL=icons.js.map

package/build/guide/icons.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/guide/icons.tsx"],"names":["PageControlIcon","isSelected"],"mappings":";;;;;;;;;AAGA;;AAHA;AACA;AACA;AAGO,MAAMA,eAAe,GAAG;AAAA,MAAE;AAAEC,IAAAA;AAAF,GAAF;AAAA,SAC9B,4BAAC,eAAD;AAAK,IAAA,KAAK,EAAC,GAAX;AAAe,IAAA,MAAM,EAAC,GAAtB;AAA0B,IAAA,IAAI,EAAC,MAA/B;AAAsC,IAAA,KAAK,EAAC;AAA5C,KACC,4BAAC,kBAAD;AACC,IAAA,EAAE,EAAC,GADJ;AAEC,IAAA,EAAE,EAAC,GAFJ;AAGC,IAAA,CAAC,EAAC,GAHH;AAIC,IAAA,IAAI,EAAGA,UAAU,GAAG,SAAH,GAAe;AAJjC,IADD,CAD8B;AAAA,CAAxB","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { SVG, Circle } from '@wordpress/primitives';\n\nexport const PageControlIcon = ( { isSelected }: { isSelected: boolean } ) => (\n\t<SVG width=\"8\" height=\"8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t<Circle\n\t\t\tcx=\"4\"\n\t\t\tcy=\"4\"\n\t\t\tr=\"4\"\n\t\t\tfill={ isSelected ? '#419ECD' : '#E1E3E6' }\n\t\t/>\n\t</SVG>\n);\n"]}
+{"version":3,"sources":["@wordpress/components/src/guide/icons.tsx"],"names":["PageControlIcon","isSelected"],"mappings":";;;;;;;;;AAGA;;AAHA;AACA;AACA;AAGO,MAAMA,eAAe,GAAG,CAAE;AAAEC,EAAAA;AAAF,CAAF,KAC9B,4BAAC,eAAD;AAAK,EAAA,KAAK,EAAC,GAAX;AAAe,EAAA,MAAM,EAAC,GAAtB;AAA0B,EAAA,IAAI,EAAC,MAA/B;AAAsC,EAAA,KAAK,EAAC;AAA5C,GACC,4BAAC,kBAAD;AACC,EAAA,EAAE,EAAC,GADJ;AAEC,EAAA,EAAE,EAAC,GAFJ;AAGC,EAAA,CAAC,EAAC,GAHH;AAIC,EAAA,IAAI,EAAGA,UAAU,GAAG,SAAH,GAAe;AAJjC,EADD,CADM","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { SVG, Circle } from '@wordpress/primitives';\n\nexport const PageControlIcon = ( { isSelected }: { isSelected: boolean } ) => (\n\t<SVG width=\"8\" height=\"8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t<Circle\n\t\t\tcx=\"4\"\n\t\t\tcy=\"4\"\n\t\t\tr=\"4\"\n\t\t\tfill={ isSelected ? '#419ECD' : '#E1E3E6' }\n\t\t/>\n\t</SVG>\n);\n"]}

package/build/guide/index.js

@@ -67,15 +67,14 @@ var _pageControl = _interopRequireDefault(require("./page-control"));
  * }
  * ```
  */
-function Guide(_ref) {
-  let {
-    children,
-    className,
-    contentLabel,
-    finishButtonText = (0, _i18n.__)('Finish'),
-    onFinish,
-    pages = []
-  } = _ref;
+function Guide({
+  children,
+  className,
+  contentLabel,
+  finishButtonText = (0, _i18n.__)('Finish'),
+  onFinish,
+  pages = []
+}) {
   const guideContainer = (0, _element.useRef)(null);
   const [currentPage, setCurrentPage] = (0, _element.useState)(0);
   (0, _element.useEffect)(() => {
@@ -90,9 +89,7 @@ function Guide(_ref) {
     // Each time we change the current page, start from the first element of the page.
     // This also solves any focus loss that can happen.
     if (guideContainer.current) {
-      var _;
-
-      (_ = _dom.focus.tabbable.find(guideContainer.current)[0]) === null || _ === void 0 ? void 0 : _.focus();
+      _dom.focus.tabbable.find(guideContainer.current)[0]?.focus();
     }
   }, [currentPage]);
 

package/build/guide/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/guide/index.tsx"],"names":["Guide","children","className","contentLabel","finishButtonText","onFinish","pages","guideContainer","currentPage","setCurrentPage","Children","count","since","alternative","current","focus","tabbable","find","map","child","content","canGoBack","canGoForward","length","goBack","goForward","event","code","preventDefault","image"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useEffect, Children, useRef } from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\nimport { __ } from '@wordpress/i18n';\nimport { focus } from '@wordpress/dom';\n\n/**\n * Internal dependencies\n */\nimport Modal from '../modal';\nimport Button from '../button';\nimport PageControl from './page-control';\nimport type { GuideProps } from './types';\n\n/**\n * `Guide` is a React component that renders a _user guide_ in a modal. The guide consists of several pages which the user can step through one by one. The guide is finished when the modal is closed or when the user clicks _Finish_ on the last page of the guide.\n *\n * ```jsx\n * function MyTutorial() {\n * \tconst [ isOpen, setIsOpen ] = useState( true );\n *\n * \tif ( ! isOpen ) {\n * \t\treturn null;\n * \t}\n *\n * \treturn (\n * \t\t<Guide\n * \t\t\tonFinish={ () => setIsOpen( false ) }\n * \t\t\tpages={ [\n * \t\t\t\t{\n * \t\t\t\t\tcontent: <p>Welcome to the ACME Store!</p>,\n * \t\t\t\t},\n * \t\t\t\t{\n * \t\t\t\t\timage: <img src=\"https://acmestore.com/add-to-cart.png\" />,\n * \t\t\t\t\tcontent: (\n * \t\t\t\t\t\t<p>\n * \t\t\t\t\t\t\tClick <i>Add to Cart</i> to buy a product.\n * \t\t\t\t\t\t</p>\n * \t\t\t\t\t),\n * \t\t\t\t},\n * \t\t\t] }\n * \t\t/>\n * \t);\n * }\n * ```\n */\nfunction Guide( {\n\tchildren,\n\tclassName,\n\tcontentLabel,\n\tfinishButtonText = __( 'Finish' ),\n\tonFinish,\n\tpages = [],\n}: GuideProps ) {\n\tconst guideContainer = useRef< HTMLDivElement >( null );\n\tconst [ currentPage, setCurrentPage ] = useState( 0 );\n\n\tuseEffect( () => {\n\t\tif ( Children.count( children ) ) {\n\t\t\tdeprecated( 'Passing children to <Guide>', {\n\t\t\t\tsince: '5.5',\n\t\t\t\talternative: 'the `pages` prop',\n\t\t\t} );\n\t\t}\n\t}, [ children ] );\n\n\tuseEffect( () => {\n\t\t// Each time we change the current page, start from the first element of the page.\n\t\t// This also solves any focus loss that can happen.\n\t\tif ( guideContainer.current ) {\n\t\t\t(\n\t\t\t\tfocus.tabbable.find( guideContainer.current ) as HTMLElement[]\n\t\t\t )[ 0 ]?.focus();\n\t\t}\n\t}, [ currentPage ] );\n\n\tif ( Children.count( children ) ) {\n\t\tpages =\n\t\t\tChildren.map( children, ( child ) => ( {\n\t\t\t\tcontent: child,\n\t\t\t} ) ) ?? [];\n\t}\n\n\tconst canGoBack = currentPage > 0;\n\tconst canGoForward = currentPage < pages.length - 1;\n\n\tconst goBack = () => {\n\t\tif ( canGoBack ) {\n\t\t\tsetCurrentPage( currentPage - 1 );\n\t\t}\n\t};\n\n\tconst goForward = () => {\n\t\tif ( canGoForward ) {\n\t\t\tsetCurrentPage( currentPage + 1 );\n\t\t}\n\t};\n\n\tif ( pages.length === 0 ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<Modal\n\t\t\tclassName={ classnames( 'components-guide', className ) }\n\t\t\tcontentLabel={ contentLabel }\n\t\t\tonRequestClose={ onFinish }\n\t\t\tonKeyDown={ ( event ) => {\n\t\t\t\tif ( event.code === 'ArrowLeft' ) {\n\t\t\t\t\tgoBack();\n\t\t\t\t\t// Do not scroll the modal's contents.\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t} else if ( event.code === 'ArrowRight' ) {\n\t\t\t\t\tgoForward();\n\t\t\t\t\t// Do not scroll the modal's contents.\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t}\n\t\t\t} }\n\t\t\tref={ guideContainer }\n\t\t>\n\t\t\t<div className=\"components-guide__container\">\n\t\t\t\t<div className=\"components-guide__page\">\n\t\t\t\t\t{ pages[ currentPage ].image }\n\n\t\t\t\t\t{ pages.length > 1 && (\n\t\t\t\t\t\t<PageControl\n\t\t\t\t\t\t\tcurrentPage={ currentPage }\n\t\t\t\t\t\t\tnumberOfPages={ pages.length }\n\t\t\t\t\t\t\tsetCurrentPage={ setCurrentPage }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ pages[ currentPage ].content }\n\t\t\t\t</div>\n\n\t\t\t\t<div className=\"components-guide__footer\">\n\t\t\t\t\t{ canGoBack && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"components-guide__back-button\"\n\t\t\t\t\t\t\tonClick={ goBack }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Previous' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) }\n\t\t\t\t\t{ canGoForward && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"components-guide__forward-button\"\n\t\t\t\t\t\t\tonClick={ goForward }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Next' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! canGoForward && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"components-guide__finish-button\"\n\t\t\t\t\t\t\tonClick={ onFinish }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ finishButtonText }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</Modal>\n\t);\n}\n\nexport default Guide;\n"]}
+{"version":3,"sources":["@wordpress/components/src/guide/index.tsx"],"names":["Guide","children","className","contentLabel","finishButtonText","onFinish","pages","guideContainer","currentPage","setCurrentPage","Children","count","since","alternative","current","focus","tabbable","find","map","child","content","canGoBack","canGoForward","length","goBack","goForward","event","code","preventDefault","image"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useEffect, Children, useRef } from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\nimport { __ } from '@wordpress/i18n';\nimport { focus } from '@wordpress/dom';\n\n/**\n * Internal dependencies\n */\nimport Modal from '../modal';\nimport Button from '../button';\nimport PageControl from './page-control';\nimport type { GuideProps } from './types';\n\n/**\n * `Guide` is a React component that renders a _user guide_ in a modal. The guide consists of several pages which the user can step through one by one. The guide is finished when the modal is closed or when the user clicks _Finish_ on the last page of the guide.\n *\n * ```jsx\n * function MyTutorial() {\n * \tconst [ isOpen, setIsOpen ] = useState( true );\n *\n * \tif ( ! isOpen ) {\n * \t\treturn null;\n * \t}\n *\n * \treturn (\n * \t\t<Guide\n * \t\t\tonFinish={ () => setIsOpen( false ) }\n * \t\t\tpages={ [\n * \t\t\t\t{\n * \t\t\t\t\tcontent: <p>Welcome to the ACME Store!</p>,\n * \t\t\t\t},\n * \t\t\t\t{\n * \t\t\t\t\timage: <img src=\"https://acmestore.com/add-to-cart.png\" />,\n * \t\t\t\t\tcontent: (\n * \t\t\t\t\t\t<p>\n * \t\t\t\t\t\t\tClick <i>Add to Cart</i> to buy a product.\n * \t\t\t\t\t\t</p>\n * \t\t\t\t\t),\n * \t\t\t\t},\n * \t\t\t] }\n * \t\t/>\n * \t);\n * }\n * ```\n */\nfunction Guide( {\n\tchildren,\n\tclassName,\n\tcontentLabel,\n\tfinishButtonText = __( 'Finish' ),\n\tonFinish,\n\tpages = [],\n}: GuideProps ) {\n\tconst guideContainer = useRef< HTMLDivElement >( null );\n\tconst [ currentPage, setCurrentPage ] = useState( 0 );\n\n\tuseEffect( () => {\n\t\tif ( Children.count( children ) ) {\n\t\t\tdeprecated( 'Passing children to <Guide>', {\n\t\t\t\tsince: '5.5',\n\t\t\t\talternative: 'the `pages` prop',\n\t\t\t} );\n\t\t}\n\t}, [ children ] );\n\n\tuseEffect( () => {\n\t\t// Each time we change the current page, start from the first element of the page.\n\t\t// This also solves any focus loss that can happen.\n\t\tif ( guideContainer.current ) {\n\t\t\t(\n\t\t\t\tfocus.tabbable.find( guideContainer.current ) as HTMLElement[]\n\t\t\t )[ 0 ]?.focus();\n\t\t}\n\t}, [ currentPage ] );\n\n\tif ( Children.count( children ) ) {\n\t\tpages =\n\t\t\tChildren.map( children, ( child ) => ( {\n\t\t\t\tcontent: child,\n\t\t\t} ) ) ?? [];\n\t}\n\n\tconst canGoBack = currentPage > 0;\n\tconst canGoForward = currentPage < pages.length - 1;\n\n\tconst goBack = () => {\n\t\tif ( canGoBack ) {\n\t\t\tsetCurrentPage( currentPage - 1 );\n\t\t}\n\t};\n\n\tconst goForward = () => {\n\t\tif ( canGoForward ) {\n\t\t\tsetCurrentPage( currentPage + 1 );\n\t\t}\n\t};\n\n\tif ( pages.length === 0 ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<Modal\n\t\t\tclassName={ classnames( 'components-guide', className ) }\n\t\t\tcontentLabel={ contentLabel }\n\t\t\tonRequestClose={ onFinish }\n\t\t\tonKeyDown={ ( event ) => {\n\t\t\t\tif ( event.code === 'ArrowLeft' ) {\n\t\t\t\t\tgoBack();\n\t\t\t\t\t// Do not scroll the modal's contents.\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t} else if ( event.code === 'ArrowRight' ) {\n\t\t\t\t\tgoForward();\n\t\t\t\t\t// Do not scroll the modal's contents.\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t}\n\t\t\t} }\n\t\t\tref={ guideContainer }\n\t\t>\n\t\t\t<div className=\"components-guide__container\">\n\t\t\t\t<div className=\"components-guide__page\">\n\t\t\t\t\t{ pages[ currentPage ].image }\n\n\t\t\t\t\t{ pages.length > 1 && (\n\t\t\t\t\t\t<PageControl\n\t\t\t\t\t\t\tcurrentPage={ currentPage }\n\t\t\t\t\t\t\tnumberOfPages={ pages.length }\n\t\t\t\t\t\t\tsetCurrentPage={ setCurrentPage }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ pages[ currentPage ].content }\n\t\t\t\t</div>\n\n\t\t\t\t<div className=\"components-guide__footer\">\n\t\t\t\t\t{ canGoBack && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"components-guide__back-button\"\n\t\t\t\t\t\t\tonClick={ goBack }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Previous' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) }\n\t\t\t\t\t{ canGoForward && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"components-guide__forward-button\"\n\t\t\t\t\t\t\tonClick={ goForward }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Next' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! canGoForward && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"components-guide__finish-button\"\n\t\t\t\t\t\t\tonClick={ onFinish }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ finishButtonText }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</Modal>\n\t);\n}\n\nexport default Guide;\n"]}

package/build/guide/page-control.js

@@ -22,12 +22,11 @@ var _icons = require("./icons");
 /**
  * Internal dependencies
  */
-function PageControl(_ref) {
-  let {
-    currentPage,
-    numberOfPages,
-    setCurrentPage
-  } = _ref;
+function PageControl({
+  currentPage,
+  numberOfPages,
+  setCurrentPage
+}) {
   return (0, _element.createElement)("ul", {
     className: "components-guide__page-control",
     "aria-label": (0, _i18n.__)('Guide controls')

package/build/guide/page-control.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/guide/page-control.tsx"],"names":["PageControl","currentPage","numberOfPages","setCurrentPage","Array","from","length","map","_","page","undefined"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AACA;;AATA;AACA;AACA;;AAGA;AACA;AACA;AAKe,SAASA,WAAT,OAIO;AAAA,MAJe;AACpCC,IAAAA,WADoC;AAEpCC,IAAAA,aAFoC;AAGpCC,IAAAA;AAHoC,GAIf;AACrB,SACC;AACC,IAAA,SAAS,EAAC,gCADX;AAEC,kBAAa,cAAI,gBAAJ;AAFd,KAIGC,KAAK,CAACC,IAAN,CAAY;AAAEC,IAAAA,MAAM,EAAEJ;AAAV,GAAZ,EAAwCK,GAAxC,CAA6C,CAAEC,CAAF,EAAKC,IAAL,KAC9C;AACC,IAAA,GAAG,EAAGA,IADP,CAEC;AAFD;AAGC,oBAAeA,IAAI,KAAKR,WAAT,GAAuB,MAAvB,GAAgCS;AAHhD,KAKC,4BAAC,eAAD;AACC,IAAA,GAAG,EAAGD,IADP;AAEC,IAAA,IAAI,EACH,4BAAC,sBAAD;AACC,MAAA,UAAU,EAAGA,IAAI,KAAKR;AADvB,MAHF;AAOC,kBAAa;AACZ;AACA,kBAAI,mBAAJ,CAFY,EAGZQ,IAAI,GAAG,CAHK,EAIZP,aAJY,CAPd;AAaC,IAAA,OAAO,EAAG,MAAMC,cAAc,CAAEM,IAAF;AAb/B,IALD,CADC,CAJH,CADD;AA8BA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport { PageControlIcon } from './icons';\nimport type { PageControlProps } from './types';\n\nexport default function PageControl( {\n\tcurrentPage,\n\tnumberOfPages,\n\tsetCurrentPage,\n}: PageControlProps ) {\n\treturn (\n\t\t<ul\n\t\t\tclassName=\"components-guide__page-control\"\n\t\t\taria-label={ __( 'Guide controls' ) }\n\t\t>\n\t\t\t{ Array.from( { length: numberOfPages } ).map( ( _, page ) => (\n\t\t\t\t<li\n\t\t\t\t\tkey={ page }\n\t\t\t\t\t// Set aria-current=\"step\" on the active page, see https://www.w3.org/TR/wai-aria-1.1/#aria-current\n\t\t\t\t\taria-current={ page === currentPage ? 'step' : undefined }\n\t\t\t\t>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tkey={ page }\n\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t<PageControlIcon\n\t\t\t\t\t\t\t\tisSelected={ page === currentPage }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t}\n\t\t\t\t\t\taria-label={ sprintf(\n\t\t\t\t\t\t\t/* translators: 1: current page number 2: total number of pages */\n\t\t\t\t\t\t\t__( 'Page %1$d of %2$d' ),\n\t\t\t\t\t\t\tpage + 1,\n\t\t\t\t\t\t\tnumberOfPages\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tonClick={ () => setCurrentPage( page ) }\n\t\t\t\t\t/>\n\t\t\t\t</li>\n\t\t\t) ) }\n\t\t</ul>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/guide/page-control.tsx"],"names":["PageControl","currentPage","numberOfPages","setCurrentPage","Array","from","length","map","_","page","undefined"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AACA;;AATA;AACA;AACA;;AAGA;AACA;AACA;AAKe,SAASA,WAAT,CAAsB;AACpCC,EAAAA,WADoC;AAEpCC,EAAAA,aAFoC;AAGpCC,EAAAA;AAHoC,CAAtB,EAIO;AACrB,SACC;AACC,IAAA,SAAS,EAAC,gCADX;AAEC,kBAAa,cAAI,gBAAJ;AAFd,KAIGC,KAAK,CAACC,IAAN,CAAY;AAAEC,IAAAA,MAAM,EAAEJ;AAAV,GAAZ,EAAwCK,GAAxC,CAA6C,CAAEC,CAAF,EAAKC,IAAL,KAC9C;AACC,IAAA,GAAG,EAAGA,IADP,CAEC;AAFD;AAGC,oBAAeA,IAAI,KAAKR,WAAT,GAAuB,MAAvB,GAAgCS;AAHhD,KAKC,4BAAC,eAAD;AACC,IAAA,GAAG,EAAGD,IADP;AAEC,IAAA,IAAI,EACH,4BAAC,sBAAD;AACC,MAAA,UAAU,EAAGA,IAAI,KAAKR;AADvB,MAHF;AAOC,kBAAa;AACZ;AACA,kBAAI,mBAAJ,CAFY,EAGZQ,IAAI,GAAG,CAHK,EAIZP,aAJY,CAPd;AAaC,IAAA,OAAO,EAAG,MAAMC,cAAc,CAAEM,IAAF;AAb/B,IALD,CADC,CAJH,CADD;AA8BA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport { PageControlIcon } from './icons';\nimport type { PageControlProps } from './types';\n\nexport default function PageControl( {\n\tcurrentPage,\n\tnumberOfPages,\n\tsetCurrentPage,\n}: PageControlProps ) {\n\treturn (\n\t\t<ul\n\t\t\tclassName=\"components-guide__page-control\"\n\t\t\taria-label={ __( 'Guide controls' ) }\n\t\t>\n\t\t\t{ Array.from( { length: numberOfPages } ).map( ( _, page ) => (\n\t\t\t\t<li\n\t\t\t\t\tkey={ page }\n\t\t\t\t\t// Set aria-current=\"step\" on the active page, see https://www.w3.org/TR/wai-aria-1.1/#aria-current\n\t\t\t\t\taria-current={ page === currentPage ? 'step' : undefined }\n\t\t\t\t>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tkey={ page }\n\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t<PageControlIcon\n\t\t\t\t\t\t\t\tisSelected={ page === currentPage }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t}\n\t\t\t\t\t\taria-label={ sprintf(\n\t\t\t\t\t\t\t/* translators: 1: current page number 2: total number of pages */\n\t\t\t\t\t\t\t__( 'Page %1$d of %2$d' ),\n\t\t\t\t\t\t\tpage + 1,\n\t\t\t\t\t\t\tnumberOfPages\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tonClick={ () => setCurrentPage( page ) }\n\t\t\t\t\t/>\n\t\t\t\t</li>\n\t\t\t) ) }\n\t\t</ul>\n\t);\n}\n"]}

package/build/guide/page.js

@@ -21,6 +21,7 @@ function GuidePage(props) {
       alternative: 'the `pages` prop in <Guide>'
     });
   }, []);
-  return (0, _element.createElement)("div", props);
+  return (0, _element.createElement)("div", { ...props
+  });
 }
 //# sourceMappingURL=page.js.map

package/build/guide/page.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/guide/page.tsx"],"names":["GuidePage","props","since","alternative"],"mappings":";;;;;;;;;AAGA;;AACA;;AAJA;AACA;AACA;AASe,SAASA,SAAT,CACdC,KADc,EAEb;AACD,0BAAW,MAAM;AAChB,6BAAY,aAAZ,EAA2B;AAC1BC,MAAAA,KAAK,EAAE,KADmB;AAE1BC,MAAAA,WAAW,EAAE;AAFa,KAA3B;AAIA,GALD,EAKG,EALH;AAOA,SAAO,mCAAUF,KAAV,CAAP;AACA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect } from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../ui/context';\n\nexport default function GuidePage(\n\tprops: WordPressComponentProps< {}, 'div', false >\n) {\n\tuseEffect( () => {\n\t\tdeprecated( '<GuidePage>', {\n\t\t\tsince: '5.5',\n\t\t\talternative: 'the `pages` prop in <Guide>',\n\t\t} );\n\t}, [] );\n\n\treturn <div { ...props } />;\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/guide/page.tsx"],"names":["GuidePage","props","since","alternative"],"mappings":";;;;;;;;;AAGA;;AACA;;AAJA;AACA;AACA;AASe,SAASA,SAAT,CACdC,KADc,EAEb;AACD,0BAAW,MAAM;AAChB,6BAAY,aAAZ,EAA2B;AAC1BC,MAAAA,KAAK,EAAE,KADmB;AAE1BC,MAAAA,WAAW,EAAE;AAFa,KAA3B;AAIA,GALD,EAKG,EALH;AAOA,SAAO,wCAAUF;AAAV,IAAP;AACA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect } from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../ui/context';\n\nexport default function GuidePage(\n\tprops: WordPressComponentProps< {}, 'div', false >\n) {\n\tuseEffect( () => {\n\t\tdeprecated( '<GuidePage>', {\n\t\t\tsince: '5.5',\n\t\t\talternative: 'the `pages` prop in <Guide>',\n\t\t} );\n\t}, [] );\n\n\treturn <div { ...props } />;\n}\n"]}

package/build/h-stack/component.js

@@ -1,7 +1,5 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,8 +7,6 @@ exports.default = exports.HStack = void 0;
 
 var _element = require("@wordpress/element");
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _context = require("../ui/context");
 
 var _view = require("../view");
@@ -22,9 +18,9 @@ var _hook = require("./hook");
  */
 function UnconnectedHStack(props, forwardedRef) {
   const hStackProps = (0, _hook.useHStack)(props);
-  return (0, _element.createElement)(_view.View, (0, _extends2.default)({}, hStackProps, {
+  return (0, _element.createElement)(_view.View, { ...hStackProps,
     ref: forwardedRef
-  }));
+  });
 }
 /**
  * `HStack` (Horizontal Stack) arranges child elements in a horizontal line.

package/build/h-stack/component.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/h-stack/component.tsx"],"names":["UnconnectedHStack","props","forwardedRef","hStackProps","HStack"],"mappings":";;;;;;;;;;;;;AAGA;;AACA;;AACA;;AALA;AACA;AACA;AAMA,SAASA,iBAAT,CACCC,KADD,EAECC,YAFD,EAGE;AACD,QAAMC,WAAW,GAAG,qBAAWF,KAAX,CAApB;AAEA,SAAO,4BAAC,UAAD,6BAAWE,WAAX;AAAyB,IAAA,GAAG,EAAGD;AAA/B,KAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,MAAME,MAAM,GAAG,6BAAgBJ,iBAAhB,EAAmC,QAAnC,CAAf;;eAEQI,M","sourcesContent":["/**\n * Internal dependencies\n */\nimport { contextConnect, WordPressComponentProps } from '../ui/context';\nimport { View } from '../view';\nimport { useHStack } from './hook';\nimport type { Props } from './types';\n\nfunction UnconnectedHStack(\n\tprops: WordPressComponentProps< Props, 'div' >,\n\tforwardedRef: React.ForwardedRef< any >\n) {\n\tconst hStackProps = useHStack( props );\n\n\treturn <View { ...hStackProps } ref={ forwardedRef } />;\n}\n\n/**\n * `HStack` (Horizontal Stack) arranges child elements in a horizontal line.\n *\n * `HStack` can render anything inside.\n *\n * ```jsx\n * import {\n * \t__experimentalHStack as HStack,\n * \t__experimentalText as Text,\n * } from `@wordpress/components`;\n *\n * function Example() {\n * \treturn (\n * \t\t<HStack>\n * \t\t\t<Text>Code</Text>\n * \t\t\t<Text>is</Text>\n * \t\t\t<Text>Poetry</Text>\n * \t\t</HStack>\n * \t);\n * }\n * ```\n */\nexport const HStack = contextConnect( UnconnectedHStack, 'HStack' );\n\nexport default HStack;\n"]}
+{"version":3,"sources":["@wordpress/components/src/h-stack/component.tsx"],"names":["UnconnectedHStack","props","forwardedRef","hStackProps","HStack"],"mappings":";;;;;;;;;AAGA;;AACA;;AACA;;AALA;AACA;AACA;AAMA,SAASA,iBAAT,CACCC,KADD,EAECC,YAFD,EAGE;AACD,QAAMC,WAAW,GAAG,qBAAWF,KAAX,CAApB;AAEA,SAAO,4BAAC,UAAD,OAAWE,WAAX;AAAyB,IAAA,GAAG,EAAGD;AAA/B,IAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,MAAME,MAAM,GAAG,6BAAgBJ,iBAAhB,EAAmC,QAAnC,CAAf;;eAEQI,M","sourcesContent":["/**\n * Internal dependencies\n */\nimport { contextConnect, WordPressComponentProps } from '../ui/context';\nimport { View } from '../view';\nimport { useHStack } from './hook';\nimport type { Props } from './types';\n\nfunction UnconnectedHStack(\n\tprops: WordPressComponentProps< Props, 'div' >,\n\tforwardedRef: React.ForwardedRef< any >\n) {\n\tconst hStackProps = useHStack( props );\n\n\treturn <View { ...hStackProps } ref={ forwardedRef } />;\n}\n\n/**\n * `HStack` (Horizontal Stack) arranges child elements in a horizontal line.\n *\n * `HStack` can render anything inside.\n *\n * ```jsx\n * import {\n * \t__experimentalHStack as HStack,\n * \t__experimentalText as Text,\n * } from `@wordpress/components`;\n *\n * function Example() {\n * \treturn (\n * \t\t<HStack>\n * \t\t\t<Text>Code</Text>\n * \t\t\t<Text>is</Text>\n * \t\t\t<Text>Poetry</Text>\n * \t\t</HStack>\n * \t);\n * }\n * ```\n */\nexport const HStack = contextConnect( UnconnectedHStack, 'HStack' );\n\nexport default HStack;\n"]}

package/build/h-stack/hook.js

@@ -1,7 +1,5 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,8 +7,6 @@ exports.useHStack = useHStack;
 
 var _element = require("@wordpress/element");
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _context = require("../ui/context");
 
 var _flex = require("../flex");
@@ -44,10 +40,11 @@ function useHStack(props) {
 
       const _key = childElement.key || `hstack-${index}`;
 
-      return (0, _element.createElement)(_flex.FlexItem, (0, _extends2.default)({
+      return (0, _element.createElement)(_flex.FlexItem, {
         isBlock: true,
-        key: _key
-      }, childElement.props));
+        key: _key,
+        ...childElement.props
+      });
     }
 
     return child;

package/build/h-stack/hook.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/h-stack/hook.tsx"],"names":["useHStack","props","alignment","children","direction","spacing","otherProps","align","validChildren","clonedChildren","map","child","index","_isSpacer","childElement","_key","key","propsForFlex","justify","gap","flexProps"],"mappings":";;;;;;;;;;;;;AAQA;;AAKA;;AACA;;AACA;;AAfA;AACA;AACA;;AAGA;AACA;AACA;AAWO,SAASA,SAAT,CAAoBC,KAApB,EAAqE;AAC3E,QAAM;AACLC,IAAAA,SAAS,GAAG,MADP;AAELC,IAAAA,QAFK;AAGLC,IAAAA,SAHK;AAILC,IAAAA,OAAO,GAAG,CAJL;AAKL,OAAGC;AALE,MAMF,+BAAkBL,KAAlB,EAAyB,QAAzB,CANJ;AAQA,QAAMM,KAAK,GAAG,8BAAmBL,SAAnB,EAA8BE,SAA9B,CAAd;AAEA,QAAMI,aAAa,GAAG,wCAAkBL,QAAlB,CAAtB;AACA,QAAMM,cAAc,GAAGD,aAAa,CAACE,GAAd,CAAmB,CAAEC,KAAF,EAASC,KAAT,KAAoB;AAC7D,UAAMC,SAAS,GAAG,kCAAqBF,KAArB,EAA4B,CAAE,QAAF,CAA5B,CAAlB;;AAEA,QAAKE,SAAL,EAAiB;AAChB,YAAMC,YAAY,GAAGH,KAArB;;AACA,YAAMI,IAAI,GAAGD,YAAY,CAACE,GAAb,IAAqB,UAAUJ,KAAO,EAAnD;;AAEA,aAAO,4BAAC,cAAD;AAAU,QAAA,OAAO,MAAjB;AAAkB,QAAA,GAAG,EAAGG;AAAxB,SAAoCD,YAAY,CAACb,KAAjD,EAAP;AACA;;AAED,WAAOU,KAAP;AACA,GAXsB,CAAvB;AAaA,QAAMM,YAAY,GAAG;AACpBd,IAAAA,QAAQ,EAAEM,cADU;AAEpBL,IAAAA,SAFoB;AAGpBc,IAAAA,OAAO,EAAE,QAHW;AAIpB,OAAGX,KAJiB;AAKpB,OAAGD,UALiB;AAMpBa,IAAAA,GAAG,EAAEd;AANe,GAArB;AASA,QAAMe,SAAS,GAAG,mBAASH,YAAT,CAAlB;AAEA,SAAOG,SAAP;AACA","sourcesContent":["/**\n * External dependencies\n */\nimport type { ReactElement } from 'react';\n\n/**\n * Internal dependencies\n */\nimport {\n\thasConnectNamespace,\n\tuseContextSystem,\n\tWordPressComponentProps,\n} from '../ui/context';\nimport { FlexItem, useFlex } from '../flex';\nimport { getAlignmentProps } from './utils';\nimport { getValidChildren } from '../ui/utils/get-valid-children';\nimport type { Props } from './types';\n\nexport function useHStack( props: WordPressComponentProps< Props, 'div' > ) {\n\tconst {\n\t\talignment = 'edge',\n\t\tchildren,\n\t\tdirection,\n\t\tspacing = 2,\n\t\t...otherProps\n\t} = useContextSystem( props, 'HStack' );\n\n\tconst align = getAlignmentProps( alignment, direction );\n\n\tconst validChildren = getValidChildren( children );\n\tconst clonedChildren = validChildren.map( ( child, index ) => {\n\t\tconst _isSpacer = hasConnectNamespace( child, [ 'Spacer' ] );\n\n\t\tif ( _isSpacer ) {\n\t\t\tconst childElement = child as ReactElement;\n\t\t\tconst _key = childElement.key || `hstack-${ index }`;\n\n\t\t\treturn <FlexItem isBlock key={ _key } { ...childElement.props } />;\n\t\t}\n\n\t\treturn child;\n\t} );\n\n\tconst propsForFlex = {\n\t\tchildren: clonedChildren,\n\t\tdirection,\n\t\tjustify: 'center',\n\t\t...align,\n\t\t...otherProps,\n\t\tgap: spacing,\n\t};\n\n\tconst flexProps = useFlex( propsForFlex );\n\n\treturn flexProps;\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/h-stack/hook.tsx"],"names":["useHStack","props","alignment","children","direction","spacing","otherProps","align","validChildren","clonedChildren","map","child","index","_isSpacer","childElement","_key","key","propsForFlex","justify","gap","flexProps"],"mappings":";;;;;;;;;AAQA;;AAKA;;AACA;;AACA;;AAfA;AACA;AACA;;AAGA;AACA;AACA;AAWO,SAASA,SAAT,CAAoBC,KAApB,EAAqE;AAC3E,QAAM;AACLC,IAAAA,SAAS,GAAG,MADP;AAELC,IAAAA,QAFK;AAGLC,IAAAA,SAHK;AAILC,IAAAA,OAAO,GAAG,CAJL;AAKL,OAAGC;AALE,MAMF,+BAAkBL,KAAlB,EAAyB,QAAzB,CANJ;AAQA,QAAMM,KAAK,GAAG,8BAAmBL,SAAnB,EAA8BE,SAA9B,CAAd;AAEA,QAAMI,aAAa,GAAG,wCAAkBL,QAAlB,CAAtB;AACA,QAAMM,cAAc,GAAGD,aAAa,CAACE,GAAd,CAAmB,CAAEC,KAAF,EAASC,KAAT,KAAoB;AAC7D,UAAMC,SAAS,GAAG,kCAAqBF,KAArB,EAA4B,CAAE,QAAF,CAA5B,CAAlB;;AAEA,QAAKE,SAAL,EAAiB;AAChB,YAAMC,YAAY,GAAGH,KAArB;;AACA,YAAMI,IAAI,GAAGD,YAAY,CAACE,GAAb,IAAqB,UAAUJ,KAAO,EAAnD;;AAEA,aAAO,4BAAC,cAAD;AAAU,QAAA,OAAO,MAAjB;AAAkB,QAAA,GAAG,EAAGG,IAAxB;AAAA,WAAoCD,YAAY,CAACb;AAAjD,QAAP;AACA;;AAED,WAAOU,KAAP;AACA,GAXsB,CAAvB;AAaA,QAAMM,YAAY,GAAG;AACpBd,IAAAA,QAAQ,EAAEM,cADU;AAEpBL,IAAAA,SAFoB;AAGpBc,IAAAA,OAAO,EAAE,QAHW;AAIpB,OAAGX,KAJiB;AAKpB,OAAGD,UALiB;AAMpBa,IAAAA,GAAG,EAAEd;AANe,GAArB;AASA,QAAMe,SAAS,GAAG,mBAASH,YAAT,CAAlB;AAEA,SAAOG,SAAP;AACA","sourcesContent":["/**\n * External dependencies\n */\nimport type { ReactElement } from 'react';\n\n/**\n * Internal dependencies\n */\nimport {\n\thasConnectNamespace,\n\tuseContextSystem,\n\tWordPressComponentProps,\n} from '../ui/context';\nimport { FlexItem, useFlex } from '../flex';\nimport { getAlignmentProps } from './utils';\nimport { getValidChildren } from '../ui/utils/get-valid-children';\nimport type { Props } from './types';\n\nexport function useHStack( props: WordPressComponentProps< Props, 'div' > ) {\n\tconst {\n\t\talignment = 'edge',\n\t\tchildren,\n\t\tdirection,\n\t\tspacing = 2,\n\t\t...otherProps\n\t} = useContextSystem( props, 'HStack' );\n\n\tconst align = getAlignmentProps( alignment, direction );\n\n\tconst validChildren = getValidChildren( children );\n\tconst clonedChildren = validChildren.map( ( child, index ) => {\n\t\tconst _isSpacer = hasConnectNamespace( child, [ 'Spacer' ] );\n\n\t\tif ( _isSpacer ) {\n\t\t\tconst childElement = child as ReactElement;\n\t\t\tconst _key = childElement.key || `hstack-${ index }`;\n\n\t\t\treturn <FlexItem isBlock key={ _key } { ...childElement.props } />;\n\t\t}\n\n\t\treturn child;\n\t} );\n\n\tconst propsForFlex = {\n\t\tchildren: clonedChildren,\n\t\tdirection,\n\t\tjustify: 'center',\n\t\t...align,\n\t\t...otherProps,\n\t\tgap: spacing,\n\t};\n\n\tconst flexProps = useFlex( propsForFlex );\n\n\treturn flexProps;\n}\n"]}

package/build/h-stack/utils.js

@@ -105,9 +105,7 @@ const V_ALIGNMENTS = {
   }
 };
 
-function getAlignmentProps(alignment) {
-  let direction = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'row';
-
+function getAlignmentProps(alignment, direction = 'row') {
   if (!(0, _values.isValueDefined)(alignment)) {
     return {};
   }

package/build/h-stack/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/h-stack/utils.ts"],"names":["H_ALIGNMENTS","bottom","align","justify","bottomLeft","bottomRight","center","edge","left","right","stretch","top","topLeft","topRight","V_ALIGNMENTS","getAlignmentProps","alignment","direction","isVertical","props","alignmentProps"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type { CSSProperties } from 'react';\n/**\n * Internal dependencies\n */\nimport type { FlexDirection } from '../flex/types';\nimport type { HStackAlignment, AlignmentProps, Alignments } from './types';\nimport { isValueDefined } from '../utils/values';\n\nconst H_ALIGNMENTS: Alignments = {\n\tbottom: { align: 'flex-end', justify: 'center' },\n\tbottomLeft: { align: 'flex-end', justify: 'flex-start' },\n\tbottomRight: { align: 'flex-end', justify: 'flex-end' },\n\tcenter: { align: 'center', justify: 'center' },\n\tedge: { align: 'center', justify: 'space-between' },\n\tleft: { align: 'center', justify: 'flex-start' },\n\tright: { align: 'center', justify: 'flex-end' },\n\tstretch: { align: 'stretch' },\n\ttop: { align: 'flex-start', justify: 'center' },\n\ttopLeft: { align: 'flex-start', justify: 'flex-start' },\n\ttopRight: { align: 'flex-start', justify: 'flex-end' },\n};\n\nconst V_ALIGNMENTS: Alignments = {\n\tbottom: { justify: 'flex-end', align: 'center' },\n\tbottomLeft: { justify: 'flex-end', align: 'flex-start' },\n\tbottomRight: { justify: 'flex-end', align: 'flex-end' },\n\tcenter: { justify: 'center', align: 'center' },\n\tedge: { justify: 'space-between', align: 'center' },\n\tleft: { justify: 'center', align: 'flex-start' },\n\tright: { justify: 'center', align: 'flex-end' },\n\tstretch: { align: 'stretch' },\n\ttop: { justify: 'flex-start', align: 'center' },\n\ttopLeft: { justify: 'flex-start', align: 'flex-start' },\n\ttopRight: { justify: 'flex-start', align: 'flex-end' },\n};\n\nexport function getAlignmentProps(\n\talignment: HStackAlignment | CSSProperties[ 'alignItems' ],\n\tdirection: FlexDirection = 'row'\n): AlignmentProps {\n\tif ( ! isValueDefined( alignment ) ) {\n\t\treturn {};\n\t}\n\tconst isVertical = direction === 'column';\n\tconst props = isVertical ? V_ALIGNMENTS : H_ALIGNMENTS;\n\n\tconst alignmentProps =\n\t\talignment in props\n\t\t\t? props[ alignment as keyof typeof props ]\n\t\t\t: { align: alignment };\n\n\treturn alignmentProps;\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/h-stack/utils.ts"],"names":["H_ALIGNMENTS","bottom","align","justify","bottomLeft","bottomRight","center","edge","left","right","stretch","top","topLeft","topRight","V_ALIGNMENTS","getAlignmentProps","alignment","direction","isVertical","props","alignmentProps"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type { CSSProperties } from 'react';\n/**\n * Internal dependencies\n */\nimport type { FlexDirection } from '../flex/types';\nimport type { HStackAlignment, AlignmentProps, Alignments } from './types';\nimport { isValueDefined } from '../utils/values';\n\nconst H_ALIGNMENTS: Alignments = {\n\tbottom: { align: 'flex-end', justify: 'center' },\n\tbottomLeft: { align: 'flex-end', justify: 'flex-start' },\n\tbottomRight: { align: 'flex-end', justify: 'flex-end' },\n\tcenter: { align: 'center', justify: 'center' },\n\tedge: { align: 'center', justify: 'space-between' },\n\tleft: { align: 'center', justify: 'flex-start' },\n\tright: { align: 'center', justify: 'flex-end' },\n\tstretch: { align: 'stretch' },\n\ttop: { align: 'flex-start', justify: 'center' },\n\ttopLeft: { align: 'flex-start', justify: 'flex-start' },\n\ttopRight: { align: 'flex-start', justify: 'flex-end' },\n};\n\nconst V_ALIGNMENTS: Alignments = {\n\tbottom: { justify: 'flex-end', align: 'center' },\n\tbottomLeft: { justify: 'flex-end', align: 'flex-start' },\n\tbottomRight: { justify: 'flex-end', align: 'flex-end' },\n\tcenter: { justify: 'center', align: 'center' },\n\tedge: { justify: 'space-between', align: 'center' },\n\tleft: { justify: 'center', align: 'flex-start' },\n\tright: { justify: 'center', align: 'flex-end' },\n\tstretch: { align: 'stretch' },\n\ttop: { justify: 'flex-start', align: 'center' },\n\ttopLeft: { justify: 'flex-start', align: 'flex-start' },\n\ttopRight: { justify: 'flex-start', align: 'flex-end' },\n};\n\nexport function getAlignmentProps(\n\talignment: HStackAlignment | CSSProperties[ 'alignItems' ],\n\tdirection: FlexDirection = 'row'\n): AlignmentProps {\n\tif ( ! isValueDefined( alignment ) ) {\n\t\treturn {};\n\t}\n\tconst isVertical = direction === 'column';\n\tconst props = isVertical ? V_ALIGNMENTS : H_ALIGNMENTS;\n\n\tconst alignmentProps =\n\t\talignment in props\n\t\t\t? props[ alignment as keyof typeof props ]\n\t\t\t: { align: alignment };\n\n\treturn alignmentProps;\n}\n"]}

package/build/heading/component.js

@@ -1,7 +1,5 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,8 +7,6 @@ exports.default = exports.Heading = void 0;
 
 var _element = require("@wordpress/element");
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _context = require("../ui/context");
 
 var _view = require("../view");
@@ -26,9 +22,9 @@ var _hook = require("./hook");
  */
 function UnconnectedHeading(props, forwardedRef) {
   const headerProps = (0, _hook.useHeading)(props);
-  return (0, _element.createElement)(_view.View, (0, _extends2.default)({}, headerProps, {
+  return (0, _element.createElement)(_view.View, { ...headerProps,
     ref: forwardedRef
-  }));
+  });
 }
 /**
  * `Heading` renders headings and titles using the library's typography system.