@wordpress/components 30.5.1-next.233ccab9b.0 → 30.6.0

package/build-style/style.css

@@ -1,12 +1,6 @@
 @charset "UTF-8";
 /**
- * Colors
- */
-/**
- * Breakpoints & Media Queries
- */
-/**
- * Colors
+ * Typography
  */
 /**
  * SCSS Variables.
@@ -15,51 +9,9 @@
  * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
  * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
  */
-/**
- * Fonts & basic variables.
- */
-/**
- * Typography
- */
-/**
- * Grid System.
- * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
- */
-/**
- * Radius scale.
- */
-/**
- * Elevation scale.
- */
-/**
- * Dimensions.
- */
-/**
- * Mobile specific styles
- */
-/**
- * Editor styles.
- */
-/**
- * Block & Editor UI.
- */
-/**
- * Block paddings.
- */
-/**
- * React Native specific.
- * These variables do not appear to be used anywhere else.
- */
 /**
  * Colors
  */
-/**
- * SCSS Variables.
- *
- * Please use variables from this sheet to ensure consistency across the UI.
- * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
- * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
- */
 /**
  * Fonts & basic variables.
  */
@@ -110,9 +62,6 @@
  * Creates a fading overlay to signify that the content is longer
  * than the space allows.
  */
-/**
- * Typography
- */
 /**
  * Breakpoint mixins
  */
@@ -135,21 +84,6 @@
 /**
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
-:root {
-  --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;
-}
-@media (min-resolution: 192dpi) {
-  :root {
-    --wp-admin-border-width-focus: 1.5px;
-  }
-}
-
 @media not (prefers-reduced-motion) {
   .components-animate__appear {
     animation: components-animate__appear-animation 0.1s cubic-bezier(0, 0, 0.2, 1) 0s;
@@ -231,24 +165,21 @@
 
 .components-badge {
   box-sizing: border-box;
-  background-color: color-mix(in srgb, #fff 90%, var(--base-color));
-  color: color-mix(in srgb, #000 50%, var(--base-color));
-  padding: 0 8px;
-  min-height: 24px;
-  max-width: 100%;
-  border-radius: 2px;
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 20px;
-  display: inline-flex;
-  align-items: center;
-  gap: 2px;
 }
 .components-badge *,
 .components-badge *::before,
 .components-badge *::after {
   box-sizing: inherit;
 }
+.components-badge {
+  background-color: color-mix(in srgb, #fff 90%, var(--base-color));
+  color: color-mix(in srgb, #000 50%, var(--base-color));
+  padding: 2px 8px;
+  min-height: 24px;
+  border-radius: 2px;
+  line-height: 0;
+  display: inline-block;
+}
 .components-badge:where(.is-default) {
   background-color: #f0f0f0;
   color: #2f2f2f;
@@ -269,6 +200,16 @@
   --base-color: #4ab866;
 }
 
+.components-badge__flex-wrapper {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  max-width: 100%;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 20px;
+}
+
 .components-badge__icon {
   flex-shrink: 0;
 }
@@ -321,35 +262,19 @@
   cursor: pointer;
   -webkit-appearance: none;
   background: none;
+}
+@media not (prefers-reduced-motion) {
+  .components-button {
+    transition: box-shadow 0.1s linear;
+  }
+}
+.components-button {
   height: 36px;
   align-items: center;
   box-sizing: border-box;
   padding: 6px 12px;
   border-radius: 2px;
   color: var(--wp-components-color-foreground, #1e1e1e);
-  /**
-   * Primary button style.
-   */
-  /**
-   * Secondary and tertiary buttons.
-   */
-  /**
-   * Secondary button style.
-   */
-  /**
-   * Tertiary buttons.
-   */
-  /**
-   * Destructive buttons.
-   */
-  /**
-   * Link buttons.
-   */
-}
-@media not (prefers-reduced-motion) {
-  .components-button {
-    transition: box-shadow 0.1s linear;
-  }
 }
 .components-button.is-next-40px-default-size {
   height: 40px;
@@ -361,6 +286,11 @@
   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 {
+  /**
+   * Primary button style.
+   */
+}
 .components-button.is-primary {
   white-space: nowrap;
   background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
@@ -398,6 +328,11 @@
   /* stylelint-enable */
   border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
 }
+.components-button {
+  /**
+   * Secondary and tertiary buttons.
+   */
+}
 .components-button.is-secondary, .components-button.is-tertiary {
   outline: 1px solid transparent;
 }
@@ -409,6 +344,11 @@
   background: transparent;
   transform: none;
 }
+.components-button {
+  /**
+   * Secondary button style.
+   */
+}
 .components-button.is-secondary {
   box-shadow: inset 0 0 0 1px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)), 0 0 0 currentColor;
   outline: 1px solid transparent;
