@wordpress/components 19.11.0 → 19.14.0

package/build-module/z-stack/component.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/z-stack/component.tsx"],"names":["isValidElement","getValidChildren","contextConnect","useContextSystem","ZStackView","ZStackChildView","ZStack","props","forwardedRef","children","className","isLayered","isReversed","offset","otherProps","validChildren","childrenLastIndex","length","clonedChildren","map","child","index","zIndex","offsetAmount","key"],"mappings":";;;AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,cAAT,QAA+B,oBAA/B;AAEA;AACA;AACA;;AACA,SAASC,gBAAT,QAAiC,gCAAjC;AACA,SAASC,cAAT,EAAyBC,gBAAzB,QAAiD,eAAjD;AAEA,SAASC,UAAT,EAAqBC,eAArB,QAA4C,UAA5C;;AA2BA,SAASC,MAAT,CACCC,KADD,EAECC,YAFD,EAGE;AACD,QAAM;AACLC,IAAAA,QADK;AAELC,IAAAA,SAFK;AAGLC,IAAAA,SAAS,GAAG,IAHP;AAILC,IAAAA,UAAU,GAAG,KAJR;AAKLC,IAAAA,MAAM,GAAG,CALJ;AAML,OAAGC;AANE,MAOFX,gBAAgB,CAAEI,KAAF,EAAS,QAAT,CAPpB;AASA,QAAMQ,aAAa,GAAGd,gBAAgB,CAAEQ,QAAF,CAAtC;AACA,QAAMO,iBAAiB,GAAGD,aAAa,CAACE,MAAd,GAAuB,CAAjD;AAEA,QAAMC,cAAc,GAAGH,aAAa,CAACI,GAAd,CAAmB,CAAEC,KAAF,EAASC,KAAT,KAAoB;AAC7D,UAAMC,MAAM,GAAGV,UAAU,GAAGI,iBAAiB,GAAGK,KAAvB,GAA+BA,KAAxD;AACA,UAAME,YAAY,GAAGV,MAAM,GAAGQ,KAA9B;AAEA,UAAMG,GAAG,GAAGxB,cAAc,CAAEoB,KAAF,CAAd,GAA0BA,KAAK,CAACI,GAAhC,GAAsCH,KAAlD;AAEA,WACC,cAAC,eAAD;AACC,MAAA,SAAS,EAAGV,SADb;AAEC,MAAA,YAAY,EAAGY,YAFhB;AAGC,MAAA,MAAM,EAAGD,MAHV;AAIC,MAAA,GAAG,EAAGE;AAJP,OAMGJ,KANH,CADD;AAUA,GAhBsB,CAAvB;AAkBA,SACC,cAAC,UAAD,eACMN,UADN;AAEC,IAAA,SAAS,EAAGJ,SAFb;AAGC,IAAA,GAAG,EAAGF;AAHP,MAKGU,cALH,CADD;AASA;;AAED,eAAehB,cAAc,CAAEI,MAAF,EAAU,QAAV,CAA7B","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef, ReactNode } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { isValidElement } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { getValidChildren } from '../ui/utils/get-valid-children';\nimport { contextConnect, useContextSystem } from '../ui/context';\nimport type { WordPressComponentProps } from '../ui/context';\nimport { ZStackView, ZStackChildView } from './styles';\n\nexport interface ZStackProps {\n\t/**\n\t * Layers children elements on top of each other (first: highest z-index, last: lowest z-index).\n\t *\n\t * @default true\n\t */\n\tisLayered?: boolean;\n\t/**\n\t * Reverse the layer ordering (first: lowest z-index, last: highest z-index).\n\t *\n\t * @default false\n\t */\n\tisReversed?: boolean;\n\t/**\n\t * The amount of offset between each child element. The amount of space between each child element. Defaults to `0`. Its value is automatically inverted (i.e. from positive to negative, and viceversa) when switching from LTR to RTL.\n\t *\n\t * @default 0\n\t */\n\toffset?: number;\n\t/**\n\t * Child elements.\n\t */\n\tchildren: ReactNode;\n}\n\nfunction ZStack(\n\tprops: WordPressComponentProps< ZStackProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst {\n\t\tchildren,\n\t\tclassName,\n\t\tisLayered = true,\n\t\tisReversed = false,\n\t\toffset = 0,\n\t\t...otherProps\n\t} = useContextSystem( props, 'ZStack' );\n\n\tconst validChildren = getValidChildren( children );\n\tconst childrenLastIndex = validChildren.length - 1;\n\n\tconst clonedChildren = validChildren.map( ( child, index ) => {\n\t\tconst zIndex = isReversed ? childrenLastIndex - index : index;\n\t\tconst offsetAmount = offset * index;\n\n\t\tconst key = isValidElement( child ) ? child.key : index;\n\n\t\treturn (\n\t\t\t<ZStackChildView\n\t\t\t\tisLayered={ isLayered }\n\t\t\t\toffsetAmount={ offsetAmount }\n\t\t\t\tzIndex={ zIndex }\n\t\t\t\tkey={ key }\n\t\t\t>\n\t\t\t\t{ child }\n\t\t\t</ZStackChildView>\n\t\t);\n\t} );\n\n\treturn (\n\t\t<ZStackView\n\t\t\t{ ...otherProps }\n\t\t\tclassName={ className }\n\t\t\tref={ forwardedRef }\n\t\t>\n\t\t\t{ clonedChildren }\n\t\t</ZStackView>\n\t);\n}\n\nexport default contextConnect( ZStack, 'ZStack' );\n"]}
+{"version":3,"sources":["@wordpress/components/src/z-stack/component.tsx"],"names":["isValidElement","getValidChildren","contextConnect","useContextSystem","ZStackView","ZStackChildView","UnconnectedZStack","props","forwardedRef","children","className","isLayered","isReversed","offset","otherProps","validChildren","childrenLastIndex","length","clonedChildren","map","child","index","zIndex","offsetAmount","key","ZStack"],"mappings":";;;AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,cAAT,QAA+B,oBAA/B;AAEA;AACA;AACA;;AACA,SAASC,gBAAT,QAAiC,gCAAjC;AACA,SAASC,cAAT,EAAyBC,gBAAzB,QAAiD,eAAjD;AACA,SAASC,UAAT,EAAqBC,eAArB,QAA4C,UAA5C;;AAIA,SAASC,iBAAT,CACCC,KADD,EAECC,YAFD,EAGE;AACD,QAAM;AACLC,IAAAA,QADK;AAELC,IAAAA,SAFK;AAGLC,IAAAA,SAAS,GAAG,IAHP;AAILC,IAAAA,UAAU,GAAG,KAJR;AAKLC,IAAAA,MAAM,GAAG,CALJ;AAML,OAAGC;AANE,MAOFX,gBAAgB,CAAEI,KAAF,EAAS,QAAT,CAPpB;AASA,QAAMQ,aAAa,GAAGd,gBAAgB,CAAEQ,QAAF,CAAtC;AACA,QAAMO,iBAAiB,GAAGD,aAAa,CAACE,MAAd,GAAuB,CAAjD;AAEA,QAAMC,cAAc,GAAGH,aAAa,CAACI,GAAd,CAAmB,CAAEC,KAAF,EAASC,KAAT,KAAoB;AAC7D,UAAMC,MAAM,GAAGV,UAAU,GAAGI,iBAAiB,GAAGK,KAAvB,GAA+BA,KAAxD;AACA,UAAME,YAAY,GAAGV,MAAM,GAAGQ,KAA9B;AAEA,UAAMG,GAAG,GAAGxB,cAAc,CAAEoB,KAAF,CAAd,GAA0BA,KAAK,CAACI,GAAhC,GAAsCH,KAAlD;AAEA,WACC,cAAC,eAAD;AACC,MAAA,SAAS,EAAGV,SADb;AAEC,MAAA,YAAY,EAAGY,YAFhB;AAGC,MAAA,MAAM,EAAGD,MAHV;AAIC,MAAA,GAAG,EAAGE;AAJP,OAMGJ,KANH,CADD;AAUA,GAhBsB,CAAvB;AAkBA,SACC,cAAC,UAAD,eACMN,UADN;AAEC,IAAA,SAAS,EAAGJ,SAFb;AAGC,IAAA,GAAG,EAAGF;AAHP,MAKGU,cALH,CADD;AASA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,OAAO,MAAMO,MAAM,GAAGvB,cAAc,CAAEI,iBAAF,EAAqB,QAArB,CAA7B;AAEP,eAAemB,MAAf","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { isValidElement } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { getValidChildren } from '../ui/utils/get-valid-children';\nimport { contextConnect, useContextSystem } from '../ui/context';\nimport { ZStackView, ZStackChildView } from './styles';\nimport type { ZStackProps } from './types';\nimport type { WordPressComponentProps } from '../ui/context';\n\nfunction UnconnectedZStack(\n\tprops: WordPressComponentProps< ZStackProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst {\n\t\tchildren,\n\t\tclassName,\n\t\tisLayered = true,\n\t\tisReversed = false,\n\t\toffset = 0,\n\t\t...otherProps\n\t} = useContextSystem( props, 'ZStack' );\n\n\tconst validChildren = getValidChildren( children );\n\tconst childrenLastIndex = validChildren.length - 1;\n\n\tconst clonedChildren = validChildren.map( ( child, index ) => {\n\t\tconst zIndex = isReversed ? childrenLastIndex - index : index;\n\t\tconst offsetAmount = offset * index;\n\n\t\tconst key = isValidElement( child ) ? child.key : index;\n\n\t\treturn (\n\t\t\t<ZStackChildView\n\t\t\t\tisLayered={ isLayered }\n\t\t\t\toffsetAmount={ offsetAmount }\n\t\t\t\tzIndex={ zIndex }\n\t\t\t\tkey={ key }\n\t\t\t>\n\t\t\t\t{ child }\n\t\t\t</ZStackChildView>\n\t\t);\n\t} );\n\n\treturn (\n\t\t<ZStackView\n\t\t\t{ ...otherProps }\n\t\t\tclassName={ className }\n\t\t\tref={ forwardedRef }\n\t\t>\n\t\t\t{ clonedChildren }\n\t\t</ZStackView>\n\t);\n}\n\n/**\n * `ZStack` allows you to stack things along the Z-axis.\n *\n * ```jsx\n * import { __experimentalZStack as ZStack } from '@wordpress/components';\n *\n * function Example() {\n *   return (\n *     <ZStack offset={ 20 } isLayered>\n *       <ExampleImage />\n *       <ExampleImage />\n *       <ExampleImage />\n *     </ZStack>\n *   );\n * }\n * ```\n */\nexport const ZStack = contextConnect( UnconnectedZStack, 'ZStack' );\n\nexport default ZStack;\n"]}

