@wordpress/components 30.6.1-next.b8c8708f3.0 → 30.6.1

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/font-size-picker/utils.ts"],
-  "sourcesContent": ["/**\n * Internal dependencies\n */\n\n/**\n * Some themes use css vars for their font sizes, so until we\n * have the way of calculating them don't display them.\n *\n * @param value The value that is checked.\n * @return Whether the value is a simple css value.\n */\nexport function isSimpleCssValue(value) {\n  const sizeRegex = /^[\\d\\.]+(px|em|rem|vw|vh|%|svw|lvw|dvw|svh|lvh|dvh|vi|svi|lvi|dvi|vb|svb|lvb|dvb|vmin|svmin|lvmin|dvmin|vmax|svmax|lvmax|dvmax)?$/i;\n  return sizeRegex.test(String(value));\n}"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAWO,SAAS,iBAAiB,OAAO;AACtC,QAAM,YAAY;AAClB,SAAO,UAAU,KAAK,OAAO,KAAK,CAAC;AACrC;",
+  "sourcesContent": ["/**\n * Internal dependencies\n */\n\n/**\n * Some themes use css vars for their font sizes, so until we\n * have the way of calculating them don't display them.\n *\n * @param value The value that is checked.\n * @return Whether the value is a simple css value.\n */\nexport function isSimpleCssValue(value) {\n  const sizeRegex = /^[\\d\\.]+(px|em|rem|vw|vh|%|svw|lvw|dvw|svh|lvh|dvh|vi|svi|lvi|dvi|vb|svb|lvb|dvb|vmin|svmin|lvmin|dvmin|vmax|svmax|lvmax|dvmax)?$/i;\n  return sizeRegex.test(String(value));\n}\n\n/**\n * Generates hint text for a font size.\n * This function returns the hint provided by the consumer, if any.\n * If no hint is provided, it falls back to showing the size value for simple CSS values.\n *\n * @param fontSize The font size object to generate hint text for.\n * @return The hint text provided by the consumer, or the size value for simple CSS values, or undefined.\n */\nexport function generateFontSizeHint(fontSize) {\n  // If the font size already has a hint, use it\n  if (fontSize.hint) {\n    return fontSize.hint;\n  }\n\n  // Fallback to showing the size value if it's a simple CSS value\n  if (isSimpleCssValue(fontSize.size)) {\n    return String(fontSize.size);\n  }\n  return undefined;\n}"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWO,SAAS,iBAAiB,OAAO;AACtC,QAAM,YAAY;AAClB,SAAO,UAAU,KAAK,OAAO,KAAK,CAAC;AACrC;AAUO,SAAS,qBAAqB,UAAU;AAE7C,MAAI,SAAS,MAAM;AACjB,WAAO,SAAS;AAAA,EAClB;AAGA,MAAI,iBAAiB,SAAS,IAAI,GAAG;AACnC,WAAO,OAAO,SAAS,IAAI;AAAA,EAC7B;AACA,SAAO;AACT;",
   "names": []
 }

package/build-module/custom-select-control-v2/custom-select.js

@@ -1,7 +1,7 @@
 import * as Ariakit from "@ariakit/react";
 import { createContext, useCallback, useMemo } from "@wordpress/element";
 import { __, _n, sprintf } from "@wordpress/i18n";
-import { VisuallyHidden } from "..";
+import { VisuallyHidden } from "../visually-hidden";
 import * as Styled from "./styles";
 import InputBase from "../input-control/input-base";
 import SelectControlChevronDown from "../select-control/chevron-down";

package/build-module/custom-select-control-v2/custom-select.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/custom-select-control-v2/custom-select.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport { createContext, useCallback, useMemo } from '@wordpress/element';\nimport { __, _n, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { VisuallyHidden } from '..';\nimport * as Styled from './styles';\nimport InputBase from '../input-control/input-base';\nimport SelectControlChevronDown from '../select-control/chevron-down';\nimport BaseControl from '../base-control';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nexport const CustomSelectContext = createContext(undefined);\nCustomSelectContext.displayName = 'CustomSelectContext';\nfunction defaultRenderSelectedValue(value) {\n  const isValueEmpty = Array.isArray(value) ? value.length === 0 : value === undefined || value === null;\n  if (isValueEmpty) {\n    return __('Select an item');\n  }\n  if (Array.isArray(value)) {\n    return value.length === 1 ? value[0] : sprintf(\n    // translators: %d: number of items selected (it will always be 2 or more items)\n    _n('%d item selected', '%d items selected', value.length), value.length);\n  }\n  return value;\n}\nconst CustomSelectButton = ({\n  renderSelectedValue,\n  size = 'default',\n  store,\n  ...restProps\n}) => {\n  const {\n    value: currentValue\n  } = Ariakit.useStoreState(store);\n  const computedRenderSelectedValue = useMemo(() => renderSelectedValue !== null && renderSelectedValue !== void 0 ? renderSelectedValue : defaultRenderSelectedValue, [renderSelectedValue]);\n  return /*#__PURE__*/_jsx(Styled.Select, {\n    ...restProps,\n    size: size,\n    hasCustomRenderProp: !!renderSelectedValue,\n    store: store,\n    children: computedRenderSelectedValue(currentValue)\n  });\n};\nfunction _CustomSelect(props) {\n  const {\n    children,\n    hideLabelFromVision = false,\n    label,\n    size,\n    store,\n    className,\n    isLegacy = false,\n    ...restProps\n  } = props;\n  const onSelectPopoverKeyDown = useCallback(e => {\n    if (isLegacy) {\n      e.stopPropagation();\n    }\n  }, [isLegacy]);\n  const contextValue = useMemo(() => ({\n    store,\n    size\n  }), [store, size]);\n  return (\n    /*#__PURE__*/\n    // Where should `restProps` be forwarded to?\n    _jsxs(\"div\", {\n      className: className,\n      children: [/*#__PURE__*/_jsx(Ariakit.SelectLabel, {\n        store: store,\n        render: hideLabelFromVision ?\n        /*#__PURE__*/\n        // @ts-expect-error `children` are passed via the render prop\n        _jsx(VisuallyHidden, {}) :\n        /*#__PURE__*/\n        // @ts-expect-error `children` are passed via the render prop\n        _jsx(BaseControl.VisualLabel, {\n          as: \"div\"\n        }),\n        children: label\n      }), /*#__PURE__*/_jsxs(InputBase, {\n        __next40pxDefaultSize: true,\n        size: size,\n        suffix: /*#__PURE__*/_jsx(SelectControlChevronDown, {}),\n        children: [/*#__PURE__*/_jsx(CustomSelectButton, {\n          ...restProps,\n          size: size,\n          store: store\n          // Match legacy behavior (move selection rather than open the popover)\n          ,\n          showOnKeyDown: !isLegacy\n        }), /*#__PURE__*/_jsx(Styled.SelectPopover, {\n          gutter: 12,\n          store: store,\n          sameWidth: true,\n          slide: false,\n          onKeyDown: onSelectPopoverKeyDown\n          // Match legacy behavior\n          ,\n          flip: !isLegacy,\n          children: /*#__PURE__*/_jsx(CustomSelectContext.Provider, {\n            value: contextValue,\n            children: children\n          })\n        })]\n      })]\n    })\n  );\n}\nexport default _CustomSelect;"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport { createContext, useCallback, useMemo } from '@wordpress/element';\nimport { __, _n, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { VisuallyHidden } from '../visually-hidden';\nimport * as Styled from './styles';\nimport InputBase from '../input-control/input-base';\nimport SelectControlChevronDown from '../select-control/chevron-down';\nimport BaseControl from '../base-control';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nexport const CustomSelectContext = createContext(undefined);\nCustomSelectContext.displayName = 'CustomSelectContext';\nfunction defaultRenderSelectedValue(value) {\n  const isValueEmpty = Array.isArray(value) ? value.length === 0 : value === undefined || value === null;\n  if (isValueEmpty) {\n    return __('Select an item');\n  }\n  if (Array.isArray(value)) {\n    return value.length === 1 ? value[0] : sprintf(\n    // translators: %d: number of items selected (it will always be 2 or more items)\n    _n('%d item selected', '%d items selected', value.length), value.length);\n  }\n  return value;\n}\nconst CustomSelectButton = ({\n  renderSelectedValue,\n  size = 'default',\n  store,\n  ...restProps\n}) => {\n  const {\n    value: currentValue\n  } = Ariakit.useStoreState(store);\n  const computedRenderSelectedValue = useMemo(() => renderSelectedValue !== null && renderSelectedValue !== void 0 ? renderSelectedValue : defaultRenderSelectedValue, [renderSelectedValue]);\n  return /*#__PURE__*/_jsx(Styled.Select, {\n    ...restProps,\n    size: size,\n    hasCustomRenderProp: !!renderSelectedValue,\n    store: store,\n    children: computedRenderSelectedValue(currentValue)\n  });\n};\nfunction _CustomSelect(props) {\n  const {\n    children,\n    hideLabelFromVision = false,\n    label,\n    size,\n    store,\n    className,\n    isLegacy = false,\n    ...restProps\n  } = props;\n  const onSelectPopoverKeyDown = useCallback(e => {\n    if (isLegacy) {\n      e.stopPropagation();\n    }\n  }, [isLegacy]);\n  const contextValue = useMemo(() => ({\n    store,\n    size\n  }), [store, size]);\n  return (\n    /*#__PURE__*/\n    // Where should `restProps` be forwarded to?\n    _jsxs(\"div\", {\n      className: className,\n      children: [/*#__PURE__*/_jsx(Ariakit.SelectLabel, {\n        store: store,\n        render: hideLabelFromVision ?\n        /*#__PURE__*/\n        // @ts-expect-error `children` are passed via the render prop\n        _jsx(VisuallyHidden, {}) :\n        /*#__PURE__*/\n        // @ts-expect-error `children` are passed via the render prop\n        _jsx(BaseControl.VisualLabel, {\n          as: \"div\"\n        }),\n        children: label\n      }), /*#__PURE__*/_jsxs(InputBase, {\n        __next40pxDefaultSize: true,\n        size: size,\n        suffix: /*#__PURE__*/_jsx(SelectControlChevronDown, {}),\n        children: [/*#__PURE__*/_jsx(CustomSelectButton, {\n          ...restProps,\n          size: size,\n          store: store\n          // Match legacy behavior (move selection rather than open the popover)\n          ,\n          showOnKeyDown: !isLegacy\n        }), /*#__PURE__*/_jsx(Styled.SelectPopover, {\n          gutter: 12,\n          store: store,\n          sameWidth: true,\n          slide: false,\n          onKeyDown: onSelectPopoverKeyDown\n          // Match legacy behavior\n          ,\n          flip: !isLegacy,\n          children: /*#__PURE__*/_jsx(CustomSelectContext.Provider, {\n            value: contextValue,\n            children: children\n          })\n        })]\n      })]\n    })\n  );\n}\nexport default _CustomSelect;"],
   "mappings": "AAGA,YAAY,aAAa;AAKzB,SAAS,eAAe,aAAa,eAAe;AACpD,SAAS,IAAI,IAAI,eAAe;AAKhC,SAAS,sBAAsB;AAC/B,YAAY,YAAY;AACxB,OAAO,eAAe;AACtB,OAAO,8BAA8B;AACrC,OAAO,iBAAiB;AACxB,SAAS,OAAO,MAAM,QAAQ,aAAa;AACpC,MAAM,sBAAsB,cAAc,MAAS;AAC1D,oBAAoB,cAAc;AAClC,SAAS,2BAA2B,OAAO;AACzC,QAAM,eAAe,MAAM,QAAQ,KAAK,IAAI,MAAM,WAAW,IAAI,UAAU,UAAa,UAAU;AAClG,MAAI,cAAc;AAChB,WAAO,GAAG,gBAAgB;AAAA,EAC5B;AACA,MAAI,MAAM,QAAQ,KAAK,GAAG;AACxB,WAAO,MAAM,WAAW,IAAI,MAAM,CAAC,IAAI;AAAA;AAAA,MAEvC,GAAG,oBAAoB,qBAAqB,MAAM,MAAM;AAAA,MAAG,MAAM;AAAA,IAAM;AAAA,EACzE;AACA,SAAO;AACT;AACA,MAAM,qBAAqB,CAAC;AAAA,EAC1B;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM;AAAA,IACJ,OAAO;AAAA,EACT,IAAI,QAAQ,cAAc,KAAK;AAC/B,QAAM,8BAA8B,QAAQ,MAAM,wBAAwB,QAAQ,wBAAwB,SAAS,sBAAsB,4BAA4B,CAAC,mBAAmB,CAAC;AAC1L,SAAoB,qBAAK,OAAO,QAAQ;AAAA,IACtC,GAAG;AAAA,IACH;AAAA,IACA,qBAAqB,CAAC,CAAC;AAAA,IACvB;AAAA,IACA,UAAU,4BAA4B,YAAY;AAAA,EACpD,CAAC;AACH;AACA,SAAS,cAAc,OAAO;AAC5B,QAAM;AAAA,IACJ;AAAA,IACA,sBAAsB;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,yBAAyB,YAAY,OAAK;AAC9C,QAAI,UAAU;AACZ,QAAE,gBAAgB;AAAA,IACpB;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AACb,QAAM,eAAe,QAAQ,OAAO;AAAA,IAClC;AAAA,IACA;AAAA,EACF,IAAI,CAAC,OAAO,IAAI,CAAC;AACjB;AAAA;AAAA,IAGE,sBAAM,OAAO;AAAA,MACX;AAAA,MACA,UAAU,CAAc,qBAAK,QAAQ,aAAa;AAAA,QAChD;AAAA,QACA,QAAQ;AAAA;AAAA,UAGR,qBAAK,gBAAgB,CAAC,CAAC;AAAA;AAAA;AAAA,UAGvB,qBAAK,YAAY,aAAa;AAAA,YAC5B,IAAI;AAAA,UACN,CAAC;AAAA;AAAA,QACD,UAAU;AAAA,MACZ,CAAC,GAAgB,sBAAM,WAAW;AAAA,QAChC,uBAAuB;AAAA,QACvB;AAAA,QACA,QAAqB,qBAAK,0BAA0B,CAAC,CAAC;AAAA,QACtD,UAAU,CAAc,qBAAK,oBAAoB;AAAA,UAC/C,GAAG;AAAA,UACH;AAAA,UACA;AAAA,UAGA,eAAe,CAAC;AAAA,QAClB,CAAC,GAAgB,qBAAK,OAAO,eAAe;AAAA,UAC1C,QAAQ;AAAA,UACR;AAAA,UACA,WAAW;AAAA,UACX,OAAO;AAAA,UACP,WAAW;AAAA,UAGX,MAAM,CAAC;AAAA,UACP,UAAuB,qBAAK,oBAAoB,UAAU;AAAA,YACxD,OAAO;AAAA,YACP;AAAA,UACF,CAAC;AAAA,QACH,CAAC,CAAC;AAAA,MACJ,CAAC,CAAC;AAAA,IACJ,CAAC;AAAA;AAEL;AACA,IAAO,wBAAQ;",
   "names": []
 }

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

@@ -1,6 +1,7 @@
 import { __, sprintf } from "@wordpress/i18n";
-import CustomSelectControl from "../custom-select-control";
-import { isSimpleCssValue } from "./utils";
+import { useMemo } from "@wordpress/element";
+import { generateFontSizeHint } from "./utils";
+import { StyledCustomSelectControl } from "./styles";
 import { jsx as _jsx } from "react/jsx-runtime";
 const DEFAULT_OPTION = {
   key: "default",
@@ -8,19 +9,16 @@ const DEFAULT_OPTION = {
   value: void 0
 };
 const FontSizePickerSelect = (props) => {
-  var _options$find;
   const {
     __next40pxDefaultSize,
     fontSizes,
     value,
     size,
+    valueMode = "literal",
     onChange
   } = props;
   const options = [DEFAULT_OPTION, ...fontSizes.map((fontSize) => {
-    let hint;
-    if (isSimpleCssValue(fontSize.size)) {
-      hint = String(fontSize.size);
-    }
+    const hint = generateFontSizeHint(fontSize);
     return {
       key: fontSize.slug,
       name: fontSize.name || fontSize.slug,
@@ -28,8 +26,20 @@ const FontSizePickerSelect = (props) => {
       hint
     };
   })];
-  const selectedOption = (_options$find = options.find((option) => option.value === value)) !== null && _options$find !== void 0 ? _options$find : DEFAULT_OPTION;
-  return /* @__PURE__ */ _jsx(CustomSelectControl, {
+  const selectedOption = useMemo(() => {
+    var _options$find;
+    if (value === void 0) {
+      return DEFAULT_OPTION;
+    }
+    if (valueMode === "slug") {
+      const optionBySlug = options.find((option) => option.key === value);
+      if (optionBySlug) {
+        return optionBySlug;
+      }
+    }
+    return (_options$find = options.find((option) => option.value === value)) !== null && _options$find !== void 0 ? _options$find : DEFAULT_OPTION;
+  }, [value, valueMode, options]);
+  return /* @__PURE__ */ _jsx(StyledCustomSelectControl, {
     __next40pxDefaultSize,
     __shouldNotWarnDeprecated36pxSize: true,
     className: "components-font-size-picker__select",
@@ -46,7 +56,8 @@ const FontSizePickerSelect = (props) => {
     onChange: ({
       selectedItem
     }) => {
-      onChange(selectedItem.value);
+      const matchingFontSize = selectedItem.key === "default" ? void 0 : fontSizes.find((fontSize) => fontSize.slug === selectedItem.key);
+      onChange(selectedItem.value, matchingFontSize);
     },
     size
   });

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/font-size-picker/font-size-picker-select.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport CustomSelectControl from '../custom-select-control';\nimport { isSimpleCssValue } from './utils';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst DEFAULT_OPTION = {\n  key: 'default',\n  name: __('Default'),\n  value: undefined\n};\nconst FontSizePickerSelect = props => {\n  var _options$find;\n  const {\n    __next40pxDefaultSize,\n    fontSizes,\n    value,\n    size,\n    onChange\n  } = props;\n  const options = [DEFAULT_OPTION, ...fontSizes.map(fontSize => {\n    let hint;\n    if (isSimpleCssValue(fontSize.size)) {\n      hint = String(fontSize.size);\n    }\n    return {\n      key: fontSize.slug,\n      name: fontSize.name || fontSize.slug,\n      value: fontSize.size,\n      hint\n    };\n  })];\n  const selectedOption = (_options$find = options.find(option => option.value === value)) !== null && _options$find !== void 0 ? _options$find : DEFAULT_OPTION;\n  return /*#__PURE__*/_jsx(CustomSelectControl, {\n    __next40pxDefaultSize: __next40pxDefaultSize,\n    __shouldNotWarnDeprecated36pxSize: true,\n    className: \"components-font-size-picker__select\",\n    label: __('Font size'),\n    hideLabelFromVision: true,\n    describedBy: sprintf(\n    // translators: %s: Currently selected font size.\n    __('Currently selected font size: %s'), selectedOption.name),\n    options: options,\n    value: selectedOption,\n    showSelectedHint: true,\n    onChange: ({\n      selectedItem\n    }) => {\n      onChange(selectedItem.value);\n    },\n    size: size\n  });\n};\nexport default FontSizePickerSelect;"],
-  "mappings": "AAGA,SAAS,IAAI,eAAe;AAK5B,OAAO,yBAAyB;AAChC,SAAS,wBAAwB;AACjC,SAAS,OAAO,YAAY;AAC5B,MAAM,iBAAiB;AAAA,EACrB,KAAK;AAAA,EACL,MAAM,GAAG,SAAS;AAAA,EAClB,OAAO;AACT;AACA,MAAM,uBAAuB,WAAS;AACpC,MAAI;AACJ,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,UAAU,CAAC,gBAAgB,GAAG,UAAU,IAAI,cAAY;AAC5D,QAAI;AACJ,QAAI,iBAAiB,SAAS,IAAI,GAAG;AACnC,aAAO,OAAO,SAAS,IAAI;AAAA,IAC7B;AACA,WAAO;AAAA,MACL,KAAK,SAAS;AAAA,MACd,MAAM,SAAS,QAAQ,SAAS;AAAA,MAChC,OAAO,SAAS;AAAA,MAChB;AAAA,IACF;AAAA,EACF,CAAC,CAAC;AACF,QAAM,kBAAkB,gBAAgB,QAAQ,KAAK,YAAU,OAAO,UAAU,KAAK,OAAO,QAAQ,kBAAkB,SAAS,gBAAgB;AAC/I,SAAoB,qBAAK,qBAAqB;AAAA,IAC5C;AAAA,IACA,mCAAmC;AAAA,IACnC,WAAW;AAAA,IACX,OAAO,GAAG,WAAW;AAAA,IACrB,qBAAqB;AAAA,IACrB,aAAa;AAAA;AAAA,MAEb,GAAG,kCAAkC;AAAA,MAAG,eAAe;AAAA,IAAI;AAAA,IAC3D;AAAA,IACA,OAAO;AAAA,IACP,kBAAkB;AAAA,IAClB,UAAU,CAAC;AAAA,MACT;AAAA,IACF,MAAM;AACJ,eAAS,aAAa,KAAK;AAAA,IAC7B;AAAA,IACA;AAAA,EACF,CAAC;AACH;AACA,IAAO,kCAAQ;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\n\nimport { generateFontSizeHint } from './utils';\nimport { StyledCustomSelectControl } from './styles';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst DEFAULT_OPTION = {\n  key: 'default',\n  name: __('Default'),\n  value: undefined\n};\nconst FontSizePickerSelect = props => {\n  const {\n    __next40pxDefaultSize,\n    fontSizes,\n    value,\n    size,\n    valueMode = 'literal',\n    onChange\n  } = props;\n  const options = [DEFAULT_OPTION, ...fontSizes.map(fontSize => {\n    const hint = generateFontSizeHint(fontSize);\n    return {\n      key: fontSize.slug,\n      name: fontSize.name || fontSize.slug,\n      value: fontSize.size,\n      hint\n    };\n  })];\n  const selectedOption = useMemo(() => {\n    var _options$find;\n    if (value === undefined) {\n      return DEFAULT_OPTION;\n    }\n\n    // If valueMode is 'slug', find by slug\n    if (valueMode === 'slug') {\n      const optionBySlug = options.find(option => option.key === value);\n      if (optionBySlug) {\n        return optionBySlug;\n      }\n    }\n\n    // If valueMode is 'literal', find by value (size)\n    return (_options$find = options.find(option => option.value === value)) !== null && _options$find !== void 0 ? _options$find : DEFAULT_OPTION;\n  }, [value, valueMode, options]);\n  return /*#__PURE__*/_jsx(StyledCustomSelectControl, {\n    __next40pxDefaultSize: __next40pxDefaultSize,\n    __shouldNotWarnDeprecated36pxSize: true,\n    className: \"components-font-size-picker__select\",\n    label: __('Font size'),\n    hideLabelFromVision: true,\n    describedBy: sprintf(\n    // translators: %s: Currently selected font size.\n    __('Currently selected font size: %s'), selectedOption.name),\n    options: options,\n    value: selectedOption,\n    showSelectedHint: true,\n    onChange: ({\n      selectedItem\n    }) => {\n      // Find the corresponding FontSize object\n      const matchingFontSize = selectedItem.key === 'default' ? undefined : fontSizes.find(fontSize => fontSize.slug === selectedItem.key);\n      onChange(selectedItem.value, matchingFontSize);\n    },\n    size: size\n  });\n};\nexport default FontSizePickerSelect;"],
+  "mappings": "AAGA,SAAS,IAAI,eAAe;AAC5B,SAAS,eAAe;AAMxB,SAAS,4BAA4B;AACrC,SAAS,iCAAiC;AAC1C,SAAS,OAAO,YAAY;AAC5B,MAAM,iBAAiB;AAAA,EACrB,KAAK;AAAA,EACL,MAAM,GAAG,SAAS;AAAA,EAClB,OAAO;AACT;AACA,MAAM,uBAAuB,WAAS;AACpC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,EACF,IAAI;AACJ,QAAM,UAAU,CAAC,gBAAgB,GAAG,UAAU,IAAI,cAAY;AAC5D,UAAM,OAAO,qBAAqB,QAAQ;AAC1C,WAAO;AAAA,MACL,KAAK,SAAS;AAAA,MACd,MAAM,SAAS,QAAQ,SAAS;AAAA,MAChC,OAAO,SAAS;AAAA,MAChB;AAAA,IACF;AAAA,EACF,CAAC,CAAC;AACF,QAAM,iBAAiB,QAAQ,MAAM;AACnC,QAAI;AACJ,QAAI,UAAU,QAAW;AACvB,aAAO;AAAA,IACT;AAGA,QAAI,cAAc,QAAQ;AACxB,YAAM,eAAe,QAAQ,KAAK,YAAU,OAAO,QAAQ,KAAK;AAChE,UAAI,cAAc;AAChB,eAAO;AAAA,MACT;AAAA,IACF;AAGA,YAAQ,gBAAgB,QAAQ,KAAK,YAAU,OAAO,UAAU,KAAK,OAAO,QAAQ,kBAAkB,SAAS,gBAAgB;AAAA,EACjI,GAAG,CAAC,OAAO,WAAW,OAAO,CAAC;AAC9B,SAAoB,qBAAK,2BAA2B;AAAA,IAClD;AAAA,IACA,mCAAmC;AAAA,IACnC,WAAW;AAAA,IACX,OAAO,GAAG,WAAW;AAAA,IACrB,qBAAqB;AAAA,IACrB,aAAa;AAAA;AAAA,MAEb,GAAG,kCAAkC;AAAA,MAAG,eAAe;AAAA,IAAI;AAAA,IAC3D;AAAA,IACA,OAAO;AAAA,IACP,kBAAkB;AAAA,IAClB,UAAU,CAAC;AAAA,MACT;AAAA,IACF,MAAM;AAEJ,YAAM,mBAAmB,aAAa,QAAQ,YAAY,SAAY,UAAU,KAAK,cAAY,SAAS,SAAS,aAAa,GAAG;AACnI,eAAS,aAAa,OAAO,gBAAgB;AAAA,IAC/C;AAAA,IACA;AAAA,EACF,CAAC;AACH;AACA,IAAO,kCAAQ;",
   "names": []
 }

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

@@ -6,22 +6,46 @@ const FontSizePickerToggleGroup = (props) => {
   const {
     fontSizes,
     value,
+    valueMode = "literal",
     __next40pxDefaultSize,
     size,
     onChange
   } = props;
+  const currentValue = (() => {
+    if (!value) {
+      return void 0;
+    }
+    if (valueMode === "slug") {
+      return String(value);
+    }
+    const matchingFontSizes = fontSizes.filter((fontSize) => fontSize.size === value);
+    if (matchingFontSizes.length > 1) {
+      return void 0;
+    }
+    const fontSizeBySize = fontSizes.find((fontSize) => fontSize.size === value);
+    return fontSizeBySize?.slug;
+  })();
   return /* @__PURE__ */ _jsx(ToggleGroupControl, {
     __nextHasNoMarginBottom: true,
     __next40pxDefaultSize,
     __shouldNotWarnDeprecated36pxSize: true,
     label: __("Font size"),
     hideLabelFromVision: true,
-    value,
-    onChange,
+    value: currentValue,
+    onChange: (newSlug) => {
+      if (newSlug === void 0) {
+        onChange(void 0);
+      } else {
+        const selectedFontSize = fontSizes.find((fontSize) => fontSize.slug === String(newSlug));
+        if (selectedFontSize) {
+          onChange(selectedFontSize.size, selectedFontSize);
+        }
+      }
+    },
     isBlock: true,
     size,
     children: fontSizes.map((fontSize, index) => /* @__PURE__ */ _jsx(ToggleGroupControlOption, {
-      value: fontSize.size,
+      value: fontSize.slug,
       label: T_SHIRT_ABBREVIATIONS[index],
       "aria-label": fontSize.name || T_SHIRT_NAMES[index],
       showTooltip: true

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/font-size-picker/font-size-picker-toggle-group.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { ToggleGroupControl, ToggleGroupControlOption } from '../toggle-group-control';\nimport { T_SHIRT_ABBREVIATIONS, T_SHIRT_NAMES } from './constants';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst FontSizePickerToggleGroup = props => {\n  const {\n    fontSizes,\n    value,\n    __next40pxDefaultSize,\n    size,\n    onChange\n  } = props;\n  return /*#__PURE__*/_jsx(ToggleGroupControl, {\n    __nextHasNoMarginBottom: true,\n    __next40pxDefaultSize: __next40pxDefaultSize,\n    __shouldNotWarnDeprecated36pxSize: true,\n    label: __('Font size'),\n    hideLabelFromVision: true,\n    value: value,\n    onChange: onChange,\n    isBlock: true,\n    size: size,\n    children: fontSizes.map((fontSize, index) => /*#__PURE__*/_jsx(ToggleGroupControlOption, {\n      value: fontSize.size,\n      label: T_SHIRT_ABBREVIATIONS[index],\n      \"aria-label\": fontSize.name || T_SHIRT_NAMES[index],\n      showTooltip: true\n    }, fontSize.slug))\n  });\n};\nexport default FontSizePickerToggleGroup;"],
-  "mappings": "AAGA,SAAS,UAAU;AAKnB,SAAS,oBAAoB,gCAAgC;AAC7D,SAAS,uBAAuB,qBAAqB;AACrD,SAAS,OAAO,YAAY;AAC5B,MAAM,4BAA4B,WAAS;AACzC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,SAAoB,qBAAK,oBAAoB;AAAA,IAC3C,yBAAyB;AAAA,IACzB;AAAA,IACA,mCAAmC;AAAA,IACnC,OAAO,GAAG,WAAW;AAAA,IACrB,qBAAqB;AAAA,IACrB;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,UAAU,UAAU,IAAI,CAAC,UAAU,UAAuB,qBAAK,0BAA0B;AAAA,MACvF,OAAO,SAAS;AAAA,MAChB,OAAO,sBAAsB,KAAK;AAAA,MAClC,cAAc,SAAS,QAAQ,cAAc,KAAK;AAAA,MAClD,aAAa;AAAA,IACf,GAAG,SAAS,IAAI,CAAC;AAAA,EACnB,CAAC;AACH;AACA,IAAO,wCAAQ;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { ToggleGroupControl, ToggleGroupControlOption } from '../toggle-group-control';\nimport { T_SHIRT_ABBREVIATIONS, T_SHIRT_NAMES } from './constants';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst FontSizePickerToggleGroup = props => {\n  const {\n    fontSizes,\n    value,\n    valueMode = 'literal',\n    __next40pxDefaultSize,\n    size,\n    onChange\n  } = props;\n\n  // Find the current value based on valueMode\n  const currentValue = (() => {\n    if (!value) {\n      return undefined;\n    }\n\n    // If valueMode is 'slug', the value is already the slug\n    if (valueMode === 'slug') {\n      return String(value);\n    }\n\n    // If valueMode is 'literal', find the font size by size value\n    // If multiple font sizes have the same size value, we can't distinguish them\n    // without additional information, so we return undefined to avoid incorrect selection\n    const matchingFontSizes = fontSizes.filter(fontSize => fontSize.size === value);\n\n    // If there are multiple matches, return undefined to avoid selecting the wrong font size\n    if (matchingFontSizes.length > 1) {\n      return undefined;\n    }\n\n    // Find the font size by size value\n    const fontSizeBySize = fontSizes.find(fontSize => fontSize.size === value);\n    return fontSizeBySize?.slug;\n  })();\n  return /*#__PURE__*/_jsx(ToggleGroupControl, {\n    __nextHasNoMarginBottom: true,\n    __next40pxDefaultSize: __next40pxDefaultSize,\n    __shouldNotWarnDeprecated36pxSize: true,\n    label: __('Font size'),\n    hideLabelFromVision: true,\n    value: currentValue,\n    onChange: newSlug => {\n      if (newSlug === undefined) {\n        onChange(undefined);\n      } else {\n        // Find the font size by slug\n        const selectedFontSize = fontSizes.find(fontSize => fontSize.slug === String(newSlug));\n        if (selectedFontSize) {\n          onChange(selectedFontSize.size, selectedFontSize);\n        }\n      }\n    },\n    isBlock: true,\n    size: size,\n    children: fontSizes.map((fontSize, index) => /*#__PURE__*/_jsx(ToggleGroupControlOption, {\n      value: fontSize.slug,\n      label: T_SHIRT_ABBREVIATIONS[index],\n      \"aria-label\": fontSize.name || T_SHIRT_NAMES[index],\n      showTooltip: true\n    }, fontSize.slug))\n  });\n};\nexport default FontSizePickerToggleGroup;"],
+  "mappings": "AAGA,SAAS,UAAU;AAKnB,SAAS,oBAAoB,gCAAgC;AAC7D,SAAS,uBAAuB,qBAAqB;AACrD,SAAS,OAAO,YAAY;AAC5B,MAAM,4BAA4B,WAAS;AACzC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAGJ,QAAM,gBAAgB,MAAM;AAC1B,QAAI,CAAC,OAAO;AACV,aAAO;AAAA,IACT;AAGA,QAAI,cAAc,QAAQ;AACxB,aAAO,OAAO,KAAK;AAAA,IACrB;AAKA,UAAM,oBAAoB,UAAU,OAAO,cAAY,SAAS,SAAS,KAAK;AAG9E,QAAI,kBAAkB,SAAS,GAAG;AAChC,aAAO;AAAA,IACT;AAGA,UAAM,iBAAiB,UAAU,KAAK,cAAY,SAAS,SAAS,KAAK;AACzE,WAAO,gBAAgB;AAAA,EACzB,GAAG;AACH,SAAoB,qBAAK,oBAAoB;AAAA,IAC3C,yBAAyB;AAAA,IACzB;AAAA,IACA,mCAAmC;AAAA,IACnC,OAAO,GAAG,WAAW;AAAA,IACrB,qBAAqB;AAAA,IACrB,OAAO;AAAA,IACP,UAAU,aAAW;AACnB,UAAI,YAAY,QAAW;AACzB,iBAAS,MAAS;AAAA,MACpB,OAAO;AAEL,cAAM,mBAAmB,UAAU,KAAK,cAAY,SAAS,SAAS,OAAO,OAAO,CAAC;AACrF,YAAI,kBAAkB;AACpB,mBAAS,iBAAiB,MAAM,gBAAgB;AAAA,QAClD;AAAA,MACF;AAAA,IACF;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,UAAU,UAAU,IAAI,CAAC,UAAU,UAAuB,qBAAK,0BAA0B;AAAA,MACvF,OAAO,SAAS;AAAA,MAChB,OAAO,sBAAsB,KAAK;AAAA,MAClC,cAAc,SAAS,QAAQ,cAAc,KAAK;AAAA,MAClD,aAAa;AAAA,IACf,GAAG,SAAS,IAAI,CAAC;AAAA,EACnB,CAAC;AACH;AACA,IAAO,wCAAQ;",
   "names": []
 }

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

@@ -24,6 +24,7 @@ const UnforwardedFontSizePicker = (props, ref) => {
     size = "default",
     units: unitsProp = DEFAULT_UNITS,
     value,
+    valueMode = "literal",
     withSlider = false,
     withReset = true
   } = props;
@@ -31,9 +32,18 @@ const UnforwardedFontSizePicker = (props, ref) => {
   const units = useCustomUnits({
     availableUnits: unitsProp
   });
-  const selectedFontSize = fontSizes.find((fontSize) => fontSize.size === value);
+  const selectedFontSize = (() => {
+    if (!value) {
+      return void 0;
+    }
+    if (valueMode === "slug") {
+      return fontSizes.find((fontSize) => fontSize.slug === value);
+    }
+    return fontSizes.find((fontSize) => fontSize.size === value);
+  })();
   const isCustomValue = !!value && !selectedFontSize;
   const [userRequestedCustom, setUserRequestedCustom] = useState(isCustomValue);
+  const resolvedValueForControls = valueMode === "slug" ? selectedFontSize?.size : value;
   let currentPickerType;
   if (!disableCustomFontSizes && userRequestedCustom) {
     currentPickerType = "custom";
@@ -43,8 +53,8 @@ const UnforwardedFontSizePicker = (props, ref) => {
   if (fontSizes.length === 0 && disableCustomFontSizes) {
     return null;
   }
-  const hasUnits = typeof value === "string" || typeof fontSizes[0]?.size === "string";
-  const [valueQuantity, valueUnit] = parseQuantityAndUnitFromRawValue(value, units);
+  const hasUnits = typeof resolvedValueForControls === "string" || typeof fontSizes[0]?.size === "string";
+  const [valueQuantity, valueUnit] = parseQuantityAndUnitFromRawValue(resolvedValueForControls, units);
   const isValueUnitRelative = !!valueUnit && ["em", "rem", "vw", "vh"].includes(valueUnit);
   const isDisabled = value === void 0;
   maybeWarnDeprecated36pxSize({
@@ -75,26 +85,28 @@ const UnforwardedFontSizePicker = (props, ref) => {
         __next40pxDefaultSize,
         fontSizes,
         value,
+        valueMode,
         disableCustomFontSizes,
         size,
-        onChange: (newValue) => {
+        onChange: (newValue, selectedItem) => {
           if (newValue === void 0) {
-            onChange?.(void 0);
+            onChange?.(void 0, selectedItem);
           } else {
-            onChange?.(hasUnits ? newValue : Number(newValue), fontSizes.find((fontSize) => fontSize.size === newValue));
+            onChange?.(hasUnits ? newValue : Number(newValue), selectedItem);
           }
         },
         onSelectCustom: () => setUserRequestedCustom(true)
       }), currentPickerType === "togglegroup" && /* @__PURE__ */ _jsx(FontSizePickerToggleGroup, {
         fontSizes,
         value,
+        valueMode,
         __next40pxDefaultSize,
         size,
-        onChange: (newValue) => {
+        onChange: (newValue, selectedItem) => {
           if (newValue === void 0) {
-            onChange?.(void 0);
+            onChange?.(void 0, selectedItem);
           } else {
-            onChange?.(hasUnits ? newValue : Number(newValue), fontSizes.find((fontSize) => fontSize.size === newValue));
+            onChange?.(hasUnits ? newValue : Number(newValue), selectedItem);
           }
         }
       }), currentPickerType === "custom" && /* @__PURE__ */ _jsxs(Flex, {
@@ -107,10 +119,10 @@ const UnforwardedFontSizePicker = (props, ref) => {
             label: __("Font size"),
             labelPosition: "top",
             hideLabelFromVision: true,
-            value,
+            value: hasUnits ? `${valueQuantity !== null && valueQuantity !== void 0 ? valueQuantity : ""}${valueUnit !== null && valueUnit !== void 0 ? valueUnit : ""}` : resolvedValueForControls,
             onChange: (newValue) => {
               setUserRequestedCustom(true);
-              if (newValue === void 0) {
+              if (newValue === void 0 || newValue === "") {
                 onChange?.(void 0);
               } else {
                 onChange?.(hasUnits ? newValue : parseInt(newValue, 10));

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/font-size-picker/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { settings } from '@wordpress/icons';\nimport { useState, forwardRef } from '@wordpress/element';\nimport { useInstanceId } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { Button } from '../button';\nimport RangeControl from '../range-control';\nimport { Flex, FlexItem } from '../flex';\nimport { default as UnitControl, parseQuantityAndUnitFromRawValue, useCustomUnits } from '../unit-control';\nimport { Container, Header, HeaderLabel, HeaderToggle } from './styles';\nimport { Spacer } from '../spacer';\nimport FontSizePickerSelect from './font-size-picker-select';\nimport FontSizePickerToggleGroup from './font-size-picker-toggle-group';\nimport { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst DEFAULT_UNITS = ['px', 'em', 'rem', 'vw', 'vh'];\nconst MAX_TOGGLE_GROUP_SIZES = 5;\nconst UnforwardedFontSizePicker = (props, ref) => {\n  const {\n    __next40pxDefaultSize = false,\n    fallbackFontSize,\n    fontSizes = [],\n    disableCustomFontSizes = false,\n    onChange,\n    size = 'default',\n    units: unitsProp = DEFAULT_UNITS,\n    value,\n    withSlider = false,\n    withReset = true\n  } = props;\n  const labelId = useInstanceId(UnforwardedFontSizePicker, 'font-size-picker-label');\n  const units = useCustomUnits({\n    availableUnits: unitsProp\n  });\n  const selectedFontSize = fontSizes.find(fontSize => fontSize.size === value);\n  const isCustomValue = !!value && !selectedFontSize;\n\n  // Initially request a custom picker if the value is not from the predef list.\n  const [userRequestedCustom, setUserRequestedCustom] = useState(isCustomValue);\n  let currentPickerType;\n  if (!disableCustomFontSizes && userRequestedCustom) {\n    // While showing the custom value picker, switch back to predef only if\n    // `disableCustomFontSizes` is set to `true`.\n    currentPickerType = 'custom';\n  } else {\n    currentPickerType = fontSizes.length > MAX_TOGGLE_GROUP_SIZES ? 'select' : 'togglegroup';\n  }\n  if (fontSizes.length === 0 && disableCustomFontSizes) {\n    return null;\n  }\n\n  // If neither the value or first font size is a string, then FontSizePicker\n  // operates in a legacy \"unitless\" mode where UnitControl can only be used\n  // to select px values and onChange() is always called with number values.\n  const hasUnits = typeof value === 'string' || typeof fontSizes[0]?.size === 'string';\n  const [valueQuantity, valueUnit] = parseQuantityAndUnitFromRawValue(value, units);\n  const isValueUnitRelative = !!valueUnit && ['em', 'rem', 'vw', 'vh'].includes(valueUnit);\n  const isDisabled = value === undefined;\n  maybeWarnDeprecated36pxSize({\n    componentName: 'FontSizePicker',\n    __next40pxDefaultSize,\n    size\n  });\n  return /*#__PURE__*/_jsxs(Container, {\n    ref: ref,\n    className: \"components-font-size-picker\"\n    // This Container component renders a fieldset element that needs to be labeled.\n    ,\n    \"aria-labelledby\": labelId,\n    children: [/*#__PURE__*/_jsx(Spacer, {\n      children: /*#__PURE__*/_jsxs(Header, {\n        className: \"components-font-size-picker__header\",\n        children: [/*#__PURE__*/_jsx(HeaderLabel, {\n          id: labelId,\n          children: __('Font size')\n        }), !disableCustomFontSizes && /*#__PURE__*/_jsx(HeaderToggle, {\n          label: currentPickerType === 'custom' ? __('Use size preset') : __('Set custom size'),\n          icon: settings,\n          onClick: () => setUserRequestedCustom(!userRequestedCustom),\n          isPressed: currentPickerType === 'custom',\n          size: \"small\"\n        })]\n      })\n    }), /*#__PURE__*/_jsxs(\"div\", {\n      children: [currentPickerType === 'select' && /*#__PURE__*/_jsx(FontSizePickerSelect, {\n        __next40pxDefaultSize: __next40pxDefaultSize,\n        fontSizes: fontSizes,\n        value: value,\n        disableCustomFontSizes: disableCustomFontSizes,\n        size: size,\n        onChange: newValue => {\n          if (newValue === undefined) {\n            onChange?.(undefined);\n          } else {\n            onChange?.(hasUnits ? newValue : Number(newValue), fontSizes.find(fontSize => fontSize.size === newValue));\n          }\n        },\n        onSelectCustom: () => setUserRequestedCustom(true)\n      }), currentPickerType === 'togglegroup' && /*#__PURE__*/_jsx(FontSizePickerToggleGroup, {\n        fontSizes: fontSizes,\n        value: value,\n        __next40pxDefaultSize: __next40pxDefaultSize,\n        size: size,\n        onChange: newValue => {\n          if (newValue === undefined) {\n            onChange?.(undefined);\n          } else {\n            onChange?.(hasUnits ? newValue : Number(newValue), fontSizes.find(fontSize => fontSize.size === newValue));\n          }\n        }\n      }), currentPickerType === 'custom' && /*#__PURE__*/_jsxs(Flex, {\n        className: \"components-font-size-picker__custom-size-control\",\n        children: [/*#__PURE__*/_jsx(FlexItem, {\n          isBlock: true,\n          children: /*#__PURE__*/_jsx(UnitControl, {\n            __next40pxDefaultSize: __next40pxDefaultSize,\n            __shouldNotWarnDeprecated36pxSize: true,\n            label: __('Font size'),\n            labelPosition: \"top\",\n            hideLabelFromVision: true,\n            value: value,\n            onChange: newValue => {\n              setUserRequestedCustom(true);\n              if (newValue === undefined) {\n                onChange?.(undefined);\n              } else {\n                onChange?.(hasUnits ? newValue : parseInt(newValue, 10));\n              }\n            },\n            size: size,\n            units: hasUnits ? units : [],\n            min: 0\n          })\n        }), withSlider && /*#__PURE__*/_jsx(FlexItem, {\n          isBlock: true,\n          children: /*#__PURE__*/_jsx(Spacer, {\n            marginX: 2,\n            marginBottom: 0,\n            children: /*#__PURE__*/_jsx(RangeControl, {\n              __nextHasNoMarginBottom: true,\n              __next40pxDefaultSize: __next40pxDefaultSize,\n              __shouldNotWarnDeprecated36pxSize: true,\n              className: \"components-font-size-picker__custom-input\",\n              label: __('Font size'),\n              hideLabelFromVision: true,\n              value: valueQuantity,\n              initialPosition: fallbackFontSize,\n              withInputField: false,\n              onChange: newValue => {\n                setUserRequestedCustom(true);\n                if (newValue === undefined) {\n                  onChange?.(undefined);\n                } else if (hasUnits) {\n                  onChange?.(newValue + (valueUnit !== null && valueUnit !== void 0 ? valueUnit : 'px'));\n                } else {\n                  onChange?.(newValue);\n                }\n              },\n              min: 0,\n              max: isValueUnitRelative ? 10 : 100,\n              step: isValueUnitRelative ? 0.1 : 1\n            })\n          })\n        }), withReset && /*#__PURE__*/_jsx(FlexItem, {\n          children: /*#__PURE__*/_jsx(Button, {\n            disabled: isDisabled,\n            accessibleWhenDisabled: true,\n            onClick: () => {\n              onChange?.(undefined);\n            },\n            variant: \"secondary\",\n            __next40pxDefaultSize: true,\n            size: size === '__unstable-large' || props.__next40pxDefaultSize ? 'default' : 'small',\n            children: __('Reset')\n          })\n        })]\n      })]\n    })]\n  });\n};\nexport const FontSizePicker = forwardRef(UnforwardedFontSizePicker);\nexport default FontSizePicker;"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * External dependencies\n */\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { settings } from '@wordpress/icons';\nimport { useState, forwardRef } from '@wordpress/element';\nimport { useInstanceId } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { Button } from '../button';\nimport RangeControl from '../range-control';\nimport { Flex, FlexItem } from '../flex';\nimport { default as UnitControl, parseQuantityAndUnitFromRawValue, useCustomUnits } from '../unit-control';\nimport { Container, Header, HeaderLabel, HeaderToggle } from './styles';\nimport { Spacer } from '../spacer';\nimport FontSizePickerSelect from './font-size-picker-select';\nimport FontSizePickerToggleGroup from './font-size-picker-toggle-group';\nimport { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst DEFAULT_UNITS = ['px', 'em', 'rem', 'vw', 'vh'];\nconst MAX_TOGGLE_GROUP_SIZES = 5;\nconst UnforwardedFontSizePicker = (props, ref) => {\n  const {\n    __next40pxDefaultSize = false,\n    fallbackFontSize,\n    fontSizes = [],\n    disableCustomFontSizes = false,\n    onChange,\n    size = 'default',\n    units: unitsProp = DEFAULT_UNITS,\n    value,\n    valueMode = 'literal',\n    withSlider = false,\n    withReset = true\n  } = props;\n  const labelId = useInstanceId(UnforwardedFontSizePicker, 'font-size-picker-label');\n  const units = useCustomUnits({\n    availableUnits: unitsProp\n  });\n  const selectedFontSize = (() => {\n    if (!value) {\n      return undefined;\n    }\n\n    // If valueMode is 'slug', find by slug\n    if (valueMode === 'slug') {\n      return fontSizes.find(fontSize => fontSize.slug === value);\n    }\n\n    // If valueMode is 'literal', find by size value\n    return fontSizes.find(fontSize => fontSize.size === value);\n  })();\n  const isCustomValue = !!value && !selectedFontSize;\n\n  // Initially request a custom picker if the value is not from the predef list.\n  const [userRequestedCustom, setUserRequestedCustom] = useState(isCustomValue);\n\n  // Resolve the literal value to use in custom controls when operating in slug mode.\n  // When `valueMode` is 'slug', the `value` prop contains the slug of the\n  // selected preset. In that case, the custom input should reflect the preset's\n  // actual size value so it pre-populates correctly after clicking \"Set custom size\".\n  const resolvedValueForControls = valueMode === 'slug' ? selectedFontSize?.size : value;\n  let currentPickerType;\n  if (!disableCustomFontSizes && userRequestedCustom) {\n    // While showing the custom value picker, switch back to predef only if\n    // `disableCustomFontSizes` is set to `true`.\n    currentPickerType = 'custom';\n  } else {\n    currentPickerType = fontSizes.length > MAX_TOGGLE_GROUP_SIZES ? 'select' : 'togglegroup';\n  }\n  if (fontSizes.length === 0 && disableCustomFontSizes) {\n    return null;\n  }\n\n  // If neither the value or first font size is a string, then FontSizePicker\n  // operates in a legacy \"unitless\" mode where UnitControl can only be used\n  // to select px values and onChange() is always called with number values.\n  const hasUnits = typeof resolvedValueForControls === 'string' || typeof fontSizes[0]?.size === 'string';\n  const [valueQuantity, valueUnit] = parseQuantityAndUnitFromRawValue(resolvedValueForControls, units);\n  const isValueUnitRelative = !!valueUnit && ['em', 'rem', 'vw', 'vh'].includes(valueUnit);\n  const isDisabled = value === undefined;\n  maybeWarnDeprecated36pxSize({\n    componentName: 'FontSizePicker',\n    __next40pxDefaultSize,\n    size\n  });\n  return /*#__PURE__*/_jsxs(Container, {\n    ref: ref,\n    className: \"components-font-size-picker\"\n    // This Container component renders a fieldset element that needs to be labeled.\n    ,\n    \"aria-labelledby\": labelId,\n    children: [/*#__PURE__*/_jsx(Spacer, {\n      children: /*#__PURE__*/_jsxs(Header, {\n        className: \"components-font-size-picker__header\",\n        children: [/*#__PURE__*/_jsx(HeaderLabel, {\n          id: labelId,\n          children: __('Font size')\n        }), !disableCustomFontSizes && /*#__PURE__*/_jsx(HeaderToggle, {\n          label: currentPickerType === 'custom' ? __('Use size preset') : __('Set custom size'),\n          icon: settings,\n          onClick: () => setUserRequestedCustom(!userRequestedCustom),\n          isPressed: currentPickerType === 'custom',\n          size: \"small\"\n        })]\n      })\n    }), /*#__PURE__*/_jsxs(\"div\", {\n      children: [currentPickerType === 'select' && /*#__PURE__*/_jsx(FontSizePickerSelect, {\n        __next40pxDefaultSize: __next40pxDefaultSize,\n        fontSizes: fontSizes,\n        value: value,\n        valueMode: valueMode,\n        disableCustomFontSizes: disableCustomFontSizes,\n        size: size,\n        onChange: (newValue, selectedItem) => {\n          if (newValue === undefined) {\n            onChange?.(undefined, selectedItem);\n          } else {\n            onChange?.(hasUnits ? newValue : Number(newValue), selectedItem);\n          }\n        },\n        onSelectCustom: () => setUserRequestedCustom(true)\n      }), currentPickerType === 'togglegroup' && /*#__PURE__*/_jsx(FontSizePickerToggleGroup, {\n        fontSizes: fontSizes,\n        value: value,\n        valueMode: valueMode,\n        __next40pxDefaultSize: __next40pxDefaultSize,\n        size: size,\n        onChange: (newValue, selectedItem) => {\n          if (newValue === undefined) {\n            onChange?.(undefined, selectedItem);\n          } else {\n            onChange?.(hasUnits ? newValue : Number(newValue), selectedItem);\n          }\n        }\n      }), currentPickerType === 'custom' && /*#__PURE__*/_jsxs(Flex, {\n        className: \"components-font-size-picker__custom-size-control\",\n        children: [/*#__PURE__*/_jsx(FlexItem, {\n          isBlock: true,\n          children: /*#__PURE__*/_jsx(UnitControl, {\n            __next40pxDefaultSize: __next40pxDefaultSize,\n            __shouldNotWarnDeprecated36pxSize: true,\n            label: __('Font size'),\n            labelPosition: \"top\",\n            hideLabelFromVision: true,\n            value: hasUnits ? `${valueQuantity !== null && valueQuantity !== void 0 ? valueQuantity : ''}${valueUnit !== null && valueUnit !== void 0 ? valueUnit : ''}` : resolvedValueForControls,\n            onChange: newValue => {\n              setUserRequestedCustom(true);\n\n              // Treat clearing the input (empty string) as a reset\n              if (newValue === undefined || newValue === '') {\n                onChange?.(undefined);\n              } else {\n                onChange?.(hasUnits ? newValue : parseInt(newValue, 10));\n              }\n            },\n            size: size,\n            units: hasUnits ? units : [],\n            min: 0\n          })\n        }), withSlider && /*#__PURE__*/_jsx(FlexItem, {\n          isBlock: true,\n          children: /*#__PURE__*/_jsx(Spacer, {\n            marginX: 2,\n            marginBottom: 0,\n            children: /*#__PURE__*/_jsx(RangeControl, {\n              __nextHasNoMarginBottom: true,\n              __next40pxDefaultSize: __next40pxDefaultSize,\n              __shouldNotWarnDeprecated36pxSize: true,\n              className: \"components-font-size-picker__custom-input\",\n              label: __('Font size'),\n              hideLabelFromVision: true,\n              value: valueQuantity,\n              initialPosition: fallbackFontSize,\n              withInputField: false,\n              onChange: newValue => {\n                setUserRequestedCustom(true);\n                if (newValue === undefined) {\n                  onChange?.(undefined);\n                } else if (hasUnits) {\n                  onChange?.(newValue + (valueUnit !== null && valueUnit !== void 0 ? valueUnit : 'px'));\n                } else {\n                  onChange?.(newValue);\n                }\n              },\n              min: 0,\n              max: isValueUnitRelative ? 10 : 100,\n              step: isValueUnitRelative ? 0.1 : 1\n            })\n          })\n        }), withReset && /*#__PURE__*/_jsx(FlexItem, {\n          children: /*#__PURE__*/_jsx(Button, {\n            disabled: isDisabled,\n            accessibleWhenDisabled: true,\n            onClick: () => {\n              onChange?.(undefined);\n            },\n            variant: \"secondary\",\n            __next40pxDefaultSize: true,\n            size: size === '__unstable-large' || props.__next40pxDefaultSize ? 'default' : 'small',\n            children: __('Reset')\n          })\n        })]\n      })]\n    })]\n  });\n};\nexport const FontSizePicker = forwardRef(UnforwardedFontSizePicker);\nexport default FontSizePicker;"],
+  "mappings": "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",
   "names": []
 }

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

@@ -4,12 +4,13 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() {
 }
 import BaseControl from "../base-control";
 import Button from "../button";
+import CustomSelectControl from "../custom-select-control";
 import { HStack } from "../h-stack";
 import { space } from "../utils/space";
 const Container = /* @__PURE__ */ _styled("fieldset", process.env.NODE_ENV === "production" ? {
-  target: "e8tqeku3"
+  target: "e8tqeku4"
 } : {
-  target: "e8tqeku3",
+  target: "e8tqeku4",
   label: "Container"
 })(process.env.NODE_ENV === "production" ? {
   name: "k2q51s",
@@ -17,31 +18,46 @@ const Container = /* @__PURE__ */ _styled("fieldset", process.env.NODE_ENV === "
 } : {
   name: "k2q51s",
   styles: "border:0;margin:0;padding:0;display:contents",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFhd0MiLCJmaWxlIjoic3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgQmFzZUNvbnRyb2wgZnJvbSAnLi4vYmFzZS1jb250cm9sJztcbmltcG9ydCBCdXR0b24gZnJvbSAnLi4vYnV0dG9uJztcbmltcG9ydCB7IEhTdGFjayB9IGZyb20gJy4uL2gtc3RhY2snO1xuaW1wb3J0IHsgc3BhY2UgfSBmcm9tICcuLi91dGlscy9zcGFjZSc7XG5cbmV4cG9ydCBjb25zdCBDb250YWluZXIgPSBzdHlsZWQuZmllbGRzZXRgXG5cdGJvcmRlcjogMDtcblx0bWFyZ2luOiAwO1xuXHRwYWRkaW5nOiAwO1xuXHRkaXNwbGF5OiBjb250ZW50cztcbmA7XG5cbmV4cG9ydCBjb25zdCBIZWFkZXIgPSBzdHlsZWQoIEhTdGFjayApYFxuXHRoZWlnaHQ6ICR7IHNwYWNlKCA0ICkgfTtcbmA7XG5cbmV4cG9ydCBjb25zdCBIZWFkZXJUb2dnbGUgPSBzdHlsZWQoIEJ1dHRvbiApYFxuXHRtYXJnaW4tdG9wOiAkeyBzcGFjZSggLTEgKSB9O1xuYDtcblxuZXhwb3J0IGNvbnN0IEhlYWRlckxhYmVsID0gc3R5bGVkKCBCYXNlQ29udHJvbC5WaXN1YWxMYWJlbCApYFxuXHRkaXNwbGF5OiBmbGV4O1xuXHRnYXA6ICR7IHNwYWNlKCAxICkgfTtcblx0anVzdGlmeS1jb250ZW50OiBmbGV4LXN0YXJ0O1xuXHRtYXJnaW4tYm90dG9tOiAwO1xuYDtcbiJdfQ== */",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFjd0MiLCJmaWxlIjoic3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgQmFzZUNvbnRyb2wgZnJvbSAnLi4vYmFzZS1jb250cm9sJztcbmltcG9ydCBCdXR0b24gZnJvbSAnLi4vYnV0dG9uJztcbmltcG9ydCBDdXN0b21TZWxlY3RDb250cm9sIGZyb20gJy4uL2N1c3RvbS1zZWxlY3QtY29udHJvbCc7XG5pbXBvcnQgeyBIU3RhY2sgfSBmcm9tICcuLi9oLXN0YWNrJztcbmltcG9ydCB7IHNwYWNlIH0gZnJvbSAnLi4vdXRpbHMvc3BhY2UnO1xuXG5leHBvcnQgY29uc3QgQ29udGFpbmVyID0gc3R5bGVkLmZpZWxkc2V0YFxuXHRib3JkZXI6IDA7XG5cdG1hcmdpbjogMDtcblx0cGFkZGluZzogMDtcblx0ZGlzcGxheTogY29udGVudHM7XG5gO1xuXG5leHBvcnQgY29uc3QgSGVhZGVyID0gc3R5bGVkKCBIU3RhY2sgKWBcblx0aGVpZ2h0OiAkeyBzcGFjZSggNCApIH07XG5gO1xuXG5leHBvcnQgY29uc3QgSGVhZGVyVG9nZ2xlID0gc3R5bGVkKCBCdXR0b24gKWBcblx0bWFyZ2luLXRvcDogJHsgc3BhY2UoIC0xICkgfTtcbmA7XG5cbmV4cG9ydCBjb25zdCBIZWFkZXJMYWJlbCA9IHN0eWxlZCggQmFzZUNvbnRyb2wuVmlzdWFsTGFiZWwgKWBcblx0ZGlzcGxheTogZmxleDtcblx0Z2FwOiAkeyBzcGFjZSggMSApIH07XG5cdGp1c3RpZnktY29udGVudDogZmxleC1zdGFydDtcblx0bWFyZ2luLWJvdHRvbTogMDtcbmA7XG5cbi8vIEN1c3RvbSBzdHlsZWQgY29tcG9uZW50IHRvIGZvcmNlIGxpbmUgYnJlYWsgYmV0d2VlbiBuYW1lIGFuZCBoaW50IHdoaWxlIGtlZXBpbmcgY2hlY2ttYXJrIG9uIHRoZSByaWdodFxuZXhwb3J0IGNvbnN0IFN0eWxlZEN1c3RvbVNlbGVjdENvbnRyb2wgPSBzdHlsZWQoIEN1c3RvbVNlbGVjdENvbnRyb2wgKWBcblx0LmNvbXBvbmVudHMtY3VzdG9tLXNlbGVjdC1jb250cm9sX19pdGVtXG5cdFx0LmNvbXBvbmVudHMtY3VzdG9tLXNlbGVjdC1jb250cm9sX19pdGVtLWhpbnQge1xuXHRcdHdpZHRoOiAxMDAlO1xuXHR9XG5gO1xuIl19 */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 const Header = /* @__PURE__ */ _styled(HStack, process.env.NODE_ENV === "production" ? {
-  target: "e8tqeku2"
+  target: "e8tqeku3"
 } : {
-  target: "e8tqeku2",
+  target: "e8tqeku3",
   label: "Header"
-})("height:", space(4), ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFvQnNDIiwiZmlsZSI6InN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IEJhc2VDb250cm9sIGZyb20gJy4uL2Jhc2UtY29udHJvbCc7XG5pbXBvcnQgQnV0dG9uIGZyb20gJy4uL2J1dHRvbic7XG5pbXBvcnQgeyBIU3RhY2sgfSBmcm9tICcuLi9oLXN0YWNrJztcbmltcG9ydCB7IHNwYWNlIH0gZnJvbSAnLi4vdXRpbHMvc3BhY2UnO1xuXG5leHBvcnQgY29uc3QgQ29udGFpbmVyID0gc3R5bGVkLmZpZWxkc2V0YFxuXHRib3JkZXI6IDA7XG5cdG1hcmdpbjogMDtcblx0cGFkZGluZzogMDtcblx0ZGlzcGxheTogY29udGVudHM7XG5gO1xuXG5leHBvcnQgY29uc3QgSGVhZGVyID0gc3R5bGVkKCBIU3RhY2sgKWBcblx0aGVpZ2h0OiAkeyBzcGFjZSggNCApIH07XG5gO1xuXG5leHBvcnQgY29uc3QgSGVhZGVyVG9nZ2xlID0gc3R5bGVkKCBCdXR0b24gKWBcblx0bWFyZ2luLXRvcDogJHsgc3BhY2UoIC0xICkgfTtcbmA7XG5cbmV4cG9ydCBjb25zdCBIZWFkZXJMYWJlbCA9IHN0eWxlZCggQmFzZUNvbnRyb2wuVmlzdWFsTGFiZWwgKWBcblx0ZGlzcGxheTogZmxleDtcblx0Z2FwOiAkeyBzcGFjZSggMSApIH07XG5cdGp1c3RpZnktY29udGVudDogZmxleC1zdGFydDtcblx0bWFyZ2luLWJvdHRvbTogMDtcbmA7XG4iXX0= */"));
+})("height:", space(4), ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFxQnNDIiwiZmlsZSI6InN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IEJhc2VDb250cm9sIGZyb20gJy4uL2Jhc2UtY29udHJvbCc7XG5pbXBvcnQgQnV0dG9uIGZyb20gJy4uL2J1dHRvbic7XG5pbXBvcnQgQ3VzdG9tU2VsZWN0Q29udHJvbCBmcm9tICcuLi9jdXN0b20tc2VsZWN0LWNvbnRyb2wnO1xuaW1wb3J0IHsgSFN0YWNrIH0gZnJvbSAnLi4vaC1zdGFjayc7XG5pbXBvcnQgeyBzcGFjZSB9IGZyb20gJy4uL3V0aWxzL3NwYWNlJztcblxuZXhwb3J0IGNvbnN0IENvbnRhaW5lciA9IHN0eWxlZC5maWVsZHNldGBcblx0Ym9yZGVyOiAwO1xuXHRtYXJnaW46IDA7XG5cdHBhZGRpbmc6IDA7XG5cdGRpc3BsYXk6IGNvbnRlbnRzO1xuYDtcblxuZXhwb3J0IGNvbnN0IEhlYWRlciA9IHN0eWxlZCggSFN0YWNrIClgXG5cdGhlaWdodDogJHsgc3BhY2UoIDQgKSB9O1xuYDtcblxuZXhwb3J0IGNvbnN0IEhlYWRlclRvZ2dsZSA9IHN0eWxlZCggQnV0dG9uIClgXG5cdG1hcmdpbi10b3A6ICR7IHNwYWNlKCAtMSApIH07XG5gO1xuXG5leHBvcnQgY29uc3QgSGVhZGVyTGFiZWwgPSBzdHlsZWQoIEJhc2VDb250cm9sLlZpc3VhbExhYmVsIClgXG5cdGRpc3BsYXk6IGZsZXg7XG5cdGdhcDogJHsgc3BhY2UoIDEgKSB9O1xuXHRqdXN0aWZ5LWNvbnRlbnQ6IGZsZXgtc3RhcnQ7XG5cdG1hcmdpbi1ib3R0b206IDA7XG5gO1xuXG4vLyBDdXN0b20gc3R5bGVkIGNvbXBvbmVudCB0byBmb3JjZSBsaW5lIGJyZWFrIGJldHdlZW4gbmFtZSBhbmQgaGludCB3aGlsZSBrZWVwaW5nIGNoZWNrbWFyayBvbiB0aGUgcmlnaHRcbmV4cG9ydCBjb25zdCBTdHlsZWRDdXN0b21TZWxlY3RDb250cm9sID0gc3R5bGVkKCBDdXN0b21TZWxlY3RDb250cm9sIClgXG5cdC5jb21wb25lbnRzLWN1c3RvbS1zZWxlY3QtY29udHJvbF9faXRlbVxuXHRcdC5jb21wb25lbnRzLWN1c3RvbS1zZWxlY3QtY29udHJvbF9faXRlbS1oaW50IHtcblx0XHR3aWR0aDogMTAwJTtcblx0fVxuYDtcbiJdfQ== */"));
 const HeaderToggle = /* @__PURE__ */ _styled(Button, process.env.NODE_ENV === "production" ? {
-  target: "e8tqeku1"
+  target: "e8tqeku2"
 } : {
-  target: "e8tqeku1",
+  target: "e8tqeku2",
   label: "HeaderToggle"
-})("margin-top:", space(-1), ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF3QjRDIiwiZmlsZSI6InN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IEJhc2VDb250cm9sIGZyb20gJy4uL2Jhc2UtY29udHJvbCc7XG5pbXBvcnQgQnV0dG9uIGZyb20gJy4uL2J1dHRvbic7XG5pbXBvcnQgeyBIU3RhY2sgfSBmcm9tICcuLi9oLXN0YWNrJztcbmltcG9ydCB7IHNwYWNlIH0gZnJvbSAnLi4vdXRpbHMvc3BhY2UnO1xuXG5leHBvcnQgY29uc3QgQ29udGFpbmVyID0gc3R5bGVkLmZpZWxkc2V0YFxuXHRib3JkZXI6IDA7XG5cdG1hcmdpbjogMDtcblx0cGFkZGluZzogMDtcblx0ZGlzcGxheTogY29udGVudHM7XG5gO1xuXG5leHBvcnQgY29uc3QgSGVhZGVyID0gc3R5bGVkKCBIU3RhY2sgKWBcblx0aGVpZ2h0OiAkeyBzcGFjZSggNCApIH07XG5gO1xuXG5leHBvcnQgY29uc3QgSGVhZGVyVG9nZ2xlID0gc3R5bGVkKCBCdXR0b24gKWBcblx0bWFyZ2luLXRvcDogJHsgc3BhY2UoIC0xICkgfTtcbmA7XG5cbmV4cG9ydCBjb25zdCBIZWFkZXJMYWJlbCA9IHN0eWxlZCggQmFzZUNvbnRyb2wuVmlzdWFsTGFiZWwgKWBcblx0ZGlzcGxheTogZmxleDtcblx0Z2FwOiAkeyBzcGFjZSggMSApIH07XG5cdGp1c3RpZnktY29udGVudDogZmxleC1zdGFydDtcblx0bWFyZ2luLWJvdHRvbTogMDtcbmA7XG4iXX0= */"));
+})("margin-top:", space(-1), ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF5QjRDIiwiZmlsZSI6InN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IEJhc2VDb250cm9sIGZyb20gJy4uL2Jhc2UtY29udHJvbCc7XG5pbXBvcnQgQnV0dG9uIGZyb20gJy4uL2J1dHRvbic7XG5pbXBvcnQgQ3VzdG9tU2VsZWN0Q29udHJvbCBmcm9tICcuLi9jdXN0b20tc2VsZWN0LWNvbnRyb2wnO1xuaW1wb3J0IHsgSFN0YWNrIH0gZnJvbSAnLi4vaC1zdGFjayc7XG5pbXBvcnQgeyBzcGFjZSB9IGZyb20gJy4uL3V0aWxzL3NwYWNlJztcblxuZXhwb3J0IGNvbnN0IENvbnRhaW5lciA9IHN0eWxlZC5maWVsZHNldGBcblx0Ym9yZGVyOiAwO1xuXHRtYXJnaW46IDA7XG5cdHBhZGRpbmc6IDA7XG5cdGRpc3BsYXk6IGNvbnRlbnRzO1xuYDtcblxuZXhwb3J0IGNvbnN0IEhlYWRlciA9IHN0eWxlZCggSFN0YWNrIClgXG5cdGhlaWdodDogJHsgc3BhY2UoIDQgKSB9O1xuYDtcblxuZXhwb3J0IGNvbnN0IEhlYWRlclRvZ2dsZSA9IHN0eWxlZCggQnV0dG9uIClgXG5cdG1hcmdpbi10b3A6ICR7IHNwYWNlKCAtMSApIH07XG5gO1xuXG5leHBvcnQgY29uc3QgSGVhZGVyTGFiZWwgPSBzdHlsZWQoIEJhc2VDb250cm9sLlZpc3VhbExhYmVsIClgXG5cdGRpc3BsYXk6IGZsZXg7XG5cdGdhcDogJHsgc3BhY2UoIDEgKSB9O1xuXHRqdXN0aWZ5LWNvbnRlbnQ6IGZsZXgtc3RhcnQ7XG5cdG1hcmdpbi1ib3R0b206IDA7XG5gO1xuXG4vLyBDdXN0b20gc3R5bGVkIGNvbXBvbmVudCB0byBmb3JjZSBsaW5lIGJyZWFrIGJldHdlZW4gbmFtZSBhbmQgaGludCB3aGlsZSBrZWVwaW5nIGNoZWNrbWFyayBvbiB0aGUgcmlnaHRcbmV4cG9ydCBjb25zdCBTdHlsZWRDdXN0b21TZWxlY3RDb250cm9sID0gc3R5bGVkKCBDdXN0b21TZWxlY3RDb250cm9sIClgXG5cdC5jb21wb25lbnRzLWN1c3RvbS1zZWxlY3QtY29udHJvbF9faXRlbVxuXHRcdC5jb21wb25lbnRzLWN1c3RvbS1zZWxlY3QtY29udHJvbF9faXRlbS1oaW50IHtcblx0XHR3aWR0aDogMTAwJTtcblx0fVxuYDtcbiJdfQ== */"));
 const HeaderLabel = /* @__PURE__ */ _styled(BaseControl.VisualLabel, process.env.NODE_ENV === "production" ? {
+  target: "e8tqeku1"
+} : {
+  target: "e8tqeku1",
+  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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE2QjREIiwiZmlsZSI6InN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IEJhc2VDb250cm9sIGZyb20gJy4uL2Jhc2UtY29udHJvbCc7XG5pbXBvcnQgQnV0dG9uIGZyb20gJy4uL2J1dHRvbic7XG5pbXBvcnQgQ3VzdG9tU2VsZWN0Q29udHJvbCBmcm9tICcuLi9jdXN0b20tc2VsZWN0LWNvbnRyb2wnO1xuaW1wb3J0IHsgSFN0YWNrIH0gZnJvbSAnLi4vaC1zdGFjayc7XG5pbXBvcnQgeyBzcGFjZSB9IGZyb20gJy4uL3V0aWxzL3NwYWNlJztcblxuZXhwb3J0IGNvbnN0IENvbnRhaW5lciA9IHN0eWxlZC5maWVsZHNldGBcblx0Ym9yZGVyOiAwO1xuXHRtYXJnaW46IDA7XG5cdHBhZGRpbmc6IDA7XG5cdGRpc3BsYXk6IGNvbnRlbnRzO1xuYDtcblxuZXhwb3J0IGNvbnN0IEhlYWRlciA9IHN0eWxlZCggSFN0YWNrIClgXG5cdGhlaWdodDogJHsgc3BhY2UoIDQgKSB9O1xuYDtcblxuZXhwb3J0IGNvbnN0IEhlYWRlclRvZ2dsZSA9IHN0eWxlZCggQnV0dG9uIClgXG5cdG1hcmdpbi10b3A6ICR7IHNwYWNlKCAtMSApIH07XG5gO1xuXG5leHBvcnQgY29uc3QgSGVhZGVyTGFiZWwgPSBzdHlsZWQoIEJhc2VDb250cm9sLlZpc3VhbExhYmVsIClgXG5cdGRpc3BsYXk6IGZsZXg7XG5cdGdhcDogJHsgc3BhY2UoIDEgKSB9O1xuXHRqdXN0aWZ5LWNvbnRlbnQ6IGZsZXgtc3RhcnQ7XG5cdG1hcmdpbi1ib3R0b206IDA7XG5gO1xuXG4vLyBDdXN0b20gc3R5bGVkIGNvbXBvbmVudCB0byBmb3JjZSBsaW5lIGJyZWFrIGJldHdlZW4gbmFtZSBhbmQgaGludCB3aGlsZSBrZWVwaW5nIGNoZWNrbWFyayBvbiB0aGUgcmlnaHRcbmV4cG9ydCBjb25zdCBTdHlsZWRDdXN0b21TZWxlY3RDb250cm9sID0gc3R5bGVkKCBDdXN0b21TZWxlY3RDb250cm9sIClgXG5cdC5jb21wb25lbnRzLWN1c3RvbS1zZWxlY3QtY29udHJvbF9faXRlbVxuXHRcdC5jb21wb25lbnRzLWN1c3RvbS1zZWxlY3QtY29udHJvbF9faXRlbS1oaW50IHtcblx0XHR3aWR0aDogMTAwJTtcblx0fVxuYDtcbiJdfQ== */"));
+const StyledCustomSelectControl = /* @__PURE__ */ _styled(CustomSelectControl, process.env.NODE_ENV === "production" ? {
   target: "e8tqeku0"
 } : {
   target: "e8tqeku0",
-  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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE0QjREIiwiZmlsZSI6InN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IEJhc2VDb250cm9sIGZyb20gJy4uL2Jhc2UtY29udHJvbCc7XG5pbXBvcnQgQnV0dG9uIGZyb20gJy4uL2J1dHRvbic7XG5pbXBvcnQgeyBIU3RhY2sgfSBmcm9tICcuLi9oLXN0YWNrJztcbmltcG9ydCB7IHNwYWNlIH0gZnJvbSAnLi4vdXRpbHMvc3BhY2UnO1xuXG5leHBvcnQgY29uc3QgQ29udGFpbmVyID0gc3R5bGVkLmZpZWxkc2V0YFxuXHRib3JkZXI6IDA7XG5cdG1hcmdpbjogMDtcblx0cGFkZGluZzogMDtcblx0ZGlzcGxheTogY29udGVudHM7XG5gO1xuXG5leHBvcnQgY29uc3QgSGVhZGVyID0gc3R5bGVkKCBIU3RhY2sgKWBcblx0aGVpZ2h0OiAkeyBzcGFjZSggNCApIH07XG5gO1xuXG5leHBvcnQgY29uc3QgSGVhZGVyVG9nZ2xlID0gc3R5bGVkKCBCdXR0b24gKWBcblx0bWFyZ2luLXRvcDogJHsgc3BhY2UoIC0xICkgfTtcbmA7XG5cbmV4cG9ydCBjb25zdCBIZWFkZXJMYWJlbCA9IHN0eWxlZCggQmFzZUNvbnRyb2wuVmlzdWFsTGFiZWwgKWBcblx0ZGlzcGxheTogZmxleDtcblx0Z2FwOiAkeyBzcGFjZSggMSApIH07XG5cdGp1c3RpZnktY29udGVudDogZmxleC1zdGFydDtcblx0bWFyZ2luLWJvdHRvbTogMDtcbmA7XG4iXX0= */"));
+  label: "StyledCustomSelectControl"
+})(process.env.NODE_ENV === "production" ? {
+  name: "anvx77",
+  styles: ".components-custom-select-control__item .components-custom-select-control__item-hint{width:100%;}"
+} : {
+  name: "anvx77",
+  styles: ".components-custom-select-control__item .components-custom-select-control__item-hint{width:100%;}",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFxQ3NFIiwiZmlsZSI6InN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IEJhc2VDb250cm9sIGZyb20gJy4uL2Jhc2UtY29udHJvbCc7XG5pbXBvcnQgQnV0dG9uIGZyb20gJy4uL2J1dHRvbic7XG5pbXBvcnQgQ3VzdG9tU2VsZWN0Q29udHJvbCBmcm9tICcuLi9jdXN0b20tc2VsZWN0LWNvbnRyb2wnO1xuaW1wb3J0IHsgSFN0YWNrIH0gZnJvbSAnLi4vaC1zdGFjayc7XG5pbXBvcnQgeyBzcGFjZSB9IGZyb20gJy4uL3V0aWxzL3NwYWNlJztcblxuZXhwb3J0IGNvbnN0IENvbnRhaW5lciA9IHN0eWxlZC5maWVsZHNldGBcblx0Ym9yZGVyOiAwO1xuXHRtYXJnaW46IDA7XG5cdHBhZGRpbmc6IDA7XG5cdGRpc3BsYXk6IGNvbnRlbnRzO1xuYDtcblxuZXhwb3J0IGNvbnN0IEhlYWRlciA9IHN0eWxlZCggSFN0YWNrIClgXG5cdGhlaWdodDogJHsgc3BhY2UoIDQgKSB9O1xuYDtcblxuZXhwb3J0IGNvbnN0IEhlYWRlclRvZ2dsZSA9IHN0eWxlZCggQnV0dG9uIClgXG5cdG1hcmdpbi10b3A6ICR7IHNwYWNlKCAtMSApIH07XG5gO1xuXG5leHBvcnQgY29uc3QgSGVhZGVyTGFiZWwgPSBzdHlsZWQoIEJhc2VDb250cm9sLlZpc3VhbExhYmVsIClgXG5cdGRpc3BsYXk6IGZsZXg7XG5cdGdhcDogJHsgc3BhY2UoIDEgKSB9O1xuXHRqdXN0aWZ5LWNvbnRlbnQ6IGZsZXgtc3RhcnQ7XG5cdG1hcmdpbi1ib3R0b206IDA7XG5gO1xuXG4vLyBDdXN0b20gc3R5bGVkIGNvbXBvbmVudCB0byBmb3JjZSBsaW5lIGJyZWFrIGJldHdlZW4gbmFtZSBhbmQgaGludCB3aGlsZSBrZWVwaW5nIGNoZWNrbWFyayBvbiB0aGUgcmlnaHRcbmV4cG9ydCBjb25zdCBTdHlsZWRDdXN0b21TZWxlY3RDb250cm9sID0gc3R5bGVkKCBDdXN0b21TZWxlY3RDb250cm9sIClgXG5cdC5jb21wb25lbnRzLWN1c3RvbS1zZWxlY3QtY29udHJvbF9faXRlbVxuXHRcdC5jb21wb25lbnRzLWN1c3RvbS1zZWxlY3QtY29udHJvbF9faXRlbS1oaW50IHtcblx0XHR3aWR0aDogMTAwJTtcblx0fVxuYDtcbiJdfQ== */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
 export {
   Container,
   Header,
   HeaderLabel,
-  HeaderToggle
+  HeaderToggle,
+  StyledCustomSelectControl
 };
 //# sourceMappingURL=styles.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/font-size-picker/styles.ts"],
-  "sourcesContent": ["import _styled from \"@emotion/styled/base\";\nfunction _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).\"; }\n/**\n * External dependencies\n */\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\nimport Button from '../button';\nimport { HStack } from '../h-stack';\nimport { space } from '../utils/space';\nexport const Container = /*#__PURE__*/_styled(\"fieldset\", process.env.NODE_ENV === \"production\" ? {\n  target: \"e8tqeku3\"\n} : {\n  target: \"e8tqeku3\",\n  label: \"Container\"\n})(process.env.NODE_ENV === \"production\" ? {\n  name: \"k2q51s\",\n  styles: \"border:0;margin:0;padding:0;display:contents\"\n} : {\n  name: \"k2q51s\",\n  styles: \"border:0;margin:0;padding:0;display:contents\",\n  map: \"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFhd0MiLCJmaWxlIjoic3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgQmFzZUNvbnRyb2wgZnJvbSAnLi4vYmFzZS1jb250cm9sJztcbmltcG9ydCBCdXR0b24gZnJvbSAnLi4vYnV0dG9uJztcbmltcG9ydCB7IEhTdGFjayB9IGZyb20gJy4uL2gtc3RhY2snO1xuaW1wb3J0IHsgc3BhY2UgfSBmcm9tICcuLi91dGlscy9zcGFjZSc7XG5cbmV4cG9ydCBjb25zdCBDb250YWluZXIgPSBzdHlsZWQuZmllbGRzZXRgXG5cdGJvcmRlcjogMDtcblx0bWFyZ2luOiAwO1xuXHRwYWRkaW5nOiAwO1xuXHRkaXNwbGF5OiBjb250ZW50cztcbmA7XG5cbmV4cG9ydCBjb25zdCBIZWFkZXIgPSBzdHlsZWQoIEhTdGFjayApYFxuXHRoZWlnaHQ6ICR7IHNwYWNlKCA0ICkgfTtcbmA7XG5cbmV4cG9ydCBjb25zdCBIZWFkZXJUb2dnbGUgPSBzdHlsZWQoIEJ1dHRvbiApYFxuXHRtYXJnaW4tdG9wOiAkeyBzcGFjZSggLTEgKSB9O1xuYDtcblxuZXhwb3J0IGNvbnN0IEhlYWRlckxhYmVsID0gc3R5bGVkKCBCYXNlQ29udHJvbC5WaXN1YWxMYWJlbCApYFxuXHRkaXNwbGF5OiBmbGV4O1xuXHRnYXA6ICR7IHNwYWNlKCAxICkgfTtcblx0anVzdGlmeS1jb250ZW50OiBmbGV4LXN0YXJ0O1xuXHRtYXJnaW4tYm90dG9tOiAwO1xuYDtcbiJdfQ== */\",\n  toString: _EMOTION_STRINGIFIED_CSS_ERROR__\n});\nexport const Header = /*#__PURE__*/_styled(HStack, process.env.NODE_ENV === \"production\" ? {\n  target: \"e8tqeku2\"\n} : {\n  target: \"e8tqeku2\",\n  label: \"Header\"\n})(\"height:\", space(4), \";\" + (process.env.NODE_ENV === \"production\" ? \"\" : \"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFvQnNDIiwiZmlsZSI6InN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IEJhc2VDb250cm9sIGZyb20gJy4uL2Jhc2UtY29udHJvbCc7XG5pbXBvcnQgQnV0dG9uIGZyb20gJy4uL2J1dHRvbic7XG5pbXBvcnQgeyBIU3RhY2sgfSBmcm9tICcuLi9oLXN0YWNrJztcbmltcG9ydCB7IHNwYWNlIH0gZnJvbSAnLi4vdXRpbHMvc3BhY2UnO1xuXG5leHBvcnQgY29uc3QgQ29udGFpbmVyID0gc3R5bGVkLmZpZWxkc2V0YFxuXHRib3JkZXI6IDA7XG5cdG1hcmdpbjogMDtcblx0cGFkZGluZzogMDtcblx0ZGlzcGxheTogY29udGVudHM7XG5gO1xuXG5leHBvcnQgY29uc3QgSGVhZGVyID0gc3R5bGVkKCBIU3RhY2sgKWBcblx0aGVpZ2h0OiAkeyBzcGFjZSggNCApIH07XG5gO1xuXG5leHBvcnQgY29uc3QgSGVhZGVyVG9nZ2xlID0gc3R5bGVkKCBCdXR0b24gKWBcblx0bWFyZ2luLXRvcDogJHsgc3BhY2UoIC0xICkgfTtcbmA7XG5cbmV4cG9ydCBjb25zdCBIZWFkZXJMYWJlbCA9IHN0eWxlZCggQmFzZUNvbnRyb2wuVmlzdWFsTGFiZWwgKWBcblx0ZGlzcGxheTogZmxleDtcblx0Z2FwOiAkeyBzcGFjZSggMSApIH07XG5cdGp1c3RpZnktY29udGVudDogZmxleC1zdGFydDtcblx0bWFyZ2luLWJvdHRvbTogMDtcbmA7XG4iXX0= */\"));\nexport const HeaderToggle = /*#__PURE__*/_styled(Button, process.env.NODE_ENV === \"production\" ? {\n  target: \"e8tqeku1\"\n} : {\n  target: \"e8tqeku1\",\n  label: \"HeaderToggle\"\n})(\"margin-top:\", space(-1), \";\" + (process.env.NODE_ENV === \"production\" ? \"\" : \"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF3QjRDIiwiZmlsZSI6InN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IEJhc2VDb250cm9sIGZyb20gJy4uL2Jhc2UtY29udHJvbCc7XG5pbXBvcnQgQnV0dG9uIGZyb20gJy4uL2J1dHRvbic7XG5pbXBvcnQgeyBIU3RhY2sgfSBmcm9tICcuLi9oLXN0YWNrJztcbmltcG9ydCB7IHNwYWNlIH0gZnJvbSAnLi4vdXRpbHMvc3BhY2UnO1xuXG5leHBvcnQgY29uc3QgQ29udGFpbmVyID0gc3R5bGVkLmZpZWxkc2V0YFxuXHRib3JkZXI6IDA7XG5cdG1hcmdpbjogMDtcblx0cGFkZGluZzogMDtcblx0ZGlzcGxheTogY29udGVudHM7XG5gO1xuXG5leHBvcnQgY29uc3QgSGVhZGVyID0gc3R5bGVkKCBIU3RhY2sgKWBcblx0aGVpZ2h0OiAkeyBzcGFjZSggNCApIH07XG5gO1xuXG5leHBvcnQgY29uc3QgSGVhZGVyVG9nZ2xlID0gc3R5bGVkKCBCdXR0b24gKWBcblx0bWFyZ2luLXRvcDogJHsgc3BhY2UoIC0xICkgfTtcbmA7XG5cbmV4cG9ydCBjb25zdCBIZWFkZXJMYWJlbCA9IHN0eWxlZCggQmFzZUNvbnRyb2wuVmlzdWFsTGFiZWwgKWBcblx0ZGlzcGxheTogZmxleDtcblx0Z2FwOiAkeyBzcGFjZSggMSApIH07XG5cdGp1c3RpZnktY29udGVudDogZmxleC1zdGFydDtcblx0bWFyZ2luLWJvdHRvbTogMDtcbmA7XG4iXX0= */\"));\nexport const HeaderLabel = /*#__PURE__*/_styled(BaseControl.VisualLabel, process.env.NODE_ENV === \"production\" ? {\n  target: \"e8tqeku0\"\n} : {\n  target: \"e8tqeku0\",\n  label: \"HeaderLabel\"\n})(\"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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE0QjREIiwiZmlsZSI6InN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IEJhc2VDb250cm9sIGZyb20gJy4uL2Jhc2UtY29udHJvbCc7XG5pbXBvcnQgQnV0dG9uIGZyb20gJy4uL2J1dHRvbic7XG5pbXBvcnQgeyBIU3RhY2sgfSBmcm9tICcuLi9oLXN0YWNrJztcbmltcG9ydCB7IHNwYWNlIH0gZnJvbSAnLi4vdXRpbHMvc3BhY2UnO1xuXG5leHBvcnQgY29uc3QgQ29udGFpbmVyID0gc3R5bGVkLmZpZWxkc2V0YFxuXHRib3JkZXI6IDA7XG5cdG1hcmdpbjogMDtcblx0cGFkZGluZzogMDtcblx0ZGlzcGxheTogY29udGVudHM7XG5gO1xuXG5leHBvcnQgY29uc3QgSGVhZGVyID0gc3R5bGVkKCBIU3RhY2sgKWBcblx0aGVpZ2h0OiAkeyBzcGFjZSggNCApIH07XG5gO1xuXG5leHBvcnQgY29uc3QgSGVhZGVyVG9nZ2xlID0gc3R5bGVkKCBCdXR0b24gKWBcblx0bWFyZ2luLXRvcDogJHsgc3BhY2UoIC0xICkgfTtcbmA7XG5cbmV4cG9ydCBjb25zdCBIZWFkZXJMYWJlbCA9IHN0eWxlZCggQmFzZUNvbnRyb2wuVmlzdWFsTGFiZWwgKWBcblx0ZGlzcGxheTogZmxleDtcblx0Z2FwOiAkeyBzcGFjZSggMSApIH07XG5cdGp1c3RpZnktY29udGVudDogZmxleC1zdGFydDtcblx0bWFyZ2luLWJvdHRvbTogMDtcbmA7XG4iXX0= */\"));"],
-  "mappings": "AAAA,OAAO,aAAa;AACpB,SAAS,mCAAmC;AAAE,SAAO;AAAmO;AAQxR,OAAO,iBAAiB;AACxB,OAAO,YAAY;AACnB,SAAS,cAAc;AACvB,SAAS,aAAa;AACf,MAAM,YAAyB,wBAAQ,YAAY,QAAQ,IAAI,aAAa,eAAe;AAAA,EAChG,QAAQ;AACV,IAAI;AAAA,EACF,QAAQ;AAAA,EACR,OAAO;AACT,CAAC,EAAE,QAAQ,IAAI,aAAa,eAAe;AAAA,EACzC,MAAM;AAAA,EACN,QAAQ;AACV,IAAI;AAAA,EACF,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,KAAK;AAAA,EACL,UAAU;AACZ,CAAC;AACM,MAAM,SAAsB,wBAAQ,QAAQ,QAAQ,IAAI,aAAa,eAAe;AAAA,EACzF,QAAQ;AACV,IAAI;AAAA,EACF,QAAQ;AAAA,EACR,OAAO;AACT,CAAC,EAAE,WAAW,MAAM,CAAC,GAAG,OAAO,QAAQ,IAAI,aAAa,eAAe,KAAK,0oCAA0oC;AAC/sC,MAAM,eAA4B,wBAAQ,QAAQ,QAAQ,IAAI,aAAa,eAAe;AAAA,EAC/F,QAAQ;AACV,IAAI;AAAA,EACF,QAAQ;AAAA,EACR,OAAO;AACT,CAAC,EAAE,eAAe,MAAM,EAAE,GAAG,OAAO,QAAQ,IAAI,aAAa,eAAe,KAAK,0oCAA0oC;AACptC,MAAM,cAA2B,wBAAQ,YAAY,aAAa,QAAQ,IAAI,aAAa,eAAe;AAAA,EAC/G,QAAQ;AACV,IAAI;AAAA,EACF,QAAQ;AAAA,EACR,OAAO;AACT,CAAC,EAAE,qBAAqB,MAAM,CAAC,GAAG,kDAAkD,QAAQ,IAAI,aAAa,eAAe,KAAK,0oCAA0oC;",
+  "sourcesContent": ["import _styled from \"@emotion/styled/base\";\nfunction _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).\"; }\n/**\n * External dependencies\n */\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\nimport Button from '../button';\nimport CustomSelectControl from '../custom-select-control';\nimport { HStack } from '../h-stack';\nimport { space } from '../utils/space';\nexport const Container = /*#__PURE__*/_styled(\"fieldset\", process.env.NODE_ENV === \"production\" ? {\n  target: \"e8tqeku4\"\n} : {\n  target: \"e8tqeku4\",\n  label: \"Container\"\n})(process.env.NODE_ENV === \"production\" ? {\n  name: \"k2q51s\",\n  styles: \"border:0;margin:0;padding:0;display:contents\"\n} : {\n  name: \"k2q51s\",\n  styles: \"border:0;margin:0;padding:0;display:contents\",\n  map: \"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFjd0MiLCJmaWxlIjoic3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgQmFzZUNvbnRyb2wgZnJvbSAnLi4vYmFzZS1jb250cm9sJztcbmltcG9ydCBCdXR0b24gZnJvbSAnLi4vYnV0dG9uJztcbmltcG9ydCBDdXN0b21TZWxlY3RDb250cm9sIGZyb20gJy4uL2N1c3RvbS1zZWxlY3QtY29udHJvbCc7XG5pbXBvcnQgeyBIU3RhY2sgfSBmcm9tICcuLi9oLXN0YWNrJztcbmltcG9ydCB7IHNwYWNlIH0gZnJvbSAnLi4vdXRpbHMvc3BhY2UnO1xuXG5leHBvcnQgY29uc3QgQ29udGFpbmVyID0gc3R5bGVkLmZpZWxkc2V0YFxuXHRib3JkZXI6IDA7XG5cdG1hcmdpbjogMDtcblx0cGFkZGluZzogMDtcblx0ZGlzcGxheTogY29udGVudHM7XG5gO1xuXG5leHBvcnQgY29uc3QgSGVhZGVyID0gc3R5bGVkKCBIU3RhY2sgKWBcblx0aGVpZ2h0OiAkeyBzcGFjZSggNCApIH07XG5gO1xuXG5leHBvcnQgY29uc3QgSGVhZGVyVG9nZ2xlID0gc3R5bGVkKCBCdXR0b24gKWBcblx0bWFyZ2luLXRvcDogJHsgc3BhY2UoIC0xICkgfTtcbmA7XG5cbmV4cG9ydCBjb25zdCBIZWFkZXJMYWJlbCA9IHN0eWxlZCggQmFzZUNvbnRyb2wuVmlzdWFsTGFiZWwgKWBcblx0ZGlzcGxheTogZmxleDtcblx0Z2FwOiAkeyBzcGFjZSggMSApIH07XG5cdGp1c3RpZnktY29udGVudDogZmxleC1zdGFydDtcblx0bWFyZ2luLWJvdHRvbTogMDtcbmA7XG5cbi8vIEN1c3RvbSBzdHlsZWQgY29tcG9uZW50IHRvIGZvcmNlIGxpbmUgYnJlYWsgYmV0d2VlbiBuYW1lIGFuZCBoaW50IHdoaWxlIGtlZXBpbmcgY2hlY2ttYXJrIG9uIHRoZSByaWdodFxuZXhwb3J0IGNvbnN0IFN0eWxlZEN1c3RvbVNlbGVjdENvbnRyb2wgPSBzdHlsZWQoIEN1c3RvbVNlbGVjdENvbnRyb2wgKWBcblx0LmNvbXBvbmVudHMtY3VzdG9tLXNlbGVjdC1jb250cm9sX19pdGVtXG5cdFx0LmNvbXBvbmVudHMtY3VzdG9tLXNlbGVjdC1jb250cm9sX19pdGVtLWhpbnQge1xuXHRcdHdpZHRoOiAxMDAlO1xuXHR9XG5gO1xuIl19 */\",\n  toString: _EMOTION_STRINGIFIED_CSS_ERROR__\n});\nexport const Header = /*#__PURE__*/_styled(HStack, process.env.NODE_ENV === \"production\" ? {\n  target: \"e8tqeku3\"\n} : {\n  target: \"e8tqeku3\",\n  label: \"Header\"\n})(\"height:\", space(4), \";\" + (process.env.NODE_ENV === \"production\" ? \"\" : \"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFxQnNDIiwiZmlsZSI6InN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IEJhc2VDb250cm9sIGZyb20gJy4uL2Jhc2UtY29udHJvbCc7XG5pbXBvcnQgQnV0dG9uIGZyb20gJy4uL2J1dHRvbic7XG5pbXBvcnQgQ3VzdG9tU2VsZWN0Q29udHJvbCBmcm9tICcuLi9jdXN0b20tc2VsZWN0LWNvbnRyb2wnO1xuaW1wb3J0IHsgSFN0YWNrIH0gZnJvbSAnLi4vaC1zdGFjayc7XG5pbXBvcnQgeyBzcGFjZSB9IGZyb20gJy4uL3V0aWxzL3NwYWNlJztcblxuZXhwb3J0IGNvbnN0IENvbnRhaW5lciA9IHN0eWxlZC5maWVsZHNldGBcblx0Ym9yZGVyOiAwO1xuXHRtYXJnaW46IDA7XG5cdHBhZGRpbmc6IDA7XG5cdGRpc3BsYXk6IGNvbnRlbnRzO1xuYDtcblxuZXhwb3J0IGNvbnN0IEhlYWRlciA9IHN0eWxlZCggSFN0YWNrIClgXG5cdGhlaWdodDogJHsgc3BhY2UoIDQgKSB9O1xuYDtcblxuZXhwb3J0IGNvbnN0IEhlYWRlclRvZ2dsZSA9IHN0eWxlZCggQnV0dG9uIClgXG5cdG1hcmdpbi10b3A6ICR7IHNwYWNlKCAtMSApIH07XG5gO1xuXG5leHBvcnQgY29uc3QgSGVhZGVyTGFiZWwgPSBzdHlsZWQoIEJhc2VDb250cm9sLlZpc3VhbExhYmVsIClgXG5cdGRpc3BsYXk6IGZsZXg7XG5cdGdhcDogJHsgc3BhY2UoIDEgKSB9O1xuXHRqdXN0aWZ5LWNvbnRlbnQ6IGZsZXgtc3RhcnQ7XG5cdG1hcmdpbi1ib3R0b206IDA7XG5gO1xuXG4vLyBDdXN0b20gc3R5bGVkIGNvbXBvbmVudCB0byBmb3JjZSBsaW5lIGJyZWFrIGJldHdlZW4gbmFtZSBhbmQgaGludCB3aGlsZSBrZWVwaW5nIGNoZWNrbWFyayBvbiB0aGUgcmlnaHRcbmV4cG9ydCBjb25zdCBTdHlsZWRDdXN0b21TZWxlY3RDb250cm9sID0gc3R5bGVkKCBDdXN0b21TZWxlY3RDb250cm9sIClgXG5cdC5jb21wb25lbnRzLWN1c3RvbS1zZWxlY3QtY29udHJvbF9faXRlbVxuXHRcdC5jb21wb25lbnRzLWN1c3RvbS1zZWxlY3QtY29udHJvbF9faXRlbS1oaW50IHtcblx0XHR3aWR0aDogMTAwJTtcblx0fVxuYDtcbiJdfQ== */\"));\nexport const HeaderToggle = /*#__PURE__*/_styled(Button, process.env.NODE_ENV === \"production\" ? {\n  target: \"e8tqeku2\"\n} : {\n  target: \"e8tqeku2\",\n  label: \"HeaderToggle\"\n})(\"margin-top:\", space(-1), \";\" + (process.env.NODE_ENV === \"production\" ? \"\" : \"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF5QjRDIiwiZmlsZSI6InN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IEJhc2VDb250cm9sIGZyb20gJy4uL2Jhc2UtY29udHJvbCc7XG5pbXBvcnQgQnV0dG9uIGZyb20gJy4uL2J1dHRvbic7XG5pbXBvcnQgQ3VzdG9tU2VsZWN0Q29udHJvbCBmcm9tICcuLi9jdXN0b20tc2VsZWN0LWNvbnRyb2wnO1xuaW1wb3J0IHsgSFN0YWNrIH0gZnJvbSAnLi4vaC1zdGFjayc7XG5pbXBvcnQgeyBzcGFjZSB9IGZyb20gJy4uL3V0aWxzL3NwYWNlJztcblxuZXhwb3J0IGNvbnN0IENvbnRhaW5lciA9IHN0eWxlZC5maWVsZHNldGBcblx0Ym9yZGVyOiAwO1xuXHRtYXJnaW46IDA7XG5cdHBhZGRpbmc6IDA7XG5cdGRpc3BsYXk6IGNvbnRlbnRzO1xuYDtcblxuZXhwb3J0IGNvbnN0IEhlYWRlciA9IHN0eWxlZCggSFN0YWNrIClgXG5cdGhlaWdodDogJHsgc3BhY2UoIDQgKSB9O1xuYDtcblxuZXhwb3J0IGNvbnN0IEhlYWRlclRvZ2dsZSA9IHN0eWxlZCggQnV0dG9uIClgXG5cdG1hcmdpbi10b3A6ICR7IHNwYWNlKCAtMSApIH07XG5gO1xuXG5leHBvcnQgY29uc3QgSGVhZGVyTGFiZWwgPSBzdHlsZWQoIEJhc2VDb250cm9sLlZpc3VhbExhYmVsIClgXG5cdGRpc3BsYXk6IGZsZXg7XG5cdGdhcDogJHsgc3BhY2UoIDEgKSB9O1xuXHRqdXN0aWZ5LWNvbnRlbnQ6IGZsZXgtc3RhcnQ7XG5cdG1hcmdpbi1ib3R0b206IDA7XG5gO1xuXG4vLyBDdXN0b20gc3R5bGVkIGNvbXBvbmVudCB0byBmb3JjZSBsaW5lIGJyZWFrIGJldHdlZW4gbmFtZSBhbmQgaGludCB3aGlsZSBrZWVwaW5nIGNoZWNrbWFyayBvbiB0aGUgcmlnaHRcbmV4cG9ydCBjb25zdCBTdHlsZWRDdXN0b21TZWxlY3RDb250cm9sID0gc3R5bGVkKCBDdXN0b21TZWxlY3RDb250cm9sIClgXG5cdC5jb21wb25lbnRzLWN1c3RvbS1zZWxlY3QtY29udHJvbF9faXRlbVxuXHRcdC5jb21wb25lbnRzLWN1c3RvbS1zZWxlY3QtY29udHJvbF9faXRlbS1oaW50IHtcblx0XHR3aWR0aDogMTAwJTtcblx0fVxuYDtcbiJdfQ== */\"));\nexport const HeaderLabel = /*#__PURE__*/_styled(BaseControl.VisualLabel, process.env.NODE_ENV === \"production\" ? {\n  target: \"e8tqeku1\"\n} : {\n  target: \"e8tqeku1\",\n  label: \"HeaderLabel\"\n})(\"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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE2QjREIiwiZmlsZSI6InN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IEJhc2VDb250cm9sIGZyb20gJy4uL2Jhc2UtY29udHJvbCc7XG5pbXBvcnQgQnV0dG9uIGZyb20gJy4uL2J1dHRvbic7XG5pbXBvcnQgQ3VzdG9tU2VsZWN0Q29udHJvbCBmcm9tICcuLi9jdXN0b20tc2VsZWN0LWNvbnRyb2wnO1xuaW1wb3J0IHsgSFN0YWNrIH0gZnJvbSAnLi4vaC1zdGFjayc7XG5pbXBvcnQgeyBzcGFjZSB9IGZyb20gJy4uL3V0aWxzL3NwYWNlJztcblxuZXhwb3J0IGNvbnN0IENvbnRhaW5lciA9IHN0eWxlZC5maWVsZHNldGBcblx0Ym9yZGVyOiAwO1xuXHRtYXJnaW46IDA7XG5cdHBhZGRpbmc6IDA7XG5cdGRpc3BsYXk6IGNvbnRlbnRzO1xuYDtcblxuZXhwb3J0IGNvbnN0IEhlYWRlciA9IHN0eWxlZCggSFN0YWNrIClgXG5cdGhlaWdodDogJHsgc3BhY2UoIDQgKSB9O1xuYDtcblxuZXhwb3J0IGNvbnN0IEhlYWRlclRvZ2dsZSA9IHN0eWxlZCggQnV0dG9uIClgXG5cdG1hcmdpbi10b3A6ICR7IHNwYWNlKCAtMSApIH07XG5gO1xuXG5leHBvcnQgY29uc3QgSGVhZGVyTGFiZWwgPSBzdHlsZWQoIEJhc2VDb250cm9sLlZpc3VhbExhYmVsIClgXG5cdGRpc3BsYXk6IGZsZXg7XG5cdGdhcDogJHsgc3BhY2UoIDEgKSB9O1xuXHRqdXN0aWZ5LWNvbnRlbnQ6IGZsZXgtc3RhcnQ7XG5cdG1hcmdpbi1ib3R0b206IDA7XG5gO1xuXG4vLyBDdXN0b20gc3R5bGVkIGNvbXBvbmVudCB0byBmb3JjZSBsaW5lIGJyZWFrIGJldHdlZW4gbmFtZSBhbmQgaGludCB3aGlsZSBrZWVwaW5nIGNoZWNrbWFyayBvbiB0aGUgcmlnaHRcbmV4cG9ydCBjb25zdCBTdHlsZWRDdXN0b21TZWxlY3RDb250cm9sID0gc3R5bGVkKCBDdXN0b21TZWxlY3RDb250cm9sIClgXG5cdC5jb21wb25lbnRzLWN1c3RvbS1zZWxlY3QtY29udHJvbF9faXRlbVxuXHRcdC5jb21wb25lbnRzLWN1c3RvbS1zZWxlY3QtY29udHJvbF9faXRlbS1oaW50IHtcblx0XHR3aWR0aDogMTAwJTtcblx0fVxuYDtcbiJdfQ== */\"));\n\n// Custom styled component to force line break between name and hint while keeping checkmark on the right\nexport const StyledCustomSelectControl = /*#__PURE__*/_styled(CustomSelectControl, process.env.NODE_ENV === \"production\" ? {\n  target: \"e8tqeku0\"\n} : {\n  target: \"e8tqeku0\",\n  label: \"StyledCustomSelectControl\"\n})(process.env.NODE_ENV === \"production\" ? {\n  name: \"anvx77\",\n  styles: \".components-custom-select-control__item .components-custom-select-control__item-hint{width:100%;}\"\n} : {\n  name: \"anvx77\",\n  styles: \".components-custom-select-control__item .components-custom-select-control__item-hint{width:100%;}\",\n  map: \"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFxQ3NFIiwiZmlsZSI6InN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IEJhc2VDb250cm9sIGZyb20gJy4uL2Jhc2UtY29udHJvbCc7XG5pbXBvcnQgQnV0dG9uIGZyb20gJy4uL2J1dHRvbic7XG5pbXBvcnQgQ3VzdG9tU2VsZWN0Q29udHJvbCBmcm9tICcuLi9jdXN0b20tc2VsZWN0LWNvbnRyb2wnO1xuaW1wb3J0IHsgSFN0YWNrIH0gZnJvbSAnLi4vaC1zdGFjayc7XG5pbXBvcnQgeyBzcGFjZSB9IGZyb20gJy4uL3V0aWxzL3NwYWNlJztcblxuZXhwb3J0IGNvbnN0IENvbnRhaW5lciA9IHN0eWxlZC5maWVsZHNldGBcblx0Ym9yZGVyOiAwO1xuXHRtYXJnaW46IDA7XG5cdHBhZGRpbmc6IDA7XG5cdGRpc3BsYXk6IGNvbnRlbnRzO1xuYDtcblxuZXhwb3J0IGNvbnN0IEhlYWRlciA9IHN0eWxlZCggSFN0YWNrIClgXG5cdGhlaWdodDogJHsgc3BhY2UoIDQgKSB9O1xuYDtcblxuZXhwb3J0IGNvbnN0IEhlYWRlclRvZ2dsZSA9IHN0eWxlZCggQnV0dG9uIClgXG5cdG1hcmdpbi10b3A6ICR7IHNwYWNlKCAtMSApIH07XG5gO1xuXG5leHBvcnQgY29uc3QgSGVhZGVyTGFiZWwgPSBzdHlsZWQoIEJhc2VDb250cm9sLlZpc3VhbExhYmVsIClgXG5cdGRpc3BsYXk6IGZsZXg7XG5cdGdhcDogJHsgc3BhY2UoIDEgKSB9O1xuXHRqdXN0aWZ5LWNvbnRlbnQ6IGZsZXgtc3RhcnQ7XG5cdG1hcmdpbi1ib3R0b206IDA7XG5gO1xuXG4vLyBDdXN0b20gc3R5bGVkIGNvbXBvbmVudCB0byBmb3JjZSBsaW5lIGJyZWFrIGJldHdlZW4gbmFtZSBhbmQgaGludCB3aGlsZSBrZWVwaW5nIGNoZWNrbWFyayBvbiB0aGUgcmlnaHRcbmV4cG9ydCBjb25zdCBTdHlsZWRDdXN0b21TZWxlY3RDb250cm9sID0gc3R5bGVkKCBDdXN0b21TZWxlY3RDb250cm9sIClgXG5cdC5jb21wb25lbnRzLWN1c3RvbS1zZWxlY3QtY29udHJvbF9faXRlbVxuXHRcdC5jb21wb25lbnRzLWN1c3RvbS1zZWxlY3QtY29udHJvbF9faXRlbS1oaW50IHtcblx0XHR3aWR0aDogMTAwJTtcblx0fVxuYDtcbiJdfQ== */\",\n  toString: _EMOTION_STRINGIFIED_CSS_ERROR__\n});"],
+  "mappings": "AAAA,OAAO,aAAa;AACpB,SAAS,mCAAmC;AAAE,SAAO;AAAmO;AAQxR,OAAO,iBAAiB;AACxB,OAAO,YAAY;AACnB,OAAO,yBAAyB;AAChC,SAAS,cAAc;AACvB,SAAS,aAAa;AACf,MAAM,YAAyB,wBAAQ,YAAY,QAAQ,IAAI,aAAa,eAAe;AAAA,EAChG,QAAQ;AACV,IAAI;AAAA,EACF,QAAQ;AAAA,EACR,OAAO;AACT,CAAC,EAAE,QAAQ,IAAI,aAAa,eAAe;AAAA,EACzC,MAAM;AAAA,EACN,QAAQ;AACV,IAAI;AAAA,EACF,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,KAAK;AAAA,EACL,UAAU;AACZ,CAAC;AACM,MAAM,SAAsB,wBAAQ,QAAQ,QAAQ,IAAI,aAAa,eAAe;AAAA,EACzF,QAAQ;AACV,IAAI;AAAA,EACF,QAAQ;AAAA,EACR,OAAO;AACT,CAAC,EAAE,WAAW,MAAM,CAAC,GAAG,OAAO,QAAQ,IAAI,aAAa,eAAe,KAAK,knDAAknD;AACvrD,MAAM,eAA4B,wBAAQ,QAAQ,QAAQ,IAAI,aAAa,eAAe;AAAA,EAC/F,QAAQ;AACV,IAAI;AAAA,EACF,QAAQ;AAAA,EACR,OAAO;AACT,CAAC,EAAE,eAAe,MAAM,EAAE,GAAG,OAAO,QAAQ,IAAI,aAAa,eAAe,KAAK,knDAAknD;AAC5rD,MAAM,cAA2B,wBAAQ,YAAY,aAAa,QAAQ,IAAI,aAAa,eAAe;AAAA,EAC/G,QAAQ;AACV,IAAI;AAAA,EACF,QAAQ;AAAA,EACR,OAAO;AACT,CAAC,EAAE,qBAAqB,MAAM,CAAC,GAAG,kDAAkD,QAAQ,IAAI,aAAa,eAAe,KAAK,knDAAknD;AAG5uD,MAAM,4BAAyC,wBAAQ,qBAAqB,QAAQ,IAAI,aAAa,eAAe;AAAA,EACzH,QAAQ;AACV,IAAI;AAAA,EACF,QAAQ;AAAA,EACR,OAAO;AACT,CAAC,EAAE,QAAQ,IAAI,aAAa,eAAe;AAAA,EACzC,MAAM;AAAA,EACN,QAAQ;AACV,IAAI;AAAA,EACF,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,KAAK;AAAA,EACL,UAAU;AACZ,CAAC;",
   "names": []
 }

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

@@ -2,7 +2,17 @@ function isSimpleCssValue(value) {
   const sizeRegex = /^[\d\.]+(px|em|rem|vw|vh|%|svw|lvw|dvw|svh|lvh|dvh|vi|svi|lvi|dvi|vb|svb|lvb|dvb|vmin|svmin|lvmin|dvmin|vmax|svmax|lvmax|dvmax)?$/i;
   return sizeRegex.test(String(value));
 }
+function generateFontSizeHint(fontSize) {
+  if (fontSize.hint) {
+    return fontSize.hint;
+  }
+  if (isSimpleCssValue(fontSize.size)) {
+    return String(fontSize.size);
+  }
+  return void 0;
+}
 export {
+  generateFontSizeHint,
   isSimpleCssValue
 };
 //# sourceMappingURL=utils.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/font-size-picker/utils.ts"],
-  "sourcesContent": ["/**\n * Internal dependencies\n */\n\n/**\n * Some themes use css vars for their font sizes, so until we\n * have the way of calculating them don't display them.\n *\n * @param value The value that is checked.\n * @return Whether the value is a simple css value.\n */\nexport function isSimpleCssValue(value) {\n  const sizeRegex = /^[\\d\\.]+(px|em|rem|vw|vh|%|svw|lvw|dvw|svh|lvh|dvh|vi|svi|lvi|dvi|vb|svb|lvb|dvb|vmin|svmin|lvmin|dvmin|vmax|svmax|lvmax|dvmax)?$/i;\n  return sizeRegex.test(String(value));\n}"],
-  "mappings": "AAWO,SAAS,iBAAiB,OAAO;AACtC,QAAM,YAAY;AAClB,SAAO,UAAU,KAAK,OAAO,KAAK,CAAC;AACrC;",
+  "sourcesContent": ["/**\n * Internal dependencies\n */\n\n/**\n * Some themes use css vars for their font sizes, so until we\n * have the way of calculating them don't display them.\n *\n * @param value The value that is checked.\n * @return Whether the value is a simple css value.\n */\nexport function isSimpleCssValue(value) {\n  const sizeRegex = /^[\\d\\.]+(px|em|rem|vw|vh|%|svw|lvw|dvw|svh|lvh|dvh|vi|svi|lvi|dvi|vb|svb|lvb|dvb|vmin|svmin|lvmin|dvmin|vmax|svmax|lvmax|dvmax)?$/i;\n  return sizeRegex.test(String(value));\n}\n\n/**\n * Generates hint text for a font size.\n * This function returns the hint provided by the consumer, if any.\n * If no hint is provided, it falls back to showing the size value for simple CSS values.\n *\n * @param fontSize The font size object to generate hint text for.\n * @return The hint text provided by the consumer, or the size value for simple CSS values, or undefined.\n */\nexport function generateFontSizeHint(fontSize) {\n  // If the font size already has a hint, use it\n  if (fontSize.hint) {\n    return fontSize.hint;\n  }\n\n  // Fallback to showing the size value if it's a simple CSS value\n  if (isSimpleCssValue(fontSize.size)) {\n    return String(fontSize.size);\n  }\n  return undefined;\n}"],
+  "mappings": "AAWO,SAAS,iBAAiB,OAAO;AACtC,QAAM,YAAY;AAClB,SAAO,UAAU,KAAK,OAAO,KAAK,CAAC;AACrC;AAUO,SAAS,qBAAqB,UAAU;AAE7C,MAAI,SAAS,MAAM;AACjB,WAAO,SAAS;AAAA,EAClB;AAGA,MAAI,iBAAiB,SAAS,IAAI,GAAG;AACnC,WAAO,OAAO,SAAS,IAAI;AAAA,EAC7B;AACA,SAAO;AACT;",
   "names": []
 }

package/build-style/style-rtl.css

@@ -178,6 +178,7 @@
   min-height: 24px;
   border-radius: 2px;
   line-height: 0;
+  max-width: 100%;
   display: inline-block;
 }
 .components-badge:where(.is-default) {

package/build-style/style.css

@@ -178,6 +178,7 @@
   min-height: 24px;
   border-radius: 2px;
   line-height: 0;
+  max-width: 100%;
   display: inline-block;
 }
 .components-badge:where(.is-default) {

package/build-types/font-size-picker/font-size-picker-select.d.ts

@@ -1,3 +1,6 @@
+/**
+ * Internal dependencies
+ */
 import type { FontSizePickerSelectProps } from './types';
 declare const FontSizePickerSelect: (props: FontSizePickerSelectProps) => import("react").JSX.Element;
 export default FontSizePickerSelect;

package/build-types/font-size-picker/font-size-picker-select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"font-size-picker-select.d.ts","sourceRoot":"","sources":["../../src/font-size-picker/font-size-picker-select.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EACX,yBAAyB,EAEzB,MAAM,SAAS,CAAC;AASjB,QAAA,MAAM,oBAAoB,UAAY,yBAAyB,gCA+C9D,CAAC;AAEF,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"font-size-picker-select.d.ts","sourceRoot":"","sources":["../../src/font-size-picker/font-size-picker-select.tsx"],"names":[],"mappings":"AAMA;;GAEG;AACH,OAAO,KAAK,EACX,yBAAyB,EAEzB,MAAM,SAAS,CAAC;AAUjB,QAAA,MAAM,oBAAoB,UAAY,yBAAyB,gCA+E9D,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/build-types/font-size-picker/font-size-picker-toggle-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"font-size-picker-toggle-group.d.ts","sourceRoot":"","sources":["../../src/font-size-picker/font-size-picker-toggle-group.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,8BAA8B,EAAE,MAAM,SAAS,CAAC;AAE9D,QAAA,MAAM,yBAAyB,UAAY,8BAA8B,gCAyBxE,CAAC;AAEF,eAAe,yBAAyB,CAAC"}
+{"version":3,"file":"font-size-picker-toggle-group.d.ts","sourceRoot":"","sources":["../../src/font-size-picker/font-size-picker-toggle-group.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,8BAA8B,EAAE,MAAM,SAAS,CAAC;AAE9D,QAAA,MAAM,yBAAyB,UAAY,8BAA8B,gCA+ExE,CAAC;AAEF,eAAe,yBAAyB,CAAC"}

package/build-types/font-size-picker/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/font-size-picker/index.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAwPnD,eAAO,MAAM,cAAc,qGAA0C,CAAC;AAEtE,eAAe,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/font-size-picker/index.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAiRnD,eAAO,MAAM,cAAc,qGAA0C,CAAC;AAEtE,eAAe,cAAc,CAAC"}