@wordpress/components 19.17.0 → 20.0.0

package/build-style/style-rtl.css

@@ -833,7 +833,6 @@ input.components-combobox-control__input[type=text]:focus {
   flex-wrap: wrap;
   align-items: flex-start;
   width: 100%;
-  margin: 0 0 8px 0;
   padding: 0;
 }
 @media (prefers-reduced-motion: reduce) {
@@ -886,6 +885,14 @@ input.components-combobox-control__input[type=text]:focus {
   margin: 8px 0;
 }
 
+.components-color-list-picker__swatch-button {
+  padding: 6px;
+}
+
+.components-color-list-picker__swatch-color {
+  margin: 2px;
+}
+
 .components-color-palette__custom-color {
   position: relative;
   border: none;
@@ -909,1237 +916,165 @@ input.components-combobox-control__input[type=text]:focus {
   outline-width: 2px;
 }
 
-.components-dropdown__content.components-color-palette__custom-color-dropdown-content .components-popover__content {
-  overflow: visible;
-  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.05);
-  border: none;
-  outline: none;
-  border-radius: 2px;
-  padding: 0;
-}
-.components-dropdown__content.components-color-palette__custom-color-dropdown-content .components-popover__content .react-colorful__saturation {
-  border-top-left-radius: 2px;
-  border-top-right-radius: 2px;
-}
-
-.components-color-palette__custom-color-name {
-  text-align: right;
-}
-
-.components-color-palette__custom-color-value {
-  margin-right: 16px;
-  text-transform: uppercase;
-}
-
-.components-custom-gradient-picker__gradient-bar:not(.has-gradient) {
-  opacity: 0.4;
-}
-
-.components-custom-gradient-picker__gradient-bar {
-  border-radius: 2px;
-  margin-top: 12px;
-  width: 100%;
-  height: 48px;
-  margin-bottom: 20px;
-}
-.components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__markers-container {
-  position: relative;
-  width: calc(100% - 48px);
-  margin-right: auto;
-  margin-left: auto;
-}
-.components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__insert-point {
-  border-radius: 50%;
-  background: #fff;
-  padding: 2px;
-  top: 16px;
-  min-width: 16px;
-  width: 16px;
-  height: 16px;
-  position: relative;
-  color: #1e1e1e;
-}
-.components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__insert-point svg {
-  height: 100%;
-  width: 100%;
-}
-.components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__control-point-button {
-  border-radius: 50%;
-  height: 16px;
-  width: 16px;
-  padding: 0;
-  position: absolute;
-  top: 16px;
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) #fff, 0 0 2px 0 rgba(0, 0, 0, 0.25);
-  outline: 2px solid transparent;
-}
-.components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__control-point-button:focus, .components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__control-point-button.is-active {
-  box-shadow: inset 0 0 0 calc(var(--wp-admin-border-width-focus) * 2) #fff, 0 0 2px 0 rgba(0, 0, 0, 0.25);
-  outline: 1.5px solid transparent;
-}
-
-.components-custom-gradient-picker__color-picker-popover .components-custom-gradient-picker__remove-control-point {
-  margin-right: auto;
-  margin-left: auto;
-  display: block;
-  margin-bottom: 8px;
-}
-
-.components-custom-gradient-picker__inserter {
-  direction: ltr;
-  width: 100%;
-}
-
-.components-custom-gradient-picker__liner-gradient-indicator {
-  display: inline-block;
-  flex: 0 auto;
-  width: 20px;
-  height: 20px;
-}
-
-.components-custom-gradient-picker .components-custom-gradient-picker__ui-line {
-  margin-bottom: 16px;
-}
-.components-custom-gradient-picker .components-custom-gradient-picker__ui-line .components-base-control.components-angle-picker,
-.components-custom-gradient-picker .components-custom-gradient-picker__ui-line .components-base-control.components-custom-gradient-picker__type-picker {
-  margin-bottom: 0;
-}
-
-.components-custom-gradient-picker .components-custom-gradient-picker__toolbar {
-  border: none;
-}
-.components-custom-gradient-picker .components-custom-gradient-picker__toolbar > div + div {
-  margin-right: 1px;
-}
-.components-custom-gradient-picker .components-custom-gradient-picker__toolbar button.is-pressed > svg {
-  background: #fff;
-  border: 1px solid #949494;
-  border-radius: 2px;
-}
-
-.components-custom-select-control {
-  position: relative;
-  font-size: 13px;
-}
-
-.components-custom-select-control__button {
-  position: relative;
-  text-align: right;
-  outline: 0;
-}
-.components-custom-select-control__button:not(.is-next-unconstrained-width) {
-  min-width: 130px;
-}
-.components-custom-select-control__button .components-custom-select-control__button-icon {
-  height: 100%;
-  padding: 0;
-  position: absolute;
-  left: 4px;
-  top: 0;
-}
-
-.components-custom-select-control__menu {
-  border: 1px solid #1e1e1e;
-  background-color: #fff;
-  border-radius: 2px;
-  outline: none;
-  transition: none;
-  max-height: 400px;
-  min-width: 100%;
-  overflow: auto;
-  padding: 0;
-  position: absolute;
-  z-index: 1000000;
-}
-.components-custom-select-control__menu[aria-hidden=true] {
-  display: none;
-}
-
-.components-custom-select-control__item {
-  align-items: center;
-  display: grid;
-  grid-template-columns: auto auto;
-  list-style-type: none;
-  padding: 8px 16px;
-  cursor: default;
-  line-height: 28px;
-}
-.components-custom-select-control__item:not(.is-next-36px-default-size) {
-  padding: 8px;
-}
-.components-custom-select-control__item.has-hint {
-  grid-template-columns: auto auto 30px;
-}
-.components-custom-select-control__item.is-highlighted {
-  background: #ddd;
-}
-.components-custom-select-control__item .components-custom-select-control__item-hint {
-  color: #757575;
-  text-align: left;
-  padding-left: 4px;
-}
-.components-custom-select-control__item .components-custom-select-control__item-icon {
-  margin-right: auto;
-}
-.components-custom-select-control__item:last-child {
-  margin-bottom: 0;
-}
-
-/**
- * Parts of this source were derived and modified from react-dates,
- * released under the MIT license.
- *
- * https://github.com/airbnb/react-dates
- *
- * The MIT License (MIT)
- *
- * Copyright (c) 2016 Airbnb
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-.PresetDateRangePicker_panel {
-  padding: 0 22px 11px;
-}
-
-.PresetDateRangePicker_button {
-  position: relative;
-  height: 100%;
-  text-align: center;
-  background: 0 0;
-  border: 2px solid #00a699;
-  color: #00a699;
-  padding: 4px 12px;
-  margin-right: 8px;
-  font: inherit;
-  font-weight: 700;
-  line-height: normal;
-  overflow: visible;
-  box-sizing: border-box;
-  cursor: pointer;
-}
-
-.PresetDateRangePicker_button:active {
-  outline: 0;
-}
-
-.PresetDateRangePicker_button__selected {
-  color: #fff;
-  background: #00a699;
-}
-
-.SingleDatePickerInput {
-  display: inline-block;
-  background-color: #fff;
-}
-
-.SingleDatePickerInput__withBorder {
-  border-radius: 2px;
-  border: 1px solid #dbdbdb;
-}
-
-.SingleDatePickerInput__rtl {
-  direction: rtl;
-}
-
-.SingleDatePickerInput__disabled {
-  background-color: #f2f2f2;
-}
-
-.SingleDatePickerInput__block {
-  display: block;
-}
-
-.SingleDatePickerInput__showClearDate {
-  padding-right: 30px;
-}
-
-.SingleDatePickerInput_clearDate {
-  background: 0 0;
-  border: 0;
-  color: inherit;
-  font: inherit;
-  line-height: normal;
-  overflow: visible;
-  cursor: pointer;
-  padding: 10px;
-  margin: 0 10px 0 5px;
-  position: absolute;
-  right: 0;
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-.SingleDatePickerInput_clearDate__default:focus,
-.SingleDatePickerInput_clearDate__default:hover {
-  background: #dbdbdb;
-  border-radius: 50%;
-}
-
-.SingleDatePickerInput_clearDate__small {
-  padding: 6px;
-}
-
-.SingleDatePickerInput_clearDate__hide {
-  visibility: hidden;
-}
-
-.SingleDatePickerInput_clearDate_svg {
-  fill: #82888a;
-  height: 12px;
-  width: 15px;
-  vertical-align: middle;
-}
-
-.SingleDatePickerInput_clearDate_svg__small {
-  height: 9px;
-}
-
-.SingleDatePickerInput_calendarIcon {
-  background: 0 0;
-  border: 0;
-  color: inherit;
-  font: inherit;
-  line-height: normal;
-  overflow: visible;
-  cursor: pointer;
-  display: inline-block;
-  vertical-align: middle;
-  padding: 10px;
-  margin: 0 5px 0 10px;
-}
-
-.SingleDatePickerInput_calendarIcon_svg {
-  fill: #82888a;
-  height: 15px;
-  width: 14px;
-  vertical-align: middle;
-}
-
-.SingleDatePicker {
-  position: relative;
-  display: inline-block;
-}
-
-.SingleDatePicker__block {
-  display: block;
-}
-
-.SingleDatePicker_picker {
-  z-index: 1;
-  background-color: #fff;
-  position: absolute;
-}
-
-.SingleDatePicker_picker__rtl {
-  direction: rtl;
-}
-
-.SingleDatePicker_picker__directionLeft {
-  left: 0;
-}
-
-.SingleDatePicker_picker__directionRight {
-  right: 0;
-}
-
-.SingleDatePicker_picker__portal {
-  background-color: rgba(0, 0, 0, 0.3);
-  position: fixed;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-}
-
-.SingleDatePicker_picker__fullScreenPortal {
-  background-color: #fff;
-}
-
-.SingleDatePicker_closeButton {
-  background: 0 0;
-  border: 0;
-  color: inherit;
-  font: inherit;
-  line-height: normal;
-  overflow: visible;
-  cursor: pointer;
-  position: absolute;
-  top: 0;
-  right: 0;
-  padding: 15px;
-  z-index: 2;
-}
-
-.SingleDatePicker_closeButton:focus,
-.SingleDatePicker_closeButton:hover {
-  color: #b0b3b4;
-  text-decoration: none;
-}
-
-.SingleDatePicker_closeButton_svg {
-  height: 15px;
-  width: 15px;
-  fill: #cacccd;
-}
-
-.DayPickerKeyboardShortcuts_buttonReset {
-  background: 0 0;
-  border: 0;
-  border-radius: 0;
-  color: inherit;
-  font: inherit;
-  line-height: normal;
-  overflow: visible;
-  padding: 0;
-  cursor: pointer;
-  font-size: 14px;
-}
-
-.DayPickerKeyboardShortcuts_buttonReset:active {
-  outline: 0;
-}
-
-.DayPickerKeyboardShortcuts_show {
-  width: 22px;
-  position: absolute;
-  z-index: 2;
-}
-
-.DayPickerKeyboardShortcuts_show__bottomRight {
-  border-top: 26px solid transparent;
-  border-right: 33px solid #00a699;
-  bottom: 0;
-  right: 0;
-}
-
-.DayPickerKeyboardShortcuts_show__bottomRight:hover {
-  border-right: 33px solid #008489;
-}
-
-.DayPickerKeyboardShortcuts_show__topRight {
-  border-bottom: 26px solid transparent;
-  border-right: 33px solid #00a699;
-  top: 0;
-  right: 0;
-}
-
-.DayPickerKeyboardShortcuts_show__topRight:hover {
-  border-right: 33px solid #008489;
-}
-
-.DayPickerKeyboardShortcuts_show__topLeft {
-  border-bottom: 26px solid transparent;
-  border-left: 33px solid #00a699;
-  top: 0;
-  left: 0;
-}
-
-.DayPickerKeyboardShortcuts_show__topLeft:hover {
-  border-left: 33px solid #008489;
-}
-
-.DayPickerKeyboardShortcuts_showSpan {
-  color: #fff;
-  position: absolute;
-}
-
-.DayPickerKeyboardShortcuts_showSpan__bottomRight {
-  bottom: 0;
-  right: -28px;
-}
-
-.DayPickerKeyboardShortcuts_showSpan__topRight {
-  top: 1px;
-  right: -28px;
-}
-
-.DayPickerKeyboardShortcuts_showSpan__topLeft {
-  top: 1px;
-  left: -28px;
-}
-
-.DayPickerKeyboardShortcuts_panel {
-  overflow: auto;
-  background: #fff;
-  border: 1px solid #dbdbdb;
-  border-radius: 2px;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  left: 0;
-  z-index: 2;
-  padding: 22px;
-  margin: 33px;
-}
-
-.DayPickerKeyboardShortcuts_title {
-  font-size: 16px;
-  font-weight: 700;
-  margin: 0;
-}
-
-.DayPickerKeyboardShortcuts_list {
-  list-style: none;
-  padding: 0;
-  font-size: 14px;
-}
-
-.DayPickerKeyboardShortcuts_close {
-  position: absolute;
-  right: 22px;
-  top: 22px;
-  z-index: 2;
-}
-
-.DayPickerKeyboardShortcuts_close:active {
-  outline: 0;
-}
-
-.DayPickerKeyboardShortcuts_closeSvg {
-  height: 15px;
-  width: 15px;
-  fill: #cacccd;
-}
-
-.DayPickerKeyboardShortcuts_closeSvg:focus,
-.DayPickerKeyboardShortcuts_closeSvg:hover {
-  fill: #82888a;
-}
-
-.CalendarDay {
-  box-sizing: border-box;
-  cursor: pointer;
-  font-size: 14px;
-  text-align: center;
-}
-
-.CalendarDay:active {
-  outline: 0;
-}
-
-.CalendarDay__defaultCursor {
-  cursor: default;
-}
-
-.CalendarDay__default {
-  border: 1px solid #e4e7e7;
-  color: #484848;
-  background: #fff;
-}
-
-.CalendarDay__default:hover {
-  background: #e4e7e7;
-  border: 1px double #e4e7e7;
-  color: inherit;
-}
-
-.CalendarDay__hovered_offset {
-  background: #f4f5f5;
-  border: 1px double #e4e7e7;
-  color: inherit;
-}
-
-.CalendarDay__outside {
-  border: 0;
-  background: #fff;
-  color: #484848;
-}
-
-.CalendarDay__outside:hover {
-  border: 0;
-}
-
-.CalendarDay__blocked_minimum_nights {
-  background: #fff;
-  border: 1px solid #eceeee;
-  color: #cacccd;
-}
-
-.CalendarDay__blocked_minimum_nights:active,
-.CalendarDay__blocked_minimum_nights:hover {
-  background: #fff;
-  color: #cacccd;
-}
-
-.CalendarDay__highlighted_calendar {
-  background: #ffe8bc;
-  color: #484848;
-}
-
-.CalendarDay__highlighted_calendar:active,
-.CalendarDay__highlighted_calendar:hover {
-  background: #ffce71;
-  color: #484848;
-}
-
-.CalendarDay__selected_span {
-  background: #66e2da;
-  border: 1px solid #33dacd;
-  color: #fff;
-}
-
-.CalendarDay__selected_span:active,
-.CalendarDay__selected_span:hover {
-  background: #33dacd;
-  border: 1px solid #33dacd;
-  color: #fff;
-}
-
-.CalendarDay__last_in_range {
-  border-right: #00a699;
-}
-
-.CalendarDay__selected,
-.CalendarDay__selected:active,
-.CalendarDay__selected:hover {
-  background: #00a699;
-  border: 1px solid #00a699;
-  color: #fff;
-}
-
-.CalendarDay__hovered_span,
-.CalendarDay__hovered_span:hover {
-  background: #b2f1ec;
-  border: 1px solid #80e8e0;
-  color: #007a87;
-}
-
-.CalendarDay__hovered_span:active {
-  background: #80e8e0;
-  border: 1px solid #80e8e0;
-  color: #007a87;
-}
-
-.CalendarDay__blocked_calendar,
-.CalendarDay__blocked_calendar:active,
-.CalendarDay__blocked_calendar:hover {
-  background: #cacccd;
-  border: 1px solid #cacccd;
-  color: #82888a;
-}
-
-.CalendarDay__blocked_out_of_range,
-.CalendarDay__blocked_out_of_range:active,
-.CalendarDay__blocked_out_of_range:hover {
-  background: #fff;
-  border: 1px solid #e4e7e7;
-  color: #cacccd;
-}
-
-.CalendarMonth {
-  background: #fff;
-  text-align: center;
-  vertical-align: top;
-  -webkit-user-select: none;
-  user-select: none;
-}
-
-.CalendarMonth_table {
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-
-.CalendarMonth_verticalSpacing {
-  border-collapse: separate;
-}
-
-.CalendarMonth_caption {
-  color: #484848;
-  font-size: 18px;
-  text-align: center;
-  padding-top: 22px;
-  padding-bottom: 37px;
-  caption-side: initial;
-}
-
-.CalendarMonth_caption__verticalScrollable {
-  padding-top: 12px;
-  padding-bottom: 7px;
-}
-
-.CalendarMonthGrid {
-  background: #fff;
-  text-align: left;
-  z-index: 0;
-}
-
-.CalendarMonthGrid__animating {
-  z-index: 1;
-}
-
-.CalendarMonthGrid__horizontal {
-  position: absolute;
-  left: 0;
-}
-
-.CalendarMonthGrid__vertical {
-  margin: 0 auto;
-}
-
-.CalendarMonthGrid__vertical_scrollable {
-  margin: 0 auto;
-  overflow-y: scroll;
-}
-
-.CalendarMonthGrid_month__horizontal {
-  display: inline-block;
-  vertical-align: top;
-  min-height: 100%;
-}
-
-.CalendarMonthGrid_month__hideForAnimation {
-  position: absolute;
-  z-index: -1;
-  opacity: 0;
-  pointer-events: none;
-}
-
-.CalendarMonthGrid_month__hidden {
-  visibility: hidden;
-}
-
-.DayPickerNavigation {
-  position: relative;
-  z-index: 2;
-}
-
-.DayPickerNavigation__horizontal {
-  height: 0;
-}
-
-.DayPickerNavigation__verticalDefault {
-  position: absolute;
-  width: 100%;
-  height: 52px;
-  bottom: 0;
-  left: 0;
-}
-
-.DayPickerNavigation__verticalScrollableDefault {
-  position: relative;
-}
-
-.DayPickerNavigation_button {
-  cursor: pointer;
-  -webkit-user-select: none;
-  user-select: none;
-  border: 0;
-  padding: 0;
-  margin: 0;
-}
-
-.DayPickerNavigation_button__default {
-  border: 1px solid #e4e7e7;
-  background-color: #fff;
-  color: #757575;
-}
-
-.DayPickerNavigation_button__default:focus,
-.DayPickerNavigation_button__default:hover {
-  border: 1px solid #c4c4c4;
-}
-
-.DayPickerNavigation_button__default:active {
-  background: #f2f2f2;
-}
-
-.DayPickerNavigation_button__horizontalDefault {
-  position: absolute;
-  top: 18px;
-  line-height: 0.78;
-  border-radius: 3px;
-  padding: 6px 9px;
-}
-
-.DayPickerNavigation_leftButton__horizontalDefault {
-  left: 22px;
-}
-
-.DayPickerNavigation_rightButton__horizontalDefault {
-  right: 22px;
-}
-
-.DayPickerNavigation_button__verticalDefault {
-  padding: 5px;
-  background: #fff;
-  box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.1);
-  position: relative;
-  display: inline-block;
-  height: 100%;
-  width: 50%;
-}
-
-.DayPickerNavigation_nextButton__verticalDefault {
-  border-left: 0;
-}
-
-.DayPickerNavigation_nextButton__verticalScrollableDefault {
-  width: 100%;
-}
-
-.DayPickerNavigation_svg__horizontal {
-  height: 19px;
-  width: 19px;
-  fill: #82888a;
-  display: block;
-}
-
-.DayPickerNavigation_svg__vertical {
-  height: 42px;
-  width: 42px;
-  fill: #484848;
-  display: block;
-}
-
-.DayPicker {
-  background: #fff;
-  position: relative;
-  text-align: left;
-}
-
-.DayPicker__horizontal {
-  background: #fff;
-}
-
-.DayPicker__verticalScrollable {
-  height: 100%;
-}
-
-.DayPicker__hidden {
-  visibility: hidden;
-}
-
-.DayPicker__withBorder {
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.07);
-  border-radius: 3px;
-}
-
-.DayPicker_portal__horizontal {
-  box-shadow: none;
-  position: absolute;
-  left: 50%;
-  top: 50%;
-}
-
-.DayPicker_portal__vertical {
-  position: initial;
-}
-
-.DayPicker_focusRegion {
-  outline: 0;
-}
-
-.DayPicker_calendarInfo__horizontal,
-.DayPicker_wrapper__horizontal {
-  display: inline-block;
-  vertical-align: top;
-}
-
-.DayPicker_weekHeaders {
-  position: relative;
-}
-
-.DayPicker_weekHeaders__horizontal {
-  margin-left: 13px;
-}
-
-.DayPicker_weekHeader {
-  color: #757575;
-  position: absolute;
-  top: 62px;
-  z-index: 2;
-  text-align: left;
-  padding: 0 !important;
-}
-
-.DayPicker_weekHeader__vertical {
-  left: 50%;
-}
-
-.DayPicker_weekHeader__verticalScrollable {
-  top: 0;
-  display: table-row;
-  border-bottom: 1px solid #dbdbdb;
-  background: #fff;
-  margin-left: 0;
-  left: 0;
-  width: 100%;
-  text-align: center;
-}
-
-.DayPicker_weekHeader_ul {
-  list-style: none;
-  margin: 1px 0;
-  padding-left: 0;
-  padding-right: 0;
-  font-size: 14px;
-}
-
-.DayPicker_weekHeader_li {
-  display: inline-block;
-  text-align: center;
-  margin: 0 1px;
-}
-
-.DayPicker_transitionContainer {
-  position: relative;
-  overflow: hidden;
-  border-radius: 3px;
-}
-
-.DayPicker_transitionContainer__horizontal {
-  transition: height 0.2s ease-in-out;
-}
-
-.DayPicker_transitionContainer__vertical {
-  width: 100%;
-}
-
-.DayPicker_transitionContainer__verticalScrollable {
-  padding-top: 20px;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  left: 0;
-  overflow-y: scroll;
-}
-
-.DateInput {
-  margin: 0;
-  padding: 0;
-  background: #fff;
-  position: relative;
-  display: inline-block;
-  width: 130px;
-  vertical-align: middle;
-}
-
-.DateInput__small {
-  width: 97px;
-}
-
-.DateInput__block {
-  width: 100%;
-}
-
-.DateInput__disabled {
-  background: #f2f2f2;
-  color: #dbdbdb;
-}
-
-.DateInput_input {
-  font-weight: 200;
-  font-size: 19px;
-  line-height: 24px;
-  color: #484848;
-  background-color: #fff;
-  width: 100%;
-  padding: 11px 11px 9px;
-  border: 0;
-  border-top: 0;
-  border-right: 0;
-  border-bottom: 2px solid transparent;
-  border-left: 0;
-  border-radius: 0;
-}
-
-.DateInput_input__small {
-  font-size: 15px;
-  line-height: 18px;
-  letter-spacing: 0.2px;
-  padding: 7px 7px 5px;
-}
-
-.DateInput_input__regular {
-  font-weight: auto;
-}
-
-.DateInput_input__readOnly {
-  -webkit-user-select: none;
-  user-select: none;
-}
-
-.DateInput_input__focused {
-  outline: 0;
-  background: #fff;
-  border: 0;
-  border-top: 0;
-  border-right: 0;
-  border-bottom: 2px solid #008489;
-  border-left: 0;
-}
-
-.DateInput_input__disabled {
-  background: #f2f2f2;
-  font-style: italic;
-}
-
-.DateInput_screenReaderMessage {
-  border: 0;
-  clip: rect(0, 0, 0, 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-}
-
-.DateInput_fang {
-  position: absolute;
-  width: 20px;
-  height: 10px;
-  left: 22px;
-  z-index: 2;
-}
-
-.DateInput_fangShape {
-  fill: #fff;
-}
-
-.DateInput_fangStroke {
-  stroke: #dbdbdb;
-  fill: transparent;
-}
-
-.DateRangePickerInput {
-  background-color: #fff;
-  display: inline-block;
-}
-
-.DateRangePickerInput__disabled {
-  background: #f2f2f2;
-}
-
-.DateRangePickerInput__withBorder {
+.components-dropdown__content.components-color-palette__custom-color-dropdown-content .components-popover__content {
+  overflow: visible;
+  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.05);
+  border: none;
+  outline: none;
   border-radius: 2px;
-  border: 1px solid #dbdbdb;
+  padding: 0;
 }
-
-.DateRangePickerInput__rtl {
-  direction: rtl;
+.components-dropdown__content.components-color-palette__custom-color-dropdown-content .components-popover__content .react-colorful__saturation {
+  border-top-left-radius: 2px;
+  border-top-right-radius: 2px;
 }
 
-.DateRangePickerInput__block {
-  display: block;
+.components-color-palette__custom-color-name {
+  text-align: right;
 }
 
-.DateRangePickerInput__showClearDates {
-  padding-right: 30px;
+.components-color-palette__custom-color-value {
+  margin-right: 16px;
+  text-transform: uppercase;
 }
 
-.DateRangePickerInput_arrow {
-  display: inline-block;
-  vertical-align: middle;
-  color: #484848;
+.components-custom-gradient-picker:not(.is-next-has-no-margin) {
+  margin-top: 12px;
+  margin-bottom: 24px;
 }
 
-.DateRangePickerInput_arrow_svg {
-  vertical-align: middle;
-  fill: #484848;
-  height: 24px;
-  width: 24px;
+.components-custom-gradient-picker__gradient-bar:not(.has-gradient) {
+  opacity: 0.4;
 }
 
-.DateRangePickerInput_clearDates {
-  background: 0 0;
-  border: 0;
-  color: inherit;
-  font: inherit;
-  line-height: normal;
-  overflow: visible;
-  cursor: pointer;
-  padding: 10px;
-  margin: 0 10px 0 5px;
-  position: absolute;
-  right: 0;
-  top: 50%;
-  transform: translateY(-50%);
+.components-custom-gradient-picker__gradient-bar {
+  border-radius: 2px;
+  width: 100%;
+  height: 48px;
 }
-
-.DateRangePickerInput_clearDates__small {
-  padding: 6px;
+.components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__markers-container {
+  position: relative;
+  width: calc(100% - 48px);
+  margin-right: auto;
+  margin-left: auto;
 }
-
-.DateRangePickerInput_clearDates_default:focus,
-.DateRangePickerInput_clearDates_default:hover {
-  background: #dbdbdb;
+.components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__control-point-dropdown {
+  position: absolute;
+  height: 16px;
+  width: 16px;
+  top: 16px;
+  display: flex;
+}
+.components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__insert-point-dropdown {
+  position: relative;
+  height: inherit;
+  width: inherit;
+  min-width: 16px;
   border-radius: 50%;
+  background: #fff;
+  padding: 2px;
+  color: #1e1e1e;
 }
-
-.DateRangePickerInput_clearDates__hide {
-  visibility: hidden;
+.components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__insert-point-dropdown svg {
+  height: 100%;
+  width: 100%;
 }
-
-.DateRangePickerInput_clearDates_svg {
-  fill: #82888a;
-  height: 12px;
-  width: 15px;
-  vertical-align: middle;
+.components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__control-point-button {
+  height: inherit;
+  width: inherit;
+  border-radius: 50%;
+  padding: 0;
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) #fff, 0 0 2px 0 rgba(0, 0, 0, 0.25);
+  outline: 2px solid transparent;
 }
-
-.DateRangePickerInput_clearDates_svg__small {
-  height: 9px;
+.components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__control-point-button:focus, .components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__control-point-button.is-active {
+  box-shadow: inset 0 0 0 calc(var(--wp-admin-border-width-focus) * 2) #fff, 0 0 2px 0 rgba(0, 0, 0, 0.25);
+  outline: 1.5px solid transparent;
 }
 
-.DateRangePickerInput_calendarIcon {
-  background: 0 0;
-  border: 0;
-  color: inherit;
-  font: inherit;
-  line-height: normal;
-  overflow: visible;
-  cursor: pointer;
-  display: inline-block;
-  vertical-align: middle;
-  padding: 10px;
-  margin: 0 5px 0 10px;
+.components-custom-gradient-picker__remove-control-point-wrapper {
+  padding-bottom: 8px;
 }
 
-.DateRangePickerInput_calendarIcon_svg {
-  fill: #82888a;
-  height: 15px;
-  width: 14px;
-  vertical-align: middle;
+.components-custom-gradient-picker__inserter {
+  direction: ltr;
 }
 
-.DateRangePicker {
-  position: relative;
+.components-custom-gradient-picker__liner-gradient-indicator {
   display: inline-block;
+  flex: 0 auto;
+  width: 20px;
+  height: 20px;
 }
 
-.DateRangePicker__block {
-  display: block;
-}
-
-.DateRangePicker_picker {
-  z-index: 1;
-  background-color: #fff;
-  position: absolute;
+.components-custom-gradient-picker .components-custom-gradient-picker__toolbar {
+  border: none;
 }
-
-.DateRangePicker_picker__rtl {
-  direction: rtl;
+.components-custom-gradient-picker .components-custom-gradient-picker__toolbar > div + div {
+  margin-right: 1px;
 }
-
-.DateRangePicker_picker__directionLeft {
-  left: 0;
+.components-custom-gradient-picker .components-custom-gradient-picker__toolbar button.is-pressed > svg {
+  background: #fff;
+  border: 1px solid #949494;
+  border-radius: 2px;
 }
 
-.DateRangePicker_picker__directionRight {
-  right: 0;
+.components-custom-select-control {
+  position: relative;
+  font-size: 13px;
 }
 
-.DateRangePicker_picker__portal {
-  background-color: rgba(0, 0, 0, 0.3);
-  position: fixed;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
+.components-custom-select-control__button {
+  position: relative;
+  text-align: right;
+  outline: 0;
 }
 
-.DateRangePicker_picker__fullScreenPortal {
+.components-custom-select-control__menu {
+  border: 1px solid #1e1e1e;
   background-color: #fff;
-}
-
-.DateRangePicker_closeButton {
-  background: 0 0;
-  border: 0;
-  color: inherit;
-  font: inherit;
-  line-height: normal;
-  overflow: visible;
-  cursor: pointer;
+  border-radius: 2px;
+  outline: none;
+  transition: none;
+  max-height: 400px;
+  min-width: 100%;
+  overflow: auto;
+  padding: 0;
   position: absolute;
-  top: 0;
-  right: 0;
-  padding: 15px;
-  z-index: 2;
+  z-index: 1000000;
 }
-
-.DateRangePicker_closeButton:focus,
-.DateRangePicker_closeButton:hover {
-  color: #b0b3b4;
-  text-decoration: none;
+.components-custom-select-control__menu[aria-hidden=true] {
+  display: none;
 }
 
-.DateRangePicker_closeButton_svg {
-  height: 15px;
-  width: 15px;
-  fill: #cacccd;
-}
-.components-datetime__date .CalendarMonthGrid__horizontal,
-.components-datetime__date .DayPicker_weekHeader_li {
-  transform: none !important;
-  width: 100% !important;
-}
-.components-datetime__date .CalendarMonthGrid_month__horizontal,
-.components-datetime__date .CalendarMonth_table,
-.components-datetime__date .DayPicker_weekHeader {
-  width: 100%;
-}
-.components-datetime__date .DayPicker_weekHeaders__horizontal {
-  margin: 0;
-}
-.components-datetime__date .DayPicker_weekHeader_ul {
-  display: flex;
-}
-.components-datetime__date .DayPicker_weekHeader {
-  top: 50px;
-}
-.components-datetime__date .CalendarMonth_caption {
-  font-size: 13px;
-}
-.components-datetime__date .CalendarMonth_table {
-  border-collapse: separate;
-  border-spacing: 2px;
-}
-.components-datetime__date .CalendarDay {
-  border: none;
-  font-size: 13px;
-  border-radius: 50%;
-  background: #fff;
+.components-custom-select-control__item {
+  align-items: center;
+  display: grid;
+  grid-template-columns: auto auto;
+  list-style-type: none;
+  padding: 8px 16px;
+  cursor: default;
+  line-height: 28px;
 }
-.components-datetime__date .CalendarDay:hover {
-  color: var(--wp-admin-theme-color);
+.components-custom-select-control__item:not(.is-next-36px-default-size) {
+  padding: 8px;
 }
-.components-datetime__date .CalendarDay:focus {
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 3px #fff;
-  outline: 2px solid transparent;
+.components-custom-select-control__item.has-hint {
+  grid-template-columns: auto auto 30px;
 }
-.components-datetime__date .CalendarDay__today {
-  background: #f0f0f0;
+.components-custom-select-control__item.is-highlighted {
+  background: #ddd;
 }
-.components-datetime__date .CalendarDay__selected {
-  background: var(--wp-admin-theme-color);
-  border: 2px solid transparent;
+.components-custom-select-control__item .components-custom-select-control__item-hint {
+  color: #757575;
+  text-align: left;
+  padding-left: 4px;
 }
-.components-datetime__date .CalendarDay__selected:hover {
-  background: var(--wp-admin-theme-color-darker-20);
-  color: #fff;
+.components-custom-select-control__item .components-custom-select-control__item-icon {
+  margin-right: auto;
 }
-.components-datetime__date .CalendarDay__selected:focus {
-  box-shadow: inset 0 0 0 1px #fff;
+.components-custom-select-control__item:last-child {
+  margin-bottom: 0;
 }
 
 .block-editor-dimension-control .components-base-control__field {
@@ -2340,6 +1275,9 @@ body.is-dragging-components-draggable {
   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;
@@ -2349,6 +1287,8 @@ body.is-dragging-components-draggable {
   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 {
@@ -2356,9 +1296,6 @@ body.is-dragging-components-draggable {
   padding-bottom: 0 !important;
   margin-bottom: 8px !important;
 }
-.components-font-size-picker__controls .components-custom-select-control__button {
-  width: 100%;
-}
 .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;
@@ -3351,12 +2288,6 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
     align-items: flex-start;
   }
 }
-.components-placeholder.components-placeholder.has-illustration {
-  background: none;
-  border: none;
-  box-shadow: none;
-  min-width: 100px;
-}
 
 .components-placeholder__error,
 .components-placeholder__instructions,
@@ -3469,11 +2400,6 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   width: 100%;
 }
 
-.components-placeholder__preview img {
-  margin: 3%;
-  width: 50%;
-}
-
 .components-placeholder__fieldset .components-button {
   margin-left: 12px;
   margin-bottom: 12px;
@@ -3510,19 +2436,62 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   padding: 0 8px 2px;
 }
 
-.components-placeholder__illustration {
+/**
+ * Dashed style placeholders
+ */
+.components-placeholder.has-illustration {
+  color: inherit;
+  display: flex;
+  box-shadow: none;
+  min-width: 100px;
+  border-radius: 2px;
+  -webkit-backdrop-filter: blur(100px);
+          backdrop-filter: blur(100px);
+  background-color: rgba(255, 255, 255, 0.1);
   border: 1px dashed currentColor;
-  box-sizing: border-box;
+  overflow: hidden;
+}
+.is-dark-theme .components-placeholder.has-illustration {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+.components-placeholder.has-illustration .components-placeholder__fieldset {
+  width: auto;
+}
+.components-placeholder.has-illustration .components-placeholder__label,
+.components-placeholder.has-illustration .components-placeholder__instructions,
+.components-placeholder.has-illustration .components-button {
+  opacity: 0;
+  transition: opacity 0.1s linear;
+}
+@media (prefers-reduced-motion: reduce) {
+  .components-placeholder.has-illustration .components-placeholder__label,
+.components-placeholder.has-illustration .components-placeholder__instructions,
+.components-placeholder.has-illustration .components-button {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
+}
+.is-selected > .components-placeholder.has-illustration .components-placeholder__label,
+.is-selected > .components-placeholder.has-illustration .components-placeholder__instructions,
+.is-selected > .components-placeholder.has-illustration .components-button {
+  opacity: 1;
+}
+
+.components-placeholder__preview {
+  display: flex;
+  justify-content: center;
+}
+
+.components-placeholder__illustration {
+  box-sizing: content-box;
   position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
+  top: 50%;
+  right: 50%;
+  transform: translate(50%, -50%);
   width: 100%;
   height: 100%;
   stroke: currentColor;
   stroke-dasharray: 3;
-  opacity: 0.4;
 }
 
 .components-popover {
@@ -4105,26 +3074,6 @@ body.lockscroll {
   padding-top: 8px;
 }
 
-.components-swatch {
-  width: 18px;
-  height: 18px;
-  border-radius: 50%;
-  color: transparent;
-  background: transparent;
-}
-.components-swatch::after {
-  content: "";
-  display: block;
-  width: 100%;
-  height: 100%;
-  border: 1px solid rgba(0, 0, 0, 0.2);
-  border-radius: 50%;
-}
-
-.components-button.has-icon.has-text .components-swatch {
-  margin-left: 8px;
-}
-
 .components-tab-panel__tabs {
   display: flex;
   align-items: stretch;