@wordpress/components 21.3.0 → 22.1.0

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

@@ -0,0 +1,97 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _element = require("@wordpress/element");
+
+var _i18n = require("@wordpress/i18n");
+
+var _customSelectControl = _interopRequireDefault(require("../custom-select-control"));
+
+var _unitControl = require("../unit-control");
+
+var _utils = require("./utils");
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+const DEFAULT_OPTION = {
+  key: 'default',
+  name: (0, _i18n.__)('Default'),
+  value: undefined
+};
+const CUSTOM_OPTION = {
+  key: 'custom',
+  name: (0, _i18n.__)('Custom')
+};
+
+const FontSizePickerSelect = props => {
+  var _options$find;
+
+  const {
+    fontSizes,
+    value,
+    disableCustomFontSizes,
+    size,
+    onChange,
+    onSelectCustom
+  } = props;
+  const areAllSizesSameUnit = !!(0, _utils.getCommonSizeUnit)(fontSizes);
+  const options = [DEFAULT_OPTION, ...fontSizes.map(fontSize => {
+    let hint;
+
+    if (areAllSizesSameUnit) {
+      const [quantity] = (0, _unitControl.parseQuantityAndUnitFromRawValue)(fontSize.size);
+
+      if (quantity !== undefined) {
+        hint = String(quantity);
+      }
+    } else if ((0, _utils.isSimpleCssValue)(fontSize.size)) {
+      hint = String(fontSize.size);
+    }
+
+    return {
+      key: fontSize.slug,
+      name: fontSize.name || fontSize.slug,
+      value: fontSize.size,
+      __experimentalHint: hint
+    };
+  }), ...(disableCustomFontSizes ? [] : [CUSTOM_OPTION])];
+  const selectedOption = value ? (_options$find = options.find(option => option.value === value)) !== null && _options$find !== void 0 ? _options$find : CUSTOM_OPTION : DEFAULT_OPTION;
+  return (0, _element.createElement)(_customSelectControl.default, {
+    __nextUnconstrainedWidth: true,
+    className: "components-font-size-picker__select",
+    label: (0, _i18n.__)('Font size'),
+    hideLabelFromVision: true,
+    describedBy: (0, _i18n.sprintf)( // translators: %s: Currently selected font size.
+    (0, _i18n.__)('Currently selected font size: %s'), selectedOption.name),
+    options: options,
+    value: selectedOption,
+    __experimentalShowSelectedHint: true,
+    onChange: _ref => {
+      let {
+        selectedItem
+      } = _ref;
+
+      if (selectedItem === CUSTOM_OPTION) {
+        onSelectCustom();
+      } else {
+        onChange(selectedItem.value);
+      }
+    },
+    size: size
+  });
+};
+
+var _default = FontSizePickerSelect;
+exports.default = _default;
+//# sourceMappingURL=font-size-picker-select.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/components/src/font-size-picker/font-size-picker-select.tsx"],"names":["DEFAULT_OPTION","key","name","value","undefined","CUSTOM_OPTION","FontSizePickerSelect","props","fontSizes","disableCustomFontSizes","size","onChange","onSelectCustom","areAllSizesSameUnit","options","map","fontSize","hint","quantity","String","slug","__experimentalHint","selectedOption","find","option","selectedItem"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AACA;;AAKA;;AAdA;AACA;AACA;;AAGA;AACA;AACA;AASA,MAAMA,cAA0C,GAAG;AAClDC,EAAAA,GAAG,EAAE,SAD6C;AAElDC,EAAAA,IAAI,EAAE,cAAI,SAAJ,CAF4C;AAGlDC,EAAAA,KAAK,EAAEC;AAH2C,CAAnD;AAMA,MAAMC,aAAyC,GAAG;AACjDJ,EAAAA,GAAG,EAAE,QAD4C;AAEjDC,EAAAA,IAAI,EAAE,cAAI,QAAJ;AAF2C,CAAlD;;AAKA,MAAMI,oBAAoB,GAAKC,KAAF,IAAwC;AAAA;;AACpE,QAAM;AACLC,IAAAA,SADK;AAELL,IAAAA,KAFK;AAGLM,IAAAA,sBAHK;AAILC,IAAAA,IAJK;AAKLC,IAAAA,QALK;AAMLC,IAAAA;AANK,MAOFL,KAPJ;AASA,QAAMM,mBAAmB,GAAG,CAAC,CAAE,8BAAmBL,SAAnB,CAA/B;AAEA,QAAMM,OAAqC,GAAG,CAC7Cd,cAD6C,EAE7C,GAAGQ,SAAS,CAACO,GAAV,CAAiBC,QAAF,IAAgB;AACjC,QAAIC,IAAJ;;AACA,QAAKJ,mBAAL,EAA2B;AAC1B,YAAM,CAAEK,QAAF,IAAe,mDACpBF,QAAQ,CAACN,IADW,CAArB;;AAGA,UAAKQ,QAAQ,KAAKd,SAAlB,EAA8B;AAC7Ba,QAAAA,IAAI,GAAGE,MAAM,CAAED,QAAF,CAAb;AACA;AACD,KAPD,MAOO,IAAK,6BAAkBF,QAAQ,CAACN,IAA3B,CAAL,EAAyC;AAC/CO,MAAAA,IAAI,GAAGE,MAAM,CAAEH,QAAQ,CAACN,IAAX,CAAb;AACA;;AACD,WAAO;AACNT,MAAAA,GAAG,EAAEe,QAAQ,CAACI,IADR;AAENlB,MAAAA,IAAI,EAAEc,QAAQ,CAACd,IAAT,IAAiBc,QAAQ,CAACI,IAF1B;AAGNjB,MAAAA,KAAK,EAAEa,QAAQ,CAACN,IAHV;AAINW,MAAAA,kBAAkB,EAAEJ;AAJd,KAAP;AAMA,GAlBE,CAF0C,EAqB7C,IAAKR,sBAAsB,GAAG,EAAH,GAAQ,CAAEJ,aAAF,CAAnC,CArB6C,CAA9C;AAwBA,QAAMiB,cAAc,GAAGnB,KAAK,oBACzBW,OAAO,CAACS,IAAR,CAAgBC,MAAF,IAAcA,MAAM,CAACrB,KAAP,KAAiBA,KAA7C,CADyB,yDAC+BE,aAD/B,GAEzBL,cAFH;AAIA,SACC,4BAAC,4BAAD;AACC,IAAA,wBAAwB,MADzB;AAEC,IAAA,SAAS,EAAC,qCAFX;AAGC,IAAA,KAAK,EAAG,cAAI,WAAJ,CAHT;AAIC,IAAA,mBAAmB,MAJpB;AAKC,IAAA,WAAW,EAAG,oBACb;AACA,kBAAI,kCAAJ,CAFa,EAGbsB,cAAc,CAACpB,IAHF,CALf;AAUC,IAAA,OAAO,EAAGY,OAVX;AAWC,IAAA,KAAK,EAAGQ,cAXT;AAYC,IAAA,8BAA8B,MAZ/B;AAaC,IAAA,QAAQ,EAAG,QAIJ;AAAA,UAJM;AACZG,QAAAA;AADY,OAIN;;AACN,UAAKA,YAAY,KAAKpB,aAAtB,EAAsC;AACrCO,QAAAA,cAAc;AACd,OAFD,MAEO;AACND,QAAAA,QAAQ,CAAEc,YAAY,CAACtB,KAAf,CAAR;AACA;AACD,KAvBF;AAwBC,IAAA,IAAI,EAAGO;AAxBR,IADD;AA4BA,CApED;;eAsEeJ,oB","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport CustomSelectControl from '../custom-select-control';\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control';\nimport type {\n\tFontSizePickerSelectProps,\n\tFontSizePickerSelectOption,\n} from './types';\nimport { getCommonSizeUnit, isSimpleCssValue } from './utils';\n\nconst DEFAULT_OPTION: FontSizePickerSelectOption = {\n\tkey: 'default',\n\tname: __( 'Default' ),\n\tvalue: undefined,\n};\n\nconst CUSTOM_OPTION: FontSizePickerSelectOption = {\n\tkey: 'custom',\n\tname: __( 'Custom' ),\n};\n\nconst FontSizePickerSelect = ( props: FontSizePickerSelectProps ) => {\n\tconst {\n\t\tfontSizes,\n\t\tvalue,\n\t\tdisableCustomFontSizes,\n\t\tsize,\n\t\tonChange,\n\t\tonSelectCustom,\n\t} = props;\n\n\tconst areAllSizesSameUnit = !! getCommonSizeUnit( fontSizes );\n\n\tconst options: FontSizePickerSelectOption[] = [\n\t\tDEFAULT_OPTION,\n\t\t...fontSizes.map( ( fontSize ) => {\n\t\t\tlet hint;\n\t\t\tif ( areAllSizesSameUnit ) {\n\t\t\t\tconst [ quantity ] = parseQuantityAndUnitFromRawValue(\n\t\t\t\t\tfontSize.size\n\t\t\t\t);\n\t\t\t\tif ( quantity !== undefined ) {\n\t\t\t\t\thint = String( quantity );\n\t\t\t\t}\n\t\t\t} else if ( isSimpleCssValue( fontSize.size ) ) {\n\t\t\t\thint = String( fontSize.size );\n\t\t\t}\n\t\t\treturn {\n\t\t\t\tkey: fontSize.slug,\n\t\t\t\tname: fontSize.name || fontSize.slug,\n\t\t\t\tvalue: fontSize.size,\n\t\t\t\t__experimentalHint: hint,\n\t\t\t};\n\t\t} ),\n\t\t...( disableCustomFontSizes ? [] : [ CUSTOM_OPTION ] ),\n\t];\n\n\tconst selectedOption = value\n\t\t? options.find( ( option ) => option.value === value ) ?? CUSTOM_OPTION\n\t\t: DEFAULT_OPTION;\n\n\treturn (\n\t\t<CustomSelectControl\n\t\t\t__nextUnconstrainedWidth\n\t\t\tclassName=\"components-font-size-picker__select\"\n\t\t\tlabel={ __( 'Font size' ) }\n\t\t\thideLabelFromVision\n\t\t\tdescribedBy={ sprintf(\n\t\t\t\t// translators: %s: Currently selected font size.\n\t\t\t\t__( 'Currently selected font size: %s' ),\n\t\t\t\tselectedOption.name\n\t\t\t) }\n\t\t\toptions={ options }\n\t\t\tvalue={ selectedOption }\n\t\t\t__experimentalShowSelectedHint\n\t\t\tonChange={ ( {\n\t\t\t\tselectedItem,\n\t\t\t}: {\n\t\t\t\tselectedItem: FontSizePickerSelectOption;\n\t\t\t} ) => {\n\t\t\t\tif ( selectedItem === CUSTOM_OPTION ) {\n\t\t\t\t\tonSelectCustom();\n\t\t\t\t} else {\n\t\t\t\t\tonChange( selectedItem.value );\n\t\t\t\t}\n\t\t\t} }\n\t\t\tsize={ size }\n\t\t/>\n\t);\n};\n\nexport default FontSizePickerSelect;\n"]}

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

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _element = require("@wordpress/element");
+
+var _i18n = require("@wordpress/i18n");
+
+var _toggleGroupControl = require("../toggle-group-control");
+
+var _constants = require("./constants");
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+const FontSizePickerToggleGroup = props => {
+  const {
+    fontSizes,
+    value,
+    __nextHasNoMarginBottom,
+    size,
+    onChange
+  } = props;
+  return (0, _element.createElement)(_toggleGroupControl.ToggleGroupControl, {
+    __nextHasNoMarginBottom: __nextHasNoMarginBottom,
+    label: (0, _i18n.__)('Font size'),
+    hideLabelFromVision: true,
+    value: value,
+    onChange: onChange,
+    isBlock: true,
+    size: size
+  }, fontSizes.map((fontSize, index) => (0, _element.createElement)(_toggleGroupControl.ToggleGroupControlOption, {
+    key: fontSize.slug,
+    value: fontSize.size,
+    label: _constants.T_SHIRT_ABBREVIATIONS[index],
+    "aria-label": fontSize.name || _constants.T_SHIRT_NAMES[index],
+    showTooltip: true
+  })));
+};
+
+var _default = FontSizePickerToggleGroup;
+exports.default = _default;
+//# sourceMappingURL=font-size-picker-toggle-group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/components/src/font-size-picker/font-size-picker-toggle-group.tsx"],"names":["FontSizePickerToggleGroup","props","fontSizes","value","__nextHasNoMarginBottom","size","onChange","map","fontSize","index","slug","T_SHIRT_ABBREVIATIONS","name","T_SHIRT_NAMES"],"mappings":";;;;;;;;;AAGA;;AAKA;;AAIA;;AAZA;AACA;AACA;;AAGA;AACA;AACA;AAQA,MAAMA,yBAAyB,GAAKC,KAAF,IAA6C;AAC9E,QAAM;AAAEC,IAAAA,SAAF;AAAaC,IAAAA,KAAb;AAAoBC,IAAAA,uBAApB;AAA6CC,IAAAA,IAA7C;AAAmDC,IAAAA;AAAnD,MAAgEL,KAAtE;AACA,SACC,4BAAC,sCAAD;AACC,IAAA,uBAAuB,EAAGG,uBAD3B;AAEC,IAAA,KAAK,EAAG,cAAI,WAAJ,CAFT;AAGC,IAAA,mBAAmB,MAHpB;AAIC,IAAA,KAAK,EAAGD,KAJT;AAKC,IAAA,QAAQ,EAAGG,QALZ;AAMC,IAAA,OAAO,MANR;AAOC,IAAA,IAAI,EAAGD;AAPR,KASGH,SAAS,CAACK,GAAV,CAAe,CAAEC,QAAF,EAAYC,KAAZ,KAChB,4BAAC,4CAAD;AACC,IAAA,GAAG,EAAGD,QAAQ,CAACE,IADhB;AAEC,IAAA,KAAK,EAAGF,QAAQ,CAACH,IAFlB;AAGC,IAAA,KAAK,EAAGM,iCAAuBF,KAAvB,CAHT;AAIC,kBAAaD,QAAQ,CAACI,IAAT,IAAiBC,yBAAeJ,KAAf,CAJ/B;AAKC,IAAA,WAAW;AALZ,IADC,CATH,CADD;AAqBA,CAvBD;;eAyBeT,yB","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, __nextHasNoMarginBottom, size, onChange } = props;\n\treturn (\n\t\t<ToggleGroupControl\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\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"]}

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

