Move CheckboxControl to components package and leave alias in checkout package

assets/js/blocks/cart-checkout-shared/payment-methods/payment-method-card.tsx

@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { useEditorContext } from '@woocommerce/base-context';
-import { CheckboxControl } from '@woocommerce/blocks-checkout';
+import { CheckboxControl } from '@woocommerce/blocks-components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { CHECKOUT_STORE_KEY, PAYMENT_STORE_KEY } from '@woocommerce/block-data';
 

assets/js/blocks/checkout/inner-blocks/checkout-terms-block/edit.tsx

@@ -7,7 +7,7 @@ import {
 	RichText,
 	InspectorControls,
 } from '@wordpress/block-editor';
-import { CheckboxControl } from '@woocommerce/blocks-checkout';
+import { CheckboxControl } from '@woocommerce/blocks-components';
 import {
 	PanelBody,
 	ToggleControl,

assets/js/blocks/checkout/inner-blocks/checkout-terms-block/frontend.tsx

@@ -4,7 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import classnames from 'classnames';
 import { useState, useEffect } from '@wordpress/element';
-import { CheckboxControl } from '@woocommerce/blocks-checkout';
+import { CheckboxControl } from '@woocommerce/blocks-components';
 import { useCheckoutSubmit } from '@woocommerce/base-context/hooks';
 import { withInstanceId } from '@wordpress/compose';
 import { useDispatch, useSelect } from '@wordpress/data';

assets/js/blocks/checkout/order-notes/index.tsx

@@ -3,8 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
-import { CheckboxControl } from '@woocommerce/blocks-checkout';
-import { Textarea } from '@woocommerce/blocks-components';
+import { CheckboxControl, Textarea } from '@woocommerce/blocks-components';
 
 interface CheckoutOrderNotesProps {
 	disabled: boolean;

assets/js/blocks/collection-filters/inner-blocks/stock-filter/style.scss

@@ -2,7 +2,7 @@
 
 //  Import styles we need to render the checkbox list and checkbox control.
 @import "../../../../../../packages/components/checkbox-list/style";
-@import "../../../../../../packages/checkout/components/checkbox-control/style";
+@import "../../../../../../packages/components/checkbox-control/style";
 
 
 .wp-block-woocommerce-stock-filter {

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

@@ -1,80 +1 @@
-/**
- * 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;
+export { CheckboxControl } from '../../../components/checkbox-control';

packages/checkout/components/index.ts

@@ -8,7 +8,11 @@ export { default as Panel } from '../../components/panel';
 export { default as Button } from '../../components/button';
 export { default as Label } from './label';
 export { default as StoreNoticesContainer } from '../../components/store-notices-container';
-export { default as CheckboxControl } from './checkbox-control';
-export { ValidationInputError } from './validation-input-error';
-export { ValidatedTextInput, TextInput } from './text-input';
+export { CheckboxControl } from './checkbox-control';
+export {
+	default as ValidatedTextInput,
+	ValidatedTextInputHandle,
+} from '../../components/text-input/validated-text-input';
+export { default as TextInput } from '../../components/text-input/text-input';
+export { default as ValidationInputError } from '../../components/validation-input-error';
 export { default as StoreNotice } from '../../components/store-notice';

packages/components/checkbox-control/index.tsx

@@ -0,0 +1,80 @@
+/**
+ * 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;

packages/components/checkbox-list/index.tsx

@@ -4,13 +4,12 @@
 import { __, _n, sprintf } from '@wordpress/i18n';
 import { Fragment, useMemo, useState } from '@wordpress/element';
 import classNames from 'classnames';
-import { CheckboxControl } from '@woocommerce/blocks-checkout';
 
 /**
  * Internal dependencies
  */
 import './style.scss';
-
+import { CheckboxControl } from '../checkbox-control';
 interface CheckboxListOptions {
 	label: React.ReactNode;
 	value: string;

packages/components/index.ts

@@ -1,4 +1,5 @@
 export { default as Button } from './button';
+export { default as CheckboxControl } from './checkbox-control';
 export { default as CheckboxList } from './checkbox-list';
 export { Chip, RemovableChip } from './chip';
 export { default as FormStep } from './form-step';