@wordpress/components 30.9.1-next.8b30e05b0.0 → 31.0.1-next.6deb34194.0

package/CHANGELOG.md

@@ -2,13 +2,35 @@
 
 ## Unreleased
 
+## 31.0.0-next.0 (2025-12-09)
+
+### Breaking Changes
+
+-   Validated form controls (private API): Removed `onValidate` prop (use `onChange` to set `customValidity` messages, or add conditionals directly inside the `customValidity` prop instead) ([#73559](https://github.com/WordPress/gutenberg/pull/73559)).
+
+### Enhancements
+
+-   `Menu` and othr menu items: change default size to be 32px tall rather than 40px to improve menu density. ([#73429](https://github.com/WordPress/gutenberg/pull/73429)).
+-   Unify padding using for DataViews, Modals and other container components. ([#73334](https://github.com/WordPress/gutenberg/pull/73334))
+-   `Snackbar`: Shorten timeout duration ([#73814](https://github.com/WordPress/gutenberg/pull/73814)).
+
+### Bug Fixes
+
+-   `Modal`: Fix vertical scroll issue by reducing style specificity to allow overrides. ([#73739](https://github.com/WordPress/gutenberg/pull/73739))
+-   `Notice`: Fix notice component spacing issue when actions are present. ([#69430](https://github.com/WordPress/gutenberg/pull/69430))
+
+### Internal
+
+-   `AlignmentMatrixControl`: Migrate styles from Emotion to a CSS module ([#73714](https://github.com/WordPress/gutenberg/pull/73714) and [#73757](https://github.com/WordPress/gutenberg/pull/73757)).
+-   `AnglePickerControl`: Migrate styles from Emotion to a CSS module ([#73786](https://github.com/WordPress/gutenberg/pull/73786)).
+
 ## 30.9.0 (2025-11-26)
 
 ### Bug Fixes
 
--   `ExternalLink`: Fix arrow direction for RTL languages. The external link arrow now correctly points to the top-left (↖) instead of top-right (↗) in RTL layouts. ([#73400](https://github.com/WordPress/gutenberg/pull/73400))
--   Fixed an issue where the `Guide` component’s close button became invisible on hover when used on light backgrounds. The component's close button now relies on the default button hover effect, and the custom hover color is applied only within `welcome-guide` implementations to maintain consistency. ([#73220](https://github.com/WordPress/gutenberg/pull/73220))
--   `DateTimePicker`: Fixed timezone handling when selecting specific dates around changes in daylight savings time when browser and server timezone settings are not in sync, which would cause an incorrect date to be selected. ([#73444](https://github.com/WordPress/gutenberg/pull/73444))
+-   `ExternalLink`: Fix arrow direction for RTL languages. The external link arrow now correctly points to the top-left (↖) instead of top-right (↗) in RTL layouts. ([#73400](https://github.com/WordPress/gutenberg/pull/73400)).
+-   Fixed an issue where the `Guide` component’s close button became invisible on hover when used on light backgrounds. The component's close button now relies on the default button hover effect, and the custom hover color is applied only within `welcome-guide` implementations to maintain consistency. ([#73220](https://github.com/WordPress/gutenberg/pull/73220)).
+-   `DateTimePicker`: Fixed timezone handling when selecting specific dates around changes in daylight savings time when browser and server timezone settings are not in sync, which would cause an incorrect date to be selected. ([#73444](https://github.com/WordPress/gutenberg/pull/73444)).
 
 ## 30.8.0 (2025-11-12)
 
@@ -21,7 +43,6 @@
 -   `NumberControl`: Fix crash when min prop is string and step prop contains decimal ([#73107](https://github.com/WordPress/gutenberg/pull/73107)).
 -   `Modal`: Fix full-screen modal height to allow contents to scroll properly ([#73150](https://github.com/WordPress/gutenberg/pull/73150)).
 
-
 ### Internal
 
 -   `Modal`: Add a classname to simplify full height content modal styling ([#73108](https://github.com/WordPress/gutenberg/pull/73108)).

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

@@ -33,11 +33,137 @@ __export(cell_exports, {
   default: () => Cell
 });
 module.exports = __toCommonJS(cell_exports);
+var import_clsx = __toESM(require("clsx"));
 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");
+
+// 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;
+}
+
+.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"
+};
+
+// packages/components/src/alignment-matrix-control/cell.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 function Cell({
   id,
@@ -48,13 +174,15 @@ function Cell({
     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, {
+      render: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
         ...props,
+        className: (0, import_clsx.default)(style_module_default.cell, props.className),
         role: "gridcell"
       }),
       children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_visually_hidden.VisuallyHidden, {
         children: value
-      }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.Point, {
+      }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+        className: style_module_default.point,
         role: "presentation"
       })]
     })

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

@@ -1,7 +1,7 @@
 {
   "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"]
+  "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;",
+  "names": ["_jsx", "Tooltip", "_jsxs", "clsx"]
 }

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

@@ -40,9 +40,134 @@ 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");
+
+// 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;
+}
+
+.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"
+};
+
+// packages/components/src/alignment-matrix-control/index.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 function UnforwardedAlignmentMatrixControl({
   className,
@@ -61,22 +186,25 @@ function UnforwardedAlignmentMatrixControl({
       onChange?.(nextValue);
     }
   }, [baseId, onChange]);
-  const classes = (0, import_clsx.default)("component-alignment-matrix-control", className);
+  const classes = (0, import_clsx.default)("component-alignment-matrix-control", style_module_default["grid-container"], 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, {
+    render: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
       ...props,
-      "aria-label": label,
       className: classes,
+      "aria-label": label,
       id: baseId,
       role: "grid",
-      size: width
+      style: {
+        width: `${width}px`
+      }
     }),
     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, {
+      render: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+        className: style_module_default["grid-row"],
         role: "row"
       }),
       children: cells.map((cell) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_cell.default, {

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

@@ -1,7 +1,7 @@
 {
   "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,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;",
+  "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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",
   "names": ["clsx", "_jsx", "Cell", "AlignmentMatrixControlIcon"]
 }

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

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,6 +17,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // packages/components/src/angle-picker-control/angle-circle.tsx
@@ -23,13 +33,104 @@ __export(angle_circle_exports, {
   default: () => angle_circle_default
 });
 module.exports = __toCommonJS(angle_circle_exports);
+var import_clsx = __toESM(require("clsx"));
 var import_element = require("@wordpress/element");
 var import_compose = require("@wordpress/compose");
-var import_angle_picker_control_styles = require("./styles/angle-picker-control-styles");
+
+// 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;
+}
+.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"
+};
+
+// packages/components/src/angle-picker-control/angle-circle.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 function AngleCircle({
   value,
   onChange,
+  className,
   ...props
 }) {
   const angleCircleRef = (0, import_element.useRef)(null);
@@ -81,22 +182,25 @@ function AngleCircle({
       previousCursorValueRef.current = void 0;
     }
   }, [isDragging]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_angle_picker_control_styles.CircleRoot, {
-    ref: angleCircleRef,
-    onMouseDown: startDrag,
-    className: "components-angle-picker-control__angle-circle",
-    ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_angle_picker_control_styles.CircleIndicatorWrapper, {
-      style: value ? {
-        transform: `rotate(${value}deg)`
-      } : void 0,
-      className: "components-angle-picker-control__angle-circle-indicator-wrapper",
-      tabIndex: -1,
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_angle_picker_control_styles.CircleIndicator, {
-        className: "components-angle-picker-control__angle-circle-indicator"
+  return (
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+      ref: angleCircleRef,
+      onMouseDown: startDrag,
+      className: (0, import_clsx.default)("components-angle-picker-control__angle-circle", style_module_default["circle-root"], className),
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+        style: value ? {
+          transform: `rotate(${value}deg)`
+        } : void 0,
+        className: (0, import_clsx.default)("components-angle-picker-control__angle-circle-indicator-wrapper", style_module_default["circle-indicator-wrapper"]),
+        tabIndex: -1,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+          className: (0, import_clsx.default)("components-angle-picker-control__angle-circle-indicator", style_module_default["circle-indicator"])
+        })
       })
     })
-  });
+  );
 }
 function getAngle(centerX, centerY, pointX, pointY) {
   const y = pointY - centerY;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../src/angle-picker-control/angle-circle.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useEffect, useRef } from '@wordpress/element';\nimport { __experimentalUseDragging as useDragging } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { CircleRoot, CircleIndicatorWrapper, CircleIndicator } from './styles/angle-picker-control-styles';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction AngleCircle({\n  value,\n  onChange,\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 /*#__PURE__*/_jsx(CircleRoot, {\n    ref: angleCircleRef,\n    onMouseDown: startDrag,\n    className: \"components-angle-picker-control__angle-circle\",\n    ...props,\n    children: /*#__PURE__*/_jsx(CircleIndicatorWrapper, {\n      style: value ? {\n        transform: `rotate(${value}deg)`\n      } : undefined,\n      className: \"components-angle-picker-control__angle-circle-indicator-wrapper\",\n      tabIndex: -1,\n      children: /*#__PURE__*/_jsx(CircleIndicator, {\n        className: \"components-angle-picker-control__angle-circle-indicator\"\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;"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAAkC;AAClC,qBAAyD;AAKzD,yCAAoE;AACpE,yBAA4B;AAC5B,SAAS,YAAY;AAAA,EACnB;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG;AACD,QAAM,qBAAiB,uBAAO,IAAI;AAClC,QAAM,2BAAuB,uBAAO;AACpC,QAAM,6BAAyB,uBAAO;AACtC,QAAM,uBAAuB,MAAM;AACjC,QAAI,eAAe,YAAY,MAAM;AACnC;AAAA,IACF;AACA,UAAM,OAAO,eAAe,QAAQ,sBAAsB;AAC1D,yBAAqB,UAAU;AAAA,MAC7B,GAAG,KAAK,IAAI,KAAK,QAAQ;AAAA,MACzB,GAAG,KAAK,IAAI,KAAK,SAAS;AAAA,IAC5B;AAAA,EACF;AACA,QAAM,wBAAwB,WAAS;AACrC,QAAI,UAAU,QAAW;AACvB;AAAA,IACF;AAIA,UAAM,eAAe;AAErB,UAAM,QAAQ,MAAM;AACpB,QAAI,qBAAqB,YAAY,UAAa,aAAa,QAAW;AACxE,YAAM;AAAA,QACJ,GAAG;AAAA,QACH,GAAG;AAAA,MACL,IAAI,qBAAqB;AACzB,eAAS,SAAS,SAAS,SAAS,MAAM,SAAS,MAAM,OAAO,CAAC;AAAA,IACnE;AAAA,EACF;AACA,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,EACF,QAAI,eAAAA,2BAAY;AAAA,IACd,aAAa,WAAS;AACpB,2BAAqB;AACrB,4BAAsB,KAAK;AAAA,IAC7B;AAAA,IACA,YAAY;AAAA,IACZ,WAAW;AAAA,EACb,CAAC;AACD,gCAAU,MAAM;AACd,QAAI,YAAY;AACd,UAAI,uBAAuB,YAAY,QAAW;AAChD,+BAAuB,UAAU,SAAS,KAAK,MAAM;AAAA,MACvD;AACA,eAAS,KAAK,MAAM,SAAS;AAAA,IAC/B,OAAO;AACL,eAAS,KAAK,MAAM,SAAS,uBAAuB,WAAW;AAC/D,6BAAuB,UAAU;AAAA,IACnC;AAAA,EACF,GAAG,CAAC,UAAU,CAAC;AACf,SAAoB,uCAAAC,KAAK,+CAAY;AAAA,IACnC,KAAK;AAAA,IACL,aAAa;AAAA,IACb,WAAW;AAAA,IACX,GAAG;AAAA,IACH,UAAuB,uCAAAA,KAAK,2DAAwB;AAAA,MAClD,OAAO,QAAQ;AAAA,QACb,WAAW,UAAU,KAAK;AAAA,MAC5B,IAAI;AAAA,MACJ,WAAW;AAAA,MACX,UAAU;AAAA,MACV,UAAuB,uCAAAA,KAAK,oDAAiB;AAAA,QAC3C,WAAW;AAAA,MACb,CAAC;AAAA,IACH,CAAC;AAAA,EACH,CAAC;AACH;AACA,SAAS,SAAS,SAAS,SAAS,QAAQ,QAAQ;AAClD,QAAM,IAAI,SAAS;AACnB,QAAM,IAAI,SAAS;AACnB,QAAM,iBAAiB,KAAK,MAAM,GAAG,CAAC;AACtC,QAAM,aAAa,KAAK,MAAM,kBAAkB,MAAM,KAAK,GAAG,IAAI;AAClE,MAAI,aAAa,GAAG;AAClB,WAAO,MAAM;AAAA,EACf;AACA,SAAO;AACT;AACA,IAAO,uBAAQ;",
-  "names": ["useDragging", "_jsx"]
+  "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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",
+  "names": ["useDragging", "_jsx", "clsx"]
 }