@wordpress/components 20.0.2-next.957ca95e4c.0 → 21.0.0

package/build-types/visually-hidden/component.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { VisuallyHiddenProps } from './types';
 /**
  * `VisuallyHidden` is a component used to render text intended to be visually
@@ -15,6 +16,6 @@ import type { VisuallyHiddenProps } from './types';
  * }
  * ```
  */
-export declare const VisuallyHidden: import("../ui/context").WordPressComponent<"div", VisuallyHiddenProps, true>;
+export declare const VisuallyHidden: import("../ui/context").WordPressComponent<"div", VisuallyHiddenProps & import("react").RefAttributes<any>, true>;
 export default VisuallyHidden;
 //# sourceMappingURL=component.d.ts.map

package/build-types/visually-hidden/component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../src/visually-hidden/component.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAmBnD;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,cAAc,8EAG1B,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../src/visually-hidden/component.tsx"],"names":[],"mappings":";AAeA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAmBnD;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,cAAc,mHAG1B,CAAC;AAEF,eAAe,cAAc,CAAC"}

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { ZStackProps } from './types';
 /**
  * `ZStack` allows you to stack things along the Z-axis.
@@ -16,6 +17,6 @@ import type { ZStackProps } from './types';
  * }
  * ```
  */
-export declare const ZStack: import("../ui/context").WordPressComponent<"div", ZStackProps, true>;
+export declare const ZStack: import("../ui/context").WordPressComponent<"div", ZStackProps & import("react").RefAttributes<any>, true>;
 export default ZStack;
 //# sourceMappingURL=component.d.ts.map

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":"AAgBA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAgD3C;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,MAAM,sEAAgD,CAAC;AAEpE,eAAe,MAAM,CAAC"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../src/z-stack/component.tsx"],"names":[],"mappings":";AAgBA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAgD3C;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,MAAM,2GAAgD,CAAC;AAEpE,eAAe,MAAM,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "20.0.2-next.957ca95e4c.0",
+	"version": "21.0.0",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -38,21 +38,21 @@
 		"@emotion/utils": "^1.0.0",
 		"@floating-ui/react-dom": "^1.0.0",
 		"@use-gesture/react": "^10.2.6",
-		"@wordpress/a11y": "^3.16.1-next.957ca95e4c.0",
-		"@wordpress/compose": "^5.14.1-next.957ca95e4c.0",
-		"@wordpress/date": "^4.16.1-next.957ca95e4c.0",
-		"@wordpress/deprecated": "^3.16.1-next.957ca95e4c.0",
-		"@wordpress/dom": "^3.16.1-next.957ca95e4c.0",
-		"@wordpress/element": "^4.14.1-next.957ca95e4c.0",
-		"@wordpress/escape-html": "^2.16.1-next.957ca95e4c.0",
-		"@wordpress/hooks": "^3.16.1-next.957ca95e4c.0",
-		"@wordpress/i18n": "^4.16.1-next.957ca95e4c.0",
-		"@wordpress/icons": "^9.7.1-next.957ca95e4c.0",
-		"@wordpress/is-shallow-equal": "^4.16.1-next.957ca95e4c.0",
-		"@wordpress/keycodes": "^3.16.1-next.957ca95e4c.0",
-		"@wordpress/primitives": "^3.14.1-next.957ca95e4c.0",
-		"@wordpress/rich-text": "^5.14.1-next.957ca95e4c.0",
-		"@wordpress/warning": "^2.16.1-next.957ca95e4c.0",
+		"@wordpress/a11y": "^3.17.0",
+		"@wordpress/compose": "^5.15.0",
+		"@wordpress/date": "^4.17.0",
+		"@wordpress/deprecated": "^3.17.0",
+		"@wordpress/dom": "^3.17.0",
+		"@wordpress/element": "^4.15.0",
+		"@wordpress/escape-html": "^2.17.0",
+		"@wordpress/hooks": "^3.17.0",
+		"@wordpress/i18n": "^4.17.0",
+		"@wordpress/icons": "^9.8.0",
+		"@wordpress/is-shallow-equal": "^4.17.0",
+		"@wordpress/keycodes": "^3.17.0",
+		"@wordpress/primitives": "^3.15.0",
+		"@wordpress/rich-text": "^5.15.0",
+		"@wordpress/warning": "^2.17.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -78,5 +78,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "272a74bbbaab10ee24424eafe9578e705fbfbbb4"
+	"gitHead": "0d732d4b184adcb28cc83087603e81b764390d4b"
 }

