@wordpress/components 21.1.2-next.4d3b314fd5.0 → 21.3.0

package/build-style/style-rtl.css

@@ -244,64 +244,64 @@
   }
 }
 .components-button[aria-expanded=true], .components-button:hover {
-  color: var(--wp-admin-theme-color);
+  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
 }
 .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-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));
   outline: 3px solid transparent;
 }
 .components-button.is-primary {
   white-space: nowrap;
-  background: var(--wp-admin-theme-color);
+  background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   color: #fff;
   text-decoration: none;
   text-shadow: none;
   outline: 1px solid transparent;
 }
 .components-button.is-primary:hover:not(:disabled) {
-  background: var(--wp-admin-theme-color-darker-10);
+  background: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #006ba1));
   color: #fff;
 }
 .components-button.is-primary:active:not(:disabled) {
-  background: var(--wp-admin-theme-color-darker-20);
-  border-color: var(--wp-admin-theme-color-darker-20);
+  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;
 }
 .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-admin-theme-color);
+  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));
 }
 .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-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));
   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 #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-button.is-primary.is-busy, .components-button.is-primary.is-busy:disabled, .components-button.is-primary.is-busy[aria-disabled=true] {
   color: #fff;
   background-size: 100px 100%;
   /* stylelint-disable */
-  background-image: linear-gradient(45deg, var(--wp-admin-theme-color) 33%, var(--wp-admin-theme-color-darker-20) 33%, var(--wp-admin-theme-color-darker-20) 70%, var(--wp-admin-theme-color) 70%);
+  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%);
   /* stylelint-enable */
-  border-color: var(--wp-admin-theme-color);
+  border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
 }
 .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: #ddd;
-  color: var(--wp-admin-theme-color-darker-10);
+  color: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #006ba1));
   box-shadow: none;
 }
 .components-button.is-secondary:hover:not(:disabled), .components-button.is-tertiary:hover:not(:disabled) {
-  color: var(--wp-admin-theme-color-darker-10);
-  box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color-darker-10);
+  color: 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, #006ba1));
 }
 .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;
@@ -312,15 +312,15 @@
   outline: none;
 }
 .components-button.is-secondary {
-  box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color);
+  box-shadow: inset 0 0 0 1px var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   outline: 1px solid transparent;
   white-space: nowrap;
-  color: var(--wp-admin-theme-color);
+  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   background: transparent;
 }
 .components-button.is-tertiary {
   white-space: nowrap;
-  color: var(--wp-admin-theme-color);
+  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   background: transparent;
   padding: 6px;
 }
