@wordpress/components 32.5.0 → 32.6.0

package/AGENTS.md

@@ -2,9 +2,9 @@
 
 This package contains UI components that are intended to be used anywhere in a general way (global), or specifically in the block editor.
 
-We are currently in the process of rewriting the global components to be in the new `@wordpress/ui` package. However, this is a work in progress and `@wordpress/components` should continue to be used until further notice.
+We are currently in the process of rewriting the global components to be in the new `@wordpress/ui` package. Refer to the [`use-recommended-components` ESLint rule](../eslint-plugin/rules/use-recommended-components.js) for guidance on which components to use.
 
-Due to the nature of the transition, some components may be deprecated or removed in the future. Check the component status documentation in each Storybook file for up-to-date usage guidance on each component. The component status given in the Storybook file should be considered the most accurate signal, above the `experimental` tag or component prefix.
+For components not explicitly listed in the `use-recommended-components` rule, check the component status documentation in each Storybook file for up-to-date usage guidance on each component. The component status given in the Storybook file should be considered the most accurate signal, above the `experimental` tag or component prefix.
 
 ## Forms
 

package/CHANGELOG.md

@@ -2,6 +2,42 @@
 
 ## Unreleased
 
+## 32.6.0 (2026-04-15)
+
+### Documentation
+
+-   Add README.md files for `DatePicker` and `TimePicker` components ([#70365](https://github.com/WordPress/gutenberg/pull/70365)).
+
+### Bug Fixes
+
+-   `CheckboxControl`: Fix disabled styles [#77132](https://github.com/WordPress/gutenberg/pull/77132).
+-   `FormTokenField`: Fix disabled styles. [#77137](https://github.com/WordPress/gutenberg/pull/77137)
+-   `Textarea`: Fix disabled styles [#77129](https://github.com/WordPress/gutenberg/pull/77129).
+-   `DateCalendar`: Fix disabled selected day having darker background than other disabled controls [#77138](https://github.com/WordPress/gutenberg/pull/77138).
+-   `Autocomplete`: Fix value comparison to avoid resetting block inserter in RTC ([#76980](https://github.com/WordPress/gutenberg/pull/76980)).
+-   `ValidatedRangeControl`: Fix `aria-label` rendered as `[object Object]` when `required` or `markWhenOptional` is set ([#77042](https://github.com/WordPress/gutenberg/pull/77042)).
+-   `Autocomplete`: Fix matching logic to prefer longest overlapping trigger ([#77018](https://github.com/WordPress/gutenberg/pull/77018)).
+
+### Enhancements
+
+-   `Sandbox`: Add `allowSameOrigin` prop to opt in to `allow-same-origin` on the iframe sandbox. The default is now `false`, removing same-origin access for user-controlled content like the Custom HTML block ([#77212](https://github.com/WordPress/gutenberg/pull/77212)).
+-   `FormToggle`: Update disabled styles [#77208](https://github.com/WordPress/gutenberg/pull/77208).
+-   `RadioControl`: Add support for disabled radio group [#77127](https://github.com/WordPress/gutenberg/pull/77127).
+-   `AlignmentMatrixControl`, `Button`, `Calendar`, `CheckboxControl`, `CircularOptionPicker`, `ColorPalette`, `DropdownMenu`, `FormToggle`, `FormTokenField`, `RadioControl`, `Snackbar`, `TabPanel`, `ToggleControl`: Use `--wpds-cursor-control` for interactive cursor styling ([#76786](https://github.com/WordPress/gutenberg/pull/76786)).
+
+### Internal
+
+-   `Autocomplete`: Refactor `useAutocomplete` to use `useReducer` ([#77020](https://github.com/WordPress/gutenberg/pull/77020)).
+-   `Button`: Remove obsolete Safari + VoiceOver workaround for visually hidden text ([#77107](https://github.com/WordPress/gutenberg/pull/77107)).
+-   `BoxControl`: Remove unused state for icon side ([#77143](https://github.com/WordPress/gutenberg/pull/77143)).
+-   `Autocomplete`: Remove `getAutoCompleterUI` factory pattern ([#77048](https://github.com/WordPress/gutenberg/pull/77048)).
+-   `CustomSelectControl`, `Sandbox`: Rename internal React function names ([#77148](https://github.com/WordPress/gutenberg/pull/77148)).
+
+### Code Quality
+
+-   `Textarea`: remove unnecessary style [#77221](https://github.com/WordPress/gutenberg/pull/77221).
+-   `FormTokenField`: remove unnecessary style [#77263](https://github.com/WordPress/gutenberg/pull/77263).
+
 ## 32.5.0 (2026-04-01)
 
 ### Bug Fixes
@@ -17,6 +53,10 @@
 
 -   `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)).
 
+### Internal
+
+-   `Autocomplete`: Extract matching logic into a standalone pure function ([#76957](https://github.com/WordPress/gutenberg/pull/76957)).
+
 ## 32.4.0 (2026-03-18)
 
 ### Bug Fixes

package/README.md

@@ -10,6 +10,24 @@ npm install @wordpress/components --save
 
 _This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for such language features and APIs, you should include [the polyfill shipped in `@wordpress/babel-preset-default`](https://github.com/WordPress/gutenberg/tree/HEAD/packages/babel-preset-default#polyfill) in your code._
 
+## Setup
+
+Many components require the package's CSS stylesheet to be loaded.
+
+### Within WordPress
+
+To ensure proper load order, add the `wp-components` stylesheet as a dependency of your plugin's stylesheet. See [wp_enqueue_style documentation](https://developer.wordpress.org/reference/functions/wp_enqueue_style/#parameters) for how to specify dependencies.
+
+### Outside WordPress
+
+Load the stylesheet in your application:
+
+```js
+import '@wordpress/components/build-style/style.css';
+```
+
+The RTL version of the stylesheet is available at `@wordpress/components/build-style/style-rtl.css`.
+
 ## Usage
 
 Within Gutenberg, these components can be accessed by importing from the `components` root directory:
@@ -25,10 +43,6 @@ export default function MyButton() {
 }
 ```
 
-Many components include CSS to add styles, which you will need to load in order for them to appear correctly. Within WordPress, add the `wp-components` stylesheet as a dependency of your plugin's stylesheet. See [wp_enqueue_style documentation](https://developer.wordpress.org/reference/functions/wp_enqueue_style/#parameters) for how to specify dependencies.
-
-In non-WordPress projects, link to the `build-style/style.css` file directly, it is located at `node_modules/@wordpress/components/build-style/style.css`.
-
 ### Popovers
 
 By default, the `Popover` component will render within an extra element appended to the body of the document.

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

@@ -40,10 +40,10 @@ 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='ae7603bd56']")) {
+if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='9251e317a9']")) {
   const style = document.createElement("style");
-  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}}"));
+  style.setAttribute("data-wp-hash", "9251e317a9");
+  style.appendChild(document.createTextNode("._02e2af5803bf5bda__grid-container{aspect-ratio:1;border:1px solid #0000;border-radius:4px;box-sizing:border-box;cursor:var(--wpds-cursor-control,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);
 }
 var style_module_default = { "grid-container": "_02e2af5803bf5bda__grid-container", "grid-row": "c421f8ed08c23077__grid-row", "cell": "_3af769f755097fdb__cell", "point": "_37ef12d4fb6d6131__point" };

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='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;",
+  "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='9251e317a9']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"9251e317a9\");\n\tstyle.appendChild(document.createTextNode(\"._02e2af5803bf5bda__grid-container{aspect-ratio:1;border:1px solid #0000;border-radius:4px;box-sizing:border-box;cursor:var(--wpds-cursor-control,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,w2CAAw2C,CAAC;AACn5C,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,10 +44,10 @@ 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='ae7603bd56']")) {
+if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='9251e317a9']")) {
   const style = document.createElement("style");
-  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}}"));
+  style.setAttribute("data-wp-hash", "9251e317a9");
+  style.appendChild(document.createTextNode("._02e2af5803bf5bda__grid-container{aspect-ratio:1;border:1px solid #0000;border-radius:4px;box-sizing:border-box;cursor:var(--wpds-cursor-control,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);
 }
 var style_module_default = { "grid-container": "_02e2af5803bf5bda__grid-container", "grid-row": "c421f8ed08c23077__grid-row", "cell": "_3af769f755097fdb__cell", "point": "_37ef12d4fb6d6131__point" };

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='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;",
+  "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='9251e317a9']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"9251e317a9\");\n\tstyle.appendChild(document.createTextNode(\"._02e2af5803bf5bda__grid-container{aspect-ratio:1;border:1px solid #0000;border-radius:4px;box-sizing:border-box;cursor:var(--wpds-cursor-control,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,w2CAAw2C,CAAC;AACn5C,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/autocomplete/autocompleter-ui.cjs

@@ -30,7 +30,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // packages/components/src/autocomplete/autocompleter-ui.tsx
 var autocompleter_ui_exports = {};
 __export(autocompleter_ui_exports, {
-  getAutoCompleterUI: () => getAutoCompleterUI
+  AutocompleterUI: () => AutocompleterUI
 });
 module.exports = __toCommonJS(autocompleter_ui_exports);
 var import_clsx = __toESM(require("clsx"));
@@ -75,92 +75,88 @@ function ListBox({
     }, option.key))
   });
 }
-function getAutoCompleterUI(autocompleter) {
+function AutocompleterUI({
+  autocompleter,
+  filterValue,
+  instanceId,
+  listBoxId,
+  className,
+  selectedIndex,
+  onChangeOptions,
+  onSelect,
+  reset,
+  contentRef
+}) {
   const useItems = autocompleter.useItems ?? (0, import_get_default_use_items.default)(autocompleter);
-  function AutocompleterUI({
-    filterValue,
-    instanceId,
-    listBoxId,
-    className,
-    selectedIndex,
-    onChangeOptions,
-    onSelect,
-    onReset,
-    reset,
-    contentRef
-  }) {
-    const [items] = useItems(filterValue);
-    const popoverAnchor = (0, import_rich_text.useAnchor)({
-      editableContentElement: contentRef.current
-    });
-    const [needsA11yCompat, setNeedsA11yCompat] = (0, import_element.useState)(false);
-    const popoverRef = (0, import_element.useRef)(null);
-    const popoverRefs = (0, import_compose.useMergeRefs)([popoverRef, (0, import_compose.useRefEffect)((node) => {
-      if (!contentRef.current) {
-        return;
-      }
-      setNeedsA11yCompat(node.ownerDocument !== contentRef.current.ownerDocument);
-    }, [contentRef])]);
-    useOnClickOutside(popoverRef, reset);
-    const debouncedSpeak = (0, import_compose.useDebounce)(import_a11y.speak, 500);
-    function announce(options) {
-      if (!debouncedSpeak) {
-        return;
-      }
-      if (!!options.length) {
-        if (filterValue) {
-          debouncedSpeak((0, import_i18n.sprintf)(
-            /* translators: %d: number of results. */
-            (0, import_i18n._n)("%d result found, use up and down arrow keys to navigate.", "%d results found, use up and down arrow keys to navigate.", options.length),
-            options.length
-          ), "assertive");
-        } else {
-          debouncedSpeak((0, import_i18n.sprintf)(
-            /* translators: %d: number of results. */
-            (0, import_i18n._n)("Initial %d result loaded. Type to filter all available results. Use up and down arrow keys to navigate.", "Initial %d results loaded. Type to filter all available results. Use up and down arrow keys to navigate.", options.length),
-            options.length
-          ), "assertive");
-        }
+  const [items] = useItems(filterValue);
+  const popoverAnchor = (0, import_rich_text.useAnchor)({
+    editableContentElement: contentRef.current
+  });
+  const [needsA11yCompat, setNeedsA11yCompat] = (0, import_element.useState)(false);
+  const popoverRef = (0, import_element.useRef)(null);
+  const popoverRefs = (0, import_compose.useMergeRefs)([popoverRef, (0, import_compose.useRefEffect)((node) => {
+    if (!contentRef.current) {
+      return;
+    }
+    setNeedsA11yCompat(node.ownerDocument !== contentRef.current.ownerDocument);
+  }, [contentRef])]);
+  useOnClickOutside(popoverRef, reset);
+  const debouncedSpeak = (0, import_compose.useDebounce)(import_a11y.speak, 500);
+  function announce(options) {
+    if (!debouncedSpeak) {
+      return;
+    }
+    if (!!options.length) {
+      if (filterValue) {
+        debouncedSpeak((0, import_i18n.sprintf)(
+          /* translators: %d: number of results. */
+          (0, import_i18n._n)("%d result found, use up and down arrow keys to navigate.", "%d results found, use up and down arrow keys to navigate.", options.length),
+          options.length
+        ), "assertive");
       } else {
-        debouncedSpeak((0, import_i18n.__)("No results."), "assertive");
+        debouncedSpeak((0, import_i18n.sprintf)(
+          /* translators: %d: number of results. */
+          (0, import_i18n._n)("Initial %d result loaded. Type to filter all available results. Use up and down arrow keys to navigate.", "Initial %d results loaded. Type to filter all available results. Use up and down arrow keys to navigate.", options.length),
+          options.length
+        ), "assertive");
       }
+    } else {
+      debouncedSpeak((0, import_i18n.__)("No results."), "assertive");
     }
-    (0, import_element.useLayoutEffect)(() => {
-      onChangeOptions(items);
-      announce(items);
-    }, [items]);
-    if (items.length === 0) {
-      return null;
-    }
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
-      children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_popover.default, {
-        offset: 8,
-        focusOnMount: false,
-        onClose: onReset,
-        placement: "top-start",
-        className: "components-autocomplete__popover",
-        anchor: popoverAnchor,
-        ref: popoverRefs,
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ListBox, {
-          items,
-          onSelect,
-          selectedIndex,
-          instanceId,
-          listBoxId,
-          className
-        })
-      }), contentRef.current && needsA11yCompat && (0, import_react_dom.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ListBox, {
+  }
+  (0, import_element.useLayoutEffect)(() => {
+    onChangeOptions(items);
+    announce(items);
+  }, [items]);
+  if (items.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+    children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_popover.default, {
+      offset: 8,
+      focusOnMount: false,
+      placement: "top-start",
+      className: "components-autocomplete__popover",
+      anchor: popoverAnchor,
+      ref: popoverRefs,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ListBox, {
         items,
         onSelect,
         selectedIndex,
         instanceId,
         listBoxId,
-        className,
-        Component: import_visually_hidden.VisuallyHidden
-      }), contentRef.current.ownerDocument.body)]
-    });
-  }
-  return AutocompleterUI;
+        className
+      })
+    }), contentRef.current && needsA11yCompat && (0, import_react_dom.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ListBox, {
+      items,
+      onSelect,
+      selectedIndex,
+      instanceId,
+      listBoxId,
+      className,
+      Component: import_visually_hidden.VisuallyHidden
+    }), contentRef.current.ownerDocument.body)]
+  });
 }
 function useOnClickOutside(ref, handler) {
   (0, import_element.useEffect)(() => {
@@ -180,6 +176,6 @@ function useOnClickOutside(ref, handler) {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  getAutoCompleterUI
+  AutocompleterUI
 });
 //# sourceMappingURL=autocompleter-ui.cjs.map

package/build/autocomplete/autocompleter-ui.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/autocomplete/autocompleter-ui.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport { createPortal } from 'react-dom';\n\n/**\n * WordPress dependencies\n */\nimport { useLayoutEffect, useRef, useEffect, useState } from '@wordpress/element';\nimport { useAnchor } from '@wordpress/rich-text';\nimport { useDebounce, useMergeRefs, useRefEffect } from '@wordpress/compose';\nimport { speak } from '@wordpress/a11y';\nimport { __, _n, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport getDefaultUseItems from './get-default-use-items';\nimport Button from '../button';\nimport Popover from '../popover';\nimport { VisuallyHidden } from '../visually-hidden';\nimport { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from \"react/jsx-runtime\";\nfunction ListBox({\n  items,\n  onSelect,\n  selectedIndex,\n  instanceId,\n  listBoxId,\n  className,\n  Component = 'div'\n}) {\n  return /*#__PURE__*/_jsx(Component, {\n    id: listBoxId,\n    role: \"listbox\",\n    className: \"components-autocomplete__results\",\n    children: items.map((option, index) => /*#__PURE__*/_jsx(Button, {\n      id: `components-autocomplete-item-${instanceId}-${option.key}`,\n      role: \"option\",\n      __next40pxDefaultSize: true,\n      \"aria-selected\": index === selectedIndex,\n      accessibleWhenDisabled: true,\n      disabled: option.isDisabled,\n      className: clsx('components-autocomplete__result', className, {\n        // Unused, for backwards compatibility.\n        'is-selected': index === selectedIndex\n      }),\n      variant: index === selectedIndex ? 'primary' : undefined,\n      onClick: () => onSelect(option),\n      children: option.label\n    }, option.key))\n  });\n}\nexport function getAutoCompleterUI(autocompleter) {\n  const useItems = autocompleter.useItems ?? getDefaultUseItems(autocompleter);\n  function AutocompleterUI({\n    filterValue,\n    instanceId,\n    listBoxId,\n    className,\n    selectedIndex,\n    onChangeOptions,\n    onSelect,\n    onReset,\n    reset,\n    contentRef\n  }) {\n    const [items] = useItems(filterValue);\n    const popoverAnchor = useAnchor({\n      editableContentElement: contentRef.current\n    });\n    const [needsA11yCompat, setNeedsA11yCompat] = useState(false);\n    const popoverRef = useRef(null);\n    const popoverRefs = useMergeRefs([popoverRef, useRefEffect(node => {\n      if (!contentRef.current) {\n        return;\n      }\n\n      // If the popover is rendered in a different document than\n      // the content, we need to duplicate the options list in the\n      // content document so that it's available to the screen\n      // readers, which check the DOM ID based aria-* attributes.\n      setNeedsA11yCompat(node.ownerDocument !== contentRef.current.ownerDocument);\n    }, [contentRef])]);\n    useOnClickOutside(popoverRef, reset);\n    const debouncedSpeak = useDebounce(speak, 500);\n    function announce(options) {\n      if (!debouncedSpeak) {\n        return;\n      }\n      if (!!options.length) {\n        if (filterValue) {\n          debouncedSpeak(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.', options.length), options.length), 'assertive');\n        } else {\n          debouncedSpeak(sprintf(/* translators: %d: number of results. */\n          _n('Initial %d result loaded. Type to filter all available results. Use up and down arrow keys to navigate.', 'Initial %d results loaded. Type to filter all available results. Use up and down arrow keys to navigate.', options.length), options.length), 'assertive');\n        }\n      } else {\n        debouncedSpeak(__('No results.'), 'assertive');\n      }\n    }\n    useLayoutEffect(() => {\n      onChangeOptions(items);\n      announce(items);\n      // We want to avoid introducing unexpected side effects.\n      // See https://github.com/WordPress/gutenberg/pull/41820\n    }, [items]);\n    if (items.length === 0) {\n      return null;\n    }\n    return /*#__PURE__*/_jsxs(_Fragment, {\n      children: [/*#__PURE__*/_jsx(Popover, {\n        offset: 8,\n        focusOnMount: false,\n        onClose: onReset,\n        placement: \"top-start\",\n        className: \"components-autocomplete__popover\",\n        anchor: popoverAnchor,\n        ref: popoverRefs,\n        children: /*#__PURE__*/_jsx(ListBox, {\n          items: items,\n          onSelect: onSelect,\n          selectedIndex: selectedIndex,\n          instanceId: instanceId,\n          listBoxId: listBoxId,\n          className: className\n        })\n      }), contentRef.current && needsA11yCompat && createPortal(/*#__PURE__*/_jsx(ListBox, {\n        items: items,\n        onSelect: onSelect,\n        selectedIndex: selectedIndex,\n        instanceId: instanceId,\n        listBoxId: listBoxId,\n        className: className,\n        Component: VisuallyHidden\n      }), contentRef.current.ownerDocument.body)]\n    });\n  }\n  return AutocompleterUI;\n}\nfunction useOnClickOutside(ref, handler) {\n  useEffect(() => {\n    const listener = event => {\n      // Do nothing if clicking ref's element or descendent elements, or if the ref is not referencing an element\n      if (!ref.current || ref.current.contains(event.target)) {\n        return;\n      }\n      handler(event);\n    };\n    document.addEventListener('mousedown', listener);\n    document.addEventListener('touchstart', listener);\n    return () => {\n      document.removeEventListener('mousedown', listener);\n      document.removeEventListener('touchstart', listener);\n    };\n  }, [handler, ref]);\n}"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport { createPortal } from 'react-dom';\n\n/**\n * WordPress dependencies\n */\nimport { useLayoutEffect, useRef, useEffect, useState } from '@wordpress/element';\nimport { useAnchor } from '@wordpress/rich-text';\nimport { useDebounce, useMergeRefs, useRefEffect } from '@wordpress/compose';\nimport { speak } from '@wordpress/a11y';\nimport { __, _n, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport getDefaultUseItems from './get-default-use-items';\nimport Button from '../button';\nimport Popover from '../popover';\nimport { VisuallyHidden } from '../visually-hidden';\nimport { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from \"react/jsx-runtime\";\nfunction ListBox({\n  items,\n  onSelect,\n  selectedIndex,\n  instanceId,\n  listBoxId,\n  className,\n  Component = 'div'\n}) {\n  return /*#__PURE__*/_jsx(Component, {\n    id: listBoxId,\n    role: \"listbox\",\n    className: \"components-autocomplete__results\",\n    children: items.map((option, index) => /*#__PURE__*/_jsx(Button, {\n      id: `components-autocomplete-item-${instanceId}-${option.key}`,\n      role: \"option\",\n      __next40pxDefaultSize: true,\n      \"aria-selected\": index === selectedIndex,\n      accessibleWhenDisabled: true,\n      disabled: option.isDisabled,\n      className: clsx('components-autocomplete__result', className, {\n        // Unused, for backwards compatibility.\n        'is-selected': index === selectedIndex\n      }),\n      variant: index === selectedIndex ? 'primary' : undefined,\n      onClick: () => onSelect(option),\n      children: option.label\n    }, option.key))\n  });\n}\nexport function AutocompleterUI({\n  autocompleter,\n  filterValue,\n  instanceId,\n  listBoxId,\n  className,\n  selectedIndex,\n  onChangeOptions,\n  onSelect,\n  reset,\n  contentRef\n}) {\n  // The useItems hook is derived from the autocompleter prop. This is safe\n  // because the parent renders this component with key={autocompleter.name},\n  // ensuring a fresh mount (and stable hook identity) when the completer changes.\n  const useItems = autocompleter.useItems ?? getDefaultUseItems(autocompleter);\n  // eslint-disable-next-line react-compiler/react-compiler\n  const [items] = useItems(filterValue);\n  const popoverAnchor = useAnchor({\n    editableContentElement: contentRef.current\n  });\n  const [needsA11yCompat, setNeedsA11yCompat] = useState(false);\n  const popoverRef = useRef(null);\n  const popoverRefs = useMergeRefs([popoverRef, useRefEffect(node => {\n    if (!contentRef.current) {\n      return;\n    }\n\n    // If the popover is rendered in a different document than\n    // the content, we need to duplicate the options list in the\n    // content document so that it's available to the screen\n    // readers, which check the DOM ID based aria-* attributes.\n    setNeedsA11yCompat(node.ownerDocument !== contentRef.current.ownerDocument);\n  }, [contentRef])]);\n  useOnClickOutside(popoverRef, reset);\n  const debouncedSpeak = useDebounce(speak, 500);\n  function announce(options) {\n    if (!debouncedSpeak) {\n      return;\n    }\n    if (!!options.length) {\n      if (filterValue) {\n        debouncedSpeak(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.', options.length), options.length), 'assertive');\n      } else {\n        debouncedSpeak(sprintf(/* translators: %d: number of results. */\n        _n('Initial %d result loaded. Type to filter all available results. Use up and down arrow keys to navigate.', 'Initial %d results loaded. Type to filter all available results. Use up and down arrow keys to navigate.', options.length), options.length), 'assertive');\n      }\n    } else {\n      debouncedSpeak(__('No results.'), 'assertive');\n    }\n  }\n  useLayoutEffect(() => {\n    onChangeOptions(items);\n    announce(items);\n    // We want to avoid introducing unexpected side effects.\n    // See https://github.com/WordPress/gutenberg/pull/41820\n  }, [items]);\n  if (items.length === 0) {\n    return null;\n  }\n  return /*#__PURE__*/_jsxs(_Fragment, {\n    children: [/*#__PURE__*/_jsx(Popover, {\n      offset: 8,\n      focusOnMount: false,\n      placement: \"top-start\",\n      className: \"components-autocomplete__popover\",\n      anchor: popoverAnchor,\n      ref: popoverRefs,\n      children: /*#__PURE__*/_jsx(ListBox, {\n        items: items,\n        onSelect: onSelect,\n        selectedIndex: selectedIndex,\n        instanceId: instanceId,\n        listBoxId: listBoxId,\n        className: className\n      })\n    }), contentRef.current && needsA11yCompat && createPortal(/*#__PURE__*/_jsx(ListBox, {\n      items: items,\n      onSelect: onSelect,\n      selectedIndex: selectedIndex,\n      instanceId: instanceId,\n      listBoxId: listBoxId,\n      className: className,\n      Component: VisuallyHidden\n    }), contentRef.current.ownerDocument.body)]\n  });\n}\nfunction useOnClickOutside(ref, handler) {\n  useEffect(() => {\n    const listener = event => {\n      // Do nothing if clicking ref's element or descendent elements, or if the ref is not referencing an element\n      if (!ref.current || ref.current.contains(event.target)) {\n        return;\n      }\n      handler(event);\n    };\n    document.addEventListener('mousedown', listener);\n    document.addEventListener('touchstart', listener);\n    return () => {\n      document.removeEventListener('mousedown', listener);\n      document.removeEventListener('touchstart', listener);\n    };\n  }, [handler, ref]);\n}"],
+  "mappings": "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",
   "names": ["_jsx", "Button", "clsx", "getDefaultUseItems", "_jsxs", "_Fragment", "Popover"]
 }

package/build/autocomplete/get-autocomplete-match.cjs

@@ -0,0 +1,91 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/components/src/autocomplete/get-autocomplete-match.ts
+var get_autocomplete_match_exports = {};
+__export(get_autocomplete_match_exports, {
+  getAutocompleteMatch: () => getAutocompleteMatch
+});
+module.exports = __toCommonJS(get_autocomplete_match_exports);
+var import_remove_accents = __toESM(require("remove-accents"));
+function getAutocompleteMatch(textContent, completers, filteredOptionsLength, isBackspacing, getTextAfterSelection) {
+  if (!textContent) {
+    return null;
+  }
+  let completer = null;
+  let triggerIndex = -1;
+  let matchedEndIndex = -1;
+  let matchedPrefixLength = 0;
+  for (const currentCompleter of completers) {
+    const currentIndex = textContent.lastIndexOf(currentCompleter.triggerPrefix);
+    if (currentIndex < 0) {
+      continue;
+    }
+    const currentEndIndex = currentIndex + currentCompleter.triggerPrefix.length;
+    if (currentEndIndex > matchedEndIndex || currentEndIndex === matchedEndIndex && currentCompleter.triggerPrefix.length > matchedPrefixLength) {
+      completer = currentCompleter;
+      triggerIndex = currentIndex;
+      matchedEndIndex = currentEndIndex;
+      matchedPrefixLength = currentCompleter.triggerPrefix.length;
+    }
+  }
+  if (!completer) {
+    return null;
+  }
+  const {
+    allowContext,
+    triggerPrefix
+  } = completer;
+  const textWithoutTrigger = textContent.slice(triggerIndex + triggerPrefix.length);
+  if (textWithoutTrigger.length > 50) {
+    return null;
+  }
+  const mismatch = filteredOptionsLength === 0;
+  const wordsFromTrigger = textWithoutTrigger.split(/\s/);
+  const hasOneTriggerWord = wordsFromTrigger.length === 1;
+  const matchingWhileBackspacing = isBackspacing && wordsFromTrigger.length <= 3;
+  if (mismatch && !(matchingWhileBackspacing || hasOneTriggerWord)) {
+    return null;
+  }
+  if (allowContext && !allowContext(textContent.slice(0, triggerIndex), getTextAfterSelection())) {
+    return null;
+  }
+  if (/^\s/.test(textWithoutTrigger) || /\s\s+$/.test(textWithoutTrigger)) {
+    return null;
+  }
+  return {
+    completer,
+    filterValue: (0, import_remove_accents.default)(textWithoutTrigger)
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getAutocompleteMatch
+});
+//# sourceMappingURL=get-autocomplete-match.cjs.map

package/build/autocomplete/get-autocomplete-match.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/autocomplete/get-autocomplete-match.ts"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport removeAccents from 'remove-accents';\n\n/**\n * Internal dependencies\n */\n\nexport function getAutocompleteMatch(textContent, completers, filteredOptionsLength, isBackspacing, getTextAfterSelection) {\n  if (!textContent) {\n    return null;\n  }\n\n  // Find the completer whose trigger prefix ends closest to the cursor\n  // (rightmost end position). Comparing end positions instead of start\n  // positions correctly resolves overlapping prefixes like \"@\" and \"@@\".\n  let completer = null;\n  let triggerIndex = -1;\n  let matchedEndIndex = -1;\n  let matchedPrefixLength = 0;\n  for (const currentCompleter of completers) {\n    const currentIndex = textContent.lastIndexOf(currentCompleter.triggerPrefix);\n    if (currentIndex < 0) {\n      continue;\n    }\n    const currentEndIndex = currentIndex + currentCompleter.triggerPrefix.length;\n    if (currentEndIndex > matchedEndIndex || currentEndIndex === matchedEndIndex && currentCompleter.triggerPrefix.length > matchedPrefixLength) {\n      completer = currentCompleter;\n      triggerIndex = currentIndex;\n      matchedEndIndex = currentEndIndex;\n      matchedPrefixLength = currentCompleter.triggerPrefix.length;\n    }\n  }\n  if (!completer) {\n    return null;\n  }\n  const {\n    allowContext,\n    triggerPrefix\n  } = completer;\n  const textWithoutTrigger = textContent.slice(triggerIndex + triggerPrefix.length);\n\n  // Prevent matching with an extremely long string, which causes\n  // the editor to slow-down significantly. This could happen, for\n  // example, if `matchingWhileBackspacing` is true and one of the\n  // \"words\" ends up being too long. Returning null here intentionally\n  // resets the autocompleter state in the caller.\n  if (textWithoutTrigger.length > 50) {\n    return null;\n  }\n  const mismatch = filteredOptionsLength === 0;\n  const wordsFromTrigger = textWithoutTrigger.split(/\\s/);\n\n  // Allow matching when typing a trigger + the match string or when\n  // clicking in an existing trigger word on the page.\n  // E.g. \"Some text @a\" \u2014 \"@a\" is detected as a trigger word.\n  const hasOneTriggerWord = wordsFromTrigger.length === 1;\n\n  // Allow matching when backspacing near a trigger word (up to 3\n  // words from the trigger character). This lets us recover from a\n  // mismatch when backspacing while still imposing sane limits.\n  // E.g. \"Some text @marcelo sekkkk\" \u2014 backspacing \"kkkk\" re-shows\n  // the popup once the text matches again.\n  const matchingWhileBackspacing = isBackspacing && wordsFromTrigger.length <= 3;\n  if (mismatch && !(matchingWhileBackspacing || hasOneTriggerWord)) {\n    return null;\n  }\n  if (allowContext && !allowContext(textContent.slice(0, triggerIndex), getTextAfterSelection())) {\n    return null;\n  }\n  if (/^\\s/.test(textWithoutTrigger) || /\\s\\s+$/.test(textWithoutTrigger)) {\n    return null;\n  }\n  return {\n    completer,\n    filterValue: removeAccents(textWithoutTrigger)\n  };\n}"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,4BAA0B;AAMnB,SAAS,qBAAqB,aAAa,YAAY,uBAAuB,eAAe,uBAAuB;AACzH,MAAI,CAAC,aAAa;AAChB,WAAO;AAAA,EACT;AAKA,MAAI,YAAY;AAChB,MAAI,eAAe;AACnB,MAAI,kBAAkB;AACtB,MAAI,sBAAsB;AAC1B,aAAW,oBAAoB,YAAY;AACzC,UAAM,eAAe,YAAY,YAAY,iBAAiB,aAAa;AAC3E,QAAI,eAAe,GAAG;AACpB;AAAA,IACF;AACA,UAAM,kBAAkB,eAAe,iBAAiB,cAAc;AACtE,QAAI,kBAAkB,mBAAmB,oBAAoB,mBAAmB,iBAAiB,cAAc,SAAS,qBAAqB;AAC3I,kBAAY;AACZ,qBAAe;AACf,wBAAkB;AAClB,4BAAsB,iBAAiB,cAAc;AAAA,IACvD;AAAA,EACF;AACA,MAAI,CAAC,WAAW;AACd,WAAO;AAAA,EACT;AACA,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,qBAAqB,YAAY,MAAM,eAAe,cAAc,MAAM;AAOhF,MAAI,mBAAmB,SAAS,IAAI;AAClC,WAAO;AAAA,EACT;AACA,QAAM,WAAW,0BAA0B;AAC3C,QAAM,mBAAmB,mBAAmB,MAAM,IAAI;AAKtD,QAAM,oBAAoB,iBAAiB,WAAW;AAOtD,QAAM,2BAA2B,iBAAiB,iBAAiB,UAAU;AAC7E,MAAI,YAAY,EAAE,4BAA4B,oBAAoB;AAChE,WAAO;AAAA,EACT;AACA,MAAI,gBAAgB,CAAC,aAAa,YAAY,MAAM,GAAG,YAAY,GAAG,sBAAsB,CAAC,GAAG;AAC9F,WAAO;AAAA,EACT;AACA,MAAI,MAAM,KAAK,kBAAkB,KAAK,SAAS,KAAK,kBAAkB,GAAG;AACvE,WAAO;AAAA,EACT;AACA,SAAO;AAAA,IACL;AAAA,IACA,iBAAa,sBAAAA,SAAc,kBAAkB;AAAA,EAC/C;AACF;",
+  "names": ["removeAccents"]
+}