feat: add new design for join scandic friends checkbox

components/TempDesignSystem/Form/Checkbox/index.tsx

@@ -12,6 +12,7 @@ import styles from "./checkbox.module.css"
 import { CheckboxProps } from "@/types/components/checkbox"
 
 export default function Checkbox({
+  className,
   name,
   children,
   registerOptions,
@@ -25,16 +26,17 @@ export default function Checkbox({
 
   return (
     <AriaCheckbox
-      className={styles.container}
+      className={`${styles.container} ${className}`}
       isSelected={field.value}
       onChange={field.onChange}
       data-testid={name}
       isDisabled={registerOptions?.disabled}
+      excludeFromTabOrder
     >
       {({ isSelected }) => (
         <>
           <span className={styles.checkboxContainer}>
-            <span className={styles.checkbox}>
+            <span className={styles.checkbox} tabIndex={0}>
               {isSelected && <CheckIcon color="white" />}
             </span>
             {children}