From 28048e9b4c1a6784791a61dfb424688fbaf8253c Mon Sep 17 00:00:00 2001
From: Mike Perrotti <mperrotti@github.com>
Date: Thu, 26 Oct 2023 13:39:16 -0400
Subject: [PATCH 01/12] adapts Blankslate to render proportionally in narrow
 areas

---
 src/Blankslate/Blankslate.tsx        |  57 +++----------
 src/Blankslate/blankslate.module.css | 123 +++++++++++++++++++++++++++
 2 files changed, 134 insertions(+), 46 deletions(-)
 create mode 100644 src/Blankslate/blankslate.module.css

diff --git a/src/Blankslate/Blankslate.tsx b/src/Blankslate/Blankslate.tsx
index 0742d8ae24b..57533cdb653 100644
--- a/src/Blankslate/Blankslate.tsx
+++ b/src/Blankslate/Blankslate.tsx
@@ -1,41 +1,8 @@
 import React from 'react'
-import styled from 'styled-components'
 import Box from '../Box'
 import {Button} from '../Button'
-import {get} from '../constants'
 import Link from '../Link'
-
-const StyledBlankslate = styled.div`
-  display: grid;
-  justify-items: center;
-  padding: ${get('space.5')};
-
-  &[data-border='true'] {
-    border: ${get('borderWidths.1')} solid ${get('colors.border.default')};
-    border-radius: ${get('radii.2')};
-  }
-
-  &[data-narrow='true'] {
-    margin: 0 auto;
-    max-width: 485px;
-  }
-
-  &[data-spacious='true'] {
-    padding: ${get('space.9')} ${get('space.6')};
-  }
-
-  .BlankSlateAction {
-    margin-top: ${get('space.3')};
-  }
-
-  .BlankSlateAction:first-of-type {
-    margin-top: ${get('space.4')};
-  }
-
-  .BlankSlateAction:last-of-type {
-    margin-bottom: ${get('space.2')};
-  }
-`
+import classNames from './blankslate.module.css'
 
 export type BlankslateProps = React.PropsWithChildren<{
   /**
@@ -56,16 +23,18 @@ export type BlankslateProps = React.PropsWithChildren<{
 
 function Blankslate({border, children, narrow, spacious}: BlankslateProps) {
   return (
-    <StyledBlankslate data-border={border} data-narrow={narrow} data-spacious={spacious}>
-      {children}
-    </StyledBlankslate>
+    <div className={classNames['Blankslate-Container']}>
+      <div className={classNames.Blankslate} data-border={border} data-narrow={narrow} data-spacious={spacious}>
+        {children}
+      </div>
+    </div>
   )
 }
 
 export type VisualProps = React.PropsWithChildren
 
 function Visual({children}: VisualProps) {
-  return <Box sx={{color: 'fg.muted', mb: 3}}>{children}</Box>
+  return <span className={classNames['Blankslate-Visual']}>{children}</span>
 }
 
 export type HeadingProps = React.PropsWithChildren<{
@@ -74,7 +43,7 @@ export type HeadingProps = React.PropsWithChildren<{
 
 function Heading({as = 'h2', children}: HeadingProps) {
   return (
-    <Box as={as} sx={{m: 0, mb: 2}}>
+    <Box as={as} className={classNames['Blankslate-Heading']}>
       {children}
     </Box>
   )
@@ -83,11 +52,7 @@ function Heading({as = 'h2', children}: HeadingProps) {
 export type DescriptionProps = React.PropsWithChildren
 
 function Description({children}: DescriptionProps) {
-  return (
-    <Box as="p" sx={{color: 'fg.muted', m: 0, mb: 2}}>
-      {children}
-    </Box>
-  )
+  return <p className={classNames['Blankslate-Description']}>{children}</p>
 }
 
 export type PrimaryActionProps = React.PropsWithChildren<{
@@ -96,7 +61,7 @@ export type PrimaryActionProps = React.PropsWithChildren<{
 
 function PrimaryAction({children, href}: PrimaryActionProps) {
   return (
-    <div className="BlankSlateAction">
+    <div className={classNames['Blankslate-Action']}>
       <Button as="a" href={href} variant="primary">
         {children}
       </Button>
@@ -110,7 +75,7 @@ export type SecondaryActionProps = React.PropsWithChildren<{
 
 function SecondaryAction({children, href}: SecondaryActionProps) {
   return (
-    <div className="BlankSlateAction">
+    <div className={classNames['Blankslate-Action']}>
       <Link href={href}>{children}</Link>
     </div>
   )
diff --git a/src/Blankslate/blankslate.module.css b/src/Blankslate/blankslate.module.css
new file mode 100644
index 00000000000..28025772822
--- /dev/null
+++ b/src/Blankslate/blankslate.module.css
@@ -0,0 +1,123 @@
+.Blankslate-Container {
+  container-type: inline-size;
+}
+
+.Blankslate {
+  --blankslate-outer-padding-block: var(--base-size-32);
+  --blankslate-outer-padding-inline: var(--base-size-32);
+  display: grid;
+  justify-items: center;
+  padding: var(--blankslate-outer-padding-block) var(--blankslate-outer-padding-inline);
+}
+
+.Blankslate[data-spacious='true'] {
+  --blankslate-outer-padding-block: var(--base-size-80);
+  --blankslate-outer-padding-inline: var(--base-size-40);
+}
+
+.Blankslate[data-border='true'] {
+  border: var(--borderWidth-thin) solid var(--borderColor-default);
+  border-radius: var(--borderRadius-medium);
+}
+
+.Blankslate[data-narrow='true'] {
+  margin: 0 auto;
+  max-width: 485px;
+}
+
+/* Blankslate.Visual */
+/* ------------------------------ */
+.Blankslate-Visual {
+  color: var(--fgColor-muted);
+  margin-bottom: var(--base-size-16);
+}
+
+/* Blankslate.Heading */
+/* ------------------------------ */
+.Blankslate-Heading,
+.Blankslate-Description {
+  margin: 0;
+  margin-bottom: var(--base-size-8);
+}
+
+.Blankslate-Heading {
+  font-size: var(--text-title-size-large);
+  font-weight: var(--text-title-weight-large);
+}
+
+/* Blankslate.Description */
+/* ------------------------------ */
+.Blankslate-Description {
+  color: var(--fgColor-muted);
+  font-size: var(--text-body-size-large);
+}
+
+/* Blankslate.Action */
+/* ------------------------------ */
+.Blankslate-Action {
+  margin-top: var(--base-size-16);
+}
+
+.Blankslate-Action:first-of-type {
+  margin-top: var(--base-size-20);
+}
+
+.Blankslate-Action:last-of-type {
+  margin-bottom: var(--base-size-8);
+}
+
+
+/* Container query to adapt to
+   small areas                    */
+/* ------------------------------ */
+
+/* At the time these styles were written,
+   `34rem` was our "small" breakpoint width */
+@container (max-width: 34rem) {
+  .Blankslate {
+    --blankslate-outer-padding-block: var(--base-size-20);
+    --blankslate-outer-padding-inline: var(--base-size-20);
+  }
+
+  .Blankslate[data-spacious='true'] {
+    --blankslate-outer-padding-block: var(--base-size-44);
+    --blankslate-outer-padding-inline: var(--base-size-28);
+  }
+
+  /* Blankslate.Heading */
+  /* ------------------------------ */
+  .Blankslate-Visual {
+    margin-bottom: var(--base-size-8);
+    max-width: var(--base-size-24);
+  }
+
+  .Blankslate-Visual svg {
+    width: 100%;
+  }
+
+  /* Blankslate.Heading */
+  /* ------------------------------ */
+  .Blankslate-Heading {
+    font-size: var(--text-title-size-medium);
+  }
+
+  /* Blankslate.Description */
+  /* ------------------------------ */
+  .Blankslate-Description {
+    font-size: var(--text-body-size-medium);
+  }
+
+  /* Blankslate.Action */
+  /* ------------------------------ */
+  .Blankslate-Action {
+    margin-top: var(--base-size-12);
+  }
+
+  .Blankslate-Action:first-of-type {
+    margin-top: var(--base-size-16);
+  }
+
+  .Blankslate-Action:last-of-type {
+    margin-bottom: var(--base-size-4);
+  }
+}

From 088744f23801561a2d5b56afd4ea3f078d409d13 Mon Sep 17 00:00:00 2001
From: Mike Perrotti <mperrotti@github.com>
Date: Thu, 26 Oct 2023 14:23:21 -0400
Subject: [PATCH 02/12] adds color token fallbacks

---
 src/Blankslate/Blankslate.tsx        | 12 ++++++++++--
 src/Blankslate/blankslate.module.css |  6 +++---
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/Blankslate/Blankslate.tsx b/src/Blankslate/Blankslate.tsx
index 57533cdb653..4495caa153d 100644
--- a/src/Blankslate/Blankslate.tsx
+++ b/src/Blankslate/Blankslate.tsx
@@ -2,7 +2,9 @@ import React from 'react'
 import Box from '../Box'
 import {Button} from '../Button'
 import Link from '../Link'
+import {get} from '../constants'
 import classNames from './blankslate.module.css'
+import styled from 'styled-components'
 
 export type BlankslateProps = React.PropsWithChildren<{
   /**
@@ -21,13 +23,19 @@ export type BlankslateProps = React.PropsWithChildren<{
   spacious?: boolean
 }>
 
+const StyledBlankslate = styled.div`
+  --borderColor-default-local-fallback: ${get('colors.border.default')};
+  --fgColor-muted-local-fallback: ${get('colors.fg.muted')};
+  container-type: inline-size;
+`
+
 function Blankslate({border, children, narrow, spacious}: BlankslateProps) {
   return (
-    <div className={classNames['Blankslate-Container']}>
+    <StyledBlankslate>
       <div className={classNames.Blankslate} data-border={border} data-narrow={narrow} data-spacious={spacious}>
         {children}
       </div>
-    </div>
+    </StyledBlankslate>
   )
 }
 
diff --git a/src/Blankslate/blankslate.module.css b/src/Blankslate/blankslate.module.css
index 28025772822..a203b1967f2 100644
--- a/src/Blankslate/blankslate.module.css
+++ b/src/Blankslate/blankslate.module.css
@@ -16,7 +16,7 @@
 }
 
 .Blankslate[data-border='true'] {
-  border: var(--borderWidth-thin) solid var(--borderColor-default);
+  border: var(--borderWidth-thin) solid var(--borderColor-default, var(--borderColor-default-local-fallback));
   border-radius: var(--borderRadius-medium);
 }
 
@@ -28,7 +28,7 @@
 /* Blankslate.Visual */
 /* ------------------------------ */
 .Blankslate-Visual {
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted, var(--fgColor-muted-local-fallback));
   margin-bottom: var(--base-size-16);
 }
 
@@ -48,7 +48,7 @@
 /* Blankslate.Description */
 /* ------------------------------ */
 .Blankslate-Description {
-  color: var(--fgColor-muted);
+  color: var(--fgColor-muted, var(--fgColor-muted-local-fallback));
   font-size: var(--text-body-size-large);
 }
 

From 33ae86cc76c81e658b4990cde8e7d5e21c6d0eb5 Mon Sep 17 00:00:00 2001
From: Mike Perrotti <mperrotti@github.com>
Date: Thu, 26 Oct 2023 14:32:48 -0400
Subject: [PATCH 03/12] adds changeset

---
 .changeset/many-ants-pump.md | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 .changeset/many-ants-pump.md

diff --git a/.changeset/many-ants-pump.md b/.changeset/many-ants-pump.md
new file mode 100644
index 00000000000..952bad9421c
--- /dev/null
+++ b/.changeset/many-ants-pump.md
@@ -0,0 +1,7 @@
+---
+'@primer/react': patch
+---
+
+Adapts Blankslate to render proportionally in narrow areas, and also converts Blankslate to use CSS modules.
+
+<!-- Changed components: Blankslate -->

From b9ad3dc2c82ce86d91e01b202d3fe28816304882 Mon Sep 17 00:00:00 2001
From: Mike Perrotti <mperrotti@github.com>
Date: Thu, 26 Oct 2023 14:40:28 -0400
Subject: [PATCH 04/12] formats CSS with Prettier

---
 src/Blankslate/blankslate.module.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/Blankslate/blankslate.module.css b/src/Blankslate/blankslate.module.css
index a203b1967f2..77a678eae35 100644
--- a/src/Blankslate/blankslate.module.css
+++ b/src/Blankslate/blankslate.module.css
@@ -66,7 +66,6 @@
   margin-bottom: var(--base-size-8);
 }
 
