@wordpress/components 23.8.0 → 24.0.0

package/build-style/style.css

@@ -88,15 +88,13 @@
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
 :root {
-  --wp-admin-theme-color: #007cba;
-  --wp-admin-theme-color--rgb: 0, 124, 186;
-  --wp-admin-theme-color-darker-10: #006ba1;
-  --wp-admin-theme-color-darker-10--rgb: 0, 107, 161;
-  --wp-admin-theme-color-darker-20: #005a87;
-  --wp-admin-theme-color-darker-20--rgb: 0, 90, 135;
+  --wp-admin-theme-color: #3858e9;
+  --wp-admin-theme-color--rgb: 56, 88, 233;
+  --wp-admin-theme-color-darker-10: #2145e6;
+  --wp-admin-theme-color-darker-10--rgb: 33, 69, 230;
+  --wp-admin-theme-color-darker-20: #183ad6;
+  --wp-admin-theme-color-darker-20--rgb: 24, 58, 214;
   --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 {
@@ -185,7 +183,7 @@
   width: 100%;
 }
 .components-autocomplete__result.components-button.is-selected {
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
 }
 
 .components-button-group {
@@ -257,64 +255,67 @@
     transition-delay: 0s;
   }
 }
+.components-button.is-next-40px-default-size {
+  height: 40px;
+}
 .components-button[aria-expanded=true], .components-button:hover {
-  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
 }
 .components-button[aria-disabled=true]:hover {
   color: initial;
 }
 .components-button:focus:not(:disabled) {
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   outline: 3px solid transparent;
 }
 .components-button.is-primary {
   white-space: nowrap;
-  background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   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));
+  background: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6));
   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));
+  background: var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6));
+  border-color: var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6));
   color: var(--wp-components-color-accent-inverted, #fff);
 }
 .components-button.is-primary:focus:not(:disabled) {
-  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));
+  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, #3858e9));
 }
 .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);
-  background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
-  border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   opacity: 1;
   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 var(--wp-components-color-background, #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, #3858e9));
 }
 .components-button.is-primary.is-busy, .components-button.is-primary.is-busy:disabled, .components-button.is-primary.is-busy[aria-disabled=true] {
   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%);
+  background-image: linear-gradient(-45deg, var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) 33%, var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6)) 33%, var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6)) 70%, var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) 70%);
   /* stylelint-enable */
