@wordpress/components 32.0.1-next.ba3aee3a2.0 → 32.0.2-next.v.0

package/build-module/disclosure/index.mjs

@@ -18,6 +18,7 @@ var UnforwardedDisclosureContent = ({
   });
 };
 var DisclosureContent2 = forwardRef(UnforwardedDisclosureContent);
+DisclosureContent2.displayName = "DisclosureContent";
 var disclosure_default = DisclosureContent2;
 export {
   DisclosureContent2 as DisclosureContent,

package/build-module/disclosure/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/disclosure/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { jsx as _jsx } from \"react/jsx-runtime\";\n/**\n * Accessible Disclosure component that controls visibility of a section of\n * content. It follows the WAI-ARIA Disclosure Pattern.\n */\nconst UnforwardedDisclosureContent = ({\n  visible,\n  children,\n  ...props\n}, ref) => {\n  const disclosure = Ariakit.useDisclosureStore({\n    open: visible\n  });\n  return /*#__PURE__*/_jsx(Ariakit.DisclosureContent, {\n    store: disclosure,\n    ref: ref,\n    ...props,\n    children: children\n  });\n};\nexport const DisclosureContent = forwardRef(UnforwardedDisclosureContent);\nexport default DisclosureContent;"],
-  "mappings": ";AAGA,YAAY,aAAa;AAKzB,SAAS,kBAAkB;AAK3B,SAAS,OAAO,YAAY;AAK5B,IAAM,+BAA+B,CAAC;AAAA,EACpC;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,QAAQ;AACT,QAAM,aAAqB,2BAAmB;AAAA,IAC5C,MAAM;AAAA,EACR,CAAC;AACD,SAAoB,qBAAa,2BAAmB;AAAA,IAClD,OAAO;AAAA,IACP;AAAA,IACA,GAAG;AAAA,IACH;AAAA,EACF,CAAC;AACH;AACO,IAAMA,qBAAoB,WAAW,4BAA4B;AACxE,IAAO,qBAAQA;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { jsx as _jsx } from \"react/jsx-runtime\";\n/**\n * Accessible Disclosure component that controls visibility of a section of\n * content. It follows the WAI-ARIA Disclosure Pattern.\n */\nconst UnforwardedDisclosureContent = ({\n  visible,\n  children,\n  ...props\n}, ref) => {\n  const disclosure = Ariakit.useDisclosureStore({\n    open: visible\n  });\n  return /*#__PURE__*/_jsx(Ariakit.DisclosureContent, {\n    store: disclosure,\n    ref: ref,\n    ...props,\n    children: children\n  });\n};\nexport const DisclosureContent = forwardRef(UnforwardedDisclosureContent);\nDisclosureContent.displayName = 'DisclosureContent';\nexport default DisclosureContent;"],
+  "mappings": ";AAGA,YAAY,aAAa;AAKzB,SAAS,kBAAkB;AAK3B,SAAS,OAAO,YAAY;AAK5B,IAAM,+BAA+B,CAAC;AAAA,EACpC;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,QAAQ;AACT,QAAM,aAAqB,2BAAmB;AAAA,IAC5C,MAAM;AAAA,EACR,CAAC;AACD,SAAoB,qBAAa,2BAAmB;AAAA,IAClD,OAAO;AAAA,IACP;AAAA,IACA,GAAG;AAAA,IACH;AAAA,EACF,CAAC;AACH;AACO,IAAMA,qBAAoB,WAAW,4BAA4B;AACxEA,mBAAkB,cAAc;AAChC,IAAO,qBAAQA;",
   "names": ["DisclosureContent"]
 }

package/build-module/duotone-picker/duotone-picker.mjs

@@ -1,5 +1,5 @@
 // packages/components/src/duotone-picker/duotone-picker.tsx
-import fastDeepEqual from "fast-deep-equal/es6";
+import fastDeepEqual from "fast-deep-equal/es6/index.js";
 import { useMemo } from "@wordpress/element";
 import { __, sprintf } from "@wordpress/i18n";
 import ColorListPicker from "./color-list-picker/index.mjs";