@@ -23,22 +23,22 @@ var _flex = require("../flex");
 
 var _unitControl = _interopRequireWildcard(require("../unit-control"));
 
-var _customSelectControl = _interopRequireDefault(require("../custom-select-control"));
-
 var _visuallyHidden = require("../visually-hidden");
 
-var _toggleGroupControl = require("../toggle-group-control");
-
 var _utils = require("./utils");
 
-var _vStack = require("../v-stack");
-
 var _hStack = require("../h-stack");
 
 var _styles = require("./styles");
 
 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");
+
 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; }
@@ -54,20 +54,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 /**
  * Internal dependencies
  */
-// This conditional is needed to maintain the spacing before the slider in the `withSlider` case.
-const MaybeVStack = _ref => {
-  let {
-    __nextHasNoMarginBottom,
-    children
-  } = _ref;
-  return !__nextHasNoMarginBottom ? (0, _element.createElement)(_element.Fragment, null, children) : (0, _element.createElement)(_vStack.VStack, {
-    spacing: 6,
-    children: children
-  });
-};
-
 const UnforwardedFontSizePicker = (props, ref) => {
-  var _fontSizes$, _value$endsWith;
+  var _fontSizes$;
 
   const {
     /** Start opting into the new margin-free styles that will become the default in a future version. */
@@ -90,62 +78,45 @@ const UnforwardedFontSizePicker = (props, 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(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']
   });
-  /**
-   * The main font size UI displays a toggle group when the presets are less
-   * than six and a select control when they are more.
-   */
-
-  const fontSizesContainComplexValues = fontSizes.some(_ref2 => {
-    let {
-      size: sizeArg
-    } = _ref2;
-    return !(0, _utils.isSimpleCssValue)(sizeArg);
-  });
   const shouldUseSelectControl = fontSizes.length > 5;
-  const options = (0, _element.useMemo)(() => (0, _utils.getFontSizeOptions)(shouldUseSelectControl, fontSizes, disableCustomFontSizes), [shouldUseSelectControl, fontSizes, disableCustomFontSizes]);
-  const selectedOption = (0, _utils.getSelectedOption)(fontSizes, value);
-  const isCustomValue = selectedOption.slug === _utils.CUSTOM_FONT_SIZE;
+  const selectedFontSize = fontSizes.find(fontSize => fontSize.size === value);
+  const isCustomValue = !!value && !selectedFontSize;
   const [showCustomValueControl, setShowCustomValueControl] = (0, _element.useState)(!disableCustomFontSizes && isCustomValue);
   const headerHint = (0, _element.useMemo)(() => {
     if (showCustomValueControl) {
-      return `(${(0, _i18n.__)('Custom')})`;
-    } // If we have a custom value that is not available in the font sizes,
-    // show it as a hint as long as it's a simple CSS value.
-
-
-    if (isCustomValue) {
-      return value !== undefined && (0, _utils.isSimpleCssValue)(value) && `(${value})`;
+      return (0, _i18n.__)('Custom');
     }
 
-    if (shouldUseSelectControl) {
-      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.
+    if (!shouldUseSelectControl) {
+      if (selectedFontSize) {
+        return selectedFontSize.name || _constants.T_SHIRT_NAMES[fontSizes.indexOf(selectedFontSize)];
+      }
 
+      return '';
+    }
 
-    let hint = (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.name) || selectedOption.slug;
+    const commonUnit = (0, _utils.getCommonSizeUnit)(fontSizes);
 
-    if (!fontSizesContainComplexValues && typeof selectedOption.size === 'string') {
-      const [, unit] = (0, _utils.splitValueAndUnitFromSize)(selectedOption.size);
-      hint += `(${unit})`;
+    if (commonUnit) {
+      return `(${commonUnit})`;
     }
 
-    return hint;
-  }, [showCustomValueControl, selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.name, selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.size, value, isCustomValue, shouldUseSelectControl, fontSizesContainComplexValues]);
+    return '';
+  }, [showCustomValueControl, shouldUseSelectControl, selectedFontSize, fontSizes]);
 
-  if (!options) {
+  if (fontSizes.length === 0 && disableCustomFontSizes) {
     return null;
-  } // This is used for select control only. We need to add support
-  // for ToggleGroupControl.
+  } // If neither the value or first font size is a string, then FontSizePicker
+  // operates in a legacy "unitless" mode where UnitControl can only be used
+  // to select px values and onChange() is always called with number values.
 
 
-  const currentFontSizeSR = (0, _i18n.sprintf)( // translators: %s: Currently selected font size.
-  (0, _i18n.__)('Currently selected font size: %s'), selectedOption.name);
+  const hasUnits = typeof value === 'string' || typeof ((_fontSizes$ = fontSizes[0]) === null || _fontSizes$ === void 0 ? void 0 : _fontSizes$.size) === 'string';
+  const [valueQuantity, valueUnit] = (0, _unitControl.parseQuantityAndUnitFromRawValue)(value, units);
+  const isValueUnitRelative = !!valueUnit && ['em', 'rem'].includes(valueUnit);
   return (0, _element.createElement)(_styles.Container, {
     ref: ref,
     className: "components-font-size-picker"
@@ -153,7 +124,9 @@ const UnforwardedFontSizePicker = (props, ref) => {
     as: "legend"
   }, (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, {
+  }, (0, _element.createElement)(_styles.HeaderLabel, {
+    "aria-label": `${(0, _i18n.__)('Size')} ${headerHint || ''}`
+  }, (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'),
@@ -163,47 +136,35 @@ const UnforwardedFontSizePicker = (props, ref) => {
     },
     isPressed: showCustomValueControl,
     isSmall: true
-  }))), (0, _element.createElement)(MaybeVStack, {
-    __nextHasNoMarginBottom: __nextHasNoMarginBottom
-  }, (0, _element.createElement)(_styles.Controls, {
+  }))), (0, _element.createElement)(_styles.Controls, {
     className: "components-font-size-picker__controls",
     __nextHasNoMarginBottom: __nextHasNoMarginBottom
-  }, !!fontSizes.length && shouldUseSelectControl && !showCustomValueControl && (0, _element.createElement)(_customSelectControl.default, {
-    __nextUnconstrainedWidth: true,
-    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: _ref3 => {
-      let {
-        selectedItem
-      } = _ref3;
-      onChange === null || onChange === void 0 ? void 0 : onChange(hasUnits ? selectedItem.size : Number(selectedItem.size));
-
-      if (selectedItem.key === _utils.CUSTOM_FONT_SIZE) {
-        setShowCustomValueControl(true);
+  }, !!fontSizes.length && shouldUseSelectControl && !showCustomValueControl && (0, _element.createElement)(_fontSizePickerSelect.default, {
+    fontSizes: fontSizes,
+    value: value,
+    disableCustomFontSizes: disableCustomFontSizes,
+    size: size,
+    onChange: newValue => {
+      if (newValue === undefined) {
+        onChange === null || onChange === void 0 ? void 0 : onChange(undefined);
+      } else {
+        onChange === null || onChange === void 0 ? void 0 : onChange(hasUnits ? newValue : Number(newValue), fontSizes.find(fontSize => fontSize.size === newValue));
       }
     },
-    size: size
-  }), !shouldUseSelectControl && !showCustomValueControl && (0, _element.createElement)(_toggleGroupControl.ToggleGroupControl, {
-    __nextHasNoMarginBottom: __nextHasNoMarginBottom,
-    label: (0, _i18n.__)('Font size'),
-    hideLabelFromVision: true,
+    onSelectCustom: () => setShowCustomValueControl(true)
+  }), !shouldUseSelectControl && !showCustomValueControl && (0, _element.createElement)(_fontSizePickerToggleGroup.default, {
+    fontSizes: fontSizes,
     value: value,
+    __nextHasNoMarginBottom: __nextHasNoMarginBottom,
+    size: size,
     onChange: newValue => {
-      onChange === null || onChange === void 0 ? void 0 : onChange(hasUnits ? newValue : Number(newValue));
-    },
-    isBlock: true,
-    size: size
-  }, options.map(option => (0, _element.createElement)(_toggleGroupControl.ToggleGroupControlOption, {
-    key: option.key,
-    value: option.value,
-    label: option.label,
-    "aria-label": option.name,
-    showTooltip: true
-  }))), !withSlider && !disableCustomFontSizes && showCustomValueControl && (0, _element.createElement)(_flex.Flex, {
+      if (newValue === undefined) {
+        onChange === null || onChange === void 0 ? void 0 : onChange(undefined);
+      } else {
+        onChange === null || onChange === void 0 ? void 0 : onChange(hasUnits ? newValue : Number(newValue), fontSizes.find(fontSize => fontSize.size === newValue));
+      }
+    }
+  }), !disableCustomFontSizes && showCustomValueControl && (0, _element.createElement)(_flex.Flex, {
     className: "components-font-size-picker__custom-size-control"
   }, (0, _element.createElement)(_flex.FlexItem, {
     isBlock: true
@@ -212,16 +173,42 @@ const UnforwardedFontSizePicker = (props, ref) => {
     labelPosition: "top",
     hideLabelFromVision: true,
     value: value,
-    onChange: nextSize => {
-      if (!nextSize || 0 === parseFloat(nextSize)) {
+    onChange: newValue => {
+      if (newValue === undefined) {
         onChange === null || onChange === void 0 ? void 0 : onChange(undefined);
       } else {
-        onChange === null || onChange === void 0 ? void 0 : onChange(hasUnits ? nextSize : parseInt(nextSize, 10));
+        onChange === null || onChange === void 0 ? void 0 : onChange(hasUnits ? newValue : parseInt(newValue, 10));
       }
     },
     size: size,
-    units: hasUnits ? units : []
-  })), withReset && (0, _element.createElement)(_flex.FlexItem, null, (0, _element.createElement)(_styles.ResetButton, {
+    units: hasUnits ? units : [],
+    min: 0
+  })), withSlider && (0, _element.createElement)(_flex.FlexItem, {
+    isBlock: true
+  }, (0, _element.createElement)(_spacer.Spacer, {
+    marginX: 2,
+    marginBottom: 0
+  }, (0, _element.createElement)(_rangeControl.default, {
+    __nextHasNoMarginBottom: __nextHasNoMarginBottom,
+    className: "components-font-size-picker__custom-input",
+    label: (0, _i18n.__)('Custom Size'),
+    hideLabelFromVision: true,
+    value: valueQuantity,
+    initialPosition: fallbackFontSize,
+    withInputField: false,
+    onChange: newValue => {
+      if (newValue === undefined) {
+        onChange === null || onChange === void 0 ? void 0 : onChange(undefined);
+      } else if (hasUnits) {
+        onChange === null || onChange === void 0 ? void 0 : onChange(newValue + (valueUnit !== null && valueUnit !== void 0 ? valueUnit : 'px'));
+      } else {
+        onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+      }
+    },
+    min: 0,
+    max: isValueUnitRelative ? 10 : 100,
+    step: isValueUnitRelative ? 0.1 : 1
+  }))), withReset && (0, _element.createElement)(_flex.FlexItem, null, (0, _element.createElement)(_styles.ResetButton, {
     disabled: value === undefined,
     onClick: () => {
       onChange === null || onChange === void 0 ? void 0 : onChange(undefined);
@@ -229,18 +216,7 @@ const UnforwardedFontSizePicker = (props, ref) => {
     isSmall: true,
     variant: "secondary",
     size: size
-  }, (0, _i18n.__)('Reset'))))), withSlider && (0, _element.createElement)(_rangeControl.default, {
-    __nextHasNoMarginBottom: __nextHasNoMarginBottom,
-    className: "components-font-size-picker__custom-input",
-    label: (0, _i18n.__)('Custom Size'),
-    value: isPixelValue && noUnitsValue ? Number(noUnitsValue) : undefined,
-    initialPosition: fallbackFontSize,
-    onChange: newValue => {
-      onChange === null || onChange === void 0 ? void 0 : onChange(hasUnits ? newValue + 'px' : newValue);
-    },
-    min: 12,
-    max: 100
-  })));
+  }, (0, _i18n.__)('Reset'))))));
 };
 
 const FontSizePicker = (0, _element.forwardRef)(UnforwardedFontSizePicker);

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

