@wordpress/components 32.4.1-next.v.202603161435.0 → 32.5.0

package/CHANGELOG.md

@@ -2,7 +2,22 @@
 
 ## Unreleased
 
-## 32.4.0-next.0 (2026-03-16)
+## 32.5.0 (2026-04-01)
+
+### Bug Fixes
+
+-   `ToggleGroupControl`: Fix accessible association of `help` text ([#76740](https://github.com/WordPress/gutenberg/pull/76740)).
+-   `ComboboxControl`: Fix accessible association of `help` text with the combobox input ([#76761](https://github.com/WordPress/gutenberg/pull/76761)).
+-   `RadioControl`: Add `role="radiogroup"` to the wrapping `fieldset` element ([#76745](https://github.com/WordPress/gutenberg/pull/76745)).
+-   `ControlWithError`: Connect validation error messages to controls via `aria-describedby` ([#76742](https://github.com/WordPress/gutenberg/pull/76742)).
+-   `CustomGradientPicker`: Add state persistence when switching between Linear and Radial Gradient ([#76595](https://github.com/WordPress/gutenberg/pull/76595)).
+-   `Button`: fix focus styles in High Contrast (forced colors) mode ([#76719](https://github.com/WordPress/gutenberg/pull/76719)).
+
+### Enhancements
+
+-   `Button`: Hide focus outline on `:active` in High Contrast (forced colors) mode to provide visual click feedback ([#76833](https://github.com/WordPress/gutenberg/pull/76833)).
+
+## 32.4.0 (2026-03-18)
 
 ### Bug Fixes
 
@@ -13,6 +28,8 @@
 ### Enhancements
 
 -   `DateCalendar`, `DateRangeCalendar`: Add `showOutsideDays` and `fixedWeeks` props and style outside-month days ([#76199](https://github.com/WordPress/gutenberg/pull/76199)).
+-   `Modal`: Use `--wpds-dimension-surface-width-*` design tokens for width constraints ([#76494](https://github.com/WordPress/gutenberg/pull/76494)).
+-   `Snackbar`: Use `--wpds-dimension-surface-width-lg` design token for max-width ([#76592](https://github.com/WordPress/gutenberg/pull/76592)).
 
 ### Internal
 

package/build/alignment-matrix-control/cell.cjs

@@ -40,9 +40,9 @@ var import_visually_hidden = require("../visually-hidden/index.cjs");
 var import_utils = require("./utils.cjs");
 
 // packages/components/src/alignment-matrix-control/style.module.scss
-if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='4c2e860238']")) {
+if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='ae7603bd56']")) {
   const style = document.createElement("style");
-  style.setAttribute("data-wp-hash", "4c2e860238");
+  style.setAttribute("data-wp-hash", "ae7603bd56");
   style.appendChild(document.createTextNode("._02e2af5803bf5bda__grid-container{aspect-ratio:1;border:1px solid #0000;border-radius:4px;box-sizing:border-box;cursor:pointer;direction:ltr;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);outline:none}.c421f8ed08c23077__grid-row{box-sizing:border-box;display:grid;grid-column:1/-1;grid-template-columns:repeat(3,1fr)}._3af769f755097fdb__cell{align-items:center;appearance:none;border:none;box-sizing:border-box;display:flex;justify-content:center;margin:0;outline:none;padding:0;position:relative}._37ef12d4fb6d6131__point{aspect-ratio:1;border:3px solid;box-sizing:border-box;color:var(--wp-components-color-gray-400,#ccc);contain:strict;display:block;margin:auto;width:6px}._3af769f755097fdb__cell[data-active-item] ._37ef12d4fb6d6131__point{color:var(--wp-components-color-foreground,#1e1e1e);transform:scale(1.6666666667)}._3af769f755097fdb__cell:not([data-active-item]):hover ._37ef12d4fb6d6131__point{color:var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9))}._3af769f755097fdb__cell[data-focus-visible] ._37ef12d4fb6d6131__point{outline:1px solid var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9));outline-offset:1px}@media not (prefers-reduced-motion){._37ef12d4fb6d6131__point{transition-duration:.12s;transition-property:color,transform;transition-timing-function:linear}}"));
   document.head.appendChild(style);
 }

package/build/alignment-matrix-control/cell.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/alignment-matrix-control/cell.tsx", "../../src/alignment-matrix-control/style.module.scss"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * Internal dependencies\n */\nimport { Composite } from '../composite';\nimport Tooltip from '../tooltip';\nimport { VisuallyHidden } from '../visually-hidden';\n\n/**\n * Internal dependencies\n */\nimport { ALIGNMENT_LABEL } from './utils';\nimport styles from './style.module.scss';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Cell({\n  id,\n  value,\n  ...props\n}) {\n  return /*#__PURE__*/_jsx(Tooltip, {\n    text: ALIGNMENT_LABEL[value],\n    children: /*#__PURE__*/_jsxs(Composite.Item, {\n      id: id,\n      render: /*#__PURE__*/_jsx(\"span\", {\n        ...props,\n        className: clsx(styles.cell, props.className),\n        role: \"gridcell\"\n      }),\n      children: [/*#__PURE__*/_jsx(VisuallyHidden, {\n        children: value\n      }), /*#__PURE__*/_jsx(\"span\", {\n        className: styles.point,\n        role: \"presentation\"\n      })]\n    })\n  });\n}", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='4c2e860238']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"4c2e860238\");\n\tstyle.appendChild(document.createTextNode(\"._02e2af5803bf5bda__grid-container{aspect-ratio:1;border:1px solid #0000;border-radius:4px;box-sizing:border-box;cursor:pointer;direction:ltr;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);outline:none}.c421f8ed08c23077__grid-row{box-sizing:border-box;display:grid;grid-column:1/-1;grid-template-columns:repeat(3,1fr)}._3af769f755097fdb__cell{align-items:center;appearance:none;border:none;box-sizing:border-box;display:flex;justify-content:center;margin:0;outline:none;padding:0;position:relative}._37ef12d4fb6d6131__point{aspect-ratio:1;border:3px solid;box-sizing:border-box;color:var(--wp-components-color-gray-400,#ccc);contain:strict;display:block;margin:auto;width:6px}._3af769f755097fdb__cell[data-active-item] ._37ef12d4fb6d6131__point{color:var(--wp-components-color-foreground,#1e1e1e);transform:scale(1.6666666667)}._3af769f755097fdb__cell:not([data-active-item]):hover ._37ef12d4fb6d6131__point{color:var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9))}._3af769f755097fdb__cell[data-focus-visible] ._37ef12d4fb6d6131__point{outline:1px solid var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9));outline-offset:1px}@media not (prefers-reduced-motion){._37ef12d4fb6d6131__point{transition-duration:.12s;transition-property:color,transform;transition-timing-function:linear}}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"grid-container\":\"_02e2af5803bf5bda__grid-container\",\"grid-row\":\"c421f8ed08c23077__grid-row\",\"cell\":\"_3af769f755097fdb__cell\",\"point\":\"_37ef12d4fb6d6131__point\"};\n"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * Internal dependencies\n */\nimport { Composite } from '../composite';\nimport Tooltip from '../tooltip';\nimport { VisuallyHidden } from '../visually-hidden';\n\n/**\n * Internal dependencies\n */\nimport { ALIGNMENT_LABEL } from './utils';\nimport styles from './style.module.scss';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Cell({\n  id,\n  value,\n  ...props\n}) {\n  return /*#__PURE__*/_jsx(Tooltip, {\n    text: ALIGNMENT_LABEL[value],\n    children: /*#__PURE__*/_jsxs(Composite.Item, {\n      id: id,\n      render: /*#__PURE__*/_jsx(\"span\", {\n        ...props,\n        className: clsx(styles.cell, props.className),\n        role: \"gridcell\"\n      }),\n      children: [/*#__PURE__*/_jsx(VisuallyHidden, {\n        children: value\n      }), /*#__PURE__*/_jsx(\"span\", {\n        className: styles.point,\n        role: \"presentation\"\n      })]\n    })\n  });\n}", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='ae7603bd56']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"ae7603bd56\");\n\tstyle.appendChild(document.createTextNode(\"._02e2af5803bf5bda__grid-container{aspect-ratio:1;border:1px solid #0000;border-radius:4px;box-sizing:border-box;cursor:pointer;direction:ltr;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);outline:none}.c421f8ed08c23077__grid-row{box-sizing:border-box;display:grid;grid-column:1/-1;grid-template-columns:repeat(3,1fr)}._3af769f755097fdb__cell{align-items:center;appearance:none;border:none;box-sizing:border-box;display:flex;justify-content:center;margin:0;outline:none;padding:0;position:relative}._37ef12d4fb6d6131__point{aspect-ratio:1;border:3px solid;box-sizing:border-box;color:var(--wp-components-color-gray-400,#ccc);contain:strict;display:block;margin:auto;width:6px}._3af769f755097fdb__cell[data-active-item] ._37ef12d4fb6d6131__point{color:var(--wp-components-color-foreground,#1e1e1e);transform:scale(1.6666666667)}._3af769f755097fdb__cell:not([data-active-item]):hover ._37ef12d4fb6d6131__point{color:var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9))}._3af769f755097fdb__cell[data-focus-visible] ._37ef12d4fb6d6131__point{outline:1px solid var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9));outline-offset:1px}@media not (prefers-reduced-motion){._37ef12d4fb6d6131__point{transition-duration:.12s;transition-property:color,transform;transition-timing-function:linear}}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"grid-container\":\"_02e2af5803bf5bda__grid-container\",\"grid-row\":\"c421f8ed08c23077__grid-row\",\"cell\":\"_3af769f755097fdb__cell\",\"point\":\"_37ef12d4fb6d6131__point\"};\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAKjB,uBAA0B;AAC1B,qBAAoB;AACpB,6BAA+B;AAK/B,mBAAgC;;;ACfhC,IAAI,OAAO,aAAa,eAAe,QAAQ,IAAI,aAAa,UAAU,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AAC3I,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,60CAA60C,CAAC;AACx3C,WAAS,KAAK,YAAY,KAAK;AAChC;AACA,IAAO,uBAAQ,EAAC,kBAAiB,qCAAoC,YAAW,8BAA6B,QAAO,2BAA0B,SAAQ,2BAA0B;;;ADWhL,yBAA2C;AAC5B,SAAR,KAAsB;AAAA,EAC3B;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG;AACD,SAAoB,uCAAAA,KAAK,eAAAC,SAAS;AAAA,IAChC,MAAM,6BAAgB,KAAK;AAAA,IAC3B,UAAuB,uCAAAC,MAAM,2BAAU,MAAM;AAAA,MAC3C;AAAA,MACA,QAAqB,uCAAAF,KAAK,QAAQ;AAAA,QAChC,GAAG;AAAA,QACH,eAAW,YAAAG,SAAK,qBAAO,MAAM,MAAM,SAAS;AAAA,QAC5C,MAAM;AAAA,MACR,CAAC;AAAA,MACD,UAAU,CAAc,uCAAAH,KAAK,uCAAgB;AAAA,QAC3C,UAAU;AAAA,MACZ,CAAC,GAAgB,uCAAAA,KAAK,QAAQ;AAAA,QAC5B,WAAW,qBAAO;AAAA,QAClB,MAAM;AAAA,MACR,CAAC,CAAC;AAAA,IACJ,CAAC;AAAA,EACH,CAAC;AACH;",
   "names": ["_jsx", "Tooltip", "_jsxs", "clsx"]
 }

package/build/alignment-matrix-control/index.cjs

@@ -44,9 +44,9 @@ var import_icon = __toESM(require("./icon.cjs"));
 var import_utils = require("./utils.cjs");
 
 // packages/components/src/alignment-matrix-control/style.module.scss
-if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='4c2e860238']")) {
+if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='ae7603bd56']")) {
   const style = document.createElement("style");
-  style.setAttribute("data-wp-hash", "4c2e860238");
+  style.setAttribute("data-wp-hash", "ae7603bd56");
   style.appendChild(document.createTextNode("._02e2af5803bf5bda__grid-container{aspect-ratio:1;border:1px solid #0000;border-radius:4px;box-sizing:border-box;cursor:pointer;direction:ltr;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);outline:none}.c421f8ed08c23077__grid-row{box-sizing:border-box;display:grid;grid-column:1/-1;grid-template-columns:repeat(3,1fr)}._3af769f755097fdb__cell{align-items:center;appearance:none;border:none;box-sizing:border-box;display:flex;justify-content:center;margin:0;outline:none;padding:0;position:relative}._37ef12d4fb6d6131__point{aspect-ratio:1;border:3px solid;box-sizing:border-box;color:var(--wp-components-color-gray-400,#ccc);contain:strict;display:block;margin:auto;width:6px}._3af769f755097fdb__cell[data-active-item] ._37ef12d4fb6d6131__point{color:var(--wp-components-color-foreground,#1e1e1e);transform:scale(1.6666666667)}._3af769f755097fdb__cell:not([data-active-item]):hover ._37ef12d4fb6d6131__point{color:var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9))}._3af769f755097fdb__cell[data-focus-visible] ._37ef12d4fb6d6131__point{outline:1px solid var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9));outline-offset:1px}@media not (prefers-reduced-motion){._37ef12d4fb6d6131__point{transition-duration:.12s;transition-property:color,transform;transition-timing-function:linear}}"));
   document.head.appendChild(style);
 }

package/build/alignment-matrix-control/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/alignment-matrix-control/index.tsx", "../../src/alignment-matrix-control/style.module.scss"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __, isRTL } from '@wordpress/i18n';\nimport { useInstanceId } from '@wordpress/compose';\nimport { useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Cell from './cell';\nimport { Composite } from '../composite';\nimport AlignmentMatrixControlIcon from './icon';\nimport { GRID, getItemId, getItemValue } from './utils';\nimport styles from './style.module.scss';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnforwardedAlignmentMatrixControl({\n  className,\n  id,\n  label = __('Alignment Matrix Control'),\n  defaultValue = 'center center',\n  value,\n  onChange,\n  width = 92,\n  ...props\n}) {\n  const baseId = useInstanceId(UnforwardedAlignmentMatrixControl, 'alignment-matrix-control', id);\n  const setActiveId = useCallback(nextActiveId => {\n    const nextValue = getItemValue(baseId, nextActiveId);\n    if (nextValue) {\n      onChange?.(nextValue);\n    }\n  }, [baseId, onChange]);\n  const classes = clsx('component-alignment-matrix-control', styles['grid-container'], className);\n  return /*#__PURE__*/_jsx(Composite, {\n    defaultActiveId: getItemId(baseId, defaultValue),\n    activeId: getItemId(baseId, value),\n    setActiveId: setActiveId,\n    rtl: isRTL(),\n    render: /*#__PURE__*/_jsx(\"div\", {\n      ...props,\n      className: classes,\n      \"aria-label\": label,\n      id: baseId,\n      role: \"grid\",\n      style: {\n        width: `${width}px`\n      }\n    }),\n    children: GRID.map((cells, index) => /*#__PURE__*/_jsx(Composite.Row, {\n      render: /*#__PURE__*/_jsx(\"div\", {\n        className: styles['grid-row'],\n        role: \"row\"\n      }),\n      children: cells.map(cell => /*#__PURE__*/_jsx(Cell, {\n        id: getItemId(baseId, cell),\n        value: cell\n      }, cell))\n    }, index))\n  });\n}\n\n/**\n * AlignmentMatrixControl components enable adjustments to horizontal and vertical alignments for UI.\n *\n * ```jsx\n * import { AlignmentMatrixControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const Example = () => {\n * \tconst [ alignment, setAlignment ] = useState( 'center center' );\n *\n * \treturn (\n * \t\t<AlignmentMatrixControl\n * \t\t\tvalue={ alignment }\n * \t\t\tonChange={ setAlignment }\n * \t\t/>\n * \t);\n * };\n * ```\n */\nexport const AlignmentMatrixControl = Object.assign(UnforwardedAlignmentMatrixControl, {\n  /**\n   * Render an alignment matrix as an icon.\n   *\n   * ```jsx\n   * import { AlignmentMatrixControl } from '@wordpress/components';\n   *\n   * <Icon icon={<AlignmentMatrixControl.Icon value=\"top left\" />} />\n   * ```\n   */\n  Icon: Object.assign(AlignmentMatrixControlIcon, {\n    displayName: 'AlignmentMatrixControl.Icon'\n  })\n});\nexport default AlignmentMatrixControl;", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='4c2e860238']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"4c2e860238\");\n\tstyle.appendChild(document.createTextNode(\"._02e2af5803bf5bda__grid-container{aspect-ratio:1;border:1px solid #0000;border-radius:4px;box-sizing:border-box;cursor:pointer;direction:ltr;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);outline:none}.c421f8ed08c23077__grid-row{box-sizing:border-box;display:grid;grid-column:1/-1;grid-template-columns:repeat(3,1fr)}._3af769f755097fdb__cell{align-items:center;appearance:none;border:none;box-sizing:border-box;display:flex;justify-content:center;margin:0;outline:none;padding:0;position:relative}._37ef12d4fb6d6131__point{aspect-ratio:1;border:3px solid;box-sizing:border-box;color:var(--wp-components-color-gray-400,#ccc);contain:strict;display:block;margin:auto;width:6px}._3af769f755097fdb__cell[data-active-item] ._37ef12d4fb6d6131__point{color:var(--wp-components-color-foreground,#1e1e1e);transform:scale(1.6666666667)}._3af769f755097fdb__cell:not([data-active-item]):hover ._37ef12d4fb6d6131__point{color:var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9))}._3af769f755097fdb__cell[data-focus-visible] ._37ef12d4fb6d6131__point{outline:1px solid var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9));outline-offset:1px}@media not (prefers-reduced-motion){._37ef12d4fb6d6131__point{transition-duration:.12s;transition-property:color,transform;transition-timing-function:linear}}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"grid-container\":\"_02e2af5803bf5bda__grid-container\",\"grid-row\":\"c421f8ed08c23077__grid-row\",\"cell\":\"_3af769f755097fdb__cell\",\"point\":\"_37ef12d4fb6d6131__point\"};\n"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __, isRTL } from '@wordpress/i18n';\nimport { useInstanceId } from '@wordpress/compose';\nimport { useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Cell from './cell';\nimport { Composite } from '../composite';\nimport AlignmentMatrixControlIcon from './icon';\nimport { GRID, getItemId, getItemValue } from './utils';\nimport styles from './style.module.scss';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnforwardedAlignmentMatrixControl({\n  className,\n  id,\n  label = __('Alignment Matrix Control'),\n  defaultValue = 'center center',\n  value,\n  onChange,\n  width = 92,\n  ...props\n}) {\n  const baseId = useInstanceId(UnforwardedAlignmentMatrixControl, 'alignment-matrix-control', id);\n  const setActiveId = useCallback(nextActiveId => {\n    const nextValue = getItemValue(baseId, nextActiveId);\n    if (nextValue) {\n      onChange?.(nextValue);\n    }\n  }, [baseId, onChange]);\n  const classes = clsx('component-alignment-matrix-control', styles['grid-container'], className);\n  return /*#__PURE__*/_jsx(Composite, {\n    defaultActiveId: getItemId(baseId, defaultValue),\n    activeId: getItemId(baseId, value),\n    setActiveId: setActiveId,\n    rtl: isRTL(),\n    render: /*#__PURE__*/_jsx(\"div\", {\n      ...props,\n      className: classes,\n      \"aria-label\": label,\n      id: baseId,\n      role: \"grid\",\n      style: {\n        width: `${width}px`\n      }\n    }),\n    children: GRID.map((cells, index) => /*#__PURE__*/_jsx(Composite.Row, {\n      render: /*#__PURE__*/_jsx(\"div\", {\n        className: styles['grid-row'],\n        role: \"row\"\n      }),\n      children: cells.map(cell => /*#__PURE__*/_jsx(Cell, {\n        id: getItemId(baseId, cell),\n        value: cell\n      }, cell))\n    }, index))\n  });\n}\n\n/**\n * AlignmentMatrixControl components enable adjustments to horizontal and vertical alignments for UI.\n *\n * ```jsx\n * import { AlignmentMatrixControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const Example = () => {\n * \tconst [ alignment, setAlignment ] = useState( 'center center' );\n *\n * \treturn (\n * \t\t<AlignmentMatrixControl\n * \t\t\tvalue={ alignment }\n * \t\t\tonChange={ setAlignment }\n * \t\t/>\n * \t);\n * };\n * ```\n */\nexport const AlignmentMatrixControl = Object.assign(UnforwardedAlignmentMatrixControl, {\n  /**\n   * Render an alignment matrix as an icon.\n   *\n   * ```jsx\n   * import { AlignmentMatrixControl } from '@wordpress/components';\n   *\n   * <Icon icon={<AlignmentMatrixControl.Icon value=\"top left\" />} />\n   * ```\n   */\n  Icon: Object.assign(AlignmentMatrixControlIcon, {\n    displayName: 'AlignmentMatrixControl.Icon'\n  })\n});\nexport default AlignmentMatrixControl;", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='ae7603bd56']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"ae7603bd56\");\n\tstyle.appendChild(document.createTextNode(\"._02e2af5803bf5bda__grid-container{aspect-ratio:1;border:1px solid #0000;border-radius:4px;box-sizing:border-box;cursor:pointer;direction:ltr;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);outline:none}.c421f8ed08c23077__grid-row{box-sizing:border-box;display:grid;grid-column:1/-1;grid-template-columns:repeat(3,1fr)}._3af769f755097fdb__cell{align-items:center;appearance:none;border:none;box-sizing:border-box;display:flex;justify-content:center;margin:0;outline:none;padding:0;position:relative}._37ef12d4fb6d6131__point{aspect-ratio:1;border:3px solid;box-sizing:border-box;color:var(--wp-components-color-gray-400,#ccc);contain:strict;display:block;margin:auto;width:6px}._3af769f755097fdb__cell[data-active-item] ._37ef12d4fb6d6131__point{color:var(--wp-components-color-foreground,#1e1e1e);transform:scale(1.6666666667)}._3af769f755097fdb__cell:not([data-active-item]):hover ._37ef12d4fb6d6131__point{color:var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9))}._3af769f755097fdb__cell[data-focus-visible] ._37ef12d4fb6d6131__point{outline:1px solid var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9));outline-offset:1px}@media not (prefers-reduced-motion){._37ef12d4fb6d6131__point{transition-duration:.12s;transition-property:color,transform;transition-timing-function:linear}}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"grid-container\":\"_02e2af5803bf5bda__grid-container\",\"grid-row\":\"c421f8ed08c23077__grid-row\",\"cell\":\"_3af769f755097fdb__cell\",\"point\":\"_37ef12d4fb6d6131__point\"};\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAKjB,kBAA0B;AAC1B,qBAA8B;AAC9B,qBAA4B;AAK5B,kBAAiB;AACjB,uBAA0B;AAC1B,kBAAuC;AACvC,mBAA8C;;;AClB9C,IAAI,OAAO,aAAa,eAAe,QAAQ,IAAI,aAAa,UAAU,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AAC3I,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,60CAA60C,CAAC;AACx3C,WAAS,KAAK,YAAY,KAAK;AAChC;AACA,IAAO,uBAAQ,EAAC,kBAAiB,qCAAoC,YAAW,8BAA6B,QAAO,2BAA0B,SAAQ,2BAA0B;;;ADchL,yBAA4B;AAC5B,SAAS,kCAAkC;AAAA,EACzC;AAAA,EACA;AAAA,EACA,YAAQ,gBAAG,0BAA0B;AAAA,EACrC,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,GAAG;AACL,GAAG;AACD,QAAM,aAAS,8BAAc,mCAAmC,4BAA4B,EAAE;AAC9F,QAAM,kBAAc,4BAAY,kBAAgB;AAC9C,UAAM,gBAAY,2BAAa,QAAQ,YAAY;AACnD,QAAI,WAAW;AACb,iBAAW,SAAS;AAAA,IACtB;AAAA,EACF,GAAG,CAAC,QAAQ,QAAQ,CAAC;AACrB,QAAM,cAAU,YAAAA,SAAK,sCAAsC,qBAAO,gBAAgB,GAAG,SAAS;AAC9F,SAAoB,uCAAAC,KAAK,4BAAW;AAAA,IAClC,qBAAiB,wBAAU,QAAQ,YAAY;AAAA,IAC/C,cAAU,wBAAU,QAAQ,KAAK;AAAA,IACjC;AAAA,IACA,SAAK,mBAAM;AAAA,IACX,QAAqB,uCAAAA,KAAK,OAAO;AAAA,MAC/B,GAAG;AAAA,MACH,WAAW;AAAA,MACX,cAAc;AAAA,MACd,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,OAAO;AAAA,QACL,OAAO,GAAG,KAAK;AAAA,MACjB;AAAA,IACF,CAAC;AAAA,IACD,UAAU,kBAAK,IAAI,CAAC,OAAO,UAAuB,uCAAAA,KAAK,2BAAU,KAAK;AAAA,MACpE,QAAqB,uCAAAA,KAAK,OAAO;AAAA,QAC/B,WAAW,qBAAO,UAAU;AAAA,QAC5B,MAAM;AAAA,MACR,CAAC;AAAA,MACD,UAAU,MAAM,IAAI,UAAqB,uCAAAA,KAAK,YAAAC,SAAM;AAAA,QAClD,QAAI,wBAAU,QAAQ,IAAI;AAAA,QAC1B,OAAO;AAAA,MACT,GAAG,IAAI,CAAC;AAAA,IACV,GAAG,KAAK,CAAC;AAAA,EACX,CAAC;AACH;AAqBO,IAAM,yBAAyB,OAAO,OAAO,mCAAmC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUrF,MAAM,OAAO,OAAO,YAAAC,SAA4B;AAAA,IAC9C,aAAa;AAAA,EACf,CAAC;AACH,CAAC;AACD,IAAO,mCAAQ;",
   "names": ["clsx", "_jsx", "Cell", "AlignmentMatrixControlIcon"]
 }

package/build/angle-picker-control/angle-circle.cjs

@@ -38,9 +38,9 @@ var import_element = require("@wordpress/element");
 var import_compose = require("@wordpress/compose");
 
 // packages/components/src/angle-picker-control/style.module.scss
-if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='f35cc94692']")) {
+if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='e91ec3f005']")) {
   const style = document.createElement("style");
-  style.setAttribute("data-wp-hash", "f35cc94692");
+  style.setAttribute("data-wp-hash", "e91ec3f005");
   style.appendChild(document.createTextNode("._8f57b8d483c51fbe__circle-root{border:1px solid var(--wp-components-color-gray-600,#949494);border-radius:50%;box-sizing:border-box;cursor:grab;height:32px;overflow:hidden;width:32px}._8f57b8d483c51fbe__circle-root:active{cursor:grabbing}.b1bae984ac10fcc3__circle-indicator-wrapper{box-sizing:border-box;height:100%;position:relative;width:100%}.b1bae984ac10fcc3__circle-indicator-wrapper:focus-visible{outline:none}._6d2fe0a2cbb31bf0__circle-indicator{background:var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9));border-radius:50%;box-sizing:border-box;display:block;height:6px;left:50%;position:absolute;top:4px;transform:translateX(-50%);width:6px}"));
   document.head.appendChild(style);
 }

package/build/angle-picker-control/angle-circle.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/angle-picker-control/angle-circle.tsx", "../../src/angle-picker-control/style.module.scss"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useEffect, useRef } from '@wordpress/element';\nimport { __experimentalUseDragging as useDragging } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.module.scss';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction AngleCircle({\n  value,\n  onChange,\n  className,\n  ...props\n}) {\n  const angleCircleRef = useRef(null);\n  const angleCircleCenterRef = useRef(undefined);\n  const previousCursorValueRef = useRef(undefined);\n  const setAngleCircleCenter = () => {\n    if (angleCircleRef.current === null) {\n      return;\n    }\n    const rect = angleCircleRef.current.getBoundingClientRect();\n    angleCircleCenterRef.current = {\n      x: rect.x + rect.width / 2,\n      y: rect.y + rect.height / 2\n    };\n  };\n  const changeAngleToPosition = event => {\n    if (event === undefined) {\n      return;\n    }\n\n    // Prevent (drag) mouse events from selecting and accidentally\n    // triggering actions from other elements.\n    event.preventDefault();\n    // Input control needs to lose focus and by preventDefault above, it doesn't.\n    event.target?.focus();\n    if (angleCircleCenterRef.current !== undefined && onChange !== undefined) {\n      const {\n        x: centerX,\n        y: centerY\n      } = angleCircleCenterRef.current;\n      onChange(getAngle(centerX, centerY, event.clientX, event.clientY));\n    }\n  };\n  const {\n    startDrag,\n    isDragging\n  } = useDragging({\n    onDragStart: event => {\n      setAngleCircleCenter();\n      changeAngleToPosition(event);\n    },\n    onDragMove: changeAngleToPosition,\n    onDragEnd: changeAngleToPosition\n  });\n  useEffect(() => {\n    if (isDragging) {\n      if (previousCursorValueRef.current === undefined) {\n        previousCursorValueRef.current = document.body.style.cursor;\n      }\n      document.body.style.cursor = 'grabbing';\n    } else {\n      document.body.style.cursor = previousCursorValueRef.current || '';\n      previousCursorValueRef.current = undefined;\n    }\n  }, [isDragging]);\n  return (\n    /*#__PURE__*/\n    // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n    _jsx(\"div\", {\n      ref: angleCircleRef,\n      onMouseDown: startDrag,\n      className: clsx('components-angle-picker-control__angle-circle', styles['circle-root'], className),\n      ...props,\n      children: /*#__PURE__*/_jsx(\"div\", {\n        style: value ? {\n          transform: `rotate(${value}deg)`\n        } : undefined,\n        className: clsx('components-angle-picker-control__angle-circle-indicator-wrapper', styles['circle-indicator-wrapper']),\n        tabIndex: -1,\n        children: /*#__PURE__*/_jsx(\"div\", {\n          className: clsx('components-angle-picker-control__angle-circle-indicator', styles['circle-indicator'])\n        })\n      })\n    })\n  );\n}\nfunction getAngle(centerX, centerY, pointX, pointY) {\n  const y = pointY - centerY;\n  const x = pointX - centerX;\n  const angleInRadians = Math.atan2(y, x);\n  const angleInDeg = Math.round(angleInRadians * (180 / Math.PI)) + 90;\n  if (angleInDeg < 0) {\n    return 360 + angleInDeg;\n  }\n  return angleInDeg;\n}\nexport default AngleCircle;", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='f35cc94692']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"f35cc94692\");\n\tstyle.appendChild(document.createTextNode(\"._8f57b8d483c51fbe__circle-root{border:1px solid var(--wp-components-color-gray-600,#949494);border-radius:50%;box-sizing:border-box;cursor:grab;height:32px;overflow:hidden;width:32px}._8f57b8d483c51fbe__circle-root:active{cursor:grabbing}.b1bae984ac10fcc3__circle-indicator-wrapper{box-sizing:border-box;height:100%;position:relative;width:100%}.b1bae984ac10fcc3__circle-indicator-wrapper:focus-visible{outline:none}._6d2fe0a2cbb31bf0__circle-indicator{background:var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9));border-radius:50%;box-sizing:border-box;display:block;height:6px;left:50%;position:absolute;top:4px;transform:translateX(-50%);width:6px}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"circle-root\":\"_8f57b8d483c51fbe__circle-root\",\"circle-indicator-wrapper\":\"b1bae984ac10fcc3__circle-indicator-wrapper\",\"circle-indicator\":\"_6d2fe0a2cbb31bf0__circle-indicator\"};\n"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useEffect, useRef } from '@wordpress/element';\nimport { __experimentalUseDragging as useDragging } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.module.scss';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction AngleCircle({\n  value,\n  onChange,\n  className,\n  ...props\n}) {\n  const angleCircleRef = useRef(null);\n  const angleCircleCenterRef = useRef(undefined);\n  const previousCursorValueRef = useRef(undefined);\n  const setAngleCircleCenter = () => {\n    if (angleCircleRef.current === null) {\n      return;\n    }\n    const rect = angleCircleRef.current.getBoundingClientRect();\n    angleCircleCenterRef.current = {\n      x: rect.x + rect.width / 2,\n      y: rect.y + rect.height / 2\n    };\n  };\n  const changeAngleToPosition = event => {\n    if (event === undefined) {\n      return;\n    }\n\n    // Prevent (drag) mouse events from selecting and accidentally\n    // triggering actions from other elements.\n    event.preventDefault();\n    // Input control needs to lose focus and by preventDefault above, it doesn't.\n    event.target?.focus();\n    if (angleCircleCenterRef.current !== undefined && onChange !== undefined) {\n      const {\n        x: centerX,\n        y: centerY\n      } = angleCircleCenterRef.current;\n      onChange(getAngle(centerX, centerY, event.clientX, event.clientY));\n    }\n  };\n  const {\n    startDrag,\n    isDragging\n  } = useDragging({\n    onDragStart: event => {\n      setAngleCircleCenter();\n      changeAngleToPosition(event);\n    },\n    onDragMove: changeAngleToPosition,\n    onDragEnd: changeAngleToPosition\n  });\n  useEffect(() => {\n    if (isDragging) {\n      if (previousCursorValueRef.current === undefined) {\n        previousCursorValueRef.current = document.body.style.cursor;\n      }\n      document.body.style.cursor = 'grabbing';\n    } else {\n      document.body.style.cursor = previousCursorValueRef.current || '';\n      previousCursorValueRef.current = undefined;\n    }\n  }, [isDragging]);\n  return (\n    /*#__PURE__*/\n    // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n    _jsx(\"div\", {\n      ref: angleCircleRef,\n      onMouseDown: startDrag,\n      className: clsx('components-angle-picker-control__angle-circle', styles['circle-root'], className),\n      ...props,\n      children: /*#__PURE__*/_jsx(\"div\", {\n        style: value ? {\n          transform: `rotate(${value}deg)`\n        } : undefined,\n        className: clsx('components-angle-picker-control__angle-circle-indicator-wrapper', styles['circle-indicator-wrapper']),\n        tabIndex: -1,\n        children: /*#__PURE__*/_jsx(\"div\", {\n          className: clsx('components-angle-picker-control__angle-circle-indicator', styles['circle-indicator'])\n        })\n      })\n    })\n  );\n}\nfunction getAngle(centerX, centerY, pointX, pointY) {\n  const y = pointY - centerY;\n  const x = pointX - centerX;\n  const angleInRadians = Math.atan2(y, x);\n  const angleInDeg = Math.round(angleInRadians * (180 / Math.PI)) + 90;\n  if (angleInDeg < 0) {\n    return 360 + angleInDeg;\n  }\n  return angleInDeg;\n}\nexport default AngleCircle;", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='e91ec3f005']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"e91ec3f005\");\n\tstyle.appendChild(document.createTextNode(\"._8f57b8d483c51fbe__circle-root{border:1px solid var(--wp-components-color-gray-600,#949494);border-radius:50%;box-sizing:border-box;cursor:grab;height:32px;overflow:hidden;width:32px}._8f57b8d483c51fbe__circle-root:active{cursor:grabbing}.b1bae984ac10fcc3__circle-indicator-wrapper{box-sizing:border-box;height:100%;position:relative;width:100%}.b1bae984ac10fcc3__circle-indicator-wrapper:focus-visible{outline:none}._6d2fe0a2cbb31bf0__circle-indicator{background:var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9));border-radius:50%;box-sizing:border-box;display:block;height:6px;left:50%;position:absolute;top:4px;transform:translateX(-50%);width:6px}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"circle-root\":\"_8f57b8d483c51fbe__circle-root\",\"circle-indicator-wrapper\":\"b1bae984ac10fcc3__circle-indicator-wrapper\",\"circle-indicator\":\"_6d2fe0a2cbb31bf0__circle-indicator\"};\n"],
   "mappings": "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",
   "names": ["useDragging", "_jsx", "clsx"]
 }

package/build/combobox-control/index.cjs

@@ -244,7 +244,11 @@ function ComboboxControl(props) {
               onClick,
               isExpanded,
               selectedSuggestionIndex: getIndexOfMatchingSuggestion(selectedSuggestion, matchingSuggestions),
-              onChange: onInputChange
+              onChange: onInputChange,
+              "aria-describedby": help ? (
+                // TODO: Refactor `TokenInput` to not use hardcoded IDs.
+                `components-form-token-input-${instanceId}__help`
+              ) : void 0
             })
           }), isLoading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_spinner.default, {}), allowReset && Boolean(value) && !isExpanded && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button.default, {
             size: "small",

package/build/combobox-control/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/combobox-control/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __, _n, sprintf } from '@wordpress/i18n';\nimport { Component, useState, useMemo, useRef, useEffect } from '@wordpress/element';\nimport { useInstanceId } from '@wordpress/compose';\nimport { speak } from '@wordpress/a11y';\nimport { closeSmall } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { InputWrapperFlex } from './styles';\nimport TokenInput from '../form-token-field/token-input';\nimport SuggestionsList from '../form-token-field/suggestions-list';\nimport BaseControl from '../base-control';\nimport Button from '../button';\nimport { FlexBlock } from '../flex';\nimport withFocusOutside from '../higher-order/with-focus-outside';\nimport { useControlledValue } from '../utils/hooks';\nimport { normalizeTextString } from '../utils/strings';\nimport { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';\nimport { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events';\nimport { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';\nimport Spinner from '../spinner';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst noop = () => {};\nconst DetectOutside = withFocusOutside(class DetectOutsideComponent extends Component {\n  handleFocusOutside(event) {\n    this.props.onFocusOutside(event);\n  }\n  render() {\n    return this.props.children;\n  }\n});\nconst getIndexOfMatchingSuggestion = (selectedSuggestion, matchingSuggestions) => selectedSuggestion === null ? -1 : matchingSuggestions.indexOf(selectedSuggestion);\n\n/**\n * `ComboboxControl` is an enhanced version of a [`SelectControl`](../select-control/README.md) with the addition of\n * being able to search for options using a search input.\n *\n * ```jsx\n * import { ComboboxControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const options = [\n * \t{\n * \t\tvalue: 'small',\n * \t\tlabel: 'Small',\n * \t},\n * \t{\n * \t\tvalue: 'normal',\n * \t\tlabel: 'Normal',\n * \t\tdisabled: true,\n * \t},\n * \t{\n * \t\tvalue: 'large',\n * \t\tlabel: 'Large',\n * \t\tdisabled: false,\n * \t},\n * ];\n *\n * function MyComboboxControl() {\n * \tconst [ fontSize, setFontSize ] = useState();\n * \tconst [ filteredOptions, setFilteredOptions ] = useState( options );\n * \treturn (\n * \t\t<ComboboxControl\n * \t\t\t__next40pxDefaultSize\n * \t\t\tlabel=\"Font Size\"\n * \t\t\tvalue={ fontSize }\n * \t\t\tonChange={ setFontSize }\n * \t\t\toptions={ filteredOptions }\n * \t\t\tonFilterValueChange={ ( inputValue ) =>\n * \t\t\t\tsetFilteredOptions(\n * \t\t\t\t\toptions.filter( ( option ) =>\n * \t\t\t\t\t\toption.label\n * \t\t\t\t\t\t\t.toLowerCase()\n * \t\t\t\t\t\t\t.startsWith( inputValue.toLowerCase() )\n * \t\t\t\t\t)\n * \t\t\t\t)\n * \t\t\t}\n * \t\t/>\n * \t);\n * }\n * ```\n */\nfunction ComboboxControl(props) {\n  const {\n    __next40pxDefaultSize = false,\n    value: valueProp,\n    label,\n    options,\n    onChange: onChangeProp,\n    onFilterValueChange = noop,\n    hideLabelFromVision,\n    help,\n    allowReset = true,\n    className,\n    isLoading = false,\n    messages = {\n      selected: __('Item selected.')\n    },\n    __experimentalRenderItem,\n    expandOnFocus = true,\n    placeholder\n  } = useDeprecated36pxDefaultSizeProp(props);\n  const [value, setValue] = useControlledValue({\n    value: valueProp,\n    onChange: onChangeProp\n  });\n  const currentOption = options.find(option => option.value === value);\n  const currentLabel = currentOption?.label ?? '';\n  // Use a custom prefix when generating the `instanceId` to avoid having\n  // duplicate input IDs when rendering this component and `FormTokenField`\n  // in the same page (see https://github.com/WordPress/gutenberg/issues/42112).\n  const instanceId = useInstanceId(ComboboxControl, 'combobox-control');\n  const [selectedSuggestion, setSelectedSuggestion] = useState(currentOption || null);\n  const [isExpanded, setIsExpanded] = useState(false);\n  const [inputHasFocus, setInputHasFocus] = useState(false);\n  const [inputValue, setInputValue] = useState('');\n  const inputContainer = useRef(null);\n  const matchingSuggestions = useMemo(() => {\n    const startsWithMatch = [];\n    const containsMatch = [];\n    const match = normalizeTextString(inputValue);\n    options.forEach(option => {\n      const index = normalizeTextString(option.label).indexOf(match);\n      if (index === 0) {\n        startsWithMatch.push(option);\n      } else if (index > 0) {\n        containsMatch.push(option);\n      }\n    });\n    return startsWithMatch.concat(containsMatch);\n  }, [inputValue, options]);\n  const onSuggestionSelected = newSelectedSuggestion => {\n    if (newSelectedSuggestion.disabled) {\n      return;\n    }\n    setValue(newSelectedSuggestion.value);\n    speak(messages.selected, 'assertive');\n    setSelectedSuggestion(newSelectedSuggestion);\n    setInputValue('');\n    setIsExpanded(false);\n  };\n  const handleArrowNavigation = (offset = 1) => {\n    const index = getIndexOfMatchingSuggestion(selectedSuggestion, matchingSuggestions);\n    let nextIndex = index + offset;\n    if (nextIndex < 0) {\n      nextIndex = matchingSuggestions.length - 1;\n    } else if (nextIndex >= matchingSuggestions.length) {\n      nextIndex = 0;\n    }\n    setSelectedSuggestion(matchingSuggestions[nextIndex]);\n    setIsExpanded(true);\n  };\n  const onKeyDown = withIgnoreIMEEvents(event => {\n    let preventDefault = false;\n    if (event.defaultPrevented) {\n      return;\n    }\n    switch (event.code) {\n      case 'Enter':\n        if (selectedSuggestion) {\n          onSuggestionSelected(selectedSuggestion);\n          preventDefault = true;\n        }\n        break;\n      case 'ArrowUp':\n        handleArrowNavigation(-1);\n        preventDefault = true;\n        break;\n      case 'ArrowDown':\n        handleArrowNavigation(1);\n        preventDefault = true;\n        break;\n      case 'Escape':\n        setIsExpanded(false);\n        setSelectedSuggestion(null);\n        preventDefault = true;\n        break;\n      default:\n        break;\n    }\n    if (preventDefault) {\n      event.preventDefault();\n    }\n  });\n  const onBlur = () => {\n    setInputHasFocus(false);\n  };\n  const onFocus = () => {\n    setInputHasFocus(true);\n    if (expandOnFocus) {\n      setIsExpanded(true);\n    }\n    onFilterValueChange('');\n    setInputValue('');\n  };\n  const onClick = () => {\n    setIsExpanded(true);\n  };\n  const onFocusOutside = () => {\n    setIsExpanded(false);\n  };\n  const onInputChange = event => {\n    const text = event.value;\n    setInputValue(text);\n    onFilterValueChange(text);\n    if (inputHasFocus) {\n      setIsExpanded(true);\n    }\n  };\n  const handleOnReset = () => {\n    setValue(null);\n    inputContainer.current?.focus();\n  };\n\n  // Stop propagation of the keydown event when pressing Enter on the Reset\n  // button to prevent calling the onKeydown callback on the container div\n  // element which actually sets the selected suggestion.\n  const handleResetStopPropagation = event => {\n    event.stopPropagation();\n  };\n\n  // Update current selections when the filter input changes.\n  useEffect(() => {\n    const hasMatchingSuggestions = matchingSuggestions.length > 0;\n    const hasSelectedMatchingSuggestions = getIndexOfMatchingSuggestion(selectedSuggestion, matchingSuggestions) > 0;\n    if (hasMatchingSuggestions && !hasSelectedMatchingSuggestions) {\n      // If the current selection isn't present in the list of suggestions, then automatically select the first item from the list of suggestions.\n      setSelectedSuggestion(matchingSuggestions[0]);\n    }\n  }, [matchingSuggestions, selectedSuggestion]);\n\n  // Announcements.\n  useEffect(() => {\n    const hasMatchingSuggestions = matchingSuggestions.length > 0;\n    if (isExpanded) {\n      const message = hasMatchingSuggestions ? sprintf(/* translators: %d: number of results. */\n      _n('%d result found, use up and down arrow keys to navigate.', '%d results found, use up and down arrow keys to navigate.', matchingSuggestions.length), matchingSuggestions.length) : __('No results.');\n      speak(message, 'polite');\n    }\n  }, [matchingSuggestions, isExpanded]);\n  maybeWarnDeprecated36pxSize({\n    componentName: 'ComboboxControl',\n    __next40pxDefaultSize,\n    size: undefined\n  });\n\n  // Disable reason: There is no appropriate role which describes the\n  // input container intended accessible usability.\n  // TODO: Refactor click detection to use blur to stop propagation.\n  /* eslint-disable jsx-a11y/no-static-element-interactions */\n  return /*#__PURE__*/_jsx(DetectOutside, {\n    onFocusOutside: onFocusOutside,\n    children: /*#__PURE__*/_jsx(BaseControl, {\n      className: clsx(className, 'components-combobox-control'),\n      label: label,\n      id: `components-form-token-input-${instanceId}`,\n      hideLabelFromVision: hideLabelFromVision,\n      help: help,\n      children: /*#__PURE__*/_jsxs(\"div\", {\n        className: \"components-combobox-control__suggestions-container\",\n        tabIndex: -1,\n        onKeyDown: onKeyDown,\n        children: [/*#__PURE__*/_jsxs(InputWrapperFlex, {\n          __next40pxDefaultSize: __next40pxDefaultSize,\n          children: [/*#__PURE__*/_jsx(FlexBlock, {\n            children: /*#__PURE__*/_jsx(TokenInput, {\n              className: \"components-combobox-control__input\",\n              instanceId: instanceId,\n              ref: inputContainer,\n              placeholder: placeholder,\n              value: isExpanded ? inputValue : currentLabel,\n              onFocus: onFocus,\n              onBlur: onBlur,\n              onClick: onClick,\n              isExpanded: isExpanded,\n              selectedSuggestionIndex: getIndexOfMatchingSuggestion(selectedSuggestion, matchingSuggestions),\n              onChange: onInputChange\n            })\n          }), isLoading && /*#__PURE__*/_jsx(Spinner, {}), allowReset && Boolean(value) && !isExpanded && /*#__PURE__*/_jsx(Button, {\n            size: \"small\",\n            icon: closeSmall,\n            onClick: handleOnReset,\n            onKeyDown: handleResetStopPropagation,\n            label: __('Reset')\n          })]\n        }), isExpanded && !isLoading && /*#__PURE__*/_jsx(SuggestionsList, {\n          instanceId: instanceId\n          // The empty string for `value` here is not actually used, but is\n          // just a quick way to satisfy the TypeScript requirements of SuggestionsList.\n          // See: https://github.com/WordPress/gutenberg/pull/47581/files#r1091089330\n          ,\n          match: {\n            label: inputValue,\n            value: ''\n          },\n          displayTransform: suggestion => suggestion.label,\n          suggestions: matchingSuggestions,\n          selectedIndex: getIndexOfMatchingSuggestion(selectedSuggestion, matchingSuggestions),\n          onHover: setSelectedSuggestion,\n          onSelect: onSuggestionSelected,\n          scrollIntoView: true,\n          __experimentalRenderItem: __experimentalRenderItem\n        })]\n      })\n    })\n  });\n  /* eslint-enable jsx-a11y/no-static-element-interactions */\n}\nexport default ComboboxControl;"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __, _n, sprintf } from '@wordpress/i18n';\nimport { Component, useState, useMemo, useRef, useEffect } from '@wordpress/element';\nimport { useInstanceId } from '@wordpress/compose';\nimport { speak } from '@wordpress/a11y';\nimport { closeSmall } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { InputWrapperFlex } from './styles';\nimport TokenInput from '../form-token-field/token-input';\nimport SuggestionsList from '../form-token-field/suggestions-list';\nimport BaseControl from '../base-control';\nimport Button from '../button';\nimport { FlexBlock } from '../flex';\nimport withFocusOutside from '../higher-order/with-focus-outside';\nimport { useControlledValue } from '../utils/hooks';\nimport { normalizeTextString } from '../utils/strings';\nimport { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';\nimport { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events';\nimport { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';\nimport Spinner from '../spinner';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst noop = () => {};\nconst DetectOutside = withFocusOutside(class DetectOutsideComponent extends Component {\n  handleFocusOutside(event) {\n    this.props.onFocusOutside(event);\n  }\n  render() {\n    return this.props.children;\n  }\n});\nconst getIndexOfMatchingSuggestion = (selectedSuggestion, matchingSuggestions) => selectedSuggestion === null ? -1 : matchingSuggestions.indexOf(selectedSuggestion);\n\n/**\n * `ComboboxControl` is an enhanced version of a [`SelectControl`](../select-control/README.md) with the addition of\n * being able to search for options using a search input.\n *\n * ```jsx\n * import { ComboboxControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const options = [\n * \t{\n * \t\tvalue: 'small',\n * \t\tlabel: 'Small',\n * \t},\n * \t{\n * \t\tvalue: 'normal',\n * \t\tlabel: 'Normal',\n * \t\tdisabled: true,\n * \t},\n * \t{\n * \t\tvalue: 'large',\n * \t\tlabel: 'Large',\n * \t\tdisabled: false,\n * \t},\n * ];\n *\n * function MyComboboxControl() {\n * \tconst [ fontSize, setFontSize ] = useState();\n * \tconst [ filteredOptions, setFilteredOptions ] = useState( options );\n * \treturn (\n * \t\t<ComboboxControl\n * \t\t\t__next40pxDefaultSize\n * \t\t\tlabel=\"Font Size\"\n * \t\t\tvalue={ fontSize }\n * \t\t\tonChange={ setFontSize }\n * \t\t\toptions={ filteredOptions }\n * \t\t\tonFilterValueChange={ ( inputValue ) =>\n * \t\t\t\tsetFilteredOptions(\n * \t\t\t\t\toptions.filter( ( option ) =>\n * \t\t\t\t\t\toption.label\n * \t\t\t\t\t\t\t.toLowerCase()\n * \t\t\t\t\t\t\t.startsWith( inputValue.toLowerCase() )\n * \t\t\t\t\t)\n * \t\t\t\t)\n * \t\t\t}\n * \t\t/>\n * \t);\n * }\n * ```\n */\nfunction ComboboxControl(props) {\n  const {\n    __next40pxDefaultSize = false,\n    value: valueProp,\n    label,\n    options,\n    onChange: onChangeProp,\n    onFilterValueChange = noop,\n    hideLabelFromVision,\n    help,\n    allowReset = true,\n    className,\n    isLoading = false,\n    messages = {\n      selected: __('Item selected.')\n    },\n    __experimentalRenderItem,\n    expandOnFocus = true,\n    placeholder\n  } = useDeprecated36pxDefaultSizeProp(props);\n  const [value, setValue] = useControlledValue({\n    value: valueProp,\n    onChange: onChangeProp\n  });\n  const currentOption = options.find(option => option.value === value);\n  const currentLabel = currentOption?.label ?? '';\n  // Use a custom prefix when generating the `instanceId` to avoid having\n  // duplicate input IDs when rendering this component and `FormTokenField`\n  // in the same page (see https://github.com/WordPress/gutenberg/issues/42112).\n  const instanceId = useInstanceId(ComboboxControl, 'combobox-control');\n  const [selectedSuggestion, setSelectedSuggestion] = useState(currentOption || null);\n  const [isExpanded, setIsExpanded] = useState(false);\n  const [inputHasFocus, setInputHasFocus] = useState(false);\n  const [inputValue, setInputValue] = useState('');\n  const inputContainer = useRef(null);\n  const matchingSuggestions = useMemo(() => {\n    const startsWithMatch = [];\n    const containsMatch = [];\n    const match = normalizeTextString(inputValue);\n    options.forEach(option => {\n      const index = normalizeTextString(option.label).indexOf(match);\n      if (index === 0) {\n        startsWithMatch.push(option);\n      } else if (index > 0) {\n        containsMatch.push(option);\n      }\n    });\n    return startsWithMatch.concat(containsMatch);\n  }, [inputValue, options]);\n  const onSuggestionSelected = newSelectedSuggestion => {\n    if (newSelectedSuggestion.disabled) {\n      return;\n    }\n    setValue(newSelectedSuggestion.value);\n    speak(messages.selected, 'assertive');\n    setSelectedSuggestion(newSelectedSuggestion);\n    setInputValue('');\n    setIsExpanded(false);\n  };\n  const handleArrowNavigation = (offset = 1) => {\n    const index = getIndexOfMatchingSuggestion(selectedSuggestion, matchingSuggestions);\n    let nextIndex = index + offset;\n    if (nextIndex < 0) {\n      nextIndex = matchingSuggestions.length - 1;\n    } else if (nextIndex >= matchingSuggestions.length) {\n      nextIndex = 0;\n    }\n    setSelectedSuggestion(matchingSuggestions[nextIndex]);\n    setIsExpanded(true);\n  };\n  const onKeyDown = withIgnoreIMEEvents(event => {\n    let preventDefault = false;\n    if (event.defaultPrevented) {\n      return;\n    }\n    switch (event.code) {\n      case 'Enter':\n        if (selectedSuggestion) {\n          onSuggestionSelected(selectedSuggestion);\n          preventDefault = true;\n        }\n        break;\n      case 'ArrowUp':\n        handleArrowNavigation(-1);\n        preventDefault = true;\n        break;\n      case 'ArrowDown':\n        handleArrowNavigation(1);\n        preventDefault = true;\n        break;\n      case 'Escape':\n        setIsExpanded(false);\n        setSelectedSuggestion(null);\n        preventDefault = true;\n        break;\n      default:\n        break;\n    }\n    if (preventDefault) {\n      event.preventDefault();\n    }\n  });\n  const onBlur = () => {\n    setInputHasFocus(false);\n  };\n  const onFocus = () => {\n    setInputHasFocus(true);\n    if (expandOnFocus) {\n      setIsExpanded(true);\n    }\n    onFilterValueChange('');\n    setInputValue('');\n  };\n  const onClick = () => {\n    setIsExpanded(true);\n  };\n  const onFocusOutside = () => {\n    setIsExpanded(false);\n  };\n  const onInputChange = event => {\n    const text = event.value;\n    setInputValue(text);\n    onFilterValueChange(text);\n    if (inputHasFocus) {\n      setIsExpanded(true);\n    }\n  };\n  const handleOnReset = () => {\n    setValue(null);\n    inputContainer.current?.focus();\n  };\n\n  // Stop propagation of the keydown event when pressing Enter on the Reset\n  // button to prevent calling the onKeydown callback on the container div\n  // element which actually sets the selected suggestion.\n  const handleResetStopPropagation = event => {\n    event.stopPropagation();\n  };\n\n  // Update current selections when the filter input changes.\n  useEffect(() => {\n    const hasMatchingSuggestions = matchingSuggestions.length > 0;\n    const hasSelectedMatchingSuggestions = getIndexOfMatchingSuggestion(selectedSuggestion, matchingSuggestions) > 0;\n    if (hasMatchingSuggestions && !hasSelectedMatchingSuggestions) {\n      // If the current selection isn't present in the list of suggestions, then automatically select the first item from the list of suggestions.\n      setSelectedSuggestion(matchingSuggestions[0]);\n    }\n  }, [matchingSuggestions, selectedSuggestion]);\n\n  // Announcements.\n  useEffect(() => {\n    const hasMatchingSuggestions = matchingSuggestions.length > 0;\n    if (isExpanded) {\n      const message = hasMatchingSuggestions ? sprintf(/* translators: %d: number of results. */\n      _n('%d result found, use up and down arrow keys to navigate.', '%d results found, use up and down arrow keys to navigate.', matchingSuggestions.length), matchingSuggestions.length) : __('No results.');\n      speak(message, 'polite');\n    }\n  }, [matchingSuggestions, isExpanded]);\n  maybeWarnDeprecated36pxSize({\n    componentName: 'ComboboxControl',\n    __next40pxDefaultSize,\n    size: undefined\n  });\n\n  // Disable reason: There is no appropriate role which describes the\n  // input container intended accessible usability.\n  // TODO: Refactor click detection to use blur to stop propagation.\n  /* eslint-disable jsx-a11y/no-static-element-interactions */\n  return /*#__PURE__*/_jsx(DetectOutside, {\n    onFocusOutside: onFocusOutside,\n    children: /*#__PURE__*/_jsx(BaseControl, {\n      className: clsx(className, 'components-combobox-control'),\n      label: label,\n      id: `components-form-token-input-${instanceId}`,\n      hideLabelFromVision: hideLabelFromVision,\n      help: help,\n      children: /*#__PURE__*/_jsxs(\"div\", {\n        className: \"components-combobox-control__suggestions-container\",\n        tabIndex: -1,\n        onKeyDown: onKeyDown,\n        children: [/*#__PURE__*/_jsxs(InputWrapperFlex, {\n          __next40pxDefaultSize: __next40pxDefaultSize,\n          children: [/*#__PURE__*/_jsx(FlexBlock, {\n            children: /*#__PURE__*/_jsx(TokenInput, {\n              className: \"components-combobox-control__input\",\n              instanceId: instanceId,\n              ref: inputContainer,\n              placeholder: placeholder,\n              value: isExpanded ? inputValue : currentLabel,\n              onFocus: onFocus,\n              onBlur: onBlur,\n              onClick: onClick,\n              isExpanded: isExpanded,\n              selectedSuggestionIndex: getIndexOfMatchingSuggestion(selectedSuggestion, matchingSuggestions),\n              onChange: onInputChange,\n              \"aria-describedby\": help ?\n              // TODO: Refactor `TokenInput` to not use hardcoded IDs.\n              `components-form-token-input-${instanceId}__help` : undefined\n            })\n          }), isLoading && /*#__PURE__*/_jsx(Spinner, {}), allowReset && Boolean(value) && !isExpanded && /*#__PURE__*/_jsx(Button, {\n            size: \"small\",\n            icon: closeSmall,\n            onClick: handleOnReset,\n            onKeyDown: handleResetStopPropagation,\n            label: __('Reset')\n          })]\n        }), isExpanded && !isLoading && /*#__PURE__*/_jsx(SuggestionsList, {\n          instanceId: instanceId\n          // The empty string for `value` here is not actually used, but is\n          // just a quick way to satisfy the TypeScript requirements of SuggestionsList.\n          // See: https://github.com/WordPress/gutenberg/pull/47581/files#r1091089330\n          ,\n          match: {\n            label: inputValue,\n            value: ''\n          },\n          displayTransform: suggestion => suggestion.label,\n          suggestions: matchingSuggestions,\n          selectedIndex: getIndexOfMatchingSuggestion(selectedSuggestion, matchingSuggestions),\n          onHover: setSelectedSuggestion,\n          onSelect: onSuggestionSelected,\n          scrollIntoView: true,\n          __experimentalRenderItem: __experimentalRenderItem\n        })]\n      })\n    })\n  });\n  /* eslint-enable jsx-a11y/no-static-element-interactions */\n}\nexport default ComboboxControl;"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAKjB,kBAAgC;AAChC,qBAAgE;AAChE,qBAA8B;AAC9B,kBAAsB;AACtB,mBAA2B;AAK3B,oBAAiC;AACjC,yBAAuB;AACvB,8BAA4B;AAC5B,0BAAwB;AACxB,oBAAmB;AACnB,kBAA0B;AAC1B,gCAA6B;AAC7B,mBAAmC;AACnC,qBAAoC;AACpC,kCAAiD;AACjD,oCAAoC;AACpC,kCAA4C;AAC5C,qBAAoB;AACpB,yBAA2C;AAC3C,IAAM,OAAO,MAAM;AAAC;AACpB,IAAM,oBAAgB,0BAAAA,SAAiB,MAAM,+BAA+B,yBAAU;AAAA,EACpF,mBAAmB,OAAO;AACxB,SAAK,MAAM,eAAe,KAAK;AAAA,EACjC;AAAA,EACA,SAAS;AACP,WAAO,KAAK,MAAM;AAAA,EACpB;AACF,CAAC;AACD,IAAM,+BAA+B,CAAC,oBAAoB,wBAAwB,uBAAuB,OAAO,KAAK,oBAAoB,QAAQ,kBAAkB;AAmDnK,SAAS,gBAAgB,OAAO;AAC9B,QAAM;AAAA,IACJ,wBAAwB;AAAA,IACxB,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,sBAAsB;AAAA,IACtB;AAAA,IACA;AAAA,IACA,aAAa;AAAA,IACb;AAAA,IACA,YAAY;AAAA,IACZ,WAAW;AAAA,MACT,cAAU,gBAAG,gBAAgB;AAAA,IAC/B;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB;AAAA,EACF,QAAI,8DAAiC,KAAK;AAC1C,QAAM,CAAC,OAAO,QAAQ,QAAI,iCAAmB;AAAA,IAC3C,OAAO;AAAA,IACP,UAAU;AAAA,EACZ,CAAC;AACD,QAAM,gBAAgB,QAAQ,KAAK,YAAU,OAAO,UAAU,KAAK;AACnE,QAAM,eAAe,eAAe,SAAS;AAI7C,QAAM,iBAAa,8BAAc,iBAAiB,kBAAkB;AACpE,QAAM,CAAC,oBAAoB,qBAAqB,QAAI,yBAAS,iBAAiB,IAAI;AAClF,QAAM,CAAC,YAAY,aAAa,QAAI,yBAAS,KAAK;AAClD,QAAM,CAAC,eAAe,gBAAgB,QAAI,yBAAS,KAAK;AACxD,QAAM,CAAC,YAAY,aAAa,QAAI,yBAAS,EAAE;AAC/C,QAAM,qBAAiB,uBAAO,IAAI;AAClC,QAAM,0BAAsB,wBAAQ,MAAM;AACxC,UAAM,kBAAkB,CAAC;AACzB,UAAM,gBAAgB,CAAC;AACvB,UAAM,YAAQ,oCAAoB,UAAU;AAC5C,YAAQ,QAAQ,YAAU;AACxB,YAAM,YAAQ,oCAAoB,OAAO,KAAK,EAAE,QAAQ,KAAK;AAC7D,UAAI,UAAU,GAAG;AACf,wBAAgB,KAAK,MAAM;AAAA,MAC7B,WAAW,QAAQ,GAAG;AACpB,sBAAc,KAAK,MAAM;AAAA,MAC3B;AAAA,IACF,CAAC;AACD,WAAO,gBAAgB,OAAO,aAAa;AAAA,EAC7C,GAAG,CAAC,YAAY,OAAO,CAAC;AACxB,QAAM,uBAAuB,2BAAyB;AACpD,QAAI,sBAAsB,UAAU;AAClC;AAAA,IACF;AACA,aAAS,sBAAsB,KAAK;AACpC,2BAAM,SAAS,UAAU,WAAW;AACpC,0BAAsB,qBAAqB;AAC3C,kBAAc,EAAE;AAChB,kBAAc,KAAK;AAAA,EACrB;AACA,QAAM,wBAAwB,CAAC,SAAS,MAAM;AAC5C,UAAM,QAAQ,6BAA6B,oBAAoB,mBAAmB;AAClF,QAAI,YAAY,QAAQ;AACxB,QAAI,YAAY,GAAG;AACjB,kBAAY,oBAAoB,SAAS;AAAA,IAC3C,WAAW,aAAa,oBAAoB,QAAQ;AAClD,kBAAY;AAAA,IACd;AACA,0BAAsB,oBAAoB,SAAS,CAAC;AACpD,kBAAc,IAAI;AAAA,EACpB;AACA,QAAM,gBAAY,mDAAoB,WAAS;AAC7C,QAAI,iBAAiB;AACrB,QAAI,MAAM,kBAAkB;AAC1B;AAAA,IACF;AACA,YAAQ,MAAM,MAAM;AAAA,MAClB,KAAK;AACH,YAAI,oBAAoB;AACtB,+BAAqB,kBAAkB;AACvC,2BAAiB;AAAA,QACnB;AACA;AAAA,MACF,KAAK;AACH,8BAAsB,EAAE;AACxB,yBAAiB;AACjB;AAAA,MACF,KAAK;AACH,8BAAsB,CAAC;AACvB,yBAAiB;AACjB;AAAA,MACF,KAAK;AACH,sBAAc,KAAK;AACnB,8BAAsB,IAAI;AAC1B,yBAAiB;AACjB;AAAA,MACF;AACE;AAAA,IACJ;AACA,QAAI,gBAAgB;AAClB,YAAM,eAAe;AAAA,IACvB;AAAA,EACF,CAAC;AACD,QAAM,SAAS,MAAM;AACnB,qBAAiB,KAAK;AAAA,EACxB;AACA,QAAM,UAAU,MAAM;AACpB,qBAAiB,IAAI;AACrB,QAAI,eAAe;AACjB,oBAAc,IAAI;AAAA,IACpB;AACA,wBAAoB,EAAE;AACtB,kBAAc,EAAE;AAAA,EAClB;AACA,QAAM,UAAU,MAAM;AACpB,kBAAc,IAAI;AAAA,EACpB;AACA,QAAM,iBAAiB,MAAM;AAC3B,kBAAc,KAAK;AAAA,EACrB;AACA,QAAM,gBAAgB,WAAS;AAC7B,UAAM,OAAO,MAAM;AACnB,kBAAc,IAAI;AAClB,wBAAoB,IAAI;AACxB,QAAI,eAAe;AACjB,oBAAc,IAAI;AAAA,IACpB;AAAA,EACF;AACA,QAAM,gBAAgB,MAAM;AAC1B,aAAS,IAAI;AACb,mBAAe,SAAS,MAAM;AAAA,EAChC;AAKA,QAAM,6BAA6B,WAAS;AAC1C,UAAM,gBAAgB;AAAA,EACxB;AAGA,gCAAU,MAAM;AACd,UAAM,yBAAyB,oBAAoB,SAAS;AAC5D,UAAM,iCAAiC,6BAA6B,oBAAoB,mBAAmB,IAAI;AAC/G,QAAI,0BAA0B,CAAC,gCAAgC;AAE7D,4BAAsB,oBAAoB,CAAC,CAAC;AAAA,IAC9C;AAAA,EACF,GAAG,CAAC,qBAAqB,kBAAkB,CAAC;AAG5C,gCAAU,MAAM;AACd,UAAM,yBAAyB,oBAAoB,SAAS;AAC5D,QAAI,YAAY;AACd,YAAM,UAAU,6BAAyB;AAAA;AAAA,YACzC,gBAAG,4DAA4D,6DAA6D,oBAAoB,MAAM;AAAA,QAAG,oBAAoB;AAAA,MAAM,QAAI,gBAAG,aAAa;AACvM,6BAAM,SAAS,QAAQ;AAAA,IACzB;AAAA,EACF,GAAG,CAAC,qBAAqB,UAAU,CAAC;AACpC,+DAA4B;AAAA,IAC1B,eAAe;AAAA,IACf;AAAA,IACA,MAAM;AAAA,EACR,CAAC;AAMD,SAAoB,uCAAAC,KAAK,eAAe;AAAA,IACtC;AAAA,IACA,UAAuB,uCAAAA,KAAK,oBAAAC,SAAa;AAAA,MACvC,eAAW,YAAAC,SAAK,WAAW,6BAA6B;AAAA,MACxD;AAAA,MACA,IAAI,+BAA+B,UAAU;AAAA,MAC7C;AAAA,MACA;AAAA,MACA,UAAuB,uCAAAC,MAAM,OAAO;AAAA,QAClC,WAAW;AAAA,QACX,UAAU;AAAA,QACV;AAAA,QACA,UAAU,CAAc,uCAAAA,MAAM,gCAAkB;AAAA,UAC9C;AAAA,UACA,UAAU,CAAc,uCAAAH,KAAK,uBAAW;AAAA,YACtC,UAAuB,uCAAAA,KAAK,mBAAAI,SAAY;AAAA,cACtC,WAAW;AAAA,cACX;AAAA,cACA,KAAK;AAAA,cACL;AAAA,cACA,OAAO,aAAa,aAAa;AAAA,cACjC;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA,yBAAyB,6BAA6B,oBAAoB,mBAAmB;AAAA,cAC7F,UAAU;AAAA,cACV,oBAAoB;AAAA;AAAA,gBAEpB,+BAA+B,UAAU;AAAA,kBAAW;AAAA,YACtD,CAAC;AAAA,UACH,CAAC,GAAG,aAA0B,uCAAAJ,KAAK,eAAAK,SAAS,CAAC,CAAC,GAAG,cAAc,QAAQ,KAAK,KAAK,CAAC,cAA2B,uCAAAL,KAAK,cAAAM,SAAQ;AAAA,YACxH,MAAM;AAAA,YACN,MAAM;AAAA,YACN,SAAS;AAAA,YACT,WAAW;AAAA,YACX,WAAO,gBAAG,OAAO;AAAA,UACnB,CAAC,CAAC;AAAA,QACJ,CAAC,GAAG,cAAc,CAAC,aAA0B,uCAAAN,KAAK,wBAAAO,SAAiB;AAAA,UACjE;AAAA,UAKA,OAAO;AAAA,YACL,OAAO;AAAA,YACP,OAAO;AAAA,UACT;AAAA,UACA,kBAAkB,gBAAc,WAAW;AAAA,UAC3C,aAAa;AAAA,UACb,eAAe,6BAA6B,oBAAoB,mBAAmB;AAAA,UACnF,SAAS;AAAA,UACT,UAAU;AAAA,UACV,gBAAgB;AAAA,UAChB;AAAA,QACF,CAAC,CAAC;AAAA,MACJ,CAAC;AAAA,IACH,CAAC;AAAA,EACH,CAAC;AAEH;AACA,IAAO,2BAAQ;",
   "names": ["withFocusOutside", "_jsx", "BaseControl", "clsx", "_jsxs", "TokenInput", "Spinner", "Button", "SuggestionsList"]
 }

package/build/custom-gradient-picker/index.cjs

@@ -35,6 +35,7 @@ __export(custom_gradient_picker_exports, {
 });
 module.exports = __toCommonJS(custom_gradient_picker_exports);
 var import_i18n = require("@wordpress/i18n");
+var import_element = require("@wordpress/element");
 var import_angle_picker_control = __toESM(require("../angle-picker-control/index.cjs"));
 var import_gradient_bar = __toESM(require("./gradient-bar/index.cjs"));
 var import_flex = require("../flex/index.cjs");
@@ -73,10 +74,17 @@ var GradientTypePicker = ({
   const {
     type
   } = gradientAST;
+  const lastLinearOrientationAngle = (0, import_element.useRef)(Number(import_constants.HORIZONTAL_GRADIENT_ORIENTATION.value));
+  if (type === "linear-gradient" && gradientAST.orientation) {
+    lastLinearOrientationAngle.current = Number(gradientAST.orientation.value);
+  }
   const onSetLinearGradient = () => {
     onChange((0, import_serializer.serializeGradient)({
       ...gradientAST,
-      orientation: gradientAST.orientation ? void 0 : import_constants.HORIZONTAL_GRADIENT_ORIENTATION,
+      orientation: {
+        type: "angular",
+        value: `${lastLinearOrientationAngle.current}`
+      },
       type: "linear-gradient"
     }));
   };

package/build/custom-gradient-picker/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/custom-gradient-picker/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport AnglePickerControl from '../angle-picker-control';\nimport CustomGradientBar from './gradient-bar';\nimport { Flex } from '../flex';\nimport SelectControl from '../select-control';\nimport { VStack } from '../v-stack';\nimport { getGradientAstWithDefault, getLinearGradientRepresentation, getGradientAstWithControlPoints, getStopCssColor } from './utils';\nimport { serializeGradient } from './serializer';\nimport { DEFAULT_LINEAR_GRADIENT_ANGLE, HORIZONTAL_GRADIENT_ORIENTATION, GRADIENT_OPTIONS } from './constants';\nimport { AccessoryWrapper, SelectWrapper } from './styles/custom-gradient-picker-styles';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst GradientAnglePicker = ({\n  gradientAST,\n  hasGradient,\n  onChange\n}) => {\n  const angle = gradientAST?.orientation?.value ?? DEFAULT_LINEAR_GRADIENT_ANGLE;\n  const onAngleChange = newAngle => {\n    onChange(serializeGradient({\n      ...gradientAST,\n      orientation: {\n        type: 'angular',\n        value: `${newAngle}`\n      }\n    }));\n  };\n  return /*#__PURE__*/_jsx(AnglePickerControl, {\n    onChange: onAngleChange,\n    value: hasGradient ? angle : ''\n  });\n};\nconst GradientTypePicker = ({\n  gradientAST,\n  hasGradient,\n  onChange\n}) => {\n  const {\n    type\n  } = gradientAST;\n  const onSetLinearGradient = () => {\n    onChange(serializeGradient({\n      ...gradientAST,\n      orientation: gradientAST.orientation ? undefined : HORIZONTAL_GRADIENT_ORIENTATION,\n      type: 'linear-gradient'\n    }));\n  };\n  const onSetRadialGradient = () => {\n    const {\n      orientation,\n      ...restGradientAST\n    } = gradientAST;\n    onChange(serializeGradient({\n      ...restGradientAST,\n      type: 'radial-gradient'\n    }));\n  };\n  const handleOnChange = next => {\n    if (next === 'linear-gradient') {\n      onSetLinearGradient();\n    }\n    if (next === 'radial-gradient') {\n      onSetRadialGradient();\n    }\n  };\n  return /*#__PURE__*/_jsx(SelectControl, {\n    className: \"components-custom-gradient-picker__type-picker\",\n    label: __('Type'),\n    labelPosition: \"top\",\n    onChange: handleOnChange,\n    options: GRADIENT_OPTIONS,\n    size: \"__unstable-large\",\n    value: hasGradient ? type : undefined\n  });\n};\n\n/**\n * CustomGradientPicker is a React component that renders a UI for specifying\n * linear or radial gradients. Radial gradients are displayed in the picker as\n * a slice of the gradient from the center to the outside.\n *\n * ```jsx\n * import { CustomGradientPicker } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyCustomGradientPicker = () => {\n *   const [ gradient, setGradient ] = useState();\n *\n *   return (\n *     <CustomGradientPicker\n *\t\t\tvalue={ gradient }\n *\t\t\tonChange={ setGradient }\n *     />\n *   );\n * };\n * ```\n */\nexport function CustomGradientPicker({\n  value,\n  onChange,\n  enableAlpha = true,\n  __experimentalIsRenderedInSidebar = false\n}) {\n  const {\n    gradientAST,\n    hasGradient\n  } = getGradientAstWithDefault(value);\n\n  // On radial gradients the bar should display a linear gradient.\n  // On radial gradients the bar represents a slice of the gradient from the center until the outside.\n  // On liner gradients the bar represents the color stops from left to right independently of the angle.\n  const background = getLinearGradientRepresentation(gradientAST);\n\n  // Control points color option may be hex from presets, custom colors will be rgb.\n  // The position should always be a percentage.\n  const controlPoints = gradientAST.colorStops.map(colorStop => {\n    return {\n      color: getStopCssColor(colorStop),\n      // Although it's already been checked by `hasUnsupportedLength` in `getGradientAstWithDefault`,\n      // TypeScript doesn't know that `colorStop.length` is not undefined here.\n      // @ts-expect-error\n      position: parseInt(colorStop.length.value)\n    };\n  });\n  return /*#__PURE__*/_jsxs(VStack, {\n    spacing: 4,\n    className: \"components-custom-gradient-picker\",\n    children: [/*#__PURE__*/_jsx(CustomGradientBar, {\n      __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,\n      disableAlpha: !enableAlpha,\n      background: background,\n      hasGradient: hasGradient,\n      value: controlPoints,\n      onChange: newControlPoints => {\n        onChange(serializeGradient(getGradientAstWithControlPoints(gradientAST, newControlPoints)));\n      }\n    }), /*#__PURE__*/_jsxs(Flex, {\n      gap: 3,\n      className: \"components-custom-gradient-picker__ui-line\",\n      children: [/*#__PURE__*/_jsx(SelectWrapper, {\n        children: /*#__PURE__*/_jsx(GradientTypePicker, {\n          gradientAST: gradientAST,\n          hasGradient: hasGradient,\n          onChange: onChange\n        })\n      }), /*#__PURE__*/_jsx(AccessoryWrapper, {\n        children: gradientAST.type === 'linear-gradient' && /*#__PURE__*/_jsx(GradientAnglePicker, {\n          gradientAST: gradientAST,\n          hasGradient: hasGradient,\n          onChange: onChange\n        })\n      })]\n    })]\n  });\n}\nexport default CustomGradientPicker;"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * External dependencies\n */\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport AnglePickerControl from '../angle-picker-control';\nimport CustomGradientBar from './gradient-bar';\nimport { Flex } from '../flex';\nimport SelectControl from '../select-control';\nimport { VStack } from '../v-stack';\nimport { getGradientAstWithDefault, getLinearGradientRepresentation, getGradientAstWithControlPoints, getStopCssColor } from './utils';\nimport { serializeGradient } from './serializer';\nimport { DEFAULT_LINEAR_GRADIENT_ANGLE, GRADIENT_OPTIONS, HORIZONTAL_GRADIENT_ORIENTATION } from './constants';\nimport { AccessoryWrapper, SelectWrapper } from './styles/custom-gradient-picker-styles';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst GradientAnglePicker = ({\n  gradientAST,\n  hasGradient,\n  onChange\n}) => {\n  const angle = gradientAST?.orientation?.value ?? DEFAULT_LINEAR_GRADIENT_ANGLE;\n  const onAngleChange = newAngle => {\n    onChange(serializeGradient({\n      ...gradientAST,\n      orientation: {\n        type: 'angular',\n        value: `${newAngle}`\n      }\n    }));\n  };\n  return /*#__PURE__*/_jsx(AnglePickerControl, {\n    onChange: onAngleChange,\n    value: hasGradient ? angle : ''\n  });\n};\nconst GradientTypePicker = ({\n  gradientAST,\n  hasGradient,\n  onChange\n}) => {\n  const {\n    type\n  } = gradientAST;\n  const lastLinearOrientationAngle = useRef(Number(HORIZONTAL_GRADIENT_ORIENTATION.value));\n  if (type === 'linear-gradient' && gradientAST.orientation) {\n    lastLinearOrientationAngle.current = Number(gradientAST.orientation.value);\n  }\n  const onSetLinearGradient = () => {\n    onChange(serializeGradient({\n      ...gradientAST,\n      orientation: {\n        type: 'angular',\n        value: `${lastLinearOrientationAngle.current}`\n      },\n      type: 'linear-gradient'\n    }));\n  };\n  const onSetRadialGradient = () => {\n    const {\n      orientation,\n      ...restGradientAST\n    } = gradientAST;\n    onChange(serializeGradient({\n      ...restGradientAST,\n      type: 'radial-gradient'\n    }));\n  };\n  const handleOnChange = next => {\n    if (next === 'linear-gradient') {\n      onSetLinearGradient();\n    }\n    if (next === 'radial-gradient') {\n      onSetRadialGradient();\n    }\n  };\n  return /*#__PURE__*/_jsx(SelectControl, {\n    className: \"components-custom-gradient-picker__type-picker\",\n    label: __('Type'),\n    labelPosition: \"top\",\n    onChange: handleOnChange,\n    options: GRADIENT_OPTIONS,\n    size: \"__unstable-large\",\n    value: hasGradient ? type : undefined\n  });\n};\n\n/**\n * CustomGradientPicker is a React component that renders a UI for specifying\n * linear or radial gradients. Radial gradients are displayed in the picker as\n * a slice of the gradient from the center to the outside.\n *\n * ```jsx\n * import { CustomGradientPicker } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyCustomGradientPicker = () => {\n *   const [ gradient, setGradient ] = useState();\n *\n *   return (\n *     <CustomGradientPicker\n *\t\t\tvalue={ gradient }\n *\t\t\tonChange={ setGradient }\n *     />\n *   );\n * };\n * ```\n */\nexport function CustomGradientPicker({\n  value,\n  onChange,\n  enableAlpha = true,\n  __experimentalIsRenderedInSidebar = false\n}) {\n  const {\n    gradientAST,\n    hasGradient\n  } = getGradientAstWithDefault(value);\n\n  // On radial gradients the bar should display a linear gradient.\n  // On radial gradients the bar represents a slice of the gradient from the center until the outside.\n  // On liner gradients the bar represents the color stops from left to right independently of the angle.\n  const background = getLinearGradientRepresentation(gradientAST);\n\n  // Control points color option may be hex from presets, custom colors will be rgb.\n  // The position should always be a percentage.\n  const controlPoints = gradientAST.colorStops.map(colorStop => {\n    return {\n      color: getStopCssColor(colorStop),\n      // Although it's already been checked by `hasUnsupportedLength` in `getGradientAstWithDefault`,\n      // TypeScript doesn't know that `colorStop.length` is not undefined here.\n      // @ts-expect-error\n      position: parseInt(colorStop.length.value)\n    };\n  });\n  return /*#__PURE__*/_jsxs(VStack, {\n    spacing: 4,\n    className: \"components-custom-gradient-picker\",\n    children: [/*#__PURE__*/_jsx(CustomGradientBar, {\n      __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,\n      disableAlpha: !enableAlpha,\n      background: background,\n      hasGradient: hasGradient,\n      value: controlPoints,\n      onChange: newControlPoints => {\n        onChange(serializeGradient(getGradientAstWithControlPoints(gradientAST, newControlPoints)));\n      }\n    }), /*#__PURE__*/_jsxs(Flex, {\n      gap: 3,\n      className: \"components-custom-gradient-picker__ui-line\",\n      children: [/*#__PURE__*/_jsx(SelectWrapper, {\n        children: /*#__PURE__*/_jsx(GradientTypePicker, {\n          gradientAST: gradientAST,\n          hasGradient: hasGradient,\n          onChange: onChange\n        })\n      }), /*#__PURE__*/_jsx(AccessoryWrapper, {\n        children: gradientAST.type === 'linear-gradient' && /*#__PURE__*/_jsx(GradientAnglePicker, {\n          gradientAST: gradientAST,\n          hasGradient: hasGradient,\n          onChange: onChange\n        })\n      })]\n    })]\n  });\n}\nexport default CustomGradientPicker;"],
+  "mappings": "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",
   "names": ["_jsx", "AnglePickerControl", "SelectControl", "_jsxs", "CustomGradientBar"]
 }

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

@@ -48,6 +48,7 @@ function UnForwardedTokenInput(props, ref) {
     onChange,
     onFocus,
     onBlur,
+    "aria-describedby": ariaDescribedBy,
     ...restProps
   } = props;
   const [hasFocus, setHasFocus] = (0, import_element.useState)(false);
@@ -90,7 +91,7 @@ function UnForwardedTokenInput(props, ref) {
       // - the list of suggestions are rendered in the DOM (`isExpanded`)
       hasFocus && selectedSuggestionIndex !== -1 && isExpanded ? `components-form-token-suggestions-${instanceId}-${selectedSuggestionIndex}` : void 0
     ),
-    "aria-describedby": `components-form-token-suggestions-howto-${instanceId}`
+    "aria-describedby": [`components-form-token-suggestions-howto-${instanceId}`, ariaDescribedBy].filter(Boolean).join(" ")
   });
 }
 var TokenInput = (0, import_element.forwardRef)(UnForwardedTokenInput);

package/build/form-token-field/token-input.cjs.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);\nTokenInput.displayName = 'TokenInput';\nexport default TokenInput;"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAIjB,qBAAqC;AAKrC,yBAA4B;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,QAAI,yBAAS,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,uCAAAA,KAAK,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,eAAW,YAAAC,SAAK,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,iBAAa,2BAAW,qBAAqB;AAC1D,WAAW,cAAc;AACzB,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    'aria-describedby': ariaDescribedBy,\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}`, ariaDescribedBy].filter(Boolean).join(' ')\n  });\n}\nexport const TokenInput = forwardRef(UnForwardedTokenInput);\nTokenInput.displayName = 'TokenInput';\nexport default TokenInput;"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAIjB,qBAAqC;AAKrC,yBAA4B;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,oBAAoB;AAAA,IACpB,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,CAAC,UAAU,WAAW,QAAI,yBAAS,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,uCAAAA,KAAK,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,eAAW,YAAAC,SAAK,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,CAAC,2CAA2C,UAAU,IAAI,eAAe,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,EACzH,CAAC;AACH;AACO,IAAM,iBAAa,2BAAW,qBAAqB;AAC1D,WAAW,cAAc;AACzB,IAAO,sBAAQ;",
   "names": ["_jsx", "clsx"]
 }

package/build/radio-control/index.cjs

@@ -70,6 +70,7 @@ function RadioControl(props) {
   }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("fieldset", {
     id,
+    role: "radiogroup",
     className: (0, import_clsx.default)(className, "components-radio-control"),
     "aria-describedby": !!help ? generateHelpId(id) : void 0,
     children: [hideLabelFromVision ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_visually_hidden.VisuallyHidden, {

package/build/radio-control/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/radio-control/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\nimport { VStack } from '../v-stack';\nimport { StyledHelp } from '../base-control/styles/base-control-styles';\nimport { VisuallyHidden } from '../visually-hidden';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nfunction generateOptionDescriptionId(radioGroupId, index) {\n  return `${radioGroupId}-${index}-option-description`;\n}\nfunction generateOptionId(radioGroupId, index) {\n  return `${radioGroupId}-${index}`;\n}\nfunction generateHelpId(radioGroupId) {\n  return `${radioGroupId}__help`;\n}\n\n/**\n * Render a user interface to select the user type using radio inputs.\n *\n * ```jsx\n * import { RadioControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyRadioControl = () => {\n *   const [ option, setOption ] = useState( 'a' );\n *\n *   return (\n *     <RadioControl\n *       label=\"User type\"\n *       help=\"The type of the current user\"\n *       selected={ option }\n *       options={ [\n *         { label: 'Author', value: 'a' },\n *         { label: 'Editor', value: 'e' },\n *       ] }\n *       onChange={ ( value ) => setOption( value ) }\n *     />\n *   );\n * };\n * ```\n */\nexport function RadioControl(props) {\n  const {\n    label,\n    className,\n    selected,\n    help,\n    onChange,\n    onClick,\n    hideLabelFromVision,\n    options = [],\n    id: preferredId,\n    ...additionalProps\n  } = props;\n  const id = useInstanceId(RadioControl, 'inspector-radio-control', preferredId);\n  const onChangeValue = event => onChange(event.target.value);\n  if (!options?.length) {\n    return null;\n  }\n  return /*#__PURE__*/_jsxs(\"fieldset\", {\n    id: id,\n    className: clsx(className, 'components-radio-control'),\n    \"aria-describedby\": !!help ? generateHelpId(id) : undefined,\n    children: [hideLabelFromVision ? /*#__PURE__*/_jsx(VisuallyHidden, {\n      as: \"legend\",\n      children: label\n    }) : /*#__PURE__*/_jsx(BaseControl.VisualLabel, {\n      as: \"legend\",\n      children: label\n    }), /*#__PURE__*/_jsx(VStack, {\n      spacing: 3,\n      className: clsx('components-radio-control__group-wrapper', {\n        'has-help': !!help\n      }),\n      children: options.map((option, index) => /*#__PURE__*/_jsxs(\"div\", {\n        className: \"components-radio-control__option\",\n        children: [/*#__PURE__*/_jsx(\"input\", {\n          id: generateOptionId(id, index),\n          className: \"components-radio-control__input\",\n          type: \"radio\",\n          name: id,\n          value: option.value,\n          onChange: onChangeValue,\n          checked: option.value === selected,\n          \"aria-describedby\": !!option.description ? generateOptionDescriptionId(id, index) : undefined,\n          onClick: event => {\n            // Compat code for Safari to ensure that the radio is focused when clicked.\n            event.currentTarget.focus();\n            onClick?.(event);\n          },\n          ...additionalProps\n        }), /*#__PURE__*/_jsx(\"label\", {\n          className: \"components-radio-control__label\",\n          htmlFor: generateOptionId(id, index),\n          children: option.label\n        }), !!option.description ? /*#__PURE__*/_jsx(StyledHelp, {\n          id: generateOptionDescriptionId(id, index),\n          className: \"components-radio-control__option-description\",\n          children: option.description\n        }) : null]\n      }, generateOptionId(id, index)))\n    }), !!help && /*#__PURE__*/_jsx(StyledHelp, {\n      id: generateHelpId(id),\n      className: \"components-base-control__help\",\n      children: help\n    })]\n  });\n}\nexport default RadioControl;"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAIjB,qBAA8B;AAK9B,0BAAwB;AACxB,qBAAuB;AACvB,iCAA2B;AAC3B,6BAA+B;AAC/B,yBAA2C;AAC3C,SAAS,4BAA4B,cAAc,OAAO;AACxD,SAAO,GAAG,YAAY,IAAI,KAAK;AACjC;AACA,SAAS,iBAAiB,cAAc,OAAO;AAC7C,SAAO,GAAG,YAAY,IAAI,KAAK;AACjC;AACA,SAAS,eAAe,cAAc;AACpC,SAAO,GAAG,YAAY;AACxB;AA2BO,SAAS,aAAa,OAAO;AAClC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU,CAAC;AAAA,IACX,IAAI;AAAA,IACJ,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,SAAK,8BAAc,cAAc,2BAA2B,WAAW;AAC7E,QAAM,gBAAgB,WAAS,SAAS,MAAM,OAAO,KAAK;AAC1D,MAAI,CAAC,SAAS,QAAQ;AACpB,WAAO;AAAA,EACT;AACA,SAAoB,uCAAAA,MAAM,YAAY;AAAA,IACpC;AAAA,IACA,eAAW,YAAAC,SAAK,WAAW,0BAA0B;AAAA,IACrD,oBAAoB,CAAC,CAAC,OAAO,eAAe,EAAE,IAAI;AAAA,IAClD,UAAU,CAAC,sBAAmC,uCAAAC,KAAK,uCAAgB;AAAA,MACjE,IAAI;AAAA,MACJ,UAAU;AAAA,IACZ,CAAC,IAAiB,uCAAAA,KAAK,oBAAAC,QAAY,aAAa;AAAA,MAC9C,IAAI;AAAA,MACJ,UAAU;AAAA,IACZ,CAAC,GAAgB,uCAAAD,KAAK,uBAAQ;AAAA,MAC5B,SAAS;AAAA,MACT,eAAW,YAAAD,SAAK,2CAA2C;AAAA,QACzD,YAAY,CAAC,CAAC;AAAA,MAChB,CAAC;AAAA,MACD,UAAU,QAAQ,IAAI,CAAC,QAAQ,UAAuB,uCAAAD,MAAM,OAAO;AAAA,QACjE,WAAW;AAAA,QACX,UAAU,CAAc,uCAAAE,KAAK,SAAS;AAAA,UACpC,IAAI,iBAAiB,IAAI,KAAK;AAAA,UAC9B,WAAW;AAAA,UACX,MAAM;AAAA,UACN,MAAM;AAAA,UACN,OAAO,OAAO;AAAA,UACd,UAAU;AAAA,UACV,SAAS,OAAO,UAAU;AAAA,UAC1B,oBAAoB,CAAC,CAAC,OAAO,cAAc,4BAA4B,IAAI,KAAK,IAAI;AAAA,UACpF,SAAS,WAAS;AAEhB,kBAAM,cAAc,MAAM;AAC1B,sBAAU,KAAK;AAAA,UACjB;AAAA,UACA,GAAG;AAAA,QACL,CAAC,GAAgB,uCAAAA,KAAK,SAAS;AAAA,UAC7B,WAAW;AAAA,UACX,SAAS,iBAAiB,IAAI,KAAK;AAAA,UACnC,UAAU,OAAO;AAAA,QACnB,CAAC,GAAG,CAAC,CAAC,OAAO,cAA2B,uCAAAA,KAAK,uCAAY;AAAA,UACvD,IAAI,4BAA4B,IAAI,KAAK;AAAA,UACzC,WAAW;AAAA,UACX,UAAU,OAAO;AAAA,QACnB,CAAC,IAAI,IAAI;AAAA,MACX,GAAG,iBAAiB,IAAI,KAAK,CAAC,CAAC;AAAA,IACjC,CAAC,GAAG,CAAC,CAAC,QAAqB,uCAAAA,KAAK,uCAAY;AAAA,MAC1C,IAAI,eAAe,EAAE;AAAA,MACrB,WAAW;AAAA,MACX,UAAU;AAAA,IACZ,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;AACA,IAAO,wBAAQ;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\nimport { VStack } from '../v-stack';\nimport { StyledHelp } from '../base-control/styles/base-control-styles';\nimport { VisuallyHidden } from '../visually-hidden';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nfunction generateOptionDescriptionId(radioGroupId, index) {\n  return `${radioGroupId}-${index}-option-description`;\n}\nfunction generateOptionId(radioGroupId, index) {\n  return `${radioGroupId}-${index}`;\n}\nfunction generateHelpId(radioGroupId) {\n  return `${radioGroupId}__help`;\n}\n\n/**\n * Render a user interface to select the user type using radio inputs.\n *\n * ```jsx\n * import { RadioControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyRadioControl = () => {\n *   const [ option, setOption ] = useState( 'a' );\n *\n *   return (\n *     <RadioControl\n *       label=\"User type\"\n *       help=\"The type of the current user\"\n *       selected={ option }\n *       options={ [\n *         { label: 'Author', value: 'a' },\n *         { label: 'Editor', value: 'e' },\n *       ] }\n *       onChange={ ( value ) => setOption( value ) }\n *     />\n *   );\n * };\n * ```\n */\nexport function RadioControl(props) {\n  const {\n    label,\n    className,\n    selected,\n    help,\n    onChange,\n    onClick,\n    hideLabelFromVision,\n    options = [],\n    id: preferredId,\n    ...additionalProps\n  } = props;\n  const id = useInstanceId(RadioControl, 'inspector-radio-control', preferredId);\n  const onChangeValue = event => onChange(event.target.value);\n  if (!options?.length) {\n    return null;\n  }\n  return /*#__PURE__*/_jsxs(\"fieldset\", {\n    id: id,\n    role: \"radiogroup\",\n    className: clsx(className, 'components-radio-control'),\n    \"aria-describedby\": !!help ? generateHelpId(id) : undefined,\n    children: [hideLabelFromVision ? /*#__PURE__*/_jsx(VisuallyHidden, {\n      as: \"legend\",\n      children: label\n    }) : /*#__PURE__*/_jsx(BaseControl.VisualLabel, {\n      as: \"legend\",\n      children: label\n    }), /*#__PURE__*/_jsx(VStack, {\n      spacing: 3,\n      className: clsx('components-radio-control__group-wrapper', {\n        'has-help': !!help\n      }),\n      children: options.map((option, index) => /*#__PURE__*/_jsxs(\"div\", {\n        className: \"components-radio-control__option\",\n        children: [/*#__PURE__*/_jsx(\"input\", {\n          id: generateOptionId(id, index),\n          className: \"components-radio-control__input\",\n          type: \"radio\",\n          name: id,\n          value: option.value,\n          onChange: onChangeValue,\n          checked: option.value === selected,\n          \"aria-describedby\": !!option.description ? generateOptionDescriptionId(id, index) : undefined,\n          onClick: event => {\n            // Compat code for Safari to ensure that the radio is focused when clicked.\n            event.currentTarget.focus();\n            onClick?.(event);\n          },\n          ...additionalProps\n        }), /*#__PURE__*/_jsx(\"label\", {\n          className: \"components-radio-control__label\",\n          htmlFor: generateOptionId(id, index),\n          children: option.label\n        }), !!option.description ? /*#__PURE__*/_jsx(StyledHelp, {\n          id: generateOptionDescriptionId(id, index),\n          className: \"components-radio-control__option-description\",\n          children: option.description\n        }) : null]\n      }, generateOptionId(id, index)))\n    }), !!help && /*#__PURE__*/_jsx(StyledHelp, {\n      id: generateHelpId(id),\n      className: \"components-base-control__help\",\n      children: help\n    })]\n  });\n}\nexport default RadioControl;"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAIjB,qBAA8B;AAK9B,0BAAwB;AACxB,qBAAuB;AACvB,iCAA2B;AAC3B,6BAA+B;AAC/B,yBAA2C;AAC3C,SAAS,4BAA4B,cAAc,OAAO;AACxD,SAAO,GAAG,YAAY,IAAI,KAAK;AACjC;AACA,SAAS,iBAAiB,cAAc,OAAO;AAC7C,SAAO,GAAG,YAAY,IAAI,KAAK;AACjC;AACA,SAAS,eAAe,cAAc;AACpC,SAAO,GAAG,YAAY;AACxB;AA2BO,SAAS,aAAa,OAAO;AAClC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU,CAAC;AAAA,IACX,IAAI;AAAA,IACJ,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,SAAK,8BAAc,cAAc,2BAA2B,WAAW;AAC7E,QAAM,gBAAgB,WAAS,SAAS,MAAM,OAAO,KAAK;AAC1D,MAAI,CAAC,SAAS,QAAQ;AACpB,WAAO;AAAA,EACT;AACA,SAAoB,uCAAAA,MAAM,YAAY;AAAA,IACpC;AAAA,IACA,MAAM;AAAA,IACN,eAAW,YAAAC,SAAK,WAAW,0BAA0B;AAAA,IACrD,oBAAoB,CAAC,CAAC,OAAO,eAAe,EAAE,IAAI;AAAA,IAClD,UAAU,CAAC,sBAAmC,uCAAAC,KAAK,uCAAgB;AAAA,MACjE,IAAI;AAAA,MACJ,UAAU;AAAA,IACZ,CAAC,IAAiB,uCAAAA,KAAK,oBAAAC,QAAY,aAAa;AAAA,MAC9C,IAAI;AAAA,MACJ,UAAU;AAAA,IACZ,CAAC,GAAgB,uCAAAD,KAAK,uBAAQ;AAAA,MAC5B,SAAS;AAAA,MACT,eAAW,YAAAD,SAAK,2CAA2C;AAAA,QACzD,YAAY,CAAC,CAAC;AAAA,MAChB,CAAC;AAAA,MACD,UAAU,QAAQ,IAAI,CAAC,QAAQ,UAAuB,uCAAAD,MAAM,OAAO;AAAA,QACjE,WAAW;AAAA,QACX,UAAU,CAAc,uCAAAE,KAAK,SAAS;AAAA,UACpC,IAAI,iBAAiB,IAAI,KAAK;AAAA,UAC9B,WAAW;AAAA,UACX,MAAM;AAAA,UACN,MAAM;AAAA,UACN,OAAO,OAAO;AAAA,UACd,UAAU;AAAA,UACV,SAAS,OAAO,UAAU;AAAA,UAC1B,oBAAoB,CAAC,CAAC,OAAO,cAAc,4BAA4B,IAAI,KAAK,IAAI;AAAA,UACpF,SAAS,WAAS;AAEhB,kBAAM,cAAc,MAAM;AAC1B,sBAAU,KAAK;AAAA,UACjB;AAAA,UACA,GAAG;AAAA,QACL,CAAC,GAAgB,uCAAAA,KAAK,SAAS;AAAA,UAC7B,WAAW;AAAA,UACX,SAAS,iBAAiB,IAAI,KAAK;AAAA,UACnC,UAAU,OAAO;AAAA,QACnB,CAAC,GAAG,CAAC,CAAC,OAAO,cAA2B,uCAAAA,KAAK,uCAAY;AAAA,UACvD,IAAI,4BAA4B,IAAI,KAAK;AAAA,UACzC,WAAW;AAAA,UACX,UAAU,OAAO;AAAA,QACnB,CAAC,IAAI,IAAI;AAAA,MACX,GAAG,iBAAiB,IAAI,KAAK,CAAC,CAAC;AAAA,IACjC,CAAC,GAAG,CAAC,CAAC,QAAqB,uCAAAA,KAAK,uCAAY;AAAA,MAC1C,IAAI,eAAe,EAAE;AAAA,MACrB,WAAW;AAAA,MACX,UAAU;AAAA,IACZ,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;AACA,IAAO,wBAAQ;",
   "names": ["_jsxs", "clsx", "_jsx", "BaseControl"]
 }

package/build/toggle-group-control/toggle-group-control/as-button-group.cjs

@@ -78,6 +78,7 @@ function UnforwardedToggleGroupControlAsButtonGroup({
       ...otherProps,
       ref: forwardedRef,
       role: "group",
+      id: baseId,
       children
     })
   });

package/build/toggle-group-control/toggle-group-control/as-button-group.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/toggle-group-control/toggle-group-control/as-button-group.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { View } from '../../view';\nimport { useControlledValue } from '../../utils';\nimport ToggleGroupControlContext from '../context';\nimport { useComputeControlledOrUncontrolledValue } from './utils';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnforwardedToggleGroupControlAsButtonGroup({\n  children,\n  isAdaptiveWidth,\n  label,\n  onChange,\n  size,\n  value: valueProp,\n  id: idProp,\n  setSelectedElement,\n  ...otherProps\n}, forwardedRef) {\n  const generatedId = useInstanceId(ToggleGroupControlAsButtonGroup, 'toggle-group-control-as-button-group');\n  const baseId = idProp || generatedId;\n\n  // Use a heuristic to understand if the component is being used in controlled\n  // or uncontrolled mode, and consequently:\n  // - when controlled, convert `undefined` values to `''` (ie. \"no value\")\n  // - use the `value` prop as the `defaultValue` when uncontrolled\n  const {\n    value,\n    defaultValue\n  } = useComputeControlledOrUncontrolledValue(valueProp);\n  const [selectedValue, setSelectedValue] = useControlledValue({\n    defaultValue,\n    value,\n    onChange\n  });\n  const groupContextValue = useMemo(() => ({\n    baseId,\n    value: selectedValue,\n    setValue: setSelectedValue,\n    isBlock: !isAdaptiveWidth,\n    isDeselectable: true,\n    size,\n    setSelectedElement\n  }), [baseId, selectedValue, setSelectedValue, isAdaptiveWidth, size, setSelectedElement]);\n  return /*#__PURE__*/_jsx(ToggleGroupControlContext.Provider, {\n    value: groupContextValue,\n    children: /*#__PURE__*/_jsx(View, {\n      \"aria-label\": label,\n      ...otherProps,\n      ref: forwardedRef,\n      role: \"group\",\n      children: children\n    })\n  });\n}\nexport const ToggleGroupControlAsButtonGroup = forwardRef(UnforwardedToggleGroupControlAsButtonGroup);\nToggleGroupControlAsButtonGroup.displayName = 'ToggleGroupControlAsButtonGroup';"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAA8B;AAC9B,qBAAoC;AAKpC,kBAAqB;AACrB,mBAAmC;AACnC,qBAAsC;AACtC,IAAAA,gBAAwD;AACxD,yBAA4B;AAC5B,SAAS,2CAA2C;AAAA,EAClD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,IAAI;AAAA,EACJ;AAAA,EACA,GAAG;AACL,GAAG,cAAc;AACf,QAAM,kBAAc,8BAAc,iCAAiC,sCAAsC;AACzG,QAAM,SAAS,UAAU;AAMzB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,EACF,QAAI,uDAAwC,SAAS;AACrD,QAAM,CAAC,eAAe,gBAAgB,QAAI,iCAAmB;AAAA,IAC3D;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,wBAAoB,wBAAQ,OAAO;AAAA,IACvC;AAAA,IACA,OAAO;AAAA,IACP,UAAU;AAAA,IACV,SAAS,CAAC;AAAA,IACV,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,EACF,IAAI,CAAC,QAAQ,eAAe,kBAAkB,iBAAiB,MAAM,kBAAkB,CAAC;AACxF,SAAoB,uCAAAC,KAAK,eAAAC,QAA0B,UAAU;AAAA,IAC3D,OAAO;AAAA,IACP,UAAuB,uCAAAD,KAAK,kBAAM;AAAA,MAChC,cAAc;AAAA,MACd,GAAG;AAAA,MACH,KAAK;AAAA,MACL,MAAM;AAAA,MACN;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AACH;AACO,IAAM,sCAAkC,2BAAW,0CAA0C;AACpG,gCAAgC,cAAc;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { View } from '../../view';\nimport { useControlledValue } from '../../utils';\nimport ToggleGroupControlContext from '../context';\nimport { useComputeControlledOrUncontrolledValue } from './utils';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnforwardedToggleGroupControlAsButtonGroup({\n  children,\n  isAdaptiveWidth,\n  label,\n  onChange,\n  size,\n  value: valueProp,\n  id: idProp,\n  setSelectedElement,\n  ...otherProps\n}, forwardedRef) {\n  const generatedId = useInstanceId(ToggleGroupControlAsButtonGroup, 'toggle-group-control-as-button-group');\n  const baseId = idProp || generatedId;\n\n  // Use a heuristic to understand if the component is being used in controlled\n  // or uncontrolled mode, and consequently:\n  // - when controlled, convert `undefined` values to `''` (ie. \"no value\")\n  // - use the `value` prop as the `defaultValue` when uncontrolled\n  const {\n    value,\n    defaultValue\n  } = useComputeControlledOrUncontrolledValue(valueProp);\n  const [selectedValue, setSelectedValue] = useControlledValue({\n    defaultValue,\n    value,\n    onChange\n  });\n  const groupContextValue = useMemo(() => ({\n    baseId,\n    value: selectedValue,\n    setValue: setSelectedValue,\n    isBlock: !isAdaptiveWidth,\n    isDeselectable: true,\n    size,\n    setSelectedElement\n  }), [baseId, selectedValue, setSelectedValue, isAdaptiveWidth, size, setSelectedElement]);\n  return /*#__PURE__*/_jsx(ToggleGroupControlContext.Provider, {\n    value: groupContextValue,\n    children: /*#__PURE__*/_jsx(View, {\n      \"aria-label\": label,\n      ...otherProps,\n      ref: forwardedRef,\n      role: \"group\",\n      id: baseId,\n      children: children\n    })\n  });\n}\nexport const ToggleGroupControlAsButtonGroup = forwardRef(UnforwardedToggleGroupControlAsButtonGroup);\nToggleGroupControlAsButtonGroup.displayName = 'ToggleGroupControlAsButtonGroup';"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAA8B;AAC9B,qBAAoC;AAKpC,kBAAqB;AACrB,mBAAmC;AACnC,qBAAsC;AACtC,IAAAA,gBAAwD;AACxD,yBAA4B;AAC5B,SAAS,2CAA2C;AAAA,EAClD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,IAAI;AAAA,EACJ;AAAA,EACA,GAAG;AACL,GAAG,cAAc;AACf,QAAM,kBAAc,8BAAc,iCAAiC,sCAAsC;AACzG,QAAM,SAAS,UAAU;AAMzB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,EACF,QAAI,uDAAwC,SAAS;AACrD,QAAM,CAAC,eAAe,gBAAgB,QAAI,iCAAmB;AAAA,IAC3D;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,wBAAoB,wBAAQ,OAAO;AAAA,IACvC;AAAA,IACA,OAAO;AAAA,IACP,UAAU;AAAA,IACV,SAAS,CAAC;AAAA,IACV,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,EACF,IAAI,CAAC,QAAQ,eAAe,kBAAkB,iBAAiB,MAAM,kBAAkB,CAAC;AACxF,SAAoB,uCAAAC,KAAK,eAAAC,QAA0B,UAAU;AAAA,IAC3D,OAAO;AAAA,IACP,UAAuB,uCAAAD,KAAK,kBAAM;AAAA,MAChC,cAAc;AAAA,MACd,GAAG;AAAA,MACH,KAAK;AAAA,MACL,MAAM;AAAA,MACN,IAAI;AAAA,MACJ;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AACH;AACO,IAAM,sCAAkC,2BAAW,0CAA0C;AACpG,gCAAgC,cAAc;",
   "names": ["import_utils", "_jsx", "ToggleGroupControlContext"]
 }

package/build/toggle-group-control/toggle-group-control/component.cjs

@@ -39,7 +39,6 @@ var import_compose = require("@wordpress/compose");
 var import_context = require("../../context/index.cjs");
 var import_hooks = require("../../utils/hooks/index.cjs");
 var import_base_control = __toESM(require("../../base-control/index.cjs"));
-var import_styles = require("./styles.cjs");
 var styles = __toESM(require("./styles.cjs"));
 var import_as_radio_group = require("./as-radio-group.cjs");
 var import_as_button_group = require("./as-button-group.cjs");
@@ -57,6 +56,7 @@ function UnconnectedToggleGroupControl(props, forwardedRef) {
     isAdaptiveWidth = false,
     isBlock = false,
     isDeselectable = false,
+    id,
     label,
     hideLabelFromVision = false,
     help,
@@ -66,6 +66,15 @@ function UnconnectedToggleGroupControl(props, forwardedRef) {
     children,
     ...otherProps
   } = (0, import_context.useContextSystem)(props, "ToggleGroupControl");
+  const {
+    baseControlProps,
+    controlProps
+  } = (0, import_base_control.useBaseControlProps)({
+    id,
+    help,
+    label,
+    hideLabelFromVision
+  });
   const normalizedSize = __next40pxDefaultSize && size === "default" ? "__unstable-large" : size;
   const [selectedElement, setSelectedElement] = (0, import_element.useState)();
   const [controlElement, setControlElement] = (0, import_element.useState)();
@@ -90,14 +99,11 @@ function UnconnectedToggleGroupControl(props, forwardedRef) {
     __next40pxDefaultSize,
     __shouldNotWarnDeprecated36pxSize
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_base_control.default, {
-    help,
-    children: [!hideLabelFromVision && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.VisualLabelWrapper, {
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_base_control.default.VisualLabel, {
-        children: label
-      })
-    }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MainControl, {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_base_control.default, {
+    ...baseControlProps,
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MainControl, {
       ...otherProps,
+      ...controlProps,
       setSelectedElement,
       className: classes,
       isAdaptiveWidth,
@@ -107,7 +113,7 @@ function UnconnectedToggleGroupControl(props, forwardedRef) {
       size: normalizedSize,
       value,
       children
-    })]
+    })
   });
 }
 var ToggleGroupControl = (0, import_context.contextConnect)(UnconnectedToggleGroupControl, "ToggleGroupControl");

package/build/toggle-group-control/toggle-group-control/component.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/toggle-group-control/toggle-group-control/component.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\n\n/**\n * WordPress dependencies\n */\nimport { useMemo, useState } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\n\nimport { contextConnect, useContextSystem } from '../../context';\nimport { useCx } from '../../utils/hooks';\nimport BaseControl from '../../base-control';\nimport { VisualLabelWrapper } from './styles';\nimport * as styles from './styles';\nimport { ToggleGroupControlAsRadioGroup } from './as-radio-group';\nimport { ToggleGroupControlAsButtonGroup } from './as-button-group';\nimport { useTrackElementOffsetRect } from '../../utils/element-rect';\nimport { useAnimatedOffsetRect } from '../../utils/hooks/use-animated-offset-rect';\nimport { maybeWarnDeprecated36pxSize } from '../../utils/deprecated-36px-size';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nfunction UnconnectedToggleGroupControl(props, forwardedRef) {\n  const {\n    __nextHasNoMarginBottom: _,\n    // Prevent passing this to the internal component\n    __next40pxDefaultSize = false,\n    __shouldNotWarnDeprecated36pxSize,\n    className,\n    isAdaptiveWidth = false,\n    isBlock = false,\n    isDeselectable = false,\n    label,\n    hideLabelFromVision = false,\n    help,\n    onChange,\n    size = 'default',\n    value,\n    children,\n    ...otherProps\n  } = useContextSystem(props, 'ToggleGroupControl');\n  const normalizedSize = __next40pxDefaultSize && size === 'default' ? '__unstable-large' : size;\n  const [selectedElement, setSelectedElement] = useState();\n  const [controlElement, setControlElement] = useState();\n  const refs = useMergeRefs([setControlElement, forwardedRef]);\n  const selectedRect = useTrackElementOffsetRect(value !== null && value !== undefined ? selectedElement : undefined);\n  useAnimatedOffsetRect(controlElement, selectedRect, {\n    prefix: 'selected',\n    dataAttribute: 'indicator-animated',\n    transitionEndFilter: event => event.pseudoElement === '::before',\n    roundRect: false\n  });\n  const cx = useCx();\n  const classes = useMemo(() => cx(styles.toggleGroupControl({\n    isBlock,\n    isDeselectable,\n    size: normalizedSize\n  }), isBlock && styles.block, className), [className, cx, isBlock, isDeselectable, normalizedSize]);\n  const MainControl = isDeselectable ? ToggleGroupControlAsButtonGroup : ToggleGroupControlAsRadioGroup;\n  maybeWarnDeprecated36pxSize({\n    componentName: 'ToggleGroupControl',\n    size,\n    __next40pxDefaultSize,\n    __shouldNotWarnDeprecated36pxSize\n  });\n  return /*#__PURE__*/_jsxs(BaseControl, {\n    help: help,\n    children: [!hideLabelFromVision && /*#__PURE__*/_jsx(VisualLabelWrapper, {\n      children: /*#__PURE__*/_jsx(BaseControl.VisualLabel, {\n        children: label\n      })\n    }), /*#__PURE__*/_jsx(MainControl, {\n      ...otherProps,\n      setSelectedElement: setSelectedElement,\n      className: classes,\n      isAdaptiveWidth: isAdaptiveWidth,\n      label: label,\n      onChange: onChange,\n      ref: refs,\n      size: normalizedSize,\n      value: value,\n      children: children\n    })]\n  });\n}\n\n/**\n * `ToggleGroupControl` is a form component that lets users choose options\n * represented in horizontal segments. To render options for this control use\n * `ToggleGroupControlOption` component.\n *\n * This component is intended for selecting a single persistent value from a set of options,\n * similar to a how a radio button group would work. If you simply want a toggle to switch between views,\n * use a `TabPanel` instead.\n *\n * Only use this control when you know for sure the labels of items inside won't\n * wrap. For items with longer labels, you can consider a `SelectControl` or a\n * `CustomSelectControl` component instead.\n *\n * ```jsx\n * import {\n *   __experimentalToggleGroupControl as ToggleGroupControl,\n *   __experimentalToggleGroupControlOption as ToggleGroupControlOption,\n * } from '@wordpress/components';\n *\n * function Example() {\n *   return (\n *     <ToggleGroupControl\n *       label=\"my label\"\n *       value=\"vertical\"\n *       isBlock\n *       __next40pxDefaultSize\n *     >\n *       <ToggleGroupControlOption value=\"horizontal\" label=\"Horizontal\" />\n *       <ToggleGroupControlOption value=\"vertical\" label=\"Vertical\" />\n *     </ToggleGroupControl>\n *   );\n * }\n * ```\n */\nexport const ToggleGroupControl = contextConnect(UnconnectedToggleGroupControl, 'ToggleGroupControl');\nexport default ToggleGroupControl;"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA,qBAAkC;AAClC,qBAA6B;AAM7B,qBAAiD;AACjD,mBAAsB;AACtB,0BAAwB;AACxB,oBAAmC;AACnC,aAAwB;AACxB,4BAA+C;AAC/C,6BAAgD;AAChD,0BAA0C;AAC1C,sCAAsC;AACtC,kCAA4C;AAC5C,yBAA2C;AAC3C,SAAS,8BAA8B,OAAO,cAAc;AAC1D,QAAM;AAAA,IACJ,yBAAyB;AAAA;AAAA,IAEzB,wBAAwB;AAAA,IACxB;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,IAClB,UAAU;AAAA,IACV,iBAAiB;AAAA,IACjB;AAAA,IACA,sBAAsB;AAAA,IACtB;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,QAAI,iCAAiB,OAAO,oBAAoB;AAChD,QAAM,iBAAiB,yBAAyB,SAAS,YAAY,qBAAqB;AAC1F,QAAM,CAAC,iBAAiB,kBAAkB,QAAI,yBAAS;AACvD,QAAM,CAAC,gBAAgB,iBAAiB,QAAI,yBAAS;AACrD,QAAM,WAAO,6BAAa,CAAC,mBAAmB,YAAY,CAAC;AAC3D,QAAM,mBAAe,+CAA0B,UAAU,QAAQ,UAAU,SAAY,kBAAkB,MAAS;AAClH,6DAAsB,gBAAgB,cAAc;AAAA,IAClD,QAAQ;AAAA,IACR,eAAe;AAAA,IACf,qBAAqB,WAAS,MAAM,kBAAkB;AAAA,IACtD,WAAW;AAAA,EACb,CAAC;AACD,QAAM,SAAK,oBAAM;AACjB,QAAM,cAAU,wBAAQ,MAAM,GAAU,0BAAmB;AAAA,IACzD;AAAA,IACA;AAAA,IACA,MAAM;AAAA,EACR,CAAC,GAAG,WAAkB,cAAO,SAAS,GAAG,CAAC,WAAW,IAAI,SAAS,gBAAgB,cAAc,CAAC;AACjG,QAAM,cAAc,iBAAiB,yDAAkC;AACvE,+DAA4B;AAAA,IAC1B,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,SAAoB,uCAAAA,MAAM,oBAAAC,SAAa;AAAA,IACrC;AAAA,IACA,UAAU,CAAC,CAAC,uBAAoC,uCAAAC,KAAK,kCAAoB;AAAA,MACvE,UAAuB,uCAAAA,KAAK,oBAAAD,QAAY,aAAa;AAAA,QACnD,UAAU;AAAA,MACZ,CAAC;AAAA,IACH,CAAC,GAAgB,uCAAAC,KAAK,aAAa;AAAA,MACjC,GAAG;AAAA,MACH;AAAA,MACA,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL,MAAM;AAAA,MACN;AAAA,MACA;AAAA,IACF,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;AAoCO,IAAM,yBAAqB,+BAAe,+BAA+B,oBAAoB;AACpG,IAAO,oBAAQ;",
-  "names": ["_jsxs", "BaseControl", "_jsx"]
+  "sourcesContent": ["/**\n * External dependencies\n */\n\n/**\n * WordPress dependencies\n */\nimport { useMemo, useState } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\n\nimport { contextConnect, useContextSystem } from '../../context';\nimport { useCx } from '../../utils/hooks';\nimport BaseControl, { useBaseControlProps } from '../../base-control';\nimport * as styles from './styles';\nimport { ToggleGroupControlAsRadioGroup } from './as-radio-group';\nimport { ToggleGroupControlAsButtonGroup } from './as-button-group';\nimport { useTrackElementOffsetRect } from '../../utils/element-rect';\nimport { useAnimatedOffsetRect } from '../../utils/hooks/use-animated-offset-rect';\nimport { maybeWarnDeprecated36pxSize } from '../../utils/deprecated-36px-size';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnconnectedToggleGroupControl(props, forwardedRef) {\n  const {\n    __nextHasNoMarginBottom: _,\n    // Prevent passing this to the internal component\n    __next40pxDefaultSize = false,\n    __shouldNotWarnDeprecated36pxSize,\n    className,\n    isAdaptiveWidth = false,\n    isBlock = false,\n    isDeselectable = false,\n    id,\n    label,\n    hideLabelFromVision = false,\n    help,\n    onChange,\n    size = 'default',\n    value,\n    children,\n    ...otherProps\n  } = useContextSystem(props, 'ToggleGroupControl');\n  const {\n    baseControlProps,\n    controlProps\n  } = useBaseControlProps({\n    id,\n    help,\n    label,\n    hideLabelFromVision\n  });\n  const normalizedSize = __next40pxDefaultSize && size === 'default' ? '__unstable-large' : size;\n  const [selectedElement, setSelectedElement] = useState();\n  const [controlElement, setControlElement] = useState();\n  const refs = useMergeRefs([setControlElement, forwardedRef]);\n  const selectedRect = useTrackElementOffsetRect(value !== null && value !== undefined ? selectedElement : undefined);\n  useAnimatedOffsetRect(controlElement, selectedRect, {\n    prefix: 'selected',\n    dataAttribute: 'indicator-animated',\n    transitionEndFilter: event => event.pseudoElement === '::before',\n    roundRect: false\n  });\n  const cx = useCx();\n  const classes = useMemo(() => cx(styles.toggleGroupControl({\n    isBlock,\n    isDeselectable,\n    size: normalizedSize\n  }), isBlock && styles.block, className), [className, cx, isBlock, isDeselectable, normalizedSize]);\n  const MainControl = isDeselectable ? ToggleGroupControlAsButtonGroup : ToggleGroupControlAsRadioGroup;\n  maybeWarnDeprecated36pxSize({\n    componentName: 'ToggleGroupControl',\n    size,\n    __next40pxDefaultSize,\n    __shouldNotWarnDeprecated36pxSize\n  });\n  return /*#__PURE__*/_jsx(BaseControl, {\n    ...baseControlProps,\n    children: /*#__PURE__*/_jsx(MainControl, {\n      ...otherProps,\n      ...controlProps,\n      setSelectedElement: setSelectedElement,\n      className: classes,\n      isAdaptiveWidth: isAdaptiveWidth\n      // `label` is used for `aria-label` on the inner control.\n      // This is separate from the visual label rendered by `BaseControl`.\n      ,\n      label: label,\n      onChange: onChange,\n      ref: refs,\n      size: normalizedSize,\n      value: value,\n      children: children\n    })\n  });\n}\n\n/**\n * `ToggleGroupControl` is a form component that lets users choose options\n * represented in horizontal segments. To render options for this control use\n * `ToggleGroupControlOption` component.\n *\n * This component is intended for selecting a single persistent value from a set of options,\n * similar to a how a radio button group would work. If you simply want a toggle to switch between views,\n * use a `TabPanel` instead.\n *\n * Only use this control when you know for sure the labels of items inside won't\n * wrap. For items with longer labels, you can consider a `SelectControl` or a\n * `CustomSelectControl` component instead.\n *\n * ```jsx\n * import {\n *   __experimentalToggleGroupControl as ToggleGroupControl,\n *   __experimentalToggleGroupControlOption as ToggleGroupControlOption,\n * } from '@wordpress/components';\n *\n * function Example() {\n *   return (\n *     <ToggleGroupControl\n *       label=\"my label\"\n *       value=\"vertical\"\n *       isBlock\n *       __next40pxDefaultSize\n *     >\n *       <ToggleGroupControlOption value=\"horizontal\" label=\"Horizontal\" />\n *       <ToggleGroupControlOption value=\"vertical\" label=\"Vertical\" />\n *     </ToggleGroupControl>\n *   );\n * }\n * ```\n */\nexport const ToggleGroupControl = contextConnect(UnconnectedToggleGroupControl, 'ToggleGroupControl');\nexport default ToggleGroupControl;"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA,qBAAkC;AAClC,qBAA6B;AAM7B,qBAAiD;AACjD,mBAAsB;AACtB,0BAAiD;AACjD,aAAwB;AACxB,4BAA+C;AAC/C,6BAAgD;AAChD,0BAA0C;AAC1C,sCAAsC;AACtC,kCAA4C;AAC5C,yBAA4B;AAC5B,SAAS,8BAA8B,OAAO,cAAc;AAC1D,QAAM;AAAA,IACJ,yBAAyB;AAAA;AAAA,IAEzB,wBAAwB;AAAA,IACxB;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,IAClB,UAAU;AAAA,IACV,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA,sBAAsB;AAAA,IACtB;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,QAAI,iCAAiB,OAAO,oBAAoB;AAChD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,EACF,QAAI,yCAAoB;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,iBAAiB,yBAAyB,SAAS,YAAY,qBAAqB;AAC1F,QAAM,CAAC,iBAAiB,kBAAkB,QAAI,yBAAS;AACvD,QAAM,CAAC,gBAAgB,iBAAiB,QAAI,yBAAS;AACrD,QAAM,WAAO,6BAAa,CAAC,mBAAmB,YAAY,CAAC;AAC3D,QAAM,mBAAe,+CAA0B,UAAU,QAAQ,UAAU,SAAY,kBAAkB,MAAS;AAClH,6DAAsB,gBAAgB,cAAc;AAAA,IAClD,QAAQ;AAAA,IACR,eAAe;AAAA,IACf,qBAAqB,WAAS,MAAM,kBAAkB;AAAA,IACtD,WAAW;AAAA,EACb,CAAC;AACD,QAAM,SAAK,oBAAM;AACjB,QAAM,cAAU,wBAAQ,MAAM,GAAU,0BAAmB;AAAA,IACzD;AAAA,IACA;AAAA,IACA,MAAM;AAAA,EACR,CAAC,GAAG,WAAkB,cAAO,SAAS,GAAG,CAAC,WAAW,IAAI,SAAS,gBAAgB,cAAc,CAAC;AACjG,QAAM,cAAc,iBAAiB,yDAAkC;AACvE,+DAA4B;AAAA,IAC1B,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,SAAoB,uCAAAA,KAAK,oBAAAC,SAAa;AAAA,IACpC,GAAG;AAAA,IACH,UAAuB,uCAAAD,KAAK,aAAa;AAAA,MACvC,GAAG;AAAA,MACH,GAAG;AAAA,MACH;AAAA,MACA,WAAW;AAAA,MACX;AAAA,MAIA;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL,MAAM;AAAA,MACN;AAAA,MACA;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AACH;AAoCO,IAAM,yBAAqB,+BAAe,+BAA+B,oBAAoB;AACpG,IAAO,oBAAQ;",
+  "names": ["_jsx", "BaseControl"]
 }