package/build-module/duotone-picker/duotone-picker.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/duotone-picker/duotone-picker.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport fastDeepEqual from 'fast-deep-equal/es6';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport ColorListPicker from './color-list-picker';\nimport CircularOptionPicker, { getComputeCircularOptionPickerCommonProps } from '../circular-option-picker';\nimport { VStack } from '../v-stack';\nimport CustomDuotoneBar from './custom-duotone-bar';\nimport { getDefaultColors, getGradientFromCSSColors } from './utils';\nimport { Spacer } from '../spacer';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\n/**\n * ```jsx\n * import { DuotonePicker, DuotoneSwatch } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const DUOTONE_PALETTE = [\n * \t{ colors: [ '#8c00b7', '#fcff41' ], name: 'Purple and yellow', slug: 'purple-yellow' },\n * \t{ colors: [ '#000097', '#ff4747' ], name: 'Blue and red', slug: 'blue-red' },\n * ];\n *\n * const COLOR_PALETTE = [\n * \t{ color: '#ff4747', name: 'Red', slug: 'red' },\n * \t{ color: '#fcff41', name: 'Yellow', slug: 'yellow' },\n * \t{ color: '#000097', name: 'Blue', slug: 'blue' },\n * \t{ color: '#8c00b7', name: 'Purple', slug: 'purple' },\n * ];\n *\n * const Example = () => {\n * \tconst [ duotone, setDuotone ] = useState( [ '#000000', '#ffffff' ] );\n * \treturn (\n * \t\t<>\n * \t\t\t<DuotonePicker\n * \t\t\t\tduotonePalette={ DUOTONE_PALETTE }\n * \t\t\t\tcolorPalette={ COLOR_PALETTE }\n * \t\t\t\tvalue={ duotone }\n * \t\t\t\tonChange={ setDuotone }\n * \t\t\t/>\n * \t\t\t<DuotoneSwatch values={ duotone } />\n * \t\t</>\n * \t);\n * };\n * ```\n */\nfunction DuotonePicker({\n  asButtons,\n  loop,\n  clearable = true,\n  unsetable = true,\n  colorPalette,\n  duotonePalette,\n  disableCustomColors,\n  disableCustomDuotone,\n  value,\n  onChange,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledby,\n  ...otherProps\n}) {\n  const [defaultDark, defaultLight] = useMemo(() => getDefaultColors(colorPalette), [colorPalette]);\n  const isUnset = value === 'unset';\n  const unsetOptionLabel = __('Unset');\n  const unsetOption = /*#__PURE__*/_jsx(CircularOptionPicker.Option, {\n    value: \"unset\",\n    isSelected: isUnset,\n    tooltipText: unsetOptionLabel,\n    \"aria-label\": unsetOptionLabel,\n    className: \"components-duotone-picker__color-indicator\",\n    onClick: () => {\n      onChange(isUnset ? undefined : 'unset');\n    }\n  }, \"unset\");\n  const duotoneOptions = duotonePalette.map(({\n    colors,\n    slug,\n    name\n  }) => {\n    const style = {\n      background: getGradientFromCSSColors(colors, '135deg'),\n      color: 'transparent'\n    };\n    const tooltipText = name !== null && name !== void 0 ? name : sprintf(\n    // translators: %s: duotone code e.g: \"dark-grayscale\" or \"7f7f7f-ffffff\".\n    __('Duotone code: %s'), slug);\n    const label = name ? sprintf(\n    // translators: %s: The name of the option e.g: \"Dark grayscale\".\n    __('Duotone: %s'), name) : tooltipText;\n    const isSelected = fastDeepEqual(colors, value);\n    return /*#__PURE__*/_jsx(CircularOptionPicker.Option, {\n      value: colors,\n      isSelected: isSelected,\n      \"aria-label\": label,\n      tooltipText: tooltipText,\n      style: style,\n      onClick: () => {\n        onChange(isSelected ? undefined : colors);\n      }\n    }, slug);\n  });\n  const {\n    metaProps,\n    labelProps\n  } = getComputeCircularOptionPickerCommonProps(asButtons, loop, ariaLabel, ariaLabelledby);\n  const options = unsetable ? [unsetOption, ...duotoneOptions] : duotoneOptions;\n  return /*#__PURE__*/_jsx(CircularOptionPicker, {\n    ...otherProps,\n    ...metaProps,\n    ...labelProps,\n    options: options,\n    actions: !!clearable && /*#__PURE__*/_jsx(CircularOptionPicker.ButtonAction, {\n      onClick: () => onChange(undefined),\n      accessibleWhenDisabled: true,\n      disabled: !value,\n      children: __('Clear')\n    }),\n    children: /*#__PURE__*/_jsx(Spacer, {\n      paddingTop: options.length === 0 ? 0 : 4,\n      children: /*#__PURE__*/_jsxs(VStack, {\n        spacing: 3,\n        children: [!disableCustomColors && !disableCustomDuotone && /*#__PURE__*/_jsx(CustomDuotoneBar, {\n          value: isUnset ? undefined : value,\n          onChange: onChange\n        }), !disableCustomDuotone && /*#__PURE__*/_jsx(ColorListPicker, {\n          labels: [__('Shadows'), __('Highlights')],\n          colors: colorPalette,\n          value: isUnset ? undefined : value,\n          disableCustomColors: disableCustomColors,\n          enableAlpha: true,\n          onChange: newColors => {\n            if (!newColors[0]) {\n              newColors[0] = defaultDark;\n            }\n            if (!newColors[1]) {\n              newColors[1] = defaultLight;\n            }\n            const newValue = newColors.length >= 2 ? newColors : undefined;\n            // @ts-expect-error TODO: The color arrays for a DuotonePicker should be a tuple of two colors,\n            // but it's currently typed as a string[].\n            // See also https://github.com/WordPress/gutenberg/pull/49060#discussion_r1136951035\n            onChange(newValue);\n          }\n        })]\n      })\n    })\n  });\n}\nexport default DuotonePicker;"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport fastDeepEqual from 'fast-deep-equal/es6/index.js';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport ColorListPicker from './color-list-picker';\nimport CircularOptionPicker, { getComputeCircularOptionPickerCommonProps } from '../circular-option-picker';\nimport { VStack } from '../v-stack';\nimport CustomDuotoneBar from './custom-duotone-bar';\nimport { getDefaultColors, getGradientFromCSSColors } from './utils';\nimport { Spacer } from '../spacer';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\n/**\n * ```jsx\n * import { DuotonePicker, DuotoneSwatch } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const DUOTONE_PALETTE = [\n * \t{ colors: [ '#8c00b7', '#fcff41' ], name: 'Purple and yellow', slug: 'purple-yellow' },\n * \t{ colors: [ '#000097', '#ff4747' ], name: 'Blue and red', slug: 'blue-red' },\n * ];\n *\n * const COLOR_PALETTE = [\n * \t{ color: '#ff4747', name: 'Red', slug: 'red' },\n * \t{ color: '#fcff41', name: 'Yellow', slug: 'yellow' },\n * \t{ color: '#000097', name: 'Blue', slug: 'blue' },\n * \t{ color: '#8c00b7', name: 'Purple', slug: 'purple' },\n * ];\n *\n * const Example = () => {\n * \tconst [ duotone, setDuotone ] = useState( [ '#000000', '#ffffff' ] );\n * \treturn (\n * \t\t<>\n * \t\t\t<DuotonePicker\n * \t\t\t\tduotonePalette={ DUOTONE_PALETTE }\n * \t\t\t\tcolorPalette={ COLOR_PALETTE }\n * \t\t\t\tvalue={ duotone }\n * \t\t\t\tonChange={ setDuotone }\n * \t\t\t/>\n * \t\t\t<DuotoneSwatch values={ duotone } />\n * \t\t</>\n * \t);\n * };\n * ```\n */\nfunction DuotonePicker({\n  asButtons,\n  loop,\n  clearable = true,\n  unsetable = true,\n  colorPalette,\n  duotonePalette,\n  disableCustomColors,\n  disableCustomDuotone,\n  value,\n  onChange,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledby,\n  ...otherProps\n}) {\n  const [defaultDark, defaultLight] = useMemo(() => getDefaultColors(colorPalette), [colorPalette]);\n  const isUnset = value === 'unset';\n  const unsetOptionLabel = __('Unset');\n  const unsetOption = /*#__PURE__*/_jsx(CircularOptionPicker.Option, {\n    value: \"unset\",\n    isSelected: isUnset,\n    tooltipText: unsetOptionLabel,\n    \"aria-label\": unsetOptionLabel,\n    className: \"components-duotone-picker__color-indicator\",\n    onClick: () => {\n      onChange(isUnset ? undefined : 'unset');\n    }\n  }, \"unset\");\n  const duotoneOptions = duotonePalette.map(({\n    colors,\n    slug,\n    name\n  }) => {\n    const style = {\n      background: getGradientFromCSSColors(colors, '135deg'),\n      color: 'transparent'\n    };\n    const tooltipText = name !== null && name !== void 0 ? name : sprintf(\n    // translators: %s: duotone code e.g: \"dark-grayscale\" or \"7f7f7f-ffffff\".\n    __('Duotone code: %s'), slug);\n    const label = name ? sprintf(\n    // translators: %s: The name of the option e.g: \"Dark grayscale\".\n    __('Duotone: %s'), name) : tooltipText;\n    const isSelected = fastDeepEqual(colors, value);\n    return /*#__PURE__*/_jsx(CircularOptionPicker.Option, {\n      value: colors,\n      isSelected: isSelected,\n      \"aria-label\": label,\n      tooltipText: tooltipText,\n      style: style,\n      onClick: () => {\n        onChange(isSelected ? undefined : colors);\n      }\n    }, slug);\n  });\n  const {\n    metaProps,\n    labelProps\n  } = getComputeCircularOptionPickerCommonProps(asButtons, loop, ariaLabel, ariaLabelledby);\n  const options = unsetable ? [unsetOption, ...duotoneOptions] : duotoneOptions;\n  return /*#__PURE__*/_jsx(CircularOptionPicker, {\n    ...otherProps,\n    ...metaProps,\n    ...labelProps,\n    options: options,\n    actions: !!clearable && /*#__PURE__*/_jsx(CircularOptionPicker.ButtonAction, {\n      onClick: () => onChange(undefined),\n      accessibleWhenDisabled: true,\n      disabled: !value,\n      children: __('Clear')\n    }),\n    children: /*#__PURE__*/_jsx(Spacer, {\n      paddingTop: options.length === 0 ? 0 : 4,\n      children: /*#__PURE__*/_jsxs(VStack, {\n        spacing: 3,\n        children: [!disableCustomColors && !disableCustomDuotone && /*#__PURE__*/_jsx(CustomDuotoneBar, {\n          value: isUnset ? undefined : value,\n          onChange: onChange\n        }), !disableCustomDuotone && /*#__PURE__*/_jsx(ColorListPicker, {\n          labels: [__('Shadows'), __('Highlights')],\n          colors: colorPalette,\n          value: isUnset ? undefined : value,\n          disableCustomColors: disableCustomColors,\n          enableAlpha: true,\n          onChange: newColors => {\n            if (!newColors[0]) {\n              newColors[0] = defaultDark;\n            }\n            if (!newColors[1]) {\n              newColors[1] = defaultLight;\n            }\n            const newValue = newColors.length >= 2 ? newColors : undefined;\n            // @ts-expect-error TODO: The color arrays for a DuotonePicker should be a tuple of two colors,\n            // but it's currently typed as a string[].\n            // See also https://github.com/WordPress/gutenberg/pull/49060#discussion_r1136951035\n            onChange(newValue);\n          }\n        })]\n      })\n    })\n  });\n}\nexport default DuotonePicker;"],
   "mappings": "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",
   "names": []
 }

package/build-module/external-link/index.mjs

@@ -47,6 +47,7 @@ function UnforwardedExternalLink(props, ref) {
   );
 }
 var ExternalLink = forwardRef(UnforwardedExternalLink);
+ExternalLink.displayName = "ExternalLink";
 var external_link_default = ExternalLink;
 export {
   ExternalLink,

package/build-module/external-link/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/external-link/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n/**\n * WordPress dependencies\n */\nimport { __, isRTL } from '@wordpress/i18n';\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nfunction UnforwardedExternalLink(props, ref) {\n  const {\n    href,\n    children,\n    className,\n    rel = '',\n    ...additionalProps\n  } = props;\n  const optimizedRel = [...new Set([...rel.split(' '), 'external', 'noreferrer', 'noopener'].filter(Boolean))].join(' ');\n  const classes = clsx('components-external-link', className);\n  /* Anchor links are perceived as external links.\n  This constant helps check for on page anchor links,\n  to prevent them from being opened in the editor. */\n  const isInternalAnchor = !!href?.startsWith('#');\n  const onClickHandler = event => {\n    if (isInternalAnchor) {\n      event.preventDefault();\n    }\n    if (props.onClick) {\n      props.onClick(event);\n    }\n  };\n  return /*#__PURE__*/ /* eslint-disable react/jsx-no-target-blank */_jsxs(\"a\", {\n    ...additionalProps,\n    className: classes,\n    href: href,\n    onClick: onClickHandler,\n    target: \"_blank\",\n    rel: optimizedRel,\n    ref: ref,\n    children: [/*#__PURE__*/_jsx(\"span\", {\n      className: \"components-external-link__contents\",\n      children: children\n    }), /*#__PURE__*/_jsx(\"span\", {\n      className: \"components-external-link__icon\",\n      \"aria-label\": /* translators: accessibility text */\n      __('(opens in a new tab)'),\n      children: isRTL() ? '\\u2196' : '\\u2197'\n    })]\n  })\n  /* eslint-enable react/jsx-no-target-blank */;\n}\n\n/**\n * Link to an external resource.\n *\n * ```jsx\n * import { ExternalLink } from '@wordpress/components';\n *\n * const MyExternalLink = () => (\n *   <ExternalLink href=\"https://wordpress.org\">WordPress.org</ExternalLink>\n * );\n * ```\n */\nexport const ExternalLink = forwardRef(UnforwardedExternalLink);\nexport default ExternalLink;"],
-  "mappings": ";AAGA,OAAO,UAAU;AAIjB,SAAS,IAAI,aAAa;AAC1B,SAAS,kBAAkB;AAK3B,SAAS,OAAO,MAAM,QAAQ,aAAa;AAC3C,SAAS,wBAAwB,OAAO,KAAK;AAC3C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,eAAe,CAAC,GAAG,IAAI,IAAI,CAAC,GAAG,IAAI,MAAM,GAAG,GAAG,YAAY,cAAc,UAAU,EAAE,OAAO,OAAO,CAAC,CAAC,EAAE,KAAK,GAAG;AACrH,QAAM,UAAU,KAAK,4BAA4B,SAAS;AAI1D,QAAM,mBAAmB,CAAC,CAAC,MAAM,WAAW,GAAG;AAC/C,QAAM,iBAAiB,WAAS;AAC9B,QAAI,kBAAkB;AACpB,YAAM,eAAe;AAAA,IACvB;AACA,QAAI,MAAM,SAAS;AACjB,YAAM,QAAQ,KAAK;AAAA,IACrB;AAAA,EACF;AACA;AAAA;AAAA,IAAmE,sBAAM,KAAK;AAAA,MAC5E,GAAG;AAAA,MACH,WAAW;AAAA,MACX;AAAA,MACA,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,KAAK;AAAA,MACL;AAAA,MACA,UAAU,CAAc,qBAAK,QAAQ;AAAA,QACnC,WAAW;AAAA,QACX;AAAA,MACF,CAAC,GAAgB,qBAAK,QAAQ;AAAA,QAC5B,WAAW;AAAA,QACX;AAAA;AAAA,UACA,GAAG,sBAAsB;AAAA;AAAA,QACzB,UAAU,MAAM,IAAI,WAAW;AAAA,MACjC,CAAC,CAAC;AAAA,IACJ,CAAC;AAAA;AAEH;AAaO,IAAM,eAAe,WAAW,uBAAuB;AAC9D,IAAO,wBAAQ;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n/**\n * WordPress dependencies\n */\nimport { __, isRTL } from '@wordpress/i18n';\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nfunction UnforwardedExternalLink(props, ref) {\n  const {\n    href,\n    children,\n    className,\n    rel = '',\n    ...additionalProps\n  } = props;\n  const optimizedRel = [...new Set([...rel.split(' '), 'external', 'noreferrer', 'noopener'].filter(Boolean))].join(' ');\n  const classes = clsx('components-external-link', className);\n  /* Anchor links are perceived as external links.\n  This constant helps check for on page anchor links,\n  to prevent them from being opened in the editor. */\n  const isInternalAnchor = !!href?.startsWith('#');\n  const onClickHandler = event => {\n    if (isInternalAnchor) {\n      event.preventDefault();\n    }\n    if (props.onClick) {\n      props.onClick(event);\n    }\n  };\n  return /*#__PURE__*/ /* eslint-disable react/jsx-no-target-blank */_jsxs(\"a\", {\n    ...additionalProps,\n    className: classes,\n    href: href,\n    onClick: onClickHandler,\n    target: \"_blank\",\n    rel: optimizedRel,\n    ref: ref,\n    children: [/*#__PURE__*/_jsx(\"span\", {\n      className: \"components-external-link__contents\",\n      children: children\n    }), /*#__PURE__*/_jsx(\"span\", {\n      className: \"components-external-link__icon\",\n      \"aria-label\": /* translators: accessibility text */\n      __('(opens in a new tab)'),\n      children: isRTL() ? '\\u2196' : '\\u2197'\n    })]\n  })\n  /* eslint-enable react/jsx-no-target-blank */;\n}\n\n/**\n * Link to an external resource.\n *\n * ```jsx\n * import { ExternalLink } from '@wordpress/components';\n *\n * const MyExternalLink = () => (\n *   <ExternalLink href=\"https://wordpress.org\">WordPress.org</ExternalLink>\n * );\n * ```\n */\nexport const ExternalLink = forwardRef(UnforwardedExternalLink);\nExternalLink.displayName = 'ExternalLink';\nexport default ExternalLink;"],
+  "mappings": ";AAGA,OAAO,UAAU;AAIjB,SAAS,IAAI,aAAa;AAC1B,SAAS,kBAAkB;AAK3B,SAAS,OAAO,MAAM,QAAQ,aAAa;AAC3C,SAAS,wBAAwB,OAAO,KAAK;AAC3C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,eAAe,CAAC,GAAG,IAAI,IAAI,CAAC,GAAG,IAAI,MAAM,GAAG,GAAG,YAAY,cAAc,UAAU,EAAE,OAAO,OAAO,CAAC,CAAC,EAAE,KAAK,GAAG;AACrH,QAAM,UAAU,KAAK,4BAA4B,SAAS;AAI1D,QAAM,mBAAmB,CAAC,CAAC,MAAM,WAAW,GAAG;AAC/C,QAAM,iBAAiB,WAAS;AAC9B,QAAI,kBAAkB;AACpB,YAAM,eAAe;AAAA,IACvB;AACA,QAAI,MAAM,SAAS;AACjB,YAAM,QAAQ,KAAK;AAAA,IACrB;AAAA,EACF;AACA;AAAA;AAAA,IAAmE,sBAAM,KAAK;AAAA,MAC5E,GAAG;AAAA,MACH,WAAW;AAAA,MACX;AAAA,MACA,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,KAAK;AAAA,MACL;AAAA,MACA,UAAU,CAAc,qBAAK,QAAQ;AAAA,QACnC,WAAW;AAAA,QACX;AAAA,MACF,CAAC,GAAgB,qBAAK,QAAQ;AAAA,QAC5B,WAAW;AAAA,QACX;AAAA;AAAA,UACA,GAAG,sBAAsB;AAAA;AAAA,QACzB,UAAU,MAAM,IAAI,WAAW;AAAA,MACjC,CAAC,CAAC;AAAA,IACJ,CAAC;AAAA;AAEH;AAaO,IAAM,eAAe,WAAW,uBAAuB;AAC9D,aAAa,cAAc;AAC3B,IAAO,wBAAQ;",
   "names": []
 }

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

@@ -180,6 +180,7 @@ var UnforwardedFontSizePicker = (props, ref) => {
   });
 };
 var FontSizePicker = forwardRef(UnforwardedFontSizePicker);
+FontSizePicker.displayName = "FontSizePicker";
 var font_size_picker_default = FontSizePicker;
 export {
   FontSizePicker,

package/build-module/font-size-picker/index.mjs.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    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              __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              __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);\nFontSizePicker.displayName = 'FontSizePicker';\nexport default FontSizePicker;"],
+  "mappings": "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",
   "names": []
 }

package/build-module/form-file-upload/index.mjs

