@wordpress/components 21.1.2-next.4d3b314fd5.0 → 21.3.0

package/build-module/disabled/index.js

@@ -1,15 +1,10 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { createElement } from "@wordpress/element";
 
-/**
- * External dependencies
- */
-
 /**
  * WordPress dependencies
  */
-import { useDisabled } from '@wordpress/compose';
-import { createContext, forwardRef } from '@wordpress/element';
+import { createContext } from '@wordpress/element';
 /**
  * Internal dependencies
  */
@@ -20,14 +15,7 @@ const Context = createContext(false);
 const {
   Consumer,
   Provider
-} = Context; // Extracting this ContentWrapper component in order to make it more explicit
-// the same 'ContentWrapper' component is needed so that React can reconcile
-// the dom correctly when switching between disabled/non-disabled (instead
-// of thrashing the previous DOM and therefore losing the form fields values).
-
-const ContentWrapper = forwardRef((props, ref) => createElement("div", _extends({}, props, {
-  ref: ref
-})));
+} = Context;
 /**
  * `Disabled` is a component which disables descendant tabbable elements and prevents pointer interaction.
  *
@@ -66,20 +54,13 @@ function Disabled(_ref) {
     isDisabled = true,
     ...props
   } = _ref;
-  const ref = useDisabled();
   const cx = useCx();
-
-  if (!isDisabled) {
-    return createElement(Provider, {
-      value: false
-    }, createElement(ContentWrapper, null, children));
-  }
-
   return createElement(Provider, {
-    value: true
-  }, createElement(ContentWrapper, _extends({
-    ref: ref,
-    className: cx(disabledStyles, className, 'components-disabled')
+    value: isDisabled
+  }, createElement("div", _extends({
+    // @ts-ignore Reason: inert is a recent HTML attribute
+    inert: isDisabled ? 'true' : undefined,
+    className: isDisabled ? cx(disabledStyles, className, 'components-disabled') : undefined
   }, props), children));
 }
 

package/build-module/disabled/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/disabled/index.tsx"],"names":["useDisabled","createContext","forwardRef","disabledStyles","useCx","Context","Consumer","Provider","ContentWrapper","props","ref","Disabled","className","children","isDisabled","cx"],"mappings":";;;AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,WAAT,QAA4B,oBAA5B;AACA,SAASC,aAAT,EAAwBC,UAAxB,QAA0C,oBAA1C;AAEA;AACA;AACA;;AACA,SAASC,cAAT,QAA+B,0BAA/B;AAGA,SAASC,KAAT,QAAsB,UAAtB;AAEA,MAAMC,OAAO,GAAGJ,aAAa,CAAa,KAAb,CAA7B;AACA,MAAM;AAAEK,EAAAA,QAAF;AAAYC,EAAAA;AAAZ,IAAyBF,OAA/B,C,CAEA;AACA;AACA;AACA;;AACA,MAAMG,cAAc,GAAGN,UAAU,CAG9B,CAAEO,KAAF,EAASC,GAAT,KAAkB,kCAAUD,KAAV;AAAkB,EAAA,GAAG,EAAGC;AAAxB,GAHY,CAAjC;AAKA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,SAASC,QAAT,OAKqD;AAAA,MALlC;AAClBC,IAAAA,SADkB;AAElBC,IAAAA,QAFkB;AAGlBC,IAAAA,UAAU,GAAG,IAHK;AAIlB,OAAGL;AAJe,GAKkC;AACpD,QAAMC,GAAG,GAAGV,WAAW,EAAvB;AACA,QAAMe,EAAE,GAAGX,KAAK,EAAhB;;AACA,MAAK,CAAEU,UAAP,EAAoB;AACnB,WACC,cAAC,QAAD;AAAU,MAAA,KAAK,EAAG;AAAlB,OACC,cAAC,cAAD,QAAkBD,QAAlB,CADD,CADD;AAKA;;AAED,SACC,cAAC,QAAD;AAAU,IAAA,KAAK,EAAG;AAAlB,KACC,cAAC,cAAD;AACC,IAAA,GAAG,EAAGH,GADP;AAEC,IAAA,SAAS,EAAGK,EAAE,CACbZ,cADa,EAEbS,SAFa,EAGb,qBAHa;AAFf,KAOMH,KAPN,GASGI,QATH,CADD,CADD;AAeA;;AAEDF,QAAQ,CAACN,OAAT,GAAmBA,OAAnB;AACAM,QAAQ,CAACL,QAAT,GAAoBA,QAApB;AAEA,eAAeK,QAAf","sourcesContent":["/**\n * External dependencies\n */\nimport type { HTMLProps } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useDisabled } from '@wordpress/compose';\nimport { createContext, forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { disabledStyles } from './styles/disabled-styles';\nimport type { DisabledProps } from './types';\nimport type { WordPressComponentProps } from '../ui/context';\nimport { useCx } from '../utils';\n\nconst Context = createContext< boolean >( false );\nconst { Consumer, Provider } = Context;\n\n// Extracting this ContentWrapper component in order to make it more explicit\n// the same 'ContentWrapper' component is needed so that React can reconcile\n// the dom correctly when switching between disabled/non-disabled (instead\n// of thrashing the previous DOM and therefore losing the form fields values).\nconst ContentWrapper = forwardRef<\n\tHTMLDivElement,\n\tHTMLProps< HTMLDivElement >\n>( ( props, ref ) => <div { ...props } ref={ ref } /> );\n\n/**\n * `Disabled` is a component which disables descendant tabbable elements and prevents pointer interaction.\n *\n * ```jsx\n * import { Button, Disabled, TextControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyDisabled = () => {\n * \tconst [ isDisabled, setIsDisabled ] = useState( true );\n *\n * \tlet input = <TextControl label=\"Input\" onChange={ () => {} } />;\n * \tif ( isDisabled ) {\n * \t\tinput = <Disabled>{ input }</Disabled>;\n * \t}\n *\n * \tconst toggleDisabled = () => {\n * \t\tsetIsDisabled( ( state ) => ! state );\n * \t};\n *\n * \treturn (\n * \t\t<div>\n * \t\t\t{ input }\n * \t\t\t<Button variant=\"primary\" onClick={ toggleDisabled }>\n * \t\t\t\tToggle Disabled\n * \t\t\t</Button>\n * \t\t</div>\n * \t);\n * };\n * ```\n */\nfunction Disabled( {\n\tclassName,\n\tchildren,\n\tisDisabled = true,\n\t...props\n}: WordPressComponentProps< DisabledProps, 'div' > ) {\n\tconst ref = useDisabled();\n\tconst cx = useCx();\n\tif ( ! isDisabled ) {\n\t\treturn (\n\t\t\t<Provider value={ false }>\n\t\t\t\t<ContentWrapper>{ children }</ContentWrapper>\n\t\t\t</Provider>\n\t\t);\n\t}\n\n\treturn (\n\t\t<Provider value={ true }>\n\t\t\t<ContentWrapper\n\t\t\t\tref={ ref }\n\t\t\t\tclassName={ cx(\n\t\t\t\t\tdisabledStyles,\n\t\t\t\t\tclassName,\n\t\t\t\t\t'components-disabled'\n\t\t\t\t) }\n\t\t\t\t{ ...props }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</ContentWrapper>\n\t\t</Provider>\n\t);\n}\n\nDisabled.Context = Context;\nDisabled.Consumer = Consumer;\n\nexport default Disabled;\n"]}
+{"version":3,"sources":["@wordpress/components/src/disabled/index.tsx"],"names":["createContext","disabledStyles","useCx","Context","Consumer","Provider","Disabled","className","children","isDisabled","props","cx","undefined"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,aAAT,QAA8B,oBAA9B;AAEA;AACA;AACA;;AACA,SAASC,cAAT,QAA+B,0BAA/B;AAGA,SAASC,KAAT,QAAsB,UAAtB;AAEA,MAAMC,OAAO,GAAGH,aAAa,CAAa,KAAb,CAA7B;AACA,MAAM;AAAEI,EAAAA,QAAF;AAAYC,EAAAA;AAAZ,IAAyBF,OAA/B;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,SAASG,QAAT,OAKqD;AAAA,MALlC;AAClBC,IAAAA,SADkB;AAElBC,IAAAA,QAFkB;AAGlBC,IAAAA,UAAU,GAAG,IAHK;AAIlB,OAAGC;AAJe,GAKkC;AACpD,QAAMC,EAAE,GAAGT,KAAK,EAAhB;AAEA,SACC,cAAC,QAAD;AAAU,IAAA,KAAK,EAAGO;AAAlB,KACC;AACC;AACA,IAAA,KAAK,EAAGA,UAAU,GAAG,MAAH,GAAYG,SAF/B;AAGC,IAAA,SAAS,EACRH,UAAU,GACPE,EAAE,CAAEV,cAAF,EAAkBM,SAAlB,EAA6B,qBAA7B,CADK,GAEPK;AANL,KAQMF,KARN,GAUGF,QAVH,CADD,CADD;AAgBA;;AAEDF,QAAQ,CAACH,OAAT,GAAmBA,OAAnB;AACAG,QAAQ,CAACF,QAAT,GAAoBA,QAApB;AAEA,eAAeE,QAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { disabledStyles } from './styles/disabled-styles';\nimport type { DisabledProps } from './types';\nimport type { WordPressComponentProps } from '../ui/context';\nimport { useCx } from '../utils';\n\nconst Context = createContext< boolean >( false );\nconst { Consumer, Provider } = Context;\n\n/**\n * `Disabled` is a component which disables descendant tabbable elements and prevents pointer interaction.\n *\n * ```jsx\n * import { Button, Disabled, TextControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyDisabled = () => {\n * \tconst [ isDisabled, setIsDisabled ] = useState( true );\n *\n * \tlet input = <TextControl label=\"Input\" onChange={ () => {} } />;\n * \tif ( isDisabled ) {\n * \t\tinput = <Disabled>{ input }</Disabled>;\n * \t}\n *\n * \tconst toggleDisabled = () => {\n * \t\tsetIsDisabled( ( state ) => ! state );\n * \t};\n *\n * \treturn (\n * \t\t<div>\n * \t\t\t{ input }\n * \t\t\t<Button variant=\"primary\" onClick={ toggleDisabled }>\n * \t\t\t\tToggle Disabled\n * \t\t\t</Button>\n * \t\t</div>\n * \t);\n * };\n * ```\n */\nfunction Disabled( {\n\tclassName,\n\tchildren,\n\tisDisabled = true,\n\t...props\n}: WordPressComponentProps< DisabledProps, 'div' > ) {\n\tconst cx = useCx();\n\n\treturn (\n\t\t<Provider value={ isDisabled }>\n\t\t\t<div\n\t\t\t\t// @ts-ignore Reason: inert is a recent HTML attribute\n\t\t\t\tinert={ isDisabled ? 'true' : undefined }\n\t\t\t\tclassName={\n\t\t\t\t\tisDisabled\n\t\t\t\t\t\t? cx( disabledStyles, className, 'components-disabled' )\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t\t{ ...props }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</div>\n\t\t</Provider>\n\t);\n}\n\nDisabled.Context = Context;\nDisabled.Consumer = Consumer;\n\nexport default Disabled;\n"]}

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

@@ -1,14 +1,12 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import { createElement } from "@wordpress/element";
+import { createElement, Fragment } from "@wordpress/element";
 
 /**
  * External dependencies
  */
-import classNames from 'classnames';
+
 /**
  * WordPress dependencies
  */
-
 import deprecated from '@wordpress/deprecated';
 import { __, sprintf } from '@wordpress/i18n';
 import { settings } from '@wordpress/icons';
@@ -17,7 +15,6 @@ import { useState, useMemo, forwardRef } from '@wordpress/element';
  * Internal dependencies
  */
 
-import { BaseControl } from '../base-control';
 import Button from '../button';
 import RangeControl from '../range-control';
 import { Flex, FlexItem } from '../flex';
@@ -27,36 +24,36 @@ import { VisuallyHidden } from '../visually-hidden';
 import { ToggleGroupControl, ToggleGroupControlOption } from '../toggle-group-control';
 import { getFontSizeOptions, getSelectedOption, splitValueAndUnitFromSize, isSimpleCssValue, CUSTOM_FONT_SIZE } from './utils';
 import { VStack } from '../v-stack';
-import { HStack } from '../h-stack'; // This conditional is needed to maintain the spacing before the slider in the `withSlider` case.
+import { HStack } from '../h-stack';
+import { Container, HeaderHint, HeaderLabel, Controls, ResetButton } from './styles';
+import { Spacer } from '../spacer'; // This conditional is needed to maintain the spacing before the slider in the `withSlider` case.
 
 const MaybeVStack = _ref => {
   let {
     __nextHasNoMarginBottom,
     children
   } = _ref;
-  return !__nextHasNoMarginBottom ? children : createElement(VStack, {
+  return !__nextHasNoMarginBottom ? createElement(Fragment, null, children) : createElement(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) {
     deprecated('Bottom margin styles for wp.components.FontSizePicker', {
@@ -67,7 +64,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 = useCustomUnits({
     availableUnits: ['px', 'em', 'rem']
@@ -77,10 +74,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 !isSimpleCssValue(sizeArg);
   });
   const shouldUseSelectControl = fontSizes.length > 5;
@@ -96,15 +93,15 @@ function FontSizePicker(_ref2, ref) {
 
 
     if (isCustomValue) {
-      return isSimpleCssValue(value) && `(${value})`;
+      return value !== undefined && isSimpleCssValue(value) && `(${value})`;
     }
 
     if (shouldUseSelectControl) {
-      return 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 && 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.
 
 
-    let hint = selectedOption.name;
+    let hint = (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.name) || selectedOption.slug;
 
     if (!fontSizesContainComplexValues && typeof selectedOption.size === 'string') {
       const [, unit] = splitValueAndUnitFromSize(selectedOption.size);
@@ -122,17 +119,15 @@ function FontSizePicker(_ref2, ref) {
 
   const currentFontSizeSR = sprintf( // translators: %s: Currently selected font size.
   __('Currently selected font size: %s'), selectedOption.name);
-  const baseClassName = 'components-font-size-picker';
-  return createElement("fieldset", _extends({
-    className: baseClassName
-  }, ref ? {} : {
-    ref
-  }), createElement(VisuallyHidden, {
+  return createElement(Container, {
+    ref: ref,
+    className: "components-font-size-picker"
+  }, createElement(VisuallyHidden, {
     as: "legend"
-  }, __('Font size')), createElement(HStack, {
-    className: `${baseClassName}__header`
-  }, createElement(BaseControl.VisualLabel, null, __('Size'), headerHint && createElement("span", {
-    className: `${baseClassName}__header__hint`
+  }, __('Font size')), createElement(Spacer, null, createElement(HStack, {
+    className: "components-font-size-picker__header"
+  }, createElement(HeaderLabel, null, __('Size'), headerHint && createElement(HeaderHint, {
+    className: "components-font-size-picker__header__hint"
   }, headerHint)), !disableCustomFontSizes && createElement(Button, {
     label: showCustomValueControl ? __('Use size preset') : __('Set custom size'),
     icon: settings,
@@ -141,25 +136,24 @@ function FontSizePicker(_ref2, ref) {
     },
     isPressed: showCustomValueControl,
     isSmall: true
-  })), createElement(MaybeVStack, {
+  }))), createElement(MaybeVStack, {
+    __nextHasNoMarginBottom: __nextHasNoMarginBottom
+  }, createElement(Controls, {
+    className: "components-font-size-picker__controls",
     __nextHasNoMarginBottom: __nextHasNoMarginBottom
-  }, createElement("div", {
-    className: classNames(`${baseClassName}__controls`, {
-      'is-next-has-no-margin-bottom': __nextHasNoMarginBottom
-    })
   }, !!fontSizes.length && shouldUseSelectControl && !showCustomValueControl && createElement(CustomSelectControl, {
     __nextUnconstrainedWidth: true,
-    className: `${baseClassName}__select`,
+    className: "components-font-size-picker__select",
     label: __('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 === CUSTOM_FONT_SIZE) {
         setShowCustomValueControl(true);
@@ -172,7 +166,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
@@ -183,8 +177,7 @@ function FontSizePicker(_ref2, ref) {
     "aria-label": option.name,
     showTooltip: true
   }))), !withSlider && !disableCustomFontSizes && showCustomValueControl && createElement(Flex, {
-    justify: "space-between",
-    className: `${baseClassName}__custom-size-control`
+    className: "components-font-size-picker__custom-size-control"
   }, createElement(FlexItem, {
     isBlock: true
   }, createElement(UnitControl, {
@@ -193,37 +186,36 @@ 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 && createElement(FlexItem, {
-    isBlock: true
-  }, createElement(Button, {
-    className: "components-color-palette__clear",
+  })), withReset && createElement(FlexItem, null, createElement(ResetButton, {
     disabled: value === undefined,
     onClick: () => {
-      onChange(undefined);
+      onChange === null || onChange === void 0 ? void 0 : onChange(undefined);
     },
     isSmall: true,
-    variant: "secondary"
+    variant: "secondary",
+    size: size
   }, __('Reset'))))), withSlider && createElement(RangeControl, {
     __nextHasNoMarginBottom: __nextHasNoMarginBottom,
-    className: `${baseClassName}__custom-input`,
+    className: "components-font-size-picker__custom-input",
     label: __('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
   })));
-}
+};
 
-export default forwardRef(FontSizePicker);
+export const FontSizePicker = forwardRef(UnforwardedFontSizePicker);
+export default FontSizePicker;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/font-size-picker/index.js"],"names":["classNames","deprecated","__","sprintf","settings","useState","useMemo","forwardRef","BaseControl","Button","RangeControl","Flex","FlexItem","default","UnitControl","useCustomUnits","CustomSelectControl","VisuallyHidden","ToggleGroupControl","ToggleGroupControlOption","getFontSizeOptions","getSelectedOption","splitValueAndUnitFromSize","isSimpleCssValue","CUSTOM_FONT_SIZE","VStack","HStack","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","showCustomValueControl","setShowCustomValueControl","headerHint","name","unit","currentFontSizeSR","baseClassName","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":["deprecated","__","sprintf","settings","useState","useMemo","forwardRef","Button","RangeControl","Flex","FlexItem","default","UnitControl","useCustomUnits","CustomSelectControl","VisuallyHidden","ToggleGroupControl","ToggleGroupControlOption","getFontSizeOptions","getSelectedOption","splitValueAndUnitFromSize","isSimpleCssValue","CUSTOM_FONT_SIZE","VStack","HStack","Container","HeaderHint","HeaderLabel","Controls","ResetButton","Spacer","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","showCustomValueControl","setShowCustomValueControl","headerHint","undefined","name","unit","currentFontSizeSR","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"]}

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

@@ -0,0 +1,54 @@
+import _styled from "@emotion/styled/base";
+
+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)."; }
+
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+import BaseControl from '../base-control';
+import Button from '../button';
+import { space } from '../ui/utils/space';
+import { COLORS } from '../utils';
+export const Container = _styled("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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZm9udC1zaXplLXBpY2tlci9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBY3dDIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZm9udC1zaXplLXBpY2tlci9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBCYXNlQ29udHJvbCBmcm9tICcuLi9iYXNlLWNvbnRyb2wnO1xuaW1wb3J0IEJ1dHRvbiBmcm9tICcuLi9idXR0b24nO1xuaW1wb3J0IHsgc3BhY2UgfSBmcm9tICcuLi91aS91dGlscy9zcGFjZSc7XG5pbXBvcnQgeyBDT0xPUlMgfSBmcm9tICcuLi91dGlscyc7XG5pbXBvcnQgdHlwZSB7IEZvbnRTaXplUGlja2VyUHJvcHMgfSBmcm9tICcuL3R5cGVzJztcblxuZXhwb3J0IGNvbnN0IENvbnRhaW5lciA9IHN0eWxlZC5maWVsZHNldGBcblx0Ym9yZGVyOiAwO1xuXHRtYXJnaW46IDA7XG5cdHBhZGRpbmc6IDA7XG5gO1xuXG5leHBvcnQgY29uc3QgSGVhZGVyTGFiZWwgPSBzdHlsZWQoIEJhc2VDb250cm9sLlZpc3VhbExhYmVsIClgXG5cdGRpc3BsYXk6IGZsZXg7XG5cdGdhcDogJHsgc3BhY2UoIDEgKSB9O1xuXHRqdXN0aWZ5LWNvbnRlbnQ6IGZsZXgtc3RhcnQ7XG5cdG1hcmdpbi1ib3R0b206IDA7XG5gO1xuXG5leHBvcnQgY29uc3QgSGVhZGVySGludCA9IHN0eWxlZC5zcGFuYFxuXHRjb2xvcjogJHsgQ09MT1JTLmdyYXlbIDcwMCBdIH07XG5gO1xuXG5leHBvcnQgY29uc3QgQ29udHJvbHMgPSBzdHlsZWQuZGl2PCB7XG5cdF9fbmV4dEhhc05vTWFyZ2luQm90dG9tOiBib29sZWFuO1xufSA+YFxuXHQkeyAoIHByb3BzICkgPT5cblx0XHQhIHByb3BzLl9fbmV4dEhhc05vTWFyZ2luQm90dG9tICYmIGBtYXJnaW4tYm90dG9tOiAkeyBzcGFjZSggNiApIH07YCB9XG5gO1xuXG5leHBvcnQgY29uc3QgUmVzZXRCdXR0b24gPSBzdHlsZWQoIEJ1dHRvbiApPCB7XG5cdHNpemU6IEZvbnRTaXplUGlja2VyUHJvcHNbICdzaXplJyBdO1xufSA+YFxuXHQmJiYge1xuXHRcdGhlaWdodDogJHsgKCBwcm9wcyApID0+XG5cdFx0XHRwcm9wcy5zaXplID09PSAnX191bnN0YWJsZS1sYXJnZScgPyAnNDBweCcgOiAnMzBweCcgfTtcblx0fVxuYDtcbiJdfQ== */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+export const HeaderLabel = /*#__PURE__*/_styled(BaseControl.VisualLabel, process.env.NODE_ENV === "production" ? {
+  target: "e8tqeku3"
+} : {
+  target: "e8tqeku3",
+  label: "HeaderLabel"
+})("display:flex;gap:", space(1), ";justify-content:flex-start;margin-bottom:0;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZm9udC1zaXplLXBpY2tlci9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBb0I0RCIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL2ZvbnQtc2l6ZS1waWNrZXIvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgQmFzZUNvbnRyb2wgZnJvbSAnLi4vYmFzZS1jb250cm9sJztcbmltcG9ydCBCdXR0b24gZnJvbSAnLi4vYnV0dG9uJztcbmltcG9ydCB7IHNwYWNlIH0gZnJvbSAnLi4vdWkvdXRpbHMvc3BhY2UnO1xuaW1wb3J0IHsgQ09MT1JTIH0gZnJvbSAnLi4vdXRpbHMnO1xuaW1wb3J0IHR5cGUgeyBGb250U2l6ZVBpY2tlclByb3BzIH0gZnJvbSAnLi90eXBlcyc7XG5cbmV4cG9ydCBjb25zdCBDb250YWluZXIgPSBzdHlsZWQuZmllbGRzZXRgXG5cdGJvcmRlcjogMDtcblx0bWFyZ2luOiAwO1xuXHRwYWRkaW5nOiAwO1xuYDtcblxuZXhwb3J0IGNvbnN0IEhlYWRlckxhYmVsID0gc3R5bGVkKCBCYXNlQ29udHJvbC5WaXN1YWxMYWJlbCApYFxuXHRkaXNwbGF5OiBmbGV4O1xuXHRnYXA6ICR7IHNwYWNlKCAxICkgfTtcblx0anVzdGlmeS1jb250ZW50OiBmbGV4LXN0YXJ0O1xuXHRtYXJnaW4tYm90dG9tOiAwO1xuYDtcblxuZXhwb3J0IGNvbnN0IEhlYWRlckhpbnQgPSBzdHlsZWQuc3BhbmBcblx0Y29sb3I6ICR7IENPTE9SUy5ncmF5WyA3MDAgXSB9O1xuYDtcblxuZXhwb3J0IGNvbnN0IENvbnRyb2xzID0gc3R5bGVkLmRpdjwge1xuXHRfX25leHRIYXNOb01hcmdpbkJvdHRvbTogYm9vbGVhbjtcbn0gPmBcblx0JHsgKCBwcm9wcyApID0+XG5cdFx0ISBwcm9wcy5fX25leHRIYXNOb01hcmdpbkJvdHRvbSAmJiBgbWFyZ2luLWJvdHRvbTogJHsgc3BhY2UoIDYgKSB9O2AgfVxuYDtcblxuZXhwb3J0IGNvbnN0IFJlc2V0QnV0dG9uID0gc3R5bGVkKCBCdXR0b24gKTwge1xuXHRzaXplOiBGb250U2l6ZVBpY2tlclByb3BzWyAnc2l6ZScgXTtcbn0gPmBcblx0JiYmIHtcblx0XHRoZWlnaHQ6ICR7ICggcHJvcHMgKSA9PlxuXHRcdFx0cHJvcHMuc2l6ZSA9PT0gJ19fdW5zdGFibGUtbGFyZ2UnID8gJzQwcHgnIDogJzMwcHgnIH07XG5cdH1cbmA7XG4iXX0= */"));
+export const HeaderHint = _styled("span", process.env.NODE_ENV === "production" ? {
+  target: "e8tqeku2"
+} : {
+  target: "e8tqeku2",
+  label: "HeaderHint"
+})("color:", COLORS.gray[700], ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZm9udC1zaXplLXBpY2tlci9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBMkJxQyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL2ZvbnQtc2l6ZS1waWNrZXIvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgQmFzZUNvbnRyb2wgZnJvbSAnLi4vYmFzZS1jb250cm9sJztcbmltcG9ydCBCdXR0b24gZnJvbSAnLi4vYnV0dG9uJztcbmltcG9ydCB7IHNwYWNlIH0gZnJvbSAnLi4vdWkvdXRpbHMvc3BhY2UnO1xuaW1wb3J0IHsgQ09MT1JTIH0gZnJvbSAnLi4vdXRpbHMnO1xuaW1wb3J0IHR5cGUgeyBGb250U2l6ZVBpY2tlclByb3BzIH0gZnJvbSAnLi90eXBlcyc7XG5cbmV4cG9ydCBjb25zdCBDb250YWluZXIgPSBzdHlsZWQuZmllbGRzZXRgXG5cdGJvcmRlcjogMDtcblx0bWFyZ2luOiAwO1xuXHRwYWRkaW5nOiAwO1xuYDtcblxuZXhwb3J0IGNvbnN0IEhlYWRlckxhYmVsID0gc3R5bGVkKCBCYXNlQ29udHJvbC5WaXN1YWxMYWJlbCApYFxuXHRkaXNwbGF5OiBmbGV4O1xuXHRnYXA6ICR7IHNwYWNlKCAxICkgfTtcblx0anVzdGlmeS1jb250ZW50OiBmbGV4LXN0YXJ0O1xuXHRtYXJnaW4tYm90dG9tOiAwO1xuYDtcblxuZXhwb3J0IGNvbnN0IEhlYWRlckhpbnQgPSBzdHlsZWQuc3BhbmBcblx0Y29sb3I6ICR7IENPTE9SUy5ncmF5WyA3MDAgXSB9O1xuYDtcblxuZXhwb3J0IGNvbnN0IENvbnRyb2xzID0gc3R5bGVkLmRpdjwge1xuXHRfX25leHRIYXNOb01hcmdpbkJvdHRvbTogYm9vbGVhbjtcbn0gPmBcblx0JHsgKCBwcm9wcyApID0+XG5cdFx0ISBwcm9wcy5fX25leHRIYXNOb01hcmdpbkJvdHRvbSAmJiBgbWFyZ2luLWJvdHRvbTogJHsgc3BhY2UoIDYgKSB9O2AgfVxuYDtcblxuZXhwb3J0IGNvbnN0IFJlc2V0QnV0dG9uID0gc3R5bGVkKCBCdXR0b24gKTwge1xuXHRzaXplOiBGb250U2l6ZVBpY2tlclByb3BzWyAnc2l6ZScgXTtcbn0gPmBcblx0JiYmIHtcblx0XHRoZWlnaHQ6ICR7ICggcHJvcHMgKSA9PlxuXHRcdFx0cHJvcHMuc2l6ZSA9PT0gJ19fdW5zdGFibGUtbGFyZ2UnID8gJzQwcHgnIDogJzMwcHgnIH07XG5cdH1cbmA7XG4iXX0= */"));
+export const Controls = _styled("div", process.env.NODE_ENV === "production" ? {
+  target: "e8tqeku1"
+} : {
+  target: "e8tqeku1",
+  label: "Controls"
+})(props => !props.__nextHasNoMarginBottom && `margin-bottom: ${space(6)};`, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZm9udC1zaXplLXBpY2tlci9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBaUNHIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZm9udC1zaXplLXBpY2tlci9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBCYXNlQ29udHJvbCBmcm9tICcuLi9iYXNlLWNvbnRyb2wnO1xuaW1wb3J0IEJ1dHRvbiBmcm9tICcuLi9idXR0b24nO1xuaW1wb3J0IHsgc3BhY2UgfSBmcm9tICcuLi91aS91dGlscy9zcGFjZSc7XG5pbXBvcnQgeyBDT0xPUlMgfSBmcm9tICcuLi91dGlscyc7XG5pbXBvcnQgdHlwZSB7IEZvbnRTaXplUGlja2VyUHJvcHMgfSBmcm9tICcuL3R5cGVzJztcblxuZXhwb3J0IGNvbnN0IENvbnRhaW5lciA9IHN0eWxlZC5maWVsZHNldGBcblx0Ym9yZGVyOiAwO1xuXHRtYXJnaW46IDA7XG5cdHBhZGRpbmc6IDA7XG5gO1xuXG5leHBvcnQgY29uc3QgSGVhZGVyTGFiZWwgPSBzdHlsZWQoIEJhc2VDb250cm9sLlZpc3VhbExhYmVsIClgXG5cdGRpc3BsYXk6IGZsZXg7XG5cdGdhcDogJHsgc3BhY2UoIDEgKSB9O1xuXHRqdXN0aWZ5LWNvbnRlbnQ6IGZsZXgtc3RhcnQ7XG5cdG1hcmdpbi1ib3R0b206IDA7XG5gO1xuXG5leHBvcnQgY29uc3QgSGVhZGVySGludCA9IHN0eWxlZC5zcGFuYFxuXHRjb2xvcjogJHsgQ09MT1JTLmdyYXlbIDcwMCBdIH07XG5gO1xuXG5leHBvcnQgY29uc3QgQ29udHJvbHMgPSBzdHlsZWQuZGl2PCB7XG5cdF9fbmV4dEhhc05vTWFyZ2luQm90dG9tOiBib29sZWFuO1xufSA+YFxuXHQkeyAoIHByb3BzICkgPT5cblx0XHQhIHByb3BzLl9fbmV4dEhhc05vTWFyZ2luQm90dG9tICYmIGBtYXJnaW4tYm90dG9tOiAkeyBzcGFjZSggNiApIH07YCB9XG5gO1xuXG5leHBvcnQgY29uc3QgUmVzZXRCdXR0b24gPSBzdHlsZWQoIEJ1dHRvbiApPCB7XG5cdHNpemU6IEZvbnRTaXplUGlja2VyUHJvcHNbICdzaXplJyBdO1xufSA+YFxuXHQmJiYge1xuXHRcdGhlaWdodDogJHsgKCBwcm9wcyApID0+XG5cdFx0XHRwcm9wcy5zaXplID09PSAnX191bnN0YWJsZS1sYXJnZScgPyAnNDBweCcgOiAnMzBweCcgfTtcblx0fVxuYDtcbiJdfQ== */"));
+export const ResetButton = /*#__PURE__*/_styled(Button, 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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZm9udC1zaXplLXBpY2tlci9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBd0NHIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZm9udC1zaXplLXBpY2tlci9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBCYXNlQ29udHJvbCBmcm9tICcuLi9iYXNlLWNvbnRyb2wnO1xuaW1wb3J0IEJ1dHRvbiBmcm9tICcuLi9idXR0b24nO1xuaW1wb3J0IHsgc3BhY2UgfSBmcm9tICcuLi91aS91dGlscy9zcGFjZSc7XG5pbXBvcnQgeyBDT0xPUlMgfSBmcm9tICcuLi91dGlscyc7XG5pbXBvcnQgdHlwZSB7IEZvbnRTaXplUGlja2VyUHJvcHMgfSBmcm9tICcuL3R5cGVzJztcblxuZXhwb3J0IGNvbnN0IENvbnRhaW5lciA9IHN0eWxlZC5maWVsZHNldGBcblx0Ym9yZGVyOiAwO1xuXHRtYXJnaW46IDA7XG5cdHBhZGRpbmc6IDA7XG5gO1xuXG5leHBvcnQgY29uc3QgSGVhZGVyTGFiZWwgPSBzdHlsZWQoIEJhc2VDb250cm9sLlZpc3VhbExhYmVsIClgXG5cdGRpc3BsYXk6IGZsZXg7XG5cdGdhcDogJHsgc3BhY2UoIDEgKSB9O1xuXHRqdXN0aWZ5LWNvbnRlbnQ6IGZsZXgtc3RhcnQ7XG5cdG1hcmdpbi1ib3R0b206IDA7XG5gO1xuXG5leHBvcnQgY29uc3QgSGVhZGVySGludCA9IHN0eWxlZC5zcGFuYFxuXHRjb2xvcjogJHsgQ09MT1JTLmdyYXlbIDcwMCBdIH07XG5gO1xuXG5leHBvcnQgY29uc3QgQ29udHJvbHMgPSBzdHlsZWQuZGl2PCB7XG5cdF9fbmV4dEhhc05vTWFyZ2luQm90dG9tOiBib29sZWFuO1xufSA+YFxuXHQkeyAoIHByb3BzICkgPT5cblx0XHQhIHByb3BzLl9fbmV4dEhhc05vTWFyZ2luQm90dG9tICYmIGBtYXJnaW4tYm90dG9tOiAkeyBzcGFjZSggNiApIH07YCB9XG5gO1xuXG5leHBvcnQgY29uc3QgUmVzZXRCdXR0b24gPSBzdHlsZWQoIEJ1dHRvbiApPCB7XG5cdHNpemU6IEZvbnRTaXplUGlja2VyUHJvcHNbICdzaXplJyBdO1xufSA+YFxuXHQmJiYge1xuXHRcdGhlaWdodDogJHsgKCBwcm9wcyApID0+XG5cdFx0XHRwcm9wcy5zaXplID09PSAnX191bnN0YWJsZS1sYXJnZScgPyAnNDBweCcgOiAnMzBweCcgfTtcblx0fVxuYDtcbiJdfQ== */"));
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/components/src/font-size-picker/styles.ts"],"names":["BaseControl","Button","space","COLORS","Container","HeaderLabel","VisualLabel","HeaderHint","gray","Controls","props","__nextHasNoMarginBottom","ResetButton","size"],"mappings":";;;;AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,OAAOA,WAAP,MAAwB,iBAAxB;AACA,OAAOC,MAAP,MAAmB,WAAnB;AACA,SAASC,KAAT,QAAsB,mBAAtB;AACA,SAASC,MAAT,QAAuB,UAAvB;AAGA,OAAO,MAAMC,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAf;AAMP,OAAO,MAAMC,WAAW,GAAG,qBAAQL,WAAW,CAACM,WAApB;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH,sBAEfJ,KAAK,CAAE,CAAF,CAFU,oyDAAjB;AAOP,OAAO,MAAMK,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,aACZJ,MAAM,CAACK,IAAP,CAAa,GAAb,CADY,yvDAAhB;AAIP,OAAO,MAAMC,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,GAGfC,KAAF,IACF,CAAEA,KAAK,CAACC,uBAAR,IAAoC,kBAAkBT,KAAK,CAAE,CAAF,CAAO,GAJ/C,yvDAAd;AAOP,OAAO,MAAMU,WAAW,GAAG,qBAAQX,MAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH,gBAITS,KAAF,IACVA,KAAK,CAACG,IAAN,KAAe,kBAAf,GAAoC,MAApC,GAA6C,MALxB,0vDAAjB","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\tdisplay: flex;\n\tgap: ${ space( 1 ) };\n\tjustify-content: flex-start;\n\tmargin-bottom: 0;\n`;\n\nexport const HeaderHint = styled.span`\n\tcolor: ${ COLORS.gray[ 700 ] };\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-module/font-size-picker/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

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

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

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

@@ -2,6 +2,10 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+/**
+ * Internal dependencies
+ */
+
 const DEFAULT_FONT_SIZE = 'default';
 const DEFAULT_FONT_SIZE_OPTION = {
   slug: DEFAULT_FONT_SIZE,
@@ -33,14 +37,16 @@ __('XXL')];
  * 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.
  */
 
 export 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];
   }
 
@@ -50,22 +56,22 @@ export 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.
  */
 
 export 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.
  */
 
 export function getFontSizeOptions(useSelectControl, optionsArray, disableCustomFontSizes) {
@@ -86,18 +92,18 @@ function getSelectOptions(optionsArray, disableCustomFontSizes) {
     } = _ref;
     return {
       key: slug,
-      name,
+      name: name || slug,
       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.
  */