diff --git a/.changeset/nervous-keys-draw.md b/.changeset/nervous-keys-draw.md
new file mode 100644
index 00000000000..e5e39d4f01b
--- /dev/null
+++ b/.changeset/nervous-keys-draw.md
@@ -0,0 +1,7 @@
+---
+"@primer/react": major
+---
+
+Convert @primer/react to ESM and no longer generate CommonJS bundle.
+
+
diff --git a/.eslintrc.js b/.eslintrc.cjs
similarity index 100%
rename from .eslintrc.js
rename to .eslintrc.cjs
diff --git a/babel-defines.js b/babel-defines.cjs
similarity index 100%
rename from babel-defines.js
rename to babel-defines.cjs
diff --git a/babel.config.js b/babel.config.cjs
similarity index 95%
rename from babel.config.js
rename to babel.config.cjs
index aff41bc900c..27ae2ea50ea 100644
--- a/babel.config.js
+++ b/babel.config.cjs
@@ -1,4 +1,4 @@
-const defines = require('./babel-defines')
+const defines = require('./babel-defines.cjs')
function replacementPlugin(env) {
return ['babel-plugin-transform-replace-expressions', {replace: defines[env]}]
diff --git a/docs/gatsby-node.js b/docs/gatsby-node.js
index e02b8640798..08ea5daf81b 100644
--- a/docs/gatsby-node.js
+++ b/docs/gatsby-node.js
@@ -1,4 +1,4 @@
-const defines = require('../babel-defines')
+const defines = require('../babel-defines.cjs')
const docgen = require('react-docgen-typescript')
const globby = require('globby')
diff --git a/docs/package-lock.json b/docs/package-lock.json
index 5e6e06d6cdb..6b6c5dfb4b4 100644
--- a/docs/package-lock.json
+++ b/docs/package-lock.json
@@ -18,6 +18,7 @@
"gatsby-plugin-alias-imports": "^1.0.5",
"gatsby-plugin-typescript": "2.10.0",
"graphql": "^15.8.0",
+ "path": "^0.12.7",
"prop-types": "^15.7.2",
"react": "^18.2.0",
"react-docgen-typescript": "^2.0.0",
@@ -4848,36 +4849,6 @@
"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
"integrity": "sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA=="
},
- "node_modules/babel-eslint": {
- "version": "10.1.0",
- "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz",
- "integrity": "sha512-ifWaTHQ0ce+448CYop8AdrQiBsGrnC+bMgfyKFdi6EsPLTAWG+QfyDeM6OH+FmWnKvEq5NnBMLvlBUPKQZoDSg==",
- "deprecated": "babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.",
- "peer": true,
- "dependencies": {
- "@babel/code-frame": "^7.0.0",
- "@babel/parser": "^7.7.0",
- "@babel/traverse": "^7.7.0",
- "@babel/types": "^7.7.0",
- "eslint-visitor-keys": "^1.0.0",
- "resolve": "^1.12.0"
- },
- "engines": {
- "node": ">=6"
- },
- "peerDependencies": {
- "eslint": ">= 4.12.1"
- }
- },
- "node_modules/babel-eslint/node_modules/eslint-visitor-keys": {
- "version": "1.3.0",
- "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
- "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
- "peer": true,
- "engines": {
- "node": ">=4"
- }
- },
"node_modules/babel-jest": {
"version": "24.9.0",
"resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-24.9.0.tgz",
@@ -18409,6 +18380,15 @@
"cross-spawn": "^6.0.5"
}
},
+ "node_modules/path": {
+ "version": "0.12.7",
+ "resolved": "https://registry.npmjs.org/path/-/path-0.12.7.tgz",
+ "integrity": "sha512-aXXC6s+1w7otVF9UletFkFcDsJeO7lSZBPUQhtb5O0xJe8LtYhj/GxldoL09bBj9+ZmE2hNoHqQSFMN5fikh4Q==",
+ "dependencies": {
+ "process": "^0.11.1",
+ "util": "^0.10.3"
+ }
+ },
"node_modules/path-browserify": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz",
@@ -19541,6 +19521,14 @@
"node": ">=6"
}
},
+ "node_modules/process": {
+ "version": "0.11.10",
+ "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
+ "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==",
+ "engines": {
+ "node": ">= 0.6.0"
+ }
+ },
"node_modules/process-nextick-args": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
@@ -23959,19 +23947,6 @@
"is-typedarray": "^1.0.0"
}
},
- "node_modules/typescript": {
- "version": "5.1.3",
- "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.1.3.tgz",
- "integrity": "sha512-XH627E9vkeqhlZFQuL+UsyAXEnibT0kWR2FWONlr4sTjvxyJYnyefgrkyECLzM5NenmKzRAy2rR/OlYLA1HkZw==",
- "peer": true,
- "bin": {
- "tsc": "bin/tsc",
- "tsserver": "bin/tsserver"
- },
- "engines": {
- "node": ">=14.17"
- }
- },
"node_modules/unbox-primitive": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz",
@@ -24753,6 +24728,14 @@
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
"integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
},
+ "node_modules/util": {
+ "version": "0.10.4",
+ "resolved": "https://registry.npmjs.org/util/-/util-0.10.4.tgz",
+ "integrity": "sha512-0Pm9hTQ3se5ll1XihRic3FDIku70C+iHUdT/W926rSgHV5QgXsYbKZN8MSC3tJtSkhuROzvsQjAaFENRXr+19A==",
+ "dependencies": {
+ "inherits": "2.0.3"
+ }
+ },
"node_modules/util-deprecate": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -24773,6 +24756,11 @@
"url": "https://github.com/sponsors/ljharb"
}
},
+ "node_modules/util/node_modules/inherits": {
+ "version": "2.0.3",
+ "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+ "integrity": "sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw=="
+ },
"node_modules/utila": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/utila/-/utila-0.4.0.tgz",
@@ -27486,8 +27474,7 @@
"ws": {
"version": "7.4.5",
"resolved": "https://registry.npmjs.org/ws/-/ws-7.4.5.tgz",
- "integrity": "sha512-xzyu3hFvomRfXKH8vOFMU3OguG6oOvhXMo3xsGy3xWExqaM2dxBbVxuD99O7m3ZUFMvvscsZDqxfgMaRr/Nr1g==",
- "requires": {}
+ "integrity": "sha512-xzyu3hFvomRfXKH8vOFMU3OguG6oOvhXMo3xsGy3xWExqaM2dxBbVxuD99O7m3ZUFMvvscsZDqxfgMaRr/Nr1g=="
}
}
},
@@ -27906,8 +27893,7 @@
"@mdx-js/react": {
"version": "1.6.22",
"resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-1.6.22.tgz",
- "integrity": "sha512-TDoPum4SHdfPiGSAaRBw7ECyI8VaHpK8GJugbJIJuqyh6kzw9ZLJZW3HGL3NNrJGxcAixUvqROm+YuQOo5eXtg==",
- "requires": {}
+ "integrity": "sha512-TDoPum4SHdfPiGSAaRBw7ECyI8VaHpK8GJugbJIJuqyh6kzw9ZLJZW3HGL3NNrJGxcAixUvqROm+YuQOo5eXtg=="
},
"@mdx-js/util": {
"version": "1.6.22",
@@ -28121,8 +28107,7 @@
"@primer/octicons-react": {
"version": "17.7.0",
"resolved": "https://registry.npmjs.org/@primer/octicons-react/-/octicons-react-17.7.0.tgz",
- "integrity": "sha512-rxJiArra+q7lorhzQH223btMcRR8di9TUei9DhQG18jmVEI+wQTY+MypI5FZqU8UyehBOtcnD4TWx+i4Zwpz5Q==",
- "requires": {}
+ "integrity": "sha512-rxJiArra+q7lorhzQH223btMcRR8di9TUei9DhQG18jmVEI+wQTY+MypI5FZqU8UyehBOtcnD4TWx+i4Zwpz5Q=="
},
"@primer/primitives": {
"version": "4.1.0",
@@ -28157,8 +28142,7 @@
"@primer/octicons-react": {
"version": "16.1.1",
"resolved": "https://registry.npmjs.org/@primer/octicons-react/-/octicons-react-16.1.1.tgz",
- "integrity": "sha512-xCxQ5z23ol7yDuJs85Lc4ARzyoay+b3zOhAKkEMU7chk0xi2hT2OnRP23QUudNNDPTGozX268RGYLexUa6P4xw==",
- "requires": {}
+ "integrity": "sha512-xCxQ5z23ol7yDuJs85Lc4ARzyoay+b3zOhAKkEMU7chk0xi2hT2OnRP23QUudNNDPTGozX268RGYLexUa6P4xw=="
},
"@primer/primitives": {
"version": "7.6.0",
@@ -28170,8 +28154,7 @@
"@radix-ui/react-polymorphic": {
"version": "0.0.14",
"resolved": "https://registry.npmjs.org/@radix-ui/react-polymorphic/-/react-polymorphic-0.0.14.tgz",
- "integrity": "sha512-9nsMZEDU3LeIUeHJrpkkhZVxu/9Fc7P2g2I3WR+uA9mTbNC3hGaabi0dV6wg0CfHb+m4nSs1pejbE/5no3MJTA==",
- "requires": {}
+ "integrity": "sha512-9nsMZEDU3LeIUeHJrpkkhZVxu/9Fc7P2g2I3WR+uA9mTbNC3hGaabi0dV6wg0CfHb+m4nSs1pejbE/5no3MJTA=="
},
"@react-aria/ssr": {
"version": "3.1.0",
@@ -29305,8 +29288,7 @@
"acorn-jsx": {
"version": "5.3.1",
"resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.1.tgz",
- "integrity": "sha512-K0Ptm/47OKfQRpNQ2J/oIN/3QYiK6FwW+eJbILhsdxh2WTLdl+30o8aGdTbm5JbffpFFAg/g+zi1E+jvJha5ng==",
- "requires": {}
+ "integrity": "sha512-K0Ptm/47OKfQRpNQ2J/oIN/3QYiK6FwW+eJbILhsdxh2WTLdl+30o8aGdTbm5JbffpFFAg/g+zi1E+jvJha5ng=="
},
"acorn-walk": {
"version": "6.2.0",
@@ -29341,14 +29323,12 @@
"ajv-errors": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/ajv-errors/-/ajv-errors-1.0.1.tgz",
- "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==",
- "requires": {}
+ "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ=="
},
"ajv-keywords": {
"version": "3.5.2",
"resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
- "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
- "requires": {}
+ "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ=="
},
"alphanum-sort": {
"version": "1.0.2",
@@ -29704,28 +29684,6 @@
"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
"integrity": "sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA=="
},
- "babel-eslint": {
- "version": "10.1.0",
- "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz",
- "integrity": "sha512-ifWaTHQ0ce+448CYop8AdrQiBsGrnC+bMgfyKFdi6EsPLTAWG+QfyDeM6OH+FmWnKvEq5NnBMLvlBUPKQZoDSg==",
- "peer": true,
- "requires": {
- "@babel/code-frame": "^7.0.0",
- "@babel/parser": "^7.7.0",
- "@babel/traverse": "^7.7.0",
- "@babel/types": "^7.7.0",
- "eslint-visitor-keys": "^1.0.0",
- "resolve": "^1.12.0"
- },
- "dependencies": {
- "eslint-visitor-keys": {
- "version": "1.3.0",
- "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
- "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
- "peer": true
- }
- }
- },
"babel-jest": {
"version": "24.9.0",
"resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-24.9.0.tgz",
@@ -29897,8 +29855,7 @@
"babel-plugin-remove-graphql-queries": {
"version": "2.16.1",
"resolved": "https://registry.npmjs.org/babel-plugin-remove-graphql-queries/-/babel-plugin-remove-graphql-queries-2.16.1.tgz",
- "integrity": "sha512-PkHJuRodMp4p617a/ZVhV8elBhRoFpOTpdu2DaApXJFIsDJWhjZ8d4BGbbFCT/yKJrhRDTdqg1r5AhWEaEUKkw==",
- "requires": {}
+ "integrity": "sha512-PkHJuRodMp4p617a/ZVhV8elBhRoFpOTpdu2DaApXJFIsDJWhjZ8d4BGbbFCT/yKJrhRDTdqg1r5AhWEaEUKkw=="
},
"babel-plugin-styled-components": {
"version": "2.0.2",
@@ -31831,8 +31788,7 @@
"cssnano-utils": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/cssnano-utils/-/cssnano-utils-2.0.1.tgz",
- "integrity": "sha512-i8vLRZTnEH9ubIyfdZCAdIdgnHAUeQeByEeQ2I7oTilvP9oHO6RScpeq3GsFUVqeB8uZgOQ9pw8utofNn32hhQ==",
- "requires": {}
+ "integrity": "sha512-i8vLRZTnEH9ubIyfdZCAdIdgnHAUeQeByEeQ2I7oTilvP9oHO6RScpeq3GsFUVqeB8uZgOQ9pw8utofNn32hhQ=="
},
"csso": {
"version": "4.2.0",
@@ -32463,8 +32419,7 @@
"ws": {
"version": "7.4.6",
"resolved": "https://registry.npmjs.org/ws/-/ws-7.4.6.tgz",
- "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==",
- "requires": {}
+ "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A=="
}
}
},
@@ -32488,8 +32443,7 @@
"ws": {
"version": "7.4.6",
"resolved": "https://registry.npmjs.org/ws/-/ws-7.4.6.tgz",
- "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==",
- "requires": {}
+ "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A=="
}
}
},
@@ -33211,8 +33165,7 @@
"eslint-plugin-react-hooks": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.2.0.tgz",
- "integrity": "sha512-623WEiZJqxR7VdxFCKLI6d6LLpwJkGPYKODnkH3D7WpOG5KM8yWueBd8TLsNAetEJNF5iJmolaAKO3F8yzyVBQ==",
- "requires": {}
+ "integrity": "sha512-623WEiZJqxR7VdxFCKLI6d6LLpwJkGPYKODnkH3D7WpOG5KM8yWueBd8TLsNAetEJNF5iJmolaAKO3F8yzyVBQ=="
},
"eslint-scope": {
"version": "5.1.1",
@@ -34512,8 +34465,7 @@
"babel-plugin-remove-graphql-queries": {
"version": "3.7.1",
"resolved": "https://registry.npmjs.org/babel-plugin-remove-graphql-queries/-/babel-plugin-remove-graphql-queries-3.7.1.tgz",
- "integrity": "sha512-9fANNkzCZJ0i65FXGnoeg/knDPC3riazCDyRrcH/2DVovxChAMSN2mqh/7eohJ8IrB/0e6cwLO4VirqanSk1Hw==",
- "requires": {}
+ "integrity": "sha512-9fANNkzCZJ0i65FXGnoeg/knDPC3riazCDyRrcH/2DVovxChAMSN2mqh/7eohJ8IrB/0e6cwLO4VirqanSk1Hw=="
},
"braces": {
"version": "3.0.2",
@@ -35886,8 +35838,7 @@
"ws": {
"version": "7.5.0",
"resolved": "https://registry.npmjs.org/ws/-/ws-7.5.0.tgz",
- "integrity": "sha512-6ezXvzOZupqKj4jUqbQ9tXuJNo+BR2gU8fFRk3XCP3e0G6WT414u5ELe6Y0vtp7kmSJ3F7YWObSNr1ESsgi4vw==",
- "requires": {}
+ "integrity": "sha512-6ezXvzOZupqKj4jUqbQ9tXuJNo+BR2gU8fFRk3XCP3e0G6WT414u5ELe6Y0vtp7kmSJ3F7YWObSNr1ESsgi4vw=="
}
}
},
@@ -36347,14 +36298,12 @@
"graphql-type-json": {
"version": "0.3.2",
"resolved": "https://registry.npmjs.org/graphql-type-json/-/graphql-type-json-0.3.2.tgz",
- "integrity": "sha512-J+vjof74oMlCWXSvt0DOf2APEdZOCdubEvGDUAlqH//VBYcOYsGgRW7Xzorr44LvkjiuvecWc8fChxuZZbChtg==",
- "requires": {}
+ "integrity": "sha512-J+vjof74oMlCWXSvt0DOf2APEdZOCdubEvGDUAlqH//VBYcOYsGgRW7Xzorr44LvkjiuvecWc8fChxuZZbChtg=="
},
"graphql-ws": {
"version": "4.9.0",
"resolved": "https://registry.npmjs.org/graphql-ws/-/graphql-ws-4.9.0.tgz",
- "integrity": "sha512-sHkK9+lUm20/BGawNEWNtVAeJzhZeBg21VmvmLoT5NdGVeZWv5PdIhkcayQIAgjSyyQ17WMKmbDijIPG2On+Ag==",
- "requires": {}
+ "integrity": "sha512-sHkK9+lUm20/BGawNEWNtVAeJzhZeBg21VmvmLoT5NdGVeZWv5PdIhkcayQIAgjSyyQ17WMKmbDijIPG2On+Ag=="
},
"gray-matter": {
"version": "4.0.3",
@@ -36883,8 +36832,7 @@
"icss-utils": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
- "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
- "requires": {}
+ "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA=="
},
"ieee754": {
"version": "1.2.1",
@@ -37630,8 +37578,7 @@
"isomorphic-ws": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/isomorphic-ws/-/isomorphic-ws-4.0.1.tgz",
- "integrity": "sha512-BhBvN2MBpWTaSHdWRb/bwdZJ1WaehQ2L1KngkCkfLUGF0mAWAT1sQUQacEmQ0jXkFw/czDXPNQSL5u2/Krsz1w==",
- "requires": {}
+ "integrity": "sha512-BhBvN2MBpWTaSHdWRb/bwdZJ1WaehQ2L1KngkCkfLUGF0mAWAT1sQUQacEmQ0jXkFw/czDXPNQSL5u2/Krsz1w=="
},
"isstream": {
"version": "0.1.2",
@@ -38056,8 +38003,7 @@
"jest-pnp-resolver": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/jest-pnp-resolver/-/jest-pnp-resolver-1.2.2.tgz",
- "integrity": "sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w==",
- "requires": {}
+ "integrity": "sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w=="
},
"jest-regex-util": {
"version": "24.9.0",
@@ -39126,8 +39072,7 @@
"meros": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/meros/-/meros-1.1.4.tgz",
- "integrity": "sha512-E9ZXfK9iQfG9s73ars9qvvvbSIkJZF5yOo9j4tcwM5tN8mUKfj/EKN5PzOr3ZH0y5wL7dLAHw3RVEfpQV9Q7VQ==",
- "requires": {}
+ "integrity": "sha512-E9ZXfK9iQfG9s73ars9qvvvbSIkJZF5yOo9j4tcwM5tN8mUKfj/EKN5PzOr3ZH0y5wL7dLAHw3RVEfpQV9Q7VQ=="
},
"methods": {
"version": "1.1.2",
@@ -40155,6 +40100,15 @@
"cross-spawn": "^6.0.5"
}
},
+ "path": {
+ "version": "0.12.7",
+ "resolved": "https://registry.npmjs.org/path/-/path-0.12.7.tgz",
+ "integrity": "sha512-aXXC6s+1w7otVF9UletFkFcDsJeO7lSZBPUQhtb5O0xJe8LtYhj/GxldoL09bBj9+ZmE2hNoHqQSFMN5fikh4Q==",
+ "requires": {
+ "process": "^0.11.1",
+ "util": "^0.10.3"
+ }
+ },
"path-browserify": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz",
@@ -40431,32 +40385,27 @@
"postcss-discard-comments": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-5.0.1.tgz",
- "integrity": "sha512-lgZBPTDvWrbAYY1v5GYEv8fEO/WhKOu/hmZqmCYfrpD6eyDWWzAOsl2rF29lpvziKO02Gc5GJQtlpkTmakwOWg==",
- "requires": {}
+ "integrity": "sha512-lgZBPTDvWrbAYY1v5GYEv8fEO/WhKOu/hmZqmCYfrpD6eyDWWzAOsl2rF29lpvziKO02Gc5GJQtlpkTmakwOWg=="
},
"postcss-discard-duplicates": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-5.0.1.tgz",
- "integrity": "sha512-svx747PWHKOGpAXXQkCc4k/DsWo+6bc5LsVrAsw+OU+Ibi7klFZCyX54gjYzX4TH+f2uzXjRviLARxkMurA2bA==",
- "requires": {}
+ "integrity": "sha512-svx747PWHKOGpAXXQkCc4k/DsWo+6bc5LsVrAsw+OU+Ibi7klFZCyX54gjYzX4TH+f2uzXjRviLARxkMurA2bA=="
},
"postcss-discard-empty": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-5.0.1.tgz",
- "integrity": "sha512-vfU8CxAQ6YpMxV2SvMcMIyF2LX1ZzWpy0lqHDsOdaKKLQVQGVP1pzhrI9JlsO65s66uQTfkQBKBD/A5gp9STFw==",
- "requires": {}
+ "integrity": "sha512-vfU8CxAQ6YpMxV2SvMcMIyF2LX1ZzWpy0lqHDsOdaKKLQVQGVP1pzhrI9JlsO65s66uQTfkQBKBD/A5gp9STFw=="
},
"postcss-discard-overridden": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-5.0.1.tgz",
- "integrity": "sha512-Y28H7y93L2BpJhrdUR2SR2fnSsT+3TVx1NmVQLbcnZWwIUpJ7mfcTC6Za9M2PG6w8j7UQRfzxqn8jU2VwFxo3Q==",
- "requires": {}
+ "integrity": "sha512-Y28H7y93L2BpJhrdUR2SR2fnSsT+3TVx1NmVQLbcnZWwIUpJ7mfcTC6Za9M2PG6w8j7UQRfzxqn8jU2VwFxo3Q=="
},
"postcss-flexbugs-fixes": {
"version": "5.0.2",
"resolved": "https://registry.npmjs.org/postcss-flexbugs-fixes/-/postcss-flexbugs-fixes-5.0.2.tgz",
- "integrity": "sha512-18f9voByak7bTktR2QgDveglpn9DTbBWPUzSOe9g0N4WR/2eSt6Vrcbf0hmspvMI6YWGywz6B9f7jzpFNJJgnQ==",
- "requires": {}
+ "integrity": "sha512-18f9voByak7bTktR2QgDveglpn9DTbBWPUzSOe9g0N4WR/2eSt6Vrcbf0hmspvMI6YWGywz6B9f7jzpFNJJgnQ=="
},
"postcss-loader": {
"version": "5.3.0",
@@ -40582,8 +40531,7 @@
"postcss-modules-extract-imports": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz",
- "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==",
- "requires": {}
+ "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw=="
},
"postcss-modules-local-by-default": {
"version": "4.0.0",
@@ -40621,8 +40569,7 @@
"postcss-normalize-charset": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-5.0.1.tgz",
- "integrity": "sha512-6J40l6LNYnBdPSk+BHZ8SF+HAkS4q2twe5jnocgd+xWpz/mx/5Sa32m3W1AA8uE8XaXN+eg8trIlfu8V9x61eg==",
- "requires": {}
+ "integrity": "sha512-6J40l6LNYnBdPSk+BHZ8SF+HAkS4q2twe5jnocgd+xWpz/mx/5Sa32m3W1AA8uE8XaXN+eg8trIlfu8V9x61eg=="
},
"postcss-normalize-display-values": {
"version": "5.0.1",
@@ -40993,14 +40940,18 @@
"prism-react-renderer": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/prism-react-renderer/-/prism-react-renderer-1.2.1.tgz",
- "integrity": "sha512-w23ch4f75V1Tnz8DajsYKvY5lF7H1+WvzvLUcF0paFxkTHSp42RS0H5CttdN2Q8RR3DRGZ9v5xD/h3n8C8kGmg==",
- "requires": {}
+ "integrity": "sha512-w23ch4f75V1Tnz8DajsYKvY5lF7H1+WvzvLUcF0paFxkTHSp42RS0H5CttdN2Q8RR3DRGZ9v5xD/h3n8C8kGmg=="
},
"prismjs": {
"version": "1.28.0",
"resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.28.0.tgz",
"integrity": "sha512-8aaXdYvl1F7iC7Xm1spqSaY/OJBpYW3v+KJ+F17iYxvdc8sfjW194COK5wVhMZX45tGteiBQgdvD/nhxcRwylw=="
},
+ "process": {
+ "version": "0.11.10",
+ "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
+ "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A=="
+ },
"process-nextick-args": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
@@ -41378,8 +41329,7 @@
"react-docgen-typescript": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/react-docgen-typescript/-/react-docgen-typescript-2.0.0.tgz",
- "integrity": "sha512-lPf+KJKAo6a9klKyK4y8WwgaX+6t5/HkVjHOpJDMbmaXfXcV7zP0QgWtnEOc3ccEUXKvlHMGUMIS9f6Zgo1BSw==",
- "requires": {}
+ "integrity": "sha512-lPf+KJKAo6a9klKyK4y8WwgaX+6t5/HkVjHOpJDMbmaXfXcV7zP0QgWtnEOc3ccEUXKvlHMGUMIS9f6Zgo1BSw=="
},
"react-dom": {
"version": "18.2.0",
@@ -41551,14 +41501,12 @@
"react-side-effect": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.1.tgz",
- "integrity": "sha512-2FoTQzRNTncBVtnzxFOk2mCpcfxQpenBMbk5kSVBg5UcPqV9fRbgY2zhb7GTWWOlpFmAxhClBDlIq8Rsubz1yQ==",
- "requires": {}
+ "integrity": "sha512-2FoTQzRNTncBVtnzxFOk2mCpcfxQpenBMbk5kSVBg5UcPqV9fRbgY2zhb7GTWWOlpFmAxhClBDlIq8Rsubz1yQ=="
},
"react-simple-code-editor": {
"version": "0.11.0",
"resolved": "https://registry.npmjs.org/react-simple-code-editor/-/react-simple-code-editor-0.11.0.tgz",
- "integrity": "sha512-xGfX7wAzspl113ocfKQAR8lWPhavGWHL3xSzNLeseDRHysT+jzRBi/ExdUqevSMos+7ZtdfeuBOXtgk9HTwsrw==",
- "requires": {}
+ "integrity": "sha512-xGfX7wAzspl113ocfKQAR8lWPhavGWHL3xSzNLeseDRHysT+jzRBi/ExdUqevSMos+7ZtdfeuBOXtgk9HTwsrw=="
},
"react-style-singleton": {
"version": "2.1.1",
@@ -43739,8 +43687,7 @@
"stylis-rule-sheet": {
"version": "0.0.10",
"resolved": "https://registry.npmjs.org/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz",
- "integrity": "sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw==",
- "requires": {}
+ "integrity": "sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw=="
},
"subscriptions-transport-ws": {
"version": "0.9.19",
@@ -44436,12 +44383,6 @@
"is-typedarray": "^1.0.0"
}
},
- "typescript": {
- "version": "5.1.3",
- "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.1.3.tgz",
- "integrity": "sha512-XH627E9vkeqhlZFQuL+UsyAXEnibT0kWR2FWONlr4sTjvxyJYnyefgrkyECLzM5NenmKzRAy2rR/OlYLA1HkZw==",
- "peer": true
- },
"unbox-primitive": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz",
@@ -44975,8 +44916,7 @@
"use-callback-ref": {
"version": "1.2.5",
"resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.2.5.tgz",
- "integrity": "sha512-gN3vgMISAgacF7sqsLPByqoePooY3n2emTH59Ur5d/M8eg4WTWu1xp8i8DHjohftIyEx0S08RiYxbffr4j8Peg==",
- "requires": {}
+ "integrity": "sha512-gN3vgMISAgacF7sqsLPByqoePooY3n2emTH59Ur5d/M8eg4WTWu1xp8i8DHjohftIyEx0S08RiYxbffr4j8Peg=="
},
"use-sidecar": {
"version": "1.0.5",
@@ -44994,6 +44934,21 @@
}
}
},
+ "util": {
+ "version": "0.10.4",
+ "resolved": "https://registry.npmjs.org/util/-/util-0.10.4.tgz",
+ "integrity": "sha512-0Pm9hTQ3se5ll1XihRic3FDIku70C+iHUdT/W926rSgHV5QgXsYbKZN8MSC3tJtSkhuROzvsQjAaFENRXr+19A==",
+ "requires": {
+ "inherits": "2.0.3"
+ },
+ "dependencies": {
+ "inherits": {
+ "version": "2.0.3",
+ "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+ "integrity": "sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw=="
+ }
+ }
+ },
"util-deprecate": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
diff --git a/docs/package.json b/docs/package.json
index c93543a650a..a7e37f4d1b8 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -23,6 +23,7 @@
"gatsby-plugin-alias-imports": "^1.0.5",
"gatsby-plugin-typescript": "2.10.0",
"graphql": "^15.8.0",
+ "path": "^0.12.7",
"prop-types": "^15.7.2",
"react": "^18.2.0",
"react-docgen-typescript": "^2.0.0",
diff --git a/docs/src/@primer/gatsby-theme-doctocat/mdx-components.js b/docs/src/@primer/gatsby-theme-doctocat/mdx-components.js
index 894ffda8652..ec201486757 100644
--- a/docs/src/@primer/gatsby-theme-doctocat/mdx-components.js
+++ b/docs/src/@primer/gatsby-theme-doctocat/mdx-components.js
@@ -1,8 +1,6 @@
import {Box, Link} from '@primer/react'
import InlineCode from '@primer/gatsby-theme-doctocat/src/components/inline-code'
import {ComponentChecklist} from '../../component-checklist'
-// eslint-disable-next-line import/no-deprecated
-import {Props} from '../../props'
import {PropsTable} from '../../props-table'
import {ComponentProps} from '../../component-props'
@@ -11,8 +9,6 @@ export default {
Link,
InlineCode,
ComponentChecklist,
- // eslint-disable-next-line import/no-deprecated
- Props,
PropsTable,
ComponentProps,
// HACK: MDX doesn't support rendering subcomponents with dot notation
diff --git a/docs/src/props.js b/docs/src/props.js
deleted file mode 100644
index 04b9bf73ede..00000000000
--- a/docs/src/props.js
+++ /dev/null
@@ -1,67 +0,0 @@
-import {H3} from '@primer/gatsby-theme-doctocat/src/components/heading'
-import Paragraph from '@primer/gatsby-theme-doctocat/src/components/paragraph'
-import {Flash} from '@primer/react'
-import {graphql, useStaticQuery} from 'gatsby'
-import React from 'react'
-import {PropsTable} from './props-table'
-
-/**
- * Render prop documentation for the given component
- *
- * @deprecated This component does not reliably generate the correct prop types. Use `ComponentProps` instead.
- */
-export function Props({of}) {
- const data = useStaticQuery(graphql`
- query {
- allComponentMetadata {
- nodes {
- id
- name
- props {
- description
- defaultValue
- name
- required
- type
- }
- }
- }
- }
- `)
-
- const displayName = of?.displayName || of?.name || ''
- const component = data.allComponentMetadata.nodes.find(node => node.name === displayName)
-
- if (!component) {
- // eslint-disable-next-line no-console
- console.error(`Could not find component ${displayName}`)
- return (
- <>
- {displayName}
- Component not found
-
- )
- }
-
- return (
- <>
- {component.name}
- {component.props.length > 0 ? (
-
- {component.props.map(prop => (
-
- ))}
-
- ) : (
- No props
- )}
-
- )
-}
diff --git a/e2e/components/ActionList.test.ts b/e2e/components/ActionList.test.ts
index fac59e41cc7..709af8cf08e 100644
--- a/e2e/components/ActionList.test.ts
+++ b/e2e/components/ActionList.test.ts
@@ -1,6 +1,6 @@
import {test, expect} from '@playwright/test'
-import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
+import {visit} from '../test-helpers/storybook.js'
+import {themes} from '../test-helpers/themes.js'
test.describe('ActionList', () => {
test.describe('Default', () => {
diff --git a/e2e/components/ActionMenu.test.ts b/e2e/components/ActionMenu.test.ts
index dddbaee08f5..72e76b32729 100644
--- a/e2e/components/ActionMenu.test.ts
+++ b/e2e/components/ActionMenu.test.ts
@@ -1,6 +1,6 @@
import {test, expect} from '@playwright/test'
-import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
+import {visit} from '../test-helpers/storybook.js'
+import {themes} from '../test-helpers/themes.js'
test.describe('ActionMenu', () => {
test.describe('Default', () => {
diff --git a/e2e/components/Avatar.test.ts b/e2e/components/Avatar.test.ts
index dab9f9de809..a81e02f088b 100644
--- a/e2e/components/Avatar.test.ts
+++ b/e2e/components/Avatar.test.ts
@@ -1,6 +1,6 @@
import {test, expect} from '@playwright/test'
-import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
+import {visit} from '../test-helpers/storybook.js'
+import {themes} from '../test-helpers/themes.js'
test.describe('Avatar', () => {
test.describe('Default', () => {
diff --git a/e2e/components/AvatarPair.test.ts b/e2e/components/AvatarPair.test.ts
index d55159279d6..be9ea2777f4 100644
--- a/e2e/components/AvatarPair.test.ts
+++ b/e2e/components/AvatarPair.test.ts
@@ -1,6 +1,6 @@
import {test, expect} from '@playwright/test'
-import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
+import {visit} from '../test-helpers/storybook.js'
+import {themes} from '../test-helpers/themes.js'
test.describe('AvatarPair', () => {
test.describe('Default', () => {
diff --git a/e2e/components/AvatarStack.test.ts b/e2e/components/AvatarStack.test.ts
index 4d814a808bf..968fe6f9925 100644
--- a/e2e/components/AvatarStack.test.ts
+++ b/e2e/components/AvatarStack.test.ts
@@ -1,6 +1,6 @@
import {test, expect} from '@playwright/test'
-import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
+import {visit} from '../test-helpers/storybook.js'
+import {themes} from '../test-helpers/themes.js'
test.describe('AvatarStack', () => {
test.describe('Default', () => {
diff --git a/e2e/components/BranchName.test.ts b/e2e/components/BranchName.test.ts
index ecf450d8968..371c9a68090 100644
--- a/e2e/components/BranchName.test.ts
+++ b/e2e/components/BranchName.test.ts
@@ -1,6 +1,6 @@
import {test, expect} from '@playwright/test'
-import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
+import {visit} from '../test-helpers/storybook.js'
+import {themes} from '../test-helpers/themes.js'
test.describe('BranchName', () => {
test.describe('Default', () => {
diff --git a/e2e/components/Breadcrumbs.test.ts b/e2e/components/Breadcrumbs.test.ts
index 5b4a763084e..18c47a6b302 100644
--- a/e2e/components/Breadcrumbs.test.ts
+++ b/e2e/components/Breadcrumbs.test.ts
@@ -1,6 +1,6 @@
import {test, expect} from '@playwright/test'
-import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
+import {visit} from '../test-helpers/storybook.js'
+import {themes} from '../test-helpers/themes.js'
test.describe('Breadcrumbs', () => {
test.describe('Default', () => {
diff --git a/e2e/components/Button.test.ts b/e2e/components/Button.test.ts
index d9a4755ab1a..ba8333fe832 100644
--- a/e2e/components/Button.test.ts
+++ b/e2e/components/Button.test.ts
@@ -1,6 +1,6 @@
import {test, expect} from '@playwright/test'
-import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
+import {visit} from '../test-helpers/storybook.js'
+import {themes} from '../test-helpers/themes.js'
test.describe('Button', () => {
test.describe('Playground', () => {
diff --git a/e2e/components/ButtonGroup.test.ts b/e2e/components/ButtonGroup.test.ts
index c3ca9822ff7..2e659555f53 100644
--- a/e2e/components/ButtonGroup.test.ts
+++ b/e2e/components/ButtonGroup.test.ts
@@ -1,6 +1,6 @@
import {test, expect} from '@playwright/test'
-import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
+import {visit} from '../test-helpers/storybook.js'
+import {themes} from '../test-helpers/themes.js'
test.describe('ButtonGroup', () => {
test.describe('Default', () => {
diff --git a/e2e/components/Checkbox.test.ts b/e2e/components/Checkbox.test.ts
index 7337127cfb1..76bdf20b58a 100644
--- a/e2e/components/Checkbox.test.ts
+++ b/e2e/components/Checkbox.test.ts
@@ -1,6 +1,6 @@
import {test, expect} from '@playwright/test'
-import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
+import {visit} from '../test-helpers/storybook.js'
+import {themes} from '../test-helpers/themes.js'
test.describe('Checkbox', () => {
test.describe('Default', () => {
diff --git a/e2e/components/CheckboxGroup.test.ts b/e2e/components/CheckboxGroup.test.ts
index 45697bbeba5..f7d3c0fcda5 100644
--- a/e2e/components/CheckboxGroup.test.ts
+++ b/e2e/components/CheckboxGroup.test.ts
@@ -1,6 +1,6 @@
import {test, expect} from '@playwright/test'
-import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
+import {visit} from '../test-helpers/storybook.js'
+import {themes} from '../test-helpers/themes.js'
test.describe('CheckboxGroup', () => {
test.describe('Default', () => {
diff --git a/e2e/components/CircleBadge.test.ts b/e2e/components/CircleBadge.test.ts
index d31b82da2c4..79ebc7f3179 100644
--- a/e2e/components/CircleBadge.test.ts
+++ b/e2e/components/CircleBadge.test.ts
@@ -1,6 +1,6 @@
import {test, expect} from '@playwright/test'
-import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
+import {visit} from '../test-helpers/storybook.js'
+import {themes} from '../test-helpers/themes.js'
test.describe('CircleBadge', () => {
test.describe('Default', () => {
diff --git a/e2e/components/CircleOcticon.test.ts b/e2e/components/CircleOcticon.test.ts
index 6109f6105b9..97d479e2145 100644
--- a/e2e/components/CircleOcticon.test.ts
+++ b/e2e/components/CircleOcticon.test.ts
@@ -1,6 +1,6 @@
import {test, expect} from '@playwright/test'
-import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
+import {visit} from '../test-helpers/storybook.js'
+import {themes} from '../test-helpers/themes.js'
test.describe('CircleOcticon', () => {
test.describe('Default', () => {
diff --git a/e2e/components/CounterLabel.test.ts b/e2e/components/CounterLabel.test.ts
index f2ca4e8ad71..3bd900edf34 100644
--- a/e2e/components/CounterLabel.test.ts
+++ b/e2e/components/CounterLabel.test.ts
@@ -1,6 +1,6 @@
import {test, expect} from '@playwright/test'
-import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
+import {visit} from '../test-helpers/storybook.js'
+import {themes} from '../test-helpers/themes.js'
test.describe('CounterLabel', () => {
test.describe('Default', () => {
diff --git a/e2e/components/DataTable.test.ts b/e2e/components/DataTable.test.ts
index 3ef3925d5b2..7b81a340b73 100644
--- a/e2e/components/DataTable.test.ts
+++ b/e2e/components/DataTable.test.ts
@@ -1,6 +1,6 @@
import {test, expect} from '@playwright/test'
-import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
+import {visit} from '../test-helpers/storybook.js'
+import {themes} from '../test-helpers/themes.js'
test.describe('DataTable', () => {
test.describe('Default', () => {
diff --git a/e2e/components/Details.test.ts b/e2e/components/Details.test.ts
index 4f51edaeb18..7b95aa49a2a 100644
--- a/e2e/components/Details.test.ts
+++ b/e2e/components/Details.test.ts
@@ -1,6 +1,6 @@
import {test, expect} from '@playwright/test'
-import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
+import {visit} from '../test-helpers/storybook.js'
+import {themes} from '../test-helpers/themes.js'
test.describe('Details', () => {
test.describe('Default', () => {
diff --git a/e2e/components/FilterList.test.ts b/e2e/components/FilterList.test.ts
index b2aaa6493b0..fa63ed88f35 100644
--- a/e2e/components/FilterList.test.ts
+++ b/e2e/components/FilterList.test.ts
@@ -1,6 +1,6 @@
import {test, expect} from '@playwright/test'
-import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
+import {visit} from '../test-helpers/storybook.js'
+import {themes} from '../test-helpers/themes.js'
test.describe('FilterList', () => {
test.describe('Default', () => {
diff --git a/e2e/components/FilteredSearch.test.ts b/e2e/components/FilteredSearch.test.ts
index 5b213d7dcac..f7593b23c19 100644
--- a/e2e/components/FilteredSearch.test.ts
+++ b/e2e/components/FilteredSearch.test.ts
@@ -1,6 +1,6 @@
import {test, expect} from '@playwright/test'
-import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
+import {visit} from '../test-helpers/storybook.js'
+import {themes} from '../test-helpers/themes.js'
test.describe('FilteredSearch', () => {
test.describe('Default', () => {
diff --git a/e2e/components/Flash.test.ts b/e2e/components/Flash.test.ts
index 2711fbff85b..056537a2dee 100644
--- a/e2e/components/Flash.test.ts
+++ b/e2e/components/Flash.test.ts
@@ -1,6 +1,6 @@
import {test, expect} from '@playwright/test'
-import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
+import {visit} from '../test-helpers/storybook.js'
+import {themes} from '../test-helpers/themes.js'
test.describe('Flash', () => {
test.describe('Default', () => {
diff --git a/e2e/components/Header.test.ts b/e2e/components/Header.test.ts
index 9120f70d731..224aabaad1e 100644
--- a/e2e/components/Header.test.ts
+++ b/e2e/components/Header.test.ts
@@ -1,6 +1,6 @@
import {test, expect} from '@playwright/test'
-import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
+import {visit} from '../test-helpers/storybook.js'
+import {themes} from '../test-helpers/themes.js'
test.describe('Header', () => {
test.describe('Default', () => {
diff --git a/e2e/components/Heading.test.ts b/e2e/components/Heading.test.ts
index 1c573a8b6e7..af99c123a95 100644
--- a/e2e/components/Heading.test.ts
+++ b/e2e/components/Heading.test.ts
@@ -1,6 +1,6 @@
import {test, expect} from '@playwright/test'
-import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
+import {visit} from '../test-helpers/storybook.js'
+import {themes} from '../test-helpers/themes.js'
test.describe('Heading', () => {
test.describe('Default', () => {
diff --git a/e2e/components/Hidden.test.ts b/e2e/components/Hidden.test.ts
index 3bc87d1cd3e..cb59406bf2d 100644
--- a/e2e/components/Hidden.test.ts
+++ b/e2e/components/Hidden.test.ts
@@ -1,7 +1,7 @@
import {test, expect} from '@playwright/test'
-import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
-import {viewports} from '../test-helpers/viewports'
+import {visit} from '../test-helpers/storybook.js'
+import {themes} from '../test-helpers/themes.js'
+import {viewports} from '../test-helpers/viewports.js'
test.describe('Hidden', () => {
test.describe('Default', () => {
diff --git a/e2e/components/IconButton.test.ts b/e2e/components/IconButton.test.ts
index 8b1e3aac1e6..da03fe08801 100644
--- a/e2e/components/IconButton.test.ts
+++ b/e2e/components/IconButton.test.ts
@@ -1,6 +1,6 @@
import {test, expect} from '@playwright/test'
-import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
+import {visit} from '../test-helpers/storybook.js'
+import {themes} from '../test-helpers/themes.js'
test.describe('IconButton', () => {
test.describe('Playground', () => {
diff --git a/e2e/components/InlineAutocomplete.test.ts b/e2e/components/InlineAutocomplete.test.ts
index 19492e39cc3..a9643a6b863 100644
--- a/e2e/components/InlineAutocomplete.test.ts
+++ b/e2e/components/InlineAutocomplete.test.ts
@@ -1,6 +1,6 @@
import {test, expect} from '@playwright/test'
-import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
+import {visit} from '../test-helpers/storybook.js'
+import {themes} from '../test-helpers/themes.js'
test.describe('InlineAutocomplete', () => {
test.describe('Default', () => {
diff --git a/e2e/components/Label.test.ts b/e2e/components/Label.test.ts
index b28b9f7fffb..0aadf137cf5 100644
--- a/e2e/components/Label.test.ts
+++ b/e2e/components/Label.test.ts
@@ -1,6 +1,6 @@
import {test, expect} from '@playwright/test'
-import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
+import {visit} from '../test-helpers/storybook.js'
+import {themes} from '../test-helpers/themes.js'
test.describe('Label', () => {
test.describe('Default', () => {
diff --git a/e2e/components/LabelGroup.test.ts b/e2e/components/LabelGroup.test.ts
index b4e48650df7..b65397feca2 100644
--- a/e2e/components/LabelGroup.test.ts
+++ b/e2e/components/LabelGroup.test.ts
@@ -1,6 +1,6 @@
import {test, expect} from '@playwright/test'
-import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
+import {visit} from '../test-helpers/storybook.js'
+import {themes} from '../test-helpers/themes.js'
test.describe('LabelGroup', () => {
test.describe('Default', () => {
diff --git a/e2e/components/Link.test.ts b/e2e/components/Link.test.ts
index 75259a13e91..ab69f72bdea 100644
--- a/e2e/components/Link.test.ts
+++ b/e2e/components/Link.test.ts
@@ -1,6 +1,6 @@
import {test, expect} from '@playwright/test'
-import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
+import {visit} from '../test-helpers/storybook.js'
+import {themes} from '../test-helpers/themes.js'
test.describe('Link', () => {
test.describe('Default', () => {
diff --git a/e2e/components/LinkButton.test.ts b/e2e/components/LinkButton.test.ts
index 98a92c22704..af9b148ea83 100644
--- a/e2e/components/LinkButton.test.ts
+++ b/e2e/components/LinkButton.test.ts
@@ -1,6 +1,6 @@
import {test, expect} from '@playwright/test'
-import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
+import {visit} from '../test-helpers/storybook.js'
+import {themes} from '../test-helpers/themes.js'
test.describe('LinkButton', () => {
test.describe('Playground', () => {
diff --git a/e2e/components/PageHeader.test.ts b/e2e/components/PageHeader.test.ts
index e19dddf0b30..aa2c1a5d8e6 100644
--- a/e2e/components/PageHeader.test.ts
+++ b/e2e/components/PageHeader.test.ts
@@ -1,6 +1,6 @@
import {test, expect} from '@playwright/test'
-import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
+import {visit} from '../test-helpers/storybook.js'
+import {themes} from '../test-helpers/themes.js'
// TODO: remove the color contrast rule once the constract issue is fixed
test.describe('PageHeader', () => {
diff --git a/e2e/components/PageLayout.test.ts b/e2e/components/PageLayout.test.ts
index a2475290fe0..2a2662f535b 100644
--- a/e2e/components/PageLayout.test.ts
+++ b/e2e/components/PageLayout.test.ts
@@ -1,7 +1,7 @@
import {test, expect} from '@playwright/test'
import type {Page} from '@playwright/test'
-import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
+import {visit} from '../test-helpers/storybook.js'
+import {themes} from '../test-helpers/themes.js'
const isInViewPort = (page: Page, boundingBox: {x: number; y: number; width: number; height: number}) => {
let width
diff --git a/e2e/components/Pagehead.test.ts b/e2e/components/Pagehead.test.ts
index 00f077d663b..f77ba16cd88 100644
--- a/e2e/components/Pagehead.test.ts
+++ b/e2e/components/Pagehead.test.ts
@@ -1,6 +1,6 @@
import {test, expect} from '@playwright/test'
-import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
+import {visit} from '../test-helpers/storybook.js'
+import {themes} from '../test-helpers/themes.js'
test.describe('Pagehead', () => {
test.describe('Default', () => {
diff --git a/e2e/components/Popover.test.ts b/e2e/components/Popover.test.ts
index 7a80f28cda4..e458287f6b6 100644
--- a/e2e/components/Popover.test.ts
+++ b/e2e/components/Popover.test.ts
@@ -1,6 +1,6 @@
import {test, expect} from '@playwright/test'
-import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
+import {visit} from '../test-helpers/storybook.js'
+import {themes} from '../test-helpers/themes.js'
test.describe('Popover', () => {
test.describe('Default', () => {
diff --git a/e2e/components/ProgressBar.test.ts b/e2e/components/ProgressBar.test.ts
index ac87493b2a1..3f9f9cd2900 100644
--- a/e2e/components/ProgressBar.test.ts
+++ b/e2e/components/ProgressBar.test.ts
@@ -1,6 +1,6 @@
import {test, expect} from '@playwright/test'
-import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
+import {visit} from '../test-helpers/storybook.js'
+import {themes} from '../test-helpers/themes.js'
test.describe('ProgressBar', () => {
test.describe('Default', () => {
diff --git a/e2e/components/Radio.test.ts b/e2e/components/Radio.test.ts
index 8c96c9ca923..c6eebe6aa25 100644
--- a/e2e/components/Radio.test.ts
+++ b/e2e/components/Radio.test.ts
@@ -1,6 +1,6 @@
import {test, expect} from '@playwright/test'
-import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
+import {visit} from '../test-helpers/storybook.js'
+import {themes} from '../test-helpers/themes.js'
test.describe('Radio', () => {
test.describe('Default', () => {
diff --git a/e2e/components/RadioGroup.test.ts b/e2e/components/RadioGroup.test.ts
index 59512a41e98..d4c84151cf3 100644
--- a/e2e/components/RadioGroup.test.ts
+++ b/e2e/components/RadioGroup.test.ts
@@ -1,6 +1,6 @@
import {test, expect} from '@playwright/test'
-import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
+import {visit} from '../test-helpers/storybook.js'
+import {themes} from '../test-helpers/themes.js'
test.describe('RadioGroup', () => {
test.describe('Default', () => {
diff --git a/e2e/components/SegmentedControl.test.ts b/e2e/components/SegmentedControl.test.ts
index 5868244d96f..849c130b1c6 100644
--- a/e2e/components/SegmentedControl.test.ts
+++ b/e2e/components/SegmentedControl.test.ts
@@ -1,7 +1,7 @@
import {test, expect} from '@playwright/test'
-import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
-import {viewports} from '../test-helpers/viewports'
+import {visit} from '../test-helpers/storybook.js'
+import {themes} from '../test-helpers/themes.js'
+import {viewports} from '../test-helpers/viewports.js'
test.describe('SegmentedControl', () => {
test.describe('Default', () => {
diff --git a/e2e/components/Select.test.ts b/e2e/components/Select.test.ts
index 0fa7576e1d7..357a0b956b0 100644
--- a/e2e/components/Select.test.ts
+++ b/e2e/components/Select.test.ts
@@ -1,6 +1,6 @@
import {test, expect} from '@playwright/test'
-import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
+import {visit} from '../test-helpers/storybook.js'
+import {themes} from '../test-helpers/themes.js'
test.describe('Select', () => {
test.describe('Default', () => {
diff --git a/e2e/components/SelectPanel.test.ts b/e2e/components/SelectPanel.test.ts
index 8db0ed311f3..3d91dfc2d5a 100644
--- a/e2e/components/SelectPanel.test.ts
+++ b/e2e/components/SelectPanel.test.ts
@@ -1,6 +1,6 @@
import {test, expect} from '@playwright/test'
-import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
+import {visit} from '../test-helpers/storybook.js'
+import {themes} from '../test-helpers/themes.js'
test.describe('SelectPanel', () => {
test.describe('Default', () => {
diff --git a/e2e/components/StateLabel.test.ts b/e2e/components/StateLabel.test.ts
index add2a97d42e..d73078bcfd3 100644
--- a/e2e/components/StateLabel.test.ts
+++ b/e2e/components/StateLabel.test.ts
@@ -1,6 +1,6 @@
import {test, expect} from '@playwright/test'
-import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
+import {visit} from '../test-helpers/storybook.js'
+import {themes} from '../test-helpers/themes.js'
test.describe('StateLabel', () => {
test.describe('Draft', () => {
diff --git a/e2e/components/StyledOcticon.test.ts b/e2e/components/StyledOcticon.test.ts
index 39f22747c15..578afe55dda 100644
--- a/e2e/components/StyledOcticon.test.ts
+++ b/e2e/components/StyledOcticon.test.ts
@@ -1,6 +1,6 @@
import {test, expect} from '@playwright/test'
-import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
+import {visit} from '../test-helpers/storybook.js'
+import {themes} from '../test-helpers/themes.js'
test.describe('StyledOcticon', () => {
test.describe('Default', () => {
diff --git a/e2e/components/TabNav.test.ts b/e2e/components/TabNav.test.ts
index a896f2f1808..11578689af6 100644
--- a/e2e/components/TabNav.test.ts
+++ b/e2e/components/TabNav.test.ts
@@ -1,6 +1,6 @@
import {test, expect} from '@playwright/test'
-import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
+import {visit} from '../test-helpers/storybook.js'
+import {themes} from '../test-helpers/themes.js'
test.describe('TabNav', () => {
test.describe('Default', () => {
diff --git a/e2e/components/Text.test.ts b/e2e/components/Text.test.ts
index 952eb5f17bf..a7413a7689f 100644
--- a/e2e/components/Text.test.ts
+++ b/e2e/components/Text.test.ts
@@ -1,6 +1,6 @@
import {test, expect} from '@playwright/test'
-import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
+import {visit} from '../test-helpers/storybook.js'
+import {themes} from '../test-helpers/themes.js'
test.describe('Text', () => {
test.describe('Default', () => {
diff --git a/e2e/components/TextInput.test.ts b/e2e/components/TextInput.test.ts
index dc1af6c6551..0bf251661a6 100644
--- a/e2e/components/TextInput.test.ts
+++ b/e2e/components/TextInput.test.ts
@@ -1,6 +1,6 @@
import {test, expect} from '@playwright/test'
-import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
+import {visit} from '../test-helpers/storybook.js'
+import {themes} from '../test-helpers/themes.js'
test.describe('TextInput', () => {
test.describe('Default', () => {
diff --git a/e2e/components/TextInputWithTokens.test.ts b/e2e/components/TextInputWithTokens.test.ts
index a08368328b9..a8bfd96e1ca 100644
--- a/e2e/components/TextInputWithTokens.test.ts
+++ b/e2e/components/TextInputWithTokens.test.ts
@@ -1,6 +1,6 @@
import {test, expect} from '@playwright/test'
-import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
+import {visit} from '../test-helpers/storybook.js'
+import {themes} from '../test-helpers/themes.js'
test.describe('TextInputWithTokens', () => {
test.describe('Default', () => {
diff --git a/e2e/components/Textarea.test.ts b/e2e/components/Textarea.test.ts
index 6df9ca2792e..2170cf12002 100644
--- a/e2e/components/Textarea.test.ts
+++ b/e2e/components/Textarea.test.ts
@@ -1,6 +1,6 @@
import {test, expect} from '@playwright/test'
-import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
+import {visit} from '../test-helpers/storybook.js'
+import {themes} from '../test-helpers/themes.js'
test.describe('Textarea', () => {
test.describe('Default', () => {
diff --git a/e2e/components/Timeline.test.ts b/e2e/components/Timeline.test.ts
index ceba14c85ec..1da4a47a9d7 100644
--- a/e2e/components/Timeline.test.ts
+++ b/e2e/components/Timeline.test.ts
@@ -1,6 +1,6 @@
import {test, expect} from '@playwright/test'
-import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
+import {visit} from '../test-helpers/storybook.js'
+import {themes} from '../test-helpers/themes.js'
test.describe('Timeline', () => {
test.describe('Default', () => {
diff --git a/e2e/components/ToggleSwitch.test.ts b/e2e/components/ToggleSwitch.test.ts
index 33ed880d336..408bfe7a23e 100644
--- a/e2e/components/ToggleSwitch.test.ts
+++ b/e2e/components/ToggleSwitch.test.ts
@@ -1,6 +1,6 @@
import {test, expect} from '@playwright/test'
-import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
+import {visit} from '../test-helpers/storybook.js'
+import {themes} from '../test-helpers/themes.js'
test.describe('ToggleSwitch', () => {
test.describe('Default', () => {
diff --git a/e2e/components/Token.test.ts b/e2e/components/Token.test.ts
index 87f0d422e7d..ae57fb31598 100644
--- a/e2e/components/Token.test.ts
+++ b/e2e/components/Token.test.ts
@@ -1,6 +1,6 @@
import {test, expect} from '@playwright/test'
-import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
+import {visit} from '../test-helpers/storybook.js'
+import {themes} from '../test-helpers/themes.js'
test.describe('Token', () => {
test.describe('Default', () => {
diff --git a/e2e/components/TreeView.test.ts b/e2e/components/TreeView.test.ts
index 1f665117e85..d5a9335d14c 100644
--- a/e2e/components/TreeView.test.ts
+++ b/e2e/components/TreeView.test.ts
@@ -1,6 +1,6 @@
import {test, expect} from '@playwright/test'
-import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
+import {visit} from '../test-helpers/storybook.js'
+import {themes} from '../test-helpers/themes.js'
test.describe('TreeView', () => {
test.describe('Default', () => {
diff --git a/e2e/components/Truncate.test.ts b/e2e/components/Truncate.test.ts
index fcf8073027b..f27a08a4ea4 100644
--- a/e2e/components/Truncate.test.ts
+++ b/e2e/components/Truncate.test.ts
@@ -1,6 +1,6 @@
import {test, expect} from '@playwright/test'
-import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
+import {visit} from '../test-helpers/storybook.js'
+import {themes} from '../test-helpers/themes.js'
test.describe('Truncate', () => {
test.describe('Default', () => {
diff --git a/e2e/components/UnderlineNav--deprecated.test.ts b/e2e/components/UnderlineNav--deprecated.test.ts
index c0518ec495e..40f545b2e06 100644
--- a/e2e/components/UnderlineNav--deprecated.test.ts
+++ b/e2e/components/UnderlineNav--deprecated.test.ts
@@ -1,6 +1,6 @@
import {test, expect} from '@playwright/test'
-import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
+import {visit} from '../test-helpers/storybook.js'
+import {themes} from '../test-helpers/themes.js'
test.describe('UnderlineNav--deprecated', () => {
test.describe('Default', () => {
diff --git a/e2e/components/UnderlineNav.test.ts b/e2e/components/UnderlineNav.test.ts
index 341bae11433..297303a0d00 100644
--- a/e2e/components/UnderlineNav.test.ts
+++ b/e2e/components/UnderlineNav.test.ts
@@ -1,7 +1,7 @@
import {test, expect} from '@playwright/test'
-import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
-import {viewports} from '../test-helpers/viewports'
+import {visit} from '../test-helpers/storybook.js'
+import {themes} from '../test-helpers/themes.js'
+import {viewports} from '../test-helpers/viewports.js'
test.describe('UnderlineNav', () => {
test.describe('Profile Page', () => {
diff --git a/e2e/components/drafts/Button2.test.ts b/e2e/components/drafts/Button2.test.ts
index 5e2f140937e..2657bf65ec0 100644
--- a/e2e/components/drafts/Button2.test.ts
+++ b/e2e/components/drafts/Button2.test.ts
@@ -1,6 +1,6 @@
import {test, expect} from '@playwright/test'
-import {visit} from '../../test-helpers/storybook'
-import {themes} from '../../test-helpers/themes'
+import {visit} from '../../test-helpers/storybook.js'
+import {themes} from '../../test-helpers/themes.js'
test.describe('Button', () => {
test.describe('Playground', () => {
diff --git a/e2e/matchers/toHaveNoViolations.ts b/e2e/matchers/toHaveNoViolations.ts
index 32349cddd5d..01b30d48766 100644
--- a/e2e/matchers/toHaveNoViolations.ts
+++ b/e2e/matchers/toHaveNoViolations.ts
@@ -1,8 +1,11 @@
import {Page, expect, test} from '@playwright/test'
-import {AxeResults, source} from 'axe-core'
+import axe from 'axe-core'
+import type {AxeResults} from 'axe-core'
import path from 'node:path'
import fs from 'node:fs'
+const {source} = axe
+
const defaultOptions = {
rules: {
'document-title': {
diff --git a/e2e/test-helpers/storybook.ts b/e2e/test-helpers/storybook.ts
index 755e8848b12..fa72ec2c16e 100644
--- a/e2e/test-helpers/storybook.ts
+++ b/e2e/test-helpers/storybook.ts
@@ -1,5 +1,5 @@
import {Page} from '@playwright/test'
-import {waitForImages} from './waitForImages'
+import {waitForImages} from './waitForImages.js'
interface Options {
id: string
diff --git a/examples/nextjs/package-lock.json b/examples/nextjs/package-lock.json
index fd949fcbbd7..57335ebd557 100644
--- a/examples/nextjs/package-lock.json
+++ b/examples/nextjs/package-lock.json
@@ -18,34 +18,36 @@
},
"../..": {
"name": "@primer/react",
- "version": "35.26.0",
+ "version": "35.26.1",
"license": "MIT",
"dependencies": {
"@github/combobox-nav": "^2.1.5",
"@github/markdown-toolbar-element": "^2.1.0",
"@github/paste-markdown": "^1.4.0",
"@github/relative-time-element": "^4.1.2",
- "@lit-labs/react": "1.1.1",
- "@primer/behaviors": "1.3.4",
- "@primer/octicons-react": "18.3.0",
- "@primer/primitives": "7.11.11",
+ "@lit-labs/react": "^1.1.1",
+ "@primer/behaviors": "^1.3.4",
+ "@primer/octicons-react": "^19.3.0",
+ "@primer/primitives": "^7.11.11",
"@react-aria/ssr": "^3.1.0",
"@styled-system/css": "^5.1.5",
"@styled-system/props": "^5.1.5",
"@styled-system/theme-get": "^5.1.2",
- "@types/styled-components": "^5.1.11",
+ "@types/react-is": "^18.2.1",
"@types/styled-system": "^5.1.12",
"@types/styled-system__css": "^5.0.16",
"@types/styled-system__theme-get": "^5.0.1",
- "classnames": "^2.3.1",
+ "clsx": "^1.2.1",
"color2k": "^2.0.0",
"deepmerge": "^4.2.2",
"focus-visible": "^5.2.0",
- "fzy.js": "0.4.1",
+ "fzy.js": "^0.4.1",
"history": "^5.0.0",
- "lodash.isempty": "4.4.0",
- "lodash.isobject": "3.0.2",
- "react-intersection-observer": "9.4.3",
+ "lodash.isempty": "^4.4.0",
+ "lodash.isobject": "^3.0.2",
+ "react-intersection-observer": "^9.4.3",
+ "react-is": "^18.2.0",
+ "react-markdown": "8.0.7",
"styled-system": "^5.1.5"
},
"devDependencies": {
@@ -59,7 +61,6 @@
"@babel/preset-react": "7.18.6",
"@babel/preset-typescript": "7.21.5",
"@changesets/changelog-github": "0.4.8",
- "@changesets/cli": "2.26.0",
"@github/markdownlint-github": "^0.3.0",
"@github/prettier-config": "0.0.6",
"@playwright/test": "1.32.0",
@@ -74,31 +75,32 @@
"@size-limit/preset-big-lib": "8.2.4",
"@storybook/addon-a11y": "7.0.12",
"@storybook/addon-actions": "7.0.12",
- "@storybook/addon-essentials": "7.0.22",
- "@storybook/addon-interactions": "7.0.12",
+ "@storybook/addon-essentials": "7.0.24",
+ "@storybook/addon-interactions": "7.0.26",
"@storybook/addon-links": "7.0.12",
"@storybook/addon-storysource": "7.0.12",
"@storybook/csf": "0.1.0",
"@storybook/jest": "0.1.0",
- "@storybook/react": "7.0.12",
+ "@storybook/react": "7.0.23",
"@storybook/react-webpack5": "7.0.12",
"@storybook/test-runner": "0.10.0",
"@storybook/testing-library": "0.1.0",
- "@storybook/theming": "7.0.12",
+ "@storybook/theming": "7.0.26",
"@testing-library/dom": "9.2.0",
"@testing-library/jest-dom": "5.16.5",
"@testing-library/react": "14.0.0",
"@testing-library/react-hooks": "7.0.2",
"@testing-library/user-event": "^14.3.0",
- "@types/jest": "29.4.0",
+ "@types/jest": "29.5.2",
"@types/jest-axe": "3.5.5",
"@types/lodash.groupby": "4.6.7",
"@types/lodash.isempty": "4.4.7",
"@types/lodash.isobject": "3.0.7",
"@types/lodash.keyby": "4.6.7",
- "@types/node": "16.11.11",
+ "@types/node": "18.16.19",
"@types/react": "18.0.28",
"@types/react-dom": "18.2.6",
+ "@types/styled-components": "^5.1.11",
"@typescript-eslint/eslint-plugin": "5.59.6",
"@typescript-eslint/parser": "5.59.6",
"ajv": "8.12.0",
@@ -118,25 +120,25 @@
"copyfiles": "2.4.1",
"cross-env": "7.0.3",
"eslint": "8.40.0",
- "eslint-import-resolver-typescript": "3.5.3",
- "eslint-plugin-github": "4.6.1",
+ "eslint-import-resolver-typescript": "3.5.5",
+ "eslint-plugin-github": "4.8.0",
"eslint-plugin-jest": "27.2.1",
"eslint-plugin-jsx-a11y": "6.7.1",
"eslint-plugin-mdx": "2.0.5",
- "eslint-plugin-playwright": "0.12.0",
+ "eslint-plugin-playwright": "0.15.1",
"eslint-plugin-prettier": "4.2.1",
"eslint-plugin-primer-react": "2.0.3",
"eslint-plugin-react": "7.32.2",
"eslint-plugin-react-hooks": "4.6.0",
"eslint-plugin-ssr-friendly": "1.2.0",
"eslint-plugin-storybook": "0.6.12",
- "eslint-plugin-testing-library": "5.10.2",
+ "eslint-plugin-testing-library": "5.11.0",
"fast-glob": "3.2.12",
"filesize": "10.0.6",
"front-matter": "4.0.2",
"gzip-size": "6.0.0",
"husky": "8.0.2",
- "jest": "29.4.2",
+ "jest": "29.5.0",
"jest-axe": "7.0.1",
"jest-css-modules": "2.1.0",
"jest-environment-jsdom": "29.4.3",
@@ -154,10 +156,11 @@
"mdast-util-frontmatter": "1.0.1",
"mdast-util-mdx": "2.0.1",
"mdast-util-to-string": "3.1.1",
- "micromark-extension-frontmatter": "1.0.0",
+ "micromark-extension-frontmatter": "2.0.0",
"micromark-extension-mdxjs": "1.0.1",
"postcss-custom-properties-fallback": "^1.0.2",
"prettier": "2.8.8",
+ "primer-changesets-cli": "2.2.1",
"react": "18.2.0",
"react-dnd": "14.0.4",
"react-dnd-html5-backend": "14.0.2",
@@ -190,9 +193,23 @@
"npm": ">=7"
},
"peerDependencies": {
- "react": "^17.0.0 || ^18.0.0",
- "react-dom": "^17.0.0 || ^18.0.0",
+ "@types/react": "^18.0.0",
+ "@types/react-dom": "^18.0.0",
+ "@types/styled-components": "^5.1.11",
+ "react": "^18.0.0",
+ "react-dom": "^18.0.0",
"styled-components": "4.x || 5.x"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ },
+ "@types/react-dom": {
+ "optional": true
+ },
+ "@types/styled-components": {
+ "optional": true
+ }
}
},
"node_modules/@babel/code-frame": {
@@ -1385,19 +1402,18 @@
"@babel/preset-react": "7.18.6",
"@babel/preset-typescript": "7.21.5",
"@changesets/changelog-github": "0.4.8",
- "@changesets/cli": "2.26.0",
"@github/combobox-nav": "^2.1.5",
"@github/markdown-toolbar-element": "^2.1.0",
"@github/markdownlint-github": "^0.3.0",
"@github/paste-markdown": "^1.4.0",
"@github/prettier-config": "0.0.6",
"@github/relative-time-element": "^4.1.2",
- "@lit-labs/react": "1.1.1",
+ "@lit-labs/react": "^1.1.1",
"@playwright/test": "1.32.0",
- "@primer/behaviors": "1.3.4",
+ "@primer/behaviors": "^1.3.4",
"@primer/css": "^21.0.1",
- "@primer/octicons-react": "18.3.0",
- "@primer/primitives": "7.11.11",
+ "@primer/octicons-react": "^19.3.0",
+ "@primer/primitives": "^7.11.11",
"@react-aria/ssr": "^3.1.0",
"@rollup/plugin-babel": "6.0.3",
"@rollup/plugin-commonjs": "25.0.0",
@@ -1409,17 +1425,17 @@
"@size-limit/preset-big-lib": "8.2.4",
"@storybook/addon-a11y": "7.0.12",
"@storybook/addon-actions": "7.0.12",
- "@storybook/addon-essentials": "7.0.22",
- "@storybook/addon-interactions": "7.0.12",
+ "@storybook/addon-essentials": "7.0.24",
+ "@storybook/addon-interactions": "7.0.26",
"@storybook/addon-links": "7.0.12",
"@storybook/addon-storysource": "7.0.12",
"@storybook/csf": "0.1.0",
"@storybook/jest": "0.1.0",
- "@storybook/react": "7.0.12",
+ "@storybook/react": "7.0.23",
"@storybook/react-webpack5": "7.0.12",
"@storybook/test-runner": "0.10.0",
"@storybook/testing-library": "0.1.0",
- "@storybook/theming": "7.0.12",
+ "@storybook/theming": "7.0.26",
"@styled-system/css": "^5.1.5",
"@styled-system/props": "^5.1.5",
"@styled-system/theme-get": "^5.1.2",
@@ -1428,15 +1444,16 @@
"@testing-library/react": "14.0.0",
"@testing-library/react-hooks": "7.0.2",
"@testing-library/user-event": "^14.3.0",
- "@types/jest": "29.4.0",
+ "@types/jest": "29.5.2",
"@types/jest-axe": "3.5.5",
"@types/lodash.groupby": "4.6.7",
"@types/lodash.isempty": "4.4.7",
"@types/lodash.isobject": "3.0.7",
"@types/lodash.keyby": "4.6.7",
- "@types/node": "16.11.11",
+ "@types/node": "18.16.19",
"@types/react": "18.0.28",
"@types/react-dom": "18.2.6",
+ "@types/react-is": "^18.2.1",
"@types/styled-components": "^5.1.11",
"@types/styled-system": "^5.1.12",
"@types/styled-system__css": "^5.0.16",
@@ -1456,35 +1473,35 @@
"babel-polyfill": "6.26.0",
"change-case": "4.1.2",
"chromatic": "6.1.0",
- "classnames": "^2.3.1",
+ "clsx": "^1.2.1",
"color2k": "^2.0.0",
"concurrently": "8.0.1",
"copyfiles": "2.4.1",
"cross-env": "7.0.3",
"deepmerge": "^4.2.2",
"eslint": "8.40.0",
- "eslint-import-resolver-typescript": "3.5.3",
- "eslint-plugin-github": "4.6.1",
+ "eslint-import-resolver-typescript": "3.5.5",
+ "eslint-plugin-github": "4.8.0",
"eslint-plugin-jest": "27.2.1",
"eslint-plugin-jsx-a11y": "6.7.1",
"eslint-plugin-mdx": "2.0.5",
- "eslint-plugin-playwright": "0.12.0",
+ "eslint-plugin-playwright": "0.15.1",
"eslint-plugin-prettier": "4.2.1",
"eslint-plugin-primer-react": "2.0.3",
"eslint-plugin-react": "7.32.2",
"eslint-plugin-react-hooks": "4.6.0",
"eslint-plugin-ssr-friendly": "1.2.0",
"eslint-plugin-storybook": "0.6.12",
- "eslint-plugin-testing-library": "5.10.2",
+ "eslint-plugin-testing-library": "5.11.0",
"fast-glob": "3.2.12",
"filesize": "10.0.6",
"focus-visible": "^5.2.0",
"front-matter": "4.0.2",
- "fzy.js": "0.4.1",
+ "fzy.js": "^0.4.1",
"gzip-size": "6.0.0",
"history": "^5.0.0",
"husky": "8.0.2",
- "jest": "29.4.2",
+ "jest": "29.5.0",
"jest-axe": "7.0.1",
"jest-css-modules": "2.1.0",
"jest-environment-jsdom": "29.4.3",
@@ -1495,8 +1512,8 @@
"jscodeshift": "0.14.0",
"lint-staged": "13.2.2",
"lodash.groupby": "4.6.0",
- "lodash.isempty": "4.4.0",
- "lodash.isobject": "3.0.2",
+ "lodash.isempty": "^4.4.0",
+ "lodash.isobject": "^3.0.2",
"lodash.keyby": "4.6.0",
"markdownlint-cli2": "^0.7.1",
"markdownlint-cli2-formatter-pretty": "0.0.3",
@@ -1504,15 +1521,18 @@
"mdast-util-frontmatter": "1.0.1",
"mdast-util-mdx": "2.0.1",
"mdast-util-to-string": "3.1.1",
- "micromark-extension-frontmatter": "1.0.0",
+ "micromark-extension-frontmatter": "2.0.0",
"micromark-extension-mdxjs": "1.0.1",
"postcss-custom-properties-fallback": "^1.0.2",
"prettier": "2.8.8",
+ "primer-changesets-cli": "2.2.1",
"react": "18.2.0",
"react-dnd": "14.0.4",
"react-dnd-html5-backend": "14.0.2",
"react-dom": "18.2.0",
- "react-intersection-observer": "9.4.3",
+ "react-intersection-observer": "^9.4.3",
+ "react-is": "^18.2.0",
+ "react-markdown": "8.0.7",
"react-test-renderer": "18.2.0",
"recast": "0.22.0",
"rimraf": "4.1.2",
diff --git a/jest.config.js b/jest.config.cjs
similarity index 100%
rename from jest.config.js
rename to jest.config.cjs
diff --git a/package.json b/package.json
index 23793077881..49c4691e862 100644
--- a/package.json
+++ b/package.json
@@ -4,33 +4,16 @@
"description": "An implementation of GitHub's Primer Design System using React",
"main": "lib/index.js",
"module": "lib-esm/index.js",
+ "type": "module",
"exports": {
- ".": {
- "import": "./lib-esm/index.js",
- "require": "./lib/index.js"
- },
- "./experimental": {
- "import": "./lib-esm/experimental/index.js",
- "require": "./lib/experimental/index.js"
- },
- "./drafts": {
- "import": "./lib-esm/drafts/index.js",
- "require": "./lib/drafts/index.js"
- },
- "./deprecated": {
- "import": "./lib-esm/deprecated/index.js",
- "require": "./lib/deprecated/index.js"
- },
- "./lib-esm/*": {
- "import": [
+ ".": "./lib-esm/index.js",
+ "./experimental": "./lib-esm/experimental/index.js",
+ "./drafts": "./lib-esm/drafts/index.js",
+ "./deprecated": "./lib-esm/deprecated/index.js",
+ "./lib-esm/*": [
"./lib-esm/*.js",
"./lib-esm/*/index.js"
- ],
- "require": [
- "./lib/*.js",
- "./lib/*/index.js"
- ]
- },
+ ],
"./lib-esm/internal/*": null
},
"typings": "lib/index.d.ts",
diff --git a/playwright.config.ts b/playwright.config.ts
index 0c25b4535a1..4ab645ad207 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -1,6 +1,10 @@
import path from 'node:path'
+import {fileURLToPath} from 'url'
+import './e2e/matchers/toHaveNoViolations.js'
import {defineConfig} from '@playwright/test'
-import './e2e/matchers/toHaveNoViolations'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
export default defineConfig({
// https://playwright.dev/docs/api/class-testconfig#test-config-test-dir
diff --git a/rollup.config.js b/rollup.config.mjs
similarity index 85%
rename from rollup.config.js
rename to rollup.config.mjs
index 56cca810a74..91037209d01 100644
--- a/rollup.config.js
+++ b/rollup.config.mjs
@@ -1,3 +1,5 @@
+import path from 'path'
+import {fileURLToPath} from 'url'
import commonjs from '@rollup/plugin-commonjs'
import resolve from '@rollup/plugin-node-resolve'
import babel from '@rollup/plugin-babel'
@@ -6,9 +8,12 @@ import terser from '@rollup/plugin-terser'
import glob from 'fast-glob'
import {visualizer} from 'rollup-plugin-visualizer'
import postcss from 'rollup-plugin-postcss'
-import packageJson from './package.json'
+import packageJson from './package.json' assert {type: 'json'}
import postcssCustomPropertiesFallback from 'postcss-custom-properties-fallback'
-const importedJSONFromPrimitives = require('@primer/primitives/tokens-next-private/fallbacks/color-fallbacks.json')
+import importedJSONFromPrimitives from '@primer/primitives/tokens-next-private/fallbacks/color-fallbacks.json' assert {type: 'json'}
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
const input = new Set([
// "exports"
@@ -56,13 +61,6 @@ const input = new Set([
])
const extensions = ['.js', '.jsx', '.ts', '.tsx']
-const ESM_ONLY = new Set([
- '@github/combobox-nav',
- '@github/markdown-toolbar-element',
- '@github/paste-markdown',
- '@github/relative-time-element',
- '@lit-labs/react',
-])
const dependencies = [
...Object.keys(packageJson.peerDependencies ?? {}),
...Object.keys(packageJson.dependencies ?? {}),
@@ -143,20 +141,6 @@ export default [
},
},
- // CommonJS
- {
- ...baseConfig,
- external: dependencies.filter(name => !ESM_ONLY.has(name)).map(createPackageRegex),
- output: {
- interop: 'auto',
- dir: 'lib',
- format: 'commonjs',
- preserveModules: true,
- preserveModulesRoot: 'src',
- exports: 'auto',
- },
- },
-
// Bundles
{
...baseConfig,
diff --git a/script/build b/script/build
index 9ab118c761e..413f3cacdc3 100755
--- a/script/build
+++ b/script/build
@@ -6,7 +6,7 @@ set -e
npm run clean
# Bundle
-npx rollup -c --bundleConfigAsCjs
+npx rollup --config
# Type check
npx tsc --project tsconfig.build.json
diff --git a/script/components-json/build.ts b/script/components-json/build.ts
index 92eb6ac2906..8278680a117 100644
--- a/script/components-json/build.ts
+++ b/script/components-json/build.ts
@@ -8,8 +8,8 @@ import glob from 'fast-glob'
import fs from 'fs'
import keyBy from 'lodash.keyby'
import prettier from 'prettier'
-import componentSchema from './component.schema.json'
-import outputSchema from './output.schema.json'
+import componentSchema from './component.schema.json' assert {type: 'json'}
+import outputSchema from './output.schema.json' assert {type: 'json'}
// Only includes fields we use in this script
type Component = {
@@ -130,7 +130,9 @@ function getStorySourceCode(filepath: string) {
const stories: Record = {}
- traverse(ast, {
+ // @ts-ignore Can't call `traverse` in ESM directly, must reference `default`.
+ traverse.default(ast, {
+ // @ts-ignore I don't know what `path` should even be here.
ExportNamedDeclaration(path) {
const varDecloration = path.node.declaration as VariableDeclaration
const id = varDecloration.declarations[0].id as Identifier
@@ -138,7 +140,8 @@ function getStorySourceCode(filepath: string) {
const func = varDecloration.declarations[0].init as ArrowFunctionExpression
const code = prettier
- .format(generate(func).code, {
+ // @ts-ignore Can't call `generate` in ESM directly, must reference `default`.
+ .format(generate.default(func).code, {
parser: 'typescript',
singleQuote: true,
trailingComma: 'all',
diff --git a/script/generate-e2e-tests.js b/script/generate-e2e-tests.js
index f504d221911..c59a923a6ec 100644
--- a/script/generate-e2e-tests.js
+++ b/script/generate-e2e-tests.js
@@ -1,10 +1,14 @@
'use strict'
-const fs = require('node:fs')
-const path = require('node:path')
-const prettier = require('prettier')
-const prettierConfig = require('@github/prettier-config')
-const recast = require('recast')
+import fs from 'node:fs'
+import {fileURLToPath} from 'url'
+import path from 'node:path'
+import prettier from 'prettier'
+import prettierConfig from '@github/prettier-config'
+import recast from 'recast'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
const E2E_DIR = path.join(__dirname, '..', 'e2e', 'components')
const components = new Map([
@@ -1501,8 +1505,8 @@ for (const [component, info] of components) {
})
const source = recast.parse(`import {test, expect} from '@playwright/test'
-import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
+import {visit} from '../test-helpers/storybook.js'
+import {themes} from '../test-helpers/themes.js'
test.describe('${component}', () => {
${stories.join('\n\n')}
diff --git a/script/get-export-sizes.js b/script/get-export-sizes.js
index dd9f371fa49..c658cf200f5 100644
--- a/script/get-export-sizes.js
+++ b/script/get-export-sizes.js
@@ -1,15 +1,16 @@
-'use strict'
+import fs from 'node:fs/promises'
+import path from 'node:path'
+import {fileURLToPath} from 'url'
+import core from '@actions/core'
+import {nodeResolve} from '@rollup/plugin-node-resolve'
+import virtual from '@rollup/plugin-virtual'
+import {filesize} from 'filesize'
+import {rollup} from 'rollup'
+import {minify} from 'terser'
+import gzipSize from 'gzip-size'
-const fs = require('node:fs/promises')
-const path = require('node:path')
-const core = require('@actions/core')
-const commonjs = require('@rollup/plugin-commonjs')
-const {nodeResolve} = require('@rollup/plugin-node-resolve')
-const virtual = require('@rollup/plugin-virtual')
-const {filesize} = require('filesize')
-const {rollup} = require('rollup')
-const {minify} = require('terser')
-const gzipSize = require('gzip-size')
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
async function main() {
const rootDirectory = path.resolve(__dirname, '..')
@@ -36,12 +37,7 @@ async function main() {
const bundle = await rollup({
input: filepath,
external,
- plugins: [
- nodeResolve(),
- commonjs({
- include: [/node_modules/],
- }),
- ],
+ plugins: [nodeResolve()],
onwarn: () => {},
})
const {output} = await bundle.generate({
@@ -60,9 +56,6 @@ async function main() {
external,
plugins: [
nodeResolve(),
- commonjs({
- include: /node_modules/,
- }),
virtual({
__entrypoint__: `export { ${identifier} } from '${filepath}';`,
}),
diff --git a/src/__tests__/filterObject.test.ts b/src/__tests__/filterObject.test.ts
index 89aeabc5c48..474ffb70ae0 100644
--- a/src/__tests__/filterObject.test.ts
+++ b/src/__tests__/filterObject.test.ts
@@ -1,4 +1,5 @@
-import {isColorValue, isShadowValue, filterObject} from '../utils/theme'
+import Theme from '../utils/theme'
+const {isColorValue, isShadowValue, filterObject} = Theme
describe('filterObject', () => {
const colors = {
diff --git a/src/__tests__/theme.test.ts b/src/__tests__/theme.test.ts
index 0f5033bf4e6..448383f47d6 100644
--- a/src/__tests__/theme.test.ts
+++ b/src/__tests__/theme.test.ts
@@ -1,4 +1,5 @@
-import {isShadowValue} from '../utils/theme'
+import Theme from '../utils/theme'
+const {isShadowValue} = Theme
describe('isShadowValue', () => {
it('accepts transparent', () => {
diff --git a/src/theme.ts b/src/theme.ts
index 7896b4e0b8f..c538a890b0f 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -1,6 +1,8 @@
import {KeyPaths} from './utils/types/KeyPaths'
import primitives from '@primer/primitives'
-import {partitionColors, fontStack, omitScale} from './utils/theme'
+import __theme from './utils/theme'
+
+const {partitionColors, fontStack, omitScale} = __theme
const {lineHeight: lineHeights} = primitives.typography.normal
diff --git a/src/utils/theme.js b/src/utils/theme.js
index bf890c042c6..850d5233c42 100644
--- a/src/utils/theme.js
+++ b/src/utils/theme.js
@@ -1,8 +1,8 @@
// Utility functions used in theme-preval.js
// This file needs to be a JavaScript file using CommonJS to be compatible with preval
-const isEmpty = require('lodash.isempty')
-const isObject = require('lodash.isobject')
+import isEmpty from 'lodash.isempty'
+import isObject from 'lodash.isobject'
function fontStack(fonts) {
return fonts.map(font => (font.includes(' ') ? `"${font}"` : font)).join(', ')
@@ -57,7 +57,7 @@ function omitScale(obj) {
return rest
}
-module.exports = {
+export default {
fontStack,
isShadowValue,
isColorValue,
diff --git a/tsconfig.build.json b/tsconfig.build.json
index daa96c32564..197a78d869a 100644
--- a/tsconfig.build.json
+++ b/tsconfig.build.json
@@ -1,7 +1,7 @@
{
"extends": "./tsconfig.json",
"compilerOptions": {
- "emitDeclarationOnly": true
+ "emitDeclarationOnly": true,
},
// NOTE: We exclude Storybook stories and test utilities which import
// Storybook and its dependencies, because:
diff --git a/tsconfig.json b/tsconfig.json
index 3aabac162e4..83279e56195 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,7 +1,7 @@
{
"compilerOptions": {
"target": "esnext",
- "module": "commonjs",
+ "module": "esnext",
"allowJs": true,
"checkJs": false,
"jsx": "preserve",
@@ -25,5 +25,9 @@
"script/**/*.ts",
"e2e/**/*.ts",
"playwright.config.ts"
- ]
+ ],
+ "ts-node": {
+ "esm": true,
+ "experimentalSpecifierResolution": "node"
+ }
}