Checkbox UI issue with WordPress 6.6

Describe the bug:

I found this issue when I was doing WP 6.6 compatibility testing in issue https://github.com/woocommerce/pinterest-for-woocommerce/issues/1030.

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

Steps to reproduce:

Use WordPress 6.6.
Install and activate the Pinterest plugin. Complete the onboarding steps.
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 https://github.com/WordPress/gutenberg/pull/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>

woocommerce / pinterest-for-woocommerce