fix(checkbox): Chakra Checkbox HTML Validation fix

When validating the Chakra checkbox element in the w3 HTML validator an error for each rendered checkbox comes up: "Element div not allowed as child of element label in this context. (Suppressing further errors from this subtree.)" because each StyledContainer <label> contains a StyledControl <div> and a "chakra-checkb-x__label" <div>. This is causing errors in my project which requires that I have 0 errors when my HTML is validated, so I would like to propose that these <div> elements are converted to <span> elements to resolve the issue.

packages/checkbox/src/checkbox.tsx

@@ -15,7 +15,7 @@ import { useCheckboxGroupContext } from "./checkbox-group"
 import { CheckboxIcon } from "./checkbox-icon"
 import { useCheckbox, UseCheckboxProps } from "./use-checkbox"
 
-const StyledControl = chakra("div", {
+const StyledControl = chakra("span", {
   baseStyle: {
     display: "inline-flex",
     alignItems: "center",
@@ -179,7 +179,7 @@ export const Checkbox = forwardRef<CheckboxProps, "input">((props, ref) => {
           }}
         >
           {children}
-        </chakra.div>
+        </chakra.span>
       )}
     </StyledContainer>
   )