chore: consolidates styles

src/admin/components/forms/field-types/Checkbox/Input.tsx

@@ -28,15 +28,12 @@ export const CheckboxInput: React.FC<CheckboxInputProps> = (props) => {
     required,
   } = props;
 
-  const [isFocused, setIsFocused] = React.useState(false);
-
   return (
     <span
       className={[
         baseClass,
         checked && `${baseClass}--checked`,
         readOnly && `${baseClass}--read-only`,
-        isFocused && `${baseClass}--is-focused`,
       ].filter(Boolean).join(' ')}
     >
       <input
@@ -50,8 +47,6 @@ export const CheckboxInput: React.FC<CheckboxInputProps> = (props) => {
       />
       <button
         type="button"
-        onFocus={() => setIsFocused(true)}
-        onBlur={() => setIsFocused(false)}
         onClick={onToggle}
       >
         <span className={`${baseClass}__input`}>

src/admin/components/forms/field-types/Checkbox/index.scss

@@ -66,6 +66,12 @@
       outline: none;
     }
 
+    &:focus {
+      .custom-checkbox__input {
+        box-shadow: 0 0 3px 3px var(--theme-success-400);
+      }
+    }
+
     &:hover {
       svg {
         opacity: .2;
@@ -82,12 +88,4 @@
       }
     }
   }
-
-  &--is-focused {
-    button {
-      .custom-checkbox__input {
-        box-shadow: 0 0 3px 3px var(--theme-success-400);
-      }
-    }
-  }
 }