@@ -340,7 +340,7 @@ p + .components-button.is-tertiary {
   box-shadow: inset 0 0 0 1px #710d0d;
 }
 .components-button.is-destructive:focus:not(:disabled) {
-  color: var(--wp-admin-theme-color);
+  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
 }
 .components-button.is-destructive:active:not(:disabled) {
   background: #ccc;
@@ -375,7 +375,7 @@ p + .components-button.is-tertiary {
   background: none;
   outline: none;
   text-align: right;
-  color: var(--wp-admin-theme-color);
+  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   text-decoration: underline;
   transition-property: border, background, color;
   transition-duration: 0.05s;
@@ -399,7 +399,7 @@ p + .components-button.is-tertiary {
   background: none;
 }
 .components-button.is-link.is-destructive:focus:not(:disabled) {
-  color: var(--wp-admin-theme-color);
+  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
 }
 .components-button:not([aria-disabled=true]):active {
   color: inherit;
@@ -452,7 +452,7 @@ p + .components-button.is-tertiary {
   background: #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-admin-theme-color);
+  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));
   outline: 2px solid transparent;
 }
 .components-button.is-pressed:hover:not(:disabled) {
@@ -1253,103 +1253,6 @@ body.is-dragging-components-draggable {
   color: transparent;
 }
 
-.components-font-size-picker__header__hint {
-  margin-right: 4px;
-  color: #757575;
-}
-.components-font-size-picker__header .components-base-control__label {
-  margin-bottom: 0;
-}
-.components-font-size-picker__header .components-button.is-small.has-icon:not(.has-text) {
-  min-width: 24px;
-  padding: 0;
-}
-
-.components-font-size-picker__controls {
-  max-width: 248px;
-  align-items: center;
-  margin-top: 8px;
-}
-.components-font-size-picker__controls:not(.is-next-has-no-margin-bottom) {
-  margin-bottom: 24px;
-}
-.components-font-size-picker__controls .components-unit-control-wrapper .components-input-control__label {
-  font-weight: 300;
-  padding-bottom: 0 !important;
-  margin-bottom: 8px !important;
-}
-.components-font-size-picker__controls .components-font-size-picker__number {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-  padding: 6px 8px;
-  box-shadow: 0 0 0 transparent;
-  transition: box-shadow 0.1s linear;
-  border-radius: 2px;
-  border: 1px solid #757575;
-  /* Fonts smaller than 16px causes mobile safari to zoom. */
-  font-size: 16px;
-  /* Override core line-height. To be reviewed. */
-  line-height: normal;
-  display: inline-block;
-  font-weight: 500;
-  height: 30px;
-  margin-bottom: 0;
-  margin-right: 0;
-  margin-left: 8px;
-  margin-top: 8px;
-  width: 54px;
-}
-@media (prefers-reduced-motion: reduce) {
-  .components-font-size-picker__controls .components-font-size-picker__number {
-    transition-duration: 0s;
-    transition-delay: 0s;
-  }
-}
-@media (min-width: 600px) {
-  .components-font-size-picker__controls .components-font-size-picker__number {
-    font-size: 13px;
-    /* Override core line-height. To be reviewed. */
-    line-height: normal;
-  }
-}
-.components-font-size-picker__controls .components-font-size-picker__number:focus {
-  border-color: var(--wp-admin-theme-color);
-  box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
-  outline: 2px solid transparent;
-}
-.components-font-size-picker__controls .components-font-size-picker__number::-webkit-input-placeholder {
-  color: rgba(30, 30, 30, 0.62);
-}
-.components-font-size-picker__controls .components-font-size-picker__number::-moz-placeholder {
-  opacity: 1;
-  color: rgba(30, 30, 30, 0.62);
-}
-.components-font-size-picker__controls .components-font-size-picker__number:-ms-input-placeholder {
-  color: rgba(30, 30, 30, 0.62);
-}
-.components-font-size-picker__controls .components-font-size-picker__number[value=""] + .components-button {
-  cursor: default;
-  opacity: 0.3;
-  pointer-events: none;
-}
-.components-font-size-picker__controls .components-font-size-picker__number-container {
-  display: flex;
-  flex-direction: column;
-}
-.components-font-size-picker__controls .components-color-palette__clear {
-  height: 30px;
-}
-
-.components-font-size-picker__custom-input .components-range-control__slider + .dashicon {
-  width: 30px;
-  height: 30px;
-}
-
-.components-font-size-picker {
-  border: 0;
-  padding: 0;
-  margin: 0;
-}
-
 .components-form-toggle {
   position: relative;
   display: inline-block;
@@ -2427,7 +2330,9 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   min-width: 100px;
   -webkit-backdrop-filter: blur(100px);
           backdrop-filter: blur(100px);
-  background-color: rgba(255, 255, 255, 0.1);
+  background-color: transparent;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
   border-radius: 2px;
   overflow: hidden;
 }
@@ -2443,6 +2348,7 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
 .components-placeholder.has-illustration .components-placeholder__instructions,
 .components-placeholder.has-illustration .components-button {
   opacity: 0;
+  pointer-events: none;
   transition: opacity 0.1s linear;
 }
 @media (prefers-reduced-motion: reduce) {
@@ -2457,6 +2363,7 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
 .is-selected > .components-placeholder.has-illustration .components-placeholder__instructions,
 .is-selected > .components-placeholder.has-illustration .components-button {
   opacity: 1;
+  pointer-events: auto;
 }
 .components-placeholder.has-illustration::before {
   content: "";

package/build-style/style.css

@@ -244,64 +244,64 @@
   }
 }
 .components-button[aria-expanded=true], .components-button:hover {
-  color: var(--wp-admin-theme-color);
+  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
 }
 .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-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));
   outline: 3px solid transparent;
 }
 .components-button.is-primary {
   white-space: nowrap;
-  background: var(--wp-admin-theme-color);
+  background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   color: #fff;
   text-decoration: none;
   text-shadow: none;
   outline: 1px solid transparent;
 }
 .components-button.is-primary:hover:not(:disabled) {
-  background: var(--wp-admin-theme-color-darker-10);
+  background: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #006ba1));
   color: #fff;
 }
 .components-button.is-primary:active:not(:disabled) {
-  background: var(--wp-admin-theme-color-darker-20);
-  border-color: var(--wp-admin-theme-color-darker-20);
+  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;
 }
 .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-admin-theme-color);
