@wordpress/components 21.1.0 → 21.2.0

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

@@ -5,22 +5,16 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.FontSizePicker = void 0;
 
 var _element = require("@wordpress/element");
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
 var _deprecated = _interopRequireDefault(require("@wordpress/deprecated"));
 
 var _i18n = require("@wordpress/i18n");
 
 var _icons = require("@wordpress/icons");
 
-var _baseControl = require("../base-control");
-
 var _button = _interopRequireDefault(require("../button"));
 
 var _rangeControl = _interopRequireDefault(require("../range-control"));
@@ -41,6 +35,10 @@ var _vStack = require("../v-stack");
 
 var _hStack = require("../h-stack");
 
+var _styles = require("./styles");
+
+var _spacer = require("../spacer");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -62,29 +60,27 @@ const MaybeVStack = _ref => {
     __nextHasNoMarginBottom,
     children
   } = _ref;
-  return !__nextHasNoMarginBottom ? children : (0, _element.createElement)(_vStack.VStack, {
+  return !__nextHasNoMarginBottom ? (0, _element.createElement)(_element.Fragment, null, children) : (0, _element.createElement)(_vStack.VStack, {
     spacing: 6,
     children: children
   });
 };
 
-function FontSizePicker(_ref2, ref) {
+const UnforwardedFontSizePicker = (props, ref) => {
   var _fontSizes$, _value$endsWith;
 
-  let {
+  const {
     /** Start opting into the new margin-free styles that will become the default in a future version. */
     __nextHasNoMarginBottom = false,
     fallbackFontSize,
     fontSizes = [],
     disableCustomFontSizes = false,
     onChange,
-
-    /** @type {'default' | '__unstable-large'} */
     size = 'default',
     value,
     withSlider = false,
     withReset = true
-  } = _ref2;
+  } = props;
 
   if (!__nextHasNoMarginBottom) {
     (0, _deprecated.default)('Bottom margin styles for wp.components.FontSizePicker', {
@@ -95,7 +91,7 @@ function FontSizePicker(_ref2, ref) {
   }
 
   const hasUnits = [typeof value, typeof (fontSizes === null || fontSizes === void 0 ? void 0 : (_fontSizes$ = fontSizes[0]) === null || _fontSizes$ === void 0 ? void 0 : _fontSizes$.size)].includes('string');
-  const noUnitsValue = !hasUnits ? value : parseInt(value);
+  const noUnitsValue = !hasUnits ? value : parseInt(String(value));
   const isPixelValue = typeof value === 'number' || (value === null || value === void 0 ? void 0 : (_value$endsWith = value.endsWith) === null || _value$endsWith === void 0 ? void 0 : _value$endsWith.call(value, 'px'));
   const units = (0, _unitControl.useCustomUnits)({
     availableUnits: ['px', 'em', 'rem']
@@ -105,10 +101,10 @@ function FontSizePicker(_ref2, ref) {
    * than six and a select control when they are more.
    */
 
-  const fontSizesContainComplexValues = fontSizes.some(_ref3 => {
+  const fontSizesContainComplexValues = fontSizes.some(_ref2 => {
     let {
       size: sizeArg
-    } = _ref3;
+    } = _ref2;
     return !(0, _utils.isSimpleCssValue)(sizeArg);
   });
   const shouldUseSelectControl = fontSizes.length > 5;
@@ -124,11 +120,11 @@ function FontSizePicker(_ref2, ref) {
 
 
     if (isCustomValue) {
-      return (0, _utils.isSimpleCssValue)(value) && `(${value})`;
+      return value !== undefined && (0, _utils.isSimpleCssValue)(value) && `(${value})`;
     }
 
     if (shouldUseSelectControl) {
-      return (0, _utils.isSimpleCssValue)(selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.size) && `(${selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.size})`;
+      return (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.size) !== undefined && (0, _utils.isSimpleCssValue)(selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.size) && `(${selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.size})`;
     } // Calculate the `hint` for toggle group control.
 
 
@@ -150,17 +146,15 @@ function FontSizePicker(_ref2, ref) {
 
   const currentFontSizeSR = (0, _i18n.sprintf)( // translators: %s: Currently selected font size.
   (0, _i18n.__)('Currently selected font size: %s'), selectedOption.name);
-  const baseClassName = 'components-font-size-picker';
-  return (0, _element.createElement)("fieldset", (0, _extends2.default)({
-    className: baseClassName
-  }, ref ? {} : {
-    ref
-  }), (0, _element.createElement)(_visuallyHidden.VisuallyHidden, {
+  return (0, _element.createElement)(_styles.Container, {
+    ref: ref,
+    className: "components-font-size-picker"
+  }, (0, _element.createElement)(_visuallyHidden.VisuallyHidden, {
     as: "legend"
-  }, (0, _i18n.__)('Font size')), (0, _element.createElement)(_hStack.HStack, {
-    className: `${baseClassName}__header`
-  }, (0, _element.createElement)(_baseControl.BaseControl.VisualLabel, null, (0, _i18n.__)('Size'), headerHint && (0, _element.createElement)("span", {
-    className: `${baseClassName}__header__hint`
+  }, (0, _i18n.__)('Font size')), (0, _element.createElement)(_spacer.Spacer, null, (0, _element.createElement)(_hStack.HStack, {
+    className: "components-font-size-picker__header"
+  }, (0, _element.createElement)(_styles.HeaderLabel, null, (0, _i18n.__)('Size'), headerHint && (0, _element.createElement)(_styles.HeaderHint, {
+    className: "components-font-size-picker__header__hint"
   }, headerHint)), !disableCustomFontSizes && (0, _element.createElement)(_button.default, {
     label: showCustomValueControl ? (0, _i18n.__)('Use size preset') : (0, _i18n.__)('Set custom size'),
     icon: _icons.settings,
@@ -169,25 +163,24 @@ function FontSizePicker(_ref2, ref) {
     },
     isPressed: showCustomValueControl,
     isSmall: true
-  })), (0, _element.createElement)(MaybeVStack, {
+  }))), (0, _element.createElement)(MaybeVStack, {
+    __nextHasNoMarginBottom: __nextHasNoMarginBottom
+  }, (0, _element.createElement)(_styles.Controls, {
+    className: "components-font-size-picker__controls",
     __nextHasNoMarginBottom: __nextHasNoMarginBottom
-  }, (0, _element.createElement)("div", {
-    className: (0, _classnames.default)(`${baseClassName}__controls`, {
-      'is-next-has-no-margin-bottom': __nextHasNoMarginBottom
-    })
   }, !!fontSizes.length && shouldUseSelectControl && !showCustomValueControl && (0, _element.createElement)(_customSelectControl.default, {
     __nextUnconstrainedWidth: true,
-    className: `${baseClassName}__select`,
+    className: "components-font-size-picker__select",
     label: (0, _i18n.__)('Font size'),
     hideLabelFromVision: true,
     describedBy: currentFontSizeSR,
     options: options,
     value: options.find(option => option.key === selectedOption.slug),
-    onChange: _ref4 => {
+    onChange: _ref3 => {
       let {
         selectedItem
-      } = _ref4;
-      onChange(hasUnits ? selectedItem.size : Number(selectedItem.size));
+      } = _ref3;
+      onChange === null || onChange === void 0 ? void 0 : onChange(hasUnits ? selectedItem.size : Number(selectedItem.size));
 
       if (selectedItem.key === _utils.CUSTOM_FONT_SIZE) {
         setShowCustomValueControl(true);
@@ -200,7 +193,7 @@ function FontSizePicker(_ref2, ref) {
     hideLabelFromVision: true,
     value: value,
     onChange: newValue => {
-      onChange(hasUnits ? newValue : Number(newValue));
+      onChange === null || onChange === void 0 ? void 0 : onChange(hasUnits ? newValue : Number(newValue));
     },
     isBlock: true,
     size: size
@@ -211,8 +204,7 @@ function FontSizePicker(_ref2, ref) {
     "aria-label": option.name,
     showTooltip: true
   }))), !withSlider && !disableCustomFontSizes && showCustomValueControl && (0, _element.createElement)(_flex.Flex, {
-    justify: "space-between",
-    className: `${baseClassName}__custom-size-control`
+    className: "components-font-size-picker__custom-size-control"
   }, (0, _element.createElement)(_flex.FlexItem, {
     isBlock: true
   }, (0, _element.createElement)(_unitControl.default, {
@@ -221,39 +213,38 @@ function FontSizePicker(_ref2, ref) {
     hideLabelFromVision: true,
     value: value,
     onChange: nextSize => {
-      if (0 === parseFloat(nextSize) || !nextSize) {
-        onChange(undefined);
+      if (!nextSize || 0 === parseFloat(nextSize)) {
+        onChange === null || onChange === void 0 ? void 0 : onChange(undefined);
       } else {
-        onChange(hasUnits ? nextSize : parseInt(nextSize, 10));
+        onChange === null || onChange === void 0 ? void 0 : onChange(hasUnits ? nextSize : parseInt(nextSize, 10));
       }
     },
     size: size,
     units: hasUnits ? units : []
-  })), withReset && (0, _element.createElement)(_flex.FlexItem, {
-    isBlock: true
-  }, (0, _element.createElement)(_button.default, {
-    className: "components-color-palette__clear",
+  })), withReset && (0, _element.createElement)(_flex.FlexItem, null, (0, _element.createElement)(_styles.ResetButton, {
     disabled: value === undefined,
     onClick: () => {
-      onChange(undefined);
+      onChange === null || onChange === void 0 ? void 0 : onChange(undefined);
     },
     isSmall: true,
-    variant: "secondary"
+    variant: "secondary",
+    size: size
   }, (0, _i18n.__)('Reset'))))), withSlider && (0, _element.createElement)(_rangeControl.default, {
     __nextHasNoMarginBottom: __nextHasNoMarginBottom,
-    className: `${baseClassName}__custom-input`,
+    className: "components-font-size-picker__custom-input",
     label: (0, _i18n.__)('Custom Size'),
-    value: isPixelValue && noUnitsValue || '',
+    value: isPixelValue && noUnitsValue ? Number(noUnitsValue) : undefined,
     initialPosition: fallbackFontSize,
     onChange: newValue => {
-      onChange(hasUnits ? newValue + 'px' : newValue);
+      onChange === null || onChange === void 0 ? void 0 : onChange(hasUnits ? newValue + 'px' : newValue);
     },
     min: 12,
     max: 100
   })));
-}
-
-var _default = (0, _element.forwardRef)(FontSizePicker);
+};
 
+const FontSizePicker = (0, _element.forwardRef)(UnforwardedFontSizePicker);
+exports.FontSizePicker = FontSizePicker;
+var _default = FontSizePicker;
 exports.default = _default;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/font-size-picker/index.js"],"names":["MaybeVStack","__nextHasNoMarginBottom","children","FontSizePicker","ref","fallbackFontSize","fontSizes","disableCustomFontSizes","onChange","size","value","withSlider","withReset","since","version","hint","hasUnits","includes","noUnitsValue","parseInt","isPixelValue","endsWith","units","availableUnits","fontSizesContainComplexValues","some","sizeArg","shouldUseSelectControl","length","options","selectedOption","isCustomValue","slug","CUSTOM_FONT_SIZE","showCustomValueControl","setShowCustomValueControl","headerHint","name","unit","currentFontSizeSR","baseClassName","settings","find","option","key","selectedItem","Number","newValue","map","label","nextSize","parseFloat","undefined"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classNames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport deprecated from '@wordpress/deprecated';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { settings } from '@wordpress/icons';\nimport { useState, useMemo, forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { BaseControl } from '../base-control';\nimport Button from '../button';\nimport RangeControl from '../range-control';\nimport { Flex, FlexItem } from '../flex';\nimport { default as UnitControl, useCustomUnits } from '../unit-control';\nimport CustomSelectControl from '../custom-select-control';\nimport { VisuallyHidden } from '../visually-hidden';\nimport {\n\tToggleGroupControl,\n\tToggleGroupControlOption,\n} from '../toggle-group-control';\nimport {\n\tgetFontSizeOptions,\n\tgetSelectedOption,\n\tsplitValueAndUnitFromSize,\n\tisSimpleCssValue,\n\tCUSTOM_FONT_SIZE,\n} from './utils';\nimport { VStack } from '../v-stack';\nimport { HStack } from '../h-stack';\n\n// This conditional is needed to maintain the spacing before the slider in the `withSlider` case.\nconst MaybeVStack = ( { __nextHasNoMarginBottom, children } ) =>\n\t! __nextHasNoMarginBottom ? (\n\t\tchildren\n\t) : (\n\t\t<VStack spacing={ 6 } children={ children } />\n\t);\n\nfunction FontSizePicker(\n\t{\n\t\t/** Start opting into the new margin-free styles that will become the default in a future version. */\n\t\t__nextHasNoMarginBottom = false,\n\t\tfallbackFontSize,\n\t\tfontSizes = [],\n\t\tdisableCustomFontSizes = false,\n\t\tonChange,\n\t\t/** @type {'default' | '__unstable-large'} */\n\t\tsize = 'default',\n\t\tvalue,\n\t\twithSlider = false,\n\t\twithReset = true,\n\t},\n\tref\n) {\n\tif ( ! __nextHasNoMarginBottom ) {\n\t\tdeprecated( 'Bottom margin styles for wp.components.FontSizePicker', {\n\t\t\tsince: '6.1',\n\t\t\tversion: '6.4',\n\t\t\thint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version.',\n\t\t} );\n\t}\n\n\tconst hasUnits = [ typeof value, typeof fontSizes?.[ 0 ]?.size ].includes(\n\t\t'string'\n\t);\n\tconst noUnitsValue = ! hasUnits ? value : parseInt( value );\n\tconst isPixelValue = typeof value === 'number' || value?.endsWith?.( 'px' );\n\tconst units = useCustomUnits( {\n\t\tavailableUnits: [ 'px', 'em', 'rem' ],\n\t} );\n\n\t/**\n\t * The main font size UI displays a toggle group when the presets are less\n\t * than six and a select control when they are more.\n\t */\n\tconst fontSizesContainComplexValues = fontSizes.some(\n\t\t( { size: sizeArg } ) => ! isSimpleCssValue( sizeArg )\n\t);\n\tconst shouldUseSelectControl = fontSizes.length > 5;\n\tconst options = useMemo(\n\t\t() =>\n\t\t\tgetFontSizeOptions(\n\t\t\t\tshouldUseSelectControl,\n\t\t\t\tfontSizes,\n\t\t\t\tdisableCustomFontSizes\n\t\t\t),\n\t\t[ shouldUseSelectControl, fontSizes, disableCustomFontSizes ]\n\t);\n\tconst selectedOption = getSelectedOption( fontSizes, value );\n\tconst isCustomValue = selectedOption.slug === CUSTOM_FONT_SIZE;\n\tconst [ showCustomValueControl, setShowCustomValueControl ] = useState(\n\t\t! disableCustomFontSizes && isCustomValue\n\t);\n\tconst headerHint = useMemo( () => {\n\t\tif ( showCustomValueControl ) {\n\t\t\treturn `(${ __( 'Custom' ) })`;\n\t\t}\n\n\t\t// If we have a custom value that is not available in the font sizes,\n\t\t// show it as a hint as long as it's a simple CSS value.\n\t\tif ( isCustomValue ) {\n\t\t\treturn isSimpleCssValue( value ) && `(${ value })`;\n\t\t}\n\t\tif ( shouldUseSelectControl ) {\n\t\t\treturn (\n\t\t\t\tisSimpleCssValue( selectedOption?.size ) &&\n\t\t\t\t`(${ selectedOption?.size })`\n\t\t\t);\n\t\t}\n\n\t\t// Calculate the `hint` for toggle group control.\n\t\tlet hint = selectedOption.name;\n\t\tif (\n\t\t\t! fontSizesContainComplexValues &&\n\t\t\ttypeof selectedOption.size === 'string'\n\t\t) {\n\t\t\tconst [ , unit ] = splitValueAndUnitFromSize( selectedOption.size );\n\t\t\thint += `(${ unit })`;\n\t\t}\n\t\treturn hint;\n\t}, [\n\t\tshowCustomValueControl,\n\t\tselectedOption?.name,\n\t\tselectedOption?.size,\n\t\tvalue,\n\t\tisCustomValue,\n\t\tshouldUseSelectControl,\n\t\tfontSizesContainComplexValues,\n\t] );\n\n\tif ( ! options ) {\n\t\treturn null;\n\t}\n\n\t// This is used for select control only. We need to add support\n\t// for ToggleGroupControl.\n\tconst currentFontSizeSR = sprintf(\n\t\t// translators: %s: Currently selected font size.\n\t\t__( 'Currently selected font size: %s' ),\n\t\tselectedOption.name\n\t);\n\tconst baseClassName = 'components-font-size-picker';\n\treturn (\n\t\t<fieldset className={ baseClassName } { ...( ref ? {} : { ref } ) }>\n\t\t\t<VisuallyHidden as=\"legend\">{ __( 'Font size' ) }</VisuallyHidden>\n\t\t\t<HStack className={ `${ baseClassName }__header` }>\n\t\t\t\t<BaseControl.VisualLabel>\n\t\t\t\t\t{ __( 'Size' ) }\n\t\t\t\t\t{ headerHint && (\n\t\t\t\t\t\t<span className={ `${ baseClassName }__header__hint` }>\n\t\t\t\t\t\t\t{ headerHint }\n\t\t\t\t\t\t</span>\n\t\t\t\t\t) }\n\t\t\t\t</BaseControl.VisualLabel>\n\t\t\t\t{ ! disableCustomFontSizes && (\n\t\t\t\t\t<Button\n\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\tshowCustomValueControl\n\t\t\t\t\t\t\t\t? __( 'Use size preset' )\n\t\t\t\t\t\t\t\t: __( 'Set custom size' )\n\t\t\t\t\t\t}\n\t\t\t\t\t\ticon={ settings }\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\tsetShowCustomValueControl(\n\t\t\t\t\t\t\t\t! showCustomValueControl\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tisPressed={ showCustomValueControl }\n\t\t\t\t\t\tisSmall\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</HStack>\n\t\t\t<MaybeVStack __nextHasNoMarginBottom={ __nextHasNoMarginBottom }>\n\t\t\t\t<div\n\t\t\t\t\tclassName={ classNames( `${ baseClassName }__controls`, {\n\t\t\t\t\t\t'is-next-has-no-margin-bottom': __nextHasNoMarginBottom,\n\t\t\t\t\t} ) }\n\t\t\t\t>\n\t\t\t\t\t{ !! fontSizes.length &&\n\t\t\t\t\t\tshouldUseSelectControl &&\n\t\t\t\t\t\t! showCustomValueControl && (\n\t\t\t\t\t\t\t<CustomSelectControl\n\t\t\t\t\t\t\t\t__nextUnconstrainedWidth\n\t\t\t\t\t\t\t\tclassName={ `${ baseClassName }__select` }\n\t\t\t\t\t\t\t\tlabel={ __( 'Font size' ) }\n\t\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\t\tdescribedBy={ currentFontSizeSR }\n\t\t\t\t\t\t\t\toptions={ options }\n\t\t\t\t\t\t\t\tvalue={ options.find(\n\t\t\t\t\t\t\t\t\t( option ) =>\n\t\t\t\t\t\t\t\t\t\toption.key === selectedOption.slug\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\tonChange={ ( { selectedItem } ) => {\n\t\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\t\thasUnits\n\t\t\t\t\t\t\t\t\t\t\t? selectedItem.size\n\t\t\t\t\t\t\t\t\t\t\t: Number( selectedItem.size )\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\tselectedItem.key === CUSTOM_FONT_SIZE\n\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\tsetShowCustomValueControl( true );\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/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t{ ! shouldUseSelectControl && ! showCustomValueControl && (\n\t\t\t\t\t\t<ToggleGroupControl\n\t\t\t\t\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\t\t\t\t\tlabel={ __( 'Font size' ) }\n\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\tonChange={ ( newValue ) => {\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);\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tisBlock\n\t\t\t\t\t\t\tsize={ size }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ options.map( ( option ) => (\n\t\t\t\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\t\t\t\tkey={ option.key }\n\t\t\t\t\t\t\t\t\tvalue={ option.value }\n\t\t\t\t\t\t\t\t\tlabel={ option.label }\n\t\t\t\t\t\t\t\t\taria-label={ option.name }\n\t\t\t\t\t\t\t\t\tshowTooltip={ true }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t</ToggleGroupControl>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! withSlider &&\n\t\t\t\t\t\t! disableCustomFontSizes &&\n\t\t\t\t\t\tshowCustomValueControl && (\n\t\t\t\t\t\t\t<Flex\n\t\t\t\t\t\t\t\tjustify=\"space-between\"\n\t\t\t\t\t\t\t\tclassName={ `${ baseClassName }__custom-size-control` }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<FlexItem isBlock>\n\t\t\t\t\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t\t\t\t\tlabel={ __( 'Custom' ) }\n\t\t\t\t\t\t\t\t\t\tlabelPosition=\"top\"\n\t\t\t\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\t\t\t\tonChange={ ( nextSize ) => {\n\t\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\t\t0 === parseFloat( nextSize ) ||\n\t\t\t\t\t\t\t\t\t\t\t\t! nextSize\n\t\t\t\t\t\t\t\t\t\t\t) {\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 {\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\thasUnits\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? nextSize\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: parseInt(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tnextSize,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t10\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t  )\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}\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\tsize={ size }\n\t\t\t\t\t\t\t\t\t\tunits={ hasUnits ? units : [] }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t\t{ withReset && (\n\t\t\t\t\t\t\t\t\t<FlexItem isBlock>\n\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"components-color-palette__clear\"\n\t\t\t\t\t\t\t\t\t\t\tdisabled={ value === undefined }\n\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\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} }\n\t\t\t\t\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{ __( 'Reset' ) }\n\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t) }\n\t\t\t\t</div>\n\t\t\t\t{ withSlider && (\n\t\t\t\t\t<RangeControl\n\t\t\t\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\t\t\t\tclassName={ `${ baseClassName }__custom-input` }\n\t\t\t\t\t\tlabel={ __( 'Custom Size' ) }\n\t\t\t\t\t\tvalue={ ( isPixelValue && noUnitsValue ) || '' }\n\t\t\t\t\t\tinitialPosition={ fallbackFontSize }\n\t\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\t\tonChange( hasUnits ? newValue + 'px' : newValue );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tmin={ 12 }\n\t\t\t\t\t\tmax={ 100 }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</MaybeVStack>\n\t\t</fieldset>\n\t);\n}\n\nexport default forwardRef( FontSizePicker );\n"]}
+{"version":3,"sources":["@wordpress/components/src/font-size-picker/index.tsx"],"names":["MaybeVStack","__nextHasNoMarginBottom","children","UnforwardedFontSizePicker","props","ref","fallbackFontSize","fontSizes","disableCustomFontSizes","onChange","size","value","withSlider","withReset","since","version","hint","hasUnits","includes","noUnitsValue","parseInt","String","isPixelValue","endsWith","units","availableUnits","fontSizesContainComplexValues","some","sizeArg","shouldUseSelectControl","length","options","selectedOption","isCustomValue","slug","CUSTOM_FONT_SIZE","showCustomValueControl","setShowCustomValueControl","headerHint","undefined","name","unit","currentFontSizeSR","settings","find","option","key","selectedItem","Number","newValue","map","label","nextSize","parseFloat","FontSizePicker"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type { ReactNode, ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport deprecated from '@wordpress/deprecated';\nimport { __, sprintf } 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 { default as UnitControl, useCustomUnits } from '../unit-control';\nimport CustomSelectControl from '../custom-select-control';\nimport { VisuallyHidden } from '../visually-hidden';\nimport {\n\tToggleGroupControl,\n\tToggleGroupControlOption,\n} from '../toggle-group-control';\nimport {\n\tgetFontSizeOptions,\n\tgetSelectedOption,\n\tsplitValueAndUnitFromSize,\n\tisSimpleCssValue,\n\tCUSTOM_FONT_SIZE,\n} from './utils';\nimport { VStack } from '../v-stack';\nimport { HStack } from '../h-stack';\nimport type {\n\tFontSizePickerProps,\n\tFontSizeSelectOption,\n\tFontSizeToggleGroupOption,\n} from './types';\nimport {\n\tContainer,\n\tHeaderHint,\n\tHeaderLabel,\n\tControls,\n\tResetButton,\n} from './styles';\nimport { Spacer } from '../spacer';\n\n// This conditional is needed to maintain the spacing before the slider in the `withSlider` case.\nconst MaybeVStack = ( {\n\t__nextHasNoMarginBottom,\n\tchildren,\n}: {\n\t__nextHasNoMarginBottom: boolean;\n\tchildren: ReactNode;\n} ) =>\n\t! __nextHasNoMarginBottom ? (\n\t\t<>{ children }</>\n\t) : (\n\t\t<VStack spacing={ 6 } children={ children } />\n\t);\n\nconst UnforwardedFontSizePicker = (\n\tprops: FontSizePickerProps,\n\tref: ForwardedRef< any >\n) => {\n\tconst {\n\t\t/** Start opting into the new margin-free styles that will become the default in a future version. */\n\t\t__nextHasNoMarginBottom = false,\n\t\tfallbackFontSize,\n\t\tfontSizes = [],\n\t\tdisableCustomFontSizes = false,\n\t\tonChange,\n\t\tsize = 'default',\n\t\tvalue,\n\t\twithSlider = false,\n\t\twithReset = true,\n\t} = props;\n\tif ( ! __nextHasNoMarginBottom ) {\n\t\tdeprecated( 'Bottom margin styles for wp.components.FontSizePicker', {\n\t\t\tsince: '6.1',\n\t\t\tversion: '6.4',\n\t\t\thint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version.',\n\t\t} );\n\t}\n\n\tconst hasUnits = [ typeof value, typeof fontSizes?.[ 0 ]?.size ].includes(\n\t\t'string'\n\t);\n\tconst noUnitsValue = ! hasUnits ? value : parseInt( String( value ) );\n\tconst isPixelValue = typeof value === 'number' || value?.endsWith?.( 'px' );\n\tconst units = useCustomUnits( {\n\t\tavailableUnits: [ 'px', 'em', 'rem' ],\n\t} );\n\n\t/**\n\t * The main font size UI displays a toggle group when the presets are less\n\t * than six and a select control when they are more.\n\t */\n\tconst fontSizesContainComplexValues = fontSizes.some(\n\t\t( { size: sizeArg } ) => ! isSimpleCssValue( sizeArg )\n\t);\n\tconst shouldUseSelectControl = fontSizes.length > 5;\n\tconst options = useMemo(\n\t\t() =>\n\t\t\tgetFontSizeOptions(\n\t\t\t\tshouldUseSelectControl,\n\t\t\t\tfontSizes,\n\t\t\t\tdisableCustomFontSizes\n\t\t\t),\n\t\t[ shouldUseSelectControl, fontSizes, disableCustomFontSizes ]\n\t);\n\tconst selectedOption = getSelectedOption( fontSizes, value );\n\tconst isCustomValue = selectedOption.slug === CUSTOM_FONT_SIZE;\n\tconst [ showCustomValueControl, setShowCustomValueControl ] = useState(\n\t\t! disableCustomFontSizes && isCustomValue\n\t);\n\tconst headerHint = useMemo( () => {\n\t\tif ( showCustomValueControl ) {\n\t\t\treturn `(${ __( 'Custom' ) })`;\n\t\t}\n\n\t\t// If we have a custom value that is not available in the font sizes,\n\t\t// show it as a hint as long as it's a simple CSS value.\n\t\tif ( isCustomValue ) {\n\t\t\treturn (\n\t\t\t\tvalue !== undefined &&\n\t\t\t\tisSimpleCssValue( value ) &&\n\t\t\t\t`(${ value })`\n\t\t\t);\n\t\t}\n\t\tif ( shouldUseSelectControl ) {\n\t\t\treturn (\n\t\t\t\tselectedOption?.size !== undefined &&\n\t\t\t\tisSimpleCssValue( selectedOption?.size ) &&\n\t\t\t\t`(${ selectedOption?.size })`\n\t\t\t);\n\t\t}\n\n\t\t// Calculate the `hint` for toggle group control.\n\t\tlet hint = selectedOption.name;\n\t\tif (\n\t\t\t! fontSizesContainComplexValues &&\n\t\t\ttypeof selectedOption.size === 'string'\n\t\t) {\n\t\t\tconst [ , unit ] = splitValueAndUnitFromSize( selectedOption.size );\n\t\t\thint += `(${ unit })`;\n\t\t}\n\t\treturn hint;\n\t}, [\n\t\tshowCustomValueControl,\n\t\tselectedOption?.name,\n\t\tselectedOption?.size,\n\t\tvalue,\n\t\tisCustomValue,\n\t\tshouldUseSelectControl,\n\t\tfontSizesContainComplexValues,\n\t] );\n\n\tif ( ! options ) {\n\t\treturn null;\n\t}\n\n\t// This is used for select control only. We need to add support\n\t// for ToggleGroupControl.\n\tconst currentFontSizeSR = sprintf(\n\t\t// translators: %s: Currently selected font size.\n\t\t__( 'Currently selected font size: %s' ),\n\t\tselectedOption.name\n\t);\n\treturn (\n\t\t<Container ref={ ref } className=\"components-font-size-picker\">\n\t\t\t<VisuallyHidden as=\"legend\">{ __( 'Font size' ) }</VisuallyHidden>\n\t\t\t<Spacer>\n\t\t\t\t<HStack className=\"components-font-size-picker__header\">\n\t\t\t\t\t<HeaderLabel>\n\t\t\t\t\t\t{ __( 'Size' ) }\n\t\t\t\t\t\t{ headerHint && (\n\t\t\t\t\t\t\t<HeaderHint className=\"components-font-size-picker__header__hint\">\n\t\t\t\t\t\t\t\t{ headerHint }\n\t\t\t\t\t\t\t</HeaderHint>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</HeaderLabel>\n\t\t\t\t\t{ ! disableCustomFontSizes && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\tshowCustomValueControl\n\t\t\t\t\t\t\t\t\t? __( 'Use size preset' )\n\t\t\t\t\t\t\t\t\t: __( 'Set custom size' )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\ticon={ settings }\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tsetShowCustomValueControl(\n\t\t\t\t\t\t\t\t\t! showCustomValueControl\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tisPressed={ showCustomValueControl }\n\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</HStack>\n\t\t\t</Spacer>\n\t\t\t<MaybeVStack __nextHasNoMarginBottom={ __nextHasNoMarginBottom }>\n\t\t\t\t<Controls\n\t\t\t\t\tclassName=\"components-font-size-picker__controls\"\n\t\t\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\t\t>\n\t\t\t\t\t{ !! fontSizes.length &&\n\t\t\t\t\t\tshouldUseSelectControl &&\n\t\t\t\t\t\t! showCustomValueControl && (\n\t\t\t\t\t\t\t<CustomSelectControl\n\t\t\t\t\t\t\t\t__nextUnconstrainedWidth\n\t\t\t\t\t\t\t\tclassName=\"components-font-size-picker__select\"\n\t\t\t\t\t\t\t\tlabel={ __( 'Font size' ) }\n\t\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\t\tdescribedBy={ currentFontSizeSR }\n\t\t\t\t\t\t\t\toptions={ options as FontSizeSelectOption[] }\n\t\t\t\t\t\t\t\tvalue={ (\n\t\t\t\t\t\t\t\t\toptions as FontSizeSelectOption[]\n\t\t\t\t\t\t\t\t ).find(\n\t\t\t\t\t\t\t\t\t( option ) =>\n\t\t\t\t\t\t\t\t\t\toption.key === selectedOption.slug\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\tonChange={ ( {\n\t\t\t\t\t\t\t\t\tselectedItem,\n\t\t\t\t\t\t\t\t}: {\n\t\t\t\t\t\t\t\t\tselectedItem: FontSizeSelectOption;\n\t\t\t\t\t\t\t\t} ) => {\n\t\t\t\t\t\t\t\t\tonChange?.(\n\t\t\t\t\t\t\t\t\t\thasUnits\n\t\t\t\t\t\t\t\t\t\t\t? selectedItem.size\n\t\t\t\t\t\t\t\t\t\t\t: Number( selectedItem.size )\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\tselectedItem.key === CUSTOM_FONT_SIZE\n\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\tsetShowCustomValueControl( true );\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/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t{ ! shouldUseSelectControl && ! showCustomValueControl && (\n\t\t\t\t\t\t<ToggleGroupControl\n\t\t\t\t\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\t\t\t\t\tlabel={ __( 'Font size' ) }\n\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\tonChange={ ( newValue ) => {\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);\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tisBlock\n\t\t\t\t\t\t\tsize={ size }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ ( options as FontSizeToggleGroupOption[] ).map(\n\t\t\t\t\t\t\t\t( option ) => (\n\t\t\t\t\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\t\t\t\t\tkey={ option.key }\n\t\t\t\t\t\t\t\t\t\tvalue={ option.value }\n\t\t\t\t\t\t\t\t\t\tlabel={ option.label }\n\t\t\t\t\t\t\t\t\t\taria-label={ option.name }\n\t\t\t\t\t\t\t\t\t\tshowTooltip={ true }\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</ToggleGroupControl>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! withSlider &&\n\t\t\t\t\t\t! disableCustomFontSizes &&\n\t\t\t\t\t\tshowCustomValueControl && (\n\t\t\t\t\t\t\t<Flex className=\"components-font-size-picker__custom-size-control\">\n\t\t\t\t\t\t\t\t<FlexItem isBlock>\n\t\t\t\t\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t\t\t\t\tlabel={ __( 'Custom' ) }\n\t\t\t\t\t\t\t\t\t\tlabelPosition=\"top\"\n\t\t\t\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\t\t\t\tonChange={ ( nextSize ) => {\n\t\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\t\t! nextSize ||\n\t\t\t\t\t\t\t\t\t\t\t\t0 === parseFloat( nextSize )\n\t\t\t\t\t\t\t\t\t\t\t) {\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 {\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\thasUnits\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? nextSize\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: parseInt(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tnextSize,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t10\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t  )\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}\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\tsize={ size }\n\t\t\t\t\t\t\t\t\t\tunits={ hasUnits ? units : [] }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t\t{ withReset && (\n\t\t\t\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t\t\t\t<ResetButton\n\t\t\t\t\t\t\t\t\t\t\tdisabled={ value === undefined }\n\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\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} }\n\t\t\t\t\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\t\t\t\t\tsize={ size }\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{ __( 'Reset' ) }\n\t\t\t\t\t\t\t\t\t\t</ResetButton>\n\t\t\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t) }\n\t\t\t\t</Controls>\n\t\t\t\t{ withSlider && (\n\t\t\t\t\t<RangeControl\n\t\t\t\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\t\t\t\tclassName=\"components-font-size-picker__custom-input\"\n\t\t\t\t\t\tlabel={ __( 'Custom Size' ) }\n\t\t\t\t\t\tvalue={\n\t\t\t\t\t\t\tisPixelValue && noUnitsValue\n\t\t\t\t\t\t\t\t? Number( noUnitsValue )\n\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t\tinitialPosition={ fallbackFontSize }\n\t\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\t\tonChange?.( hasUnits ? newValue + 'px' : newValue );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tmin={ 12 }\n\t\t\t\t\t\tmax={ 100 }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</MaybeVStack>\n\t\t</Container>\n\t);\n};\n\nexport const FontSizePicker = forwardRef( UnforwardedFontSizePicker );\n\nexport default FontSizePicker;\n"]}

package/build/font-size-picker/styles.js

@@ -0,0 +1,73 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ResetButton = exports.HeaderLabel = exports.HeaderHint = exports.Controls = exports.Container = void 0;
+
+var _base = _interopRequireDefault(require("@emotion/styled/base"));
+
+var _baseControl = _interopRequireDefault(require("../base-control"));
+
+var _button = _interopRequireDefault(require("../button"));
+
+var _space = require("../ui/utils/space");
+
+var _utils = require("../utils");
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+const Container = (0, _base.default)("fieldset", process.env.NODE_ENV === "production" ? {
+  target: "e8tqeku4"
+} : {
+  target: "e8tqeku4",
+  label: "Container"
+})(process.env.NODE_ENV === "production" ? {
+  name: "1t1ytme",
+  styles: "border:0;margin:0;padding:0"
+} : {
+  name: "1t1ytme",
+  styles: "border:0;margin:0;padding:0",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZm9udC1zaXplLXBpY2tlci9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBY3dDIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZm9udC1zaXplLXBpY2tlci9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBCYXNlQ29udHJvbCBmcm9tICcuLi9iYXNlLWNvbnRyb2wnO1xuaW1wb3J0IEJ1dHRvbiBmcm9tICcuLi9idXR0b24nO1xuaW1wb3J0IHsgc3BhY2UgfSBmcm9tICcuLi91aS91dGlscy9zcGFjZSc7XG5pbXBvcnQgeyBDT0xPUlMgfSBmcm9tICcuLi91dGlscyc7XG5pbXBvcnQgdHlwZSB7IEZvbnRTaXplUGlja2VyUHJvcHMgfSBmcm9tICcuL3R5cGVzJztcblxuZXhwb3J0IGNvbnN0IENvbnRhaW5lciA9IHN0eWxlZC5maWVsZHNldGBcblx0Ym9yZGVyOiAwO1xuXHRtYXJnaW46IDA7XG5cdHBhZGRpbmc6IDA7XG5gO1xuXG5leHBvcnQgY29uc3QgSGVhZGVyTGFiZWwgPSBzdHlsZWQoIEJhc2VDb250cm9sLlZpc3VhbExhYmVsIClgXG5cdG1hcmdpbi1ib3R0b206IDA7XG5gO1xuXG5leHBvcnQgY29uc3QgSGVhZGVySGludCA9IHN0eWxlZC5zcGFuYFxuXHRjb2xvcjogJHsgQ09MT1JTLmdyYXlbIDcwMCBdIH07XG5cdG1hcmdpbi1sZWZ0OiAkeyBzcGFjZSggMSApIH07XG5gO1xuXG5leHBvcnQgY29uc3QgQ29udHJvbHMgPSBzdHlsZWQuZGl2PCB7XG5cdF9fbmV4dEhhc05vTWFyZ2luQm90dG9tOiBib29sZWFuO1xufSA+YFxuXHQkeyAoIHByb3BzICkgPT5cblx0XHQhIHByb3BzLl9fbmV4dEhhc05vTWFyZ2luQm90dG9tICYmIGBtYXJnaW4tYm90dG9tOiAkeyBzcGFjZSggNiApIH07YCB9XG5gO1xuXG5leHBvcnQgY29uc3QgUmVzZXRCdXR0b24gPSBzdHlsZWQoIEJ1dHRvbiApPCB7XG5cdHNpemU6IEZvbnRTaXplUGlja2VyUHJvcHNbICdzaXplJyBdO1xufSA+YFxuXHQmJiYge1xuXHRcdGhlaWdodDogJHsgKCBwcm9wcyApID0+XG5cdFx0XHRwcm9wcy5zaXplID09PSAnX191bnN0YWJsZS1sYXJnZScgPyAnNDBweCcgOiAnMzBweCcgfTtcblx0fVxuYDtcbiJdfQ== */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+exports.Container = Container;
+const HeaderLabel = ( /*#__PURE__*/0, _base.default)(_baseControl.default.VisualLabel, process.env.NODE_ENV === "production" ? {
+  target: "e8tqeku3"
+} : {
+  target: "e8tqeku3",
+  label: "HeaderLabel"
+})(process.env.NODE_ENV === "production" ? {
+  name: "1ykowef",
+  styles: "margin-bottom:0"
+} : {
+  name: "1ykowef",
+  styles: "margin-bottom:0",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZm9udC1zaXplLXBpY2tlci9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBb0I0RCIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL2ZvbnQtc2l6ZS1waWNrZXIvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgQmFzZUNvbnRyb2wgZnJvbSAnLi4vYmFzZS1jb250cm9sJztcbmltcG9ydCBCdXR0b24gZnJvbSAnLi4vYnV0dG9uJztcbmltcG9ydCB7IHNwYWNlIH0gZnJvbSAnLi4vdWkvdXRpbHMvc3BhY2UnO1xuaW1wb3J0IHsgQ09MT1JTIH0gZnJvbSAnLi4vdXRpbHMnO1xuaW1wb3J0IHR5cGUgeyBGb250U2l6ZVBpY2tlclByb3BzIH0gZnJvbSAnLi90eXBlcyc7XG5cbmV4cG9ydCBjb25zdCBDb250YWluZXIgPSBzdHlsZWQuZmllbGRzZXRgXG5cdGJvcmRlcjogMDtcblx0bWFyZ2luOiAwO1xuXHRwYWRkaW5nOiAwO1xuYDtcblxuZXhwb3J0IGNvbnN0IEhlYWRlckxhYmVsID0gc3R5bGVkKCBCYXNlQ29udHJvbC5WaXN1YWxMYWJlbCApYFxuXHRtYXJnaW4tYm90dG9tOiAwO1xuYDtcblxuZXhwb3J0IGNvbnN0IEhlYWRlckhpbnQgPSBzdHlsZWQuc3BhbmBcblx0Y29sb3I6ICR7IENPTE9SUy5ncmF5WyA3MDAgXSB9O1xuXHRtYXJnaW4tbGVmdDogJHsgc3BhY2UoIDEgKSB9O1xuYDtcblxuZXhwb3J0IGNvbnN0IENvbnRyb2xzID0gc3R5bGVkLmRpdjwge1xuXHRfX25leHRIYXNOb01hcmdpbkJvdHRvbTogYm9vbGVhbjtcbn0gPmBcblx0JHsgKCBwcm9wcyApID0+XG5cdFx0ISBwcm9wcy5fX25leHRIYXNOb01hcmdpbkJvdHRvbSAmJiBgbWFyZ2luLWJvdHRvbTogJHsgc3BhY2UoIDYgKSB9O2AgfVxuYDtcblxuZXhwb3J0IGNvbnN0IFJlc2V0QnV0dG9uID0gc3R5bGVkKCBCdXR0b24gKTwge1xuXHRzaXplOiBGb250U2l6ZVBpY2tlclByb3BzWyAnc2l6ZScgXTtcbn0gPmBcblx0JiYmIHtcblx0XHRoZWlnaHQ6ICR7ICggcHJvcHMgKSA9PlxuXHRcdFx0cHJvcHMuc2l6ZSA9PT0gJ19fdW5zdGFibGUtbGFyZ2UnID8gJzQwcHgnIDogJzMwcHgnIH07XG5cdH1cbmA7XG4iXX0= */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+exports.HeaderLabel = HeaderLabel;
+const HeaderHint = (0, _base.default)("span", process.env.NODE_ENV === "production" ? {
+  target: "e8tqeku2"
+} : {
+  target: "e8tqeku2",
+  label: "HeaderHint"
+})("color:", _utils.COLORS.gray[700], ";margin-left:", (0, _space.space)(1), ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZm9udC1zaXplLXBpY2tlci9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBd0JxQyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL2ZvbnQtc2l6ZS1waWNrZXIvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgQmFzZUNvbnRyb2wgZnJvbSAnLi4vYmFzZS1jb250cm9sJztcbmltcG9ydCBCdXR0b24gZnJvbSAnLi4vYnV0dG9uJztcbmltcG9ydCB7IHNwYWNlIH0gZnJvbSAnLi4vdWkvdXRpbHMvc3BhY2UnO1xuaW1wb3J0IHsgQ09MT1JTIH0gZnJvbSAnLi4vdXRpbHMnO1xuaW1wb3J0IHR5cGUgeyBGb250U2l6ZVBpY2tlclByb3BzIH0gZnJvbSAnLi90eXBlcyc7XG5cbmV4cG9ydCBjb25zdCBDb250YWluZXIgPSBzdHlsZWQuZmllbGRzZXRgXG5cdGJvcmRlcjogMDtcblx0bWFyZ2luOiAwO1xuXHRwYWRkaW5nOiAwO1xuYDtcblxuZXhwb3J0IGNvbnN0IEhlYWRlckxhYmVsID0gc3R5bGVkKCBCYXNlQ29udHJvbC5WaXN1YWxMYWJlbCApYFxuXHRtYXJnaW4tYm90dG9tOiAwO1xuYDtcblxuZXhwb3J0IGNvbnN0IEhlYWRlckhpbnQgPSBzdHlsZWQuc3BhbmBcblx0Y29sb3I6ICR7IENPTE9SUy5ncmF5WyA3MDAgXSB9O1xuXHRtYXJnaW4tbGVmdDogJHsgc3BhY2UoIDEgKSB9O1xuYDtcblxuZXhwb3J0IGNvbnN0IENvbnRyb2xzID0gc3R5bGVkLmRpdjwge1xuXHRfX25leHRIYXNOb01hcmdpbkJvdHRvbTogYm9vbGVhbjtcbn0gPmBcblx0JHsgKCBwcm9wcyApID0+XG5cdFx0ISBwcm9wcy5fX25leHRIYXNOb01hcmdpbkJvdHRvbSAmJiBgbWFyZ2luLWJvdHRvbTogJHsgc3BhY2UoIDYgKSB9O2AgfVxuYDtcblxuZXhwb3J0IGNvbnN0IFJlc2V0QnV0dG9uID0gc3R5bGVkKCBCdXR0b24gKTwge1xuXHRzaXplOiBGb250U2l6ZVBpY2tlclByb3BzWyAnc2l6ZScgXTtcbn0gPmBcblx0JiYmIHtcblx0XHRoZWlnaHQ6ICR7ICggcHJvcHMgKSA9PlxuXHRcdFx0cHJvcHMuc2l6ZSA9PT0gJ19fdW5zdGFibGUtbGFyZ2UnID8gJzQwcHgnIDogJzMwcHgnIH07XG5cdH1cbmA7XG4iXX0= */"));
+exports.HeaderHint = HeaderHint;
+const Controls = (0, _base.default)("div", process.env.NODE_ENV === "production" ? {
+  target: "e8tqeku1"
+} : {
+  target: "e8tqeku1",
+  label: "Controls"
+})(props => !props.__nextHasNoMarginBottom && `margin-bottom: ${(0, _space.space)(6)};`, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZm9udC1zaXplLXBpY2tlci9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBK0JHIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZm9udC1zaXplLXBpY2tlci9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBCYXNlQ29udHJvbCBmcm9tICcuLi9iYXNlLWNvbnRyb2wnO1xuaW1wb3J0IEJ1dHRvbiBmcm9tICcuLi9idXR0b24nO1xuaW1wb3J0IHsgc3BhY2UgfSBmcm9tICcuLi91aS91dGlscy9zcGFjZSc7XG5pbXBvcnQgeyBDT0xPUlMgfSBmcm9tICcuLi91dGlscyc7XG5pbXBvcnQgdHlwZSB7IEZvbnRTaXplUGlja2VyUHJvcHMgfSBmcm9tICcuL3R5cGVzJztcblxuZXhwb3J0IGNvbnN0IENvbnRhaW5lciA9IHN0eWxlZC5maWVsZHNldGBcblx0Ym9yZGVyOiAwO1xuXHRtYXJnaW46IDA7XG5cdHBhZGRpbmc6IDA7XG5gO1xuXG5leHBvcnQgY29uc3QgSGVhZGVyTGFiZWwgPSBzdHlsZWQoIEJhc2VDb250cm9sLlZpc3VhbExhYmVsIClgXG5cdG1hcmdpbi1ib3R0b206IDA7XG5gO1xuXG5leHBvcnQgY29uc3QgSGVhZGVySGludCA9IHN0eWxlZC5zcGFuYFxuXHRjb2xvcjogJHsgQ09MT1JTLmdyYXlbIDcwMCBdIH07XG5cdG1hcmdpbi1sZWZ0OiAkeyBzcGFjZSggMSApIH07XG5gO1xuXG5leHBvcnQgY29uc3QgQ29udHJvbHMgPSBzdHlsZWQuZGl2PCB7XG5cdF9fbmV4dEhhc05vTWFyZ2luQm90dG9tOiBib29sZWFuO1xufSA+YFxuXHQkeyAoIHByb3BzICkgPT5cblx0XHQhIHByb3BzLl9fbmV4dEhhc05vTWFyZ2luQm90dG9tICYmIGBtYXJnaW4tYm90dG9tOiAkeyBzcGFjZSggNiApIH07YCB9XG5gO1xuXG5leHBvcnQgY29uc3QgUmVzZXRCdXR0b24gPSBzdHlsZWQoIEJ1dHRvbiApPCB7XG5cdHNpemU6IEZvbnRTaXplUGlja2VyUHJvcHNbICdzaXplJyBdO1xufSA+YFxuXHQmJiYge1xuXHRcdGhlaWdodDogJHsgKCBwcm9wcyApID0+XG5cdFx0XHRwcm9wcy5zaXplID09PSAnX191bnN0YWJsZS1sYXJnZScgPyAnNDBweCcgOiAnMzBweCcgfTtcblx0fVxuYDtcbiJdfQ== */"));
+exports.Controls = Controls;
+const ResetButton = ( /*#__PURE__*/0, _base.default)(_button.default, process.env.NODE_ENV === "production" ? {
+  target: "e8tqeku0"
+} : {
+  target: "e8tqeku0",
+  label: "ResetButton"
+})("&&&{height:", props => props.size === '__unstable-large' ? '40px' : '30px', ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZm9udC1zaXplLXBpY2tlci9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBc0NHIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZm9udC1zaXplLXBpY2tlci9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBCYXNlQ29udHJvbCBmcm9tICcuLi9iYXNlLWNvbnRyb2wnO1xuaW1wb3J0IEJ1dHRvbiBmcm9tICcuLi9idXR0b24nO1xuaW1wb3J0IHsgc3BhY2UgfSBmcm9tICcuLi91aS91dGlscy9zcGFjZSc7XG5pbXBvcnQgeyBDT0xPUlMgfSBmcm9tICcuLi91dGlscyc7XG5pbXBvcnQgdHlwZSB7IEZvbnRTaXplUGlja2VyUHJvcHMgfSBmcm9tICcuL3R5cGVzJztcblxuZXhwb3J0IGNvbnN0IENvbnRhaW5lciA9IHN0eWxlZC5maWVsZHNldGBcblx0Ym9yZGVyOiAwO1xuXHRtYXJnaW46IDA7XG5cdHBhZGRpbmc6IDA7XG5gO1xuXG5leHBvcnQgY29uc3QgSGVhZGVyTGFiZWwgPSBzdHlsZWQoIEJhc2VDb250cm9sLlZpc3VhbExhYmVsIClgXG5cdG1hcmdpbi1ib3R0b206IDA7XG5gO1xuXG5leHBvcnQgY29uc3QgSGVhZGVySGludCA9IHN0eWxlZC5zcGFuYFxuXHRjb2xvcjogJHsgQ09MT1JTLmdyYXlbIDcwMCBdIH07XG5cdG1hcmdpbi1sZWZ0OiAkeyBzcGFjZSggMSApIH07XG5gO1xuXG5leHBvcnQgY29uc3QgQ29udHJvbHMgPSBzdHlsZWQuZGl2PCB7XG5cdF9fbmV4dEhhc05vTWFyZ2luQm90dG9tOiBib29sZWFuO1xufSA+YFxuXHQkeyAoIHByb3BzICkgPT5cblx0XHQhIHByb3BzLl9fbmV4dEhhc05vTWFyZ2luQm90dG9tICYmIGBtYXJnaW4tYm90dG9tOiAkeyBzcGFjZSggNiApIH07YCB9XG5gO1xuXG5leHBvcnQgY29uc3QgUmVzZXRCdXR0b24gPSBzdHlsZWQoIEJ1dHRvbiApPCB7XG5cdHNpemU6IEZvbnRTaXplUGlja2VyUHJvcHNbICdzaXplJyBdO1xufSA+YFxuXHQmJiYge1xuXHRcdGhlaWdodDogJHsgKCBwcm9wcyApID0+XG5cdFx0XHRwcm9wcy5zaXplID09PSAnX191bnN0YWJsZS1sYXJnZScgPyAnNDBweCcgOiAnMzBweCcgfTtcblx0fVxuYDtcbiJdfQ== */"));
+exports.ResetButton = ResetButton;
+//# sourceMappingURL=styles.js.map

package/build/font-size-picker/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/components/src/font-size-picker/styles.ts"],"names":["Container","HeaderLabel","BaseControl","VisualLabel","HeaderHint","COLORS","gray","Controls","props","__nextHasNoMarginBottom","ResetButton","Button","size"],"mappings":";;;;;;;;;;;AAQA;;AACA;;AACA;;AACA;;;;AAGO,MAAMA,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAf;;AAMA,MAAMC,WAAW,GAAG,iCAAQC,qBAAYC,WAApB;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAjB;;AAIA,MAAMC,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,aACZC,cAAOC,IAAP,CAAa,GAAb,CADY,mBAEN,kBAAO,CAAP,CAFM,isDAAhB;;AAKA,MAAMC,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,GAGfC,KAAF,IACF,CAAEA,KAAK,CAACC,uBAAR,IAAoC,kBAAkB,kBAAO,CAAP,CAAY,GAJ/C,isDAAd;;AAOA,MAAMC,WAAW,GAAG,iCAAQC,eAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH,gBAITH,KAAF,IACVA,KAAK,CAACI,IAAN,KAAe,kBAAf,GAAoC,MAApC,GAA6C,MALxB,ksDAAjB","sourcesContent":["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\nimport Button from '../button';\nimport { space } from '../ui/utils/space';\nimport { COLORS } from '../utils';\nimport type { FontSizePickerProps } from './types';\n\nexport const Container = styled.fieldset`\n\tborder: 0;\n\tmargin: 0;\n\tpadding: 0;\n`;\n\nexport const HeaderLabel = styled( BaseControl.VisualLabel )`\n\tmargin-bottom: 0;\n`;\n\nexport const HeaderHint = styled.span`\n\tcolor: ${ COLORS.gray[ 700 ] };\n\tmargin-left: ${ space( 1 ) };\n`;\n\nexport const Controls = styled.div< {\n\t__nextHasNoMarginBottom: boolean;\n} >`\n\t${ ( props ) =>\n\t\t! props.__nextHasNoMarginBottom && `margin-bottom: ${ space( 6 ) };` }\n`;\n\nexport const ResetButton = styled( Button )< {\n\tsize: FontSizePickerProps[ 'size' ];\n} >`\n\t&&& {\n\t\theight: ${ ( props ) =>\n\t\t\tprops.size === '__unstable-large' ? '40px' : '30px' };\n\t}\n`;\n"]}

package/build/font-size-picker/types.js

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

package/build/font-size-picker/types.js.map

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

package/build/font-size-picker/utils.js

@@ -47,14 +47,16 @@ const FONT_SIZES_ALIASES = [
  * Helper util to split a font size to its numeric value
  * and its `unit`, if exists.
  *
- * @param {string|number} size Font size.
- * @return {[number, string]} An array with the numeric value and the unit if exists.
+ * @param  size Font size.
+ * @return An array with the numeric value and the unit if exists.
  */
 
 function splitValueAndUnitFromSize(size) {
-  const [numericValue, unit] = `${size}`.match(/[\d\.]+|\D+/g);
+  var _$match;
 
-  if (!isNaN(parseFloat(numericValue)) && isFinite(numericValue)) {
+  const [numericValue, unit] = (_$match = `${size}`.match(/[\d\.]+|\D+/g)) !== null && _$match !== void 0 ? _$match : [];
+
+  if (!isNaN(parseFloat(numericValue)) && isFinite(Number(numericValue))) {
     return [numericValue, unit];
   }
 
@@ -64,23 +66,23 @@ function splitValueAndUnitFromSize(size) {
  * Some themes use css vars for their font sizes, so until we
  * have the way of calculating them don't display them.
  *
- * @param {string|number} value The value that is checked.
- * @return {boolean} Whether the value is a simple css value.
+ * @param  value The value that is checked.
+ * @return Whether the value is a simple css value.
  */
 
 
 function isSimpleCssValue(value) {
   const sizeRegex = /^[\d\.]+(px|em|rem|vw|vh|%)?$/i;
-  return sizeRegex.test(value);
+  return sizeRegex.test(String(value));
 }
 /**
  * Return font size options in the proper format depending
  * on the currently used control (select, toggle group).
  *
- * @param {boolean}  useSelectControl       Whether to use a select control.
- * @param {Object[]} optionsArray           Array of available font sizes objects.
- * @param {boolean}  disableCustomFontSizes Flag that indicates if custom font sizes are disabled.
- * @return {Object[]|null}                  Array of font sizes in proper format for the used control.
+ * @param  useSelectControl       Whether to use a select control.
+ * @param  optionsArray           Array of available font sizes objects.
+ * @param  disableCustomFontSizes Flag that indicates if custom font sizes are disabled.
+ * @return Array of font sizes in proper format for the used control.
  */
 
 
@@ -104,16 +106,16 @@ function getSelectOptions(optionsArray, disableCustomFontSizes) {
       key: slug,
       name,
       size,
-      __experimentalHint: size && isSimpleCssValue(size) && parseFloat(size)
+      __experimentalHint: size && isSimpleCssValue(size) && parseFloat(String(size))
     };
   });
 }
 /**
  * Build options for the toggle group options.
  *
- * @param {Array}    optionsArray An array of font size options.
- * @param {string[]} labelAliases An array of alternative labels.
- * @return {Array}   Remapped optionsArray.
+ * @param  optionsArray An array of font size options.
+ * @param  labelAliases An array of alternative labels.
+ * @return Remapped optionsArray.
  */
 
 

package/build/font-size-picker/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/font-size-picker/utils.js"],"names":["DEFAULT_FONT_SIZE","DEFAULT_FONT_SIZE_OPTION","slug","name","CUSTOM_FONT_SIZE","CUSTOM_FONT_SIZE_OPTION","FONT_SIZES_ALIASES","splitValueAndUnitFromSize","size","numericValue","unit","match","isNaN","parseFloat","isFinite","isSimpleCssValue","value","sizeRegex","test","getFontSizeOptions","useSelectControl","optionsArray","disableCustomFontSizes","length","getSelectOptions","getToggleGroupOptions","options","map","key","__experimentalHint","labelAliases","index","label","getSelectedOption","fontSizes","find","font"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\nconst DEFAULT_FONT_SIZE = 'default';\nconst DEFAULT_FONT_SIZE_OPTION = {\n\tslug: DEFAULT_FONT_SIZE,\n\tname: __( 'Default' ),\n};\nexport const CUSTOM_FONT_SIZE = 'custom';\nconst CUSTOM_FONT_SIZE_OPTION = {\n\tslug: CUSTOM_FONT_SIZE,\n\tname: __( 'Custom' ),\n};\n\n/**\n * In case we have at most five font sizes, show a `T-shirt size`\n * alias as a label of the font size. The label assumes that the font sizes\n * are ordered accordingly - from smallest to largest.\n */\nconst FONT_SIZES_ALIASES = [\n\t/* translators: S stands for 'small' and is a size label. */\n\t__( 'S' ),\n\t/* translators: M stands for 'medium' and is a size label. */\n\t__( 'M' ),\n\t/* translators: L stands for 'large' and is a size label. */\n\t__( 'L' ),\n\t/* translators: XL stands for 'extra large' and is a size label. */\n\t__( 'XL' ),\n\t/* translators: XXL stands for 'extra extra large' and is a size label. */\n\t__( 'XXL' ),\n];\n\n/**\n * Helper util to split a font size to its numeric value\n * and its `unit`, if exists.\n *\n * @param {string|number} size Font size.\n * @return {[number, string]} An array with the numeric value and the unit if exists.\n */\nexport function splitValueAndUnitFromSize( size ) {\n\tconst [ numericValue, unit ] = `${ size }`.match( /[\\d\\.]+|\\D+/g );\n\n\tif ( ! isNaN( parseFloat( numericValue ) ) && isFinite( numericValue ) ) {\n\t\treturn [ numericValue, unit ];\n\t}\n\n\treturn [];\n}\n\n/**\n * Some themes use css vars for their font sizes, so until we\n * have the way of calculating them don't display them.\n *\n * @param {string|number} value The value that is checked.\n * @return {boolean} Whether the value is a simple css value.\n */\nexport function isSimpleCssValue( value ) {\n\tconst sizeRegex = /^[\\d\\.]+(px|em|rem|vw|vh|%)?$/i;\n\treturn sizeRegex.test( value );\n}\n\n/**\n * Return font size options in the proper format depending\n * on the currently used control (select, toggle group).\n *\n * @param {boolean}  useSelectControl       Whether to use a select control.\n * @param {Object[]} optionsArray           Array of available font sizes objects.\n * @param {boolean}  disableCustomFontSizes Flag that indicates if custom font sizes are disabled.\n * @return {Object[]|null}                  Array of font sizes in proper format for the used control.\n */\nexport function getFontSizeOptions(\n\tuseSelectControl,\n\toptionsArray,\n\tdisableCustomFontSizes\n) {\n\tif ( disableCustomFontSizes && ! optionsArray.length ) {\n\t\treturn null;\n\t}\n\treturn useSelectControl\n\t\t? getSelectOptions( optionsArray, disableCustomFontSizes )\n\t\t: getToggleGroupOptions( optionsArray );\n}\n\nfunction getSelectOptions( optionsArray, disableCustomFontSizes ) {\n\tconst options = [\n\t\tDEFAULT_FONT_SIZE_OPTION,\n\t\t...optionsArray,\n\t\t...( disableCustomFontSizes ? [] : [ CUSTOM_FONT_SIZE_OPTION ] ),\n\t];\n\treturn options.map( ( { slug, name, size } ) => ( {\n\t\tkey: slug,\n\t\tname,\n\t\tsize,\n\t\t__experimentalHint:\n\t\t\tsize && isSimpleCssValue( size ) && parseFloat( size ),\n\t} ) );\n}\n\n/**\n * Build options for the toggle group options.\n *\n * @param {Array}    optionsArray An array of font size options.\n * @param {string[]} labelAliases An array of alternative labels.\n * @return {Array}   Remapped optionsArray.\n */\nexport function getToggleGroupOptions(\n\toptionsArray,\n\tlabelAliases = FONT_SIZES_ALIASES\n) {\n\treturn optionsArray.map( ( { slug, size, name }, index ) => {\n\t\treturn {\n\t\t\tkey: slug,\n\t\t\tvalue: size,\n\t\t\tlabel: labelAliases[ index ],\n\t\t\tname: name || labelAliases[ index ],\n\t\t};\n\t} );\n}\n\nexport function getSelectedOption( fontSizes, value ) {\n\tif ( ! value ) {\n\t\treturn DEFAULT_FONT_SIZE_OPTION;\n\t}\n\treturn (\n\t\tfontSizes.find( ( font ) => font.size === value ) ||\n\t\tCUSTOM_FONT_SIZE_OPTION\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/font-size-picker/utils.ts"],"names":["DEFAULT_FONT_SIZE","DEFAULT_FONT_SIZE_OPTION","slug","name","CUSTOM_FONT_SIZE","CUSTOM_FONT_SIZE_OPTION","FONT_SIZES_ALIASES","splitValueAndUnitFromSize","size","numericValue","unit","match","isNaN","parseFloat","isFinite","Number","isSimpleCssValue","value","sizeRegex","test","String","getFontSizeOptions","useSelectControl","optionsArray","disableCustomFontSizes","length","getSelectOptions","getToggleGroupOptions","options","map","key","__experimentalHint","labelAliases","index","label","getSelectedOption","fontSizes","find","font"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tFontSize,\n\tFontSizeOption,\n\tFontSizeSelectOption,\n\tFontSizeToggleGroupOption,\n\tFontSizePickerProps,\n} from './types';\n\nconst DEFAULT_FONT_SIZE = 'default';\nconst DEFAULT_FONT_SIZE_OPTION = {\n\tslug: DEFAULT_FONT_SIZE,\n\tname: __( 'Default' ),\n};\nexport const CUSTOM_FONT_SIZE = 'custom';\nconst CUSTOM_FONT_SIZE_OPTION = {\n\tslug: CUSTOM_FONT_SIZE,\n\tname: __( 'Custom' ),\n};\n\n/**\n * In case we have at most five font sizes, show a `T-shirt size`\n * alias as a label of the font size. The label assumes that the font sizes\n * are ordered accordingly - from smallest to largest.\n */\nconst FONT_SIZES_ALIASES = [\n\t/* translators: S stands for 'small' and is a size label. */\n\t__( 'S' ),\n\t/* translators: M stands for 'medium' and is a size label. */\n\t__( 'M' ),\n\t/* translators: L stands for 'large' and is a size label. */\n\t__( 'L' ),\n\t/* translators: XL stands for 'extra large' and is a size label. */\n\t__( 'XL' ),\n\t/* translators: XXL stands for 'extra extra large' and is a size label. */\n\t__( 'XXL' ),\n];\n\n/**\n * Helper util to split a font size to its numeric value\n * and its `unit`, if exists.\n *\n * @param  size Font size.\n * @return An array with the numeric value and the unit if exists.\n */\nexport function splitValueAndUnitFromSize(\n\tsize: NonNullable< FontSizePickerProps[ 'value' ] >\n) {\n\tconst [ numericValue, unit ] = `${ size }`.match( /[\\d\\.]+|\\D+/g ) ?? [];\n\n\tif (\n\t\t! isNaN( parseFloat( numericValue ) ) &&\n\t\tisFinite( Number( numericValue ) )\n\t) {\n\t\treturn [ numericValue, unit ];\n\t}\n\n\treturn [];\n}\n\n/**\n * Some themes use css vars for their font sizes, so until we\n * have the way of calculating them don't display them.\n *\n * @param  value The value that is checked.\n * @return Whether the value is a simple css value.\n */\nexport function isSimpleCssValue(\n\tvalue: NonNullable< FontSizePickerProps[ 'value' ] >\n) {\n\tconst sizeRegex = /^[\\d\\.]+(px|em|rem|vw|vh|%)?$/i;\n\treturn sizeRegex.test( String( value ) );\n}\n\n/**\n * Return font size options in the proper format depending\n * on the currently used control (select, toggle group).\n *\n * @param  useSelectControl       Whether to use a select control.\n * @param  optionsArray           Array of available font sizes objects.\n * @param  disableCustomFontSizes Flag that indicates if custom font sizes are disabled.\n * @return Array of font sizes in proper format for the used control.\n */\nexport function getFontSizeOptions(\n\tuseSelectControl: boolean,\n\toptionsArray: FontSize[],\n\tdisableCustomFontSizes: boolean\n): FontSizeSelectOption[] | FontSizeToggleGroupOption[] | null {\n\tif ( disableCustomFontSizes && ! optionsArray.length ) {\n\t\treturn null;\n\t}\n\treturn useSelectControl\n\t\t? getSelectOptions( optionsArray, disableCustomFontSizes )\n\t\t: getToggleGroupOptions( optionsArray );\n}\n\nfunction getSelectOptions(\n\toptionsArray: FontSize[],\n\tdisableCustomFontSizes: boolean\n): FontSizeSelectOption[] {\n\tconst options: FontSizeOption[] = [\n\t\tDEFAULT_FONT_SIZE_OPTION,\n\t\t...optionsArray,\n\t\t...( disableCustomFontSizes ? [] : [ CUSTOM_FONT_SIZE_OPTION ] ),\n\t];\n\treturn options.map( ( { slug, name, size } ) => ( {\n\t\tkey: slug,\n\t\tname,\n\t\tsize,\n\t\t__experimentalHint:\n\t\t\tsize && isSimpleCssValue( size ) && parseFloat( String( size ) ),\n\t} ) );\n}\n\n/**\n * Build options for the toggle group options.\n *\n * @param  optionsArray An array of font size options.\n * @param  labelAliases An array of alternative labels.\n * @return Remapped optionsArray.\n */\nexport function getToggleGroupOptions(\n\toptionsArray: FontSize[],\n\tlabelAliases: string[] = FONT_SIZES_ALIASES\n): FontSizeToggleGroupOption[] {\n\treturn optionsArray.map( ( { slug, size, name }, index ) => {\n\t\treturn {\n\t\t\tkey: slug,\n\t\t\tvalue: size,\n\t\t\tlabel: labelAliases[ index ],\n\t\t\tname: name || labelAliases[ index ],\n\t\t};\n\t} );\n}\n\nexport function getSelectedOption(\n\tfontSizes: FontSize[],\n\tvalue: FontSizePickerProps[ 'value' ]\n): FontSizeOption {\n\tif ( ! value ) {\n\t\treturn DEFAULT_FONT_SIZE_OPTION;\n\t}\n\treturn (\n\t\tfontSizes.find( ( font ) => font.size === value ) ||\n\t\tCUSTOM_FONT_SIZE_OPTION\n\t);\n}\n"]}

package/build/form-token-field/token-input.js

@@ -30,8 +30,11 @@ function UnForwardedTokenInput(props, ref) {
     selectedSuggestionIndex,
     className,
     onChange,
+    onFocus,
+    onBlur,
     ...restProps
   } = props;
+  const [hasFocus, setHasFocus] = (0, _element.useState)(false);
   const size = value ? value.length + 1 : 0;
 
   const onChangeHandler = event => {
@@ -42,6 +45,16 @@ function UnForwardedTokenInput(props, ref) {
     }
   };
 
+  const onFocusHandler = e => {
+    setHasFocus(true);
+    onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
+  };
+
+  const onBlurHandler = e => {
+    setHasFocus(false);
+    onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
+  };
+
   return (0, _element.createElement)("input", (0, _extends2.default)({
     ref: ref,
     id: `components-form-token-input-${instanceId}`,
@@ -49,6 +62,8 @@ function UnForwardedTokenInput(props, ref) {
   }, restProps, {
     value: value || '',
     onChange: onChangeHandler,
+    onFocus: onFocusHandler,
+    onBlur: onBlurHandler,
     size: size,
     className: (0, _classnames.default)(className, 'components-form-token-field__input'),
     autoComplete: "off",
@@ -56,7 +71,11 @@ function UnForwardedTokenInput(props, ref) {
     "aria-expanded": isExpanded,
     "aria-autocomplete": "list",
     "aria-owns": isExpanded ? `components-form-token-suggestions-${instanceId}` : undefined,
-    "aria-activedescendant": selectedSuggestionIndex !== -1 ? `components-form-token-suggestions-${instanceId}-${selectedSuggestionIndex}` : undefined,
+    "aria-activedescendant": // Only add the `aria-activedescendant` attribute when:
+    // - the user is actively interacting with the input (`hasFocus`)
+    // - there is a selected suggestion (`selectedSuggestionIndex !== -1`)
+    // - the list of suggestions are rendered in the DOM (`isExpanded`)
+    hasFocus && selectedSuggestionIndex !== -1 && isExpanded ? `components-form-token-suggestions-${instanceId}-${selectedSuggestionIndex}` : undefined,
     "aria-describedby": `components-form-token-suggestions-howto-${instanceId}`
   }));
 }

package/build/form-token-field/token-input.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/form-token-field/token-input.tsx"],"names":["UnForwardedTokenInput","props","ref","value","isExpanded","instanceId","selectedSuggestionIndex","className","onChange","restProps","size","length","onChangeHandler","event","target","undefined","TokenInput"],"mappings":";;;;;;;;;;;AASA;;;;AANA;;AAHA;AACA;AACA;;AAIA;AACA;AACA;AASO,SAASA,qBAAT,CACNC,KADM,EAENC,GAFM,EAGL;AACD,QAAM;AACLC,IAAAA,KADK;AAELC,IAAAA,UAFK;AAGLC,IAAAA,UAHK;AAILC,IAAAA,uBAJK;AAKLC,IAAAA,SALK;AAMLC,IAAAA,QANK;AAOL,OAAGC;AAPE,MAQFR,KARJ;AAUA,QAAMS,IAAI,GAAGP,KAAK,GAAGA,KAAK,CAACQ,MAAN,GAAe,CAAlB,GAAsB,CAAxC;;AAEA,QAAMC,eAAe,GAAKC,KAAF,IAA8C;AACrE,QAAKL,QAAL,EAAgB;AACfA,MAAAA,QAAQ,CAAE;AACTL,QAAAA,KAAK,EAAEU,KAAK,CAACC,MAAN,CAAaX;AADX,OAAF,CAAR;AAGA;AACD,GAND;;AAQA,SACC;AACC,IAAA,GAAG,EAAGD,GADP;AAEC,IAAA,EAAE,EAAI,+BAA+BG,UAAY,EAFlD;AAGC,IAAA,IAAI,EAAC;AAHN,KAIMI,SAJN;AAKC,IAAA,KAAK,EAAGN,KAAK,IAAI,EALlB;AAMC,IAAA,QAAQ,EAAGS,eANZ;AAOC,IAAA,IAAI,EAAGF,IAPR;AAQC,IAAA,SAAS,EAAG,yBACXH,SADW,EAEX,oCAFW,CARb;AAYC,IAAA,YAAY,EAAC,KAZd;AAaC,IAAA,IAAI,EAAC,UAbN;AAcC,qBAAgBH,UAdjB;AAeC,yBAAkB,MAfnB;AAgBC,iBACCA,UAAU,GACN,qCAAqCC,UAAY,EAD3C,GAEPU,SAnBL;AAqBC,6BACCT,uBAAuB,KAAK,CAAC,CAA7B,GACI,qCAAqCD,UAAY,IAAIC,uBAAyB,EADlF,GAEGS,SAxBL;AA0BC,wBAAoB,2CAA2CV,UAAY;AA1B5E,KADD;AA8BA;;AAEM,MAAMW,UAAU,GAAG,yBAAYhB,qBAAZ,CAAnB;;eAEQgB,U","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport type { ChangeEvent, ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../ui/context';\nimport type { TokenInputProps } from './types';\n\nexport function UnForwardedTokenInput(\n\tprops: WordPressComponentProps< TokenInputProps, 'input', false >,\n\tref: ForwardedRef< HTMLInputElement >\n) {\n\tconst {\n\t\tvalue,\n\t\tisExpanded,\n\t\tinstanceId,\n\t\tselectedSuggestionIndex,\n\t\tclassName,\n\t\tonChange,\n\t\t...restProps\n\t} = props;\n\n\tconst size = value ? value.length + 1 : 0;\n\n\tconst onChangeHandler = ( event: ChangeEvent< HTMLInputElement > ) => {\n\t\tif ( onChange ) {\n\t\t\tonChange( {\n\t\t\t\tvalue: event.target.value,\n\t\t\t} );\n\t\t}\n\t};\n\n\treturn (\n\t\t<input\n\t\t\tref={ ref }\n\t\t\tid={ `components-form-token-input-${ instanceId }` }\n\t\t\ttype=\"text\"\n\t\t\t{ ...restProps }\n\t\t\tvalue={ value || '' }\n\t\t\tonChange={ onChangeHandler }\n\t\t\tsize={ size }\n\t\t\tclassName={ classnames(\n\t\t\t\tclassName,\n\t\t\t\t'components-form-token-field__input'\n\t\t\t) }\n\t\t\tautoComplete=\"off\"\n\t\t\trole=\"combobox\"\n\t\t\taria-expanded={ isExpanded }\n\t\t\taria-autocomplete=\"list\"\n\t\t\taria-owns={\n\t\t\t\tisExpanded\n\t\t\t\t\t? `components-form-token-suggestions-${ instanceId }`\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\taria-activedescendant={\n\t\t\t\tselectedSuggestionIndex !== -1\n\t\t\t\t\t? `components-form-token-suggestions-${ instanceId }-${ selectedSuggestionIndex }`\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\taria-describedby={ `components-form-token-suggestions-howto-${ instanceId }` }\n\t\t/>\n\t);\n}\n\nexport const TokenInput = forwardRef( UnForwardedTokenInput );\n\nexport default TokenInput;\n"]}
+{"version":3,"sources":["@wordpress/components/src/form-token-field/token-input.tsx"],"names":["UnForwardedTokenInput","props","ref","value","isExpanded","instanceId","selectedSuggestionIndex","className","onChange","onFocus","onBlur","restProps","hasFocus","setHasFocus","size","length","onChangeHandler","event","target","onFocusHandler","e","onBlurHandler","undefined","TokenInput"],"mappings":";;;;;;;;;;;AASA;;;;AANA;;AAHA;AACA;AACA;;AAIA;AACA;AACA;AASO,SAASA,qBAAT,CACNC,KADM,EAENC,GAFM,EAGL;AACD,QAAM;AACLC,IAAAA,KADK;AAELC,IAAAA,UAFK;AAGLC,IAAAA,UAHK;AAILC,IAAAA,uBAJK;AAKLC,IAAAA,SALK;AAMLC,IAAAA,QANK;AAOLC,IAAAA,OAPK;AAQLC,IAAAA,MARK;AASL,OAAGC;AATE,MAUFV,KAVJ;AAYA,QAAM,CAAEW,QAAF,EAAYC,WAAZ,IAA4B,uBAAU,KAAV,CAAlC;AAEA,QAAMC,IAAI,GAAGX,KAAK,GAAGA,KAAK,CAACY,MAAN,GAAe,CAAlB,GAAsB,CAAxC;;AAEA,QAAMC,eAAe,GAAKC,KAAF,IAA8C;AACrE,QAAKT,QAAL,EAAgB;AACfA,MAAAA,QAAQ,CAAE;AACTL,QAAAA,KAAK,EAAEc,KAAK,CAACC,MAAN,CAAaf;AADX,OAAF,CAAR;AAGA;AACD,GAND;;AAQA,QAAMgB,cAAqD,GAAKC,CAAF,IAAS;AACtEP,IAAAA,WAAW,CAAE,IAAF,CAAX;AACAJ,IAAAA,OAAO,SAAP,IAAAA,OAAO,WAAP,YAAAA,OAAO,CAAIW,CAAJ,CAAP;AACA,GAHD;;AAKA,QAAMC,aAA0D,GAC/DD,CADkE,IAE9D;AACJP,IAAAA,WAAW,CAAE,KAAF,CAAX;AACAH,IAAAA,MAAM,SAAN,IAAAA,MAAM,WAAN,YAAAA,MAAM,CAAIU,CAAJ,CAAN;AACA,GALD;;AAOA,SACC;AACC,IAAA,GAAG,EAAGlB,GADP;AAEC,IAAA,EAAE,EAAI,+BAA+BG,UAAY,EAFlD;AAGC,IAAA,IAAI,EAAC;AAHN,KAIMM,SAJN;AAKC,IAAA,KAAK,EAAGR,KAAK,IAAI,EALlB;AAMC,IAAA,QAAQ,EAAGa,eANZ;AAOC,IAAA,OAAO,EAAGG,cAPX;AAQC,IAAA,MAAM,EAAGE,aARV;AASC,IAAA,IAAI,EAAGP,IATR;AAUC,IAAA,SAAS,EAAG,yBACXP,SADW,EAEX,oCAFW,CAVb;AAcC,IAAA,YAAY,EAAC,KAdd;AAeC,IAAA,IAAI,EAAC,UAfN;AAgBC,qBAAgBH,UAhBjB;AAiBC,yBAAkB,MAjBnB;AAkBC,iBACCA,UAAU,GACN,qCAAqCC,UAAY,EAD3C,GAEPiB,SArBL;AAuBC,6BACC;AACA;AACA;AACA;AACAV,IAAAA,QAAQ,IAAIN,uBAAuB,KAAK,CAAC,CAAzC,IAA8CF,UAA9C,GACI,qCAAqCC,UAAY,IAAIC,uBAAyB,EADlF,GAEGgB,SA9BL;AAgCC,wBAAoB,2CAA2CjB,UAAY;AAhC5E,KADD;AAoCA;;AAEM,MAAMkB,UAAU,GAAG,yBAAYvB,qBAAZ,CAAnB;;eAEQuB,U","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport type { ChangeEvent, ForwardedRef, FocusEventHandler } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../ui/context';\nimport type { TokenInputProps } from './types';\n\nexport function UnForwardedTokenInput(\n\tprops: WordPressComponentProps< TokenInputProps, 'input', false >,\n\tref: ForwardedRef< HTMLInputElement >\n) {\n\tconst {\n\t\tvalue,\n\t\tisExpanded,\n\t\tinstanceId,\n\t\tselectedSuggestionIndex,\n\t\tclassName,\n\t\tonChange,\n\t\tonFocus,\n\t\tonBlur,\n\t\t...restProps\n\t} = props;\n\n\tconst [ hasFocus, setHasFocus ] = useState( false );\n\n\tconst size = value ? value.length + 1 : 0;\n\n\tconst onChangeHandler = ( event: ChangeEvent< HTMLInputElement > ) => {\n\t\tif ( onChange ) {\n\t\t\tonChange( {\n\t\t\t\tvalue: event.target.value,\n\t\t\t} );\n\t\t}\n\t};\n\n\tconst onFocusHandler: FocusEventHandler< HTMLInputElement > = ( e ) => {\n\t\tsetHasFocus( true );\n\t\tonFocus?.( e );\n\t};\n\n\tconst onBlurHandler: React.FocusEventHandler< HTMLInputElement > = (\n\t\te\n\t) => {\n\t\tsetHasFocus( false );\n\t\tonBlur?.( e );\n\t};\n\n\treturn (\n\t\t<input\n\t\t\tref={ ref }\n\t\t\tid={ `components-form-token-input-${ instanceId }` }\n\t\t\ttype=\"text\"\n\t\t\t{ ...restProps }\n\t\t\tvalue={ value || '' }\n\t\t\tonChange={ onChangeHandler }\n\t\t\tonFocus={ onFocusHandler }\n\t\t\tonBlur={ onBlurHandler }\n\t\t\tsize={ size }\n\t\t\tclassName={ classnames(\n\t\t\t\tclassName,\n\t\t\t\t'components-form-token-field__input'\n\t\t\t) }\n\t\t\tautoComplete=\"off\"\n\t\t\trole=\"combobox\"\n\t\t\taria-expanded={ isExpanded }\n\t\t\taria-autocomplete=\"list\"\n\t\t\taria-owns={\n\t\t\t\tisExpanded\n\t\t\t\t\t? `components-form-token-suggestions-${ instanceId }`\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\taria-activedescendant={\n\t\t\t\t// Only add the `aria-activedescendant` attribute when:\n\t\t\t\t// - the user is actively interacting with the input (`hasFocus`)\n\t\t\t\t// - there is a selected suggestion (`selectedSuggestionIndex !== -1`)\n\t\t\t\t// - the list of suggestions are rendered in the DOM (`isExpanded`)\n\t\t\t\thasFocus && selectedSuggestionIndex !== -1 && isExpanded\n\t\t\t\t\t? `components-form-token-suggestions-${ instanceId }-${ selectedSuggestionIndex }`\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\taria-describedby={ `components-form-token-suggestions-howto-${ instanceId }` }\n\t\t/>\n\t);\n}\n\nexport const TokenInput = forwardRef( UnForwardedTokenInput );\n\nexport default TokenInput;\n"]}