@@ -26,11 +26,15 @@ function FormFileUpload({
   }
   const ui = render ? render({
     openFileDialog
-  }) : /* @__PURE__ */ _jsx(Button, {
-    onClick: openFileDialog,
-    ...props,
-    children
-  });
+  }) : (
+    // Disable reason: the parent component already takes care of the `__next40pxDefaultSize` prop.
+    // eslint-disable-next-line @wordpress/components-no-missing-40px-size-prop
+    /* @__PURE__ */ _jsx(Button, {
+      onClick: openFileDialog,
+      ...props,
+      children
+    })
+  );
   const compatAccept = accept?.includes("audio/*") ? `${accept}, audio/mp3, audio/x-m4a, audio/x-m4b, audio/x-m4p, audio/x-wav, audio/webm` : accept;
   return /* @__PURE__ */ _jsxs("div", {
     className: "components-form-file-upload",

package/build-module/form-file-upload/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/form-file-upload/index.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';\n\n/**\n * FormFileUpload allows users to select files from their local device.\n *\n * ```jsx\n * import { FormFileUpload } from '@wordpress/components';\n *\n * const MyFormFileUpload = () => (\n *   <FormFileUpload\n *     __next40pxDefaultSize\n *     accept=\"image/*\"\n *     onChange={ ( event ) => console.log( event.currentTarget.files ) }\n *   >\n *     Upload\n *   </FormFileUpload>\n * );\n * ```\n */\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nexport function FormFileUpload({\n  accept,\n  children,\n  multiple = false,\n  onChange,\n  onClick,\n  render,\n  ...props\n}) {\n  const ref = useRef(null);\n  const openFileDialog = () => {\n    ref.current?.click();\n  };\n  if (!render) {\n    maybeWarnDeprecated36pxSize({\n      componentName: 'FormFileUpload',\n      __next40pxDefaultSize: props.__next40pxDefaultSize,\n      // @ts-expect-error - We don't \"officially\" support all Button props but this likely happens.\n      size: props.size\n    });\n  }\n  const ui = render ? render({\n    openFileDialog\n  }) : /*#__PURE__*/_jsx(Button, {\n    onClick: openFileDialog,\n    ...props,\n    children: children\n  });\n\n  // iOS browsers may not reliably handle 'audio/*' in the accept attribute.\n  // Adding explicit audio MIME types improves compatibility across all devices.\n  const compatAccept = accept?.includes('audio/*') ? `${accept}, audio/mp3, audio/x-m4a, audio/x-m4b, audio/x-m4p, audio/x-wav, audio/webm` : accept;\n  return /*#__PURE__*/_jsxs(\"div\", {\n    className: \"components-form-file-upload\",\n    children: [ui, /*#__PURE__*/_jsx(\"input\", {\n      type: \"file\",\n      ref: ref,\n      multiple: multiple,\n      style: {\n        display: 'none'\n      },\n      accept: compatAccept,\n      onChange: onChange,\n      onClick: onClick,\n      \"data-testid\": \"form-file-upload-input\"\n    })]\n  });\n}\nexport default FormFileUpload;"],
-  "mappings": ";AAGA,SAAS,cAAc;AAKvB,OAAO,YAAY;AACnB,SAAS,mCAAmC;AAmB5C,SAAS,OAAO,MAAM,QAAQ,aAAa;AACpC,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG;AACD,QAAM,MAAM,OAAO,IAAI;AACvB,QAAM,iBAAiB,MAAM;AAC3B,QAAI,SAAS,MAAM;AAAA,EACrB;AACA,MAAI,CAAC,QAAQ;AACX,gCAA4B;AAAA,MAC1B,eAAe;AAAA,MACf,uBAAuB,MAAM;AAAA;AAAA,MAE7B,MAAM,MAAM;AAAA,IACd,CAAC;AAAA,EACH;AACA,QAAM,KAAK,SAAS,OAAO;AAAA,IACzB;AAAA,EACF,CAAC,IAAiB,qBAAK,QAAQ;AAAA,IAC7B,SAAS;AAAA,IACT,GAAG;AAAA,IACH;AAAA,EACF,CAAC;AAID,QAAM,eAAe,QAAQ,SAAS,SAAS,IAAI,GAAG,MAAM,gFAAgF;AAC5I,SAAoB,sBAAM,OAAO;AAAA,IAC/B,WAAW;AAAA,IACX,UAAU,CAAC,IAAiB,qBAAK,SAAS;AAAA,MACxC,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,MACA,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA,eAAe;AAAA,IACjB,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;AACA,IAAO,2BAAQ;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';\n\n/**\n * FormFileUpload allows users to select files from their local device.\n *\n * ```jsx\n * import { FormFileUpload } from '@wordpress/components';\n *\n * const MyFormFileUpload = () => (\n *   <FormFileUpload\n *     __next40pxDefaultSize\n *     accept=\"image/*\"\n *     onChange={ ( event ) => console.log( event.currentTarget.files ) }\n *   >\n *     Upload\n *   </FormFileUpload>\n * );\n * ```\n */\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nexport function FormFileUpload({\n  accept,\n  children,\n  multiple = false,\n  onChange,\n  onClick,\n  render,\n  ...props\n}) {\n  const ref = useRef(null);\n  const openFileDialog = () => {\n    ref.current?.click();\n  };\n  if (!render) {\n    maybeWarnDeprecated36pxSize({\n      componentName: 'FormFileUpload',\n      __next40pxDefaultSize: props.__next40pxDefaultSize,\n      // @ts-expect-error - We don't \"officially\" support all Button props but this likely happens.\n      size: props.size\n    });\n  }\n  const ui = render ? render({\n    openFileDialog\n  }) :\n  /*#__PURE__*/\n  // Disable reason: the parent component already takes care of the `__next40pxDefaultSize` prop.\n  // eslint-disable-next-line @wordpress/components-no-missing-40px-size-prop\n  _jsx(Button, {\n    onClick: openFileDialog,\n    ...props,\n    children: children\n  });\n\n  // iOS browsers may not reliably handle 'audio/*' in the accept attribute.\n  // Adding explicit audio MIME types improves compatibility across all devices.\n  const compatAccept = accept?.includes('audio/*') ? `${accept}, audio/mp3, audio/x-m4a, audio/x-m4b, audio/x-m4p, audio/x-wav, audio/webm` : accept;\n  return /*#__PURE__*/_jsxs(\"div\", {\n    className: \"components-form-file-upload\",\n    children: [ui, /*#__PURE__*/_jsx(\"input\", {\n      type: \"file\",\n      ref: ref,\n      multiple: multiple,\n      style: {\n        display: 'none'\n      },\n      accept: compatAccept,\n      onChange: onChange,\n      onClick: onClick,\n      \"data-testid\": \"form-file-upload-input\"\n    })]\n  });\n}\nexport default FormFileUpload;"],
+  "mappings": ";AAGA,SAAS,cAAc;AAKvB,OAAO,YAAY;AACnB,SAAS,mCAAmC;AAmB5C,SAAS,OAAO,MAAM,QAAQ,aAAa;AACpC,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG;AACD,QAAM,MAAM,OAAO,IAAI;AACvB,QAAM,iBAAiB,MAAM;AAC3B,QAAI,SAAS,MAAM;AAAA,EACrB;AACA,MAAI,CAAC,QAAQ;AACX,gCAA4B;AAAA,MAC1B,eAAe;AAAA,MACf,uBAAuB,MAAM;AAAA;AAAA,MAE7B,MAAM,MAAM;AAAA,IACd,CAAC;AAAA,EACH;AACA,QAAM,KAAK,SAAS,OAAO;AAAA,IACzB;AAAA,EACF,CAAC;AAAA;AAAA;AAAA,IAID,qBAAK,QAAQ;AAAA,MACX,SAAS;AAAA,MACT,GAAG;AAAA,MACH;AAAA,IACF,CAAC;AAAA;AAID,QAAM,eAAe,QAAQ,SAAS,SAAS,IAAI,GAAG,MAAM,gFAAgF;AAC5I,SAAoB,sBAAM,OAAO;AAAA,IAC/B,WAAW;AAAA,IACX,UAAU,CAAC,IAAiB,qBAAK,SAAS;AAAA,MACxC,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,MACA,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA,eAAe;AAAA,IACjB,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;AACA,IAAO,2BAAQ;",
   "names": []
 }

package/build-module/form-toggle/index.mjs

@@ -41,6 +41,7 @@ function UnforwardedFormToggle(props, ref) {
   });
 }
 var FormToggle = forwardRef(UnforwardedFormToggle);
+FormToggle.displayName = "FormToggle";
 var form_toggle_default = FormToggle;
 export {
   FormToggle,

package/build-module/form-toggle/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/form-toggle/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nexport const noop = () => {};\nfunction UnforwardedFormToggle(props, ref) {\n  const {\n    className,\n    checked,\n    id,\n    disabled,\n    onChange = noop,\n    onClick,\n    ...additionalProps\n  } = props;\n  const wrapperClasses = clsx('components-form-toggle', className, {\n    'is-checked': checked,\n    'is-disabled': disabled\n  });\n  return /*#__PURE__*/_jsxs(\"span\", {\n    className: wrapperClasses,\n    children: [/*#__PURE__*/_jsx(\"input\", {\n      className: \"components-form-toggle__input\",\n      id: id,\n      type: \"checkbox\",\n      checked: checked,\n      onChange: onChange,\n      disabled: disabled,\n      onClick: event => {\n        // Compat code for Safari to ensure that the toggle is focused when clicked.\n        event.currentTarget.focus();\n        onClick?.(event);\n      },\n      ...additionalProps,\n      ref: ref\n    }), /*#__PURE__*/_jsx(\"span\", {\n      className: \"components-form-toggle__track\"\n    }), /*#__PURE__*/_jsx(\"span\", {\n      className: \"components-form-toggle__thumb\"\n    })]\n  });\n}\n\n/**\n * FormToggle switches a single setting on or off.\n *\n * ```jsx\n * import { FormToggle } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyFormToggle = () => {\n *   const [ isChecked, setChecked ] = useState( true );\n *\n *   return (\n *     <FormToggle\n *       checked={ isChecked }\n *       onChange={ () => setChecked( ( state ) => ! state ) }\n *     />\n *   );\n * };\n * ```\n */\nexport const FormToggle = forwardRef(UnforwardedFormToggle);\nexport default FormToggle;"],
-  "mappings": ";AAGA,OAAO,UAAU;AAIjB,SAAS,kBAAkB;AAK3B,SAAS,OAAO,MAAM,QAAQ,aAAa;AACpC,IAAM,OAAO,MAAM;AAAC;AAC3B,SAAS,sBAAsB,OAAO,KAAK;AACzC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,iBAAiB,KAAK,0BAA0B,WAAW;AAAA,IAC/D,cAAc;AAAA,IACd,eAAe;AAAA,EACjB,CAAC;AACD,SAAoB,sBAAM,QAAQ;AAAA,IAChC,WAAW;AAAA,IACX,UAAU,CAAc,qBAAK,SAAS;AAAA,MACpC,WAAW;AAAA,MACX;AAAA,MACA,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS,WAAS;AAEhB,cAAM,cAAc,MAAM;AAC1B,kBAAU,KAAK;AAAA,MACjB;AAAA,MACA,GAAG;AAAA,MACH;AAAA,IACF,CAAC,GAAgB,qBAAK,QAAQ;AAAA,MAC5B,WAAW;AAAA,IACb,CAAC,GAAgB,qBAAK,QAAQ;AAAA,MAC5B,WAAW;AAAA,IACb,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;AAqBO,IAAM,aAAa,WAAW,qBAAqB;AAC1D,IAAO,sBAAQ;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nexport const noop = () => {};\nfunction UnforwardedFormToggle(props, ref) {\n  const {\n    className,\n    checked,\n    id,\n    disabled,\n    onChange = noop,\n    onClick,\n    ...additionalProps\n  } = props;\n  const wrapperClasses = clsx('components-form-toggle', className, {\n    'is-checked': checked,\n    'is-disabled': disabled\n  });\n  return /*#__PURE__*/_jsxs(\"span\", {\n    className: wrapperClasses,\n    children: [/*#__PURE__*/_jsx(\"input\", {\n      className: \"components-form-toggle__input\",\n      id: id,\n      type: \"checkbox\",\n      checked: checked,\n      onChange: onChange,\n      disabled: disabled,\n      onClick: event => {\n        // Compat code for Safari to ensure that the toggle is focused when clicked.\n        event.currentTarget.focus();\n        onClick?.(event);\n      },\n      ...additionalProps,\n      ref: ref\n    }), /*#__PURE__*/_jsx(\"span\", {\n      className: \"components-form-toggle__track\"\n    }), /*#__PURE__*/_jsx(\"span\", {\n      className: \"components-form-toggle__thumb\"\n    })]\n  });\n}\n\n/**\n * FormToggle switches a single setting on or off.\n *\n * ```jsx\n * import { FormToggle } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyFormToggle = () => {\n *   const [ isChecked, setChecked ] = useState( true );\n *\n *   return (\n *     <FormToggle\n *       checked={ isChecked }\n *       onChange={ () => setChecked( ( state ) => ! state ) }\n *     />\n *   );\n * };\n * ```\n */\nexport const FormToggle = forwardRef(UnforwardedFormToggle);\nFormToggle.displayName = 'FormToggle';\nexport default FormToggle;"],
+  "mappings": ";AAGA,OAAO,UAAU;AAIjB,SAAS,kBAAkB;AAK3B,SAAS,OAAO,MAAM,QAAQ,aAAa;AACpC,IAAM,OAAO,MAAM;AAAC;AAC3B,SAAS,sBAAsB,OAAO,KAAK;AACzC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,iBAAiB,KAAK,0BAA0B,WAAW;AAAA,IAC/D,cAAc;AAAA,IACd,eAAe;AAAA,EACjB,CAAC;AACD,SAAoB,sBAAM,QAAQ;AAAA,IAChC,WAAW;AAAA,IACX,UAAU,CAAc,qBAAK,SAAS;AAAA,MACpC,WAAW;AAAA,MACX;AAAA,MACA,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS,WAAS;AAEhB,cAAM,cAAc,MAAM;AAC1B,kBAAU,KAAK;AAAA,MACjB;AAAA,MACA,GAAG;AAAA,MACH;AAAA,IACF,CAAC,GAAgB,qBAAK,QAAQ;AAAA,MAC5B,WAAW;AAAA,IACb,CAAC,GAAgB,qBAAK,QAAQ;AAAA,MAC5B,WAAW;AAAA,IACb,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;AAqBO,IAAM,aAAa,WAAW,qBAAqB;AAC1D,WAAW,cAAc;AACzB,IAAO,sBAAQ;",
   "names": []
 }

package/build-module/form-token-field/token-input.mjs

@@ -58,6 +58,7 @@ function UnForwardedTokenInput(props, ref) {
   });
 }
 var TokenInput = forwardRef(UnForwardedTokenInput);