+  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));
 }
 .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-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));
   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 #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-button.is-primary.is-busy, .components-button.is-primary.is-busy:disabled, .components-button.is-primary.is-busy[aria-disabled=true] {
   color: #fff;
   background-size: 100px 100%;
   /* stylelint-disable */
-  background-image: linear-gradient(-45deg, var(--wp-admin-theme-color) 33%, var(--wp-admin-theme-color-darker-20) 33%, var(--wp-admin-theme-color-darker-20) 70%, var(--wp-admin-theme-color) 70%);
+  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%);
   /* stylelint-enable */
-  border-color: var(--wp-admin-theme-color);
+  border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
 }
 .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: #ddd;
-  color: var(--wp-admin-theme-color-darker-10);
+  color: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #006ba1));
   box-shadow: none;
 }
 .components-button.is-secondary:hover:not(:disabled), .components-button.is-tertiary:hover:not(:disabled) {
-  color: var(--wp-admin-theme-color-darker-10);
-  box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color-darker-10);
+  color: 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, #006ba1));
 }
 .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;
@@ -312,15 +312,15 @@
   outline: none;
 }
 .components-button.is-secondary {
-  box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color);
+  box-shadow: inset 0 0 0 1px var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   outline: 1px solid transparent;
   white-space: nowrap;
-  color: var(--wp-admin-theme-color);
+  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   background: transparent;
 }
 .components-button.is-tertiary {
   white-space: nowrap;
-  color: var(--wp-admin-theme-color);
+  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   background: transparent;
   padding: 6px;
 }