package/build-module/z-stack/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/build-module/z-stack/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}

package/build-style/style-rtl.css

@@ -941,11 +941,10 @@ input.components-combobox-control__input[type=text]:focus {
   width: 100%;
   height: 48px;
   margin-bottom: 20px;
-  padding-right: 16px;
 }
 .components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__markers-container {
   position: relative;
-  width: calc(100% - 32px);
+  width: calc(100% - 48px);
   margin-right: auto;
   margin-left: auto;
 }
@@ -2119,63 +2118,24 @@ input.components-combobox-control__input[type=text]:focus {
   width: 15px;
   fill: #cacccd;
 }
-.components-datetime {
-  padding: 16px;
+.components-datetime__date .CalendarMonthGrid__horizontal,
+.components-datetime__date .DayPicker_weekHeader_li {
+  transform: none !important;
+  width: 100% !important;
 }
-.components-panel__body .components-datetime {
-  padding: 0;
-}
-.components-datetime .components-datetime__calendar-help {
-  padding: 16px;
-  min-width: 260px;
+.components-datetime__date .CalendarMonthGrid_month__horizontal,
+.components-datetime__date .CalendarMonth_table,
+.components-datetime__date .DayPicker_weekHeader {
+  width: 100%;
 }
-.components-datetime .components-datetime__calendar-help h4 {
+.components-datetime__date .DayPicker_weekHeaders__horizontal {
   margin: 0;
 }
-.components-datetime .components-datetime__buttons {
+.components-datetime__date .DayPicker_weekHeader_ul {
   display: flex;
-  justify-content: space-between;
-}
-.components-datetime .components-datetime__date-help-toggle {
-  display: block;
-  margin-right: auto;
-}
-.components-datetime fieldset {
-  border: 0;
-  padding: 0;
-  margin: 0;
-}
-.components-datetime select,
-.components-datetime input {
-  box-shadow: 0 0 0 transparent;
-  transition: box-shadow 0.1s linear;
-  border-radius: 2px;
-  border: 1px solid #757575;
-}
-@media (prefers-reduced-motion: reduce) {
-  .components-datetime select,
-.components-datetime input {
-    transition-duration: 0s;
-    transition-delay: 0s;
-  }
-}
-.components-datetime select,
-.components-datetime input[type=number],
-.components-datetime .components-button {
-  height: 30px;
-  margin-top: 0;
-  margin-bottom: 0;
 }
-.components-datetime .components-button:focus {
-  z-index: 1;
-}
-
-.components-datetime__date {
-  min-height: 236px;
-  border-top: 1px solid #ddd;
-}
-.components-datetime__date .DayPickerNavigation_leftButton__horizontalDefault {
-  left: 13px;
+.components-datetime__date .DayPicker_weekHeader {
+  top: 50px;
 }
 .components-datetime__date .CalendarMonth_caption {
   font-size: 13px;
@@ -2185,160 +2145,32 @@ input.components-combobox-control__input[type=text]:focus {
   border-spacing: 2px;
 }
 .components-datetime__date .CalendarDay {
-  font-size: 13px;
   border: none;
+  font-size: 13px;
   border-radius: 50%;
-  text-align: center;
+  background: #fff;
+}
+.components-datetime__date .CalendarDay:hover {
+  color: var(--wp-admin-theme-color);
 }
 .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-datetime__date .CalendarDay__today {
+  background: #f0f0f0;
+}
 .components-datetime__date .CalendarDay__selected {
   background: var(--wp-admin-theme-color);
   border: 2px solid transparent;
 }
 .components-datetime__date .CalendarDay__selected:hover {
   background: var(--wp-admin-theme-color-darker-20);
+  color: #fff;
 }
 .components-datetime__date .CalendarDay__selected:focus {
   box-shadow: inset 0 0 0 1px #fff;
 }
-.components-datetime__date .DayPickerNavigation_button__horizontalDefault {
-  padding: 2px 8px;
-  top: 20px;
-}
-.components-datetime__date .DayPickerNavigation_button__horizontalDefault:focus {
-  border-color: var(--wp-admin-theme-color);
-  box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
-  outline: 2px solid transparent;
-}
-.components-datetime__date .DayPicker_weekHeader {
-  top: 50px;
-}
-.components-datetime__date .DayPicker_weekHeader .DayPicker_weekHeader_ul {
-  margin: 1px;
-  padding-right: 0;
-  padding-left: 0;
-}
-.components-datetime__date.is-description-visible .DayPicker {
-  visibility: hidden;
-}
-
-.components-datetime__date .CalendarDay .components-datetime__date__day {
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-content: center;
-  flex-direction: column;
-  position: relative;
-}
-.components-datetime__date .CalendarDay .components-datetime__date__day.has-events::before {
-  content: " ";
-  width: 4px;
-  height: 4px;
-  border-radius: 2px;
-  position: absolute;
-  right: 50%;
-  margin-right: -2px;
-  bottom: 0;
-  background-color: #fff;
-}
-
-.components-datetime__date .CalendarDay:not(.CalendarDay__selected) .components-datetime__date__day.has-events::before {
-  background: var(--wp-admin-theme-color);
-}
-
-.components-datetime__time {
-  padding-bottom: 16px;
-}
-.components-datetime__time fieldset {
-  position: relative;
-  margin-bottom: 0.5em;
-}
-.components-datetime__time fieldset + fieldset {
-  margin-bottom: 0;
-}
-.components-datetime__time .components-datetime__time-field-am-pm fieldset {
-  margin-top: 0;
-}
-.components-datetime__time .components-datetime__time-wrapper {
-  display: flex;
-}
-.components-datetime__time .components-datetime__time-wrapper .components-datetime__time-separator {
-  display: inline-block;
-  padding: 0 0 0 3px;
-}
-.components-datetime__time .components-datetime__time-wrapper .components-datetime__time-field-time {
-  direction: ltr;
-}
-.components-datetime__time .components-datetime__time-wrapper .components-datetime__time-field select {
-  margin-left: 4px;
-}
-.components-datetime__time .components-datetime__time-wrapper .components-datetime__time-field select:focus {
-  position: relative;
-  z-index: 1;
-}
-.components-datetime__time .components-datetime__time-wrapper .components-datetime__time-field input[type=number] {
-  padding: 2px;
-  margin-left: 4px;
-  text-align: center;
-  -moz-appearance: textfield;
-}
-.components-datetime__time .components-datetime__time-wrapper .components-datetime__time-field input[type=number]:focus {
-  position: relative;
-  z-index: 1;
-}
-.components-datetime__time .components-datetime__time-wrapper .components-datetime__time-field input[type=number]::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-.components-datetime__time.is-12-hour .components-datetime__time-field-day input {
-  margin: -4px 0 0 !important;
-  border-radius: 0 2px 2px 0 !important;
-}
-.components-datetime__time.is-12-hour .components-datetime__time-field-year input {
-  border-radius: 2px 0 0 2px !important;
-}
-
-.components-datetime__timezone {
-  line-height: 30px;
-  margin-right: 4px;
-  -webkit-text-decoration: underline dotted;
-          text-decoration: underline dotted;
-}
-
-.components-datetime__time-legend {
-  font-weight: 600;
-  margin-top: 0.5em;
-}
-.components-datetime__time-legend.invisible {
-  position: absolute;
-  top: -999em;
-  right: -999em;
-}
-
-.components-datetime__time-field-integer-field {
-  font-family: inherit;
-}
-
-.components-datetime__time-field-hours-input,
-.components-datetime__time-field-minutes-input,
-.components-datetime__time-field-day-input {
-  width: 35px;
-}
-
-.components-datetime__time-field-year-input {
-  width: 55px;
-}
-
-.components-datetime__time-field-month-select {
-  max-width: 145px;
-}
-
-.components-popover .components-datetime__date {
-  padding-right: 4px;
-}
 
 .block-editor-dimension-control .components-base-control__field {
   display: flex;
@@ -2518,6 +2350,22 @@ body.is-dragging-components-draggable {
   border-color: #1e1e1e;
 }
 
+.components-duotone-picker__color-indicator::before {
+  background: transparent;
+}
+
+.components-duotone-picker__color-indicator > .components-button {
+  background: linear-gradient(45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
+  color: transparent;
+}
+.components-duotone-picker__color-indicator > .components-button.is-pressed:hover:not(:disabled) {
+  background: linear-gradient(45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
+  color: transparent;
+}
+.components-duotone-picker__color-indicator > .components-button:not([aria-disabled=true]):active {
+  color: transparent;
+}
+
 .components-font-size-picker__header__hint {
   margin-right: 4px;
   color: #757575;
@@ -2809,7 +2657,7 @@ body.is-dragging-components-draggable {
 }
 .components-form-token-field__token.is-borderless {
   position: relative;
-  padding: 0 0 0 16px;
+  padding: 0 0 0 24px;
 }
 .components-form-token-field__token.is-borderless .components-form-token-field__token-text {
   background: transparent;
@@ -2821,6 +2669,7 @@ body.is-dragging-components-draggable {
   position: absolute;
   top: 1px;
   left: 0;
+  padding: 0;
 }
 .components-form-token-field__token.is-borderless.is-success .components-form-token-field__token-text {
   color: #4ab866;
@@ -3542,6 +3391,12 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
 .components-placeholder.components-placeholder .components-base-control__label {
   font-size: 13px;
 }
+.components-placeholder.components-placeholder.has-illustration {
+  background: none;
+  border: none;
+  box-shadow: none;
+  min-width: 100px;
+}
 
 .components-placeholder__error,
 .components-placeholder__instructions,
@@ -3695,6 +3550,21 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   padding: 0 8px 2px;
 }
 
+.components-placeholder__illustration {
+  border: 1px dashed currentColor;
+  box-sizing: border-box;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  stroke: currentColor;
+  stroke-dasharray: 3;
+  opacity: 0.4;
+}
+
 .components-popover {
   z-index: 1000000;
 }

package/build-style/style.css

@@ -941,12 +941,10 @@ input.components-combobox-control__input[type=text]:focus {
   width: 100%;
   height: 48px;
   margin-bottom: 20px;
-  /*rtl:ignore*/
-  padding-right: 16px;
 }
 .components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__markers-container {
   position: relative;
-  width: calc(100% - 32px);
+  width: calc(100% - 48px);
   margin-left: auto;
   margin-right: auto;
 }
@@ -2124,65 +2122,24 @@ input.components-combobox-control__input[type=text]:focus {
 }
 
 /*rtl:end:ignore*/
-.components-datetime {
-  padding: 16px;
-}
-.components-panel__body .components-datetime {
-  padding: 0;
+.components-datetime__date .CalendarMonthGrid__horizontal,
+.components-datetime__date .DayPicker_weekHeader_li {
+  transform: none !important;
+  width: 100% !important;
 }
-.components-datetime .components-datetime__calendar-help {
-  padding: 16px;
-  min-width: 260px;
+.components-datetime__date .CalendarMonthGrid_month__horizontal,
+.components-datetime__date .CalendarMonth_table,
+.components-datetime__date .DayPicker_weekHeader {
+  width: 100%;
 }
-.components-datetime .components-datetime__calendar-help h4 {
+.components-datetime__date .DayPicker_weekHeaders__horizontal {
   margin: 0;
 }
-.components-datetime .components-datetime__buttons {
+.components-datetime__date .DayPicker_weekHeader_ul {
   display: flex;
-  justify-content: space-between;
-}
-.components-datetime .components-datetime__date-help-toggle {
-  display: block;
-  margin-left: auto;
-}
-.components-datetime fieldset {
-  border: 0;
-  padding: 0;
-  margin: 0;
-}
-.components-datetime select,
-.components-datetime input {
-  box-shadow: 0 0 0 transparent;
-  transition: box-shadow 0.1s linear;
-  border-radius: 2px;
-  border: 1px solid #757575;
-}
-@media (prefers-reduced-motion: reduce) {
-  .components-datetime select,
-.components-datetime input {
-    transition-duration: 0s;
-    transition-delay: 0s;
-  }
 }
-.components-datetime select,
-.components-datetime input[type=number],
-.components-datetime .components-button {
-  height: 30px;
-  margin-top: 0;
-  margin-bottom: 0;
-}
-.components-datetime .components-button:focus {
-  z-index: 1;
-}
-
-.components-datetime__date {
-  min-height: 236px;
-  border-top: 1px solid #ddd;
-}
-.components-datetime__date .DayPickerNavigation_leftButton__horizontalDefault {
-  /*!rtl:begin:ignore*/
-  left: 13px;
-  /*!rtl:end:ignore*/
+.components-datetime__date .DayPicker_weekHeader {
+  top: 50px;
 }
 .components-datetime__date .CalendarMonth_caption {
   font-size: 13px;
@@ -2192,161 +2149,32 @@ input.components-combobox-control__input[type=text]:focus {
   border-spacing: 2px;
 }
 .components-datetime__date .CalendarDay {
-  font-size: 13px;
   border: none;
+  font-size: 13px;
   border-radius: 50%;
-  text-align: center;
+  background: #fff;
+}
+.components-datetime__date .CalendarDay:hover {
+  color: var(--wp-admin-theme-color);
 }
 .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-datetime__date .CalendarDay__today {
+  background: #f0f0f0;
+}
 .components-datetime__date .CalendarDay__selected {
   background: var(--wp-admin-theme-color);
   border: 2px solid transparent;
 }
 .components-datetime__date .CalendarDay__selected:hover {
   background: var(--wp-admin-theme-color-darker-20);
+  color: #fff;
 }
 .components-datetime__date .CalendarDay__selected:focus {
   box-shadow: inset 0 0 0 1px #fff;
 }
-.components-datetime__date .DayPickerNavigation_button__horizontalDefault {
-  padding: 2px 8px;
-  top: 20px;
-}
-.components-datetime__date .DayPickerNavigation_button__horizontalDefault:focus {
-  border-color: var(--wp-admin-theme-color);
-  box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
-  outline: 2px solid transparent;
-}
-.components-datetime__date .DayPicker_weekHeader {
-  top: 50px;
-}
-.components-datetime__date .DayPicker_weekHeader .DayPicker_weekHeader_ul {
-  margin: 1px;
-  padding-left: 0;
-  padding-right: 0;
-}
-.components-datetime__date.is-description-visible .DayPicker {
-  visibility: hidden;
-}
-
-.components-datetime__date .CalendarDay .components-datetime__date__day {
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-content: center;
-  flex-direction: column;
-  position: relative;
-}
-.components-datetime__date .CalendarDay .components-datetime__date__day.has-events::before {
-  content: " ";
-  width: 4px;
-  height: 4px;
-  border-radius: 2px;
-  position: absolute;
-  left: 50%;
-  margin-left: -2px;
-  bottom: 0;
-  background-color: #fff;
-}
-
-.components-datetime__date .CalendarDay:not(.CalendarDay__selected) .components-datetime__date__day.has-events::before {
-  background: var(--wp-admin-theme-color);
-}
-
-.components-datetime__time {
-  padding-bottom: 16px;
-}
-.components-datetime__time fieldset {
-  position: relative;
-  margin-bottom: 0.5em;
-}
-.components-datetime__time fieldset + fieldset {
-  margin-bottom: 0;
-}
-.components-datetime__time .components-datetime__time-field-am-pm fieldset {
-  margin-top: 0;
-}
-.components-datetime__time .components-datetime__time-wrapper {
-  display: flex;
-}
-.components-datetime__time .components-datetime__time-wrapper .components-datetime__time-separator {
-  display: inline-block;
-  padding: 0 3px 0 0;
-}
-.components-datetime__time .components-datetime__time-wrapper .components-datetime__time-field-time {
-  /*rtl:ignore*/
-  direction: ltr;
-}
-.components-datetime__time .components-datetime__time-wrapper .components-datetime__time-field select {
-  margin-right: 4px;
-}
-.components-datetime__time .components-datetime__time-wrapper .components-datetime__time-field select:focus {
-  position: relative;
-  z-index: 1;
-}
-.components-datetime__time .components-datetime__time-wrapper .components-datetime__time-field input[type=number] {
-  padding: 2px;
-  margin-right: 4px;
-  text-align: center;
-  -moz-appearance: textfield;
-}
-.components-datetime__time .components-datetime__time-wrapper .components-datetime__time-field input[type=number]:focus {
-  position: relative;
-  z-index: 1;
-}
-.components-datetime__time .components-datetime__time-wrapper .components-datetime__time-field input[type=number]::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-.components-datetime__time.is-12-hour .components-datetime__time-field-day input {
-  margin: -4px 0 0 !important;
-  border-radius: 2px 0 0 2px !important;
-}
-.components-datetime__time.is-12-hour .components-datetime__time-field-year input {
-  border-radius: 0 2px 2px 0 !important;
-}
-
-.components-datetime__timezone {
-  line-height: 30px;
-  margin-left: 4px;
-  -webkit-text-decoration: underline dotted;
-          text-decoration: underline dotted;
-}
-
-.components-datetime__time-legend {
-  font-weight: 600;
-  margin-top: 0.5em;
-}
-.components-datetime__time-legend.invisible {
-  position: absolute;
-  top: -999em;
-  left: -999em;
-}
-
-.components-datetime__time-field-integer-field {
-  font-family: inherit;
-}
-
-.components-datetime__time-field-hours-input,
-.components-datetime__time-field-minutes-input,
-.components-datetime__time-field-day-input {
-  width: 35px;
-}
-
-.components-datetime__time-field-year-input {
-  width: 55px;
-}
-
-.components-datetime__time-field-month-select {
-  max-width: 145px;
-}
-
-.components-popover .components-datetime__date {
-  padding-left: 4px;
-}
 
 .block-editor-dimension-control .components-base-control__field {
   display: flex;
@@ -2526,6 +2354,22 @@ body.is-dragging-components-draggable {
   border-color: #1e1e1e;
 }
 
+.components-duotone-picker__color-indicator::before {
+  background: transparent;
+}
+
+.components-duotone-picker__color-indicator > .components-button {
+  background: linear-gradient(-45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
+  color: transparent;
+}
+.components-duotone-picker__color-indicator > .components-button.is-pressed:hover:not(:disabled) {
+  background: linear-gradient(-45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
+  color: transparent;
+}
+.components-duotone-picker__color-indicator > .components-button:not([aria-disabled=true]):active {
+  color: transparent;
+}
+
 .components-font-size-picker__header__hint {
   margin-left: 4px;
   color: #757575;
@@ -2817,7 +2661,7 @@ body.is-dragging-components-draggable {
 }
 .components-form-token-field__token.is-borderless {
   position: relative;
-  padding: 0 16px 0 0;
+  padding: 0 24px 0 0;
 }
 .components-form-token-field__token.is-borderless .components-form-token-field__token-text {
   background: transparent;
@@ -2829,6 +2673,7 @@ body.is-dragging-components-draggable {
   position: absolute;
   top: 1px;
   right: 0;
+  padding: 0;
 }
 .components-form-token-field__token.is-borderless.is-success .components-form-token-field__token-text {
   color: #4ab866;
@@ -3552,6 +3397,12 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
 .components-placeholder.components-placeholder .components-base-control__label {
   font-size: 13px;
 }
+.components-placeholder.components-placeholder.has-illustration {
+  background: none;
+  border: none;
+  box-shadow: none;
+  min-width: 100px;
+}
 
 .components-placeholder__error,
 .components-placeholder__instructions,
@@ -3705,6 +3556,21 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   padding: 0 8px 2px;
 }
 
+.components-placeholder__illustration {
+  border: 1px dashed currentColor;
+  box-sizing: border-box;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  stroke: currentColor;
+  stroke-dasharray: 3;
+  opacity: 0.4;
+}
+
 .components-popover {
   z-index: 1000000;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/base-control/stories/index.tsx"],"names":[],"mappings":";AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAEtE;;GAEG;AACH,OAAO,WAAW,MAAM,IAAI,CAAC;AAG7B,QAAA,MAAM,IAAI,EAAE,aAAa,CAAE,OAAO,WAAW,CAY5C,CAAC;AACF,eAAe,IAAI,CAAC;AAapB,eAAO,MAAM,OAAO,EAAE,cAAc,CACnC,OAAO,WAAW,CACmB,CAAC;AAOvC,eAAO,MAAM,YAAY;;;EAAqC,CAAC;AAO/D;;;;;;GAMG;AACH,eAAO,MAAM,eAAe,EAAE,cAAc,CAAE,OAAO,WAAW,CAa/D,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/base-control/stories/index.tsx"],"names":[],"mappings":";AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAEtE;;GAEG;AACH,OAAO,WAAW,MAAM,IAAI,CAAC;AAG7B,QAAA,MAAM,IAAI,EAAE,aAAa,CAAE,OAAO,WAAW,CAY5C,CAAC;AACF,eAAe,IAAI,CAAC;AAapB,eAAO,MAAM,OAAO,EAAE,cAAc,CAAE,OAAO,WAAW,CACrB,CAAC;AAOpC,eAAO,MAAM,YAAY;;;EAAqC,CAAC;AAO/D;;;;;;GAMG;AACH,eAAO,MAAM,eAAe,EAAE,cAAc,CAAE,OAAO,WAAW,CAa/D,CAAC"}