npm - @wordpress/components - Versions diffs - 23.5.0 → 23.7.0 - Mend

@wordpress/components 23.5.0 → 23.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1131) hide show

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

@@ -13,7 +13,7 @@ var _es = _interopRequireDefault(require("fast-deep-equal/es6"));
 var _i18n = require("@wordpress/i18n");
-var _colorListPicker = _interopRequireDefault(require("../color-list-picker"));
+var _colorListPicker = _interopRequireDefault(require("./color-list-picker"));
 var _circularOptionPicker = _interopRequireDefault(require("../circular-option-picker"));
@@ -36,6 +36,40 @@ var _spacer = require("../spacer");
 /**
  * Internal dependencies
  */
+/**
+ * ```jsx
+ * import { DuotonePicker, DuotoneSwatch } from '@wordpress/components';
+ * import { useState } from '@wordpress/element';
+ *
+ * const DUOTONE_PALETTE = [
+ * 	{ colors: [ '#8c00b7', '#fcff41' ], name: 'Purple and yellow', slug: 'purple-yellow' },
+ * 	{ colors: [ '#000097', '#ff4747' ], name: 'Blue and red', slug: 'blue-red' },
+ * ];
+ *
+ * const COLOR_PALETTE = [
+ * 	{ color: '#ff4747', name: 'Red', slug: 'red' },
+ * 	{ color: '#fcff41', name: 'Yellow', slug: 'yellow' },
+ * 	{ color: '#000097', name: 'Blue', slug: 'blue' },
+ * 	{ color: '#8c00b7', name: 'Purple', slug: 'purple' },
+ * ];
+ *
+ * const Example = () => {
+ * 	const [ duotone, setDuotone ] = useState( [ '#000000', '#ffffff' ] );
+ * 	return (
+ * 		<>
+ * 			<DuotonePicker
+ * 				duotonePalette={ DUOTONE_PALETTE }
+ * 				colorPalette={ COLOR_PALETTE }
+ * 				value={ duotone }
+ * 				onChange={ setDuotone }
+ * 			/>
+ * 			<DuotoneSwatch values={ duotone } />
+ * 		</>
+ * 	);
+ * };
+ * ```
+ */
 function DuotonePicker(_ref) {
   let {
     clearable = true,
@@ -113,7 +147,10 @@ function DuotonePicker(_ref) {
         newColors[1] = defaultLight;
       }
-      const newValue = newColors.length >= 2 ? newColors : undefined;
+      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);
     }
   }))));

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/duotone-picker/duotone-picker.js"],"names":["DuotonePicker","clearable","unsetable","colorPalette","duotonePalette","disableCustomColors","disableCustomDuotone","value","onChange","defaultDark","defaultLight","isUnset","unsetOption","undefined","options","map","colors","slug","name","style","background","color","tooltipText","label","isSelected","newColors","newValue","length"],"mappings":";;;;;;;;;AAQA;;AALA;;AAMA;;AAKA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AApBA;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;~~AASA~~,SAASA,aAAT,~~OASI~~;AAAA,~~MAToB~~;AACvBC,IAAAA,SAAS,GAAG,IADW;AAEvBC,IAAAA,SAAS,GAAG,IAFW;AAGvBC,IAAAA,YAHuB;AAIvBC,IAAAA,cAJuB;AAKvBC,IAAAA,mBALuB;AAMvBC,IAAAA,oBANuB;AAOvBC,IAAAA,KAPuB;AAQvBC,IAAAA;AARuB,~~GASpB~~;~~AACH~~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~~AAIAL~~,MAAAA,QAAQ,CAAEkB,QAAF,CAAR;AACA;~~AAlBF~~,IARF,CADD,CAZD,CADD;~~AA+CA~~;;eAEc1B,a","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';\n\nfunction DuotonePicker( {\n\tclearable = true,\n\tunsetable = true,\n\tcolorPalette,\n\tduotonePalette,\n\tdisableCustomColors,\n\tdisableCustomDuotone,\n\tvalue,\n\tonChange,\n} ) {\n\tconst [ defaultDark, defaultLight ] = useMemo(\n\t\t() => getDefaultColors( colorPalette ),\n\t\t[ colorPalette ]\n\t);\n\n\tconst isUnset = value === '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={ __( 'Unset' ) }\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 options = 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\treturn (\n\t\t<CircularOptionPicker\n\t\t\toptions={ unsetable ? [ unsetOption, ...options ] : 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={ 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\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"]}
1	+ {"version":3,"sources":["@wordpress/components/src/duotone-picker/duotone-picker.tsx"],"names":["DuotonePicker","clearable","unsetable","colorPalette","duotonePalette","disableCustomColors","disableCustomDuotone","value","onChange","defaultDark","defaultLight","isUnset","unsetOption","undefined","options","map","colors","slug","name","style","background","color","tooltipText","label","isSelected","newColors","newValue","length"],"mappings":"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","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\tclearable = true,\n\tunsetable = true,\n\tcolorPalette,\n\tduotonePalette,\n\tdisableCustomColors,\n\tdisableCustomDuotone,\n\tvalue,\n\tonChange,\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\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={ __( 'Unset' ) }\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 options = 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\treturn (\n\t\t<CircularOptionPicker\n\t\t\toptions={ unsetable ? [ unsetOption, ...options ] : 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={ 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"]}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/duotone-picker/duotone-swatch.js"],"names":["DuotoneSwatch","values","swatch"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AACA;;AACA;;AAVA;AACA;AACA;;AAGA;AACA;AACA;~~AAKA~~,SAASA,aAAT,~~OAAqC~~;AAAA,~~MAAb~~;AAAEC,IAAAA;AAAF,~~GAAa~~;~~AACpC~~,SAAOA,MAAM,GACZ,4BAAC,uBAAD;AACC,IAAA,UAAU,EAAG,qCAA0BA,MAA1B,EAAkC,QAAlC;AADd,IADY,GAKZ,4BAAC,aAAD;AAAM,IAAA,IAAI,EAAGC;AAAb,IALD;AAOA;;eAEcF,a","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';\n\nfunction DuotoneSwatch( { values } ) {\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"]}
1	+ {"version":3,"sources":["@wordpress/components/src/duotone-picker/duotone-swatch.tsx"],"names":["DuotoneSwatch","values","swatch"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AACA;;AACA;;AAVA;AACA;AACA;;AAGA;AACA;AACA;AAMA,SAASA,aAAT,OAAyD;AAAA,MAAjC;AAAEC,IAAAA;AAAF,GAAiC;AACxD,SAAOA,MAAM,GACZ,4BAAC,uBAAD;AACC,IAAA,UAAU,EAAG,qCAA0BA,MAA1B,EAAkC,QAAlC;AADd,IADY,GAKZ,4BAAC,aAAD;AAAM,IAAA,IAAI,EAAGC;AAAb,IALD;AAOA;;eAEcF,a","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"]}

package/build/duotone-picker/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/duotone-picker/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;;AACA","sourcesContent":["export { default as DuotonePicker } from './duotone-picker';\nexport { default as DuotoneSwatch } from './duotone-swatch';\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/duotone-picker/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;;AACA","sourcesContent":["export { default as DuotonePicker } from './duotone-picker';\nexport { default as DuotoneSwatch } from './duotone-swatch';\n"]}

package/build/duotone-picker/types.js ADDED Viewed

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=types.js.map

package/build/duotone-picker/types.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}

package/build/duotone-picker/utils.js CHANGED Viewed

@@ -30,9 +30,9 @@ var _names = _interopRequireDefault(require("colord/plugins/names"));
 /**
  * Calculate the brightest and darkest values from a color palette.
  *
- * @param {Object[]} palette Color palette for the theme.
+ * @param palette Color palette for the theme.
  *
- * @return {string[]} Tuple of the darkest color and brightest color.
+ * @return Tuple of the darkest color and brightest color.
  */
 function getDefaultColors(palette) {
@@ -50,9 +50,11 @@ function getDefaultColors(palette) {
     let [min, max] = _ref2;
     return [current.brightness <= min.brightness ? current : min, current.brightness >= max.brightness ? current : max];
   }, [{
-    brightness: 1
+    brightness: 1,
+    color: ''
   }, {
-    brightness: 0
+    brightness: 0,
+    color: ''
   }]).map(_ref3 => {
     let {
       color
@@ -63,10 +65,10 @@ function getDefaultColors(palette) {
 /**
  * Generate a duotone gradient from a list of colors.
  *
- * @param {string[]} colors CSS color strings.
- * @param {string}   angle  CSS gradient angle.
+ * @param colors CSS color strings.
+ * @param angle  CSS gradient angle.
  *
- * @return {string} CSS gradient string for the duotone swatch.
+ * @return  CSS gradient string for the duotone swatch.
  */
@@ -80,9 +82,9 @@ function getGradientFromCSSColors() {
 /**
  * Convert a color array to an array of color stops.
  *
- * @param {string[]} colors CSS colors array
+ * @param colors CSS colors array
  *
- * @return {Object[]} Color stop information.
+ * @return Color stop information.
  */
@@ -95,9 +97,9 @@ function getColorStopsFromColors(colors) {
 /**
  * Convert a color stop array to an array colors.
  *
- * @param {Object[]} colorStops Color stop information.
+ * @param colorStops Color stop information.
  *
- * @return {string[]} CSS colors array.
+ * @return CSS colors array.
  */

package/build/duotone-picker/utils.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/duotone-picker/utils.js"],"names":["namesPlugin","getDefaultColors","palette","length","map","color","brightness","reduce","current","min","max","getGradientFromCSSColors","colors","angle","l","stops","c","i","join","getColorStopsFromColors","position","getColorsFromColorStops","colorStops"],"mappings":";;;;;;;;;;;;AAGA;;AACA;;AAJA;AACA;AACA;~~AAIA~~,oBAAQ,CAAEA,cAAF,CAAR;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AACO,SAASC,gBAAT,~~CAA2BC~~,~~OAA3B~~,~~EAAqC~~;~~AAC3C~~;AACA,MAAK,CAAEA,OAAF,IAAaA,OAAO,CAACC,MAAR,GAAiB,CAAnC,EAAuC,OAAO,CAAE,MAAF,EAAU,MAAV,CAAP;AAEvC,SAAOD,OAAO,CACZE,GADK,CACA;AAAA,QAAE;AAAEC,MAAAA;AAAF,KAAF;AAAA,WAAmB;AACxBA,MAAAA,KADwB;AAExBC,MAAAA,UAAU,EAAE,oBAAQD,KAAR,EAAgBC,UAAhB;AAFY,KAAnB;AAAA,GADA,EAKLC,MALK,CAML,QAAgBC,OAAhB,KAA6B;AAAA,QAA3B,CAAEC,GAAF,EAAOC,GAAP,CAA2B;AAC5B,WAAO,CACNF,OAAO,CAACF,UAAR,IAAsBG,GAAG,CAACH,UAA1B,GAAuCE,OAAvC,GAAiDC,GAD3C,EAEND,OAAO,CAACF,UAAR,IAAsBI,GAAG,CAACJ,UAA1B,GAAuCE,OAAvC,GAAiDE,GAF3C,CAAP;AAIA,GAXI,EAYL,~~CAAE~~;AAAEJ,IAAAA,UAAU,EAAE;~~AAAd~~,~~GAAF~~,~~EAAqB~~;~~AAAEA~~,IAAAA,UAAU,EAAE;~~AAAd~~,~~GAArB~~,CAZK,~~EAcLF~~,~~GAdK~~,~~CAcA~~;AAAA,QAAE;AAAEC,MAAAA;AAAF,KAAF;AAAA,WAAiBA,KAAjB;AAAA,~~GAdA~~,CAAP;~~AAeA~~;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASM,wBAAT,~~GAAkE~~;AAAA,~~MAA/BC~~,~~MAA+B~~,~~uEAAtB~~,~~EAAsB~~;AAAA,~~MAAlBC~~,~~KAAkB~~,~~uEAAV~~,~~OAAU~~;~~AACxE~~,QAAMC,CAAC,GAAG,MAAMF,MAAM,CAACT,MAAvB;AAEA,QAAMY,KAAK,GAAGH,MAAM,CAClBR,GADY,CACP,CAAEY,CAAF,EAAKC,CAAL,KAAa,GAAGD,CAAG,IAAIC,CAAC,GAAGH,CAAG,MAAME,CAAG,IAAI,CAAEC,CAAC,GAAG,CAAN,IAAYH,CAAG,GADnD,EAEZI,IAFY,CAEN,IAFM,CAAd;AAIA,SAAQ,oBAAoBL,KAAO,KAAKE,KAAO,IAA/C;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASI,uBAAT,CAAkCP,MAAlC,~~EAA2C~~;~~AACjD~~,SAAOA,MAAM,CAACR,GAAP,CAAY,CAAEC,KAAF,EAASY,CAAT,MAAkB;AACpCG,IAAAA,QAAQ,EAAIH,CAAC,GAAG,GAAN,IAAgBL,MAAM,CAACT,MAAP,GAAgB,CAAhC,CAD0B;AAEpCE,IAAAA;AAFoC,GAAlB,CAAZ,CAAP;AAIA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASgB,uBAAT,~~GAAoD~~;AAAA,~~MAAlBC~~,~~UAAkB~~,~~uEAAL~~,~~EAAK~~;~~AAC1D~~,SAAOA,UAAU,CAAClB,GAAX,CAAgB;AAAA,QAAE;AAAEC,MAAAA;AAAF,KAAF;AAAA,WAAiBA,KAAjB;AAAA,GAAhB,CAAP;AACA","sourcesContent":["/*\n External dependencies\n /\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\n\nextend( [ namesPlugin ] );\n\n/\n Object representation for a color.\n \n @typedef {Object} RGBColor\n * @property {number} r Red component of the color in the range [0,1].\n * @property {number} g Green component of the color in the range [0,1].\n * @property {number} b Blue component of the color in the range [0,1].\n /\n\n/\n Calculate the brightest and darkest values from a color palette.\n \n @param ~~{Object[]}~~ palette Color palette for the theme.\n \n @return ~~{string[]}~~ Tuple of the darkest color and brightest color.\n /\nexport function getDefaultColors( ~~palette~~ ) {\n\t// A default dark and light color are required.\n\tif ( ! palette \|\| palette.length < 2 ) return [ '#000', '#fff' ];\n\n\treturn palette\n\t\t.map( ( { color } ) => ( {\n\t\t\tcolor,\n\t\t\tbrightness: colord( color ).brightness(),\n\t\t} ) )\n\t\t.reduce(\n\t\t\t( [ min, max ], current ) => {\n\t\t\t\treturn [\n\t\t\t\t\tcurrent.brightness <= min.brightness ? current : min,\n\t\t\t\t\tcurrent.brightness >= max.brightness ? current : max,\n\t\t\t\t];\n\t\t\t},\n\t\t\t[ { brightness: 1 }, { brightness: 0 } ]\n\t\t)\n\t\t.map( ( { color } ) => color );\n}\n\n/\n Generate a duotone gradient from a list of colors.\n \n @param ~~{string[]}~~ colors CSS color strings.\n * @param ~~{string}~~ angle CSS gradient angle.\n \n @return ~~{string}~~ CSS gradient string for the duotone swatch.\n /\nexport function getGradientFromCSSColors( ~~colors~~ = [], ~~angle~~ = '90deg' ) {\n\tconst l = 100 / colors.length;\n\n\tconst stops = colors\n\t\t.map( ( c, i ) => `${ c } ${ i l }%, ${ c } ${ ( i + 1 ) * l }%` )\n\t\t.join( ', ' );\n\n\treturn `linear-gradient( ${ angle }, ${ stops } )`;\n}\n\n/*\n Convert a color array to an array of color stops.\n \n @param ~~{string[]}~~ colors CSS colors array\n \n @return ~~{Object[]}~~ Color stop information.\n /\nexport function getColorStopsFromColors( colors ) {\n\treturn colors.map( ( color, i ) => ( {\n\t\tposition: ( i 100 ) / ( colors.length - 1 ),\n\t\tcolor,\n\t} ) );\n}\n\n/*\n Convert a color stop array to an array colors.\n \n @param ~~{Object[]}~~ colorStops Color stop information.\n \n @return ~~{string[]}~~ CSS colors array.\n */\nexport function getColorsFromColorStops( ~~colorStops~~ = [] ) {\n\treturn colorStops.map( ( { color } ) => color );\n}\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/duotone-picker/utils.ts"],"names":["namesPlugin","getDefaultColors","palette","length","map","color","brightness","reduce","current","min","max","getGradientFromCSSColors","colors","angle","l","stops","c","i","join","getColorStopsFromColors","position","getColorsFromColorStops","colorStops"],"mappings":";;;;;;;;;;;;AAGA;;AACA;;AAJA;AACA;AACA;AASA,oBAAQ,CAAEA,cAAF,CAAR;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AACO,SAASC,gBAAT,CACNC,OADM,EAEL;AACD;AACA,MAAK,CAAEA,OAAF,IAAaA,OAAO,CAACC,MAAR,GAAiB,CAAnC,EAAuC,OAAO,CAAE,MAAF,EAAU,MAAV,CAAP;AAEvC,SAAOD,OAAO,CACZE,GADK,CACA;AAAA,QAAE;AAAEC,MAAAA;AAAF,KAAF;AAAA,WAAmB;AACxBA,MAAAA,KADwB;AAExBC,MAAAA,UAAU,EAAE,oBAAQD,KAAR,EAAgBC,UAAhB;AAFY,KAAnB;AAAA,GADA,EAKLC,MALK,CAML,QAAgBC,OAAhB,KAA6B;AAAA,QAA3B,CAAEC,GAAF,EAAOC,GAAP,CAA2B;AAC5B,WAAO,CACNF,OAAO,CAACF,UAAR,IAAsBG,GAAG,CAACH,UAA1B,GAAuCE,OAAvC,GAAiDC,GAD3C,EAEND,OAAO,CAACF,UAAR,IAAsBI,GAAG,CAACJ,UAA1B,GAAuCE,OAAvC,GAAiDE,GAF3C,CAAP;AAIA,GAXI,EAYL,CACC;AAAEJ,IAAAA,UAAU,EAAE,CAAd;AAAiBD,IAAAA,KAAK,EAAE;AAAxB,GADD,EAEC;AAAEC,IAAAA,UAAU,EAAE,CAAd;AAAiBD,IAAAA,KAAK,EAAE;AAAxB,GAFD,CAZK,EAiBLD,GAjBK,CAiBA;AAAA,QAAE;AAAEC,MAAAA;AAAF,KAAF;AAAA,WAAiBA,KAAjB;AAAA,GAjBA,CAAP;AAkBA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASM,wBAAT,GAGL;AAAA,MAFDC,MAEC,uEAFkB,EAElB;AAAA,MADDC,KACC,uEADO,OACP;AACD,QAAMC,CAAC,GAAG,MAAMF,MAAM,CAACT,MAAvB;AAEA,QAAMY,KAAK,GAAGH,MAAM,CAClBR,GADY,CACP,CAAEY,CAAF,EAAKC,CAAL,KAAa,GAAGD,CAAG,IAAIC,CAAC,GAAGH,CAAG,MAAME,CAAG,IAAI,CAAEC,CAAC,GAAG,CAAN,IAAYH,CAAG,GADnD,EAEZI,IAFY,CAEN,IAFM,CAAd;AAIA,SAAQ,oBAAoBL,KAAO,KAAKE,KAAO,IAA/C;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASI,uBAAT,CAAkCP,MAAlC,EAAqD;AAC3D,SAAOA,MAAM,CAACR,GAAP,CAAY,CAAEC,KAAF,EAASY,CAAT,MAAkB;AACpCG,IAAAA,QAAQ,EAAIH,CAAC,GAAG,GAAN,IAAgBL,MAAM,CAACT,MAAP,GAAgB,CAAhC,CAD0B;AAEpCE,IAAAA;AAFoC,GAAlB,CAAZ,CAAP;AAIA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASgB,uBAAT,GAEL;AAAA,MADDC,UACC,uEADmD,EACnD;AACD,SAAOA,UAAU,CAAClB,GAAX,CAAgB;AAAA,QAAE;AAAEC,MAAAA;AAAF,KAAF;AAAA,WAAiBA,KAAjB;AAAA,GAAhB,CAAP;AACA","sourcesContent":["/*\n External dependencies\n /\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\n\n/\n Internal dependencies\n /\nimport type { DuotonePickerProps } from './types';\n\nextend( [ namesPlugin ] );\n\n/\n Object representation for a color.\n \n @typedef {Object} RGBColor\n * @property {number} r Red component of the color in the range [0,1].\n * @property {number} g Green component of the color in the range [0,1].\n * @property {number} b Blue component of the color in the range [0,1].\n /\n\n/\n Calculate the brightest and darkest values from a color palette.\n \n @param palette Color palette for the theme.\n \n @return Tuple of the darkest color and brightest color.\n /\nexport function getDefaultColors(\n\tpalette: DuotonePickerProps[ 'colorPalette' ]\n) {\n\t// A default dark and light color are required.\n\tif ( ! palette \|\| palette.length < 2 ) return [ '#000', '#fff' ];\n\n\treturn palette\n\t\t.map( ( { color } ) => ( {\n\t\t\tcolor,\n\t\t\tbrightness: colord( color ).brightness(),\n\t\t} ) )\n\t\t.reduce(\n\t\t\t( [ min, max ], current ) => {\n\t\t\t\treturn [\n\t\t\t\t\tcurrent.brightness <= min.brightness ? current : min,\n\t\t\t\t\tcurrent.brightness >= max.brightness ? current : max,\n\t\t\t\t];\n\t\t\t},\n\t\t\t[\n\t\t\t\t{ brightness: 1, color: '' },\n\t\t\t\t{ brightness: 0, color: '' },\n\t\t\t]\n\t\t)\n\t\t.map( ( { color } ) => color );\n}\n\n/\n Generate a duotone gradient from a list of colors.\n \n @param colors CSS color strings.\n * @param angle CSS gradient angle.\n \n @return CSS gradient string for the duotone swatch.\n /\nexport function getGradientFromCSSColors(\n\tcolors: string[] = [],\n\tangle = '90deg'\n) {\n\tconst l = 100 / colors.length;\n\n\tconst stops = colors\n\t\t.map( ( c, i ) => `${ c } ${ i l }%, ${ c } ${ ( i + 1 ) * l }%` )\n\t\t.join( ', ' );\n\n\treturn `linear-gradient( ${ angle }, ${ stops } )`;\n}\n\n/*\n Convert a color array to an array of color stops.\n \n @param colors CSS colors array\n \n @return Color stop information.\n /\nexport function getColorStopsFromColors( colors: string[] ) {\n\treturn colors.map( ( color, i ) => ( {\n\t\tposition: ( i 100 ) / ( colors.length - 1 ),\n\t\tcolor,\n\t} ) );\n}\n\n/*\n Convert a color stop array to an array colors.\n \n @param colorStops Color stop information.\n \n @return CSS colors array.\n */\nexport function getColorsFromColorStops(\n\tcolorStops: { position: number; color: string }[] = []\n) {\n\treturn colorStops.map( ( { color } ) => color );\n}\n"]}

package/build/flex/flex/hook.js CHANGED Viewed

@@ -59,7 +59,7 @@ function useDeprecatedProps(props) {
 function useFlex(props) {
   const {
-    align = 'center',
+    align,
     className,
     direction: directionProp = 'row',
     expanded = true,
@@ -74,14 +74,14 @@ function useFlex(props) {
   const cx = (0, _utils.useCx)();
   const classes = (0, _element.useMemo)(() => {
     const base = /*#__PURE__*/(0, _react.css)({
-      alignItems: isColumn ? 'normal' : align,
+      alignItems: align !== null && align !== void 0 ? align : isColumn ? 'normal' : 'center',
       flexDirection: direction,
       flexWrap: wrap ? 'wrap' : undefined,
       gap: (0, _space.space)(gap),
       justifyContent: justify,
       height: isColumn && expanded ? '100%' : undefined,
       width: !isColumn && expanded ? '100%' : undefined
-    }, process.env.NODE_ENV === "production" ? "" : ";label:base;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZmxleC9mbGV4L2hvb2sudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBK0RlIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZmxleC9mbGV4L2hvb2sudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbi8qKlxuICogV29yZFByZXNzIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyB1c2VNZW1vIH0gZnJvbSAnQHdvcmRwcmVzcy9lbGVtZW50JztcbmltcG9ydCBkZXByZWNhdGVkIGZyb20gJ0B3b3JkcHJlc3MvZGVwcmVjYXRlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IHVzZUNvbnRleHRTeXN0ZW0sIFdvcmRQcmVzc0NvbXBvbmVudFByb3BzIH0gZnJvbSAnLi4vLi4vdWkvY29udGV4dCc7XG5pbXBvcnQgeyB1c2VSZXNwb25zaXZlVmFsdWUgfSBmcm9tICcuLi8uLi91aS91dGlscy91c2UtcmVzcG9uc2l2ZS12YWx1ZSc7XG5pbXBvcnQgeyBzcGFjZSB9IGZyb20gJy4uLy4uL3VpL3V0aWxzL3NwYWNlJztcbmltcG9ydCAqIGFzIHN0eWxlcyBmcm9tICcuLi9zdHlsZXMnO1xuaW1wb3J0IHsgdXNlQ3ggfSBmcm9tICcuLi8uLi91dGlscyc7XG5pbXBvcnQgdHlwZSB7IEZsZXhQcm9wcyB9IGZyb20gJy4uL3R5cGVzJztcblxuZnVuY3Rpb24gdXNlRGVwcmVjYXRlZFByb3BzKFxuXHRwcm9wczogV29yZFByZXNzQ29tcG9uZW50UHJvcHM8IEZsZXhQcm9wcywgJ2RpdicgPlxuKTogV29yZFByZXNzQ29tcG9uZW50UHJvcHM8IEZsZXhQcm9wcywgJ2RpdicgPiB7XG5cdGNvbnN0IHsgaXNSZXZlcnNlZCwgLi4ub3RoZXJQcm9wcyB9ID0gcHJvcHM7XG5cblx0aWYgKCB0eXBlb2YgaXNSZXZlcnNlZCAhPT0gJ3VuZGVmaW5lZCcgKSB7XG5cdFx0ZGVwcmVjYXRlZCggJ0ZsZXggaXNSZXZlcnNlZCcsIHtcblx0XHRcdGFsdGVybmF0aXZlOiAnRmxleCBkaXJlY3Rpb249XCJyb3ctcmV2ZXJzZVwiIG9yIFwiY29sdW1uLXJldmVyc2VcIicsXG5cdFx0XHRzaW5jZTogJzUuOScsXG5cdFx0fSApO1xuXHRcdHJldHVybiB7XG5cdFx0XHQuLi5vdGhlclByb3BzLFxuXHRcdFx0ZGlyZWN0aW9uOiBpc1JldmVyc2VkID8gJ3Jvdy1yZXZlcnNlJyA6ICdyb3cnLFxuXHRcdH07XG5cdH1cblxuXHRyZXR1cm4gb3RoZXJQcm9wcztcbn1cblxuZXhwb3J0IGZ1bmN0aW9uIHVzZUZsZXgoIHByb3BzOiBXb3JkUHJlc3NDb21wb25lbnRQcm9wczwgRmxleFByb3BzLCAnZGl2JyA+ICkge1xuXHRjb25zdCB7XG5cdFx0YWxpZ24gPSAnY2VudGVyJyxcblx0XHRjbGFzc05hbWUsXG5cdFx0ZGlyZWN0aW9uOiBkaXJlY3Rpb25Qcm9wID0gJ3JvdycsXG5cdFx0ZXhwYW5kZWQgPSB0cnVlLFxuXHRcdGdhcCA9IDIsXG5cdFx0anVzdGlmeSA9ICdzcGFjZS1iZXR3ZWVuJyxcblx0XHR3cmFwID0gZmFsc2UsXG5cdFx0Li4ub3RoZXJQcm9wc1xuXHR9ID0gdXNlQ29udGV4dFN5c3RlbSggdXNlRGVwcmVjYXRlZFByb3BzKCBwcm9wcyApLCAnRmxleCcgKTtcblxuXHRjb25zdCBkaXJlY3Rpb25Bc0FycmF5ID0gQXJyYXkuaXNBcnJheSggZGlyZWN0aW9uUHJvcCApXG5cdFx0PyBkaXJlY3Rpb25Qcm9wXG5cdFx0OiBbIGRpcmVjdGlvblByb3AgXTtcblx0Y29uc3QgZGlyZWN0aW9uID0gdXNlUmVzcG9uc2l2ZVZhbHVlKCBkaXJlY3Rpb25Bc0FycmF5ICk7XG5cblx0Y29uc3QgaXNDb2x1bW4gPVxuXHRcdHR5cGVvZiBkaXJlY3Rpb24gPT09ICdzdHJpbmcnICYmICEhIGRpcmVjdGlvbi5pbmNsdWRlcyggJ2NvbHVtbicgKTtcblxuXHRjb25zdCBjeCA9IHVzZUN4KCk7XG5cblx0Y29uc3QgY2xhc3NlcyA9IHVzZU1lbW8oICgpID0+IHtcblx0XHRjb25zdCBiYXNlID0gY3NzKCB7XG5cdFx0XHRhbGlnbkl0ZW1zOiBpc0NvbHVtbiA/ICdub3JtYWwnIDogYWxpZ24sXG5cdFx0XHRmbGV4RGlyZWN0aW9uOiBkaXJlY3Rpb24sXG5cdFx0XHRmbGV4V3JhcDogd3JhcCA/ICd3cmFwJyA6IHVuZGVmaW5lZCxcblx0XHRcdGdhcDogc3BhY2UoIGdhcCApLFxuXHRcdFx0anVzdGlmeUNvbnRlbnQ6IGp1c3RpZnksXG5cdFx0XHRoZWlnaHQ6IGlzQ29sdW1uICYmIGV4cGFuZGVkID8gJzEwMCUnIDogdW5kZWZpbmVkLFxuXHRcdFx0d2lkdGg6ICEgaXNDb2x1bW4gJiYgZXhwYW5kZWQgPyAnMTAwJScgOiB1bmRlZmluZWQsXG5cdFx0fSApO1xuXG5cdFx0cmV0dXJuIGN4KFxuXHRcdFx0c3R5bGVzLkZsZXgsXG5cdFx0XHRiYXNlLFxuXHRcdFx0aXNDb2x1bW4gPyBzdHlsZXMuSXRlbXNDb2x1bW4gOiBzdHlsZXMuSXRlbXNSb3csXG5cdFx0XHRjbGFzc05hbWVcblx0XHQpO1xuXHR9LCBbXG5cdFx0YWxpZ24sXG5cdFx0Y2xhc3NOYW1lLFxuXHRcdGN4LFxuXHRcdGRpcmVjdGlvbixcblx0XHRleHBhbmRlZCxcblx0XHRnYXAsXG5cdFx0aXNDb2x1bW4sXG5cdFx0anVzdGlmeSxcblx0XHR3cmFwLFxuXHRdICk7XG5cblx0cmV0dXJuIHsgLi4ub3RoZXJQcm9wcywgY2xhc3NOYW1lOiBjbGFzc2VzLCBpc0NvbHVtbiB9O1xufVxuIl19 */");
+    }, process.env.NODE_ENV === "production" ? "" : ";label:base;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZmxleC9mbGV4L2hvb2sudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBK0RlIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZmxleC9mbGV4L2hvb2sudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbi8qKlxuICogV29yZFByZXNzIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyB1c2VNZW1vIH0gZnJvbSAnQHdvcmRwcmVzcy9lbGVtZW50JztcbmltcG9ydCBkZXByZWNhdGVkIGZyb20gJ0B3b3JkcHJlc3MvZGVwcmVjYXRlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IHVzZUNvbnRleHRTeXN0ZW0sIFdvcmRQcmVzc0NvbXBvbmVudFByb3BzIH0gZnJvbSAnLi4vLi4vdWkvY29udGV4dCc7XG5pbXBvcnQgeyB1c2VSZXNwb25zaXZlVmFsdWUgfSBmcm9tICcuLi8uLi91aS91dGlscy91c2UtcmVzcG9uc2l2ZS12YWx1ZSc7XG5pbXBvcnQgeyBzcGFjZSB9IGZyb20gJy4uLy4uL3VpL3V0aWxzL3NwYWNlJztcbmltcG9ydCAqIGFzIHN0eWxlcyBmcm9tICcuLi9zdHlsZXMnO1xuaW1wb3J0IHsgdXNlQ3ggfSBmcm9tICcuLi8uLi91dGlscyc7XG5pbXBvcnQgdHlwZSB7IEZsZXhQcm9wcyB9IGZyb20gJy4uL3R5cGVzJztcblxuZnVuY3Rpb24gdXNlRGVwcmVjYXRlZFByb3BzKFxuXHRwcm9wczogV29yZFByZXNzQ29tcG9uZW50UHJvcHM8IEZsZXhQcm9wcywgJ2RpdicgPlxuKTogV29yZFByZXNzQ29tcG9uZW50UHJvcHM8IEZsZXhQcm9wcywgJ2RpdicgPiB7XG5cdGNvbnN0IHsgaXNSZXZlcnNlZCwgLi4ub3RoZXJQcm9wcyB9ID0gcHJvcHM7XG5cblx0aWYgKCB0eXBlb2YgaXNSZXZlcnNlZCAhPT0gJ3VuZGVmaW5lZCcgKSB7XG5cdFx0ZGVwcmVjYXRlZCggJ0ZsZXggaXNSZXZlcnNlZCcsIHtcblx0XHRcdGFsdGVybmF0aXZlOiAnRmxleCBkaXJlY3Rpb249XCJyb3ctcmV2ZXJzZVwiIG9yIFwiY29sdW1uLXJldmVyc2VcIicsXG5cdFx0XHRzaW5jZTogJzUuOScsXG5cdFx0fSApO1xuXHRcdHJldHVybiB7XG5cdFx0XHQuLi5vdGhlclByb3BzLFxuXHRcdFx0ZGlyZWN0aW9uOiBpc1JldmVyc2VkID8gJ3Jvdy1yZXZlcnNlJyA6ICdyb3cnLFxuXHRcdH07XG5cdH1cblxuXHRyZXR1cm4gb3RoZXJQcm9wcztcbn1cblxuZXhwb3J0IGZ1bmN0aW9uIHVzZUZsZXgoIHByb3BzOiBXb3JkUHJlc3NDb21wb25lbnRQcm9wczwgRmxleFByb3BzLCAnZGl2JyA+ICkge1xuXHRjb25zdCB7XG5cdFx0YWxpZ24sXG5cdFx0Y2xhc3NOYW1lLFxuXHRcdGRpcmVjdGlvbjogZGlyZWN0aW9uUHJvcCA9ICdyb3cnLFxuXHRcdGV4cGFuZGVkID0gdHJ1ZSxcblx0XHRnYXAgPSAyLFxuXHRcdGp1c3RpZnkgPSAnc3BhY2UtYmV0d2VlbicsXG5cdFx0d3JhcCA9IGZhbHNlLFxuXHRcdC4uLm90aGVyUHJvcHNcblx0fSA9IHVzZUNvbnRleHRTeXN0ZW0oIHVzZURlcHJlY2F0ZWRQcm9wcyggcHJvcHMgKSwgJ0ZsZXgnICk7XG5cblx0Y29uc3QgZGlyZWN0aW9uQXNBcnJheSA9IEFycmF5LmlzQXJyYXkoIGRpcmVjdGlvblByb3AgKVxuXHRcdD8gZGlyZWN0aW9uUHJvcFxuXHRcdDogWyBkaXJlY3Rpb25Qcm9wIF07XG5cdGNvbnN0IGRpcmVjdGlvbiA9IHVzZVJlc3BvbnNpdmVWYWx1ZSggZGlyZWN0aW9uQXNBcnJheSApO1xuXG5cdGNvbnN0IGlzQ29sdW1uID1cblx0XHR0eXBlb2YgZGlyZWN0aW9uID09PSAnc3RyaW5nJyAmJiAhISBkaXJlY3Rpb24uaW5jbHVkZXMoICdjb2x1bW4nICk7XG5cblx0Y29uc3QgY3ggPSB1c2VDeCgpO1xuXG5cdGNvbnN0IGNsYXNzZXMgPSB1c2VNZW1vKCAoKSA9PiB7XG5cdFx0Y29uc3QgYmFzZSA9IGNzcygge1xuXHRcdFx0YWxpZ25JdGVtczogYWxpZ24gPz8gKCBpc0NvbHVtbiA/ICdub3JtYWwnIDogJ2NlbnRlcicgKSxcblx0XHRcdGZsZXhEaXJlY3Rpb246IGRpcmVjdGlvbixcblx0XHRcdGZsZXhXcmFwOiB3cmFwID8gJ3dyYXAnIDogdW5kZWZpbmVkLFxuXHRcdFx0Z2FwOiBzcGFjZSggZ2FwICksXG5cdFx0XHRqdXN0aWZ5Q29udGVudDoganVzdGlmeSxcblx0XHRcdGhlaWdodDogaXNDb2x1bW4gJiYgZXhwYW5kZWQgPyAnMTAwJScgOiB1bmRlZmluZWQsXG5cdFx0XHR3aWR0aDogISBpc0NvbHVtbiAmJiBleHBhbmRlZCA/ICcxMDAlJyA6IHVuZGVmaW5lZCxcblx0XHR9ICk7XG5cblx0XHRyZXR1cm4gY3goXG5cdFx0XHRzdHlsZXMuRmxleCxcblx0XHRcdGJhc2UsXG5cdFx0XHRpc0NvbHVtbiA/IHN0eWxlcy5JdGVtc0NvbHVtbiA6IHN0eWxlcy5JdGVtc1Jvdyxcblx0XHRcdGNsYXNzTmFtZVxuXHRcdCk7XG5cdH0sIFtcblx0XHRhbGlnbixcblx0XHRjbGFzc05hbWUsXG5cdFx0Y3gsXG5cdFx0ZGlyZWN0aW9uLFxuXHRcdGV4cGFuZGVkLFxuXHRcdGdhcCxcblx0XHRpc0NvbHVtbixcblx0XHRqdXN0aWZ5LFxuXHRcdHdyYXAsXG5cdF0gKTtcblxuXHRyZXR1cm4geyAuLi5vdGhlclByb3BzLCBjbGFzc05hbWU6IGNsYXNzZXMsIGlzQ29sdW1uIH07XG59XG4iXX0= */");
     return cx(styles.Flex, base, isColumn ? styles.ItemsColumn : styles.ItemsRow, className);
   }, [align, className, cx, direction, expanded, gap, isColumn, justify, wrap]);
   return { ...otherProps,

package/build/flex/flex/hook.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/flex/flex/hook.ts"],"names":["useDeprecatedProps","props","isReversed","otherProps","alternative","since","direction","useFlex","align","className","directionProp","expanded","gap","justify","wrap","directionAsArray","Array","isArray","isColumn","includes","cx","classes","base","alignItems","flexDirection","flexWrap","undefined","justifyContent","height","width","styles","Flex","ItemsColumn","ItemsRow"],"mappings":";;;;;;;;;AAGA;;AAKA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AACA;;;;;;AAlBA;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;AAQA,SAASA,kBAAT,CACCC,KADD,EAE+C;AAC9C,QAAM;AAAEC,IAAAA,UAAF;AAAc,OAAGC;AAAjB,MAAgCF,KAAtC;;AAEA,MAAK,OAAOC,UAAP,KAAsB,WAA3B,EAAyC;AACxC,6BAAY,iBAAZ,EAA+B;AAC9BE,MAAAA,WAAW,EAAE,kDADiB;AAE9BC,MAAAA,KAAK,EAAE;AAFuB,KAA/B;AAIA,WAAO,EACN,GAAGF,UADG;AAENG,MAAAA,SAAS,EAAEJ,UAAU,GAAG,aAAH,GAAmB;AAFlC,KAAP;AAIA;;AAED,SAAOC,UAAP;AACA;;AAEM,SAASI,OAAT,CAAkBN,KAAlB,EAAuE;AAC7E,QAAM;AACLO,IAAAA,~~KAAK,GAAG,QADH~~;AAELC,IAAAA,SAFK;AAGLH,IAAAA,SAAS,EAAEI,aAAa,GAAG,KAHtB;AAILC,IAAAA,QAAQ,GAAG,IAJN;AAKLC,IAAAA,GAAG,GAAG,CALD;AAMLC,IAAAA,OAAO,GAAG,eANL;AAOLC,IAAAA,IAAI,GAAG,KAPF;AAQL,OAAGX;AARE,MASF,+BAAkBH,kBAAkB,CAAEC,KAAF,CAApC,EAA+C,MAA/C,CATJ;AAWA,QAAMc,gBAAgB,GAAGC,KAAK,CAACC,OAAN,CAAeP,aAAf,IACtBA,aADsB,GAEtB,CAAEA,aAAF,CAFH;AAGA,QAAMJ,SAAS,GAAG,4CAAoBS,gBAApB,CAAlB;AAEA,QAAMG,QAAQ,GACb,OAAOZ,SAAP,KAAqB,QAArB,IAAiC,CAAC,CAAEA,SAAS,CAACa,QAAV,CAAoB,QAApB,CADrC;AAGA,QAAMC,EAAE,GAAG,mBAAX;AAEA,QAAMC,OAAO,GAAG,sBAAS,MAAM;AAC9B,UAAMC,IAAI,gBAAG,gBAAK;AACjBC,MAAAA,UAAU,~~EAAEL~~,QAAQ,GAAG,QAAH,~~GAAcV~~,~~KADjB~~;~~AAEjBgB~~,MAAAA,aAAa,EAAElB,SAFE;AAGjBmB,MAAAA,QAAQ,EAAEX,IAAI,GAAG,MAAH,GAAYY,SAHT;AAIjBd,MAAAA,GAAG,EAAE,kBAAOA,GAAP,CAJY;AAKjBe,MAAAA,cAAc,EAAEd,OALC;AAMjBe,MAAAA,MAAM,EAAEV,QAAQ,IAAIP,QAAZ,GAAuB,MAAvB,GAAgCe,SANvB;AAOjBG,MAAAA,KAAK,EAAE,CAAEX,QAAF,IAAcP,QAAd,GAAyB,MAAzB,GAAkCe;AAPxB,KAAL,~~0iHAAb~~;AAUA,WAAON,EAAE,CACRU,MAAM,CAACC,IADC,EAERT,IAFQ,EAGRJ,QAAQ,GAAGY,MAAM,CAACE,WAAV,GAAwBF,MAAM,CAACG,QAH/B,EAIRxB,SAJQ,CAAT;AAMA,GAjBe,EAiBb,CACFD,KADE,EAEFC,SAFE,EAGFW,EAHE,EAIFd,SAJE,EAKFK,QALE,EAMFC,GANE,EAOFM,QAPE,EAQFL,OARE,EASFC,IATE,CAjBa,CAAhB;AA6BA,SAAO,EAAE,GAAGX,UAAL;AAAiBM,IAAAA,SAAS,EAAEY,OAA5B;AAAqCH,IAAAA;AAArC,GAAP;AACA","sourcesContent":["/*\n External dependencies\n /\nimport { css } from '@emotion/react';\n\n/\n WordPress dependencies\n /\nimport { useMemo } from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\n\n/\n Internal dependencies\n /\nimport { useContextSystem, WordPressComponentProps } from '../../ui/context';\nimport { useResponsiveValue } from '../../ui/utils/use-responsive-value';\nimport { space } from '../../ui/utils/space';\nimport as styles from '../styles';\nimport { useCx } from '../../utils';\nimport type { FlexProps } from '../types';\n\nfunction useDeprecatedProps(\n\tprops: WordPressComponentProps< FlexProps, 'div' >\n): WordPressComponentProps< FlexProps, 'div' > {\n\tconst { isReversed, ...otherProps } = props;\n\n\tif ( typeof isReversed !== 'undefined' ) {\n\t\tdeprecated( 'Flex isReversed', {\n\t\t\talternative: 'Flex direction=\"row-reverse\" or \"column-reverse\"',\n\t\t\tsince: '5.9',\n\t\t} );\n\t\treturn {\n\t\t\t...otherProps,\n\t\t\tdirection: isReversed ? 'row-reverse' : 'row',\n\t\t};\n\t}\n\n\treturn otherProps;\n}\n\nexport function useFlex( props: WordPressComponentProps< FlexProps, 'div' > ) {\n\tconst {\n\t\talign ~~= 'center'~~,\n\t\tclassName,\n\t\tdirection: directionProp = 'row',\n\t\texpanded = true,\n\t\tgap = 2,\n\t\tjustify = 'space-between',\n\t\twrap = false,\n\t\t...otherProps\n\t} = useContextSystem( useDeprecatedProps( props ), 'Flex' );\n\n\tconst directionAsArray = Array.isArray( directionProp )\n\t\t? directionProp\n\t\t: [ directionProp ];\n\tconst direction = useResponsiveValue( directionAsArray );\n\n\tconst isColumn =\n\t\ttypeof direction === 'string' && !! direction.includes( 'column' );\n\n\tconst cx = useCx();\n\n\tconst classes = useMemo( () => {\n\t\tconst base = css( {\n\t\t\talignItems: isColumn ? 'normal' : ~~align~~,\n\t\t\tflexDirection: direction,\n\t\t\tflexWrap: wrap ? 'wrap' : undefined,\n\t\t\tgap: space( gap ),\n\t\t\tjustifyContent: justify,\n\t\t\theight: isColumn && expanded ? '100%' : undefined,\n\t\t\twidth: ! isColumn && expanded ? '100%' : undefined,\n\t\t} );\n\n\t\treturn cx(\n\t\t\tstyles.Flex,\n\t\t\tbase,\n\t\t\tisColumn ? styles.ItemsColumn : styles.ItemsRow,\n\t\t\tclassName\n\t\t);\n\t}, [\n\t\talign,\n\t\tclassName,\n\t\tcx,\n\t\tdirection,\n\t\texpanded,\n\t\tgap,\n\t\tisColumn,\n\t\tjustify,\n\t\twrap,\n\t] );\n\n\treturn { ...otherProps, className: classes, isColumn };\n}\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/flex/flex/hook.ts"],"names":["useDeprecatedProps","props","isReversed","otherProps","alternative","since","direction","useFlex","align","className","directionProp","expanded","gap","justify","wrap","directionAsArray","Array","isArray","isColumn","includes","cx","classes","base","alignItems","flexDirection","flexWrap","undefined","justifyContent","height","width","styles","Flex","ItemsColumn","ItemsRow"],"mappings":";;;;;;;;;AAGA;;AAKA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AACA;;;;;;AAlBA;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;AAQA,SAASA,kBAAT,CACCC,KADD,EAE+C;AAC9C,QAAM;AAAEC,IAAAA,UAAF;AAAc,OAAGC;AAAjB,MAAgCF,KAAtC;;AAEA,MAAK,OAAOC,UAAP,KAAsB,WAA3B,EAAyC;AACxC,6BAAY,iBAAZ,EAA+B;AAC9BE,MAAAA,WAAW,EAAE,kDADiB;AAE9BC,MAAAA,KAAK,EAAE;AAFuB,KAA/B;AAIA,WAAO,EACN,GAAGF,UADG;AAENG,MAAAA,SAAS,EAAEJ,UAAU,GAAG,aAAH,GAAmB;AAFlC,KAAP;AAIA;;AAED,SAAOC,UAAP;AACA;;AAEM,SAASI,OAAT,CAAkBN,KAAlB,EAAuE;AAC7E,QAAM;AACLO,IAAAA,KADK;AAELC,IAAAA,SAFK;AAGLH,IAAAA,SAAS,EAAEI,aAAa,GAAG,KAHtB;AAILC,IAAAA,QAAQ,GAAG,IAJN;AAKLC,IAAAA,GAAG,GAAG,CALD;AAMLC,IAAAA,OAAO,GAAG,eANL;AAOLC,IAAAA,IAAI,GAAG,KAPF;AAQL,OAAGX;AARE,MASF,+BAAkBH,kBAAkB,CAAEC,KAAF,CAApC,EAA+C,MAA/C,CATJ;AAWA,QAAMc,gBAAgB,GAAGC,KAAK,CAACC,OAAN,CAAeP,aAAf,IACtBA,aADsB,GAEtB,CAAEA,aAAF,CAFH;AAGA,QAAMJ,SAAS,GAAG,4CAAoBS,gBAApB,CAAlB;AAEA,QAAMG,QAAQ,GACb,OAAOZ,SAAP,KAAqB,QAArB,IAAiC,CAAC,CAAEA,SAAS,CAACa,QAAV,CAAoB,QAApB,CADrC;AAGA,QAAMC,EAAE,GAAG,mBAAX;AAEA,QAAMC,OAAO,GAAG,sBAAS,MAAM;AAC9B,UAAMC,IAAI,gBAAG,gBAAK;AACjBC,MAAAA,UAAU,EAAEf,KAAF,aAAEA,KAAF,cAAEA,KAAF,GAAaU,QAAQ,GAAG,QAAH,GAAc,QAD5B;AAEjBM,MAAAA,aAAa,EAAElB,SAFE;AAGjBmB,MAAAA,QAAQ,EAAEX,IAAI,GAAG,MAAH,GAAYY,SAHT;AAIjBd,MAAAA,GAAG,EAAE,kBAAOA,GAAP,CAJY;AAKjBe,MAAAA,cAAc,EAAEd,OALC;AAMjBe,MAAAA,MAAM,EAAEV,QAAQ,IAAIP,QAAZ,GAAuB,MAAvB,GAAgCe,SANvB;AAOjBG,MAAAA,KAAK,EAAE,CAAEX,QAAF,IAAcP,QAAd,GAAyB,MAAzB,GAAkCe;AAPxB,KAAL,kjHAAb;AAUA,WAAON,EAAE,CACRU,MAAM,CAACC,IADC,EAERT,IAFQ,EAGRJ,QAAQ,GAAGY,MAAM,CAACE,WAAV,GAAwBF,MAAM,CAACG,QAH/B,EAIRxB,SAJQ,CAAT;AAMA,GAjBe,EAiBb,CACFD,KADE,EAEFC,SAFE,EAGFW,EAHE,EAIFd,SAJE,EAKFK,QALE,EAMFC,GANE,EAOFM,QAPE,EAQFL,OARE,EASFC,IATE,CAjBa,CAAhB;AA6BA,SAAO,EAAE,GAAGX,UAAL;AAAiBM,IAAAA,SAAS,EAAEY,OAA5B;AAAqCH,IAAAA;AAArC,GAAP;AACA","sourcesContent":["/*\n External dependencies\n /\nimport { css } from '@emotion/react';\n\n/\n WordPress dependencies\n /\nimport { useMemo } from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\n\n/\n Internal dependencies\n /\nimport { useContextSystem, WordPressComponentProps } from '../../ui/context';\nimport { useResponsiveValue } from '../../ui/utils/use-responsive-value';\nimport { space } from '../../ui/utils/space';\nimport as styles from '../styles';\nimport { useCx } from '../../utils';\nimport type { FlexProps } from '../types';\n\nfunction useDeprecatedProps(\n\tprops: WordPressComponentProps< FlexProps, 'div' >\n): WordPressComponentProps< FlexProps, 'div' > {\n\tconst { isReversed, ...otherProps } = props;\n\n\tif ( typeof isReversed !== 'undefined' ) {\n\t\tdeprecated( 'Flex isReversed', {\n\t\t\talternative: 'Flex direction=\"row-reverse\" or \"column-reverse\"',\n\t\t\tsince: '5.9',\n\t\t} );\n\t\treturn {\n\t\t\t...otherProps,\n\t\t\tdirection: isReversed ? 'row-reverse' : 'row',\n\t\t};\n\t}\n\n\treturn otherProps;\n}\n\nexport function useFlex( props: WordPressComponentProps< FlexProps, 'div' > ) {\n\tconst {\n\t\talign,\n\t\tclassName,\n\t\tdirection: directionProp = 'row',\n\t\texpanded = true,\n\t\tgap = 2,\n\t\tjustify = 'space-between',\n\t\twrap = false,\n\t\t...otherProps\n\t} = useContextSystem( useDeprecatedProps( props ), 'Flex' );\n\n\tconst directionAsArray = Array.isArray( directionProp )\n\t\t? directionProp\n\t\t: [ directionProp ];\n\tconst direction = useResponsiveValue( directionAsArray );\n\n\tconst isColumn =\n\t\ttypeof direction === 'string' && !! direction.includes( 'column' );\n\n\tconst cx = useCx();\n\n\tconst classes = useMemo( () => {\n\t\tconst base = css( {\n\t\t\talignItems: align ?? ( isColumn ? 'normal' : 'center' ),\n\t\t\tflexDirection: direction,\n\t\t\tflexWrap: wrap ? 'wrap' : undefined,\n\t\t\tgap: space( gap ),\n\t\t\tjustifyContent: justify,\n\t\t\theight: isColumn && expanded ? '100%' : undefined,\n\t\t\twidth: ! isColumn && expanded ? '100%' : undefined,\n\t\t} );\n\n\t\treturn cx(\n\t\t\tstyles.Flex,\n\t\t\tbase,\n\t\t\tisColumn ? styles.ItemsColumn : styles.ItemsRow,\n\t\t\tclassName\n\t\t);\n\t}, [\n\t\talign,\n\t\tclassName,\n\t\tcx,\n\t\tdirection,\n\t\texpanded,\n\t\tgap,\n\t\tisColumn,\n\t\tjustify,\n\t\twrap,\n\t] );\n\n\treturn { ...otherProps, className: classes, isColumn };\n}\n"]}

package/build/font-size-picker/index.js CHANGED Viewed

@@ -65,6 +65,7 @@ const UnforwardedFontSizePicker = (props, ref) => {
     disableCustomFontSizes = false,
     onChange,
     size = 'default',
+    units: unitsProp,
     value,
     withSlider = false,
     withReset = true
@@ -79,7 +80,7 @@ const UnforwardedFontSizePicker = (props, ref) => {
   }
   const units = (0, _unitControl.useCustomUnits)({
-    availableUnits: ['px', 'em', 'rem']
+    availableUnits: unitsProp || ['px', 'em', 'rem']
   });
   const shouldUseSelectControl = fontSizes.length > 5;
   const selectedFontSize = fontSizes.find(fontSize => fontSize.size === value);

package/build/font-size-picker/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/font-size-picker/index.tsx"],"names":["UnforwardedFontSizePicker","props","ref","__nextHasNoMarginBottom","fallbackFontSize","fontSizes","disableCustomFontSizes","onChange","size","value","withSlider","withReset","since","version","hint","units","availableUnits","shouldUseSelectControl","length","selectedFontSize","find","fontSize","isCustomValue","showCustomValueControl","setShowCustomValueControl","headerHint","name","T_SHIRT_NAMES","indexOf","commonUnit","hasUnits","valueQuantity","valueUnit","isValueUnitRelative","includes","settings","newValue","undefined","Number","parseInt","FontSizePicker"],"mappings":"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","sourcesContent":["/*\n External dependencies\n /\nimport type { ForwardedRef } from 'react';\n\n/\n WordPress dependencies\n /\nimport deprecated from '@wordpress/deprecated';\nimport { __ } from '@wordpress/i18n';\nimport { settings } from '@wordpress/icons';\nimport { useState, useMemo, forwardRef } from '@wordpress/element';\n\n/\n Internal dependencies\n /\nimport Button from '../button';\nimport RangeControl from '../range-control';\nimport { Flex, FlexItem } from '../flex';\nimport {\n\tdefault as UnitControl,\n\tparseQuantityAndUnitFromRawValue,\n\tuseCustomUnits,\n} from '../unit-control';\nimport { VisuallyHidden } from '../visually-hidden';\nimport { getCommonSizeUnit } from './utils';\nimport { HStack } from '../h-stack';\nimport type { FontSizePickerProps } from './types';\nimport {\n\tContainer,\n\tHeaderHint,\n\tHeaderLabel,\n\tControls,\n\tResetButton,\n} from './styles';\nimport { Spacer } from '../spacer';\nimport FontSizePickerSelect from './font-size-picker-select';\nimport FontSizePickerToggleGroup from './font-size-picker-toggle-group';\nimport { T_SHIRT_NAMES } from './constants';\n\nconst UnforwardedFontSizePicker = (\n\tprops: FontSizePickerProps,\n\tref: ForwardedRef< any >\n) => {\n\tconst {\n\t\t/* Start opting into the new margin-free styles that will become the default in a future version. */\n\t\t__nextHasNoMarginBottom = false,\n\t\tfallbackFontSize,\n\t\tfontSizes = [],\n\t\tdisableCustomFontSizes = false,\n\t\tonChange,\n\t\tsize = 'default',\n\t\tvalue,\n\t\twithSlider = false,\n\t\twithReset = true,\n\t} = props;\n\n\tif ( ! __nextHasNoMarginBottom ) {\n\t\tdeprecated( 'Bottom margin styles for wp.components.FontSizePicker', {\n\t\t\tsince: '6.1',\n\t\t\tversion: '6.4',\n\t\t\thint: 'Set the `__nextHasNoMarginBottom` 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 units = useCustomUnits( {\n\t\tavailableUnits: [ 'px', 'em', 'rem' ],\n\t} );\n\n\tconst shouldUseSelectControl = fontSizes.length > 5;\n\tconst selectedFontSize = fontSizes.find(\n\t\t( fontSize ) => fontSize.size === value\n\t);\n\tconst isCustomValue = !! value && ! selectedFontSize;\n\n\tconst [ showCustomValueControl, setShowCustomValueControl ] = useState(\n\t\t! disableCustomFontSizes && isCustomValue\n\t);\n\n\tconst headerHint = useMemo( () => {\n\t\tif ( showCustomValueControl ) {\n\t\t\treturn __( 'Custom' );\n\t\t}\n\n\t\tif ( ! shouldUseSelectControl ) {\n\t\t\tif ( selectedFontSize ) {\n\t\t\t\treturn (\n\t\t\t\t\tselectedFontSize.name \|\|\n\t\t\t\t\tT_SHIRT_NAMES[ fontSizes.indexOf( selectedFontSize ) ]\n\t\t\t\t);\n\t\t\t}\n\t\t\treturn '';\n\t\t}\n\n\t\tconst commonUnit = getCommonSizeUnit( fontSizes );\n\t\tif ( commonUnit ) {\n\t\t\treturn `(${ commonUnit })`;\n\t\t}\n\n\t\treturn '';\n\t}, [\n\t\tshowCustomValueControl,\n\t\tshouldUseSelectControl,\n\t\tselectedFontSize,\n\t\tfontSizes,\n\t] );\n\n\tif ( fontSizes.length === 0 && disableCustomFontSizes ) {\n\t\treturn null;\n\t}\n\n\t// If neither the value or first font size is a string, then FontSizePicker\n\t// operates in a legacy \"unitless\" mode where UnitControl can only be used\n\t// to select px values and onChange() is always called with number values.\n\tconst hasUnits =\n\t\ttypeof value === 'string' \|\| typeof fontSizes[ 0 ]?.size === 'string';\n\n\tconst [ valueQuantity, valueUnit ] = parseQuantityAndUnitFromRawValue(\n\t\tvalue,\n\t\tunits\n\t);\n\tconst isValueUnitRelative =\n\t\t!! valueUnit && [ 'em', 'rem' ].includes( valueUnit );\n\n\treturn (\n\t\t<Container ref={ ref } className=\"components-font-size-picker\">\n\t\t\t<VisuallyHidden as=\"legend\">{ __( 'Font size' ) }</VisuallyHidden>\n\t\t\t<Spacer>\n\t\t\t\t<HStack className=\"components-font-size-picker__header\">\n\t\t\t\t\t<HeaderLabel\n\t\t\t\t\t\taria-label={ `${ __( 'Size' ) } ${ headerHint \|\| '' }` }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Size' ) }\n\t\t\t\t\t\t{ headerHint && (\n\t\t\t\t\t\t\t<HeaderHint className=\"components-font-size-picker__header__hint\">\n\t\t\t\t\t\t\t\t{ headerHint }\n\t\t\t\t\t\t\t</HeaderHint>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</HeaderLabel>\n\t\t\t\t\t{ ! disableCustomFontSizes && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\tshowCustomValueControl\n\t\t\t\t\t\t\t\t\t? __( 'Use size preset' )\n\t\t\t\t\t\t\t\t\t: __( 'Set custom size' )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\ticon={ settings }\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tsetShowCustomValueControl(\n\t\t\t\t\t\t\t\t\t! showCustomValueControl\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tisPressed={ showCustomValueControl }\n\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</HStack>\n\t\t\t</Spacer>\n\t\t\t<Controls\n\t\t\t\tclassName=\"components-font-size-picker__controls\"\n\t\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\t>\n\t\t\t\t{ !! fontSizes.length &&\n\t\t\t\t\tshouldUseSelectControl &&\n\t\t\t\t\t! showCustomValueControl && (\n\t\t\t\t\t\t<FontSizePickerSelect\n\t\t\t\t\t\t\tfontSizes={ fontSizes }\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\tdisableCustomFontSizes={ disableCustomFontSizes }\n\t\t\t\t\t\t\tsize={ size }\n\t\t\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\t\t\tif ( newValue === undefined ) {\n\t\t\t\t\t\t\t\t\tonChange?.( undefined );\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\tonChange?.(\n\t\t\t\t\t\t\t\t\t\thasUnits\n\t\t\t\t\t\t\t\t\t\t\t? newValue\n\t\t\t\t\t\t\t\t\t\t\t: Number( newValue ),\n\t\t\t\t\t\t\t\t\t\tfontSizes.find(\n\t\t\t\t\t\t\t\t\t\t\t( fontSize ) =>\n\t\t\t\t\t\t\t\t\t\t\t\tfontSize.size === newValue\n\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tonSelectCustom={ () =>\n\t\t\t\t\t\t\t\tsetShowCustomValueControl( true )\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{ ! shouldUseSelectControl && ! showCustomValueControl && (\n\t\t\t\t\t<FontSizePickerToggleGroup\n\t\t\t\t\t\tfontSizes={ fontSizes }\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\t\t\t\tsize={ size }\n\t\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\t\tif ( newValue === undefined ) {\n\t\t\t\t\t\t\t\tonChange?.( undefined );\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tonChange?.(\n\t\t\t\t\t\t\t\t\thasUnits ? newValue : Number( newValue ),\n\t\t\t\t\t\t\t\t\tfontSizes.find(\n\t\t\t\t\t\t\t\t\t\t( fontSize ) =>\n\t\t\t\t\t\t\t\t\t\t\tfontSize.size === newValue\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t{ ! disableCustomFontSizes && showCustomValueControl && (\n\t\t\t\t\t<Flex className=\"components-font-size-picker__custom-size-control\">\n\t\t\t\t\t\t<FlexItem isBlock>\n\t\t\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t\t\tlabel={ __( 'Custom' ) }\n\t\t\t\t\t\t\t\tlabelPosition=\"top\"\n\t\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\t\t\t\tif ( newValue === undefined ) {\n\t\t\t\t\t\t\t\t\t\tonChange?.( undefined );\n\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\tonChange?.(\n\t\t\t\t\t\t\t\t\t\t\thasUnits\n\t\t\t\t\t\t\t\t\t\t\t\t? newValue\n\t\t\t\t\t\t\t\t\t\t\t\t: parseInt( newValue, 10 )\n\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\tsize={ size }\n\t\t\t\t\t\t\t\tunits={ hasUnits ? units : [] }\n\t\t\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t{ withSlider && (\n\t\t\t\t\t\t\t<FlexItem isBlock>\n\t\t\t\t\t\t\t\t<Spacer marginX={ 2 } marginBottom={ 0 }>\n\t\t\t\t\t\t\t\t\t<RangeControl\n\t\t\t\t\t\t\t\t\t\t__nextHasNoMarginBottom={\n\t\t\t\t\t\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tclassName=\"components-font-size-picker__custom-input\"\n\t\t\t\t\t\t\t\t\t\tlabel={ __( 'Custom Size' ) }\n\t\t\t\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\t\t\t\tvalue={ valueQuantity }\n\t\t\t\t\t\t\t\t\t\tinitialPosition={ fallbackFontSize }\n\t\t\t\t\t\t\t\t\t\twithInputField={ false }\n\t\t\t\t\t\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\t\t\t\t\t\tif ( newValue === undefined ) {\n\t\t\t\t\t\t\t\t\t\t\t\tonChange?.( undefined );\n\t\t\t\t\t\t\t\t\t\t\t} else if ( hasUnits ) {\n\t\t\t\t\t\t\t\t\t\t\t\tonChange?.(\n\t\t\t\t\t\t\t\t\t\t\t\t\tnewValue +\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t( valueUnit ?? 'px' )\n\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\tonChange?.( newValue );\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\t\t\t\t\tmax={ isValueUnitRelative ? 10 : 100 }\n\t\t\t\t\t\t\t\t\t\tstep={ isValueUnitRelative ? 0.1 : 1 }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</Spacer>\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ withReset && (\n\t\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t\t<ResetButton\n\t\t\t\t\t\t\t\t\tdisabled={ value === undefined }\n\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\tonChange?.( undefined );\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\t\t\tsize={ size }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ __( 'Reset' ) }\n\t\t\t\t\t\t\t\t</ResetButton>\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</Flex>\n\t\t\t\t) }\n\t\t\t</Controls>\n\t\t</Container>\n\t);\n};\n\nexport const FontSizePicker = forwardRef( UnforwardedFontSizePicker );\n\nexport default FontSizePicker;\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/font-size-picker/index.tsx"],"names":["UnforwardedFontSizePicker","props","ref","__nextHasNoMarginBottom","fallbackFontSize","fontSizes","disableCustomFontSizes","onChange","size","units","unitsProp","value","withSlider","withReset","since","version","hint","availableUnits","shouldUseSelectControl","length","selectedFontSize","find","fontSize","isCustomValue","showCustomValueControl","setShowCustomValueControl","headerHint","name","T_SHIRT_NAMES","indexOf","commonUnit","hasUnits","valueQuantity","valueUnit","isValueUnitRelative","includes","settings","newValue","undefined","Number","parseInt","FontSizePicker"],"mappings":"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","sourcesContent":["/*\n External dependencies\n /\nimport type { ForwardedRef } from 'react';\n\n/\n WordPress dependencies\n /\nimport deprecated from '@wordpress/deprecated';\nimport { __ } from '@wordpress/i18n';\nimport { settings } from '@wordpress/icons';\nimport { useState, useMemo, forwardRef } from '@wordpress/element';\n\n/\n Internal dependencies\n /\nimport Button from '../button';\nimport RangeControl from '../range-control';\nimport { Flex, FlexItem } from '../flex';\nimport {\n\tdefault as UnitControl,\n\tparseQuantityAndUnitFromRawValue,\n\tuseCustomUnits,\n} from '../unit-control';\nimport { VisuallyHidden } from '../visually-hidden';\nimport { getCommonSizeUnit } from './utils';\nimport { HStack } from '../h-stack';\nimport type { FontSizePickerProps } from './types';\nimport {\n\tContainer,\n\tHeaderHint,\n\tHeaderLabel,\n\tControls,\n\tResetButton,\n} from './styles';\nimport { Spacer } from '../spacer';\nimport FontSizePickerSelect from './font-size-picker-select';\nimport FontSizePickerToggleGroup from './font-size-picker-toggle-group';\nimport { T_SHIRT_NAMES } from './constants';\n\nconst UnforwardedFontSizePicker = (\n\tprops: FontSizePickerProps,\n\tref: ForwardedRef< any >\n) => {\n\tconst {\n\t\t/* Start opting into the new margin-free styles that will become the default in a future version. */\n\t\t__nextHasNoMarginBottom = false,\n\t\tfallbackFontSize,\n\t\tfontSizes = [],\n\t\tdisableCustomFontSizes = false,\n\t\tonChange,\n\t\tsize = 'default',\n\t\tunits: unitsProp,\n\t\tvalue,\n\t\twithSlider = false,\n\t\twithReset = true,\n\t} = props;\n\n\tif ( ! __nextHasNoMarginBottom ) {\n\t\tdeprecated( 'Bottom margin styles for wp.components.FontSizePicker', {\n\t\t\tsince: '6.1',\n\t\t\tversion: '6.4',\n\t\t\thint: 'Set the `__nextHasNoMarginBottom` 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 units = useCustomUnits( {\n\t\tavailableUnits: unitsProp \|\| [ 'px', 'em', 'rem' ],\n\t} );\n\n\tconst shouldUseSelectControl = fontSizes.length > 5;\n\tconst selectedFontSize = fontSizes.find(\n\t\t( fontSize ) => fontSize.size === value\n\t);\n\tconst isCustomValue = !! value && ! selectedFontSize;\n\n\tconst [ showCustomValueControl, setShowCustomValueControl ] = useState(\n\t\t! disableCustomFontSizes && isCustomValue\n\t);\n\n\tconst headerHint = useMemo( () => {\n\t\tif ( showCustomValueControl ) {\n\t\t\treturn __( 'Custom' );\n\t\t}\n\n\t\tif ( ! shouldUseSelectControl ) {\n\t\t\tif ( selectedFontSize ) {\n\t\t\t\treturn (\n\t\t\t\t\tselectedFontSize.name \|\|\n\t\t\t\t\tT_SHIRT_NAMES[ fontSizes.indexOf( selectedFontSize ) ]\n\t\t\t\t);\n\t\t\t}\n\t\t\treturn '';\n\t\t}\n\n\t\tconst commonUnit = getCommonSizeUnit( fontSizes );\n\t\tif ( commonUnit ) {\n\t\t\treturn `(${ commonUnit })`;\n\t\t}\n\n\t\treturn '';\n\t}, [\n\t\tshowCustomValueControl,\n\t\tshouldUseSelectControl,\n\t\tselectedFontSize,\n\t\tfontSizes,\n\t] );\n\n\tif ( fontSizes.length === 0 && disableCustomFontSizes ) {\n\t\treturn null;\n\t}\n\n\t// If neither the value or first font size is a string, then FontSizePicker\n\t// operates in a legacy \"unitless\" mode where UnitControl can only be used\n\t// to select px values and onChange() is always called with number values.\n\tconst hasUnits =\n\t\ttypeof value === 'string' \|\| typeof fontSizes[ 0 ]?.size === 'string';\n\n\tconst [ valueQuantity, valueUnit ] = parseQuantityAndUnitFromRawValue(\n\t\tvalue,\n\t\tunits\n\t);\n\tconst isValueUnitRelative =\n\t\t!! valueUnit && [ 'em', 'rem' ].includes( valueUnit );\n\n\treturn (\n\t\t<Container ref={ ref } className=\"components-font-size-picker\">\n\t\t\t<VisuallyHidden as=\"legend\">{ __( 'Font size' ) }</VisuallyHidden>\n\t\t\t<Spacer>\n\t\t\t\t<HStack className=\"components-font-size-picker__header\">\n\t\t\t\t\t<HeaderLabel\n\t\t\t\t\t\taria-label={ `${ __( 'Size' ) } ${ headerHint \|\| '' }` }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Size' ) }\n\t\t\t\t\t\t{ headerHint && (\n\t\t\t\t\t\t\t<HeaderHint className=\"components-font-size-picker__header__hint\">\n\t\t\t\t\t\t\t\t{ headerHint }\n\t\t\t\t\t\t\t</HeaderHint>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</HeaderLabel>\n\t\t\t\t\t{ ! disableCustomFontSizes && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\tshowCustomValueControl\n\t\t\t\t\t\t\t\t\t? __( 'Use size preset' )\n\t\t\t\t\t\t\t\t\t: __( 'Set custom size' )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\ticon={ settings }\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tsetShowCustomValueControl(\n\t\t\t\t\t\t\t\t\t! showCustomValueControl\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tisPressed={ showCustomValueControl }\n\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</HStack>\n\t\t\t</Spacer>\n\t\t\t<Controls\n\t\t\t\tclassName=\"components-font-size-picker__controls\"\n\t\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\t>\n\t\t\t\t{ !! fontSizes.length &&\n\t\t\t\t\tshouldUseSelectControl &&\n\t\t\t\t\t! showCustomValueControl && (\n\t\t\t\t\t\t<FontSizePickerSelect\n\t\t\t\t\t\t\tfontSizes={ fontSizes }\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\tdisableCustomFontSizes={ disableCustomFontSizes }\n\t\t\t\t\t\t\tsize={ size }\n\t\t\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\t\t\tif ( newValue === undefined ) {\n\t\t\t\t\t\t\t\t\tonChange?.( undefined );\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\tonChange?.(\n\t\t\t\t\t\t\t\t\t\thasUnits\n\t\t\t\t\t\t\t\t\t\t\t? newValue\n\t\t\t\t\t\t\t\t\t\t\t: Number( newValue ),\n\t\t\t\t\t\t\t\t\t\tfontSizes.find(\n\t\t\t\t\t\t\t\t\t\t\t( fontSize ) =>\n\t\t\t\t\t\t\t\t\t\t\t\tfontSize.size === newValue\n\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tonSelectCustom={ () =>\n\t\t\t\t\t\t\t\tsetShowCustomValueControl( true )\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{ ! shouldUseSelectControl && ! showCustomValueControl && (\n\t\t\t\t\t<FontSizePickerToggleGroup\n\t\t\t\t\t\tfontSizes={ fontSizes }\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\t\t\t\tsize={ size }\n\t\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\t\tif ( newValue === undefined ) {\n\t\t\t\t\t\t\t\tonChange?.( undefined );\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tonChange?.(\n\t\t\t\t\t\t\t\t\thasUnits ? newValue : Number( newValue ),\n\t\t\t\t\t\t\t\t\tfontSizes.find(\n\t\t\t\t\t\t\t\t\t\t( fontSize ) =>\n\t\t\t\t\t\t\t\t\t\t\tfontSize.size === newValue\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t{ ! disableCustomFontSizes && showCustomValueControl && (\n\t\t\t\t\t<Flex className=\"components-font-size-picker__custom-size-control\">\n\t\t\t\t\t\t<FlexItem isBlock>\n\t\t\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t\t\tlabel={ __( 'Custom' ) }\n\t\t\t\t\t\t\t\tlabelPosition=\"top\"\n\t\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\t\t\t\tif ( newValue === undefined ) {\n\t\t\t\t\t\t\t\t\t\tonChange?.( undefined );\n\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\tonChange?.(\n\t\t\t\t\t\t\t\t\t\t\thasUnits\n\t\t\t\t\t\t\t\t\t\t\t\t? newValue\n\t\t\t\t\t\t\t\t\t\t\t\t: parseInt( newValue, 10 )\n\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\tsize={ size }\n\t\t\t\t\t\t\t\tunits={ hasUnits ? units : [] }\n\t\t\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t{ withSlider && (\n\t\t\t\t\t\t\t<FlexItem isBlock>\n\t\t\t\t\t\t\t\t<Spacer marginX={ 2 } marginBottom={ 0 }>\n\t\t\t\t\t\t\t\t\t<RangeControl\n\t\t\t\t\t\t\t\t\t\t__nextHasNoMarginBottom={\n\t\t\t\t\t\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tclassName=\"components-font-size-picker__custom-input\"\n\t\t\t\t\t\t\t\t\t\tlabel={ __( 'Custom Size' ) }\n\t\t\t\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\t\t\t\tvalue={ valueQuantity }\n\t\t\t\t\t\t\t\t\t\tinitialPosition={ fallbackFontSize }\n\t\t\t\t\t\t\t\t\t\twithInputField={ false }\n\t\t\t\t\t\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\t\t\t\t\t\tif ( newValue === undefined ) {\n\t\t\t\t\t\t\t\t\t\t\t\tonChange?.( undefined );\n\t\t\t\t\t\t\t\t\t\t\t} else if ( hasUnits ) {\n\t\t\t\t\t\t\t\t\t\t\t\tonChange?.(\n\t\t\t\t\t\t\t\t\t\t\t\t\tnewValue +\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t( valueUnit ?? 'px' )\n\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\tonChange?.( newValue );\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\t\t\t\t\tmax={ isValueUnitRelative ? 10 : 100 }\n\t\t\t\t\t\t\t\t\t\tstep={ isValueUnitRelative ? 0.1 : 1 }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</Spacer>\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ withReset && (\n\t\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t\t<ResetButton\n\t\t\t\t\t\t\t\t\tdisabled={ value === undefined }\n\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\tonChange?.( undefined );\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\t\t\tsize={ size }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ __( 'Reset' ) }\n\t\t\t\t\t\t\t\t</ResetButton>\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</Flex>\n\t\t\t\t) }\n\t\t\t</Controls>\n\t\t</Container>\n\t);\n};\n\nexport const FontSizePicker = forwardRef( UnforwardedFontSizePicker );\n\nexport default FontSizePicker;\n"]}

package/build/form-token-field/index.js CHANGED Viewed

@@ -34,6 +34,8 @@ var _flex = require("../flex");
 var _baseControlStyles = require("../base-control/styles/base-control-styles");
+var _spacer = require("../spacer");
 /**
  * External dependencies
  */
@@ -88,7 +90,8 @@ function FormTokenField(props) {
     __experimentalValidateInput = () => true,
     __experimentalShowHowTo = true,
     __next36pxDefaultSize = false,
-    __experimentalAutoSelectFirstMatch = false
+    __experimentalAutoSelectFirstMatch = false,
+    __nextHasNoMarginBottom = false
   } = props;
   const instanceId = (0, _compose.useInstanceId)(FormTokenField); // We reset to these initial values again in the onBlur
@@ -162,7 +165,7 @@ function FormTokenField(props) {
   }
   function onBlur() {
-    if (inputHasValidValue()) {
+    if (inputHasValidValue() && __experimentalValidateInput(incompleteTokenValue)) {
       setIsActive(false);
     } else {
       // Reset to initial state
@@ -653,9 +656,12 @@ function FormTokenField(props) {
     onHover: onSuggestionHovered,
     onSelect: onSuggestionSelected,
     __experimentalRenderItem: __experimentalRenderItem
-  })), __experimentalShowHowTo && (0, _element.createElement)("p", {
+  })), !__nextHasNoMarginBottom && (0, _element.createElement)(_spacer.Spacer, {
+    marginBottom: 2
+  }), __experimentalShowHowTo && (0, _element.createElement)(_baseControlStyles.StyledHelp, {
     id: `components-form-token-suggestions-howto-${instanceId}`,
-    className: "components-form-token-field__help"
+    className: "components-form-token-field__help",
+    __nextHasNoMarginBottom: __nextHasNoMarginBottom
   }, tokenizeOnSpace ? (0, _i18n.__)('Separate with commas, spaces, or the Enter key.') : (0, _i18n.__)('Separate with commas or the Enter key.')));
   /* eslint-enable jsx-a11y/no-static-element-interactions */
 }