npm - @wordpress/components - Versions diffs - 28.11.0 → 28.13.1-next.082ed6819.0 - Mend

@wordpress/components 28.11.0 → 28.13.1-next.082ed6819.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 (514) hide show

package/build/dimension-control/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["_clsx","_interopRequireDefault","require","_i18n","_icon","_selectControl","_sizes","_interopRequireWildcard","_context","_deprecated","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","CONTEXT_VALUE","BaseControl","_overrides","__associatedWPComponentName","DimensionControl","props","__next40pxDefaultSize","__nextHasNoMarginBottom","label","value","sizes","sizesTable","icon","onChange","className","deprecated","since","version","onChangeSpacingSize","val","theSize","findSizeBySlug","slug","~~undefined","~~formatSizesAsOptions","theSizes","options","map","name","__","selectLabel","jsxs","Fragment","children","jsx","ContextSystemProvider","clsx","hideLabelFromVision","_default","exports"],"sources":["@wordpress/components/src/dimension-control/index.tsx"],"sourcesContent":["/*\n External dependencies\n /\nimport clsx from 'clsx';\n\n/\n WordPress dependencies\n /\nimport { __ } from '@wordpress/i18n';\n\n/\n Internal dependencies\n /\nimport Icon from '../icon';\nimport SelectControl from '../select-control';\nimport sizesTable, { findSizeBySlug } from './sizes';\nimport type { DimensionControlProps, Size } from './types';\nimport type { SelectControlSingleSelectionProps } from '../select-control/types';\nimport { ContextSystemProvider } from '../context';\nimport deprecated from '@wordpress/deprecated';\n\nconst CONTEXT_VALUE = {\n\tBaseControl: {\n\t\t// Temporary during deprecation grace period: Overrides the underlying `__associatedWPComponentName`\n\t\t// via the context system to override the value set by SelectControl.\n\t\t_overrides: { __associatedWPComponentName: 'DimensionControl' },\n\t},\n};\n\n/\n `DimensionControl` is a component designed to provide a UI to control spacing and/or dimensions.\n \n @deprecated\n \n ```jsx\n * import { __experimentalDimensionControl as DimensionControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n \n export default function MyCustomDimensionControl() {\n * \tconst [ paddingSize, setPaddingSize ] = useState( '' );\n \n \treturn (\n * \t\t<DimensionControl\n * \t\t\t__nextHasNoMarginBottom\n * \t\t\tlabel={ 'Padding' }\n * \t\t\ticon={ 'desktop' }\n * \t\t\tonChange={ ( value ) => setPaddingSize( value ) }\n * \t\t\tvalue={ paddingSize }\n * \t\t/>\n * \t);\n * }\n * ```\n */\nexport function DimensionControl( props: DimensionControlProps ) {\n\tconst {\n\t\t__next40pxDefaultSize = false,\n\t\t__nextHasNoMarginBottom = false,\n\t\tlabel,\n\t\tvalue,\n\t\tsizes = sizesTable,\n\t\ticon,\n\t\tonChange,\n\t\tclassName = '',\n\t} = props;\n\n\tdeprecated( 'wp.components.DimensionControl', {\n\t\tsince: '6.7',\n\t\tversion: '7.0',\n\t} );\n\n\tconst onChangeSpacingSize: SelectControlSingleSelectionProps[ 'onChange' ] =\n\t\t( val ) => {\n\t\t\tconst theSize = findSizeBySlug( sizes, val );\n\n\t\t\tif ( ! theSize \|\| value === theSize.slug ) {\n\t\t\t\tonChange?.( undefined );\n\t\t\t} else if ( typeof onChange === 'function' ) {\n\t\t\t\tonChange( theSize.slug );\n\t\t\t}\n\t\t};\n\n\tconst formatSizesAsOptions = ( theSizes: Size[] ) => {\n\t\tconst options = theSizes.map( ( { name, slug } ) => ( {\n\t\t\tlabel: name,\n\t\t\tvalue: slug,\n\t\t} ) );\n\n\t\treturn [\n\t\t\t{\n\t\t\t\tlabel: __( 'Default' ),\n\t\t\t\tvalue: '',\n\t\t\t},\n\t\t\t...options,\n\t\t];\n\t};\n\n\tconst selectLabel = (\n\t\t<>\n\t\t\t{ icon && <Icon icon={ icon } /> }\n\t\t\t{ label }\n\t\t</>\n\t);\n\n\treturn (\n\t\t<ContextSystemProvider value={ CONTEXT_VALUE }>\n\t\t\t<SelectControl\n\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\t\tclassName={ clsx(\n\t\t\t\t\tclassName,\n\t\t\t\t\t'block-editor-dimension-control'\n\t\t\t\t) }\n\t\t\t\tlabel={ selectLabel }\n\t\t\t\thideLabelFromVision={ false }\n\t\t\t\tvalue={ value }\n\t\t\t\tonChange={ onChangeSpacingSize }\n\t\t\t\toptions={ formatSizesAsOptions( sizes ) }\n\t\t\t/>\n\t\t</ContextSystemProvider>\n\t);\n}\n\nexport default DimensionControl;\n"],"mappings":";;;;;;;;AAGA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,KAAA,GAAAD,OAAA;AAKA,IAAAE,KAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,cAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,MAAA,GAAAC,uBAAA,CAAAL,OAAA;AAGA,IAAAM,QAAA,GAAAN,OAAA;AACA,IAAAO,WAAA,GAAAR,sBAAA,CAAAC,OAAA;~~AAA+C~~,IAAAQ,~~WAAA~~,GAAAR,OAAA;AAAA,~~SAAAS~~,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,~~SAAAL~~,~~wBAAAK~~,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;~~AAnB/C~~;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;~~AASA~~,MAAMW,aAAa,GAAG;EACrBC,WAAW,EAAE;IACZ;IACA;IACAC,UAAU,EAAE;MAAEC,2BAA2B,EAAE;IAAmB;EAC/D;AACD,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,gBAAgBA,CAAEC,KAA4B,EAAG;EAChE,MAAM;IACLC,qBAAqB,GAAG,KAAK;IAC7BC,uBAAuB,GAAG,KAAK;IAC/BC,KAAK;IACLC,KAAK;IACLC,KAAK,GAAGC,cAAU;IAClBC,IAAI;IACJC,QAAQ;IACRC,SAAS,GAAG;EACb,CAAC,GAAGT,KAAK;EAET,IAAAU,mBAAU,EAAE,gCAAgC,EAAE;IAC7CC,KAAK,EAAE,KAAK;IACZC,OAAO,EAAE;EACV,CAAE,CAAC;EAEH,MAAMC,mBAAoE,GACvEC,GAAG,IAAM;IACV,MAAMC,OAAO,GAAG,IAAAC,qBAAc,~~EAAEX~~,KAAK,~~EAAES~~,GAAI,CAAC;IAE5C,IAAK,CAAEC,OAAO,~~IAAIX~~,KAAK,~~KAAKW~~,OAAO,CAACE,IAAI,EAAG;~~MAC1CT~~,QAAQ,~~GAAIU~~,SAAU,CAAC;IACxB,CAAC,MAAM,IAAK,~~OAAOV~~,QAAQ,KAAK,UAAU,EAAG;MAC5CA,QAAQ,~~CAAEO~~,OAAO,CAACE,IAAK,CAAC;IACzB;EACD,CAAC;EAEF,~~MAAME~~,oBAAoB,GAAKC,QAAgB,IAAM;IACpD,MAAMC,OAAO,GAAGD,QAAQ,CAACE,GAAG,CAAE,CAAE;MAAEC,IAAI;~~MAAEN~~;IAAK,CAAC,MAAQ;~~MACrDd~~,KAAK,~~EAAEoB~~,IAAI;~~MACXnB~~,KAAK,~~EAAEa~~;IACR,CAAC,CAAG,CAAC;IAEL,OAAO,CACN;~~MACCd~~,KAAK,EAAE,~~IAAAqB~~,QAAE,EAAE,SAAU,CAAC;~~MACtBpB~~,KAAK,EAAE;IACR,CAAC,EACD,~~GAAGiB~~,OAAO,CACV;EACF,CAAC;EAED,MAAMI,WAAW,gBAChB,~~IAAAnD~~,WAAA,~~CAAAoD~~,IAAA,~~EAAApD~~,WAAA,~~CAAAqD~~,QAAA;IAAAC,QAAA,~~GACGrB~~,IAAI,iBAAI,IAAAjC,WAAA,~~CAAAuD~~,GAAA,~~EAAC7D~~,KAAA,~~CAAAa~~,OAAI;MAAC0B,IAAI,EAAGA;IAAM,CAAE,CAAC,EAC9BJ,KAAK;EAAA,CACN,CACF;EAED,oBACC,IAAA7B,WAAA,~~CAAAuD~~,GAAA,~~EAACzD~~,QAAA,~~CAAA0D~~,qBAAqB;~~IAAC1B~~,KAAK,EAAGT,aAAe;~~IAAAiC~~,QAAA,eAC7C,~~IAAAtD~~,WAAA,~~CAAAuD~~,GAAA,~~EAAC5D~~,cAAA,~~CAAAY~~,OAAa;MACboB,qBAAqB,EAAGA,qBAAuB;MAC/CC,uBAAuB,EAAGA,uBAAyB;MACnDO,SAAS,EAAG,~~IAAAsB~~,aAAI,~~EACftB~~,SAAS,EACT,gCACD,CAAG;MACHN,KAAK,~~EAAGsB~~,WAAa;MACrBO,mBAAmB,EAAG,KAAO;~~MAC7B5B~~,KAAK,EAAGA,KAAO;MACfI,QAAQ,~~EAAGK~~,mBAAqB;~~MAChCQ~~,OAAO,EAAGF,oBAAoB,~~CAAEd~~,KAAM;IAAG,CACzC;EAAC,CACoB,CAAC;AAE1B;AAAC,~~IAAA4B~~,QAAA,GAAAC,OAAA,~~CAAArD~~,OAAA,GAEckB,gBAAgB","ignoreList":[]}
1	+ {"version":3,"names":["_clsx","_interopRequireDefault","require","_i18n","_icon","_selectControl","_sizes","_interopRequireWildcard","_context","_deprecated","_deprecated36pxSize","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","CONTEXT_VALUE","BaseControl","_overrides","__associatedWPComponentName","DimensionControl","props","__next40pxDefaultSize","__nextHasNoMarginBottom","label","value","sizes","sizesTable","icon","onChange","className","deprecated","since","version","maybeWarnDeprecated36pxSize","componentName","size","undefined","onChangeSpacingSize","val","theSize","findSizeBySlug","slug","formatSizesAsOptions","theSizes","options","map","name","__","selectLabel","jsxs","Fragment","children","jsx","ContextSystemProvider","clsx","hideLabelFromVision","_default","exports"],"sources":["@wordpress/components/src/dimension-control/index.tsx"],"sourcesContent":["/*\n External dependencies\n /\nimport clsx from 'clsx';\n\n/\n WordPress dependencies\n /\nimport { __ } from '@wordpress/i18n';\n\n/\n Internal dependencies\n /\nimport Icon from '../icon';\nimport SelectControl from '../select-control';\nimport sizesTable, { findSizeBySlug } from './sizes';\nimport type { DimensionControlProps, Size } from './types';\nimport type { SelectControlSingleSelectionProps } from '../select-control/types';\nimport { ContextSystemProvider } from '../context';\nimport deprecated from '@wordpress/deprecated';\nimport { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';\n\nconst CONTEXT_VALUE = {\n\tBaseControl: {\n\t\t// Temporary during deprecation grace period: Overrides the underlying `__associatedWPComponentName`\n\t\t// via the context system to override the value set by SelectControl.\n\t\t_overrides: { __associatedWPComponentName: 'DimensionControl' },\n\t},\n};\n\n/\n `DimensionControl` is a component designed to provide a UI to control spacing and/or dimensions.\n \n @deprecated\n \n ```jsx\n * import { __experimentalDimensionControl as DimensionControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n \n export default function MyCustomDimensionControl() {\n * \tconst [ paddingSize, setPaddingSize ] = useState( '' );\n \n \treturn (\n * \t\t<DimensionControl\n * \t\t\t__next40pxDefaultSize\n * \t\t\t__nextHasNoMarginBottom\n * \t\t\tlabel={ 'Padding' }\n * \t\t\ticon={ 'desktop' }\n * \t\t\tonChange={ ( value ) => setPaddingSize( value ) }\n * \t\t\tvalue={ paddingSize }\n * \t\t/>\n * \t);\n * }\n * ```\n */\nexport function DimensionControl( props: DimensionControlProps ) {\n\tconst {\n\t\t__next40pxDefaultSize = false,\n\t\t__nextHasNoMarginBottom = false,\n\t\tlabel,\n\t\tvalue,\n\t\tsizes = sizesTable,\n\t\ticon,\n\t\tonChange,\n\t\tclassName = '',\n\t} = props;\n\n\tdeprecated( 'wp.components.DimensionControl', {\n\t\tsince: '6.7',\n\t\tversion: '7.0',\n\t} );\n\n\tmaybeWarnDeprecated36pxSize( {\n\t\tcomponentName: 'DimensionControl',\n\t\t__next40pxDefaultSize,\n\t\tsize: undefined,\n\t} );\n\n\tconst onChangeSpacingSize: SelectControlSingleSelectionProps[ 'onChange' ] =\n\t\t( val ) => {\n\t\t\tconst theSize = findSizeBySlug( sizes, val );\n\n\t\t\tif ( ! theSize \|\| value === theSize.slug ) {\n\t\t\t\tonChange?.( undefined );\n\t\t\t} else if ( typeof onChange === 'function' ) {\n\t\t\t\tonChange( theSize.slug );\n\t\t\t}\n\t\t};\n\n\tconst formatSizesAsOptions = ( theSizes: Size[] ) => {\n\t\tconst options = theSizes.map( ( { name, slug } ) => ( {\n\t\t\tlabel: name,\n\t\t\tvalue: slug,\n\t\t} ) );\n\n\t\treturn [\n\t\t\t{\n\t\t\t\tlabel: __( 'Default' ),\n\t\t\t\tvalue: '',\n\t\t\t},\n\t\t\t...options,\n\t\t];\n\t};\n\n\tconst selectLabel = (\n\t\t<>\n\t\t\t{ icon && <Icon icon={ icon } /> }\n\t\t\t{ label }\n\t\t</>\n\t);\n\n\treturn (\n\t\t<ContextSystemProvider value={ CONTEXT_VALUE }>\n\t\t\t<SelectControl\n\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\t\tclassName={ clsx(\n\t\t\t\t\tclassName,\n\t\t\t\t\t'block-editor-dimension-control'\n\t\t\t\t) }\n\t\t\t\tlabel={ selectLabel }\n\t\t\t\thideLabelFromVision={ false }\n\t\t\t\tvalue={ value }\n\t\t\t\tonChange={ onChangeSpacingSize }\n\t\t\t\toptions={ formatSizesAsOptions( sizes ) }\n\t\t\t/>\n\t\t</ContextSystemProvider>\n\t);\n}\n\nexport default DimensionControl;\n"],"mappings":"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","ignoreList":[]}

package/build/disabled/index.js CHANGED Viewed

