@wordpress/components 19.13.0 → 19.16.0

package/build-style/style-rtl.css

@@ -834,7 +834,7 @@ input.components-combobox-control__input[type=text]:focus {
   align-items: flex-start;
   width: 100%;
   margin: 0 0 8px 0;
-  padding: 4px;
+  padding: 0;
 }
 @media (prefers-reduced-motion: reduce) {
   .components-combobox-control__suggestions-container {
@@ -895,8 +895,8 @@ input.components-combobox-control__input[type=text]:focus {
   padding: 12px;
   font-family: inherit;
   width: 100%;
-  background-image: repeating-linear-gradient(-45deg, #e0e0e0 25%, transparent 25%, transparent 75%, #e0e0e0 75%, #e0e0e0), repeating-linear-gradient(-45deg, #e0e0e0 25%, transparent 25%, transparent 75%, #e0e0e0 75%, #e0e0e0);
-  background-position: 100% 0, 25px 25px;
+  background-image: repeating-linear-gradient(45deg, #e0e0e0 25%, transparent 25%, transparent 75%, #e0e0e0 75%, #e0e0e0), repeating-linear-gradient(45deg, #e0e0e0 25%, transparent 25%, transparent 75%, #e0e0e0 75%, #e0e0e0);
+  background-position: 0 0, 25px 25px;
   background-size: calc(2 * 25px) calc(2 * 25px);
   box-sizing: border-box;
   color: #fff;
@@ -1036,36 +1036,19 @@ input.components-combobox-control__input[type=text]:focus {
 }
 
 .components-custom-select-control__button {
-  border: 1px solid #757575;
-  border-radius: 2px;
-  min-width: 130px;
   position: relative;
   text-align: right;
+  outline: 0;
 }
-.components-custom-select-control__button:not(.is-next-36px-default-size) {
-  min-height: 30px;
-}
-.components-custom-select-control__button.components-custom-select-control__button {
-  padding-right: 16px;
-  padding-left: 32px;
-}
-.components-custom-select-control__button.components-custom-select-control__button:not(.is-next-36px-default-size) {
-  padding-right: 8px;
-  padding-left: 24px;
-}
-.components-custom-select-control__button:focus:not(:disabled) {
-  border-color: var(--wp-admin-theme-color);
-  box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
+.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: 8px;
-  top: 0;
-}
-.components-custom-select-control__button .components-custom-select-control__button-icon:not(.is-next-36px-default-size) {
   left: 4px;
+  top: 0;
 }
 
 .components-custom-select-control__menu {
@@ -2350,6 +2333,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;
@@ -2535,12 +2534,9 @@ body.is-dragging-components-draggable {
   font-size: 16px;
   /* Override core line-height. To be reviewed. */
   line-height: normal;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
   width: 100%;
   margin: 0 0 8px 0;
-  padding: 2px 4px;
+  padding: 0;
   cursor: text;
 }
 @media (prefers-reduced-motion: reduce) {
@@ -2623,7 +2619,6 @@ body.is-dragging-components-draggable {
 .components-form-token-field__token {
   font-size: 13px;
   display: flex;
-  margin: 2px 0 2px 4px;
   color: #1e1e1e;
   max-width: 100%;
 }
@@ -2717,7 +2712,7 @@ body.is-dragging-components-draggable {
   transition: all 0.15s ease-in-out;
   list-style: none;
   border-top: 1px solid #757575;
-  margin: 4px -4px -4px;
+  margin: 0;
   padding: 0;
 }
 @media (prefers-reduced-motion: reduce) {
@@ -2761,6 +2756,7 @@ body.is-dragging-components-draggable {
   border-bottom: none;
   padding: 0;
   position: sticky;
+  height: 60px;
 }
 .components-guide .components-modal__header .components-button {
   align-self: flex-start;
@@ -2997,6 +2993,8 @@ body.is-dragging-components-draggable {
   background-color: rgba(0, 0, 0, 0.35);
   z-index: 100000;
   display: flex;
+  -webkit-backdrop-filter: blur(8px);
+          backdrop-filter: blur(8px);
   animation: edit-post__fade-in-animation 0.2s ease-out 0s;
   animation-fill-mode: forwards;
 }
@@ -3055,13 +3053,13 @@ body.is-dragging-components-draggable {
 }
 .components-modal__header {
   box-sizing: border-box;
-  border-bottom: 1px solid #ddd;
+  border-bottom: 1px solid transparent;
   padding: 0 32px;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  height: 60px;
+  height: 76px;
   width: 100%;
   z-index: 10;
   position: absolute;
@@ -3069,7 +3067,7 @@ body.is-dragging-components-draggable {
   right: 0;
 }
 .components-modal__header .components-modal__header-heading {
-  font-size: 1rem;
+  font-size: 1.2rem;
   font-weight: 600;
 }
 .components-modal__header h1 {
@@ -3080,6 +3078,12 @@ body.is-dragging-components-draggable {
   position: relative;
   right: 8px;
 }
+.components-modal__content.has-scrolled-content:not(.hide-header) .components-modal__header {
+  border-bottom-color: #ddd;
+}
+.components-modal__header + p {
+  margin-top: 0;
+}
 
 .components-modal__header-heading-container {
   align-items: center;
@@ -3100,22 +3104,14 @@ body.is-dragging-components-draggable {
 
 .components-modal__content {
   flex: 1;
-  margin-top: 60px;
-  padding: 0 32px 24px;
+  margin-top: 76px;
+  padding: 0 32px 32px;
   overflow: auto;
 }
-.components-modal__content::before {
-  content: "";
-  display: block;
-  margin-bottom: 24px;
-}
 .components-modal__content.hide-header {
   margin-top: 0;
   padding-top: 24px;
 }
-.components-modal__content.hide-header::before {
-  content: none;
-}
 
 .components-notice {
   display: flex;
@@ -3577,7 +3573,7 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   position: static;
   height: calc(100% - 48px);
   overflow-y: visible;
-  min-width: auto;
+  width: auto;
   border: none;
   outline: none;
   border-top: 1px solid #1e1e1e;
@@ -4512,7 +4508,7 @@ div.components-toolbar > div + div.has-left-divider::before {
   z-index: 1000002;
 }
 .components-tooltip.components-popover .components-popover__content {
-  min-width: 0;
+  min-width: min-content;
 }
 
 .components-tooltip .components-popover__content {

package/build-style/style.css

@@ -834,7 +834,7 @@ input.components-combobox-control__input[type=text]:focus {
   align-items: flex-start;
   width: 100%;
   margin: 0 0 8px 0;
-  padding: 4px;
+  padding: 0;
 }
 @media (prefers-reduced-motion: reduce) {
   .components-combobox-control__suggestions-container {
@@ -895,8 +895,10 @@ input.components-combobox-control__input[type=text]:focus {
   padding: 12px;
   font-family: inherit;
   width: 100%;
+  /*rtl:begin:ignore*/
   background-image: repeating-linear-gradient(45deg, #e0e0e0 25%, transparent 25%, transparent 75%, #e0e0e0 75%, #e0e0e0), repeating-linear-gradient(45deg, #e0e0e0 25%, transparent 25%, transparent 75%, #e0e0e0 75%, #e0e0e0);
   background-position: 0 0, 25px 25px;
+  /*rtl:end:ignore*/
   background-size: calc(2 * 25px) calc(2 * 25px);
   box-sizing: border-box;
   color: #fff;
@@ -1037,36 +1039,19 @@ input.components-combobox-control__input[type=text]:focus {
 }
 
 .components-custom-select-control__button {
-  border: 1px solid #757575;
-  border-radius: 2px;
-  min-width: 130px;
   position: relative;
   text-align: left;
+  outline: 0;
 }
-.components-custom-select-control__button:not(.is-next-36px-default-size) {
-  min-height: 30px;
-}
-.components-custom-select-control__button.components-custom-select-control__button {
-  padding-left: 16px;
-  padding-right: 32px;
-}
-.components-custom-select-control__button.components-custom-select-control__button:not(.is-next-36px-default-size) {
-  padding-left: 8px;
-  padding-right: 24px;
-}
-.components-custom-select-control__button:focus:not(:disabled) {
-  border-color: var(--wp-admin-theme-color);
-  box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
+.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;
-  right: 8px;
-  top: 0;
-}
-.components-custom-select-control__button .components-custom-select-control__button-icon:not(.is-next-36px-default-size) {
   right: 4px;
+  top: 0;
 }
 
 .components-custom-select-control__menu {
@@ -2354,6 +2339,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;
@@ -2539,12 +2540,9 @@ body.is-dragging-components-draggable {
   font-size: 16px;
   /* Override core line-height. To be reviewed. */
   line-height: normal;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
   width: 100%;
   margin: 0 0 8px 0;
-  padding: 2px 4px;
+  padding: 0;
   cursor: text;
 }
 @media (prefers-reduced-motion: reduce) {
@@ -2627,7 +2625,6 @@ body.is-dragging-components-draggable {
 .components-form-token-field__token {
   font-size: 13px;
   display: flex;
-  margin: 2px 4px 2px 0;
   color: #1e1e1e;
   max-width: 100%;
 }
@@ -2721,7 +2718,7 @@ body.is-dragging-components-draggable {
   transition: all 0.15s ease-in-out;
   list-style: none;
   border-top: 1px solid #757575;
-  margin: 4px -4px -4px;
+  margin: 0;
   padding: 0;
 }
 @media (prefers-reduced-motion: reduce) {
@@ -2765,6 +2762,7 @@ body.is-dragging-components-draggable {
   border-bottom: none;
   padding: 0;
   position: sticky;
+  height: 60px;
 }
 .components-guide .components-modal__header .components-button {
   align-self: flex-start;
@@ -3001,6 +2999,8 @@ body.is-dragging-components-draggable {
   background-color: rgba(0, 0, 0, 0.35);
   z-index: 100000;
   display: flex;
+  -webkit-backdrop-filter: blur(8px);
+          backdrop-filter: blur(8px);
   animation: edit-post__fade-in-animation 0.2s ease-out 0s;
   animation-fill-mode: forwards;
 }
@@ -3059,13 +3059,13 @@ body.is-dragging-components-draggable {
 }
 .components-modal__header {
   box-sizing: border-box;
-  border-bottom: 1px solid #ddd;
+  border-bottom: 1px solid transparent;
   padding: 0 32px;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  height: 60px;
+  height: 76px;
   width: 100%;
   z-index: 10;
   position: absolute;
@@ -3073,7 +3073,7 @@ body.is-dragging-components-draggable {
   left: 0;
 }
 .components-modal__header .components-modal__header-heading {
-  font-size: 1rem;
+  font-size: 1.2rem;
   font-weight: 600;
 }
 .components-modal__header h1 {
@@ -3084,6 +3084,12 @@ body.is-dragging-components-draggable {
   position: relative;
   left: 8px;
 }
+.components-modal__content.has-scrolled-content:not(.hide-header) .components-modal__header {
+  border-bottom-color: #ddd;
+}
+.components-modal__header + p {
+  margin-top: 0;
+}
 
 .components-modal__header-heading-container {
   align-items: center;
@@ -3104,22 +3110,14 @@ body.is-dragging-components-draggable {
 
 .components-modal__content {
   flex: 1;
-  margin-top: 60px;
-  padding: 0 32px 24px;
+  margin-top: 76px;
+  padding: 0 32px 32px;
   overflow: auto;
 }
-.components-modal__content::before {
-  content: "";
-  display: block;
-  margin-bottom: 24px;
-}
 .components-modal__content.hide-header {
   margin-top: 0;
   padding-top: 24px;
 }
-.components-modal__content.hide-header::before {
-  content: none;
-}
 
 .components-notice {
   display: flex;
@@ -3583,7 +3581,7 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   position: static;
   height: calc(100% - 48px);
   overflow-y: visible;
-  min-width: auto;
+  width: auto;
   border: none;
   outline: none;
   border-top: 1px solid #1e1e1e;
@@ -4521,7 +4519,7 @@ div.components-toolbar > div + div.has-left-divider::before {
   z-index: 1000002;
 }
 .components-tooltip.components-popover .components-popover__content {
-  min-width: 0;
+  min-width: min-content;
 }
 
 .components-tooltip .components-popover__content {

package/build-types/base-control/styles/base-control-styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"base-control-styles.d.ts","sourceRoot":"","sources":["../../../src/base-control/styles/base-control-styles.ts"],"names":[],"mappings":";AAYA,eAAO,MAAM,OAAO;;;yGAGnB,CAAC;AAWF,eAAO,MAAM,WAAW;;;;;yGAMvB,CAAC;AAOF,eAAO,MAAM,WAAW;;;kHAEvB,CAAC;AAWF,eAAO,MAAM,UAAU;;;;;qHAQtB,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;2GAE7B,CAAC"}
+{"version":3,"file":"base-control-styles.d.ts","sourceRoot":"","sources":["../../../src/base-control/styles/base-control-styles.ts"],"names":[],"mappings":";AAYA,eAAO,MAAM,OAAO;;;yGAGnB,CAAC;AAWF,eAAO,MAAM,WAAW;;;;;yGAMvB,CAAC;AAOF,eAAO,MAAM,WAAW;;;kHAOvB,CAAC;AAWF,eAAO,MAAM,UAAU;;;;;qHAQtB,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;2GAE7B,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/border-box-control/border-box-control/component.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAkHtD,QAAA,MAAM,yBAAyB,mFAG9B,CAAC;AAEF,eAAe,yBAAyB,CAAC"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/border-box-control/border-box-control/component.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAmHtD,QAAA,MAAM,yBAAyB,mFAG9B,CAAC;AAEF,eAAe,yBAAyB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/border-box-control/border-box-control-split-controls/component.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAwFnD,QAAA,MAAM,sCAAsC,gFAG3C,CAAC;AACF,eAAe,sCAAsC,CAAC"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/border-box-control/border-box-control-split-controls/component.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAyFnD,QAAA,MAAM,sCAAsC,gFAG3C,CAAC;AACF,eAAe,sCAAsC,CAAC"}

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

@@ -1,4 +1,38 @@
 import type { BorderControlProps } from '../types';
-declare const ConnectedBorderControl: import("../../ui/context").WordPressComponent<"div", BorderControlProps, true>;
-export default ConnectedBorderControl;
+/**
+ * The `BorderControl` brings together internal sub-components which allow users to
+ * set the various properties of a border. The first sub-component, a
+ * `BorderDropdown` contains options representing border color and style. The
+ * border width is controlled via a `UnitControl` and an optional `RangeControl`.
+ *
+ * Border radius is not covered by this control as it may be desired separate to
+ * color, style, and width. For example, the border radius may be absorbed under
+ * a "shape" abstraction.
+ *
+ * ```jsx
+ * import { __experimentalBorderControl as BorderControl } from '@wordpress/components';
+ * import { __ } from '@wordpress/i18n';
+ *
+ * const colors = [
+ * 	{ name: 'Blue 20', color: '#72aee6' },
+ * 	// ...
+ * ];
+ *
+ * const MyBorderControl = () => {
+ * 	const [ border, setBorder ] = useState();
+ * 	const onChange = ( newBorder ) => setBorder( newBorder );
+ *
+ * 	return (
+ * 		<BorderControl
+ * 			colors={ colors }
+ * 			label={ __( 'Border' ) }
+ * 			onChange={ onChange }
+ * 			value={ border }
+ * 		/>
+ * 	);
+ * };
+ * ```
+ */
+export declare const BorderControl: import("../../ui/context").WordPressComponent<"div", BorderControlProps, false>;
+export default BorderControl;
 //# sourceMappingURL=component.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/border-control/border-control/component.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,kBAAkB,EAAc,MAAM,UAAU,CAAC;AAkG/D,QAAA,MAAM,sBAAsB,gFAAmD,CAAC;AAEhF,eAAe,sBAAsB,CAAC"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/border-control/border-control/component.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAE,kBAAkB,EAAc,MAAM,UAAU,CAAC;AAsG/D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,aAAa,iFAGzB,CAAC;AAEF,eAAe,aAAa,CAAC"}

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

@@ -4,13 +4,13 @@ import type { Border, BorderControlProps } from '../types';
 export declare function useBorderControl(props: WordPressComponentProps<BorderControlProps, 'div'>): {
     className: string;
     innerWrapperClassName: string;
+    inputWidth: string | number | undefined;
     onBorderChange: (newBorder?: Border | undefined) => void;
-    onSliderChange: (value: string) => void;
+    onSliderChange: (value?: number | undefined) => void;
     onWidthChange: (newWidth?: string | undefined) => void;
     previousStyleSelection: string | undefined;
     sliderClassName: string;
     value: Border | undefined;
-    widthControlClassName: string;
     widthUnit: string;
     widthValue: number | undefined;
     __next36pxDefaultSize: boolean;

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/border-control/border-control-dropdown/component.tsx"],"names":[],"mappings":"AAyBA,OAAO,KAAK,EAIX,aAAa,EAEb,MAAM,UAAU,CAAC;AA8NlB,QAAA,MAAM,8BAA8B,2EAGnC,CAAC;AAEF,eAAe,8BAA8B,CAAC"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/border-control/border-control-dropdown/component.tsx"],"names":[],"mappings":"AA0BA,OAAO,KAAK,EAIX,aAAa,EAEb,MAAM,UAAU,CAAC;AAkOlB,QAAA,MAAM,8BAA8B,2EAGnC,CAAC;AAEF,eAAe,8BAA8B,CAAC"}

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

@@ -10,7 +10,6 @@ export declare function useBorderControlDropdown(props: WordPressComponentProps<
     onColorChange: (color?: string | undefined) => void;
     onStyleChange: (style?: string | undefined) => void;
     onReset: () => void;
-    popoverClassName: string;
     popoverContentClassName: string;
     popoverControlsClassName: string;
     resetButtonClassName: string;

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

@@ -1 +1 @@
-{"version":3,"file":"hook.d.ts","sourceRoot":"","sources":["../../../src/border-control/border-control-dropdown/hook.ts"],"names":[],"mappings":";AAUA,OAAO,EAAoB,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AAG7E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAE9C,wBAAgB,wBAAwB,CACvC,KAAK,EAAE,uBAAuB,CAAE,aAAa,EAAE,KAAK,CAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmFtD"}
+{"version":3,"file":"hook.d.ts","sourceRoot":"","sources":["../../../src/border-control/border-control-dropdown/hook.ts"],"names":[],"mappings":";AAUA,OAAO,EAAoB,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AAG7E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAE9C,wBAAgB,wBAAwB,CACvC,KAAK,EAAE,uBAAuB,CAAE,aAAa,EAAE,KAAK,CAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8EtD"}

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

@@ -0,0 +1,33 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+/**
+ * Internal dependencies
+ */
+import { BorderControl } from '..';
+declare const meta: ComponentMeta<typeof BorderControl>;
+export default meta;
+export declare const Default: ComponentStory<import("../../ui/context").WordPressComponent<"div", import("../types").BorderControlProps, false>>;
+/**
+ * Render a slider beside the control.
+ */
+export declare const WithSlider: ComponentStory<import("../../ui/context").WordPressComponent<"div", import("../types").BorderControlProps, false>>;
+/**
+ * When rendering with a slider, the `width` prop is useful to customize the width of the number input.
+ */
+export declare const WithSliderCustomWidth: ComponentStory<import("../../ui/context").WordPressComponent<"div", import("../types").BorderControlProps, false>>;
+/**
+ * Restrict the width of the control and prevent it from expanding to take up additional space.
+ * When `true`, the `width` prop will be ignored.
+ */
+export declare const IsCompact: ComponentStory<import("../../ui/context").WordPressComponent<"div", import("../types").BorderControlProps, false>>;
+/**
+ * The `colors` object can contain multiple origins.
+ */
+export declare const WithMultipleOrigins: ComponentStory<import("../../ui/context").WordPressComponent<"div", import("../types").BorderControlProps, false>>;
+/**
+ * Allow the alpha channel to be edited on each color.
+ */
+export declare const WithAlphaEnabled: ComponentStory<import("../../ui/context").WordPressComponent<"div", import("../types").BorderControlProps, false>>;
+//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -1,18 +1,15 @@
-import type { CSSProperties } from 'react';
 import type { Border } from './types';
 export declare const borderControl: import("@emotion/utils").SerializedStyles;
 export declare const innerWrapper: () => import("@emotion/utils").SerializedStyles;
-export declare const wrapperWidth: (width: CSSProperties['width']) => import("@emotion/utils").SerializedStyles;
+export declare const wrapperWidth: import("@emotion/utils").SerializedStyles;
 export declare const wrapperHeight: (__next36pxDefaultSize?: boolean | undefined) => import("@emotion/utils").SerializedStyles;
 export declare const borderControlDropdown: () => import("@emotion/utils").SerializedStyles;
 export declare const colorIndicatorBorder: (border?: Border | undefined) => import("@emotion/utils").SerializedStyles;
 export declare const colorIndicatorWrapper: (border?: Border | undefined, __next36pxDefaultSize?: boolean | undefined) => import("@emotion/utils").SerializedStyles;
-export declare const borderControlPopover: import("@emotion/utils").SerializedStyles;
 export declare const borderControlPopoverControls: import("@emotion/utils").SerializedStyles;
 export declare const borderControlPopoverContent: import("@emotion/utils").SerializedStyles;
 export declare const borderColorIndicator: import("@emotion/utils").SerializedStyles;
 export declare const resetButton: import("@emotion/utils").SerializedStyles;
-export declare const borderWidthControl: () => import("@emotion/utils").SerializedStyles;
 export declare const borderControlStylePicker: import("@emotion/utils").SerializedStyles;
 export declare const borderStyleButton: import("@emotion/utils").SerializedStyles;
 export declare const borderSlider: () => import("@emotion/utils").SerializedStyles;

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/border-control/styles.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAiB3C,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AAUtC,eAAO,MAAM,aAAa,2CAEzB,CAAC;AAEF,eAAO,MAAM,YAAY,iDAwCxB,CAAC;AAEF,eAAO,MAAM,YAAY,UAAY,aAAa,CAAE,OAAO,CAAE,8CAK5D,CAAC;AAMF,eAAO,MAAM,aAAa,4FAIzB,CAAC;AAEF,eAAO,MAAM,qBAAqB,iDAyBjC,CAAC;AAEF,eAAO,MAAM,oBAAoB,4EAUhC,CAAC;AAEF,eAAO,MAAM,qBAAqB,yHAqCjC,CAAC;AAEF,eAAO,MAAM,oBAAoB,2CAMhC,CAAC;AAEF,eAAO,MAAM,4BAA4B,2CAYxC,CAAC;AAEF,eAAO,MAAM,2BAA2B,2CAAQ,CAAC;AACjD,eAAO,MAAM,oBAAoB,2CAAQ,CAAC;AAE1C,eAAO,MAAM,WAAW,2CASvB,CAAC;AAEF,eAAO,MAAM,kBAAkB,iDAe9B,CAAC;AAEF,eAAO,MAAM,wBAAwB,2CAIpC,CAAC;AAEF,eAAO,MAAM,iBAAiB,2CAO7B,CAAC;AAEF,eAAO,MAAM,YAAY,iDASxB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/border-control/styles.ts"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AAUtC,eAAO,MAAM,aAAa,2CAIzB,CAAC;AAEF,eAAO,MAAM,YAAY,iDAQxB,CAAC;AAOF,eAAO,MAAM,YAAY,2CAKxB,CAAC;AAMF,eAAO,MAAM,aAAa,4FAIzB,CAAC;AAEF,eAAO,MAAM,qBAAqB,iDAwBjC,CAAC;AAEF,eAAO,MAAM,oBAAoB,4EAUhC,CAAC;AAEF,eAAO,MAAM,qBAAqB,yHAqCjC,CAAC;AAOF,eAAO,MAAM,4BAA4B,2CAYxC,CAAC;AAEF,eAAO,MAAM,2BAA2B,2CAAQ,CAAC;AACjD,eAAO,MAAM,oBAAoB,2CAAQ,CAAC;AAE1C,eAAO,MAAM,WAAW,2CAWvB,CAAC;AAEF,eAAO,MAAM,wBAAwB,2CAIpC,CAAC;AAEF,eAAO,MAAM,iBAAiB,2CAO7B,CAAC;AAEF,eAAO,MAAM,YAAY,iDASxB,CAAC"}

package/build-types/card/card-divider/hook.d.ts

@@ -261,8 +261,8 @@ export function useCardDivider(props: import('../../ui/context').WordPressCompon
     is?: string | undefined;
     wrapElement?: ((element: import("react").ReactNode) => import("react").ReactNode) | undefined;
     margin?: import("../../ui/utils/space").SpaceInput | undefined;
-    marginStart?: import("../../ui/utils/space").SpaceInput | undefined;
     marginEnd?: import("../../ui/utils/space").SpaceInput | undefined;
+    marginStart?: import("../../ui/utils/space").SpaceInput | undefined;
     orientation?: "horizontal" | "vertical" | undefined;
 };
 //# sourceMappingURL=hook.d.ts.map

package/build-types/color-indicator/index.d.ts

@@ -1,7 +1,18 @@
+/// <reference types="react" />
+import type { ColorIndicatorProps } from './types';
+/**
+ * ColorIndicator is a React component that renders a specific color in a
+ * circle. It's often used to summarize a collection of used colors in a child
+ * component.
+ *
+ * ```jsx
+ * import { ColorIndicator } from '@wordpress/components';
+ *
+ * const MyColorIndicator = () => <ColorIndicator colorValue="#0073aa" />;
+ * ```
+ */
+export declare const ColorIndicator: import("react").ForwardRefExoticComponent<Pick<ColorIndicatorProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof import("react").HTMLAttributes<HTMLSpanElement>> & {
+    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+}, "children" | "as" | "colorValue">, "slot" | "style" | "title" | "className" | "color" | "id" | "lang" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "colorValue"> & import("react").RefAttributes<HTMLSpanElement>>;
 export default ColorIndicator;
-declare function ColorIndicator({ className, colorValue, ...props }: {
-    [x: string]: any;
-    className: any;
-    colorValue: any;
-}): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/build-types/color-indicator/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/color-indicator/index.js"],"names":[],"mappings":";AAOA;;;;gBAMC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/color-indicator/index.tsx"],"names":[],"mappings":";AAeA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAkBnD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,cAAc;;+kJAA0C,CAAC;AAEtE,eAAe,cAAc,CAAC"}

package/build-types/color-indicator/stories/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+/**
+ * Internal dependencies
+ */
+import ColorIndicator from '..';
+declare const meta: ComponentMeta<typeof ColorIndicator>;
+export default meta;
+export declare const Default: ComponentStory<typeof ColorIndicator>;
+//# sourceMappingURL=index.d.ts.map