@wordpress/components 19.17.0 → 20.0.1-next.d6164808d3.0

package/build-types/unit-control/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/unit-control/index.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EACX,iBAAiB,EAMjB,MAAM,OAAO,CAAC;AAyBf,OAAO,KAAK,EAAoB,2BAA2B,EAAE,MAAM,SAAS,CAAC;AAC7E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAwPnE;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;ihLAAuC,CAAC;AAEhE,OAAO,EAAE,gCAAgC,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAC3E,eAAe,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/unit-control/index.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EACX,iBAAiB,EAMjB,MAAM,OAAO,CAAC;AAwBf,OAAO,KAAK,EAAoB,2BAA2B,EAAE,MAAM,SAAS,CAAC;AAC7E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAyPnE;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;8hLAAuC,CAAC;AAEhE,OAAO,EAAE,gCAAgC,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAC3E,eAAe,WAAW,CAAC"}

package/build-types/unit-control/types.d.ts

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { CSSProperties, FocusEventHandler, SyntheticEvent } from 'react';
+import type { CSSProperties, FocusEventHandler, ReactNode, SyntheticEvent } from 'react';
 /**
  * Internal dependencies
  */
@@ -58,6 +58,10 @@ export declare type UnitSelectControlProps = Pick<InputControlProps, 'size'> & {
 export declare type UnitControlProps = Omit<UnitSelectControlProps, 'unit'> & Pick<InputControlProps, 'hideLabelFromVision' | 'prefix' | '__next36pxDefaultSize'> & {
     __unstableStateReducer?: StateReducer;
     __unstableInputWidth?: CSSProperties['width'];
+    /**
+     * The children elements.
+     */
+    children?: ReactNode;
     /**
      * If `true`, the unit `<select>` is hidden.
      *

package/build-types/unit-control/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/unit-control/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE9E;;GAEG;AACH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,KAAK,EACX,mBAAmB,EACnB,iBAAiB,EACjB,IAAI,IAAI,SAAS,EACjB,MAAM,wBAAwB,CAAC;AAEhC,oBAAY,UAAU,GAAG,SAAS,CAAC;AAEnC,oBAAY,iBAAiB,GAAG;IAC/B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,oBAAY,2BAA2B,GAAG,mBAAmB,CAC5D,cAAc,CAAE,iBAAiB,GAAG,gBAAgB,CAAE,EACtD;IAAE,IAAI,CAAC,EAAE,iBAAiB,CAAA;CAAE,CAC5B,CAAC;AAEF,oBAAY,sBAAsB,GAAG,IAAI,CAAE,iBAAiB,EAAE,MAAM,CAAE,GAAG;IACxE;;;;OAIG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;OAEG;IACH,QAAQ,CAAC,EAAE,2BAA2B,CAAC;IACvC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,KAAK,CAAC,EAAE,iBAAiB,EAAE,CAAC;CAC5B,CAAC;AAGF,oBAAY,gBAAgB,GAAG,IAAI,CAAE,sBAAsB,EAAE,MAAM,CAAE,GACpE,IAAI,CACH,iBAAiB,EACjB,qBAAqB,GAAG,QAAQ,GAAG,uBAAuB,CAC1D,GAAG;IACH,sBAAsB,CAAC,EAAE,YAAY,CAAC;IACtC,oBAAoB,CAAC,EAAE,aAAa,CAAE,OAAO,CAAE,CAAC;IAChD;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;OAKG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;;;;OAKG;IACH,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,YAAY,CAAC,EAAE,2BAA2B,CAAC;IAC3C;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,MAAM,CAAC,EAAE,iBAAiB,CAAE,gBAAgB,GAAG,iBAAiB,CAAE,CAAC;CACnE,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/unit-control/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EACX,aAAa,EACb,iBAAiB,EACjB,SAAS,EACT,cAAc,EACd,MAAM,OAAO,CAAC;AAEf;;GAEG;AACH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,KAAK,EACX,mBAAmB,EACnB,iBAAiB,EACjB,IAAI,IAAI,SAAS,EACjB,MAAM,wBAAwB,CAAC;AAEhC,oBAAY,UAAU,GAAG,SAAS,CAAC;AAEnC,oBAAY,iBAAiB,GAAG;IAC/B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,oBAAY,2BAA2B,GAAG,mBAAmB,CAC5D,cAAc,CAAE,iBAAiB,GAAG,gBAAgB,CAAE,EACtD;IAAE,IAAI,CAAC,EAAE,iBAAiB,CAAA;CAAE,CAC5B,CAAC;AAEF,oBAAY,sBAAsB,GAAG,IAAI,CAAE,iBAAiB,EAAE,MAAM,CAAE,GAAG;IACxE;;;;OAIG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;OAEG;IACH,QAAQ,CAAC,EAAE,2BAA2B,CAAC;IACvC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,KAAK,CAAC,EAAE,iBAAiB,EAAE,CAAC;CAC5B,CAAC;AAGF,oBAAY,gBAAgB,GAAG,IAAI,CAAE,sBAAsB,EAAE,MAAM,CAAE,GACpE,IAAI,CACH,iBAAiB,EACjB,qBAAqB,GAAG,QAAQ,GAAG,uBAAuB,CAC1D,GAAG;IACH,sBAAsB,CAAC,EAAE,YAAY,CAAC;IACtC,oBAAoB,CAAC,EAAE,aAAa,CAAE,OAAO,CAAE,CAAC;IAChD;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;OAKG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;;;;OAKG;IACH,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,YAAY,CAAC,EAAE,2BAA2B,CAAC;IAC3C;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,MAAM,CAAC,EAAE,iBAAiB,CAAE,gBAAgB,GAAG,iBAAiB,CAAE,CAAC;CACnE,CAAC"}

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

@@ -1,124 +1,46 @@
-export const COLORS: {
-    black: string;
-    white: string;
-} & {
+export const COLORS: Readonly<{
+    /**
+     * @deprecated Try to use `gray` instead.
+     */
     darkGray: {
-        900: string;
-        800: string;
-        700: string;
-        600: string;
         500: string;
-        400: string;
         300: string;
-        200: string;
         150: string;
-        100: string;
-        placeholder: string;
-    };
-    darkOpacity: {
-        900: string;
-        800: string;
-        700: string;
-        600: string;
-        500: string;
-        400: string;
-        300: string;
-        200: string;
-        100: string;
-        backgroundFill: string;
-    };
-    darkOpacityLight: {
-        900: string;
-        800: string;
-        700: string;
-        600: string;
-        500: string;
-        400: string;
-        300: string;
-        200: string;
-        100: string;
-    };
-    mediumGray: {
-        text: string;
     };
     /**
-     * The main gray color object (since Apr 16, 2022).
-     *
-     * We are in the process of simplifying the colors in this file,
-     * please prefer this `gray` object in the meantime.
+     * The main gray color object.
      */
     gray: {
-        900: string;
-        700: string;
-        600: string;
-        400: string;
-        300: string;
-        200: string;
-        100: string;
-    };
-    lightGray: {
         900: string;
         800: string;
+        /** Meets 4.6:1 text contrast against white. */
         700: string;
+        /** Meets 3:1 UI or large text contrast against white. */
         600: string;
-        500: string;
         400: string;
+        /** Used for most borders. */
         300: string;
+        /** Used sparingly for light borders. */
         200: string;
+        /** Used for light gray backgrounds. */
         100: string;
-        placeholder: string;
-    } & {
-        ui: string;
-        secondary: string;
-        tertiary: string;
     };
-    lightGrayLight: {
-        900: string;
+    /**
+     * @deprecated Try to use `gray` instead.
+     */
+    lightGray: {
         800: string;
-        700: string;
         600: string;
-        500: string;
         400: string;
         300: string;
         200: string;
-        100: string;
-        backgroundFill: string;
-    };
-    blue: {
-        wordpress: {
-            700: string;
-        };
-        dark: {
-            900: string;
-        };
-        medium: {
-            900: string;
-            800: string;
-            700: string;
-            600: string;
-            500: string;
-            400: string;
-            300: string;
-            200: string;
-            100: string;
-            highlight: string;
-            focus: string;
-        };
-    } & {
-        medium: {
-            focus: string;
-            focusDark: string;
-        };
     };
+    white: string;
     alert: {
         yellow: string;
         red: string;
         green: string;
     };
-    admin: {
-        theme: string;
-        themeDark10: string;
-    };
     ui: {
         theme: string;
         background: string;
@@ -127,12 +49,11 @@ export const COLORS: {
         borderHover: string;
         borderFocus: string;
         borderDisabled: string;
-        borderLight: string;
-        label: string;
         textDisabled: string;
         textDark: string;
-        textLight: string;
+        darkGrayPlaceholder: string;
+        lightGrayPlaceholder: string;
     };
-};
+}>;
 export default COLORS;
 //# sourceMappingURL=colors-values.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"colors-values.d.ts","sourceRoot":"","sources":["../../src/utils/colors-values.js"],"names":[],"mappings":"AAgKA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAKC;;;;;OAKG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAQA"}
+{"version":3,"file":"colors-values.d.ts","sourceRoot":"","sources":["../../src/utils/colors-values.js"],"names":[],"mappings":"AAmEA;IACC;;OAEG;;;;;;IAEH;;OAEG;;;;QA/DH,+CAA+C;;QAE/C,yDAAyD;;;QAGzD,6BAA6B;;QAE7B,wCAAwC;;QAExC,uCAAuC;;;IAwDvC;;OAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;GAKA"}

package/build-types/utils/rtl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"rtl.d.ts","sourceRoot":"","sources":["../../src/utils/rtl.js"],"names":[],"mappings":"AA8DA;;;;;;;GAOG;AACH,gCALW,OAAO,OAAO,EAAE,aAAa,0DAG5B,MAAM,OAAO,gBAAgB,EAAE,gBAAgB,CAY1D;;IAED;;;;;;;;;;;OAWG;IACH,0BAAyB;;AApClB,4CAJI,OAAO,OAAO,EAAE,aAAa,GAE5B,OAAO,OAAO,EAAE,aAAa,CAIxC"}
+{"version":3,"file":"rtl.d.ts","sourceRoot":"","sources":["../../src/utils/rtl.js"],"names":[],"mappings":"AAkEA;;;;;;;GAOG;AACH,gCALW,OAAO,OAAO,EAAE,aAAa,0DAG5B,MAAM,OAAO,gBAAgB,EAAE,gBAAgB,CAY1D;;IAED;;;;;;;;;;;OAWG;IACH,0BAAyB;;AAzClB,4CAJI,OAAO,OAAO,EAAE,aAAa,GAE5B,OAAO,OAAO,EAAE,aAAa,CASxC"}

package/build-types/utils/strings.d.ts

@@ -0,0 +1,2 @@
+export declare const normalizeTextString: (value: string) => string;
+//# sourceMappingURL=strings.d.ts.map

package/build-types/utils/strings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"strings.d.ts","sourceRoot":"","sources":["../../src/utils/strings.ts"],"names":[],"mappings":"AAmEA,eAAO,MAAM,mBAAmB,UAAY,MAAM,KAAI,MAIrD,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "19.17.0",
+	"version": "20.0.1-next.d6164808d3.0",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -35,26 +35,28 @@
 		"@emotion/react": "^11.7.1",
 		"@emotion/serialize": "^1.0.2",
 		"@emotion/styled": "^11.6.0",
-		"@emotion/utils": "1.0.0",
-		"@floating-ui/react-dom": "0.6.3",
+		"@emotion/utils": "^1.0.0",
+		"@floating-ui/react-dom": "^1.0.0",
 		"@use-gesture/react": "^10.2.6",
-		"@wordpress/a11y": "^3.15.0",
-		"@wordpress/compose": "^5.13.0",
-		"@wordpress/date": "^4.15.0",
-		"@wordpress/deprecated": "^3.15.0",
-		"@wordpress/dom": "^3.15.0",
-		"@wordpress/element": "^4.13.0",
-		"@wordpress/escape-html": "^2.15.0",
-		"@wordpress/hooks": "^3.15.0",
-		"@wordpress/i18n": "^4.15.0",
-		"@wordpress/icons": "^9.6.0",
-		"@wordpress/is-shallow-equal": "^4.15.0",
-		"@wordpress/keycodes": "^3.15.0",
-		"@wordpress/primitives": "^3.13.0",
-		"@wordpress/rich-text": "^5.13.0",
-		"@wordpress/warning": "^2.15.0",
+		"@wordpress/a11y": "^3.15.1-next.d6164808d3.0",
+		"@wordpress/compose": "^5.13.1-next.d6164808d3.0",
+		"@wordpress/date": "^4.15.1-next.d6164808d3.0",
+		"@wordpress/deprecated": "^3.15.1-next.d6164808d3.0",
+		"@wordpress/dom": "^3.15.1-next.d6164808d3.0",
+		"@wordpress/element": "^4.13.1-next.d6164808d3.0",
+		"@wordpress/escape-html": "^2.15.1-next.d6164808d3.0",
+		"@wordpress/hooks": "^3.15.1-next.d6164808d3.0",
+		"@wordpress/i18n": "^4.15.1-next.d6164808d3.0",
+		"@wordpress/icons": "^9.6.1-next.d6164808d3.0",
+		"@wordpress/is-shallow-equal": "^4.15.1-next.d6164808d3.0",
+		"@wordpress/keycodes": "^3.15.1-next.d6164808d3.0",
+		"@wordpress/primitives": "^3.13.1-next.d6164808d3.0",
+		"@wordpress/rich-text": "^5.13.1-next.d6164808d3.0",
+		"@wordpress/warning": "^2.15.1-next.d6164808d3.0",
+		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
+		"date-fns": "^2.28.0",
 		"dom-scroll-into-view": "^1.2.1",
 		"downshift": "^6.0.15",
 		"framer-motion": "^6.2.8",
@@ -62,12 +64,11 @@
 		"highlight-words-core": "^1.2.2",
 		"lodash": "^4.17.21",
 		"memize": "^1.1.0",
-		"moment": "^2.26.0",
 		"re-resizable": "^6.4.0",
 		"react-colorful": "^5.3.1",
-		"react-dates": "^21.8.0",
 		"reakit": "^1.3.8",
 		"remove-accents": "^0.4.2",
+		"use-lilius": "^2.0.1",
 		"uuid": "^8.3.0"
 	},
 	"peerDependencies": {
@@ -77,5 +78,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "08358f53b627a15148c3a3e433cdf58cf8714aa4"
+	"gitHead": "ba8a396d2f418e53a6c4c50575582f3f3eb11ff7"
 }

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

