@wordpress/components 32.0.2-next.v.0 → 32.1.1-next.v.0

package/CHANGELOG.md

@@ -2,12 +2,16 @@
 
 ## Unreleased
 
-## 32.0.1-next.0 (2026-01-23)
+## 32.1.0 (2026-01-29)
 
 ### Code Quality
 
 -   Add `displayName` to components to improve debugging and fix Storybook source code. [#74716](https://github.com/WordPress/gutenberg/pull/74716)
 
+### Internal
+
+-   `ValidatedComboboxControl`: Expose the component under private API's. [#74891](https://github.com/WordPress/gutenberg/pull/74891)
+
 ## 32.0.0 (2026-01-16)
 
 ### Code Quality

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

@@ -40,128 +40,13 @@ var import_visually_hidden = require("../visually-hidden/index.cjs");
 var import_utils = require("./utils.cjs");
 
 // packages/components/src/alignment-matrix-control/style.module.scss
-var css = `/**
- * SCSS Variables.
- *
- * Please use variables from this sheet to ensure consistency across the UI.
- * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
- * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
- */
-/**
- * Colors
- */
-/**
- * Fonts & basic variables.
- */
-/**
- * Typography
- */
-/**
- * Grid System.
- * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
- */
-/**
- * Radius scale.
- */
-/**
- * Elevation scale.
- */
-/**
- * Dimensions.
- */
-/**
- * Mobile specific styles
- */
-/**
- * Editor styles.
- */
-/**
- * Block & Editor UI.
- */
-/**
- * Block paddings.
- */
-/**
- * React Native specific.
- * These variables do not appear to be used anywhere else.
- */
-.style-module__grid-container__AuKvW {
-  direction: ltr;
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-template-rows: repeat(3, 1fr);
-  box-sizing: border-box;
-  aspect-ratio: 1;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  outline: none;
-  cursor: pointer;
+if (typeof document !== "undefined" && !document.head.querySelector("style[data-wp-hash='0584b48070']")) {
+  const style = document.createElement("style");
+  style.setAttribute("data-wp-hash", "0584b48070");
+  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);
 }
-
-.style-module__grid-row__xCH47 {
-  grid-column: 1/-1;
-  box-sizing: border-box;
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-}
-
-.style-module__cell__Ovdp9 {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-  appearance: none;
-  border: none;
-  outline: none;
-}
-
-.style-module__point__N-8S1 {
-  display: block;
-  contain: strict;
-  box-sizing: border-box;
-  width: 6px;
-  aspect-ratio: 1;
-  margin: auto;
-  color: var(--wp-components-color-gray-400, #ccc);
-  /* Use border instead of background color so that the point shows
-  in Windows High Contrast Mode */
-  border: 3px solid currentColor;
-  /* Highlight active item */
-}
-.style-module__cell__Ovdp9[data-active-item] .style-module__point__N-8S1 {
-  color: var(--wp-components-color-foreground, #1e1e1e);
-  transform: scale(1.6666666667);
-}
-.style-module__point__N-8S1 {
-  /* Hover styles for non-active items */
-}
-.style-module__cell__Ovdp9:not([data-active-item]):hover .style-module__point__N-8S1 {
-  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
-}
-.style-module__point__N-8S1 {
-  /* Show an outline only when interacting with keyboard */
-}
-.style-module__cell__Ovdp9[data-focus-visible] .style-module__point__N-8S1 {
-  outline: 1px solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
-  outline-offset: 1px;
-}
-@media not (prefers-reduced-motion) {
-  .style-module__point__N-8S1 {
-    transition-property: color, transform;
-    transition-duration: 120ms;
-    transition-timing-function: linear;
-  }
-}`;
-document.head.appendChild(document.createElement("style")).appendChild(document.createTextNode(css));
-var style_module_default = {
-  "grid-container": "style-module__grid-container__AuKvW",
-  "grid-row": "style-module__grid-row__xCH47",
-  "cell": "style-module__cell__Ovdp9",
-  "point": "style-module__point__N-8S1"
-};
+var style_module_default = { "grid-container": "_02e2af5803bf5bda__grid-container", "grid-row": "c421f8ed08c23077__grid-row", "cell": "_3af769f755097fdb__cell", "point": "_37ef12d4fb6d6131__point" };
 
 // packages/components/src/alignment-matrix-control/cell.tsx
 var import_jsx_runtime = require("react/jsx-runtime");

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}", "const css = `/**\n * SCSS Variables.\n *\n * Please use variables from this sheet to ensure consistency across the UI.\n * Don't add to this sheet unless you're pretty sure the value will be reused in many places.\n * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.\n */\n/**\n * Colors\n */\n/**\n * Fonts & basic variables.\n */\n/**\n * Typography\n */\n/**\n * Grid System.\n * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/\n */\n/**\n * Radius scale.\n */\n/**\n * Elevation scale.\n */\n/**\n * Dimensions.\n */\n/**\n * Mobile specific styles\n */\n/**\n * Editor styles.\n */\n/**\n * Block & Editor UI.\n */\n/**\n * Block paddings.\n */\n/**\n * React Native specific.\n * These variables do not appear to be used anywhere else.\n */\n.style-module__grid-container__AuKvW {\n  direction: ltr;\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  grid-template-rows: repeat(3, 1fr);\n  box-sizing: border-box;\n  aspect-ratio: 1;\n  border: 1px solid transparent;\n  border-radius: 4px;\n  outline: none;\n  cursor: pointer;\n}\n\n.style-module__grid-row__xCH47 {\n  grid-column: 1/-1;\n  box-sizing: border-box;\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n}\n\n.style-module__cell__Ovdp9 {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  appearance: none;\n  border: none;\n  outline: none;\n}\n\n.style-module__point__N-8S1 {\n  display: block;\n  contain: strict;\n  box-sizing: border-box;\n  width: 6px;\n  aspect-ratio: 1;\n  margin: auto;\n  color: var(--wp-components-color-gray-400, #ccc);\n  /* Use border instead of background color so that the point shows\n  in Windows High Contrast Mode */\n  border: 3px solid currentColor;\n  /* Highlight active item */\n}\n.style-module__cell__Ovdp9[data-active-item] .style-module__point__N-8S1 {\n  color: var(--wp-components-color-foreground, #1e1e1e);\n  transform: scale(1.6666666667);\n}\n.style-module__point__N-8S1 {\n  /* Hover styles for non-active items */\n}\n.style-module__cell__Ovdp9:not([data-active-item]):hover .style-module__point__N-8S1 {\n  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));\n}\n.style-module__point__N-8S1 {\n  /* Show an outline only when interacting with keyboard */\n}\n.style-module__cell__Ovdp9[data-focus-visible] .style-module__point__N-8S1 {\n  outline: 1px solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));\n  outline-offset: 1px;\n}\n@media not (prefers-reduced-motion) {\n  .style-module__point__N-8S1 {\n    transition-property: color, transform;\n    transition-duration: 120ms;\n    transition-timing-function: linear;\n  }\n}`;\ndocument.head\n    .appendChild(document.createElement(\"style\"))\n    .appendChild(document.createTextNode(css));\nexport {css};\nexport default {\n  \"grid-container\": \"style-module__grid-container__AuKvW\",\n  \"grid-row\": \"style-module__grid-row__xCH47\",\n  \"cell\": \"style-module__cell__Ovdp9\",\n  \"point\": \"style-module__point__N-8S1\"\n};"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAKjB,uBAA0B;AAC1B,qBAAoB;AACpB,6BAA+B;AAK/B,mBAAgC;;;ACfhC,IAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmHZ,SAAS,KACJ,YAAY,SAAS,cAAc,OAAO,CAAC,EAC3C,YAAY,SAAS,eAAe,GAAG,CAAC;AAE7C,IAAO,uBAAQ;AAAA,EACb,kBAAkB;AAAA,EAClB,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,SAAS;AACX;;;AD3GA,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' && !document.head.querySelector(\"style[data-wp-hash='0584b48070']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"0584b48070\");\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,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AACxG,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/icon.cjs

@@ -52,12 +52,11 @@ function AlignmentMatrixControlIcon({
   value = "center",
   ...props
 }) {
-  var _ref, _ref2;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_primitives.SVG, {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: `0 0 ${BASE_SIZE} ${BASE_SIZE}`,
-    width: (_ref = size !== null && size !== void 0 ? size : width) !== null && _ref !== void 0 ? _ref : BASE_SIZE,
-    height: (_ref2 = size !== null && size !== void 0 ? size : height) !== null && _ref2 !== void 0 ? _ref2 : BASE_SIZE,
+    width: size ?? width ?? BASE_SIZE,
+    height: size ?? height ?? BASE_SIZE,
     role: "presentation",
     className: (0, import_clsx.default)("component-alignment-matrix-control-icon", className),
     style: {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/alignment-matrix-control/icon.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { Rect, SVG } from '@wordpress/primitives';\n\n/**\n * Internal dependencies\n */\nimport { ALIGNMENTS, getAlignmentIndex } from './utils';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst BASE_SIZE = 24;\nconst GRID_CELL_SIZE = 7;\nconst GRID_PADDING = (BASE_SIZE - 3 * GRID_CELL_SIZE) / 2;\nconst DOT_SIZE = 2;\nconst DOT_SIZE_SELECTED = 4;\nfunction AlignmentMatrixControlIcon({\n  className,\n  disablePointerEvents = true,\n  size,\n  width,\n  height,\n  style = {},\n  value = 'center',\n  ...props\n}) {\n  var _ref, _ref2;\n  return /*#__PURE__*/_jsx(SVG, {\n    xmlns: \"http://www.w3.org/2000/svg\",\n    viewBox: `0 0 ${BASE_SIZE} ${BASE_SIZE}`,\n    width: (_ref = size !== null && size !== void 0 ? size : width) !== null && _ref !== void 0 ? _ref : BASE_SIZE,\n    height: (_ref2 = size !== null && size !== void 0 ? size : height) !== null && _ref2 !== void 0 ? _ref2 : BASE_SIZE,\n    role: \"presentation\",\n    className: clsx('component-alignment-matrix-control-icon', className),\n    style: {\n      pointerEvents: disablePointerEvents ? 'none' : undefined,\n      ...style\n    },\n    ...props,\n    children: ALIGNMENTS.map((align, index) => {\n      const dotSize = getAlignmentIndex(value) === index ? DOT_SIZE_SELECTED : DOT_SIZE;\n      return /*#__PURE__*/_jsx(Rect, {\n        x: GRID_PADDING + index % 3 * GRID_CELL_SIZE + (GRID_CELL_SIZE - dotSize) / 2,\n        y: GRID_PADDING + Math.floor(index / 3) * GRID_CELL_SIZE + (GRID_CELL_SIZE - dotSize) / 2,\n        width: dotSize,\n        height: dotSize,\n        fill: \"currentColor\"\n      }, align);\n    })\n  });\n}\nexport default AlignmentMatrixControlIcon;"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAKjB,wBAA0B;AAK1B,mBAA8C;AAC9C,yBAA4B;AAC5B,IAAM,YAAY;AAClB,IAAM,iBAAiB;AACvB,IAAM,gBAAgB,YAAY,IAAI,kBAAkB;AACxD,IAAM,WAAW;AACjB,IAAM,oBAAoB;AAC1B,SAAS,2BAA2B;AAAA,EAClC;AAAA,EACA,uBAAuB;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ,CAAC;AAAA,EACT,QAAQ;AAAA,EACR,GAAG;AACL,GAAG;AACD,MAAI,MAAM;AACV,SAAoB,uCAAAA,KAAK,uBAAK;AAAA,IAC5B,OAAO;AAAA,IACP,SAAS,OAAO,SAAS,IAAI,SAAS;AAAA,IACtC,QAAQ,OAAO,SAAS,QAAQ,SAAS,SAAS,OAAO,WAAW,QAAQ,SAAS,SAAS,OAAO;AAAA,IACrG,SAAS,QAAQ,SAAS,QAAQ,SAAS,SAAS,OAAO,YAAY,QAAQ,UAAU,SAAS,QAAQ;AAAA,IAC1G,MAAM;AAAA,IACN,eAAW,YAAAC,SAAK,2CAA2C,SAAS;AAAA,IACpE,OAAO;AAAA,MACL,eAAe,uBAAuB,SAAS;AAAA,MAC/C,GAAG;AAAA,IACL;AAAA,IACA,GAAG;AAAA,IACH,UAAU,wBAAW,IAAI,CAAC,OAAO,UAAU;AACzC,YAAM,cAAU,gCAAkB,KAAK,MAAM,QAAQ,oBAAoB;AACzE,aAAoB,uCAAAD,KAAK,wBAAM;AAAA,QAC7B,GAAG,eAAe,QAAQ,IAAI,kBAAkB,iBAAiB,WAAW;AAAA,QAC5E,GAAG,eAAe,KAAK,MAAM,QAAQ,CAAC,IAAI,kBAAkB,iBAAiB,WAAW;AAAA,QACxF,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,MAAM;AAAA,MACR,GAAG,KAAK;AAAA,IACV,CAAC;AAAA,EACH,CAAC;AACH;AACA,IAAO,eAAQ;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { Rect, SVG } from '@wordpress/primitives';\n\n/**\n * Internal dependencies\n */\nimport { ALIGNMENTS, getAlignmentIndex } from './utils';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst BASE_SIZE = 24;\nconst GRID_CELL_SIZE = 7;\nconst GRID_PADDING = (BASE_SIZE - 3 * GRID_CELL_SIZE) / 2;\nconst DOT_SIZE = 2;\nconst DOT_SIZE_SELECTED = 4;\nfunction AlignmentMatrixControlIcon({\n  className,\n  disablePointerEvents = true,\n  size,\n  width,\n  height,\n  style = {},\n  value = 'center',\n  ...props\n}) {\n  return /*#__PURE__*/_jsx(SVG, {\n    xmlns: \"http://www.w3.org/2000/svg\",\n    viewBox: `0 0 ${BASE_SIZE} ${BASE_SIZE}`,\n    width: size ?? width ?? BASE_SIZE,\n    height: size ?? height ?? BASE_SIZE,\n    role: \"presentation\",\n    className: clsx('component-alignment-matrix-control-icon', className),\n    style: {\n      pointerEvents: disablePointerEvents ? 'none' : undefined,\n      ...style\n    },\n    ...props,\n    children: ALIGNMENTS.map((align, index) => {\n      const dotSize = getAlignmentIndex(value) === index ? DOT_SIZE_SELECTED : DOT_SIZE;\n      return /*#__PURE__*/_jsx(Rect, {\n        x: GRID_PADDING + index % 3 * GRID_CELL_SIZE + (GRID_CELL_SIZE - dotSize) / 2,\n        y: GRID_PADDING + Math.floor(index / 3) * GRID_CELL_SIZE + (GRID_CELL_SIZE - dotSize) / 2,\n        width: dotSize,\n        height: dotSize,\n        fill: \"currentColor\"\n      }, align);\n    })\n  });\n}\nexport default AlignmentMatrixControlIcon;"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAKjB,wBAA0B;AAK1B,mBAA8C;AAC9C,yBAA4B;AAC5B,IAAM,YAAY;AAClB,IAAM,iBAAiB;AACvB,IAAM,gBAAgB,YAAY,IAAI,kBAAkB;AACxD,IAAM,WAAW;AACjB,IAAM,oBAAoB;AAC1B,SAAS,2BAA2B;AAAA,EAClC;AAAA,EACA,uBAAuB;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ,CAAC;AAAA,EACT,QAAQ;AAAA,EACR,GAAG;AACL,GAAG;AACD,SAAoB,uCAAAA,KAAK,uBAAK;AAAA,IAC5B,OAAO;AAAA,IACP,SAAS,OAAO,SAAS,IAAI,SAAS;AAAA,IACtC,OAAO,QAAQ,SAAS;AAAA,IACxB,QAAQ,QAAQ,UAAU;AAAA,IAC1B,MAAM;AAAA,IACN,eAAW,YAAAC,SAAK,2CAA2C,SAAS;AAAA,IACpE,OAAO;AAAA,MACL,eAAe,uBAAuB,SAAS;AAAA,MAC/C,GAAG;AAAA,IACL;AAAA,IACA,GAAG;AAAA,IACH,UAAU,wBAAW,IAAI,CAAC,OAAO,UAAU;AACzC,YAAM,cAAU,gCAAkB,KAAK,MAAM,QAAQ,oBAAoB;AACzE,aAAoB,uCAAAD,KAAK,wBAAM;AAAA,QAC7B,GAAG,eAAe,QAAQ,IAAI,kBAAkB,iBAAiB,WAAW;AAAA,QAC5E,GAAG,eAAe,KAAK,MAAM,QAAQ,CAAC,IAAI,kBAAkB,iBAAiB,WAAW;AAAA,QACxF,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,MAAM;AAAA,MACR,GAAG,KAAK;AAAA,IACV,CAAC;AAAA,EACH,CAAC;AACH;AACA,IAAO,eAAQ;",
   "names": ["_jsx", "clsx"]
 }

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

@@ -44,128 +44,13 @@ var import_icon = __toESM(require("./icon.cjs"));
 var import_utils = require("./utils.cjs");
 
 // packages/components/src/alignment-matrix-control/style.module.scss
-var css = `/**
- * SCSS Variables.
- *
- * Please use variables from this sheet to ensure consistency across the UI.
- * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
- * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
- */
-/**
- * Colors
- */
-/**
- * Fonts & basic variables.
- */
-/**
- * Typography
- */
-/**
- * Grid System.
- * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
- */
-/**
- * Radius scale.
- */
-/**
- * Elevation scale.
- */
-/**
- * Dimensions.
- */
-/**
- * Mobile specific styles
- */
-/**
- * Editor styles.
- */
-/**
- * Block & Editor UI.
- */
-/**
- * Block paddings.
- */
-/**
- * React Native specific.
- * These variables do not appear to be used anywhere else.
- */
-.style-module__grid-container__AuKvW {
-  direction: ltr;
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-template-rows: repeat(3, 1fr);
-  box-sizing: border-box;
-  aspect-ratio: 1;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  outline: none;
-  cursor: pointer;
+if (typeof document !== "undefined" && !document.head.querySelector("style[data-wp-hash='0584b48070']")) {
+  const style = document.createElement("style");
+  style.setAttribute("data-wp-hash", "0584b48070");
+  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);
 }
-
-.style-module__grid-row__xCH47 {
-  grid-column: 1/-1;
-  box-sizing: border-box;
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-}
-
-.style-module__cell__Ovdp9 {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-  appearance: none;
-  border: none;
-  outline: none;
-}
-
-.style-module__point__N-8S1 {
-  display: block;
-  contain: strict;
-  box-sizing: border-box;
-  width: 6px;
-  aspect-ratio: 1;
-  margin: auto;
-  color: var(--wp-components-color-gray-400, #ccc);
-  /* Use border instead of background color so that the point shows
-  in Windows High Contrast Mode */
-  border: 3px solid currentColor;
-  /* Highlight active item */
-}
-.style-module__cell__Ovdp9[data-active-item] .style-module__point__N-8S1 {
-  color: var(--wp-components-color-foreground, #1e1e1e);
-  transform: scale(1.6666666667);
-}
-.style-module__point__N-8S1 {
-  /* Hover styles for non-active items */
-}
-.style-module__cell__Ovdp9:not([data-active-item]):hover .style-module__point__N-8S1 {
-  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
-}
-.style-module__point__N-8S1 {
-  /* Show an outline only when interacting with keyboard */
-}
-.style-module__cell__Ovdp9[data-focus-visible] .style-module__point__N-8S1 {
-  outline: 1px solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
-  outline-offset: 1px;
-}
-@media not (prefers-reduced-motion) {
-  .style-module__point__N-8S1 {
-    transition-property: color, transform;
-    transition-duration: 120ms;
-    transition-timing-function: linear;
-  }
-}`;
-document.head.appendChild(document.createElement("style")).appendChild(document.createTextNode(css));
-var style_module_default = {
-  "grid-container": "style-module__grid-container__AuKvW",
-  "grid-row": "style-module__grid-row__xCH47",
-  "cell": "style-module__cell__Ovdp9",
-  "point": "style-module__point__N-8S1"
-};
+var style_module_default = { "grid-container": "_02e2af5803bf5bda__grid-container", "grid-row": "c421f8ed08c23077__grid-row", "cell": "_3af769f755097fdb__cell", "point": "_37ef12d4fb6d6131__point" };
 
 // packages/components/src/alignment-matrix-control/index.tsx
 var import_jsx_runtime = require("react/jsx-runtime");

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;", "const css = `/**\n * SCSS Variables.\n *\n * Please use variables from this sheet to ensure consistency across the UI.\n * Don't add to this sheet unless you're pretty sure the value will be reused in many places.\n * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.\n */\n/**\n * Colors\n */\n/**\n * Fonts & basic variables.\n */\n/**\n * Typography\n */\n/**\n * Grid System.\n * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/\n */\n/**\n * Radius scale.\n */\n/**\n * Elevation scale.\n */\n/**\n * Dimensions.\n */\n/**\n * Mobile specific styles\n */\n/**\n * Editor styles.\n */\n/**\n * Block & Editor UI.\n */\n/**\n * Block paddings.\n */\n/**\n * React Native specific.\n * These variables do not appear to be used anywhere else.\n */\n.style-module__grid-container__AuKvW {\n  direction: ltr;\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  grid-template-rows: repeat(3, 1fr);\n  box-sizing: border-box;\n  aspect-ratio: 1;\n  border: 1px solid transparent;\n  border-radius: 4px;\n  outline: none;\n  cursor: pointer;\n}\n\n.style-module__grid-row__xCH47 {\n  grid-column: 1/-1;\n  box-sizing: border-box;\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n}\n\n.style-module__cell__Ovdp9 {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  appearance: none;\n  border: none;\n  outline: none;\n}\n\n.style-module__point__N-8S1 {\n  display: block;\n  contain: strict;\n  box-sizing: border-box;\n  width: 6px;\n  aspect-ratio: 1;\n  margin: auto;\n  color: var(--wp-components-color-gray-400, #ccc);\n  /* Use border instead of background color so that the point shows\n  in Windows High Contrast Mode */\n  border: 3px solid currentColor;\n  /* Highlight active item */\n}\n.style-module__cell__Ovdp9[data-active-item] .style-module__point__N-8S1 {\n  color: var(--wp-components-color-foreground, #1e1e1e);\n  transform: scale(1.6666666667);\n}\n.style-module__point__N-8S1 {\n  /* Hover styles for non-active items */\n}\n.style-module__cell__Ovdp9:not([data-active-item]):hover .style-module__point__N-8S1 {\n  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));\n}\n.style-module__point__N-8S1 {\n  /* Show an outline only when interacting with keyboard */\n}\n.style-module__cell__Ovdp9[data-focus-visible] .style-module__point__N-8S1 {\n  outline: 1px solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));\n  outline-offset: 1px;\n}\n@media not (prefers-reduced-motion) {\n  .style-module__point__N-8S1 {\n    transition-property: color, transform;\n    transition-duration: 120ms;\n    transition-timing-function: linear;\n  }\n}`;\ndocument.head\n    .appendChild(document.createElement(\"style\"))\n    .appendChild(document.createTextNode(css));\nexport {css};\nexport default {\n  \"grid-container\": \"style-module__grid-container__AuKvW\",\n  \"grid-row\": \"style-module__grid-row__xCH47\",\n  \"cell\": \"style-module__cell__Ovdp9\",\n  \"point\": \"style-module__point__N-8S1\"\n};"],
-  "mappings": "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",
+  "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' && !document.head.querySelector(\"style[data-wp-hash='0584b48070']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"0584b48070\");\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,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AACxG,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,92 +38,13 @@ var import_element = require("@wordpress/element");
 var import_compose = require("@wordpress/compose");
 
 // packages/components/src/angle-picker-control/style.module.scss
-var css = `/**
- * SCSS Variables.
- *
- * Please use variables from this sheet to ensure consistency across the UI.
- * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
- * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
- */
-/**
- * Colors
- */
-/**
- * Fonts & basic variables.
- */
-/**
- * Typography
- */
-/**
- * Grid System.
- * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
- */
-/**
- * Radius scale.
- */
-/**
- * Elevation scale.
- */
-/**
- * Dimensions.
- */
-/**
- * Mobile specific styles
- */
-/**
- * Editor styles.
- */
-/**
- * Block & Editor UI.
- */
-/**
- * Block paddings.
- */
-/**
- * React Native specific.
- * These variables do not appear to be used anywhere else.
- */
-.style-module__circle-root__j1e41 {
-  border-radius: 50%;
-  border: 1px solid var(--wp-components-color-gray-600, #949494);
-  box-sizing: border-box;
-  cursor: grab;
-  height: 32px;
-  overflow: hidden;
-  width: 32px;
+if (typeof document !== "undefined" && !document.head.querySelector("style[data-wp-hash='a61a1d6ad7']")) {
+  const style = document.createElement("style");
+  style.setAttribute("data-wp-hash", "a61a1d6ad7");
+  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);
 }
-.style-module__circle-root__j1e41:active {
-  cursor: grabbing;
-}
-
-.style-module__circle-indicator-wrapper__sbrph {
-  box-sizing: border-box;
-  position: relative;
-  width: 100%;
-  height: 100%;
-}
-.style-module__circle-indicator-wrapper__sbrph:focus-visible {
-  outline: none;
-}
-
-.style-module__circle-indicator__bS-go {
-  background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
-  border-radius: 50%;
-  box-sizing: border-box;
-  display: block;
-  left: 50%;
-  top: 4px;
-  transform: translateX(-50%);
-  position: absolute;
-  width: 6px;
-  height: 6px;
-}`;
-document.head.appendChild(document.createElement("style")).appendChild(document.createTextNode(css));
-var style_module_default = {
-  "circle-root": "style-module__circle-root__j1e41",
-  "circle-indicator-wrapper": "style-module__circle-indicator-wrapper__sbrph",
-  "circle-indicator": "style-module__circle-indicator__bS-go"
-};
+var style_module_default = { "circle-root": "_8f57b8d483c51fbe__circle-root", "circle-indicator-wrapper": "b1bae984ac10fcc3__circle-indicator-wrapper", "circle-indicator": "_6d2fe0a2cbb31bf0__circle-indicator" };
 
 // packages/components/src/angle-picker-control/angle-circle.tsx
 var import_jsx_runtime = require("react/jsx-runtime");

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();\n  const previousCursorValueRef = useRef();\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;", "const css = `/**\n * SCSS Variables.\n *\n * Please use variables from this sheet to ensure consistency across the UI.\n * Don't add to this sheet unless you're pretty sure the value will be reused in many places.\n * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.\n */\n/**\n * Colors\n */\n/**\n * Fonts & basic variables.\n */\n/**\n * Typography\n */\n/**\n * Grid System.\n * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/\n */\n/**\n * Radius scale.\n */\n/**\n * Elevation scale.\n */\n/**\n * Dimensions.\n */\n/**\n * Mobile specific styles\n */\n/**\n * Editor styles.\n */\n/**\n * Block & Editor UI.\n */\n/**\n * Block paddings.\n */\n/**\n * React Native specific.\n * These variables do not appear to be used anywhere else.\n */\n.style-module__circle-root__j1e41 {\n  border-radius: 50%;\n  border: 1px solid var(--wp-components-color-gray-600, #949494);\n  box-sizing: border-box;\n  cursor: grab;\n  height: 32px;\n  overflow: hidden;\n  width: 32px;\n}\n.style-module__circle-root__j1e41:active {\n  cursor: grabbing;\n}\n\n.style-module__circle-indicator-wrapper__sbrph {\n  box-sizing: border-box;\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.style-module__circle-indicator-wrapper__sbrph:focus-visible {\n  outline: none;\n}\n\n.style-module__circle-indicator__bS-go {\n  background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));\n  border-radius: 50%;\n  box-sizing: border-box;\n  display: block;\n  left: 50%;\n  top: 4px;\n  transform: translateX(-50%);\n  position: absolute;\n  width: 6px;\n  height: 6px;\n}`;\ndocument.head\n    .appendChild(document.createElement(\"style\"))\n    .appendChild(document.createTextNode(css));\nexport {css};\nexport default {\n  \"circle-root\": \"style-module__circle-root__j1e41\",\n  \"circle-indicator-wrapper\": \"style-module__circle-indicator-wrapper__sbrph\",\n  \"circle-indicator\": \"style-module__circle-indicator__bS-go\"\n};"],
-  "mappings": "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",
+  "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();\n  const previousCursorValueRef = useRef();\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' && !document.head.querySelector(\"style[data-wp-hash='a61a1d6ad7']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"a61a1d6ad7\");\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/autocomplete/autocompleter-ui.cjs

@@ -76,8 +76,7 @@ function ListBox({
   });
 }
 function getAutoCompleterUI(autocompleter) {
-  var _autocompleter$useIte;
-  const useItems = (_autocompleter$useIte = autocompleter.useItems) !== null && _autocompleter$useIte !== void 0 ? _autocompleter$useIte : (0, import_get_default_use_items.default)(autocompleter);
+  const useItems = autocompleter.useItems ?? (0, import_get_default_use_items.default)(autocompleter);
   function AutocompleterUI({
     filterValue,
     instanceId,

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  var _autocompleter$useIte;\n  const useItems = (_autocompleter$useIte = autocompleter.useItems) !== null && _autocompleter$useIte !== void 0 ? _autocompleter$useIte : 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 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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",
   "names": ["_jsx", "Button", "clsx", "getDefaultUseItems", "_jsxs", "_Fragment", "Popover"]
 }