Revert "import checkbox from single place (#12015)"

This reverts commit d952f8e.

assets/js/blocks/checkout/inner-blocks/checkout-contact-information-block/block.tsx

@@ -8,10 +8,10 @@ import {
 	noticeContexts,
 } from '@woocommerce/base-context';
 import { getSetting } from '@woocommerce/settings';
+import { CheckboxControl } from '@woocommerce/blocks-checkout';
 import {
 	StoreNoticesContainer,
 	ValidatedTextInput,
-	CheckboxControl,
 } from '@woocommerce/blocks-components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { CHECKOUT_STORE_KEY } from '@woocommerce/block-data';

assets/js/blocks/checkout/inner-blocks/checkout-shipping-address-block/block.tsx

@@ -9,10 +9,8 @@ import {
 	useEditorContext,
 	noticeContexts,
 } from '@woocommerce/base-context';
-import {
-	StoreNoticesContainer,
-	CheckboxControl,
-} from '@woocommerce/blocks-components';
+import { CheckboxControl } from '@woocommerce/blocks-checkout';
+import { StoreNoticesContainer } from '@woocommerce/blocks-components';
 import Noninteractive from '@woocommerce/base-components/noninteractive';
 import type {
 	BillingAddress,

packages/checkout/components/checkbox-control/index.tsx

@@ -1 +1,80 @@
-export { CheckboxControl } from '@woocommerce/blocks-components';
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+import { useInstanceId } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+export type CheckboxControlProps = {
+	className?: string;
+	label?: string | React.ReactNode;
+	id?: string;
+	onChange: ( value: boolean ) => void;
+	children?: React.ReactChildren;
+	hasError?: boolean;
+	checked?: boolean;
+	disabled?: boolean;
+};
+
+/**
+ * Component used to show a checkbox control with styles.
+ */
+export const CheckboxControl = ( {
+	className,
+	label,
+	id,
+	onChange,
+	children,
+	hasError = false,
+	checked = false,
+	disabled = false,
+	...rest
+}: CheckboxControlProps ): JSX.Element => {
+	const instanceId = useInstanceId( CheckboxControl );
+	const checkboxId = id || `checkbox-control-${ instanceId }`;
+
+	return (
+		<div
+			className={ classNames(
+				'wc-block-components-checkbox',
+				{
+					'has-error': hasError,
+				},
+				className
+			) }
+		>
+			<label htmlFor={ checkboxId }>
+				<input
+					id={ checkboxId }
+					className="wc-block-components-checkbox__input"
+					type="checkbox"
+					onChange={ ( event ) => onChange( event.target.checked ) }
+					aria-invalid={ hasError === true }
+					checked={ checked }
+					disabled={ disabled }
+					{ ...rest }
+				/>
+				<svg
+					className="wc-block-components-checkbox__mark"
+					aria-hidden="true"
+					xmlns="http://www.w3.org/2000/svg"
+					viewBox="0 0 24 20"
+				>
+					<path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" />
+				</svg>
+				{ label && (
+					<span className="wc-block-components-checkbox__label">
+						{ label }
+					</span>
+				) }
+				{ children }
+			</label>
+		</div>
+	);
+};
+
+export default CheckboxControl;