@wordpress/components 19.2.3 → 19.4.1-next.f435e9e01b.0

package/build-types/utils/config-values.d.ts

@@ -8,7 +8,7 @@ declare namespace _default {
     export const borderWidth: string;
     export const borderWidthFocus: string;
     export const borderWidthTab: string;
-    export const spinnerSize: string;
+    export const spinnerSize: number;
     export const fontSize: string;
     export const fontSizeH1: string;
     export const fontSizeH2: string;
@@ -46,10 +46,6 @@ declare namespace _default {
     import toggleGroupControlBackgroundColor = controlBackgroundColor;
     export { toggleGroupControlBackgroundColor };
     export const toggleGroupControlBorderColor: string;
-    import toggleGroupControlBackdropBackgroundColor = controlSurfaceColor;
-    export { toggleGroupControlBackdropBackgroundColor };
-    export const toggleGroupControlBackdropBorderColor: string;
-    export const toggleGroupControlBackdropBoxShadow: string;
     import toggleGroupControlButtonColorActive = controlBackgroundColor;
     export { toggleGroupControlButtonColorActive };
     export const controlSurfaceColor: string;

package/build-types/utils/config-values.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"config-values.d.ts","sourceRoot":"","sources":["../../src/utils/config-values.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,wCAAiC;AADjC,qCAA8B"}
+{"version":3,"file":"config-values.d.ts","sourceRoot":"","sources":["../../src/utils/config-values.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,wCAAiC;AADjC,qCAA8B"}

package/build-types/utils/hooks/use-combined-ref.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-combined-ref.d.ts","sourceRoot":"","sources":["../../../src/utils/hooks/use-combined-ref.ts"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAE3D,aAAK,GAAG,CAAE,CAAC,IAAK,gBAAgB,CAAE,CAAC,GAAG,IAAI,CAAE,GAAG,WAAW,CAAE,CAAC,GAAG,IAAI,CAAE,CAAC;AAEvE,wBAAgB,cAAc,CAAE,CAAC,SAAS,WAAW,EAAI,GAAG,IAAI,EAAE,GAAG,CAAE,CAAC,CAAE,EAAE,0BAgB3E"}
+{"version":3,"file":"use-combined-ref.d.ts","sourceRoot":"","sources":["../../../src/utils/hooks/use-combined-ref.ts"],"names":[],"mappings":"AAIA;;GAEG;AACH,OAAO,KAAK,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAE3D,aAAK,GAAG,CAAE,CAAC,IAAK,gBAAgB,CAAE,CAAC,GAAG,IAAI,CAAE,GAAG,WAAW,CAAE,CAAC,GAAG,IAAI,CAAE,CAAC;AAEvE,wBAAgB,cAAc,CAAE,CAAC,SAAS,WAAW,EAAI,GAAG,IAAI,EAAE,GAAG,CAAE,CAAC,CAAE,EAAE,0BAgB3E"}

package/build-types/utils/hooks/use-latest-ref.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-latest-ref.d.ts","sourceRoot":"","sources":["../../../src/utils/hooks/use-latest-ref.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAQvC;;;;;;;;GAQG;AACH,wBAAgB,YAAY,CAAE,CAAC,EAAI,KAAK,EAAE,CAAC,GAAI,SAAS,CAAE,CAAC,CAAE,CAQ5D"}
+{"version":3,"file":"use-latest-ref.d.ts","sourceRoot":"","sources":["../../../src/utils/hooks/use-latest-ref.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAQvC;;;;;;;;GAQG;AACH,wBAAgB,YAAY,CAAE,CAAC,EAAI,KAAK,EAAE,CAAC,GAAI,SAAS,CAAE,CAAC,CAAE,CAQ5D"}

package/build-types/v-stack/hook.d.ts

@@ -15,50 +15,50 @@ export function useVStack(props: import('../ui/context').WordPressComponentProps
     color?: string | undefined;
     id?: string | undefined;
     lang?: string | undefined;
-    role?: string | undefined;
+    role?: import("react").AriaRole | undefined;
     tabIndex?: number | undefined;
     'aria-activedescendant'?: string | undefined;
-    'aria-atomic'?: boolean | "true" | "false" | undefined;
-    'aria-autocomplete'?: "none" | "list" | "both" | "inline" | undefined;
-    'aria-busy'?: boolean | "true" | "false" | undefined;
+    'aria-atomic'?: (boolean | "true" | "false") | undefined;
+    'aria-autocomplete'?: "list" | "none" | "both" | "inline" | undefined;
+    'aria-busy'?: (boolean | "true" | "false") | undefined;
     'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;
     'aria-colcount'?: number | undefined;
     'aria-colindex'?: number | undefined;
     'aria-colspan'?: number | undefined;
     'aria-controls'?: string | undefined;
-    'aria-current'?: boolean | "time" | "true" | "false" | "step" | "page" | "location" | "date" | undefined;
+    'aria-current'?: boolean | "time" | "true" | "false" | "step" | "date" | "page" | "location" | undefined;
     'aria-describedby'?: string | undefined;
     'aria-details'?: string | undefined;
-    'aria-disabled'?: boolean | "true" | "false" | undefined;
+    'aria-disabled'?: (boolean | "true" | "false") | undefined;
     'aria-dropeffect'?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
     'aria-errormessage'?: string | undefined;
-    'aria-expanded'?: boolean | "true" | "false" | undefined;
+    'aria-expanded'?: (boolean | "true" | "false") | undefined;
     'aria-flowto'?: string | undefined;
-    'aria-grabbed'?: boolean | "true" | "false" | undefined;
-    'aria-haspopup'?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
-    'aria-hidden'?: boolean | "true" | "false" | undefined;
+    'aria-grabbed'?: (boolean | "true" | "false") | undefined;
+    'aria-haspopup'?: boolean | "dialog" | "menu" | "grid" | "listbox" | "tree" | "true" | "false" | undefined;
+    'aria-hidden'?: (boolean | "true" | "false") | undefined;
     'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
     'aria-keyshortcuts'?: string | undefined;
     'aria-label'?: string | undefined;
     'aria-labelledby'?: string | undefined;
     'aria-level'?: number | undefined;
     'aria-live'?: "off" | "assertive" | "polite" | undefined;
-    'aria-modal'?: boolean | "true" | "false" | undefined;
-    'aria-multiline'?: boolean | "true" | "false" | undefined;
-    'aria-multiselectable'?: boolean | "true" | "false" | undefined;
+    'aria-modal'?: (boolean | "true" | "false") | undefined;
+    'aria-multiline'?: (boolean | "true" | "false") | undefined;
+    'aria-multiselectable'?: (boolean | "true" | "false") | undefined;
     'aria-orientation'?: "horizontal" | "vertical" | undefined;
     'aria-owns'?: string | undefined;
     'aria-placeholder'?: string | undefined;
     'aria-posinset'?: number | undefined;
     'aria-pressed'?: boolean | "true" | "false" | "mixed" | undefined;
-    'aria-readonly'?: boolean | "true" | "false" | undefined;
+    'aria-readonly'?: (boolean | "true" | "false") | undefined;
     'aria-relevant'?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
-    'aria-required'?: boolean | "true" | "false" | undefined;
+    'aria-required'?: (boolean | "true" | "false") | undefined;
     'aria-roledescription'?: string | undefined;
     'aria-rowcount'?: number | undefined;
     'aria-rowindex'?: number | undefined;
     'aria-rowspan'?: number | undefined;
-    'aria-selected'?: boolean | "true" | "false" | undefined;
+    'aria-selected'?: (boolean | "true" | "false") | undefined;
     'aria-setsize'?: number | undefined;
     'aria-sort'?: "none" | "ascending" | "descending" | "other" | undefined;
     'aria-valuemax'?: number | undefined;

package/build-types/v-stack/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/v-stack/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C;;GAEG;AACH,OAAO,KAAK,EAAE,eAAe,EAAE,KAAK,IAAI,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE9E,oBAAY,KAAK,GAAG,WAAW,GAAG;IACjC,SAAS,CAAC,EAAE,eAAe,GAAG,aAAa,CAAE,YAAY,CAAE,CAAC;IAC5D,OAAO,CAAC,EAAE,aAAa,CAAE,OAAO,CAAE,CAAC;CACnC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/v-stack/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C;;GAEG;AACH,OAAO,KAAK,EAAE,eAAe,EAAE,KAAK,IAAI,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE9E,oBAAY,KAAK,GAAG,WAAW,GAAG;IACjC,SAAS,CAAC,EAAE,eAAe,GAAG,aAAa,CAAE,YAAY,CAAE,CAAC;IAC5D,OAAO,CAAC,EAAE,aAAa,CAAE,OAAO,CAAE,CAAC;CACnC,CAAC"}

package/build-types/z-stack/component.d.ts

@@ -16,7 +16,7 @@ export interface ZStackProps {
      */
     isReversed?: boolean;
     /**
-     * The amount of offset between each child element.
+     * 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.
      *
      * @default 0
      */

package/build-types/z-stack/component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../src/z-stack/component.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAAO,SAAS,EAAE,MAAM,OAAO,CAAC;AAe5C,MAAM,WAAW,WAAW;IAC3B;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACpB;;AA+CD,wBAAkD"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../src/z-stack/component.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAO,SAAS,EAAE,MAAM,OAAO,CAAC;AAe5C,MAAM,WAAW,WAAW;IAC3B;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACpB;;AA+CD,wBAAkD"}

package/build-types/z-stack/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/z-stack/styles.ts"],"names":[],"mappings":";AAMA,eAAO,MAAM,UAAU;;;yGAGtB,CAAC;AAEF,eAAO,MAAM,eAAe;;;;eAChB,OAAO;kBACJ,MAAM;YACZ,MAAM;yGAWd,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/z-stack/styles.ts"],"names":[],"mappings":";AAWA,eAAO,MAAM,UAAU;;;yGAGtB,CAAC;AAEF,eAAO,MAAM,eAAe;;;;eAChB,OAAO;kBACJ,MAAM;YACZ,MAAM;yGAWd,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "19.2.3",
+	"version": "19.4.1-next.f435e9e01b.0",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -30,25 +30,26 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@emotion/cache": "^11.4.0",
-		"@emotion/css": "^11.1.3",
-		"@emotion/react": "^11.4.1",
-		"@emotion/styled": "^11.3.0",
+		"@emotion/cache": "^11.7.1",
+		"@emotion/css": "^11.7.1",
+		"@emotion/react": "^11.7.1",
+		"@emotion/serialize": "^1.0.2",
+		"@emotion/styled": "^11.6.0",
 		"@emotion/utils": "1.0.0",
-		"@wordpress/a11y": "^3.2.4",
-		"@wordpress/compose": "^5.0.7",
-		"@wordpress/date": "^4.2.3",
-		"@wordpress/deprecated": "^3.2.3",
-		"@wordpress/dom": "^3.2.7",
-		"@wordpress/element": "^4.0.4",
-		"@wordpress/hooks": "^3.2.2",
-		"@wordpress/i18n": "^4.2.4",
-		"@wordpress/icons": "^6.1.1",
-		"@wordpress/is-shallow-equal": "^4.2.1",
-		"@wordpress/keycodes": "^3.2.4",
-		"@wordpress/primitives": "^3.0.4",
-		"@wordpress/rich-text": "^5.0.8",
-		"@wordpress/warning": "^2.2.2",
+		"@wordpress/a11y": "^3.3.1-next.f435e9e01b.0",
+		"@wordpress/compose": "^5.1.1-next.f435e9e01b.0",
+		"@wordpress/date": "^4.3.1-next.f435e9e01b.0",
+		"@wordpress/deprecated": "^3.3.1-next.f435e9e01b.0",
+		"@wordpress/dom": "^3.3.1-next.f435e9e01b.0",
+		"@wordpress/element": "^4.1.1-next.f435e9e01b.0",
+		"@wordpress/hooks": "^3.3.1-next.f435e9e01b.0",
+		"@wordpress/i18n": "^4.3.1-next.f435e9e01b.0",
+		"@wordpress/icons": "^6.3.1-next.f435e9e01b.0",
+		"@wordpress/is-shallow-equal": "^4.3.1-next.f435e9e01b.0",
+		"@wordpress/keycodes": "^3.3.1-next.f435e9e01b.0",
+		"@wordpress/primitives": "^3.1.1-next.f435e9e01b.0",
+		"@wordpress/rich-text": "^5.1.2-next.f435e9e01b.0",
+		"@wordpress/warning": "^2.3.1-next.f435e9e01b.0",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
 		"dom-scroll-into-view": "^1.2.1",
@@ -65,14 +66,14 @@
 		"react-resize-aware": "^3.1.0",
 		"react-use-gesture": "^9.0.0",
 		"reakit": "^1.3.8",
-		"rememo": "^3.0.0",
 		"uuid": "^8.3.0"
 	},
 	"peerDependencies": {
-		"reakit-utils": "^0.15.1"
+		"react": "^17.0.0",
+		"react-dom": "^17.0.0"
 	},
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "1246a52b9fdfecf592a9fa1d33a2804a6cc2d257"
+	"gitHead": "14b2846015dfb1b440ce93accdd03842ebe5f1cd"
 }

package/src/alignment-matrix-control/stories/index.js

@@ -20,7 +20,7 @@ export default {
 	title: 'Components/AlignmentMatrixControl',
 	component: AlignmentMatrixControl,
 	parameters: {
-		knobs: { disabled: false },
+		knobs: { disable: false },
 	},
 };
 

package/src/angle-picker-control/index.js

@@ -42,12 +42,14 @@ export default function AnglePickerControl( {
 					max={ 360 }
 					min={ 0 }
 					onChange={ handleOnNumberChange }
+					size="__unstable-large"
 					step="1"
 					value={ value }
 					hideHTMLArrows
 					suffix={
 						<Spacer
 							as={ Text }
+							marginBottom={ 0 }
 							marginRight={ space( 3 ) }
 							style={ {
 								color: 'var( --wp-admin-theme-color )',

package/src/base-control/index.js

@@ -12,6 +12,7 @@ import {
 	StyledField,
 	StyledLabel,
 	StyledHelp,
+	StyledVisualLabel,
 } from './styles/base-control-styles';
 
 /**
@@ -95,8 +96,16 @@ function BaseControl( {
  * @return {JSX.Element} Element
  */
 BaseControl.VisualLabel = ( { className, children } ) => {
-	className = classnames( 'components-base-control__label', className );
-	return <span className={ className }>{ children }</span>;
+	return (
+		<StyledVisualLabel
+			className={ classnames(
+				'components-base-control__label',
+				className
+			) }
+		>
+			{ children }
+		</StyledVisualLabel>
+	);
 };
 
 export default BaseControl;

package/src/base-control/stories/index.js

@@ -13,7 +13,7 @@ export default {
 	title: 'Components/BaseControl',
 	component: BaseControl,
 	parameters: {
-		knobs: { disabled: false },
+		knobs: { disable: false },
 	},
 };
 

package/src/base-control/styles/base-control-styles.js

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import styled from '@emotion/styled';
+import { css } from '@emotion/react';
 
 /**
  * Internal dependencies
@@ -22,13 +23,21 @@ export const StyledField = styled.div`
 	}
 `;
 
-export const StyledLabel = styled.label`
+const labelStyles = css`
 	display: inline-block;
 	margin-bottom: ${ space( 2 ) };
 `;
 
+export const StyledLabel = styled.label`
+	${ labelStyles }
+`;
+
 export const StyledHelp = styled.p`
 	font-size: ${ font( 'helpText.fontSize' ) };
 	font-style: normal;
 	color: ${ COLORS.mediumGray.text };
 `;
+
+export const StyledVisualLabel = styled.span`
+	${ labelStyles }
+`;

package/src/base-field/hook.js

@@ -50,7 +50,7 @@ export function useBaseField( props ) {
 				isInline && styles.inline,
 				className
 			),
-		[ className, controlGroupStyles, hasError, isInline, isSubtle ]
+		[ className, controlGroupStyles, cx, hasError, isInline, isSubtle ]
 	);
 
 	return {

package/src/box-control/styles/box-control-styles.js

@@ -19,7 +19,7 @@ export const Root = styled.div`
 
 export const Header = styled( Flex )`
 	color: ${ COLORS.ui.label };
-	padding-bottom: 8px;
+	margin-bottom: 8px;
 `;
 
 export const HeaderControlWrapper = styled( Flex )`

package/src/button/deprecated.js

@@ -14,6 +14,7 @@ function IconButton( { labelPosition, size, tooltip, label, ...props }, ref ) {
 	deprecated( 'wp.components.IconButton', {
 		since: '5.4',
 		alternative: 'wp.components.Button',
+		version: '6.2',
 	} );
 
 	return (

package/src/button/index.js

@@ -48,6 +48,7 @@ function useDeprecatedProps( {
 		deprecated( 'Button isDefault prop', {
 			since: '5.4',
 			alternative: 'variant="secondary"',
+			version: '6.2',
 		} );
 
 		computedVariant ??= 'secondary';

package/src/button/index.native.js

@@ -93,15 +93,29 @@ export function Button( props ) {
 		label,
 		shortcut,
 		tooltipPosition,
+		isActiveStyle,
+		customContainerStyles,
 	} = props;
 	const preferredColorScheme = usePreferredColorScheme();
 
 	const isDisabled = ariaDisabled || disabled;
 
+	const containerStyle = [
+		styles.container,
+		customContainerStyles && { ...customContainerStyles },
+	];
+
 	const buttonViewStyle = {
 		opacity: isDisabled ? 0.3 : 1,
 		...( fixedRatio && styles.fixedRatio ),
 		...( isPressed ? styles.buttonActive : styles.buttonInactive ),
+		...( isPressed &&
+			isActiveStyle?.borderRadius && {
+				borderRadius: isActiveStyle.borderRadius,
+			} ),
+		...( isActiveStyle?.backgroundColor && {
+			backgroundColor: isActiveStyle.backgroundColor,
+		} ),
 	};
 
 	const states = [];
@@ -159,7 +173,7 @@ export function Button( props ) {
 			accessibilityHint={ hint }
 			onPress={ onClick }
 			onLongPress={ onLongPress }
-			style={ styles.container }
+			style={ containerStyle }
 			disabled={ isDisabled }
 			testID={ testID }
 		>

package/src/button/stories/index.js

@@ -24,7 +24,7 @@ export default {
 	title: 'Components/Button',
 	component: Button,
 	parameters: {
-		knobs: { disabled: false },
+		knobs: { disable: false },
 	},
 };
 

package/src/button/style.scss

@@ -201,6 +201,20 @@
 		}
 	}
 
+	&.is-destructive.is-tertiary {
+		box-shadow: none;
+
+		&:hover:not(:disabled) {
+			box-shadow: inset 0 0 0 $border-width $alert-red;
+			color: $alert-red;
+		}
+
+		&:focus:not(:disabled) {
+			box-shadow: inset 0 0 0 1px $white, 0 0 0 var(--wp-admin-border-width-focus) $alert-red;
+			color: $alert-red;
+		}
+	}
+
 
 	/**
 	 * Link buttons.

package/src/card/card/README.md

@@ -6,14 +6,14 @@
 
 `Card` also provides a convenient set of [sub-components](#sub-components) such as `CardBody`, `CardHeader`, `CardFooter`, and more (see below).
 
-```jsx live
+```jsx
 import {
 	Card,
 	CardHeader,
 	CardBody,
 	CardFooter,
-	Text,
-	Heading,
+	__experimentalText as Text,
+	__experimentalHeading as Heading,
 } from '@wordpress/components';
 
 function Example() {

package/src/card/card/component.js

@@ -38,7 +38,7 @@ function Card( props, forwardedRef ) {
 
 	const elevationClassName = useMemo(
 		() => cx( css( { borderRadius: elevationBorderRadius } ) ),
-		[ elevationBorderRadius ]
+		[ cx, elevationBorderRadius ]
 	);
 
 	const contextProviderValue = useMemo( () => {

package/src/card/card/hook.js

@@ -61,7 +61,7 @@ export function useCard( props ) {
 			isRounded && styles.rounded,
 			className
 		);
-	}, [ className, isBorderless, isRounded ] );
+	}, [ className, cx, isBorderless, isRounded ] );
 
 	const surfaceProps = useSurface( { ...otherProps, className: classes } );
 

package/src/card/card-body/hook.js

@@ -35,7 +35,7 @@ export function useCardBody( props ) {
 				'components-card__body',
 				className
 			),
-		[ className, isShady, size ]
+		[ className, cx, isShady, size ]
 	);
 
 	return {

package/src/card/card-divider/hook.js

@@ -30,7 +30,7 @@ export function useCardDivider( props ) {
 				'components-card__divider',
 				className
 			),
-		[ className ]
+		[ className, cx ]
 	);
 
 	return {

package/src/card/card-footer/hook.js

@@ -38,7 +38,7 @@ export function useCardFooter( props ) {
 				'components-card__footer',
 				className
 			),
-		[ className, isBorderless, isShady, size ]
+		[ className, cx, isBorderless, isShady, size ]
 	);
 
 	return {

package/src/card/card-header/hook.js

@@ -37,7 +37,7 @@ export function useCardHeader( props ) {
 				'components-card__header',
 				className
 			),
-		[ className, isBorderless, isShady, size ]
+		[ className, cx, isBorderless, isShady, size ]
 	);
 
 	return {

package/src/card/card-media/hook.js

@@ -27,7 +27,7 @@ export function useCardMedia( props ) {
 				'components-card__media',
 				className
 			),
-		[ className ]
+		[ className, cx ]
 	);
 
 	return {

package/src/card/stories/index.js

@@ -22,7 +22,7 @@ export default {
 	component: Card,
 	title: 'Components/Card',
 	parameters: {
-		knobs: { disabled: false },
+		knobs: { disable: false },
 	},
 };
 

package/src/card/test/__snapshots__/index.js.snap

@@ -269,10 +269,10 @@ Object {
 }
 
 .emotion-10 {
-  border-color: rgba(0, 0, 0, 0.1);
-  border-width: 0 0 1px 0;
-  height: 0;
+  border: 0;
   margin: 0;
+  border-bottom: 1px solid currentColor;
+  height: 0;
   width: auto;
   box-sizing: border-box;
   display: block;
@@ -525,10 +525,10 @@ Object {
 }
 
 .emotion-10 {
-  border-color: rgba(0, 0, 0, 0.1);
-  border-width: 0 0 1px 0;
-  height: 0;
+  border: 0;
   margin: 0;
+  border-bottom: 1px solid currentColor;
+  height: 0;
   width: auto;
   box-sizing: border-box;
   display: block;

package/src/card/types.ts

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
 import type { CSSProperties } from 'react';
 
 /**

package/src/checkbox-control/index.js

@@ -27,7 +27,7 @@ export default function CheckboxControl( {
 	if ( heading ) {
 		deprecated( '`heading` prop in `CheckboxControl`', {
 			alternative: 'a separate element to implement a heading',
-			plugin: 'Gutenberg',
+			since: '5.8',
 		} );
 	}
 

package/src/checkbox-control/stories/index.js

@@ -17,7 +17,7 @@ export default {
 	title: 'Components/CheckboxControl',
 	component: CheckboxControl,
 	parameters: {
-		knobs: { disabled: false },
+		knobs: { disable: false },
 	},
 };
 

package/src/circular-option-picker/index.js

@@ -1,3 +1,4 @@
+// @ts-nocheck
 /**
  * External dependencies
  */

package/src/clipboard-button/index.js

@@ -26,8 +26,7 @@ export default function ClipboardButton( {
 	...buttonProps
 } ) {
 	deprecated( 'wp.components.ClipboardButton', {
-		since: '10.3',
-		plugin: 'Gutenberg',
+		since: '5.8',
 		alternative: 'wp.compose.useCopyToClipboard',
 	} );
 

package/src/color-indicator/README.md

@@ -1,5 +1,15 @@
 # ColorIndicator
 
+ColorIndicator is a React component that renders a specific color in a squared box. It's often used to summarize a collection of used colors in a child component.
+
+### Single component
+
+![simple color indicator](https://user-images.githubusercontent.com/881729/147558034-cba09db5-2f06-458b-a7b1-fd2f2ffb982a.png)
+
+### Used in sidebar
+
+![multiple color indicator](https://user-images.githubusercontent.com/881729/147559177-69ce52e1-30dc-4f24-8483-ca2a580f434f.png)
+
 ## Usage
 
 ```jsx
@@ -7,3 +17,21 @@ import { ColorIndicator } from '@wordpress/components';
 
 const MyColorIndicator = () => <ColorIndicator colorValue="#0073aa" />;
 ```
+
+## Props
+
+The component accepts the following props:
+
+### colorValue
+
+The color of the indicator. Any value from the [`background`](https://developer.mozilla.org/en-US/docs/Web/CSS/background) property is supported.
+
+-   Type: `string`
+-   Required: Yes
+
+### className
+
+Extra classes for the used `<span>` element. By default only `component-color-indicator` is added.
+
+-   Type: `string`
+-   Required: No

package/src/color-indicator/index.js

@@ -1,3 +1,5 @@
+// @ts-nocheck
+
 /**
  * External dependencies
  */

package/src/color-indicator/stories/index.js

@@ -12,7 +12,7 @@ export default {
 	title: 'Components/ColorIndicator',
 	component: ColorIndicator,
 	parameters: {
-		knobs: { disabled: false },
+		knobs: { disable: false },
 	},
 };