-
 /* Container query to adapt to
    small areas                    */
 /* ------------------------------ */

From c2c7d760983464d3860e732f2615ccb057297b3d Mon Sep 17 00:00:00 2001
From: Mike Perrotti <mperrotti@github.com>
Date: Thu, 26 Oct 2023 15:57:42 -0400
Subject: [PATCH 05/12] rm dead css module style

---
 src/Blankslate/blankslate.module.css | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/Blankslate/blankslate.module.css b/src/Blankslate/blankslate.module.css
index 77a678eae35..0b16472ba24 100644
--- a/src/Blankslate/blankslate.module.css
+++ b/src/Blankslate/blankslate.module.css
@@ -1,7 +1,3 @@
-.Blankslate-Container {
-  container-type: inline-size;
-}
-
 .Blankslate {
   --blankslate-outer-padding-block: var(--base-size-32);
   --blankslate-outer-padding-inline: var(--base-size-32);

From df91680c97a8e9bbcbe9ad25f7c70cd862b0ecd6 Mon Sep 17 00:00:00 2001
From: Mike Perrotti <mperrotti@github.com>
Date: Thu, 26 Oct 2023 19:40:54 -0400
Subject: [PATCH 06/12] uses smarter primitives

---
 src/Blankslate/blankslate.module.css | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/Blankslate/blankslate.module.css b/src/Blankslate/blankslate.module.css
index 0b16472ba24..30d6be579bd 100644
--- a/src/Blankslate/blankslate.module.css
+++ b/src/Blankslate/blankslate.module.css
@@ -51,15 +51,15 @@
 /* Blankslate.Action */
 /* ------------------------------ */
 .Blankslate-Action {
-  margin-top: var(--base-size-16);
+  margin-top: var(--stack-gap-normal);
 }
 
 .Blankslate-Action:first-of-type {
-  margin-top: var(--base-size-20);
+  margin-top: var(--stack-gap-spacious);
 }
 
 .Blankslate-Action:last-of-type {
-  margin-bottom: var(--base-size-8);
+  margin-bottom: var(--stack-gap-condensed);
 }
 
 /* Container query to adapt to
@@ -105,14 +105,14 @@
   /* Blankslate.Action */
   /* ------------------------------ */
   .Blankslate-Action {
-    margin-top: var(--base-size-12);
+    margin-top: var(--stack-gap-condensed);
   }
 
   .Blankslate-Action:first-of-type {
-    margin-top: var(--base-size-16);
+    margin-top: var(--stack-gap-normal);
   }
 
   .Blankslate-Action:last-of-type {
-    margin-bottom: var(--base-size-4);
+    margin-bottom: calc(var(--base-size-4) / 2);
   }
 }

