From aacf3d857c0c5c1029bdae18c03b5cb3df6cd122 Mon Sep 17 00:00:00 2001
From: dgreif <dustin.greif@gmail.com>
Date: Mon, 27 Jun 2022 12:50:15 -0700
Subject: [PATCH 1/2] Use import for `focus-visible` instead of require

---
 @types/focus-visible/index.d.ts | 1 +
 src/BaseStyles.tsx              | 6 +++---
 2 files changed, 4 insertions(+), 3 deletions(-)
 create mode 100644 @types/focus-visible/index.d.ts

diff --git a/@types/focus-visible/index.d.ts b/@types/focus-visible/index.d.ts
new file mode 100644
index 00000000000..9324650874f
--- /dev/null
+++ b/@types/focus-visible/index.d.ts
@@ -0,0 +1 @@
+declare module 'focus-visible'
diff --git a/src/BaseStyles.tsx b/src/BaseStyles.tsx
index e4ae52fc79b..90da9934be7 100644
--- a/src/BaseStyles.tsx
+++ b/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'} />

From e8b57874fe6939426c4bbfe007ce778db39a35b0 Mon Sep 17 00:00:00 2001
From: Dusty Greif <dgreif@users.noreply.github.com>
Date: Mon, 27 Jun 2022 13:44:49 -0700
Subject: [PATCH 2/2] Create rude-buckets-fold.md

---
 .changeset/rude-buckets-fold.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/rude-buckets-fold.md

diff --git a/.changeset/rude-buckets-fold.md b/.changeset/rude-buckets-fold.md
new file mode 100644
index 00000000000..4ba365a2368
--- /dev/null
+++ b/.changeset/rude-buckets-fold.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Converted commonjs `require` of `focus-visible` to an esm `import`