@wordpress/components 28.5.0 → 28.7.0

package/build-module/utils/hooks/use-update-effect.js

@@ -12,12 +12,12 @@ import { useRef, useEffect } from '@wordpress/element';
  * @param {import('react').DependencyList} deps
  */
 function useUpdateEffect(effect, deps) {
-  const mounted = useRef(false);
+  const mountedRef = useRef(false);
   useEffect(() => {
-    if (mounted.current) {
+    if (mountedRef.current) {
       return effect();
     }
-    mounted.current = true;
+    mountedRef.current = true;
     return undefined;
     // Disable reasons:
     // 1. This hook needs to pass a dep list that isn't an array literal
@@ -26,7 +26,7 @@ function useUpdateEffect(effect, deps) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, deps);
   useEffect(() => () => {
-    mounted.current = false;
+    mountedRef.current = false;
   }, []);
 }
 export default useUpdateEffect;

package/build-module/utils/hooks/use-update-effect.js.map

@@ -1 +1 @@
-{"version":3,"names":["useRef","useEffect","useUpdateEffect","effect","deps","mounted","current","undefined"],"sources":["@wordpress/components/src/utils/hooks/use-update-effect.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useRef, useEffect } from '@wordpress/element';\n\n/**\n * A `React.useEffect` that will not run on the first render.\n * Source:\n * https://github.com/ariakit/ariakit/blob/main/packages/ariakit-react-core/src/utils/hooks.ts\n *\n * @param {import('react').EffectCallback} effect\n * @param {import('react').DependencyList} deps\n */\nfunction useUpdateEffect( effect, deps ) {\n\tconst mounted = useRef( false );\n\tuseEffect( () => {\n\t\tif ( mounted.current ) {\n\t\t\treturn effect();\n\t\t}\n\t\tmounted.current = true;\n\t\treturn undefined;\n\t\t// Disable reasons:\n\t\t// 1. This hook needs to pass a dep list that isn't an array literal\n\t\t// 2. `effect` is missing from the array, and will need to be added carefully to avoid additional warnings\n\t\t// see https://github.com/WordPress/gutenberg/pull/41166\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, deps );\n\n\tuseEffect(\n\t\t() => () => {\n\t\t\tmounted.current = false;\n\t\t},\n\t\t[]\n\t);\n}\n\nexport default useUpdateEffect;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,MAAM,EAAEC,SAAS,QAAQ,oBAAoB;;AAEtD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,eAAeA,CAAEC,MAAM,EAAEC,IAAI,EAAG;EACxC,MAAMC,OAAO,GAAGL,MAAM,CAAE,KAAM,CAAC;EAC/BC,SAAS,CAAE,MAAM;IAChB,IAAKI,OAAO,CAACC,OAAO,EAAG;MACtB,OAAOH,MAAM,CAAC,CAAC;IAChB;IACAE,OAAO,CAACC,OAAO,GAAG,IAAI;IACtB,OAAOC,SAAS;IAChB;IACA;IACA;IACA;IACA;EACD,CAAC,EAAEH,IAAK,CAAC;EAETH,SAAS,CACR,MAAM,MAAM;IACXI,OAAO,CAACC,OAAO,GAAG,KAAK;EACxB,CAAC,EACD,EACD,CAAC;AACF;AAEA,eAAeJ,eAAe","ignoreList":[]}
+{"version":3,"names":["useRef","useEffect","useUpdateEffect","effect","deps","mountedRef","current","undefined"],"sources":["@wordpress/components/src/utils/hooks/use-update-effect.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useRef, useEffect } from '@wordpress/element';\n\n/**\n * A `React.useEffect` that will not run on the first render.\n * Source:\n * https://github.com/ariakit/ariakit/blob/main/packages/ariakit-react-core/src/utils/hooks.ts\n *\n * @param {import('react').EffectCallback} effect\n * @param {import('react').DependencyList} deps\n */\nfunction useUpdateEffect( effect, deps ) {\n\tconst mountedRef = useRef( false );\n\tuseEffect( () => {\n\t\tif ( mountedRef.current ) {\n\t\t\treturn effect();\n\t\t}\n\t\tmountedRef.current = true;\n\t\treturn undefined;\n\t\t// Disable reasons:\n\t\t// 1. This hook needs to pass a dep list that isn't an array literal\n\t\t// 2. `effect` is missing from the array, and will need to be added carefully to avoid additional warnings\n\t\t// see https://github.com/WordPress/gutenberg/pull/41166\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, deps );\n\n\tuseEffect(\n\t\t() => () => {\n\t\t\tmountedRef.current = false;\n\t\t},\n\t\t[]\n\t);\n}\n\nexport default useUpdateEffect;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,MAAM,EAAEC,SAAS,QAAQ,oBAAoB;;AAEtD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,eAAeA,CAAEC,MAAM,EAAEC,IAAI,EAAG;EACxC,MAAMC,UAAU,GAAGL,MAAM,CAAE,KAAM,CAAC;EAClCC,SAAS,CAAE,MAAM;IAChB,IAAKI,UAAU,CAACC,OAAO,EAAG;MACzB,OAAOH,MAAM,CAAC,CAAC;IAChB;IACAE,UAAU,CAACC,OAAO,GAAG,IAAI;IACzB,OAAOC,SAAS;IAChB;IACA;IACA;IACA;IACA;EACD,CAAC,EAAEH,IAAK,CAAC;EAETH,SAAS,CACR,MAAM,MAAM;IACXI,UAAU,CAACC,OAAO,GAAG,KAAK;EAC3B,CAAC,EACD,EACD,CAAC;AACF;AAEA,eAAeJ,eAAe","ignoreList":[]}

package/build-style/style-rtl.css

@@ -38,10 +38,10 @@
  * Radius scale.
  */
 /**
- * Dimensions.
+ * Elevation scale.
  */
 /**
- * Shadows.
+ * Dimensions.
  */
 /**
  * Editor widths.
@@ -937,7 +937,7 @@ input.components-combobox-control__input[type=text]:focus {
   box-sizing: border-box;
   cursor: pointer;
   outline: 1px solid transparent;
-  border-radius: 2px 2px 0 0;
+  border-radius: 4px 4px 0 0;
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
 }
 .components-color-palette__custom-color-button:focus {
@@ -959,7 +959,7 @@ input.components-combobox-control__input[type=text]:focus {
 
 .components-color-palette__custom-color-text-wrapper {
   padding: 12px 16px;
-  border-radius: 0 0 2px 2px;
+  border-radius: 0 0 4px 4px;
   position: relative;
   font-size: 13px;
   box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.2), inset -1px 0 0 0 rgba(0, 0, 0, 0.2), inset 1px 0 0 0 rgba(0, 0, 0, 0.2);
@@ -1052,18 +1052,6 @@ input.components-combobox-control__input[type=text]:focus {
   height: 20px;
 }
 
-.components-custom-gradient-picker .components-custom-gradient-picker__toolbar {
-  border: none;
-}
-.components-custom-gradient-picker .components-custom-gradient-picker__toolbar > div + div {
-  margin-right: 1px;
-}
-.components-custom-gradient-picker .components-custom-gradient-picker__toolbar button.is-pressed > svg {
-  background: #fff;
-  border: 1px solid #949494;
-  border-radius: 2px;
-}
-
 .components-custom-gradient-picker__ui-line {
   position: relative;
   z-index: 0;
@@ -1539,7 +1527,6 @@ body.is-dragging-components-draggable {
 }
 .components-form-token-field__token.is-borderless.is-error .components-form-token-field__token-text {
   color: #cc1818;
-  border-radius: 0 4px 4px 0;
   padding: 0 6px 0 4px;
 }
 .components-form-token-field__token.is-borderless.is-validating .components-form-token-field__token-text {
@@ -1569,7 +1556,7 @@ body.is-dragging-components-draggable {
 }
 
 .components-form-token-field__token-text {
-  border-radius: 0 2px 2px 0;
+  border-radius: 0 1px 1px 0;
   padding: 0 8px 0 0;
   white-space: nowrap;
   overflow: hidden;
@@ -1578,7 +1565,7 @@ body.is-dragging-components-draggable {
 
 .components-form-token-field__remove-token.components-button {
   cursor: pointer;
-  border-radius: 2px 0 0 2px;
+  border-radius: 1px 0 0 1px;
   padding: 0 2px;
   color: #1e1e1e;
   line-height: 10px;
@@ -1636,7 +1623,6 @@ body.is-dragging-components-draggable {
 .components-guide .components-modal__content {
   padding: 0;
   margin-top: 0;
-  border-radius: 2px;
 }
 .components-guide .components-modal__content::before {
   content: none;
@@ -1886,7 +1872,7 @@ body.is-dragging-components-draggable {
   background-color: rgba(0, 0, 0, 0.35);
   z-index: 100000;
   display: flex;
-  animation: edit-post__fade-in-animation 0.2s ease-out 0s;
+  animation: edit-post__fade-in-animation 0.08s linear 0s;
   animation-fill-mode: forwards;
 }
 @media (prefers-reduced-motion: reduce) {
@@ -1902,10 +1888,10 @@ body.is-dragging-components-draggable {
   width: 100%;
   background: #fff;
   box-shadow: 0 0.7px 1px rgba(0, 0, 0, 0.15), 0 2.7px 3.8px -0.2px rgba(0, 0, 0, 0.15), 0 5.5px 7.8px -0.3px rgba(0, 0, 0, 0.15), -0.1px 11.5px 16.4px -0.5px rgba(0, 0, 0, 0.15);
-  border-radius: 4px 4px 0 0;
+  border-radius: 8px 8px 0 0;
   overflow: hidden;
   display: flex;
-  animation: components-modal__appear-animation 0.1s ease-out;
+  animation: components-modal__appear-animation 0.26s cubic-bezier(0.29, 0, 0, 1);
   animation-fill-mode: forwards;
 }
 .components-modal__frame *,
@@ -1921,7 +1907,7 @@ body.is-dragging-components-draggable {
 }
 @media (min-width: 600px) {
   .components-modal__frame {
-    border-radius: 4px;
+    border-radius: 8px;
     margin: auto;
     width: auto;
     min-width: 350px;
@@ -1971,10 +1957,12 @@ body.is-dragging-components-draggable {
 
 @keyframes components-modal__appear-animation {
   from {
-    transform: translateY(32px);
+    opacity: 0;
+    transform: scale(0.9);
   }
   to {
-    transform: translateY(0);
+    opacity: 1;
+    transform: scale(1);
   }
 }
 .components-modal__header {
@@ -2430,6 +2418,7 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   color: inherit;
   display: flex;
   box-shadow: none;
+  border-radius: 0;
   -webkit-backdrop-filter: blur(100px);
           backdrop-filter: blur(100px);
   background-color: transparent;
@@ -2518,7 +2507,7 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
 .components-popover__content {
   background: #fff;
   box-shadow: 0 0 0 1px #ccc, 0 0.7px 1px rgba(0, 0, 0, 0.1), 0 1.2px 1.7px -0.2px rgba(0, 0, 0, 0.1), 0 2.3px 3.3px -0.5px rgba(0, 0, 0, 0.1);
-  border-radius: 2px;
+  border-radius: 4px;
   box-sizing: border-box;
   width: min-content;
 }
@@ -2613,6 +2602,14 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   stroke: #1e1e1e;
 }
 
+.components-radio-control {
+  border: 0;
+  margin: 0;
+  padding: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-size: 13px;
+}
+
 .components-radio-control__group-wrapper.has-help {
   margin-block-end: 12px;
 }
@@ -2745,6 +2742,8 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   grid-column: 2;
   grid-row: 2;
   padding-block-start: 4px;
+}
+.components-radio-control__option-description.components-radio-control__option-description {
   margin-top: 0;
 }
 
@@ -2779,7 +2778,7 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
 
 .components-resizable-box__side-handle::before {
   display: block;
-  border-radius: 2px;
+  border-radius: 9999px;
   content: "";
   width: 3px;
   height: 3px;
@@ -2958,7 +2957,7 @@ body.lockscroll {
   background: rgba(0, 0, 0, 0.85);
   -webkit-backdrop-filter: blur(16px) saturate(180%);
           backdrop-filter: blur(16px) saturate(180%);
-  border-radius: 2px;
+  border-radius: 4px;
   box-shadow: 0 0.7px 1px rgba(0, 0, 0, 0.1), 0 1.2px 1.7px -0.2px rgba(0, 0, 0, 0.1), 0 2.3px 3.3px -0.5px rgba(0, 0, 0, 0.1);
   color: #fff;
   padding: 12px 20px;
@@ -3113,7 +3112,6 @@ body.lockscroll {
   outline: none;
 }
 .components-tab-panel__tab-content:focus-visible {
-  border-radius: 2px;
   box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   outline: 2px solid transparent;
   outline-offset: 0;
@@ -3268,8 +3266,8 @@ body.lockscroll {
 .components-text-control__input[type=month].is-next-40px-default-size,
 .components-text-control__input[type=number].is-next-40px-default-size {
   height: 40px;
-  padding-right: 16px;
-  padding-left: 16px;
+  padding-right: 12px;
+  padding-left: 12px;
 }
 
 .components-tip {

package/build-style/style.css

@@ -38,10 +38,10 @@
  * Radius scale.
  */
 /**
- * Dimensions.
+ * Elevation scale.
  */
 /**
- * Shadows.
+ * Dimensions.
  */
 /**
  * Editor widths.
@@ -937,7 +937,7 @@ input.components-combobox-control__input[type=text]:focus {
   box-sizing: border-box;
   cursor: pointer;
   outline: 1px solid transparent;
-  border-radius: 2px 2px 0 0;
+  border-radius: 4px 4px 0 0;
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
 }
 .components-color-palette__custom-color-button:focus {
@@ -961,7 +961,7 @@ input.components-combobox-control__input[type=text]:focus {
 
 .components-color-palette__custom-color-text-wrapper {
   padding: 12px 16px;
-  border-radius: 0 0 2px 2px;
+  border-radius: 0 0 4px 4px;
   position: relative;
   font-size: 13px;
   box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.2), inset 1px 0 0 0 rgba(0, 0, 0, 0.2), inset -1px 0 0 0 rgba(0, 0, 0, 0.2);
@@ -1057,18 +1057,6 @@ input.components-combobox-control__input[type=text]:focus {
   height: 20px;
 }
 
-.components-custom-gradient-picker .components-custom-gradient-picker__toolbar {
-  border: none;
-}
-.components-custom-gradient-picker .components-custom-gradient-picker__toolbar > div + div {
-  margin-left: 1px;
-}
-.components-custom-gradient-picker .components-custom-gradient-picker__toolbar button.is-pressed > svg {
-  background: #fff;
-  border: 1px solid #949494;
-  border-radius: 2px;
-}
-
 .components-custom-gradient-picker__ui-line {
   position: relative;
   z-index: 0;
@@ -1544,7 +1532,6 @@ body.is-dragging-components-draggable {
 }
 .components-form-token-field__token.is-borderless.is-error .components-form-token-field__token-text {
   color: #cc1818;
-  border-radius: 4px 0 0 4px;
   padding: 0 4px 0 6px;
 }
 .components-form-token-field__token.is-borderless.is-validating .components-form-token-field__token-text {
@@ -1574,7 +1561,7 @@ body.is-dragging-components-draggable {
 }
 
 .components-form-token-field__token-text {
-  border-radius: 2px 0 0 2px;
+  border-radius: 1px 0 0 1px;
   padding: 0 0 0 8px;
   white-space: nowrap;
   overflow: hidden;
@@ -1583,7 +1570,7 @@ body.is-dragging-components-draggable {
 
 .components-form-token-field__remove-token.components-button {
   cursor: pointer;
-  border-radius: 0 2px 2px 0;
+  border-radius: 0 1px 1px 0;
   padding: 0 2px;
   color: #1e1e1e;
   line-height: 10px;
@@ -1641,7 +1628,6 @@ body.is-dragging-components-draggable {
 .components-guide .components-modal__content {
   padding: 0;
   margin-top: 0;
-  border-radius: 2px;
 }
 .components-guide .components-modal__content::before {
   content: none;
@@ -1891,7 +1877,7 @@ body.is-dragging-components-draggable {
   background-color: rgba(0, 0, 0, 0.35);
   z-index: 100000;
   display: flex;
-  animation: edit-post__fade-in-animation 0.2s ease-out 0s;
+  animation: edit-post__fade-in-animation 0.08s linear 0s;
   animation-fill-mode: forwards;
 }
 @media (prefers-reduced-motion: reduce) {
@@ -1907,10 +1893,10 @@ body.is-dragging-components-draggable {
   width: 100%;
   background: #fff;
   box-shadow: 0 0.7px 1px rgba(0, 0, 0, 0.15), 0 2.7px 3.8px -0.2px rgba(0, 0, 0, 0.15), 0 5.5px 7.8px -0.3px rgba(0, 0, 0, 0.15), 0.1px 11.5px 16.4px -0.5px rgba(0, 0, 0, 0.15);
-  border-radius: 4px 4px 0 0;
+  border-radius: 8px 8px 0 0;
   overflow: hidden;
   display: flex;
-  animation: components-modal__appear-animation 0.1s ease-out;
+  animation: components-modal__appear-animation 0.26s cubic-bezier(0.29, 0, 0, 1);
   animation-fill-mode: forwards;
 }
 .components-modal__frame *,
@@ -1926,7 +1912,7 @@ body.is-dragging-components-draggable {
 }
 @media (min-width: 600px) {
   .components-modal__frame {
-    border-radius: 4px;
+    border-radius: 8px;
     margin: auto;
     width: auto;
     min-width: 350px;
@@ -1976,10 +1962,12 @@ body.is-dragging-components-draggable {
 
 @keyframes components-modal__appear-animation {
   from {
-    transform: translateY(32px);
+    opacity: 0;
+    transform: scale(0.9);
   }
   to {
-    transform: translateY(0);
+    opacity: 1;
+    transform: scale(1);
   }
 }
 .components-modal__header {
@@ -2437,6 +2425,7 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   color: inherit;
   display: flex;
   box-shadow: none;
+  border-radius: 0;
   -webkit-backdrop-filter: blur(100px);
           backdrop-filter: blur(100px);
   background-color: transparent;
@@ -2525,7 +2514,7 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
 .components-popover__content {
   background: #fff;
   box-shadow: 0 0 0 1px #ccc, 0 0.7px 1px rgba(0, 0, 0, 0.1), 0 1.2px 1.7px -0.2px rgba(0, 0, 0, 0.1), 0 2.3px 3.3px -0.5px rgba(0, 0, 0, 0.1);
-  border-radius: 2px;
+  border-radius: 4px;
   box-sizing: border-box;
   width: min-content;
 }
@@ -2622,6 +2611,14 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   stroke: #1e1e1e;
 }
 
+.components-radio-control {
+  border: 0;
+  margin: 0;
+  padding: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-size: 13px;
+}
+
 .components-radio-control__group-wrapper.has-help {
   margin-block-end: 12px;
 }
@@ -2754,6 +2751,8 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   grid-column: 2;
   grid-row: 2;
   padding-block-start: 4px;
+}
+.components-radio-control__option-description.components-radio-control__option-description {
   margin-top: 0;
 }
 
@@ -2788,7 +2787,7 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
 
 .components-resizable-box__side-handle::before {
   display: block;
-  border-radius: 2px;
+  border-radius: 9999px;
   content: "";
   width: 3px;
   height: 3px;
@@ -2970,7 +2969,7 @@ body.lockscroll {
   background: rgba(0, 0, 0, 0.85);
   -webkit-backdrop-filter: blur(16px) saturate(180%);
           backdrop-filter: blur(16px) saturate(180%);
-  border-radius: 2px;
+  border-radius: 4px;
   box-shadow: 0 0.7px 1px rgba(0, 0, 0, 0.1), 0 1.2px 1.7px -0.2px rgba(0, 0, 0, 0.1), 0 2.3px 3.3px -0.5px rgba(0, 0, 0, 0.1);
   color: #fff;
   padding: 12px 20px;
@@ -3125,7 +3124,6 @@ body.lockscroll {
   outline: none;
 }
 .components-tab-panel__tab-content:focus-visible {
-  border-radius: 2px;
   box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   outline: 2px solid transparent;
   outline-offset: 0;
@@ -3280,8 +3278,8 @@ body.lockscroll {
 .components-text-control__input[type=month].is-next-40px-default-size,
 .components-text-control__input[type=number].is-next-40px-default-size {
   height: 40px;
-  padding-left: 16px;
-  padding-right: 16px;
+  padding-left: 12px;
+  padding-right: 12px;
 }
 
 .components-tip {

package/build-types/alignment-matrix-control/cell.d.ts

@@ -1,4 +1,4 @@
 import type { AlignmentMatrixControlCellProps } from './types';
 import type { WordPressComponentProps } from '../context';
-export default function Cell({ id, isActive, value, ...props }: WordPressComponentProps<AlignmentMatrixControlCellProps, 'span', false>): import("react").JSX.Element;
+export default function Cell({ id, value, ...props }: WordPressComponentProps<AlignmentMatrixControlCellProps, 'span', false>): import("react").JSX.Element;
 //# sourceMappingURL=cell.d.ts.map

package/build-types/alignment-matrix-control/cell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cell.d.ts","sourceRoot":"","sources":["../../src/alignment-matrix-control/cell.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,SAAS,CAAC;AAC/D,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AAE1D,MAAM,CAAC,OAAO,UAAU,IAAI,CAAE,EAC7B,EAAE,EACF,QAAgB,EAChB,KAAK,EACL,GAAG,KAAK,EACR,EAAE,uBAAuB,CAAE,+BAA+B,EAAE,MAAM,EAAE,KAAK,CAAE,+BAiB3E"}
+{"version":3,"file":"cell.d.ts","sourceRoot":"","sources":["../../src/alignment-matrix-control/cell.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,SAAS,CAAC;AAC/D,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AAE1D,MAAM,CAAC,OAAO,UAAU,IAAI,CAAE,EAC7B,EAAE,EACF,KAAK,EACL,GAAG,KAAK,EACR,EAAE,uBAAuB,CAAE,+BAA+B,EAAE,MAAM,EAAE,KAAK,CAAE,+BAe3E"}

package/build-types/alignment-matrix-control/icon.d.ts

@@ -1,5 +1,5 @@
 import type { AlignmentMatrixControlIconProps } from './types';
 import type { WordPressComponentProps } from '../context';
-declare function AlignmentMatrixControlIcon({ className, disablePointerEvents, size, style, value, ...props }: WordPressComponentProps<AlignmentMatrixControlIconProps, 'div', false>): import("react").JSX.Element;
+declare function AlignmentMatrixControlIcon({ className, disablePointerEvents, size, width, height, style, value, ...props }: WordPressComponentProps<AlignmentMatrixControlIconProps, 'svg', false>): import("react").JSX.Element;
 export default AlignmentMatrixControlIcon;
 //# sourceMappingURL=icon.d.ts.map

package/build-types/alignment-matrix-control/icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../src/alignment-matrix-control/icon.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,SAAS,CAAC;AAC/D,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AAI1D,iBAAS,0BAA0B,CAAE,EACpC,SAAS,EACT,oBAA2B,EAC3B,IAAgB,EAChB,KAAU,EACV,KAAgB,EAChB,GAAG,KAAK,EACR,EAAE,uBAAuB,CAAE,+BAA+B,EAAE,KAAK,EAAE,KAAK,CAAE,+BAiC1E;AAED,eAAe,0BAA0B,CAAC"}
+{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../src/alignment-matrix-control/icon.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,SAAS,CAAC;AAC/D,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AAQ1D,iBAAS,0BAA0B,CAAE,EACpC,SAAS,EACT,oBAA2B,EAC3B,IAAI,EACJ,KAAK,EACL,MAAM,EACN,KAAU,EACV,KAAgB,EAChB,GAAG,KAAK,EACR,EAAE,uBAAuB,CAAE,+BAA+B,EAAE,KAAK,EAAE,KAAK,CAAE,+BA6C1E;AAED,eAAe,0BAA0B,CAAC"}

package/build-types/alignment-matrix-control/index.d.ts

@@ -1,12 +1,12 @@
 import AlignmentMatrixControlIcon from './icon';
 import type { WordPressComponentProps } from '../context';
 import type { AlignmentMatrixControlProps } from './types';
+declare function UnforwardedAlignmentMatrixControl({ className, id, label, defaultValue, value, onChange, width, ...props }: WordPressComponentProps<AlignmentMatrixControlProps, 'div', false>): import("react").JSX.Element;
 /**
- *
  * AlignmentMatrixControl components enable adjustments to horizontal and vertical alignments for UI.
  *
  * ```jsx
- * import { __experimentalAlignmentMatrixControl as AlignmentMatrixControl } from '@wordpress/components';
+ * import { AlignmentMatrixControl } from '@wordpress/components';
  * import { useState } from '@wordpress/element';
  *
  * const Example = () => {
@@ -21,9 +21,19 @@ import type { AlignmentMatrixControlProps } from './types';
  * };
  * ```
  */
-export declare function AlignmentMatrixControl({ className, id, label, defaultValue, value, onChange, width, ...props }: WordPressComponentProps<AlignmentMatrixControlProps, 'div', false>): import("react").JSX.Element;
-export declare namespace AlignmentMatrixControl {
-    var Icon: typeof AlignmentMatrixControlIcon;
-}
+export declare const AlignmentMatrixControl: typeof UnforwardedAlignmentMatrixControl & {
+    /**
+     * Render an alignment matrix as an icon.
+     *
+     * ```jsx
+     * import { AlignmentMatrixControl } from '@wordpress/components';
+     *
+     * <Icon icon={<AlignmentMatrixControl.Icon value="top left" />} />
+     * ```
+     */
+    Icon: typeof AlignmentMatrixControlIcon & {
+        displayName: string;
+    };
+};
 export default AlignmentMatrixControl;
 //# sourceMappingURL=index.d.ts.map

package/build-types/alignment-matrix-control/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/alignment-matrix-control/index.tsx"],"names":[],"mappings":"AAiBA,OAAO,0BAA0B,MAAM,QAAQ,CAAC;AAEhD,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AAC1D,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,SAAS,CAAC;AAE3D;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,sBAAsB,CAAE,EACvC,SAAS,EACT,EAAE,EACF,KAAwC,EACxC,YAA8B,EAC9B,KAAK,EACL,QAAQ,EACR,KAAU,EACV,GAAG,KAAK,EACR,EAAE,uBAAuB,CAAE,2BAA2B,EAAE,KAAK,EAAE,KAAK,CAAE,+BAwDtE;yBAjEe,sBAAsB;;;AAqEtC,eAAe,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/alignment-matrix-control/index.tsx"],"names":[],"mappings":"AAkBA,OAAO,0BAA0B,MAAM,QAAQ,CAAC;AAEhD,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AAC1D,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,SAAS,CAAC;AAE3D,iBAAS,iCAAiC,CAAE,EAC3C,SAAS,EACT,EAAE,EACF,KAAwC,EACxC,YAA8B,EAC9B,KAAK,EACL,QAAQ,EACR,KAAU,EACV,GAAG,KAAK,EACR,EAAE,uBAAuB,CAAE,2BAA2B,EAAE,KAAK,EAAE,KAAK,CAAE,+BAmDtE;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,sBAAsB;IAGjC;;;;;;;;OAQG;;;;CAKJ,CAAC;AAEF,eAAe,sBAAsB,CAAC"}

package/build-types/alignment-matrix-control/stories/index.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/alignment-matrix-control/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAW,MAAM,kBAAkB,CAAC;AAQtD;;GAEG;AACH,OAAO,sBAAsB,MAAM,IAAI,CAAC;AAExC,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,UAAU,CAAC;AAE5D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,sBAAsB,CAgB9C,CAAC;AACF,eAAe,IAAI,CAAC;AAqBpB,eAAO,MAAM,OAAO,kSAAsB,CAAC;AAE3C,eAAO,MAAM,gBAAgB,mCAkB5B,CAAC"}
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/alignment-matrix-control/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAW,MAAM,kBAAkB,CAAC;AAQtD;;GAEG;AACH,OAAO,sBAAsB,MAAM,IAAI,CAAC;AAExC,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,UAAU,CAAC;AAE5D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,sBAAsB,CAgB9C,CAAC;AACF,eAAe,IAAI,CAAC;AAqBpB,eAAO,MAAM,OAAO,kSAAsB,CAAC;AAE3C,eAAO,MAAM,gBAAgB,mCAS5B,CAAC"}

package/build-types/alignment-matrix-control/{styles/alignment-matrix-control-styles.d.ts → styles.d.ts}

@@ -1,22 +1,21 @@
-import type { AlignmentMatrixControlProps, AlignmentMatrixControlCellProps } from '../types';
-export declare const rootBase: () => import("@emotion/utils").SerializedStyles;
-export declare const Root: import("@emotion/styled").StyledComponent<{
+import type { AlignmentMatrixControlProps, AlignmentMatrixControlIconProps } from './types';
+export declare const GridContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 } & {
-    size: AlignmentMatrixControlProps["width"];
+    size?: AlignmentMatrixControlProps["width"];
+    disablePointerEvents?: AlignmentMatrixControlIconProps["disablePointerEvents"];
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const Row: import("@emotion/styled").StyledComponent<{
+export declare const GridRow: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const pointBase: (props: Pick<AlignmentMatrixControlCellProps, "isActive">) => import("@emotion/utils").SerializedStyles;
-export declare const Point: import("@emotion/styled").StyledComponent<{
+export declare const Cell: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-} & Pick<AlignmentMatrixControlCellProps, "isActive">, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-export declare const Cell: import("@emotion/styled").StyledComponent<{
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const Point: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-//# sourceMappingURL=alignment-matrix-control-styles.d.ts.map
+//# sourceMappingURL=styles.d.ts.map

package/build-types/alignment-matrix-control/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/alignment-matrix-control/styles.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EACX,2BAA2B,EAC3B,+BAA+B,EAC/B,MAAM,SAAS,CAAC;AAmBjB,eAAO,MAAM,aAAa;;SAJzB,MAAM,WAAW;;WAKV,2BAA2B,CAAE,OAAO,CAAE;2BACtB,+BAA+B,CAAE,sBAAsB,CAAE;yGAYhF,CAAC;AAEF,eAAO,MAAM,OAAO;;eApBb,WAAW;yGA0BjB,CAAC;AAGF,eAAO,MAAM,IAAI;;eA7BV,WAAW;2GA2CjB,CAAC;AAGF,eAAO,MAAM,KAAK;;eA9CX,WAAW;2GAoFjB,CAAC"}

package/build-types/alignment-matrix-control/types.d.ts

@@ -29,11 +29,22 @@ export type AlignmentMatrixControlProps = {
     width?: number;
 };
 export type AlignmentMatrixControlIconProps = Pick<AlignmentMatrixControlProps, 'value'> & {
+    /**
+     * If `true`, disables pointer events on the icon.
+     * @default true
+     */
     disablePointerEvents?: boolean;
+    /**
+     * _Note: this prop is deprecated. Use the `size` prop on the parent `Icon`
+     * component instead_
+     *
+     * The size of the icon.
+     * @ignore
+     * @default 24
+     */
     size?: number;
 };
 export type AlignmentMatrixControlCellProps = {
-    isActive?: boolean;
     value: NonNullable<AlignmentMatrixControlProps['value']>;
 };
 //# sourceMappingURL=types.d.ts.map

package/build-types/alignment-matrix-control/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/alignment-matrix-control/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,2BAA2B,GACpC,UAAU,GACV,YAAY,GACZ,WAAW,GACX,aAAa,GACb,QAAQ,GACR,eAAe,GACf,cAAc,GACd,aAAa,GACb,eAAe,GACf,cAAc,CAAC;AAElB,MAAM,MAAM,2BAA2B,GAAG;IACzC;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,YAAY,CAAC,EAAE,2BAA2B,CAAC;IAC3C;;OAEG;IACH,KAAK,CAAC,EAAE,2BAA2B,CAAC;IACpC;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAE,QAAQ,EAAE,2BAA2B,KAAM,IAAI,CAAC;IAC7D;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,+BAA+B,GAAG,IAAI,CACjD,2BAA2B,EAC3B,OAAO,CACP,GAAG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,IAAI,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,+BAA+B,GAAG;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,WAAW,CAAE,2BAA2B,CAAE,OAAO,CAAE,CAAE,CAAC;CAC7D,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/alignment-matrix-control/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,2BAA2B,GACpC,UAAU,GACV,YAAY,GACZ,WAAW,GACX,aAAa,GACb,QAAQ,GACR,eAAe,GACf,cAAc,GACd,aAAa,GACb,eAAe,GACf,cAAc,CAAC;AAElB,MAAM,MAAM,2BAA2B,GAAG;IACzC;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,YAAY,CAAC,EAAE,2BAA2B,CAAC;IAC3C;;OAEG;IACH,KAAK,CAAC,EAAE,2BAA2B,CAAC;IACpC;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAE,QAAQ,EAAE,2BAA2B,KAAM,IAAI,CAAC;IAC7D;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,+BAA+B,GAAG,IAAI,CACjD,2BAA2B,EAC3B,OAAO,CACP,GAAG;IACH;;;OAGG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,+BAA+B,GAAG;IAC7C,KAAK,EAAE,WAAW,CAAE,2BAA2B,CAAE,OAAO,CAAE,CAAE,CAAC;CAC7D,CAAC"}

package/build-types/angle-picker-control/angle-circle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"angle-circle.d.ts","sourceRoot":"","sources":["../../src/angle-picker-control/angle-circle.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AAC1D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAQhD,iBAAS,WAAW,CAAE,EACrB,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACR,EAAE,uBAAuB,CAAE,gBAAgB,EAAE,KAAK,CAAE,+BA8EpD;AAmBD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"angle-circle.d.ts","sourceRoot":"","sources":["../../src/angle-picker-control/angle-circle.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AAC1D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAQhD,iBAAS,WAAW,CAAE,EACrB,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACR,EAAE,uBAAuB,CAAE,gBAAgB,EAAE,KAAK,CAAE,+BAgFpD;AAmBD,eAAe,WAAW,CAAC"}

package/build-types/angle-picker-control/styles/angle-picker-control-styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"angle-picker-control-styles.d.ts","sourceRoot":"","sources":["../../../src/angle-picker-control/styles/angle-picker-control-styles.tsx"],"names":[],"mappings":"AAgBA,eAAO,MAAM,UAAU;;SAMX,MACX,WAAU;yGAKV,CAAC;AAEF,eAAO,MAAM,sBAAsB;;eAPlC,WAAU;yGAgBV,CAAC;AAEF,eAAO,MAAM,eAAe;;eAlB3B,WAAU;yGA6BV,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;UAGpB,CAAC"}
+{"version":3,"file":"angle-picker-control-styles.d.ts","sourceRoot":"","sources":["../../../src/angle-picker-control/styles/angle-picker-control-styles.tsx"],"names":[],"mappings":"AAgBA,eAAO,MAAM,UAAU;;SAKF,MACpB,WAAS;yGAMT,CAAC;AAEF,eAAO,MAAM,sBAAsB;;eARlC,WAAS;yGAiBT,CAAC;AAEF,eAAO,MAAM,eAAe;;eAnB3B,WAAS;yGA8BT,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;UAGpB,CAAC"}

package/build-types/base-control/hooks.d.ts

@@ -12,6 +12,7 @@ export declare function useBaseControlProps(props: Omit<BaseControlProps, 'child
         className?: string;
         hideLabelFromVision?: boolean;
         __nextHasNoMarginBottom?: boolean;
+        __associatedWPComponentName?: string;
         id: string;
         help: import("react").ReactNode;
     };

package/build-types/base-control/hooks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../src/base-control/hooks.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEhD;;;;;;GAMG;AACH,wBAAgB,mBAAmB,CAClC,KAAK,EAAE,IAAI,CAAE,gBAAgB,EAAE,UAAU,CAAE;;;;;;;;;;;;;EAqB3C"}
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../src/base-control/hooks.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEhD;;;;;;GAMG;AACH,wBAAgB,mBAAmB,CAClC,KAAK,EAAE,IAAI,CAAE,gBAAgB,EAAE,UAAU,CAAE;;;;;;;;;;;;;;EAqB3C"}