From 78c840dfabcbf62ec98ce851f19b92a56b4b5b41 Mon Sep 17 00:00:00 2001
From: Mike Perrotti <mperrotti@github.com>
Date: Fri, 27 Oct 2023 09:31:36 -0400
Subject: [PATCH 07/12] tweaks type scale

---
 src/Blankslate/blankslate.module.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/Blankslate/blankslate.module.css b/src/Blankslate/blankslate.module.css
index 30d6be579bd..6b37a90ce08 100644
--- a/src/Blankslate/blankslate.module.css
+++ b/src/Blankslate/blankslate.module.css
@@ -37,8 +37,8 @@
 }
 
 .Blankslate-Heading {
-  font-size: var(--text-title-size-large);
-  font-weight: var(--text-title-weight-large);
+  font-size: var(--text-title-size-medium);
+  font-weight: var(--text-title-weight-medium);
 }
 
 /* Blankslate.Description */
@@ -93,7 +93,7 @@
   /* Blankslate.Heading */
   /* ------------------------------ */
   .Blankslate-Heading {
-    font-size: var(--text-title-size-medium);
+    font-size: var(--text-title-size-small);
   }
 
   /* Blankslate.Description */

From 36ba43737d0d36be4c01d2338c8525627c46f297 Mon Sep 17 00:00:00 2001
From: Mike Perrotti <mperrotti@github.com>
Date: Fri, 27 Oct 2023 09:39:19 -0400
Subject: [PATCH 08/12] improves token usage

---
 src/Blankslate/blankslate.module.css | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/Blankslate/blankslate.module.css b/src/Blankslate/blankslate.module.css
index 6b37a90ce08..b26cf8833ef 100644
--- a/src/Blankslate/blankslate.module.css
+++ b/src/Blankslate/blankslate.module.css
@@ -25,7 +25,7 @@
 /* ------------------------------ */
 .Blankslate-Visual {
   color: var(--fgColor-muted, var(--fgColor-muted-local-fallback));
-  margin-bottom: var(--base-size-16);
+  margin-bottom: var(--stack-gap-normal);
 }
 
 /* Blankslate.Heading */
@@ -33,7 +33,7 @@
 .Blankslate-Heading,
 .Blankslate-Description {
   margin: 0;
-  margin-bottom: var(--base-size-8);
+  margin-bottom: var(--stack-gap-condensed);
 }
 
 .Blankslate-Heading {
@@ -82,7 +82,7 @@
   /* Blankslate.Heading */
   /* ------------------------------ */
   .Blankslate-Visual {
-    margin-bottom: var(--base-size-8);
+    margin-bottom: var(--stack-gap-condensed);
     max-width: var(--base-size-24);
   }
 
@@ -113,6 +113,6 @@
   }
 
   .Blankslate-Action:last-of-type {
-    margin-bottom: calc(var(--base-size-4) / 2);
+    margin-bottom: calc(var(--stack-gap-condensed) / 2);
   }
 }

From b7dfad8d0a1011289d5d33d9bde7558a83999bcf Mon Sep 17 00:00:00 2001
From: Mike Perrotti <mperrotti@github.com>
Date: Mon, 13 Nov 2023 15:16:30 -0500
Subject: [PATCH 09/12] upgrades styled-components, converts Blankslate styles
 back to styled-components

---
 .changeset/many-ants-pump.md         |   2 +-
 package-lock.json                    |  76 +++++++++--------
 package.json                         |   8 +-
 src/Blankslate/Blankslate.tsx        | 107 ++++++++++++++++++++++--
 src/Blankslate/blankslate.module.css | 118 ---------------------------
 5 files changed, 143 insertions(+), 168 deletions(-)
 delete mode 100644 src/Blankslate/blankslate.module.css

diff --git a/.changeset/many-ants-pump.md b/.changeset/many-ants-pump.md
index 952bad9421c..83479137a55 100644
--- a/.changeset/many-ants-pump.md
+++ b/.changeset/many-ants-pump.md
@@ -2,6 +2,6 @@
 '@primer/react': patch
 ---
 
