@wordpress/components 21.3.0 → 22.1.0

package/build-style/style.css

@@ -171,7 +171,7 @@
   width: 100%;
 }
 .components-autocomplete__result.components-button.is-selected {
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
 }
 
 .components-button-group {
@@ -332,40 +332,23 @@ p + .components-button.is-tertiary {
   margin-left: -6px;
 }
 .components-button.is-destructive {
+  --wp-components-color-accent: #cc1818;
+  --wp-components-color-accent-darker-10: #9e1313;
+  --wp-components-color-accent-darker-20: #710d0d;
+}
+.components-button.is-destructive:not(.is-primary):not(.is-secondary):not(.is-tertiary):not(.is-link) {
   color: #cc1818;
   box-shadow: inset 0 0 0 1px #cc1818;
 }
-.components-button.is-destructive:hover:not(:disabled) {
+.components-button.is-destructive:not(.is-primary):not(.is-secondary):not(.is-tertiary):not(.is-link):hover:not(:disabled) {
   color: #710d0d;
-  box-shadow: inset 0 0 0 1px #710d0d;
 }
-.components-button.is-destructive:focus:not(:disabled) {
-  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+.components-button.is-destructive:not(.is-primary):not(.is-secondary):not(.is-tertiary):not(.is-link):focus:not(:disabled) {
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #cc1818;
 }
-.components-button.is-destructive:active:not(:disabled) {
+.components-button.is-destructive:not(.is-primary):not(.is-secondary):not(.is-tertiary):not(.is-link):active:not(:disabled) {
   background: #ccc;
 }
-.components-button.is-destructive.is-primary {
-  color: #fff;
-  background: #cc1818;
-  box-shadow: inset 0 0 0 1px #cc1818;
-}
-.components-button.is-destructive.is-primary:hover:not(:disabled) {
-  color: #fff;
-  background: #710d0d;
-  box-shadow: inset 0 0 0 1px #710d0d;
-}
-.components-button.is-destructive.is-tertiary {
-  box-shadow: none;
-}
-.components-button.is-destructive.is-tertiary:hover:not(:disabled) {
-  box-shadow: inset 0 0 0 1px #cc1818;
-  color: #cc1818;
-}
-.components-button.is-destructive.is-tertiary:focus:not(:disabled) {
-  box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) #cc1818;
-  color: #cc1818;
-}
 .components-button.is-link {
   margin: 0;
   padding: 0;
@@ -391,16 +374,6 @@ p + .components-button.is-tertiary {
 .components-button.is-link:focus {
   border-radius: 2px;
 }
-.components-button.is-link.is-destructive {
-  color: #cc1818;
-}
-.components-button.is-link.is-destructive:active:not(:disabled), .components-button.is-link.is-destructive:hover:not(:disabled) {
-  color: #710d0d;
-  background: none;
-}
-.components-button.is-link.is-destructive:focus:not(:disabled) {
-  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
-}
 .components-button:not([aria-disabled=true]):active {
   color: inherit;
 }
@@ -439,7 +412,7 @@ p + .components-button.is-tertiary {
   margin-right: 2px;
 }
 .components-button.has-icon.has-text {
-  justify-content: left;
+  justify-content: start;
 }
 .components-button.has-icon.has-text svg {
   margin-right: 8px;
@@ -593,12 +566,12 @@ 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-admin-theme-color);
+  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   outline: 2px solid transparent;
 }
 .components-checkbox-control__input[type=checkbox]:checked, .components-checkbox-control__input[type=checkbox]:indeterminate {
-  background: var(--wp-admin-theme-color);
-  border-color: var(--wp-admin-theme-color);
+  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));
 }
 .components-checkbox-control__input[type=checkbox]:checked::-ms-check, .components-checkbox-control__input[type=checkbox]:indeterminate::-ms-check {
   opacity: 0;
@@ -899,9 +872,9 @@ input.components-combobox-control__input[type=text]:focus {
   width: 100%;
   /*rtl:begin:ignore*/
   background-image: repeating-linear-gradient(45deg, #e0e0e0 25%, transparent 25%, transparent 75%, #e0e0e0 75%, #e0e0e0), repeating-linear-gradient(45deg, #e0e0e0 25%, transparent 25%, transparent 75%, #e0e0e0 75%, #e0e0e0);
-  background-position: 0 0, 25px 25px;
+  background-position: 0 0, 24px 24px;
   /*rtl:end:ignore*/
-  background-size: calc(2 * 25px) calc(2 * 25px);
+  background-size: calc(2 * 24px) calc(2 * 24px);
   box-sizing: border-box;
   color: #fff;
   cursor: pointer;
@@ -909,7 +882,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-admin-theme-color);
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   outline-width: 2px;
 }
 
@@ -1015,6 +988,11 @@ input.components-combobox-control__input[type=text]:focus {
   outline: 0;
 }
 
+.components-custom-select-control__hint {
+  color: #949494;
+  margin-left: 10px;
+}
+
 .components-custom-select-control__menu {
   border: 1px solid #1e1e1e;
   background-color: #fff;
@@ -1051,7 +1029,7 @@ input.components-combobox-control__input[type=text]:focus {
   background: #ddd;
 }
 .components-custom-select-control__item .components-custom-select-control__item-hint {
-  color: #757575;
+  color: #949494;
   text-align: right;
   padding-right: 4px;
 }
@@ -1125,7 +1103,7 @@ body.is-dragging-components-draggable {
   height: 100%;
   width: 100%;
   display: flex;
-  background-color: var(--wp-admin-theme-color);
+  background-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   align-items: center;
   justify-content: center;
   z-index: 50;
@@ -1298,12 +1276,12 @@ body.is-dragging-components-draggable {
   }
 }
 .components-form-toggle.is-checked .components-form-toggle__track {
-  background-color: var(--wp-admin-theme-color);
-  border: 1px solid var(--wp-admin-theme-color);
+  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));
   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-admin-theme-color);
+  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
@@ -1447,7 +1425,7 @@ body.is-dragging-components-draggable {
 }
 .components-form-token-field__token.is-borderless .components-form-token-field__token-text {
   background: transparent;
-  color: var(--wp-admin-theme-color);
+  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
 }
 .components-form-token-field__token.is-borderless .components-form-token-field__remove-token {
   background: transparent;
@@ -1538,7 +1516,7 @@ body.is-dragging-components-draggable {
   cursor: pointer;
 }
 .components-form-token-field__suggestion.is-selected {
-  background: var(--wp-admin-theme-color);
+  background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   color: #fff;
 }
 
@@ -1658,27 +1636,50 @@ body.is-dragging-components-draggable {
   position: relative;
 }
 
-.is-focusing-regions [role=region]:focus::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  pointer-events: none;
-  outline: 4px solid transparent;
-  box-shadow: inset 0 0 0 4px var(--wp-admin-theme-color);
+.is-focusing-regions [role=region]:focus {
+  outline: 4px solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  outline-offset: -4px;
 }
-@supports (outline-offset: 1px) {
-  .is-focusing-regions [role=region]:focus::after {
-    content: none;
-  }
-  .is-focusing-regions [role=region]:focus {
-    outline-style: solid;
-    outline-color: var(--wp-admin-theme-color);
-    outline-width: 4px;
-    outline-offset: -4px;
-  }
+.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 {
+  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 {
@@ -1744,7 +1745,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-admin-theme-color-darker-10);
+  color: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #006ba1));
   opacity: 0.3;
 }
 
@@ -1924,7 +1925,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-admin-theme-color);
+  border-left: 4px solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   margin: 5px 15px 2px;
   padding: 8px 12px;
   align-items: center;
@@ -2091,7 +2092,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-admin-theme-color);
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   border-radius: 0;
 }
 .components-panel__body-toggle.components-button .components-panel__arrow {
@@ -2423,6 +2424,13 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   outline: 1px solid #1e1e1e;
   box-shadow: none;
 }
+.is-unstyled .components-popover__content {
+  background: none;
+  border: none;
+  border-radius: 0;
+  outline: none;
+  box-shadow: none;
+}
 .components-popover.is-expanded .components-popover__content {
   position: static;
   height: calc(100% - 48px);
@@ -2609,7 +2617,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-admin-theme-color);
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   outline: 2px solid transparent;
 }
 
