From 0a83cfd52356d504dea26ad932b3da56e885461a Mon Sep 17 00:00:00 2001
From: Cole Bemis <colebemis@github.com>
Date: Wed, 8 Dec 2021 21:03:39 +0000
Subject: [PATCH 1/2] Replaces references to @primer/components with
 @primer/react

---
 CHANGELOG.md                                  |  4 +-
 docs/rules/no-deprecated-colors.md            | 10 +--
 docs/rules/no-system-props.md                 |  6 +-
 package-lock.json                             |  2 +-
 .../__tests__/no-deprecated-colors.test.js    | 72 +++++++++----------
 src/rules/__tests__/no-system-props.test.js   | 60 ++++++++--------
 src/rules/no-deprecated-colors.js             |  6 +-
 src/utils/is-primer-component.js              |  2 +-
 8 files changed, 81 insertions(+), 81 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8269d1eb..cf69121c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -36,7 +36,7 @@
 
   ```js
   /* eslint primer-react/no-deprecated-colors: ["warn", {"checkAllStrings": true}] */
-  import {Box} from '@primer/components'
+  import {Box} from '@primer/react'
 
   function ExampleComponent() {
     const styles = {
@@ -51,7 +51,7 @@
 
 ### Patch Changes
 
-- [#7](https://github.com/primer/eslint-plugin-primer-react/pull/7) [`d9dfb8d`](https://github.com/primer/eslint-plugin-primer-react/commit/d9dfb8de6d6dc42efe606517db7a0dd90d5c5578) Thanks [@colebemis](https://github.com/colebemis)! - Add `skipImportCheck` option. By default, the `no-deprecated-colors` rule will only check for deprecated colors used in functions and components that are imported from `@primer/components`. You can disable this behavior by setting `skipImportCheck` to `true`. This is useful for linting custom components that pass color-related props down to Primer React components.
+- [#7](https://github.com/primer/eslint-plugin-primer-react/pull/7) [`d9dfb8d`](https://github.com/primer/eslint-plugin-primer-react/commit/d9dfb8de6d6dc42efe606517db7a0dd90d5c5578) Thanks [@colebemis](https://github.com/colebemis)! - Add `skipImportCheck` option. By default, the `no-deprecated-colors` rule will only check for deprecated colors used in functions and components that are imported from `@primer/react`. You can disable this behavior by setting `skipImportCheck` to `true`. This is useful for linting custom components that pass color-related props down to Primer React components.
 
 * [#6](https://github.com/primer/eslint-plugin-primer-react/pull/6) [`dd14594`](https://github.com/primer/eslint-plugin-primer-react/commit/dd14594b05e4d800baa76771f5b911d77352a983) Thanks [@colebemis](https://github.com/colebemis)! - The `no-deprecated-colors` rule can now find deprecated colors in the following cases:
 
diff --git a/docs/rules/no-deprecated-colors.md b/docs/rules/no-deprecated-colors.md
index 98468d9f..818282cc 100644
--- a/docs/rules/no-deprecated-colors.md
+++ b/docs/rules/no-deprecated-colors.md
@@ -12,7 +12,7 @@ This rule disallows references to color variables that are deprecated in [Primer
 
 ```jsx
 /* eslint primer-react/no-deprecated-colors: "error" */
-import {Box, themeGet} from '@primer/components'
+import {Box, themeGet} from '@primer/react'
 import styled from 'styled-components'
 
 const SystemPropExample() = () => <Box color="some.deprecated.color">Incorrect</Box>
@@ -30,7 +30,7 @@ const ThemeGetExample = styled.div`
 
 ```jsx
 /* eslint primer-react/no-deprecated-colors: "error" */
-import {Box, themeGet} from '@primer/components'
+import {Box, themeGet} from '@primer/react'
 import styled from 'styled-components'
 
 const SystemPropExample() = () => <Box color="some.color">Correct</Box>
