CheckboxControl: stop using Gutenberg's CheckboxControl (https://github.com/woocommerce/woocommerce-blocks/pull/2137)

* CheckboxControl: stop using Gutenberg's CheckboxControl

* Simplify styles and make them work fine in the editor

plugins/woocommerce-blocks/assets/js/base/components/checkbox-control/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { CheckboxControl as WPCheckboxControl } from 'wordpress-components';
+import { withInstanceId } from '@woocommerce/base-hocs/with-instance-id';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
@@ -13,17 +13,38 @@ import './style.scss';
 /**
  * Component used to show a checkbox control with styles.
  */
-const CheckboxControl = ( { className, ...props } ) => {
+const CheckboxControl = ( {
+	className,
+	label,
+	id,
+	instanceId,
+	onChange,
+	...rest
+} ) => {
+	const checkboxId = id || `checkbox-control-${ instanceId }`;
+
 	return (
-		<WPCheckboxControl
+		<label
 			className={ classNames( 'wc-block-checkbox', className ) }
-			{ ...props }
+			htmlFor={ checkboxId }
-		/>
+		>
+			<input
+				id={ checkboxId }
+				className="wc-block-checkbox__input"
+				type="checkbox"
+				onChange={ ( event ) => onChange( event.target.checked ) }
+				{ ...rest }
+			/>
+			<span className="wc-block-checkbox__label">{ label }</span>
+		</label>
 	);
 };
 
 CheckboxControl.propTypes = {
 	className: PropTypes.string,
+	label: PropTypes.string,
+	id: PropTypes.string,
+	onChange: PropTypes.func,
 };
 
-export default CheckboxControl;
+export default withInstanceId( CheckboxControl );

plugins/woocommerce-blocks/assets/js/base/components/checkbox-control/style.scss

@@ -1,13 +1,40 @@
 .wc-block-checkbox {
-	.components-checkbox-control__input[type="checkbox"]:checked {
+	display: block;
-		background: currentColor;
+	position: relative;
-		border-color: currentColor;
+
+	.wc-block-checkbox__input[type="checkbox"] {
+		appearance: none;
+		border: 1px solid currentColor;
+		height: 1rem;
+		margin: 0;
+		min-height: 16px;
+		min-width: 16px;
+		overflow: hidden;
+		position: static;
+		vertical-align: middle;
+		width: 1rem;
+
+		&:checked {
+			background: currentColor;
+			border-color: currentColor;
+
+			&::before {
+				color: #fff;
+				content: "\2713";
+				display: block;
+				height: calc(1rem - 2px);
+				min-height: 14px;
+				min-width: 14px;
+				margin: 0;
+				line-height: 100%;
+				text-align: center;
+				width: calc(1rem - 2px);
+			}
+		}
 	}
-	.components-checkbox-control__input[type="checkbox"]:focus {
+
-		border-color: currentColor;
+	.wc-block-checkbox__input[type="checkbox"] + .wc-block-checkbox__label {
-		box-shadow: 0 0 2px currentColor;
+		padding-left: $gap-smaller;
-	}
+		vertical-align: middle;
-	.components-checkbox-control__label {
-		display: inline;
 	}
 }

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/block.js

@@ -240,7 +240,6 @@ const Checkout = ( {
 									onChange={ ( isChecked ) =>
 										setShippingAsBilling( isChecked )
 									}
-									required={ attributes.requirePhoneField }
 								/>
 							</FormStep>
 						) }

plugins/woocommerce-blocks/bin/webpack-helpers.js

@@ -108,8 +108,6 @@ const stableMainEntry = {
 	'panel-style': './node_modules/wordpress-components/src/panel/style.scss',
 	'custom-select-control-style':
 		'./node_modules/wordpress-components/src/custom-select-control/style.scss',
-	'checkbox-control-style':
-		'./node_modules/wordpress-components/src/checkbox-control/style.scss',
 	'spinner-style':
 		'./node_modules/wordpress-components/src/spinner/style.scss',
 	'snackbar-notice-style':