diff --git a/.changeset/lovely-lies-hide.md b/.changeset/lovely-lies-hide.md
new file mode 100644
index 000000000..2bcb428a0
--- /dev/null
+++ b/.changeset/lovely-lies-hide.md
@@ -0,0 +1,5 @@
+---
+'@vanilla-extract/integration': patch
+---
+
+Use correct async Babel transform method in integration transform
diff --git a/packages/integration/src/transform.ts b/packages/integration/src/transform.ts
index ac5fa2280..88fe1e814 100644
--- a/packages/integration/src/transform.ts
+++ b/packages/integration/src/transform.ts
@@ -55,7 +55,7 @@ export const transform = async ({
   let code = source;
 
   if (identOption === 'debug') {
-    const result = await babel.transform(source, {
+    const result = await babel.transformAsync(source, {
       filename: filePath,
       cwd: rootPath,
       plugins: [vanillaBabelPlugin, typescriptSyntax],
diff --git a/site/docs/packages/sprinkles.md b/site/docs/packages/sprinkles.md
index 6a7a8685f..b28891293 100644
--- a/site/docs/packages/sprinkles.md
+++ b/site/docs/packages/sprinkles.md
@@ -643,7 +643,7 @@ This function should be created and exported from your `sprinkles.css.ts` file u
 > 💡 You can name the generated function whatever you like, typically based on the name of your conditions.
 
 ```ts
-// app.ts
+// sprinkles.css.ts
 import {
   defineProperties,
   createSprinkles,
@@ -671,13 +671,13 @@ normalizeResponsiveValue('block');
 // -> { mobile: 'block' }
 
 normalizeResponsiveValue(['none', null, 'block']);
-// -> { mobile: 'block', desktop: 'block' }
+// -> { mobile: 'none', desktop: 'block' }
 
 normalizeResponsiveValue({
   mobile: 'none',
   desktop: 'block'
 });
-// -> { mobile: 'block', desktop: 'block' }
+// -> { mobile: 'none', desktop: 'block' }
 ```
 
 ## ConditionalValue