Checkbox UI issue with WordPress 6.6

[ecgan]

Describe the bug:

I found this issue when I was doing WP 6.6 compatibility testing in issue #1030.

The checkbox control does not show up correctly in the Settings page. See screenshot below:

Steps to reproduce:

1. Use WordPress 6.6.
2. Install and activate the Pinterest plugin. Complete the onboarding steps.
3. Go to Settings page (/wp-admin/admin.php?page=wc-admin&path=%2Fpinterest%2Fsettings)

Expected behavior:

The checkboxes should show up nicely, and we should be able to toggle them.

Actual behavior:

The checkboxes do not show up nicely, and we are not able to toggle them.

Cause of issue:

This issue is due to the changes in WordPress/gutenberg#60475. The $checkbox-input-size in the global scope is changed to --checkbox-input-size under .components-checkbox-control new CSS class. In the @wordpress/components package that we bundled in this Pinterest plugin, the checkbox control does not have components-checkbox-control CSS class.

For reference, here's the checkbox control HTML created by Pinterest extension - it does not have components-checkbox-control class:

<div class="components-base-control css-wdf2ti-Wrapper e1puf3u0">
	<div
		class="components-base-control__field css-11vcxb9-StyledField e1puf3u1"
	>
		<span class="components-checkbox-control__input-container"
			><input
				id="inspector-checkbox-control-1"
				class="components-checkbox-control__input"
				type="checkbox"
				value="1"
				checked="" /><svg
				xmlns="http://www.w3.org/2000/svg"
				viewBox="0 0 24 24"
				width="24"
				height="24"
				role="presentation"
				class="components-checkbox-control__checked"
				aria-hidden="true"
				focusable="false"
			>
				<path
					d="M18.3 5.6L9.9 16.9l-4.6-3.4-.9 1.2 5.8 4.3 9.3-12.6z"
				></path></svg></span
		><label
			class="components-checkbox-control__label"
			for="inspector-checkbox-control-1"
			>Enable Debug Logging</label
		>
	</div>
</div>

Here's the checkbox control HTML for WP 6.6, taken from https://wordpress.github.io/gutenberg/?path=/docs/components-checkboxcontrol--docs:

<div
	class="components-base-control components-checkbox-control css-qy3gpb ej5x27r4"
>
	<div class="components-base-control__field css-1t5ousf ej5x27r3">
		<div
			data-wp-c16t="true"
			data-wp-component="HStack"
			class="components-flex components-h-stack css-1et9n8m e19lxcc00"
		>
			<span class="components-checkbox-control__input-container"
				><input
					id="inspector-checkbox-control-4"
					class="components-checkbox-control__input"
					type="checkbox"
					aria-describedby="inspector-checkbox-control-4__help"
					value="1"
					checked="" /><svg
					xmlns="http://www.w3.org/2000/svg"
					viewBox="0 0 24 24"
					width="24"
					height="24"
					role="presentation"
					class="components-checkbox-control__checked"
					aria-hidden="true"
					focusable="false"
				>
					<path
						d="M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z"
					></path></svg></span
			><label
				class="components-checkbox-control__label"
				for="inspector-checkbox-control-4"
				>Is author</label
			>
		</div>
	</div>
	<p
		id="inspector-checkbox-control-4__help"
		class="components-base-control__help css-1n1x27z ej5x27r1"
	>
		<span class="components-checkbox-control__help"
			>Is the user an author or not?</span
		>
	</p>
</div>

[ecgan]

I found the cause of issue and added it into the issue description above.