@@ -39,7 +39,14 @@ const {
  * const MyDisabled = () => {
  * 	const [ isDisabled, setIsDisabled ] = useState( true );
  *
- * 	let input = <TextControl label="Input" onChange={ () => {} } />;
+ *	let input = (
+ *		<TextControl
+ *			__next40pxDefaultSize
+ *			__nextHasNoMarginBottom
+ *			label="Input"
+ *			onChange={ () => {} }
+ *		/>
+ *	);
  * 	if ( isDisabled ) {
  * 		input = <Disabled>{ input }</Disabled>;
  * 	}

package/build/disabled/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["_element","require","_disabledStyles","_utils","_jsxRuntime","Context","createContext","Consumer","Provider","Disabled","className","children","isDisabled","props","cx","useCx","jsx","value","inert","undefined","disabledStyles","_default","exports","default"],"sources":["@wordpress/components/src/disabled/index.tsx"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { createContext } from '@wordpress/element';\n\n/\n Internal dependencies\n /\nimport { disabledStyles } from './styles/disabled-styles';\nimport type { DisabledProps } from './types';\nimport type { WordPressComponentProps } from '../context';\nimport { useCx } from '../utils';\n\nconst Context = createContext< boolean >( false );\nconst { Consumer, Provider } = Context;\n\n/\n `Disabled` is a component which disables descendant tabbable elements and\n * prevents pointer interaction.\n \n _Note: this component may not behave as expected in browsers that don't\n * support the `inert` HTML attribute. We recommend adding the official WICG\n * polyfill when using this component in your project._\n \n @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\n \n ```jsx\n * import { Button, Disabled, TextControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n \n const MyDisabled = () => {\n * \tconst [ isDisabled, setIsDisabled ] = useState( true );\n \n \tlet input = <TextControl ~~label~~=\"Input\" ~~onChange~~={ () => {} } ~~/>;\~~n * \tif ( isDisabled ) {\n * \t\tinput = <Disabled>{ input }</Disabled>;\n * \t}\n \n \tconst toggleDisabled = () => {\n * \t\tsetIsDisabled( ( state ) => ! state );\n * \t};\n \n \treturn (\n * \t\t<div>\n * \t\t\t{ input }\n * \t\t\t<Button variant=\"primary\" onClick={ toggleDisabled }>\n * \t\t\t\tToggle Disabled\n * \t\t\t</Button>\n * \t\t</div>\n * \t);\n * };\n * ```\n */\nfunction Disabled( {\n\tclassName,\n\tchildren,\n\tisDisabled = true,\n\t...props\n}: WordPressComponentProps< DisabledProps, 'div' > ) {\n\tconst cx = useCx();\n\n\treturn (\n\t\t<Provider value={ isDisabled }>\n\t\t\t<div\n\t\t\t\t// @ts-ignore Reason: inert is a recent HTML attribute\n\t\t\t\tinert={ isDisabled ? 'true' : undefined }\n\t\t\t\tclassName={\n\t\t\t\t\tisDisabled\n\t\t\t\t\t\t? cx( disabledStyles, className, 'components-disabled' )\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t\t{ ...props }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</div>\n\t\t</Provider>\n\t);\n}\n\nDisabled.Context = Context;\nDisabled.Consumer = Consumer;\n\nexport default Disabled;\n"],"mappings":";;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAKA,IAAAC,eAAA,GAAAD,OAAA;AAGA,IAAAE,MAAA,GAAAF,OAAA;AAAiC,IAAAG,WAAA,GAAAH,OAAA;AAXjC;AACA;AACA;;AAGA;AACA;AACA;;AAMA,MAAMI,OAAO,GAAG,IAAAC,sBAAa,EAAa,KAAM,CAAC;AACjD,MAAM;EAAEC,QAAQ;EAAEC;AAAS,CAAC,GAAGH,OAAO;;AAEtC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASI,QAAQA,CAAE;EAClBC,SAAS;EACTC,QAAQ;EACRC,UAAU,GAAG,IAAI;EACjB,GAAGC;AAC6C,CAAC,EAAG;EACpD,MAAMC,EAAE,GAAG,IAAAC,YAAK,EAAC,CAAC;EAElB,oBACC,IAAAX,WAAA,CAAAY,GAAA,EAACR,QAAQ;IAACS,KAAK,EAAGL,UAAY;IAAAD,QAAA,eAC7B,IAAAP,WAAA,CAAAY,GAAA;MACC;MACAE,KAAK,EAAGN,UAAU,GAAG,MAAM,GAAGO,SAAW;MACzCT,SAAS,EACRE,UAAU,GACPE,EAAE,CAAEM,8BAAc,EAAEV,SAAS,EAAE,qBAAsB,CAAC,GACtDS,SACH;MAAA,GACIN,KAAK;MAAAF,QAAA,EAERA;IAAQ,CACN;EAAC,CACG,CAAC;AAEb;AAEAF,QAAQ,CAACJ,OAAO,GAAGA,OAAO;AAC1BI,QAAQ,CAACF,QAAQ,GAAGA,QAAQ;AAAC,IAAAc,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEdd,QAAQ","ignoreList":[]}
1	+ {"version":3,"names":["_element","require","_disabledStyles","_utils","_jsxRuntime","Context","createContext","Consumer","Provider","Disabled","className","children","isDisabled","props","cx","useCx","jsx","value","inert","undefined","disabledStyles","_default","exports","default"],"sources":["@wordpress/components/src/disabled/index.tsx"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { createContext } from '@wordpress/element';\n\n/\n Internal dependencies\n /\nimport { disabledStyles } from './styles/disabled-styles';\nimport type { DisabledProps } from './types';\nimport type { WordPressComponentProps } from '../context';\nimport { useCx } from '../utils';\n\nconst Context = createContext< boolean >( false );\nconst { Consumer, Provider } = Context;\n\n/\n `Disabled` is a component which disables descendant tabbable elements and\n * prevents pointer interaction.\n \n _Note: this component may not behave as expected in browsers that don't\n * support the `inert` HTML attribute. We recommend adding the official WICG\n * polyfill when using this component in your project._\n \n @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\n \n ```jsx\n * import { Button, Disabled, TextControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n \n const MyDisabled = () => {\n * \tconst [ isDisabled, setIsDisabled ] = useState( true );\n \n \tlet input = (\n \t\t<TextControl\n \t\t\t__next40pxDefaultSize\n \t\t\t__nextHasNoMarginBottom\n \t\t\tlabel=\"Input\"\n \t\t\tonChange={ () => {} }\n \t\t/>\n \t);\n \tif ( isDisabled ) {\n * \t\tinput = <Disabled>{ input }</Disabled>;\n * \t}\n \n \tconst toggleDisabled = () => {\n * \t\tsetIsDisabled( ( state ) => ! state );\n * \t};\n \n \treturn (\n * \t\t<div>\n * \t\t\t{ input }\n * \t\t\t<Button variant=\"primary\" onClick={ toggleDisabled }>\n * \t\t\t\tToggle Disabled\n * \t\t\t</Button>\n * \t\t</div>\n * \t);\n * };\n * ```\n */\nfunction Disabled( {\n\tclassName,\n\tchildren,\n\tisDisabled = true,\n\t...props\n}: WordPressComponentProps< DisabledProps, 'div' > ) {\n\tconst cx = useCx();\n\n\treturn (\n\t\t<Provider value={ isDisabled }>\n\t\t\t<div\n\t\t\t\t// @ts-ignore Reason: inert is a recent HTML attribute\n\t\t\t\tinert={ isDisabled ? 'true' : undefined }\n\t\t\t\tclassName={\n\t\t\t\t\tisDisabled\n\t\t\t\t\t\t? cx( disabledStyles, className, 'components-disabled' )\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t\t{ ...props }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</div>\n\t\t</Provider>\n\t);\n}\n\nDisabled.Context = Context;\nDisabled.Consumer = Consumer;\n\nexport default Disabled;\n"],"mappings":";;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAKA,IAAAC,eAAA,GAAAD,OAAA;AAGA,IAAAE,MAAA,GAAAF,OAAA;AAAiC,IAAAG,WAAA,GAAAH,OAAA;AAXjC;AACA;AACA;;AAGA;AACA;AACA;;AAMA,MAAMI,OAAO,GAAG,IAAAC,sBAAa,EAAa,KAAM,CAAC;AACjD,MAAM;EAAEC,QAAQ;EAAEC;AAAS,CAAC,GAAGH,OAAO;;AAEtC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASI,QAAQA,CAAE;EAClBC,SAAS;EACTC,QAAQ;EACRC,UAAU,GAAG,IAAI;EACjB,GAAGC;AAC6C,CAAC,EAAG;EACpD,MAAMC,EAAE,GAAG,IAAAC,YAAK,EAAC,CAAC;EAElB,oBACC,IAAAX,WAAA,CAAAY,GAAA,EAACR,QAAQ;IAACS,KAAK,EAAGL,UAAY;IAAAD,QAAA,eAC7B,IAAAP,WAAA,CAAAY,GAAA;MACC;MACAE,KAAK,EAAGN,UAAU,GAAG,MAAM,GAAGO,SAAW;MACzCT,SAAS,EACRE,UAAU,GACPE,EAAE,CAAEM,8BAAc,EAAEV,SAAS,EAAE,qBAAsB,CAAC,GACtDS,SACH;MAAA,GACIN,KAAK;MAAAF,QAAA,EAERA;IAAQ,CACN;EAAC,CACG,CAAC;AAEb;AAEAF,QAAQ,CAACJ,OAAO,GAAGA,OAAO;AAC1BI,QAAQ,CAACF,QAAQ,GAAGA,QAAQ;AAAC,IAAAc,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEdd,QAAQ","ignoreList":[]}

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

@@ -149,6 +149,8 @@ function DuotonePicker({
     options: options,
     actions: !!clearable && /*#__PURE__*/(0, _jsxRuntime.jsx)(_circularOptionPicker.default.ButtonAction, {
       onClick: () => onChange(undefined),
+      accessibleWhenDisabled: true,
+      disabled: !value,
       children: (0, _i18n.__)('Clear')
     }),
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_spacer.Spacer, {

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

	@@ -1 +1 @@
1	- {"version":3,"names":["_es","_interopRequireDefault","require","_element","_i18n","_colorListPicker","_circularOptionPicker","_vStack","_customDuotoneBar","_utils","_spacer","_jsxRuntime","DuotonePicker","asButtons","loop","clearable","unsetable","colorPalette","duotonePalette","disableCustomColors","disableCustomDuotone","value","onChange","ariaLabel","ariaLabelledby","otherProps","defaultDark","defaultLight","useMemo","getDefaultColors","isUnset","unsetOptionLabel","__","unsetOption","jsx","default","Option","isSelected","tooltipText","className","onClick","undefined","duotoneOptions","map","colors","slug","name","style","background","getGradientFromCSSColors","color","sprintf","label","fastDeepEqual","metaProps","_metaProps","options","actions","ButtonAction","children","Spacer","paddingTop","length","jsxs","VStack","spacing","labels","enableAlpha","newColors","newValue","_default","exports"],"sources":["@wordpress/components/src/duotone-picker/duotone-picker.tsx"],"sourcesContent":["/*\n External dependencies\n /\nimport fastDeepEqual from 'fast-deep-equal/es6';\n\n/\n WordPress dependencies\n /\nimport { useMemo } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\n\n/\n Internal dependencies\n /\nimport ColorListPicker from './color-list-picker';\nimport CircularOptionPicker from '../circular-option-picker';\nimport { VStack } from '../v-stack';\n\nimport CustomDuotoneBar from './custom-duotone-bar';\nimport { getDefaultColors, getGradientFromCSSColors } from './utils';\nimport { Spacer } from '../spacer';\nimport type { DuotonePickerProps } from './types';\n\n/\n ```jsx\n * import { DuotonePicker, DuotoneSwatch } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n \n const DUOTONE_PALETTE = [\n * \t{ colors: [ '#8c00b7', '#fcff41' ], name: 'Purple and yellow', slug: 'purple-yellow' },\n * \t{ colors: [ '#000097', '#ff4747' ], name: 'Blue and red', slug: 'blue-red' },\n * ];\n \n const COLOR_PALETTE = [\n * \t{ color: '#ff4747', name: 'Red', slug: 'red' },\n * \t{ color: '#fcff41', name: 'Yellow', slug: 'yellow' },\n * \t{ color: '#000097', name: 'Blue', slug: 'blue' },\n * \t{ color: '#8c00b7', name: 'Purple', slug: 'purple' },\n * ];\n \n const Example = () => {\n * \tconst [ duotone, setDuotone ] = useState( [ '#000000', '#ffffff' ] );\n * \treturn (\n * \t\t<>\n * \t\t\t<DuotonePicker\n * \t\t\t\tduotonePalette={ DUOTONE_PALETTE }\n * \t\t\t\tcolorPalette={ COLOR_PALETTE }\n * \t\t\t\tvalue={ duotone }\n * \t\t\t\tonChange={ setDuotone }\n * \t\t\t/>\n * \t\t\t<DuotoneSwatch values={ duotone } />\n * \t\t</>\n * \t);\n * };\n * ```\n */\nfunction DuotonePicker( {\n\tasButtons,\n\tloop,\n\tclearable = true,\n\tunsetable = true,\n\tcolorPalette,\n\tduotonePalette,\n\tdisableCustomColors,\n\tdisableCustomDuotone,\n\tvalue,\n\tonChange,\n\t'aria-label': ariaLabel,\n\t'aria-labelledby': ariaLabelledby,\n\t...otherProps\n}: DuotonePickerProps ) {\n\tconst [ defaultDark, defaultLight ] = useMemo(\n\t\t() => getDefaultColors( colorPalette ),\n\t\t[ colorPalette ]\n\t);\n\n\tconst isUnset = value === 'unset';\n\tconst unsetOptionLabel = __( 'Unset' );\n\n\tconst unsetOption = (\n\t\t<CircularOptionPicker.Option\n\t\t\tkey=\"unset\"\n\t\t\tvalue=\"unset\"\n\t\t\tisSelected={ isUnset }\n\t\t\ttooltipText={ unsetOptionLabel }\n\t\t\taria-label={ unsetOptionLabel }\n\t\t\tclassName=\"components-duotone-picker__color-indicator\"\n\t\t\tonClick={ () => {\n\t\t\t\tonChange( isUnset ? undefined : 'unset' );\n\t\t\t} }\n\t\t/>\n\t);\n\n\tconst duotoneOptions = duotonePalette.map( ( { colors, slug, name } ) => {\n\t\tconst style = {\n\t\t\tbackground: getGradientFromCSSColors( colors, '135deg' ),\n\t\t\tcolor: 'transparent',\n\t\t};\n\t\tconst tooltipText =\n\t\t\tname ??\n\t\t\tsprintf(\n\t\t\t\t// translators: %s: duotone code e.g: \"dark-grayscale\" or \"7f7f7f-ffffff\".\n\t\t\t\t__( 'Duotone code: %s' ),\n\t\t\t\tslug\n\t\t\t);\n\t\tconst label = name\n\t\t\t? sprintf(\n\t\t\t\t\t// translators: %s: The name of the option e.g: \"Dark grayscale\".\n\t\t\t\t\t__( 'Duotone: %s' ),\n\t\t\t\t\tname\n\t\t\t )\n\t\t\t: tooltipText;\n\t\tconst isSelected = fastDeepEqual( colors, value );\n\n\t\treturn (\n\t\t\t<CircularOptionPicker.Option\n\t\t\t\tkey={ slug }\n\t\t\t\tvalue={ colors }\n\t\t\t\tisSelected={ isSelected }\n\t\t\t\taria-label={ label }\n\t\t\t\ttooltipText={ tooltipText }\n\t\t\t\tstyle={ style }\n\t\t\t\tonClick={ () => {\n\t\t\t\t\tonChange( isSelected ? undefined : colors );\n\t\t\t\t} }\n\t\t\t/>\n\t\t);\n\t} );\n\n\tlet metaProps:\n\t\t\| { asButtons: false; loop?: boolean; 'aria-label': string }\n\t\t\| { asButtons: false; loop?: boolean; 'aria-labelledby': string }\n\t\t\| { asButtons: true };\n\n\tif ( asButtons ) {\n\t\tmetaProps = { asButtons: true };\n\t} else {\n\t\tconst _metaProps: { asButtons: false; loop?: boolean } = {\n\t\t\tasButtons: false,\n\t\t\tloop,\n\t\t};\n\n\t\tif ( ariaLabel ) {\n\t\t\tmetaProps = { ..._metaProps, 'aria-label': ariaLabel };\n\t\t} else if ( ariaLabelledby ) {\n\t\t\tmetaProps = {\n\t\t\t\t..._metaProps,\n\t\t\t\t'aria-labelledby': ariaLabelledby,\n\t\t\t};\n\t\t} else {\n\t\t\tmetaProps = {\n\t\t\t\t..._metaProps,\n\t\t\t\t'aria-label': __( 'Custom color picker.' ),\n\t\t\t};\n\t\t}\n\t}\n\n\tconst options = unsetable\n\t\t? [ unsetOption, ...duotoneOptions ]\n\t\t: duotoneOptions;\n\n\treturn (\n\t\t<CircularOptionPicker\n\t\t\t{ ...otherProps }\n\t\t\t{ ...metaProps }\n\t\t\toptions={ options }\n\t\t\tactions={\n\t\t\t\t!! clearable && (\n\t\t\t\t\t<CircularOptionPicker.ButtonAction\n\t\t\t\t\t\tonClick={ () => onChange( undefined ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Clear' ) }\n\t\t\t\t\t</CircularOptionPicker.ButtonAction>\n\t\t\t\t)\n\t\t\t}\n\t\t>\n\t\t\t<Spacer paddingTop={ options.length === 0 ? 0 : 4 }>\n\t\t\t\t<VStack spacing={ 3 }>\n\t\t\t\t\t{ ! disableCustomColors && ! disableCustomDuotone && (\n\t\t\t\t\t\t<CustomDuotoneBar\n\t\t\t\t\t\t\tvalue={ isUnset ? undefined : value }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! disableCustomDuotone && (\n\t\t\t\t\t\t<ColorListPicker\n\t\t\t\t\t\t\tlabels={ [ __( 'Shadows' ), __( 'Highlights' ) ] }\n\t\t\t\t\t\t\tcolors={ colorPalette }\n\t\t\t\t\t\t\tvalue={ isUnset ? undefined : value }\n\t\t\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\t\t\tenableAlpha\n\t\t\t\t\t\t\tonChange={ ( newColors ) => {\n\t\t\t\t\t\t\t\tif ( ! newColors[ 0 ] ) {\n\t\t\t\t\t\t\t\t\tnewColors[ 0 ] = defaultDark;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tif ( ! newColors[ 1 ] ) {\n\t\t\t\t\t\t\t\t\tnewColors[ 1 ] = defaultLight;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tconst newValue =\n\t\t\t\t\t\t\t\t\tnewColors.length >= 2\n\t\t\t\t\t\t\t\t\t\t? newColors\n\t\t\t\t\t\t\t\t\t\t: undefined;\n\t\t\t\t\t\t\t\t// @ts-expect-error TODO: The color arrays for a DuotonePicker should be a tuple of two colors,\n\t\t\t\t\t\t\t\t// but it's currently typed as a string[].\n\t\t\t\t\t\t\t\t// See also https://github.com/WordPress/gutenberg/pull/49060#discussion_r1136951035\n\t\t\t\t\t\t\t\tonChange( newValue );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</VStack>\n\t\t\t</Spacer>\n\t\t</CircularOptionPicker>\n\t);\n}\n\nexport default DuotonePicker;\n"],"mappings":";;;;;;;AAGA,IAAAA,GAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AAKA,IAAAG,gBAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,qBAAA,GAAAL,sBAAA,CAAAC,OAAA;AACA,IAAAK,OAAA,GAAAL,OAAA;AAEA,IAAAM,iBAAA,GAAAP,sBAAA,CAAAC,OAAA;AACA,IAAAO,MAAA,GAAAP,OAAA;AACA,IAAAQ,OAAA,GAAAR,OAAA;AAAmC,IAAAS,WAAA,GAAAT,OAAA;AApBnC;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;;AAUA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASU,aAAaA,CAAE;EACvBC,SAAS;EACTC,IAAI;EACJC,SAAS,GAAG,IAAI;EAChBC,SAAS,GAAG,IAAI;EAChBC,YAAY;EACZC,cAAc;EACdC,mBAAmB;EACnBC,oBAAoB;EACpBC,KAAK;EACLC,QAAQ;EACR,YAAY,EAAEC,SAAS;EACvB,iBAAiB,EAAEC,cAAc;EACjC,GAAGC;AACgB,CAAC,EAAG;EACvB,MAAM,CAAEC,WAAW,EAAEC,YAAY,CAAE,GAAG,IAAAC,gBAAO,EAC5C,MAAM,IAAAC,uBAAgB,EAAEZ,YAAa,CAAC,EACtC,CAAEA,YAAY,CACf,CAAC;EAED,MAAMa,OAAO,GAAGT,KAAK,KAAK,OAAO;EACjC,MAAMU,gBAAgB,GAAG,IAAAC,QAAE,EAAE,OAAQ,CAAC;EAEtC,MAAMC,WAAW,gBAChB,IAAAtB,WAAA,CAAAuB,GAAA,EAAC5B,qBAAA,CAAA6B,OAAoB,CAACC,MAAM;IAE3Bf,KAAK,EAAC,OAAO;IACbgB,UAAU,EAAGP,OAAS;IACtBQ,WAAW,EAAGP,gBAAkB;IAChC,cAAaA,gBAAkB;IAC/BQ,SAAS,EAAC,4CAA4C;IACtDC,OAAO,EAAGA,CAAA,KAAM;MACflB,QAAQ,CAAEQ,OAAO,GAAGW,SAAS,GAAG,OAAQ,CAAC;IAC1C;EAAG,GARC,OASJ,CACD;EAED,MAAMC,cAAc,GAAGxB,cAAc,CAACyB,GAAG,CAAE,CAAE;IAAEC,MAAM;IAAEC,IAAI;IAAEC;EAAK,CAAC,KAAM;IACxE,MAAMC,KAAK,GAAG;MACbC,UAAU,EAAE,IAAAC,+BAAwB,EAAEL,MAAM,EAAE,QAAS,CAAC;MACxDM,KAAK,EAAE;IACR,CAAC;IACD,MAAMZ,WAAW,GAChBQ,IAAI,aAAJA,IAAI,cAAJA,IAAI,GACJ,IAAAK,aAAO;IACN;IACA,IAAAnB,QAAE,EAAE,kBAAmB,CAAC,EACxBa,IACD,CAAC;IACF,MAAMO,KAAK,GAAGN,IAAI,GACf,IAAAK,aAAO;IACP;IACA,IAAAnB,QAAE,EAAE,aAAc,CAAC,EACnBc,IACA,CAAC,GACDR,WAAW;IACd,MAAMD,UAAU,GAAG,IAAAgB,WAAa,EAAET,MAAM,EAAEvB,KAAM,CAAC;IAEjD,oBACC,IAAAV,WAAA,CAAAuB,GAAA,EAAC5B,qBAAA,CAAA6B,OAAoB,CAACC,MAAM;MAE3Bf,KAAK,EAAGuB,MAAQ;MAChBP,UAAU,EAAGA,UAAY;MACzB,cAAae,KAAO;MACpBd,WAAW,EAAGA,WAAa;MAC3BS,KAAK,EAAGA,KAAO;MACfP,OAAO,EAAGA,CAAA,KAAM;QACflB,QAAQ,CAAEe,UAAU,GAAGI,SAAS,GAAGG,MAAO,CAAC;MAC5C;IAAG,GARGC,IASN,CAAC;EAEJ,CAAE,CAAC;EAEH,IAAIS,SAGkB;EAEtB,IAAKzC,SAAS,EAAG;IAChByC,SAAS,GAAG;MAAEzC,SAAS,EAAE;IAAK,CAAC;EAChC,CAAC,MAAM;IACN,MAAM0C,UAAgD,GAAG;MACxD1C,SAAS,EAAE,KAAK;MAChBC;IACD,CAAC;IAED,IAAKS,SAAS,EAAG;MAChB+B,SAAS,GAAG;QAAE,GAAGC,UAAU;QAAE,YAAY,EAAEhC;MAAU,CAAC;IACvD,CAAC,MAAM,IAAKC,cAAc,EAAG;MAC5B8B,SAAS,GAAG;QACX,GAAGC,UAAU;QACb,iBAAiB,EAAE/B;MACpB,CAAC;IACF,CAAC,MAAM;MACN8B,SAAS,GAAG;QACX,GAAGC,UAAU;QACb,YAAY,EAAE,IAAAvB,QAAE,EAAE,sBAAuB;MAC1C,CAAC;IACF;EACD;EAEA,MAAMwB,OAAO,GAAGxC,SAAS,GACtB,CAAEiB,WAAW,EAAE,GAAGS,cAAc,CAAE,GAClCA,cAAc;EAEjB,oBACC,IAAA/B,WAAA,CAAAuB,GAAA,EAAC5B,qBAAA,CAAA6B,OAAoB;IAAA,GACfV,UAAU;IAAA,GACV6B,SAAS;IACdE,OAAO,EAAGA,OAAS;IACnBC,OAAO,EACN,CAAC,CAAE1C,SAAS,iBACX,IAAAJ,WAAA,CAAAuB,GAAA,EAAC5B,qBAAA,CAAA6B,OAAoB,CAACuB,YAAY;MACjClB,OAAO,EAAGA,CAAA,KAAMlB,QAAQ,CAAEmB,SAAU,CAAG;MAAAkB,QAAA,EAErC,IAAA3B,QAAE,EAAE,OAAQ;IAAC,CACmB,CAEpC;IAAA2B,QAAA,eAED,IAAAhD,WAAA,CAAAuB,GAAA,EAACxB,OAAA,CAAAkD,MAAM;MAACC,UAAU,EAAGL,OAAO,CAACM,MAAM,KAAK,CAAC,GAAG,CAAC,GAAG,CAAG;MAAAH,QAAA,eAClD,IAAAhD,WAAA,CAAAoD,IAAA,EAACxD,OAAA,CAAAyD,MAAM;QAACC,OAAO,EAAG,CAAG;QAAAN,QAAA,GAClB,CAAExC,mBAAmB,IAAI,CAAEC,oBAAoB,iBAChD,IAAAT,WAAA,CAAAuB,GAAA,EAAC1B,iBAAA,CAAA2B,OAAgB;UAChBd,KAAK,EAAGS,OAAO,GAAGW,SAAS,GAAGpB,KAAO;UACrCC,QAAQ,EAAGA;QAAU,CACrB,CACD,EACC,CAAEF,oBAAoB,iBACvB,IAAAT,WAAA,CAAAuB,GAAA,EAAC7B,gBAAA,CAAA8B,OAAe;UACf+B,MAAM,EAAG,CAAE,IAAAlC,QAAE,EAAE,SAAU,CAAC,EAAE,IAAAA,QAAE,EAAE,YAAa,CAAC,CAAI;UAClDY,MAAM,EAAG3B,YAAc;UACvBI,KAAK,EAAGS,OAAO,GAAGW,SAAS,GAAGpB,KAAO;UACrCF,mBAAmB,EAAGA,mBAAqB;UAC3CgD,WAAW;UACX7C,QAAQ,EAAK8C,SAAS,IAAM;YAC3B,IAAK,CAAEA,SAAS,CAAE,CAAC,CAAE,EAAG;cACvBA,SAAS,CAAE,CAAC,CAAE,GAAG1C,WAAW;YAC7B;YACA,IAAK,CAAE0C,SAAS,CAAE,CAAC,CAAE,EAAG;cACvBA,SAAS,CAAE,CAAC,CAAE,GAAGzC,YAAY;YAC9B;YACA,MAAM0C,QAAQ,GACbD,SAAS,CAACN,MAAM,IAAI,CAAC,GAClBM,SAAS,GACT3B,SAAS;YACb;YACA;YACA;YACAnB,QAAQ,CAAE+C,QAAS,CAAC;UACrB;QAAG,CACH,CACD;MAAA,CACM;IAAC,CACF;EAAC,CACY,CAAC;AAEzB;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAApC,OAAA,GAEcvB,aAAa","ignoreList":[]}
1	+ {"version":3,"names":["_es","_interopRequireDefault","require","_element","_i18n","_colorListPicker","_circularOptionPicker","_vStack","_customDuotoneBar","_utils","_spacer","_jsxRuntime","DuotonePicker","asButtons","loop","clearable","unsetable","colorPalette","duotonePalette","disableCustomColors","disableCustomDuotone","value","onChange","ariaLabel","ariaLabelledby","otherProps","defaultDark","defaultLight","useMemo","getDefaultColors","isUnset","unsetOptionLabel","__","unsetOption","jsx","default","Option","isSelected","tooltipText","className","onClick","undefined","duotoneOptions","map","colors","slug","name","style","background","getGradientFromCSSColors","color","sprintf","label","fastDeepEqual","metaProps","_metaProps","options","actions","ButtonAction","accessibleWhenDisabled","disabled","children","Spacer","paddingTop","length","jsxs","VStack","spacing","labels","enableAlpha","newColors","newValue","_default","exports"],"sources":["@wordpress/components/src/duotone-picker/duotone-picker.tsx"],"sourcesContent":["/*\n External dependencies\n /\nimport fastDeepEqual from 'fast-deep-equal/es6';\n\n/\n WordPress dependencies\n /\nimport { useMemo } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\n\n/\n Internal dependencies\n /\nimport ColorListPicker from './color-list-picker';\nimport CircularOptionPicker from '../circular-option-picker';\nimport { VStack } from '../v-stack';\n\nimport CustomDuotoneBar from './custom-duotone-bar';\nimport { getDefaultColors, getGradientFromCSSColors } from './utils';\nimport { Spacer } from '../spacer';\nimport type { DuotonePickerProps } from './types';\n\n/\n ```jsx\n * import { DuotonePicker, DuotoneSwatch } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n \n const DUOTONE_PALETTE = [\n * \t{ colors: [ '#8c00b7', '#fcff41' ], name: 'Purple and yellow', slug: 'purple-yellow' },\n * \t{ colors: [ '#000097', '#ff4747' ], name: 'Blue and red', slug: 'blue-red' },\n * ];\n \n const COLOR_PALETTE = [\n * \t{ color: '#ff4747', name: 'Red', slug: 'red' },\n * \t{ color: '#fcff41', name: 'Yellow', slug: 'yellow' },\n * \t{ color: '#000097', name: 'Blue', slug: 'blue' },\n * \t{ color: '#8c00b7', name: 'Purple', slug: 'purple' },\n * ];\n \n const Example = () => {\n * \tconst [ duotone, setDuotone ] = useState( [ '#000000', '#ffffff' ] );\n * \treturn (\n * \t\t<>\n * \t\t\t<DuotonePicker\n * \t\t\t\tduotonePalette={ DUOTONE_PALETTE }\n * \t\t\t\tcolorPalette={ COLOR_PALETTE }\n * \t\t\t\tvalue={ duotone }\n * \t\t\t\tonChange={ setDuotone }\n * \t\t\t/>\n * \t\t\t<DuotoneSwatch values={ duotone } />\n * \t\t</>\n * \t);\n * };\n * ```\n */\nfunction DuotonePicker( {\n\tasButtons,\n\tloop,\n\tclearable = true,\n\tunsetable = true,\n\tcolorPalette,\n\tduotonePalette,\n\tdisableCustomColors,\n\tdisableCustomDuotone,\n\tvalue,\n\tonChange,\n\t'aria-label': ariaLabel,\n\t'aria-labelledby': ariaLabelledby,\n\t...otherProps\n}: DuotonePickerProps ) {\n\tconst [ defaultDark, defaultLight ] = useMemo(\n\t\t() => getDefaultColors( colorPalette ),\n\t\t[ colorPalette ]\n\t);\n\n\tconst isUnset = value === 'unset';\n\tconst unsetOptionLabel = __( 'Unset' );\n\n\tconst unsetOption = (\n\t\t<CircularOptionPicker.Option\n\t\t\tkey=\"unset\"\n\t\t\tvalue=\"unset\"\n\t\t\tisSelected={ isUnset }\n\t\t\ttooltipText={ unsetOptionLabel }\n\t\t\taria-label={ unsetOptionLabel }\n\t\t\tclassName=\"components-duotone-picker__color-indicator\"\n\t\t\tonClick={ () => {\n\t\t\t\tonChange( isUnset ? undefined : 'unset' );\n\t\t\t} }\n\t\t/>\n\t);\n\n\tconst duotoneOptions = duotonePalette.map( ( { colors, slug, name } ) => {\n\t\tconst style = {\n\t\t\tbackground: getGradientFromCSSColors( colors, '135deg' ),\n\t\t\tcolor: 'transparent',\n\t\t};\n\t\tconst tooltipText =\n\t\t\tname ??\n\t\t\tsprintf(\n\t\t\t\t// translators: %s: duotone code e.g: \"dark-grayscale\" or \"7f7f7f-ffffff\".\n\t\t\t\t__( 'Duotone code: %s' ),\n\t\t\t\tslug\n\t\t\t);\n\t\tconst label = name\n\t\t\t? sprintf(\n\t\t\t\t\t// translators: %s: The name of the option e.g: \"Dark grayscale\".\n\t\t\t\t\t__( 'Duotone: %s' ),\n\t\t\t\t\tname\n\t\t\t )\n\t\t\t: tooltipText;\n\t\tconst isSelected = fastDeepEqual( colors, value );\n\n\t\treturn (\n\t\t\t<CircularOptionPicker.Option\n\t\t\t\tkey={ slug }\n\t\t\t\tvalue={ colors }\n\t\t\t\tisSelected={ isSelected }\n\t\t\t\taria-label={ label }\n\t\t\t\ttooltipText={ tooltipText }\n\t\t\t\tstyle={ style }\n\t\t\t\tonClick={ () => {\n\t\t\t\t\tonChange( isSelected ? undefined : colors );\n\t\t\t\t} }\n\t\t\t/>\n\t\t);\n\t} );\n\n\tlet metaProps:\n\t\t\| { asButtons: false; loop?: boolean; 'aria-label': string }\n\t\t\| { asButtons: false; loop?: boolean; 'aria-labelledby': string }\n\t\t\| { asButtons: true };\n\n\tif ( asButtons ) {\n\t\tmetaProps = { asButtons: true };\n\t} else {\n\t\tconst _metaProps: { asButtons: false; loop?: boolean } = {\n\t\t\tasButtons: false,\n\t\t\tloop,\n\t\t};\n\n\t\tif ( ariaLabel ) {\n\t\t\tmetaProps = { ..._metaProps, 'aria-label': ariaLabel };\n\t\t} else if ( ariaLabelledby ) {\n\t\t\tmetaProps = {\n\t\t\t\t..._metaProps,\n\t\t\t\t'aria-labelledby': ariaLabelledby,\n\t\t\t};\n\t\t} else {\n\t\t\tmetaProps = {\n\t\t\t\t..._metaProps,\n\t\t\t\t'aria-label': __( 'Custom color picker.' ),\n\t\t\t};\n\t\t}\n\t}\n\n\tconst options = unsetable\n\t\t? [ unsetOption, ...duotoneOptions ]\n\t\t: duotoneOptions;\n\n\treturn (\n\t\t<CircularOptionPicker\n\t\t\t{ ...otherProps }\n\t\t\t{ ...metaProps }\n\t\t\toptions={ options }\n\t\t\tactions={\n\t\t\t\t!! clearable && (\n\t\t\t\t\t<CircularOptionPicker.ButtonAction\n\t\t\t\t\t\tonClick={ () => onChange( undefined ) }\n\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\tdisabled={ ! value }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Clear' ) }\n\t\t\t\t\t</CircularOptionPicker.ButtonAction>\n\t\t\t\t)\n\t\t\t}\n\t\t>\n\t\t\t<Spacer paddingTop={ options.length === 0 ? 0 : 4 }>\n\t\t\t\t<VStack spacing={ 3 }>\n\t\t\t\t\t{ ! disableCustomColors && ! disableCustomDuotone && (\n\t\t\t\t\t\t<CustomDuotoneBar\n\t\t\t\t\t\t\tvalue={ isUnset ? undefined : value }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! disableCustomDuotone && (\n\t\t\t\t\t\t<ColorListPicker\n\t\t\t\t\t\t\tlabels={ [ __( 'Shadows' ), __( 'Highlights' ) ] }\n\t\t\t\t\t\t\tcolors={ colorPalette }\n\t\t\t\t\t\t\tvalue={ isUnset ? undefined : value }\n\t\t\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\t\t\tenableAlpha\n\t\t\t\t\t\t\tonChange={ ( newColors ) => {\n\t\t\t\t\t\t\t\tif ( ! newColors[ 0 ] ) {\n\t\t\t\t\t\t\t\t\tnewColors[ 0 ] = defaultDark;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tif ( ! newColors[ 1 ] ) {\n\t\t\t\t\t\t\t\t\tnewColors[ 1 ] = defaultLight;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tconst newValue =\n\t\t\t\t\t\t\t\t\tnewColors.length >= 2\n\t\t\t\t\t\t\t\t\t\t? newColors\n\t\t\t\t\t\t\t\t\t\t: undefined;\n\t\t\t\t\t\t\t\t// @ts-expect-error TODO: The color arrays for a DuotonePicker should be a tuple of two colors,\n\t\t\t\t\t\t\t\t// but it's currently typed as a string[].\n\t\t\t\t\t\t\t\t// See also https://github.com/WordPress/gutenberg/pull/49060#discussion_r1136951035\n\t\t\t\t\t\t\t\tonChange( newValue );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</VStack>\n\t\t\t</Spacer>\n\t\t</CircularOptionPicker>\n\t);\n}\n\nexport default DuotonePicker;\n"],"mappings":"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","ignoreList":[]}

package/build/font-size-picker/font-size-picker-toggle-group.js CHANGED Viewed

@@ -27,6 +27,7 @@ const FontSizePickerToggleGroup = props => {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_toggleGroupControl.ToggleGroupControl, {
     __nextHasNoMarginBottom: true,
     __next40pxDefaultSize: __next40pxDefaultSize,
+    __shouldNotWarnDeprecated36pxSize: true,
     label: (0, _i18n.__)('Font size'),
     hideLabelFromVision: true,
     value: value,

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

	@@ -1 +1 @@
1	- {"version":3,"names":["_i18n","require","_toggleGroupControl","_constants","_jsxRuntime","FontSizePickerToggleGroup","props","fontSizes","value","__next40pxDefaultSize","size","onChange","jsx","ToggleGroupControl","__nextHasNoMarginBottom","label","__","hideLabelFromVision","isBlock","children","map","fontSize","index","ToggleGroupControlOption","T_SHIRT_ABBREVIATIONS","name","T_SHIRT_NAMES","showTooltip","slug","_default","exports","default"],"sources":["@wordpress/components/src/font-size-picker/font-size-picker-toggle-group.tsx"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { __ } from '@wordpress/i18n';\n\n/\n Internal dependencies\n */\nimport {\n\tToggleGroupControl,\n\tToggleGroupControlOption,\n} from '../toggle-group-control';\nimport { T_SHIRT_ABBREVIATIONS, T_SHIRT_NAMES } from './constants';\nimport type { FontSizePickerToggleGroupProps } from './types';\n\nconst FontSizePickerToggleGroup = ( props: FontSizePickerToggleGroupProps ) => {\n\tconst { fontSizes, value, __next40pxDefaultSize, size, onChange } = props;\n\treturn (\n\t\t<ToggleGroupControl\n\t\t\t__nextHasNoMarginBottom\n\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\tlabel={ __( 'Font size' ) }\n\t\t\thideLabelFromVision\n\t\t\tvalue={ value }\n\t\t\tonChange={ onChange }\n\t\t\tisBlock\n\t\t\tsize={ size }\n\t\t>\n\t\t\t{ fontSizes.map( ( fontSize, index ) => (\n\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\tkey={ fontSize.slug }\n\t\t\t\t\tvalue={ fontSize.size }\n\t\t\t\t\tlabel={ T_SHIRT_ABBREVIATIONS[ index ] }\n\t\t\t\t\taria-label={ fontSize.name \|\| T_SHIRT_NAMES[ index ] }\n\t\t\t\t\tshowTooltip\n\t\t\t\t/>\n\t\t\t) ) }\n\t\t</ToggleGroupControl>\n\t);\n};\n\nexport default FontSizePickerToggleGroup;\n"],"mappings":";;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AAKA,IAAAC,mBAAA,GAAAD,OAAA;AAIA,IAAAE,UAAA,GAAAF,OAAA;AAAmE,IAAAG,WAAA,GAAAH,OAAA;AAZnE;AACA;AACA;;AAGA;AACA;AACA;;AAQA,MAAMI,yBAAyB,GAAKC,KAAqC,IAAM;EAC9E,MAAM;IAAEC,SAAS;IAAEC,KAAK;IAAEC,qBAAqB;IAAEC,IAAI;IAAEC;EAAS,CAAC,GAAGL,KAAK;EACzE,oBACC,IAAAF,WAAA,CAAAQ,GAAA,EAACV,mBAAA,CAAAW,kBAAkB;IAClBC,uBAAuB;IACvBL,qBAAqB,EAAGA,qBAAuB;IAC/CM,KAAK,EAAG,IAAAC,QAAE,EAAE,WAAY,CAAG;IAC3BC,mBAAmB;~~IACnBT~~,KAAK,EAAGA,KAAO;IACfG,QAAQ,EAAGA,QAAU;~~IACrBO~~,OAAO;~~IACPR~~,IAAI,EAAGA,IAAM;~~IAAAS~~,QAAA,~~EAEXZ~~,SAAS,~~CAACa~~,GAAG,CAAE,CAAEC,QAAQ,EAAEC,KAAK,kBACjC,~~IAAAlB~~,WAAA,CAAAQ,GAAA,EAACV,mBAAA,~~CAAAqB~~,wBAAwB;~~MAExBf~~,KAAK,~~EAAGa~~,QAAQ,~~CAACX~~,IAAM;~~MACvBK~~,KAAK,EAAGS,gCAAqB,CAAEF,KAAK,CAAI;MACxC,cAAaD,QAAQ,CAACI,IAAI,IAAIC,wBAAa,CAAEJ,KAAK,CAAI;MACtDK,WAAW;IAAA,GAJLN,QAAQ,CAACO,IAKf,CACA;EAAC,CACgB,CAAC;AAEvB,CAAC;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAC,OAAA,~~GAEa1B~~,yBAAyB","ignoreList":[]}
1	+ {"version":3,"names":["_i18n","require","_toggleGroupControl","_constants","_jsxRuntime","FontSizePickerToggleGroup","props","fontSizes","value","__next40pxDefaultSize","size","onChange","jsx","ToggleGroupControl","__nextHasNoMarginBottom","__shouldNotWarnDeprecated36pxSize","label","__","hideLabelFromVision","isBlock","children","map","fontSize","index","ToggleGroupControlOption","T_SHIRT_ABBREVIATIONS","name","T_SHIRT_NAMES","showTooltip","slug","_default","exports","default"],"sources":["@wordpress/components/src/font-size-picker/font-size-picker-toggle-group.tsx"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { __ } from '@wordpress/i18n';\n\n/\n Internal dependencies\n */\nimport {\n\tToggleGroupControl,\n\tToggleGroupControlOption,\n} from '../toggle-group-control';\nimport { T_SHIRT_ABBREVIATIONS, T_SHIRT_NAMES } from './constants';\nimport type { FontSizePickerToggleGroupProps } from './types';\n\nconst FontSizePickerToggleGroup = ( props: FontSizePickerToggleGroupProps ) => {\n\tconst { fontSizes, value, __next40pxDefaultSize, size, onChange } = props;\n\treturn (\n\t\t<ToggleGroupControl\n\t\t\t__nextHasNoMarginBottom\n\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t__shouldNotWarnDeprecated36pxSize\n\t\t\tlabel={ __( 'Font size' ) }\n\t\t\thideLabelFromVision\n\t\t\tvalue={ value }\n\t\t\tonChange={ onChange }\n\t\t\tisBlock\n\t\t\tsize={ size }\n\t\t>\n\t\t\t{ fontSizes.map( ( fontSize, index ) => (\n\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\tkey={ fontSize.slug }\n\t\t\t\t\tvalue={ fontSize.size }\n\t\t\t\t\tlabel={ T_SHIRT_ABBREVIATIONS[ index ] }\n\t\t\t\t\taria-label={ fontSize.name \|\| T_SHIRT_NAMES[ index ] }\n\t\t\t\t\tshowTooltip\n\t\t\t\t/>\n\t\t\t) ) }\n\t\t</ToggleGroupControl>\n\t);\n};\n\nexport default FontSizePickerToggleGroup;\n"],"mappings":";;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AAKA,IAAAC,mBAAA,GAAAD,OAAA;AAIA,IAAAE,UAAA,GAAAF,OAAA;AAAmE,IAAAG,WAAA,GAAAH,OAAA;AAZnE;AACA;AACA;;AAGA;AACA;AACA;;AAQA,MAAMI,yBAAyB,GAAKC,KAAqC,IAAM;EAC9E,MAAM;IAAEC,SAAS;IAAEC,KAAK;IAAEC,qBAAqB;IAAEC,IAAI;IAAEC;EAAS,CAAC,GAAGL,KAAK;EACzE,oBACC,IAAAF,WAAA,CAAAQ,GAAA,EAACV,mBAAA,CAAAW,kBAAkB;IAClBC,uBAAuB;IACvBL,qBAAqB,EAAGA,qBAAuB;IAC/CM,iCAAiC;IACjCC,KAAK,EAAG,IAAAC,QAAE,EAAE,WAAY,CAAG;IAC3BC,mBAAmB;IACnBV,KAAK,EAAGA,KAAO;IACfG,QAAQ,EAAGA,QAAU;IACrBQ,OAAO;IACPT,IAAI,EAAGA,IAAM;IAAAU,QAAA,EAEXb,SAAS,CAACc,GAAG,CAAE,CAAEC,QAAQ,EAAEC,KAAK,kBACjC,IAAAnB,WAAA,CAAAQ,GAAA,EAACV,mBAAA,CAAAsB,wBAAwB;MAExBhB,KAAK,EAAGc,QAAQ,CAACZ,IAAM;MACvBM,KAAK,EAAGS,gCAAqB,CAAEF,KAAK,CAAI;MACxC,cAAaD,QAAQ,CAACI,IAAI,IAAIC,wBAAa,CAAEJ,KAAK,CAAI;MACtDK,WAAW;IAAA,GAJLN,QAAQ,CAACO,IAKf,CACA;EAAC,CACgB,CAAC;AAEvB,CAAC;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEa3B,yBAAyB","ignoreList":[]}

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

@@ -19,6 +19,7 @@ var _spacer = require("../spacer");
 var _fontSizePickerSelect = _interopRequireDefault(require("./font-size-picker-select"));
 var _fontSizePickerToggleGroup = _interopRequireDefault(require("./font-size-picker-toggle-group"));
 var _constants = require("./constants");
+var _deprecated36pxSize = require("../utils/deprecated-36px-size");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -94,6 +95,11 @@ const UnforwardedFontSizePicker = (props, ref) => {
   const [valueQuantity, valueUnit] = (0, _unitControl.parseQuantityAndUnitFromRawValue)(value, units);
   const isValueUnitRelative = !!valueUnit && ['em', 'rem', 'vw', 'vh'].includes(valueUnit);
   const isDisabled = value === undefined;
+  (0, _deprecated36pxSize.maybeWarnDeprecated36pxSize)({
+    componentName: 'FontSizePicker',
+    __next40pxDefaultSize,
+    size
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
     ref: ref,
     className: "components-font-size-picker",
@@ -174,6 +180,7 @@ const UnforwardedFontSizePicker = (props, ref) => {
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_rangeControl.default, {
               __nextHasNoMarginBottom: true,
               __next40pxDefaultSize: __next40pxDefaultSize,
+              __shouldNotWarnDeprecated36pxSize: true,
               className: "components-font-size-picker__custom-input",
               label: (0, _i18n.__)('Custom Size'),
               hideLabelFromVision: true,

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

	@@ -1 +1 @@
1	- {"version":3,"names":["_i18n","require","_icons","_element","_button","_rangeControl","_interopRequireDefault","_flex","_unitControl","_interopRequireWildcard","_visuallyHidden","_utils","_styles","_spacer","_fontSizePickerSelect","_fontSizePickerToggleGroup","_constants","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","DEFAULT_UNITS","MAX_TOGGLE_GROUP_SIZES","UnforwardedFontSizePicker","props","ref","__next40pxDefaultSize","fallbackFontSize","fontSizes","disableCustomFontSizes","onChange","size","units","unitsProp","value","withSlider","withReset","useCustomUnits","availableUnits","selectedFontSize","find","fontSize","isCustomValue","userRequestedCustom","setUserRequestedCustom","useState","currentPickerType","length","headerHint","useMemo","__","name","T_SHIRT_NAMES","indexOf","commonUnit","getCommonSizeUnit","hasUnits","valueQuantity","valueUnit","parseQuantityAndUnitFromRawValue","isValueUnitRelative","includes","isDisabled","undefined","jsxs","Container","className","children","jsx","VisuallyHidden","as","Spacer","Header","HeaderLabel","HeaderHint","HeaderToggle","label","icon","settings","onClick","isPressed","newValue","Number","onSelectCustom","Flex","FlexItem","isBlock","labelPosition","hideLabelFromVision","parseInt","min","marginX","marginBottom","__nextHasNoMarginBottom","initialPosition","withInputField","max","step","Button","disabled","accessibleWhenDisabled","variant","FontSizePicker","exports","forwardRef","_default"],"sources":["@wordpress/components/src/font-size-picker/index.tsx"],"sourcesContent":["/*\n External dependencies\n /\nimport type { ForwardedRef } from 'react';\n\n/\n WordPress dependencies\n /\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 type { FontSizePickerProps } from './types';\nimport {\n\tContainer,\n\tHeader,\n\tHeaderHint,\n\tHeaderLabel,\n\tHeaderToggle,\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 DEFAULT_UNITS = [ 'px', 'em', 'rem', 'vw', 'vh' ];\n\nconst MAX_TOGGLE_GROUP_SIZES = 5;\n\nconst UnforwardedFontSizePicker = (\n\tprops: FontSizePickerProps,\n\tref: ForwardedRef< any >\n) => {\n\tconst {\n\t\t__next40pxDefaultSize = false,\n\t\tfallbackFontSize,\n\t\tfontSizes = [],\n\t\tdisableCustomFontSizes = false,\n\t\tonChange,\n\t\tsize = 'default',\n\t\tunits: unitsProp = DEFAULT_UNITS,\n\t\tvalue,\n\t\twithSlider = false,\n\t\twithReset = true,\n\t} = props;\n\n\tconst units = useCustomUnits( {\n\t\tavailableUnits: unitsProp,\n\t} );\n\n\tconst selectedFontSize = fontSizes.find(\n\t\t( fontSize ) => fontSize.size === value\n\t);\n\tconst isCustomValue = !! value && ! selectedFontSize;\n\n\t// Initially request a custom picker if the value is not from the predef list.\n\tconst [ userRequestedCustom, setUserRequestedCustom ] =\n\t\tuseState( isCustomValue );\n\n\tlet currentPickerType;\n\tif ( ! disableCustomFontSizes && userRequestedCustom ) {\n\t\t// While showing the custom value picker, switch back to predef only if\n\t\t// `disableCustomFontSizes` is set to `true`.\n\t\tcurrentPickerType = 'custom' as const;\n\t} else {\n\t\tcurrentPickerType =\n\t\t\tfontSizes.length > MAX_TOGGLE_GROUP_SIZES\n\t\t\t\t? ( 'select' as const )\n\t\t\t\t: ( 'togglegroup' as const );\n\t}\n\n\tconst headerHint = useMemo( () => {\n\t\tswitch ( currentPickerType ) {\n\t\t\tcase 'custom':\n\t\t\t\treturn __( 'Custom' );\n\t\t\tcase 'togglegroup':\n\t\t\t\tif ( selectedFontSize ) {\n\t\t\t\t\treturn (\n\t\t\t\t\t\tselectedFontSize.name \|\|\n\t\t\t\t\t\tT_SHIRT_NAMES[ fontSizes.indexOf( selectedFontSize ) ]\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\tcase 'select':\n\t\t\t\tconst commonUnit = getCommonSizeUnit( fontSizes );\n\t\t\t\tif ( commonUnit ) {\n\t\t\t\t\treturn `(${ commonUnit })`;\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t}\n\n\t\treturn '';\n\t}, [ currentPickerType, selectedFontSize, fontSizes ] );\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', 'vw', 'vh' ].includes( valueUnit );\n\tconst isDisabled = value === undefined;\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<Header 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<HeaderToggle\n\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\tcurrentPickerType === 'custom'\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\tsetUserRequestedCustom( ! userRequestedCustom )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tisPressed={ currentPickerType === 'custom' }\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</Header>\n\t\t\t</Spacer>\n\t\t\t<div>\n\t\t\t\t{ currentPickerType === 'select' && (\n\t\t\t\t\t<FontSizePickerSelect\n\t\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t\tfontSizes={ fontSizes }\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\tdisableCustomFontSizes={ disableCustomFontSizes }\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\tonSelectCustom={ () => setUserRequestedCustom( true ) }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t{ currentPickerType === 'togglegroup' && (\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__next40pxDefaultSize={ __next40pxDefaultSize }\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{ currentPickerType === 'custom' && (\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\t__next40pxDefaultSize={ __next40pxDefaultSize }\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\tsetUserRequestedCustom( true );\n\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__next40pxDefaultSize={\n\t\t\t\t\t\t\t\t\t\t\t__next40pxDefaultSize\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\tsetUserRequestedCustom( true );\n\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<Button\n\t\t\t\t\t\t\t\t\tdisabled={ isDisabled }\n\t\t\t\t\t\t\t\t\taccessibleWhenDisabled\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\tvariant=\"secondary\"\n\t\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\t\tsize={\n\t\t\t\t\t\t\t\t\t\tsize === '__unstable-large' \|\|\n\t\t\t\t\t\t\t\t\t\tprops.__next40pxDefaultSize\n\t\t\t\t\t\t\t\t\t\t\t? 'default'\n\t\t\t\t\t\t\t\t\t\t\t: 'small'\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\t\t{ __( 'Reset' ) }\n\t\t\t\t\t\t\t\t</Button>\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</div>\n\t\t</Container>\n\t);\n};\n\nexport const FontSizePicker = forwardRef( UnforwardedFontSizePicker );\n\nexport default FontSizePicker;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"names":["_i18n","require","_icons","_element","_button","_rangeControl","_interopRequireDefault","_flex","_unitControl","_interopRequireWildcard","_visuallyHidden","_utils","_styles","_spacer","_fontSizePickerSelect","_fontSizePickerToggleGroup","_constants","_deprecated36pxSize","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","DEFAULT_UNITS","MAX_TOGGLE_GROUP_SIZES","UnforwardedFontSizePicker","props","ref","__next40pxDefaultSize","fallbackFontSize","fontSizes","disableCustomFontSizes","onChange","size","units","unitsProp","value","withSlider","withReset","useCustomUnits","availableUnits","selectedFontSize","find","fontSize","isCustomValue","userRequestedCustom","setUserRequestedCustom","useState","currentPickerType","length","headerHint","useMemo","__","name","T_SHIRT_NAMES","indexOf","commonUnit","getCommonSizeUnit","hasUnits","valueQuantity","valueUnit","parseQuantityAndUnitFromRawValue","isValueUnitRelative","includes","isDisabled","undefined","maybeWarnDeprecated36pxSize","componentName","jsxs","Container","className","children","jsx","VisuallyHidden","as","Spacer","Header","HeaderLabel","HeaderHint","HeaderToggle","label","icon","settings","onClick","isPressed","newValue","Number","onSelectCustom","Flex","FlexItem","isBlock","labelPosition","hideLabelFromVision","parseInt","min","marginX","marginBottom","__nextHasNoMarginBottom","__shouldNotWarnDeprecated36pxSize","initialPosition","withInputField","max","step","Button","disabled","accessibleWhenDisabled","variant","FontSizePicker","exports","forwardRef","_default"],"sources":["@wordpress/components/src/font-size-picker/index.tsx"],"sourcesContent":["/*\n External dependencies\n /\nimport type { ForwardedRef } from 'react';\n\n/\n WordPress dependencies\n /\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 type { FontSizePickerProps } from './types';\nimport {\n\tContainer,\n\tHeader,\n\tHeaderHint,\n\tHeaderLabel,\n\tHeaderToggle,\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';\nimport { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';\n\nconst DEFAULT_UNITS = [ 'px', 'em', 'rem', 'vw', 'vh' ];\n\nconst MAX_TOGGLE_GROUP_SIZES = 5;\n\nconst UnforwardedFontSizePicker = (\n\tprops: FontSizePickerProps,\n\tref: ForwardedRef< any >\n) => {\n\tconst {\n\t\t__next40pxDefaultSize = false,\n\t\tfallbackFontSize,\n\t\tfontSizes = [],\n\t\tdisableCustomFontSizes = false,\n\t\tonChange,\n\t\tsize = 'default',\n\t\tunits: unitsProp = DEFAULT_UNITS,\n\t\tvalue,\n\t\twithSlider = false,\n\t\twithReset = true,\n\t} = props;\n\n\tconst units = useCustomUnits( {\n\t\tavailableUnits: unitsProp,\n\t} );\n\n\tconst selectedFontSize = fontSizes.find(\n\t\t( fontSize ) => fontSize.size === value\n\t);\n\tconst isCustomValue = !! value && ! selectedFontSize;\n\n\t// Initially request a custom picker if the value is not from the predef list.\n\tconst [ userRequestedCustom, setUserRequestedCustom ] =\n\t\tuseState( isCustomValue );\n\n\tlet currentPickerType;\n\tif ( ! disableCustomFontSizes && userRequestedCustom ) {\n\t\t// While showing the custom value picker, switch back to predef only if\n\t\t// `disableCustomFontSizes` is set to `true`.\n\t\tcurrentPickerType = 'custom' as const;\n\t} else {\n\t\tcurrentPickerType =\n\t\t\tfontSizes.length > MAX_TOGGLE_GROUP_SIZES\n\t\t\t\t? ( 'select' as const )\n\t\t\t\t: ( 'togglegroup' as const );\n\t}\n\n\tconst headerHint = useMemo( () => {\n\t\tswitch ( currentPickerType ) {\n\t\t\tcase 'custom':\n\t\t\t\treturn __( 'Custom' );\n\t\t\tcase 'togglegroup':\n\t\t\t\tif ( selectedFontSize ) {\n\t\t\t\t\treturn (\n\t\t\t\t\t\tselectedFontSize.name \|\|\n\t\t\t\t\t\tT_SHIRT_NAMES[ fontSizes.indexOf( selectedFontSize ) ]\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\tcase 'select':\n\t\t\t\tconst commonUnit = getCommonSizeUnit( fontSizes );\n\t\t\t\tif ( commonUnit ) {\n\t\t\t\t\treturn `(${ commonUnit })`;\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t}\n\n\t\treturn '';\n\t}, [ currentPickerType, selectedFontSize, fontSizes ] );\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', 'vw', 'vh' ].includes( valueUnit );\n\tconst isDisabled = value === undefined;\n\n\tmaybeWarnDeprecated36pxSize( {\n\t\tcomponentName: 'FontSizePicker',\n\t\t__next40pxDefaultSize,\n\t\tsize,\n\t} );\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<Header 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<HeaderToggle\n\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\tcurrentPickerType === 'custom'\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\tsetUserRequestedCustom( ! userRequestedCustom )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tisPressed={ currentPickerType === 'custom' }\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</Header>\n\t\t\t</Spacer>\n\t\t\t<div>\n\t\t\t\t{ currentPickerType === 'select' && (\n\t\t\t\t\t<FontSizePickerSelect\n\t\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t\tfontSizes={ fontSizes }\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\tdisableCustomFontSizes={ disableCustomFontSizes }\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\tonSelectCustom={ () => setUserRequestedCustom( true ) }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t{ currentPickerType === 'togglegroup' && (\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__next40pxDefaultSize={ __next40pxDefaultSize }\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{ currentPickerType === 'custom' && (\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\t__next40pxDefaultSize={ __next40pxDefaultSize }\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\tsetUserRequestedCustom( true );\n\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__next40pxDefaultSize={\n\t\t\t\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t__shouldNotWarnDeprecated36pxSize\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\tsetUserRequestedCustom( true );\n\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<Button\n\t\t\t\t\t\t\t\t\tdisabled={ isDisabled }\n\t\t\t\t\t\t\t\t\taccessibleWhenDisabled\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\tvariant=\"secondary\"\n\t\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\t\tsize={\n\t\t\t\t\t\t\t\t\t\tsize === '__unstable-large' \|\|\n\t\t\t\t\t\t\t\t\t\tprops.__next40pxDefaultSize\n\t\t\t\t\t\t\t\t\t\t\t? 'default'\n\t\t\t\t\t\t\t\t\t\t\t: 'small'\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\t\t{ __( 'Reset' ) }\n\t\t\t\t\t\t\t\t</Button>\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</div>\n\t\t</Container>\n\t);\n};\n\nexport const FontSizePicker = forwardRef( UnforwardedFontSizePicker );\n\nexport default FontSizePicker;\n"],"mappings":"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","ignoreList":[]}

package/build/form-file-upload/index.js CHANGED Viewed

@@ -53,6 +53,12 @@ function FormFileUpload({
     ...props,
     children: children
   });
+  // @todo: Temporary fix a bug that prevents Chromium browsers from selecting ".heic" files
+  // from the file upload. See https://core.trac.wordpress.org/ticket/62268#comment:4.
+  // This can be removed once the Chromium fix is in the stable channel.
+  // Prevent Safari from adding "image/heic" and "image/heif" to the accept attribute.
+  const isSafari = globalThis.window?.navigator.userAgent.includes('Safari') && !globalThis.window?.navigator.userAgent.includes('Chrome') && !globalThis.window?.navigator.userAgent.includes('Chromium');
+  const compatAccept = !isSafari && !!accept?.includes('image/*') ? `${accept}, image/heic, image/heif` : accept;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: "components-form-file-upload",
     children: [ui, /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
@@ -62,7 +68,7 @@ function FormFileUpload({
       style: {
         display: 'none'
       },
-      accept: accept,
+      accept: compatAccept,
       onChange: onChange,
       onClick: onClick,
       "data-testid": "form-file-upload-input"

package/build/form-file-upload/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["_element","require","_button","_interopRequireDefault","_jsxRuntime","FormFileUpload","accept","children","multiple","onChange","onClick","render","props","ref","useRef","openFileDialog","current","click","ui","jsx","default","jsxs","className","type","style","display","_default","exports"],"sources":["@wordpress/components/src/form-file-upload/index.tsx"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { useRef } from '@wordpress/element';\n\n/\n Internal dependencies\n /\nimport Button from '../button';\nimport type { WordPressComponentProps } from '../context';\nimport type { FormFileUploadProps } from './types';\n\n/\n FormFileUpload is a component that allows users to select files from their local device.\n \n ```jsx\n * import { FormFileUpload } from '@wordpress/components';\n \n const MyFormFileUpload = () => (\n * <FormFileUpload\n * accept=\"image/\"\n onChange={ ( event ) => console.log( event.currentTarget.files ) }\n * >\n * Upload\n * </FormFileUpload>\n * );\n * ```\n */\nexport function FormFileUpload( {\n\taccept,\n\tchildren,\n\tmultiple = false,\n\tonChange,\n\tonClick,\n\trender,\n\t...props\n}: WordPressComponentProps< FormFileUploadProps, 'button', false > ) {\n\tconst ref = useRef< HTMLInputElement >( null );\n\tconst openFileDialog = () => {\n\t\tref.current?.click();\n\t};\n\n\tconst ui = render ? (\n\t\trender( { openFileDialog } )\n\t) : (\n\t\t<Button onClick={ openFileDialog } { ...props }>\n\t\t\t{ children }\n\t\t</Button>\n\t);\n\n\treturn (\n\t\t<div className=\"components-form-file-upload\">\n\t\t\t{ ui }\n\t\t\t<input\n\t\t\t\ttype=\"file\"\n\t\t\t\tref={ ref }\n\t\t\t\tmultiple={ multiple }\n\t\t\t\tstyle={ { display: 'none' } }\n\t\t\t\taccept={ ~~accept~~ }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tonClick={ onClick }\n\t\t\t\tdata-testid=\"form-file-upload-input\"\n\t\t\t/>\n\t\t</div>\n\t);\n}\n\nexport default FormFileUpload;\n"],"mappings":";;;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAKA,IAAAC,OAAA,GAAAC,sBAAA,CAAAF,OAAA;AAA+B,IAAAG,WAAA,GAAAH,OAAA;AAR/B;AACA;AACA;;AAGA;AACA;AACA;;AAKA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASI,cAAcA,CAAE;EAC/BC,MAAM;EACNC,QAAQ;EACRC,QAAQ,GAAG,KAAK;EAChBC,QAAQ;EACRC,OAAO;EACPC,MAAM;EACN,GAAGC;AAC6D,CAAC,EAAG;EACpE,MAAMC,GAAG,GAAG,IAAAC,eAAM,EAAsB,IAAK,CAAC;EAC9C,MAAMC,cAAc,GAAGA,CAAA,KAAM;IAC5BF,GAAG,CAACG,OAAO,EAAEC,KAAK,CAAC,CAAC;EACrB,CAAC;EAED,MAAMC,EAAE,GAAGP,MAAM,GAChBA,MAAM,CAAE;IAAEI;EAAe,CAAE,CAAC,gBAE5B,IAAAX,WAAA,CAAAe,GAAA,EAACjB,OAAA,CAAAkB,OAAM;IAACV,OAAO,EAAGK,cAAgB;IAAA,GAAMH,KAAK;IAAAL,QAAA,EAC1CA;EAAQ,CACH,CACR;~~EAED~~,oBACC,~~IAAAH~~,WAAA,~~CAAAiB~~,IAAA;IAAKC,SAAS,EAAC,6BAA6B;~~IAAAf~~,QAAA,GACzCW,EAAE,eACJ,IAAAd,WAAA,CAAAe,GAAA;~~MACCI~~,IAAI,EAAC,MAAM;~~MACXV~~,GAAG,EAAGA,GAAK;MACXL,QAAQ,EAAGA,QAAU;~~MACrBgB~~,KAAK,EAAG;QAAEC,OAAO,EAAE;MAAO,CAAG;~~MAC7BnB~~,MAAM,~~EAAGA~~,~~MAAQ~~;~~MACjBG~~,QAAQ,EAAGA,QAAU;MACrBC,OAAO,EAAGA,OAAS;MACnB,eAAY;IAAwB,CACpC,CAAC;EAAA,CACE,CAAC;AAER;AAAC,~~IAAAgB~~,QAAA,GAAAC,OAAA,~~CAAAP~~,OAAA,GAEcf,cAAc","ignoreList":[]}
1	+ {"version":3,"names":["_element","require","_button","_interopRequireDefault","_jsxRuntime","FormFileUpload","accept","children","multiple","onChange","onClick","render","props","ref","useRef","openFileDialog","current","click","ui","jsx","default","isSafari","globalThis","window","navigator","userAgent","includes","compatAccept","jsxs","className","type","style","display","_default","exports"],"sources":["@wordpress/components/src/form-file-upload/index.tsx"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { useRef } from '@wordpress/element';\n\n/\n Internal dependencies\n /\nimport Button from '../button';\nimport type { WordPressComponentProps } from '../context';\nimport type { FormFileUploadProps } from './types';\n\n/\n FormFileUpload is a component that allows users to select files from their local device.\n \n ```jsx\n * import { FormFileUpload } from '@wordpress/components';\n \n const MyFormFileUpload = () => (\n * <FormFileUpload\n * accept=\"image/\"\n onChange={ ( event ) => console.log( event.currentTarget.files ) }\n * >\n * Upload\n * </FormFileUpload>\n * );\n * ```\n /\nexport function FormFileUpload( {\n\taccept,\n\tchildren,\n\tmultiple = false,\n\tonChange,\n\tonClick,\n\trender,\n\t...props\n}: WordPressComponentProps< FormFileUploadProps, 'button', false > ) {\n\tconst ref = useRef< HTMLInputElement >( null );\n\tconst openFileDialog = () => {\n\t\tref.current?.click();\n\t};\n\n\tconst ui = render ? (\n\t\trender( { openFileDialog } )\n\t) : (\n\t\t<Button onClick={ openFileDialog } { ...props }>\n\t\t\t{ children }\n\t\t</Button>\n\t);\n\t// @todo: Temporary fix a bug that prevents Chromium browsers from selecting \".heic\" files\n\t// from the file upload. See https://core.trac.wordpress.org/ticket/62268#comment:4.\n\t// This can be removed once the Chromium fix is in the stable channel.\n\t// Prevent Safari from adding \"image/heic\" and \"image/heif\" to the accept attribute.\n\tconst isSafari =\n\t\tglobalThis.window?.navigator.userAgent.includes( 'Safari' ) &&\n\t\t! globalThis.window?.navigator.userAgent.includes( 'Chrome' ) &&\n\t\t! globalThis.window?.navigator.userAgent.includes( 'Chromium' );\n\tconst compatAccept =\n\t\t! isSafari && !! accept?.includes( 'image/' )\n\t\t\t? `${ accept }, image/heic, image/heif`\n\t\t\t: accept;\n\n\treturn (\n\t\t<div className=\"components-form-file-upload\">\n\t\t\t{ ui }\n\t\t\t<input\n\t\t\t\ttype=\"file\"\n\t\t\t\tref={ ref }\n\t\t\t\tmultiple={ multiple }\n\t\t\t\tstyle={ { display: 'none' } }\n\t\t\t\taccept={ compatAccept }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tonClick={ onClick }\n\t\t\t\tdata-testid=\"form-file-upload-input\"\n\t\t\t/>\n\t\t</div>\n\t);\n}\n\nexport default FormFileUpload;\n"],"mappings":";;;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAKA,IAAAC,OAAA,GAAAC,sBAAA,CAAAF,OAAA;AAA+B,IAAAG,WAAA,GAAAH,OAAA;AAR/B;AACA;AACA;;AAGA;AACA;AACA;;AAKA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASI,cAAcA,CAAE;EAC/BC,MAAM;EACNC,QAAQ;EACRC,QAAQ,GAAG,KAAK;EAChBC,QAAQ;EACRC,OAAO;EACPC,MAAM;EACN,GAAGC;AAC6D,CAAC,EAAG;EACpE,MAAMC,GAAG,GAAG,IAAAC,eAAM,EAAsB,IAAK,CAAC;EAC9C,MAAMC,cAAc,GAAGA,CAAA,KAAM;IAC5BF,GAAG,CAACG,OAAO,EAAEC,KAAK,CAAC,CAAC;EACrB,CAAC;EAED,MAAMC,EAAE,GAAGP,MAAM,GAChBA,MAAM,CAAE;IAAEI;EAAe,CAAE,CAAC,gBAE5B,IAAAX,WAAA,CAAAe,GAAA,EAACjB,OAAA,CAAAkB,OAAM;IAACV,OAAO,EAAGK,cAAgB;IAAA,GAAMH,KAAK;IAAAL,QAAA,EAC1CA;EAAQ,CACH,CACR;EACD;EACA;EACA;EACA;EACA,MAAMc,QAAQ,GACbC,UAAU,CAACC,MAAM,EAAEC,SAAS,CAACC,SAAS,CAACC,QAAQ,CAAE,QAAS,CAAC,IAC3D,CAAEJ,UAAU,CAACC,MAAM,EAAEC,SAAS,CAACC,SAAS,CAACC,QAAQ,CAAE,QAAS,CAAC,IAC7D,CAAEJ,UAAU,CAACC,MAAM,EAAEC,SAAS,CAACC,SAAS,CAACC,QAAQ,CAAE,UAAW,CAAC;EAChE,MAAMC,YAAY,GACjB,CAAEN,QAAQ,IAAI,CAAC,CAAEf,MAAM,EAAEoB,QAAQ,CAAE,SAAU,CAAC,GAC3C,GAAIpB,MAAM,0BAA2B,GACrCA,MAAM;EAEV,oBACC,IAAAF,WAAA,CAAAwB,IAAA;IAAKC,SAAS,EAAC,6BAA6B;IAAAtB,QAAA,GACzCW,EAAE,eACJ,IAAAd,WAAA,CAAAe,GAAA;MACCW,IAAI,EAAC,MAAM;MACXjB,GAAG,EAAGA,GAAK;MACXL,QAAQ,EAAGA,QAAU;MACrBuB,KAAK,EAAG;QAAEC,OAAO,EAAE;MAAO,CAAG;MAC7B1B,MAAM,EAAGqB,YAAc;MACvBlB,QAAQ,EAAGA,QAAU;MACrBC,OAAO,EAAGA,OAAS;MACnB,eAAY;IAAwB,CACpC,CAAC;EAAA,CACE,CAAC;AAER;AAAC,IAAAuB,QAAA,GAAAC,OAAA,CAAAd,OAAA,GAEcf,cAAc","ignoreList":[]}

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

@@ -70,6 +70,7 @@ function Token({
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
       className: "components-form-token-field__remove-token",
+      size: "small",
       icon: _icons.closeSmall,
       onClick: !disabled ? onClick : undefined
       // Disable reason: Even when FormTokenField itself is accessibly disabled, token reset buttons shouldn't be in the tab sequence.

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

	@@ -1 +1 @@
1	- {"version":3,"names":["_clsx","_interopRequireDefault","require","_compose","_i18n","_icons","_button","_visuallyHidden","_jsxRuntime","noop","Token","value","status","title","displayTransform","isBorderless","disabled","onClickRemove","onMouseEnter","onMouseLeave","messages","termPosition","termsCount","instanceId","useInstanceId","tokenClasses","clsx","onClick","transformedValue","termPositionAndCount","sprintf","__","jsxs","className","children","id","jsx","VisuallyHidden","as","default","icon","closeSmall","undefined","label","remove"],"sources":["@wordpress/components/src/form-token-field/token.tsx"],"sourcesContent":["/*\n External dependencies\n /\nimport clsx from 'clsx';\n\n/\n WordPress dependencies\n /\nimport { useInstanceId } from '@wordpress/compose';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { closeSmall } from '@wordpress/icons';\n\n/\n Internal dependencies\n /\nimport Button from '../button';\nimport { VisuallyHidden } from '../visually-hidden';\nimport type { TokenProps } from './types';\n\nconst noop = () => {};\n\nexport default function Token( {\n\tvalue,\n\tstatus,\n\ttitle,\n\tdisplayTransform,\n\tisBorderless = false,\n\tdisabled = false,\n\tonClickRemove = noop,\n\tonMouseEnter,\n\tonMouseLeave,\n\tmessages,\n\ttermPosition,\n\ttermsCount,\n}: TokenProps ) {\n\tconst instanceId = useInstanceId( Token );\n\tconst tokenClasses = clsx( 'components-form-token-field__token', {\n\t\t'is-error': 'error' === status,\n\t\t'is-success': 'success' === status,\n\t\t'is-validating': 'validating' === status,\n\t\t'is-borderless': isBorderless,\n\t\t'is-disabled': disabled,\n\t} );\n\n\tconst onClick = () => onClickRemove( { value } );\n\n\tconst transformedValue = displayTransform( value );\n\tconst termPositionAndCount = sprintf(\n\t\t/ translators: 1: term name, 2: term position in a set of terms, 3: total term set count. */\n\t\t__( '%1$s (%2$s of %3$s)' ),\n\t\ttransformedValue,\n\t\ttermPosition,\n\t\ttermsCount\n\t);\n\n\treturn (\n\t\t<span\n\t\t\tclassName={ tokenClasses }\n\t\t\tonMouseEnter={ onMouseEnter }\n\t\t\tonMouseLeave={ onMouseLeave }\n\t\t\ttitle={ title }\n\t\t>\n\t\t\t<span\n\t\t\t\tclassName=\"components-form-token-field__token-text\"\n\t\t\t\tid={ `components-form-token-field__token-text-${ instanceId }` }\n\t\t\t>\n\t\t\t\t<VisuallyHidden as=\"span\">\n\t\t\t\t\t{ termPositionAndCount }\n\t\t\t\t</VisuallyHidden>\n\t\t\t\t<span aria-hidden=\"true\">{ transformedValue }</span>\n\t\t\t</span>\n\n\t\t\t<Button\n\t\t\t\tclassName=\"components-form-token-field__remove-token\"\n\t\t\t\ticon={ closeSmall }\n\t\t\t\tonClick={ ! disabled ? onClick : undefined }\n\t\t\t\t// Disable reason: Even when FormTokenField itself is accessibly disabled, token reset buttons shouldn't be in the tab sequence.\n\t\t\t\t// eslint-disable-next-line no-restricted-syntax\n\t\t\t\tdisabled={ disabled }\n\t\t\t\tlabel={ messages.remove }\n\t\t\t\taria-describedby={ `components-form-token-field__token-text-${ instanceId }` }\n\t\t\t/>\n\t\t</span>\n\t);\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AAKA,IAAAI,OAAA,GAAAL,sBAAA,CAAAC,OAAA;AACA,IAAAK,eAAA,GAAAL,OAAA;AAAoD,IAAAM,WAAA,GAAAN,OAAA;AAhBpD;AACA;AACA;;AAGA;AACA;AACA;;AAKA;AACA;AACA;;AAKA,MAAMO,IAAI,GAAGA,CAAA,KAAM,CAAC,CAAC;AAEN,SAASC,KAAKA,CAAE;EAC9BC,KAAK;EACLC,MAAM;EACNC,KAAK;EACLC,gBAAgB;EAChBC,YAAY,GAAG,KAAK;EACpBC,QAAQ,GAAG,KAAK;EAChBC,aAAa,GAAGR,IAAI;EACpBS,YAAY;EACZC,YAAY;EACZC,QAAQ;EACRC,YAAY;EACZC;AACW,CAAC,EAAG;EACf,MAAMC,UAAU,GAAG,IAAAC,sBAAa,EAAEd,KAAM,CAAC;EACzC,MAAMe,YAAY,GAAG,IAAAC,aAAI,EAAE,oCAAoC,EAAE;IAChE,UAAU,EAAE,OAAO,KAAKd,MAAM;IAC9B,YAAY,EAAE,SAAS,KAAKA,MAAM;IAClC,eAAe,EAAE,YAAY,KAAKA,MAAM;IACxC,eAAe,EAAEG,YAAY;IAC7B,aAAa,EAAEC;EAChB,CAAE,CAAC;EAEH,MAAMW,OAAO,GAAGA,CAAA,KAAMV,aAAa,CAAE;IAAEN;EAAM,CAAE,CAAC;EAEhD,MAAMiB,gBAAgB,GAAGd,gBAAgB,CAAEH,KAAM,CAAC;EAClD,MAAMkB,oBAAoB,GAAG,IAAAC,aAAO,EACnC;EACA,IAAAC,QAAE,EAAE,qBAAsB,CAAC,EAC3BH,gBAAgB,EAChBP,YAAY,EACZC,UACD,CAAC;EAED,oBACC,IAAAd,WAAA,CAAAwB,IAAA;IACCC,SAAS,EAAGR,YAAc;IAC1BP,YAAY,EAAGA,YAAc;IAC7BC,YAAY,EAAGA,YAAc;IAC7BN,KAAK,EAAGA,KAAO;IAAAqB,QAAA,gBAEf,IAAA1B,WAAA,CAAAwB,IAAA;MACCC,SAAS,EAAC,yCAAyC;MACnDE,EAAE,EAAG,2CAA4CZ,UAAU,EAAK;MAAAW,QAAA,gBAEhE,IAAA1B,WAAA,CAAA4B,GAAA,EAAC7B,eAAA,CAAA8B,cAAc;QAACC,EAAE,EAAC,MAAM;QAAAJ,QAAA,EACtBL;MAAoB,CACP,CAAC,eACjB,IAAArB,WAAA,CAAA4B,GAAA;QAAM,eAAY,MAAM;QAAAF,QAAA,EAAGN;MAAgB,CAAQ,CAAC;IAAA,CAC/C,CAAC,eAEP,IAAApB,WAAA,CAAA4B,GAAA,EAAC9B,OAAA,CAAAiC,OAAM;MACNN,SAAS,EAAC,2CAA2C;MACrDO,IAAI,EAAGC,iBAAY;~~MACnBd~~,OAAO,EAAG,CAAEX,QAAQ,GAAGW,OAAO,~~GAAGe~~;MACjC;MACA;MAAA;~~MACA1B~~,QAAQ,EAAGA,QAAU;~~MACrB2B~~,KAAK,~~EAAGvB~~,QAAQ,~~CAACwB~~,MAAQ;MACzB,oBAAmB,~~2CAA4CrB~~,UAAU;IAAK,CAC9E,CAAC;EAAA,CACG,CAAC;AAET","ignoreList":[]}
1	+ {"version":3,"names":["_clsx","_interopRequireDefault","require","_compose","_i18n","_icons","_button","_visuallyHidden","_jsxRuntime","noop","Token","value","status","title","displayTransform","isBorderless","disabled","onClickRemove","onMouseEnter","onMouseLeave","messages","termPosition","termsCount","instanceId","useInstanceId","tokenClasses","clsx","onClick","transformedValue","termPositionAndCount","sprintf","__","jsxs","className","children","id","jsx","VisuallyHidden","as","default","size","icon","closeSmall","undefined","label","remove"],"sources":["@wordpress/components/src/form-token-field/token.tsx"],"sourcesContent":["/*\n External dependencies\n /\nimport clsx from 'clsx';\n\n/\n WordPress dependencies\n /\nimport { useInstanceId } from '@wordpress/compose';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { closeSmall } from '@wordpress/icons';\n\n/\n Internal dependencies\n /\nimport Button from '../button';\nimport { VisuallyHidden } from '../visually-hidden';\nimport type { TokenProps } from './types';\n\nconst noop = () => {};\n\nexport default function Token( {\n\tvalue,\n\tstatus,\n\ttitle,\n\tdisplayTransform,\n\tisBorderless = false,\n\tdisabled = false,\n\tonClickRemove = noop,\n\tonMouseEnter,\n\tonMouseLeave,\n\tmessages,\n\ttermPosition,\n\ttermsCount,\n}: TokenProps ) {\n\tconst instanceId = useInstanceId( Token );\n\tconst tokenClasses = clsx( 'components-form-token-field__token', {\n\t\t'is-error': 'error' === status,\n\t\t'is-success': 'success' === status,\n\t\t'is-validating': 'validating' === status,\n\t\t'is-borderless': isBorderless,\n\t\t'is-disabled': disabled,\n\t} );\n\n\tconst onClick = () => onClickRemove( { value } );\n\n\tconst transformedValue = displayTransform( value );\n\tconst termPositionAndCount = sprintf(\n\t\t/ translators: 1: term name, 2: term position in a set of terms, 3: total term set count. */\n\t\t__( '%1$s (%2$s of %3$s)' ),\n\t\ttransformedValue,\n\t\ttermPosition,\n\t\ttermsCount\n\t);\n\n\treturn (\n\t\t<span\n\t\t\tclassName={ tokenClasses }\n\t\t\tonMouseEnter={ onMouseEnter }\n\t\t\tonMouseLeave={ onMouseLeave }\n\t\t\ttitle={ title }\n\t\t>\n\t\t\t<span\n\t\t\t\tclassName=\"components-form-token-field__token-text\"\n\t\t\t\tid={ `components-form-token-field__token-text-${ instanceId }` }\n\t\t\t>\n\t\t\t\t<VisuallyHidden as=\"span\">\n\t\t\t\t\t{ termPositionAndCount }\n\t\t\t\t</VisuallyHidden>\n\t\t\t\t<span aria-hidden=\"true\">{ transformedValue }</span>\n\t\t\t</span>\n\n\t\t\t<Button\n\t\t\t\tclassName=\"components-form-token-field__remove-token\"\n\t\t\t\tsize=\"small\"\n\t\t\t\ticon={ closeSmall }\n\t\t\t\tonClick={ ! disabled ? onClick : undefined }\n\t\t\t\t// Disable reason: Even when FormTokenField itself is accessibly disabled, token reset buttons shouldn't be in the tab sequence.\n\t\t\t\t// eslint-disable-next-line no-restricted-syntax\n\t\t\t\tdisabled={ disabled }\n\t\t\t\tlabel={ messages.remove }\n\t\t\t\taria-describedby={ `components-form-token-field__token-text-${ instanceId }` }\n\t\t\t/>\n\t\t</span>\n\t);\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AAKA,IAAAI,OAAA,GAAAL,sBAAA,CAAAC,OAAA;AACA,IAAAK,eAAA,GAAAL,OAAA;AAAoD,IAAAM,WAAA,GAAAN,OAAA;AAhBpD;AACA;AACA;;AAGA;AACA;AACA;;AAKA;AACA;AACA;;AAKA,MAAMO,IAAI,GAAGA,CAAA,KAAM,CAAC,CAAC;AAEN,SAASC,KAAKA,CAAE;EAC9BC,KAAK;EACLC,MAAM;EACNC,KAAK;EACLC,gBAAgB;EAChBC,YAAY,GAAG,KAAK;EACpBC,QAAQ,GAAG,KAAK;EAChBC,aAAa,GAAGR,IAAI;EACpBS,YAAY;EACZC,YAAY;EACZC,QAAQ;EACRC,YAAY;EACZC;AACW,CAAC,EAAG;EACf,MAAMC,UAAU,GAAG,IAAAC,sBAAa,EAAEd,KAAM,CAAC;EACzC,MAAMe,YAAY,GAAG,IAAAC,aAAI,EAAE,oCAAoC,EAAE;IAChE,UAAU,EAAE,OAAO,KAAKd,MAAM;IAC9B,YAAY,EAAE,SAAS,KAAKA,MAAM;IAClC,eAAe,EAAE,YAAY,KAAKA,MAAM;IACxC,eAAe,EAAEG,YAAY;IAC7B,aAAa,EAAEC;EAChB,CAAE,CAAC;EAEH,MAAMW,OAAO,GAAGA,CAAA,KAAMV,aAAa,CAAE;IAAEN;EAAM,CAAE,CAAC;EAEhD,MAAMiB,gBAAgB,GAAGd,gBAAgB,CAAEH,KAAM,CAAC;EAClD,MAAMkB,oBAAoB,GAAG,IAAAC,aAAO,EACnC;EACA,IAAAC,QAAE,EAAE,qBAAsB,CAAC,EAC3BH,gBAAgB,EAChBP,YAAY,EACZC,UACD,CAAC;EAED,oBACC,IAAAd,WAAA,CAAAwB,IAAA;IACCC,SAAS,EAAGR,YAAc;IAC1BP,YAAY,EAAGA,YAAc;IAC7BC,YAAY,EAAGA,YAAc;IAC7BN,KAAK,EAAGA,KAAO;IAAAqB,QAAA,gBAEf,IAAA1B,WAAA,CAAAwB,IAAA;MACCC,SAAS,EAAC,yCAAyC;MACnDE,EAAE,EAAG,2CAA4CZ,UAAU,EAAK;MAAAW,QAAA,gBAEhE,IAAA1B,WAAA,CAAA4B,GAAA,EAAC7B,eAAA,CAAA8B,cAAc;QAACC,EAAE,EAAC,MAAM;QAAAJ,QAAA,EACtBL;MAAoB,CACP,CAAC,eACjB,IAAArB,WAAA,CAAA4B,GAAA;QAAM,eAAY,MAAM;QAAAF,QAAA,EAAGN;MAAgB,CAAQ,CAAC;IAAA,CAC/C,CAAC,eAEP,IAAApB,WAAA,CAAA4B,GAAA,EAAC9B,OAAA,CAAAiC,OAAM;MACNN,SAAS,EAAC,2CAA2C;MACrDO,IAAI,EAAC,OAAO;MACZC,IAAI,EAAGC,iBAAY;MACnBf,OAAO,EAAG,CAAEX,QAAQ,GAAGW,OAAO,GAAGgB;MACjC;MACA;MAAA;MACA3B,QAAQ,EAAGA,QAAU;MACrB4B,KAAK,EAAGxB,QAAQ,CAACyB,MAAQ;MACzB,oBAAmB,2CAA4CtB,UAAU;IAAK,CAC9E,CAAC;EAAA,CACG,CAAC;AAET","ignoreList":[]}

package/build/gradient-picker/index.js CHANGED Viewed

@@ -150,44 +150,44 @@ function Component(props) {
 }
 /**
- *  GradientPicker is a React component that renders a color gradient picker to
+ * GradientPicker is a React component that renders a color gradient picker to
  * define a multi step gradient. There's either a _linear_ or a _radial_ type
  * available.
  *
  * ```jsx
- *import { GradientPicker } from '@wordpress/components';
- *import { useState } from '@wordpress/element';
+ * import { useState } from 'react';
+ * import { GradientPicker } from '@wordpress/components';
  *
- *const myGradientPicker = () => {
- *	const [ gradient, setGradient ] = useState( null );
+ * const MyGradientPicker = () => {
+ *   const [ gradient, setGradient ] = useState( null );
  *
- *	return (
- *		<GradientPicker
- *			value={ gradient }
- *			onChange={ ( currentGradient ) => setGradient( currentGradient ) }
- *			gradients={ [
- *				{
- *					name: 'JShine',
- *					gradient:
- *						'linear-gradient(135deg,#12c2e9 0%,#c471ed 50%,#f64f59 100%)',
- *					slug: 'jshine',
- *				},
- *				{
- *					name: 'Moonlit Asteroid',
- *					gradient:
- *						'linear-gradient(135deg,#0F2027 0%, #203A43 0%, #2c5364 100%)',
- *					slug: 'moonlit-asteroid',
- *				},
- *				{
- *					name: 'Rastafarie',
- *					gradient:
- *						'linear-gradient(135deg,#1E9600 0%, #FFF200 0%, #FF0000 100%)',
- *					slug: 'rastafari',
- *				},
- *			] }
- *		/>
- *	);
- *};
+ *   return (
+ *     <GradientPicker
+ *       value={ gradient }
+ *       onChange={ ( currentGradient ) => setGradient( currentGradient ) }
+ *       gradients={ [
+ *         {
+ *           name: 'JShine',
+ *           gradient:
+ *             'linear-gradient(135deg,#12c2e9 0%,#c471ed 50%,#f64f59 100%)',
+ *           slug: 'jshine',
+ *         },
+ *         {
+ *           name: 'Moonlit Asteroid',
+ *           gradient:
+ *             'linear-gradient(135deg,#0F2027 0%, #203A43 0%, #2c5364 100%)',
+ *           slug: 'moonlit-asteroid',
+ *         },
+ *         {
+ *           name: 'Rastafarie',
+ *           gradient:
+ *             'linear-gradient(135deg,#1E9600 0%, #FFF200 0%, #FF0000 100%)',
+ *           slug: 'rastafari',
+ *         },
+ *       ] }
+ *     />
+ *   );
+ * };
  *```
  *
  */
@@ -218,6 +218,8 @@ function GradientPicker({
       value: value,
       actions: clearable && !disableCustomGradients && /*#__PURE__*/(0, _jsxRuntime.jsx)(_circularOptionPicker.default.ButtonAction, {
         onClick: clearGradient,
+        accessibleWhenDisabled: true,
+        disabled: !value,
         children: (0, _i18n.__)('Clear')
       }),
       headingLevel: headingLevel

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

	@@ -1 +1 @@
1	- {"version":3,"names":["_i18n","require","_compose","_element","_circularOptionPicker","_interopRequireDefault","_customGradientPicker","_vStack","_styles","_jsxRuntime","isMultipleOriginObject","obj","Array","isArray","gradients","isMultipleOriginArray","arr","length","every","gradientObj","SingleOrigin","className","clearGradient","onChange","value","additionalProps","gradientOptions","useMemo","map","gradient","name","slug","index","jsx","default","Option","isSelected","tooltipText","sprintf","__","style","color","background","onClick","OptionGroup","options","MultipleOrigin","headingLevel","instanceId","useInstanceId","VStack","spacing","children","gradientSet","id","jsxs","ColorHeading","level","Component","props","asButtons","loop","actions","ariaLabel","ariaLabelledby","metaProps","_metaProps","GradientPicker","clearable","disableCustomGradients","__experimentalIsRenderedInSidebar","useCallback","undefined","ButtonAction","_default","exports"],"sources":["@wordpress/components/src/gradient-picker/index.tsx"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useInstanceId } from '@wordpress/compose';\nimport { useCallback, useMemo } from '@wordpress/element';\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 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\t...additionalProps\n}: PickerProps< GradientObject > ) {\n\tconst gradientOptions = useMemo( () => {\n\t\treturn gradients.map( ( { gradient, name, slug }, index ) => (\n\t\t\t<CircularOptionPicker.Option\n\t\t\t\tkey={ slug }\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.OptionGroup\n\t\t\tclassName={ className }\n\t\t\toptions={ gradientOptions }\n\t\t\t{ ...additionalProps }\n\t\t/>\n\t);\n}\n\nfunction MultipleOrigin( {\n\tclassName,\n\tclearGradient,\n\tgradients,\n\tonChange,\n\tvalue,\n\theadingLevel,\n}: PickerProps< OriginObject > ) {\n\tconst instanceId = useInstanceId( MultipleOrigin );\n\n\treturn (\n\t\t<VStack spacing={ 3 } className={ className }>\n\t\t\t{ gradients.map( ( { name, gradients: gradientSet }, index ) => {\n\t\t\t\tconst id = `color-palette-${ instanceId }-${ 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 } id={ id }>\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\taria-labelledby={ id }\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\tconst {\n\t\tasButtons,\n\t\tloop,\n\t\tactions,\n\t\theadingLevel,\n\t\t'aria-label': ariaLabel,\n\t\t'aria-labelledby': ariaLabelledby,\n\t\t...additionalProps\n\t} = props;\n\tconst options = isMultipleOriginArray( props.gradients ) ? (\n\t\t<MultipleOrigin headingLevel={ headingLevel } { ...additionalProps } />\n\t) : (\n\t\t<SingleOrigin { ...additionalProps } />\n\t);\n\n\tlet metaProps:\n\t\t\| { asButtons: false; loop?: boolean; 'aria-label': string }\n\t\t\| { asButtons: false; loop?: boolean; 'aria-labelledby': string }\n\t\t\| { asButtons: true };\n\n\tif ( asButtons ) {\n\t\tmetaProps = { asButtons: true };\n\t} else {\n\t\tconst _metaProps: { asButtons: false; loop?: boolean } = {\n\t\t\tasButtons: false,\n\t\t\tloop,\n\t\t};\n\n\t\tif ( ariaLabel ) {\n\t\t\tmetaProps = { ..._metaProps, 'aria-label': ariaLabel };\n\t\t} else if ( ariaLabelledby ) {\n\t\t\tmetaProps = {\n\t\t\t\t..._metaProps,\n\t\t\t\t'aria-labelledby': ariaLabelledby,\n\t\t\t};\n\t\t} else {\n\t\t\tmetaProps = {\n\t\t\t\t..._metaProps,\n\t\t\t\t'aria-label': __( 'Custom color picker.' ),\n\t\t\t};\n\t\t}\n\t}\n\n\treturn (\n\t\t<CircularOptionPicker\n\t\t\t{ ...metaProps }\n\t\t\tactions={ actions }\n\t\t\toptions={ options }\n\t\t/>\n\t);\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\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\tclassName,\n\tgradients = [],\n\tonChange,\n\tvalue,\n\tclearable = true,\n\tdisableCustomGradients = false,\n\t__experimentalIsRenderedInSidebar,\n\theadingLevel = 2,\n\t...additionalProps\n}: GradientPickerComponentProps ) {\n\tconst clearGradient = useCallback(\n\t\t() => onChange( undefined ),\n\t\t[ onChange ]\n\t);\n\n\treturn (\n\t\t<VStack spacing={ gradients.length ? 4 : 0 }>\n\t\t\t{ ! disableCustomGradients && (\n\t\t\t\t<CustomGradientPicker\n\t\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t}\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ ( gradients.length > 0 \|\| clearable ) && (\n\t\t\t\t<Component\n\t\t\t\t\t{ ...additionalProps }\n\t\t\t\t\tclassName={ className }\n\t\t\t\t\tclearGradient={ clearGradient }\n\t\t\t\t\tgradients={ gradients }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tactions={\n\t\t\t\t\t\tclearable &&\n\t\t\t\t\t\t! disableCustomGradients && (\n\t\t\t\t\t\t\t<CircularOptionPicker.ButtonAction\n\t\t\t\t\t\t\t\tonClick={ clearGradient }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __( 'Clear' ) }\n\t\t\t\t\t\t\t</CircularOptionPicker.ButtonAction>\n\t\t\t\t\t\t)\n\t\t\t\t\t}\n\t\t\t\t\theadingLevel={ headingLevel }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n\nexport default GradientPicker;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"names":["_i18n","require","_compose","_element","_circularOptionPicker","_interopRequireDefault","_customGradientPicker","_vStack","_styles","_jsxRuntime","isMultipleOriginObject","obj","Array","isArray","gradients","isMultipleOriginArray","arr","length","every","gradientObj","SingleOrigin","className","clearGradient","onChange","value","additionalProps","gradientOptions","useMemo","map","gradient","name","slug","index","jsx","default","Option","isSelected","tooltipText","sprintf","__","style","color","background","onClick","OptionGroup","options","MultipleOrigin","headingLevel","instanceId","useInstanceId","VStack","spacing","children","gradientSet","id","jsxs","ColorHeading","level","Component","props","asButtons","loop","actions","ariaLabel","ariaLabelledby","metaProps","_metaProps","GradientPicker","clearable","disableCustomGradients","__experimentalIsRenderedInSidebar","useCallback","undefined","ButtonAction","accessibleWhenDisabled","disabled","_default","exports"],"sources":["@wordpress/components/src/gradient-picker/index.tsx"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useInstanceId } from '@wordpress/compose';\nimport { useCallback, useMemo } from '@wordpress/element';\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 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\t...additionalProps\n}: PickerProps< GradientObject > ) {\n\tconst gradientOptions = useMemo( () => {\n\t\treturn gradients.map( ( { gradient, name, slug }, index ) => (\n\t\t\t<CircularOptionPicker.Option\n\t\t\t\tkey={ slug }\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.OptionGroup\n\t\t\tclassName={ className }\n\t\t\toptions={ gradientOptions }\n\t\t\t{ ...additionalProps }\n\t\t/>\n\t);\n}\n\nfunction MultipleOrigin( {\n\tclassName,\n\tclearGradient,\n\tgradients,\n\tonChange,\n\tvalue,\n\theadingLevel,\n}: PickerProps< OriginObject > ) {\n\tconst instanceId = useInstanceId( MultipleOrigin );\n\n\treturn (\n\t\t<VStack spacing={ 3 } className={ className }>\n\t\t\t{ gradients.map( ( { name, gradients: gradientSet }, index ) => {\n\t\t\t\tconst id = `color-palette-${ instanceId }-${ 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 } id={ id }>\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\taria-labelledby={ id }\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\tconst {\n\t\tasButtons,\n\t\tloop,\n\t\tactions,\n\t\theadingLevel,\n\t\t'aria-label': ariaLabel,\n\t\t'aria-labelledby': ariaLabelledby,\n\t\t...additionalProps\n\t} = props;\n\tconst options = isMultipleOriginArray( props.gradients ) ? (\n\t\t<MultipleOrigin headingLevel={ headingLevel } { ...additionalProps } />\n\t) : (\n\t\t<SingleOrigin { ...additionalProps } />\n\t);\n\n\tlet metaProps:\n\t\t\| { asButtons: false; loop?: boolean; 'aria-label': string }\n\t\t\| { asButtons: false; loop?: boolean; 'aria-labelledby': string }\n\t\t\| { asButtons: true };\n\n\tif ( asButtons ) {\n\t\tmetaProps = { asButtons: true };\n\t} else {\n\t\tconst _metaProps: { asButtons: false; loop?: boolean } = {\n\t\t\tasButtons: false,\n\t\t\tloop,\n\t\t};\n\n\t\tif ( ariaLabel ) {\n\t\t\tmetaProps = { ..._metaProps, 'aria-label': ariaLabel };\n\t\t} else if ( ariaLabelledby ) {\n\t\t\tmetaProps = {\n\t\t\t\t..._metaProps,\n\t\t\t\t'aria-labelledby': ariaLabelledby,\n\t\t\t};\n\t\t} else {\n\t\t\tmetaProps = {\n\t\t\t\t..._metaProps,\n\t\t\t\t'aria-label': __( 'Custom color picker.' ),\n\t\t\t};\n\t\t}\n\t}\n\n\treturn (\n\t\t<CircularOptionPicker\n\t\t\t{ ...metaProps }\n\t\t\tactions={ actions }\n\t\t\toptions={ options }\n\t\t/>\n\t);\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 { useState } from 'react';\n * import { GradientPicker } from '@wordpress/components';\n \n const MyGradientPicker = () => {\n * const [ gradient, setGradient ] = useState( null );\n \n return (\n * <GradientPicker\n * value={ gradient }\n * onChange={ ( currentGradient ) => setGradient( currentGradient ) }\n * gradients={ [\n * {\n * name: 'JShine',\n * gradient:\n * 'linear-gradient(135deg,#12c2e9 0%,#c471ed 50%,#f64f59 100%)',\n * slug: 'jshine',\n * },\n * {\n * name: 'Moonlit Asteroid',\n * gradient:\n * 'linear-gradient(135deg,#0F2027 0%, #203A43 0%, #2c5364 100%)',\n * slug: 'moonlit-asteroid',\n * },\n * {\n * name: 'Rastafarie',\n * gradient:\n * 'linear-gradient(135deg,#1E9600 0%, #FFF200 0%, #FF0000 100%)',\n * slug: 'rastafari',\n * },\n * ] }\n * />\n * );\n * };\n ```\n \n */\nexport function GradientPicker( {\n\tclassName,\n\tgradients = [],\n\tonChange,\n\tvalue,\n\tclearable = true,\n\tdisableCustomGradients = false,\n\t__experimentalIsRenderedInSidebar,\n\theadingLevel = 2,\n\t...additionalProps\n}: GradientPickerComponentProps ) {\n\tconst clearGradient = useCallback(\n\t\t() => onChange( undefined ),\n\t\t[ onChange ]\n\t);\n\n\treturn (\n\t\t<VStack spacing={ gradients.length ? 4 : 0 }>\n\t\t\t{ ! disableCustomGradients && (\n\t\t\t\t<CustomGradientPicker\n\t\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t}\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ ( gradients.length > 0 \|\| clearable ) && (\n\t\t\t\t<Component\n\t\t\t\t\t{ ...additionalProps }\n\t\t\t\t\tclassName={ className }\n\t\t\t\t\tclearGradient={ clearGradient }\n\t\t\t\t\tgradients={ gradients }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tactions={\n\t\t\t\t\t\tclearable &&\n\t\t\t\t\t\t! disableCustomGradients && (\n\t\t\t\t\t\t\t<CircularOptionPicker.ButtonAction\n\t\t\t\t\t\t\t\tonClick={ clearGradient }\n\t\t\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\t\t\tdisabled={ ! value }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __( 'Clear' ) }\n\t\t\t\t\t\t\t</CircularOptionPicker.ButtonAction>\n\t\t\t\t\t\t)\n\t\t\t\t\t}\n\t\t\t\t\theadingLevel={ headingLevel }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n\nexport default GradientPicker;\n"],"mappings":"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","ignoreList":[]}

package/build/gradient-picker/types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":[],"sources":["@wordpress/components/src/gradient-picker/types.ts"],"sourcesContent":["/*\n Internal dependencies\n /\nimport type { HeadingSize } from '../heading/types';\n\nexport type GradientObject = {\n\tgradient: string;\n\tname: string;\n\tslug: string;\n};\nexport type OriginObject = { name: string; gradients: GradientObject[] };\nexport type GradientsProp = GradientObject[] \| OriginObject[];\n\ntype GradientPickerBaseProps = {\n\t/\n\t The class name added to the wrapper.\n\t /\n\tclassName?: string;\n\t/\n\t The function called when a new gradient has been defined. It is passed to\n\t * the `currentGradient` as an argument.\n\t /\n\tonChange: ( currentGradient: string \| undefined ) => void;\n\t/\n\t The current value of the gradient. Pass a css gradient string (See default value for example).\n\t * Optionally pass in a `null` value to specify no gradient is currently selected.\n\t \n\t @default 'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)'\n\t /\n\tvalue?: GradientObject[ 'gradient' ] \| null;\n\t/\n\t Whether the palette should have a clearing button or not.\n\t \n\t @default true\n\t /\n\tclearable?: boolean;\n\t/\n\t The heading level. Only applies in cases where gradients are provided\n\t * from multiple origins (ie. when the array passed as the `gradients` prop\n\t * contains two or more items).\n\t \n\t @default 2\n\t /\n\theadingLevel?: HeadingSize;\n\t/\n\t Whether the control should present as a set of buttons,\n\t * each with its own tab stop.\n\t \n\t @default false\n\t /\n\tasButtons?: boolean;\n\t/\n\t Prevents keyboard interaction from wrapping around.\n\t * Only used when `asButtons` is not true.\n\t \n\t @default true\n\t /\n\tloop?: boolean;\n} & (\n\t\| {\n\t\t\t~~/\n\t\t\t~~ A ~~label~~ to ~~identify~~ ~~the~~ ~~purpose~~ of ~~the control.\~~n\t\t\t \n\t\t\t ~~@todo~~ ~~[#54055]~~ ~~Either~~ ~~this~~ or ~~`aria-labelledby`~~ ~~should~~ be ~~required\~~n\t\t\t /\n\t\t\t'aria-label'?: string;\n\t\t\t'aria-labelledby'?: never;\n\t }\n\t\| {\n\t\t\t~~/\n\t\t\t~~ An ID of an ~~element to provide a~~ label ~~for~~ ~~the~~ ~~control.\~~n\t\t\t \n\t\t\t ~~@todo~~ ~~[#54055]~~ ~~Either~~ ~~this~~ or ~~`aria-~~label` ~~should~~ be ~~required\~~n\t\t\t /\n\t\t\t'aria-labelledby'?: string;\n\t\t\t'aria-label'?: never;\n\t }\n);\n\nexport type GradientPickerComponentProps = GradientPickerBaseProps & {\n\t/\n\t An array of objects as predefined gradients displayed above the gradient\n\t * selector. Alternatively, if there are multiple sets (or 'origins') of\n\t * gradients, you can pass an array of objects each with a `name` and a\n\t * `gradients` array which will in turn contain the predefined gradient objects.\n\t \n\t @default []\n\t /\n\tgradients?: GradientsProp;\n\t/\n\t Start opting in to the new margin-free styles that will become the default\n\t * in a future version, currently scheduled to be WordPress 6.4. (The prop\n\t * can be safely removed once this happens.)\n\t \n\t @default false\n\t * @deprecated Default behavior since WP 6.5. Prop can be safely removed.\n\t * @ignore\n\t /\n\t__nextHasNoMargin?: boolean;\n\t/\n\t If true, the gradient picker will not be displayed and only defined\n\t * gradients from `gradients` will be shown.\n\t \n\t @default false\n\t /\n\tdisableCustomGradients?: boolean;\n\t/\n\t Whether this is rendered in the sidebar.\n\t \n\t @default false\n\t */\n\t__experimentalIsRenderedInSidebar?: boolean;\n};\n\nexport type PickerProps< TOriginType extends GradientObject \| OriginObject > =\n\tGradientPickerBaseProps & {\n\t\tclearGradient: () => void;\n\t\tonChange: (\n\t\t\tcurrentGradient: string \| undefined,\n\t\t\tindex: number\n\t\t) => void;\n\t\tactions?: React.ReactNode;\n\t\tgradients: TOriginType[];\n\t};\n"],"mappings":"","ignoreList":[]}
1	+ {"version":3,"names":[],"sources":["@wordpress/components/src/gradient-picker/types.ts"],"sourcesContent":["/*\n Internal dependencies\n /\nimport type { HeadingSize } from '../heading/types';\n\nexport type GradientObject = {\n\tgradient: string;\n\tname: string;\n\tslug: string;\n};\nexport type OriginObject = { name: string; gradients: GradientObject[] };\nexport type GradientsProp = GradientObject[] \| OriginObject[];\n\ntype GradientPickerBaseProps = {\n\t/\n\t The class name added to the wrapper.\n\t /\n\tclassName?: string;\n\t/\n\t The function called when a new gradient has been defined. It is passed to\n\t * the `currentGradient` as an argument.\n\t /\n\tonChange: ( currentGradient: string \| undefined ) => void;\n\t/\n\t The current value of the gradient. Pass a css gradient string (See default value for example).\n\t * Optionally pass in a `null` value to specify no gradient is currently selected.\n\t \n\t @default 'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)'\n\t /\n\tvalue?: GradientObject[ 'gradient' ] \| null;\n\t/\n\t Whether the palette should have a clearing button or not.\n\t \n\t @default true\n\t /\n\tclearable?: boolean;\n\t/\n\t The heading level. Only applies in cases where gradients are provided\n\t * from multiple origins (i.e. when the array passed as the `gradients` prop\n\t * contains two or more items).\n\t \n\t @default 2\n\t /\n\theadingLevel?: HeadingSize;\n\t/\n\t Whether the control should present as a set of buttons,\n\t * each with its own tab stop.\n\t \n\t @default false\n\t /\n\tasButtons?: boolean;\n\t/\n\t Prevents keyboard interaction from wrapping around.\n\t * Only used when `asButtons` is not true.\n\t \n\t @default true\n\t /\n\tloop?: boolean;\n} & (\n\t\| {\n\t\t\t// TODO: [#54055] Either this or `aria-labelledby` should be required\n\t\t\t/\n\t\t\t A label to identify the purpose of the control.\n\t\t\t /\n\t\t\t'aria-label'?: string;\n\t\t\t'aria-labelledby'?: never;\n\t }\n\t\| {\n\t\t\t// TODO: [#54055] Either this or `aria-label` should be required\n\t\t\t/\n\t\t\t An ID of an element to provide a label for the control.\n\t\t\t /\n\t\t\t'aria-labelledby'?: string;\n\t\t\t'aria-label'?: never;\n\t }\n);\n\nexport type GradientPickerComponentProps = GradientPickerBaseProps & {\n\t/\n\t An array of objects as predefined gradients displayed above the gradient\n\t * selector. Alternatively, if there are multiple sets (or 'origins') of\n\t * gradients, you can pass an array of objects each with a `name` and a\n\t * `gradients` array which will in turn contain the predefined gradient objects.\n\t \n\t @default []\n\t /\n\tgradients?: GradientsProp;\n\t/\n\t Start opting in to the new margin-free styles that will become the default\n\t * in a future version, currently scheduled to be WordPress 6.4. (The prop\n\t * can be safely removed once this happens.)\n\t \n\t @default false\n\t * @deprecated Default behavior since WP 6.5. Prop can be safely removed.\n\t * @ignore\n\t /\n\t__nextHasNoMargin?: boolean;\n\t/\n\t If true, the gradient picker will not be displayed and only defined\n\t * gradients from `gradients` will be shown.\n\t \n\t @default false\n\t /\n\tdisableCustomGradients?: boolean;\n\t/\n\t Whether this is rendered in the sidebar.\n\t \n\t @default false\n\t */\n\t__experimentalIsRenderedInSidebar?: boolean;\n};\n\nexport type PickerProps< TOriginType extends GradientObject \| OriginObject > =\n\tGradientPickerBaseProps & {\n\t\tclearGradient: () => void;\n\t\tonChange: (\n\t\t\tcurrentGradient: string \| undefined,\n\t\t\tindex: number\n\t\t) => void;\n\t\tactions?: React.ReactNode;\n\t\tgradients: TOriginType[];\n\t};\n"],"mappings":"","ignoreList":[]}

package/build/guide/page-control.js CHANGED Viewed

@@ -31,6 +31,7 @@ function PageControl({
       // Set aria-current="step" on the active page, see https://www.w3.org/TR/wai-aria-1.1/#aria-current
       "aria-current": page === currentPage ? 'step' : undefined,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
+        size: "small",
         icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.PageControlIcon, {}),
         "aria-label": (0, _i18n.sprintf)(/* translators: 1: current page number 2: total number of pages */
         (0, _i18n.__)('Page %1$d of %2$d'), page + 1, numberOfPages),