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

package/CHANGELOG.md

@@ -2,7 +2,26 @@
 
 ## Unreleased
 
-## 30.5.0-next.0 (2025-09-24)
+## 30.6.0-next.0 (2025-10-16)
+
+### Enhancements
+
+-   `SearchControl`: Move search icon to prefix position ([#71984](https://github.com/WordPress/gutenberg/pull/71984)).
+-   `SearchControl`: Flip search icon depending on placement ([#72070](https://github.com/WordPress/gutenberg/pull/72070)).
+-   `SearchControl`: Normalize styles ([#72072](https://github.com/WordPress/gutenberg/pull/72072)).
+-   `Badge`: Avoid propagating text-decoration styles from ancestors into the component ([#72097](https://github.com/WordPress/gutenberg/pull/72097), [#72302](https://github.com/WordPress/gutenberg/pull/72302)).
+-   `CheckboxControl`, `RadioControl`, `ToggleControl` (`FormToggle`): Ensure elements are focused when clicked in Safari ([#72115](https://github.com/WordPress/gutenberg/pull/72115)).
+
+### Bug Fixes
+
+-   `ValidatedCheckboxControl`, `ValidatedRadioControl`, `ValidatedToggleControl`: Fix issue where validation may not be triggered in Safari when elements are toggled by clicking ([#72115](https://github.com/WordPress/gutenberg/pull/72115)).
+
+### Internal
+
+-   Replace usage of extinct icons `edit` and `warning` with `pencil` and `cautionFilled`, respectively ([#72105](https://github.com/WordPress/gutenberg/pull/72105)).
+-   Move the package to v2 build pipeline. Rewrite styles to be dart-sass compatible ([#72242](https://github.com/WordPress/gutenberg/pull/72242)).
+
+## 30.5.0 (2025-10-01)
 
 ### Enhancements
 

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

@@ -1,43 +1,61 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
+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);
+var cell_exports = {};
+__export(cell_exports, {
+  default: () => Cell
 });
-exports.default = Cell;
-var _composite = require("../composite");
-var _tooltip = _interopRequireDefault(require("../tooltip"));
-var _visuallyHidden = require("../visually-hidden");
-var _utils = require("./utils");
-var _styles = require("./styles");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * Internal dependencies
- */
-
-/**
- * Internal dependencies
- */
-
+module.exports = __toCommonJS(cell_exports);
+var import_composite = require("../composite");
+var import_tooltip = __toESM(require("../tooltip"));
+var import_visually_hidden = require("../visually-hidden");
+var import_utils = require("./utils");
+var import_styles = require("./styles");
+var import_jsx_runtime = require("react/jsx-runtime");
 function Cell({
   id,
   value,
   ...props
 }) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.default, {
-    text: _utils.ALIGNMENT_LABEL[value],
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_composite.Composite.Item, {
-      id: id,
-      render: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Cell, {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tooltip.default, {
+    text: import_utils.ALIGNMENT_LABEL[value],
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_composite.Composite.Item, {
+      id,
+      render: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.Cell, {
         ...props,
         role: "gridcell"
       }),
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_visuallyHidden.VisuallyHidden, {
+      children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_visually_hidden.VisuallyHidden, {
         children: value
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Point, {
+      }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.Point, {
         role: "presentation"
       })]
     })
   });
 }
-//# sourceMappingURL=cell.js.map
+//# sourceMappingURL=cell.js.map

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

@@ -1 +1,7 @@
-{"version":3,"names":["_composite","require","_tooltip","_interopRequireDefault","_visuallyHidden","_utils","_styles","_jsxRuntime","Cell","id","value","props","jsx","default","text","ALIGNMENT_LABEL","children","jsxs","Composite","Item","render","role","VisuallyHidden","Point"],"sources":["@wordpress/components/src/alignment-matrix-control/cell.tsx"],"sourcesContent":["/**\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 { Cell as CellView, Point } from './styles';\nimport type { AlignmentMatrixControlCellProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\nexport default function Cell( {\n\tid,\n\tvalue,\n\t...props\n}: WordPressComponentProps< AlignmentMatrixControlCellProps, 'span', false > ) {\n\treturn (\n\t\t<Tooltip text={ ALIGNMENT_LABEL[ value ] }>\n\t\t\t<Composite.Item\n\t\t\t\tid={ id }\n\t\t\t\trender={ <CellView { ...props } role=\"gridcell\" /> }\n\t\t\t>\n\t\t\t\t{ /* VoiceOver needs a text content to be rendered within grid cell,\n\t\t\totherwise it'll announce the content as \"blank\". So we use a visually\n\t\t\thidden element instead of aria-label. */ }\n\t\t\t\t<VisuallyHidden>{ value }</VisuallyHidden>\n\t\t\t\t<Point role=\"presentation\" />\n\t\t\t</Composite.Item>\n\t\t</Tooltip>\n\t);\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,UAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,eAAA,GAAAH,OAAA;AAKA,IAAAI,MAAA,GAAAJ,OAAA;AACA,IAAAK,OAAA,GAAAL,OAAA;AAAmD,IAAAM,WAAA,GAAAN,OAAA;AAXnD;AACA;AACA;;AAKA;AACA;AACA;;AAMe,SAASO,IAAIA,CAAE;EAC7BC,EAAE;EACFC,KAAK;EACL,GAAGC;AACuE,CAAC,EAAG;EAC9E,oBACC,IAAAJ,WAAA,CAAAK,GAAA,EAACV,QAAA,CAAAW,OAAO;IAACC,IAAI,EAAGC,sBAAe,CAAEL,KAAK,CAAI;IAAAM,QAAA,eACzC,IAAAT,WAAA,CAAAU,IAAA,EAACjB,UAAA,CAAAkB,SAAS,CAACC,IAAI;MACdV,EAAE,EAAGA,EAAI;MACTW,MAAM,eAAG,IAAAb,WAAA,CAAAK,GAAA,EAACN,OAAA,CAAAE,IAAQ;QAAA,GAAMG,KAAK;QAAGU,IAAI,EAAC;MAAU,CAAE,CAAG;MAAAL,QAAA,gBAKpD,IAAAT,WAAA,CAAAK,GAAA,EAACR,eAAA,CAAAkB,cAAc;QAAAN,QAAA,EAAGN;MAAK,CAAkB,CAAC,eAC1C,IAAAH,WAAA,CAAAK,GAAA,EAACN,OAAA,CAAAiB,KAAK;QAACF,IAAI,EAAC;MAAc,CAAE,CAAC;IAAA,CACd;EAAC,CACT,CAAC;AAEZ","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../src/alignment-matrix-control/cell.tsx"],
+  "sourcesContent": ["/**\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 { Cell as CellView, Point } from './styles';\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(CellView, {\n        ...props,\n        role: \"gridcell\"\n      }),\n      children: [/*#__PURE__*/_jsx(VisuallyHidden, {\n        children: value\n      }), /*#__PURE__*/_jsx(Point, {\n        role: \"presentation\"\n      })]\n    })\n  });\n}"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,uBAA0B;AAC1B,qBAAoB;AACpB,6BAA+B;AAK/B,mBAAgC;AAChC,oBAAwC;AACxC,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,cAAAG,MAAU;AAAA,QAClC,GAAG;AAAA,QACH,MAAM;AAAA,MACR,CAAC;AAAA,MACD,UAAU,CAAc,uCAAAH,KAAK,uCAAgB;AAAA,QAC3C,UAAU;AAAA,MACZ,CAAC,GAAgB,uCAAAA,KAAK,qBAAO;AAAA,QAC3B,MAAM;AAAA,MACR,CAAC,CAAC;AAAA,IACJ,CAAC;AAAA,EACH,CAAC;AACH;",
+  "names": ["_jsx", "Tooltip", "_jsxs", "CellView"]
+}

package/build/alignment-matrix-control/docs-manifest.json

@@ -0,0 +1,12 @@
+{
+	"$schema": "../../schemas/docs-manifest.json",
+	"displayName": "AlignmentMatrixControl",
+	"filePath": "./index.tsx",
+	"subcomponents": [
+		{
+			"displayName": "AlignmentMatrixControlIcon",
+			"preferredDisplayName": "AlignmentMatrixControl.Icon",
+			"filePath": "./icon.tsx"
+		}
+	]
+}

package/build/alignment-matrix-control/icon.js

@@ -1,26 +1,40 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
+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);
+var icon_exports = {};
+__export(icon_exports, {
+  default: () => icon_default
 });
-exports.default = void 0;
-var _clsx = _interopRequireDefault(require("clsx"));
-var _primitives = require("@wordpress/primitives");
-var _utils = require("./utils");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * External dependencies
- */
-
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
+module.exports = __toCommonJS(icon_exports);
+var import_clsx = __toESM(require("clsx"));
+var import_primitives = require("@wordpress/primitives");
+var import_utils = require("./utils");
+var import_jsx_runtime = require("react/jsx-runtime");
 const BASE_SIZE = 24;
 const GRID_CELL_SIZE = 7;
 const GRID_PADDING = (BASE_SIZE - 3 * GRID_CELL_SIZE) / 2;
@@ -33,25 +47,25 @@ function AlignmentMatrixControlIcon({
   width,
   height,
   style = {},
-  value = 'center',
+  value = "center",
   ...props
 }) {
   var _ref, _ref2;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.SVG, {
+  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,
     role: "presentation",
-    className: (0, _clsx.default)('component-alignment-matrix-control-icon', className),
+    className: (0, import_clsx.default)("component-alignment-matrix-control-icon", className),
     style: {
-      pointerEvents: disablePointerEvents ? 'none' : undefined,
+      pointerEvents: disablePointerEvents ? "none" : void 0,
       ...style
     },
     ...props,
-    children: _utils.ALIGNMENTS.map((align, index) => {
-      const dotSize = (0, _utils.getAlignmentIndex)(value) === index ? DOT_SIZE_SELECTED : DOT_SIZE;
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Rect, {
+    children: import_utils.ALIGNMENTS.map((align, index) => {
+      const dotSize = (0, import_utils.getAlignmentIndex)(value) === index ? DOT_SIZE_SELECTED : DOT_SIZE;
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_primitives.Rect, {
         x: GRID_PADDING + index % 3 * GRID_CELL_SIZE + (GRID_CELL_SIZE - dotSize) / 2,
         y: GRID_PADDING + Math.floor(index / 3) * GRID_CELL_SIZE + (GRID_CELL_SIZE - dotSize) / 2,
         width: dotSize,
@@ -61,5 +75,5 @@ function AlignmentMatrixControlIcon({
     })
   });
 }
-var _default = exports.default = AlignmentMatrixControlIcon;
-//# sourceMappingURL=icon.js.map
+var icon_default = AlignmentMatrixControlIcon;
+//# sourceMappingURL=icon.js.map

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

@@ -1 +1,7 @@
-{"version":3,"names":["_clsx","_interopRequireDefault","require","_primitives","_utils","_jsxRuntime","BASE_SIZE","GRID_CELL_SIZE","GRID_PADDING","DOT_SIZE","DOT_SIZE_SELECTED","AlignmentMatrixControlIcon","className","disablePointerEvents","size","width","height","style","value","props","_ref","_ref2","jsx","SVG","xmlns","viewBox","role","clsx","pointerEvents","undefined","children","ALIGNMENTS","map","align","index","dotSize","getAlignmentIndex","Rect","x","y","Math","floor","fill","_default","exports","default"],"sources":["@wordpress/components/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 type { AlignmentMatrixControlIconProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\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;\n\nfunction AlignmentMatrixControlIcon( {\n\tclassName,\n\tdisablePointerEvents = true,\n\tsize,\n\twidth,\n\theight,\n\tstyle = {},\n\tvalue = 'center',\n\t...props\n}: WordPressComponentProps< AlignmentMatrixControlIconProps, 'svg', false > ) {\n\treturn (\n\t\t<SVG\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\tviewBox={ `0 0 ${ BASE_SIZE } ${ BASE_SIZE }` }\n\t\t\twidth={ size ?? width ?? BASE_SIZE }\n\t\t\theight={ size ?? height ?? BASE_SIZE }\n\t\t\trole=\"presentation\"\n\t\t\tclassName={ clsx(\n\t\t\t\t'component-alignment-matrix-control-icon',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t\tstyle={ {\n\t\t\t\tpointerEvents: disablePointerEvents ? 'none' : undefined,\n\t\t\t\t...style,\n\t\t\t} }\n\t\t\t{ ...props }\n\t\t>\n\t\t\t{ ALIGNMENTS.map( ( align, index ) => {\n\t\t\t\tconst dotSize =\n\t\t\t\t\tgetAlignmentIndex( value ) === index\n\t\t\t\t\t\t? DOT_SIZE_SELECTED\n\t\t\t\t\t\t: DOT_SIZE;\n\n\t\t\t\treturn (\n\t\t\t\t\t<Rect\n\t\t\t\t\t\tkey={ align }\n\t\t\t\t\t\tx={\n\t\t\t\t\t\t\tGRID_PADDING +\n\t\t\t\t\t\t\t( index % 3 ) * GRID_CELL_SIZE +\n\t\t\t\t\t\t\t( GRID_CELL_SIZE - dotSize ) / 2\n\t\t\t\t\t\t}\n\t\t\t\t\t\ty={\n\t\t\t\t\t\t\tGRID_PADDING +\n\t\t\t\t\t\t\tMath.floor( index / 3 ) * GRID_CELL_SIZE +\n\t\t\t\t\t\t\t( GRID_CELL_SIZE - dotSize ) / 2\n\t\t\t\t\t\t}\n\t\t\t\t\t\twidth={ dotSize }\n\t\t\t\t\t\theight={ dotSize }\n\t\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</SVG>\n\t);\n}\n\nexport default AlignmentMatrixControlIcon;\n"],"mappings":";;;;;;;AAGA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,WAAA,GAAAD,OAAA;AAKA,IAAAE,MAAA,GAAAF,OAAA;AAAwD,IAAAG,WAAA,GAAAH,OAAA;AAbxD;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAKA,MAAMI,SAAS,GAAG,EAAE;AACpB,MAAMC,cAAc,GAAG,CAAC;AACxB,MAAMC,YAAY,GAAG,CAAEF,SAAS,GAAG,CAAC,GAAGC,cAAc,IAAK,CAAC;AAC3D,MAAME,QAAQ,GAAG,CAAC;AAClB,MAAMC,iBAAiB,GAAG,CAAC;AAE3B,SAASC,0BAA0BA,CAAE;EACpCC,SAAS;EACTC,oBAAoB,GAAG,IAAI;EAC3BC,IAAI;EACJC,KAAK;EACLC,MAAM;EACNC,KAAK,GAAG,CAAC,CAAC;EACVC,KAAK,GAAG,QAAQ;EAChB,GAAGC;AACsE,CAAC,EAAG;EAAA,IAAAC,IAAA,EAAAC,KAAA;EAC7E,oBACC,IAAAhB,WAAA,CAAAiB,GAAA,EAACnB,WAAA,CAAAoB,GAAG;IACHC,KAAK,EAAC,4BAA4B;IAClCC,OAAO,EAAG,OAAQnB,SAAS,IAAMA,SAAS,EAAK;IAC/CS,KAAK,GAAAK,IAAA,GAAGN,IAAI,aAAJA,IAAI,cAAJA,IAAI,GAAIC,KAAK,cAAAK,IAAA,cAAAA,IAAA,GAAId,SAAW;IACpCU,MAAM,GAAAK,KAAA,GAAGP,IAAI,aAAJA,IAAI,cAAJA,IAAI,GAAIE,MAAM,cAAAK,KAAA,cAAAA,KAAA,GAAIf,SAAW;IACtCoB,IAAI,EAAC,cAAc;IACnBd,SAAS,EAAG,IAAAe,aAAI,EACf,yCAAyC,EACzCf,SACD,CAAG;IACHK,KAAK,EAAG;MACPW,aAAa,EAAEf,oBAAoB,GAAG,MAAM,GAAGgB,SAAS;MACxD,GAAGZ;IACJ,CAAG;IAAA,GACEE,KAAK;IAAAW,QAAA,EAERC,iBAAU,CAACC,GAAG,CAAE,CAAEC,KAAK,EAAEC,KAAK,KAAM;MACrC,MAAMC,OAAO,GACZ,IAAAC,wBAAiB,EAAElB,KAAM,CAAC,KAAKgB,KAAK,GACjCxB,iBAAiB,GACjBD,QAAQ;MAEZ,oBACC,IAAAJ,WAAA,CAAAiB,GAAA,EAACnB,WAAA,CAAAkC,IAAI;QAEJC,CAAC,EACA9B,YAAY,GACV0B,KAAK,GAAG,CAAC,GAAK3B,cAAc,GAC9B,CAAEA,cAAc,GAAG4B,OAAO,IAAK,CAC/B;QACDI,CAAC,EACA/B,YAAY,GACZgC,IAAI,CAACC,KAAK,CAAEP,KAAK,GAAG,CAAE,CAAC,GAAG3B,cAAc,GACxC,CAAEA,cAAc,GAAG4B,OAAO,IAAK,CAC/B;QACDpB,KAAK,EAAGoB,OAAS;QACjBnB,MAAM,EAAGmB,OAAS;QAClBO,IAAI,EAAC;MAAc,GAbbT,KAcN,CAAC;IAEJ,CAAE;EAAC,CACC,CAAC;AAER;AAAC,IAAAU,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEclC,0BAA0B","ignoreList":[]}
+{
+  "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,MAAM,YAAY;AAClB,MAAM,iBAAiB;AACvB,MAAM,gBAAgB,YAAY,IAAI,kBAAkB;AACxD,MAAM,WAAW;AACjB,MAAM,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;",
+  "names": ["_jsx", "clsx"]
+}

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

@@ -1,56 +1,71 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
+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);
+var alignment_matrix_control_exports = {};
+__export(alignment_matrix_control_exports, {
+  AlignmentMatrixControl: () => AlignmentMatrixControl,
+  default: () => alignment_matrix_control_default
 });
-exports.default = exports.AlignmentMatrixControl = void 0;
-var _clsx = _interopRequireDefault(require("clsx"));
-var _i18n = require("@wordpress/i18n");
-var _compose = require("@wordpress/compose");
-var _element = require("@wordpress/element");
-var _cell = _interopRequireDefault(require("./cell"));
-var _composite = require("../composite");
-var _styles = require("./styles");
-var _icon = _interopRequireDefault(require("./icon"));
-var _utils = require("./utils");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * External dependencies
- */
-
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
+module.exports = __toCommonJS(alignment_matrix_control_exports);
+var import_clsx = __toESM(require("clsx"));
+var import_i18n = require("@wordpress/i18n");
+var import_compose = require("@wordpress/compose");
+var import_element = require("@wordpress/element");
+var import_cell = __toESM(require("./cell"));
+var import_composite = require("../composite");
+var import_styles = require("./styles");
+var import_icon = __toESM(require("./icon"));
+var import_utils = require("./utils");
+var import_jsx_runtime = require("react/jsx-runtime");
 function UnforwardedAlignmentMatrixControl({
   className,
   id,
-  label = (0, _i18n.__)('Alignment Matrix Control'),
-  defaultValue = 'center center',
+  label = (0, import_i18n.__)("Alignment Matrix Control"),
+  defaultValue = "center center",
   value,
   onChange,
   width = 92,
   ...props
 }) {
-  const baseId = (0, _compose.useInstanceId)(UnforwardedAlignmentMatrixControl, 'alignment-matrix-control', id);
-  const setActiveId = (0, _element.useCallback)(nextActiveId => {
-    const nextValue = (0, _utils.getItemValue)(baseId, nextActiveId);
+  const baseId = (0, import_compose.useInstanceId)(UnforwardedAlignmentMatrixControl, "alignment-matrix-control", id);
+  const setActiveId = (0, import_element.useCallback)((nextActiveId) => {
+    const nextValue = (0, import_utils.getItemValue)(baseId, nextActiveId);
     if (nextValue) {
       onChange?.(nextValue);
     }
   }, [baseId, onChange]);
-  const classes = (0, _clsx.default)('component-alignment-matrix-control', className);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_composite.Composite, {
-    defaultActiveId: (0, _utils.getItemId)(baseId, defaultValue),
-    activeId: (0, _utils.getItemId)(baseId, value),
-    setActiveId: setActiveId,
-    rtl: (0, _i18n.isRTL)(),
-    render: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.GridContainer, {
+  const classes = (0, import_clsx.default)("component-alignment-matrix-control", className);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_composite.Composite, {
+    defaultActiveId: (0, import_utils.getItemId)(baseId, defaultValue),
+    activeId: (0, import_utils.getItemId)(baseId, value),
+    setActiveId,
+    rtl: (0, import_i18n.isRTL)(),
+    render: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.GridContainer, {
       ...props,
       "aria-label": label,
       className: classes,
@@ -58,38 +73,18 @@ function UnforwardedAlignmentMatrixControl({
       role: "grid",
       size: width
     }),
-    children: _utils.GRID.map((cells, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_composite.Composite.Row, {
-      render: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.GridRow, {
+    children: import_utils.GRID.map((cells, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_composite.Composite.Row, {
+      render: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.GridRow, {
         role: "row"
       }),
-      children: cells.map(cell => /*#__PURE__*/(0, _jsxRuntime.jsx)(_cell.default, {
-        id: (0, _utils.getItemId)(baseId, cell),
+      children: cells.map((cell) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_cell.default, {
+        id: (0, import_utils.getItemId)(baseId, cell),
         value: cell
       }, cell))
     }, index))
   });
 }
-
-/**
- * AlignmentMatrixControl components enable adjustments to horizontal and vertical alignments for UI.
- *
- * ```jsx
- * import { AlignmentMatrixControl } from '@wordpress/components';
- * import { useState } from '@wordpress/element';
- *
- * const Example = () => {
- * 	const [ alignment, setAlignment ] = useState( 'center center' );
- *
- * 	return (
- * 		<AlignmentMatrixControl
- * 			value={ alignment }
- * 			onChange={ setAlignment }
- * 		/>
- * 	);
- * };
- * ```
- */
-const AlignmentMatrixControl = exports.AlignmentMatrixControl = Object.assign(UnforwardedAlignmentMatrixControl, {
+const AlignmentMatrixControl = Object.assign(UnforwardedAlignmentMatrixControl, {
   /**
    * Render an alignment matrix as an icon.
    *
@@ -99,9 +94,13 @@ const AlignmentMatrixControl = exports.AlignmentMatrixControl = Object.assign(Un
    * <Icon icon={<AlignmentMatrixControl.Icon value="top left" />} />
    * ```
    */
-  Icon: Object.assign(_icon.default, {
-    displayName: 'AlignmentMatrixControl.Icon'
+  Icon: Object.assign(import_icon.default, {
+    displayName: "AlignmentMatrixControl.Icon"
   })
 });
-var _default = exports.default = AlignmentMatrixControl;
-//# sourceMappingURL=index.js.map
+var alignment_matrix_control_default = AlignmentMatrixControl;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AlignmentMatrixControl
+});
+//# sourceMappingURL=index.js.map

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

@@ -1 +1,7 @@
-{"version":3,"names":["_clsx","_interopRequireDefault","require","_i18n","_compose","_element","_cell","_composite","_styles","_icon","_utils","_jsxRuntime","UnforwardedAlignmentMatrixControl","className","id","label","__","defaultValue","value","onChange","width","props","baseId","useInstanceId","setActiveId","useCallback","nextActiveId","nextValue","getItemValue","classes","clsx","jsx","Composite","defaultActiveId","getItemId","activeId","rtl","isRTL","render","GridContainer","role","size","children","GRID","map","cells","index","Row","GridRow","cell","default","AlignmentMatrixControl","exports","Object","assign","Icon","AlignmentMatrixControlIcon","displayName","_default"],"sources":["@wordpress/components/src/alignment-matrix-control/index.tsx"],"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 { GridContainer, GridRow } from './styles';\nimport AlignmentMatrixControlIcon from './icon';\nimport { GRID, getItemId, getItemValue } from './utils';\nimport type { WordPressComponentProps } from '../context';\nimport type { AlignmentMatrixControlProps } from './types';\n\nfunction UnforwardedAlignmentMatrixControl( {\n\tclassName,\n\tid,\n\tlabel = __( 'Alignment Matrix Control' ),\n\tdefaultValue = 'center center',\n\tvalue,\n\tonChange,\n\twidth = 92,\n\t...props\n}: WordPressComponentProps< AlignmentMatrixControlProps, 'div', false > ) {\n\tconst baseId = useInstanceId(\n\t\tUnforwardedAlignmentMatrixControl,\n\t\t'alignment-matrix-control',\n\t\tid\n\t);\n\n\tconst setActiveId = useCallback<\n\t\tNonNullable< React.ComponentProps< typeof Composite >[ 'setActiveId' ] >\n\t>(\n\t\t( nextActiveId ) => {\n\t\t\tconst nextValue = getItemValue( baseId, nextActiveId );\n\t\t\tif ( nextValue ) {\n\t\t\t\tonChange?.( nextValue );\n\t\t\t}\n\t\t},\n\t\t[ baseId, onChange ]\n\t);\n\n\tconst classes = clsx( 'component-alignment-matrix-control', className );\n\n\treturn (\n\t\t<Composite\n\t\t\tdefaultActiveId={ getItemId( baseId, defaultValue ) }\n\t\t\tactiveId={ getItemId( baseId, value ) }\n\t\t\tsetActiveId={ setActiveId }\n\t\t\trtl={ isRTL() }\n\t\t\trender={\n\t\t\t\t<GridContainer\n\t\t\t\t\t{ ...props }\n\t\t\t\t\taria-label={ label }\n\t\t\t\t\tclassName={ classes }\n\t\t\t\t\tid={ baseId }\n\t\t\t\t\trole=\"grid\"\n\t\t\t\t\tsize={ width }\n\t\t\t\t/>\n\t\t\t}\n\t\t>\n\t\t\t{ GRID.map( ( cells, index ) => (\n\t\t\t\t<Composite.Row render={ <GridRow role=\"row\" /> } key={ index }>\n\t\t\t\t\t{ cells.map( ( cell ) => (\n\t\t\t\t\t\t<Cell\n\t\t\t\t\t\t\tid={ getItemId( baseId, cell ) }\n\t\t\t\t\t\t\tkey={ cell }\n\t\t\t\t\t\t\tvalue={ cell }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) ) }\n\t\t\t\t</Composite.Row>\n\t\t\t) ) }\n\t\t</Composite>\n\t);\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(\n\tUnforwardedAlignmentMatrixControl,\n\t{\n\t\t/**\n\t\t * Render an alignment matrix as an icon.\n\t\t *\n\t\t * ```jsx\n\t\t * import { AlignmentMatrixControl } from '@wordpress/components';\n\t\t *\n\t\t * <Icon icon={<AlignmentMatrixControl.Icon value=\"top left\" />} />\n\t\t * ```\n\t\t */\n\t\tIcon: Object.assign( AlignmentMatrixControlIcon, {\n\t\t\tdisplayName: 'AlignmentMatrixControl.Icon',\n\t\t} ),\n\t}\n);\n\nexport default AlignmentMatrixControl;\n"],"mappings":"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","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../src/alignment-matrix-control/index.tsx"],
+  "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 { GridContainer, GridRow } from './styles';\nimport AlignmentMatrixControlIcon from './icon';\nimport { GRID, getItemId, getItemValue } from './utils';\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', 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(GridContainer, {\n      ...props,\n      \"aria-label\": label,\n      className: classes,\n      id: baseId,\n      role: \"grid\",\n      size: width\n    }),\n    children: GRID.map((cells, index) => /*#__PURE__*/_jsx(Composite.Row, {\n      render: /*#__PURE__*/_jsx(GridRow, {\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;"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAKjB,kBAA0B;AAC1B,qBAA8B;AAC9B,qBAA4B;AAK5B,kBAAiB;AACjB,uBAA0B;AAC1B,oBAAuC;AACvC,kBAAuC;AACvC,mBAA8C;AAC9C,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,SAAS;AACpE,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,6BAAe;AAAA,MACvC,GAAG;AAAA,MACH,cAAc;AAAA,MACd,WAAW;AAAA,MACX,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,MAAM;AAAA,IACR,CAAC;AAAA,IACD,UAAU,kBAAK,IAAI,CAAC,OAAO,UAAuB,uCAAAA,KAAK,2BAAU,KAAK;AAAA,MACpE,QAAqB,uCAAAA,KAAK,uBAAS;AAAA,QACjC,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,MAAM,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"]
+}