+TokenInput.displayName = "TokenInput";
 var token_input_default = TokenInput;
 export {
   TokenInput,

package/build-module/form-token-field/token-input.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/form-token-field/token-input.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n/**\n * WordPress dependencies\n */\nimport { forwardRef, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport function UnForwardedTokenInput(props, ref) {\n  const {\n    value,\n    isExpanded,\n    instanceId,\n    selectedSuggestionIndex,\n    className,\n    onChange,\n    onFocus,\n    onBlur,\n    ...restProps\n  } = props;\n  const [hasFocus, setHasFocus] = useState(false);\n  const size = value ? value.length + 1 : 0;\n  const onChangeHandler = event => {\n    if (onChange) {\n      onChange({\n        value: event.target.value\n      });\n    }\n  };\n  const onFocusHandler = e => {\n    setHasFocus(true);\n    onFocus?.(e);\n  };\n  const onBlurHandler = e => {\n    setHasFocus(false);\n    onBlur?.(e);\n  };\n  return /*#__PURE__*/_jsx(\"input\", {\n    ref: ref,\n    id: `components-form-token-input-${instanceId}`,\n    type: \"text\",\n    ...restProps,\n    value: value || '',\n    onChange: onChangeHandler,\n    onFocus: onFocusHandler,\n    onBlur: onBlurHandler,\n    size: size,\n    className: clsx(className, 'components-form-token-field__input'),\n    autoComplete: \"off\",\n    role: \"combobox\",\n    \"aria-expanded\": isExpanded,\n    \"aria-autocomplete\": \"list\",\n    \"aria-owns\": isExpanded ? `components-form-token-suggestions-${instanceId}` : undefined,\n    \"aria-activedescendant\":\n    // Only add the `aria-activedescendant` attribute when:\n    // - the user is actively interacting with the input (`hasFocus`)\n    // - there is a selected suggestion (`selectedSuggestionIndex !== -1`)\n    // - the list of suggestions are rendered in the DOM (`isExpanded`)\n    hasFocus && selectedSuggestionIndex !== -1 && isExpanded ? `components-form-token-suggestions-${instanceId}-${selectedSuggestionIndex}` : undefined,\n    \"aria-describedby\": `components-form-token-suggestions-howto-${instanceId}`\n  });\n}\nexport const TokenInput = forwardRef(UnForwardedTokenInput);\nexport default TokenInput;"],
-  "mappings": ";AAGA,OAAO,UAAU;AAIjB,SAAS,YAAY,gBAAgB;AAKrC,SAAS,OAAO,YAAY;AACrB,SAAS,sBAAsB,OAAO,KAAK;AAChD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,OAAO,QAAQ,MAAM,SAAS,IAAI;AACxC,QAAM,kBAAkB,WAAS;AAC/B,QAAI,UAAU;AACZ,eAAS;AAAA,QACP,OAAO,MAAM,OAAO;AAAA,MACtB,CAAC;AAAA,IACH;AAAA,EACF;AACA,QAAM,iBAAiB,OAAK;AAC1B,gBAAY,IAAI;AAChB,cAAU,CAAC;AAAA,EACb;AACA,QAAM,gBAAgB,OAAK;AACzB,gBAAY,KAAK;AACjB,aAAS,CAAC;AAAA,EACZ;AACA,SAAoB,qBAAK,SAAS;AAAA,IAChC;AAAA,IACA,IAAI,+BAA+B,UAAU;AAAA,IAC7C,MAAM;AAAA,IACN,GAAG;AAAA,IACH,OAAO,SAAS;AAAA,IAChB,UAAU;AAAA,IACV,SAAS;AAAA,IACT,QAAQ;AAAA,IACR;AAAA,IACA,WAAW,KAAK,WAAW,oCAAoC;AAAA,IAC/D,cAAc;AAAA,IACd,MAAM;AAAA,IACN,iBAAiB;AAAA,IACjB,qBAAqB;AAAA,IACrB,aAAa,aAAa,qCAAqC,UAAU,KAAK;AAAA,IAC9E;AAAA;AAAA;AAAA;AAAA;AAAA,MAKA,YAAY,4BAA4B,MAAM,aAAa,qCAAqC,UAAU,IAAI,uBAAuB,KAAK;AAAA;AAAA,IAC1I,oBAAoB,2CAA2C,UAAU;AAAA,EAC3E,CAAC;AACH;AACO,IAAM,aAAa,WAAW,qBAAqB;AAC1D,IAAO,sBAAQ;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n/**\n * WordPress dependencies\n */\nimport { forwardRef, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport function UnForwardedTokenInput(props, ref) {\n  const {\n    value,\n    isExpanded,\n    instanceId,\n    selectedSuggestionIndex,\n    className,\n    onChange,\n    onFocus,\n    onBlur,\n    ...restProps\n  } = props;\n  const [hasFocus, setHasFocus] = useState(false);\n  const size = value ? value.length + 1 : 0;\n  const onChangeHandler = event => {\n    if (onChange) {\n      onChange({\n        value: event.target.value\n      });\n    }\n  };\n  const onFocusHandler = e => {\n    setHasFocus(true);\n    onFocus?.(e);\n  };\n  const onBlurHandler = e => {\n    setHasFocus(false);\n    onBlur?.(e);\n  };\n  return /*#__PURE__*/_jsx(\"input\", {\n    ref: ref,\n    id: `components-form-token-input-${instanceId}`,\n    type: \"text\",\n    ...restProps,\n    value: value || '',\n    onChange: onChangeHandler,\n    onFocus: onFocusHandler,\n    onBlur: onBlurHandler,\n    size: size,\n    className: clsx(className, 'components-form-token-field__input'),\n    autoComplete: \"off\",\n    role: \"combobox\",\n    \"aria-expanded\": isExpanded,\n    \"aria-autocomplete\": \"list\",\n    \"aria-owns\": isExpanded ? `components-form-token-suggestions-${instanceId}` : undefined,\n    \"aria-activedescendant\":\n    // Only add the `aria-activedescendant` attribute when:\n    // - the user is actively interacting with the input (`hasFocus`)\n    // - there is a selected suggestion (`selectedSuggestionIndex !== -1`)\n    // - the list of suggestions are rendered in the DOM (`isExpanded`)\n    hasFocus && selectedSuggestionIndex !== -1 && isExpanded ? `components-form-token-suggestions-${instanceId}-${selectedSuggestionIndex}` : undefined,\n    \"aria-describedby\": `components-form-token-suggestions-howto-${instanceId}`\n  });\n}\nexport const TokenInput = forwardRef(UnForwardedTokenInput);\nTokenInput.displayName = 'TokenInput';\nexport default TokenInput;"],
+  "mappings": ";AAGA,OAAO,UAAU;AAIjB,SAAS,YAAY,gBAAgB;AAKrC,SAAS,OAAO,YAAY;AACrB,SAAS,sBAAsB,OAAO,KAAK;AAChD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,OAAO,QAAQ,MAAM,SAAS,IAAI;AACxC,QAAM,kBAAkB,WAAS;AAC/B,QAAI,UAAU;AACZ,eAAS;AAAA,QACP,OAAO,MAAM,OAAO;AAAA,MACtB,CAAC;AAAA,IACH;AAAA,EACF;AACA,QAAM,iBAAiB,OAAK;AAC1B,gBAAY,IAAI;AAChB,cAAU,CAAC;AAAA,EACb;AACA,QAAM,gBAAgB,OAAK;AACzB,gBAAY,KAAK;AACjB,aAAS,CAAC;AAAA,EACZ;AACA,SAAoB,qBAAK,SAAS;AAAA,IAChC;AAAA,IACA,IAAI,+BAA+B,UAAU;AAAA,IAC7C,MAAM;AAAA,IACN,GAAG;AAAA,IACH,OAAO,SAAS;AAAA,IAChB,UAAU;AAAA,IACV,SAAS;AAAA,IACT,QAAQ;AAAA,IACR;AAAA,IACA,WAAW,KAAK,WAAW,oCAAoC;AAAA,IAC/D,cAAc;AAAA,IACd,MAAM;AAAA,IACN,iBAAiB;AAAA,IACjB,qBAAqB;AAAA,IACrB,aAAa,aAAa,qCAAqC,UAAU,KAAK;AAAA,IAC9E;AAAA;AAAA;AAAA;AAAA;AAAA,MAKA,YAAY,4BAA4B,MAAM,aAAa,qCAAqC,UAAU,IAAI,uBAAuB,KAAK;AAAA;AAAA,IAC1I,oBAAoB,2CAA2C,UAAU;AAAA,EAC3E,CAAC;AACH;AACO,IAAM,aAAa,WAAW,qBAAqB;AAC1D,WAAW,cAAc;AACzB,IAAO,sBAAQ;",
   "names": []
 }

package/build-module/form-token-field/token.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/form-token-field/token.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { closeSmall } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport { VisuallyHidden } from '../visually-hidden';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst noop = () => {};\nexport default function Token({\n  value,\n  status,\n  title,\n  displayTransform,\n  isBorderless = false,\n  disabled = false,\n  onClickRemove = noop,\n  onMouseEnter,\n  onMouseLeave,\n  messages,\n  termPosition,\n  termsCount\n}) {\n  const instanceId = useInstanceId(Token);\n  const tokenClasses = clsx('components-form-token-field__token', {\n    'is-error': 'error' === status,\n    'is-success': 'success' === status,\n    'is-validating': 'validating' === status,\n    'is-borderless': isBorderless,\n    'is-disabled': disabled\n  });\n  const onClick = () => onClickRemove({\n    value\n  });\n  const transformedValue = displayTransform(value);\n  const termPositionAndCount = sprintf(/* translators: 1: term name, 2: term position in a set of terms, 3: total term set count. */\n  __('%1$s (%2$d of %3$d)'), transformedValue, termPosition, termsCount);\n  return /*#__PURE__*/_jsxs(\"span\", {\n    className: tokenClasses,\n    onMouseEnter: onMouseEnter,\n    onMouseLeave: onMouseLeave,\n    title: title,\n    children: [/*#__PURE__*/_jsxs(\"span\", {\n      className: \"components-form-token-field__token-text\",\n      id: `components-form-token-field__token-text-${instanceId}`,\n      children: [/*#__PURE__*/_jsx(VisuallyHidden, {\n        as: \"span\",\n        children: termPositionAndCount\n      }), /*#__PURE__*/_jsx(\"span\", {\n        \"aria-hidden\": \"true\",\n        children: transformedValue\n      })]\n    }), /*#__PURE__*/_jsx(Button, {\n      className: \"components-form-token-field__remove-token\",\n      size: \"small\",\n      icon: closeSmall,\n      onClick: !disabled ? onClick : undefined\n      // Disable reason: Even when FormTokenField itself is accessibly disabled, token reset buttons shouldn't be in the tab sequence.\n      // eslint-disable-next-line no-restricted-syntax\n      ,\n      disabled: disabled,\n      label: messages.remove,\n      \"aria-describedby\": `components-form-token-field__token-text-${instanceId}`\n    })]\n  });\n}"],
-  "mappings": ";AAGA,OAAO,UAAU;AAKjB,SAAS,qBAAqB;AAC9B,SAAS,IAAI,eAAe;AAC5B,SAAS,kBAAkB;AAK3B,OAAO,YAAY;AACnB,SAAS,sBAAsB;AAC/B,SAAS,OAAO,MAAM,QAAQ,aAAa;AAC3C,IAAM,OAAO,MAAM;AAAC;AACL,SAAR,MAAuB;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAG;AACD,QAAM,aAAa,cAAc,KAAK;AACtC,QAAM,eAAe,KAAK,sCAAsC;AAAA,IAC9D,YAAY,YAAY;AAAA,IACxB,cAAc,cAAc;AAAA,IAC5B,iBAAiB,iBAAiB;AAAA,IAClC,iBAAiB;AAAA,IACjB,eAAe;AAAA,EACjB,CAAC;AACD,QAAM,UAAU,MAAM,cAAc;AAAA,IAClC;AAAA,EACF,CAAC;AACD,QAAM,mBAAmB,iBAAiB,KAAK;AAC/C,QAAM,uBAAuB;AAAA;AAAA,IAC7B,GAAG,qBAAqB;AAAA,IAAG;AAAA,IAAkB;AAAA,IAAc;AAAA,EAAU;AACrE,SAAoB,sBAAM,QAAQ;AAAA,IAChC,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU,CAAc,sBAAM,QAAQ;AAAA,MACpC,WAAW;AAAA,MACX,IAAI,2CAA2C,UAAU;AAAA,MACzD,UAAU,CAAc,qBAAK,gBAAgB;AAAA,QAC3C,IAAI;AAAA,QACJ,UAAU;AAAA,MACZ,CAAC,GAAgB,qBAAK,QAAQ;AAAA,QAC5B,eAAe;AAAA,QACf,UAAU;AAAA,MACZ,CAAC,CAAC;AAAA,IACJ,CAAC,GAAgB,qBAAK,QAAQ;AAAA,MAC5B,WAAW;AAAA,MACX,MAAM;AAAA,MACN,MAAM;AAAA,MACN,SAAS,CAAC,WAAW,UAAU;AAAA,MAI/B;AAAA,MACA,OAAO,SAAS;AAAA,MAChB,oBAAoB,2CAA2C,UAAU;AAAA,IAC3E,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { closeSmall } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport { VisuallyHidden } from '../visually-hidden';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst noop = () => {};\nexport default function Token({\n  value,\n  status,\n  title,\n  displayTransform,\n  isBorderless = false,\n  disabled = false,\n  onClickRemove = noop,\n  onMouseEnter,\n  onMouseLeave,\n  messages,\n  termPosition,\n  termsCount\n}) {\n  const instanceId = useInstanceId(Token);\n  const tokenClasses = clsx('components-form-token-field__token', {\n    'is-error': 'error' === status,\n    'is-success': 'success' === status,\n    'is-validating': 'validating' === status,\n    'is-borderless': isBorderless,\n    'is-disabled': disabled\n  });\n  const onClick = () => onClickRemove({\n    value\n  });\n  const transformedValue = displayTransform(value);\n  const termPositionAndCount = sprintf(/* translators: 1: term name, 2: term position in a set of terms, 3: total term set count. */\n  __('%1$s (%2$d of %3$d)'), transformedValue, termPosition, termsCount);\n  return /*#__PURE__*/_jsxs(\"span\", {\n    className: tokenClasses,\n    onMouseEnter: onMouseEnter,\n    onMouseLeave: onMouseLeave,\n    title: title,\n    children: [/*#__PURE__*/_jsxs(\"span\", {\n      className: \"components-form-token-field__token-text\",\n      id: `components-form-token-field__token-text-${instanceId}`,\n      children: [/*#__PURE__*/_jsx(VisuallyHidden, {\n        as: \"span\",\n        children: termPositionAndCount\n      }), /*#__PURE__*/_jsx(\"span\", {\n        \"aria-hidden\": \"true\",\n        children: transformedValue\n      })]\n    }), /*#__PURE__*/_jsx(Button, {\n      className: \"components-form-token-field__remove-token\",\n      size: \"small\",\n      icon: closeSmall,\n      onClick: !disabled ? onClick : undefined,\n      disabled: disabled,\n      label: messages.remove,\n      \"aria-describedby\": `components-form-token-field__token-text-${instanceId}`\n    })]\n  });\n}"],
+  "mappings": ";AAGA,OAAO,UAAU;AAKjB,SAAS,qBAAqB;AAC9B,SAAS,IAAI,eAAe;AAC5B,SAAS,kBAAkB;AAK3B,OAAO,YAAY;AACnB,SAAS,sBAAsB;AAC/B,SAAS,OAAO,MAAM,QAAQ,aAAa;AAC3C,IAAM,OAAO,MAAM;AAAC;AACL,SAAR,MAAuB;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAG;AACD,QAAM,aAAa,cAAc,KAAK;AACtC,QAAM,eAAe,KAAK,sCAAsC;AAAA,IAC9D,YAAY,YAAY;AAAA,IACxB,cAAc,cAAc;AAAA,IAC5B,iBAAiB,iBAAiB;AAAA,IAClC,iBAAiB;AAAA,IACjB,eAAe;AAAA,EACjB,CAAC;AACD,QAAM,UAAU,MAAM,cAAc;AAAA,IAClC;AAAA,EACF,CAAC;AACD,QAAM,mBAAmB,iBAAiB,KAAK;AAC/C,QAAM,uBAAuB;AAAA;AAAA,IAC7B,GAAG,qBAAqB;AAAA,IAAG;AAAA,IAAkB;AAAA,IAAc;AAAA,EAAU;AACrE,SAAoB,sBAAM,QAAQ;AAAA,IAChC,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU,CAAc,sBAAM,QAAQ;AAAA,MACpC,WAAW;AAAA,MACX,IAAI,2CAA2C,UAAU;AAAA,MACzD,UAAU,CAAc,qBAAK,gBAAgB;AAAA,QAC3C,IAAI;AAAA,QACJ,UAAU;AAAA,MACZ,CAAC,GAAgB,qBAAK,QAAQ;AAAA,QAC5B,eAAe;AAAA,QACf,UAAU;AAAA,MACZ,CAAC,CAAC;AAAA,IACJ,CAAC,GAAgB,qBAAK,QAAQ;AAAA,MAC5B,WAAW;AAAA,MACX,MAAM;AAAA,MACN,MAAM;AAAA,MACN,SAAS,CAAC,WAAW,UAAU;AAAA,MAC/B;AAAA,MACA,OAAO,SAAS;AAAA,MAChB,oBAAoB,2CAA2C,UAAU;AAAA,IAC3E,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;",
   "names": []
 }

