@wordpress/components 22.1.0 → 23.1.0

package/build-style/style.css

@@ -1,4 +1,10 @@
 @charset "UTF-8";
+/**
+*  Converts a hex value into the rgb equivalent.
+*
+* @param {string} hex - the hexadecimal value to convert
+* @return {string} comma separated rgb values
+*/
 /**
  * Colors
  */
@@ -12,6 +18,12 @@
  * 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.
  */
+/**
+*  Converts a hex value into the rgb equivalent.
+*
+* @param {string} hex - the hexadecimal value to convert
+* @return {string} comma separated rgb values
+*/
 /**
  * Colors
  */
@@ -47,15 +59,15 @@
 * @param {string} hex - the hexadecimal value to convert
 * @return {string} comma separated rgb values
 */
-/**
- * Breakpoint mixins
- */
 /**
  * Long content fade mixin
  *
  * Creates a fading overlay to signify that the content is longer
  * than the space allows.
  */
+/**
+ * Breakpoint mixins
+ */
 /**
  * Focus styles.
  */
@@ -83,6 +95,8 @@
   --wp-admin-theme-color-darker-20: #005a87;
   --wp-admin-theme-color-darker-20--rgb: 0, 90, 135;
   --wp-admin-border-width-focus: 2px;
+  --wp-block-synced-color: #7a00df;
+  --wp-block-synced-color--rgb: 122, 0, 223;
 }
 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
   :root {
@@ -217,7 +231,7 @@
   box-sizing: border-box;
   padding: 6px 12px;
   border-radius: 2px;
-  color: #1e1e1e;
+  color: var(--wp-components-color-foreground, #1e1e1e);
   /**
    * Primary button style.
    */
@@ -256,22 +270,22 @@
 .components-button.is-primary {
   white-space: nowrap;
   background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
-  color: #fff;
+  color: var(--wp-components-color-accent-inverted, #fff);
   text-decoration: none;
   text-shadow: none;
   outline: 1px solid transparent;
 }
 .components-button.is-primary:hover:not(:disabled) {
   background: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #006ba1));
-  color: #fff;
+  color: var(--wp-components-color-accent-inverted, #fff);
 }
 .components-button.is-primary:active:not(:disabled) {
   background: var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #005a87));
   border-color: var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #005a87));
-  color: #fff;
+  color: var(--wp-components-color-accent-inverted, #fff);
 }
 .components-button.is-primary:focus:not(:disabled) {
-  box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  box-shadow: inset 0 0 0 1px var(--wp-components-color-background, #fff), 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
 }
 .components-button.is-primary:disabled, .components-button.is-primary:disabled:active:enabled, .components-button.is-primary[aria-disabled=true], .components-button.is-primary[aria-disabled=true]:enabled, .components-button.is-primary[aria-disabled=true]:active:enabled {
   color: rgba(255, 255, 255, 0.4);
@@ -281,10 +295,10 @@
   outline: none;
 }
 .components-button.is-primary:disabled:focus:enabled, .components-button.is-primary:disabled:active:enabled:focus:enabled, .components-button.is-primary[aria-disabled=true]:focus:enabled, .components-button.is-primary[aria-disabled=true]:enabled:focus:enabled, .components-button.is-primary[aria-disabled=true]:active:enabled:focus:enabled {
-  box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  box-shadow: 0 0 0 1px var(--wp-components-color-background, #fff), 0 0 0 3px var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
 }
 .components-button.is-primary.is-busy, .components-button.is-primary.is-busy:disabled, .components-button.is-primary.is-busy[aria-disabled=true] {
-  color: #fff;
+  color: var(--wp-components-color-accent-inverted, #fff);
   background-size: 100px 100%;
   /* stylelint-disable */
   background-image: linear-gradient(-45deg, var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba)) 33%, var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #005a87)) 33%, var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #005a87)) 70%, var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba)) 70%);
@@ -295,7 +309,7 @@
   outline: 1px solid transparent;
 }
 .components-button.is-secondary:active:not(:disabled), .components-button.is-tertiary:active:not(:disabled) {
-  background: #ddd;
+  background: var(--wp-components-color-gray-300, #ddd);
   color: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #006ba1));
   box-shadow: none;
 }
@@ -375,7 +389,7 @@ p + .components-button.is-tertiary {
   border-radius: 2px;
 }
 .components-button:not([aria-disabled=true]):active {
-  color: inherit;
+  color: var(--wp-components-color-foreground, #1e1e1e);
 }
 .components-button:disabled, .components-button[aria-disabled=true] {
   cursor: default;
@@ -421,16 +435,16 @@ p + .components-button.is-tertiary {
   margin-right: 10px;
 }
 .components-button.is-pressed {
-  color: #fff;
-  background: #1e1e1e;
+  color: var(--wp-components-color-foreground-inverted, #fff);
+  background: var(--wp-components-color-foreground, #1e1e1e);
 }
 .components-button.is-pressed:focus:not(:disabled) {
-  box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  box-shadow: inset 0 0 0 1px var(--wp-components-color-background, #fff), 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   outline: 2px solid transparent;
 }
 .components-button.is-pressed:hover:not(:disabled) {
-  color: #fff;
-  background: #1e1e1e;
+  color: var(--wp-components-color-foreground-inverted, #fff);
+  background: var(--wp-components-color-foreground, #1e1e1e);
 }
 .components-button svg {
   fill: currentColor;
@@ -456,7 +470,7 @@ p + .components-button.is-tertiary {
   box-shadow: 0 0 0 transparent;
   transition: box-shadow 0.1s linear;
   border-radius: 2px;
-  border: 1px solid #757575;
+  border: 1px solid #949494;
   /* Fonts smaller than 16px causes mobile safari to zoom. */
   font-size: 16px;
   /* Override core line-height. To be reviewed. */
@@ -639,6 +653,7 @@ svg.components-checkbox-control__indeterminate {
   vertical-align: top;
   transform: scale(1);
   transition: 100ms transform ease;
+  will-change: transform;
 }
 @media (prefers-reduced-motion: reduce) {
   .components-circular-option-picker__option-wrapper {
@@ -792,7 +807,7 @@ input.components-combobox-control__input[type=text]:focus {
   box-shadow: 0 0 0 transparent;
   transition: box-shadow 0.1s linear;
   border-radius: 2px;
-  border: 1px solid #757575;
+  border: 1px solid #949494;
   /* Fonts smaller than 16px causes mobile safari to zoom. */
   font-size: 16px;
   /* Override core line-height. To be reviewed. */
@@ -1319,7 +1334,7 @@ body.is-dragging-components-draggable {
   box-shadow: 0 0 0 transparent;
   transition: box-shadow 0.1s linear;
   border-radius: 2px;
-  border: 1px solid #757575;
+  border: 1px solid #949494;
   /* Fonts smaller than 16px causes mobile safari to zoom. */
   font-size: 16px;
   /* Override core line-height. To be reviewed. */
@@ -1496,7 +1511,7 @@ body.is-dragging-components-draggable {
   overflow-y: auto;
   transition: all 0.15s ease-in-out;
   list-style: none;
-  border-top: 1px solid #757575;
+  border-top: 1px solid var(--wp-components-color-gray-600, #949494);
   margin: 0;
   padding: 0;
 }
@@ -1636,51 +1651,25 @@ body.is-dragging-components-draggable {
   position: relative;
 }
 
-.is-focusing-regions [role=region]:focus {
+.is-focusing-regions [role=region]:focus::after {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  content: "";
+  pointer-events: none;
   outline: 4px solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   outline-offset: -4px;
+  z-index: 1000000;
 }
-.is-focusing-regions [role=region]:focus .interface-navigable-region__stacker {
-  position: relative;
-  z-index: -1;
-}
-.is-focusing-regions.is-distraction-free .interface-interface-skeleton__header .interface-navigable-region__stacker,
-.is-focusing-regions.is-distraction-free .interface-interface-skeleton__header .edit-post-header {
-  outline: inherit;
-  outline-offset: inherit;
-}
-.is-focusing-regions .interface-interface-skeleton__sidebar .interface-navigable-region__stacker,
-.is-focusing-regions .interface-interface-skeleton__sidebar .edit-post-layout__toggle-sidebar-panel {
-  outline: inherit;
-  outline-offset: inherit;
-}
-.is-focusing-regions .interface-interface-skeleton__actions .interface-navigable-region__stacker,
-.is-focusing-regions .interface-interface-skeleton__actions .edit-post-layout__toggle-publish-panel {
-  outline: inherit;
-  outline-offset: inherit;
-}
-.is-focusing-regions [role=region].interface-interface-skeleton__actions:focus .editor-post-publish-panel {
+.is-focusing-regions.is-distraction-free .interface-interface-skeleton__header .edit-post-header,
+.is-focusing-regions .interface-interface-skeleton__sidebar .edit-post-layout__toggle-sidebar-panel,
+.is-focusing-regions .interface-interface-skeleton__actions .edit-post-layout__toggle-publish-panel,
+.is-focusing-regions .editor-post-publish-panel {
   outline: 4px solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   outline-offset: -4px;
 }
-.is-focusing-regions .interface-interface-skeleton__drawer {
-  z-index: 31;
-}
-.is-focusing-regions .interface-interface-skeleton__drawer .interface-navigable-region__stacker,
-.is-focusing-regions .interface-interface-skeleton__drawer .edit-site-navigation-toggle {
-  outline: inherit;
-  outline-offset: inherit;
-}
-.is-focusing-regions .interface-interface-skeleton__drawer .edit-site-navigation-toggle.is-open {
-  outline: none;
-}
-.is-focusing-regions .interface-interface-skeleton__drawer .edit-site-navigation-toggle__button {
-  z-index: -1;
-}
-
-.interface-interface-skeleton__drawer .interface-navigable-region__stacker {
-  height: 100%;
-}
 
 .components-menu-group + .components-menu-group {
   margin-top: 8px;
@@ -1816,7 +1805,7 @@ body.is-dragging-components-draggable {
   margin: 0;
   width: 100%;
   background: #fff;
-  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.25);
+  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: 2px;
   overflow: hidden;
   display: flex;
@@ -2244,7 +2233,7 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   box-shadow: 0 0 0 transparent;
   transition: box-shadow 0.1s linear;
   border-radius: 2px;
-  border: 1px solid #757575;
+  border: 1px solid #949494;
   /* Fonts smaller than 16px causes mobile safari to zoom. */
   font-size: 16px;
   /* Override core line-height. To be reviewed. */
@@ -2337,8 +2326,7 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   -webkit-backdrop-filter: blur(100px);
           backdrop-filter: blur(100px);
   background-color: transparent;
-  -webkit-backface-visibility: hidden;
-          backface-visibility: hidden;
+  backface-visibility: hidden;
   border-radius: 2px;
   overflow: hidden;
 }
@@ -2402,6 +2390,7 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
 
 .components-popover {
   z-index: 1000000;
+  will-change: transform;
 }
 .components-popover.is-expanded {
   position: fixed;
@@ -2414,21 +2403,17 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
 
 .components-popover__content {
   background: #fff;
-  outline: 1px solid #ccc;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
+  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;
   box-sizing: border-box;
   width: min-content;
 }
 .is-alternate .components-popover__content {
-  outline: 1px solid #1e1e1e;
-  box-shadow: none;
+  box-shadow: 0 0 0 1px #1e1e1e;
 }
 .is-unstyled .components-popover__content {
   background: none;
-  border: none;
   border-radius: 0;
-  outline: none;
   box-shadow: none;
 }
 .components-popover.is-expanded .components-popover__content {
@@ -2436,9 +2421,10 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   height: calc(100% - 48px);
   overflow-y: visible;
   width: auto;
-  border: none;
-  outline: none;
-  border-top: 1px solid #1e1e1e;
+  box-shadow: 0 -1px 0 0 #ccc;
+}
+.components-popover.is-expanded.is-alternate .components-popover__content {
+  box-shadow: 0 -1px 0 #1e1e1e;
 }
 
 .components-popover__header {
@@ -2521,7 +2507,7 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   box-shadow: 0 0 0 transparent;
   transition: box-shadow 0.1s linear;
   border-radius: 2px;
-  border: 1px solid #757575;
+  border: 1px solid #949494;
   /* Fonts smaller than 16px causes mobile safari to zoom. */
   font-size: 16px;
   /* Override core line-height. To be reviewed. */
@@ -2633,6 +2619,7 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   top: calc(50% - 1px);
   right: calc(50% - 1px);
   transition: transform 0.1s ease-in;
+  will-change: transform;
   opacity: 0;
 }
 @media (prefers-reduced-motion: reduce) {
@@ -2802,7 +2789,7 @@ body.lockscroll {
   box-shadow: 0 0 0 transparent;
   transition: box-shadow 0.1s linear;
   border-radius: 2px;
-  border: 1px solid #757575;
+  border: 1px solid #949494;
   /* Fonts smaller than 16px causes mobile safari to zoom. */
   font-size: 16px;
   /* Override core line-height. To be reviewed. */
@@ -2813,6 +2800,8 @@ body.lockscroll {
   border: none;
   width: 100%;
   height: 48px;
+  margin-left: 0;
+  margin-right: 0;
   /* Fonts smaller than 16px causes mobile safari to zoom. */
   font-size: 16px;
 }
@@ -2987,47 +2976,62 @@ body.lockscroll {
 }
 
 .components-tab-panel__tabs-item {
+  position: relative;
+  border-radius: 0;
+  height: 48px;
   background: transparent;
   border: none;
   box-shadow: none;
-  border-radius: 0;
   cursor: pointer;
-  height: 48px;
   padding: 3px 16px;
   margin-left: 0;
   font-weight: 500;
-  transition: box-shadow 0.1s linear;
-  box-sizing: border-box;
-}
-.components-tab-panel__tabs-item::after {
-  content: attr(data-label);
-  display: block;
-  height: 0;
-  overflow: hidden;
-  speak: none;
-  visibility: hidden;
 }
 .components-tab-panel__tabs-item:focus:not(:disabled) {
-  box-shadow: inset 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
-}
-.components-tab-panel__tabs-item.is-active {
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) transparent, inset 0 -1.5px 0 0 var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   position: relative;
+  box-shadow: none;
 }
-.components-tab-panel__tabs-item.is-active::before {
+.components-tab-panel__tabs-item::after {
   content: "";
   position: absolute;
-  top: 0;
-  bottom: 1px;
   right: 0;
+  bottom: 0;
   left: 0;
-  border-bottom: 1.5px solid transparent;
+  pointer-events: none;
+  background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  height: calc(0 * var(--wp-admin-border-width-focus));
+  border-radius: 0;
+  transition: all 0.1s linear;
 }
-.components-tab-panel__tabs-item:focus {
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+@media (prefers-reduced-motion: reduce) {
+  .components-tab-panel__tabs-item::after {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
+}
+.components-tab-panel__tabs-item.is-active::after {
+  height: calc(1 * var(--wp-admin-border-width-focus));
+}
+.components-tab-panel__tabs-item::before {
+  content: "";
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  bottom: 12px;
+  left: 12px;
+  pointer-events: none;
+  box-shadow: 0 0 0 0 transparent;
+  border-radius: 2px;
+  transition: all 0.1s linear;
+}
+@media (prefers-reduced-motion: reduce) {
+  .components-tab-panel__tabs-item::before {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
 }
-.components-tab-panel__tabs-item.is-active:focus {
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba)), inset 0 -3px 0 0 var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+.components-tab-panel__tabs-item:focus-visible::before {
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
 }
 
 .components-text-control__input,
@@ -3050,7 +3054,7 @@ body.lockscroll {
   box-shadow: 0 0 0 transparent;
   transition: box-shadow 0.1s linear;
   border-radius: 2px;
-  border: 1px solid #757575;
+  border: 1px solid #949494;
   /* Fonts smaller than 16px causes mobile safari to zoom. */
   font-size: 16px;
   /* Override core line-height. To be reviewed. */
@@ -3195,8 +3199,8 @@ body.lockscroll {
   padding-left: 16px;
   padding-right: 16px;
 }
-.components-accessible-toolbar .components-button:focus:enabled,
-.components-toolbar .components-button:focus:enabled {
+.components-accessible-toolbar .components-button:focus:not(:disabled),
+.components-toolbar .components-button:focus:not(:disabled) {
   box-shadow: none;
   outline: none;
 }
@@ -3371,11 +3375,11 @@ div.components-toolbar > div + div.has-left-divider::before {
 }
 
 .components-tooltip .components-popover__content {
-  background: #1e1e1e;
+  background: var(--wp-components-color-foreground, #1e1e1e);
   border-radius: 2px;
   border-width: 0;
   outline: none;
-  color: #fff;
+  color: var(--wp-components-color-foreground-inverted, #fff);
   white-space: nowrap;
   text-align: center;
   line-height: 1.4;

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

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

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

@@ -0,0 +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,eAAe,CAAC;AAE7D,MAAM,CAAC,OAAO,UAAU,IAAI,CAAE,EAC7B,QAAgB,EAChB,KAAK,EACL,GAAG,KAAK,EACR,EAAE,uBAAuB,CAAE,+BAA+B,EAAE,MAAM,EAAE,KAAK,CAAE,eAc3E"}

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

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

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

@@ -0,0 +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,eAAe,CAAC;AAI7D,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,eAiC1E;AAED,eAAe,0BAA0B,CAAC"}

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

@@ -0,0 +1,30 @@
+/// <reference types="react" />
+import AlignmentMatrixControlIcon from './icon';
+import type { WordPressComponentProps } from '../ui/context';
+import type { AlignmentMatrixControlProps } from './types';
+/**
+ *
+ * AlignmentMatrixControl components enable adjustments to horizontal and vertical alignments for UI.
+ *
+ * ```jsx
+ * import { __experimentalAlignmentMatrixControl as AlignmentMatrixControl } from '@wordpress/components';
+ * import { useState } from '@wordpress/element';
+ *
+ * const Example = () => {
+ * 	const [ alignment, setAlignment ] = useState( 'center center' );
+ *
+ * 	return (
+ * 		<AlignmentMatrixControl
+ * 			value={ alignment }
+ * 			onChange={ setAlignment }
+ * 		/>
+ * 	);
+ * };
+ * ```
+ */
+export declare function AlignmentMatrixControl({ className, id, label, defaultValue, value, onChange, width, ...props }: WordPressComponentProps<AlignmentMatrixControlProps, 'div', false>): JSX.Element;
+export declare namespace AlignmentMatrixControl {
+    var Icon: typeof AlignmentMatrixControlIcon;
+}
+export default AlignmentMatrixControl;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"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,eAAe,CAAC;AAC7D,OAAO,KAAK,EACX,2BAA2B,EAE3B,MAAM,SAAS,CAAC;AAajB;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,sBAAsB,CAAE,EACvC,SAAS,EACT,EAAE,EACF,KAAwC,EACxC,YAA8B,EAC9B,KAAK,EACL,QAAe,EACf,KAAU,EACV,GAAG,KAAK,EACR,EAAE,uBAAuB,CAAE,2BAA2B,EAAE,KAAK,EAAE,KAAK,CAAE,eAiEtE;yBA1Ee,sBAAsB;;;AA8EtC,eAAe,sBAAsB,CAAC"}

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

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+/**
+ * Internal dependencies
+ */
+import AlignmentMatrixControl from '..';
+declare const meta: ComponentMeta<typeof AlignmentMatrixControl>;
+export default meta;
+export declare const Default: ComponentStory<typeof AlignmentMatrixControl>;
+export declare const IconSubcomponent: () => JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/alignment-matrix-control/stories/index.tsx"],"names":[],"mappings":";AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAQtE;;GAEG;AACH,OAAO,sBAAsB,MAAM,IAAI,CAAC;AAIxC,QAAA,MAAM,IAAI,EAAE,aAAa,CAAE,OAAO,sBAAsB,CAcvD,CAAC;AACF,eAAe,IAAI,CAAC;AA0BpB,eAAO,MAAM,OAAO,+CAAsB,CAAC;AAE3C,eAAO,MAAM,gBAAgB,mBAkB5B,CAAC"}

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

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import type { AlignmentMatrixControlIconProps, AlignmentMatrixControlCellProps } from '../types';
+export declare const Wrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Root: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Pick<AlignmentMatrixControlIconProps, "disablePointerEvents">, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Point: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Pick<AlignmentMatrixControlCellProps, "isActive">, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const Cell: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+//# sourceMappingURL=alignment-matrix-control-icon-styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"alignment-matrix-control-icon-styles.d.ts","sourceRoot":"","sources":["../../../src/alignment-matrix-control/styles/alignment-matrix-control-icon-styles.ts"],"names":[],"mappings":";AAcA,OAAO,KAAK,EACX,+BAA+B,EAC/B,+BAA+B,EAC/B,MAAM,UAAU,CAAC;AAsBlB,eAAO,MAAM,OAAO;;;yGAGnB,CAAC;AAEF,eAAO,MAAM,IAAI;;;yKAQhB,CAAC;AAiBF,eAAO,MAAM,KAAK;;;+JAKjB,CAAC;AAEF,eAAO,MAAM,IAAI;;;2GAAW,CAAC"}

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

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import type { AlignmentMatrixControlProps, AlignmentMatrixControlCellProps } from '../types';
+export declare const rootBase: () => import("@emotion/utils").SerializedStyles;
+export declare const Root: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    size: AlignmentMatrixControlProps['width'];
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Row: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, 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<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Pick<AlignmentMatrixControlCellProps, "isActive">, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const Cell: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+//# sourceMappingURL=alignment-matrix-control-styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"alignment-matrix-control-styles.d.ts","sourceRoot":"","sources":["../../../src/alignment-matrix-control/styles/alignment-matrix-control-styles.ts"],"names":[],"mappings":";AAUA,OAAO,KAAK,EACX,2BAA2B,EAC3B,+BAA+B,EAC/B,MAAM,UAAU,CAAC;AAElB,eAAO,MAAM,QAAQ,iDASpB,CAAC;AASF,eAAO,MAAM,IAAI;;;;UACV,2BAA2B,CAAE,OAAO,CAAE;yGAS5C,CAAC;AAEF,eAAO,MAAM,GAAG;;;yGAIf,CAAC;AAmBF,eAAO,MAAM,SAAS,UACd,KAAM,+BAA+B,EAAE,UAAU,CAAE,8CAY1D,CAAC;AAEF,eAAO,MAAM,KAAK;;;+JAIjB,CAAC;AAEF,eAAO,MAAM,IAAI;;;2GAWhB,CAAC"}

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/alignment-matrix-control/test/index.tsx"],"names":[],"mappings":""}

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

@@ -0,0 +1,39 @@
+export declare type AlignmentMatrixControlValue = 'top left' | 'top center' | 'top right' | 'center left' | 'center' | 'center center' | 'center right' | 'bottom left' | 'bottom center' | 'bottom right';
+export declare type AlignmentMatrixControlProps = {
+    /**
+     * Accessible label. If provided, sets the `aria-label` attribute of the
+     * underlying `grid` widget.
+     *
+     * @default 'Alignment Matrix Control'
+     */
+    label?: string;
+    /**
+     * If provided, sets the default alignment value.
+     *
+     * @default 'center center'
+     */
+    defaultValue?: AlignmentMatrixControlValue;
+    /**
+     * The current alignment value.
+     */
+    value?: AlignmentMatrixControlValue;
+    /**
+     * A function that receives the updated alignment value.
+     */
+    onChange?: (newValue: AlignmentMatrixControlValue) => void;
+    /**
+     * If provided, sets the width of the control.
+     *
+     * @default 92
+     */
+    width?: number;
+};
+export declare type AlignmentMatrixControlIconProps = Pick<AlignmentMatrixControlProps, 'value'> & {
+    disablePointerEvents?: boolean;
+    size?: number;
+};
+export declare type AlignmentMatrixControlCellProps = {
+    isActive?: boolean;
+    value: NonNullable<AlignmentMatrixControlProps['value']>;
+};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/alignment-matrix-control/types.ts"],"names":[],"mappings":"AAAA,oBAAY,2BAA2B,GACpC,UAAU,GACV,YAAY,GACZ,WAAW,GACX,aAAa,GACb,QAAQ,GACR,eAAe,GACf,cAAc,GACd,aAAa,GACb,eAAe,GACf,cAAc,CAAC;AAElB,oBAAY,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,oBAAY,+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,oBAAY,+BAA+B,GAAG;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,WAAW,CAAE,2BAA2B,CAAE,OAAO,CAAE,CAAE,CAAC;CAC7D,CAAC"}