Use import for focus-visible instead of require (#2149)

Author: dgreif

.changeset/rude-buckets-fold.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Converted commonjs `require` of `focus-visible` to an esm `import`

@types/focus-visible/index.d.ts

@@ -0,0 +1 @@
+declare module 'focus-visible'

src/BaseStyles.tsx

@@ -4,6 +4,9 @@ import {COMMON, SystemCommonProps, SystemTypographyProps, TYPOGRAPHY} from './co
 import {useTheme} from './ThemeProvider'
 import {ComponentProps} from './utils/types'
 
+// load polyfill for :focus-visible
+import 'focus-visible'
+
 const GlobalStyle = createGlobalStyle<{colorScheme?: 'light' | 'dark'}>`
   * { box-sizing: border-box; }
   body { margin: 0; }
@@ -36,9 +39,6 @@ function BaseStyles(props: BaseStylesProps) {
   const {children, ...rest} = props
   const {colorScheme} = useTheme()
 
-  // load polyfill for :focus-visible
-  require('focus-visible')
-
   return (
     <Base {...rest} data-portal-root>
       <GlobalStyle colorScheme={colorScheme?.includes('dark') ? 'dark' : 'light'} />