@@ -48,11 +48,11 @@ const ThemeGetExample = styled.div`
 
 - `skipImportCheck` (default: `false`)
 
-  By default, the `no-deprecated-colors` rule will only check for deprecated colors used in functions and components that are imported from `@primer/components`. You can disable this behavior by setting `skipImportCheck` to `true`. This is useful for linting custom components that pass color-related props down to Primer React components.
+  By default, the `no-deprecated-colors` rule will only check for deprecated colors used in functions and components that are imported from `@primer/react`. You can disable this behavior by setting `skipImportCheck` to `true`. This is useful for linting custom components that pass color-related props down to Primer React components.
 
   ```js
   /* eslint primer-react/no-deprecated-colors: ["warn", {"skipImportCheck": true}] */
-  import {Box} from '@primer/components'
+  import {Box} from '@primer/react'
 
   function MyBox({color, children}) {
     return <Box color={color}>{children}</Box>
@@ -70,7 +70,7 @@ const ThemeGetExample = styled.div`
 
   ```js
   /* eslint primer-react/no-deprecated-colors: ["warn", {"checkAllStrings": true}] */
-  import {Box} from '@primer/components'
+  import {Box} from '@primer/react'
 
   function ExampleComponent() {
     const styles = {
diff --git a/docs/rules/no-system-props.md b/docs/rules/no-system-props.md
index 0bc2f706..957c6599 100644
--- a/docs/rules/no-system-props.md
+++ b/docs/rules/no-system-props.md
@@ -14,7 +14,7 @@ This rule disallows the use of any styled-system prop on Primer components, as t
 
 ```jsx
 /* eslint primer-react/no-system-props: "error" */
-import {Button} from '@primer/components'
+import {Button} from '@primer/react'
 
 <Button width={200} />
 <Button width={200} sx={{height: 300}} />
@@ -24,7 +24,7 @@ import {Button} from '@primer/components'
 
 ```jsx
 /* eslint primer-react/no-system-props: "error" */
-import {Box, Button, ProgressBar} from '@primer/components'
+import {Box, Button, ProgressBar} from '@primer/react'
 import {Avatar} from 'some-other-library'
 // Non-system props are allowed
 <Button someOtherProp="foo" />
@@ -47,7 +47,7 @@ import {Avatar} from 'some-other-library'
 
   ```js
   /* eslint primer-react/no-system-props: ["warn", {"includeUtilityComponents": true}] */
-  import {Box} from '@primer/components'
+  import {Box} from '@primer/react'
 
   function App() {
     // Enabling `includeUtilityComponents` will find system prop usage on utility components like this:
diff --git a/package-lock.json b/package-lock.json
index 08e75c5f..98da3968 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-primer-react",
-  "version": "0.6.0",
+  "version": "0.7.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/src/rules/__tests__/no-deprecated-colors.test.js b/src/rules/__tests__/no-deprecated-colors.test.js
index 4ac4d34f..44e4b151 100644
--- a/src/rules/__tests__/no-deprecated-colors.test.js
+++ b/src/rules/__tests__/no-deprecated-colors.test.js
@@ -28,16 +28,16 @@ const ruleTester = new RuleTester({
 ruleTester.run('no-deprecated-colors', rule, {
   valid: [
     `import {Box} from '@other/design-system'; <Box color="text.primary">Hello</Box>`,
-    `import {Box} from "@primer/components"; <Box color="fg.default">Hello</Box>`,
-    `import {hello} from "@primer/components"; hello("colors.text.primary")`,
-    `import {themeGet} from "@primer/components"; themeGet("space.text.primary")`,
-    `import {themeGet} from "@primer/components"; themeGet(props.backgroundColorThemeValue)`,
-    `import {themeGet} from "@primer/components"; themeGet(2)`,
+    `import {Box} from "@primer/react"; <Box color="fg.default">Hello</Box>`,
+    `import {hello} from "@primer/react"; hello("colors.text.primary")`,
+    `import {themeGet} from "@primer/react"; themeGet("space.text.primary")`,
+    `import {themeGet} from "@primer/react"; themeGet(props.backgroundColorThemeValue)`,
+    `import {themeGet} from "@primer/react"; themeGet(2)`,
     `import {themeGet} from "@other/design-system"; themeGet("colors.text.primary")`,
     `import {get} from "@other/constants"; get("space.text.primary")`,
-    `import {Box} from '@primer/components'; <Box sx={styles}>Hello</Box>`,
-    `import {Box} from '@primer/components'; <Box sx={{color: text.primary}}>Hello</Box>`,
-    `import {Box} from '@primer/components'; <Box sx={{color: "fg.default"}}>Hello</Box>`,
+    `import {Box} from '@primer/react'; <Box sx={styles}>Hello</Box>`,
+    `import {Box} from '@primer/react'; <Box sx={{color: text.primary}}>Hello</Box>`,
+    `import {Box} from '@primer/react'; <Box sx={{color: "fg.default"}}>Hello</Box>`,
     `{color: 'text.primary'}`
   ],
   invalid: [
@@ -52,8 +52,8 @@ ruleTester.run('no-deprecated-colors', rule, {
       ]
     },
     {
-      code: `import {Box} from "@primer/components"; function Example() { return <Box color="text.primary">Hello</Box> }`,
-      output: `import {Box} from "@primer/components"; function Example() { return <Box color="fg.default">Hello</Box> }`,
+      code: `import {Box} from "@primer/react"; function Example() { return <Box color="text.primary">Hello</Box> }`,
+      output: `import {Box} from "@primer/react"; function Example() { return <Box color="fg.default">Hello</Box> }`,
       errors: [
         {
           message: '"text.primary" is deprecated. Use "fg.default" instead.'
@@ -71,8 +71,8 @@ ruleTester.run('no-deprecated-colors', rule, {
       ]
     },
     {
-      code: `import Box from '@primer/components/lib-esm/Box'; function Example() { return <Box color="text.primary">Hello</Box> }`,
-      output: `import Box from '@primer/components/lib-esm/Box'; function Example() { return <Box color="fg.default">Hello</Box> }`,
+      code: `import Box from '@primer/react/lib-esm/Box'; function Example() { return <Box color="text.primary">Hello</Box> }`,
+      output: `import Box from '@primer/react/lib-esm/Box'; function Example() { return <Box color="fg.default">Hello</Box> }`,
       errors: [
         {
           message: '"text.primary" is deprecated. Use "fg.default" instead.'
@@ -80,8 +80,8 @@ ruleTester.run('no-deprecated-colors', rule, {
       ]
     },
     {
-      code: `import {Box} from "@primer/components"; const Example = () => <Box color="text.primary">Hello</Box>`,
-      output: `import {Box} from "@primer/components"; const Example = () => <Box color="fg.default">Hello</Box>`,
+      code: `import {Box} from "@primer/react"; const Example = () => <Box color="text.primary">Hello</Box>`,
+      output: `import {Box} from "@primer/react"; const Example = () => <Box color="fg.default">Hello</Box>`,
       errors: [
         {
           message: '"text.primary" is deprecated. Use "fg.default" instead.'
@@ -89,8 +89,8 @@ ruleTester.run('no-deprecated-colors', rule, {
       ]
     },
     {
-      code: `import {Box} from "@primer/components"; <Box bg="bg.primary" m={1} />`,
-      output: `import {Box} from "@primer/components"; <Box bg="canvas.default" m={1} />`,
+      code: `import {Box} from "@primer/react"; <Box bg="bg.primary" m={1} />`,
+      output: `import {Box} from "@primer/react"; <Box bg="canvas.default" m={1} />`,
       errors: [
         {
           message: '"bg.primary" is deprecated. Use "canvas.default" instead.'
@@ -98,8 +98,8 @@ ruleTester.run('no-deprecated-colors', rule, {
       ]
     },
     {
-      code: `import {Box} from "@primer/components"; <Box sx={{bg: "bg.primary", m: 1, ...rest}} />`,
-      output: `import {Box} from "@primer/components"; <Box sx={{bg: "canvas.default", m: 1, ...rest}} />`,
+      code: `import {Box} from "@primer/react"; <Box sx={{bg: "bg.primary", m: 1, ...rest}} />`,
+      output: `import {Box} from "@primer/react"; <Box sx={{bg: "canvas.default", m: 1, ...rest}} />`,
       errors: [
         {
           message: '"bg.primary" is deprecated. Use "canvas.default" instead.'
@@ -107,8 +107,8 @@ ruleTester.run('no-deprecated-colors', rule, {
       ]
     },
     {
-      code: `import {Box} from "@primer/components"; <Box sx={{boxShadow: theme => theme.shadows.autocomplete.shadow}} />`,
-      output: `import {Box} from "@primer/components"; <Box sx={{boxShadow: theme => theme.shadows.shadow.medium}} />`,
+      code: `import {Box} from "@primer/react"; <Box sx={{boxShadow: theme => theme.shadows.autocomplete.shadow}} />`,
+      output: `import {Box} from "@primer/react"; <Box sx={{boxShadow: theme => theme.shadows.shadow.medium}} />`,
       errors: [
         {
           message: '"theme.shadows.autocomplete.shadow" is deprecated. Use "theme.shadows.shadow.medium" instead.'
@@ -116,8 +116,8 @@ ruleTester.run('no-deprecated-colors', rule, {
       ]
     },
     {
-      code: `import {Box} from "@primer/components"; <Box sx={{boxShadow: theme => \`0 1px 2px \${theme.colors.text.primary}\`}} />`,
-      output: `import {Box} from "@primer/components"; <Box sx={{boxShadow: theme => \`0 1px 2px \${theme.colors.fg.default}\`}} />`,
+      code: `import {Box} from "@primer/react"; <Box sx={{boxShadow: theme => \`0 1px 2px \${theme.colors.text.primary}\`}} />`,
+      output: `import {Box} from "@primer/react"; <Box sx={{boxShadow: theme => \`0 1px 2px \${theme.colors.fg.default}\`}} />`,
       errors: [
         {
           message: '"theme.colors.text.primary" is deprecated. Use "theme.colors.fg.default" instead.'
@@ -125,8 +125,8 @@ ruleTester.run('no-deprecated-colors', rule, {
       ]
     },
     {
-      code: `import {Box} from "@primer/components"; <Box sx={{boxShadow: t => \`0 1px 2px \${t.colors.text.primary}\`}} />`,
-      output: `import {Box} from "@primer/components"; <Box sx={{boxShadow: t => \`0 1px 2px \${t.colors.fg.default}\`}} />`,
+      code: `import {Box} from "@primer/react"; <Box sx={{boxShadow: t => \`0 1px 2px \${t.colors.text.primary}\`}} />`,
+      output: `import {Box} from "@primer/react"; <Box sx={{boxShadow: t => \`0 1px 2px \${t.colors.fg.default}\`}} />`,
       errors: [
         {
           message: '"t.colors.text.primary" is deprecated. Use "t.colors.fg.default" instead.'
@@ -134,8 +134,8 @@ ruleTester.run('no-deprecated-colors', rule, {
       ]
     },
     {
-      code: `import {Box} from "@primer/components"; <Box sx={{"&:hover": {bg: "bg.primary"}}} />`,
-      output: `import {Box} from "@primer/components"; <Box sx={{"&:hover": {bg: "canvas.default"}}} />`,
+      code: `import {Box} from "@primer/react"; <Box sx={{"&:hover": {bg: "bg.primary"}}} />`,
+      output: `import {Box} from "@primer/react"; <Box sx={{"&:hover": {bg: "canvas.default"}}} />`,
       errors: [
         {
           message: '"bg.primary" is deprecated. Use "canvas.default" instead.'
@@ -143,25 +143,25 @@ ruleTester.run('no-deprecated-colors', rule, {
       ]
     },
     {
-      code: `import {Box} from "@primer/components"; <Box color="auto.green.5" />`,
+      code: `import {Box} from "@primer/react"; <Box color="auto.green.5" />`,
       errors: [
         {
           message: '"auto.green.5" is deprecated.',
           suggestions: [
             {
               desc: 'Use "success.fg" instead.',
-              output: `import {Box} from "@primer/components"; <Box color="success.fg" />`
+              output: `import {Box} from "@primer/react"; <Box color="success.fg" />`
             },
             {
               desc: 'Use "success.emphasis" instead.',
-              output: `import {Box} from "@primer/components"; <Box color="success.emphasis" />`
+              output: `import {Box} from "@primer/react"; <Box color="success.emphasis" />`
             }
           ]
         }
       ]
     },
     {
-      code: `import {Box} from "@primer/components"; <Box color="fade.fg10" />`,
+      code: `import {Box} from "@primer/react"; <Box color="fade.fg10" />`,
       errors: [
         {
           message:
@@ -170,8 +170,8 @@ ruleTester.run('no-deprecated-colors', rule, {
       ]
     },
     {
-      code: `import {Box, Text} from "@primer/components"; <Box bg="bg.primary"><Text color="text.primary">Hello</Text></Box>`,
-      output: `import {Box, Text} from "@primer/components"; <Box bg="canvas.default"><Text color="fg.default">Hello</Text></Box>`,
+      code: `import {Box, Text} from "@primer/react"; <Box bg="bg.primary"><Text color="text.primary">Hello</Text></Box>`,
+      output: `import {Box, Text} from "@primer/react"; <Box bg="canvas.default"><Text color="fg.default">Hello</Text></Box>`,
       errors: [
         {
           message: '"bg.primary" is deprecated. Use "canvas.default" instead.'
@@ -182,8 +182,8 @@ ruleTester.run('no-deprecated-colors', rule, {
       ]
     },
     {
-      code: `import {themeGet} from "@primer/components"; themeGet("colors.text.primary")`,
-      output: `import {themeGet} from "@primer/components"; themeGet("colors.fg.default")`,
+      code: `import {themeGet} from "@primer/react"; themeGet("colors.text.primary")`,
+      output: `import {themeGet} from "@primer/react"; themeGet("colors.fg.default")`,
       errors: [
         {
           message: '"colors.text.primary" is deprecated. Use "colors.fg.default" instead.'
@@ -191,8 +191,8 @@ ruleTester.run('no-deprecated-colors', rule, {
       ]
     },
     {
-      code: `import {themeGet} from "@primer/components"; themeGet("shadows.autocomplete.shadow")`,
-      output: `import {themeGet} from "@primer/components"; themeGet("shadows.shadow.medium")`,
+      code: `import {themeGet} from "@primer/react"; themeGet("shadows.autocomplete.shadow")`,
+      output: `import {themeGet} from "@primer/react"; themeGet("shadows.shadow.medium")`,
       errors: [
         {
           message: '"shadows.autocomplete.shadow" is deprecated. Use "shadows.shadow.medium" instead.'
diff --git a/src/rules/__tests__/no-system-props.test.js b/src/rules/__tests__/no-system-props.test.js
index 5053fe05..d143c6a5 100644
--- a/src/rules/__tests__/no-system-props.test.js
+++ b/src/rules/__tests__/no-system-props.test.js
@@ -13,18 +13,18 @@ const ruleTester = new RuleTester({
 
 ruleTester.run('no-system-props', rule, {
   valid: [
-    `import {Button} from '@primer/components'; <Button sx={{width: 200}} />`,
+    `import {Button} from '@primer/react'; <Button sx={{width: 200}} />`,
     `import {Button} from 'coles-cool-design-system'; <Button width={200} />`,
-    `import {Button} from '@primer/components'; <Button someOtherProp="foo" />`,
-    `import {Box} from '@primer/components'; <Box width={200} />`,
-    `import {ProgressBar} from '@primer/components'; <ProgressBar bg="howdy" />`,
-    `import {Button} from '@primer/components'; <Button {...someExpression()} />`,
-    `import {Button} from '@primer/components'; <Button variant="large" />`
+    `import {Button} from '@primer/react'; <Button someOtherProp="foo" />`,
+    `import {Box} from '@primer/react'; <Box width={200} />`,
+    `import {ProgressBar} from '@primer/react'; <ProgressBar bg="howdy" />`,
+    `import {Button} from '@primer/react'; <Button {...someExpression()} />`,
+    `import {Button} from '@primer/react'; <Button variant="large" />`
   ],
   invalid: [
     {
-      code: `import {Button} from '@primer/components'; <Button width={200} />`,
-      output: `import {Button} from '@primer/components'; <Button  sx={{width: 200}} />`,
+      code: `import {Button} from '@primer/react'; <Button width={200} />`,
+      output: `import {Button} from '@primer/react'; <Button  sx={{width: 200}} />`,
       errors: [
         {
           messageId: 'noSystemProps',
@@ -33,8 +33,8 @@ ruleTester.run('no-system-props', rule, {
       ]
     },
     {
-      code: `import {Button} from '@primer/components'; <Button width="200" />`,
-      output: `import {Button} from '@primer/components'; <Button  sx={{width: "200"}} />`,
+      code: `import {Button} from '@primer/react'; <Button width="200" />`,
+      output: `import {Button} from '@primer/react'; <Button  sx={{width: "200"}} />`,
       errors: [
         {
           messageId: 'noSystemProps',
@@ -43,8 +43,8 @@ ruleTester.run('no-system-props', rule, {
       ]
     },
     {
-      code: `import {Button} from '@primer/components'; <Button width={"200"} />`,
-      output: `import {Button} from '@primer/components'; <Button  sx={{width: "200"}} />`,
+      code: `import {Button} from '@primer/react'; <Button width={"200"} />`,
+      output: `import {Button} from '@primer/react'; <Button  sx={{width: "200"}} />`,
       errors: [
         {
           messageId: 'noSystemProps',
@@ -53,8 +53,8 @@ ruleTester.run('no-system-props', rule, {
       ]
     },
     {
-      code: `import {Button} from '@primer/components'; <Button width={myWidth} />`,
-      output: `import {Button} from '@primer/components'; <Button  sx={{width: myWidth}} />`,
+      code: `import {Button} from '@primer/react'; <Button width={myWidth} />`,
+      output: `import {Button} from '@primer/react'; <Button  sx={{width: myWidth}} />`,
       errors: [
         {
           messageId: 'noSystemProps',
@@ -63,8 +63,8 @@ ruleTester.run('no-system-props', rule, {
       ]
     },
     {
-      code: `import {Button} from '@primer/components'; <Button width={200} height={100} />`,
-      output: `import {Button} from '@primer/components'; <Button   sx={{width: 200, height: 100}} />`,
+      code: `import {Button} from '@primer/react'; <Button width={200} height={100} />`,
+      output: `import {Button} from '@primer/react'; <Button   sx={{width: 200, height: 100}} />`,
       errors: [
         {
           messageId: 'noSystemProps',
@@ -73,8 +73,8 @@ ruleTester.run('no-system-props', rule, {
       ]
     },
     {
-      code: `import {Button} from '@primer/components'; <Button width={200} sx={{height: 200}} />`,
-      output: `import {Button} from '@primer/components'; <Button  sx={{height: 200, width: 200}} />`,
+      code: `import {Button} from '@primer/react'; <Button width={200} sx={{height: 200}} />`,
+      output: `import {Button} from '@primer/react'; <Button  sx={{height: 200, width: 200}} />`,
       errors: [
         {
           messageId: 'noSystemProps',
@@ -83,8 +83,8 @@ ruleTester.run('no-system-props', rule, {
       ]
     },
     {
-      code: `import {Button} from '@primer/components'; <Button width={200} sx={{width: 300}} />`,
-      output: `import {Button} from '@primer/components'; <Button  sx={{width: 300}} />`,
+      code: `import {Button} from '@primer/react'; <Button width={200} sx={{width: 300}} />`,
+      output: `import {Button} from '@primer/react'; <Button  sx={{width: 300}} />`,
       errors: [
         {
           messageId: 'noSystemProps',
@@ -93,8 +93,8 @@ ruleTester.run('no-system-props', rule, {
       ]
     },
     {
-      code: `import {Button} from '@primer/components'; <Button width={200} sx={myStylez} />`,
-      output: `import {Button} from '@primer/components'; <Button width={200} sx={myStylez} />`,
+      code: `import {Button} from '@primer/react'; <Button width={200} sx={myStylez} />`,
+      output: `import {Button} from '@primer/react'; <Button width={200} sx={myStylez} />`,
       errors: [
         {
           messageId: 'noSystemProps',
@@ -103,8 +103,8 @@ ruleTester.run('no-system-props', rule, {
       ]
     },
     {
-      code: `import {Button} from '@primer/components'; <Button width={200} sx={{...partialStyles, width: 100}} />`,
-      output: `import {Button} from '@primer/components'; <Button  sx={{...partialStyles, width: 100}} />`,
+      code: `import {Button} from '@primer/react'; <Button width={200} sx={{...partialStyles, width: 100}} />`,
+      output: `import {Button} from '@primer/react'; <Button  sx={{...partialStyles, width: 100}} />`,
       errors: [
         {
           messageId: 'noSystemProps',
@@ -113,8 +113,8 @@ ruleTester.run('no-system-props', rule, {
       ]
     },
     {
-      code: `import {Label} from '@primer/components'; <Label width={200} outline />`,
-      output: `import {Label} from '@primer/components'; <Label  outline sx={{width: 200}} />`,
+      code: `import {Label} from '@primer/react'; <Label width={200} outline />`,
+      output: `import {Label} from '@primer/react'; <Label  outline sx={{width: 200}} />`,
       errors: [
         {
           messageId: 'noSystemProps',
@@ -123,8 +123,8 @@ ruleTester.run('no-system-props', rule, {
       ]
     },
     {
-      code: `import {Box} from '@primer/components'; <Box width={200} />`,
-      output: `import {Box} from '@primer/components'; <Box  sx={{width: 200}} />`,
+      code: `import {Box} from '@primer/react'; <Box width={200} />`,
+      output: `import {Box} from '@primer/react'; <Box  sx={{width: 200}} />`,
       options: [{includeUtilityComponents: true}],
       errors: [
         {
@@ -134,8 +134,8 @@ ruleTester.run('no-system-props', rule, {
       ]
     },
     {
-      code: `import {Text} from '@primer/components'; <Text width={200} />`,
-      output: `import {Text} from '@primer/components'; <Text  sx={{width: 200}} />`,
+      code: `import {Text} from '@primer/react'; <Text width={200} />`,
+      output: `import {Text} from '@primer/react'; <Text  sx={{width: 200}} />`,
       options: [{includeUtilityComponents: true}],
       errors: [
         {
diff --git a/src/rules/no-deprecated-colors.js b/src/rules/no-deprecated-colors.js
index dd895675..bbc52875 100644
--- a/src/rules/no-deprecated-colors.js
+++ b/src/rules/no-deprecated-colors.js
@@ -28,7 +28,7 @@ module.exports = {
   },
   create(context) {
     // If `skipImportCheck` is true, this rule will check for deprecated colors
-    // used in any components (not just ones that are imported from `@primer/components`).
+    // used in any components (not just ones that are imported from `@primer/react`).
     const skipImportCheck = context.options[0] ? context.options[0].skipImportCheck : false
 
     const checkAllStrings = context.options[0] ? context.options[0].checkAllStrings : false
@@ -43,7 +43,7 @@ module.exports = {
         }
       },
       JSXOpeningElement(node) {
-        // Skip if component was not imported from @primer/components
+        // Skip if component was not imported from @primer/react
         if (!skipImportCheck && !isPrimerComponent(node.name, context.getScope(node))) {
           return
         }
@@ -138,7 +138,7 @@ module.exports = {
 
 function isThemeGet(identifier, scope, skipImportCheck = false) {
   if (!skipImportCheck) {
-    return isImportedFrom(/^@primer\/components/, identifier, scope) && identifier.name === 'themeGet'
+    return isImportedFrom(/^@primer\/react/, identifier, scope) && identifier.name === 'themeGet'
   }
 
   return identifier.name === 'themeGet'
diff --git a/src/utils/is-primer-component.js b/src/utils/is-primer-component.js
index bb333c06..863bba34 100644
--- a/src/utils/is-primer-component.js
+++ b/src/utils/is-primer-component.js
@@ -1,6 +1,6 @@
 const {isImportedFrom} = require('./is-imported-from')
 
 function isPrimerComponent(identifier, scope) {
-  return isImportedFrom(/^@primer\/components/, identifier, scope)
+  return isImportedFrom(/^@primer\/react/, identifier, scope)
 }
 exports.isPrimerComponent = isPrimerComponent

From e5565ae890f55927c0b1dd96d8943efc1e0bbbfa Mon Sep 17 00:00:00 2001
From: Cole Bemis <colebemis@github.com>
Date: Wed, 8 Dec 2021 13:04:58 -0800
Subject: [PATCH 2/2] Create shaggy-coins-boil.md

---
 .changeset/shaggy-coins-boil.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/shaggy-coins-boil.md

diff --git a/.changeset/shaggy-coins-boil.md b/.changeset/shaggy-coins-boil.md
new file mode 100644
index 00000000..095b934d
--- /dev/null
+++ b/.changeset/shaggy-coins-boil.md
@@ -0,0 +1,5 @@
+---
+"eslint-plugin-primer-react": patch
+---
+
+Replace references to `@primer/components` with `@primer/react`