package/src/alignment-matrix-control/styles/alignment-matrix-control-styles.js

@@ -45,7 +45,7 @@ export const Row = styled.div`
 
 const pointActive = ( { isActive } ) => {
 	const boxShadow = isActive ? `0 0 0 2px ${ COLORS.gray[ 900 ] }` : null;
-	const pointColor = isActive ? COLORS.gray[ 900 ] : COLORS.lightGray[ 800 ];
+	const pointColor = isActive ? COLORS.gray[ 900 ] : COLORS.gray[ 400 ];
 	const pointColorHover = isActive ? COLORS.gray[ 900 ] : COLORS.ui.theme;
 
 	return css`

package/src/angle-picker-control/README.md

@@ -11,7 +11,7 @@ import { AnglePickerControl } from '@wordpress/components';
 
 const MyAnglePicker = () => {
 	const [ angle, setAngle ] = useState();
-	return <AnglePickerControl value={ angle } onChange={ setAngle } />;
+	return <AnglePickerControl value={ angle } onChange={ setAngle } __nextHasNoMarginBottom />;
 };
 ```
 
@@ -39,3 +39,11 @@ A function that receives the new value of the input.
 
 -   Type: `function`
 -   Required: Yes
+
+### __nextHasNoMarginBottom
+
+Start opting into the new margin-free styles that will become the default in a future version, currently scheduled to be WordPress 6.4. (The prop can be safely removed once this happens.)
+
+-   Type: `boolean`
+-   Required: No
+-   Default: `false`

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

@@ -6,6 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
+import deprecated from '@wordpress/deprecated';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -27,6 +28,17 @@ export default function AnglePickerControl( {
 	onChange,
 	value,
 } ) {
+	if ( ! __nextHasNoMarginBottom ) {
+		deprecated(
+			'Bottom margin styles for wp.components.AnglePickerControl',
+			{
+				since: '6.1',
+				version: '6.4',
+				hint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version.',
+			}
+		);
+	}
+
 	const handleOnNumberChange = ( unprocessedValue ) => {
 		const inputValue =
 			unprocessedValue !== '' ? parseInt( unprocessedValue, 10 ) : 0;

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

@@ -11,9 +11,6 @@ import AnglePickerControl from '../';
 export default {
 	title: 'Components/AnglePickerControl',
 	component: AnglePickerControl,
-	argTypes: {
-		__nextHasNoMarginBottom: { control: { type: 'boolean' } },
-	},
 };
 
 const AnglePickerWithState = ( args ) => {
@@ -24,3 +21,6 @@ const AnglePickerWithState = ( args ) => {
 };
 
 export const Default = AnglePickerWithState.bind( {} );
+Default.args = {
+	__nextHasNoMarginBottom: true,
+};

package/src/base-field/test/__snapshots__/index.js.snap

@@ -25,7 +25,7 @@ Snapshot Diff:
 - Received styles
 + Base styles
 
-@@ -14,18 +14,17 @@
+@@ -14,19 +14,18 @@
       "background": "#fff",
       "border": "1px solid",
       "border-color": "#757575",
@@ -36,6 +36,7 @@ Snapshot Diff:
       "flex": "1",
       "flex-direction": "row",
       "font-size": "13px",
+      "gap": "calc(4px * 2)",
       "justify-content": "space-between",
       "outline": "none",
       "padding": "0 8px",
@@ -80,6 +81,7 @@ exports[`base field should render correctly 1`] = `
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
+  gap: calc(4px * 2);
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   justify-content: space-between;
@@ -105,10 +107,6 @@ exports[`base field should render correctly 1`] = `
   width: 100%;
 }
 
-.emotion-0>*+*:not( marquee ) {
-  margin-left: calc(4px * 2);
-}
-
 .emotion-0>* {
   min-width: 0;
 }

package/src/border-box-control/border-box-control/component.tsx

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import type { ComponentProps } from 'react';
+
 /**
  * WordPress dependencies
  */
@@ -64,12 +69,14 @@ const BorderBoxControl = (
 	} = useBorderBoxControl( props );
 	const containerRef = useRef();
 	const mergedRef = useMergeRefs( [ containerRef, forwardedRef ] );
-	const popoverProps = popoverPlacement
+	const popoverProps: ComponentProps<
+		typeof BorderControl
+	>[ '__unstablePopoverProps' ] = popoverPlacement
 		? {
 				placement: popoverPlacement,
 				offset: popoverOffset,
 				anchorRef: containerRef,
-				__unstableShift: true,
+				shift: true,
 		  }
 		: undefined;
 

package/src/border-box-control/border-box-control-split-controls/component.tsx

@@ -1,3 +1,7 @@
+/**
+ * External dependencies
+ */
+import type { ComponentProps } from 'react';
 /**
  * WordPress dependencies
  */
@@ -38,12 +42,14 @@ const BorderBoxControlSplitControls = (
 	} = useBorderBoxControlSplitControls( props );
 	const containerRef = useRef();
 	const mergedRef = useMergeRefs( [ containerRef, forwardedRef ] );
-	const popoverProps = popoverPlacement
+	const popoverProps: ComponentProps<
+		typeof BorderControl
+	>[ '__unstablePopoverProps' ] = popoverPlacement
 		? {
 				placement: popoverPlacement,
 				offset: popoverOffset,
 				anchorRef: containerRef,
-				__unstableShift: true,
+				shift: true,
 		  }
 		: undefined;
 

package/src/border-box-control/types.ts

@@ -2,6 +2,7 @@
  * Internal dependencies
  */
 import type { Border, ColorProps, LabelProps } from '../border-control/types';
+import type { PopoverProps } from '../popover/types';
 
 export type Borders = {
 	top?: Border;
@@ -29,11 +30,11 @@ export type BorderBoxControlProps = ColorProps &
 		/**
 		 * The position of the color popovers compared to the control wrapper.
 		 */
-		popoverPlacement?: string;
+		popoverPlacement?: PopoverProps[ 'placement' ];
 		/**
 		 * The space between the popover and the control wrapper.
 		 */
-		popoverOffset?: number;
+		popoverOffset?: PopoverProps[ 'offset' ];
 		/**
 		 * An object representing the current border configuration.
 		 *
@@ -103,11 +104,11 @@ export type SplitControlsProps = ColorProps & {
 	/**
 	 * The position of the color popovers compared to the control wrapper.
 	 */
-	popoverPlacement?: string;
+	popoverPlacement?: PopoverProps[ 'placement' ];
 	/**
 	 * The space between the popover and the control wrapper.
 	 */
-	popoverOffset?: number;
+	popoverOffset?: PopoverProps[ 'offset' ];
 	/**
 	 * An object representing the current border configuration. It contains
 	 * properties for each side, with each side an object reflecting the border

package/src/border-control/border-control-dropdown/component.tsx

@@ -24,13 +24,7 @@ import { useBorderControlDropdown } from './hook';
 import { StyledLabel } from '../../base-control/styles/base-control-styles';
 import DropdownContentWrapper from '../../dropdown/dropdown-content-wrapper';
 
-import type {
-	Color,
-	ColorOrigin,
-	Colors,
-	DropdownProps,
-	PopoverProps,
-} from '../types';
+import type { Color, ColorOrigin, Colors, DropdownProps } from '../types';
 
 const noop = () => undefined;
 const getColorObject = (
@@ -188,7 +182,8 @@ const BorderControlDropdown = (
 		</Button>
 	);
 
-	const renderContent = ( { onClose }: PopoverProps ) => (
+	// TODO: update types once Dropdown component is refactored to TypeScript.
+	const renderContent = ( { onClose }: { onClose: () => void } ) => (
 		<>
 			<DropdownContentWrapper paddingSize="medium">
 				<VStack className={ popoverControlsClassName } spacing={ 6 }>

package/src/border-control/types.ts

@@ -3,6 +3,11 @@
  */
 import type { CSSProperties } from 'react';
 
+/**
+ * Internal dependencies
+ */
+import type { PopoverProps } from '../popover/types';
+
 export type Border = {
 	color?: CSSProperties[ 'borderColor' ];
 	style?: CSSProperties[ 'borderStyle' ];
@@ -83,7 +88,7 @@ export type BorderControlProps = ColorProps &
 		/**
 		 * An internal prop used to control the visibility of the dropdown.
 		 */
-		__unstablePopoverProps?: Record< string, unknown >;
+		__unstablePopoverProps?: Omit< PopoverProps, 'children' >;
 		/**
 		 * If opted into, sanitizing the border means that if no width or color
 		 * have been selected, the border style is also cleared and `undefined`
@@ -132,7 +137,7 @@ export type DropdownProps = ColorProps & {
 	/**
 	 * An internal prop used to control the visibility of the dropdown.
 	 */
-	__unstablePopoverProps?: Record< string, unknown >;
+	__unstablePopoverProps?: Omit< PopoverProps, 'children' >;
 	/**
 	 * This controls whether to render border style options.
 	 *
@@ -176,10 +181,3 @@ export type StylePickerProps = LabelProps & {
 	 */
 	value?: string;
 };
-
-export type PopoverProps = {
-	/**
-	 * Callback function to invoke when closing the border dropdown's popover.
-	 */
-	onClose: () => void;
-};

package/src/card/styles.ts

@@ -115,5 +115,5 @@ export const cardPaddings = {
 };
 
 export const shady = css`