-  border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
 }
 .components-button.is-secondary, .components-button.is-tertiary {
   outline: 1px solid transparent;
 }
 .components-button.is-secondary:active:not(:disabled), .components-button.is-tertiary:active:not(:disabled) {
   background: var(--wp-components-color-gray-300, #ddd);
-  color: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #006ba1));
+  color: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6));
   box-shadow: none;
 }
 .components-button.is-secondary:hover:not(:disabled), .components-button.is-tertiary:hover:not(:disabled) {
-  color: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #006ba1));
+  color: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6));
 }
 .components-button.is-secondary:disabled, .components-button.is-secondary[aria-disabled=true], .components-button.is-secondary[aria-disabled=true]:hover, .components-button.is-tertiary:disabled, .components-button.is-tertiary[aria-disabled=true], .components-button.is-tertiary[aria-disabled=true]:hover {
   color: #828282;
@@ -325,20 +326,19 @@
   outline: none;
 }
 .components-button.is-secondary {
-  box-shadow: inset 0 0 0 1px var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  box-shadow: inset 0 0 0 1px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   outline: 1px solid transparent;
   white-space: nowrap;
-  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   background: transparent;
 }
 .components-button.is-secondary:hover:not(:disabled) {
-  box-shadow: inset 0 0 0 1px var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #006ba1));
+  box-shadow: inset 0 0 0 1px var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6));
 }
 .components-button.is-tertiary {
   white-space: nowrap;
-  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   background: transparent;
-  padding: 6px;
 }
 .components-button.is-tertiary:hover:not(:disabled) {
   background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
@@ -380,7 +380,7 @@ p + .components-button.is-tertiary {
   background: none;
   outline: none;
   text-align: left;
-  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   text-decoration: underline;
   transition-property: border, background, color;
   transition-duration: 0.05s;
@@ -427,6 +427,9 @@ p + .components-button.is-tertiary {
   min-width: 36px;
   justify-content: center;
 }
+.components-button.has-icon.is-next-40px-default-size {
+  min-width: 40px;
+}
 .components-button.has-icon .dashicon {
   display: inline-block;
   flex: 0 0 auto;
@@ -436,9 +439,8 @@ p + .components-button.is-tertiary {
 .components-button.has-icon.has-text {
   justify-content: start;
   padding-right: 12px;
-}
-.components-button.has-icon.has-text svg {
-  margin-right: 8px;
+  padding-left: 8px;
+  gap: 4px;
 }
 .components-button.has-icon.has-text .dashicon {
   margin-right: 10px;
@@ -448,7 +450,7 @@ p + .components-button.is-tertiary {
   background: var(--wp-components-color-foreground, #1e1e1e);
 }
 .components-button.is-pressed:focus:not(:disabled) {
-  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));
+  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, #3858e9));
   outline: 2px solid transparent;
 }
 .components-button.is-pressed:hover:not(:disabled) {
@@ -589,12 +591,13 @@ p + .components-button.is-tertiary {
   }
 }
 .components-checkbox-control__input[type=checkbox]:focus {
-  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #fff, 0 0 0 calc(2 * var(--wp-admin-border-width-focus)) var(--wp-admin-theme-color);
   outline: 2px solid transparent;
+  outline-offset: 2px;
 }
 .components-checkbox-control__input[type=checkbox]:checked, .components-checkbox-control__input[type=checkbox]:indeterminate {
-  background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
-  border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
 }
 .components-checkbox-control__input[type=checkbox]:checked::-ms-check, .components-checkbox-control__input[type=checkbox]:indeterminate::-ms-check {
   opacity: 0;
@@ -896,7 +899,7 @@ input.components-combobox-control__input[type=text]:focus {
   outline: 1px solid transparent;
 }
 .components-color-palette__custom-color:focus {
-  box-shadow: inset 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 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   outline-width: 2px;
 }
 
@@ -1131,7 +1134,7 @@ body.is-dragging-components-draggable {
   height: 100%;
   width: 100%;
   display: flex;
-  background-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  background-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   align-items: center;
   justify-content: center;
   z-index: 50;
@@ -1321,12 +1324,12 @@ body.is-dragging-components-draggable {
   }
 }
 .components-form-toggle.is-checked .components-form-toggle__track {
-  background-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
-  border: 1px solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  background-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  border: 1px solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   border: 9px solid transparent;
 }
 .components-form-toggle .components-form-toggle__input:focus + .components-form-toggle__track {
-  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #fff, 0 0 0 calc(2 * var(--wp-admin-border-width-focus)) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
@@ -1463,7 +1466,7 @@ body.is-dragging-components-draggable {
 }
 .components-form-token-field__token.is-borderless .components-form-token-field__token-text {
   background: transparent;
-  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
 }
 .components-form-token-field__token.is-borderless .components-form-token-field__remove-token {
   background: transparent;
@@ -1554,7 +1557,7 @@ body.is-dragging-components-draggable {
   cursor: pointer;
 }
 .components-form-token-field__suggestion.is-selected {
-  background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   color: #fff;
 }
 
@@ -1682,7 +1685,7 @@ body.is-dragging-components-draggable {
   bottom: 0;
   content: "";
   pointer-events: none;
-  outline: 4px solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  outline: 4px solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   outline-offset: -4px;
   z-index: 1000000;
 }
@@ -1691,7 +1694,7 @@ body.is-dragging-components-draggable {
 .is-focusing-regions .interface-interface-skeleton__actions .edit-post-layout__toggle-publish-panel,
 .is-focusing-regions .interface-interface-skeleton__actions .edit-post-layout__toggle-entities-saved-states-panel,
 .is-focusing-regions .editor-post-publish-panel {
-  outline: 4px solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  outline: 4px solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   outline-offset: -4px;
 }
 
@@ -1758,7 +1761,7 @@ body.is-dragging-components-draggable {
 .components-menu-item__button.components-button:disabled.is-tertiary,
 .components-menu-item__button.components-button[aria-disabled=true].is-tertiary {
   background: none;
-  color: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #006ba1));
+  color: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6));
   opacity: 0.3;
 }
 
@@ -1826,35 +1829,44 @@ body.is-dragging-components-draggable {
 }
 
 .components-modal__frame {
-  margin: 0;
+  margin: 40px 0 0 0;
   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: 2px;
+  border-radius: 8px 8px 0 0;
   overflow: hidden;
   display: flex;
+  animation: components-modal__appear-animation 0.1s ease-out;
+  animation-fill-mode: forwards;
+}
+@media (prefers-reduced-motion: reduce) {
+  .components-modal__frame {
+    animation-duration: 1ms;
+    animation-delay: 0s;
+  }
 }
 @media (min-width: 600px) {
   .components-modal__frame {
+    border-radius: 8px;
     margin: auto;
     width: auto;
     min-width: 360px;
     max-width: calc(100% - 32px);
     max-height: calc(100% - 120px);
-    animation: components-modal__appear-animation 0.1s ease-out;
-    animation-fill-mode: forwards;
   }
 }
-@media (min-width: 600px) and (prefers-reduced-motion: reduce) {
-  .components-modal__frame {
-    animation-duration: 1ms;
-    animation-delay: 0s;
+@media (min-width: 600px) and (min-width: 600px) {
+  .components-modal__frame.is-full-screen {
+    width: calc(100% - 32px);
+    height: calc(100% - 32px);
+    max-height: none;
   }
 }
-@media (min-width: 600px) {
+@media (min-width: 600px) and (min-width: 782px) {
   .components-modal__frame.is-full-screen {
-    width: 90vw;
-    min-height: 90vh;
+    width: calc(100% - 80px);
+    height: calc(100% - 80px);
+    max-width: none;
   }
 }
 @media (min-width: 960px) {
@@ -1874,12 +1886,12 @@ body.is-dragging-components-draggable {
 .components-modal__header {
   box-sizing: border-box;
   border-bottom: 1px solid transparent;
-  padding: 0 32px;
+  padding: 24px 32px 12px;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  height: 76px;
+  height: 72px;
   width: 100%;
   z-index: 10;
   position: absolute;
@@ -1924,13 +1936,13 @@ body.is-dragging-components-draggable {
 
 .components-modal__content {
   flex: 1;
-  margin-top: 76px;
+  margin-top: 72px;
   padding: 0 32px 32px;
   overflow: auto;
 }
 .components-modal__content.hide-header {
   margin-top: 0;
-  padding-top: 24px;
+  padding-top: 32px;
 }
 .components-modal__content.is-scrollable:focus-visible {
   box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
@@ -1943,7 +1955,7 @@ body.is-dragging-components-draggable {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   font-size: 13px;
   background-color: #fff;
-  border-left: 4px solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  border-left: 4px solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   margin: 5px 15px 2px;
   padding: 8px 12px;
   align-items: center;
@@ -2110,7 +2122,7 @@ body.is-dragging-components-draggable {
   }
 }
 .components-panel__body-toggle.components-button:focus {
-  box-shadow: inset 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 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   border-radius: 0;
 }
 .components-panel__body-toggle.components-button .components-panel__arrow {
@@ -2632,7 +2644,7 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   position: absolute;
   top: calc(50% - 8px);
   right: calc(50% - 8px);
-  box-shadow: inset 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 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   outline: 2px solid transparent;
 }
 
@@ -2642,7 +2654,7 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   content: "";
   width: 3px;
   height: 3px;
-  background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   cursor: inherit;
   position: absolute;
   top: calc(50% - 1px);
@@ -2864,7 +2876,7 @@ body.lockscroll {
 }
 .components-search-control input[type=search].components-search-control__input:focus {
   background: #fff;
-  box-shadow: inset 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 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
 }
 .components-search-control input[type=search].components-search-control__input::placeholder {
   color: #757575;
@@ -2920,7 +2932,7 @@ body.lockscroll {
   }
 }
 .components-snackbar:focus {
-  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 #fff, 0 0 0 3px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
 }
 .components-snackbar.components-snackbar-explicit-dismiss {
   cursor: default;
@@ -2956,7 +2968,8 @@ body.lockscroll {
   outline: 1px dotted #fff;
 }
 .components-snackbar__action.components-button:not(:disabled):not([aria-disabled=true]):not(.is-secondary):hover {
-  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  text-decoration: none;
+  color: #fff;
 }
 
 .components-snackbar__content {
@@ -3012,7 +3025,7 @@ body.lockscroll {
   bottom: 0;
   left: 0;
   pointer-events: none;
-  background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   height: calc(0 * var(--wp-admin-border-width-focus));
   border-radius: 0;
   transition: all 0.1s linear;
@@ -3047,7 +3060,7 @@ body.lockscroll {
   }
 }
 .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));
+  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;
 }
 

package/build-types/autocomplete/autocompleter-ui.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"autocompleter-ui.d.ts","sourceRoot":"","sources":["../../src/autocomplete/autocompleter-ui.tsx"],"names":[],"mappings":";AA2BA,OAAO,KAAK,EAAE,oBAAoB,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAEjE,wBAAgB,kBAAkB,CAAE,aAAa,EAAE,WAAW,8HAgB1D,oBAAoB,wBA8FvB"}
+{"version":3,"file":"autocompleter-ui.d.ts","sourceRoot":"","sources":["../../src/autocomplete/autocompleter-ui.tsx"],"names":[],"mappings":";AAyBA,OAAO,KAAK,EAAE,oBAAoB,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAEjE,wBAAgB,kBAAkB,CAAE,aAAa,EAAE,WAAW,8HAgB1D,oBAAoB,wBA8FvB"}

package/build-types/autocomplete/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/autocomplete/index.tsx"],"names":[],"mappings":";AAsCA,OAAO,KAAK,EACX,iBAAiB,EAMjB,oBAAoB,EAEpB,MAAM,SAAS,CAAC;AAIjB,wBAAgB,eAAe,CAAE,EAChC,MAAM,EACN,QAAQ,EACR,SAAS,EACT,UAAU,EACV,UAAU,GACV,EAAE,oBAAoB;;;uBAuHS,aAAa;;EA4M5C;AAeD,wBAAgB,oBAAoB,CAAE,OAAO,EAAE,oBAAoB;;;;;;;;;;;;EAsClE;AAED,MAAM,CAAC,OAAO,UAAU,YAAY,CAAE,EACrC,QAAQ,EACR,UAAU,EACV,GAAG,OAAO,EACV,EAAE,iBAAiB,eAQnB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/autocomplete/index.tsx"],"names":[],"mappings":";AAoCA,OAAO,KAAK,EACX,iBAAiB,EAMjB,oBAAoB,EAEpB,MAAM,SAAS,CAAC;AAIjB,wBAAgB,eAAe,CAAE,EAChC,MAAM,EACN,QAAQ,EACR,SAAS,EACT,UAAU,EACV,UAAU,GACV,EAAE,oBAAoB;;;uBAuHS,aAAa;;EA6M5C;AAeD,wBAAgB,oBAAoB,CAAE,OAAO,EAAE,oBAAoB;;;;;;;;;;;;EAsClE;AAED,MAAM,CAAC,OAAO,UAAU,YAAY,CAAE,EACrC,QAAQ,EACR,UAAU,EACV,GAAG,OAAO,EACV,EAAE,iBAAiB,eAQnB"}

package/build-types/autocomplete/types.d.ts

@@ -3,6 +3,7 @@
  * WordPress dependencies
  */
 import type { WPElement } from '@wordpress/element';
+import type { RichTextValue } from '@wordpress/rich-text';
 /**
  * Internal dependencies
  */
@@ -140,23 +141,6 @@ export type AutocompleterUIProps = {
 export type CancelablePromise<T = void> = Promise<T> & {
     canceled?: boolean;
 };
-/**
- * When `@wordpress/rich-text` is fully typed, the following
- * types should be moved to and imported from there
- *
- * @see /packages/rich-text/src/create.js
- */
-type RichTextFormat = {
-    type: string;
-};
-type RichTextFormatList = Array<RichTextFormat>;
-type RichTextValue = {
-    text: string;
-    formats?: Array<RichTextFormatList>;
-    replacements?: Array<RichTextFormat>;
-    start: number | undefined;
-    end: number | undefined;
-};
 export type UseAutocompleteProps = {
     /**
      * The rich text value object the autocompleter is being applied to.
@@ -169,7 +153,7 @@ export type UseAutocompleteProps = {
      * A function to be called when an option is selected to insert into the
      * existing text.
      */
-    onChange: (value: string) => void;
+    onChange: (value: RichTextValue) => void;
     /**
      * A function to be called when an option is selected to replace the
      * existing text.

package/build-types/autocomplete/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/autocomplete/types.ts"],"names":[],"mappings":";AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AACpD;;GAEG;AACH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,GAAG,CAAC;AAGzC,MAAM,MAAM,YAAY,GAAG;IAC1B,MAAM,EAAE,iBAAiB,CAAC;IAC1B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;CACvB,CAAC;AAGF,MAAM,MAAM,aAAa,GAAG;IAAE,MAAM,EAAE,SAAS,CAAC;IAAC,KAAK,EAAE,aAAa,CAAA;CAAE,CAAC;AAExE,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,SAAS,GAAG,YAAY,GAAG,aAAa,CAAC;AAE9E,KAAK,WAAW,GAAG,MAAM,GAAG,SAAS,GAAG,KAAK,CAAE,MAAM,GAAG,SAAS,CAAE,CAAC;AACpE,MAAM,MAAM,WAAW,GAAG;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,GAAG,CAAC;IACX,KAAK,EAAE,WAAW,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAE,MAAM,CAAE,CAAC;IAC1B,UAAU,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,WAAW,CAAE,gBAAgB,GAAG,GAAG,IAAK;IACnD;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,aAAa,EAAE,MAAM,CAAC;IACtB;;;;;OAKG;IACH,OAAO,EACJ,CAAE,CACF,KAAK,EAAE,MAAM,KAEX,WAAW,CAAE,SAAS,gBAAgB,EAAE,CAAE,GAC1C,SAAS,gBAAgB,EAAE,CAAE,GAC/B,SAAS,gBAAgB,EAAE,CAAC;IAC/B;;OAEG;IACH,iBAAiB,CAAC,EAAE,CAAE,MAAM,EAAE,gBAAgB,KAAM,KAAK,CAAE,MAAM,CAAE,CAAC;IACpE;;;OAGG;IACH,gBAAgB,CAAC,EAAE,CAAE,MAAM,EAAE,gBAAgB,KAAM,OAAO,CAAC;IAC3D;;;OAGG;IACH,cAAc,EAAE,CAAE,MAAM,EAAE,gBAAgB,KAAM,WAAW,CAAC;IAC5D;;;;OAIG;IACH,YAAY,CAAC,EAAE,CAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAM,OAAO,CAAC;IAC5D;;;;;;;OAOG;IACH,mBAAmB,CAAC,EAAE,CACrB,MAAM,EAAE,gBAAgB,EACxB,KAAK,EAAE,MAAM,KACT,gBAAgB,CAAC;IACtB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAE,WAAW,EAAE,MAAM,KAAM,SAAS,CAAE,KAAK,CAAE,WAAW,CAAE,CAAE,CAAC;IACxE;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,KAAK,UAAU,GAAG,KAAK,CAAC,SAAS,CAAE,WAAW,CAAE,CAAC;AAEjD,MAAM,MAAM,oBAAoB,GAAG;IAClC;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,aAAa,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,eAAe,EAAE,CAAE,KAAK,EAAE,KAAK,CAAE,WAAW,CAAE,KAAM,IAAI,CAAC;IACzD;;OAEG;IACH,QAAQ,EAAE,CAAE,MAAM,EAAE,WAAW,KAAM,IAAI,CAAC;IAC1C;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,KAAK,EAAE,CAAE,KAAK,EAAE,KAAK,KAAM,IAAI,CAAC;IAEhC;;OAEG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB;;;OAGG;IACH,UAAU,EAAE,UAAU,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,iBAAiB,CAAE,CAAC,GAAG,IAAI,IAAK,OAAO,CAAE,CAAC,CAAE,GAAG;IAC1D,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF;;;;;GAKG;AACH,KAAK,cAAc,GAAG;IACrB,IAAI,EAAE,MAAM,CAAC;CACb,CAAC;AACF,KAAK,kBAAkB,GAAG,KAAK,CAAE,cAAc,CAAE,CAAC;AAClD,KAAK,aAAa,GAAG;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,KAAK,CAAE,kBAAkB,CAAE,CAAC;IACtC,YAAY,CAAC,EAAE,KAAK,CAAE,cAAc,CAAE,CAAC;IACvC,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,GAAG,EAAE,MAAM,GAAG,SAAS,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IAClC;;OAEG;IACH,MAAM,EAAE,aAAa,GAAG;QACvB,KAAK,EAAE,WAAW,CAAE,aAAa,CAAE,OAAO,CAAE,CAAE,CAAC;QAC/C,GAAG,EAAE,WAAW,CAAE,aAAa,CAAE,KAAK,CAAE,CAAE,CAAC;KAC3C,CAAC;IACF;;;OAGG;IACH,QAAQ,EAAE,CAAE,KAAK,EAAE,MAAM,KAAM,IAAI,CAAC;IACpC;;;OAGG;IACH,SAAS,EAAE,CAAE,MAAM,EAAE,aAAa,EAAE,KAAM,IAAI,CAAC;IAC/C;;OAEG;IACH,UAAU,EAAE,KAAK,CAAE,WAAW,CAAE,CAAC;IACjC;;;OAGG;IACH,UAAU,EAAE,UAAU,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,oBAAoB,GAAG;IACtD;;OAEG;IACH,QAAQ,EAAE,CACT,KAAK,EAAE,IAAI,CAAE,UAAU,CAAE,OAAO,eAAe,CAAE,EAAE,SAAS,CAAE,KAC1D,KAAK,CAAC,SAAS,CAAC;IACrB;;;;OAIG;IACH,UAAU,EAAE,OAAO,CAAC;CACpB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/autocomplete/types.ts"],"names":[],"mappings":"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"}

package/build-types/box-control/styles/box-control-styles.d.ts

@@ -36,7 +36,7 @@ export declare const UnitControl: import("@emotion/styled").StyledComponent<Omit
     value?: string | number | undefined;
     onBlur?: import("react").FocusEventHandler<HTMLInputElement | HTMLSelectElement> | undefined;
     onFocus?: import("react").FocusEventHandler<HTMLInputElement | HTMLSelectElement> | undefined;
-} & Omit<Pick<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof import("react").InputHTMLAttributes<HTMLInputElement>>, "defaultValue" | "onChange" | "value" | "name" | "color" | "height" | "translate" | "width" | "hidden" | "size" | "style" | "help" | "multiple" | "disabled" | "key" | "children" | "form" | "label" | "slot" | "title" | "pattern" | "as" | "id" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "list" | "step" | "max" | "min" | "crossOrigin" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "__next36pxDefaultSize" | "__unstableInputWidth" | "hideLabelFromVision" | "labelPosition" | "accept" | "alt" | "autoComplete" | "capture" | "checked" | "enterKeyHint" | "maxLength" | "minLength" | "readOnly" | "required" | "src" | "dragDirection" | "dragThreshold" | "isDragEnabled" | "isPressEnterToChange" | "onValidate" | "__unstableStateReducer" | "hideHTMLArrows" | "isShiftStepEnabled" | "shiftStep" | "disableUnits" | "unit" | "isUnitSelectTabbable" | "units" | "isResetValueOnUnitChange" | "onUnitChange"> & import("react").RefAttributes<any> & {
+} & Omit<Pick<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof import("react").InputHTMLAttributes<HTMLInputElement>>, "defaultValue" | "onChange" | "value" | "name" | "color" | "height" | "translate" | "width" | "hidden" | "size" | "style" | "help" | "multiple" | "disabled" | "key" | "children" | "form" | "label" | "slot" | "title" | "pattern" | "as" | "id" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "list" | "step" | "max" | "min" | "crossOrigin" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "autoComplete" | "maxLength" | "minLength" | "readOnly" | "required" | "src" | "alt" | "accept" | "capture" | "checked" | "enterKeyHint" | "__next36pxDefaultSize" | "__unstableInputWidth" | "hideLabelFromVision" | "labelPosition" | "dragDirection" | "dragThreshold" | "isDragEnabled" | "isPressEnterToChange" | "onValidate" | "__unstableStateReducer" | "hideHTMLArrows" | "isShiftStepEnabled" | "shiftStep" | "disableUnits" | "unit" | "isUnitSelectTabbable" | "units" | "isResetValueOnUnitChange" | "onUnitChange"> & import("react").RefAttributes<any> & {
     theme?: import("@emotion/react").Theme | undefined;
 } & Pick<BoxUnitControlProps, "isFirst" | "isLast" | "isOnly">, {}, {}>;
 //# sourceMappingURL=box-control-styles.d.ts.map