@@ -1 +1 @@
-{"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 || selectedOption.slug;\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"]}
+{"version":3,"sources":["@wordpress/components/src/font-size-picker/index.tsx"],"names":["UnforwardedFontSizePicker","props","ref","__nextHasNoMarginBottom","fallbackFontSize","fontSizes","disableCustomFontSizes","onChange","size","value","withSlider","withReset","since","version","hint","units","availableUnits","shouldUseSelectControl","length","selectedFontSize","find","fontSize","isCustomValue","showCustomValueControl","setShowCustomValueControl","headerHint","name","T_SHIRT_NAMES","indexOf","commonUnit","hasUnits","valueQuantity","valueUnit","isValueUnitRelative","includes","settings","newValue","undefined","Number","parseInt","FontSizePicker"],"mappings":";;;;;;;;;AAWA;;AAHA;;AACA;;AACA;;AAMA;;AACA;;AACA;;AACA;;AAKA;;AACA;;AACA;;AAEA;;AAOA;;AACA;;AACA;;AACA;;;;;;AAtCA;AACA;AACA;;AAGA;AACA;AACA;;AAMA;AACA;AACA;AAyBA,MAAMA,yBAAyB,GAAG,CACjCC,KADiC,EAEjCC,GAFiC,KAG7B;AAAA;;AACJ,QAAM;AACL;AACAC,IAAAA,uBAAuB,GAAG,KAFrB;AAGLC,IAAAA,gBAHK;AAILC,IAAAA,SAAS,GAAG,EAJP;AAKLC,IAAAA,sBAAsB,GAAG,KALpB;AAMLC,IAAAA,QANK;AAOLC,IAAAA,IAAI,GAAG,SAPF;AAQLC,IAAAA,KARK;AASLC,IAAAA,UAAU,GAAG,KATR;AAULC,IAAAA,SAAS,GAAG;AAVP,MAWFV,KAXJ;;AAaA,MAAK,CAAEE,uBAAP,EAAiC;AAChC,6BAAY,uDAAZ,EAAqE;AACpES,MAAAA,KAAK,EAAE,KAD6D;AAEpEC,MAAAA,OAAO,EAAE,KAF2D;AAGpEC,MAAAA,IAAI,EAAE;AAH8D,KAArE;AAKA;;AAED,QAAMC,KAAK,GAAG,iCAAgB;AAC7BC,IAAAA,cAAc,EAAE,CAAE,IAAF,EAAQ,IAAR,EAAc,KAAd;AADa,GAAhB,CAAd;AAIA,QAAMC,sBAAsB,GAAGZ,SAAS,CAACa,MAAV,GAAmB,CAAlD;AACA,QAAMC,gBAAgB,GAAGd,SAAS,CAACe,IAAV,CACtBC,QAAF,IAAgBA,QAAQ,CAACb,IAAT,KAAkBC,KADV,CAAzB;AAGA,QAAMa,aAAa,GAAG,CAAC,CAAEb,KAAH,IAAY,CAAEU,gBAApC;AAEA,QAAM,CAAEI,sBAAF,EAA0BC,yBAA1B,IAAwD,uBAC7D,CAAElB,sBAAF,IAA4BgB,aADiC,CAA9D;AAIA,QAAMG,UAAU,GAAG,sBAAS,MAAM;AACjC,QAAKF,sBAAL,EAA8B;AAC7B,aAAO,cAAI,QAAJ,CAAP;AACA;;AAED,QAAK,CAAEN,sBAAP,EAAgC;AAC/B,UAAKE,gBAAL,EAAwB;AACvB,eACCA,gBAAgB,CAACO,IAAjB,IACAC,yBAAetB,SAAS,CAACuB,OAAV,CAAmBT,gBAAnB,CAAf,CAFD;AAIA;;AACD,aAAO,EAAP;AACA;;AAED,UAAMU,UAAU,GAAG,8BAAmBxB,SAAnB,CAAnB;;AACA,QAAKwB,UAAL,EAAkB;AACjB,aAAQ,IAAIA,UAAY,GAAxB;AACA;;AAED,WAAO,EAAP;AACA,GArBkB,EAqBhB,CACFN,sBADE,EAEFN,sBAFE,EAGFE,gBAHE,EAIFd,SAJE,CArBgB,CAAnB;;AA4BA,MAAKA,SAAS,CAACa,MAAV,KAAqB,CAArB,IAA0BZ,sBAA/B,EAAwD;AACvD,WAAO,IAAP;AACA,GAlEG,CAoEJ;AACA;AACA;;;AACA,QAAMwB,QAAQ,GACb,OAAOrB,KAAP,KAAiB,QAAjB,IAA6B,uBAAOJ,SAAS,CAAE,CAAF,CAAhB,gDAAO,YAAgBG,IAAvB,MAAgC,QAD9D;AAGA,QAAM,CAAEuB,aAAF,EAAiBC,SAAjB,IAA+B,mDACpCvB,KADoC,EAEpCM,KAFoC,CAArC;AAIA,QAAMkB,mBAAmB,GACxB,CAAC,CAAED,SAAH,IAAgB,CAAE,IAAF,EAAQ,KAAR,EAAgBE,QAAhB,CAA0BF,SAA1B,CADjB;AAGA,SACC,4BAAC,iBAAD;AAAW,IAAA,GAAG,EAAG9B,GAAjB;AAAuB,IAAA,SAAS,EAAC;AAAjC,KACC,4BAAC,8BAAD;AAAgB,IAAA,EAAE,EAAC;AAAnB,KAA8B,cAAI,WAAJ,CAA9B,CADD,EAEC,4BAAC,cAAD,QACC,4BAAC,cAAD;AAAQ,IAAA,SAAS,EAAC;AAAlB,KACC,4BAAC,mBAAD;AACC,kBAAc,GAAG,cAAI,MAAJ,CAAc,IAAIuB,UAAU,IAAI,EAAI;AADtD,KAGG,cAAI,MAAJ,CAHH,EAIGA,UAAU,IACX,4BAAC,kBAAD;AAAY,IAAA,SAAS,EAAC;AAAtB,KACGA,UADH,CALF,CADD,EAWG,CAAEnB,sBAAF,IACD,4BAAC,eAAD;AACC,IAAA,KAAK,EACJiB,sBAAsB,GACnB,cAAI,iBAAJ,CADmB,GAEnB,cAAI,iBAAJ,CAJL;AAMC,IAAA,IAAI,EAAGY,eANR;AAOC,IAAA,OAAO,EAAG,MAAM;AACfX,MAAAA,yBAAyB,CACxB,CAAED,sBADsB,CAAzB;AAGA,KAXF;AAYC,IAAA,SAAS,EAAGA,sBAZb;AAaC,IAAA,OAAO;AAbR,IAZF,CADD,CAFD,EAiCC,4BAAC,gBAAD;AACC,IAAA,SAAS,EAAC,uCADX;AAEC,IAAA,uBAAuB,EAAGpB;AAF3B,KAIG,CAAC,CAAEE,SAAS,CAACa,MAAb,IACDD,sBADC,IAED,CAAEM,sBAFD,IAGA,4BAAC,6BAAD;AACC,IAAA,SAAS,EAAGlB,SADb;AAEC,IAAA,KAAK,EAAGI,KAFT;AAGC,IAAA,sBAAsB,EAAGH,sBAH1B;AAIC,IAAA,IAAI,EAAGE,IAJR;AAKC,IAAA,QAAQ,EAAK4B,QAAF,IAAgB;AAC1B,UAAKA,QAAQ,KAAKC,SAAlB,EAA8B;AAC7B9B,QAAAA,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAI8B,SAAJ,CAAR;AACA,OAFD,MAEO;AACN9B,QAAAA,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CACPuB,QAAQ,GACLM,QADK,GAELE,MAAM,CAAEF,QAAF,CAHF,EAIP/B,SAAS,CAACe,IAAV,CACGC,QAAF,IACCA,QAAQ,CAACb,IAAT,KAAkB4B,QAFpB,CAJO,CAAR;AASA;AACD,KAnBF;AAoBC,IAAA,cAAc,EAAG,MAChBZ,yBAAyB,CAAE,IAAF;AArB3B,IAPH,EAgCG,CAAEP,sBAAF,IAA4B,CAAEM,sBAA9B,IACD,4BAAC,kCAAD;AACC,IAAA,SAAS,EAAGlB,SADb;AAEC,IAAA,KAAK,EAAGI,KAFT;AAGC,IAAA,uBAAuB,EAAGN,uBAH3B;AAIC,IAAA,IAAI,EAAGK,IAJR;AAKC,IAAA,QAAQ,EAAK4B,QAAF,IAAgB;AAC1B,UAAKA,QAAQ,KAAKC,SAAlB,EAA8B;AAC7B9B,QAAAA,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAI8B,SAAJ,CAAR;AACA,OAFD,MAEO;AACN9B,QAAAA,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CACPuB,QAAQ,GAAGM,QAAH,GAAcE,MAAM,CAAEF,QAAF,CADrB,EAEP/B,SAAS,CAACe,IAAV,CACGC,QAAF,IACCA,QAAQ,CAACb,IAAT,KAAkB4B,QAFpB,CAFO,CAAR;AAOA;AACD;AAjBF,IAjCF,EAqDG,CAAE9B,sBAAF,IAA4BiB,sBAA5B,IACD,4BAAC,UAAD;AAAM,IAAA,SAAS,EAAC;AAAhB,KACC,4BAAC,cAAD;AAAU,IAAA,OAAO;AAAjB,KACC,4BAAC,oBAAD;AACC,IAAA,KAAK,EAAG,cAAI,QAAJ,CADT;AAEC,IAAA,aAAa,EAAC,KAFf;AAGC,IAAA,mBAAmB,MAHpB;AAIC,IAAA,KAAK,EAAGd,KAJT;AAKC,IAAA,QAAQ,EAAK2B,QAAF,IAAgB;AAC1B,UAAKA,QAAQ,KAAKC,SAAlB,EAA8B;AAC7B9B,QAAAA,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAI8B,SAAJ,CAAR;AACA,OAFD,MAEO;AACN9B,QAAAA,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CACPuB,QAAQ,GACLM,QADK,GAELG,QAAQ,CAAEH,QAAF,EAAY,EAAZ,CAHJ,CAAR;AAKA;AACD,KAfF;AAgBC,IAAA,IAAI,EAAG5B,IAhBR;AAiBC,IAAA,KAAK,EAAGsB,QAAQ,GAAGf,KAAH,GAAW,EAjB5B;AAkBC,IAAA,GAAG,EAAG;AAlBP,IADD,CADD,EAuBGL,UAAU,IACX,4BAAC,cAAD;AAAU,IAAA,OAAO;AAAjB,KACC,4BAAC,cAAD;AAAQ,IAAA,OAAO,EAAG,CAAlB;AAAsB,IAAA,YAAY,EAAG;AAArC,KACC,4BAAC,qBAAD;AACC,IAAA,uBAAuB,EACtBP,uBAFF;AAIC,IAAA,SAAS,EAAC,2CAJX;AAKC,IAAA,KAAK,EAAG,cAAI,aAAJ,CALT;AAMC,IAAA,mBAAmB,MANpB;AAOC,IAAA,KAAK,EAAG4B,aAPT;AAQC,IAAA,eAAe,EAAG3B,gBARnB;AASC,IAAA,cAAc,EAAG,KATlB;AAUC,IAAA,QAAQ,EAAKgC,QAAF,IAAgB;AAC1B,UAAKA,QAAQ,KAAKC,SAAlB,EAA8B;AAC7B9B,QAAAA,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAI8B,SAAJ,CAAR;AACA,OAFD,MAEO,IAAKP,QAAL,EAAgB;AACtBvB,QAAAA,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CACP6B,QAAQ,IACLJ,SADK,aACLA,SADK,cACLA,SADK,GACQ,IADR,CADD,CAAR;AAIA,OALM,MAKA;AACNzB,QAAAA,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAI6B,QAAJ,CAAR;AACA;AACD,KArBF;AAsBC,IAAA,GAAG,EAAG,CAtBP;AAuBC,IAAA,GAAG,EAAGH,mBAAmB,GAAG,EAAH,GAAQ,GAvBlC;AAwBC,IAAA,IAAI,EAAGA,mBAAmB,GAAG,GAAH,GAAS;AAxBpC,IADD,CADD,CAxBF,EAuDGtB,SAAS,IACV,4BAAC,cAAD,QACC,4BAAC,mBAAD;AACC,IAAA,QAAQ,EAAGF,KAAK,KAAK4B,SADtB;AAEC,IAAA,OAAO,EAAG,MAAM;AACf9B,MAAAA,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAI8B,SAAJ,CAAR;AACA,KAJF;AAKC,IAAA,OAAO,MALR;AAMC,IAAA,OAAO,EAAC,WANT;AAOC,IAAA,IAAI,EAAG7B;AAPR,KASG,cAAI,OAAJ,CATH,CADD,CAxDF,CAtDF,CAjCD,CADD;AAmKA,CAvPD;;AAyPO,MAAMgC,cAAc,GAAG,yBAAYxC,yBAAZ,CAAvB;;eAEQwC,c","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport deprecated from '@wordpress/deprecated';\nimport { __ } from '@wordpress/i18n';\nimport { settings } from '@wordpress/icons';\nimport { useState, useMemo, forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport RangeControl from '../range-control';\nimport { Flex, FlexItem } from '../flex';\nimport {\n\tdefault as UnitControl,\n\tparseQuantityAndUnitFromRawValue,\n\tuseCustomUnits,\n} from '../unit-control';\nimport { VisuallyHidden } from '../visually-hidden';\nimport { getCommonSizeUnit } from './utils';\nimport { HStack } from '../h-stack';\nimport type { FontSizePickerProps } from './types';\nimport {\n\tContainer,\n\tHeaderHint,\n\tHeaderLabel,\n\tControls,\n\tResetButton,\n} from './styles';\nimport { Spacer } from '../spacer';\nimport FontSizePickerSelect from './font-size-picker-select';\nimport FontSizePickerToggleGroup from './font-size-picker-toggle-group';\nimport { T_SHIRT_NAMES } from './constants';\n\nconst UnforwardedFontSizePicker = (\n\tprops: FontSizePickerProps,\n\tref: ForwardedRef< any >\n) => {\n\tconst {\n\t\t/** Start opting into the new margin-free styles that will become the default in a future version. */\n\t\t__nextHasNoMarginBottom = false,\n\t\tfallbackFontSize,\n\t\tfontSizes = [],\n\t\tdisableCustomFontSizes = false,\n\t\tonChange,\n\t\tsize = 'default',\n\t\tvalue,\n\t\twithSlider = false,\n\t\twithReset = true,\n\t} = props;\n\n\tif ( ! __nextHasNoMarginBottom ) {\n\t\tdeprecated( 'Bottom margin styles for wp.components.FontSizePicker', {\n\t\t\tsince: '6.1',\n\t\t\tversion: '6.4',\n\t\t\thint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version.',\n\t\t} );\n\t}\n\n\tconst units = useCustomUnits( {\n\t\tavailableUnits: [ 'px', 'em', 'rem' ],\n\t} );\n\n\tconst shouldUseSelectControl = fontSizes.length > 5;\n\tconst selectedFontSize = fontSizes.find(\n\t\t( fontSize ) => fontSize.size === value\n\t);\n\tconst isCustomValue = !! value && ! selectedFontSize;\n\n\tconst [ showCustomValueControl, setShowCustomValueControl ] = useState(\n\t\t! disableCustomFontSizes && isCustomValue\n\t);\n\n\tconst headerHint = useMemo( () => {\n\t\tif ( showCustomValueControl ) {\n\t\t\treturn __( 'Custom' );\n\t\t}\n\n\t\tif ( ! shouldUseSelectControl ) {\n\t\t\tif ( selectedFontSize ) {\n\t\t\t\treturn (\n\t\t\t\t\tselectedFontSize.name ||\n\t\t\t\t\tT_SHIRT_NAMES[ fontSizes.indexOf( selectedFontSize ) ]\n\t\t\t\t);\n\t\t\t}\n\t\t\treturn '';\n\t\t}\n\n\t\tconst commonUnit = getCommonSizeUnit( fontSizes );\n\t\tif ( commonUnit ) {\n\t\t\treturn `(${ commonUnit })`;\n\t\t}\n\n\t\treturn '';\n\t}, [\n\t\tshowCustomValueControl,\n\t\tshouldUseSelectControl,\n\t\tselectedFontSize,\n\t\tfontSizes,\n\t] );\n\n\tif ( fontSizes.length === 0 && disableCustomFontSizes ) {\n\t\treturn null;\n\t}\n\n\t// If neither the value or first font size is a string, then FontSizePicker\n\t// operates in a legacy \"unitless\" mode where UnitControl can only be used\n\t// to select px values and onChange() is always called with number values.\n\tconst hasUnits =\n\t\ttypeof value === 'string' || typeof fontSizes[ 0 ]?.size === 'string';\n\n\tconst [ valueQuantity, valueUnit ] = parseQuantityAndUnitFromRawValue(\n\t\tvalue,\n\t\tunits\n\t);\n\tconst isValueUnitRelative =\n\t\t!! valueUnit && [ 'em', 'rem' ].includes( valueUnit );\n\n\treturn (\n\t\t<Container ref={ ref } className=\"components-font-size-picker\">\n\t\t\t<VisuallyHidden as=\"legend\">{ __( 'Font size' ) }</VisuallyHidden>\n\t\t\t<Spacer>\n\t\t\t\t<HStack className=\"components-font-size-picker__header\">\n\t\t\t\t\t<HeaderLabel\n\t\t\t\t\t\taria-label={ `${ __( 'Size' ) } ${ headerHint || '' }` }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Size' ) }\n\t\t\t\t\t\t{ headerHint && (\n\t\t\t\t\t\t\t<HeaderHint className=\"components-font-size-picker__header__hint\">\n\t\t\t\t\t\t\t\t{ headerHint }\n\t\t\t\t\t\t\t</HeaderHint>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</HeaderLabel>\n\t\t\t\t\t{ ! disableCustomFontSizes && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\tshowCustomValueControl\n\t\t\t\t\t\t\t\t\t? __( 'Use size preset' )\n\t\t\t\t\t\t\t\t\t: __( 'Set custom size' )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\ticon={ settings }\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tsetShowCustomValueControl(\n\t\t\t\t\t\t\t\t\t! showCustomValueControl\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tisPressed={ showCustomValueControl }\n\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</HStack>\n\t\t\t</Spacer>\n\t\t\t<Controls\n\t\t\t\tclassName=\"components-font-size-picker__controls\"\n\t\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\t>\n\t\t\t\t{ !! fontSizes.length &&\n\t\t\t\t\tshouldUseSelectControl &&\n\t\t\t\t\t! showCustomValueControl && (\n\t\t\t\t\t\t<FontSizePickerSelect\n\t\t\t\t\t\t\tfontSizes={ fontSizes }\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\tdisableCustomFontSizes={ disableCustomFontSizes }\n\t\t\t\t\t\t\tsize={ size }\n\t\t\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\t\t\tif ( newValue === undefined ) {\n\t\t\t\t\t\t\t\t\tonChange?.( undefined );\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\tonChange?.(\n\t\t\t\t\t\t\t\t\t\thasUnits\n\t\t\t\t\t\t\t\t\t\t\t? newValue\n\t\t\t\t\t\t\t\t\t\t\t: Number( newValue ),\n\t\t\t\t\t\t\t\t\t\tfontSizes.find(\n\t\t\t\t\t\t\t\t\t\t\t( fontSize ) =>\n\t\t\t\t\t\t\t\t\t\t\t\tfontSize.size === newValue\n\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tonSelectCustom={ () =>\n\t\t\t\t\t\t\t\tsetShowCustomValueControl( true )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t{ ! shouldUseSelectControl && ! showCustomValueControl && (\n\t\t\t\t\t<FontSizePickerToggleGroup\n\t\t\t\t\t\tfontSizes={ fontSizes }\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\t\t\t\tsize={ size }\n\t\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\t\tif ( newValue === undefined ) {\n\t\t\t\t\t\t\t\tonChange?.( undefined );\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tonChange?.(\n\t\t\t\t\t\t\t\t\thasUnits ? newValue : Number( newValue ),\n\t\t\t\t\t\t\t\t\tfontSizes.find(\n\t\t\t\t\t\t\t\t\t\t( fontSize ) =>\n\t\t\t\t\t\t\t\t\t\t\tfontSize.size === newValue\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t{ ! disableCustomFontSizes && showCustomValueControl && (\n\t\t\t\t\t<Flex className=\"components-font-size-picker__custom-size-control\">\n\t\t\t\t\t\t<FlexItem isBlock>\n\t\t\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t\t\tlabel={ __( 'Custom' ) }\n\t\t\t\t\t\t\t\tlabelPosition=\"top\"\n\t\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\t\t\t\tif ( newValue === undefined ) {\n\t\t\t\t\t\t\t\t\t\tonChange?.( undefined );\n\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\tonChange?.(\n\t\t\t\t\t\t\t\t\t\t\thasUnits\n\t\t\t\t\t\t\t\t\t\t\t\t? newValue\n\t\t\t\t\t\t\t\t\t\t\t\t: parseInt( newValue, 10 )\n\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\tsize={ size }\n\t\t\t\t\t\t\t\tunits={ hasUnits ? units : [] }\n\t\t\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t{ withSlider && (\n\t\t\t\t\t\t\t<FlexItem isBlock>\n\t\t\t\t\t\t\t\t<Spacer marginX={ 2 } marginBottom={ 0 }>\n\t\t\t\t\t\t\t\t\t<RangeControl\n\t\t\t\t\t\t\t\t\t\t__nextHasNoMarginBottom={\n\t\t\t\t\t\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tclassName=\"components-font-size-picker__custom-input\"\n\t\t\t\t\t\t\t\t\t\tlabel={ __( 'Custom Size' ) }\n\t\t\t\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\t\t\t\tvalue={ valueQuantity }\n\t\t\t\t\t\t\t\t\t\tinitialPosition={ fallbackFontSize }\n\t\t\t\t\t\t\t\t\t\twithInputField={ false }\n\t\t\t\t\t\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\t\t\t\t\t\tif ( newValue === undefined ) {\n\t\t\t\t\t\t\t\t\t\t\t\tonChange?.( undefined );\n\t\t\t\t\t\t\t\t\t\t\t} else if ( hasUnits ) {\n\t\t\t\t\t\t\t\t\t\t\t\tonChange?.(\n\t\t\t\t\t\t\t\t\t\t\t\t\tnewValue +\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t( valueUnit ?? 'px' )\n\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\tonChange?.( newValue );\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\t\t\t\t\tmax={ isValueUnitRelative ? 10 : 100 }\n\t\t\t\t\t\t\t\t\t\tstep={ isValueUnitRelative ? 0.1 : 1 }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</Spacer>\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ withReset && (\n\t\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t\t<ResetButton\n\t\t\t\t\t\t\t\t\tdisabled={ value === undefined }\n\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\tonChange?.( undefined );\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\t\t\tsize={ size }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ __( 'Reset' ) }\n\t\t\t\t\t\t\t\t</ResetButton>\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</Flex>\n\t\t\t\t) }\n\t\t\t</Controls>\n\t\t</Container>\n\t);\n};\n\nexport const FontSizePicker = forwardRef( UnforwardedFontSizePicker );\n\nexport default FontSizePicker;\n"]}