-	background-color: ${ COLORS.lightGray[ 200 ] };
+	background-color: ${ COLORS.ui.backgroundDisabled };
 `;

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

@@ -8,8 +8,8 @@ Snapshot Diff:
 @@ -1,8 +1,8 @@
   <div>
     <div
--     class="components-card__body components-card-body css-1nwhnu3-View-Body-borderRadius-medium em57xhy0"
-+     class="components-scrollable components-card__body components-card-body css-1w878rm-View-Scrollable-scrollableScrollbar-scrollY-Body-borderRadius-medium em57xhy0"
+-     class="components-card__body components-card-body css-1nwhnu3-View-Body-borderRadius-medium e19lxcc00"
++     class="components-scrollable components-card__body components-card-body css-1w878rm-View-Scrollable-scrollableScrollbar-scrollY-Body-borderRadius-medium e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="CardBody"
     >
@@ -25,8 +25,8 @@ Snapshot Diff:
 @@ -1,8 +1,8 @@
   <div>
     <div
--     class="components-card__body components-card-body css-1nwhnu3-View-Body-borderRadius-medium em57xhy0"
-+     class="components-card__body components-card-body css-kqnlb3-View-Body-borderRadius-medium-shady em57xhy0"
+-     class="components-card__body components-card-body css-1nwhnu3-View-Body-borderRadius-medium e19lxcc00"
++     class="components-card__body components-card-body css-1nhkags-View-Body-borderRadius-medium-shady e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="CardBody"
     >
@@ -42,8 +42,8 @@ Snapshot Diff:
 @@ -1,8 +1,8 @@
   <div>
     <div
--     class="components-flex components-card__footer components-card-footer css-p1v47q-View-Flex-sx-Base-sx-Items-ItemsRow-Footer-borderRadius-borderColor-medium em57xhy0"
-+     class="components-flex components-card__footer components-card-footer css-1xx98hc-View-Flex-sx-Base-sx-Items-ItemsRow-Footer-borderRadius-borderColor-medium-shady em57xhy0"
+-     class="components-flex components-card__footer components-card-footer css-120suhd-View-Flex-base-ItemsRow-Footer-borderRadius-borderColor-medium e19lxcc00"
++     class="components-flex components-card__footer components-card-footer css-19jxwll-View-Flex-base-ItemsRow-Footer-borderRadius-borderColor-medium-shady e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="CardFooter"
     >
@@ -59,8 +59,8 @@ Snapshot Diff:
 @@ -1,8 +1,8 @@
   <div>
     <div
--     class="components-flex components-card__footer components-card-footer css-p1v47q-View-Flex-sx-Base-sx-Items-ItemsRow-Footer-borderRadius-borderColor-medium em57xhy0"
-+     class="components-flex components-card__footer components-card-footer css-gg08fg-View-Flex-sx-Base-sx-Items-ItemsRow-Footer-borderRadius-borderColor-medium em57xhy0"
+-     class="components-flex components-card__footer components-card-footer css-120suhd-View-Flex-base-ItemsRow-Footer-borderRadius-borderColor-medium e19lxcc00"
++     class="components-flex components-card__footer components-card-footer css-ys33kb-View-Flex-base-ItemsRow-Footer-borderRadius-borderColor-medium e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="CardFooter"
     >
@@ -76,8 +76,8 @@ Snapshot Diff:
 @@ -1,8 +1,8 @@
   <div>
     <div
--     class="components-flex components-card__header components-card-header css-1g5oj2q-View-Flex-sx-Base-sx-Items-ItemsRow-Header-borderRadius-borderColor-medium em57xhy0"
-+     class="components-flex components-card__header components-card-header css-121pfkj-View-Flex-sx-Base-sx-Items-ItemsRow-Header-borderRadius-borderColor-medium-shady em57xhy0"
+-     class="components-flex components-card__header components-card-header css-3fkkv8-View-Flex-base-ItemsRow-Header-borderRadius-borderColor-medium e19lxcc00"
++     class="components-flex components-card__header components-card-header css-1qktnah-View-Flex-base-ItemsRow-Header-borderRadius-borderColor-medium-shady e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="CardHeader"
     >
@@ -93,19 +93,19 @@ Snapshot Diff:
 @@ -5,18 +5,18 @@
   >
     <div
-      class="css-mgwsf4-View-Content em57xhy0"
+      class="css-mgwsf4-View-Content e19lxcc00"
     >
       <div
--       class="components-flex components-card__header components-card-header css-1g5oj2q-View-Flex-sx-Base-sx-Items-ItemsRow-Header-borderRadius-borderColor-medium em57xhy0"
-+       class="components-flex components-card__header components-card-header css-1e8ifbz-View-Flex-sx-Base-sx-Items-ItemsRow-Header-borderRadius-borderColor-large em57xhy0"
+-       class="components-flex components-card__header components-card-header css-3fkkv8-View-Flex-base-ItemsRow-Header-borderRadius-borderColor-medium e19lxcc00"
++       class="components-flex components-card__header components-card-header css-2feznw-View-Flex-base-ItemsRow-Header-borderRadius-borderColor-large e19lxcc00"
         data-wp-c16t="true"
         data-wp-component="CardHeader"
       >
         Header
       </div>
       <div
--       class="components-card__body components-card-body css-1nwhnu3-View-Body-borderRadius-medium em57xhy0"
-+       class="components-card__body components-card-body css-1nonx1n-View-Body-borderRadius-large em57xhy0"
+-       class="components-card__body components-card-body css-1nwhnu3-View-Body-borderRadius-medium e19lxcc00"
++       class="components-card__body components-card-body css-1nonx1n-View-Body-borderRadius-large e19lxcc00"
         data-wp-c16t="true"
         data-wp-component="CardBody"
       >
@@ -138,27 +138,27 @@ Snapshot Diff:
 @@ -6,25 +6,25 @@
     >
       <div
-        class="css-mgwsf4-View-Content em57xhy0"
+        class="css-mgwsf4-View-Content e19lxcc00"
       >
         <div
--         class="components-flex components-card__header components-card-header css-1uuauve-View-Flex-sx-Base-sx-Items-ItemsRow-Header-borderRadius-borderColor-large-borderless em57xhy0"
-+         class="components-flex components-card__header components-card-header css-yf9nll-View-Flex-sx-Base-sx-Items-ItemsRow-Header-borderRadius-borderColor-small em57xhy0"
+-         class="components-flex components-card__header components-card-header css-ed5e1x-View-Flex-base-ItemsRow-Header-borderRadius-borderColor-large-borderless e19lxcc00"
++         class="components-flex components-card__header components-card-header css-1f9ii60-View-Flex-base-ItemsRow-Header-borderRadius-borderColor-small e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="CardHeader"
         >
           Header
         </div>
         <div
--         class="components-card__body components-card-body css-1nonx1n-View-Body-borderRadius-large em57xhy0"
-+         class="components-card__body components-card-body css-1nwhnu3-View-Body-borderRadius-medium em57xhy0"
+-         class="components-card__body components-card-body css-1nonx1n-View-Body-borderRadius-large e19lxcc00"
++         class="components-card__body components-card-body css-1nwhnu3-View-Body-borderRadius-medium e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="CardBody"
         >
           Body
         </div>
         <div
--         class="components-flex components-card__footer components-card-footer css-s0icc3-View-Flex-sx-Base-sx-Items-ItemsRow-Footer-borderRadius-borderColor-large-borderless em57xhy0"
-+         class="components-flex components-card__footer components-card-footer css-cwhos2-View-Flex-sx-Base-sx-Items-ItemsRow-Footer-borderRadius-borderColor-xSmallCardPadding em57xhy0"
+-         class="components-flex components-card__footer components-card-footer css-ide17g-View-Flex-base-ItemsRow-Footer-borderRadius-borderColor-large-borderless e19lxcc00"
++         class="components-flex components-card__footer components-card-footer css-jsws2e-View-Flex-base-ItemsRow-Footer-borderRadius-borderColor-xSmallCardPadding e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="CardFooter"
         >
@@ -174,33 +174,33 @@ Snapshot Diff:
 @@ -1,30 +1,30 @@
   <div>
     <div
--     class="components-surface components-card css-hkvggq-View-Surface-getBorders-primary-Card-boxShadowless-rounded em57xhy0"
-+     class="components-surface components-card css-nsno0f-View-Surface-getBorders-primary-Card-rounded em57xhy0"
+-     class="components-surface components-card css-hkvggq-View-Surface-getBorders-primary-Card-boxShadowless-rounded e19lxcc00"
++     class="components-surface components-card css-nsno0f-View-Surface-getBorders-primary-Card-rounded e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="Card"
     >
       <div
-        class="css-mgwsf4-View-Content em57xhy0"
+        class="css-mgwsf4-View-Content e19lxcc00"
       >
         <div
--         class="components-flex components-card__header components-card-header css-1uuauve-View-Flex-sx-Base-sx-Items-ItemsRow-Header-borderRadius-borderColor-large-borderless em57xhy0"
-+         class="components-flex components-card__header components-card-header css-yf9nll-View-Flex-sx-Base-sx-Items-ItemsRow-Header-borderRadius-borderColor-small em57xhy0"
+-         class="components-flex components-card__header components-card-header css-ed5e1x-View-Flex-base-ItemsRow-Header-borderRadius-borderColor-large-borderless e19lxcc00"
++         class="components-flex components-card__header components-card-header css-1f9ii60-View-Flex-base-ItemsRow-Header-borderRadius-borderColor-small e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="CardHeader"
         >
           Header
         </div>
         <div
--         class="components-card__body components-card-body css-1nonx1n-View-Body-borderRadius-large em57xhy0"
-+         class="components-card__body components-card-body css-5spj1a-View-Body-borderRadius-small em57xhy0"
+-         class="components-card__body components-card-body css-1nonx1n-View-Body-borderRadius-large e19lxcc00"
++         class="components-card__body components-card-body css-5spj1a-View-Body-borderRadius-small e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="CardBody"
         >
           Body
         </div>
         <div
--         class="components-flex components-card__footer components-card-footer css-s0icc3-View-Flex-sx-Base-sx-Items-ItemsRow-Footer-borderRadius-borderColor-large-borderless em57xhy0"
-+         class="components-flex components-card__footer components-card-footer css-oc4v7j-View-Flex-sx-Base-sx-Items-ItemsRow-Footer-borderRadius-borderColor-small em57xhy0"
+-         class="components-flex components-card__footer components-card-footer css-ide17g-View-Flex-base-ItemsRow-Footer-borderRadius-borderColor-large-borderless e19lxcc00"
++         class="components-flex components-card__footer components-card-footer css-1ih54yp-View-Flex-base-ItemsRow-Footer-borderRadius-borderColor-small e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="CardFooter"
         >
@@ -236,6 +236,7 @@ Object {
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
+  gap: calc(4px * 2);
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   justify-content: space-between;
@@ -246,10 +247,6 @@ Object {
   padding: calc(4px * 4) calc(4px * 6);
 }
 
-.emotion-4>*+*:not( marquee ) {
-  margin-left: calc(4px * 2);
-}
-
 .emotion-4>* {
   min-width: 0;
 }
@@ -332,6 +329,7 @@ Object {
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
+  gap: calc(4px * 2);
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   justify-content: space-between;
@@ -342,10 +340,6 @@ Object {
   padding: calc(4px * 4) calc(4px * 6);
 }
 
-.emotion-16>*+*:not( marquee ) {
-  margin-left: calc(4px * 2);
-}
-
 .emotion-16>* {
   min-width: 0;
 }
@@ -492,6 +486,7 @@ Object {
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
+  gap: calc(4px * 2);
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   justify-content: space-between;
@@ -502,10 +497,6 @@ Object {
   padding: calc(4px * 4) calc(4px * 6);
 }
 
-.emotion-4>*+*:not( marquee ) {
-  margin-left: calc(4px * 2);
-}
-
 .emotion-4>* {
   min-width: 0;
 }
@@ -588,6 +579,7 @@ Object {
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
+  gap: calc(4px * 2);
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   justify-content: space-between;
@@ -598,10 +590,6 @@ Object {
   padding: calc(4px * 4) calc(4px * 6);
 }
 
-.emotion-16>*+*:not( marquee ) {
-  margin-left: calc(4px * 2);
-}
-
 .emotion-16>* {
   min-width: 0;
 }
@@ -786,15 +774,15 @@ Snapshot Diff:
     </div>
     <div
       aria-hidden="true"
--     class="components-elevation css-1lsfy80-View-Elevation-sx-Base-elevationClassName em57xhy0"
-+     class="components-elevation css-15t1t3g-View-Elevation-sx-Base-elevationClassName em57xhy0"
+-     class="components-elevation css-1lsfy80-View-Elevation-sx-Base-elevationClassName e19lxcc00"
++     class="components-elevation css-15t1t3g-View-Elevation-sx-Base-elevationClassName e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="Elevation"
     />
     <div
       aria-hidden="true"
--     class="components-elevation css-18cl04p-View-Elevation-sx-Base-elevationClassName em57xhy0"
-+     class="components-elevation css-15t1t3g-View-Elevation-sx-Base-elevationClassName em57xhy0"
+-     class="components-elevation css-18cl04p-View-Elevation-sx-Base-elevationClassName e19lxcc00"
++     class="components-elevation css-15t1t3g-View-Elevation-sx-Base-elevationClassName e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="Elevation"
     />

package/src/checkbox-control/index.tsx

@@ -40,14 +40,10 @@ import type { WordPressComponentProps } from '../ui/context';
  * ```
  */
 export function CheckboxControl(
-	// ref is omitted until we have `WordPressComponentPropsWithoutRef` or add
-	// ref forwarding to CheckboxControl.
-	props: Omit<
-		WordPressComponentProps< CheckboxControlProps, 'input', false >,
-		'ref'
-	>
+	props: WordPressComponentProps< CheckboxControlProps, 'input', false >
 ) {
 	const {
+		__nextHasNoMarginBottom,
 		label,
 		className,
 		heading,
@@ -92,6 +88,7 @@ export function CheckboxControl(
 
 	return (
 		<BaseControl
+			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
 			label={ heading }
 			id={ id }
 			help={ help }