@@ -427,6 +367,11 @@
 .components-button.is-secondary:focus:not(:disabled) {
   box-shadow: 0 0 0 currentColor inset, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
 }
+.components-button {
+  /**
+   * Tertiary buttons.
+   */
+}
 .components-button.is-tertiary {
   white-space: nowrap;
   color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
@@ -446,16 +391,21 @@ p + .components-button.is-tertiary {
   box-shadow: none;
   outline: none;
 }
+.components-button {
+  /**
+   * Destructive buttons.
+   */
+}
 .components-button.is-destructive {
   --wp-components-color-accent: #cc1818;
-  --wp-components-color-accent-darker-10: #9e1313;
-  --wp-components-color-accent-darker-20: #710d0d;
+  --wp-components-color-accent-darker-10: rgb(158.3684210526, 18.6315789474, 18.6315789474);
+  --wp-components-color-accent-darker-20: rgb(112.7368421053, 13.2631578947, 13.2631578947);
 }
 .components-button.is-destructive:not(.is-primary):not(.is-secondary):not(.is-tertiary):not(.is-link) {
   color: #cc1818;
 }
 .components-button.is-destructive:not(.is-primary):not(.is-secondary):not(.is-tertiary):not(.is-link):hover:not(:disabled, [aria-disabled=true]) {
-  color: #710d0d;
+  color: rgb(112.7368421053, 13.2631578947, 13.2631578947);
 }
 .components-button.is-destructive:not(.is-primary):not(.is-secondary):not(.is-tertiary):not(.is-link):focus {
   box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #cc1818;
@@ -472,6 +422,11 @@ p + .components-button.is-tertiary {
 .components-button.is-destructive.is-tertiary:active:not(:disabled, [aria-disabled=true]), .components-button.is-destructive.is-secondary:active:not(:disabled, [aria-disabled=true]) {
   background: rgba(204, 24, 24, 0.08);
 }
+.components-button {
+  /**
+   * Link buttons.
+   */
+}
 .components-button.is-link {
   margin: 0;
   padding: 0;
@@ -483,7 +438,6 @@ p + .components-button.is-tertiary {
   text-align: left;
   color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   text-decoration: underline;
-  height: auto;
 }
 @media not (prefers-reduced-motion) {
   .components-button.is-link {
@@ -492,6 +446,9 @@ p + .components-button.is-tertiary {
     transition-timing-function: ease-in-out;
   }
 }
+.components-button.is-link {
+  height: auto;
+}
 .components-button.is-link:focus {
   border-radius: 2px;
 }
@@ -505,17 +462,17 @@ p + .components-button.is-tertiary {
   cursor: default;
   color: #949494;
 }
-.components-button.is-busy, .components-button.is-secondary.is-busy, .components-button.is-secondary.is-busy:disabled, .components-button.is-secondary.is-busy[aria-disabled=true] {
-  background-size: 100px 100%;
-  /* stylelint-disable -- Disable reason: This function call looks nicer when each argument is on its own line. */
-  background-image: linear-gradient(-45deg, #fafafa 33%, #e0e0e0 33%, #e0e0e0 70%, #fafafa 70%);
-  /* stylelint-enable */
-}
 @media not (prefers-reduced-motion) {
   .components-button.is-busy, .components-button.is-secondary.is-busy, .components-button.is-secondary.is-busy:disabled, .components-button.is-secondary.is-busy[aria-disabled=true] {
     animation: components-button__busy-animation 2500ms infinite linear;
   }
 }
+.components-button.is-busy, .components-button.is-secondary.is-busy, .components-button.is-secondary.is-busy:disabled, .components-button.is-secondary.is-busy[aria-disabled=true] {
+  background-size: 100px 100%;
+  /* stylelint-disable -- Disable reason: This function call looks nicer when each argument is on its own line. */
+  background-image: linear-gradient(-45deg, rgb(249.9, 249.9, 249.9) 33%, rgb(224.4, 224.4, 224.4) 33%, rgb(224.4, 224.4, 224.4) 70%, rgb(249.9, 249.9, 249.9) 70%);
+  /* stylelint-enable */
+}
 .components-button.is-compact {
   height: 32px;
 }
@@ -904,13 +861,13 @@ p + .components-button.is-tertiary {
 }
 @media not (prefers-reduced-motion) {
   .components-calendar__weeks-before-enter,
-.components-calendar__weeks-before-exit,
-.components-calendar__weeks-after-enter,
-.components-calendar__weeks-after-exit,
-.components-calendar__caption-after-enter,
-.components-calendar__caption-after-exit,
-.components-calendar__caption-before-enter,
-.components-calendar__caption-before-exit {
+  .components-calendar__weeks-before-exit,
+  .components-calendar__weeks-after-enter,
+  .components-calendar__weeks-after-exit,
+  .components-calendar__caption-after-enter,
+  .components-calendar__caption-after-exit,
+  .components-calendar__caption-before-enter,
+  .components-calendar__caption-before-exit {
     animation-duration: 0.3s;
   }
 }
@@ -953,13 +910,15 @@ p + .components-button.is-tertiary {
 
 .components-checkbox-control {
   --checkbox-input-size: 24px;
-  --checkbox-input-margin: 8px;
 }
 @media (min-width: 600px) {
   .components-checkbox-control {
     --checkbox-input-size: 16px;
   }
 }
+.components-checkbox-control {
+  --checkbox-input-margin: 8px;
+}
 
 .components-checkbox-control__label {
   line-height: var(--checkbox-input-size);
@@ -980,20 +939,6 @@ p + .components-button.is-tertiary {
   box-shadow: 0 0 0 transparent;
   border-radius: 2px;
   border: 1px solid #949494;
-  background: #fff;
-  color: #1e1e1e;
-  clear: none;
-  cursor: pointer;
-  display: inline-block;
-  line-height: 0;
-  margin: 0 4px 0 0;
-  outline: 0;
-  padding: 0 !important;
-  text-align: center;
-  vertical-align: top;
-  width: var(--checkbox-input-size);
-  height: var(--checkbox-input-size);
-  appearance: none;
 }
 @media not (prefers-reduced-motion) {
   .components-checkbox-control__input[type=checkbox] {
@@ -1069,6 +1014,22 @@ p + .components-button.is-tertiary {
   cursor: default;
   opacity: 1;
 }
+.components-checkbox-control__input[type=checkbox] {
+  background: #fff;
+  color: #1e1e1e;
+  clear: none;
+  cursor: pointer;
+  display: inline-block;
+  line-height: 0;
+  margin: 0 4px 0 0;
+  outline: 0;
+  padding: 0 !important;
+  text-align: center;
+  vertical-align: top;
+  width: var(--checkbox-input-size);
+  height: var(--checkbox-input-size);
+  appearance: none;
+}
 @media not (prefers-reduced-motion) {
   .components-checkbox-control__input[type=checkbox] {
     transition: 0.1s border-color ease-in-out;
@@ -1118,7 +1079,7 @@ svg.components-checkbox-control__indeterminate {
 }
 @media (min-width: 600px) {
   svg.components-checkbox-control__checked,
-svg.components-checkbox-control__indeterminate {
+  svg.components-checkbox-control__indeterminate {
     --checkmark-size: calc(var(--checkbox-input-size) + 4px);
   }
 }
@@ -1193,13 +1154,15 @@ svg.components-checkbox-control__indeterminate {
   border-radius: 50%;
   background: transparent;
   box-shadow: inset 0 0 0 14px;
-  cursor: pointer;
 }
 @media not (prefers-reduced-motion) {
   .components-circular-option-picker__option {
     transition: 100ms box-shadow ease;
   }
 }
+.components-circular-option-picker__option {
+  cursor: pointer;
+}
 .components-circular-option-picker__option:hover {
   box-shadow: inset 0 0 0 14px !important;
 }
@@ -1315,11 +1278,6 @@ input.components-combobox-control__input[type=text]:focus {
   box-shadow: 0 0 0 transparent;
   border-radius: 2px;
   border: 1px solid #949494;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-start;
-  width: 100%;
-  padding: 0;
 }
 @media not (prefers-reduced-motion) {
   .components-combobox-control__suggestions-container {
@@ -1347,6 +1305,13 @@ input.components-combobox-control__input[type=text]:focus {
 .components-combobox-control__suggestions-container:-ms-input-placeholder {
   color: rgba(30, 30, 30, 0.62);
 }
+.components-combobox-control__suggestions-container {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  width: 100%;
+  padding: 0;
+}
 .components-combobox-control__suggestions-container:focus-within {
   border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
@@ -1733,26 +1698,30 @@ body.is-dragging-components-draggable {
   width: 32px;
   height: 16px;
   border-radius: 8px;
-  overflow: hidden;
 }
 @media not (prefers-reduced-motion) {
   .components-form-toggle .components-form-toggle__track {
     transition: 0.2s background-color ease, 0.2s border-color ease;
   }
 }
+.components-form-toggle .components-form-toggle__track {
+  overflow: hidden;
+}
 .components-form-toggle .components-form-toggle__track::after {
   content: "";
   position: absolute;
   inset: 0;
   box-sizing: border-box;
   border-top: 16px solid transparent;
-  opacity: 0;
 }
 @media not (prefers-reduced-motion) {
   .components-form-toggle .components-form-toggle__track::after {
     transition: 0.2s opacity ease;
   }
 }
+.components-form-toggle .components-form-toggle__track::after {
+  opacity: 0;
+}
 .components-form-toggle .components-form-toggle__thumb {
   display: block;
   position: absolute;
@@ -1762,15 +1731,17 @@ body.is-dragging-components-draggable {
   width: 12px;
   height: 12px;
   border-radius: 50%;
-  background-color: #1e1e1e;
-  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02), 0 3px 3px rgba(0, 0, 0, 0.02), 0 4px 4px rgba(0, 0, 0, 0.01);
-  border: 6px solid transparent;
 }
 @media not (prefers-reduced-motion) {
   .components-form-toggle .components-form-toggle__thumb {
     transition: 0.2s transform ease, 0.2s background-color ease-out;
   }
 }
+.components-form-toggle .components-form-toggle__thumb {
+  background-color: #1e1e1e;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02), 0 3px 3px rgba(0, 0, 0, 0.02), 0 4px 4px rgba(0, 0, 0, 0.01);
+  border: 6px solid transparent;
+}
 .components-form-toggle.is-checked .components-form-toggle__track {
   background-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
@@ -1824,9 +1795,6 @@ body.is-dragging-components-draggable {
   box-shadow: 0 0 0 transparent;
   border-radius: 2px;
   border: 1px solid #949494;
-  width: 100%;
-  padding: 0;
-  cursor: text;
 }
 @media not (prefers-reduced-motion) {
   .components-form-token-field__input-container {
@@ -1854,6 +1822,11 @@ body.is-dragging-components-draggable {
 .components-form-token-field__input-container:-ms-input-placeholder {
   color: rgba(30, 30, 30, 0.62);
 }
+.components-form-token-field__input-container {
+  width: 100%;
+  padding: 0;
+  cursor: text;
+}
 .components-form-token-field__input-container.is-disabled {
   background: #ddd;
   border-color: #ddd;
@@ -1947,7 +1920,7 @@ body.is-dragging-components-draggable {
 }
 @media not (prefers-reduced-motion) {
   .components-form-token-field__token-text,
-.components-form-token-field__remove-token.components-button {
+  .components-form-token-field__remove-token.components-button {
     transition: all 0.2s cubic-bezier(0.4, 1, 0.4, 1);
   }
 }
@@ -1976,16 +1949,18 @@ body.is-dragging-components-draggable {
   min-width: 100%;
   max-height: 128px;
   overflow-y: auto;
-  list-style: none;
-  box-shadow: inset 0 1px 0 0 #949494;
-  margin: 0;
-  padding: 0;
 }
 @media not (prefers-reduced-motion) {
   .components-form-token-field__suggestions-list {
     transition: all 0.15s ease-in-out;
   }
 }
+.components-form-token-field__suggestions-list {
+  list-style: none;
+  box-shadow: inset 0 1px 0 0 #949494;
+  margin: 0;
+  padding: 0;
+}
 
 .components-form-token-field__suggestion {
   color: var(--wp-components-color-foreground, #1e1e1e);
@@ -2116,8 +2091,8 @@ body.is-dragging-components-draggable {
   left: 0;
   outline-color: var(--wp-admin-theme-color);
   outline-style: solid;
-  outline-width: calc(2 * (var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1)));
-  outline-offset: calc(2 * ((-1 * var(--wp-admin-border-width-focus) ) / var(--wp-block-editor-iframe-zoom-out-scale, 1)));
+  outline-width: calc(2 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
+  outline-offset: calc(2 * -1 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
   z-index: 1000000;
 }
 
@@ -2131,8 +2106,8 @@ body.is-dragging-components-draggable {
   left: 0;
   outline-color: var(--wp-admin-theme-color);
   outline-style: solid;
-  outline-width: calc(2 * (var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1)));
-  outline-offset: calc(2 * ((-1 * var(--wp-admin-border-width-focus) ) / var(--wp-block-editor-iframe-zoom-out-scale, 1)));
+  outline-width: calc(2 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
+  outline-offset: calc(2 * -1 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
   z-index: 1000000;
 }
 .is-focusing-regions.is-distraction-free .interface-interface-skeleton__header .edit-post-header,
@@ -2142,8 +2117,8 @@ body.is-dragging-components-draggable {
 .is-focusing-regions .editor-post-publish-panel {
   outline-color: var(--wp-admin-theme-color);
   outline-style: solid;
-  outline-width: calc(2 * (var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1)));
-  outline-offset: calc(2 * ((-1 * var(--wp-admin-border-width-focus) ) / var(--wp-block-editor-iframe-zoom-out-scale, 1)));
+  outline-width: calc(2 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
+  outline-offset: calc(2 * -1 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
 }
 
 .components-menu-group + .components-menu-group {
@@ -2306,6 +2281,13 @@ body.is-dragging-components-draggable {
 
 .components-modal__frame {
   box-sizing: border-box;
+}
+.components-modal__frame *,
+.components-modal__frame *::before,
+.components-modal__frame *::after {
+  box-sizing: inherit;
+}
+.components-modal__frame {
   margin: 40px 0 0 0;
   width: 100%;
   background: #fff;
@@ -2318,11 +2300,6 @@ body.is-dragging-components-draggable {
   animation-fill-mode: forwards;
   animation-timing-function: cubic-bezier(0.29, 0, 0, 1);
 }
-.components-modal__frame *,
-.components-modal__frame *::before,
-.components-modal__frame *::after {
-  box-sizing: inherit;
-}
 .components-modal__frame h1,
 .components-modal__frame h2,
 .components-modal__frame h3 {
@@ -2365,18 +2342,12 @@ body.is-dragging-components-draggable {
   .components-modal__frame.has-size-small, .components-modal__frame.has-size-medium, .components-modal__frame.has-size-large {
     width: 100%;
   }
-}
-@media (min-width: 600px) {
   .components-modal__frame.has-size-small {
     max-width: 384px;
   }
-}
-@media (min-width: 600px) {
   .components-modal__frame.has-size-medium {
     max-width: 512px;
   }
-}
-@media (min-width: 600px) {
   .components-modal__frame.has-size-large {
     max-width: 840px;
   }
@@ -2442,7 +2413,7 @@ body.is-dragging-components-draggable {
   flex-grow: 1;
   display: flex;
   flex-direction: row;
-  justify-content: left;
+  justify-content: flex-start;
 }
 
 .components-modal__header-icon-container {
@@ -2485,15 +2456,15 @@ body.is-dragging-components-draggable {
 }
 .components-notice.is-success {
   border-left-color: #4ab866;
-  background-color: #eff9f1;
+  background-color: rgb(238.8392857143, 248.6607142857, 241.3392857143);
 }
 .components-notice.is-warning {
   border-left-color: #f0b849;
-  background-color: #fef8ee;
+  background-color: rgb(253.5913705584, 248.3324873096, 237.9086294416);
 }
 .components-notice.is-error {
   border-left-color: #cc1818;
-  background-color: #f4a2a2;
+  background-color: rgb(244.1052631579, 162.3947368421, 162.3947368421);
 }
 
 .components-notice__content {
@@ -2506,15 +2477,15 @@ body.is-dragging-components-draggable {
   flex-wrap: wrap;
 }
 
-.components-notice__action.components-button {
-  margin-right: 8px;
-}
 .components-notice__action.components-button, .components-notice__action.components-button.is-link {
   margin-left: 12px;
 }
 .components-notice__action.components-button.is-secondary {
   vertical-align: initial;
 }
+.components-notice__action.components-button {
+  margin-right: 8px;
+}
 
 .components-notice__dismiss {
   color: #757575;
@@ -2628,15 +2599,15 @@ body.is-dragging-components-draggable {
   color: #1e1e1e;
   border: none;
   box-shadow: none;
-  height: auto;
-  /* rtl:begin:ignore */
-  /* rtl:end:ignore */
 }
 @media not (prefers-reduced-motion) {
   .components-panel__body-toggle.components-button {
     transition: 0.1s background ease-in-out;
   }
 }
+.components-panel__body-toggle.components-button {
+  height: auto;
+}
 .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, #3858e9));
   border-radius: 0;
@@ -2654,12 +2625,18 @@ body.is-dragging-components-draggable {
     transition: 0.1s color ease-in-out;
   }
 }
+.components-panel__body-toggle.components-button {
+  /* rtl:begin:ignore */
+}
 body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right {
   transform: scaleX(-1);
   -ms-filter: fliph;
   filter: FlipH;
   margin-top: -10px;
 }
+.components-panel__body-toggle.components-button {
+  /* rtl:end:ignore */
+}
 
 .components-panel__icon {
   color: #757575;
@@ -2744,8 +2721,8 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
 }
 @media (forced-colors: active) {
   .components-placeholder__label > svg,
-.components-placeholder__label .dashicon,
-.components-placeholder__label .block-editor-block-icon {
+  .components-placeholder__label .dashicon,
+  .components-placeholder__label .block-editor-block-icon {
     fill: CanvasText;
   }
 }
@@ -2783,7 +2760,6 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   box-shadow: 0 0 0 transparent;
   border-radius: 2px;
   border: 1px solid #949494;
-  flex: 1 1 auto;
 }
 @media not (prefers-reduced-motion) {
   .components-placeholder__input[type=url] {
@@ -2811,6 +2787,9 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
 .components-placeholder__input[type=url]:-ms-input-placeholder {
   color: rgba(30, 30, 30, 0.62);
 }
+.components-placeholder__input[type=url] {
+  flex: 1 1 auto;
+}
 
 .components-placeholder__error {
   width: 100%;
@@ -2854,7 +2833,6 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   backdrop-filter: blur(100px);
   background-color: transparent;
   backface-visibility: hidden;
-  overflow: hidden;
 }
 .is-dark-theme .components-placeholder.has-illustration {
   background-color: rgba(0, 0, 0, 0.1);
@@ -2871,8 +2849,8 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
 }
 @media not (prefers-reduced-motion) {
   .components-placeholder.has-illustration .components-placeholder__label,
-.components-placeholder.has-illustration .components-placeholder__instructions,
-.components-placeholder.has-illustration .components-button {
+  .components-placeholder.has-illustration .components-placeholder__instructions,
+  .components-placeholder.has-illustration .components-button {
     transition: opacity 0.1s linear;
   }
 }
@@ -2893,6 +2871,9 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   background: currentColor;
   opacity: 0.1;
 }
+.components-placeholder.has-illustration {
+  overflow: hidden;
+}
 .is-selected .components-placeholder.has-illustration {
   overflow: auto;
 }
@@ -2916,14 +2897,16 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
 
 .components-popover {
   box-sizing: border-box;
-  z-index: 1000000;
-  will-change: transform;
 }
 .components-popover *,
 .components-popover *::before,
 .components-popover *::after {
   box-sizing: inherit;
 }
+.components-popover {
+  z-index: 1000000;
+  will-change: transform;
+}
 .components-popover.is-expanded {
   position: fixed;
   top: 0;
@@ -3066,11 +3049,6 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   min-width: 24px;
   max-width: 24px;
   position: relative;
-  display: inline-flex;
-  margin: 0;
-  padding: 0;
-  appearance: none;
-  cursor: pointer;
 }
 @media not (prefers-reduced-motion) {
   .components-radio-control__input[type=radio] {
@@ -3111,6 +3089,13 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   background: var(--wp-admin-theme-color);
   border: none;
 }
+.components-radio-control__input[type=radio] {
+  display: inline-flex;
+  margin: 0;
+  padding: 0;
+  appearance: none;
+  cursor: pointer;
+}
 .components-radio-control__input[type=radio]:focus {
   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;
@@ -3193,7 +3178,6 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   position: absolute;
   top: calc(50% - 1px);
   right: calc(50% - 1px);
-  opacity: 0;
 }
 @media not (prefers-reduced-motion) {
   .components-resizable-box__side-handle::before {
@@ -3201,6 +3185,9 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
     will-change: transform;
   }
 }
+.components-resizable-box__side-handle::before {
+  opacity: 0;
+}
 
 .components-resizable-box__side-handle {
   z-index: 2;
@@ -3232,9 +3219,9 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
 
 @media not (prefers-reduced-motion) {
   .components-resizable-box__side-handle.components-resizable-box__handle-top:hover::before,
-.components-resizable-box__side-handle.components-resizable-box__handle-bottom:hover::before,
-.components-resizable-box__side-handle.components-resizable-box__handle-top:active::before,
-.components-resizable-box__side-handle.components-resizable-box__handle-bottom:active::before {
+  .components-resizable-box__side-handle.components-resizable-box__handle-bottom:hover::before,
+  .components-resizable-box__side-handle.components-resizable-box__handle-top:active::before,
+  .components-resizable-box__side-handle.components-resizable-box__handle-bottom:active::before {
     animation: components-resizable-box__top-bottom-animation 0.1s ease-out 0s;
     animation-fill-mode: forwards;
   }
@@ -3242,9 +3229,9 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
 
 @media not (prefers-reduced-motion) {
   .components-resizable-box__side-handle.components-resizable-box__handle-left:hover::before,
-.components-resizable-box__side-handle.components-resizable-box__handle-right:hover::before,
-.components-resizable-box__side-handle.components-resizable-box__handle-left:active::before,
-.components-resizable-box__side-handle.components-resizable-box__handle-right:active::before {
+  .components-resizable-box__side-handle.components-resizable-box__handle-right:hover::before,
+  .components-resizable-box__side-handle.components-resizable-box__handle-left:active::before,
+  .components-resizable-box__side-handle.components-resizable-box__handle-right:active::before {
     animation: components-resizable-box__left-right-animation 0.1s ease-out 0s;
     animation-fill-mode: forwards;
   }
@@ -3255,15 +3242,15 @@ See https://bugs.webkit.org/show_bug.cgi?id=187903. */
 @media not all and (min-resolution: 0.001dpcm) {
   @supports (-webkit-appearance: none) {
     .components-resizable-box__side-handle.components-resizable-box__handle-top:hover::before,
-.components-resizable-box__side-handle.components-resizable-box__handle-bottom:hover::before,
-.components-resizable-box__side-handle.components-resizable-box__handle-top:active::before,
-.components-resizable-box__side-handle.components-resizable-box__handle-bottom:active::before {
+    .components-resizable-box__side-handle.components-resizable-box__handle-bottom:hover::before,
+    .components-resizable-box__side-handle.components-resizable-box__handle-top:active::before,
+    .components-resizable-box__side-handle.components-resizable-box__handle-bottom:active::before {
       animation: none;
     }
     .components-resizable-box__side-handle.components-resizable-box__handle-left:hover::before,
-.components-resizable-box__side-handle.components-resizable-box__handle-right:hover::before,
-.components-resizable-box__side-handle.components-resizable-box__handle-left:active::before,
-.components-resizable-box__side-handle.components-resizable-box__handle-right:active::before {
+    .components-resizable-box__side-handle.components-resizable-box__handle-right:hover::before,
+    .components-resizable-box__side-handle.components-resizable-box__handle-left:active::before,
+    .components-resizable-box__side-handle.components-resizable-box__handle-right:active::before {
       animation: none;
     }
   }
@@ -3521,41 +3508,40 @@ body.lockscroll {
   box-shadow: 0 0 0 transparent;
   border-radius: 2px;
   border: 1px solid #949494;
-  border-color: var(--wp-components-color-gray-600, #949494);
 }
 @media not (prefers-reduced-motion) {
   .components-text-control__input,
-.components-text-control__input[type=text],
-.components-text-control__input[type=tel],
-.components-text-control__input[type=time],
-.components-text-control__input[type=url],
-.components-text-control__input[type=week],
-.components-text-control__input[type=password],
-.components-text-control__input[type=color],
-.components-text-control__input[type=date],
-.components-text-control__input[type=datetime],
-.components-text-control__input[type=datetime-local],
-.components-text-control__input[type=email],
-.components-text-control__input[type=month],
-.components-text-control__input[type=number] {
+  .components-text-control__input[type=text],
+  .components-text-control__input[type=tel],
+  .components-text-control__input[type=time],
+  .components-text-control__input[type=url],
+  .components-text-control__input[type=week],
+  .components-text-control__input[type=password],
+  .components-text-control__input[type=color],
+  .components-text-control__input[type=date],
+  .components-text-control__input[type=datetime],
+  .components-text-control__input[type=datetime-local],
+  .components-text-control__input[type=email],
+  .components-text-control__input[type=month],
+  .components-text-control__input[type=number] {
     transition: box-shadow 0.1s linear;
   }
 }
 @media (min-width: 600px) {
   .components-text-control__input,
-.components-text-control__input[type=text],
-.components-text-control__input[type=tel],
-.components-text-control__input[type=time],
-.components-text-control__input[type=url],
-.components-text-control__input[type=week],
-.components-text-control__input[type=password],
-.components-text-control__input[type=color],
-.components-text-control__input[type=date],
-.components-text-control__input[type=datetime],
-.components-text-control__input[type=datetime-local],
-.components-text-control__input[type=email],
-.components-text-control__input[type=month],
-.components-text-control__input[type=number] {
+  .components-text-control__input[type=text],
+  .components-text-control__input[type=tel],
+  .components-text-control__input[type=time],
+  .components-text-control__input[type=url],
+  .components-text-control__input[type=week],
+  .components-text-control__input[type=password],
+  .components-text-control__input[type=color],
+  .components-text-control__input[type=date],
+  .components-text-control__input[type=datetime],
+  .components-text-control__input[type=datetime-local],
+  .components-text-control__input[type=email],
+  .components-text-control__input[type=month],
+  .components-text-control__input[type=number] {
     font-size: 13px;
     /* Override core line-height. To be reviewed. */
     line-height: normal;
@@ -3579,6 +3565,70 @@ body.lockscroll {
   box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   outline: 2px solid transparent;
 }
+.components-text-control__input::-webkit-input-placeholder,
+.components-text-control__input[type=text]::-webkit-input-placeholder,
+.components-text-control__input[type=tel]::-webkit-input-placeholder,
+.components-text-control__input[type=time]::-webkit-input-placeholder,
+.components-text-control__input[type=url]::-webkit-input-placeholder,
+.components-text-control__input[type=week]::-webkit-input-placeholder,
+.components-text-control__input[type=password]::-webkit-input-placeholder,
+.components-text-control__input[type=color]::-webkit-input-placeholder,
+.components-text-control__input[type=date]::-webkit-input-placeholder,
+.components-text-control__input[type=datetime]::-webkit-input-placeholder,
+.components-text-control__input[type=datetime-local]::-webkit-input-placeholder,
+.components-text-control__input[type=email]::-webkit-input-placeholder,
+.components-text-control__input[type=month]::-webkit-input-placeholder,
+.components-text-control__input[type=number]::-webkit-input-placeholder {
+  color: rgba(30, 30, 30, 0.62);
+}
+.components-text-control__input::-moz-placeholder,
+.components-text-control__input[type=text]::-moz-placeholder,
+.components-text-control__input[type=tel]::-moz-placeholder,
+.components-text-control__input[type=time]::-moz-placeholder,
+.components-text-control__input[type=url]::-moz-placeholder,
+.components-text-control__input[type=week]::-moz-placeholder,
+.components-text-control__input[type=password]::-moz-placeholder,
+.components-text-control__input[type=color]::-moz-placeholder,
+.components-text-control__input[type=date]::-moz-placeholder,
+.components-text-control__input[type=datetime]::-moz-placeholder,
+.components-text-control__input[type=datetime-local]::-moz-placeholder,
+.components-text-control__input[type=email]::-moz-placeholder,
+.components-text-control__input[type=month]::-moz-placeholder,
+.components-text-control__input[type=number]::-moz-placeholder {
+  color: rgba(30, 30, 30, 0.62);
+}
+.components-text-control__input:-ms-input-placeholder,
+.components-text-control__input[type=text]:-ms-input-placeholder,
+.components-text-control__input[type=tel]:-ms-input-placeholder,
+.components-text-control__input[type=time]:-ms-input-placeholder,
+.components-text-control__input[type=url]:-ms-input-placeholder,
+.components-text-control__input[type=week]:-ms-input-placeholder,
+.components-text-control__input[type=password]:-ms-input-placeholder,
+.components-text-control__input[type=color]:-ms-input-placeholder,
+.components-text-control__input[type=date]:-ms-input-placeholder,
+.components-text-control__input[type=datetime]:-ms-input-placeholder,
+.components-text-control__input[type=datetime-local]:-ms-input-placeholder,
+.components-text-control__input[type=email]:-ms-input-placeholder,
+.components-text-control__input[type=month]:-ms-input-placeholder,
+.components-text-control__input[type=number]:-ms-input-placeholder {
+  color: rgba(30, 30, 30, 0.62);
+}
+.components-text-control__input,
+.components-text-control__input[type=text],
+.components-text-control__input[type=tel],
+.components-text-control__input[type=time],
+.components-text-control__input[type=url],
+.components-text-control__input[type=week],
+.components-text-control__input[type=password],
+.components-text-control__input[type=color],
+.components-text-control__input[type=date],
+.components-text-control__input[type=datetime],
+.components-text-control__input[type=datetime-local],
+.components-text-control__input[type=email],
+.components-text-control__input[type=month],
+.components-text-control__input[type=number] {
+  border-color: var(--wp-components-color-gray-600, #949494);
+}
 .components-text-control__input::placeholder,
 .components-text-control__input[type=text]::placeholder,
 .components-text-control__input[type=tel]::placeholder,
@@ -3694,7 +3744,7 @@ body.lockscroll {
 }
 @media not (prefers-reduced-motion) {
   .components-accessible-toolbar .components-button::before,
-.components-toolbar .components-button::before {
+  .components-toolbar .components-button::before {
     animation: components-button__appear-animation 0.1s ease;
     animation-fill-mode: forwards;
   }
@@ -3766,12 +3816,14 @@ body.lockscroll {
   flex-wrap: wrap;
   padding-left: 6px;
   padding-right: 6px;
-  line-height: 0;
 }
 .components-toolbar-group .components-toolbar-group.components-toolbar-group {
   border-width: 0;
   margin: 0;
 }
+.components-toolbar-group {
+  line-height: 0;
+}
 .components-toolbar-group .components-button.components-button,
 .components-toolbar-group .components-button.has-icon.has-icon {
   justify-content: center;
@@ -3915,4 +3967,18 @@ div.components-toolbar > div + div.has-left-divider::before {
     transform: translateY(0);
     opacity: 1;
   }
+}
+:root {
+  --wp-admin-theme-color: #3858e9;
+  --wp-admin-theme-color--rgb: 56, 88, 233;
+  --wp-admin-theme-color-darker-10: rgb(33.0384615385, 68.7307692308, 230.4615384615);
+  --wp-admin-theme-color-darker-10--rgb: 33.0384615385, 68.7307692308, 230.4615384615;
+  --wp-admin-theme-color-darker-20: rgb(23.6923076923, 58.1538461538, 214.3076923077);
+  --wp-admin-theme-color-darker-20--rgb: 23.6923076923, 58.1538461538, 214.3076923077;
+  --wp-admin-border-width-focus: 2px;
+}
+@media (min-resolution: 192dpi) {
+  :root {
+    --wp-admin-border-width-focus: 1.5px;
+  }
 }