@@ -340,7 +340,7 @@ p + .components-button.is-tertiary {
   box-shadow: inset 0 0 0 1px #710d0d;
 }
 .components-button.is-destructive:focus:not(:disabled) {
-  color: var(--wp-admin-theme-color);
+  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
 }
 .components-button.is-destructive:active:not(:disabled) {
   background: #ccc;
@@ -375,7 +375,7 @@ p + .components-button.is-tertiary {
   background: none;
   outline: none;
   text-align: left;
-  color: var(--wp-admin-theme-color);
+  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   text-decoration: underline;
   transition-property: border, background, color;
   transition-duration: 0.05s;
@@ -399,7 +399,7 @@ p + .components-button.is-tertiary {
   background: none;
 }
 .components-button.is-link.is-destructive:focus:not(:disabled) {
-  color: var(--wp-admin-theme-color);
+  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
 }
 .components-button:not([aria-disabled=true]):active {
   color: inherit;
@@ -452,7 +452,7 @@ p + .components-button.is-tertiary {
   background: #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-admin-theme-color);
+  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));
   outline: 2px solid transparent;
 }
 .components-button.is-pressed:hover:not(:disabled) {
@@ -1256,103 +1256,6 @@ body.is-dragging-components-draggable {
   color: transparent;
 }
 
-.components-font-size-picker__header__hint {
-  margin-left: 4px;
-  color: #757575;
-}
-.components-font-size-picker__header .components-base-control__label {
-  margin-bottom: 0;
-}
-.components-font-size-picker__header .components-button.is-small.has-icon:not(.has-text) {
-  min-width: 24px;
-  padding: 0;
-}
-
-.components-font-size-picker__controls {
-  max-width: 248px;
-  align-items: center;
-  margin-top: 8px;
-}
-.components-font-size-picker__controls:not(.is-next-has-no-margin-bottom) {
-  margin-bottom: 24px;
-}
-.components-font-size-picker__controls .components-unit-control-wrapper .components-input-control__label {
-  font-weight: 300;
-  padding-bottom: 0 !important;
-  margin-bottom: 8px !important;
-}
-.components-font-size-picker__controls .components-font-size-picker__number {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-  padding: 6px 8px;
-  box-shadow: 0 0 0 transparent;
-  transition: box-shadow 0.1s linear;
-  border-radius: 2px;
-  border: 1px solid #757575;
-  /* Fonts smaller than 16px causes mobile safari to zoom. */
-  font-size: 16px;
-  /* Override core line-height. To be reviewed. */
-  line-height: normal;
-  display: inline-block;
-  font-weight: 500;
-  height: 30px;
-  margin-bottom: 0;
-  margin-left: 0;
-  margin-right: 8px;
-  margin-top: 8px;
-  width: 54px;
-}
-@media (prefers-reduced-motion: reduce) {
-  .components-font-size-picker__controls .components-font-size-picker__number {
-    transition-duration: 0s;
-    transition-delay: 0s;
-  }
-}
-@media (min-width: 600px) {
-  .components-font-size-picker__controls .components-font-size-picker__number {
-    font-size: 13px;
-    /* Override core line-height. To be reviewed. */
-    line-height: normal;
-  }
-}
-.components-font-size-picker__controls .components-font-size-picker__number:focus {
-  border-color: var(--wp-admin-theme-color);
-  box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
-  outline: 2px solid transparent;
-}
-.components-font-size-picker__controls .components-font-size-picker__number::-webkit-input-placeholder {
-  color: rgba(30, 30, 30, 0.62);
-}
-.components-font-size-picker__controls .components-font-size-picker__number::-moz-placeholder {
-  opacity: 1;
-  color: rgba(30, 30, 30, 0.62);
-}
-.components-font-size-picker__controls .components-font-size-picker__number:-ms-input-placeholder {
-  color: rgba(30, 30, 30, 0.62);
-}
-.components-font-size-picker__controls .components-font-size-picker__number[value=""] + .components-button {
-  cursor: default;
-  opacity: 0.3;
-  pointer-events: none;
-}
-.components-font-size-picker__controls .components-font-size-picker__number-container {
-  display: flex;
-  flex-direction: column;
-}
-.components-font-size-picker__controls .components-color-palette__clear {
-  height: 30px;
-}
-
-.components-font-size-picker__custom-input .components-range-control__slider + .dashicon {
-  width: 30px;
-  height: 30px;
-}
-
-.components-font-size-picker {
-  border: 0;
-  padding: 0;
-  margin: 0;
-}
-
 .components-form-toggle {
   position: relative;
   display: inline-block;
@@ -2432,7 +2335,9 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   min-width: 100px;
   -webkit-backdrop-filter: blur(100px);
           backdrop-filter: blur(100px);
-  background-color: rgba(255, 255, 255, 0.1);
+  background-color: transparent;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
   border-radius: 2px;
   overflow: hidden;
 }
@@ -2448,6 +2353,7 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
 .components-placeholder.has-illustration .components-placeholder__instructions,
 .components-placeholder.has-illustration .components-button {
   opacity: 0;
+  pointer-events: none;
   transition: opacity 0.1s linear;
 }
 @media (prefers-reduced-motion: reduce) {
@@ -2462,6 +2368,7 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
 .is-selected > .components-placeholder.has-illustration .components-placeholder__instructions,
 .is-selected > .components-placeholder.has-illustration .components-button {
   opacity: 1;
+  pointer-events: auto;
 }
 .components-placeholder.has-illustration::before {
   content: "";

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;AA+HpC,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":";AAqBA,OAAO,KAAK,EACX,UAAU,EAEV,MAAM,4BAA4B,CAAC;AAiIpC,QAAA,MAAM,yBAAyB;;;;;;;6CAG9B,CAAC;AAEF,eAAe,yBAAyB,CAAC"}

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

@@ -4,6 +4,7 @@ import type { Border } from '../../border-control/types';
 import type { Borders, BorderSide, BorderBoxControlProps } from '../types';
 export declare function useBorderBoxControl(props: WordPressComponentProps<BorderBoxControlProps, 'div'>): {
     className: string;
+    disableUnits: boolean;
     hasMixedBorders: boolean;
     isLinked: boolean;
     linkedControlClassName: string;

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;;;;;;+BA4DlD,MAAM,GAAG,SAAS,QACvB,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgCjB"}
+{"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"}

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

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import type { Border } from '../border-control/types';
 import type { AnyBorder, Borders } from './types';
 export declare const isEmptyBorder: (border?: Border | undefined) => boolean;
@@ -21,4 +18,5 @@ export declare const getCommonBorder: (borders?: Borders | undefined) => {
     width: string | number | undefined;
 } | undefined;
 export declare const getShorthandBorderStyle: (border?: Border | undefined, fallbackBorder?: Border | undefined) => string | Border | undefined;
+export declare const getMostCommonUnit: (values: Array<string | number | undefined>) => string | undefined;
 //# sourceMappingURL=utils.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/border-box-control/utils.ts"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,KAAK,EAAE,SAAS,EAAE,OAAO,EAA0B,MAAM,SAAS,CAAC;AAK1E,eAAO,MAAM,aAAa,0CAKzB,CAAC;AAEF,eAAO,MAAM,eAAe,WAAa,SAAS,YAqBjD,CAAC;AAEF,eAAO,MAAM,gBAAgB,0CAM5B,CAAC;AAEF,eAAO,MAAM,eAAe,YAAa,SAAS,YAIjD,CAAC;AAEF,eAAO,MAAM,eAAe,YAAc,SAAS,YAYlD,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;aAW3B,CAAC;AAEF,eAAO,MAAM,aAAa,aAAe,MAAM,WAAW,MAAM,WAgB/D,CAAC;AAEF,eAAO,MAAM,eAAe;;;;aAwB3B,CAAC;AAEF,eAAO,MAAM,uBAAuB,mGAwBnC,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/border-box-control/utils.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,KAAK,EAAE,SAAS,EAAE,OAAO,EAA0B,MAAM,SAAS,CAAC;AAK1E,eAAO,MAAM,aAAa,0CAKzB,CAAC;AAEF,eAAO,MAAM,eAAe,WAAa,SAAS,YAqBjD,CAAC;AAEF,eAAO,MAAM,gBAAgB,0CAM5B,CAAC;AAEF,eAAO,MAAM,eAAe,YAAa,SAAS,YAIjD,CAAC;AAEF,eAAO,MAAM,eAAe,YAAc,SAAS,YAYlD,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;aAW3B,CAAC;AAEF,eAAO,MAAM,aAAa,aAAe,MAAM,WAAW,MAAM,WAgB/D,CAAC;AAEF,eAAO,MAAM,eAAe;;;;aAwB3B,CAAC;AAEF,eAAO,MAAM,uBAAuB,mGAwBnC,CAAC;AAEF,eAAO,MAAM,iBAAiB,WACrB,MAAO,MAAM,GAAG,MAAM,GAAG,SAAS,CAAE,KAC1C,MAAM,GAAG,SASX,CAAC"}

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

@@ -35,6 +35,7 @@ import type { LabelProps } from '../types';
  * ```
  */
 export declare const BorderControl: import("../../ui/context").WordPressComponent<"div", import("../types").ColorProps & LabelProps & {
+    disableUnits?: boolean | undefined;
     enableStyle?: boolean | undefined;
     isCompact?: boolean | undefined;
     onChange: (value?: import("../types").Border | undefined) => void;

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

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/border-control/border-control/component.tsx"],"names":[],"mappings":";AAkBA,OAAO,KAAK,EAAsB,UAAU,EAAE,MAAM,UAAU,CAAC;AAsG/D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,aAAa;;;;;;;;;;;8CAGzB,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/border-control/border-control/component.tsx"],"names":[],"mappings":";AAkBA,OAAO,KAAK,EAAsB,UAAU,EAAE,MAAM,UAAU,CAAC;AAwG/D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,aAAa;;;;;;;;;;;;8CAGzB,CAAC;AAEF,eAAe,aAAa,CAAC"}

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

@@ -21,6 +21,7 @@ export declare function useBorderControl(props: WordPressComponentProps<BorderCo
     __experimentalIsRenderedInSidebar?: boolean | undefined;
     hideLabelFromVision?: boolean | undefined;
     label?: string | undefined;
+    disableUnits?: boolean | undefined;
     enableStyle?: boolean | undefined;
     __unstablePopoverProps?: Omit<import("../../popover/types").PopoverProps, "children"> | undefined;
     showDropdownHeader?: boolean | undefined;

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

@@ -1 +1 @@
-{"version":3,"file":"hook.d.ts","sourceRoot":"","sources":["../../../src/border-control/border-control/hook.ts"],"names":[],"mappings":";AAUA,OAAO,EAAoB,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AAG7E,OAAO,KAAK,EAAE,MAAM,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAc3D,wBAAgB,gBAAgB,CAC/B,KAAK,EAAE,uBAAuB,CAAE,kBAAkB,EAAE,KAAK,CAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuH3D"}
+{"version":3,"file":"hook.d.ts","sourceRoot":"","sources":["../../../src/border-control/border-control/hook.ts"],"names":[],"mappings":";AAUA,OAAO,EAAoB,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AAG7E,OAAO,KAAK,EAAE,MAAM,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAc3D,wBAAgB,gBAAgB,CAC/B,KAAK,EAAE,uBAAuB,CAAE,kBAAkB,EAAE,KAAK,CAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuH3D"}

package/build-types/border-control/stories/index.d.ts

@@ -11,6 +11,7 @@ import type { Border } from '../types';
 declare const meta: ComponentMeta<typeof BorderControl>;
 export default meta;
 export declare const Default: ComponentStory<import("../../ui/context").WordPressComponent<"div", import("../types").ColorProps & import("../types").LabelProps & {
+    disableUnits?: boolean | undefined;
     enableStyle?: boolean | undefined;
     isCompact?: boolean | undefined;
     onChange: (value?: Border | undefined) => void;
@@ -26,6 +27,7 @@ export declare const Default: ComponentStory<import("../../ui/context").WordPres
  * Render a slider beside the control.
  */
 export declare const WithSlider: ComponentStory<import("../../ui/context").WordPressComponent<"div", import("../types").ColorProps & import("../types").LabelProps & {
+    disableUnits?: boolean | undefined;
     enableStyle?: boolean | undefined;
     isCompact?: boolean | undefined;
     onChange: (value?: Border | undefined) => void;
@@ -41,6 +43,7 @@ export declare const WithSlider: ComponentStory<import("../../ui/context").WordP
  * When rendering with a slider, the `width` prop is useful to customize the width of the number input.
  */
 export declare const WithSliderCustomWidth: ComponentStory<import("../../ui/context").WordPressComponent<"div", import("../types").ColorProps & import("../types").LabelProps & {
+    disableUnits?: boolean | undefined;
     enableStyle?: boolean | undefined;
     isCompact?: boolean | undefined;
     onChange: (value?: Border | undefined) => void;
@@ -57,6 +60,7 @@ export declare const WithSliderCustomWidth: ComponentStory<import("../../ui/cont
  * When `true`, the `width` prop will be ignored.
  */
 export declare const IsCompact: ComponentStory<import("../../ui/context").WordPressComponent<"div", import("../types").ColorProps & import("../types").LabelProps & {
+    disableUnits?: boolean | undefined;
     enableStyle?: boolean | undefined;
     isCompact?: boolean | undefined;
     onChange: (value?: Border | undefined) => void;
@@ -72,6 +76,7 @@ export declare const IsCompact: ComponentStory<import("../../ui/context").WordPr
  * The `colors` object can contain multiple origins.
  */
 export declare const WithMultipleOrigins: ComponentStory<import("../../ui/context").WordPressComponent<"div", import("../types").ColorProps & import("../types").LabelProps & {
+    disableUnits?: boolean | undefined;
     enableStyle?: boolean | undefined;
     isCompact?: boolean | undefined;
     onChange: (value?: Border | undefined) => void;
@@ -87,6 +92,7 @@ export declare const WithMultipleOrigins: ComponentStory<import("../../ui/contex
  * Allow the alpha channel to be edited on each color.
  */
 export declare const WithAlphaEnabled: ComponentStory<import("../../ui/context").WordPressComponent<"div", import("../types").ColorProps & import("../types").LabelProps & {
+    disableUnits?: boolean | undefined;
     enableStyle?: boolean | undefined;
     isCompact?: boolean | undefined;
     onChange: (value?: Border | undefined) => void;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/border-control/stories/index.tsx"],"names":[],"mappings":";AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAQtE;;GAEG;AACH,OAAO,EAAE,aAAa,EAAE,MAAM,IAAI,CAAC;AAGnC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAEvC,QAAA,MAAM,IAAI,EAAE,aAAa,CAAE,OAAO,aAAa,CAc9C,CAAC;AACF,eAAe,IAAI,CAAC;AAiEpB,eAAO,MAAM,OAAO;;;;;;;;;;;+CAAsB,CAAC;AAM3C;;GAEG;AACH,eAAO,MAAM,UAAU;;;;;;;;;;;+CAAsB,CAAC;AAM9C;;GAEG;AACH,eAAO,MAAM,qBAAqB;;;;;;;;;;;+CAAsB,CAAC;AAQzD;;;GAGG;AACH,eAAO,MAAM,SAAS;;;;;;;;;;;+CAAsB,CAAC;AAM7C;;GAEG;AACH,eAAO,MAAM,mBAAmB;;;;;;;;;;;+CAAsB,CAAC;AAOvD;;GAEG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;;;+CAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/border-control/stories/index.tsx"],"names":[],"mappings":";AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAQtE;;GAEG;AACH,OAAO,EAAE,aAAa,EAAE,MAAM,IAAI,CAAC;AAGnC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAEvC,QAAA,MAAM,IAAI,EAAE,aAAa,CAAE,OAAO,aAAa,CAc9C,CAAC;AACF,eAAe,IAAI,CAAC;AAiEpB,eAAO,MAAM,OAAO;;;;;;;;;;;;+CAAsB,CAAC;AAM3C;;GAEG;AACH,eAAO,MAAM,UAAU;;;;;;;;;;;;+CAAsB,CAAC;AAM9C;;GAEG;AACH,eAAO,MAAM,qBAAqB;;;;;;;;;;;;+CAAsB,CAAC;AAQzD;;;GAGG;AACH,eAAO,MAAM,SAAS;;;;;;;;;;;;+CAAsB,CAAC;AAM7C;;GAEG;AACH,eAAO,MAAM,mBAAmB;;;;;;;;;;;;+CAAsB,CAAC;AAOvD;;GAEG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;+CAAsB,CAAC"}