@@ -75,7 +75,7 @@ export default function AlignmentMatrixControl( {
 			as={ Root }
 			className={ classes }
 			role="grid"
-			width={ width }
+			size={ width }
 		>
 			{ GRID.map( ( cells, index ) => (
 				<CompositeGroup

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

@@ -1,47 +1,72 @@
-/**
- * External dependencies
- */
-import { number, select } from '@storybook/addon-knobs';
 /**
  * WordPress dependencies
  */
-import { Icon as BaseIcon } from '@wordpress/icons';
+import { useEffect, useState } from '@wordpress/element';
+import { Icon } from '@wordpress/icons';
+
 /**
  * Internal dependencies
  */
 import AlignmentMatrixControl from '../';
 import { ALIGNMENTS } from '../utils';
-
-const alignmentOptions = ALIGNMENTS.reduce( ( options, item ) => {
-	return { ...options, [ item ]: item };
-}, {} );
+import { HStack } from '../../h-stack';
 
 export default {
 	title: 'Components (Experimental)/AlignmentMatrixControl',
 	component: AlignmentMatrixControl,
+	subcomponents: {
+		'AlignmentMatrixControl.Icon': AlignmentMatrixControl.Icon,
+	},
+	argTypes: {
+		defaultValue: { options: ALIGNMENTS },
+		onChange: { action: 'onChange', control: { type: null } },
+		label: { control: { type: 'text' } },
+		width: { control: { type: 'number' } },
+		value: { control: { type: null } },
+	},
 	parameters: {
-		knobs: { disable: false },
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
 	},
 };
 
-export const _default = () => {
-	const props = {
-		value: select( 'value', alignmentOptions, 'center center' ),
-	};
+const Template = ( { defaultValue, onChange, ...props } ) => {
+	const [ value, setValue ] = useState();
 
-	return <AlignmentMatrixControl { ...props } />;
-};
-
-export const icon = () => {
-	const props = {
-		value: select( 'value', alignmentOptions, 'center center' ),
-		size: number( 'size', 24 ),
-	};
+	// Convenience handler for Canvas view so changes are reflected
+	useEffect( () => {
+		setValue( defaultValue );
+	}, [ defaultValue ] );
 
 	return (
-		<BaseIcon
-			icon={ <AlignmentMatrixControl.Icon size={ props.size } /> }
+		<AlignmentMatrixControl
 			{ ...props }
+			onChange={ ( ...changeArgs ) => {
+				setValue( ...changeArgs );
+				onChange( ...changeArgs );
+			} }
+			value={ value }
 		/>
 	);
 };
+export const Default = Template.bind( {} );
+
+export const IconSubcomponent = () => {
+	return (
+		<HStack justify="flex-start">
+			<Icon
+				icon={
+					<AlignmentMatrixControl.Icon size={ 24 } value="top left" />
+				}
+			/>
+			<Icon
+				icon={
+					<AlignmentMatrixControl.Icon
+						size={ 24 }
+						value="center center"
+					/>
+				}
+			/>
+		</HStack>
+	);
+};

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

@@ -45,9 +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 pointColorHover = isActive
-		? COLORS.gray[ 900 ]
-		: COLORS.blue.medium.focus;
+	const pointColorHover = isActive ? COLORS.gray[ 900 ] : COLORS.ui.theme;
 
 	return css`
 		box-shadow: ${ boxShadow };

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

@@ -20,6 +20,8 @@ import { Text } from '../text';
 import { Spacer } from '../spacer';
 
 export default function AnglePickerControl( {
+	/** Start opting into the new margin-free styles that will become the default in a future version. */
+	__nextHasNoMarginBottom = false,
 	className,
 	label = __( 'Angle' ),
 	onChange,
@@ -34,7 +36,11 @@ export default function AnglePickerControl( {
 	const classes = classnames( 'components-angle-picker-control', className );
 
 	return (
-		<Root className={ classes } gap={ 4 }>
+		<Root
+			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
+			className={ classes }
+			gap={ 4 }
+		>
 			<FlexBlock>
 				<NumberControl
 					label={ label }

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

@@ -11,13 +11,16 @@ import AnglePickerControl from '../';
 export default {
 	title: 'Components/AnglePickerControl',
 	component: AnglePickerControl,
+	argTypes: {
+		__nextHasNoMarginBottom: { control: { type: 'boolean' } },
+	},
 };
 
-const AnglePickerWithState = () => {
+const AnglePickerWithState = ( args ) => {
 	const [ angle, setAngle ] = useState();
-	return <AnglePickerControl value={ angle } onChange={ setAngle } />;
+	return (
+		<AnglePickerControl { ...args } value={ angle } onChange={ setAngle } />
+	);
 };
 
-export const _default = () => {
-	return <AnglePickerWithState />;
-};
+export const Default = AnglePickerWithState.bind( {} );

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

@@ -1,6 +1,7 @@
 /**
  * External dependencies
  */
+import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 
 /**
@@ -14,8 +15,16 @@ import CONFIG from '../../utils/config-values';
 const CIRCLE_SIZE = 32;
 const INNER_CIRCLE_SIZE = 3;
 
+const deprecatedBottomMargin = ( { __nextHasNoMarginBottom } ) => {
+	return ! __nextHasNoMarginBottom
+		? css`
+				margin-bottom: ${ space( 2 ) };
+		  `
+		: '';
+};
+
 export const Root = styled( Flex )`
-	margin-bottom: ${ space( 2 ) };
+	${ deprecatedBottomMargin }
 `;
 
 export const CircleRoot = styled.div`
@@ -36,9 +45,9 @@ export const CircleIndicatorWrapper = styled.div`
 `;
 
 export const CircleIndicator = styled.div`
-	background: ${ COLORS.admin.theme };
+	background: ${ COLORS.ui.theme };
 	border-radius: 50%;
-	border: ${ INNER_CIRCLE_SIZE }px solid ${ COLORS.admin.theme };
+	border: ${ INNER_CIRCLE_SIZE }px solid ${ COLORS.ui.theme };
 	bottom: 0;
 	box-sizing: border-box;
 	display: block;

package/src/autocomplete/index.js

@@ -14,15 +14,6 @@ import {
 	useRef,
 	useMemo,
 } from '@wordpress/element';
-import {
-	ENTER,
-	ESCAPE,
-	UP,
-	DOWN,
-	LEFT,
-	RIGHT,
-	BACKSPACE,
-} from '@wordpress/keycodes';
 import { __, _n, sprintf } from '@wordpress/i18n';
 import {
 	useInstanceId,
@@ -220,7 +211,7 @@ function useAutocomplete( {
 	}
 
 	function handleKeyDown( event ) {
-		backspacing.current = event.keyCode === BACKSPACE;
+		backspacing.current = event.code === 'Backspace';
 
 		if ( ! autocompleter ) {
 			return;
@@ -231,8 +222,8 @@ function useAutocomplete( {
 		if ( event.defaultPrevented ) {
 			return;
 		}
-		switch ( event.keyCode ) {
-			case UP:
+		switch ( event.code ) {
+			case 'ArrowUp':
 				setSelectedIndex(
 					( selectedIndex === 0
 						? filteredOptions.length
@@ -240,24 +231,24 @@ function useAutocomplete( {
 				);
 				break;
 
-			case DOWN:
+			case 'ArrowDown':
 				setSelectedIndex(
 					( selectedIndex + 1 ) % filteredOptions.length
 				);
 				break;
 
-			case ESCAPE:
+			case 'Escape':
 				setAutocompleter( null );
 				setAutocompleterUI( null );
 				event.preventDefault();
 				break;
 
-			case ENTER:
+			case 'Enter':
 				select( filteredOptions[ selectedIndex ] );
 				break;
 
-			case LEFT:
-			case RIGHT:
+			case 'ArrowLeft':
+			case 'ArrowRight':
 				reset();
 				return;
 
@@ -265,7 +256,7 @@ function useAutocomplete( {
 				return;
 		}
 
-		// Any handled keycode should prevent original behavior. This relies on
+		// Any handled key should prevent original behavior. This relies on
 		// the early return in the default case.
 		event.preventDefault();
 	}

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

@@ -64,7 +64,7 @@ export const StyledHelp = styled.p`
 	margin-bottom: 0;
 	font-size: ${ font( 'helpText.fontSize' ) };
 	font-style: normal;
-	color: ${ COLORS.mediumGray.text };
+	color: ${ COLORS.gray[ 700 ] };
 
 	${ deprecatedMarginHelp }
 `;

package/src/base-field/styles.js

@@ -35,7 +35,7 @@ export const BaseField = css`
 
 	&:focus,
 	&[data-focused='true'] {
-		border-color: ${ COLORS.admin.theme };
+		border-color: ${ COLORS.ui.theme };
 		box-shadow: ${ CONFIG.controlBoxShadowFocus };
 	}
 `;

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

@@ -129,8 +129,8 @@ exports[`base field should render correctly 1`] = `
 
 .emotion-0:focus,
 .emotion-0[data-focused='true'] {
-  border-color: var( --wp-admin-theme-color, #00669b);
-  box-shadow: 0 0 0 0.5px var( --wp-admin-theme-color, #00669b);
+  border-color: var( --wp-admin-theme-color, #007cba);
+  box-shadow: 0 0 0 0.5px var( --wp-admin-theme-color, #007cba);
 }
 
 <div

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

@@ -31,7 +31,6 @@ export const Container = styled.div`
 
 export const Side = styled.div`
 	box-sizing: border-box;
-	background: ${ COLORS.blue.wordpress[ 700 ] };
 	background: ${ COLORS.ui.theme };
 	filter: brightness( 1 );
 	opacity: 0;

package/src/box-control/test/index.js

@@ -167,19 +167,19 @@ describe( 'BoxControl', () => {
 			let state = {};
 			const setState = ( newState ) => ( state = newState );
 
-			const { getAllByLabelText, getByLabelText } = render(
+			render(
 				<BoxControl
 					values={ state }
 					onChange={ ( next ) => setState( next ) }
 				/>
 			);
 			const user = setupUser();
-			const unlink = getByLabelText( /Unlink Sides/ );
+			const unlink = screen.getByLabelText( /Unlink Sides/ );
 
 			await user.click( unlink );
 
-			const input = getByLabelText( /Top/ );
-			const select = getAllByLabelText( /Select unit/ )[ 0 ];
+			const input = screen.getByLabelText( /Top/ );
+			const select = screen.getAllByLabelText( /Select unit/ )[ 0 ];
 
 			await user.type( input, '100px' );
 			await user.keyboard( '{Enter}' );
@@ -199,7 +199,7 @@ describe( 'BoxControl', () => {
 			let state = {};
 			const setState = ( newState ) => ( state = newState );
 
-			const { getAllByLabelText, getByLabelText } = render(
+			render(
 				<BoxControl
 					values={ state }
 					onChange={ ( next ) => setState( next ) }
@@ -207,12 +207,12 @@ describe( 'BoxControl', () => {
 				/>
 			);
 			const user = setupUser();
-			const unlink = getByLabelText( /Unlink Sides/ );
+			const unlink = screen.getByLabelText( /Unlink Sides/ );
 
 			await user.click( unlink );
 
-			const input = getByLabelText( /Vertical/ );
-			const select = getAllByLabelText( /Select unit/ )[ 0 ];
+			const input = screen.getByLabelText( /Vertical/ );
+			const select = screen.getAllByLabelText( /Select unit/ )[ 0 ];
 
 			await user.type( input, '100px' );
 			await user.keyboard( '{Enter}' );