[Checkbox] Control still has the blue outline on focus, even wih focus-visible package applied

Describe the bug

The checkbox square has a blue outline color when focused with mouse click, despite the focus-visible package being used.

To reproduce

1. npm i focus-visible
2. add import "focus-visible/dist/focus-visible" to _app.js
3. add a <Checkbox/> element

Expected behavior

The blue outline should only be visible when using keyboard navigation, just like with Button etc.

System information

“@chakra-ui/core”: “^1.0.0-rc.5”, “next”: “9.5.3”,

[ehynds]

Another option if you want to set this globally in your theme:

const theme = extendTheme({
  components: {
    Checkbox: {
      baseStyle: {
        control: {
          _focus: {
            boxShadow: 'none',
          },
        },
      },
    }
  }
});

[lingyun-z]

I added these in my global theme and it works as expected.

*:focus {
  box-shadow: none !important;
}

*[data-focus] {
  box-shadow: none !important;
}