fix: harden kumo base component styling

components/ui/checkbox.tsx

@@ -3,6 +3,8 @@
 import * as React from "react";
 import { Checkbox as KumoCheckbox, type CheckboxProps as KumoCheckboxProps } from "@cloudflare/kumo/components/checkbox";
 
+import { cn } from "@/lib/utils";
+
 type CheckboxProps = Omit<KumoCheckboxProps, "checked" | "onCheckedChange"> & {
   checked?: boolean;
   defaultChecked?: boolean;
@@ -11,6 +13,7 @@ type CheckboxProps = Omit<KumoCheckboxProps, "checked" | "onCheckedChange"> & {
 
 export function Checkbox({
   checked,
+  className,
   defaultChecked = false,
   name,
   onCheckedChange,
@@ -21,9 +24,10 @@ export function Checkbox({
   const currentChecked = isControlled ? checked : uncontrolledChecked;
 
   return (
-    <>
+    <span className="teatea-checkbox contents">
       <KumoCheckbox
         checked={currentChecked}
+        className={cn("teatea-checkbox-control", className)}
         onCheckedChange={(nextChecked) => {
           const booleanValue = Boolean(nextChecked);
           if (!isControlled) {
@@ -34,6 +38,6 @@ export function Checkbox({
         {...props}
       />
       {name && currentChecked ? <input name={name} type="hidden" value="on" /> : null}
-    </>
+    </span>
   );
 }