package/build-module/higher-order/navigate-regions/index.mjs

@@ -74,15 +74,17 @@ function useNavigateRegions(shortcuts = defaultShortcuts) {
     }
   };
 }
-var navigate_regions_default = createHigherOrderComponent((Component) => ({
+var navigate_regions_default = createHigherOrderComponent((Component) => function NavigateRegions({
   shortcuts,
   ...props
-}) => /* @__PURE__ */ _jsx("div", {
-  ...useNavigateRegions(shortcuts),
-  children: /* @__PURE__ */ _jsx(Component, {
-    ...props
-  })
-}), "navigateRegions");
+}) {
+  return /* @__PURE__ */ _jsx("div", {
+    ...useNavigateRegions(shortcuts),
+    children: /* @__PURE__ */ _jsx(Component, {
+      ...props
+    })
+  });
+}, "navigateRegions");
 export {
   navigate_regions_default as default,
   useNavigateRegions

package/build-module/higher-order/navigate-regions/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/higher-order/navigate-regions/index.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useState, useRef } from '@wordpress/element';\nimport { createHigherOrderComponent, useRefEffect, useMergeRefs } from '@wordpress/compose';\nimport { isKeyboardEvent } from '@wordpress/keycodes';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst defaultShortcuts = {\n  previous: [{\n    modifier: 'ctrlShift',\n    character: '`'\n  }, {\n    modifier: 'ctrlShift',\n    character: '~'\n  }, {\n    modifier: 'access',\n    character: 'p'\n  }],\n  next: [{\n    modifier: 'ctrl',\n    character: '`'\n  }, {\n    modifier: 'access',\n    character: 'n'\n  }]\n};\nexport function useNavigateRegions(shortcuts = defaultShortcuts) {\n  const ref = useRef(null);\n  const [isFocusingRegions, setIsFocusingRegions] = useState(false);\n  function focusRegion(offset) {\n    var _ref$current$querySel;\n    const regions = Array.from((_ref$current$querySel = ref.current?.querySelectorAll('[role=\"region\"][tabindex=\"-1\"]')) !== null && _ref$current$querySel !== void 0 ? _ref$current$querySel : []);\n    if (!regions.length) {\n      return;\n    }\n    let nextRegion = regions[0];\n    // Based off the current element, use closest to determine the wrapping region since this operates up the DOM. Also, match tabindex to avoid edge cases with regions we do not want.\n    const wrappingRegion = ref.current?.ownerDocument?.activeElement?.closest('[role=\"region\"][tabindex=\"-1\"]');\n    const selectedIndex = wrappingRegion ? regions.indexOf(wrappingRegion) : -1;\n    if (selectedIndex !== -1) {\n      let nextIndex = selectedIndex + offset;\n      nextIndex = nextIndex === -1 ? regions.length - 1 : nextIndex;\n      nextIndex = nextIndex === regions.length ? 0 : nextIndex;\n      nextRegion = regions[nextIndex];\n    }\n    nextRegion.focus();\n    setIsFocusingRegions(true);\n  }\n  const clickRef = useRefEffect(element => {\n    function onClick() {\n      setIsFocusingRegions(false);\n    }\n    element.addEventListener('click', onClick);\n    return () => {\n      element.removeEventListener('click', onClick);\n    };\n  }, [setIsFocusingRegions]);\n  return {\n    ref: useMergeRefs([ref, clickRef]),\n    className: isFocusingRegions ? 'is-focusing-regions' : '',\n    onKeyDown(event) {\n      if (shortcuts.previous.some(({\n        modifier,\n        character\n      }) => {\n        return isKeyboardEvent[modifier](event, character);\n      })) {\n        focusRegion(-1);\n      } else if (shortcuts.next.some(({\n        modifier,\n        character\n      }) => {\n        return isKeyboardEvent[modifier](event, character);\n      })) {\n        focusRegion(1);\n      }\n    }\n  };\n}\n\n/**\n * `navigateRegions` is a React [higher-order component](https://facebook.github.io/react/docs/higher-order-components.html)\n * adding keyboard navigation to switch between the different DOM elements marked as \"regions\" (role=\"region\").\n * These regions should be focusable (By adding a tabIndex attribute for example). For better accessibility,\n * these elements must be properly labelled to briefly describe the purpose of the content in the region.\n * For more details, see \"Landmark Roles\" in the [WAI-ARIA specification](https://www.w3.org/TR/wai-aria/)\n * and \"Landmark Regions\" in the [ARIA Authoring Practices Guide](https://www.w3.org/WAI/ARIA/apg/practices/landmark-regions/).\n *\n * ```jsx\n * import { navigateRegions } from '@wordpress/components';\n *\n * const MyComponentWithNavigateRegions = navigateRegions( () => (\n * \t<div>\n * \t\t<div role=\"region\" tabIndex=\"-1\" aria-label=\"Header\">\n * \t\t\tHeader\n * \t\t</div>\n * \t\t<div role=\"region\" tabIndex=\"-1\" aria-label=\"Content\">\n * \t\t\tContent\n * \t\t</div>\n * \t\t<div role=\"region\" tabIndex=\"-1\" aria-label=\"Sidebar\">\n * \t\t\tSidebar\n * \t\t</div>\n * \t</div>\n * ) );\n * ```\n */\nexport default createHigherOrderComponent(Component => ({\n  shortcuts,\n  ...props\n}) => /*#__PURE__*/_jsx(\"div\", {\n  ...useNavigateRegions(shortcuts),\n  children: /*#__PURE__*/_jsx(Component, {\n    ...props\n  })\n}), 'navigateRegions');"],
-  "mappings": ";AAGA,SAAS,UAAU,cAAc;AACjC,SAAS,4BAA4B,cAAc,oBAAoB;AACvE,SAAS,uBAAuB;AAChC,SAAS,OAAO,YAAY;AAC5B,IAAM,mBAAmB;AAAA,EACvB,UAAU,CAAC;AAAA,IACT,UAAU;AAAA,IACV,WAAW;AAAA,EACb,GAAG;AAAA,IACD,UAAU;AAAA,IACV,WAAW;AAAA,EACb,GAAG;AAAA,IACD,UAAU;AAAA,IACV,WAAW;AAAA,EACb,CAAC;AAAA,EACD,MAAM,CAAC;AAAA,IACL,UAAU;AAAA,IACV,WAAW;AAAA,EACb,GAAG;AAAA,IACD,UAAU;AAAA,IACV,WAAW;AAAA,EACb,CAAC;AACH;AACO,SAAS,mBAAmB,YAAY,kBAAkB;AAC/D,QAAM,MAAM,OAAO,IAAI;AACvB,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAAS,KAAK;AAChE,WAAS,YAAY,QAAQ;AAC3B,QAAI;AACJ,UAAM,UAAU,MAAM,MAAM,wBAAwB,IAAI,SAAS,iBAAiB,gCAAgC,OAAO,QAAQ,0BAA0B,SAAS,wBAAwB,CAAC,CAAC;AAC9L,QAAI,CAAC,QAAQ,QAAQ;AACnB;AAAA,IACF;AACA,QAAI,aAAa,QAAQ,CAAC;AAE1B,UAAM,iBAAiB,IAAI,SAAS,eAAe,eAAe,QAAQ,gCAAgC;AAC1G,UAAM,gBAAgB,iBAAiB,QAAQ,QAAQ,cAAc,IAAI;AACzE,QAAI,kBAAkB,IAAI;AACxB,UAAI,YAAY,gBAAgB;AAChC,kBAAY,cAAc,KAAK,QAAQ,SAAS,IAAI;AACpD,kBAAY,cAAc,QAAQ,SAAS,IAAI;AAC/C,mBAAa,QAAQ,SAAS;AAAA,IAChC;AACA,eAAW,MAAM;AACjB,yBAAqB,IAAI;AAAA,EAC3B;AACA,QAAM,WAAW,aAAa,aAAW;AACvC,aAAS,UAAU;AACjB,2BAAqB,KAAK;AAAA,IAC5B;AACA,YAAQ,iBAAiB,SAAS,OAAO;AACzC,WAAO,MAAM;AACX,cAAQ,oBAAoB,SAAS,OAAO;AAAA,IAC9C;AAAA,EACF,GAAG,CAAC,oBAAoB,CAAC;AACzB,SAAO;AAAA,IACL,KAAK,aAAa,CAAC,KAAK,QAAQ,CAAC;AAAA,IACjC,WAAW,oBAAoB,wBAAwB;AAAA,IACvD,UAAU,OAAO;AACf,UAAI,UAAU,SAAS,KAAK,CAAC;AAAA,QAC3B;AAAA,QACA;AAAA,MACF,MAAM;AACJ,eAAO,gBAAgB,QAAQ,EAAE,OAAO,SAAS;AAAA,MACnD,CAAC,GAAG;AACF,oBAAY,EAAE;AAAA,MAChB,WAAW,UAAU,KAAK,KAAK,CAAC;AAAA,QAC9B;AAAA,QACA;AAAA,MACF,MAAM;AACJ,eAAO,gBAAgB,QAAQ,EAAE,OAAO,SAAS;AAAA,MACnD,CAAC,GAAG;AACF,oBAAY,CAAC;AAAA,MACf;AAAA,IACF;AAAA,EACF;AACF;AA4BA,IAAO,2BAAQ,2BAA2B,eAAa,CAAC;AAAA,EACtD;AAAA,EACA,GAAG;AACL,MAAmB,qBAAK,OAAO;AAAA,EAC7B,GAAG,mBAAmB,SAAS;AAAA,EAC/B,UAAuB,qBAAK,WAAW;AAAA,IACrC,GAAG;AAAA,EACL,CAAC;AACH,CAAC,GAAG,iBAAiB;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useState, useRef } from '@wordpress/element';\nimport { createHigherOrderComponent, useRefEffect, useMergeRefs } from '@wordpress/compose';\nimport { isKeyboardEvent } from '@wordpress/keycodes';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst defaultShortcuts = {\n  previous: [{\n    modifier: 'ctrlShift',\n    character: '`'\n  }, {\n    modifier: 'ctrlShift',\n    character: '~'\n  }, {\n    modifier: 'access',\n    character: 'p'\n  }],\n  next: [{\n    modifier: 'ctrl',\n    character: '`'\n  }, {\n    modifier: 'access',\n    character: 'n'\n  }]\n};\nexport function useNavigateRegions(shortcuts = defaultShortcuts) {\n  const ref = useRef(null);\n  const [isFocusingRegions, setIsFocusingRegions] = useState(false);\n  function focusRegion(offset) {\n    var _ref$current$querySel;\n    const regions = Array.from((_ref$current$querySel = ref.current?.querySelectorAll('[role=\"region\"][tabindex=\"-1\"]')) !== null && _ref$current$querySel !== void 0 ? _ref$current$querySel : []);\n    if (!regions.length) {\n      return;\n    }\n    let nextRegion = regions[0];\n    // Based off the current element, use closest to determine the wrapping region since this operates up the DOM. Also, match tabindex to avoid edge cases with regions we do not want.\n    const wrappingRegion = ref.current?.ownerDocument?.activeElement?.closest('[role=\"region\"][tabindex=\"-1\"]');\n    const selectedIndex = wrappingRegion ? regions.indexOf(wrappingRegion) : -1;\n    if (selectedIndex !== -1) {\n      let nextIndex = selectedIndex + offset;\n      nextIndex = nextIndex === -1 ? regions.length - 1 : nextIndex;\n      nextIndex = nextIndex === regions.length ? 0 : nextIndex;\n      nextRegion = regions[nextIndex];\n    }\n    nextRegion.focus();\n    setIsFocusingRegions(true);\n  }\n  const clickRef = useRefEffect(element => {\n    function onClick() {\n      setIsFocusingRegions(false);\n    }\n    element.addEventListener('click', onClick);\n    return () => {\n      element.removeEventListener('click', onClick);\n    };\n  }, [setIsFocusingRegions]);\n  return {\n    ref: useMergeRefs([ref, clickRef]),\n    className: isFocusingRegions ? 'is-focusing-regions' : '',\n    onKeyDown(event) {\n      if (shortcuts.previous.some(({\n        modifier,\n        character\n      }) => {\n        return isKeyboardEvent[modifier](event, character);\n      })) {\n        focusRegion(-1);\n      } else if (shortcuts.next.some(({\n        modifier,\n        character\n      }) => {\n        return isKeyboardEvent[modifier](event, character);\n      })) {\n        focusRegion(1);\n      }\n    }\n  };\n}\n\n/**\n * `navigateRegions` is a React [higher-order component](https://facebook.github.io/react/docs/higher-order-components.html)\n * adding keyboard navigation to switch between the different DOM elements marked as \"regions\" (role=\"region\").\n * These regions should be focusable (By adding a tabIndex attribute for example). For better accessibility,\n * these elements must be properly labelled to briefly describe the purpose of the content in the region.\n * For more details, see \"Landmark Roles\" in the [WAI-ARIA specification](https://www.w3.org/TR/wai-aria/)\n * and \"Landmark Regions\" in the [ARIA Authoring Practices Guide](https://www.w3.org/WAI/ARIA/apg/practices/landmark-regions/).\n *\n * ```jsx\n * import { navigateRegions } from '@wordpress/components';\n *\n * const MyComponentWithNavigateRegions = navigateRegions( () => (\n * \t<div>\n * \t\t<div role=\"region\" tabIndex=\"-1\" aria-label=\"Header\">\n * \t\t\tHeader\n * \t\t</div>\n * \t\t<div role=\"region\" tabIndex=\"-1\" aria-label=\"Content\">\n * \t\t\tContent\n * \t\t</div>\n * \t\t<div role=\"region\" tabIndex=\"-1\" aria-label=\"Sidebar\">\n * \t\t\tSidebar\n * \t\t</div>\n * \t</div>\n * ) );\n * ```\n */\nexport default createHigherOrderComponent(Component => function NavigateRegions({\n  shortcuts,\n  ...props\n}) {\n  return /*#__PURE__*/_jsx(\"div\", {\n    ...useNavigateRegions(shortcuts),\n    children: /*#__PURE__*/_jsx(Component, {\n      ...props\n    })\n  });\n}, 'navigateRegions');"],
+  "mappings": ";AAGA,SAAS,UAAU,cAAc;AACjC,SAAS,4BAA4B,cAAc,oBAAoB;AACvE,SAAS,uBAAuB;AAChC,SAAS,OAAO,YAAY;AAC5B,IAAM,mBAAmB;AAAA,EACvB,UAAU,CAAC;AAAA,IACT,UAAU;AAAA,IACV,WAAW;AAAA,EACb,GAAG;AAAA,IACD,UAAU;AAAA,IACV,WAAW;AAAA,EACb,GAAG;AAAA,IACD,UAAU;AAAA,IACV,WAAW;AAAA,EACb,CAAC;AAAA,EACD,MAAM,CAAC;AAAA,IACL,UAAU;AAAA,IACV,WAAW;AAAA,EACb,GAAG;AAAA,IACD,UAAU;AAAA,IACV,WAAW;AAAA,EACb,CAAC;AACH;AACO,SAAS,mBAAmB,YAAY,kBAAkB;AAC/D,QAAM,MAAM,OAAO,IAAI;AACvB,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAAS,KAAK;AAChE,WAAS,YAAY,QAAQ;AAC3B,QAAI;AACJ,UAAM,UAAU,MAAM,MAAM,wBAAwB,IAAI,SAAS,iBAAiB,gCAAgC,OAAO,QAAQ,0BAA0B,SAAS,wBAAwB,CAAC,CAAC;AAC9L,QAAI,CAAC,QAAQ,QAAQ;AACnB;AAAA,IACF;AACA,QAAI,aAAa,QAAQ,CAAC;AAE1B,UAAM,iBAAiB,IAAI,SAAS,eAAe,eAAe,QAAQ,gCAAgC;AAC1G,UAAM,gBAAgB,iBAAiB,QAAQ,QAAQ,cAAc,IAAI;AACzE,QAAI,kBAAkB,IAAI;AACxB,UAAI,YAAY,gBAAgB;AAChC,kBAAY,cAAc,KAAK,QAAQ,SAAS,IAAI;AACpD,kBAAY,cAAc,QAAQ,SAAS,IAAI;AAC/C,mBAAa,QAAQ,SAAS;AAAA,IAChC;AACA,eAAW,MAAM;AACjB,yBAAqB,IAAI;AAAA,EAC3B;AACA,QAAM,WAAW,aAAa,aAAW;AACvC,aAAS,UAAU;AACjB,2BAAqB,KAAK;AAAA,IAC5B;AACA,YAAQ,iBAAiB,SAAS,OAAO;AACzC,WAAO,MAAM;AACX,cAAQ,oBAAoB,SAAS,OAAO;AAAA,IAC9C;AAAA,EACF,GAAG,CAAC,oBAAoB,CAAC;AACzB,SAAO;AAAA,IACL,KAAK,aAAa,CAAC,KAAK,QAAQ,CAAC;AAAA,IACjC,WAAW,oBAAoB,wBAAwB;AAAA,IACvD,UAAU,OAAO;AACf,UAAI,UAAU,SAAS,KAAK,CAAC;AAAA,QAC3B;AAAA,QACA;AAAA,MACF,MAAM;AACJ,eAAO,gBAAgB,QAAQ,EAAE,OAAO,SAAS;AAAA,MACnD,CAAC,GAAG;AACF,oBAAY,EAAE;AAAA,MAChB,WAAW,UAAU,KAAK,KAAK,CAAC;AAAA,QAC9B;AAAA,QACA;AAAA,MACF,MAAM;AACJ,eAAO,gBAAgB,QAAQ,EAAE,OAAO,SAAS;AAAA,MACnD,CAAC,GAAG;AACF,oBAAY,CAAC;AAAA,MACf;AAAA,IACF;AAAA,EACF;AACF;AA4BA,IAAO,2BAAQ,2BAA2B,eAAa,SAAS,gBAAgB;AAAA,EAC9E;AAAA,EACA,GAAG;AACL,GAAG;AACD,SAAoB,qBAAK,OAAO;AAAA,IAC9B,GAAG,mBAAmB,SAAS;AAAA,IAC/B,UAAuB,qBAAK,WAAW;AAAA,MACrC,GAAG;AAAA,IACL,CAAC;AAAA,EACH,CAAC;AACH,GAAG,iBAAiB;",
   "names": []
 }