-Adapts Blankslate to render proportionally in narrow areas, and also converts Blankslate to use CSS modules.
+Adapts Blankslate to render proportionally in narrow areas, and upgrades `styled-components` to version `6.1.0` so we can use `@container` rule blocks.
 
 <!-- Changed components: Blankslate -->
diff --git a/package-lock.json b/package-lock.json
index 36ded8f59ec..d7960dc8571 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -94,7 +94,7 @@
         "@types/react": "18.2.21",
         "@types/react-dom": "18.2.6",
         "@types/semver": "7.5.3",
-        "@types/styled-components": "^5.1.26",
+        "@types/styled-components": "5.1.30",
         "@typescript-eslint/eslint-plugin": "5.59.6",
         "@typescript-eslint/parser": "5.62.0",
         "ajv": "8.12.0",
@@ -168,7 +168,7 @@
         "size-limit": "8.2.4",
         "storybook": "7.1.0",
         "storybook-addon-turbo-build": "2.0.1",
-        "styled-components": "5.3.11",
+        "styled-components": "6.1.0",
         "terser": "5.17.6",
         "ts-node": "10.9.1",
         "ts-toolbelt": "9.6.0",
@@ -187,10 +187,10 @@
       "peerDependencies": {
         "@types/react": "^18.0.0",
         "@types/react-dom": "^18.0.0",
-        "@types/styled-components": "^5.1.11",
+        "@types/styled-components": "5.1.30",
         "react": "^18.0.0",
         "react-dom": "^18.0.0",
-        "styled-components": "5.x"
+        "styled-components": "6.x"
       },
       "peerDependenciesMeta": {
         "@types/react": {
@@ -3521,16 +3521,10 @@
       "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==",
       "dev": true
     },
-    "node_modules/@emotion/stylis": {
-      "version": "0.8.5",
-      "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
-      "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==",
-      "dev": true
-    },
     "node_modules/@emotion/unitless": {
-      "version": "0.7.5",
-      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
-      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==",
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz",
+      "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==",
       "dev": true
     },
     "node_modules/@emotion/use-insertion-effect-with-fallbacks": {
@@ -14104,9 +14098,9 @@
       "dev": true
     },
     "node_modules/@types/styled-components": {
-      "version": "5.1.27",
-      "resolved": "https://registry.npmjs.org/@types/styled-components/-/styled-components-5.1.27.tgz",
-      "integrity": "sha512-oY9c1SdztRRF0QDQdwXEenfAjGN4WGUkaMpx5hvdTbYYqw01qoY2GrHi+kAR6SVofynzD6KbGoF5ITP0zh5pvg==",
+      "version": "5.1.30",
+      "resolved": "https://registry.npmjs.org/@types/styled-components/-/styled-components-5.1.30.tgz",
+      "integrity": "sha512-xxJqw0s1myRTgrzHgG5tKHS9hK+KNhjbKMXDWlHRo9eDNVVUqf147QUGYUqwyCDkFyGr2pi1qJKFMEy0ACZb0A==",
       "dev": true,
       "dependencies": {
         "@types/hoist-non-react-statics": "*",
@@ -14135,6 +14129,12 @@
       "resolved": "https://registry.npmjs.org/@types/styled-system__theme-get/-/styled-system__theme-get-5.0.2.tgz",
       "integrity": "sha512-tvGRyzADAn2qQ8Z/fw9YOBTL1EttDQ0zrmHq/N+/K/9tF1l2lsZ9334hls1zie32FCxjPJEhzzXVHxKwqXslog=="
     },
+    "node_modules/@types/stylis": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.3.tgz",
+      "integrity": "sha512-86XLCVEmWagiUEbr2AjSbeY4qHN9jMm3pgM3PuBYfLIbT0MpDSnA3GA/4W7KoH/C/eeK77kNaeIxZzjhKYIBgw==",
+      "dev": true
+    },
     "node_modules/@types/supports-color": {
       "version": "8.1.1",
       "resolved": "https://registry.npmjs.org/@types/supports-color/-/supports-color-8.1.1.tgz",
@@ -18181,9 +18181,9 @@
       "dev": true
     },
     "node_modules/csstype": {
-      "version": "3.0.8",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz",
-      "integrity": "sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw=="
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
+      "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
     },
     "node_modules/csv": {
       "version": "5.5.3",
@@ -38989,24 +38989,23 @@
       }
     },
     "node_modules/styled-components": {
-      "version": "5.3.11",
-      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.11.tgz",
-      "integrity": "sha512-uuzIIfnVkagcVHv9nE0VPlHPSCmXIUGKfJ42LNjxCCTDTL5sgnJ8Z7GZBq0EnLYGln77tPpEpExt2+qa+cZqSw==",
-      "dev": true,
-      "dependencies": {
-        "@babel/helper-module-imports": "^7.0.0",
-        "@babel/traverse": "^7.4.5",
-        "@emotion/is-prop-valid": "^1.1.0",
-        "@emotion/stylis": "^0.8.4",
-        "@emotion/unitless": "^0.7.4",
-        "babel-plugin-styled-components": ">= 1.12.0",
-        "css-to-react-native": "^3.0.0",
-        "hoist-non-react-statics": "^3.0.0",
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.0.tgz",
+      "integrity": "sha512-VWNfYYBuXzuLS/QYEeoPgMErP26WL+dX9//rEh80B2mmlS1yRxRxuL5eax4m6ybYEUoHWlTy2XOU32767mlMkg==",
+      "dev": true,
+      "dependencies": {
+        "@emotion/is-prop-valid": "^1.2.1",
+        "@emotion/unitless": "^0.8.0",
+        "@types/stylis": "^4.0.2",
+        "css-to-react-native": "^3.2.0",
+        "csstype": "^3.1.2",
+        "postcss": "^8.4.31",
         "shallowequal": "^1.1.0",
-        "supports-color": "^5.5.0"
+        "stylis": "^4.3.0",
+        "tslib": "^2.5.0"
       },
       "engines": {
-        "node": ">=10"
+        "node": ">= 16"
       },
       "funding": {
         "type": "opencollective",
@@ -39014,8 +39013,7 @@
       },
       "peerDependencies": {
         "react": ">= 16.8.0",
-        "react-dom": ">= 16.8.0",
-        "react-is": ">= 16.8.0"
+        "react-dom": ">= 16.8.0"
       }
     },
     "node_modules/styled-system": {
@@ -39054,6 +39052,12 @@
         "postcss": "^8.2.15"
       }
     },