@@ -2619,7 +2627,7 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   content: "";
   width: 3px;
   height: 3px;
-  background: var(--wp-admin-theme-color);
+  background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   cursor: inherit;
   position: absolute;
   top: calc(50% - 1px);
@@ -2843,7 +2851,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-admin-theme-color);
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
 }
 .components-search-control input[type=search].components-search-control__input::placeholder {
   color: #757575;
@@ -2910,7 +2918,7 @@ body.lockscroll {
   }
 }
 .components-snackbar:focus {
-  box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--wp-admin-theme-color);
+  box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
 }
 .components-snackbar.components-snackbar-explicit-dismiss {
   cursor: default;
@@ -2946,7 +2954,7 @@ body.lockscroll {
   outline: 1px dotted #fff;
 }
 .components-snackbar__action.components-button:not(:disabled):not([aria-disabled=true]):not(.is-secondary):hover {
-  color: var(--wp-admin-theme-color);
+  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
 }
 
 .components-snackbar__content {
@@ -3000,10 +3008,10 @@ body.lockscroll {
   visibility: hidden;
 }
 .components-tab-panel__tabs-item:focus:not(:disabled) {
-  box-shadow: inset 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  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-admin-theme-color);
+  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;
 }
 .components-tab-panel__tabs-item.is-active::before {
@@ -3016,10 +3024,10 @@ body.lockscroll {
   border-bottom: 1.5px solid transparent;
 }
 .components-tab-panel__tabs-item:focus {
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  box-shadow: inset 0 0 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:focus {
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 -3px 0 0 var(--wp-admin-theme-color);
+  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-text-control__input,

package/build-types/base-field/hook.d.ts

@@ -16,13 +16,14 @@ export function useBaseField(props: import('../ui/context').WordPressComponentPr
     isColumn: boolean;
     children: import("react").ReactNode;
     isReversed?: boolean | undefined;
-    slot?: string | undefined;
-    style?: import("react").CSSProperties | undefined;
-    title?: string | undefined;
-    hidden?: boolean | undefined;
+    onChange?: import("react").FormEventHandler<HTMLDivElement> | undefined;
     color?: string | undefined;
     translate?: "no" | "yes" | undefined;
+    hidden?: boolean | undefined;
+    style?: import("react").CSSProperties | undefined;
     key?: import("react").Key | null | undefined;
+    slot?: string | undefined;
+    title?: string | undefined;
     defaultChecked?: boolean | undefined;
     suppressContentEditableWarning?: boolean | undefined;
     suppressHydrationWarning?: boolean | undefined;
@@ -57,27 +58,27 @@ export function useBaseField(props: import('../ui/context').WordPressComponentPr
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "on" | "off" | undefined;
-    inputMode?: "search" | "text" | "none" | "email" | "tel" | "url" | "numeric" | "decimal" | undefined;
+    inputMode?: "none" | "text" | "search" | "email" | "tel" | "url" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     'aria-activedescendant'?: string | undefined;
     'aria-atomic'?: (boolean | "false" | "true") | undefined;
-    'aria-autocomplete'?: "none" | "both" | "inline" | "list" | undefined;
+    'aria-autocomplete'?: "both" | "none" | "inline" | "list" | undefined;
     'aria-busy'?: (boolean | "false" | "true") | undefined;
     'aria-checked'?: boolean | "mixed" | "false" | "true" | undefined;
     'aria-colcount'?: number | undefined;
     'aria-colindex'?: number | undefined;
     'aria-colspan'?: number | undefined;
     'aria-controls'?: string | undefined;
-    'aria-current'?: boolean | "time" | "page" | "false" | "true" | "date" | "step" | "location" | undefined;
+    'aria-current'?: boolean | "page" | "false" | "true" | "time" | "date" | "step" | "location" | undefined;
     'aria-describedby'?: string | undefined;
     'aria-details'?: string | undefined;
     'aria-disabled'?: (boolean | "false" | "true") | undefined;
-    'aria-dropeffect'?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
+    'aria-dropeffect'?: "none" | "copy" | "move" | "link" | "execute" | "popup" | undefined;
     'aria-errormessage'?: string | undefined;
     'aria-expanded'?: (boolean | "false" | "true") | undefined;
     'aria-flowto'?: string | undefined;
     'aria-grabbed'?: (boolean | "false" | "true") | undefined;
-    'aria-haspopup'?: boolean | "dialog" | "menu" | "grid" | "listbox" | "false" | "true" | "tree" | undefined;
+    'aria-haspopup'?: boolean | "grid" | "listbox" | "menu" | "false" | "true" | "dialog" | "tree" | undefined;
     'aria-hidden'?: (boolean | "false" | "true") | undefined;
     'aria-invalid'?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
     'aria-keyshortcuts'?: string | undefined;
@@ -94,7 +95,7 @@ export function useBaseField(props: import('../ui/context').WordPressComponentPr
     'aria-posinset'?: number | undefined;
     'aria-pressed'?: boolean | "mixed" | "false" | "true" | undefined;
     'aria-readonly'?: (boolean | "false" | "true") | undefined;
-    'aria-relevant'?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+    'aria-relevant'?: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
     'aria-required'?: (boolean | "false" | "true") | undefined;
     'aria-roledescription'?: string | undefined;
     'aria-rowcount'?: number | undefined;
@@ -126,7 +127,6 @@ export function useBaseField(props: import('../ui/context').WordPressComponentPr
     onFocusCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
     onBlur?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
     onBlurCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
-    onChange?: import("react").FormEventHandler<HTMLDivElement> | undefined;
     onChangeCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
     onBeforeInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
     onBeforeInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;

package/build-types/border-box-control/border-box-control/component.d.ts

@@ -1,12 +1,61 @@
 /// <reference types="react" />
-import type { LabelProps } from '../../border-control/types';
-declare const ConnectedBorderBoxControl: import("../../ui/context").WordPressComponent<"div", import("../../border-control/types").ColorProps & LabelProps & {
-    enableStyle?: boolean | undefined;
+import type { LabelProps, BorderControlProps } from '../../border-control/types';
+/**
+ * The `BorderBoxControl` effectively has two view states. The first, a "linked"
+ * view, allows configuration of a flat border via a single `BorderControl`.
+ * The second, a "split" view, contains a `BorderControl` for each side
+ * as well as a visualizer for the currently selected borders. Each view also
+ * contains a button to toggle between the two.
+ *
+ * When switching from the "split" view to "linked", if the individual side
+ * borders are not consistent, the "linked" view will display any border
+ * properties selections that are consistent while showing a mixed state for
+ * those that aren't. For example, if all borders had the same color and style
+ * but different widths, then the border dropdown in the "linked" view's
+ * `BorderControl` would show that consistent color and style but the "linked"
+ * view's width input would show "Mixed" placeholder text.
+ *
+ * ```jsx
+ * import { __experimentalBorderBoxControl as BorderBoxControl } from '@wordpress/components';
+ * import { __ } from '@wordpress/i18n';
+ *
+ * const colors = [
+ * 	{ name: 'Blue 20', color: '#72aee6' },
+ * 	// ...
+ * ];
+ *
+ * const MyBorderBoxControl = () => {
+ * 	const defaultBorder = {
+ * 		color: '#72aee6',
+ * 		style: 'dashed',
+ * 		width: '1px',
+ * 	};
+ * 	const [ borders, setBorders ] = useState( {
+ * 		top: defaultBorder,
+ * 		right: defaultBorder,
+ * 		bottom: defaultBorder,
+ * 		left: defaultBorder,
+ * 	} );
+ * 	const onChange = ( newBorders ) => setBorders( newBorders );
+ *
+ * 	return (
+ * 		<BorderBoxControl
+ * 			colors={ colors }
+ * 			label={ __( 'Borders' ) }
+ * 			onChange={ onChange }
+ * 			value={ borders }
+ * 		/>
+ * 	);
+ * };
+ * ```
+ */
+export declare const BorderBoxControl: import("../../ui/context").WordPressComponent<"div", Pick<import("../../color-palette/types").ColorPaletteProps, "colors" | "enableAlpha" | "__experimentalHasMultipleOrigins" | "__experimentalIsRenderedInSidebar"> & {
+    disableCustomColors?: boolean | undefined;
+} & LabelProps & Pick<BorderControlProps, "size" | "enableStyle"> & {
     onChange: (value: import("../types").AnyBorder) => void;
     popoverPlacement?: import("@floating-ui/core").Placement | undefined;
     popoverOffset?: number | undefined;
     value: import("../types").AnyBorder;
-    __next36pxDefaultSize?: boolean | undefined;
-} & import("react").RefAttributes<any>, true>;
-export default ConnectedBorderBoxControl;
+} & import("react").RefAttributes<any>, false>;
+export default BorderBoxControl;
 //# sourceMappingURL=component.d.ts.map

package/build-types/border-box-control/border-box-control/component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/border-box-control/border-box-control/component.tsx"],"names":[],"mappings":";AAqBA,OAAO,KAAK,EACX,UAAU,EAEV,MAAM,4BAA4B,CAAC;AAiIpC,QAAA,MAAM,yBAAyB;;;;;;;6CAG9B,CAAC;AAEF,eAAe,yBAAyB,CAAC"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/border-box-control/border-box-control/component.tsx"],"names":[],"mappings":";AAoBA,OAAO,KAAK,EACX,UAAU,EACV,kBAAkB,EAClB,MAAM,4BAA4B,CAAC;AAoIpC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;AACH,eAAO,MAAM,gBAAgB;;;;;;;8CAG5B,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/build-types/border-box-control/border-box-control/hook.d.ts

@@ -4,7 +4,10 @@ import type { Border } from '../../border-control/types';
 import type { Borders, BorderSide, BorderBoxControlProps } from '../types';
 export declare function useBorderBoxControl(props: WordPressComponentProps<BorderBoxControlProps, 'div'>): {
     className: string;
+    colors: (import("../../color-palette/types").ColorObject | import("../../color-palette/types").PaletteObject)[];
     disableUnits: boolean;
+    enableAlpha: boolean;
+    enableStyle: boolean;
     hasMixedBorders: boolean;
     isLinked: boolean;
     linkedControlClassName: string;
@@ -12,27 +15,25 @@ export declare function useBorderBoxControl(props: WordPressComponentProps<Borde
     onSplitChange: (newBorder: Border | undefined, side: BorderSide) => void;
     toggleLinked: () => void;
     linkedValue: Border | undefined;
+    size: "default" | "__unstable-large";
     splitValue: Borders | undefined;
-    colors?: import("../../border-control/types").Colors | undefined;
+    wrapperClassName: string;
+    __experimentalHasMultipleOrigins: boolean;
+    __experimentalIsRenderedInSidebar: boolean;
     disableCustomColors?: boolean | undefined;
-    enableAlpha?: boolean | undefined;
-    __experimentalHasMultipleOrigins?: boolean | undefined;
-    __experimentalIsRenderedInSidebar?: boolean | undefined;
     hideLabelFromVision?: boolean | undefined;
     label?: string | undefined;
-    enableStyle?: boolean | undefined;
     popoverPlacement?: import("@floating-ui/core").Placement | undefined;
     popoverOffset?: number | undefined;
-    __next36pxDefaultSize?: boolean | undefined;
-    slot?: string | undefined;
-    style?: import("react").CSSProperties | undefined;
-    title?: string | undefined;
-    hidden?: boolean | undefined;
+    defaultValue?: string | number | readonly string[] | undefined;
     color?: string | undefined;
     translate?: "no" | "yes" | undefined;
+    hidden?: boolean | undefined;
+    style?: import("react").CSSProperties | undefined;
     key?: import("react").Key | null | undefined;
+    slot?: string | undefined;
+    title?: string | undefined;
     defaultChecked?: boolean | undefined;
-    defaultValue?: string | number | readonly string[] | undefined;
     suppressContentEditableWarning?: boolean | undefined;
     suppressHydrationWarning?: boolean | undefined;
     accessKey?: string | undefined;
@@ -66,27 +67,27 @@ export declare function useBorderBoxControl(props: WordPressComponentProps<Borde
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "on" | "off" | undefined;
-    inputMode?: "search" | "text" | "none" | "email" | "tel" | "url" | "numeric" | "decimal" | undefined;
+    inputMode?: "none" | "text" | "search" | "email" | "tel" | "url" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     'aria-activedescendant'?: string | undefined;
     'aria-atomic'?: (boolean | "false" | "true") | undefined;
-    'aria-autocomplete'?: "none" | "both" | "inline" | "list" | undefined;
+    'aria-autocomplete'?: "both" | "none" | "inline" | "list" | undefined;
     'aria-busy'?: (boolean | "false" | "true") | undefined;
     'aria-checked'?: boolean | "mixed" | "false" | "true" | undefined;
     'aria-colcount'?: number | undefined;
     'aria-colindex'?: number | undefined;
     'aria-colspan'?: number | undefined;
     'aria-controls'?: string | undefined;
-    'aria-current'?: boolean | "time" | "page" | "false" | "true" | "date" | "step" | "location" | undefined;
+    'aria-current'?: boolean | "page" | "false" | "true" | "time" | "date" | "step" | "location" | undefined;
     'aria-describedby'?: string | undefined;
     'aria-details'?: string | undefined;
     'aria-disabled'?: (boolean | "false" | "true") | undefined;
-    'aria-dropeffect'?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
+    'aria-dropeffect'?: "none" | "copy" | "move" | "link" | "execute" | "popup" | undefined;
     'aria-errormessage'?: string | undefined;
     'aria-expanded'?: (boolean | "false" | "true") | undefined;
     'aria-flowto'?: string | undefined;
     'aria-grabbed'?: (boolean | "false" | "true") | undefined;
-    'aria-haspopup'?: boolean | "dialog" | "menu" | "grid" | "listbox" | "false" | "true" | "tree" | undefined;
+    'aria-haspopup'?: boolean | "grid" | "listbox" | "menu" | "false" | "true" | "dialog" | "tree" | undefined;
     'aria-hidden'?: (boolean | "false" | "true") | undefined;
     'aria-invalid'?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
     'aria-keyshortcuts'?: string | undefined;
@@ -103,7 +104,7 @@ export declare function useBorderBoxControl(props: WordPressComponentProps<Borde
     'aria-posinset'?: number | undefined;
     'aria-pressed'?: boolean | "mixed" | "false" | "true" | undefined;
     'aria-readonly'?: (boolean | "false" | "true") | undefined;
-    'aria-relevant'?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+    'aria-relevant'?: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
     'aria-required'?: (boolean | "false" | "true") | undefined;
     'aria-roledescription'?: string | undefined;
     'aria-rowcount'?: number | undefined;

package/build-types/border-box-control/border-box-control/hook.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hook.d.ts","sourceRoot":"","sources":["../../../src/border-box-control/border-box-control/hook.ts"],"names":[],"mappings":";AAkBA,OAAO,EAAoB,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AAG7E,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACzD,OAAO,KAAK,EAAE,OAAO,EAAE,UAAU,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAE3E,wBAAgB,mBAAmB,CAClC,KAAK,EAAE,uBAAuB,CAAE,qBAAqB,EAAE,KAAK,CAAE;;;;;;;+BA+DlD,MAAM,GAAG,SAAS,QACvB,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiCjB"}
+{"version":3,"file":"hook.d.ts","sourceRoot":"","sources":["../../../src/border-box-control/border-box-control/hook.ts"],"names":[],"mappings":";AAkBA,OAAO,EAAoB,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AAG7E,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACzD,OAAO,KAAK,EAAE,OAAO,EAAE,UAAU,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAE3E,wBAAgB,mBAAmB,CAClC,KAAK,EAAE,uBAAuB,CAAE,qBAAqB,EAAE,KAAK,CAAE;;;;;;;;;;+BAuElD,MAAM,GAAG,SAAS,QACvB,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4CjB"}

package/build-types/border-box-control/border-box-control-linked-button/component.d.ts

@@ -1,5 +1,7 @@
 /// <reference types="react" />
-import type { LinkedButtonProps } from '../types';
-declare const ConnectedBorderBoxControlLinkedButton: import("../../ui/context").WordPressComponent<"div", LinkedButtonProps & import("react").RefAttributes<any>, true>;
+declare const ConnectedBorderBoxControlLinkedButton: import("../../ui/context").WordPressComponent<"div", Pick<import("../types").BorderBoxControlProps, "size"> & {
+    isLinked: boolean;
+    onClick: () => void;
+} & import("react").RefAttributes<any>, true>;
 export default ConnectedBorderBoxControlLinkedButton;
 //# sourceMappingURL=component.d.ts.map

package/build-types/border-box-control/border-box-control-linked-button/component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/border-box-control/border-box-control-linked-button/component.tsx"],"names":[],"mappings":";AAeA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AA0BlD,QAAA,MAAM,qCAAqC,oHAG1C,CAAC;AACF,eAAe,qCAAqC,CAAC"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/border-box-control/border-box-control-linked-button/component.tsx"],"names":[],"mappings":";AAyCA,QAAA,MAAM,qCAAqC;;;6CAG1C,CAAC;AACF,eAAe,qCAAqC,CAAC"}