package/build-module/higher-order/with-fallback-styles/index.mjs

@@ -1,10 +1,10 @@
 // packages/components/src/higher-order/with-fallback-styles/index.tsx
-import fastDeepEqual from "fast-deep-equal/es6";
+import fastDeepEqual from "fast-deep-equal/es6/index.js";
 import { Component } from "@wordpress/element";
 import { createHigherOrderComponent } from "@wordpress/compose";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var with_fallback_styles_default = (mapNodeToProps) => createHigherOrderComponent((WrappedComponent) => {
-  return class extends Component {
+  return class WithFallbackStyles extends Component {
     constructor(props) {
       super(props);
       this.nodeRef = this.props.node;

package/build-module/higher-order/with-fallback-styles/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/higher-order/with-fallback-styles/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport fastDeepEqual from 'fast-deep-equal/es6';\n\n/**\n * WordPress dependencies\n */\nimport { Component } from '@wordpress/element';\nimport { createHigherOrderComponent } from '@wordpress/compose';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default mapNodeToProps => createHigherOrderComponent(WrappedComponent => {\n  return class extends Component {\n    constructor(props) {\n      super(props);\n      this.nodeRef = this.props.node;\n      this.state = {\n        fallbackStyles: undefined,\n        grabStylesCompleted: false\n      };\n      this.bindRef = this.bindRef.bind(this);\n    }\n    bindRef(node) {\n      if (!node) {\n        return;\n      }\n      this.nodeRef = node;\n    }\n    componentDidMount() {\n      this.grabFallbackStyles();\n    }\n    componentDidUpdate() {\n      this.grabFallbackStyles();\n    }\n    grabFallbackStyles() {\n      const {\n        grabStylesCompleted,\n        fallbackStyles\n      } = this.state;\n      if (this.nodeRef && !grabStylesCompleted) {\n        const newFallbackStyles = mapNodeToProps(this.nodeRef, this.props);\n        if (!fastDeepEqual(newFallbackStyles, fallbackStyles)) {\n          this.setState({\n            fallbackStyles: newFallbackStyles,\n            grabStylesCompleted: Object.values(newFallbackStyles).every(Boolean)\n          });\n        }\n      }\n    }\n    render() {\n      const wrappedComponent = /*#__PURE__*/_jsx(WrappedComponent, {\n        ...this.props,\n        ...this.state.fallbackStyles\n      });\n      return this.props.node ? wrappedComponent : /*#__PURE__*/_jsxs(\"div\", {\n        ref: this.bindRef,\n        children: [\" \", wrappedComponent, \" \"]\n      });\n    }\n  };\n}, 'withFallbackStyles');"],
-  "mappings": ";AAGA,OAAO,mBAAmB;AAK1B,SAAS,iBAAiB;AAC1B,SAAS,kCAAkC;AAC3C,SAAS,OAAO,MAAM,QAAQ,aAAa;AAC3C,IAAO,+BAAQ,oBAAkB,2BAA2B,sBAAoB;AAC9E,SAAO,cAAc,UAAU;AAAA,IAC7B,YAAY,OAAO;AACjB,YAAM,KAAK;AACX,WAAK,UAAU,KAAK,MAAM;AAC1B,WAAK,QAAQ;AAAA,QACX,gBAAgB;AAAA,QAChB,qBAAqB;AAAA,MACvB;AACA,WAAK,UAAU,KAAK,QAAQ,KAAK,IAAI;AAAA,IACvC;AAAA,IACA,QAAQ,MAAM;AACZ,UAAI,CAAC,MAAM;AACT;AAAA,MACF;AACA,WAAK,UAAU;AAAA,IACjB;AAAA,IACA,oBAAoB;AAClB,WAAK,mBAAmB;AAAA,IAC1B;AAAA,IACA,qBAAqB;AACnB,WAAK,mBAAmB;AAAA,IAC1B;AAAA,IACA,qBAAqB;AACnB,YAAM;AAAA,QACJ;AAAA,QACA;AAAA,MACF,IAAI,KAAK;AACT,UAAI,KAAK,WAAW,CAAC,qBAAqB;AACxC,cAAM,oBAAoB,eAAe,KAAK,SAAS,KAAK,KAAK;AACjE,YAAI,CAAC,cAAc,mBAAmB,cAAc,GAAG;AACrD,eAAK,SAAS;AAAA,YACZ,gBAAgB;AAAA,YAChB,qBAAqB,OAAO,OAAO,iBAAiB,EAAE,MAAM,OAAO;AAAA,UACrE,CAAC;AAAA,QACH;AAAA,MACF;AAAA,IACF;AAAA,IACA,SAAS;AACP,YAAM,mBAAgC,qBAAK,kBAAkB;AAAA,QAC3D,GAAG,KAAK;AAAA,QACR,GAAG,KAAK,MAAM;AAAA,MAChB,CAAC;AACD,aAAO,KAAK,MAAM,OAAO,mBAAgC,sBAAM,OAAO;AAAA,QACpE,KAAK,KAAK;AAAA,QACV,UAAU,CAAC,KAAK,kBAAkB,GAAG;AAAA,MACvC,CAAC;AAAA,IACH;AAAA,EACF;AACF,GAAG,oBAAoB;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport fastDeepEqual from 'fast-deep-equal/es6/index.js';\n\n/**\n * WordPress dependencies\n */\nimport { Component } from '@wordpress/element';\nimport { createHigherOrderComponent } from '@wordpress/compose';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default mapNodeToProps => createHigherOrderComponent(WrappedComponent => {\n  return class WithFallbackStyles extends Component {\n    constructor(props) {\n      super(props);\n      this.nodeRef = this.props.node;\n      this.state = {\n        fallbackStyles: undefined,\n        grabStylesCompleted: false\n      };\n      this.bindRef = this.bindRef.bind(this);\n    }\n    bindRef(node) {\n      if (!node) {\n        return;\n      }\n      this.nodeRef = node;\n    }\n    componentDidMount() {\n      this.grabFallbackStyles();\n    }\n    componentDidUpdate() {\n      this.grabFallbackStyles();\n    }\n    grabFallbackStyles() {\n      const {\n        grabStylesCompleted,\n        fallbackStyles\n      } = this.state;\n      if (this.nodeRef && !grabStylesCompleted) {\n        const newFallbackStyles = mapNodeToProps(this.nodeRef, this.props);\n        if (!fastDeepEqual(newFallbackStyles, fallbackStyles)) {\n          this.setState({\n            fallbackStyles: newFallbackStyles,\n            grabStylesCompleted: Object.values(newFallbackStyles).every(Boolean)\n          });\n        }\n      }\n    }\n    render() {\n      const wrappedComponent = /*#__PURE__*/_jsx(WrappedComponent, {\n        ...this.props,\n        ...this.state.fallbackStyles\n      });\n      return this.props.node ? wrappedComponent : /*#__PURE__*/_jsxs(\"div\", {\n        ref: this.bindRef,\n        children: [\" \", wrappedComponent, \" \"]\n      });\n    }\n  };\n}, 'withFallbackStyles');"],
+  "mappings": ";AAGA,OAAO,mBAAmB;AAK1B,SAAS,iBAAiB;AAC1B,SAAS,kCAAkC;AAC3C,SAAS,OAAO,MAAM,QAAQ,aAAa;AAC3C,IAAO,+BAAQ,oBAAkB,2BAA2B,sBAAoB;AAC9E,SAAO,MAAM,2BAA2B,UAAU;AAAA,IAChD,YAAY,OAAO;AACjB,YAAM,KAAK;AACX,WAAK,UAAU,KAAK,MAAM;AAC1B,WAAK,QAAQ;AAAA,QACX,gBAAgB;AAAA,QAChB,qBAAqB;AAAA,MACvB;AACA,WAAK,UAAU,KAAK,QAAQ,KAAK,IAAI;AAAA,IACvC;AAAA,IACA,QAAQ,MAAM;AACZ,UAAI,CAAC,MAAM;AACT;AAAA,MACF;AACA,WAAK,UAAU;AAAA,IACjB;AAAA,IACA,oBAAoB;AAClB,WAAK,mBAAmB;AAAA,IAC1B;AAAA,IACA,qBAAqB;AACnB,WAAK,mBAAmB;AAAA,IAC1B;AAAA,IACA,qBAAqB;AACnB,YAAM;AAAA,QACJ;AAAA,QACA;AAAA,MACF,IAAI,KAAK;AACT,UAAI,KAAK,WAAW,CAAC,qBAAqB;AACxC,cAAM,oBAAoB,eAAe,KAAK,SAAS,KAAK,KAAK;AACjE,YAAI,CAAC,cAAc,mBAAmB,cAAc,GAAG;AACrD,eAAK,SAAS;AAAA,YACZ,gBAAgB;AAAA,YAChB,qBAAqB,OAAO,OAAO,iBAAiB,EAAE,MAAM,OAAO;AAAA,UACrE,CAAC;AAAA,QACH;AAAA,MACF;AAAA,IACF;AAAA,IACA,SAAS;AACP,YAAM,mBAAgC,qBAAK,kBAAkB;AAAA,QAC3D,GAAG,KAAK;AAAA,QACR,GAAG,KAAK,MAAM;AAAA,MAChB,CAAC;AACD,aAAO,KAAK,MAAM,OAAO,mBAAgC,sBAAM,OAAO;AAAA,QACpE,KAAK,KAAK;AAAA,QACV,UAAU,CAAC,KAAK,kBAAkB,GAAG;AAAA,MACvC,CAAC;AAAA,IACH;AAAA,EACF;AACF,GAAG,oBAAoB;",
   "names": []
 }

package/build-module/higher-order/with-focus-outside/index.mjs

@@ -2,7 +2,7 @@
 import { useCallback, useState } from "@wordpress/element";
 import { createHigherOrderComponent, __experimentalUseFocusOutside as useFocusOutside } from "@wordpress/compose";
 import { jsx as _jsx } from "react/jsx-runtime";
-var with_focus_outside_default = createHigherOrderComponent((WrappedComponent) => (props) => {
+var with_focus_outside_default = createHigherOrderComponent((WrappedComponent) => function WithFocusOutside(props) {
   const [handleFocusOutside, setHandleFocusOutside] = useState(void 0);
   const bindFocusOutsideHandler = useCallback((node) => setHandleFocusOutside(() => node?.handleFocusOutside ? node.handleFocusOutside.bind(node) : void 0), []);
   return /* @__PURE__ */ _jsx("div", {

package/build-module/higher-order/with-focus-outside/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/higher-order/with-focus-outside/index.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useCallback, useState } from '@wordpress/element';\nimport { createHigherOrderComponent, __experimentalUseFocusOutside as useFocusOutside } from '@wordpress/compose';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport default createHigherOrderComponent(WrappedComponent => props => {\n  const [handleFocusOutside, setHandleFocusOutside] = useState(undefined);\n  const bindFocusOutsideHandler = useCallback(node => setHandleFocusOutside(() => node?.handleFocusOutside ? node.handleFocusOutside.bind(node) : undefined), []);\n  return /*#__PURE__*/_jsx(\"div\", {\n    ...useFocusOutside(handleFocusOutside),\n    children: /*#__PURE__*/_jsx(WrappedComponent, {\n      ref: bindFocusOutsideHandler,\n      ...props\n    })\n  });\n}, 'withFocusOutside');"],
-  "mappings": ";AAGA,SAAS,aAAa,gBAAgB;AACtC,SAAS,4BAA4B,iCAAiC,uBAAuB;AAC7F,SAAS,OAAO,YAAY;AAC5B,IAAO,6BAAQ,2BAA2B,sBAAoB,WAAS;AACrE,QAAM,CAAC,oBAAoB,qBAAqB,IAAI,SAAS,MAAS;AACtE,QAAM,0BAA0B,YAAY,UAAQ,sBAAsB,MAAM,MAAM,qBAAqB,KAAK,mBAAmB,KAAK,IAAI,IAAI,MAAS,GAAG,CAAC,CAAC;AAC9J,SAAoB,qBAAK,OAAO;AAAA,IAC9B,GAAG,gBAAgB,kBAAkB;AAAA,IACrC,UAAuB,qBAAK,kBAAkB;AAAA,MAC5C,KAAK;AAAA,MACL,GAAG;AAAA,IACL,CAAC;AAAA,EACH,CAAC;AACH,GAAG,kBAAkB;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useCallback, useState } from '@wordpress/element';\nimport { createHigherOrderComponent, __experimentalUseFocusOutside as useFocusOutside } from '@wordpress/compose';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport default createHigherOrderComponent(WrappedComponent => function WithFocusOutside(props) {\n  const [handleFocusOutside, setHandleFocusOutside] = useState(undefined);\n  const bindFocusOutsideHandler = useCallback(node => setHandleFocusOutside(() => node?.handleFocusOutside ? node.handleFocusOutside.bind(node) : undefined), []);\n  return /*#__PURE__*/_jsx(\"div\", {\n    ...useFocusOutside(handleFocusOutside),\n    children: /*#__PURE__*/_jsx(WrappedComponent, {\n      ref: bindFocusOutsideHandler,\n      ...props\n    })\n  });\n}, 'withFocusOutside');"],
+  "mappings": ";AAGA,SAAS,aAAa,gBAAgB;AACtC,SAAS,4BAA4B,iCAAiC,uBAAuB;AAC7F,SAAS,OAAO,YAAY;AAC5B,IAAO,6BAAQ,2BAA2B,sBAAoB,SAAS,iBAAiB,OAAO;AAC7F,QAAM,CAAC,oBAAoB,qBAAqB,IAAI,SAAS,MAAS;AACtE,QAAM,0BAA0B,YAAY,UAAQ,sBAAsB,MAAM,MAAM,qBAAqB,KAAK,mBAAmB,KAAK,IAAI,IAAI,MAAS,GAAG,CAAC,CAAC;AAC9J,SAAoB,qBAAK,OAAO;AAAA,IAC9B,GAAG,gBAAgB,kBAAkB;AAAA,IACrC,UAAuB,qBAAK,kBAAkB;AAAA,MAC5C,KAAK;AAAA,MACL,GAAG;AAAA,IACL,CAAC;AAAA,EACH,CAAC;AACH,GAAG,kBAAkB;",
   "names": []
 }

package/build-module/higher-order/with-spoken-messages/index.mjs

@@ -2,11 +2,13 @@
 import { createHigherOrderComponent, useDebounce } from "@wordpress/compose";
 import { speak } from "@wordpress/a11y";
 import { jsx as _jsx } from "react/jsx-runtime";
-var with_spoken_messages_default = createHigherOrderComponent((Component) => (props) => /* @__PURE__ */ _jsx(Component, {
-  ...props,
-  speak,
-  debouncedSpeak: useDebounce(speak, 500)
-}), "withSpokenMessages");
+var with_spoken_messages_default = createHigherOrderComponent((Component) => function WithSpokenMessages(props) {
+  return /* @__PURE__ */ _jsx(Component, {
+    ...props,
+    speak,
+    debouncedSpeak: useDebounce(speak, 500)
+  });
+}, "withSpokenMessages");
 export {
   with_spoken_messages_default as default
 };

package/build-module/higher-order/with-spoken-messages/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/higher-order/with-spoken-messages/index.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { createHigherOrderComponent, useDebounce } from '@wordpress/compose';\nimport { speak } from '@wordpress/a11y';\n\n/** @typedef {import('react').ComponentType} ComponentType */\n\n/**\n * A Higher Order Component used to provide speak and debounced speak functions.\n *\n * @see https://developer.wordpress.org/block-editor/packages/packages-a11y/#speak\n *\n * @param {ComponentType} Component The component to be wrapped.\n *\n * @return {ComponentType} The wrapped component.\n */\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport default createHigherOrderComponent(Component => props => /*#__PURE__*/_jsx(Component, {\n  ...props,\n  speak: speak,\n  debouncedSpeak: useDebounce(speak, 500)\n}), 'withSpokenMessages');"],
-  "mappings": ";AAGA,SAAS,4BAA4B,mBAAmB;AACxD,SAAS,aAAa;AAatB,SAAS,OAAO,YAAY;AAC5B,IAAO,+BAAQ,2BAA2B,eAAa,WAAsB,qBAAK,WAAW;AAAA,EAC3F,GAAG;AAAA,EACH;AAAA,EACA,gBAAgB,YAAY,OAAO,GAAG;AACxC,CAAC,GAAG,oBAAoB;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { createHigherOrderComponent, useDebounce } from '@wordpress/compose';\nimport { speak } from '@wordpress/a11y';\n\n/** @typedef {import('react').ComponentType} ComponentType */\n\n/**\n * A Higher Order Component used to provide speak and debounced speak functions.\n *\n * @see https://developer.wordpress.org/block-editor/packages/packages-a11y/#speak\n *\n * @param {ComponentType} Component The component to be wrapped.\n *\n * @return {ComponentType} The wrapped component.\n */\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport default createHigherOrderComponent(Component => function WithSpokenMessages(props) {\n  return /*#__PURE__*/_jsx(Component, {\n    ...props,\n    speak: speak,\n    debouncedSpeak: useDebounce(speak, 500)\n  });\n}, 'withSpokenMessages');"],
+  "mappings": ";AAGA,SAAS,4BAA4B,mBAAmB;AACxD,SAAS,aAAa;AAatB,SAAS,OAAO,YAAY;AAC5B,IAAO,+BAAQ,2BAA2B,eAAa,SAAS,mBAAmB,OAAO;AACxF,SAAoB,qBAAK,WAAW;AAAA,IAClC,GAAG;AAAA,IACH;AAAA,IACA,gBAAgB,YAAY,OAAO,GAAG;AAAA,EACxC,CAAC;AACH,GAAG,oBAAoB;",
   "names": []
 }

package/build-module/input-control/index.mjs

@@ -96,6 +96,7 @@ function UnforwardedInputControl(props, ref) {
   });
 }
 var InputControl = forwardRef(UnforwardedInputControl);
+InputControl.displayName = "InputControl";
 var input_control_default = InputControl;
 export {
   InputControl,

package/build-module/input-control/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/input-control/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport InputBase from './input-base';\nimport InputField from './input-field';\nimport { space } from '../utils/space';\nimport { useDraft } from './utils';\nimport BaseControl from '../base-control';\nimport { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';\nimport { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst noop = () => {};\nfunction useUniqueId(idProp) {\n  const instanceId = useInstanceId(InputControl);\n  const id = `inspector-input-control-${instanceId}`;\n  return idProp || id;\n}\nexport function UnforwardedInputControl(props, ref) {\n  const {\n    __next40pxDefaultSize,\n    __shouldNotWarnDeprecated36pxSize,\n    __unstableStateReducer: stateReducer = state => state,\n    __unstableInputWidth,\n    className,\n    disabled = false,\n    help,\n    hideLabelFromVision = false,\n    id: idProp,\n    isPressEnterToChange = false,\n    label,\n    labelPosition = 'top',\n    onChange = noop,\n    onValidate = noop,\n    onKeyDown = noop,\n    prefix,\n    size = 'default',\n    style,\n    suffix,\n    value,\n    ...restProps\n  } = useDeprecated36pxDefaultSizeProp(props);\n  const id = useUniqueId(idProp);\n  const classes = clsx('components-input-control', className);\n  const draftHookProps = useDraft({\n    value,\n    onBlur: restProps.onBlur,\n    onChange\n  });\n  const helpProp = !!help ? {\n    'aria-describedby': `${id}__help`\n  } : {};\n  maybeWarnDeprecated36pxSize({\n    componentName: 'InputControl',\n    __next40pxDefaultSize,\n    size,\n    __shouldNotWarnDeprecated36pxSize\n  });\n  return /*#__PURE__*/_jsx(BaseControl, {\n    className: classes,\n    help: help,\n    id: id,\n    children: /*#__PURE__*/_jsx(InputBase, {\n      __next40pxDefaultSize: __next40pxDefaultSize,\n      __unstableInputWidth: __unstableInputWidth,\n      disabled: disabled,\n      gap: 3,\n      hideLabelFromVision: hideLabelFromVision,\n      id: id,\n      justify: \"left\",\n      label: label,\n      labelPosition: labelPosition,\n      prefix: prefix,\n      size: size,\n      style: style,\n      suffix: suffix,\n      children: /*#__PURE__*/_jsx(InputField, {\n        ...restProps,\n        ...helpProp,\n        __next40pxDefaultSize: __next40pxDefaultSize,\n        className: \"components-input-control__input\",\n        disabled: disabled,\n        id: id,\n        isPressEnterToChange: isPressEnterToChange,\n        onKeyDown: onKeyDown,\n        onValidate: onValidate,\n        paddingInlineStart: prefix ? space(1) : undefined,\n        paddingInlineEnd: suffix ? space(1) : undefined,\n        ref: ref,\n        size: size,\n        stateReducer: stateReducer,\n        ...draftHookProps\n      })\n    })\n  });\n}\n\n/**\n * InputControl components let users enter and edit text. This is an experimental component\n * intended to (in time) merge with or replace `TextControl`.\n *\n * ```jsx\n * import { __experimentalInputControl as InputControl } from '@wordpress/components';\n * import { useState } from 'react';\n *\n * const Example = () => {\n *   const [ value, setValue ] = useState( '' );\n *\n *   return (\n *  \t<InputControl\n * \t\t\t__next40pxDefaultSize\n *  \t\tvalue={ value }\n *  \t\tonChange={ ( nextValue ) => setValue( nextValue ?? '' ) }\n *  \t/>\n *   );\n * };\n * ```\n */\nexport const InputControl = forwardRef(UnforwardedInputControl);\nexport default InputControl;"],
-  "mappings": ";AAGA,OAAO,UAAU;AAIjB,SAAS,qBAAqB;AAC9B,SAAS,kBAAkB;AAK3B,OAAO,eAAe;AACtB,OAAO,gBAAgB;AACvB,SAAS,aAAa;AACtB,SAAS,gBAAgB;AACzB,OAAO,iBAAiB;AACxB,SAAS,wCAAwC;AACjD,SAAS,mCAAmC;AAC5C,SAAS,OAAO,YAAY;AAC5B,IAAM,OAAO,MAAM;AAAC;AACpB,SAAS,YAAY,QAAQ;AAC3B,QAAM,aAAa,cAAc,YAAY;AAC7C,QAAM,KAAK,2BAA2B,UAAU;AAChD,SAAO,UAAU;AACnB;AACO,SAAS,wBAAwB,OAAO,KAAK;AAClD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,wBAAwB,eAAe,WAAS;AAAA,IAChD;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,sBAAsB;AAAA,IACtB,IAAI;AAAA,IACJ,uBAAuB;AAAA,IACvB;AAAA,IACA,gBAAgB;AAAA,IAChB,WAAW;AAAA,IACX,aAAa;AAAA,IACb,YAAY;AAAA,IACZ;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI,iCAAiC,KAAK;AAC1C,QAAM,KAAK,YAAY,MAAM;AAC7B,QAAM,UAAU,KAAK,4BAA4B,SAAS;AAC1D,QAAM,iBAAiB,SAAS;AAAA,IAC9B;AAAA,IACA,QAAQ,UAAU;AAAA,IAClB;AAAA,EACF,CAAC;AACD,QAAM,WAAW,CAAC,CAAC,OAAO;AAAA,IACxB,oBAAoB,GAAG,EAAE;AAAA,EAC3B,IAAI,CAAC;AACL,8BAA4B;AAAA,IAC1B,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,SAAoB,qBAAK,aAAa;AAAA,IACpC,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA,UAAuB,qBAAK,WAAW;AAAA,MACrC;AAAA,MACA;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAuB,qBAAK,YAAY;AAAA,QACtC,GAAG;AAAA,QACH,GAAG;AAAA,QACH;AAAA,QACA,WAAW;AAAA,QACX;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,oBAAoB,SAAS,MAAM,CAAC,IAAI;AAAA,QACxC,kBAAkB,SAAS,MAAM,CAAC,IAAI;AAAA,QACtC;AAAA,QACA;AAAA,QACA;AAAA,QACA,GAAG;AAAA,MACL,CAAC;AAAA,IACH,CAAC;AAAA,EACH,CAAC;AACH;AAuBO,IAAM,eAAe,WAAW,uBAAuB;AAC9D,IAAO,wBAAQ;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport InputBase from './input-base';\nimport InputField from './input-field';\nimport { space } from '../utils/space';\nimport { useDraft } from './utils';\nimport BaseControl from '../base-control';\nimport { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';\nimport { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst noop = () => {};\nfunction useUniqueId(idProp) {\n  const instanceId = useInstanceId(InputControl);\n  const id = `inspector-input-control-${instanceId}`;\n  return idProp || id;\n}\nexport function UnforwardedInputControl(props, ref) {\n  const {\n    __next40pxDefaultSize,\n    __shouldNotWarnDeprecated36pxSize,\n    __unstableStateReducer: stateReducer = state => state,\n    __unstableInputWidth,\n    className,\n    disabled = false,\n    help,\n    hideLabelFromVision = false,\n    id: idProp,\n    isPressEnterToChange = false,\n    label,\n    labelPosition = 'top',\n    onChange = noop,\n    onValidate = noop,\n    onKeyDown = noop,\n    prefix,\n    size = 'default',\n    style,\n    suffix,\n    value,\n    ...restProps\n  } = useDeprecated36pxDefaultSizeProp(props);\n  const id = useUniqueId(idProp);\n  const classes = clsx('components-input-control', className);\n  const draftHookProps = useDraft({\n    value,\n    onBlur: restProps.onBlur,\n    onChange\n  });\n  const helpProp = !!help ? {\n    'aria-describedby': `${id}__help`\n  } : {};\n  maybeWarnDeprecated36pxSize({\n    componentName: 'InputControl',\n    __next40pxDefaultSize,\n    size,\n    __shouldNotWarnDeprecated36pxSize\n  });\n  return /*#__PURE__*/_jsx(BaseControl, {\n    className: classes,\n    help: help,\n    id: id,\n    children: /*#__PURE__*/_jsx(InputBase, {\n      __next40pxDefaultSize: __next40pxDefaultSize,\n      __unstableInputWidth: __unstableInputWidth,\n      disabled: disabled,\n      gap: 3,\n      hideLabelFromVision: hideLabelFromVision,\n      id: id,\n      justify: \"left\",\n      label: label,\n      labelPosition: labelPosition,\n      prefix: prefix,\n      size: size,\n      style: style,\n      suffix: suffix,\n      children: /*#__PURE__*/_jsx(InputField, {\n        ...restProps,\n        ...helpProp,\n        __next40pxDefaultSize: __next40pxDefaultSize,\n        className: \"components-input-control__input\",\n        disabled: disabled,\n        id: id,\n        isPressEnterToChange: isPressEnterToChange,\n        onKeyDown: onKeyDown,\n        onValidate: onValidate,\n        paddingInlineStart: prefix ? space(1) : undefined,\n        paddingInlineEnd: suffix ? space(1) : undefined,\n        ref: ref,\n        size: size,\n        stateReducer: stateReducer,\n        ...draftHookProps\n      })\n    })\n  });\n}\n\n/**\n * InputControl components let users enter and edit text. This is an experimental component\n * intended to (in time) merge with or replace `TextControl`.\n *\n * ```jsx\n * import { __experimentalInputControl as InputControl } from '@wordpress/components';\n * import { useState } from 'react';\n *\n * const Example = () => {\n *   const [ value, setValue ] = useState( '' );\n *\n *   return (\n *  \t<InputControl\n * \t\t\t__next40pxDefaultSize\n *  \t\tvalue={ value }\n *  \t\tonChange={ ( nextValue ) => setValue( nextValue ?? '' ) }\n *  \t/>\n *   );\n * };\n * ```\n */\nexport const InputControl = forwardRef(UnforwardedInputControl);\nInputControl.displayName = 'InputControl';\nexport default InputControl;"],
+  "mappings": ";AAGA,OAAO,UAAU;AAIjB,SAAS,qBAAqB;AAC9B,SAAS,kBAAkB;AAK3B,OAAO,eAAe;AACtB,OAAO,gBAAgB;AACvB,SAAS,aAAa;AACtB,SAAS,gBAAgB;AACzB,OAAO,iBAAiB;AACxB,SAAS,wCAAwC;AACjD,SAAS,mCAAmC;AAC5C,SAAS,OAAO,YAAY;AAC5B,IAAM,OAAO,MAAM;AAAC;AACpB,SAAS,YAAY,QAAQ;AAC3B,QAAM,aAAa,cAAc,YAAY;AAC7C,QAAM,KAAK,2BAA2B,UAAU;AAChD,SAAO,UAAU;AACnB;AACO,SAAS,wBAAwB,OAAO,KAAK;AAClD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,wBAAwB,eAAe,WAAS;AAAA,IAChD;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,sBAAsB;AAAA,IACtB,IAAI;AAAA,IACJ,uBAAuB;AAAA,IACvB;AAAA,IACA,gBAAgB;AAAA,IAChB,WAAW;AAAA,IACX,aAAa;AAAA,IACb,YAAY;AAAA,IACZ;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI,iCAAiC,KAAK;AAC1C,QAAM,KAAK,YAAY,MAAM;AAC7B,QAAM,UAAU,KAAK,4BAA4B,SAAS;AAC1D,QAAM,iBAAiB,SAAS;AAAA,IAC9B;AAAA,IACA,QAAQ,UAAU;AAAA,IAClB;AAAA,EACF,CAAC;AACD,QAAM,WAAW,CAAC,CAAC,OAAO;AAAA,IACxB,oBAAoB,GAAG,EAAE;AAAA,EAC3B,IAAI,CAAC;AACL,8BAA4B;AAAA,IAC1B,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,SAAoB,qBAAK,aAAa;AAAA,IACpC,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA,UAAuB,qBAAK,WAAW;AAAA,MACrC;AAAA,MACA;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAuB,qBAAK,YAAY;AAAA,QACtC,GAAG;AAAA,QACH,GAAG;AAAA,QACH;AAAA,QACA,WAAW;AAAA,QACX;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,oBAAoB,SAAS,MAAM,CAAC,IAAI;AAAA,QACxC,kBAAkB,SAAS,MAAM,CAAC,IAAI;AAAA,QACtC;AAAA,QACA;AAAA,QACA;AAAA,QACA,GAAG;AAAA,MACL,CAAC;AAAA,IACH,CAAC;AAAA,EACH,CAAC;AACH;AAuBO,IAAM,eAAe,WAAW,uBAAuB;AAC9D,aAAa,cAAc;AAC3B,IAAO,wBAAQ;",
   "names": []
 }