+    "node_modules/stylis": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.0.tgz",
+      "integrity": "sha512-E87pIogpwUsUwXw7dNyU4QDjdgVMy52m+XEOPEKUn161cCzWjjhPSQhByfd1CcNvrOLnXQ6OnnZDwnJrz/Z4YQ==",
+      "dev": true
+    },
     "node_modules/stylus": {
       "version": "0.59.0",
       "resolved": "https://registry.npmjs.org/stylus/-/stylus-0.59.0.tgz",
diff --git a/package.json b/package.json
index ee0728ce6cc..aa548d36626 100644
--- a/package.json
+++ b/package.json
@@ -178,7 +178,7 @@
     "@types/node": "18.16.19",
     "@types/react": "18.2.21",
     "@types/react-dom": "18.2.6",
-    "@types/styled-components": "^5.1.26",
+    "@types/styled-components": "5.1.30",
     "@types/semver": "7.5.3",
     "@typescript-eslint/eslint-plugin": "5.59.6",
     "@typescript-eslint/parser": "5.62.0",
@@ -253,7 +253,7 @@
     "size-limit": "8.2.4",
     "storybook": "7.1.0",
     "storybook-addon-turbo-build": "2.0.1",
-    "styled-components": "5.3.11",
+    "styled-components": "6.1.0",
     "terser": "5.17.6",
     "ts-node": "10.9.1",
     "ts-toolbelt": "9.6.0",
@@ -268,10 +268,10 @@
   "peerDependencies": {
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
-    "@types/styled-components": "^5.1.11",
+    "@types/styled-components": "5.1.30",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "styled-components": "5.x"
+    "styled-components": "6.x"
   },
   "peerDependenciesMeta": {
     "@types/react": {
diff --git a/src/Blankslate/Blankslate.tsx b/src/Blankslate/Blankslate.tsx
index 4495caa153d..3265e32aa9c 100644
--- a/src/Blankslate/Blankslate.tsx
+++ b/src/Blankslate/Blankslate.tsx
@@ -3,7 +3,6 @@ import Box from '../Box'
 import {Button} from '../Button'
 import Link from '../Link'
 import {get} from '../constants'
-import classNames from './blankslate.module.css'
 import styled from 'styled-components'
 
 export type BlankslateProps = React.PropsWithChildren<{
@@ -24,15 +23,105 @@ export type BlankslateProps = React.PropsWithChildren<{
 }>
 
 const StyledBlankslate = styled.div`
-  --borderColor-default-local-fallback: ${get('colors.border.default')};
-  --fgColor-muted-local-fallback: ${get('colors.fg.muted')};
   container-type: inline-size;
+
+  .Blankslate {
+    --blankslate-outer-padding-block: var(--base-size-32);
+    --blankslate-outer-padding-inline: var(--base-size-32);
+    display: grid;
+    justify-items: center;
+    padding: var(--blankslate-outer-padding-block) var(--blankslate-outer-padding-inline);
+  }
+
+  .Blankslate[data-spacious='true'] {
+    --blankslate-outer-padding-block: var(--base-size-80);
+    --blankslate-outer-padding-inline: var(--base-size-40);
+  }
+
+  .Blankslate[data-border='true'] {
+    border: var(--borderWidth-thin) solid var(--borderColor-default, ${get('colors.border.default')});
+    border-radius: var(--borderRadius-medium);
+  }
+
+  .Blankslate[data-narrow='true'] {
+    margin: 0 auto;
+    max-width: 485px;
+  }
+
+  .Blankslate-Heading,
+  .Blankslate-Description {
+    margin: 0;
+    margin-bottom: var(--stack-gap-condensed);
+  }
+
+  .Blankslate-Heading {
+    font-size: var(--text-title-size-medium);
+    font-weight: var(--text-title-weight-medium);
+  }
+
+  .Blankslate-Description {
+    color: var(--fgColor-muted, ${get('colors.fg.muted')});
+    font-size: var(--text-body-size-large);
+  }
+
+  .Blankslate-Action {
+    margin-top: var(--stack-gap-normal);
+  }
+
+  .Blankslate-Action:first-of-type {
+    margin-top: var(--stack-gap-spacious);
+  }
+
+  .Blankslate-Action:last-of-type {
+    margin-bottom: var(--stack-gap-condensed);
+  }
+
+  @container (max-width: 34rem) {
+    .Blankslate {
+      --blankslate-outer-padding-block: var(--base-size-20);
+      --blankslate-outer-padding-inline: var(--base-size-20);
+    }
+
+    .Blankslate[data-spacious='true'] {
+      --blankslate-outer-padding-block: var(--base-size-44);
+      --blankslate-outer-padding-inline: var(--base-size-28);
+    }
+
+    .Blankslate-Visual {
+      margin-bottom: var(--stack-gap-condensed);
+      max-width: var(--base-size-24);
+    }
+
+    .Blankslate-Visual svg {
+      width: 100%;
+    }
+
+    .Blankslate-Heading {
+      font-size: var(--text-title-size-small);
+    }
+
+    .Blankslate-Description {
+      font-size: var(--text-body-size-medium);
+    }
+
+    .Blankslate-Action {
+      margin-top: var(--stack-gap-condensed);
+    }
+
+    .Blankslate-Action:first-of-type {
+      margin-top: var(--stack-gap-normal);
+    }
+
+    .Blankslate-Action:last-of-type {
+      margin-bottom: calc(var(--stack-gap-condensed) / 2);
+    }
+  }
 `
 
 function Blankslate({border, children, narrow, spacious}: BlankslateProps) {
   return (
     <StyledBlankslate>
-      <div className={classNames.Blankslate} data-border={border} data-narrow={narrow} data-spacious={spacious}>
+      <div className="Blankslate" data-border={border} data-narrow={narrow} data-spacious={spacious}>
         {children}
       </div>
     </StyledBlankslate>
@@ -42,7 +131,7 @@ function Blankslate({border, children, narrow, spacious}: BlankslateProps) {
 export type VisualProps = React.PropsWithChildren
 
 function Visual({children}: VisualProps) {
-  return <span className={classNames['Blankslate-Visual']}>{children}</span>
+  return <span className="Blankslate-Visual">{children}</span>
 }
 
 export type HeadingProps = React.PropsWithChildren<{
@@ -51,7 +140,7 @@ export type HeadingProps = React.PropsWithChildren<{
 
 function Heading({as = 'h2', children}: HeadingProps) {
   return (
-    <Box as={as} className={classNames['Blankslate-Heading']}>
+    <Box as={as} className="Blankslate-Heading">
       {children}
     </Box>
   )
@@ -60,7 +149,7 @@ function Heading({as = 'h2', children}: HeadingProps) {
 export type DescriptionProps = React.PropsWithChildren
 
 function Description({children}: DescriptionProps) {
-  return <p className={classNames['Blankslate-Description']}>{children}</p>
+  return <p className="Blankslate-Description">{children}</p>
 }
 
 export type PrimaryActionProps = React.PropsWithChildren<{
@@ -69,7 +158,7 @@ export type PrimaryActionProps = React.PropsWithChildren<{
 
 function PrimaryAction({children, href}: PrimaryActionProps) {
   return (
-    <div className={classNames['Blankslate-Action']}>
+    <div className="Blankslate-Action">
       <Button as="a" href={href} variant="primary">
         {children}
       </Button>
@@ -83,7 +172,7 @@ export type SecondaryActionProps = React.PropsWithChildren<{
 
 function SecondaryAction({children, href}: SecondaryActionProps) {
   return (
-    <div className={classNames['Blankslate-Action']}>
+    <div className="Blankslate-Action">
       <Link href={href}>{children}</Link>
     </div>
   )
diff --git a/src/Blankslate/blankslate.module.css b/src/Blankslate/blankslate.module.css
deleted file mode 100644
index b26cf8833ef..00000000000
--- a/src/Blankslate/blankslate.module.css
+++ /dev/null
@@ -1,118 +0,0 @@
-.Blankslate {
-  --blankslate-outer-padding-block: var(--base-size-32);
-  --blankslate-outer-padding-inline: var(--base-size-32);
-  display: grid;
-  justify-items: center;
-  padding: var(--blankslate-outer-padding-block) var(--blankslate-outer-padding-inline);
-}
-
-.Blankslate[data-spacious='true'] {
-  --blankslate-outer-padding-block: var(--base-size-80);
-  --blankslate-outer-padding-inline: var(--base-size-40);
-}
-
-.Blankslate[data-border='true'] {
-  border: var(--borderWidth-thin) solid var(--borderColor-default, var(--borderColor-default-local-fallback));
-  border-radius: var(--borderRadius-medium);
-}
-
-.Blankslate[data-narrow='true'] {
-  margin: 0 auto;
-  max-width: 485px;
-}
-
-/* Blankslate.Visual */
-/* ------------------------------ */
-.Blankslate-Visual {
-  color: var(--fgColor-muted, var(--fgColor-muted-local-fallback));
-  margin-bottom: var(--stack-gap-normal);
-}
-
-/* Blankslate.Heading */
-/* ------------------------------ */
-.Blankslate-Heading,
-.Blankslate-Description {
-  margin: 0;
-  margin-bottom: var(--stack-gap-condensed);
-}
-
-.Blankslate-Heading {
-  font-size: var(--text-title-size-medium);
-  font-weight: var(--text-title-weight-medium);
-}
-
-/* Blankslate.Description */
-/* ------------------------------ */
-.Blankslate-Description {
-  color: var(--fgColor-muted, var(--fgColor-muted-local-fallback));
-  font-size: var(--text-body-size-large);
-}
-
-/* Blankslate.Action */
-/* ------------------------------ */
-.Blankslate-Action {
-  margin-top: var(--stack-gap-normal);
-}
-
-.Blankslate-Action:first-of-type {
-  margin-top: var(--stack-gap-spacious);
-}
-
-.Blankslate-Action:last-of-type {
-  margin-bottom: var(--stack-gap-condensed);
-}
-
-/* Container query to adapt to
-   small areas                    */
-/* ------------------------------ */
-
-/* At the time these styles were written,
-   `34rem` was our "small" breakpoint width */
-@container (max-width: 34rem) {
-  .Blankslate {
-    --blankslate-outer-padding-block: var(--base-size-20);
-    --blankslate-outer-padding-inline: var(--base-size-20);
-  }
-
-  .Blankslate[data-spacious='true'] {
-    --blankslate-outer-padding-block: var(--base-size-44);
-    --blankslate-outer-padding-inline: var(--base-size-28);
-  }
-
-  /* Blankslate.Heading */
-  /* ------------------------------ */
-  .Blankslate-Visual {
-    margin-bottom: var(--stack-gap-condensed);
-    max-width: var(--base-size-24);
-  }
-
-  .Blankslate-Visual svg {
-    width: 100%;
-  }
-
-  /* Blankslate.Heading */
-  /* ------------------------------ */
-  .Blankslate-Heading {
-    font-size: var(--text-title-size-small);
-  }
-
-  /* Blankslate.Description */
-  /* ------------------------------ */
-  .Blankslate-Description {
-    font-size: var(--text-body-size-medium);
-  }
-
-  /* Blankslate.Action */
-  /* ------------------------------ */
-  .Blankslate-Action {
-    margin-top: var(--stack-gap-condensed);
-  }
-
-  .Blankslate-Action:first-of-type {
-    margin-top: var(--stack-gap-normal);
-  }
-
-  .Blankslate-Action:last-of-type {
-    margin-bottom: calc(var(--stack-gap-condensed) / 2);
-  }
-}

From d0b9dddf80b69f21ba837a26480ae30ffbab8b15 Mon Sep 17 00:00:00 2001
From: Mike Perrotti <mperrotti@github.com>
Date: Mon, 13 Nov 2023 16:24:49 -0500
Subject: [PATCH 10/12] adds comment explaining why 34rem for min-width

---
 src/Blankslate/Blankslate.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/Blankslate/Blankslate.tsx b/src/Blankslate/Blankslate.tsx
index 3265e32aa9c..a2c110fa41c 100644
--- a/src/Blankslate/Blankslate.tsx
+++ b/src/Blankslate/Blankslate.tsx
@@ -76,6 +76,8 @@ const StyledBlankslate = styled.div`
     margin-bottom: var(--stack-gap-condensed);
   }
 
+  /* At the time these styles were written,
+   34rem was our "small" breakpoint width */
   @container (max-width: 34rem) {
     .Blankslate {
       --blankslate-outer-padding-block: var(--base-size-20);

From 6ec504d743985cb022b0d8accbf0585a57874737 Mon Sep 17 00:00:00 2001
From: Mike Perrotti <mperrotti@github.com>
Date: Tue, 14 Nov 2023 16:36:09 -0500
Subject: [PATCH 11/12] renders an inline style block to get around
 styled-component 5.x limitations around container blocks

---
 .changeset/many-ants-pump.md  |  2 +-
 package-lock.json             | 68 ++++++++++++++---------------
 package.json                  |  8 ++--
 src/Blankslate/Blankslate.tsx | 81 +++++++++++++++++++----------------
 4 files changed, 82 insertions(+), 77 deletions(-)

diff --git a/.changeset/many-ants-pump.md b/.changeset/many-ants-pump.md
index 83479137a55..4032eefb4bd 100644
--- a/.changeset/many-ants-pump.md
+++ b/.changeset/many-ants-pump.md
@@ -2,6 +2,6 @@
 '@primer/react': patch
 ---
 
-Adapts Blankslate to render proportionally in narrow areas, and upgrades `styled-components` to version `6.1.0` so we can use `@container` rule blocks.
+Adapts Blankslate to render proportionally in narrow areas.
 
 <!-- Changed components: Blankslate -->
diff --git a/package-lock.json b/package-lock.json
index 3518a000c8f..dbe06d453cb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@primer/react",
-  "version": "36.1.0",
+  "version": "36.2.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@primer/react",
-      "version": "36.1.0",
+      "version": "36.2.0",
       "license": "MIT",
       "dependencies": {
         "@github/combobox-nav": "^2.1.5",
@@ -94,7 +94,7 @@
         "@types/react": "18.2.21",
         "@types/react-dom": "18.2.6",
         "@types/semver": "7.5.3",
-        "@types/styled-components": "5.1.30",
+        "@types/styled-components": "^5.1.26",
         "@typescript-eslint/eslint-plugin": "5.59.6",
         "@typescript-eslint/parser": "5.62.0",
         "ajv": "8.12.0",
@@ -168,7 +168,7 @@
         "size-limit": "8.2.4",
         "storybook": "7.1.0",
         "storybook-addon-turbo-build": "2.0.1",
-        "styled-components": "6.1.0",
+        "styled-components": "5.3.11",
         "terser": "5.17.6",
         "ts-node": "10.9.1",
         "ts-toolbelt": "9.6.0",
@@ -187,10 +187,10 @@
       "peerDependencies": {
         "@types/react": "^18.0.0",
         "@types/react-dom": "^18.0.0",
-        "@types/styled-components": "5.1.30",
+        "@types/styled-components": "^5.1.11",
         "react": "^18.0.0",
         "react-dom": "^18.0.0",
-        "styled-components": "6.x"
+        "styled-components": "5.x"
       },
       "peerDependenciesMeta": {
         "@types/react": {
@@ -3521,10 +3521,16 @@
       "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==",
       "dev": true
     },
+    "node_modules/@emotion/stylis": {
+      "version": "0.8.5",
+      "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
+      "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==",
+      "dev": true
+    },
     "node_modules/@emotion/unitless": {
-      "version": "0.8.1",
-      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz",
-      "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==",
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
+      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==",
       "dev": true
     },
     "node_modules/@emotion/use-insertion-effect-with-fallbacks": {
@@ -14129,12 +14135,6 @@
       "resolved": "https://registry.npmjs.org/@types/styled-system__theme-get/-/styled-system__theme-get-5.0.2.tgz",
       "integrity": "sha512-tvGRyzADAn2qQ8Z/fw9YOBTL1EttDQ0zrmHq/N+/K/9tF1l2lsZ9334hls1zie32FCxjPJEhzzXVHxKwqXslog=="
     },
-    "node_modules/@types/stylis": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.3.tgz",
-      "integrity": "sha512-86XLCVEmWagiUEbr2AjSbeY4qHN9jMm3pgM3PuBYfLIbT0MpDSnA3GA/4W7KoH/C/eeK77kNaeIxZzjhKYIBgw==",
-      "dev": true
-    },
     "node_modules/@types/supports-color": {
       "version": "8.1.1",
       "resolved": "https://registry.npmjs.org/@types/supports-color/-/supports-color-8.1.1.tgz",
@@ -39159,23 +39159,24 @@
       }
     },
     "node_modules/styled-components": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.0.tgz",
-      "integrity": "sha512-VWNfYYBuXzuLS/QYEeoPgMErP26WL+dX9//rEh80B2mmlS1yRxRxuL5eax4m6ybYEUoHWlTy2XOU32767mlMkg==",
-      "dev": true,
-      "dependencies": {
-        "@emotion/is-prop-valid": "^1.2.1",
-        "@emotion/unitless": "^0.8.0",
-        "@types/stylis": "^4.0.2",
-        "css-to-react-native": "^3.2.0",
-        "csstype": "^3.1.2",
-        "postcss": "^8.4.31",
+      "version": "5.3.11",
+      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.11.tgz",
+      "integrity": "sha512-uuzIIfnVkagcVHv9nE0VPlHPSCmXIUGKfJ42LNjxCCTDTL5sgnJ8Z7GZBq0EnLYGln77tPpEpExt2+qa+cZqSw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.0.0",
+        "@babel/traverse": "^7.4.5",
+        "@emotion/is-prop-valid": "^1.1.0",
+        "@emotion/stylis": "^0.8.4",
+        "@emotion/unitless": "^0.7.4",
+        "babel-plugin-styled-components": ">= 1.12.0",
+        "css-to-react-native": "^3.0.0",
+        "hoist-non-react-statics": "^3.0.0",
         "shallowequal": "^1.1.0",
-        "stylis": "^4.3.0",
-        "tslib": "^2.5.0"
+        "supports-color": "^5.5.0"
       },
       "engines": {
-        "node": ">= 16"
+        "node": ">=10"
       },
       "funding": {
         "type": "opencollective",
@@ -39183,7 +39184,8 @@
       },
       "peerDependencies": {
         "react": ">= 16.8.0",
-        "react-dom": ">= 16.8.0"
+        "react-dom": ">= 16.8.0",
+        "react-is": ">= 16.8.0"
       }
     },
     "node_modules/styled-system": {
@@ -39222,12 +39224,6 @@
         "postcss": "^8.2.15"
       }
     },
-    "node_modules/stylis": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.0.tgz",
-      "integrity": "sha512-E87pIogpwUsUwXw7dNyU4QDjdgVMy52m+XEOPEKUn161cCzWjjhPSQhByfd1CcNvrOLnXQ6OnnZDwnJrz/Z4YQ==",
-      "dev": true
-    },
     "node_modules/stylus": {
       "version": "0.59.0",
       "resolved": "https://registry.npmjs.org/stylus/-/stylus-0.59.0.tgz",
diff --git a/package.json b/package.json
index c104d912c5c..886cabf081a 100644
--- a/package.json
+++ b/package.json
@@ -178,7 +178,7 @@
     "@types/node": "18.16.19",
     "@types/react": "18.2.21",
     "@types/react-dom": "18.2.6",
-    "@types/styled-components": "5.1.30",
+    "@types/styled-components": "^5.1.26",
     "@types/semver": "7.5.3",
     "@typescript-eslint/eslint-plugin": "5.59.6",
     "@typescript-eslint/parser": "5.62.0",
@@ -253,7 +253,7 @@
     "size-limit": "8.2.4",
     "storybook": "7.1.0",
     "storybook-addon-turbo-build": "2.0.1",
-    "styled-components": "6.1.0",
+    "styled-components": "5.3.11",
     "terser": "5.17.6",
     "ts-node": "10.9.1",
     "ts-toolbelt": "9.6.0",
@@ -268,10 +268,10 @@
   "peerDependencies": {
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
-    "@types/styled-components": "5.1.30",
+    "@types/styled-components": "^5.1.11",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "styled-components": "6.x"
+    "styled-components": "5.x"
   },
   "peerDependenciesMeta": {
     "@types/react": {
diff --git a/src/Blankslate/Blankslate.tsx b/src/Blankslate/Blankslate.tsx
index a2c110fa41c..eea926f91f3 100644
--- a/src/Blankslate/Blankslate.tsx
+++ b/src/Blankslate/Blankslate.tsx
@@ -75,58 +75,67 @@ const StyledBlankslate = styled.div`
   .Blankslate-Action:last-of-type {
     margin-bottom: var(--stack-gap-condensed);
   }
+`
 
+const BlankslateContainerQuery = `
   /* At the time these styles were written,
-   34rem was our "small" breakpoint width */
+  34rem was our "small" breakpoint width */
   @container (max-width: 34rem) {
-    .Blankslate {
-      --blankslate-outer-padding-block: var(--base-size-20);
-      --blankslate-outer-padding-inline: var(--base-size-20);
-    }
+    ${StyledBlankslate} .Blankslate {
+    --blankslate-outer-padding-block: var(--base-size-20);
+    --blankslate-outer-padding-inline: var(--base-size-20);
+  }
 
-    .Blankslate[data-spacious='true'] {
-      --blankslate-outer-padding-block: var(--base-size-44);
-      --blankslate-outer-padding-inline: var(--base-size-28);
-    }
+  ${StyledBlankslate} .Blankslate[data-spacious='true'] {
+    --blankslate-outer-padding-block: var(--base-size-44);
+    --blankslate-outer-padding-inline: var(--base-size-28);
+  }
 
-    .Blankslate-Visual {
-      margin-bottom: var(--stack-gap-condensed);
-      max-width: var(--base-size-24);
-    }
+  ${StyledBlankslate} .Blankslate-Visual {
+    margin-bottom: var(--stack-gap-condensed);
+    max-width: var(--base-size-24);
+  }
 
-    .Blankslate-Visual svg {
-      width: 100%;
-    }
+  ${StyledBlankslate} .Blankslate-Visual svg {
+    width: 100%;
+  }
 
-    .Blankslate-Heading {
-      font-size: var(--text-title-size-small);
-    }
+  ${StyledBlankslate} .Blankslate-Heading {
+    font-size: var(--text-title-size-small);
+  }
 
-    .Blankslate-Description {
-      font-size: var(--text-body-size-medium);
-    }
+  ${StyledBlankslate} .Blankslate-Description {
+    font-size: var(--text-body-size-medium);
+  }
 
-    .Blankslate-Action {
-      margin-top: var(--stack-gap-condensed);
-    }
+  ${StyledBlankslate} .Blankslate-Action {
+    margin-top: var(--stack-gap-condensed);
+  }
 
-    .Blankslate-Action:first-of-type {
-      margin-top: var(--stack-gap-normal);
-    }
+  ${StyledBlankslate} .Blankslate-Action:first-of-type {
+    margin-top: var(--stack-gap-normal);
+  }
 
-    .Blankslate-Action:last-of-type {
-      margin-bottom: calc(var(--stack-gap-condensed) / 2);
-    }
+  ${StyledBlankslate} .Blankslate-Action:last-of-type {
+    margin-bottom: calc(var(--stack-gap-condensed) / 2);
+  }
   }
 `
 
 function Blankslate({border, children, narrow, spacious}: BlankslateProps) {
   return (
-    <StyledBlankslate>
-      <div className="Blankslate" data-border={border} data-narrow={narrow} data-spacious={spacious}>
-        {children}
-      </div>
-    </StyledBlankslate>
+    <>
+      {/*
+        This is a workaround so we can use `@container` without upgrading `styled-components` to 6.x
+        See [this comment](https://github.com/primer/react/pull/3869#discussion_r1392523030) for more info
+      */}
+      <style type="text/css">{BlankslateContainerQuery}</style>
+      <StyledBlankslate>
+        <div className="Blankslate" data-border={border} data-narrow={narrow} data-spacious={spacious}>
+          {children}
+        </div>
+      </StyledBlankslate>
+    </>
   )
 }
 

From e1f34cbe4a34d4382bccf49d91417a633deb5d49 Mon Sep 17 00:00:00 2001
From: Mike Perrotti <mperrotti@github.com>
Date: Tue, 28 Nov 2023 09:52:13 -0500
Subject: [PATCH 12/12] Update src/Blankslate/Blankslate.tsx

Co-authored-by: Siddharth Kshetrapal <siddharthkp@github.com>
---
 src/Blankslate/Blankslate.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/Blankslate/Blankslate.tsx b/src/Blankslate/Blankslate.tsx
index eea926f91f3..abfad264cdf 100644
--- a/src/Blankslate/Blankslate.tsx
+++ b/src/Blankslate/Blankslate.tsx
@@ -119,7 +119,6 @@ const BlankslateContainerQuery = `
   ${StyledBlankslate} .Blankslate-Action:last-of-type {
     margin-bottom: calc(var(--stack-gap-condensed) / 2);
   }
-  }
 `
 
 function Blankslate({border, children, narrow, spacious}: BlankslateProps) {