From 0c786a21c71117d11c73bc24a791b6109134f278 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Fri, 3 May 2024 13:37:51 -0500
Subject: [PATCH 1/5] Version Packages (#2544)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/chilled-masks-explain.md       |   44 -
 .changeset/flat-crews-mix.md              |    6 -
 .changeset/fluffy-dingos-appear.md        |    5 -
 .changeset/fresh-eggs-kneel.md            |    7 -
 .changeset/new-brooms-impress.md          |    9 -
 .changeset/stale-phones-tease.md          |   22 -
 packages/astro-plugin-studio/CHANGELOG.md |   12 +-
 packages/astro-plugin-studio/package.json |    2 +-
 packages/cli/CHANGELOG.md                 |  189 +-
 packages/cli/package.json                 |    2 +-
 packages/config/CHANGELOG.md              |  304 ++-
 packages/config/package.json              |    2 +-
 packages/core/CHANGELOG.md                | 1798 +++++++-------
 packages/core/package.json                |    2 +-
 packages/extractor/CHANGELOG.md           |  112 +-
 packages/extractor/package.json           |    2 +-
 packages/generator/CHANGELOG.md           | 2732 +++++++++++----------
 packages/generator/package.json           |    2 +-
 packages/is-valid-prop/CHANGELOG.md       |   10 +-
 packages/is-valid-prop/package.json       |    2 +-
 packages/logger/CHANGELOG.md              |   14 +-
 packages/logger/package.json              |    2 +-
 packages/node/CHANGELOG.md                |  156 +-
 packages/node/package.json                |    2 +-
 packages/parser/CHANGELOG.md              |  467 ++--
 packages/parser/package.json              |    2 +-
 packages/postcss/CHANGELOG.md             |   22 +-
 packages/postcss/package.json             |    2 +-
 packages/preset-atlaskit/CHANGELOG.md     |    8 +
 packages/preset-atlaskit/package.json     |    2 +-
 packages/preset-base/CHANGELOG.md         |  188 +-
 packages/preset-base/package.json         |    2 +-
 packages/preset-open-props/CHANGELOG.md   |    8 +
 packages/preset-open-props/package.json   |    2 +-
 packages/preset-panda/CHANGELOG.md        |   14 +-
 packages/preset-panda/package.json        |    2 +-
 packages/shared/CHANGELOG.md              |  212 +-
 packages/shared/package.json              |    2 +-
 packages/studio/CHANGELOG.md              |  175 +-
 packages/studio/package.json              |    2 +-
 packages/token-dictionary/CHANGELOG.md    |  509 ++--
 packages/token-dictionary/package.json    |    2 +-
 packages/types/CHANGELOG.md               |  773 +++---
 packages/types/package.json               |    2 +-
 44 files changed, 4316 insertions(+), 3518 deletions(-)
 delete mode 100644 .changeset/chilled-masks-explain.md
 delete mode 100644 .changeset/flat-crews-mix.md
 delete mode 100644 .changeset/fluffy-dingos-appear.md
 delete mode 100644 .changeset/fresh-eggs-kneel.md
 delete mode 100644 .changeset/new-brooms-impress.md
 delete mode 100644 .changeset/stale-phones-tease.md

diff --git a/.changeset/chilled-masks-explain.md b/.changeset/chilled-masks-explain.md
deleted file mode 100644
index cac3d8277..000000000
--- a/.changeset/chilled-masks-explain.md
+++ /dev/null
@@ -1,44 +0,0 @@
----
-'@pandacss/preset-base': minor
-'@pandacss/generator': minor
-'@pandacss/parser': minor
----
-
-**BREAKING 💥**
-
-Remove `linkBox` pattern in favor of using adding `position: relative` when using the `linkOverlay` pattern.
-
-**Before**
-
-```jsx
-import { linkBox, linkOverlay } from 'styled-system/patterns'
-
-const App = () => {
-  return (
-    <div className={linkBox()}>
-      <img src="https://via.placeholder.com/150" alt="placeholder" />
-      <a href="#" className={linkOverlay()}>
-        Link
-      </a>
-    </div>
-  )
-}
-```
-
-**After**
-
-```jsx
-import { css } from 'styled-system/css'
-import { linkOverlay } from 'styled-system/patterns'
-
-const App = () => {
-  return (
-    <div className={css({ pos: 'relative' })}>
-      <img src="https://via.placeholder.com/150" alt="placeholder" />
-      <a href="#" className={linkOverlay()}>
-        Link
-      </a>
-    </div>
-  )
-}
-```
diff --git a/.changeset/flat-crews-mix.md b/.changeset/flat-crews-mix.md
deleted file mode 100644
index bdfbc7111..000000000
--- a/.changeset/flat-crews-mix.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-"@pandacss/generator": minor
-"@pandacss/types": minor
----
-
-Add support for more typography related properties in text styles such as `fontFeatureSettings`, `fontPalette`, etc.
diff --git a/.changeset/fluffy-dingos-appear.md b/.changeset/fluffy-dingos-appear.md
deleted file mode 100644
index f5512795f..000000000
--- a/.changeset/fluffy-dingos-appear.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@pandacss/generator": patch
----
-
-Fix issue where `mergeCss` import in `styled-system/jsx/*` could be unused.
diff --git a/.changeset/fresh-eggs-kneel.md b/.changeset/fresh-eggs-kneel.md
deleted file mode 100644
index 037876528..000000000
--- a/.changeset/fresh-eggs-kneel.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-"@pandacss/generator": patch
-"@pandacss/preset-base": patch
-"@pandacss/studio": patch
----
-
-Fix issue where `float` property did not allow inherited values (auto, initial, none, etc.)
diff --git a/.changeset/new-brooms-impress.md b/.changeset/new-brooms-impress.md
deleted file mode 100644
index a2eff5fe2..000000000
--- a/.changeset/new-brooms-impress.md
+++ /dev/null
@@ -1,9 +0,0 @@
----
-'@pandacss/preset-base': patch
-'@pandacss/generator': patch
-'@pandacss/types': patch
-'@pandacss/core': patch
----
-
-Fix issue where `animationName` property was not connected to `theme.keyframes`, as a result, no autocompletion was
-available.
diff --git a/.changeset/stale-phones-tease.md b/.changeset/stale-phones-tease.md
deleted file mode 100644
index 9230eafe1..000000000
--- a/.changeset/stale-phones-tease.md
+++ /dev/null
@@ -1,22 +0,0 @@
----
-'@pandacss/generator': patch
-'@pandacss/shared': patch
----
-
-Allow passing arrays of `SystemStyleObject` to the `css(xxx, [aaa, bbb, ccc], yyy)` fn
-
-This is useful when you are creating your own styled component and want to benefit
-[from the recent `css` array property support](https://github.com/chakra-ui/panda/pull/2515).
-
-```diff
-import { css } from 'styled-system/css'
-import type { HTMLStyledProps } from 'styled-system/types'
-
-type ButtonProps = HTMLStyledProps<'button'>
-
-export const Button = ({ css: cssProp = {}, children }: ButtonProps) => {
--  const className = css(...(Array.isArray(cssProp) ? cssProp : [cssProp]))
-+  const className = css(cssProp)
-  return <button className={className}>{children}</button>
-}
-```
diff --git a/packages/astro-plugin-studio/CHANGELOG.md b/packages/astro-plugin-studio/CHANGELOG.md
index 72e005565..664ff36af 100644
--- a/packages/astro-plugin-studio/CHANGELOG.md
+++ b/packages/astro-plugin-studio/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @pandacss/astro-plugin-studio
 
+## 0.39.0
+
+### Patch Changes
+
+- @pandacss/node@0.39.0
+
 ## 0.38.0
 
 ### Patch Changes
@@ -128,11 +134,11 @@
   ```js
   module.exports = {
     plugins: {
-      '@pandacss/dev/postcss': {
-        logfile: './logs/panda.log',
+      "@pandacss/dev/postcss": {
+        logfile: "./logs/panda.log",
       },
     },
-  }
+  };
   ```
 
 - Updated dependencies [05686b9d]
diff --git a/packages/astro-plugin-studio/package.json b/packages/astro-plugin-studio/package.json
index 7bfa79c0d..58fa14f69 100644
--- a/packages/astro-plugin-studio/package.json
+++ b/packages/astro-plugin-studio/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/astro-plugin-studio",
-  "version": "0.38.0",
+  "version": "0.39.0",
   "description": "Vite plugin for Pandacss Studio",
   "author": "Segun Adebayo <joseshegs@gmail.com>",
   "main": "dist/index.js",
diff --git a/packages/cli/CHANGELOG.md b/packages/cli/CHANGELOG.md
index 336b96f5a..1bf927851 100644
--- a/packages/cli/CHANGELOG.md
+++ b/packages/cli/CHANGELOG.md
@@ -1,5 +1,21 @@
 # @pandacss/dev
 
+## 0.39.0
+
+### Patch Changes
+
+- Updated dependencies [221c9a2]
+- Updated dependencies [c3e797e]
+- Updated dependencies [935ec86]
+  - @pandacss/types@0.39.0
+  - @pandacss/shared@0.39.0
+  - @pandacss/config@0.39.0
+  - @pandacss/node@0.39.0
+  - @pandacss/logger@0.39.0
+  - @pandacss/preset-panda@0.39.0
+  - @pandacss/token-dictionary@0.39.0
+  - @pandacss/postcss@0.39.0
+
 ## 0.38.0
 
 ### Patch Changes
@@ -94,7 +110,7 @@
 
   ```ts
   // panda.config.ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
@@ -103,15 +119,15 @@
       extend: {
         tokens: {
           colors: {
-            text: { value: 'blue' },
+            text: { value: "blue" },
           },
         },
         semanticTokens: {
           colors: {
             body: {
               value: {
-                base: '{colors.blue.600}',
-                _osDark: '{colors.blue.400}',
+                base: "{colors.blue.600}",
+                _osDark: "{colors.blue.400}",
               },
             },
           },
@@ -123,16 +139,16 @@
       primary: {
         tokens: {
           colors: {
-            text: { value: 'red' },
+            text: { value: "red" },
           },
         },
         semanticTokens: {
           colors: {
-            muted: { value: '{colors.red.200}' },
+            muted: { value: "{colors.red.200}" },
             body: {
               value: {
-                base: '{colors.red.600}',
-                _osDark: '{colors.red.400}',
+                base: "{colors.red.600}",
+                _osDark: "{colors.red.400}",
               },
             },
           },
@@ -141,23 +157,23 @@
       secondary: {
         tokens: {
           colors: {
-            text: { value: 'blue' },
+            text: { value: "blue" },
           },
         },
         semanticTokens: {
           colors: {
-            muted: { value: '{colors.blue.200}' },
+            muted: { value: "{colors.blue.200}" },
             body: {
               value: {
-                base: '{colors.blue.600}',
-                _osDark: '{colors.blue.400}',
+                base: "{colors.blue.600}",
+                _osDark: "{colors.blue.400}",
               },
             },
           },
         },
       },
     },
-  })
+  });
   ```
 
   ### Pregenerating themes
@@ -167,14 +183,14 @@
 
   ```ts
   // panda.config.ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
     staticCss: {
-      themes: ['primary', 'secondary'],
+      themes: ["primary", "secondary"],
     },
-  })
+  });
   ```
 
   This will generate the following CSS:
@@ -186,7 +202,7 @@
       --colors-body: var(--colors-blue-600);
     }
 
-    [data-panda-theme='primary'] {
+    [data-panda-theme="primary"] {
       --colors-text: red;
       --colors-muted: var(--colors-red-200);
       --colors-body: var(--colors-red-600);
@@ -197,7 +213,7 @@
         --colors-body: var(--colors-blue-400);
       }
 
-      [data-panda-theme='primary'] {
+      [data-panda-theme="primary"] {
         --colors-body: var(--colors-red-400);
       }
     }
@@ -228,9 +244,9 @@
   Dynamically import a theme using its name:
 
   ```ts
-  import { getTheme } from '../styled-system/themes'
+  import { getTheme } from "../styled-system/themes";
 
-  const theme = await getTheme('red')
+  const theme = await getTheme("red");
   //    ^? {
   //     name: "red";
   //     id: string;
@@ -241,10 +257,10 @@
   Inject the theme styles into the DOM:
 
   ```ts
-  import { injectTheme } from '../styled-system/themes'
+  import { injectTheme } from "../styled-system/themes";
 
-  const theme = await getTheme('red')
-  injectTheme(document.documentElement, theme) // this returns the injected style element
+  const theme = await getTheme("red");
+  injectTheme(document.documentElement, theme); // this returns the injected style element
   ```
 
   ***
@@ -253,54 +269,62 @@
 
   ```tsx
   // app/layout.tsx
-  import { Inter } from 'next/font/google'
-  import { cookies } from 'next/headers'
-  import { ThemeName, getTheme } from '../../styled-system/themes'
-
-  export default async function RootLayout({ children }: { children: React.ReactNode }) {
-    const store = cookies()
-    const themeName = store.get('theme')?.value as ThemeName
-    const theme = themeName && (await getTheme(themeName))
+  import { Inter } from "next/font/google";
+  import { cookies } from "next/headers";
+  import { ThemeName, getTheme } from "../../styled-system/themes";
+
+  export default async function RootLayout({
+    children,
+  }: {
+    children: React.ReactNode;
+  }) {
+    const store = cookies();
+    const themeName = store.get("theme")?.value as ThemeName;
+    const theme = themeName && (await getTheme(themeName));
 
     return (
       <html lang="en" data-panda-theme={themeName ? themeName : undefined}>
         {themeName && (
           <head>
-            <style type="text/css" id={theme.id} dangerouslySetInnerHTML={{ __html: theme.css }} />
+            <style
+              type="text/css"
+              id={theme.id}
+              dangerouslySetInnerHTML={{ __html: theme.css }}
+            />
           </head>
         )}
         <body>{children}</body>
       </html>
-    )
+    );
   }
 
   // app/page.tsx
-  import { getTheme, injectTheme } from '../../styled-system/themes'
+  import { getTheme, injectTheme } from "../../styled-system/themes";
 
   export default function Home() {
     return (
       <>
         <button
           onClick={async () => {
-            const current = document.documentElement.dataset.pandaTheme
-            const next = current === 'primary' ? 'secondary' : 'primary'
-            const theme = await getTheme(next)
-            setCookie('theme', next, 7)
-            injectTheme(document.documentElement, theme)
+            const current = document.documentElement.dataset.pandaTheme;
+            const next = current === "primary" ? "secondary" : "primary";
+            const theme = await getTheme(next);
+            setCookie("theme", next, 7);
+            injectTheme(document.documentElement, theme);
           }}
         >
           swap theme
         </button>
       </>
-    )
+    );
   }
 
   // Set a Cookie
   function setCookie(cName: string, cValue: any, expDays: number) {
-    let date = new Date()
-    date.setTime(date.getTime() + expDays * 24 * 60 * 60 * 1000)
-    const expires = 'expires=' + date.toUTCString()
-    document.cookie = cName + '=' + cValue + '; ' + expires + '; path=/'
+    let date = new Date();
+    date.setTime(date.getTime() + expDays * 24 * 60 * 60 * 1000);
+    const expires = "expires=" + date.toUTCString();
+    document.cookie = cName + "=" + cValue + "; " + expires + "; path=/";
   }
   ```
 
@@ -309,18 +333,18 @@
   Finally, you can create a theme contract to ensure that all themes have the same structure:
 
   ```ts
-  import { defineThemeContract } from '@pandacss/dev'
+  import { defineThemeContract } from "@pandacss/dev";
 
   const defineTheme = defineThemeContract({
     tokens: {
       colors: {
-        red: { value: '' }, // theme implementations must have a red color
+        red: { value: "" }, // theme implementations must have a red color
       },
     },
-  })
+  });
 
   defineTheme({
-    selector: '.theme-secondary',
+    selector: ".theme-secondary",
     tokens: {
       colors: {
         // ^^^^   Property 'red' is missing in type '{}' but required in type '{ red: { value: string; }; }'
@@ -329,7 +353,7 @@
         // red: { value: 'red' },
       },
     },
-  })
+  });
   ```
 
 ### Patch Changes
@@ -555,11 +579,11 @@
   ```js
   module.exports = {
     plugins: {
-      '@pandacss/dev/postcss': {
-        logfile: './logs/panda.log',
+      "@pandacss/dev/postcss": {
+        logfile: "./logs/panda.log",
       },
     },
-  }
+  };
   ```
 
 - Updated dependencies [0dd45b6a]
@@ -606,8 +630,8 @@
   ```ts
   export default defineConfig({
     // ...
-    dependencies: ['path/to/files/**.ts'],
-  })
+    dependencies: ["path/to/files/**.ts"],
+  });
   ```
 
   - Invoke `config:change` hook in more situations (when the `--watch` flag is passed to `panda codegen`,
@@ -656,39 +680,54 @@
      * Called when the config is resolved, after all the presets are loaded and merged.
      * This is the first hook called, you can use it to tweak the config before the context is created.
      */
-    'config:resolved': (args: { conf: LoadConfigResult }) => MaybeAsyncReturn
+    "config:resolved": (args: { conf: LoadConfigResult }) => MaybeAsyncReturn;
     /**
      * Called when the Panda context has been created and the API is ready to be used.
      */
-    'context:created': (args: { ctx: ApiInterface; logger: LoggerInterface }) => void
+    "context:created": (args: {
+      ctx: ApiInterface;
+      logger: LoggerInterface;
+    }) => void;
     /**
      * Called when the config file or one of its dependencies (imports) has changed.
      */
-    'config:change': (args: { config: UserConfig }) => MaybeAsyncReturn
+    "config:change": (args: { config: UserConfig }) => MaybeAsyncReturn;
     /**
      * Called after reading the file content but before parsing it.
      * You can use this hook to transform the file content to a tsx-friendly syntax so that Panda's parser can parse it.
      * You can also use this hook to parse the file's content on your side using a custom parser, in this case you don't have to return anything.
      */
-    'parser:before': (args: { filePath: string; content: string }) => string | void
+    "parser:before": (args: {
+      filePath: string;
+      content: string;
+    }) => string | void;
     /**
      * Called after the file styles are extracted and processed into the resulting ParserResult object.
      * You can also use this hook to add your own extraction results from your custom parser to the ParserResult object.
      */
-    'parser:after': (args: { filePath: string; result: ParserResultInterface | undefined }) => void
+    "parser:after": (args: {
+      filePath: string;
+      result: ParserResultInterface | undefined;
+    }) => void;
     /**
      * Called after the codegen is completed
      */
-    'codegen:done': () => MaybeAsyncReturn
+    "codegen:done": () => MaybeAsyncReturn;
     /**
      * Called right before adding the design-system CSS (global, static, preflight, tokens, keyframes) to the final CSS
      * Called right before writing/injecting the final CSS (styles.css) that contains the design-system CSS and the parser CSS
      * You can use it to tweak the CSS content before it's written to disk or injected through the postcss plugin.
      */
-    'cssgen:done': (args: {
-      artifact: 'global' | 'static' | 'reset' | 'tokens' | 'keyframes' | 'styles.css'
-      content: string
-    }) => string | void
+    "cssgen:done": (args: {
+      artifact:
+        | "global"
+        | "static"
+        | "reset"
+        | "tokens"
+        | "keyframes"
+        | "styles.css";
+      content: string;
+    }) => string | void;
   }
   ```
 
@@ -1586,12 +1625,12 @@
   **Definition**
 
   ```jsx
-  import { sva } from 'styled-system/css'
+  import { sva } from "styled-system/css";
 
   const button = sva({
-    slots: ['label', 'icon'],
+    slots: ["label", "icon"],
     base: {
-      label: { color: 'red', textDecoration: 'underline' },
+      label: { color: "red", textDecoration: "underline" },
     },
     variants: {
       rounded: {
@@ -1599,33 +1638,33 @@
       },
       size: {
         sm: {
-          label: { fontSize: 'sm' },
-          icon: { fontSize: 'sm' },
+          label: { fontSize: "sm" },
+          icon: { fontSize: "sm" },
         },
         lg: {
-          label: { fontSize: 'lg' },
-          icon: { fontSize: 'lg', color: 'pink' },
+          label: { fontSize: "lg" },
+          icon: { fontSize: "lg", color: "pink" },
         },
       },
     },
     defaultVariants: {
-      size: 'sm',
+      size: "sm",
     },
-  })
+  });
   ```
 
   **Usage**
 
   ```jsx
   export function App() {
-    const btnClass = button({ size: 'lg', rounded: true })
+    const btnClass = button({ size: "lg", rounded: true });
 
     return (
       <button>
         <p class={btnClass.label}> Label</p>
         <p class={btnClass.icon}> Icon</p>
       </button>
-    )
+    );
   }
   ```
 
diff --git a/packages/cli/package.json b/packages/cli/package.json
index 477bc9080..f8d52aa6d 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/dev",
-  "version": "0.38.0",
+  "version": "0.39.0",
   "description": "The user facing package for panda css",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
diff --git a/packages/config/CHANGELOG.md b/packages/config/CHANGELOG.md
index 215a4fc10..76479a5d7 100644
--- a/packages/config/CHANGELOG.md
+++ b/packages/config/CHANGELOG.md
@@ -1,5 +1,20 @@
 # @pandacss/config
 
+## 0.39.0
+
+### Patch Changes
+
+- Updated dependencies [df2546a]
+- Updated dependencies [221c9a2]
+- Updated dependencies [2116abe]
+- Updated dependencies [c3e797e]
+- Updated dependencies [935ec86]
+  - @pandacss/preset-base@0.39.0
+  - @pandacss/types@0.39.0
+  - @pandacss/shared@0.39.0
+  - @pandacss/logger@0.39.0
+  - @pandacss/preset-panda@0.39.0
+
 ## 0.38.0
 
 ### Patch Changes
@@ -76,7 +91,7 @@
 
   ```ts
   // panda.config.ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
@@ -85,15 +100,15 @@
       extend: {
         tokens: {
           colors: {
-            text: { value: 'blue' },
+            text: { value: "blue" },
           },
         },
         semanticTokens: {
           colors: {
             body: {
               value: {
-                base: '{colors.blue.600}',
-                _osDark: '{colors.blue.400}',
+                base: "{colors.blue.600}",
+                _osDark: "{colors.blue.400}",
               },
             },
           },
@@ -105,16 +120,16 @@
       primary: {
         tokens: {
           colors: {
-            text: { value: 'red' },
+            text: { value: "red" },
           },
         },
         semanticTokens: {
           colors: {
-            muted: { value: '{colors.red.200}' },
+            muted: { value: "{colors.red.200}" },
             body: {
               value: {
-                base: '{colors.red.600}',
-                _osDark: '{colors.red.400}',
+                base: "{colors.red.600}",
+                _osDark: "{colors.red.400}",
               },
             },
           },
@@ -123,23 +138,23 @@
       secondary: {
         tokens: {
           colors: {
-            text: { value: 'blue' },
+            text: { value: "blue" },
           },
         },
         semanticTokens: {
           colors: {
-            muted: { value: '{colors.blue.200}' },
+            muted: { value: "{colors.blue.200}" },
             body: {
               value: {
-                base: '{colors.blue.600}',
-                _osDark: '{colors.blue.400}',
+                base: "{colors.blue.600}",
+                _osDark: "{colors.blue.400}",
               },
             },
           },
         },
       },
     },
-  })
+  });
   ```
 
   ### Pregenerating themes
@@ -149,14 +164,14 @@
 
   ```ts
   // panda.config.ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
     staticCss: {
-      themes: ['primary', 'secondary'],
+      themes: ["primary", "secondary"],
     },
-  })
+  });
   ```
 
   This will generate the following CSS:
@@ -168,7 +183,7 @@
       --colors-body: var(--colors-blue-600);
     }
 
-    [data-panda-theme='primary'] {
+    [data-panda-theme="primary"] {
       --colors-text: red;
       --colors-muted: var(--colors-red-200);
       --colors-body: var(--colors-red-600);
@@ -179,7 +194,7 @@
         --colors-body: var(--colors-blue-400);
       }
 
-      [data-panda-theme='primary'] {
+      [data-panda-theme="primary"] {
         --colors-body: var(--colors-red-400);
       }
     }
@@ -210,9 +225,9 @@
   Dynamically import a theme using its name:
 
   ```ts
-  import { getTheme } from '../styled-system/themes'
+  import { getTheme } from "../styled-system/themes";
 
-  const theme = await getTheme('red')
+  const theme = await getTheme("red");
   //    ^? {
   //     name: "red";
   //     id: string;
@@ -223,10 +238,10 @@
   Inject the theme styles into the DOM:
 
   ```ts
-  import { injectTheme } from '../styled-system/themes'
+  import { injectTheme } from "../styled-system/themes";
 
-  const theme = await getTheme('red')
-  injectTheme(document.documentElement, theme) // this returns the injected style element
+  const theme = await getTheme("red");
+  injectTheme(document.documentElement, theme); // this returns the injected style element
   ```
 
   ***
@@ -235,54 +250,62 @@
 
   ```tsx
   // app/layout.tsx
-  import { Inter } from 'next/font/google'
-  import { cookies } from 'next/headers'
-  import { ThemeName, getTheme } from '../../styled-system/themes'
-
-  export default async function RootLayout({ children }: { children: React.ReactNode }) {
-    const store = cookies()
-    const themeName = store.get('theme')?.value as ThemeName
-    const theme = themeName && (await getTheme(themeName))
+  import { Inter } from "next/font/google";
+  import { cookies } from "next/headers";
+  import { ThemeName, getTheme } from "../../styled-system/themes";
+
+  export default async function RootLayout({
+    children,
+  }: {
+    children: React.ReactNode;
+  }) {
+    const store = cookies();
+    const themeName = store.get("theme")?.value as ThemeName;
+    const theme = themeName && (await getTheme(themeName));
 
     return (
       <html lang="en" data-panda-theme={themeName ? themeName : undefined}>
         {themeName && (
           <head>
-            <style type="text/css" id={theme.id} dangerouslySetInnerHTML={{ __html: theme.css }} />
+            <style
+              type="text/css"
+              id={theme.id}
+              dangerouslySetInnerHTML={{ __html: theme.css }}
+            />
           </head>
         )}
         <body>{children}</body>
       </html>
-    )
+    );
   }
 
   // app/page.tsx
-  import { getTheme, injectTheme } from '../../styled-system/themes'
+  import { getTheme, injectTheme } from "../../styled-system/themes";
 
   export default function Home() {
     return (
       <>
         <button
           onClick={async () => {
-            const current = document.documentElement.dataset.pandaTheme
-            const next = current === 'primary' ? 'secondary' : 'primary'
-            const theme = await getTheme(next)
-            setCookie('theme', next, 7)
-            injectTheme(document.documentElement, theme)
+            const current = document.documentElement.dataset.pandaTheme;
+            const next = current === "primary" ? "secondary" : "primary";
+            const theme = await getTheme(next);
+            setCookie("theme", next, 7);
+            injectTheme(document.documentElement, theme);
           }}
         >
           swap theme
         </button>
       </>
-    )
+    );
   }
 
   // Set a Cookie
   function setCookie(cName: string, cValue: any, expDays: number) {
-    let date = new Date()
-    date.setTime(date.getTime() + expDays * 24 * 60 * 60 * 1000)
-    const expires = 'expires=' + date.toUTCString()
-    document.cookie = cName + '=' + cValue + '; ' + expires + '; path=/'
+    let date = new Date();
+    date.setTime(date.getTime() + expDays * 24 * 60 * 60 * 1000);
+    const expires = "expires=" + date.toUTCString();
+    document.cookie = cName + "=" + cValue + "; " + expires + "; path=/";
   }
   ```
 
@@ -291,18 +314,18 @@
   Finally, you can create a theme contract to ensure that all themes have the same structure:
 
   ```ts
-  import { defineThemeContract } from '@pandacss/dev'
+  import { defineThemeContract } from "@pandacss/dev";
 
   const defineTheme = defineThemeContract({
     tokens: {
       colors: {
-        red: { value: '' }, // theme implementations must have a red color
+        red: { value: "" }, // theme implementations must have a red color
       },
     },
-  })
+  });
 
   defineTheme({
-    selector: '.theme-secondary',
+    selector: ".theme-secondary",
     tokens: {
       colors: {
         // ^^^^   Property 'red' is missing in type '{}' but required in type '{ red: { value: string; }; }'
@@ -311,7 +334,7 @@
         // red: { value: 'red' },
       },
     },
-  })
+  });
   ```
 
 ### Patch Changes
@@ -320,7 +343,7 @@
   config)
 
   ```ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   const userConfig = defineConfig({
     presets: [
@@ -329,7 +352,7 @@
           extend: {
             tokens: {
               colors: {
-                black: { value: 'black' },
+                black: { value: "black" },
               },
             },
           },
@@ -341,16 +364,16 @@
         extend: {
           colors: {
             black: {
-              0: { value: 'black' },
-              10: { value: 'black/10' },
-              20: { value: 'black/20' },
-              30: { value: 'black/30' },
+              0: { value: "black" },
+              10: { value: "black/10" },
+              20: { value: "black/20" },
+              30: { value: "black/30" },
             },
           },
         },
       },
     },
-  })
+  });
   ```
 
   When merged with the preset, the config would create nested tokens (`black.10`, `black.20`, `black.30`) inside of the
@@ -397,34 +420,34 @@
   Example:
 
   ```ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
     globalVars: {
-      '--some-color': 'red',
-      '--button-color': {
-        syntax: '<color>',
+      "--some-color": "red",
+      "--button-color": {
+        syntax: "<color>",
         inherits: false,
-        initialValue: 'blue',
+        initialValue: "blue",
       },
     },
-  })
+  });
   ```
 
   > Note: Keys defined in `globalVars` will be available as a value for _every_ utilities, as they're not bound to token
   > categories.
 
   ```ts
-  import { css } from '../styled-system/css'
+  import { css } from "../styled-system/css";
 
   const className = css({
-    '--button-color': 'colors.red.300',
+    "--button-color": "colors.red.300",
     // ^^^^^^^^^^^^  will be suggested
 
-    backgroundColor: 'var(--button-color)',
+    backgroundColor: "var(--button-color)",
     //                ^^^^^^^^^^^^^^^^^^  will be suggested
-  })
+  });
   ```
 
 - Updated dependencies [861a280]
@@ -469,19 +492,19 @@
   modifier in config `tokens` or `semanticTokens`
 
   ```ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
-    validation: 'warn',
+    validation: "warn",
     conditions: {
-      light: '.light &',
-      dark: '.dark &',
+      light: ".light &",
+      dark: ".dark &",
     },
     theme: {
       tokens: {
         colors: {
-          blue: { 500: { value: 'blue' } },
-          green: { 500: { value: 'green' } },
+          blue: { 500: { value: "blue" } },
+          green: { 500: { value: "green" } },
         },
         opacity: {
           half: { value: 0.5 },
@@ -491,15 +514,15 @@
         colors: {
           secondary: {
             value: {
-              base: 'red',
-              _light: '{colors.blue.500/32}',
-              _dark: '{colors.green.500/half}',
+              base: "red",
+              _light: "{colors.blue.500/32}",
+              _dark: "{colors.green.500/half}",
             },
           },
         },
       },
     },
-  })
+  });
   ```
 
   Would incorrectly report:
@@ -531,23 +554,23 @@
 - 9f04427: Fix "missing token" warning when using DEFAULT in tokens path
 
   ```ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
-    validation: 'error',
+    validation: "error",
     theme: {
       semanticTokens: {
         colors: {
           primary: {
-            DEFAULT: { value: '#ff3333' },
-            lighter: { value: '#ff6666' },
+            DEFAULT: { value: "#ff3333" },
+            lighter: { value: "#ff6666" },
           },
-          background: { value: '{colors.primary}' }, // <-- ⚠️ wrong warning
-          background2: { value: '{colors.primary.lighter}' }, // <-- no warning, correct
+          background: { value: "{colors.primary}" }, // <-- ⚠️ wrong warning
+          background2: { value: "{colors.primary.lighter}" }, // <-- no warning, correct
         },
       },
     },
-  })
+  });
   ```
 
   ***
@@ -555,25 +578,25 @@
   Add a warning when using `value` twice
 
   ```ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
-    validation: 'error',
+    validation: "error",
     theme: {
       tokens: {
         colors: {
-          primary: { value: '#ff3333' },
+          primary: { value: "#ff3333" },
         },
       },
       semanticTokens: {
         colors: {
           primary: {
-            value: { value: '{colors.primary}' }, // <-- ⚠️ new warning for this
+            value: { value: "{colors.primary}" }, // <-- ⚠️ new warning for this
           },
         },
       },
     },
-  })
+  });
   ```
 
 - Updated dependencies [d1516c8]
@@ -607,20 +630,20 @@
   export default defaultConfig({
     conditions: {
       extend: {
-        supportHover: ['@media (hover: hover) and (pointer: fine)', '&:hover'],
+        supportHover: ["@media (hover: hover) and (pointer: fine)", "&:hover"],
       },
     },
-  })
+  });
   ```
 
   ```ts
-  import { css } from '../styled-system/css'
+  import { css } from "../styled-system/css";
 
   css({
     _supportHover: {
-      color: 'red',
+      color: "red",
     },
-  })
+  });
   ```
 
   will generate the following CSS:
@@ -676,10 +699,10 @@
 
   ```ts
   css({
-    padding: '1px',
-    paddingTop: '3px',
-    paddingBottom: '4px',
-  })
+    padding: "1px",
+    paddingTop: "3px",
+    paddingBottom: "4px",
+  });
   ```
 
   Will now always generate the following css:
@@ -757,16 +780,16 @@
   keeping the rest. Let's say we want to remove the `stack` pattern from the built-in `@pandacss/preset-base`:
 
   ```ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
     hooks: {
-      'config:resolved': ({ config, utils }) => {
-        return utils.omit(config, ['patterns.stack'])
+      "config:resolved": ({ config, utils }) => {
+        return utils.omit(config, ["patterns.stack"]);
       },
     },
-  })
+  });
   ```
 
 - ab32d1d7: Fix issue where errors were thrown when semantic tokens are overriden in tokens.
@@ -784,11 +807,11 @@
   ```js
   module.exports = {
     plugins: {
-      '@pandacss/dev/postcss': {
-        logfile: './logs/panda.log',
+      "@pandacss/dev/postcss": {
+        logfile: "./logs/panda.log",
       },
     },
-  }
+  };
   ```
 
 - Updated dependencies [74485ef1]
@@ -825,8 +848,8 @@
   ```ts
   export default defineConfig({
     // ...
-    dependencies: ['path/to/files/**.ts'],
-  })
+    dependencies: ["path/to/files/**.ts"],
+  });
   ```
 
   - Invoke `config:change` hook in more situations (when the `--watch` flag is passed to `panda codegen`,
@@ -884,39 +907,54 @@
      * Called when the config is resolved, after all the presets are loaded and merged.
      * This is the first hook called, you can use it to tweak the config before the context is created.
      */
-    'config:resolved': (args: { conf: LoadConfigResult }) => MaybeAsyncReturn
+    "config:resolved": (args: { conf: LoadConfigResult }) => MaybeAsyncReturn;
     /**
      * Called when the Panda context has been created and the API is ready to be used.
      */
-    'context:created': (args: { ctx: ApiInterface; logger: LoggerInterface }) => void
+    "context:created": (args: {
+      ctx: ApiInterface;
+      logger: LoggerInterface;
+    }) => void;
     /**
      * Called when the config file or one of its dependencies (imports) has changed.
      */
-    'config:change': (args: { config: UserConfig }) => MaybeAsyncReturn
+    "config:change": (args: { config: UserConfig }) => MaybeAsyncReturn;
     /**
      * Called after reading the file content but before parsing it.
      * You can use this hook to transform the file content to a tsx-friendly syntax so that Panda's parser can parse it.
      * You can also use this hook to parse the file's content on your side using a custom parser, in this case you don't have to return anything.
      */
-    'parser:before': (args: { filePath: string; content: string }) => string | void
+    "parser:before": (args: {
+      filePath: string;
+      content: string;
+    }) => string | void;
     /**
      * Called after the file styles are extracted and processed into the resulting ParserResult object.
      * You can also use this hook to add your own extraction results from your custom parser to the ParserResult object.
      */
-    'parser:after': (args: { filePath: string; result: ParserResultInterface | undefined }) => void
+    "parser:after": (args: {
+      filePath: string;
+      result: ParserResultInterface | undefined;
+    }) => void;
     /**
      * Called after the codegen is completed
      */
-    'codegen:done': () => MaybeAsyncReturn
+    "codegen:done": () => MaybeAsyncReturn;
     /**
      * Called right before adding the design-system CSS (global, static, preflight, tokens, keyframes) to the final CSS
      * Called right before writing/injecting the final CSS (styles.css) that contains the design-system CSS and the parser CSS
      * You can use it to tweak the CSS content before it's written to disk or injected through the postcss plugin.
      */
-    'cssgen:done': (args: {
-      artifact: 'global' | 'static' | 'reset' | 'tokens' | 'keyframes' | 'styles.css'
-      content: string
-    }) => string | void
+    "cssgen:done": (args: {
+      artifact:
+        | "global"
+        | "static"
+        | "reset"
+        | "tokens"
+        | "keyframes"
+        | "styles.css";
+      content: string;
+    }) => string | void;
   }
   ```
 
@@ -1008,12 +1046,12 @@
 
   ```ts
   // apps/storybook/panda.config.ts
-  import { defineConfig } from '@pandacss/dev'
-  import preset from '@acme/preset'
+  import { defineConfig } from "@pandacss/dev";
+  import preset from "@acme/preset";
 
   export default defineConfig({
     // ...
-  })
+  });
   ```
 
   This would not work before, but now it does.
@@ -1227,10 +1265,10 @@
     staticCss: {
       recipes: {
         // generate all button styles and variants
-        button: ['*'],
+        button: ["*"],
       },
     },
-  })
+  });
 
   export default defineConfig({
     presets: [presetWithStaticCss],
@@ -1238,11 +1276,11 @@
       extend: {
         recipes: {
           // extend and pre-generate all sizes for card
-          card: [{ size: ['small', 'medium', 'large'] }],
+          card: [{ size: ["small", "medium", "large"] }],
         },
       },
     },
-  })
+  });
   ```
 
 ### Patch Changes
@@ -1437,42 +1475,42 @@
     theme: {
       tokens: {
         colors: {
-          'first-main': { value: 'override' },
+          "first-main": { value: "override" },
         },
       },
       extend: {
         tokens: {
           colors: {
-            orange: { value: 'orange' },
-            gray: { value: 'from-first-config' },
+            orange: { value: "orange" },
+            gray: { value: "from-first-config" },
           },
         },
       },
     },
-  })
+  });
 
   const secondConfig = definePreset({
     theme: {
       tokens: {
         colors: {
-          pink: { value: 'pink' },
+          pink: { value: "pink" },
         },
       },
       extend: {
         tokens: {
           colors: {
-            blue: { value: 'blue' },
-            gray: { value: 'gray' },
+            blue: { value: "blue" },
+            gray: { value: "gray" },
           },
         },
       },
     },
-  })
+  });
 
   // Final config
   export default defineConfig({
     presets: [firstConfig, secondConfig],
-  })
+  });
   ```
 
   Here's the difference between the old and new behavior:
@@ -1700,7 +1738,7 @@
 - 33198907: Create separate entrypoint for merge configs
 
   ```ts
-  import { mergeConfigs } from '@pandacss/config/merge'
+  import { mergeConfigs } from "@pandacss/config/merge";
   ```
 
 - 1a2c0e2b: Fix `panda.config.xxx` file dependencies detection when using the builder (= with PostCSS or with the VSCode
diff --git a/packages/config/package.json b/packages/config/package.json
index d789c73aa..748a236b1 100644
--- a/packages/config/package.json
+++ b/packages/config/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/config",
-  "version": "0.38.0",
+  "version": "0.39.0",
   "description": "Find and load panda config",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md
index a442473ca..7edd84ac1 100644
--- a/packages/core/CHANGELOG.md
+++ b/packages/core/CHANGELOG.md
@@ -1,5 +1,20 @@
 # @pandacss/core
 
+## 0.39.0
+
+### Patch Changes
+
+- c3e797e: Fix issue where `animationName` property was not connected to `theme.keyframes`, as a result, no autocompletion was
+  available.
+- Updated dependencies [221c9a2]
+- Updated dependencies [c3e797e]
+- Updated dependencies [935ec86]
+  - @pandacss/types@0.39.0
+  - @pandacss/shared@0.39.0
+  - @pandacss/logger@0.39.0
+  - @pandacss/token-dictionary@0.39.0
+  - @pandacss/is-valid-prop@0.39.0
+
 ## 0.38.0
 
 ### Minor Changes
@@ -17,11 +32,11 @@
       ta: {
         deprecated: true,
         transform(value) {
-          return { textAlign: value }
+          return { textAlign: value };
         },
       },
     },
-  })
+  });
   ```
 
   **Deprecating a token**
@@ -31,11 +46,11 @@
     theme: {
       tokens: {
         spacing: {
-          lg: { value: '8px', deprecated: 'use `8` instead' },
+          lg: { value: "8px", deprecated: "use `8` instead" },
         },
       },
     },
-  })
+  });
   ```
 
   **Deprecating a pattern**
@@ -47,7 +62,7 @@
         deprecated: true,
       },
     },
-  })
+  });
   ```
 
   **Deprecating a recipe**
@@ -57,11 +72,11 @@
     theme: {
       recipes: {
         btn: {
-          deprecated: 'will be removed in v2.0',
+          deprecated: "will be removed in v2.0",
         },
       },
     },
-  })
+  });
   ```
 
   ### ESLint Plugin
@@ -87,23 +102,28 @@
   This makes it even easier to merge styles from multiple sources.
 
   ```tsx
-  import { Stack, styled } from '../styled-system/jsx'
+  import { Stack, styled } from "../styled-system/jsx";
 
   const HeroSection = (props) => {
     return (
-      <Stack css={[{ color: 'blue.300', padding: '4' }, props.css]}>
-        <styled.div css={[{ fontSize: '2xl' }, props.hero]}>Hero Section</styled.div>
+      <Stack css={[{ color: "blue.300", padding: "4" }, props.css]}>
+        <styled.div css={[{ fontSize: "2xl" }, props.hero]}>
+          Hero Section
+        </styled.div>
       </Stack>
-    )
-  }
+    );
+  };
 
   const App = () => {
     return (
       <>
-        <HeroSection css={{ backgroundColor: 'yellow.300' }} hero={css.raw({ fontSize: '4xl', color: 'red.300' })} />
+        <HeroSection
+          css={{ backgroundColor: "yellow.300" }}
+          hero={css.raw({ fontSize: "4xl", color: "red.300" })}
+        />
       </>
-    )
-  }
+    );
+  };
   ```
 
   should render something like:
@@ -142,21 +162,21 @@
 - 99870bb: Fix issue where setting the pattern `jsx` option with dot notation didn't work.
 
   ```jsx
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
     patterns: {
       extend: {
         grid: {
-          jsx: ['Form.Group', 'Grid'],
+          jsx: ["Form.Group", "Grid"],
         },
         stack: {
-          jsx: ['Form.Action', 'Stack'],
+          jsx: ["Form.Action", "Stack"],
         },
       },
     },
-  })
+  });
   ```
 
 - Updated dependencies [93dc9f5]
@@ -198,9 +218,9 @@
     useful when applying negative margin to child elements.
 
   ```tsx
-  <div className={flex({ spaceX: '-1' })}>
-    <div className={circle({ size: '5', bg: 'red' })} />
-    <div className={circle({ size: '5', bg: 'pink' })} />
+  <div className={flex({ spaceX: "-1" })}>
+    <div className={circle({ size: "5", bg: "red" })} />
+    <div className={circle({ size: "5", bg: "pink" })} />
   </div>
   ```
 
@@ -212,13 +232,13 @@
   ```tsx
   <div
     className={css({
-      bgGradient: 'to-r',
+      bgGradient: "to-r",
       // from
-      gradientFrom: 'red',
-      gradientFromPosition: 'top left',
+      gradientFrom: "red",
+      gradientFromPosition: "top left",
       // to
-      gradientTo: 'blue',
-      gradientToPosition: 'bottom right',
+      gradientTo: "blue",
+      gradientToPosition: "bottom right",
     })}
   />
   ```
@@ -228,19 +248,23 @@
   It can be useful to use a component library's `styled-system` while also using your own `styled-system` in your app.
 
   ```ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
-    importMap: ['@acme/styled-system', '@ui-lib/styled-system', 'styled-system'],
-  })
+    importMap: [
+      "@acme/styled-system",
+      "@ui-lib/styled-system",
+      "styled-system",
+    ],
+  });
   ```
 
   Now you can use any of the `@acme/styled-system`, `@ui-lib/styled-system` and `styled-system` import sources:
 
   ```ts
-  import { css } from '@acme/css'
-  import { css as uiCss } from '@ui-lib/styled-system/css'
-  import { css as appCss } from '@ui-lib/styled-system/css'
+  import { css } from "@acme/css";
+  import { css as uiCss } from "@ui-lib/styled-system/css";
+  import { css as appCss } from "@ui-lib/styled-system/css";
   ```
 
 ### Patch Changes
@@ -279,7 +303,7 @@
 
   ```ts
   // panda.config.ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
@@ -288,15 +312,15 @@
       extend: {
         tokens: {
           colors: {
-            text: { value: 'blue' },
+            text: { value: "blue" },
           },
         },
         semanticTokens: {
           colors: {
             body: {
               value: {
-                base: '{colors.blue.600}',
-                _osDark: '{colors.blue.400}',
+                base: "{colors.blue.600}",
+                _osDark: "{colors.blue.400}",
               },
             },
           },
@@ -308,16 +332,16 @@
       primary: {
         tokens: {
           colors: {
-            text: { value: 'red' },
+            text: { value: "red" },
           },
         },
         semanticTokens: {
           colors: {
-            muted: { value: '{colors.red.200}' },
+            muted: { value: "{colors.red.200}" },
             body: {
               value: {
-                base: '{colors.red.600}',
-                _osDark: '{colors.red.400}',
+                base: "{colors.red.600}",
+                _osDark: "{colors.red.400}",
               },
             },
           },
@@ -326,23 +350,23 @@
       secondary: {
         tokens: {
           colors: {
-            text: { value: 'blue' },
+            text: { value: "blue" },
           },
         },
         semanticTokens: {
           colors: {
-            muted: { value: '{colors.blue.200}' },
+            muted: { value: "{colors.blue.200}" },
             body: {
               value: {
-                base: '{colors.blue.600}',
-                _osDark: '{colors.blue.400}',
+                base: "{colors.blue.600}",
+                _osDark: "{colors.blue.400}",
               },
             },
           },
         },
       },
     },
-  })
+  });
   ```
 
   ### Pregenerating themes
@@ -352,14 +376,14 @@
 
   ```ts
   // panda.config.ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
     staticCss: {
-      themes: ['primary', 'secondary'],
+      themes: ["primary", "secondary"],
     },
-  })
+  });
   ```
 
   This will generate the following CSS:
@@ -371,7 +395,7 @@
       --colors-body: var(--colors-blue-600);
     }
 
-    [data-panda-theme='primary'] {
+    [data-panda-theme="primary"] {
       --colors-text: red;
       --colors-muted: var(--colors-red-200);
       --colors-body: var(--colors-red-600);
@@ -382,7 +406,7 @@
         --colors-body: var(--colors-blue-400);
       }
 
-      [data-panda-theme='primary'] {
+      [data-panda-theme="primary"] {
         --colors-body: var(--colors-red-400);
       }
     }
@@ -413,9 +437,9 @@
   Dynamically import a theme using its name:
 
   ```ts
-  import { getTheme } from '../styled-system/themes'
+  import { getTheme } from "../styled-system/themes";
 
-  const theme = await getTheme('red')
+  const theme = await getTheme("red");
   //    ^? {
   //     name: "red";
   //     id: string;
@@ -426,10 +450,10 @@
   Inject the theme styles into the DOM:
 
   ```ts
-  import { injectTheme } from '../styled-system/themes'
+  import { injectTheme } from "../styled-system/themes";
 
-  const theme = await getTheme('red')
-  injectTheme(document.documentElement, theme) // this returns the injected style element
+  const theme = await getTheme("red");
+  injectTheme(document.documentElement, theme); // this returns the injected style element
   ```
 
   ***
@@ -438,54 +462,62 @@
 
   ```tsx
   // app/layout.tsx
-  import { Inter } from 'next/font/google'
-  import { cookies } from 'next/headers'
-  import { ThemeName, getTheme } from '../../styled-system/themes'
-
-  export default async function RootLayout({ children }: { children: React.ReactNode }) {
-    const store = cookies()
-    const themeName = store.get('theme')?.value as ThemeName
-    const theme = themeName && (await getTheme(themeName))
+  import { Inter } from "next/font/google";
+  import { cookies } from "next/headers";
+  import { ThemeName, getTheme } from "../../styled-system/themes";
+
+  export default async function RootLayout({
+    children,
+  }: {
+    children: React.ReactNode;
+  }) {
+    const store = cookies();
+    const themeName = store.get("theme")?.value as ThemeName;
+    const theme = themeName && (await getTheme(themeName));
 
     return (
       <html lang="en" data-panda-theme={themeName ? themeName : undefined}>
         {themeName && (
           <head>
-            <style type="text/css" id={theme.id} dangerouslySetInnerHTML={{ __html: theme.css }} />
+            <style
+              type="text/css"
+              id={theme.id}
+              dangerouslySetInnerHTML={{ __html: theme.css }}
+            />
           </head>
         )}
         <body>{children}</body>
       </html>
-    )
+    );
   }
 
   // app/page.tsx
-  import { getTheme, injectTheme } from '../../styled-system/themes'
+  import { getTheme, injectTheme } from "../../styled-system/themes";
 
   export default function Home() {
     return (
       <>
         <button
           onClick={async () => {
-            const current = document.documentElement.dataset.pandaTheme
-            const next = current === 'primary' ? 'secondary' : 'primary'
-            const theme = await getTheme(next)
-            setCookie('theme', next, 7)
-            injectTheme(document.documentElement, theme)
+            const current = document.documentElement.dataset.pandaTheme;
+            const next = current === "primary" ? "secondary" : "primary";
+            const theme = await getTheme(next);
+            setCookie("theme", next, 7);
+            injectTheme(document.documentElement, theme);
           }}
         >
           swap theme
         </button>
       </>
-    )
+    );
   }
 
   // Set a Cookie
   function setCookie(cName: string, cValue: any, expDays: number) {
-    let date = new Date()
-    date.setTime(date.getTime() + expDays * 24 * 60 * 60 * 1000)
-    const expires = 'expires=' + date.toUTCString()
-    document.cookie = cName + '=' + cValue + '; ' + expires + '; path=/'
+    let date = new Date();
+    date.setTime(date.getTime() + expDays * 24 * 60 * 60 * 1000);
+    const expires = "expires=" + date.toUTCString();
+    document.cookie = cName + "=" + cValue + "; " + expires + "; path=/";
   }
   ```
 
@@ -494,18 +526,18 @@
   Finally, you can create a theme contract to ensure that all themes have the same structure:
 
   ```ts
-  import { defineThemeContract } from '@pandacss/dev'
+  import { defineThemeContract } from "@pandacss/dev";
 
   const defineTheme = defineThemeContract({
     tokens: {
       colors: {
-        red: { value: '' }, // theme implementations must have a red color
+        red: { value: "" }, // theme implementations must have a red color
       },
     },
-  })
+  });
 
   defineTheme({
-    selector: '.theme-secondary',
+    selector: ".theme-secondary",
     tokens: {
       colors: {
         // ^^^^   Property 'red' is missing in type '{}' but required in type '{ red: { value: string; }; }'
@@ -514,7 +546,7 @@
         // red: { value: 'red' },
       },
     },
-  })
+  });
   ```
 
 - fabdabe: ## Changes
@@ -534,12 +566,12 @@
     theme: {
       extend: {
         colors: {
-          primary: { value: 'blue' },
+          primary: { value: "blue" },
         },
         // borderWidths: {}, // ⚠️ nothing defined here
       },
     },
-  })
+  });
   ```
 
   ```ts
@@ -550,8 +582,8 @@
 
     // ✅ after this PR, TS will not throw an error anymore as you don't have any `borderWidths` tokens
     // if you add one, this will error again (as it's supposed to)
-    borderWidths: '123px',
-  })
+    borderWidths: "123px",
+  });
   ```
 
   ## Description
@@ -589,11 +621,13 @@
 - c459b43: Fix extraction of JSX `styled` factory when using namespace imports
 
   ```tsx
-  import * as pandaJsx from '../styled-system/jsx'
+  import * as pandaJsx from "../styled-system/jsx";
 
   // ✅ this will work now
-  pandaJsx.styled('div', { base: { color: 'red' } })
-  const App = () => <pandaJsx.styled.span color="blue">Hello</pandaJsx.styled.span>
+  pandaJsx.styled("div", { base: { color: "red" } });
+  const App = () => (
+    <pandaJsx.styled.span color="blue">Hello</pandaJsx.styled.span>
+  );
   ```
 
 - Updated dependencies [f2fdc48]
@@ -623,18 +657,18 @@
 - 0bf09f2: Allow using namespaced imports
 
   ```ts
-  import * as p from 'styled-system/patterns'
-  import * as recipes from 'styled-system/recipes'
-  import * as panda from 'styled-system/css'
+  import * as p from "styled-system/patterns";
+  import * as recipes from "styled-system/recipes";
+  import * as panda from "styled-system/css";
 
   // this will now be extracted
-  p.stack({ mt: '40px' })
+  p.stack({ mt: "40px" });
 
-  recipes.cardStyle({ rounded: true })
+  recipes.cardStyle({ rounded: true });
 
-  panda.css({ color: 'red' })
-  panda.cva({ base: { color: 'blue' } })
-  panda.sva({ base: { root: { color: 'green' } } })
+  panda.css({ color: "red" });
+  panda.cva({ base: { color: "blue" } });
+  panda.sva({ base: { root: { color: "green" } } });
   ```
 
   - @pandacss/types@0.34.2
@@ -668,16 +702,16 @@
   ```ts
   // runtime usage
 
-  import { css } from '../styled-system/css'
+  import { css } from "../styled-system/css";
 
-  css({ bg: '{colors.blue.300/70}' })
+  css({ bg: "{colors.blue.300/70}" });
   // => @layer utilities {
   //    .bg_token\(colors\.blue\.300\/70\) {
   //      background: color-mix(in srgb, var(--colors-blue-300) 70%, transparent);
   //    }
   //  }
 
-  css({ bg: 'token(colors.blue.300/70)' })
+  css({ bg: "token(colors.blue.300/70)" });
   // => @layer utilities {
   //    .bg_token\(colors\.blue\.300\/70\) {
   //      background: color-mix(in srgb, var(--colors-blue-300) 70%, transparent);
@@ -687,33 +721,37 @@
 
   ```ts
   // build-time usage
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     theme: {
       tokens: {
         colors: {
           blue: {
-            300: { value: '#00f' },
+            300: { value: "#00f" },
           },
         },
       },
       semanticTokens: {
         colors: {
           primary: {
-            value: '{colors.blue.300/70}',
+            value: "{colors.blue.300/70}",
           },
         },
       },
     },
-  })
+  });
   ```
 
   ```css
   @layer tokens {
     :where(:root, :host) {
       --colors-blue-300: #00f;
-      --colors-primary: color-mix(in srgb, var(--colors-blue-300) 70%, transparent);
+      --colors-primary: color-mix(
+        in srgb,
+        var(--colors-blue-300) 70%,
+        transparent
+      );
     }
   }
   ```
@@ -754,20 +792,20 @@
   export default defaultConfig({
     conditions: {
       extend: {
-        supportHover: ['@media (hover: hover) and (pointer: fine)', '&:hover'],
+        supportHover: ["@media (hover: hover) and (pointer: fine)", "&:hover"],
       },
     },
-  })
+  });
   ```
 
   ```ts
-  import { css } from '../styled-system/css'
+  import { css } from "../styled-system/css";
 
   css({
     _supportHover: {
-      color: 'red',
+      color: "red",
     },
-  })
+  });
   ```
 
   will generate the following CSS:
@@ -783,25 +821,25 @@
 - 31071ba: Fix an issue for token names starting with '0'
 
   ```ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     theme: {
       tokens: {
         spacing: {
-          '025': {
-            value: '0.125rem',
+          "025": {
+            value: "0.125rem",
           },
         },
       },
     },
-  })
+  });
   ```
 
   and then using it like
 
   ```ts
-  css({ margin: '025' })
+  css({ margin: "025" });
   ```
 
   This would not generate the expected CSS because the parser would try to parse `025` as a number (`25`) instead of
@@ -812,11 +850,11 @@
   - Allow using multiple aliases for the same identifier for the `/css` entrypoints just like `/patterns` and `/recipes`
 
   ```ts
-  import { css } from '../styled-system/css'
-  import { css as css2 } from '../styled-system/css'
+  import { css } from "../styled-system/css";
+  import { css as css2 } from "../styled-system/css";
 
-  css({ display: 'flex' })
-  css2({ flexDirection: 'column' }) // this wasn't working before, now it does
+  css({ display: "flex" });
+  css2({ flexDirection: "column" }); // this wasn't working before, now it does
   ```
 
 - Updated dependencies [a032375]
@@ -860,10 +898,10 @@
 
   ```ts
   css({
-    padding: '1px',
-    paddingTop: '3px',
-    paddingBottom: '4px',
-  })
+    padding: "1px",
+    paddingTop: "3px",
+    paddingBottom: "4px",
+  });
   ```
 
   Will now always generate the following css:
@@ -924,16 +962,17 @@
   export default defineConfig({
     // ...
     hooks: {
-      'parser:before': ({ configure }) => {
+      "parser:before": ({ configure }) => {
         configure({
           // ignore the Select.Content entirely
-          matchTag: (tag) => tag !== 'Select.Content',
+          matchTag: (tag) => tag !== "Select.Content",
           // ...or specifically ignore the `position` property
-          matchTagProp: (tag, prop) => tag === 'Select.Content' && prop !== 'position',
-        })
+          matchTagProp: (tag, prop) =>
+            tag === "Select.Content" && prop !== "position",
+        });
       },
     },
-  })
+  });
   ```
 
 - Updated dependencies [6b829cab]
@@ -1001,9 +1040,9 @@
 
   ```ts
   css({
-    bg: 'red.300/40',
-    color: 'white',
-  })
+    bg: "red.300/40",
+    color: "white",
+  });
   ```
 
   This will generate:
@@ -1011,7 +1050,11 @@
   ```css
   @layer utilities {
     .bg_red\.300\/40 {
-      --mix-background: color-mix(in srgb, var(--colors-red-300) 40%, transparent);
+      --mix-background: color-mix(
+        in srgb,
+        var(--colors-red-300) 40%,
+        transparent
+      );
       background: var(--mix-background, var(--colors-red-300));
     }
 
@@ -1035,21 +1078,21 @@
   export default defineConfig({
     utilities: {
       background: {
-        shorthand: 'bg',
-        className: 'bg',
-        values: 'colors',
+        shorthand: "bg",
+        className: "bg",
+        values: "colors",
         transform(value, args) {
-          const mix = args.utils.colorMix(value)
+          const mix = args.utils.colorMix(value);
           // This can happen if the value format is invalid (e.g. `bg: red.300/invalid` or `bg: red.300//10`)
-          if (mix.invalid) return { background: value }
+          if (mix.invalid) return { background: value };
 
           return {
             background: mix.value,
-          }
+          };
         },
       },
     },
-  })
+  });
   ```
 
   ***
@@ -1058,21 +1101,21 @@
   property:
 
   ```ts
-  import type { PropertyTransform } from '@pandacss/types'
+  import type { PropertyTransform } from "@pandacss/types";
 
   export const createColorMixTransform =
     (prop: string): PropertyTransform =>
     (value, args) => {
-      const mix = args.utils.colorMix(value)
-      if (mix.invalid) return { [prop]: value }
+      const mix = args.utils.colorMix(value);
+      if (mix.invalid) return { [prop]: value };
 
-      const cssVar = '--mix-' + prop
+      const cssVar = "--mix-" + prop;
 
       return {
         [cssVar]: mix.value,
         [prop]: `var(${cssVar}, ${mix.color})`,
-      }
-    }
+      };
+    };
   ```
 
   then the same utility transform as above can be written like this:
@@ -1098,24 +1141,24 @@
     patterns: {
       hstack: {
         properties: {
-          justify: { type: 'property', value: 'justifyContent' },
-          gap: { type: 'property', value: 'gap' },
+          justify: { type: "property", value: "justifyContent" },
+          gap: { type: "property", value: "gap" },
         },
         // you can also use a token like '10'
-        defaultValues: { gap: '40px' },
+        defaultValues: { gap: "40px" },
         transform(props) {
-          const { justify, gap, ...rest } = props
+          const { justify, gap, ...rest } = props;
           return {
-            display: 'flex',
-            alignItems: 'center',
+            display: "flex",
+            alignItems: "center",
             justifyContent: justify,
             gap,
             ...rest,
-          }
+          };
         },
       },
     },
-  })
+  });
   ```
 
 - 250b4d11: ### Container Query Theme
@@ -1129,34 +1172,34 @@
     // ...
     theme: {
       extend: {
-        containerNames: ['sidebar', 'content'],
+        containerNames: ["sidebar", "content"],
         containerSizes: {
-          xs: '40em',
-          sm: '60em',
-          md: '80em',
+          xs: "40em",
+          sm: "60em",
+          md: "80em",
         },
       },
     },
-  })
+  });
   ```
 
   The default container sizes in the `@pandacss/preset-panda` preset are shown below:
 
   ```ts
   export const containerSizes = {
-    xs: '320px',
-    sm: '384px',
-    md: '448px',
-    lg: '512px',
-    xl: '576px',
-    '2xl': '672px',
-    '3xl': '768px',
-    '4xl': '896px',
-    '5xl': '1024px',
-    '6xl': '1152px',
-    '7xl': '1280px',
-    '8xl': '1440px',
-  }
+    xs: "320px",
+    sm: "384px",
+    md: "448px",
+    lg: "512px",
+    xl: "576px",
+    "2xl": "672px",
+    "3xl": "768px",
+    "4xl": "896px",
+    "5xl": "1024px",
+    "6xl": "1152px",
+    "7xl": "1280px",
+    "8xl": "1440px",
+  };
   ```
 
   Then use them in your styles by referencing using `@<container-name>/<container-size>` syntax:
@@ -1240,10 +1283,10 @@
   css({
     // ✅ this is fine now, will resolve to something like
     // `@container (min-width: 56em)`
-    '@container (min-width: {sizes.4xl})': {
-      color: 'green',
+    "@container (min-width: {sizes.4xl})": {
+      color: "green",
     },
-  })
+  });
   ```
 
   Fix an issue where the curly token references would not be escaped if the token path was not found.
@@ -1282,39 +1325,54 @@
      * Called when the config is resolved, after all the presets are loaded and merged.
      * This is the first hook called, you can use it to tweak the config before the context is created.
      */
-    'config:resolved': (args: { conf: LoadConfigResult }) => MaybeAsyncReturn
+    "config:resolved": (args: { conf: LoadConfigResult }) => MaybeAsyncReturn;
     /**
      * Called when the Panda context has been created and the API is ready to be used.
      */
-    'context:created': (args: { ctx: ApiInterface; logger: LoggerInterface }) => void
+    "context:created": (args: {
+      ctx: ApiInterface;
+      logger: LoggerInterface;
+    }) => void;
     /**
      * Called when the config file or one of its dependencies (imports) has changed.
      */
-    'config:change': (args: { config: UserConfig }) => MaybeAsyncReturn
+    "config:change": (args: { config: UserConfig }) => MaybeAsyncReturn;
     /**
      * Called after reading the file content but before parsing it.
      * You can use this hook to transform the file content to a tsx-friendly syntax so that Panda's parser can parse it.
      * You can also use this hook to parse the file's content on your side using a custom parser, in this case you don't have to return anything.
      */
-    'parser:before': (args: { filePath: string; content: string }) => string | void
+    "parser:before": (args: {
+      filePath: string;
+      content: string;
+    }) => string | void;
     /**
      * Called after the file styles are extracted and processed into the resulting ParserResult object.
      * You can also use this hook to add your own extraction results from your custom parser to the ParserResult object.
      */
-    'parser:after': (args: { filePath: string; result: ParserResultInterface | undefined }) => void
+    "parser:after": (args: {
+      filePath: string;
+      result: ParserResultInterface | undefined;
+    }) => void;
     /**
      * Called after the codegen is completed
      */
-    'codegen:done': () => MaybeAsyncReturn
+    "codegen:done": () => MaybeAsyncReturn;
     /**
      * Called right before adding the design-system CSS (global, static, preflight, tokens, keyframes) to the final CSS
      * Called right before writing/injecting the final CSS (styles.css) that contains the design-system CSS and the parser CSS
      * You can use it to tweak the CSS content before it's written to disk or injected through the postcss plugin.
      */
-    'cssgen:done': (args: {
-      artifact: 'global' | 'static' | 'reset' | 'tokens' | 'keyframes' | 'styles.css'
-      content: string
-    }) => string | void
+    "cssgen:done": (args: {
+      artifact:
+        | "global"
+        | "static"
+        | "reset"
+        | "tokens"
+        | "keyframes"
+        | "styles.css";
+      content: string;
+    }) => string | void;
   }
   ```
 
@@ -1521,11 +1579,11 @@
 - de282f60: Support token reference syntax when authoring styles object, text styles and layer styles.
 
   ```jsx
-  import { css } from '../styled-system/css'
+  import { css } from "../styled-system/css";
 
   const styles = css({
-    border: '2px solid {colors.primary}',
-  })
+    border: "2px solid {colors.primary}",
+  });
   ```
 
   This will resolve the token reference and convert it to css variables.
@@ -1545,18 +1603,18 @@
   ```jsx
   const styles = css({
     // token reference syntax
-    border: '2px solid {colors.primary}',
+    border: "2px solid {colors.primary}",
     // token function syntax
-    border: '2px solid token(colors.primary)',
-  })
+    border: "2px solid token(colors.primary)",
+  });
   ```
 
   However, The `token(...)` syntax allows you to set a fallback value.
 
   ```jsx
   const styles = css({
-    border: '2px solid token(colors.primary, red)',
-  })
+    border: "2px solid token(colors.primary, red)",
+  });
   ```
 
 ### Patch Changes
@@ -1567,8 +1625,8 @@
   ```jsx
   css({
     // This didn't work, but now it does
-    base: { color: 'blue' },
-  })
+    base: { color: "blue" },
+  });
   ```
 
 - Updated dependencies [59fd291c]
@@ -1627,38 +1685,38 @@
 
   ```ts
   const card = defineRecipe({
-    className: 'card',
-    base: { color: 'white' },
+    className: "card",
+    base: { color: "white" },
     variants: {
       size: {
-        small: { fontSize: '14px' },
-        large: { fontSize: '18px' },
+        small: { fontSize: "14px" },
+        large: { fontSize: "18px" },
       },
       visual: {
-        primary: { backgroundColor: 'blue' },
-        secondary: { backgroundColor: 'gray' },
+        primary: { backgroundColor: "blue" },
+        secondary: { backgroundColor: "gray" },
       },
     },
-  })
+  });
 
   export default defineConfig({
     // ...
     staticCss: {
       recipes: {
-        card: ['*'], // this
+        card: ["*"], // this
 
         // was equivalent to:
         card: [
           // notice how `responsive: true` was implicitly added
-          { size: ['*'], responsive: true },
-          { visual: ['*'], responsive: true },
+          { size: ["*"], responsive: true },
+          { visual: ["*"], responsive: true },
         ],
 
         //   will now correctly be equivalent to:
-        card: [{ size: ['*'] }, { visual: ['*'] }],
+        card: [{ size: ["*"] }, { visual: ["*"] }],
       },
     },
-  })
+  });
   ```
 
   Here's the diff in the generated CSS:
@@ -1784,30 +1842,30 @@
   another file, such as when using `Ark-UI` like `import { comboboxAnatomy } from '@ark-ui/anatomy'`
 
   ```ts
-  import { sva } from '../styled-system/css'
-  import { slots } from './slots'
+  import { sva } from "../styled-system/css";
+  import { slots } from "./slots";
 
   const card = sva({
     slots, // ❌ did NOT work -> ✅ will now work as expected
     base: {
       root: {
-        p: '6',
-        m: '4',
-        w: 'md',
-        boxShadow: 'md',
-        borderRadius: 'md',
-        _dark: { bg: '#262626', color: 'white' },
+        p: "6",
+        m: "4",
+        w: "md",
+        boxShadow: "md",
+        borderRadius: "md",
+        _dark: { bg: "#262626", color: "white" },
       },
       content: {
-        textStyle: 'lg',
+        textStyle: "lg",
       },
       title: {
-        textStyle: 'xl',
-        fontWeight: 'semibold',
-        pb: '2',
+        textStyle: "xl",
+        fontWeight: "semibold",
+        pb: "2",
       },
     },
-  })
+  });
   ```
 
 - 840ed66b: Fix an issue with config change detection when using a custom `config.slotRecipes[xxx].jsx` array
@@ -1864,18 +1922,18 @@
   and suffixing with `]`, e.g. writing `[123px]` as a value will bypass the token validation.
 
   ```ts
-  import { css } from '../styled-system/css'
+  import { css } from "../styled-system/css";
 
   css({
     // @ts-expect-error TS will throw when using from strictTokens: true
-    color: '#fff',
+    color: "#fff",
     // @ts-expect-error TS will throw when using from strictTokens: true
-    width: '100px',
+    width: "100px",
 
     // ✅ but this is now allowed:
-    bgColor: '[rgb(51 155 240)]',
-    fontSize: '[12px]',
-  })
+    bgColor: "[rgb(51 155 240)]",
+    fontSize: "[12px]",
+  });
   ```
 
 ### Patch Changes
@@ -1888,8 +1946,8 @@
     // here the content property is a valid CSS property, so Panda will try to generate the CSS for it
     // but since it's an URL, it would produce invalid CSS
     // we now check if the property value is an URL and skip it if needed
-    return <CopyButton content="https://www.buymeacoffee.com/grizzlycodes" />
-  }
+    return <CopyButton content="https://www.buymeacoffee.com/grizzlycodes" />;
+  };
   ```
 
 - d81dcbe6: - Fix an issue where recipe variants that clash with utility shorthand don't get generated due to the
@@ -1898,36 +1956,36 @@
 - 105f74ce: Add a way to specify a recipe's `staticCss` options from inside a recipe config, e.g.:
 
   ```js
-  import { defineRecipe } from '@pandacss/dev'
+  import { defineRecipe } from "@pandacss/dev";
 
   const card = defineRecipe({
-    className: 'card',
-    base: { color: 'white' },
+    className: "card",
+    base: { color: "white" },
     variants: {
       size: {
-        small: { fontSize: '14px' },
-        large: { fontSize: '18px' },
+        small: { fontSize: "14px" },
+        large: { fontSize: "18px" },
       },
     },
-    staticCss: [{ size: ['*'] }],
-  })
+    staticCss: [{ size: ["*"] }],
+  });
   ```
 
   would be the equivalent of defining it inside the main config:
 
   ```js
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
     staticCss: {
       recipes: {
         card: {
-          size: ['*'],
+          size: ["*"],
         },
       },
     },
-  })
+  });
   ```
 
 - Updated dependencies [26e6051a]
@@ -1959,13 +2017,13 @@
 
   ```ts
   css({
-    '@container (min-width: token(sizes.xl))': {
-      color: 'green.300',
+    "@container (min-width: token(sizes.xl))": {
+      color: "green.300",
     },
-    '@media (min-width: token(sizes.2xl))': {
-      color: 'red.300',
+    "@media (min-width: token(sizes.2xl))": {
+      color: "red.300",
     },
-  })
+  });
   ```
 
 - Updated dependencies [24ee49a5]
@@ -2017,14 +2075,14 @@
 - 8c76cd0f: - Fix issue where `hideBelow` breakpoints are inclusive of the specified breakpoints
 
   ```jsx
-  css({ hideBelow: 'lg' })
+  css({ hideBelow: "lg" });
   // => @media screen and (max-width: 63.9975em) { background: red; }
   ```
 
   - Support arbitrary breakpoints in `hideBelow` and `hideFrom` utilities
 
   ```jsx
-  css({ hideFrom: '800px' })
+  css({ hideFrom: "800px" });
   // => @media screen and (min-width: 800px) { background: red; }
   ```
 
@@ -2110,10 +2168,10 @@
 
   ```ts
   const button = defineSlotRecipe({
-    className: 'button',
-    slots: ['root', 'icon', 'label'],
+    className: "button",
+    slots: ["root", "icon", "label"],
     // ...
-  })
+  });
   ```
 
   will have a default `jsx` property of: `[Button, Button.Root, Button.Icon, Button.Label]`
@@ -2170,42 +2228,42 @@
 
   ```ts
   export default defineConfig({
-    outdir: './outdir',
+    outdir: "./outdir",
     importMap: {
-      css: '#panda/styled-system/css',
-      recipes: '#panda/styled-system/recipes',
-      patterns: '#panda/styled-system/patterns',
-      jsx: '#panda/styled-system/jsx',
+      css: "#panda/styled-system/css",
+      recipes: "#panda/styled-system/recipes",
+      patterns: "#panda/styled-system/patterns",
+      jsx: "#panda/styled-system/jsx",
     },
-  })
+  });
   ```
 
   Or you could also make your outdir an actual package from your monorepo:
 
   ```ts
   export default defineConfig({
-    outdir: '../packages/styled-system',
+    outdir: "../packages/styled-system",
     importMap: {
-      css: '@monorepo/styled-system',
-      recipes: '@monorepo/styled-system',
-      patterns: '@monorepo/styled-system',
-      jsx: '@monorepo/styled-system',
+      css: "@monorepo/styled-system",
+      recipes: "@monorepo/styled-system",
+      patterns: "@monorepo/styled-system",
+      jsx: "@monorepo/styled-system",
     },
-  })
+  });
   ```
 
   Working with tsconfig paths aliases is easy:
 
   ```ts
   export default defineConfig({
-    outdir: 'styled-system',
+    outdir: "styled-system",
     importMap: {
-      css: 'styled-system/css',
-      recipes: 'styled-system/recipes',
-      patterns: 'styled-system/patterns',
-      jsx: 'styled-system/jsx',
+      css: "styled-system/css",
+      recipes: "styled-system/recipes",
+      patterns: "styled-system/patterns",
+      jsx: "styled-system/jsx",
     },
-  })
+  });
   ```
 
 - Updated dependencies [95b06bb1]
@@ -2235,13 +2293,13 @@
 - 848936e0: Allow referencing tokens with the `token()` function in media queries or any other CSS at-rule.
 
   ```js
-  import { css } from '../styled-system/css'
+  import { css } from "../styled-system/css";
 
   const className = css({
-    '@media screen and (min-width: token(sizes.4xl))': {
-      color: 'green.400',
+    "@media screen and (min-width: token(sizes.4xl))": {
+      color: "green.400",
     },
-  })
+  });
   ```
 
 - Updated dependencies [26f6982c]
@@ -2294,7 +2352,7 @@
 
   ```css
   * {
-    color: token('colors.magenta', pink);
+    color: token("colors.magenta", pink);
   }
   ```
 
@@ -2403,12 +2461,12 @@
   **Definition**
 
   ```jsx
-  import { sva } from 'styled-system/css'
+  import { sva } from "styled-system/css";
 
   const button = sva({
-    slots: ['label', 'icon'],
+    slots: ["label", "icon"],
     base: {
-      label: { color: 'red', textDecoration: 'underline' },
+      label: { color: "red", textDecoration: "underline" },
     },
     variants: {
       rounded: {
@@ -2416,33 +2474,33 @@
       },
       size: {
         sm: {
-          label: { fontSize: 'sm' },
-          icon: { fontSize: 'sm' },
+          label: { fontSize: "sm" },
+          icon: { fontSize: "sm" },
         },
         lg: {
-          label: { fontSize: 'lg' },
-          icon: { fontSize: 'lg', color: 'pink' },
+          label: { fontSize: "lg" },
+          icon: { fontSize: "lg", color: "pink" },
         },
       },
     },
     defaultVariants: {
-      size: 'sm',
+      size: "sm",
     },
-  })
+  });
   ```
 
   **Usage**
 
   ```jsx
   export function App() {
-    const btnClass = button({ size: 'lg', rounded: true })
+    const btnClass = button({ size: "lg", rounded: true });
 
     return (
       <button>
         <p class={btnClass.label}> Label</p>
         <p class={btnClass.icon}> Icon</p>
       </button>
-    )
+    );
   }
   ```
 
@@ -2491,26 +2549,26 @@
   Update the `jsx` property to be used for advanced tracking of custom pattern components.
 
   ```jsx
-  import { Circle } from 'styled-system/jsx'
+  import { Circle } from "styled-system/jsx";
   const CustomCircle = ({ children, ...props }) => {
-    return <Circle {...props}>{children}</Circle>
-  }
+    return <Circle {...props}>{children}</Circle>;
+  };
   ```
 
   To track the `CustomCircle` component, you can now use the `jsx` property.
 
   ```js
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     patterns: {
       extend: {
         circle: {
-          jsx: ['CustomCircle'],
+          jsx: ["CustomCircle"],
         },
       },
     },
-  })
+  });
   ```
 
 ### Patch Changes
@@ -2574,9 +2632,17 @@
   ```tsx
   const ComponentWithMultipleRecipes = ({ variant }) => {
     return (
-      <button className={cx(pinkRecipe({ variant }), greenRecipe({ variant }), blueRecipe({ variant }))}>Hello</button>
-    )
-  }
+      <button
+        className={cx(
+          pinkRecipe({ variant }),
+          greenRecipe({ variant }),
+          blueRecipe({ variant }),
+        )}
+      >
+        Hello
+      </button>
+    );
+  };
   ```
 
   Given a `panda.config.ts` with recipes each including a common `jsx` tag name, such as:
@@ -2643,7 +2709,7 @@
   ```ts
   staticCss: {
     recipes: {
-      button: [{ size: ['*'], shape: ['*'] }]
+      button: [{ size: ["*"], shape: ["*"] }];
     }
   }
   ```
@@ -2653,7 +2719,7 @@
   ```ts
   staticCss: {
     recipes: {
-      button: ['*']
+      button: ["*"];
     }
   }
   ```
@@ -2689,12 +2755,12 @@
 - 5b344b9c: Add support for disabling shorthand props
 
   ```ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
     shorthands: false,
-  })
+  });
   ```
 
 ### Patch Changes
@@ -2796,11 +2862,11 @@ This hook is called right before writing the codegen files to disk. You can use
 export default defineConfig({
   // ...
   hooks: {
-    'codegen:prepare': ({ artifacts, changed }) => {
+    "codegen:prepare": ({ artifacts, changed }) => {
       // do something with the emitted js/d.ts files
     },
   },
-})
+});
 ```
 
 - d5977c24: - Add a `--logfile` flag to the `panda`, `panda codegen`, `panda cssgen` and `panda debug` commands.
@@ -2817,11 +2883,11 @@ export default defineConfig({
   ```js
   module.exports = {
     plugins: {
-      '@pandacss/dev/postcss': {
-        logfile: './logs/panda.log',
+      "@pandacss/dev/postcss": {
+        logfile: "./logs/panda.log",
       },
     },
-  }
+  };
   ```
 
 - Updated dependencies [74485ef1]
@@ -2860,9 +2926,9 @@ export default defineConfig({
 
   ```ts
   css({
-    bg: 'red.300/40',
-    color: 'white',
-  })
+    bg: "red.300/40",
+    color: "white",
+  });
   ```
 
   This will generate:
@@ -2870,7 +2936,11 @@ export default defineConfig({
   ```css
   @layer utilities {
     .bg_red\.300\/40 {
-      --mix-background: color-mix(in srgb, var(--colors-red-300) 40%, transparent);
+      --mix-background: color-mix(
+        in srgb,
+        var(--colors-red-300) 40%,
+        transparent
+      );
       background: var(--mix-background, var(--colors-red-300));
     }
 
@@ -2894,21 +2964,21 @@ export default defineConfig({
   export default defineConfig({
     utilities: {
       background: {
-        shorthand: 'bg',
-        className: 'bg',
-        values: 'colors',
+        shorthand: "bg",
+        className: "bg",
+        values: "colors",
         transform(value, args) {
-          const mix = args.utils.colorMix(value)
+          const mix = args.utils.colorMix(value);
           // This can happen if the value format is invalid (e.g. `bg: red.300/invalid` or `bg: red.300//10`)
-          if (mix.invalid) return { background: value }
+          if (mix.invalid) return { background: value };
 
           return {
             background: mix.value,
-          }
+          };
         },
       },
     },
-  })
+  });
   ```
 
   ***
@@ -2917,21 +2987,21 @@ export default defineConfig({
   property:
 
   ```ts
-  import type { PropertyTransform } from '@pandacss/types'
+  import type { PropertyTransform } from "@pandacss/types";
 
   export const createColorMixTransform =
     (prop: string): PropertyTransform =>
     (value, args) => {
-      const mix = args.utils.colorMix(value)
-      if (mix.invalid) return { [prop]: value }
+      const mix = args.utils.colorMix(value);
+      if (mix.invalid) return { [prop]: value };
 
-      const cssVar = '--mix-' + prop
+      const cssVar = "--mix-" + prop;
 
       return {
         [cssVar]: mix.value,
         [prop]: `var(${cssVar}, ${mix.color})`,
-      }
-    }
+      };
+    };
   ```
 
   then the same utility transform as above can be written like this:
@@ -2957,24 +3027,24 @@ export default defineConfig({
     patterns: {
       hstack: {
         properties: {
-          justify: { type: 'property', value: 'justifyContent' },
-          gap: { type: 'property', value: 'gap' },
+          justify: { type: "property", value: "justifyContent" },
+          gap: { type: "property", value: "gap" },
         },
         // you can also use a token like '10'
-        defaultValues: { gap: '40px' },
+        defaultValues: { gap: "40px" },
         transform(props) {
-          const { justify, gap, ...rest } = props
+          const { justify, gap, ...rest } = props;
           return {
-            display: 'flex',
-            alignItems: 'center',
+            display: "flex",
+            alignItems: "center",
             justifyContent: justify,
             gap,
             ...rest,
-          }
+          };
         },
       },
     },
-  })
+  });
   ```
 
 - 250b4d11: ### Container Query Theme
@@ -2988,34 +3058,34 @@ export default defineConfig({
     // ...
     theme: {
       extend: {
-        containerNames: ['sidebar', 'content'],
+        containerNames: ["sidebar", "content"],
         containerSizes: {
-          xs: '40em',
-          sm: '60em',
-          md: '80em',
+          xs: "40em",
+          sm: "60em",
+          md: "80em",
         },
       },
     },
-  })
+  });
   ```
 
   The default container sizes in the `@pandacss/preset-panda` preset are shown below:
 
   ```ts
   export const containerSizes = {
-    xs: '320px',
-    sm: '384px',
-    md: '448px',
-    lg: '512px',
-    xl: '576px',
-    '2xl': '672px',
-    '3xl': '768px',
-    '4xl': '896px',
-    '5xl': '1024px',
-    '6xl': '1152px',
-    '7xl': '1280px',
-    '8xl': '1440px',
-  }
+    xs: "320px",
+    sm: "384px",
+    md: "448px",
+    lg: "512px",
+    xl: "576px",
+    "2xl": "672px",
+    "3xl": "768px",
+    "4xl": "896px",
+    "5xl": "1024px",
+    "6xl": "1152px",
+    "7xl": "1280px",
+    "8xl": "1440px",
+  };
   ```
 
   Then use them in your styles by referencing using `@<container-name>/<container-size>` syntax:
@@ -3099,10 +3169,10 @@ export default defineConfig({
   css({
     // ✅ this is fine now, will resolve to something like
     // `@container (min-width: 56em)`
-    '@container (min-width: {sizes.4xl})': {
-      color: 'green',
+    "@container (min-width: {sizes.4xl})": {
+      color: "green",
     },
-  })
+  });
   ```
 
   Fix an issue where the curly token references would not be escaped if the token path was not found.
@@ -3141,39 +3211,54 @@ export default defineConfig({
      * Called when the config is resolved, after all the presets are loaded and merged.
      * This is the first hook called, you can use it to tweak the config before the context is created.
      */
-    'config:resolved': (args: { conf: LoadConfigResult }) => MaybeAsyncReturn
+    "config:resolved": (args: { conf: LoadConfigResult }) => MaybeAsyncReturn;
     /**
      * Called when the Panda context has been created and the API is ready to be used.
      */
-    'context:created': (args: { ctx: ApiInterface; logger: LoggerInterface }) => void
+    "context:created": (args: {
+      ctx: ApiInterface;
+      logger: LoggerInterface;
+    }) => void;
     /**
      * Called when the config file or one of its dependencies (imports) has changed.
      */
-    'config:change': (args: { config: UserConfig }) => MaybeAsyncReturn
+    "config:change": (args: { config: UserConfig }) => MaybeAsyncReturn;
     /**
      * Called after reading the file content but before parsing it.
      * You can use this hook to transform the file content to a tsx-friendly syntax so that Panda's parser can parse it.
      * You can also use this hook to parse the file's content on your side using a custom parser, in this case you don't have to return anything.
      */
-    'parser:before': (args: { filePath: string; content: string }) => string | void
+    "parser:before": (args: {
+      filePath: string;
+      content: string;
+    }) => string | void;
     /**
      * Called after the file styles are extracted and processed into the resulting ParserResult object.
      * You can also use this hook to add your own extraction results from your custom parser to the ParserResult object.
      */
-    'parser:after': (args: { filePath: string; result: ParserResultInterface | undefined }) => void
+    "parser:after": (args: {
+      filePath: string;
+      result: ParserResultInterface | undefined;
+    }) => void;
     /**
      * Called after the codegen is completed
      */
-    'codegen:done': () => MaybeAsyncReturn
+    "codegen:done": () => MaybeAsyncReturn;
     /**
      * Called right before adding the design-system CSS (global, static, preflight, tokens, keyframes) to the final CSS
      * Called right before writing/injecting the final CSS (styles.css) that contains the design-system CSS and the parser CSS
      * You can use it to tweak the CSS content before it's written to disk or injected through the postcss plugin.
      */
-    'cssgen:done': (args: {
-      artifact: 'global' | 'static' | 'reset' | 'tokens' | 'keyframes' | 'styles.css'
-      content: string
-    }) => string | void
+    "cssgen:done": (args: {
+      artifact:
+        | "global"
+        | "static"
+        | "reset"
+        | "tokens"
+        | "keyframes"
+        | "styles.css";
+      content: string;
+    }) => string | void;
   }
   ```
 
@@ -3380,11 +3465,11 @@ export default defineConfig({
 - de282f60: Support token reference syntax when authoring styles object, text styles and layer styles.
 
   ```jsx
-  import { css } from '../styled-system/css'
+  import { css } from "../styled-system/css";
 
   const styles = css({
-    border: '2px solid {colors.primary}',
-  })
+    border: "2px solid {colors.primary}",
+  });
   ```
 
   This will resolve the token reference and convert it to css variables.
@@ -3404,18 +3489,18 @@ export default defineConfig({
   ```jsx
   const styles = css({
     // token reference syntax
-    border: '2px solid {colors.primary}',
+    border: "2px solid {colors.primary}",
     // token function syntax
-    border: '2px solid token(colors.primary)',
-  })
+    border: "2px solid token(colors.primary)",
+  });
   ```
 
   However, The `token(...)` syntax allows you to set a fallback value.
 
   ```jsx
   const styles = css({
-    border: '2px solid token(colors.primary, red)',
-  })
+    border: "2px solid token(colors.primary, red)",
+  });
   ```
 
 ### Patch Changes
@@ -3426,8 +3511,8 @@ export default defineConfig({
   ```jsx
   css({
     // This didn't work, but now it does
-    base: { color: 'blue' },
-  })
+    base: { color: "blue" },
+  });
   ```
 
 - Updated dependencies [59fd291c]
@@ -3486,38 +3571,38 @@ export default defineConfig({
 
   ```ts
   const card = defineRecipe({
-    className: 'card',
-    base: { color: 'white' },
+    className: "card",
+    base: { color: "white" },
     variants: {
       size: {
-        small: { fontSize: '14px' },
-        large: { fontSize: '18px' },
+        small: { fontSize: "14px" },
+        large: { fontSize: "18px" },
       },
       visual: {
-        primary: { backgroundColor: 'blue' },
-        secondary: { backgroundColor: 'gray' },
+        primary: { backgroundColor: "blue" },
+        secondary: { backgroundColor: "gray" },
       },
     },
-  })
+  });
 
   export default defineConfig({
     // ...
     staticCss: {
       recipes: {
-        card: ['*'], // this
+        card: ["*"], // this
 
         // was equivalent to:
         card: [
           // notice how `responsive: true` was implicitly added
-          { size: ['*'], responsive: true },
-          { visual: ['*'], responsive: true },
+          { size: ["*"], responsive: true },
+          { visual: ["*"], responsive: true },
         ],
 
         //   will now correctly be equivalent to:
-        card: [{ size: ['*'] }, { visual: ['*'] }],
+        card: [{ size: ["*"] }, { visual: ["*"] }],
       },
     },
-  })
+  });
   ```
 
   Here's the diff in the generated CSS:
@@ -3643,30 +3728,30 @@ export default defineConfig({
   another file, such as when using `Ark-UI` like `import { comboboxAnatomy } from '@ark-ui/anatomy'`
 
   ```ts
-  import { sva } from '../styled-system/css'
-  import { slots } from './slots'
+  import { sva } from "../styled-system/css";
+  import { slots } from "./slots";
 
   const card = sva({
     slots, // ❌ did NOT work -> ✅ will now work as expected
     base: {
       root: {
-        p: '6',
-        m: '4',
-        w: 'md',
-        boxShadow: 'md',
-        borderRadius: 'md',
-        _dark: { bg: '#262626', color: 'white' },
+        p: "6",
+        m: "4",
+        w: "md",
+        boxShadow: "md",
+        borderRadius: "md",
+        _dark: { bg: "#262626", color: "white" },
       },
       content: {
-        textStyle: 'lg',
+        textStyle: "lg",
       },
       title: {
-        textStyle: 'xl',
-        fontWeight: 'semibold',
-        pb: '2',
+        textStyle: "xl",
+        fontWeight: "semibold",
+        pb: "2",
       },
     },
-  })
+  });
   ```
 
 - 840ed66b: Fix an issue with config change detection when using a custom `config.slotRecipes[xxx].jsx` array
@@ -3723,18 +3808,18 @@ export default defineConfig({
   and suffixing with `]`, e.g. writing `[123px]` as a value will bypass the token validation.
 
   ```ts
-  import { css } from '../styled-system/css'
+  import { css } from "../styled-system/css";
 
   css({
     // @ts-expect-error TS will throw when using from strictTokens: true
-    color: '#fff',
+    color: "#fff",
     // @ts-expect-error TS will throw when using from strictTokens: true
-    width: '100px',
+    width: "100px",
 
     // ✅ but this is now allowed:
-    bgColor: '[rgb(51 155 240)]',
-    fontSize: '[12px]',
-  })
+    bgColor: "[rgb(51 155 240)]",
+    fontSize: "[12px]",
+  });
   ```
 
 ### Patch Changes
@@ -3747,8 +3832,8 @@ export default defineConfig({
     // here the content property is a valid CSS property, so Panda will try to generate the CSS for it
     // but since it's an URL, it would produce invalid CSS
     // we now check if the property value is an URL and skip it if needed
-    return <CopyButton content="https://www.buymeacoffee.com/grizzlycodes" />
-  }
+    return <CopyButton content="https://www.buymeacoffee.com/grizzlycodes" />;
+  };
   ```
 
 - d81dcbe6: - Fix an issue where recipe variants that clash with utility shorthand don't get generated due to the
@@ -3757,36 +3842,36 @@ export default defineConfig({
 - 105f74ce: Add a way to specify a recipe's `staticCss` options from inside a recipe config, e.g.:
 
   ```js
-  import { defineRecipe } from '@pandacss/dev'
+  import { defineRecipe } from "@pandacss/dev";
 
   const card = defineRecipe({
-    className: 'card',
-    base: { color: 'white' },
+    className: "card",
+    base: { color: "white" },
     variants: {
       size: {
-        small: { fontSize: '14px' },
-        large: { fontSize: '18px' },
+        small: { fontSize: "14px" },
+        large: { fontSize: "18px" },
       },
     },
-    staticCss: [{ size: ['*'] }],
-  })
+    staticCss: [{ size: ["*"] }],
+  });
   ```
 
   would be the equivalent of defining it inside the main config:
 
   ```js
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
     staticCss: {
       recipes: {
         card: {
-          size: ['*'],
+          size: ["*"],
         },
       },
     },
-  })
+  });
   ```
 
 - Updated dependencies [26e6051a]
@@ -3818,13 +3903,13 @@ export default defineConfig({
 
   ```ts
   css({
-    '@container (min-width: token(sizes.xl))': {
-      color: 'green.300',
+    "@container (min-width: token(sizes.xl))": {
+      color: "green.300",
     },
-    '@media (min-width: token(sizes.2xl))': {
-      color: 'red.300',
+    "@media (min-width: token(sizes.2xl))": {
+      color: "red.300",
     },
-  })
+  });
   ```
 
 - Updated dependencies [24ee49a5]
@@ -3876,14 +3961,14 @@ export default defineConfig({
 - 8c76cd0f: - Fix issue where `hideBelow` breakpoints are inclusive of the specified breakpoints
 
   ```jsx
-  css({ hideBelow: 'lg' })
+  css({ hideBelow: "lg" });
   // => @media screen and (max-width: 63.9975em) { background: red; }
   ```
 
   - Support arbitrary breakpoints in `hideBelow` and `hideFrom` utilities
 
   ```jsx
-  css({ hideFrom: '800px' })
+  css({ hideFrom: "800px" });
   // => @media screen and (min-width: 800px) { background: red; }
   ```
 
@@ -3969,10 +4054,10 @@ export default defineConfig({
 
   ```ts
   const button = defineSlotRecipe({
-    className: 'button',
-    slots: ['root', 'icon', 'label'],
+    className: "button",
+    slots: ["root", "icon", "label"],
     // ...
-  })
+  });
   ```
 
   will have a default `jsx` property of: `[Button, Button.Root, Button.Icon, Button.Label]`
@@ -4029,42 +4114,42 @@ export default defineConfig({
 
   ```ts
   export default defineConfig({
-    outdir: './outdir',
+    outdir: "./outdir",
     importMap: {
-      css: '#panda/styled-system/css',
-      recipes: '#panda/styled-system/recipes',
-      patterns: '#panda/styled-system/patterns',
-      jsx: '#panda/styled-system/jsx',
+      css: "#panda/styled-system/css",
+      recipes: "#panda/styled-system/recipes",
+      patterns: "#panda/styled-system/patterns",
+      jsx: "#panda/styled-system/jsx",
     },
-  })
+  });
   ```
 
   Or you could also make your outdir an actual package from your monorepo:
 
   ```ts
   export default defineConfig({
-    outdir: '../packages/styled-system',
+    outdir: "../packages/styled-system",
     importMap: {
-      css: '@monorepo/styled-system',
-      recipes: '@monorepo/styled-system',
-      patterns: '@monorepo/styled-system',
-      jsx: '@monorepo/styled-system',
+      css: "@monorepo/styled-system",
+      recipes: "@monorepo/styled-system",
+      patterns: "@monorepo/styled-system",
+      jsx: "@monorepo/styled-system",
     },
-  })
+  });
   ```
 
   Working with tsconfig paths aliases is easy:
 
   ```ts
   export default defineConfig({
-    outdir: 'styled-system',
+    outdir: "styled-system",
     importMap: {
-      css: 'styled-system/css',
-      recipes: 'styled-system/recipes',
-      patterns: 'styled-system/patterns',
-      jsx: 'styled-system/jsx',
+      css: "styled-system/css",
+      recipes: "styled-system/recipes",
+      patterns: "styled-system/patterns",
+      jsx: "styled-system/jsx",
     },
-  })
+  });
   ```
 
 - Updated dependencies [95b06bb1]
@@ -4094,13 +4179,13 @@ export default defineConfig({
 - 848936e0: Allow referencing tokens with the `token()` function in media queries or any other CSS at-rule.
 
   ```js
-  import { css } from '../styled-system/css'
+  import { css } from "../styled-system/css";
 
   const className = css({
-    '@media screen and (min-width: token(sizes.4xl))': {
-      color: 'green.400',
+    "@media screen and (min-width: token(sizes.4xl))": {
+      color: "green.400",
     },
-  })
+  });
   ```
 
 - Updated dependencies [26f6982c]
@@ -4153,7 +4238,7 @@ export default defineConfig({
 
   ```css
   * {
-    color: token('colors.magenta', pink);
+    color: token("colors.magenta", pink);
   }
   ```
 
@@ -4262,12 +4347,12 @@ export default defineConfig({
   **Definition**
 
   ```jsx
-  import { sva } from 'styled-system/css'
+  import { sva } from "styled-system/css";
 
   const button = sva({
-    slots: ['label', 'icon'],
+    slots: ["label", "icon"],
     base: {
-      label: { color: 'red', textDecoration: 'underline' },
+      label: { color: "red", textDecoration: "underline" },
     },
     variants: {
       rounded: {
@@ -4275,33 +4360,33 @@ export default defineConfig({
       },
       size: {
         sm: {
-          label: { fontSize: 'sm' },
-          icon: { fontSize: 'sm' },
+          label: { fontSize: "sm" },
+          icon: { fontSize: "sm" },
         },
         lg: {
-          label: { fontSize: 'lg' },
-          icon: { fontSize: 'lg', color: 'pink' },
+          label: { fontSize: "lg" },
+          icon: { fontSize: "lg", color: "pink" },
         },
       },
     },
     defaultVariants: {
-      size: 'sm',
+      size: "sm",
     },
-  })
+  });
   ```
 
   **Usage**
 
   ```jsx
   export function App() {
-    const btnClass = button({ size: 'lg', rounded: true })
+    const btnClass = button({ size: "lg", rounded: true });
 
     return (
       <button>
         <p class={btnClass.label}> Label</p>
         <p class={btnClass.icon}> Icon</p>
       </button>
-    )
+    );
   }
   ```
 
@@ -4350,26 +4435,26 @@ export default defineConfig({
   Update the `jsx` property to be used for advanced tracking of custom pattern components.
 
   ```jsx
-  import { Circle } from 'styled-system/jsx'
+  import { Circle } from "styled-system/jsx";
   const CustomCircle = ({ children, ...props }) => {
-    return <Circle {...props}>{children}</Circle>
-  }
+    return <Circle {...props}>{children}</Circle>;
+  };
   ```
 
   To track the `CustomCircle` component, you can now use the `jsx` property.
 
   ```js
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     patterns: {
       extend: {
         circle: {
-          jsx: ['CustomCircle'],
+          jsx: ["CustomCircle"],
         },
       },
     },
-  })
+  });
   ```
 
 ### Patch Changes
@@ -4433,9 +4518,17 @@ export default defineConfig({
   ```tsx
   const ComponentWithMultipleRecipes = ({ variant }) => {
     return (
-      <button className={cx(pinkRecipe({ variant }), greenRecipe({ variant }), blueRecipe({ variant }))}>Hello</button>
-    )
-  }
+      <button
+        className={cx(
+          pinkRecipe({ variant }),
+          greenRecipe({ variant }),
+          blueRecipe({ variant }),
+        )}
+      >
+        Hello
+      </button>
+    );
+  };
   ```
 
   Given a `panda.config.ts` with recipes each including a common `jsx` tag name, such as:
@@ -4502,7 +4595,7 @@ export default defineConfig({
   ```ts
   staticCss: {
     recipes: {
-      button: [{ size: ['*'], shape: ['*'] }]
+      button: [{ size: ["*"], shape: ["*"] }];
     }
   }
   ```
@@ -4512,7 +4605,7 @@ export default defineConfig({
   ```ts
   staticCss: {
     recipes: {
-      button: ['*']
+      button: ["*"];
     }
   }
   ```
@@ -4548,12 +4641,12 @@ export default defineConfig({
 - 5b344b9c: Add support for disabling shorthand props
 
   ```ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
     shorthands: false,
-  })
+  });
   ```
 
 ### Patch Changes
@@ -4657,20 +4750,20 @@ Will now allow you to use the following syntax for token path:
   export default defaultConfig({
     conditions: {
       extend: {
-        supportHover: ['@media (hover: hover) and (pointer: fine)', '&:hover'],
+        supportHover: ["@media (hover: hover) and (pointer: fine)", "&:hover"],
       },
     },
-  })
+  });
   ```
 
   ```ts
-  import { css } from '../styled-system/css'
+  import { css } from "../styled-system/css";
 
   css({
     _supportHover: {
-      color: 'red',
+      color: "red",
     },
-  })
+  });
   ```
 
   will generate the following CSS:
@@ -4686,25 +4779,25 @@ Will now allow you to use the following syntax for token path:
 - 31071ba: Fix an issue for token names starting with '0'
 
   ```ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     theme: {
       tokens: {
         spacing: {
-          '025': {
-            value: '0.125rem',
+          "025": {
+            value: "0.125rem",
           },
         },
       },
     },
-  })
+  });
   ```
 
   and then using it like
 
   ```ts
-  css({ margin: '025' })
+  css({ margin: "025" });
   ```
 
   This would not generate the expected CSS because the parser would try to parse `025` as a number (`25`) instead of
@@ -4715,11 +4808,11 @@ Will now allow you to use the following syntax for token path:
   - Allow using multiple aliases for the same identifier for the `/css` entrypoints just like `/patterns` and `/recipes`
 
   ```ts
-  import { css } from '../styled-system/css'
-  import { css as css2 } from '../styled-system/css'
+  import { css } from "../styled-system/css";
+  import { css as css2 } from "../styled-system/css";
 
-  css({ display: 'flex' })
-  css2({ flexDirection: 'column' }) // this wasn't working before, now it does
+  css({ display: "flex" });
+  css2({ flexDirection: "column" }); // this wasn't working before, now it does
   ```
 
 - Updated dependencies [a032375]
@@ -4763,10 +4856,10 @@ Will now allow you to use the following syntax for token path:
 
   ```ts
   css({
-    padding: '1px',
-    paddingTop: '3px',
-    paddingBottom: '4px',
-  })
+    padding: "1px",
+    paddingTop: "3px",
+    paddingBottom: "4px",
+  });
   ```
 
   Will now always generate the following css:
@@ -4827,16 +4920,17 @@ Will now allow you to use the following syntax for token path:
   export default defineConfig({
     // ...
     hooks: {
-      'parser:before': ({ configure }) => {
+      "parser:before": ({ configure }) => {
         configure({
           // ignore the Select.Content entirely
-          matchTag: (tag) => tag !== 'Select.Content',
+          matchTag: (tag) => tag !== "Select.Content",
           // ...or specifically ignore the `position` property
-          matchTagProp: (tag, prop) => tag === 'Select.Content' && prop !== 'position',
-        })
+          matchTagProp: (tag, prop) =>
+            tag === "Select.Content" && prop !== "position",
+        });
       },
     },
-  })
+  });
   ```
 
 - Updated dependencies [6b829cab]
@@ -4904,9 +4998,9 @@ Will now allow you to use the following syntax for token path:
 
   ```ts
   css({
-    bg: 'red.300/40',
-    color: 'white',
-  })
+    bg: "red.300/40",
+    color: "white",
+  });
   ```
 
   This will generate:
@@ -4914,7 +5008,11 @@ Will now allow you to use the following syntax for token path:
   ```css
   @layer utilities {
     .bg_red\.300\/40 {
-      --mix-background: color-mix(in srgb, var(--colors-red-300) 40%, transparent);
+      --mix-background: color-mix(
+        in srgb,
+        var(--colors-red-300) 40%,
+        transparent
+      );
       background: var(--mix-background, var(--colors-red-300));
     }
 
@@ -4938,21 +5036,21 @@ Will now allow you to use the following syntax for token path:
   export default defineConfig({
     utilities: {
       background: {
-        shorthand: 'bg',
-        className: 'bg',
-        values: 'colors',
+        shorthand: "bg",
+        className: "bg",
+        values: "colors",
         transform(value, args) {
-          const mix = args.utils.colorMix(value)
+          const mix = args.utils.colorMix(value);
           // This can happen if the value format is invalid (e.g. `bg: red.300/invalid` or `bg: red.300//10`)
-          if (mix.invalid) return { background: value }
+          if (mix.invalid) return { background: value };
 
           return {
             background: mix.value,
-          }
+          };
         },
       },
     },
-  })
+  });
   ```
 
   ***
@@ -4961,21 +5059,21 @@ Will now allow you to use the following syntax for token path:
   property:
 
   ```ts
-  import type { PropertyTransform } from '@pandacss/types'
+  import type { PropertyTransform } from "@pandacss/types";
 
   export const createColorMixTransform =
     (prop: string): PropertyTransform =>
     (value, args) => {
-      const mix = args.utils.colorMix(value)
-      if (mix.invalid) return { [prop]: value }
+      const mix = args.utils.colorMix(value);
+      if (mix.invalid) return { [prop]: value };
 
-      const cssVar = '--mix-' + prop
+      const cssVar = "--mix-" + prop;
 
       return {
         [cssVar]: mix.value,
         [prop]: `var(${cssVar}, ${mix.color})`,
-      }
-    }
+      };
+    };
   ```
 
   then the same utility transform as above can be written like this:
@@ -5001,24 +5099,24 @@ Will now allow you to use the following syntax for token path:
     patterns: {
       hstack: {
         properties: {
-          justify: { type: 'property', value: 'justifyContent' },
-          gap: { type: 'property', value: 'gap' },
+          justify: { type: "property", value: "justifyContent" },
+          gap: { type: "property", value: "gap" },
         },
         // you can also use a token like '10'
-        defaultValues: { gap: '40px' },
+        defaultValues: { gap: "40px" },
         transform(props) {
-          const { justify, gap, ...rest } = props
+          const { justify, gap, ...rest } = props;
           return {
-            display: 'flex',
-            alignItems: 'center',
+            display: "flex",
+            alignItems: "center",
             justifyContent: justify,
             gap,
             ...rest,
-          }
+          };
         },
       },
     },
-  })
+  });
   ```
 
 - 250b4d11: ### Container Query Theme
@@ -5032,34 +5130,34 @@ Will now allow you to use the following syntax for token path:
     // ...
     theme: {
       extend: {
-        containerNames: ['sidebar', 'content'],
+        containerNames: ["sidebar", "content"],
         containerSizes: {
-          xs: '40em',
-          sm: '60em',
-          md: '80em',
+          xs: "40em",
+          sm: "60em",
+          md: "80em",
         },
       },
     },
-  })
+  });
   ```
 
   The default container sizes in the `@pandacss/preset-panda` preset are shown below:
 
   ```ts
   export const containerSizes = {
-    xs: '320px',
-    sm: '384px',
-    md: '448px',
-    lg: '512px',
-    xl: '576px',
-    '2xl': '672px',
-    '3xl': '768px',
-    '4xl': '896px',
-    '5xl': '1024px',
-    '6xl': '1152px',
-    '7xl': '1280px',
-    '8xl': '1440px',
-  }
+    xs: "320px",
+    sm: "384px",
+    md: "448px",
+    lg: "512px",
+    xl: "576px",
+    "2xl": "672px",
+    "3xl": "768px",
+    "4xl": "896px",
+    "5xl": "1024px",
+    "6xl": "1152px",
+    "7xl": "1280px",
+    "8xl": "1440px",
+  };
   ```
 
   Then use them in your styles by referencing using `@<container-name>/<container-size>` syntax:
@@ -5143,10 +5241,10 @@ Will now allow you to use the following syntax for token path:
   css({
     // ✅ this is fine now, will resolve to something like
     // `@container (min-width: 56em)`
-    '@container (min-width: {sizes.4xl})': {
-      color: 'green',
+    "@container (min-width: {sizes.4xl})": {
+      color: "green",
     },
-  })
+  });
   ```
 
   Fix an issue where the curly token references would not be escaped if the token path was not found.
@@ -5185,39 +5283,54 @@ Will now allow you to use the following syntax for token path:
      * Called when the config is resolved, after all the presets are loaded and merged.
      * This is the first hook called, you can use it to tweak the config before the context is created.
      */
-    'config:resolved': (args: { conf: LoadConfigResult }) => MaybeAsyncReturn
+    "config:resolved": (args: { conf: LoadConfigResult }) => MaybeAsyncReturn;
     /**
      * Called when the Panda context has been created and the API is ready to be used.
      */
-    'context:created': (args: { ctx: ApiInterface; logger: LoggerInterface }) => void
+    "context:created": (args: {
+      ctx: ApiInterface;
+      logger: LoggerInterface;
+    }) => void;
     /**
      * Called when the config file or one of its dependencies (imports) has changed.
      */
-    'config:change': (args: { config: UserConfig }) => MaybeAsyncReturn
+    "config:change": (args: { config: UserConfig }) => MaybeAsyncReturn;
     /**
      * Called after reading the file content but before parsing it.
      * You can use this hook to transform the file content to a tsx-friendly syntax so that Panda's parser can parse it.
      * You can also use this hook to parse the file's content on your side using a custom parser, in this case you don't have to return anything.
      */
-    'parser:before': (args: { filePath: string; content: string }) => string | void
+    "parser:before": (args: {
+      filePath: string;
+      content: string;
+    }) => string | void;
     /**
      * Called after the file styles are extracted and processed into the resulting ParserResult object.
      * You can also use this hook to add your own extraction results from your custom parser to the ParserResult object.
      */
-    'parser:after': (args: { filePath: string; result: ParserResultInterface | undefined }) => void
+    "parser:after": (args: {
+      filePath: string;
+      result: ParserResultInterface | undefined;
+    }) => void;
     /**
      * Called after the codegen is completed
      */
-    'codegen:done': () => MaybeAsyncReturn
+    "codegen:done": () => MaybeAsyncReturn;
     /**
      * Called right before adding the design-system CSS (global, static, preflight, tokens, keyframes) to the final CSS
      * Called right before writing/injecting the final CSS (styles.css) that contains the design-system CSS and the parser CSS
      * You can use it to tweak the CSS content before it's written to disk or injected through the postcss plugin.
      */
-    'cssgen:done': (args: {
-      artifact: 'global' | 'static' | 'reset' | 'tokens' | 'keyframes' | 'styles.css'
-      content: string
-    }) => string | void
+    "cssgen:done": (args: {
+      artifact:
+        | "global"
+        | "static"
+        | "reset"
+        | "tokens"
+        | "keyframes"
+        | "styles.css";
+      content: string;
+    }) => string | void;
   }
   ```
 
@@ -5424,11 +5537,11 @@ Will now allow you to use the following syntax for token path:
 - de282f60: Support token reference syntax when authoring styles object, text styles and layer styles.
 
   ```jsx
-  import { css } from '../styled-system/css'
+  import { css } from "../styled-system/css";
 
   const styles = css({
-    border: '2px solid {colors.primary}',
-  })
+    border: "2px solid {colors.primary}",
+  });
   ```
 
   This will resolve the token reference and convert it to css variables.
@@ -5448,18 +5561,18 @@ Will now allow you to use the following syntax for token path:
   ```jsx
   const styles = css({
     // token reference syntax
-    border: '2px solid {colors.primary}',
+    border: "2px solid {colors.primary}",
     // token function syntax
-    border: '2px solid token(colors.primary)',
-  })
+    border: "2px solid token(colors.primary)",
+  });
   ```
 
   However, The `token(...)` syntax allows you to set a fallback value.
 
   ```jsx
   const styles = css({
-    border: '2px solid token(colors.primary, red)',
-  })
+    border: "2px solid token(colors.primary, red)",
+  });
   ```
 
 ### Patch Changes
@@ -5470,8 +5583,8 @@ Will now allow you to use the following syntax for token path:
   ```jsx
   css({
     // This didn't work, but now it does
-    base: { color: 'blue' },
-  })
+    base: { color: "blue" },
+  });
   ```
 
 - Updated dependencies [59fd291c]
@@ -5530,38 +5643,38 @@ Will now allow you to use the following syntax for token path:
 
   ```ts
   const card = defineRecipe({
-    className: 'card',
-    base: { color: 'white' },
+    className: "card",
+    base: { color: "white" },
     variants: {
       size: {
-        small: { fontSize: '14px' },
-        large: { fontSize: '18px' },
+        small: { fontSize: "14px" },
+        large: { fontSize: "18px" },
       },
       visual: {
-        primary: { backgroundColor: 'blue' },
-        secondary: { backgroundColor: 'gray' },
+        primary: { backgroundColor: "blue" },
+        secondary: { backgroundColor: "gray" },
       },
     },
-  })
+  });
 
   export default defineConfig({
     // ...
     staticCss: {
       recipes: {
-        card: ['*'], // this
+        card: ["*"], // this
 
         // was equivalent to:
         card: [
           // notice how `responsive: true` was implicitly added
-          { size: ['*'], responsive: true },
-          { visual: ['*'], responsive: true },
+          { size: ["*"], responsive: true },
+          { visual: ["*"], responsive: true },
         ],
 
         //   will now correctly be equivalent to:
-        card: [{ size: ['*'] }, { visual: ['*'] }],
+        card: [{ size: ["*"] }, { visual: ["*"] }],
       },
     },
-  })
+  });
   ```
 
   Here's the diff in the generated CSS:
@@ -5687,30 +5800,30 @@ Will now allow you to use the following syntax for token path:
   another file, such as when using `Ark-UI` like `import { comboboxAnatomy } from '@ark-ui/anatomy'`
 
   ```ts
-  import { sva } from '../styled-system/css'
-  import { slots } from './slots'
+  import { sva } from "../styled-system/css";
+  import { slots } from "./slots";
 
   const card = sva({
     slots, // ❌ did NOT work -> ✅ will now work as expected
     base: {
       root: {
-        p: '6',
-        m: '4',
-        w: 'md',
-        boxShadow: 'md',
-        borderRadius: 'md',
-        _dark: { bg: '#262626', color: 'white' },
+        p: "6",
+        m: "4",
+        w: "md",
+        boxShadow: "md",
+        borderRadius: "md",
+        _dark: { bg: "#262626", color: "white" },
       },
       content: {
-        textStyle: 'lg',
+        textStyle: "lg",
       },
       title: {
-        textStyle: 'xl',
-        fontWeight: 'semibold',
-        pb: '2',
+        textStyle: "xl",
+        fontWeight: "semibold",
+        pb: "2",
       },
     },
-  })
+  });
   ```
 
 - 840ed66b: Fix an issue with config change detection when using a custom `config.slotRecipes[xxx].jsx` array
@@ -5767,18 +5880,18 @@ Will now allow you to use the following syntax for token path:
   and suffixing with `]`, e.g. writing `[123px]` as a value will bypass the token validation.
 
   ```ts
-  import { css } from '../styled-system/css'
+  import { css } from "../styled-system/css";
 
   css({
     // @ts-expect-error TS will throw when using from strictTokens: true
-    color: '#fff',
+    color: "#fff",
     // @ts-expect-error TS will throw when using from strictTokens: true
-    width: '100px',
+    width: "100px",
 
     // ✅ but this is now allowed:
-    bgColor: '[rgb(51 155 240)]',
-    fontSize: '[12px]',
-  })
+    bgColor: "[rgb(51 155 240)]",
+    fontSize: "[12px]",
+  });
   ```
 
 ### Patch Changes
@@ -5791,8 +5904,8 @@ Will now allow you to use the following syntax for token path:
     // here the content property is a valid CSS property, so Panda will try to generate the CSS for it
     // but since it's an URL, it would produce invalid CSS
     // we now check if the property value is an URL and skip it if needed
-    return <CopyButton content="https://www.buymeacoffee.com/grizzlycodes" />
-  }
+    return <CopyButton content="https://www.buymeacoffee.com/grizzlycodes" />;
+  };
   ```
 
 - d81dcbe6: - Fix an issue where recipe variants that clash with utility shorthand don't get generated due to the
@@ -5801,36 +5914,36 @@ Will now allow you to use the following syntax for token path:
 - 105f74ce: Add a way to specify a recipe's `staticCss` options from inside a recipe config, e.g.:
 
   ```js
-  import { defineRecipe } from '@pandacss/dev'
+  import { defineRecipe } from "@pandacss/dev";
 
   const card = defineRecipe({
-    className: 'card',
-    base: { color: 'white' },
+    className: "card",
+    base: { color: "white" },
     variants: {
       size: {
-        small: { fontSize: '14px' },
-        large: { fontSize: '18px' },
+        small: { fontSize: "14px" },
+        large: { fontSize: "18px" },
       },
     },
-    staticCss: [{ size: ['*'] }],
-  })
+    staticCss: [{ size: ["*"] }],
+  });
   ```
 
   would be the equivalent of defining it inside the main config:
 
   ```js
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
     staticCss: {
       recipes: {
         card: {
-          size: ['*'],
+          size: ["*"],
         },
       },
     },
-  })
+  });
   ```
 
 - Updated dependencies [26e6051a]
@@ -5862,13 +5975,13 @@ Will now allow you to use the following syntax for token path:
 
   ```ts
   css({
-    '@container (min-width: token(sizes.xl))': {
-      color: 'green.300',
+    "@container (min-width: token(sizes.xl))": {
+      color: "green.300",
     },
-    '@media (min-width: token(sizes.2xl))': {
-      color: 'red.300',
+    "@media (min-width: token(sizes.2xl))": {
+      color: "red.300",
     },
-  })
+  });
   ```
 
 - Updated dependencies [24ee49a5]
@@ -5920,14 +6033,14 @@ Will now allow you to use the following syntax for token path:
 - 8c76cd0f: - Fix issue where `hideBelow` breakpoints are inclusive of the specified breakpoints
 
   ```jsx
-  css({ hideBelow: 'lg' })
+  css({ hideBelow: "lg" });
   // => @media screen and (max-width: 63.9975em) { background: red; }
   ```
 
   - Support arbitrary breakpoints in `hideBelow` and `hideFrom` utilities
 
   ```jsx
-  css({ hideFrom: '800px' })
+  css({ hideFrom: "800px" });
   // => @media screen and (min-width: 800px) { background: red; }
   ```
 
@@ -6013,10 +6126,10 @@ Will now allow you to use the following syntax for token path:
 
   ```ts
   const button = defineSlotRecipe({
-    className: 'button',
-    slots: ['root', 'icon', 'label'],
+    className: "button",
+    slots: ["root", "icon", "label"],
     // ...
-  })
+  });
   ```
 
   will have a default `jsx` property of: `[Button, Button.Root, Button.Icon, Button.Label]`
@@ -6073,42 +6186,42 @@ Will now allow you to use the following syntax for token path:
 
   ```ts
   export default defineConfig({
-    outdir: './outdir',
+    outdir: "./outdir",
     importMap: {
-      css: '#panda/styled-system/css',
-      recipes: '#panda/styled-system/recipes',
-      patterns: '#panda/styled-system/patterns',
-      jsx: '#panda/styled-system/jsx',
+      css: "#panda/styled-system/css",
+      recipes: "#panda/styled-system/recipes",
+      patterns: "#panda/styled-system/patterns",
+      jsx: "#panda/styled-system/jsx",
     },
-  })
+  });
   ```
 
   Or you could also make your outdir an actual package from your monorepo:
 
   ```ts
   export default defineConfig({
-    outdir: '../packages/styled-system',
+    outdir: "../packages/styled-system",
     importMap: {
-      css: '@monorepo/styled-system',
-      recipes: '@monorepo/styled-system',
-      patterns: '@monorepo/styled-system',
-      jsx: '@monorepo/styled-system',
+      css: "@monorepo/styled-system",
+      recipes: "@monorepo/styled-system",
+      patterns: "@monorepo/styled-system",
+      jsx: "@monorepo/styled-system",
     },
-  })
+  });
   ```
 
   Working with tsconfig paths aliases is easy:
 
   ```ts
   export default defineConfig({
-    outdir: 'styled-system',
+    outdir: "styled-system",
     importMap: {
-      css: 'styled-system/css',
-      recipes: 'styled-system/recipes',
-      patterns: 'styled-system/patterns',
-      jsx: 'styled-system/jsx',
+      css: "styled-system/css",
+      recipes: "styled-system/recipes",
+      patterns: "styled-system/patterns",
+      jsx: "styled-system/jsx",
     },
-  })
+  });
   ```
 
 - Updated dependencies [95b06bb1]
@@ -6138,13 +6251,13 @@ Will now allow you to use the following syntax for token path:
 - 848936e0: Allow referencing tokens with the `token()` function in media queries or any other CSS at-rule.
 
   ```js
-  import { css } from '../styled-system/css'
+  import { css } from "../styled-system/css";
 
   const className = css({
-    '@media screen and (min-width: token(sizes.4xl))': {
-      color: 'green.400',
+    "@media screen and (min-width: token(sizes.4xl))": {
+      color: "green.400",
     },
-  })
+  });
   ```
 
 - Updated dependencies [26f6982c]
@@ -6197,7 +6310,7 @@ Will now allow you to use the following syntax for token path:
 
   ```css
   * {
-    color: token('colors.magenta', pink);
+    color: token("colors.magenta", pink);
   }
   ```
 
@@ -6306,12 +6419,12 @@ Will now allow you to use the following syntax for token path:
   **Definition**
 
   ```jsx
-  import { sva } from 'styled-system/css'
+  import { sva } from "styled-system/css";
 
   const button = sva({
-    slots: ['label', 'icon'],
+    slots: ["label", "icon"],
     base: {
-      label: { color: 'red', textDecoration: 'underline' },
+      label: { color: "red", textDecoration: "underline" },
     },
     variants: {
       rounded: {
@@ -6319,33 +6432,33 @@ Will now allow you to use the following syntax for token path:
       },
       size: {
         sm: {
-          label: { fontSize: 'sm' },
-          icon: { fontSize: 'sm' },
+          label: { fontSize: "sm" },
+          icon: { fontSize: "sm" },
         },
         lg: {
-          label: { fontSize: 'lg' },
-          icon: { fontSize: 'lg', color: 'pink' },
+          label: { fontSize: "lg" },
+          icon: { fontSize: "lg", color: "pink" },
         },
       },
     },
     defaultVariants: {
-      size: 'sm',
+      size: "sm",
     },
-  })
+  });
   ```
 
   **Usage**
 
   ```jsx
   export function App() {
-    const btnClass = button({ size: 'lg', rounded: true })
+    const btnClass = button({ size: "lg", rounded: true });
 
     return (
       <button>
         <p class={btnClass.label}> Label</p>
         <p class={btnClass.icon}> Icon</p>
       </button>
-    )
+    );
   }
   ```
 
@@ -6394,26 +6507,26 @@ Will now allow you to use the following syntax for token path:
   Update the `jsx` property to be used for advanced tracking of custom pattern components.
 
   ```jsx
-  import { Circle } from 'styled-system/jsx'
+  import { Circle } from "styled-system/jsx";
   const CustomCircle = ({ children, ...props }) => {
-    return <Circle {...props}>{children}</Circle>
-  }
+    return <Circle {...props}>{children}</Circle>;
+  };
   ```
 
   To track the `CustomCircle` component, you can now use the `jsx` property.
 
   ```js
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     patterns: {
       extend: {
         circle: {
-          jsx: ['CustomCircle'],
+          jsx: ["CustomCircle"],
         },
       },
     },
-  })
+  });
   ```
 
 ### Patch Changes
@@ -6477,9 +6590,17 @@ Will now allow you to use the following syntax for token path:
   ```tsx
   const ComponentWithMultipleRecipes = ({ variant }) => {
     return (
-      <button className={cx(pinkRecipe({ variant }), greenRecipe({ variant }), blueRecipe({ variant }))}>Hello</button>
-    )
-  }
+      <button
+        className={cx(
+          pinkRecipe({ variant }),
+          greenRecipe({ variant }),
+          blueRecipe({ variant }),
+        )}
+      >
+        Hello
+      </button>
+    );
+  };
   ```
 
   Given a `panda.config.ts` with recipes each including a common `jsx` tag name, such as:
@@ -6546,7 +6667,7 @@ Will now allow you to use the following syntax for token path:
   ```ts
   staticCss: {
     recipes: {
-      button: [{ size: ['*'], shape: ['*'] }]
+      button: [{ size: ["*"], shape: ["*"] }];
     }
   }
   ```
@@ -6556,7 +6677,7 @@ Will now allow you to use the following syntax for token path:
   ```ts
   staticCss: {
     recipes: {
-      button: ['*']
+      button: ["*"];
     }
   }
   ```
@@ -6592,12 +6713,12 @@ Will now allow you to use the following syntax for token path:
 - 5b344b9c: Add support for disabling shorthand props
 
   ```ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
     shorthands: false,
-  })
+  });
   ```
 
 ### Patch Changes
@@ -6699,11 +6820,11 @@ This hook is called right before writing the codegen files to disk. You can use
 export default defineConfig({
   // ...
   hooks: {
-    'codegen:prepare': ({ artifacts, changed }) => {
+    "codegen:prepare": ({ artifacts, changed }) => {
       // do something with the emitted js/d.ts files
     },
   },
-})
+});
 ```
 
 - d5977c24: - Add a `--logfile` flag to the `panda`, `panda codegen`, `panda cssgen` and `panda debug` commands.
@@ -6720,11 +6841,11 @@ export default defineConfig({
   ```js
   module.exports = {
     plugins: {
-      '@pandacss/dev/postcss': {
-        logfile: './logs/panda.log',
+      "@pandacss/dev/postcss": {
+        logfile: "./logs/panda.log",
       },
     },
-  }
+  };
   ```
 
 - Updated dependencies [74485ef1]
@@ -6763,9 +6884,9 @@ export default defineConfig({
 
   ```ts
   css({
-    bg: 'red.300/40',
-    color: 'white',
-  })
+    bg: "red.300/40",
+    color: "white",
+  });
   ```
 
   This will generate:
@@ -6773,7 +6894,11 @@ export default defineConfig({
   ```css
   @layer utilities {
     .bg_red\.300\/40 {
-      --mix-background: color-mix(in srgb, var(--colors-red-300) 40%, transparent);
+      --mix-background: color-mix(
+        in srgb,
+        var(--colors-red-300) 40%,
+        transparent
+      );
       background: var(--mix-background, var(--colors-red-300));
     }
 
@@ -6797,21 +6922,21 @@ export default defineConfig({
   export default defineConfig({
     utilities: {
       background: {
-        shorthand: 'bg',
-        className: 'bg',
-        values: 'colors',
+        shorthand: "bg",
+        className: "bg",
+        values: "colors",
         transform(value, args) {
-          const mix = args.utils.colorMix(value)
+          const mix = args.utils.colorMix(value);
           // This can happen if the value format is invalid (e.g. `bg: red.300/invalid` or `bg: red.300//10`)
-          if (mix.invalid) return { background: value }
+          if (mix.invalid) return { background: value };
 
           return {
             background: mix.value,
-          }
+          };
         },
       },
     },
-  })
+  });
   ```
 
   ***
@@ -6820,21 +6945,21 @@ export default defineConfig({
   property:
 
   ```ts
-  import type { PropertyTransform } from '@pandacss/types'
+  import type { PropertyTransform } from "@pandacss/types";
 
   export const createColorMixTransform =
     (prop: string): PropertyTransform =>
     (value, args) => {
-      const mix = args.utils.colorMix(value)
-      if (mix.invalid) return { [prop]: value }
+      const mix = args.utils.colorMix(value);
+      if (mix.invalid) return { [prop]: value };
 
-      const cssVar = '--mix-' + prop
+      const cssVar = "--mix-" + prop;
 
       return {
         [cssVar]: mix.value,
         [prop]: `var(${cssVar}, ${mix.color})`,
-      }
-    }
+      };
+    };
   ```
 
   then the same utility transform as above can be written like this:
@@ -6860,24 +6985,24 @@ export default defineConfig({
     patterns: {
       hstack: {
         properties: {
-          justify: { type: 'property', value: 'justifyContent' },
-          gap: { type: 'property', value: 'gap' },
+          justify: { type: "property", value: "justifyContent" },
+          gap: { type: "property", value: "gap" },
         },
         // you can also use a token like '10'
-        defaultValues: { gap: '40px' },
+        defaultValues: { gap: "40px" },
         transform(props) {
-          const { justify, gap, ...rest } = props
+          const { justify, gap, ...rest } = props;
           return {
-            display: 'flex',
-            alignItems: 'center',
+            display: "flex",
+            alignItems: "center",
             justifyContent: justify,
             gap,
             ...rest,
-          }
+          };
         },
       },
     },
-  })
+  });
   ```
 
 - 250b4d11: ### Container Query Theme
@@ -6891,34 +7016,34 @@ export default defineConfig({
     // ...
     theme: {
       extend: {
-        containerNames: ['sidebar', 'content'],
+        containerNames: ["sidebar", "content"],
         containerSizes: {
-          xs: '40em',
-          sm: '60em',
-          md: '80em',
+          xs: "40em",
+          sm: "60em",
+          md: "80em",
         },
       },
     },
-  })
+  });
   ```
 
   The default container sizes in the `@pandacss/preset-panda` preset are shown below:
 
   ```ts
   export const containerSizes = {
-    xs: '320px',
-    sm: '384px',
-    md: '448px',
-    lg: '512px',
-    xl: '576px',
-    '2xl': '672px',
-    '3xl': '768px',
-    '4xl': '896px',
-    '5xl': '1024px',
-    '6xl': '1152px',
-    '7xl': '1280px',
-    '8xl': '1440px',
-  }
+    xs: "320px",
+    sm: "384px",
+    md: "448px",
+    lg: "512px",
+    xl: "576px",
+    "2xl": "672px",
+    "3xl": "768px",
+    "4xl": "896px",
+    "5xl": "1024px",
+    "6xl": "1152px",
+    "7xl": "1280px",
+    "8xl": "1440px",
+  };
   ```
 
   Then use them in your styles by referencing using `@<container-name>/<container-size>` syntax:
@@ -7002,10 +7127,10 @@ export default defineConfig({
   css({
     // ✅ this is fine now, will resolve to something like
     // `@container (min-width: 56em)`
-    '@container (min-width: {sizes.4xl})': {
-      color: 'green',
+    "@container (min-width: {sizes.4xl})": {
+      color: "green",
     },
-  })
+  });
   ```
 
   Fix an issue where the curly token references would not be escaped if the token path was not found.
@@ -7044,39 +7169,54 @@ export default defineConfig({
      * Called when the config is resolved, after all the presets are loaded and merged.
      * This is the first hook called, you can use it to tweak the config before the context is created.
      */
-    'config:resolved': (args: { conf: LoadConfigResult }) => MaybeAsyncReturn
+    "config:resolved": (args: { conf: LoadConfigResult }) => MaybeAsyncReturn;
     /**
      * Called when the Panda context has been created and the API is ready to be used.
      */
-    'context:created': (args: { ctx: ApiInterface; logger: LoggerInterface }) => void
+    "context:created": (args: {
+      ctx: ApiInterface;
+      logger: LoggerInterface;
+    }) => void;
     /**
      * Called when the config file or one of its dependencies (imports) has changed.
      */
-    'config:change': (args: { config: UserConfig }) => MaybeAsyncReturn
+    "config:change": (args: { config: UserConfig }) => MaybeAsyncReturn;
     /**
      * Called after reading the file content but before parsing it.
      * You can use this hook to transform the file content to a tsx-friendly syntax so that Panda's parser can parse it.
      * You can also use this hook to parse the file's content on your side using a custom parser, in this case you don't have to return anything.
      */
-    'parser:before': (args: { filePath: string; content: string }) => string | void
+    "parser:before": (args: {
+      filePath: string;
+      content: string;
+    }) => string | void;
     /**
      * Called after the file styles are extracted and processed into the resulting ParserResult object.
      * You can also use this hook to add your own extraction results from your custom parser to the ParserResult object.
      */
-    'parser:after': (args: { filePath: string; result: ParserResultInterface | undefined }) => void
+    "parser:after": (args: {
+      filePath: string;
+      result: ParserResultInterface | undefined;
+    }) => void;
     /**
      * Called after the codegen is completed
      */
-    'codegen:done': () => MaybeAsyncReturn
+    "codegen:done": () => MaybeAsyncReturn;
     /**
      * Called right before adding the design-system CSS (global, static, preflight, tokens, keyframes) to the final CSS
      * Called right before writing/injecting the final CSS (styles.css) that contains the design-system CSS and the parser CSS
      * You can use it to tweak the CSS content before it's written to disk or injected through the postcss plugin.
      */
-    'cssgen:done': (args: {
-      artifact: 'global' | 'static' | 'reset' | 'tokens' | 'keyframes' | 'styles.css'
-      content: string
-    }) => string | void
+    "cssgen:done": (args: {
+      artifact:
+        | "global"
+        | "static"
+        | "reset"
+        | "tokens"
+        | "keyframes"
+        | "styles.css";
+      content: string;
+    }) => string | void;
   }
   ```
 
@@ -7283,11 +7423,11 @@ export default defineConfig({
 - de282f60: Support token reference syntax when authoring styles object, text styles and layer styles.
 
   ```jsx
-  import { css } from '../styled-system/css'
+  import { css } from "../styled-system/css";
 
   const styles = css({
-    border: '2px solid {colors.primary}',
-  })
+    border: "2px solid {colors.primary}",
+  });
   ```
 
   This will resolve the token reference and convert it to css variables.
@@ -7307,18 +7447,18 @@ export default defineConfig({
   ```jsx
   const styles = css({
     // token reference syntax
-    border: '2px solid {colors.primary}',
+    border: "2px solid {colors.primary}",
     // token function syntax
-    border: '2px solid token(colors.primary)',
-  })
+    border: "2px solid token(colors.primary)",
+  });
   ```
 
   However, The `token(...)` syntax allows you to set a fallback value.
 
   ```jsx
   const styles = css({
-    border: '2px solid token(colors.primary, red)',
-  })
+    border: "2px solid token(colors.primary, red)",
+  });
   ```
 
 ### Patch Changes
@@ -7329,8 +7469,8 @@ export default defineConfig({
   ```jsx
   css({
     // This didn't work, but now it does
-    base: { color: 'blue' },
-  })
+    base: { color: "blue" },
+  });
   ```
 
 - Updated dependencies [59fd291c]
@@ -7389,38 +7529,38 @@ export default defineConfig({
 
   ```ts
   const card = defineRecipe({
-    className: 'card',
-    base: { color: 'white' },
+    className: "card",
+    base: { color: "white" },
     variants: {
       size: {
-        small: { fontSize: '14px' },
-        large: { fontSize: '18px' },
+        small: { fontSize: "14px" },
+        large: { fontSize: "18px" },
       },
       visual: {
-        primary: { backgroundColor: 'blue' },
-        secondary: { backgroundColor: 'gray' },
+        primary: { backgroundColor: "blue" },
+        secondary: { backgroundColor: "gray" },
       },
     },
-  })
+  });
 
   export default defineConfig({
     // ...
     staticCss: {
       recipes: {
-        card: ['*'], // this
+        card: ["*"], // this
 
         // was equivalent to:
         card: [
           // notice how `responsive: true` was implicitly added
-          { size: ['*'], responsive: true },
-          { visual: ['*'], responsive: true },
+          { size: ["*"], responsive: true },
+          { visual: ["*"], responsive: true },
         ],
 
         //   will now correctly be equivalent to:
-        card: [{ size: ['*'] }, { visual: ['*'] }],
+        card: [{ size: ["*"] }, { visual: ["*"] }],
       },
     },
-  })
+  });
   ```
 
   Here's the diff in the generated CSS:
@@ -7546,30 +7686,30 @@ export default defineConfig({
   another file, such as when using `Ark-UI` like `import { comboboxAnatomy } from '@ark-ui/anatomy'`
 
   ```ts
-  import { sva } from '../styled-system/css'
-  import { slots } from './slots'
+  import { sva } from "../styled-system/css";
+  import { slots } from "./slots";
 
   const card = sva({
     slots, // ❌ did NOT work -> ✅ will now work as expected
     base: {
       root: {
-        p: '6',
-        m: '4',
-        w: 'md',
-        boxShadow: 'md',
-        borderRadius: 'md',
-        _dark: { bg: '#262626', color: 'white' },
+        p: "6",
+        m: "4",
+        w: "md",
+        boxShadow: "md",
+        borderRadius: "md",
+        _dark: { bg: "#262626", color: "white" },
       },
       content: {
-        textStyle: 'lg',
+        textStyle: "lg",
       },
       title: {
-        textStyle: 'xl',
-        fontWeight: 'semibold',
-        pb: '2',
+        textStyle: "xl",
+        fontWeight: "semibold",
+        pb: "2",
       },
     },
-  })
+  });
   ```
 
 - 840ed66b: Fix an issue with config change detection when using a custom `config.slotRecipes[xxx].jsx` array
@@ -7626,18 +7766,18 @@ export default defineConfig({
   and suffixing with `]`, e.g. writing `[123px]` as a value will bypass the token validation.
 
   ```ts
-  import { css } from '../styled-system/css'
+  import { css } from "../styled-system/css";
 
   css({
     // @ts-expect-error TS will throw when using from strictTokens: true
-    color: '#fff',
+    color: "#fff",
     // @ts-expect-error TS will throw when using from strictTokens: true
-    width: '100px',
+    width: "100px",
 
     // ✅ but this is now allowed:
-    bgColor: '[rgb(51 155 240)]',
-    fontSize: '[12px]',
-  })
+    bgColor: "[rgb(51 155 240)]",
+    fontSize: "[12px]",
+  });
   ```
 
 ### Patch Changes
@@ -7650,8 +7790,8 @@ export default defineConfig({
     // here the content property is a valid CSS property, so Panda will try to generate the CSS for it
     // but since it's an URL, it would produce invalid CSS
     // we now check if the property value is an URL and skip it if needed
-    return <CopyButton content="https://www.buymeacoffee.com/grizzlycodes" />
-  }
+    return <CopyButton content="https://www.buymeacoffee.com/grizzlycodes" />;
+  };
   ```
 
 - d81dcbe6: - Fix an issue where recipe variants that clash with utility shorthand don't get generated due to the
@@ -7660,36 +7800,36 @@ export default defineConfig({
 - 105f74ce: Add a way to specify a recipe's `staticCss` options from inside a recipe config, e.g.:
 
   ```js
-  import { defineRecipe } from '@pandacss/dev'
+  import { defineRecipe } from "@pandacss/dev";
 
   const card = defineRecipe({
-    className: 'card',
-    base: { color: 'white' },
+    className: "card",
+    base: { color: "white" },
     variants: {
       size: {
-        small: { fontSize: '14px' },
-        large: { fontSize: '18px' },
+        small: { fontSize: "14px" },
+        large: { fontSize: "18px" },
       },
     },
-    staticCss: [{ size: ['*'] }],
-  })
+    staticCss: [{ size: ["*"] }],
+  });
   ```
 
   would be the equivalent of defining it inside the main config:
 
   ```js
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
     staticCss: {
       recipes: {
         card: {
-          size: ['*'],
+          size: ["*"],
         },
       },
     },
-  })
+  });
   ```
 
 - Updated dependencies [26e6051a]
@@ -7721,13 +7861,13 @@ export default defineConfig({
 
   ```ts
   css({
-    '@container (min-width: token(sizes.xl))': {
-      color: 'green.300',
+    "@container (min-width: token(sizes.xl))": {
+      color: "green.300",
     },
-    '@media (min-width: token(sizes.2xl))': {
-      color: 'red.300',
+    "@media (min-width: token(sizes.2xl))": {
+      color: "red.300",
     },
-  })
+  });
   ```
 
 - Updated dependencies [24ee49a5]
@@ -7779,14 +7919,14 @@ export default defineConfig({
 - 8c76cd0f: - Fix issue where `hideBelow` breakpoints are inclusive of the specified breakpoints
 
   ```jsx
-  css({ hideBelow: 'lg' })
+  css({ hideBelow: "lg" });
   // => @media screen and (max-width: 63.9975em) { background: red; }
   ```
 
   - Support arbitrary breakpoints in `hideBelow` and `hideFrom` utilities
 
   ```jsx
-  css({ hideFrom: '800px' })
+  css({ hideFrom: "800px" });
   // => @media screen and (min-width: 800px) { background: red; }
   ```
 
@@ -7872,10 +8012,10 @@ export default defineConfig({
 
   ```ts
   const button = defineSlotRecipe({
-    className: 'button',
-    slots: ['root', 'icon', 'label'],
+    className: "button",
+    slots: ["root", "icon", "label"],
     // ...
-  })
+  });
   ```
 
   will have a default `jsx` property of: `[Button, Button.Root, Button.Icon, Button.Label]`
@@ -7932,42 +8072,42 @@ export default defineConfig({
 
   ```ts
   export default defineConfig({
-    outdir: './outdir',
+    outdir: "./outdir",
     importMap: {
-      css: '#panda/styled-system/css',
-      recipes: '#panda/styled-system/recipes',
-      patterns: '#panda/styled-system/patterns',
-      jsx: '#panda/styled-system/jsx',
+      css: "#panda/styled-system/css",
+      recipes: "#panda/styled-system/recipes",
+      patterns: "#panda/styled-system/patterns",
+      jsx: "#panda/styled-system/jsx",
     },
-  })
+  });
   ```
 
   Or you could also make your outdir an actual package from your monorepo:
 
   ```ts
   export default defineConfig({
-    outdir: '../packages/styled-system',
+    outdir: "../packages/styled-system",
     importMap: {
-      css: '@monorepo/styled-system',
-      recipes: '@monorepo/styled-system',
-      patterns: '@monorepo/styled-system',
-      jsx: '@monorepo/styled-system',
+      css: "@monorepo/styled-system",
+      recipes: "@monorepo/styled-system",
+      patterns: "@monorepo/styled-system",
+      jsx: "@monorepo/styled-system",
     },
-  })
+  });
   ```
 
   Working with tsconfig paths aliases is easy:
 
   ```ts
   export default defineConfig({
-    outdir: 'styled-system',
+    outdir: "styled-system",
     importMap: {
-      css: 'styled-system/css',
-      recipes: 'styled-system/recipes',
-      patterns: 'styled-system/patterns',
-      jsx: 'styled-system/jsx',
+      css: "styled-system/css",
+      recipes: "styled-system/recipes",
+      patterns: "styled-system/patterns",
+      jsx: "styled-system/jsx",
     },
-  })
+  });
   ```
 
 - Updated dependencies [95b06bb1]
@@ -7997,13 +8137,13 @@ export default defineConfig({
 - 848936e0: Allow referencing tokens with the `token()` function in media queries or any other CSS at-rule.
 
   ```js
-  import { css } from '../styled-system/css'
+  import { css } from "../styled-system/css";
 
   const className = css({
-    '@media screen and (min-width: token(sizes.4xl))': {
-      color: 'green.400',
+    "@media screen and (min-width: token(sizes.4xl))": {
+      color: "green.400",
     },
-  })
+  });
   ```
 
 - Updated dependencies [26f6982c]
@@ -8056,7 +8196,7 @@ export default defineConfig({
 
   ```css
   * {
-    color: token('colors.magenta', pink);
+    color: token("colors.magenta", pink);
   }
   ```
 
@@ -8165,12 +8305,12 @@ export default defineConfig({
   **Definition**
 
   ```jsx
-  import { sva } from 'styled-system/css'
+  import { sva } from "styled-system/css";
 
   const button = sva({
-    slots: ['label', 'icon'],
+    slots: ["label", "icon"],
     base: {
-      label: { color: 'red', textDecoration: 'underline' },
+      label: { color: "red", textDecoration: "underline" },
     },
     variants: {
       rounded: {
@@ -8178,33 +8318,33 @@ export default defineConfig({
       },
       size: {
         sm: {
-          label: { fontSize: 'sm' },
-          icon: { fontSize: 'sm' },
+          label: { fontSize: "sm" },
+          icon: { fontSize: "sm" },
         },
         lg: {
-          label: { fontSize: 'lg' },
-          icon: { fontSize: 'lg', color: 'pink' },
+          label: { fontSize: "lg" },
+          icon: { fontSize: "lg", color: "pink" },
         },
       },
     },
     defaultVariants: {
-      size: 'sm',
+      size: "sm",
     },
-  })
+  });
   ```
 
   **Usage**
 
   ```jsx
   export function App() {
-    const btnClass = button({ size: 'lg', rounded: true })
+    const btnClass = button({ size: "lg", rounded: true });
 
     return (
       <button>
         <p class={btnClass.label}> Label</p>
         <p class={btnClass.icon}> Icon</p>
       </button>
-    )
+    );
   }
   ```
 
@@ -8253,26 +8393,26 @@ export default defineConfig({
   Update the `jsx` property to be used for advanced tracking of custom pattern components.
 
   ```jsx
-  import { Circle } from 'styled-system/jsx'
+  import { Circle } from "styled-system/jsx";
   const CustomCircle = ({ children, ...props }) => {
-    return <Circle {...props}>{children}</Circle>
-  }
+    return <Circle {...props}>{children}</Circle>;
+  };
   ```
 
   To track the `CustomCircle` component, you can now use the `jsx` property.
 
   ```js
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     patterns: {
       extend: {
         circle: {
-          jsx: ['CustomCircle'],
+          jsx: ["CustomCircle"],
         },
       },
     },
-  })
+  });
   ```
 
 ### Patch Changes
@@ -8336,9 +8476,17 @@ export default defineConfig({
   ```tsx
   const ComponentWithMultipleRecipes = ({ variant }) => {
     return (
-      <button className={cx(pinkRecipe({ variant }), greenRecipe({ variant }), blueRecipe({ variant }))}>Hello</button>
-    )
-  }
+      <button
+        className={cx(
+          pinkRecipe({ variant }),
+          greenRecipe({ variant }),
+          blueRecipe({ variant }),
+        )}
+      >
+        Hello
+      </button>
+    );
+  };
   ```
 
   Given a `panda.config.ts` with recipes each including a common `jsx` tag name, such as:
@@ -8405,7 +8553,7 @@ export default defineConfig({
   ```ts
   staticCss: {
     recipes: {
-      button: [{ size: ['*'], shape: ['*'] }]
+      button: [{ size: ["*"], shape: ["*"] }];
     }
   }
   ```
@@ -8415,7 +8563,7 @@ export default defineConfig({
   ```ts
   staticCss: {
     recipes: {
-      button: ['*']
+      button: ["*"];
     }
   }
   ```
@@ -8451,12 +8599,12 @@ export default defineConfig({
 - 5b344b9c: Add support for disabling shorthand props
 
   ```ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
     shorthands: false,
-  })
+  });
   ```
 
 ### Patch Changes
diff --git a/packages/core/package.json b/packages/core/package.json
index 330b6c601..28226637d 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/core",
-  "version": "0.38.0",
+  "version": "0.39.0",
   "description": "core functions for extract-it",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
diff --git a/packages/extractor/CHANGELOG.md b/packages/extractor/CHANGELOG.md
index 60a325592..88d2dfc92 100644
--- a/packages/extractor/CHANGELOG.md
+++ b/packages/extractor/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @pandacss/extractor
 
+## 0.39.0
+
+### Patch Changes
+
+- Updated dependencies [935ec86]
+  - @pandacss/shared@0.39.0
+
 ## 0.38.0
 
 ### Patch Changes
@@ -58,18 +65,18 @@
 - 0bf09f2: Allow using namespaced imports
 
   ```ts
-  import * as p from 'styled-system/patterns'
-  import * as recipes from 'styled-system/recipes'
-  import * as panda from 'styled-system/css'
+  import * as p from "styled-system/patterns";
+  import * as recipes from "styled-system/recipes";
+  import * as panda from "styled-system/css";
 
   // this will now be extracted
-  p.stack({ mt: '40px' })
+  p.stack({ mt: "40px" });
 
-  recipes.cardStyle({ rounded: true })
+  recipes.cardStyle({ rounded: true });
 
-  panda.css({ color: 'red' })
-  panda.cva({ base: { color: 'blue' } })
-  panda.sva({ base: { root: { color: 'green' } } })
+  panda.css({ color: "red" });
+  panda.cva({ base: { color: "blue" } });
+  panda.sva({ base: { root: { color: "green" } } });
   ```
 
   - @pandacss/shared@0.34.2
@@ -216,8 +223,8 @@
         {/* ✅ this was fine */}
         <Stack ml="4" icon={<div className="icon" />} />
       </>
-    )
-  }
+    );
+  };
   ```
 
   Now both will be fine again.
@@ -258,11 +265,11 @@
 
   ```ts
   enum Color {
-    Red = 'red.400',
-    Blue = 'blue.400',
+    Red = "red.400",
+    Blue = "blue.400",
   }
 
-  const className = css({ color: Color.Red, backgroundColor: Color['Blue'] })
+  const className = css({ color: Color.Red, backgroundColor: Color["Blue"] });
   ```
 
 ## 0.17.0
@@ -364,20 +371,20 @@
   so this will now work:
 
   ```ts
-  import { css } from 'styled-system/css'
+  import { css } from "styled-system/css";
 
   const paragraphSpacingStyle = css.raw({
-    '&:not(:first-child)': { marginBlockEnd: '1em' },
-  })
+    "&:not(:first-child)": { marginBlockEnd: "1em" },
+  });
 
   export const proseCss = css.raw({
-    maxWidth: '800px',
-    '& p': {
-      '&:not(:first-child)': { marginBlockStart: '1em' },
+    maxWidth: "800px",
+    "& p": {
+      "&:not(:first-child)": { marginBlockStart: "1em" },
     },
-    '& h1': paragraphSpacingStyle,
-    '& h2': paragraphSpacingStyle,
-  })
+    "& h1": paragraphSpacingStyle,
+    "& h2": paragraphSpacingStyle,
+  });
   ```
 
   & use ECMA preset for ts-evaluator: This means that no other globals than those that are defined in the ECMAScript
@@ -385,35 +392,35 @@
   this:
 
   ```ts
-  import { cva } from '.panda/css'
+  import { cva } from ".panda/css";
 
   const variants = () => {
     const spacingTokens = Object.entries({
-      s: 'token(spacing.1)',
-      m: 'token(spacing.2)',
-      l: 'token(spacing.3)',
-    })
+      s: "token(spacing.1)",
+      m: "token(spacing.2)",
+      l: "token(spacing.3)",
+    });
 
     const spacingProps = {
-      px: 'paddingX',
-      py: 'paddingY',
-    }
+      px: "paddingX",
+      py: "paddingY",
+    };
 
     // Generate variants programmatically
     return Object.entries(spacingProps)
       .map(([name, styleProp]) => {
         const variants = spacingTokens
           .map(([variant, token]) => ({ [variant]: { [styleProp]: token } }))
-          .reduce((_agg, kv) => ({ ..._agg, ...kv }))
+          .reduce((_agg, kv) => ({ ..._agg, ...kv }));
 
-        return { [name]: variants }
+        return { [name]: variants };
       })
-      .reduce((_agg, kv) => ({ ..._agg, ...kv }))
-  }
+      .reduce((_agg, kv) => ({ ..._agg, ...kv }));
+  };
 
   const baseStyle = cva({
     variants: variants(),
-  })
+  });
   ```
 
 ## 0.15.0
@@ -425,8 +432,8 @@
 
   ```ts
   const className = css({
-    color: ['black', undefined, 'orange', 'red'],
-  })
+    color: ["black", undefined, "orange", "red"],
+  });
   ```
 
 - 7c1ab170: Fix issue where the `satisfies` would prevent an object from being extracted
@@ -461,8 +468,12 @@
 
   ```tsx
   const CompB = ({ disabled = false }: { disabled: boolean }) => {
-    return <div className={css({ color: disabled ? 'blue' : 'yellow' })}>Component B is disabled</div>
-  }
+    return (
+      <div className={css({ color: disabled ? "blue" : "yellow" })}>
+        Component B is disabled
+      </div>
+    );
+  };
   ```
 
 ## 0.8.0
@@ -534,11 +545,16 @@
 - 21295f2e: Resolve identifier default value from parameter, code like `position` and `inset` here:
 
   ```tsx
-  export const Positioned: React.FC<PositionedProps> = ({ children, position = 'absolute', inset = 0, ...rest }) => (
+  export const Positioned: React.FC<PositionedProps> = ({
+    children,
+    position = "absolute",
+    inset = 0,
+    ...rest
+  }) => (
     <styled.div position={position} inset={inset} {...rest}>
       {children}
     </styled.div>
-  )
+  );
   ```
 
   - @pandacss/logger@0.6.0
@@ -658,16 +674,16 @@
   this was fine:
 
   ```ts
-  const aliased = 'green.600'
-  const colorMap = { aliased }
-  const className = css({ color: colorMap['aliased'] })
+  const aliased = "green.600";
+  const colorMap = { aliased };
+  const className = css({ color: colorMap["aliased"] });
   ```
 
   this was not (weirdly):
 
   ```ts
-  const color = 'green.600'
-  const className = css({ color })
+  const color = "green.600";
+  const className = css({ color });
   ```
 
 - Updated dependencies [f9247e52]
@@ -688,8 +704,8 @@
   // panda.config.ts
   export default defineConfig({
     //...
-    syntax: 'template-literal',
-  })
+    syntax: "template-literal",
+  });
   ```
 
   > For existing projects, you might need to run the `panda codegen --clean`
diff --git a/packages/extractor/package.json b/packages/extractor/package.json
index 16a0366cc..0e4aa4df8 100644
--- a/packages/extractor/package.json
+++ b/packages/extractor/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/extractor",
-  "version": "0.38.0",
+  "version": "0.39.0",
   "description": "The css extractor for css panda",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
diff --git a/packages/generator/CHANGELOG.md b/packages/generator/CHANGELOG.md
index 30861cc33..3ddf4d173 100644
--- a/packages/generator/CHANGELOG.md
+++ b/packages/generator/CHANGELOG.md
@@ -1,5 +1,84 @@
 # @pandacss/generator
 
+## 0.39.0
+
+### Minor Changes
+
+- df2546a: **BREAKING 💥**
+
+  Remove `linkBox` pattern in favor of using adding `position: relative` when using the `linkOverlay` pattern.
+
+  **Before**
+
+  ```jsx
+  import { linkBox, linkOverlay } from "styled-system/patterns";
+
+  const App = () => {
+    return (
+      <div className={linkBox()}>
+        <img src="https://via.placeholder.com/150" alt="placeholder" />
+        <a href="#" className={linkOverlay()}>
+          Link
+        </a>
+      </div>
+    );
+  };
+  ```
+
+  **After**
+
+  ```jsx
+  import { css } from "styled-system/css";
+  import { linkOverlay } from "styled-system/patterns";
+
+  const App = () => {
+    return (
+      <div className={css({ pos: "relative" })}>
+        <img src="https://via.placeholder.com/150" alt="placeholder" />
+        <a href="#" className={linkOverlay()}>
+          Link
+        </a>
+      </div>
+    );
+  };
+  ```
+
+- 221c9a2: Add support for more typography related properties in text styles such as `fontFeatureSettings`, `fontPalette`, etc.
+
+### Patch Changes
+
+- 0714f31: Fix issue where `mergeCss` import in `styled-system/jsx/*` could be unused.
+- 2116abe: Fix issue where `float` property did not allow inherited values (auto, initial, none, etc.)
+- c3e797e: Fix issue where `animationName` property was not connected to `theme.keyframes`, as a result, no autocompletion was
+  available.
+- 935ec86: Allow passing arrays of `SystemStyleObject` to the `css(xxx, [aaa, bbb, ccc], yyy)` fn
+
+  This is useful when you are creating your own styled component and want to benefit
+  [from the recent `css` array property support](https://github.com/chakra-ui/panda/pull/2515).
+
+  ```diff
+  import { css } from 'styled-system/css'
+  import type { HTMLStyledProps } from 'styled-system/types'
+
+  type ButtonProps = HTMLStyledProps<'button'>
+
+  export const Button = ({ css: cssProp = {}, children }: ButtonProps) => {
+  -  const className = css(...(Array.isArray(cssProp) ? cssProp : [cssProp]))
+  +  const className = css(cssProp)
+    return <button className={className}>{children}</button>
+  }
+  ```
+
+- Updated dependencies [221c9a2]
+- Updated dependencies [c3e797e]
+- Updated dependencies [935ec86]
+  - @pandacss/types@0.39.0
+  - @pandacss/core@0.39.0
+  - @pandacss/shared@0.39.0
+  - @pandacss/logger@0.39.0
+  - @pandacss/token-dictionary@0.39.0
+  - @pandacss/is-valid-prop@0.39.0
+
 ## 0.38.0
 
 ### Minor Changes
@@ -17,11 +96,11 @@
       ta: {
         deprecated: true,
         transform(value) {
-          return { textAlign: value }
+          return { textAlign: value };
         },
       },
     },
-  })
+  });
   ```
 
   **Deprecating a token**
@@ -31,11 +110,11 @@
     theme: {
       tokens: {
         spacing: {
-          lg: { value: '8px', deprecated: 'use `8` instead' },
+          lg: { value: "8px", deprecated: "use `8` instead" },
         },
       },
     },
-  })
+  });
   ```
 
   **Deprecating a pattern**
@@ -47,7 +126,7 @@
         deprecated: true,
       },
     },
-  })
+  });
   ```
 
   **Deprecating a recipe**
@@ -57,11 +136,11 @@
     theme: {
       recipes: {
         btn: {
-          deprecated: 'will be removed in v2.0',
+          deprecated: "will be removed in v2.0",
         },
       },
     },
-  })
+  });
   ```
 
   ### ESLint Plugin
@@ -85,23 +164,28 @@
   This makes it even easier to merge styles from multiple sources.
 
   ```tsx
-  import { Stack, styled } from '../styled-system/jsx'
+  import { Stack, styled } from "../styled-system/jsx";
 
   const HeroSection = (props) => {
     return (
-      <Stack css={[{ color: 'blue.300', padding: '4' }, props.css]}>
-        <styled.div css={[{ fontSize: '2xl' }, props.hero]}>Hero Section</styled.div>
+      <Stack css={[{ color: "blue.300", padding: "4" }, props.css]}>
+        <styled.div css={[{ fontSize: "2xl" }, props.hero]}>
+          Hero Section
+        </styled.div>
       </Stack>
-    )
-  }
+    );
+  };
 
   const App = () => {
     return (
       <>
-        <HeroSection css={{ backgroundColor: 'yellow.300' }} hero={css.raw({ fontSize: '4xl', color: 'red.300' })} />
+        <HeroSection
+          css={{ backgroundColor: "yellow.300" }}
+          hero={css.raw({ fontSize: "4xl", color: "red.300" })}
+        />
       </>
-    )
-  }
+    );
+  };
   ```
 
   should render something like:
@@ -271,21 +355,21 @@
 - 99870bb: Fix issue where setting the pattern `jsx` option with dot notation didn't work.
 
   ```jsx
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
     patterns: {
       extend: {
         grid: {
-          jsx: ['Form.Group', 'Grid'],
+          jsx: ["Form.Group", "Grid"],
         },
         stack: {
-          jsx: ['Form.Action', 'Stack'],
+          jsx: ["Form.Action", "Stack"],
         },
       },
     },
-  })
+  });
   ```
 
 - Updated dependencies [93dc9f5]
@@ -328,9 +412,9 @@
     useful when applying negative margin to child elements.
 
   ```tsx
-  <div className={flex({ spaceX: '-1' })}>
-    <div className={circle({ size: '5', bg: 'red' })} />
-    <div className={circle({ size: '5', bg: 'pink' })} />
+  <div className={flex({ spaceX: "-1" })}>
+    <div className={circle({ size: "5", bg: "red" })} />
+    <div className={circle({ size: "5", bg: "pink" })} />
   </div>
   ```
 
@@ -342,13 +426,13 @@
   ```tsx
   <div
     className={css({
-      bgGradient: 'to-r',
+      bgGradient: "to-r",
       // from
-      gradientFrom: 'red',
-      gradientFromPosition: 'top left',
+      gradientFrom: "red",
+      gradientFromPosition: "top left",
       // to
-      gradientTo: 'blue',
-      gradientToPosition: 'bottom right',
+      gradientTo: "blue",
+      gradientToPosition: "bottom right",
     })}
   />
   ```
@@ -394,7 +478,7 @@
 
   ```ts
   // panda.config.ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
@@ -403,15 +487,15 @@
       extend: {
         tokens: {
           colors: {
-            text: { value: 'blue' },
+            text: { value: "blue" },
           },
         },
         semanticTokens: {
           colors: {
             body: {
               value: {
-                base: '{colors.blue.600}',
-                _osDark: '{colors.blue.400}',
+                base: "{colors.blue.600}",
+                _osDark: "{colors.blue.400}",
               },
             },
           },
@@ -423,16 +507,16 @@
       primary: {
         tokens: {
           colors: {
-            text: { value: 'red' },
+            text: { value: "red" },
           },
         },
         semanticTokens: {
           colors: {
-            muted: { value: '{colors.red.200}' },
+            muted: { value: "{colors.red.200}" },
             body: {
               value: {
-                base: '{colors.red.600}',
-                _osDark: '{colors.red.400}',
+                base: "{colors.red.600}",
+                _osDark: "{colors.red.400}",
               },
             },
           },
@@ -441,23 +525,23 @@
       secondary: {
         tokens: {
           colors: {
-            text: { value: 'blue' },
+            text: { value: "blue" },
           },
         },
         semanticTokens: {
           colors: {
-            muted: { value: '{colors.blue.200}' },
+            muted: { value: "{colors.blue.200}" },
             body: {
               value: {
-                base: '{colors.blue.600}',
-                _osDark: '{colors.blue.400}',
+                base: "{colors.blue.600}",
+                _osDark: "{colors.blue.400}",
               },
             },
           },
         },
       },
     },
-  })
+  });
   ```
 
   ### Pregenerating themes
@@ -467,14 +551,14 @@
 
   ```ts
   // panda.config.ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
     staticCss: {
-      themes: ['primary', 'secondary'],
+      themes: ["primary", "secondary"],
     },
-  })
+  });
   ```
 
   This will generate the following CSS:
@@ -486,7 +570,7 @@
       --colors-body: var(--colors-blue-600);
     }
 
-    [data-panda-theme='primary'] {
+    [data-panda-theme="primary"] {
       --colors-text: red;
       --colors-muted: var(--colors-red-200);
       --colors-body: var(--colors-red-600);
@@ -497,7 +581,7 @@
         --colors-body: var(--colors-blue-400);
       }
 
-      [data-panda-theme='primary'] {
+      [data-panda-theme="primary"] {
         --colors-body: var(--colors-red-400);
       }
     }
@@ -528,9 +612,9 @@
   Dynamically import a theme using its name:
 
   ```ts
-  import { getTheme } from '../styled-system/themes'
+  import { getTheme } from "../styled-system/themes";
 
-  const theme = await getTheme('red')
+  const theme = await getTheme("red");
   //    ^? {
   //     name: "red";
   //     id: string;
@@ -541,10 +625,10 @@
   Inject the theme styles into the DOM:
 
   ```ts
-  import { injectTheme } from '../styled-system/themes'
+  import { injectTheme } from "../styled-system/themes";
 
-  const theme = await getTheme('red')
-  injectTheme(document.documentElement, theme) // this returns the injected style element
+  const theme = await getTheme("red");
+  injectTheme(document.documentElement, theme); // this returns the injected style element
   ```
 
   ***
@@ -553,54 +637,62 @@
 
   ```tsx
   // app/layout.tsx
-  import { Inter } from 'next/font/google'
-  import { cookies } from 'next/headers'
-  import { ThemeName, getTheme } from '../../styled-system/themes'
-
-  export default async function RootLayout({ children }: { children: React.ReactNode }) {
-    const store = cookies()
-    const themeName = store.get('theme')?.value as ThemeName
-    const theme = themeName && (await getTheme(themeName))
+  import { Inter } from "next/font/google";
+  import { cookies } from "next/headers";
+  import { ThemeName, getTheme } from "../../styled-system/themes";
+
+  export default async function RootLayout({
+    children,
+  }: {
+    children: React.ReactNode;
+  }) {
+    const store = cookies();
+    const themeName = store.get("theme")?.value as ThemeName;
+    const theme = themeName && (await getTheme(themeName));
 
     return (
       <html lang="en" data-panda-theme={themeName ? themeName : undefined}>
         {themeName && (
           <head>
-            <style type="text/css" id={theme.id} dangerouslySetInnerHTML={{ __html: theme.css }} />
+            <style
+              type="text/css"
+              id={theme.id}
+              dangerouslySetInnerHTML={{ __html: theme.css }}
+            />
           </head>
         )}
         <body>{children}</body>
       </html>
-    )
+    );
   }
 
   // app/page.tsx
-  import { getTheme, injectTheme } from '../../styled-system/themes'
+  import { getTheme, injectTheme } from "../../styled-system/themes";
 
   export default function Home() {
     return (
       <>
         <button
           onClick={async () => {
-            const current = document.documentElement.dataset.pandaTheme
-            const next = current === 'primary' ? 'secondary' : 'primary'
-            const theme = await getTheme(next)
-            setCookie('theme', next, 7)
-            injectTheme(document.documentElement, theme)
+            const current = document.documentElement.dataset.pandaTheme;
+            const next = current === "primary" ? "secondary" : "primary";
+            const theme = await getTheme(next);
+            setCookie("theme", next, 7);
+            injectTheme(document.documentElement, theme);
           }}
         >
           swap theme
         </button>
       </>
-    )
+    );
   }
 
   // Set a Cookie
   function setCookie(cName: string, cValue: any, expDays: number) {
-    let date = new Date()
-    date.setTime(date.getTime() + expDays * 24 * 60 * 60 * 1000)
-    const expires = 'expires=' + date.toUTCString()
-    document.cookie = cName + '=' + cValue + '; ' + expires + '; path=/'
+    let date = new Date();
+    date.setTime(date.getTime() + expDays * 24 * 60 * 60 * 1000);
+    const expires = "expires=" + date.toUTCString();
+    document.cookie = cName + "=" + cValue + "; " + expires + "; path=/";
   }
   ```
 
@@ -609,18 +701,18 @@
   Finally, you can create a theme contract to ensure that all themes have the same structure:
 
   ```ts
-  import { defineThemeContract } from '@pandacss/dev'
+  import { defineThemeContract } from "@pandacss/dev";
 
   const defineTheme = defineThemeContract({
     tokens: {
       colors: {
-        red: { value: '' }, // theme implementations must have a red color
+        red: { value: "" }, // theme implementations must have a red color
       },
     },
-  })
+  });
 
   defineTheme({
-    selector: '.theme-secondary',
+    selector: ".theme-secondary",
     tokens: {
       colors: {
         // ^^^^   Property 'red' is missing in type '{}' but required in type '{ red: { value: string; }; }'
@@ -629,7 +721,7 @@
         // red: { value: 'red' },
       },
     },
-  })
+  });
   ```
 
 - fabdabe: ## Changes
@@ -649,12 +741,12 @@
     theme: {
       extend: {
         colors: {
-          primary: { value: 'blue' },
+          primary: { value: "blue" },
         },
         // borderWidths: {}, // ⚠️ nothing defined here
       },
     },
-  })
+  });
   ```
 
   ```ts
@@ -665,8 +757,8 @@
 
     // ✅ after this PR, TS will not throw an error anymore as you don't have any `borderWidths` tokens
     // if you add one, this will error again (as it's supposed to)
-    borderWidths: '123px',
-  })
+    borderWidths: "123px",
+  });
   ```
 
   ## Description
@@ -693,63 +785,63 @@
   Example:
 
   ```ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
     globalVars: {
-      '--some-color': 'red',
-      '--button-color': {
-        syntax: '<color>',
+      "--some-color": "red",
+      "--button-color": {
+        syntax: "<color>",
         inherits: false,
-        initialValue: 'blue',
+        initialValue: "blue",
       },
     },
-  })
+  });
   ```
 
   > Note: Keys defined in `globalVars` will be available as a value for _every_ utilities, as they're not bound to token
   > categories.
 
   ```ts
-  import { css } from '../styled-system/css'
+  import { css } from "../styled-system/css";
 
   const className = css({
-    '--button-color': 'colors.red.300',
+    "--button-color": "colors.red.300",
     // ^^^^^^^^^^^^  will be suggested
 
-    backgroundColor: 'var(--button-color)',
+    backgroundColor: "var(--button-color)",
     //                ^^^^^^^^^^^^^^^^^^  will be suggested
-  })
+  });
   ```
 
 - 656ff02: Fix `strictPropertyValues` typings should allow for `CssVars` (either predefined from `globalVars` or any
   custom CSS variable)
 
   ```ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
     strictPropertyValues: true,
     globalVars: {
       extend: {
-        '--some-color': 'red',
-        '--button-color': {
-          syntax: '<color>',
+        "--some-color": "red",
+        "--button-color": {
+          syntax: "<color>",
           inherits: false,
-          initialValue: 'blue',
+          initialValue: "blue",
         },
       },
     },
-  })
+  });
   ```
 
   ```ts
   css({
     // ❌ was not allowed before when `strictPropertyValues` was enabled
-    display: 'var(--button-color)', // ✅ will now be allowed/suggested
-  })
+    display: "var(--button-color)", // ✅ will now be allowed/suggested
+  });
   ```
 
   If no `globalVars` are defined, any `var(--*)` will be allowed
@@ -757,8 +849,8 @@
   ```ts
   css({
     // ✅ will be allowed
-    display: 'var(--xxx)',
-  })
+    display: "var(--xxx)",
+  });
   ```
 
 - 340f4f1: Fix `Expression produces a union type that is too complex to represent` with `splitCssProps` because of
@@ -787,21 +879,21 @@
   export default defineConfig({
     semanticTokens: {
       colors: {
-        blue: { value: 'blue' },
+        blue: { value: "blue" },
         green: {
           value: {
-            base: 'green',
-            _dark: 'white',
+            base: "green",
+            _dark: "white",
           },
         },
         red: {
           value: {
-            base: 'red',
+            base: "red",
           },
         },
       },
     },
-  })
+  });
   ```
 
   This is the output of the `styled-system/token` JS token function:
@@ -830,32 +922,32 @@
   Each slot will contain a `${className}__${slotName}` class in addition to the atomic styles.
 
   ```tsx
-  import { sva } from '../styled-system/css'
+  import { sva } from "../styled-system/css";
 
   const button = sva({
-    className: 'btn',
-    slots: ['root', 'text'],
+    className: "btn",
+    slots: ["root", "text"],
     base: {
       root: {
-        bg: 'blue.500',
+        bg: "blue.500",
         _hover: {
           // v--- 🎯 this will target the `text` slot
-          '& .btn__text': {
-            color: 'white',
+          "& .btn__text": {
+            color: "white",
           },
         },
       },
     },
-  })
+  });
 
   export const App = () => {
-    const classes = button()
+    const classes = button();
     return (
       <div className={classes.root}>
         <div className={classes.text}>Click me</div>
       </div>
-    )
-  }
+    );
+  };
   ```
 
 - Updated dependencies [f2fdc48]
@@ -879,11 +971,11 @@
 - 4576a60: Fix nested `styled` factory composition
 
   ```tsx
-  import { styled } from '../styled-system/jsx'
+  import { styled } from "../styled-system/jsx";
 
-  const BasicBox = styled('div', { base: { fontSize: '10px' } })
-  const ExtendedBox1 = styled(BasicBox, { base: { fontSize: '20px' } })
-  const ExtendedBox2 = styled(ExtendedBox1, { base: { fontSize: '30px' } })
+  const BasicBox = styled("div", { base: { fontSize: "10px" } });
+  const ExtendedBox1 = styled(BasicBox, { base: { fontSize: "20px" } });
+  const ExtendedBox2 = styled(ExtendedBox1, { base: { fontSize: "30px" } });
 
   export const App = () => {
     return (
@@ -896,8 +988,8 @@
         {/* NOW: ✅ fs_30px */}
         <ExtendedBox2>text3</ExtendedBox2>
       </>
-    )
-  }
+    );
+  };
   ```
 
   - @pandacss/core@0.34.3
@@ -918,12 +1010,12 @@
   `Style` like `borderTopStyle`.
 
   ```ts
-  import { css } from '../styled-system/css'
+  import { css } from "../styled-system/css";
 
   css({
-    borderTop: '1px solid red', // ✅ will now be fine as it should be
-    borderTopStyle: 'abc', // ✅ will still report a TS error
-  })
+    borderTop: "1px solid red", // ✅ will now be fine as it should be
+    borderTopStyle: "abc", // ✅ will still report a TS error
+  });
   ```
 
   ```diff
@@ -1019,18 +1111,18 @@
 - d4942e0: Fix the color opacity modifier syntax for `semanticTokens` inside of conditions
 
   ```ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     conditions: {
-      light: '.light &',
-      dark: '.dark &',
+      light: ".light &",
+      dark: ".dark &",
     },
     theme: {
       tokens: {
         colors: {
-          blue: { 500: { value: 'blue' } },
-          green: { 500: { value: 'green' } },
+          blue: { 500: { value: "blue" } },
+          green: { 500: { value: "green" } },
         },
         opacity: {
           half: { value: 0.5 },
@@ -1040,15 +1132,15 @@
         colors: {
           secondary: {
             value: {
-              base: 'red',
-              _light: '{colors.blue.500/32}', // <-- wasn't working as expected
-              _dark: '{colors.green.500/half}',
+              base: "red",
+              _light: "{colors.blue.500/32}", // <-- wasn't working as expected
+              _dark: "{colors.green.500/half}",
             },
           },
         },
       },
     },
-  })
+  });
   ```
 
   will now correctly generate the following CSS:
@@ -1063,11 +1155,19 @@
     }
 
     .light {
-      --colors-secondary: color-mix(in srgb, var(--colors-blue-500) 32%, transparent);
+      --colors-secondary: color-mix(
+        in srgb,
+        var(--colors-blue-500) 32%,
+        transparent
+      );
     }
 
     .dark {
-      --colors-secondary: color-mix(in srgb, var(--colors-green-500) 50%, transparent);
+      --colors-secondary: color-mix(
+        in srgb,
+        var(--colors-green-500) 50%,
+        transparent
+      );
     }
   }
   ```
@@ -1108,15 +1208,15 @@
   class assigned.
 
   ```js
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     preflight: {
-      scope: '.my-scope',
-      level: 'element', // 'element' | 'parent (default)'
+      scope: ".my-scope",
+      level: "element", // 'element' | 'parent (default)'
     },
     // ...
-  })
+  });
   ```
 
   This will generate CSS that looks like:
@@ -1158,20 +1258,20 @@
   export default defaultConfig({
     conditions: {
       extend: {
-        supportHover: ['@media (hover: hover) and (pointer: fine)', '&:hover'],
+        supportHover: ["@media (hover: hover) and (pointer: fine)", "&:hover"],
       },
     },
-  })
+  });
   ```
 
   ```ts
-  import { css } from '../styled-system/css'
+  import { css } from "../styled-system/css";
 
   css({
     _supportHover: {
-      color: 'red',
+      color: "red",
     },
-  })
+  });
   ```
 
   will generate the following CSS:
@@ -1242,10 +1342,10 @@
 
   ```ts
   css({
-    padding: '1px',
-    paddingTop: '3px',
-    paddingBottom: '4px',
-  })
+    padding: "1px",
+    paddingTop: "3px",
+    paddingBottom: "4px",
+  });
   ```
 
   Will now always generate the following css:
@@ -1355,24 +1455,24 @@
     patterns: {
       hstack: {
         properties: {
-          justify: { type: 'property', value: 'justifyContent' },
-          gap: { type: 'property', value: 'gap' },
+          justify: { type: "property", value: "justifyContent" },
+          gap: { type: "property", value: "gap" },
         },
         // you can also use a token like '10'
-        defaultValues: { gap: '40px' },
+        defaultValues: { gap: "40px" },
         transform(props) {
-          const { justify, gap, ...rest } = props
+          const { justify, gap, ...rest } = props;
           return {
-            display: 'flex',
-            alignItems: 'center',
+            display: "flex",
+            alignItems: "center",
             justifyContent: justify,
             gap,
             ...rest,
-          }
+          };
         },
       },
     },
-  })
+  });
   ```
 
 ### Patch Changes
@@ -1414,39 +1514,54 @@
      * Called when the config is resolved, after all the presets are loaded and merged.
      * This is the first hook called, you can use it to tweak the config before the context is created.
      */
-    'config:resolved': (args: { conf: LoadConfigResult }) => MaybeAsyncReturn
+    "config:resolved": (args: { conf: LoadConfigResult }) => MaybeAsyncReturn;
     /**
      * Called when the Panda context has been created and the API is ready to be used.
      */
-    'context:created': (args: { ctx: ApiInterface; logger: LoggerInterface }) => void
+    "context:created": (args: {
+      ctx: ApiInterface;
+      logger: LoggerInterface;
+    }) => void;
     /**
      * Called when the config file or one of its dependencies (imports) has changed.
      */
-    'config:change': (args: { config: UserConfig }) => MaybeAsyncReturn
+    "config:change": (args: { config: UserConfig }) => MaybeAsyncReturn;
     /**
      * Called after reading the file content but before parsing it.
      * You can use this hook to transform the file content to a tsx-friendly syntax so that Panda's parser can parse it.
      * You can also use this hook to parse the file's content on your side using a custom parser, in this case you don't have to return anything.
      */
-    'parser:before': (args: { filePath: string; content: string }) => string | void
+    "parser:before": (args: {
+      filePath: string;
+      content: string;
+    }) => string | void;
     /**
      * Called after the file styles are extracted and processed into the resulting ParserResult object.
      * You can also use this hook to add your own extraction results from your custom parser to the ParserResult object.
      */
-    'parser:after': (args: { filePath: string; result: ParserResultInterface | undefined }) => void
+    "parser:after": (args: {
+      filePath: string;
+      result: ParserResultInterface | undefined;
+    }) => void;
     /**
      * Called after the codegen is completed
      */
-    'codegen:done': () => MaybeAsyncReturn
+    "codegen:done": () => MaybeAsyncReturn;
     /**
      * Called right before adding the design-system CSS (global, static, preflight, tokens, keyframes) to the final CSS
      * Called right before writing/injecting the final CSS (styles.css) that contains the design-system CSS and the parser CSS
      * You can use it to tweak the CSS content before it's written to disk or injected through the postcss plugin.
      */
-    'cssgen:done': (args: {
-      artifact: 'global' | 'static' | 'reset' | 'tokens' | 'keyframes' | 'styles.css'
-      content: string
-    }) => string | void
+    "cssgen:done": (args: {
+      artifact:
+        | "global"
+        | "static"
+        | "reset"
+        | "tokens"
+        | "keyframes"
+        | "styles.css";
+      content: string;
+    }) => string | void;
   }
   ```
 
@@ -1594,18 +1709,18 @@
 
   ```ts
   // config.strictTokens = true
-  css({ display: 'flex' }) // OK, didn't throw
-  css({ display: 'block' }) // OK, didn't throw
-  css({ display: 'abc' }) // ❌ would throw since 'abc' is not part of predefined values of 'display' even thought there is no config token for 'abc'
+  css({ display: "flex" }); // OK, didn't throw
+  css({ display: "block" }); // OK, didn't throw
+  css({ display: "abc" }); // ❌ would throw since 'abc' is not part of predefined values of 'display' even thought there is no config token for 'abc'
   ```
 
   now:
 
   ```ts
   // config.strictTokens = true
-  css({ display: 'flex' }) // OK, didn't throw
-  css({ display: 'block' }) // OK, didn't throw
-  css({ display: 'abc' }) // ✅ will not throw there is no config token for 'abc'
+  css({ display: "flex" }); // OK, didn't throw
+  css({ display: "block" }); // OK, didn't throw
+  css({ display: "abc" }); // ✅ will not throw there is no config token for 'abc'
   ```
 
   Instead, if you want the v.19.0 behavior, you can use the new `config.strictPropertyValues` option. You can combine it
@@ -1616,79 +1731,79 @@
 
   ```ts
   type StrictableProps =
-    | 'alignContent'
-    | 'alignItems'
-    | 'alignSelf'
-    | 'all'
-    | 'animationComposition'
-    | 'animationDirection'
-    | 'animationFillMode'
-    | 'appearance'
-    | 'backfaceVisibility'
-    | 'backgroundAttachment'
-    | 'backgroundClip'
-    | 'borderCollapse'
-    | 'border'
-    | 'borderBlock'
-    | 'borderBlockEnd'
-    | 'borderBlockStart'
-    | 'borderBottom'
-    | 'borderInline'
-    | 'borderInlineEnd'
-    | 'borderInlineStart'
-    | 'borderLeft'
-    | 'borderRight'
-    | 'borderTop'
-    | 'borderBlockEndStyle'
-    | 'borderBlockStartStyle'
-    | 'borderBlockStyle'
-    | 'borderBottomStyle'
-    | 'borderInlineEndStyle'
-    | 'borderInlineStartStyle'
-    | 'borderInlineStyle'
-    | 'borderLeftStyle'
-    | 'borderRightStyle'
-    | 'borderTopStyle'
-    | 'boxDecorationBreak'
-    | 'boxSizing'
-    | 'breakAfter'
-    | 'breakBefore'
-    | 'breakInside'
-    | 'captionSide'
-    | 'clear'
-    | 'columnFill'
-    | 'columnRuleStyle'
-    | 'contentVisibility'
-    | 'direction'
-    | 'display'
-    | 'emptyCells'
-    | 'flexDirection'
-    | 'flexWrap'
-    | 'float'
-    | 'fontKerning'
-    | 'forcedColorAdjust'
-    | 'isolation'
-    | 'lineBreak'
-    | 'mixBlendMode'
-    | 'objectFit'
-    | 'outlineStyle'
-    | 'overflow'
-    | 'overflowX'
-    | 'overflowY'
-    | 'overflowBlock'
-    | 'overflowInline'
-    | 'overflowWrap'
-    | 'pointerEvents'
-    | 'position'
-    | 'resize'
-    | 'scrollBehavior'
-    | 'touchAction'
-    | 'transformBox'
-    | 'transformStyle'
-    | 'userSelect'
-    | 'visibility'
-    | 'wordBreak'
-    | 'writingMode'
+    | "alignContent"
+    | "alignItems"
+    | "alignSelf"
+    | "all"
+    | "animationComposition"
+    | "animationDirection"
+    | "animationFillMode"
+    | "appearance"
+    | "backfaceVisibility"
+    | "backgroundAttachment"
+    | "backgroundClip"
+    | "borderCollapse"
+    | "border"
+    | "borderBlock"
+    | "borderBlockEnd"
+    | "borderBlockStart"
+    | "borderBottom"
+    | "borderInline"
+    | "borderInlineEnd"
+    | "borderInlineStart"
+    | "borderLeft"
+    | "borderRight"
+    | "borderTop"
+    | "borderBlockEndStyle"
+    | "borderBlockStartStyle"
+    | "borderBlockStyle"
+    | "borderBottomStyle"
+    | "borderInlineEndStyle"
+    | "borderInlineStartStyle"
+    | "borderInlineStyle"
+    | "borderLeftStyle"
+    | "borderRightStyle"
+    | "borderTopStyle"
+    | "boxDecorationBreak"
+    | "boxSizing"
+    | "breakAfter"
+    | "breakBefore"
+    | "breakInside"
+    | "captionSide"
+    | "clear"
+    | "columnFill"
+    | "columnRuleStyle"
+    | "contentVisibility"
+    | "direction"
+    | "display"
+    | "emptyCells"
+    | "flexDirection"
+    | "flexWrap"
+    | "float"
+    | "fontKerning"
+    | "forcedColorAdjust"
+    | "isolation"
+    | "lineBreak"
+    | "mixBlendMode"
+    | "objectFit"
+    | "outlineStyle"
+    | "overflow"
+    | "overflowX"
+    | "overflowY"
+    | "overflowBlock"
+    | "overflowInline"
+    | "overflowWrap"
+    | "pointerEvents"
+    | "position"
+    | "resize"
+    | "scrollBehavior"
+    | "touchAction"
+    | "transformBox"
+    | "transformStyle"
+    | "userSelect"
+    | "visibility"
+    | "wordBreak"
+    | "writingMode";
   ```
 
 - Updated dependencies [657ca5da]
@@ -1759,38 +1874,38 @@
 
   ```ts
   const card = defineRecipe({
-    className: 'card',
-    base: { color: 'white' },
+    className: "card",
+    base: { color: "white" },
     variants: {
       size: {
-        small: { fontSize: '14px' },
-        large: { fontSize: '18px' },
+        small: { fontSize: "14px" },
+        large: { fontSize: "18px" },
       },
       visual: {
-        primary: { backgroundColor: 'blue' },
-        secondary: { backgroundColor: 'gray' },
+        primary: { backgroundColor: "blue" },
+        secondary: { backgroundColor: "gray" },
       },
     },
-  })
+  });
 
   export default defineConfig({
     // ...
     staticCss: {
       recipes: {
-        card: ['*'], // this
+        card: ["*"], // this
 
         // was equivalent to:
         card: [
           // notice how `responsive: true` was implicitly added
-          { size: ['*'], responsive: true },
-          { visual: ['*'], responsive: true },
+          { size: ["*"], responsive: true },
+          { visual: ["*"], responsive: true },
         ],
 
         //   will now correctly be equivalent to:
-        card: [{ size: ['*'] }, { visual: ['*'] }],
+        card: [{ size: ["*"] }, { visual: ["*"] }],
       },
     },
-  })
+  });
   ```
 
   Here's the diff in the generated CSS:
@@ -1937,17 +2052,17 @@
 
   ```ts
   css({
-    bg: '[#3B00B9]', // ✅ was okay
+    bg: "[#3B00B9]", // ✅ was okay
     _dark: {
       // ✅ was okay
-      color: '[#3B00B9]',
+      color: "[#3B00B9]",
     },
 
     // ❌ Not okay, will be fixed in this patch
     color: {
-      _dark: '[#3B00B9]',
+      _dark: "[#3B00B9]",
     },
-  })
+  });
   ```
 
 - 647f05c9: Fix a CSS generation issue with `config.strictTokens` when using the `[xxx]` escape-hatch syntax with `!` or
@@ -1955,9 +2070,9 @@
 
   ```ts
   css({
-    borderWidth: '[2px!]',
-    width: '[2px !important]',
-  })
+    borderWidth: "[2px!]",
+    width: "[2px !important]",
+  });
   ```
 
 - Updated dependencies [8f4ce97c]
@@ -1998,18 +2113,18 @@
   and suffixing with `]`, e.g. writing `[123px]` as a value will bypass the token validation.
 
   ```ts
-  import { css } from '../styled-system/css'
+  import { css } from "../styled-system/css";
 
   css({
     // @ts-expect-error TS will throw when using from strictTokens: true
-    color: '#fff',
+    color: "#fff",
     // @ts-expect-error TS will throw when using from strictTokens: true
-    width: '100px',
+    width: "100px",
 
     // ✅ but this is now allowed:
-    bgColor: '[rgb(51 155 240)]',
-    fontSize: '[12px]',
-  })
+    bgColor: "[rgb(51 155 240)]",
+    fontSize: "[12px]",
+  });
   ```
 
 ### Patch Changes
@@ -2043,49 +2158,49 @@
 - 105f74ce: Add a way to specify a recipe's `staticCss` options from inside a recipe config, e.g.:
 
   ```js
-  import { defineRecipe } from '@pandacss/dev'
+  import { defineRecipe } from "@pandacss/dev";
 
   const card = defineRecipe({
-    className: 'card',
-    base: { color: 'white' },
+    className: "card",
+    base: { color: "white" },
     variants: {
       size: {
-        small: { fontSize: '14px' },
-        large: { fontSize: '18px' },
+        small: { fontSize: "14px" },
+        large: { fontSize: "18px" },
       },
     },
-    staticCss: [{ size: ['*'] }],
-  })
+    staticCss: [{ size: ["*"] }],
+  });
   ```
 
   would be the equivalent of defining it inside the main config:
 
   ```js
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
     staticCss: {
       recipes: {
         card: {
-          size: ['*'],
+          size: ["*"],
         },
       },
     },
-  })
+  });
   ```
 
 - 052283c2: Fix vue `styled` factory internal class merging, for example:
 
   ```vue
   <script setup>
-  import { styled } from '../styled-system/jsx'
+  import { styled } from "../styled-system/jsx";
 
-  const StyledButton = styled('button', {
+  const StyledButton = styled("button", {
     base: {
-      bgColor: 'red.300',
+      bgColor: "red.300",
     },
-  })
+  });
   </script>
   <template>
     <StyledButton id="test" class="test">
@@ -2154,18 +2269,18 @@
 
   ```ts
   // config.strictTokens = true
-  css({ display: 'flex' }) // OK, didn't throw
-  css({ display: 'block' }) // OK, didn't throw
-  css({ display: 'abc' }) // ❌ didn't throw even though 'abc' is not a valid value for 'display'
+  css({ display: "flex" }); // OK, didn't throw
+  css({ display: "block" }); // OK, didn't throw
+  css({ display: "abc" }); // ❌ didn't throw even though 'abc' is not a valid value for 'display'
   ```
 
   Now:
 
   ```ts
   // config.strictTokens = true
-  css({ display: 'flex' }) // OK, didn't throw
-  css({ display: 'block' }) // OK, didn't throw
-  css({ display: 'abc' }) // ✅ will throw since 'abc' is not a valid value for 'display'
+  css({ display: "flex" }); // OK, didn't throw
+  css({ display: "block" }); // OK, didn't throw
+  css({ display: "abc" }); // ✅ will throw since 'abc' is not a valid value for 'display'
   ```
 
 - Updated dependencies [61831040]
@@ -2224,22 +2339,28 @@
 - b7cb2073: Add a `splitCssProps` utility exported from the {outdir}/jsx entrypoint
 
   ```tsx
-  import { splitCssProps, styled } from '../styled-system/jsx'
-  import type { HTMLStyledProps } from '../styled-system/types'
+  import { splitCssProps, styled } from "../styled-system/jsx";
+  import type { HTMLStyledProps } from "../styled-system/types";
 
-  function SplitComponent({ children, ...props }: HTMLStyledProps<'div'>) {
-    const [cssProps, restProps] = splitCssProps(props)
+  function SplitComponent({ children, ...props }: HTMLStyledProps<"div">) {
+    const [cssProps, restProps] = splitCssProps(props);
     return (
-      <styled.div {...restProps} className={css({ display: 'flex', height: '20', width: '20' }, cssProps)}>
+      <styled.div
+        {...restProps}
+        className={css(
+          { display: "flex", height: "20", width: "20" },
+          cssProps,
+        )}
+      >
         {children}
       </styled.div>
-    )
+    );
   }
 
   // Usage
 
   function App() {
-    return <SplitComponent margin="2">Click me</SplitComponent>
+    return <SplitComponent margin="2">Click me</SplitComponent>;
   }
   ```
 
@@ -2332,16 +2453,16 @@
   together and the styles will be merged correctly.
 
   ```jsx
-  const Box = styled('div', {
+  const Box = styled("div", {
     base: {
-      background: 'red.light',
-      color: 'white',
+      background: "red.light",
+      color: "white",
     },
-  })
+  });
 
   const ExtendedBox = styled(Box, {
-    base: { background: 'red.dark' },
-  })
+    base: { background: "red.dark" },
+  });
 
   // <ExtendedBox> will have a background of `red.dark` and a color of `white`
   ```
@@ -2354,32 +2475,32 @@
   - CVA or Inline CVA + Config Recipe = ❌
 
   ```jsx
-  import { button } from '../styled-system/recipes'
+  import { button } from "../styled-system/recipes";
 
-  const Button = styled('div', button)
+  const Button = styled("div", button);
 
   // ❌ This will throw an error
   const ExtendedButton = styled(Button, {
-    base: { background: 'red.dark' },
-  })
+    base: { background: "red.dark" },
+  });
   ```
 
 - fbf062c6: Added a new type to extract variants out of styled components
 
   ```tsx
-  import { StyledVariantProps } from '../styled-system/jsx'
+  import { StyledVariantProps } from "../styled-system/jsx";
 
-  const Button = styled('button', {
-    base: { color: 'black' },
+  const Button = styled("button", {
+    base: { color: "black" },
     variants: {
       state: {
-        error: { color: 'red' },
-        success: { color: 'green' },
+        error: { color: "red" },
+        success: { color: "green" },
       },
     },
-  })
+  });
 
-  type ButtonVariantProps = StyledVariantProps<typeof Button>
+  type ButtonVariantProps = StyledVariantProps<typeof Button>;
   //   ^ { state?: 'error' | 'success' | undefined }
   ```
 
@@ -2481,9 +2602,9 @@
 
   ```ts
   interface FactoryOptions<TProps extends Dict> {
-    dataAttr?: boolean
-    defaultProps?: TProps
-    shouldForwardProp?(prop: string, variantKeys: string[]): boolean
+    dataAttr?: boolean;
+    defaultProps?: TProps;
+    shouldForwardProp?(prop: string, variantKeys: string[]): boolean;
   }
   ```
 
@@ -2491,16 +2612,16 @@
     This is useful for testing and debugging.
 
   ```jsx
-  import { styled } from '../styled-system/jsx'
-  import { button } from '../styled-system/recipes'
+  import { styled } from "../styled-system/jsx";
+  import { button } from "../styled-system/recipes";
 
-  const Button = styled('button', button, { dataAttr: true })
+  const Button = styled("button", button, { dataAttr: true });
 
   const App = () => (
     <Button variant="secondary" mt="10px">
       Button
     </Button>
-  )
+  );
   // Will render something like <button data-recipe="button" class="btn btn--variant_purple mt_10px">Button</button>
   ```
 
@@ -2508,17 +2629,17 @@
     override the default variants or base styles of a recipe.
 
   ```jsx
-  import { styled } from '../styled-system/jsx'
-  import { button } from '../styled-system/recipes'
+  import { styled } from "../styled-system/jsx";
+  import { button } from "../styled-system/recipes";
 
-  const Button = styled('button', button, {
+  const Button = styled("button", button, {
     defaultProps: {
-      variant: 'secondary',
-      px: '10px',
+      variant: "secondary",
+      px: "10px",
     },
-  })
+  });
 
-  const App = () => <Button>Button</Button>
+  const App = () => <Button>Button</Button>;
   // Will render something like <button class="btn btn--variant_secondary px_10px">Button</button>
   ```
 
@@ -2526,19 +2647,20 @@
     props except recipe variants and style props are forwarded.
 
   ```jsx
-  import { styled } from '../styled-system/jsx'
-  import { button } from '../styled-system/recipes'
-  import { isCssProperty } from '../styled-system/jsx'
-  import { motion, isValidMotionProp } from 'framer-motion'
+  import { styled } from "../styled-system/jsx";
+  import { button } from "../styled-system/recipes";
+  import { isCssProperty } from "../styled-system/jsx";
+  import { motion, isValidMotionProp } from "framer-motion";
 
   const StyledMotion = styled(
     motion.div,
     {},
     {
       shouldForwardProp: (prop, variantKeys) =>
-        isValidMotionProp(prop) || (!variantKeys.includes(prop) && !isCssProperty(prop)),
+        isValidMotionProp(prop) ||
+        (!variantKeys.includes(prop) && !isCssProperty(prop)),
     },
-  )
+  );
   ```
 
   - @pandacss/types@0.15.4
@@ -2561,42 +2683,42 @@
 
   ```ts
   export default defineConfig({
-    outdir: './outdir',
+    outdir: "./outdir",
     importMap: {
-      css: '#panda/styled-system/css',
-      recipes: '#panda/styled-system/recipes',
-      patterns: '#panda/styled-system/patterns',
-      jsx: '#panda/styled-system/jsx',
+      css: "#panda/styled-system/css",
+      recipes: "#panda/styled-system/recipes",
+      patterns: "#panda/styled-system/patterns",
+      jsx: "#panda/styled-system/jsx",
     },
-  })
+  });
   ```
 
   Or you could also make your outdir an actual package from your monorepo:
 
   ```ts
   export default defineConfig({
-    outdir: '../packages/styled-system',
+    outdir: "../packages/styled-system",
     importMap: {
-      css: '@monorepo/styled-system',
-      recipes: '@monorepo/styled-system',
-      patterns: '@monorepo/styled-system',
-      jsx: '@monorepo/styled-system',
+      css: "@monorepo/styled-system",
+      recipes: "@monorepo/styled-system",
+      patterns: "@monorepo/styled-system",
+      jsx: "@monorepo/styled-system",
     },
-  })
+  });
   ```
 
   Working with tsconfig paths aliases is easy:
 
   ```ts
   export default defineConfig({
-    outdir: 'styled-system',
+    outdir: "styled-system",
     importMap: {
-      css: 'styled-system/css',
-      recipes: 'styled-system/recipes',
-      patterns: 'styled-system/patterns',
-      jsx: 'styled-system/jsx',
+      css: "styled-system/css",
+      recipes: "styled-system/recipes",
+      patterns: "styled-system/patterns",
+      jsx: "styled-system/jsx",
     },
-  })
+  });
   ```
 
 - 1eb31118: Automatically allow overriding config recipe compoundVariants styles within the `styled` JSX factory,
@@ -2606,22 +2728,22 @@
 
   ```ts file="panda.config.ts"
   const button = defineRecipe({
-    className: 'btn',
-    base: { color: 'green', fontSize: '16px' },
+    className: "btn",
+    base: { color: "green", fontSize: "16px" },
     variants: {
-      size: { small: { fontSize: '14px' } },
+      size: { small: { fontSize: "14px" } },
     },
-    compoundVariants: [{ size: 'small', css: { color: 'blue' } }],
-  })
+    compoundVariants: [{ size: "small", css: { color: "blue" } }],
+  });
   ```
 
   This would previously not merge the `color` property overrides, but now it does:
 
   ```tsx file="example.tsx"
-  import { styled } from '../styled-system/jsx'
-  import { button } from '../styled-system/recipes'
+  import { styled } from "../styled-system/jsx";
+  import { button } from "../styled-system/recipes";
 
-  const Button = styled('button', button)
+  const Button = styled("button", button);
 
   function App() {
     return (
@@ -2630,7 +2752,7 @@
           Click me
         </Button>
       </>
-    )
+    );
   }
   ```
 
@@ -2809,8 +2931,8 @@
     passed in. This is to allow the `css` function to merge the styles correctly.
 
   ```tsx
-  import { css } from '../styled-system/css'
-  css({ mx: '3', paddingTop: '4' }, { mx: '10', pt: '6' }) // => mx_10 pt_6
+  import { css } from "../styled-system/css";
+  css({ mx: "3", paddingTop: "4" }, { mx: "10", pt: "6" }); // => mx_10 pt_6
   ```
 
   > ⚠️ This approach should be preferred for merging styles over the current `cx` function, which will be reverted to
@@ -2835,26 +2957,29 @@
   be merged correctly.
 
   ```tsx title="src/components/Button.tsx"
-  import { css } from '../../styled-system/css'
+  import { css } from "../../styled-system/css";
 
   export const Button = ({ css: cssProp = {}, children }) => {
-    const className = css({ display: 'flex', alignItem: 'center', color: 'black' }, cssProp)
-    return <button className={className}>{children}</button>
-  }
+    const className = css(
+      { display: "flex", alignItem: "center", color: "black" },
+      cssProp,
+    );
+    return <button className={className}>{children}</button>;
+  };
   ```
 
   Then you can use the `Button` component like this:
 
   ```tsx title="src/app/page.tsx"
-  import { css } from '../../styled-system/css'
-  import { Button, Thingy } from './Button'
+  import { css } from "../../styled-system/css";
+  import { Button, Thingy } from "./Button";
 
   export default function Page() {
     return (
-      <Button css={{ color: 'pink', _hover: { color: 'red' } }}>
+      <Button css={{ color: "pink", _hover: { color: "red" } }}>
         will result in `class="d_flex items_center text_pink hover:text_red"`
       </Button>
-    )
+    );
   }
   ```
 
@@ -2866,51 +2991,51 @@
   **Pattern Example:**
 
   ```tsx title="src/components/Button.tsx"
-  import { hstack } from '../../styled-system/patterns'
-  import { css, cva } from '../../styled-system/css'
+  import { hstack } from "../../styled-system/patterns";
+  import { css, cva } from "../../styled-system/css";
 
   export const Button = ({ css: cssProp = {}, children }) => {
     // using the flex pattern
     const hstackProps = hstack.raw({
-      border: '1px solid',
-      _hover: { color: 'blue.400' },
-    })
+      border: "1px solid",
+      _hover: { color: "blue.400" },
+    });
 
     // merging the styles
-    const className = css(hstackProps, cssProp)
+    const className = css(hstackProps, cssProp);
 
-    return <button className={className}>{children}</button>
-  }
+    return <button className={className}>{children}</button>;
+  };
   ```
 
   **CVA Example:**
 
   ```tsx title="src/components/Button.tsx"
-  import { css, cva } from '../../styled-system/css'
+  import { css, cva } from "../../styled-system/css";
 
   const buttonRecipe = cva({
-    base: { display: 'flex', fontSize: 'lg' },
+    base: { display: "flex", fontSize: "lg" },
     variants: {
       variant: {
-        primary: { color: 'white', backgroundColor: 'blue.500' },
+        primary: { color: "white", backgroundColor: "blue.500" },
       },
     },
-  })
+  });
 
   export const Button = ({ css: cssProp = {}, children }) => {
     const className = css(
       // using the button recipe
-      buttonRecipe.raw({ variant: 'primary' }),
+      buttonRecipe.raw({ variant: "primary" }),
 
       // adding style overrides (internal)
-      { _hover: { color: 'blue.400' } },
+      { _hover: { color: "blue.400" } },
 
       // adding style overrides (external)
       cssProp,
-    )
+    );
 
-    return <button className={className}>{props.children}</button>
-  }
+    return <button className={className}>{props.children}</button>;
+  };
   ```
 
 - 36fdff89: Fix bug in generated js code for atomic slot recipe produce where `splitVariantProps` didn't work without
@@ -2957,7 +3082,14 @@
   Example:
 
   ```tsx
-  <h1 className={cx(css({ mx: '3', paddingTop: '4' }), css({ mx: '10', pt: '6' }))}>Will result in "mx_10 pt_6"</h1>
+  <h1
+    className={cx(
+      css({ mx: "3", paddingTop: "4" }),
+      css({ mx: "10", pt: "6" }),
+    )}
+  >
+    Will result in "mx_10 pt_6"
+  </h1>
   ```
 
 - dfb3f85f: Add missing svg props types
@@ -3002,12 +3134,12 @@
   **Definition**
 
   ```jsx
-  import { sva } from 'styled-system/css'
+  import { sva } from "styled-system/css";
 
   const button = sva({
-    slots: ['label', 'icon'],
+    slots: ["label", "icon"],
     base: {
-      label: { color: 'red', textDecoration: 'underline' },
+      label: { color: "red", textDecoration: "underline" },
     },
     variants: {
       rounded: {
@@ -3015,33 +3147,33 @@
       },
       size: {
         sm: {
-          label: { fontSize: 'sm' },
-          icon: { fontSize: 'sm' },
+          label: { fontSize: "sm" },
+          icon: { fontSize: "sm" },
         },
         lg: {
-          label: { fontSize: 'lg' },
-          icon: { fontSize: 'lg', color: 'pink' },
+          label: { fontSize: "lg" },
+          icon: { fontSize: "lg", color: "pink" },
         },
       },
     },
     defaultVariants: {
-      size: 'sm',
+      size: "sm",
     },
-  })
+  });
   ```
 
   **Usage**
 
   ```jsx
   export function App() {
-    const btnClass = button({ size: 'lg', rounded: true })
+    const btnClass = button({ size: "lg", rounded: true });
 
     return (
       <button>
         <p class={btnClass.label}> Label</p>
         <p class={btnClass.icon}> Icon</p>
       </button>
-    )
+    );
   }
   ```
 
@@ -3106,26 +3238,26 @@
   Update the `jsx` property to be used for advanced tracking of custom pattern components.
 
   ```jsx
-  import { Circle } from 'styled-system/jsx'
+  import { Circle } from "styled-system/jsx";
   const CustomCircle = ({ children, ...props }) => {
-    return <Circle {...props}>{children}</Circle>
-  }
+    return <Circle {...props}>{children}</Circle>;
+  };
   ```
 
   To track the `CustomCircle` component, you can now use the `jsx` property.
 
   ```js
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     patterns: {
       extend: {
         circle: {
-          jsx: ['CustomCircle'],
+          jsx: ["CustomCircle"],
         },
       },
     },
-  })
+  });
   ```
 
 ### Patch Changes
@@ -3223,9 +3355,17 @@
   ```tsx
   const ComponentWithMultipleRecipes = ({ variant }) => {
     return (
-      <button className={cx(pinkRecipe({ variant }), greenRecipe({ variant }), blueRecipe({ variant }))}>Hello</button>
-    )
-  }
+      <button
+        className={cx(
+          pinkRecipe({ variant }),
+          greenRecipe({ variant }),
+          blueRecipe({ variant }),
+        )}
+      >
+        Hello
+      </button>
+    );
+  };
   ```
 
   Given a `panda.config.ts` with recipes each including a common `jsx` tag name, such as:
@@ -3309,7 +3449,7 @@
   ```ts
   staticCss: {
     recipes: {
-      button: [{ size: ['*'], shape: ['*'] }]
+      button: [{ size: ["*"], shape: ["*"] }];
     }
   }
   ```
@@ -3319,7 +3459,7 @@
   ```ts
   staticCss: {
     recipes: {
-      button: ['*']
+      button: ["*"];
     }
   }
   ```
@@ -3357,8 +3497,8 @@
   // panda.config.ts
   export default defineConfig({
     //...
-    syntax: 'template-literal',
-  })
+    syntax: "template-literal",
+  });
   ```
 
   > For existing projects, you might need to run the `panda codegen --clean`
@@ -3390,12 +3530,12 @@
 - 5b344b9c: Add support for disabling shorthand props
 
   ```ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
     shorthands: false,
-  })
+  });
   ```
 
 ### Patch Changes
@@ -3515,11 +3655,11 @@ This hook is called right before writing the codegen files to disk. You can use
 export default defineConfig({
   // ...
   hooks: {
-    'codegen:prepare': ({ artifacts, changed }) => {
+    "codegen:prepare": ({ artifacts, changed }) => {
       // do something with the emitted js/d.ts files
     },
   },
-})
+});
 ```
 
 - 49c760cd: Fix issue where responsive array in css and cva doesn't generate the correct classname
@@ -3537,11 +3677,11 @@ export default defineConfig({
   ```js
   module.exports = {
     plugins: {
-      '@pandacss/dev/postcss': {
-        logfile: './logs/panda.log',
+      "@pandacss/dev/postcss": {
+        logfile: "./logs/panda.log",
       },
     },
-  }
+  };
   ```
 
 - Updated dependencies [74485ef1]
@@ -3580,24 +3720,24 @@ export default defineConfig({
     patterns: {
       hstack: {
         properties: {
-          justify: { type: 'property', value: 'justifyContent' },
-          gap: { type: 'property', value: 'gap' },
+          justify: { type: "property", value: "justifyContent" },
+          gap: { type: "property", value: "gap" },
         },
         // you can also use a token like '10'
-        defaultValues: { gap: '40px' },
+        defaultValues: { gap: "40px" },
         transform(props) {
-          const { justify, gap, ...rest } = props
+          const { justify, gap, ...rest } = props;
           return {
-            display: 'flex',
-            alignItems: 'center',
+            display: "flex",
+            alignItems: "center",
             justifyContent: justify,
             gap,
             ...rest,
-          }
+          };
         },
       },
     },
-  })
+  });
   ```
 
 ### Patch Changes
@@ -3639,39 +3779,54 @@ export default defineConfig({
      * Called when the config is resolved, after all the presets are loaded and merged.
      * This is the first hook called, you can use it to tweak the config before the context is created.
      */
-    'config:resolved': (args: { conf: LoadConfigResult }) => MaybeAsyncReturn
+    "config:resolved": (args: { conf: LoadConfigResult }) => MaybeAsyncReturn;
     /**
      * Called when the Panda context has been created and the API is ready to be used.
      */
-    'context:created': (args: { ctx: ApiInterface; logger: LoggerInterface }) => void
+    "context:created": (args: {
+      ctx: ApiInterface;
+      logger: LoggerInterface;
+    }) => void;
     /**
      * Called when the config file or one of its dependencies (imports) has changed.
      */
-    'config:change': (args: { config: UserConfig }) => MaybeAsyncReturn
+    "config:change": (args: { config: UserConfig }) => MaybeAsyncReturn;
     /**
      * Called after reading the file content but before parsing it.
      * You can use this hook to transform the file content to a tsx-friendly syntax so that Panda's parser can parse it.
      * You can also use this hook to parse the file's content on your side using a custom parser, in this case you don't have to return anything.
      */
-    'parser:before': (args: { filePath: string; content: string }) => string | void
+    "parser:before": (args: {
+      filePath: string;
+      content: string;
+    }) => string | void;
     /**
      * Called after the file styles are extracted and processed into the resulting ParserResult object.
      * You can also use this hook to add your own extraction results from your custom parser to the ParserResult object.
      */
-    'parser:after': (args: { filePath: string; result: ParserResultInterface | undefined }) => void
+    "parser:after": (args: {
+      filePath: string;
+      result: ParserResultInterface | undefined;
+    }) => void;
     /**
      * Called after the codegen is completed
      */
-    'codegen:done': () => MaybeAsyncReturn
+    "codegen:done": () => MaybeAsyncReturn;
     /**
      * Called right before adding the design-system CSS (global, static, preflight, tokens, keyframes) to the final CSS
      * Called right before writing/injecting the final CSS (styles.css) that contains the design-system CSS and the parser CSS
      * You can use it to tweak the CSS content before it's written to disk or injected through the postcss plugin.
      */
-    'cssgen:done': (args: {
-      artifact: 'global' | 'static' | 'reset' | 'tokens' | 'keyframes' | 'styles.css'
-      content: string
-    }) => string | void
+    "cssgen:done": (args: {
+      artifact:
+        | "global"
+        | "static"
+        | "reset"
+        | "tokens"
+        | "keyframes"
+        | "styles.css";
+      content: string;
+    }) => string | void;
   }
   ```
 
@@ -3819,18 +3974,18 @@ export default defineConfig({
 
   ```ts
   // config.strictTokens = true
-  css({ display: 'flex' }) // OK, didn't throw
-  css({ display: 'block' }) // OK, didn't throw
-  css({ display: 'abc' }) // ❌ would throw since 'abc' is not part of predefined values of 'display' even thought there is no config token for 'abc'
+  css({ display: "flex" }); // OK, didn't throw
+  css({ display: "block" }); // OK, didn't throw
+  css({ display: "abc" }); // ❌ would throw since 'abc' is not part of predefined values of 'display' even thought there is no config token for 'abc'
   ```
 
   now:
 
   ```ts
   // config.strictTokens = true
-  css({ display: 'flex' }) // OK, didn't throw
-  css({ display: 'block' }) // OK, didn't throw
-  css({ display: 'abc' }) // ✅ will not throw there is no config token for 'abc'
+  css({ display: "flex" }); // OK, didn't throw
+  css({ display: "block" }); // OK, didn't throw
+  css({ display: "abc" }); // ✅ will not throw there is no config token for 'abc'
   ```
 
   Instead, if you want the v.19.0 behavior, you can use the new `config.strictPropertyValues` option. You can combine it
@@ -3841,79 +3996,79 @@ export default defineConfig({
 
   ```ts
   type StrictableProps =
-    | 'alignContent'
-    | 'alignItems'
-    | 'alignSelf'
-    | 'all'
-    | 'animationComposition'
-    | 'animationDirection'
-    | 'animationFillMode'
-    | 'appearance'
-    | 'backfaceVisibility'
-    | 'backgroundAttachment'
-    | 'backgroundClip'
-    | 'borderCollapse'
-    | 'border'
-    | 'borderBlock'
-    | 'borderBlockEnd'
-    | 'borderBlockStart'
-    | 'borderBottom'
-    | 'borderInline'
-    | 'borderInlineEnd'
-    | 'borderInlineStart'
-    | 'borderLeft'
-    | 'borderRight'
-    | 'borderTop'
-    | 'borderBlockEndStyle'
-    | 'borderBlockStartStyle'
-    | 'borderBlockStyle'
-    | 'borderBottomStyle'
-    | 'borderInlineEndStyle'
-    | 'borderInlineStartStyle'
-    | 'borderInlineStyle'
-    | 'borderLeftStyle'
-    | 'borderRightStyle'
-    | 'borderTopStyle'
-    | 'boxDecorationBreak'
-    | 'boxSizing'
-    | 'breakAfter'
-    | 'breakBefore'
-    | 'breakInside'
-    | 'captionSide'
-    | 'clear'
-    | 'columnFill'
-    | 'columnRuleStyle'
-    | 'contentVisibility'
-    | 'direction'
-    | 'display'
-    | 'emptyCells'
-    | 'flexDirection'
-    | 'flexWrap'
-    | 'float'
-    | 'fontKerning'
-    | 'forcedColorAdjust'
-    | 'isolation'
-    | 'lineBreak'
-    | 'mixBlendMode'
-    | 'objectFit'
-    | 'outlineStyle'
-    | 'overflow'
-    | 'overflowX'
-    | 'overflowY'
-    | 'overflowBlock'
-    | 'overflowInline'
-    | 'overflowWrap'
-    | 'pointerEvents'
-    | 'position'
-    | 'resize'
-    | 'scrollBehavior'
-    | 'touchAction'
-    | 'transformBox'
-    | 'transformStyle'
-    | 'userSelect'
-    | 'visibility'
-    | 'wordBreak'
-    | 'writingMode'
+    | "alignContent"
+    | "alignItems"
+    | "alignSelf"
+    | "all"
+    | "animationComposition"
+    | "animationDirection"
+    | "animationFillMode"
+    | "appearance"
+    | "backfaceVisibility"
+    | "backgroundAttachment"
+    | "backgroundClip"
+    | "borderCollapse"
+    | "border"
+    | "borderBlock"
+    | "borderBlockEnd"
+    | "borderBlockStart"
+    | "borderBottom"
+    | "borderInline"
+    | "borderInlineEnd"
+    | "borderInlineStart"
+    | "borderLeft"
+    | "borderRight"
+    | "borderTop"
+    | "borderBlockEndStyle"
+    | "borderBlockStartStyle"
+    | "borderBlockStyle"
+    | "borderBottomStyle"
+    | "borderInlineEndStyle"
+    | "borderInlineStartStyle"
+    | "borderInlineStyle"
+    | "borderLeftStyle"
+    | "borderRightStyle"
+    | "borderTopStyle"
+    | "boxDecorationBreak"
+    | "boxSizing"
+    | "breakAfter"
+    | "breakBefore"
+    | "breakInside"
+    | "captionSide"
+    | "clear"
+    | "columnFill"
+    | "columnRuleStyle"
+    | "contentVisibility"
+    | "direction"
+    | "display"
+    | "emptyCells"
+    | "flexDirection"
+    | "flexWrap"
+    | "float"
+    | "fontKerning"
+    | "forcedColorAdjust"
+    | "isolation"
+    | "lineBreak"
+    | "mixBlendMode"
+    | "objectFit"
+    | "outlineStyle"
+    | "overflow"
+    | "overflowX"
+    | "overflowY"
+    | "overflowBlock"
+    | "overflowInline"
+    | "overflowWrap"
+    | "pointerEvents"
+    | "position"
+    | "resize"
+    | "scrollBehavior"
+    | "touchAction"
+    | "transformBox"
+    | "transformStyle"
+    | "userSelect"
+    | "visibility"
+    | "wordBreak"
+    | "writingMode";
   ```
 
 - Updated dependencies [657ca5da]
@@ -3984,38 +4139,38 @@ export default defineConfig({
 
   ```ts
   const card = defineRecipe({
-    className: 'card',
-    base: { color: 'white' },
+    className: "card",
+    base: { color: "white" },
     variants: {
       size: {
-        small: { fontSize: '14px' },
-        large: { fontSize: '18px' },
+        small: { fontSize: "14px" },
+        large: { fontSize: "18px" },
       },
       visual: {
-        primary: { backgroundColor: 'blue' },
-        secondary: { backgroundColor: 'gray' },
+        primary: { backgroundColor: "blue" },
+        secondary: { backgroundColor: "gray" },
       },
     },
-  })
+  });
 
   export default defineConfig({
     // ...
     staticCss: {
       recipes: {
-        card: ['*'], // this
+        card: ["*"], // this
 
         // was equivalent to:
         card: [
           // notice how `responsive: true` was implicitly added
-          { size: ['*'], responsive: true },
-          { visual: ['*'], responsive: true },
+          { size: ["*"], responsive: true },
+          { visual: ["*"], responsive: true },
         ],
 
         //   will now correctly be equivalent to:
-        card: [{ size: ['*'] }, { visual: ['*'] }],
+        card: [{ size: ["*"] }, { visual: ["*"] }],
       },
     },
-  })
+  });
   ```
 
   Here's the diff in the generated CSS:
@@ -4162,17 +4317,17 @@ export default defineConfig({
 
   ```ts
   css({
-    bg: '[#3B00B9]', // ✅ was okay
+    bg: "[#3B00B9]", // ✅ was okay
     _dark: {
       // ✅ was okay
-      color: '[#3B00B9]',
+      color: "[#3B00B9]",
     },
 
     // ❌ Not okay, will be fixed in this patch
     color: {
-      _dark: '[#3B00B9]',
+      _dark: "[#3B00B9]",
     },
-  })
+  });
   ```
 
 - 647f05c9: Fix a CSS generation issue with `config.strictTokens` when using the `[xxx]` escape-hatch syntax with `!` or
@@ -4180,9 +4335,9 @@ export default defineConfig({
 
   ```ts
   css({
-    borderWidth: '[2px!]',
-    width: '[2px !important]',
-  })
+    borderWidth: "[2px!]",
+    width: "[2px !important]",
+  });
   ```
 
 - Updated dependencies [8f4ce97c]
@@ -4223,18 +4378,18 @@ export default defineConfig({
   and suffixing with `]`, e.g. writing `[123px]` as a value will bypass the token validation.
 
   ```ts
-  import { css } from '../styled-system/css'
+  import { css } from "../styled-system/css";
 
   css({
     // @ts-expect-error TS will throw when using from strictTokens: true
-    color: '#fff',
+    color: "#fff",
     // @ts-expect-error TS will throw when using from strictTokens: true
-    width: '100px',
+    width: "100px",
 
     // ✅ but this is now allowed:
-    bgColor: '[rgb(51 155 240)]',
-    fontSize: '[12px]',
-  })
+    bgColor: "[rgb(51 155 240)]",
+    fontSize: "[12px]",
+  });
   ```
 
 ### Patch Changes
@@ -4268,49 +4423,49 @@ export default defineConfig({
 - 105f74ce: Add a way to specify a recipe's `staticCss` options from inside a recipe config, e.g.:
 
   ```js
-  import { defineRecipe } from '@pandacss/dev'
+  import { defineRecipe } from "@pandacss/dev";
 
   const card = defineRecipe({
-    className: 'card',
-    base: { color: 'white' },
+    className: "card",
+    base: { color: "white" },
     variants: {
       size: {
-        small: { fontSize: '14px' },
-        large: { fontSize: '18px' },
+        small: { fontSize: "14px" },
+        large: { fontSize: "18px" },
       },
     },
-    staticCss: [{ size: ['*'] }],
-  })
+    staticCss: [{ size: ["*"] }],
+  });
   ```
 
   would be the equivalent of defining it inside the main config:
 
   ```js
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
     staticCss: {
       recipes: {
         card: {
-          size: ['*'],
+          size: ["*"],
         },
       },
     },
-  })
+  });
   ```
 
 - 052283c2: Fix vue `styled` factory internal class merging, for example:
 
   ```vue
   <script setup>
-  import { styled } from '../styled-system/jsx'
+  import { styled } from "../styled-system/jsx";
 
-  const StyledButton = styled('button', {
+  const StyledButton = styled("button", {
     base: {
-      bgColor: 'red.300',
+      bgColor: "red.300",
     },
-  })
+  });
   </script>
   <template>
     <StyledButton id="test" class="test">
@@ -4379,18 +4534,18 @@ export default defineConfig({
 
   ```ts
   // config.strictTokens = true
-  css({ display: 'flex' }) // OK, didn't throw
-  css({ display: 'block' }) // OK, didn't throw
-  css({ display: 'abc' }) // ❌ didn't throw even though 'abc' is not a valid value for 'display'
+  css({ display: "flex" }); // OK, didn't throw
+  css({ display: "block" }); // OK, didn't throw
+  css({ display: "abc" }); // ❌ didn't throw even though 'abc' is not a valid value for 'display'
   ```
 
   Now:
 
   ```ts
   // config.strictTokens = true
-  css({ display: 'flex' }) // OK, didn't throw
-  css({ display: 'block' }) // OK, didn't throw
-  css({ display: 'abc' }) // ✅ will throw since 'abc' is not a valid value for 'display'
+  css({ display: "flex" }); // OK, didn't throw
+  css({ display: "block" }); // OK, didn't throw
+  css({ display: "abc" }); // ✅ will throw since 'abc' is not a valid value for 'display'
   ```
 
 - Updated dependencies [61831040]
@@ -4449,22 +4604,28 @@ export default defineConfig({
 - b7cb2073: Add a `splitCssProps` utility exported from the {outdir}/jsx entrypoint
 
   ```tsx
-  import { splitCssProps, styled } from '../styled-system/jsx'
-  import type { HTMLStyledProps } from '../styled-system/types'
+  import { splitCssProps, styled } from "../styled-system/jsx";
+  import type { HTMLStyledProps } from "../styled-system/types";
 
-  function SplitComponent({ children, ...props }: HTMLStyledProps<'div'>) {
-    const [cssProps, restProps] = splitCssProps(props)
+  function SplitComponent({ children, ...props }: HTMLStyledProps<"div">) {
+    const [cssProps, restProps] = splitCssProps(props);
     return (
-      <styled.div {...restProps} className={css({ display: 'flex', height: '20', width: '20' }, cssProps)}>
+      <styled.div
+        {...restProps}
+        className={css(
+          { display: "flex", height: "20", width: "20" },
+          cssProps,
+        )}
+      >
         {children}
       </styled.div>
-    )
+    );
   }
 
   // Usage
 
   function App() {
-    return <SplitComponent margin="2">Click me</SplitComponent>
+    return <SplitComponent margin="2">Click me</SplitComponent>;
   }
   ```
 
@@ -4557,16 +4718,16 @@ export default defineConfig({
   together and the styles will be merged correctly.
 
   ```jsx
-  const Box = styled('div', {
+  const Box = styled("div", {
     base: {
-      background: 'red.light',
-      color: 'white',
+      background: "red.light",
+      color: "white",
     },
-  })
+  });
 
   const ExtendedBox = styled(Box, {
-    base: { background: 'red.dark' },
-  })
+    base: { background: "red.dark" },
+  });
 
   // <ExtendedBox> will have a background of `red.dark` and a color of `white`
   ```
@@ -4579,32 +4740,32 @@ export default defineConfig({
   - CVA or Inline CVA + Config Recipe = ❌
 
   ```jsx
-  import { button } from '../styled-system/recipes'
+  import { button } from "../styled-system/recipes";
 
-  const Button = styled('div', button)
+  const Button = styled("div", button);
 
   // ❌ This will throw an error
   const ExtendedButton = styled(Button, {
-    base: { background: 'red.dark' },
-  })
+    base: { background: "red.dark" },
+  });
   ```
 
 - fbf062c6: Added a new type to extract variants out of styled components
 
   ```tsx
-  import { StyledVariantProps } from '../styled-system/jsx'
+  import { StyledVariantProps } from "../styled-system/jsx";
 
-  const Button = styled('button', {
-    base: { color: 'black' },
+  const Button = styled("button", {
+    base: { color: "black" },
     variants: {
       state: {
-        error: { color: 'red' },
-        success: { color: 'green' },
+        error: { color: "red" },
+        success: { color: "green" },
       },
     },
-  })
+  });
 
-  type ButtonVariantProps = StyledVariantProps<typeof Button>
+  type ButtonVariantProps = StyledVariantProps<typeof Button>;
   //   ^ { state?: 'error' | 'success' | undefined }
   ```
 
@@ -4706,9 +4867,9 @@ export default defineConfig({
 
   ```ts
   interface FactoryOptions<TProps extends Dict> {
-    dataAttr?: boolean
-    defaultProps?: TProps
-    shouldForwardProp?(prop: string, variantKeys: string[]): boolean
+    dataAttr?: boolean;
+    defaultProps?: TProps;
+    shouldForwardProp?(prop: string, variantKeys: string[]): boolean;
   }
   ```
 
@@ -4716,16 +4877,16 @@ export default defineConfig({
     This is useful for testing and debugging.
 
   ```jsx
-  import { styled } from '../styled-system/jsx'
-  import { button } from '../styled-system/recipes'
+  import { styled } from "../styled-system/jsx";
+  import { button } from "../styled-system/recipes";
 
-  const Button = styled('button', button, { dataAttr: true })
+  const Button = styled("button", button, { dataAttr: true });
 
   const App = () => (
     <Button variant="secondary" mt="10px">
       Button
     </Button>
-  )
+  );
   // Will render something like <button data-recipe="button" class="btn btn--variant_purple mt_10px">Button</button>
   ```
 
@@ -4733,17 +4894,17 @@ export default defineConfig({
     override the default variants or base styles of a recipe.
 
   ```jsx
-  import { styled } from '../styled-system/jsx'
-  import { button } from '../styled-system/recipes'
+  import { styled } from "../styled-system/jsx";
+  import { button } from "../styled-system/recipes";
 
-  const Button = styled('button', button, {
+  const Button = styled("button", button, {
     defaultProps: {
-      variant: 'secondary',
-      px: '10px',
+      variant: "secondary",
+      px: "10px",
     },
-  })
+  });
 
-  const App = () => <Button>Button</Button>
+  const App = () => <Button>Button</Button>;
   // Will render something like <button class="btn btn--variant_secondary px_10px">Button</button>
   ```
 
@@ -4751,19 +4912,20 @@ export default defineConfig({
     props except recipe variants and style props are forwarded.
 
   ```jsx
-  import { styled } from '../styled-system/jsx'
-  import { button } from '../styled-system/recipes'
-  import { isCssProperty } from '../styled-system/jsx'
-  import { motion, isValidMotionProp } from 'framer-motion'
+  import { styled } from "../styled-system/jsx";
+  import { button } from "../styled-system/recipes";
+  import { isCssProperty } from "../styled-system/jsx";
+  import { motion, isValidMotionProp } from "framer-motion";
 
   const StyledMotion = styled(
     motion.div,
     {},
     {
       shouldForwardProp: (prop, variantKeys) =>
-        isValidMotionProp(prop) || (!variantKeys.includes(prop) && !isCssProperty(prop)),
+        isValidMotionProp(prop) ||
+        (!variantKeys.includes(prop) && !isCssProperty(prop)),
     },
-  )
+  );
   ```
 
   - @pandacss/types@0.15.4
@@ -4786,42 +4948,42 @@ export default defineConfig({
 
   ```ts
   export default defineConfig({
-    outdir: './outdir',
+    outdir: "./outdir",
     importMap: {
-      css: '#panda/styled-system/css',
-      recipes: '#panda/styled-system/recipes',
-      patterns: '#panda/styled-system/patterns',
-      jsx: '#panda/styled-system/jsx',
+      css: "#panda/styled-system/css",
+      recipes: "#panda/styled-system/recipes",
+      patterns: "#panda/styled-system/patterns",
+      jsx: "#panda/styled-system/jsx",
     },
-  })
+  });
   ```
 
   Or you could also make your outdir an actual package from your monorepo:
 
   ```ts
   export default defineConfig({
-    outdir: '../packages/styled-system',
+    outdir: "../packages/styled-system",
     importMap: {
-      css: '@monorepo/styled-system',
-      recipes: '@monorepo/styled-system',
-      patterns: '@monorepo/styled-system',
-      jsx: '@monorepo/styled-system',
+      css: "@monorepo/styled-system",
+      recipes: "@monorepo/styled-system",
+      patterns: "@monorepo/styled-system",
+      jsx: "@monorepo/styled-system",
     },
-  })
+  });
   ```
 
   Working with tsconfig paths aliases is easy:
 
   ```ts
   export default defineConfig({
-    outdir: 'styled-system',
+    outdir: "styled-system",
     importMap: {
-      css: 'styled-system/css',
-      recipes: 'styled-system/recipes',
-      patterns: 'styled-system/patterns',
-      jsx: 'styled-system/jsx',
+      css: "styled-system/css",
+      recipes: "styled-system/recipes",
+      patterns: "styled-system/patterns",
+      jsx: "styled-system/jsx",
     },
-  })
+  });
   ```
 
 - 1eb31118: Automatically allow overriding config recipe compoundVariants styles within the `styled` JSX factory,
@@ -4831,22 +4993,22 @@ export default defineConfig({
 
   ```ts file="panda.config.ts"
   const button = defineRecipe({
-    className: 'btn',
-    base: { color: 'green', fontSize: '16px' },
+    className: "btn",
+    base: { color: "green", fontSize: "16px" },
     variants: {
-      size: { small: { fontSize: '14px' } },
+      size: { small: { fontSize: "14px" } },
     },
-    compoundVariants: [{ size: 'small', css: { color: 'blue' } }],
-  })
+    compoundVariants: [{ size: "small", css: { color: "blue" } }],
+  });
   ```
 
   This would previously not merge the `color` property overrides, but now it does:
 
   ```tsx file="example.tsx"
-  import { styled } from '../styled-system/jsx'
-  import { button } from '../styled-system/recipes'
+  import { styled } from "../styled-system/jsx";
+  import { button } from "../styled-system/recipes";
 
-  const Button = styled('button', button)
+  const Button = styled("button", button);
 
   function App() {
     return (
@@ -4855,7 +5017,7 @@ export default defineConfig({
           Click me
         </Button>
       </>
-    )
+    );
   }
   ```
 
@@ -5034,8 +5196,8 @@ export default defineConfig({
     passed in. This is to allow the `css` function to merge the styles correctly.
 
   ```tsx
-  import { css } from '../styled-system/css'
-  css({ mx: '3', paddingTop: '4' }, { mx: '10', pt: '6' }) // => mx_10 pt_6
+  import { css } from "../styled-system/css";
+  css({ mx: "3", paddingTop: "4" }, { mx: "10", pt: "6" }); // => mx_10 pt_6
   ```
 
   > ⚠️ This approach should be preferred for merging styles over the current `cx` function, which will be reverted to
@@ -5060,26 +5222,29 @@ export default defineConfig({
   be merged correctly.
 
   ```tsx title="src/components/Button.tsx"
-  import { css } from '../../styled-system/css'
+  import { css } from "../../styled-system/css";
 
   export const Button = ({ css: cssProp = {}, children }) => {
-    const className = css({ display: 'flex', alignItem: 'center', color: 'black' }, cssProp)
-    return <button className={className}>{children}</button>
-  }
+    const className = css(
+      { display: "flex", alignItem: "center", color: "black" },
+      cssProp,
+    );
+    return <button className={className}>{children}</button>;
+  };
   ```
 
   Then you can use the `Button` component like this:
 
   ```tsx title="src/app/page.tsx"
-  import { css } from '../../styled-system/css'
-  import { Button, Thingy } from './Button'
+  import { css } from "../../styled-system/css";
+  import { Button, Thingy } from "./Button";
 
   export default function Page() {
     return (
-      <Button css={{ color: 'pink', _hover: { color: 'red' } }}>
+      <Button css={{ color: "pink", _hover: { color: "red" } }}>
         will result in `class="d_flex items_center text_pink hover:text_red"`
       </Button>
-    )
+    );
   }
   ```
 
@@ -5091,51 +5256,51 @@ export default defineConfig({
   **Pattern Example:**
 
   ```tsx title="src/components/Button.tsx"
-  import { hstack } from '../../styled-system/patterns'
-  import { css, cva } from '../../styled-system/css'
+  import { hstack } from "../../styled-system/patterns";
+  import { css, cva } from "../../styled-system/css";
 
   export const Button = ({ css: cssProp = {}, children }) => {
     // using the flex pattern
     const hstackProps = hstack.raw({
-      border: '1px solid',
-      _hover: { color: 'blue.400' },
-    })
+      border: "1px solid",
+      _hover: { color: "blue.400" },
+    });
 
     // merging the styles
-    const className = css(hstackProps, cssProp)
+    const className = css(hstackProps, cssProp);
 
-    return <button className={className}>{children}</button>
-  }
+    return <button className={className}>{children}</button>;
+  };
   ```
 
   **CVA Example:**
 
   ```tsx title="src/components/Button.tsx"
-  import { css, cva } from '../../styled-system/css'
+  import { css, cva } from "../../styled-system/css";
 
   const buttonRecipe = cva({
-    base: { display: 'flex', fontSize: 'lg' },
+    base: { display: "flex", fontSize: "lg" },
     variants: {
       variant: {
-        primary: { color: 'white', backgroundColor: 'blue.500' },
+        primary: { color: "white", backgroundColor: "blue.500" },
       },
     },
-  })
+  });
 
   export const Button = ({ css: cssProp = {}, children }) => {
     const className = css(
       // using the button recipe
-      buttonRecipe.raw({ variant: 'primary' }),
+      buttonRecipe.raw({ variant: "primary" }),
 
       // adding style overrides (internal)
-      { _hover: { color: 'blue.400' } },
+      { _hover: { color: "blue.400" } },
 
       // adding style overrides (external)
       cssProp,
-    )
+    );
 
-    return <button className={className}>{props.children}</button>
-  }
+    return <button className={className}>{props.children}</button>;
+  };
   ```
 
 - 36fdff89: Fix bug in generated js code for atomic slot recipe produce where `splitVariantProps` didn't work without
@@ -5182,7 +5347,14 @@ export default defineConfig({
   Example:
 
   ```tsx
-  <h1 className={cx(css({ mx: '3', paddingTop: '4' }), css({ mx: '10', pt: '6' }))}>Will result in "mx_10 pt_6"</h1>
+  <h1
+    className={cx(
+      css({ mx: "3", paddingTop: "4" }),
+      css({ mx: "10", pt: "6" }),
+    )}
+  >
+    Will result in "mx_10 pt_6"
+  </h1>
   ```
 
 - dfb3f85f: Add missing svg props types
@@ -5227,12 +5399,12 @@ export default defineConfig({
   **Definition**
 
   ```jsx
-  import { sva } from 'styled-system/css'
+  import { sva } from "styled-system/css";
 
   const button = sva({
-    slots: ['label', 'icon'],
+    slots: ["label", "icon"],
     base: {
-      label: { color: 'red', textDecoration: 'underline' },
+      label: { color: "red", textDecoration: "underline" },
     },
     variants: {
       rounded: {
@@ -5240,33 +5412,33 @@ export default defineConfig({
       },
       size: {
         sm: {
-          label: { fontSize: 'sm' },
-          icon: { fontSize: 'sm' },
+          label: { fontSize: "sm" },
+          icon: { fontSize: "sm" },
         },
         lg: {
-          label: { fontSize: 'lg' },
-          icon: { fontSize: 'lg', color: 'pink' },
+          label: { fontSize: "lg" },
+          icon: { fontSize: "lg", color: "pink" },
         },
       },
     },
     defaultVariants: {
-      size: 'sm',
+      size: "sm",
     },
-  })
+  });
   ```
 
   **Usage**
 
   ```jsx
   export function App() {
-    const btnClass = button({ size: 'lg', rounded: true })
+    const btnClass = button({ size: "lg", rounded: true });
 
     return (
       <button>
         <p class={btnClass.label}> Label</p>
         <p class={btnClass.icon}> Icon</p>
       </button>
-    )
+    );
   }
   ```
 
@@ -5331,26 +5503,26 @@ export default defineConfig({
   Update the `jsx` property to be used for advanced tracking of custom pattern components.
 
   ```jsx
-  import { Circle } from 'styled-system/jsx'
+  import { Circle } from "styled-system/jsx";
   const CustomCircle = ({ children, ...props }) => {
-    return <Circle {...props}>{children}</Circle>
-  }
+    return <Circle {...props}>{children}</Circle>;
+  };
   ```
 
   To track the `CustomCircle` component, you can now use the `jsx` property.
 
   ```js
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     patterns: {
       extend: {
         circle: {
-          jsx: ['CustomCircle'],
+          jsx: ["CustomCircle"],
         },
       },
     },
-  })
+  });
   ```
 
 ### Patch Changes
@@ -5448,9 +5620,17 @@ export default defineConfig({
   ```tsx
   const ComponentWithMultipleRecipes = ({ variant }) => {
     return (
-      <button className={cx(pinkRecipe({ variant }), greenRecipe({ variant }), blueRecipe({ variant }))}>Hello</button>
-    )
-  }
+      <button
+        className={cx(
+          pinkRecipe({ variant }),
+          greenRecipe({ variant }),
+          blueRecipe({ variant }),
+        )}
+      >
+        Hello
+      </button>
+    );
+  };
   ```
 
   Given a `panda.config.ts` with recipes each including a common `jsx` tag name, such as:
@@ -5534,7 +5714,7 @@ export default defineConfig({
   ```ts
   staticCss: {
     recipes: {
-      button: [{ size: ['*'], shape: ['*'] }]
+      button: [{ size: ["*"], shape: ["*"] }];
     }
   }
   ```
@@ -5544,7 +5724,7 @@ export default defineConfig({
   ```ts
   staticCss: {
     recipes: {
-      button: ['*']
+      button: ["*"];
     }
   }
   ```
@@ -5582,8 +5762,8 @@ export default defineConfig({
   // panda.config.ts
   export default defineConfig({
     //...
-    syntax: 'template-literal',
-  })
+    syntax: "template-literal",
+  });
   ```
 
   > For existing projects, you might need to run the `panda codegen --clean`
@@ -5615,12 +5795,12 @@ export default defineConfig({
 - 5b344b9c: Add support for disabling shorthand props
 
   ```ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
     shorthands: false,
-  })
+  });
   ```
 
 ### Patch Changes
@@ -5743,20 +5923,20 @@ Will now allow you to use the following syntax for token path:
   export default defaultConfig({
     conditions: {
       extend: {
-        supportHover: ['@media (hover: hover) and (pointer: fine)', '&:hover'],
+        supportHover: ["@media (hover: hover) and (pointer: fine)", "&:hover"],
       },
     },
-  })
+  });
   ```
 
   ```ts
-  import { css } from '../styled-system/css'
+  import { css } from "../styled-system/css";
 
   css({
     _supportHover: {
-      color: 'red',
+      color: "red",
     },
-  })
+  });
   ```
 
   will generate the following CSS:
@@ -5827,10 +6007,10 @@ Will now allow you to use the following syntax for token path:
 
   ```ts
   css({
-    padding: '1px',
-    paddingTop: '3px',
-    paddingBottom: '4px',
-  })
+    padding: "1px",
+    paddingTop: "3px",
+    paddingBottom: "4px",
+  });
   ```
 
   Will now always generate the following css:
@@ -5940,24 +6120,24 @@ Will now allow you to use the following syntax for token path:
     patterns: {
       hstack: {
         properties: {
-          justify: { type: 'property', value: 'justifyContent' },
-          gap: { type: 'property', value: 'gap' },
+          justify: { type: "property", value: "justifyContent" },
+          gap: { type: "property", value: "gap" },
         },
         // you can also use a token like '10'
-        defaultValues: { gap: '40px' },
+        defaultValues: { gap: "40px" },
         transform(props) {
-          const { justify, gap, ...rest } = props
+          const { justify, gap, ...rest } = props;
           return {
-            display: 'flex',
-            alignItems: 'center',
+            display: "flex",
+            alignItems: "center",
             justifyContent: justify,
             gap,
             ...rest,
-          }
+          };
         },
       },
     },
-  })
+  });
   ```
 
 ### Patch Changes
@@ -5999,39 +6179,54 @@ Will now allow you to use the following syntax for token path:
      * Called when the config is resolved, after all the presets are loaded and merged.
      * This is the first hook called, you can use it to tweak the config before the context is created.
      */
-    'config:resolved': (args: { conf: LoadConfigResult }) => MaybeAsyncReturn
+    "config:resolved": (args: { conf: LoadConfigResult }) => MaybeAsyncReturn;
     /**
      * Called when the Panda context has been created and the API is ready to be used.
      */
-    'context:created': (args: { ctx: ApiInterface; logger: LoggerInterface }) => void
+    "context:created": (args: {
+      ctx: ApiInterface;
+      logger: LoggerInterface;
+    }) => void;
     /**
      * Called when the config file or one of its dependencies (imports) has changed.
      */
-    'config:change': (args: { config: UserConfig }) => MaybeAsyncReturn
+    "config:change": (args: { config: UserConfig }) => MaybeAsyncReturn;
     /**
      * Called after reading the file content but before parsing it.
      * You can use this hook to transform the file content to a tsx-friendly syntax so that Panda's parser can parse it.
      * You can also use this hook to parse the file's content on your side using a custom parser, in this case you don't have to return anything.
      */
-    'parser:before': (args: { filePath: string; content: string }) => string | void
+    "parser:before": (args: {
+      filePath: string;
+      content: string;
+    }) => string | void;
     /**
      * Called after the file styles are extracted and processed into the resulting ParserResult object.
      * You can also use this hook to add your own extraction results from your custom parser to the ParserResult object.
      */
-    'parser:after': (args: { filePath: string; result: ParserResultInterface | undefined }) => void
+    "parser:after": (args: {
+      filePath: string;
+      result: ParserResultInterface | undefined;
+    }) => void;
     /**
      * Called after the codegen is completed
      */
-    'codegen:done': () => MaybeAsyncReturn
+    "codegen:done": () => MaybeAsyncReturn;
     /**
      * Called right before adding the design-system CSS (global, static, preflight, tokens, keyframes) to the final CSS
      * Called right before writing/injecting the final CSS (styles.css) that contains the design-system CSS and the parser CSS
      * You can use it to tweak the CSS content before it's written to disk or injected through the postcss plugin.
      */
-    'cssgen:done': (args: {
-      artifact: 'global' | 'static' | 'reset' | 'tokens' | 'keyframes' | 'styles.css'
-      content: string
-    }) => string | void
+    "cssgen:done": (args: {
+      artifact:
+        | "global"
+        | "static"
+        | "reset"
+        | "tokens"
+        | "keyframes"
+        | "styles.css";
+      content: string;
+    }) => string | void;
   }
   ```
 
@@ -6179,18 +6374,18 @@ Will now allow you to use the following syntax for token path:
 
   ```ts
   // config.strictTokens = true
-  css({ display: 'flex' }) // OK, didn't throw
-  css({ display: 'block' }) // OK, didn't throw
-  css({ display: 'abc' }) // ❌ would throw since 'abc' is not part of predefined values of 'display' even thought there is no config token for 'abc'
+  css({ display: "flex" }); // OK, didn't throw
+  css({ display: "block" }); // OK, didn't throw
+  css({ display: "abc" }); // ❌ would throw since 'abc' is not part of predefined values of 'display' even thought there is no config token for 'abc'
   ```
 
   now:
 
   ```ts
   // config.strictTokens = true
-  css({ display: 'flex' }) // OK, didn't throw
-  css({ display: 'block' }) // OK, didn't throw
-  css({ display: 'abc' }) // ✅ will not throw there is no config token for 'abc'
+  css({ display: "flex" }); // OK, didn't throw
+  css({ display: "block" }); // OK, didn't throw
+  css({ display: "abc" }); // ✅ will not throw there is no config token for 'abc'
   ```
 
   Instead, if you want the v.19.0 behavior, you can use the new `config.strictPropertyValues` option. You can combine it
@@ -6201,79 +6396,79 @@ Will now allow you to use the following syntax for token path:
 
   ```ts
   type StrictableProps =
-    | 'alignContent'
-    | 'alignItems'
-    | 'alignSelf'
-    | 'all'
-    | 'animationComposition'
-    | 'animationDirection'
-    | 'animationFillMode'
-    | 'appearance'
-    | 'backfaceVisibility'
-    | 'backgroundAttachment'
-    | 'backgroundClip'
-    | 'borderCollapse'
-    | 'border'
-    | 'borderBlock'
-    | 'borderBlockEnd'
-    | 'borderBlockStart'
-    | 'borderBottom'
-    | 'borderInline'
-    | 'borderInlineEnd'
-    | 'borderInlineStart'
-    | 'borderLeft'
-    | 'borderRight'
-    | 'borderTop'
-    | 'borderBlockEndStyle'
-    | 'borderBlockStartStyle'
-    | 'borderBlockStyle'
-    | 'borderBottomStyle'
-    | 'borderInlineEndStyle'
-    | 'borderInlineStartStyle'
-    | 'borderInlineStyle'
-    | 'borderLeftStyle'
-    | 'borderRightStyle'
-    | 'borderTopStyle'
-    | 'boxDecorationBreak'
-    | 'boxSizing'
-    | 'breakAfter'
-    | 'breakBefore'
-    | 'breakInside'
-    | 'captionSide'
-    | 'clear'
-    | 'columnFill'
-    | 'columnRuleStyle'
-    | 'contentVisibility'
-    | 'direction'
-    | 'display'
-    | 'emptyCells'
-    | 'flexDirection'
-    | 'flexWrap'
-    | 'float'
-    | 'fontKerning'
-    | 'forcedColorAdjust'
-    | 'isolation'
-    | 'lineBreak'
-    | 'mixBlendMode'
-    | 'objectFit'
-    | 'outlineStyle'
-    | 'overflow'
-    | 'overflowX'
-    | 'overflowY'
-    | 'overflowBlock'
-    | 'overflowInline'
-    | 'overflowWrap'
-    | 'pointerEvents'
-    | 'position'
-    | 'resize'
-    | 'scrollBehavior'
-    | 'touchAction'
-    | 'transformBox'
-    | 'transformStyle'
-    | 'userSelect'
-    | 'visibility'
-    | 'wordBreak'
-    | 'writingMode'
+    | "alignContent"
+    | "alignItems"
+    | "alignSelf"
+    | "all"
+    | "animationComposition"
+    | "animationDirection"
+    | "animationFillMode"
+    | "appearance"
+    | "backfaceVisibility"
+    | "backgroundAttachment"
+    | "backgroundClip"
+    | "borderCollapse"
+    | "border"
+    | "borderBlock"
+    | "borderBlockEnd"
+    | "borderBlockStart"
+    | "borderBottom"
+    | "borderInline"
+    | "borderInlineEnd"
+    | "borderInlineStart"
+    | "borderLeft"
+    | "borderRight"
+    | "borderTop"
+    | "borderBlockEndStyle"
+    | "borderBlockStartStyle"
+    | "borderBlockStyle"
+    | "borderBottomStyle"
+    | "borderInlineEndStyle"
+    | "borderInlineStartStyle"
+    | "borderInlineStyle"
+    | "borderLeftStyle"
+    | "borderRightStyle"
+    | "borderTopStyle"
+    | "boxDecorationBreak"
+    | "boxSizing"
+    | "breakAfter"
+    | "breakBefore"
+    | "breakInside"
+    | "captionSide"
+    | "clear"
+    | "columnFill"
+    | "columnRuleStyle"
+    | "contentVisibility"
+    | "direction"
+    | "display"
+    | "emptyCells"
+    | "flexDirection"
+    | "flexWrap"
+    | "float"
+    | "fontKerning"
+    | "forcedColorAdjust"
+    | "isolation"
+    | "lineBreak"
+    | "mixBlendMode"
+    | "objectFit"
+    | "outlineStyle"
+    | "overflow"
+    | "overflowX"
+    | "overflowY"
+    | "overflowBlock"
+    | "overflowInline"
+    | "overflowWrap"
+    | "pointerEvents"
+    | "position"
+    | "resize"
+    | "scrollBehavior"
+    | "touchAction"
+    | "transformBox"
+    | "transformStyle"
+    | "userSelect"
+    | "visibility"
+    | "wordBreak"
+    | "writingMode";
   ```
 
 - Updated dependencies [657ca5da]
@@ -6344,38 +6539,38 @@ Will now allow you to use the following syntax for token path:
 
   ```ts
   const card = defineRecipe({
-    className: 'card',
-    base: { color: 'white' },
+    className: "card",
+    base: { color: "white" },
     variants: {
       size: {
-        small: { fontSize: '14px' },
-        large: { fontSize: '18px' },
+        small: { fontSize: "14px" },
+        large: { fontSize: "18px" },
       },
       visual: {
-        primary: { backgroundColor: 'blue' },
-        secondary: { backgroundColor: 'gray' },
+        primary: { backgroundColor: "blue" },
+        secondary: { backgroundColor: "gray" },
       },
     },
-  })
+  });
 
   export default defineConfig({
     // ...
     staticCss: {
       recipes: {
-        card: ['*'], // this
+        card: ["*"], // this
 
         // was equivalent to:
         card: [
           // notice how `responsive: true` was implicitly added
-          { size: ['*'], responsive: true },
-          { visual: ['*'], responsive: true },
+          { size: ["*"], responsive: true },
+          { visual: ["*"], responsive: true },
         ],
 
         //   will now correctly be equivalent to:
-        card: [{ size: ['*'] }, { visual: ['*'] }],
+        card: [{ size: ["*"] }, { visual: ["*"] }],
       },
     },
-  })
+  });
   ```
 
   Here's the diff in the generated CSS:
@@ -6522,17 +6717,17 @@ Will now allow you to use the following syntax for token path:
 
   ```ts
   css({
-    bg: '[#3B00B9]', // ✅ was okay
+    bg: "[#3B00B9]", // ✅ was okay
     _dark: {
       // ✅ was okay
-      color: '[#3B00B9]',
+      color: "[#3B00B9]",
     },
 
     // ❌ Not okay, will be fixed in this patch
     color: {
-      _dark: '[#3B00B9]',
+      _dark: "[#3B00B9]",
     },
-  })
+  });
   ```
 
 - 647f05c9: Fix a CSS generation issue with `config.strictTokens` when using the `[xxx]` escape-hatch syntax with `!` or
@@ -6540,9 +6735,9 @@ Will now allow you to use the following syntax for token path:
 
   ```ts
   css({
-    borderWidth: '[2px!]',
-    width: '[2px !important]',
-  })
+    borderWidth: "[2px!]",
+    width: "[2px !important]",
+  });
   ```
 
 - Updated dependencies [8f4ce97c]
@@ -6583,18 +6778,18 @@ Will now allow you to use the following syntax for token path:
   and suffixing with `]`, e.g. writing `[123px]` as a value will bypass the token validation.
 
   ```ts
-  import { css } from '../styled-system/css'
+  import { css } from "../styled-system/css";
 
   css({
     // @ts-expect-error TS will throw when using from strictTokens: true
-    color: '#fff',
+    color: "#fff",
     // @ts-expect-error TS will throw when using from strictTokens: true
-    width: '100px',
+    width: "100px",
 
     // ✅ but this is now allowed:
-    bgColor: '[rgb(51 155 240)]',
-    fontSize: '[12px]',
-  })
+    bgColor: "[rgb(51 155 240)]",
+    fontSize: "[12px]",
+  });
   ```
 
 ### Patch Changes
@@ -6628,49 +6823,49 @@ Will now allow you to use the following syntax for token path:
 - 105f74ce: Add a way to specify a recipe's `staticCss` options from inside a recipe config, e.g.:
 
   ```js
-  import { defineRecipe } from '@pandacss/dev'
+  import { defineRecipe } from "@pandacss/dev";
 
   const card = defineRecipe({
-    className: 'card',
-    base: { color: 'white' },
+    className: "card",
+    base: { color: "white" },
     variants: {
       size: {
-        small: { fontSize: '14px' },
-        large: { fontSize: '18px' },
+        small: { fontSize: "14px" },
+        large: { fontSize: "18px" },
       },
     },
-    staticCss: [{ size: ['*'] }],
-  })
+    staticCss: [{ size: ["*"] }],
+  });
   ```
 
   would be the equivalent of defining it inside the main config:
 
   ```js
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
     staticCss: {
       recipes: {
         card: {
-          size: ['*'],
+          size: ["*"],
         },
       },
     },
-  })
+  });
   ```
 
 - 052283c2: Fix vue `styled` factory internal class merging, for example:
 
   ```vue
   <script setup>
-  import { styled } from '../styled-system/jsx'
+  import { styled } from "../styled-system/jsx";
 
-  const StyledButton = styled('button', {
+  const StyledButton = styled("button", {
     base: {
-      bgColor: 'red.300',
+      bgColor: "red.300",
     },
-  })
+  });
   </script>
   <template>
     <StyledButton id="test" class="test">
@@ -6739,18 +6934,18 @@ Will now allow you to use the following syntax for token path:
 
   ```ts
   // config.strictTokens = true
-  css({ display: 'flex' }) // OK, didn't throw
-  css({ display: 'block' }) // OK, didn't throw
-  css({ display: 'abc' }) // ❌ didn't throw even though 'abc' is not a valid value for 'display'
+  css({ display: "flex" }); // OK, didn't throw
+  css({ display: "block" }); // OK, didn't throw
+  css({ display: "abc" }); // ❌ didn't throw even though 'abc' is not a valid value for 'display'
   ```
 
   Now:
 
   ```ts
   // config.strictTokens = true
-  css({ display: 'flex' }) // OK, didn't throw
-  css({ display: 'block' }) // OK, didn't throw
-  css({ display: 'abc' }) // ✅ will throw since 'abc' is not a valid value for 'display'
+  css({ display: "flex" }); // OK, didn't throw
+  css({ display: "block" }); // OK, didn't throw
+  css({ display: "abc" }); // ✅ will throw since 'abc' is not a valid value for 'display'
   ```
 
 - Updated dependencies [61831040]
@@ -6809,22 +7004,28 @@ Will now allow you to use the following syntax for token path:
 - b7cb2073: Add a `splitCssProps` utility exported from the {outdir}/jsx entrypoint
 
   ```tsx
-  import { splitCssProps, styled } from '../styled-system/jsx'
-  import type { HTMLStyledProps } from '../styled-system/types'
+  import { splitCssProps, styled } from "../styled-system/jsx";
+  import type { HTMLStyledProps } from "../styled-system/types";
 
-  function SplitComponent({ children, ...props }: HTMLStyledProps<'div'>) {
-    const [cssProps, restProps] = splitCssProps(props)
+  function SplitComponent({ children, ...props }: HTMLStyledProps<"div">) {
+    const [cssProps, restProps] = splitCssProps(props);
     return (
-      <styled.div {...restProps} className={css({ display: 'flex', height: '20', width: '20' }, cssProps)}>
+      <styled.div
+        {...restProps}
+        className={css(
+          { display: "flex", height: "20", width: "20" },
+          cssProps,
+        )}
+      >
         {children}
       </styled.div>
-    )
+    );
   }
 
   // Usage
 
   function App() {
-    return <SplitComponent margin="2">Click me</SplitComponent>
+    return <SplitComponent margin="2">Click me</SplitComponent>;
   }
   ```
 
@@ -6917,16 +7118,16 @@ Will now allow you to use the following syntax for token path:
   together and the styles will be merged correctly.
 
   ```jsx
-  const Box = styled('div', {
+  const Box = styled("div", {
     base: {
-      background: 'red.light',
-      color: 'white',
+      background: "red.light",
+      color: "white",
     },
-  })
+  });
 
   const ExtendedBox = styled(Box, {
-    base: { background: 'red.dark' },
-  })
+    base: { background: "red.dark" },
+  });
 
   // <ExtendedBox> will have a background of `red.dark` and a color of `white`
   ```
@@ -6939,32 +7140,32 @@ Will now allow you to use the following syntax for token path:
   - CVA or Inline CVA + Config Recipe = ❌
 
   ```jsx
-  import { button } from '../styled-system/recipes'
+  import { button } from "../styled-system/recipes";
 
-  const Button = styled('div', button)
+  const Button = styled("div", button);
 
   // ❌ This will throw an error
   const ExtendedButton = styled(Button, {
-    base: { background: 'red.dark' },
-  })
+    base: { background: "red.dark" },
+  });
   ```
 
 - fbf062c6: Added a new type to extract variants out of styled components
 
   ```tsx
-  import { StyledVariantProps } from '../styled-system/jsx'
+  import { StyledVariantProps } from "../styled-system/jsx";
 
-  const Button = styled('button', {
-    base: { color: 'black' },
+  const Button = styled("button", {
+    base: { color: "black" },
     variants: {
       state: {
-        error: { color: 'red' },
-        success: { color: 'green' },
+        error: { color: "red" },
+        success: { color: "green" },
       },
     },
-  })
+  });
 
-  type ButtonVariantProps = StyledVariantProps<typeof Button>
+  type ButtonVariantProps = StyledVariantProps<typeof Button>;
   //   ^ { state?: 'error' | 'success' | undefined }
   ```
 
@@ -7066,9 +7267,9 @@ Will now allow you to use the following syntax for token path:
 
   ```ts
   interface FactoryOptions<TProps extends Dict> {
-    dataAttr?: boolean
-    defaultProps?: TProps
-    shouldForwardProp?(prop: string, variantKeys: string[]): boolean
+    dataAttr?: boolean;
+    defaultProps?: TProps;
+    shouldForwardProp?(prop: string, variantKeys: string[]): boolean;
   }
   ```
 
@@ -7076,16 +7277,16 @@ Will now allow you to use the following syntax for token path:
     This is useful for testing and debugging.
 
   ```jsx
-  import { styled } from '../styled-system/jsx'
-  import { button } from '../styled-system/recipes'
+  import { styled } from "../styled-system/jsx";
+  import { button } from "../styled-system/recipes";
 
-  const Button = styled('button', button, { dataAttr: true })
+  const Button = styled("button", button, { dataAttr: true });
 
   const App = () => (
     <Button variant="secondary" mt="10px">
       Button
     </Button>
-  )
+  );
   // Will render something like <button data-recipe="button" class="btn btn--variant_purple mt_10px">Button</button>
   ```
 
@@ -7093,17 +7294,17 @@ Will now allow you to use the following syntax for token path:
     override the default variants or base styles of a recipe.
 
   ```jsx
-  import { styled } from '../styled-system/jsx'
-  import { button } from '../styled-system/recipes'
+  import { styled } from "../styled-system/jsx";
+  import { button } from "../styled-system/recipes";
 
-  const Button = styled('button', button, {
+  const Button = styled("button", button, {
     defaultProps: {
-      variant: 'secondary',
-      px: '10px',
+      variant: "secondary",
+      px: "10px",
     },
-  })
+  });
 
-  const App = () => <Button>Button</Button>
+  const App = () => <Button>Button</Button>;
   // Will render something like <button class="btn btn--variant_secondary px_10px">Button</button>
   ```
 
@@ -7111,19 +7312,20 @@ Will now allow you to use the following syntax for token path:
     props except recipe variants and style props are forwarded.
 
   ```jsx
-  import { styled } from '../styled-system/jsx'
-  import { button } from '../styled-system/recipes'
-  import { isCssProperty } from '../styled-system/jsx'
-  import { motion, isValidMotionProp } from 'framer-motion'
+  import { styled } from "../styled-system/jsx";
+  import { button } from "../styled-system/recipes";
+  import { isCssProperty } from "../styled-system/jsx";
+  import { motion, isValidMotionProp } from "framer-motion";
 
   const StyledMotion = styled(
     motion.div,
     {},
     {
       shouldForwardProp: (prop, variantKeys) =>
-        isValidMotionProp(prop) || (!variantKeys.includes(prop) && !isCssProperty(prop)),
+        isValidMotionProp(prop) ||
+        (!variantKeys.includes(prop) && !isCssProperty(prop)),
     },
-  )
+  );
   ```
 
   - @pandacss/types@0.15.4
@@ -7146,42 +7348,42 @@ Will now allow you to use the following syntax for token path:
 
   ```ts
   export default defineConfig({
-    outdir: './outdir',
+    outdir: "./outdir",
     importMap: {
-      css: '#panda/styled-system/css',
-      recipes: '#panda/styled-system/recipes',
-      patterns: '#panda/styled-system/patterns',
-      jsx: '#panda/styled-system/jsx',
+      css: "#panda/styled-system/css",
+      recipes: "#panda/styled-system/recipes",
+      patterns: "#panda/styled-system/patterns",
+      jsx: "#panda/styled-system/jsx",
     },
-  })
+  });
   ```
 
   Or you could also make your outdir an actual package from your monorepo:
 
   ```ts
   export default defineConfig({
-    outdir: '../packages/styled-system',
+    outdir: "../packages/styled-system",
     importMap: {
-      css: '@monorepo/styled-system',
-      recipes: '@monorepo/styled-system',
-      patterns: '@monorepo/styled-system',
-      jsx: '@monorepo/styled-system',
+      css: "@monorepo/styled-system",
+      recipes: "@monorepo/styled-system",
+      patterns: "@monorepo/styled-system",
+      jsx: "@monorepo/styled-system",
     },
-  })
+  });
   ```
 
   Working with tsconfig paths aliases is easy:
 
   ```ts
   export default defineConfig({
-    outdir: 'styled-system',
+    outdir: "styled-system",
     importMap: {
-      css: 'styled-system/css',
-      recipes: 'styled-system/recipes',
-      patterns: 'styled-system/patterns',
-      jsx: 'styled-system/jsx',
+      css: "styled-system/css",
+      recipes: "styled-system/recipes",
+      patterns: "styled-system/patterns",
+      jsx: "styled-system/jsx",
     },
-  })
+  });
   ```
 
 - 1eb31118: Automatically allow overriding config recipe compoundVariants styles within the `styled` JSX factory,
@@ -7191,22 +7393,22 @@ Will now allow you to use the following syntax for token path:
 
   ```ts file="panda.config.ts"
   const button = defineRecipe({
-    className: 'btn',
-    base: { color: 'green', fontSize: '16px' },
+    className: "btn",
+    base: { color: "green", fontSize: "16px" },
     variants: {
-      size: { small: { fontSize: '14px' } },
+      size: { small: { fontSize: "14px" } },
     },
-    compoundVariants: [{ size: 'small', css: { color: 'blue' } }],
-  })
+    compoundVariants: [{ size: "small", css: { color: "blue" } }],
+  });
   ```
 
   This would previously not merge the `color` property overrides, but now it does:
 
   ```tsx file="example.tsx"
-  import { styled } from '../styled-system/jsx'
-  import { button } from '../styled-system/recipes'
+  import { styled } from "../styled-system/jsx";
+  import { button } from "../styled-system/recipes";
 
-  const Button = styled('button', button)
+  const Button = styled("button", button);
 
   function App() {
     return (
@@ -7215,7 +7417,7 @@ Will now allow you to use the following syntax for token path:
           Click me
         </Button>
       </>
-    )
+    );
   }
   ```
 
@@ -7394,8 +7596,8 @@ Will now allow you to use the following syntax for token path:
     passed in. This is to allow the `css` function to merge the styles correctly.
 
   ```tsx
-  import { css } from '../styled-system/css'
-  css({ mx: '3', paddingTop: '4' }, { mx: '10', pt: '6' }) // => mx_10 pt_6
+  import { css } from "../styled-system/css";
+  css({ mx: "3", paddingTop: "4" }, { mx: "10", pt: "6" }); // => mx_10 pt_6
   ```
 
   > ⚠️ This approach should be preferred for merging styles over the current `cx` function, which will be reverted to
@@ -7420,26 +7622,29 @@ Will now allow you to use the following syntax for token path:
   be merged correctly.
 
   ```tsx title="src/components/Button.tsx"
-  import { css } from '../../styled-system/css'
+  import { css } from "../../styled-system/css";
 
   export const Button = ({ css: cssProp = {}, children }) => {
-    const className = css({ display: 'flex', alignItem: 'center', color: 'black' }, cssProp)
-    return <button className={className}>{children}</button>
-  }
+    const className = css(
+      { display: "flex", alignItem: "center", color: "black" },
+      cssProp,
+    );
+    return <button className={className}>{children}</button>;
+  };
   ```
 
   Then you can use the `Button` component like this:
 
   ```tsx title="src/app/page.tsx"
-  import { css } from '../../styled-system/css'
-  import { Button, Thingy } from './Button'
+  import { css } from "../../styled-system/css";
+  import { Button, Thingy } from "./Button";
 
   export default function Page() {
     return (
-      <Button css={{ color: 'pink', _hover: { color: 'red' } }}>
+      <Button css={{ color: "pink", _hover: { color: "red" } }}>
         will result in `class="d_flex items_center text_pink hover:text_red"`
       </Button>
-    )
+    );
   }
   ```
 
@@ -7451,51 +7656,51 @@ Will now allow you to use the following syntax for token path:
   **Pattern Example:**
 
   ```tsx title="src/components/Button.tsx"
-  import { hstack } from '../../styled-system/patterns'
-  import { css, cva } from '../../styled-system/css'
+  import { hstack } from "../../styled-system/patterns";
+  import { css, cva } from "../../styled-system/css";
 
   export const Button = ({ css: cssProp = {}, children }) => {
     // using the flex pattern
     const hstackProps = hstack.raw({
-      border: '1px solid',
-      _hover: { color: 'blue.400' },
-    })
+      border: "1px solid",
+      _hover: { color: "blue.400" },
+    });
 
     // merging the styles
-    const className = css(hstackProps, cssProp)
+    const className = css(hstackProps, cssProp);
 
-    return <button className={className}>{children}</button>
-  }
+    return <button className={className}>{children}</button>;
+  };
   ```
 
   **CVA Example:**
 
   ```tsx title="src/components/Button.tsx"
-  import { css, cva } from '../../styled-system/css'
+  import { css, cva } from "../../styled-system/css";
 
   const buttonRecipe = cva({
-    base: { display: 'flex', fontSize: 'lg' },
+    base: { display: "flex", fontSize: "lg" },
     variants: {
       variant: {
-        primary: { color: 'white', backgroundColor: 'blue.500' },
+        primary: { color: "white", backgroundColor: "blue.500" },
       },
     },
-  })
+  });
 
   export const Button = ({ css: cssProp = {}, children }) => {
     const className = css(
       // using the button recipe
-      buttonRecipe.raw({ variant: 'primary' }),
+      buttonRecipe.raw({ variant: "primary" }),
 
       // adding style overrides (internal)
-      { _hover: { color: 'blue.400' } },
+      { _hover: { color: "blue.400" } },
 
       // adding style overrides (external)
       cssProp,
-    )
+    );
 
-    return <button className={className}>{props.children}</button>
-  }
+    return <button className={className}>{props.children}</button>;
+  };
   ```
 
 - 36fdff89: Fix bug in generated js code for atomic slot recipe produce where `splitVariantProps` didn't work without
@@ -7542,7 +7747,14 @@ Will now allow you to use the following syntax for token path:
   Example:
 
   ```tsx
-  <h1 className={cx(css({ mx: '3', paddingTop: '4' }), css({ mx: '10', pt: '6' }))}>Will result in "mx_10 pt_6"</h1>
+  <h1
+    className={cx(
+      css({ mx: "3", paddingTop: "4" }),
+      css({ mx: "10", pt: "6" }),
+    )}
+  >
+    Will result in "mx_10 pt_6"
+  </h1>
   ```
 
 - dfb3f85f: Add missing svg props types
@@ -7587,12 +7799,12 @@ Will now allow you to use the following syntax for token path:
   **Definition**
 
   ```jsx
-  import { sva } from 'styled-system/css'
+  import { sva } from "styled-system/css";
 
   const button = sva({
-    slots: ['label', 'icon'],
+    slots: ["label", "icon"],
     base: {
-      label: { color: 'red', textDecoration: 'underline' },
+      label: { color: "red", textDecoration: "underline" },
     },
     variants: {
       rounded: {
@@ -7600,33 +7812,33 @@ Will now allow you to use the following syntax for token path:
       },
       size: {
         sm: {
-          label: { fontSize: 'sm' },
-          icon: { fontSize: 'sm' },
+          label: { fontSize: "sm" },
+          icon: { fontSize: "sm" },
         },
         lg: {
-          label: { fontSize: 'lg' },
-          icon: { fontSize: 'lg', color: 'pink' },
+          label: { fontSize: "lg" },
+          icon: { fontSize: "lg", color: "pink" },
         },
       },
     },
     defaultVariants: {
-      size: 'sm',
+      size: "sm",
     },
-  })
+  });
   ```
 
   **Usage**
 
   ```jsx
   export function App() {
-    const btnClass = button({ size: 'lg', rounded: true })
+    const btnClass = button({ size: "lg", rounded: true });
 
     return (
       <button>
         <p class={btnClass.label}> Label</p>
         <p class={btnClass.icon}> Icon</p>
       </button>
-    )
+    );
   }
   ```
 
@@ -7691,26 +7903,26 @@ Will now allow you to use the following syntax for token path:
   Update the `jsx` property to be used for advanced tracking of custom pattern components.
 
   ```jsx
-  import { Circle } from 'styled-system/jsx'
+  import { Circle } from "styled-system/jsx";
   const CustomCircle = ({ children, ...props }) => {
-    return <Circle {...props}>{children}</Circle>
-  }
+    return <Circle {...props}>{children}</Circle>;
+  };
   ```
 
   To track the `CustomCircle` component, you can now use the `jsx` property.
 
   ```js
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     patterns: {
       extend: {
         circle: {
-          jsx: ['CustomCircle'],
+          jsx: ["CustomCircle"],
         },
       },
     },
-  })
+  });
   ```
 
 ### Patch Changes
@@ -7808,9 +8020,17 @@ Will now allow you to use the following syntax for token path:
   ```tsx
   const ComponentWithMultipleRecipes = ({ variant }) => {
     return (
-      <button className={cx(pinkRecipe({ variant }), greenRecipe({ variant }), blueRecipe({ variant }))}>Hello</button>
-    )
-  }
+      <button
+        className={cx(
+          pinkRecipe({ variant }),
+          greenRecipe({ variant }),
+          blueRecipe({ variant }),
+        )}
+      >
+        Hello
+      </button>
+    );
+  };
   ```
 
   Given a `panda.config.ts` with recipes each including a common `jsx` tag name, such as:
@@ -7894,7 +8114,7 @@ Will now allow you to use the following syntax for token path:
   ```ts
   staticCss: {
     recipes: {
-      button: [{ size: ['*'], shape: ['*'] }]
+      button: [{ size: ["*"], shape: ["*"] }];
     }
   }
   ```
@@ -7904,7 +8124,7 @@ Will now allow you to use the following syntax for token path:
   ```ts
   staticCss: {
     recipes: {
-      button: ['*']
+      button: ["*"];
     }
   }
   ```
@@ -7942,8 +8162,8 @@ Will now allow you to use the following syntax for token path:
   // panda.config.ts
   export default defineConfig({
     //...
-    syntax: 'template-literal',
-  })
+    syntax: "template-literal",
+  });
   ```
 
   > For existing projects, you might need to run the `panda codegen --clean`
@@ -7975,12 +8195,12 @@ Will now allow you to use the following syntax for token path:
 - 5b344b9c: Add support for disabling shorthand props
 
   ```ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
     shorthands: false,
-  })
+  });
   ```
 
 ### Patch Changes
@@ -8100,11 +8320,11 @@ This hook is called right before writing the codegen files to disk. You can use
 export default defineConfig({
   // ...
   hooks: {
-    'codegen:prepare': ({ artifacts, changed }) => {
+    "codegen:prepare": ({ artifacts, changed }) => {
       // do something with the emitted js/d.ts files
     },
   },
-})
+});
 ```
 
 - 49c760cd: Fix issue where responsive array in css and cva doesn't generate the correct classname
@@ -8122,11 +8342,11 @@ export default defineConfig({
   ```js
   module.exports = {
     plugins: {
-      '@pandacss/dev/postcss': {
-        logfile: './logs/panda.log',
+      "@pandacss/dev/postcss": {
+        logfile: "./logs/panda.log",
       },
     },
-  }
+  };
   ```
 
 - Updated dependencies [74485ef1]
@@ -8165,24 +8385,24 @@ export default defineConfig({
     patterns: {
       hstack: {
         properties: {
-          justify: { type: 'property', value: 'justifyContent' },
-          gap: { type: 'property', value: 'gap' },
+          justify: { type: "property", value: "justifyContent" },
+          gap: { type: "property", value: "gap" },
         },
         // you can also use a token like '10'
-        defaultValues: { gap: '40px' },
+        defaultValues: { gap: "40px" },
         transform(props) {
-          const { justify, gap, ...rest } = props
+          const { justify, gap, ...rest } = props;
           return {
-            display: 'flex',
-            alignItems: 'center',
+            display: "flex",
+            alignItems: "center",
             justifyContent: justify,
             gap,
             ...rest,
-          }
+          };
         },
       },
     },
-  })
+  });
   ```
 
 ### Patch Changes
@@ -8224,39 +8444,54 @@ export default defineConfig({
      * Called when the config is resolved, after all the presets are loaded and merged.
      * This is the first hook called, you can use it to tweak the config before the context is created.
      */
-    'config:resolved': (args: { conf: LoadConfigResult }) => MaybeAsyncReturn
+    "config:resolved": (args: { conf: LoadConfigResult }) => MaybeAsyncReturn;
     /**
      * Called when the Panda context has been created and the API is ready to be used.
      */
-    'context:created': (args: { ctx: ApiInterface; logger: LoggerInterface }) => void
+    "context:created": (args: {
+      ctx: ApiInterface;
+      logger: LoggerInterface;
+    }) => void;
     /**
      * Called when the config file or one of its dependencies (imports) has changed.
      */
-    'config:change': (args: { config: UserConfig }) => MaybeAsyncReturn
+    "config:change": (args: { config: UserConfig }) => MaybeAsyncReturn;
     /**
      * Called after reading the file content but before parsing it.
      * You can use this hook to transform the file content to a tsx-friendly syntax so that Panda's parser can parse it.
      * You can also use this hook to parse the file's content on your side using a custom parser, in this case you don't have to return anything.
      */
-    'parser:before': (args: { filePath: string; content: string }) => string | void
+    "parser:before": (args: {
+      filePath: string;
+      content: string;
+    }) => string | void;
     /**
      * Called after the file styles are extracted and processed into the resulting ParserResult object.
      * You can also use this hook to add your own extraction results from your custom parser to the ParserResult object.
      */
-    'parser:after': (args: { filePath: string; result: ParserResultInterface | undefined }) => void
+    "parser:after": (args: {
+      filePath: string;
+      result: ParserResultInterface | undefined;
+    }) => void;
     /**
      * Called after the codegen is completed
      */
-    'codegen:done': () => MaybeAsyncReturn
+    "codegen:done": () => MaybeAsyncReturn;
     /**
      * Called right before adding the design-system CSS (global, static, preflight, tokens, keyframes) to the final CSS
      * Called right before writing/injecting the final CSS (styles.css) that contains the design-system CSS and the parser CSS
      * You can use it to tweak the CSS content before it's written to disk or injected through the postcss plugin.
      */
-    'cssgen:done': (args: {
-      artifact: 'global' | 'static' | 'reset' | 'tokens' | 'keyframes' | 'styles.css'
-      content: string
-    }) => string | void
+    "cssgen:done": (args: {
+      artifact:
+        | "global"
+        | "static"
+        | "reset"
+        | "tokens"
+        | "keyframes"
+        | "styles.css";
+      content: string;
+    }) => string | void;
   }
   ```
 
@@ -8404,18 +8639,18 @@ export default defineConfig({
 
   ```ts
   // config.strictTokens = true
-  css({ display: 'flex' }) // OK, didn't throw
-  css({ display: 'block' }) // OK, didn't throw
-  css({ display: 'abc' }) // ❌ would throw since 'abc' is not part of predefined values of 'display' even thought there is no config token for 'abc'
+  css({ display: "flex" }); // OK, didn't throw
+  css({ display: "block" }); // OK, didn't throw
+  css({ display: "abc" }); // ❌ would throw since 'abc' is not part of predefined values of 'display' even thought there is no config token for 'abc'
   ```
 
   now:
 
   ```ts
   // config.strictTokens = true
-  css({ display: 'flex' }) // OK, didn't throw
-  css({ display: 'block' }) // OK, didn't throw
-  css({ display: 'abc' }) // ✅ will not throw there is no config token for 'abc'
+  css({ display: "flex" }); // OK, didn't throw
+  css({ display: "block" }); // OK, didn't throw
+  css({ display: "abc" }); // ✅ will not throw there is no config token for 'abc'
   ```
 
   Instead, if you want the v.19.0 behavior, you can use the new `config.strictPropertyValues` option. You can combine it
@@ -8426,79 +8661,79 @@ export default defineConfig({
 
   ```ts
   type StrictableProps =
-    | 'alignContent'
-    | 'alignItems'
-    | 'alignSelf'
-    | 'all'
-    | 'animationComposition'
-    | 'animationDirection'
-    | 'animationFillMode'
-    | 'appearance'
-    | 'backfaceVisibility'
-    | 'backgroundAttachment'
-    | 'backgroundClip'
-    | 'borderCollapse'
-    | 'border'
-    | 'borderBlock'
-    | 'borderBlockEnd'
-    | 'borderBlockStart'
-    | 'borderBottom'
-    | 'borderInline'
-    | 'borderInlineEnd'
-    | 'borderInlineStart'
-    | 'borderLeft'
-    | 'borderRight'
-    | 'borderTop'
-    | 'borderBlockEndStyle'
-    | 'borderBlockStartStyle'
-    | 'borderBlockStyle'
-    | 'borderBottomStyle'
-    | 'borderInlineEndStyle'
-    | 'borderInlineStartStyle'
-    | 'borderInlineStyle'
-    | 'borderLeftStyle'
-    | 'borderRightStyle'
-    | 'borderTopStyle'
-    | 'boxDecorationBreak'
-    | 'boxSizing'
-    | 'breakAfter'
-    | 'breakBefore'
-    | 'breakInside'
-    | 'captionSide'
-    | 'clear'
-    | 'columnFill'
-    | 'columnRuleStyle'
-    | 'contentVisibility'
-    | 'direction'
-    | 'display'
-    | 'emptyCells'
-    | 'flexDirection'
-    | 'flexWrap'
-    | 'float'
-    | 'fontKerning'
-    | 'forcedColorAdjust'
-    | 'isolation'
-    | 'lineBreak'
-    | 'mixBlendMode'
-    | 'objectFit'
-    | 'outlineStyle'
-    | 'overflow'
-    | 'overflowX'
-    | 'overflowY'
-    | 'overflowBlock'
-    | 'overflowInline'
-    | 'overflowWrap'
-    | 'pointerEvents'
-    | 'position'
-    | 'resize'
-    | 'scrollBehavior'
-    | 'touchAction'
-    | 'transformBox'
-    | 'transformStyle'
-    | 'userSelect'
-    | 'visibility'
-    | 'wordBreak'
-    | 'writingMode'
+    | "alignContent"
+    | "alignItems"
+    | "alignSelf"
+    | "all"
+    | "animationComposition"
+    | "animationDirection"
+    | "animationFillMode"
+    | "appearance"
+    | "backfaceVisibility"
+    | "backgroundAttachment"
+    | "backgroundClip"
+    | "borderCollapse"
+    | "border"
+    | "borderBlock"
+    | "borderBlockEnd"
+    | "borderBlockStart"
+    | "borderBottom"
+    | "borderInline"
+    | "borderInlineEnd"
+    | "borderInlineStart"
+    | "borderLeft"
+    | "borderRight"
+    | "borderTop"
+    | "borderBlockEndStyle"
+    | "borderBlockStartStyle"
+    | "borderBlockStyle"
+    | "borderBottomStyle"
+    | "borderInlineEndStyle"
+    | "borderInlineStartStyle"
+    | "borderInlineStyle"
+    | "borderLeftStyle"
+    | "borderRightStyle"
+    | "borderTopStyle"
+    | "boxDecorationBreak"
+    | "boxSizing"
+    | "breakAfter"
+    | "breakBefore"
+    | "breakInside"
+    | "captionSide"
+    | "clear"
+    | "columnFill"
+    | "columnRuleStyle"
+    | "contentVisibility"
+    | "direction"
+    | "display"
+    | "emptyCells"
+    | "flexDirection"
+    | "flexWrap"
+    | "float"
+    | "fontKerning"
+    | "forcedColorAdjust"
+    | "isolation"
+    | "lineBreak"
+    | "mixBlendMode"
+    | "objectFit"
+    | "outlineStyle"
+    | "overflow"
+    | "overflowX"
+    | "overflowY"
+    | "overflowBlock"
+    | "overflowInline"
+    | "overflowWrap"
+    | "pointerEvents"
+    | "position"
+    | "resize"
+    | "scrollBehavior"
+    | "touchAction"
+    | "transformBox"
+    | "transformStyle"
+    | "userSelect"
+    | "visibility"
+    | "wordBreak"
+    | "writingMode";
   ```
 
 - Updated dependencies [657ca5da]
@@ -8569,38 +8804,38 @@ export default defineConfig({
 
   ```ts
   const card = defineRecipe({
-    className: 'card',
-    base: { color: 'white' },
+    className: "card",
+    base: { color: "white" },
     variants: {
       size: {
-        small: { fontSize: '14px' },
-        large: { fontSize: '18px' },
+        small: { fontSize: "14px" },
+        large: { fontSize: "18px" },
       },
       visual: {
-        primary: { backgroundColor: 'blue' },
-        secondary: { backgroundColor: 'gray' },
+        primary: { backgroundColor: "blue" },
+        secondary: { backgroundColor: "gray" },
       },
     },
-  })
+  });
 
   export default defineConfig({
     // ...
     staticCss: {
       recipes: {
-        card: ['*'], // this
+        card: ["*"], // this
 
         // was equivalent to:
         card: [
           // notice how `responsive: true` was implicitly added
-          { size: ['*'], responsive: true },
-          { visual: ['*'], responsive: true },
+          { size: ["*"], responsive: true },
+          { visual: ["*"], responsive: true },
         ],
 
         //   will now correctly be equivalent to:
-        card: [{ size: ['*'] }, { visual: ['*'] }],
+        card: [{ size: ["*"] }, { visual: ["*"] }],
       },
     },
-  })
+  });
   ```
 
   Here's the diff in the generated CSS:
@@ -8747,17 +8982,17 @@ export default defineConfig({
 
   ```ts
   css({
-    bg: '[#3B00B9]', // ✅ was okay
+    bg: "[#3B00B9]", // ✅ was okay
     _dark: {
       // ✅ was okay
-      color: '[#3B00B9]',
+      color: "[#3B00B9]",
     },
 
     // ❌ Not okay, will be fixed in this patch
     color: {
-      _dark: '[#3B00B9]',
+      _dark: "[#3B00B9]",
     },
-  })
+  });
   ```
 
 - 647f05c9: Fix a CSS generation issue with `config.strictTokens` when using the `[xxx]` escape-hatch syntax with `!` or
@@ -8765,9 +9000,9 @@ export default defineConfig({
 
   ```ts
   css({
-    borderWidth: '[2px!]',
-    width: '[2px !important]',
-  })
+    borderWidth: "[2px!]",
+    width: "[2px !important]",
+  });
   ```
 
 - Updated dependencies [8f4ce97c]
@@ -8808,18 +9043,18 @@ export default defineConfig({
   and suffixing with `]`, e.g. writing `[123px]` as a value will bypass the token validation.
 
   ```ts
-  import { css } from '../styled-system/css'
+  import { css } from "../styled-system/css";
 
   css({
     // @ts-expect-error TS will throw when using from strictTokens: true
-    color: '#fff',
+    color: "#fff",
     // @ts-expect-error TS will throw when using from strictTokens: true
-    width: '100px',
+    width: "100px",
 
     // ✅ but this is now allowed:
-    bgColor: '[rgb(51 155 240)]',
-    fontSize: '[12px]',
-  })
+    bgColor: "[rgb(51 155 240)]",
+    fontSize: "[12px]",
+  });
   ```
 
 ### Patch Changes
@@ -8853,49 +9088,49 @@ export default defineConfig({
 - 105f74ce: Add a way to specify a recipe's `staticCss` options from inside a recipe config, e.g.:
 
   ```js
-  import { defineRecipe } from '@pandacss/dev'
+  import { defineRecipe } from "@pandacss/dev";
 
   const card = defineRecipe({
-    className: 'card',
-    base: { color: 'white' },
+    className: "card",
+    base: { color: "white" },
     variants: {
       size: {
-        small: { fontSize: '14px' },
-        large: { fontSize: '18px' },
+        small: { fontSize: "14px" },
+        large: { fontSize: "18px" },
       },
     },
-    staticCss: [{ size: ['*'] }],
-  })
+    staticCss: [{ size: ["*"] }],
+  });
   ```
 
   would be the equivalent of defining it inside the main config:
 
   ```js
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
     staticCss: {
       recipes: {
         card: {
-          size: ['*'],
+          size: ["*"],
         },
       },
     },
-  })
+  });
   ```
 
 - 052283c2: Fix vue `styled` factory internal class merging, for example:
 
   ```vue
   <script setup>
-  import { styled } from '../styled-system/jsx'
+  import { styled } from "../styled-system/jsx";
 
-  const StyledButton = styled('button', {
+  const StyledButton = styled("button", {
     base: {
-      bgColor: 'red.300',
+      bgColor: "red.300",
     },
-  })
+  });
   </script>
   <template>
     <StyledButton id="test" class="test">
@@ -8964,18 +9199,18 @@ export default defineConfig({
 
   ```ts
   // config.strictTokens = true
-  css({ display: 'flex' }) // OK, didn't throw
-  css({ display: 'block' }) // OK, didn't throw
-  css({ display: 'abc' }) // ❌ didn't throw even though 'abc' is not a valid value for 'display'
+  css({ display: "flex" }); // OK, didn't throw
+  css({ display: "block" }); // OK, didn't throw
+  css({ display: "abc" }); // ❌ didn't throw even though 'abc' is not a valid value for 'display'
   ```
 
   Now:
 
   ```ts
   // config.strictTokens = true
-  css({ display: 'flex' }) // OK, didn't throw
-  css({ display: 'block' }) // OK, didn't throw
-  css({ display: 'abc' }) // ✅ will throw since 'abc' is not a valid value for 'display'
+  css({ display: "flex" }); // OK, didn't throw
+  css({ display: "block" }); // OK, didn't throw
+  css({ display: "abc" }); // ✅ will throw since 'abc' is not a valid value for 'display'
   ```
 
 - Updated dependencies [61831040]
@@ -9034,22 +9269,28 @@ export default defineConfig({
 - b7cb2073: Add a `splitCssProps` utility exported from the {outdir}/jsx entrypoint
 
   ```tsx
-  import { splitCssProps, styled } from '../styled-system/jsx'
-  import type { HTMLStyledProps } from '../styled-system/types'
+  import { splitCssProps, styled } from "../styled-system/jsx";
+  import type { HTMLStyledProps } from "../styled-system/types";
 
-  function SplitComponent({ children, ...props }: HTMLStyledProps<'div'>) {
-    const [cssProps, restProps] = splitCssProps(props)
+  function SplitComponent({ children, ...props }: HTMLStyledProps<"div">) {
+    const [cssProps, restProps] = splitCssProps(props);
     return (
-      <styled.div {...restProps} className={css({ display: 'flex', height: '20', width: '20' }, cssProps)}>
+      <styled.div
+        {...restProps}
+        className={css(
+          { display: "flex", height: "20", width: "20" },
+          cssProps,
+        )}
+      >
         {children}
       </styled.div>
-    )
+    );
   }
 
   // Usage
 
   function App() {
-    return <SplitComponent margin="2">Click me</SplitComponent>
+    return <SplitComponent margin="2">Click me</SplitComponent>;
   }
   ```
 
@@ -9142,16 +9383,16 @@ export default defineConfig({
   together and the styles will be merged correctly.
 
   ```jsx
-  const Box = styled('div', {
+  const Box = styled("div", {
     base: {
-      background: 'red.light',
-      color: 'white',
+      background: "red.light",
+      color: "white",
     },
-  })
+  });
 
   const ExtendedBox = styled(Box, {
-    base: { background: 'red.dark' },
-  })
+    base: { background: "red.dark" },
+  });
 
   // <ExtendedBox> will have a background of `red.dark` and a color of `white`
   ```
@@ -9164,32 +9405,32 @@ export default defineConfig({
   - CVA or Inline CVA + Config Recipe = ❌
 
   ```jsx
-  import { button } from '../styled-system/recipes'
+  import { button } from "../styled-system/recipes";
 
-  const Button = styled('div', button)
+  const Button = styled("div", button);
 
   // ❌ This will throw an error
   const ExtendedButton = styled(Button, {
-    base: { background: 'red.dark' },
-  })
+    base: { background: "red.dark" },
+  });
   ```
 
 - fbf062c6: Added a new type to extract variants out of styled components
 
   ```tsx
-  import { StyledVariantProps } from '../styled-system/jsx'
+  import { StyledVariantProps } from "../styled-system/jsx";
 
-  const Button = styled('button', {
-    base: { color: 'black' },
+  const Button = styled("button", {
+    base: { color: "black" },
     variants: {
       state: {
-        error: { color: 'red' },
-        success: { color: 'green' },
+        error: { color: "red" },
+        success: { color: "green" },
       },
     },
-  })
+  });
 
-  type ButtonVariantProps = StyledVariantProps<typeof Button>
+  type ButtonVariantProps = StyledVariantProps<typeof Button>;
   //   ^ { state?: 'error' | 'success' | undefined }
   ```
 
@@ -9291,9 +9532,9 @@ export default defineConfig({
 
   ```ts
   interface FactoryOptions<TProps extends Dict> {
-    dataAttr?: boolean
-    defaultProps?: TProps
-    shouldForwardProp?(prop: string, variantKeys: string[]): boolean
+    dataAttr?: boolean;
+    defaultProps?: TProps;
+    shouldForwardProp?(prop: string, variantKeys: string[]): boolean;
   }
   ```
 
@@ -9301,16 +9542,16 @@ export default defineConfig({
     This is useful for testing and debugging.
 
   ```jsx
-  import { styled } from '../styled-system/jsx'
-  import { button } from '../styled-system/recipes'
+  import { styled } from "../styled-system/jsx";
+  import { button } from "../styled-system/recipes";
 
-  const Button = styled('button', button, { dataAttr: true })
+  const Button = styled("button", button, { dataAttr: true });
 
   const App = () => (
     <Button variant="secondary" mt="10px">
       Button
     </Button>
-  )
+  );
   // Will render something like <button data-recipe="button" class="btn btn--variant_purple mt_10px">Button</button>
   ```
 
@@ -9318,17 +9559,17 @@ export default defineConfig({
     override the default variants or base styles of a recipe.
 
   ```jsx
-  import { styled } from '../styled-system/jsx'
-  import { button } from '../styled-system/recipes'
+  import { styled } from "../styled-system/jsx";
+  import { button } from "../styled-system/recipes";
 
-  const Button = styled('button', button, {
+  const Button = styled("button", button, {
     defaultProps: {
-      variant: 'secondary',
-      px: '10px',
+      variant: "secondary",
+      px: "10px",
     },
-  })
+  });
 
-  const App = () => <Button>Button</Button>
+  const App = () => <Button>Button</Button>;
   // Will render something like <button class="btn btn--variant_secondary px_10px">Button</button>
   ```
 
@@ -9336,19 +9577,20 @@ export default defineConfig({
     props except recipe variants and style props are forwarded.
 
   ```jsx
-  import { styled } from '../styled-system/jsx'
-  import { button } from '../styled-system/recipes'
-  import { isCssProperty } from '../styled-system/jsx'
-  import { motion, isValidMotionProp } from 'framer-motion'
+  import { styled } from "../styled-system/jsx";
+  import { button } from "../styled-system/recipes";
+  import { isCssProperty } from "../styled-system/jsx";
+  import { motion, isValidMotionProp } from "framer-motion";
 
   const StyledMotion = styled(
     motion.div,
     {},
     {
       shouldForwardProp: (prop, variantKeys) =>
-        isValidMotionProp(prop) || (!variantKeys.includes(prop) && !isCssProperty(prop)),
+        isValidMotionProp(prop) ||
+        (!variantKeys.includes(prop) && !isCssProperty(prop)),
     },
-  )
+  );
   ```
 
   - @pandacss/types@0.15.4
@@ -9371,42 +9613,42 @@ export default defineConfig({
 
   ```ts
   export default defineConfig({
-    outdir: './outdir',
+    outdir: "./outdir",
     importMap: {
-      css: '#panda/styled-system/css',
-      recipes: '#panda/styled-system/recipes',
-      patterns: '#panda/styled-system/patterns',
-      jsx: '#panda/styled-system/jsx',
+      css: "#panda/styled-system/css",
+      recipes: "#panda/styled-system/recipes",
+      patterns: "#panda/styled-system/patterns",
+      jsx: "#panda/styled-system/jsx",
     },
-  })
+  });
   ```
 
   Or you could also make your outdir an actual package from your monorepo:
 
   ```ts
   export default defineConfig({
-    outdir: '../packages/styled-system',
+    outdir: "../packages/styled-system",
     importMap: {
-      css: '@monorepo/styled-system',
-      recipes: '@monorepo/styled-system',
-      patterns: '@monorepo/styled-system',
-      jsx: '@monorepo/styled-system',
+      css: "@monorepo/styled-system",
+      recipes: "@monorepo/styled-system",
+      patterns: "@monorepo/styled-system",
+      jsx: "@monorepo/styled-system",
     },
-  })
+  });
   ```
 
   Working with tsconfig paths aliases is easy:
 
   ```ts
   export default defineConfig({
-    outdir: 'styled-system',
+    outdir: "styled-system",
     importMap: {
-      css: 'styled-system/css',
-      recipes: 'styled-system/recipes',
-      patterns: 'styled-system/patterns',
-      jsx: 'styled-system/jsx',
+      css: "styled-system/css",
+      recipes: "styled-system/recipes",
+      patterns: "styled-system/patterns",
+      jsx: "styled-system/jsx",
     },
-  })
+  });
   ```
 
 - 1eb31118: Automatically allow overriding config recipe compoundVariants styles within the `styled` JSX factory,
@@ -9416,22 +9658,22 @@ export default defineConfig({
 
   ```ts file="panda.config.ts"
   const button = defineRecipe({
-    className: 'btn',
-    base: { color: 'green', fontSize: '16px' },
+    className: "btn",
+    base: { color: "green", fontSize: "16px" },
     variants: {
-      size: { small: { fontSize: '14px' } },
+      size: { small: { fontSize: "14px" } },
     },
-    compoundVariants: [{ size: 'small', css: { color: 'blue' } }],
-  })
+    compoundVariants: [{ size: "small", css: { color: "blue" } }],
+  });
   ```
 
   This would previously not merge the `color` property overrides, but now it does:
 
   ```tsx file="example.tsx"
-  import { styled } from '../styled-system/jsx'
-  import { button } from '../styled-system/recipes'
+  import { styled } from "../styled-system/jsx";
+  import { button } from "../styled-system/recipes";
 
-  const Button = styled('button', button)
+  const Button = styled("button", button);
 
   function App() {
     return (
@@ -9440,7 +9682,7 @@ export default defineConfig({
           Click me
         </Button>
       </>
-    )
+    );
   }
   ```
 
@@ -9619,8 +9861,8 @@ export default defineConfig({
     passed in. This is to allow the `css` function to merge the styles correctly.
 
   ```tsx
-  import { css } from '../styled-system/css'
-  css({ mx: '3', paddingTop: '4' }, { mx: '10', pt: '6' }) // => mx_10 pt_6
+  import { css } from "../styled-system/css";
+  css({ mx: "3", paddingTop: "4" }, { mx: "10", pt: "6" }); // => mx_10 pt_6
   ```
 
   > ⚠️ This approach should be preferred for merging styles over the current `cx` function, which will be reverted to
@@ -9645,26 +9887,29 @@ export default defineConfig({
   be merged correctly.
 
   ```tsx title="src/components/Button.tsx"
-  import { css } from '../../styled-system/css'
+  import { css } from "../../styled-system/css";
 
   export const Button = ({ css: cssProp = {}, children }) => {
-    const className = css({ display: 'flex', alignItem: 'center', color: 'black' }, cssProp)
-    return <button className={className}>{children}</button>
-  }
+    const className = css(
+      { display: "flex", alignItem: "center", color: "black" },
+      cssProp,
+    );
+    return <button className={className}>{children}</button>;
+  };
   ```
 
   Then you can use the `Button` component like this:
 
   ```tsx title="src/app/page.tsx"
-  import { css } from '../../styled-system/css'
-  import { Button, Thingy } from './Button'
+  import { css } from "../../styled-system/css";
+  import { Button, Thingy } from "./Button";
 
   export default function Page() {
     return (
-      <Button css={{ color: 'pink', _hover: { color: 'red' } }}>
+      <Button css={{ color: "pink", _hover: { color: "red" } }}>
         will result in `class="d_flex items_center text_pink hover:text_red"`
       </Button>
-    )
+    );
   }
   ```
 
@@ -9676,51 +9921,51 @@ export default defineConfig({
   **Pattern Example:**
 
   ```tsx title="src/components/Button.tsx"
-  import { hstack } from '../../styled-system/patterns'
-  import { css, cva } from '../../styled-system/css'
+  import { hstack } from "../../styled-system/patterns";
+  import { css, cva } from "../../styled-system/css";
 
   export const Button = ({ css: cssProp = {}, children }) => {
     // using the flex pattern
     const hstackProps = hstack.raw({
-      border: '1px solid',
-      _hover: { color: 'blue.400' },
-    })
+      border: "1px solid",
+      _hover: { color: "blue.400" },
+    });
 
     // merging the styles
-    const className = css(hstackProps, cssProp)
+    const className = css(hstackProps, cssProp);
 
-    return <button className={className}>{children}</button>
-  }
+    return <button className={className}>{children}</button>;
+  };
   ```
 
   **CVA Example:**
 
   ```tsx title="src/components/Button.tsx"
-  import { css, cva } from '../../styled-system/css'
+  import { css, cva } from "../../styled-system/css";
 
   const buttonRecipe = cva({
-    base: { display: 'flex', fontSize: 'lg' },
+    base: { display: "flex", fontSize: "lg" },
     variants: {
       variant: {
-        primary: { color: 'white', backgroundColor: 'blue.500' },
+        primary: { color: "white", backgroundColor: "blue.500" },
       },
     },
-  })
+  });
 
   export const Button = ({ css: cssProp = {}, children }) => {
     const className = css(
       // using the button recipe
-      buttonRecipe.raw({ variant: 'primary' }),
+      buttonRecipe.raw({ variant: "primary" }),
 
       // adding style overrides (internal)
-      { _hover: { color: 'blue.400' } },
+      { _hover: { color: "blue.400" } },
 
       // adding style overrides (external)
       cssProp,
-    )
+    );
 
-    return <button className={className}>{props.children}</button>
-  }
+    return <button className={className}>{props.children}</button>;
+  };
   ```
 
 - 36fdff89: Fix bug in generated js code for atomic slot recipe produce where `splitVariantProps` didn't work without
@@ -9767,7 +10012,14 @@ export default defineConfig({
   Example:
 
   ```tsx
-  <h1 className={cx(css({ mx: '3', paddingTop: '4' }), css({ mx: '10', pt: '6' }))}>Will result in "mx_10 pt_6"</h1>
+  <h1
+    className={cx(
+      css({ mx: "3", paddingTop: "4" }),
+      css({ mx: "10", pt: "6" }),
+    )}
+  >
+    Will result in "mx_10 pt_6"
+  </h1>
   ```
 
 - dfb3f85f: Add missing svg props types
@@ -9812,12 +10064,12 @@ export default defineConfig({
   **Definition**
 
   ```jsx
-  import { sva } from 'styled-system/css'
+  import { sva } from "styled-system/css";
 
   const button = sva({
-    slots: ['label', 'icon'],
+    slots: ["label", "icon"],
     base: {
-      label: { color: 'red', textDecoration: 'underline' },
+      label: { color: "red", textDecoration: "underline" },
     },
     variants: {
       rounded: {
@@ -9825,33 +10077,33 @@ export default defineConfig({
       },
       size: {
         sm: {
-          label: { fontSize: 'sm' },
-          icon: { fontSize: 'sm' },
+          label: { fontSize: "sm" },
+          icon: { fontSize: "sm" },
         },
         lg: {
-          label: { fontSize: 'lg' },
-          icon: { fontSize: 'lg', color: 'pink' },
+          label: { fontSize: "lg" },
+          icon: { fontSize: "lg", color: "pink" },
         },
       },
     },
     defaultVariants: {
-      size: 'sm',
+      size: "sm",
     },
-  })
+  });
   ```
 
   **Usage**
 
   ```jsx
   export function App() {
-    const btnClass = button({ size: 'lg', rounded: true })
+    const btnClass = button({ size: "lg", rounded: true });
 
     return (
       <button>
         <p class={btnClass.label}> Label</p>
         <p class={btnClass.icon}> Icon</p>
       </button>
-    )
+    );
   }
   ```
 
@@ -9916,26 +10168,26 @@ export default defineConfig({
   Update the `jsx` property to be used for advanced tracking of custom pattern components.
 
   ```jsx
-  import { Circle } from 'styled-system/jsx'
+  import { Circle } from "styled-system/jsx";
   const CustomCircle = ({ children, ...props }) => {
-    return <Circle {...props}>{children}</Circle>
-  }
+    return <Circle {...props}>{children}</Circle>;
+  };
   ```
 
   To track the `CustomCircle` component, you can now use the `jsx` property.
 
   ```js
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     patterns: {
       extend: {
         circle: {
-          jsx: ['CustomCircle'],
+          jsx: ["CustomCircle"],
         },
       },
     },
-  })
+  });
   ```
 
 ### Patch Changes
@@ -10033,9 +10285,17 @@ export default defineConfig({
   ```tsx
   const ComponentWithMultipleRecipes = ({ variant }) => {
     return (
-      <button className={cx(pinkRecipe({ variant }), greenRecipe({ variant }), blueRecipe({ variant }))}>Hello</button>
-    )
-  }
+      <button
+        className={cx(
+          pinkRecipe({ variant }),
+          greenRecipe({ variant }),
+          blueRecipe({ variant }),
+        )}
+      >
+        Hello
+      </button>
+    );
+  };
   ```
 
   Given a `panda.config.ts` with recipes each including a common `jsx` tag name, such as:
@@ -10119,7 +10379,7 @@ export default defineConfig({
   ```ts
   staticCss: {
     recipes: {
-      button: [{ size: ['*'], shape: ['*'] }]
+      button: [{ size: ["*"], shape: ["*"] }];
     }
   }
   ```
@@ -10129,7 +10389,7 @@ export default defineConfig({
   ```ts
   staticCss: {
     recipes: {
-      button: ['*']
+      button: ["*"];
     }
   }
   ```
@@ -10167,8 +10427,8 @@ export default defineConfig({
   // panda.config.ts
   export default defineConfig({
     //...
-    syntax: 'template-literal',
-  })
+    syntax: "template-literal",
+  });
   ```
 
   > For existing projects, you might need to run the `panda codegen --clean`
@@ -10200,12 +10460,12 @@ export default defineConfig({
 - 5b344b9c: Add support for disabling shorthand props
 
   ```ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
     shorthands: false,
-  })
+  });
   ```
 
 ### Patch Changes
diff --git a/packages/generator/package.json b/packages/generator/package.json
index 39680a012..e95c1fd30 100644
--- a/packages/generator/package.json
+++ b/packages/generator/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/generator",
-  "version": "0.38.0",
+  "version": "0.39.0",
   "description": "The css generator for css panda",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
diff --git a/packages/is-valid-prop/CHANGELOG.md b/packages/is-valid-prop/CHANGELOG.md
index 1da795d98..8c26b5284 100644
--- a/packages/is-valid-prop/CHANGELOG.md
+++ b/packages/is-valid-prop/CHANGELOG.md
@@ -1,5 +1,7 @@
 # @pandacss/is-valid-prop
 
+## 0.39.0
+
 ## 0.38.0
 
 ## 0.37.2
@@ -31,12 +33,12 @@
     theme: {
       extend: {
         colors: {
-          primary: { value: 'blue' },
+          primary: { value: "blue" },
         },
         // borderWidths: {}, // ⚠️ nothing defined here
       },
     },
-  })
+  });
   ```
 
   ```ts
@@ -47,8 +49,8 @@
 
     // ✅ after this PR, TS will not throw an error anymore as you don't have any `borderWidths` tokens
     // if you add one, this will error again (as it's supposed to)
-    borderWidths: '123px',
-  })
+    borderWidths: "123px",
+  });
   ```
 
   ## Description
diff --git a/packages/is-valid-prop/package.json b/packages/is-valid-prop/package.json
index fcf334898..f0e96bcad 100644
--- a/packages/is-valid-prop/package.json
+++ b/packages/is-valid-prop/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/is-valid-prop",
-  "version": "0.38.0",
+  "version": "0.39.0",
   "description": "Common error messages for css panda",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
diff --git a/packages/logger/CHANGELOG.md b/packages/logger/CHANGELOG.md
index 1ff61dd86..7bb9cee6b 100644
--- a/packages/logger/CHANGELOG.md
+++ b/packages/logger/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @pandacss/logger
 
+## 0.39.0
+
+### Patch Changes
+
+- Updated dependencies [221c9a2]
+- Updated dependencies [c3e797e]
+  - @pandacss/types@0.39.0
+
 ## 0.38.0
 
 ### Patch Changes
@@ -145,11 +153,11 @@
   ```js
   module.exports = {
     plugins: {
-      '@pandacss/dev/postcss': {
-        logfile: './logs/panda.log',
+      "@pandacss/dev/postcss": {
+        logfile: "./logs/panda.log",
       },
     },
-  }
+  };
   ```
 
 - Updated dependencies [74485ef1]
diff --git a/packages/logger/package.json b/packages/logger/package.json
index 8c295ea05..584c89a7b 100644
--- a/packages/logger/package.json
+++ b/packages/logger/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/logger",
-  "version": "0.38.0",
+  "version": "0.39.0",
   "description": "The core css panda library",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
diff --git a/packages/node/CHANGELOG.md b/packages/node/CHANGELOG.md
index 2db781c13..02e2b474d 100644
--- a/packages/node/CHANGELOG.md
+++ b/packages/node/CHANGELOG.md
@@ -1,5 +1,25 @@
 # @pandacss/node
 
+## 0.39.0
+
+### Patch Changes
+
+- Updated dependencies [df2546a]
+- Updated dependencies [221c9a2]
+- Updated dependencies [0714f31]
+- Updated dependencies [2116abe]
+- Updated dependencies [c3e797e]
+- Updated dependencies [935ec86]
+  - @pandacss/generator@0.39.0
+  - @pandacss/parser@0.39.0
+  - @pandacss/types@0.39.0
+  - @pandacss/core@0.39.0
+  - @pandacss/shared@0.39.0
+  - @pandacss/config@0.39.0
+  - @pandacss/logger@0.39.0
+  - @pandacss/token-dictionary@0.39.0
+  - @pandacss/extractor@0.39.0
+
 ## 0.38.0
 
 ### Minor Changes
@@ -287,10 +307,10 @@
 
   ```ts
   css({
-    padding: '1px',
-    paddingTop: '3px',
-    paddingBottom: '4px',
-  })
+    padding: "1px",
+    paddingTop: "3px",
+    paddingBottom: "4px",
+  });
   ```
 
   Will now always generate the following css:
@@ -418,8 +438,8 @@
   ```ts
   export default defineConfig({
     // ...
-    dependencies: ['path/to/files/**.ts'],
-  })
+    dependencies: ["path/to/files/**.ts"],
+  });
   ```
 
   - Invoke `config:change` hook in more situations (when the `--watch` flag is passed to `panda codegen`,
@@ -471,39 +491,54 @@
      * Called when the config is resolved, after all the presets are loaded and merged.
      * This is the first hook called, you can use it to tweak the config before the context is created.
      */
-    'config:resolved': (args: { conf: LoadConfigResult }) => MaybeAsyncReturn
+    "config:resolved": (args: { conf: LoadConfigResult }) => MaybeAsyncReturn;
     /**
      * Called when the Panda context has been created and the API is ready to be used.
      */
-    'context:created': (args: { ctx: ApiInterface; logger: LoggerInterface }) => void
+    "context:created": (args: {
+      ctx: ApiInterface;
+      logger: LoggerInterface;
+    }) => void;
     /**
      * Called when the config file or one of its dependencies (imports) has changed.
      */
-    'config:change': (args: { config: UserConfig }) => MaybeAsyncReturn
+    "config:change": (args: { config: UserConfig }) => MaybeAsyncReturn;
     /**
      * Called after reading the file content but before parsing it.
      * You can use this hook to transform the file content to a tsx-friendly syntax so that Panda's parser can parse it.
      * You can also use this hook to parse the file's content on your side using a custom parser, in this case you don't have to return anything.
      */
-    'parser:before': (args: { filePath: string; content: string }) => string | void
+    "parser:before": (args: {
+      filePath: string;
+      content: string;
+    }) => string | void;
     /**
      * Called after the file styles are extracted and processed into the resulting ParserResult object.
      * You can also use this hook to add your own extraction results from your custom parser to the ParserResult object.
      */
-    'parser:after': (args: { filePath: string; result: ParserResultInterface | undefined }) => void
+    "parser:after": (args: {
+      filePath: string;
+      result: ParserResultInterface | undefined;
+    }) => void;
     /**
      * Called after the codegen is completed
      */
-    'codegen:done': () => MaybeAsyncReturn
+    "codegen:done": () => MaybeAsyncReturn;
     /**
      * Called right before adding the design-system CSS (global, static, preflight, tokens, keyframes) to the final CSS
      * Called right before writing/injecting the final CSS (styles.css) that contains the design-system CSS and the parser CSS
      * You can use it to tweak the CSS content before it's written to disk or injected through the postcss plugin.
      */
-    'cssgen:done': (args: {
-      artifact: 'global' | 'static' | 'reset' | 'tokens' | 'keyframes' | 'styles.css'
-      content: string
-    }) => string | void
+    "cssgen:done": (args: {
+      artifact:
+        | "global"
+        | "static"
+        | "reset"
+        | "tokens"
+        | "keyframes"
+        | "styles.css";
+      content: string;
+    }) => string | void;
   }
   ```
 
@@ -1121,16 +1156,16 @@
   together and the styles will be merged correctly.
 
   ```jsx
-  const Box = styled('div', {
+  const Box = styled("div", {
     base: {
-      background: 'red.light',
-      color: 'white',
+      background: "red.light",
+      color: "white",
     },
-  })
+  });
 
   const ExtendedBox = styled(Box, {
-    base: { background: 'red.dark' },
-  })
+    base: { background: "red.dark" },
+  });
 
   // <ExtendedBox> will have a background of `red.dark` and a color of `white`
   ```
@@ -1143,14 +1178,14 @@
   - CVA or Inline CVA + Config Recipe = ❌
 
   ```jsx
-  import { button } from '../styled-system/recipes'
+  import { button } from "../styled-system/recipes";
 
-  const Button = styled('div', button)
+  const Button = styled("div", button);
 
   // ❌ This will throw an error
   const ExtendedButton = styled(Button, {
-    base: { background: 'red.dark' },
-  })
+    base: { background: "red.dark" },
+  });
   ```
 
 ### Patch Changes
@@ -1954,11 +1989,11 @@ This hook is called right before writing the codegen files to disk. You can use
 export default defineConfig({
   // ...
   hooks: {
-    'codegen:prepare': ({ artifacts, changed }) => {
+    "codegen:prepare": ({ artifacts, changed }) => {
       // do something with the emitted js/d.ts files
     },
   },
-})
+});
 ```
 
 - d5977c24: - Add a `--logfile` flag to the `panda`, `panda codegen`, `panda cssgen` and `panda debug` commands.
@@ -1975,11 +2010,11 @@ export default defineConfig({
   ```js
   module.exports = {
     plugins: {
-      '@pandacss/dev/postcss': {
-        logfile: './logs/panda.log',
+      "@pandacss/dev/postcss": {
+        logfile: "./logs/panda.log",
       },
     },
-  }
+  };
   ```
 
 - Updated dependencies [0dd45b6a]
@@ -2029,8 +2064,8 @@ export default defineConfig({
   ```ts
   export default defineConfig({
     // ...
-    dependencies: ['path/to/files/**.ts'],
-  })
+    dependencies: ["path/to/files/**.ts"],
+  });
   ```
 
   - Invoke `config:change` hook in more situations (when the `--watch` flag is passed to `panda codegen`,
@@ -2082,39 +2117,54 @@ export default defineConfig({
      * Called when the config is resolved, after all the presets are loaded and merged.
      * This is the first hook called, you can use it to tweak the config before the context is created.
      */
-    'config:resolved': (args: { conf: LoadConfigResult }) => MaybeAsyncReturn
+    "config:resolved": (args: { conf: LoadConfigResult }) => MaybeAsyncReturn;
     /**
      * Called when the Panda context has been created and the API is ready to be used.
      */
-    'context:created': (args: { ctx: ApiInterface; logger: LoggerInterface }) => void
+    "context:created": (args: {
+      ctx: ApiInterface;
+      logger: LoggerInterface;
+    }) => void;
     /**
      * Called when the config file or one of its dependencies (imports) has changed.
      */
-    'config:change': (args: { config: UserConfig }) => MaybeAsyncReturn
+    "config:change": (args: { config: UserConfig }) => MaybeAsyncReturn;
     /**
      * Called after reading the file content but before parsing it.
      * You can use this hook to transform the file content to a tsx-friendly syntax so that Panda's parser can parse it.
      * You can also use this hook to parse the file's content on your side using a custom parser, in this case you don't have to return anything.
      */
-    'parser:before': (args: { filePath: string; content: string }) => string | void
+    "parser:before": (args: {
+      filePath: string;
+      content: string;
+    }) => string | void;
     /**
      * Called after the file styles are extracted and processed into the resulting ParserResult object.
      * You can also use this hook to add your own extraction results from your custom parser to the ParserResult object.
      */
-    'parser:after': (args: { filePath: string; result: ParserResultInterface | undefined }) => void
+    "parser:after": (args: {
+      filePath: string;
+      result: ParserResultInterface | undefined;
+    }) => void;
     /**
      * Called after the codegen is completed
      */
-    'codegen:done': () => MaybeAsyncReturn
+    "codegen:done": () => MaybeAsyncReturn;
     /**
      * Called right before adding the design-system CSS (global, static, preflight, tokens, keyframes) to the final CSS
      * Called right before writing/injecting the final CSS (styles.css) that contains the design-system CSS and the parser CSS
      * You can use it to tweak the CSS content before it's written to disk or injected through the postcss plugin.
      */
-    'cssgen:done': (args: {
-      artifact: 'global' | 'static' | 'reset' | 'tokens' | 'keyframes' | 'styles.css'
-      content: string
-    }) => string | void
+    "cssgen:done": (args: {
+      artifact:
+        | "global"
+        | "static"
+        | "reset"
+        | "tokens"
+        | "keyframes"
+        | "styles.css";
+      content: string;
+    }) => string | void;
   }
   ```
 
@@ -2732,16 +2782,16 @@ export default defineConfig({
   together and the styles will be merged correctly.
 
   ```jsx
-  const Box = styled('div', {
+  const Box = styled("div", {
     base: {
-      background: 'red.light',
-      color: 'white',
+      background: "red.light",
+      color: "white",
     },
-  })
+  });
 
   const ExtendedBox = styled(Box, {
-    base: { background: 'red.dark' },
-  })
+    base: { background: "red.dark" },
+  });
 
   // <ExtendedBox> will have a background of `red.dark` and a color of `white`
   ```
@@ -2754,14 +2804,14 @@ export default defineConfig({
   - CVA or Inline CVA + Config Recipe = ❌
 
   ```jsx
-  import { button } from '../styled-system/recipes'
+  import { button } from "../styled-system/recipes";
 
-  const Button = styled('div', button)
+  const Button = styled("div", button);
 
   // ❌ This will throw an error
   const ExtendedButton = styled(Button, {
-    base: { background: 'red.dark' },
-  })
+    base: { background: "red.dark" },
+  });
   ```
 
 ### Patch Changes
diff --git a/packages/node/package.json b/packages/node/package.json
index cdc2265c7..c34b8036a 100644
--- a/packages/node/package.json
+++ b/packages/node/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/node",
-  "version": "0.38.0",
+  "version": "0.39.0",
   "description": "The core css panda library",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
diff --git a/packages/parser/CHANGELOG.md b/packages/parser/CHANGELOG.md
index 0fab8fee0..a19ea494d 100644
--- a/packages/parser/CHANGELOG.md
+++ b/packages/parser/CHANGELOG.md
@@ -1,5 +1,60 @@
 # @pandacss/parser
 
+## 0.39.0
+
+### Minor Changes
+
+- df2546a: **BREAKING 💥**
+
+  Remove `linkBox` pattern in favor of using adding `position: relative` when using the `linkOverlay` pattern.
+
+  **Before**
+
+  ```jsx
+  import { linkBox, linkOverlay } from "styled-system/patterns";
+
+  const App = () => {
+    return (
+      <div className={linkBox()}>
+        <img src="https://via.placeholder.com/150" alt="placeholder" />
+        <a href="#" className={linkOverlay()}>
+          Link
+        </a>
+      </div>
+    );
+  };
+  ```
+
+  **After**
+
+  ```jsx
+  import { css } from "styled-system/css";
+  import { linkOverlay } from "styled-system/patterns";
+
+  const App = () => {
+    return (
+      <div className={css({ pos: "relative" })}>
+        <img src="https://via.placeholder.com/150" alt="placeholder" />
+        <a href="#" className={linkOverlay()}>
+          Link
+        </a>
+      </div>
+    );
+  };
+  ```
+
+### Patch Changes
+
+- Updated dependencies [221c9a2]
+- Updated dependencies [c3e797e]
+- Updated dependencies [935ec86]
+  - @pandacss/types@0.39.0
+  - @pandacss/core@0.39.0
+  - @pandacss/shared@0.39.0
+  - @pandacss/config@0.39.0
+  - @pandacss/logger@0.39.0
+  - @pandacss/extractor@0.39.0
+
 ## 0.38.0
 
 ### Patch Changes
@@ -9,23 +64,28 @@
   This makes it even easier to merge styles from multiple sources.
 
   ```tsx
-  import { Stack, styled } from '../styled-system/jsx'
+  import { Stack, styled } from "../styled-system/jsx";
 
   const HeroSection = (props) => {
     return (
-      <Stack css={[{ color: 'blue.300', padding: '4' }, props.css]}>
-        <styled.div css={[{ fontSize: '2xl' }, props.hero]}>Hero Section</styled.div>
+      <Stack css={[{ color: "blue.300", padding: "4" }, props.css]}>
+        <styled.div css={[{ fontSize: "2xl" }, props.hero]}>
+          Hero Section
+        </styled.div>
       </Stack>
-    )
-  }
+    );
+  };
 
   const App = () => {
     return (
       <>
-        <HeroSection css={{ backgroundColor: 'yellow.300' }} hero={css.raw({ fontSize: '4xl', color: 'red.300' })} />
+        <HeroSection
+          css={{ backgroundColor: "yellow.300" }}
+          hero={css.raw({ fontSize: "4xl", color: "red.300" })}
+        />
       </>
-    )
-  }
+    );
+  };
   ```
 
   should render something like:
@@ -67,21 +127,21 @@
 - 99870bb: Fix issue where setting the pattern `jsx` option with dot notation didn't work.
 
   ```jsx
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
     patterns: {
       extend: {
         grid: {
-          jsx: ['Form.Group', 'Grid'],
+          jsx: ["Form.Group", "Grid"],
         },
         stack: {
-          jsx: ['Form.Action', 'Stack'],
+          jsx: ["Form.Action", "Stack"],
         },
       },
     },
-  })
+  });
   ```
 
 - Updated dependencies [88049c5]
@@ -123,7 +183,7 @@
 - 35bd134: Fix JSX matching with recipes after introducing namespace imports
 
   ```ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
@@ -131,11 +191,11 @@
       extend: {
         slotRecipes: {
           tabs: {
-            className: 'tabs',
-            slots: ['root', 'list', 'trigger', 'content', 'indicator'],
+            className: "tabs",
+            slots: ["root", "list", "trigger", "content", "indicator"],
             base: {
               root: {
-                display: 'flex',
+                display: "flex",
                 // ...
               },
             },
@@ -143,7 +203,7 @@
         },
       },
     },
-  })
+  });
   ```
 
   ```tsx
@@ -159,8 +219,8 @@
           <Tabs.Indicator />
         </Tabs.List>
       </Tabs.Root>
-    )
-  }
+    );
+  };
   ```
 
   We introduced a bug in [v0.34.2](https://github.com/chakra-ui/panda/blob/main/CHANGELOG.md#0342---2024-03-08) where
@@ -199,11 +259,13 @@
 - c459b43: Fix extraction of JSX `styled` factory when using namespace imports
 
   ```tsx
-  import * as pandaJsx from '../styled-system/jsx'
+  import * as pandaJsx from "../styled-system/jsx";
 
   // ✅ this will work now
-  pandaJsx.styled('div', { base: { color: 'red' } })
-  const App = () => <pandaJsx.styled.span color="blue">Hello</pandaJsx.styled.span>
+  pandaJsx.styled("div", { base: { color: "red" } });
+  const App = () => (
+    <pandaJsx.styled.span color="blue">Hello</pandaJsx.styled.span>
+  );
   ```
 
 - Updated dependencies [50db354]
@@ -235,18 +297,18 @@
 - 0bf09f2: Allow using namespaced imports
 
   ```ts
-  import * as p from 'styled-system/patterns'
-  import * as recipes from 'styled-system/recipes'
-  import * as panda from 'styled-system/css'
+  import * as p from "styled-system/patterns";
+  import * as recipes from "styled-system/recipes";
+  import * as panda from "styled-system/css";
 
   // this will now be extracted
-  p.stack({ mt: '40px' })
+  p.stack({ mt: "40px" });
 
-  recipes.cardStyle({ rounded: true })
+  recipes.cardStyle({ rounded: true });
 
-  panda.css({ color: 'red' })
-  panda.cva({ base: { color: 'blue' } })
-  panda.sva({ base: { root: { color: 'green' } } })
+  panda.css({ color: "red" });
+  panda.cva({ base: { color: "blue" } });
+  panda.sva({ base: { root: { color: "green" } } });
   ```
 
 - Updated dependencies [0bf09f2]
@@ -308,25 +370,25 @@
 - 31071ba: Fix an issue for token names starting with '0'
 
   ```ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     theme: {
       tokens: {
         spacing: {
-          '025': {
-            value: '0.125rem',
+          "025": {
+            value: "0.125rem",
           },
         },
       },
     },
-  })
+  });
   ```
 
   and then using it like
 
   ```ts
-  css({ margin: '025' })
+  css({ margin: "025" });
   ```
 
   This would not generate the expected CSS because the parser would try to parse `025` as a number (`25`) instead of
@@ -337,7 +399,7 @@
   Given this config:
 
   ```ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
@@ -348,13 +410,13 @@
             bg: {
               primary: {
                 DEFAULT: {
-                  value: '{colors.red.500}',
+                  value: "{colors.red.500}",
                 },
                 base: {
-                  value: '{colors.green.500}',
+                  value: "{colors.green.500}",
                 },
                 hover: {
-                  value: '{colors.yellow.300}',
+                  value: "{colors.yellow.300}",
                 },
               },
             },
@@ -362,17 +424,17 @@
         },
       },
     },
-  })
+  });
   ```
 
   And this style usage:
 
   ```ts
-  import { css } from 'styled-system/css'
+  import { css } from "styled-system/css";
 
   css({
-    colorPalette: 'bg.primary',
-  })
+    colorPalette: "bg.primary",
+  });
   ```
 
   This is the difference in the generated css
@@ -403,11 +465,11 @@
   - Allow using multiple aliases for the same identifier for the `/css` entrypoints just like `/patterns` and `/recipes`
 
   ```ts
-  import { css } from '../styled-system/css'
-  import { css as css2 } from '../styled-system/css'
+  import { css } from "../styled-system/css";
+  import { css as css2 } from "../styled-system/css";
 
-  css({ display: 'flex' })
-  css2({ flexDirection: 'column' }) // this wasn't working before, now it does
+  css({ display: "flex" });
+  css2({ flexDirection: "column" }); // this wasn't working before, now it does
   ```
 
 - Updated dependencies [a032375]
@@ -455,10 +517,10 @@
 
   ```ts
   css({
-    padding: '1px',
-    paddingTop: '3px',
-    paddingBottom: '4px',
-  })
+    padding: "1px",
+    paddingTop: "3px",
+    paddingBottom: "4px",
+  });
   ```
 
   Will now always generate the following css:
@@ -518,16 +580,17 @@
   export default defineConfig({
     // ...
     hooks: {
-      'parser:before': ({ configure }) => {
+      "parser:before": ({ configure }) => {
         configure({
           // ignore the Select.Content entirely
-          matchTag: (tag) => tag !== 'Select.Content',
+          matchTag: (tag) => tag !== "Select.Content",
           // ...or specifically ignore the `position` property
-          matchTagProp: (tag, prop) => tag === 'Select.Content' && prop !== 'position',
-        })
+          matchTagProp: (tag, prop) =>
+            tag === "Select.Content" && prop !== "position",
+        });
       },
     },
-  })
+  });
   ```
 
 - Updated dependencies [6b829cab]
@@ -568,11 +631,11 @@
   ```js
   module.exports = {
     plugins: {
-      '@pandacss/dev/postcss': {
-        logfile: './logs/panda.log',
+      "@pandacss/dev/postcss": {
+        logfile: "./logs/panda.log",
       },
     },
-  }
+  };
   ```
 
 - Updated dependencies [0dd45b6a]
@@ -611,10 +674,10 @@
   css({
     // ✅ this is fine now, will resolve to something like
     // `@container (min-width: 56em)`
-    '@container (min-width: {sizes.4xl})': {
-      color: 'green',
+    "@container (min-width: {sizes.4xl})": {
+      color: "green",
     },
-  })
+  });
   ```
 
   Fix an issue where the curly token references would not be escaped if the token path was not found.
@@ -656,39 +719,54 @@
      * Called when the config is resolved, after all the presets are loaded and merged.
      * This is the first hook called, you can use it to tweak the config before the context is created.
      */
-    'config:resolved': (args: { conf: LoadConfigResult }) => MaybeAsyncReturn
+    "config:resolved": (args: { conf: LoadConfigResult }) => MaybeAsyncReturn;
     /**
      * Called when the Panda context has been created and the API is ready to be used.
      */
-    'context:created': (args: { ctx: ApiInterface; logger: LoggerInterface }) => void
+    "context:created": (args: {
+      ctx: ApiInterface;
+      logger: LoggerInterface;
+    }) => void;
     /**
      * Called when the config file or one of its dependencies (imports) has changed.
      */
-    'config:change': (args: { config: UserConfig }) => MaybeAsyncReturn
+    "config:change": (args: { config: UserConfig }) => MaybeAsyncReturn;
     /**
      * Called after reading the file content but before parsing it.
      * You can use this hook to transform the file content to a tsx-friendly syntax so that Panda's parser can parse it.
      * You can also use this hook to parse the file's content on your side using a custom parser, in this case you don't have to return anything.
      */
-    'parser:before': (args: { filePath: string; content: string }) => string | void
+    "parser:before": (args: {
+      filePath: string;
+      content: string;
+    }) => string | void;
     /**
      * Called after the file styles are extracted and processed into the resulting ParserResult object.
      * You can also use this hook to add your own extraction results from your custom parser to the ParserResult object.
      */
-    'parser:after': (args: { filePath: string; result: ParserResultInterface | undefined }) => void
+    "parser:after": (args: {
+      filePath: string;
+      result: ParserResultInterface | undefined;
+    }) => void;
     /**
      * Called after the codegen is completed
      */
-    'codegen:done': () => MaybeAsyncReturn
+    "codegen:done": () => MaybeAsyncReturn;
     /**
      * Called right before adding the design-system CSS (global, static, preflight, tokens, keyframes) to the final CSS
      * Called right before writing/injecting the final CSS (styles.css) that contains the design-system CSS and the parser CSS
      * You can use it to tweak the CSS content before it's written to disk or injected through the postcss plugin.
      */
-    'cssgen:done': (args: {
-      artifact: 'global' | 'static' | 'reset' | 'tokens' | 'keyframes' | 'styles.css'
-      content: string
-    }) => string | void
+    "cssgen:done": (args: {
+      artifact:
+        | "global"
+        | "static"
+        | "reset"
+        | "tokens"
+        | "keyframes"
+        | "styles.css";
+      content: string;
+    }) => string | void;
   }
   ```
 
@@ -827,8 +905,8 @@
   ```jsx
   css({
     // This didn't work, but now it does
-    base: { color: 'blue' },
-  })
+    base: { color: "blue" },
+  });
   ```
 
 - Updated dependencies [59fd291c]
@@ -872,38 +950,38 @@
 
   ```ts
   const card = defineRecipe({
-    className: 'card',
-    base: { color: 'white' },
+    className: "card",
+    base: { color: "white" },
     variants: {
       size: {
-        small: { fontSize: '14px' },
-        large: { fontSize: '18px' },
+        small: { fontSize: "14px" },
+        large: { fontSize: "18px" },
       },
       visual: {
-        primary: { backgroundColor: 'blue' },
-        secondary: { backgroundColor: 'gray' },
+        primary: { backgroundColor: "blue" },
+        secondary: { backgroundColor: "gray" },
       },
     },
-  })
+  });
 
   export default defineConfig({
     // ...
     staticCss: {
       recipes: {
-        card: ['*'], // this
+        card: ["*"], // this
 
         // was equivalent to:
         card: [
           // notice how `responsive: true` was implicitly added
-          { size: ['*'], responsive: true },
-          { visual: ['*'], responsive: true },
+          { size: ["*"], responsive: true },
+          { visual: ["*"], responsive: true },
         ],
 
         //   will now correctly be equivalent to:
-        card: [{ size: ['*'] }, { visual: ['*'] }],
+        card: [{ size: ["*"] }, { visual: ["*"] }],
       },
     },
-  })
+  });
   ```
 
   Here's the diff in the generated CSS:
@@ -1027,30 +1105,30 @@
   another file, such as when using `Ark-UI` like `import { comboboxAnatomy } from '@ark-ui/anatomy'`
 
   ```ts
-  import { sva } from '../styled-system/css'
-  import { slots } from './slots'
+  import { sva } from "../styled-system/css";
+  import { slots } from "./slots";
 
   const card = sva({
     slots, // ❌ did NOT work -> ✅ will now work as expected
     base: {
       root: {
-        p: '6',
-        m: '4',
-        w: 'md',
-        boxShadow: 'md',
-        borderRadius: 'md',
-        _dark: { bg: '#262626', color: 'white' },
+        p: "6",
+        m: "4",
+        w: "md",
+        boxShadow: "md",
+        borderRadius: "md",
+        _dark: { bg: "#262626", color: "white" },
       },
       content: {
-        textStyle: 'lg',
+        textStyle: "lg",
       },
       title: {
-        textStyle: 'xl',
-        fontWeight: 'semibold',
-        pb: '2',
+        textStyle: "xl",
+        fontWeight: "semibold",
+        pb: "2",
       },
     },
-  })
+  });
   ```
 
 - b01eb049: Fix a parser issue where we didn't handle import aliases when using a {xxx}.raw() function.
@@ -1059,15 +1137,15 @@
 
   ```ts
   // button.stories.ts
-  import { button as buttonRecipe } from '@ui/styled-system/recipes'
+  import { button as buttonRecipe } from "@ui/styled-system/recipes";
 
   export const Primary: Story = {
     // ❌ this wouldn't be parsed as a recipe because of the alias + .raw()
     //  -> ✅ it's now fixed
     args: buttonRecipe.raw({
-      color: 'primary',
+      color: "primary",
     }),
-  }
+  };
   ```
 
 - a3b6ed5f: Fix & perf improvement: skip JSX parsing when not using `config.jsxFramework` / skip tagged template literal
@@ -1089,9 +1167,9 @@
 
   ```ts
   css({
-    borderWidth: '[2px!]',
-    width: '[2px !important]',
-  })
+    borderWidth: "[2px!]",
+    width: "[2px !important]",
+  });
   ```
 
 - Updated dependencies [8f4ce97c]
@@ -1319,9 +1397,9 @@
 
   ```ts
   interface FactoryOptions<TProps extends Dict> {
-    dataAttr?: boolean
-    defaultProps?: TProps
-    shouldForwardProp?(prop: string, variantKeys: string[]): boolean
+    dataAttr?: boolean;
+    defaultProps?: TProps;
+    shouldForwardProp?(prop: string, variantKeys: string[]): boolean;
   }
   ```
 
@@ -1329,16 +1407,16 @@
     This is useful for testing and debugging.
 
   ```jsx
-  import { styled } from '../styled-system/jsx'
-  import { button } from '../styled-system/recipes'
+  import { styled } from "../styled-system/jsx";
+  import { button } from "../styled-system/recipes";
 
-  const Button = styled('button', button, { dataAttr: true })
+  const Button = styled("button", button, { dataAttr: true });
 
   const App = () => (
     <Button variant="secondary" mt="10px">
       Button
     </Button>
-  )
+  );
   // Will render something like <button data-recipe="button" class="btn btn--variant_purple mt_10px">Button</button>
   ```
 
@@ -1346,17 +1424,17 @@
     override the default variants or base styles of a recipe.
 
   ```jsx
-  import { styled } from '../styled-system/jsx'
-  import { button } from '../styled-system/recipes'
+  import { styled } from "../styled-system/jsx";
+  import { button } from "../styled-system/recipes";
 
-  const Button = styled('button', button, {
+  const Button = styled("button", button, {
     defaultProps: {
-      variant: 'secondary',
-      px: '10px',
+      variant: "secondary",
+      px: "10px",
     },
-  })
+  });
 
-  const App = () => <Button>Button</Button>
+  const App = () => <Button>Button</Button>;
   // Will render something like <button class="btn btn--variant_secondary px_10px">Button</button>
   ```
 
@@ -1364,19 +1442,20 @@
     props except recipe variants and style props are forwarded.
 
   ```jsx
-  import { styled } from '../styled-system/jsx'
-  import { button } from '../styled-system/recipes'
-  import { isCssProperty } from '../styled-system/jsx'
-  import { motion, isValidMotionProp } from 'framer-motion'
+  import { styled } from "../styled-system/jsx";
+  import { button } from "../styled-system/recipes";
+  import { isCssProperty } from "../styled-system/jsx";
+  import { motion, isValidMotionProp } from "framer-motion";
 
   const StyledMotion = styled(
     motion.div,
     {},
     {
       shouldForwardProp: (prop, variantKeys) =>
-        isValidMotionProp(prop) || (!variantKeys.includes(prop) && !isCssProperty(prop)),
+        isValidMotionProp(prop) ||
+        (!variantKeys.includes(prop) && !isCssProperty(prop)),
     },
-  )
+  );
   ```
 
 - 3a04a927: Fix static extraction of the
@@ -1476,42 +1555,42 @@
 
   ```ts
   export default defineConfig({
-    outdir: './outdir',
+    outdir: "./outdir",
     importMap: {
-      css: '#panda/styled-system/css',
-      recipes: '#panda/styled-system/recipes',
-      patterns: '#panda/styled-system/patterns',
-      jsx: '#panda/styled-system/jsx',
+      css: "#panda/styled-system/css",
+      recipes: "#panda/styled-system/recipes",
+      patterns: "#panda/styled-system/patterns",
+      jsx: "#panda/styled-system/jsx",
     },
-  })
+  });
   ```
 
   Or you could also make your outdir an actual package from your monorepo:
 
   ```ts
   export default defineConfig({
-    outdir: '../packages/styled-system',
+    outdir: "../packages/styled-system",
     importMap: {
-      css: '@monorepo/styled-system',
-      recipes: '@monorepo/styled-system',
-      patterns: '@monorepo/styled-system',
-      jsx: '@monorepo/styled-system',
+      css: "@monorepo/styled-system",
+      recipes: "@monorepo/styled-system",
+      patterns: "@monorepo/styled-system",
+      jsx: "@monorepo/styled-system",
     },
-  })
+  });
   ```
 
   Working with tsconfig paths aliases is easy:
 
   ```ts
   export default defineConfig({
-    outdir: 'styled-system',
+    outdir: "styled-system",
     importMap: {
-      css: 'styled-system/css',
-      recipes: 'styled-system/recipes',
-      patterns: 'styled-system/patterns',
-      jsx: 'styled-system/jsx',
+      css: "styled-system/css",
+      recipes: "styled-system/recipes",
+      patterns: "styled-system/patterns",
+      jsx: "styled-system/jsx",
     },
-  })
+  });
   ```
 
 - Updated dependencies [95b06bb1]
@@ -1546,20 +1625,20 @@
   so this will now work:
 
   ```ts
-  import { css } from 'styled-system/css'
+  import { css } from "styled-system/css";
 
   const paragraphSpacingStyle = css.raw({
-    '&:not(:first-child)': { marginBlockEnd: '1em' },
-  })
+    "&:not(:first-child)": { marginBlockEnd: "1em" },
+  });
 
   export const proseCss = css.raw({
-    maxWidth: '800px',
-    '& p': {
-      '&:not(:first-child)': { marginBlockStart: '1em' },
+    maxWidth: "800px",
+    "& p": {
+      "&:not(:first-child)": { marginBlockStart: "1em" },
     },
-    '& h1': paragraphSpacingStyle,
-    '& h2': paragraphSpacingStyle,
-  })
+    "& h1": paragraphSpacingStyle,
+    "& h2": paragraphSpacingStyle,
+  });
   ```
 
   & use ECMA preset for ts-evaluator: This means that no other globals than those that are defined in the ECMAScript
@@ -1567,35 +1646,35 @@
   this:
 
   ```ts
-  import { cva } from '.panda/css'
+  import { cva } from ".panda/css";
 
   const variants = () => {
     const spacingTokens = Object.entries({
-      s: 'token(spacing.1)',
-      m: 'token(spacing.2)',
-      l: 'token(spacing.3)',
-    })
+      s: "token(spacing.1)",
+      m: "token(spacing.2)",
+      l: "token(spacing.3)",
+    });
 
     const spacingProps = {
-      px: 'paddingX',
-      py: 'paddingY',
-    }
+      px: "paddingX",
+      py: "paddingY",
+    };
 
     // Generate variants programmatically
     return Object.entries(spacingProps)
       .map(([name, styleProp]) => {
         const variants = spacingTokens
           .map(([variant, token]) => ({ [variant]: { [styleProp]: token } }))
-          .reduce((_agg, kv) => ({ ..._agg, ...kv }))
+          .reduce((_agg, kv) => ({ ..._agg, ...kv }));
 
-        return { [name]: variants }
+        return { [name]: variants };
       })
-      .reduce((_agg, kv) => ({ ..._agg, ...kv }))
-  }
+      .reduce((_agg, kv) => ({ ..._agg, ...kv }));
+  };
 
   const baseStyle = cva({
     variants: variants(),
-  })
+  });
   ```
 
 - Updated dependencies [c40ae1b9]
@@ -1742,12 +1821,12 @@
   **Definition**
 
   ```jsx
-  import { sva } from 'styled-system/css'
+  import { sva } from "styled-system/css";
 
   const button = sva({
-    slots: ['label', 'icon'],
+    slots: ["label", "icon"],
     base: {
-      label: { color: 'red', textDecoration: 'underline' },
+      label: { color: "red", textDecoration: "underline" },
     },
     variants: {
       rounded: {
@@ -1755,33 +1834,33 @@
       },
       size: {
         sm: {
-          label: { fontSize: 'sm' },
-          icon: { fontSize: 'sm' },
+          label: { fontSize: "sm" },
+          icon: { fontSize: "sm" },
         },
         lg: {
-          label: { fontSize: 'lg' },
-          icon: { fontSize: 'lg', color: 'pink' },
+          label: { fontSize: "lg" },
+          icon: { fontSize: "lg", color: "pink" },
         },
       },
     },
     defaultVariants: {
-      size: 'sm',
+      size: "sm",
     },
-  })
+  });
   ```
 
   **Usage**
 
   ```jsx
   export function App() {
-    const btnClass = button({ size: 'lg', rounded: true })
+    const btnClass = button({ size: "lg", rounded: true });
 
     return (
       <button>
         <p class={btnClass.label}> Label</p>
         <p class={btnClass.icon}> Icon</p>
       </button>
-    )
+    );
   }
   ```
 
@@ -1830,26 +1909,26 @@
   Update the `jsx` property to be used for advanced tracking of custom pattern components.
 
   ```jsx
-  import { Circle } from 'styled-system/jsx'
+  import { Circle } from "styled-system/jsx";
   const CustomCircle = ({ children, ...props }) => {
-    return <Circle {...props}>{children}</Circle>
-  }
+    return <Circle {...props}>{children}</Circle>;
+  };
   ```
 
   To track the `CustomCircle` component, you can now use the `jsx` property.
 
   ```js
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     patterns: {
       extend: {
         circle: {
-          jsx: ['CustomCircle'],
+          jsx: ["CustomCircle"],
         },
       },
     },
-  })
+  });
   ```
 
 ### Patch Changes
@@ -1949,9 +2028,17 @@
   ```tsx
   const ComponentWithMultipleRecipes = ({ variant }) => {
     return (
-      <button className={cx(pinkRecipe({ variant }), greenRecipe({ variant }), blueRecipe({ variant }))}>Hello</button>
-    )
-  }
+      <button
+        className={cx(
+          pinkRecipe({ variant }),
+          greenRecipe({ variant }),
+          blueRecipe({ variant }),
+        )}
+      >
+        Hello
+      </button>
+    );
+  };
   ```
 
   Given a `panda.config.ts` with recipes each including a common `jsx` tag name, such as:
@@ -2059,8 +2146,8 @@
   // panda.config.ts
   export default defineConfig({
     //...
-    syntax: 'template-literal',
-  })
+    syntax: "template-literal",
+  });
   ```
 
   > For existing projects, you might need to run the `panda codegen --clean`
@@ -2081,10 +2168,10 @@
   ```ts
   const Input = styled.input({
     base: {
-      color: 'blue.100',
-      bg: 'blue.900',
+      color: "blue.100",
+      bg: "blue.900",
     },
-  })
+  });
   ```
 
 - Updated dependencies [60df9bd1]
diff --git a/packages/parser/package.json b/packages/parser/package.json
index 46925414d..493e4bcb5 100644
--- a/packages/parser/package.json
+++ b/packages/parser/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/parser",
-  "version": "0.38.0",
+  "version": "0.39.0",
   "description": "The static parser for panda css",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
diff --git a/packages/postcss/CHANGELOG.md b/packages/postcss/CHANGELOG.md
index 8bd407b51..c74040f88 100644
--- a/packages/postcss/CHANGELOG.md
+++ b/packages/postcss/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @pandacss/postcss
 
+## 0.39.0
+
+### Patch Changes
+
+- @pandacss/node@0.39.0
+
 ## 0.38.0
 
 ### Patch Changes
@@ -51,11 +57,11 @@
 
   module.exports = {
     plugins: {
-      '@pandacss/dev/postcss': {
+      "@pandacss/dev/postcss": {
         allow: [/node_modules\/.embroider/],
       },
     },
-  }
+  };
   ```
 
 ### Patch Changes
@@ -146,11 +152,11 @@
   ```js
   module.exports = {
     plugins: {
-      '@pandacss/dev/postcss': {
-        logfile: './logs/panda.log',
+      "@pandacss/dev/postcss": {
+        logfile: "./logs/panda.log",
       },
     },
-  }
+  };
   ```
 
 - Updated dependencies [05686b9d]
@@ -587,11 +593,11 @@
   ```js
   module.exports = {
     plugins: [
-      require('@pandacss/postcss')({
-        configPath: './path/to/panda.config.js',
+      require("@pandacss/postcss")({
+        configPath: "./path/to/panda.config.js",
       }),
     ],
-  }
+  };
   ```
 
   - @pandacss/node@0.3.2
diff --git a/packages/postcss/package.json b/packages/postcss/package.json
index 0897f02f9..229391c3d 100644
--- a/packages/postcss/package.json
+++ b/packages/postcss/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/postcss",
-  "version": "0.38.0",
+  "version": "0.39.0",
   "description": "PostCSS integration for Panda CSS",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
diff --git a/packages/preset-atlaskit/CHANGELOG.md b/packages/preset-atlaskit/CHANGELOG.md
index 892416470..606746486 100644
--- a/packages/preset-atlaskit/CHANGELOG.md
+++ b/packages/preset-atlaskit/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @pandacss/preset-atlaskit
 
+## 0.39.0
+
+### Patch Changes
+
+- Updated dependencies [221c9a2]
+- Updated dependencies [c3e797e]
+  - @pandacss/types@0.39.0
+
 ## 0.38.0
 
 ### Patch Changes
diff --git a/packages/preset-atlaskit/package.json b/packages/preset-atlaskit/package.json
index 77df79d08..464473e23 100644
--- a/packages/preset-atlaskit/package.json
+++ b/packages/preset-atlaskit/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/preset-atlaskit",
-  "version": "0.38.0",
+  "version": "0.39.0",
   "description": "The preset for PandaCSS that contains the default theme",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
diff --git a/packages/preset-base/CHANGELOG.md b/packages/preset-base/CHANGELOG.md
index 406bed81e..709cfa646 100644
--- a/packages/preset-base/CHANGELOG.md
+++ b/packages/preset-base/CHANGELOG.md
@@ -1,5 +1,57 @@
 # @pandacss/preset-base
 
+## 0.39.0
+
+### Minor Changes
+
+- df2546a: **BREAKING 💥**
+
+  Remove `linkBox` pattern in favor of using adding `position: relative` when using the `linkOverlay` pattern.
+
+  **Before**
+
+  ```jsx
+  import { linkBox, linkOverlay } from "styled-system/patterns";
+
+  const App = () => {
+    return (
+      <div className={linkBox()}>
+        <img src="https://via.placeholder.com/150" alt="placeholder" />
+        <a href="#" className={linkOverlay()}>
+          Link
+        </a>
+      </div>
+    );
+  };
+  ```
+
+  **After**
+
+  ```jsx
+  import { css } from "styled-system/css";
+  import { linkOverlay } from "styled-system/patterns";
+
+  const App = () => {
+    return (
+      <div className={css({ pos: "relative" })}>
+        <img src="https://via.placeholder.com/150" alt="placeholder" />
+        <a href="#" className={linkOverlay()}>
+          Link
+        </a>
+      </div>
+    );
+  };
+  ```
+
+### Patch Changes
+
+- 2116abe: Fix issue where `float` property did not allow inherited values (auto, initial, none, etc.)
+- c3e797e: Fix issue where `animationName` property was not connected to `theme.keyframes`, as a result, no autocompletion was
+  available.
+- Updated dependencies [221c9a2]
+- Updated dependencies [c3e797e]
+  - @pandacss/types@0.39.0
+
 ## 0.38.0
 
 ### Patch Changes
@@ -52,9 +104,9 @@
     useful when applying negative margin to child elements.
 
   ```tsx
-  <div className={flex({ spaceX: '-1' })}>
-    <div className={circle({ size: '5', bg: 'red' })} />
-    <div className={circle({ size: '5', bg: 'pink' })} />
+  <div className={flex({ spaceX: "-1" })}>
+    <div className={circle({ size: "5", bg: "red" })} />
+    <div className={circle({ size: "5", bg: "pink" })} />
   </div>
   ```
 
@@ -66,13 +118,13 @@
   ```tsx
   <div
     className={css({
-      bgGradient: 'to-r',
+      bgGradient: "to-r",
       // from
-      gradientFrom: 'red',
-      gradientFromPosition: 'top left',
+      gradientFrom: "red",
+      gradientFromPosition: "top left",
       // to
-      gradientTo: 'blue',
-      gradientToPosition: 'bottom right',
+      gradientTo: "blue",
+      gradientToPosition: "bottom right",
     })}
   />
   ```
@@ -167,9 +219,9 @@
 
   ```ts
   css({
-    textShadow: '1px 1px 1px var(--text-shadow-color)',
-    textShadowColor: 'black',
-  })
+    textShadow: "1px 1px 1px var(--text-shadow-color)",
+    textShadowColor: "black",
+  });
   ```
 
 ### Patch Changes
@@ -221,9 +273,9 @@
 
   ```ts
   css({
-    bg: 'red.300/40',
-    color: 'white',
-  })
+    bg: "red.300/40",
+    color: "white",
+  });
   ```
 
   This will generate:
@@ -231,7 +283,11 @@
   ```css
   @layer utilities {
     .bg_red\.300\/40 {
-      --mix-background: color-mix(in srgb, var(--colors-red-300) 40%, transparent);
+      --mix-background: color-mix(
+        in srgb,
+        var(--colors-red-300) 40%,
+        transparent
+      );
       background: var(--mix-background, var(--colors-red-300));
     }
 
@@ -255,21 +311,21 @@
   export default defineConfig({
     utilities: {
       background: {
-        shorthand: 'bg',
-        className: 'bg',
-        values: 'colors',
+        shorthand: "bg",
+        className: "bg",
+        values: "colors",
         transform(value, args) {
-          const mix = args.utils.colorMix(value)
+          const mix = args.utils.colorMix(value);
           // This can happen if the value format is invalid (e.g. `bg: red.300/invalid` or `bg: red.300//10`)
-          if (mix.invalid) return { background: value }
+          if (mix.invalid) return { background: value };
 
           return {
             background: mix.value,
-          }
+          };
         },
       },
     },
-  })
+  });
   ```
 
   ***
@@ -278,21 +334,21 @@
   property:
 
   ```ts
-  import type { PropertyTransform } from '@pandacss/types'
+  import type { PropertyTransform } from "@pandacss/types";
 
   export const createColorMixTransform =
     (prop: string): PropertyTransform =>
     (value, args) => {
-      const mix = args.utils.colorMix(value)
-      if (mix.invalid) return { [prop]: value }
+      const mix = args.utils.colorMix(value);
+      if (mix.invalid) return { [prop]: value };
 
-      const cssVar = '--mix-' + prop
+      const cssVar = "--mix-" + prop;
 
       return {
         [cssVar]: mix.value,
         [prop]: `var(${cssVar}, ${mix.color})`,
-      }
-    }
+      };
+    };
   ```
 
   then the same utility transform as above can be written like this:
@@ -320,34 +376,34 @@
     // ...
     theme: {
       extend: {
-        containerNames: ['sidebar', 'content'],
+        containerNames: ["sidebar", "content"],
         containerSizes: {
-          xs: '40em',
-          sm: '60em',
-          md: '80em',
+          xs: "40em",
+          sm: "60em",
+          md: "80em",
         },
       },
     },
-  })
+  });
   ```
 
   The default container sizes in the `@pandacss/preset-panda` preset are shown below:
 
   ```ts
   export const containerSizes = {
-    xs: '320px',
-    sm: '384px',
-    md: '448px',
-    lg: '512px',
-    xl: '576px',
-    '2xl': '672px',
-    '3xl': '768px',
-    '4xl': '896px',
-    '5xl': '1024px',
-    '6xl': '1152px',
-    '7xl': '1280px',
-    '8xl': '1440px',
-  }
+    xs: "320px",
+    sm: "384px",
+    md: "448px",
+    lg: "512px",
+    xl: "576px",
+    "2xl": "672px",
+    "3xl": "768px",
+    "4xl": "896px",
+    "5xl": "1024px",
+    "6xl": "1152px",
+    "7xl": "1280px",
+    "8xl": "1440px",
+  };
   ```
 
   Then use them in your styles by referencing using `@<container-name>/<container-size>` syntax:
@@ -431,11 +487,11 @@
     patterns: {
       extend: {
         stack: {
-          defaultValues: { gap: '20px' },
+          defaultValues: { gap: "20px" },
         },
       },
     },
-  })
+  });
   ```
 
 ### Patch Changes
@@ -506,13 +562,13 @@
         // add aspect ratio tokens
         tokens: {
           aspectRatios: {
-            '1:1': '1',
-            '16:9': '16/9',
+            "1:1": "1",
+            "16:9": "16/9",
           },
         },
       },
     },
-  })
+  });
   ```
 
   Here's what the default aspect ratio tokens in the base preset looks like:
@@ -840,15 +896,15 @@
   `block` bleed to a child element, setting its value to match the parent's padding.
 
   ```tsx
-  import { css } from '../styled-system/css'
-  import { bleed } from '../styled-system/patterns'
+  import { css } from "../styled-system/css";
+  import { bleed } from "../styled-system/patterns";
 
   export function Page() {
     return (
-      <div class={css({ px: '6' })}>
-        <div class={bleed({ inline: '6' })}>Welcome</div>
+      <div class={css({ px: "6" })}>
+        <div class={bleed({ inline: "6" })}>Welcome</div>
       </div>
-    )
+    );
   }
   ```
 
@@ -857,8 +913,8 @@
   Visually hidden is a layout pattern used to hide content visually, but still make it available to screen readers.
 
   ```tsx
-  import { css } from '../styled-system/css'
-  import { visuallyHidden } from '../styled-system/patterns'
+  import { css } from "../styled-system/css";
+  import { visuallyHidden } from "../styled-system/patterns";
 
   export function Checkbox() {
     return (
@@ -868,7 +924,7 @@
         </input>
         <span>Checkbox</span>
       </label>
-    )
+    );
   }
   ```
 
@@ -920,26 +976,26 @@
   Update the `jsx` property to be used for advanced tracking of custom pattern components.
 
   ```jsx
-  import { Circle } from 'styled-system/jsx'
+  import { Circle } from "styled-system/jsx";
   const CustomCircle = ({ children, ...props }) => {
-    return <Circle {...props}>{children}</Circle>
-  }
+    return <Circle {...props}>{children}</Circle>;
+  };
   ```
 
   To track the `CustomCircle` component, you can now use the `jsx` property.
 
   ```js
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     patterns: {
       extend: {
         circle: {
-          jsx: ['CustomCircle'],
+          jsx: ["CustomCircle"],
         },
       },
     },
-  })
+  });
   ```
 
 ### Patch Changes
@@ -963,7 +1019,7 @@
   transition property, timing function and duration. This allows you to add transitions with a single property.
 
   ```jsx
-  <div className={css({ transition: 'background' })}>Content</div>
+  <div className={css({ transition: "background" })}>Content</div>
   ```
 
   This will generate the following css:
diff --git a/packages/preset-base/package.json b/packages/preset-base/package.json
index fef1e9eac..21f372c44 100644
--- a/packages/preset-base/package.json
+++ b/packages/preset-base/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/preset-base",
-  "version": "0.38.0",
+  "version": "0.39.0",
   "description": "The base preset for Panda CSS that contains the conditions and utilities",
   "author": "Segun Adebayo <joseshegs@gmail.com>",
   "main": "dist/index.js",
diff --git a/packages/preset-open-props/CHANGELOG.md b/packages/preset-open-props/CHANGELOG.md
index 3dae3c491..a0e9554d1 100644
--- a/packages/preset-open-props/CHANGELOG.md
+++ b/packages/preset-open-props/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @pandacss/preset-open-props
 
+## 0.39.0
+
+### Patch Changes
+
+- Updated dependencies [221c9a2]
+- Updated dependencies [c3e797e]
+  - @pandacss/types@0.39.0
+
 ## 0.38.0
 
 ### Patch Changes
diff --git a/packages/preset-open-props/package.json b/packages/preset-open-props/package.json
index 765cc4ce0..5cf6d22a2 100644
--- a/packages/preset-open-props/package.json
+++ b/packages/preset-open-props/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/preset-open-props",
-  "version": "0.38.0",
+  "version": "0.39.0",
   "description": "A preset for Open Props",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
diff --git a/packages/preset-panda/CHANGELOG.md b/packages/preset-panda/CHANGELOG.md
index 5e3187218..19b8e92a5 100644
--- a/packages/preset-panda/CHANGELOG.md
+++ b/packages/preset-panda/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @pandacss/preset-panda
 
+## 0.39.0
+
+### Patch Changes
+
+- Updated dependencies [221c9a2]
+- Updated dependencies [c3e797e]
+  - @pandacss/types@0.39.0
+
 ## 0.38.0
 
 ### Patch Changes
@@ -212,13 +220,13 @@
         // add aspect ratio tokens
         tokens: {
           aspectRatios: {
-            '1:1': '1',
-            '16:9': '16/9',
+            "1:1": "1",
+            "16:9": "16/9",
           },
         },
       },
     },
-  })
+  });
   ```
 
   Here's what the default aspect ratio tokens in the base preset looks like:
diff --git a/packages/preset-panda/package.json b/packages/preset-panda/package.json
index 18ff9c2b3..135a8851b 100644
--- a/packages/preset-panda/package.json
+++ b/packages/preset-panda/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/preset-panda",
-  "version": "0.38.0",
+  "version": "0.39.0",
   "description": "The preset for PandaCSS that contains the default theme",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
diff --git a/packages/shared/CHANGELOG.md b/packages/shared/CHANGELOG.md
index 1c3245307..ce0de3c73 100644
--- a/packages/shared/CHANGELOG.md
+++ b/packages/shared/CHANGELOG.md
@@ -1,5 +1,27 @@
 # @pandacss/shared
 
+## 0.39.0
+
+### Patch Changes
+
+- 935ec86: Allow passing arrays of `SystemStyleObject` to the `css(xxx, [aaa, bbb, ccc], yyy)` fn
+
+  This is useful when you are creating your own styled component and want to benefit
+  [from the recent `css` array property support](https://github.com/chakra-ui/panda/pull/2515).
+
+  ```diff
+  import { css } from 'styled-system/css'
+  import type { HTMLStyledProps } from 'styled-system/types'
+
+  type ButtonProps = HTMLStyledProps<'button'>
+
+  export const Button = ({ css: cssProp = {}, children }: ButtonProps) => {
+  -  const className = css(...(Array.isArray(cssProp) ? cssProp : [cssProp]))
+  +  const className = css(cssProp)
+    return <button className={className}>{children}</button>
+  }
+  ```
+
 ## 0.38.0
 
 ### Minor Changes
@@ -15,21 +37,21 @@
 - 99870bb: Fix issue where setting the pattern `jsx` option with dot notation didn't work.
 
   ```jsx
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
     patterns: {
       extend: {
         grid: {
-          jsx: ['Form.Group', 'Grid'],
+          jsx: ["Form.Group", "Grid"],
         },
         stack: {
-          jsx: ['Form.Action', 'Stack'],
+          jsx: ["Form.Action", "Stack"],
         },
       },
     },
-  })
+  });
   ```
 
 ## 0.37.0
@@ -81,10 +103,10 @@
 
   ```ts
   css({
-    padding: '1px',
-    paddingTop: '3px',
-    paddingBottom: '4px',
-  })
+    padding: "1px",
+    paddingTop: "3px",
+    paddingBottom: "4px",
+  });
   ```
 
   Will now always generate the following css:
@@ -212,9 +234,9 @@
 
   ```ts
   css({
-    borderWidth: '[2px!]',
-    width: '[2px !important]',
-  })
+    borderWidth: "[2px!]",
+    width: "[2px !important]",
+  });
   ```
 
 ## 0.22.0
@@ -231,18 +253,18 @@
   and suffixing with `]`, e.g. writing `[123px]` as a value will bypass the token validation.
 
   ```ts
-  import { css } from '../styled-system/css'
+  import { css } from "../styled-system/css";
 
   css({
     // @ts-expect-error TS will throw when using from strictTokens: true
-    color: '#fff',
+    color: "#fff",
     // @ts-expect-error TS will throw when using from strictTokens: true
-    width: '100px',
+    width: "100px",
 
     // ✅ but this is now allowed:
-    bgColor: '[rgb(51 155 240)]',
-    fontSize: '[12px]',
-  })
+    bgColor: "[rgb(51 155 240)]",
+    fontSize: "[12px]",
+  });
   ```
 
 ## 0.20.1
@@ -285,16 +307,16 @@
   together and the styles will be merged correctly.
 
   ```jsx
-  const Box = styled('div', {
+  const Box = styled("div", {
     base: {
-      background: 'red.light',
-      color: 'white',
+      background: "red.light",
+      color: "white",
     },
-  })
+  });
 
   const ExtendedBox = styled(Box, {
-    base: { background: 'red.dark' },
-  })
+    base: { background: "red.dark" },
+  });
 
   // <ExtendedBox> will have a background of `red.dark` and a color of `white`
   ```
@@ -307,14 +329,14 @@
   - CVA or Inline CVA + Config Recipe = ❌
 
   ```jsx
-  import { button } from '../styled-system/recipes'
+  import { button } from "../styled-system/recipes";
 
-  const Button = styled('div', button)
+  const Button = styled("div", button);
 
   // ❌ This will throw an error
   const ExtendedButton = styled(Button, {
-    base: { background: 'red.dark' },
-  })
+    base: { background: "red.dark" },
+  });
   ```
 
 ## 0.16.0
@@ -368,7 +390,14 @@
   Example:
 
   ```tsx
-  <h1 className={cx(css({ mx: '3', paddingTop: '4' }), css({ mx: '10', pt: '6' }))}>Will result in "mx_10 pt_6"</h1>
+  <h1
+    className={cx(
+      css({ mx: "3", paddingTop: "4" }),
+      css({ mx: "10", pt: "6" }),
+    )}
+  >
+    Will result in "mx_10 pt_6"
+  </h1>
   ```
 
 ## 0.11.0
@@ -387,12 +416,12 @@
   **Definition**
 
   ```jsx
-  import { sva } from 'styled-system/css'
+  import { sva } from "styled-system/css";
 
   const button = sva({
-    slots: ['label', 'icon'],
+    slots: ["label", "icon"],
     base: {
-      label: { color: 'red', textDecoration: 'underline' },
+      label: { color: "red", textDecoration: "underline" },
     },
     variants: {
       rounded: {
@@ -400,33 +429,33 @@
       },
       size: {
         sm: {
-          label: { fontSize: 'sm' },
-          icon: { fontSize: 'sm' },
+          label: { fontSize: "sm" },
+          icon: { fontSize: "sm" },
         },
         lg: {
-          label: { fontSize: 'lg' },
-          icon: { fontSize: 'lg', color: 'pink' },
+          label: { fontSize: "lg" },
+          icon: { fontSize: "lg", color: "pink" },
         },
       },
     },
     defaultVariants: {
-      size: 'sm',
+      size: "sm",
     },
-  })
+  });
   ```
 
   **Usage**
 
   ```jsx
   export function App() {
-    const btnClass = button({ size: 'lg', rounded: true })
+    const btnClass = button({ size: "lg", rounded: true });
 
     return (
       <button>
         <p class={btnClass.label}> Label</p>
         <p class={btnClass.icon}> Icon</p>
       </button>
-    )
+    );
   }
   ```
 
@@ -474,19 +503,19 @@
 
   ```ts
   const shorthands = {
-    flexDir: 'flexDirection',
-  }
+    flexDir: "flexDirection",
+  };
 
   const obj = {
-    flexDir: 'row',
+    flexDir: "row",
     flexDirection: undefined,
-  }
+  };
 
   const result = walkObject(obj, (value) => value, {
     getKey(prop) {
-      return shorthands[prop] ?? prop
+      return shorthands[prop] ?? prop;
     },
-  })
+  });
   ```
 
   This would set the `flexDirection` to `row` (using `getKey`) and then set the `flexDirection` property again, this
@@ -507,8 +536,8 @@
   // panda.config.ts
   export default defineConfig({
     //...
-    syntax: 'template-literal',
-  })
+    syntax: "template-literal",
+  });
   ```
 
   > For existing projects, you might need to run the `panda codegen --clean`
@@ -585,11 +614,11 @@ This hook is called right before writing the codegen files to disk. You can use
 export default defineConfig({
   // ...
   hooks: {
-    'codegen:prepare': ({ artifacts, changed }) => {
+    "codegen:prepare": ({ artifacts, changed }) => {
       // do something with the emitted js/d.ts files
     },
   },
-})
+});
 ```
 
 - 49c760cd: Fix issue where responsive array in css and cva doesn't generate the correct classname
@@ -675,9 +704,9 @@ export default defineConfig({
 
   ```ts
   css({
-    borderWidth: '[2px!]',
-    width: '[2px !important]',
-  })
+    borderWidth: "[2px!]",
+    width: "[2px !important]",
+  });
   ```
 
 ## 0.22.0
@@ -694,18 +723,18 @@ export default defineConfig({
   and suffixing with `]`, e.g. writing `[123px]` as a value will bypass the token validation.
 
   ```ts
-  import { css } from '../styled-system/css'
+  import { css } from "../styled-system/css";
 
   css({
     // @ts-expect-error TS will throw when using from strictTokens: true
-    color: '#fff',
+    color: "#fff",
     // @ts-expect-error TS will throw when using from strictTokens: true
-    width: '100px',
+    width: "100px",
 
     // ✅ but this is now allowed:
-    bgColor: '[rgb(51 155 240)]',
-    fontSize: '[12px]',
-  })
+    bgColor: "[rgb(51 155 240)]",
+    fontSize: "[12px]",
+  });
   ```
 
 ## 0.20.1
@@ -748,16 +777,16 @@ export default defineConfig({
   together and the styles will be merged correctly.
 
   ```jsx
-  const Box = styled('div', {
+  const Box = styled("div", {
     base: {
-      background: 'red.light',
-      color: 'white',
+      background: "red.light",
+      color: "white",
     },
-  })
+  });
 
   const ExtendedBox = styled(Box, {
-    base: { background: 'red.dark' },
-  })
+    base: { background: "red.dark" },
+  });
 
   // <ExtendedBox> will have a background of `red.dark` and a color of `white`
   ```
@@ -770,14 +799,14 @@ export default defineConfig({
   - CVA or Inline CVA + Config Recipe = ❌
 
   ```jsx
-  import { button } from '../styled-system/recipes'
+  import { button } from "../styled-system/recipes";
 
-  const Button = styled('div', button)
+  const Button = styled("div", button);
 
   // ❌ This will throw an error
   const ExtendedButton = styled(Button, {
-    base: { background: 'red.dark' },
-  })
+    base: { background: "red.dark" },
+  });
   ```
 
 ## 0.16.0
@@ -831,7 +860,14 @@ export default defineConfig({
   Example:
 
   ```tsx
-  <h1 className={cx(css({ mx: '3', paddingTop: '4' }), css({ mx: '10', pt: '6' }))}>Will result in "mx_10 pt_6"</h1>
+  <h1
+    className={cx(
+      css({ mx: "3", paddingTop: "4" }),
+      css({ mx: "10", pt: "6" }),
+    )}
+  >
+    Will result in "mx_10 pt_6"
+  </h1>
   ```
 
 ## 0.11.0
@@ -850,12 +886,12 @@ export default defineConfig({
   **Definition**
 
   ```jsx
-  import { sva } from 'styled-system/css'
+  import { sva } from "styled-system/css";
 
   const button = sva({
-    slots: ['label', 'icon'],
+    slots: ["label", "icon"],
     base: {
-      label: { color: 'red', textDecoration: 'underline' },
+      label: { color: "red", textDecoration: "underline" },
     },
     variants: {
       rounded: {
@@ -863,33 +899,33 @@ export default defineConfig({
       },
       size: {
         sm: {
-          label: { fontSize: 'sm' },
-          icon: { fontSize: 'sm' },
+          label: { fontSize: "sm" },
+          icon: { fontSize: "sm" },
         },
         lg: {
-          label: { fontSize: 'lg' },
-          icon: { fontSize: 'lg', color: 'pink' },
+          label: { fontSize: "lg" },
+          icon: { fontSize: "lg", color: "pink" },
         },
       },
     },
     defaultVariants: {
-      size: 'sm',
+      size: "sm",
     },
-  })
+  });
   ```
 
   **Usage**
 
   ```jsx
   export function App() {
-    const btnClass = button({ size: 'lg', rounded: true })
+    const btnClass = button({ size: "lg", rounded: true });
 
     return (
       <button>
         <p class={btnClass.label}> Label</p>
         <p class={btnClass.icon}> Icon</p>
       </button>
-    )
+    );
   }
   ```
 
@@ -937,19 +973,19 @@ export default defineConfig({
 
   ```ts
   const shorthands = {
-    flexDir: 'flexDirection',
-  }
+    flexDir: "flexDirection",
+  };
 
   const obj = {
-    flexDir: 'row',
+    flexDir: "row",
     flexDirection: undefined,
-  }
+  };
 
   const result = walkObject(obj, (value) => value, {
     getKey(prop) {
-      return shorthands[prop] ?? prop
+      return shorthands[prop] ?? prop;
     },
-  })
+  });
   ```
 
   This would set the `flexDirection` to `row` (using `getKey`) and then set the `flexDirection` property again, this
@@ -970,8 +1006,8 @@ export default defineConfig({
   // panda.config.ts
   export default defineConfig({
     //...
-    syntax: 'template-literal',
-  })
+    syntax: "template-literal",
+  });
   ```
 
   > For existing projects, you might need to run the `panda codegen --clean`
diff --git a/packages/shared/package.json b/packages/shared/package.json
index 73e51e16f..6ae9a9cc3 100644
--- a/packages/shared/package.json
+++ b/packages/shared/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/shared",
-  "version": "0.38.0",
+  "version": "0.39.0",
   "description": "Shared utilities for css panda",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
diff --git a/packages/studio/CHANGELOG.md b/packages/studio/CHANGELOG.md
index b601985a3..bed2a68b9 100644
--- a/packages/studio/CHANGELOG.md
+++ b/packages/studio/CHANGELOG.md
@@ -1,5 +1,20 @@
 # @pandacss/studio
 
+## 0.39.0
+
+### Patch Changes
+
+- 2116abe: Fix issue where `float` property did not allow inherited values (auto, initial, none, etc.)
+- Updated dependencies [221c9a2]
+- Updated dependencies [c3e797e]
+- Updated dependencies [935ec86]
+  - @pandacss/types@0.39.0
+  - @pandacss/shared@0.39.0
+  - @pandacss/config@0.39.0
+  - @pandacss/logger@0.39.0
+  - @pandacss/token-dictionary@0.39.0
+  - @pandacss/astro-plugin-studio@0.39.0
+
 ## 0.38.0
 
 ### Patch Changes
@@ -188,12 +203,12 @@
     theme: {
       extend: {
         colors: {
-          primary: { value: 'blue' },
+          primary: { value: "blue" },
         },
         // borderWidths: {}, // ⚠️ nothing defined here
       },
     },
-  })
+  });
   ```
 
   ```ts
@@ -204,8 +219,8 @@
 
     // ✅ after this PR, TS will not throw an error anymore as you don't have any `borderWidths` tokens
     // if you add one, this will error again (as it's supposed to)
-    borderWidths: '123px',
-  })
+    borderWidths: "123px",
+  });
   ```
 
   ## Description
@@ -260,11 +275,11 @@
 - 4576a60: Fix nested `styled` factory composition
 
   ```tsx
-  import { styled } from '../styled-system/jsx'
+  import { styled } from "../styled-system/jsx";
 
-  const BasicBox = styled('div', { base: { fontSize: '10px' } })
-  const ExtendedBox1 = styled(BasicBox, { base: { fontSize: '20px' } })
-  const ExtendedBox2 = styled(ExtendedBox1, { base: { fontSize: '30px' } })
+  const BasicBox = styled("div", { base: { fontSize: "10px" } });
+  const ExtendedBox1 = styled(BasicBox, { base: { fontSize: "20px" } });
+  const ExtendedBox2 = styled(ExtendedBox1, { base: { fontSize: "30px" } });
 
   export const App = () => {
     return (
@@ -277,8 +292,8 @@
         {/* NOW: ✅ fs_30px */}
         <ExtendedBox2>text3</ExtendedBox2>
       </>
-    )
-  }
+    );
+  };
   ```
 
   - @pandacss/astro-plugin-studio@0.34.3
@@ -657,9 +672,9 @@
 
   ```ts
   css({
-    borderWidth: '[2px!]',
-    width: '[2px !important]',
-  })
+    borderWidth: "[2px!]",
+    width: "[2px !important]",
+  });
   ```
 
 - Updated dependencies [8f4ce97c]
@@ -937,9 +952,9 @@
 
   ```ts
   interface FactoryOptions<TProps extends Dict> {
-    dataAttr?: boolean
-    defaultProps?: TProps
-    shouldForwardProp?(prop: string, variantKeys: string[]): boolean
+    dataAttr?: boolean;
+    defaultProps?: TProps;
+    shouldForwardProp?(prop: string, variantKeys: string[]): boolean;
   }
   ```
 
@@ -947,16 +962,16 @@
     This is useful for testing and debugging.
 
   ```jsx
-  import { styled } from '../styled-system/jsx'
-  import { button } from '../styled-system/recipes'
+  import { styled } from "../styled-system/jsx";
+  import { button } from "../styled-system/recipes";
 
-  const Button = styled('button', button, { dataAttr: true })
+  const Button = styled("button", button, { dataAttr: true });
 
   const App = () => (
     <Button variant="secondary" mt="10px">
       Button
     </Button>
-  )
+  );
   // Will render something like <button data-recipe="button" class="btn btn--variant_purple mt_10px">Button</button>
   ```
 
@@ -964,17 +979,17 @@
     override the default variants or base styles of a recipe.
 
   ```jsx
-  import { styled } from '../styled-system/jsx'
-  import { button } from '../styled-system/recipes'
+  import { styled } from "../styled-system/jsx";
+  import { button } from "../styled-system/recipes";
 
-  const Button = styled('button', button, {
+  const Button = styled("button", button, {
     defaultProps: {
-      variant: 'secondary',
-      px: '10px',
+      variant: "secondary",
+      px: "10px",
     },
-  })
+  });
 
-  const App = () => <Button>Button</Button>
+  const App = () => <Button>Button</Button>;
   // Will render something like <button class="btn btn--variant_secondary px_10px">Button</button>
   ```
 
@@ -982,19 +997,20 @@
     props except recipe variants and style props are forwarded.
 
   ```jsx
-  import { styled } from '../styled-system/jsx'
-  import { button } from '../styled-system/recipes'
-  import { isCssProperty } from '../styled-system/jsx'
-  import { motion, isValidMotionProp } from 'framer-motion'
+  import { styled } from "../styled-system/jsx";
+  import { button } from "../styled-system/recipes";
+  import { isCssProperty } from "../styled-system/jsx";
+  import { motion, isValidMotionProp } from "framer-motion";
 
   const StyledMotion = styled(
     motion.div,
     {},
     {
       shouldForwardProp: (prop, variantKeys) =>
-        isValidMotionProp(prop) || (!variantKeys.includes(prop) && !isCssProperty(prop)),
+        isValidMotionProp(prop) ||
+        (!variantKeys.includes(prop) && !isCssProperty(prop)),
     },
-  )
+  );
   ```
 
 - Updated dependencies [abd7c47a]
@@ -1016,22 +1032,22 @@
 
   ```ts file="panda.config.ts"
   const button = defineRecipe({
-    className: 'btn',
-    base: { color: 'green', fontSize: '16px' },
+    className: "btn",
+    base: { color: "green", fontSize: "16px" },
     variants: {
-      size: { small: { fontSize: '14px' } },
+      size: { small: { fontSize: "14px" } },
     },
-    compoundVariants: [{ size: 'small', css: { color: 'blue' } }],
-  })
+    compoundVariants: [{ size: "small", css: { color: "blue" } }],
+  });
   ```
 
   This would previously not merge the `color` property overrides, but now it does:
 
   ```tsx file="example.tsx"
-  import { styled } from '../styled-system/jsx'
-  import { button } from '../styled-system/recipes'
+  import { styled } from "../styled-system/jsx";
+  import { button } from "../styled-system/recipes";
 
-  const Button = styled('button', button)
+  const Button = styled("button", button);
 
   function App() {
     return (
@@ -1040,7 +1056,7 @@
           Click me
         </Button>
       </>
-    )
+    );
   }
   ```
 
@@ -1223,11 +1239,11 @@ This hook is called right before writing the codegen files to disk. You can use
 export default defineConfig({
   // ...
   hooks: {
-    'codegen:prepare': ({ artifacts, changed }) => {
+    "codegen:prepare": ({ artifacts, changed }) => {
       // do something with the emitted js/d.ts files
     },
   },
-})
+});
 ```
 
 - d5977c24: - Add a `--logfile` flag to the `panda`, `panda codegen`, `panda cssgen` and `panda debug` commands.
@@ -1244,11 +1260,11 @@ export default defineConfig({
   ```js
   module.exports = {
     plugins: {
-      '@pandacss/dev/postcss': {
-        logfile: './logs/panda.log',
+      "@pandacss/dev/postcss": {
+        logfile: "./logs/panda.log",
       },
     },
-  }
+  };
   ```
 
 - Updated dependencies [0dd45b6a]
@@ -1484,9 +1500,9 @@ export default defineConfig({
 
   ```ts
   css({
-    borderWidth: '[2px!]',
-    width: '[2px !important]',
-  })
+    borderWidth: "[2px!]",
+    width: "[2px !important]",
+  });
   ```
 
 - Updated dependencies [8f4ce97c]
@@ -1764,9 +1780,9 @@ export default defineConfig({
 
   ```ts
   interface FactoryOptions<TProps extends Dict> {
-    dataAttr?: boolean
-    defaultProps?: TProps
-    shouldForwardProp?(prop: string, variantKeys: string[]): boolean
+    dataAttr?: boolean;
+    defaultProps?: TProps;
+    shouldForwardProp?(prop: string, variantKeys: string[]): boolean;
   }
   ```
 
@@ -1774,16 +1790,16 @@ export default defineConfig({
     This is useful for testing and debugging.
 
   ```jsx
-  import { styled } from '../styled-system/jsx'
-  import { button } from '../styled-system/recipes'
+  import { styled } from "../styled-system/jsx";
+  import { button } from "../styled-system/recipes";
 
-  const Button = styled('button', button, { dataAttr: true })
+  const Button = styled("button", button, { dataAttr: true });
 
   const App = () => (
     <Button variant="secondary" mt="10px">
       Button
     </Button>
-  )
+  );
   // Will render something like <button data-recipe="button" class="btn btn--variant_purple mt_10px">Button</button>
   ```
 
@@ -1791,17 +1807,17 @@ export default defineConfig({
     override the default variants or base styles of a recipe.
 
   ```jsx
-  import { styled } from '../styled-system/jsx'
-  import { button } from '../styled-system/recipes'
+  import { styled } from "../styled-system/jsx";
+  import { button } from "../styled-system/recipes";
 
-  const Button = styled('button', button, {
+  const Button = styled("button", button, {
     defaultProps: {
-      variant: 'secondary',
-      px: '10px',
+      variant: "secondary",
+      px: "10px",
     },
-  })
+  });
 
-  const App = () => <Button>Button</Button>
+  const App = () => <Button>Button</Button>;
   // Will render something like <button class="btn btn--variant_secondary px_10px">Button</button>
   ```
 
@@ -1809,19 +1825,20 @@ export default defineConfig({
     props except recipe variants and style props are forwarded.
 
   ```jsx
-  import { styled } from '../styled-system/jsx'
-  import { button } from '../styled-system/recipes'
-  import { isCssProperty } from '../styled-system/jsx'
-  import { motion, isValidMotionProp } from 'framer-motion'
+  import { styled } from "../styled-system/jsx";
+  import { button } from "../styled-system/recipes";
+  import { isCssProperty } from "../styled-system/jsx";
+  import { motion, isValidMotionProp } from "framer-motion";
 
   const StyledMotion = styled(
     motion.div,
     {},
     {
       shouldForwardProp: (prop, variantKeys) =>
-        isValidMotionProp(prop) || (!variantKeys.includes(prop) && !isCssProperty(prop)),
+        isValidMotionProp(prop) ||
+        (!variantKeys.includes(prop) && !isCssProperty(prop)),
     },
-  )
+  );
   ```
 
 - Updated dependencies [abd7c47a]
@@ -1843,22 +1860,22 @@ export default defineConfig({
 
   ```ts file="panda.config.ts"
   const button = defineRecipe({
-    className: 'btn',
-    base: { color: 'green', fontSize: '16px' },
+    className: "btn",
+    base: { color: "green", fontSize: "16px" },
     variants: {
-      size: { small: { fontSize: '14px' } },
+      size: { small: { fontSize: "14px" } },
     },
-    compoundVariants: [{ size: 'small', css: { color: 'blue' } }],
-  })
+    compoundVariants: [{ size: "small", css: { color: "blue" } }],
+  });
   ```
 
   This would previously not merge the `color` property overrides, but now it does:
 
   ```tsx file="example.tsx"
-  import { styled } from '../styled-system/jsx'
-  import { button } from '../styled-system/recipes'
+  import { styled } from "../styled-system/jsx";
+  import { button } from "../styled-system/recipes";
 
-  const Button = styled('button', button)
+  const Button = styled("button", button);
 
   function App() {
     return (
@@ -1867,7 +1884,7 @@ export default defineConfig({
           Click me
         </Button>
       </>
-    )
+    );
   }
   ```
 
diff --git a/packages/studio/package.json b/packages/studio/package.json
index eaf44dea2..612e2db1f 100644
--- a/packages/studio/package.json
+++ b/packages/studio/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/studio",
-  "version": "0.38.0",
+  "version": "0.39.0",
   "description": "The automated token documentation for Panda CSS",
   "main": "dist/studio.js",
   "module": "dist/studio.mjs",
diff --git a/packages/token-dictionary/CHANGELOG.md b/packages/token-dictionary/CHANGELOG.md
index 939c8b791..216a160a4 100644
--- a/packages/token-dictionary/CHANGELOG.md
+++ b/packages/token-dictionary/CHANGELOG.md
@@ -1,5 +1,16 @@
 # @pandacss/token-dictionary
 
+## 0.39.0
+
+### Patch Changes
+
+- Updated dependencies [221c9a2]
+- Updated dependencies [c3e797e]
+- Updated dependencies [935ec86]
+  - @pandacss/types@0.39.0
+  - @pandacss/shared@0.39.0
+  - @pandacss/logger@0.39.0
+
 ## 0.38.0
 
 ### Minor Changes
@@ -17,11 +28,11 @@
       ta: {
         deprecated: true,
         transform(value) {
-          return { textAlign: value }
+          return { textAlign: value };
         },
       },
     },
-  })
+  });
   ```
 
   **Deprecating a token**
@@ -31,11 +42,11 @@
     theme: {
       tokens: {
         spacing: {
-          lg: { value: '8px', deprecated: 'use `8` instead' },
+          lg: { value: "8px", deprecated: "use `8` instead" },
         },
       },
     },
-  })
+  });
   ```
 
   **Deprecating a pattern**
@@ -47,7 +58,7 @@
         deprecated: true,
       },
     },
-  })
+  });
   ```
 
   **Deprecating a recipe**
@@ -57,11 +68,11 @@
     theme: {
       recipes: {
         btn: {
-          deprecated: 'will be removed in v2.0',
+          deprecated: "will be removed in v2.0",
         },
       },
     },
-  })
+  });
   ```
 
   ### ESLint Plugin
@@ -154,7 +165,7 @@
 
   ```ts
   // panda.config.ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
@@ -163,15 +174,15 @@
       extend: {
         tokens: {
           colors: {
-            text: { value: 'blue' },
+            text: { value: "blue" },
           },
         },
         semanticTokens: {
           colors: {
             body: {
               value: {
-                base: '{colors.blue.600}',
-                _osDark: '{colors.blue.400}',
+                base: "{colors.blue.600}",
+                _osDark: "{colors.blue.400}",
               },
             },
           },
@@ -183,16 +194,16 @@
       primary: {
         tokens: {
           colors: {
-            text: { value: 'red' },
+            text: { value: "red" },
           },
         },
         semanticTokens: {
           colors: {
-            muted: { value: '{colors.red.200}' },
+            muted: { value: "{colors.red.200}" },
             body: {
               value: {
-                base: '{colors.red.600}',
-                _osDark: '{colors.red.400}',
+                base: "{colors.red.600}",
+                _osDark: "{colors.red.400}",
               },
             },
           },
@@ -201,23 +212,23 @@
       secondary: {
         tokens: {
           colors: {
-            text: { value: 'blue' },
+            text: { value: "blue" },
           },
         },
         semanticTokens: {
           colors: {
-            muted: { value: '{colors.blue.200}' },
+            muted: { value: "{colors.blue.200}" },
             body: {
               value: {
-                base: '{colors.blue.600}',
-                _osDark: '{colors.blue.400}',
+                base: "{colors.blue.600}",
+                _osDark: "{colors.blue.400}",
               },
             },
           },
         },
       },
     },
-  })
+  });
   ```
 
   ### Pregenerating themes
@@ -227,14 +238,14 @@
 
   ```ts
   // panda.config.ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
     staticCss: {
-      themes: ['primary', 'secondary'],
+      themes: ["primary", "secondary"],
     },
-  })
+  });
   ```
 
   This will generate the following CSS:
@@ -246,7 +257,7 @@
       --colors-body: var(--colors-blue-600);
     }
 
-    [data-panda-theme='primary'] {
+    [data-panda-theme="primary"] {
       --colors-text: red;
       --colors-muted: var(--colors-red-200);
       --colors-body: var(--colors-red-600);
@@ -257,7 +268,7 @@
         --colors-body: var(--colors-blue-400);
       }
 
-      [data-panda-theme='primary'] {
+      [data-panda-theme="primary"] {
         --colors-body: var(--colors-red-400);
       }
     }
@@ -288,9 +299,9 @@
   Dynamically import a theme using its name:
 
   ```ts
-  import { getTheme } from '../styled-system/themes'
+  import { getTheme } from "../styled-system/themes";
 
-  const theme = await getTheme('red')
+  const theme = await getTheme("red");
   //    ^? {
   //     name: "red";
   //     id: string;
@@ -301,10 +312,10 @@
   Inject the theme styles into the DOM:
 
   ```ts
-  import { injectTheme } from '../styled-system/themes'
+  import { injectTheme } from "../styled-system/themes";
 
-  const theme = await getTheme('red')
-  injectTheme(document.documentElement, theme) // this returns the injected style element
+  const theme = await getTheme("red");
+  injectTheme(document.documentElement, theme); // this returns the injected style element
   ```
 
   ***
@@ -313,54 +324,62 @@
 
   ```tsx
   // app/layout.tsx
-  import { Inter } from 'next/font/google'
-  import { cookies } from 'next/headers'
-  import { ThemeName, getTheme } from '../../styled-system/themes'
-
-  export default async function RootLayout({ children }: { children: React.ReactNode }) {
-    const store = cookies()
-    const themeName = store.get('theme')?.value as ThemeName
-    const theme = themeName && (await getTheme(themeName))
+  import { Inter } from "next/font/google";
+  import { cookies } from "next/headers";
+  import { ThemeName, getTheme } from "../../styled-system/themes";
+
+  export default async function RootLayout({
+    children,
+  }: {
+    children: React.ReactNode;
+  }) {
+    const store = cookies();
+    const themeName = store.get("theme")?.value as ThemeName;
+    const theme = themeName && (await getTheme(themeName));
 
     return (
       <html lang="en" data-panda-theme={themeName ? themeName : undefined}>
         {themeName && (
           <head>
-            <style type="text/css" id={theme.id} dangerouslySetInnerHTML={{ __html: theme.css }} />
+            <style
+              type="text/css"
+              id={theme.id}
+              dangerouslySetInnerHTML={{ __html: theme.css }}
+            />
           </head>
         )}
         <body>{children}</body>
       </html>
-    )
+    );
   }
 
   // app/page.tsx
-  import { getTheme, injectTheme } from '../../styled-system/themes'
+  import { getTheme, injectTheme } from "../../styled-system/themes";
 
   export default function Home() {
     return (
       <>
         <button
           onClick={async () => {
-            const current = document.documentElement.dataset.pandaTheme
-            const next = current === 'primary' ? 'secondary' : 'primary'
-            const theme = await getTheme(next)
-            setCookie('theme', next, 7)
-            injectTheme(document.documentElement, theme)
+            const current = document.documentElement.dataset.pandaTheme;
+            const next = current === "primary" ? "secondary" : "primary";
+            const theme = await getTheme(next);
+            setCookie("theme", next, 7);
+            injectTheme(document.documentElement, theme);
           }}
         >
           swap theme
         </button>
       </>
-    )
+    );
   }
 
   // Set a Cookie
   function setCookie(cName: string, cValue: any, expDays: number) {
-    let date = new Date()
-    date.setTime(date.getTime() + expDays * 24 * 60 * 60 * 1000)
-    const expires = 'expires=' + date.toUTCString()
-    document.cookie = cName + '=' + cValue + '; ' + expires + '; path=/'
+    let date = new Date();
+    date.setTime(date.getTime() + expDays * 24 * 60 * 60 * 1000);
+    const expires = "expires=" + date.toUTCString();
+    document.cookie = cName + "=" + cValue + "; " + expires + "; path=/";
   }
   ```
 
@@ -369,18 +388,18 @@
   Finally, you can create a theme contract to ensure that all themes have the same structure:
 
   ```ts
-  import { defineThemeContract } from '@pandacss/dev'
+  import { defineThemeContract } from "@pandacss/dev";
 
   const defineTheme = defineThemeContract({
     tokens: {
       colors: {
-        red: { value: '' }, // theme implementations must have a red color
+        red: { value: "" }, // theme implementations must have a red color
       },
     },
-  })
+  });
 
   defineTheme({
-    selector: '.theme-secondary',
+    selector: ".theme-secondary",
     tokens: {
       colors: {
         // ^^^^   Property 'red' is missing in type '{}' but required in type '{ red: { value: string; }; }'
@@ -389,7 +408,7 @@
         // red: { value: 'red' },
       },
     },
-  })
+  });
   ```
 
 ### Patch Changes
@@ -397,30 +416,30 @@
 - 3af3940: Fix an issue when using a semantic token with one (but not all) condition using the color opacity modifier
 
   ```ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     theme: {
       extend: {
         tokens: {
           colors: {
-            black: { value: 'black' },
-            white: { value: 'white' },
+            black: { value: "black" },
+            white: { value: "white" },
           },
         },
         semanticTokens: {
           colors: {
             fg: {
               value: {
-                base: '{colors.black/87}',
-                _dark: '{colors.white}', // <- this was causing a weird issue
+                base: "{colors.black/87}",
+                _dark: "{colors.white}", // <- this was causing a weird issue
               },
             },
           },
         },
       },
     },
-  })
+  });
   ```
 
 - Updated dependencies [861a280]
@@ -438,20 +457,20 @@
 - f2fdc48: Fix negative `semanticTokens` generation
 
   ```ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     tokens: {
       spacing: {
-        1: { value: '1rem' },
+        1: { value: "1rem" },
       },
     },
     semanticTokens: {
       spacing: {
-        lg: { value: '{spacing.1}' },
+        lg: { value: "{spacing.1}" },
       },
     },
-  })
+  });
   ```
 
   Will now correctly generate the negative value:
@@ -492,18 +511,18 @@
 - d4942e0: Fix the color opacity modifier syntax for `semanticTokens` inside of conditions
 
   ```ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     conditions: {
-      light: '.light &',
-      dark: '.dark &',
+      light: ".light &",
+      dark: ".dark &",
     },
     theme: {
       tokens: {
         colors: {
-          blue: { 500: { value: 'blue' } },
-          green: { 500: { value: 'green' } },
+          blue: { 500: { value: "blue" } },
+          green: { 500: { value: "green" } },
         },
         opacity: {
           half: { value: 0.5 },
@@ -513,15 +532,15 @@
         colors: {
           secondary: {
             value: {
-              base: 'red',
-              _light: '{colors.blue.500/32}', // <-- wasn't working as expected
-              _dark: '{colors.green.500/half}',
+              base: "red",
+              _light: "{colors.blue.500/32}", // <-- wasn't working as expected
+              _dark: "{colors.green.500/half}",
             },
           },
         },
       },
     },
-  })
+  });
   ```
 
   will now correctly generate the following CSS:
@@ -536,11 +555,19 @@
     }
 
     .light {
-      --colors-secondary: color-mix(in srgb, var(--colors-blue-500) 32%, transparent);
+      --colors-secondary: color-mix(
+        in srgb,
+        var(--colors-blue-500) 32%,
+        transparent
+      );
     }
 
     .dark {
-      --colors-secondary: color-mix(in srgb, var(--colors-green-500) 50%, transparent);
+      --colors-secondary: color-mix(
+        in srgb,
+        var(--colors-green-500) 50%,
+        transparent
+      );
     }
   }
   ```
@@ -563,16 +590,16 @@
   ```ts
   // runtime usage
 
-  import { css } from '../styled-system/css'
+  import { css } from "../styled-system/css";
 
-  css({ bg: '{colors.blue.300/70}' })
+  css({ bg: "{colors.blue.300/70}" });
   // => @layer utilities {
   //    .bg_token\(colors\.blue\.300\/70\) {
   //      background: color-mix(in srgb, var(--colors-blue-300) 70%, transparent);
   //    }
   //  }
 
-  css({ bg: 'token(colors.blue.300/70)' })
+  css({ bg: "token(colors.blue.300/70)" });
   // => @layer utilities {
   //    .bg_token\(colors\.blue\.300\/70\) {
   //      background: color-mix(in srgb, var(--colors-blue-300) 70%, transparent);
@@ -582,33 +609,37 @@
 
   ```ts
   // build-time usage
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     theme: {
       tokens: {
         colors: {
           blue: {
-            300: { value: '#00f' },
+            300: { value: "#00f" },
           },
         },
       },
       semanticTokens: {
         colors: {
           primary: {
-            value: '{colors.blue.300/70}',
+            value: "{colors.blue.300/70}",
           },
         },
       },
     },
-  })
+  });
   ```
 
   ```css
   @layer tokens {
     :where(:root, :host) {
       --colors-blue-300: #00f;
-      --colors-primary: color-mix(in srgb, var(--colors-blue-300) 70%, transparent);
+      --colors-primary: color-mix(
+        in srgb,
+        var(--colors-blue-300) 70%,
+        transparent
+      );
     }
   }
   ```
@@ -645,7 +676,7 @@
   Given this config:
 
   ```ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
@@ -656,13 +687,13 @@
             bg: {
               primary: {
                 DEFAULT: {
-                  value: '{colors.red.500}',
+                  value: "{colors.red.500}",
                 },
                 base: {
-                  value: '{colors.green.500}',
+                  value: "{colors.green.500}",
                 },
                 hover: {
-                  value: '{colors.yellow.300}',
+                  value: "{colors.yellow.300}",
                 },
               },
             },
@@ -670,17 +701,17 @@
         },
       },
     },
-  })
+  });
   ```
 
   And this style usage:
 
   ```ts
-  import { css } from 'styled-system/css'
+  import { css } from "styled-system/css";
 
   css({
-    colorPalette: 'bg.primary',
-  })
+    colorPalette: "bg.primary",
+  });
   ```
 
   This is the difference in the generated css
@@ -794,10 +825,10 @@
   css({
     // ✅ this is fine now, will resolve to something like
     // `@container (min-width: 56em)`
-    '@container (min-width: {sizes.4xl})': {
-      color: 'green',
+    "@container (min-width: {sizes.4xl})": {
+      color: "green",
     },
-  })
+  });
   ```
 
   Fix an issue where the curly token references would not be escaped if the token path was not found.
@@ -876,13 +907,13 @@
         // add aspect ratio tokens
         tokens: {
           aspectRatios: {
-            '1:1': '1',
-            '16:9': '16/9',
+            "1:1": "1",
+            "16:9": "16/9",
           },
         },
       },
     },
-  })
+  });
   ```
 
   Here's what the default aspect ratio tokens in the base preset looks like:
@@ -943,11 +974,11 @@
 - de282f60: Support token reference syntax when authoring styles object, text styles and layer styles.
 
   ```jsx
-  import { css } from '../styled-system/css'
+  import { css } from "../styled-system/css";
 
   const styles = css({
-    border: '2px solid {colors.primary}',
-  })
+    border: "2px solid {colors.primary}",
+  });
   ```
 
   This will resolve the token reference and convert it to css variables.
@@ -967,18 +998,18 @@
   ```jsx
   const styles = css({
     // token reference syntax
-    border: '2px solid {colors.primary}',
+    border: "2px solid {colors.primary}",
     // token function syntax
-    border: '2px solid token(colors.primary)',
-  })
+    border: "2px solid token(colors.primary)",
+  });
   ```
 
   However, The `token(...)` syntax allows you to set a fallback value.
 
   ```jsx
   const styles = css({
-    border: '2px solid token(colors.primary, red)',
-  })
+    border: "2px solid token(colors.primary, red)",
+  });
   ```
 
 ### Patch Changes
@@ -1226,18 +1257,18 @@
         colors: {
           button: {
             dark: {
-              value: 'navy',
+              value: "navy",
             },
             light: {
               DEFAULT: {
-                value: 'skyblue',
+                value: "skyblue",
               },
               accent: {
                 DEFAULT: {
-                  value: 'cyan',
+                  value: "cyan",
                 },
                 secondary: {
-                  value: 'blue',
+                  value: "blue",
                 },
               },
             },
@@ -1245,50 +1276,50 @@
         },
       },
     },
-  }
+  };
   ```
 
   You can now use the root `button` color palette and its values directly:
 
   ```tsx
-  import { css } from '../styled-system/css'
+  import { css } from "../styled-system/css";
 
   export const App = () => {
     return (
       <button
         className={css({
-          colorPalette: 'button',
-          color: 'colorPalette.light',
-          backgroundColor: 'colorPalette.dark',
+          colorPalette: "button",
+          color: "colorPalette.light",
+          backgroundColor: "colorPalette.dark",
           _hover: {
-            color: 'colorPalette.light.accent',
-            background: 'colorPalette.light.accent.secondary',
+            color: "colorPalette.light.accent",
+            background: "colorPalette.light.accent.secondary",
           },
         })}
       >
         Root color palette
       </button>
-    )
-  }
+    );
+  };
   ```
 
   Or you can use any deeply nested property (e.g. `button.light.accent`) as a root color palette:
 
   ```tsx
-  import { css } from '../styled-system/css'
+  import { css } from "../styled-system/css";
 
   export const App = () => {
     return (
       <button
         className={css({
-          colorPalette: 'button.light.accent',
-          color: 'colorPalette.secondary',
+          colorPalette: "button.light.accent",
+          color: "colorPalette.secondary",
         })}
       >
         Nested color palette leaf
       </button>
-    )
-  }
+    );
+  };
   ```
 
 ### Patch Changes
@@ -1503,11 +1534,11 @@ This hook is called right before writing the codegen files to disk. You can use
 export default defineConfig({
   // ...
   hooks: {
-    'codegen:prepare': ({ artifacts, changed }) => {
+    "codegen:prepare": ({ artifacts, changed }) => {
       // do something with the emitted js/d.ts files
     },
   },
-})
+});
 ```
 
 - d5977c24: - Add a `--logfile` flag to the `panda`, `panda codegen`, `panda cssgen` and `panda debug` commands.
@@ -1524,11 +1555,11 @@ export default defineConfig({
   ```js
   module.exports = {
     plugins: {
-      '@pandacss/dev/postcss': {
-        logfile: './logs/panda.log',
+      "@pandacss/dev/postcss": {
+        logfile: "./logs/panda.log",
       },
     },
-  }
+  };
   ```
 
 - Updated dependencies [74485ef1]
@@ -1558,10 +1589,10 @@ export default defineConfig({
   css({
     // ✅ this is fine now, will resolve to something like
     // `@container (min-width: 56em)`
-    '@container (min-width: {sizes.4xl})': {
-      color: 'green',
+    "@container (min-width: {sizes.4xl})": {
+      color: "green",
     },
-  })
+  });
   ```
 
   Fix an issue where the curly token references would not be escaped if the token path was not found.
@@ -1640,13 +1671,13 @@ export default defineConfig({
         // add aspect ratio tokens
         tokens: {
           aspectRatios: {
-            '1:1': '1',
-            '16:9': '16/9',
+            "1:1": "1",
+            "16:9": "16/9",
           },
         },
       },
     },
-  })
+  });
   ```
 
   Here's what the default aspect ratio tokens in the base preset looks like:
@@ -1707,11 +1738,11 @@ export default defineConfig({
 - de282f60: Support token reference syntax when authoring styles object, text styles and layer styles.
 
   ```jsx
-  import { css } from '../styled-system/css'
+  import { css } from "../styled-system/css";
 
   const styles = css({
-    border: '2px solid {colors.primary}',
-  })
+    border: "2px solid {colors.primary}",
+  });
   ```
 
   This will resolve the token reference and convert it to css variables.
@@ -1731,18 +1762,18 @@ export default defineConfig({
   ```jsx
   const styles = css({
     // token reference syntax
-    border: '2px solid {colors.primary}',
+    border: "2px solid {colors.primary}",
     // token function syntax
-    border: '2px solid token(colors.primary)',
-  })
+    border: "2px solid token(colors.primary)",
+  });
   ```
 
   However, The `token(...)` syntax allows you to set a fallback value.
 
   ```jsx
   const styles = css({
-    border: '2px solid token(colors.primary, red)',
-  })
+    border: "2px solid token(colors.primary, red)",
+  });
   ```
 
 ### Patch Changes
@@ -1990,18 +2021,18 @@ export default defineConfig({
         colors: {
           button: {
             dark: {
-              value: 'navy',
+              value: "navy",
             },
             light: {
               DEFAULT: {
-                value: 'skyblue',
+                value: "skyblue",
               },
               accent: {
                 DEFAULT: {
-                  value: 'cyan',
+                  value: "cyan",
                 },
                 secondary: {
-                  value: 'blue',
+                  value: "blue",
                 },
               },
             },
@@ -2009,50 +2040,50 @@ export default defineConfig({
         },
       },
     },
-  }
+  };
   ```
 
   You can now use the root `button` color palette and its values directly:
 
   ```tsx
-  import { css } from '../styled-system/css'
+  import { css } from "../styled-system/css";
 
   export const App = () => {
     return (
       <button
         className={css({
-          colorPalette: 'button',
-          color: 'colorPalette.light',
-          backgroundColor: 'colorPalette.dark',
+          colorPalette: "button",
+          color: "colorPalette.light",
+          backgroundColor: "colorPalette.dark",
           _hover: {
-            color: 'colorPalette.light.accent',
-            background: 'colorPalette.light.accent.secondary',
+            color: "colorPalette.light.accent",
+            background: "colorPalette.light.accent.secondary",
           },
         })}
       >
         Root color palette
       </button>
-    )
-  }
+    );
+  };
   ```
 
   Or you can use any deeply nested property (e.g. `button.light.accent`) as a root color palette:
 
   ```tsx
-  import { css } from '../styled-system/css'
+  import { css } from "../styled-system/css";
 
   export const App = () => {
     return (
       <button
         className={css({
-          colorPalette: 'button.light.accent',
-          color: 'colorPalette.secondary',
+          colorPalette: "button.light.accent",
+          color: "colorPalette.secondary",
         })}
       >
         Nested color palette leaf
       </button>
-    )
-  }
+    );
+  };
   ```
 
 ### Patch Changes
@@ -2262,7 +2293,7 @@ Will now allow you to use the following syntax for token path:
   Given this config:
 
   ```ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
@@ -2273,13 +2304,13 @@ Will now allow you to use the following syntax for token path:
             bg: {
               primary: {
                 DEFAULT: {
-                  value: '{colors.red.500}',
+                  value: "{colors.red.500}",
                 },
                 base: {
-                  value: '{colors.green.500}',
+                  value: "{colors.green.500}",
                 },
                 hover: {
-                  value: '{colors.yellow.300}',
+                  value: "{colors.yellow.300}",
                 },
               },
             },
@@ -2287,17 +2318,17 @@ Will now allow you to use the following syntax for token path:
         },
       },
     },
-  })
+  });
   ```
 
   And this style usage:
 
   ```ts
-  import { css } from 'styled-system/css'
+  import { css } from "styled-system/css";
 
   css({
-    colorPalette: 'bg.primary',
-  })
+    colorPalette: "bg.primary",
+  });
   ```
 
   This is the difference in the generated css
@@ -2411,10 +2442,10 @@ Will now allow you to use the following syntax for token path:
   css({
     // ✅ this is fine now, will resolve to something like
     // `@container (min-width: 56em)`
-    '@container (min-width: {sizes.4xl})': {
-      color: 'green',
+    "@container (min-width: {sizes.4xl})": {
+      color: "green",
     },
-  })
+  });
   ```
 
   Fix an issue where the curly token references would not be escaped if the token path was not found.
@@ -2493,13 +2524,13 @@ Will now allow you to use the following syntax for token path:
         // add aspect ratio tokens
         tokens: {
           aspectRatios: {
-            '1:1': '1',
-            '16:9': '16/9',
+            "1:1": "1",
+            "16:9": "16/9",
           },
         },
       },
     },
-  })
+  });
   ```
 
   Here's what the default aspect ratio tokens in the base preset looks like:
@@ -2560,11 +2591,11 @@ Will now allow you to use the following syntax for token path:
 - de282f60: Support token reference syntax when authoring styles object, text styles and layer styles.
 
   ```jsx
-  import { css } from '../styled-system/css'
+  import { css } from "../styled-system/css";
 
   const styles = css({
-    border: '2px solid {colors.primary}',
-  })
+    border: "2px solid {colors.primary}",
+  });
   ```
 
   This will resolve the token reference and convert it to css variables.
@@ -2584,18 +2615,18 @@ Will now allow you to use the following syntax for token path:
   ```jsx
   const styles = css({
     // token reference syntax
-    border: '2px solid {colors.primary}',
+    border: "2px solid {colors.primary}",
     // token function syntax
-    border: '2px solid token(colors.primary)',
-  })
+    border: "2px solid token(colors.primary)",
+  });
   ```
 
   However, The `token(...)` syntax allows you to set a fallback value.
 
   ```jsx
   const styles = css({
-    border: '2px solid token(colors.primary, red)',
-  })
+    border: "2px solid token(colors.primary, red)",
+  });
   ```
 
 ### Patch Changes
@@ -2843,18 +2874,18 @@ Will now allow you to use the following syntax for token path:
         colors: {
           button: {
             dark: {
-              value: 'navy',
+              value: "navy",
             },
             light: {
               DEFAULT: {
-                value: 'skyblue',
+                value: "skyblue",
               },
               accent: {
                 DEFAULT: {
-                  value: 'cyan',
+                  value: "cyan",
                 },
                 secondary: {
-                  value: 'blue',
+                  value: "blue",
                 },
               },
             },
@@ -2862,50 +2893,50 @@ Will now allow you to use the following syntax for token path:
         },
       },
     },
-  }
+  };
   ```
 
   You can now use the root `button` color palette and its values directly:
 
   ```tsx
-  import { css } from '../styled-system/css'
+  import { css } from "../styled-system/css";
 
   export const App = () => {
     return (
       <button
         className={css({
-          colorPalette: 'button',
-          color: 'colorPalette.light',
-          backgroundColor: 'colorPalette.dark',
+          colorPalette: "button",
+          color: "colorPalette.light",
+          backgroundColor: "colorPalette.dark",
           _hover: {
-            color: 'colorPalette.light.accent',
-            background: 'colorPalette.light.accent.secondary',
+            color: "colorPalette.light.accent",
+            background: "colorPalette.light.accent.secondary",
           },
         })}
       >
         Root color palette
       </button>
-    )
-  }
+    );
+  };
   ```
 
   Or you can use any deeply nested property (e.g. `button.light.accent`) as a root color palette:
 
   ```tsx
-  import { css } from '../styled-system/css'
+  import { css } from "../styled-system/css";
 
   export const App = () => {
     return (
       <button
         className={css({
-          colorPalette: 'button.light.accent',
-          color: 'colorPalette.secondary',
+          colorPalette: "button.light.accent",
+          color: "colorPalette.secondary",
         })}
       >
         Nested color palette leaf
       </button>
-    )
-  }
+    );
+  };
   ```
 
 ### Patch Changes
@@ -3120,11 +3151,11 @@ This hook is called right before writing the codegen files to disk. You can use
 export default defineConfig({
   // ...
   hooks: {
-    'codegen:prepare': ({ artifacts, changed }) => {
+    "codegen:prepare": ({ artifacts, changed }) => {
       // do something with the emitted js/d.ts files
     },
   },
-})
+});
 ```
 
 - d5977c24: - Add a `--logfile` flag to the `panda`, `panda codegen`, `panda cssgen` and `panda debug` commands.
@@ -3141,11 +3172,11 @@ export default defineConfig({
   ```js
   module.exports = {
     plugins: {
-      '@pandacss/dev/postcss': {
-        logfile: './logs/panda.log',
+      "@pandacss/dev/postcss": {
+        logfile: "./logs/panda.log",
       },
     },
-  }
+  };
   ```
 
 - Updated dependencies [74485ef1]
@@ -3175,10 +3206,10 @@ export default defineConfig({
   css({
     // ✅ this is fine now, will resolve to something like
     // `@container (min-width: 56em)`
-    '@container (min-width: {sizes.4xl})': {
-      color: 'green',
+    "@container (min-width: {sizes.4xl})": {
+      color: "green",
     },
-  })
+  });
   ```
 
   Fix an issue where the curly token references would not be escaped if the token path was not found.
@@ -3257,13 +3288,13 @@ export default defineConfig({
         // add aspect ratio tokens
         tokens: {
           aspectRatios: {
-            '1:1': '1',
-            '16:9': '16/9',
+            "1:1": "1",
+            "16:9": "16/9",
           },
         },
       },
     },
-  })
+  });
   ```
 
   Here's what the default aspect ratio tokens in the base preset looks like:
@@ -3324,11 +3355,11 @@ export default defineConfig({
 - de282f60: Support token reference syntax when authoring styles object, text styles and layer styles.
 
   ```jsx
-  import { css } from '../styled-system/css'
+  import { css } from "../styled-system/css";
 
   const styles = css({
-    border: '2px solid {colors.primary}',
-  })
+    border: "2px solid {colors.primary}",
+  });
   ```
 
   This will resolve the token reference and convert it to css variables.
@@ -3348,18 +3379,18 @@ export default defineConfig({
   ```jsx
   const styles = css({
     // token reference syntax
-    border: '2px solid {colors.primary}',
+    border: "2px solid {colors.primary}",
     // token function syntax
-    border: '2px solid token(colors.primary)',
-  })
+    border: "2px solid token(colors.primary)",
+  });
   ```
 
   However, The `token(...)` syntax allows you to set a fallback value.
 
   ```jsx
   const styles = css({
-    border: '2px solid token(colors.primary, red)',
-  })
+    border: "2px solid token(colors.primary, red)",
+  });
   ```
 
 ### Patch Changes
@@ -3607,18 +3638,18 @@ export default defineConfig({
         colors: {
           button: {
             dark: {
-              value: 'navy',
+              value: "navy",
             },
             light: {
               DEFAULT: {
-                value: 'skyblue',
+                value: "skyblue",
               },
               accent: {
                 DEFAULT: {
-                  value: 'cyan',
+                  value: "cyan",
                 },
                 secondary: {
-                  value: 'blue',
+                  value: "blue",
                 },
               },
             },
@@ -3626,50 +3657,50 @@ export default defineConfig({
         },
       },
     },
-  }
+  };
   ```
 
   You can now use the root `button` color palette and its values directly:
 
   ```tsx
-  import { css } from '../styled-system/css'
+  import { css } from "../styled-system/css";
 
   export const App = () => {
     return (
       <button
         className={css({
-          colorPalette: 'button',
-          color: 'colorPalette.light',
-          backgroundColor: 'colorPalette.dark',
+          colorPalette: "button",
+          color: "colorPalette.light",
+          backgroundColor: "colorPalette.dark",
           _hover: {
-            color: 'colorPalette.light.accent',
-            background: 'colorPalette.light.accent.secondary',
+            color: "colorPalette.light.accent",
+            background: "colorPalette.light.accent.secondary",
           },
         })}
       >
         Root color palette
       </button>
-    )
-  }
+    );
+  };
   ```
 
   Or you can use any deeply nested property (e.g. `button.light.accent`) as a root color palette:
 
   ```tsx
-  import { css } from '../styled-system/css'
+  import { css } from "../styled-system/css";
 
   export const App = () => {
     return (
       <button
         className={css({
-          colorPalette: 'button.light.accent',
-          color: 'colorPalette.secondary',
+          colorPalette: "button.light.accent",
+          color: "colorPalette.secondary",
         })}
       >
         Nested color palette leaf
       </button>
-    )
-  }
+    );
+  };
   ```
 
 ### Patch Changes
diff --git a/packages/token-dictionary/package.json b/packages/token-dictionary/package.json
index fa22d4d4c..c3a9a721b 100644
--- a/packages/token-dictionary/package.json
+++ b/packages/token-dictionary/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/token-dictionary",
-  "version": "0.38.0",
+  "version": "0.39.0",
   "description": "Common error messages for css panda",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
diff --git a/packages/types/CHANGELOG.md b/packages/types/CHANGELOG.md
index dce38ad25..8ec8430c2 100644
--- a/packages/types/CHANGELOG.md
+++ b/packages/types/CHANGELOG.md
@@ -1,5 +1,16 @@
 # @pandacss/types
 
+## 0.39.0
+
+### Minor Changes
+
+- 221c9a2: Add support for more typography related properties in text styles such as `fontFeatureSettings`, `fontPalette`, etc.
+
+### Patch Changes
+
+- c3e797e: Fix issue where `animationName` property was not connected to `theme.keyframes`, as a result, no autocompletion was
+  available.
+
 ## 0.38.0
 
 ### Minor Changes
@@ -17,11 +28,11 @@
       ta: {
         deprecated: true,
         transform(value) {
-          return { textAlign: value }
+          return { textAlign: value };
         },
       },
     },
-  })
+  });
   ```
 
   **Deprecating a token**
@@ -31,11 +42,11 @@
     theme: {
       tokens: {
         spacing: {
-          lg: { value: '8px', deprecated: 'use `8` instead' },
+          lg: { value: "8px", deprecated: "use `8` instead" },
         },
       },
     },
-  })
+  });
   ```
 
   **Deprecating a pattern**
@@ -47,7 +58,7 @@
         deprecated: true,
       },
     },
-  })
+  });
   ```
 
   **Deprecating a recipe**
@@ -57,11 +68,11 @@
     theme: {
       recipes: {
         btn: {
-          deprecated: 'will be removed in v2.0',
+          deprecated: "will be removed in v2.0",
         },
       },
     },
-  })
+  });
   ```
 
   ### ESLint Plugin
@@ -85,23 +96,28 @@
   This makes it even easier to merge styles from multiple sources.
 
   ```tsx
-  import { Stack, styled } from '../styled-system/jsx'
+  import { Stack, styled } from "../styled-system/jsx";
 
   const HeroSection = (props) => {
     return (
-      <Stack css={[{ color: 'blue.300', padding: '4' }, props.css]}>
-        <styled.div css={[{ fontSize: '2xl' }, props.hero]}>Hero Section</styled.div>
+      <Stack css={[{ color: "blue.300", padding: "4" }, props.css]}>
+        <styled.div css={[{ fontSize: "2xl" }, props.hero]}>
+          Hero Section
+        </styled.div>
       </Stack>
-    )
-  }
+    );
+  };
 
   const App = () => {
     return (
       <>
-        <HeroSection css={{ backgroundColor: 'yellow.300' }} hero={css.raw({ fontSize: '4xl', color: 'red.300' })} />
+        <HeroSection
+          css={{ backgroundColor: "yellow.300" }}
+          hero={css.raw({ fontSize: "4xl", color: "red.300" })}
+        />
       </>
-    )
-  }
+    );
+  };
   ```
 
   should render something like:
@@ -273,9 +289,9 @@
     useful when applying negative margin to child elements.
 
   ```tsx
-  <div className={flex({ spaceX: '-1' })}>
-    <div className={circle({ size: '5', bg: 'red' })} />
-    <div className={circle({ size: '5', bg: 'pink' })} />
+  <div className={flex({ spaceX: "-1" })}>
+    <div className={circle({ size: "5", bg: "red" })} />
+    <div className={circle({ size: "5", bg: "pink" })} />
   </div>
   ```
 
@@ -287,13 +303,13 @@
   ```tsx
   <div
     className={css({
-      bgGradient: 'to-r',
+      bgGradient: "to-r",
       // from
-      gradientFrom: 'red',
-      gradientFromPosition: 'top left',
+      gradientFrom: "red",
+      gradientFromPosition: "top left",
       // to
-      gradientTo: 'blue',
-      gradientToPosition: 'bottom right',
+      gradientTo: "blue",
+      gradientToPosition: "bottom right",
     })}
   />
   ```
@@ -303,19 +319,23 @@
   It can be useful to use a component library's `styled-system` while also using your own `styled-system` in your app.
 
   ```ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
-    importMap: ['@acme/styled-system', '@ui-lib/styled-system', 'styled-system'],
-  })
+    importMap: [
+      "@acme/styled-system",
+      "@ui-lib/styled-system",
+      "styled-system",
+    ],
+  });
   ```
 
   Now you can use any of the `@acme/styled-system`, `@ui-lib/styled-system` and `styled-system` import sources:
 
   ```ts
-  import { css } from '@acme/css'
-  import { css as uiCss } from '@ui-lib/styled-system/css'
-  import { css as appCss } from '@ui-lib/styled-system/css'
+  import { css } from "@acme/css";
+  import { css as uiCss } from "@ui-lib/styled-system/css";
+  import { css as appCss } from "@ui-lib/styled-system/css";
   ```
 
 ## 0.36.1
@@ -338,7 +358,7 @@
 
   ```ts
   // panda.config.ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
@@ -347,15 +367,15 @@
       extend: {
         tokens: {
           colors: {
-            text: { value: 'blue' },
+            text: { value: "blue" },
           },
         },
         semanticTokens: {
           colors: {
             body: {
               value: {
-                base: '{colors.blue.600}',
-                _osDark: '{colors.blue.400}',
+                base: "{colors.blue.600}",
+                _osDark: "{colors.blue.400}",
               },
             },
           },
@@ -367,16 +387,16 @@
       primary: {
         tokens: {
           colors: {
-            text: { value: 'red' },
+            text: { value: "red" },
           },
         },
         semanticTokens: {
           colors: {
-            muted: { value: '{colors.red.200}' },
+            muted: { value: "{colors.red.200}" },
             body: {
               value: {
-                base: '{colors.red.600}',
-                _osDark: '{colors.red.400}',
+                base: "{colors.red.600}",
+                _osDark: "{colors.red.400}",
               },
             },
           },
@@ -385,23 +405,23 @@
       secondary: {
         tokens: {
           colors: {
-            text: { value: 'blue' },
+            text: { value: "blue" },
           },
         },
         semanticTokens: {
           colors: {
-            muted: { value: '{colors.blue.200}' },
+            muted: { value: "{colors.blue.200}" },
             body: {
               value: {
-                base: '{colors.blue.600}',
-                _osDark: '{colors.blue.400}',
+                base: "{colors.blue.600}",
+                _osDark: "{colors.blue.400}",
               },
             },
           },
         },
       },
     },
-  })
+  });
   ```
 
   ### Pregenerating themes
@@ -411,14 +431,14 @@
 
   ```ts
   // panda.config.ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
     staticCss: {
-      themes: ['primary', 'secondary'],
+      themes: ["primary", "secondary"],
     },
-  })
+  });
   ```
 
   This will generate the following CSS:
@@ -430,7 +450,7 @@
       --colors-body: var(--colors-blue-600);
     }
 
-    [data-panda-theme='primary'] {
+    [data-panda-theme="primary"] {
       --colors-text: red;
       --colors-muted: var(--colors-red-200);
       --colors-body: var(--colors-red-600);
@@ -441,7 +461,7 @@
         --colors-body: var(--colors-blue-400);
       }
 
-      [data-panda-theme='primary'] {
+      [data-panda-theme="primary"] {
         --colors-body: var(--colors-red-400);
       }
     }
@@ -472,9 +492,9 @@
   Dynamically import a theme using its name:
 
   ```ts
-  import { getTheme } from '../styled-system/themes'
+  import { getTheme } from "../styled-system/themes";
 
-  const theme = await getTheme('red')
+  const theme = await getTheme("red");
   //    ^? {
   //     name: "red";
   //     id: string;
@@ -485,10 +505,10 @@
   Inject the theme styles into the DOM:
 
   ```ts
-  import { injectTheme } from '../styled-system/themes'
+  import { injectTheme } from "../styled-system/themes";
 
-  const theme = await getTheme('red')
-  injectTheme(document.documentElement, theme) // this returns the injected style element
+  const theme = await getTheme("red");
+  injectTheme(document.documentElement, theme); // this returns the injected style element
   ```
 
   ***
@@ -497,54 +517,62 @@
 
   ```tsx
   // app/layout.tsx
-  import { Inter } from 'next/font/google'
-  import { cookies } from 'next/headers'
-  import { ThemeName, getTheme } from '../../styled-system/themes'
-
-  export default async function RootLayout({ children }: { children: React.ReactNode }) {
-    const store = cookies()
-    const themeName = store.get('theme')?.value as ThemeName
-    const theme = themeName && (await getTheme(themeName))
+  import { Inter } from "next/font/google";
+  import { cookies } from "next/headers";
+  import { ThemeName, getTheme } from "../../styled-system/themes";
+
+  export default async function RootLayout({
+    children,
+  }: {
+    children: React.ReactNode;
+  }) {
+    const store = cookies();
+    const themeName = store.get("theme")?.value as ThemeName;
+    const theme = themeName && (await getTheme(themeName));
 
     return (
       <html lang="en" data-panda-theme={themeName ? themeName : undefined}>
         {themeName && (
           <head>
-            <style type="text/css" id={theme.id} dangerouslySetInnerHTML={{ __html: theme.css }} />
+            <style
+              type="text/css"
+              id={theme.id}
+              dangerouslySetInnerHTML={{ __html: theme.css }}
+            />
           </head>
         )}
         <body>{children}</body>
       </html>
-    )
+    );
   }
 
   // app/page.tsx
-  import { getTheme, injectTheme } from '../../styled-system/themes'
+  import { getTheme, injectTheme } from "../../styled-system/themes";
 
   export default function Home() {
     return (
       <>
         <button
           onClick={async () => {
-            const current = document.documentElement.dataset.pandaTheme
-            const next = current === 'primary' ? 'secondary' : 'primary'
-            const theme = await getTheme(next)
-            setCookie('theme', next, 7)
-            injectTheme(document.documentElement, theme)
+            const current = document.documentElement.dataset.pandaTheme;
+            const next = current === "primary" ? "secondary" : "primary";
+            const theme = await getTheme(next);
+            setCookie("theme", next, 7);
+            injectTheme(document.documentElement, theme);
           }}
         >
           swap theme
         </button>
       </>
-    )
+    );
   }
 
   // Set a Cookie
   function setCookie(cName: string, cValue: any, expDays: number) {
-    let date = new Date()
-    date.setTime(date.getTime() + expDays * 24 * 60 * 60 * 1000)
-    const expires = 'expires=' + date.toUTCString()
-    document.cookie = cName + '=' + cValue + '; ' + expires + '; path=/'
+    let date = new Date();
+    date.setTime(date.getTime() + expDays * 24 * 60 * 60 * 1000);
+    const expires = "expires=" + date.toUTCString();
+    document.cookie = cName + "=" + cValue + "; " + expires + "; path=/";
   }
   ```
 
@@ -553,18 +581,18 @@
   Finally, you can create a theme contract to ensure that all themes have the same structure:
 
   ```ts
-  import { defineThemeContract } from '@pandacss/dev'
+  import { defineThemeContract } from "@pandacss/dev";
 
   const defineTheme = defineThemeContract({
     tokens: {
       colors: {
-        red: { value: '' }, // theme implementations must have a red color
+        red: { value: "" }, // theme implementations must have a red color
       },
     },
-  })
+  });
 
   defineTheme({
-    selector: '.theme-secondary',
+    selector: ".theme-secondary",
     tokens: {
       colors: {
         // ^^^^   Property 'red' is missing in type '{}' but required in type '{ red: { value: string; }; }'
@@ -573,7 +601,7 @@
         // red: { value: 'red' },
       },
     },
-  })
+  });
   ```
 
 - fabdabe: ## Changes
@@ -593,12 +621,12 @@
     theme: {
       extend: {
         colors: {
-          primary: { value: 'blue' },
+          primary: { value: "blue" },
         },
         // borderWidths: {}, // ⚠️ nothing defined here
       },
     },
-  })
+  });
   ```
 
   ```ts
@@ -609,8 +637,8 @@
 
     // ✅ after this PR, TS will not throw an error anymore as you don't have any `borderWidths` tokens
     // if you add one, this will error again (as it's supposed to)
-    borderWidths: '123px',
-  })
+    borderWidths: "123px",
+  });
   ```
 
   ## Description
@@ -637,34 +665,34 @@
   Example:
 
   ```ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
     globalVars: {
-      '--some-color': 'red',
-      '--button-color': {
-        syntax: '<color>',
+      "--some-color": "red",
+      "--button-color": {
+        syntax: "<color>",
         inherits: false,
-        initialValue: 'blue',
+        initialValue: "blue",
       },
     },
-  })
+  });
   ```
 
   > Note: Keys defined in `globalVars` will be available as a value for _every_ utilities, as they're not bound to token
   > categories.
 
   ```ts
-  import { css } from '../styled-system/css'
+  import { css } from "../styled-system/css";
 
   const className = css({
-    '--button-color': 'colors.red.300',
+    "--button-color": "colors.red.300",
     // ^^^^^^^^^^^^  will be suggested
 
-    backgroundColor: 'var(--button-color)',
+    backgroundColor: "var(--button-color)",
     //                ^^^^^^^^^^^^^^^^^^  will be suggested
-  })
+  });
   ```
 
 - 340f4f1: Fix `Expression produces a union type that is too complex to represent` with `splitCssProps` because of
@@ -682,32 +710,32 @@
   Each slot will contain a `${className}__${slotName}` class in addition to the atomic styles.
 
   ```tsx
-  import { sva } from '../styled-system/css'
+  import { sva } from "../styled-system/css";
 
   const button = sva({
-    className: 'btn',
-    slots: ['root', 'text'],
+    className: "btn",
+    slots: ["root", "text"],
     base: {
       root: {
-        bg: 'blue.500',
+        bg: "blue.500",
         _hover: {
           // v--- 🎯 this will target the `text` slot
-          '& .btn__text': {
-            color: 'white',
+          "& .btn__text": {
+            color: "white",
           },
         },
       },
     },
-  })
+  });
 
   export const App = () => {
-    const classes = button()
+    const classes = button();
     return (
       <div className={classes.root}>
         <div className={classes.text}>Click me</div>
       </div>
-    )
-  }
+    );
+  };
   ```
 
 ## 0.34.3
@@ -752,15 +780,15 @@
   class assigned.
 
   ```js
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     preflight: {
-      scope: '.my-scope',
-      level: 'element', // 'element' | 'parent (default)'
+      scope: ".my-scope",
+      level: "element", // 'element' | 'parent (default)'
     },
     // ...
-  })
+  });
   ```
 
   This will generate CSS that looks like:
@@ -790,20 +818,20 @@
   export default defaultConfig({
     conditions: {
       extend: {
-        supportHover: ['@media (hover: hover) and (pointer: fine)', '&:hover'],
+        supportHover: ["@media (hover: hover) and (pointer: fine)", "&:hover"],
       },
     },
-  })
+  });
   ```
 
   ```ts
-  import { css } from '../styled-system/css'
+  import { css } from "../styled-system/css";
 
   css({
     _supportHover: {
-      color: 'red',
+      color: "red",
     },
-  })
+  });
   ```
 
   will generate the following CSS:
@@ -880,16 +908,17 @@
   export default defineConfig({
     // ...
     hooks: {
-      'parser:before': ({ configure }) => {
+      "parser:before": ({ configure }) => {
         configure({
           // ignore the Select.Content entirely
-          matchTag: (tag) => tag !== 'Select.Content',
+          matchTag: (tag) => tag !== "Select.Content",
           // ...or specifically ignore the `position` property
-          matchTagProp: (tag, prop) => tag === 'Select.Content' && prop !== 'position',
-        })
+          matchTagProp: (tag, prop) =>
+            tag === "Select.Content" && prop !== "position",
+        });
       },
     },
-  })
+  });
   ```
 
 ## 0.30.1
@@ -905,16 +934,16 @@
   keeping the rest. Let's say we want to remove the `stack` pattern from the built-in `@pandacss/preset-base`:
 
   ```ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
     hooks: {
-      'config:resolved': ({ config, utils }) => {
-        return utils.omit(config, ['patterns.stack'])
+      "config:resolved": ({ config, utils }) => {
+        return utils.omit(config, ["patterns.stack"]);
       },
     },
-  })
+  });
   ```
 
 - ab32d1d7: Introduce 3 new hooks:
@@ -951,9 +980,9 @@
 
   ```ts
   css({
-    bg: 'red.300/40',
-    color: 'white',
-  })
+    bg: "red.300/40",
+    color: "white",
+  });
   ```
 
   This will generate:
@@ -961,7 +990,11 @@
   ```css
   @layer utilities {
     .bg_red\.300\/40 {
-      --mix-background: color-mix(in srgb, var(--colors-red-300) 40%, transparent);
+      --mix-background: color-mix(
+        in srgb,
+        var(--colors-red-300) 40%,
+        transparent
+      );
       background: var(--mix-background, var(--colors-red-300));
     }
 
@@ -985,21 +1018,21 @@
   export default defineConfig({
     utilities: {
       background: {
-        shorthand: 'bg',
-        className: 'bg',
-        values: 'colors',
+        shorthand: "bg",
+        className: "bg",
+        values: "colors",
         transform(value, args) {
-          const mix = args.utils.colorMix(value)
+          const mix = args.utils.colorMix(value);
           // This can happen if the value format is invalid (e.g. `bg: red.300/invalid` or `bg: red.300//10`)
-          if (mix.invalid) return { background: value }
+          if (mix.invalid) return { background: value };
 
           return {
             background: mix.value,
-          }
+          };
         },
       },
     },
-  })
+  });
   ```
 
   ***
@@ -1008,21 +1041,21 @@
   property:
 
   ```ts
-  import type { PropertyTransform } from '@pandacss/types'
+  import type { PropertyTransform } from "@pandacss/types";
 
   export const createColorMixTransform =
     (prop: string): PropertyTransform =>
     (value, args) => {
-      const mix = args.utils.colorMix(value)
-      if (mix.invalid) return { [prop]: value }
+      const mix = args.utils.colorMix(value);
+      if (mix.invalid) return { [prop]: value };
 
-      const cssVar = '--mix-' + prop
+      const cssVar = "--mix-" + prop;
 
       return {
         [cssVar]: mix.value,
         [prop]: `var(${cssVar}, ${mix.color})`,
-      }
-    }
+      };
+    };
   ```
 
   then the same utility transform as above can be written like this:
@@ -1050,34 +1083,34 @@
     // ...
     theme: {
       extend: {
-        containerNames: ['sidebar', 'content'],
+        containerNames: ["sidebar", "content"],
         containerSizes: {
-          xs: '40em',
-          sm: '60em',
-          md: '80em',
+          xs: "40em",
+          sm: "60em",
+          md: "80em",
         },
       },
     },
-  })
+  });
   ```
 
   The default container sizes in the `@pandacss/preset-panda` preset are shown below:
 
   ```ts
   export const containerSizes = {
-    xs: '320px',
-    sm: '384px',
-    md: '448px',
-    lg: '512px',
-    xl: '576px',
-    '2xl': '672px',
-    '3xl': '768px',
-    '4xl': '896px',
-    '5xl': '1024px',
-    '6xl': '1152px',
-    '7xl': '1280px',
-    '8xl': '1440px',
-  }
+    xs: "320px",
+    sm: "384px",
+    md: "448px",
+    lg: "512px",
+    xl: "576px",
+    "2xl": "672px",
+    "3xl": "768px",
+    "4xl": "896px",
+    "5xl": "1024px",
+    "6xl": "1152px",
+    "7xl": "1280px",
+    "8xl": "1440px",
+  };
   ```
 
   Then use them in your styles by referencing using `@<container-name>/<container-size>` syntax:
@@ -1162,8 +1195,8 @@
   ```ts
   export default defineConfig({
     // ...
-    dependencies: ['path/to/files/**.ts'],
-  })
+    dependencies: ["path/to/files/**.ts"],
+  });
   ```
 
   - Invoke `config:change` hook in more situations (when the `--watch` flag is passed to `panda codegen`,
@@ -1196,39 +1229,54 @@
      * Called when the config is resolved, after all the presets are loaded and merged.
      * This is the first hook called, you can use it to tweak the config before the context is created.
      */
-    'config:resolved': (args: { conf: LoadConfigResult }) => MaybeAsyncReturn
+    "config:resolved": (args: { conf: LoadConfigResult }) => MaybeAsyncReturn;
     /**
      * Called when the Panda context has been created and the API is ready to be used.
      */
-    'context:created': (args: { ctx: ApiInterface; logger: LoggerInterface }) => void
+    "context:created": (args: {
+      ctx: ApiInterface;
+      logger: LoggerInterface;
+    }) => void;
     /**
      * Called when the config file or one of its dependencies (imports) has changed.
      */
-    'config:change': (args: { config: UserConfig }) => MaybeAsyncReturn
+    "config:change": (args: { config: UserConfig }) => MaybeAsyncReturn;
     /**
      * Called after reading the file content but before parsing it.
      * You can use this hook to transform the file content to a tsx-friendly syntax so that Panda's parser can parse it.
      * You can also use this hook to parse the file's content on your side using a custom parser, in this case you don't have to return anything.
      */
-    'parser:before': (args: { filePath: string; content: string }) => string | void
+    "parser:before": (args: {
+      filePath: string;
+      content: string;
+    }) => string | void;
     /**
      * Called after the file styles are extracted and processed into the resulting ParserResult object.
      * You can also use this hook to add your own extraction results from your custom parser to the ParserResult object.
      */
-    'parser:after': (args: { filePath: string; result: ParserResultInterface | undefined }) => void
+    "parser:after": (args: {
+      filePath: string;
+      result: ParserResultInterface | undefined;
+    }) => void;
     /**
      * Called after the codegen is completed
      */
-    'codegen:done': () => MaybeAsyncReturn
+    "codegen:done": () => MaybeAsyncReturn;
     /**
      * Called right before adding the design-system CSS (global, static, preflight, tokens, keyframes) to the final CSS
      * Called right before writing/injecting the final CSS (styles.css) that contains the design-system CSS and the parser CSS
      * You can use it to tweak the CSS content before it's written to disk or injected through the postcss plugin.
      */
-    'cssgen:done': (args: {
-      artifact: 'global' | 'static' | 'reset' | 'tokens' | 'keyframes' | 'styles.css'
-      content: string
-    }) => string | void
+    "cssgen:done": (args: {
+      artifact:
+        | "global"
+        | "static"
+        | "reset"
+        | "tokens"
+        | "keyframes"
+        | "styles.css";
+      content: string;
+    }) => string | void;
   }
   ```
 
@@ -1308,38 +1356,38 @@
 
   ```ts
   const card = defineRecipe({
-    className: 'card',
-    base: { color: 'white' },
+    className: "card",
+    base: { color: "white" },
     variants: {
       size: {
-        small: { fontSize: '14px' },
-        large: { fontSize: '18px' },
+        small: { fontSize: "14px" },
+        large: { fontSize: "18px" },
       },
       visual: {
-        primary: { backgroundColor: 'blue' },
-        secondary: { backgroundColor: 'gray' },
+        primary: { backgroundColor: "blue" },
+        secondary: { backgroundColor: "gray" },
       },
     },
-  })
+  });
 
   export default defineConfig({
     // ...
     staticCss: {
       recipes: {
-        card: ['*'], // this
+        card: ["*"], // this
 
         // was equivalent to:
         card: [
           // notice how `responsive: true` was implicitly added
-          { size: ['*'], responsive: true },
-          { visual: ['*'], responsive: true },
+          { size: ["*"], responsive: true },
+          { visual: ["*"], responsive: true },
         ],
 
         //   will now correctly be equivalent to:
-        card: [{ size: ['*'] }, { visual: ['*'] }],
+        card: [{ size: ["*"] }, { visual: ["*"] }],
       },
     },
-  })
+  });
   ```
 
   Here's the diff in the generated CSS:
@@ -1491,36 +1539,36 @@
 - 105f74ce: Add a way to specify a recipe's `staticCss` options from inside a recipe config, e.g.:
 
   ```js
-  import { defineRecipe } from '@pandacss/dev'
+  import { defineRecipe } from "@pandacss/dev";
 
   const card = defineRecipe({
-    className: 'card',
-    base: { color: 'white' },
+    className: "card",
+    base: { color: "white" },
     variants: {
       size: {
-        small: { fontSize: '14px' },
-        large: { fontSize: '18px' },
+        small: { fontSize: "14px" },
+        large: { fontSize: "18px" },
       },
     },
-    staticCss: [{ size: ['*'] }],
-  })
+    staticCss: [{ size: ["*"] }],
+  });
   ```
 
   would be the equivalent of defining it inside the main config:
 
   ```js
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
     staticCss: {
       recipes: {
         card: {
-          size: ['*'],
+          size: ["*"],
         },
       },
     },
-  })
+  });
   ```
 
 ## 0.20.1
@@ -1538,10 +1586,10 @@
     staticCss: {
       recipes: {
         // generate all button styles and variants
-        button: ['*'],
+        button: ["*"],
       },
     },
-  })
+  });
 
   export default defineConfig({
     presets: [presetWithStaticCss],
@@ -1549,11 +1597,11 @@
       extend: {
         recipes: {
           // extend and pre-generate all sizes for card
-          card: [{ size: ['small', 'medium', 'large'] }],
+          card: [{ size: ["small", "medium", "large"] }],
         },
       },
     },
-  })
+  });
   ```
 
 ### Patch Changes
@@ -1623,42 +1671,42 @@
 
   ```ts
   export default defineConfig({
-    outdir: './outdir',
+    outdir: "./outdir",
     importMap: {
-      css: '#panda/styled-system/css',
-      recipes: '#panda/styled-system/recipes',
-      patterns: '#panda/styled-system/patterns',
-      jsx: '#panda/styled-system/jsx',
+      css: "#panda/styled-system/css",
+      recipes: "#panda/styled-system/recipes",
+      patterns: "#panda/styled-system/patterns",
+      jsx: "#panda/styled-system/jsx",
     },
-  })
+  });
   ```
 
   Or you could also make your outdir an actual package from your monorepo:
 
   ```ts
   export default defineConfig({
-    outdir: '../packages/styled-system',
+    outdir: "../packages/styled-system",
     importMap: {
-      css: '@monorepo/styled-system',
-      recipes: '@monorepo/styled-system',
-      patterns: '@monorepo/styled-system',
-      jsx: '@monorepo/styled-system',
+      css: "@monorepo/styled-system",
+      recipes: "@monorepo/styled-system",
+      patterns: "@monorepo/styled-system",
+      jsx: "@monorepo/styled-system",
     },
-  })
+  });
   ```
 
   Working with tsconfig paths aliases is easy:
 
   ```ts
   export default defineConfig({
-    outdir: 'styled-system',
+    outdir: "styled-system",
     importMap: {
-      css: 'styled-system/css',
-      recipes: 'styled-system/recipes',
-      patterns: 'styled-system/patterns',
-      jsx: 'styled-system/jsx',
+      css: "styled-system/css",
+      recipes: "styled-system/recipes",
+      patterns: "styled-system/patterns",
+      jsx: "styled-system/jsx",
     },
-  })
+  });
   ```
 
 - 58743bc4: - Fix `ExtendableUtilityConfig` typings after a regression in 0.15.2 (due to
@@ -1732,12 +1780,12 @@
   **Definition**
 
   ```jsx
-  import { sva } from 'styled-system/css'
+  import { sva } from "styled-system/css";
 
   const button = sva({
-    slots: ['label', 'icon'],
+    slots: ["label", "icon"],
     base: {
-      label: { color: 'red', textDecoration: 'underline' },
+      label: { color: "red", textDecoration: "underline" },
     },
     variants: {
       rounded: {
@@ -1745,33 +1793,33 @@
       },
       size: {
         sm: {
-          label: { fontSize: 'sm' },
-          icon: { fontSize: 'sm' },
+          label: { fontSize: "sm" },
+          icon: { fontSize: "sm" },
         },
         lg: {
-          label: { fontSize: 'lg' },
-          icon: { fontSize: 'lg', color: 'pink' },
+          label: { fontSize: "lg" },
+          icon: { fontSize: "lg", color: "pink" },
         },
       },
     },
     defaultVariants: {
-      size: 'sm',
+      size: "sm",
     },
-  })
+  });
   ```
 
   **Usage**
 
   ```jsx
   export function App() {
-    const btnClass = button({ size: 'lg', rounded: true })
+    const btnClass = button({ size: "lg", rounded: true });
 
     return (
       <button>
         <p class={btnClass.label}> Label</p>
         <p class={btnClass.icon}> Icon</p>
       </button>
-    )
+    );
   }
   ```
 
@@ -1822,26 +1870,26 @@
   Update the `jsx` property to be used for advanced tracking of custom pattern components.
 
   ```jsx
-  import { Circle } from 'styled-system/jsx'
+  import { Circle } from "styled-system/jsx";
   const CustomCircle = ({ children, ...props }) => {
-    return <Circle {...props}>{children}</Circle>
-  }
+    return <Circle {...props}>{children}</Circle>;
+  };
   ```
 
   To track the `CustomCircle` component, you can now use the `jsx` property.
 
   ```js
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     patterns: {
       extend: {
         circle: {
-          jsx: ['CustomCircle'],
+          jsx: ["CustomCircle"],
         },
       },
     },
-  })
+  });
   ```
 
 ## 0.8.0
@@ -1870,7 +1918,7 @@
   ```ts
   staticCss: {
     recipes: {
-      button: [{ size: ['*'], shape: ['*'] }]
+      button: [{ size: ["*"], shape: ["*"] }];
     }
   }
   ```
@@ -1880,7 +1928,7 @@
   ```ts
   staticCss: {
     recipes: {
-      button: ['*']
+      button: ["*"];
     }
   }
   ```
@@ -1904,8 +1952,8 @@
   // panda.config.ts
   export default defineConfig({
     //...
-    syntax: 'template-literal',
-  })
+    syntax: "template-literal",
+  });
   ```
 
   > For existing projects, you might need to run the `panda codegen --clean`
@@ -1926,12 +1974,12 @@
 - 5b344b9c: Add support for disabling shorthand props
 
   ```ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
     shorthands: false,
-  })
+  });
   ```
 
 ### Patch Changes
@@ -2004,11 +2052,11 @@ This hook is called right before writing the codegen files to disk. You can use
 export default defineConfig({
   // ...
   hooks: {
-    'codegen:prepare': ({ artifacts, changed }) => {
+    "codegen:prepare": ({ artifacts, changed }) => {
       // do something with the emitted js/d.ts files
     },
   },
-})
+});
 ```
 
 - d5977c24: - Add a `--logfile` flag to the `panda`, `panda codegen`, `panda cssgen` and `panda debug` commands.
@@ -2025,11 +2073,11 @@ export default defineConfig({
   ```js
   module.exports = {
     plugins: {
-      '@pandacss/dev/postcss': {
-        logfile: './logs/panda.log',
+      "@pandacss/dev/postcss": {
+        logfile: "./logs/panda.log",
       },
     },
-  }
+  };
   ```
 
 ## 0.29.1
@@ -2048,9 +2096,9 @@ export default defineConfig({
 
   ```ts
   css({
-    bg: 'red.300/40',
-    color: 'white',
-  })
+    bg: "red.300/40",
+    color: "white",
+  });
   ```
 
   This will generate:
@@ -2058,7 +2106,11 @@ export default defineConfig({
   ```css
   @layer utilities {
     .bg_red\.300\/40 {
-      --mix-background: color-mix(in srgb, var(--colors-red-300) 40%, transparent);
+      --mix-background: color-mix(
+        in srgb,
+        var(--colors-red-300) 40%,
+        transparent
+      );
       background: var(--mix-background, var(--colors-red-300));
     }
 
@@ -2082,21 +2134,21 @@ export default defineConfig({
   export default defineConfig({
     utilities: {
       background: {
-        shorthand: 'bg',
-        className: 'bg',
-        values: 'colors',
+        shorthand: "bg",
+        className: "bg",
+        values: "colors",
         transform(value, args) {
-          const mix = args.utils.colorMix(value)
+          const mix = args.utils.colorMix(value);
           // This can happen if the value format is invalid (e.g. `bg: red.300/invalid` or `bg: red.300//10`)
-          if (mix.invalid) return { background: value }
+          if (mix.invalid) return { background: value };
 
           return {
             background: mix.value,
-          }
+          };
         },
       },
     },
-  })
+  });
   ```
 
   ***
@@ -2105,21 +2157,21 @@ export default defineConfig({
   property:
 
   ```ts
-  import type { PropertyTransform } from '@pandacss/types'
+  import type { PropertyTransform } from "@pandacss/types";
 
   export const createColorMixTransform =
     (prop: string): PropertyTransform =>
     (value, args) => {
-      const mix = args.utils.colorMix(value)
-      if (mix.invalid) return { [prop]: value }
+      const mix = args.utils.colorMix(value);
+      if (mix.invalid) return { [prop]: value };
 
-      const cssVar = '--mix-' + prop
+      const cssVar = "--mix-" + prop;
 
       return {
         [cssVar]: mix.value,
         [prop]: `var(${cssVar}, ${mix.color})`,
-      }
-    }
+      };
+    };
   ```
 
   then the same utility transform as above can be written like this:
@@ -2147,34 +2199,34 @@ export default defineConfig({
     // ...
     theme: {
       extend: {
-        containerNames: ['sidebar', 'content'],
+        containerNames: ["sidebar", "content"],
         containerSizes: {
-          xs: '40em',
-          sm: '60em',
-          md: '80em',
+          xs: "40em",
+          sm: "60em",
+          md: "80em",
         },
       },
     },
-  })
+  });
   ```
 
   The default container sizes in the `@pandacss/preset-panda` preset are shown below:
 
   ```ts
   export const containerSizes = {
-    xs: '320px',
-    sm: '384px',
-    md: '448px',
-    lg: '512px',
-    xl: '576px',
-    '2xl': '672px',
-    '3xl': '768px',
-    '4xl': '896px',
-    '5xl': '1024px',
-    '6xl': '1152px',
-    '7xl': '1280px',
-    '8xl': '1440px',
-  }
+    xs: "320px",
+    sm: "384px",
+    md: "448px",
+    lg: "512px",
+    xl: "576px",
+    "2xl": "672px",
+    "3xl": "768px",
+    "4xl": "896px",
+    "5xl": "1024px",
+    "6xl": "1152px",
+    "7xl": "1280px",
+    "8xl": "1440px",
+  };
   ```
 
   Then use them in your styles by referencing using `@<container-name>/<container-size>` syntax:
@@ -2259,8 +2311,8 @@ export default defineConfig({
   ```ts
   export default defineConfig({
     // ...
-    dependencies: ['path/to/files/**.ts'],
-  })
+    dependencies: ["path/to/files/**.ts"],
+  });
   ```
 
   - Invoke `config:change` hook in more situations (when the `--watch` flag is passed to `panda codegen`,
@@ -2293,39 +2345,54 @@ export default defineConfig({
      * Called when the config is resolved, after all the presets are loaded and merged.
      * This is the first hook called, you can use it to tweak the config before the context is created.
      */
-    'config:resolved': (args: { conf: LoadConfigResult }) => MaybeAsyncReturn
+    "config:resolved": (args: { conf: LoadConfigResult }) => MaybeAsyncReturn;
     /**
      * Called when the Panda context has been created and the API is ready to be used.
      */
-    'context:created': (args: { ctx: ApiInterface; logger: LoggerInterface }) => void
+    "context:created": (args: {
+      ctx: ApiInterface;
+      logger: LoggerInterface;
+    }) => void;
     /**
      * Called when the config file or one of its dependencies (imports) has changed.
      */
-    'config:change': (args: { config: UserConfig }) => MaybeAsyncReturn
+    "config:change": (args: { config: UserConfig }) => MaybeAsyncReturn;
     /**
      * Called after reading the file content but before parsing it.
      * You can use this hook to transform the file content to a tsx-friendly syntax so that Panda's parser can parse it.
      * You can also use this hook to parse the file's content on your side using a custom parser, in this case you don't have to return anything.
      */
-    'parser:before': (args: { filePath: string; content: string }) => string | void
+    "parser:before": (args: {
+      filePath: string;
+      content: string;
+    }) => string | void;
     /**
      * Called after the file styles are extracted and processed into the resulting ParserResult object.
      * You can also use this hook to add your own extraction results from your custom parser to the ParserResult object.
      */
-    'parser:after': (args: { filePath: string; result: ParserResultInterface | undefined }) => void
+    "parser:after": (args: {
+      filePath: string;
+      result: ParserResultInterface | undefined;
+    }) => void;
     /**
      * Called after the codegen is completed
      */
-    'codegen:done': () => MaybeAsyncReturn
+    "codegen:done": () => MaybeAsyncReturn;
     /**
      * Called right before adding the design-system CSS (global, static, preflight, tokens, keyframes) to the final CSS
      * Called right before writing/injecting the final CSS (styles.css) that contains the design-system CSS and the parser CSS
      * You can use it to tweak the CSS content before it's written to disk or injected through the postcss plugin.
      */
-    'cssgen:done': (args: {
-      artifact: 'global' | 'static' | 'reset' | 'tokens' | 'keyframes' | 'styles.css'
-      content: string
-    }) => string | void
+    "cssgen:done": (args: {
+      artifact:
+        | "global"
+        | "static"
+        | "reset"
+        | "tokens"
+        | "keyframes"
+        | "styles.css";
+      content: string;
+    }) => string | void;
   }
   ```
 
@@ -2405,38 +2472,38 @@ export default defineConfig({
 
   ```ts
   const card = defineRecipe({
-    className: 'card',
-    base: { color: 'white' },
+    className: "card",
+    base: { color: "white" },
     variants: {
       size: {
-        small: { fontSize: '14px' },
-        large: { fontSize: '18px' },
+        small: { fontSize: "14px" },
+        large: { fontSize: "18px" },
       },
       visual: {
-        primary: { backgroundColor: 'blue' },
-        secondary: { backgroundColor: 'gray' },
+        primary: { backgroundColor: "blue" },
+        secondary: { backgroundColor: "gray" },
       },
     },
-  })
+  });
 
   export default defineConfig({
     // ...
     staticCss: {
       recipes: {
-        card: ['*'], // this
+        card: ["*"], // this
 
         // was equivalent to:
         card: [
           // notice how `responsive: true` was implicitly added
-          { size: ['*'], responsive: true },
-          { visual: ['*'], responsive: true },
+          { size: ["*"], responsive: true },
+          { visual: ["*"], responsive: true },
         ],
 
         //   will now correctly be equivalent to:
-        card: [{ size: ['*'] }, { visual: ['*'] }],
+        card: [{ size: ["*"] }, { visual: ["*"] }],
       },
     },
-  })
+  });
   ```
 
   Here's the diff in the generated CSS:
@@ -2588,36 +2655,36 @@ export default defineConfig({
 - 105f74ce: Add a way to specify a recipe's `staticCss` options from inside a recipe config, e.g.:
 
   ```js
-  import { defineRecipe } from '@pandacss/dev'
+  import { defineRecipe } from "@pandacss/dev";
 
   const card = defineRecipe({
-    className: 'card',
-    base: { color: 'white' },
+    className: "card",
+    base: { color: "white" },
     variants: {
       size: {
-        small: { fontSize: '14px' },
-        large: { fontSize: '18px' },
+        small: { fontSize: "14px" },
+        large: { fontSize: "18px" },
       },
     },
-    staticCss: [{ size: ['*'] }],
-  })
+    staticCss: [{ size: ["*"] }],
+  });
   ```
 
   would be the equivalent of defining it inside the main config:
 
   ```js
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
     staticCss: {
       recipes: {
         card: {
-          size: ['*'],
+          size: ["*"],
         },
       },
     },
-  })
+  });
   ```
 
 ## 0.20.1
@@ -2635,10 +2702,10 @@ export default defineConfig({
     staticCss: {
       recipes: {
         // generate all button styles and variants
-        button: ['*'],
+        button: ["*"],
       },
     },
-  })
+  });
 
   export default defineConfig({
     presets: [presetWithStaticCss],
@@ -2646,11 +2713,11 @@ export default defineConfig({
       extend: {
         recipes: {
           // extend and pre-generate all sizes for card
-          card: [{ size: ['small', 'medium', 'large'] }],
+          card: [{ size: ["small", "medium", "large"] }],
         },
       },
     },
-  })
+  });
   ```
 
 ### Patch Changes
@@ -2720,42 +2787,42 @@ export default defineConfig({
 
   ```ts
   export default defineConfig({
-    outdir: './outdir',
+    outdir: "./outdir",
     importMap: {
-      css: '#panda/styled-system/css',
-      recipes: '#panda/styled-system/recipes',
-      patterns: '#panda/styled-system/patterns',
-      jsx: '#panda/styled-system/jsx',
+      css: "#panda/styled-system/css",
+      recipes: "#panda/styled-system/recipes",
+      patterns: "#panda/styled-system/patterns",
+      jsx: "#panda/styled-system/jsx",
     },
-  })
+  });
   ```
 
   Or you could also make your outdir an actual package from your monorepo:
 
   ```ts
   export default defineConfig({
-    outdir: '../packages/styled-system',
+    outdir: "../packages/styled-system",
     importMap: {
-      css: '@monorepo/styled-system',
-      recipes: '@monorepo/styled-system',
-      patterns: '@monorepo/styled-system',
-      jsx: '@monorepo/styled-system',
+      css: "@monorepo/styled-system",
+      recipes: "@monorepo/styled-system",
+      patterns: "@monorepo/styled-system",
+      jsx: "@monorepo/styled-system",
     },
-  })
+  });
   ```
 
   Working with tsconfig paths aliases is easy:
 
   ```ts
   export default defineConfig({
-    outdir: 'styled-system',
+    outdir: "styled-system",
     importMap: {
-      css: 'styled-system/css',
-      recipes: 'styled-system/recipes',
-      patterns: 'styled-system/patterns',
-      jsx: 'styled-system/jsx',
+      css: "styled-system/css",
+      recipes: "styled-system/recipes",
+      patterns: "styled-system/patterns",
+      jsx: "styled-system/jsx",
     },
-  })
+  });
   ```
 
 - 58743bc4: - Fix `ExtendableUtilityConfig` typings after a regression in 0.15.2 (due to
@@ -2829,12 +2896,12 @@ export default defineConfig({
   **Definition**
 
   ```jsx
-  import { sva } from 'styled-system/css'
+  import { sva } from "styled-system/css";
 
   const button = sva({
-    slots: ['label', 'icon'],
+    slots: ["label", "icon"],
     base: {
-      label: { color: 'red', textDecoration: 'underline' },
+      label: { color: "red", textDecoration: "underline" },
     },
     variants: {
       rounded: {
@@ -2842,33 +2909,33 @@ export default defineConfig({
       },
       size: {
         sm: {
-          label: { fontSize: 'sm' },
-          icon: { fontSize: 'sm' },
+          label: { fontSize: "sm" },
+          icon: { fontSize: "sm" },
         },
         lg: {
-          label: { fontSize: 'lg' },
-          icon: { fontSize: 'lg', color: 'pink' },
+          label: { fontSize: "lg" },
+          icon: { fontSize: "lg", color: "pink" },
         },
       },
     },
     defaultVariants: {
-      size: 'sm',
+      size: "sm",
     },
-  })
+  });
   ```
 
   **Usage**
 
   ```jsx
   export function App() {
-    const btnClass = button({ size: 'lg', rounded: true })
+    const btnClass = button({ size: "lg", rounded: true });
 
     return (
       <button>
         <p class={btnClass.label}> Label</p>
         <p class={btnClass.icon}> Icon</p>
       </button>
-    )
+    );
   }
   ```
 
@@ -2919,26 +2986,26 @@ export default defineConfig({
   Update the `jsx` property to be used for advanced tracking of custom pattern components.
 
   ```jsx
-  import { Circle } from 'styled-system/jsx'
+  import { Circle } from "styled-system/jsx";
   const CustomCircle = ({ children, ...props }) => {
-    return <Circle {...props}>{children}</Circle>
-  }
+    return <Circle {...props}>{children}</Circle>;
+  };
   ```
 
   To track the `CustomCircle` component, you can now use the `jsx` property.
 
   ```js
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     patterns: {
       extend: {
         circle: {
-          jsx: ['CustomCircle'],
+          jsx: ["CustomCircle"],
         },
       },
     },
-  })
+  });
   ```
 
 ## 0.8.0
@@ -2967,7 +3034,7 @@ export default defineConfig({
   ```ts
   staticCss: {
     recipes: {
-      button: [{ size: ['*'], shape: ['*'] }]
+      button: [{ size: ["*"], shape: ["*"] }];
     }
   }
   ```
@@ -2977,7 +3044,7 @@ export default defineConfig({
   ```ts
   staticCss: {
     recipes: {
-      button: ['*']
+      button: ["*"];
     }
   }
   ```
@@ -3001,8 +3068,8 @@ export default defineConfig({
   // panda.config.ts
   export default defineConfig({
     //...
-    syntax: 'template-literal',
-  })
+    syntax: "template-literal",
+  });
   ```
 
   > For existing projects, you might need to run the `panda codegen --clean`
@@ -3023,12 +3090,12 @@ export default defineConfig({
 - 5b344b9c: Add support for disabling shorthand props
 
   ```ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
     shorthands: false,
-  })
+  });
   ```
 
 ### Patch Changes
diff --git a/packages/types/package.json b/packages/types/package.json
index d3dedc3fe..99ab3b2c5 100644
--- a/packages/types/package.json
+++ b/packages/types/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/types",
-  "version": "0.38.0",
+  "version": "0.39.0",
   "description": "The types for css panda",
   "main": "dist/index.d.ts",
   "author": "Segun Adebayo <joseshegs@gmail.com>",

From 7223282dc217533a5f27f3091c7fb14cdca9212f Mon Sep 17 00:00:00 2001
From: Abraham <anubra266@gmail.com>
Date: Fri, 3 May 2024 13:45:27 -0500
Subject: [PATCH 2/5] chore: add changelog v0.39.0 (#2559)

---
 CHANGELOG.md                              |   71 +
 packages/astro-plugin-studio/CHANGELOG.md |    6 +-
 packages/cli/CHANGELOG.md                 |  173 +-
 packages/config/CHANGELOG.md              |  289 +--
 packages/core/CHANGELOG.md                | 1787 +++++++-------
 packages/extractor/CHANGELOG.md           |  105 +-
 packages/generator/CHANGELOG.md           | 2676 ++++++++++-----------
 packages/is-valid-prop/CHANGELOG.md       |    8 +-
 packages/logger/CHANGELOG.md              |    6 +-
 packages/node/CHANGELOG.md                |  136 +-
 packages/parser/CHANGELOG.md              |  428 ++--
 packages/postcss/CHANGELOG.md             |   16 +-
 packages/preset-base/CHANGELOG.md         |  156 +-
 packages/preset-panda/CHANGELOG.md        |    6 +-
 packages/shared/CHANGELOG.md              |  190 +-
 packages/studio/CHANGELOG.md              |  160 +-
 packages/token-dictionary/CHANGELOG.md    |  498 ++--
 packages/types/CHANGELOG.md               |  769 +++---
 18 files changed, 3513 insertions(+), 3967 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5b3a6b63e..547294ac5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,77 @@ See the [Changesets](./.changeset) for the latest changes.
 
 ## [Unreleased]
 
+## [0.39.0] - 2024-04-29
+
+### Fixed
+
+- Fix issue where `mergeCss` import in `styled-system/jsx/*` could be unused.
+- Fix issue where `float` property did not allow inherited values (auto, initial, none, etc.)
+- Fix issue where `animationName` property was not connected to `theme.keyframes`, as a result, no autocompletion was
+  available.
+
+### Added
+
+- Add support for more typography related properties in text styles such as `fontFeatureSettings`, `fontPalette`, etc.
+- Allow passing arrays of `SystemStyleObject` to the `css(xxx, [aaa, bbb, ccc], yyy)` fn
+
+This is useful when you are creating your own styled component and want to benefit
+[from the recent `css` array property support](https://github.com/chakra-ui/panda/pull/2515).
+
+```diff
+import { css } from 'styled-system/css'
+import type { HTMLStyledProps } from 'styled-system/types'
+
+type ButtonProps = HTMLStyledProps<'button'>
+
+export const Button = ({ css: cssProp = {}, children }: ButtonProps) => {
+-  const className = css(...(Array.isArray(cssProp) ? cssProp : [cssProp]))
++  const className = css(cssProp)
+  return <button className={className}>{children}</button>
+}
+```
+
+### Changed
+
+- **BREAKING 💥**
+
+Remove `linkBox` pattern in favor of using adding `position: relative` when using the `linkOverlay` pattern.
+
+**Before**
+
+```jsx
+import { linkBox, linkOverlay } from 'styled-system/patterns'
+
+const App = () => {
+  return (
+    <div className={linkBox()}>
+      <img src="https://via.placeholder.com/150" alt="placeholder" />
+      <a href="#" className={linkOverlay()}>
+        Link
+      </a>
+    </div>
+  )
+}
+```
+
+**After**
+
+```jsx
+import { css } from 'styled-system/css'
+import { linkOverlay } from 'styled-system/patterns'
+
+const App = () => {
+  return (
+    <div className={css({ pos: 'relative' })}>
+      <img src="https://via.placeholder.com/150" alt="placeholder" />
+      <a href="#" className={linkOverlay()}>
+        Link
+      </a>
+    </div>
+  )
+}
+```
+
 ## [0.38.0] - 2024-04-29
 
 ### Fixed
diff --git a/packages/astro-plugin-studio/CHANGELOG.md b/packages/astro-plugin-studio/CHANGELOG.md
index 664ff36af..352e63e8d 100644
--- a/packages/astro-plugin-studio/CHANGELOG.md
+++ b/packages/astro-plugin-studio/CHANGELOG.md
@@ -134,11 +134,11 @@
   ```js
   module.exports = {
     plugins: {
-      "@pandacss/dev/postcss": {
-        logfile: "./logs/panda.log",
+      '@pandacss/dev/postcss': {
+        logfile: './logs/panda.log',
       },
     },
-  };
+  }
   ```
 
 - Updated dependencies [05686b9d]
diff --git a/packages/cli/CHANGELOG.md b/packages/cli/CHANGELOG.md
index 1bf927851..456be76a0 100644
--- a/packages/cli/CHANGELOG.md
+++ b/packages/cli/CHANGELOG.md
@@ -110,7 +110,7 @@
 
   ```ts
   // panda.config.ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
@@ -119,15 +119,15 @@
       extend: {
         tokens: {
           colors: {
-            text: { value: "blue" },
+            text: { value: 'blue' },
           },
         },
         semanticTokens: {
           colors: {
             body: {
               value: {
-                base: "{colors.blue.600}",
-                _osDark: "{colors.blue.400}",
+                base: '{colors.blue.600}',
+                _osDark: '{colors.blue.400}',
               },
             },
           },
@@ -139,16 +139,16 @@
       primary: {
         tokens: {
           colors: {
-            text: { value: "red" },
+            text: { value: 'red' },
           },
         },
         semanticTokens: {
           colors: {
-            muted: { value: "{colors.red.200}" },
+            muted: { value: '{colors.red.200}' },
             body: {
               value: {
-                base: "{colors.red.600}",
-                _osDark: "{colors.red.400}",
+                base: '{colors.red.600}',
+                _osDark: '{colors.red.400}',
               },
             },
           },
@@ -157,23 +157,23 @@
       secondary: {
         tokens: {
           colors: {
-            text: { value: "blue" },
+            text: { value: 'blue' },
           },
         },
         semanticTokens: {
           colors: {
-            muted: { value: "{colors.blue.200}" },
+            muted: { value: '{colors.blue.200}' },
             body: {
               value: {
-                base: "{colors.blue.600}",
-                _osDark: "{colors.blue.400}",
+                base: '{colors.blue.600}',
+                _osDark: '{colors.blue.400}',
               },
             },
           },
         },
       },
     },
-  });
+  })
   ```
 
   ### Pregenerating themes
@@ -183,14 +183,14 @@
 
   ```ts
   // panda.config.ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
     staticCss: {
-      themes: ["primary", "secondary"],
+      themes: ['primary', 'secondary'],
     },
-  });
+  })
   ```
 
   This will generate the following CSS:
@@ -202,7 +202,7 @@
       --colors-body: var(--colors-blue-600);
     }
 
-    [data-panda-theme="primary"] {
+    [data-panda-theme='primary'] {
       --colors-text: red;
       --colors-muted: var(--colors-red-200);
       --colors-body: var(--colors-red-600);
@@ -213,7 +213,7 @@
         --colors-body: var(--colors-blue-400);
       }
 
-      [data-panda-theme="primary"] {
+      [data-panda-theme='primary'] {
         --colors-body: var(--colors-red-400);
       }
     }
@@ -244,9 +244,9 @@
   Dynamically import a theme using its name:
 
   ```ts
-  import { getTheme } from "../styled-system/themes";
+  import { getTheme } from '../styled-system/themes'
 
-  const theme = await getTheme("red");
+  const theme = await getTheme('red')
   //    ^? {
   //     name: "red";
   //     id: string;
@@ -257,10 +257,10 @@
   Inject the theme styles into the DOM:
 
   ```ts
-  import { injectTheme } from "../styled-system/themes";
+  import { injectTheme } from '../styled-system/themes'
 
-  const theme = await getTheme("red");
-  injectTheme(document.documentElement, theme); // this returns the injected style element
+  const theme = await getTheme('red')
+  injectTheme(document.documentElement, theme) // this returns the injected style element
   ```
 
   ***
@@ -269,62 +269,54 @@
 
   ```tsx
   // app/layout.tsx
-  import { Inter } from "next/font/google";
-  import { cookies } from "next/headers";
-  import { ThemeName, getTheme } from "../../styled-system/themes";
-
-  export default async function RootLayout({
-    children,
-  }: {
-    children: React.ReactNode;
-  }) {
-    const store = cookies();
-    const themeName = store.get("theme")?.value as ThemeName;
-    const theme = themeName && (await getTheme(themeName));
+  import { Inter } from 'next/font/google'
+  import { cookies } from 'next/headers'
+  import { ThemeName, getTheme } from '../../styled-system/themes'
+
+  export default async function RootLayout({ children }: { children: React.ReactNode }) {
+    const store = cookies()
+    const themeName = store.get('theme')?.value as ThemeName
+    const theme = themeName && (await getTheme(themeName))
 
     return (
       <html lang="en" data-panda-theme={themeName ? themeName : undefined}>
         {themeName && (
           <head>
-            <style
-              type="text/css"
-              id={theme.id}
-              dangerouslySetInnerHTML={{ __html: theme.css }}
-            />
+            <style type="text/css" id={theme.id} dangerouslySetInnerHTML={{ __html: theme.css }} />
           </head>
         )}
         <body>{children}</body>
       </html>
-    );
+    )
   }
 
   // app/page.tsx
-  import { getTheme, injectTheme } from "../../styled-system/themes";
+  import { getTheme, injectTheme } from '../../styled-system/themes'
 
   export default function Home() {
     return (
       <>
         <button
           onClick={async () => {
-            const current = document.documentElement.dataset.pandaTheme;
-            const next = current === "primary" ? "secondary" : "primary";
-            const theme = await getTheme(next);
-            setCookie("theme", next, 7);
-            injectTheme(document.documentElement, theme);
+            const current = document.documentElement.dataset.pandaTheme
+            const next = current === 'primary' ? 'secondary' : 'primary'
+            const theme = await getTheme(next)
+            setCookie('theme', next, 7)
+            injectTheme(document.documentElement, theme)
           }}
         >
           swap theme
         </button>
       </>
-    );
+    )
   }
 
   // Set a Cookie
   function setCookie(cName: string, cValue: any, expDays: number) {
-    let date = new Date();
-    date.setTime(date.getTime() + expDays * 24 * 60 * 60 * 1000);
-    const expires = "expires=" + date.toUTCString();
-    document.cookie = cName + "=" + cValue + "; " + expires + "; path=/";
+    let date = new Date()
+    date.setTime(date.getTime() + expDays * 24 * 60 * 60 * 1000)
+    const expires = 'expires=' + date.toUTCString()
+    document.cookie = cName + '=' + cValue + '; ' + expires + '; path=/'
   }
   ```
 
@@ -333,18 +325,18 @@
   Finally, you can create a theme contract to ensure that all themes have the same structure:
 
   ```ts
-  import { defineThemeContract } from "@pandacss/dev";
+  import { defineThemeContract } from '@pandacss/dev'
 
   const defineTheme = defineThemeContract({
     tokens: {
       colors: {
-        red: { value: "" }, // theme implementations must have a red color
+        red: { value: '' }, // theme implementations must have a red color
       },
     },
-  });
+  })
 
   defineTheme({
-    selector: ".theme-secondary",
+    selector: '.theme-secondary',
     tokens: {
       colors: {
         // ^^^^   Property 'red' is missing in type '{}' but required in type '{ red: { value: string; }; }'
@@ -353,7 +345,7 @@
         // red: { value: 'red' },
       },
     },
-  });
+  })
   ```
 
 ### Patch Changes
@@ -579,11 +571,11 @@
   ```js
   module.exports = {
     plugins: {
-      "@pandacss/dev/postcss": {
-        logfile: "./logs/panda.log",
+      '@pandacss/dev/postcss': {
+        logfile: './logs/panda.log',
       },
     },
-  };
+  }
   ```
 
 - Updated dependencies [0dd45b6a]
@@ -630,8 +622,8 @@
   ```ts
   export default defineConfig({
     // ...
-    dependencies: ["path/to/files/**.ts"],
-  });
+    dependencies: ['path/to/files/**.ts'],
+  })
   ```
 
   - Invoke `config:change` hook in more situations (when the `--watch` flag is passed to `panda codegen`,
@@ -680,54 +672,39 @@
      * Called when the config is resolved, after all the presets are loaded and merged.
      * This is the first hook called, you can use it to tweak the config before the context is created.
      */
-    "config:resolved": (args: { conf: LoadConfigResult }) => MaybeAsyncReturn;
+    'config:resolved': (args: { conf: LoadConfigResult }) => MaybeAsyncReturn
     /**
      * Called when the Panda context has been created and the API is ready to be used.
      */
-    "context:created": (args: {
-      ctx: ApiInterface;
-      logger: LoggerInterface;
-    }) => void;
+    'context:created': (args: { ctx: ApiInterface; logger: LoggerInterface }) => void
     /**
      * Called when the config file or one of its dependencies (imports) has changed.
      */
-    "config:change": (args: { config: UserConfig }) => MaybeAsyncReturn;
+    'config:change': (args: { config: UserConfig }) => MaybeAsyncReturn
     /**
      * Called after reading the file content but before parsing it.
      * You can use this hook to transform the file content to a tsx-friendly syntax so that Panda's parser can parse it.
      * You can also use this hook to parse the file's content on your side using a custom parser, in this case you don't have to return anything.
      */
-    "parser:before": (args: {
-      filePath: string;
-      content: string;
-    }) => string | void;
+    'parser:before': (args: { filePath: string; content: string }) => string | void
     /**
      * Called after the file styles are extracted and processed into the resulting ParserResult object.
      * You can also use this hook to add your own extraction results from your custom parser to the ParserResult object.
      */
-    "parser:after": (args: {
-      filePath: string;
-      result: ParserResultInterface | undefined;
-    }) => void;
+    'parser:after': (args: { filePath: string; result: ParserResultInterface | undefined }) => void
     /**
      * Called after the codegen is completed
      */
-    "codegen:done": () => MaybeAsyncReturn;
+    'codegen:done': () => MaybeAsyncReturn
     /**
      * Called right before adding the design-system CSS (global, static, preflight, tokens, keyframes) to the final CSS
      * Called right before writing/injecting the final CSS (styles.css) that contains the design-system CSS and the parser CSS
      * You can use it to tweak the CSS content before it's written to disk or injected through the postcss plugin.
      */
-    "cssgen:done": (args: {
-      artifact:
-        | "global"
-        | "static"
-        | "reset"
-        | "tokens"
-        | "keyframes"
-        | "styles.css";
-      content: string;
-    }) => string | void;
+    'cssgen:done': (args: {
+      artifact: 'global' | 'static' | 'reset' | 'tokens' | 'keyframes' | 'styles.css'
+      content: string
+    }) => string | void
   }
   ```
 
@@ -1625,12 +1602,12 @@
   **Definition**
 
   ```jsx
-  import { sva } from "styled-system/css";
+  import { sva } from 'styled-system/css'
 
   const button = sva({
-    slots: ["label", "icon"],
+    slots: ['label', 'icon'],
     base: {
-      label: { color: "red", textDecoration: "underline" },
+      label: { color: 'red', textDecoration: 'underline' },
     },
     variants: {
       rounded: {
@@ -1638,33 +1615,33 @@
       },
       size: {
         sm: {
-          label: { fontSize: "sm" },
-          icon: { fontSize: "sm" },
+          label: { fontSize: 'sm' },
+          icon: { fontSize: 'sm' },
         },
         lg: {
-          label: { fontSize: "lg" },
-          icon: { fontSize: "lg", color: "pink" },
+          label: { fontSize: 'lg' },
+          icon: { fontSize: 'lg', color: 'pink' },
         },
       },
     },
     defaultVariants: {
-      size: "sm",
+      size: 'sm',
     },
-  });
+  })
   ```
 
   **Usage**
 
   ```jsx
   export function App() {
-    const btnClass = button({ size: "lg", rounded: true });
+    const btnClass = button({ size: 'lg', rounded: true })
 
     return (
       <button>
         <p class={btnClass.label}> Label</p>
         <p class={btnClass.icon}> Icon</p>
       </button>
-    );
+    )
   }
   ```
 
diff --git a/packages/config/CHANGELOG.md b/packages/config/CHANGELOG.md
index 76479a5d7..5a877727a 100644
--- a/packages/config/CHANGELOG.md
+++ b/packages/config/CHANGELOG.md
@@ -91,7 +91,7 @@
 
   ```ts
   // panda.config.ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
@@ -100,15 +100,15 @@
       extend: {
         tokens: {
           colors: {
-            text: { value: "blue" },
+            text: { value: 'blue' },
           },
         },
         semanticTokens: {
           colors: {
             body: {
               value: {
-                base: "{colors.blue.600}",
-                _osDark: "{colors.blue.400}",
+                base: '{colors.blue.600}',
+                _osDark: '{colors.blue.400}',
               },
             },
           },
@@ -120,16 +120,16 @@
       primary: {
         tokens: {
           colors: {
-            text: { value: "red" },
+            text: { value: 'red' },
           },
         },
         semanticTokens: {
           colors: {
-            muted: { value: "{colors.red.200}" },
+            muted: { value: '{colors.red.200}' },
             body: {
               value: {
-                base: "{colors.red.600}",
-                _osDark: "{colors.red.400}",
+                base: '{colors.red.600}',
+                _osDark: '{colors.red.400}',
               },
             },
           },
@@ -138,23 +138,23 @@
       secondary: {
         tokens: {
           colors: {
-            text: { value: "blue" },
+            text: { value: 'blue' },
           },
         },
         semanticTokens: {
           colors: {
-            muted: { value: "{colors.blue.200}" },
+            muted: { value: '{colors.blue.200}' },
             body: {
               value: {
-                base: "{colors.blue.600}",
-                _osDark: "{colors.blue.400}",
+                base: '{colors.blue.600}',
+                _osDark: '{colors.blue.400}',
               },
             },
           },
         },
       },
     },
-  });
+  })
   ```
 
   ### Pregenerating themes
@@ -164,14 +164,14 @@
 
   ```ts
   // panda.config.ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
     staticCss: {
-      themes: ["primary", "secondary"],
+      themes: ['primary', 'secondary'],
     },
-  });
+  })
   ```
 
   This will generate the following CSS:
@@ -183,7 +183,7 @@
       --colors-body: var(--colors-blue-600);
     }
 
-    [data-panda-theme="primary"] {
+    [data-panda-theme='primary'] {
       --colors-text: red;
       --colors-muted: var(--colors-red-200);
       --colors-body: var(--colors-red-600);
@@ -194,7 +194,7 @@
         --colors-body: var(--colors-blue-400);
       }
 
-      [data-panda-theme="primary"] {
+      [data-panda-theme='primary'] {
         --colors-body: var(--colors-red-400);
       }
     }
@@ -225,9 +225,9 @@
   Dynamically import a theme using its name:
 
   ```ts
-  import { getTheme } from "../styled-system/themes";
+  import { getTheme } from '../styled-system/themes'
 
-  const theme = await getTheme("red");
+  const theme = await getTheme('red')
   //    ^? {
   //     name: "red";
   //     id: string;
@@ -238,10 +238,10 @@
   Inject the theme styles into the DOM:
 
   ```ts
-  import { injectTheme } from "../styled-system/themes";
+  import { injectTheme } from '../styled-system/themes'
 
-  const theme = await getTheme("red");
-  injectTheme(document.documentElement, theme); // this returns the injected style element
+  const theme = await getTheme('red')
+  injectTheme(document.documentElement, theme) // this returns the injected style element
   ```
 
   ***
@@ -250,62 +250,54 @@
 
   ```tsx
   // app/layout.tsx
-  import { Inter } from "next/font/google";
-  import { cookies } from "next/headers";
-  import { ThemeName, getTheme } from "../../styled-system/themes";
-
-  export default async function RootLayout({
-    children,
-  }: {
-    children: React.ReactNode;
-  }) {
-    const store = cookies();
-    const themeName = store.get("theme")?.value as ThemeName;
-    const theme = themeName && (await getTheme(themeName));
+  import { Inter } from 'next/font/google'
+  import { cookies } from 'next/headers'
+  import { ThemeName, getTheme } from '../../styled-system/themes'
+
+  export default async function RootLayout({ children }: { children: React.ReactNode }) {
+    const store = cookies()
+    const themeName = store.get('theme')?.value as ThemeName
+    const theme = themeName && (await getTheme(themeName))
 
     return (
       <html lang="en" data-panda-theme={themeName ? themeName : undefined}>
         {themeName && (
           <head>
-            <style
-              type="text/css"
-              id={theme.id}
-              dangerouslySetInnerHTML={{ __html: theme.css }}
-            />
+            <style type="text/css" id={theme.id} dangerouslySetInnerHTML={{ __html: theme.css }} />
           </head>
         )}
         <body>{children}</body>
       </html>
-    );
+    )
   }
 
   // app/page.tsx
-  import { getTheme, injectTheme } from "../../styled-system/themes";
+  import { getTheme, injectTheme } from '../../styled-system/themes'
 
   export default function Home() {
     return (
       <>
         <button
           onClick={async () => {
-            const current = document.documentElement.dataset.pandaTheme;
-            const next = current === "primary" ? "secondary" : "primary";
-            const theme = await getTheme(next);
-            setCookie("theme", next, 7);
-            injectTheme(document.documentElement, theme);
+            const current = document.documentElement.dataset.pandaTheme
+            const next = current === 'primary' ? 'secondary' : 'primary'
+            const theme = await getTheme(next)
+            setCookie('theme', next, 7)
+            injectTheme(document.documentElement, theme)
           }}
         >
           swap theme
         </button>
       </>
-    );
+    )
   }
 
   // Set a Cookie
   function setCookie(cName: string, cValue: any, expDays: number) {
-    let date = new Date();
-    date.setTime(date.getTime() + expDays * 24 * 60 * 60 * 1000);
-    const expires = "expires=" + date.toUTCString();
-    document.cookie = cName + "=" + cValue + "; " + expires + "; path=/";
+    let date = new Date()
+    date.setTime(date.getTime() + expDays * 24 * 60 * 60 * 1000)
+    const expires = 'expires=' + date.toUTCString()
+    document.cookie = cName + '=' + cValue + '; ' + expires + '; path=/'
   }
   ```
 
@@ -314,18 +306,18 @@
   Finally, you can create a theme contract to ensure that all themes have the same structure:
 
   ```ts
-  import { defineThemeContract } from "@pandacss/dev";
+  import { defineThemeContract } from '@pandacss/dev'
 
   const defineTheme = defineThemeContract({
     tokens: {
       colors: {
-        red: { value: "" }, // theme implementations must have a red color
+        red: { value: '' }, // theme implementations must have a red color
       },
     },
-  });
+  })
 
   defineTheme({
-    selector: ".theme-secondary",
+    selector: '.theme-secondary',
     tokens: {
       colors: {
         // ^^^^   Property 'red' is missing in type '{}' but required in type '{ red: { value: string; }; }'
@@ -334,7 +326,7 @@
         // red: { value: 'red' },
       },
     },
-  });
+  })
   ```
 
 ### Patch Changes
@@ -343,7 +335,7 @@
   config)
 
   ```ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   const userConfig = defineConfig({
     presets: [
@@ -352,7 +344,7 @@
           extend: {
             tokens: {
               colors: {
-                black: { value: "black" },
+                black: { value: 'black' },
               },
             },
           },
@@ -364,16 +356,16 @@
         extend: {
           colors: {
             black: {
-              0: { value: "black" },
-              10: { value: "black/10" },
-              20: { value: "black/20" },
-              30: { value: "black/30" },
+              0: { value: 'black' },
+              10: { value: 'black/10' },
+              20: { value: 'black/20' },
+              30: { value: 'black/30' },
             },
           },
         },
       },
     },
-  });
+  })
   ```
 
   When merged with the preset, the config would create nested tokens (`black.10`, `black.20`, `black.30`) inside of the
@@ -420,34 +412,34 @@
   Example:
 
   ```ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
     globalVars: {
-      "--some-color": "red",
-      "--button-color": {
-        syntax: "<color>",
+      '--some-color': 'red',
+      '--button-color': {
+        syntax: '<color>',
         inherits: false,
-        initialValue: "blue",
+        initialValue: 'blue',
       },
     },
-  });
+  })
   ```
 
   > Note: Keys defined in `globalVars` will be available as a value for _every_ utilities, as they're not bound to token
   > categories.
 
   ```ts
-  import { css } from "../styled-system/css";
+  import { css } from '../styled-system/css'
 
   const className = css({
-    "--button-color": "colors.red.300",
+    '--button-color': 'colors.red.300',
     // ^^^^^^^^^^^^  will be suggested
 
-    backgroundColor: "var(--button-color)",
+    backgroundColor: 'var(--button-color)',
     //                ^^^^^^^^^^^^^^^^^^  will be suggested
-  });
+  })
   ```
 
 - Updated dependencies [861a280]
@@ -492,19 +484,19 @@
   modifier in config `tokens` or `semanticTokens`
 
   ```ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
-    validation: "warn",
+    validation: 'warn',
     conditions: {
-      light: ".light &",
-      dark: ".dark &",
+      light: '.light &',
+      dark: '.dark &',
     },
     theme: {
       tokens: {
         colors: {
-          blue: { 500: { value: "blue" } },
-          green: { 500: { value: "green" } },
+          blue: { 500: { value: 'blue' } },
+          green: { 500: { value: 'green' } },
         },
         opacity: {
           half: { value: 0.5 },
@@ -514,15 +506,15 @@
         colors: {
           secondary: {
             value: {
-              base: "red",
-              _light: "{colors.blue.500/32}",
-              _dark: "{colors.green.500/half}",
+              base: 'red',
+              _light: '{colors.blue.500/32}',
+              _dark: '{colors.green.500/half}',
             },
           },
         },
       },
     },
-  });
+  })
   ```
 
   Would incorrectly report:
@@ -554,23 +546,23 @@
 - 9f04427: Fix "missing token" warning when using DEFAULT in tokens path
 
   ```ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
-    validation: "error",
+    validation: 'error',
     theme: {
       semanticTokens: {
         colors: {
           primary: {
-            DEFAULT: { value: "#ff3333" },
-            lighter: { value: "#ff6666" },
+            DEFAULT: { value: '#ff3333' },
+            lighter: { value: '#ff6666' },
           },
-          background: { value: "{colors.primary}" }, // <-- ⚠️ wrong warning
-          background2: { value: "{colors.primary.lighter}" }, // <-- no warning, correct
+          background: { value: '{colors.primary}' }, // <-- ⚠️ wrong warning
+          background2: { value: '{colors.primary.lighter}' }, // <-- no warning, correct
         },
       },
     },
-  });
+  })
   ```
 
   ***
@@ -578,25 +570,25 @@
   Add a warning when using `value` twice
 
   ```ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
-    validation: "error",
+    validation: 'error',
     theme: {
       tokens: {
         colors: {
-          primary: { value: "#ff3333" },
+          primary: { value: '#ff3333' },
         },
       },
       semanticTokens: {
         colors: {
           primary: {
-            value: { value: "{colors.primary}" }, // <-- ⚠️ new warning for this
+            value: { value: '{colors.primary}' }, // <-- ⚠️ new warning for this
           },
         },
       },
     },
-  });
+  })
   ```
 
 - Updated dependencies [d1516c8]
@@ -630,20 +622,20 @@
   export default defaultConfig({
     conditions: {
       extend: {
-        supportHover: ["@media (hover: hover) and (pointer: fine)", "&:hover"],
+        supportHover: ['@media (hover: hover) and (pointer: fine)', '&:hover'],
       },
     },
-  });
+  })
   ```
 
   ```ts
-  import { css } from "../styled-system/css";
+  import { css } from '../styled-system/css'
 
   css({
     _supportHover: {
-      color: "red",
+      color: 'red',
     },
-  });
+  })
   ```
 
   will generate the following CSS:
@@ -699,10 +691,10 @@
 
   ```ts
   css({
-    padding: "1px",
-    paddingTop: "3px",
-    paddingBottom: "4px",
-  });
+    padding: '1px',
+    paddingTop: '3px',
+    paddingBottom: '4px',
+  })
   ```
 
   Will now always generate the following css:
@@ -780,16 +772,16 @@
   keeping the rest. Let's say we want to remove the `stack` pattern from the built-in `@pandacss/preset-base`:
 
   ```ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
     hooks: {
-      "config:resolved": ({ config, utils }) => {
-        return utils.omit(config, ["patterns.stack"]);
+      'config:resolved': ({ config, utils }) => {
+        return utils.omit(config, ['patterns.stack'])
       },
     },
-  });
+  })
   ```
 
 - ab32d1d7: Fix issue where errors were thrown when semantic tokens are overriden in tokens.
@@ -807,11 +799,11 @@
   ```js
   module.exports = {
     plugins: {
-      "@pandacss/dev/postcss": {
-        logfile: "./logs/panda.log",
+      '@pandacss/dev/postcss': {
+        logfile: './logs/panda.log',
       },
     },
-  };
+  }
   ```
 
 - Updated dependencies [74485ef1]
@@ -848,8 +840,8 @@
   ```ts
   export default defineConfig({
     // ...
-    dependencies: ["path/to/files/**.ts"],
-  });
+    dependencies: ['path/to/files/**.ts'],
+  })
   ```
 
   - Invoke `config:change` hook in more situations (when the `--watch` flag is passed to `panda codegen`,
@@ -907,54 +899,39 @@
      * Called when the config is resolved, after all the presets are loaded and merged.
      * This is the first hook called, you can use it to tweak the config before the context is created.
      */
-    "config:resolved": (args: { conf: LoadConfigResult }) => MaybeAsyncReturn;
+    'config:resolved': (args: { conf: LoadConfigResult }) => MaybeAsyncReturn
     /**
      * Called when the Panda context has been created and the API is ready to be used.
      */
-    "context:created": (args: {
-      ctx: ApiInterface;
-      logger: LoggerInterface;
-    }) => void;
+    'context:created': (args: { ctx: ApiInterface; logger: LoggerInterface }) => void
     /**
      * Called when the config file or one of its dependencies (imports) has changed.
      */
-    "config:change": (args: { config: UserConfig }) => MaybeAsyncReturn;
+    'config:change': (args: { config: UserConfig }) => MaybeAsyncReturn
     /**
      * Called after reading the file content but before parsing it.
      * You can use this hook to transform the file content to a tsx-friendly syntax so that Panda's parser can parse it.
      * You can also use this hook to parse the file's content on your side using a custom parser, in this case you don't have to return anything.
      */
-    "parser:before": (args: {
-      filePath: string;
-      content: string;
-    }) => string | void;
+    'parser:before': (args: { filePath: string; content: string }) => string | void
     /**
      * Called after the file styles are extracted and processed into the resulting ParserResult object.
      * You can also use this hook to add your own extraction results from your custom parser to the ParserResult object.
      */
-    "parser:after": (args: {
-      filePath: string;
-      result: ParserResultInterface | undefined;
-    }) => void;
+    'parser:after': (args: { filePath: string; result: ParserResultInterface | undefined }) => void
     /**
      * Called after the codegen is completed
      */
-    "codegen:done": () => MaybeAsyncReturn;
+    'codegen:done': () => MaybeAsyncReturn
     /**
      * Called right before adding the design-system CSS (global, static, preflight, tokens, keyframes) to the final CSS
      * Called right before writing/injecting the final CSS (styles.css) that contains the design-system CSS and the parser CSS
      * You can use it to tweak the CSS content before it's written to disk or injected through the postcss plugin.
      */
-    "cssgen:done": (args: {
-      artifact:
-        | "global"
-        | "static"
-        | "reset"
-        | "tokens"
-        | "keyframes"
-        | "styles.css";
-      content: string;
-    }) => string | void;
+    'cssgen:done': (args: {
+      artifact: 'global' | 'static' | 'reset' | 'tokens' | 'keyframes' | 'styles.css'
+      content: string
+    }) => string | void
   }
   ```
 
@@ -1046,12 +1023,12 @@
 
   ```ts
   // apps/storybook/panda.config.ts
-  import { defineConfig } from "@pandacss/dev";
-  import preset from "@acme/preset";
+  import { defineConfig } from '@pandacss/dev'
+  import preset from '@acme/preset'
 
   export default defineConfig({
     // ...
-  });
+  })
   ```
 
   This would not work before, but now it does.
@@ -1265,10 +1242,10 @@
     staticCss: {
       recipes: {
         // generate all button styles and variants
-        button: ["*"],
+        button: ['*'],
       },
     },
-  });
+  })
 
   export default defineConfig({
     presets: [presetWithStaticCss],
@@ -1276,11 +1253,11 @@
       extend: {
         recipes: {
           // extend and pre-generate all sizes for card
-          card: [{ size: ["small", "medium", "large"] }],
+          card: [{ size: ['small', 'medium', 'large'] }],
         },
       },
     },
-  });
+  })
   ```
 
 ### Patch Changes
@@ -1475,42 +1452,42 @@
     theme: {
       tokens: {
         colors: {
-          "first-main": { value: "override" },
+          'first-main': { value: 'override' },
         },
       },
       extend: {
         tokens: {
           colors: {
-            orange: { value: "orange" },
-            gray: { value: "from-first-config" },
+            orange: { value: 'orange' },
+            gray: { value: 'from-first-config' },
           },
         },
       },
     },
-  });
+  })
 
   const secondConfig = definePreset({
     theme: {
       tokens: {
         colors: {
-          pink: { value: "pink" },
+          pink: { value: 'pink' },
         },
       },
       extend: {
         tokens: {
           colors: {
-            blue: { value: "blue" },
-            gray: { value: "gray" },
+            blue: { value: 'blue' },
+            gray: { value: 'gray' },
           },
         },
       },
     },
-  });
+  })
 
   // Final config
   export default defineConfig({
     presets: [firstConfig, secondConfig],
-  });
+  })
   ```
 
   Here's the difference between the old and new behavior:
@@ -1738,7 +1715,7 @@
 - 33198907: Create separate entrypoint for merge configs
 
   ```ts
-  import { mergeConfigs } from "@pandacss/config/merge";
+  import { mergeConfigs } from '@pandacss/config/merge'
   ```
 
 - 1a2c0e2b: Fix `panda.config.xxx` file dependencies detection when using the builder (= with PostCSS or with the VSCode
diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md
index 7edd84ac1..ce8636e53 100644
--- a/packages/core/CHANGELOG.md
+++ b/packages/core/CHANGELOG.md
@@ -4,8 +4,8 @@
 
 ### Patch Changes
 
-- c3e797e: Fix issue where `animationName` property was not connected to `theme.keyframes`, as a result, no autocompletion was
-  available.
+- c3e797e: Fix issue where `animationName` property was not connected to `theme.keyframes`, as a result, no
+  autocompletion was available.
 - Updated dependencies [221c9a2]
 - Updated dependencies [c3e797e]
 - Updated dependencies [935ec86]
@@ -32,11 +32,11 @@
       ta: {
         deprecated: true,
         transform(value) {
-          return { textAlign: value };
+          return { textAlign: value }
         },
       },
     },
-  });
+  })
   ```
 
   **Deprecating a token**
@@ -46,11 +46,11 @@
     theme: {
       tokens: {
         spacing: {
-          lg: { value: "8px", deprecated: "use `8` instead" },
+          lg: { value: '8px', deprecated: 'use `8` instead' },
         },
       },
     },
-  });
+  })
   ```
 
   **Deprecating a pattern**
@@ -62,7 +62,7 @@
         deprecated: true,
       },
     },
-  });
+  })
   ```
 
   **Deprecating a recipe**
@@ -72,11 +72,11 @@
     theme: {
       recipes: {
         btn: {
-          deprecated: "will be removed in v2.0",
+          deprecated: 'will be removed in v2.0',
         },
       },
     },
-  });
+  })
   ```
 
   ### ESLint Plugin
@@ -102,28 +102,23 @@
   This makes it even easier to merge styles from multiple sources.
 
   ```tsx
-  import { Stack, styled } from "../styled-system/jsx";
+  import { Stack, styled } from '../styled-system/jsx'
 
   const HeroSection = (props) => {
     return (
-      <Stack css={[{ color: "blue.300", padding: "4" }, props.css]}>
-        <styled.div css={[{ fontSize: "2xl" }, props.hero]}>
-          Hero Section
-        </styled.div>
+      <Stack css={[{ color: 'blue.300', padding: '4' }, props.css]}>
+        <styled.div css={[{ fontSize: '2xl' }, props.hero]}>Hero Section</styled.div>
       </Stack>
-    );
-  };
+    )
+  }
 
   const App = () => {
     return (
       <>
-        <HeroSection
-          css={{ backgroundColor: "yellow.300" }}
-          hero={css.raw({ fontSize: "4xl", color: "red.300" })}
-        />
+        <HeroSection css={{ backgroundColor: 'yellow.300' }} hero={css.raw({ fontSize: '4xl', color: 'red.300' })} />
       </>
-    );
-  };
+    )
+  }
   ```
 
   should render something like:
@@ -162,21 +157,21 @@
 - 99870bb: Fix issue where setting the pattern `jsx` option with dot notation didn't work.
 
   ```jsx
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
     patterns: {
       extend: {
         grid: {
-          jsx: ["Form.Group", "Grid"],
+          jsx: ['Form.Group', 'Grid'],
         },
         stack: {
-          jsx: ["Form.Action", "Stack"],
+          jsx: ['Form.Action', 'Stack'],
         },
       },
     },
-  });
+  })
   ```
 
 - Updated dependencies [93dc9f5]
@@ -218,9 +213,9 @@
     useful when applying negative margin to child elements.
 
   ```tsx
-  <div className={flex({ spaceX: "-1" })}>
-    <div className={circle({ size: "5", bg: "red" })} />
-    <div className={circle({ size: "5", bg: "pink" })} />
+  <div className={flex({ spaceX: '-1' })}>
+    <div className={circle({ size: '5', bg: 'red' })} />
+    <div className={circle({ size: '5', bg: 'pink' })} />
   </div>
   ```
 
@@ -232,13 +227,13 @@
   ```tsx
   <div
     className={css({
-      bgGradient: "to-r",
+      bgGradient: 'to-r',
       // from
-      gradientFrom: "red",
-      gradientFromPosition: "top left",
+      gradientFrom: 'red',
+      gradientFromPosition: 'top left',
       // to
-      gradientTo: "blue",
-      gradientToPosition: "bottom right",
+      gradientTo: 'blue',
+      gradientToPosition: 'bottom right',
     })}
   />
   ```
@@ -248,23 +243,19 @@
   It can be useful to use a component library's `styled-system` while also using your own `styled-system` in your app.
 
   ```ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
-    importMap: [
-      "@acme/styled-system",
-      "@ui-lib/styled-system",
-      "styled-system",
-    ],
-  });
+    importMap: ['@acme/styled-system', '@ui-lib/styled-system', 'styled-system'],
+  })
   ```
 
   Now you can use any of the `@acme/styled-system`, `@ui-lib/styled-system` and `styled-system` import sources:
 
   ```ts
-  import { css } from "@acme/css";
-  import { css as uiCss } from "@ui-lib/styled-system/css";
-  import { css as appCss } from "@ui-lib/styled-system/css";
+  import { css } from '@acme/css'
+  import { css as uiCss } from '@ui-lib/styled-system/css'
+  import { css as appCss } from '@ui-lib/styled-system/css'
   ```
 
 ### Patch Changes
@@ -303,7 +294,7 @@
 
   ```ts
   // panda.config.ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
@@ -312,15 +303,15 @@
       extend: {
         tokens: {
           colors: {
-            text: { value: "blue" },
+            text: { value: 'blue' },
           },
         },
         semanticTokens: {
           colors: {
             body: {
               value: {
-                base: "{colors.blue.600}",
-                _osDark: "{colors.blue.400}",
+                base: '{colors.blue.600}',
+                _osDark: '{colors.blue.400}',
               },
             },
           },
@@ -332,16 +323,16 @@
       primary: {
         tokens: {
           colors: {
-            text: { value: "red" },
+            text: { value: 'red' },
           },
         },
         semanticTokens: {
           colors: {
-            muted: { value: "{colors.red.200}" },
+            muted: { value: '{colors.red.200}' },
             body: {
               value: {
-                base: "{colors.red.600}",
-                _osDark: "{colors.red.400}",
+                base: '{colors.red.600}',
+                _osDark: '{colors.red.400}',
               },
             },
           },
@@ -350,23 +341,23 @@
       secondary: {
         tokens: {
           colors: {
-            text: { value: "blue" },
+            text: { value: 'blue' },
           },
         },
         semanticTokens: {
           colors: {
-            muted: { value: "{colors.blue.200}" },
+            muted: { value: '{colors.blue.200}' },
             body: {
               value: {
-                base: "{colors.blue.600}",
-                _osDark: "{colors.blue.400}",
+                base: '{colors.blue.600}',
+                _osDark: '{colors.blue.400}',
               },
             },
           },
         },
       },
     },
-  });
+  })
   ```
 
   ### Pregenerating themes
@@ -376,14 +367,14 @@
 
   ```ts
   // panda.config.ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
     staticCss: {
-      themes: ["primary", "secondary"],
+      themes: ['primary', 'secondary'],
     },
-  });
+  })
   ```
 
   This will generate the following CSS:
@@ -395,7 +386,7 @@
       --colors-body: var(--colors-blue-600);
     }
 
-    [data-panda-theme="primary"] {
+    [data-panda-theme='primary'] {
       --colors-text: red;
       --colors-muted: var(--colors-red-200);
       --colors-body: var(--colors-red-600);
@@ -406,7 +397,7 @@
         --colors-body: var(--colors-blue-400);
       }
 
-      [data-panda-theme="primary"] {
+      [data-panda-theme='primary'] {
         --colors-body: var(--colors-red-400);
       }
     }
@@ -437,9 +428,9 @@
   Dynamically import a theme using its name:
 
   ```ts
-  import { getTheme } from "../styled-system/themes";
+  import { getTheme } from '../styled-system/themes'
 
-  const theme = await getTheme("red");
+  const theme = await getTheme('red')
   //    ^? {
   //     name: "red";
   //     id: string;
@@ -450,10 +441,10 @@
   Inject the theme styles into the DOM:
 
   ```ts
-  import { injectTheme } from "../styled-system/themes";
+  import { injectTheme } from '../styled-system/themes'
 
-  const theme = await getTheme("red");
-  injectTheme(document.documentElement, theme); // this returns the injected style element
+  const theme = await getTheme('red')
+  injectTheme(document.documentElement, theme) // this returns the injected style element
   ```
 
   ***
@@ -462,62 +453,54 @@
 
   ```tsx
   // app/layout.tsx
-  import { Inter } from "next/font/google";
-  import { cookies } from "next/headers";
-  import { ThemeName, getTheme } from "../../styled-system/themes";
-
-  export default async function RootLayout({
-    children,
-  }: {
-    children: React.ReactNode;
-  }) {
-    const store = cookies();
-    const themeName = store.get("theme")?.value as ThemeName;
-    const theme = themeName && (await getTheme(themeName));
+  import { Inter } from 'next/font/google'
+  import { cookies } from 'next/headers'
+  import { ThemeName, getTheme } from '../../styled-system/themes'
+
+  export default async function RootLayout({ children }: { children: React.ReactNode }) {
+    const store = cookies()
+    const themeName = store.get('theme')?.value as ThemeName
+    const theme = themeName && (await getTheme(themeName))
 
     return (
       <html lang="en" data-panda-theme={themeName ? themeName : undefined}>
         {themeName && (
           <head>
-            <style
-              type="text/css"
-              id={theme.id}
-              dangerouslySetInnerHTML={{ __html: theme.css }}
-            />
+            <style type="text/css" id={theme.id} dangerouslySetInnerHTML={{ __html: theme.css }} />
           </head>
         )}
         <body>{children}</body>
       </html>
-    );
+    )
   }
 
   // app/page.tsx
-  import { getTheme, injectTheme } from "../../styled-system/themes";
+  import { getTheme, injectTheme } from '../../styled-system/themes'
 
   export default function Home() {
     return (
       <>
         <button
           onClick={async () => {
-            const current = document.documentElement.dataset.pandaTheme;
-            const next = current === "primary" ? "secondary" : "primary";
-            const theme = await getTheme(next);
-            setCookie("theme", next, 7);
-            injectTheme(document.documentElement, theme);
+            const current = document.documentElement.dataset.pandaTheme
+            const next = current === 'primary' ? 'secondary' : 'primary'
+            const theme = await getTheme(next)
+            setCookie('theme', next, 7)
+            injectTheme(document.documentElement, theme)
           }}
         >
           swap theme
         </button>
       </>
-    );
+    )
   }
 
   // Set a Cookie
   function setCookie(cName: string, cValue: any, expDays: number) {
-    let date = new Date();
-    date.setTime(date.getTime() + expDays * 24 * 60 * 60 * 1000);
-    const expires = "expires=" + date.toUTCString();
-    document.cookie = cName + "=" + cValue + "; " + expires + "; path=/";
+    let date = new Date()
+    date.setTime(date.getTime() + expDays * 24 * 60 * 60 * 1000)
+    const expires = 'expires=' + date.toUTCString()
+    document.cookie = cName + '=' + cValue + '; ' + expires + '; path=/'
   }
   ```
 
@@ -526,18 +509,18 @@
   Finally, you can create a theme contract to ensure that all themes have the same structure:
 
   ```ts
-  import { defineThemeContract } from "@pandacss/dev";
+  import { defineThemeContract } from '@pandacss/dev'
 
   const defineTheme = defineThemeContract({
     tokens: {
       colors: {
-        red: { value: "" }, // theme implementations must have a red color
+        red: { value: '' }, // theme implementations must have a red color
       },
     },
-  });
+  })
 
   defineTheme({
-    selector: ".theme-secondary",
+    selector: '.theme-secondary',
     tokens: {
       colors: {
         // ^^^^   Property 'red' is missing in type '{}' but required in type '{ red: { value: string; }; }'
@@ -546,7 +529,7 @@
         // red: { value: 'red' },
       },
     },
-  });
+  })
   ```
 
 - fabdabe: ## Changes
@@ -566,12 +549,12 @@
     theme: {
       extend: {
         colors: {
-          primary: { value: "blue" },
+          primary: { value: 'blue' },
         },
         // borderWidths: {}, // ⚠️ nothing defined here
       },
     },
-  });
+  })
   ```
 
   ```ts
@@ -582,8 +565,8 @@
 
     // ✅ after this PR, TS will not throw an error anymore as you don't have any `borderWidths` tokens
     // if you add one, this will error again (as it's supposed to)
-    borderWidths: "123px",
-  });
+    borderWidths: '123px',
+  })
   ```
 
   ## Description
@@ -621,13 +604,11 @@
 - c459b43: Fix extraction of JSX `styled` factory when using namespace imports
 
   ```tsx
-  import * as pandaJsx from "../styled-system/jsx";
+  import * as pandaJsx from '../styled-system/jsx'
 
   // ✅ this will work now
-  pandaJsx.styled("div", { base: { color: "red" } });
-  const App = () => (
-    <pandaJsx.styled.span color="blue">Hello</pandaJsx.styled.span>
-  );
+  pandaJsx.styled('div', { base: { color: 'red' } })
+  const App = () => <pandaJsx.styled.span color="blue">Hello</pandaJsx.styled.span>
   ```
 
 - Updated dependencies [f2fdc48]
@@ -657,18 +638,18 @@
 - 0bf09f2: Allow using namespaced imports
 
   ```ts
-  import * as p from "styled-system/patterns";
-  import * as recipes from "styled-system/recipes";
-  import * as panda from "styled-system/css";
+  import * as p from 'styled-system/patterns'
+  import * as recipes from 'styled-system/recipes'
+  import * as panda from 'styled-system/css'
 
   // this will now be extracted
-  p.stack({ mt: "40px" });
+  p.stack({ mt: '40px' })
 
-  recipes.cardStyle({ rounded: true });
+  recipes.cardStyle({ rounded: true })
 
-  panda.css({ color: "red" });
-  panda.cva({ base: { color: "blue" } });
-  panda.sva({ base: { root: { color: "green" } } });
+  panda.css({ color: 'red' })
+  panda.cva({ base: { color: 'blue' } })
+  panda.sva({ base: { root: { color: 'green' } } })
   ```
 
   - @pandacss/types@0.34.2
@@ -702,16 +683,16 @@
   ```ts
   // runtime usage
 
-  import { css } from "../styled-system/css";
+  import { css } from '../styled-system/css'
 
-  css({ bg: "{colors.blue.300/70}" });
+  css({ bg: '{colors.blue.300/70}' })
   // => @layer utilities {
   //    .bg_token\(colors\.blue\.300\/70\) {
   //      background: color-mix(in srgb, var(--colors-blue-300) 70%, transparent);
   //    }
   //  }
 
-  css({ bg: "token(colors.blue.300/70)" });
+  css({ bg: 'token(colors.blue.300/70)' })
   // => @layer utilities {
   //    .bg_token\(colors\.blue\.300\/70\) {
   //      background: color-mix(in srgb, var(--colors-blue-300) 70%, transparent);
@@ -721,37 +702,33 @@
 
   ```ts
   // build-time usage
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     theme: {
       tokens: {
         colors: {
           blue: {
-            300: { value: "#00f" },
+            300: { value: '#00f' },
           },
         },
       },
       semanticTokens: {
         colors: {
           primary: {
-            value: "{colors.blue.300/70}",
+            value: '{colors.blue.300/70}',
           },
         },
       },
     },
-  });
+  })
   ```
 
   ```css
   @layer tokens {
     :where(:root, :host) {
       --colors-blue-300: #00f;
-      --colors-primary: color-mix(
-        in srgb,
-        var(--colors-blue-300) 70%,
-        transparent
-      );
+      --colors-primary: color-mix(in srgb, var(--colors-blue-300) 70%, transparent);
     }
   }
   ```
@@ -792,20 +769,20 @@
   export default defaultConfig({
     conditions: {
       extend: {
-        supportHover: ["@media (hover: hover) and (pointer: fine)", "&:hover"],
+        supportHover: ['@media (hover: hover) and (pointer: fine)', '&:hover'],
       },
     },
-  });
+  })
   ```
 
   ```ts
-  import { css } from "../styled-system/css";
+  import { css } from '../styled-system/css'
 
   css({
     _supportHover: {
-      color: "red",
+      color: 'red',
     },
-  });
+  })
   ```
 
   will generate the following CSS:
@@ -821,25 +798,25 @@
 - 31071ba: Fix an issue for token names starting with '0'
 
   ```ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     theme: {
       tokens: {
         spacing: {
-          "025": {
-            value: "0.125rem",
+          '025': {
+            value: '0.125rem',
           },
         },
       },
     },
-  });
+  })
   ```
 
   and then using it like
 
   ```ts
-  css({ margin: "025" });
+  css({ margin: '025' })
   ```
 
   This would not generate the expected CSS because the parser would try to parse `025` as a number (`25`) instead of
@@ -850,11 +827,11 @@
   - Allow using multiple aliases for the same identifier for the `/css` entrypoints just like `/patterns` and `/recipes`
 
   ```ts
-  import { css } from "../styled-system/css";
-  import { css as css2 } from "../styled-system/css";
+  import { css } from '../styled-system/css'
+  import { css as css2 } from '../styled-system/css'
 
-  css({ display: "flex" });
-  css2({ flexDirection: "column" }); // this wasn't working before, now it does
+  css({ display: 'flex' })
+  css2({ flexDirection: 'column' }) // this wasn't working before, now it does
   ```
 
 - Updated dependencies [a032375]
@@ -898,10 +875,10 @@
 
   ```ts
   css({
-    padding: "1px",
-    paddingTop: "3px",
-    paddingBottom: "4px",
-  });
+    padding: '1px',
+    paddingTop: '3px',
+    paddingBottom: '4px',
+  })
   ```
 
   Will now always generate the following css:
@@ -962,17 +939,16 @@
   export default defineConfig({
     // ...
     hooks: {
-      "parser:before": ({ configure }) => {
+      'parser:before': ({ configure }) => {
         configure({
           // ignore the Select.Content entirely
-          matchTag: (tag) => tag !== "Select.Content",
+          matchTag: (tag) => tag !== 'Select.Content',
           // ...or specifically ignore the `position` property
-          matchTagProp: (tag, prop) =>
-            tag === "Select.Content" && prop !== "position",
-        });
+          matchTagProp: (tag, prop) => tag === 'Select.Content' && prop !== 'position',
+        })
       },
     },
-  });
+  })
   ```
 
 - Updated dependencies [6b829cab]
@@ -1040,9 +1016,9 @@
 
   ```ts
   css({
-    bg: "red.300/40",
-    color: "white",
-  });
+    bg: 'red.300/40',
+    color: 'white',
+  })
   ```
 
   This will generate:
@@ -1050,11 +1026,7 @@
   ```css
   @layer utilities {
     .bg_red\.300\/40 {
-      --mix-background: color-mix(
-        in srgb,
-        var(--colors-red-300) 40%,
-        transparent
-      );
+      --mix-background: color-mix(in srgb, var(--colors-red-300) 40%, transparent);
       background: var(--mix-background, var(--colors-red-300));
     }
 
@@ -1078,21 +1050,21 @@
   export default defineConfig({
     utilities: {
       background: {
-        shorthand: "bg",
-        className: "bg",
-        values: "colors",
+        shorthand: 'bg',
+        className: 'bg',
+        values: 'colors',
         transform(value, args) {
-          const mix = args.utils.colorMix(value);
+          const mix = args.utils.colorMix(value)
           // This can happen if the value format is invalid (e.g. `bg: red.300/invalid` or `bg: red.300//10`)
-          if (mix.invalid) return { background: value };
+          if (mix.invalid) return { background: value }
 
           return {
             background: mix.value,
-          };
+          }
         },
       },
     },
-  });
+  })
   ```
 
   ***
@@ -1101,21 +1073,21 @@
   property:
 
   ```ts
-  import type { PropertyTransform } from "@pandacss/types";
+  import type { PropertyTransform } from '@pandacss/types'
 
   export const createColorMixTransform =
     (prop: string): PropertyTransform =>
     (value, args) => {
-      const mix = args.utils.colorMix(value);
-      if (mix.invalid) return { [prop]: value };
+      const mix = args.utils.colorMix(value)
+      if (mix.invalid) return { [prop]: value }
 
-      const cssVar = "--mix-" + prop;
+      const cssVar = '--mix-' + prop
 
       return {
         [cssVar]: mix.value,
         [prop]: `var(${cssVar}, ${mix.color})`,
-      };
-    };
+      }
+    }
   ```
 
   then the same utility transform as above can be written like this:
@@ -1141,24 +1113,24 @@
     patterns: {
       hstack: {
         properties: {
-          justify: { type: "property", value: "justifyContent" },
-          gap: { type: "property", value: "gap" },
+          justify: { type: 'property', value: 'justifyContent' },
+          gap: { type: 'property', value: 'gap' },
         },
         // you can also use a token like '10'
-        defaultValues: { gap: "40px" },
+        defaultValues: { gap: '40px' },
         transform(props) {
-          const { justify, gap, ...rest } = props;
+          const { justify, gap, ...rest } = props
           return {
-            display: "flex",
-            alignItems: "center",
+            display: 'flex',
+            alignItems: 'center',
             justifyContent: justify,
             gap,
             ...rest,
-          };
+          }
         },
       },
     },
-  });
+  })
   ```
 
 - 250b4d11: ### Container Query Theme
@@ -1172,34 +1144,34 @@
     // ...
     theme: {
       extend: {
-        containerNames: ["sidebar", "content"],
+        containerNames: ['sidebar', 'content'],
         containerSizes: {
-          xs: "40em",
-          sm: "60em",
-          md: "80em",
+          xs: '40em',
+          sm: '60em',
+          md: '80em',
         },
       },
     },
-  });
+  })
   ```
 
   The default container sizes in the `@pandacss/preset-panda` preset are shown below:
 
   ```ts
   export const containerSizes = {
-    xs: "320px",
-    sm: "384px",
-    md: "448px",
-    lg: "512px",
-    xl: "576px",
-    "2xl": "672px",
-    "3xl": "768px",
-    "4xl": "896px",
-    "5xl": "1024px",
-    "6xl": "1152px",
-    "7xl": "1280px",
-    "8xl": "1440px",
-  };
+    xs: '320px',
+    sm: '384px',
+    md: '448px',
+    lg: '512px',
+    xl: '576px',
+    '2xl': '672px',
+    '3xl': '768px',
+    '4xl': '896px',
+    '5xl': '1024px',
+    '6xl': '1152px',
+    '7xl': '1280px',
+    '8xl': '1440px',
+  }
   ```
 
   Then use them in your styles by referencing using `@<container-name>/<container-size>` syntax:
@@ -1283,10 +1255,10 @@
   css({
     // ✅ this is fine now, will resolve to something like
     // `@container (min-width: 56em)`
-    "@container (min-width: {sizes.4xl})": {
-      color: "green",
+    '@container (min-width: {sizes.4xl})': {
+      color: 'green',
     },
-  });
+  })
   ```
 
   Fix an issue where the curly token references would not be escaped if the token path was not found.
@@ -1325,54 +1297,39 @@
      * Called when the config is resolved, after all the presets are loaded and merged.
      * This is the first hook called, you can use it to tweak the config before the context is created.
      */
-    "config:resolved": (args: { conf: LoadConfigResult }) => MaybeAsyncReturn;
+    'config:resolved': (args: { conf: LoadConfigResult }) => MaybeAsyncReturn
     /**
      * Called when the Panda context has been created and the API is ready to be used.
      */
-    "context:created": (args: {
-      ctx: ApiInterface;
-      logger: LoggerInterface;
-    }) => void;
+    'context:created': (args: { ctx: ApiInterface; logger: LoggerInterface }) => void
     /**
      * Called when the config file or one of its dependencies (imports) has changed.
      */
-    "config:change": (args: { config: UserConfig }) => MaybeAsyncReturn;
+    'config:change': (args: { config: UserConfig }) => MaybeAsyncReturn
     /**
      * Called after reading the file content but before parsing it.
      * You can use this hook to transform the file content to a tsx-friendly syntax so that Panda's parser can parse it.
      * You can also use this hook to parse the file's content on your side using a custom parser, in this case you don't have to return anything.
      */
-    "parser:before": (args: {
-      filePath: string;
-      content: string;
-    }) => string | void;
+    'parser:before': (args: { filePath: string; content: string }) => string | void
     /**
      * Called after the file styles are extracted and processed into the resulting ParserResult object.
      * You can also use this hook to add your own extraction results from your custom parser to the ParserResult object.
      */
-    "parser:after": (args: {
-      filePath: string;
-      result: ParserResultInterface | undefined;
-    }) => void;
+    'parser:after': (args: { filePath: string; result: ParserResultInterface | undefined }) => void
     /**
      * Called after the codegen is completed
      */
-    "codegen:done": () => MaybeAsyncReturn;
+    'codegen:done': () => MaybeAsyncReturn
     /**
      * Called right before adding the design-system CSS (global, static, preflight, tokens, keyframes) to the final CSS
      * Called right before writing/injecting the final CSS (styles.css) that contains the design-system CSS and the parser CSS
      * You can use it to tweak the CSS content before it's written to disk or injected through the postcss plugin.
      */
-    "cssgen:done": (args: {
-      artifact:
-        | "global"
-        | "static"
-        | "reset"
-        | "tokens"
-        | "keyframes"
-        | "styles.css";
-      content: string;
-    }) => string | void;
+    'cssgen:done': (args: {
+      artifact: 'global' | 'static' | 'reset' | 'tokens' | 'keyframes' | 'styles.css'
+      content: string
+    }) => string | void
   }
   ```
 
@@ -1579,11 +1536,11 @@
 - de282f60: Support token reference syntax when authoring styles object, text styles and layer styles.
 
   ```jsx
-  import { css } from "../styled-system/css";
+  import { css } from '../styled-system/css'
 
   const styles = css({
-    border: "2px solid {colors.primary}",
-  });
+    border: '2px solid {colors.primary}',
+  })
   ```
 
   This will resolve the token reference and convert it to css variables.
@@ -1603,18 +1560,18 @@
   ```jsx
   const styles = css({
     // token reference syntax
-    border: "2px solid {colors.primary}",
+    border: '2px solid {colors.primary}',
     // token function syntax
-    border: "2px solid token(colors.primary)",
-  });
+    border: '2px solid token(colors.primary)',
+  })
   ```
 
   However, The `token(...)` syntax allows you to set a fallback value.
 
   ```jsx
   const styles = css({
-    border: "2px solid token(colors.primary, red)",
-  });
+    border: '2px solid token(colors.primary, red)',
+  })
   ```
 
 ### Patch Changes
@@ -1625,8 +1582,8 @@
   ```jsx
   css({
     // This didn't work, but now it does
-    base: { color: "blue" },
-  });
+    base: { color: 'blue' },
+  })
   ```
 
 - Updated dependencies [59fd291c]
@@ -1685,38 +1642,38 @@
 
   ```ts
   const card = defineRecipe({
-    className: "card",
-    base: { color: "white" },
+    className: 'card',
+    base: { color: 'white' },
     variants: {
       size: {
-        small: { fontSize: "14px" },
-        large: { fontSize: "18px" },
+        small: { fontSize: '14px' },
+        large: { fontSize: '18px' },
       },
       visual: {
-        primary: { backgroundColor: "blue" },
-        secondary: { backgroundColor: "gray" },
+        primary: { backgroundColor: 'blue' },
+        secondary: { backgroundColor: 'gray' },
       },
     },
-  });
+  })
 
   export default defineConfig({
     // ...
     staticCss: {
       recipes: {
-        card: ["*"], // this
+        card: ['*'], // this
 
         // was equivalent to:
         card: [
           // notice how `responsive: true` was implicitly added
-          { size: ["*"], responsive: true },
-          { visual: ["*"], responsive: true },
+          { size: ['*'], responsive: true },
+          { visual: ['*'], responsive: true },
         ],
 
         //   will now correctly be equivalent to:
-        card: [{ size: ["*"] }, { visual: ["*"] }],
+        card: [{ size: ['*'] }, { visual: ['*'] }],
       },
     },
-  });
+  })
   ```
 
   Here's the diff in the generated CSS:
@@ -1842,30 +1799,30 @@
   another file, such as when using `Ark-UI` like `import { comboboxAnatomy } from '@ark-ui/anatomy'`
 
   ```ts
-  import { sva } from "../styled-system/css";
-  import { slots } from "./slots";
+  import { sva } from '../styled-system/css'
+  import { slots } from './slots'
 
   const card = sva({
     slots, // ❌ did NOT work -> ✅ will now work as expected
     base: {
       root: {
-        p: "6",
-        m: "4",
-        w: "md",
-        boxShadow: "md",
-        borderRadius: "md",
-        _dark: { bg: "#262626", color: "white" },
+        p: '6',
+        m: '4',
+        w: 'md',
+        boxShadow: 'md',
+        borderRadius: 'md',
+        _dark: { bg: '#262626', color: 'white' },
       },
       content: {
-        textStyle: "lg",
+        textStyle: 'lg',
       },
       title: {
-        textStyle: "xl",
-        fontWeight: "semibold",
-        pb: "2",
+        textStyle: 'xl',
+        fontWeight: 'semibold',
+        pb: '2',
       },
     },
-  });
+  })
   ```
 
 - 840ed66b: Fix an issue with config change detection when using a custom `config.slotRecipes[xxx].jsx` array
@@ -1922,18 +1879,18 @@
   and suffixing with `]`, e.g. writing `[123px]` as a value will bypass the token validation.
 
   ```ts
-  import { css } from "../styled-system/css";
+  import { css } from '../styled-system/css'
 
   css({
     // @ts-expect-error TS will throw when using from strictTokens: true
-    color: "#fff",
+    color: '#fff',
     // @ts-expect-error TS will throw when using from strictTokens: true
-    width: "100px",
+    width: '100px',
 
     // ✅ but this is now allowed:
-    bgColor: "[rgb(51 155 240)]",
-    fontSize: "[12px]",
-  });
+    bgColor: '[rgb(51 155 240)]',
+    fontSize: '[12px]',
+  })
   ```
 
 ### Patch Changes
@@ -1946,8 +1903,8 @@
     // here the content property is a valid CSS property, so Panda will try to generate the CSS for it
     // but since it's an URL, it would produce invalid CSS
     // we now check if the property value is an URL and skip it if needed
-    return <CopyButton content="https://www.buymeacoffee.com/grizzlycodes" />;
-  };
+    return <CopyButton content="https://www.buymeacoffee.com/grizzlycodes" />
+  }
   ```
 
 - d81dcbe6: - Fix an issue where recipe variants that clash with utility shorthand don't get generated due to the
@@ -1956,36 +1913,36 @@
 - 105f74ce: Add a way to specify a recipe's `staticCss` options from inside a recipe config, e.g.:
 
   ```js
-  import { defineRecipe } from "@pandacss/dev";
+  import { defineRecipe } from '@pandacss/dev'
 
   const card = defineRecipe({
-    className: "card",
-    base: { color: "white" },
+    className: 'card',
+    base: { color: 'white' },
     variants: {
       size: {
-        small: { fontSize: "14px" },
-        large: { fontSize: "18px" },
+        small: { fontSize: '14px' },
+        large: { fontSize: '18px' },
       },
     },
-    staticCss: [{ size: ["*"] }],
-  });
+    staticCss: [{ size: ['*'] }],
+  })
   ```
 
   would be the equivalent of defining it inside the main config:
 
   ```js
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
     staticCss: {
       recipes: {
         card: {
-          size: ["*"],
+          size: ['*'],
         },
       },
     },
-  });
+  })
   ```
 
 - Updated dependencies [26e6051a]
@@ -2017,13 +1974,13 @@
 
   ```ts
   css({
-    "@container (min-width: token(sizes.xl))": {
-      color: "green.300",
+    '@container (min-width: token(sizes.xl))': {
+      color: 'green.300',
     },
-    "@media (min-width: token(sizes.2xl))": {
-      color: "red.300",
+    '@media (min-width: token(sizes.2xl))': {
+      color: 'red.300',
     },
-  });
+  })
   ```
 
 - Updated dependencies [24ee49a5]
@@ -2075,14 +2032,14 @@
 - 8c76cd0f: - Fix issue where `hideBelow` breakpoints are inclusive of the specified breakpoints
 
   ```jsx
-  css({ hideBelow: "lg" });
+  css({ hideBelow: 'lg' })
   // => @media screen and (max-width: 63.9975em) { background: red; }
   ```
 
   - Support arbitrary breakpoints in `hideBelow` and `hideFrom` utilities
 
   ```jsx
-  css({ hideFrom: "800px" });
+  css({ hideFrom: '800px' })
   // => @media screen and (min-width: 800px) { background: red; }
   ```
 
@@ -2168,10 +2125,10 @@
 
   ```ts
   const button = defineSlotRecipe({
-    className: "button",
-    slots: ["root", "icon", "label"],
+    className: 'button',
+    slots: ['root', 'icon', 'label'],
     // ...
-  });
+  })
   ```
 
   will have a default `jsx` property of: `[Button, Button.Root, Button.Icon, Button.Label]`
@@ -2228,42 +2185,42 @@
 
   ```ts
   export default defineConfig({
-    outdir: "./outdir",
+    outdir: './outdir',
     importMap: {
-      css: "#panda/styled-system/css",
-      recipes: "#panda/styled-system/recipes",
-      patterns: "#panda/styled-system/patterns",
-      jsx: "#panda/styled-system/jsx",
+      css: '#panda/styled-system/css',
+      recipes: '#panda/styled-system/recipes',
+      patterns: '#panda/styled-system/patterns',
+      jsx: '#panda/styled-system/jsx',
     },
-  });
+  })
   ```
 
   Or you could also make your outdir an actual package from your monorepo:
 
   ```ts
   export default defineConfig({
-    outdir: "../packages/styled-system",
+    outdir: '../packages/styled-system',
     importMap: {
-      css: "@monorepo/styled-system",
-      recipes: "@monorepo/styled-system",
-      patterns: "@monorepo/styled-system",
-      jsx: "@monorepo/styled-system",
+      css: '@monorepo/styled-system',
+      recipes: '@monorepo/styled-system',
+      patterns: '@monorepo/styled-system',
+      jsx: '@monorepo/styled-system',
     },
-  });
+  })
   ```
 
   Working with tsconfig paths aliases is easy:
 
   ```ts
   export default defineConfig({
-    outdir: "styled-system",
+    outdir: 'styled-system',
     importMap: {
-      css: "styled-system/css",
-      recipes: "styled-system/recipes",
-      patterns: "styled-system/patterns",
-      jsx: "styled-system/jsx",
+      css: 'styled-system/css',
+      recipes: 'styled-system/recipes',
+      patterns: 'styled-system/patterns',
+      jsx: 'styled-system/jsx',
     },
-  });
+  })
   ```
 
 - Updated dependencies [95b06bb1]
@@ -2293,13 +2250,13 @@
 - 848936e0: Allow referencing tokens with the `token()` function in media queries or any other CSS at-rule.
 
   ```js
-  import { css } from "../styled-system/css";
+  import { css } from '../styled-system/css'
 
   const className = css({
-    "@media screen and (min-width: token(sizes.4xl))": {
-      color: "green.400",
+    '@media screen and (min-width: token(sizes.4xl))': {
+      color: 'green.400',
     },
-  });
+  })
   ```
 
 - Updated dependencies [26f6982c]
@@ -2352,7 +2309,7 @@
 
   ```css
   * {
-    color: token("colors.magenta", pink);
+    color: token('colors.magenta', pink);
   }
   ```
 
@@ -2461,12 +2418,12 @@
   **Definition**
 
   ```jsx
-  import { sva } from "styled-system/css";
+  import { sva } from 'styled-system/css'
 
   const button = sva({
-    slots: ["label", "icon"],
+    slots: ['label', 'icon'],
     base: {
-      label: { color: "red", textDecoration: "underline" },
+      label: { color: 'red', textDecoration: 'underline' },
     },
     variants: {
       rounded: {
@@ -2474,33 +2431,33 @@
       },
       size: {
         sm: {
-          label: { fontSize: "sm" },
-          icon: { fontSize: "sm" },
+          label: { fontSize: 'sm' },
+          icon: { fontSize: 'sm' },
         },
         lg: {
-          label: { fontSize: "lg" },
-          icon: { fontSize: "lg", color: "pink" },
+          label: { fontSize: 'lg' },
+          icon: { fontSize: 'lg', color: 'pink' },
         },
       },
     },
     defaultVariants: {
-      size: "sm",
+      size: 'sm',
     },
-  });
+  })
   ```
 
   **Usage**
 
   ```jsx
   export function App() {
-    const btnClass = button({ size: "lg", rounded: true });
+    const btnClass = button({ size: 'lg', rounded: true })
 
     return (
       <button>
         <p class={btnClass.label}> Label</p>
         <p class={btnClass.icon}> Icon</p>
       </button>
-    );
+    )
   }
   ```
 
@@ -2549,26 +2506,26 @@
   Update the `jsx` property to be used for advanced tracking of custom pattern components.
 
   ```jsx
-  import { Circle } from "styled-system/jsx";
+  import { Circle } from 'styled-system/jsx'
   const CustomCircle = ({ children, ...props }) => {
-    return <Circle {...props}>{children}</Circle>;
-  };
+    return <Circle {...props}>{children}</Circle>
+  }
   ```
 
   To track the `CustomCircle` component, you can now use the `jsx` property.
 
   ```js
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     patterns: {
       extend: {
         circle: {
-          jsx: ["CustomCircle"],
+          jsx: ['CustomCircle'],
         },
       },
     },
-  });
+  })
   ```
 
 ### Patch Changes
@@ -2632,17 +2589,9 @@
   ```tsx
   const ComponentWithMultipleRecipes = ({ variant }) => {
     return (
-      <button
-        className={cx(
-          pinkRecipe({ variant }),
-          greenRecipe({ variant }),
-          blueRecipe({ variant }),
-        )}
-      >
-        Hello
-      </button>
-    );
-  };
+      <button className={cx(pinkRecipe({ variant }), greenRecipe({ variant }), blueRecipe({ variant }))}>Hello</button>
+    )
+  }
   ```
 
   Given a `panda.config.ts` with recipes each including a common `jsx` tag name, such as:
@@ -2709,7 +2658,7 @@
   ```ts
   staticCss: {
     recipes: {
-      button: [{ size: ["*"], shape: ["*"] }];
+      button: [{ size: ['*'], shape: ['*'] }]
     }
   }
   ```
@@ -2719,7 +2668,7 @@
   ```ts
   staticCss: {
     recipes: {
-      button: ["*"];
+      button: ['*']
     }
   }
   ```
@@ -2755,12 +2704,12 @@
 - 5b344b9c: Add support for disabling shorthand props
 
   ```ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
     shorthands: false,
-  });
+  })
   ```
 
 ### Patch Changes
@@ -2862,11 +2811,11 @@ This hook is called right before writing the codegen files to disk. You can use
 export default defineConfig({
   // ...
   hooks: {
-    "codegen:prepare": ({ artifacts, changed }) => {
+    'codegen:prepare': ({ artifacts, changed }) => {
       // do something with the emitted js/d.ts files
     },
   },
-});
+})
 ```
 
 - d5977c24: - Add a `--logfile` flag to the `panda`, `panda codegen`, `panda cssgen` and `panda debug` commands.
@@ -2883,11 +2832,11 @@ export default defineConfig({
   ```js
   module.exports = {
     plugins: {
-      "@pandacss/dev/postcss": {
-        logfile: "./logs/panda.log",
+      '@pandacss/dev/postcss': {
+        logfile: './logs/panda.log',
       },
     },
-  };
+  }
   ```
 
 - Updated dependencies [74485ef1]
@@ -2926,9 +2875,9 @@ export default defineConfig({
 
   ```ts
   css({
-    bg: "red.300/40",
-    color: "white",
-  });
+    bg: 'red.300/40',
+    color: 'white',
+  })
   ```
 
   This will generate:
@@ -2936,11 +2885,7 @@ export default defineConfig({
   ```css
   @layer utilities {
     .bg_red\.300\/40 {
-      --mix-background: color-mix(
-        in srgb,
-        var(--colors-red-300) 40%,
-        transparent
-      );
+      --mix-background: color-mix(in srgb, var(--colors-red-300) 40%, transparent);
       background: var(--mix-background, var(--colors-red-300));
     }
 
@@ -2964,21 +2909,21 @@ export default defineConfig({
   export default defineConfig({
     utilities: {
       background: {
-        shorthand: "bg",
-        className: "bg",
-        values: "colors",
+        shorthand: 'bg',
+        className: 'bg',
+        values: 'colors',
         transform(value, args) {
-          const mix = args.utils.colorMix(value);
+          const mix = args.utils.colorMix(value)
           // This can happen if the value format is invalid (e.g. `bg: red.300/invalid` or `bg: red.300//10`)
-          if (mix.invalid) return { background: value };
+          if (mix.invalid) return { background: value }
 
           return {
             background: mix.value,
-          };
+          }
         },
       },
     },
-  });
+  })
   ```
 
   ***
@@ -2987,21 +2932,21 @@ export default defineConfig({
   property:
 
   ```ts
-  import type { PropertyTransform } from "@pandacss/types";
+  import type { PropertyTransform } from '@pandacss/types'
 
   export const createColorMixTransform =
     (prop: string): PropertyTransform =>
     (value, args) => {
-      const mix = args.utils.colorMix(value);
-      if (mix.invalid) return { [prop]: value };
+      const mix = args.utils.colorMix(value)
+      if (mix.invalid) return { [prop]: value }
 
-      const cssVar = "--mix-" + prop;
+      const cssVar = '--mix-' + prop
 
       return {
         [cssVar]: mix.value,
         [prop]: `var(${cssVar}, ${mix.color})`,
-      };
-    };
+      }
+    }
   ```
 
   then the same utility transform as above can be written like this:
@@ -3027,24 +2972,24 @@ export default defineConfig({
     patterns: {
       hstack: {
         properties: {
-          justify: { type: "property", value: "justifyContent" },
-          gap: { type: "property", value: "gap" },
+          justify: { type: 'property', value: 'justifyContent' },
+          gap: { type: 'property', value: 'gap' },
         },
         // you can also use a token like '10'
-        defaultValues: { gap: "40px" },
+        defaultValues: { gap: '40px' },
         transform(props) {
-          const { justify, gap, ...rest } = props;
+          const { justify, gap, ...rest } = props
           return {
-            display: "flex",
-            alignItems: "center",
+            display: 'flex',
+            alignItems: 'center',
             justifyContent: justify,
             gap,
             ...rest,
-          };
+          }
         },
       },
     },
-  });
+  })
   ```
 
 - 250b4d11: ### Container Query Theme
@@ -3058,34 +3003,34 @@ export default defineConfig({
     // ...
     theme: {
       extend: {
-        containerNames: ["sidebar", "content"],
+        containerNames: ['sidebar', 'content'],
         containerSizes: {
-          xs: "40em",
-          sm: "60em",
-          md: "80em",
+          xs: '40em',
+          sm: '60em',
+          md: '80em',
         },
       },
     },
-  });
+  })
   ```
 
   The default container sizes in the `@pandacss/preset-panda` preset are shown below:
 
   ```ts
   export const containerSizes = {
-    xs: "320px",
-    sm: "384px",
-    md: "448px",
-    lg: "512px",
-    xl: "576px",
-    "2xl": "672px",
-    "3xl": "768px",
-    "4xl": "896px",
-    "5xl": "1024px",
-    "6xl": "1152px",
-    "7xl": "1280px",
-    "8xl": "1440px",
-  };
+    xs: '320px',
+    sm: '384px',
+    md: '448px',
+    lg: '512px',
+    xl: '576px',
+    '2xl': '672px',
+    '3xl': '768px',
+    '4xl': '896px',
+    '5xl': '1024px',
+    '6xl': '1152px',
+    '7xl': '1280px',
+    '8xl': '1440px',
+  }
   ```
 
   Then use them in your styles by referencing using `@<container-name>/<container-size>` syntax:
@@ -3169,10 +3114,10 @@ export default defineConfig({
   css({
     // ✅ this is fine now, will resolve to something like
     // `@container (min-width: 56em)`
-    "@container (min-width: {sizes.4xl})": {
-      color: "green",
+    '@container (min-width: {sizes.4xl})': {
+      color: 'green',
     },
-  });
+  })
   ```
 
   Fix an issue where the curly token references would not be escaped if the token path was not found.
@@ -3211,54 +3156,39 @@ export default defineConfig({
      * Called when the config is resolved, after all the presets are loaded and merged.
      * This is the first hook called, you can use it to tweak the config before the context is created.
      */
-    "config:resolved": (args: { conf: LoadConfigResult }) => MaybeAsyncReturn;
+    'config:resolved': (args: { conf: LoadConfigResult }) => MaybeAsyncReturn
     /**
      * Called when the Panda context has been created and the API is ready to be used.
      */
-    "context:created": (args: {
-      ctx: ApiInterface;
-      logger: LoggerInterface;
-    }) => void;
+    'context:created': (args: { ctx: ApiInterface; logger: LoggerInterface }) => void
     /**
      * Called when the config file or one of its dependencies (imports) has changed.
      */
-    "config:change": (args: { config: UserConfig }) => MaybeAsyncReturn;
+    'config:change': (args: { config: UserConfig }) => MaybeAsyncReturn
     /**
      * Called after reading the file content but before parsing it.
      * You can use this hook to transform the file content to a tsx-friendly syntax so that Panda's parser can parse it.
      * You can also use this hook to parse the file's content on your side using a custom parser, in this case you don't have to return anything.
      */
-    "parser:before": (args: {
-      filePath: string;
-      content: string;
-    }) => string | void;
+    'parser:before': (args: { filePath: string; content: string }) => string | void
     /**
      * Called after the file styles are extracted and processed into the resulting ParserResult object.
      * You can also use this hook to add your own extraction results from your custom parser to the ParserResult object.
      */
-    "parser:after": (args: {
-      filePath: string;
-      result: ParserResultInterface | undefined;
-    }) => void;
+    'parser:after': (args: { filePath: string; result: ParserResultInterface | undefined }) => void
     /**
      * Called after the codegen is completed
      */
-    "codegen:done": () => MaybeAsyncReturn;
+    'codegen:done': () => MaybeAsyncReturn
     /**
      * Called right before adding the design-system CSS (global, static, preflight, tokens, keyframes) to the final CSS
      * Called right before writing/injecting the final CSS (styles.css) that contains the design-system CSS and the parser CSS
      * You can use it to tweak the CSS content before it's written to disk or injected through the postcss plugin.
      */
-    "cssgen:done": (args: {
-      artifact:
-        | "global"
-        | "static"
-        | "reset"
-        | "tokens"
-        | "keyframes"
-        | "styles.css";
-      content: string;
-    }) => string | void;
+    'cssgen:done': (args: {
+      artifact: 'global' | 'static' | 'reset' | 'tokens' | 'keyframes' | 'styles.css'
+      content: string
+    }) => string | void
   }
   ```
 
@@ -3465,11 +3395,11 @@ export default defineConfig({
 - de282f60: Support token reference syntax when authoring styles object, text styles and layer styles.
 
   ```jsx
-  import { css } from "../styled-system/css";
+  import { css } from '../styled-system/css'
 
   const styles = css({
-    border: "2px solid {colors.primary}",
-  });
+    border: '2px solid {colors.primary}',
+  })
   ```
 
   This will resolve the token reference and convert it to css variables.
@@ -3489,18 +3419,18 @@ export default defineConfig({
   ```jsx
   const styles = css({
     // token reference syntax
-    border: "2px solid {colors.primary}",
+    border: '2px solid {colors.primary}',
     // token function syntax
-    border: "2px solid token(colors.primary)",
-  });
+    border: '2px solid token(colors.primary)',
+  })
   ```
 
   However, The `token(...)` syntax allows you to set a fallback value.
 
   ```jsx
   const styles = css({
-    border: "2px solid token(colors.primary, red)",
-  });
+    border: '2px solid token(colors.primary, red)',
+  })
   ```
 
 ### Patch Changes
@@ -3511,8 +3441,8 @@ export default defineConfig({
   ```jsx
   css({
     // This didn't work, but now it does
-    base: { color: "blue" },
-  });
+    base: { color: 'blue' },
+  })
   ```
 
 - Updated dependencies [59fd291c]
@@ -3571,38 +3501,38 @@ export default defineConfig({
 
   ```ts
   const card = defineRecipe({
-    className: "card",
-    base: { color: "white" },
+    className: 'card',
+    base: { color: 'white' },
     variants: {
       size: {
-        small: { fontSize: "14px" },
-        large: { fontSize: "18px" },
+        small: { fontSize: '14px' },
+        large: { fontSize: '18px' },
       },
       visual: {
-        primary: { backgroundColor: "blue" },
-        secondary: { backgroundColor: "gray" },
+        primary: { backgroundColor: 'blue' },
+        secondary: { backgroundColor: 'gray' },
       },
     },
-  });
+  })
 
   export default defineConfig({
     // ...
     staticCss: {
       recipes: {
-        card: ["*"], // this
+        card: ['*'], // this
 
         // was equivalent to:
         card: [
           // notice how `responsive: true` was implicitly added
-          { size: ["*"], responsive: true },
-          { visual: ["*"], responsive: true },
+          { size: ['*'], responsive: true },
+          { visual: ['*'], responsive: true },
         ],
 
         //   will now correctly be equivalent to:
-        card: [{ size: ["*"] }, { visual: ["*"] }],
+        card: [{ size: ['*'] }, { visual: ['*'] }],
       },
     },
-  });
+  })
   ```
 
   Here's the diff in the generated CSS:
@@ -3728,30 +3658,30 @@ export default defineConfig({
   another file, such as when using `Ark-UI` like `import { comboboxAnatomy } from '@ark-ui/anatomy'`
 
   ```ts
-  import { sva } from "../styled-system/css";
-  import { slots } from "./slots";
+  import { sva } from '../styled-system/css'
+  import { slots } from './slots'
 
   const card = sva({
     slots, // ❌ did NOT work -> ✅ will now work as expected
     base: {
       root: {
-        p: "6",
-        m: "4",
-        w: "md",
-        boxShadow: "md",
-        borderRadius: "md",
-        _dark: { bg: "#262626", color: "white" },
+        p: '6',
+        m: '4',
+        w: 'md',
+        boxShadow: 'md',
+        borderRadius: 'md',
+        _dark: { bg: '#262626', color: 'white' },
       },
       content: {
-        textStyle: "lg",
+        textStyle: 'lg',
       },
       title: {
-        textStyle: "xl",
-        fontWeight: "semibold",
-        pb: "2",
+        textStyle: 'xl',
+        fontWeight: 'semibold',
+        pb: '2',
       },
     },
-  });
+  })
   ```
 
 - 840ed66b: Fix an issue with config change detection when using a custom `config.slotRecipes[xxx].jsx` array
@@ -3808,18 +3738,18 @@ export default defineConfig({
   and suffixing with `]`, e.g. writing `[123px]` as a value will bypass the token validation.
 
   ```ts
-  import { css } from "../styled-system/css";
+  import { css } from '../styled-system/css'
 
   css({
     // @ts-expect-error TS will throw when using from strictTokens: true
-    color: "#fff",
+    color: '#fff',
     // @ts-expect-error TS will throw when using from strictTokens: true
-    width: "100px",
+    width: '100px',
 
     // ✅ but this is now allowed:
-    bgColor: "[rgb(51 155 240)]",
-    fontSize: "[12px]",
-  });
+    bgColor: '[rgb(51 155 240)]',
+    fontSize: '[12px]',
+  })
   ```
 
 ### Patch Changes
@@ -3832,8 +3762,8 @@ export default defineConfig({
     // here the content property is a valid CSS property, so Panda will try to generate the CSS for it
     // but since it's an URL, it would produce invalid CSS
     // we now check if the property value is an URL and skip it if needed
-    return <CopyButton content="https://www.buymeacoffee.com/grizzlycodes" />;
-  };
+    return <CopyButton content="https://www.buymeacoffee.com/grizzlycodes" />
+  }
   ```
 
 - d81dcbe6: - Fix an issue where recipe variants that clash with utility shorthand don't get generated due to the
@@ -3842,36 +3772,36 @@ export default defineConfig({
 - 105f74ce: Add a way to specify a recipe's `staticCss` options from inside a recipe config, e.g.:
 
   ```js
-  import { defineRecipe } from "@pandacss/dev";
+  import { defineRecipe } from '@pandacss/dev'
 
   const card = defineRecipe({
-    className: "card",
-    base: { color: "white" },
+    className: 'card',
+    base: { color: 'white' },
     variants: {
       size: {
-        small: { fontSize: "14px" },
-        large: { fontSize: "18px" },
+        small: { fontSize: '14px' },
+        large: { fontSize: '18px' },
       },
     },
-    staticCss: [{ size: ["*"] }],
-  });
+    staticCss: [{ size: ['*'] }],
+  })
   ```
 
   would be the equivalent of defining it inside the main config:
 
   ```js
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
     staticCss: {
       recipes: {
         card: {
-          size: ["*"],
+          size: ['*'],
         },
       },
     },
-  });
+  })
   ```
 
 - Updated dependencies [26e6051a]
@@ -3903,13 +3833,13 @@ export default defineConfig({
 
   ```ts
   css({
-    "@container (min-width: token(sizes.xl))": {
-      color: "green.300",
+    '@container (min-width: token(sizes.xl))': {
+      color: 'green.300',
     },
-    "@media (min-width: token(sizes.2xl))": {
-      color: "red.300",
+    '@media (min-width: token(sizes.2xl))': {
+      color: 'red.300',
     },
-  });
+  })
   ```
 
 - Updated dependencies [24ee49a5]
@@ -3961,14 +3891,14 @@ export default defineConfig({
 - 8c76cd0f: - Fix issue where `hideBelow` breakpoints are inclusive of the specified breakpoints
 
   ```jsx
-  css({ hideBelow: "lg" });
+  css({ hideBelow: 'lg' })
   // => @media screen and (max-width: 63.9975em) { background: red; }
   ```
 
   - Support arbitrary breakpoints in `hideBelow` and `hideFrom` utilities
 
   ```jsx
-  css({ hideFrom: "800px" });
+  css({ hideFrom: '800px' })
   // => @media screen and (min-width: 800px) { background: red; }
   ```
 
@@ -4054,10 +3984,10 @@ export default defineConfig({
 
   ```ts
   const button = defineSlotRecipe({
-    className: "button",
-    slots: ["root", "icon", "label"],
+    className: 'button',
+    slots: ['root', 'icon', 'label'],
     // ...
-  });
+  })
   ```
 
   will have a default `jsx` property of: `[Button, Button.Root, Button.Icon, Button.Label]`
@@ -4114,42 +4044,42 @@ export default defineConfig({
 
   ```ts
   export default defineConfig({
-    outdir: "./outdir",
+    outdir: './outdir',
     importMap: {
-      css: "#panda/styled-system/css",
-      recipes: "#panda/styled-system/recipes",
-      patterns: "#panda/styled-system/patterns",
-      jsx: "#panda/styled-system/jsx",
+      css: '#panda/styled-system/css',
+      recipes: '#panda/styled-system/recipes',
+      patterns: '#panda/styled-system/patterns',
+      jsx: '#panda/styled-system/jsx',
     },
-  });
+  })
   ```
 
   Or you could also make your outdir an actual package from your monorepo:
 
   ```ts
   export default defineConfig({
-    outdir: "../packages/styled-system",
+    outdir: '../packages/styled-system',
     importMap: {
-      css: "@monorepo/styled-system",
-      recipes: "@monorepo/styled-system",
-      patterns: "@monorepo/styled-system",
-      jsx: "@monorepo/styled-system",
+      css: '@monorepo/styled-system',
+      recipes: '@monorepo/styled-system',
+      patterns: '@monorepo/styled-system',
+      jsx: '@monorepo/styled-system',
     },
-  });
+  })
   ```
 
   Working with tsconfig paths aliases is easy:
 
   ```ts
   export default defineConfig({
-    outdir: "styled-system",
+    outdir: 'styled-system',
     importMap: {
-      css: "styled-system/css",
-      recipes: "styled-system/recipes",
-      patterns: "styled-system/patterns",
-      jsx: "styled-system/jsx",
+      css: 'styled-system/css',
+      recipes: 'styled-system/recipes',
+      patterns: 'styled-system/patterns',
+      jsx: 'styled-system/jsx',
     },
-  });
+  })
   ```
 
 - Updated dependencies [95b06bb1]
@@ -4179,13 +4109,13 @@ export default defineConfig({
 - 848936e0: Allow referencing tokens with the `token()` function in media queries or any other CSS at-rule.
 
   ```js
-  import { css } from "../styled-system/css";
+  import { css } from '../styled-system/css'
 
   const className = css({
-    "@media screen and (min-width: token(sizes.4xl))": {
-      color: "green.400",
+    '@media screen and (min-width: token(sizes.4xl))': {
+      color: 'green.400',
     },
-  });
+  })
   ```
 
 - Updated dependencies [26f6982c]
@@ -4238,7 +4168,7 @@ export default defineConfig({
 
   ```css
   * {
-    color: token("colors.magenta", pink);
+    color: token('colors.magenta', pink);
   }
   ```
 
@@ -4347,12 +4277,12 @@ export default defineConfig({
   **Definition**
 
   ```jsx
-  import { sva } from "styled-system/css";
+  import { sva } from 'styled-system/css'
 
   const button = sva({
-    slots: ["label", "icon"],
+    slots: ['label', 'icon'],
     base: {
-      label: { color: "red", textDecoration: "underline" },
+      label: { color: 'red', textDecoration: 'underline' },
     },
     variants: {
       rounded: {
@@ -4360,33 +4290,33 @@ export default defineConfig({
       },
       size: {
         sm: {
-          label: { fontSize: "sm" },
-          icon: { fontSize: "sm" },
+          label: { fontSize: 'sm' },
+          icon: { fontSize: 'sm' },
         },
         lg: {
-          label: { fontSize: "lg" },
-          icon: { fontSize: "lg", color: "pink" },
+          label: { fontSize: 'lg' },
+          icon: { fontSize: 'lg', color: 'pink' },
         },
       },
     },
     defaultVariants: {
-      size: "sm",
+      size: 'sm',
     },
-  });
+  })
   ```
 
   **Usage**
 
   ```jsx
   export function App() {
-    const btnClass = button({ size: "lg", rounded: true });
+    const btnClass = button({ size: 'lg', rounded: true })
 
     return (
       <button>
         <p class={btnClass.label}> Label</p>
         <p class={btnClass.icon}> Icon</p>
       </button>
-    );
+    )
   }
   ```
 
@@ -4435,26 +4365,26 @@ export default defineConfig({
   Update the `jsx` property to be used for advanced tracking of custom pattern components.
 
   ```jsx
-  import { Circle } from "styled-system/jsx";
+  import { Circle } from 'styled-system/jsx'
   const CustomCircle = ({ children, ...props }) => {
-    return <Circle {...props}>{children}</Circle>;
-  };
+    return <Circle {...props}>{children}</Circle>
+  }
   ```
 
   To track the `CustomCircle` component, you can now use the `jsx` property.
 
   ```js
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     patterns: {
       extend: {
         circle: {
-          jsx: ["CustomCircle"],
+          jsx: ['CustomCircle'],
         },
       },
     },
-  });
+  })
   ```
 
 ### Patch Changes
@@ -4518,17 +4448,9 @@ export default defineConfig({
   ```tsx
   const ComponentWithMultipleRecipes = ({ variant }) => {
     return (
-      <button
-        className={cx(
-          pinkRecipe({ variant }),
-          greenRecipe({ variant }),
-          blueRecipe({ variant }),
-        )}
-      >
-        Hello
-      </button>
-    );
-  };
+      <button className={cx(pinkRecipe({ variant }), greenRecipe({ variant }), blueRecipe({ variant }))}>Hello</button>
+    )
+  }
   ```
 
   Given a `panda.config.ts` with recipes each including a common `jsx` tag name, such as:
@@ -4595,7 +4517,7 @@ export default defineConfig({
   ```ts
   staticCss: {
     recipes: {
-      button: [{ size: ["*"], shape: ["*"] }];
+      button: [{ size: ['*'], shape: ['*'] }]
     }
   }
   ```
@@ -4605,7 +4527,7 @@ export default defineConfig({
   ```ts
   staticCss: {
     recipes: {
-      button: ["*"];
+      button: ['*']
     }
   }
   ```
@@ -4641,12 +4563,12 @@ export default defineConfig({
 - 5b344b9c: Add support for disabling shorthand props
 
   ```ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
     shorthands: false,
-  });
+  })
   ```
 
 ### Patch Changes
@@ -4750,20 +4672,20 @@ Will now allow you to use the following syntax for token path:
   export default defaultConfig({
     conditions: {
       extend: {
-        supportHover: ["@media (hover: hover) and (pointer: fine)", "&:hover"],
+        supportHover: ['@media (hover: hover) and (pointer: fine)', '&:hover'],
       },
     },
-  });
+  })
   ```
 
   ```ts
-  import { css } from "../styled-system/css";
+  import { css } from '../styled-system/css'
 
   css({
     _supportHover: {
-      color: "red",
+      color: 'red',
     },
-  });
+  })
   ```
 
   will generate the following CSS:
@@ -4779,25 +4701,25 @@ Will now allow you to use the following syntax for token path:
 - 31071ba: Fix an issue for token names starting with '0'
 
   ```ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     theme: {
       tokens: {
         spacing: {
-          "025": {
-            value: "0.125rem",
+          '025': {
+            value: '0.125rem',
           },
         },
       },
     },
-  });
+  })
   ```
 
   and then using it like
 
   ```ts
-  css({ margin: "025" });
+  css({ margin: '025' })
   ```
 
   This would not generate the expected CSS because the parser would try to parse `025` as a number (`25`) instead of
@@ -4808,11 +4730,11 @@ Will now allow you to use the following syntax for token path:
   - Allow using multiple aliases for the same identifier for the `/css` entrypoints just like `/patterns` and `/recipes`
 
   ```ts
-  import { css } from "../styled-system/css";
-  import { css as css2 } from "../styled-system/css";
+  import { css } from '../styled-system/css'
+  import { css as css2 } from '../styled-system/css'
 
-  css({ display: "flex" });
-  css2({ flexDirection: "column" }); // this wasn't working before, now it does
+  css({ display: 'flex' })
+  css2({ flexDirection: 'column' }) // this wasn't working before, now it does
   ```
 
 - Updated dependencies [a032375]
@@ -4856,10 +4778,10 @@ Will now allow you to use the following syntax for token path:
 
   ```ts
   css({
-    padding: "1px",
-    paddingTop: "3px",
-    paddingBottom: "4px",
-  });
+    padding: '1px',
+    paddingTop: '3px',
+    paddingBottom: '4px',
+  })
   ```
 
   Will now always generate the following css:
@@ -4920,17 +4842,16 @@ Will now allow you to use the following syntax for token path:
   export default defineConfig({
     // ...
     hooks: {
-      "parser:before": ({ configure }) => {
+      'parser:before': ({ configure }) => {
         configure({
           // ignore the Select.Content entirely
-          matchTag: (tag) => tag !== "Select.Content",
+          matchTag: (tag) => tag !== 'Select.Content',
           // ...or specifically ignore the `position` property
-          matchTagProp: (tag, prop) =>
-            tag === "Select.Content" && prop !== "position",
-        });
+          matchTagProp: (tag, prop) => tag === 'Select.Content' && prop !== 'position',
+        })
       },
     },
-  });
+  })
   ```
 
 - Updated dependencies [6b829cab]
@@ -4998,9 +4919,9 @@ Will now allow you to use the following syntax for token path:
 
   ```ts
   css({
-    bg: "red.300/40",
-    color: "white",
-  });
+    bg: 'red.300/40',
+    color: 'white',
+  })
   ```
 
   This will generate:
@@ -5008,11 +4929,7 @@ Will now allow you to use the following syntax for token path:
   ```css
   @layer utilities {
     .bg_red\.300\/40 {
-      --mix-background: color-mix(
-        in srgb,
-        var(--colors-red-300) 40%,
-        transparent
-      );
+      --mix-background: color-mix(in srgb, var(--colors-red-300) 40%, transparent);
       background: var(--mix-background, var(--colors-red-300));
     }
 
@@ -5036,21 +4953,21 @@ Will now allow you to use the following syntax for token path:
   export default defineConfig({
     utilities: {
       background: {
-        shorthand: "bg",
-        className: "bg",
-        values: "colors",
+        shorthand: 'bg',
+        className: 'bg',
+        values: 'colors',
         transform(value, args) {
-          const mix = args.utils.colorMix(value);
+          const mix = args.utils.colorMix(value)
           // This can happen if the value format is invalid (e.g. `bg: red.300/invalid` or `bg: red.300//10`)
-          if (mix.invalid) return { background: value };
+          if (mix.invalid) return { background: value }
 
           return {
             background: mix.value,
-          };
+          }
         },
       },
     },
-  });
+  })
   ```
 
   ***
@@ -5059,21 +4976,21 @@ Will now allow you to use the following syntax for token path:
   property:
 
   ```ts
-  import type { PropertyTransform } from "@pandacss/types";
+  import type { PropertyTransform } from '@pandacss/types'
 
   export const createColorMixTransform =
     (prop: string): PropertyTransform =>
     (value, args) => {
-      const mix = args.utils.colorMix(value);
-      if (mix.invalid) return { [prop]: value };
+      const mix = args.utils.colorMix(value)
+      if (mix.invalid) return { [prop]: value }
 
-      const cssVar = "--mix-" + prop;
+      const cssVar = '--mix-' + prop
 
       return {
         [cssVar]: mix.value,
         [prop]: `var(${cssVar}, ${mix.color})`,
-      };
-    };
+      }
+    }
   ```
 
   then the same utility transform as above can be written like this:
@@ -5099,24 +5016,24 @@ Will now allow you to use the following syntax for token path:
     patterns: {
       hstack: {
         properties: {
-          justify: { type: "property", value: "justifyContent" },
-          gap: { type: "property", value: "gap" },
+          justify: { type: 'property', value: 'justifyContent' },
+          gap: { type: 'property', value: 'gap' },
         },
         // you can also use a token like '10'
-        defaultValues: { gap: "40px" },
+        defaultValues: { gap: '40px' },
         transform(props) {
-          const { justify, gap, ...rest } = props;
+          const { justify, gap, ...rest } = props
           return {
-            display: "flex",
-            alignItems: "center",
+            display: 'flex',
+            alignItems: 'center',
             justifyContent: justify,
             gap,
             ...rest,
-          };
+          }
         },
       },
     },
-  });
+  })
   ```
 
 - 250b4d11: ### Container Query Theme
@@ -5130,34 +5047,34 @@ Will now allow you to use the following syntax for token path:
     // ...
     theme: {
       extend: {
-        containerNames: ["sidebar", "content"],
+        containerNames: ['sidebar', 'content'],
         containerSizes: {
-          xs: "40em",
-          sm: "60em",
-          md: "80em",
+          xs: '40em',
+          sm: '60em',
+          md: '80em',
         },
       },
     },
-  });
+  })
   ```
 
   The default container sizes in the `@pandacss/preset-panda` preset are shown below:
 
   ```ts
   export const containerSizes = {
-    xs: "320px",
-    sm: "384px",
-    md: "448px",
-    lg: "512px",
-    xl: "576px",
-    "2xl": "672px",
-    "3xl": "768px",
-    "4xl": "896px",
-    "5xl": "1024px",
-    "6xl": "1152px",
-    "7xl": "1280px",
-    "8xl": "1440px",
-  };
+    xs: '320px',
+    sm: '384px',
+    md: '448px',
+    lg: '512px',
+    xl: '576px',
+    '2xl': '672px',
+    '3xl': '768px',
+    '4xl': '896px',
+    '5xl': '1024px',
+    '6xl': '1152px',
+    '7xl': '1280px',
+    '8xl': '1440px',
+  }
   ```
 
   Then use them in your styles by referencing using `@<container-name>/<container-size>` syntax:
@@ -5241,10 +5158,10 @@ Will now allow you to use the following syntax for token path:
   css({
     // ✅ this is fine now, will resolve to something like
     // `@container (min-width: 56em)`
-    "@container (min-width: {sizes.4xl})": {
-      color: "green",
+    '@container (min-width: {sizes.4xl})': {
+      color: 'green',
     },
-  });
+  })
   ```
 
   Fix an issue where the curly token references would not be escaped if the token path was not found.
@@ -5283,54 +5200,39 @@ Will now allow you to use the following syntax for token path:
      * Called when the config is resolved, after all the presets are loaded and merged.
      * This is the first hook called, you can use it to tweak the config before the context is created.
      */
-    "config:resolved": (args: { conf: LoadConfigResult }) => MaybeAsyncReturn;
+    'config:resolved': (args: { conf: LoadConfigResult }) => MaybeAsyncReturn
     /**
      * Called when the Panda context has been created and the API is ready to be used.
      */
-    "context:created": (args: {
-      ctx: ApiInterface;
-      logger: LoggerInterface;
-    }) => void;
+    'context:created': (args: { ctx: ApiInterface; logger: LoggerInterface }) => void
     /**
      * Called when the config file or one of its dependencies (imports) has changed.
      */
-    "config:change": (args: { config: UserConfig }) => MaybeAsyncReturn;
+    'config:change': (args: { config: UserConfig }) => MaybeAsyncReturn
     /**
      * Called after reading the file content but before parsing it.
      * You can use this hook to transform the file content to a tsx-friendly syntax so that Panda's parser can parse it.
      * You can also use this hook to parse the file's content on your side using a custom parser, in this case you don't have to return anything.
      */
-    "parser:before": (args: {
-      filePath: string;
-      content: string;
-    }) => string | void;
+    'parser:before': (args: { filePath: string; content: string }) => string | void
     /**
      * Called after the file styles are extracted and processed into the resulting ParserResult object.
      * You can also use this hook to add your own extraction results from your custom parser to the ParserResult object.
      */
-    "parser:after": (args: {
-      filePath: string;
-      result: ParserResultInterface | undefined;
-    }) => void;
+    'parser:after': (args: { filePath: string; result: ParserResultInterface | undefined }) => void
     /**
      * Called after the codegen is completed
      */
-    "codegen:done": () => MaybeAsyncReturn;
+    'codegen:done': () => MaybeAsyncReturn
     /**
      * Called right before adding the design-system CSS (global, static, preflight, tokens, keyframes) to the final CSS
      * Called right before writing/injecting the final CSS (styles.css) that contains the design-system CSS and the parser CSS
      * You can use it to tweak the CSS content before it's written to disk or injected through the postcss plugin.
      */
-    "cssgen:done": (args: {
-      artifact:
-        | "global"
-        | "static"
-        | "reset"
-        | "tokens"
-        | "keyframes"
-        | "styles.css";
-      content: string;
-    }) => string | void;
+    'cssgen:done': (args: {
+      artifact: 'global' | 'static' | 'reset' | 'tokens' | 'keyframes' | 'styles.css'
+      content: string
+    }) => string | void
   }
   ```
 
@@ -5537,11 +5439,11 @@ Will now allow you to use the following syntax for token path:
 - de282f60: Support token reference syntax when authoring styles object, text styles and layer styles.
 
   ```jsx
-  import { css } from "../styled-system/css";
+  import { css } from '../styled-system/css'
 
   const styles = css({
-    border: "2px solid {colors.primary}",
-  });
+    border: '2px solid {colors.primary}',
+  })
   ```
 
   This will resolve the token reference and convert it to css variables.
@@ -5561,18 +5463,18 @@ Will now allow you to use the following syntax for token path:
   ```jsx
   const styles = css({
     // token reference syntax
-    border: "2px solid {colors.primary}",
+    border: '2px solid {colors.primary}',
     // token function syntax
-    border: "2px solid token(colors.primary)",
-  });
+    border: '2px solid token(colors.primary)',
+  })
   ```
 
   However, The `token(...)` syntax allows you to set a fallback value.
 
   ```jsx
   const styles = css({
-    border: "2px solid token(colors.primary, red)",
-  });
+    border: '2px solid token(colors.primary, red)',
+  })
   ```
 
 ### Patch Changes
@@ -5583,8 +5485,8 @@ Will now allow you to use the following syntax for token path:
   ```jsx
   css({
     // This didn't work, but now it does
-    base: { color: "blue" },
-  });
+    base: { color: 'blue' },
+  })
   ```
 
 - Updated dependencies [59fd291c]
@@ -5643,38 +5545,38 @@ Will now allow you to use the following syntax for token path:
 
   ```ts
   const card = defineRecipe({
-    className: "card",
-    base: { color: "white" },
+    className: 'card',
+    base: { color: 'white' },
     variants: {
       size: {
-        small: { fontSize: "14px" },
-        large: { fontSize: "18px" },
+        small: { fontSize: '14px' },
+        large: { fontSize: '18px' },
       },
       visual: {
-        primary: { backgroundColor: "blue" },
-        secondary: { backgroundColor: "gray" },
+        primary: { backgroundColor: 'blue' },
+        secondary: { backgroundColor: 'gray' },
       },
     },
-  });
+  })
 
   export default defineConfig({
     // ...
     staticCss: {
       recipes: {
-        card: ["*"], // this
+        card: ['*'], // this
 
         // was equivalent to:
         card: [
           // notice how `responsive: true` was implicitly added
-          { size: ["*"], responsive: true },
-          { visual: ["*"], responsive: true },
+          { size: ['*'], responsive: true },
+          { visual: ['*'], responsive: true },
         ],
 
         //   will now correctly be equivalent to:
-        card: [{ size: ["*"] }, { visual: ["*"] }],
+        card: [{ size: ['*'] }, { visual: ['*'] }],
       },
     },
-  });
+  })
   ```
 
   Here's the diff in the generated CSS:
@@ -5800,30 +5702,30 @@ Will now allow you to use the following syntax for token path:
   another file, such as when using `Ark-UI` like `import { comboboxAnatomy } from '@ark-ui/anatomy'`
 
   ```ts
-  import { sva } from "../styled-system/css";
-  import { slots } from "./slots";
+  import { sva } from '../styled-system/css'
+  import { slots } from './slots'
 
   const card = sva({
     slots, // ❌ did NOT work -> ✅ will now work as expected
     base: {
       root: {
-        p: "6",
-        m: "4",
-        w: "md",
-        boxShadow: "md",
-        borderRadius: "md",
-        _dark: { bg: "#262626", color: "white" },
+        p: '6',
+        m: '4',
+        w: 'md',
+        boxShadow: 'md',
+        borderRadius: 'md',
+        _dark: { bg: '#262626', color: 'white' },
       },
       content: {
-        textStyle: "lg",
+        textStyle: 'lg',
       },
       title: {
-        textStyle: "xl",
-        fontWeight: "semibold",
-        pb: "2",
+        textStyle: 'xl',
+        fontWeight: 'semibold',
+        pb: '2',
       },
     },
-  });
+  })
   ```
 
 - 840ed66b: Fix an issue with config change detection when using a custom `config.slotRecipes[xxx].jsx` array
@@ -5880,18 +5782,18 @@ Will now allow you to use the following syntax for token path:
   and suffixing with `]`, e.g. writing `[123px]` as a value will bypass the token validation.
 
   ```ts
-  import { css } from "../styled-system/css";
+  import { css } from '../styled-system/css'
 
   css({
     // @ts-expect-error TS will throw when using from strictTokens: true
-    color: "#fff",
+    color: '#fff',
     // @ts-expect-error TS will throw when using from strictTokens: true
-    width: "100px",
+    width: '100px',
 
     // ✅ but this is now allowed:
-    bgColor: "[rgb(51 155 240)]",
-    fontSize: "[12px]",
-  });
+    bgColor: '[rgb(51 155 240)]',
+    fontSize: '[12px]',
+  })
   ```
 
 ### Patch Changes
@@ -5904,8 +5806,8 @@ Will now allow you to use the following syntax for token path:
     // here the content property is a valid CSS property, so Panda will try to generate the CSS for it
     // but since it's an URL, it would produce invalid CSS
     // we now check if the property value is an URL and skip it if needed
-    return <CopyButton content="https://www.buymeacoffee.com/grizzlycodes" />;
-  };
+    return <CopyButton content="https://www.buymeacoffee.com/grizzlycodes" />
+  }
   ```
 
 - d81dcbe6: - Fix an issue where recipe variants that clash with utility shorthand don't get generated due to the
@@ -5914,36 +5816,36 @@ Will now allow you to use the following syntax for token path:
 - 105f74ce: Add a way to specify a recipe's `staticCss` options from inside a recipe config, e.g.:
 
   ```js
-  import { defineRecipe } from "@pandacss/dev";
+  import { defineRecipe } from '@pandacss/dev'
 
   const card = defineRecipe({
-    className: "card",
-    base: { color: "white" },
+    className: 'card',
+    base: { color: 'white' },
     variants: {
       size: {
-        small: { fontSize: "14px" },
-        large: { fontSize: "18px" },
+        small: { fontSize: '14px' },
+        large: { fontSize: '18px' },
       },
     },
-    staticCss: [{ size: ["*"] }],
-  });
+    staticCss: [{ size: ['*'] }],
+  })
   ```
 
   would be the equivalent of defining it inside the main config:
 
   ```js
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
     staticCss: {
       recipes: {
         card: {
-          size: ["*"],
+          size: ['*'],
         },
       },
     },
-  });
+  })
   ```
 
 - Updated dependencies [26e6051a]
@@ -5975,13 +5877,13 @@ Will now allow you to use the following syntax for token path:
 
   ```ts
   css({
-    "@container (min-width: token(sizes.xl))": {
-      color: "green.300",
+    '@container (min-width: token(sizes.xl))': {
+      color: 'green.300',
     },
-    "@media (min-width: token(sizes.2xl))": {
-      color: "red.300",
+    '@media (min-width: token(sizes.2xl))': {
+      color: 'red.300',
     },
-  });
+  })
   ```
 
 - Updated dependencies [24ee49a5]
@@ -6033,14 +5935,14 @@ Will now allow you to use the following syntax for token path:
 - 8c76cd0f: - Fix issue where `hideBelow` breakpoints are inclusive of the specified breakpoints
 
   ```jsx
-  css({ hideBelow: "lg" });
+  css({ hideBelow: 'lg' })
   // => @media screen and (max-width: 63.9975em) { background: red; }
   ```
 
   - Support arbitrary breakpoints in `hideBelow` and `hideFrom` utilities
 
   ```jsx
-  css({ hideFrom: "800px" });
+  css({ hideFrom: '800px' })
   // => @media screen and (min-width: 800px) { background: red; }
   ```
 
@@ -6126,10 +6028,10 @@ Will now allow you to use the following syntax for token path:
 
   ```ts
   const button = defineSlotRecipe({
-    className: "button",
-    slots: ["root", "icon", "label"],
+    className: 'button',
+    slots: ['root', 'icon', 'label'],
     // ...
-  });
+  })
   ```
 
   will have a default `jsx` property of: `[Button, Button.Root, Button.Icon, Button.Label]`
@@ -6186,42 +6088,42 @@ Will now allow you to use the following syntax for token path:
 
   ```ts
   export default defineConfig({
-    outdir: "./outdir",
+    outdir: './outdir',
     importMap: {
-      css: "#panda/styled-system/css",
-      recipes: "#panda/styled-system/recipes",
-      patterns: "#panda/styled-system/patterns",
-      jsx: "#panda/styled-system/jsx",
+      css: '#panda/styled-system/css',
+      recipes: '#panda/styled-system/recipes',
+      patterns: '#panda/styled-system/patterns',
+      jsx: '#panda/styled-system/jsx',
     },
-  });
+  })
   ```
 
   Or you could also make your outdir an actual package from your monorepo:
 
   ```ts
   export default defineConfig({
-    outdir: "../packages/styled-system",
+    outdir: '../packages/styled-system',
     importMap: {
-      css: "@monorepo/styled-system",
-      recipes: "@monorepo/styled-system",
-      patterns: "@monorepo/styled-system",
-      jsx: "@monorepo/styled-system",
+      css: '@monorepo/styled-system',
+      recipes: '@monorepo/styled-system',
+      patterns: '@monorepo/styled-system',
+      jsx: '@monorepo/styled-system',
     },
-  });
+  })
   ```
 
   Working with tsconfig paths aliases is easy:
 
   ```ts
   export default defineConfig({
-    outdir: "styled-system",
+    outdir: 'styled-system',
     importMap: {
-      css: "styled-system/css",
-      recipes: "styled-system/recipes",
-      patterns: "styled-system/patterns",
-      jsx: "styled-system/jsx",
+      css: 'styled-system/css',
+      recipes: 'styled-system/recipes',
+      patterns: 'styled-system/patterns',
+      jsx: 'styled-system/jsx',
     },
-  });
+  })
   ```
 
 - Updated dependencies [95b06bb1]
@@ -6251,13 +6153,13 @@ Will now allow you to use the following syntax for token path:
 - 848936e0: Allow referencing tokens with the `token()` function in media queries or any other CSS at-rule.
 
   ```js
-  import { css } from "../styled-system/css";
+  import { css } from '../styled-system/css'
 
   const className = css({
-    "@media screen and (min-width: token(sizes.4xl))": {
-      color: "green.400",
+    '@media screen and (min-width: token(sizes.4xl))': {
+      color: 'green.400',
     },
-  });
+  })
   ```
 
 - Updated dependencies [26f6982c]
@@ -6310,7 +6212,7 @@ Will now allow you to use the following syntax for token path:
 
   ```css
   * {
-    color: token("colors.magenta", pink);
+    color: token('colors.magenta', pink);
   }
   ```
 
@@ -6419,12 +6321,12 @@ Will now allow you to use the following syntax for token path:
   **Definition**
 
   ```jsx
-  import { sva } from "styled-system/css";
+  import { sva } from 'styled-system/css'
 
   const button = sva({
-    slots: ["label", "icon"],
+    slots: ['label', 'icon'],
     base: {
-      label: { color: "red", textDecoration: "underline" },
+      label: { color: 'red', textDecoration: 'underline' },
     },
     variants: {
       rounded: {
@@ -6432,33 +6334,33 @@ Will now allow you to use the following syntax for token path:
       },
       size: {
         sm: {
-          label: { fontSize: "sm" },
-          icon: { fontSize: "sm" },
+          label: { fontSize: 'sm' },
+          icon: { fontSize: 'sm' },
         },
         lg: {
-          label: { fontSize: "lg" },
-          icon: { fontSize: "lg", color: "pink" },
+          label: { fontSize: 'lg' },
+          icon: { fontSize: 'lg', color: 'pink' },
         },
       },
     },
     defaultVariants: {
-      size: "sm",
+      size: 'sm',
     },
-  });
+  })
   ```
 
   **Usage**
 
   ```jsx
   export function App() {
-    const btnClass = button({ size: "lg", rounded: true });
+    const btnClass = button({ size: 'lg', rounded: true })
 
     return (
       <button>
         <p class={btnClass.label}> Label</p>
         <p class={btnClass.icon}> Icon</p>
       </button>
-    );
+    )
   }
   ```
 
@@ -6507,26 +6409,26 @@ Will now allow you to use the following syntax for token path:
   Update the `jsx` property to be used for advanced tracking of custom pattern components.
 
   ```jsx
-  import { Circle } from "styled-system/jsx";
+  import { Circle } from 'styled-system/jsx'
   const CustomCircle = ({ children, ...props }) => {
-    return <Circle {...props}>{children}</Circle>;
-  };
+    return <Circle {...props}>{children}</Circle>
+  }
   ```
 
   To track the `CustomCircle` component, you can now use the `jsx` property.
 
   ```js
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     patterns: {
       extend: {
         circle: {
-          jsx: ["CustomCircle"],
+          jsx: ['CustomCircle'],
         },
       },
     },
-  });
+  })
   ```
 
 ### Patch Changes
@@ -6590,17 +6492,9 @@ Will now allow you to use the following syntax for token path:
   ```tsx
   const ComponentWithMultipleRecipes = ({ variant }) => {
     return (
-      <button
-        className={cx(
-          pinkRecipe({ variant }),
-          greenRecipe({ variant }),
-          blueRecipe({ variant }),
-        )}
-      >
-        Hello
-      </button>
-    );
-  };
+      <button className={cx(pinkRecipe({ variant }), greenRecipe({ variant }), blueRecipe({ variant }))}>Hello</button>
+    )
+  }
   ```
 
   Given a `panda.config.ts` with recipes each including a common `jsx` tag name, such as:
@@ -6667,7 +6561,7 @@ Will now allow you to use the following syntax for token path:
   ```ts
   staticCss: {
     recipes: {
-      button: [{ size: ["*"], shape: ["*"] }];
+      button: [{ size: ['*'], shape: ['*'] }]
     }
   }
   ```
@@ -6677,7 +6571,7 @@ Will now allow you to use the following syntax for token path:
   ```ts
   staticCss: {
     recipes: {
-      button: ["*"];
+      button: ['*']
     }
   }
   ```
@@ -6713,12 +6607,12 @@ Will now allow you to use the following syntax for token path:
 - 5b344b9c: Add support for disabling shorthand props
 
   ```ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
     shorthands: false,
-  });
+  })
   ```
 
 ### Patch Changes
@@ -6820,11 +6714,11 @@ This hook is called right before writing the codegen files to disk. You can use
 export default defineConfig({
   // ...
   hooks: {
-    "codegen:prepare": ({ artifacts, changed }) => {
+    'codegen:prepare': ({ artifacts, changed }) => {
       // do something with the emitted js/d.ts files
     },
   },
-});
+})
 ```
 
 - d5977c24: - Add a `--logfile` flag to the `panda`, `panda codegen`, `panda cssgen` and `panda debug` commands.
@@ -6841,11 +6735,11 @@ export default defineConfig({
   ```js
   module.exports = {
     plugins: {
-      "@pandacss/dev/postcss": {
-        logfile: "./logs/panda.log",
+      '@pandacss/dev/postcss': {
+        logfile: './logs/panda.log',
       },
     },
-  };
+  }
   ```
 
 - Updated dependencies [74485ef1]
@@ -6884,9 +6778,9 @@ export default defineConfig({
 
   ```ts
   css({
-    bg: "red.300/40",
-    color: "white",
-  });
+    bg: 'red.300/40',
+    color: 'white',
+  })
   ```
 
   This will generate:
@@ -6894,11 +6788,7 @@ export default defineConfig({
   ```css
   @layer utilities {
     .bg_red\.300\/40 {
-      --mix-background: color-mix(
-        in srgb,
-        var(--colors-red-300) 40%,
-        transparent
-      );
+      --mix-background: color-mix(in srgb, var(--colors-red-300) 40%, transparent);
       background: var(--mix-background, var(--colors-red-300));
     }
 
@@ -6922,21 +6812,21 @@ export default defineConfig({
   export default defineConfig({
     utilities: {
       background: {
-        shorthand: "bg",
-        className: "bg",
-        values: "colors",
+        shorthand: 'bg',
+        className: 'bg',
+        values: 'colors',
         transform(value, args) {
-          const mix = args.utils.colorMix(value);
+          const mix = args.utils.colorMix(value)
           // This can happen if the value format is invalid (e.g. `bg: red.300/invalid` or `bg: red.300//10`)
-          if (mix.invalid) return { background: value };
+          if (mix.invalid) return { background: value }
 
           return {
             background: mix.value,
-          };
+          }
         },
       },
     },
-  });
+  })
   ```
 
   ***
@@ -6945,21 +6835,21 @@ export default defineConfig({
   property:
 
   ```ts
-  import type { PropertyTransform } from "@pandacss/types";
+  import type { PropertyTransform } from '@pandacss/types'
 
   export const createColorMixTransform =
     (prop: string): PropertyTransform =>
     (value, args) => {
-      const mix = args.utils.colorMix(value);
-      if (mix.invalid) return { [prop]: value };
+      const mix = args.utils.colorMix(value)
+      if (mix.invalid) return { [prop]: value }
 
-      const cssVar = "--mix-" + prop;
+      const cssVar = '--mix-' + prop
 
       return {
         [cssVar]: mix.value,
         [prop]: `var(${cssVar}, ${mix.color})`,
-      };
-    };
+      }
+    }
   ```
 
   then the same utility transform as above can be written like this:
@@ -6985,24 +6875,24 @@ export default defineConfig({
     patterns: {
       hstack: {
         properties: {
-          justify: { type: "property", value: "justifyContent" },
-          gap: { type: "property", value: "gap" },
+          justify: { type: 'property', value: 'justifyContent' },
+          gap: { type: 'property', value: 'gap' },
         },
         // you can also use a token like '10'
-        defaultValues: { gap: "40px" },
+        defaultValues: { gap: '40px' },
         transform(props) {
-          const { justify, gap, ...rest } = props;
+          const { justify, gap, ...rest } = props
           return {
-            display: "flex",
-            alignItems: "center",
+            display: 'flex',
+            alignItems: 'center',
             justifyContent: justify,
             gap,
             ...rest,
-          };
+          }
         },
       },
     },
-  });
+  })
   ```
 
 - 250b4d11: ### Container Query Theme
@@ -7016,34 +6906,34 @@ export default defineConfig({
     // ...
     theme: {
       extend: {
-        containerNames: ["sidebar", "content"],
+        containerNames: ['sidebar', 'content'],
         containerSizes: {
-          xs: "40em",
-          sm: "60em",
-          md: "80em",
+          xs: '40em',
+          sm: '60em',
+          md: '80em',
         },
       },
     },
-  });
+  })
   ```
 
   The default container sizes in the `@pandacss/preset-panda` preset are shown below:
 
   ```ts
   export const containerSizes = {
-    xs: "320px",
-    sm: "384px",
-    md: "448px",
-    lg: "512px",
-    xl: "576px",
-    "2xl": "672px",
-    "3xl": "768px",
-    "4xl": "896px",
-    "5xl": "1024px",
-    "6xl": "1152px",
-    "7xl": "1280px",
-    "8xl": "1440px",
-  };
+    xs: '320px',
+    sm: '384px',
+    md: '448px',
+    lg: '512px',
+    xl: '576px',
+    '2xl': '672px',
+    '3xl': '768px',
+    '4xl': '896px',
+    '5xl': '1024px',
+    '6xl': '1152px',
+    '7xl': '1280px',
+    '8xl': '1440px',
+  }
   ```
 
   Then use them in your styles by referencing using `@<container-name>/<container-size>` syntax:
@@ -7127,10 +7017,10 @@ export default defineConfig({
   css({
     // ✅ this is fine now, will resolve to something like
     // `@container (min-width: 56em)`
-    "@container (min-width: {sizes.4xl})": {
-      color: "green",
+    '@container (min-width: {sizes.4xl})': {
+      color: 'green',
     },
-  });
+  })
   ```
 
   Fix an issue where the curly token references would not be escaped if the token path was not found.
@@ -7169,54 +7059,39 @@ export default defineConfig({
      * Called when the config is resolved, after all the presets are loaded and merged.
      * This is the first hook called, you can use it to tweak the config before the context is created.
      */
-    "config:resolved": (args: { conf: LoadConfigResult }) => MaybeAsyncReturn;
+    'config:resolved': (args: { conf: LoadConfigResult }) => MaybeAsyncReturn
     /**
      * Called when the Panda context has been created and the API is ready to be used.
      */
-    "context:created": (args: {
-      ctx: ApiInterface;
-      logger: LoggerInterface;
-    }) => void;
+    'context:created': (args: { ctx: ApiInterface; logger: LoggerInterface }) => void
     /**
      * Called when the config file or one of its dependencies (imports) has changed.
      */
-    "config:change": (args: { config: UserConfig }) => MaybeAsyncReturn;
+    'config:change': (args: { config: UserConfig }) => MaybeAsyncReturn
     /**
      * Called after reading the file content but before parsing it.
      * You can use this hook to transform the file content to a tsx-friendly syntax so that Panda's parser can parse it.
      * You can also use this hook to parse the file's content on your side using a custom parser, in this case you don't have to return anything.
      */
-    "parser:before": (args: {
-      filePath: string;
-      content: string;
-    }) => string | void;
+    'parser:before': (args: { filePath: string; content: string }) => string | void
     /**
      * Called after the file styles are extracted and processed into the resulting ParserResult object.
      * You can also use this hook to add your own extraction results from your custom parser to the ParserResult object.
      */
-    "parser:after": (args: {
-      filePath: string;
-      result: ParserResultInterface | undefined;
-    }) => void;
+    'parser:after': (args: { filePath: string; result: ParserResultInterface | undefined }) => void
     /**
      * Called after the codegen is completed
      */
-    "codegen:done": () => MaybeAsyncReturn;
+    'codegen:done': () => MaybeAsyncReturn
     /**
      * Called right before adding the design-system CSS (global, static, preflight, tokens, keyframes) to the final CSS
      * Called right before writing/injecting the final CSS (styles.css) that contains the design-system CSS and the parser CSS
      * You can use it to tweak the CSS content before it's written to disk or injected through the postcss plugin.
      */
-    "cssgen:done": (args: {
-      artifact:
-        | "global"
-        | "static"
-        | "reset"
-        | "tokens"
-        | "keyframes"
-        | "styles.css";
-      content: string;
-    }) => string | void;
+    'cssgen:done': (args: {
+      artifact: 'global' | 'static' | 'reset' | 'tokens' | 'keyframes' | 'styles.css'
+      content: string
+    }) => string | void
   }
   ```
 
@@ -7423,11 +7298,11 @@ export default defineConfig({
 - de282f60: Support token reference syntax when authoring styles object, text styles and layer styles.
 
   ```jsx
-  import { css } from "../styled-system/css";
+  import { css } from '../styled-system/css'
 
   const styles = css({
-    border: "2px solid {colors.primary}",
-  });
+    border: '2px solid {colors.primary}',
+  })
   ```
 
   This will resolve the token reference and convert it to css variables.
@@ -7447,18 +7322,18 @@ export default defineConfig({
   ```jsx
   const styles = css({
     // token reference syntax
-    border: "2px solid {colors.primary}",
+    border: '2px solid {colors.primary}',
     // token function syntax
-    border: "2px solid token(colors.primary)",
-  });
+    border: '2px solid token(colors.primary)',
+  })
   ```
 
   However, The `token(...)` syntax allows you to set a fallback value.
 
   ```jsx
   const styles = css({
-    border: "2px solid token(colors.primary, red)",
-  });
+    border: '2px solid token(colors.primary, red)',
+  })
   ```
 
 ### Patch Changes
@@ -7469,8 +7344,8 @@ export default defineConfig({
   ```jsx
   css({
     // This didn't work, but now it does
-    base: { color: "blue" },
-  });
+    base: { color: 'blue' },
+  })
   ```
 
 - Updated dependencies [59fd291c]
@@ -7529,38 +7404,38 @@ export default defineConfig({
 
   ```ts
   const card = defineRecipe({
-    className: "card",
-    base: { color: "white" },
+    className: 'card',
+    base: { color: 'white' },
     variants: {
       size: {
-        small: { fontSize: "14px" },
-        large: { fontSize: "18px" },
+        small: { fontSize: '14px' },
+        large: { fontSize: '18px' },
       },
       visual: {
-        primary: { backgroundColor: "blue" },
-        secondary: { backgroundColor: "gray" },
+        primary: { backgroundColor: 'blue' },
+        secondary: { backgroundColor: 'gray' },
       },
     },
-  });
+  })
 
   export default defineConfig({
     // ...
     staticCss: {
       recipes: {
-        card: ["*"], // this
+        card: ['*'], // this
 
         // was equivalent to:
         card: [
           // notice how `responsive: true` was implicitly added
-          { size: ["*"], responsive: true },
-          { visual: ["*"], responsive: true },
+          { size: ['*'], responsive: true },
+          { visual: ['*'], responsive: true },
         ],
 
         //   will now correctly be equivalent to:
-        card: [{ size: ["*"] }, { visual: ["*"] }],
+        card: [{ size: ['*'] }, { visual: ['*'] }],
       },
     },
-  });
+  })
   ```
 
   Here's the diff in the generated CSS:
@@ -7686,30 +7561,30 @@ export default defineConfig({
   another file, such as when using `Ark-UI` like `import { comboboxAnatomy } from '@ark-ui/anatomy'`
 
   ```ts
-  import { sva } from "../styled-system/css";
-  import { slots } from "./slots";
+  import { sva } from '../styled-system/css'
+  import { slots } from './slots'
 
   const card = sva({
     slots, // ❌ did NOT work -> ✅ will now work as expected
     base: {
       root: {
-        p: "6",
-        m: "4",
-        w: "md",
-        boxShadow: "md",
-        borderRadius: "md",
-        _dark: { bg: "#262626", color: "white" },
+        p: '6',
+        m: '4',
+        w: 'md',
+        boxShadow: 'md',
+        borderRadius: 'md',
+        _dark: { bg: '#262626', color: 'white' },
       },
       content: {
-        textStyle: "lg",
+        textStyle: 'lg',
       },
       title: {
-        textStyle: "xl",
-        fontWeight: "semibold",
-        pb: "2",
+        textStyle: 'xl',
+        fontWeight: 'semibold',
+        pb: '2',
       },
     },
-  });
+  })
   ```
 
 - 840ed66b: Fix an issue with config change detection when using a custom `config.slotRecipes[xxx].jsx` array
@@ -7766,18 +7641,18 @@ export default defineConfig({
   and suffixing with `]`, e.g. writing `[123px]` as a value will bypass the token validation.
 
   ```ts
-  import { css } from "../styled-system/css";
+  import { css } from '../styled-system/css'
 
   css({
     // @ts-expect-error TS will throw when using from strictTokens: true
-    color: "#fff",
+    color: '#fff',
     // @ts-expect-error TS will throw when using from strictTokens: true
-    width: "100px",
+    width: '100px',
 
     // ✅ but this is now allowed:
-    bgColor: "[rgb(51 155 240)]",
-    fontSize: "[12px]",
-  });
+    bgColor: '[rgb(51 155 240)]',
+    fontSize: '[12px]',
+  })
   ```
 
 ### Patch Changes
@@ -7790,8 +7665,8 @@ export default defineConfig({
     // here the content property is a valid CSS property, so Panda will try to generate the CSS for it
     // but since it's an URL, it would produce invalid CSS
     // we now check if the property value is an URL and skip it if needed
-    return <CopyButton content="https://www.buymeacoffee.com/grizzlycodes" />;
-  };
+    return <CopyButton content="https://www.buymeacoffee.com/grizzlycodes" />
+  }
   ```
 
 - d81dcbe6: - Fix an issue where recipe variants that clash with utility shorthand don't get generated due to the
@@ -7800,36 +7675,36 @@ export default defineConfig({
 - 105f74ce: Add a way to specify a recipe's `staticCss` options from inside a recipe config, e.g.:
 
   ```js
-  import { defineRecipe } from "@pandacss/dev";
+  import { defineRecipe } from '@pandacss/dev'
 
   const card = defineRecipe({
-    className: "card",
-    base: { color: "white" },
+    className: 'card',
+    base: { color: 'white' },
     variants: {
       size: {
-        small: { fontSize: "14px" },
-        large: { fontSize: "18px" },
+        small: { fontSize: '14px' },
+        large: { fontSize: '18px' },
       },
     },
-    staticCss: [{ size: ["*"] }],
-  });
+    staticCss: [{ size: ['*'] }],
+  })
   ```
 
   would be the equivalent of defining it inside the main config:
 
   ```js
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
     staticCss: {
       recipes: {
         card: {
-          size: ["*"],
+          size: ['*'],
         },
       },
     },
-  });
+  })
   ```
 
 - Updated dependencies [26e6051a]
@@ -7861,13 +7736,13 @@ export default defineConfig({
 
   ```ts
   css({
-    "@container (min-width: token(sizes.xl))": {
-      color: "green.300",
+    '@container (min-width: token(sizes.xl))': {
+      color: 'green.300',
     },
-    "@media (min-width: token(sizes.2xl))": {
-      color: "red.300",
+    '@media (min-width: token(sizes.2xl))': {
+      color: 'red.300',
     },
-  });
+  })
   ```
 
 - Updated dependencies [24ee49a5]
@@ -7919,14 +7794,14 @@ export default defineConfig({
 - 8c76cd0f: - Fix issue where `hideBelow` breakpoints are inclusive of the specified breakpoints
 
   ```jsx
-  css({ hideBelow: "lg" });
+  css({ hideBelow: 'lg' })
   // => @media screen and (max-width: 63.9975em) { background: red; }
   ```
 
   - Support arbitrary breakpoints in `hideBelow` and `hideFrom` utilities
 
   ```jsx
-  css({ hideFrom: "800px" });
+  css({ hideFrom: '800px' })
   // => @media screen and (min-width: 800px) { background: red; }
   ```
 
@@ -8012,10 +7887,10 @@ export default defineConfig({
 
   ```ts
   const button = defineSlotRecipe({
-    className: "button",
-    slots: ["root", "icon", "label"],
+    className: 'button',
+    slots: ['root', 'icon', 'label'],
     // ...
-  });
+  })
   ```
 
   will have a default `jsx` property of: `[Button, Button.Root, Button.Icon, Button.Label]`
@@ -8072,42 +7947,42 @@ export default defineConfig({
 
   ```ts
   export default defineConfig({
-    outdir: "./outdir",
+    outdir: './outdir',
     importMap: {
-      css: "#panda/styled-system/css",
-      recipes: "#panda/styled-system/recipes",
-      patterns: "#panda/styled-system/patterns",
-      jsx: "#panda/styled-system/jsx",
+      css: '#panda/styled-system/css',
+      recipes: '#panda/styled-system/recipes',
+      patterns: '#panda/styled-system/patterns',
+      jsx: '#panda/styled-system/jsx',
     },
-  });
+  })
   ```
 
   Or you could also make your outdir an actual package from your monorepo:
 
   ```ts
   export default defineConfig({
-    outdir: "../packages/styled-system",
+    outdir: '../packages/styled-system',
     importMap: {
-      css: "@monorepo/styled-system",
-      recipes: "@monorepo/styled-system",
-      patterns: "@monorepo/styled-system",
-      jsx: "@monorepo/styled-system",
+      css: '@monorepo/styled-system',
+      recipes: '@monorepo/styled-system',
+      patterns: '@monorepo/styled-system',
+      jsx: '@monorepo/styled-system',
     },
-  });
+  })
   ```
 
   Working with tsconfig paths aliases is easy:
 
   ```ts
   export default defineConfig({
-    outdir: "styled-system",
+    outdir: 'styled-system',
     importMap: {
-      css: "styled-system/css",
-      recipes: "styled-system/recipes",
-      patterns: "styled-system/patterns",
-      jsx: "styled-system/jsx",
+      css: 'styled-system/css',
+      recipes: 'styled-system/recipes',
+      patterns: 'styled-system/patterns',
+      jsx: 'styled-system/jsx',
     },
-  });
+  })
   ```
 
 - Updated dependencies [95b06bb1]
@@ -8137,13 +8012,13 @@ export default defineConfig({
 - 848936e0: Allow referencing tokens with the `token()` function in media queries or any other CSS at-rule.
 
   ```js
-  import { css } from "../styled-system/css";
+  import { css } from '../styled-system/css'
 
   const className = css({
-    "@media screen and (min-width: token(sizes.4xl))": {
-      color: "green.400",
+    '@media screen and (min-width: token(sizes.4xl))': {
+      color: 'green.400',
     },
-  });
+  })
   ```
 
 - Updated dependencies [26f6982c]
@@ -8196,7 +8071,7 @@ export default defineConfig({
 
   ```css
   * {
-    color: token("colors.magenta", pink);
+    color: token('colors.magenta', pink);
   }
   ```
 
@@ -8305,12 +8180,12 @@ export default defineConfig({
   **Definition**
 
   ```jsx
-  import { sva } from "styled-system/css";
+  import { sva } from 'styled-system/css'
 
   const button = sva({
-    slots: ["label", "icon"],
+    slots: ['label', 'icon'],
     base: {
-      label: { color: "red", textDecoration: "underline" },
+      label: { color: 'red', textDecoration: 'underline' },
     },
     variants: {
       rounded: {
@@ -8318,33 +8193,33 @@ export default defineConfig({
       },
       size: {
         sm: {
-          label: { fontSize: "sm" },
-          icon: { fontSize: "sm" },
+          label: { fontSize: 'sm' },
+          icon: { fontSize: 'sm' },
         },
         lg: {
-          label: { fontSize: "lg" },
-          icon: { fontSize: "lg", color: "pink" },
+          label: { fontSize: 'lg' },
+          icon: { fontSize: 'lg', color: 'pink' },
         },
       },
     },
     defaultVariants: {
-      size: "sm",
+      size: 'sm',
     },
-  });
+  })
   ```
 
   **Usage**
 
   ```jsx
   export function App() {
-    const btnClass = button({ size: "lg", rounded: true });
+    const btnClass = button({ size: 'lg', rounded: true })
 
     return (
       <button>
         <p class={btnClass.label}> Label</p>
         <p class={btnClass.icon}> Icon</p>
       </button>
-    );
+    )
   }
   ```
 
@@ -8393,26 +8268,26 @@ export default defineConfig({
   Update the `jsx` property to be used for advanced tracking of custom pattern components.
 
   ```jsx
-  import { Circle } from "styled-system/jsx";
+  import { Circle } from 'styled-system/jsx'
   const CustomCircle = ({ children, ...props }) => {
-    return <Circle {...props}>{children}</Circle>;
-  };
+    return <Circle {...props}>{children}</Circle>
+  }
   ```
 
   To track the `CustomCircle` component, you can now use the `jsx` property.
 
   ```js
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     patterns: {
       extend: {
         circle: {
-          jsx: ["CustomCircle"],
+          jsx: ['CustomCircle'],
         },
       },
     },
-  });
+  })
   ```
 
 ### Patch Changes
@@ -8476,17 +8351,9 @@ export default defineConfig({
   ```tsx
   const ComponentWithMultipleRecipes = ({ variant }) => {
     return (
-      <button
-        className={cx(
-          pinkRecipe({ variant }),
-          greenRecipe({ variant }),
-          blueRecipe({ variant }),
-        )}
-      >
-        Hello
-      </button>
-    );
-  };
+      <button className={cx(pinkRecipe({ variant }), greenRecipe({ variant }), blueRecipe({ variant }))}>Hello</button>
+    )
+  }
   ```
 
   Given a `panda.config.ts` with recipes each including a common `jsx` tag name, such as:
@@ -8553,7 +8420,7 @@ export default defineConfig({
   ```ts
   staticCss: {
     recipes: {
-      button: [{ size: ["*"], shape: ["*"] }];
+      button: [{ size: ['*'], shape: ['*'] }]
     }
   }
   ```
@@ -8563,7 +8430,7 @@ export default defineConfig({
   ```ts
   staticCss: {
     recipes: {
-      button: ["*"];
+      button: ['*']
     }
   }
   ```
@@ -8599,12 +8466,12 @@ export default defineConfig({
 - 5b344b9c: Add support for disabling shorthand props
 
   ```ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
     shorthands: false,
-  });
+  })
   ```
 
 ### Patch Changes
diff --git a/packages/extractor/CHANGELOG.md b/packages/extractor/CHANGELOG.md
index 88d2dfc92..12e90c103 100644
--- a/packages/extractor/CHANGELOG.md
+++ b/packages/extractor/CHANGELOG.md
@@ -65,18 +65,18 @@
 - 0bf09f2: Allow using namespaced imports
 
   ```ts
-  import * as p from "styled-system/patterns";
-  import * as recipes from "styled-system/recipes";
-  import * as panda from "styled-system/css";
+  import * as p from 'styled-system/patterns'
+  import * as recipes from 'styled-system/recipes'
+  import * as panda from 'styled-system/css'
 
   // this will now be extracted
-  p.stack({ mt: "40px" });
+  p.stack({ mt: '40px' })
 
-  recipes.cardStyle({ rounded: true });
+  recipes.cardStyle({ rounded: true })
 
-  panda.css({ color: "red" });
-  panda.cva({ base: { color: "blue" } });
-  panda.sva({ base: { root: { color: "green" } } });
+  panda.css({ color: 'red' })
+  panda.cva({ base: { color: 'blue' } })
+  panda.sva({ base: { root: { color: 'green' } } })
   ```
 
   - @pandacss/shared@0.34.2
@@ -223,8 +223,8 @@
         {/* ✅ this was fine */}
         <Stack ml="4" icon={<div className="icon" />} />
       </>
-    );
-  };
+    )
+  }
   ```
 
   Now both will be fine again.
@@ -265,11 +265,11 @@
 
   ```ts
   enum Color {
-    Red = "red.400",
-    Blue = "blue.400",
+    Red = 'red.400',
+    Blue = 'blue.400',
   }
 
-  const className = css({ color: Color.Red, backgroundColor: Color["Blue"] });
+  const className = css({ color: Color.Red, backgroundColor: Color['Blue'] })
   ```
 
 ## 0.17.0
@@ -371,20 +371,20 @@
   so this will now work:
 
   ```ts
-  import { css } from "styled-system/css";
+  import { css } from 'styled-system/css'
 
   const paragraphSpacingStyle = css.raw({
-    "&:not(:first-child)": { marginBlockEnd: "1em" },
-  });
+    '&:not(:first-child)': { marginBlockEnd: '1em' },
+  })
 
   export const proseCss = css.raw({
-    maxWidth: "800px",
-    "& p": {
-      "&:not(:first-child)": { marginBlockStart: "1em" },
+    maxWidth: '800px',
+    '& p': {
+      '&:not(:first-child)': { marginBlockStart: '1em' },
     },
-    "& h1": paragraphSpacingStyle,
-    "& h2": paragraphSpacingStyle,
-  });
+    '& h1': paragraphSpacingStyle,
+    '& h2': paragraphSpacingStyle,
+  })
   ```
 
   & use ECMA preset for ts-evaluator: This means that no other globals than those that are defined in the ECMAScript
@@ -392,35 +392,35 @@
   this:
 
   ```ts
-  import { cva } from ".panda/css";
+  import { cva } from '.panda/css'
 
   const variants = () => {
     const spacingTokens = Object.entries({
-      s: "token(spacing.1)",
-      m: "token(spacing.2)",
-      l: "token(spacing.3)",
-    });
+      s: 'token(spacing.1)',
+      m: 'token(spacing.2)',
+      l: 'token(spacing.3)',
+    })
 
     const spacingProps = {
-      px: "paddingX",
-      py: "paddingY",
-    };
+      px: 'paddingX',
+      py: 'paddingY',
+    }
 
     // Generate variants programmatically
     return Object.entries(spacingProps)
       .map(([name, styleProp]) => {
         const variants = spacingTokens
           .map(([variant, token]) => ({ [variant]: { [styleProp]: token } }))
-          .reduce((_agg, kv) => ({ ..._agg, ...kv }));
+          .reduce((_agg, kv) => ({ ..._agg, ...kv }))
 
-        return { [name]: variants };
+        return { [name]: variants }
       })
-      .reduce((_agg, kv) => ({ ..._agg, ...kv }));
-  };
+      .reduce((_agg, kv) => ({ ..._agg, ...kv }))
+  }
 
   const baseStyle = cva({
     variants: variants(),
-  });
+  })
   ```
 
 ## 0.15.0
@@ -432,8 +432,8 @@
 
   ```ts
   const className = css({
-    color: ["black", undefined, "orange", "red"],
-  });
+    color: ['black', undefined, 'orange', 'red'],
+  })
   ```
 
 - 7c1ab170: Fix issue where the `satisfies` would prevent an object from being extracted
@@ -468,12 +468,8 @@
 
   ```tsx
   const CompB = ({ disabled = false }: { disabled: boolean }) => {
-    return (
-      <div className={css({ color: disabled ? "blue" : "yellow" })}>
-        Component B is disabled
-      </div>
-    );
-  };
+    return <div className={css({ color: disabled ? 'blue' : 'yellow' })}>Component B is disabled</div>
+  }
   ```
 
 ## 0.8.0
@@ -545,16 +541,11 @@
 - 21295f2e: Resolve identifier default value from parameter, code like `position` and `inset` here:
 
   ```tsx
-  export const Positioned: React.FC<PositionedProps> = ({
-    children,
-    position = "absolute",
-    inset = 0,
-    ...rest
-  }) => (
+  export const Positioned: React.FC<PositionedProps> = ({ children, position = 'absolute', inset = 0, ...rest }) => (
     <styled.div position={position} inset={inset} {...rest}>
       {children}
     </styled.div>
-  );
+  )
   ```
 
   - @pandacss/logger@0.6.0
@@ -674,16 +665,16 @@
   this was fine:
 
   ```ts
-  const aliased = "green.600";
-  const colorMap = { aliased };
-  const className = css({ color: colorMap["aliased"] });
+  const aliased = 'green.600'
+  const colorMap = { aliased }
+  const className = css({ color: colorMap['aliased'] })
   ```
 
   this was not (weirdly):
 
   ```ts
-  const color = "green.600";
-  const className = css({ color });
+  const color = 'green.600'
+  const className = css({ color })
   ```
 
 - Updated dependencies [f9247e52]
@@ -704,8 +695,8 @@
   // panda.config.ts
   export default defineConfig({
     //...
-    syntax: "template-literal",
-  });
+    syntax: 'template-literal',
+  })
   ```
 
   > For existing projects, you might need to run the `panda codegen --clean`
diff --git a/packages/generator/CHANGELOG.md b/packages/generator/CHANGELOG.md
index 3ddf4d173..3c1aff40e 100644
--- a/packages/generator/CHANGELOG.md
+++ b/packages/generator/CHANGELOG.md
@@ -11,7 +11,7 @@
   **Before**
 
   ```jsx
-  import { linkBox, linkOverlay } from "styled-system/patterns";
+  import { linkBox, linkOverlay } from 'styled-system/patterns'
 
   const App = () => {
     return (
@@ -21,36 +21,37 @@
           Link
         </a>
       </div>
-    );
-  };
+    )
+  }
   ```
 
   **After**
 
   ```jsx
-  import { css } from "styled-system/css";
-  import { linkOverlay } from "styled-system/patterns";
+  import { css } from 'styled-system/css'
+  import { linkOverlay } from 'styled-system/patterns'
 
   const App = () => {
     return (
-      <div className={css({ pos: "relative" })}>
+      <div className={css({ pos: 'relative' })}>
         <img src="https://via.placeholder.com/150" alt="placeholder" />
         <a href="#" className={linkOverlay()}>
           Link
         </a>
       </div>
-    );
-  };
+    )
+  }
   ```
 
-- 221c9a2: Add support for more typography related properties in text styles such as `fontFeatureSettings`, `fontPalette`, etc.
+- 221c9a2: Add support for more typography related properties in text styles such as `fontFeatureSettings`,
+  `fontPalette`, etc.
 
 ### Patch Changes
 
 - 0714f31: Fix issue where `mergeCss` import in `styled-system/jsx/*` could be unused.
 - 2116abe: Fix issue where `float` property did not allow inherited values (auto, initial, none, etc.)
-- c3e797e: Fix issue where `animationName` property was not connected to `theme.keyframes`, as a result, no autocompletion was
-  available.
+- c3e797e: Fix issue where `animationName` property was not connected to `theme.keyframes`, as a result, no
+  autocompletion was available.
 - 935ec86: Allow passing arrays of `SystemStyleObject` to the `css(xxx, [aaa, bbb, ccc], yyy)` fn
 
   This is useful when you are creating your own styled component and want to benefit
@@ -96,11 +97,11 @@
       ta: {
         deprecated: true,
         transform(value) {
-          return { textAlign: value };
+          return { textAlign: value }
         },
       },
     },
-  });
+  })
   ```
 
   **Deprecating a token**
@@ -110,11 +111,11 @@
     theme: {
       tokens: {
         spacing: {
-          lg: { value: "8px", deprecated: "use `8` instead" },
+          lg: { value: '8px', deprecated: 'use `8` instead' },
         },
       },
     },
-  });
+  })
   ```
 
   **Deprecating a pattern**
@@ -126,7 +127,7 @@
         deprecated: true,
       },
     },
-  });
+  })
   ```
 
   **Deprecating a recipe**
@@ -136,11 +137,11 @@
     theme: {
       recipes: {
         btn: {
-          deprecated: "will be removed in v2.0",
+          deprecated: 'will be removed in v2.0',
         },
       },
     },
-  });
+  })
   ```
 
   ### ESLint Plugin
@@ -164,28 +165,23 @@
   This makes it even easier to merge styles from multiple sources.
 
   ```tsx
-  import { Stack, styled } from "../styled-system/jsx";
+  import { Stack, styled } from '../styled-system/jsx'
 
   const HeroSection = (props) => {
     return (
-      <Stack css={[{ color: "blue.300", padding: "4" }, props.css]}>
-        <styled.div css={[{ fontSize: "2xl" }, props.hero]}>
-          Hero Section
-        </styled.div>
+      <Stack css={[{ color: 'blue.300', padding: '4' }, props.css]}>
+        <styled.div css={[{ fontSize: '2xl' }, props.hero]}>Hero Section</styled.div>
       </Stack>
-    );
-  };
+    )
+  }
 
   const App = () => {
     return (
       <>
-        <HeroSection
-          css={{ backgroundColor: "yellow.300" }}
-          hero={css.raw({ fontSize: "4xl", color: "red.300" })}
-        />
+        <HeroSection css={{ backgroundColor: 'yellow.300' }} hero={css.raw({ fontSize: '4xl', color: 'red.300' })} />
       </>
-    );
-  };
+    )
+  }
   ```
 
   should render something like:
@@ -355,21 +351,21 @@
 - 99870bb: Fix issue where setting the pattern `jsx` option with dot notation didn't work.
 
   ```jsx
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
     patterns: {
       extend: {
         grid: {
-          jsx: ["Form.Group", "Grid"],
+          jsx: ['Form.Group', 'Grid'],
         },
         stack: {
-          jsx: ["Form.Action", "Stack"],
+          jsx: ['Form.Action', 'Stack'],
         },
       },
     },
-  });
+  })
   ```
 
 - Updated dependencies [93dc9f5]
@@ -412,9 +408,9 @@
     useful when applying negative margin to child elements.
 
   ```tsx
-  <div className={flex({ spaceX: "-1" })}>
-    <div className={circle({ size: "5", bg: "red" })} />
-    <div className={circle({ size: "5", bg: "pink" })} />
+  <div className={flex({ spaceX: '-1' })}>
+    <div className={circle({ size: '5', bg: 'red' })} />
+    <div className={circle({ size: '5', bg: 'pink' })} />
   </div>
   ```
 
@@ -426,13 +422,13 @@
   ```tsx
   <div
     className={css({
-      bgGradient: "to-r",
+      bgGradient: 'to-r',
       // from
-      gradientFrom: "red",
-      gradientFromPosition: "top left",
+      gradientFrom: 'red',
+      gradientFromPosition: 'top left',
       // to
-      gradientTo: "blue",
-      gradientToPosition: "bottom right",
+      gradientTo: 'blue',
+      gradientToPosition: 'bottom right',
     })}
   />
   ```
@@ -478,7 +474,7 @@
 
   ```ts
   // panda.config.ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
@@ -487,15 +483,15 @@
       extend: {
         tokens: {
           colors: {
-            text: { value: "blue" },
+            text: { value: 'blue' },
           },
         },
         semanticTokens: {
           colors: {
             body: {
               value: {
-                base: "{colors.blue.600}",
-                _osDark: "{colors.blue.400}",
+                base: '{colors.blue.600}',
+                _osDark: '{colors.blue.400}',
               },
             },
           },
@@ -507,16 +503,16 @@
       primary: {
         tokens: {
           colors: {
-            text: { value: "red" },
+            text: { value: 'red' },
           },
         },
         semanticTokens: {
           colors: {
-            muted: { value: "{colors.red.200}" },
+            muted: { value: '{colors.red.200}' },
             body: {
               value: {
-                base: "{colors.red.600}",
-                _osDark: "{colors.red.400}",
+                base: '{colors.red.600}',
+                _osDark: '{colors.red.400}',
               },
             },
           },
@@ -525,23 +521,23 @@
       secondary: {
         tokens: {
           colors: {
-            text: { value: "blue" },
+            text: { value: 'blue' },
           },
         },
         semanticTokens: {
           colors: {
-            muted: { value: "{colors.blue.200}" },
+            muted: { value: '{colors.blue.200}' },
             body: {
               value: {
-                base: "{colors.blue.600}",
-                _osDark: "{colors.blue.400}",
+                base: '{colors.blue.600}',
+                _osDark: '{colors.blue.400}',
               },
             },
           },
         },
       },
     },
-  });
+  })
   ```
 
   ### Pregenerating themes
@@ -551,14 +547,14 @@
 
   ```ts
   // panda.config.ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
     staticCss: {
-      themes: ["primary", "secondary"],
+      themes: ['primary', 'secondary'],
     },
-  });
+  })
   ```
 
   This will generate the following CSS:
@@ -570,7 +566,7 @@
       --colors-body: var(--colors-blue-600);
     }
 
-    [data-panda-theme="primary"] {
+    [data-panda-theme='primary'] {
       --colors-text: red;
       --colors-muted: var(--colors-red-200);
       --colors-body: var(--colors-red-600);
@@ -581,7 +577,7 @@
         --colors-body: var(--colors-blue-400);
       }
 
-      [data-panda-theme="primary"] {
+      [data-panda-theme='primary'] {
         --colors-body: var(--colors-red-400);
       }
     }
@@ -612,9 +608,9 @@
   Dynamically import a theme using its name:
 
   ```ts
-  import { getTheme } from "../styled-system/themes";
+  import { getTheme } from '../styled-system/themes'
 
-  const theme = await getTheme("red");
+  const theme = await getTheme('red')
   //    ^? {
   //     name: "red";
   //     id: string;
@@ -625,10 +621,10 @@
   Inject the theme styles into the DOM:
 
   ```ts
-  import { injectTheme } from "../styled-system/themes";
+  import { injectTheme } from '../styled-system/themes'
 
-  const theme = await getTheme("red");
-  injectTheme(document.documentElement, theme); // this returns the injected style element
+  const theme = await getTheme('red')
+  injectTheme(document.documentElement, theme) // this returns the injected style element
   ```
 
   ***
@@ -637,62 +633,54 @@
 
   ```tsx
   // app/layout.tsx
-  import { Inter } from "next/font/google";
-  import { cookies } from "next/headers";
-  import { ThemeName, getTheme } from "../../styled-system/themes";
-
-  export default async function RootLayout({
-    children,
-  }: {
-    children: React.ReactNode;
-  }) {
-    const store = cookies();
-    const themeName = store.get("theme")?.value as ThemeName;
-    const theme = themeName && (await getTheme(themeName));
+  import { Inter } from 'next/font/google'
+  import { cookies } from 'next/headers'
+  import { ThemeName, getTheme } from '../../styled-system/themes'
+
+  export default async function RootLayout({ children }: { children: React.ReactNode }) {
+    const store = cookies()
+    const themeName = store.get('theme')?.value as ThemeName
+    const theme = themeName && (await getTheme(themeName))
 
     return (
       <html lang="en" data-panda-theme={themeName ? themeName : undefined}>
         {themeName && (
           <head>
-            <style
-              type="text/css"
-              id={theme.id}
-              dangerouslySetInnerHTML={{ __html: theme.css }}
-            />
+            <style type="text/css" id={theme.id} dangerouslySetInnerHTML={{ __html: theme.css }} />
           </head>
         )}
         <body>{children}</body>
       </html>
-    );
+    )
   }
 
   // app/page.tsx
-  import { getTheme, injectTheme } from "../../styled-system/themes";
+  import { getTheme, injectTheme } from '../../styled-system/themes'
 
   export default function Home() {
     return (
       <>
         <button
           onClick={async () => {
-            const current = document.documentElement.dataset.pandaTheme;
-            const next = current === "primary" ? "secondary" : "primary";
-            const theme = await getTheme(next);
-            setCookie("theme", next, 7);
-            injectTheme(document.documentElement, theme);
+            const current = document.documentElement.dataset.pandaTheme
+            const next = current === 'primary' ? 'secondary' : 'primary'
+            const theme = await getTheme(next)
+            setCookie('theme', next, 7)
+            injectTheme(document.documentElement, theme)
           }}
         >
           swap theme
         </button>
       </>
-    );
+    )
   }
 
   // Set a Cookie
   function setCookie(cName: string, cValue: any, expDays: number) {
-    let date = new Date();
-    date.setTime(date.getTime() + expDays * 24 * 60 * 60 * 1000);
-    const expires = "expires=" + date.toUTCString();
-    document.cookie = cName + "=" + cValue + "; " + expires + "; path=/";
+    let date = new Date()
+    date.setTime(date.getTime() + expDays * 24 * 60 * 60 * 1000)
+    const expires = 'expires=' + date.toUTCString()
+    document.cookie = cName + '=' + cValue + '; ' + expires + '; path=/'
   }
   ```
 
@@ -701,18 +689,18 @@
   Finally, you can create a theme contract to ensure that all themes have the same structure:
 
   ```ts
-  import { defineThemeContract } from "@pandacss/dev";
+  import { defineThemeContract } from '@pandacss/dev'
 
   const defineTheme = defineThemeContract({
     tokens: {
       colors: {
-        red: { value: "" }, // theme implementations must have a red color
+        red: { value: '' }, // theme implementations must have a red color
       },
     },
-  });
+  })
 
   defineTheme({
-    selector: ".theme-secondary",
+    selector: '.theme-secondary',
     tokens: {
       colors: {
         // ^^^^   Property 'red' is missing in type '{}' but required in type '{ red: { value: string; }; }'
@@ -721,7 +709,7 @@
         // red: { value: 'red' },
       },
     },
-  });
+  })
   ```
 
 - fabdabe: ## Changes
@@ -741,12 +729,12 @@
     theme: {
       extend: {
         colors: {
-          primary: { value: "blue" },
+          primary: { value: 'blue' },
         },
         // borderWidths: {}, // ⚠️ nothing defined here
       },
     },
-  });
+  })
   ```
 
   ```ts
@@ -757,8 +745,8 @@
 
     // ✅ after this PR, TS will not throw an error anymore as you don't have any `borderWidths` tokens
     // if you add one, this will error again (as it's supposed to)
-    borderWidths: "123px",
-  });
+    borderWidths: '123px',
+  })
   ```
 
   ## Description
@@ -785,63 +773,63 @@
   Example:
 
   ```ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
     globalVars: {
-      "--some-color": "red",
-      "--button-color": {
-        syntax: "<color>",
+      '--some-color': 'red',
+      '--button-color': {
+        syntax: '<color>',
         inherits: false,
-        initialValue: "blue",
+        initialValue: 'blue',
       },
     },
-  });
+  })
   ```
 
   > Note: Keys defined in `globalVars` will be available as a value for _every_ utilities, as they're not bound to token
   > categories.
 
   ```ts
-  import { css } from "../styled-system/css";
+  import { css } from '../styled-system/css'
 
   const className = css({
-    "--button-color": "colors.red.300",
+    '--button-color': 'colors.red.300',
     // ^^^^^^^^^^^^  will be suggested
 
-    backgroundColor: "var(--button-color)",
+    backgroundColor: 'var(--button-color)',
     //                ^^^^^^^^^^^^^^^^^^  will be suggested
-  });
+  })
   ```
 
 - 656ff02: Fix `strictPropertyValues` typings should allow for `CssVars` (either predefined from `globalVars` or any
   custom CSS variable)
 
   ```ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
     strictPropertyValues: true,
     globalVars: {
       extend: {
-        "--some-color": "red",
-        "--button-color": {
-          syntax: "<color>",
+        '--some-color': 'red',
+        '--button-color': {
+          syntax: '<color>',
           inherits: false,
-          initialValue: "blue",
+          initialValue: 'blue',
         },
       },
     },
-  });
+  })
   ```
 
   ```ts
   css({
     // ❌ was not allowed before when `strictPropertyValues` was enabled
-    display: "var(--button-color)", // ✅ will now be allowed/suggested
-  });
+    display: 'var(--button-color)', // ✅ will now be allowed/suggested
+  })
   ```
 
   If no `globalVars` are defined, any `var(--*)` will be allowed
@@ -849,8 +837,8 @@
   ```ts
   css({
     // ✅ will be allowed
-    display: "var(--xxx)",
-  });
+    display: 'var(--xxx)',
+  })
   ```
 
 - 340f4f1: Fix `Expression produces a union type that is too complex to represent` with `splitCssProps` because of
@@ -879,21 +867,21 @@
   export default defineConfig({
     semanticTokens: {
       colors: {
-        blue: { value: "blue" },
+        blue: { value: 'blue' },
         green: {
           value: {
-            base: "green",
-            _dark: "white",
+            base: 'green',
+            _dark: 'white',
           },
         },
         red: {
           value: {
-            base: "red",
+            base: 'red',
           },
         },
       },
     },
-  });
+  })
   ```
 
   This is the output of the `styled-system/token` JS token function:
@@ -922,32 +910,32 @@
   Each slot will contain a `${className}__${slotName}` class in addition to the atomic styles.
 
   ```tsx
-  import { sva } from "../styled-system/css";
+  import { sva } from '../styled-system/css'
 
   const button = sva({
-    className: "btn",
-    slots: ["root", "text"],
+    className: 'btn',
+    slots: ['root', 'text'],
     base: {
       root: {
-        bg: "blue.500",
+        bg: 'blue.500',
         _hover: {
           // v--- 🎯 this will target the `text` slot
-          "& .btn__text": {
-            color: "white",
+          '& .btn__text': {
+            color: 'white',
           },
         },
       },
     },
-  });
+  })
 
   export const App = () => {
-    const classes = button();
+    const classes = button()
     return (
       <div className={classes.root}>
         <div className={classes.text}>Click me</div>
       </div>
-    );
-  };
+    )
+  }
   ```
 
 - Updated dependencies [f2fdc48]
@@ -971,11 +959,11 @@
 - 4576a60: Fix nested `styled` factory composition
 
   ```tsx
-  import { styled } from "../styled-system/jsx";
+  import { styled } from '../styled-system/jsx'
 
-  const BasicBox = styled("div", { base: { fontSize: "10px" } });
-  const ExtendedBox1 = styled(BasicBox, { base: { fontSize: "20px" } });
-  const ExtendedBox2 = styled(ExtendedBox1, { base: { fontSize: "30px" } });
+  const BasicBox = styled('div', { base: { fontSize: '10px' } })
+  const ExtendedBox1 = styled(BasicBox, { base: { fontSize: '20px' } })
+  const ExtendedBox2 = styled(ExtendedBox1, { base: { fontSize: '30px' } })
 
   export const App = () => {
     return (
@@ -988,8 +976,8 @@
         {/* NOW: ✅ fs_30px */}
         <ExtendedBox2>text3</ExtendedBox2>
       </>
-    );
-  };
+    )
+  }
   ```
 
   - @pandacss/core@0.34.3
@@ -1010,12 +998,12 @@
   `Style` like `borderTopStyle`.
 
   ```ts
-  import { css } from "../styled-system/css";
+  import { css } from '../styled-system/css'
 
   css({
-    borderTop: "1px solid red", // ✅ will now be fine as it should be
-    borderTopStyle: "abc", // ✅ will still report a TS error
-  });
+    borderTop: '1px solid red', // ✅ will now be fine as it should be
+    borderTopStyle: 'abc', // ✅ will still report a TS error
+  })
   ```
 
   ```diff
@@ -1111,18 +1099,18 @@
 - d4942e0: Fix the color opacity modifier syntax for `semanticTokens` inside of conditions
 
   ```ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     conditions: {
-      light: ".light &",
-      dark: ".dark &",
+      light: '.light &',
+      dark: '.dark &',
     },
     theme: {
       tokens: {
         colors: {
-          blue: { 500: { value: "blue" } },
-          green: { 500: { value: "green" } },
+          blue: { 500: { value: 'blue' } },
+          green: { 500: { value: 'green' } },
         },
         opacity: {
           half: { value: 0.5 },
@@ -1132,15 +1120,15 @@
         colors: {
           secondary: {
             value: {
-              base: "red",
-              _light: "{colors.blue.500/32}", // <-- wasn't working as expected
-              _dark: "{colors.green.500/half}",
+              base: 'red',
+              _light: '{colors.blue.500/32}', // <-- wasn't working as expected
+              _dark: '{colors.green.500/half}',
             },
           },
         },
       },
     },
-  });
+  })
   ```
 
   will now correctly generate the following CSS:
@@ -1155,19 +1143,11 @@
     }
 
     .light {
-      --colors-secondary: color-mix(
-        in srgb,
-        var(--colors-blue-500) 32%,
-        transparent
-      );
+      --colors-secondary: color-mix(in srgb, var(--colors-blue-500) 32%, transparent);
     }
 
     .dark {
-      --colors-secondary: color-mix(
-        in srgb,
-        var(--colors-green-500) 50%,
-        transparent
-      );
+      --colors-secondary: color-mix(in srgb, var(--colors-green-500) 50%, transparent);
     }
   }
   ```
@@ -1208,15 +1188,15 @@
   class assigned.
 
   ```js
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     preflight: {
-      scope: ".my-scope",
-      level: "element", // 'element' | 'parent (default)'
+      scope: '.my-scope',
+      level: 'element', // 'element' | 'parent (default)'
     },
     // ...
-  });
+  })
   ```
 
   This will generate CSS that looks like:
@@ -1258,20 +1238,20 @@
   export default defaultConfig({
     conditions: {
       extend: {
-        supportHover: ["@media (hover: hover) and (pointer: fine)", "&:hover"],
+        supportHover: ['@media (hover: hover) and (pointer: fine)', '&:hover'],
       },
     },
-  });
+  })
   ```
 
   ```ts
-  import { css } from "../styled-system/css";
+  import { css } from '../styled-system/css'
 
   css({
     _supportHover: {
-      color: "red",
+      color: 'red',
     },
-  });
+  })
   ```
 
   will generate the following CSS:
@@ -1342,10 +1322,10 @@
 
   ```ts
   css({
-    padding: "1px",
-    paddingTop: "3px",
-    paddingBottom: "4px",
-  });
+    padding: '1px',
+    paddingTop: '3px',
+    paddingBottom: '4px',
+  })
   ```
 
   Will now always generate the following css:
@@ -1455,24 +1435,24 @@
     patterns: {
       hstack: {
         properties: {
-          justify: { type: "property", value: "justifyContent" },
-          gap: { type: "property", value: "gap" },
+          justify: { type: 'property', value: 'justifyContent' },
+          gap: { type: 'property', value: 'gap' },
         },
         // you can also use a token like '10'
-        defaultValues: { gap: "40px" },
+        defaultValues: { gap: '40px' },
         transform(props) {
-          const { justify, gap, ...rest } = props;
+          const { justify, gap, ...rest } = props
           return {
-            display: "flex",
-            alignItems: "center",
+            display: 'flex',
+            alignItems: 'center',
             justifyContent: justify,
             gap,
             ...rest,
-          };
+          }
         },
       },
     },
-  });
+  })
   ```
 
 ### Patch Changes
@@ -1514,54 +1494,39 @@
      * Called when the config is resolved, after all the presets are loaded and merged.
      * This is the first hook called, you can use it to tweak the config before the context is created.
      */
-    "config:resolved": (args: { conf: LoadConfigResult }) => MaybeAsyncReturn;
+    'config:resolved': (args: { conf: LoadConfigResult }) => MaybeAsyncReturn
     /**
      * Called when the Panda context has been created and the API is ready to be used.
      */
-    "context:created": (args: {
-      ctx: ApiInterface;
-      logger: LoggerInterface;
-    }) => void;
+    'context:created': (args: { ctx: ApiInterface; logger: LoggerInterface }) => void
     /**
      * Called when the config file or one of its dependencies (imports) has changed.
      */
-    "config:change": (args: { config: UserConfig }) => MaybeAsyncReturn;
+    'config:change': (args: { config: UserConfig }) => MaybeAsyncReturn
     /**
      * Called after reading the file content but before parsing it.
      * You can use this hook to transform the file content to a tsx-friendly syntax so that Panda's parser can parse it.
      * You can also use this hook to parse the file's content on your side using a custom parser, in this case you don't have to return anything.
      */
-    "parser:before": (args: {
-      filePath: string;
-      content: string;
-    }) => string | void;
+    'parser:before': (args: { filePath: string; content: string }) => string | void
     /**
      * Called after the file styles are extracted and processed into the resulting ParserResult object.
      * You can also use this hook to add your own extraction results from your custom parser to the ParserResult object.
      */
-    "parser:after": (args: {
-      filePath: string;
-      result: ParserResultInterface | undefined;
-    }) => void;
+    'parser:after': (args: { filePath: string; result: ParserResultInterface | undefined }) => void
     /**
      * Called after the codegen is completed
      */
-    "codegen:done": () => MaybeAsyncReturn;
+    'codegen:done': () => MaybeAsyncReturn
     /**
      * Called right before adding the design-system CSS (global, static, preflight, tokens, keyframes) to the final CSS
      * Called right before writing/injecting the final CSS (styles.css) that contains the design-system CSS and the parser CSS
      * You can use it to tweak the CSS content before it's written to disk or injected through the postcss plugin.
      */
-    "cssgen:done": (args: {
-      artifact:
-        | "global"
-        | "static"
-        | "reset"
-        | "tokens"
-        | "keyframes"
-        | "styles.css";
-      content: string;
-    }) => string | void;
+    'cssgen:done': (args: {
+      artifact: 'global' | 'static' | 'reset' | 'tokens' | 'keyframes' | 'styles.css'
+      content: string
+    }) => string | void
   }
   ```
 
@@ -1709,18 +1674,18 @@
 
   ```ts
   // config.strictTokens = true
-  css({ display: "flex" }); // OK, didn't throw
-  css({ display: "block" }); // OK, didn't throw
-  css({ display: "abc" }); // ❌ would throw since 'abc' is not part of predefined values of 'display' even thought there is no config token for 'abc'
+  css({ display: 'flex' }) // OK, didn't throw
+  css({ display: 'block' }) // OK, didn't throw
+  css({ display: 'abc' }) // ❌ would throw since 'abc' is not part of predefined values of 'display' even thought there is no config token for 'abc'
   ```
 
   now:
 
   ```ts
   // config.strictTokens = true
-  css({ display: "flex" }); // OK, didn't throw
-  css({ display: "block" }); // OK, didn't throw
-  css({ display: "abc" }); // ✅ will not throw there is no config token for 'abc'
+  css({ display: 'flex' }) // OK, didn't throw
+  css({ display: 'block' }) // OK, didn't throw
+  css({ display: 'abc' }) // ✅ will not throw there is no config token for 'abc'
   ```
 
   Instead, if you want the v.19.0 behavior, you can use the new `config.strictPropertyValues` option. You can combine it
@@ -1731,79 +1696,79 @@
 
   ```ts
   type StrictableProps =
-    | "alignContent"
-    | "alignItems"
-    | "alignSelf"
-    | "all"
-    | "animationComposition"
-    | "animationDirection"
-    | "animationFillMode"
-    | "appearance"
-    | "backfaceVisibility"
-    | "backgroundAttachment"
-    | "backgroundClip"
-    | "borderCollapse"
-    | "border"
-    | "borderBlock"
-    | "borderBlockEnd"
-    | "borderBlockStart"
-    | "borderBottom"
-    | "borderInline"
-    | "borderInlineEnd"
-    | "borderInlineStart"
-    | "borderLeft"
-    | "borderRight"
-    | "borderTop"
-    | "borderBlockEndStyle"
-    | "borderBlockStartStyle"
-    | "borderBlockStyle"
-    | "borderBottomStyle"
-    | "borderInlineEndStyle"
-    | "borderInlineStartStyle"
-    | "borderInlineStyle"
-    | "borderLeftStyle"
-    | "borderRightStyle"
-    | "borderTopStyle"
-    | "boxDecorationBreak"
-    | "boxSizing"
-    | "breakAfter"
-    | "breakBefore"
-    | "breakInside"
-    | "captionSide"
-    | "clear"
-    | "columnFill"
-    | "columnRuleStyle"
-    | "contentVisibility"
-    | "direction"
-    | "display"
-    | "emptyCells"
-    | "flexDirection"
-    | "flexWrap"
-    | "float"
-    | "fontKerning"
-    | "forcedColorAdjust"
-    | "isolation"
-    | "lineBreak"
-    | "mixBlendMode"
-    | "objectFit"
-    | "outlineStyle"
-    | "overflow"
-    | "overflowX"
-    | "overflowY"
-    | "overflowBlock"
-    | "overflowInline"
-    | "overflowWrap"
-    | "pointerEvents"
-    | "position"
-    | "resize"
-    | "scrollBehavior"
-    | "touchAction"
-    | "transformBox"
-    | "transformStyle"
-    | "userSelect"
-    | "visibility"
-    | "wordBreak"
-    | "writingMode";
+    | 'alignContent'
+    | 'alignItems'
+    | 'alignSelf'
+    | 'all'
+    | 'animationComposition'
+    | 'animationDirection'
+    | 'animationFillMode'
+    | 'appearance'
+    | 'backfaceVisibility'
+    | 'backgroundAttachment'
+    | 'backgroundClip'
+    | 'borderCollapse'
+    | 'border'
+    | 'borderBlock'
+    | 'borderBlockEnd'
+    | 'borderBlockStart'
+    | 'borderBottom'
+    | 'borderInline'
+    | 'borderInlineEnd'
+    | 'borderInlineStart'
+    | 'borderLeft'
+    | 'borderRight'
+    | 'borderTop'
+    | 'borderBlockEndStyle'
+    | 'borderBlockStartStyle'
+    | 'borderBlockStyle'
+    | 'borderBottomStyle'
+    | 'borderInlineEndStyle'
+    | 'borderInlineStartStyle'
+    | 'borderInlineStyle'
+    | 'borderLeftStyle'
+    | 'borderRightStyle'
+    | 'borderTopStyle'
+    | 'boxDecorationBreak'
+    | 'boxSizing'
+    | 'breakAfter'
+    | 'breakBefore'
+    | 'breakInside'
+    | 'captionSide'
+    | 'clear'
+    | 'columnFill'
+    | 'columnRuleStyle'
+    | 'contentVisibility'
+    | 'direction'
+    | 'display'
+    | 'emptyCells'
+    | 'flexDirection'
+    | 'flexWrap'
+    | 'float'
+    | 'fontKerning'
+    | 'forcedColorAdjust'
+    | 'isolation'
+    | 'lineBreak'
+    | 'mixBlendMode'
+    | 'objectFit'
+    | 'outlineStyle'
+    | 'overflow'
+    | 'overflowX'
+    | 'overflowY'
+    | 'overflowBlock'
+    | 'overflowInline'
+    | 'overflowWrap'
+    | 'pointerEvents'
+    | 'position'
+    | 'resize'
+    | 'scrollBehavior'
+    | 'touchAction'
+    | 'transformBox'
+    | 'transformStyle'
+    | 'userSelect'
+    | 'visibility'
+    | 'wordBreak'
+    | 'writingMode'
   ```
 
 - Updated dependencies [657ca5da]
@@ -1874,38 +1839,38 @@
 
   ```ts
   const card = defineRecipe({
-    className: "card",
-    base: { color: "white" },
+    className: 'card',
+    base: { color: 'white' },
     variants: {
       size: {
-        small: { fontSize: "14px" },
-        large: { fontSize: "18px" },
+        small: { fontSize: '14px' },
+        large: { fontSize: '18px' },
       },
       visual: {
-        primary: { backgroundColor: "blue" },
-        secondary: { backgroundColor: "gray" },
+        primary: { backgroundColor: 'blue' },
+        secondary: { backgroundColor: 'gray' },
       },
     },
-  });
+  })
 
   export default defineConfig({
     // ...
     staticCss: {
       recipes: {
-        card: ["*"], // this
+        card: ['*'], // this
 
         // was equivalent to:
         card: [
           // notice how `responsive: true` was implicitly added
-          { size: ["*"], responsive: true },
-          { visual: ["*"], responsive: true },
+          { size: ['*'], responsive: true },
+          { visual: ['*'], responsive: true },
         ],
 
         //   will now correctly be equivalent to:
-        card: [{ size: ["*"] }, { visual: ["*"] }],
+        card: [{ size: ['*'] }, { visual: ['*'] }],
       },
     },
-  });
+  })
   ```
 
   Here's the diff in the generated CSS:
@@ -2052,17 +2017,17 @@
 
   ```ts
   css({
-    bg: "[#3B00B9]", // ✅ was okay
+    bg: '[#3B00B9]', // ✅ was okay
     _dark: {
       // ✅ was okay
-      color: "[#3B00B9]",
+      color: '[#3B00B9]',
     },
 
     // ❌ Not okay, will be fixed in this patch
     color: {
-      _dark: "[#3B00B9]",
+      _dark: '[#3B00B9]',
     },
-  });
+  })
   ```
 
 - 647f05c9: Fix a CSS generation issue with `config.strictTokens` when using the `[xxx]` escape-hatch syntax with `!` or
@@ -2070,9 +2035,9 @@
 
   ```ts
   css({
-    borderWidth: "[2px!]",
-    width: "[2px !important]",
-  });
+    borderWidth: '[2px!]',
+    width: '[2px !important]',
+  })
   ```
 
 - Updated dependencies [8f4ce97c]
@@ -2113,18 +2078,18 @@
   and suffixing with `]`, e.g. writing `[123px]` as a value will bypass the token validation.
 
   ```ts
-  import { css } from "../styled-system/css";
+  import { css } from '../styled-system/css'
 
   css({
     // @ts-expect-error TS will throw when using from strictTokens: true
-    color: "#fff",
+    color: '#fff',
     // @ts-expect-error TS will throw when using from strictTokens: true
-    width: "100px",
+    width: '100px',
 
     // ✅ but this is now allowed:
-    bgColor: "[rgb(51 155 240)]",
-    fontSize: "[12px]",
-  });
+    bgColor: '[rgb(51 155 240)]',
+    fontSize: '[12px]',
+  })
   ```
 
 ### Patch Changes
@@ -2158,49 +2123,49 @@
 - 105f74ce: Add a way to specify a recipe's `staticCss` options from inside a recipe config, e.g.:
 
   ```js
-  import { defineRecipe } from "@pandacss/dev";
+  import { defineRecipe } from '@pandacss/dev'
 
   const card = defineRecipe({
-    className: "card",
-    base: { color: "white" },
+    className: 'card',
+    base: { color: 'white' },
     variants: {
       size: {
-        small: { fontSize: "14px" },
-        large: { fontSize: "18px" },
+        small: { fontSize: '14px' },
+        large: { fontSize: '18px' },
       },
     },
-    staticCss: [{ size: ["*"] }],
-  });
+    staticCss: [{ size: ['*'] }],
+  })
   ```
 
   would be the equivalent of defining it inside the main config:
 
   ```js
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
     staticCss: {
       recipes: {
         card: {
-          size: ["*"],
+          size: ['*'],
         },
       },
     },
-  });
+  })
   ```
 
 - 052283c2: Fix vue `styled` factory internal class merging, for example:
 
   ```vue
   <script setup>
-  import { styled } from "../styled-system/jsx";
+  import { styled } from '../styled-system/jsx'
 
-  const StyledButton = styled("button", {
+  const StyledButton = styled('button', {
     base: {
-      bgColor: "red.300",
+      bgColor: 'red.300',
     },
-  });
+  })
   </script>
   <template>
     <StyledButton id="test" class="test">
@@ -2269,18 +2234,18 @@
 
   ```ts
   // config.strictTokens = true
-  css({ display: "flex" }); // OK, didn't throw
-  css({ display: "block" }); // OK, didn't throw
-  css({ display: "abc" }); // ❌ didn't throw even though 'abc' is not a valid value for 'display'
+  css({ display: 'flex' }) // OK, didn't throw
+  css({ display: 'block' }) // OK, didn't throw
+  css({ display: 'abc' }) // ❌ didn't throw even though 'abc' is not a valid value for 'display'
   ```
 
   Now:
 
   ```ts
   // config.strictTokens = true
-  css({ display: "flex" }); // OK, didn't throw
-  css({ display: "block" }); // OK, didn't throw
-  css({ display: "abc" }); // ✅ will throw since 'abc' is not a valid value for 'display'
+  css({ display: 'flex' }) // OK, didn't throw
+  css({ display: 'block' }) // OK, didn't throw
+  css({ display: 'abc' }) // ✅ will throw since 'abc' is not a valid value for 'display'
   ```
 
 - Updated dependencies [61831040]
@@ -2339,28 +2304,22 @@
 - b7cb2073: Add a `splitCssProps` utility exported from the {outdir}/jsx entrypoint
 
   ```tsx
-  import { splitCssProps, styled } from "../styled-system/jsx";
-  import type { HTMLStyledProps } from "../styled-system/types";
+  import { splitCssProps, styled } from '../styled-system/jsx'
+  import type { HTMLStyledProps } from '../styled-system/types'
 
-  function SplitComponent({ children, ...props }: HTMLStyledProps<"div">) {
-    const [cssProps, restProps] = splitCssProps(props);
+  function SplitComponent({ children, ...props }: HTMLStyledProps<'div'>) {
+    const [cssProps, restProps] = splitCssProps(props)
     return (
-      <styled.div
-        {...restProps}
-        className={css(
-          { display: "flex", height: "20", width: "20" },
-          cssProps,
-        )}
-      >
+      <styled.div {...restProps} className={css({ display: 'flex', height: '20', width: '20' }, cssProps)}>
         {children}
       </styled.div>
-    );
+    )
   }
 
   // Usage
 
   function App() {
-    return <SplitComponent margin="2">Click me</SplitComponent>;
+    return <SplitComponent margin="2">Click me</SplitComponent>
   }
   ```
 
@@ -2453,16 +2412,16 @@
   together and the styles will be merged correctly.
 
   ```jsx
-  const Box = styled("div", {
+  const Box = styled('div', {
     base: {
-      background: "red.light",
-      color: "white",
+      background: 'red.light',
+      color: 'white',
     },
-  });
+  })
 
   const ExtendedBox = styled(Box, {
-    base: { background: "red.dark" },
-  });
+    base: { background: 'red.dark' },
+  })
 
   // <ExtendedBox> will have a background of `red.dark` and a color of `white`
   ```
@@ -2475,32 +2434,32 @@
   - CVA or Inline CVA + Config Recipe = ❌
 
   ```jsx
-  import { button } from "../styled-system/recipes";
+  import { button } from '../styled-system/recipes'
 
-  const Button = styled("div", button);
+  const Button = styled('div', button)
 
   // ❌ This will throw an error
   const ExtendedButton = styled(Button, {
-    base: { background: "red.dark" },
-  });
+    base: { background: 'red.dark' },
+  })
   ```
 
 - fbf062c6: Added a new type to extract variants out of styled components
 
   ```tsx
-  import { StyledVariantProps } from "../styled-system/jsx";
+  import { StyledVariantProps } from '../styled-system/jsx'
 
-  const Button = styled("button", {
-    base: { color: "black" },
+  const Button = styled('button', {
+    base: { color: 'black' },
     variants: {
       state: {
-        error: { color: "red" },
-        success: { color: "green" },
+        error: { color: 'red' },
+        success: { color: 'green' },
       },
     },
-  });
+  })
 
-  type ButtonVariantProps = StyledVariantProps<typeof Button>;
+  type ButtonVariantProps = StyledVariantProps<typeof Button>
   //   ^ { state?: 'error' | 'success' | undefined }
   ```
 
@@ -2602,9 +2561,9 @@
 
   ```ts
   interface FactoryOptions<TProps extends Dict> {
-    dataAttr?: boolean;
-    defaultProps?: TProps;
-    shouldForwardProp?(prop: string, variantKeys: string[]): boolean;
+    dataAttr?: boolean
+    defaultProps?: TProps
+    shouldForwardProp?(prop: string, variantKeys: string[]): boolean
   }
   ```
 
@@ -2612,16 +2571,16 @@
     This is useful for testing and debugging.
 
   ```jsx
-  import { styled } from "../styled-system/jsx";
-  import { button } from "../styled-system/recipes";
+  import { styled } from '../styled-system/jsx'
+  import { button } from '../styled-system/recipes'
 
-  const Button = styled("button", button, { dataAttr: true });
+  const Button = styled('button', button, { dataAttr: true })
 
   const App = () => (
     <Button variant="secondary" mt="10px">
       Button
     </Button>
-  );
+  )
   // Will render something like <button data-recipe="button" class="btn btn--variant_purple mt_10px">Button</button>
   ```
 
@@ -2629,17 +2588,17 @@
     override the default variants or base styles of a recipe.
 
   ```jsx
-  import { styled } from "../styled-system/jsx";
-  import { button } from "../styled-system/recipes";
+  import { styled } from '../styled-system/jsx'
+  import { button } from '../styled-system/recipes'
 
-  const Button = styled("button", button, {
+  const Button = styled('button', button, {
     defaultProps: {
-      variant: "secondary",
-      px: "10px",
+      variant: 'secondary',
+      px: '10px',
     },
-  });
+  })
 
-  const App = () => <Button>Button</Button>;
+  const App = () => <Button>Button</Button>
   // Will render something like <button class="btn btn--variant_secondary px_10px">Button</button>
   ```
 
@@ -2647,20 +2606,19 @@
     props except recipe variants and style props are forwarded.
 
   ```jsx
-  import { styled } from "../styled-system/jsx";
-  import { button } from "../styled-system/recipes";
-  import { isCssProperty } from "../styled-system/jsx";
-  import { motion, isValidMotionProp } from "framer-motion";
+  import { styled } from '../styled-system/jsx'
+  import { button } from '../styled-system/recipes'
+  import { isCssProperty } from '../styled-system/jsx'
+  import { motion, isValidMotionProp } from 'framer-motion'
 
   const StyledMotion = styled(
     motion.div,
     {},
     {
       shouldForwardProp: (prop, variantKeys) =>
-        isValidMotionProp(prop) ||
-        (!variantKeys.includes(prop) && !isCssProperty(prop)),
+        isValidMotionProp(prop) || (!variantKeys.includes(prop) && !isCssProperty(prop)),
     },
-  );
+  )
   ```
 
   - @pandacss/types@0.15.4
@@ -2683,42 +2641,42 @@
 
   ```ts
   export default defineConfig({
-    outdir: "./outdir",
+    outdir: './outdir',
     importMap: {
-      css: "#panda/styled-system/css",
-      recipes: "#panda/styled-system/recipes",
-      patterns: "#panda/styled-system/patterns",
-      jsx: "#panda/styled-system/jsx",
+      css: '#panda/styled-system/css',
+      recipes: '#panda/styled-system/recipes',
+      patterns: '#panda/styled-system/patterns',
+      jsx: '#panda/styled-system/jsx',
     },
-  });
+  })
   ```
 
   Or you could also make your outdir an actual package from your monorepo:
 
   ```ts
   export default defineConfig({
-    outdir: "../packages/styled-system",
+    outdir: '../packages/styled-system',
     importMap: {
-      css: "@monorepo/styled-system",
-      recipes: "@monorepo/styled-system",
-      patterns: "@monorepo/styled-system",
-      jsx: "@monorepo/styled-system",
+      css: '@monorepo/styled-system',
+      recipes: '@monorepo/styled-system',
+      patterns: '@monorepo/styled-system',
+      jsx: '@monorepo/styled-system',
     },
-  });
+  })
   ```
 
   Working with tsconfig paths aliases is easy:
 
   ```ts
   export default defineConfig({
-    outdir: "styled-system",
+    outdir: 'styled-system',
     importMap: {
-      css: "styled-system/css",
-      recipes: "styled-system/recipes",
-      patterns: "styled-system/patterns",
-      jsx: "styled-system/jsx",
+      css: 'styled-system/css',
+      recipes: 'styled-system/recipes',
+      patterns: 'styled-system/patterns',
+      jsx: 'styled-system/jsx',
     },
-  });
+  })
   ```
 
 - 1eb31118: Automatically allow overriding config recipe compoundVariants styles within the `styled` JSX factory,
@@ -2728,22 +2686,22 @@
 
   ```ts file="panda.config.ts"
   const button = defineRecipe({
-    className: "btn",
-    base: { color: "green", fontSize: "16px" },
+    className: 'btn',
+    base: { color: 'green', fontSize: '16px' },
     variants: {
-      size: { small: { fontSize: "14px" } },
+      size: { small: { fontSize: '14px' } },
     },
-    compoundVariants: [{ size: "small", css: { color: "blue" } }],
-  });
+    compoundVariants: [{ size: 'small', css: { color: 'blue' } }],
+  })
   ```
 
   This would previously not merge the `color` property overrides, but now it does:
 
   ```tsx file="example.tsx"
-  import { styled } from "../styled-system/jsx";
-  import { button } from "../styled-system/recipes";
+  import { styled } from '../styled-system/jsx'
+  import { button } from '../styled-system/recipes'
 
-  const Button = styled("button", button);
+  const Button = styled('button', button)
 
   function App() {
     return (
@@ -2752,7 +2710,7 @@
           Click me
         </Button>
       </>
-    );
+    )
   }
   ```
 
@@ -2931,8 +2889,8 @@
     passed in. This is to allow the `css` function to merge the styles correctly.
 
   ```tsx
-  import { css } from "../styled-system/css";
-  css({ mx: "3", paddingTop: "4" }, { mx: "10", pt: "6" }); // => mx_10 pt_6
+  import { css } from '../styled-system/css'
+  css({ mx: '3', paddingTop: '4' }, { mx: '10', pt: '6' }) // => mx_10 pt_6
   ```
 
   > ⚠️ This approach should be preferred for merging styles over the current `cx` function, which will be reverted to
@@ -2957,29 +2915,26 @@
   be merged correctly.
 
   ```tsx title="src/components/Button.tsx"
-  import { css } from "../../styled-system/css";
+  import { css } from '../../styled-system/css'
 
   export const Button = ({ css: cssProp = {}, children }) => {
-    const className = css(
-      { display: "flex", alignItem: "center", color: "black" },
-      cssProp,
-    );
-    return <button className={className}>{children}</button>;
-  };
+    const className = css({ display: 'flex', alignItem: 'center', color: 'black' }, cssProp)
+    return <button className={className}>{children}</button>
+  }
   ```
 
   Then you can use the `Button` component like this:
 
   ```tsx title="src/app/page.tsx"
-  import { css } from "../../styled-system/css";
-  import { Button, Thingy } from "./Button";
+  import { css } from '../../styled-system/css'
+  import { Button, Thingy } from './Button'
 
   export default function Page() {
     return (
-      <Button css={{ color: "pink", _hover: { color: "red" } }}>
+      <Button css={{ color: 'pink', _hover: { color: 'red' } }}>
         will result in `class="d_flex items_center text_pink hover:text_red"`
       </Button>
-    );
+    )
   }
   ```
 
@@ -2991,51 +2946,51 @@
   **Pattern Example:**
 
   ```tsx title="src/components/Button.tsx"
-  import { hstack } from "../../styled-system/patterns";
-  import { css, cva } from "../../styled-system/css";
+  import { hstack } from '../../styled-system/patterns'
+  import { css, cva } from '../../styled-system/css'
 
   export const Button = ({ css: cssProp = {}, children }) => {
     // using the flex pattern
     const hstackProps = hstack.raw({
-      border: "1px solid",
-      _hover: { color: "blue.400" },
-    });
+      border: '1px solid',
+      _hover: { color: 'blue.400' },
+    })
 
     // merging the styles
-    const className = css(hstackProps, cssProp);
+    const className = css(hstackProps, cssProp)
 
-    return <button className={className}>{children}</button>;
-  };
+    return <button className={className}>{children}</button>
+  }
   ```
 
   **CVA Example:**
 
   ```tsx title="src/components/Button.tsx"
-  import { css, cva } from "../../styled-system/css";
+  import { css, cva } from '../../styled-system/css'
 
   const buttonRecipe = cva({
-    base: { display: "flex", fontSize: "lg" },
+    base: { display: 'flex', fontSize: 'lg' },
     variants: {
       variant: {
-        primary: { color: "white", backgroundColor: "blue.500" },
+        primary: { color: 'white', backgroundColor: 'blue.500' },
       },
     },
-  });
+  })
 
   export const Button = ({ css: cssProp = {}, children }) => {
     const className = css(
       // using the button recipe
-      buttonRecipe.raw({ variant: "primary" }),
+      buttonRecipe.raw({ variant: 'primary' }),
 
       // adding style overrides (internal)
-      { _hover: { color: "blue.400" } },
+      { _hover: { color: 'blue.400' } },
 
       // adding style overrides (external)
       cssProp,
-    );
+    )
 
-    return <button className={className}>{props.children}</button>;
-  };
+    return <button className={className}>{props.children}</button>
+  }
   ```
 
 - 36fdff89: Fix bug in generated js code for atomic slot recipe produce where `splitVariantProps` didn't work without
@@ -3082,14 +3037,7 @@
   Example:
 
   ```tsx
-  <h1
-    className={cx(
-      css({ mx: "3", paddingTop: "4" }),
-      css({ mx: "10", pt: "6" }),
-    )}
-  >
-    Will result in "mx_10 pt_6"
-  </h1>
+  <h1 className={cx(css({ mx: '3', paddingTop: '4' }), css({ mx: '10', pt: '6' }))}>Will result in "mx_10 pt_6"</h1>
   ```
 
 - dfb3f85f: Add missing svg props types
@@ -3134,12 +3082,12 @@
   **Definition**
 
   ```jsx
-  import { sva } from "styled-system/css";
+  import { sva } from 'styled-system/css'
 
   const button = sva({
-    slots: ["label", "icon"],
+    slots: ['label', 'icon'],
     base: {
-      label: { color: "red", textDecoration: "underline" },
+      label: { color: 'red', textDecoration: 'underline' },
     },
     variants: {
       rounded: {
@@ -3147,33 +3095,33 @@
       },
       size: {
         sm: {
-          label: { fontSize: "sm" },
-          icon: { fontSize: "sm" },
+          label: { fontSize: 'sm' },
+          icon: { fontSize: 'sm' },
         },
         lg: {
-          label: { fontSize: "lg" },
-          icon: { fontSize: "lg", color: "pink" },
+          label: { fontSize: 'lg' },
+          icon: { fontSize: 'lg', color: 'pink' },
         },
       },
     },
     defaultVariants: {
-      size: "sm",
+      size: 'sm',
     },
-  });
+  })
   ```
 
   **Usage**
 
   ```jsx
   export function App() {
-    const btnClass = button({ size: "lg", rounded: true });
+    const btnClass = button({ size: 'lg', rounded: true })
 
     return (
       <button>
         <p class={btnClass.label}> Label</p>
         <p class={btnClass.icon}> Icon</p>
       </button>
-    );
+    )
   }
   ```
 
@@ -3238,26 +3186,26 @@
   Update the `jsx` property to be used for advanced tracking of custom pattern components.
 
   ```jsx
-  import { Circle } from "styled-system/jsx";
+  import { Circle } from 'styled-system/jsx'
   const CustomCircle = ({ children, ...props }) => {
-    return <Circle {...props}>{children}</Circle>;
-  };
+    return <Circle {...props}>{children}</Circle>
+  }
   ```
 
   To track the `CustomCircle` component, you can now use the `jsx` property.
 
   ```js
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     patterns: {
       extend: {
         circle: {
-          jsx: ["CustomCircle"],
+          jsx: ['CustomCircle'],
         },
       },
     },
-  });
+  })
   ```
 
 ### Patch Changes
@@ -3355,17 +3303,9 @@
   ```tsx
   const ComponentWithMultipleRecipes = ({ variant }) => {
     return (
-      <button
-        className={cx(
-          pinkRecipe({ variant }),
-          greenRecipe({ variant }),
-          blueRecipe({ variant }),
-        )}
-      >
-        Hello
-      </button>
-    );
-  };
+      <button className={cx(pinkRecipe({ variant }), greenRecipe({ variant }), blueRecipe({ variant }))}>Hello</button>
+    )
+  }
   ```
 
   Given a `panda.config.ts` with recipes each including a common `jsx` tag name, such as:
@@ -3449,7 +3389,7 @@
   ```ts
   staticCss: {
     recipes: {
-      button: [{ size: ["*"], shape: ["*"] }];
+      button: [{ size: ['*'], shape: ['*'] }]
     }
   }
   ```
@@ -3459,7 +3399,7 @@
   ```ts
   staticCss: {
     recipes: {
-      button: ["*"];
+      button: ['*']
     }
   }
   ```
@@ -3497,8 +3437,8 @@
   // panda.config.ts
   export default defineConfig({
     //...
-    syntax: "template-literal",
-  });
+    syntax: 'template-literal',
+  })
   ```
 
   > For existing projects, you might need to run the `panda codegen --clean`
@@ -3530,12 +3470,12 @@
 - 5b344b9c: Add support for disabling shorthand props
 
   ```ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
     shorthands: false,
-  });
+  })
   ```
 
 ### Patch Changes
@@ -3655,11 +3595,11 @@ This hook is called right before writing the codegen files to disk. You can use
 export default defineConfig({
   // ...
   hooks: {
-    "codegen:prepare": ({ artifacts, changed }) => {
+    'codegen:prepare': ({ artifacts, changed }) => {
       // do something with the emitted js/d.ts files
     },
   },
-});
+})
 ```
 
 - 49c760cd: Fix issue where responsive array in css and cva doesn't generate the correct classname
@@ -3677,11 +3617,11 @@ export default defineConfig({
   ```js
   module.exports = {
     plugins: {
-      "@pandacss/dev/postcss": {
-        logfile: "./logs/panda.log",
+      '@pandacss/dev/postcss': {
+        logfile: './logs/panda.log',
       },
     },
-  };
+  }
   ```
 
 - Updated dependencies [74485ef1]
@@ -3720,24 +3660,24 @@ export default defineConfig({
     patterns: {
       hstack: {
         properties: {
-          justify: { type: "property", value: "justifyContent" },
-          gap: { type: "property", value: "gap" },
+          justify: { type: 'property', value: 'justifyContent' },
+          gap: { type: 'property', value: 'gap' },
         },
         // you can also use a token like '10'
-        defaultValues: { gap: "40px" },
+        defaultValues: { gap: '40px' },
         transform(props) {
-          const { justify, gap, ...rest } = props;
+          const { justify, gap, ...rest } = props
           return {
-            display: "flex",
-            alignItems: "center",
+            display: 'flex',
+            alignItems: 'center',
             justifyContent: justify,
             gap,
             ...rest,
-          };
+          }
         },
       },
     },
-  });
+  })
   ```
 
 ### Patch Changes
@@ -3779,54 +3719,39 @@ export default defineConfig({
      * Called when the config is resolved, after all the presets are loaded and merged.
      * This is the first hook called, you can use it to tweak the config before the context is created.
      */
-    "config:resolved": (args: { conf: LoadConfigResult }) => MaybeAsyncReturn;
+    'config:resolved': (args: { conf: LoadConfigResult }) => MaybeAsyncReturn
     /**
      * Called when the Panda context has been created and the API is ready to be used.
      */
-    "context:created": (args: {
-      ctx: ApiInterface;
-      logger: LoggerInterface;
-    }) => void;
+    'context:created': (args: { ctx: ApiInterface; logger: LoggerInterface }) => void
     /**
      * Called when the config file or one of its dependencies (imports) has changed.
      */
-    "config:change": (args: { config: UserConfig }) => MaybeAsyncReturn;
+    'config:change': (args: { config: UserConfig }) => MaybeAsyncReturn
     /**
      * Called after reading the file content but before parsing it.
      * You can use this hook to transform the file content to a tsx-friendly syntax so that Panda's parser can parse it.
      * You can also use this hook to parse the file's content on your side using a custom parser, in this case you don't have to return anything.
      */
-    "parser:before": (args: {
-      filePath: string;
-      content: string;
-    }) => string | void;
+    'parser:before': (args: { filePath: string; content: string }) => string | void
     /**
      * Called after the file styles are extracted and processed into the resulting ParserResult object.
      * You can also use this hook to add your own extraction results from your custom parser to the ParserResult object.
      */
-    "parser:after": (args: {
-      filePath: string;
-      result: ParserResultInterface | undefined;
-    }) => void;
+    'parser:after': (args: { filePath: string; result: ParserResultInterface | undefined }) => void
     /**
      * Called after the codegen is completed
      */
-    "codegen:done": () => MaybeAsyncReturn;
+    'codegen:done': () => MaybeAsyncReturn
     /**
      * Called right before adding the design-system CSS (global, static, preflight, tokens, keyframes) to the final CSS
      * Called right before writing/injecting the final CSS (styles.css) that contains the design-system CSS and the parser CSS
      * You can use it to tweak the CSS content before it's written to disk or injected through the postcss plugin.
      */
-    "cssgen:done": (args: {
-      artifact:
-        | "global"
-        | "static"
-        | "reset"
-        | "tokens"
-        | "keyframes"
-        | "styles.css";
-      content: string;
-    }) => string | void;
+    'cssgen:done': (args: {
+      artifact: 'global' | 'static' | 'reset' | 'tokens' | 'keyframes' | 'styles.css'
+      content: string
+    }) => string | void
   }
   ```
 
@@ -3974,18 +3899,18 @@ export default defineConfig({
 
   ```ts
   // config.strictTokens = true
-  css({ display: "flex" }); // OK, didn't throw
-  css({ display: "block" }); // OK, didn't throw
-  css({ display: "abc" }); // ❌ would throw since 'abc' is not part of predefined values of 'display' even thought there is no config token for 'abc'
+  css({ display: 'flex' }) // OK, didn't throw
+  css({ display: 'block' }) // OK, didn't throw
+  css({ display: 'abc' }) // ❌ would throw since 'abc' is not part of predefined values of 'display' even thought there is no config token for 'abc'
   ```
 
   now:
 
   ```ts
   // config.strictTokens = true
-  css({ display: "flex" }); // OK, didn't throw
-  css({ display: "block" }); // OK, didn't throw
-  css({ display: "abc" }); // ✅ will not throw there is no config token for 'abc'
+  css({ display: 'flex' }) // OK, didn't throw
+  css({ display: 'block' }) // OK, didn't throw
+  css({ display: 'abc' }) // ✅ will not throw there is no config token for 'abc'
   ```
 
   Instead, if you want the v.19.0 behavior, you can use the new `config.strictPropertyValues` option. You can combine it
@@ -3996,79 +3921,79 @@ export default defineConfig({
 
   ```ts
   type StrictableProps =
-    | "alignContent"
-    | "alignItems"
-    | "alignSelf"
-    | "all"
-    | "animationComposition"
-    | "animationDirection"
-    | "animationFillMode"
-    | "appearance"
-    | "backfaceVisibility"
-    | "backgroundAttachment"
-    | "backgroundClip"
-    | "borderCollapse"
-    | "border"
-    | "borderBlock"
-    | "borderBlockEnd"
-    | "borderBlockStart"
-    | "borderBottom"
-    | "borderInline"
-    | "borderInlineEnd"
-    | "borderInlineStart"
-    | "borderLeft"
-    | "borderRight"
-    | "borderTop"
-    | "borderBlockEndStyle"
-    | "borderBlockStartStyle"
-    | "borderBlockStyle"
-    | "borderBottomStyle"
-    | "borderInlineEndStyle"
-    | "borderInlineStartStyle"
-    | "borderInlineStyle"
-    | "borderLeftStyle"
-    | "borderRightStyle"
-    | "borderTopStyle"
-    | "boxDecorationBreak"
-    | "boxSizing"
-    | "breakAfter"
-    | "breakBefore"
-    | "breakInside"
-    | "captionSide"
-    | "clear"
-    | "columnFill"
-    | "columnRuleStyle"
-    | "contentVisibility"
-    | "direction"
-    | "display"
-    | "emptyCells"
-    | "flexDirection"
-    | "flexWrap"
-    | "float"
-    | "fontKerning"
-    | "forcedColorAdjust"
-    | "isolation"
-    | "lineBreak"
-    | "mixBlendMode"
-    | "objectFit"
-    | "outlineStyle"
-    | "overflow"
-    | "overflowX"
-    | "overflowY"
-    | "overflowBlock"
-    | "overflowInline"
-    | "overflowWrap"
-    | "pointerEvents"
-    | "position"
-    | "resize"
-    | "scrollBehavior"
-    | "touchAction"
-    | "transformBox"
-    | "transformStyle"
-    | "userSelect"
-    | "visibility"
-    | "wordBreak"
-    | "writingMode";
+    | 'alignContent'
+    | 'alignItems'
+    | 'alignSelf'
+    | 'all'
+    | 'animationComposition'
+    | 'animationDirection'
+    | 'animationFillMode'
+    | 'appearance'
+    | 'backfaceVisibility'
+    | 'backgroundAttachment'
+    | 'backgroundClip'
+    | 'borderCollapse'
+    | 'border'
+    | 'borderBlock'
+    | 'borderBlockEnd'
+    | 'borderBlockStart'
+    | 'borderBottom'
+    | 'borderInline'
+    | 'borderInlineEnd'
+    | 'borderInlineStart'
+    | 'borderLeft'
+    | 'borderRight'
+    | 'borderTop'
+    | 'borderBlockEndStyle'
+    | 'borderBlockStartStyle'
+    | 'borderBlockStyle'
+    | 'borderBottomStyle'
+    | 'borderInlineEndStyle'
+    | 'borderInlineStartStyle'
+    | 'borderInlineStyle'
+    | 'borderLeftStyle'
+    | 'borderRightStyle'
+    | 'borderTopStyle'
+    | 'boxDecorationBreak'
+    | 'boxSizing'
+    | 'breakAfter'
+    | 'breakBefore'
+    | 'breakInside'
+    | 'captionSide'
+    | 'clear'
+    | 'columnFill'
+    | 'columnRuleStyle'
+    | 'contentVisibility'
+    | 'direction'
+    | 'display'
+    | 'emptyCells'
+    | 'flexDirection'
+    | 'flexWrap'
+    | 'float'
+    | 'fontKerning'
+    | 'forcedColorAdjust'
+    | 'isolation'
+    | 'lineBreak'
+    | 'mixBlendMode'
+    | 'objectFit'
+    | 'outlineStyle'
+    | 'overflow'
+    | 'overflowX'
+    | 'overflowY'
+    | 'overflowBlock'
+    | 'overflowInline'
+    | 'overflowWrap'
+    | 'pointerEvents'
+    | 'position'
+    | 'resize'
+    | 'scrollBehavior'
+    | 'touchAction'
+    | 'transformBox'
+    | 'transformStyle'
+    | 'userSelect'
+    | 'visibility'
+    | 'wordBreak'
+    | 'writingMode'
   ```
 
 - Updated dependencies [657ca5da]
@@ -4139,38 +4064,38 @@ export default defineConfig({
 
   ```ts
   const card = defineRecipe({
-    className: "card",
-    base: { color: "white" },
+    className: 'card',
+    base: { color: 'white' },
     variants: {
       size: {
-        small: { fontSize: "14px" },
-        large: { fontSize: "18px" },
+        small: { fontSize: '14px' },
+        large: { fontSize: '18px' },
       },
       visual: {
-        primary: { backgroundColor: "blue" },
-        secondary: { backgroundColor: "gray" },
+        primary: { backgroundColor: 'blue' },
+        secondary: { backgroundColor: 'gray' },
       },
     },
-  });
+  })
 
   export default defineConfig({
     // ...
     staticCss: {
       recipes: {
-        card: ["*"], // this
+        card: ['*'], // this
 
         // was equivalent to:
         card: [
           // notice how `responsive: true` was implicitly added
-          { size: ["*"], responsive: true },
-          { visual: ["*"], responsive: true },
+          { size: ['*'], responsive: true },
+          { visual: ['*'], responsive: true },
         ],
 
         //   will now correctly be equivalent to:
-        card: [{ size: ["*"] }, { visual: ["*"] }],
+        card: [{ size: ['*'] }, { visual: ['*'] }],
       },
     },
-  });
+  })
   ```
 
   Here's the diff in the generated CSS:
@@ -4317,17 +4242,17 @@ export default defineConfig({
 
   ```ts
   css({
-    bg: "[#3B00B9]", // ✅ was okay
+    bg: '[#3B00B9]', // ✅ was okay
     _dark: {
       // ✅ was okay
-      color: "[#3B00B9]",
+      color: '[#3B00B9]',
     },
 
     // ❌ Not okay, will be fixed in this patch
     color: {
-      _dark: "[#3B00B9]",
+      _dark: '[#3B00B9]',
     },
-  });
+  })
   ```
 
 - 647f05c9: Fix a CSS generation issue with `config.strictTokens` when using the `[xxx]` escape-hatch syntax with `!` or
@@ -4335,9 +4260,9 @@ export default defineConfig({
 
   ```ts
   css({
-    borderWidth: "[2px!]",
-    width: "[2px !important]",
-  });
+    borderWidth: '[2px!]',
+    width: '[2px !important]',
+  })
   ```
 
 - Updated dependencies [8f4ce97c]
@@ -4378,18 +4303,18 @@ export default defineConfig({
   and suffixing with `]`, e.g. writing `[123px]` as a value will bypass the token validation.
 
   ```ts
-  import { css } from "../styled-system/css";
+  import { css } from '../styled-system/css'
 
   css({
     // @ts-expect-error TS will throw when using from strictTokens: true
-    color: "#fff",
+    color: '#fff',
     // @ts-expect-error TS will throw when using from strictTokens: true
-    width: "100px",
+    width: '100px',
 
     // ✅ but this is now allowed:
-    bgColor: "[rgb(51 155 240)]",
-    fontSize: "[12px]",
-  });
+    bgColor: '[rgb(51 155 240)]',
+    fontSize: '[12px]',
+  })
   ```
 
 ### Patch Changes
@@ -4423,49 +4348,49 @@ export default defineConfig({
 - 105f74ce: Add a way to specify a recipe's `staticCss` options from inside a recipe config, e.g.:
 
   ```js
-  import { defineRecipe } from "@pandacss/dev";
+  import { defineRecipe } from '@pandacss/dev'
 
   const card = defineRecipe({
-    className: "card",
-    base: { color: "white" },
+    className: 'card',
+    base: { color: 'white' },
     variants: {
       size: {
-        small: { fontSize: "14px" },
-        large: { fontSize: "18px" },
+        small: { fontSize: '14px' },
+        large: { fontSize: '18px' },
       },
     },
-    staticCss: [{ size: ["*"] }],
-  });
+    staticCss: [{ size: ['*'] }],
+  })
   ```
 
   would be the equivalent of defining it inside the main config:
 
   ```js
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
     staticCss: {
       recipes: {
         card: {
-          size: ["*"],
+          size: ['*'],
         },
       },
     },
-  });
+  })
   ```
 
 - 052283c2: Fix vue `styled` factory internal class merging, for example:
 
   ```vue
   <script setup>
-  import { styled } from "../styled-system/jsx";
+  import { styled } from '../styled-system/jsx'
 
-  const StyledButton = styled("button", {
+  const StyledButton = styled('button', {
     base: {
-      bgColor: "red.300",
+      bgColor: 'red.300',
     },
-  });
+  })
   </script>
   <template>
     <StyledButton id="test" class="test">
@@ -4534,18 +4459,18 @@ export default defineConfig({
 
   ```ts
   // config.strictTokens = true
-  css({ display: "flex" }); // OK, didn't throw
-  css({ display: "block" }); // OK, didn't throw
-  css({ display: "abc" }); // ❌ didn't throw even though 'abc' is not a valid value for 'display'
+  css({ display: 'flex' }) // OK, didn't throw
+  css({ display: 'block' }) // OK, didn't throw
+  css({ display: 'abc' }) // ❌ didn't throw even though 'abc' is not a valid value for 'display'
   ```
 
   Now:
 
   ```ts
   // config.strictTokens = true
-  css({ display: "flex" }); // OK, didn't throw
-  css({ display: "block" }); // OK, didn't throw
-  css({ display: "abc" }); // ✅ will throw since 'abc' is not a valid value for 'display'
+  css({ display: 'flex' }) // OK, didn't throw
+  css({ display: 'block' }) // OK, didn't throw
+  css({ display: 'abc' }) // ✅ will throw since 'abc' is not a valid value for 'display'
   ```
 
 - Updated dependencies [61831040]
@@ -4604,28 +4529,22 @@ export default defineConfig({
 - b7cb2073: Add a `splitCssProps` utility exported from the {outdir}/jsx entrypoint
 
   ```tsx
-  import { splitCssProps, styled } from "../styled-system/jsx";
-  import type { HTMLStyledProps } from "../styled-system/types";
+  import { splitCssProps, styled } from '../styled-system/jsx'
+  import type { HTMLStyledProps } from '../styled-system/types'
 
-  function SplitComponent({ children, ...props }: HTMLStyledProps<"div">) {
-    const [cssProps, restProps] = splitCssProps(props);
+  function SplitComponent({ children, ...props }: HTMLStyledProps<'div'>) {
+    const [cssProps, restProps] = splitCssProps(props)
     return (
-      <styled.div
-        {...restProps}
-        className={css(
-          { display: "flex", height: "20", width: "20" },
-          cssProps,
-        )}
-      >
+      <styled.div {...restProps} className={css({ display: 'flex', height: '20', width: '20' }, cssProps)}>
         {children}
       </styled.div>
-    );
+    )
   }
 
   // Usage
 
   function App() {
-    return <SplitComponent margin="2">Click me</SplitComponent>;
+    return <SplitComponent margin="2">Click me</SplitComponent>
   }
   ```
 
@@ -4718,16 +4637,16 @@ export default defineConfig({
   together and the styles will be merged correctly.
 
   ```jsx
-  const Box = styled("div", {
+  const Box = styled('div', {
     base: {
-      background: "red.light",
-      color: "white",
+      background: 'red.light',
+      color: 'white',
     },
-  });
+  })
 
   const ExtendedBox = styled(Box, {
-    base: { background: "red.dark" },
-  });
+    base: { background: 'red.dark' },
+  })
 
   // <ExtendedBox> will have a background of `red.dark` and a color of `white`
   ```
@@ -4740,32 +4659,32 @@ export default defineConfig({
   - CVA or Inline CVA + Config Recipe = ❌
 
   ```jsx
-  import { button } from "../styled-system/recipes";
+  import { button } from '../styled-system/recipes'
 
-  const Button = styled("div", button);
+  const Button = styled('div', button)
 
   // ❌ This will throw an error
   const ExtendedButton = styled(Button, {
-    base: { background: "red.dark" },
-  });
+    base: { background: 'red.dark' },
+  })
   ```
 
 - fbf062c6: Added a new type to extract variants out of styled components
 
   ```tsx
-  import { StyledVariantProps } from "../styled-system/jsx";
+  import { StyledVariantProps } from '../styled-system/jsx'
 
-  const Button = styled("button", {
-    base: { color: "black" },
+  const Button = styled('button', {
+    base: { color: 'black' },
     variants: {
       state: {
-        error: { color: "red" },
-        success: { color: "green" },
+        error: { color: 'red' },
+        success: { color: 'green' },
       },
     },
-  });
+  })
 
-  type ButtonVariantProps = StyledVariantProps<typeof Button>;
+  type ButtonVariantProps = StyledVariantProps<typeof Button>
   //   ^ { state?: 'error' | 'success' | undefined }
   ```
 
@@ -4867,9 +4786,9 @@ export default defineConfig({
 
   ```ts
   interface FactoryOptions<TProps extends Dict> {
-    dataAttr?: boolean;
-    defaultProps?: TProps;
-    shouldForwardProp?(prop: string, variantKeys: string[]): boolean;
+    dataAttr?: boolean
+    defaultProps?: TProps
+    shouldForwardProp?(prop: string, variantKeys: string[]): boolean
   }
   ```
 
@@ -4877,16 +4796,16 @@ export default defineConfig({
     This is useful for testing and debugging.
 
   ```jsx
-  import { styled } from "../styled-system/jsx";
-  import { button } from "../styled-system/recipes";
+  import { styled } from '../styled-system/jsx'
+  import { button } from '../styled-system/recipes'
 
-  const Button = styled("button", button, { dataAttr: true });
+  const Button = styled('button', button, { dataAttr: true })
 
   const App = () => (
     <Button variant="secondary" mt="10px">
       Button
     </Button>
-  );
+  )
   // Will render something like <button data-recipe="button" class="btn btn--variant_purple mt_10px">Button</button>
   ```
 
@@ -4894,17 +4813,17 @@ export default defineConfig({
     override the default variants or base styles of a recipe.
 
   ```jsx
-  import { styled } from "../styled-system/jsx";
-  import { button } from "../styled-system/recipes";
+  import { styled } from '../styled-system/jsx'
+  import { button } from '../styled-system/recipes'
 
-  const Button = styled("button", button, {
+  const Button = styled('button', button, {
     defaultProps: {
-      variant: "secondary",
-      px: "10px",
+      variant: 'secondary',
+      px: '10px',
     },
-  });
+  })
 
-  const App = () => <Button>Button</Button>;
+  const App = () => <Button>Button</Button>
   // Will render something like <button class="btn btn--variant_secondary px_10px">Button</button>
   ```
 
@@ -4912,20 +4831,19 @@ export default defineConfig({
     props except recipe variants and style props are forwarded.
 
   ```jsx
-  import { styled } from "../styled-system/jsx";
-  import { button } from "../styled-system/recipes";
-  import { isCssProperty } from "../styled-system/jsx";
-  import { motion, isValidMotionProp } from "framer-motion";
+  import { styled } from '../styled-system/jsx'
+  import { button } from '../styled-system/recipes'
+  import { isCssProperty } from '../styled-system/jsx'
+  import { motion, isValidMotionProp } from 'framer-motion'
 
   const StyledMotion = styled(
     motion.div,
     {},
     {
       shouldForwardProp: (prop, variantKeys) =>
-        isValidMotionProp(prop) ||
-        (!variantKeys.includes(prop) && !isCssProperty(prop)),
+        isValidMotionProp(prop) || (!variantKeys.includes(prop) && !isCssProperty(prop)),
     },
-  );
+  )
   ```
 
   - @pandacss/types@0.15.4
@@ -4948,42 +4866,42 @@ export default defineConfig({
 
   ```ts
   export default defineConfig({
-    outdir: "./outdir",
+    outdir: './outdir',
     importMap: {
-      css: "#panda/styled-system/css",
-      recipes: "#panda/styled-system/recipes",
-      patterns: "#panda/styled-system/patterns",
-      jsx: "#panda/styled-system/jsx",
+      css: '#panda/styled-system/css',
+      recipes: '#panda/styled-system/recipes',
+      patterns: '#panda/styled-system/patterns',
+      jsx: '#panda/styled-system/jsx',
     },
-  });
+  })
   ```
 
   Or you could also make your outdir an actual package from your monorepo:
 
   ```ts
   export default defineConfig({
-    outdir: "../packages/styled-system",
+    outdir: '../packages/styled-system',
     importMap: {
-      css: "@monorepo/styled-system",
-      recipes: "@monorepo/styled-system",
-      patterns: "@monorepo/styled-system",
-      jsx: "@monorepo/styled-system",
+      css: '@monorepo/styled-system',
+      recipes: '@monorepo/styled-system',
+      patterns: '@monorepo/styled-system',
+      jsx: '@monorepo/styled-system',
     },
-  });
+  })
   ```
 
   Working with tsconfig paths aliases is easy:
 
   ```ts
   export default defineConfig({
-    outdir: "styled-system",
+    outdir: 'styled-system',
     importMap: {
-      css: "styled-system/css",
-      recipes: "styled-system/recipes",
-      patterns: "styled-system/patterns",
-      jsx: "styled-system/jsx",
+      css: 'styled-system/css',
+      recipes: 'styled-system/recipes',
+      patterns: 'styled-system/patterns',
+      jsx: 'styled-system/jsx',
     },
-  });
+  })
   ```
 
 - 1eb31118: Automatically allow overriding config recipe compoundVariants styles within the `styled` JSX factory,
@@ -4993,22 +4911,22 @@ export default defineConfig({
 
   ```ts file="panda.config.ts"
   const button = defineRecipe({
-    className: "btn",
-    base: { color: "green", fontSize: "16px" },
+    className: 'btn',
+    base: { color: 'green', fontSize: '16px' },
     variants: {
-      size: { small: { fontSize: "14px" } },
+      size: { small: { fontSize: '14px' } },
     },
-    compoundVariants: [{ size: "small", css: { color: "blue" } }],
-  });
+    compoundVariants: [{ size: 'small', css: { color: 'blue' } }],
+  })
   ```
 
   This would previously not merge the `color` property overrides, but now it does:
 
   ```tsx file="example.tsx"
-  import { styled } from "../styled-system/jsx";
-  import { button } from "../styled-system/recipes";
+  import { styled } from '../styled-system/jsx'
+  import { button } from '../styled-system/recipes'
 
-  const Button = styled("button", button);
+  const Button = styled('button', button)
 
   function App() {
     return (
@@ -5017,7 +4935,7 @@ export default defineConfig({
           Click me
         </Button>
       </>
-    );
+    )
   }
   ```
 
@@ -5196,8 +5114,8 @@ export default defineConfig({
     passed in. This is to allow the `css` function to merge the styles correctly.
 
   ```tsx
-  import { css } from "../styled-system/css";
-  css({ mx: "3", paddingTop: "4" }, { mx: "10", pt: "6" }); // => mx_10 pt_6
+  import { css } from '../styled-system/css'
+  css({ mx: '3', paddingTop: '4' }, { mx: '10', pt: '6' }) // => mx_10 pt_6
   ```
 
   > ⚠️ This approach should be preferred for merging styles over the current `cx` function, which will be reverted to
@@ -5222,29 +5140,26 @@ export default defineConfig({
   be merged correctly.
 
   ```tsx title="src/components/Button.tsx"
-  import { css } from "../../styled-system/css";
+  import { css } from '../../styled-system/css'
 
   export const Button = ({ css: cssProp = {}, children }) => {
-    const className = css(
-      { display: "flex", alignItem: "center", color: "black" },
-      cssProp,
-    );
-    return <button className={className}>{children}</button>;
-  };
+    const className = css({ display: 'flex', alignItem: 'center', color: 'black' }, cssProp)
+    return <button className={className}>{children}</button>
+  }
   ```
 
   Then you can use the `Button` component like this:
 
   ```tsx title="src/app/page.tsx"
-  import { css } from "../../styled-system/css";
-  import { Button, Thingy } from "./Button";
+  import { css } from '../../styled-system/css'
+  import { Button, Thingy } from './Button'
 
   export default function Page() {
     return (
-      <Button css={{ color: "pink", _hover: { color: "red" } }}>
+      <Button css={{ color: 'pink', _hover: { color: 'red' } }}>
         will result in `class="d_flex items_center text_pink hover:text_red"`
       </Button>
-    );
+    )
   }
   ```
 
@@ -5256,51 +5171,51 @@ export default defineConfig({
   **Pattern Example:**
 
   ```tsx title="src/components/Button.tsx"
-  import { hstack } from "../../styled-system/patterns";
-  import { css, cva } from "../../styled-system/css";
+  import { hstack } from '../../styled-system/patterns'
+  import { css, cva } from '../../styled-system/css'
 
   export const Button = ({ css: cssProp = {}, children }) => {
     // using the flex pattern
     const hstackProps = hstack.raw({
-      border: "1px solid",
-      _hover: { color: "blue.400" },
-    });
+      border: '1px solid',
+      _hover: { color: 'blue.400' },
+    })
 
     // merging the styles
-    const className = css(hstackProps, cssProp);
+    const className = css(hstackProps, cssProp)
 
-    return <button className={className}>{children}</button>;
-  };
+    return <button className={className}>{children}</button>
+  }
   ```
 
   **CVA Example:**
 
   ```tsx title="src/components/Button.tsx"
-  import { css, cva } from "../../styled-system/css";
+  import { css, cva } from '../../styled-system/css'
 
   const buttonRecipe = cva({
-    base: { display: "flex", fontSize: "lg" },
+    base: { display: 'flex', fontSize: 'lg' },
     variants: {
       variant: {
-        primary: { color: "white", backgroundColor: "blue.500" },
+        primary: { color: 'white', backgroundColor: 'blue.500' },
       },
     },
-  });
+  })
 
   export const Button = ({ css: cssProp = {}, children }) => {
     const className = css(
       // using the button recipe
-      buttonRecipe.raw({ variant: "primary" }),
+      buttonRecipe.raw({ variant: 'primary' }),
 
       // adding style overrides (internal)
-      { _hover: { color: "blue.400" } },
+      { _hover: { color: 'blue.400' } },
 
       // adding style overrides (external)
       cssProp,
-    );
+    )
 
-    return <button className={className}>{props.children}</button>;
-  };
+    return <button className={className}>{props.children}</button>
+  }
   ```
 
 - 36fdff89: Fix bug in generated js code for atomic slot recipe produce where `splitVariantProps` didn't work without
@@ -5347,14 +5262,7 @@ export default defineConfig({
   Example:
 
   ```tsx
-  <h1
-    className={cx(
-      css({ mx: "3", paddingTop: "4" }),
-      css({ mx: "10", pt: "6" }),
-    )}
-  >
-    Will result in "mx_10 pt_6"
-  </h1>
+  <h1 className={cx(css({ mx: '3', paddingTop: '4' }), css({ mx: '10', pt: '6' }))}>Will result in "mx_10 pt_6"</h1>
   ```
 
 - dfb3f85f: Add missing svg props types
@@ -5399,12 +5307,12 @@ export default defineConfig({
   **Definition**
 
   ```jsx
-  import { sva } from "styled-system/css";
+  import { sva } from 'styled-system/css'
 
   const button = sva({
-    slots: ["label", "icon"],
+    slots: ['label', 'icon'],
     base: {
-      label: { color: "red", textDecoration: "underline" },
+      label: { color: 'red', textDecoration: 'underline' },
     },
     variants: {
       rounded: {
@@ -5412,33 +5320,33 @@ export default defineConfig({
       },
       size: {
         sm: {
-          label: { fontSize: "sm" },
-          icon: { fontSize: "sm" },
+          label: { fontSize: 'sm' },
+          icon: { fontSize: 'sm' },
         },
         lg: {
-          label: { fontSize: "lg" },
-          icon: { fontSize: "lg", color: "pink" },
+          label: { fontSize: 'lg' },
+          icon: { fontSize: 'lg', color: 'pink' },
         },
       },
     },
     defaultVariants: {
-      size: "sm",
+      size: 'sm',
     },
-  });
+  })
   ```
 
   **Usage**
 
   ```jsx
   export function App() {
-    const btnClass = button({ size: "lg", rounded: true });
+    const btnClass = button({ size: 'lg', rounded: true })
 
     return (
       <button>
         <p class={btnClass.label}> Label</p>
         <p class={btnClass.icon}> Icon</p>
       </button>
-    );
+    )
   }
   ```
 
@@ -5503,26 +5411,26 @@ export default defineConfig({
   Update the `jsx` property to be used for advanced tracking of custom pattern components.
 
   ```jsx
-  import { Circle } from "styled-system/jsx";
+  import { Circle } from 'styled-system/jsx'
   const CustomCircle = ({ children, ...props }) => {
-    return <Circle {...props}>{children}</Circle>;
-  };
+    return <Circle {...props}>{children}</Circle>
+  }
   ```
 
   To track the `CustomCircle` component, you can now use the `jsx` property.
 
   ```js
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     patterns: {
       extend: {
         circle: {
-          jsx: ["CustomCircle"],
+          jsx: ['CustomCircle'],
         },
       },
     },
-  });
+  })
   ```
 
 ### Patch Changes
@@ -5620,17 +5528,9 @@ export default defineConfig({
   ```tsx
   const ComponentWithMultipleRecipes = ({ variant }) => {
     return (
-      <button
-        className={cx(
-          pinkRecipe({ variant }),
-          greenRecipe({ variant }),
-          blueRecipe({ variant }),
-        )}
-      >
-        Hello
-      </button>
-    );
-  };
+      <button className={cx(pinkRecipe({ variant }), greenRecipe({ variant }), blueRecipe({ variant }))}>Hello</button>
+    )
+  }
   ```
 
   Given a `panda.config.ts` with recipes each including a common `jsx` tag name, such as:
@@ -5714,7 +5614,7 @@ export default defineConfig({
   ```ts
   staticCss: {
     recipes: {
-      button: [{ size: ["*"], shape: ["*"] }];
+      button: [{ size: ['*'], shape: ['*'] }]
     }
   }
   ```
@@ -5724,7 +5624,7 @@ export default defineConfig({
   ```ts
   staticCss: {
     recipes: {
-      button: ["*"];
+      button: ['*']
     }
   }
   ```
@@ -5762,8 +5662,8 @@ export default defineConfig({
   // panda.config.ts
   export default defineConfig({
     //...
-    syntax: "template-literal",
-  });
+    syntax: 'template-literal',
+  })
   ```
 
   > For existing projects, you might need to run the `panda codegen --clean`
@@ -5795,12 +5695,12 @@ export default defineConfig({
 - 5b344b9c: Add support for disabling shorthand props
 
   ```ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
     shorthands: false,
-  });
+  })
   ```
 
 ### Patch Changes
@@ -5923,20 +5823,20 @@ Will now allow you to use the following syntax for token path:
   export default defaultConfig({
     conditions: {
       extend: {
-        supportHover: ["@media (hover: hover) and (pointer: fine)", "&:hover"],
+        supportHover: ['@media (hover: hover) and (pointer: fine)', '&:hover'],
       },
     },
-  });
+  })
   ```
 
   ```ts
-  import { css } from "../styled-system/css";
+  import { css } from '../styled-system/css'
 
   css({
     _supportHover: {
-      color: "red",
+      color: 'red',
     },
-  });
+  })
   ```
 
   will generate the following CSS:
@@ -6007,10 +5907,10 @@ Will now allow you to use the following syntax for token path:
 
   ```ts
   css({
-    padding: "1px",
-    paddingTop: "3px",
-    paddingBottom: "4px",
-  });
+    padding: '1px',
+    paddingTop: '3px',
+    paddingBottom: '4px',
+  })
   ```
 
   Will now always generate the following css:
@@ -6120,24 +6020,24 @@ Will now allow you to use the following syntax for token path:
     patterns: {
       hstack: {
         properties: {
-          justify: { type: "property", value: "justifyContent" },
-          gap: { type: "property", value: "gap" },
+          justify: { type: 'property', value: 'justifyContent' },
+          gap: { type: 'property', value: 'gap' },
         },
         // you can also use a token like '10'
-        defaultValues: { gap: "40px" },
+        defaultValues: { gap: '40px' },
         transform(props) {
-          const { justify, gap, ...rest } = props;
+          const { justify, gap, ...rest } = props
           return {
-            display: "flex",
-            alignItems: "center",
+            display: 'flex',
+            alignItems: 'center',
             justifyContent: justify,
             gap,
             ...rest,
-          };
+          }
         },
       },
     },
-  });
+  })
   ```
 
 ### Patch Changes
@@ -6179,54 +6079,39 @@ Will now allow you to use the following syntax for token path:
      * Called when the config is resolved, after all the presets are loaded and merged.
      * This is the first hook called, you can use it to tweak the config before the context is created.
      */
-    "config:resolved": (args: { conf: LoadConfigResult }) => MaybeAsyncReturn;
+    'config:resolved': (args: { conf: LoadConfigResult }) => MaybeAsyncReturn
     /**
      * Called when the Panda context has been created and the API is ready to be used.
      */
-    "context:created": (args: {
-      ctx: ApiInterface;
-      logger: LoggerInterface;
-    }) => void;
+    'context:created': (args: { ctx: ApiInterface; logger: LoggerInterface }) => void
     /**
      * Called when the config file or one of its dependencies (imports) has changed.
      */
-    "config:change": (args: { config: UserConfig }) => MaybeAsyncReturn;
+    'config:change': (args: { config: UserConfig }) => MaybeAsyncReturn
     /**
      * Called after reading the file content but before parsing it.
      * You can use this hook to transform the file content to a tsx-friendly syntax so that Panda's parser can parse it.
      * You can also use this hook to parse the file's content on your side using a custom parser, in this case you don't have to return anything.
      */
-    "parser:before": (args: {
-      filePath: string;
-      content: string;
-    }) => string | void;
+    'parser:before': (args: { filePath: string; content: string }) => string | void
     /**
      * Called after the file styles are extracted and processed into the resulting ParserResult object.
      * You can also use this hook to add your own extraction results from your custom parser to the ParserResult object.
      */
-    "parser:after": (args: {
-      filePath: string;
-      result: ParserResultInterface | undefined;
-    }) => void;
+    'parser:after': (args: { filePath: string; result: ParserResultInterface | undefined }) => void
     /**
      * Called after the codegen is completed
      */
-    "codegen:done": () => MaybeAsyncReturn;
+    'codegen:done': () => MaybeAsyncReturn
     /**
      * Called right before adding the design-system CSS (global, static, preflight, tokens, keyframes) to the final CSS
      * Called right before writing/injecting the final CSS (styles.css) that contains the design-system CSS and the parser CSS
      * You can use it to tweak the CSS content before it's written to disk or injected through the postcss plugin.
      */
-    "cssgen:done": (args: {
-      artifact:
-        | "global"
-        | "static"
-        | "reset"
-        | "tokens"
-        | "keyframes"
-        | "styles.css";
-      content: string;
-    }) => string | void;
+    'cssgen:done': (args: {
+      artifact: 'global' | 'static' | 'reset' | 'tokens' | 'keyframes' | 'styles.css'
+      content: string
+    }) => string | void
   }
   ```
 
@@ -6374,18 +6259,18 @@ Will now allow you to use the following syntax for token path:
 
   ```ts
   // config.strictTokens = true
-  css({ display: "flex" }); // OK, didn't throw
-  css({ display: "block" }); // OK, didn't throw
-  css({ display: "abc" }); // ❌ would throw since 'abc' is not part of predefined values of 'display' even thought there is no config token for 'abc'
+  css({ display: 'flex' }) // OK, didn't throw
+  css({ display: 'block' }) // OK, didn't throw
+  css({ display: 'abc' }) // ❌ would throw since 'abc' is not part of predefined values of 'display' even thought there is no config token for 'abc'
   ```
 
   now:
 
   ```ts
   // config.strictTokens = true
-  css({ display: "flex" }); // OK, didn't throw
-  css({ display: "block" }); // OK, didn't throw
-  css({ display: "abc" }); // ✅ will not throw there is no config token for 'abc'
+  css({ display: 'flex' }) // OK, didn't throw
+  css({ display: 'block' }) // OK, didn't throw
+  css({ display: 'abc' }) // ✅ will not throw there is no config token for 'abc'
   ```
 
   Instead, if you want the v.19.0 behavior, you can use the new `config.strictPropertyValues` option. You can combine it
@@ -6396,79 +6281,79 @@ Will now allow you to use the following syntax for token path:
 
   ```ts
   type StrictableProps =
-    | "alignContent"
-    | "alignItems"
-    | "alignSelf"
-    | "all"
-    | "animationComposition"
-    | "animationDirection"
-    | "animationFillMode"
-    | "appearance"
-    | "backfaceVisibility"
-    | "backgroundAttachment"
-    | "backgroundClip"
-    | "borderCollapse"
-    | "border"
-    | "borderBlock"
-    | "borderBlockEnd"
-    | "borderBlockStart"
-    | "borderBottom"
-    | "borderInline"
-    | "borderInlineEnd"
-    | "borderInlineStart"
-    | "borderLeft"
-    | "borderRight"
-    | "borderTop"
-    | "borderBlockEndStyle"
-    | "borderBlockStartStyle"
-    | "borderBlockStyle"
-    | "borderBottomStyle"
-    | "borderInlineEndStyle"
-    | "borderInlineStartStyle"
-    | "borderInlineStyle"
-    | "borderLeftStyle"
-    | "borderRightStyle"
-    | "borderTopStyle"
-    | "boxDecorationBreak"
-    | "boxSizing"
-    | "breakAfter"
-    | "breakBefore"
-    | "breakInside"
-    | "captionSide"
-    | "clear"
-    | "columnFill"
-    | "columnRuleStyle"
-    | "contentVisibility"
-    | "direction"
-    | "display"
-    | "emptyCells"
-    | "flexDirection"
-    | "flexWrap"
-    | "float"
-    | "fontKerning"
-    | "forcedColorAdjust"
-    | "isolation"
-    | "lineBreak"
-    | "mixBlendMode"
-    | "objectFit"
-    | "outlineStyle"
-    | "overflow"
-    | "overflowX"
-    | "overflowY"
-    | "overflowBlock"
-    | "overflowInline"
-    | "overflowWrap"
-    | "pointerEvents"
-    | "position"
-    | "resize"
-    | "scrollBehavior"
-    | "touchAction"
-    | "transformBox"
-    | "transformStyle"
-    | "userSelect"
-    | "visibility"
-    | "wordBreak"
-    | "writingMode";
+    | 'alignContent'
+    | 'alignItems'
+    | 'alignSelf'
+    | 'all'
+    | 'animationComposition'
+    | 'animationDirection'
+    | 'animationFillMode'
+    | 'appearance'
+    | 'backfaceVisibility'
+    | 'backgroundAttachment'
+    | 'backgroundClip'
+    | 'borderCollapse'
+    | 'border'
+    | 'borderBlock'
+    | 'borderBlockEnd'
+    | 'borderBlockStart'
+    | 'borderBottom'
+    | 'borderInline'
+    | 'borderInlineEnd'
+    | 'borderInlineStart'
+    | 'borderLeft'
+    | 'borderRight'
+    | 'borderTop'
+    | 'borderBlockEndStyle'
+    | 'borderBlockStartStyle'
+    | 'borderBlockStyle'
+    | 'borderBottomStyle'
+    | 'borderInlineEndStyle'
+    | 'borderInlineStartStyle'
+    | 'borderInlineStyle'
+    | 'borderLeftStyle'
+    | 'borderRightStyle'
+    | 'borderTopStyle'
+    | 'boxDecorationBreak'
+    | 'boxSizing'
+    | 'breakAfter'
+    | 'breakBefore'
+    | 'breakInside'
+    | 'captionSide'
+    | 'clear'
+    | 'columnFill'
+    | 'columnRuleStyle'
+    | 'contentVisibility'
+    | 'direction'
+    | 'display'
+    | 'emptyCells'
+    | 'flexDirection'
+    | 'flexWrap'
+    | 'float'
+    | 'fontKerning'
+    | 'forcedColorAdjust'
+    | 'isolation'
+    | 'lineBreak'
+    | 'mixBlendMode'
+    | 'objectFit'
+    | 'outlineStyle'
+    | 'overflow'
+    | 'overflowX'
+    | 'overflowY'
+    | 'overflowBlock'
+    | 'overflowInline'
+    | 'overflowWrap'
+    | 'pointerEvents'
+    | 'position'
+    | 'resize'
+    | 'scrollBehavior'
+    | 'touchAction'
+    | 'transformBox'
+    | 'transformStyle'
+    | 'userSelect'
+    | 'visibility'
+    | 'wordBreak'
+    | 'writingMode'
   ```
 
 - Updated dependencies [657ca5da]
@@ -6539,38 +6424,38 @@ Will now allow you to use the following syntax for token path:
 
   ```ts
   const card = defineRecipe({
-    className: "card",
-    base: { color: "white" },
+    className: 'card',
+    base: { color: 'white' },
     variants: {
       size: {
-        small: { fontSize: "14px" },
-        large: { fontSize: "18px" },
+        small: { fontSize: '14px' },
+        large: { fontSize: '18px' },
       },
       visual: {
-        primary: { backgroundColor: "blue" },
-        secondary: { backgroundColor: "gray" },
+        primary: { backgroundColor: 'blue' },
+        secondary: { backgroundColor: 'gray' },
       },
     },
-  });
+  })
 
   export default defineConfig({
     // ...
     staticCss: {
       recipes: {
-        card: ["*"], // this
+        card: ['*'], // this
 
         // was equivalent to:
         card: [
           // notice how `responsive: true` was implicitly added
-          { size: ["*"], responsive: true },
-          { visual: ["*"], responsive: true },
+          { size: ['*'], responsive: true },
+          { visual: ['*'], responsive: true },
         ],
 
         //   will now correctly be equivalent to:
-        card: [{ size: ["*"] }, { visual: ["*"] }],
+        card: [{ size: ['*'] }, { visual: ['*'] }],
       },
     },
-  });
+  })
   ```
 
   Here's the diff in the generated CSS:
@@ -6717,17 +6602,17 @@ Will now allow you to use the following syntax for token path:
 
   ```ts
   css({
-    bg: "[#3B00B9]", // ✅ was okay
+    bg: '[#3B00B9]', // ✅ was okay
     _dark: {
       // ✅ was okay
-      color: "[#3B00B9]",
+      color: '[#3B00B9]',
     },
 
     // ❌ Not okay, will be fixed in this patch
     color: {
-      _dark: "[#3B00B9]",
+      _dark: '[#3B00B9]',
     },
-  });
+  })
   ```
 
 - 647f05c9: Fix a CSS generation issue with `config.strictTokens` when using the `[xxx]` escape-hatch syntax with `!` or
@@ -6735,9 +6620,9 @@ Will now allow you to use the following syntax for token path:
 
   ```ts
   css({
-    borderWidth: "[2px!]",
-    width: "[2px !important]",
-  });
+    borderWidth: '[2px!]',
+    width: '[2px !important]',
+  })
   ```
 
 - Updated dependencies [8f4ce97c]
@@ -6778,18 +6663,18 @@ Will now allow you to use the following syntax for token path:
   and suffixing with `]`, e.g. writing `[123px]` as a value will bypass the token validation.
 
   ```ts
-  import { css } from "../styled-system/css";
+  import { css } from '../styled-system/css'
 
   css({
     // @ts-expect-error TS will throw when using from strictTokens: true
-    color: "#fff",
+    color: '#fff',
     // @ts-expect-error TS will throw when using from strictTokens: true
-    width: "100px",
+    width: '100px',
 
     // ✅ but this is now allowed:
-    bgColor: "[rgb(51 155 240)]",
-    fontSize: "[12px]",
-  });
+    bgColor: '[rgb(51 155 240)]',
+    fontSize: '[12px]',
+  })
   ```
 
 ### Patch Changes
@@ -6823,49 +6708,49 @@ Will now allow you to use the following syntax for token path:
 - 105f74ce: Add a way to specify a recipe's `staticCss` options from inside a recipe config, e.g.:
 
   ```js
-  import { defineRecipe } from "@pandacss/dev";
+  import { defineRecipe } from '@pandacss/dev'
 
   const card = defineRecipe({
-    className: "card",
-    base: { color: "white" },
+    className: 'card',
+    base: { color: 'white' },
     variants: {
       size: {
-        small: { fontSize: "14px" },
-        large: { fontSize: "18px" },
+        small: { fontSize: '14px' },
+        large: { fontSize: '18px' },
       },
     },
-    staticCss: [{ size: ["*"] }],
-  });
+    staticCss: [{ size: ['*'] }],
+  })
   ```
 
   would be the equivalent of defining it inside the main config:
 
   ```js
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
     staticCss: {
       recipes: {
         card: {
-          size: ["*"],
+          size: ['*'],
         },
       },
     },
-  });
+  })
   ```
 
 - 052283c2: Fix vue `styled` factory internal class merging, for example:
 
   ```vue
   <script setup>
-  import { styled } from "../styled-system/jsx";
+  import { styled } from '../styled-system/jsx'
 
-  const StyledButton = styled("button", {
+  const StyledButton = styled('button', {
     base: {
-      bgColor: "red.300",
+      bgColor: 'red.300',
     },
-  });
+  })
   </script>
   <template>
     <StyledButton id="test" class="test">
@@ -6934,18 +6819,18 @@ Will now allow you to use the following syntax for token path:
 
   ```ts
   // config.strictTokens = true
-  css({ display: "flex" }); // OK, didn't throw
-  css({ display: "block" }); // OK, didn't throw
-  css({ display: "abc" }); // ❌ didn't throw even though 'abc' is not a valid value for 'display'
+  css({ display: 'flex' }) // OK, didn't throw
+  css({ display: 'block' }) // OK, didn't throw
+  css({ display: 'abc' }) // ❌ didn't throw even though 'abc' is not a valid value for 'display'
   ```
 
   Now:
 
   ```ts
   // config.strictTokens = true
-  css({ display: "flex" }); // OK, didn't throw
-  css({ display: "block" }); // OK, didn't throw
-  css({ display: "abc" }); // ✅ will throw since 'abc' is not a valid value for 'display'
+  css({ display: 'flex' }) // OK, didn't throw
+  css({ display: 'block' }) // OK, didn't throw
+  css({ display: 'abc' }) // ✅ will throw since 'abc' is not a valid value for 'display'
   ```
 
 - Updated dependencies [61831040]
@@ -7004,28 +6889,22 @@ Will now allow you to use the following syntax for token path:
 - b7cb2073: Add a `splitCssProps` utility exported from the {outdir}/jsx entrypoint
 
   ```tsx
-  import { splitCssProps, styled } from "../styled-system/jsx";
-  import type { HTMLStyledProps } from "../styled-system/types";
+  import { splitCssProps, styled } from '../styled-system/jsx'
+  import type { HTMLStyledProps } from '../styled-system/types'
 
-  function SplitComponent({ children, ...props }: HTMLStyledProps<"div">) {
-    const [cssProps, restProps] = splitCssProps(props);
+  function SplitComponent({ children, ...props }: HTMLStyledProps<'div'>) {
+    const [cssProps, restProps] = splitCssProps(props)
     return (
-      <styled.div
-        {...restProps}
-        className={css(
-          { display: "flex", height: "20", width: "20" },
-          cssProps,
-        )}
-      >
+      <styled.div {...restProps} className={css({ display: 'flex', height: '20', width: '20' }, cssProps)}>
         {children}
       </styled.div>
-    );
+    )
   }
 
   // Usage
 
   function App() {
-    return <SplitComponent margin="2">Click me</SplitComponent>;
+    return <SplitComponent margin="2">Click me</SplitComponent>
   }
   ```
 
@@ -7118,16 +6997,16 @@ Will now allow you to use the following syntax for token path:
   together and the styles will be merged correctly.
 
   ```jsx
-  const Box = styled("div", {
+  const Box = styled('div', {
     base: {
-      background: "red.light",
-      color: "white",
+      background: 'red.light',
+      color: 'white',
     },
-  });
+  })
 
   const ExtendedBox = styled(Box, {
-    base: { background: "red.dark" },
-  });
+    base: { background: 'red.dark' },
+  })
 
   // <ExtendedBox> will have a background of `red.dark` and a color of `white`
   ```
@@ -7140,32 +7019,32 @@ Will now allow you to use the following syntax for token path:
   - CVA or Inline CVA + Config Recipe = ❌
 
   ```jsx
-  import { button } from "../styled-system/recipes";
+  import { button } from '../styled-system/recipes'
 
-  const Button = styled("div", button);
+  const Button = styled('div', button)
 
   // ❌ This will throw an error
   const ExtendedButton = styled(Button, {
-    base: { background: "red.dark" },
-  });
+    base: { background: 'red.dark' },
+  })
   ```
 
 - fbf062c6: Added a new type to extract variants out of styled components
 
   ```tsx
-  import { StyledVariantProps } from "../styled-system/jsx";
+  import { StyledVariantProps } from '../styled-system/jsx'
 
-  const Button = styled("button", {
-    base: { color: "black" },
+  const Button = styled('button', {
+    base: { color: 'black' },
     variants: {
       state: {
-        error: { color: "red" },
-        success: { color: "green" },
+        error: { color: 'red' },
+        success: { color: 'green' },
       },
     },
-  });
+  })
 
-  type ButtonVariantProps = StyledVariantProps<typeof Button>;
+  type ButtonVariantProps = StyledVariantProps<typeof Button>
   //   ^ { state?: 'error' | 'success' | undefined }
   ```
 
@@ -7267,9 +7146,9 @@ Will now allow you to use the following syntax for token path:
 
   ```ts
   interface FactoryOptions<TProps extends Dict> {
-    dataAttr?: boolean;
-    defaultProps?: TProps;
-    shouldForwardProp?(prop: string, variantKeys: string[]): boolean;
+    dataAttr?: boolean
+    defaultProps?: TProps
+    shouldForwardProp?(prop: string, variantKeys: string[]): boolean
   }
   ```
 
@@ -7277,16 +7156,16 @@ Will now allow you to use the following syntax for token path:
     This is useful for testing and debugging.
 
   ```jsx
-  import { styled } from "../styled-system/jsx";
-  import { button } from "../styled-system/recipes";
+  import { styled } from '../styled-system/jsx'
+  import { button } from '../styled-system/recipes'
 
-  const Button = styled("button", button, { dataAttr: true });
+  const Button = styled('button', button, { dataAttr: true })
 
   const App = () => (
     <Button variant="secondary" mt="10px">
       Button
     </Button>
-  );
+  )
   // Will render something like <button data-recipe="button" class="btn btn--variant_purple mt_10px">Button</button>
   ```
 
@@ -7294,17 +7173,17 @@ Will now allow you to use the following syntax for token path:
     override the default variants or base styles of a recipe.
 
   ```jsx
-  import { styled } from "../styled-system/jsx";
-  import { button } from "../styled-system/recipes";
+  import { styled } from '../styled-system/jsx'
+  import { button } from '../styled-system/recipes'
 
-  const Button = styled("button", button, {
+  const Button = styled('button', button, {
     defaultProps: {
-      variant: "secondary",
-      px: "10px",
+      variant: 'secondary',
+      px: '10px',
     },
-  });
+  })
 
-  const App = () => <Button>Button</Button>;
+  const App = () => <Button>Button</Button>
   // Will render something like <button class="btn btn--variant_secondary px_10px">Button</button>
   ```
 
@@ -7312,20 +7191,19 @@ Will now allow you to use the following syntax for token path:
     props except recipe variants and style props are forwarded.
 
   ```jsx
-  import { styled } from "../styled-system/jsx";
-  import { button } from "../styled-system/recipes";
-  import { isCssProperty } from "../styled-system/jsx";
-  import { motion, isValidMotionProp } from "framer-motion";
+  import { styled } from '../styled-system/jsx'
+  import { button } from '../styled-system/recipes'
+  import { isCssProperty } from '../styled-system/jsx'
+  import { motion, isValidMotionProp } from 'framer-motion'
 
   const StyledMotion = styled(
     motion.div,
     {},
     {
       shouldForwardProp: (prop, variantKeys) =>
-        isValidMotionProp(prop) ||
-        (!variantKeys.includes(prop) && !isCssProperty(prop)),
+        isValidMotionProp(prop) || (!variantKeys.includes(prop) && !isCssProperty(prop)),
     },
-  );
+  )
   ```
 
   - @pandacss/types@0.15.4
@@ -7348,42 +7226,42 @@ Will now allow you to use the following syntax for token path:
 
   ```ts
   export default defineConfig({
-    outdir: "./outdir",
+    outdir: './outdir',
     importMap: {
-      css: "#panda/styled-system/css",
-      recipes: "#panda/styled-system/recipes",
-      patterns: "#panda/styled-system/patterns",
-      jsx: "#panda/styled-system/jsx",
+      css: '#panda/styled-system/css',
+      recipes: '#panda/styled-system/recipes',
+      patterns: '#panda/styled-system/patterns',
+      jsx: '#panda/styled-system/jsx',
     },
-  });
+  })
   ```
 
   Or you could also make your outdir an actual package from your monorepo:
 
   ```ts
   export default defineConfig({
-    outdir: "../packages/styled-system",
+    outdir: '../packages/styled-system',
     importMap: {
-      css: "@monorepo/styled-system",
-      recipes: "@monorepo/styled-system",
-      patterns: "@monorepo/styled-system",
-      jsx: "@monorepo/styled-system",
+      css: '@monorepo/styled-system',
+      recipes: '@monorepo/styled-system',
+      patterns: '@monorepo/styled-system',
+      jsx: '@monorepo/styled-system',
     },
-  });
+  })
   ```
 
   Working with tsconfig paths aliases is easy:
 
   ```ts
   export default defineConfig({
-    outdir: "styled-system",
+    outdir: 'styled-system',
     importMap: {
-      css: "styled-system/css",
-      recipes: "styled-system/recipes",
-      patterns: "styled-system/patterns",
-      jsx: "styled-system/jsx",
+      css: 'styled-system/css',
+      recipes: 'styled-system/recipes',
+      patterns: 'styled-system/patterns',
+      jsx: 'styled-system/jsx',
     },
-  });
+  })
   ```
 
 - 1eb31118: Automatically allow overriding config recipe compoundVariants styles within the `styled` JSX factory,
@@ -7393,22 +7271,22 @@ Will now allow you to use the following syntax for token path:
 
   ```ts file="panda.config.ts"
   const button = defineRecipe({
-    className: "btn",
-    base: { color: "green", fontSize: "16px" },
+    className: 'btn',
+    base: { color: 'green', fontSize: '16px' },
     variants: {
-      size: { small: { fontSize: "14px" } },
+      size: { small: { fontSize: '14px' } },
     },
-    compoundVariants: [{ size: "small", css: { color: "blue" } }],
-  });
+    compoundVariants: [{ size: 'small', css: { color: 'blue' } }],
+  })
   ```
 
   This would previously not merge the `color` property overrides, but now it does:
 
   ```tsx file="example.tsx"
-  import { styled } from "../styled-system/jsx";
-  import { button } from "../styled-system/recipes";
+  import { styled } from '../styled-system/jsx'
+  import { button } from '../styled-system/recipes'
 
-  const Button = styled("button", button);
+  const Button = styled('button', button)
 
   function App() {
     return (
@@ -7417,7 +7295,7 @@ Will now allow you to use the following syntax for token path:
           Click me
         </Button>
       </>
-    );
+    )
   }
   ```
 
@@ -7596,8 +7474,8 @@ Will now allow you to use the following syntax for token path:
     passed in. This is to allow the `css` function to merge the styles correctly.
 
   ```tsx
-  import { css } from "../styled-system/css";
-  css({ mx: "3", paddingTop: "4" }, { mx: "10", pt: "6" }); // => mx_10 pt_6
+  import { css } from '../styled-system/css'
+  css({ mx: '3', paddingTop: '4' }, { mx: '10', pt: '6' }) // => mx_10 pt_6
   ```
 
   > ⚠️ This approach should be preferred for merging styles over the current `cx` function, which will be reverted to
@@ -7622,29 +7500,26 @@ Will now allow you to use the following syntax for token path:
   be merged correctly.
 
   ```tsx title="src/components/Button.tsx"
-  import { css } from "../../styled-system/css";
+  import { css } from '../../styled-system/css'
 
   export const Button = ({ css: cssProp = {}, children }) => {
-    const className = css(
-      { display: "flex", alignItem: "center", color: "black" },
-      cssProp,
-    );
-    return <button className={className}>{children}</button>;
-  };
+    const className = css({ display: 'flex', alignItem: 'center', color: 'black' }, cssProp)
+    return <button className={className}>{children}</button>
+  }
   ```
 
   Then you can use the `Button` component like this:
 
   ```tsx title="src/app/page.tsx"
-  import { css } from "../../styled-system/css";
-  import { Button, Thingy } from "./Button";
+  import { css } from '../../styled-system/css'
+  import { Button, Thingy } from './Button'
 
   export default function Page() {
     return (
-      <Button css={{ color: "pink", _hover: { color: "red" } }}>
+      <Button css={{ color: 'pink', _hover: { color: 'red' } }}>
         will result in `class="d_flex items_center text_pink hover:text_red"`
       </Button>
-    );
+    )
   }
   ```
 
@@ -7656,51 +7531,51 @@ Will now allow you to use the following syntax for token path:
   **Pattern Example:**
 
   ```tsx title="src/components/Button.tsx"
-  import { hstack } from "../../styled-system/patterns";
-  import { css, cva } from "../../styled-system/css";
+  import { hstack } from '../../styled-system/patterns'
+  import { css, cva } from '../../styled-system/css'
 
   export const Button = ({ css: cssProp = {}, children }) => {
     // using the flex pattern
     const hstackProps = hstack.raw({
-      border: "1px solid",
-      _hover: { color: "blue.400" },
-    });
+      border: '1px solid',
+      _hover: { color: 'blue.400' },
+    })
 
     // merging the styles
-    const className = css(hstackProps, cssProp);
+    const className = css(hstackProps, cssProp)
 
-    return <button className={className}>{children}</button>;
-  };
+    return <button className={className}>{children}</button>
+  }
   ```
 
   **CVA Example:**
 
   ```tsx title="src/components/Button.tsx"
-  import { css, cva } from "../../styled-system/css";
+  import { css, cva } from '../../styled-system/css'
 
   const buttonRecipe = cva({
-    base: { display: "flex", fontSize: "lg" },
+    base: { display: 'flex', fontSize: 'lg' },
     variants: {
       variant: {
-        primary: { color: "white", backgroundColor: "blue.500" },
+        primary: { color: 'white', backgroundColor: 'blue.500' },
       },
     },
-  });
+  })
 
   export const Button = ({ css: cssProp = {}, children }) => {
     const className = css(
       // using the button recipe
-      buttonRecipe.raw({ variant: "primary" }),
+      buttonRecipe.raw({ variant: 'primary' }),
 
       // adding style overrides (internal)
-      { _hover: { color: "blue.400" } },
+      { _hover: { color: 'blue.400' } },
 
       // adding style overrides (external)
       cssProp,
-    );
+    )
 
-    return <button className={className}>{props.children}</button>;
-  };
+    return <button className={className}>{props.children}</button>
+  }
   ```
 
 - 36fdff89: Fix bug in generated js code for atomic slot recipe produce where `splitVariantProps` didn't work without
@@ -7747,14 +7622,7 @@ Will now allow you to use the following syntax for token path:
   Example:
 
   ```tsx
-  <h1
-    className={cx(
-      css({ mx: "3", paddingTop: "4" }),
-      css({ mx: "10", pt: "6" }),
-    )}
-  >
-    Will result in "mx_10 pt_6"
-  </h1>
+  <h1 className={cx(css({ mx: '3', paddingTop: '4' }), css({ mx: '10', pt: '6' }))}>Will result in "mx_10 pt_6"</h1>
   ```
 
 - dfb3f85f: Add missing svg props types
@@ -7799,12 +7667,12 @@ Will now allow you to use the following syntax for token path:
   **Definition**
 
   ```jsx
-  import { sva } from "styled-system/css";
+  import { sva } from 'styled-system/css'
 
   const button = sva({
-    slots: ["label", "icon"],
+    slots: ['label', 'icon'],
     base: {
-      label: { color: "red", textDecoration: "underline" },
+      label: { color: 'red', textDecoration: 'underline' },
     },
     variants: {
       rounded: {
@@ -7812,33 +7680,33 @@ Will now allow you to use the following syntax for token path:
       },
       size: {
         sm: {
-          label: { fontSize: "sm" },
-          icon: { fontSize: "sm" },
+          label: { fontSize: 'sm' },
+          icon: { fontSize: 'sm' },
         },
         lg: {
-          label: { fontSize: "lg" },
-          icon: { fontSize: "lg", color: "pink" },
+          label: { fontSize: 'lg' },
+          icon: { fontSize: 'lg', color: 'pink' },
         },
       },
     },
     defaultVariants: {
-      size: "sm",
+      size: 'sm',
     },
-  });
+  })
   ```
 
   **Usage**
 
   ```jsx
   export function App() {
-    const btnClass = button({ size: "lg", rounded: true });
+    const btnClass = button({ size: 'lg', rounded: true })
 
     return (
       <button>
         <p class={btnClass.label}> Label</p>
         <p class={btnClass.icon}> Icon</p>
       </button>
-    );
+    )
   }
   ```
 
@@ -7903,26 +7771,26 @@ Will now allow you to use the following syntax for token path:
   Update the `jsx` property to be used for advanced tracking of custom pattern components.
 
   ```jsx
-  import { Circle } from "styled-system/jsx";
+  import { Circle } from 'styled-system/jsx'
   const CustomCircle = ({ children, ...props }) => {
-    return <Circle {...props}>{children}</Circle>;
-  };
+    return <Circle {...props}>{children}</Circle>
+  }
   ```
 
   To track the `CustomCircle` component, you can now use the `jsx` property.
 
   ```js
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     patterns: {
       extend: {
         circle: {
-          jsx: ["CustomCircle"],
+          jsx: ['CustomCircle'],
         },
       },
     },
-  });
+  })
   ```
 
 ### Patch Changes
@@ -8020,17 +7888,9 @@ Will now allow you to use the following syntax for token path:
   ```tsx
   const ComponentWithMultipleRecipes = ({ variant }) => {
     return (
-      <button
-        className={cx(
-          pinkRecipe({ variant }),
-          greenRecipe({ variant }),
-          blueRecipe({ variant }),
-        )}
-      >
-        Hello
-      </button>
-    );
-  };
+      <button className={cx(pinkRecipe({ variant }), greenRecipe({ variant }), blueRecipe({ variant }))}>Hello</button>
+    )
+  }
   ```
 
   Given a `panda.config.ts` with recipes each including a common `jsx` tag name, such as:
@@ -8114,7 +7974,7 @@ Will now allow you to use the following syntax for token path:
   ```ts
   staticCss: {
     recipes: {
-      button: [{ size: ["*"], shape: ["*"] }];
+      button: [{ size: ['*'], shape: ['*'] }]
     }
   }
   ```
@@ -8124,7 +7984,7 @@ Will now allow you to use the following syntax for token path:
   ```ts
   staticCss: {
     recipes: {
-      button: ["*"];
+      button: ['*']
     }
   }
   ```
@@ -8162,8 +8022,8 @@ Will now allow you to use the following syntax for token path:
   // panda.config.ts
   export default defineConfig({
     //...
-    syntax: "template-literal",
-  });
+    syntax: 'template-literal',
+  })
   ```
 
   > For existing projects, you might need to run the `panda codegen --clean`
@@ -8195,12 +8055,12 @@ Will now allow you to use the following syntax for token path:
 - 5b344b9c: Add support for disabling shorthand props
 
   ```ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
     shorthands: false,
-  });
+  })
   ```
 
 ### Patch Changes
@@ -8320,11 +8180,11 @@ This hook is called right before writing the codegen files to disk. You can use
 export default defineConfig({
   // ...
   hooks: {
-    "codegen:prepare": ({ artifacts, changed }) => {
+    'codegen:prepare': ({ artifacts, changed }) => {
       // do something with the emitted js/d.ts files
     },
   },
-});
+})
 ```
 
 - 49c760cd: Fix issue where responsive array in css and cva doesn't generate the correct classname
@@ -8342,11 +8202,11 @@ export default defineConfig({
   ```js
   module.exports = {
     plugins: {
-      "@pandacss/dev/postcss": {
-        logfile: "./logs/panda.log",
+      '@pandacss/dev/postcss': {
+        logfile: './logs/panda.log',
       },
     },
-  };
+  }
   ```
 
 - Updated dependencies [74485ef1]
@@ -8385,24 +8245,24 @@ export default defineConfig({
     patterns: {
       hstack: {
         properties: {
-          justify: { type: "property", value: "justifyContent" },
-          gap: { type: "property", value: "gap" },
+          justify: { type: 'property', value: 'justifyContent' },
+          gap: { type: 'property', value: 'gap' },
         },
         // you can also use a token like '10'
-        defaultValues: { gap: "40px" },
+        defaultValues: { gap: '40px' },
         transform(props) {
-          const { justify, gap, ...rest } = props;
+          const { justify, gap, ...rest } = props
           return {
-            display: "flex",
-            alignItems: "center",
+            display: 'flex',
+            alignItems: 'center',
             justifyContent: justify,
             gap,
             ...rest,
-          };
+          }
         },
       },
     },
-  });
+  })
   ```
 
 ### Patch Changes
@@ -8444,54 +8304,39 @@ export default defineConfig({
      * Called when the config is resolved, after all the presets are loaded and merged.
      * This is the first hook called, you can use it to tweak the config before the context is created.
      */
-    "config:resolved": (args: { conf: LoadConfigResult }) => MaybeAsyncReturn;
+    'config:resolved': (args: { conf: LoadConfigResult }) => MaybeAsyncReturn
     /**
      * Called when the Panda context has been created and the API is ready to be used.
      */
-    "context:created": (args: {
-      ctx: ApiInterface;
-      logger: LoggerInterface;
-    }) => void;
+    'context:created': (args: { ctx: ApiInterface; logger: LoggerInterface }) => void
     /**
      * Called when the config file or one of its dependencies (imports) has changed.
      */
-    "config:change": (args: { config: UserConfig }) => MaybeAsyncReturn;
+    'config:change': (args: { config: UserConfig }) => MaybeAsyncReturn
     /**
      * Called after reading the file content but before parsing it.
      * You can use this hook to transform the file content to a tsx-friendly syntax so that Panda's parser can parse it.
      * You can also use this hook to parse the file's content on your side using a custom parser, in this case you don't have to return anything.
      */
-    "parser:before": (args: {
-      filePath: string;
-      content: string;
-    }) => string | void;
+    'parser:before': (args: { filePath: string; content: string }) => string | void
     /**
      * Called after the file styles are extracted and processed into the resulting ParserResult object.
      * You can also use this hook to add your own extraction results from your custom parser to the ParserResult object.
      */
-    "parser:after": (args: {
-      filePath: string;
-      result: ParserResultInterface | undefined;
-    }) => void;
+    'parser:after': (args: { filePath: string; result: ParserResultInterface | undefined }) => void
     /**
      * Called after the codegen is completed
      */
-    "codegen:done": () => MaybeAsyncReturn;
+    'codegen:done': () => MaybeAsyncReturn
     /**
      * Called right before adding the design-system CSS (global, static, preflight, tokens, keyframes) to the final CSS
      * Called right before writing/injecting the final CSS (styles.css) that contains the design-system CSS and the parser CSS
      * You can use it to tweak the CSS content before it's written to disk or injected through the postcss plugin.
      */
-    "cssgen:done": (args: {
-      artifact:
-        | "global"
-        | "static"
-        | "reset"
-        | "tokens"
-        | "keyframes"
-        | "styles.css";
-      content: string;
-    }) => string | void;
+    'cssgen:done': (args: {
+      artifact: 'global' | 'static' | 'reset' | 'tokens' | 'keyframes' | 'styles.css'
+      content: string
+    }) => string | void
   }
   ```
 
@@ -8639,18 +8484,18 @@ export default defineConfig({
 
   ```ts
   // config.strictTokens = true
-  css({ display: "flex" }); // OK, didn't throw
-  css({ display: "block" }); // OK, didn't throw
-  css({ display: "abc" }); // ❌ would throw since 'abc' is not part of predefined values of 'display' even thought there is no config token for 'abc'
+  css({ display: 'flex' }) // OK, didn't throw
+  css({ display: 'block' }) // OK, didn't throw
+  css({ display: 'abc' }) // ❌ would throw since 'abc' is not part of predefined values of 'display' even thought there is no config token for 'abc'
   ```
 
   now:
 
   ```ts
   // config.strictTokens = true
-  css({ display: "flex" }); // OK, didn't throw
-  css({ display: "block" }); // OK, didn't throw
-  css({ display: "abc" }); // ✅ will not throw there is no config token for 'abc'
+  css({ display: 'flex' }) // OK, didn't throw
+  css({ display: 'block' }) // OK, didn't throw
+  css({ display: 'abc' }) // ✅ will not throw there is no config token for 'abc'
   ```
 
   Instead, if you want the v.19.0 behavior, you can use the new `config.strictPropertyValues` option. You can combine it
@@ -8661,79 +8506,79 @@ export default defineConfig({
 
   ```ts
   type StrictableProps =
-    | "alignContent"
-    | "alignItems"
-    | "alignSelf"
-    | "all"
-    | "animationComposition"
-    | "animationDirection"
-    | "animationFillMode"
-    | "appearance"
-    | "backfaceVisibility"
-    | "backgroundAttachment"
-    | "backgroundClip"
-    | "borderCollapse"
-    | "border"
-    | "borderBlock"
-    | "borderBlockEnd"
-    | "borderBlockStart"
-    | "borderBottom"
-    | "borderInline"
-    | "borderInlineEnd"
-    | "borderInlineStart"
-    | "borderLeft"
-    | "borderRight"
-    | "borderTop"
-    | "borderBlockEndStyle"
-    | "borderBlockStartStyle"
-    | "borderBlockStyle"
-    | "borderBottomStyle"
-    | "borderInlineEndStyle"
-    | "borderInlineStartStyle"
-    | "borderInlineStyle"
-    | "borderLeftStyle"
-    | "borderRightStyle"
-    | "borderTopStyle"
-    | "boxDecorationBreak"
-    | "boxSizing"
-    | "breakAfter"
-    | "breakBefore"
-    | "breakInside"
-    | "captionSide"
-    | "clear"
-    | "columnFill"
-    | "columnRuleStyle"
-    | "contentVisibility"
-    | "direction"
-    | "display"
-    | "emptyCells"
-    | "flexDirection"
-    | "flexWrap"
-    | "float"
-    | "fontKerning"
-    | "forcedColorAdjust"
-    | "isolation"
-    | "lineBreak"
-    | "mixBlendMode"
-    | "objectFit"
-    | "outlineStyle"
-    | "overflow"
-    | "overflowX"
-    | "overflowY"
-    | "overflowBlock"
-    | "overflowInline"
-    | "overflowWrap"
-    | "pointerEvents"
-    | "position"
-    | "resize"
-    | "scrollBehavior"
-    | "touchAction"
-    | "transformBox"
-    | "transformStyle"
-    | "userSelect"
-    | "visibility"
-    | "wordBreak"
-    | "writingMode";
+    | 'alignContent'
+    | 'alignItems'
+    | 'alignSelf'
+    | 'all'
+    | 'animationComposition'
+    | 'animationDirection'
+    | 'animationFillMode'
+    | 'appearance'
+    | 'backfaceVisibility'
+    | 'backgroundAttachment'
+    | 'backgroundClip'
+    | 'borderCollapse'
+    | 'border'
+    | 'borderBlock'
+    | 'borderBlockEnd'
+    | 'borderBlockStart'
+    | 'borderBottom'
+    | 'borderInline'
+    | 'borderInlineEnd'
+    | 'borderInlineStart'
+    | 'borderLeft'
+    | 'borderRight'
+    | 'borderTop'
+    | 'borderBlockEndStyle'
+    | 'borderBlockStartStyle'
+    | 'borderBlockStyle'
+    | 'borderBottomStyle'
+    | 'borderInlineEndStyle'
+    | 'borderInlineStartStyle'
+    | 'borderInlineStyle'
+    | 'borderLeftStyle'
+    | 'borderRightStyle'
+    | 'borderTopStyle'
+    | 'boxDecorationBreak'
+    | 'boxSizing'
+    | 'breakAfter'
+    | 'breakBefore'
+    | 'breakInside'
+    | 'captionSide'
+    | 'clear'
+    | 'columnFill'
+    | 'columnRuleStyle'
+    | 'contentVisibility'
+    | 'direction'
+    | 'display'
+    | 'emptyCells'
+    | 'flexDirection'
+    | 'flexWrap'
+    | 'float'
+    | 'fontKerning'
+    | 'forcedColorAdjust'
+    | 'isolation'
+    | 'lineBreak'
+    | 'mixBlendMode'
+    | 'objectFit'
+    | 'outlineStyle'
+    | 'overflow'
+    | 'overflowX'
+    | 'overflowY'
+    | 'overflowBlock'
+    | 'overflowInline'
+    | 'overflowWrap'
+    | 'pointerEvents'
+    | 'position'
+    | 'resize'
+    | 'scrollBehavior'
+    | 'touchAction'
+    | 'transformBox'
+    | 'transformStyle'
+    | 'userSelect'
+    | 'visibility'
+    | 'wordBreak'
+    | 'writingMode'
   ```
 
 - Updated dependencies [657ca5da]
@@ -8804,38 +8649,38 @@ export default defineConfig({
 
   ```ts
   const card = defineRecipe({
-    className: "card",
-    base: { color: "white" },
+    className: 'card',
+    base: { color: 'white' },
     variants: {
       size: {
-        small: { fontSize: "14px" },
-        large: { fontSize: "18px" },
+        small: { fontSize: '14px' },
+        large: { fontSize: '18px' },
       },
       visual: {
-        primary: { backgroundColor: "blue" },
-        secondary: { backgroundColor: "gray" },
+        primary: { backgroundColor: 'blue' },
+        secondary: { backgroundColor: 'gray' },
       },
     },
-  });
+  })
 
   export default defineConfig({
     // ...
     staticCss: {
       recipes: {
-        card: ["*"], // this
+        card: ['*'], // this
 
         // was equivalent to:
         card: [
           // notice how `responsive: true` was implicitly added
-          { size: ["*"], responsive: true },
-          { visual: ["*"], responsive: true },
+          { size: ['*'], responsive: true },
+          { visual: ['*'], responsive: true },
         ],
 
         //   will now correctly be equivalent to:
-        card: [{ size: ["*"] }, { visual: ["*"] }],
+        card: [{ size: ['*'] }, { visual: ['*'] }],
       },
     },
-  });
+  })
   ```
 
   Here's the diff in the generated CSS:
@@ -8982,17 +8827,17 @@ export default defineConfig({
 
   ```ts
   css({
-    bg: "[#3B00B9]", // ✅ was okay
+    bg: '[#3B00B9]', // ✅ was okay
     _dark: {
       // ✅ was okay
-      color: "[#3B00B9]",
+      color: '[#3B00B9]',
     },
 
     // ❌ Not okay, will be fixed in this patch
     color: {
-      _dark: "[#3B00B9]",
+      _dark: '[#3B00B9]',
     },
-  });
+  })
   ```
 
 - 647f05c9: Fix a CSS generation issue with `config.strictTokens` when using the `[xxx]` escape-hatch syntax with `!` or
@@ -9000,9 +8845,9 @@ export default defineConfig({
 
   ```ts
   css({
-    borderWidth: "[2px!]",
-    width: "[2px !important]",
-  });
+    borderWidth: '[2px!]',
+    width: '[2px !important]',
+  })
   ```
 
 - Updated dependencies [8f4ce97c]
@@ -9043,18 +8888,18 @@ export default defineConfig({
   and suffixing with `]`, e.g. writing `[123px]` as a value will bypass the token validation.
 
   ```ts
-  import { css } from "../styled-system/css";
+  import { css } from '../styled-system/css'
 
   css({
     // @ts-expect-error TS will throw when using from strictTokens: true
-    color: "#fff",
+    color: '#fff',
     // @ts-expect-error TS will throw when using from strictTokens: true
-    width: "100px",
+    width: '100px',
 
     // ✅ but this is now allowed:
-    bgColor: "[rgb(51 155 240)]",
-    fontSize: "[12px]",
-  });
+    bgColor: '[rgb(51 155 240)]',
+    fontSize: '[12px]',
+  })
   ```
 
 ### Patch Changes
@@ -9088,49 +8933,49 @@ export default defineConfig({
 - 105f74ce: Add a way to specify a recipe's `staticCss` options from inside a recipe config, e.g.:
 
   ```js
-  import { defineRecipe } from "@pandacss/dev";
+  import { defineRecipe } from '@pandacss/dev'
 
   const card = defineRecipe({
-    className: "card",
-    base: { color: "white" },
+    className: 'card',
+    base: { color: 'white' },
     variants: {
       size: {
-        small: { fontSize: "14px" },
-        large: { fontSize: "18px" },
+        small: { fontSize: '14px' },
+        large: { fontSize: '18px' },
       },
     },
-    staticCss: [{ size: ["*"] }],
-  });
+    staticCss: [{ size: ['*'] }],
+  })
   ```
 
   would be the equivalent of defining it inside the main config:
 
   ```js
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
     staticCss: {
       recipes: {
         card: {
-          size: ["*"],
+          size: ['*'],
         },
       },
     },
-  });
+  })
   ```
 
 - 052283c2: Fix vue `styled` factory internal class merging, for example:
 
   ```vue
   <script setup>
-  import { styled } from "../styled-system/jsx";
+  import { styled } from '../styled-system/jsx'
 
-  const StyledButton = styled("button", {
+  const StyledButton = styled('button', {
     base: {
-      bgColor: "red.300",
+      bgColor: 'red.300',
     },
-  });
+  })
   </script>
   <template>
     <StyledButton id="test" class="test">
@@ -9199,18 +9044,18 @@ export default defineConfig({
 
   ```ts
   // config.strictTokens = true
-  css({ display: "flex" }); // OK, didn't throw
-  css({ display: "block" }); // OK, didn't throw
-  css({ display: "abc" }); // ❌ didn't throw even though 'abc' is not a valid value for 'display'
+  css({ display: 'flex' }) // OK, didn't throw
+  css({ display: 'block' }) // OK, didn't throw
+  css({ display: 'abc' }) // ❌ didn't throw even though 'abc' is not a valid value for 'display'
   ```
 
   Now:
 
   ```ts
   // config.strictTokens = true
-  css({ display: "flex" }); // OK, didn't throw
-  css({ display: "block" }); // OK, didn't throw
-  css({ display: "abc" }); // ✅ will throw since 'abc' is not a valid value for 'display'
+  css({ display: 'flex' }) // OK, didn't throw
+  css({ display: 'block' }) // OK, didn't throw
+  css({ display: 'abc' }) // ✅ will throw since 'abc' is not a valid value for 'display'
   ```
 
 - Updated dependencies [61831040]
@@ -9269,28 +9114,22 @@ export default defineConfig({
 - b7cb2073: Add a `splitCssProps` utility exported from the {outdir}/jsx entrypoint
 
   ```tsx
-  import { splitCssProps, styled } from "../styled-system/jsx";
-  import type { HTMLStyledProps } from "../styled-system/types";
+  import { splitCssProps, styled } from '../styled-system/jsx'
+  import type { HTMLStyledProps } from '../styled-system/types'
 
-  function SplitComponent({ children, ...props }: HTMLStyledProps<"div">) {
-    const [cssProps, restProps] = splitCssProps(props);
+  function SplitComponent({ children, ...props }: HTMLStyledProps<'div'>) {
+    const [cssProps, restProps] = splitCssProps(props)
     return (
-      <styled.div
-        {...restProps}
-        className={css(
-          { display: "flex", height: "20", width: "20" },
-          cssProps,
-        )}
-      >
+      <styled.div {...restProps} className={css({ display: 'flex', height: '20', width: '20' }, cssProps)}>
         {children}
       </styled.div>
-    );
+    )
   }
 
   // Usage
 
   function App() {
-    return <SplitComponent margin="2">Click me</SplitComponent>;
+    return <SplitComponent margin="2">Click me</SplitComponent>
   }
   ```
 
@@ -9383,16 +9222,16 @@ export default defineConfig({
   together and the styles will be merged correctly.
 
   ```jsx
-  const Box = styled("div", {
+  const Box = styled('div', {
     base: {
-      background: "red.light",
-      color: "white",
+      background: 'red.light',
+      color: 'white',
     },
-  });
+  })
 
   const ExtendedBox = styled(Box, {
-    base: { background: "red.dark" },
-  });
+    base: { background: 'red.dark' },
+  })
 
   // <ExtendedBox> will have a background of `red.dark` and a color of `white`
   ```
@@ -9405,32 +9244,32 @@ export default defineConfig({
   - CVA or Inline CVA + Config Recipe = ❌
 
   ```jsx
-  import { button } from "../styled-system/recipes";
+  import { button } from '../styled-system/recipes'
 
-  const Button = styled("div", button);
+  const Button = styled('div', button)
 
   // ❌ This will throw an error
   const ExtendedButton = styled(Button, {
-    base: { background: "red.dark" },
-  });
+    base: { background: 'red.dark' },
+  })
   ```
 
 - fbf062c6: Added a new type to extract variants out of styled components
 
   ```tsx
-  import { StyledVariantProps } from "../styled-system/jsx";
+  import { StyledVariantProps } from '../styled-system/jsx'
 
-  const Button = styled("button", {
-    base: { color: "black" },
+  const Button = styled('button', {
+    base: { color: 'black' },
     variants: {
       state: {
-        error: { color: "red" },
-        success: { color: "green" },
+        error: { color: 'red' },
+        success: { color: 'green' },
       },
     },
-  });
+  })
 
-  type ButtonVariantProps = StyledVariantProps<typeof Button>;
+  type ButtonVariantProps = StyledVariantProps<typeof Button>
   //   ^ { state?: 'error' | 'success' | undefined }
   ```
 
@@ -9532,9 +9371,9 @@ export default defineConfig({
 
   ```ts
   interface FactoryOptions<TProps extends Dict> {
-    dataAttr?: boolean;
-    defaultProps?: TProps;
-    shouldForwardProp?(prop: string, variantKeys: string[]): boolean;
+    dataAttr?: boolean
+    defaultProps?: TProps
+    shouldForwardProp?(prop: string, variantKeys: string[]): boolean
   }
   ```
 
@@ -9542,16 +9381,16 @@ export default defineConfig({
     This is useful for testing and debugging.
 
   ```jsx
-  import { styled } from "../styled-system/jsx";
-  import { button } from "../styled-system/recipes";
+  import { styled } from '../styled-system/jsx'
+  import { button } from '../styled-system/recipes'
 
-  const Button = styled("button", button, { dataAttr: true });
+  const Button = styled('button', button, { dataAttr: true })
 
   const App = () => (
     <Button variant="secondary" mt="10px">
       Button
     </Button>
-  );
+  )
   // Will render something like <button data-recipe="button" class="btn btn--variant_purple mt_10px">Button</button>
   ```
 
@@ -9559,17 +9398,17 @@ export default defineConfig({
     override the default variants or base styles of a recipe.
 
   ```jsx
-  import { styled } from "../styled-system/jsx";
-  import { button } from "../styled-system/recipes";
+  import { styled } from '../styled-system/jsx'
+  import { button } from '../styled-system/recipes'
 
-  const Button = styled("button", button, {
+  const Button = styled('button', button, {
     defaultProps: {
-      variant: "secondary",
-      px: "10px",
+      variant: 'secondary',
+      px: '10px',
     },
-  });
+  })
 
-  const App = () => <Button>Button</Button>;
+  const App = () => <Button>Button</Button>
   // Will render something like <button class="btn btn--variant_secondary px_10px">Button</button>
   ```
 
@@ -9577,20 +9416,19 @@ export default defineConfig({
     props except recipe variants and style props are forwarded.
 
   ```jsx
-  import { styled } from "../styled-system/jsx";
-  import { button } from "../styled-system/recipes";
-  import { isCssProperty } from "../styled-system/jsx";
-  import { motion, isValidMotionProp } from "framer-motion";
+  import { styled } from '../styled-system/jsx'
+  import { button } from '../styled-system/recipes'
+  import { isCssProperty } from '../styled-system/jsx'
+  import { motion, isValidMotionProp } from 'framer-motion'
 
   const StyledMotion = styled(
     motion.div,
     {},
     {
       shouldForwardProp: (prop, variantKeys) =>
-        isValidMotionProp(prop) ||
-        (!variantKeys.includes(prop) && !isCssProperty(prop)),
+        isValidMotionProp(prop) || (!variantKeys.includes(prop) && !isCssProperty(prop)),
     },
-  );
+  )
   ```
 
   - @pandacss/types@0.15.4
@@ -9613,42 +9451,42 @@ export default defineConfig({
 
   ```ts
   export default defineConfig({
-    outdir: "./outdir",
+    outdir: './outdir',
     importMap: {
-      css: "#panda/styled-system/css",
-      recipes: "#panda/styled-system/recipes",
-      patterns: "#panda/styled-system/patterns",
-      jsx: "#panda/styled-system/jsx",
+      css: '#panda/styled-system/css',
+      recipes: '#panda/styled-system/recipes',
+      patterns: '#panda/styled-system/patterns',
+      jsx: '#panda/styled-system/jsx',
     },
-  });
+  })
   ```
 
   Or you could also make your outdir an actual package from your monorepo:
 
   ```ts
   export default defineConfig({
-    outdir: "../packages/styled-system",
+    outdir: '../packages/styled-system',
     importMap: {
-      css: "@monorepo/styled-system",
-      recipes: "@monorepo/styled-system",
-      patterns: "@monorepo/styled-system",
-      jsx: "@monorepo/styled-system",
+      css: '@monorepo/styled-system',
+      recipes: '@monorepo/styled-system',
+      patterns: '@monorepo/styled-system',
+      jsx: '@monorepo/styled-system',
     },
-  });
+  })
   ```
 
   Working with tsconfig paths aliases is easy:
 
   ```ts
   export default defineConfig({
-    outdir: "styled-system",
+    outdir: 'styled-system',
     importMap: {
-      css: "styled-system/css",
-      recipes: "styled-system/recipes",
-      patterns: "styled-system/patterns",
-      jsx: "styled-system/jsx",
+      css: 'styled-system/css',
+      recipes: 'styled-system/recipes',
+      patterns: 'styled-system/patterns',
+      jsx: 'styled-system/jsx',
     },
-  });
+  })
   ```
 
 - 1eb31118: Automatically allow overriding config recipe compoundVariants styles within the `styled` JSX factory,
@@ -9658,22 +9496,22 @@ export default defineConfig({
 
   ```ts file="panda.config.ts"
   const button = defineRecipe({
-    className: "btn",
-    base: { color: "green", fontSize: "16px" },
+    className: 'btn',
+    base: { color: 'green', fontSize: '16px' },
     variants: {
-      size: { small: { fontSize: "14px" } },
+      size: { small: { fontSize: '14px' } },
     },
-    compoundVariants: [{ size: "small", css: { color: "blue" } }],
-  });
+    compoundVariants: [{ size: 'small', css: { color: 'blue' } }],
+  })
   ```
 
   This would previously not merge the `color` property overrides, but now it does:
 
   ```tsx file="example.tsx"
-  import { styled } from "../styled-system/jsx";
-  import { button } from "../styled-system/recipes";
+  import { styled } from '../styled-system/jsx'
+  import { button } from '../styled-system/recipes'
 
-  const Button = styled("button", button);
+  const Button = styled('button', button)
 
   function App() {
     return (
@@ -9682,7 +9520,7 @@ export default defineConfig({
           Click me
         </Button>
       </>
-    );
+    )
   }
   ```
 
@@ -9861,8 +9699,8 @@ export default defineConfig({
     passed in. This is to allow the `css` function to merge the styles correctly.
 
   ```tsx
-  import { css } from "../styled-system/css";
-  css({ mx: "3", paddingTop: "4" }, { mx: "10", pt: "6" }); // => mx_10 pt_6
+  import { css } from '../styled-system/css'
+  css({ mx: '3', paddingTop: '4' }, { mx: '10', pt: '6' }) // => mx_10 pt_6
   ```
 
   > ⚠️ This approach should be preferred for merging styles over the current `cx` function, which will be reverted to
@@ -9887,29 +9725,26 @@ export default defineConfig({
   be merged correctly.
 
   ```tsx title="src/components/Button.tsx"
-  import { css } from "../../styled-system/css";
+  import { css } from '../../styled-system/css'
 
   export const Button = ({ css: cssProp = {}, children }) => {
-    const className = css(
-      { display: "flex", alignItem: "center", color: "black" },
-      cssProp,
-    );
-    return <button className={className}>{children}</button>;
-  };
+    const className = css({ display: 'flex', alignItem: 'center', color: 'black' }, cssProp)
+    return <button className={className}>{children}</button>
+  }
   ```
 
   Then you can use the `Button` component like this:
 
   ```tsx title="src/app/page.tsx"
-  import { css } from "../../styled-system/css";
-  import { Button, Thingy } from "./Button";
+  import { css } from '../../styled-system/css'
+  import { Button, Thingy } from './Button'
 
   export default function Page() {
     return (
-      <Button css={{ color: "pink", _hover: { color: "red" } }}>
+      <Button css={{ color: 'pink', _hover: { color: 'red' } }}>
         will result in `class="d_flex items_center text_pink hover:text_red"`
       </Button>
-    );
+    )
   }
   ```
 
@@ -9921,51 +9756,51 @@ export default defineConfig({
   **Pattern Example:**
 
   ```tsx title="src/components/Button.tsx"
-  import { hstack } from "../../styled-system/patterns";
-  import { css, cva } from "../../styled-system/css";
+  import { hstack } from '../../styled-system/patterns'
+  import { css, cva } from '../../styled-system/css'
 
   export const Button = ({ css: cssProp = {}, children }) => {
     // using the flex pattern
     const hstackProps = hstack.raw({
-      border: "1px solid",
-      _hover: { color: "blue.400" },
-    });
+      border: '1px solid',
+      _hover: { color: 'blue.400' },
+    })
 
     // merging the styles
-    const className = css(hstackProps, cssProp);
+    const className = css(hstackProps, cssProp)
 
-    return <button className={className}>{children}</button>;
-  };
+    return <button className={className}>{children}</button>
+  }
   ```
 
   **CVA Example:**
 
   ```tsx title="src/components/Button.tsx"
-  import { css, cva } from "../../styled-system/css";
+  import { css, cva } from '../../styled-system/css'
 
   const buttonRecipe = cva({
-    base: { display: "flex", fontSize: "lg" },
+    base: { display: 'flex', fontSize: 'lg' },
     variants: {
       variant: {
-        primary: { color: "white", backgroundColor: "blue.500" },
+        primary: { color: 'white', backgroundColor: 'blue.500' },
       },
     },
-  });
+  })
 
   export const Button = ({ css: cssProp = {}, children }) => {
     const className = css(
       // using the button recipe
-      buttonRecipe.raw({ variant: "primary" }),
+      buttonRecipe.raw({ variant: 'primary' }),
 
       // adding style overrides (internal)
-      { _hover: { color: "blue.400" } },
+      { _hover: { color: 'blue.400' } },
 
       // adding style overrides (external)
       cssProp,
-    );
+    )
 
-    return <button className={className}>{props.children}</button>;
-  };
+    return <button className={className}>{props.children}</button>
+  }
   ```
 
 - 36fdff89: Fix bug in generated js code for atomic slot recipe produce where `splitVariantProps` didn't work without
@@ -10012,14 +9847,7 @@ export default defineConfig({
   Example:
 
   ```tsx
-  <h1
-    className={cx(
-      css({ mx: "3", paddingTop: "4" }),
-      css({ mx: "10", pt: "6" }),
-    )}
-  >
-    Will result in "mx_10 pt_6"
-  </h1>
+  <h1 className={cx(css({ mx: '3', paddingTop: '4' }), css({ mx: '10', pt: '6' }))}>Will result in "mx_10 pt_6"</h1>
   ```
 
 - dfb3f85f: Add missing svg props types
@@ -10064,12 +9892,12 @@ export default defineConfig({
   **Definition**
 
   ```jsx
-  import { sva } from "styled-system/css";
+  import { sva } from 'styled-system/css'
 
   const button = sva({
-    slots: ["label", "icon"],
+    slots: ['label', 'icon'],
     base: {
-      label: { color: "red", textDecoration: "underline" },
+      label: { color: 'red', textDecoration: 'underline' },
     },
     variants: {
       rounded: {
@@ -10077,33 +9905,33 @@ export default defineConfig({
       },
       size: {
         sm: {
-          label: { fontSize: "sm" },
-          icon: { fontSize: "sm" },
+          label: { fontSize: 'sm' },
+          icon: { fontSize: 'sm' },
         },
         lg: {
-          label: { fontSize: "lg" },
-          icon: { fontSize: "lg", color: "pink" },
+          label: { fontSize: 'lg' },
+          icon: { fontSize: 'lg', color: 'pink' },
         },
       },
     },
     defaultVariants: {
-      size: "sm",
+      size: 'sm',
     },
-  });
+  })
   ```
 
   **Usage**
 
   ```jsx
   export function App() {
-    const btnClass = button({ size: "lg", rounded: true });
+    const btnClass = button({ size: 'lg', rounded: true })
 
     return (
       <button>
         <p class={btnClass.label}> Label</p>
         <p class={btnClass.icon}> Icon</p>
       </button>
-    );
+    )
   }
   ```
 
@@ -10168,26 +9996,26 @@ export default defineConfig({
   Update the `jsx` property to be used for advanced tracking of custom pattern components.
 
   ```jsx
-  import { Circle } from "styled-system/jsx";
+  import { Circle } from 'styled-system/jsx'
   const CustomCircle = ({ children, ...props }) => {
-    return <Circle {...props}>{children}</Circle>;
-  };
+    return <Circle {...props}>{children}</Circle>
+  }
   ```
 
   To track the `CustomCircle` component, you can now use the `jsx` property.
 
   ```js
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     patterns: {
       extend: {
         circle: {
-          jsx: ["CustomCircle"],
+          jsx: ['CustomCircle'],
         },
       },
     },
-  });
+  })
   ```
 
 ### Patch Changes
@@ -10285,17 +10113,9 @@ export default defineConfig({
   ```tsx
   const ComponentWithMultipleRecipes = ({ variant }) => {
     return (
-      <button
-        className={cx(
-          pinkRecipe({ variant }),
-          greenRecipe({ variant }),
-          blueRecipe({ variant }),
-        )}
-      >
-        Hello
-      </button>
-    );
-  };
+      <button className={cx(pinkRecipe({ variant }), greenRecipe({ variant }), blueRecipe({ variant }))}>Hello</button>
+    )
+  }
   ```
 
   Given a `panda.config.ts` with recipes each including a common `jsx` tag name, such as:
@@ -10379,7 +10199,7 @@ export default defineConfig({
   ```ts
   staticCss: {
     recipes: {
-      button: [{ size: ["*"], shape: ["*"] }];
+      button: [{ size: ['*'], shape: ['*'] }]
     }
   }
   ```
@@ -10389,7 +10209,7 @@ export default defineConfig({
   ```ts
   staticCss: {
     recipes: {
-      button: ["*"];
+      button: ['*']
     }
   }
   ```
@@ -10427,8 +10247,8 @@ export default defineConfig({
   // panda.config.ts
   export default defineConfig({
     //...
-    syntax: "template-literal",
-  });
+    syntax: 'template-literal',
+  })
   ```
 
   > For existing projects, you might need to run the `panda codegen --clean`
@@ -10460,12 +10280,12 @@ export default defineConfig({
 - 5b344b9c: Add support for disabling shorthand props
 
   ```ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
     shorthands: false,
-  });
+  })
   ```
 
 ### Patch Changes
diff --git a/packages/is-valid-prop/CHANGELOG.md b/packages/is-valid-prop/CHANGELOG.md
index 8c26b5284..a61470946 100644
--- a/packages/is-valid-prop/CHANGELOG.md
+++ b/packages/is-valid-prop/CHANGELOG.md
@@ -33,12 +33,12 @@
     theme: {
       extend: {
         colors: {
-          primary: { value: "blue" },
+          primary: { value: 'blue' },
         },
         // borderWidths: {}, // ⚠️ nothing defined here
       },
     },
-  });
+  })
   ```
 
   ```ts
@@ -49,8 +49,8 @@
 
     // ✅ after this PR, TS will not throw an error anymore as you don't have any `borderWidths` tokens
     // if you add one, this will error again (as it's supposed to)
-    borderWidths: "123px",
-  });
+    borderWidths: '123px',
+  })
   ```
 
   ## Description
diff --git a/packages/logger/CHANGELOG.md b/packages/logger/CHANGELOG.md
index 7bb9cee6b..44da35011 100644
--- a/packages/logger/CHANGELOG.md
+++ b/packages/logger/CHANGELOG.md
@@ -153,11 +153,11 @@
   ```js
   module.exports = {
     plugins: {
-      "@pandacss/dev/postcss": {
-        logfile: "./logs/panda.log",
+      '@pandacss/dev/postcss': {
+        logfile: './logs/panda.log',
       },
     },
-  };
+  }
   ```
 
 - Updated dependencies [74485ef1]
diff --git a/packages/node/CHANGELOG.md b/packages/node/CHANGELOG.md
index 02e2b474d..73bebb557 100644
--- a/packages/node/CHANGELOG.md
+++ b/packages/node/CHANGELOG.md
@@ -307,10 +307,10 @@
 
   ```ts
   css({
-    padding: "1px",
-    paddingTop: "3px",
-    paddingBottom: "4px",
-  });
+    padding: '1px',
+    paddingTop: '3px',
+    paddingBottom: '4px',
+  })
   ```
 
   Will now always generate the following css:
@@ -438,8 +438,8 @@
   ```ts
   export default defineConfig({
     // ...
-    dependencies: ["path/to/files/**.ts"],
-  });
+    dependencies: ['path/to/files/**.ts'],
+  })
   ```
 
   - Invoke `config:change` hook in more situations (when the `--watch` flag is passed to `panda codegen`,
@@ -491,54 +491,39 @@
      * Called when the config is resolved, after all the presets are loaded and merged.
      * This is the first hook called, you can use it to tweak the config before the context is created.
      */
-    "config:resolved": (args: { conf: LoadConfigResult }) => MaybeAsyncReturn;
+    'config:resolved': (args: { conf: LoadConfigResult }) => MaybeAsyncReturn
     /**
      * Called when the Panda context has been created and the API is ready to be used.
      */
-    "context:created": (args: {
-      ctx: ApiInterface;
-      logger: LoggerInterface;
-    }) => void;
+    'context:created': (args: { ctx: ApiInterface; logger: LoggerInterface }) => void
     /**
      * Called when the config file or one of its dependencies (imports) has changed.
      */
-    "config:change": (args: { config: UserConfig }) => MaybeAsyncReturn;
+    'config:change': (args: { config: UserConfig }) => MaybeAsyncReturn
     /**
      * Called after reading the file content but before parsing it.
      * You can use this hook to transform the file content to a tsx-friendly syntax so that Panda's parser can parse it.
      * You can also use this hook to parse the file's content on your side using a custom parser, in this case you don't have to return anything.
      */
-    "parser:before": (args: {
-      filePath: string;
-      content: string;
-    }) => string | void;
+    'parser:before': (args: { filePath: string; content: string }) => string | void
     /**
      * Called after the file styles are extracted and processed into the resulting ParserResult object.
      * You can also use this hook to add your own extraction results from your custom parser to the ParserResult object.
      */
-    "parser:after": (args: {
-      filePath: string;
-      result: ParserResultInterface | undefined;
-    }) => void;
+    'parser:after': (args: { filePath: string; result: ParserResultInterface | undefined }) => void
     /**
      * Called after the codegen is completed
      */
-    "codegen:done": () => MaybeAsyncReturn;
+    'codegen:done': () => MaybeAsyncReturn
     /**
      * Called right before adding the design-system CSS (global, static, preflight, tokens, keyframes) to the final CSS
      * Called right before writing/injecting the final CSS (styles.css) that contains the design-system CSS and the parser CSS
      * You can use it to tweak the CSS content before it's written to disk or injected through the postcss plugin.
      */
-    "cssgen:done": (args: {
-      artifact:
-        | "global"
-        | "static"
-        | "reset"
-        | "tokens"
-        | "keyframes"
-        | "styles.css";
-      content: string;
-    }) => string | void;
+    'cssgen:done': (args: {
+      artifact: 'global' | 'static' | 'reset' | 'tokens' | 'keyframes' | 'styles.css'
+      content: string
+    }) => string | void
   }
   ```
 
@@ -1156,16 +1141,16 @@
   together and the styles will be merged correctly.
 
   ```jsx
-  const Box = styled("div", {
+  const Box = styled('div', {
     base: {
-      background: "red.light",
-      color: "white",
+      background: 'red.light',
+      color: 'white',
     },
-  });
+  })
 
   const ExtendedBox = styled(Box, {
-    base: { background: "red.dark" },
-  });
+    base: { background: 'red.dark' },
+  })
 
   // <ExtendedBox> will have a background of `red.dark` and a color of `white`
   ```
@@ -1178,14 +1163,14 @@
   - CVA or Inline CVA + Config Recipe = ❌
 
   ```jsx
-  import { button } from "../styled-system/recipes";
+  import { button } from '../styled-system/recipes'
 
-  const Button = styled("div", button);
+  const Button = styled('div', button)
 
   // ❌ This will throw an error
   const ExtendedButton = styled(Button, {
-    base: { background: "red.dark" },
-  });
+    base: { background: 'red.dark' },
+  })
   ```
 
 ### Patch Changes
@@ -1989,11 +1974,11 @@ This hook is called right before writing the codegen files to disk. You can use
 export default defineConfig({
   // ...
   hooks: {
-    "codegen:prepare": ({ artifacts, changed }) => {
+    'codegen:prepare': ({ artifacts, changed }) => {
       // do something with the emitted js/d.ts files
     },
   },
-});
+})
 ```
 
 - d5977c24: - Add a `--logfile` flag to the `panda`, `panda codegen`, `panda cssgen` and `panda debug` commands.
@@ -2010,11 +1995,11 @@ export default defineConfig({
   ```js
   module.exports = {
     plugins: {
-      "@pandacss/dev/postcss": {
-        logfile: "./logs/panda.log",
+      '@pandacss/dev/postcss': {
+        logfile: './logs/panda.log',
       },
     },
-  };
+  }
   ```
 
 - Updated dependencies [0dd45b6a]
@@ -2064,8 +2049,8 @@ export default defineConfig({
   ```ts
   export default defineConfig({
     // ...
-    dependencies: ["path/to/files/**.ts"],
-  });
+    dependencies: ['path/to/files/**.ts'],
+  })
   ```
 
   - Invoke `config:change` hook in more situations (when the `--watch` flag is passed to `panda codegen`,
@@ -2117,54 +2102,39 @@ export default defineConfig({
      * Called when the config is resolved, after all the presets are loaded and merged.
      * This is the first hook called, you can use it to tweak the config before the context is created.
      */
-    "config:resolved": (args: { conf: LoadConfigResult }) => MaybeAsyncReturn;
+    'config:resolved': (args: { conf: LoadConfigResult }) => MaybeAsyncReturn
     /**
      * Called when the Panda context has been created and the API is ready to be used.
      */
-    "context:created": (args: {
-      ctx: ApiInterface;
-      logger: LoggerInterface;
-    }) => void;
+    'context:created': (args: { ctx: ApiInterface; logger: LoggerInterface }) => void
     /**
      * Called when the config file or one of its dependencies (imports) has changed.
      */
-    "config:change": (args: { config: UserConfig }) => MaybeAsyncReturn;
+    'config:change': (args: { config: UserConfig }) => MaybeAsyncReturn
     /**
      * Called after reading the file content but before parsing it.
      * You can use this hook to transform the file content to a tsx-friendly syntax so that Panda's parser can parse it.
      * You can also use this hook to parse the file's content on your side using a custom parser, in this case you don't have to return anything.
      */
-    "parser:before": (args: {
-      filePath: string;
-      content: string;
-    }) => string | void;
+    'parser:before': (args: { filePath: string; content: string }) => string | void
     /**
      * Called after the file styles are extracted and processed into the resulting ParserResult object.
      * You can also use this hook to add your own extraction results from your custom parser to the ParserResult object.
      */
-    "parser:after": (args: {
-      filePath: string;
-      result: ParserResultInterface | undefined;
-    }) => void;
+    'parser:after': (args: { filePath: string; result: ParserResultInterface | undefined }) => void
     /**
      * Called after the codegen is completed
      */
-    "codegen:done": () => MaybeAsyncReturn;
+    'codegen:done': () => MaybeAsyncReturn
     /**
      * Called right before adding the design-system CSS (global, static, preflight, tokens, keyframes) to the final CSS
      * Called right before writing/injecting the final CSS (styles.css) that contains the design-system CSS and the parser CSS
      * You can use it to tweak the CSS content before it's written to disk or injected through the postcss plugin.
      */
-    "cssgen:done": (args: {
-      artifact:
-        | "global"
-        | "static"
-        | "reset"
-        | "tokens"
-        | "keyframes"
-        | "styles.css";
-      content: string;
-    }) => string | void;
+    'cssgen:done': (args: {
+      artifact: 'global' | 'static' | 'reset' | 'tokens' | 'keyframes' | 'styles.css'
+      content: string
+    }) => string | void
   }
   ```
 
@@ -2782,16 +2752,16 @@ export default defineConfig({
   together and the styles will be merged correctly.
 
   ```jsx
-  const Box = styled("div", {
+  const Box = styled('div', {
     base: {
-      background: "red.light",
-      color: "white",
+      background: 'red.light',
+      color: 'white',
     },
-  });
+  })
 
   const ExtendedBox = styled(Box, {
-    base: { background: "red.dark" },
-  });
+    base: { background: 'red.dark' },
+  })
 
   // <ExtendedBox> will have a background of `red.dark` and a color of `white`
   ```
@@ -2804,14 +2774,14 @@ export default defineConfig({
   - CVA or Inline CVA + Config Recipe = ❌
 
   ```jsx
-  import { button } from "../styled-system/recipes";
+  import { button } from '../styled-system/recipes'
 
-  const Button = styled("div", button);
+  const Button = styled('div', button)
 
   // ❌ This will throw an error
   const ExtendedButton = styled(Button, {
-    base: { background: "red.dark" },
-  });
+    base: { background: 'red.dark' },
+  })
   ```
 
 ### Patch Changes
diff --git a/packages/parser/CHANGELOG.md b/packages/parser/CHANGELOG.md
index a19ea494d..7e19b5a68 100644
--- a/packages/parser/CHANGELOG.md
+++ b/packages/parser/CHANGELOG.md
@@ -11,7 +11,7 @@
   **Before**
 
   ```jsx
-  import { linkBox, linkOverlay } from "styled-system/patterns";
+  import { linkBox, linkOverlay } from 'styled-system/patterns'
 
   const App = () => {
     return (
@@ -21,26 +21,26 @@
           Link
         </a>
       </div>
-    );
-  };
+    )
+  }
   ```
 
   **After**
 
   ```jsx
-  import { css } from "styled-system/css";
-  import { linkOverlay } from "styled-system/patterns";
+  import { css } from 'styled-system/css'
+  import { linkOverlay } from 'styled-system/patterns'
 
   const App = () => {
     return (
-      <div className={css({ pos: "relative" })}>
+      <div className={css({ pos: 'relative' })}>
         <img src="https://via.placeholder.com/150" alt="placeholder" />
         <a href="#" className={linkOverlay()}>
           Link
         </a>
       </div>
-    );
-  };
+    )
+  }
   ```
 
 ### Patch Changes
@@ -64,28 +64,23 @@
   This makes it even easier to merge styles from multiple sources.
 
   ```tsx
-  import { Stack, styled } from "../styled-system/jsx";
+  import { Stack, styled } from '../styled-system/jsx'
 
   const HeroSection = (props) => {
     return (
-      <Stack css={[{ color: "blue.300", padding: "4" }, props.css]}>
-        <styled.div css={[{ fontSize: "2xl" }, props.hero]}>
-          Hero Section
-        </styled.div>
+      <Stack css={[{ color: 'blue.300', padding: '4' }, props.css]}>
+        <styled.div css={[{ fontSize: '2xl' }, props.hero]}>Hero Section</styled.div>
       </Stack>
-    );
-  };
+    )
+  }
 
   const App = () => {
     return (
       <>
-        <HeroSection
-          css={{ backgroundColor: "yellow.300" }}
-          hero={css.raw({ fontSize: "4xl", color: "red.300" })}
-        />
+        <HeroSection css={{ backgroundColor: 'yellow.300' }} hero={css.raw({ fontSize: '4xl', color: 'red.300' })} />
       </>
-    );
-  };
+    )
+  }
   ```
 
   should render something like:
@@ -127,21 +122,21 @@
 - 99870bb: Fix issue where setting the pattern `jsx` option with dot notation didn't work.
 
   ```jsx
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
     patterns: {
       extend: {
         grid: {
-          jsx: ["Form.Group", "Grid"],
+          jsx: ['Form.Group', 'Grid'],
         },
         stack: {
-          jsx: ["Form.Action", "Stack"],
+          jsx: ['Form.Action', 'Stack'],
         },
       },
     },
-  });
+  })
   ```
 
 - Updated dependencies [88049c5]
@@ -183,7 +178,7 @@
 - 35bd134: Fix JSX matching with recipes after introducing namespace imports
 
   ```ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
@@ -191,11 +186,11 @@
       extend: {
         slotRecipes: {
           tabs: {
-            className: "tabs",
-            slots: ["root", "list", "trigger", "content", "indicator"],
+            className: 'tabs',
+            slots: ['root', 'list', 'trigger', 'content', 'indicator'],
             base: {
               root: {
-                display: "flex",
+                display: 'flex',
                 // ...
               },
             },
@@ -203,7 +198,7 @@
         },
       },
     },
-  });
+  })
   ```
 
   ```tsx
@@ -219,8 +214,8 @@
           <Tabs.Indicator />
         </Tabs.List>
       </Tabs.Root>
-    );
-  };
+    )
+  }
   ```
 
   We introduced a bug in [v0.34.2](https://github.com/chakra-ui/panda/blob/main/CHANGELOG.md#0342---2024-03-08) where
@@ -259,13 +254,11 @@
 - c459b43: Fix extraction of JSX `styled` factory when using namespace imports
 
   ```tsx
-  import * as pandaJsx from "../styled-system/jsx";
+  import * as pandaJsx from '../styled-system/jsx'
 
   // ✅ this will work now
-  pandaJsx.styled("div", { base: { color: "red" } });
-  const App = () => (
-    <pandaJsx.styled.span color="blue">Hello</pandaJsx.styled.span>
-  );
+  pandaJsx.styled('div', { base: { color: 'red' } })
+  const App = () => <pandaJsx.styled.span color="blue">Hello</pandaJsx.styled.span>
   ```
 
 - Updated dependencies [50db354]
@@ -297,18 +290,18 @@
 - 0bf09f2: Allow using namespaced imports
 
   ```ts
-  import * as p from "styled-system/patterns";
-  import * as recipes from "styled-system/recipes";
-  import * as panda from "styled-system/css";
+  import * as p from 'styled-system/patterns'
+  import * as recipes from 'styled-system/recipes'
+  import * as panda from 'styled-system/css'
 
   // this will now be extracted
-  p.stack({ mt: "40px" });
+  p.stack({ mt: '40px' })
 
-  recipes.cardStyle({ rounded: true });
+  recipes.cardStyle({ rounded: true })
 
-  panda.css({ color: "red" });
-  panda.cva({ base: { color: "blue" } });
-  panda.sva({ base: { root: { color: "green" } } });
+  panda.css({ color: 'red' })
+  panda.cva({ base: { color: 'blue' } })
+  panda.sva({ base: { root: { color: 'green' } } })
   ```
 
 - Updated dependencies [0bf09f2]
@@ -370,25 +363,25 @@
 - 31071ba: Fix an issue for token names starting with '0'
 
   ```ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     theme: {
       tokens: {
         spacing: {
-          "025": {
-            value: "0.125rem",
+          '025': {
+            value: '0.125rem',
           },
         },
       },
     },
-  });
+  })
   ```
 
   and then using it like
 
   ```ts
-  css({ margin: "025" });
+  css({ margin: '025' })
   ```
 
   This would not generate the expected CSS because the parser would try to parse `025` as a number (`25`) instead of
@@ -399,7 +392,7 @@
   Given this config:
 
   ```ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
@@ -410,13 +403,13 @@
             bg: {
               primary: {
                 DEFAULT: {
-                  value: "{colors.red.500}",
+                  value: '{colors.red.500}',
                 },
                 base: {
-                  value: "{colors.green.500}",
+                  value: '{colors.green.500}',
                 },
                 hover: {
-                  value: "{colors.yellow.300}",
+                  value: '{colors.yellow.300}',
                 },
               },
             },
@@ -424,17 +417,17 @@
         },
       },
     },
-  });
+  })
   ```
 
   And this style usage:
 
   ```ts
-  import { css } from "styled-system/css";
+  import { css } from 'styled-system/css'
 
   css({
-    colorPalette: "bg.primary",
-  });
+    colorPalette: 'bg.primary',
+  })
   ```
 
   This is the difference in the generated css
@@ -465,11 +458,11 @@
   - Allow using multiple aliases for the same identifier for the `/css` entrypoints just like `/patterns` and `/recipes`
 
   ```ts
-  import { css } from "../styled-system/css";
-  import { css as css2 } from "../styled-system/css";
+  import { css } from '../styled-system/css'
+  import { css as css2 } from '../styled-system/css'
 
-  css({ display: "flex" });
-  css2({ flexDirection: "column" }); // this wasn't working before, now it does
+  css({ display: 'flex' })
+  css2({ flexDirection: 'column' }) // this wasn't working before, now it does
   ```
 
 - Updated dependencies [a032375]
@@ -517,10 +510,10 @@
 
   ```ts
   css({
-    padding: "1px",
-    paddingTop: "3px",
-    paddingBottom: "4px",
-  });
+    padding: '1px',
+    paddingTop: '3px',
+    paddingBottom: '4px',
+  })
   ```
 
   Will now always generate the following css:
@@ -580,17 +573,16 @@
   export default defineConfig({
     // ...
     hooks: {
-      "parser:before": ({ configure }) => {
+      'parser:before': ({ configure }) => {
         configure({
           // ignore the Select.Content entirely
-          matchTag: (tag) => tag !== "Select.Content",
+          matchTag: (tag) => tag !== 'Select.Content',
           // ...or specifically ignore the `position` property
-          matchTagProp: (tag, prop) =>
-            tag === "Select.Content" && prop !== "position",
-        });
+          matchTagProp: (tag, prop) => tag === 'Select.Content' && prop !== 'position',
+        })
       },
     },
-  });
+  })
   ```
 
 - Updated dependencies [6b829cab]
@@ -631,11 +623,11 @@
   ```js
   module.exports = {
     plugins: {
-      "@pandacss/dev/postcss": {
-        logfile: "./logs/panda.log",
+      '@pandacss/dev/postcss': {
+        logfile: './logs/panda.log',
       },
     },
-  };
+  }
   ```
 
 - Updated dependencies [0dd45b6a]
@@ -674,10 +666,10 @@
   css({
     // ✅ this is fine now, will resolve to something like
     // `@container (min-width: 56em)`
-    "@container (min-width: {sizes.4xl})": {
-      color: "green",
+    '@container (min-width: {sizes.4xl})': {
+      color: 'green',
     },
-  });
+  })
   ```
 
   Fix an issue where the curly token references would not be escaped if the token path was not found.
@@ -719,54 +711,39 @@
      * Called when the config is resolved, after all the presets are loaded and merged.
      * This is the first hook called, you can use it to tweak the config before the context is created.
      */
-    "config:resolved": (args: { conf: LoadConfigResult }) => MaybeAsyncReturn;
+    'config:resolved': (args: { conf: LoadConfigResult }) => MaybeAsyncReturn
     /**
      * Called when the Panda context has been created and the API is ready to be used.
      */
-    "context:created": (args: {
-      ctx: ApiInterface;
-      logger: LoggerInterface;
-    }) => void;
+    'context:created': (args: { ctx: ApiInterface; logger: LoggerInterface }) => void
     /**
      * Called when the config file or one of its dependencies (imports) has changed.
      */
-    "config:change": (args: { config: UserConfig }) => MaybeAsyncReturn;
+    'config:change': (args: { config: UserConfig }) => MaybeAsyncReturn
     /**
      * Called after reading the file content but before parsing it.
      * You can use this hook to transform the file content to a tsx-friendly syntax so that Panda's parser can parse it.
      * You can also use this hook to parse the file's content on your side using a custom parser, in this case you don't have to return anything.
      */
-    "parser:before": (args: {
-      filePath: string;
-      content: string;
-    }) => string | void;
+    'parser:before': (args: { filePath: string; content: string }) => string | void
     /**
      * Called after the file styles are extracted and processed into the resulting ParserResult object.
      * You can also use this hook to add your own extraction results from your custom parser to the ParserResult object.
      */
-    "parser:after": (args: {
-      filePath: string;
-      result: ParserResultInterface | undefined;
-    }) => void;
+    'parser:after': (args: { filePath: string; result: ParserResultInterface | undefined }) => void
     /**
      * Called after the codegen is completed
      */
-    "codegen:done": () => MaybeAsyncReturn;
+    'codegen:done': () => MaybeAsyncReturn
     /**
      * Called right before adding the design-system CSS (global, static, preflight, tokens, keyframes) to the final CSS
      * Called right before writing/injecting the final CSS (styles.css) that contains the design-system CSS and the parser CSS
      * You can use it to tweak the CSS content before it's written to disk or injected through the postcss plugin.
      */
-    "cssgen:done": (args: {
-      artifact:
-        | "global"
-        | "static"
-        | "reset"
-        | "tokens"
-        | "keyframes"
-        | "styles.css";
-      content: string;
-    }) => string | void;
+    'cssgen:done': (args: {
+      artifact: 'global' | 'static' | 'reset' | 'tokens' | 'keyframes' | 'styles.css'
+      content: string
+    }) => string | void
   }
   ```
 
@@ -905,8 +882,8 @@
   ```jsx
   css({
     // This didn't work, but now it does
-    base: { color: "blue" },
-  });
+    base: { color: 'blue' },
+  })
   ```
 
 - Updated dependencies [59fd291c]
@@ -950,38 +927,38 @@
 
   ```ts
   const card = defineRecipe({
-    className: "card",
-    base: { color: "white" },
+    className: 'card',
+    base: { color: 'white' },
     variants: {
       size: {
-        small: { fontSize: "14px" },
-        large: { fontSize: "18px" },
+        small: { fontSize: '14px' },
+        large: { fontSize: '18px' },
       },
       visual: {
-        primary: { backgroundColor: "blue" },
-        secondary: { backgroundColor: "gray" },
+        primary: { backgroundColor: 'blue' },
+        secondary: { backgroundColor: 'gray' },
       },
     },
-  });
+  })
 
   export default defineConfig({
     // ...
     staticCss: {
       recipes: {
-        card: ["*"], // this
+        card: ['*'], // this
 
         // was equivalent to:
         card: [
           // notice how `responsive: true` was implicitly added
-          { size: ["*"], responsive: true },
-          { visual: ["*"], responsive: true },
+          { size: ['*'], responsive: true },
+          { visual: ['*'], responsive: true },
         ],
 
         //   will now correctly be equivalent to:
-        card: [{ size: ["*"] }, { visual: ["*"] }],
+        card: [{ size: ['*'] }, { visual: ['*'] }],
       },
     },
-  });
+  })
   ```
 
   Here's the diff in the generated CSS:
@@ -1105,30 +1082,30 @@
   another file, such as when using `Ark-UI` like `import { comboboxAnatomy } from '@ark-ui/anatomy'`
 
   ```ts
-  import { sva } from "../styled-system/css";
-  import { slots } from "./slots";
+  import { sva } from '../styled-system/css'
+  import { slots } from './slots'
 
   const card = sva({
     slots, // ❌ did NOT work -> ✅ will now work as expected
     base: {
       root: {
-        p: "6",
-        m: "4",
-        w: "md",
-        boxShadow: "md",
-        borderRadius: "md",
-        _dark: { bg: "#262626", color: "white" },
+        p: '6',
+        m: '4',
+        w: 'md',
+        boxShadow: 'md',
+        borderRadius: 'md',
+        _dark: { bg: '#262626', color: 'white' },
       },
       content: {
-        textStyle: "lg",
+        textStyle: 'lg',
       },
       title: {
-        textStyle: "xl",
-        fontWeight: "semibold",
-        pb: "2",
+        textStyle: 'xl',
+        fontWeight: 'semibold',
+        pb: '2',
       },
     },
-  });
+  })
   ```
 
 - b01eb049: Fix a parser issue where we didn't handle import aliases when using a {xxx}.raw() function.
@@ -1137,15 +1114,15 @@
 
   ```ts
   // button.stories.ts
-  import { button as buttonRecipe } from "@ui/styled-system/recipes";
+  import { button as buttonRecipe } from '@ui/styled-system/recipes'
 
   export const Primary: Story = {
     // ❌ this wouldn't be parsed as a recipe because of the alias + .raw()
     //  -> ✅ it's now fixed
     args: buttonRecipe.raw({
-      color: "primary",
+      color: 'primary',
     }),
-  };
+  }
   ```
 
 - a3b6ed5f: Fix & perf improvement: skip JSX parsing when not using `config.jsxFramework` / skip tagged template literal
@@ -1167,9 +1144,9 @@
 
   ```ts
   css({
-    borderWidth: "[2px!]",
-    width: "[2px !important]",
-  });
+    borderWidth: '[2px!]',
+    width: '[2px !important]',
+  })
   ```
 
 - Updated dependencies [8f4ce97c]
@@ -1397,9 +1374,9 @@
 
   ```ts
   interface FactoryOptions<TProps extends Dict> {
-    dataAttr?: boolean;
-    defaultProps?: TProps;
-    shouldForwardProp?(prop: string, variantKeys: string[]): boolean;
+    dataAttr?: boolean
+    defaultProps?: TProps
+    shouldForwardProp?(prop: string, variantKeys: string[]): boolean
   }
   ```
 
@@ -1407,16 +1384,16 @@
     This is useful for testing and debugging.
 
   ```jsx
-  import { styled } from "../styled-system/jsx";
-  import { button } from "../styled-system/recipes";
+  import { styled } from '../styled-system/jsx'
+  import { button } from '../styled-system/recipes'
 
-  const Button = styled("button", button, { dataAttr: true });
+  const Button = styled('button', button, { dataAttr: true })
 
   const App = () => (
     <Button variant="secondary" mt="10px">
       Button
     </Button>
-  );
+  )
   // Will render something like <button data-recipe="button" class="btn btn--variant_purple mt_10px">Button</button>
   ```
 
@@ -1424,17 +1401,17 @@
     override the default variants or base styles of a recipe.
 
   ```jsx
-  import { styled } from "../styled-system/jsx";
-  import { button } from "../styled-system/recipes";
+  import { styled } from '../styled-system/jsx'
+  import { button } from '../styled-system/recipes'
 
-  const Button = styled("button", button, {
+  const Button = styled('button', button, {
     defaultProps: {
-      variant: "secondary",
-      px: "10px",
+      variant: 'secondary',
+      px: '10px',
     },
-  });
+  })
 
-  const App = () => <Button>Button</Button>;
+  const App = () => <Button>Button</Button>
   // Will render something like <button class="btn btn--variant_secondary px_10px">Button</button>
   ```
 
@@ -1442,20 +1419,19 @@
     props except recipe variants and style props are forwarded.
 
   ```jsx
-  import { styled } from "../styled-system/jsx";
-  import { button } from "../styled-system/recipes";
-  import { isCssProperty } from "../styled-system/jsx";
-  import { motion, isValidMotionProp } from "framer-motion";
+  import { styled } from '../styled-system/jsx'
+  import { button } from '../styled-system/recipes'
+  import { isCssProperty } from '../styled-system/jsx'
+  import { motion, isValidMotionProp } from 'framer-motion'
 
   const StyledMotion = styled(
     motion.div,
     {},
     {
       shouldForwardProp: (prop, variantKeys) =>
-        isValidMotionProp(prop) ||
-        (!variantKeys.includes(prop) && !isCssProperty(prop)),
+        isValidMotionProp(prop) || (!variantKeys.includes(prop) && !isCssProperty(prop)),
     },
-  );
+  )
   ```
 
 - 3a04a927: Fix static extraction of the
@@ -1555,42 +1531,42 @@
 
   ```ts
   export default defineConfig({
-    outdir: "./outdir",
+    outdir: './outdir',
     importMap: {
-      css: "#panda/styled-system/css",
-      recipes: "#panda/styled-system/recipes",
-      patterns: "#panda/styled-system/patterns",
-      jsx: "#panda/styled-system/jsx",
+      css: '#panda/styled-system/css',
+      recipes: '#panda/styled-system/recipes',
+      patterns: '#panda/styled-system/patterns',
+      jsx: '#panda/styled-system/jsx',
     },
-  });
+  })
   ```
 
   Or you could also make your outdir an actual package from your monorepo:
 
   ```ts
   export default defineConfig({
-    outdir: "../packages/styled-system",
+    outdir: '../packages/styled-system',
     importMap: {
-      css: "@monorepo/styled-system",
-      recipes: "@monorepo/styled-system",
-      patterns: "@monorepo/styled-system",
-      jsx: "@monorepo/styled-system",
+      css: '@monorepo/styled-system',
+      recipes: '@monorepo/styled-system',
+      patterns: '@monorepo/styled-system',
+      jsx: '@monorepo/styled-system',
     },
-  });
+  })
   ```
 
   Working with tsconfig paths aliases is easy:
 
   ```ts
   export default defineConfig({
-    outdir: "styled-system",
+    outdir: 'styled-system',
     importMap: {
-      css: "styled-system/css",
-      recipes: "styled-system/recipes",
-      patterns: "styled-system/patterns",
-      jsx: "styled-system/jsx",
+      css: 'styled-system/css',
+      recipes: 'styled-system/recipes',
+      patterns: 'styled-system/patterns',
+      jsx: 'styled-system/jsx',
     },
-  });
+  })
   ```
 
 - Updated dependencies [95b06bb1]
@@ -1625,20 +1601,20 @@
   so this will now work:
 
   ```ts
-  import { css } from "styled-system/css";
+  import { css } from 'styled-system/css'
 
   const paragraphSpacingStyle = css.raw({
-    "&:not(:first-child)": { marginBlockEnd: "1em" },
-  });
+    '&:not(:first-child)': { marginBlockEnd: '1em' },
+  })
 
   export const proseCss = css.raw({
-    maxWidth: "800px",
-    "& p": {
-      "&:not(:first-child)": { marginBlockStart: "1em" },
+    maxWidth: '800px',
+    '& p': {
+      '&:not(:first-child)': { marginBlockStart: '1em' },
     },
-    "& h1": paragraphSpacingStyle,
-    "& h2": paragraphSpacingStyle,
-  });
+    '& h1': paragraphSpacingStyle,
+    '& h2': paragraphSpacingStyle,
+  })
   ```
 
   & use ECMA preset for ts-evaluator: This means that no other globals than those that are defined in the ECMAScript
@@ -1646,35 +1622,35 @@
   this:
 
   ```ts
-  import { cva } from ".panda/css";
+  import { cva } from '.panda/css'
 
   const variants = () => {
     const spacingTokens = Object.entries({
-      s: "token(spacing.1)",
-      m: "token(spacing.2)",
-      l: "token(spacing.3)",
-    });
+      s: 'token(spacing.1)',
+      m: 'token(spacing.2)',
+      l: 'token(spacing.3)',
+    })
 
     const spacingProps = {
-      px: "paddingX",
-      py: "paddingY",
-    };
+      px: 'paddingX',
+      py: 'paddingY',
+    }
 
     // Generate variants programmatically
     return Object.entries(spacingProps)
       .map(([name, styleProp]) => {
         const variants = spacingTokens
           .map(([variant, token]) => ({ [variant]: { [styleProp]: token } }))
-          .reduce((_agg, kv) => ({ ..._agg, ...kv }));
+          .reduce((_agg, kv) => ({ ..._agg, ...kv }))
 
-        return { [name]: variants };
+        return { [name]: variants }
       })
-      .reduce((_agg, kv) => ({ ..._agg, ...kv }));
-  };
+      .reduce((_agg, kv) => ({ ..._agg, ...kv }))
+  }
 
   const baseStyle = cva({
     variants: variants(),
-  });
+  })
   ```
 
 - Updated dependencies [c40ae1b9]
@@ -1821,12 +1797,12 @@
   **Definition**
 
   ```jsx
-  import { sva } from "styled-system/css";
+  import { sva } from 'styled-system/css'
 
   const button = sva({
-    slots: ["label", "icon"],
+    slots: ['label', 'icon'],
     base: {
-      label: { color: "red", textDecoration: "underline" },
+      label: { color: 'red', textDecoration: 'underline' },
     },
     variants: {
       rounded: {
@@ -1834,33 +1810,33 @@
       },
       size: {
         sm: {
-          label: { fontSize: "sm" },
-          icon: { fontSize: "sm" },
+          label: { fontSize: 'sm' },
+          icon: { fontSize: 'sm' },
         },
         lg: {
-          label: { fontSize: "lg" },
-          icon: { fontSize: "lg", color: "pink" },
+          label: { fontSize: 'lg' },
+          icon: { fontSize: 'lg', color: 'pink' },
         },
       },
     },
     defaultVariants: {
-      size: "sm",
+      size: 'sm',
     },
-  });
+  })
   ```
 
   **Usage**
 
   ```jsx
   export function App() {
-    const btnClass = button({ size: "lg", rounded: true });
+    const btnClass = button({ size: 'lg', rounded: true })
 
     return (
       <button>
         <p class={btnClass.label}> Label</p>
         <p class={btnClass.icon}> Icon</p>
       </button>
-    );
+    )
   }
   ```
 
@@ -1909,26 +1885,26 @@
   Update the `jsx` property to be used for advanced tracking of custom pattern components.
 
   ```jsx
-  import { Circle } from "styled-system/jsx";
+  import { Circle } from 'styled-system/jsx'
   const CustomCircle = ({ children, ...props }) => {
-    return <Circle {...props}>{children}</Circle>;
-  };
+    return <Circle {...props}>{children}</Circle>
+  }
   ```
 
   To track the `CustomCircle` component, you can now use the `jsx` property.
 
   ```js
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     patterns: {
       extend: {
         circle: {
-          jsx: ["CustomCircle"],
+          jsx: ['CustomCircle'],
         },
       },
     },
-  });
+  })
   ```
 
 ### Patch Changes
@@ -2028,17 +2004,9 @@
   ```tsx
   const ComponentWithMultipleRecipes = ({ variant }) => {
     return (
-      <button
-        className={cx(
-          pinkRecipe({ variant }),
-          greenRecipe({ variant }),
-          blueRecipe({ variant }),
-        )}
-      >
-        Hello
-      </button>
-    );
-  };
+      <button className={cx(pinkRecipe({ variant }), greenRecipe({ variant }), blueRecipe({ variant }))}>Hello</button>
+    )
+  }
   ```
 
   Given a `panda.config.ts` with recipes each including a common `jsx` tag name, such as:
@@ -2146,8 +2114,8 @@
   // panda.config.ts
   export default defineConfig({
     //...
-    syntax: "template-literal",
-  });
+    syntax: 'template-literal',
+  })
   ```
 
   > For existing projects, you might need to run the `panda codegen --clean`
@@ -2168,10 +2136,10 @@
   ```ts
   const Input = styled.input({
     base: {
-      color: "blue.100",
-      bg: "blue.900",
+      color: 'blue.100',
+      bg: 'blue.900',
     },
-  });
+  })
   ```
 
 - Updated dependencies [60df9bd1]
diff --git a/packages/postcss/CHANGELOG.md b/packages/postcss/CHANGELOG.md
index c74040f88..e06d46fe3 100644
--- a/packages/postcss/CHANGELOG.md
+++ b/packages/postcss/CHANGELOG.md
@@ -57,11 +57,11 @@
 
   module.exports = {
     plugins: {
-      "@pandacss/dev/postcss": {
+      '@pandacss/dev/postcss': {
         allow: [/node_modules\/.embroider/],
       },
     },
-  };
+  }
   ```
 
 ### Patch Changes
@@ -152,11 +152,11 @@
   ```js
   module.exports = {
     plugins: {
-      "@pandacss/dev/postcss": {
-        logfile: "./logs/panda.log",
+      '@pandacss/dev/postcss': {
+        logfile: './logs/panda.log',
       },
     },
-  };
+  }
   ```
 
 - Updated dependencies [05686b9d]
@@ -593,11 +593,11 @@
   ```js
   module.exports = {
     plugins: [
-      require("@pandacss/postcss")({
-        configPath: "./path/to/panda.config.js",
+      require('@pandacss/postcss')({
+        configPath: './path/to/panda.config.js',
       }),
     ],
-  };
+  }
   ```
 
   - @pandacss/node@0.3.2
diff --git a/packages/preset-base/CHANGELOG.md b/packages/preset-base/CHANGELOG.md
index 709cfa646..5ca1c0606 100644
--- a/packages/preset-base/CHANGELOG.md
+++ b/packages/preset-base/CHANGELOG.md
@@ -11,7 +11,7 @@
   **Before**
 
   ```jsx
-  import { linkBox, linkOverlay } from "styled-system/patterns";
+  import { linkBox, linkOverlay } from 'styled-system/patterns'
 
   const App = () => {
     return (
@@ -21,33 +21,33 @@
           Link
         </a>
       </div>
-    );
-  };
+    )
+  }
   ```
 
   **After**
 
   ```jsx
-  import { css } from "styled-system/css";
-  import { linkOverlay } from "styled-system/patterns";
+  import { css } from 'styled-system/css'
+  import { linkOverlay } from 'styled-system/patterns'
 
   const App = () => {
     return (
-      <div className={css({ pos: "relative" })}>
+      <div className={css({ pos: 'relative' })}>
         <img src="https://via.placeholder.com/150" alt="placeholder" />
         <a href="#" className={linkOverlay()}>
           Link
         </a>
       </div>
-    );
-  };
+    )
+  }
   ```
 
 ### Patch Changes
 
 - 2116abe: Fix issue where `float` property did not allow inherited values (auto, initial, none, etc.)
-- c3e797e: Fix issue where `animationName` property was not connected to `theme.keyframes`, as a result, no autocompletion was
-  available.
+- c3e797e: Fix issue where `animationName` property was not connected to `theme.keyframes`, as a result, no
+  autocompletion was available.
 - Updated dependencies [221c9a2]
 - Updated dependencies [c3e797e]
   - @pandacss/types@0.39.0
@@ -104,9 +104,9 @@
     useful when applying negative margin to child elements.
 
   ```tsx
-  <div className={flex({ spaceX: "-1" })}>
-    <div className={circle({ size: "5", bg: "red" })} />
-    <div className={circle({ size: "5", bg: "pink" })} />
+  <div className={flex({ spaceX: '-1' })}>
+    <div className={circle({ size: '5', bg: 'red' })} />
+    <div className={circle({ size: '5', bg: 'pink' })} />
   </div>
   ```
 
@@ -118,13 +118,13 @@
   ```tsx
   <div
     className={css({
-      bgGradient: "to-r",
+      bgGradient: 'to-r',
       // from
-      gradientFrom: "red",
-      gradientFromPosition: "top left",
+      gradientFrom: 'red',
+      gradientFromPosition: 'top left',
       // to
-      gradientTo: "blue",
-      gradientToPosition: "bottom right",
+      gradientTo: 'blue',
+      gradientToPosition: 'bottom right',
     })}
   />
   ```
@@ -219,9 +219,9 @@
 
   ```ts
   css({
-    textShadow: "1px 1px 1px var(--text-shadow-color)",
-    textShadowColor: "black",
-  });
+    textShadow: '1px 1px 1px var(--text-shadow-color)',
+    textShadowColor: 'black',
+  })
   ```
 
 ### Patch Changes
@@ -273,9 +273,9 @@
 
   ```ts
   css({
-    bg: "red.300/40",
-    color: "white",
-  });
+    bg: 'red.300/40',
+    color: 'white',
+  })
   ```
 
   This will generate:
@@ -283,11 +283,7 @@
   ```css
   @layer utilities {
     .bg_red\.300\/40 {
-      --mix-background: color-mix(
-        in srgb,
-        var(--colors-red-300) 40%,
-        transparent
-      );
+      --mix-background: color-mix(in srgb, var(--colors-red-300) 40%, transparent);
       background: var(--mix-background, var(--colors-red-300));
     }
 
@@ -311,21 +307,21 @@
   export default defineConfig({
     utilities: {
       background: {
-        shorthand: "bg",
-        className: "bg",
-        values: "colors",
+        shorthand: 'bg',
+        className: 'bg',
+        values: 'colors',
         transform(value, args) {
-          const mix = args.utils.colorMix(value);
+          const mix = args.utils.colorMix(value)
           // This can happen if the value format is invalid (e.g. `bg: red.300/invalid` or `bg: red.300//10`)
-          if (mix.invalid) return { background: value };
+          if (mix.invalid) return { background: value }
 
           return {
             background: mix.value,
-          };
+          }
         },
       },
     },
-  });
+  })
   ```
 
   ***
@@ -334,21 +330,21 @@
   property:
 
   ```ts
-  import type { PropertyTransform } from "@pandacss/types";
+  import type { PropertyTransform } from '@pandacss/types'
 
   export const createColorMixTransform =
     (prop: string): PropertyTransform =>
     (value, args) => {
-      const mix = args.utils.colorMix(value);
-      if (mix.invalid) return { [prop]: value };
+      const mix = args.utils.colorMix(value)
+      if (mix.invalid) return { [prop]: value }
 
-      const cssVar = "--mix-" + prop;
+      const cssVar = '--mix-' + prop
 
       return {
         [cssVar]: mix.value,
         [prop]: `var(${cssVar}, ${mix.color})`,
-      };
-    };
+      }
+    }
   ```
 
   then the same utility transform as above can be written like this:
@@ -376,34 +372,34 @@
     // ...
     theme: {
       extend: {
-        containerNames: ["sidebar", "content"],
+        containerNames: ['sidebar', 'content'],
         containerSizes: {
-          xs: "40em",
-          sm: "60em",
-          md: "80em",
+          xs: '40em',
+          sm: '60em',
+          md: '80em',
         },
       },
     },
-  });
+  })
   ```
 
   The default container sizes in the `@pandacss/preset-panda` preset are shown below:
 
   ```ts
   export const containerSizes = {
-    xs: "320px",
-    sm: "384px",
-    md: "448px",
-    lg: "512px",
-    xl: "576px",
-    "2xl": "672px",
-    "3xl": "768px",
-    "4xl": "896px",
-    "5xl": "1024px",
-    "6xl": "1152px",
-    "7xl": "1280px",
-    "8xl": "1440px",
-  };
+    xs: '320px',
+    sm: '384px',
+    md: '448px',
+    lg: '512px',
+    xl: '576px',
+    '2xl': '672px',
+    '3xl': '768px',
+    '4xl': '896px',
+    '5xl': '1024px',
+    '6xl': '1152px',
+    '7xl': '1280px',
+    '8xl': '1440px',
+  }
   ```
 
   Then use them in your styles by referencing using `@<container-name>/<container-size>` syntax:
@@ -487,11 +483,11 @@
     patterns: {
       extend: {
         stack: {
-          defaultValues: { gap: "20px" },
+          defaultValues: { gap: '20px' },
         },
       },
     },
-  });
+  })
   ```
 
 ### Patch Changes
@@ -562,13 +558,13 @@
         // add aspect ratio tokens
         tokens: {
           aspectRatios: {
-            "1:1": "1",
-            "16:9": "16/9",
+            '1:1': '1',
+            '16:9': '16/9',
           },
         },
       },
     },
-  });
+  })
   ```
 
   Here's what the default aspect ratio tokens in the base preset looks like:
@@ -896,15 +892,15 @@
   `block` bleed to a child element, setting its value to match the parent's padding.
 
   ```tsx
-  import { css } from "../styled-system/css";
-  import { bleed } from "../styled-system/patterns";
+  import { css } from '../styled-system/css'
+  import { bleed } from '../styled-system/patterns'
 
   export function Page() {
     return (
-      <div class={css({ px: "6" })}>
-        <div class={bleed({ inline: "6" })}>Welcome</div>
+      <div class={css({ px: '6' })}>
+        <div class={bleed({ inline: '6' })}>Welcome</div>
       </div>
-    );
+    )
   }
   ```
 
@@ -913,8 +909,8 @@
   Visually hidden is a layout pattern used to hide content visually, but still make it available to screen readers.
 
   ```tsx
-  import { css } from "../styled-system/css";
-  import { visuallyHidden } from "../styled-system/patterns";
+  import { css } from '../styled-system/css'
+  import { visuallyHidden } from '../styled-system/patterns'
 
   export function Checkbox() {
     return (
@@ -924,7 +920,7 @@
         </input>
         <span>Checkbox</span>
       </label>
-    );
+    )
   }
   ```
 
@@ -976,26 +972,26 @@
   Update the `jsx` property to be used for advanced tracking of custom pattern components.
 
   ```jsx
-  import { Circle } from "styled-system/jsx";
+  import { Circle } from 'styled-system/jsx'
   const CustomCircle = ({ children, ...props }) => {
-    return <Circle {...props}>{children}</Circle>;
-  };
+    return <Circle {...props}>{children}</Circle>
+  }
   ```
 
   To track the `CustomCircle` component, you can now use the `jsx` property.
 
   ```js
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     patterns: {
       extend: {
         circle: {
-          jsx: ["CustomCircle"],
+          jsx: ['CustomCircle'],
         },
       },
     },
-  });
+  })
   ```
 
 ### Patch Changes
@@ -1019,7 +1015,7 @@
   transition property, timing function and duration. This allows you to add transitions with a single property.
 
   ```jsx
-  <div className={css({ transition: "background" })}>Content</div>
+  <div className={css({ transition: 'background' })}>Content</div>
   ```
 
   This will generate the following css:
diff --git a/packages/preset-panda/CHANGELOG.md b/packages/preset-panda/CHANGELOG.md
index 19b8e92a5..27be72f5f 100644
--- a/packages/preset-panda/CHANGELOG.md
+++ b/packages/preset-panda/CHANGELOG.md
@@ -220,13 +220,13 @@
         // add aspect ratio tokens
         tokens: {
           aspectRatios: {
-            "1:1": "1",
-            "16:9": "16/9",
+            '1:1': '1',
+            '16:9': '16/9',
           },
         },
       },
     },
-  });
+  })
   ```
 
   Here's what the default aspect ratio tokens in the base preset looks like:
diff --git a/packages/shared/CHANGELOG.md b/packages/shared/CHANGELOG.md
index ce0de3c73..6fadcd935 100644
--- a/packages/shared/CHANGELOG.md
+++ b/packages/shared/CHANGELOG.md
@@ -37,21 +37,21 @@
 - 99870bb: Fix issue where setting the pattern `jsx` option with dot notation didn't work.
 
   ```jsx
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
     patterns: {
       extend: {
         grid: {
-          jsx: ["Form.Group", "Grid"],
+          jsx: ['Form.Group', 'Grid'],
         },
         stack: {
-          jsx: ["Form.Action", "Stack"],
+          jsx: ['Form.Action', 'Stack'],
         },
       },
     },
-  });
+  })
   ```
 
 ## 0.37.0
@@ -103,10 +103,10 @@
 
   ```ts
   css({
-    padding: "1px",
-    paddingTop: "3px",
-    paddingBottom: "4px",
-  });
+    padding: '1px',
+    paddingTop: '3px',
+    paddingBottom: '4px',
+  })
   ```
 
   Will now always generate the following css:
@@ -234,9 +234,9 @@
 
   ```ts
   css({
-    borderWidth: "[2px!]",
-    width: "[2px !important]",
-  });
+    borderWidth: '[2px!]',
+    width: '[2px !important]',
+  })
   ```
 
 ## 0.22.0
@@ -253,18 +253,18 @@
   and suffixing with `]`, e.g. writing `[123px]` as a value will bypass the token validation.
 
   ```ts
-  import { css } from "../styled-system/css";
+  import { css } from '../styled-system/css'
 
   css({
     // @ts-expect-error TS will throw when using from strictTokens: true
-    color: "#fff",
+    color: '#fff',
     // @ts-expect-error TS will throw when using from strictTokens: true
-    width: "100px",
+    width: '100px',
 
     // ✅ but this is now allowed:
-    bgColor: "[rgb(51 155 240)]",
-    fontSize: "[12px]",
-  });
+    bgColor: '[rgb(51 155 240)]',
+    fontSize: '[12px]',
+  })
   ```
 
 ## 0.20.1
@@ -307,16 +307,16 @@
   together and the styles will be merged correctly.
 
   ```jsx
-  const Box = styled("div", {
+  const Box = styled('div', {
     base: {
-      background: "red.light",
-      color: "white",
+      background: 'red.light',
+      color: 'white',
     },
-  });
+  })
 
   const ExtendedBox = styled(Box, {
-    base: { background: "red.dark" },
-  });
+    base: { background: 'red.dark' },
+  })
 
   // <ExtendedBox> will have a background of `red.dark` and a color of `white`
   ```
@@ -329,14 +329,14 @@
   - CVA or Inline CVA + Config Recipe = ❌
 
   ```jsx
-  import { button } from "../styled-system/recipes";
+  import { button } from '../styled-system/recipes'
 
-  const Button = styled("div", button);
+  const Button = styled('div', button)
 
   // ❌ This will throw an error
   const ExtendedButton = styled(Button, {
-    base: { background: "red.dark" },
-  });
+    base: { background: 'red.dark' },
+  })
   ```
 
 ## 0.16.0
@@ -390,14 +390,7 @@
   Example:
 
   ```tsx
-  <h1
-    className={cx(
-      css({ mx: "3", paddingTop: "4" }),
-      css({ mx: "10", pt: "6" }),
-    )}
-  >
-    Will result in "mx_10 pt_6"
-  </h1>
+  <h1 className={cx(css({ mx: '3', paddingTop: '4' }), css({ mx: '10', pt: '6' }))}>Will result in "mx_10 pt_6"</h1>
   ```
 
 ## 0.11.0
@@ -416,12 +409,12 @@
   **Definition**
 
   ```jsx
-  import { sva } from "styled-system/css";
+  import { sva } from 'styled-system/css'
 
   const button = sva({
-    slots: ["label", "icon"],
+    slots: ['label', 'icon'],
     base: {
-      label: { color: "red", textDecoration: "underline" },
+      label: { color: 'red', textDecoration: 'underline' },
     },
     variants: {
       rounded: {
@@ -429,33 +422,33 @@
       },
       size: {
         sm: {
-          label: { fontSize: "sm" },
-          icon: { fontSize: "sm" },
+          label: { fontSize: 'sm' },
+          icon: { fontSize: 'sm' },
         },
         lg: {
-          label: { fontSize: "lg" },
-          icon: { fontSize: "lg", color: "pink" },
+          label: { fontSize: 'lg' },
+          icon: { fontSize: 'lg', color: 'pink' },
         },
       },
     },
     defaultVariants: {
-      size: "sm",
+      size: 'sm',
     },
-  });
+  })
   ```
 
   **Usage**
 
   ```jsx
   export function App() {
-    const btnClass = button({ size: "lg", rounded: true });
+    const btnClass = button({ size: 'lg', rounded: true })
 
     return (
       <button>
         <p class={btnClass.label}> Label</p>
         <p class={btnClass.icon}> Icon</p>
       </button>
-    );
+    )
   }
   ```
 
@@ -503,19 +496,19 @@
 
   ```ts
   const shorthands = {
-    flexDir: "flexDirection",
-  };
+    flexDir: 'flexDirection',
+  }
 
   const obj = {
-    flexDir: "row",
+    flexDir: 'row',
     flexDirection: undefined,
-  };
+  }
 
   const result = walkObject(obj, (value) => value, {
     getKey(prop) {
-      return shorthands[prop] ?? prop;
+      return shorthands[prop] ?? prop
     },
-  });
+  })
   ```
 
   This would set the `flexDirection` to `row` (using `getKey`) and then set the `flexDirection` property again, this
@@ -536,8 +529,8 @@
   // panda.config.ts
   export default defineConfig({
     //...
-    syntax: "template-literal",
-  });
+    syntax: 'template-literal',
+  })
   ```
 
   > For existing projects, you might need to run the `panda codegen --clean`
@@ -614,11 +607,11 @@ This hook is called right before writing the codegen files to disk. You can use
 export default defineConfig({
   // ...
   hooks: {
-    "codegen:prepare": ({ artifacts, changed }) => {
+    'codegen:prepare': ({ artifacts, changed }) => {
       // do something with the emitted js/d.ts files
     },
   },
-});
+})
 ```
 
 - 49c760cd: Fix issue where responsive array in css and cva doesn't generate the correct classname
@@ -704,9 +697,9 @@ export default defineConfig({
 
   ```ts
   css({
-    borderWidth: "[2px!]",
-    width: "[2px !important]",
-  });
+    borderWidth: '[2px!]',
+    width: '[2px !important]',
+  })
   ```
 
 ## 0.22.0
@@ -723,18 +716,18 @@ export default defineConfig({
   and suffixing with `]`, e.g. writing `[123px]` as a value will bypass the token validation.
 
   ```ts
-  import { css } from "../styled-system/css";
+  import { css } from '../styled-system/css'
 
   css({
     // @ts-expect-error TS will throw when using from strictTokens: true
-    color: "#fff",
+    color: '#fff',
     // @ts-expect-error TS will throw when using from strictTokens: true
-    width: "100px",
+    width: '100px',
 
     // ✅ but this is now allowed:
-    bgColor: "[rgb(51 155 240)]",
-    fontSize: "[12px]",
-  });
+    bgColor: '[rgb(51 155 240)]',
+    fontSize: '[12px]',
+  })
   ```
 
 ## 0.20.1
@@ -777,16 +770,16 @@ export default defineConfig({
   together and the styles will be merged correctly.
 
   ```jsx
-  const Box = styled("div", {
+  const Box = styled('div', {
     base: {
-      background: "red.light",
-      color: "white",
+      background: 'red.light',
+      color: 'white',
     },
-  });
+  })
 
   const ExtendedBox = styled(Box, {
-    base: { background: "red.dark" },
-  });
+    base: { background: 'red.dark' },
+  })
 
   // <ExtendedBox> will have a background of `red.dark` and a color of `white`
   ```
@@ -799,14 +792,14 @@ export default defineConfig({
   - CVA or Inline CVA + Config Recipe = ❌
 
   ```jsx
-  import { button } from "../styled-system/recipes";
+  import { button } from '../styled-system/recipes'
 
-  const Button = styled("div", button);
+  const Button = styled('div', button)
 
   // ❌ This will throw an error
   const ExtendedButton = styled(Button, {
-    base: { background: "red.dark" },
-  });
+    base: { background: 'red.dark' },
+  })
   ```
 
 ## 0.16.0
@@ -860,14 +853,7 @@ export default defineConfig({
   Example:
 
   ```tsx
-  <h1
-    className={cx(
-      css({ mx: "3", paddingTop: "4" }),
-      css({ mx: "10", pt: "6" }),
-    )}
-  >
-    Will result in "mx_10 pt_6"
-  </h1>
+  <h1 className={cx(css({ mx: '3', paddingTop: '4' }), css({ mx: '10', pt: '6' }))}>Will result in "mx_10 pt_6"</h1>
   ```
 
 ## 0.11.0
@@ -886,12 +872,12 @@ export default defineConfig({
   **Definition**
 
   ```jsx
-  import { sva } from "styled-system/css";
+  import { sva } from 'styled-system/css'
 
   const button = sva({
-    slots: ["label", "icon"],
+    slots: ['label', 'icon'],
     base: {
-      label: { color: "red", textDecoration: "underline" },
+      label: { color: 'red', textDecoration: 'underline' },
     },
     variants: {
       rounded: {
@@ -899,33 +885,33 @@ export default defineConfig({
       },
       size: {
         sm: {
-          label: { fontSize: "sm" },
-          icon: { fontSize: "sm" },
+          label: { fontSize: 'sm' },
+          icon: { fontSize: 'sm' },
         },
         lg: {
-          label: { fontSize: "lg" },
-          icon: { fontSize: "lg", color: "pink" },
+          label: { fontSize: 'lg' },
+          icon: { fontSize: 'lg', color: 'pink' },
         },
       },
     },
     defaultVariants: {
-      size: "sm",
+      size: 'sm',
     },
-  });
+  })
   ```
 
   **Usage**
 
   ```jsx
   export function App() {
-    const btnClass = button({ size: "lg", rounded: true });
+    const btnClass = button({ size: 'lg', rounded: true })
 
     return (
       <button>
         <p class={btnClass.label}> Label</p>
         <p class={btnClass.icon}> Icon</p>
       </button>
-    );
+    )
   }
   ```
 
@@ -973,19 +959,19 @@ export default defineConfig({
 
   ```ts
   const shorthands = {
-    flexDir: "flexDirection",
-  };
+    flexDir: 'flexDirection',
+  }
 
   const obj = {
-    flexDir: "row",
+    flexDir: 'row',
     flexDirection: undefined,
-  };
+  }
 
   const result = walkObject(obj, (value) => value, {
     getKey(prop) {
-      return shorthands[prop] ?? prop;
+      return shorthands[prop] ?? prop
     },
-  });
+  })
   ```
 
   This would set the `flexDirection` to `row` (using `getKey`) and then set the `flexDirection` property again, this
@@ -1006,8 +992,8 @@ export default defineConfig({
   // panda.config.ts
   export default defineConfig({
     //...
-    syntax: "template-literal",
-  });
+    syntax: 'template-literal',
+  })
   ```
 
   > For existing projects, you might need to run the `panda codegen --clean`
diff --git a/packages/studio/CHANGELOG.md b/packages/studio/CHANGELOG.md
index bed2a68b9..985aa9e9a 100644
--- a/packages/studio/CHANGELOG.md
+++ b/packages/studio/CHANGELOG.md
@@ -203,12 +203,12 @@
     theme: {
       extend: {
         colors: {
-          primary: { value: "blue" },
+          primary: { value: 'blue' },
         },
         // borderWidths: {}, // ⚠️ nothing defined here
       },
     },
-  });
+  })
   ```
 
   ```ts
@@ -219,8 +219,8 @@
 
     // ✅ after this PR, TS will not throw an error anymore as you don't have any `borderWidths` tokens
     // if you add one, this will error again (as it's supposed to)
-    borderWidths: "123px",
-  });
+    borderWidths: '123px',
+  })
   ```
 
   ## Description
@@ -275,11 +275,11 @@
 - 4576a60: Fix nested `styled` factory composition
 
   ```tsx
-  import { styled } from "../styled-system/jsx";
+  import { styled } from '../styled-system/jsx'
 
-  const BasicBox = styled("div", { base: { fontSize: "10px" } });
-  const ExtendedBox1 = styled(BasicBox, { base: { fontSize: "20px" } });
-  const ExtendedBox2 = styled(ExtendedBox1, { base: { fontSize: "30px" } });
+  const BasicBox = styled('div', { base: { fontSize: '10px' } })
+  const ExtendedBox1 = styled(BasicBox, { base: { fontSize: '20px' } })
+  const ExtendedBox2 = styled(ExtendedBox1, { base: { fontSize: '30px' } })
 
   export const App = () => {
     return (
@@ -292,8 +292,8 @@
         {/* NOW: ✅ fs_30px */}
         <ExtendedBox2>text3</ExtendedBox2>
       </>
-    );
-  };
+    )
+  }
   ```
 
   - @pandacss/astro-plugin-studio@0.34.3
@@ -672,9 +672,9 @@
 
   ```ts
   css({
-    borderWidth: "[2px!]",
-    width: "[2px !important]",
-  });
+    borderWidth: '[2px!]',
+    width: '[2px !important]',
+  })
   ```
 
 - Updated dependencies [8f4ce97c]
@@ -952,9 +952,9 @@
 
   ```ts
   interface FactoryOptions<TProps extends Dict> {
-    dataAttr?: boolean;
-    defaultProps?: TProps;
-    shouldForwardProp?(prop: string, variantKeys: string[]): boolean;
+    dataAttr?: boolean
+    defaultProps?: TProps
+    shouldForwardProp?(prop: string, variantKeys: string[]): boolean
   }
   ```
 
@@ -962,16 +962,16 @@
     This is useful for testing and debugging.
 
   ```jsx
-  import { styled } from "../styled-system/jsx";
-  import { button } from "../styled-system/recipes";
+  import { styled } from '../styled-system/jsx'
+  import { button } from '../styled-system/recipes'
 
-  const Button = styled("button", button, { dataAttr: true });
+  const Button = styled('button', button, { dataAttr: true })
 
   const App = () => (
     <Button variant="secondary" mt="10px">
       Button
     </Button>
-  );
+  )
   // Will render something like <button data-recipe="button" class="btn btn--variant_purple mt_10px">Button</button>
   ```
 
@@ -979,17 +979,17 @@
     override the default variants or base styles of a recipe.
 
   ```jsx
-  import { styled } from "../styled-system/jsx";
-  import { button } from "../styled-system/recipes";
+  import { styled } from '../styled-system/jsx'
+  import { button } from '../styled-system/recipes'
 
-  const Button = styled("button", button, {
+  const Button = styled('button', button, {
     defaultProps: {
-      variant: "secondary",
-      px: "10px",
+      variant: 'secondary',
+      px: '10px',
     },
-  });
+  })
 
-  const App = () => <Button>Button</Button>;
+  const App = () => <Button>Button</Button>
   // Will render something like <button class="btn btn--variant_secondary px_10px">Button</button>
   ```
 
@@ -997,20 +997,19 @@
     props except recipe variants and style props are forwarded.
 
   ```jsx
-  import { styled } from "../styled-system/jsx";
-  import { button } from "../styled-system/recipes";
-  import { isCssProperty } from "../styled-system/jsx";
-  import { motion, isValidMotionProp } from "framer-motion";
+  import { styled } from '../styled-system/jsx'
+  import { button } from '../styled-system/recipes'
+  import { isCssProperty } from '../styled-system/jsx'
+  import { motion, isValidMotionProp } from 'framer-motion'
 
   const StyledMotion = styled(
     motion.div,
     {},
     {
       shouldForwardProp: (prop, variantKeys) =>
-        isValidMotionProp(prop) ||
-        (!variantKeys.includes(prop) && !isCssProperty(prop)),
+        isValidMotionProp(prop) || (!variantKeys.includes(prop) && !isCssProperty(prop)),
     },
-  );
+  )
   ```
 
 - Updated dependencies [abd7c47a]
@@ -1032,22 +1031,22 @@
 
   ```ts file="panda.config.ts"
   const button = defineRecipe({
-    className: "btn",
-    base: { color: "green", fontSize: "16px" },
+    className: 'btn',
+    base: { color: 'green', fontSize: '16px' },
     variants: {
-      size: { small: { fontSize: "14px" } },
+      size: { small: { fontSize: '14px' } },
     },
-    compoundVariants: [{ size: "small", css: { color: "blue" } }],
-  });
+    compoundVariants: [{ size: 'small', css: { color: 'blue' } }],
+  })
   ```
 
   This would previously not merge the `color` property overrides, but now it does:
 
   ```tsx file="example.tsx"
-  import { styled } from "../styled-system/jsx";
-  import { button } from "../styled-system/recipes";
+  import { styled } from '../styled-system/jsx'
+  import { button } from '../styled-system/recipes'
 
-  const Button = styled("button", button);
+  const Button = styled('button', button)
 
   function App() {
     return (
@@ -1056,7 +1055,7 @@
           Click me
         </Button>
       </>
-    );
+    )
   }
   ```
 
@@ -1239,11 +1238,11 @@ This hook is called right before writing the codegen files to disk. You can use
 export default defineConfig({
   // ...
   hooks: {
-    "codegen:prepare": ({ artifacts, changed }) => {
+    'codegen:prepare': ({ artifacts, changed }) => {
       // do something with the emitted js/d.ts files
     },
   },
-});
+})
 ```
 
 - d5977c24: - Add a `--logfile` flag to the `panda`, `panda codegen`, `panda cssgen` and `panda debug` commands.
@@ -1260,11 +1259,11 @@ export default defineConfig({
   ```js
   module.exports = {
     plugins: {
-      "@pandacss/dev/postcss": {
-        logfile: "./logs/panda.log",
+      '@pandacss/dev/postcss': {
+        logfile: './logs/panda.log',
       },
     },
-  };
+  }
   ```
 
 - Updated dependencies [0dd45b6a]
@@ -1500,9 +1499,9 @@ export default defineConfig({
 
   ```ts
   css({
-    borderWidth: "[2px!]",
-    width: "[2px !important]",
-  });
+    borderWidth: '[2px!]',
+    width: '[2px !important]',
+  })
   ```
 
 - Updated dependencies [8f4ce97c]
@@ -1780,9 +1779,9 @@ export default defineConfig({
 
   ```ts
   interface FactoryOptions<TProps extends Dict> {
-    dataAttr?: boolean;
-    defaultProps?: TProps;
-    shouldForwardProp?(prop: string, variantKeys: string[]): boolean;
+    dataAttr?: boolean
+    defaultProps?: TProps
+    shouldForwardProp?(prop: string, variantKeys: string[]): boolean
   }
   ```
 
@@ -1790,16 +1789,16 @@ export default defineConfig({
     This is useful for testing and debugging.
 
   ```jsx
-  import { styled } from "../styled-system/jsx";
-  import { button } from "../styled-system/recipes";
+  import { styled } from '../styled-system/jsx'
+  import { button } from '../styled-system/recipes'
 
-  const Button = styled("button", button, { dataAttr: true });
+  const Button = styled('button', button, { dataAttr: true })
 
   const App = () => (
     <Button variant="secondary" mt="10px">
       Button
     </Button>
-  );
+  )
   // Will render something like <button data-recipe="button" class="btn btn--variant_purple mt_10px">Button</button>
   ```
 
@@ -1807,17 +1806,17 @@ export default defineConfig({
     override the default variants or base styles of a recipe.
 
   ```jsx
-  import { styled } from "../styled-system/jsx";
-  import { button } from "../styled-system/recipes";
+  import { styled } from '../styled-system/jsx'
+  import { button } from '../styled-system/recipes'
 
-  const Button = styled("button", button, {
+  const Button = styled('button', button, {
     defaultProps: {
-      variant: "secondary",
-      px: "10px",
+      variant: 'secondary',
+      px: '10px',
     },
-  });
+  })
 
-  const App = () => <Button>Button</Button>;
+  const App = () => <Button>Button</Button>
   // Will render something like <button class="btn btn--variant_secondary px_10px">Button</button>
   ```
 
@@ -1825,20 +1824,19 @@ export default defineConfig({
     props except recipe variants and style props are forwarded.
 
   ```jsx
-  import { styled } from "../styled-system/jsx";
-  import { button } from "../styled-system/recipes";
-  import { isCssProperty } from "../styled-system/jsx";
-  import { motion, isValidMotionProp } from "framer-motion";
+  import { styled } from '../styled-system/jsx'
+  import { button } from '../styled-system/recipes'
+  import { isCssProperty } from '../styled-system/jsx'
+  import { motion, isValidMotionProp } from 'framer-motion'
 
   const StyledMotion = styled(
     motion.div,
     {},
     {
       shouldForwardProp: (prop, variantKeys) =>
-        isValidMotionProp(prop) ||
-        (!variantKeys.includes(prop) && !isCssProperty(prop)),
+        isValidMotionProp(prop) || (!variantKeys.includes(prop) && !isCssProperty(prop)),
     },
-  );
+  )
   ```
 
 - Updated dependencies [abd7c47a]
@@ -1860,22 +1858,22 @@ export default defineConfig({
 
   ```ts file="panda.config.ts"
   const button = defineRecipe({
-    className: "btn",
-    base: { color: "green", fontSize: "16px" },
+    className: 'btn',
+    base: { color: 'green', fontSize: '16px' },
     variants: {
-      size: { small: { fontSize: "14px" } },
+      size: { small: { fontSize: '14px' } },
     },
-    compoundVariants: [{ size: "small", css: { color: "blue" } }],
-  });
+    compoundVariants: [{ size: 'small', css: { color: 'blue' } }],
+  })
   ```
 
   This would previously not merge the `color` property overrides, but now it does:
 
   ```tsx file="example.tsx"
-  import { styled } from "../styled-system/jsx";
-  import { button } from "../styled-system/recipes";
+  import { styled } from '../styled-system/jsx'
+  import { button } from '../styled-system/recipes'
 
-  const Button = styled("button", button);
+  const Button = styled('button', button)
 
   function App() {
     return (
@@ -1884,7 +1882,7 @@ export default defineConfig({
           Click me
         </Button>
       </>
-    );
+    )
   }
   ```
 
diff --git a/packages/token-dictionary/CHANGELOG.md b/packages/token-dictionary/CHANGELOG.md
index 216a160a4..9f15edc42 100644
--- a/packages/token-dictionary/CHANGELOG.md
+++ b/packages/token-dictionary/CHANGELOG.md
@@ -28,11 +28,11 @@
       ta: {
         deprecated: true,
         transform(value) {
-          return { textAlign: value };
+          return { textAlign: value }
         },
       },
     },
-  });
+  })
   ```
 
   **Deprecating a token**
@@ -42,11 +42,11 @@
     theme: {
       tokens: {
         spacing: {
-          lg: { value: "8px", deprecated: "use `8` instead" },
+          lg: { value: '8px', deprecated: 'use `8` instead' },
         },
       },
     },
-  });
+  })
   ```
 
   **Deprecating a pattern**
@@ -58,7 +58,7 @@
         deprecated: true,
       },
     },
-  });
+  })
   ```
 
   **Deprecating a recipe**
@@ -68,11 +68,11 @@
     theme: {
       recipes: {
         btn: {
-          deprecated: "will be removed in v2.0",
+          deprecated: 'will be removed in v2.0',
         },
       },
     },
-  });
+  })
   ```
 
   ### ESLint Plugin
@@ -165,7 +165,7 @@
 
   ```ts
   // panda.config.ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
@@ -174,15 +174,15 @@
       extend: {
         tokens: {
           colors: {
-            text: { value: "blue" },
+            text: { value: 'blue' },
           },
         },
         semanticTokens: {
           colors: {
             body: {
               value: {
-                base: "{colors.blue.600}",
-                _osDark: "{colors.blue.400}",
+                base: '{colors.blue.600}',
+                _osDark: '{colors.blue.400}',
               },
             },
           },
@@ -194,16 +194,16 @@
       primary: {
         tokens: {
           colors: {
-            text: { value: "red" },
+            text: { value: 'red' },
           },
         },
         semanticTokens: {
           colors: {
-            muted: { value: "{colors.red.200}" },
+            muted: { value: '{colors.red.200}' },
             body: {
               value: {
-                base: "{colors.red.600}",
-                _osDark: "{colors.red.400}",
+                base: '{colors.red.600}',
+                _osDark: '{colors.red.400}',
               },
             },
           },
@@ -212,23 +212,23 @@
       secondary: {
         tokens: {
           colors: {
-            text: { value: "blue" },
+            text: { value: 'blue' },
           },
         },
         semanticTokens: {
           colors: {
-            muted: { value: "{colors.blue.200}" },
+            muted: { value: '{colors.blue.200}' },
             body: {
               value: {
-                base: "{colors.blue.600}",
-                _osDark: "{colors.blue.400}",
+                base: '{colors.blue.600}',
+                _osDark: '{colors.blue.400}',
               },
             },
           },
         },
       },
     },
-  });
+  })
   ```
 
   ### Pregenerating themes
@@ -238,14 +238,14 @@
 
   ```ts
   // panda.config.ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
     staticCss: {
-      themes: ["primary", "secondary"],
+      themes: ['primary', 'secondary'],
     },
-  });
+  })
   ```
 
   This will generate the following CSS:
@@ -257,7 +257,7 @@
       --colors-body: var(--colors-blue-600);
     }
 
-    [data-panda-theme="primary"] {
+    [data-panda-theme='primary'] {
       --colors-text: red;
       --colors-muted: var(--colors-red-200);
       --colors-body: var(--colors-red-600);
@@ -268,7 +268,7 @@
         --colors-body: var(--colors-blue-400);
       }
 
-      [data-panda-theme="primary"] {
+      [data-panda-theme='primary'] {
         --colors-body: var(--colors-red-400);
       }
     }
@@ -299,9 +299,9 @@
   Dynamically import a theme using its name:
 
   ```ts
-  import { getTheme } from "../styled-system/themes";
+  import { getTheme } from '../styled-system/themes'
 
-  const theme = await getTheme("red");
+  const theme = await getTheme('red')
   //    ^? {
   //     name: "red";
   //     id: string;
@@ -312,10 +312,10 @@
   Inject the theme styles into the DOM:
 
   ```ts
-  import { injectTheme } from "../styled-system/themes";
+  import { injectTheme } from '../styled-system/themes'
 
-  const theme = await getTheme("red");
-  injectTheme(document.documentElement, theme); // this returns the injected style element
+  const theme = await getTheme('red')
+  injectTheme(document.documentElement, theme) // this returns the injected style element
   ```
 
   ***
@@ -324,62 +324,54 @@
 
   ```tsx
   // app/layout.tsx
-  import { Inter } from "next/font/google";
-  import { cookies } from "next/headers";
-  import { ThemeName, getTheme } from "../../styled-system/themes";
-
-  export default async function RootLayout({
-    children,
-  }: {
-    children: React.ReactNode;
-  }) {
-    const store = cookies();
-    const themeName = store.get("theme")?.value as ThemeName;
-    const theme = themeName && (await getTheme(themeName));
+  import { Inter } from 'next/font/google'
+  import { cookies } from 'next/headers'
+  import { ThemeName, getTheme } from '../../styled-system/themes'
+
+  export default async function RootLayout({ children }: { children: React.ReactNode }) {
+    const store = cookies()
+    const themeName = store.get('theme')?.value as ThemeName
+    const theme = themeName && (await getTheme(themeName))
 
     return (
       <html lang="en" data-panda-theme={themeName ? themeName : undefined}>
         {themeName && (
           <head>
-            <style
-              type="text/css"
-              id={theme.id}
-              dangerouslySetInnerHTML={{ __html: theme.css }}
-            />
+            <style type="text/css" id={theme.id} dangerouslySetInnerHTML={{ __html: theme.css }} />
           </head>
         )}
         <body>{children}</body>
       </html>
-    );
+    )
   }
 
   // app/page.tsx
-  import { getTheme, injectTheme } from "../../styled-system/themes";
+  import { getTheme, injectTheme } from '../../styled-system/themes'
 
   export default function Home() {
     return (
       <>
         <button
           onClick={async () => {
-            const current = document.documentElement.dataset.pandaTheme;
-            const next = current === "primary" ? "secondary" : "primary";
-            const theme = await getTheme(next);
-            setCookie("theme", next, 7);
-            injectTheme(document.documentElement, theme);
+            const current = document.documentElement.dataset.pandaTheme
+            const next = current === 'primary' ? 'secondary' : 'primary'
+            const theme = await getTheme(next)
+            setCookie('theme', next, 7)
+            injectTheme(document.documentElement, theme)
           }}
         >
           swap theme
         </button>
       </>
-    );
+    )
   }
 
   // Set a Cookie
   function setCookie(cName: string, cValue: any, expDays: number) {
-    let date = new Date();
-    date.setTime(date.getTime() + expDays * 24 * 60 * 60 * 1000);
-    const expires = "expires=" + date.toUTCString();
-    document.cookie = cName + "=" + cValue + "; " + expires + "; path=/";
+    let date = new Date()
+    date.setTime(date.getTime() + expDays * 24 * 60 * 60 * 1000)
+    const expires = 'expires=' + date.toUTCString()
+    document.cookie = cName + '=' + cValue + '; ' + expires + '; path=/'
   }
   ```
 
@@ -388,18 +380,18 @@
   Finally, you can create a theme contract to ensure that all themes have the same structure:
 
   ```ts
-  import { defineThemeContract } from "@pandacss/dev";
+  import { defineThemeContract } from '@pandacss/dev'
 
   const defineTheme = defineThemeContract({
     tokens: {
       colors: {
-        red: { value: "" }, // theme implementations must have a red color
+        red: { value: '' }, // theme implementations must have a red color
       },
     },
-  });
+  })
 
   defineTheme({
-    selector: ".theme-secondary",
+    selector: '.theme-secondary',
     tokens: {
       colors: {
         // ^^^^   Property 'red' is missing in type '{}' but required in type '{ red: { value: string; }; }'
@@ -408,7 +400,7 @@
         // red: { value: 'red' },
       },
     },
-  });
+  })
   ```
 
 ### Patch Changes
@@ -416,30 +408,30 @@
 - 3af3940: Fix an issue when using a semantic token with one (but not all) condition using the color opacity modifier
 
   ```ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     theme: {
       extend: {
         tokens: {
           colors: {
-            black: { value: "black" },
-            white: { value: "white" },
+            black: { value: 'black' },
+            white: { value: 'white' },
           },
         },
         semanticTokens: {
           colors: {
             fg: {
               value: {
-                base: "{colors.black/87}",
-                _dark: "{colors.white}", // <- this was causing a weird issue
+                base: '{colors.black/87}',
+                _dark: '{colors.white}', // <- this was causing a weird issue
               },
             },
           },
         },
       },
     },
-  });
+  })
   ```
 
 - Updated dependencies [861a280]
@@ -457,20 +449,20 @@
 - f2fdc48: Fix negative `semanticTokens` generation
 
   ```ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     tokens: {
       spacing: {
-        1: { value: "1rem" },
+        1: { value: '1rem' },
       },
     },
     semanticTokens: {
       spacing: {
-        lg: { value: "{spacing.1}" },
+        lg: { value: '{spacing.1}' },
       },
     },
-  });
+  })
   ```
 
   Will now correctly generate the negative value:
@@ -511,18 +503,18 @@
 - d4942e0: Fix the color opacity modifier syntax for `semanticTokens` inside of conditions
 
   ```ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     conditions: {
-      light: ".light &",
-      dark: ".dark &",
+      light: '.light &',
+      dark: '.dark &',
     },
     theme: {
       tokens: {
         colors: {
-          blue: { 500: { value: "blue" } },
-          green: { 500: { value: "green" } },
+          blue: { 500: { value: 'blue' } },
+          green: { 500: { value: 'green' } },
         },
         opacity: {
           half: { value: 0.5 },
@@ -532,15 +524,15 @@
         colors: {
           secondary: {
             value: {
-              base: "red",
-              _light: "{colors.blue.500/32}", // <-- wasn't working as expected
-              _dark: "{colors.green.500/half}",
+              base: 'red',
+              _light: '{colors.blue.500/32}', // <-- wasn't working as expected
+              _dark: '{colors.green.500/half}',
             },
           },
         },
       },
     },
-  });
+  })
   ```
 
   will now correctly generate the following CSS:
@@ -555,19 +547,11 @@
     }
 
     .light {
-      --colors-secondary: color-mix(
-        in srgb,
-        var(--colors-blue-500) 32%,
-        transparent
-      );
+      --colors-secondary: color-mix(in srgb, var(--colors-blue-500) 32%, transparent);
     }
 
     .dark {
-      --colors-secondary: color-mix(
-        in srgb,
-        var(--colors-green-500) 50%,
-        transparent
-      );
+      --colors-secondary: color-mix(in srgb, var(--colors-green-500) 50%, transparent);
     }
   }
   ```
@@ -590,16 +574,16 @@
   ```ts
   // runtime usage
 
-  import { css } from "../styled-system/css";
+  import { css } from '../styled-system/css'
 
-  css({ bg: "{colors.blue.300/70}" });
+  css({ bg: '{colors.blue.300/70}' })
   // => @layer utilities {
   //    .bg_token\(colors\.blue\.300\/70\) {
   //      background: color-mix(in srgb, var(--colors-blue-300) 70%, transparent);
   //    }
   //  }
 
-  css({ bg: "token(colors.blue.300/70)" });
+  css({ bg: 'token(colors.blue.300/70)' })
   // => @layer utilities {
   //    .bg_token\(colors\.blue\.300\/70\) {
   //      background: color-mix(in srgb, var(--colors-blue-300) 70%, transparent);
@@ -609,37 +593,33 @@
 
   ```ts
   // build-time usage
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     theme: {
       tokens: {
         colors: {
           blue: {
-            300: { value: "#00f" },
+            300: { value: '#00f' },
           },
         },
       },
       semanticTokens: {
         colors: {
           primary: {
-            value: "{colors.blue.300/70}",
+            value: '{colors.blue.300/70}',
           },
         },
       },
     },
-  });
+  })
   ```
 
   ```css
   @layer tokens {
     :where(:root, :host) {
       --colors-blue-300: #00f;
-      --colors-primary: color-mix(
-        in srgb,
-        var(--colors-blue-300) 70%,
-        transparent
-      );
+      --colors-primary: color-mix(in srgb, var(--colors-blue-300) 70%, transparent);
     }
   }
   ```
@@ -676,7 +656,7 @@
   Given this config:
 
   ```ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
@@ -687,13 +667,13 @@
             bg: {
               primary: {
                 DEFAULT: {
-                  value: "{colors.red.500}",
+                  value: '{colors.red.500}',
                 },
                 base: {
-                  value: "{colors.green.500}",
+                  value: '{colors.green.500}',
                 },
                 hover: {
-                  value: "{colors.yellow.300}",
+                  value: '{colors.yellow.300}',
                 },
               },
             },
@@ -701,17 +681,17 @@
         },
       },
     },
-  });
+  })
   ```
 
   And this style usage:
 
   ```ts
-  import { css } from "styled-system/css";
+  import { css } from 'styled-system/css'
 
   css({
-    colorPalette: "bg.primary",
-  });
+    colorPalette: 'bg.primary',
+  })
   ```
 
   This is the difference in the generated css
@@ -825,10 +805,10 @@
   css({
     // ✅ this is fine now, will resolve to something like
     // `@container (min-width: 56em)`
-    "@container (min-width: {sizes.4xl})": {
-      color: "green",
+    '@container (min-width: {sizes.4xl})': {
+      color: 'green',
     },
-  });
+  })
   ```
 
   Fix an issue where the curly token references would not be escaped if the token path was not found.
@@ -907,13 +887,13 @@
         // add aspect ratio tokens
         tokens: {
           aspectRatios: {
-            "1:1": "1",
-            "16:9": "16/9",
+            '1:1': '1',
+            '16:9': '16/9',
           },
         },
       },
     },
-  });
+  })
   ```
 
   Here's what the default aspect ratio tokens in the base preset looks like:
@@ -974,11 +954,11 @@
 - de282f60: Support token reference syntax when authoring styles object, text styles and layer styles.
 
   ```jsx
-  import { css } from "../styled-system/css";
+  import { css } from '../styled-system/css'
 
   const styles = css({
-    border: "2px solid {colors.primary}",
-  });
+    border: '2px solid {colors.primary}',
+  })
   ```
 
   This will resolve the token reference and convert it to css variables.
@@ -998,18 +978,18 @@
   ```jsx
   const styles = css({
     // token reference syntax
-    border: "2px solid {colors.primary}",
+    border: '2px solid {colors.primary}',
     // token function syntax
-    border: "2px solid token(colors.primary)",
-  });
+    border: '2px solid token(colors.primary)',
+  })
   ```
 
   However, The `token(...)` syntax allows you to set a fallback value.
 
   ```jsx
   const styles = css({
-    border: "2px solid token(colors.primary, red)",
-  });
+    border: '2px solid token(colors.primary, red)',
+  })
   ```
 
 ### Patch Changes
@@ -1257,18 +1237,18 @@
         colors: {
           button: {
             dark: {
-              value: "navy",
+              value: 'navy',
             },
             light: {
               DEFAULT: {
-                value: "skyblue",
+                value: 'skyblue',
               },
               accent: {
                 DEFAULT: {
-                  value: "cyan",
+                  value: 'cyan',
                 },
                 secondary: {
-                  value: "blue",
+                  value: 'blue',
                 },
               },
             },
@@ -1276,50 +1256,50 @@
         },
       },
     },
-  };
+  }
   ```
 
   You can now use the root `button` color palette and its values directly:
 
   ```tsx
-  import { css } from "../styled-system/css";
+  import { css } from '../styled-system/css'
 
   export const App = () => {
     return (
       <button
         className={css({
-          colorPalette: "button",
-          color: "colorPalette.light",
-          backgroundColor: "colorPalette.dark",
+          colorPalette: 'button',
+          color: 'colorPalette.light',
+          backgroundColor: 'colorPalette.dark',
           _hover: {
-            color: "colorPalette.light.accent",
-            background: "colorPalette.light.accent.secondary",
+            color: 'colorPalette.light.accent',
+            background: 'colorPalette.light.accent.secondary',
           },
         })}
       >
         Root color palette
       </button>
-    );
-  };
+    )
+  }
   ```
 
   Or you can use any deeply nested property (e.g. `button.light.accent`) as a root color palette:
 
   ```tsx
-  import { css } from "../styled-system/css";
+  import { css } from '../styled-system/css'
 
   export const App = () => {
     return (
       <button
         className={css({
-          colorPalette: "button.light.accent",
-          color: "colorPalette.secondary",
+          colorPalette: 'button.light.accent',
+          color: 'colorPalette.secondary',
         })}
       >
         Nested color palette leaf
       </button>
-    );
-  };
+    )
+  }
   ```
 
 ### Patch Changes
@@ -1534,11 +1514,11 @@ This hook is called right before writing the codegen files to disk. You can use
 export default defineConfig({
   // ...
   hooks: {
-    "codegen:prepare": ({ artifacts, changed }) => {
+    'codegen:prepare': ({ artifacts, changed }) => {
       // do something with the emitted js/d.ts files
     },
   },
-});
+})
 ```
 
 - d5977c24: - Add a `--logfile` flag to the `panda`, `panda codegen`, `panda cssgen` and `panda debug` commands.
@@ -1555,11 +1535,11 @@ export default defineConfig({
   ```js
   module.exports = {
     plugins: {
-      "@pandacss/dev/postcss": {
-        logfile: "./logs/panda.log",
+      '@pandacss/dev/postcss': {
+        logfile: './logs/panda.log',
       },
     },
-  };
+  }
   ```
 
 - Updated dependencies [74485ef1]
@@ -1589,10 +1569,10 @@ export default defineConfig({
   css({
     // ✅ this is fine now, will resolve to something like
     // `@container (min-width: 56em)`
-    "@container (min-width: {sizes.4xl})": {
-      color: "green",
+    '@container (min-width: {sizes.4xl})': {
+      color: 'green',
     },
-  });
+  })
   ```
 
   Fix an issue where the curly token references would not be escaped if the token path was not found.
@@ -1671,13 +1651,13 @@ export default defineConfig({
         // add aspect ratio tokens
         tokens: {
           aspectRatios: {
-            "1:1": "1",
-            "16:9": "16/9",
+            '1:1': '1',
+            '16:9': '16/9',
           },
         },
       },
     },
-  });
+  })
   ```
 
   Here's what the default aspect ratio tokens in the base preset looks like:
@@ -1738,11 +1718,11 @@ export default defineConfig({
 - de282f60: Support token reference syntax when authoring styles object, text styles and layer styles.
 
   ```jsx
-  import { css } from "../styled-system/css";
+  import { css } from '../styled-system/css'
 
   const styles = css({
-    border: "2px solid {colors.primary}",
-  });
+    border: '2px solid {colors.primary}',
+  })
   ```
 
   This will resolve the token reference and convert it to css variables.
@@ -1762,18 +1742,18 @@ export default defineConfig({
   ```jsx
   const styles = css({
     // token reference syntax
-    border: "2px solid {colors.primary}",
+    border: '2px solid {colors.primary}',
     // token function syntax
-    border: "2px solid token(colors.primary)",
-  });
+    border: '2px solid token(colors.primary)',
+  })
   ```
 
   However, The `token(...)` syntax allows you to set a fallback value.
 
   ```jsx
   const styles = css({
-    border: "2px solid token(colors.primary, red)",
-  });
+    border: '2px solid token(colors.primary, red)',
+  })
   ```
 
 ### Patch Changes
@@ -2021,18 +2001,18 @@ export default defineConfig({
         colors: {
           button: {
             dark: {
-              value: "navy",
+              value: 'navy',
             },
             light: {
               DEFAULT: {
-                value: "skyblue",
+                value: 'skyblue',
               },
               accent: {
                 DEFAULT: {
-                  value: "cyan",
+                  value: 'cyan',
                 },
                 secondary: {
-                  value: "blue",
+                  value: 'blue',
                 },
               },
             },
@@ -2040,50 +2020,50 @@ export default defineConfig({
         },
       },
     },
-  };
+  }
   ```
 
   You can now use the root `button` color palette and its values directly:
 
   ```tsx
-  import { css } from "../styled-system/css";
+  import { css } from '../styled-system/css'
 
   export const App = () => {
     return (
       <button
         className={css({
-          colorPalette: "button",
-          color: "colorPalette.light",
-          backgroundColor: "colorPalette.dark",
+          colorPalette: 'button',
+          color: 'colorPalette.light',
+          backgroundColor: 'colorPalette.dark',
           _hover: {
-            color: "colorPalette.light.accent",
-            background: "colorPalette.light.accent.secondary",
+            color: 'colorPalette.light.accent',
+            background: 'colorPalette.light.accent.secondary',
           },
         })}
       >
         Root color palette
       </button>
-    );
-  };
+    )
+  }
   ```
 
   Or you can use any deeply nested property (e.g. `button.light.accent`) as a root color palette:
 
   ```tsx
-  import { css } from "../styled-system/css";
+  import { css } from '../styled-system/css'
 
   export const App = () => {
     return (
       <button
         className={css({
-          colorPalette: "button.light.accent",
-          color: "colorPalette.secondary",
+          colorPalette: 'button.light.accent',
+          color: 'colorPalette.secondary',
         })}
       >
         Nested color palette leaf
       </button>
-    );
-  };
+    )
+  }
   ```
 
 ### Patch Changes
@@ -2293,7 +2273,7 @@ Will now allow you to use the following syntax for token path:
   Given this config:
 
   ```ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
@@ -2304,13 +2284,13 @@ Will now allow you to use the following syntax for token path:
             bg: {
               primary: {
                 DEFAULT: {
-                  value: "{colors.red.500}",
+                  value: '{colors.red.500}',
                 },
                 base: {
-                  value: "{colors.green.500}",
+                  value: '{colors.green.500}',
                 },
                 hover: {
-                  value: "{colors.yellow.300}",
+                  value: '{colors.yellow.300}',
                 },
               },
             },
@@ -2318,17 +2298,17 @@ Will now allow you to use the following syntax for token path:
         },
       },
     },
-  });
+  })
   ```
 
   And this style usage:
 
   ```ts
-  import { css } from "styled-system/css";
+  import { css } from 'styled-system/css'
 
   css({
-    colorPalette: "bg.primary",
-  });
+    colorPalette: 'bg.primary',
+  })
   ```
 
   This is the difference in the generated css
@@ -2442,10 +2422,10 @@ Will now allow you to use the following syntax for token path:
   css({
     // ✅ this is fine now, will resolve to something like
     // `@container (min-width: 56em)`
-    "@container (min-width: {sizes.4xl})": {
-      color: "green",
+    '@container (min-width: {sizes.4xl})': {
+      color: 'green',
     },
-  });
+  })
   ```
 
   Fix an issue where the curly token references would not be escaped if the token path was not found.
@@ -2524,13 +2504,13 @@ Will now allow you to use the following syntax for token path:
         // add aspect ratio tokens
         tokens: {
           aspectRatios: {
-            "1:1": "1",
-            "16:9": "16/9",
+            '1:1': '1',
+            '16:9': '16/9',
           },
         },
       },
     },
-  });
+  })
   ```
 
   Here's what the default aspect ratio tokens in the base preset looks like:
@@ -2591,11 +2571,11 @@ Will now allow you to use the following syntax for token path:
 - de282f60: Support token reference syntax when authoring styles object, text styles and layer styles.
 
   ```jsx
-  import { css } from "../styled-system/css";
+  import { css } from '../styled-system/css'
 
   const styles = css({
-    border: "2px solid {colors.primary}",
-  });
+    border: '2px solid {colors.primary}',
+  })
   ```
 
   This will resolve the token reference and convert it to css variables.
@@ -2615,18 +2595,18 @@ Will now allow you to use the following syntax for token path:
   ```jsx
   const styles = css({
     // token reference syntax
-    border: "2px solid {colors.primary}",
+    border: '2px solid {colors.primary}',
     // token function syntax
-    border: "2px solid token(colors.primary)",
-  });
+    border: '2px solid token(colors.primary)',
+  })
   ```
 
   However, The `token(...)` syntax allows you to set a fallback value.
 
   ```jsx
   const styles = css({
-    border: "2px solid token(colors.primary, red)",
-  });
+    border: '2px solid token(colors.primary, red)',
+  })
   ```
 
 ### Patch Changes
@@ -2874,18 +2854,18 @@ Will now allow you to use the following syntax for token path:
         colors: {
           button: {
             dark: {
-              value: "navy",
+              value: 'navy',
             },
             light: {
               DEFAULT: {
-                value: "skyblue",
+                value: 'skyblue',
               },
               accent: {
                 DEFAULT: {
-                  value: "cyan",
+                  value: 'cyan',
                 },
                 secondary: {
-                  value: "blue",
+                  value: 'blue',
                 },
               },
             },
@@ -2893,50 +2873,50 @@ Will now allow you to use the following syntax for token path:
         },
       },
     },
-  };
+  }
   ```
 
   You can now use the root `button` color palette and its values directly:
 
   ```tsx
-  import { css } from "../styled-system/css";
+  import { css } from '../styled-system/css'
 
   export const App = () => {
     return (
       <button
         className={css({
-          colorPalette: "button",
-          color: "colorPalette.light",
-          backgroundColor: "colorPalette.dark",
+          colorPalette: 'button',
+          color: 'colorPalette.light',
+          backgroundColor: 'colorPalette.dark',
           _hover: {
-            color: "colorPalette.light.accent",
-            background: "colorPalette.light.accent.secondary",
+            color: 'colorPalette.light.accent',
+            background: 'colorPalette.light.accent.secondary',
           },
         })}
       >
         Root color palette
       </button>
-    );
-  };
+    )
+  }
   ```
 
   Or you can use any deeply nested property (e.g. `button.light.accent`) as a root color palette:
 
   ```tsx
-  import { css } from "../styled-system/css";
+  import { css } from '../styled-system/css'
 
   export const App = () => {
     return (
       <button
         className={css({
-          colorPalette: "button.light.accent",
-          color: "colorPalette.secondary",
+          colorPalette: 'button.light.accent',
+          color: 'colorPalette.secondary',
         })}
       >
         Nested color palette leaf
       </button>
-    );
-  };
+    )
+  }
   ```
 
 ### Patch Changes
@@ -3151,11 +3131,11 @@ This hook is called right before writing the codegen files to disk. You can use
 export default defineConfig({
   // ...
   hooks: {
-    "codegen:prepare": ({ artifacts, changed }) => {
+    'codegen:prepare': ({ artifacts, changed }) => {
       // do something with the emitted js/d.ts files
     },
   },
-});
+})
 ```
 
 - d5977c24: - Add a `--logfile` flag to the `panda`, `panda codegen`, `panda cssgen` and `panda debug` commands.
@@ -3172,11 +3152,11 @@ export default defineConfig({
   ```js
   module.exports = {
     plugins: {
-      "@pandacss/dev/postcss": {
-        logfile: "./logs/panda.log",
+      '@pandacss/dev/postcss': {
+        logfile: './logs/panda.log',
       },
     },
-  };
+  }
   ```
 
 - Updated dependencies [74485ef1]
@@ -3206,10 +3186,10 @@ export default defineConfig({
   css({
     // ✅ this is fine now, will resolve to something like
     // `@container (min-width: 56em)`
-    "@container (min-width: {sizes.4xl})": {
-      color: "green",
+    '@container (min-width: {sizes.4xl})': {
+      color: 'green',
     },
-  });
+  })
   ```
 
   Fix an issue where the curly token references would not be escaped if the token path was not found.
@@ -3288,13 +3268,13 @@ export default defineConfig({
         // add aspect ratio tokens
         tokens: {
           aspectRatios: {
-            "1:1": "1",
-            "16:9": "16/9",
+            '1:1': '1',
+            '16:9': '16/9',
           },
         },
       },
     },
-  });
+  })
   ```
 
   Here's what the default aspect ratio tokens in the base preset looks like:
@@ -3355,11 +3335,11 @@ export default defineConfig({
 - de282f60: Support token reference syntax when authoring styles object, text styles and layer styles.
 
   ```jsx
-  import { css } from "../styled-system/css";
+  import { css } from '../styled-system/css'
 
   const styles = css({
-    border: "2px solid {colors.primary}",
-  });
+    border: '2px solid {colors.primary}',
+  })
   ```
 
   This will resolve the token reference and convert it to css variables.
@@ -3379,18 +3359,18 @@ export default defineConfig({
   ```jsx
   const styles = css({
     // token reference syntax
-    border: "2px solid {colors.primary}",
+    border: '2px solid {colors.primary}',
     // token function syntax
-    border: "2px solid token(colors.primary)",
-  });
+    border: '2px solid token(colors.primary)',
+  })
   ```
 
   However, The `token(...)` syntax allows you to set a fallback value.
 
   ```jsx
   const styles = css({
-    border: "2px solid token(colors.primary, red)",
-  });
+    border: '2px solid token(colors.primary, red)',
+  })
   ```
 
 ### Patch Changes
@@ -3638,18 +3618,18 @@ export default defineConfig({
         colors: {
           button: {
             dark: {
-              value: "navy",
+              value: 'navy',
             },
             light: {
               DEFAULT: {
-                value: "skyblue",
+                value: 'skyblue',
               },
               accent: {
                 DEFAULT: {
-                  value: "cyan",
+                  value: 'cyan',
                 },
                 secondary: {
-                  value: "blue",
+                  value: 'blue',
                 },
               },
             },
@@ -3657,50 +3637,50 @@ export default defineConfig({
         },
       },
     },
-  };
+  }
   ```
 
   You can now use the root `button` color palette and its values directly:
 
   ```tsx
-  import { css } from "../styled-system/css";
+  import { css } from '../styled-system/css'
 
   export const App = () => {
     return (
       <button
         className={css({
-          colorPalette: "button",
-          color: "colorPalette.light",
-          backgroundColor: "colorPalette.dark",
+          colorPalette: 'button',
+          color: 'colorPalette.light',
+          backgroundColor: 'colorPalette.dark',
           _hover: {
-            color: "colorPalette.light.accent",
-            background: "colorPalette.light.accent.secondary",
+            color: 'colorPalette.light.accent',
+            background: 'colorPalette.light.accent.secondary',
           },
         })}
       >
         Root color palette
       </button>
-    );
-  };
+    )
+  }
   ```
 
   Or you can use any deeply nested property (e.g. `button.light.accent`) as a root color palette:
 
   ```tsx
-  import { css } from "../styled-system/css";
+  import { css } from '../styled-system/css'
 
   export const App = () => {
     return (
       <button
         className={css({
-          colorPalette: "button.light.accent",
-          color: "colorPalette.secondary",
+          colorPalette: 'button.light.accent',
+          color: 'colorPalette.secondary',
         })}
       >
         Nested color palette leaf
       </button>
-    );
-  };
+    )
+  }
   ```
 
 ### Patch Changes
diff --git a/packages/types/CHANGELOG.md b/packages/types/CHANGELOG.md
index 8ec8430c2..73270b4cf 100644
--- a/packages/types/CHANGELOG.md
+++ b/packages/types/CHANGELOG.md
@@ -4,12 +4,13 @@
 
 ### Minor Changes
 
-- 221c9a2: Add support for more typography related properties in text styles such as `fontFeatureSettings`, `fontPalette`, etc.
+- 221c9a2: Add support for more typography related properties in text styles such as `fontFeatureSettings`,
+  `fontPalette`, etc.
 
 ### Patch Changes
 
-- c3e797e: Fix issue where `animationName` property was not connected to `theme.keyframes`, as a result, no autocompletion was
-  available.
+- c3e797e: Fix issue where `animationName` property was not connected to `theme.keyframes`, as a result, no
+  autocompletion was available.
 
 ## 0.38.0
 
@@ -28,11 +29,11 @@
       ta: {
         deprecated: true,
         transform(value) {
-          return { textAlign: value };
+          return { textAlign: value }
         },
       },
     },
-  });
+  })
   ```
 
   **Deprecating a token**
@@ -42,11 +43,11 @@
     theme: {
       tokens: {
         spacing: {
-          lg: { value: "8px", deprecated: "use `8` instead" },
+          lg: { value: '8px', deprecated: 'use `8` instead' },
         },
       },
     },
-  });
+  })
   ```
 
   **Deprecating a pattern**
@@ -58,7 +59,7 @@
         deprecated: true,
       },
     },
-  });
+  })
   ```
 
   **Deprecating a recipe**
@@ -68,11 +69,11 @@
     theme: {
       recipes: {
         btn: {
-          deprecated: "will be removed in v2.0",
+          deprecated: 'will be removed in v2.0',
         },
       },
     },
-  });
+  })
   ```
 
   ### ESLint Plugin
@@ -96,28 +97,23 @@
   This makes it even easier to merge styles from multiple sources.
 
   ```tsx
-  import { Stack, styled } from "../styled-system/jsx";
+  import { Stack, styled } from '../styled-system/jsx'
 
   const HeroSection = (props) => {
     return (
-      <Stack css={[{ color: "blue.300", padding: "4" }, props.css]}>
-        <styled.div css={[{ fontSize: "2xl" }, props.hero]}>
-          Hero Section
-        </styled.div>
+      <Stack css={[{ color: 'blue.300', padding: '4' }, props.css]}>
+        <styled.div css={[{ fontSize: '2xl' }, props.hero]}>Hero Section</styled.div>
       </Stack>
-    );
-  };
+    )
+  }
 
   const App = () => {
     return (
       <>
-        <HeroSection
-          css={{ backgroundColor: "yellow.300" }}
-          hero={css.raw({ fontSize: "4xl", color: "red.300" })}
-        />
+        <HeroSection css={{ backgroundColor: 'yellow.300' }} hero={css.raw({ fontSize: '4xl', color: 'red.300' })} />
       </>
-    );
-  };
+    )
+  }
   ```
 
   should render something like:
@@ -289,9 +285,9 @@
     useful when applying negative margin to child elements.
 
   ```tsx
-  <div className={flex({ spaceX: "-1" })}>
-    <div className={circle({ size: "5", bg: "red" })} />
-    <div className={circle({ size: "5", bg: "pink" })} />
+  <div className={flex({ spaceX: '-1' })}>
+    <div className={circle({ size: '5', bg: 'red' })} />
+    <div className={circle({ size: '5', bg: 'pink' })} />
   </div>
   ```
 
@@ -303,13 +299,13 @@
   ```tsx
   <div
     className={css({
-      bgGradient: "to-r",
+      bgGradient: 'to-r',
       // from
-      gradientFrom: "red",
-      gradientFromPosition: "top left",
+      gradientFrom: 'red',
+      gradientFromPosition: 'top left',
       // to
-      gradientTo: "blue",
-      gradientToPosition: "bottom right",
+      gradientTo: 'blue',
+      gradientToPosition: 'bottom right',
     })}
   />
   ```
@@ -319,23 +315,19 @@
   It can be useful to use a component library's `styled-system` while also using your own `styled-system` in your app.
 
   ```ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
-    importMap: [
-      "@acme/styled-system",
-      "@ui-lib/styled-system",
-      "styled-system",
-    ],
-  });
+    importMap: ['@acme/styled-system', '@ui-lib/styled-system', 'styled-system'],
+  })
   ```
 
   Now you can use any of the `@acme/styled-system`, `@ui-lib/styled-system` and `styled-system` import sources:
 
   ```ts
-  import { css } from "@acme/css";
-  import { css as uiCss } from "@ui-lib/styled-system/css";
-  import { css as appCss } from "@ui-lib/styled-system/css";
+  import { css } from '@acme/css'
+  import { css as uiCss } from '@ui-lib/styled-system/css'
+  import { css as appCss } from '@ui-lib/styled-system/css'
   ```
 
 ## 0.36.1
@@ -358,7 +350,7 @@
 
   ```ts
   // panda.config.ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
@@ -367,15 +359,15 @@
       extend: {
         tokens: {
           colors: {
-            text: { value: "blue" },
+            text: { value: 'blue' },
           },
         },
         semanticTokens: {
           colors: {
             body: {
               value: {
-                base: "{colors.blue.600}",
-                _osDark: "{colors.blue.400}",
+                base: '{colors.blue.600}',
+                _osDark: '{colors.blue.400}',
               },
             },
           },
@@ -387,16 +379,16 @@
       primary: {
         tokens: {
           colors: {
-            text: { value: "red" },
+            text: { value: 'red' },
           },
         },
         semanticTokens: {
           colors: {
-            muted: { value: "{colors.red.200}" },
+            muted: { value: '{colors.red.200}' },
             body: {
               value: {
-                base: "{colors.red.600}",
-                _osDark: "{colors.red.400}",
+                base: '{colors.red.600}',
+                _osDark: '{colors.red.400}',
               },
             },
           },
@@ -405,23 +397,23 @@
       secondary: {
         tokens: {
           colors: {
-            text: { value: "blue" },
+            text: { value: 'blue' },
           },
         },
         semanticTokens: {
           colors: {
-            muted: { value: "{colors.blue.200}" },
+            muted: { value: '{colors.blue.200}' },
             body: {
               value: {
-                base: "{colors.blue.600}",
-                _osDark: "{colors.blue.400}",
+                base: '{colors.blue.600}',
+                _osDark: '{colors.blue.400}',
               },
             },
           },
         },
       },
     },
-  });
+  })
   ```
 
   ### Pregenerating themes
@@ -431,14 +423,14 @@
 
   ```ts
   // panda.config.ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
     staticCss: {
-      themes: ["primary", "secondary"],
+      themes: ['primary', 'secondary'],
     },
-  });
+  })
   ```
 
   This will generate the following CSS:
@@ -450,7 +442,7 @@
       --colors-body: var(--colors-blue-600);
     }
 
-    [data-panda-theme="primary"] {
+    [data-panda-theme='primary'] {
       --colors-text: red;
       --colors-muted: var(--colors-red-200);
       --colors-body: var(--colors-red-600);
@@ -461,7 +453,7 @@
         --colors-body: var(--colors-blue-400);
       }
 
-      [data-panda-theme="primary"] {
+      [data-panda-theme='primary'] {
         --colors-body: var(--colors-red-400);
       }
     }
@@ -492,9 +484,9 @@
   Dynamically import a theme using its name:
 
   ```ts
-  import { getTheme } from "../styled-system/themes";
+  import { getTheme } from '../styled-system/themes'
 
-  const theme = await getTheme("red");
+  const theme = await getTheme('red')
   //    ^? {
   //     name: "red";
   //     id: string;
@@ -505,10 +497,10 @@
   Inject the theme styles into the DOM:
 
   ```ts
-  import { injectTheme } from "../styled-system/themes";
+  import { injectTheme } from '../styled-system/themes'
 
-  const theme = await getTheme("red");
-  injectTheme(document.documentElement, theme); // this returns the injected style element
+  const theme = await getTheme('red')
+  injectTheme(document.documentElement, theme) // this returns the injected style element
   ```
 
   ***
@@ -517,62 +509,54 @@
 
   ```tsx
   // app/layout.tsx
-  import { Inter } from "next/font/google";
-  import { cookies } from "next/headers";
-  import { ThemeName, getTheme } from "../../styled-system/themes";
-
-  export default async function RootLayout({
-    children,
-  }: {
-    children: React.ReactNode;
-  }) {
-    const store = cookies();
-    const themeName = store.get("theme")?.value as ThemeName;
-    const theme = themeName && (await getTheme(themeName));
+  import { Inter } from 'next/font/google'
+  import { cookies } from 'next/headers'
+  import { ThemeName, getTheme } from '../../styled-system/themes'
+
+  export default async function RootLayout({ children }: { children: React.ReactNode }) {
+    const store = cookies()
+    const themeName = store.get('theme')?.value as ThemeName
+    const theme = themeName && (await getTheme(themeName))
 
     return (
       <html lang="en" data-panda-theme={themeName ? themeName : undefined}>
         {themeName && (
           <head>
-            <style
-              type="text/css"
-              id={theme.id}
-              dangerouslySetInnerHTML={{ __html: theme.css }}
-            />
+            <style type="text/css" id={theme.id} dangerouslySetInnerHTML={{ __html: theme.css }} />
           </head>
         )}
         <body>{children}</body>
       </html>
-    );
+    )
   }
 
   // app/page.tsx
-  import { getTheme, injectTheme } from "../../styled-system/themes";
+  import { getTheme, injectTheme } from '../../styled-system/themes'
 
   export default function Home() {
     return (
       <>
         <button
           onClick={async () => {
-            const current = document.documentElement.dataset.pandaTheme;
-            const next = current === "primary" ? "secondary" : "primary";
-            const theme = await getTheme(next);
-            setCookie("theme", next, 7);
-            injectTheme(document.documentElement, theme);
+            const current = document.documentElement.dataset.pandaTheme
+            const next = current === 'primary' ? 'secondary' : 'primary'
+            const theme = await getTheme(next)
+            setCookie('theme', next, 7)
+            injectTheme(document.documentElement, theme)
           }}
         >
           swap theme
         </button>
       </>
-    );
+    )
   }
 
   // Set a Cookie
   function setCookie(cName: string, cValue: any, expDays: number) {
-    let date = new Date();
-    date.setTime(date.getTime() + expDays * 24 * 60 * 60 * 1000);
-    const expires = "expires=" + date.toUTCString();
-    document.cookie = cName + "=" + cValue + "; " + expires + "; path=/";
+    let date = new Date()
+    date.setTime(date.getTime() + expDays * 24 * 60 * 60 * 1000)
+    const expires = 'expires=' + date.toUTCString()
+    document.cookie = cName + '=' + cValue + '; ' + expires + '; path=/'
   }
   ```
 
@@ -581,18 +565,18 @@
   Finally, you can create a theme contract to ensure that all themes have the same structure:
 
   ```ts
-  import { defineThemeContract } from "@pandacss/dev";
+  import { defineThemeContract } from '@pandacss/dev'
 
   const defineTheme = defineThemeContract({
     tokens: {
       colors: {
-        red: { value: "" }, // theme implementations must have a red color
+        red: { value: '' }, // theme implementations must have a red color
       },
     },
-  });
+  })
 
   defineTheme({
-    selector: ".theme-secondary",
+    selector: '.theme-secondary',
     tokens: {
       colors: {
         // ^^^^   Property 'red' is missing in type '{}' but required in type '{ red: { value: string; }; }'
@@ -601,7 +585,7 @@
         // red: { value: 'red' },
       },
     },
-  });
+  })
   ```
 
 - fabdabe: ## Changes
@@ -621,12 +605,12 @@
     theme: {
       extend: {
         colors: {
-          primary: { value: "blue" },
+          primary: { value: 'blue' },
         },
         // borderWidths: {}, // ⚠️ nothing defined here
       },
     },
-  });
+  })
   ```
 
   ```ts
@@ -637,8 +621,8 @@
 
     // ✅ after this PR, TS will not throw an error anymore as you don't have any `borderWidths` tokens
     // if you add one, this will error again (as it's supposed to)
-    borderWidths: "123px",
-  });
+    borderWidths: '123px',
+  })
   ```
 
   ## Description
@@ -665,34 +649,34 @@
   Example:
 
   ```ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
     globalVars: {
-      "--some-color": "red",
-      "--button-color": {
-        syntax: "<color>",
+      '--some-color': 'red',
+      '--button-color': {
+        syntax: '<color>',
         inherits: false,
-        initialValue: "blue",
+        initialValue: 'blue',
       },
     },
-  });
+  })
   ```
 
   > Note: Keys defined in `globalVars` will be available as a value for _every_ utilities, as they're not bound to token
   > categories.
 
   ```ts
-  import { css } from "../styled-system/css";
+  import { css } from '../styled-system/css'
 
   const className = css({
-    "--button-color": "colors.red.300",
+    '--button-color': 'colors.red.300',
     // ^^^^^^^^^^^^  will be suggested
 
-    backgroundColor: "var(--button-color)",
+    backgroundColor: 'var(--button-color)',
     //                ^^^^^^^^^^^^^^^^^^  will be suggested
-  });
+  })
   ```
 
 - 340f4f1: Fix `Expression produces a union type that is too complex to represent` with `splitCssProps` because of
@@ -710,32 +694,32 @@
   Each slot will contain a `${className}__${slotName}` class in addition to the atomic styles.
 
   ```tsx
-  import { sva } from "../styled-system/css";
+  import { sva } from '../styled-system/css'
 
   const button = sva({
-    className: "btn",
-    slots: ["root", "text"],
+    className: 'btn',
+    slots: ['root', 'text'],
     base: {
       root: {
-        bg: "blue.500",
+        bg: 'blue.500',
         _hover: {
           // v--- 🎯 this will target the `text` slot
-          "& .btn__text": {
-            color: "white",
+          '& .btn__text': {
+            color: 'white',
           },
         },
       },
     },
-  });
+  })
 
   export const App = () => {
-    const classes = button();
+    const classes = button()
     return (
       <div className={classes.root}>
         <div className={classes.text}>Click me</div>
       </div>
-    );
-  };
+    )
+  }
   ```
 
 ## 0.34.3
@@ -780,15 +764,15 @@
   class assigned.
 
   ```js
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     preflight: {
-      scope: ".my-scope",
-      level: "element", // 'element' | 'parent (default)'
+      scope: '.my-scope',
+      level: 'element', // 'element' | 'parent (default)'
     },
     // ...
-  });
+  })
   ```
 
   This will generate CSS that looks like:
@@ -818,20 +802,20 @@
   export default defaultConfig({
     conditions: {
       extend: {
-        supportHover: ["@media (hover: hover) and (pointer: fine)", "&:hover"],
+        supportHover: ['@media (hover: hover) and (pointer: fine)', '&:hover'],
       },
     },
-  });
+  })
   ```
 
   ```ts
-  import { css } from "../styled-system/css";
+  import { css } from '../styled-system/css'
 
   css({
     _supportHover: {
-      color: "red",
+      color: 'red',
     },
-  });
+  })
   ```
 
   will generate the following CSS:
@@ -908,17 +892,16 @@
   export default defineConfig({
     // ...
     hooks: {
-      "parser:before": ({ configure }) => {
+      'parser:before': ({ configure }) => {
         configure({
           // ignore the Select.Content entirely
-          matchTag: (tag) => tag !== "Select.Content",
+          matchTag: (tag) => tag !== 'Select.Content',
           // ...or specifically ignore the `position` property
-          matchTagProp: (tag, prop) =>
-            tag === "Select.Content" && prop !== "position",
-        });
+          matchTagProp: (tag, prop) => tag === 'Select.Content' && prop !== 'position',
+        })
       },
     },
-  });
+  })
   ```
 
 ## 0.30.1
@@ -934,16 +917,16 @@
   keeping the rest. Let's say we want to remove the `stack` pattern from the built-in `@pandacss/preset-base`:
 
   ```ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
     hooks: {
-      "config:resolved": ({ config, utils }) => {
-        return utils.omit(config, ["patterns.stack"]);
+      'config:resolved': ({ config, utils }) => {
+        return utils.omit(config, ['patterns.stack'])
       },
     },
-  });
+  })
   ```
 
 - ab32d1d7: Introduce 3 new hooks:
@@ -980,9 +963,9 @@
 
   ```ts
   css({
-    bg: "red.300/40",
-    color: "white",
-  });
+    bg: 'red.300/40',
+    color: 'white',
+  })
   ```
 
   This will generate:
@@ -990,11 +973,7 @@
   ```css
   @layer utilities {
     .bg_red\.300\/40 {
-      --mix-background: color-mix(
-        in srgb,
-        var(--colors-red-300) 40%,
-        transparent
-      );
+      --mix-background: color-mix(in srgb, var(--colors-red-300) 40%, transparent);
       background: var(--mix-background, var(--colors-red-300));
     }
 
@@ -1018,21 +997,21 @@
   export default defineConfig({
     utilities: {
       background: {
-        shorthand: "bg",
-        className: "bg",
-        values: "colors",
+        shorthand: 'bg',
+        className: 'bg',
+        values: 'colors',
         transform(value, args) {
-          const mix = args.utils.colorMix(value);
+          const mix = args.utils.colorMix(value)
           // This can happen if the value format is invalid (e.g. `bg: red.300/invalid` or `bg: red.300//10`)
-          if (mix.invalid) return { background: value };
+          if (mix.invalid) return { background: value }
 
           return {
             background: mix.value,
-          };
+          }
         },
       },
     },
-  });
+  })
   ```
 
   ***
@@ -1041,21 +1020,21 @@
   property:
 
   ```ts
-  import type { PropertyTransform } from "@pandacss/types";
+  import type { PropertyTransform } from '@pandacss/types'
 
   export const createColorMixTransform =
     (prop: string): PropertyTransform =>
     (value, args) => {
-      const mix = args.utils.colorMix(value);
-      if (mix.invalid) return { [prop]: value };
+      const mix = args.utils.colorMix(value)
+      if (mix.invalid) return { [prop]: value }
 
-      const cssVar = "--mix-" + prop;
+      const cssVar = '--mix-' + prop
 
       return {
         [cssVar]: mix.value,
         [prop]: `var(${cssVar}, ${mix.color})`,
-      };
-    };
+      }
+    }
   ```
 
   then the same utility transform as above can be written like this:
@@ -1083,34 +1062,34 @@
     // ...
     theme: {
       extend: {
-        containerNames: ["sidebar", "content"],
+        containerNames: ['sidebar', 'content'],
         containerSizes: {
-          xs: "40em",
-          sm: "60em",
-          md: "80em",
+          xs: '40em',
+          sm: '60em',
+          md: '80em',
         },
       },
     },
-  });
+  })
   ```
 
   The default container sizes in the `@pandacss/preset-panda` preset are shown below:
 
   ```ts
   export const containerSizes = {
-    xs: "320px",
-    sm: "384px",
-    md: "448px",
-    lg: "512px",
-    xl: "576px",
-    "2xl": "672px",
-    "3xl": "768px",
-    "4xl": "896px",
-    "5xl": "1024px",
-    "6xl": "1152px",
-    "7xl": "1280px",
-    "8xl": "1440px",
-  };
+    xs: '320px',
+    sm: '384px',
+    md: '448px',
+    lg: '512px',
+    xl: '576px',
+    '2xl': '672px',
+    '3xl': '768px',
+    '4xl': '896px',
+    '5xl': '1024px',
+    '6xl': '1152px',
+    '7xl': '1280px',
+    '8xl': '1440px',
+  }
   ```
 
   Then use them in your styles by referencing using `@<container-name>/<container-size>` syntax:
@@ -1195,8 +1174,8 @@
   ```ts
   export default defineConfig({
     // ...
-    dependencies: ["path/to/files/**.ts"],
-  });
+    dependencies: ['path/to/files/**.ts'],
+  })
   ```
 
   - Invoke `config:change` hook in more situations (when the `--watch` flag is passed to `panda codegen`,
@@ -1229,54 +1208,39 @@
      * Called when the config is resolved, after all the presets are loaded and merged.
      * This is the first hook called, you can use it to tweak the config before the context is created.
      */
-    "config:resolved": (args: { conf: LoadConfigResult }) => MaybeAsyncReturn;
+    'config:resolved': (args: { conf: LoadConfigResult }) => MaybeAsyncReturn
     /**
      * Called when the Panda context has been created and the API is ready to be used.
      */
-    "context:created": (args: {
-      ctx: ApiInterface;
-      logger: LoggerInterface;
-    }) => void;
+    'context:created': (args: { ctx: ApiInterface; logger: LoggerInterface }) => void
     /**
      * Called when the config file or one of its dependencies (imports) has changed.
      */
-    "config:change": (args: { config: UserConfig }) => MaybeAsyncReturn;
+    'config:change': (args: { config: UserConfig }) => MaybeAsyncReturn
     /**
      * Called after reading the file content but before parsing it.
      * You can use this hook to transform the file content to a tsx-friendly syntax so that Panda's parser can parse it.
      * You can also use this hook to parse the file's content on your side using a custom parser, in this case you don't have to return anything.
      */
-    "parser:before": (args: {
-      filePath: string;
-      content: string;
-    }) => string | void;
+    'parser:before': (args: { filePath: string; content: string }) => string | void
     /**
      * Called after the file styles are extracted and processed into the resulting ParserResult object.
      * You can also use this hook to add your own extraction results from your custom parser to the ParserResult object.
      */
-    "parser:after": (args: {
-      filePath: string;
-      result: ParserResultInterface | undefined;
-    }) => void;
+    'parser:after': (args: { filePath: string; result: ParserResultInterface | undefined }) => void
     /**
      * Called after the codegen is completed
      */
-    "codegen:done": () => MaybeAsyncReturn;
+    'codegen:done': () => MaybeAsyncReturn
     /**
      * Called right before adding the design-system CSS (global, static, preflight, tokens, keyframes) to the final CSS
      * Called right before writing/injecting the final CSS (styles.css) that contains the design-system CSS and the parser CSS
      * You can use it to tweak the CSS content before it's written to disk or injected through the postcss plugin.
      */
-    "cssgen:done": (args: {
-      artifact:
-        | "global"
-        | "static"
-        | "reset"
-        | "tokens"
-        | "keyframes"
-        | "styles.css";
-      content: string;
-    }) => string | void;
+    'cssgen:done': (args: {
+      artifact: 'global' | 'static' | 'reset' | 'tokens' | 'keyframes' | 'styles.css'
+      content: string
+    }) => string | void
   }
   ```
 
@@ -1356,38 +1320,38 @@
 
   ```ts
   const card = defineRecipe({
-    className: "card",
-    base: { color: "white" },
+    className: 'card',
+    base: { color: 'white' },
     variants: {
       size: {
-        small: { fontSize: "14px" },
-        large: { fontSize: "18px" },
+        small: { fontSize: '14px' },
+        large: { fontSize: '18px' },
       },
       visual: {
-        primary: { backgroundColor: "blue" },
-        secondary: { backgroundColor: "gray" },
+        primary: { backgroundColor: 'blue' },
+        secondary: { backgroundColor: 'gray' },
       },
     },
-  });
+  })
 
   export default defineConfig({
     // ...
     staticCss: {
       recipes: {
-        card: ["*"], // this
+        card: ['*'], // this
 
         // was equivalent to:
         card: [
           // notice how `responsive: true` was implicitly added
-          { size: ["*"], responsive: true },
-          { visual: ["*"], responsive: true },
+          { size: ['*'], responsive: true },
+          { visual: ['*'], responsive: true },
         ],
 
         //   will now correctly be equivalent to:
-        card: [{ size: ["*"] }, { visual: ["*"] }],
+        card: [{ size: ['*'] }, { visual: ['*'] }],
       },
     },
-  });
+  })
   ```
 
   Here's the diff in the generated CSS:
@@ -1539,36 +1503,36 @@
 - 105f74ce: Add a way to specify a recipe's `staticCss` options from inside a recipe config, e.g.:
 
   ```js
-  import { defineRecipe } from "@pandacss/dev";
+  import { defineRecipe } from '@pandacss/dev'
 
   const card = defineRecipe({
-    className: "card",
-    base: { color: "white" },
+    className: 'card',
+    base: { color: 'white' },
     variants: {
       size: {
-        small: { fontSize: "14px" },
-        large: { fontSize: "18px" },
+        small: { fontSize: '14px' },
+        large: { fontSize: '18px' },
       },
     },
-    staticCss: [{ size: ["*"] }],
-  });
+    staticCss: [{ size: ['*'] }],
+  })
   ```
 
   would be the equivalent of defining it inside the main config:
 
   ```js
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
     staticCss: {
       recipes: {
         card: {
-          size: ["*"],
+          size: ['*'],
         },
       },
     },
-  });
+  })
   ```
 
 ## 0.20.1
@@ -1586,10 +1550,10 @@
     staticCss: {
       recipes: {
         // generate all button styles and variants
-        button: ["*"],
+        button: ['*'],
       },
     },
-  });
+  })
 
   export default defineConfig({
     presets: [presetWithStaticCss],
@@ -1597,11 +1561,11 @@
       extend: {
         recipes: {
           // extend and pre-generate all sizes for card
-          card: [{ size: ["small", "medium", "large"] }],
+          card: [{ size: ['small', 'medium', 'large'] }],
         },
       },
     },
-  });
+  })
   ```
 
 ### Patch Changes
@@ -1671,42 +1635,42 @@
 
   ```ts
   export default defineConfig({
-    outdir: "./outdir",
+    outdir: './outdir',
     importMap: {
-      css: "#panda/styled-system/css",
-      recipes: "#panda/styled-system/recipes",
-      patterns: "#panda/styled-system/patterns",
-      jsx: "#panda/styled-system/jsx",
+      css: '#panda/styled-system/css',
+      recipes: '#panda/styled-system/recipes',
+      patterns: '#panda/styled-system/patterns',
+      jsx: '#panda/styled-system/jsx',
     },
-  });
+  })
   ```
 
   Or you could also make your outdir an actual package from your monorepo:
 
   ```ts
   export default defineConfig({
-    outdir: "../packages/styled-system",
+    outdir: '../packages/styled-system',
     importMap: {
-      css: "@monorepo/styled-system",
-      recipes: "@monorepo/styled-system",
-      patterns: "@monorepo/styled-system",
-      jsx: "@monorepo/styled-system",
+      css: '@monorepo/styled-system',
+      recipes: '@monorepo/styled-system',
+      patterns: '@monorepo/styled-system',
+      jsx: '@monorepo/styled-system',
     },
-  });
+  })
   ```
 
   Working with tsconfig paths aliases is easy:
 
   ```ts
   export default defineConfig({
-    outdir: "styled-system",
+    outdir: 'styled-system',
     importMap: {
-      css: "styled-system/css",
-      recipes: "styled-system/recipes",
-      patterns: "styled-system/patterns",
-      jsx: "styled-system/jsx",
+      css: 'styled-system/css',
+      recipes: 'styled-system/recipes',
+      patterns: 'styled-system/patterns',
+      jsx: 'styled-system/jsx',
     },
-  });
+  })
   ```
 
 - 58743bc4: - Fix `ExtendableUtilityConfig` typings after a regression in 0.15.2 (due to
@@ -1780,12 +1744,12 @@
   **Definition**
 
   ```jsx
-  import { sva } from "styled-system/css";
+  import { sva } from 'styled-system/css'
 
   const button = sva({
-    slots: ["label", "icon"],
+    slots: ['label', 'icon'],
     base: {
-      label: { color: "red", textDecoration: "underline" },
+      label: { color: 'red', textDecoration: 'underline' },
     },
     variants: {
       rounded: {
@@ -1793,33 +1757,33 @@
       },
       size: {
         sm: {
-          label: { fontSize: "sm" },
-          icon: { fontSize: "sm" },
+          label: { fontSize: 'sm' },
+          icon: { fontSize: 'sm' },
         },
         lg: {
-          label: { fontSize: "lg" },
-          icon: { fontSize: "lg", color: "pink" },
+          label: { fontSize: 'lg' },
+          icon: { fontSize: 'lg', color: 'pink' },
         },
       },
     },
     defaultVariants: {
-      size: "sm",
+      size: 'sm',
     },
-  });
+  })
   ```
 
   **Usage**
 
   ```jsx
   export function App() {
-    const btnClass = button({ size: "lg", rounded: true });
+    const btnClass = button({ size: 'lg', rounded: true })
 
     return (
       <button>
         <p class={btnClass.label}> Label</p>
         <p class={btnClass.icon}> Icon</p>
       </button>
-    );
+    )
   }
   ```
 
@@ -1870,26 +1834,26 @@
   Update the `jsx` property to be used for advanced tracking of custom pattern components.
 
   ```jsx
-  import { Circle } from "styled-system/jsx";
+  import { Circle } from 'styled-system/jsx'
   const CustomCircle = ({ children, ...props }) => {
-    return <Circle {...props}>{children}</Circle>;
-  };
+    return <Circle {...props}>{children}</Circle>
+  }
   ```
 
   To track the `CustomCircle` component, you can now use the `jsx` property.
 
   ```js
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     patterns: {
       extend: {
         circle: {
-          jsx: ["CustomCircle"],
+          jsx: ['CustomCircle'],
         },
       },
     },
-  });
+  })
   ```
 
 ## 0.8.0
@@ -1918,7 +1882,7 @@
   ```ts
   staticCss: {
     recipes: {
-      button: [{ size: ["*"], shape: ["*"] }];
+      button: [{ size: ['*'], shape: ['*'] }]
     }
   }
   ```
@@ -1928,7 +1892,7 @@
   ```ts
   staticCss: {
     recipes: {
-      button: ["*"];
+      button: ['*']
     }
   }
   ```
@@ -1952,8 +1916,8 @@
   // panda.config.ts
   export default defineConfig({
     //...
-    syntax: "template-literal",
-  });
+    syntax: 'template-literal',
+  })
   ```
 
   > For existing projects, you might need to run the `panda codegen --clean`
@@ -1974,12 +1938,12 @@
 - 5b344b9c: Add support for disabling shorthand props
 
   ```ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
     shorthands: false,
-  });
+  })
   ```
 
 ### Patch Changes
@@ -2052,11 +2016,11 @@ This hook is called right before writing the codegen files to disk. You can use
 export default defineConfig({
   // ...
   hooks: {
-    "codegen:prepare": ({ artifacts, changed }) => {
+    'codegen:prepare': ({ artifacts, changed }) => {
       // do something with the emitted js/d.ts files
     },
   },
-});
+})
 ```
 
 - d5977c24: - Add a `--logfile` flag to the `panda`, `panda codegen`, `panda cssgen` and `panda debug` commands.
@@ -2073,11 +2037,11 @@ export default defineConfig({
   ```js
   module.exports = {
     plugins: {
-      "@pandacss/dev/postcss": {
-        logfile: "./logs/panda.log",
+      '@pandacss/dev/postcss': {
+        logfile: './logs/panda.log',
       },
     },
-  };
+  }
   ```
 
 ## 0.29.1
@@ -2096,9 +2060,9 @@ export default defineConfig({
 
   ```ts
   css({
-    bg: "red.300/40",
-    color: "white",
-  });
+    bg: 'red.300/40',
+    color: 'white',
+  })
   ```
 
   This will generate:
@@ -2106,11 +2070,7 @@ export default defineConfig({
   ```css
   @layer utilities {
     .bg_red\.300\/40 {
-      --mix-background: color-mix(
-        in srgb,
-        var(--colors-red-300) 40%,
-        transparent
-      );
+      --mix-background: color-mix(in srgb, var(--colors-red-300) 40%, transparent);
       background: var(--mix-background, var(--colors-red-300));
     }
 
@@ -2134,21 +2094,21 @@ export default defineConfig({
   export default defineConfig({
     utilities: {
       background: {
-        shorthand: "bg",
-        className: "bg",
-        values: "colors",
+        shorthand: 'bg',
+        className: 'bg',
+        values: 'colors',
         transform(value, args) {
-          const mix = args.utils.colorMix(value);
+          const mix = args.utils.colorMix(value)
           // This can happen if the value format is invalid (e.g. `bg: red.300/invalid` or `bg: red.300//10`)
-          if (mix.invalid) return { background: value };
+          if (mix.invalid) return { background: value }
 
           return {
             background: mix.value,
-          };
+          }
         },
       },
     },
-  });
+  })
   ```
 
   ***
@@ -2157,21 +2117,21 @@ export default defineConfig({
   property:
 
   ```ts
-  import type { PropertyTransform } from "@pandacss/types";
+  import type { PropertyTransform } from '@pandacss/types'
 
   export const createColorMixTransform =
     (prop: string): PropertyTransform =>
     (value, args) => {
-      const mix = args.utils.colorMix(value);
-      if (mix.invalid) return { [prop]: value };
+      const mix = args.utils.colorMix(value)
+      if (mix.invalid) return { [prop]: value }
 
-      const cssVar = "--mix-" + prop;
+      const cssVar = '--mix-' + prop
 
       return {
         [cssVar]: mix.value,
         [prop]: `var(${cssVar}, ${mix.color})`,
-      };
-    };
+      }
+    }
   ```
 
   then the same utility transform as above can be written like this:
@@ -2199,34 +2159,34 @@ export default defineConfig({
     // ...
     theme: {
       extend: {
-        containerNames: ["sidebar", "content"],
+        containerNames: ['sidebar', 'content'],
         containerSizes: {
-          xs: "40em",
-          sm: "60em",
-          md: "80em",
+          xs: '40em',
+          sm: '60em',
+          md: '80em',
         },
       },
     },
-  });
+  })
   ```
 
   The default container sizes in the `@pandacss/preset-panda` preset are shown below:
 
   ```ts
   export const containerSizes = {
-    xs: "320px",
-    sm: "384px",
-    md: "448px",
-    lg: "512px",
-    xl: "576px",
-    "2xl": "672px",
-    "3xl": "768px",
-    "4xl": "896px",
-    "5xl": "1024px",
-    "6xl": "1152px",
-    "7xl": "1280px",
-    "8xl": "1440px",
-  };
+    xs: '320px',
+    sm: '384px',
+    md: '448px',
+    lg: '512px',
+    xl: '576px',
+    '2xl': '672px',
+    '3xl': '768px',
+    '4xl': '896px',
+    '5xl': '1024px',
+    '6xl': '1152px',
+    '7xl': '1280px',
+    '8xl': '1440px',
+  }
   ```
 
   Then use them in your styles by referencing using `@<container-name>/<container-size>` syntax:
@@ -2311,8 +2271,8 @@ export default defineConfig({
   ```ts
   export default defineConfig({
     // ...
-    dependencies: ["path/to/files/**.ts"],
-  });
+    dependencies: ['path/to/files/**.ts'],
+  })
   ```
 
   - Invoke `config:change` hook in more situations (when the `--watch` flag is passed to `panda codegen`,
@@ -2345,54 +2305,39 @@ export default defineConfig({
      * Called when the config is resolved, after all the presets are loaded and merged.
      * This is the first hook called, you can use it to tweak the config before the context is created.
      */
-    "config:resolved": (args: { conf: LoadConfigResult }) => MaybeAsyncReturn;
+    'config:resolved': (args: { conf: LoadConfigResult }) => MaybeAsyncReturn
     /**
      * Called when the Panda context has been created and the API is ready to be used.
      */
-    "context:created": (args: {
-      ctx: ApiInterface;
-      logger: LoggerInterface;
-    }) => void;
+    'context:created': (args: { ctx: ApiInterface; logger: LoggerInterface }) => void
     /**
      * Called when the config file or one of its dependencies (imports) has changed.
      */
-    "config:change": (args: { config: UserConfig }) => MaybeAsyncReturn;
+    'config:change': (args: { config: UserConfig }) => MaybeAsyncReturn
     /**
      * Called after reading the file content but before parsing it.
      * You can use this hook to transform the file content to a tsx-friendly syntax so that Panda's parser can parse it.
      * You can also use this hook to parse the file's content on your side using a custom parser, in this case you don't have to return anything.
      */
-    "parser:before": (args: {
-      filePath: string;
-      content: string;
-    }) => string | void;
+    'parser:before': (args: { filePath: string; content: string }) => string | void
     /**
      * Called after the file styles are extracted and processed into the resulting ParserResult object.
      * You can also use this hook to add your own extraction results from your custom parser to the ParserResult object.
      */
-    "parser:after": (args: {
-      filePath: string;
-      result: ParserResultInterface | undefined;
-    }) => void;
+    'parser:after': (args: { filePath: string; result: ParserResultInterface | undefined }) => void
     /**
      * Called after the codegen is completed
      */
-    "codegen:done": () => MaybeAsyncReturn;
+    'codegen:done': () => MaybeAsyncReturn
     /**
      * Called right before adding the design-system CSS (global, static, preflight, tokens, keyframes) to the final CSS
      * Called right before writing/injecting the final CSS (styles.css) that contains the design-system CSS and the parser CSS
      * You can use it to tweak the CSS content before it's written to disk or injected through the postcss plugin.
      */
-    "cssgen:done": (args: {
-      artifact:
-        | "global"
-        | "static"
-        | "reset"
-        | "tokens"
-        | "keyframes"
-        | "styles.css";
-      content: string;
-    }) => string | void;
+    'cssgen:done': (args: {
+      artifact: 'global' | 'static' | 'reset' | 'tokens' | 'keyframes' | 'styles.css'
+      content: string
+    }) => string | void
   }
   ```
 
@@ -2472,38 +2417,38 @@ export default defineConfig({
 
   ```ts
   const card = defineRecipe({
-    className: "card",
-    base: { color: "white" },
+    className: 'card',
+    base: { color: 'white' },
     variants: {
       size: {
-        small: { fontSize: "14px" },
-        large: { fontSize: "18px" },
+        small: { fontSize: '14px' },
+        large: { fontSize: '18px' },
       },
       visual: {
-        primary: { backgroundColor: "blue" },
-        secondary: { backgroundColor: "gray" },
+        primary: { backgroundColor: 'blue' },
+        secondary: { backgroundColor: 'gray' },
       },
     },
-  });
+  })
 
   export default defineConfig({
     // ...
     staticCss: {
       recipes: {
-        card: ["*"], // this
+        card: ['*'], // this
 
         // was equivalent to:
         card: [
           // notice how `responsive: true` was implicitly added
-          { size: ["*"], responsive: true },
-          { visual: ["*"], responsive: true },
+          { size: ['*'], responsive: true },
+          { visual: ['*'], responsive: true },
         ],
 
         //   will now correctly be equivalent to:
-        card: [{ size: ["*"] }, { visual: ["*"] }],
+        card: [{ size: ['*'] }, { visual: ['*'] }],
       },
     },
-  });
+  })
   ```
 
   Here's the diff in the generated CSS:
@@ -2655,36 +2600,36 @@ export default defineConfig({
 - 105f74ce: Add a way to specify a recipe's `staticCss` options from inside a recipe config, e.g.:
 
   ```js
-  import { defineRecipe } from "@pandacss/dev";
+  import { defineRecipe } from '@pandacss/dev'
 
   const card = defineRecipe({
-    className: "card",
-    base: { color: "white" },
+    className: 'card',
+    base: { color: 'white' },
     variants: {
       size: {
-        small: { fontSize: "14px" },
-        large: { fontSize: "18px" },
+        small: { fontSize: '14px' },
+        large: { fontSize: '18px' },
       },
     },
-    staticCss: [{ size: ["*"] }],
-  });
+    staticCss: [{ size: ['*'] }],
+  })
   ```
 
   would be the equivalent of defining it inside the main config:
 
   ```js
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
     staticCss: {
       recipes: {
         card: {
-          size: ["*"],
+          size: ['*'],
         },
       },
     },
-  });
+  })
   ```
 
 ## 0.20.1
@@ -2702,10 +2647,10 @@ export default defineConfig({
     staticCss: {
       recipes: {
         // generate all button styles and variants
-        button: ["*"],
+        button: ['*'],
       },
     },
-  });
+  })
 
   export default defineConfig({
     presets: [presetWithStaticCss],
@@ -2713,11 +2658,11 @@ export default defineConfig({
       extend: {
         recipes: {
           // extend and pre-generate all sizes for card
-          card: [{ size: ["small", "medium", "large"] }],
+          card: [{ size: ['small', 'medium', 'large'] }],
         },
       },
     },
-  });
+  })
   ```
 
 ### Patch Changes
@@ -2787,42 +2732,42 @@ export default defineConfig({
 
   ```ts
   export default defineConfig({
-    outdir: "./outdir",
+    outdir: './outdir',
     importMap: {
-      css: "#panda/styled-system/css",
-      recipes: "#panda/styled-system/recipes",
-      patterns: "#panda/styled-system/patterns",
-      jsx: "#panda/styled-system/jsx",
+      css: '#panda/styled-system/css',
+      recipes: '#panda/styled-system/recipes',
+      patterns: '#panda/styled-system/patterns',
+      jsx: '#panda/styled-system/jsx',
     },
-  });
+  })
   ```
 
   Or you could also make your outdir an actual package from your monorepo:
 
   ```ts
   export default defineConfig({
-    outdir: "../packages/styled-system",
+    outdir: '../packages/styled-system',
     importMap: {
-      css: "@monorepo/styled-system",
-      recipes: "@monorepo/styled-system",
-      patterns: "@monorepo/styled-system",
-      jsx: "@monorepo/styled-system",
+      css: '@monorepo/styled-system',
+      recipes: '@monorepo/styled-system',
+      patterns: '@monorepo/styled-system',
+      jsx: '@monorepo/styled-system',
     },
-  });
+  })
   ```
 
   Working with tsconfig paths aliases is easy:
 
   ```ts
   export default defineConfig({
-    outdir: "styled-system",
+    outdir: 'styled-system',
     importMap: {
-      css: "styled-system/css",
-      recipes: "styled-system/recipes",
-      patterns: "styled-system/patterns",
-      jsx: "styled-system/jsx",
+      css: 'styled-system/css',
+      recipes: 'styled-system/recipes',
+      patterns: 'styled-system/patterns',
+      jsx: 'styled-system/jsx',
     },
-  });
+  })
   ```
 
 - 58743bc4: - Fix `ExtendableUtilityConfig` typings after a regression in 0.15.2 (due to
@@ -2896,12 +2841,12 @@ export default defineConfig({
   **Definition**
 
   ```jsx
-  import { sva } from "styled-system/css";
+  import { sva } from 'styled-system/css'
 
   const button = sva({
-    slots: ["label", "icon"],
+    slots: ['label', 'icon'],
     base: {
-      label: { color: "red", textDecoration: "underline" },
+      label: { color: 'red', textDecoration: 'underline' },
     },
     variants: {
       rounded: {
@@ -2909,33 +2854,33 @@ export default defineConfig({
       },
       size: {
         sm: {
-          label: { fontSize: "sm" },
-          icon: { fontSize: "sm" },
+          label: { fontSize: 'sm' },
+          icon: { fontSize: 'sm' },
         },
         lg: {
-          label: { fontSize: "lg" },
-          icon: { fontSize: "lg", color: "pink" },
+          label: { fontSize: 'lg' },
+          icon: { fontSize: 'lg', color: 'pink' },
         },
       },
     },
     defaultVariants: {
-      size: "sm",
+      size: 'sm',
     },
-  });
+  })
   ```
 
   **Usage**
 
   ```jsx
   export function App() {
-    const btnClass = button({ size: "lg", rounded: true });
+    const btnClass = button({ size: 'lg', rounded: true })
 
     return (
       <button>
         <p class={btnClass.label}> Label</p>
         <p class={btnClass.icon}> Icon</p>
       </button>
-    );
+    )
   }
   ```
 
@@ -2986,26 +2931,26 @@ export default defineConfig({
   Update the `jsx` property to be used for advanced tracking of custom pattern components.
 
   ```jsx
-  import { Circle } from "styled-system/jsx";
+  import { Circle } from 'styled-system/jsx'
   const CustomCircle = ({ children, ...props }) => {
-    return <Circle {...props}>{children}</Circle>;
-  };
+    return <Circle {...props}>{children}</Circle>
+  }
   ```
 
   To track the `CustomCircle` component, you can now use the `jsx` property.
 
   ```js
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     patterns: {
       extend: {
         circle: {
-          jsx: ["CustomCircle"],
+          jsx: ['CustomCircle'],
         },
       },
     },
-  });
+  })
   ```
 
 ## 0.8.0
@@ -3034,7 +2979,7 @@ export default defineConfig({
   ```ts
   staticCss: {
     recipes: {
-      button: [{ size: ["*"], shape: ["*"] }];
+      button: [{ size: ['*'], shape: ['*'] }]
     }
   }
   ```
@@ -3044,7 +2989,7 @@ export default defineConfig({
   ```ts
   staticCss: {
     recipes: {
-      button: ["*"];
+      button: ['*']
     }
   }
   ```
@@ -3068,8 +3013,8 @@ export default defineConfig({
   // panda.config.ts
   export default defineConfig({
     //...
-    syntax: "template-literal",
-  });
+    syntax: 'template-literal',
+  })
   ```
 
   > For existing projects, you might need to run the `panda codegen --clean`
@@ -3090,12 +3035,12 @@ export default defineConfig({
 - 5b344b9c: Add support for disabling shorthand props
 
   ```ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
     shorthands: false,
-  });
+  })
   ```
 
 ### Patch Changes

From 99be6f15bbe6e03af770fe036126b0e7b8e7b79d Mon Sep 17 00:00:00 2001
From: Alexandre Stahmer <47224540+astahmer@users.noreply.github.com>
Date: Sat, 4 May 2024 19:18:05 +0200
Subject: [PATCH 3/5] fix: css.raw typings (#2561)

---
 .changeset/violet-birds-tie.md                |   6 +
 .../__tests__/generate-css-fn.test.ts         |  24 +-
 packages/generator/src/artifacts/js/css-fn.ts |  12 +-
 packages/studio/styled-system/css/css.d.ts    |  12 +-
 sandbox/codegen/__tests__/css.test.ts         | 240 ++++++++++++++++++
 .../__tests__/scenarios/strict.test.ts        | 185 ++++++++++++++
 6 files changed, 463 insertions(+), 16 deletions(-)
 create mode 100644 .changeset/violet-birds-tie.md

diff --git a/.changeset/violet-birds-tie.md b/.changeset/violet-birds-tie.md
new file mode 100644
index 000000000..3ed698e49
--- /dev/null
+++ b/.changeset/violet-birds-tie.md
@@ -0,0 +1,6 @@
+---
+'@pandacss/generator': patch
+---
+
+Fix `css.raw` typings after recent ([0.39.0](https://github.com/chakra-ui/panda/discussions/2560)) changes allowing
+arrays of `SystemStyleObject`
diff --git a/packages/generator/__tests__/generate-css-fn.test.ts b/packages/generator/__tests__/generate-css-fn.test.ts
index c3f7ff3d5..8e870dcb0 100644
--- a/packages/generator/__tests__/generate-css-fn.test.ts
+++ b/packages/generator/__tests__/generate-css-fn.test.ts
@@ -10,16 +10,20 @@ describe('generate css-fn', () => {
 
       type Styles = SystemStyleObject | undefined | null | false
 
+      interface CssRawFunction {
+        (styles: Styles): SystemStyleObject
+        (styles: Styles[]): SystemStyleObject
+        (...styles: Array<Styles | Styles[]>): SystemStyleObject
+        (styles: Styles): SystemStyleObject
+      }
+
       interface CssFunction {
         (styles: Styles): string
         (styles: Styles[]): string
         (...styles: Array<Styles | Styles[]>): string
         (styles: Styles): string
 
-        raw: (styles: Styles) => string
-        raw: (styles: Styles[]) => string
-        raw: (...styles: Array<Styles | Styles[]>) => string
-        raw: (styles: Styles) => string
+        raw: CssRawFunction
       }
 
       export declare const css: CssFunction;",
@@ -96,16 +100,20 @@ describe('generate css-fn', () => {
 
       type Styles = SystemStyleObject | undefined | null | false
 
+      interface CssRawFunction {
+        (styles: Styles): SystemStyleObject
+        (styles: Styles[]): SystemStyleObject
+        (...styles: Array<Styles | Styles[]>): SystemStyleObject
+        (styles: Styles): SystemStyleObject
+      }
+
       interface CssFunction {
         (styles: Styles): string
         (styles: Styles[]): string
         (...styles: Array<Styles | Styles[]>): string
         (styles: Styles): string
 
-        raw: (styles: Styles) => string
-        raw: (styles: Styles[]) => string
-        raw: (...styles: Array<Styles | Styles[]>) => string
-        raw: (styles: Styles) => string
+        raw: CssRawFunction
       }
 
       export declare const css: CssFunction;",
diff --git a/packages/generator/src/artifacts/js/css-fn.ts b/packages/generator/src/artifacts/js/css-fn.ts
index de0052c51..010bf6a21 100644
--- a/packages/generator/src/artifacts/js/css-fn.ts
+++ b/packages/generator/src/artifacts/js/css-fn.ts
@@ -12,16 +12,20 @@ export function generateCssFn(ctx: Context) {
 
     type Styles = SystemStyleObject | undefined | null | false
 
+    interface CssRawFunction {
+      (styles: Styles): SystemStyleObject
+      (styles: Styles[]): SystemStyleObject
+      (...styles: Array<Styles | Styles[]>): SystemStyleObject
+      (styles: Styles): SystemStyleObject
+    }
+
     interface CssFunction {
       (styles: Styles): string
       (styles: Styles[]): string
       (...styles: Array<Styles | Styles[]>): string
       (styles: Styles): string
 
-      raw: (styles: Styles) => string
-      raw: (styles: Styles[]) => string
-      raw: (...styles: Array<Styles | Styles[]>) => string
-      raw: (styles: Styles) => string
+      raw: CssRawFunction
     }
 
     export declare const css: CssFunction;
diff --git a/packages/studio/styled-system/css/css.d.ts b/packages/studio/styled-system/css/css.d.ts
index 175f97471..496da4193 100644
--- a/packages/studio/styled-system/css/css.d.ts
+++ b/packages/studio/styled-system/css/css.d.ts
@@ -3,16 +3,20 @@ import type { SystemStyleObject } from '../types/index';
 
 type Styles = SystemStyleObject | undefined | null | false
 
+interface CssRawFunction {
+  (styles: Styles): SystemStyleObject
+  (styles: Styles[]): SystemStyleObject
+  (...styles: Array<Styles | Styles[]>): SystemStyleObject
+  (styles: Styles): SystemStyleObject
+}
+
 interface CssFunction {
   (styles: Styles): string
   (styles: Styles[]): string
   (...styles: Array<Styles | Styles[]>): string
   (styles: Styles): string
 
-  raw: (styles: Styles) => string
-  raw: (styles: Styles[]) => string
-  raw: (...styles: Array<Styles | Styles[]>) => string
-  raw: (styles: Styles) => string
+  raw: CssRawFunction
 }
 
 export declare const css: CssFunction;
\ No newline at end of file
diff --git a/sandbox/codegen/__tests__/css.test.ts b/sandbox/codegen/__tests__/css.test.ts
index bf8b0de2c..9928f01b6 100644
--- a/sandbox/codegen/__tests__/css.test.ts
+++ b/sandbox/codegen/__tests__/css.test.ts
@@ -123,3 +123,243 @@ describe('css', () => {
     expect(className).toMatchInlineSnapshot(`"fs_12px bg_red.600"`)
   })
 })
+
+describe('css.raw', () => {
+  test('native CSS prop and value', () => {
+    const styles = css.raw({ display: 'flex' })
+
+    expect(styles).toMatchInlineSnapshot(`
+      {
+        "display": "flex",
+      }
+    `)
+  })
+
+  test('token value', () => {
+    const styles = css.raw({ color: 'blue.300' })
+
+    expect(styles).toMatchInlineSnapshot(`
+      {
+        "color": "blue.300",
+      }
+    `)
+  })
+
+  test('utility prop', () => {
+    const styles = css.raw({ srOnly: true })
+
+    expect(styles).toMatchInlineSnapshot(`
+      {
+        "srOnly": true,
+      }
+    `)
+  })
+
+  test('shorthand prop', () => {
+    const styles = css.raw({ bg: 'red' })
+
+    expect(styles).toMatchInlineSnapshot(`
+      {
+        "bg": "red",
+      }
+    `)
+  })
+
+  test('object condition prop', () => {
+    const styles = css.raw({ bg: { _hover: 'yellow.100' } })
+
+    expect(styles).toMatchInlineSnapshot(`
+      {
+        "bg": {
+          "_hover": "yellow.100",
+        },
+      }
+    `)
+  })
+
+  test('condition prop', () => {
+    const styles = css.raw({ _hover: { bg: 'yellow.200' } })
+
+    expect(styles).toMatchInlineSnapshot(`
+      {
+        "_hover": {
+          "bg": "yellow.200",
+        },
+      }
+    `)
+  })
+
+  test('nested condition prop', () => {
+    const styles = css.raw({ _hover: { _dark: { bg: 'pink' } } })
+
+    expect(styles).toMatchInlineSnapshot(`
+      {
+        "_hover": {
+          "_dark": {
+            "bg": "pink",
+          },
+        },
+      }
+    `)
+  })
+
+  test('arbitrary value', () => {
+    const styles = css.raw({ color: '#fff' })
+
+    expect(styles).toMatchInlineSnapshot(`
+      {
+        "color": "#fff",
+      }
+    `)
+  })
+
+  test('arbitrary selector', () => {
+    const styles = css.raw({ ['&:data-panda']: { display: 'flex' } })
+
+    expect(styles).toMatchInlineSnapshot(`
+      {
+        "&:data-panda": {
+          "display": "flex",
+        },
+      }
+    `)
+  })
+
+  test('responsive condition', () => {
+    const styles = css.raw({ sm: { bg: 'purple' } })
+
+    expect(styles).toMatchInlineSnapshot(`
+      {
+        "sm": {
+          "bg": "purple",
+        },
+      }
+    `)
+  })
+
+  test('responsive array syntax prop', () => {
+    const styles = css.raw({ bg: ['cyan.100', 'cyan.200', null, undefined, 'cyan.300'] })
+
+    expect(styles).toMatchInlineSnapshot(`
+      {
+        "bg": [
+          "cyan.100",
+          "cyan.200",
+          null,
+          undefined,
+          "cyan.300",
+        ],
+      }
+    `)
+  })
+
+  test('using inline token helper - in value', () => {
+    const styles = css.raw({ border: '1px solid token(colors.blue.400)' })
+
+    expect(styles).toMatchInlineSnapshot(`
+      {
+        "border": "1px solid token(colors.blue.400)",
+      }
+    `)
+  })
+
+  test('using inline token helper - in condition', () => {
+    const styles = css.raw({ '@media screen and (min-width: token(sizes.4xl))': { bg: 'blue.500' } })
+
+    expect(styles).toMatchInlineSnapshot(`
+      {
+        "@media screen and (min-width: token(sizes.4xl))": {
+          "bg": "blue.500",
+        },
+      }
+    `)
+  })
+
+  test('nested condition prop with array syntax', () => {
+    const styles = css.raw({ _hover: { _dark: { bg: ['pink.100', 'pink.200'] } } })
+
+    expect(styles).toMatchInlineSnapshot(`
+      {
+        "_hover": {
+          "_dark": {
+            "bg": [
+              "pink.100",
+              "pink.200",
+            ],
+          },
+        },
+      }
+    `)
+  })
+
+  test('same prop', () => {
+    const styles = css.raw({ bgColor: 'red.100', backgroundColor: 'red.200' })
+
+    expect(styles).toMatchInlineSnapshot(`
+      {
+        "backgroundColor": "red.200",
+        "bgColor": "red.100",
+      }
+    `)
+
+    const styles2 = css.raw({ backgroundColor: 'red.300', bgColor: 'red.400' })
+
+    expect(styles2).toMatchInlineSnapshot(`
+      {
+        "backgroundColor": "red.300",
+        "bgColor": "red.400",
+      }
+    `)
+  })
+
+  test('merging styles', () => {
+    const styles = css.raw({ fontSize: 'sm', bgColor: 'red.500' }, { backgroundColor: 'red.600' })
+
+    expect(styles).toMatchInlineSnapshot(`
+      {
+        "backgroundColor": "red.600",
+        "fontSize": "sm",
+      }
+    `)
+  })
+
+  test('merging styles with nested conditions', () => {
+    const styles = css.raw({ fontSize: 'sm', _hover: { color: 'green.100' } }, { _hover: { color: 'green.200' } })
+
+    expect(styles).toMatchInlineSnapshot(`
+      {
+        "_hover": {
+          "color": "green.200",
+        },
+        "fontSize": "sm",
+      }
+    `)
+  })
+
+  test('merging styles with object condition prop', () => {
+    const styles = css.raw({ fontSize: 'md' }, { fontSize: { base: 'lg', sm: 'xs' } })
+
+    expect(styles).toMatchInlineSnapshot(`
+      {
+        "fontSize": {
+          "base": "lg",
+          "sm": "xs",
+        },
+      }
+    `)
+  })
+
+  test('merging styles with array item', () => {
+    const styles = css.raw({ fontSize: 'sm', bgColor: 'red.500' }, [
+      { backgroundColor: 'red.600' },
+      { fontSize: '12px' },
+    ])
+
+    expect(styles).toMatchInlineSnapshot(`
+      {
+        "backgroundColor": "red.600",
+        "fontSize": "12px",
+      }
+    `)
+  })
+})
diff --git a/sandbox/codegen/__tests__/scenarios/strict.test.ts b/sandbox/codegen/__tests__/scenarios/strict.test.ts
index cbda8bc36..863db50b7 100644
--- a/sandbox/codegen/__tests__/scenarios/strict.test.ts
+++ b/sandbox/codegen/__tests__/scenarios/strict.test.ts
@@ -185,3 +185,188 @@ describe('css', () => {
     assertType(css({ _hover: { _dark: { bg: ['pink.100', 'pink.200'] } } }))
   })
 })
+
+describe('css.raw', () => {
+  test('native CSS prop and value', () => {
+    assertType(css.raw({ display: 'flex' }))
+
+    // @ts-expect-error expected from strictPropertyValues: true
+    assertType(css.raw({ display: 'abc' }))
+    assertType(css.raw({ content: 'abc' }))
+    assertType(css.raw({ willChange: 'abc' }))
+
+    assertType(css.raw({ pos: 'absolute' }))
+
+    // @ts-expect-error expected from strictPropertyValues: true
+    assertType(css.raw({ position: 'absolute123' }))
+    // @ts-expect-error expected from strictPropertyValues: true
+    assertType(css.raw({ pos: 'absolute123' }))
+    // @ts-expect-error expected from strictTokens: true
+    assertType(css.raw({ flex: '0 1' }))
+  })
+
+  test('token value', () => {
+    assertType(css.raw({ color: 'blue.300' }))
+  })
+
+  test('css var', () => {
+    assertType(css.raw({ color: 'var(--button-color)' }))
+    assertType(css.raw({ display: 'var(--button-color)' }))
+  })
+
+  test('utility prop', () => {
+    assertType(
+      css.raw({
+        srOnly: true,
+      }),
+    )
+  })
+
+  test('shorthand prop', () => {
+    assertType(
+      css.raw({
+        // @ts-expect-error expected from strictTokens: true
+        backgroundColor: 'red',
+        // @ts-expect-error expected from strictTokens: true
+        bg: 'red',
+      }),
+    )
+  })
+
+  test('object condition prop', () => {
+    assertType(css.raw({ bg: { _hover: 'yellow.100' } }))
+  })
+
+  test('condition prop', () => {
+    assertType(css.raw({ _hover: { bg: 'yellow.200' } }))
+  })
+
+  test('nested condition prop', () => {
+    assertType(
+      css.raw({
+        _hover: {
+          _dark: {
+            // @ts-expect-error expected from strictTokens: true
+            bg: 'pink',
+          },
+        },
+      }),
+    )
+  })
+
+  test('arbitrary value', () => {
+    assertType(
+      css.raw({
+        // @ts-expect-error expected from strictTokens: true
+        color: '#fff',
+      }),
+    )
+  })
+
+  test('arbitrary value escape hatch', () => {
+    assertType(
+      css.raw({
+        color: '[#fff]',
+        fontSize: '[123px]',
+      }),
+    )
+  })
+
+  test('arbitrary value escape hatch with conditionals', () => {
+    assertType(
+      css.raw({
+        color: '[#fff]',
+        fontSize: '[123px]',
+        bgColor: '[#fff!]',
+        borderColor: '[#fff !important]',
+        _hover: {
+          color: '[#fff]',
+          fontSize: '[123px]',
+          bgColor: '[#fff!]',
+          borderColor: '[#fff !important]',
+        },
+        backgroundColor: {
+          _dark: '[#3B00B9]',
+          _hover: '[#3B00B9!]',
+          _focus: '[#3B00B9 !important]',
+        },
+      }),
+    )
+  })
+
+  test('arbitrary selector', () => {
+    assertType(css.raw({ ['&:data-panda']: { display: 'flex' } }))
+  })
+
+  test('important', () => {
+    assertType(
+      css.raw({
+        fontSize: '2xl !important',
+        p: '4 !important',
+        // @ts-expect-error expected from strictTokens: true
+        bgColor: '#fff!',
+        // @ts-expect-error expected from strictTokens: true
+        borderColor: '#fff !important',
+        _hover: {
+          fontSize: '2xl !important',
+          p: '4 !important',
+          // @ts-expect-error expected from strictTokens: true
+
+          bgColor: '#fff!',
+          // @ts-expect-error expected from strictTokens: true
+          borderColor: '#fff !important',
+        },
+        // @ts-expect-error expected from strictTokens: true
+        backgroundColor: {
+          _disabled: '2xl!',
+          _active: '4 !important',
+          _hover: '#3B00B9!',
+          _focus: '#3B00B9 !important',
+        },
+      }),
+    )
+  })
+
+  test('responsive condition', () => {
+    assertType(
+      css.raw({
+        sm: {
+          // @ts-expect-error expected from strictTokens: true
+          bg: 'purple',
+        },
+      }),
+    )
+  })
+
+  test('responsive array syntax prop', () => {
+    assertType(
+      css.raw({
+        bg: [
+          'cyan.100',
+          'cyan.200',
+          null,
+          // @ts-expect-error expected from strictTokens: true
+          undefined,
+          'cyan.300',
+        ],
+      }),
+    )
+  })
+
+  test('using inline token helper - in value', () => {
+    assertType(
+      css.raw({
+        // @ts-expect-error expected from strictTokens: true
+        border: '1px solid token(colors.blue.400)',
+      }),
+    )
+  })
+
+  test('using inline token helper - in condition', () => {
+    assertType(css.raw({ '@media screen and (min-width: token(sizes.4xl))': { bg: 'blue.500' } }))
+  })
+
+  test('nested condition prop with array syntax', () => {
+    assertType(css.raw({ _hover: { _dark: { bg: ['pink.100', 'pink.200'] } } }))
+  })
+})

From 8197ebc6bc5d9fb674b2c08b150e51dc8cc99dae Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Tue, 7 May 2024 21:12:54 -0500
Subject: [PATCH 4/5] Version Packages (#2562)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/violet-birds-tie.md            |    6 -
 packages/astro-plugin-studio/CHANGELOG.md |   12 +-
 packages/astro-plugin-studio/package.json |    2 +-
 packages/cli/CHANGELOG.md                 |  186 +-
 packages/cli/package.json                 |    2 +-
 packages/config/CHANGELOG.md              |  299 ++-
 packages/config/package.json              |    2 +-
 packages/core/CHANGELOG.md                | 1793 +++++++-------
 packages/core/package.json                |    2 +-
 packages/extractor/CHANGELOG.md           |  111 +-
 packages/extractor/package.json           |    2 +-
 packages/generator/CHANGELOG.md           | 2682 +++++++++++----------
 packages/generator/package.json           |    2 +-
 packages/is-valid-prop/CHANGELOG.md       |   10 +-
 packages/is-valid-prop/package.json       |    2 +-
 packages/logger/CHANGELOG.md              |   12 +-
 packages/logger/package.json              |    2 +-
 packages/node/CHANGELOG.md                |  151 +-
 packages/node/package.json                |    2 +-
 packages/parser/CHANGELOG.md              |  439 ++--
 packages/parser/package.json              |    2 +-
 packages/postcss/CHANGELOG.md             |   22 +-
 packages/postcss/package.json             |    2 +-
 packages/preset-atlaskit/CHANGELOG.md     |    6 +
 packages/preset-atlaskit/package.json     |    2 +-
 packages/preset-base/CHANGELOG.md         |  158 +-
 packages/preset-base/package.json         |    2 +-
 packages/preset-open-props/CHANGELOG.md   |    6 +
 packages/preset-open-props/package.json   |    2 +-
 packages/preset-panda/CHANGELOG.md        |   12 +-
 packages/preset-panda/package.json        |    2 +-
 packages/shared/CHANGELOG.md              |  192 +-
 packages/shared/package.json              |    2 +-
 packages/studio/CHANGELOG.md              |  171 +-
 packages/studio/package.json              |    2 +-
 packages/token-dictionary/CHANGELOG.md    |  506 ++--
 packages/token-dictionary/package.json    |    2 +-
 packages/types/CHANGELOG.md               |  764 +++---
 packages/types/package.json               |    2 +-
 39 files changed, 4121 insertions(+), 3455 deletions(-)
 delete mode 100644 .changeset/violet-birds-tie.md

diff --git a/.changeset/violet-birds-tie.md b/.changeset/violet-birds-tie.md
deleted file mode 100644
index 3ed698e49..000000000
--- a/.changeset/violet-birds-tie.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-'@pandacss/generator': patch
----
-
-Fix `css.raw` typings after recent ([0.39.0](https://github.com/chakra-ui/panda/discussions/2560)) changes allowing
-arrays of `SystemStyleObject`
diff --git a/packages/astro-plugin-studio/CHANGELOG.md b/packages/astro-plugin-studio/CHANGELOG.md
index 352e63e8d..3fbb47d61 100644
--- a/packages/astro-plugin-studio/CHANGELOG.md
+++ b/packages/astro-plugin-studio/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @pandacss/astro-plugin-studio
 
+## 0.39.1
+
+### Patch Changes
+
+- @pandacss/node@0.39.1
+
 ## 0.39.0
 
 ### Patch Changes
@@ -134,11 +140,11 @@
   ```js
   module.exports = {
     plugins: {
-      '@pandacss/dev/postcss': {
-        logfile: './logs/panda.log',
+      "@pandacss/dev/postcss": {
+        logfile: "./logs/panda.log",
       },
     },
-  }
+  };
   ```
 
 - Updated dependencies [05686b9d]
diff --git a/packages/astro-plugin-studio/package.json b/packages/astro-plugin-studio/package.json
index 58fa14f69..6a6e8f2be 100644
--- a/packages/astro-plugin-studio/package.json
+++ b/packages/astro-plugin-studio/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/astro-plugin-studio",
-  "version": "0.39.0",
+  "version": "0.39.1",
   "description": "Vite plugin for Pandacss Studio",
   "author": "Segun Adebayo <joseshegs@gmail.com>",
   "main": "dist/index.js",
diff --git a/packages/cli/CHANGELOG.md b/packages/cli/CHANGELOG.md
index 456be76a0..0eb60ac29 100644
--- a/packages/cli/CHANGELOG.md
+++ b/packages/cli/CHANGELOG.md
@@ -1,5 +1,18 @@
 # @pandacss/dev
 
+## 0.39.1
+
+### Patch Changes
+
+- @pandacss/node@0.39.1
+- @pandacss/postcss@0.39.1
+- @pandacss/config@0.39.1
+- @pandacss/logger@0.39.1
+- @pandacss/preset-panda@0.39.1
+- @pandacss/shared@0.39.1
+- @pandacss/token-dictionary@0.39.1
+- @pandacss/types@0.39.1
+
 ## 0.39.0
 
 ### Patch Changes
@@ -110,7 +123,7 @@
 
   ```ts
   // panda.config.ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
@@ -119,15 +132,15 @@
       extend: {
         tokens: {
           colors: {
-            text: { value: 'blue' },
+            text: { value: "blue" },
           },
         },
         semanticTokens: {
           colors: {
             body: {
               value: {
-                base: '{colors.blue.600}',
-                _osDark: '{colors.blue.400}',
+                base: "{colors.blue.600}",
+                _osDark: "{colors.blue.400}",
               },
             },
           },
@@ -139,16 +152,16 @@
       primary: {
         tokens: {
           colors: {
-            text: { value: 'red' },
+            text: { value: "red" },
           },
         },
         semanticTokens: {
           colors: {
-            muted: { value: '{colors.red.200}' },
+            muted: { value: "{colors.red.200}" },
             body: {
               value: {
-                base: '{colors.red.600}',
-                _osDark: '{colors.red.400}',
+                base: "{colors.red.600}",
+                _osDark: "{colors.red.400}",
               },
             },
           },
@@ -157,23 +170,23 @@
       secondary: {
         tokens: {
           colors: {
-            text: { value: 'blue' },
+            text: { value: "blue" },
           },
         },
         semanticTokens: {
           colors: {
-            muted: { value: '{colors.blue.200}' },
+            muted: { value: "{colors.blue.200}" },
             body: {
               value: {
-                base: '{colors.blue.600}',
-                _osDark: '{colors.blue.400}',
+                base: "{colors.blue.600}",
+                _osDark: "{colors.blue.400}",
               },
             },
           },
         },
       },
     },
-  })
+  });
   ```
 
   ### Pregenerating themes
@@ -183,14 +196,14 @@
 
   ```ts
   // panda.config.ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
     staticCss: {
-      themes: ['primary', 'secondary'],
+      themes: ["primary", "secondary"],
     },
-  })
+  });
   ```
 
   This will generate the following CSS:
@@ -202,7 +215,7 @@
       --colors-body: var(--colors-blue-600);
     }
 
-    [data-panda-theme='primary'] {
+    [data-panda-theme="primary"] {
       --colors-text: red;
       --colors-muted: var(--colors-red-200);
       --colors-body: var(--colors-red-600);
@@ -213,7 +226,7 @@
         --colors-body: var(--colors-blue-400);
       }
 
-      [data-panda-theme='primary'] {
+      [data-panda-theme="primary"] {
         --colors-body: var(--colors-red-400);
       }
     }
@@ -244,9 +257,9 @@
   Dynamically import a theme using its name:
 
   ```ts
-  import { getTheme } from '../styled-system/themes'
+  import { getTheme } from "../styled-system/themes";
 
-  const theme = await getTheme('red')
+  const theme = await getTheme("red");
   //    ^? {
   //     name: "red";
   //     id: string;
@@ -257,10 +270,10 @@
   Inject the theme styles into the DOM:
 
   ```ts
-  import { injectTheme } from '../styled-system/themes'
+  import { injectTheme } from "../styled-system/themes";
 
-  const theme = await getTheme('red')
-  injectTheme(document.documentElement, theme) // this returns the injected style element
+  const theme = await getTheme("red");
+  injectTheme(document.documentElement, theme); // this returns the injected style element
   ```
 
   ***
@@ -269,54 +282,62 @@
 
   ```tsx
   // app/layout.tsx
-  import { Inter } from 'next/font/google'
-  import { cookies } from 'next/headers'
-  import { ThemeName, getTheme } from '../../styled-system/themes'
-
-  export default async function RootLayout({ children }: { children: React.ReactNode }) {
-    const store = cookies()
-    const themeName = store.get('theme')?.value as ThemeName
-    const theme = themeName && (await getTheme(themeName))
+  import { Inter } from "next/font/google";
+  import { cookies } from "next/headers";
+  import { ThemeName, getTheme } from "../../styled-system/themes";
+
+  export default async function RootLayout({
+    children,
+  }: {
+    children: React.ReactNode;
+  }) {
+    const store = cookies();
+    const themeName = store.get("theme")?.value as ThemeName;
+    const theme = themeName && (await getTheme(themeName));
 
     return (
       <html lang="en" data-panda-theme={themeName ? themeName : undefined}>
         {themeName && (
           <head>
-            <style type="text/css" id={theme.id} dangerouslySetInnerHTML={{ __html: theme.css }} />
+            <style
+              type="text/css"
+              id={theme.id}
+              dangerouslySetInnerHTML={{ __html: theme.css }}
+            />
           </head>
         )}
         <body>{children}</body>
       </html>
-    )
+    );
   }
 
   // app/page.tsx
-  import { getTheme, injectTheme } from '../../styled-system/themes'
+  import { getTheme, injectTheme } from "../../styled-system/themes";
 
   export default function Home() {
     return (
       <>
         <button
           onClick={async () => {
-            const current = document.documentElement.dataset.pandaTheme
-            const next = current === 'primary' ? 'secondary' : 'primary'
-            const theme = await getTheme(next)
-            setCookie('theme', next, 7)
-            injectTheme(document.documentElement, theme)
+            const current = document.documentElement.dataset.pandaTheme;
+            const next = current === "primary" ? "secondary" : "primary";
+            const theme = await getTheme(next);
+            setCookie("theme", next, 7);
+            injectTheme(document.documentElement, theme);
           }}
         >
           swap theme
         </button>
       </>
-    )
+    );
   }
 
   // Set a Cookie
   function setCookie(cName: string, cValue: any, expDays: number) {
-    let date = new Date()
-    date.setTime(date.getTime() + expDays * 24 * 60 * 60 * 1000)
-    const expires = 'expires=' + date.toUTCString()
-    document.cookie = cName + '=' + cValue + '; ' + expires + '; path=/'
+    let date = new Date();
+    date.setTime(date.getTime() + expDays * 24 * 60 * 60 * 1000);
+    const expires = "expires=" + date.toUTCString();
+    document.cookie = cName + "=" + cValue + "; " + expires + "; path=/";
   }
   ```
 
@@ -325,18 +346,18 @@
   Finally, you can create a theme contract to ensure that all themes have the same structure:
 
   ```ts
-  import { defineThemeContract } from '@pandacss/dev'
+  import { defineThemeContract } from "@pandacss/dev";
 
   const defineTheme = defineThemeContract({
     tokens: {
       colors: {
-        red: { value: '' }, // theme implementations must have a red color
+        red: { value: "" }, // theme implementations must have a red color
       },
     },
-  })
+  });
 
   defineTheme({
-    selector: '.theme-secondary',
+    selector: ".theme-secondary",
     tokens: {
       colors: {
         // ^^^^   Property 'red' is missing in type '{}' but required in type '{ red: { value: string; }; }'
@@ -345,7 +366,7 @@
         // red: { value: 'red' },
       },
     },
-  })
+  });
   ```
 
 ### Patch Changes
@@ -571,11 +592,11 @@
   ```js
   module.exports = {
     plugins: {
-      '@pandacss/dev/postcss': {
-        logfile: './logs/panda.log',
+      "@pandacss/dev/postcss": {
+        logfile: "./logs/panda.log",
       },
     },
-  }
+  };
   ```
 
 - Updated dependencies [0dd45b6a]
@@ -622,8 +643,8 @@
   ```ts
   export default defineConfig({
     // ...
-    dependencies: ['path/to/files/**.ts'],
-  })
+    dependencies: ["path/to/files/**.ts"],
+  });
   ```
 
   - Invoke `config:change` hook in more situations (when the `--watch` flag is passed to `panda codegen`,
@@ -672,39 +693,54 @@
      * Called when the config is resolved, after all the presets are loaded and merged.
      * This is the first hook called, you can use it to tweak the config before the context is created.
      */
-    'config:resolved': (args: { conf: LoadConfigResult }) => MaybeAsyncReturn
+    "config:resolved": (args: { conf: LoadConfigResult }) => MaybeAsyncReturn;
     /**
      * Called when the Panda context has been created and the API is ready to be used.
      */
-    'context:created': (args: { ctx: ApiInterface; logger: LoggerInterface }) => void
+    "context:created": (args: {
+      ctx: ApiInterface;
+      logger: LoggerInterface;
+    }) => void;
     /**
      * Called when the config file or one of its dependencies (imports) has changed.
      */
-    'config:change': (args: { config: UserConfig }) => MaybeAsyncReturn
+    "config:change": (args: { config: UserConfig }) => MaybeAsyncReturn;
     /**
      * Called after reading the file content but before parsing it.
      * You can use this hook to transform the file content to a tsx-friendly syntax so that Panda's parser can parse it.
      * You can also use this hook to parse the file's content on your side using a custom parser, in this case you don't have to return anything.
      */
-    'parser:before': (args: { filePath: string; content: string }) => string | void
+    "parser:before": (args: {
+      filePath: string;
+      content: string;
+    }) => string | void;
     /**
      * Called after the file styles are extracted and processed into the resulting ParserResult object.
      * You can also use this hook to add your own extraction results from your custom parser to the ParserResult object.
      */
-    'parser:after': (args: { filePath: string; result: ParserResultInterface | undefined }) => void
+    "parser:after": (args: {
+      filePath: string;
+      result: ParserResultInterface | undefined;
+    }) => void;
     /**
      * Called after the codegen is completed
      */
-    'codegen:done': () => MaybeAsyncReturn
+    "codegen:done": () => MaybeAsyncReturn;
     /**
      * Called right before adding the design-system CSS (global, static, preflight, tokens, keyframes) to the final CSS
      * Called right before writing/injecting the final CSS (styles.css) that contains the design-system CSS and the parser CSS
      * You can use it to tweak the CSS content before it's written to disk or injected through the postcss plugin.
      */
-    'cssgen:done': (args: {
-      artifact: 'global' | 'static' | 'reset' | 'tokens' | 'keyframes' | 'styles.css'
-      content: string
-    }) => string | void
+    "cssgen:done": (args: {
+      artifact:
+        | "global"
+        | "static"
+        | "reset"
+        | "tokens"
+        | "keyframes"
+        | "styles.css";
+      content: string;
+    }) => string | void;
   }
   ```
 
@@ -1602,12 +1638,12 @@
   **Definition**
 
   ```jsx
-  import { sva } from 'styled-system/css'
+  import { sva } from "styled-system/css";
 
   const button = sva({
-    slots: ['label', 'icon'],
+    slots: ["label", "icon"],
     base: {
-      label: { color: 'red', textDecoration: 'underline' },
+      label: { color: "red", textDecoration: "underline" },
     },
     variants: {
       rounded: {
@@ -1615,33 +1651,33 @@
       },
       size: {
         sm: {
-          label: { fontSize: 'sm' },
-          icon: { fontSize: 'sm' },
+          label: { fontSize: "sm" },
+          icon: { fontSize: "sm" },
         },
         lg: {
-          label: { fontSize: 'lg' },
-          icon: { fontSize: 'lg', color: 'pink' },
+          label: { fontSize: "lg" },
+          icon: { fontSize: "lg", color: "pink" },
         },
       },
     },
     defaultVariants: {
-      size: 'sm',
+      size: "sm",
     },
-  })
+  });
   ```
 
   **Usage**
 
   ```jsx
   export function App() {
-    const btnClass = button({ size: 'lg', rounded: true })
+    const btnClass = button({ size: "lg", rounded: true });
 
     return (
       <button>
         <p class={btnClass.label}> Label</p>
         <p class={btnClass.icon}> Icon</p>
       </button>
-    )
+    );
   }
   ```
 
diff --git a/packages/cli/package.json b/packages/cli/package.json
index f8d52aa6d..5f661a615 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/dev",
-  "version": "0.39.0",
+  "version": "0.39.1",
   "description": "The user facing package for panda css",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
diff --git a/packages/config/CHANGELOG.md b/packages/config/CHANGELOG.md
index 5a877727a..e63c8f48d 100644
--- a/packages/config/CHANGELOG.md
+++ b/packages/config/CHANGELOG.md
@@ -1,5 +1,15 @@
 # @pandacss/config
 
+## 0.39.1
+
+### Patch Changes
+
+- @pandacss/logger@0.39.1
+- @pandacss/preset-base@0.39.1
+- @pandacss/preset-panda@0.39.1
+- @pandacss/shared@0.39.1
+- @pandacss/types@0.39.1
+
 ## 0.39.0
 
 ### Patch Changes
@@ -91,7 +101,7 @@
 
   ```ts
   // panda.config.ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
@@ -100,15 +110,15 @@
       extend: {
         tokens: {
           colors: {
-            text: { value: 'blue' },
+            text: { value: "blue" },
           },
         },
         semanticTokens: {
           colors: {
             body: {
               value: {
-                base: '{colors.blue.600}',
-                _osDark: '{colors.blue.400}',
+                base: "{colors.blue.600}",
+                _osDark: "{colors.blue.400}",
               },
             },
           },
@@ -120,16 +130,16 @@
       primary: {
         tokens: {
           colors: {
-            text: { value: 'red' },
+            text: { value: "red" },
           },
         },
         semanticTokens: {
           colors: {
-            muted: { value: '{colors.red.200}' },
+            muted: { value: "{colors.red.200}" },
             body: {
               value: {
-                base: '{colors.red.600}',
-                _osDark: '{colors.red.400}',
+                base: "{colors.red.600}",
+                _osDark: "{colors.red.400}",
               },
             },
           },
@@ -138,23 +148,23 @@
       secondary: {
         tokens: {
           colors: {
-            text: { value: 'blue' },
+            text: { value: "blue" },
           },
         },
         semanticTokens: {
           colors: {
-            muted: { value: '{colors.blue.200}' },
+            muted: { value: "{colors.blue.200}" },
             body: {
               value: {
-                base: '{colors.blue.600}',
-                _osDark: '{colors.blue.400}',
+                base: "{colors.blue.600}",
+                _osDark: "{colors.blue.400}",
               },
             },
           },
         },
       },
     },
-  })
+  });
   ```
 
   ### Pregenerating themes
@@ -164,14 +174,14 @@
 
   ```ts
   // panda.config.ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
     staticCss: {
-      themes: ['primary', 'secondary'],
+      themes: ["primary", "secondary"],
     },
-  })
+  });
   ```
 
   This will generate the following CSS:
@@ -183,7 +193,7 @@
       --colors-body: var(--colors-blue-600);
     }
 
-    [data-panda-theme='primary'] {
+    [data-panda-theme="primary"] {
       --colors-text: red;
       --colors-muted: var(--colors-red-200);
       --colors-body: var(--colors-red-600);
@@ -194,7 +204,7 @@
         --colors-body: var(--colors-blue-400);
       }
 
-      [data-panda-theme='primary'] {
+      [data-panda-theme="primary"] {
         --colors-body: var(--colors-red-400);
       }
     }
@@ -225,9 +235,9 @@
   Dynamically import a theme using its name:
 
   ```ts
-  import { getTheme } from '../styled-system/themes'
+  import { getTheme } from "../styled-system/themes";
 
-  const theme = await getTheme('red')
+  const theme = await getTheme("red");
   //    ^? {
   //     name: "red";
   //     id: string;
@@ -238,10 +248,10 @@
   Inject the theme styles into the DOM:
 
   ```ts
-  import { injectTheme } from '../styled-system/themes'
+  import { injectTheme } from "../styled-system/themes";
 
-  const theme = await getTheme('red')
-  injectTheme(document.documentElement, theme) // this returns the injected style element
+  const theme = await getTheme("red");
+  injectTheme(document.documentElement, theme); // this returns the injected style element
   ```
 
   ***
@@ -250,54 +260,62 @@
 
   ```tsx
   // app/layout.tsx
-  import { Inter } from 'next/font/google'
-  import { cookies } from 'next/headers'
-  import { ThemeName, getTheme } from '../../styled-system/themes'
-
-  export default async function RootLayout({ children }: { children: React.ReactNode }) {
-    const store = cookies()
-    const themeName = store.get('theme')?.value as ThemeName
-    const theme = themeName && (await getTheme(themeName))
+  import { Inter } from "next/font/google";
+  import { cookies } from "next/headers";
+  import { ThemeName, getTheme } from "../../styled-system/themes";
+
+  export default async function RootLayout({
+    children,
+  }: {
+    children: React.ReactNode;
+  }) {
+    const store = cookies();
+    const themeName = store.get("theme")?.value as ThemeName;
+    const theme = themeName && (await getTheme(themeName));
 
     return (
       <html lang="en" data-panda-theme={themeName ? themeName : undefined}>
         {themeName && (
           <head>
-            <style type="text/css" id={theme.id} dangerouslySetInnerHTML={{ __html: theme.css }} />
+            <style
+              type="text/css"
+              id={theme.id}
+              dangerouslySetInnerHTML={{ __html: theme.css }}
+            />
           </head>
         )}
         <body>{children}</body>
       </html>
-    )
+    );
   }
 
   // app/page.tsx
-  import { getTheme, injectTheme } from '../../styled-system/themes'
+  import { getTheme, injectTheme } from "../../styled-system/themes";
 
   export default function Home() {
     return (
       <>
         <button
           onClick={async () => {
-            const current = document.documentElement.dataset.pandaTheme
-            const next = current === 'primary' ? 'secondary' : 'primary'
-            const theme = await getTheme(next)
-            setCookie('theme', next, 7)
-            injectTheme(document.documentElement, theme)
+            const current = document.documentElement.dataset.pandaTheme;
+            const next = current === "primary" ? "secondary" : "primary";
+            const theme = await getTheme(next);
+            setCookie("theme", next, 7);
+            injectTheme(document.documentElement, theme);
           }}
         >
           swap theme
         </button>
       </>
-    )
+    );
   }
 
   // Set a Cookie
   function setCookie(cName: string, cValue: any, expDays: number) {
-    let date = new Date()
-    date.setTime(date.getTime() + expDays * 24 * 60 * 60 * 1000)
-    const expires = 'expires=' + date.toUTCString()
-    document.cookie = cName + '=' + cValue + '; ' + expires + '; path=/'
+    let date = new Date();
+    date.setTime(date.getTime() + expDays * 24 * 60 * 60 * 1000);
+    const expires = "expires=" + date.toUTCString();
+    document.cookie = cName + "=" + cValue + "; " + expires + "; path=/";
   }
   ```
 
@@ -306,18 +324,18 @@
   Finally, you can create a theme contract to ensure that all themes have the same structure:
 
   ```ts
-  import { defineThemeContract } from '@pandacss/dev'
+  import { defineThemeContract } from "@pandacss/dev";
 
   const defineTheme = defineThemeContract({
     tokens: {
       colors: {
-        red: { value: '' }, // theme implementations must have a red color
+        red: { value: "" }, // theme implementations must have a red color
       },
     },
-  })
+  });
 
   defineTheme({
-    selector: '.theme-secondary',
+    selector: ".theme-secondary",
     tokens: {
       colors: {
         // ^^^^   Property 'red' is missing in type '{}' but required in type '{ red: { value: string; }; }'
@@ -326,7 +344,7 @@
         // red: { value: 'red' },
       },
     },
-  })
+  });
   ```
 
 ### Patch Changes
@@ -335,7 +353,7 @@
   config)
 
   ```ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   const userConfig = defineConfig({
     presets: [
@@ -344,7 +362,7 @@
           extend: {
             tokens: {
               colors: {
-                black: { value: 'black' },
+                black: { value: "black" },
               },
             },
           },
@@ -356,16 +374,16 @@
         extend: {
           colors: {
             black: {
-              0: { value: 'black' },
-              10: { value: 'black/10' },
-              20: { value: 'black/20' },
-              30: { value: 'black/30' },
+              0: { value: "black" },
+              10: { value: "black/10" },
+              20: { value: "black/20" },
+              30: { value: "black/30" },
             },
           },
         },
       },
     },
-  })
+  });
   ```
 
   When merged with the preset, the config would create nested tokens (`black.10`, `black.20`, `black.30`) inside of the
@@ -412,34 +430,34 @@
   Example:
 
   ```ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
     globalVars: {
-      '--some-color': 'red',
-      '--button-color': {
-        syntax: '<color>',
+      "--some-color": "red",
+      "--button-color": {
+        syntax: "<color>",
         inherits: false,
-        initialValue: 'blue',
+        initialValue: "blue",
       },
     },
-  })
+  });
   ```
 
   > Note: Keys defined in `globalVars` will be available as a value for _every_ utilities, as they're not bound to token
   > categories.
 
   ```ts
-  import { css } from '../styled-system/css'
+  import { css } from "../styled-system/css";
 
   const className = css({
-    '--button-color': 'colors.red.300',
+    "--button-color": "colors.red.300",
     // ^^^^^^^^^^^^  will be suggested
 
-    backgroundColor: 'var(--button-color)',
+    backgroundColor: "var(--button-color)",
     //                ^^^^^^^^^^^^^^^^^^  will be suggested
-  })
+  });
   ```
 
 - Updated dependencies [861a280]
@@ -484,19 +502,19 @@
   modifier in config `tokens` or `semanticTokens`
 
   ```ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
-    validation: 'warn',
+    validation: "warn",
     conditions: {
-      light: '.light &',
-      dark: '.dark &',
+      light: ".light &",
+      dark: ".dark &",
     },
     theme: {
       tokens: {
         colors: {
-          blue: { 500: { value: 'blue' } },
-          green: { 500: { value: 'green' } },
+          blue: { 500: { value: "blue" } },
+          green: { 500: { value: "green" } },
         },
         opacity: {
           half: { value: 0.5 },
@@ -506,15 +524,15 @@
         colors: {
           secondary: {
             value: {
-              base: 'red',
-              _light: '{colors.blue.500/32}',
-              _dark: '{colors.green.500/half}',
+              base: "red",
+              _light: "{colors.blue.500/32}",
+              _dark: "{colors.green.500/half}",
             },
           },
         },
       },
     },
-  })
+  });
   ```
 
   Would incorrectly report:
@@ -546,23 +564,23 @@
 - 9f04427: Fix "missing token" warning when using DEFAULT in tokens path
 
   ```ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
-    validation: 'error',
+    validation: "error",
     theme: {
       semanticTokens: {
         colors: {
           primary: {
-            DEFAULT: { value: '#ff3333' },
-            lighter: { value: '#ff6666' },
+            DEFAULT: { value: "#ff3333" },
+            lighter: { value: "#ff6666" },
           },
-          background: { value: '{colors.primary}' }, // <-- ⚠️ wrong warning
-          background2: { value: '{colors.primary.lighter}' }, // <-- no warning, correct
+          background: { value: "{colors.primary}" }, // <-- ⚠️ wrong warning
+          background2: { value: "{colors.primary.lighter}" }, // <-- no warning, correct
         },
       },
     },
-  })
+  });
   ```
 
   ***
@@ -570,25 +588,25 @@
   Add a warning when using `value` twice
 
   ```ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
-    validation: 'error',
+    validation: "error",
     theme: {
       tokens: {
         colors: {
-          primary: { value: '#ff3333' },
+          primary: { value: "#ff3333" },
         },
       },
       semanticTokens: {
         colors: {
           primary: {
-            value: { value: '{colors.primary}' }, // <-- ⚠️ new warning for this
+            value: { value: "{colors.primary}" }, // <-- ⚠️ new warning for this
           },
         },
       },
     },
-  })
+  });
   ```
 
 - Updated dependencies [d1516c8]
@@ -622,20 +640,20 @@
   export default defaultConfig({
     conditions: {
       extend: {
-        supportHover: ['@media (hover: hover) and (pointer: fine)', '&:hover'],
+        supportHover: ["@media (hover: hover) and (pointer: fine)", "&:hover"],
       },
     },
-  })
+  });
   ```
 
   ```ts
-  import { css } from '../styled-system/css'
+  import { css } from "../styled-system/css";
 
   css({
     _supportHover: {
-      color: 'red',
+      color: "red",
     },
-  })
+  });
   ```
 
   will generate the following CSS:
@@ -691,10 +709,10 @@
 
   ```ts
   css({
-    padding: '1px',
-    paddingTop: '3px',
-    paddingBottom: '4px',
-  })
+    padding: "1px",
+    paddingTop: "3px",
+    paddingBottom: "4px",
+  });
   ```
 
   Will now always generate the following css:
@@ -772,16 +790,16 @@
   keeping the rest. Let's say we want to remove the `stack` pattern from the built-in `@pandacss/preset-base`:
 
   ```ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
     hooks: {
-      'config:resolved': ({ config, utils }) => {
-        return utils.omit(config, ['patterns.stack'])
+      "config:resolved": ({ config, utils }) => {
+        return utils.omit(config, ["patterns.stack"]);
       },
     },
-  })
+  });
   ```
 
 - ab32d1d7: Fix issue where errors were thrown when semantic tokens are overriden in tokens.
@@ -799,11 +817,11 @@
   ```js
   module.exports = {
     plugins: {
-      '@pandacss/dev/postcss': {
-        logfile: './logs/panda.log',
+      "@pandacss/dev/postcss": {
+        logfile: "./logs/panda.log",
       },
     },
-  }
+  };
   ```
 
 - Updated dependencies [74485ef1]
@@ -840,8 +858,8 @@
   ```ts
   export default defineConfig({
     // ...
-    dependencies: ['path/to/files/**.ts'],
-  })
+    dependencies: ["path/to/files/**.ts"],
+  });
   ```
 
   - Invoke `config:change` hook in more situations (when the `--watch` flag is passed to `panda codegen`,
@@ -899,39 +917,54 @@
      * Called when the config is resolved, after all the presets are loaded and merged.
      * This is the first hook called, you can use it to tweak the config before the context is created.
      */
-    'config:resolved': (args: { conf: LoadConfigResult }) => MaybeAsyncReturn
+    "config:resolved": (args: { conf: LoadConfigResult }) => MaybeAsyncReturn;
     /**
      * Called when the Panda context has been created and the API is ready to be used.
      */
-    'context:created': (args: { ctx: ApiInterface; logger: LoggerInterface }) => void
+    "context:created": (args: {
+      ctx: ApiInterface;
+      logger: LoggerInterface;
+    }) => void;
     /**
      * Called when the config file or one of its dependencies (imports) has changed.
      */
-    'config:change': (args: { config: UserConfig }) => MaybeAsyncReturn
+    "config:change": (args: { config: UserConfig }) => MaybeAsyncReturn;
     /**
      * Called after reading the file content but before parsing it.
      * You can use this hook to transform the file content to a tsx-friendly syntax so that Panda's parser can parse it.
      * You can also use this hook to parse the file's content on your side using a custom parser, in this case you don't have to return anything.
      */
-    'parser:before': (args: { filePath: string; content: string }) => string | void
+    "parser:before": (args: {
+      filePath: string;
+      content: string;
+    }) => string | void;
     /**
      * Called after the file styles are extracted and processed into the resulting ParserResult object.
      * You can also use this hook to add your own extraction results from your custom parser to the ParserResult object.
      */
-    'parser:after': (args: { filePath: string; result: ParserResultInterface | undefined }) => void
+    "parser:after": (args: {
+      filePath: string;
+      result: ParserResultInterface | undefined;
+    }) => void;
     /**
      * Called after the codegen is completed
      */
-    'codegen:done': () => MaybeAsyncReturn
+    "codegen:done": () => MaybeAsyncReturn;
     /**
      * Called right before adding the design-system CSS (global, static, preflight, tokens, keyframes) to the final CSS
      * Called right before writing/injecting the final CSS (styles.css) that contains the design-system CSS and the parser CSS
      * You can use it to tweak the CSS content before it's written to disk or injected through the postcss plugin.
      */
-    'cssgen:done': (args: {
-      artifact: 'global' | 'static' | 'reset' | 'tokens' | 'keyframes' | 'styles.css'
-      content: string
-    }) => string | void
+    "cssgen:done": (args: {
+      artifact:
+        | "global"
+        | "static"
+        | "reset"
+        | "tokens"
+        | "keyframes"
+        | "styles.css";
+      content: string;
+    }) => string | void;
   }
   ```
 
@@ -1023,12 +1056,12 @@
 
   ```ts
   // apps/storybook/panda.config.ts
-  import { defineConfig } from '@pandacss/dev'
-  import preset from '@acme/preset'
+  import { defineConfig } from "@pandacss/dev";
+  import preset from "@acme/preset";
 
   export default defineConfig({
     // ...
-  })
+  });
   ```
 
   This would not work before, but now it does.
@@ -1242,10 +1275,10 @@
     staticCss: {
       recipes: {
         // generate all button styles and variants
-        button: ['*'],
+        button: ["*"],
       },
     },
-  })
+  });
 
   export default defineConfig({
     presets: [presetWithStaticCss],
@@ -1253,11 +1286,11 @@
       extend: {
         recipes: {
           // extend and pre-generate all sizes for card
-          card: [{ size: ['small', 'medium', 'large'] }],
+          card: [{ size: ["small", "medium", "large"] }],
         },
       },
     },
-  })
+  });
   ```
 
 ### Patch Changes
@@ -1452,42 +1485,42 @@
     theme: {
       tokens: {
         colors: {
-          'first-main': { value: 'override' },
+          "first-main": { value: "override" },
         },
       },
       extend: {
         tokens: {
           colors: {
-            orange: { value: 'orange' },
-            gray: { value: 'from-first-config' },
+            orange: { value: "orange" },
+            gray: { value: "from-first-config" },
           },
         },
       },
     },
-  })
+  });
 
   const secondConfig = definePreset({
     theme: {
       tokens: {
         colors: {
-          pink: { value: 'pink' },
+          pink: { value: "pink" },
         },
       },
       extend: {
         tokens: {
           colors: {
-            blue: { value: 'blue' },
-            gray: { value: 'gray' },
+            blue: { value: "blue" },
+            gray: { value: "gray" },
           },
         },
       },
     },
-  })
+  });
 
   // Final config
   export default defineConfig({
     presets: [firstConfig, secondConfig],
-  })
+  });
   ```
 
   Here's the difference between the old and new behavior:
@@ -1715,7 +1748,7 @@
 - 33198907: Create separate entrypoint for merge configs
 
   ```ts
-  import { mergeConfigs } from '@pandacss/config/merge'
+  import { mergeConfigs } from "@pandacss/config/merge";
   ```
 
 - 1a2c0e2b: Fix `panda.config.xxx` file dependencies detection when using the builder (= with PostCSS or with the VSCode
diff --git a/packages/config/package.json b/packages/config/package.json
index 748a236b1..ada00ccaf 100644
--- a/packages/config/package.json
+++ b/packages/config/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/config",
-  "version": "0.39.0",
+  "version": "0.39.1",
   "description": "Find and load panda config",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md
index ce8636e53..677ac8244 100644
--- a/packages/core/CHANGELOG.md
+++ b/packages/core/CHANGELOG.md
@@ -1,5 +1,15 @@
 # @pandacss/core
 
+## 0.39.1
+
+### Patch Changes
+
+- @pandacss/is-valid-prop@0.39.1
+- @pandacss/logger@0.39.1
+- @pandacss/shared@0.39.1
+- @pandacss/token-dictionary@0.39.1
+- @pandacss/types@0.39.1
+
 ## 0.39.0
 
 ### Patch Changes
@@ -32,11 +42,11 @@
       ta: {
         deprecated: true,
         transform(value) {
-          return { textAlign: value }
+          return { textAlign: value };
         },
       },
     },
-  })
+  });
   ```
 
   **Deprecating a token**
@@ -46,11 +56,11 @@
     theme: {
       tokens: {
         spacing: {
-          lg: { value: '8px', deprecated: 'use `8` instead' },
+          lg: { value: "8px", deprecated: "use `8` instead" },
         },
       },
     },
-  })
+  });
   ```
 
   **Deprecating a pattern**
@@ -62,7 +72,7 @@
         deprecated: true,
       },
     },
-  })
+  });
   ```
 
   **Deprecating a recipe**
@@ -72,11 +82,11 @@
     theme: {
       recipes: {
         btn: {
-          deprecated: 'will be removed in v2.0',
+          deprecated: "will be removed in v2.0",
         },
       },
     },
-  })
+  });
   ```
 
   ### ESLint Plugin
@@ -102,23 +112,28 @@
   This makes it even easier to merge styles from multiple sources.
 
   ```tsx
-  import { Stack, styled } from '../styled-system/jsx'
+  import { Stack, styled } from "../styled-system/jsx";
 
   const HeroSection = (props) => {
     return (
-      <Stack css={[{ color: 'blue.300', padding: '4' }, props.css]}>
-        <styled.div css={[{ fontSize: '2xl' }, props.hero]}>Hero Section</styled.div>
+      <Stack css={[{ color: "blue.300", padding: "4" }, props.css]}>
+        <styled.div css={[{ fontSize: "2xl" }, props.hero]}>
+          Hero Section
+        </styled.div>
       </Stack>
-    )
-  }
+    );
+  };
 
   const App = () => {
     return (
       <>
-        <HeroSection css={{ backgroundColor: 'yellow.300' }} hero={css.raw({ fontSize: '4xl', color: 'red.300' })} />
+        <HeroSection
+          css={{ backgroundColor: "yellow.300" }}
+          hero={css.raw({ fontSize: "4xl", color: "red.300" })}
+        />
       </>
-    )
-  }
+    );
+  };
   ```
 
   should render something like:
@@ -157,21 +172,21 @@
 - 99870bb: Fix issue where setting the pattern `jsx` option with dot notation didn't work.
 
   ```jsx
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
     patterns: {
       extend: {
         grid: {
-          jsx: ['Form.Group', 'Grid'],
+          jsx: ["Form.Group", "Grid"],
         },
         stack: {
-          jsx: ['Form.Action', 'Stack'],
+          jsx: ["Form.Action", "Stack"],
         },
       },
     },
-  })
+  });
   ```
 
 - Updated dependencies [93dc9f5]
@@ -213,9 +228,9 @@
     useful when applying negative margin to child elements.
 
   ```tsx
-  <div className={flex({ spaceX: '-1' })}>
-    <div className={circle({ size: '5', bg: 'red' })} />
-    <div className={circle({ size: '5', bg: 'pink' })} />
+  <div className={flex({ spaceX: "-1" })}>
+    <div className={circle({ size: "5", bg: "red" })} />
+    <div className={circle({ size: "5", bg: "pink" })} />
   </div>
   ```
 
@@ -227,13 +242,13 @@
   ```tsx
   <div
     className={css({
-      bgGradient: 'to-r',
+      bgGradient: "to-r",
       // from
-      gradientFrom: 'red',
-      gradientFromPosition: 'top left',
+      gradientFrom: "red",
+      gradientFromPosition: "top left",
       // to
-      gradientTo: 'blue',
-      gradientToPosition: 'bottom right',
+      gradientTo: "blue",
+      gradientToPosition: "bottom right",
     })}
   />
   ```
@@ -243,19 +258,23 @@
   It can be useful to use a component library's `styled-system` while also using your own `styled-system` in your app.
 
   ```ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
-    importMap: ['@acme/styled-system', '@ui-lib/styled-system', 'styled-system'],
-  })
+    importMap: [
+      "@acme/styled-system",
+      "@ui-lib/styled-system",
+      "styled-system",
+    ],
+  });
   ```
 
   Now you can use any of the `@acme/styled-system`, `@ui-lib/styled-system` and `styled-system` import sources:
 
   ```ts
-  import { css } from '@acme/css'
-  import { css as uiCss } from '@ui-lib/styled-system/css'
-  import { css as appCss } from '@ui-lib/styled-system/css'
+  import { css } from "@acme/css";
+  import { css as uiCss } from "@ui-lib/styled-system/css";
+  import { css as appCss } from "@ui-lib/styled-system/css";
   ```
 
 ### Patch Changes
@@ -294,7 +313,7 @@
 
   ```ts
   // panda.config.ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
@@ -303,15 +322,15 @@
       extend: {
         tokens: {
           colors: {
-            text: { value: 'blue' },
+            text: { value: "blue" },
           },
         },
         semanticTokens: {
           colors: {
             body: {
               value: {
-                base: '{colors.blue.600}',
-                _osDark: '{colors.blue.400}',
+                base: "{colors.blue.600}",
+                _osDark: "{colors.blue.400}",
               },
             },
           },
@@ -323,16 +342,16 @@
       primary: {
         tokens: {
           colors: {
-            text: { value: 'red' },
+            text: { value: "red" },
           },
         },
         semanticTokens: {
           colors: {
-            muted: { value: '{colors.red.200}' },
+            muted: { value: "{colors.red.200}" },
             body: {
               value: {
-                base: '{colors.red.600}',
-                _osDark: '{colors.red.400}',
+                base: "{colors.red.600}",
+                _osDark: "{colors.red.400}",
               },
             },
           },
@@ -341,23 +360,23 @@
       secondary: {
         tokens: {
           colors: {
-            text: { value: 'blue' },
+            text: { value: "blue" },
           },
         },
         semanticTokens: {
           colors: {
-            muted: { value: '{colors.blue.200}' },
+            muted: { value: "{colors.blue.200}" },
             body: {
               value: {
-                base: '{colors.blue.600}',
-                _osDark: '{colors.blue.400}',
+                base: "{colors.blue.600}",
+                _osDark: "{colors.blue.400}",
               },
             },
           },
         },
       },
     },
-  })
+  });
   ```
 
   ### Pregenerating themes
@@ -367,14 +386,14 @@
 
   ```ts
   // panda.config.ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
     staticCss: {
-      themes: ['primary', 'secondary'],
+      themes: ["primary", "secondary"],
     },
-  })
+  });
   ```
 
   This will generate the following CSS:
@@ -386,7 +405,7 @@
       --colors-body: var(--colors-blue-600);
     }
 
-    [data-panda-theme='primary'] {
+    [data-panda-theme="primary"] {
       --colors-text: red;
       --colors-muted: var(--colors-red-200);
       --colors-body: var(--colors-red-600);
@@ -397,7 +416,7 @@
         --colors-body: var(--colors-blue-400);
       }
 
-      [data-panda-theme='primary'] {
+      [data-panda-theme="primary"] {
         --colors-body: var(--colors-red-400);
       }
     }
@@ -428,9 +447,9 @@
   Dynamically import a theme using its name:
 
   ```ts
-  import { getTheme } from '../styled-system/themes'
+  import { getTheme } from "../styled-system/themes";
 
-  const theme = await getTheme('red')
+  const theme = await getTheme("red");
   //    ^? {
   //     name: "red";
   //     id: string;
@@ -441,10 +460,10 @@
   Inject the theme styles into the DOM:
 
   ```ts
-  import { injectTheme } from '../styled-system/themes'
+  import { injectTheme } from "../styled-system/themes";
 
-  const theme = await getTheme('red')
-  injectTheme(document.documentElement, theme) // this returns the injected style element
+  const theme = await getTheme("red");
+  injectTheme(document.documentElement, theme); // this returns the injected style element
   ```
 
   ***
@@ -453,54 +472,62 @@
 
   ```tsx
   // app/layout.tsx
-  import { Inter } from 'next/font/google'
-  import { cookies } from 'next/headers'
-  import { ThemeName, getTheme } from '../../styled-system/themes'
-
-  export default async function RootLayout({ children }: { children: React.ReactNode }) {
-    const store = cookies()
-    const themeName = store.get('theme')?.value as ThemeName
-    const theme = themeName && (await getTheme(themeName))
+  import { Inter } from "next/font/google";
+  import { cookies } from "next/headers";
+  import { ThemeName, getTheme } from "../../styled-system/themes";
+
+  export default async function RootLayout({
+    children,
+  }: {
+    children: React.ReactNode;
+  }) {
+    const store = cookies();
+    const themeName = store.get("theme")?.value as ThemeName;
+    const theme = themeName && (await getTheme(themeName));
 
     return (
       <html lang="en" data-panda-theme={themeName ? themeName : undefined}>
         {themeName && (
           <head>
-            <style type="text/css" id={theme.id} dangerouslySetInnerHTML={{ __html: theme.css }} />
+            <style
+              type="text/css"
+              id={theme.id}
+              dangerouslySetInnerHTML={{ __html: theme.css }}
+            />
           </head>
         )}
         <body>{children}</body>
       </html>
-    )
+    );
   }
 
   // app/page.tsx
-  import { getTheme, injectTheme } from '../../styled-system/themes'
+  import { getTheme, injectTheme } from "../../styled-system/themes";
 
   export default function Home() {
     return (
       <>
         <button
           onClick={async () => {
-            const current = document.documentElement.dataset.pandaTheme
-            const next = current === 'primary' ? 'secondary' : 'primary'
-            const theme = await getTheme(next)
-            setCookie('theme', next, 7)
-            injectTheme(document.documentElement, theme)
+            const current = document.documentElement.dataset.pandaTheme;
+            const next = current === "primary" ? "secondary" : "primary";
+            const theme = await getTheme(next);
+            setCookie("theme", next, 7);
+            injectTheme(document.documentElement, theme);
           }}
         >
           swap theme
         </button>
       </>
-    )
+    );
   }
 
   // Set a Cookie
   function setCookie(cName: string, cValue: any, expDays: number) {
-    let date = new Date()
-    date.setTime(date.getTime() + expDays * 24 * 60 * 60 * 1000)
-    const expires = 'expires=' + date.toUTCString()
-    document.cookie = cName + '=' + cValue + '; ' + expires + '; path=/'
+    let date = new Date();
+    date.setTime(date.getTime() + expDays * 24 * 60 * 60 * 1000);
+    const expires = "expires=" + date.toUTCString();
+    document.cookie = cName + "=" + cValue + "; " + expires + "; path=/";
   }
   ```
 
@@ -509,18 +536,18 @@
   Finally, you can create a theme contract to ensure that all themes have the same structure:
 
   ```ts
-  import { defineThemeContract } from '@pandacss/dev'
+  import { defineThemeContract } from "@pandacss/dev";
 
   const defineTheme = defineThemeContract({
     tokens: {
       colors: {
-        red: { value: '' }, // theme implementations must have a red color
+        red: { value: "" }, // theme implementations must have a red color
       },
     },
-  })
+  });
 
   defineTheme({
-    selector: '.theme-secondary',
+    selector: ".theme-secondary",
     tokens: {
       colors: {
         // ^^^^   Property 'red' is missing in type '{}' but required in type '{ red: { value: string; }; }'
@@ -529,7 +556,7 @@
         // red: { value: 'red' },
       },
     },
-  })
+  });
   ```
 
 - fabdabe: ## Changes
@@ -549,12 +576,12 @@
     theme: {
       extend: {
         colors: {
-          primary: { value: 'blue' },
+          primary: { value: "blue" },
         },
         // borderWidths: {}, // ⚠️ nothing defined here
       },
     },
-  })
+  });
   ```
 
   ```ts
@@ -565,8 +592,8 @@
 
     // ✅ after this PR, TS will not throw an error anymore as you don't have any `borderWidths` tokens
     // if you add one, this will error again (as it's supposed to)
-    borderWidths: '123px',
-  })
+    borderWidths: "123px",
+  });
   ```
 
   ## Description
@@ -604,11 +631,13 @@
 - c459b43: Fix extraction of JSX `styled` factory when using namespace imports
 
   ```tsx
-  import * as pandaJsx from '../styled-system/jsx'
+  import * as pandaJsx from "../styled-system/jsx";
 
   // ✅ this will work now
-  pandaJsx.styled('div', { base: { color: 'red' } })
-  const App = () => <pandaJsx.styled.span color="blue">Hello</pandaJsx.styled.span>
+  pandaJsx.styled("div", { base: { color: "red" } });
+  const App = () => (
+    <pandaJsx.styled.span color="blue">Hello</pandaJsx.styled.span>
+  );
   ```
 
 - Updated dependencies [f2fdc48]
@@ -638,18 +667,18 @@
 - 0bf09f2: Allow using namespaced imports
 
   ```ts
-  import * as p from 'styled-system/patterns'
-  import * as recipes from 'styled-system/recipes'
-  import * as panda from 'styled-system/css'
+  import * as p from "styled-system/patterns";
+  import * as recipes from "styled-system/recipes";
+  import * as panda from "styled-system/css";
 
   // this will now be extracted
-  p.stack({ mt: '40px' })
+  p.stack({ mt: "40px" });
 
-  recipes.cardStyle({ rounded: true })
+  recipes.cardStyle({ rounded: true });
 
-  panda.css({ color: 'red' })
-  panda.cva({ base: { color: 'blue' } })
-  panda.sva({ base: { root: { color: 'green' } } })
+  panda.css({ color: "red" });
+  panda.cva({ base: { color: "blue" } });
+  panda.sva({ base: { root: { color: "green" } } });
   ```
 
   - @pandacss/types@0.34.2
@@ -683,16 +712,16 @@
   ```ts
   // runtime usage
 
-  import { css } from '../styled-system/css'
+  import { css } from "../styled-system/css";
 
-  css({ bg: '{colors.blue.300/70}' })
+  css({ bg: "{colors.blue.300/70}" });
   // => @layer utilities {
   //    .bg_token\(colors\.blue\.300\/70\) {
   //      background: color-mix(in srgb, var(--colors-blue-300) 70%, transparent);
   //    }
   //  }
 
-  css({ bg: 'token(colors.blue.300/70)' })
+  css({ bg: "token(colors.blue.300/70)" });
   // => @layer utilities {
   //    .bg_token\(colors\.blue\.300\/70\) {
   //      background: color-mix(in srgb, var(--colors-blue-300) 70%, transparent);
@@ -702,33 +731,37 @@
 
   ```ts
   // build-time usage
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     theme: {
       tokens: {
         colors: {
           blue: {
-            300: { value: '#00f' },
+            300: { value: "#00f" },
           },
         },
       },
       semanticTokens: {
         colors: {
           primary: {
-            value: '{colors.blue.300/70}',
+            value: "{colors.blue.300/70}",
           },
         },
       },
     },
-  })
+  });
   ```
 
   ```css
   @layer tokens {
     :where(:root, :host) {
       --colors-blue-300: #00f;
-      --colors-primary: color-mix(in srgb, var(--colors-blue-300) 70%, transparent);
+      --colors-primary: color-mix(
+        in srgb,
+        var(--colors-blue-300) 70%,
+        transparent
+      );
     }
   }
   ```
@@ -769,20 +802,20 @@
   export default defaultConfig({
     conditions: {
       extend: {
-        supportHover: ['@media (hover: hover) and (pointer: fine)', '&:hover'],
+        supportHover: ["@media (hover: hover) and (pointer: fine)", "&:hover"],
       },
     },
-  })
+  });
   ```
 
   ```ts
-  import { css } from '../styled-system/css'
+  import { css } from "../styled-system/css";
 
   css({
     _supportHover: {
-      color: 'red',
+      color: "red",
     },
-  })
+  });
   ```
 
   will generate the following CSS:
@@ -798,25 +831,25 @@
 - 31071ba: Fix an issue for token names starting with '0'
 
   ```ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     theme: {
       tokens: {
         spacing: {
-          '025': {
-            value: '0.125rem',
+          "025": {
+            value: "0.125rem",
           },
         },
       },
     },
-  })
+  });
   ```
 
   and then using it like
 
   ```ts
-  css({ margin: '025' })
+  css({ margin: "025" });
   ```
 
   This would not generate the expected CSS because the parser would try to parse `025` as a number (`25`) instead of
@@ -827,11 +860,11 @@
   - Allow using multiple aliases for the same identifier for the `/css` entrypoints just like `/patterns` and `/recipes`
 
   ```ts
-  import { css } from '../styled-system/css'
-  import { css as css2 } from '../styled-system/css'
+  import { css } from "../styled-system/css";
+  import { css as css2 } from "../styled-system/css";
 
-  css({ display: 'flex' })
-  css2({ flexDirection: 'column' }) // this wasn't working before, now it does
+  css({ display: "flex" });
+  css2({ flexDirection: "column" }); // this wasn't working before, now it does
   ```
 
 - Updated dependencies [a032375]
@@ -875,10 +908,10 @@
 
   ```ts
   css({
-    padding: '1px',
-    paddingTop: '3px',
-    paddingBottom: '4px',
-  })
+    padding: "1px",
+    paddingTop: "3px",
+    paddingBottom: "4px",
+  });
   ```
 
   Will now always generate the following css:
@@ -939,16 +972,17 @@
   export default defineConfig({
     // ...
     hooks: {
-      'parser:before': ({ configure }) => {
+      "parser:before": ({ configure }) => {
         configure({
           // ignore the Select.Content entirely
-          matchTag: (tag) => tag !== 'Select.Content',
+          matchTag: (tag) => tag !== "Select.Content",
           // ...or specifically ignore the `position` property
-          matchTagProp: (tag, prop) => tag === 'Select.Content' && prop !== 'position',
-        })
+          matchTagProp: (tag, prop) =>
+            tag === "Select.Content" && prop !== "position",
+        });
       },
     },
-  })
+  });
   ```
 
 - Updated dependencies [6b829cab]
@@ -1016,9 +1050,9 @@
 
   ```ts
   css({
-    bg: 'red.300/40',
-    color: 'white',
-  })
+    bg: "red.300/40",
+    color: "white",
+  });
   ```
 
   This will generate:
@@ -1026,7 +1060,11 @@
   ```css
   @layer utilities {
     .bg_red\.300\/40 {
-      --mix-background: color-mix(in srgb, var(--colors-red-300) 40%, transparent);
+      --mix-background: color-mix(
+        in srgb,
+        var(--colors-red-300) 40%,
+        transparent
+      );
       background: var(--mix-background, var(--colors-red-300));
     }
 
@@ -1050,21 +1088,21 @@
   export default defineConfig({
     utilities: {
       background: {
-        shorthand: 'bg',
-        className: 'bg',
-        values: 'colors',
+        shorthand: "bg",
+        className: "bg",
+        values: "colors",
         transform(value, args) {
-          const mix = args.utils.colorMix(value)
+          const mix = args.utils.colorMix(value);
           // This can happen if the value format is invalid (e.g. `bg: red.300/invalid` or `bg: red.300//10`)
-          if (mix.invalid) return { background: value }
+          if (mix.invalid) return { background: value };
 
           return {
             background: mix.value,
-          }
+          };
         },
       },
     },
-  })
+  });
   ```
 
   ***
@@ -1073,21 +1111,21 @@
   property:
 
   ```ts
-  import type { PropertyTransform } from '@pandacss/types'
+  import type { PropertyTransform } from "@pandacss/types";
 
   export const createColorMixTransform =
     (prop: string): PropertyTransform =>
     (value, args) => {
-      const mix = args.utils.colorMix(value)
-      if (mix.invalid) return { [prop]: value }
+      const mix = args.utils.colorMix(value);
+      if (mix.invalid) return { [prop]: value };
 
-      const cssVar = '--mix-' + prop
+      const cssVar = "--mix-" + prop;
 
       return {
         [cssVar]: mix.value,
         [prop]: `var(${cssVar}, ${mix.color})`,
-      }
-    }
+      };
+    };
   ```
 
   then the same utility transform as above can be written like this:
@@ -1113,24 +1151,24 @@
     patterns: {
       hstack: {
         properties: {
-          justify: { type: 'property', value: 'justifyContent' },
-          gap: { type: 'property', value: 'gap' },
+          justify: { type: "property", value: "justifyContent" },
+          gap: { type: "property", value: "gap" },
         },
         // you can also use a token like '10'
-        defaultValues: { gap: '40px' },
+        defaultValues: { gap: "40px" },
         transform(props) {
-          const { justify, gap, ...rest } = props
+          const { justify, gap, ...rest } = props;
           return {
-            display: 'flex',
-            alignItems: 'center',
+            display: "flex",
+            alignItems: "center",
             justifyContent: justify,
             gap,
             ...rest,
-          }
+          };
         },
       },
     },
-  })
+  });
   ```
 
 - 250b4d11: ### Container Query Theme
@@ -1144,34 +1182,34 @@
     // ...
     theme: {
       extend: {
-        containerNames: ['sidebar', 'content'],
+        containerNames: ["sidebar", "content"],
         containerSizes: {
-          xs: '40em',
-          sm: '60em',
-          md: '80em',
+          xs: "40em",
+          sm: "60em",
+          md: "80em",
         },
       },
     },
-  })
+  });
   ```
 
   The default container sizes in the `@pandacss/preset-panda` preset are shown below:
 
   ```ts
   export const containerSizes = {
-    xs: '320px',
-    sm: '384px',
-    md: '448px',
-    lg: '512px',
-    xl: '576px',
-    '2xl': '672px',
-    '3xl': '768px',
-    '4xl': '896px',
-    '5xl': '1024px',
-    '6xl': '1152px',
-    '7xl': '1280px',
-    '8xl': '1440px',
-  }
+    xs: "320px",
+    sm: "384px",
+    md: "448px",
+    lg: "512px",
+    xl: "576px",
+    "2xl": "672px",
+    "3xl": "768px",
+    "4xl": "896px",
+    "5xl": "1024px",
+    "6xl": "1152px",
+    "7xl": "1280px",
+    "8xl": "1440px",
+  };
   ```
 
   Then use them in your styles by referencing using `@<container-name>/<container-size>` syntax:
@@ -1255,10 +1293,10 @@
   css({
     // ✅ this is fine now, will resolve to something like
     // `@container (min-width: 56em)`
-    '@container (min-width: {sizes.4xl})': {
-      color: 'green',
+    "@container (min-width: {sizes.4xl})": {
+      color: "green",
     },
-  })
+  });
   ```
 
   Fix an issue where the curly token references would not be escaped if the token path was not found.
@@ -1297,39 +1335,54 @@
      * Called when the config is resolved, after all the presets are loaded and merged.
      * This is the first hook called, you can use it to tweak the config before the context is created.
      */
-    'config:resolved': (args: { conf: LoadConfigResult }) => MaybeAsyncReturn
+    "config:resolved": (args: { conf: LoadConfigResult }) => MaybeAsyncReturn;
     /**
      * Called when the Panda context has been created and the API is ready to be used.
      */
-    'context:created': (args: { ctx: ApiInterface; logger: LoggerInterface }) => void
+    "context:created": (args: {
+      ctx: ApiInterface;
+      logger: LoggerInterface;
+    }) => void;
     /**
      * Called when the config file or one of its dependencies (imports) has changed.
      */
-    'config:change': (args: { config: UserConfig }) => MaybeAsyncReturn
+    "config:change": (args: { config: UserConfig }) => MaybeAsyncReturn;
     /**
      * Called after reading the file content but before parsing it.
      * You can use this hook to transform the file content to a tsx-friendly syntax so that Panda's parser can parse it.
      * You can also use this hook to parse the file's content on your side using a custom parser, in this case you don't have to return anything.
      */
-    'parser:before': (args: { filePath: string; content: string }) => string | void
+    "parser:before": (args: {
+      filePath: string;
+      content: string;
+    }) => string | void;
     /**
      * Called after the file styles are extracted and processed into the resulting ParserResult object.
      * You can also use this hook to add your own extraction results from your custom parser to the ParserResult object.
      */
-    'parser:after': (args: { filePath: string; result: ParserResultInterface | undefined }) => void
+    "parser:after": (args: {
+      filePath: string;
+      result: ParserResultInterface | undefined;
+    }) => void;
     /**
      * Called after the codegen is completed
      */
-    'codegen:done': () => MaybeAsyncReturn
+    "codegen:done": () => MaybeAsyncReturn;
     /**
      * Called right before adding the design-system CSS (global, static, preflight, tokens, keyframes) to the final CSS
      * Called right before writing/injecting the final CSS (styles.css) that contains the design-system CSS and the parser CSS
      * You can use it to tweak the CSS content before it's written to disk or injected through the postcss plugin.
      */
-    'cssgen:done': (args: {
-      artifact: 'global' | 'static' | 'reset' | 'tokens' | 'keyframes' | 'styles.css'
-      content: string
-    }) => string | void
+    "cssgen:done": (args: {
+      artifact:
+        | "global"
+        | "static"
+        | "reset"
+        | "tokens"
+        | "keyframes"
+        | "styles.css";
+      content: string;
+    }) => string | void;
   }
   ```
 
@@ -1536,11 +1589,11 @@
 - de282f60: Support token reference syntax when authoring styles object, text styles and layer styles.
 
   ```jsx
-  import { css } from '../styled-system/css'
+  import { css } from "../styled-system/css";
 
   const styles = css({
-    border: '2px solid {colors.primary}',
-  })
+    border: "2px solid {colors.primary}",
+  });
   ```
 
   This will resolve the token reference and convert it to css variables.
@@ -1560,18 +1613,18 @@
   ```jsx
   const styles = css({
     // token reference syntax
-    border: '2px solid {colors.primary}',
+    border: "2px solid {colors.primary}",
     // token function syntax
-    border: '2px solid token(colors.primary)',
-  })
+    border: "2px solid token(colors.primary)",
+  });
   ```
 
   However, The `token(...)` syntax allows you to set a fallback value.
 
   ```jsx
   const styles = css({
-    border: '2px solid token(colors.primary, red)',
-  })
+    border: "2px solid token(colors.primary, red)",
+  });
   ```
 
 ### Patch Changes
@@ -1582,8 +1635,8 @@
   ```jsx
   css({
     // This didn't work, but now it does
-    base: { color: 'blue' },
-  })
+    base: { color: "blue" },
+  });
   ```
 
 - Updated dependencies [59fd291c]
@@ -1642,38 +1695,38 @@
 
   ```ts
   const card = defineRecipe({
-    className: 'card',
-    base: { color: 'white' },
+    className: "card",
+    base: { color: "white" },
     variants: {
       size: {
-        small: { fontSize: '14px' },
-        large: { fontSize: '18px' },
+        small: { fontSize: "14px" },
+        large: { fontSize: "18px" },
       },
       visual: {
-        primary: { backgroundColor: 'blue' },
-        secondary: { backgroundColor: 'gray' },
+        primary: { backgroundColor: "blue" },
+        secondary: { backgroundColor: "gray" },
       },
     },
-  })
+  });
 
   export default defineConfig({
     // ...
     staticCss: {
       recipes: {
-        card: ['*'], // this
+        card: ["*"], // this
 
         // was equivalent to:
         card: [
           // notice how `responsive: true` was implicitly added
-          { size: ['*'], responsive: true },
-          { visual: ['*'], responsive: true },
+          { size: ["*"], responsive: true },
+          { visual: ["*"], responsive: true },
         ],
 
         //   will now correctly be equivalent to:
-        card: [{ size: ['*'] }, { visual: ['*'] }],
+        card: [{ size: ["*"] }, { visual: ["*"] }],
       },
     },
-  })
+  });
   ```
 
   Here's the diff in the generated CSS:
@@ -1799,30 +1852,30 @@
   another file, such as when using `Ark-UI` like `import { comboboxAnatomy } from '@ark-ui/anatomy'`
 
   ```ts
-  import { sva } from '../styled-system/css'
-  import { slots } from './slots'
+  import { sva } from "../styled-system/css";
+  import { slots } from "./slots";
 
   const card = sva({
     slots, // ❌ did NOT work -> ✅ will now work as expected
     base: {
       root: {
-        p: '6',
-        m: '4',
-        w: 'md',
-        boxShadow: 'md',
-        borderRadius: 'md',
-        _dark: { bg: '#262626', color: 'white' },
+        p: "6",
+        m: "4",
+        w: "md",
+        boxShadow: "md",
+        borderRadius: "md",
+        _dark: { bg: "#262626", color: "white" },
       },
       content: {
-        textStyle: 'lg',
+        textStyle: "lg",
       },
       title: {
-        textStyle: 'xl',
-        fontWeight: 'semibold',
-        pb: '2',
+        textStyle: "xl",
+        fontWeight: "semibold",
+        pb: "2",
       },
     },
-  })
+  });
   ```
 
 - 840ed66b: Fix an issue with config change detection when using a custom `config.slotRecipes[xxx].jsx` array
@@ -1879,18 +1932,18 @@
   and suffixing with `]`, e.g. writing `[123px]` as a value will bypass the token validation.
 
   ```ts
-  import { css } from '../styled-system/css'
+  import { css } from "../styled-system/css";
 
   css({
     // @ts-expect-error TS will throw when using from strictTokens: true
-    color: '#fff',
+    color: "#fff",
     // @ts-expect-error TS will throw when using from strictTokens: true
-    width: '100px',
+    width: "100px",
 
     // ✅ but this is now allowed:
-    bgColor: '[rgb(51 155 240)]',
-    fontSize: '[12px]',
-  })
+    bgColor: "[rgb(51 155 240)]",
+    fontSize: "[12px]",
+  });
   ```
 
 ### Patch Changes
@@ -1903,8 +1956,8 @@
     // here the content property is a valid CSS property, so Panda will try to generate the CSS for it
     // but since it's an URL, it would produce invalid CSS
     // we now check if the property value is an URL and skip it if needed
-    return <CopyButton content="https://www.buymeacoffee.com/grizzlycodes" />
-  }
+    return <CopyButton content="https://www.buymeacoffee.com/grizzlycodes" />;
+  };
   ```
 
 - d81dcbe6: - Fix an issue where recipe variants that clash with utility shorthand don't get generated due to the
@@ -1913,36 +1966,36 @@
 - 105f74ce: Add a way to specify a recipe's `staticCss` options from inside a recipe config, e.g.:
 
   ```js
-  import { defineRecipe } from '@pandacss/dev'
+  import { defineRecipe } from "@pandacss/dev";
 
   const card = defineRecipe({
-    className: 'card',
-    base: { color: 'white' },
+    className: "card",
+    base: { color: "white" },
     variants: {
       size: {
-        small: { fontSize: '14px' },
-        large: { fontSize: '18px' },
+        small: { fontSize: "14px" },
+        large: { fontSize: "18px" },
       },
     },
-    staticCss: [{ size: ['*'] }],
-  })
+    staticCss: [{ size: ["*"] }],
+  });
   ```
 
   would be the equivalent of defining it inside the main config:
 
   ```js
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
     staticCss: {
       recipes: {
         card: {
-          size: ['*'],
+          size: ["*"],
         },
       },
     },
-  })
+  });
   ```
 
 - Updated dependencies [26e6051a]
@@ -1974,13 +2027,13 @@
 
   ```ts
   css({
-    '@container (min-width: token(sizes.xl))': {
-      color: 'green.300',
+    "@container (min-width: token(sizes.xl))": {
+      color: "green.300",
     },
-    '@media (min-width: token(sizes.2xl))': {
-      color: 'red.300',
+    "@media (min-width: token(sizes.2xl))": {
+      color: "red.300",
     },
-  })
+  });
   ```
 
 - Updated dependencies [24ee49a5]
@@ -2032,14 +2085,14 @@
 - 8c76cd0f: - Fix issue where `hideBelow` breakpoints are inclusive of the specified breakpoints
 
   ```jsx
-  css({ hideBelow: 'lg' })
+  css({ hideBelow: "lg" });
   // => @media screen and (max-width: 63.9975em) { background: red; }
   ```
 
   - Support arbitrary breakpoints in `hideBelow` and `hideFrom` utilities
 
   ```jsx
-  css({ hideFrom: '800px' })
+  css({ hideFrom: "800px" });
   // => @media screen and (min-width: 800px) { background: red; }
   ```
 
@@ -2125,10 +2178,10 @@
 
   ```ts
   const button = defineSlotRecipe({
-    className: 'button',
-    slots: ['root', 'icon', 'label'],
+    className: "button",
+    slots: ["root", "icon", "label"],
     // ...
-  })
+  });
   ```
 
   will have a default `jsx` property of: `[Button, Button.Root, Button.Icon, Button.Label]`
@@ -2185,42 +2238,42 @@
 
   ```ts
   export default defineConfig({
-    outdir: './outdir',
+    outdir: "./outdir",
     importMap: {
-      css: '#panda/styled-system/css',
-      recipes: '#panda/styled-system/recipes',
-      patterns: '#panda/styled-system/patterns',
-      jsx: '#panda/styled-system/jsx',
+      css: "#panda/styled-system/css",
+      recipes: "#panda/styled-system/recipes",
+      patterns: "#panda/styled-system/patterns",
+      jsx: "#panda/styled-system/jsx",
     },
-  })
+  });
   ```
 
   Or you could also make your outdir an actual package from your monorepo:
 
   ```ts
   export default defineConfig({
-    outdir: '../packages/styled-system',
+    outdir: "../packages/styled-system",
     importMap: {
-      css: '@monorepo/styled-system',
-      recipes: '@monorepo/styled-system',
-      patterns: '@monorepo/styled-system',
-      jsx: '@monorepo/styled-system',
+      css: "@monorepo/styled-system",
+      recipes: "@monorepo/styled-system",
+      patterns: "@monorepo/styled-system",
+      jsx: "@monorepo/styled-system",
     },
-  })
+  });
   ```
 
   Working with tsconfig paths aliases is easy:
 
   ```ts
   export default defineConfig({
-    outdir: 'styled-system',
+    outdir: "styled-system",
     importMap: {
-      css: 'styled-system/css',
-      recipes: 'styled-system/recipes',
-      patterns: 'styled-system/patterns',
-      jsx: 'styled-system/jsx',
+      css: "styled-system/css",
+      recipes: "styled-system/recipes",
+      patterns: "styled-system/patterns",
+      jsx: "styled-system/jsx",
     },
-  })
+  });
   ```
 
 - Updated dependencies [95b06bb1]
@@ -2250,13 +2303,13 @@
 - 848936e0: Allow referencing tokens with the `token()` function in media queries or any other CSS at-rule.
 
   ```js
-  import { css } from '../styled-system/css'
+  import { css } from "../styled-system/css";
 
   const className = css({
-    '@media screen and (min-width: token(sizes.4xl))': {
-      color: 'green.400',
+    "@media screen and (min-width: token(sizes.4xl))": {
+      color: "green.400",
     },
-  })
+  });
   ```
 
 - Updated dependencies [26f6982c]
@@ -2309,7 +2362,7 @@
 
   ```css
   * {
-    color: token('colors.magenta', pink);
+    color: token("colors.magenta", pink);
   }
   ```
 
@@ -2418,12 +2471,12 @@
   **Definition**
 
   ```jsx
-  import { sva } from 'styled-system/css'
+  import { sva } from "styled-system/css";
 
   const button = sva({
-    slots: ['label', 'icon'],
+    slots: ["label", "icon"],
     base: {
-      label: { color: 'red', textDecoration: 'underline' },
+      label: { color: "red", textDecoration: "underline" },
     },
     variants: {
       rounded: {
@@ -2431,33 +2484,33 @@
       },
       size: {
         sm: {
-          label: { fontSize: 'sm' },
-          icon: { fontSize: 'sm' },
+          label: { fontSize: "sm" },
+          icon: { fontSize: "sm" },
         },
         lg: {
-          label: { fontSize: 'lg' },
-          icon: { fontSize: 'lg', color: 'pink' },
+          label: { fontSize: "lg" },
+          icon: { fontSize: "lg", color: "pink" },
         },
       },
     },
     defaultVariants: {
-      size: 'sm',
+      size: "sm",
     },
-  })
+  });
   ```
 
   **Usage**
 
   ```jsx
   export function App() {
-    const btnClass = button({ size: 'lg', rounded: true })
+    const btnClass = button({ size: "lg", rounded: true });
 
     return (
       <button>
         <p class={btnClass.label}> Label</p>
         <p class={btnClass.icon}> Icon</p>
       </button>
-    )
+    );
   }
   ```
 
@@ -2506,26 +2559,26 @@
   Update the `jsx` property to be used for advanced tracking of custom pattern components.
 
   ```jsx
-  import { Circle } from 'styled-system/jsx'
+  import { Circle } from "styled-system/jsx";
   const CustomCircle = ({ children, ...props }) => {
-    return <Circle {...props}>{children}</Circle>
-  }
+    return <Circle {...props}>{children}</Circle>;
+  };
   ```
 
   To track the `CustomCircle` component, you can now use the `jsx` property.
 
   ```js
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     patterns: {
       extend: {
         circle: {
-          jsx: ['CustomCircle'],
+          jsx: ["CustomCircle"],
         },
       },
     },
-  })
+  });
   ```
 
 ### Patch Changes
@@ -2589,9 +2642,17 @@
   ```tsx
   const ComponentWithMultipleRecipes = ({ variant }) => {
     return (
-      <button className={cx(pinkRecipe({ variant }), greenRecipe({ variant }), blueRecipe({ variant }))}>Hello</button>
-    )
-  }
+      <button
+        className={cx(
+          pinkRecipe({ variant }),
+          greenRecipe({ variant }),
+          blueRecipe({ variant }),
+        )}
+      >
+        Hello
+      </button>
+    );
+  };
   ```
 
   Given a `panda.config.ts` with recipes each including a common `jsx` tag name, such as:
@@ -2658,7 +2719,7 @@
   ```ts
   staticCss: {
     recipes: {
-      button: [{ size: ['*'], shape: ['*'] }]
+      button: [{ size: ["*"], shape: ["*"] }];
     }
   }
   ```
@@ -2668,7 +2729,7 @@
   ```ts
   staticCss: {
     recipes: {
-      button: ['*']
+      button: ["*"];
     }
   }
   ```
@@ -2704,12 +2765,12 @@
 - 5b344b9c: Add support for disabling shorthand props
 
   ```ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
     shorthands: false,
-  })
+  });
   ```
 
 ### Patch Changes
@@ -2811,11 +2872,11 @@ This hook is called right before writing the codegen files to disk. You can use
 export default defineConfig({
   // ...
   hooks: {
-    'codegen:prepare': ({ artifacts, changed }) => {
+    "codegen:prepare": ({ artifacts, changed }) => {
       // do something with the emitted js/d.ts files
     },
   },
-})
+});
 ```
 
 - d5977c24: - Add a `--logfile` flag to the `panda`, `panda codegen`, `panda cssgen` and `panda debug` commands.
@@ -2832,11 +2893,11 @@ export default defineConfig({
   ```js
   module.exports = {
     plugins: {
-      '@pandacss/dev/postcss': {
-        logfile: './logs/panda.log',
+      "@pandacss/dev/postcss": {
+        logfile: "./logs/panda.log",
       },
     },
-  }
+  };
   ```
 
 - Updated dependencies [74485ef1]
@@ -2875,9 +2936,9 @@ export default defineConfig({
 
   ```ts
   css({
-    bg: 'red.300/40',
-    color: 'white',
-  })
+    bg: "red.300/40",
+    color: "white",
+  });
   ```
 
   This will generate:
@@ -2885,7 +2946,11 @@ export default defineConfig({
   ```css
   @layer utilities {
     .bg_red\.300\/40 {
-      --mix-background: color-mix(in srgb, var(--colors-red-300) 40%, transparent);
+      --mix-background: color-mix(
+        in srgb,
+        var(--colors-red-300) 40%,
+        transparent
+      );
       background: var(--mix-background, var(--colors-red-300));
     }
 
@@ -2909,21 +2974,21 @@ export default defineConfig({
   export default defineConfig({
     utilities: {
       background: {
-        shorthand: 'bg',
-        className: 'bg',
-        values: 'colors',
+        shorthand: "bg",
+        className: "bg",
+        values: "colors",
         transform(value, args) {
-          const mix = args.utils.colorMix(value)
+          const mix = args.utils.colorMix(value);
           // This can happen if the value format is invalid (e.g. `bg: red.300/invalid` or `bg: red.300//10`)
-          if (mix.invalid) return { background: value }
+          if (mix.invalid) return { background: value };
 
           return {
             background: mix.value,
-          }
+          };
         },
       },
     },
-  })
+  });
   ```
 
   ***
@@ -2932,21 +2997,21 @@ export default defineConfig({
   property:
 
   ```ts
-  import type { PropertyTransform } from '@pandacss/types'
+  import type { PropertyTransform } from "@pandacss/types";
 
   export const createColorMixTransform =
     (prop: string): PropertyTransform =>
     (value, args) => {
-      const mix = args.utils.colorMix(value)
-      if (mix.invalid) return { [prop]: value }
+      const mix = args.utils.colorMix(value);
+      if (mix.invalid) return { [prop]: value };
 
-      const cssVar = '--mix-' + prop
+      const cssVar = "--mix-" + prop;
 
       return {
         [cssVar]: mix.value,
         [prop]: `var(${cssVar}, ${mix.color})`,
-      }
-    }
+      };
+    };
   ```
 
   then the same utility transform as above can be written like this:
@@ -2972,24 +3037,24 @@ export default defineConfig({
     patterns: {
       hstack: {
         properties: {
-          justify: { type: 'property', value: 'justifyContent' },
-          gap: { type: 'property', value: 'gap' },
+          justify: { type: "property", value: "justifyContent" },
+          gap: { type: "property", value: "gap" },
         },
         // you can also use a token like '10'
-        defaultValues: { gap: '40px' },
+        defaultValues: { gap: "40px" },
         transform(props) {
-          const { justify, gap, ...rest } = props
+          const { justify, gap, ...rest } = props;
           return {
-            display: 'flex',
-            alignItems: 'center',
+            display: "flex",
+            alignItems: "center",
             justifyContent: justify,
             gap,
             ...rest,
-          }
+          };
         },
       },
     },
-  })
+  });
   ```
 
 - 250b4d11: ### Container Query Theme
@@ -3003,34 +3068,34 @@ export default defineConfig({
     // ...
     theme: {
       extend: {
-        containerNames: ['sidebar', 'content'],
+        containerNames: ["sidebar", "content"],
         containerSizes: {
-          xs: '40em',
-          sm: '60em',
-          md: '80em',
+          xs: "40em",
+          sm: "60em",
+          md: "80em",
         },
       },
     },
-  })
+  });
   ```
 
   The default container sizes in the `@pandacss/preset-panda` preset are shown below:
 
   ```ts
   export const containerSizes = {
-    xs: '320px',
-    sm: '384px',
-    md: '448px',
-    lg: '512px',
-    xl: '576px',
-    '2xl': '672px',
-    '3xl': '768px',
-    '4xl': '896px',
-    '5xl': '1024px',
-    '6xl': '1152px',
-    '7xl': '1280px',
-    '8xl': '1440px',
-  }
+    xs: "320px",
+    sm: "384px",
+    md: "448px",
+    lg: "512px",
+    xl: "576px",
+    "2xl": "672px",
+    "3xl": "768px",
+    "4xl": "896px",
+    "5xl": "1024px",
+    "6xl": "1152px",
+    "7xl": "1280px",
+    "8xl": "1440px",
+  };
   ```
 
   Then use them in your styles by referencing using `@<container-name>/<container-size>` syntax:
@@ -3114,10 +3179,10 @@ export default defineConfig({
   css({
     // ✅ this is fine now, will resolve to something like
     // `@container (min-width: 56em)`
-    '@container (min-width: {sizes.4xl})': {
-      color: 'green',
+    "@container (min-width: {sizes.4xl})": {
+      color: "green",
     },
-  })
+  });
   ```
 
   Fix an issue where the curly token references would not be escaped if the token path was not found.
@@ -3156,39 +3221,54 @@ export default defineConfig({
      * Called when the config is resolved, after all the presets are loaded and merged.
      * This is the first hook called, you can use it to tweak the config before the context is created.
      */
-    'config:resolved': (args: { conf: LoadConfigResult }) => MaybeAsyncReturn
+    "config:resolved": (args: { conf: LoadConfigResult }) => MaybeAsyncReturn;
     /**
      * Called when the Panda context has been created and the API is ready to be used.
      */
-    'context:created': (args: { ctx: ApiInterface; logger: LoggerInterface }) => void
+    "context:created": (args: {
+      ctx: ApiInterface;
+      logger: LoggerInterface;
+    }) => void;
     /**
      * Called when the config file or one of its dependencies (imports) has changed.
      */
-    'config:change': (args: { config: UserConfig }) => MaybeAsyncReturn
+    "config:change": (args: { config: UserConfig }) => MaybeAsyncReturn;
     /**
      * Called after reading the file content but before parsing it.
      * You can use this hook to transform the file content to a tsx-friendly syntax so that Panda's parser can parse it.
      * You can also use this hook to parse the file's content on your side using a custom parser, in this case you don't have to return anything.
      */
-    'parser:before': (args: { filePath: string; content: string }) => string | void
+    "parser:before": (args: {
+      filePath: string;
+      content: string;
+    }) => string | void;
     /**
      * Called after the file styles are extracted and processed into the resulting ParserResult object.
      * You can also use this hook to add your own extraction results from your custom parser to the ParserResult object.
      */
-    'parser:after': (args: { filePath: string; result: ParserResultInterface | undefined }) => void
+    "parser:after": (args: {
+      filePath: string;
+      result: ParserResultInterface | undefined;
+    }) => void;
     /**
      * Called after the codegen is completed
      */
-    'codegen:done': () => MaybeAsyncReturn
+    "codegen:done": () => MaybeAsyncReturn;
     /**
      * Called right before adding the design-system CSS (global, static, preflight, tokens, keyframes) to the final CSS
      * Called right before writing/injecting the final CSS (styles.css) that contains the design-system CSS and the parser CSS
      * You can use it to tweak the CSS content before it's written to disk or injected through the postcss plugin.
      */
-    'cssgen:done': (args: {
-      artifact: 'global' | 'static' | 'reset' | 'tokens' | 'keyframes' | 'styles.css'
-      content: string
-    }) => string | void
+    "cssgen:done": (args: {
+      artifact:
+        | "global"
+        | "static"
+        | "reset"
+        | "tokens"
+        | "keyframes"
+        | "styles.css";
+      content: string;
+    }) => string | void;
   }
   ```
 
@@ -3395,11 +3475,11 @@ export default defineConfig({
 - de282f60: Support token reference syntax when authoring styles object, text styles and layer styles.
 
   ```jsx
-  import { css } from '../styled-system/css'
+  import { css } from "../styled-system/css";
 
   const styles = css({
-    border: '2px solid {colors.primary}',
-  })
+    border: "2px solid {colors.primary}",
+  });
   ```
 
   This will resolve the token reference and convert it to css variables.
@@ -3419,18 +3499,18 @@ export default defineConfig({
   ```jsx
   const styles = css({
     // token reference syntax
-    border: '2px solid {colors.primary}',
+    border: "2px solid {colors.primary}",
     // token function syntax
-    border: '2px solid token(colors.primary)',
-  })
+    border: "2px solid token(colors.primary)",
+  });
   ```
 
   However, The `token(...)` syntax allows you to set a fallback value.
 
   ```jsx
   const styles = css({
-    border: '2px solid token(colors.primary, red)',
-  })
+    border: "2px solid token(colors.primary, red)",
+  });
   ```
 
 ### Patch Changes
@@ -3441,8 +3521,8 @@ export default defineConfig({
   ```jsx
   css({
     // This didn't work, but now it does
-    base: { color: 'blue' },
-  })
+    base: { color: "blue" },
+  });
   ```
 
 - Updated dependencies [59fd291c]
@@ -3501,38 +3581,38 @@ export default defineConfig({
 
   ```ts
   const card = defineRecipe({
-    className: 'card',
-    base: { color: 'white' },
+    className: "card",
+    base: { color: "white" },
     variants: {
       size: {
-        small: { fontSize: '14px' },
-        large: { fontSize: '18px' },
+        small: { fontSize: "14px" },
+        large: { fontSize: "18px" },
       },
       visual: {
-        primary: { backgroundColor: 'blue' },
-        secondary: { backgroundColor: 'gray' },
+        primary: { backgroundColor: "blue" },
+        secondary: { backgroundColor: "gray" },
       },
     },
-  })
+  });
 
   export default defineConfig({
     // ...
     staticCss: {
       recipes: {
-        card: ['*'], // this
+        card: ["*"], // this
 
         // was equivalent to:
         card: [
           // notice how `responsive: true` was implicitly added
-          { size: ['*'], responsive: true },
-          { visual: ['*'], responsive: true },
+          { size: ["*"], responsive: true },
+          { visual: ["*"], responsive: true },
         ],
 
         //   will now correctly be equivalent to:
-        card: [{ size: ['*'] }, { visual: ['*'] }],
+        card: [{ size: ["*"] }, { visual: ["*"] }],
       },
     },
-  })
+  });
   ```
 
   Here's the diff in the generated CSS:
@@ -3658,30 +3738,30 @@ export default defineConfig({
   another file, such as when using `Ark-UI` like `import { comboboxAnatomy } from '@ark-ui/anatomy'`
 
   ```ts
-  import { sva } from '../styled-system/css'
-  import { slots } from './slots'
+  import { sva } from "../styled-system/css";
+  import { slots } from "./slots";
 
   const card = sva({
     slots, // ❌ did NOT work -> ✅ will now work as expected
     base: {
       root: {
-        p: '6',
-        m: '4',
-        w: 'md',
-        boxShadow: 'md',
-        borderRadius: 'md',
-        _dark: { bg: '#262626', color: 'white' },
+        p: "6",
+        m: "4",
+        w: "md",
+        boxShadow: "md",
+        borderRadius: "md",
+        _dark: { bg: "#262626", color: "white" },
       },
       content: {
-        textStyle: 'lg',
+        textStyle: "lg",
       },
       title: {
-        textStyle: 'xl',
-        fontWeight: 'semibold',
-        pb: '2',
+        textStyle: "xl",
+        fontWeight: "semibold",
+        pb: "2",
       },
     },
-  })
+  });
   ```
 
 - 840ed66b: Fix an issue with config change detection when using a custom `config.slotRecipes[xxx].jsx` array
@@ -3738,18 +3818,18 @@ export default defineConfig({
   and suffixing with `]`, e.g. writing `[123px]` as a value will bypass the token validation.
 
   ```ts
-  import { css } from '../styled-system/css'
+  import { css } from "../styled-system/css";
 
   css({
     // @ts-expect-error TS will throw when using from strictTokens: true
-    color: '#fff',
+    color: "#fff",
     // @ts-expect-error TS will throw when using from strictTokens: true
-    width: '100px',
+    width: "100px",
 
     // ✅ but this is now allowed:
-    bgColor: '[rgb(51 155 240)]',
-    fontSize: '[12px]',
-  })
+    bgColor: "[rgb(51 155 240)]",
+    fontSize: "[12px]",
+  });
   ```
 
 ### Patch Changes
@@ -3762,8 +3842,8 @@ export default defineConfig({
     // here the content property is a valid CSS property, so Panda will try to generate the CSS for it
     // but since it's an URL, it would produce invalid CSS
     // we now check if the property value is an URL and skip it if needed
-    return <CopyButton content="https://www.buymeacoffee.com/grizzlycodes" />
-  }
+    return <CopyButton content="https://www.buymeacoffee.com/grizzlycodes" />;
+  };
   ```
 
 - d81dcbe6: - Fix an issue where recipe variants that clash with utility shorthand don't get generated due to the
@@ -3772,36 +3852,36 @@ export default defineConfig({
 - 105f74ce: Add a way to specify a recipe's `staticCss` options from inside a recipe config, e.g.:
 
   ```js
-  import { defineRecipe } from '@pandacss/dev'
+  import { defineRecipe } from "@pandacss/dev";
 
   const card = defineRecipe({
-    className: 'card',
-    base: { color: 'white' },
+    className: "card",
+    base: { color: "white" },
     variants: {
       size: {
-        small: { fontSize: '14px' },
-        large: { fontSize: '18px' },
+        small: { fontSize: "14px" },
+        large: { fontSize: "18px" },
       },
     },
-    staticCss: [{ size: ['*'] }],
-  })
+    staticCss: [{ size: ["*"] }],
+  });
   ```
 
   would be the equivalent of defining it inside the main config:
 
   ```js
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
     staticCss: {
       recipes: {
         card: {
-          size: ['*'],
+          size: ["*"],
         },
       },
     },
-  })
+  });
   ```
 
 - Updated dependencies [26e6051a]
@@ -3833,13 +3913,13 @@ export default defineConfig({
 
   ```ts
   css({
-    '@container (min-width: token(sizes.xl))': {
-      color: 'green.300',
+    "@container (min-width: token(sizes.xl))": {
+      color: "green.300",
     },
-    '@media (min-width: token(sizes.2xl))': {
-      color: 'red.300',
+    "@media (min-width: token(sizes.2xl))": {
+      color: "red.300",
     },
-  })
+  });
   ```
 
 - Updated dependencies [24ee49a5]
@@ -3891,14 +3971,14 @@ export default defineConfig({
 - 8c76cd0f: - Fix issue where `hideBelow` breakpoints are inclusive of the specified breakpoints
 
   ```jsx
-  css({ hideBelow: 'lg' })
+  css({ hideBelow: "lg" });
   // => @media screen and (max-width: 63.9975em) { background: red; }
   ```
 
   - Support arbitrary breakpoints in `hideBelow` and `hideFrom` utilities
 
   ```jsx
-  css({ hideFrom: '800px' })
+  css({ hideFrom: "800px" });
   // => @media screen and (min-width: 800px) { background: red; }
   ```
 
@@ -3984,10 +4064,10 @@ export default defineConfig({
 
   ```ts
   const button = defineSlotRecipe({
-    className: 'button',
-    slots: ['root', 'icon', 'label'],
+    className: "button",
+    slots: ["root", "icon", "label"],
     // ...
-  })
+  });
   ```
 
   will have a default `jsx` property of: `[Button, Button.Root, Button.Icon, Button.Label]`
@@ -4044,42 +4124,42 @@ export default defineConfig({
 
   ```ts
   export default defineConfig({
-    outdir: './outdir',
+    outdir: "./outdir",
     importMap: {
-      css: '#panda/styled-system/css',
-      recipes: '#panda/styled-system/recipes',
-      patterns: '#panda/styled-system/patterns',
-      jsx: '#panda/styled-system/jsx',
+      css: "#panda/styled-system/css",
+      recipes: "#panda/styled-system/recipes",
+      patterns: "#panda/styled-system/patterns",
+      jsx: "#panda/styled-system/jsx",
     },
-  })
+  });
   ```
 
   Or you could also make your outdir an actual package from your monorepo:
 
   ```ts
   export default defineConfig({
-    outdir: '../packages/styled-system',
+    outdir: "../packages/styled-system",
     importMap: {
-      css: '@monorepo/styled-system',
-      recipes: '@monorepo/styled-system',
-      patterns: '@monorepo/styled-system',
-      jsx: '@monorepo/styled-system',
+      css: "@monorepo/styled-system",
+      recipes: "@monorepo/styled-system",
+      patterns: "@monorepo/styled-system",
+      jsx: "@monorepo/styled-system",
     },
-  })
+  });
   ```
 
   Working with tsconfig paths aliases is easy:
 
   ```ts
   export default defineConfig({
-    outdir: 'styled-system',
+    outdir: "styled-system",
     importMap: {
-      css: 'styled-system/css',
-      recipes: 'styled-system/recipes',
-      patterns: 'styled-system/patterns',
-      jsx: 'styled-system/jsx',
+      css: "styled-system/css",
+      recipes: "styled-system/recipes",
+      patterns: "styled-system/patterns",
+      jsx: "styled-system/jsx",
     },
-  })
+  });
   ```
 
 - Updated dependencies [95b06bb1]
@@ -4109,13 +4189,13 @@ export default defineConfig({
 - 848936e0: Allow referencing tokens with the `token()` function in media queries or any other CSS at-rule.
 
   ```js
-  import { css } from '../styled-system/css'
+  import { css } from "../styled-system/css";
 
   const className = css({
-    '@media screen and (min-width: token(sizes.4xl))': {
-      color: 'green.400',
+    "@media screen and (min-width: token(sizes.4xl))": {
+      color: "green.400",
     },
-  })
+  });
   ```
 
 - Updated dependencies [26f6982c]
@@ -4168,7 +4248,7 @@ export default defineConfig({
 
   ```css
   * {
-    color: token('colors.magenta', pink);
+    color: token("colors.magenta", pink);
   }
   ```
 
@@ -4277,12 +4357,12 @@ export default defineConfig({
   **Definition**
 
   ```jsx
-  import { sva } from 'styled-system/css'
+  import { sva } from "styled-system/css";
 
   const button = sva({
-    slots: ['label', 'icon'],
+    slots: ["label", "icon"],
     base: {
-      label: { color: 'red', textDecoration: 'underline' },
+      label: { color: "red", textDecoration: "underline" },
     },
     variants: {
       rounded: {
@@ -4290,33 +4370,33 @@ export default defineConfig({
       },
       size: {
         sm: {
-          label: { fontSize: 'sm' },
-          icon: { fontSize: 'sm' },
+          label: { fontSize: "sm" },
+          icon: { fontSize: "sm" },
         },
         lg: {
-          label: { fontSize: 'lg' },
-          icon: { fontSize: 'lg', color: 'pink' },
+          label: { fontSize: "lg" },
+          icon: { fontSize: "lg", color: "pink" },
         },
       },
     },
     defaultVariants: {
-      size: 'sm',
+      size: "sm",
     },
-  })
+  });
   ```
 
   **Usage**
 
   ```jsx
   export function App() {
-    const btnClass = button({ size: 'lg', rounded: true })
+    const btnClass = button({ size: "lg", rounded: true });
 
     return (
       <button>
         <p class={btnClass.label}> Label</p>
         <p class={btnClass.icon}> Icon</p>
       </button>
-    )
+    );
   }
   ```
 
@@ -4365,26 +4445,26 @@ export default defineConfig({
   Update the `jsx` property to be used for advanced tracking of custom pattern components.
 
   ```jsx
-  import { Circle } from 'styled-system/jsx'
+  import { Circle } from "styled-system/jsx";
   const CustomCircle = ({ children, ...props }) => {
-    return <Circle {...props}>{children}</Circle>
-  }
+    return <Circle {...props}>{children}</Circle>;
+  };
   ```
 
   To track the `CustomCircle` component, you can now use the `jsx` property.
 
   ```js
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     patterns: {
       extend: {
         circle: {
-          jsx: ['CustomCircle'],
+          jsx: ["CustomCircle"],
         },
       },
     },
-  })
+  });
   ```
 
 ### Patch Changes
@@ -4448,9 +4528,17 @@ export default defineConfig({
   ```tsx
   const ComponentWithMultipleRecipes = ({ variant }) => {
     return (
-      <button className={cx(pinkRecipe({ variant }), greenRecipe({ variant }), blueRecipe({ variant }))}>Hello</button>
-    )
-  }
+      <button
+        className={cx(
+          pinkRecipe({ variant }),
+          greenRecipe({ variant }),
+          blueRecipe({ variant }),
+        )}
+      >
+        Hello
+      </button>
+    );
+  };
   ```
 
   Given a `panda.config.ts` with recipes each including a common `jsx` tag name, such as:
@@ -4517,7 +4605,7 @@ export default defineConfig({
   ```ts
   staticCss: {
     recipes: {
-      button: [{ size: ['*'], shape: ['*'] }]
+      button: [{ size: ["*"], shape: ["*"] }];
     }
   }
   ```
@@ -4527,7 +4615,7 @@ export default defineConfig({
   ```ts
   staticCss: {
     recipes: {
-      button: ['*']
+      button: ["*"];
     }
   }
   ```
@@ -4563,12 +4651,12 @@ export default defineConfig({
 - 5b344b9c: Add support for disabling shorthand props
 
   ```ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
     shorthands: false,
-  })
+  });
   ```
 
 ### Patch Changes
@@ -4672,20 +4760,20 @@ Will now allow you to use the following syntax for token path:
   export default defaultConfig({
     conditions: {
       extend: {
-        supportHover: ['@media (hover: hover) and (pointer: fine)', '&:hover'],
+        supportHover: ["@media (hover: hover) and (pointer: fine)", "&:hover"],
       },
     },
-  })
+  });
   ```
 
   ```ts
-  import { css } from '../styled-system/css'
+  import { css } from "../styled-system/css";
 
   css({
     _supportHover: {
-      color: 'red',
+      color: "red",
     },
-  })
+  });
   ```
 
   will generate the following CSS:
@@ -4701,25 +4789,25 @@ Will now allow you to use the following syntax for token path:
 - 31071ba: Fix an issue for token names starting with '0'
 
   ```ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     theme: {
       tokens: {
         spacing: {
-          '025': {
-            value: '0.125rem',
+          "025": {
+            value: "0.125rem",
           },
         },
       },
     },
-  })
+  });
   ```
 
   and then using it like
 
   ```ts
-  css({ margin: '025' })
+  css({ margin: "025" });
   ```
 
   This would not generate the expected CSS because the parser would try to parse `025` as a number (`25`) instead of
@@ -4730,11 +4818,11 @@ Will now allow you to use the following syntax for token path:
   - Allow using multiple aliases for the same identifier for the `/css` entrypoints just like `/patterns` and `/recipes`
 
   ```ts
-  import { css } from '../styled-system/css'
-  import { css as css2 } from '../styled-system/css'
+  import { css } from "../styled-system/css";
+  import { css as css2 } from "../styled-system/css";
 
-  css({ display: 'flex' })
-  css2({ flexDirection: 'column' }) // this wasn't working before, now it does
+  css({ display: "flex" });
+  css2({ flexDirection: "column" }); // this wasn't working before, now it does
   ```
 
 - Updated dependencies [a032375]
@@ -4778,10 +4866,10 @@ Will now allow you to use the following syntax for token path:
 
   ```ts
   css({
-    padding: '1px',
-    paddingTop: '3px',
-    paddingBottom: '4px',
-  })
+    padding: "1px",
+    paddingTop: "3px",
+    paddingBottom: "4px",
+  });
   ```
 
   Will now always generate the following css:
@@ -4842,16 +4930,17 @@ Will now allow you to use the following syntax for token path:
   export default defineConfig({
     // ...
     hooks: {
-      'parser:before': ({ configure }) => {
+      "parser:before": ({ configure }) => {
         configure({
           // ignore the Select.Content entirely
-          matchTag: (tag) => tag !== 'Select.Content',
+          matchTag: (tag) => tag !== "Select.Content",
           // ...or specifically ignore the `position` property
-          matchTagProp: (tag, prop) => tag === 'Select.Content' && prop !== 'position',
-        })
+          matchTagProp: (tag, prop) =>
+            tag === "Select.Content" && prop !== "position",
+        });
       },
     },
-  })
+  });
   ```
 
 - Updated dependencies [6b829cab]
@@ -4919,9 +5008,9 @@ Will now allow you to use the following syntax for token path:
 
   ```ts
   css({
-    bg: 'red.300/40',
-    color: 'white',
-  })
+    bg: "red.300/40",
+    color: "white",
+  });
   ```
 
   This will generate:
@@ -4929,7 +5018,11 @@ Will now allow you to use the following syntax for token path:
   ```css
   @layer utilities {
     .bg_red\.300\/40 {
-      --mix-background: color-mix(in srgb, var(--colors-red-300) 40%, transparent);
+      --mix-background: color-mix(
+        in srgb,
+        var(--colors-red-300) 40%,
+        transparent
+      );
       background: var(--mix-background, var(--colors-red-300));
     }
 
@@ -4953,21 +5046,21 @@ Will now allow you to use the following syntax for token path:
   export default defineConfig({
     utilities: {
       background: {
-        shorthand: 'bg',
-        className: 'bg',
-        values: 'colors',
+        shorthand: "bg",
+        className: "bg",
+        values: "colors",
         transform(value, args) {
-          const mix = args.utils.colorMix(value)
+          const mix = args.utils.colorMix(value);
           // This can happen if the value format is invalid (e.g. `bg: red.300/invalid` or `bg: red.300//10`)
-          if (mix.invalid) return { background: value }
+          if (mix.invalid) return { background: value };
 
           return {
             background: mix.value,
-          }
+          };
         },
       },
     },
-  })
+  });
   ```
 
   ***
@@ -4976,21 +5069,21 @@ Will now allow you to use the following syntax for token path:
   property:
 
   ```ts
-  import type { PropertyTransform } from '@pandacss/types'
+  import type { PropertyTransform } from "@pandacss/types";
 
   export const createColorMixTransform =
     (prop: string): PropertyTransform =>
     (value, args) => {
-      const mix = args.utils.colorMix(value)
-      if (mix.invalid) return { [prop]: value }
+      const mix = args.utils.colorMix(value);
+      if (mix.invalid) return { [prop]: value };
 
-      const cssVar = '--mix-' + prop
+      const cssVar = "--mix-" + prop;
 
       return {
         [cssVar]: mix.value,
         [prop]: `var(${cssVar}, ${mix.color})`,
-      }
-    }
+      };
+    };
   ```
 
   then the same utility transform as above can be written like this:
@@ -5016,24 +5109,24 @@ Will now allow you to use the following syntax for token path:
     patterns: {
       hstack: {
         properties: {
-          justify: { type: 'property', value: 'justifyContent' },
-          gap: { type: 'property', value: 'gap' },
+          justify: { type: "property", value: "justifyContent" },
+          gap: { type: "property", value: "gap" },
         },
         // you can also use a token like '10'
-        defaultValues: { gap: '40px' },
+        defaultValues: { gap: "40px" },
         transform(props) {
-          const { justify, gap, ...rest } = props
+          const { justify, gap, ...rest } = props;
           return {
-            display: 'flex',
-            alignItems: 'center',
+            display: "flex",
+            alignItems: "center",
             justifyContent: justify,
             gap,
             ...rest,
-          }
+          };
         },
       },
     },
-  })
+  });
   ```
 
 - 250b4d11: ### Container Query Theme
@@ -5047,34 +5140,34 @@ Will now allow you to use the following syntax for token path:
     // ...
     theme: {
       extend: {
-        containerNames: ['sidebar', 'content'],
+        containerNames: ["sidebar", "content"],
         containerSizes: {
-          xs: '40em',
-          sm: '60em',
-          md: '80em',
+          xs: "40em",
+          sm: "60em",
+          md: "80em",
         },
       },
     },
-  })
+  });
   ```
 
   The default container sizes in the `@pandacss/preset-panda` preset are shown below:
 
   ```ts
   export const containerSizes = {
-    xs: '320px',
-    sm: '384px',
-    md: '448px',
-    lg: '512px',
-    xl: '576px',
-    '2xl': '672px',
-    '3xl': '768px',
-    '4xl': '896px',
-    '5xl': '1024px',
-    '6xl': '1152px',
-    '7xl': '1280px',
-    '8xl': '1440px',
-  }
+    xs: "320px",
+    sm: "384px",
+    md: "448px",
+    lg: "512px",
+    xl: "576px",
+    "2xl": "672px",
+    "3xl": "768px",
+    "4xl": "896px",
+    "5xl": "1024px",
+    "6xl": "1152px",
+    "7xl": "1280px",
+    "8xl": "1440px",
+  };
   ```
 
   Then use them in your styles by referencing using `@<container-name>/<container-size>` syntax:
@@ -5158,10 +5251,10 @@ Will now allow you to use the following syntax for token path:
   css({
     // ✅ this is fine now, will resolve to something like
     // `@container (min-width: 56em)`
-    '@container (min-width: {sizes.4xl})': {
-      color: 'green',
+    "@container (min-width: {sizes.4xl})": {
+      color: "green",
     },
-  })
+  });
   ```
 
   Fix an issue where the curly token references would not be escaped if the token path was not found.
@@ -5200,39 +5293,54 @@ Will now allow you to use the following syntax for token path:
      * Called when the config is resolved, after all the presets are loaded and merged.
      * This is the first hook called, you can use it to tweak the config before the context is created.
      */
-    'config:resolved': (args: { conf: LoadConfigResult }) => MaybeAsyncReturn
+    "config:resolved": (args: { conf: LoadConfigResult }) => MaybeAsyncReturn;
     /**
      * Called when the Panda context has been created and the API is ready to be used.
      */
-    'context:created': (args: { ctx: ApiInterface; logger: LoggerInterface }) => void
+    "context:created": (args: {
+      ctx: ApiInterface;
+      logger: LoggerInterface;
+    }) => void;
     /**
      * Called when the config file or one of its dependencies (imports) has changed.
      */
-    'config:change': (args: { config: UserConfig }) => MaybeAsyncReturn
+    "config:change": (args: { config: UserConfig }) => MaybeAsyncReturn;
     /**
      * Called after reading the file content but before parsing it.
      * You can use this hook to transform the file content to a tsx-friendly syntax so that Panda's parser can parse it.
      * You can also use this hook to parse the file's content on your side using a custom parser, in this case you don't have to return anything.
      */
-    'parser:before': (args: { filePath: string; content: string }) => string | void
+    "parser:before": (args: {
+      filePath: string;
+      content: string;
+    }) => string | void;
     /**
      * Called after the file styles are extracted and processed into the resulting ParserResult object.
      * You can also use this hook to add your own extraction results from your custom parser to the ParserResult object.
      */
-    'parser:after': (args: { filePath: string; result: ParserResultInterface | undefined }) => void
+    "parser:after": (args: {
+      filePath: string;
+      result: ParserResultInterface | undefined;
+    }) => void;
     /**
      * Called after the codegen is completed
      */
-    'codegen:done': () => MaybeAsyncReturn
+    "codegen:done": () => MaybeAsyncReturn;
     /**
      * Called right before adding the design-system CSS (global, static, preflight, tokens, keyframes) to the final CSS
      * Called right before writing/injecting the final CSS (styles.css) that contains the design-system CSS and the parser CSS
      * You can use it to tweak the CSS content before it's written to disk or injected through the postcss plugin.
      */
-    'cssgen:done': (args: {
-      artifact: 'global' | 'static' | 'reset' | 'tokens' | 'keyframes' | 'styles.css'
-      content: string
-    }) => string | void
+    "cssgen:done": (args: {
+      artifact:
+        | "global"
+        | "static"
+        | "reset"
+        | "tokens"
+        | "keyframes"
+        | "styles.css";
+      content: string;
+    }) => string | void;
   }
   ```
 
@@ -5439,11 +5547,11 @@ Will now allow you to use the following syntax for token path:
 - de282f60: Support token reference syntax when authoring styles object, text styles and layer styles.
 
   ```jsx
-  import { css } from '../styled-system/css'
+  import { css } from "../styled-system/css";
 
   const styles = css({
-    border: '2px solid {colors.primary}',
-  })
+    border: "2px solid {colors.primary}",
+  });
   ```
 
   This will resolve the token reference and convert it to css variables.
@@ -5463,18 +5571,18 @@ Will now allow you to use the following syntax for token path:
   ```jsx
   const styles = css({
     // token reference syntax
-    border: '2px solid {colors.primary}',
+    border: "2px solid {colors.primary}",
     // token function syntax
-    border: '2px solid token(colors.primary)',
-  })
+    border: "2px solid token(colors.primary)",
+  });
   ```
 
   However, The `token(...)` syntax allows you to set a fallback value.
 
   ```jsx
   const styles = css({
-    border: '2px solid token(colors.primary, red)',
-  })
+    border: "2px solid token(colors.primary, red)",
+  });
   ```
 
 ### Patch Changes
@@ -5485,8 +5593,8 @@ Will now allow you to use the following syntax for token path:
   ```jsx
   css({
     // This didn't work, but now it does
-    base: { color: 'blue' },
-  })
+    base: { color: "blue" },
+  });
   ```
 
 - Updated dependencies [59fd291c]
@@ -5545,38 +5653,38 @@ Will now allow you to use the following syntax for token path:
 
   ```ts
   const card = defineRecipe({
-    className: 'card',
-    base: { color: 'white' },
+    className: "card",
+    base: { color: "white" },
     variants: {
       size: {
-        small: { fontSize: '14px' },
-        large: { fontSize: '18px' },
+        small: { fontSize: "14px" },
+        large: { fontSize: "18px" },
       },
       visual: {
-        primary: { backgroundColor: 'blue' },
-        secondary: { backgroundColor: 'gray' },
+        primary: { backgroundColor: "blue" },
+        secondary: { backgroundColor: "gray" },
       },
     },
-  })
+  });
 
   export default defineConfig({
     // ...
     staticCss: {
       recipes: {
-        card: ['*'], // this
+        card: ["*"], // this
 
         // was equivalent to:
         card: [
           // notice how `responsive: true` was implicitly added
-          { size: ['*'], responsive: true },
-          { visual: ['*'], responsive: true },
+          { size: ["*"], responsive: true },
+          { visual: ["*"], responsive: true },
         ],
 
         //   will now correctly be equivalent to:
-        card: [{ size: ['*'] }, { visual: ['*'] }],
+        card: [{ size: ["*"] }, { visual: ["*"] }],
       },
     },
-  })
+  });
   ```
 
   Here's the diff in the generated CSS:
@@ -5702,30 +5810,30 @@ Will now allow you to use the following syntax for token path:
   another file, such as when using `Ark-UI` like `import { comboboxAnatomy } from '@ark-ui/anatomy'`
 
   ```ts
-  import { sva } from '../styled-system/css'
-  import { slots } from './slots'
+  import { sva } from "../styled-system/css";
+  import { slots } from "./slots";
 
   const card = sva({
     slots, // ❌ did NOT work -> ✅ will now work as expected
     base: {
       root: {
-        p: '6',
-        m: '4',
-        w: 'md',
-        boxShadow: 'md',
-        borderRadius: 'md',
-        _dark: { bg: '#262626', color: 'white' },
+        p: "6",
+        m: "4",
+        w: "md",
+        boxShadow: "md",
+        borderRadius: "md",
+        _dark: { bg: "#262626", color: "white" },
       },
       content: {
-        textStyle: 'lg',
+        textStyle: "lg",
       },
       title: {
-        textStyle: 'xl',
-        fontWeight: 'semibold',
-        pb: '2',
+        textStyle: "xl",
+        fontWeight: "semibold",
+        pb: "2",
       },
     },
-  })
+  });
   ```
 
 - 840ed66b: Fix an issue with config change detection when using a custom `config.slotRecipes[xxx].jsx` array
@@ -5782,18 +5890,18 @@ Will now allow you to use the following syntax for token path:
   and suffixing with `]`, e.g. writing `[123px]` as a value will bypass the token validation.
 
   ```ts
-  import { css } from '../styled-system/css'
+  import { css } from "../styled-system/css";
 
   css({
     // @ts-expect-error TS will throw when using from strictTokens: true
-    color: '#fff',
+    color: "#fff",
     // @ts-expect-error TS will throw when using from strictTokens: true
-    width: '100px',
+    width: "100px",
 
     // ✅ but this is now allowed:
-    bgColor: '[rgb(51 155 240)]',
-    fontSize: '[12px]',
-  })
+    bgColor: "[rgb(51 155 240)]",
+    fontSize: "[12px]",
+  });
   ```
 
 ### Patch Changes
@@ -5806,8 +5914,8 @@ Will now allow you to use the following syntax for token path:
     // here the content property is a valid CSS property, so Panda will try to generate the CSS for it
     // but since it's an URL, it would produce invalid CSS
     // we now check if the property value is an URL and skip it if needed
-    return <CopyButton content="https://www.buymeacoffee.com/grizzlycodes" />
-  }
+    return <CopyButton content="https://www.buymeacoffee.com/grizzlycodes" />;
+  };
   ```
 
 - d81dcbe6: - Fix an issue where recipe variants that clash with utility shorthand don't get generated due to the
@@ -5816,36 +5924,36 @@ Will now allow you to use the following syntax for token path:
 - 105f74ce: Add a way to specify a recipe's `staticCss` options from inside a recipe config, e.g.:
 
   ```js
-  import { defineRecipe } from '@pandacss/dev'
+  import { defineRecipe } from "@pandacss/dev";
 
   const card = defineRecipe({
-    className: 'card',
-    base: { color: 'white' },
+    className: "card",
+    base: { color: "white" },
     variants: {
       size: {
-        small: { fontSize: '14px' },
-        large: { fontSize: '18px' },
+        small: { fontSize: "14px" },
+        large: { fontSize: "18px" },
       },
     },
-    staticCss: [{ size: ['*'] }],
-  })
+    staticCss: [{ size: ["*"] }],
+  });
   ```
 
   would be the equivalent of defining it inside the main config:
 
   ```js
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
     staticCss: {
       recipes: {
         card: {
-          size: ['*'],
+          size: ["*"],
         },
       },
     },
-  })
+  });
   ```
 
 - Updated dependencies [26e6051a]
@@ -5877,13 +5985,13 @@ Will now allow you to use the following syntax for token path:
 
   ```ts
   css({
-    '@container (min-width: token(sizes.xl))': {
-      color: 'green.300',
+    "@container (min-width: token(sizes.xl))": {
+      color: "green.300",
     },
-    '@media (min-width: token(sizes.2xl))': {
-      color: 'red.300',
+    "@media (min-width: token(sizes.2xl))": {
+      color: "red.300",
     },
-  })
+  });
   ```
 
 - Updated dependencies [24ee49a5]
@@ -5935,14 +6043,14 @@ Will now allow you to use the following syntax for token path:
 - 8c76cd0f: - Fix issue where `hideBelow` breakpoints are inclusive of the specified breakpoints
 
   ```jsx
-  css({ hideBelow: 'lg' })
+  css({ hideBelow: "lg" });
   // => @media screen and (max-width: 63.9975em) { background: red; }
   ```
 
   - Support arbitrary breakpoints in `hideBelow` and `hideFrom` utilities
 
   ```jsx
-  css({ hideFrom: '800px' })
+  css({ hideFrom: "800px" });
   // => @media screen and (min-width: 800px) { background: red; }
   ```
 
@@ -6028,10 +6136,10 @@ Will now allow you to use the following syntax for token path:
 
   ```ts
   const button = defineSlotRecipe({
-    className: 'button',
-    slots: ['root', 'icon', 'label'],
+    className: "button",
+    slots: ["root", "icon", "label"],
     // ...
-  })
+  });
   ```
 
   will have a default `jsx` property of: `[Button, Button.Root, Button.Icon, Button.Label]`
@@ -6088,42 +6196,42 @@ Will now allow you to use the following syntax for token path:
 
   ```ts
   export default defineConfig({
-    outdir: './outdir',
+    outdir: "./outdir",
     importMap: {
-      css: '#panda/styled-system/css',
-      recipes: '#panda/styled-system/recipes',
-      patterns: '#panda/styled-system/patterns',
-      jsx: '#panda/styled-system/jsx',
+      css: "#panda/styled-system/css",
+      recipes: "#panda/styled-system/recipes",
+      patterns: "#panda/styled-system/patterns",
+      jsx: "#panda/styled-system/jsx",
     },
-  })
+  });
   ```
 
   Or you could also make your outdir an actual package from your monorepo:
 
   ```ts
   export default defineConfig({
-    outdir: '../packages/styled-system',
+    outdir: "../packages/styled-system",
     importMap: {
-      css: '@monorepo/styled-system',
-      recipes: '@monorepo/styled-system',
-      patterns: '@monorepo/styled-system',
-      jsx: '@monorepo/styled-system',
+      css: "@monorepo/styled-system",
+      recipes: "@monorepo/styled-system",
+      patterns: "@monorepo/styled-system",
+      jsx: "@monorepo/styled-system",
     },
-  })
+  });
   ```
 
   Working with tsconfig paths aliases is easy:
 
   ```ts
   export default defineConfig({
-    outdir: 'styled-system',
+    outdir: "styled-system",
     importMap: {
-      css: 'styled-system/css',
-      recipes: 'styled-system/recipes',
-      patterns: 'styled-system/patterns',
-      jsx: 'styled-system/jsx',
+      css: "styled-system/css",
+      recipes: "styled-system/recipes",
+      patterns: "styled-system/patterns",
+      jsx: "styled-system/jsx",
     },
-  })
+  });
   ```
 
 - Updated dependencies [95b06bb1]
@@ -6153,13 +6261,13 @@ Will now allow you to use the following syntax for token path:
 - 848936e0: Allow referencing tokens with the `token()` function in media queries or any other CSS at-rule.
 
   ```js
-  import { css } from '../styled-system/css'
+  import { css } from "../styled-system/css";
 
   const className = css({
-    '@media screen and (min-width: token(sizes.4xl))': {
-      color: 'green.400',
+    "@media screen and (min-width: token(sizes.4xl))": {
+      color: "green.400",
     },
-  })
+  });
   ```
 
 - Updated dependencies [26f6982c]
@@ -6212,7 +6320,7 @@ Will now allow you to use the following syntax for token path:
 
   ```css
   * {
-    color: token('colors.magenta', pink);
+    color: token("colors.magenta", pink);
   }
   ```
 
@@ -6321,12 +6429,12 @@ Will now allow you to use the following syntax for token path:
   **Definition**
 
   ```jsx
-  import { sva } from 'styled-system/css'
+  import { sva } from "styled-system/css";
 
   const button = sva({
-    slots: ['label', 'icon'],
+    slots: ["label", "icon"],
     base: {
-      label: { color: 'red', textDecoration: 'underline' },
+      label: { color: "red", textDecoration: "underline" },
     },
     variants: {
       rounded: {
@@ -6334,33 +6442,33 @@ Will now allow you to use the following syntax for token path:
       },
       size: {
         sm: {
-          label: { fontSize: 'sm' },
-          icon: { fontSize: 'sm' },
+          label: { fontSize: "sm" },
+          icon: { fontSize: "sm" },
         },
         lg: {
-          label: { fontSize: 'lg' },
-          icon: { fontSize: 'lg', color: 'pink' },
+          label: { fontSize: "lg" },
+          icon: { fontSize: "lg", color: "pink" },
         },
       },
     },
     defaultVariants: {
-      size: 'sm',
+      size: "sm",
     },
-  })
+  });
   ```
 
   **Usage**
 
   ```jsx
   export function App() {
-    const btnClass = button({ size: 'lg', rounded: true })
+    const btnClass = button({ size: "lg", rounded: true });
 
     return (
       <button>
         <p class={btnClass.label}> Label</p>
         <p class={btnClass.icon}> Icon</p>
       </button>
-    )
+    );
   }
   ```
 
@@ -6409,26 +6517,26 @@ Will now allow you to use the following syntax for token path:
   Update the `jsx` property to be used for advanced tracking of custom pattern components.
 
   ```jsx
-  import { Circle } from 'styled-system/jsx'
+  import { Circle } from "styled-system/jsx";
   const CustomCircle = ({ children, ...props }) => {
-    return <Circle {...props}>{children}</Circle>
-  }
+    return <Circle {...props}>{children}</Circle>;
+  };
   ```
 
   To track the `CustomCircle` component, you can now use the `jsx` property.
 
   ```js
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     patterns: {
       extend: {
         circle: {
-          jsx: ['CustomCircle'],
+          jsx: ["CustomCircle"],
         },
       },
     },
-  })
+  });
   ```
 
 ### Patch Changes
@@ -6492,9 +6600,17 @@ Will now allow you to use the following syntax for token path:
   ```tsx
   const ComponentWithMultipleRecipes = ({ variant }) => {
     return (
-      <button className={cx(pinkRecipe({ variant }), greenRecipe({ variant }), blueRecipe({ variant }))}>Hello</button>
-    )
-  }
+      <button
+        className={cx(
+          pinkRecipe({ variant }),
+          greenRecipe({ variant }),
+          blueRecipe({ variant }),
+        )}
+      >
+        Hello
+      </button>
+    );
+  };
   ```
 
   Given a `panda.config.ts` with recipes each including a common `jsx` tag name, such as:
@@ -6561,7 +6677,7 @@ Will now allow you to use the following syntax for token path:
   ```ts
   staticCss: {
     recipes: {
-      button: [{ size: ['*'], shape: ['*'] }]
+      button: [{ size: ["*"], shape: ["*"] }];
     }
   }
   ```
@@ -6571,7 +6687,7 @@ Will now allow you to use the following syntax for token path:
   ```ts
   staticCss: {
     recipes: {
-      button: ['*']
+      button: ["*"];
     }
   }
   ```
@@ -6607,12 +6723,12 @@ Will now allow you to use the following syntax for token path:
 - 5b344b9c: Add support for disabling shorthand props
 
   ```ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
     shorthands: false,
-  })
+  });
   ```
 
 ### Patch Changes
@@ -6714,11 +6830,11 @@ This hook is called right before writing the codegen files to disk. You can use
 export default defineConfig({
   // ...
   hooks: {
-    'codegen:prepare': ({ artifacts, changed }) => {
+    "codegen:prepare": ({ artifacts, changed }) => {
       // do something with the emitted js/d.ts files
     },
   },
-})
+});
 ```
 
 - d5977c24: - Add a `--logfile` flag to the `panda`, `panda codegen`, `panda cssgen` and `panda debug` commands.
@@ -6735,11 +6851,11 @@ export default defineConfig({
   ```js
   module.exports = {
     plugins: {
-      '@pandacss/dev/postcss': {
-        logfile: './logs/panda.log',
+      "@pandacss/dev/postcss": {
+        logfile: "./logs/panda.log",
       },
     },
-  }
+  };
   ```
 
 - Updated dependencies [74485ef1]
@@ -6778,9 +6894,9 @@ export default defineConfig({
 
   ```ts
   css({
-    bg: 'red.300/40',
-    color: 'white',
-  })
+    bg: "red.300/40",
+    color: "white",
+  });
   ```
 
   This will generate:
@@ -6788,7 +6904,11 @@ export default defineConfig({
   ```css
   @layer utilities {
     .bg_red\.300\/40 {
-      --mix-background: color-mix(in srgb, var(--colors-red-300) 40%, transparent);
+      --mix-background: color-mix(
+        in srgb,
+        var(--colors-red-300) 40%,
+        transparent
+      );
       background: var(--mix-background, var(--colors-red-300));
     }
 
@@ -6812,21 +6932,21 @@ export default defineConfig({
   export default defineConfig({
     utilities: {
       background: {
-        shorthand: 'bg',
-        className: 'bg',
-        values: 'colors',
+        shorthand: "bg",
+        className: "bg",
+        values: "colors",
         transform(value, args) {
-          const mix = args.utils.colorMix(value)
+          const mix = args.utils.colorMix(value);
           // This can happen if the value format is invalid (e.g. `bg: red.300/invalid` or `bg: red.300//10`)
-          if (mix.invalid) return { background: value }
+          if (mix.invalid) return { background: value };
 
           return {
             background: mix.value,
-          }
+          };
         },
       },
     },
-  })
+  });
   ```
 
   ***
@@ -6835,21 +6955,21 @@ export default defineConfig({
   property:
 
   ```ts
-  import type { PropertyTransform } from '@pandacss/types'
+  import type { PropertyTransform } from "@pandacss/types";
 
   export const createColorMixTransform =
     (prop: string): PropertyTransform =>
     (value, args) => {
-      const mix = args.utils.colorMix(value)
-      if (mix.invalid) return { [prop]: value }
+      const mix = args.utils.colorMix(value);
+      if (mix.invalid) return { [prop]: value };
 
-      const cssVar = '--mix-' + prop
+      const cssVar = "--mix-" + prop;
 
       return {
         [cssVar]: mix.value,
         [prop]: `var(${cssVar}, ${mix.color})`,
-      }
-    }
+      };
+    };
   ```
 
   then the same utility transform as above can be written like this:
@@ -6875,24 +6995,24 @@ export default defineConfig({
     patterns: {
       hstack: {
         properties: {
-          justify: { type: 'property', value: 'justifyContent' },
-          gap: { type: 'property', value: 'gap' },
+          justify: { type: "property", value: "justifyContent" },
+          gap: { type: "property", value: "gap" },
         },
         // you can also use a token like '10'
-        defaultValues: { gap: '40px' },
+        defaultValues: { gap: "40px" },
         transform(props) {
-          const { justify, gap, ...rest } = props
+          const { justify, gap, ...rest } = props;
           return {
-            display: 'flex',
-            alignItems: 'center',
+            display: "flex",
+            alignItems: "center",
             justifyContent: justify,
             gap,
             ...rest,
-          }
+          };
         },
       },
     },
-  })
+  });
   ```
 
 - 250b4d11: ### Container Query Theme
@@ -6906,34 +7026,34 @@ export default defineConfig({
     // ...
     theme: {
       extend: {
-        containerNames: ['sidebar', 'content'],
+        containerNames: ["sidebar", "content"],
         containerSizes: {
-          xs: '40em',
-          sm: '60em',
-          md: '80em',
+          xs: "40em",
+          sm: "60em",
+          md: "80em",
         },
       },
     },
-  })
+  });
   ```
 
   The default container sizes in the `@pandacss/preset-panda` preset are shown below:
 
   ```ts
   export const containerSizes = {
-    xs: '320px',
-    sm: '384px',
-    md: '448px',
-    lg: '512px',
-    xl: '576px',
-    '2xl': '672px',
-    '3xl': '768px',
-    '4xl': '896px',
-    '5xl': '1024px',
-    '6xl': '1152px',
-    '7xl': '1280px',
-    '8xl': '1440px',
-  }
+    xs: "320px",
+    sm: "384px",
+    md: "448px",
+    lg: "512px",
+    xl: "576px",
+    "2xl": "672px",
+    "3xl": "768px",
+    "4xl": "896px",
+    "5xl": "1024px",
+    "6xl": "1152px",
+    "7xl": "1280px",
+    "8xl": "1440px",
+  };
   ```
 
   Then use them in your styles by referencing using `@<container-name>/<container-size>` syntax:
@@ -7017,10 +7137,10 @@ export default defineConfig({
   css({
     // ✅ this is fine now, will resolve to something like
     // `@container (min-width: 56em)`
-    '@container (min-width: {sizes.4xl})': {
-      color: 'green',
+    "@container (min-width: {sizes.4xl})": {
+      color: "green",
     },
-  })
+  });
   ```
 
   Fix an issue where the curly token references would not be escaped if the token path was not found.
@@ -7059,39 +7179,54 @@ export default defineConfig({
      * Called when the config is resolved, after all the presets are loaded and merged.
      * This is the first hook called, you can use it to tweak the config before the context is created.
      */
-    'config:resolved': (args: { conf: LoadConfigResult }) => MaybeAsyncReturn
+    "config:resolved": (args: { conf: LoadConfigResult }) => MaybeAsyncReturn;
     /**
      * Called when the Panda context has been created and the API is ready to be used.
      */
-    'context:created': (args: { ctx: ApiInterface; logger: LoggerInterface }) => void
+    "context:created": (args: {
+      ctx: ApiInterface;
+      logger: LoggerInterface;
+    }) => void;
     /**
      * Called when the config file or one of its dependencies (imports) has changed.
      */
-    'config:change': (args: { config: UserConfig }) => MaybeAsyncReturn
+    "config:change": (args: { config: UserConfig }) => MaybeAsyncReturn;
     /**
      * Called after reading the file content but before parsing it.
      * You can use this hook to transform the file content to a tsx-friendly syntax so that Panda's parser can parse it.
      * You can also use this hook to parse the file's content on your side using a custom parser, in this case you don't have to return anything.
      */
-    'parser:before': (args: { filePath: string; content: string }) => string | void
+    "parser:before": (args: {
+      filePath: string;
+      content: string;
+    }) => string | void;
     /**
      * Called after the file styles are extracted and processed into the resulting ParserResult object.
      * You can also use this hook to add your own extraction results from your custom parser to the ParserResult object.
      */
-    'parser:after': (args: { filePath: string; result: ParserResultInterface | undefined }) => void
+    "parser:after": (args: {
+      filePath: string;
+      result: ParserResultInterface | undefined;
+    }) => void;
     /**
      * Called after the codegen is completed
      */
-    'codegen:done': () => MaybeAsyncReturn
+    "codegen:done": () => MaybeAsyncReturn;
     /**
      * Called right before adding the design-system CSS (global, static, preflight, tokens, keyframes) to the final CSS
      * Called right before writing/injecting the final CSS (styles.css) that contains the design-system CSS and the parser CSS
      * You can use it to tweak the CSS content before it's written to disk or injected through the postcss plugin.
      */
-    'cssgen:done': (args: {
-      artifact: 'global' | 'static' | 'reset' | 'tokens' | 'keyframes' | 'styles.css'
-      content: string
-    }) => string | void
+    "cssgen:done": (args: {
+      artifact:
+        | "global"
+        | "static"
+        | "reset"
+        | "tokens"
+        | "keyframes"
+        | "styles.css";
+      content: string;
+    }) => string | void;
   }
   ```
 
@@ -7298,11 +7433,11 @@ export default defineConfig({
 - de282f60: Support token reference syntax when authoring styles object, text styles and layer styles.
 
   ```jsx
-  import { css } from '../styled-system/css'
+  import { css } from "../styled-system/css";
 
   const styles = css({
-    border: '2px solid {colors.primary}',
-  })
+    border: "2px solid {colors.primary}",
+  });
   ```
 
   This will resolve the token reference and convert it to css variables.
@@ -7322,18 +7457,18 @@ export default defineConfig({
   ```jsx
   const styles = css({
     // token reference syntax
-    border: '2px solid {colors.primary}',
+    border: "2px solid {colors.primary}",
     // token function syntax
-    border: '2px solid token(colors.primary)',
-  })
+    border: "2px solid token(colors.primary)",
+  });
   ```
 
   However, The `token(...)` syntax allows you to set a fallback value.
 
   ```jsx
   const styles = css({
-    border: '2px solid token(colors.primary, red)',
-  })
+    border: "2px solid token(colors.primary, red)",
+  });
   ```
 
 ### Patch Changes
@@ -7344,8 +7479,8 @@ export default defineConfig({
   ```jsx
   css({
     // This didn't work, but now it does
-    base: { color: 'blue' },
-  })
+    base: { color: "blue" },
+  });
   ```
 
 - Updated dependencies [59fd291c]
@@ -7404,38 +7539,38 @@ export default defineConfig({
 
   ```ts
   const card = defineRecipe({
-    className: 'card',
-    base: { color: 'white' },
+    className: "card",
+    base: { color: "white" },
     variants: {
       size: {
-        small: { fontSize: '14px' },
-        large: { fontSize: '18px' },
+        small: { fontSize: "14px" },
+        large: { fontSize: "18px" },
       },
       visual: {
-        primary: { backgroundColor: 'blue' },
-        secondary: { backgroundColor: 'gray' },
+        primary: { backgroundColor: "blue" },
+        secondary: { backgroundColor: "gray" },
       },
     },
-  })
+  });
 
   export default defineConfig({
     // ...
     staticCss: {
       recipes: {
-        card: ['*'], // this
+        card: ["*"], // this
 
         // was equivalent to:
         card: [
           // notice how `responsive: true` was implicitly added
-          { size: ['*'], responsive: true },
-          { visual: ['*'], responsive: true },
+          { size: ["*"], responsive: true },
+          { visual: ["*"], responsive: true },
         ],
 
         //   will now correctly be equivalent to:
-        card: [{ size: ['*'] }, { visual: ['*'] }],
+        card: [{ size: ["*"] }, { visual: ["*"] }],
       },
     },
-  })
+  });
   ```
 
   Here's the diff in the generated CSS:
@@ -7561,30 +7696,30 @@ export default defineConfig({
   another file, such as when using `Ark-UI` like `import { comboboxAnatomy } from '@ark-ui/anatomy'`
 
   ```ts
-  import { sva } from '../styled-system/css'
-  import { slots } from './slots'
+  import { sva } from "../styled-system/css";
+  import { slots } from "./slots";
 
   const card = sva({
     slots, // ❌ did NOT work -> ✅ will now work as expected
     base: {
       root: {
-        p: '6',
-        m: '4',
-        w: 'md',
-        boxShadow: 'md',
-        borderRadius: 'md',
-        _dark: { bg: '#262626', color: 'white' },
+        p: "6",
+        m: "4",
+        w: "md",
+        boxShadow: "md",
+        borderRadius: "md",
+        _dark: { bg: "#262626", color: "white" },
       },
       content: {
-        textStyle: 'lg',
+        textStyle: "lg",
       },
       title: {
-        textStyle: 'xl',
-        fontWeight: 'semibold',
-        pb: '2',
+        textStyle: "xl",
+        fontWeight: "semibold",
+        pb: "2",
       },
     },
-  })
+  });
   ```
 
 - 840ed66b: Fix an issue with config change detection when using a custom `config.slotRecipes[xxx].jsx` array
@@ -7641,18 +7776,18 @@ export default defineConfig({
   and suffixing with `]`, e.g. writing `[123px]` as a value will bypass the token validation.
 
   ```ts
-  import { css } from '../styled-system/css'
+  import { css } from "../styled-system/css";
 
   css({
     // @ts-expect-error TS will throw when using from strictTokens: true
-    color: '#fff',
+    color: "#fff",
     // @ts-expect-error TS will throw when using from strictTokens: true
-    width: '100px',
+    width: "100px",
 
     // ✅ but this is now allowed:
-    bgColor: '[rgb(51 155 240)]',
-    fontSize: '[12px]',
-  })
+    bgColor: "[rgb(51 155 240)]",
+    fontSize: "[12px]",
+  });
   ```
 
 ### Patch Changes
@@ -7665,8 +7800,8 @@ export default defineConfig({
     // here the content property is a valid CSS property, so Panda will try to generate the CSS for it
     // but since it's an URL, it would produce invalid CSS
     // we now check if the property value is an URL and skip it if needed
-    return <CopyButton content="https://www.buymeacoffee.com/grizzlycodes" />
-  }
+    return <CopyButton content="https://www.buymeacoffee.com/grizzlycodes" />;
+  };
   ```
 
 - d81dcbe6: - Fix an issue where recipe variants that clash with utility shorthand don't get generated due to the
@@ -7675,36 +7810,36 @@ export default defineConfig({
 - 105f74ce: Add a way to specify a recipe's `staticCss` options from inside a recipe config, e.g.:
 
   ```js
-  import { defineRecipe } from '@pandacss/dev'
+  import { defineRecipe } from "@pandacss/dev";
 
   const card = defineRecipe({
-    className: 'card',
-    base: { color: 'white' },
+    className: "card",
+    base: { color: "white" },
     variants: {
       size: {
-        small: { fontSize: '14px' },
-        large: { fontSize: '18px' },
+        small: { fontSize: "14px" },
+        large: { fontSize: "18px" },
       },
     },
-    staticCss: [{ size: ['*'] }],
-  })
+    staticCss: [{ size: ["*"] }],
+  });
   ```
 
   would be the equivalent of defining it inside the main config:
 
   ```js
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
     staticCss: {
       recipes: {
         card: {
-          size: ['*'],
+          size: ["*"],
         },
       },
     },
-  })
+  });
   ```
 
 - Updated dependencies [26e6051a]
@@ -7736,13 +7871,13 @@ export default defineConfig({
 
   ```ts
   css({
-    '@container (min-width: token(sizes.xl))': {
-      color: 'green.300',
+    "@container (min-width: token(sizes.xl))": {
+      color: "green.300",
     },
-    '@media (min-width: token(sizes.2xl))': {
-      color: 'red.300',
+    "@media (min-width: token(sizes.2xl))": {
+      color: "red.300",
     },
-  })
+  });
   ```
 
 - Updated dependencies [24ee49a5]
@@ -7794,14 +7929,14 @@ export default defineConfig({
 - 8c76cd0f: - Fix issue where `hideBelow` breakpoints are inclusive of the specified breakpoints
 
   ```jsx
-  css({ hideBelow: 'lg' })
+  css({ hideBelow: "lg" });
   // => @media screen and (max-width: 63.9975em) { background: red; }
   ```
 
   - Support arbitrary breakpoints in `hideBelow` and `hideFrom` utilities
 
   ```jsx
-  css({ hideFrom: '800px' })
+  css({ hideFrom: "800px" });
   // => @media screen and (min-width: 800px) { background: red; }
   ```
 
@@ -7887,10 +8022,10 @@ export default defineConfig({
 
   ```ts
   const button = defineSlotRecipe({
-    className: 'button',
-    slots: ['root', 'icon', 'label'],
+    className: "button",
+    slots: ["root", "icon", "label"],
     // ...
-  })
+  });
   ```
 
   will have a default `jsx` property of: `[Button, Button.Root, Button.Icon, Button.Label]`
@@ -7947,42 +8082,42 @@ export default defineConfig({
 
   ```ts
   export default defineConfig({
-    outdir: './outdir',
+    outdir: "./outdir",
     importMap: {
-      css: '#panda/styled-system/css',
-      recipes: '#panda/styled-system/recipes',
-      patterns: '#panda/styled-system/patterns',
-      jsx: '#panda/styled-system/jsx',
+      css: "#panda/styled-system/css",
+      recipes: "#panda/styled-system/recipes",
+      patterns: "#panda/styled-system/patterns",
+      jsx: "#panda/styled-system/jsx",
     },
-  })
+  });
   ```
 
   Or you could also make your outdir an actual package from your monorepo:
 
   ```ts
   export default defineConfig({
-    outdir: '../packages/styled-system',
+    outdir: "../packages/styled-system",
     importMap: {
-      css: '@monorepo/styled-system',
-      recipes: '@monorepo/styled-system',
-      patterns: '@monorepo/styled-system',
-      jsx: '@monorepo/styled-system',
+      css: "@monorepo/styled-system",
+      recipes: "@monorepo/styled-system",
+      patterns: "@monorepo/styled-system",
+      jsx: "@monorepo/styled-system",
     },
-  })
+  });
   ```
 
   Working with tsconfig paths aliases is easy:
 
   ```ts
   export default defineConfig({
-    outdir: 'styled-system',
+    outdir: "styled-system",
     importMap: {
-      css: 'styled-system/css',
-      recipes: 'styled-system/recipes',
-      patterns: 'styled-system/patterns',
-      jsx: 'styled-system/jsx',
+      css: "styled-system/css",
+      recipes: "styled-system/recipes",
+      patterns: "styled-system/patterns",
+      jsx: "styled-system/jsx",
     },
-  })
+  });
   ```
 
 - Updated dependencies [95b06bb1]
@@ -8012,13 +8147,13 @@ export default defineConfig({
 - 848936e0: Allow referencing tokens with the `token()` function in media queries or any other CSS at-rule.
 
   ```js
-  import { css } from '../styled-system/css'
+  import { css } from "../styled-system/css";
 
   const className = css({
-    '@media screen and (min-width: token(sizes.4xl))': {
-      color: 'green.400',
+    "@media screen and (min-width: token(sizes.4xl))": {
+      color: "green.400",
     },
-  })
+  });
   ```
 
 - Updated dependencies [26f6982c]
@@ -8071,7 +8206,7 @@ export default defineConfig({
 
   ```css
   * {
-    color: token('colors.magenta', pink);
+    color: token("colors.magenta", pink);
   }
   ```
 
@@ -8180,12 +8315,12 @@ export default defineConfig({
   **Definition**
 
   ```jsx
-  import { sva } from 'styled-system/css'
+  import { sva } from "styled-system/css";
 
   const button = sva({
-    slots: ['label', 'icon'],
+    slots: ["label", "icon"],
     base: {
-      label: { color: 'red', textDecoration: 'underline' },
+      label: { color: "red", textDecoration: "underline" },
     },
     variants: {
       rounded: {
@@ -8193,33 +8328,33 @@ export default defineConfig({
       },
       size: {
         sm: {
-          label: { fontSize: 'sm' },
-          icon: { fontSize: 'sm' },
+          label: { fontSize: "sm" },
+          icon: { fontSize: "sm" },
         },
         lg: {
-          label: { fontSize: 'lg' },
-          icon: { fontSize: 'lg', color: 'pink' },
+          label: { fontSize: "lg" },
+          icon: { fontSize: "lg", color: "pink" },
         },
       },
     },
     defaultVariants: {
-      size: 'sm',
+      size: "sm",
     },
-  })
+  });
   ```
 
   **Usage**
 
   ```jsx
   export function App() {
-    const btnClass = button({ size: 'lg', rounded: true })
+    const btnClass = button({ size: "lg", rounded: true });
 
     return (
       <button>
         <p class={btnClass.label}> Label</p>
         <p class={btnClass.icon}> Icon</p>
       </button>
-    )
+    );
   }
   ```
 
@@ -8268,26 +8403,26 @@ export default defineConfig({
   Update the `jsx` property to be used for advanced tracking of custom pattern components.
 
   ```jsx
-  import { Circle } from 'styled-system/jsx'
+  import { Circle } from "styled-system/jsx";
   const CustomCircle = ({ children, ...props }) => {
-    return <Circle {...props}>{children}</Circle>
-  }
+    return <Circle {...props}>{children}</Circle>;
+  };
   ```
 
   To track the `CustomCircle` component, you can now use the `jsx` property.
 
   ```js
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     patterns: {
       extend: {
         circle: {
-          jsx: ['CustomCircle'],
+          jsx: ["CustomCircle"],
         },
       },
     },
-  })
+  });
   ```
 
 ### Patch Changes
@@ -8351,9 +8486,17 @@ export default defineConfig({
   ```tsx
   const ComponentWithMultipleRecipes = ({ variant }) => {
     return (
-      <button className={cx(pinkRecipe({ variant }), greenRecipe({ variant }), blueRecipe({ variant }))}>Hello</button>
-    )
-  }
+      <button
+        className={cx(
+          pinkRecipe({ variant }),
+          greenRecipe({ variant }),
+          blueRecipe({ variant }),
+        )}
+      >
+        Hello
+      </button>
+    );
+  };
   ```
 
   Given a `panda.config.ts` with recipes each including a common `jsx` tag name, such as:
@@ -8420,7 +8563,7 @@ export default defineConfig({
   ```ts
   staticCss: {
     recipes: {
-      button: [{ size: ['*'], shape: ['*'] }]
+      button: [{ size: ["*"], shape: ["*"] }];
     }
   }
   ```
@@ -8430,7 +8573,7 @@ export default defineConfig({
   ```ts
   staticCss: {
     recipes: {
-      button: ['*']
+      button: ["*"];
     }
   }
   ```
@@ -8466,12 +8609,12 @@ export default defineConfig({
 - 5b344b9c: Add support for disabling shorthand props
 
   ```ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
     shorthands: false,
-  })
+  });
   ```
 
 ### Patch Changes
diff --git a/packages/core/package.json b/packages/core/package.json
index 28226637d..eb96a392a 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/core",
-  "version": "0.39.0",
+  "version": "0.39.1",
   "description": "core functions for extract-it",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
diff --git a/packages/extractor/CHANGELOG.md b/packages/extractor/CHANGELOG.md
index 12e90c103..a29c18cff 100644
--- a/packages/extractor/CHANGELOG.md
+++ b/packages/extractor/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @pandacss/extractor
 
+## 0.39.1
+
+### Patch Changes
+
+- @pandacss/shared@0.39.1
+
 ## 0.39.0
 
 ### Patch Changes
@@ -65,18 +71,18 @@
 - 0bf09f2: Allow using namespaced imports
 
   ```ts
-  import * as p from 'styled-system/patterns'
-  import * as recipes from 'styled-system/recipes'
-  import * as panda from 'styled-system/css'
+  import * as p from "styled-system/patterns";
+  import * as recipes from "styled-system/recipes";
+  import * as panda from "styled-system/css";
 
   // this will now be extracted
-  p.stack({ mt: '40px' })
+  p.stack({ mt: "40px" });
 
-  recipes.cardStyle({ rounded: true })
+  recipes.cardStyle({ rounded: true });
 
-  panda.css({ color: 'red' })
-  panda.cva({ base: { color: 'blue' } })
-  panda.sva({ base: { root: { color: 'green' } } })
+  panda.css({ color: "red" });
+  panda.cva({ base: { color: "blue" } });
+  panda.sva({ base: { root: { color: "green" } } });
   ```
 
   - @pandacss/shared@0.34.2
@@ -223,8 +229,8 @@
         {/* ✅ this was fine */}
         <Stack ml="4" icon={<div className="icon" />} />
       </>
-    )
-  }
+    );
+  };
   ```
 
   Now both will be fine again.
@@ -265,11 +271,11 @@
 
   ```ts
   enum Color {
-    Red = 'red.400',
-    Blue = 'blue.400',
+    Red = "red.400",
+    Blue = "blue.400",
   }
 
-  const className = css({ color: Color.Red, backgroundColor: Color['Blue'] })
+  const className = css({ color: Color.Red, backgroundColor: Color["Blue"] });
   ```
 
 ## 0.17.0
@@ -371,20 +377,20 @@
   so this will now work:
 
   ```ts
-  import { css } from 'styled-system/css'
+  import { css } from "styled-system/css";
 
   const paragraphSpacingStyle = css.raw({
-    '&:not(:first-child)': { marginBlockEnd: '1em' },
-  })
+    "&:not(:first-child)": { marginBlockEnd: "1em" },
+  });
 
   export const proseCss = css.raw({
-    maxWidth: '800px',
-    '& p': {
-      '&:not(:first-child)': { marginBlockStart: '1em' },
+    maxWidth: "800px",
+    "& p": {
+      "&:not(:first-child)": { marginBlockStart: "1em" },
     },
-    '& h1': paragraphSpacingStyle,
-    '& h2': paragraphSpacingStyle,
-  })
+    "& h1": paragraphSpacingStyle,
+    "& h2": paragraphSpacingStyle,
+  });
   ```
 
   & use ECMA preset for ts-evaluator: This means that no other globals than those that are defined in the ECMAScript
@@ -392,35 +398,35 @@
   this:
 
   ```ts
-  import { cva } from '.panda/css'
+  import { cva } from ".panda/css";
 
   const variants = () => {
     const spacingTokens = Object.entries({
-      s: 'token(spacing.1)',
-      m: 'token(spacing.2)',
-      l: 'token(spacing.3)',
-    })
+      s: "token(spacing.1)",
+      m: "token(spacing.2)",
+      l: "token(spacing.3)",
+    });
 
     const spacingProps = {
-      px: 'paddingX',
-      py: 'paddingY',
-    }
+      px: "paddingX",
+      py: "paddingY",
+    };
 
     // Generate variants programmatically
     return Object.entries(spacingProps)
       .map(([name, styleProp]) => {
         const variants = spacingTokens
           .map(([variant, token]) => ({ [variant]: { [styleProp]: token } }))
-          .reduce((_agg, kv) => ({ ..._agg, ...kv }))
+          .reduce((_agg, kv) => ({ ..._agg, ...kv }));
 
-        return { [name]: variants }
+        return { [name]: variants };
       })
-      .reduce((_agg, kv) => ({ ..._agg, ...kv }))
-  }
+      .reduce((_agg, kv) => ({ ..._agg, ...kv }));
+  };
 
   const baseStyle = cva({
     variants: variants(),
-  })
+  });
   ```
 
 ## 0.15.0
@@ -432,8 +438,8 @@
 
   ```ts
   const className = css({
-    color: ['black', undefined, 'orange', 'red'],
-  })
+    color: ["black", undefined, "orange", "red"],
+  });
   ```
 
 - 7c1ab170: Fix issue where the `satisfies` would prevent an object from being extracted
@@ -468,8 +474,12 @@
 
   ```tsx
   const CompB = ({ disabled = false }: { disabled: boolean }) => {
-    return <div className={css({ color: disabled ? 'blue' : 'yellow' })}>Component B is disabled</div>
-  }
+    return (
+      <div className={css({ color: disabled ? "blue" : "yellow" })}>
+        Component B is disabled
+      </div>
+    );
+  };
   ```
 
 ## 0.8.0
@@ -541,11 +551,16 @@
 - 21295f2e: Resolve identifier default value from parameter, code like `position` and `inset` here:
 
   ```tsx
-  export const Positioned: React.FC<PositionedProps> = ({ children, position = 'absolute', inset = 0, ...rest }) => (
+  export const Positioned: React.FC<PositionedProps> = ({
+    children,
+    position = "absolute",
+    inset = 0,
+    ...rest
+  }) => (
     <styled.div position={position} inset={inset} {...rest}>
       {children}
     </styled.div>
-  )
+  );
   ```
 
   - @pandacss/logger@0.6.0
@@ -665,16 +680,16 @@
   this was fine:
 
   ```ts
-  const aliased = 'green.600'
-  const colorMap = { aliased }
-  const className = css({ color: colorMap['aliased'] })
+  const aliased = "green.600";
+  const colorMap = { aliased };
+  const className = css({ color: colorMap["aliased"] });
   ```
 
   this was not (weirdly):
 
   ```ts
-  const color = 'green.600'
-  const className = css({ color })
+  const color = "green.600";
+  const className = css({ color });
   ```
 
 - Updated dependencies [f9247e52]
@@ -695,8 +710,8 @@
   // panda.config.ts
   export default defineConfig({
     //...
-    syntax: 'template-literal',
-  })
+    syntax: "template-literal",
+  });
   ```
 
   > For existing projects, you might need to run the `panda codegen --clean`
diff --git a/packages/extractor/package.json b/packages/extractor/package.json
index 0e4aa4df8..d55afb5ad 100644
--- a/packages/extractor/package.json
+++ b/packages/extractor/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/extractor",
-  "version": "0.39.0",
+  "version": "0.39.1",
   "description": "The css extractor for css panda",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
diff --git a/packages/generator/CHANGELOG.md b/packages/generator/CHANGELOG.md
index 3c1aff40e..b190d5de3 100644
--- a/packages/generator/CHANGELOG.md
+++ b/packages/generator/CHANGELOG.md
@@ -1,5 +1,18 @@
 # @pandacss/generator
 
+## 0.39.1
+
+### Patch Changes
+
+- 99be6f1: Fix `css.raw` typings after recent ([0.39.0](https://github.com/chakra-ui/panda/discussions/2560)) changes allowing
+  arrays of `SystemStyleObject`
+  - @pandacss/core@0.39.1
+  - @pandacss/is-valid-prop@0.39.1
+  - @pandacss/logger@0.39.1
+  - @pandacss/shared@0.39.1
+  - @pandacss/token-dictionary@0.39.1
+  - @pandacss/types@0.39.1
+
 ## 0.39.0
 
 ### Minor Changes
@@ -11,7 +24,7 @@
   **Before**
 
   ```jsx
-  import { linkBox, linkOverlay } from 'styled-system/patterns'
+  import { linkBox, linkOverlay } from "styled-system/patterns";
 
   const App = () => {
     return (
@@ -21,26 +34,26 @@
           Link
         </a>
       </div>
-    )
-  }
+    );
+  };
   ```
 
   **After**
 
   ```jsx
-  import { css } from 'styled-system/css'
-  import { linkOverlay } from 'styled-system/patterns'
+  import { css } from "styled-system/css";
+  import { linkOverlay } from "styled-system/patterns";
 
   const App = () => {
     return (
-      <div className={css({ pos: 'relative' })}>
+      <div className={css({ pos: "relative" })}>
         <img src="https://via.placeholder.com/150" alt="placeholder" />
         <a href="#" className={linkOverlay()}>
           Link
         </a>
       </div>
-    )
-  }
+    );
+  };
   ```
 
 - 221c9a2: Add support for more typography related properties in text styles such as `fontFeatureSettings`,
@@ -97,11 +110,11 @@
       ta: {
         deprecated: true,
         transform(value) {
-          return { textAlign: value }
+          return { textAlign: value };
         },
       },
     },
-  })
+  });
   ```
 
   **Deprecating a token**
@@ -111,11 +124,11 @@
     theme: {
       tokens: {
         spacing: {
-          lg: { value: '8px', deprecated: 'use `8` instead' },
+          lg: { value: "8px", deprecated: "use `8` instead" },
         },
       },
     },
-  })
+  });
   ```
 
   **Deprecating a pattern**
@@ -127,7 +140,7 @@
         deprecated: true,
       },
     },
-  })
+  });
   ```
 
   **Deprecating a recipe**
@@ -137,11 +150,11 @@
     theme: {
       recipes: {
         btn: {
-          deprecated: 'will be removed in v2.0',
+          deprecated: "will be removed in v2.0",
         },
       },
     },
-  })
+  });
   ```
 
   ### ESLint Plugin
@@ -165,23 +178,28 @@
   This makes it even easier to merge styles from multiple sources.
 
   ```tsx
-  import { Stack, styled } from '../styled-system/jsx'
+  import { Stack, styled } from "../styled-system/jsx";
 
   const HeroSection = (props) => {
     return (
-      <Stack css={[{ color: 'blue.300', padding: '4' }, props.css]}>
-        <styled.div css={[{ fontSize: '2xl' }, props.hero]}>Hero Section</styled.div>
+      <Stack css={[{ color: "blue.300", padding: "4" }, props.css]}>
+        <styled.div css={[{ fontSize: "2xl" }, props.hero]}>
+          Hero Section
+        </styled.div>
       </Stack>
-    )
-  }
+    );
+  };
 
   const App = () => {
     return (
       <>
-        <HeroSection css={{ backgroundColor: 'yellow.300' }} hero={css.raw({ fontSize: '4xl', color: 'red.300' })} />
+        <HeroSection
+          css={{ backgroundColor: "yellow.300" }}
+          hero={css.raw({ fontSize: "4xl", color: "red.300" })}
+        />
       </>
-    )
-  }
+    );
+  };
   ```
 
   should render something like:
@@ -351,21 +369,21 @@
 - 99870bb: Fix issue where setting the pattern `jsx` option with dot notation didn't work.
 
   ```jsx
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
     patterns: {
       extend: {
         grid: {
-          jsx: ['Form.Group', 'Grid'],
+          jsx: ["Form.Group", "Grid"],
         },
         stack: {
-          jsx: ['Form.Action', 'Stack'],
+          jsx: ["Form.Action", "Stack"],
         },
       },
     },
-  })
+  });
   ```
 
 - Updated dependencies [93dc9f5]
@@ -408,9 +426,9 @@
     useful when applying negative margin to child elements.
 
   ```tsx
-  <div className={flex({ spaceX: '-1' })}>
-    <div className={circle({ size: '5', bg: 'red' })} />
-    <div className={circle({ size: '5', bg: 'pink' })} />
+  <div className={flex({ spaceX: "-1" })}>
+    <div className={circle({ size: "5", bg: "red" })} />
+    <div className={circle({ size: "5", bg: "pink" })} />
   </div>
   ```
 
@@ -422,13 +440,13 @@
   ```tsx
   <div
     className={css({
-      bgGradient: 'to-r',
+      bgGradient: "to-r",
       // from
-      gradientFrom: 'red',
-      gradientFromPosition: 'top left',
+      gradientFrom: "red",
+      gradientFromPosition: "top left",
       // to
-      gradientTo: 'blue',
-      gradientToPosition: 'bottom right',
+      gradientTo: "blue",
+      gradientToPosition: "bottom right",
     })}
   />
   ```
@@ -474,7 +492,7 @@
 
   ```ts
   // panda.config.ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
@@ -483,15 +501,15 @@
       extend: {
         tokens: {
           colors: {
-            text: { value: 'blue' },
+            text: { value: "blue" },
           },
         },
         semanticTokens: {
           colors: {
             body: {
               value: {
-                base: '{colors.blue.600}',
-                _osDark: '{colors.blue.400}',
+                base: "{colors.blue.600}",
+                _osDark: "{colors.blue.400}",
               },
             },
           },
@@ -503,16 +521,16 @@
       primary: {
         tokens: {
           colors: {
-            text: { value: 'red' },
+            text: { value: "red" },
           },
         },
         semanticTokens: {
           colors: {
-            muted: { value: '{colors.red.200}' },
+            muted: { value: "{colors.red.200}" },
             body: {
               value: {
-                base: '{colors.red.600}',
-                _osDark: '{colors.red.400}',
+                base: "{colors.red.600}",
+                _osDark: "{colors.red.400}",
               },
             },
           },
@@ -521,23 +539,23 @@
       secondary: {
         tokens: {
           colors: {
-            text: { value: 'blue' },
+            text: { value: "blue" },
           },
         },
         semanticTokens: {
           colors: {
-            muted: { value: '{colors.blue.200}' },
+            muted: { value: "{colors.blue.200}" },
             body: {
               value: {
-                base: '{colors.blue.600}',
-                _osDark: '{colors.blue.400}',
+                base: "{colors.blue.600}",
+                _osDark: "{colors.blue.400}",
               },
             },
           },
         },
       },
     },
-  })
+  });
   ```
 
   ### Pregenerating themes
@@ -547,14 +565,14 @@
 
   ```ts
   // panda.config.ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
     staticCss: {
-      themes: ['primary', 'secondary'],
+      themes: ["primary", "secondary"],
     },
-  })
+  });
   ```
 
   This will generate the following CSS:
@@ -566,7 +584,7 @@
       --colors-body: var(--colors-blue-600);
     }
 
-    [data-panda-theme='primary'] {
+    [data-panda-theme="primary"] {
       --colors-text: red;
       --colors-muted: var(--colors-red-200);
       --colors-body: var(--colors-red-600);
@@ -577,7 +595,7 @@
         --colors-body: var(--colors-blue-400);
       }
 
-      [data-panda-theme='primary'] {
+      [data-panda-theme="primary"] {
         --colors-body: var(--colors-red-400);
       }
     }
@@ -608,9 +626,9 @@
   Dynamically import a theme using its name:
 
   ```ts
-  import { getTheme } from '../styled-system/themes'
+  import { getTheme } from "../styled-system/themes";
 
-  const theme = await getTheme('red')
+  const theme = await getTheme("red");
   //    ^? {
   //     name: "red";
   //     id: string;
@@ -621,10 +639,10 @@
   Inject the theme styles into the DOM:
 
   ```ts
-  import { injectTheme } from '../styled-system/themes'
+  import { injectTheme } from "../styled-system/themes";
 
-  const theme = await getTheme('red')
-  injectTheme(document.documentElement, theme) // this returns the injected style element
+  const theme = await getTheme("red");
+  injectTheme(document.documentElement, theme); // this returns the injected style element
   ```
 
   ***
@@ -633,54 +651,62 @@
 
   ```tsx
   // app/layout.tsx
-  import { Inter } from 'next/font/google'
-  import { cookies } from 'next/headers'
-  import { ThemeName, getTheme } from '../../styled-system/themes'
-
-  export default async function RootLayout({ children }: { children: React.ReactNode }) {
-    const store = cookies()
-    const themeName = store.get('theme')?.value as ThemeName
-    const theme = themeName && (await getTheme(themeName))
+  import { Inter } from "next/font/google";
+  import { cookies } from "next/headers";
+  import { ThemeName, getTheme } from "../../styled-system/themes";
+
+  export default async function RootLayout({
+    children,
+  }: {
+    children: React.ReactNode;
+  }) {
+    const store = cookies();
+    const themeName = store.get("theme")?.value as ThemeName;
+    const theme = themeName && (await getTheme(themeName));
 
     return (
       <html lang="en" data-panda-theme={themeName ? themeName : undefined}>
         {themeName && (
           <head>
-            <style type="text/css" id={theme.id} dangerouslySetInnerHTML={{ __html: theme.css }} />
+            <style
+              type="text/css"
+              id={theme.id}
+              dangerouslySetInnerHTML={{ __html: theme.css }}
+            />
           </head>
         )}
         <body>{children}</body>
       </html>
-    )
+    );
   }
 
   // app/page.tsx
-  import { getTheme, injectTheme } from '../../styled-system/themes'
+  import { getTheme, injectTheme } from "../../styled-system/themes";
 
   export default function Home() {
     return (
       <>
         <button
           onClick={async () => {
-            const current = document.documentElement.dataset.pandaTheme
-            const next = current === 'primary' ? 'secondary' : 'primary'
-            const theme = await getTheme(next)
-            setCookie('theme', next, 7)
-            injectTheme(document.documentElement, theme)
+            const current = document.documentElement.dataset.pandaTheme;
+            const next = current === "primary" ? "secondary" : "primary";
+            const theme = await getTheme(next);
+            setCookie("theme", next, 7);
+            injectTheme(document.documentElement, theme);
           }}
         >
           swap theme
         </button>
       </>
-    )
+    );
   }
 
   // Set a Cookie
   function setCookie(cName: string, cValue: any, expDays: number) {
-    let date = new Date()
-    date.setTime(date.getTime() + expDays * 24 * 60 * 60 * 1000)
-    const expires = 'expires=' + date.toUTCString()
-    document.cookie = cName + '=' + cValue + '; ' + expires + '; path=/'
+    let date = new Date();
+    date.setTime(date.getTime() + expDays * 24 * 60 * 60 * 1000);
+    const expires = "expires=" + date.toUTCString();
+    document.cookie = cName + "=" + cValue + "; " + expires + "; path=/";
   }
   ```
 
@@ -689,18 +715,18 @@
   Finally, you can create a theme contract to ensure that all themes have the same structure:
 
   ```ts
-  import { defineThemeContract } from '@pandacss/dev'
+  import { defineThemeContract } from "@pandacss/dev";
 
   const defineTheme = defineThemeContract({
     tokens: {
       colors: {
-        red: { value: '' }, // theme implementations must have a red color
+        red: { value: "" }, // theme implementations must have a red color
       },
     },
-  })
+  });
 
   defineTheme({
-    selector: '.theme-secondary',
+    selector: ".theme-secondary",
     tokens: {
       colors: {
         // ^^^^   Property 'red' is missing in type '{}' but required in type '{ red: { value: string; }; }'
@@ -709,7 +735,7 @@
         // red: { value: 'red' },
       },
     },
-  })
+  });
   ```
 
 - fabdabe: ## Changes
@@ -729,12 +755,12 @@
     theme: {
       extend: {
         colors: {
-          primary: { value: 'blue' },
+          primary: { value: "blue" },
         },
         // borderWidths: {}, // ⚠️ nothing defined here
       },
     },
-  })
+  });
   ```
 
   ```ts
@@ -745,8 +771,8 @@
 
     // ✅ after this PR, TS will not throw an error anymore as you don't have any `borderWidths` tokens
     // if you add one, this will error again (as it's supposed to)
-    borderWidths: '123px',
-  })
+    borderWidths: "123px",
+  });
   ```
 
   ## Description
@@ -773,63 +799,63 @@
   Example:
 
   ```ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
     globalVars: {
-      '--some-color': 'red',
-      '--button-color': {
-        syntax: '<color>',
+      "--some-color": "red",
+      "--button-color": {
+        syntax: "<color>",
         inherits: false,
-        initialValue: 'blue',
+        initialValue: "blue",
       },
     },
-  })
+  });
   ```
 
   > Note: Keys defined in `globalVars` will be available as a value for _every_ utilities, as they're not bound to token
   > categories.
 
   ```ts
-  import { css } from '../styled-system/css'
+  import { css } from "../styled-system/css";
 
   const className = css({
-    '--button-color': 'colors.red.300',
+    "--button-color": "colors.red.300",
     // ^^^^^^^^^^^^  will be suggested
 
-    backgroundColor: 'var(--button-color)',
+    backgroundColor: "var(--button-color)",
     //                ^^^^^^^^^^^^^^^^^^  will be suggested
-  })
+  });
   ```
 
 - 656ff02: Fix `strictPropertyValues` typings should allow for `CssVars` (either predefined from `globalVars` or any
   custom CSS variable)
 
   ```ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
     strictPropertyValues: true,
     globalVars: {
       extend: {
-        '--some-color': 'red',
-        '--button-color': {
-          syntax: '<color>',
+        "--some-color": "red",
+        "--button-color": {
+          syntax: "<color>",
           inherits: false,
-          initialValue: 'blue',
+          initialValue: "blue",
         },
       },
     },
-  })
+  });
   ```
 
   ```ts
   css({
     // ❌ was not allowed before when `strictPropertyValues` was enabled
-    display: 'var(--button-color)', // ✅ will now be allowed/suggested
-  })
+    display: "var(--button-color)", // ✅ will now be allowed/suggested
+  });
   ```
 
   If no `globalVars` are defined, any `var(--*)` will be allowed
@@ -837,8 +863,8 @@
   ```ts
   css({
     // ✅ will be allowed
-    display: 'var(--xxx)',
-  })
+    display: "var(--xxx)",
+  });
   ```
 
 - 340f4f1: Fix `Expression produces a union type that is too complex to represent` with `splitCssProps` because of
@@ -867,21 +893,21 @@
   export default defineConfig({
     semanticTokens: {
       colors: {
-        blue: { value: 'blue' },
+        blue: { value: "blue" },
         green: {
           value: {
-            base: 'green',
-            _dark: 'white',
+            base: "green",
+            _dark: "white",
           },
         },
         red: {
           value: {
-            base: 'red',
+            base: "red",
           },
         },
       },
     },
-  })
+  });
   ```
 
   This is the output of the `styled-system/token` JS token function:
@@ -910,32 +936,32 @@
   Each slot will contain a `${className}__${slotName}` class in addition to the atomic styles.
 
   ```tsx
-  import { sva } from '../styled-system/css'
+  import { sva } from "../styled-system/css";
 
   const button = sva({
-    className: 'btn',
-    slots: ['root', 'text'],
+    className: "btn",
+    slots: ["root", "text"],
     base: {
       root: {
-        bg: 'blue.500',
+        bg: "blue.500",
         _hover: {
           // v--- 🎯 this will target the `text` slot
-          '& .btn__text': {
-            color: 'white',
+          "& .btn__text": {
+            color: "white",
           },
         },
       },
     },
-  })
+  });
 
   export const App = () => {
-    const classes = button()
+    const classes = button();
     return (
       <div className={classes.root}>
         <div className={classes.text}>Click me</div>
       </div>
-    )
-  }
+    );
+  };
   ```
 
 - Updated dependencies [f2fdc48]
@@ -959,11 +985,11 @@
 - 4576a60: Fix nested `styled` factory composition
 
   ```tsx
-  import { styled } from '../styled-system/jsx'
+  import { styled } from "../styled-system/jsx";
 
-  const BasicBox = styled('div', { base: { fontSize: '10px' } })
-  const ExtendedBox1 = styled(BasicBox, { base: { fontSize: '20px' } })
-  const ExtendedBox2 = styled(ExtendedBox1, { base: { fontSize: '30px' } })
+  const BasicBox = styled("div", { base: { fontSize: "10px" } });
+  const ExtendedBox1 = styled(BasicBox, { base: { fontSize: "20px" } });
+  const ExtendedBox2 = styled(ExtendedBox1, { base: { fontSize: "30px" } });
 
   export const App = () => {
     return (
@@ -976,8 +1002,8 @@
         {/* NOW: ✅ fs_30px */}
         <ExtendedBox2>text3</ExtendedBox2>
       </>
-    )
-  }
+    );
+  };
   ```
 
   - @pandacss/core@0.34.3
@@ -998,12 +1024,12 @@
   `Style` like `borderTopStyle`.
 
   ```ts
-  import { css } from '../styled-system/css'
+  import { css } from "../styled-system/css";
 
   css({
-    borderTop: '1px solid red', // ✅ will now be fine as it should be
-    borderTopStyle: 'abc', // ✅ will still report a TS error
-  })
+    borderTop: "1px solid red", // ✅ will now be fine as it should be
+    borderTopStyle: "abc", // ✅ will still report a TS error
+  });
   ```
 
   ```diff
@@ -1099,18 +1125,18 @@
 - d4942e0: Fix the color opacity modifier syntax for `semanticTokens` inside of conditions
 
   ```ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     conditions: {
-      light: '.light &',
-      dark: '.dark &',
+      light: ".light &",
+      dark: ".dark &",
     },
     theme: {
       tokens: {
         colors: {
-          blue: { 500: { value: 'blue' } },
-          green: { 500: { value: 'green' } },
+          blue: { 500: { value: "blue" } },
+          green: { 500: { value: "green" } },
         },
         opacity: {
           half: { value: 0.5 },
@@ -1120,15 +1146,15 @@
         colors: {
           secondary: {
             value: {
-              base: 'red',
-              _light: '{colors.blue.500/32}', // <-- wasn't working as expected
-              _dark: '{colors.green.500/half}',
+              base: "red",
+              _light: "{colors.blue.500/32}", // <-- wasn't working as expected
+              _dark: "{colors.green.500/half}",
             },
           },
         },
       },
     },
-  })
+  });
   ```
 
   will now correctly generate the following CSS:
@@ -1143,11 +1169,19 @@
     }
 
     .light {
-      --colors-secondary: color-mix(in srgb, var(--colors-blue-500) 32%, transparent);
+      --colors-secondary: color-mix(
+        in srgb,
+        var(--colors-blue-500) 32%,
+        transparent
+      );
     }
 
     .dark {
-      --colors-secondary: color-mix(in srgb, var(--colors-green-500) 50%, transparent);
+      --colors-secondary: color-mix(
+        in srgb,
+        var(--colors-green-500) 50%,
+        transparent
+      );
     }
   }
   ```
@@ -1188,15 +1222,15 @@
   class assigned.
 
   ```js
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     preflight: {
-      scope: '.my-scope',
-      level: 'element', // 'element' | 'parent (default)'
+      scope: ".my-scope",
+      level: "element", // 'element' | 'parent (default)'
     },
     // ...
-  })
+  });
   ```
 
   This will generate CSS that looks like:
@@ -1238,20 +1272,20 @@
   export default defaultConfig({
     conditions: {
       extend: {
-        supportHover: ['@media (hover: hover) and (pointer: fine)', '&:hover'],
+        supportHover: ["@media (hover: hover) and (pointer: fine)", "&:hover"],
       },
     },
-  })
+  });
   ```
 
   ```ts
-  import { css } from '../styled-system/css'
+  import { css } from "../styled-system/css";
 
   css({
     _supportHover: {
-      color: 'red',
+      color: "red",
     },
-  })
+  });
   ```
 
   will generate the following CSS:
@@ -1322,10 +1356,10 @@
 
   ```ts
   css({
-    padding: '1px',
-    paddingTop: '3px',
-    paddingBottom: '4px',
-  })
+    padding: "1px",
+    paddingTop: "3px",
+    paddingBottom: "4px",
+  });
   ```
 
   Will now always generate the following css:
@@ -1435,24 +1469,24 @@
     patterns: {
       hstack: {
         properties: {
-          justify: { type: 'property', value: 'justifyContent' },
-          gap: { type: 'property', value: 'gap' },
+          justify: { type: "property", value: "justifyContent" },
+          gap: { type: "property", value: "gap" },
         },
         // you can also use a token like '10'
-        defaultValues: { gap: '40px' },
+        defaultValues: { gap: "40px" },
         transform(props) {
-          const { justify, gap, ...rest } = props
+          const { justify, gap, ...rest } = props;
           return {
-            display: 'flex',
-            alignItems: 'center',
+            display: "flex",
+            alignItems: "center",
             justifyContent: justify,
             gap,
             ...rest,
-          }
+          };
         },
       },
     },
-  })
+  });
   ```
 
 ### Patch Changes
@@ -1494,39 +1528,54 @@
      * Called when the config is resolved, after all the presets are loaded and merged.
      * This is the first hook called, you can use it to tweak the config before the context is created.
      */
-    'config:resolved': (args: { conf: LoadConfigResult }) => MaybeAsyncReturn
+    "config:resolved": (args: { conf: LoadConfigResult }) => MaybeAsyncReturn;
     /**
      * Called when the Panda context has been created and the API is ready to be used.
      */
-    'context:created': (args: { ctx: ApiInterface; logger: LoggerInterface }) => void
+    "context:created": (args: {
+      ctx: ApiInterface;
+      logger: LoggerInterface;
+    }) => void;
     /**
      * Called when the config file or one of its dependencies (imports) has changed.
      */
-    'config:change': (args: { config: UserConfig }) => MaybeAsyncReturn
+    "config:change": (args: { config: UserConfig }) => MaybeAsyncReturn;
     /**
      * Called after reading the file content but before parsing it.
      * You can use this hook to transform the file content to a tsx-friendly syntax so that Panda's parser can parse it.
      * You can also use this hook to parse the file's content on your side using a custom parser, in this case you don't have to return anything.
      */
-    'parser:before': (args: { filePath: string; content: string }) => string | void
+    "parser:before": (args: {
+      filePath: string;
+      content: string;
+    }) => string | void;
     /**
      * Called after the file styles are extracted and processed into the resulting ParserResult object.
      * You can also use this hook to add your own extraction results from your custom parser to the ParserResult object.
      */
-    'parser:after': (args: { filePath: string; result: ParserResultInterface | undefined }) => void
+    "parser:after": (args: {
+      filePath: string;
+      result: ParserResultInterface | undefined;
+    }) => void;
     /**
      * Called after the codegen is completed
      */
-    'codegen:done': () => MaybeAsyncReturn
+    "codegen:done": () => MaybeAsyncReturn;
     /**
      * Called right before adding the design-system CSS (global, static, preflight, tokens, keyframes) to the final CSS
      * Called right before writing/injecting the final CSS (styles.css) that contains the design-system CSS and the parser CSS
      * You can use it to tweak the CSS content before it's written to disk or injected through the postcss plugin.
      */
-    'cssgen:done': (args: {
-      artifact: 'global' | 'static' | 'reset' | 'tokens' | 'keyframes' | 'styles.css'
-      content: string
-    }) => string | void
+    "cssgen:done": (args: {
+      artifact:
+        | "global"
+        | "static"
+        | "reset"
+        | "tokens"
+        | "keyframes"
+        | "styles.css";
+      content: string;
+    }) => string | void;
   }
   ```
 
@@ -1674,18 +1723,18 @@
 
   ```ts
   // config.strictTokens = true
-  css({ display: 'flex' }) // OK, didn't throw
-  css({ display: 'block' }) // OK, didn't throw
-  css({ display: 'abc' }) // ❌ would throw since 'abc' is not part of predefined values of 'display' even thought there is no config token for 'abc'
+  css({ display: "flex" }); // OK, didn't throw
+  css({ display: "block" }); // OK, didn't throw
+  css({ display: "abc" }); // ❌ would throw since 'abc' is not part of predefined values of 'display' even thought there is no config token for 'abc'
   ```
 
   now:
 
   ```ts
   // config.strictTokens = true
-  css({ display: 'flex' }) // OK, didn't throw
-  css({ display: 'block' }) // OK, didn't throw
-  css({ display: 'abc' }) // ✅ will not throw there is no config token for 'abc'
+  css({ display: "flex" }); // OK, didn't throw
+  css({ display: "block" }); // OK, didn't throw
+  css({ display: "abc" }); // ✅ will not throw there is no config token for 'abc'
   ```
 
   Instead, if you want the v.19.0 behavior, you can use the new `config.strictPropertyValues` option. You can combine it
@@ -1696,79 +1745,79 @@
 
   ```ts
   type StrictableProps =
-    | 'alignContent'
-    | 'alignItems'
-    | 'alignSelf'
-    | 'all'
-    | 'animationComposition'
-    | 'animationDirection'
-    | 'animationFillMode'
-    | 'appearance'
-    | 'backfaceVisibility'
-    | 'backgroundAttachment'
-    | 'backgroundClip'
-    | 'borderCollapse'
-    | 'border'
-    | 'borderBlock'
-    | 'borderBlockEnd'
-    | 'borderBlockStart'
-    | 'borderBottom'
-    | 'borderInline'
-    | 'borderInlineEnd'
-    | 'borderInlineStart'
-    | 'borderLeft'
-    | 'borderRight'
-    | 'borderTop'
-    | 'borderBlockEndStyle'
-    | 'borderBlockStartStyle'
-    | 'borderBlockStyle'
-    | 'borderBottomStyle'
-    | 'borderInlineEndStyle'
-    | 'borderInlineStartStyle'
-    | 'borderInlineStyle'
-    | 'borderLeftStyle'
-    | 'borderRightStyle'
-    | 'borderTopStyle'
-    | 'boxDecorationBreak'
-    | 'boxSizing'
-    | 'breakAfter'
-    | 'breakBefore'
-    | 'breakInside'
-    | 'captionSide'
-    | 'clear'
-    | 'columnFill'
-    | 'columnRuleStyle'
-    | 'contentVisibility'
-    | 'direction'
-    | 'display'
-    | 'emptyCells'
-    | 'flexDirection'
-    | 'flexWrap'
-    | 'float'
-    | 'fontKerning'
-    | 'forcedColorAdjust'
-    | 'isolation'
-    | 'lineBreak'
-    | 'mixBlendMode'
-    | 'objectFit'
-    | 'outlineStyle'
-    | 'overflow'
-    | 'overflowX'
-    | 'overflowY'
-    | 'overflowBlock'
-    | 'overflowInline'
-    | 'overflowWrap'
-    | 'pointerEvents'
-    | 'position'
-    | 'resize'
-    | 'scrollBehavior'
-    | 'touchAction'
-    | 'transformBox'
-    | 'transformStyle'
-    | 'userSelect'
-    | 'visibility'
-    | 'wordBreak'
-    | 'writingMode'
+    | "alignContent"
+    | "alignItems"
+    | "alignSelf"
+    | "all"
+    | "animationComposition"
+    | "animationDirection"
+    | "animationFillMode"
+    | "appearance"
+    | "backfaceVisibility"
+    | "backgroundAttachment"
+    | "backgroundClip"
+    | "borderCollapse"
+    | "border"
+    | "borderBlock"
+    | "borderBlockEnd"
+    | "borderBlockStart"
+    | "borderBottom"
+    | "borderInline"
+    | "borderInlineEnd"
+    | "borderInlineStart"
+    | "borderLeft"
+    | "borderRight"
+    | "borderTop"
+    | "borderBlockEndStyle"
+    | "borderBlockStartStyle"
+    | "borderBlockStyle"
+    | "borderBottomStyle"
+    | "borderInlineEndStyle"
+    | "borderInlineStartStyle"
+    | "borderInlineStyle"
+    | "borderLeftStyle"
+    | "borderRightStyle"
+    | "borderTopStyle"
+    | "boxDecorationBreak"
+    | "boxSizing"
+    | "breakAfter"
+    | "breakBefore"
+    | "breakInside"
+    | "captionSide"
+    | "clear"
+    | "columnFill"
+    | "columnRuleStyle"
+    | "contentVisibility"
+    | "direction"
+    | "display"
+    | "emptyCells"
+    | "flexDirection"
+    | "flexWrap"
+    | "float"
+    | "fontKerning"
+    | "forcedColorAdjust"
+    | "isolation"
+    | "lineBreak"
+    | "mixBlendMode"
+    | "objectFit"
+    | "outlineStyle"
+    | "overflow"
+    | "overflowX"
+    | "overflowY"
+    | "overflowBlock"
+    | "overflowInline"
+    | "overflowWrap"
+    | "pointerEvents"
+    | "position"
+    | "resize"
+    | "scrollBehavior"
+    | "touchAction"
+    | "transformBox"
+    | "transformStyle"
+    | "userSelect"
+    | "visibility"
+    | "wordBreak"
+    | "writingMode";
   ```
 
 - Updated dependencies [657ca5da]
@@ -1839,38 +1888,38 @@
 
   ```ts
   const card = defineRecipe({
-    className: 'card',
-    base: { color: 'white' },
+    className: "card",
+    base: { color: "white" },
     variants: {
       size: {
-        small: { fontSize: '14px' },
-        large: { fontSize: '18px' },
+        small: { fontSize: "14px" },
+        large: { fontSize: "18px" },
       },
       visual: {
-        primary: { backgroundColor: 'blue' },
-        secondary: { backgroundColor: 'gray' },
+        primary: { backgroundColor: "blue" },
+        secondary: { backgroundColor: "gray" },
       },
     },
-  })
+  });
 
   export default defineConfig({
     // ...
     staticCss: {
       recipes: {
-        card: ['*'], // this
+        card: ["*"], // this
 
         // was equivalent to:
         card: [
           // notice how `responsive: true` was implicitly added
-          { size: ['*'], responsive: true },
-          { visual: ['*'], responsive: true },
+          { size: ["*"], responsive: true },
+          { visual: ["*"], responsive: true },
         ],
 
         //   will now correctly be equivalent to:
-        card: [{ size: ['*'] }, { visual: ['*'] }],
+        card: [{ size: ["*"] }, { visual: ["*"] }],
       },
     },
-  })
+  });
   ```
 
   Here's the diff in the generated CSS:
@@ -2017,17 +2066,17 @@
 
   ```ts
   css({
-    bg: '[#3B00B9]', // ✅ was okay
+    bg: "[#3B00B9]", // ✅ was okay
     _dark: {
       // ✅ was okay
-      color: '[#3B00B9]',
+      color: "[#3B00B9]",
     },
 
     // ❌ Not okay, will be fixed in this patch
     color: {
-      _dark: '[#3B00B9]',
+      _dark: "[#3B00B9]",
     },
-  })
+  });
   ```
 
 - 647f05c9: Fix a CSS generation issue with `config.strictTokens` when using the `[xxx]` escape-hatch syntax with `!` or
@@ -2035,9 +2084,9 @@
 
   ```ts
   css({
-    borderWidth: '[2px!]',
-    width: '[2px !important]',
-  })
+    borderWidth: "[2px!]",
+    width: "[2px !important]",
+  });
   ```
 
 - Updated dependencies [8f4ce97c]
@@ -2078,18 +2127,18 @@
   and suffixing with `]`, e.g. writing `[123px]` as a value will bypass the token validation.
 
   ```ts
-  import { css } from '../styled-system/css'
+  import { css } from "../styled-system/css";
 
   css({
     // @ts-expect-error TS will throw when using from strictTokens: true
-    color: '#fff',
+    color: "#fff",
     // @ts-expect-error TS will throw when using from strictTokens: true
-    width: '100px',
+    width: "100px",
 
     // ✅ but this is now allowed:
-    bgColor: '[rgb(51 155 240)]',
-    fontSize: '[12px]',
-  })
+    bgColor: "[rgb(51 155 240)]",
+    fontSize: "[12px]",
+  });
   ```
 
 ### Patch Changes
@@ -2123,49 +2172,49 @@
 - 105f74ce: Add a way to specify a recipe's `staticCss` options from inside a recipe config, e.g.:
 
   ```js
-  import { defineRecipe } from '@pandacss/dev'
+  import { defineRecipe } from "@pandacss/dev";
 
   const card = defineRecipe({
-    className: 'card',
-    base: { color: 'white' },
+    className: "card",
+    base: { color: "white" },
     variants: {
       size: {
-        small: { fontSize: '14px' },
-        large: { fontSize: '18px' },
+        small: { fontSize: "14px" },
+        large: { fontSize: "18px" },
       },
     },
-    staticCss: [{ size: ['*'] }],
-  })
+    staticCss: [{ size: ["*"] }],
+  });
   ```
 
   would be the equivalent of defining it inside the main config:
 
   ```js
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
     staticCss: {
       recipes: {
         card: {
-          size: ['*'],
+          size: ["*"],
         },
       },
     },
-  })
+  });
   ```
 
 - 052283c2: Fix vue `styled` factory internal class merging, for example:
 
   ```vue
   <script setup>
-  import { styled } from '../styled-system/jsx'
+  import { styled } from "../styled-system/jsx";
 
-  const StyledButton = styled('button', {
+  const StyledButton = styled("button", {
     base: {
-      bgColor: 'red.300',
+      bgColor: "red.300",
     },
-  })
+  });
   </script>
   <template>
     <StyledButton id="test" class="test">
@@ -2234,18 +2283,18 @@
 
   ```ts
   // config.strictTokens = true
-  css({ display: 'flex' }) // OK, didn't throw
-  css({ display: 'block' }) // OK, didn't throw
-  css({ display: 'abc' }) // ❌ didn't throw even though 'abc' is not a valid value for 'display'
+  css({ display: "flex" }); // OK, didn't throw
+  css({ display: "block" }); // OK, didn't throw
+  css({ display: "abc" }); // ❌ didn't throw even though 'abc' is not a valid value for 'display'
   ```
 
   Now:
 
   ```ts
   // config.strictTokens = true
-  css({ display: 'flex' }) // OK, didn't throw
-  css({ display: 'block' }) // OK, didn't throw
-  css({ display: 'abc' }) // ✅ will throw since 'abc' is not a valid value for 'display'
+  css({ display: "flex" }); // OK, didn't throw
+  css({ display: "block" }); // OK, didn't throw
+  css({ display: "abc" }); // ✅ will throw since 'abc' is not a valid value for 'display'
   ```
 
 - Updated dependencies [61831040]
@@ -2304,22 +2353,28 @@
 - b7cb2073: Add a `splitCssProps` utility exported from the {outdir}/jsx entrypoint
 
   ```tsx
-  import { splitCssProps, styled } from '../styled-system/jsx'
-  import type { HTMLStyledProps } from '../styled-system/types'
+  import { splitCssProps, styled } from "../styled-system/jsx";
+  import type { HTMLStyledProps } from "../styled-system/types";
 
-  function SplitComponent({ children, ...props }: HTMLStyledProps<'div'>) {
-    const [cssProps, restProps] = splitCssProps(props)
+  function SplitComponent({ children, ...props }: HTMLStyledProps<"div">) {
+    const [cssProps, restProps] = splitCssProps(props);
     return (
-      <styled.div {...restProps} className={css({ display: 'flex', height: '20', width: '20' }, cssProps)}>
+      <styled.div
+        {...restProps}
+        className={css(
+          { display: "flex", height: "20", width: "20" },
+          cssProps,
+        )}
+      >
         {children}
       </styled.div>
-    )
+    );
   }
 
   // Usage
 
   function App() {
-    return <SplitComponent margin="2">Click me</SplitComponent>
+    return <SplitComponent margin="2">Click me</SplitComponent>;
   }
   ```
 
@@ -2412,16 +2467,16 @@
   together and the styles will be merged correctly.
 
   ```jsx
-  const Box = styled('div', {
+  const Box = styled("div", {
     base: {
-      background: 'red.light',
-      color: 'white',
+      background: "red.light",
+      color: "white",
     },
-  })
+  });
 
   const ExtendedBox = styled(Box, {
-    base: { background: 'red.dark' },
-  })
+    base: { background: "red.dark" },
+  });
 
   // <ExtendedBox> will have a background of `red.dark` and a color of `white`
   ```
@@ -2434,32 +2489,32 @@
   - CVA or Inline CVA + Config Recipe = ❌
 
   ```jsx
-  import { button } from '../styled-system/recipes'
+  import { button } from "../styled-system/recipes";
 
-  const Button = styled('div', button)
+  const Button = styled("div", button);
 
   // ❌ This will throw an error
   const ExtendedButton = styled(Button, {
-    base: { background: 'red.dark' },
-  })
+    base: { background: "red.dark" },
+  });
   ```
 
 - fbf062c6: Added a new type to extract variants out of styled components
 
   ```tsx
-  import { StyledVariantProps } from '../styled-system/jsx'
+  import { StyledVariantProps } from "../styled-system/jsx";
 
-  const Button = styled('button', {
-    base: { color: 'black' },
+  const Button = styled("button", {
+    base: { color: "black" },
     variants: {
       state: {
-        error: { color: 'red' },
-        success: { color: 'green' },
+        error: { color: "red" },
+        success: { color: "green" },
       },
     },
-  })
+  });
 
-  type ButtonVariantProps = StyledVariantProps<typeof Button>
+  type ButtonVariantProps = StyledVariantProps<typeof Button>;
   //   ^ { state?: 'error' | 'success' | undefined }
   ```
 
@@ -2561,9 +2616,9 @@
 
   ```ts
   interface FactoryOptions<TProps extends Dict> {
-    dataAttr?: boolean
-    defaultProps?: TProps
-    shouldForwardProp?(prop: string, variantKeys: string[]): boolean
+    dataAttr?: boolean;
+    defaultProps?: TProps;
+    shouldForwardProp?(prop: string, variantKeys: string[]): boolean;
   }
   ```
 
@@ -2571,16 +2626,16 @@
     This is useful for testing and debugging.
 
   ```jsx
-  import { styled } from '../styled-system/jsx'
-  import { button } from '../styled-system/recipes'
+  import { styled } from "../styled-system/jsx";
+  import { button } from "../styled-system/recipes";
 
-  const Button = styled('button', button, { dataAttr: true })
+  const Button = styled("button", button, { dataAttr: true });
 
   const App = () => (
     <Button variant="secondary" mt="10px">
       Button
     </Button>
-  )
+  );
   // Will render something like <button data-recipe="button" class="btn btn--variant_purple mt_10px">Button</button>
   ```
 
@@ -2588,17 +2643,17 @@
     override the default variants or base styles of a recipe.
 
   ```jsx
-  import { styled } from '../styled-system/jsx'
-  import { button } from '../styled-system/recipes'
+  import { styled } from "../styled-system/jsx";
+  import { button } from "../styled-system/recipes";
 
-  const Button = styled('button', button, {
+  const Button = styled("button", button, {
     defaultProps: {
-      variant: 'secondary',
-      px: '10px',
+      variant: "secondary",
+      px: "10px",
     },
-  })
+  });
 
-  const App = () => <Button>Button</Button>
+  const App = () => <Button>Button</Button>;
   // Will render something like <button class="btn btn--variant_secondary px_10px">Button</button>
   ```
 
@@ -2606,19 +2661,20 @@
     props except recipe variants and style props are forwarded.
 
   ```jsx
-  import { styled } from '../styled-system/jsx'
-  import { button } from '../styled-system/recipes'
-  import { isCssProperty } from '../styled-system/jsx'
-  import { motion, isValidMotionProp } from 'framer-motion'
+  import { styled } from "../styled-system/jsx";
+  import { button } from "../styled-system/recipes";
+  import { isCssProperty } from "../styled-system/jsx";
+  import { motion, isValidMotionProp } from "framer-motion";
 
   const StyledMotion = styled(
     motion.div,
     {},
     {
       shouldForwardProp: (prop, variantKeys) =>
-        isValidMotionProp(prop) || (!variantKeys.includes(prop) && !isCssProperty(prop)),
+        isValidMotionProp(prop) ||
+        (!variantKeys.includes(prop) && !isCssProperty(prop)),
     },
-  )
+  );
   ```
 
   - @pandacss/types@0.15.4
@@ -2641,42 +2697,42 @@
 
   ```ts
   export default defineConfig({
-    outdir: './outdir',
+    outdir: "./outdir",
     importMap: {
-      css: '#panda/styled-system/css',
-      recipes: '#panda/styled-system/recipes',
-      patterns: '#panda/styled-system/patterns',
-      jsx: '#panda/styled-system/jsx',
+      css: "#panda/styled-system/css",
+      recipes: "#panda/styled-system/recipes",
+      patterns: "#panda/styled-system/patterns",
+      jsx: "#panda/styled-system/jsx",
     },
-  })
+  });
   ```
 
   Or you could also make your outdir an actual package from your monorepo:
 
   ```ts
   export default defineConfig({
-    outdir: '../packages/styled-system',
+    outdir: "../packages/styled-system",
     importMap: {
-      css: '@monorepo/styled-system',
-      recipes: '@monorepo/styled-system',
-      patterns: '@monorepo/styled-system',
-      jsx: '@monorepo/styled-system',
+      css: "@monorepo/styled-system",
+      recipes: "@monorepo/styled-system",
+      patterns: "@monorepo/styled-system",
+      jsx: "@monorepo/styled-system",
     },
-  })
+  });
   ```
 
   Working with tsconfig paths aliases is easy:
 
   ```ts
   export default defineConfig({
-    outdir: 'styled-system',
+    outdir: "styled-system",
     importMap: {
-      css: 'styled-system/css',
-      recipes: 'styled-system/recipes',
-      patterns: 'styled-system/patterns',
-      jsx: 'styled-system/jsx',
+      css: "styled-system/css",
+      recipes: "styled-system/recipes",
+      patterns: "styled-system/patterns",
+      jsx: "styled-system/jsx",
     },
-  })
+  });
   ```
 
 - 1eb31118: Automatically allow overriding config recipe compoundVariants styles within the `styled` JSX factory,
@@ -2686,22 +2742,22 @@
 
   ```ts file="panda.config.ts"
   const button = defineRecipe({
-    className: 'btn',
-    base: { color: 'green', fontSize: '16px' },
+    className: "btn",
+    base: { color: "green", fontSize: "16px" },
     variants: {
-      size: { small: { fontSize: '14px' } },
+      size: { small: { fontSize: "14px" } },
     },
-    compoundVariants: [{ size: 'small', css: { color: 'blue' } }],
-  })
+    compoundVariants: [{ size: "small", css: { color: "blue" } }],
+  });
   ```
 
   This would previously not merge the `color` property overrides, but now it does:
 
   ```tsx file="example.tsx"
-  import { styled } from '../styled-system/jsx'
-  import { button } from '../styled-system/recipes'
+  import { styled } from "../styled-system/jsx";
+  import { button } from "../styled-system/recipes";
 
-  const Button = styled('button', button)
+  const Button = styled("button", button);
 
   function App() {
     return (
@@ -2710,7 +2766,7 @@
           Click me
         </Button>
       </>
-    )
+    );
   }
   ```
 
@@ -2889,8 +2945,8 @@
     passed in. This is to allow the `css` function to merge the styles correctly.
 
   ```tsx
-  import { css } from '../styled-system/css'
-  css({ mx: '3', paddingTop: '4' }, { mx: '10', pt: '6' }) // => mx_10 pt_6
+  import { css } from "../styled-system/css";
+  css({ mx: "3", paddingTop: "4" }, { mx: "10", pt: "6" }); // => mx_10 pt_6
   ```
 
   > ⚠️ This approach should be preferred for merging styles over the current `cx` function, which will be reverted to
@@ -2915,26 +2971,29 @@
   be merged correctly.
 
   ```tsx title="src/components/Button.tsx"
-  import { css } from '../../styled-system/css'
+  import { css } from "../../styled-system/css";
 
   export const Button = ({ css: cssProp = {}, children }) => {
-    const className = css({ display: 'flex', alignItem: 'center', color: 'black' }, cssProp)
-    return <button className={className}>{children}</button>
-  }
+    const className = css(
+      { display: "flex", alignItem: "center", color: "black" },
+      cssProp,
+    );
+    return <button className={className}>{children}</button>;
+  };
   ```
 
   Then you can use the `Button` component like this:
 
   ```tsx title="src/app/page.tsx"
-  import { css } from '../../styled-system/css'
-  import { Button, Thingy } from './Button'
+  import { css } from "../../styled-system/css";
+  import { Button, Thingy } from "./Button";
 
   export default function Page() {
     return (
-      <Button css={{ color: 'pink', _hover: { color: 'red' } }}>
+      <Button css={{ color: "pink", _hover: { color: "red" } }}>
         will result in `class="d_flex items_center text_pink hover:text_red"`
       </Button>
-    )
+    );
   }
   ```
 
@@ -2946,51 +3005,51 @@
   **Pattern Example:**
 
   ```tsx title="src/components/Button.tsx"
-  import { hstack } from '../../styled-system/patterns'
-  import { css, cva } from '../../styled-system/css'
+  import { hstack } from "../../styled-system/patterns";
+  import { css, cva } from "../../styled-system/css";
 
   export const Button = ({ css: cssProp = {}, children }) => {
     // using the flex pattern
     const hstackProps = hstack.raw({
-      border: '1px solid',
-      _hover: { color: 'blue.400' },
-    })
+      border: "1px solid",
+      _hover: { color: "blue.400" },
+    });
 
     // merging the styles
-    const className = css(hstackProps, cssProp)
+    const className = css(hstackProps, cssProp);
 
-    return <button className={className}>{children}</button>
-  }
+    return <button className={className}>{children}</button>;
+  };
   ```
 
   **CVA Example:**
 
   ```tsx title="src/components/Button.tsx"
-  import { css, cva } from '../../styled-system/css'
+  import { css, cva } from "../../styled-system/css";
 
   const buttonRecipe = cva({
-    base: { display: 'flex', fontSize: 'lg' },
+    base: { display: "flex", fontSize: "lg" },
     variants: {
       variant: {
-        primary: { color: 'white', backgroundColor: 'blue.500' },
+        primary: { color: "white", backgroundColor: "blue.500" },
       },
     },
-  })
+  });
 
   export const Button = ({ css: cssProp = {}, children }) => {
     const className = css(
       // using the button recipe
-      buttonRecipe.raw({ variant: 'primary' }),
+      buttonRecipe.raw({ variant: "primary" }),
 
       // adding style overrides (internal)
-      { _hover: { color: 'blue.400' } },
+      { _hover: { color: "blue.400" } },
 
       // adding style overrides (external)
       cssProp,
-    )
+    );
 
-    return <button className={className}>{props.children}</button>
-  }
+    return <button className={className}>{props.children}</button>;
+  };
   ```
 
 - 36fdff89: Fix bug in generated js code for atomic slot recipe produce where `splitVariantProps` didn't work without
@@ -3037,7 +3096,14 @@
   Example:
 
   ```tsx
-  <h1 className={cx(css({ mx: '3', paddingTop: '4' }), css({ mx: '10', pt: '6' }))}>Will result in "mx_10 pt_6"</h1>
+  <h1
+    className={cx(
+      css({ mx: "3", paddingTop: "4" }),
+      css({ mx: "10", pt: "6" }),
+    )}
+  >
+    Will result in "mx_10 pt_6"
+  </h1>
   ```
 
 - dfb3f85f: Add missing svg props types
@@ -3082,12 +3148,12 @@
   **Definition**
 
   ```jsx
-  import { sva } from 'styled-system/css'
+  import { sva } from "styled-system/css";
 
   const button = sva({
-    slots: ['label', 'icon'],
+    slots: ["label", "icon"],
     base: {
-      label: { color: 'red', textDecoration: 'underline' },
+      label: { color: "red", textDecoration: "underline" },
     },
     variants: {
       rounded: {
@@ -3095,33 +3161,33 @@
       },
       size: {
         sm: {
-          label: { fontSize: 'sm' },
-          icon: { fontSize: 'sm' },
+          label: { fontSize: "sm" },
+          icon: { fontSize: "sm" },
         },
         lg: {
-          label: { fontSize: 'lg' },
-          icon: { fontSize: 'lg', color: 'pink' },
+          label: { fontSize: "lg" },
+          icon: { fontSize: "lg", color: "pink" },
         },
       },
     },
     defaultVariants: {
-      size: 'sm',
+      size: "sm",
     },
-  })
+  });
   ```
 
   **Usage**
 
   ```jsx
   export function App() {
-    const btnClass = button({ size: 'lg', rounded: true })
+    const btnClass = button({ size: "lg", rounded: true });
 
     return (
       <button>
         <p class={btnClass.label}> Label</p>
         <p class={btnClass.icon}> Icon</p>
       </button>
-    )
+    );
   }
   ```
 
@@ -3186,26 +3252,26 @@
   Update the `jsx` property to be used for advanced tracking of custom pattern components.
 
   ```jsx
-  import { Circle } from 'styled-system/jsx'
+  import { Circle } from "styled-system/jsx";
   const CustomCircle = ({ children, ...props }) => {
-    return <Circle {...props}>{children}</Circle>
-  }
+    return <Circle {...props}>{children}</Circle>;
+  };
   ```
 
   To track the `CustomCircle` component, you can now use the `jsx` property.
 
   ```js
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     patterns: {
       extend: {
         circle: {
-          jsx: ['CustomCircle'],
+          jsx: ["CustomCircle"],
         },
       },
     },
-  })
+  });
   ```
 
 ### Patch Changes
@@ -3303,9 +3369,17 @@
   ```tsx
   const ComponentWithMultipleRecipes = ({ variant }) => {
     return (
-      <button className={cx(pinkRecipe({ variant }), greenRecipe({ variant }), blueRecipe({ variant }))}>Hello</button>
-    )
-  }
+      <button
+        className={cx(
+          pinkRecipe({ variant }),
+          greenRecipe({ variant }),
+          blueRecipe({ variant }),
+        )}
+      >
+        Hello
+      </button>
+    );
+  };
   ```
 
   Given a `panda.config.ts` with recipes each including a common `jsx` tag name, such as:
@@ -3389,7 +3463,7 @@
   ```ts
   staticCss: {
     recipes: {
-      button: [{ size: ['*'], shape: ['*'] }]
+      button: [{ size: ["*"], shape: ["*"] }];
     }
   }
   ```
@@ -3399,7 +3473,7 @@
   ```ts
   staticCss: {
     recipes: {
-      button: ['*']
+      button: ["*"];
     }
   }
   ```
@@ -3437,8 +3511,8 @@
   // panda.config.ts
   export default defineConfig({
     //...
-    syntax: 'template-literal',
-  })
+    syntax: "template-literal",
+  });
   ```
 
   > For existing projects, you might need to run the `panda codegen --clean`
@@ -3470,12 +3544,12 @@
 - 5b344b9c: Add support for disabling shorthand props
 
   ```ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
     shorthands: false,
-  })
+  });
   ```
 
 ### Patch Changes
@@ -3595,11 +3669,11 @@ This hook is called right before writing the codegen files to disk. You can use
 export default defineConfig({
   // ...
   hooks: {
-    'codegen:prepare': ({ artifacts, changed }) => {
+    "codegen:prepare": ({ artifacts, changed }) => {
       // do something with the emitted js/d.ts files
     },
   },
-})
+});
 ```
 
 - 49c760cd: Fix issue where responsive array in css and cva doesn't generate the correct classname
@@ -3617,11 +3691,11 @@ export default defineConfig({
   ```js
   module.exports = {
     plugins: {
-      '@pandacss/dev/postcss': {
-        logfile: './logs/panda.log',
+      "@pandacss/dev/postcss": {
+        logfile: "./logs/panda.log",
       },
     },
-  }
+  };
   ```
 
 - Updated dependencies [74485ef1]
@@ -3660,24 +3734,24 @@ export default defineConfig({
     patterns: {
       hstack: {
         properties: {
-          justify: { type: 'property', value: 'justifyContent' },
-          gap: { type: 'property', value: 'gap' },
+          justify: { type: "property", value: "justifyContent" },
+          gap: { type: "property", value: "gap" },
         },
         // you can also use a token like '10'
-        defaultValues: { gap: '40px' },
+        defaultValues: { gap: "40px" },
         transform(props) {
-          const { justify, gap, ...rest } = props
+          const { justify, gap, ...rest } = props;
           return {
-            display: 'flex',
-            alignItems: 'center',
+            display: "flex",
+            alignItems: "center",
             justifyContent: justify,
             gap,
             ...rest,
-          }
+          };
         },
       },
     },
-  })
+  });
   ```
 
 ### Patch Changes
@@ -3719,39 +3793,54 @@ export default defineConfig({
      * Called when the config is resolved, after all the presets are loaded and merged.
      * This is the first hook called, you can use it to tweak the config before the context is created.
      */
-    'config:resolved': (args: { conf: LoadConfigResult }) => MaybeAsyncReturn
+    "config:resolved": (args: { conf: LoadConfigResult }) => MaybeAsyncReturn;
     /**
      * Called when the Panda context has been created and the API is ready to be used.
      */
-    'context:created': (args: { ctx: ApiInterface; logger: LoggerInterface }) => void
+    "context:created": (args: {
+      ctx: ApiInterface;
+      logger: LoggerInterface;
+    }) => void;
     /**
      * Called when the config file or one of its dependencies (imports) has changed.
      */
-    'config:change': (args: { config: UserConfig }) => MaybeAsyncReturn
+    "config:change": (args: { config: UserConfig }) => MaybeAsyncReturn;
     /**
      * Called after reading the file content but before parsing it.
      * You can use this hook to transform the file content to a tsx-friendly syntax so that Panda's parser can parse it.
      * You can also use this hook to parse the file's content on your side using a custom parser, in this case you don't have to return anything.
      */
-    'parser:before': (args: { filePath: string; content: string }) => string | void
+    "parser:before": (args: {
+      filePath: string;
+      content: string;
+    }) => string | void;
     /**
      * Called after the file styles are extracted and processed into the resulting ParserResult object.
      * You can also use this hook to add your own extraction results from your custom parser to the ParserResult object.
      */
-    'parser:after': (args: { filePath: string; result: ParserResultInterface | undefined }) => void
+    "parser:after": (args: {
+      filePath: string;
+      result: ParserResultInterface | undefined;
+    }) => void;
     /**
      * Called after the codegen is completed
      */
-    'codegen:done': () => MaybeAsyncReturn
+    "codegen:done": () => MaybeAsyncReturn;
     /**
      * Called right before adding the design-system CSS (global, static, preflight, tokens, keyframes) to the final CSS
      * Called right before writing/injecting the final CSS (styles.css) that contains the design-system CSS and the parser CSS
      * You can use it to tweak the CSS content before it's written to disk or injected through the postcss plugin.
      */
-    'cssgen:done': (args: {
-      artifact: 'global' | 'static' | 'reset' | 'tokens' | 'keyframes' | 'styles.css'
-      content: string
-    }) => string | void
+    "cssgen:done": (args: {
+      artifact:
+        | "global"
+        | "static"
+        | "reset"
+        | "tokens"
+        | "keyframes"
+        | "styles.css";
+      content: string;
+    }) => string | void;
   }
   ```
 
@@ -3899,18 +3988,18 @@ export default defineConfig({
 
   ```ts
   // config.strictTokens = true
-  css({ display: 'flex' }) // OK, didn't throw
-  css({ display: 'block' }) // OK, didn't throw
-  css({ display: 'abc' }) // ❌ would throw since 'abc' is not part of predefined values of 'display' even thought there is no config token for 'abc'
+  css({ display: "flex" }); // OK, didn't throw
+  css({ display: "block" }); // OK, didn't throw
+  css({ display: "abc" }); // ❌ would throw since 'abc' is not part of predefined values of 'display' even thought there is no config token for 'abc'
   ```
 
   now:
 
   ```ts
   // config.strictTokens = true
-  css({ display: 'flex' }) // OK, didn't throw
-  css({ display: 'block' }) // OK, didn't throw
-  css({ display: 'abc' }) // ✅ will not throw there is no config token for 'abc'
+  css({ display: "flex" }); // OK, didn't throw
+  css({ display: "block" }); // OK, didn't throw
+  css({ display: "abc" }); // ✅ will not throw there is no config token for 'abc'
   ```
 
   Instead, if you want the v.19.0 behavior, you can use the new `config.strictPropertyValues` option. You can combine it
@@ -3921,79 +4010,79 @@ export default defineConfig({
 
   ```ts
   type StrictableProps =
-    | 'alignContent'
-    | 'alignItems'
-    | 'alignSelf'
-    | 'all'
-    | 'animationComposition'
-    | 'animationDirection'
-    | 'animationFillMode'
-    | 'appearance'
-    | 'backfaceVisibility'
-    | 'backgroundAttachment'
-    | 'backgroundClip'
-    | 'borderCollapse'
-    | 'border'
-    | 'borderBlock'
-    | 'borderBlockEnd'
-    | 'borderBlockStart'
-    | 'borderBottom'
-    | 'borderInline'
-    | 'borderInlineEnd'
-    | 'borderInlineStart'
-    | 'borderLeft'
-    | 'borderRight'
-    | 'borderTop'
-    | 'borderBlockEndStyle'
-    | 'borderBlockStartStyle'
-    | 'borderBlockStyle'
-    | 'borderBottomStyle'
-    | 'borderInlineEndStyle'
-    | 'borderInlineStartStyle'
-    | 'borderInlineStyle'
-    | 'borderLeftStyle'
-    | 'borderRightStyle'
-    | 'borderTopStyle'
-    | 'boxDecorationBreak'
-    | 'boxSizing'
-    | 'breakAfter'
-    | 'breakBefore'
-    | 'breakInside'
-    | 'captionSide'
-    | 'clear'
-    | 'columnFill'
-    | 'columnRuleStyle'
-    | 'contentVisibility'
-    | 'direction'
-    | 'display'
-    | 'emptyCells'
-    | 'flexDirection'
-    | 'flexWrap'
-    | 'float'
-    | 'fontKerning'
-    | 'forcedColorAdjust'
-    | 'isolation'
-    | 'lineBreak'
-    | 'mixBlendMode'
-    | 'objectFit'
-    | 'outlineStyle'
-    | 'overflow'
-    | 'overflowX'
-    | 'overflowY'
-    | 'overflowBlock'
-    | 'overflowInline'
-    | 'overflowWrap'
-    | 'pointerEvents'
-    | 'position'
-    | 'resize'
-    | 'scrollBehavior'
-    | 'touchAction'
-    | 'transformBox'
-    | 'transformStyle'
-    | 'userSelect'
-    | 'visibility'
-    | 'wordBreak'
-    | 'writingMode'
+    | "alignContent"
+    | "alignItems"
+    | "alignSelf"
+    | "all"
+    | "animationComposition"
+    | "animationDirection"
+    | "animationFillMode"
+    | "appearance"
+    | "backfaceVisibility"
+    | "backgroundAttachment"
+    | "backgroundClip"
+    | "borderCollapse"
+    | "border"
+    | "borderBlock"
+    | "borderBlockEnd"
+    | "borderBlockStart"
+    | "borderBottom"
+    | "borderInline"
+    | "borderInlineEnd"
+    | "borderInlineStart"
+    | "borderLeft"
+    | "borderRight"
+    | "borderTop"
+    | "borderBlockEndStyle"
+    | "borderBlockStartStyle"
+    | "borderBlockStyle"
+    | "borderBottomStyle"
+    | "borderInlineEndStyle"
+    | "borderInlineStartStyle"
+    | "borderInlineStyle"
+    | "borderLeftStyle"
+    | "borderRightStyle"
+    | "borderTopStyle"
+    | "boxDecorationBreak"
+    | "boxSizing"
+    | "breakAfter"
+    | "breakBefore"
+    | "breakInside"
+    | "captionSide"
+    | "clear"
+    | "columnFill"
+    | "columnRuleStyle"
+    | "contentVisibility"
+    | "direction"
+    | "display"
+    | "emptyCells"
+    | "flexDirection"
+    | "flexWrap"
+    | "float"
+    | "fontKerning"
+    | "forcedColorAdjust"
+    | "isolation"
+    | "lineBreak"
+    | "mixBlendMode"
+    | "objectFit"
+    | "outlineStyle"
+    | "overflow"
+    | "overflowX"
+    | "overflowY"
+    | "overflowBlock"
+    | "overflowInline"
+    | "overflowWrap"
+    | "pointerEvents"
+    | "position"
+    | "resize"
+    | "scrollBehavior"
+    | "touchAction"
+    | "transformBox"
+    | "transformStyle"
+    | "userSelect"
+    | "visibility"
+    | "wordBreak"
+    | "writingMode";
   ```
 
 - Updated dependencies [657ca5da]
@@ -4064,38 +4153,38 @@ export default defineConfig({
 
   ```ts
   const card = defineRecipe({
-    className: 'card',
-    base: { color: 'white' },
+    className: "card",
+    base: { color: "white" },
     variants: {
       size: {
-        small: { fontSize: '14px' },
-        large: { fontSize: '18px' },
+        small: { fontSize: "14px" },
+        large: { fontSize: "18px" },
       },
       visual: {
-        primary: { backgroundColor: 'blue' },
-        secondary: { backgroundColor: 'gray' },
+        primary: { backgroundColor: "blue" },
+        secondary: { backgroundColor: "gray" },
       },
     },
-  })
+  });
 
   export default defineConfig({
     // ...
     staticCss: {
       recipes: {
-        card: ['*'], // this
+        card: ["*"], // this
 
         // was equivalent to:
         card: [
           // notice how `responsive: true` was implicitly added
-          { size: ['*'], responsive: true },
-          { visual: ['*'], responsive: true },
+          { size: ["*"], responsive: true },
+          { visual: ["*"], responsive: true },
         ],
 
         //   will now correctly be equivalent to:
-        card: [{ size: ['*'] }, { visual: ['*'] }],
+        card: [{ size: ["*"] }, { visual: ["*"] }],
       },
     },
-  })
+  });
   ```
 
   Here's the diff in the generated CSS:
@@ -4242,17 +4331,17 @@ export default defineConfig({
 
   ```ts
   css({
-    bg: '[#3B00B9]', // ✅ was okay
+    bg: "[#3B00B9]", // ✅ was okay
     _dark: {
       // ✅ was okay
-      color: '[#3B00B9]',
+      color: "[#3B00B9]",
     },
 
     // ❌ Not okay, will be fixed in this patch
     color: {
-      _dark: '[#3B00B9]',
+      _dark: "[#3B00B9]",
     },
-  })
+  });
   ```
 
 - 647f05c9: Fix a CSS generation issue with `config.strictTokens` when using the `[xxx]` escape-hatch syntax with `!` or
@@ -4260,9 +4349,9 @@ export default defineConfig({
 
   ```ts
   css({
-    borderWidth: '[2px!]',
-    width: '[2px !important]',
-  })
+    borderWidth: "[2px!]",
+    width: "[2px !important]",
+  });
   ```
 
 - Updated dependencies [8f4ce97c]
@@ -4303,18 +4392,18 @@ export default defineConfig({
   and suffixing with `]`, e.g. writing `[123px]` as a value will bypass the token validation.
 
   ```ts
-  import { css } from '../styled-system/css'
+  import { css } from "../styled-system/css";
 
   css({
     // @ts-expect-error TS will throw when using from strictTokens: true
-    color: '#fff',
+    color: "#fff",
     // @ts-expect-error TS will throw when using from strictTokens: true
-    width: '100px',
+    width: "100px",
 
     // ✅ but this is now allowed:
-    bgColor: '[rgb(51 155 240)]',
-    fontSize: '[12px]',
-  })
+    bgColor: "[rgb(51 155 240)]",
+    fontSize: "[12px]",
+  });
   ```
 
 ### Patch Changes
@@ -4348,49 +4437,49 @@ export default defineConfig({
 - 105f74ce: Add a way to specify a recipe's `staticCss` options from inside a recipe config, e.g.:
 
   ```js
-  import { defineRecipe } from '@pandacss/dev'
+  import { defineRecipe } from "@pandacss/dev";
 
   const card = defineRecipe({
-    className: 'card',
-    base: { color: 'white' },
+    className: "card",
+    base: { color: "white" },
     variants: {
       size: {
-        small: { fontSize: '14px' },
-        large: { fontSize: '18px' },
+        small: { fontSize: "14px" },
+        large: { fontSize: "18px" },
       },
     },
-    staticCss: [{ size: ['*'] }],
-  })
+    staticCss: [{ size: ["*"] }],
+  });
   ```
 
   would be the equivalent of defining it inside the main config:
 
   ```js
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
     staticCss: {
       recipes: {
         card: {
-          size: ['*'],
+          size: ["*"],
         },
       },
     },
-  })
+  });
   ```
 
 - 052283c2: Fix vue `styled` factory internal class merging, for example:
 
   ```vue
   <script setup>
-  import { styled } from '../styled-system/jsx'
+  import { styled } from "../styled-system/jsx";
 
-  const StyledButton = styled('button', {
+  const StyledButton = styled("button", {
     base: {
-      bgColor: 'red.300',
+      bgColor: "red.300",
     },
-  })
+  });
   </script>
   <template>
     <StyledButton id="test" class="test">
@@ -4459,18 +4548,18 @@ export default defineConfig({
 
   ```ts
   // config.strictTokens = true
-  css({ display: 'flex' }) // OK, didn't throw
-  css({ display: 'block' }) // OK, didn't throw
-  css({ display: 'abc' }) // ❌ didn't throw even though 'abc' is not a valid value for 'display'
+  css({ display: "flex" }); // OK, didn't throw
+  css({ display: "block" }); // OK, didn't throw
+  css({ display: "abc" }); // ❌ didn't throw even though 'abc' is not a valid value for 'display'
   ```
 
   Now:
 
   ```ts
   // config.strictTokens = true
-  css({ display: 'flex' }) // OK, didn't throw
-  css({ display: 'block' }) // OK, didn't throw
-  css({ display: 'abc' }) // ✅ will throw since 'abc' is not a valid value for 'display'
+  css({ display: "flex" }); // OK, didn't throw
+  css({ display: "block" }); // OK, didn't throw
+  css({ display: "abc" }); // ✅ will throw since 'abc' is not a valid value for 'display'
   ```
 
 - Updated dependencies [61831040]
@@ -4529,22 +4618,28 @@ export default defineConfig({
 - b7cb2073: Add a `splitCssProps` utility exported from the {outdir}/jsx entrypoint
 
   ```tsx
-  import { splitCssProps, styled } from '../styled-system/jsx'
-  import type { HTMLStyledProps } from '../styled-system/types'
+  import { splitCssProps, styled } from "../styled-system/jsx";
+  import type { HTMLStyledProps } from "../styled-system/types";
 
-  function SplitComponent({ children, ...props }: HTMLStyledProps<'div'>) {
-    const [cssProps, restProps] = splitCssProps(props)
+  function SplitComponent({ children, ...props }: HTMLStyledProps<"div">) {
+    const [cssProps, restProps] = splitCssProps(props);
     return (
-      <styled.div {...restProps} className={css({ display: 'flex', height: '20', width: '20' }, cssProps)}>
+      <styled.div
+        {...restProps}
+        className={css(
+          { display: "flex", height: "20", width: "20" },
+          cssProps,
+        )}
+      >
         {children}
       </styled.div>
-    )
+    );
   }
 
   // Usage
 
   function App() {
-    return <SplitComponent margin="2">Click me</SplitComponent>
+    return <SplitComponent margin="2">Click me</SplitComponent>;
   }
   ```
 
@@ -4637,16 +4732,16 @@ export default defineConfig({
   together and the styles will be merged correctly.
 
   ```jsx
-  const Box = styled('div', {
+  const Box = styled("div", {
     base: {
-      background: 'red.light',
-      color: 'white',
+      background: "red.light",
+      color: "white",
     },
-  })
+  });
 
   const ExtendedBox = styled(Box, {
-    base: { background: 'red.dark' },
-  })
+    base: { background: "red.dark" },
+  });
 
   // <ExtendedBox> will have a background of `red.dark` and a color of `white`
   ```
@@ -4659,32 +4754,32 @@ export default defineConfig({
   - CVA or Inline CVA + Config Recipe = ❌
 
   ```jsx
-  import { button } from '../styled-system/recipes'
+  import { button } from "../styled-system/recipes";
 
-  const Button = styled('div', button)
+  const Button = styled("div", button);
 
   // ❌ This will throw an error
   const ExtendedButton = styled(Button, {
-    base: { background: 'red.dark' },
-  })
+    base: { background: "red.dark" },
+  });
   ```
 
 - fbf062c6: Added a new type to extract variants out of styled components
 
   ```tsx
-  import { StyledVariantProps } from '../styled-system/jsx'
+  import { StyledVariantProps } from "../styled-system/jsx";
 
-  const Button = styled('button', {
-    base: { color: 'black' },
+  const Button = styled("button", {
+    base: { color: "black" },
     variants: {
       state: {
-        error: { color: 'red' },
-        success: { color: 'green' },
+        error: { color: "red" },
+        success: { color: "green" },
       },
     },
-  })
+  });
 
-  type ButtonVariantProps = StyledVariantProps<typeof Button>
+  type ButtonVariantProps = StyledVariantProps<typeof Button>;
   //   ^ { state?: 'error' | 'success' | undefined }
   ```
 
@@ -4786,9 +4881,9 @@ export default defineConfig({
 
   ```ts
   interface FactoryOptions<TProps extends Dict> {
-    dataAttr?: boolean
-    defaultProps?: TProps
-    shouldForwardProp?(prop: string, variantKeys: string[]): boolean
+    dataAttr?: boolean;
+    defaultProps?: TProps;
+    shouldForwardProp?(prop: string, variantKeys: string[]): boolean;
   }
   ```
 
@@ -4796,16 +4891,16 @@ export default defineConfig({
     This is useful for testing and debugging.
 
   ```jsx
-  import { styled } from '../styled-system/jsx'
-  import { button } from '../styled-system/recipes'
+  import { styled } from "../styled-system/jsx";
+  import { button } from "../styled-system/recipes";
 
-  const Button = styled('button', button, { dataAttr: true })
+  const Button = styled("button", button, { dataAttr: true });
 
   const App = () => (
     <Button variant="secondary" mt="10px">
       Button
     </Button>
-  )
+  );
   // Will render something like <button data-recipe="button" class="btn btn--variant_purple mt_10px">Button</button>
   ```
 
@@ -4813,17 +4908,17 @@ export default defineConfig({
     override the default variants or base styles of a recipe.
 
   ```jsx
-  import { styled } from '../styled-system/jsx'
-  import { button } from '../styled-system/recipes'
+  import { styled } from "../styled-system/jsx";
+  import { button } from "../styled-system/recipes";
 
-  const Button = styled('button', button, {
+  const Button = styled("button", button, {
     defaultProps: {
-      variant: 'secondary',
-      px: '10px',
+      variant: "secondary",
+      px: "10px",
     },
-  })
+  });
 
-  const App = () => <Button>Button</Button>
+  const App = () => <Button>Button</Button>;
   // Will render something like <button class="btn btn--variant_secondary px_10px">Button</button>
   ```
 
@@ -4831,19 +4926,20 @@ export default defineConfig({
     props except recipe variants and style props are forwarded.
 
   ```jsx
-  import { styled } from '../styled-system/jsx'
-  import { button } from '../styled-system/recipes'
-  import { isCssProperty } from '../styled-system/jsx'
-  import { motion, isValidMotionProp } from 'framer-motion'
+  import { styled } from "../styled-system/jsx";
+  import { button } from "../styled-system/recipes";
+  import { isCssProperty } from "../styled-system/jsx";
+  import { motion, isValidMotionProp } from "framer-motion";
 
   const StyledMotion = styled(
     motion.div,
     {},
     {
       shouldForwardProp: (prop, variantKeys) =>
-        isValidMotionProp(prop) || (!variantKeys.includes(prop) && !isCssProperty(prop)),
+        isValidMotionProp(prop) ||
+        (!variantKeys.includes(prop) && !isCssProperty(prop)),
     },
-  )
+  );
   ```
 
   - @pandacss/types@0.15.4
@@ -4866,42 +4962,42 @@ export default defineConfig({
 
   ```ts
   export default defineConfig({
-    outdir: './outdir',
+    outdir: "./outdir",
     importMap: {
-      css: '#panda/styled-system/css',
-      recipes: '#panda/styled-system/recipes',
-      patterns: '#panda/styled-system/patterns',
-      jsx: '#panda/styled-system/jsx',
+      css: "#panda/styled-system/css",
+      recipes: "#panda/styled-system/recipes",
+      patterns: "#panda/styled-system/patterns",
+      jsx: "#panda/styled-system/jsx",
     },
-  })
+  });
   ```
 
   Or you could also make your outdir an actual package from your monorepo:
 
   ```ts
   export default defineConfig({
-    outdir: '../packages/styled-system',
+    outdir: "../packages/styled-system",
     importMap: {
-      css: '@monorepo/styled-system',
-      recipes: '@monorepo/styled-system',
-      patterns: '@monorepo/styled-system',
-      jsx: '@monorepo/styled-system',
+      css: "@monorepo/styled-system",
+      recipes: "@monorepo/styled-system",
+      patterns: "@monorepo/styled-system",
+      jsx: "@monorepo/styled-system",
     },
-  })
+  });
   ```
 
   Working with tsconfig paths aliases is easy:
 
   ```ts
   export default defineConfig({
-    outdir: 'styled-system',
+    outdir: "styled-system",
     importMap: {
-      css: 'styled-system/css',
-      recipes: 'styled-system/recipes',
-      patterns: 'styled-system/patterns',
-      jsx: 'styled-system/jsx',
+      css: "styled-system/css",
+      recipes: "styled-system/recipes",
+      patterns: "styled-system/patterns",
+      jsx: "styled-system/jsx",
     },
-  })
+  });
   ```
 
 - 1eb31118: Automatically allow overriding config recipe compoundVariants styles within the `styled` JSX factory,
@@ -4911,22 +5007,22 @@ export default defineConfig({
 
   ```ts file="panda.config.ts"
   const button = defineRecipe({
-    className: 'btn',
-    base: { color: 'green', fontSize: '16px' },
+    className: "btn",
+    base: { color: "green", fontSize: "16px" },
     variants: {
-      size: { small: { fontSize: '14px' } },
+      size: { small: { fontSize: "14px" } },
     },
-    compoundVariants: [{ size: 'small', css: { color: 'blue' } }],
-  })
+    compoundVariants: [{ size: "small", css: { color: "blue" } }],
+  });
   ```
 
   This would previously not merge the `color` property overrides, but now it does:
 
   ```tsx file="example.tsx"
-  import { styled } from '../styled-system/jsx'
-  import { button } from '../styled-system/recipes'
+  import { styled } from "../styled-system/jsx";
+  import { button } from "../styled-system/recipes";
 
-  const Button = styled('button', button)
+  const Button = styled("button", button);
 
   function App() {
     return (
@@ -4935,7 +5031,7 @@ export default defineConfig({
           Click me
         </Button>
       </>
-    )
+    );
   }
   ```
 
@@ -5114,8 +5210,8 @@ export default defineConfig({
     passed in. This is to allow the `css` function to merge the styles correctly.
 
   ```tsx
-  import { css } from '../styled-system/css'
-  css({ mx: '3', paddingTop: '4' }, { mx: '10', pt: '6' }) // => mx_10 pt_6
+  import { css } from "../styled-system/css";
+  css({ mx: "3", paddingTop: "4" }, { mx: "10", pt: "6" }); // => mx_10 pt_6
   ```
 
   > ⚠️ This approach should be preferred for merging styles over the current `cx` function, which will be reverted to
@@ -5140,26 +5236,29 @@ export default defineConfig({
   be merged correctly.
 
   ```tsx title="src/components/Button.tsx"
-  import { css } from '../../styled-system/css'
+  import { css } from "../../styled-system/css";
 
   export const Button = ({ css: cssProp = {}, children }) => {
-    const className = css({ display: 'flex', alignItem: 'center', color: 'black' }, cssProp)
-    return <button className={className}>{children}</button>
-  }
+    const className = css(
+      { display: "flex", alignItem: "center", color: "black" },
+      cssProp,
+    );
+    return <button className={className}>{children}</button>;
+  };
   ```
 
   Then you can use the `Button` component like this:
 
   ```tsx title="src/app/page.tsx"
-  import { css } from '../../styled-system/css'
-  import { Button, Thingy } from './Button'
+  import { css } from "../../styled-system/css";
+  import { Button, Thingy } from "./Button";
 
   export default function Page() {
     return (
-      <Button css={{ color: 'pink', _hover: { color: 'red' } }}>
+      <Button css={{ color: "pink", _hover: { color: "red" } }}>
         will result in `class="d_flex items_center text_pink hover:text_red"`
       </Button>
-    )
+    );
   }
   ```
 
@@ -5171,51 +5270,51 @@ export default defineConfig({
   **Pattern Example:**
 
   ```tsx title="src/components/Button.tsx"
-  import { hstack } from '../../styled-system/patterns'
-  import { css, cva } from '../../styled-system/css'
+  import { hstack } from "../../styled-system/patterns";
+  import { css, cva } from "../../styled-system/css";
 
   export const Button = ({ css: cssProp = {}, children }) => {
     // using the flex pattern
     const hstackProps = hstack.raw({
-      border: '1px solid',
-      _hover: { color: 'blue.400' },
-    })
+      border: "1px solid",
+      _hover: { color: "blue.400" },
+    });
 
     // merging the styles
-    const className = css(hstackProps, cssProp)
+    const className = css(hstackProps, cssProp);
 
-    return <button className={className}>{children}</button>
-  }
+    return <button className={className}>{children}</button>;
+  };
   ```
 
   **CVA Example:**
 
   ```tsx title="src/components/Button.tsx"
-  import { css, cva } from '../../styled-system/css'
+  import { css, cva } from "../../styled-system/css";
 
   const buttonRecipe = cva({
-    base: { display: 'flex', fontSize: 'lg' },
+    base: { display: "flex", fontSize: "lg" },
     variants: {
       variant: {
-        primary: { color: 'white', backgroundColor: 'blue.500' },
+        primary: { color: "white", backgroundColor: "blue.500" },
       },
     },
-  })
+  });
 
   export const Button = ({ css: cssProp = {}, children }) => {
     const className = css(
       // using the button recipe
-      buttonRecipe.raw({ variant: 'primary' }),
+      buttonRecipe.raw({ variant: "primary" }),
 
       // adding style overrides (internal)
-      { _hover: { color: 'blue.400' } },
+      { _hover: { color: "blue.400" } },
 
       // adding style overrides (external)
       cssProp,
-    )
+    );
 
-    return <button className={className}>{props.children}</button>
-  }
+    return <button className={className}>{props.children}</button>;
+  };
   ```
 
 - 36fdff89: Fix bug in generated js code for atomic slot recipe produce where `splitVariantProps` didn't work without
@@ -5262,7 +5361,14 @@ export default defineConfig({
   Example:
 
   ```tsx
-  <h1 className={cx(css({ mx: '3', paddingTop: '4' }), css({ mx: '10', pt: '6' }))}>Will result in "mx_10 pt_6"</h1>
+  <h1
+    className={cx(
+      css({ mx: "3", paddingTop: "4" }),
+      css({ mx: "10", pt: "6" }),
+    )}
+  >
+    Will result in "mx_10 pt_6"
+  </h1>
   ```
 
 - dfb3f85f: Add missing svg props types
@@ -5307,12 +5413,12 @@ export default defineConfig({
   **Definition**
 
   ```jsx
-  import { sva } from 'styled-system/css'
+  import { sva } from "styled-system/css";
 
   const button = sva({
-    slots: ['label', 'icon'],
+    slots: ["label", "icon"],
     base: {
-      label: { color: 'red', textDecoration: 'underline' },
+      label: { color: "red", textDecoration: "underline" },
     },
     variants: {
       rounded: {
@@ -5320,33 +5426,33 @@ export default defineConfig({
       },
       size: {
         sm: {
-          label: { fontSize: 'sm' },
-          icon: { fontSize: 'sm' },
+          label: { fontSize: "sm" },
+          icon: { fontSize: "sm" },
         },
         lg: {
-          label: { fontSize: 'lg' },
-          icon: { fontSize: 'lg', color: 'pink' },
+          label: { fontSize: "lg" },
+          icon: { fontSize: "lg", color: "pink" },
         },
       },
     },
     defaultVariants: {
-      size: 'sm',
+      size: "sm",
     },
-  })
+  });
   ```
 
   **Usage**
 
   ```jsx
   export function App() {
-    const btnClass = button({ size: 'lg', rounded: true })
+    const btnClass = button({ size: "lg", rounded: true });
 
     return (
       <button>
         <p class={btnClass.label}> Label</p>
         <p class={btnClass.icon}> Icon</p>
       </button>
-    )
+    );
   }
   ```
 
@@ -5411,26 +5517,26 @@ export default defineConfig({
   Update the `jsx` property to be used for advanced tracking of custom pattern components.
 
   ```jsx
-  import { Circle } from 'styled-system/jsx'
+  import { Circle } from "styled-system/jsx";
   const CustomCircle = ({ children, ...props }) => {
-    return <Circle {...props}>{children}</Circle>
-  }
+    return <Circle {...props}>{children}</Circle>;
+  };
   ```
 
   To track the `CustomCircle` component, you can now use the `jsx` property.
 
   ```js
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     patterns: {
       extend: {
         circle: {
-          jsx: ['CustomCircle'],
+          jsx: ["CustomCircle"],
         },
       },
     },
-  })
+  });
   ```
 
 ### Patch Changes
@@ -5528,9 +5634,17 @@ export default defineConfig({
   ```tsx
   const ComponentWithMultipleRecipes = ({ variant }) => {
     return (
-      <button className={cx(pinkRecipe({ variant }), greenRecipe({ variant }), blueRecipe({ variant }))}>Hello</button>
-    )
-  }
+      <button
+        className={cx(
+          pinkRecipe({ variant }),
+          greenRecipe({ variant }),
+          blueRecipe({ variant }),
+        )}
+      >
+        Hello
+      </button>
+    );
+  };
   ```
 
   Given a `panda.config.ts` with recipes each including a common `jsx` tag name, such as:
@@ -5614,7 +5728,7 @@ export default defineConfig({
   ```ts
   staticCss: {
     recipes: {
-      button: [{ size: ['*'], shape: ['*'] }]
+      button: [{ size: ["*"], shape: ["*"] }];
     }
   }
   ```
@@ -5624,7 +5738,7 @@ export default defineConfig({
   ```ts
   staticCss: {
     recipes: {
-      button: ['*']
+      button: ["*"];
     }
   }
   ```
@@ -5662,8 +5776,8 @@ export default defineConfig({
   // panda.config.ts
   export default defineConfig({
     //...
-    syntax: 'template-literal',
-  })
+    syntax: "template-literal",
+  });
   ```
 
   > For existing projects, you might need to run the `panda codegen --clean`
@@ -5695,12 +5809,12 @@ export default defineConfig({
 - 5b344b9c: Add support for disabling shorthand props
 
   ```ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
     shorthands: false,
-  })
+  });
   ```
 
 ### Patch Changes
@@ -5823,20 +5937,20 @@ Will now allow you to use the following syntax for token path:
   export default defaultConfig({
     conditions: {
       extend: {
-        supportHover: ['@media (hover: hover) and (pointer: fine)', '&:hover'],
+        supportHover: ["@media (hover: hover) and (pointer: fine)", "&:hover"],
       },
     },
-  })
+  });
   ```
 
   ```ts
-  import { css } from '../styled-system/css'
+  import { css } from "../styled-system/css";
 
   css({
     _supportHover: {
-      color: 'red',
+      color: "red",
     },
-  })
+  });
   ```
 
   will generate the following CSS:
@@ -5907,10 +6021,10 @@ Will now allow you to use the following syntax for token path:
 
   ```ts
   css({
-    padding: '1px',
-    paddingTop: '3px',
-    paddingBottom: '4px',
-  })
+    padding: "1px",
+    paddingTop: "3px",
+    paddingBottom: "4px",
+  });
   ```
 
   Will now always generate the following css:
@@ -6020,24 +6134,24 @@ Will now allow you to use the following syntax for token path:
     patterns: {
       hstack: {
         properties: {
-          justify: { type: 'property', value: 'justifyContent' },
-          gap: { type: 'property', value: 'gap' },
+          justify: { type: "property", value: "justifyContent" },
+          gap: { type: "property", value: "gap" },
         },
         // you can also use a token like '10'
-        defaultValues: { gap: '40px' },
+        defaultValues: { gap: "40px" },
         transform(props) {
-          const { justify, gap, ...rest } = props
+          const { justify, gap, ...rest } = props;
           return {
-            display: 'flex',
-            alignItems: 'center',
+            display: "flex",
+            alignItems: "center",
             justifyContent: justify,
             gap,
             ...rest,
-          }
+          };
         },
       },
     },
-  })
+  });
   ```
 
 ### Patch Changes
@@ -6079,39 +6193,54 @@ Will now allow you to use the following syntax for token path:
      * Called when the config is resolved, after all the presets are loaded and merged.
      * This is the first hook called, you can use it to tweak the config before the context is created.
      */
-    'config:resolved': (args: { conf: LoadConfigResult }) => MaybeAsyncReturn
+    "config:resolved": (args: { conf: LoadConfigResult }) => MaybeAsyncReturn;
     /**
      * Called when the Panda context has been created and the API is ready to be used.
      */
-    'context:created': (args: { ctx: ApiInterface; logger: LoggerInterface }) => void
+    "context:created": (args: {
+      ctx: ApiInterface;
+      logger: LoggerInterface;
+    }) => void;
     /**
      * Called when the config file or one of its dependencies (imports) has changed.
      */
-    'config:change': (args: { config: UserConfig }) => MaybeAsyncReturn
+    "config:change": (args: { config: UserConfig }) => MaybeAsyncReturn;
     /**
      * Called after reading the file content but before parsing it.
      * You can use this hook to transform the file content to a tsx-friendly syntax so that Panda's parser can parse it.
      * You can also use this hook to parse the file's content on your side using a custom parser, in this case you don't have to return anything.
      */
-    'parser:before': (args: { filePath: string; content: string }) => string | void
+    "parser:before": (args: {
+      filePath: string;
+      content: string;
+    }) => string | void;
     /**
      * Called after the file styles are extracted and processed into the resulting ParserResult object.
      * You can also use this hook to add your own extraction results from your custom parser to the ParserResult object.
      */
-    'parser:after': (args: { filePath: string; result: ParserResultInterface | undefined }) => void
+    "parser:after": (args: {
+      filePath: string;
+      result: ParserResultInterface | undefined;
+    }) => void;
     /**
      * Called after the codegen is completed
      */
-    'codegen:done': () => MaybeAsyncReturn
+    "codegen:done": () => MaybeAsyncReturn;
     /**
      * Called right before adding the design-system CSS (global, static, preflight, tokens, keyframes) to the final CSS
      * Called right before writing/injecting the final CSS (styles.css) that contains the design-system CSS and the parser CSS
      * You can use it to tweak the CSS content before it's written to disk or injected through the postcss plugin.
      */
-    'cssgen:done': (args: {
-      artifact: 'global' | 'static' | 'reset' | 'tokens' | 'keyframes' | 'styles.css'
-      content: string
-    }) => string | void
+    "cssgen:done": (args: {
+      artifact:
+        | "global"
+        | "static"
+        | "reset"
+        | "tokens"
+        | "keyframes"
+        | "styles.css";
+      content: string;
+    }) => string | void;
   }
   ```
 
@@ -6259,18 +6388,18 @@ Will now allow you to use the following syntax for token path:
 
   ```ts
   // config.strictTokens = true
-  css({ display: 'flex' }) // OK, didn't throw
-  css({ display: 'block' }) // OK, didn't throw
-  css({ display: 'abc' }) // ❌ would throw since 'abc' is not part of predefined values of 'display' even thought there is no config token for 'abc'
+  css({ display: "flex" }); // OK, didn't throw
+  css({ display: "block" }); // OK, didn't throw
+  css({ display: "abc" }); // ❌ would throw since 'abc' is not part of predefined values of 'display' even thought there is no config token for 'abc'
   ```
 
   now:
 
   ```ts
   // config.strictTokens = true
-  css({ display: 'flex' }) // OK, didn't throw
-  css({ display: 'block' }) // OK, didn't throw
-  css({ display: 'abc' }) // ✅ will not throw there is no config token for 'abc'
+  css({ display: "flex" }); // OK, didn't throw
+  css({ display: "block" }); // OK, didn't throw
+  css({ display: "abc" }); // ✅ will not throw there is no config token for 'abc'
   ```
 
   Instead, if you want the v.19.0 behavior, you can use the new `config.strictPropertyValues` option. You can combine it
@@ -6281,79 +6410,79 @@ Will now allow you to use the following syntax for token path:
 
   ```ts
   type StrictableProps =
-    | 'alignContent'
-    | 'alignItems'
-    | 'alignSelf'
-    | 'all'
-    | 'animationComposition'
-    | 'animationDirection'
-    | 'animationFillMode'
-    | 'appearance'
-    | 'backfaceVisibility'
-    | 'backgroundAttachment'
-    | 'backgroundClip'
-    | 'borderCollapse'
-    | 'border'
-    | 'borderBlock'
-    | 'borderBlockEnd'
-    | 'borderBlockStart'
-    | 'borderBottom'
-    | 'borderInline'
-    | 'borderInlineEnd'
-    | 'borderInlineStart'
-    | 'borderLeft'
-    | 'borderRight'
-    | 'borderTop'
-    | 'borderBlockEndStyle'
-    | 'borderBlockStartStyle'
-    | 'borderBlockStyle'
-    | 'borderBottomStyle'
-    | 'borderInlineEndStyle'
-    | 'borderInlineStartStyle'
-    | 'borderInlineStyle'
-    | 'borderLeftStyle'
-    | 'borderRightStyle'
-    | 'borderTopStyle'
-    | 'boxDecorationBreak'
-    | 'boxSizing'
-    | 'breakAfter'
-    | 'breakBefore'
-    | 'breakInside'
-    | 'captionSide'
-    | 'clear'
-    | 'columnFill'
-    | 'columnRuleStyle'
-    | 'contentVisibility'
-    | 'direction'
-    | 'display'
-    | 'emptyCells'
-    | 'flexDirection'
-    | 'flexWrap'
-    | 'float'
-    | 'fontKerning'
-    | 'forcedColorAdjust'
-    | 'isolation'
-    | 'lineBreak'
-    | 'mixBlendMode'
-    | 'objectFit'
-    | 'outlineStyle'
-    | 'overflow'
-    | 'overflowX'
-    | 'overflowY'
-    | 'overflowBlock'
-    | 'overflowInline'
-    | 'overflowWrap'
-    | 'pointerEvents'
-    | 'position'
-    | 'resize'
-    | 'scrollBehavior'
-    | 'touchAction'
-    | 'transformBox'
-    | 'transformStyle'
-    | 'userSelect'
-    | 'visibility'
-    | 'wordBreak'
-    | 'writingMode'
+    | "alignContent"
+    | "alignItems"
+    | "alignSelf"
+    | "all"
+    | "animationComposition"
+    | "animationDirection"
+    | "animationFillMode"
+    | "appearance"
+    | "backfaceVisibility"
+    | "backgroundAttachment"
+    | "backgroundClip"
+    | "borderCollapse"
+    | "border"
+    | "borderBlock"
+    | "borderBlockEnd"
+    | "borderBlockStart"
+    | "borderBottom"
+    | "borderInline"
+    | "borderInlineEnd"
+    | "borderInlineStart"
+    | "borderLeft"
+    | "borderRight"
+    | "borderTop"
+    | "borderBlockEndStyle"
+    | "borderBlockStartStyle"
+    | "borderBlockStyle"
+    | "borderBottomStyle"
+    | "borderInlineEndStyle"
+    | "borderInlineStartStyle"
+    | "borderInlineStyle"
+    | "borderLeftStyle"
+    | "borderRightStyle"
+    | "borderTopStyle"
+    | "boxDecorationBreak"
+    | "boxSizing"
+    | "breakAfter"
+    | "breakBefore"
+    | "breakInside"
+    | "captionSide"
+    | "clear"
+    | "columnFill"
+    | "columnRuleStyle"
+    | "contentVisibility"
+    | "direction"
+    | "display"
+    | "emptyCells"
+    | "flexDirection"
+    | "flexWrap"
+    | "float"
+    | "fontKerning"
+    | "forcedColorAdjust"
+    | "isolation"
+    | "lineBreak"
+    | "mixBlendMode"
+    | "objectFit"
+    | "outlineStyle"
+    | "overflow"
+    | "overflowX"
+    | "overflowY"
+    | "overflowBlock"
+    | "overflowInline"
+    | "overflowWrap"
+    | "pointerEvents"
+    | "position"
+    | "resize"
+    | "scrollBehavior"
+    | "touchAction"
+    | "transformBox"
+    | "transformStyle"
+    | "userSelect"
+    | "visibility"
+    | "wordBreak"
+    | "writingMode";
   ```
 
 - Updated dependencies [657ca5da]
@@ -6424,38 +6553,38 @@ Will now allow you to use the following syntax for token path:
 
   ```ts
   const card = defineRecipe({
-    className: 'card',
-    base: { color: 'white' },
+    className: "card",
+    base: { color: "white" },
     variants: {
       size: {
-        small: { fontSize: '14px' },
-        large: { fontSize: '18px' },
+        small: { fontSize: "14px" },
+        large: { fontSize: "18px" },
       },
       visual: {
-        primary: { backgroundColor: 'blue' },
-        secondary: { backgroundColor: 'gray' },
+        primary: { backgroundColor: "blue" },
+        secondary: { backgroundColor: "gray" },
       },
     },
-  })
+  });
 
   export default defineConfig({
     // ...
     staticCss: {
       recipes: {
-        card: ['*'], // this
+        card: ["*"], // this
 
         // was equivalent to:
         card: [
           // notice how `responsive: true` was implicitly added
-          { size: ['*'], responsive: true },
-          { visual: ['*'], responsive: true },
+          { size: ["*"], responsive: true },
+          { visual: ["*"], responsive: true },
         ],
 
         //   will now correctly be equivalent to:
-        card: [{ size: ['*'] }, { visual: ['*'] }],
+        card: [{ size: ["*"] }, { visual: ["*"] }],
       },
     },
-  })
+  });
   ```
 
   Here's the diff in the generated CSS:
@@ -6602,17 +6731,17 @@ Will now allow you to use the following syntax for token path:
 
   ```ts
   css({
-    bg: '[#3B00B9]', // ✅ was okay
+    bg: "[#3B00B9]", // ✅ was okay
     _dark: {
       // ✅ was okay
-      color: '[#3B00B9]',
+      color: "[#3B00B9]",
     },
 
     // ❌ Not okay, will be fixed in this patch
     color: {
-      _dark: '[#3B00B9]',
+      _dark: "[#3B00B9]",
     },
-  })
+  });
   ```
 
 - 647f05c9: Fix a CSS generation issue with `config.strictTokens` when using the `[xxx]` escape-hatch syntax with `!` or
@@ -6620,9 +6749,9 @@ Will now allow you to use the following syntax for token path:
 
   ```ts
   css({
-    borderWidth: '[2px!]',
-    width: '[2px !important]',
-  })
+    borderWidth: "[2px!]",
+    width: "[2px !important]",
+  });
   ```
 
 - Updated dependencies [8f4ce97c]
@@ -6663,18 +6792,18 @@ Will now allow you to use the following syntax for token path:
   and suffixing with `]`, e.g. writing `[123px]` as a value will bypass the token validation.
 
   ```ts
-  import { css } from '../styled-system/css'
+  import { css } from "../styled-system/css";
 
   css({
     // @ts-expect-error TS will throw when using from strictTokens: true
-    color: '#fff',
+    color: "#fff",
     // @ts-expect-error TS will throw when using from strictTokens: true
-    width: '100px',
+    width: "100px",
 
     // ✅ but this is now allowed:
-    bgColor: '[rgb(51 155 240)]',
-    fontSize: '[12px]',
-  })
+    bgColor: "[rgb(51 155 240)]",
+    fontSize: "[12px]",
+  });
   ```
 
 ### Patch Changes
@@ -6708,49 +6837,49 @@ Will now allow you to use the following syntax for token path:
 - 105f74ce: Add a way to specify a recipe's `staticCss` options from inside a recipe config, e.g.:
 
   ```js
-  import { defineRecipe } from '@pandacss/dev'
+  import { defineRecipe } from "@pandacss/dev";
 
   const card = defineRecipe({
-    className: 'card',
-    base: { color: 'white' },
+    className: "card",
+    base: { color: "white" },
     variants: {
       size: {
-        small: { fontSize: '14px' },
-        large: { fontSize: '18px' },
+        small: { fontSize: "14px" },
+        large: { fontSize: "18px" },
       },
     },
-    staticCss: [{ size: ['*'] }],
-  })
+    staticCss: [{ size: ["*"] }],
+  });
   ```
 
   would be the equivalent of defining it inside the main config:
 
   ```js
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
     staticCss: {
       recipes: {
         card: {
-          size: ['*'],
+          size: ["*"],
         },
       },
     },
-  })
+  });
   ```
 
 - 052283c2: Fix vue `styled` factory internal class merging, for example:
 
   ```vue
   <script setup>
-  import { styled } from '../styled-system/jsx'
+  import { styled } from "../styled-system/jsx";
 
-  const StyledButton = styled('button', {
+  const StyledButton = styled("button", {
     base: {
-      bgColor: 'red.300',
+      bgColor: "red.300",
     },
-  })
+  });
   </script>
   <template>
     <StyledButton id="test" class="test">
@@ -6819,18 +6948,18 @@ Will now allow you to use the following syntax for token path:
 
   ```ts
   // config.strictTokens = true
-  css({ display: 'flex' }) // OK, didn't throw
-  css({ display: 'block' }) // OK, didn't throw
-  css({ display: 'abc' }) // ❌ didn't throw even though 'abc' is not a valid value for 'display'
+  css({ display: "flex" }); // OK, didn't throw
+  css({ display: "block" }); // OK, didn't throw
+  css({ display: "abc" }); // ❌ didn't throw even though 'abc' is not a valid value for 'display'
   ```
 
   Now:
 
   ```ts
   // config.strictTokens = true
-  css({ display: 'flex' }) // OK, didn't throw
-  css({ display: 'block' }) // OK, didn't throw
-  css({ display: 'abc' }) // ✅ will throw since 'abc' is not a valid value for 'display'
+  css({ display: "flex" }); // OK, didn't throw
+  css({ display: "block" }); // OK, didn't throw
+  css({ display: "abc" }); // ✅ will throw since 'abc' is not a valid value for 'display'
   ```
 
 - Updated dependencies [61831040]
@@ -6889,22 +7018,28 @@ Will now allow you to use the following syntax for token path:
 - b7cb2073: Add a `splitCssProps` utility exported from the {outdir}/jsx entrypoint
 
   ```tsx
-  import { splitCssProps, styled } from '../styled-system/jsx'
-  import type { HTMLStyledProps } from '../styled-system/types'
+  import { splitCssProps, styled } from "../styled-system/jsx";
+  import type { HTMLStyledProps } from "../styled-system/types";
 
-  function SplitComponent({ children, ...props }: HTMLStyledProps<'div'>) {
-    const [cssProps, restProps] = splitCssProps(props)
+  function SplitComponent({ children, ...props }: HTMLStyledProps<"div">) {
+    const [cssProps, restProps] = splitCssProps(props);
     return (
-      <styled.div {...restProps} className={css({ display: 'flex', height: '20', width: '20' }, cssProps)}>
+      <styled.div
+        {...restProps}
+        className={css(
+          { display: "flex", height: "20", width: "20" },
+          cssProps,
+        )}
+      >
         {children}
       </styled.div>
-    )
+    );
   }
 
   // Usage
 
   function App() {
-    return <SplitComponent margin="2">Click me</SplitComponent>
+    return <SplitComponent margin="2">Click me</SplitComponent>;
   }
   ```
 
@@ -6997,16 +7132,16 @@ Will now allow you to use the following syntax for token path:
   together and the styles will be merged correctly.
 
   ```jsx
-  const Box = styled('div', {
+  const Box = styled("div", {
     base: {
-      background: 'red.light',
-      color: 'white',
+      background: "red.light",
+      color: "white",
     },
-  })
+  });
 
   const ExtendedBox = styled(Box, {
-    base: { background: 'red.dark' },
-  })
+    base: { background: "red.dark" },
+  });
 
   // <ExtendedBox> will have a background of `red.dark` and a color of `white`
   ```
@@ -7019,32 +7154,32 @@ Will now allow you to use the following syntax for token path:
   - CVA or Inline CVA + Config Recipe = ❌
 
   ```jsx
-  import { button } from '../styled-system/recipes'
+  import { button } from "../styled-system/recipes";
 
-  const Button = styled('div', button)
+  const Button = styled("div", button);
 
   // ❌ This will throw an error
   const ExtendedButton = styled(Button, {
-    base: { background: 'red.dark' },
-  })
+    base: { background: "red.dark" },
+  });
   ```
 
 - fbf062c6: Added a new type to extract variants out of styled components
 
   ```tsx
-  import { StyledVariantProps } from '../styled-system/jsx'
+  import { StyledVariantProps } from "../styled-system/jsx";
 
-  const Button = styled('button', {
-    base: { color: 'black' },
+  const Button = styled("button", {
+    base: { color: "black" },
     variants: {
       state: {
-        error: { color: 'red' },
-        success: { color: 'green' },
+        error: { color: "red" },
+        success: { color: "green" },
       },
     },
-  })
+  });
 
-  type ButtonVariantProps = StyledVariantProps<typeof Button>
+  type ButtonVariantProps = StyledVariantProps<typeof Button>;
   //   ^ { state?: 'error' | 'success' | undefined }
   ```
 
@@ -7146,9 +7281,9 @@ Will now allow you to use the following syntax for token path:
 
   ```ts
   interface FactoryOptions<TProps extends Dict> {
-    dataAttr?: boolean
-    defaultProps?: TProps
-    shouldForwardProp?(prop: string, variantKeys: string[]): boolean
+    dataAttr?: boolean;
+    defaultProps?: TProps;
+    shouldForwardProp?(prop: string, variantKeys: string[]): boolean;
   }
   ```
 
@@ -7156,16 +7291,16 @@ Will now allow you to use the following syntax for token path:
     This is useful for testing and debugging.
 
   ```jsx
-  import { styled } from '../styled-system/jsx'
-  import { button } from '../styled-system/recipes'
+  import { styled } from "../styled-system/jsx";
+  import { button } from "../styled-system/recipes";
 
-  const Button = styled('button', button, { dataAttr: true })
+  const Button = styled("button", button, { dataAttr: true });
 
   const App = () => (
     <Button variant="secondary" mt="10px">
       Button
     </Button>
-  )
+  );
   // Will render something like <button data-recipe="button" class="btn btn--variant_purple mt_10px">Button</button>
   ```
 
@@ -7173,17 +7308,17 @@ Will now allow you to use the following syntax for token path:
     override the default variants or base styles of a recipe.
 
   ```jsx
-  import { styled } from '../styled-system/jsx'
-  import { button } from '../styled-system/recipes'
+  import { styled } from "../styled-system/jsx";
+  import { button } from "../styled-system/recipes";
 
-  const Button = styled('button', button, {
+  const Button = styled("button", button, {
     defaultProps: {
-      variant: 'secondary',
-      px: '10px',
+      variant: "secondary",
+      px: "10px",
     },
-  })
+  });
 
-  const App = () => <Button>Button</Button>
+  const App = () => <Button>Button</Button>;
   // Will render something like <button class="btn btn--variant_secondary px_10px">Button</button>
   ```
 
@@ -7191,19 +7326,20 @@ Will now allow you to use the following syntax for token path:
     props except recipe variants and style props are forwarded.
 
   ```jsx
-  import { styled } from '../styled-system/jsx'
-  import { button } from '../styled-system/recipes'
-  import { isCssProperty } from '../styled-system/jsx'
-  import { motion, isValidMotionProp } from 'framer-motion'
+  import { styled } from "../styled-system/jsx";
+  import { button } from "../styled-system/recipes";
+  import { isCssProperty } from "../styled-system/jsx";
+  import { motion, isValidMotionProp } from "framer-motion";
 
   const StyledMotion = styled(
     motion.div,
     {},
     {
       shouldForwardProp: (prop, variantKeys) =>
-        isValidMotionProp(prop) || (!variantKeys.includes(prop) && !isCssProperty(prop)),
+        isValidMotionProp(prop) ||
+        (!variantKeys.includes(prop) && !isCssProperty(prop)),
     },
-  )
+  );
   ```
 
   - @pandacss/types@0.15.4
@@ -7226,42 +7362,42 @@ Will now allow you to use the following syntax for token path:
 
   ```ts
   export default defineConfig({
-    outdir: './outdir',
+    outdir: "./outdir",
     importMap: {
-      css: '#panda/styled-system/css',
-      recipes: '#panda/styled-system/recipes',
-      patterns: '#panda/styled-system/patterns',
-      jsx: '#panda/styled-system/jsx',
+      css: "#panda/styled-system/css",
+      recipes: "#panda/styled-system/recipes",
+      patterns: "#panda/styled-system/patterns",
+      jsx: "#panda/styled-system/jsx",
     },
-  })
+  });
   ```
 
   Or you could also make your outdir an actual package from your monorepo:
 
   ```ts
   export default defineConfig({
-    outdir: '../packages/styled-system',
+    outdir: "../packages/styled-system",
     importMap: {
-      css: '@monorepo/styled-system',
-      recipes: '@monorepo/styled-system',
-      patterns: '@monorepo/styled-system',
-      jsx: '@monorepo/styled-system',
+      css: "@monorepo/styled-system",
+      recipes: "@monorepo/styled-system",
+      patterns: "@monorepo/styled-system",
+      jsx: "@monorepo/styled-system",
     },
-  })
+  });
   ```
 
   Working with tsconfig paths aliases is easy:
 
   ```ts
   export default defineConfig({
-    outdir: 'styled-system',
+    outdir: "styled-system",
     importMap: {
-      css: 'styled-system/css',
-      recipes: 'styled-system/recipes',
-      patterns: 'styled-system/patterns',
-      jsx: 'styled-system/jsx',
+      css: "styled-system/css",
+      recipes: "styled-system/recipes",
+      patterns: "styled-system/patterns",
+      jsx: "styled-system/jsx",
     },
-  })
+  });
   ```
 
 - 1eb31118: Automatically allow overriding config recipe compoundVariants styles within the `styled` JSX factory,
@@ -7271,22 +7407,22 @@ Will now allow you to use the following syntax for token path:
 
   ```ts file="panda.config.ts"
   const button = defineRecipe({
-    className: 'btn',
-    base: { color: 'green', fontSize: '16px' },
+    className: "btn",
+    base: { color: "green", fontSize: "16px" },
     variants: {
-      size: { small: { fontSize: '14px' } },
+      size: { small: { fontSize: "14px" } },
     },
-    compoundVariants: [{ size: 'small', css: { color: 'blue' } }],
-  })
+    compoundVariants: [{ size: "small", css: { color: "blue" } }],
+  });
   ```
 
   This would previously not merge the `color` property overrides, but now it does:
 
   ```tsx file="example.tsx"
-  import { styled } from '../styled-system/jsx'
-  import { button } from '../styled-system/recipes'
+  import { styled } from "../styled-system/jsx";
+  import { button } from "../styled-system/recipes";
 
-  const Button = styled('button', button)
+  const Button = styled("button", button);
 
   function App() {
     return (
@@ -7295,7 +7431,7 @@ Will now allow you to use the following syntax for token path:
           Click me
         </Button>
       </>
-    )
+    );
   }
   ```
 
@@ -7474,8 +7610,8 @@ Will now allow you to use the following syntax for token path:
     passed in. This is to allow the `css` function to merge the styles correctly.
 
   ```tsx
-  import { css } from '../styled-system/css'
-  css({ mx: '3', paddingTop: '4' }, { mx: '10', pt: '6' }) // => mx_10 pt_6
+  import { css } from "../styled-system/css";
+  css({ mx: "3", paddingTop: "4" }, { mx: "10", pt: "6" }); // => mx_10 pt_6
   ```
 
   > ⚠️ This approach should be preferred for merging styles over the current `cx` function, which will be reverted to
@@ -7500,26 +7636,29 @@ Will now allow you to use the following syntax for token path:
   be merged correctly.
 
   ```tsx title="src/components/Button.tsx"
-  import { css } from '../../styled-system/css'
+  import { css } from "../../styled-system/css";
 
   export const Button = ({ css: cssProp = {}, children }) => {
-    const className = css({ display: 'flex', alignItem: 'center', color: 'black' }, cssProp)
-    return <button className={className}>{children}</button>
-  }
+    const className = css(
+      { display: "flex", alignItem: "center", color: "black" },
+      cssProp,
+    );
+    return <button className={className}>{children}</button>;
+  };
   ```
 
   Then you can use the `Button` component like this:
 
   ```tsx title="src/app/page.tsx"
-  import { css } from '../../styled-system/css'
-  import { Button, Thingy } from './Button'
+  import { css } from "../../styled-system/css";
+  import { Button, Thingy } from "./Button";
 
   export default function Page() {
     return (
-      <Button css={{ color: 'pink', _hover: { color: 'red' } }}>
+      <Button css={{ color: "pink", _hover: { color: "red" } }}>
         will result in `class="d_flex items_center text_pink hover:text_red"`
       </Button>
-    )
+    );
   }
   ```
 
@@ -7531,51 +7670,51 @@ Will now allow you to use the following syntax for token path:
   **Pattern Example:**
 
   ```tsx title="src/components/Button.tsx"
-  import { hstack } from '../../styled-system/patterns'
-  import { css, cva } from '../../styled-system/css'
+  import { hstack } from "../../styled-system/patterns";
+  import { css, cva } from "../../styled-system/css";
 
   export const Button = ({ css: cssProp = {}, children }) => {
     // using the flex pattern
     const hstackProps = hstack.raw({
-      border: '1px solid',
-      _hover: { color: 'blue.400' },
-    })
+      border: "1px solid",
+      _hover: { color: "blue.400" },
+    });
 
     // merging the styles
-    const className = css(hstackProps, cssProp)
+    const className = css(hstackProps, cssProp);
 
-    return <button className={className}>{children}</button>
-  }
+    return <button className={className}>{children}</button>;
+  };
   ```
 
   **CVA Example:**
 
   ```tsx title="src/components/Button.tsx"
-  import { css, cva } from '../../styled-system/css'
+  import { css, cva } from "../../styled-system/css";
 
   const buttonRecipe = cva({
-    base: { display: 'flex', fontSize: 'lg' },
+    base: { display: "flex", fontSize: "lg" },
     variants: {
       variant: {
-        primary: { color: 'white', backgroundColor: 'blue.500' },
+        primary: { color: "white", backgroundColor: "blue.500" },
       },
     },
-  })
+  });
 
   export const Button = ({ css: cssProp = {}, children }) => {
     const className = css(
       // using the button recipe
-      buttonRecipe.raw({ variant: 'primary' }),
+      buttonRecipe.raw({ variant: "primary" }),
 
       // adding style overrides (internal)
-      { _hover: { color: 'blue.400' } },
+      { _hover: { color: "blue.400" } },
 
       // adding style overrides (external)
       cssProp,
-    )
+    );
 
-    return <button className={className}>{props.children}</button>
-  }
+    return <button className={className}>{props.children}</button>;
+  };
   ```
 
 - 36fdff89: Fix bug in generated js code for atomic slot recipe produce where `splitVariantProps` didn't work without
@@ -7622,7 +7761,14 @@ Will now allow you to use the following syntax for token path:
   Example:
 
   ```tsx
-  <h1 className={cx(css({ mx: '3', paddingTop: '4' }), css({ mx: '10', pt: '6' }))}>Will result in "mx_10 pt_6"</h1>
+  <h1
+    className={cx(
+      css({ mx: "3", paddingTop: "4" }),
+      css({ mx: "10", pt: "6" }),
+    )}
+  >
+    Will result in "mx_10 pt_6"
+  </h1>
   ```
 
 - dfb3f85f: Add missing svg props types
@@ -7667,12 +7813,12 @@ Will now allow you to use the following syntax for token path:
   **Definition**
 
   ```jsx
-  import { sva } from 'styled-system/css'
+  import { sva } from "styled-system/css";
 
   const button = sva({
-    slots: ['label', 'icon'],
+    slots: ["label", "icon"],
     base: {
-      label: { color: 'red', textDecoration: 'underline' },
+      label: { color: "red", textDecoration: "underline" },
     },
     variants: {
       rounded: {
@@ -7680,33 +7826,33 @@ Will now allow you to use the following syntax for token path:
       },
       size: {
         sm: {
-          label: { fontSize: 'sm' },
-          icon: { fontSize: 'sm' },
+          label: { fontSize: "sm" },
+          icon: { fontSize: "sm" },
         },
         lg: {
-          label: { fontSize: 'lg' },
-          icon: { fontSize: 'lg', color: 'pink' },
+          label: { fontSize: "lg" },
+          icon: { fontSize: "lg", color: "pink" },
         },
       },
     },
     defaultVariants: {
-      size: 'sm',
+      size: "sm",
     },
-  })
+  });
   ```
 
   **Usage**
 
   ```jsx
   export function App() {
-    const btnClass = button({ size: 'lg', rounded: true })
+    const btnClass = button({ size: "lg", rounded: true });
 
     return (
       <button>
         <p class={btnClass.label}> Label</p>
         <p class={btnClass.icon}> Icon</p>
       </button>
-    )
+    );
   }
   ```
 
@@ -7771,26 +7917,26 @@ Will now allow you to use the following syntax for token path:
   Update the `jsx` property to be used for advanced tracking of custom pattern components.
 
   ```jsx
-  import { Circle } from 'styled-system/jsx'
+  import { Circle } from "styled-system/jsx";
   const CustomCircle = ({ children, ...props }) => {
-    return <Circle {...props}>{children}</Circle>
-  }
+    return <Circle {...props}>{children}</Circle>;
+  };
   ```
 
   To track the `CustomCircle` component, you can now use the `jsx` property.
 
   ```js
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     patterns: {
       extend: {
         circle: {
-          jsx: ['CustomCircle'],
+          jsx: ["CustomCircle"],
         },
       },
     },
-  })
+  });
   ```
 
 ### Patch Changes
@@ -7888,9 +8034,17 @@ Will now allow you to use the following syntax for token path:
   ```tsx
   const ComponentWithMultipleRecipes = ({ variant }) => {
     return (
-      <button className={cx(pinkRecipe({ variant }), greenRecipe({ variant }), blueRecipe({ variant }))}>Hello</button>
-    )
-  }
+      <button
+        className={cx(
+          pinkRecipe({ variant }),
+          greenRecipe({ variant }),
+          blueRecipe({ variant }),
+        )}
+      >
+        Hello
+      </button>
+    );
+  };
   ```
 
   Given a `panda.config.ts` with recipes each including a common `jsx` tag name, such as:
@@ -7974,7 +8128,7 @@ Will now allow you to use the following syntax for token path:
   ```ts
   staticCss: {
     recipes: {
-      button: [{ size: ['*'], shape: ['*'] }]
+      button: [{ size: ["*"], shape: ["*"] }];
     }
   }
   ```
@@ -7984,7 +8138,7 @@ Will now allow you to use the following syntax for token path:
   ```ts
   staticCss: {
     recipes: {
-      button: ['*']
+      button: ["*"];
     }
   }
   ```
@@ -8022,8 +8176,8 @@ Will now allow you to use the following syntax for token path:
   // panda.config.ts
   export default defineConfig({
     //...
-    syntax: 'template-literal',
-  })
+    syntax: "template-literal",
+  });
   ```
 
   > For existing projects, you might need to run the `panda codegen --clean`
@@ -8055,12 +8209,12 @@ Will now allow you to use the following syntax for token path:
 - 5b344b9c: Add support for disabling shorthand props
 
   ```ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
     shorthands: false,
-  })
+  });
   ```
 
 ### Patch Changes
@@ -8180,11 +8334,11 @@ This hook is called right before writing the codegen files to disk. You can use
 export default defineConfig({
   // ...
   hooks: {
-    'codegen:prepare': ({ artifacts, changed }) => {
+    "codegen:prepare": ({ artifacts, changed }) => {
       // do something with the emitted js/d.ts files
     },
   },
-})
+});
 ```
 
 - 49c760cd: Fix issue where responsive array in css and cva doesn't generate the correct classname
@@ -8202,11 +8356,11 @@ export default defineConfig({
   ```js
   module.exports = {
     plugins: {
-      '@pandacss/dev/postcss': {
-        logfile: './logs/panda.log',
+      "@pandacss/dev/postcss": {
+        logfile: "./logs/panda.log",
       },
     },
-  }
+  };
   ```
 
 - Updated dependencies [74485ef1]
@@ -8245,24 +8399,24 @@ export default defineConfig({
     patterns: {
       hstack: {
         properties: {
-          justify: { type: 'property', value: 'justifyContent' },
-          gap: { type: 'property', value: 'gap' },
+          justify: { type: "property", value: "justifyContent" },
+          gap: { type: "property", value: "gap" },
         },
         // you can also use a token like '10'
-        defaultValues: { gap: '40px' },
+        defaultValues: { gap: "40px" },
         transform(props) {
-          const { justify, gap, ...rest } = props
+          const { justify, gap, ...rest } = props;
           return {
-            display: 'flex',
-            alignItems: 'center',
+            display: "flex",
+            alignItems: "center",
             justifyContent: justify,
             gap,
             ...rest,
-          }
+          };
         },
       },
     },
-  })
+  });
   ```
 
 ### Patch Changes
@@ -8304,39 +8458,54 @@ export default defineConfig({
      * Called when the config is resolved, after all the presets are loaded and merged.
      * This is the first hook called, you can use it to tweak the config before the context is created.
      */
-    'config:resolved': (args: { conf: LoadConfigResult }) => MaybeAsyncReturn
+    "config:resolved": (args: { conf: LoadConfigResult }) => MaybeAsyncReturn;
     /**
      * Called when the Panda context has been created and the API is ready to be used.
      */
-    'context:created': (args: { ctx: ApiInterface; logger: LoggerInterface }) => void
+    "context:created": (args: {
+      ctx: ApiInterface;
+      logger: LoggerInterface;
+    }) => void;
     /**
      * Called when the config file or one of its dependencies (imports) has changed.
      */
-    'config:change': (args: { config: UserConfig }) => MaybeAsyncReturn
+    "config:change": (args: { config: UserConfig }) => MaybeAsyncReturn;
     /**
      * Called after reading the file content but before parsing it.
      * You can use this hook to transform the file content to a tsx-friendly syntax so that Panda's parser can parse it.
      * You can also use this hook to parse the file's content on your side using a custom parser, in this case you don't have to return anything.
      */
-    'parser:before': (args: { filePath: string; content: string }) => string | void
+    "parser:before": (args: {
+      filePath: string;
+      content: string;
+    }) => string | void;
     /**
      * Called after the file styles are extracted and processed into the resulting ParserResult object.
      * You can also use this hook to add your own extraction results from your custom parser to the ParserResult object.
      */
-    'parser:after': (args: { filePath: string; result: ParserResultInterface | undefined }) => void
+    "parser:after": (args: {
+      filePath: string;
+      result: ParserResultInterface | undefined;
+    }) => void;
     /**
      * Called after the codegen is completed
      */
-    'codegen:done': () => MaybeAsyncReturn
+    "codegen:done": () => MaybeAsyncReturn;
     /**
      * Called right before adding the design-system CSS (global, static, preflight, tokens, keyframes) to the final CSS
      * Called right before writing/injecting the final CSS (styles.css) that contains the design-system CSS and the parser CSS
      * You can use it to tweak the CSS content before it's written to disk or injected through the postcss plugin.
      */
-    'cssgen:done': (args: {
-      artifact: 'global' | 'static' | 'reset' | 'tokens' | 'keyframes' | 'styles.css'
-      content: string
-    }) => string | void
+    "cssgen:done": (args: {
+      artifact:
+        | "global"
+        | "static"
+        | "reset"
+        | "tokens"
+        | "keyframes"
+        | "styles.css";
+      content: string;
+    }) => string | void;
   }
   ```
 
@@ -8484,18 +8653,18 @@ export default defineConfig({
 
   ```ts
   // config.strictTokens = true
-  css({ display: 'flex' }) // OK, didn't throw
-  css({ display: 'block' }) // OK, didn't throw
-  css({ display: 'abc' }) // ❌ would throw since 'abc' is not part of predefined values of 'display' even thought there is no config token for 'abc'
+  css({ display: "flex" }); // OK, didn't throw
+  css({ display: "block" }); // OK, didn't throw
+  css({ display: "abc" }); // ❌ would throw since 'abc' is not part of predefined values of 'display' even thought there is no config token for 'abc'
   ```
 
   now:
 
   ```ts
   // config.strictTokens = true
-  css({ display: 'flex' }) // OK, didn't throw
-  css({ display: 'block' }) // OK, didn't throw
-  css({ display: 'abc' }) // ✅ will not throw there is no config token for 'abc'
+  css({ display: "flex" }); // OK, didn't throw
+  css({ display: "block" }); // OK, didn't throw
+  css({ display: "abc" }); // ✅ will not throw there is no config token for 'abc'
   ```
 
   Instead, if you want the v.19.0 behavior, you can use the new `config.strictPropertyValues` option. You can combine it
@@ -8506,79 +8675,79 @@ export default defineConfig({
 
   ```ts
   type StrictableProps =
-    | 'alignContent'
-    | 'alignItems'
-    | 'alignSelf'
-    | 'all'
-    | 'animationComposition'
-    | 'animationDirection'
-    | 'animationFillMode'
-    | 'appearance'
-    | 'backfaceVisibility'
-    | 'backgroundAttachment'
-    | 'backgroundClip'
-    | 'borderCollapse'
-    | 'border'
-    | 'borderBlock'
-    | 'borderBlockEnd'
-    | 'borderBlockStart'
-    | 'borderBottom'
-    | 'borderInline'
-    | 'borderInlineEnd'
-    | 'borderInlineStart'
-    | 'borderLeft'
-    | 'borderRight'
-    | 'borderTop'
-    | 'borderBlockEndStyle'
-    | 'borderBlockStartStyle'
-    | 'borderBlockStyle'
-    | 'borderBottomStyle'
-    | 'borderInlineEndStyle'
-    | 'borderInlineStartStyle'
-    | 'borderInlineStyle'
-    | 'borderLeftStyle'
-    | 'borderRightStyle'
-    | 'borderTopStyle'
-    | 'boxDecorationBreak'
-    | 'boxSizing'
-    | 'breakAfter'
-    | 'breakBefore'
-    | 'breakInside'
-    | 'captionSide'
-    | 'clear'
-    | 'columnFill'
-    | 'columnRuleStyle'
-    | 'contentVisibility'
-    | 'direction'
-    | 'display'
-    | 'emptyCells'
-    | 'flexDirection'
-    | 'flexWrap'
-    | 'float'
-    | 'fontKerning'
-    | 'forcedColorAdjust'
-    | 'isolation'
-    | 'lineBreak'
-    | 'mixBlendMode'
-    | 'objectFit'
-    | 'outlineStyle'
-    | 'overflow'
-    | 'overflowX'
-    | 'overflowY'
-    | 'overflowBlock'
-    | 'overflowInline'
-    | 'overflowWrap'
-    | 'pointerEvents'
-    | 'position'
-    | 'resize'
-    | 'scrollBehavior'
-    | 'touchAction'
-    | 'transformBox'
-    | 'transformStyle'
-    | 'userSelect'
-    | 'visibility'
-    | 'wordBreak'
-    | 'writingMode'
+    | "alignContent"
+    | "alignItems"
+    | "alignSelf"
+    | "all"
+    | "animationComposition"
+    | "animationDirection"
+    | "animationFillMode"
+    | "appearance"
+    | "backfaceVisibility"
+    | "backgroundAttachment"
+    | "backgroundClip"
+    | "borderCollapse"
+    | "border"
+    | "borderBlock"
+    | "borderBlockEnd"
+    | "borderBlockStart"
+    | "borderBottom"
+    | "borderInline"
+    | "borderInlineEnd"
+    | "borderInlineStart"
+    | "borderLeft"
+    | "borderRight"
+    | "borderTop"
+    | "borderBlockEndStyle"
+    | "borderBlockStartStyle"
+    | "borderBlockStyle"
+    | "borderBottomStyle"
+    | "borderInlineEndStyle"
+    | "borderInlineStartStyle"
+    | "borderInlineStyle"
+    | "borderLeftStyle"
+    | "borderRightStyle"
+    | "borderTopStyle"
+    | "boxDecorationBreak"
+    | "boxSizing"
+    | "breakAfter"
+    | "breakBefore"
+    | "breakInside"
+    | "captionSide"
+    | "clear"
+    | "columnFill"
+    | "columnRuleStyle"
+    | "contentVisibility"
+    | "direction"
+    | "display"
+    | "emptyCells"
+    | "flexDirection"
+    | "flexWrap"
+    | "float"
+    | "fontKerning"
+    | "forcedColorAdjust"
+    | "isolation"
+    | "lineBreak"
+    | "mixBlendMode"
+    | "objectFit"
+    | "outlineStyle"
+    | "overflow"
+    | "overflowX"
+    | "overflowY"
+    | "overflowBlock"
+    | "overflowInline"
+    | "overflowWrap"
+    | "pointerEvents"
+    | "position"
+    | "resize"
+    | "scrollBehavior"
+    | "touchAction"
+    | "transformBox"
+    | "transformStyle"
+    | "userSelect"
+    | "visibility"
+    | "wordBreak"
+    | "writingMode";
   ```
 
 - Updated dependencies [657ca5da]
@@ -8649,38 +8818,38 @@ export default defineConfig({
 
   ```ts
   const card = defineRecipe({
-    className: 'card',
-    base: { color: 'white' },
+    className: "card",
+    base: { color: "white" },
     variants: {
       size: {
-        small: { fontSize: '14px' },
-        large: { fontSize: '18px' },
+        small: { fontSize: "14px" },
+        large: { fontSize: "18px" },
       },
       visual: {
-        primary: { backgroundColor: 'blue' },
-        secondary: { backgroundColor: 'gray' },
+        primary: { backgroundColor: "blue" },
+        secondary: { backgroundColor: "gray" },
       },
     },
-  })
+  });
 
   export default defineConfig({
     // ...
     staticCss: {
       recipes: {
-        card: ['*'], // this
+        card: ["*"], // this
 
         // was equivalent to:
         card: [
           // notice how `responsive: true` was implicitly added
-          { size: ['*'], responsive: true },
-          { visual: ['*'], responsive: true },
+          { size: ["*"], responsive: true },
+          { visual: ["*"], responsive: true },
         ],
 
         //   will now correctly be equivalent to:
-        card: [{ size: ['*'] }, { visual: ['*'] }],
+        card: [{ size: ["*"] }, { visual: ["*"] }],
       },
     },
-  })
+  });
   ```
 
   Here's the diff in the generated CSS:
@@ -8827,17 +8996,17 @@ export default defineConfig({
 
   ```ts
   css({
-    bg: '[#3B00B9]', // ✅ was okay
+    bg: "[#3B00B9]", // ✅ was okay
     _dark: {
       // ✅ was okay
-      color: '[#3B00B9]',
+      color: "[#3B00B9]",
     },
 
     // ❌ Not okay, will be fixed in this patch
     color: {
-      _dark: '[#3B00B9]',
+      _dark: "[#3B00B9]",
     },
-  })
+  });
   ```
 
 - 647f05c9: Fix a CSS generation issue with `config.strictTokens` when using the `[xxx]` escape-hatch syntax with `!` or
@@ -8845,9 +9014,9 @@ export default defineConfig({
 
   ```ts
   css({
-    borderWidth: '[2px!]',
-    width: '[2px !important]',
-  })
+    borderWidth: "[2px!]",
+    width: "[2px !important]",
+  });
   ```
 
 - Updated dependencies [8f4ce97c]
@@ -8888,18 +9057,18 @@ export default defineConfig({
   and suffixing with `]`, e.g. writing `[123px]` as a value will bypass the token validation.
 
   ```ts
-  import { css } from '../styled-system/css'
+  import { css } from "../styled-system/css";
 
   css({
     // @ts-expect-error TS will throw when using from strictTokens: true
-    color: '#fff',
+    color: "#fff",
     // @ts-expect-error TS will throw when using from strictTokens: true
-    width: '100px',
+    width: "100px",
 
     // ✅ but this is now allowed:
-    bgColor: '[rgb(51 155 240)]',
-    fontSize: '[12px]',
-  })
+    bgColor: "[rgb(51 155 240)]",
+    fontSize: "[12px]",
+  });
   ```
 
 ### Patch Changes
@@ -8933,49 +9102,49 @@ export default defineConfig({
 - 105f74ce: Add a way to specify a recipe's `staticCss` options from inside a recipe config, e.g.:
 
   ```js
-  import { defineRecipe } from '@pandacss/dev'
+  import { defineRecipe } from "@pandacss/dev";
 
   const card = defineRecipe({
-    className: 'card',
-    base: { color: 'white' },
+    className: "card",
+    base: { color: "white" },
     variants: {
       size: {
-        small: { fontSize: '14px' },
-        large: { fontSize: '18px' },
+        small: { fontSize: "14px" },
+        large: { fontSize: "18px" },
       },
     },
-    staticCss: [{ size: ['*'] }],
-  })
+    staticCss: [{ size: ["*"] }],
+  });
   ```
 
   would be the equivalent of defining it inside the main config:
 
   ```js
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
     staticCss: {
       recipes: {
         card: {
-          size: ['*'],
+          size: ["*"],
         },
       },
     },
-  })
+  });
   ```
 
 - 052283c2: Fix vue `styled` factory internal class merging, for example:
 
   ```vue
   <script setup>
-  import { styled } from '../styled-system/jsx'
+  import { styled } from "../styled-system/jsx";
 
-  const StyledButton = styled('button', {
+  const StyledButton = styled("button", {
     base: {
-      bgColor: 'red.300',
+      bgColor: "red.300",
     },
-  })
+  });
   </script>
   <template>
     <StyledButton id="test" class="test">
@@ -9044,18 +9213,18 @@ export default defineConfig({
 
   ```ts
   // config.strictTokens = true
-  css({ display: 'flex' }) // OK, didn't throw
-  css({ display: 'block' }) // OK, didn't throw
-  css({ display: 'abc' }) // ❌ didn't throw even though 'abc' is not a valid value for 'display'
+  css({ display: "flex" }); // OK, didn't throw
+  css({ display: "block" }); // OK, didn't throw
+  css({ display: "abc" }); // ❌ didn't throw even though 'abc' is not a valid value for 'display'
   ```
 
   Now:
 
   ```ts
   // config.strictTokens = true
-  css({ display: 'flex' }) // OK, didn't throw
-  css({ display: 'block' }) // OK, didn't throw
-  css({ display: 'abc' }) // ✅ will throw since 'abc' is not a valid value for 'display'
+  css({ display: "flex" }); // OK, didn't throw
+  css({ display: "block" }); // OK, didn't throw
+  css({ display: "abc" }); // ✅ will throw since 'abc' is not a valid value for 'display'
   ```
 
 - Updated dependencies [61831040]
@@ -9114,22 +9283,28 @@ export default defineConfig({
 - b7cb2073: Add a `splitCssProps` utility exported from the {outdir}/jsx entrypoint
 
   ```tsx
-  import { splitCssProps, styled } from '../styled-system/jsx'
-  import type { HTMLStyledProps } from '../styled-system/types'
+  import { splitCssProps, styled } from "../styled-system/jsx";
+  import type { HTMLStyledProps } from "../styled-system/types";
 
-  function SplitComponent({ children, ...props }: HTMLStyledProps<'div'>) {
-    const [cssProps, restProps] = splitCssProps(props)
+  function SplitComponent({ children, ...props }: HTMLStyledProps<"div">) {
+    const [cssProps, restProps] = splitCssProps(props);
     return (
-      <styled.div {...restProps} className={css({ display: 'flex', height: '20', width: '20' }, cssProps)}>
+      <styled.div
+        {...restProps}
+        className={css(
+          { display: "flex", height: "20", width: "20" },
+          cssProps,
+        )}
+      >
         {children}
       </styled.div>
-    )
+    );
   }
 
   // Usage
 
   function App() {
-    return <SplitComponent margin="2">Click me</SplitComponent>
+    return <SplitComponent margin="2">Click me</SplitComponent>;
   }
   ```
 
@@ -9222,16 +9397,16 @@ export default defineConfig({
   together and the styles will be merged correctly.
 
   ```jsx
-  const Box = styled('div', {
+  const Box = styled("div", {
     base: {
-      background: 'red.light',
-      color: 'white',
+      background: "red.light",
+      color: "white",
     },
-  })
+  });
 
   const ExtendedBox = styled(Box, {
-    base: { background: 'red.dark' },
-  })
+    base: { background: "red.dark" },
+  });
 
   // <ExtendedBox> will have a background of `red.dark` and a color of `white`
   ```
@@ -9244,32 +9419,32 @@ export default defineConfig({
   - CVA or Inline CVA + Config Recipe = ❌
 
   ```jsx
-  import { button } from '../styled-system/recipes'
+  import { button } from "../styled-system/recipes";
 
-  const Button = styled('div', button)
+  const Button = styled("div", button);
 
   // ❌ This will throw an error
   const ExtendedButton = styled(Button, {
-    base: { background: 'red.dark' },
-  })
+    base: { background: "red.dark" },
+  });
   ```
 
 - fbf062c6: Added a new type to extract variants out of styled components
 
   ```tsx
-  import { StyledVariantProps } from '../styled-system/jsx'
+  import { StyledVariantProps } from "../styled-system/jsx";
 
-  const Button = styled('button', {
-    base: { color: 'black' },
+  const Button = styled("button", {
+    base: { color: "black" },
     variants: {
       state: {
-        error: { color: 'red' },
-        success: { color: 'green' },
+        error: { color: "red" },
+        success: { color: "green" },
       },
     },
-  })
+  });
 
-  type ButtonVariantProps = StyledVariantProps<typeof Button>
+  type ButtonVariantProps = StyledVariantProps<typeof Button>;
   //   ^ { state?: 'error' | 'success' | undefined }
   ```
 
@@ -9371,9 +9546,9 @@ export default defineConfig({
 
   ```ts
   interface FactoryOptions<TProps extends Dict> {
-    dataAttr?: boolean
-    defaultProps?: TProps
-    shouldForwardProp?(prop: string, variantKeys: string[]): boolean
+    dataAttr?: boolean;
+    defaultProps?: TProps;
+    shouldForwardProp?(prop: string, variantKeys: string[]): boolean;
   }
   ```
 
@@ -9381,16 +9556,16 @@ export default defineConfig({
     This is useful for testing and debugging.
 
   ```jsx
-  import { styled } from '../styled-system/jsx'
-  import { button } from '../styled-system/recipes'
+  import { styled } from "../styled-system/jsx";
+  import { button } from "../styled-system/recipes";
 
-  const Button = styled('button', button, { dataAttr: true })
+  const Button = styled("button", button, { dataAttr: true });
 
   const App = () => (
     <Button variant="secondary" mt="10px">
       Button
     </Button>
-  )
+  );
   // Will render something like <button data-recipe="button" class="btn btn--variant_purple mt_10px">Button</button>
   ```
 
@@ -9398,17 +9573,17 @@ export default defineConfig({
     override the default variants or base styles of a recipe.
 
   ```jsx
-  import { styled } from '../styled-system/jsx'
-  import { button } from '../styled-system/recipes'
+  import { styled } from "../styled-system/jsx";
+  import { button } from "../styled-system/recipes";
 
-  const Button = styled('button', button, {
+  const Button = styled("button", button, {
     defaultProps: {
-      variant: 'secondary',
-      px: '10px',
+      variant: "secondary",
+      px: "10px",
     },
-  })
+  });
 
-  const App = () => <Button>Button</Button>
+  const App = () => <Button>Button</Button>;
   // Will render something like <button class="btn btn--variant_secondary px_10px">Button</button>
   ```
 
@@ -9416,19 +9591,20 @@ export default defineConfig({
     props except recipe variants and style props are forwarded.
 
   ```jsx
-  import { styled } from '../styled-system/jsx'
-  import { button } from '../styled-system/recipes'
-  import { isCssProperty } from '../styled-system/jsx'
-  import { motion, isValidMotionProp } from 'framer-motion'
+  import { styled } from "../styled-system/jsx";
+  import { button } from "../styled-system/recipes";
+  import { isCssProperty } from "../styled-system/jsx";
+  import { motion, isValidMotionProp } from "framer-motion";
 
   const StyledMotion = styled(
     motion.div,
     {},
     {
       shouldForwardProp: (prop, variantKeys) =>
-        isValidMotionProp(prop) || (!variantKeys.includes(prop) && !isCssProperty(prop)),
+        isValidMotionProp(prop) ||
+        (!variantKeys.includes(prop) && !isCssProperty(prop)),
     },
-  )
+  );
   ```
 
   - @pandacss/types@0.15.4
@@ -9451,42 +9627,42 @@ export default defineConfig({
 
   ```ts
   export default defineConfig({
-    outdir: './outdir',
+    outdir: "./outdir",
     importMap: {
-      css: '#panda/styled-system/css',
-      recipes: '#panda/styled-system/recipes',
-      patterns: '#panda/styled-system/patterns',
-      jsx: '#panda/styled-system/jsx',
+      css: "#panda/styled-system/css",
+      recipes: "#panda/styled-system/recipes",
+      patterns: "#panda/styled-system/patterns",
+      jsx: "#panda/styled-system/jsx",
     },
-  })
+  });
   ```
 
   Or you could also make your outdir an actual package from your monorepo:
 
   ```ts
   export default defineConfig({
-    outdir: '../packages/styled-system',
+    outdir: "../packages/styled-system",
     importMap: {
-      css: '@monorepo/styled-system',
-      recipes: '@monorepo/styled-system',
-      patterns: '@monorepo/styled-system',
-      jsx: '@monorepo/styled-system',
+      css: "@monorepo/styled-system",
+      recipes: "@monorepo/styled-system",
+      patterns: "@monorepo/styled-system",
+      jsx: "@monorepo/styled-system",
     },
-  })
+  });
   ```
 
   Working with tsconfig paths aliases is easy:
 
   ```ts
   export default defineConfig({
-    outdir: 'styled-system',
+    outdir: "styled-system",
     importMap: {
-      css: 'styled-system/css',
-      recipes: 'styled-system/recipes',
-      patterns: 'styled-system/patterns',
-      jsx: 'styled-system/jsx',
+      css: "styled-system/css",
+      recipes: "styled-system/recipes",
+      patterns: "styled-system/patterns",
+      jsx: "styled-system/jsx",
     },
-  })
+  });
   ```
 
 - 1eb31118: Automatically allow overriding config recipe compoundVariants styles within the `styled` JSX factory,
@@ -9496,22 +9672,22 @@ export default defineConfig({
 
   ```ts file="panda.config.ts"
   const button = defineRecipe({
-    className: 'btn',
-    base: { color: 'green', fontSize: '16px' },
+    className: "btn",
+    base: { color: "green", fontSize: "16px" },
     variants: {
-      size: { small: { fontSize: '14px' } },
+      size: { small: { fontSize: "14px" } },
     },
-    compoundVariants: [{ size: 'small', css: { color: 'blue' } }],
-  })
+    compoundVariants: [{ size: "small", css: { color: "blue" } }],
+  });
   ```
 
   This would previously not merge the `color` property overrides, but now it does:
 
   ```tsx file="example.tsx"
-  import { styled } from '../styled-system/jsx'
-  import { button } from '../styled-system/recipes'
+  import { styled } from "../styled-system/jsx";
+  import { button } from "../styled-system/recipes";
 
-  const Button = styled('button', button)
+  const Button = styled("button", button);
 
   function App() {
     return (
@@ -9520,7 +9696,7 @@ export default defineConfig({
           Click me
         </Button>
       </>
-    )
+    );
   }
   ```
 
@@ -9699,8 +9875,8 @@ export default defineConfig({
     passed in. This is to allow the `css` function to merge the styles correctly.
 
   ```tsx
-  import { css } from '../styled-system/css'
-  css({ mx: '3', paddingTop: '4' }, { mx: '10', pt: '6' }) // => mx_10 pt_6
+  import { css } from "../styled-system/css";
+  css({ mx: "3", paddingTop: "4" }, { mx: "10", pt: "6" }); // => mx_10 pt_6
   ```
 
   > ⚠️ This approach should be preferred for merging styles over the current `cx` function, which will be reverted to
@@ -9725,26 +9901,29 @@ export default defineConfig({
   be merged correctly.
 
   ```tsx title="src/components/Button.tsx"
-  import { css } from '../../styled-system/css'
+  import { css } from "../../styled-system/css";
 
   export const Button = ({ css: cssProp = {}, children }) => {
-    const className = css({ display: 'flex', alignItem: 'center', color: 'black' }, cssProp)
-    return <button className={className}>{children}</button>
-  }
+    const className = css(
+      { display: "flex", alignItem: "center", color: "black" },
+      cssProp,
+    );
+    return <button className={className}>{children}</button>;
+  };
   ```
 
   Then you can use the `Button` component like this:
 
   ```tsx title="src/app/page.tsx"
-  import { css } from '../../styled-system/css'
-  import { Button, Thingy } from './Button'
+  import { css } from "../../styled-system/css";
+  import { Button, Thingy } from "./Button";
 
   export default function Page() {
     return (
-      <Button css={{ color: 'pink', _hover: { color: 'red' } }}>
+      <Button css={{ color: "pink", _hover: { color: "red" } }}>
         will result in `class="d_flex items_center text_pink hover:text_red"`
       </Button>
-    )
+    );
   }
   ```
 
@@ -9756,51 +9935,51 @@ export default defineConfig({
   **Pattern Example:**
 
   ```tsx title="src/components/Button.tsx"
-  import { hstack } from '../../styled-system/patterns'
-  import { css, cva } from '../../styled-system/css'
+  import { hstack } from "../../styled-system/patterns";
+  import { css, cva } from "../../styled-system/css";
 
   export const Button = ({ css: cssProp = {}, children }) => {
     // using the flex pattern
     const hstackProps = hstack.raw({
-      border: '1px solid',
-      _hover: { color: 'blue.400' },
-    })
+      border: "1px solid",
+      _hover: { color: "blue.400" },
+    });
 
     // merging the styles
-    const className = css(hstackProps, cssProp)
+    const className = css(hstackProps, cssProp);
 
-    return <button className={className}>{children}</button>
-  }
+    return <button className={className}>{children}</button>;
+  };
   ```
 
   **CVA Example:**
 
   ```tsx title="src/components/Button.tsx"
-  import { css, cva } from '../../styled-system/css'
+  import { css, cva } from "../../styled-system/css";
 
   const buttonRecipe = cva({
-    base: { display: 'flex', fontSize: 'lg' },
+    base: { display: "flex", fontSize: "lg" },
     variants: {
       variant: {
-        primary: { color: 'white', backgroundColor: 'blue.500' },
+        primary: { color: "white", backgroundColor: "blue.500" },
       },
     },
-  })
+  });
 
   export const Button = ({ css: cssProp = {}, children }) => {
     const className = css(
       // using the button recipe
-      buttonRecipe.raw({ variant: 'primary' }),
+      buttonRecipe.raw({ variant: "primary" }),
 
       // adding style overrides (internal)
-      { _hover: { color: 'blue.400' } },
+      { _hover: { color: "blue.400" } },
 
       // adding style overrides (external)
       cssProp,
-    )
+    );
 
-    return <button className={className}>{props.children}</button>
-  }
+    return <button className={className}>{props.children}</button>;
+  };
   ```
 
 - 36fdff89: Fix bug in generated js code for atomic slot recipe produce where `splitVariantProps` didn't work without
@@ -9847,7 +10026,14 @@ export default defineConfig({
   Example:
 
   ```tsx
-  <h1 className={cx(css({ mx: '3', paddingTop: '4' }), css({ mx: '10', pt: '6' }))}>Will result in "mx_10 pt_6"</h1>
+  <h1
+    className={cx(
+      css({ mx: "3", paddingTop: "4" }),
+      css({ mx: "10", pt: "6" }),
+    )}
+  >
+    Will result in "mx_10 pt_6"
+  </h1>
   ```
 
 - dfb3f85f: Add missing svg props types
@@ -9892,12 +10078,12 @@ export default defineConfig({
   **Definition**
 
   ```jsx
-  import { sva } from 'styled-system/css'
+  import { sva } from "styled-system/css";
 
   const button = sva({
-    slots: ['label', 'icon'],
+    slots: ["label", "icon"],
     base: {
-      label: { color: 'red', textDecoration: 'underline' },
+      label: { color: "red", textDecoration: "underline" },
     },
     variants: {
       rounded: {
@@ -9905,33 +10091,33 @@ export default defineConfig({
       },
       size: {
         sm: {
-          label: { fontSize: 'sm' },
-          icon: { fontSize: 'sm' },
+          label: { fontSize: "sm" },
+          icon: { fontSize: "sm" },
         },
         lg: {
-          label: { fontSize: 'lg' },
-          icon: { fontSize: 'lg', color: 'pink' },
+          label: { fontSize: "lg" },
+          icon: { fontSize: "lg", color: "pink" },
         },
       },
     },
     defaultVariants: {
-      size: 'sm',
+      size: "sm",
     },
-  })
+  });
   ```
 
   **Usage**
 
   ```jsx
   export function App() {
-    const btnClass = button({ size: 'lg', rounded: true })
+    const btnClass = button({ size: "lg", rounded: true });
 
     return (
       <button>
         <p class={btnClass.label}> Label</p>
         <p class={btnClass.icon}> Icon</p>
       </button>
-    )
+    );
   }
   ```
 
@@ -9996,26 +10182,26 @@ export default defineConfig({
   Update the `jsx` property to be used for advanced tracking of custom pattern components.
 
   ```jsx
-  import { Circle } from 'styled-system/jsx'
+  import { Circle } from "styled-system/jsx";
   const CustomCircle = ({ children, ...props }) => {
-    return <Circle {...props}>{children}</Circle>
-  }
+    return <Circle {...props}>{children}</Circle>;
+  };
   ```
 
   To track the `CustomCircle` component, you can now use the `jsx` property.
 
   ```js
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     patterns: {
       extend: {
         circle: {
-          jsx: ['CustomCircle'],
+          jsx: ["CustomCircle"],
         },
       },
     },
-  })
+  });
   ```
 
 ### Patch Changes
@@ -10113,9 +10299,17 @@ export default defineConfig({
   ```tsx
   const ComponentWithMultipleRecipes = ({ variant }) => {
     return (
-      <button className={cx(pinkRecipe({ variant }), greenRecipe({ variant }), blueRecipe({ variant }))}>Hello</button>
-    )
-  }
+      <button
+        className={cx(
+          pinkRecipe({ variant }),
+          greenRecipe({ variant }),
+          blueRecipe({ variant }),
+        )}
+      >
+        Hello
+      </button>
+    );
+  };
   ```
 
   Given a `panda.config.ts` with recipes each including a common `jsx` tag name, such as:
@@ -10199,7 +10393,7 @@ export default defineConfig({
   ```ts
   staticCss: {
     recipes: {
-      button: [{ size: ['*'], shape: ['*'] }]
+      button: [{ size: ["*"], shape: ["*"] }];
     }
   }
   ```
@@ -10209,7 +10403,7 @@ export default defineConfig({
   ```ts
   staticCss: {
     recipes: {
-      button: ['*']
+      button: ["*"];
     }
   }
   ```
@@ -10247,8 +10441,8 @@ export default defineConfig({
   // panda.config.ts
   export default defineConfig({
     //...
-    syntax: 'template-literal',
-  })
+    syntax: "template-literal",
+  });
   ```
 
   > For existing projects, you might need to run the `panda codegen --clean`
@@ -10280,12 +10474,12 @@ export default defineConfig({
 - 5b344b9c: Add support for disabling shorthand props
 
   ```ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
     shorthands: false,
-  })
+  });
   ```
 
 ### Patch Changes
diff --git a/packages/generator/package.json b/packages/generator/package.json
index e95c1fd30..61cc1a182 100644
--- a/packages/generator/package.json
+++ b/packages/generator/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/generator",
-  "version": "0.39.0",
+  "version": "0.39.1",
   "description": "The css generator for css panda",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
diff --git a/packages/is-valid-prop/CHANGELOG.md b/packages/is-valid-prop/CHANGELOG.md
index a61470946..bbb0567d6 100644
--- a/packages/is-valid-prop/CHANGELOG.md
+++ b/packages/is-valid-prop/CHANGELOG.md
@@ -1,5 +1,7 @@
 # @pandacss/is-valid-prop
 
+## 0.39.1
+
 ## 0.39.0
 
 ## 0.38.0
@@ -33,12 +35,12 @@
     theme: {
       extend: {
         colors: {
-          primary: { value: 'blue' },
+          primary: { value: "blue" },
         },
         // borderWidths: {}, // ⚠️ nothing defined here
       },
     },
-  })
+  });
   ```
 
   ```ts
@@ -49,8 +51,8 @@
 
     // ✅ after this PR, TS will not throw an error anymore as you don't have any `borderWidths` tokens
     // if you add one, this will error again (as it's supposed to)
-    borderWidths: '123px',
-  })
+    borderWidths: "123px",
+  });
   ```
 
   ## Description
diff --git a/packages/is-valid-prop/package.json b/packages/is-valid-prop/package.json
index f0e96bcad..4429b029e 100644
--- a/packages/is-valid-prop/package.json
+++ b/packages/is-valid-prop/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/is-valid-prop",
-  "version": "0.39.0",
+  "version": "0.39.1",
   "description": "Common error messages for css panda",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
diff --git a/packages/logger/CHANGELOG.md b/packages/logger/CHANGELOG.md
index 44da35011..f0b6adbe7 100644
--- a/packages/logger/CHANGELOG.md
+++ b/packages/logger/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @pandacss/logger
 
+## 0.39.1
+
+### Patch Changes
+
+- @pandacss/types@0.39.1
+
 ## 0.39.0
 
 ### Patch Changes
@@ -153,11 +159,11 @@
   ```js
   module.exports = {
     plugins: {
-      '@pandacss/dev/postcss': {
-        logfile: './logs/panda.log',
+      "@pandacss/dev/postcss": {
+        logfile: "./logs/panda.log",
       },
     },
-  }
+  };
   ```
 
 - Updated dependencies [74485ef1]
diff --git a/packages/logger/package.json b/packages/logger/package.json
index 584c89a7b..5610ad823 100644
--- a/packages/logger/package.json
+++ b/packages/logger/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/logger",
-  "version": "0.39.0",
+  "version": "0.39.1",
   "description": "The core css panda library",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
diff --git a/packages/node/CHANGELOG.md b/packages/node/CHANGELOG.md
index 73bebb557..e0d74c2b4 100644
--- a/packages/node/CHANGELOG.md
+++ b/packages/node/CHANGELOG.md
@@ -1,5 +1,20 @@
 # @pandacss/node
 
+## 0.39.1
+
+### Patch Changes
+
+- Updated dependencies [99be6f1]
+  - @pandacss/generator@0.39.1
+  - @pandacss/parser@0.39.1
+  - @pandacss/config@0.39.1
+  - @pandacss/core@0.39.1
+  - @pandacss/extractor@0.39.1
+  - @pandacss/logger@0.39.1
+  - @pandacss/shared@0.39.1
+  - @pandacss/token-dictionary@0.39.1
+  - @pandacss/types@0.39.1
+
 ## 0.39.0
 
 ### Patch Changes
@@ -307,10 +322,10 @@
 
   ```ts
   css({
-    padding: '1px',
-    paddingTop: '3px',
-    paddingBottom: '4px',
-  })
+    padding: "1px",
+    paddingTop: "3px",
+    paddingBottom: "4px",
+  });
   ```
 
   Will now always generate the following css:
@@ -438,8 +453,8 @@
   ```ts
   export default defineConfig({
     // ...
-    dependencies: ['path/to/files/**.ts'],
-  })
+    dependencies: ["path/to/files/**.ts"],
+  });
   ```
 
   - Invoke `config:change` hook in more situations (when the `--watch` flag is passed to `panda codegen`,
@@ -491,39 +506,54 @@
      * Called when the config is resolved, after all the presets are loaded and merged.
      * This is the first hook called, you can use it to tweak the config before the context is created.
      */
-    'config:resolved': (args: { conf: LoadConfigResult }) => MaybeAsyncReturn
+    "config:resolved": (args: { conf: LoadConfigResult }) => MaybeAsyncReturn;
     /**
      * Called when the Panda context has been created and the API is ready to be used.
      */
-    'context:created': (args: { ctx: ApiInterface; logger: LoggerInterface }) => void
+    "context:created": (args: {
+      ctx: ApiInterface;
+      logger: LoggerInterface;
+    }) => void;
     /**
      * Called when the config file or one of its dependencies (imports) has changed.
      */
-    'config:change': (args: { config: UserConfig }) => MaybeAsyncReturn
+    "config:change": (args: { config: UserConfig }) => MaybeAsyncReturn;
     /**
      * Called after reading the file content but before parsing it.
      * You can use this hook to transform the file content to a tsx-friendly syntax so that Panda's parser can parse it.
      * You can also use this hook to parse the file's content on your side using a custom parser, in this case you don't have to return anything.
      */
-    'parser:before': (args: { filePath: string; content: string }) => string | void
+    "parser:before": (args: {
+      filePath: string;
+      content: string;
+    }) => string | void;
     /**
      * Called after the file styles are extracted and processed into the resulting ParserResult object.
      * You can also use this hook to add your own extraction results from your custom parser to the ParserResult object.
      */
-    'parser:after': (args: { filePath: string; result: ParserResultInterface | undefined }) => void
+    "parser:after": (args: {
+      filePath: string;
+      result: ParserResultInterface | undefined;
+    }) => void;
     /**
      * Called after the codegen is completed
      */
-    'codegen:done': () => MaybeAsyncReturn
+    "codegen:done": () => MaybeAsyncReturn;
     /**
      * Called right before adding the design-system CSS (global, static, preflight, tokens, keyframes) to the final CSS
      * Called right before writing/injecting the final CSS (styles.css) that contains the design-system CSS and the parser CSS
      * You can use it to tweak the CSS content before it's written to disk or injected through the postcss plugin.
      */
-    'cssgen:done': (args: {
-      artifact: 'global' | 'static' | 'reset' | 'tokens' | 'keyframes' | 'styles.css'
-      content: string
-    }) => string | void
+    "cssgen:done": (args: {
+      artifact:
+        | "global"
+        | "static"
+        | "reset"
+        | "tokens"
+        | "keyframes"
+        | "styles.css";
+      content: string;
+    }) => string | void;
   }
   ```
 
@@ -1141,16 +1171,16 @@
   together and the styles will be merged correctly.
 
   ```jsx
-  const Box = styled('div', {
+  const Box = styled("div", {
     base: {
-      background: 'red.light',
-      color: 'white',
+      background: "red.light",
+      color: "white",
     },
-  })
+  });
 
   const ExtendedBox = styled(Box, {
-    base: { background: 'red.dark' },
-  })
+    base: { background: "red.dark" },
+  });
 
   // <ExtendedBox> will have a background of `red.dark` and a color of `white`
   ```
@@ -1163,14 +1193,14 @@
   - CVA or Inline CVA + Config Recipe = ❌
 
   ```jsx
-  import { button } from '../styled-system/recipes'
+  import { button } from "../styled-system/recipes";
 
-  const Button = styled('div', button)
+  const Button = styled("div", button);
 
   // ❌ This will throw an error
   const ExtendedButton = styled(Button, {
-    base: { background: 'red.dark' },
-  })
+    base: { background: "red.dark" },
+  });
   ```
 
 ### Patch Changes
@@ -1974,11 +2004,11 @@ This hook is called right before writing the codegen files to disk. You can use
 export default defineConfig({
   // ...
   hooks: {
-    'codegen:prepare': ({ artifacts, changed }) => {
+    "codegen:prepare": ({ artifacts, changed }) => {
       // do something with the emitted js/d.ts files
     },
   },
-})
+});
 ```
 
 - d5977c24: - Add a `--logfile` flag to the `panda`, `panda codegen`, `panda cssgen` and `panda debug` commands.
@@ -1995,11 +2025,11 @@ export default defineConfig({
   ```js
   module.exports = {
     plugins: {
-      '@pandacss/dev/postcss': {
-        logfile: './logs/panda.log',
+      "@pandacss/dev/postcss": {
+        logfile: "./logs/panda.log",
       },
     },
-  }
+  };
   ```
 
 - Updated dependencies [0dd45b6a]
@@ -2049,8 +2079,8 @@ export default defineConfig({
   ```ts
   export default defineConfig({
     // ...
-    dependencies: ['path/to/files/**.ts'],
-  })
+    dependencies: ["path/to/files/**.ts"],
+  });
   ```
 
   - Invoke `config:change` hook in more situations (when the `--watch` flag is passed to `panda codegen`,
@@ -2102,39 +2132,54 @@ export default defineConfig({
      * Called when the config is resolved, after all the presets are loaded and merged.
      * This is the first hook called, you can use it to tweak the config before the context is created.
      */
-    'config:resolved': (args: { conf: LoadConfigResult }) => MaybeAsyncReturn
+    "config:resolved": (args: { conf: LoadConfigResult }) => MaybeAsyncReturn;
     /**
      * Called when the Panda context has been created and the API is ready to be used.
      */
-    'context:created': (args: { ctx: ApiInterface; logger: LoggerInterface }) => void
+    "context:created": (args: {
+      ctx: ApiInterface;
+      logger: LoggerInterface;
+    }) => void;
     /**
      * Called when the config file or one of its dependencies (imports) has changed.
      */
-    'config:change': (args: { config: UserConfig }) => MaybeAsyncReturn
+    "config:change": (args: { config: UserConfig }) => MaybeAsyncReturn;
     /**
      * Called after reading the file content but before parsing it.
      * You can use this hook to transform the file content to a tsx-friendly syntax so that Panda's parser can parse it.
      * You can also use this hook to parse the file's content on your side using a custom parser, in this case you don't have to return anything.
      */
-    'parser:before': (args: { filePath: string; content: string }) => string | void
+    "parser:before": (args: {
+      filePath: string;
+      content: string;
+    }) => string | void;
     /**
      * Called after the file styles are extracted and processed into the resulting ParserResult object.
      * You can also use this hook to add your own extraction results from your custom parser to the ParserResult object.
      */
-    'parser:after': (args: { filePath: string; result: ParserResultInterface | undefined }) => void
+    "parser:after": (args: {
+      filePath: string;
+      result: ParserResultInterface | undefined;
+    }) => void;
     /**
      * Called after the codegen is completed
      */
-    'codegen:done': () => MaybeAsyncReturn
+    "codegen:done": () => MaybeAsyncReturn;
     /**
      * Called right before adding the design-system CSS (global, static, preflight, tokens, keyframes) to the final CSS
      * Called right before writing/injecting the final CSS (styles.css) that contains the design-system CSS and the parser CSS
      * You can use it to tweak the CSS content before it's written to disk or injected through the postcss plugin.
      */
-    'cssgen:done': (args: {
-      artifact: 'global' | 'static' | 'reset' | 'tokens' | 'keyframes' | 'styles.css'
-      content: string
-    }) => string | void
+    "cssgen:done": (args: {
+      artifact:
+        | "global"
+        | "static"
+        | "reset"
+        | "tokens"
+        | "keyframes"
+        | "styles.css";
+      content: string;
+    }) => string | void;
   }
   ```
 
@@ -2752,16 +2797,16 @@ export default defineConfig({
   together and the styles will be merged correctly.
 
   ```jsx
-  const Box = styled('div', {
+  const Box = styled("div", {
     base: {
-      background: 'red.light',
-      color: 'white',
+      background: "red.light",
+      color: "white",
     },
-  })
+  });
 
   const ExtendedBox = styled(Box, {
-    base: { background: 'red.dark' },
-  })
+    base: { background: "red.dark" },
+  });
 
   // <ExtendedBox> will have a background of `red.dark` and a color of `white`
   ```
@@ -2774,14 +2819,14 @@ export default defineConfig({
   - CVA or Inline CVA + Config Recipe = ❌
 
   ```jsx
-  import { button } from '../styled-system/recipes'
+  import { button } from "../styled-system/recipes";
 
-  const Button = styled('div', button)
+  const Button = styled("div", button);
 
   // ❌ This will throw an error
   const ExtendedButton = styled(Button, {
-    base: { background: 'red.dark' },
-  })
+    base: { background: "red.dark" },
+  });
   ```
 
 ### Patch Changes
diff --git a/packages/node/package.json b/packages/node/package.json
index c34b8036a..796906460 100644
--- a/packages/node/package.json
+++ b/packages/node/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/node",
-  "version": "0.39.0",
+  "version": "0.39.1",
   "description": "The core css panda library",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
diff --git a/packages/parser/CHANGELOG.md b/packages/parser/CHANGELOG.md
index 7e19b5a68..8871992a4 100644
--- a/packages/parser/CHANGELOG.md
+++ b/packages/parser/CHANGELOG.md
@@ -1,5 +1,16 @@
 # @pandacss/parser
 
+## 0.39.1
+
+### Patch Changes
+
+- @pandacss/config@0.39.1
+- @pandacss/core@0.39.1
+- @pandacss/extractor@0.39.1
+- @pandacss/logger@0.39.1
+- @pandacss/shared@0.39.1
+- @pandacss/types@0.39.1
+
 ## 0.39.0
 
 ### Minor Changes
@@ -11,7 +22,7 @@
   **Before**
 
   ```jsx
-  import { linkBox, linkOverlay } from 'styled-system/patterns'
+  import { linkBox, linkOverlay } from "styled-system/patterns";
 
   const App = () => {
     return (
@@ -21,26 +32,26 @@
           Link
         </a>
       </div>
-    )
-  }
+    );
+  };
   ```
 
   **After**
 
   ```jsx
-  import { css } from 'styled-system/css'
-  import { linkOverlay } from 'styled-system/patterns'
+  import { css } from "styled-system/css";
+  import { linkOverlay } from "styled-system/patterns";
 
   const App = () => {
     return (
-      <div className={css({ pos: 'relative' })}>
+      <div className={css({ pos: "relative" })}>
         <img src="https://via.placeholder.com/150" alt="placeholder" />
         <a href="#" className={linkOverlay()}>
           Link
         </a>
       </div>
-    )
-  }
+    );
+  };
   ```
 
 ### Patch Changes
@@ -64,23 +75,28 @@
   This makes it even easier to merge styles from multiple sources.
 
   ```tsx
-  import { Stack, styled } from '../styled-system/jsx'
+  import { Stack, styled } from "../styled-system/jsx";
 
   const HeroSection = (props) => {
     return (
-      <Stack css={[{ color: 'blue.300', padding: '4' }, props.css]}>
-        <styled.div css={[{ fontSize: '2xl' }, props.hero]}>Hero Section</styled.div>
+      <Stack css={[{ color: "blue.300", padding: "4" }, props.css]}>
+        <styled.div css={[{ fontSize: "2xl" }, props.hero]}>
+          Hero Section
+        </styled.div>
       </Stack>
-    )
-  }
+    );
+  };
 
   const App = () => {
     return (
       <>
-        <HeroSection css={{ backgroundColor: 'yellow.300' }} hero={css.raw({ fontSize: '4xl', color: 'red.300' })} />
+        <HeroSection
+          css={{ backgroundColor: "yellow.300" }}
+          hero={css.raw({ fontSize: "4xl", color: "red.300" })}
+        />
       </>
-    )
-  }
+    );
+  };
   ```
 
   should render something like:
@@ -122,21 +138,21 @@
 - 99870bb: Fix issue where setting the pattern `jsx` option with dot notation didn't work.
 
   ```jsx
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
     patterns: {
       extend: {
         grid: {
-          jsx: ['Form.Group', 'Grid'],
+          jsx: ["Form.Group", "Grid"],
         },
         stack: {
-          jsx: ['Form.Action', 'Stack'],
+          jsx: ["Form.Action", "Stack"],
         },
       },
     },
-  })
+  });
   ```
 
 - Updated dependencies [88049c5]
@@ -178,7 +194,7 @@
 - 35bd134: Fix JSX matching with recipes after introducing namespace imports
 
   ```ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
@@ -186,11 +202,11 @@
       extend: {
         slotRecipes: {
           tabs: {
-            className: 'tabs',
-            slots: ['root', 'list', 'trigger', 'content', 'indicator'],
+            className: "tabs",
+            slots: ["root", "list", "trigger", "content", "indicator"],
             base: {
               root: {
-                display: 'flex',
+                display: "flex",
                 // ...
               },
             },
@@ -198,7 +214,7 @@
         },
       },
     },
-  })
+  });
   ```
 
   ```tsx
@@ -214,8 +230,8 @@
           <Tabs.Indicator />
         </Tabs.List>
       </Tabs.Root>
-    )
-  }
+    );
+  };
   ```
 
   We introduced a bug in [v0.34.2](https://github.com/chakra-ui/panda/blob/main/CHANGELOG.md#0342---2024-03-08) where
@@ -254,11 +270,13 @@
 - c459b43: Fix extraction of JSX `styled` factory when using namespace imports
 
   ```tsx
-  import * as pandaJsx from '../styled-system/jsx'
+  import * as pandaJsx from "../styled-system/jsx";
 
   // ✅ this will work now
-  pandaJsx.styled('div', { base: { color: 'red' } })
-  const App = () => <pandaJsx.styled.span color="blue">Hello</pandaJsx.styled.span>
+  pandaJsx.styled("div", { base: { color: "red" } });
+  const App = () => (
+    <pandaJsx.styled.span color="blue">Hello</pandaJsx.styled.span>
+  );
   ```
 
 - Updated dependencies [50db354]
@@ -290,18 +308,18 @@
 - 0bf09f2: Allow using namespaced imports
 
   ```ts
-  import * as p from 'styled-system/patterns'
-  import * as recipes from 'styled-system/recipes'
-  import * as panda from 'styled-system/css'
+  import * as p from "styled-system/patterns";
+  import * as recipes from "styled-system/recipes";
+  import * as panda from "styled-system/css";
 
   // this will now be extracted
-  p.stack({ mt: '40px' })
+  p.stack({ mt: "40px" });
 
-  recipes.cardStyle({ rounded: true })
+  recipes.cardStyle({ rounded: true });
 
-  panda.css({ color: 'red' })
-  panda.cva({ base: { color: 'blue' } })
-  panda.sva({ base: { root: { color: 'green' } } })
+  panda.css({ color: "red" });
+  panda.cva({ base: { color: "blue" } });
+  panda.sva({ base: { root: { color: "green" } } });
   ```
 
 - Updated dependencies [0bf09f2]
@@ -363,25 +381,25 @@
 - 31071ba: Fix an issue for token names starting with '0'
 
   ```ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     theme: {
       tokens: {
         spacing: {
-          '025': {
-            value: '0.125rem',
+          "025": {
+            value: "0.125rem",
           },
         },
       },
     },
-  })
+  });
   ```
 
   and then using it like
 
   ```ts
-  css({ margin: '025' })
+  css({ margin: "025" });
   ```
 
   This would not generate the expected CSS because the parser would try to parse `025` as a number (`25`) instead of
@@ -392,7 +410,7 @@
   Given this config:
 
   ```ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
@@ -403,13 +421,13 @@
             bg: {
               primary: {
                 DEFAULT: {
-                  value: '{colors.red.500}',
+                  value: "{colors.red.500}",
                 },
                 base: {
-                  value: '{colors.green.500}',
+                  value: "{colors.green.500}",
                 },
                 hover: {
-                  value: '{colors.yellow.300}',
+                  value: "{colors.yellow.300}",
                 },
               },
             },
@@ -417,17 +435,17 @@
         },
       },
     },
-  })
+  });
   ```
 
   And this style usage:
 
   ```ts
-  import { css } from 'styled-system/css'
+  import { css } from "styled-system/css";
 
   css({
-    colorPalette: 'bg.primary',
-  })
+    colorPalette: "bg.primary",
+  });
   ```
 
   This is the difference in the generated css
@@ -458,11 +476,11 @@
   - Allow using multiple aliases for the same identifier for the `/css` entrypoints just like `/patterns` and `/recipes`
 
   ```ts
-  import { css } from '../styled-system/css'
-  import { css as css2 } from '../styled-system/css'
+  import { css } from "../styled-system/css";
+  import { css as css2 } from "../styled-system/css";
 
-  css({ display: 'flex' })
-  css2({ flexDirection: 'column' }) // this wasn't working before, now it does
+  css({ display: "flex" });
+  css2({ flexDirection: "column" }); // this wasn't working before, now it does
   ```
 
 - Updated dependencies [a032375]
@@ -510,10 +528,10 @@
 
   ```ts
   css({
-    padding: '1px',
-    paddingTop: '3px',
-    paddingBottom: '4px',
-  })
+    padding: "1px",
+    paddingTop: "3px",
+    paddingBottom: "4px",
+  });
   ```
 
   Will now always generate the following css:
@@ -573,16 +591,17 @@
   export default defineConfig({
     // ...
     hooks: {
-      'parser:before': ({ configure }) => {
+      "parser:before": ({ configure }) => {
         configure({
           // ignore the Select.Content entirely
-          matchTag: (tag) => tag !== 'Select.Content',
+          matchTag: (tag) => tag !== "Select.Content",
           // ...or specifically ignore the `position` property
-          matchTagProp: (tag, prop) => tag === 'Select.Content' && prop !== 'position',
-        })
+          matchTagProp: (tag, prop) =>
+            tag === "Select.Content" && prop !== "position",
+        });
       },
     },
-  })
+  });
   ```
 
 - Updated dependencies [6b829cab]
@@ -623,11 +642,11 @@
   ```js
   module.exports = {
     plugins: {
-      '@pandacss/dev/postcss': {
-        logfile: './logs/panda.log',
+      "@pandacss/dev/postcss": {
+        logfile: "./logs/panda.log",
       },
     },
-  }
+  };
   ```
 
 - Updated dependencies [0dd45b6a]
@@ -666,10 +685,10 @@
   css({
     // ✅ this is fine now, will resolve to something like
     // `@container (min-width: 56em)`
-    '@container (min-width: {sizes.4xl})': {
-      color: 'green',
+    "@container (min-width: {sizes.4xl})": {
+      color: "green",
     },
-  })
+  });
   ```
 
   Fix an issue where the curly token references would not be escaped if the token path was not found.
@@ -711,39 +730,54 @@
      * Called when the config is resolved, after all the presets are loaded and merged.
      * This is the first hook called, you can use it to tweak the config before the context is created.
      */
-    'config:resolved': (args: { conf: LoadConfigResult }) => MaybeAsyncReturn
+    "config:resolved": (args: { conf: LoadConfigResult }) => MaybeAsyncReturn;
     /**
      * Called when the Panda context has been created and the API is ready to be used.
      */
-    'context:created': (args: { ctx: ApiInterface; logger: LoggerInterface }) => void
+    "context:created": (args: {
+      ctx: ApiInterface;
+      logger: LoggerInterface;
+    }) => void;
     /**
      * Called when the config file or one of its dependencies (imports) has changed.
      */
-    'config:change': (args: { config: UserConfig }) => MaybeAsyncReturn
+    "config:change": (args: { config: UserConfig }) => MaybeAsyncReturn;
     /**
      * Called after reading the file content but before parsing it.
      * You can use this hook to transform the file content to a tsx-friendly syntax so that Panda's parser can parse it.
      * You can also use this hook to parse the file's content on your side using a custom parser, in this case you don't have to return anything.
      */
-    'parser:before': (args: { filePath: string; content: string }) => string | void
+    "parser:before": (args: {
+      filePath: string;
+      content: string;
+    }) => string | void;
     /**
      * Called after the file styles are extracted and processed into the resulting ParserResult object.
      * You can also use this hook to add your own extraction results from your custom parser to the ParserResult object.
      */
-    'parser:after': (args: { filePath: string; result: ParserResultInterface | undefined }) => void
+    "parser:after": (args: {
+      filePath: string;
+      result: ParserResultInterface | undefined;
+    }) => void;
     /**
      * Called after the codegen is completed
      */
-    'codegen:done': () => MaybeAsyncReturn
+    "codegen:done": () => MaybeAsyncReturn;
     /**
      * Called right before adding the design-system CSS (global, static, preflight, tokens, keyframes) to the final CSS
      * Called right before writing/injecting the final CSS (styles.css) that contains the design-system CSS and the parser CSS
      * You can use it to tweak the CSS content before it's written to disk or injected through the postcss plugin.
      */
-    'cssgen:done': (args: {
-      artifact: 'global' | 'static' | 'reset' | 'tokens' | 'keyframes' | 'styles.css'
-      content: string
-    }) => string | void
+    "cssgen:done": (args: {
+      artifact:
+        | "global"
+        | "static"
+        | "reset"
+        | "tokens"
+        | "keyframes"
+        | "styles.css";
+      content: string;
+    }) => string | void;
   }
   ```
 
@@ -882,8 +916,8 @@
   ```jsx
   css({
     // This didn't work, but now it does
-    base: { color: 'blue' },
-  })
+    base: { color: "blue" },
+  });
   ```
 
 - Updated dependencies [59fd291c]
@@ -927,38 +961,38 @@
 
   ```ts
   const card = defineRecipe({
-    className: 'card',
-    base: { color: 'white' },
+    className: "card",
+    base: { color: "white" },
     variants: {
       size: {
-        small: { fontSize: '14px' },
-        large: { fontSize: '18px' },
+        small: { fontSize: "14px" },
+        large: { fontSize: "18px" },
       },
       visual: {
-        primary: { backgroundColor: 'blue' },
-        secondary: { backgroundColor: 'gray' },
+        primary: { backgroundColor: "blue" },
+        secondary: { backgroundColor: "gray" },
       },
     },
-  })
+  });
 
   export default defineConfig({
     // ...
     staticCss: {
       recipes: {
-        card: ['*'], // this
+        card: ["*"], // this
 
         // was equivalent to:
         card: [
           // notice how `responsive: true` was implicitly added
-          { size: ['*'], responsive: true },
-          { visual: ['*'], responsive: true },
+          { size: ["*"], responsive: true },
+          { visual: ["*"], responsive: true },
         ],
 
         //   will now correctly be equivalent to:
-        card: [{ size: ['*'] }, { visual: ['*'] }],
+        card: [{ size: ["*"] }, { visual: ["*"] }],
       },
     },
-  })
+  });
   ```
 
   Here's the diff in the generated CSS:
@@ -1082,30 +1116,30 @@
   another file, such as when using `Ark-UI` like `import { comboboxAnatomy } from '@ark-ui/anatomy'`
 
   ```ts
-  import { sva } from '../styled-system/css'
-  import { slots } from './slots'
+  import { sva } from "../styled-system/css";
+  import { slots } from "./slots";
 
   const card = sva({
     slots, // ❌ did NOT work -> ✅ will now work as expected
     base: {
       root: {
-        p: '6',
-        m: '4',
-        w: 'md',
-        boxShadow: 'md',
-        borderRadius: 'md',
-        _dark: { bg: '#262626', color: 'white' },
+        p: "6",
+        m: "4",
+        w: "md",
+        boxShadow: "md",
+        borderRadius: "md",
+        _dark: { bg: "#262626", color: "white" },
       },
       content: {
-        textStyle: 'lg',
+        textStyle: "lg",
       },
       title: {
-        textStyle: 'xl',
-        fontWeight: 'semibold',
-        pb: '2',
+        textStyle: "xl",
+        fontWeight: "semibold",
+        pb: "2",
       },
     },
-  })
+  });
   ```
 
 - b01eb049: Fix a parser issue where we didn't handle import aliases when using a {xxx}.raw() function.
@@ -1114,15 +1148,15 @@
 
   ```ts
   // button.stories.ts
-  import { button as buttonRecipe } from '@ui/styled-system/recipes'
+  import { button as buttonRecipe } from "@ui/styled-system/recipes";
 
   export const Primary: Story = {
     // ❌ this wouldn't be parsed as a recipe because of the alias + .raw()
     //  -> ✅ it's now fixed
     args: buttonRecipe.raw({
-      color: 'primary',
+      color: "primary",
     }),
-  }
+  };
   ```
 
 - a3b6ed5f: Fix & perf improvement: skip JSX parsing when not using `config.jsxFramework` / skip tagged template literal
@@ -1144,9 +1178,9 @@
 
   ```ts
   css({
-    borderWidth: '[2px!]',
-    width: '[2px !important]',
-  })
+    borderWidth: "[2px!]",
+    width: "[2px !important]",
+  });
   ```
 
 - Updated dependencies [8f4ce97c]
@@ -1374,9 +1408,9 @@
 
   ```ts
   interface FactoryOptions<TProps extends Dict> {
-    dataAttr?: boolean
-    defaultProps?: TProps
-    shouldForwardProp?(prop: string, variantKeys: string[]): boolean
+    dataAttr?: boolean;
+    defaultProps?: TProps;
+    shouldForwardProp?(prop: string, variantKeys: string[]): boolean;
   }
   ```
 
@@ -1384,16 +1418,16 @@
     This is useful for testing and debugging.
 
   ```jsx
-  import { styled } from '../styled-system/jsx'
-  import { button } from '../styled-system/recipes'
+  import { styled } from "../styled-system/jsx";
+  import { button } from "../styled-system/recipes";
 
-  const Button = styled('button', button, { dataAttr: true })
+  const Button = styled("button", button, { dataAttr: true });
 
   const App = () => (
     <Button variant="secondary" mt="10px">
       Button
     </Button>
-  )
+  );
   // Will render something like <button data-recipe="button" class="btn btn--variant_purple mt_10px">Button</button>
   ```
 
@@ -1401,17 +1435,17 @@
     override the default variants or base styles of a recipe.
 
   ```jsx
-  import { styled } from '../styled-system/jsx'
-  import { button } from '../styled-system/recipes'
+  import { styled } from "../styled-system/jsx";
+  import { button } from "../styled-system/recipes";
 
-  const Button = styled('button', button, {
+  const Button = styled("button", button, {
     defaultProps: {
-      variant: 'secondary',
-      px: '10px',
+      variant: "secondary",
+      px: "10px",
     },
-  })
+  });
 
-  const App = () => <Button>Button</Button>
+  const App = () => <Button>Button</Button>;
   // Will render something like <button class="btn btn--variant_secondary px_10px">Button</button>
   ```
 
@@ -1419,19 +1453,20 @@
     props except recipe variants and style props are forwarded.
 
   ```jsx
-  import { styled } from '../styled-system/jsx'
-  import { button } from '../styled-system/recipes'
-  import { isCssProperty } from '../styled-system/jsx'
-  import { motion, isValidMotionProp } from 'framer-motion'
+  import { styled } from "../styled-system/jsx";
+  import { button } from "../styled-system/recipes";
+  import { isCssProperty } from "../styled-system/jsx";
+  import { motion, isValidMotionProp } from "framer-motion";
 
   const StyledMotion = styled(
     motion.div,
     {},
     {
       shouldForwardProp: (prop, variantKeys) =>
-        isValidMotionProp(prop) || (!variantKeys.includes(prop) && !isCssProperty(prop)),
+        isValidMotionProp(prop) ||
+        (!variantKeys.includes(prop) && !isCssProperty(prop)),
     },
-  )
+  );
   ```
 
 - 3a04a927: Fix static extraction of the
@@ -1531,42 +1566,42 @@
 
   ```ts
   export default defineConfig({
-    outdir: './outdir',
+    outdir: "./outdir",
     importMap: {
-      css: '#panda/styled-system/css',
-      recipes: '#panda/styled-system/recipes',
-      patterns: '#panda/styled-system/patterns',
-      jsx: '#panda/styled-system/jsx',
+      css: "#panda/styled-system/css",
+      recipes: "#panda/styled-system/recipes",
+      patterns: "#panda/styled-system/patterns",
+      jsx: "#panda/styled-system/jsx",
     },
-  })
+  });
   ```
 
   Or you could also make your outdir an actual package from your monorepo:
 
   ```ts
   export default defineConfig({
-    outdir: '../packages/styled-system',
+    outdir: "../packages/styled-system",
     importMap: {
-      css: '@monorepo/styled-system',
-      recipes: '@monorepo/styled-system',
-      patterns: '@monorepo/styled-system',
-      jsx: '@monorepo/styled-system',
+      css: "@monorepo/styled-system",
+      recipes: "@monorepo/styled-system",
+      patterns: "@monorepo/styled-system",
+      jsx: "@monorepo/styled-system",
     },
-  })
+  });
   ```
 
   Working with tsconfig paths aliases is easy:
 
   ```ts
   export default defineConfig({
-    outdir: 'styled-system',
+    outdir: "styled-system",
     importMap: {
-      css: 'styled-system/css',
-      recipes: 'styled-system/recipes',
-      patterns: 'styled-system/patterns',
-      jsx: 'styled-system/jsx',
+      css: "styled-system/css",
+      recipes: "styled-system/recipes",
+      patterns: "styled-system/patterns",
+      jsx: "styled-system/jsx",
     },
-  })
+  });
   ```
 
 - Updated dependencies [95b06bb1]
@@ -1601,20 +1636,20 @@
   so this will now work:
 
   ```ts
-  import { css } from 'styled-system/css'
+  import { css } from "styled-system/css";
 
   const paragraphSpacingStyle = css.raw({
-    '&:not(:first-child)': { marginBlockEnd: '1em' },
-  })
+    "&:not(:first-child)": { marginBlockEnd: "1em" },
+  });
 
   export const proseCss = css.raw({
-    maxWidth: '800px',
-    '& p': {
-      '&:not(:first-child)': { marginBlockStart: '1em' },
+    maxWidth: "800px",
+    "& p": {
+      "&:not(:first-child)": { marginBlockStart: "1em" },
     },
-    '& h1': paragraphSpacingStyle,
-    '& h2': paragraphSpacingStyle,
-  })
+    "& h1": paragraphSpacingStyle,
+    "& h2": paragraphSpacingStyle,
+  });
   ```
 
   & use ECMA preset for ts-evaluator: This means that no other globals than those that are defined in the ECMAScript
@@ -1622,35 +1657,35 @@
   this:
 
   ```ts
-  import { cva } from '.panda/css'
+  import { cva } from ".panda/css";
 
   const variants = () => {
     const spacingTokens = Object.entries({
-      s: 'token(spacing.1)',
-      m: 'token(spacing.2)',
-      l: 'token(spacing.3)',
-    })
+      s: "token(spacing.1)",
+      m: "token(spacing.2)",
+      l: "token(spacing.3)",
+    });
 
     const spacingProps = {
-      px: 'paddingX',
-      py: 'paddingY',
-    }
+      px: "paddingX",
+      py: "paddingY",
+    };
 
     // Generate variants programmatically
     return Object.entries(spacingProps)
       .map(([name, styleProp]) => {
         const variants = spacingTokens
           .map(([variant, token]) => ({ [variant]: { [styleProp]: token } }))
-          .reduce((_agg, kv) => ({ ..._agg, ...kv }))
+          .reduce((_agg, kv) => ({ ..._agg, ...kv }));
 
-        return { [name]: variants }
+        return { [name]: variants };
       })
-      .reduce((_agg, kv) => ({ ..._agg, ...kv }))
-  }
+      .reduce((_agg, kv) => ({ ..._agg, ...kv }));
+  };
 
   const baseStyle = cva({
     variants: variants(),
-  })
+  });
   ```
 
 - Updated dependencies [c40ae1b9]
@@ -1797,12 +1832,12 @@
   **Definition**
 
   ```jsx
-  import { sva } from 'styled-system/css'
+  import { sva } from "styled-system/css";
 
   const button = sva({
-    slots: ['label', 'icon'],
+    slots: ["label", "icon"],
     base: {
-      label: { color: 'red', textDecoration: 'underline' },
+      label: { color: "red", textDecoration: "underline" },
     },
     variants: {
       rounded: {
@@ -1810,33 +1845,33 @@
       },
       size: {
         sm: {
-          label: { fontSize: 'sm' },
-          icon: { fontSize: 'sm' },
+          label: { fontSize: "sm" },
+          icon: { fontSize: "sm" },
         },
         lg: {
-          label: { fontSize: 'lg' },
-          icon: { fontSize: 'lg', color: 'pink' },
+          label: { fontSize: "lg" },
+          icon: { fontSize: "lg", color: "pink" },
         },
       },
     },
     defaultVariants: {
-      size: 'sm',
+      size: "sm",
     },
-  })
+  });
   ```
 
   **Usage**
 
   ```jsx
   export function App() {
-    const btnClass = button({ size: 'lg', rounded: true })
+    const btnClass = button({ size: "lg", rounded: true });
 
     return (
       <button>
         <p class={btnClass.label}> Label</p>
         <p class={btnClass.icon}> Icon</p>
       </button>
-    )
+    );
   }
   ```
 
@@ -1885,26 +1920,26 @@
   Update the `jsx` property to be used for advanced tracking of custom pattern components.
 
   ```jsx
-  import { Circle } from 'styled-system/jsx'
+  import { Circle } from "styled-system/jsx";
   const CustomCircle = ({ children, ...props }) => {
-    return <Circle {...props}>{children}</Circle>
-  }
+    return <Circle {...props}>{children}</Circle>;
+  };
   ```
 
   To track the `CustomCircle` component, you can now use the `jsx` property.
 
   ```js
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     patterns: {
       extend: {
         circle: {
-          jsx: ['CustomCircle'],
+          jsx: ["CustomCircle"],
         },
       },
     },
-  })
+  });
   ```
 
 ### Patch Changes
@@ -2004,9 +2039,17 @@
   ```tsx
   const ComponentWithMultipleRecipes = ({ variant }) => {
     return (
-      <button className={cx(pinkRecipe({ variant }), greenRecipe({ variant }), blueRecipe({ variant }))}>Hello</button>
-    )
-  }
+      <button
+        className={cx(
+          pinkRecipe({ variant }),
+          greenRecipe({ variant }),
+          blueRecipe({ variant }),
+        )}
+      >
+        Hello
+      </button>
+    );
+  };
   ```
 
   Given a `panda.config.ts` with recipes each including a common `jsx` tag name, such as:
@@ -2114,8 +2157,8 @@
   // panda.config.ts
   export default defineConfig({
     //...
-    syntax: 'template-literal',
-  })
+    syntax: "template-literal",
+  });
   ```
 
   > For existing projects, you might need to run the `panda codegen --clean`
@@ -2136,10 +2179,10 @@
   ```ts
   const Input = styled.input({
     base: {
-      color: 'blue.100',
-      bg: 'blue.900',
+      color: "blue.100",
+      bg: "blue.900",
     },
-  })
+  });
   ```
 
 - Updated dependencies [60df9bd1]
diff --git a/packages/parser/package.json b/packages/parser/package.json
index 493e4bcb5..821343796 100644
--- a/packages/parser/package.json
+++ b/packages/parser/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/parser",
-  "version": "0.39.0",
+  "version": "0.39.1",
   "description": "The static parser for panda css",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
diff --git a/packages/postcss/CHANGELOG.md b/packages/postcss/CHANGELOG.md
index e06d46fe3..899092836 100644
--- a/packages/postcss/CHANGELOG.md
+++ b/packages/postcss/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @pandacss/postcss
 
+## 0.39.1
+
+### Patch Changes
+
+- @pandacss/node@0.39.1
+
 ## 0.39.0
 
 ### Patch Changes
@@ -57,11 +63,11 @@
 
   module.exports = {
     plugins: {
-      '@pandacss/dev/postcss': {
+      "@pandacss/dev/postcss": {
         allow: [/node_modules\/.embroider/],
       },
     },
-  }
+  };
   ```
 
 ### Patch Changes
@@ -152,11 +158,11 @@
   ```js
   module.exports = {
     plugins: {
-      '@pandacss/dev/postcss': {
-        logfile: './logs/panda.log',
+      "@pandacss/dev/postcss": {
+        logfile: "./logs/panda.log",
       },
     },
-  }
+  };
   ```
 
 - Updated dependencies [05686b9d]
@@ -593,11 +599,11 @@
   ```js
   module.exports = {
     plugins: [
-      require('@pandacss/postcss')({
-        configPath: './path/to/panda.config.js',
+      require("@pandacss/postcss")({
+        configPath: "./path/to/panda.config.js",
       }),
     ],
-  }
+  };
   ```
 
   - @pandacss/node@0.3.2
diff --git a/packages/postcss/package.json b/packages/postcss/package.json
index 229391c3d..a18401334 100644
--- a/packages/postcss/package.json
+++ b/packages/postcss/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/postcss",
-  "version": "0.39.0",
+  "version": "0.39.1",
   "description": "PostCSS integration for Panda CSS",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
diff --git a/packages/preset-atlaskit/CHANGELOG.md b/packages/preset-atlaskit/CHANGELOG.md
index 606746486..51b5260e2 100644
--- a/packages/preset-atlaskit/CHANGELOG.md
+++ b/packages/preset-atlaskit/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @pandacss/preset-atlaskit
 
+## 0.39.1
+
+### Patch Changes
+
+- @pandacss/types@0.39.1
+
 ## 0.39.0
 
 ### Patch Changes
diff --git a/packages/preset-atlaskit/package.json b/packages/preset-atlaskit/package.json
index 464473e23..94eb93bef 100644
--- a/packages/preset-atlaskit/package.json
+++ b/packages/preset-atlaskit/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/preset-atlaskit",
-  "version": "0.39.0",
+  "version": "0.39.1",
   "description": "The preset for PandaCSS that contains the default theme",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
diff --git a/packages/preset-base/CHANGELOG.md b/packages/preset-base/CHANGELOG.md
index 5ca1c0606..f33e0b958 100644
--- a/packages/preset-base/CHANGELOG.md
+++ b/packages/preset-base/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @pandacss/preset-base
 
+## 0.39.1
+
+### Patch Changes
+
+- @pandacss/types@0.39.1
+
 ## 0.39.0
 
 ### Minor Changes
@@ -11,7 +17,7 @@
   **Before**
 
   ```jsx
-  import { linkBox, linkOverlay } from 'styled-system/patterns'
+  import { linkBox, linkOverlay } from "styled-system/patterns";
 
   const App = () => {
     return (
@@ -21,26 +27,26 @@
           Link
         </a>
       </div>
-    )
-  }
+    );
+  };
   ```
 
   **After**
 
   ```jsx
-  import { css } from 'styled-system/css'
-  import { linkOverlay } from 'styled-system/patterns'
+  import { css } from "styled-system/css";
+  import { linkOverlay } from "styled-system/patterns";
 
   const App = () => {
     return (
-      <div className={css({ pos: 'relative' })}>
+      <div className={css({ pos: "relative" })}>
         <img src="https://via.placeholder.com/150" alt="placeholder" />
         <a href="#" className={linkOverlay()}>
           Link
         </a>
       </div>
-    )
-  }
+    );
+  };
   ```
 
 ### Patch Changes
@@ -104,9 +110,9 @@
     useful when applying negative margin to child elements.
 
   ```tsx
-  <div className={flex({ spaceX: '-1' })}>
-    <div className={circle({ size: '5', bg: 'red' })} />
-    <div className={circle({ size: '5', bg: 'pink' })} />
+  <div className={flex({ spaceX: "-1" })}>
+    <div className={circle({ size: "5", bg: "red" })} />
+    <div className={circle({ size: "5", bg: "pink" })} />
   </div>
   ```
 
@@ -118,13 +124,13 @@
   ```tsx
   <div
     className={css({
-      bgGradient: 'to-r',
+      bgGradient: "to-r",
       // from
-      gradientFrom: 'red',
-      gradientFromPosition: 'top left',
+      gradientFrom: "red",
+      gradientFromPosition: "top left",
       // to
-      gradientTo: 'blue',
-      gradientToPosition: 'bottom right',
+      gradientTo: "blue",
+      gradientToPosition: "bottom right",
     })}
   />
   ```
@@ -219,9 +225,9 @@
 
   ```ts
   css({
-    textShadow: '1px 1px 1px var(--text-shadow-color)',
-    textShadowColor: 'black',
-  })
+    textShadow: "1px 1px 1px var(--text-shadow-color)",
+    textShadowColor: "black",
+  });
   ```
 
 ### Patch Changes
@@ -273,9 +279,9 @@
 
   ```ts
   css({
-    bg: 'red.300/40',
-    color: 'white',
-  })
+    bg: "red.300/40",
+    color: "white",
+  });
   ```
 
   This will generate:
@@ -283,7 +289,11 @@
   ```css
   @layer utilities {
     .bg_red\.300\/40 {
-      --mix-background: color-mix(in srgb, var(--colors-red-300) 40%, transparent);
+      --mix-background: color-mix(
+        in srgb,
+        var(--colors-red-300) 40%,
+        transparent
+      );
       background: var(--mix-background, var(--colors-red-300));
     }
 
@@ -307,21 +317,21 @@
   export default defineConfig({
     utilities: {
       background: {
-        shorthand: 'bg',
-        className: 'bg',
-        values: 'colors',
+        shorthand: "bg",
+        className: "bg",
+        values: "colors",
         transform(value, args) {
-          const mix = args.utils.colorMix(value)
+          const mix = args.utils.colorMix(value);
           // This can happen if the value format is invalid (e.g. `bg: red.300/invalid` or `bg: red.300//10`)
-          if (mix.invalid) return { background: value }
+          if (mix.invalid) return { background: value };
 
           return {
             background: mix.value,
-          }
+          };
         },
       },
     },
-  })
+  });
   ```
 
   ***
@@ -330,21 +340,21 @@
   property:
 
   ```ts
-  import type { PropertyTransform } from '@pandacss/types'
+  import type { PropertyTransform } from "@pandacss/types";
 
   export const createColorMixTransform =
     (prop: string): PropertyTransform =>
     (value, args) => {
-      const mix = args.utils.colorMix(value)
-      if (mix.invalid) return { [prop]: value }
+      const mix = args.utils.colorMix(value);
+      if (mix.invalid) return { [prop]: value };
 
-      const cssVar = '--mix-' + prop
+      const cssVar = "--mix-" + prop;
 
       return {
         [cssVar]: mix.value,
         [prop]: `var(${cssVar}, ${mix.color})`,
-      }
-    }
+      };
+    };
   ```
 
   then the same utility transform as above can be written like this:
@@ -372,34 +382,34 @@
     // ...
     theme: {
       extend: {
-        containerNames: ['sidebar', 'content'],
+        containerNames: ["sidebar", "content"],
         containerSizes: {
-          xs: '40em',
-          sm: '60em',
-          md: '80em',
+          xs: "40em",
+          sm: "60em",
+          md: "80em",
         },
       },
     },
-  })
+  });
   ```
 
   The default container sizes in the `@pandacss/preset-panda` preset are shown below:
 
   ```ts
   export const containerSizes = {
-    xs: '320px',
-    sm: '384px',
-    md: '448px',
-    lg: '512px',
-    xl: '576px',
-    '2xl': '672px',
-    '3xl': '768px',
-    '4xl': '896px',
-    '5xl': '1024px',
-    '6xl': '1152px',
-    '7xl': '1280px',
-    '8xl': '1440px',
-  }
+    xs: "320px",
+    sm: "384px",
+    md: "448px",
+    lg: "512px",
+    xl: "576px",
+    "2xl": "672px",
+    "3xl": "768px",
+    "4xl": "896px",
+    "5xl": "1024px",
+    "6xl": "1152px",
+    "7xl": "1280px",
+    "8xl": "1440px",
+  };
   ```
 
   Then use them in your styles by referencing using `@<container-name>/<container-size>` syntax:
@@ -483,11 +493,11 @@
     patterns: {
       extend: {
         stack: {
-          defaultValues: { gap: '20px' },
+          defaultValues: { gap: "20px" },
         },
       },
     },
-  })
+  });
   ```
 
 ### Patch Changes
@@ -558,13 +568,13 @@
         // add aspect ratio tokens
         tokens: {
           aspectRatios: {
-            '1:1': '1',
-            '16:9': '16/9',
+            "1:1": "1",
+            "16:9": "16/9",
           },
         },
       },
     },
-  })
+  });
   ```
 
   Here's what the default aspect ratio tokens in the base preset looks like:
@@ -892,15 +902,15 @@
   `block` bleed to a child element, setting its value to match the parent's padding.
 
   ```tsx
-  import { css } from '../styled-system/css'
-  import { bleed } from '../styled-system/patterns'
+  import { css } from "../styled-system/css";
+  import { bleed } from "../styled-system/patterns";
 
   export function Page() {
     return (
-      <div class={css({ px: '6' })}>
-        <div class={bleed({ inline: '6' })}>Welcome</div>
+      <div class={css({ px: "6" })}>
+        <div class={bleed({ inline: "6" })}>Welcome</div>
       </div>
-    )
+    );
   }
   ```
 
@@ -909,8 +919,8 @@
   Visually hidden is a layout pattern used to hide content visually, but still make it available to screen readers.
 
   ```tsx
-  import { css } from '../styled-system/css'
-  import { visuallyHidden } from '../styled-system/patterns'
+  import { css } from "../styled-system/css";
+  import { visuallyHidden } from "../styled-system/patterns";
 
   export function Checkbox() {
     return (
@@ -920,7 +930,7 @@
         </input>
         <span>Checkbox</span>
       </label>
-    )
+    );
   }
   ```
 
@@ -972,26 +982,26 @@
   Update the `jsx` property to be used for advanced tracking of custom pattern components.
 
   ```jsx
-  import { Circle } from 'styled-system/jsx'
+  import { Circle } from "styled-system/jsx";
   const CustomCircle = ({ children, ...props }) => {
-    return <Circle {...props}>{children}</Circle>
-  }
+    return <Circle {...props}>{children}</Circle>;
+  };
   ```
 
   To track the `CustomCircle` component, you can now use the `jsx` property.
 
   ```js
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     patterns: {
       extend: {
         circle: {
-          jsx: ['CustomCircle'],
+          jsx: ["CustomCircle"],
         },
       },
     },
-  })
+  });
   ```
 
 ### Patch Changes
@@ -1015,7 +1025,7 @@
   transition property, timing function and duration. This allows you to add transitions with a single property.
 
   ```jsx
-  <div className={css({ transition: 'background' })}>Content</div>
+  <div className={css({ transition: "background" })}>Content</div>
   ```
 
   This will generate the following css:
diff --git a/packages/preset-base/package.json b/packages/preset-base/package.json
index 21f372c44..b54c5404e 100644
--- a/packages/preset-base/package.json
+++ b/packages/preset-base/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/preset-base",
-  "version": "0.39.0",
+  "version": "0.39.1",
   "description": "The base preset for Panda CSS that contains the conditions and utilities",
   "author": "Segun Adebayo <joseshegs@gmail.com>",
   "main": "dist/index.js",
diff --git a/packages/preset-open-props/CHANGELOG.md b/packages/preset-open-props/CHANGELOG.md
index a0e9554d1..cfb8cc2c2 100644
--- a/packages/preset-open-props/CHANGELOG.md
+++ b/packages/preset-open-props/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @pandacss/preset-open-props
 
+## 0.39.1
+
+### Patch Changes
+
+- @pandacss/types@0.39.1
+
 ## 0.39.0
 
 ### Patch Changes
diff --git a/packages/preset-open-props/package.json b/packages/preset-open-props/package.json
index 5cf6d22a2..336387c47 100644
--- a/packages/preset-open-props/package.json
+++ b/packages/preset-open-props/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/preset-open-props",
-  "version": "0.39.0",
+  "version": "0.39.1",
   "description": "A preset for Open Props",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
diff --git a/packages/preset-panda/CHANGELOG.md b/packages/preset-panda/CHANGELOG.md
index 27be72f5f..598e4b49f 100644
--- a/packages/preset-panda/CHANGELOG.md
+++ b/packages/preset-panda/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @pandacss/preset-panda
 
+## 0.39.1
+
+### Patch Changes
+
+- @pandacss/types@0.39.1
+
 ## 0.39.0
 
 ### Patch Changes
@@ -220,13 +226,13 @@
         // add aspect ratio tokens
         tokens: {
           aspectRatios: {
-            '1:1': '1',
-            '16:9': '16/9',
+            "1:1": "1",
+            "16:9": "16/9",
           },
         },
       },
     },
-  })
+  });
   ```
 
   Here's what the default aspect ratio tokens in the base preset looks like:
diff --git a/packages/preset-panda/package.json b/packages/preset-panda/package.json
index 135a8851b..2aba17226 100644
--- a/packages/preset-panda/package.json
+++ b/packages/preset-panda/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/preset-panda",
-  "version": "0.39.0",
+  "version": "0.39.1",
   "description": "The preset for PandaCSS that contains the default theme",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
diff --git a/packages/shared/CHANGELOG.md b/packages/shared/CHANGELOG.md
index 6fadcd935..a8631d174 100644
--- a/packages/shared/CHANGELOG.md
+++ b/packages/shared/CHANGELOG.md
@@ -1,5 +1,7 @@
 # @pandacss/shared
 
+## 0.39.1
+
 ## 0.39.0
 
 ### Patch Changes
@@ -37,21 +39,21 @@
 - 99870bb: Fix issue where setting the pattern `jsx` option with dot notation didn't work.
 
   ```jsx
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
     patterns: {
       extend: {
         grid: {
-          jsx: ['Form.Group', 'Grid'],
+          jsx: ["Form.Group", "Grid"],
         },
         stack: {
-          jsx: ['Form.Action', 'Stack'],
+          jsx: ["Form.Action", "Stack"],
         },
       },
     },
-  })
+  });
   ```
 
 ## 0.37.0
@@ -103,10 +105,10 @@
 
   ```ts
   css({
-    padding: '1px',
-    paddingTop: '3px',
-    paddingBottom: '4px',
-  })
+    padding: "1px",
+    paddingTop: "3px",
+    paddingBottom: "4px",
+  });
   ```
 
   Will now always generate the following css:
@@ -234,9 +236,9 @@
 
   ```ts
   css({
-    borderWidth: '[2px!]',
-    width: '[2px !important]',
-  })
+    borderWidth: "[2px!]",
+    width: "[2px !important]",
+  });
   ```
 
 ## 0.22.0
@@ -253,18 +255,18 @@
   and suffixing with `]`, e.g. writing `[123px]` as a value will bypass the token validation.
 
   ```ts
-  import { css } from '../styled-system/css'
+  import { css } from "../styled-system/css";
 
   css({
     // @ts-expect-error TS will throw when using from strictTokens: true
-    color: '#fff',
+    color: "#fff",
     // @ts-expect-error TS will throw when using from strictTokens: true
-    width: '100px',
+    width: "100px",
 
     // ✅ but this is now allowed:
-    bgColor: '[rgb(51 155 240)]',
-    fontSize: '[12px]',
-  })
+    bgColor: "[rgb(51 155 240)]",
+    fontSize: "[12px]",
+  });
   ```
 
 ## 0.20.1
@@ -307,16 +309,16 @@
   together and the styles will be merged correctly.
 
   ```jsx
-  const Box = styled('div', {
+  const Box = styled("div", {
     base: {
-      background: 'red.light',
-      color: 'white',
+      background: "red.light",
+      color: "white",
     },
-  })
+  });
 
   const ExtendedBox = styled(Box, {
-    base: { background: 'red.dark' },
-  })
+    base: { background: "red.dark" },
+  });
 
   // <ExtendedBox> will have a background of `red.dark` and a color of `white`
   ```
@@ -329,14 +331,14 @@
   - CVA or Inline CVA + Config Recipe = ❌
 
   ```jsx
-  import { button } from '../styled-system/recipes'
+  import { button } from "../styled-system/recipes";
 
-  const Button = styled('div', button)
+  const Button = styled("div", button);
 
   // ❌ This will throw an error
   const ExtendedButton = styled(Button, {
-    base: { background: 'red.dark' },
-  })
+    base: { background: "red.dark" },
+  });
   ```
 
 ## 0.16.0
@@ -390,7 +392,14 @@
   Example:
 
   ```tsx
-  <h1 className={cx(css({ mx: '3', paddingTop: '4' }), css({ mx: '10', pt: '6' }))}>Will result in "mx_10 pt_6"</h1>
+  <h1
+    className={cx(
+      css({ mx: "3", paddingTop: "4" }),
+      css({ mx: "10", pt: "6" }),
+    )}
+  >
+    Will result in "mx_10 pt_6"
+  </h1>
   ```
 
 ## 0.11.0
@@ -409,12 +418,12 @@
   **Definition**
 
   ```jsx
-  import { sva } from 'styled-system/css'
+  import { sva } from "styled-system/css";
 
   const button = sva({
-    slots: ['label', 'icon'],
+    slots: ["label", "icon"],
     base: {
-      label: { color: 'red', textDecoration: 'underline' },
+      label: { color: "red", textDecoration: "underline" },
     },
     variants: {
       rounded: {
@@ -422,33 +431,33 @@
       },
       size: {
         sm: {
-          label: { fontSize: 'sm' },
-          icon: { fontSize: 'sm' },
+          label: { fontSize: "sm" },
+          icon: { fontSize: "sm" },
         },
         lg: {
-          label: { fontSize: 'lg' },
-          icon: { fontSize: 'lg', color: 'pink' },
+          label: { fontSize: "lg" },
+          icon: { fontSize: "lg", color: "pink" },
         },
       },
     },
     defaultVariants: {
-      size: 'sm',
+      size: "sm",
     },
-  })
+  });
   ```
 
   **Usage**
 
   ```jsx
   export function App() {
-    const btnClass = button({ size: 'lg', rounded: true })
+    const btnClass = button({ size: "lg", rounded: true });
 
     return (
       <button>
         <p class={btnClass.label}> Label</p>
         <p class={btnClass.icon}> Icon</p>
       </button>
-    )
+    );
   }
   ```
 
@@ -496,19 +505,19 @@
 
   ```ts
   const shorthands = {
-    flexDir: 'flexDirection',
-  }
+    flexDir: "flexDirection",
+  };
 
   const obj = {
-    flexDir: 'row',
+    flexDir: "row",
     flexDirection: undefined,
-  }
+  };
 
   const result = walkObject(obj, (value) => value, {
     getKey(prop) {
-      return shorthands[prop] ?? prop
+      return shorthands[prop] ?? prop;
     },
-  })
+  });
   ```
 
   This would set the `flexDirection` to `row` (using `getKey`) and then set the `flexDirection` property again, this
@@ -529,8 +538,8 @@
   // panda.config.ts
   export default defineConfig({
     //...
-    syntax: 'template-literal',
-  })
+    syntax: "template-literal",
+  });
   ```
 
   > For existing projects, you might need to run the `panda codegen --clean`
@@ -607,11 +616,11 @@ This hook is called right before writing the codegen files to disk. You can use
 export default defineConfig({
   // ...
   hooks: {
-    'codegen:prepare': ({ artifacts, changed }) => {
+    "codegen:prepare": ({ artifacts, changed }) => {
       // do something with the emitted js/d.ts files
     },
   },
-})
+});
 ```
 
 - 49c760cd: Fix issue where responsive array in css and cva doesn't generate the correct classname
@@ -697,9 +706,9 @@ export default defineConfig({
 
   ```ts
   css({
-    borderWidth: '[2px!]',
-    width: '[2px !important]',
-  })
+    borderWidth: "[2px!]",
+    width: "[2px !important]",
+  });
   ```
 
 ## 0.22.0
@@ -716,18 +725,18 @@ export default defineConfig({
   and suffixing with `]`, e.g. writing `[123px]` as a value will bypass the token validation.
 
   ```ts
-  import { css } from '../styled-system/css'
+  import { css } from "../styled-system/css";
 
   css({
     // @ts-expect-error TS will throw when using from strictTokens: true
-    color: '#fff',
+    color: "#fff",
     // @ts-expect-error TS will throw when using from strictTokens: true
-    width: '100px',
+    width: "100px",
 
     // ✅ but this is now allowed:
-    bgColor: '[rgb(51 155 240)]',
-    fontSize: '[12px]',
-  })
+    bgColor: "[rgb(51 155 240)]",
+    fontSize: "[12px]",
+  });
   ```
 
 ## 0.20.1
@@ -770,16 +779,16 @@ export default defineConfig({
   together and the styles will be merged correctly.
 
   ```jsx
-  const Box = styled('div', {
+  const Box = styled("div", {
     base: {
-      background: 'red.light',
-      color: 'white',
+      background: "red.light",
+      color: "white",
     },
-  })
+  });
 
   const ExtendedBox = styled(Box, {
-    base: { background: 'red.dark' },
-  })
+    base: { background: "red.dark" },
+  });
 
   // <ExtendedBox> will have a background of `red.dark` and a color of `white`
   ```
@@ -792,14 +801,14 @@ export default defineConfig({
   - CVA or Inline CVA + Config Recipe = ❌
 
   ```jsx
-  import { button } from '../styled-system/recipes'
+  import { button } from "../styled-system/recipes";
 
-  const Button = styled('div', button)
+  const Button = styled("div", button);
 
   // ❌ This will throw an error
   const ExtendedButton = styled(Button, {
-    base: { background: 'red.dark' },
-  })
+    base: { background: "red.dark" },
+  });
   ```
 
 ## 0.16.0
@@ -853,7 +862,14 @@ export default defineConfig({
   Example:
 
   ```tsx
-  <h1 className={cx(css({ mx: '3', paddingTop: '4' }), css({ mx: '10', pt: '6' }))}>Will result in "mx_10 pt_6"</h1>
+  <h1
+    className={cx(
+      css({ mx: "3", paddingTop: "4" }),
+      css({ mx: "10", pt: "6" }),
+    )}
+  >
+    Will result in "mx_10 pt_6"
+  </h1>
   ```
 
 ## 0.11.0
@@ -872,12 +888,12 @@ export default defineConfig({
   **Definition**
 
   ```jsx
-  import { sva } from 'styled-system/css'
+  import { sva } from "styled-system/css";
 
   const button = sva({
-    slots: ['label', 'icon'],
+    slots: ["label", "icon"],
     base: {
-      label: { color: 'red', textDecoration: 'underline' },
+      label: { color: "red", textDecoration: "underline" },
     },
     variants: {
       rounded: {
@@ -885,33 +901,33 @@ export default defineConfig({
       },
       size: {
         sm: {
-          label: { fontSize: 'sm' },
-          icon: { fontSize: 'sm' },
+          label: { fontSize: "sm" },
+          icon: { fontSize: "sm" },
         },
         lg: {
-          label: { fontSize: 'lg' },
-          icon: { fontSize: 'lg', color: 'pink' },
+          label: { fontSize: "lg" },
+          icon: { fontSize: "lg", color: "pink" },
         },
       },
     },
     defaultVariants: {
-      size: 'sm',
+      size: "sm",
     },
-  })
+  });
   ```
 
   **Usage**
 
   ```jsx
   export function App() {
-    const btnClass = button({ size: 'lg', rounded: true })
+    const btnClass = button({ size: "lg", rounded: true });
 
     return (
       <button>
         <p class={btnClass.label}> Label</p>
         <p class={btnClass.icon}> Icon</p>
       </button>
-    )
+    );
   }
   ```
 
@@ -959,19 +975,19 @@ export default defineConfig({
 
   ```ts
   const shorthands = {
-    flexDir: 'flexDirection',
-  }
+    flexDir: "flexDirection",
+  };
 
   const obj = {
-    flexDir: 'row',
+    flexDir: "row",
     flexDirection: undefined,
-  }
+  };
 
   const result = walkObject(obj, (value) => value, {
     getKey(prop) {
-      return shorthands[prop] ?? prop
+      return shorthands[prop] ?? prop;
     },
-  })
+  });
   ```
 
   This would set the `flexDirection` to `row` (using `getKey`) and then set the `flexDirection` property again, this
@@ -992,8 +1008,8 @@ export default defineConfig({
   // panda.config.ts
   export default defineConfig({
     //...
-    syntax: 'template-literal',
-  })
+    syntax: "template-literal",
+  });
   ```
 
   > For existing projects, you might need to run the `panda codegen --clean`
diff --git a/packages/shared/package.json b/packages/shared/package.json
index 6ae9a9cc3..813107c82 100644
--- a/packages/shared/package.json
+++ b/packages/shared/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/shared",
-  "version": "0.39.0",
+  "version": "0.39.1",
   "description": "Shared utilities for css panda",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
diff --git a/packages/studio/CHANGELOG.md b/packages/studio/CHANGELOG.md
index 985aa9e9a..95a275ac9 100644
--- a/packages/studio/CHANGELOG.md
+++ b/packages/studio/CHANGELOG.md
@@ -1,5 +1,16 @@
 # @pandacss/studio
 
+## 0.39.1
+
+### Patch Changes
+
+- @pandacss/astro-plugin-studio@0.39.1
+- @pandacss/config@0.39.1
+- @pandacss/logger@0.39.1
+- @pandacss/shared@0.39.1
+- @pandacss/token-dictionary@0.39.1
+- @pandacss/types@0.39.1
+
 ## 0.39.0
 
 ### Patch Changes
@@ -203,12 +214,12 @@
     theme: {
       extend: {
         colors: {
-          primary: { value: 'blue' },
+          primary: { value: "blue" },
         },
         // borderWidths: {}, // ⚠️ nothing defined here
       },
     },
-  })
+  });
   ```
 
   ```ts
@@ -219,8 +230,8 @@
 
     // ✅ after this PR, TS will not throw an error anymore as you don't have any `borderWidths` tokens
     // if you add one, this will error again (as it's supposed to)
-    borderWidths: '123px',
-  })
+    borderWidths: "123px",
+  });
   ```
 
   ## Description
@@ -275,11 +286,11 @@
 - 4576a60: Fix nested `styled` factory composition
 
   ```tsx
-  import { styled } from '../styled-system/jsx'
+  import { styled } from "../styled-system/jsx";
 
-  const BasicBox = styled('div', { base: { fontSize: '10px' } })
-  const ExtendedBox1 = styled(BasicBox, { base: { fontSize: '20px' } })
-  const ExtendedBox2 = styled(ExtendedBox1, { base: { fontSize: '30px' } })
+  const BasicBox = styled("div", { base: { fontSize: "10px" } });
+  const ExtendedBox1 = styled(BasicBox, { base: { fontSize: "20px" } });
+  const ExtendedBox2 = styled(ExtendedBox1, { base: { fontSize: "30px" } });
 
   export const App = () => {
     return (
@@ -292,8 +303,8 @@
         {/* NOW: ✅ fs_30px */}
         <ExtendedBox2>text3</ExtendedBox2>
       </>
-    )
-  }
+    );
+  };
   ```
 
   - @pandacss/astro-plugin-studio@0.34.3
@@ -672,9 +683,9 @@
 
   ```ts
   css({
-    borderWidth: '[2px!]',
-    width: '[2px !important]',
-  })
+    borderWidth: "[2px!]",
+    width: "[2px !important]",
+  });
   ```
 
 - Updated dependencies [8f4ce97c]
@@ -952,9 +963,9 @@
 
   ```ts
   interface FactoryOptions<TProps extends Dict> {
-    dataAttr?: boolean
-    defaultProps?: TProps
-    shouldForwardProp?(prop: string, variantKeys: string[]): boolean
+    dataAttr?: boolean;
+    defaultProps?: TProps;
+    shouldForwardProp?(prop: string, variantKeys: string[]): boolean;
   }
   ```
 
@@ -962,16 +973,16 @@
     This is useful for testing and debugging.
 
   ```jsx
-  import { styled } from '../styled-system/jsx'
-  import { button } from '../styled-system/recipes'
+  import { styled } from "../styled-system/jsx";
+  import { button } from "../styled-system/recipes";
 
-  const Button = styled('button', button, { dataAttr: true })
+  const Button = styled("button", button, { dataAttr: true });
 
   const App = () => (
     <Button variant="secondary" mt="10px">
       Button
     </Button>
-  )
+  );
   // Will render something like <button data-recipe="button" class="btn btn--variant_purple mt_10px">Button</button>
   ```
 
@@ -979,17 +990,17 @@
     override the default variants or base styles of a recipe.
 
   ```jsx
-  import { styled } from '../styled-system/jsx'
-  import { button } from '../styled-system/recipes'
+  import { styled } from "../styled-system/jsx";
+  import { button } from "../styled-system/recipes";
 
-  const Button = styled('button', button, {
+  const Button = styled("button", button, {
     defaultProps: {
-      variant: 'secondary',
-      px: '10px',
+      variant: "secondary",
+      px: "10px",
     },
-  })
+  });
 
-  const App = () => <Button>Button</Button>
+  const App = () => <Button>Button</Button>;
   // Will render something like <button class="btn btn--variant_secondary px_10px">Button</button>
   ```
 
@@ -997,19 +1008,20 @@
     props except recipe variants and style props are forwarded.
 
   ```jsx
-  import { styled } from '../styled-system/jsx'
-  import { button } from '../styled-system/recipes'
-  import { isCssProperty } from '../styled-system/jsx'
-  import { motion, isValidMotionProp } from 'framer-motion'
+  import { styled } from "../styled-system/jsx";
+  import { button } from "../styled-system/recipes";
+  import { isCssProperty } from "../styled-system/jsx";
+  import { motion, isValidMotionProp } from "framer-motion";
 
   const StyledMotion = styled(
     motion.div,
     {},
     {
       shouldForwardProp: (prop, variantKeys) =>
-        isValidMotionProp(prop) || (!variantKeys.includes(prop) && !isCssProperty(prop)),
+        isValidMotionProp(prop) ||
+        (!variantKeys.includes(prop) && !isCssProperty(prop)),
     },
-  )
+  );
   ```
 
 - Updated dependencies [abd7c47a]
@@ -1031,22 +1043,22 @@
 
   ```ts file="panda.config.ts"
   const button = defineRecipe({
-    className: 'btn',
-    base: { color: 'green', fontSize: '16px' },
+    className: "btn",
+    base: { color: "green", fontSize: "16px" },
     variants: {
-      size: { small: { fontSize: '14px' } },
+      size: { small: { fontSize: "14px" } },
     },
-    compoundVariants: [{ size: 'small', css: { color: 'blue' } }],
-  })
+    compoundVariants: [{ size: "small", css: { color: "blue" } }],
+  });
   ```
 
   This would previously not merge the `color` property overrides, but now it does:
 
   ```tsx file="example.tsx"
-  import { styled } from '../styled-system/jsx'
-  import { button } from '../styled-system/recipes'
+  import { styled } from "../styled-system/jsx";
+  import { button } from "../styled-system/recipes";
 
-  const Button = styled('button', button)
+  const Button = styled("button", button);
 
   function App() {
     return (
@@ -1055,7 +1067,7 @@
           Click me
         </Button>
       </>
-    )
+    );
   }
   ```
 
@@ -1238,11 +1250,11 @@ This hook is called right before writing the codegen files to disk. You can use
 export default defineConfig({
   // ...
   hooks: {
-    'codegen:prepare': ({ artifacts, changed }) => {
+    "codegen:prepare": ({ artifacts, changed }) => {
       // do something with the emitted js/d.ts files
     },
   },
-})
+});
 ```
 
 - d5977c24: - Add a `--logfile` flag to the `panda`, `panda codegen`, `panda cssgen` and `panda debug` commands.
@@ -1259,11 +1271,11 @@ export default defineConfig({
   ```js
   module.exports = {
     plugins: {
-      '@pandacss/dev/postcss': {
-        logfile: './logs/panda.log',
+      "@pandacss/dev/postcss": {
+        logfile: "./logs/panda.log",
       },
     },
-  }
+  };
   ```
 
 - Updated dependencies [0dd45b6a]
@@ -1499,9 +1511,9 @@ export default defineConfig({
 
   ```ts
   css({
-    borderWidth: '[2px!]',
-    width: '[2px !important]',
-  })
+    borderWidth: "[2px!]",
+    width: "[2px !important]",
+  });
   ```
 
 - Updated dependencies [8f4ce97c]
@@ -1779,9 +1791,9 @@ export default defineConfig({
 
   ```ts
   interface FactoryOptions<TProps extends Dict> {
-    dataAttr?: boolean
-    defaultProps?: TProps
-    shouldForwardProp?(prop: string, variantKeys: string[]): boolean
+    dataAttr?: boolean;
+    defaultProps?: TProps;
+    shouldForwardProp?(prop: string, variantKeys: string[]): boolean;
   }
   ```
 
@@ -1789,16 +1801,16 @@ export default defineConfig({
     This is useful for testing and debugging.
 
   ```jsx
-  import { styled } from '../styled-system/jsx'
-  import { button } from '../styled-system/recipes'
+  import { styled } from "../styled-system/jsx";
+  import { button } from "../styled-system/recipes";
 
-  const Button = styled('button', button, { dataAttr: true })
+  const Button = styled("button", button, { dataAttr: true });
 
   const App = () => (
     <Button variant="secondary" mt="10px">
       Button
     </Button>
-  )
+  );
   // Will render something like <button data-recipe="button" class="btn btn--variant_purple mt_10px">Button</button>
   ```
 
@@ -1806,17 +1818,17 @@ export default defineConfig({
     override the default variants or base styles of a recipe.
 
   ```jsx
-  import { styled } from '../styled-system/jsx'
-  import { button } from '../styled-system/recipes'
+  import { styled } from "../styled-system/jsx";
+  import { button } from "../styled-system/recipes";
 
-  const Button = styled('button', button, {
+  const Button = styled("button", button, {
     defaultProps: {
-      variant: 'secondary',
-      px: '10px',
+      variant: "secondary",
+      px: "10px",
     },
-  })
+  });
 
-  const App = () => <Button>Button</Button>
+  const App = () => <Button>Button</Button>;
   // Will render something like <button class="btn btn--variant_secondary px_10px">Button</button>
   ```
 
@@ -1824,19 +1836,20 @@ export default defineConfig({
     props except recipe variants and style props are forwarded.
 
   ```jsx
-  import { styled } from '../styled-system/jsx'
-  import { button } from '../styled-system/recipes'
-  import { isCssProperty } from '../styled-system/jsx'
-  import { motion, isValidMotionProp } from 'framer-motion'
+  import { styled } from "../styled-system/jsx";
+  import { button } from "../styled-system/recipes";
+  import { isCssProperty } from "../styled-system/jsx";
+  import { motion, isValidMotionProp } from "framer-motion";
 
   const StyledMotion = styled(
     motion.div,
     {},
     {
       shouldForwardProp: (prop, variantKeys) =>
-        isValidMotionProp(prop) || (!variantKeys.includes(prop) && !isCssProperty(prop)),
+        isValidMotionProp(prop) ||
+        (!variantKeys.includes(prop) && !isCssProperty(prop)),
     },
-  )
+  );
   ```
 
 - Updated dependencies [abd7c47a]
@@ -1858,22 +1871,22 @@ export default defineConfig({
 
   ```ts file="panda.config.ts"
   const button = defineRecipe({
-    className: 'btn',
-    base: { color: 'green', fontSize: '16px' },
+    className: "btn",
+    base: { color: "green", fontSize: "16px" },
     variants: {
-      size: { small: { fontSize: '14px' } },
+      size: { small: { fontSize: "14px" } },
     },
-    compoundVariants: [{ size: 'small', css: { color: 'blue' } }],
-  })
+    compoundVariants: [{ size: "small", css: { color: "blue" } }],
+  });
   ```
 
   This would previously not merge the `color` property overrides, but now it does:
 
   ```tsx file="example.tsx"
-  import { styled } from '../styled-system/jsx'
-  import { button } from '../styled-system/recipes'
+  import { styled } from "../styled-system/jsx";
+  import { button } from "../styled-system/recipes";
 
-  const Button = styled('button', button)
+  const Button = styled("button", button);
 
   function App() {
     return (
@@ -1882,7 +1895,7 @@ export default defineConfig({
           Click me
         </Button>
       </>
-    )
+    );
   }
   ```
 
diff --git a/packages/studio/package.json b/packages/studio/package.json
index 612e2db1f..6d1f9a66f 100644
--- a/packages/studio/package.json
+++ b/packages/studio/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/studio",
-  "version": "0.39.0",
+  "version": "0.39.1",
   "description": "The automated token documentation for Panda CSS",
   "main": "dist/studio.js",
   "module": "dist/studio.mjs",
diff --git a/packages/token-dictionary/CHANGELOG.md b/packages/token-dictionary/CHANGELOG.md
index 9f15edc42..df151b1d3 100644
--- a/packages/token-dictionary/CHANGELOG.md
+++ b/packages/token-dictionary/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @pandacss/token-dictionary
 
+## 0.39.1
+
+### Patch Changes
+
+- @pandacss/logger@0.39.1
+- @pandacss/shared@0.39.1
+- @pandacss/types@0.39.1
+
 ## 0.39.0
 
 ### Patch Changes
@@ -28,11 +36,11 @@
       ta: {
         deprecated: true,
         transform(value) {
-          return { textAlign: value }
+          return { textAlign: value };
         },
       },
     },
-  })
+  });
   ```
 
   **Deprecating a token**
@@ -42,11 +50,11 @@
     theme: {
       tokens: {
         spacing: {
-          lg: { value: '8px', deprecated: 'use `8` instead' },
+          lg: { value: "8px", deprecated: "use `8` instead" },
         },
       },
     },
-  })
+  });
   ```
 
   **Deprecating a pattern**
@@ -58,7 +66,7 @@
         deprecated: true,
       },
     },
-  })
+  });
   ```
 
   **Deprecating a recipe**
@@ -68,11 +76,11 @@
     theme: {
       recipes: {
         btn: {
-          deprecated: 'will be removed in v2.0',
+          deprecated: "will be removed in v2.0",
         },
       },
     },
-  })
+  });
   ```
 
   ### ESLint Plugin
@@ -165,7 +173,7 @@
 
   ```ts
   // panda.config.ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
@@ -174,15 +182,15 @@
       extend: {
         tokens: {
           colors: {
-            text: { value: 'blue' },
+            text: { value: "blue" },
           },
         },
         semanticTokens: {
           colors: {
             body: {
               value: {
-                base: '{colors.blue.600}',
-                _osDark: '{colors.blue.400}',
+                base: "{colors.blue.600}",
+                _osDark: "{colors.blue.400}",
               },
             },
           },
@@ -194,16 +202,16 @@
       primary: {
         tokens: {
           colors: {
-            text: { value: 'red' },
+            text: { value: "red" },
           },
         },
         semanticTokens: {
           colors: {
-            muted: { value: '{colors.red.200}' },
+            muted: { value: "{colors.red.200}" },
             body: {
               value: {
-                base: '{colors.red.600}',
-                _osDark: '{colors.red.400}',
+                base: "{colors.red.600}",
+                _osDark: "{colors.red.400}",
               },
             },
           },
@@ -212,23 +220,23 @@
       secondary: {
         tokens: {
           colors: {
-            text: { value: 'blue' },
+            text: { value: "blue" },
           },
         },
         semanticTokens: {
           colors: {
-            muted: { value: '{colors.blue.200}' },
+            muted: { value: "{colors.blue.200}" },
             body: {
               value: {
-                base: '{colors.blue.600}',
-                _osDark: '{colors.blue.400}',
+                base: "{colors.blue.600}",
+                _osDark: "{colors.blue.400}",
               },
             },
           },
         },
       },
     },
-  })
+  });
   ```
 
   ### Pregenerating themes
@@ -238,14 +246,14 @@
 
   ```ts
   // panda.config.ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
     staticCss: {
-      themes: ['primary', 'secondary'],
+      themes: ["primary", "secondary"],
     },
-  })
+  });
   ```
 
   This will generate the following CSS:
@@ -257,7 +265,7 @@
       --colors-body: var(--colors-blue-600);
     }
 
-    [data-panda-theme='primary'] {
+    [data-panda-theme="primary"] {
       --colors-text: red;
       --colors-muted: var(--colors-red-200);
       --colors-body: var(--colors-red-600);
@@ -268,7 +276,7 @@
         --colors-body: var(--colors-blue-400);
       }
 
-      [data-panda-theme='primary'] {
+      [data-panda-theme="primary"] {
         --colors-body: var(--colors-red-400);
       }
     }
@@ -299,9 +307,9 @@
   Dynamically import a theme using its name:
 
   ```ts
-  import { getTheme } from '../styled-system/themes'
+  import { getTheme } from "../styled-system/themes";
 
-  const theme = await getTheme('red')
+  const theme = await getTheme("red");
   //    ^? {
   //     name: "red";
   //     id: string;
@@ -312,10 +320,10 @@
   Inject the theme styles into the DOM:
 
   ```ts
-  import { injectTheme } from '../styled-system/themes'
+  import { injectTheme } from "../styled-system/themes";
 
-  const theme = await getTheme('red')
-  injectTheme(document.documentElement, theme) // this returns the injected style element
+  const theme = await getTheme("red");
+  injectTheme(document.documentElement, theme); // this returns the injected style element
   ```
 
   ***
@@ -324,54 +332,62 @@
 
   ```tsx
   // app/layout.tsx
-  import { Inter } from 'next/font/google'
-  import { cookies } from 'next/headers'
-  import { ThemeName, getTheme } from '../../styled-system/themes'
-
-  export default async function RootLayout({ children }: { children: React.ReactNode }) {
-    const store = cookies()
-    const themeName = store.get('theme')?.value as ThemeName
-    const theme = themeName && (await getTheme(themeName))
+  import { Inter } from "next/font/google";
+  import { cookies } from "next/headers";
+  import { ThemeName, getTheme } from "../../styled-system/themes";
+
+  export default async function RootLayout({
+    children,
+  }: {
+    children: React.ReactNode;
+  }) {
+    const store = cookies();
+    const themeName = store.get("theme")?.value as ThemeName;
+    const theme = themeName && (await getTheme(themeName));
 
     return (
       <html lang="en" data-panda-theme={themeName ? themeName : undefined}>
         {themeName && (
           <head>
-            <style type="text/css" id={theme.id} dangerouslySetInnerHTML={{ __html: theme.css }} />
+            <style
+              type="text/css"
+              id={theme.id}
+              dangerouslySetInnerHTML={{ __html: theme.css }}
+            />
           </head>
         )}
         <body>{children}</body>
       </html>
-    )
+    );
   }
 
   // app/page.tsx
-  import { getTheme, injectTheme } from '../../styled-system/themes'
+  import { getTheme, injectTheme } from "../../styled-system/themes";
 
   export default function Home() {
     return (
       <>
         <button
           onClick={async () => {
-            const current = document.documentElement.dataset.pandaTheme
-            const next = current === 'primary' ? 'secondary' : 'primary'
-            const theme = await getTheme(next)
-            setCookie('theme', next, 7)
-            injectTheme(document.documentElement, theme)
+            const current = document.documentElement.dataset.pandaTheme;
+            const next = current === "primary" ? "secondary" : "primary";
+            const theme = await getTheme(next);
+            setCookie("theme", next, 7);
+            injectTheme(document.documentElement, theme);
           }}
         >
           swap theme
         </button>
       </>
-    )
+    );
   }
 
   // Set a Cookie
   function setCookie(cName: string, cValue: any, expDays: number) {
-    let date = new Date()
-    date.setTime(date.getTime() + expDays * 24 * 60 * 60 * 1000)
-    const expires = 'expires=' + date.toUTCString()
-    document.cookie = cName + '=' + cValue + '; ' + expires + '; path=/'
+    let date = new Date();
+    date.setTime(date.getTime() + expDays * 24 * 60 * 60 * 1000);
+    const expires = "expires=" + date.toUTCString();
+    document.cookie = cName + "=" + cValue + "; " + expires + "; path=/";
   }
   ```
 
@@ -380,18 +396,18 @@
   Finally, you can create a theme contract to ensure that all themes have the same structure:
 
   ```ts
-  import { defineThemeContract } from '@pandacss/dev'
+  import { defineThemeContract } from "@pandacss/dev";
 
   const defineTheme = defineThemeContract({
     tokens: {
       colors: {
-        red: { value: '' }, // theme implementations must have a red color
+        red: { value: "" }, // theme implementations must have a red color
       },
     },
-  })
+  });
 
   defineTheme({
-    selector: '.theme-secondary',
+    selector: ".theme-secondary",
     tokens: {
       colors: {
         // ^^^^   Property 'red' is missing in type '{}' but required in type '{ red: { value: string; }; }'
@@ -400,7 +416,7 @@
         // red: { value: 'red' },
       },
     },
-  })
+  });
   ```
 
 ### Patch Changes
@@ -408,30 +424,30 @@
 - 3af3940: Fix an issue when using a semantic token with one (but not all) condition using the color opacity modifier
 
   ```ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     theme: {
       extend: {
         tokens: {
           colors: {
-            black: { value: 'black' },
-            white: { value: 'white' },
+            black: { value: "black" },
+            white: { value: "white" },
           },
         },
         semanticTokens: {
           colors: {
             fg: {
               value: {
-                base: '{colors.black/87}',
-                _dark: '{colors.white}', // <- this was causing a weird issue
+                base: "{colors.black/87}",
+                _dark: "{colors.white}", // <- this was causing a weird issue
               },
             },
           },
         },
       },
     },
-  })
+  });
   ```
 
 - Updated dependencies [861a280]
@@ -449,20 +465,20 @@
 - f2fdc48: Fix negative `semanticTokens` generation
 
   ```ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     tokens: {
       spacing: {
-        1: { value: '1rem' },
+        1: { value: "1rem" },
       },
     },
     semanticTokens: {
       spacing: {
-        lg: { value: '{spacing.1}' },
+        lg: { value: "{spacing.1}" },
       },
     },
-  })
+  });
   ```
 
   Will now correctly generate the negative value:
@@ -503,18 +519,18 @@
 - d4942e0: Fix the color opacity modifier syntax for `semanticTokens` inside of conditions
 
   ```ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     conditions: {
-      light: '.light &',
-      dark: '.dark &',
+      light: ".light &",
+      dark: ".dark &",
     },
     theme: {
       tokens: {
         colors: {
-          blue: { 500: { value: 'blue' } },
-          green: { 500: { value: 'green' } },
+          blue: { 500: { value: "blue" } },
+          green: { 500: { value: "green" } },
         },
         opacity: {
           half: { value: 0.5 },
@@ -524,15 +540,15 @@
         colors: {
           secondary: {
             value: {
-              base: 'red',
-              _light: '{colors.blue.500/32}', // <-- wasn't working as expected
-              _dark: '{colors.green.500/half}',
+              base: "red",
+              _light: "{colors.blue.500/32}", // <-- wasn't working as expected
+              _dark: "{colors.green.500/half}",
             },
           },
         },
       },
     },
-  })
+  });
   ```
 
   will now correctly generate the following CSS:
@@ -547,11 +563,19 @@
     }
 
     .light {
-      --colors-secondary: color-mix(in srgb, var(--colors-blue-500) 32%, transparent);
+      --colors-secondary: color-mix(
+        in srgb,
+        var(--colors-blue-500) 32%,
+        transparent
+      );
     }
 
     .dark {
-      --colors-secondary: color-mix(in srgb, var(--colors-green-500) 50%, transparent);
+      --colors-secondary: color-mix(
+        in srgb,
+        var(--colors-green-500) 50%,
+        transparent
+      );
     }
   }
   ```
@@ -574,16 +598,16 @@
   ```ts
   // runtime usage
 
-  import { css } from '../styled-system/css'
+  import { css } from "../styled-system/css";
 
-  css({ bg: '{colors.blue.300/70}' })
+  css({ bg: "{colors.blue.300/70}" });
   // => @layer utilities {
   //    .bg_token\(colors\.blue\.300\/70\) {
   //      background: color-mix(in srgb, var(--colors-blue-300) 70%, transparent);
   //    }
   //  }
 
-  css({ bg: 'token(colors.blue.300/70)' })
+  css({ bg: "token(colors.blue.300/70)" });
   // => @layer utilities {
   //    .bg_token\(colors\.blue\.300\/70\) {
   //      background: color-mix(in srgb, var(--colors-blue-300) 70%, transparent);
@@ -593,33 +617,37 @@
 
   ```ts
   // build-time usage
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     theme: {
       tokens: {
         colors: {
           blue: {
-            300: { value: '#00f' },
+            300: { value: "#00f" },
           },
         },
       },
       semanticTokens: {
         colors: {
           primary: {
-            value: '{colors.blue.300/70}',
+            value: "{colors.blue.300/70}",
           },
         },
       },
     },
-  })
+  });
   ```
 
   ```css
   @layer tokens {
     :where(:root, :host) {
       --colors-blue-300: #00f;
-      --colors-primary: color-mix(in srgb, var(--colors-blue-300) 70%, transparent);
+      --colors-primary: color-mix(
+        in srgb,
+        var(--colors-blue-300) 70%,
+        transparent
+      );
     }
   }
   ```
@@ -656,7 +684,7 @@
   Given this config:
 
   ```ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
@@ -667,13 +695,13 @@
             bg: {
               primary: {
                 DEFAULT: {
-                  value: '{colors.red.500}',
+                  value: "{colors.red.500}",
                 },
                 base: {
-                  value: '{colors.green.500}',
+                  value: "{colors.green.500}",
                 },
                 hover: {
-                  value: '{colors.yellow.300}',
+                  value: "{colors.yellow.300}",
                 },
               },
             },
@@ -681,17 +709,17 @@
         },
       },
     },
-  })
+  });
   ```
 
   And this style usage:
 
   ```ts
-  import { css } from 'styled-system/css'
+  import { css } from "styled-system/css";
 
   css({
-    colorPalette: 'bg.primary',
-  })
+    colorPalette: "bg.primary",
+  });
   ```
 
   This is the difference in the generated css
@@ -805,10 +833,10 @@
   css({
     // ✅ this is fine now, will resolve to something like
     // `@container (min-width: 56em)`
-    '@container (min-width: {sizes.4xl})': {
-      color: 'green',
+    "@container (min-width: {sizes.4xl})": {
+      color: "green",
     },
-  })
+  });
   ```
 
   Fix an issue where the curly token references would not be escaped if the token path was not found.
@@ -887,13 +915,13 @@
         // add aspect ratio tokens
         tokens: {
           aspectRatios: {
-            '1:1': '1',
-            '16:9': '16/9',
+            "1:1": "1",
+            "16:9": "16/9",
           },
         },
       },
     },
-  })
+  });
   ```
 
   Here's what the default aspect ratio tokens in the base preset looks like:
@@ -954,11 +982,11 @@
 - de282f60: Support token reference syntax when authoring styles object, text styles and layer styles.
 
   ```jsx
-  import { css } from '../styled-system/css'
+  import { css } from "../styled-system/css";
 
   const styles = css({
-    border: '2px solid {colors.primary}',
-  })
+    border: "2px solid {colors.primary}",
+  });
   ```
 
   This will resolve the token reference and convert it to css variables.
@@ -978,18 +1006,18 @@
   ```jsx
   const styles = css({
     // token reference syntax
-    border: '2px solid {colors.primary}',
+    border: "2px solid {colors.primary}",
     // token function syntax
-    border: '2px solid token(colors.primary)',
-  })
+    border: "2px solid token(colors.primary)",
+  });
   ```
 
   However, The `token(...)` syntax allows you to set a fallback value.
 
   ```jsx
   const styles = css({
-    border: '2px solid token(colors.primary, red)',
-  })
+    border: "2px solid token(colors.primary, red)",
+  });
   ```
 
 ### Patch Changes
@@ -1237,18 +1265,18 @@
         colors: {
           button: {
             dark: {
-              value: 'navy',
+              value: "navy",
             },
             light: {
               DEFAULT: {
-                value: 'skyblue',
+                value: "skyblue",
               },
               accent: {
                 DEFAULT: {
-                  value: 'cyan',
+                  value: "cyan",
                 },
                 secondary: {
-                  value: 'blue',
+                  value: "blue",
                 },
               },
             },
@@ -1256,50 +1284,50 @@
         },
       },
     },
-  }
+  };
   ```
 
   You can now use the root `button` color palette and its values directly:
 
   ```tsx
-  import { css } from '../styled-system/css'
+  import { css } from "../styled-system/css";
 
   export const App = () => {
     return (
       <button
         className={css({
-          colorPalette: 'button',
-          color: 'colorPalette.light',
-          backgroundColor: 'colorPalette.dark',
+          colorPalette: "button",
+          color: "colorPalette.light",
+          backgroundColor: "colorPalette.dark",
           _hover: {
-            color: 'colorPalette.light.accent',
-            background: 'colorPalette.light.accent.secondary',
+            color: "colorPalette.light.accent",
+            background: "colorPalette.light.accent.secondary",
           },
         })}
       >
         Root color palette
       </button>
-    )
-  }
+    );
+  };
   ```
 
   Or you can use any deeply nested property (e.g. `button.light.accent`) as a root color palette:
 
   ```tsx
-  import { css } from '../styled-system/css'
+  import { css } from "../styled-system/css";
 
   export const App = () => {
     return (
       <button
         className={css({
-          colorPalette: 'button.light.accent',
-          color: 'colorPalette.secondary',
+          colorPalette: "button.light.accent",
+          color: "colorPalette.secondary",
         })}
       >
         Nested color palette leaf
       </button>
-    )
-  }
+    );
+  };
   ```
 
 ### Patch Changes
@@ -1514,11 +1542,11 @@ This hook is called right before writing the codegen files to disk. You can use
 export default defineConfig({
   // ...
   hooks: {
-    'codegen:prepare': ({ artifacts, changed }) => {
+    "codegen:prepare": ({ artifacts, changed }) => {
       // do something with the emitted js/d.ts files
     },
   },
-})
+});
 ```
 
 - d5977c24: - Add a `--logfile` flag to the `panda`, `panda codegen`, `panda cssgen` and `panda debug` commands.
@@ -1535,11 +1563,11 @@ export default defineConfig({
   ```js
   module.exports = {
     plugins: {
-      '@pandacss/dev/postcss': {
-        logfile: './logs/panda.log',
+      "@pandacss/dev/postcss": {
+        logfile: "./logs/panda.log",
       },
     },
-  }
+  };
   ```
 
 - Updated dependencies [74485ef1]
@@ -1569,10 +1597,10 @@ export default defineConfig({
   css({
     // ✅ this is fine now, will resolve to something like
     // `@container (min-width: 56em)`
-    '@container (min-width: {sizes.4xl})': {
-      color: 'green',
+    "@container (min-width: {sizes.4xl})": {
+      color: "green",
     },
-  })
+  });
   ```
 
   Fix an issue where the curly token references would not be escaped if the token path was not found.
@@ -1651,13 +1679,13 @@ export default defineConfig({
         // add aspect ratio tokens
         tokens: {
           aspectRatios: {
-            '1:1': '1',
-            '16:9': '16/9',
+            "1:1": "1",
+            "16:9": "16/9",
           },
         },
       },
     },
-  })
+  });
   ```
 
   Here's what the default aspect ratio tokens in the base preset looks like:
@@ -1718,11 +1746,11 @@ export default defineConfig({
 - de282f60: Support token reference syntax when authoring styles object, text styles and layer styles.
 
   ```jsx
-  import { css } from '../styled-system/css'
+  import { css } from "../styled-system/css";
 
   const styles = css({
-    border: '2px solid {colors.primary}',
-  })
+    border: "2px solid {colors.primary}",
+  });
   ```
 
   This will resolve the token reference and convert it to css variables.
@@ -1742,18 +1770,18 @@ export default defineConfig({
   ```jsx
   const styles = css({
     // token reference syntax
-    border: '2px solid {colors.primary}',
+    border: "2px solid {colors.primary}",
     // token function syntax
-    border: '2px solid token(colors.primary)',
-  })
+    border: "2px solid token(colors.primary)",
+  });
   ```
 
   However, The `token(...)` syntax allows you to set a fallback value.
 
   ```jsx
   const styles = css({
-    border: '2px solid token(colors.primary, red)',
-  })
+    border: "2px solid token(colors.primary, red)",
+  });
   ```
 
 ### Patch Changes
@@ -2001,18 +2029,18 @@ export default defineConfig({
         colors: {
           button: {
             dark: {
-              value: 'navy',
+              value: "navy",
             },
             light: {
               DEFAULT: {
-                value: 'skyblue',
+                value: "skyblue",
               },
               accent: {
                 DEFAULT: {
-                  value: 'cyan',
+                  value: "cyan",
                 },
                 secondary: {
-                  value: 'blue',
+                  value: "blue",
                 },
               },
             },
@@ -2020,50 +2048,50 @@ export default defineConfig({
         },
       },
     },
-  }
+  };
   ```
 
   You can now use the root `button` color palette and its values directly:
 
   ```tsx
-  import { css } from '../styled-system/css'
+  import { css } from "../styled-system/css";
 
   export const App = () => {
     return (
       <button
         className={css({
-          colorPalette: 'button',
-          color: 'colorPalette.light',
-          backgroundColor: 'colorPalette.dark',
+          colorPalette: "button",
+          color: "colorPalette.light",
+          backgroundColor: "colorPalette.dark",
           _hover: {
-            color: 'colorPalette.light.accent',
-            background: 'colorPalette.light.accent.secondary',
+            color: "colorPalette.light.accent",
+            background: "colorPalette.light.accent.secondary",
           },
         })}
       >
         Root color palette
       </button>
-    )
-  }
+    );
+  };
   ```
 
   Or you can use any deeply nested property (e.g. `button.light.accent`) as a root color palette:
 
   ```tsx
-  import { css } from '../styled-system/css'
+  import { css } from "../styled-system/css";
 
   export const App = () => {
     return (
       <button
         className={css({
-          colorPalette: 'button.light.accent',
-          color: 'colorPalette.secondary',
+          colorPalette: "button.light.accent",
+          color: "colorPalette.secondary",
         })}
       >
         Nested color palette leaf
       </button>
-    )
-  }
+    );
+  };
   ```
 
 ### Patch Changes
@@ -2273,7 +2301,7 @@ Will now allow you to use the following syntax for token path:
   Given this config:
 
   ```ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
@@ -2284,13 +2312,13 @@ Will now allow you to use the following syntax for token path:
             bg: {
               primary: {
                 DEFAULT: {
-                  value: '{colors.red.500}',
+                  value: "{colors.red.500}",
                 },
                 base: {
-                  value: '{colors.green.500}',
+                  value: "{colors.green.500}",
                 },
                 hover: {
-                  value: '{colors.yellow.300}',
+                  value: "{colors.yellow.300}",
                 },
               },
             },
@@ -2298,17 +2326,17 @@ Will now allow you to use the following syntax for token path:
         },
       },
     },
-  })
+  });
   ```
 
   And this style usage:
 
   ```ts
-  import { css } from 'styled-system/css'
+  import { css } from "styled-system/css";
 
   css({
-    colorPalette: 'bg.primary',
-  })
+    colorPalette: "bg.primary",
+  });
   ```
 
   This is the difference in the generated css
@@ -2422,10 +2450,10 @@ Will now allow you to use the following syntax for token path:
   css({
     // ✅ this is fine now, will resolve to something like
     // `@container (min-width: 56em)`
-    '@container (min-width: {sizes.4xl})': {
-      color: 'green',
+    "@container (min-width: {sizes.4xl})": {
+      color: "green",
     },
-  })
+  });
   ```
 
   Fix an issue where the curly token references would not be escaped if the token path was not found.
@@ -2504,13 +2532,13 @@ Will now allow you to use the following syntax for token path:
         // add aspect ratio tokens
         tokens: {
           aspectRatios: {
-            '1:1': '1',
-            '16:9': '16/9',
+            "1:1": "1",
+            "16:9": "16/9",
           },
         },
       },
     },
-  })
+  });
   ```
 
   Here's what the default aspect ratio tokens in the base preset looks like:
@@ -2571,11 +2599,11 @@ Will now allow you to use the following syntax for token path:
 - de282f60: Support token reference syntax when authoring styles object, text styles and layer styles.
 
   ```jsx
-  import { css } from '../styled-system/css'
+  import { css } from "../styled-system/css";
 
   const styles = css({
-    border: '2px solid {colors.primary}',
-  })
+    border: "2px solid {colors.primary}",
+  });
   ```
 
   This will resolve the token reference and convert it to css variables.
@@ -2595,18 +2623,18 @@ Will now allow you to use the following syntax for token path:
   ```jsx
   const styles = css({
     // token reference syntax
-    border: '2px solid {colors.primary}',
+    border: "2px solid {colors.primary}",
     // token function syntax
-    border: '2px solid token(colors.primary)',
-  })
+    border: "2px solid token(colors.primary)",
+  });
   ```
 
   However, The `token(...)` syntax allows you to set a fallback value.
 
   ```jsx
   const styles = css({
-    border: '2px solid token(colors.primary, red)',
-  })
+    border: "2px solid token(colors.primary, red)",
+  });
   ```
 
 ### Patch Changes
@@ -2854,18 +2882,18 @@ Will now allow you to use the following syntax for token path:
         colors: {
           button: {
             dark: {
-              value: 'navy',
+              value: "navy",
             },
             light: {
               DEFAULT: {
-                value: 'skyblue',
+                value: "skyblue",
               },
               accent: {
                 DEFAULT: {
-                  value: 'cyan',
+                  value: "cyan",
                 },
                 secondary: {
-                  value: 'blue',
+                  value: "blue",
                 },
               },
             },
@@ -2873,50 +2901,50 @@ Will now allow you to use the following syntax for token path:
         },
       },
     },
-  }
+  };
   ```
 
   You can now use the root `button` color palette and its values directly:
 
   ```tsx
-  import { css } from '../styled-system/css'
+  import { css } from "../styled-system/css";
 
   export const App = () => {
     return (
       <button
         className={css({
-          colorPalette: 'button',
-          color: 'colorPalette.light',
-          backgroundColor: 'colorPalette.dark',
+          colorPalette: "button",
+          color: "colorPalette.light",
+          backgroundColor: "colorPalette.dark",
           _hover: {
-            color: 'colorPalette.light.accent',
-            background: 'colorPalette.light.accent.secondary',
+            color: "colorPalette.light.accent",
+            background: "colorPalette.light.accent.secondary",
           },
         })}
       >
         Root color palette
       </button>
-    )
-  }
+    );
+  };
   ```
 
   Or you can use any deeply nested property (e.g. `button.light.accent`) as a root color palette:
 
   ```tsx
-  import { css } from '../styled-system/css'
+  import { css } from "../styled-system/css";
 
   export const App = () => {
     return (
       <button
         className={css({
-          colorPalette: 'button.light.accent',
-          color: 'colorPalette.secondary',
+          colorPalette: "button.light.accent",
+          color: "colorPalette.secondary",
         })}
       >
         Nested color palette leaf
       </button>
-    )
-  }
+    );
+  };
   ```
 
 ### Patch Changes
@@ -3131,11 +3159,11 @@ This hook is called right before writing the codegen files to disk. You can use
 export default defineConfig({
   // ...
   hooks: {
-    'codegen:prepare': ({ artifacts, changed }) => {
+    "codegen:prepare": ({ artifacts, changed }) => {
       // do something with the emitted js/d.ts files
     },
   },
-})
+});
 ```
 
 - d5977c24: - Add a `--logfile` flag to the `panda`, `panda codegen`, `panda cssgen` and `panda debug` commands.
@@ -3152,11 +3180,11 @@ export default defineConfig({
   ```js
   module.exports = {
     plugins: {
-      '@pandacss/dev/postcss': {
-        logfile: './logs/panda.log',
+      "@pandacss/dev/postcss": {
+        logfile: "./logs/panda.log",
       },
     },
-  }
+  };
   ```
 
 - Updated dependencies [74485ef1]
@@ -3186,10 +3214,10 @@ export default defineConfig({
   css({
     // ✅ this is fine now, will resolve to something like
     // `@container (min-width: 56em)`
-    '@container (min-width: {sizes.4xl})': {
-      color: 'green',
+    "@container (min-width: {sizes.4xl})": {
+      color: "green",
     },
-  })
+  });
   ```
 
   Fix an issue where the curly token references would not be escaped if the token path was not found.
@@ -3268,13 +3296,13 @@ export default defineConfig({
         // add aspect ratio tokens
         tokens: {
           aspectRatios: {
-            '1:1': '1',
-            '16:9': '16/9',
+            "1:1": "1",
+            "16:9": "16/9",
           },
         },
       },
     },
-  })
+  });
   ```
 
   Here's what the default aspect ratio tokens in the base preset looks like:
@@ -3335,11 +3363,11 @@ export default defineConfig({
 - de282f60: Support token reference syntax when authoring styles object, text styles and layer styles.
 
   ```jsx
-  import { css } from '../styled-system/css'
+  import { css } from "../styled-system/css";
 
   const styles = css({
-    border: '2px solid {colors.primary}',
-  })
+    border: "2px solid {colors.primary}",
+  });
   ```
 
   This will resolve the token reference and convert it to css variables.
@@ -3359,18 +3387,18 @@ export default defineConfig({
   ```jsx
   const styles = css({
     // token reference syntax
-    border: '2px solid {colors.primary}',
+    border: "2px solid {colors.primary}",
     // token function syntax
-    border: '2px solid token(colors.primary)',
-  })
+    border: "2px solid token(colors.primary)",
+  });
   ```
 
   However, The `token(...)` syntax allows you to set a fallback value.
 
   ```jsx
   const styles = css({
-    border: '2px solid token(colors.primary, red)',
-  })
+    border: "2px solid token(colors.primary, red)",
+  });
   ```
 
 ### Patch Changes
@@ -3618,18 +3646,18 @@ export default defineConfig({
         colors: {
           button: {
             dark: {
-              value: 'navy',
+              value: "navy",
             },
             light: {
               DEFAULT: {
-                value: 'skyblue',
+                value: "skyblue",
               },
               accent: {
                 DEFAULT: {
-                  value: 'cyan',
+                  value: "cyan",
                 },
                 secondary: {
-                  value: 'blue',
+                  value: "blue",
                 },
               },
             },
@@ -3637,50 +3665,50 @@ export default defineConfig({
         },
       },
     },
-  }
+  };
   ```
 
   You can now use the root `button` color palette and its values directly:
 
   ```tsx
-  import { css } from '../styled-system/css'
+  import { css } from "../styled-system/css";
 
   export const App = () => {
     return (
       <button
         className={css({
-          colorPalette: 'button',
-          color: 'colorPalette.light',
-          backgroundColor: 'colorPalette.dark',
+          colorPalette: "button",
+          color: "colorPalette.light",
+          backgroundColor: "colorPalette.dark",
           _hover: {
-            color: 'colorPalette.light.accent',
-            background: 'colorPalette.light.accent.secondary',
+            color: "colorPalette.light.accent",
+            background: "colorPalette.light.accent.secondary",
           },
         })}
       >
         Root color palette
       </button>
-    )
-  }
+    );
+  };
   ```
 
   Or you can use any deeply nested property (e.g. `button.light.accent`) as a root color palette:
 
   ```tsx
-  import { css } from '../styled-system/css'
+  import { css } from "../styled-system/css";
 
   export const App = () => {
     return (
       <button
         className={css({
-          colorPalette: 'button.light.accent',
-          color: 'colorPalette.secondary',
+          colorPalette: "button.light.accent",
+          color: "colorPalette.secondary",
         })}
       >
         Nested color palette leaf
       </button>
-    )
-  }
+    );
+  };
   ```
 
 ### Patch Changes
diff --git a/packages/token-dictionary/package.json b/packages/token-dictionary/package.json
index c3a9a721b..4b7be80df 100644
--- a/packages/token-dictionary/package.json
+++ b/packages/token-dictionary/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/token-dictionary",
-  "version": "0.39.0",
+  "version": "0.39.1",
   "description": "Common error messages for css panda",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
diff --git a/packages/types/CHANGELOG.md b/packages/types/CHANGELOG.md
index 73270b4cf..43409d999 100644
--- a/packages/types/CHANGELOG.md
+++ b/packages/types/CHANGELOG.md
@@ -1,5 +1,7 @@
 # @pandacss/types
 
+## 0.39.1
+
 ## 0.39.0
 
 ### Minor Changes
@@ -29,11 +31,11 @@
       ta: {
         deprecated: true,
         transform(value) {
-          return { textAlign: value }
+          return { textAlign: value };
         },
       },
     },
-  })
+  });
   ```
 
   **Deprecating a token**
@@ -43,11 +45,11 @@
     theme: {
       tokens: {
         spacing: {
-          lg: { value: '8px', deprecated: 'use `8` instead' },
+          lg: { value: "8px", deprecated: "use `8` instead" },
         },
       },
     },
-  })
+  });
   ```
 
   **Deprecating a pattern**
@@ -59,7 +61,7 @@
         deprecated: true,
       },
     },
-  })
+  });
   ```
 
   **Deprecating a recipe**
@@ -69,11 +71,11 @@
     theme: {
       recipes: {
         btn: {
-          deprecated: 'will be removed in v2.0',
+          deprecated: "will be removed in v2.0",
         },
       },
     },
-  })
+  });
   ```
 
   ### ESLint Plugin
@@ -97,23 +99,28 @@
   This makes it even easier to merge styles from multiple sources.
 
   ```tsx
-  import { Stack, styled } from '../styled-system/jsx'
+  import { Stack, styled } from "../styled-system/jsx";
 
   const HeroSection = (props) => {
     return (
-      <Stack css={[{ color: 'blue.300', padding: '4' }, props.css]}>
-        <styled.div css={[{ fontSize: '2xl' }, props.hero]}>Hero Section</styled.div>
+      <Stack css={[{ color: "blue.300", padding: "4" }, props.css]}>
+        <styled.div css={[{ fontSize: "2xl" }, props.hero]}>
+          Hero Section
+        </styled.div>
       </Stack>
-    )
-  }
+    );
+  };
 
   const App = () => {
     return (
       <>
-        <HeroSection css={{ backgroundColor: 'yellow.300' }} hero={css.raw({ fontSize: '4xl', color: 'red.300' })} />
+        <HeroSection
+          css={{ backgroundColor: "yellow.300" }}
+          hero={css.raw({ fontSize: "4xl", color: "red.300" })}
+        />
       </>
-    )
-  }
+    );
+  };
   ```
 
   should render something like:
@@ -285,9 +292,9 @@
     useful when applying negative margin to child elements.
 
   ```tsx
-  <div className={flex({ spaceX: '-1' })}>
-    <div className={circle({ size: '5', bg: 'red' })} />
-    <div className={circle({ size: '5', bg: 'pink' })} />
+  <div className={flex({ spaceX: "-1" })}>
+    <div className={circle({ size: "5", bg: "red" })} />
+    <div className={circle({ size: "5", bg: "pink" })} />
   </div>
   ```
 
@@ -299,13 +306,13 @@
   ```tsx
   <div
     className={css({
-      bgGradient: 'to-r',
+      bgGradient: "to-r",
       // from
-      gradientFrom: 'red',
-      gradientFromPosition: 'top left',
+      gradientFrom: "red",
+      gradientFromPosition: "top left",
       // to
-      gradientTo: 'blue',
-      gradientToPosition: 'bottom right',
+      gradientTo: "blue",
+      gradientToPosition: "bottom right",
     })}
   />
   ```
@@ -315,19 +322,23 @@
   It can be useful to use a component library's `styled-system` while also using your own `styled-system` in your app.
 
   ```ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
-    importMap: ['@acme/styled-system', '@ui-lib/styled-system', 'styled-system'],
-  })
+    importMap: [
+      "@acme/styled-system",
+      "@ui-lib/styled-system",
+      "styled-system",
+    ],
+  });
   ```
 
   Now you can use any of the `@acme/styled-system`, `@ui-lib/styled-system` and `styled-system` import sources:
 
   ```ts
-  import { css } from '@acme/css'
-  import { css as uiCss } from '@ui-lib/styled-system/css'
-  import { css as appCss } from '@ui-lib/styled-system/css'
+  import { css } from "@acme/css";
+  import { css as uiCss } from "@ui-lib/styled-system/css";
+  import { css as appCss } from "@ui-lib/styled-system/css";
   ```
 
 ## 0.36.1
@@ -350,7 +361,7 @@
 
   ```ts
   // panda.config.ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
@@ -359,15 +370,15 @@
       extend: {
         tokens: {
           colors: {
-            text: { value: 'blue' },
+            text: { value: "blue" },
           },
         },
         semanticTokens: {
           colors: {
             body: {
               value: {
-                base: '{colors.blue.600}',
-                _osDark: '{colors.blue.400}',
+                base: "{colors.blue.600}",
+                _osDark: "{colors.blue.400}",
               },
             },
           },
@@ -379,16 +390,16 @@
       primary: {
         tokens: {
           colors: {
-            text: { value: 'red' },
+            text: { value: "red" },
           },
         },
         semanticTokens: {
           colors: {
-            muted: { value: '{colors.red.200}' },
+            muted: { value: "{colors.red.200}" },
             body: {
               value: {
-                base: '{colors.red.600}',
-                _osDark: '{colors.red.400}',
+                base: "{colors.red.600}",
+                _osDark: "{colors.red.400}",
               },
             },
           },
@@ -397,23 +408,23 @@
       secondary: {
         tokens: {
           colors: {
-            text: { value: 'blue' },
+            text: { value: "blue" },
           },
         },
         semanticTokens: {
           colors: {
-            muted: { value: '{colors.blue.200}' },
+            muted: { value: "{colors.blue.200}" },
             body: {
               value: {
-                base: '{colors.blue.600}',
-                _osDark: '{colors.blue.400}',
+                base: "{colors.blue.600}",
+                _osDark: "{colors.blue.400}",
               },
             },
           },
         },
       },
     },
-  })
+  });
   ```
 
   ### Pregenerating themes
@@ -423,14 +434,14 @@
 
   ```ts
   // panda.config.ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
     staticCss: {
-      themes: ['primary', 'secondary'],
+      themes: ["primary", "secondary"],
     },
-  })
+  });
   ```
 
   This will generate the following CSS:
@@ -442,7 +453,7 @@
       --colors-body: var(--colors-blue-600);
     }
 
-    [data-panda-theme='primary'] {
+    [data-panda-theme="primary"] {
       --colors-text: red;
       --colors-muted: var(--colors-red-200);
       --colors-body: var(--colors-red-600);
@@ -453,7 +464,7 @@
         --colors-body: var(--colors-blue-400);
       }
 
-      [data-panda-theme='primary'] {
+      [data-panda-theme="primary"] {
         --colors-body: var(--colors-red-400);
       }
     }
@@ -484,9 +495,9 @@
   Dynamically import a theme using its name:
 
   ```ts
-  import { getTheme } from '../styled-system/themes'
+  import { getTheme } from "../styled-system/themes";
 
-  const theme = await getTheme('red')
+  const theme = await getTheme("red");
   //    ^? {
   //     name: "red";
   //     id: string;
@@ -497,10 +508,10 @@
   Inject the theme styles into the DOM:
 
   ```ts
-  import { injectTheme } from '../styled-system/themes'
+  import { injectTheme } from "../styled-system/themes";
 
-  const theme = await getTheme('red')
-  injectTheme(document.documentElement, theme) // this returns the injected style element
+  const theme = await getTheme("red");
+  injectTheme(document.documentElement, theme); // this returns the injected style element
   ```
 
   ***
@@ -509,54 +520,62 @@
 
   ```tsx
   // app/layout.tsx
-  import { Inter } from 'next/font/google'
-  import { cookies } from 'next/headers'
-  import { ThemeName, getTheme } from '../../styled-system/themes'
-
-  export default async function RootLayout({ children }: { children: React.ReactNode }) {
-    const store = cookies()
-    const themeName = store.get('theme')?.value as ThemeName
-    const theme = themeName && (await getTheme(themeName))
+  import { Inter } from "next/font/google";
+  import { cookies } from "next/headers";
+  import { ThemeName, getTheme } from "../../styled-system/themes";
+
+  export default async function RootLayout({
+    children,
+  }: {
+    children: React.ReactNode;
+  }) {
+    const store = cookies();
+    const themeName = store.get("theme")?.value as ThemeName;
+    const theme = themeName && (await getTheme(themeName));
 
     return (
       <html lang="en" data-panda-theme={themeName ? themeName : undefined}>
         {themeName && (
           <head>
-            <style type="text/css" id={theme.id} dangerouslySetInnerHTML={{ __html: theme.css }} />
+            <style
+              type="text/css"
+              id={theme.id}
+              dangerouslySetInnerHTML={{ __html: theme.css }}
+            />
           </head>
         )}
         <body>{children}</body>
       </html>
-    )
+    );
   }
 
   // app/page.tsx
-  import { getTheme, injectTheme } from '../../styled-system/themes'
+  import { getTheme, injectTheme } from "../../styled-system/themes";
 
   export default function Home() {
     return (
       <>
         <button
           onClick={async () => {
-            const current = document.documentElement.dataset.pandaTheme
-            const next = current === 'primary' ? 'secondary' : 'primary'
-            const theme = await getTheme(next)
-            setCookie('theme', next, 7)
-            injectTheme(document.documentElement, theme)
+            const current = document.documentElement.dataset.pandaTheme;
+            const next = current === "primary" ? "secondary" : "primary";
+            const theme = await getTheme(next);
+            setCookie("theme", next, 7);
+            injectTheme(document.documentElement, theme);
           }}
         >
           swap theme
         </button>
       </>
-    )
+    );
   }
 
   // Set a Cookie
   function setCookie(cName: string, cValue: any, expDays: number) {
-    let date = new Date()
-    date.setTime(date.getTime() + expDays * 24 * 60 * 60 * 1000)
-    const expires = 'expires=' + date.toUTCString()
-    document.cookie = cName + '=' + cValue + '; ' + expires + '; path=/'
+    let date = new Date();
+    date.setTime(date.getTime() + expDays * 24 * 60 * 60 * 1000);
+    const expires = "expires=" + date.toUTCString();
+    document.cookie = cName + "=" + cValue + "; " + expires + "; path=/";
   }
   ```
 
@@ -565,18 +584,18 @@
   Finally, you can create a theme contract to ensure that all themes have the same structure:
 
   ```ts
-  import { defineThemeContract } from '@pandacss/dev'
+  import { defineThemeContract } from "@pandacss/dev";
 
   const defineTheme = defineThemeContract({
     tokens: {
       colors: {
-        red: { value: '' }, // theme implementations must have a red color
+        red: { value: "" }, // theme implementations must have a red color
       },
     },
-  })
+  });
 
   defineTheme({
-    selector: '.theme-secondary',
+    selector: ".theme-secondary",
     tokens: {
       colors: {
         // ^^^^   Property 'red' is missing in type '{}' but required in type '{ red: { value: string; }; }'
@@ -585,7 +604,7 @@
         // red: { value: 'red' },
       },
     },
-  })
+  });
   ```
 
 - fabdabe: ## Changes
@@ -605,12 +624,12 @@
     theme: {
       extend: {
         colors: {
-          primary: { value: 'blue' },
+          primary: { value: "blue" },
         },
         // borderWidths: {}, // ⚠️ nothing defined here
       },
     },
-  })
+  });
   ```
 
   ```ts
@@ -621,8 +640,8 @@
 
     // ✅ after this PR, TS will not throw an error anymore as you don't have any `borderWidths` tokens
     // if you add one, this will error again (as it's supposed to)
-    borderWidths: '123px',
-  })
+    borderWidths: "123px",
+  });
   ```
 
   ## Description
@@ -649,34 +668,34 @@
   Example:
 
   ```ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
     globalVars: {
-      '--some-color': 'red',
-      '--button-color': {
-        syntax: '<color>',
+      "--some-color": "red",
+      "--button-color": {
+        syntax: "<color>",
         inherits: false,
-        initialValue: 'blue',
+        initialValue: "blue",
       },
     },
-  })
+  });
   ```
 
   > Note: Keys defined in `globalVars` will be available as a value for _every_ utilities, as they're not bound to token
   > categories.
 
   ```ts
-  import { css } from '../styled-system/css'
+  import { css } from "../styled-system/css";
 
   const className = css({
-    '--button-color': 'colors.red.300',
+    "--button-color": "colors.red.300",
     // ^^^^^^^^^^^^  will be suggested
 
-    backgroundColor: 'var(--button-color)',
+    backgroundColor: "var(--button-color)",
     //                ^^^^^^^^^^^^^^^^^^  will be suggested
-  })
+  });
   ```
 
 - 340f4f1: Fix `Expression produces a union type that is too complex to represent` with `splitCssProps` because of
@@ -694,32 +713,32 @@
   Each slot will contain a `${className}__${slotName}` class in addition to the atomic styles.
 
   ```tsx
-  import { sva } from '../styled-system/css'
+  import { sva } from "../styled-system/css";
 
   const button = sva({
-    className: 'btn',
-    slots: ['root', 'text'],
+    className: "btn",
+    slots: ["root", "text"],
     base: {
       root: {
-        bg: 'blue.500',
+        bg: "blue.500",
         _hover: {
           // v--- 🎯 this will target the `text` slot
-          '& .btn__text': {
-            color: 'white',
+          "& .btn__text": {
+            color: "white",
           },
         },
       },
     },
-  })
+  });
 
   export const App = () => {
-    const classes = button()
+    const classes = button();
     return (
       <div className={classes.root}>
         <div className={classes.text}>Click me</div>
       </div>
-    )
-  }
+    );
+  };
   ```
 
 ## 0.34.3
@@ -764,15 +783,15 @@
   class assigned.
 
   ```js
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     preflight: {
-      scope: '.my-scope',
-      level: 'element', // 'element' | 'parent (default)'
+      scope: ".my-scope",
+      level: "element", // 'element' | 'parent (default)'
     },
     // ...
-  })
+  });
   ```
 
   This will generate CSS that looks like:
@@ -802,20 +821,20 @@
   export default defaultConfig({
     conditions: {
       extend: {
-        supportHover: ['@media (hover: hover) and (pointer: fine)', '&:hover'],
+        supportHover: ["@media (hover: hover) and (pointer: fine)", "&:hover"],
       },
     },
-  })
+  });
   ```
 
   ```ts
-  import { css } from '../styled-system/css'
+  import { css } from "../styled-system/css";
 
   css({
     _supportHover: {
-      color: 'red',
+      color: "red",
     },
-  })
+  });
   ```
 
   will generate the following CSS:
@@ -892,16 +911,17 @@
   export default defineConfig({
     // ...
     hooks: {
-      'parser:before': ({ configure }) => {
+      "parser:before": ({ configure }) => {
         configure({
           // ignore the Select.Content entirely
-          matchTag: (tag) => tag !== 'Select.Content',
+          matchTag: (tag) => tag !== "Select.Content",
           // ...or specifically ignore the `position` property
-          matchTagProp: (tag, prop) => tag === 'Select.Content' && prop !== 'position',
-        })
+          matchTagProp: (tag, prop) =>
+            tag === "Select.Content" && prop !== "position",
+        });
       },
     },
-  })
+  });
   ```
 
 ## 0.30.1
@@ -917,16 +937,16 @@
   keeping the rest. Let's say we want to remove the `stack` pattern from the built-in `@pandacss/preset-base`:
 
   ```ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
     hooks: {
-      'config:resolved': ({ config, utils }) => {
-        return utils.omit(config, ['patterns.stack'])
+      "config:resolved": ({ config, utils }) => {
+        return utils.omit(config, ["patterns.stack"]);
       },
     },
-  })
+  });
   ```
 
 - ab32d1d7: Introduce 3 new hooks:
@@ -963,9 +983,9 @@
 
   ```ts
   css({
-    bg: 'red.300/40',
-    color: 'white',
-  })
+    bg: "red.300/40",
+    color: "white",
+  });
   ```
 
   This will generate:
@@ -973,7 +993,11 @@
   ```css
   @layer utilities {
     .bg_red\.300\/40 {
-      --mix-background: color-mix(in srgb, var(--colors-red-300) 40%, transparent);
+      --mix-background: color-mix(
+        in srgb,
+        var(--colors-red-300) 40%,
+        transparent
+      );
       background: var(--mix-background, var(--colors-red-300));
     }
 
@@ -997,21 +1021,21 @@
   export default defineConfig({
     utilities: {
       background: {
-        shorthand: 'bg',
-        className: 'bg',
-        values: 'colors',
+        shorthand: "bg",
+        className: "bg",
+        values: "colors",
         transform(value, args) {
-          const mix = args.utils.colorMix(value)
+          const mix = args.utils.colorMix(value);
           // This can happen if the value format is invalid (e.g. `bg: red.300/invalid` or `bg: red.300//10`)
-          if (mix.invalid) return { background: value }
+          if (mix.invalid) return { background: value };
 
           return {
             background: mix.value,
-          }
+          };
         },
       },
     },
-  })
+  });
   ```
 
   ***
@@ -1020,21 +1044,21 @@
   property:
 
   ```ts
-  import type { PropertyTransform } from '@pandacss/types'
+  import type { PropertyTransform } from "@pandacss/types";
 
   export const createColorMixTransform =
     (prop: string): PropertyTransform =>
     (value, args) => {
-      const mix = args.utils.colorMix(value)
-      if (mix.invalid) return { [prop]: value }
+      const mix = args.utils.colorMix(value);
+      if (mix.invalid) return { [prop]: value };
 
-      const cssVar = '--mix-' + prop
+      const cssVar = "--mix-" + prop;
 
       return {
         [cssVar]: mix.value,
         [prop]: `var(${cssVar}, ${mix.color})`,
-      }
-    }
+      };
+    };
   ```
 
   then the same utility transform as above can be written like this:
@@ -1062,34 +1086,34 @@
     // ...
     theme: {
       extend: {
-        containerNames: ['sidebar', 'content'],
+        containerNames: ["sidebar", "content"],
         containerSizes: {
-          xs: '40em',
-          sm: '60em',
-          md: '80em',
+          xs: "40em",
+          sm: "60em",
+          md: "80em",
         },
       },
     },
-  })
+  });
   ```
 
   The default container sizes in the `@pandacss/preset-panda` preset are shown below:
 
   ```ts
   export const containerSizes = {
-    xs: '320px',
-    sm: '384px',
-    md: '448px',
-    lg: '512px',
-    xl: '576px',
-    '2xl': '672px',
-    '3xl': '768px',
-    '4xl': '896px',
-    '5xl': '1024px',
-    '6xl': '1152px',
-    '7xl': '1280px',
-    '8xl': '1440px',
-  }
+    xs: "320px",
+    sm: "384px",
+    md: "448px",
+    lg: "512px",
+    xl: "576px",
+    "2xl": "672px",
+    "3xl": "768px",
+    "4xl": "896px",
+    "5xl": "1024px",
+    "6xl": "1152px",
+    "7xl": "1280px",
+    "8xl": "1440px",
+  };
   ```
 
   Then use them in your styles by referencing using `@<container-name>/<container-size>` syntax:
@@ -1174,8 +1198,8 @@
   ```ts
   export default defineConfig({
     // ...
-    dependencies: ['path/to/files/**.ts'],
-  })
+    dependencies: ["path/to/files/**.ts"],
+  });
   ```
 
   - Invoke `config:change` hook in more situations (when the `--watch` flag is passed to `panda codegen`,
@@ -1208,39 +1232,54 @@
      * Called when the config is resolved, after all the presets are loaded and merged.
      * This is the first hook called, you can use it to tweak the config before the context is created.
      */
-    'config:resolved': (args: { conf: LoadConfigResult }) => MaybeAsyncReturn
+    "config:resolved": (args: { conf: LoadConfigResult }) => MaybeAsyncReturn;
     /**
      * Called when the Panda context has been created and the API is ready to be used.
      */
-    'context:created': (args: { ctx: ApiInterface; logger: LoggerInterface }) => void
+    "context:created": (args: {
+      ctx: ApiInterface;
+      logger: LoggerInterface;
+    }) => void;
     /**
      * Called when the config file or one of its dependencies (imports) has changed.
      */
-    'config:change': (args: { config: UserConfig }) => MaybeAsyncReturn
+    "config:change": (args: { config: UserConfig }) => MaybeAsyncReturn;
     /**
      * Called after reading the file content but before parsing it.
      * You can use this hook to transform the file content to a tsx-friendly syntax so that Panda's parser can parse it.
      * You can also use this hook to parse the file's content on your side using a custom parser, in this case you don't have to return anything.
      */
-    'parser:before': (args: { filePath: string; content: string }) => string | void
+    "parser:before": (args: {
+      filePath: string;
+      content: string;
+    }) => string | void;
     /**
      * Called after the file styles are extracted and processed into the resulting ParserResult object.
      * You can also use this hook to add your own extraction results from your custom parser to the ParserResult object.
      */
-    'parser:after': (args: { filePath: string; result: ParserResultInterface | undefined }) => void
+    "parser:after": (args: {
+      filePath: string;
+      result: ParserResultInterface | undefined;
+    }) => void;
     /**
      * Called after the codegen is completed
      */
-    'codegen:done': () => MaybeAsyncReturn
+    "codegen:done": () => MaybeAsyncReturn;
     /**
      * Called right before adding the design-system CSS (global, static, preflight, tokens, keyframes) to the final CSS
      * Called right before writing/injecting the final CSS (styles.css) that contains the design-system CSS and the parser CSS
      * You can use it to tweak the CSS content before it's written to disk or injected through the postcss plugin.
      */
-    'cssgen:done': (args: {
-      artifact: 'global' | 'static' | 'reset' | 'tokens' | 'keyframes' | 'styles.css'
-      content: string
-    }) => string | void
+    "cssgen:done": (args: {
+      artifact:
+        | "global"
+        | "static"
+        | "reset"
+        | "tokens"
+        | "keyframes"
+        | "styles.css";
+      content: string;
+    }) => string | void;
   }
   ```
 
@@ -1320,38 +1359,38 @@
 
   ```ts
   const card = defineRecipe({
-    className: 'card',
-    base: { color: 'white' },
+    className: "card",
+    base: { color: "white" },
     variants: {
       size: {
-        small: { fontSize: '14px' },
-        large: { fontSize: '18px' },
+        small: { fontSize: "14px" },
+        large: { fontSize: "18px" },
       },
       visual: {
-        primary: { backgroundColor: 'blue' },
-        secondary: { backgroundColor: 'gray' },
+        primary: { backgroundColor: "blue" },
+        secondary: { backgroundColor: "gray" },
       },
     },
-  })
+  });
 
   export default defineConfig({
     // ...
     staticCss: {
       recipes: {
-        card: ['*'], // this
+        card: ["*"], // this
 
         // was equivalent to:
         card: [
           // notice how `responsive: true` was implicitly added
-          { size: ['*'], responsive: true },
-          { visual: ['*'], responsive: true },
+          { size: ["*"], responsive: true },
+          { visual: ["*"], responsive: true },
         ],
 
         //   will now correctly be equivalent to:
-        card: [{ size: ['*'] }, { visual: ['*'] }],
+        card: [{ size: ["*"] }, { visual: ["*"] }],
       },
     },
-  })
+  });
   ```
 
   Here's the diff in the generated CSS:
@@ -1503,36 +1542,36 @@
 - 105f74ce: Add a way to specify a recipe's `staticCss` options from inside a recipe config, e.g.:
 
   ```js
-  import { defineRecipe } from '@pandacss/dev'
+  import { defineRecipe } from "@pandacss/dev";
 
   const card = defineRecipe({
-    className: 'card',
-    base: { color: 'white' },
+    className: "card",
+    base: { color: "white" },
     variants: {
       size: {
-        small: { fontSize: '14px' },
-        large: { fontSize: '18px' },
+        small: { fontSize: "14px" },
+        large: { fontSize: "18px" },
       },
     },
-    staticCss: [{ size: ['*'] }],
-  })
+    staticCss: [{ size: ["*"] }],
+  });
   ```
 
   would be the equivalent of defining it inside the main config:
 
   ```js
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
     staticCss: {
       recipes: {
         card: {
-          size: ['*'],
+          size: ["*"],
         },
       },
     },
-  })
+  });
   ```
 
 ## 0.20.1
@@ -1550,10 +1589,10 @@
     staticCss: {
       recipes: {
         // generate all button styles and variants
-        button: ['*'],
+        button: ["*"],
       },
     },
-  })
+  });
 
   export default defineConfig({
     presets: [presetWithStaticCss],
@@ -1561,11 +1600,11 @@
       extend: {
         recipes: {
           // extend and pre-generate all sizes for card
-          card: [{ size: ['small', 'medium', 'large'] }],
+          card: [{ size: ["small", "medium", "large"] }],
         },
       },
     },
-  })
+  });
   ```
 
 ### Patch Changes
@@ -1635,42 +1674,42 @@
 
   ```ts
   export default defineConfig({
-    outdir: './outdir',
+    outdir: "./outdir",
     importMap: {
-      css: '#panda/styled-system/css',
-      recipes: '#panda/styled-system/recipes',
-      patterns: '#panda/styled-system/patterns',
-      jsx: '#panda/styled-system/jsx',
+      css: "#panda/styled-system/css",
+      recipes: "#panda/styled-system/recipes",
+      patterns: "#panda/styled-system/patterns",
+      jsx: "#panda/styled-system/jsx",
     },
-  })
+  });
   ```
 
   Or you could also make your outdir an actual package from your monorepo:
 
   ```ts
   export default defineConfig({
-    outdir: '../packages/styled-system',
+    outdir: "../packages/styled-system",
     importMap: {
-      css: '@monorepo/styled-system',
-      recipes: '@monorepo/styled-system',
-      patterns: '@monorepo/styled-system',
-      jsx: '@monorepo/styled-system',
+      css: "@monorepo/styled-system",
+      recipes: "@monorepo/styled-system",
+      patterns: "@monorepo/styled-system",
+      jsx: "@monorepo/styled-system",
     },
-  })
+  });
   ```
 
   Working with tsconfig paths aliases is easy:
 
   ```ts
   export default defineConfig({
-    outdir: 'styled-system',
+    outdir: "styled-system",
     importMap: {
-      css: 'styled-system/css',
-      recipes: 'styled-system/recipes',
-      patterns: 'styled-system/patterns',
-      jsx: 'styled-system/jsx',
+      css: "styled-system/css",
+      recipes: "styled-system/recipes",
+      patterns: "styled-system/patterns",
+      jsx: "styled-system/jsx",
     },
-  })
+  });
   ```
 
 - 58743bc4: - Fix `ExtendableUtilityConfig` typings after a regression in 0.15.2 (due to
@@ -1744,12 +1783,12 @@
   **Definition**
 
   ```jsx
-  import { sva } from 'styled-system/css'
+  import { sva } from "styled-system/css";
 
   const button = sva({
-    slots: ['label', 'icon'],
+    slots: ["label", "icon"],
     base: {
-      label: { color: 'red', textDecoration: 'underline' },
+      label: { color: "red", textDecoration: "underline" },
     },
     variants: {
       rounded: {
@@ -1757,33 +1796,33 @@
       },
       size: {
         sm: {
-          label: { fontSize: 'sm' },
-          icon: { fontSize: 'sm' },
+          label: { fontSize: "sm" },
+          icon: { fontSize: "sm" },
         },
         lg: {
-          label: { fontSize: 'lg' },
-          icon: { fontSize: 'lg', color: 'pink' },
+          label: { fontSize: "lg" },
+          icon: { fontSize: "lg", color: "pink" },
         },
       },
     },
     defaultVariants: {
-      size: 'sm',
+      size: "sm",
     },
-  })
+  });
   ```
 
   **Usage**
 
   ```jsx
   export function App() {
-    const btnClass = button({ size: 'lg', rounded: true })
+    const btnClass = button({ size: "lg", rounded: true });
 
     return (
       <button>
         <p class={btnClass.label}> Label</p>
         <p class={btnClass.icon}> Icon</p>
       </button>
-    )
+    );
   }
   ```
 
@@ -1834,26 +1873,26 @@
   Update the `jsx` property to be used for advanced tracking of custom pattern components.
 
   ```jsx
-  import { Circle } from 'styled-system/jsx'
+  import { Circle } from "styled-system/jsx";
   const CustomCircle = ({ children, ...props }) => {
-    return <Circle {...props}>{children}</Circle>
-  }
+    return <Circle {...props}>{children}</Circle>;
+  };
   ```
 
   To track the `CustomCircle` component, you can now use the `jsx` property.
 
   ```js
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     patterns: {
       extend: {
         circle: {
-          jsx: ['CustomCircle'],
+          jsx: ["CustomCircle"],
         },
       },
     },
-  })
+  });
   ```
 
 ## 0.8.0
@@ -1882,7 +1921,7 @@
   ```ts
   staticCss: {
     recipes: {
-      button: [{ size: ['*'], shape: ['*'] }]
+      button: [{ size: ["*"], shape: ["*"] }];
     }
   }
   ```
@@ -1892,7 +1931,7 @@
   ```ts
   staticCss: {
     recipes: {
-      button: ['*']
+      button: ["*"];
     }
   }
   ```
@@ -1916,8 +1955,8 @@
   // panda.config.ts
   export default defineConfig({
     //...
-    syntax: 'template-literal',
-  })
+    syntax: "template-literal",
+  });
   ```
 
   > For existing projects, you might need to run the `panda codegen --clean`
@@ -1938,12 +1977,12 @@
 - 5b344b9c: Add support for disabling shorthand props
 
   ```ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
     shorthands: false,
-  })
+  });
   ```
 
 ### Patch Changes
@@ -2016,11 +2055,11 @@ This hook is called right before writing the codegen files to disk. You can use
 export default defineConfig({
   // ...
   hooks: {
-    'codegen:prepare': ({ artifacts, changed }) => {
+    "codegen:prepare": ({ artifacts, changed }) => {
       // do something with the emitted js/d.ts files
     },
   },
-})
+});
 ```
 
 - d5977c24: - Add a `--logfile` flag to the `panda`, `panda codegen`, `panda cssgen` and `panda debug` commands.
@@ -2037,11 +2076,11 @@ export default defineConfig({
   ```js
   module.exports = {
     plugins: {
-      '@pandacss/dev/postcss': {
-        logfile: './logs/panda.log',
+      "@pandacss/dev/postcss": {
+        logfile: "./logs/panda.log",
       },
     },
-  }
+  };
   ```
 
 ## 0.29.1
@@ -2060,9 +2099,9 @@ export default defineConfig({
 
   ```ts
   css({
-    bg: 'red.300/40',
-    color: 'white',
-  })
+    bg: "red.300/40",
+    color: "white",
+  });
   ```
 
   This will generate:
@@ -2070,7 +2109,11 @@ export default defineConfig({
   ```css
   @layer utilities {
     .bg_red\.300\/40 {
-      --mix-background: color-mix(in srgb, var(--colors-red-300) 40%, transparent);
+      --mix-background: color-mix(
+        in srgb,
+        var(--colors-red-300) 40%,
+        transparent
+      );
       background: var(--mix-background, var(--colors-red-300));
     }
 
@@ -2094,21 +2137,21 @@ export default defineConfig({
   export default defineConfig({
     utilities: {
       background: {
-        shorthand: 'bg',
-        className: 'bg',
-        values: 'colors',
+        shorthand: "bg",
+        className: "bg",
+        values: "colors",
         transform(value, args) {
-          const mix = args.utils.colorMix(value)
+          const mix = args.utils.colorMix(value);
           // This can happen if the value format is invalid (e.g. `bg: red.300/invalid` or `bg: red.300//10`)
-          if (mix.invalid) return { background: value }
+          if (mix.invalid) return { background: value };
 
           return {
             background: mix.value,
-          }
+          };
         },
       },
     },
-  })
+  });
   ```
 
   ***
@@ -2117,21 +2160,21 @@ export default defineConfig({
   property:
 
   ```ts
-  import type { PropertyTransform } from '@pandacss/types'
+  import type { PropertyTransform } from "@pandacss/types";
 
   export const createColorMixTransform =
     (prop: string): PropertyTransform =>
     (value, args) => {
-      const mix = args.utils.colorMix(value)
-      if (mix.invalid) return { [prop]: value }
+      const mix = args.utils.colorMix(value);
+      if (mix.invalid) return { [prop]: value };
 
-      const cssVar = '--mix-' + prop
+      const cssVar = "--mix-" + prop;
 
       return {
         [cssVar]: mix.value,
         [prop]: `var(${cssVar}, ${mix.color})`,
-      }
-    }
+      };
+    };
   ```
 
   then the same utility transform as above can be written like this:
@@ -2159,34 +2202,34 @@ export default defineConfig({
     // ...
     theme: {
       extend: {
-        containerNames: ['sidebar', 'content'],
+        containerNames: ["sidebar", "content"],
         containerSizes: {
-          xs: '40em',
-          sm: '60em',
-          md: '80em',
+          xs: "40em",
+          sm: "60em",
+          md: "80em",
         },
       },
     },
-  })
+  });
   ```
 
   The default container sizes in the `@pandacss/preset-panda` preset are shown below:
 
   ```ts
   export const containerSizes = {
-    xs: '320px',
-    sm: '384px',
-    md: '448px',
-    lg: '512px',
-    xl: '576px',
-    '2xl': '672px',
-    '3xl': '768px',
-    '4xl': '896px',
-    '5xl': '1024px',
-    '6xl': '1152px',
-    '7xl': '1280px',
-    '8xl': '1440px',
-  }
+    xs: "320px",
+    sm: "384px",
+    md: "448px",
+    lg: "512px",
+    xl: "576px",
+    "2xl": "672px",
+    "3xl": "768px",
+    "4xl": "896px",
+    "5xl": "1024px",
+    "6xl": "1152px",
+    "7xl": "1280px",
+    "8xl": "1440px",
+  };
   ```
 
   Then use them in your styles by referencing using `@<container-name>/<container-size>` syntax:
@@ -2271,8 +2314,8 @@ export default defineConfig({
   ```ts
   export default defineConfig({
     // ...
-    dependencies: ['path/to/files/**.ts'],
-  })
+    dependencies: ["path/to/files/**.ts"],
+  });
   ```
 
   - Invoke `config:change` hook in more situations (when the `--watch` flag is passed to `panda codegen`,
@@ -2305,39 +2348,54 @@ export default defineConfig({
      * Called when the config is resolved, after all the presets are loaded and merged.
      * This is the first hook called, you can use it to tweak the config before the context is created.
      */
-    'config:resolved': (args: { conf: LoadConfigResult }) => MaybeAsyncReturn
+    "config:resolved": (args: { conf: LoadConfigResult }) => MaybeAsyncReturn;
     /**
      * Called when the Panda context has been created and the API is ready to be used.
      */
-    'context:created': (args: { ctx: ApiInterface; logger: LoggerInterface }) => void
+    "context:created": (args: {
+      ctx: ApiInterface;
+      logger: LoggerInterface;
+    }) => void;
     /**
      * Called when the config file or one of its dependencies (imports) has changed.
      */
-    'config:change': (args: { config: UserConfig }) => MaybeAsyncReturn
+    "config:change": (args: { config: UserConfig }) => MaybeAsyncReturn;
     /**
      * Called after reading the file content but before parsing it.
      * You can use this hook to transform the file content to a tsx-friendly syntax so that Panda's parser can parse it.
      * You can also use this hook to parse the file's content on your side using a custom parser, in this case you don't have to return anything.
      */
-    'parser:before': (args: { filePath: string; content: string }) => string | void
+    "parser:before": (args: {
+      filePath: string;
+      content: string;
+    }) => string | void;
     /**
      * Called after the file styles are extracted and processed into the resulting ParserResult object.
      * You can also use this hook to add your own extraction results from your custom parser to the ParserResult object.
      */
-    'parser:after': (args: { filePath: string; result: ParserResultInterface | undefined }) => void
+    "parser:after": (args: {
+      filePath: string;
+      result: ParserResultInterface | undefined;
+    }) => void;
     /**
      * Called after the codegen is completed
      */
-    'codegen:done': () => MaybeAsyncReturn
+    "codegen:done": () => MaybeAsyncReturn;
     /**
      * Called right before adding the design-system CSS (global, static, preflight, tokens, keyframes) to the final CSS
      * Called right before writing/injecting the final CSS (styles.css) that contains the design-system CSS and the parser CSS
      * You can use it to tweak the CSS content before it's written to disk or injected through the postcss plugin.
      */
-    'cssgen:done': (args: {
-      artifact: 'global' | 'static' | 'reset' | 'tokens' | 'keyframes' | 'styles.css'
-      content: string
-    }) => string | void
+    "cssgen:done": (args: {
+      artifact:
+        | "global"
+        | "static"
+        | "reset"
+        | "tokens"
+        | "keyframes"
+        | "styles.css";
+      content: string;
+    }) => string | void;
   }
   ```
 
@@ -2417,38 +2475,38 @@ export default defineConfig({
 
   ```ts
   const card = defineRecipe({
-    className: 'card',
-    base: { color: 'white' },
+    className: "card",
+    base: { color: "white" },
     variants: {
       size: {
-        small: { fontSize: '14px' },
-        large: { fontSize: '18px' },
+        small: { fontSize: "14px" },
+        large: { fontSize: "18px" },
       },
       visual: {
-        primary: { backgroundColor: 'blue' },
-        secondary: { backgroundColor: 'gray' },
+        primary: { backgroundColor: "blue" },
+        secondary: { backgroundColor: "gray" },
       },
     },
-  })
+  });
 
   export default defineConfig({
     // ...
     staticCss: {
       recipes: {
-        card: ['*'], // this
+        card: ["*"], // this
 
         // was equivalent to:
         card: [
           // notice how `responsive: true` was implicitly added
-          { size: ['*'], responsive: true },
-          { visual: ['*'], responsive: true },
+          { size: ["*"], responsive: true },
+          { visual: ["*"], responsive: true },
         ],
 
         //   will now correctly be equivalent to:
-        card: [{ size: ['*'] }, { visual: ['*'] }],
+        card: [{ size: ["*"] }, { visual: ["*"] }],
       },
     },
-  })
+  });
   ```
 
   Here's the diff in the generated CSS:
@@ -2600,36 +2658,36 @@ export default defineConfig({
 - 105f74ce: Add a way to specify a recipe's `staticCss` options from inside a recipe config, e.g.:
 
   ```js
-  import { defineRecipe } from '@pandacss/dev'
+  import { defineRecipe } from "@pandacss/dev";
 
   const card = defineRecipe({
-    className: 'card',
-    base: { color: 'white' },
+    className: "card",
+    base: { color: "white" },
     variants: {
       size: {
-        small: { fontSize: '14px' },
-        large: { fontSize: '18px' },
+        small: { fontSize: "14px" },
+        large: { fontSize: "18px" },
       },
     },
-    staticCss: [{ size: ['*'] }],
-  })
+    staticCss: [{ size: ["*"] }],
+  });
   ```
 
   would be the equivalent of defining it inside the main config:
 
   ```js
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
     staticCss: {
       recipes: {
         card: {
-          size: ['*'],
+          size: ["*"],
         },
       },
     },
-  })
+  });
   ```
 
 ## 0.20.1
@@ -2647,10 +2705,10 @@ export default defineConfig({
     staticCss: {
       recipes: {
         // generate all button styles and variants
-        button: ['*'],
+        button: ["*"],
       },
     },
-  })
+  });
 
   export default defineConfig({
     presets: [presetWithStaticCss],
@@ -2658,11 +2716,11 @@ export default defineConfig({
       extend: {
         recipes: {
           // extend and pre-generate all sizes for card
-          card: [{ size: ['small', 'medium', 'large'] }],
+          card: [{ size: ["small", "medium", "large"] }],
         },
       },
     },
-  })
+  });
   ```
 
 ### Patch Changes
@@ -2732,42 +2790,42 @@ export default defineConfig({
 
   ```ts
   export default defineConfig({
-    outdir: './outdir',
+    outdir: "./outdir",
     importMap: {
-      css: '#panda/styled-system/css',
-      recipes: '#panda/styled-system/recipes',
-      patterns: '#panda/styled-system/patterns',
-      jsx: '#panda/styled-system/jsx',
+      css: "#panda/styled-system/css",
+      recipes: "#panda/styled-system/recipes",
+      patterns: "#panda/styled-system/patterns",
+      jsx: "#panda/styled-system/jsx",
     },
-  })
+  });
   ```
 
   Or you could also make your outdir an actual package from your monorepo:
 
   ```ts
   export default defineConfig({
-    outdir: '../packages/styled-system',
+    outdir: "../packages/styled-system",
     importMap: {
-      css: '@monorepo/styled-system',
-      recipes: '@monorepo/styled-system',
-      patterns: '@monorepo/styled-system',
-      jsx: '@monorepo/styled-system',
+      css: "@monorepo/styled-system",
+      recipes: "@monorepo/styled-system",
+      patterns: "@monorepo/styled-system",
+      jsx: "@monorepo/styled-system",
     },
-  })
+  });
   ```
 
   Working with tsconfig paths aliases is easy:
 
   ```ts
   export default defineConfig({
-    outdir: 'styled-system',
+    outdir: "styled-system",
     importMap: {
-      css: 'styled-system/css',
-      recipes: 'styled-system/recipes',
-      patterns: 'styled-system/patterns',
-      jsx: 'styled-system/jsx',
+      css: "styled-system/css",
+      recipes: "styled-system/recipes",
+      patterns: "styled-system/patterns",
+      jsx: "styled-system/jsx",
     },
-  })
+  });
   ```
 
 - 58743bc4: - Fix `ExtendableUtilityConfig` typings after a regression in 0.15.2 (due to
@@ -2841,12 +2899,12 @@ export default defineConfig({
   **Definition**
 
   ```jsx
-  import { sva } from 'styled-system/css'
+  import { sva } from "styled-system/css";
 
   const button = sva({
-    slots: ['label', 'icon'],
+    slots: ["label", "icon"],
     base: {
-      label: { color: 'red', textDecoration: 'underline' },
+      label: { color: "red", textDecoration: "underline" },
     },
     variants: {
       rounded: {
@@ -2854,33 +2912,33 @@ export default defineConfig({
       },
       size: {
         sm: {
-          label: { fontSize: 'sm' },
-          icon: { fontSize: 'sm' },
+          label: { fontSize: "sm" },
+          icon: { fontSize: "sm" },
         },
         lg: {
-          label: { fontSize: 'lg' },
-          icon: { fontSize: 'lg', color: 'pink' },
+          label: { fontSize: "lg" },
+          icon: { fontSize: "lg", color: "pink" },
         },
       },
     },
     defaultVariants: {
-      size: 'sm',
+      size: "sm",
     },
-  })
+  });
   ```
 
   **Usage**
 
   ```jsx
   export function App() {
-    const btnClass = button({ size: 'lg', rounded: true })
+    const btnClass = button({ size: "lg", rounded: true });
 
     return (
       <button>
         <p class={btnClass.label}> Label</p>
         <p class={btnClass.icon}> Icon</p>
       </button>
-    )
+    );
   }
   ```
 
@@ -2931,26 +2989,26 @@ export default defineConfig({
   Update the `jsx` property to be used for advanced tracking of custom pattern components.
 
   ```jsx
-  import { Circle } from 'styled-system/jsx'
+  import { Circle } from "styled-system/jsx";
   const CustomCircle = ({ children, ...props }) => {
-    return <Circle {...props}>{children}</Circle>
-  }
+    return <Circle {...props}>{children}</Circle>;
+  };
   ```
 
   To track the `CustomCircle` component, you can now use the `jsx` property.
 
   ```js
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     patterns: {
       extend: {
         circle: {
-          jsx: ['CustomCircle'],
+          jsx: ["CustomCircle"],
         },
       },
     },
-  })
+  });
   ```
 
 ## 0.8.0
@@ -2979,7 +3037,7 @@ export default defineConfig({
   ```ts
   staticCss: {
     recipes: {
-      button: [{ size: ['*'], shape: ['*'] }]
+      button: [{ size: ["*"], shape: ["*"] }];
     }
   }
   ```
@@ -2989,7 +3047,7 @@ export default defineConfig({
   ```ts
   staticCss: {
     recipes: {
-      button: ['*']
+      button: ["*"];
     }
   }
   ```
@@ -3013,8 +3071,8 @@ export default defineConfig({
   // panda.config.ts
   export default defineConfig({
     //...
-    syntax: 'template-literal',
-  })
+    syntax: "template-literal",
+  });
   ```
 
   > For existing projects, you might need to run the `panda codegen --clean`
@@ -3035,12 +3093,12 @@ export default defineConfig({
 - 5b344b9c: Add support for disabling shorthand props
 
   ```ts
-  import { defineConfig } from '@pandacss/dev'
+  import { defineConfig } from "@pandacss/dev";
 
   export default defineConfig({
     // ...
     shorthands: false,
-  })
+  });
   ```
 
 ### Patch Changes
diff --git a/packages/types/package.json b/packages/types/package.json
index 99ab3b2c5..7a50c5eea 100644
--- a/packages/types/package.json
+++ b/packages/types/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/types",
-  "version": "0.39.0",
+  "version": "0.39.1",
   "description": "The types for css panda",
   "main": "dist/index.d.ts",
   "author": "Segun Adebayo <joseshegs@gmail.com>",

From 1ad44f0e8d4ed6d00d06d07d7112af7f184c010e Mon Sep 17 00:00:00 2001
From: Abraham <anubra266@gmail.com>
Date: Tue, 7 May 2024 21:15:03 -0500
Subject: [PATCH 5/5] chore: add changelog v0.39.0 (#2571)

* chore: add changelog v0.39.0
---
 CHANGELOG.md                              |    7 +
 packages/astro-plugin-studio/CHANGELOG.md |    6 +-
 packages/cli/CHANGELOG.md                 |  173 +-
 packages/config/CHANGELOG.md              |  289 +--
 packages/core/CHANGELOG.md                | 1783 +++++++-------
 packages/extractor/CHANGELOG.md           |  105 +-
 packages/generator/CHANGELOG.md           | 2673 ++++++++++-----------
 packages/is-valid-prop/CHANGELOG.md       |    8 +-
 packages/logger/CHANGELOG.md              |    6 +-
 packages/node/CHANGELOG.md                |  136 +-
 packages/parser/CHANGELOG.md              |  428 ++--
 packages/postcss/CHANGELOG.md             |   16 +-
 packages/preset-base/CHANGELOG.md         |  152 +-
 packages/preset-panda/CHANGELOG.md        |    6 +-
 packages/shared/CHANGELOG.md              |  190 +-
 packages/studio/CHANGELOG.md              |  160 +-
 packages/token-dictionary/CHANGELOG.md    |  498 ++--
 packages/types/CHANGELOG.md               |  762 +++---
 18 files changed, 3439 insertions(+), 3959 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 547294ac5..ea1275243 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,13 @@ See the [Changesets](./.changeset) for the latest changes.
 
 ## [Unreleased]
 
+## [0.39.1] - 2024-05-07
+
+### Fixed
+
+Fix `css.raw` typings after recent ([0.39.0](https://github.com/chakra-ui/panda/discussions/2560)) changes allowing
+arrays of `SystemStyleObject`
+
 ## [0.39.0] - 2024-04-29
 
 ### Fixed
diff --git a/packages/astro-plugin-studio/CHANGELOG.md b/packages/astro-plugin-studio/CHANGELOG.md
index 3fbb47d61..97f604e01 100644
--- a/packages/astro-plugin-studio/CHANGELOG.md
+++ b/packages/astro-plugin-studio/CHANGELOG.md
@@ -140,11 +140,11 @@
   ```js
   module.exports = {
     plugins: {
-      "@pandacss/dev/postcss": {
-        logfile: "./logs/panda.log",
+      '@pandacss/dev/postcss': {
+        logfile: './logs/panda.log',
       },
     },
-  };
+  }
   ```
 
 - Updated dependencies [05686b9d]
diff --git a/packages/cli/CHANGELOG.md b/packages/cli/CHANGELOG.md
index 0eb60ac29..db2fbb014 100644
--- a/packages/cli/CHANGELOG.md
+++ b/packages/cli/CHANGELOG.md
@@ -123,7 +123,7 @@
 
   ```ts
   // panda.config.ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
@@ -132,15 +132,15 @@
       extend: {
         tokens: {
           colors: {
-            text: { value: "blue" },
+            text: { value: 'blue' },
           },
         },
         semanticTokens: {
           colors: {
             body: {
               value: {
-                base: "{colors.blue.600}",
-                _osDark: "{colors.blue.400}",
+                base: '{colors.blue.600}',
+                _osDark: '{colors.blue.400}',
               },
             },
           },
@@ -152,16 +152,16 @@
       primary: {
         tokens: {
           colors: {
-            text: { value: "red" },
+            text: { value: 'red' },
           },
         },
         semanticTokens: {
           colors: {
-            muted: { value: "{colors.red.200}" },
+            muted: { value: '{colors.red.200}' },
             body: {
               value: {
-                base: "{colors.red.600}",
-                _osDark: "{colors.red.400}",
+                base: '{colors.red.600}',
+                _osDark: '{colors.red.400}',
               },
             },
           },
@@ -170,23 +170,23 @@
       secondary: {
         tokens: {
           colors: {
-            text: { value: "blue" },
+            text: { value: 'blue' },
           },
         },
         semanticTokens: {
           colors: {
-            muted: { value: "{colors.blue.200}" },
+            muted: { value: '{colors.blue.200}' },
             body: {
               value: {
-                base: "{colors.blue.600}",
-                _osDark: "{colors.blue.400}",
+                base: '{colors.blue.600}',
+                _osDark: '{colors.blue.400}',
               },
             },
           },
         },
       },
     },
-  });
+  })
   ```
 
   ### Pregenerating themes
@@ -196,14 +196,14 @@
 
   ```ts
   // panda.config.ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
     staticCss: {
-      themes: ["primary", "secondary"],
+      themes: ['primary', 'secondary'],
     },
-  });
+  })
   ```
 
   This will generate the following CSS:
@@ -215,7 +215,7 @@
       --colors-body: var(--colors-blue-600);
     }
 
-    [data-panda-theme="primary"] {
+    [data-panda-theme='primary'] {
       --colors-text: red;
       --colors-muted: var(--colors-red-200);
       --colors-body: var(--colors-red-600);
@@ -226,7 +226,7 @@
         --colors-body: var(--colors-blue-400);
       }
 
-      [data-panda-theme="primary"] {
+      [data-panda-theme='primary'] {
         --colors-body: var(--colors-red-400);
       }
     }
@@ -257,9 +257,9 @@
   Dynamically import a theme using its name:
 
   ```ts
-  import { getTheme } from "../styled-system/themes";
+  import { getTheme } from '../styled-system/themes'
 
-  const theme = await getTheme("red");
+  const theme = await getTheme('red')
   //    ^? {
   //     name: "red";
   //     id: string;
@@ -270,10 +270,10 @@
   Inject the theme styles into the DOM:
 
   ```ts
-  import { injectTheme } from "../styled-system/themes";
+  import { injectTheme } from '../styled-system/themes'
 
-  const theme = await getTheme("red");
-  injectTheme(document.documentElement, theme); // this returns the injected style element
+  const theme = await getTheme('red')
+  injectTheme(document.documentElement, theme) // this returns the injected style element
   ```
 
   ***
@@ -282,62 +282,54 @@
 
   ```tsx
   // app/layout.tsx
-  import { Inter } from "next/font/google";
-  import { cookies } from "next/headers";
-  import { ThemeName, getTheme } from "../../styled-system/themes";
-
-  export default async function RootLayout({
-    children,
-  }: {
-    children: React.ReactNode;
-  }) {
-    const store = cookies();
-    const themeName = store.get("theme")?.value as ThemeName;
-    const theme = themeName && (await getTheme(themeName));
+  import { Inter } from 'next/font/google'
+  import { cookies } from 'next/headers'
+  import { ThemeName, getTheme } from '../../styled-system/themes'
+
+  export default async function RootLayout({ children }: { children: React.ReactNode }) {
+    const store = cookies()
+    const themeName = store.get('theme')?.value as ThemeName
+    const theme = themeName && (await getTheme(themeName))
 
     return (
       <html lang="en" data-panda-theme={themeName ? themeName : undefined}>
         {themeName && (
           <head>
-            <style
-              type="text/css"
-              id={theme.id}
-              dangerouslySetInnerHTML={{ __html: theme.css }}
-            />
+            <style type="text/css" id={theme.id} dangerouslySetInnerHTML={{ __html: theme.css }} />
           </head>
         )}
         <body>{children}</body>
       </html>
-    );
+    )
   }
 
   // app/page.tsx
-  import { getTheme, injectTheme } from "../../styled-system/themes";
+  import { getTheme, injectTheme } from '../../styled-system/themes'
 
   export default function Home() {
     return (
       <>
         <button
           onClick={async () => {
-            const current = document.documentElement.dataset.pandaTheme;
-            const next = current === "primary" ? "secondary" : "primary";
-            const theme = await getTheme(next);
-            setCookie("theme", next, 7);
-            injectTheme(document.documentElement, theme);
+            const current = document.documentElement.dataset.pandaTheme
+            const next = current === 'primary' ? 'secondary' : 'primary'
+            const theme = await getTheme(next)
+            setCookie('theme', next, 7)
+            injectTheme(document.documentElement, theme)
           }}
         >
           swap theme
         </button>
       </>
-    );
+    )
   }
 
   // Set a Cookie
   function setCookie(cName: string, cValue: any, expDays: number) {
-    let date = new Date();
-    date.setTime(date.getTime() + expDays * 24 * 60 * 60 * 1000);
-    const expires = "expires=" + date.toUTCString();
-    document.cookie = cName + "=" + cValue + "; " + expires + "; path=/";
+    let date = new Date()
+    date.setTime(date.getTime() + expDays * 24 * 60 * 60 * 1000)
+    const expires = 'expires=' + date.toUTCString()
+    document.cookie = cName + '=' + cValue + '; ' + expires + '; path=/'
   }
   ```
 
@@ -346,18 +338,18 @@
   Finally, you can create a theme contract to ensure that all themes have the same structure:
 
   ```ts
-  import { defineThemeContract } from "@pandacss/dev";
+  import { defineThemeContract } from '@pandacss/dev'
 
   const defineTheme = defineThemeContract({
     tokens: {
       colors: {
-        red: { value: "" }, // theme implementations must have a red color
+        red: { value: '' }, // theme implementations must have a red color
       },
     },
-  });
+  })
 
   defineTheme({
-    selector: ".theme-secondary",
+    selector: '.theme-secondary',
     tokens: {
       colors: {
         // ^^^^   Property 'red' is missing in type '{}' but required in type '{ red: { value: string; }; }'
@@ -366,7 +358,7 @@
         // red: { value: 'red' },
       },
     },
-  });
+  })
   ```
 
 ### Patch Changes
@@ -592,11 +584,11 @@
   ```js
   module.exports = {
     plugins: {
-      "@pandacss/dev/postcss": {
-        logfile: "./logs/panda.log",
+      '@pandacss/dev/postcss': {
+        logfile: './logs/panda.log',
       },
     },
-  };
+  }
   ```
 
 - Updated dependencies [0dd45b6a]
@@ -643,8 +635,8 @@
   ```ts
   export default defineConfig({
     // ...
-    dependencies: ["path/to/files/**.ts"],
-  });
+    dependencies: ['path/to/files/**.ts'],
+  })
   ```
 
   - Invoke `config:change` hook in more situations (when the `--watch` flag is passed to `panda codegen`,
@@ -693,54 +685,39 @@
      * Called when the config is resolved, after all the presets are loaded and merged.
      * This is the first hook called, you can use it to tweak the config before the context is created.
      */
-    "config:resolved": (args: { conf: LoadConfigResult }) => MaybeAsyncReturn;
+    'config:resolved': (args: { conf: LoadConfigResult }) => MaybeAsyncReturn
     /**
      * Called when the Panda context has been created and the API is ready to be used.
      */
-    "context:created": (args: {
-      ctx: ApiInterface;
-      logger: LoggerInterface;
-    }) => void;
+    'context:created': (args: { ctx: ApiInterface; logger: LoggerInterface }) => void
     /**
      * Called when the config file or one of its dependencies (imports) has changed.
      */
-    "config:change": (args: { config: UserConfig }) => MaybeAsyncReturn;
+    'config:change': (args: { config: UserConfig }) => MaybeAsyncReturn
     /**
      * Called after reading the file content but before parsing it.
      * You can use this hook to transform the file content to a tsx-friendly syntax so that Panda's parser can parse it.
      * You can also use this hook to parse the file's content on your side using a custom parser, in this case you don't have to return anything.
      */
-    "parser:before": (args: {
-      filePath: string;
-      content: string;
-    }) => string | void;
+    'parser:before': (args: { filePath: string; content: string }) => string | void
     /**
      * Called after the file styles are extracted and processed into the resulting ParserResult object.
      * You can also use this hook to add your own extraction results from your custom parser to the ParserResult object.
      */
-    "parser:after": (args: {
-      filePath: string;
-      result: ParserResultInterface | undefined;
-    }) => void;
+    'parser:after': (args: { filePath: string; result: ParserResultInterface | undefined }) => void
     /**
      * Called after the codegen is completed
      */
-    "codegen:done": () => MaybeAsyncReturn;
+    'codegen:done': () => MaybeAsyncReturn
     /**
      * Called right before adding the design-system CSS (global, static, preflight, tokens, keyframes) to the final CSS
      * Called right before writing/injecting the final CSS (styles.css) that contains the design-system CSS and the parser CSS
      * You can use it to tweak the CSS content before it's written to disk or injected through the postcss plugin.
      */
-    "cssgen:done": (args: {
-      artifact:
-        | "global"
-        | "static"
-        | "reset"
-        | "tokens"
-        | "keyframes"
-        | "styles.css";
-      content: string;
-    }) => string | void;
+    'cssgen:done': (args: {
+      artifact: 'global' | 'static' | 'reset' | 'tokens' | 'keyframes' | 'styles.css'
+      content: string
+    }) => string | void
   }
   ```
 
@@ -1638,12 +1615,12 @@
   **Definition**
 
   ```jsx
-  import { sva } from "styled-system/css";
+  import { sva } from 'styled-system/css'
 
   const button = sva({
-    slots: ["label", "icon"],
+    slots: ['label', 'icon'],
     base: {
-      label: { color: "red", textDecoration: "underline" },
+      label: { color: 'red', textDecoration: 'underline' },
     },
     variants: {
       rounded: {
@@ -1651,33 +1628,33 @@
       },
       size: {
         sm: {
-          label: { fontSize: "sm" },
-          icon: { fontSize: "sm" },
+          label: { fontSize: 'sm' },
+          icon: { fontSize: 'sm' },
         },
         lg: {
-          label: { fontSize: "lg" },
-          icon: { fontSize: "lg", color: "pink" },
+          label: { fontSize: 'lg' },
+          icon: { fontSize: 'lg', color: 'pink' },
         },
       },
     },
     defaultVariants: {
-      size: "sm",
+      size: 'sm',
     },
-  });
+  })
   ```
 
   **Usage**
 
   ```jsx
   export function App() {
-    const btnClass = button({ size: "lg", rounded: true });
+    const btnClass = button({ size: 'lg', rounded: true })
 
     return (
       <button>
         <p class={btnClass.label}> Label</p>
         <p class={btnClass.icon}> Icon</p>
       </button>
-    );
+    )
   }
   ```
 
diff --git a/packages/config/CHANGELOG.md b/packages/config/CHANGELOG.md
index e63c8f48d..d26224987 100644
--- a/packages/config/CHANGELOG.md
+++ b/packages/config/CHANGELOG.md
@@ -101,7 +101,7 @@
 
   ```ts
   // panda.config.ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
@@ -110,15 +110,15 @@
       extend: {
         tokens: {
           colors: {
-            text: { value: "blue" },
+            text: { value: 'blue' },
           },
         },
         semanticTokens: {
           colors: {
             body: {
               value: {
-                base: "{colors.blue.600}",
-                _osDark: "{colors.blue.400}",
+                base: '{colors.blue.600}',
+                _osDark: '{colors.blue.400}',
               },
             },
           },
@@ -130,16 +130,16 @@
       primary: {
         tokens: {
           colors: {
-            text: { value: "red" },
+            text: { value: 'red' },
           },
         },
         semanticTokens: {
           colors: {
-            muted: { value: "{colors.red.200}" },
+            muted: { value: '{colors.red.200}' },
             body: {
               value: {
-                base: "{colors.red.600}",
-                _osDark: "{colors.red.400}",
+                base: '{colors.red.600}',
+                _osDark: '{colors.red.400}',
               },
             },
           },
@@ -148,23 +148,23 @@
       secondary: {
         tokens: {
           colors: {
-            text: { value: "blue" },
+            text: { value: 'blue' },
           },
         },
         semanticTokens: {
           colors: {
-            muted: { value: "{colors.blue.200}" },
+            muted: { value: '{colors.blue.200}' },
             body: {
               value: {
-                base: "{colors.blue.600}",
-                _osDark: "{colors.blue.400}",
+                base: '{colors.blue.600}',
+                _osDark: '{colors.blue.400}',
               },
             },
           },
         },
       },
     },
-  });
+  })
   ```
 
   ### Pregenerating themes
@@ -174,14 +174,14 @@
 
   ```ts
   // panda.config.ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
     staticCss: {
-      themes: ["primary", "secondary"],
+      themes: ['primary', 'secondary'],
     },
-  });
+  })
   ```
 
   This will generate the following CSS:
@@ -193,7 +193,7 @@
       --colors-body: var(--colors-blue-600);
     }
 
-    [data-panda-theme="primary"] {
+    [data-panda-theme='primary'] {
       --colors-text: red;
       --colors-muted: var(--colors-red-200);
       --colors-body: var(--colors-red-600);
@@ -204,7 +204,7 @@
         --colors-body: var(--colors-blue-400);
       }
 
-      [data-panda-theme="primary"] {
+      [data-panda-theme='primary'] {
         --colors-body: var(--colors-red-400);
       }
     }
@@ -235,9 +235,9 @@
   Dynamically import a theme using its name:
 
   ```ts
-  import { getTheme } from "../styled-system/themes";
+  import { getTheme } from '../styled-system/themes'
 
-  const theme = await getTheme("red");
+  const theme = await getTheme('red')
   //    ^? {
   //     name: "red";
   //     id: string;
@@ -248,10 +248,10 @@
   Inject the theme styles into the DOM:
 
   ```ts
-  import { injectTheme } from "../styled-system/themes";
+  import { injectTheme } from '../styled-system/themes'
 
-  const theme = await getTheme("red");
-  injectTheme(document.documentElement, theme); // this returns the injected style element
+  const theme = await getTheme('red')
+  injectTheme(document.documentElement, theme) // this returns the injected style element
   ```
 
   ***
@@ -260,62 +260,54 @@
 
   ```tsx
   // app/layout.tsx
-  import { Inter } from "next/font/google";
-  import { cookies } from "next/headers";
-  import { ThemeName, getTheme } from "../../styled-system/themes";
-
-  export default async function RootLayout({
-    children,
-  }: {
-    children: React.ReactNode;
-  }) {
-    const store = cookies();
-    const themeName = store.get("theme")?.value as ThemeName;
-    const theme = themeName && (await getTheme(themeName));
+  import { Inter } from 'next/font/google'
+  import { cookies } from 'next/headers'
+  import { ThemeName, getTheme } from '../../styled-system/themes'
+
+  export default async function RootLayout({ children }: { children: React.ReactNode }) {
+    const store = cookies()
+    const themeName = store.get('theme')?.value as ThemeName
+    const theme = themeName && (await getTheme(themeName))
 
     return (
       <html lang="en" data-panda-theme={themeName ? themeName : undefined}>
         {themeName && (
           <head>
-            <style
-              type="text/css"
-              id={theme.id}
-              dangerouslySetInnerHTML={{ __html: theme.css }}
-            />
+            <style type="text/css" id={theme.id} dangerouslySetInnerHTML={{ __html: theme.css }} />
           </head>
         )}
         <body>{children}</body>
       </html>
-    );
+    )
   }
 
   // app/page.tsx
-  import { getTheme, injectTheme } from "../../styled-system/themes";
+  import { getTheme, injectTheme } from '../../styled-system/themes'
 
   export default function Home() {
     return (
       <>
         <button
           onClick={async () => {
-            const current = document.documentElement.dataset.pandaTheme;
-            const next = current === "primary" ? "secondary" : "primary";
-            const theme = await getTheme(next);
-            setCookie("theme", next, 7);
-            injectTheme(document.documentElement, theme);
+            const current = document.documentElement.dataset.pandaTheme
+            const next = current === 'primary' ? 'secondary' : 'primary'
+            const theme = await getTheme(next)
+            setCookie('theme', next, 7)
+            injectTheme(document.documentElement, theme)
           }}
         >
           swap theme
         </button>
       </>
-    );
+    )
   }
 
   // Set a Cookie
   function setCookie(cName: string, cValue: any, expDays: number) {
-    let date = new Date();
-    date.setTime(date.getTime() + expDays * 24 * 60 * 60 * 1000);
-    const expires = "expires=" + date.toUTCString();
-    document.cookie = cName + "=" + cValue + "; " + expires + "; path=/";
+    let date = new Date()
+    date.setTime(date.getTime() + expDays * 24 * 60 * 60 * 1000)
+    const expires = 'expires=' + date.toUTCString()
+    document.cookie = cName + '=' + cValue + '; ' + expires + '; path=/'
   }
   ```
 
@@ -324,18 +316,18 @@
   Finally, you can create a theme contract to ensure that all themes have the same structure:
 
   ```ts
-  import { defineThemeContract } from "@pandacss/dev";
+  import { defineThemeContract } from '@pandacss/dev'
 
   const defineTheme = defineThemeContract({
     tokens: {
       colors: {
-        red: { value: "" }, // theme implementations must have a red color
+        red: { value: '' }, // theme implementations must have a red color
       },
     },
-  });
+  })
 
   defineTheme({
-    selector: ".theme-secondary",
+    selector: '.theme-secondary',
     tokens: {
       colors: {
         // ^^^^   Property 'red' is missing in type '{}' but required in type '{ red: { value: string; }; }'
@@ -344,7 +336,7 @@
         // red: { value: 'red' },
       },
     },
-  });
+  })
   ```
 
 ### Patch Changes
@@ -353,7 +345,7 @@
   config)
 
   ```ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   const userConfig = defineConfig({
     presets: [
@@ -362,7 +354,7 @@
           extend: {
             tokens: {
               colors: {
-                black: { value: "black" },
+                black: { value: 'black' },
               },
             },
           },
@@ -374,16 +366,16 @@
         extend: {
           colors: {
             black: {
-              0: { value: "black" },
-              10: { value: "black/10" },
-              20: { value: "black/20" },
-              30: { value: "black/30" },
+              0: { value: 'black' },
+              10: { value: 'black/10' },
+              20: { value: 'black/20' },
+              30: { value: 'black/30' },
             },
           },
         },
       },
     },
-  });
+  })
   ```
 
   When merged with the preset, the config would create nested tokens (`black.10`, `black.20`, `black.30`) inside of the
@@ -430,34 +422,34 @@
   Example:
 
   ```ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
     globalVars: {
-      "--some-color": "red",
-      "--button-color": {
-        syntax: "<color>",
+      '--some-color': 'red',
+      '--button-color': {
+        syntax: '<color>',
         inherits: false,
-        initialValue: "blue",
+        initialValue: 'blue',
       },
     },
-  });
+  })
   ```
 
   > Note: Keys defined in `globalVars` will be available as a value for _every_ utilities, as they're not bound to token
   > categories.
 
   ```ts
-  import { css } from "../styled-system/css";
+  import { css } from '../styled-system/css'
 
   const className = css({
-    "--button-color": "colors.red.300",
+    '--button-color': 'colors.red.300',
     // ^^^^^^^^^^^^  will be suggested
 
-    backgroundColor: "var(--button-color)",
+    backgroundColor: 'var(--button-color)',
     //                ^^^^^^^^^^^^^^^^^^  will be suggested
-  });
+  })
   ```
 
 - Updated dependencies [861a280]
@@ -502,19 +494,19 @@
   modifier in config `tokens` or `semanticTokens`
 
   ```ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
-    validation: "warn",
+    validation: 'warn',
     conditions: {
-      light: ".light &",
-      dark: ".dark &",
+      light: '.light &',
+      dark: '.dark &',
     },
     theme: {
       tokens: {
         colors: {
-          blue: { 500: { value: "blue" } },
-          green: { 500: { value: "green" } },
+          blue: { 500: { value: 'blue' } },
+          green: { 500: { value: 'green' } },
         },
         opacity: {
           half: { value: 0.5 },
@@ -524,15 +516,15 @@
         colors: {
           secondary: {
             value: {
-              base: "red",
-              _light: "{colors.blue.500/32}",
-              _dark: "{colors.green.500/half}",
+              base: 'red',
+              _light: '{colors.blue.500/32}',
+              _dark: '{colors.green.500/half}',
             },
           },
         },
       },
     },
-  });
+  })
   ```
 
   Would incorrectly report:
@@ -564,23 +556,23 @@
 - 9f04427: Fix "missing token" warning when using DEFAULT in tokens path
 
   ```ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
-    validation: "error",
+    validation: 'error',
     theme: {
       semanticTokens: {
         colors: {
           primary: {
-            DEFAULT: { value: "#ff3333" },
-            lighter: { value: "#ff6666" },
+            DEFAULT: { value: '#ff3333' },
+            lighter: { value: '#ff6666' },
           },
-          background: { value: "{colors.primary}" }, // <-- ⚠️ wrong warning
-          background2: { value: "{colors.primary.lighter}" }, // <-- no warning, correct
+          background: { value: '{colors.primary}' }, // <-- ⚠️ wrong warning
+          background2: { value: '{colors.primary.lighter}' }, // <-- no warning, correct
         },
       },
     },
-  });
+  })
   ```
 
   ***
@@ -588,25 +580,25 @@
   Add a warning when using `value` twice
 
   ```ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
-    validation: "error",
+    validation: 'error',
     theme: {
       tokens: {
         colors: {
-          primary: { value: "#ff3333" },
+          primary: { value: '#ff3333' },
         },
       },
       semanticTokens: {
         colors: {
           primary: {
-            value: { value: "{colors.primary}" }, // <-- ⚠️ new warning for this
+            value: { value: '{colors.primary}' }, // <-- ⚠️ new warning for this
           },
         },
       },
     },
-  });
+  })
   ```
 
 - Updated dependencies [d1516c8]
@@ -640,20 +632,20 @@
   export default defaultConfig({
     conditions: {
       extend: {
-        supportHover: ["@media (hover: hover) and (pointer: fine)", "&:hover"],
+        supportHover: ['@media (hover: hover) and (pointer: fine)', '&:hover'],
       },
     },
-  });
+  })
   ```
 
   ```ts
-  import { css } from "../styled-system/css";
+  import { css } from '../styled-system/css'
 
   css({
     _supportHover: {
-      color: "red",
+      color: 'red',
     },
-  });
+  })
   ```
 
   will generate the following CSS:
@@ -709,10 +701,10 @@
 
   ```ts
   css({
-    padding: "1px",
-    paddingTop: "3px",
-    paddingBottom: "4px",
-  });
+    padding: '1px',
+    paddingTop: '3px',
+    paddingBottom: '4px',
+  })
   ```
 
   Will now always generate the following css:
@@ -790,16 +782,16 @@
   keeping the rest. Let's say we want to remove the `stack` pattern from the built-in `@pandacss/preset-base`:
 
   ```ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
     hooks: {
-      "config:resolved": ({ config, utils }) => {
-        return utils.omit(config, ["patterns.stack"]);
+      'config:resolved': ({ config, utils }) => {
+        return utils.omit(config, ['patterns.stack'])
       },
     },
-  });
+  })
   ```
 
 - ab32d1d7: Fix issue where errors were thrown when semantic tokens are overriden in tokens.
@@ -817,11 +809,11 @@
   ```js
   module.exports = {
     plugins: {
-      "@pandacss/dev/postcss": {
-        logfile: "./logs/panda.log",
+      '@pandacss/dev/postcss': {
+        logfile: './logs/panda.log',
       },
     },
-  };
+  }
   ```
 
 - Updated dependencies [74485ef1]
@@ -858,8 +850,8 @@
   ```ts
   export default defineConfig({
     // ...
-    dependencies: ["path/to/files/**.ts"],
-  });
+    dependencies: ['path/to/files/**.ts'],
+  })
   ```
 
   - Invoke `config:change` hook in more situations (when the `--watch` flag is passed to `panda codegen`,
@@ -917,54 +909,39 @@
      * Called when the config is resolved, after all the presets are loaded and merged.
      * This is the first hook called, you can use it to tweak the config before the context is created.
      */
-    "config:resolved": (args: { conf: LoadConfigResult }) => MaybeAsyncReturn;
+    'config:resolved': (args: { conf: LoadConfigResult }) => MaybeAsyncReturn
     /**
      * Called when the Panda context has been created and the API is ready to be used.
      */
-    "context:created": (args: {
-      ctx: ApiInterface;
-      logger: LoggerInterface;
-    }) => void;
+    'context:created': (args: { ctx: ApiInterface; logger: LoggerInterface }) => void
     /**
      * Called when the config file or one of its dependencies (imports) has changed.
      */
-    "config:change": (args: { config: UserConfig }) => MaybeAsyncReturn;
+    'config:change': (args: { config: UserConfig }) => MaybeAsyncReturn
     /**
      * Called after reading the file content but before parsing it.
      * You can use this hook to transform the file content to a tsx-friendly syntax so that Panda's parser can parse it.
      * You can also use this hook to parse the file's content on your side using a custom parser, in this case you don't have to return anything.
      */
-    "parser:before": (args: {
-      filePath: string;
-      content: string;
-    }) => string | void;
+    'parser:before': (args: { filePath: string; content: string }) => string | void
     /**
      * Called after the file styles are extracted and processed into the resulting ParserResult object.
      * You can also use this hook to add your own extraction results from your custom parser to the ParserResult object.
      */
-    "parser:after": (args: {
-      filePath: string;
-      result: ParserResultInterface | undefined;
-    }) => void;
+    'parser:after': (args: { filePath: string; result: ParserResultInterface | undefined }) => void
     /**
      * Called after the codegen is completed
      */
-    "codegen:done": () => MaybeAsyncReturn;
+    'codegen:done': () => MaybeAsyncReturn
     /**
      * Called right before adding the design-system CSS (global, static, preflight, tokens, keyframes) to the final CSS
      * Called right before writing/injecting the final CSS (styles.css) that contains the design-system CSS and the parser CSS
      * You can use it to tweak the CSS content before it's written to disk or injected through the postcss plugin.
      */
-    "cssgen:done": (args: {
-      artifact:
-        | "global"
-        | "static"
-        | "reset"
-        | "tokens"
-        | "keyframes"
-        | "styles.css";
-      content: string;
-    }) => string | void;
+    'cssgen:done': (args: {
+      artifact: 'global' | 'static' | 'reset' | 'tokens' | 'keyframes' | 'styles.css'
+      content: string
+    }) => string | void
   }
   ```
 
@@ -1056,12 +1033,12 @@
 
   ```ts
   // apps/storybook/panda.config.ts
-  import { defineConfig } from "@pandacss/dev";
-  import preset from "@acme/preset";
+  import { defineConfig } from '@pandacss/dev'
+  import preset from '@acme/preset'
 
   export default defineConfig({
     // ...
-  });
+  })
   ```
 
   This would not work before, but now it does.
@@ -1275,10 +1252,10 @@
     staticCss: {
       recipes: {
         // generate all button styles and variants
-        button: ["*"],
+        button: ['*'],
       },
     },
-  });
+  })
 
   export default defineConfig({
     presets: [presetWithStaticCss],
@@ -1286,11 +1263,11 @@
       extend: {
         recipes: {
           // extend and pre-generate all sizes for card
-          card: [{ size: ["small", "medium", "large"] }],
+          card: [{ size: ['small', 'medium', 'large'] }],
         },
       },
     },
-  });
+  })
   ```
 
 ### Patch Changes
@@ -1485,42 +1462,42 @@
     theme: {
       tokens: {
         colors: {
-          "first-main": { value: "override" },
+          'first-main': { value: 'override' },
         },
       },
       extend: {
         tokens: {
           colors: {
-            orange: { value: "orange" },
-            gray: { value: "from-first-config" },
+            orange: { value: 'orange' },
+            gray: { value: 'from-first-config' },
           },
         },
       },
     },
-  });
+  })
 
   const secondConfig = definePreset({
     theme: {
       tokens: {
         colors: {
-          pink: { value: "pink" },
+          pink: { value: 'pink' },
         },
       },
       extend: {
         tokens: {
           colors: {
-            blue: { value: "blue" },
-            gray: { value: "gray" },
+            blue: { value: 'blue' },
+            gray: { value: 'gray' },
           },
         },
       },
     },
-  });
+  })
 
   // Final config
   export default defineConfig({
     presets: [firstConfig, secondConfig],
-  });
+  })
   ```
 
   Here's the difference between the old and new behavior:
@@ -1748,7 +1725,7 @@
 - 33198907: Create separate entrypoint for merge configs
 
   ```ts
-  import { mergeConfigs } from "@pandacss/config/merge";
+  import { mergeConfigs } from '@pandacss/config/merge'
   ```
 
 - 1a2c0e2b: Fix `panda.config.xxx` file dependencies detection when using the builder (= with PostCSS or with the VSCode
diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md
index 677ac8244..23440d06b 100644
--- a/packages/core/CHANGELOG.md
+++ b/packages/core/CHANGELOG.md
@@ -42,11 +42,11 @@
       ta: {
         deprecated: true,
         transform(value) {
-          return { textAlign: value };
+          return { textAlign: value }
         },
       },
     },
-  });
+  })
   ```
 
   **Deprecating a token**
@@ -56,11 +56,11 @@
     theme: {
       tokens: {
         spacing: {
-          lg: { value: "8px", deprecated: "use `8` instead" },
+          lg: { value: '8px', deprecated: 'use `8` instead' },
         },
       },
     },
-  });
+  })
   ```
 
   **Deprecating a pattern**
@@ -72,7 +72,7 @@
         deprecated: true,
       },
     },
-  });
+  })
   ```
 
   **Deprecating a recipe**
@@ -82,11 +82,11 @@
     theme: {
       recipes: {
         btn: {
-          deprecated: "will be removed in v2.0",
+          deprecated: 'will be removed in v2.0',
         },
       },
     },
-  });
+  })
   ```
 
   ### ESLint Plugin
@@ -112,28 +112,23 @@
   This makes it even easier to merge styles from multiple sources.
 
   ```tsx
-  import { Stack, styled } from "../styled-system/jsx";
+  import { Stack, styled } from '../styled-system/jsx'
 
   const HeroSection = (props) => {
     return (
-      <Stack css={[{ color: "blue.300", padding: "4" }, props.css]}>
-        <styled.div css={[{ fontSize: "2xl" }, props.hero]}>
-          Hero Section
-        </styled.div>
+      <Stack css={[{ color: 'blue.300', padding: '4' }, props.css]}>
+        <styled.div css={[{ fontSize: '2xl' }, props.hero]}>Hero Section</styled.div>
       </Stack>
-    );
-  };
+    )
+  }
 
   const App = () => {
     return (
       <>
-        <HeroSection
-          css={{ backgroundColor: "yellow.300" }}
-          hero={css.raw({ fontSize: "4xl", color: "red.300" })}
-        />
+        <HeroSection css={{ backgroundColor: 'yellow.300' }} hero={css.raw({ fontSize: '4xl', color: 'red.300' })} />
       </>
-    );
-  };
+    )
+  }
   ```
 
   should render something like:
@@ -172,21 +167,21 @@
 - 99870bb: Fix issue where setting the pattern `jsx` option with dot notation didn't work.
 
   ```jsx
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
     patterns: {
       extend: {
         grid: {
-          jsx: ["Form.Group", "Grid"],
+          jsx: ['Form.Group', 'Grid'],
         },
         stack: {
-          jsx: ["Form.Action", "Stack"],
+          jsx: ['Form.Action', 'Stack'],
         },
       },
     },
-  });
+  })
   ```
 
 - Updated dependencies [93dc9f5]
@@ -228,9 +223,9 @@
     useful when applying negative margin to child elements.
 
   ```tsx
-  <div className={flex({ spaceX: "-1" })}>
-    <div className={circle({ size: "5", bg: "red" })} />
-    <div className={circle({ size: "5", bg: "pink" })} />
+  <div className={flex({ spaceX: '-1' })}>
+    <div className={circle({ size: '5', bg: 'red' })} />
+    <div className={circle({ size: '5', bg: 'pink' })} />
   </div>
   ```
 
@@ -242,13 +237,13 @@
   ```tsx
   <div
     className={css({
-      bgGradient: "to-r",
+      bgGradient: 'to-r',
       // from
-      gradientFrom: "red",
-      gradientFromPosition: "top left",
+      gradientFrom: 'red',
+      gradientFromPosition: 'top left',
       // to
-      gradientTo: "blue",
-      gradientToPosition: "bottom right",
+      gradientTo: 'blue',
+      gradientToPosition: 'bottom right',
     })}
   />
   ```
@@ -258,23 +253,19 @@
   It can be useful to use a component library's `styled-system` while also using your own `styled-system` in your app.
 
   ```ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
-    importMap: [
-      "@acme/styled-system",
-      "@ui-lib/styled-system",
-      "styled-system",
-    ],
-  });
+    importMap: ['@acme/styled-system', '@ui-lib/styled-system', 'styled-system'],
+  })
   ```
 
   Now you can use any of the `@acme/styled-system`, `@ui-lib/styled-system` and `styled-system` import sources:
 
   ```ts
-  import { css } from "@acme/css";
-  import { css as uiCss } from "@ui-lib/styled-system/css";
-  import { css as appCss } from "@ui-lib/styled-system/css";
+  import { css } from '@acme/css'
+  import { css as uiCss } from '@ui-lib/styled-system/css'
+  import { css as appCss } from '@ui-lib/styled-system/css'
   ```
 
 ### Patch Changes
@@ -313,7 +304,7 @@
 
   ```ts
   // panda.config.ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
@@ -322,15 +313,15 @@
       extend: {
         tokens: {
           colors: {
-            text: { value: "blue" },
+            text: { value: 'blue' },
           },
         },
         semanticTokens: {
           colors: {
             body: {
               value: {
-                base: "{colors.blue.600}",
-                _osDark: "{colors.blue.400}",
+                base: '{colors.blue.600}',
+                _osDark: '{colors.blue.400}',
               },
             },
           },
@@ -342,16 +333,16 @@
       primary: {
         tokens: {
           colors: {
-            text: { value: "red" },
+            text: { value: 'red' },
           },
         },
         semanticTokens: {
           colors: {
-            muted: { value: "{colors.red.200}" },
+            muted: { value: '{colors.red.200}' },
             body: {
               value: {
-                base: "{colors.red.600}",
-                _osDark: "{colors.red.400}",
+                base: '{colors.red.600}',
+                _osDark: '{colors.red.400}',
               },
             },
           },
@@ -360,23 +351,23 @@
       secondary: {
         tokens: {
           colors: {
-            text: { value: "blue" },
+            text: { value: 'blue' },
           },
         },
         semanticTokens: {
           colors: {
-            muted: { value: "{colors.blue.200}" },
+            muted: { value: '{colors.blue.200}' },
             body: {
               value: {
-                base: "{colors.blue.600}",
-                _osDark: "{colors.blue.400}",
+                base: '{colors.blue.600}',
+                _osDark: '{colors.blue.400}',
               },
             },
           },
         },
       },
     },
-  });
+  })
   ```
 
   ### Pregenerating themes
@@ -386,14 +377,14 @@
 
   ```ts
   // panda.config.ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
     staticCss: {
-      themes: ["primary", "secondary"],
+      themes: ['primary', 'secondary'],
     },
-  });
+  })
   ```
 
   This will generate the following CSS:
@@ -405,7 +396,7 @@
       --colors-body: var(--colors-blue-600);
     }
 
-    [data-panda-theme="primary"] {
+    [data-panda-theme='primary'] {
       --colors-text: red;
       --colors-muted: var(--colors-red-200);
       --colors-body: var(--colors-red-600);
@@ -416,7 +407,7 @@
         --colors-body: var(--colors-blue-400);
       }
 
-      [data-panda-theme="primary"] {
+      [data-panda-theme='primary'] {
         --colors-body: var(--colors-red-400);
       }
     }
@@ -447,9 +438,9 @@
   Dynamically import a theme using its name:
 
   ```ts
-  import { getTheme } from "../styled-system/themes";
+  import { getTheme } from '../styled-system/themes'
 
-  const theme = await getTheme("red");
+  const theme = await getTheme('red')
   //    ^? {
   //     name: "red";
   //     id: string;
@@ -460,10 +451,10 @@
   Inject the theme styles into the DOM:
 
   ```ts
-  import { injectTheme } from "../styled-system/themes";
+  import { injectTheme } from '../styled-system/themes'
 
-  const theme = await getTheme("red");
-  injectTheme(document.documentElement, theme); // this returns the injected style element
+  const theme = await getTheme('red')
+  injectTheme(document.documentElement, theme) // this returns the injected style element
   ```
 
   ***
@@ -472,62 +463,54 @@
 
   ```tsx
   // app/layout.tsx
-  import { Inter } from "next/font/google";
-  import { cookies } from "next/headers";
-  import { ThemeName, getTheme } from "../../styled-system/themes";
-
-  export default async function RootLayout({
-    children,
-  }: {
-    children: React.ReactNode;
-  }) {
-    const store = cookies();
-    const themeName = store.get("theme")?.value as ThemeName;
-    const theme = themeName && (await getTheme(themeName));
+  import { Inter } from 'next/font/google'
+  import { cookies } from 'next/headers'
+  import { ThemeName, getTheme } from '../../styled-system/themes'
+
+  export default async function RootLayout({ children }: { children: React.ReactNode }) {
+    const store = cookies()
+    const themeName = store.get('theme')?.value as ThemeName
+    const theme = themeName && (await getTheme(themeName))
 
     return (
       <html lang="en" data-panda-theme={themeName ? themeName : undefined}>
         {themeName && (
           <head>
-            <style
-              type="text/css"
-              id={theme.id}
-              dangerouslySetInnerHTML={{ __html: theme.css }}
-            />
+            <style type="text/css" id={theme.id} dangerouslySetInnerHTML={{ __html: theme.css }} />
           </head>
         )}
         <body>{children}</body>
       </html>
-    );
+    )
   }
 
   // app/page.tsx
-  import { getTheme, injectTheme } from "../../styled-system/themes";
+  import { getTheme, injectTheme } from '../../styled-system/themes'
 
   export default function Home() {
     return (
       <>
         <button
           onClick={async () => {
-            const current = document.documentElement.dataset.pandaTheme;
-            const next = current === "primary" ? "secondary" : "primary";
-            const theme = await getTheme(next);
-            setCookie("theme", next, 7);
-            injectTheme(document.documentElement, theme);
+            const current = document.documentElement.dataset.pandaTheme
+            const next = current === 'primary' ? 'secondary' : 'primary'
+            const theme = await getTheme(next)
+            setCookie('theme', next, 7)
+            injectTheme(document.documentElement, theme)
           }}
         >
           swap theme
         </button>
       </>
-    );
+    )
   }
 
   // Set a Cookie
   function setCookie(cName: string, cValue: any, expDays: number) {
-    let date = new Date();
-    date.setTime(date.getTime() + expDays * 24 * 60 * 60 * 1000);
-    const expires = "expires=" + date.toUTCString();
-    document.cookie = cName + "=" + cValue + "; " + expires + "; path=/";
+    let date = new Date()
+    date.setTime(date.getTime() + expDays * 24 * 60 * 60 * 1000)
+    const expires = 'expires=' + date.toUTCString()
+    document.cookie = cName + '=' + cValue + '; ' + expires + '; path=/'
   }
   ```
 
@@ -536,18 +519,18 @@
   Finally, you can create a theme contract to ensure that all themes have the same structure:
 
   ```ts
-  import { defineThemeContract } from "@pandacss/dev";
+  import { defineThemeContract } from '@pandacss/dev'
 
   const defineTheme = defineThemeContract({
     tokens: {
       colors: {
-        red: { value: "" }, // theme implementations must have a red color
+        red: { value: '' }, // theme implementations must have a red color
       },
     },
-  });
+  })
 
   defineTheme({
-    selector: ".theme-secondary",
+    selector: '.theme-secondary',
     tokens: {
       colors: {
         // ^^^^   Property 'red' is missing in type '{}' but required in type '{ red: { value: string; }; }'
@@ -556,7 +539,7 @@
         // red: { value: 'red' },
       },
     },
-  });
+  })
   ```
 
 - fabdabe: ## Changes
@@ -576,12 +559,12 @@
     theme: {
       extend: {
         colors: {
-          primary: { value: "blue" },
+          primary: { value: 'blue' },
         },
         // borderWidths: {}, // ⚠️ nothing defined here
       },
     },
-  });
+  })
   ```
 
   ```ts
@@ -592,8 +575,8 @@
 
     // ✅ after this PR, TS will not throw an error anymore as you don't have any `borderWidths` tokens
     // if you add one, this will error again (as it's supposed to)
-    borderWidths: "123px",
-  });
+    borderWidths: '123px',
+  })
   ```
 
   ## Description
@@ -631,13 +614,11 @@
 - c459b43: Fix extraction of JSX `styled` factory when using namespace imports
 
   ```tsx
-  import * as pandaJsx from "../styled-system/jsx";
+  import * as pandaJsx from '../styled-system/jsx'
 
   // ✅ this will work now
-  pandaJsx.styled("div", { base: { color: "red" } });
-  const App = () => (
-    <pandaJsx.styled.span color="blue">Hello</pandaJsx.styled.span>
-  );
+  pandaJsx.styled('div', { base: { color: 'red' } })
+  const App = () => <pandaJsx.styled.span color="blue">Hello</pandaJsx.styled.span>
   ```
 
 - Updated dependencies [f2fdc48]
@@ -667,18 +648,18 @@
 - 0bf09f2: Allow using namespaced imports
 
   ```ts
-  import * as p from "styled-system/patterns";
-  import * as recipes from "styled-system/recipes";
-  import * as panda from "styled-system/css";
+  import * as p from 'styled-system/patterns'
+  import * as recipes from 'styled-system/recipes'
+  import * as panda from 'styled-system/css'
 
   // this will now be extracted
-  p.stack({ mt: "40px" });
+  p.stack({ mt: '40px' })
 
-  recipes.cardStyle({ rounded: true });
+  recipes.cardStyle({ rounded: true })
 
-  panda.css({ color: "red" });
-  panda.cva({ base: { color: "blue" } });
-  panda.sva({ base: { root: { color: "green" } } });
+  panda.css({ color: 'red' })
+  panda.cva({ base: { color: 'blue' } })
+  panda.sva({ base: { root: { color: 'green' } } })
   ```
 
   - @pandacss/types@0.34.2
@@ -712,16 +693,16 @@
   ```ts
   // runtime usage
 
-  import { css } from "../styled-system/css";
+  import { css } from '../styled-system/css'
 
-  css({ bg: "{colors.blue.300/70}" });
+  css({ bg: '{colors.blue.300/70}' })
   // => @layer utilities {
   //    .bg_token\(colors\.blue\.300\/70\) {
   //      background: color-mix(in srgb, var(--colors-blue-300) 70%, transparent);
   //    }
   //  }
 
-  css({ bg: "token(colors.blue.300/70)" });
+  css({ bg: 'token(colors.blue.300/70)' })
   // => @layer utilities {
   //    .bg_token\(colors\.blue\.300\/70\) {
   //      background: color-mix(in srgb, var(--colors-blue-300) 70%, transparent);
@@ -731,37 +712,33 @@
 
   ```ts
   // build-time usage
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     theme: {
       tokens: {
         colors: {
           blue: {
-            300: { value: "#00f" },
+            300: { value: '#00f' },
           },
         },
       },
       semanticTokens: {
         colors: {
           primary: {
-            value: "{colors.blue.300/70}",
+            value: '{colors.blue.300/70}',
           },
         },
       },
     },
-  });
+  })
   ```
 
   ```css
   @layer tokens {
     :where(:root, :host) {
       --colors-blue-300: #00f;
-      --colors-primary: color-mix(
-        in srgb,
-        var(--colors-blue-300) 70%,
-        transparent
-      );
+      --colors-primary: color-mix(in srgb, var(--colors-blue-300) 70%, transparent);
     }
   }
   ```
@@ -802,20 +779,20 @@
   export default defaultConfig({
     conditions: {
       extend: {
-        supportHover: ["@media (hover: hover) and (pointer: fine)", "&:hover"],
+        supportHover: ['@media (hover: hover) and (pointer: fine)', '&:hover'],
       },
     },
-  });
+  })
   ```
 
   ```ts
-  import { css } from "../styled-system/css";
+  import { css } from '../styled-system/css'
 
   css({
     _supportHover: {
-      color: "red",
+      color: 'red',
     },
-  });
+  })
   ```
 
   will generate the following CSS:
@@ -831,25 +808,25 @@
 - 31071ba: Fix an issue for token names starting with '0'
 
   ```ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     theme: {
       tokens: {
         spacing: {
-          "025": {
-            value: "0.125rem",
+          '025': {
+            value: '0.125rem',
           },
         },
       },
     },
-  });
+  })
   ```
 
   and then using it like
 
   ```ts
-  css({ margin: "025" });
+  css({ margin: '025' })
   ```
 
   This would not generate the expected CSS because the parser would try to parse `025` as a number (`25`) instead of
@@ -860,11 +837,11 @@
   - Allow using multiple aliases for the same identifier for the `/css` entrypoints just like `/patterns` and `/recipes`
 
   ```ts
-  import { css } from "../styled-system/css";
-  import { css as css2 } from "../styled-system/css";
+  import { css } from '../styled-system/css'
+  import { css as css2 } from '../styled-system/css'
 
-  css({ display: "flex" });
-  css2({ flexDirection: "column" }); // this wasn't working before, now it does
+  css({ display: 'flex' })
+  css2({ flexDirection: 'column' }) // this wasn't working before, now it does
   ```
 
 - Updated dependencies [a032375]
@@ -908,10 +885,10 @@
 
   ```ts
   css({
-    padding: "1px",
-    paddingTop: "3px",
-    paddingBottom: "4px",
-  });
+    padding: '1px',
+    paddingTop: '3px',
+    paddingBottom: '4px',
+  })
   ```
 
   Will now always generate the following css:
@@ -972,17 +949,16 @@
   export default defineConfig({
     // ...
     hooks: {
-      "parser:before": ({ configure }) => {
+      'parser:before': ({ configure }) => {
         configure({
           // ignore the Select.Content entirely
-          matchTag: (tag) => tag !== "Select.Content",
+          matchTag: (tag) => tag !== 'Select.Content',
           // ...or specifically ignore the `position` property
-          matchTagProp: (tag, prop) =>
-            tag === "Select.Content" && prop !== "position",
-        });
+          matchTagProp: (tag, prop) => tag === 'Select.Content' && prop !== 'position',
+        })
       },
     },
-  });
+  })
   ```
 
 - Updated dependencies [6b829cab]
@@ -1050,9 +1026,9 @@
 
   ```ts
   css({
-    bg: "red.300/40",
-    color: "white",
-  });
+    bg: 'red.300/40',
+    color: 'white',
+  })
   ```
 
   This will generate:
@@ -1060,11 +1036,7 @@
   ```css
   @layer utilities {
     .bg_red\.300\/40 {
-      --mix-background: color-mix(
-        in srgb,
-        var(--colors-red-300) 40%,
-        transparent
-      );
+      --mix-background: color-mix(in srgb, var(--colors-red-300) 40%, transparent);
       background: var(--mix-background, var(--colors-red-300));
     }
 
@@ -1088,21 +1060,21 @@
   export default defineConfig({
     utilities: {
       background: {
-        shorthand: "bg",
-        className: "bg",
-        values: "colors",
+        shorthand: 'bg',
+        className: 'bg',
+        values: 'colors',
         transform(value, args) {
-          const mix = args.utils.colorMix(value);
+          const mix = args.utils.colorMix(value)
           // This can happen if the value format is invalid (e.g. `bg: red.300/invalid` or `bg: red.300//10`)
-          if (mix.invalid) return { background: value };
+          if (mix.invalid) return { background: value }
 
           return {
             background: mix.value,
-          };
+          }
         },
       },
     },
-  });
+  })
   ```
 
   ***
@@ -1111,21 +1083,21 @@
   property:
 
   ```ts
-  import type { PropertyTransform } from "@pandacss/types";
+  import type { PropertyTransform } from '@pandacss/types'
 
   export const createColorMixTransform =
     (prop: string): PropertyTransform =>
     (value, args) => {
-      const mix = args.utils.colorMix(value);
-      if (mix.invalid) return { [prop]: value };
+      const mix = args.utils.colorMix(value)
+      if (mix.invalid) return { [prop]: value }
 
-      const cssVar = "--mix-" + prop;
+      const cssVar = '--mix-' + prop
 
       return {
         [cssVar]: mix.value,
         [prop]: `var(${cssVar}, ${mix.color})`,
-      };
-    };
+      }
+    }
   ```
 
   then the same utility transform as above can be written like this:
@@ -1151,24 +1123,24 @@
     patterns: {
       hstack: {
         properties: {
-          justify: { type: "property", value: "justifyContent" },
-          gap: { type: "property", value: "gap" },
+          justify: { type: 'property', value: 'justifyContent' },
+          gap: { type: 'property', value: 'gap' },
         },
         // you can also use a token like '10'
-        defaultValues: { gap: "40px" },
+        defaultValues: { gap: '40px' },
         transform(props) {
-          const { justify, gap, ...rest } = props;
+          const { justify, gap, ...rest } = props
           return {
-            display: "flex",
-            alignItems: "center",
+            display: 'flex',
+            alignItems: 'center',
             justifyContent: justify,
             gap,
             ...rest,
-          };
+          }
         },
       },
     },
-  });
+  })
   ```
 
 - 250b4d11: ### Container Query Theme
@@ -1182,34 +1154,34 @@
     // ...
     theme: {
       extend: {
-        containerNames: ["sidebar", "content"],
+        containerNames: ['sidebar', 'content'],
         containerSizes: {
-          xs: "40em",
-          sm: "60em",
-          md: "80em",
+          xs: '40em',
+          sm: '60em',
+          md: '80em',
         },
       },
     },
-  });
+  })
   ```
 
   The default container sizes in the `@pandacss/preset-panda` preset are shown below:
 
   ```ts
   export const containerSizes = {
-    xs: "320px",
-    sm: "384px",
-    md: "448px",
-    lg: "512px",
-    xl: "576px",
-    "2xl": "672px",
-    "3xl": "768px",
-    "4xl": "896px",
-    "5xl": "1024px",
-    "6xl": "1152px",
-    "7xl": "1280px",
-    "8xl": "1440px",
-  };
+    xs: '320px',
+    sm: '384px',
+    md: '448px',
+    lg: '512px',
+    xl: '576px',
+    '2xl': '672px',
+    '3xl': '768px',
+    '4xl': '896px',
+    '5xl': '1024px',
+    '6xl': '1152px',
+    '7xl': '1280px',
+    '8xl': '1440px',
+  }
   ```
 
   Then use them in your styles by referencing using `@<container-name>/<container-size>` syntax:
@@ -1293,10 +1265,10 @@
   css({
     // ✅ this is fine now, will resolve to something like
     // `@container (min-width: 56em)`
-    "@container (min-width: {sizes.4xl})": {
-      color: "green",
+    '@container (min-width: {sizes.4xl})': {
+      color: 'green',
     },
-  });
+  })
   ```
 
   Fix an issue where the curly token references would not be escaped if the token path was not found.
@@ -1335,54 +1307,39 @@
      * Called when the config is resolved, after all the presets are loaded and merged.
      * This is the first hook called, you can use it to tweak the config before the context is created.
      */
-    "config:resolved": (args: { conf: LoadConfigResult }) => MaybeAsyncReturn;
+    'config:resolved': (args: { conf: LoadConfigResult }) => MaybeAsyncReturn
     /**
      * Called when the Panda context has been created and the API is ready to be used.
      */
-    "context:created": (args: {
-      ctx: ApiInterface;
-      logger: LoggerInterface;
-    }) => void;
+    'context:created': (args: { ctx: ApiInterface; logger: LoggerInterface }) => void
     /**
      * Called when the config file or one of its dependencies (imports) has changed.
      */
-    "config:change": (args: { config: UserConfig }) => MaybeAsyncReturn;
+    'config:change': (args: { config: UserConfig }) => MaybeAsyncReturn
     /**
      * Called after reading the file content but before parsing it.
      * You can use this hook to transform the file content to a tsx-friendly syntax so that Panda's parser can parse it.
      * You can also use this hook to parse the file's content on your side using a custom parser, in this case you don't have to return anything.
      */
-    "parser:before": (args: {
-      filePath: string;
-      content: string;
-    }) => string | void;
+    'parser:before': (args: { filePath: string; content: string }) => string | void
     /**
      * Called after the file styles are extracted and processed into the resulting ParserResult object.
      * You can also use this hook to add your own extraction results from your custom parser to the ParserResult object.
      */
-    "parser:after": (args: {
-      filePath: string;
-      result: ParserResultInterface | undefined;
-    }) => void;
+    'parser:after': (args: { filePath: string; result: ParserResultInterface | undefined }) => void
     /**
      * Called after the codegen is completed
      */
-    "codegen:done": () => MaybeAsyncReturn;
+    'codegen:done': () => MaybeAsyncReturn
     /**
      * Called right before adding the design-system CSS (global, static, preflight, tokens, keyframes) to the final CSS
      * Called right before writing/injecting the final CSS (styles.css) that contains the design-system CSS and the parser CSS
      * You can use it to tweak the CSS content before it's written to disk or injected through the postcss plugin.
      */
-    "cssgen:done": (args: {
-      artifact:
-        | "global"
-        | "static"
-        | "reset"
-        | "tokens"
-        | "keyframes"
-        | "styles.css";
-      content: string;
-    }) => string | void;
+    'cssgen:done': (args: {
+      artifact: 'global' | 'static' | 'reset' | 'tokens' | 'keyframes' | 'styles.css'
+      content: string
+    }) => string | void
   }
   ```
 
@@ -1589,11 +1546,11 @@
 - de282f60: Support token reference syntax when authoring styles object, text styles and layer styles.
 
   ```jsx
-  import { css } from "../styled-system/css";
+  import { css } from '../styled-system/css'
 
   const styles = css({
-    border: "2px solid {colors.primary}",
-  });
+    border: '2px solid {colors.primary}',
+  })
   ```
 
   This will resolve the token reference and convert it to css variables.
@@ -1613,18 +1570,18 @@
   ```jsx
   const styles = css({
     // token reference syntax
-    border: "2px solid {colors.primary}",
+    border: '2px solid {colors.primary}',
     // token function syntax
-    border: "2px solid token(colors.primary)",
-  });
+    border: '2px solid token(colors.primary)',
+  })
   ```
 
   However, The `token(...)` syntax allows you to set a fallback value.
 
   ```jsx
   const styles = css({
-    border: "2px solid token(colors.primary, red)",
-  });
+    border: '2px solid token(colors.primary, red)',
+  })
   ```
 
 ### Patch Changes
@@ -1635,8 +1592,8 @@
   ```jsx
   css({
     // This didn't work, but now it does
-    base: { color: "blue" },
-  });
+    base: { color: 'blue' },
+  })
   ```
 
 - Updated dependencies [59fd291c]
@@ -1695,38 +1652,38 @@
 
   ```ts
   const card = defineRecipe({
-    className: "card",
-    base: { color: "white" },
+    className: 'card',
+    base: { color: 'white' },
     variants: {
       size: {
-        small: { fontSize: "14px" },
-        large: { fontSize: "18px" },
+        small: { fontSize: '14px' },
+        large: { fontSize: '18px' },
       },
       visual: {
-        primary: { backgroundColor: "blue" },
-        secondary: { backgroundColor: "gray" },
+        primary: { backgroundColor: 'blue' },
+        secondary: { backgroundColor: 'gray' },
       },
     },
-  });
+  })
 
   export default defineConfig({
     // ...
     staticCss: {
       recipes: {
-        card: ["*"], // this
+        card: ['*'], // this
 
         // was equivalent to:
         card: [
           // notice how `responsive: true` was implicitly added
-          { size: ["*"], responsive: true },
-          { visual: ["*"], responsive: true },
+          { size: ['*'], responsive: true },
+          { visual: ['*'], responsive: true },
         ],
 
         //   will now correctly be equivalent to:
-        card: [{ size: ["*"] }, { visual: ["*"] }],
+        card: [{ size: ['*'] }, { visual: ['*'] }],
       },
     },
-  });
+  })
   ```
 
   Here's the diff in the generated CSS:
@@ -1852,30 +1809,30 @@
   another file, such as when using `Ark-UI` like `import { comboboxAnatomy } from '@ark-ui/anatomy'`
 
   ```ts
-  import { sva } from "../styled-system/css";
-  import { slots } from "./slots";
+  import { sva } from '../styled-system/css'
+  import { slots } from './slots'
 
   const card = sva({
     slots, // ❌ did NOT work -> ✅ will now work as expected
     base: {
       root: {
-        p: "6",
-        m: "4",
-        w: "md",
-        boxShadow: "md",
-        borderRadius: "md",
-        _dark: { bg: "#262626", color: "white" },
+        p: '6',
+        m: '4',
+        w: 'md',
+        boxShadow: 'md',
+        borderRadius: 'md',
+        _dark: { bg: '#262626', color: 'white' },
       },
       content: {
-        textStyle: "lg",
+        textStyle: 'lg',
       },
       title: {
-        textStyle: "xl",
-        fontWeight: "semibold",
-        pb: "2",
+        textStyle: 'xl',
+        fontWeight: 'semibold',
+        pb: '2',
       },
     },
-  });
+  })
   ```
 
 - 840ed66b: Fix an issue with config change detection when using a custom `config.slotRecipes[xxx].jsx` array
@@ -1932,18 +1889,18 @@
   and suffixing with `]`, e.g. writing `[123px]` as a value will bypass the token validation.
 
   ```ts
-  import { css } from "../styled-system/css";
+  import { css } from '../styled-system/css'
 
   css({
     // @ts-expect-error TS will throw when using from strictTokens: true
-    color: "#fff",
+    color: '#fff',
     // @ts-expect-error TS will throw when using from strictTokens: true
-    width: "100px",
+    width: '100px',
 
     // ✅ but this is now allowed:
-    bgColor: "[rgb(51 155 240)]",
-    fontSize: "[12px]",
-  });
+    bgColor: '[rgb(51 155 240)]',
+    fontSize: '[12px]',
+  })
   ```
 
 ### Patch Changes
@@ -1956,8 +1913,8 @@
     // here the content property is a valid CSS property, so Panda will try to generate the CSS for it
     // but since it's an URL, it would produce invalid CSS
     // we now check if the property value is an URL and skip it if needed
-    return <CopyButton content="https://www.buymeacoffee.com/grizzlycodes" />;
-  };
+    return <CopyButton content="https://www.buymeacoffee.com/grizzlycodes" />
+  }
   ```
 
 - d81dcbe6: - Fix an issue where recipe variants that clash with utility shorthand don't get generated due to the
@@ -1966,36 +1923,36 @@
 - 105f74ce: Add a way to specify a recipe's `staticCss` options from inside a recipe config, e.g.:
 
   ```js
-  import { defineRecipe } from "@pandacss/dev";
+  import { defineRecipe } from '@pandacss/dev'
 
   const card = defineRecipe({
-    className: "card",
-    base: { color: "white" },
+    className: 'card',
+    base: { color: 'white' },
     variants: {
       size: {
-        small: { fontSize: "14px" },
-        large: { fontSize: "18px" },
+        small: { fontSize: '14px' },
+        large: { fontSize: '18px' },
       },
     },
-    staticCss: [{ size: ["*"] }],
-  });
+    staticCss: [{ size: ['*'] }],
+  })
   ```
 
   would be the equivalent of defining it inside the main config:
 
   ```js
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
     staticCss: {
       recipes: {
         card: {
-          size: ["*"],
+          size: ['*'],
         },
       },
     },
-  });
+  })
   ```
 
 - Updated dependencies [26e6051a]
@@ -2027,13 +1984,13 @@
 
   ```ts
   css({
-    "@container (min-width: token(sizes.xl))": {
-      color: "green.300",
+    '@container (min-width: token(sizes.xl))': {
+      color: 'green.300',
     },
-    "@media (min-width: token(sizes.2xl))": {
-      color: "red.300",
+    '@media (min-width: token(sizes.2xl))': {
+      color: 'red.300',
     },
-  });
+  })
   ```
 
 - Updated dependencies [24ee49a5]
@@ -2085,14 +2042,14 @@
 - 8c76cd0f: - Fix issue where `hideBelow` breakpoints are inclusive of the specified breakpoints
 
   ```jsx
-  css({ hideBelow: "lg" });
+  css({ hideBelow: 'lg' })
   // => @media screen and (max-width: 63.9975em) { background: red; }
   ```
 
   - Support arbitrary breakpoints in `hideBelow` and `hideFrom` utilities
 
   ```jsx
-  css({ hideFrom: "800px" });
+  css({ hideFrom: '800px' })
   // => @media screen and (min-width: 800px) { background: red; }
   ```
 
@@ -2178,10 +2135,10 @@
 
   ```ts
   const button = defineSlotRecipe({
-    className: "button",
-    slots: ["root", "icon", "label"],
+    className: 'button',
+    slots: ['root', 'icon', 'label'],
     // ...
-  });
+  })
   ```
 
   will have a default `jsx` property of: `[Button, Button.Root, Button.Icon, Button.Label]`
@@ -2238,42 +2195,42 @@
 
   ```ts
   export default defineConfig({
-    outdir: "./outdir",
+    outdir: './outdir',
     importMap: {
-      css: "#panda/styled-system/css",
-      recipes: "#panda/styled-system/recipes",
-      patterns: "#panda/styled-system/patterns",
-      jsx: "#panda/styled-system/jsx",
+      css: '#panda/styled-system/css',
+      recipes: '#panda/styled-system/recipes',
+      patterns: '#panda/styled-system/patterns',
+      jsx: '#panda/styled-system/jsx',
     },
-  });
+  })
   ```
 
   Or you could also make your outdir an actual package from your monorepo:
 
   ```ts
   export default defineConfig({
-    outdir: "../packages/styled-system",
+    outdir: '../packages/styled-system',
     importMap: {
-      css: "@monorepo/styled-system",
-      recipes: "@monorepo/styled-system",
-      patterns: "@monorepo/styled-system",
-      jsx: "@monorepo/styled-system",
+      css: '@monorepo/styled-system',
+      recipes: '@monorepo/styled-system',
+      patterns: '@monorepo/styled-system',
+      jsx: '@monorepo/styled-system',
     },
-  });
+  })
   ```
 
   Working with tsconfig paths aliases is easy:
 
   ```ts
   export default defineConfig({
-    outdir: "styled-system",
+    outdir: 'styled-system',
     importMap: {
-      css: "styled-system/css",
-      recipes: "styled-system/recipes",
-      patterns: "styled-system/patterns",
-      jsx: "styled-system/jsx",
+      css: 'styled-system/css',
+      recipes: 'styled-system/recipes',
+      patterns: 'styled-system/patterns',
+      jsx: 'styled-system/jsx',
     },
-  });
+  })
   ```
 
 - Updated dependencies [95b06bb1]
@@ -2303,13 +2260,13 @@
 - 848936e0: Allow referencing tokens with the `token()` function in media queries or any other CSS at-rule.
 
   ```js
-  import { css } from "../styled-system/css";
+  import { css } from '../styled-system/css'
 
   const className = css({
-    "@media screen and (min-width: token(sizes.4xl))": {
-      color: "green.400",
+    '@media screen and (min-width: token(sizes.4xl))': {
+      color: 'green.400',
     },
-  });
+  })
   ```
 
 - Updated dependencies [26f6982c]
@@ -2362,7 +2319,7 @@
 
   ```css
   * {
-    color: token("colors.magenta", pink);
+    color: token('colors.magenta', pink);
   }
   ```
 
@@ -2471,12 +2428,12 @@
   **Definition**
 
   ```jsx
-  import { sva } from "styled-system/css";
+  import { sva } from 'styled-system/css'
 
   const button = sva({
-    slots: ["label", "icon"],
+    slots: ['label', 'icon'],
     base: {
-      label: { color: "red", textDecoration: "underline" },
+      label: { color: 'red', textDecoration: 'underline' },
     },
     variants: {
       rounded: {
@@ -2484,33 +2441,33 @@
       },
       size: {
         sm: {
-          label: { fontSize: "sm" },
-          icon: { fontSize: "sm" },
+          label: { fontSize: 'sm' },
+          icon: { fontSize: 'sm' },
         },
         lg: {
-          label: { fontSize: "lg" },
-          icon: { fontSize: "lg", color: "pink" },
+          label: { fontSize: 'lg' },
+          icon: { fontSize: 'lg', color: 'pink' },
         },
       },
     },
     defaultVariants: {
-      size: "sm",
+      size: 'sm',
     },
-  });
+  })
   ```
 
   **Usage**
 
   ```jsx
   export function App() {
-    const btnClass = button({ size: "lg", rounded: true });
+    const btnClass = button({ size: 'lg', rounded: true })
 
     return (
       <button>
         <p class={btnClass.label}> Label</p>
         <p class={btnClass.icon}> Icon</p>
       </button>
-    );
+    )
   }
   ```
 
@@ -2559,26 +2516,26 @@
   Update the `jsx` property to be used for advanced tracking of custom pattern components.
 
   ```jsx
-  import { Circle } from "styled-system/jsx";
+  import { Circle } from 'styled-system/jsx'
   const CustomCircle = ({ children, ...props }) => {
-    return <Circle {...props}>{children}</Circle>;
-  };
+    return <Circle {...props}>{children}</Circle>
+  }
   ```
 
   To track the `CustomCircle` component, you can now use the `jsx` property.
 
   ```js
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     patterns: {
       extend: {
         circle: {
-          jsx: ["CustomCircle"],
+          jsx: ['CustomCircle'],
         },
       },
     },
-  });
+  })
   ```
 
 ### Patch Changes
@@ -2642,17 +2599,9 @@
   ```tsx
   const ComponentWithMultipleRecipes = ({ variant }) => {
     return (
-      <button
-        className={cx(
-          pinkRecipe({ variant }),
-          greenRecipe({ variant }),
-          blueRecipe({ variant }),
-        )}
-      >
-        Hello
-      </button>
-    );
-  };
+      <button className={cx(pinkRecipe({ variant }), greenRecipe({ variant }), blueRecipe({ variant }))}>Hello</button>
+    )
+  }
   ```
 
   Given a `panda.config.ts` with recipes each including a common `jsx` tag name, such as:
@@ -2719,7 +2668,7 @@
   ```ts
   staticCss: {
     recipes: {
-      button: [{ size: ["*"], shape: ["*"] }];
+      button: [{ size: ['*'], shape: ['*'] }]
     }
   }
   ```
@@ -2729,7 +2678,7 @@
   ```ts
   staticCss: {
     recipes: {
-      button: ["*"];
+      button: ['*']
     }
   }
   ```
@@ -2765,12 +2714,12 @@
 - 5b344b9c: Add support for disabling shorthand props
 
   ```ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
     shorthands: false,
-  });
+  })
   ```
 
 ### Patch Changes
@@ -2872,11 +2821,11 @@ This hook is called right before writing the codegen files to disk. You can use
 export default defineConfig({
   // ...
   hooks: {
-    "codegen:prepare": ({ artifacts, changed }) => {
+    'codegen:prepare': ({ artifacts, changed }) => {
       // do something with the emitted js/d.ts files
     },
   },
-});
+})
 ```
 
 - d5977c24: - Add a `--logfile` flag to the `panda`, `panda codegen`, `panda cssgen` and `panda debug` commands.
@@ -2893,11 +2842,11 @@ export default defineConfig({
   ```js
   module.exports = {
     plugins: {
-      "@pandacss/dev/postcss": {
-        logfile: "./logs/panda.log",
+      '@pandacss/dev/postcss': {
+        logfile: './logs/panda.log',
       },
     },
-  };
+  }
   ```
 
 - Updated dependencies [74485ef1]
@@ -2936,9 +2885,9 @@ export default defineConfig({
 
   ```ts
   css({
-    bg: "red.300/40",
-    color: "white",
-  });
+    bg: 'red.300/40',
+    color: 'white',
+  })
   ```
 
   This will generate:
@@ -2946,11 +2895,7 @@ export default defineConfig({
   ```css
   @layer utilities {
     .bg_red\.300\/40 {
-      --mix-background: color-mix(
-        in srgb,
-        var(--colors-red-300) 40%,
-        transparent
-      );
+      --mix-background: color-mix(in srgb, var(--colors-red-300) 40%, transparent);
       background: var(--mix-background, var(--colors-red-300));
     }
 
@@ -2974,21 +2919,21 @@ export default defineConfig({
   export default defineConfig({
     utilities: {
       background: {
-        shorthand: "bg",
-        className: "bg",
-        values: "colors",
+        shorthand: 'bg',
+        className: 'bg',
+        values: 'colors',
         transform(value, args) {
-          const mix = args.utils.colorMix(value);
+          const mix = args.utils.colorMix(value)
           // This can happen if the value format is invalid (e.g. `bg: red.300/invalid` or `bg: red.300//10`)
-          if (mix.invalid) return { background: value };
+          if (mix.invalid) return { background: value }
 
           return {
             background: mix.value,
-          };
+          }
         },
       },
     },
-  });
+  })
   ```
 
   ***
@@ -2997,21 +2942,21 @@ export default defineConfig({
   property:
 
   ```ts
-  import type { PropertyTransform } from "@pandacss/types";
+  import type { PropertyTransform } from '@pandacss/types'
 
   export const createColorMixTransform =
     (prop: string): PropertyTransform =>
     (value, args) => {
-      const mix = args.utils.colorMix(value);
-      if (mix.invalid) return { [prop]: value };
+      const mix = args.utils.colorMix(value)
+      if (mix.invalid) return { [prop]: value }
 
-      const cssVar = "--mix-" + prop;
+      const cssVar = '--mix-' + prop
 
       return {
         [cssVar]: mix.value,
         [prop]: `var(${cssVar}, ${mix.color})`,
-      };
-    };
+      }
+    }
   ```
 
   then the same utility transform as above can be written like this:
@@ -3037,24 +2982,24 @@ export default defineConfig({
     patterns: {
       hstack: {
         properties: {
-          justify: { type: "property", value: "justifyContent" },
-          gap: { type: "property", value: "gap" },
+          justify: { type: 'property', value: 'justifyContent' },
+          gap: { type: 'property', value: 'gap' },
         },
         // you can also use a token like '10'
-        defaultValues: { gap: "40px" },
+        defaultValues: { gap: '40px' },
         transform(props) {
-          const { justify, gap, ...rest } = props;
+          const { justify, gap, ...rest } = props
           return {
-            display: "flex",
-            alignItems: "center",
+            display: 'flex',
+            alignItems: 'center',
             justifyContent: justify,
             gap,
             ...rest,
-          };
+          }
         },
       },
     },
-  });
+  })
   ```
 
 - 250b4d11: ### Container Query Theme
@@ -3068,34 +3013,34 @@ export default defineConfig({
     // ...
     theme: {
       extend: {
-        containerNames: ["sidebar", "content"],
+        containerNames: ['sidebar', 'content'],
         containerSizes: {
-          xs: "40em",
-          sm: "60em",
-          md: "80em",
+          xs: '40em',
+          sm: '60em',
+          md: '80em',
         },
       },
     },
-  });
+  })
   ```
 
   The default container sizes in the `@pandacss/preset-panda` preset are shown below:
 
   ```ts
   export const containerSizes = {
-    xs: "320px",
-    sm: "384px",
-    md: "448px",
-    lg: "512px",
-    xl: "576px",
-    "2xl": "672px",
-    "3xl": "768px",
-    "4xl": "896px",
-    "5xl": "1024px",
-    "6xl": "1152px",
-    "7xl": "1280px",
-    "8xl": "1440px",
-  };
+    xs: '320px',
+    sm: '384px',
+    md: '448px',
+    lg: '512px',
+    xl: '576px',
+    '2xl': '672px',
+    '3xl': '768px',
+    '4xl': '896px',
+    '5xl': '1024px',
+    '6xl': '1152px',
+    '7xl': '1280px',
+    '8xl': '1440px',
+  }
   ```
 
   Then use them in your styles by referencing using `@<container-name>/<container-size>` syntax:
@@ -3179,10 +3124,10 @@ export default defineConfig({
   css({
     // ✅ this is fine now, will resolve to something like
     // `@container (min-width: 56em)`
-    "@container (min-width: {sizes.4xl})": {
-      color: "green",
+    '@container (min-width: {sizes.4xl})': {
+      color: 'green',
     },
-  });
+  })
   ```
 
   Fix an issue where the curly token references would not be escaped if the token path was not found.
@@ -3221,54 +3166,39 @@ export default defineConfig({
      * Called when the config is resolved, after all the presets are loaded and merged.
      * This is the first hook called, you can use it to tweak the config before the context is created.
      */
-    "config:resolved": (args: { conf: LoadConfigResult }) => MaybeAsyncReturn;
+    'config:resolved': (args: { conf: LoadConfigResult }) => MaybeAsyncReturn
     /**
      * Called when the Panda context has been created and the API is ready to be used.
      */
-    "context:created": (args: {
-      ctx: ApiInterface;
-      logger: LoggerInterface;
-    }) => void;
+    'context:created': (args: { ctx: ApiInterface; logger: LoggerInterface }) => void
     /**
      * Called when the config file or one of its dependencies (imports) has changed.
      */
-    "config:change": (args: { config: UserConfig }) => MaybeAsyncReturn;
+    'config:change': (args: { config: UserConfig }) => MaybeAsyncReturn
     /**
      * Called after reading the file content but before parsing it.
      * You can use this hook to transform the file content to a tsx-friendly syntax so that Panda's parser can parse it.
      * You can also use this hook to parse the file's content on your side using a custom parser, in this case you don't have to return anything.
      */
-    "parser:before": (args: {
-      filePath: string;
-      content: string;
-    }) => string | void;
+    'parser:before': (args: { filePath: string; content: string }) => string | void
     /**
      * Called after the file styles are extracted and processed into the resulting ParserResult object.
      * You can also use this hook to add your own extraction results from your custom parser to the ParserResult object.
      */
-    "parser:after": (args: {
-      filePath: string;
-      result: ParserResultInterface | undefined;
-    }) => void;
+    'parser:after': (args: { filePath: string; result: ParserResultInterface | undefined }) => void
     /**
      * Called after the codegen is completed
      */
-    "codegen:done": () => MaybeAsyncReturn;
+    'codegen:done': () => MaybeAsyncReturn
     /**
      * Called right before adding the design-system CSS (global, static, preflight, tokens, keyframes) to the final CSS
      * Called right before writing/injecting the final CSS (styles.css) that contains the design-system CSS and the parser CSS
      * You can use it to tweak the CSS content before it's written to disk or injected through the postcss plugin.
      */
-    "cssgen:done": (args: {
-      artifact:
-        | "global"
-        | "static"
-        | "reset"
-        | "tokens"
-        | "keyframes"
-        | "styles.css";
-      content: string;
-    }) => string | void;
+    'cssgen:done': (args: {
+      artifact: 'global' | 'static' | 'reset' | 'tokens' | 'keyframes' | 'styles.css'
+      content: string
+    }) => string | void
   }
   ```
 
@@ -3475,11 +3405,11 @@ export default defineConfig({
 - de282f60: Support token reference syntax when authoring styles object, text styles and layer styles.
 
   ```jsx
-  import { css } from "../styled-system/css";
+  import { css } from '../styled-system/css'
 
   const styles = css({
-    border: "2px solid {colors.primary}",
-  });
+    border: '2px solid {colors.primary}',
+  })
   ```
 
   This will resolve the token reference and convert it to css variables.
@@ -3499,18 +3429,18 @@ export default defineConfig({
   ```jsx
   const styles = css({
     // token reference syntax
-    border: "2px solid {colors.primary}",
+    border: '2px solid {colors.primary}',
     // token function syntax
-    border: "2px solid token(colors.primary)",
-  });
+    border: '2px solid token(colors.primary)',
+  })
   ```
 
   However, The `token(...)` syntax allows you to set a fallback value.
 
   ```jsx
   const styles = css({
-    border: "2px solid token(colors.primary, red)",
-  });
+    border: '2px solid token(colors.primary, red)',
+  })
   ```
 
 ### Patch Changes
@@ -3521,8 +3451,8 @@ export default defineConfig({
   ```jsx
   css({
     // This didn't work, but now it does
-    base: { color: "blue" },
-  });
+    base: { color: 'blue' },
+  })
   ```
 
 - Updated dependencies [59fd291c]
@@ -3581,38 +3511,38 @@ export default defineConfig({
 
   ```ts
   const card = defineRecipe({
-    className: "card",
-    base: { color: "white" },
+    className: 'card',
+    base: { color: 'white' },
     variants: {
       size: {
-        small: { fontSize: "14px" },
-        large: { fontSize: "18px" },
+        small: { fontSize: '14px' },
+        large: { fontSize: '18px' },
       },
       visual: {
-        primary: { backgroundColor: "blue" },
-        secondary: { backgroundColor: "gray" },
+        primary: { backgroundColor: 'blue' },
+        secondary: { backgroundColor: 'gray' },
       },
     },
-  });
+  })
 
   export default defineConfig({
     // ...
     staticCss: {
       recipes: {
-        card: ["*"], // this
+        card: ['*'], // this
 
         // was equivalent to:
         card: [
           // notice how `responsive: true` was implicitly added
-          { size: ["*"], responsive: true },
-          { visual: ["*"], responsive: true },
+          { size: ['*'], responsive: true },
+          { visual: ['*'], responsive: true },
         ],
 
         //   will now correctly be equivalent to:
-        card: [{ size: ["*"] }, { visual: ["*"] }],
+        card: [{ size: ['*'] }, { visual: ['*'] }],
       },
     },
-  });
+  })
   ```
 
   Here's the diff in the generated CSS:
@@ -3738,30 +3668,30 @@ export default defineConfig({
   another file, such as when using `Ark-UI` like `import { comboboxAnatomy } from '@ark-ui/anatomy'`
 
   ```ts
-  import { sva } from "../styled-system/css";
-  import { slots } from "./slots";
+  import { sva } from '../styled-system/css'
+  import { slots } from './slots'
 
   const card = sva({
     slots, // ❌ did NOT work -> ✅ will now work as expected
     base: {
       root: {
-        p: "6",
-        m: "4",
-        w: "md",
-        boxShadow: "md",
-        borderRadius: "md",
-        _dark: { bg: "#262626", color: "white" },
+        p: '6',
+        m: '4',
+        w: 'md',
+        boxShadow: 'md',
+        borderRadius: 'md',
+        _dark: { bg: '#262626', color: 'white' },
       },
       content: {
-        textStyle: "lg",
+        textStyle: 'lg',
       },
       title: {
-        textStyle: "xl",
-        fontWeight: "semibold",
-        pb: "2",
+        textStyle: 'xl',
+        fontWeight: 'semibold',
+        pb: '2',
       },
     },
-  });
+  })
   ```
 
 - 840ed66b: Fix an issue with config change detection when using a custom `config.slotRecipes[xxx].jsx` array
@@ -3818,18 +3748,18 @@ export default defineConfig({
   and suffixing with `]`, e.g. writing `[123px]` as a value will bypass the token validation.
 
   ```ts
-  import { css } from "../styled-system/css";
+  import { css } from '../styled-system/css'
 
   css({
     // @ts-expect-error TS will throw when using from strictTokens: true
-    color: "#fff",
+    color: '#fff',
     // @ts-expect-error TS will throw when using from strictTokens: true
-    width: "100px",
+    width: '100px',
 
     // ✅ but this is now allowed:
-    bgColor: "[rgb(51 155 240)]",
-    fontSize: "[12px]",
-  });
+    bgColor: '[rgb(51 155 240)]',
+    fontSize: '[12px]',
+  })
   ```
 
 ### Patch Changes
@@ -3842,8 +3772,8 @@ export default defineConfig({
     // here the content property is a valid CSS property, so Panda will try to generate the CSS for it
     // but since it's an URL, it would produce invalid CSS
     // we now check if the property value is an URL and skip it if needed
-    return <CopyButton content="https://www.buymeacoffee.com/grizzlycodes" />;
-  };
+    return <CopyButton content="https://www.buymeacoffee.com/grizzlycodes" />
+  }
   ```
 
 - d81dcbe6: - Fix an issue where recipe variants that clash with utility shorthand don't get generated due to the
@@ -3852,36 +3782,36 @@ export default defineConfig({
 - 105f74ce: Add a way to specify a recipe's `staticCss` options from inside a recipe config, e.g.:
 
   ```js
-  import { defineRecipe } from "@pandacss/dev";
+  import { defineRecipe } from '@pandacss/dev'
 
   const card = defineRecipe({
-    className: "card",
-    base: { color: "white" },
+    className: 'card',
+    base: { color: 'white' },
     variants: {
       size: {
-        small: { fontSize: "14px" },
-        large: { fontSize: "18px" },
+        small: { fontSize: '14px' },
+        large: { fontSize: '18px' },
       },
     },
-    staticCss: [{ size: ["*"] }],
-  });
+    staticCss: [{ size: ['*'] }],
+  })
   ```
 
   would be the equivalent of defining it inside the main config:
 
   ```js
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
     staticCss: {
       recipes: {
         card: {
-          size: ["*"],
+          size: ['*'],
         },
       },
     },
-  });
+  })
   ```
 
 - Updated dependencies [26e6051a]
@@ -3913,13 +3843,13 @@ export default defineConfig({
 
   ```ts
   css({
-    "@container (min-width: token(sizes.xl))": {
-      color: "green.300",
+    '@container (min-width: token(sizes.xl))': {
+      color: 'green.300',
     },
-    "@media (min-width: token(sizes.2xl))": {
-      color: "red.300",
+    '@media (min-width: token(sizes.2xl))': {
+      color: 'red.300',
     },
-  });
+  })
   ```
 
 - Updated dependencies [24ee49a5]
@@ -3971,14 +3901,14 @@ export default defineConfig({
 - 8c76cd0f: - Fix issue where `hideBelow` breakpoints are inclusive of the specified breakpoints
 
   ```jsx
-  css({ hideBelow: "lg" });
+  css({ hideBelow: 'lg' })
   // => @media screen and (max-width: 63.9975em) { background: red; }
   ```
 
   - Support arbitrary breakpoints in `hideBelow` and `hideFrom` utilities
 
   ```jsx
-  css({ hideFrom: "800px" });
+  css({ hideFrom: '800px' })
   // => @media screen and (min-width: 800px) { background: red; }
   ```
 
@@ -4064,10 +3994,10 @@ export default defineConfig({
 
   ```ts
   const button = defineSlotRecipe({
-    className: "button",
-    slots: ["root", "icon", "label"],
+    className: 'button',
+    slots: ['root', 'icon', 'label'],
     // ...
-  });
+  })
   ```
 
   will have a default `jsx` property of: `[Button, Button.Root, Button.Icon, Button.Label]`
@@ -4124,42 +4054,42 @@ export default defineConfig({
 
   ```ts
   export default defineConfig({
-    outdir: "./outdir",
+    outdir: './outdir',
     importMap: {
-      css: "#panda/styled-system/css",
-      recipes: "#panda/styled-system/recipes",
-      patterns: "#panda/styled-system/patterns",
-      jsx: "#panda/styled-system/jsx",
+      css: '#panda/styled-system/css',
+      recipes: '#panda/styled-system/recipes',
+      patterns: '#panda/styled-system/patterns',
+      jsx: '#panda/styled-system/jsx',
     },
-  });
+  })
   ```
 
   Or you could also make your outdir an actual package from your monorepo:
 
   ```ts
   export default defineConfig({
-    outdir: "../packages/styled-system",
+    outdir: '../packages/styled-system',
     importMap: {
-      css: "@monorepo/styled-system",
-      recipes: "@monorepo/styled-system",
-      patterns: "@monorepo/styled-system",
-      jsx: "@monorepo/styled-system",
+      css: '@monorepo/styled-system',
+      recipes: '@monorepo/styled-system',
+      patterns: '@monorepo/styled-system',
+      jsx: '@monorepo/styled-system',
     },
-  });
+  })
   ```
 
   Working with tsconfig paths aliases is easy:
 
   ```ts
   export default defineConfig({
-    outdir: "styled-system",
+    outdir: 'styled-system',
     importMap: {
-      css: "styled-system/css",
-      recipes: "styled-system/recipes",
-      patterns: "styled-system/patterns",
-      jsx: "styled-system/jsx",
+      css: 'styled-system/css',
+      recipes: 'styled-system/recipes',
+      patterns: 'styled-system/patterns',
+      jsx: 'styled-system/jsx',
     },
-  });
+  })
   ```
 
 - Updated dependencies [95b06bb1]
@@ -4189,13 +4119,13 @@ export default defineConfig({
 - 848936e0: Allow referencing tokens with the `token()` function in media queries or any other CSS at-rule.
 
   ```js
-  import { css } from "../styled-system/css";
+  import { css } from '../styled-system/css'
 
   const className = css({
-    "@media screen and (min-width: token(sizes.4xl))": {
-      color: "green.400",
+    '@media screen and (min-width: token(sizes.4xl))': {
+      color: 'green.400',
     },
-  });
+  })
   ```
 
 - Updated dependencies [26f6982c]
@@ -4248,7 +4178,7 @@ export default defineConfig({
 
   ```css
   * {
-    color: token("colors.magenta", pink);
+    color: token('colors.magenta', pink);
   }
   ```
 
@@ -4357,12 +4287,12 @@ export default defineConfig({
   **Definition**
 
   ```jsx
-  import { sva } from "styled-system/css";
+  import { sva } from 'styled-system/css'
 
   const button = sva({
-    slots: ["label", "icon"],
+    slots: ['label', 'icon'],
     base: {
-      label: { color: "red", textDecoration: "underline" },
+      label: { color: 'red', textDecoration: 'underline' },
     },
     variants: {
       rounded: {
@@ -4370,33 +4300,33 @@ export default defineConfig({
       },
       size: {
         sm: {
-          label: { fontSize: "sm" },
-          icon: { fontSize: "sm" },
+          label: { fontSize: 'sm' },
+          icon: { fontSize: 'sm' },
         },
         lg: {
-          label: { fontSize: "lg" },
-          icon: { fontSize: "lg", color: "pink" },
+          label: { fontSize: 'lg' },
+          icon: { fontSize: 'lg', color: 'pink' },
         },
       },
     },
     defaultVariants: {
-      size: "sm",
+      size: 'sm',
     },
-  });
+  })
   ```
 
   **Usage**
 
   ```jsx
   export function App() {
-    const btnClass = button({ size: "lg", rounded: true });
+    const btnClass = button({ size: 'lg', rounded: true })
 
     return (
       <button>
         <p class={btnClass.label}> Label</p>
         <p class={btnClass.icon}> Icon</p>
       </button>
-    );
+    )
   }
   ```
 
@@ -4445,26 +4375,26 @@ export default defineConfig({
   Update the `jsx` property to be used for advanced tracking of custom pattern components.
 
   ```jsx
-  import { Circle } from "styled-system/jsx";
+  import { Circle } from 'styled-system/jsx'
   const CustomCircle = ({ children, ...props }) => {
-    return <Circle {...props}>{children}</Circle>;
-  };
+    return <Circle {...props}>{children}</Circle>
+  }
   ```
 
   To track the `CustomCircle` component, you can now use the `jsx` property.
 
   ```js
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     patterns: {
       extend: {
         circle: {
-          jsx: ["CustomCircle"],
+          jsx: ['CustomCircle'],
         },
       },
     },
-  });
+  })
   ```
 
 ### Patch Changes
@@ -4528,17 +4458,9 @@ export default defineConfig({
   ```tsx
   const ComponentWithMultipleRecipes = ({ variant }) => {
     return (
-      <button
-        className={cx(
-          pinkRecipe({ variant }),
-          greenRecipe({ variant }),
-          blueRecipe({ variant }),
-        )}
-      >
-        Hello
-      </button>
-    );
-  };
+      <button className={cx(pinkRecipe({ variant }), greenRecipe({ variant }), blueRecipe({ variant }))}>Hello</button>
+    )
+  }
   ```
 
   Given a `panda.config.ts` with recipes each including a common `jsx` tag name, such as:
@@ -4605,7 +4527,7 @@ export default defineConfig({
   ```ts
   staticCss: {
     recipes: {
-      button: [{ size: ["*"], shape: ["*"] }];
+      button: [{ size: ['*'], shape: ['*'] }]
     }
   }
   ```
@@ -4615,7 +4537,7 @@ export default defineConfig({
   ```ts
   staticCss: {
     recipes: {
-      button: ["*"];
+      button: ['*']
     }
   }
   ```
@@ -4651,12 +4573,12 @@ export default defineConfig({
 - 5b344b9c: Add support for disabling shorthand props
 
   ```ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
     shorthands: false,
-  });
+  })
   ```
 
 ### Patch Changes
@@ -4760,20 +4682,20 @@ Will now allow you to use the following syntax for token path:
   export default defaultConfig({
     conditions: {
       extend: {
-        supportHover: ["@media (hover: hover) and (pointer: fine)", "&:hover"],
+        supportHover: ['@media (hover: hover) and (pointer: fine)', '&:hover'],
       },
     },
-  });
+  })
   ```
 
   ```ts
-  import { css } from "../styled-system/css";
+  import { css } from '../styled-system/css'
 
   css({
     _supportHover: {
-      color: "red",
+      color: 'red',
     },
-  });
+  })
   ```
 
   will generate the following CSS:
@@ -4789,25 +4711,25 @@ Will now allow you to use the following syntax for token path:
 - 31071ba: Fix an issue for token names starting with '0'
 
   ```ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     theme: {
       tokens: {
         spacing: {
-          "025": {
-            value: "0.125rem",
+          '025': {
+            value: '0.125rem',
           },
         },
       },
     },
-  });
+  })
   ```
 
   and then using it like
 
   ```ts
-  css({ margin: "025" });
+  css({ margin: '025' })
   ```
 
   This would not generate the expected CSS because the parser would try to parse `025` as a number (`25`) instead of
@@ -4818,11 +4740,11 @@ Will now allow you to use the following syntax for token path:
   - Allow using multiple aliases for the same identifier for the `/css` entrypoints just like `/patterns` and `/recipes`
 
   ```ts
-  import { css } from "../styled-system/css";
-  import { css as css2 } from "../styled-system/css";
+  import { css } from '../styled-system/css'
+  import { css as css2 } from '../styled-system/css'
 
-  css({ display: "flex" });
-  css2({ flexDirection: "column" }); // this wasn't working before, now it does
+  css({ display: 'flex' })
+  css2({ flexDirection: 'column' }) // this wasn't working before, now it does
   ```
 
 - Updated dependencies [a032375]
@@ -4866,10 +4788,10 @@ Will now allow you to use the following syntax for token path:
 
   ```ts
   css({
-    padding: "1px",
-    paddingTop: "3px",
-    paddingBottom: "4px",
-  });
+    padding: '1px',
+    paddingTop: '3px',
+    paddingBottom: '4px',
+  })
   ```
 
   Will now always generate the following css:
@@ -4930,17 +4852,16 @@ Will now allow you to use the following syntax for token path:
   export default defineConfig({
     // ...
     hooks: {
-      "parser:before": ({ configure }) => {
+      'parser:before': ({ configure }) => {
         configure({
           // ignore the Select.Content entirely
-          matchTag: (tag) => tag !== "Select.Content",
+          matchTag: (tag) => tag !== 'Select.Content',
           // ...or specifically ignore the `position` property
-          matchTagProp: (tag, prop) =>
-            tag === "Select.Content" && prop !== "position",
-        });
+          matchTagProp: (tag, prop) => tag === 'Select.Content' && prop !== 'position',
+        })
       },
     },
-  });
+  })
   ```
 
 - Updated dependencies [6b829cab]
@@ -5008,9 +4929,9 @@ Will now allow you to use the following syntax for token path:
 
   ```ts
   css({
-    bg: "red.300/40",
-    color: "white",
-  });
+    bg: 'red.300/40',
+    color: 'white',
+  })
   ```
 
   This will generate:
@@ -5018,11 +4939,7 @@ Will now allow you to use the following syntax for token path:
   ```css
   @layer utilities {
     .bg_red\.300\/40 {
-      --mix-background: color-mix(
-        in srgb,
-        var(--colors-red-300) 40%,
-        transparent
-      );
+      --mix-background: color-mix(in srgb, var(--colors-red-300) 40%, transparent);
       background: var(--mix-background, var(--colors-red-300));
     }
 
@@ -5046,21 +4963,21 @@ Will now allow you to use the following syntax for token path:
   export default defineConfig({
     utilities: {
       background: {
-        shorthand: "bg",
-        className: "bg",
-        values: "colors",
+        shorthand: 'bg',
+        className: 'bg',
+        values: 'colors',
         transform(value, args) {
-          const mix = args.utils.colorMix(value);
+          const mix = args.utils.colorMix(value)
           // This can happen if the value format is invalid (e.g. `bg: red.300/invalid` or `bg: red.300//10`)
-          if (mix.invalid) return { background: value };
+          if (mix.invalid) return { background: value }
 
           return {
             background: mix.value,
-          };
+          }
         },
       },
     },
-  });
+  })
   ```
 
   ***
@@ -5069,21 +4986,21 @@ Will now allow you to use the following syntax for token path:
   property:
 
   ```ts
-  import type { PropertyTransform } from "@pandacss/types";
+  import type { PropertyTransform } from '@pandacss/types'
 
   export const createColorMixTransform =
     (prop: string): PropertyTransform =>
     (value, args) => {
-      const mix = args.utils.colorMix(value);
-      if (mix.invalid) return { [prop]: value };
+      const mix = args.utils.colorMix(value)
+      if (mix.invalid) return { [prop]: value }
 
-      const cssVar = "--mix-" + prop;
+      const cssVar = '--mix-' + prop
 
       return {
         [cssVar]: mix.value,
         [prop]: `var(${cssVar}, ${mix.color})`,
-      };
-    };
+      }
+    }
   ```
 
   then the same utility transform as above can be written like this:
@@ -5109,24 +5026,24 @@ Will now allow you to use the following syntax for token path:
     patterns: {
       hstack: {
         properties: {
-          justify: { type: "property", value: "justifyContent" },
-          gap: { type: "property", value: "gap" },
+          justify: { type: 'property', value: 'justifyContent' },
+          gap: { type: 'property', value: 'gap' },
         },
         // you can also use a token like '10'
-        defaultValues: { gap: "40px" },
+        defaultValues: { gap: '40px' },
         transform(props) {
-          const { justify, gap, ...rest } = props;
+          const { justify, gap, ...rest } = props
           return {
-            display: "flex",
-            alignItems: "center",
+            display: 'flex',
+            alignItems: 'center',
             justifyContent: justify,
             gap,
             ...rest,
-          };
+          }
         },
       },
     },
-  });
+  })
   ```
 
 - 250b4d11: ### Container Query Theme
@@ -5140,34 +5057,34 @@ Will now allow you to use the following syntax for token path:
     // ...
     theme: {
       extend: {
-        containerNames: ["sidebar", "content"],
+        containerNames: ['sidebar', 'content'],
         containerSizes: {
-          xs: "40em",
-          sm: "60em",
-          md: "80em",
+          xs: '40em',
+          sm: '60em',
+          md: '80em',
         },
       },
     },
-  });
+  })
   ```
 
   The default container sizes in the `@pandacss/preset-panda` preset are shown below:
 
   ```ts
   export const containerSizes = {
-    xs: "320px",
-    sm: "384px",
-    md: "448px",
-    lg: "512px",
-    xl: "576px",
-    "2xl": "672px",
-    "3xl": "768px",
-    "4xl": "896px",
-    "5xl": "1024px",
-    "6xl": "1152px",
-    "7xl": "1280px",
-    "8xl": "1440px",
-  };
+    xs: '320px',
+    sm: '384px',
+    md: '448px',
+    lg: '512px',
+    xl: '576px',
+    '2xl': '672px',
+    '3xl': '768px',
+    '4xl': '896px',
+    '5xl': '1024px',
+    '6xl': '1152px',
+    '7xl': '1280px',
+    '8xl': '1440px',
+  }
   ```
 
   Then use them in your styles by referencing using `@<container-name>/<container-size>` syntax:
@@ -5251,10 +5168,10 @@ Will now allow you to use the following syntax for token path:
   css({
     // ✅ this is fine now, will resolve to something like
     // `@container (min-width: 56em)`
-    "@container (min-width: {sizes.4xl})": {
-      color: "green",
+    '@container (min-width: {sizes.4xl})': {
+      color: 'green',
     },
-  });
+  })
   ```
 
   Fix an issue where the curly token references would not be escaped if the token path was not found.
@@ -5293,54 +5210,39 @@ Will now allow you to use the following syntax for token path:
      * Called when the config is resolved, after all the presets are loaded and merged.
      * This is the first hook called, you can use it to tweak the config before the context is created.
      */
-    "config:resolved": (args: { conf: LoadConfigResult }) => MaybeAsyncReturn;
+    'config:resolved': (args: { conf: LoadConfigResult }) => MaybeAsyncReturn
     /**
      * Called when the Panda context has been created and the API is ready to be used.
      */
-    "context:created": (args: {
-      ctx: ApiInterface;
-      logger: LoggerInterface;
-    }) => void;
+    'context:created': (args: { ctx: ApiInterface; logger: LoggerInterface }) => void
     /**
      * Called when the config file or one of its dependencies (imports) has changed.
      */
-    "config:change": (args: { config: UserConfig }) => MaybeAsyncReturn;
+    'config:change': (args: { config: UserConfig }) => MaybeAsyncReturn
     /**
      * Called after reading the file content but before parsing it.
      * You can use this hook to transform the file content to a tsx-friendly syntax so that Panda's parser can parse it.
      * You can also use this hook to parse the file's content on your side using a custom parser, in this case you don't have to return anything.
      */
-    "parser:before": (args: {
-      filePath: string;
-      content: string;
-    }) => string | void;
+    'parser:before': (args: { filePath: string; content: string }) => string | void
     /**
      * Called after the file styles are extracted and processed into the resulting ParserResult object.
      * You can also use this hook to add your own extraction results from your custom parser to the ParserResult object.
      */
-    "parser:after": (args: {
-      filePath: string;
-      result: ParserResultInterface | undefined;
-    }) => void;
+    'parser:after': (args: { filePath: string; result: ParserResultInterface | undefined }) => void
     /**
      * Called after the codegen is completed
      */
-    "codegen:done": () => MaybeAsyncReturn;
+    'codegen:done': () => MaybeAsyncReturn
     /**
      * Called right before adding the design-system CSS (global, static, preflight, tokens, keyframes) to the final CSS
      * Called right before writing/injecting the final CSS (styles.css) that contains the design-system CSS and the parser CSS
      * You can use it to tweak the CSS content before it's written to disk or injected through the postcss plugin.
      */
-    "cssgen:done": (args: {
-      artifact:
-        | "global"
-        | "static"
-        | "reset"
-        | "tokens"
-        | "keyframes"
-        | "styles.css";
-      content: string;
-    }) => string | void;
+    'cssgen:done': (args: {
+      artifact: 'global' | 'static' | 'reset' | 'tokens' | 'keyframes' | 'styles.css'
+      content: string
+    }) => string | void
   }
   ```
 
@@ -5547,11 +5449,11 @@ Will now allow you to use the following syntax for token path:
 - de282f60: Support token reference syntax when authoring styles object, text styles and layer styles.
 
   ```jsx
-  import { css } from "../styled-system/css";
+  import { css } from '../styled-system/css'
 
   const styles = css({
-    border: "2px solid {colors.primary}",
-  });
+    border: '2px solid {colors.primary}',
+  })
   ```
 
   This will resolve the token reference and convert it to css variables.
@@ -5571,18 +5473,18 @@ Will now allow you to use the following syntax for token path:
   ```jsx
   const styles = css({
     // token reference syntax
-    border: "2px solid {colors.primary}",
+    border: '2px solid {colors.primary}',
     // token function syntax
-    border: "2px solid token(colors.primary)",
-  });
+    border: '2px solid token(colors.primary)',
+  })
   ```
 
   However, The `token(...)` syntax allows you to set a fallback value.
 
   ```jsx
   const styles = css({
-    border: "2px solid token(colors.primary, red)",
-  });
+    border: '2px solid token(colors.primary, red)',
+  })
   ```
 
 ### Patch Changes
@@ -5593,8 +5495,8 @@ Will now allow you to use the following syntax for token path:
   ```jsx
   css({
     // This didn't work, but now it does
-    base: { color: "blue" },
-  });
+    base: { color: 'blue' },
+  })
   ```
 
 - Updated dependencies [59fd291c]
@@ -5653,38 +5555,38 @@ Will now allow you to use the following syntax for token path:
 
   ```ts
   const card = defineRecipe({
-    className: "card",
-    base: { color: "white" },
+    className: 'card',
+    base: { color: 'white' },
     variants: {
       size: {
-        small: { fontSize: "14px" },
-        large: { fontSize: "18px" },
+        small: { fontSize: '14px' },
+        large: { fontSize: '18px' },
       },
       visual: {
-        primary: { backgroundColor: "blue" },
-        secondary: { backgroundColor: "gray" },
+        primary: { backgroundColor: 'blue' },
+        secondary: { backgroundColor: 'gray' },
       },
     },
-  });
+  })
 
   export default defineConfig({
     // ...
     staticCss: {
       recipes: {
-        card: ["*"], // this
+        card: ['*'], // this
 
         // was equivalent to:
         card: [
           // notice how `responsive: true` was implicitly added
-          { size: ["*"], responsive: true },
-          { visual: ["*"], responsive: true },
+          { size: ['*'], responsive: true },
+          { visual: ['*'], responsive: true },
         ],
 
         //   will now correctly be equivalent to:
-        card: [{ size: ["*"] }, { visual: ["*"] }],
+        card: [{ size: ['*'] }, { visual: ['*'] }],
       },
     },
-  });
+  })
   ```
 
   Here's the diff in the generated CSS:
@@ -5810,30 +5712,30 @@ Will now allow you to use the following syntax for token path:
   another file, such as when using `Ark-UI` like `import { comboboxAnatomy } from '@ark-ui/anatomy'`
 
   ```ts
-  import { sva } from "../styled-system/css";
-  import { slots } from "./slots";
+  import { sva } from '../styled-system/css'
+  import { slots } from './slots'
 
   const card = sva({
     slots, // ❌ did NOT work -> ✅ will now work as expected
     base: {
       root: {
-        p: "6",
-        m: "4",
-        w: "md",
-        boxShadow: "md",
-        borderRadius: "md",
-        _dark: { bg: "#262626", color: "white" },
+        p: '6',
+        m: '4',
+        w: 'md',
+        boxShadow: 'md',
+        borderRadius: 'md',
+        _dark: { bg: '#262626', color: 'white' },
       },
       content: {
-        textStyle: "lg",
+        textStyle: 'lg',
       },
       title: {
-        textStyle: "xl",
-        fontWeight: "semibold",
-        pb: "2",
+        textStyle: 'xl',
+        fontWeight: 'semibold',
+        pb: '2',
       },
     },
-  });
+  })
   ```
 
 - 840ed66b: Fix an issue with config change detection when using a custom `config.slotRecipes[xxx].jsx` array
@@ -5890,18 +5792,18 @@ Will now allow you to use the following syntax for token path:
   and suffixing with `]`, e.g. writing `[123px]` as a value will bypass the token validation.
 
   ```ts
-  import { css } from "../styled-system/css";
+  import { css } from '../styled-system/css'
 
   css({
     // @ts-expect-error TS will throw when using from strictTokens: true
-    color: "#fff",
+    color: '#fff',
     // @ts-expect-error TS will throw when using from strictTokens: true
-    width: "100px",
+    width: '100px',
 
     // ✅ but this is now allowed:
-    bgColor: "[rgb(51 155 240)]",
-    fontSize: "[12px]",
-  });
+    bgColor: '[rgb(51 155 240)]',
+    fontSize: '[12px]',
+  })
   ```
 
 ### Patch Changes
@@ -5914,8 +5816,8 @@ Will now allow you to use the following syntax for token path:
     // here the content property is a valid CSS property, so Panda will try to generate the CSS for it
     // but since it's an URL, it would produce invalid CSS
     // we now check if the property value is an URL and skip it if needed
-    return <CopyButton content="https://www.buymeacoffee.com/grizzlycodes" />;
-  };
+    return <CopyButton content="https://www.buymeacoffee.com/grizzlycodes" />
+  }
   ```
 
 - d81dcbe6: - Fix an issue where recipe variants that clash with utility shorthand don't get generated due to the
@@ -5924,36 +5826,36 @@ Will now allow you to use the following syntax for token path:
 - 105f74ce: Add a way to specify a recipe's `staticCss` options from inside a recipe config, e.g.:
 
   ```js
-  import { defineRecipe } from "@pandacss/dev";
+  import { defineRecipe } from '@pandacss/dev'
 
   const card = defineRecipe({
-    className: "card",
-    base: { color: "white" },
+    className: 'card',
+    base: { color: 'white' },
     variants: {
       size: {
-        small: { fontSize: "14px" },
-        large: { fontSize: "18px" },
+        small: { fontSize: '14px' },
+        large: { fontSize: '18px' },
       },
     },
-    staticCss: [{ size: ["*"] }],
-  });
+    staticCss: [{ size: ['*'] }],
+  })
   ```
 
   would be the equivalent of defining it inside the main config:
 
   ```js
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
     staticCss: {
       recipes: {
         card: {
-          size: ["*"],
+          size: ['*'],
         },
       },
     },
-  });
+  })
   ```
 
 - Updated dependencies [26e6051a]
@@ -5985,13 +5887,13 @@ Will now allow you to use the following syntax for token path:
 
   ```ts
   css({
-    "@container (min-width: token(sizes.xl))": {
-      color: "green.300",
+    '@container (min-width: token(sizes.xl))': {
+      color: 'green.300',
     },
-    "@media (min-width: token(sizes.2xl))": {
-      color: "red.300",
+    '@media (min-width: token(sizes.2xl))': {
+      color: 'red.300',
     },
-  });
+  })
   ```
 
 - Updated dependencies [24ee49a5]
@@ -6043,14 +5945,14 @@ Will now allow you to use the following syntax for token path:
 - 8c76cd0f: - Fix issue where `hideBelow` breakpoints are inclusive of the specified breakpoints
 
   ```jsx
-  css({ hideBelow: "lg" });
+  css({ hideBelow: 'lg' })
   // => @media screen and (max-width: 63.9975em) { background: red; }
   ```
 
   - Support arbitrary breakpoints in `hideBelow` and `hideFrom` utilities
 
   ```jsx
-  css({ hideFrom: "800px" });
+  css({ hideFrom: '800px' })
   // => @media screen and (min-width: 800px) { background: red; }
   ```
 
@@ -6136,10 +6038,10 @@ Will now allow you to use the following syntax for token path:
 
   ```ts
   const button = defineSlotRecipe({
-    className: "button",
-    slots: ["root", "icon", "label"],
+    className: 'button',
+    slots: ['root', 'icon', 'label'],
     // ...
-  });
+  })
   ```
 
   will have a default `jsx` property of: `[Button, Button.Root, Button.Icon, Button.Label]`
@@ -6196,42 +6098,42 @@ Will now allow you to use the following syntax for token path:
 
   ```ts
   export default defineConfig({
-    outdir: "./outdir",
+    outdir: './outdir',
     importMap: {
-      css: "#panda/styled-system/css",
-      recipes: "#panda/styled-system/recipes",
-      patterns: "#panda/styled-system/patterns",
-      jsx: "#panda/styled-system/jsx",
+      css: '#panda/styled-system/css',
+      recipes: '#panda/styled-system/recipes',
+      patterns: '#panda/styled-system/patterns',
+      jsx: '#panda/styled-system/jsx',
     },
-  });
+  })
   ```
 
   Or you could also make your outdir an actual package from your monorepo:
 
   ```ts
   export default defineConfig({
-    outdir: "../packages/styled-system",
+    outdir: '../packages/styled-system',
     importMap: {
-      css: "@monorepo/styled-system",
-      recipes: "@monorepo/styled-system",
-      patterns: "@monorepo/styled-system",
-      jsx: "@monorepo/styled-system",
+      css: '@monorepo/styled-system',
+      recipes: '@monorepo/styled-system',
+      patterns: '@monorepo/styled-system',
+      jsx: '@monorepo/styled-system',
     },
-  });
+  })
   ```
 
   Working with tsconfig paths aliases is easy:
 
   ```ts
   export default defineConfig({
-    outdir: "styled-system",
+    outdir: 'styled-system',
     importMap: {
-      css: "styled-system/css",
-      recipes: "styled-system/recipes",
-      patterns: "styled-system/patterns",
-      jsx: "styled-system/jsx",
+      css: 'styled-system/css',
+      recipes: 'styled-system/recipes',
+      patterns: 'styled-system/patterns',
+      jsx: 'styled-system/jsx',
     },
-  });
+  })
   ```
 
 - Updated dependencies [95b06bb1]
@@ -6261,13 +6163,13 @@ Will now allow you to use the following syntax for token path:
 - 848936e0: Allow referencing tokens with the `token()` function in media queries or any other CSS at-rule.
 
   ```js
-  import { css } from "../styled-system/css";
+  import { css } from '../styled-system/css'
 
   const className = css({
-    "@media screen and (min-width: token(sizes.4xl))": {
-      color: "green.400",
+    '@media screen and (min-width: token(sizes.4xl))': {
+      color: 'green.400',
     },
-  });
+  })
   ```
 
 - Updated dependencies [26f6982c]
@@ -6320,7 +6222,7 @@ Will now allow you to use the following syntax for token path:
 
   ```css
   * {
-    color: token("colors.magenta", pink);
+    color: token('colors.magenta', pink);
   }
   ```
 
@@ -6429,12 +6331,12 @@ Will now allow you to use the following syntax for token path:
   **Definition**
 
   ```jsx
-  import { sva } from "styled-system/css";
+  import { sva } from 'styled-system/css'
 
   const button = sva({
-    slots: ["label", "icon"],
+    slots: ['label', 'icon'],
     base: {
-      label: { color: "red", textDecoration: "underline" },
+      label: { color: 'red', textDecoration: 'underline' },
     },
     variants: {
       rounded: {
@@ -6442,33 +6344,33 @@ Will now allow you to use the following syntax for token path:
       },
       size: {
         sm: {
-          label: { fontSize: "sm" },
-          icon: { fontSize: "sm" },
+          label: { fontSize: 'sm' },
+          icon: { fontSize: 'sm' },
         },
         lg: {
-          label: { fontSize: "lg" },
-          icon: { fontSize: "lg", color: "pink" },
+          label: { fontSize: 'lg' },
+          icon: { fontSize: 'lg', color: 'pink' },
         },
       },
     },
     defaultVariants: {
-      size: "sm",
+      size: 'sm',
     },
-  });
+  })
   ```
 
   **Usage**
 
   ```jsx
   export function App() {
-    const btnClass = button({ size: "lg", rounded: true });
+    const btnClass = button({ size: 'lg', rounded: true })
 
     return (
       <button>
         <p class={btnClass.label}> Label</p>
         <p class={btnClass.icon}> Icon</p>
       </button>
-    );
+    )
   }
   ```
 
@@ -6517,26 +6419,26 @@ Will now allow you to use the following syntax for token path:
   Update the `jsx` property to be used for advanced tracking of custom pattern components.
 
   ```jsx
-  import { Circle } from "styled-system/jsx";
+  import { Circle } from 'styled-system/jsx'
   const CustomCircle = ({ children, ...props }) => {
-    return <Circle {...props}>{children}</Circle>;
-  };
+    return <Circle {...props}>{children}</Circle>
+  }
   ```
 
   To track the `CustomCircle` component, you can now use the `jsx` property.
 
   ```js
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     patterns: {
       extend: {
         circle: {
-          jsx: ["CustomCircle"],
+          jsx: ['CustomCircle'],
         },
       },
     },
-  });
+  })
   ```
 
 ### Patch Changes
@@ -6600,17 +6502,9 @@ Will now allow you to use the following syntax for token path:
   ```tsx
   const ComponentWithMultipleRecipes = ({ variant }) => {
     return (
-      <button
-        className={cx(
-          pinkRecipe({ variant }),
-          greenRecipe({ variant }),
-          blueRecipe({ variant }),
-        )}
-      >
-        Hello
-      </button>
-    );
-  };
+      <button className={cx(pinkRecipe({ variant }), greenRecipe({ variant }), blueRecipe({ variant }))}>Hello</button>
+    )
+  }
   ```
 
   Given a `panda.config.ts` with recipes each including a common `jsx` tag name, such as:
@@ -6677,7 +6571,7 @@ Will now allow you to use the following syntax for token path:
   ```ts
   staticCss: {
     recipes: {
-      button: [{ size: ["*"], shape: ["*"] }];
+      button: [{ size: ['*'], shape: ['*'] }]
     }
   }
   ```
@@ -6687,7 +6581,7 @@ Will now allow you to use the following syntax for token path:
   ```ts
   staticCss: {
     recipes: {
-      button: ["*"];
+      button: ['*']
     }
   }
   ```
@@ -6723,12 +6617,12 @@ Will now allow you to use the following syntax for token path:
 - 5b344b9c: Add support for disabling shorthand props
 
   ```ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
     shorthands: false,
-  });
+  })
   ```
 
 ### Patch Changes
@@ -6830,11 +6724,11 @@ This hook is called right before writing the codegen files to disk. You can use
 export default defineConfig({
   // ...
   hooks: {
-    "codegen:prepare": ({ artifacts, changed }) => {
+    'codegen:prepare': ({ artifacts, changed }) => {
       // do something with the emitted js/d.ts files
     },
   },
-});
+})
 ```
 
 - d5977c24: - Add a `--logfile` flag to the `panda`, `panda codegen`, `panda cssgen` and `panda debug` commands.
@@ -6851,11 +6745,11 @@ export default defineConfig({
   ```js
   module.exports = {
     plugins: {
-      "@pandacss/dev/postcss": {
-        logfile: "./logs/panda.log",
+      '@pandacss/dev/postcss': {
+        logfile: './logs/panda.log',
       },
     },
-  };
+  }
   ```
 
 - Updated dependencies [74485ef1]
@@ -6894,9 +6788,9 @@ export default defineConfig({
 
   ```ts
   css({
-    bg: "red.300/40",
-    color: "white",
-  });
+    bg: 'red.300/40',
+    color: 'white',
+  })
   ```
 
   This will generate:
@@ -6904,11 +6798,7 @@ export default defineConfig({
   ```css
   @layer utilities {
     .bg_red\.300\/40 {
-      --mix-background: color-mix(
-        in srgb,
-        var(--colors-red-300) 40%,
-        transparent
-      );
+      --mix-background: color-mix(in srgb, var(--colors-red-300) 40%, transparent);
       background: var(--mix-background, var(--colors-red-300));
     }
 
@@ -6932,21 +6822,21 @@ export default defineConfig({
   export default defineConfig({
     utilities: {
       background: {
-        shorthand: "bg",
-        className: "bg",
-        values: "colors",
+        shorthand: 'bg',
+        className: 'bg',
+        values: 'colors',
         transform(value, args) {
-          const mix = args.utils.colorMix(value);
+          const mix = args.utils.colorMix(value)
           // This can happen if the value format is invalid (e.g. `bg: red.300/invalid` or `bg: red.300//10`)
-          if (mix.invalid) return { background: value };
+          if (mix.invalid) return { background: value }
 
           return {
             background: mix.value,
-          };
+          }
         },
       },
     },
-  });
+  })
   ```
 
   ***
@@ -6955,21 +6845,21 @@ export default defineConfig({
   property:
 
   ```ts
-  import type { PropertyTransform } from "@pandacss/types";
+  import type { PropertyTransform } from '@pandacss/types'
 
   export const createColorMixTransform =
     (prop: string): PropertyTransform =>
     (value, args) => {
-      const mix = args.utils.colorMix(value);
-      if (mix.invalid) return { [prop]: value };
+      const mix = args.utils.colorMix(value)
+      if (mix.invalid) return { [prop]: value }
 
-      const cssVar = "--mix-" + prop;
+      const cssVar = '--mix-' + prop
 
       return {
         [cssVar]: mix.value,
         [prop]: `var(${cssVar}, ${mix.color})`,
-      };
-    };
+      }
+    }
   ```
 
   then the same utility transform as above can be written like this:
@@ -6995,24 +6885,24 @@ export default defineConfig({
     patterns: {
       hstack: {
         properties: {
-          justify: { type: "property", value: "justifyContent" },
-          gap: { type: "property", value: "gap" },
+          justify: { type: 'property', value: 'justifyContent' },
+          gap: { type: 'property', value: 'gap' },
         },
         // you can also use a token like '10'
-        defaultValues: { gap: "40px" },
+        defaultValues: { gap: '40px' },
         transform(props) {
-          const { justify, gap, ...rest } = props;
+          const { justify, gap, ...rest } = props
           return {
-            display: "flex",
-            alignItems: "center",
+            display: 'flex',
+            alignItems: 'center',
             justifyContent: justify,
             gap,
             ...rest,
-          };
+          }
         },
       },
     },
-  });
+  })
   ```
 
 - 250b4d11: ### Container Query Theme
@@ -7026,34 +6916,34 @@ export default defineConfig({
     // ...
     theme: {
       extend: {
-        containerNames: ["sidebar", "content"],
+        containerNames: ['sidebar', 'content'],
         containerSizes: {
-          xs: "40em",
-          sm: "60em",
-          md: "80em",
+          xs: '40em',
+          sm: '60em',
+          md: '80em',
         },
       },
     },
-  });
+  })
   ```
 
   The default container sizes in the `@pandacss/preset-panda` preset are shown below:
 
   ```ts
   export const containerSizes = {
-    xs: "320px",
-    sm: "384px",
-    md: "448px",
-    lg: "512px",
-    xl: "576px",
-    "2xl": "672px",
-    "3xl": "768px",
-    "4xl": "896px",
-    "5xl": "1024px",
-    "6xl": "1152px",
-    "7xl": "1280px",
-    "8xl": "1440px",
-  };
+    xs: '320px',
+    sm: '384px',
+    md: '448px',
+    lg: '512px',
+    xl: '576px',
+    '2xl': '672px',
+    '3xl': '768px',
+    '4xl': '896px',
+    '5xl': '1024px',
+    '6xl': '1152px',
+    '7xl': '1280px',
+    '8xl': '1440px',
+  }
   ```
 
   Then use them in your styles by referencing using `@<container-name>/<container-size>` syntax:
@@ -7137,10 +7027,10 @@ export default defineConfig({
   css({
     // ✅ this is fine now, will resolve to something like
     // `@container (min-width: 56em)`
-    "@container (min-width: {sizes.4xl})": {
-      color: "green",
+    '@container (min-width: {sizes.4xl})': {
+      color: 'green',
     },
-  });
+  })
   ```
 
   Fix an issue where the curly token references would not be escaped if the token path was not found.
@@ -7179,54 +7069,39 @@ export default defineConfig({
      * Called when the config is resolved, after all the presets are loaded and merged.
      * This is the first hook called, you can use it to tweak the config before the context is created.
      */
-    "config:resolved": (args: { conf: LoadConfigResult }) => MaybeAsyncReturn;
+    'config:resolved': (args: { conf: LoadConfigResult }) => MaybeAsyncReturn
     /**
      * Called when the Panda context has been created and the API is ready to be used.
      */
-    "context:created": (args: {
-      ctx: ApiInterface;
-      logger: LoggerInterface;
-    }) => void;
+    'context:created': (args: { ctx: ApiInterface; logger: LoggerInterface }) => void
     /**
      * Called when the config file or one of its dependencies (imports) has changed.
      */
-    "config:change": (args: { config: UserConfig }) => MaybeAsyncReturn;
+    'config:change': (args: { config: UserConfig }) => MaybeAsyncReturn
     /**
      * Called after reading the file content but before parsing it.
      * You can use this hook to transform the file content to a tsx-friendly syntax so that Panda's parser can parse it.
      * You can also use this hook to parse the file's content on your side using a custom parser, in this case you don't have to return anything.
      */
-    "parser:before": (args: {
-      filePath: string;
-      content: string;
-    }) => string | void;
+    'parser:before': (args: { filePath: string; content: string }) => string | void
     /**
      * Called after the file styles are extracted and processed into the resulting ParserResult object.
      * You can also use this hook to add your own extraction results from your custom parser to the ParserResult object.
      */
-    "parser:after": (args: {
-      filePath: string;
-      result: ParserResultInterface | undefined;
-    }) => void;
+    'parser:after': (args: { filePath: string; result: ParserResultInterface | undefined }) => void
     /**
      * Called after the codegen is completed
      */
-    "codegen:done": () => MaybeAsyncReturn;
+    'codegen:done': () => MaybeAsyncReturn
     /**
      * Called right before adding the design-system CSS (global, static, preflight, tokens, keyframes) to the final CSS
      * Called right before writing/injecting the final CSS (styles.css) that contains the design-system CSS and the parser CSS
      * You can use it to tweak the CSS content before it's written to disk or injected through the postcss plugin.
      */
-    "cssgen:done": (args: {
-      artifact:
-        | "global"
-        | "static"
-        | "reset"
-        | "tokens"
-        | "keyframes"
-        | "styles.css";
-      content: string;
-    }) => string | void;
+    'cssgen:done': (args: {
+      artifact: 'global' | 'static' | 'reset' | 'tokens' | 'keyframes' | 'styles.css'
+      content: string
+    }) => string | void
   }
   ```
 
@@ -7433,11 +7308,11 @@ export default defineConfig({
 - de282f60: Support token reference syntax when authoring styles object, text styles and layer styles.
 
   ```jsx
-  import { css } from "../styled-system/css";
+  import { css } from '../styled-system/css'
 
   const styles = css({
-    border: "2px solid {colors.primary}",
-  });
+    border: '2px solid {colors.primary}',
+  })
   ```
 
   This will resolve the token reference and convert it to css variables.
@@ -7457,18 +7332,18 @@ export default defineConfig({
   ```jsx
   const styles = css({
     // token reference syntax
-    border: "2px solid {colors.primary}",
+    border: '2px solid {colors.primary}',
     // token function syntax
-    border: "2px solid token(colors.primary)",
-  });
+    border: '2px solid token(colors.primary)',
+  })
   ```
 
   However, The `token(...)` syntax allows you to set a fallback value.
 
   ```jsx
   const styles = css({
-    border: "2px solid token(colors.primary, red)",
-  });
+    border: '2px solid token(colors.primary, red)',
+  })
   ```
 
 ### Patch Changes
@@ -7479,8 +7354,8 @@ export default defineConfig({
   ```jsx
   css({
     // This didn't work, but now it does
-    base: { color: "blue" },
-  });
+    base: { color: 'blue' },
+  })
   ```
 
 - Updated dependencies [59fd291c]
@@ -7539,38 +7414,38 @@ export default defineConfig({
 
   ```ts
   const card = defineRecipe({
-    className: "card",
-    base: { color: "white" },
+    className: 'card',
+    base: { color: 'white' },
     variants: {
       size: {
-        small: { fontSize: "14px" },
-        large: { fontSize: "18px" },
+        small: { fontSize: '14px' },
+        large: { fontSize: '18px' },
       },
       visual: {
-        primary: { backgroundColor: "blue" },
-        secondary: { backgroundColor: "gray" },
+        primary: { backgroundColor: 'blue' },
+        secondary: { backgroundColor: 'gray' },
       },
     },
-  });
+  })
 
   export default defineConfig({
     // ...
     staticCss: {
       recipes: {
-        card: ["*"], // this
+        card: ['*'], // this
 
         // was equivalent to:
         card: [
           // notice how `responsive: true` was implicitly added
-          { size: ["*"], responsive: true },
-          { visual: ["*"], responsive: true },
+          { size: ['*'], responsive: true },
+          { visual: ['*'], responsive: true },
         ],
 
         //   will now correctly be equivalent to:
-        card: [{ size: ["*"] }, { visual: ["*"] }],
+        card: [{ size: ['*'] }, { visual: ['*'] }],
       },
     },
-  });
+  })
   ```
 
   Here's the diff in the generated CSS:
@@ -7696,30 +7571,30 @@ export default defineConfig({
   another file, such as when using `Ark-UI` like `import { comboboxAnatomy } from '@ark-ui/anatomy'`
 
   ```ts
-  import { sva } from "../styled-system/css";
-  import { slots } from "./slots";
+  import { sva } from '../styled-system/css'
+  import { slots } from './slots'
 
   const card = sva({
     slots, // ❌ did NOT work -> ✅ will now work as expected
     base: {
       root: {
-        p: "6",
-        m: "4",
-        w: "md",
-        boxShadow: "md",
-        borderRadius: "md",
-        _dark: { bg: "#262626", color: "white" },
+        p: '6',
+        m: '4',
+        w: 'md',
+        boxShadow: 'md',
+        borderRadius: 'md',
+        _dark: { bg: '#262626', color: 'white' },
       },
       content: {
-        textStyle: "lg",
+        textStyle: 'lg',
       },
       title: {
-        textStyle: "xl",
-        fontWeight: "semibold",
-        pb: "2",
+        textStyle: 'xl',
+        fontWeight: 'semibold',
+        pb: '2',
       },
     },
-  });
+  })
   ```
 
 - 840ed66b: Fix an issue with config change detection when using a custom `config.slotRecipes[xxx].jsx` array
@@ -7776,18 +7651,18 @@ export default defineConfig({
   and suffixing with `]`, e.g. writing `[123px]` as a value will bypass the token validation.
 
   ```ts
-  import { css } from "../styled-system/css";
+  import { css } from '../styled-system/css'
 
   css({
     // @ts-expect-error TS will throw when using from strictTokens: true
-    color: "#fff",
+    color: '#fff',
     // @ts-expect-error TS will throw when using from strictTokens: true
-    width: "100px",
+    width: '100px',
 
     // ✅ but this is now allowed:
-    bgColor: "[rgb(51 155 240)]",
-    fontSize: "[12px]",
-  });
+    bgColor: '[rgb(51 155 240)]',
+    fontSize: '[12px]',
+  })
   ```
 
 ### Patch Changes
@@ -7800,8 +7675,8 @@ export default defineConfig({
     // here the content property is a valid CSS property, so Panda will try to generate the CSS for it
     // but since it's an URL, it would produce invalid CSS
     // we now check if the property value is an URL and skip it if needed
-    return <CopyButton content="https://www.buymeacoffee.com/grizzlycodes" />;
-  };
+    return <CopyButton content="https://www.buymeacoffee.com/grizzlycodes" />
+  }
   ```
 
 - d81dcbe6: - Fix an issue where recipe variants that clash with utility shorthand don't get generated due to the
@@ -7810,36 +7685,36 @@ export default defineConfig({
 - 105f74ce: Add a way to specify a recipe's `staticCss` options from inside a recipe config, e.g.:
 
   ```js
-  import { defineRecipe } from "@pandacss/dev";
+  import { defineRecipe } from '@pandacss/dev'
 
   const card = defineRecipe({
-    className: "card",
-    base: { color: "white" },
+    className: 'card',
+    base: { color: 'white' },
     variants: {
       size: {
-        small: { fontSize: "14px" },
-        large: { fontSize: "18px" },
+        small: { fontSize: '14px' },
+        large: { fontSize: '18px' },
       },
     },
-    staticCss: [{ size: ["*"] }],
-  });
+    staticCss: [{ size: ['*'] }],
+  })
   ```
 
   would be the equivalent of defining it inside the main config:
 
   ```js
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
     staticCss: {
       recipes: {
         card: {
-          size: ["*"],
+          size: ['*'],
         },
       },
     },
-  });
+  })
   ```
 
 - Updated dependencies [26e6051a]
@@ -7871,13 +7746,13 @@ export default defineConfig({
 
   ```ts
   css({
-    "@container (min-width: token(sizes.xl))": {
-      color: "green.300",
+    '@container (min-width: token(sizes.xl))': {
+      color: 'green.300',
     },
-    "@media (min-width: token(sizes.2xl))": {
-      color: "red.300",
+    '@media (min-width: token(sizes.2xl))': {
+      color: 'red.300',
     },
-  });
+  })
   ```
 
 - Updated dependencies [24ee49a5]
@@ -7929,14 +7804,14 @@ export default defineConfig({
 - 8c76cd0f: - Fix issue where `hideBelow` breakpoints are inclusive of the specified breakpoints
 
   ```jsx
-  css({ hideBelow: "lg" });
+  css({ hideBelow: 'lg' })
   // => @media screen and (max-width: 63.9975em) { background: red; }
   ```
 
   - Support arbitrary breakpoints in `hideBelow` and `hideFrom` utilities
 
   ```jsx
-  css({ hideFrom: "800px" });
+  css({ hideFrom: '800px' })
   // => @media screen and (min-width: 800px) { background: red; }
   ```
 
@@ -8022,10 +7897,10 @@ export default defineConfig({
 
   ```ts
   const button = defineSlotRecipe({
-    className: "button",
-    slots: ["root", "icon", "label"],
+    className: 'button',
+    slots: ['root', 'icon', 'label'],
     // ...
-  });
+  })
   ```
 
   will have a default `jsx` property of: `[Button, Button.Root, Button.Icon, Button.Label]`
@@ -8082,42 +7957,42 @@ export default defineConfig({
 
   ```ts
   export default defineConfig({
-    outdir: "./outdir",
+    outdir: './outdir',
     importMap: {
-      css: "#panda/styled-system/css",
-      recipes: "#panda/styled-system/recipes",
-      patterns: "#panda/styled-system/patterns",
-      jsx: "#panda/styled-system/jsx",
+      css: '#panda/styled-system/css',
+      recipes: '#panda/styled-system/recipes',
+      patterns: '#panda/styled-system/patterns',
+      jsx: '#panda/styled-system/jsx',
     },
-  });
+  })
   ```
 
   Or you could also make your outdir an actual package from your monorepo:
 
   ```ts
   export default defineConfig({
-    outdir: "../packages/styled-system",
+    outdir: '../packages/styled-system',
     importMap: {
-      css: "@monorepo/styled-system",
-      recipes: "@monorepo/styled-system",
-      patterns: "@monorepo/styled-system",
-      jsx: "@monorepo/styled-system",
+      css: '@monorepo/styled-system',
+      recipes: '@monorepo/styled-system',
+      patterns: '@monorepo/styled-system',
+      jsx: '@monorepo/styled-system',
     },
-  });
+  })
   ```
 
   Working with tsconfig paths aliases is easy:
 
   ```ts
   export default defineConfig({
-    outdir: "styled-system",
+    outdir: 'styled-system',
     importMap: {
-      css: "styled-system/css",
-      recipes: "styled-system/recipes",
-      patterns: "styled-system/patterns",
-      jsx: "styled-system/jsx",
+      css: 'styled-system/css',
+      recipes: 'styled-system/recipes',
+      patterns: 'styled-system/patterns',
+      jsx: 'styled-system/jsx',
     },
-  });
+  })
   ```
 
 - Updated dependencies [95b06bb1]
@@ -8147,13 +8022,13 @@ export default defineConfig({
 - 848936e0: Allow referencing tokens with the `token()` function in media queries or any other CSS at-rule.
 
   ```js
-  import { css } from "../styled-system/css";
+  import { css } from '../styled-system/css'
 
   const className = css({
-    "@media screen and (min-width: token(sizes.4xl))": {
-      color: "green.400",
+    '@media screen and (min-width: token(sizes.4xl))': {
+      color: 'green.400',
     },
-  });
+  })
   ```
 
 - Updated dependencies [26f6982c]
@@ -8206,7 +8081,7 @@ export default defineConfig({
 
   ```css
   * {
-    color: token("colors.magenta", pink);
+    color: token('colors.magenta', pink);
   }
   ```
 
@@ -8315,12 +8190,12 @@ export default defineConfig({
   **Definition**
 
   ```jsx
-  import { sva } from "styled-system/css";
+  import { sva } from 'styled-system/css'
 
   const button = sva({
-    slots: ["label", "icon"],
+    slots: ['label', 'icon'],
     base: {
-      label: { color: "red", textDecoration: "underline" },
+      label: { color: 'red', textDecoration: 'underline' },
     },
     variants: {
       rounded: {
@@ -8328,33 +8203,33 @@ export default defineConfig({
       },
       size: {
         sm: {
-          label: { fontSize: "sm" },
-          icon: { fontSize: "sm" },
+          label: { fontSize: 'sm' },
+          icon: { fontSize: 'sm' },
         },
         lg: {
-          label: { fontSize: "lg" },
-          icon: { fontSize: "lg", color: "pink" },
+          label: { fontSize: 'lg' },
+          icon: { fontSize: 'lg', color: 'pink' },
         },
       },
     },
     defaultVariants: {
-      size: "sm",
+      size: 'sm',
     },
-  });
+  })
   ```
 
   **Usage**
 
   ```jsx
   export function App() {
-    const btnClass = button({ size: "lg", rounded: true });
+    const btnClass = button({ size: 'lg', rounded: true })
 
     return (
       <button>
         <p class={btnClass.label}> Label</p>
         <p class={btnClass.icon}> Icon</p>
       </button>
-    );
+    )
   }
   ```
 
@@ -8403,26 +8278,26 @@ export default defineConfig({
   Update the `jsx` property to be used for advanced tracking of custom pattern components.
 
   ```jsx
-  import { Circle } from "styled-system/jsx";
+  import { Circle } from 'styled-system/jsx'
   const CustomCircle = ({ children, ...props }) => {
-    return <Circle {...props}>{children}</Circle>;
-  };
+    return <Circle {...props}>{children}</Circle>
+  }
   ```
 
   To track the `CustomCircle` component, you can now use the `jsx` property.
 
   ```js
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     patterns: {
       extend: {
         circle: {
-          jsx: ["CustomCircle"],
+          jsx: ['CustomCircle'],
         },
       },
     },
-  });
+  })
   ```
 
 ### Patch Changes
@@ -8486,17 +8361,9 @@ export default defineConfig({
   ```tsx
   const ComponentWithMultipleRecipes = ({ variant }) => {
     return (
-      <button
-        className={cx(
-          pinkRecipe({ variant }),
-          greenRecipe({ variant }),
-          blueRecipe({ variant }),
-        )}
-      >
-        Hello
-      </button>
-    );
-  };
+      <button className={cx(pinkRecipe({ variant }), greenRecipe({ variant }), blueRecipe({ variant }))}>Hello</button>
+    )
+  }
   ```
 
   Given a `panda.config.ts` with recipes each including a common `jsx` tag name, such as:
@@ -8563,7 +8430,7 @@ export default defineConfig({
   ```ts
   staticCss: {
     recipes: {
-      button: [{ size: ["*"], shape: ["*"] }];
+      button: [{ size: ['*'], shape: ['*'] }]
     }
   }
   ```
@@ -8573,7 +8440,7 @@ export default defineConfig({
   ```ts
   staticCss: {
     recipes: {
-      button: ["*"];
+      button: ['*']
     }
   }
   ```
@@ -8609,12 +8476,12 @@ export default defineConfig({
 - 5b344b9c: Add support for disabling shorthand props
 
   ```ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
     shorthands: false,
-  });
+  })
   ```
 
 ### Patch Changes
diff --git a/packages/extractor/CHANGELOG.md b/packages/extractor/CHANGELOG.md
index a29c18cff..b7a0f879f 100644
--- a/packages/extractor/CHANGELOG.md
+++ b/packages/extractor/CHANGELOG.md
@@ -71,18 +71,18 @@
 - 0bf09f2: Allow using namespaced imports
 
   ```ts
-  import * as p from "styled-system/patterns";
-  import * as recipes from "styled-system/recipes";
-  import * as panda from "styled-system/css";
+  import * as p from 'styled-system/patterns'
+  import * as recipes from 'styled-system/recipes'
+  import * as panda from 'styled-system/css'
 
   // this will now be extracted
-  p.stack({ mt: "40px" });
+  p.stack({ mt: '40px' })
 
-  recipes.cardStyle({ rounded: true });
+  recipes.cardStyle({ rounded: true })
 
-  panda.css({ color: "red" });
-  panda.cva({ base: { color: "blue" } });
-  panda.sva({ base: { root: { color: "green" } } });
+  panda.css({ color: 'red' })
+  panda.cva({ base: { color: 'blue' } })
+  panda.sva({ base: { root: { color: 'green' } } })
   ```
 
   - @pandacss/shared@0.34.2
@@ -229,8 +229,8 @@
         {/* ✅ this was fine */}
         <Stack ml="4" icon={<div className="icon" />} />
       </>
-    );
-  };
+    )
+  }
   ```
 
   Now both will be fine again.
@@ -271,11 +271,11 @@
 
   ```ts
   enum Color {
-    Red = "red.400",
-    Blue = "blue.400",
+    Red = 'red.400',
+    Blue = 'blue.400',
   }
 
-  const className = css({ color: Color.Red, backgroundColor: Color["Blue"] });
+  const className = css({ color: Color.Red, backgroundColor: Color['Blue'] })
   ```
 
 ## 0.17.0
@@ -377,20 +377,20 @@
   so this will now work:
 
   ```ts
-  import { css } from "styled-system/css";
+  import { css } from 'styled-system/css'
 
   const paragraphSpacingStyle = css.raw({
-    "&:not(:first-child)": { marginBlockEnd: "1em" },
-  });
+    '&:not(:first-child)': { marginBlockEnd: '1em' },
+  })
 
   export const proseCss = css.raw({
-    maxWidth: "800px",
-    "& p": {
-      "&:not(:first-child)": { marginBlockStart: "1em" },
+    maxWidth: '800px',
+    '& p': {
+      '&:not(:first-child)': { marginBlockStart: '1em' },
     },
-    "& h1": paragraphSpacingStyle,
-    "& h2": paragraphSpacingStyle,
-  });
+    '& h1': paragraphSpacingStyle,
+    '& h2': paragraphSpacingStyle,
+  })
   ```
 
   & use ECMA preset for ts-evaluator: This means that no other globals than those that are defined in the ECMAScript
@@ -398,35 +398,35 @@
   this:
 
   ```ts
-  import { cva } from ".panda/css";
+  import { cva } from '.panda/css'
 
   const variants = () => {
     const spacingTokens = Object.entries({
-      s: "token(spacing.1)",
-      m: "token(spacing.2)",
-      l: "token(spacing.3)",
-    });
+      s: 'token(spacing.1)',
+      m: 'token(spacing.2)',
+      l: 'token(spacing.3)',
+    })
 
     const spacingProps = {
-      px: "paddingX",
-      py: "paddingY",
-    };
+      px: 'paddingX',
+      py: 'paddingY',
+    }
 
     // Generate variants programmatically
     return Object.entries(spacingProps)
       .map(([name, styleProp]) => {
         const variants = spacingTokens
           .map(([variant, token]) => ({ [variant]: { [styleProp]: token } }))
-          .reduce((_agg, kv) => ({ ..._agg, ...kv }));
+          .reduce((_agg, kv) => ({ ..._agg, ...kv }))
 
-        return { [name]: variants };
+        return { [name]: variants }
       })
-      .reduce((_agg, kv) => ({ ..._agg, ...kv }));
-  };
+      .reduce((_agg, kv) => ({ ..._agg, ...kv }))
+  }
 
   const baseStyle = cva({
     variants: variants(),
-  });
+  })
   ```
 
 ## 0.15.0
@@ -438,8 +438,8 @@
 
   ```ts
   const className = css({
-    color: ["black", undefined, "orange", "red"],
-  });
+    color: ['black', undefined, 'orange', 'red'],
+  })
   ```
 
 - 7c1ab170: Fix issue where the `satisfies` would prevent an object from being extracted
@@ -474,12 +474,8 @@
 
   ```tsx
   const CompB = ({ disabled = false }: { disabled: boolean }) => {
-    return (
-      <div className={css({ color: disabled ? "blue" : "yellow" })}>
-        Component B is disabled
-      </div>
-    );
-  };
+    return <div className={css({ color: disabled ? 'blue' : 'yellow' })}>Component B is disabled</div>
+  }
   ```
 
 ## 0.8.0
@@ -551,16 +547,11 @@
 - 21295f2e: Resolve identifier default value from parameter, code like `position` and `inset` here:
 
   ```tsx
-  export const Positioned: React.FC<PositionedProps> = ({
-    children,
-    position = "absolute",
-    inset = 0,
-    ...rest
-  }) => (
+  export const Positioned: React.FC<PositionedProps> = ({ children, position = 'absolute', inset = 0, ...rest }) => (
     <styled.div position={position} inset={inset} {...rest}>
       {children}
     </styled.div>
-  );
+  )
   ```
 
   - @pandacss/logger@0.6.0
@@ -680,16 +671,16 @@
   this was fine:
 
   ```ts
-  const aliased = "green.600";
-  const colorMap = { aliased };
-  const className = css({ color: colorMap["aliased"] });
+  const aliased = 'green.600'
+  const colorMap = { aliased }
+  const className = css({ color: colorMap['aliased'] })
   ```
 
   this was not (weirdly):
 
   ```ts
-  const color = "green.600";
-  const className = css({ color });
+  const color = 'green.600'
+  const className = css({ color })
   ```
 
 - Updated dependencies [f9247e52]
@@ -710,8 +701,8 @@
   // panda.config.ts
   export default defineConfig({
     //...
-    syntax: "template-literal",
-  });
+    syntax: 'template-literal',
+  })
   ```
 
   > For existing projects, you might need to run the `panda codegen --clean`
diff --git a/packages/generator/CHANGELOG.md b/packages/generator/CHANGELOG.md
index b190d5de3..75228069e 100644
--- a/packages/generator/CHANGELOG.md
+++ b/packages/generator/CHANGELOG.md
@@ -4,8 +4,8 @@
 
 ### Patch Changes
 
-- 99be6f1: Fix `css.raw` typings after recent ([0.39.0](https://github.com/chakra-ui/panda/discussions/2560)) changes allowing
-  arrays of `SystemStyleObject`
+- 99be6f1: Fix `css.raw` typings after recent ([0.39.0](https://github.com/chakra-ui/panda/discussions/2560)) changes
+  allowing arrays of `SystemStyleObject`
   - @pandacss/core@0.39.1
   - @pandacss/is-valid-prop@0.39.1
   - @pandacss/logger@0.39.1
@@ -24,7 +24,7 @@
   **Before**
 
   ```jsx
-  import { linkBox, linkOverlay } from "styled-system/patterns";
+  import { linkBox, linkOverlay } from 'styled-system/patterns'
 
   const App = () => {
     return (
@@ -34,26 +34,26 @@
           Link
         </a>
       </div>
-    );
-  };
+    )
+  }
   ```
 
   **After**
 
   ```jsx
-  import { css } from "styled-system/css";
-  import { linkOverlay } from "styled-system/patterns";
+  import { css } from 'styled-system/css'
+  import { linkOverlay } from 'styled-system/patterns'
 
   const App = () => {
     return (
-      <div className={css({ pos: "relative" })}>
+      <div className={css({ pos: 'relative' })}>
         <img src="https://via.placeholder.com/150" alt="placeholder" />
         <a href="#" className={linkOverlay()}>
           Link
         </a>
       </div>
-    );
-  };
+    )
+  }
   ```
 
 - 221c9a2: Add support for more typography related properties in text styles such as `fontFeatureSettings`,
@@ -110,11 +110,11 @@
       ta: {
         deprecated: true,
         transform(value) {
-          return { textAlign: value };
+          return { textAlign: value }
         },
       },
     },
-  });
+  })
   ```
 
   **Deprecating a token**
@@ -124,11 +124,11 @@
     theme: {
       tokens: {
         spacing: {
-          lg: { value: "8px", deprecated: "use `8` instead" },
+          lg: { value: '8px', deprecated: 'use `8` instead' },
         },
       },
     },
-  });
+  })
   ```
 
   **Deprecating a pattern**
@@ -140,7 +140,7 @@
         deprecated: true,
       },
     },
-  });
+  })
   ```
 
   **Deprecating a recipe**
@@ -150,11 +150,11 @@
     theme: {
       recipes: {
         btn: {
-          deprecated: "will be removed in v2.0",
+          deprecated: 'will be removed in v2.0',
         },
       },
     },
-  });
+  })
   ```
 
   ### ESLint Plugin
@@ -178,28 +178,23 @@
   This makes it even easier to merge styles from multiple sources.
 
   ```tsx
-  import { Stack, styled } from "../styled-system/jsx";
+  import { Stack, styled } from '../styled-system/jsx'
 
   const HeroSection = (props) => {
     return (
-      <Stack css={[{ color: "blue.300", padding: "4" }, props.css]}>
-        <styled.div css={[{ fontSize: "2xl" }, props.hero]}>
-          Hero Section
-        </styled.div>
+      <Stack css={[{ color: 'blue.300', padding: '4' }, props.css]}>
+        <styled.div css={[{ fontSize: '2xl' }, props.hero]}>Hero Section</styled.div>
       </Stack>
-    );
-  };
+    )
+  }
 
   const App = () => {
     return (
       <>
-        <HeroSection
-          css={{ backgroundColor: "yellow.300" }}
-          hero={css.raw({ fontSize: "4xl", color: "red.300" })}
-        />
+        <HeroSection css={{ backgroundColor: 'yellow.300' }} hero={css.raw({ fontSize: '4xl', color: 'red.300' })} />
       </>
-    );
-  };
+    )
+  }
   ```
 
   should render something like:
@@ -369,21 +364,21 @@
 - 99870bb: Fix issue where setting the pattern `jsx` option with dot notation didn't work.
 
   ```jsx
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
     patterns: {
       extend: {
         grid: {
-          jsx: ["Form.Group", "Grid"],
+          jsx: ['Form.Group', 'Grid'],
         },
         stack: {
-          jsx: ["Form.Action", "Stack"],
+          jsx: ['Form.Action', 'Stack'],
         },
       },
     },
-  });
+  })
   ```
 
 - Updated dependencies [93dc9f5]
@@ -426,9 +421,9 @@
     useful when applying negative margin to child elements.
 
   ```tsx
-  <div className={flex({ spaceX: "-1" })}>
-    <div className={circle({ size: "5", bg: "red" })} />
-    <div className={circle({ size: "5", bg: "pink" })} />
+  <div className={flex({ spaceX: '-1' })}>
+    <div className={circle({ size: '5', bg: 'red' })} />
+    <div className={circle({ size: '5', bg: 'pink' })} />
   </div>
   ```
 
@@ -440,13 +435,13 @@
   ```tsx
   <div
     className={css({
-      bgGradient: "to-r",
+      bgGradient: 'to-r',
       // from
-      gradientFrom: "red",
-      gradientFromPosition: "top left",
+      gradientFrom: 'red',
+      gradientFromPosition: 'top left',
       // to
-      gradientTo: "blue",
-      gradientToPosition: "bottom right",
+      gradientTo: 'blue',
+      gradientToPosition: 'bottom right',
     })}
   />
   ```
@@ -492,7 +487,7 @@
 
   ```ts
   // panda.config.ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
@@ -501,15 +496,15 @@
       extend: {
         tokens: {
           colors: {
-            text: { value: "blue" },
+            text: { value: 'blue' },
           },
         },
         semanticTokens: {
           colors: {
             body: {
               value: {
-                base: "{colors.blue.600}",
-                _osDark: "{colors.blue.400}",
+                base: '{colors.blue.600}',
+                _osDark: '{colors.blue.400}',
               },
             },
           },
@@ -521,16 +516,16 @@
       primary: {
         tokens: {
           colors: {
-            text: { value: "red" },
+            text: { value: 'red' },
           },
         },
         semanticTokens: {
           colors: {
-            muted: { value: "{colors.red.200}" },
+            muted: { value: '{colors.red.200}' },
             body: {
               value: {
-                base: "{colors.red.600}",
-                _osDark: "{colors.red.400}",
+                base: '{colors.red.600}',
+                _osDark: '{colors.red.400}',
               },
             },
           },
@@ -539,23 +534,23 @@
       secondary: {
         tokens: {
           colors: {
-            text: { value: "blue" },
+            text: { value: 'blue' },
           },
         },
         semanticTokens: {
           colors: {
-            muted: { value: "{colors.blue.200}" },
+            muted: { value: '{colors.blue.200}' },
             body: {
               value: {
-                base: "{colors.blue.600}",
-                _osDark: "{colors.blue.400}",
+                base: '{colors.blue.600}',
+                _osDark: '{colors.blue.400}',
               },
             },
           },
         },
       },
     },
-  });
+  })
   ```
 
   ### Pregenerating themes
@@ -565,14 +560,14 @@
 
   ```ts
   // panda.config.ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
     staticCss: {
-      themes: ["primary", "secondary"],
+      themes: ['primary', 'secondary'],
     },
-  });
+  })
   ```
 
   This will generate the following CSS:
@@ -584,7 +579,7 @@
       --colors-body: var(--colors-blue-600);
     }
 
-    [data-panda-theme="primary"] {
+    [data-panda-theme='primary'] {
       --colors-text: red;
       --colors-muted: var(--colors-red-200);
       --colors-body: var(--colors-red-600);
@@ -595,7 +590,7 @@
         --colors-body: var(--colors-blue-400);
       }
 
-      [data-panda-theme="primary"] {
+      [data-panda-theme='primary'] {
         --colors-body: var(--colors-red-400);
       }
     }
@@ -626,9 +621,9 @@
   Dynamically import a theme using its name:
 
   ```ts
-  import { getTheme } from "../styled-system/themes";
+  import { getTheme } from '../styled-system/themes'
 
-  const theme = await getTheme("red");
+  const theme = await getTheme('red')
   //    ^? {
   //     name: "red";
   //     id: string;
@@ -639,10 +634,10 @@
   Inject the theme styles into the DOM:
 
   ```ts
-  import { injectTheme } from "../styled-system/themes";
+  import { injectTheme } from '../styled-system/themes'
 
-  const theme = await getTheme("red");
-  injectTheme(document.documentElement, theme); // this returns the injected style element
+  const theme = await getTheme('red')
+  injectTheme(document.documentElement, theme) // this returns the injected style element
   ```
 
   ***
@@ -651,62 +646,54 @@
 
   ```tsx
   // app/layout.tsx
-  import { Inter } from "next/font/google";
-  import { cookies } from "next/headers";
-  import { ThemeName, getTheme } from "../../styled-system/themes";
-
-  export default async function RootLayout({
-    children,
-  }: {
-    children: React.ReactNode;
-  }) {
-    const store = cookies();
-    const themeName = store.get("theme")?.value as ThemeName;
-    const theme = themeName && (await getTheme(themeName));
+  import { Inter } from 'next/font/google'
+  import { cookies } from 'next/headers'
+  import { ThemeName, getTheme } from '../../styled-system/themes'
+
+  export default async function RootLayout({ children }: { children: React.ReactNode }) {
+    const store = cookies()
+    const themeName = store.get('theme')?.value as ThemeName
+    const theme = themeName && (await getTheme(themeName))
 
     return (
       <html lang="en" data-panda-theme={themeName ? themeName : undefined}>
         {themeName && (
           <head>
-            <style
-              type="text/css"
-              id={theme.id}
-              dangerouslySetInnerHTML={{ __html: theme.css }}
-            />
+            <style type="text/css" id={theme.id} dangerouslySetInnerHTML={{ __html: theme.css }} />
           </head>
         )}
         <body>{children}</body>
       </html>
-    );
+    )
   }
 
   // app/page.tsx
-  import { getTheme, injectTheme } from "../../styled-system/themes";
+  import { getTheme, injectTheme } from '../../styled-system/themes'
 
   export default function Home() {
     return (
       <>
         <button
           onClick={async () => {
-            const current = document.documentElement.dataset.pandaTheme;
-            const next = current === "primary" ? "secondary" : "primary";
-            const theme = await getTheme(next);
-            setCookie("theme", next, 7);
-            injectTheme(document.documentElement, theme);
+            const current = document.documentElement.dataset.pandaTheme
+            const next = current === 'primary' ? 'secondary' : 'primary'
+            const theme = await getTheme(next)
+            setCookie('theme', next, 7)
+            injectTheme(document.documentElement, theme)
           }}
         >
           swap theme
         </button>
       </>
-    );
+    )
   }
 
   // Set a Cookie
   function setCookie(cName: string, cValue: any, expDays: number) {
-    let date = new Date();
-    date.setTime(date.getTime() + expDays * 24 * 60 * 60 * 1000);
-    const expires = "expires=" + date.toUTCString();
-    document.cookie = cName + "=" + cValue + "; " + expires + "; path=/";
+    let date = new Date()
+    date.setTime(date.getTime() + expDays * 24 * 60 * 60 * 1000)
+    const expires = 'expires=' + date.toUTCString()
+    document.cookie = cName + '=' + cValue + '; ' + expires + '; path=/'
   }
   ```
 
@@ -715,18 +702,18 @@
   Finally, you can create a theme contract to ensure that all themes have the same structure:
 
   ```ts
-  import { defineThemeContract } from "@pandacss/dev";
+  import { defineThemeContract } from '@pandacss/dev'
 
   const defineTheme = defineThemeContract({
     tokens: {
       colors: {
-        red: { value: "" }, // theme implementations must have a red color
+        red: { value: '' }, // theme implementations must have a red color
       },
     },
-  });
+  })
 
   defineTheme({
-    selector: ".theme-secondary",
+    selector: '.theme-secondary',
     tokens: {
       colors: {
         // ^^^^   Property 'red' is missing in type '{}' but required in type '{ red: { value: string; }; }'
@@ -735,7 +722,7 @@
         // red: { value: 'red' },
       },
     },
-  });
+  })
   ```
 
 - fabdabe: ## Changes
@@ -755,12 +742,12 @@
     theme: {
       extend: {
         colors: {
-          primary: { value: "blue" },
+          primary: { value: 'blue' },
         },
         // borderWidths: {}, // ⚠️ nothing defined here
       },
     },
-  });
+  })
   ```
 
   ```ts
@@ -771,8 +758,8 @@
 
     // ✅ after this PR, TS will not throw an error anymore as you don't have any `borderWidths` tokens
     // if you add one, this will error again (as it's supposed to)
-    borderWidths: "123px",
-  });
+    borderWidths: '123px',
+  })
   ```
 
   ## Description
@@ -799,63 +786,63 @@
   Example:
 
   ```ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
     globalVars: {
-      "--some-color": "red",
-      "--button-color": {
-        syntax: "<color>",
+      '--some-color': 'red',
+      '--button-color': {
+        syntax: '<color>',
         inherits: false,
-        initialValue: "blue",
+        initialValue: 'blue',
       },
     },
-  });
+  })
   ```
 
   > Note: Keys defined in `globalVars` will be available as a value for _every_ utilities, as they're not bound to token
   > categories.
 
   ```ts
-  import { css } from "../styled-system/css";
+  import { css } from '../styled-system/css'
 
   const className = css({
-    "--button-color": "colors.red.300",
+    '--button-color': 'colors.red.300',
     // ^^^^^^^^^^^^  will be suggested
 
-    backgroundColor: "var(--button-color)",
+    backgroundColor: 'var(--button-color)',
     //                ^^^^^^^^^^^^^^^^^^  will be suggested
-  });
+  })
   ```
 
 - 656ff02: Fix `strictPropertyValues` typings should allow for `CssVars` (either predefined from `globalVars` or any
   custom CSS variable)
 
   ```ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
     strictPropertyValues: true,
     globalVars: {
       extend: {
-        "--some-color": "red",
-        "--button-color": {
-          syntax: "<color>",
+        '--some-color': 'red',
+        '--button-color': {
+          syntax: '<color>',
           inherits: false,
-          initialValue: "blue",
+          initialValue: 'blue',
         },
       },
     },
-  });
+  })
   ```
 
   ```ts
   css({
     // ❌ was not allowed before when `strictPropertyValues` was enabled
-    display: "var(--button-color)", // ✅ will now be allowed/suggested
-  });
+    display: 'var(--button-color)', // ✅ will now be allowed/suggested
+  })
   ```
 
   If no `globalVars` are defined, any `var(--*)` will be allowed
@@ -863,8 +850,8 @@
   ```ts
   css({
     // ✅ will be allowed
-    display: "var(--xxx)",
-  });
+    display: 'var(--xxx)',
+  })
   ```
 
 - 340f4f1: Fix `Expression produces a union type that is too complex to represent` with `splitCssProps` because of
@@ -893,21 +880,21 @@
   export default defineConfig({
     semanticTokens: {
       colors: {
-        blue: { value: "blue" },
+        blue: { value: 'blue' },
         green: {
           value: {
-            base: "green",
-            _dark: "white",
+            base: 'green',
+            _dark: 'white',
           },
         },
         red: {
           value: {
-            base: "red",
+            base: 'red',
           },
         },
       },
     },
-  });
+  })
   ```
 
   This is the output of the `styled-system/token` JS token function:
@@ -936,32 +923,32 @@
   Each slot will contain a `${className}__${slotName}` class in addition to the atomic styles.
 
   ```tsx
-  import { sva } from "../styled-system/css";
+  import { sva } from '../styled-system/css'
 
   const button = sva({
-    className: "btn",
-    slots: ["root", "text"],
+    className: 'btn',
+    slots: ['root', 'text'],
     base: {
       root: {
-        bg: "blue.500",
+        bg: 'blue.500',
         _hover: {
           // v--- 🎯 this will target the `text` slot
-          "& .btn__text": {
-            color: "white",
+          '& .btn__text': {
+            color: 'white',
           },
         },
       },
     },
-  });
+  })
 
   export const App = () => {
-    const classes = button();
+    const classes = button()
     return (
       <div className={classes.root}>
         <div className={classes.text}>Click me</div>
       </div>
-    );
-  };
+    )
+  }
   ```
 
 - Updated dependencies [f2fdc48]
@@ -985,11 +972,11 @@
 - 4576a60: Fix nested `styled` factory composition
 
   ```tsx
-  import { styled } from "../styled-system/jsx";
+  import { styled } from '../styled-system/jsx'
 
-  const BasicBox = styled("div", { base: { fontSize: "10px" } });
-  const ExtendedBox1 = styled(BasicBox, { base: { fontSize: "20px" } });
-  const ExtendedBox2 = styled(ExtendedBox1, { base: { fontSize: "30px" } });
+  const BasicBox = styled('div', { base: { fontSize: '10px' } })
+  const ExtendedBox1 = styled(BasicBox, { base: { fontSize: '20px' } })
+  const ExtendedBox2 = styled(ExtendedBox1, { base: { fontSize: '30px' } })
 
   export const App = () => {
     return (
@@ -1002,8 +989,8 @@
         {/* NOW: ✅ fs_30px */}
         <ExtendedBox2>text3</ExtendedBox2>
       </>
-    );
-  };
+    )
+  }
   ```
 
   - @pandacss/core@0.34.3
@@ -1024,12 +1011,12 @@
   `Style` like `borderTopStyle`.
 
   ```ts
-  import { css } from "../styled-system/css";
+  import { css } from '../styled-system/css'
 
   css({
-    borderTop: "1px solid red", // ✅ will now be fine as it should be
-    borderTopStyle: "abc", // ✅ will still report a TS error
-  });
+    borderTop: '1px solid red', // ✅ will now be fine as it should be
+    borderTopStyle: 'abc', // ✅ will still report a TS error
+  })
   ```
 
   ```diff
@@ -1125,18 +1112,18 @@
 - d4942e0: Fix the color opacity modifier syntax for `semanticTokens` inside of conditions
 
   ```ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     conditions: {
-      light: ".light &",
-      dark: ".dark &",
+      light: '.light &',
+      dark: '.dark &',
     },
     theme: {
       tokens: {
         colors: {
-          blue: { 500: { value: "blue" } },
-          green: { 500: { value: "green" } },
+          blue: { 500: { value: 'blue' } },
+          green: { 500: { value: 'green' } },
         },
         opacity: {
           half: { value: 0.5 },
@@ -1146,15 +1133,15 @@
         colors: {
           secondary: {
             value: {
-              base: "red",
-              _light: "{colors.blue.500/32}", // <-- wasn't working as expected
-              _dark: "{colors.green.500/half}",
+              base: 'red',
+              _light: '{colors.blue.500/32}', // <-- wasn't working as expected
+              _dark: '{colors.green.500/half}',
             },
           },
         },
       },
     },
-  });
+  })
   ```
 
   will now correctly generate the following CSS:
@@ -1169,19 +1156,11 @@
     }
 
     .light {
-      --colors-secondary: color-mix(
-        in srgb,
-        var(--colors-blue-500) 32%,
-        transparent
-      );
+      --colors-secondary: color-mix(in srgb, var(--colors-blue-500) 32%, transparent);
     }
 
     .dark {
-      --colors-secondary: color-mix(
-        in srgb,
-        var(--colors-green-500) 50%,
-        transparent
-      );
+      --colors-secondary: color-mix(in srgb, var(--colors-green-500) 50%, transparent);
     }
   }
   ```
@@ -1222,15 +1201,15 @@
   class assigned.
 
   ```js
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     preflight: {
-      scope: ".my-scope",
-      level: "element", // 'element' | 'parent (default)'
+      scope: '.my-scope',
+      level: 'element', // 'element' | 'parent (default)'
     },
     // ...
-  });
+  })
   ```
 
   This will generate CSS that looks like:
@@ -1272,20 +1251,20 @@
   export default defaultConfig({
     conditions: {
       extend: {
-        supportHover: ["@media (hover: hover) and (pointer: fine)", "&:hover"],
+        supportHover: ['@media (hover: hover) and (pointer: fine)', '&:hover'],
       },
     },
-  });
+  })
   ```
 
   ```ts
-  import { css } from "../styled-system/css";
+  import { css } from '../styled-system/css'
 
   css({
     _supportHover: {
-      color: "red",
+      color: 'red',
     },
-  });
+  })
   ```
 
   will generate the following CSS:
@@ -1356,10 +1335,10 @@
 
   ```ts
   css({
-    padding: "1px",
-    paddingTop: "3px",
-    paddingBottom: "4px",
-  });
+    padding: '1px',
+    paddingTop: '3px',
+    paddingBottom: '4px',
+  })
   ```
 
   Will now always generate the following css:
@@ -1469,24 +1448,24 @@
     patterns: {
       hstack: {
         properties: {
-          justify: { type: "property", value: "justifyContent" },
-          gap: { type: "property", value: "gap" },
+          justify: { type: 'property', value: 'justifyContent' },
+          gap: { type: 'property', value: 'gap' },
         },
         // you can also use a token like '10'
-        defaultValues: { gap: "40px" },
+        defaultValues: { gap: '40px' },
         transform(props) {
-          const { justify, gap, ...rest } = props;
+          const { justify, gap, ...rest } = props
           return {
-            display: "flex",
-            alignItems: "center",
+            display: 'flex',
+            alignItems: 'center',
             justifyContent: justify,
             gap,
             ...rest,
-          };
+          }
         },
       },
     },
-  });
+  })
   ```
 
 ### Patch Changes
@@ -1528,54 +1507,39 @@
      * Called when the config is resolved, after all the presets are loaded and merged.
      * This is the first hook called, you can use it to tweak the config before the context is created.
      */
-    "config:resolved": (args: { conf: LoadConfigResult }) => MaybeAsyncReturn;
+    'config:resolved': (args: { conf: LoadConfigResult }) => MaybeAsyncReturn
     /**
      * Called when the Panda context has been created and the API is ready to be used.
      */
-    "context:created": (args: {
-      ctx: ApiInterface;
-      logger: LoggerInterface;
-    }) => void;
+    'context:created': (args: { ctx: ApiInterface; logger: LoggerInterface }) => void
     /**
      * Called when the config file or one of its dependencies (imports) has changed.
      */
-    "config:change": (args: { config: UserConfig }) => MaybeAsyncReturn;
+    'config:change': (args: { config: UserConfig }) => MaybeAsyncReturn
     /**
      * Called after reading the file content but before parsing it.
      * You can use this hook to transform the file content to a tsx-friendly syntax so that Panda's parser can parse it.
      * You can also use this hook to parse the file's content on your side using a custom parser, in this case you don't have to return anything.
      */
-    "parser:before": (args: {
-      filePath: string;
-      content: string;
-    }) => string | void;
+    'parser:before': (args: { filePath: string; content: string }) => string | void
     /**
      * Called after the file styles are extracted and processed into the resulting ParserResult object.
      * You can also use this hook to add your own extraction results from your custom parser to the ParserResult object.
      */
-    "parser:after": (args: {
-      filePath: string;
-      result: ParserResultInterface | undefined;
-    }) => void;
+    'parser:after': (args: { filePath: string; result: ParserResultInterface | undefined }) => void
     /**
      * Called after the codegen is completed
      */
-    "codegen:done": () => MaybeAsyncReturn;
+    'codegen:done': () => MaybeAsyncReturn
     /**
      * Called right before adding the design-system CSS (global, static, preflight, tokens, keyframes) to the final CSS
      * Called right before writing/injecting the final CSS (styles.css) that contains the design-system CSS and the parser CSS
      * You can use it to tweak the CSS content before it's written to disk or injected through the postcss plugin.
      */
-    "cssgen:done": (args: {
-      artifact:
-        | "global"
-        | "static"
-        | "reset"
-        | "tokens"
-        | "keyframes"
-        | "styles.css";
-      content: string;
-    }) => string | void;
+    'cssgen:done': (args: {
+      artifact: 'global' | 'static' | 'reset' | 'tokens' | 'keyframes' | 'styles.css'
+      content: string
+    }) => string | void
   }
   ```
 
@@ -1723,18 +1687,18 @@
 
   ```ts
   // config.strictTokens = true
-  css({ display: "flex" }); // OK, didn't throw
-  css({ display: "block" }); // OK, didn't throw
-  css({ display: "abc" }); // ❌ would throw since 'abc' is not part of predefined values of 'display' even thought there is no config token for 'abc'
+  css({ display: 'flex' }) // OK, didn't throw
+  css({ display: 'block' }) // OK, didn't throw
+  css({ display: 'abc' }) // ❌ would throw since 'abc' is not part of predefined values of 'display' even thought there is no config token for 'abc'
   ```
 
   now:
 
   ```ts
   // config.strictTokens = true
-  css({ display: "flex" }); // OK, didn't throw
-  css({ display: "block" }); // OK, didn't throw
-  css({ display: "abc" }); // ✅ will not throw there is no config token for 'abc'
+  css({ display: 'flex' }) // OK, didn't throw
+  css({ display: 'block' }) // OK, didn't throw
+  css({ display: 'abc' }) // ✅ will not throw there is no config token for 'abc'
   ```
 
   Instead, if you want the v.19.0 behavior, you can use the new `config.strictPropertyValues` option. You can combine it
@@ -1745,79 +1709,79 @@
 
   ```ts
   type StrictableProps =
-    | "alignContent"
-    | "alignItems"
-    | "alignSelf"
-    | "all"
-    | "animationComposition"
-    | "animationDirection"
-    | "animationFillMode"
-    | "appearance"
-    | "backfaceVisibility"
-    | "backgroundAttachment"
-    | "backgroundClip"
-    | "borderCollapse"
-    | "border"
-    | "borderBlock"
-    | "borderBlockEnd"
-    | "borderBlockStart"
-    | "borderBottom"
-    | "borderInline"
-    | "borderInlineEnd"
-    | "borderInlineStart"
-    | "borderLeft"
-    | "borderRight"
-    | "borderTop"
-    | "borderBlockEndStyle"
-    | "borderBlockStartStyle"
-    | "borderBlockStyle"
-    | "borderBottomStyle"
-    | "borderInlineEndStyle"
-    | "borderInlineStartStyle"
-    | "borderInlineStyle"
-    | "borderLeftStyle"
-    | "borderRightStyle"
-    | "borderTopStyle"
-    | "boxDecorationBreak"
-    | "boxSizing"
-    | "breakAfter"
-    | "breakBefore"
-    | "breakInside"
-    | "captionSide"
-    | "clear"
-    | "columnFill"
-    | "columnRuleStyle"
-    | "contentVisibility"
-    | "direction"
-    | "display"
-    | "emptyCells"
-    | "flexDirection"
-    | "flexWrap"
-    | "float"
-    | "fontKerning"
-    | "forcedColorAdjust"
-    | "isolation"
-    | "lineBreak"
-    | "mixBlendMode"
-    | "objectFit"
-    | "outlineStyle"
-    | "overflow"
-    | "overflowX"
-    | "overflowY"
-    | "overflowBlock"
-    | "overflowInline"
-    | "overflowWrap"
-    | "pointerEvents"
-    | "position"
-    | "resize"
-    | "scrollBehavior"
-    | "touchAction"
-    | "transformBox"
-    | "transformStyle"
-    | "userSelect"
-    | "visibility"
-    | "wordBreak"
-    | "writingMode";
+    | 'alignContent'
+    | 'alignItems'
+    | 'alignSelf'
+    | 'all'
+    | 'animationComposition'
+    | 'animationDirection'
+    | 'animationFillMode'
+    | 'appearance'
+    | 'backfaceVisibility'
+    | 'backgroundAttachment'
+    | 'backgroundClip'
+    | 'borderCollapse'
+    | 'border'
+    | 'borderBlock'
+    | 'borderBlockEnd'
+    | 'borderBlockStart'
+    | 'borderBottom'
+    | 'borderInline'
+    | 'borderInlineEnd'
+    | 'borderInlineStart'
+    | 'borderLeft'
+    | 'borderRight'
+    | 'borderTop'
+    | 'borderBlockEndStyle'
+    | 'borderBlockStartStyle'
+    | 'borderBlockStyle'
+    | 'borderBottomStyle'
+    | 'borderInlineEndStyle'
+    | 'borderInlineStartStyle'
+    | 'borderInlineStyle'
+    | 'borderLeftStyle'
+    | 'borderRightStyle'
+    | 'borderTopStyle'
+    | 'boxDecorationBreak'
+    | 'boxSizing'
+    | 'breakAfter'
+    | 'breakBefore'
+    | 'breakInside'
+    | 'captionSide'
+    | 'clear'
+    | 'columnFill'
+    | 'columnRuleStyle'
+    | 'contentVisibility'
+    | 'direction'
+    | 'display'
+    | 'emptyCells'
+    | 'flexDirection'
+    | 'flexWrap'
+    | 'float'
+    | 'fontKerning'
+    | 'forcedColorAdjust'
+    | 'isolation'
+    | 'lineBreak'
+    | 'mixBlendMode'
+    | 'objectFit'
+    | 'outlineStyle'
+    | 'overflow'
+    | 'overflowX'
+    | 'overflowY'
+    | 'overflowBlock'
+    | 'overflowInline'
+    | 'overflowWrap'
+    | 'pointerEvents'
+    | 'position'
+    | 'resize'
+    | 'scrollBehavior'
+    | 'touchAction'
+    | 'transformBox'
+    | 'transformStyle'
+    | 'userSelect'
+    | 'visibility'
+    | 'wordBreak'
+    | 'writingMode'
   ```
 
 - Updated dependencies [657ca5da]
@@ -1888,38 +1852,38 @@
 
   ```ts
   const card = defineRecipe({
-    className: "card",
-    base: { color: "white" },
+    className: 'card',
+    base: { color: 'white' },
     variants: {
       size: {
-        small: { fontSize: "14px" },
-        large: { fontSize: "18px" },
+        small: { fontSize: '14px' },
+        large: { fontSize: '18px' },
       },
       visual: {
-        primary: { backgroundColor: "blue" },
-        secondary: { backgroundColor: "gray" },
+        primary: { backgroundColor: 'blue' },
+        secondary: { backgroundColor: 'gray' },
       },
     },
-  });
+  })
 
   export default defineConfig({
     // ...
     staticCss: {
       recipes: {
-        card: ["*"], // this
+        card: ['*'], // this
 
         // was equivalent to:
         card: [
           // notice how `responsive: true` was implicitly added
-          { size: ["*"], responsive: true },
-          { visual: ["*"], responsive: true },
+          { size: ['*'], responsive: true },
+          { visual: ['*'], responsive: true },
         ],
 
         //   will now correctly be equivalent to:
-        card: [{ size: ["*"] }, { visual: ["*"] }],
+        card: [{ size: ['*'] }, { visual: ['*'] }],
       },
     },
-  });
+  })
   ```
 
   Here's the diff in the generated CSS:
@@ -2066,17 +2030,17 @@
 
   ```ts
   css({
-    bg: "[#3B00B9]", // ✅ was okay
+    bg: '[#3B00B9]', // ✅ was okay
     _dark: {
       // ✅ was okay
-      color: "[#3B00B9]",
+      color: '[#3B00B9]',
     },
 
     // ❌ Not okay, will be fixed in this patch
     color: {
-      _dark: "[#3B00B9]",
+      _dark: '[#3B00B9]',
     },
-  });
+  })
   ```
 
 - 647f05c9: Fix a CSS generation issue with `config.strictTokens` when using the `[xxx]` escape-hatch syntax with `!` or
@@ -2084,9 +2048,9 @@
 
   ```ts
   css({
-    borderWidth: "[2px!]",
-    width: "[2px !important]",
-  });
+    borderWidth: '[2px!]',
+    width: '[2px !important]',
+  })
   ```
 
 - Updated dependencies [8f4ce97c]
@@ -2127,18 +2091,18 @@
   and suffixing with `]`, e.g. writing `[123px]` as a value will bypass the token validation.
 
   ```ts
-  import { css } from "../styled-system/css";
+  import { css } from '../styled-system/css'
 
   css({
     // @ts-expect-error TS will throw when using from strictTokens: true
-    color: "#fff",
+    color: '#fff',
     // @ts-expect-error TS will throw when using from strictTokens: true
-    width: "100px",
+    width: '100px',
 
     // ✅ but this is now allowed:
-    bgColor: "[rgb(51 155 240)]",
-    fontSize: "[12px]",
-  });
+    bgColor: '[rgb(51 155 240)]',
+    fontSize: '[12px]',
+  })
   ```
 
 ### Patch Changes
@@ -2172,49 +2136,49 @@
 - 105f74ce: Add a way to specify a recipe's `staticCss` options from inside a recipe config, e.g.:
 
   ```js
-  import { defineRecipe } from "@pandacss/dev";
+  import { defineRecipe } from '@pandacss/dev'
 
   const card = defineRecipe({
-    className: "card",
-    base: { color: "white" },
+    className: 'card',
+    base: { color: 'white' },
     variants: {
       size: {
-        small: { fontSize: "14px" },
-        large: { fontSize: "18px" },
+        small: { fontSize: '14px' },
+        large: { fontSize: '18px' },
       },
     },
-    staticCss: [{ size: ["*"] }],
-  });
+    staticCss: [{ size: ['*'] }],
+  })
   ```
 
   would be the equivalent of defining it inside the main config:
 
   ```js
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
     staticCss: {
       recipes: {
         card: {
-          size: ["*"],
+          size: ['*'],
         },
       },
     },
-  });
+  })
   ```
 
 - 052283c2: Fix vue `styled` factory internal class merging, for example:
 
   ```vue
   <script setup>
-  import { styled } from "../styled-system/jsx";
+  import { styled } from '../styled-system/jsx'
 
-  const StyledButton = styled("button", {
+  const StyledButton = styled('button', {
     base: {
-      bgColor: "red.300",
+      bgColor: 'red.300',
     },
-  });
+  })
   </script>
   <template>
     <StyledButton id="test" class="test">
@@ -2283,18 +2247,18 @@
 
   ```ts
   // config.strictTokens = true
-  css({ display: "flex" }); // OK, didn't throw
-  css({ display: "block" }); // OK, didn't throw
-  css({ display: "abc" }); // ❌ didn't throw even though 'abc' is not a valid value for 'display'
+  css({ display: 'flex' }) // OK, didn't throw
+  css({ display: 'block' }) // OK, didn't throw
+  css({ display: 'abc' }) // ❌ didn't throw even though 'abc' is not a valid value for 'display'
   ```
 
   Now:
 
   ```ts
   // config.strictTokens = true
-  css({ display: "flex" }); // OK, didn't throw
-  css({ display: "block" }); // OK, didn't throw
-  css({ display: "abc" }); // ✅ will throw since 'abc' is not a valid value for 'display'
+  css({ display: 'flex' }) // OK, didn't throw
+  css({ display: 'block' }) // OK, didn't throw
+  css({ display: 'abc' }) // ✅ will throw since 'abc' is not a valid value for 'display'
   ```
 
 - Updated dependencies [61831040]
@@ -2353,28 +2317,22 @@
 - b7cb2073: Add a `splitCssProps` utility exported from the {outdir}/jsx entrypoint
 
   ```tsx
-  import { splitCssProps, styled } from "../styled-system/jsx";
-  import type { HTMLStyledProps } from "../styled-system/types";
+  import { splitCssProps, styled } from '../styled-system/jsx'
+  import type { HTMLStyledProps } from '../styled-system/types'
 
-  function SplitComponent({ children, ...props }: HTMLStyledProps<"div">) {
-    const [cssProps, restProps] = splitCssProps(props);
+  function SplitComponent({ children, ...props }: HTMLStyledProps<'div'>) {
+    const [cssProps, restProps] = splitCssProps(props)
     return (
-      <styled.div
-        {...restProps}
-        className={css(
-          { display: "flex", height: "20", width: "20" },
-          cssProps,
-        )}
-      >
+      <styled.div {...restProps} className={css({ display: 'flex', height: '20', width: '20' }, cssProps)}>
         {children}
       </styled.div>
-    );
+    )
   }
 
   // Usage
 
   function App() {
-    return <SplitComponent margin="2">Click me</SplitComponent>;
+    return <SplitComponent margin="2">Click me</SplitComponent>
   }
   ```
 
@@ -2467,16 +2425,16 @@
   together and the styles will be merged correctly.
 
   ```jsx
-  const Box = styled("div", {
+  const Box = styled('div', {
     base: {
-      background: "red.light",
-      color: "white",
+      background: 'red.light',
+      color: 'white',
     },
-  });
+  })
 
   const ExtendedBox = styled(Box, {
-    base: { background: "red.dark" },
-  });
+    base: { background: 'red.dark' },
+  })
 
   // <ExtendedBox> will have a background of `red.dark` and a color of `white`
   ```
@@ -2489,32 +2447,32 @@
   - CVA or Inline CVA + Config Recipe = ❌
 
   ```jsx
-  import { button } from "../styled-system/recipes";
+  import { button } from '../styled-system/recipes'
 
-  const Button = styled("div", button);
+  const Button = styled('div', button)
 
   // ❌ This will throw an error
   const ExtendedButton = styled(Button, {
-    base: { background: "red.dark" },
-  });
+    base: { background: 'red.dark' },
+  })
   ```
 
 - fbf062c6: Added a new type to extract variants out of styled components
 
   ```tsx
-  import { StyledVariantProps } from "../styled-system/jsx";
+  import { StyledVariantProps } from '../styled-system/jsx'
 
-  const Button = styled("button", {
-    base: { color: "black" },
+  const Button = styled('button', {
+    base: { color: 'black' },
     variants: {
       state: {
-        error: { color: "red" },
-        success: { color: "green" },
+        error: { color: 'red' },
+        success: { color: 'green' },
       },
     },
-  });
+  })
 
-  type ButtonVariantProps = StyledVariantProps<typeof Button>;
+  type ButtonVariantProps = StyledVariantProps<typeof Button>
   //   ^ { state?: 'error' | 'success' | undefined }
   ```
 
@@ -2616,9 +2574,9 @@
 
   ```ts
   interface FactoryOptions<TProps extends Dict> {
-    dataAttr?: boolean;
-    defaultProps?: TProps;
-    shouldForwardProp?(prop: string, variantKeys: string[]): boolean;
+    dataAttr?: boolean
+    defaultProps?: TProps
+    shouldForwardProp?(prop: string, variantKeys: string[]): boolean
   }
   ```
 
@@ -2626,16 +2584,16 @@
     This is useful for testing and debugging.
 
   ```jsx
-  import { styled } from "../styled-system/jsx";
-  import { button } from "../styled-system/recipes";
+  import { styled } from '../styled-system/jsx'
+  import { button } from '../styled-system/recipes'
 
-  const Button = styled("button", button, { dataAttr: true });
+  const Button = styled('button', button, { dataAttr: true })
 
   const App = () => (
     <Button variant="secondary" mt="10px">
       Button
     </Button>
-  );
+  )
   // Will render something like <button data-recipe="button" class="btn btn--variant_purple mt_10px">Button</button>
   ```
 
@@ -2643,17 +2601,17 @@
     override the default variants or base styles of a recipe.
 
   ```jsx
-  import { styled } from "../styled-system/jsx";
-  import { button } from "../styled-system/recipes";
+  import { styled } from '../styled-system/jsx'
+  import { button } from '../styled-system/recipes'
 
-  const Button = styled("button", button, {
+  const Button = styled('button', button, {
     defaultProps: {
-      variant: "secondary",
-      px: "10px",
+      variant: 'secondary',
+      px: '10px',
     },
-  });
+  })
 
-  const App = () => <Button>Button</Button>;
+  const App = () => <Button>Button</Button>
   // Will render something like <button class="btn btn--variant_secondary px_10px">Button</button>
   ```
 
@@ -2661,20 +2619,19 @@
     props except recipe variants and style props are forwarded.
 
   ```jsx
-  import { styled } from "../styled-system/jsx";
-  import { button } from "../styled-system/recipes";
-  import { isCssProperty } from "../styled-system/jsx";
-  import { motion, isValidMotionProp } from "framer-motion";
+  import { styled } from '../styled-system/jsx'
+  import { button } from '../styled-system/recipes'
+  import { isCssProperty } from '../styled-system/jsx'
+  import { motion, isValidMotionProp } from 'framer-motion'
 
   const StyledMotion = styled(
     motion.div,
     {},
     {
       shouldForwardProp: (prop, variantKeys) =>
-        isValidMotionProp(prop) ||
-        (!variantKeys.includes(prop) && !isCssProperty(prop)),
+        isValidMotionProp(prop) || (!variantKeys.includes(prop) && !isCssProperty(prop)),
     },
-  );
+  )
   ```
 
   - @pandacss/types@0.15.4
@@ -2697,42 +2654,42 @@
 
   ```ts
   export default defineConfig({
-    outdir: "./outdir",
+    outdir: './outdir',
     importMap: {
-      css: "#panda/styled-system/css",
-      recipes: "#panda/styled-system/recipes",
-      patterns: "#panda/styled-system/patterns",
-      jsx: "#panda/styled-system/jsx",
+      css: '#panda/styled-system/css',
+      recipes: '#panda/styled-system/recipes',
+      patterns: '#panda/styled-system/patterns',
+      jsx: '#panda/styled-system/jsx',
     },
-  });
+  })
   ```
 
   Or you could also make your outdir an actual package from your monorepo:
 
   ```ts
   export default defineConfig({
-    outdir: "../packages/styled-system",
+    outdir: '../packages/styled-system',
     importMap: {
-      css: "@monorepo/styled-system",
-      recipes: "@monorepo/styled-system",
-      patterns: "@monorepo/styled-system",
-      jsx: "@monorepo/styled-system",
+      css: '@monorepo/styled-system',
+      recipes: '@monorepo/styled-system',
+      patterns: '@monorepo/styled-system',
+      jsx: '@monorepo/styled-system',
     },
-  });
+  })
   ```
 
   Working with tsconfig paths aliases is easy:
 
   ```ts
   export default defineConfig({
-    outdir: "styled-system",
+    outdir: 'styled-system',
     importMap: {
-      css: "styled-system/css",
-      recipes: "styled-system/recipes",
-      patterns: "styled-system/patterns",
-      jsx: "styled-system/jsx",
+      css: 'styled-system/css',
+      recipes: 'styled-system/recipes',
+      patterns: 'styled-system/patterns',
+      jsx: 'styled-system/jsx',
     },
-  });
+  })
   ```
 
 - 1eb31118: Automatically allow overriding config recipe compoundVariants styles within the `styled` JSX factory,
@@ -2742,22 +2699,22 @@
 
   ```ts file="panda.config.ts"
   const button = defineRecipe({
-    className: "btn",
-    base: { color: "green", fontSize: "16px" },
+    className: 'btn',
+    base: { color: 'green', fontSize: '16px' },
     variants: {
-      size: { small: { fontSize: "14px" } },
+      size: { small: { fontSize: '14px' } },
     },
-    compoundVariants: [{ size: "small", css: { color: "blue" } }],
-  });
+    compoundVariants: [{ size: 'small', css: { color: 'blue' } }],
+  })
   ```
 
   This would previously not merge the `color` property overrides, but now it does:
 
   ```tsx file="example.tsx"
-  import { styled } from "../styled-system/jsx";
-  import { button } from "../styled-system/recipes";
+  import { styled } from '../styled-system/jsx'
+  import { button } from '../styled-system/recipes'
 
-  const Button = styled("button", button);
+  const Button = styled('button', button)
 
   function App() {
     return (
@@ -2766,7 +2723,7 @@
           Click me
         </Button>
       </>
-    );
+    )
   }
   ```
 
@@ -2945,8 +2902,8 @@
     passed in. This is to allow the `css` function to merge the styles correctly.
 
   ```tsx
-  import { css } from "../styled-system/css";
-  css({ mx: "3", paddingTop: "4" }, { mx: "10", pt: "6" }); // => mx_10 pt_6
+  import { css } from '../styled-system/css'
+  css({ mx: '3', paddingTop: '4' }, { mx: '10', pt: '6' }) // => mx_10 pt_6
   ```
 
   > ⚠️ This approach should be preferred for merging styles over the current `cx` function, which will be reverted to
@@ -2971,29 +2928,26 @@
   be merged correctly.
 
   ```tsx title="src/components/Button.tsx"
-  import { css } from "../../styled-system/css";
+  import { css } from '../../styled-system/css'
 
   export const Button = ({ css: cssProp = {}, children }) => {
-    const className = css(
-      { display: "flex", alignItem: "center", color: "black" },
-      cssProp,
-    );
-    return <button className={className}>{children}</button>;
-  };
+    const className = css({ display: 'flex', alignItem: 'center', color: 'black' }, cssProp)
+    return <button className={className}>{children}</button>
+  }
   ```
 
   Then you can use the `Button` component like this:
 
   ```tsx title="src/app/page.tsx"
-  import { css } from "../../styled-system/css";
-  import { Button, Thingy } from "./Button";
+  import { css } from '../../styled-system/css'
+  import { Button, Thingy } from './Button'
 
   export default function Page() {
     return (
-      <Button css={{ color: "pink", _hover: { color: "red" } }}>
+      <Button css={{ color: 'pink', _hover: { color: 'red' } }}>
         will result in `class="d_flex items_center text_pink hover:text_red"`
       </Button>
-    );
+    )
   }
   ```
 
@@ -3005,51 +2959,51 @@
   **Pattern Example:**
 
   ```tsx title="src/components/Button.tsx"
-  import { hstack } from "../../styled-system/patterns";
-  import { css, cva } from "../../styled-system/css";
+  import { hstack } from '../../styled-system/patterns'
+  import { css, cva } from '../../styled-system/css'
 
   export const Button = ({ css: cssProp = {}, children }) => {
     // using the flex pattern
     const hstackProps = hstack.raw({
-      border: "1px solid",
-      _hover: { color: "blue.400" },
-    });
+      border: '1px solid',
+      _hover: { color: 'blue.400' },
+    })
 
     // merging the styles
-    const className = css(hstackProps, cssProp);
+    const className = css(hstackProps, cssProp)
 
-    return <button className={className}>{children}</button>;
-  };
+    return <button className={className}>{children}</button>
+  }
   ```
 
   **CVA Example:**
 
   ```tsx title="src/components/Button.tsx"
-  import { css, cva } from "../../styled-system/css";
+  import { css, cva } from '../../styled-system/css'
 
   const buttonRecipe = cva({
-    base: { display: "flex", fontSize: "lg" },
+    base: { display: 'flex', fontSize: 'lg' },
     variants: {
       variant: {
-        primary: { color: "white", backgroundColor: "blue.500" },
+        primary: { color: 'white', backgroundColor: 'blue.500' },
       },
     },
-  });
+  })
 
   export const Button = ({ css: cssProp = {}, children }) => {
     const className = css(
       // using the button recipe
-      buttonRecipe.raw({ variant: "primary" }),
+      buttonRecipe.raw({ variant: 'primary' }),
 
       // adding style overrides (internal)
-      { _hover: { color: "blue.400" } },
+      { _hover: { color: 'blue.400' } },
 
       // adding style overrides (external)
       cssProp,
-    );
+    )
 
-    return <button className={className}>{props.children}</button>;
-  };
+    return <button className={className}>{props.children}</button>
+  }
   ```
 
 - 36fdff89: Fix bug in generated js code for atomic slot recipe produce where `splitVariantProps` didn't work without
@@ -3096,14 +3050,7 @@
   Example:
 
   ```tsx
-  <h1
-    className={cx(
-      css({ mx: "3", paddingTop: "4" }),
-      css({ mx: "10", pt: "6" }),
-    )}
-  >
-    Will result in "mx_10 pt_6"
-  </h1>
+  <h1 className={cx(css({ mx: '3', paddingTop: '4' }), css({ mx: '10', pt: '6' }))}>Will result in "mx_10 pt_6"</h1>
   ```
 
 - dfb3f85f: Add missing svg props types
@@ -3148,12 +3095,12 @@
   **Definition**
 
   ```jsx
-  import { sva } from "styled-system/css";
+  import { sva } from 'styled-system/css'
 
   const button = sva({
-    slots: ["label", "icon"],
+    slots: ['label', 'icon'],
     base: {
-      label: { color: "red", textDecoration: "underline" },
+      label: { color: 'red', textDecoration: 'underline' },
     },
     variants: {
       rounded: {
@@ -3161,33 +3108,33 @@
       },
       size: {
         sm: {
-          label: { fontSize: "sm" },
-          icon: { fontSize: "sm" },
+          label: { fontSize: 'sm' },
+          icon: { fontSize: 'sm' },
         },
         lg: {
-          label: { fontSize: "lg" },
-          icon: { fontSize: "lg", color: "pink" },
+          label: { fontSize: 'lg' },
+          icon: { fontSize: 'lg', color: 'pink' },
         },
       },
     },
     defaultVariants: {
-      size: "sm",
+      size: 'sm',
     },
-  });
+  })
   ```
 
   **Usage**
 
   ```jsx
   export function App() {
-    const btnClass = button({ size: "lg", rounded: true });
+    const btnClass = button({ size: 'lg', rounded: true })
 
     return (
       <button>
         <p class={btnClass.label}> Label</p>
         <p class={btnClass.icon}> Icon</p>
       </button>
-    );
+    )
   }
   ```
 
@@ -3252,26 +3199,26 @@
   Update the `jsx` property to be used for advanced tracking of custom pattern components.
 
   ```jsx
-  import { Circle } from "styled-system/jsx";
+  import { Circle } from 'styled-system/jsx'
   const CustomCircle = ({ children, ...props }) => {
-    return <Circle {...props}>{children}</Circle>;
-  };
+    return <Circle {...props}>{children}</Circle>
+  }
   ```
 
   To track the `CustomCircle` component, you can now use the `jsx` property.
 
   ```js
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     patterns: {
       extend: {
         circle: {
-          jsx: ["CustomCircle"],
+          jsx: ['CustomCircle'],
         },
       },
     },
-  });
+  })
   ```
 
 ### Patch Changes
@@ -3369,17 +3316,9 @@
   ```tsx
   const ComponentWithMultipleRecipes = ({ variant }) => {
     return (
-      <button
-        className={cx(
-          pinkRecipe({ variant }),
-          greenRecipe({ variant }),
-          blueRecipe({ variant }),
-        )}
-      >
-        Hello
-      </button>
-    );
-  };
+      <button className={cx(pinkRecipe({ variant }), greenRecipe({ variant }), blueRecipe({ variant }))}>Hello</button>
+    )
+  }
   ```
 
   Given a `panda.config.ts` with recipes each including a common `jsx` tag name, such as:
@@ -3463,7 +3402,7 @@
   ```ts
   staticCss: {
     recipes: {
-      button: [{ size: ["*"], shape: ["*"] }];
+      button: [{ size: ['*'], shape: ['*'] }]
     }
   }
   ```
@@ -3473,7 +3412,7 @@
   ```ts
   staticCss: {
     recipes: {
-      button: ["*"];
+      button: ['*']
     }
   }
   ```
@@ -3511,8 +3450,8 @@
   // panda.config.ts
   export default defineConfig({
     //...
-    syntax: "template-literal",
-  });
+    syntax: 'template-literal',
+  })
   ```
 
   > For existing projects, you might need to run the `panda codegen --clean`
@@ -3544,12 +3483,12 @@
 - 5b344b9c: Add support for disabling shorthand props
 
   ```ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
     shorthands: false,
-  });
+  })
   ```
 
 ### Patch Changes
@@ -3669,11 +3608,11 @@ This hook is called right before writing the codegen files to disk. You can use
 export default defineConfig({
   // ...
   hooks: {
-    "codegen:prepare": ({ artifacts, changed }) => {
+    'codegen:prepare': ({ artifacts, changed }) => {
       // do something with the emitted js/d.ts files
     },
   },
-});
+})
 ```
 
 - 49c760cd: Fix issue where responsive array in css and cva doesn't generate the correct classname
@@ -3691,11 +3630,11 @@ export default defineConfig({
   ```js
   module.exports = {
     plugins: {
-      "@pandacss/dev/postcss": {
-        logfile: "./logs/panda.log",
+      '@pandacss/dev/postcss': {
+        logfile: './logs/panda.log',
       },
     },
-  };
+  }
   ```
 
 - Updated dependencies [74485ef1]
@@ -3734,24 +3673,24 @@ export default defineConfig({
     patterns: {
       hstack: {
         properties: {
-          justify: { type: "property", value: "justifyContent" },
-          gap: { type: "property", value: "gap" },
+          justify: { type: 'property', value: 'justifyContent' },
+          gap: { type: 'property', value: 'gap' },
         },
         // you can also use a token like '10'
-        defaultValues: { gap: "40px" },
+        defaultValues: { gap: '40px' },
         transform(props) {
-          const { justify, gap, ...rest } = props;
+          const { justify, gap, ...rest } = props
           return {
-            display: "flex",
-            alignItems: "center",
+            display: 'flex',
+            alignItems: 'center',
             justifyContent: justify,
             gap,
             ...rest,
-          };
+          }
         },
       },
     },
-  });
+  })
   ```
 
 ### Patch Changes
@@ -3793,54 +3732,39 @@ export default defineConfig({
      * Called when the config is resolved, after all the presets are loaded and merged.
      * This is the first hook called, you can use it to tweak the config before the context is created.
      */
-    "config:resolved": (args: { conf: LoadConfigResult }) => MaybeAsyncReturn;
+    'config:resolved': (args: { conf: LoadConfigResult }) => MaybeAsyncReturn
     /**
      * Called when the Panda context has been created and the API is ready to be used.
      */
-    "context:created": (args: {
-      ctx: ApiInterface;
-      logger: LoggerInterface;
-    }) => void;
+    'context:created': (args: { ctx: ApiInterface; logger: LoggerInterface }) => void
     /**
      * Called when the config file or one of its dependencies (imports) has changed.
      */
-    "config:change": (args: { config: UserConfig }) => MaybeAsyncReturn;
+    'config:change': (args: { config: UserConfig }) => MaybeAsyncReturn
     /**
      * Called after reading the file content but before parsing it.
      * You can use this hook to transform the file content to a tsx-friendly syntax so that Panda's parser can parse it.
      * You can also use this hook to parse the file's content on your side using a custom parser, in this case you don't have to return anything.
      */
-    "parser:before": (args: {
-      filePath: string;
-      content: string;
-    }) => string | void;
+    'parser:before': (args: { filePath: string; content: string }) => string | void
     /**
      * Called after the file styles are extracted and processed into the resulting ParserResult object.
      * You can also use this hook to add your own extraction results from your custom parser to the ParserResult object.
      */
-    "parser:after": (args: {
-      filePath: string;
-      result: ParserResultInterface | undefined;
-    }) => void;
+    'parser:after': (args: { filePath: string; result: ParserResultInterface | undefined }) => void
     /**
      * Called after the codegen is completed
      */
-    "codegen:done": () => MaybeAsyncReturn;
+    'codegen:done': () => MaybeAsyncReturn
     /**
      * Called right before adding the design-system CSS (global, static, preflight, tokens, keyframes) to the final CSS
      * Called right before writing/injecting the final CSS (styles.css) that contains the design-system CSS and the parser CSS
      * You can use it to tweak the CSS content before it's written to disk or injected through the postcss plugin.
      */
-    "cssgen:done": (args: {
-      artifact:
-        | "global"
-        | "static"
-        | "reset"
-        | "tokens"
-        | "keyframes"
-        | "styles.css";
-      content: string;
-    }) => string | void;
+    'cssgen:done': (args: {
+      artifact: 'global' | 'static' | 'reset' | 'tokens' | 'keyframes' | 'styles.css'
+      content: string
+    }) => string | void
   }
   ```
 
@@ -3988,18 +3912,18 @@ export default defineConfig({
 
   ```ts
   // config.strictTokens = true
-  css({ display: "flex" }); // OK, didn't throw
-  css({ display: "block" }); // OK, didn't throw
-  css({ display: "abc" }); // ❌ would throw since 'abc' is not part of predefined values of 'display' even thought there is no config token for 'abc'
+  css({ display: 'flex' }) // OK, didn't throw
+  css({ display: 'block' }) // OK, didn't throw
+  css({ display: 'abc' }) // ❌ would throw since 'abc' is not part of predefined values of 'display' even thought there is no config token for 'abc'
   ```
 
   now:
 
   ```ts
   // config.strictTokens = true
-  css({ display: "flex" }); // OK, didn't throw
-  css({ display: "block" }); // OK, didn't throw
-  css({ display: "abc" }); // ✅ will not throw there is no config token for 'abc'
+  css({ display: 'flex' }) // OK, didn't throw
+  css({ display: 'block' }) // OK, didn't throw
+  css({ display: 'abc' }) // ✅ will not throw there is no config token for 'abc'
   ```
 
   Instead, if you want the v.19.0 behavior, you can use the new `config.strictPropertyValues` option. You can combine it
@@ -4010,79 +3934,79 @@ export default defineConfig({
 
   ```ts
   type StrictableProps =
-    | "alignContent"
-    | "alignItems"
-    | "alignSelf"
-    | "all"
-    | "animationComposition"
-    | "animationDirection"
-    | "animationFillMode"
-    | "appearance"
-    | "backfaceVisibility"
-    | "backgroundAttachment"
-    | "backgroundClip"
-    | "borderCollapse"
-    | "border"
-    | "borderBlock"
-    | "borderBlockEnd"
-    | "borderBlockStart"
-    | "borderBottom"
-    | "borderInline"
-    | "borderInlineEnd"
-    | "borderInlineStart"
-    | "borderLeft"
-    | "borderRight"
-    | "borderTop"
-    | "borderBlockEndStyle"
-    | "borderBlockStartStyle"
-    | "borderBlockStyle"
-    | "borderBottomStyle"
-    | "borderInlineEndStyle"
-    | "borderInlineStartStyle"
-    | "borderInlineStyle"
-    | "borderLeftStyle"
-    | "borderRightStyle"
-    | "borderTopStyle"
-    | "boxDecorationBreak"
-    | "boxSizing"
-    | "breakAfter"
-    | "breakBefore"
-    | "breakInside"
-    | "captionSide"
-    | "clear"
-    | "columnFill"
-    | "columnRuleStyle"
-    | "contentVisibility"
-    | "direction"
-    | "display"
-    | "emptyCells"
-    | "flexDirection"
-    | "flexWrap"
-    | "float"
-    | "fontKerning"
-    | "forcedColorAdjust"
-    | "isolation"
-    | "lineBreak"
-    | "mixBlendMode"
-    | "objectFit"
-    | "outlineStyle"
-    | "overflow"
-    | "overflowX"
-    | "overflowY"
-    | "overflowBlock"
-    | "overflowInline"
-    | "overflowWrap"
-    | "pointerEvents"
-    | "position"
-    | "resize"
-    | "scrollBehavior"
-    | "touchAction"
-    | "transformBox"
-    | "transformStyle"
-    | "userSelect"
-    | "visibility"
-    | "wordBreak"
-    | "writingMode";
+    | 'alignContent'
+    | 'alignItems'
+    | 'alignSelf'
+    | 'all'
+    | 'animationComposition'
+    | 'animationDirection'
+    | 'animationFillMode'
+    | 'appearance'
+    | 'backfaceVisibility'
+    | 'backgroundAttachment'
+    | 'backgroundClip'
+    | 'borderCollapse'
+    | 'border'
+    | 'borderBlock'
+    | 'borderBlockEnd'
+    | 'borderBlockStart'
+    | 'borderBottom'
+    | 'borderInline'
+    | 'borderInlineEnd'
+    | 'borderInlineStart'
+    | 'borderLeft'
+    | 'borderRight'
+    | 'borderTop'
+    | 'borderBlockEndStyle'
+    | 'borderBlockStartStyle'
+    | 'borderBlockStyle'
+    | 'borderBottomStyle'
+    | 'borderInlineEndStyle'
+    | 'borderInlineStartStyle'
+    | 'borderInlineStyle'
+    | 'borderLeftStyle'
+    | 'borderRightStyle'
+    | 'borderTopStyle'
+    | 'boxDecorationBreak'
+    | 'boxSizing'
+    | 'breakAfter'
+    | 'breakBefore'
+    | 'breakInside'
+    | 'captionSide'
+    | 'clear'
+    | 'columnFill'
+    | 'columnRuleStyle'
+    | 'contentVisibility'
+    | 'direction'
+    | 'display'
+    | 'emptyCells'
+    | 'flexDirection'
+    | 'flexWrap'
+    | 'float'
+    | 'fontKerning'
+    | 'forcedColorAdjust'
+    | 'isolation'
+    | 'lineBreak'
+    | 'mixBlendMode'
+    | 'objectFit'
+    | 'outlineStyle'
+    | 'overflow'
+    | 'overflowX'
+    | 'overflowY'
+    | 'overflowBlock'
+    | 'overflowInline'
+    | 'overflowWrap'
+    | 'pointerEvents'
+    | 'position'
+    | 'resize'
+    | 'scrollBehavior'
+    | 'touchAction'
+    | 'transformBox'
+    | 'transformStyle'
+    | 'userSelect'
+    | 'visibility'
+    | 'wordBreak'
+    | 'writingMode'
   ```
 
 - Updated dependencies [657ca5da]
@@ -4153,38 +4077,38 @@ export default defineConfig({
 
   ```ts
   const card = defineRecipe({
-    className: "card",
-    base: { color: "white" },
+    className: 'card',
+    base: { color: 'white' },
     variants: {
       size: {
-        small: { fontSize: "14px" },
-        large: { fontSize: "18px" },
+        small: { fontSize: '14px' },
+        large: { fontSize: '18px' },
       },
       visual: {
-        primary: { backgroundColor: "blue" },
-        secondary: { backgroundColor: "gray" },
+        primary: { backgroundColor: 'blue' },
+        secondary: { backgroundColor: 'gray' },
       },
     },
-  });
+  })
 
   export default defineConfig({
     // ...
     staticCss: {
       recipes: {
-        card: ["*"], // this
+        card: ['*'], // this
 
         // was equivalent to:
         card: [
           // notice how `responsive: true` was implicitly added
-          { size: ["*"], responsive: true },
-          { visual: ["*"], responsive: true },
+          { size: ['*'], responsive: true },
+          { visual: ['*'], responsive: true },
         ],
 
         //   will now correctly be equivalent to:
-        card: [{ size: ["*"] }, { visual: ["*"] }],
+        card: [{ size: ['*'] }, { visual: ['*'] }],
       },
     },
-  });
+  })
   ```
 
   Here's the diff in the generated CSS:
@@ -4331,17 +4255,17 @@ export default defineConfig({
 
   ```ts
   css({
-    bg: "[#3B00B9]", // ✅ was okay
+    bg: '[#3B00B9]', // ✅ was okay
     _dark: {
       // ✅ was okay
-      color: "[#3B00B9]",
+      color: '[#3B00B9]',
     },
 
     // ❌ Not okay, will be fixed in this patch
     color: {
-      _dark: "[#3B00B9]",
+      _dark: '[#3B00B9]',
     },
-  });
+  })
   ```
 
 - 647f05c9: Fix a CSS generation issue with `config.strictTokens` when using the `[xxx]` escape-hatch syntax with `!` or
@@ -4349,9 +4273,9 @@ export default defineConfig({
 
   ```ts
   css({
-    borderWidth: "[2px!]",
-    width: "[2px !important]",
-  });
+    borderWidth: '[2px!]',
+    width: '[2px !important]',
+  })
   ```
 
 - Updated dependencies [8f4ce97c]
@@ -4392,18 +4316,18 @@ export default defineConfig({
   and suffixing with `]`, e.g. writing `[123px]` as a value will bypass the token validation.
 
   ```ts
-  import { css } from "../styled-system/css";
+  import { css } from '../styled-system/css'
 
   css({
     // @ts-expect-error TS will throw when using from strictTokens: true
-    color: "#fff",
+    color: '#fff',
     // @ts-expect-error TS will throw when using from strictTokens: true
-    width: "100px",
+    width: '100px',
 
     // ✅ but this is now allowed:
-    bgColor: "[rgb(51 155 240)]",
-    fontSize: "[12px]",
-  });
+    bgColor: '[rgb(51 155 240)]',
+    fontSize: '[12px]',
+  })
   ```
 
 ### Patch Changes
@@ -4437,49 +4361,49 @@ export default defineConfig({
 - 105f74ce: Add a way to specify a recipe's `staticCss` options from inside a recipe config, e.g.:
 
   ```js
-  import { defineRecipe } from "@pandacss/dev";
+  import { defineRecipe } from '@pandacss/dev'
 
   const card = defineRecipe({
-    className: "card",
-    base: { color: "white" },
+    className: 'card',
+    base: { color: 'white' },
     variants: {
       size: {
-        small: { fontSize: "14px" },
-        large: { fontSize: "18px" },
+        small: { fontSize: '14px' },
+        large: { fontSize: '18px' },
       },
     },
-    staticCss: [{ size: ["*"] }],
-  });
+    staticCss: [{ size: ['*'] }],
+  })
   ```
 
   would be the equivalent of defining it inside the main config:
 
   ```js
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
     staticCss: {
       recipes: {
         card: {
-          size: ["*"],
+          size: ['*'],
         },
       },
     },
-  });
+  })
   ```
 
 - 052283c2: Fix vue `styled` factory internal class merging, for example:
 
   ```vue
   <script setup>
-  import { styled } from "../styled-system/jsx";
+  import { styled } from '../styled-system/jsx'
 
-  const StyledButton = styled("button", {
+  const StyledButton = styled('button', {
     base: {
-      bgColor: "red.300",
+      bgColor: 'red.300',
     },
-  });
+  })
   </script>
   <template>
     <StyledButton id="test" class="test">
@@ -4548,18 +4472,18 @@ export default defineConfig({
 
   ```ts
   // config.strictTokens = true
-  css({ display: "flex" }); // OK, didn't throw
-  css({ display: "block" }); // OK, didn't throw
-  css({ display: "abc" }); // ❌ didn't throw even though 'abc' is not a valid value for 'display'
+  css({ display: 'flex' }) // OK, didn't throw
+  css({ display: 'block' }) // OK, didn't throw
+  css({ display: 'abc' }) // ❌ didn't throw even though 'abc' is not a valid value for 'display'
   ```
 
   Now:
 
   ```ts
   // config.strictTokens = true
-  css({ display: "flex" }); // OK, didn't throw
-  css({ display: "block" }); // OK, didn't throw
-  css({ display: "abc" }); // ✅ will throw since 'abc' is not a valid value for 'display'
+  css({ display: 'flex' }) // OK, didn't throw
+  css({ display: 'block' }) // OK, didn't throw
+  css({ display: 'abc' }) // ✅ will throw since 'abc' is not a valid value for 'display'
   ```
 
 - Updated dependencies [61831040]
@@ -4618,28 +4542,22 @@ export default defineConfig({
 - b7cb2073: Add a `splitCssProps` utility exported from the {outdir}/jsx entrypoint
 
   ```tsx
-  import { splitCssProps, styled } from "../styled-system/jsx";
-  import type { HTMLStyledProps } from "../styled-system/types";
+  import { splitCssProps, styled } from '../styled-system/jsx'
+  import type { HTMLStyledProps } from '../styled-system/types'
 
-  function SplitComponent({ children, ...props }: HTMLStyledProps<"div">) {
-    const [cssProps, restProps] = splitCssProps(props);
+  function SplitComponent({ children, ...props }: HTMLStyledProps<'div'>) {
+    const [cssProps, restProps] = splitCssProps(props)
     return (
-      <styled.div
-        {...restProps}
-        className={css(
-          { display: "flex", height: "20", width: "20" },
-          cssProps,
-        )}
-      >
+      <styled.div {...restProps} className={css({ display: 'flex', height: '20', width: '20' }, cssProps)}>
         {children}
       </styled.div>
-    );
+    )
   }
 
   // Usage
 
   function App() {
-    return <SplitComponent margin="2">Click me</SplitComponent>;
+    return <SplitComponent margin="2">Click me</SplitComponent>
   }
   ```
 
@@ -4732,16 +4650,16 @@ export default defineConfig({
   together and the styles will be merged correctly.
 
   ```jsx
-  const Box = styled("div", {
+  const Box = styled('div', {
     base: {
-      background: "red.light",
-      color: "white",
+      background: 'red.light',
+      color: 'white',
     },
-  });
+  })
 
   const ExtendedBox = styled(Box, {
-    base: { background: "red.dark" },
-  });
+    base: { background: 'red.dark' },
+  })
 
   // <ExtendedBox> will have a background of `red.dark` and a color of `white`
   ```
@@ -4754,32 +4672,32 @@ export default defineConfig({
   - CVA or Inline CVA + Config Recipe = ❌
 
   ```jsx
-  import { button } from "../styled-system/recipes";
+  import { button } from '../styled-system/recipes'
 
-  const Button = styled("div", button);
+  const Button = styled('div', button)
 
   // ❌ This will throw an error
   const ExtendedButton = styled(Button, {
-    base: { background: "red.dark" },
-  });
+    base: { background: 'red.dark' },
+  })
   ```
 
 - fbf062c6: Added a new type to extract variants out of styled components
 
   ```tsx
-  import { StyledVariantProps } from "../styled-system/jsx";
+  import { StyledVariantProps } from '../styled-system/jsx'
 
-  const Button = styled("button", {
-    base: { color: "black" },
+  const Button = styled('button', {
+    base: { color: 'black' },
     variants: {
       state: {
-        error: { color: "red" },
-        success: { color: "green" },
+        error: { color: 'red' },
+        success: { color: 'green' },
       },
     },
-  });
+  })
 
-  type ButtonVariantProps = StyledVariantProps<typeof Button>;
+  type ButtonVariantProps = StyledVariantProps<typeof Button>
   //   ^ { state?: 'error' | 'success' | undefined }
   ```
 
@@ -4881,9 +4799,9 @@ export default defineConfig({
 
   ```ts
   interface FactoryOptions<TProps extends Dict> {
-    dataAttr?: boolean;
-    defaultProps?: TProps;
-    shouldForwardProp?(prop: string, variantKeys: string[]): boolean;
+    dataAttr?: boolean
+    defaultProps?: TProps
+    shouldForwardProp?(prop: string, variantKeys: string[]): boolean
   }
   ```
 
@@ -4891,16 +4809,16 @@ export default defineConfig({
     This is useful for testing and debugging.
 
   ```jsx
-  import { styled } from "../styled-system/jsx";
-  import { button } from "../styled-system/recipes";
+  import { styled } from '../styled-system/jsx'
+  import { button } from '../styled-system/recipes'
 
-  const Button = styled("button", button, { dataAttr: true });
+  const Button = styled('button', button, { dataAttr: true })
 
   const App = () => (
     <Button variant="secondary" mt="10px">
       Button
     </Button>
-  );
+  )
   // Will render something like <button data-recipe="button" class="btn btn--variant_purple mt_10px">Button</button>
   ```
 
@@ -4908,17 +4826,17 @@ export default defineConfig({
     override the default variants or base styles of a recipe.
 
   ```jsx
-  import { styled } from "../styled-system/jsx";
-  import { button } from "../styled-system/recipes";
+  import { styled } from '../styled-system/jsx'
+  import { button } from '../styled-system/recipes'
 
-  const Button = styled("button", button, {
+  const Button = styled('button', button, {
     defaultProps: {
-      variant: "secondary",
-      px: "10px",
+      variant: 'secondary',
+      px: '10px',
     },
-  });
+  })
 
-  const App = () => <Button>Button</Button>;
+  const App = () => <Button>Button</Button>
   // Will render something like <button class="btn btn--variant_secondary px_10px">Button</button>
   ```
 
@@ -4926,20 +4844,19 @@ export default defineConfig({
     props except recipe variants and style props are forwarded.
 
   ```jsx
-  import { styled } from "../styled-system/jsx";
-  import { button } from "../styled-system/recipes";
-  import { isCssProperty } from "../styled-system/jsx";
-  import { motion, isValidMotionProp } from "framer-motion";
+  import { styled } from '../styled-system/jsx'
+  import { button } from '../styled-system/recipes'
+  import { isCssProperty } from '../styled-system/jsx'
+  import { motion, isValidMotionProp } from 'framer-motion'
 
   const StyledMotion = styled(
     motion.div,
     {},
     {
       shouldForwardProp: (prop, variantKeys) =>
-        isValidMotionProp(prop) ||
-        (!variantKeys.includes(prop) && !isCssProperty(prop)),
+        isValidMotionProp(prop) || (!variantKeys.includes(prop) && !isCssProperty(prop)),
     },
-  );
+  )
   ```
 
   - @pandacss/types@0.15.4
@@ -4962,42 +4879,42 @@ export default defineConfig({
 
   ```ts
   export default defineConfig({
-    outdir: "./outdir",
+    outdir: './outdir',
     importMap: {
-      css: "#panda/styled-system/css",
-      recipes: "#panda/styled-system/recipes",
-      patterns: "#panda/styled-system/patterns",
-      jsx: "#panda/styled-system/jsx",
+      css: '#panda/styled-system/css',
+      recipes: '#panda/styled-system/recipes',
+      patterns: '#panda/styled-system/patterns',
+      jsx: '#panda/styled-system/jsx',
     },
-  });
+  })
   ```
 
   Or you could also make your outdir an actual package from your monorepo:
 
   ```ts
   export default defineConfig({
-    outdir: "../packages/styled-system",
+    outdir: '../packages/styled-system',
     importMap: {
-      css: "@monorepo/styled-system",
-      recipes: "@monorepo/styled-system",
-      patterns: "@monorepo/styled-system",
-      jsx: "@monorepo/styled-system",
+      css: '@monorepo/styled-system',
+      recipes: '@monorepo/styled-system',
+      patterns: '@monorepo/styled-system',
+      jsx: '@monorepo/styled-system',
     },
-  });
+  })
   ```
 
   Working with tsconfig paths aliases is easy:
 
   ```ts
   export default defineConfig({
-    outdir: "styled-system",
+    outdir: 'styled-system',
     importMap: {
-      css: "styled-system/css",
-      recipes: "styled-system/recipes",
-      patterns: "styled-system/patterns",
-      jsx: "styled-system/jsx",
+      css: 'styled-system/css',
+      recipes: 'styled-system/recipes',
+      patterns: 'styled-system/patterns',
+      jsx: 'styled-system/jsx',
     },
-  });
+  })
   ```
 
 - 1eb31118: Automatically allow overriding config recipe compoundVariants styles within the `styled` JSX factory,
@@ -5007,22 +4924,22 @@ export default defineConfig({
 
   ```ts file="panda.config.ts"
   const button = defineRecipe({
-    className: "btn",
-    base: { color: "green", fontSize: "16px" },
+    className: 'btn',
+    base: { color: 'green', fontSize: '16px' },
     variants: {
-      size: { small: { fontSize: "14px" } },
+      size: { small: { fontSize: '14px' } },
     },
-    compoundVariants: [{ size: "small", css: { color: "blue" } }],
-  });
+    compoundVariants: [{ size: 'small', css: { color: 'blue' } }],
+  })
   ```
 
   This would previously not merge the `color` property overrides, but now it does:
 
   ```tsx file="example.tsx"
-  import { styled } from "../styled-system/jsx";
-  import { button } from "../styled-system/recipes";
+  import { styled } from '../styled-system/jsx'
+  import { button } from '../styled-system/recipes'
 
-  const Button = styled("button", button);
+  const Button = styled('button', button)
 
   function App() {
     return (
@@ -5031,7 +4948,7 @@ export default defineConfig({
           Click me
         </Button>
       </>
-    );
+    )
   }
   ```
 
@@ -5210,8 +5127,8 @@ export default defineConfig({
     passed in. This is to allow the `css` function to merge the styles correctly.
 
   ```tsx
-  import { css } from "../styled-system/css";
-  css({ mx: "3", paddingTop: "4" }, { mx: "10", pt: "6" }); // => mx_10 pt_6
+  import { css } from '../styled-system/css'
+  css({ mx: '3', paddingTop: '4' }, { mx: '10', pt: '6' }) // => mx_10 pt_6
   ```
 
   > ⚠️ This approach should be preferred for merging styles over the current `cx` function, which will be reverted to
@@ -5236,29 +5153,26 @@ export default defineConfig({
   be merged correctly.
 
   ```tsx title="src/components/Button.tsx"
-  import { css } from "../../styled-system/css";
+  import { css } from '../../styled-system/css'
 
   export const Button = ({ css: cssProp = {}, children }) => {
-    const className = css(
-      { display: "flex", alignItem: "center", color: "black" },
-      cssProp,
-    );
-    return <button className={className}>{children}</button>;
-  };
+    const className = css({ display: 'flex', alignItem: 'center', color: 'black' }, cssProp)
+    return <button className={className}>{children}</button>
+  }
   ```
 
   Then you can use the `Button` component like this:
 
   ```tsx title="src/app/page.tsx"
-  import { css } from "../../styled-system/css";
-  import { Button, Thingy } from "./Button";
+  import { css } from '../../styled-system/css'
+  import { Button, Thingy } from './Button'
 
   export default function Page() {
     return (
-      <Button css={{ color: "pink", _hover: { color: "red" } }}>
+      <Button css={{ color: 'pink', _hover: { color: 'red' } }}>
         will result in `class="d_flex items_center text_pink hover:text_red"`
       </Button>
-    );
+    )
   }
   ```
 
@@ -5270,51 +5184,51 @@ export default defineConfig({
   **Pattern Example:**
 
   ```tsx title="src/components/Button.tsx"
-  import { hstack } from "../../styled-system/patterns";
-  import { css, cva } from "../../styled-system/css";
+  import { hstack } from '../../styled-system/patterns'
+  import { css, cva } from '../../styled-system/css'
 
   export const Button = ({ css: cssProp = {}, children }) => {
     // using the flex pattern
     const hstackProps = hstack.raw({
-      border: "1px solid",
-      _hover: { color: "blue.400" },
-    });
+      border: '1px solid',
+      _hover: { color: 'blue.400' },
+    })
 
     // merging the styles
-    const className = css(hstackProps, cssProp);
+    const className = css(hstackProps, cssProp)
 
-    return <button className={className}>{children}</button>;
-  };
+    return <button className={className}>{children}</button>
+  }
   ```
 
   **CVA Example:**
 
   ```tsx title="src/components/Button.tsx"
-  import { css, cva } from "../../styled-system/css";
+  import { css, cva } from '../../styled-system/css'
 
   const buttonRecipe = cva({
-    base: { display: "flex", fontSize: "lg" },
+    base: { display: 'flex', fontSize: 'lg' },
     variants: {
       variant: {
-        primary: { color: "white", backgroundColor: "blue.500" },
+        primary: { color: 'white', backgroundColor: 'blue.500' },
       },
     },
-  });
+  })
 
   export const Button = ({ css: cssProp = {}, children }) => {
     const className = css(
       // using the button recipe
-      buttonRecipe.raw({ variant: "primary" }),
+      buttonRecipe.raw({ variant: 'primary' }),
 
       // adding style overrides (internal)
-      { _hover: { color: "blue.400" } },
+      { _hover: { color: 'blue.400' } },
 
       // adding style overrides (external)
       cssProp,
-    );
+    )
 
-    return <button className={className}>{props.children}</button>;
-  };
+    return <button className={className}>{props.children}</button>
+  }
   ```
 
 - 36fdff89: Fix bug in generated js code for atomic slot recipe produce where `splitVariantProps` didn't work without
@@ -5361,14 +5275,7 @@ export default defineConfig({
   Example:
 
   ```tsx
-  <h1
-    className={cx(
-      css({ mx: "3", paddingTop: "4" }),
-      css({ mx: "10", pt: "6" }),
-    )}
-  >
-    Will result in "mx_10 pt_6"
-  </h1>
+  <h1 className={cx(css({ mx: '3', paddingTop: '4' }), css({ mx: '10', pt: '6' }))}>Will result in "mx_10 pt_6"</h1>
   ```
 
 - dfb3f85f: Add missing svg props types
@@ -5413,12 +5320,12 @@ export default defineConfig({
   **Definition**
 
   ```jsx
-  import { sva } from "styled-system/css";
+  import { sva } from 'styled-system/css'
 
   const button = sva({
-    slots: ["label", "icon"],
+    slots: ['label', 'icon'],
     base: {
-      label: { color: "red", textDecoration: "underline" },
+      label: { color: 'red', textDecoration: 'underline' },
     },
     variants: {
       rounded: {
@@ -5426,33 +5333,33 @@ export default defineConfig({
       },
       size: {
         sm: {
-          label: { fontSize: "sm" },
-          icon: { fontSize: "sm" },
+          label: { fontSize: 'sm' },
+          icon: { fontSize: 'sm' },
         },
         lg: {
-          label: { fontSize: "lg" },
-          icon: { fontSize: "lg", color: "pink" },
+          label: { fontSize: 'lg' },
+          icon: { fontSize: 'lg', color: 'pink' },
         },
       },
     },
     defaultVariants: {
-      size: "sm",
+      size: 'sm',
     },
-  });
+  })
   ```
 
   **Usage**
 
   ```jsx
   export function App() {
-    const btnClass = button({ size: "lg", rounded: true });
+    const btnClass = button({ size: 'lg', rounded: true })
 
     return (
       <button>
         <p class={btnClass.label}> Label</p>
         <p class={btnClass.icon}> Icon</p>
       </button>
-    );
+    )
   }
   ```
 
@@ -5517,26 +5424,26 @@ export default defineConfig({
   Update the `jsx` property to be used for advanced tracking of custom pattern components.
 
   ```jsx
-  import { Circle } from "styled-system/jsx";
+  import { Circle } from 'styled-system/jsx'
   const CustomCircle = ({ children, ...props }) => {
-    return <Circle {...props}>{children}</Circle>;
-  };
+    return <Circle {...props}>{children}</Circle>
+  }
   ```
 
   To track the `CustomCircle` component, you can now use the `jsx` property.
 
   ```js
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     patterns: {
       extend: {
         circle: {
-          jsx: ["CustomCircle"],
+          jsx: ['CustomCircle'],
         },
       },
     },
-  });
+  })
   ```
 
 ### Patch Changes
@@ -5634,17 +5541,9 @@ export default defineConfig({
   ```tsx
   const ComponentWithMultipleRecipes = ({ variant }) => {
     return (
-      <button
-        className={cx(
-          pinkRecipe({ variant }),
-          greenRecipe({ variant }),
-          blueRecipe({ variant }),
-        )}
-      >
-        Hello
-      </button>
-    );
-  };
+      <button className={cx(pinkRecipe({ variant }), greenRecipe({ variant }), blueRecipe({ variant }))}>Hello</button>
+    )
+  }
   ```
 
   Given a `panda.config.ts` with recipes each including a common `jsx` tag name, such as:
@@ -5728,7 +5627,7 @@ export default defineConfig({
   ```ts
   staticCss: {
     recipes: {
-      button: [{ size: ["*"], shape: ["*"] }];
+      button: [{ size: ['*'], shape: ['*'] }]
     }
   }
   ```
@@ -5738,7 +5637,7 @@ export default defineConfig({
   ```ts
   staticCss: {
     recipes: {
-      button: ["*"];
+      button: ['*']
     }
   }
   ```
@@ -5776,8 +5675,8 @@ export default defineConfig({
   // panda.config.ts
   export default defineConfig({
     //...
-    syntax: "template-literal",
-  });
+    syntax: 'template-literal',
+  })
   ```
 
   > For existing projects, you might need to run the `panda codegen --clean`
@@ -5809,12 +5708,12 @@ export default defineConfig({
 - 5b344b9c: Add support for disabling shorthand props
 
   ```ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
     shorthands: false,
-  });
+  })
   ```
 
 ### Patch Changes
@@ -5937,20 +5836,20 @@ Will now allow you to use the following syntax for token path:
   export default defaultConfig({
     conditions: {
       extend: {
-        supportHover: ["@media (hover: hover) and (pointer: fine)", "&:hover"],
+        supportHover: ['@media (hover: hover) and (pointer: fine)', '&:hover'],
       },
     },
-  });
+  })
   ```
 
   ```ts
-  import { css } from "../styled-system/css";
+  import { css } from '../styled-system/css'
 
   css({
     _supportHover: {
-      color: "red",
+      color: 'red',
     },
-  });
+  })
   ```
 
   will generate the following CSS:
@@ -6021,10 +5920,10 @@ Will now allow you to use the following syntax for token path:
 
   ```ts
   css({
-    padding: "1px",
-    paddingTop: "3px",
-    paddingBottom: "4px",
-  });
+    padding: '1px',
+    paddingTop: '3px',
+    paddingBottom: '4px',
+  })
   ```
 
   Will now always generate the following css:
@@ -6134,24 +6033,24 @@ Will now allow you to use the following syntax for token path:
     patterns: {
       hstack: {
         properties: {
-          justify: { type: "property", value: "justifyContent" },
-          gap: { type: "property", value: "gap" },
+          justify: { type: 'property', value: 'justifyContent' },
+          gap: { type: 'property', value: 'gap' },
         },
         // you can also use a token like '10'
-        defaultValues: { gap: "40px" },
+        defaultValues: { gap: '40px' },
         transform(props) {
-          const { justify, gap, ...rest } = props;
+          const { justify, gap, ...rest } = props
           return {
-            display: "flex",
-            alignItems: "center",
+            display: 'flex',
+            alignItems: 'center',
             justifyContent: justify,
             gap,
             ...rest,
-          };
+          }
         },
       },
     },
-  });
+  })
   ```
 
 ### Patch Changes
@@ -6193,54 +6092,39 @@ Will now allow you to use the following syntax for token path:
      * Called when the config is resolved, after all the presets are loaded and merged.
      * This is the first hook called, you can use it to tweak the config before the context is created.
      */
-    "config:resolved": (args: { conf: LoadConfigResult }) => MaybeAsyncReturn;
+    'config:resolved': (args: { conf: LoadConfigResult }) => MaybeAsyncReturn
     /**
      * Called when the Panda context has been created and the API is ready to be used.
      */
-    "context:created": (args: {
-      ctx: ApiInterface;
-      logger: LoggerInterface;
-    }) => void;
+    'context:created': (args: { ctx: ApiInterface; logger: LoggerInterface }) => void
     /**
      * Called when the config file or one of its dependencies (imports) has changed.
      */
-    "config:change": (args: { config: UserConfig }) => MaybeAsyncReturn;
+    'config:change': (args: { config: UserConfig }) => MaybeAsyncReturn
     /**
      * Called after reading the file content but before parsing it.
      * You can use this hook to transform the file content to a tsx-friendly syntax so that Panda's parser can parse it.
      * You can also use this hook to parse the file's content on your side using a custom parser, in this case you don't have to return anything.
      */
-    "parser:before": (args: {
-      filePath: string;
-      content: string;
-    }) => string | void;
+    'parser:before': (args: { filePath: string; content: string }) => string | void
     /**
      * Called after the file styles are extracted and processed into the resulting ParserResult object.
      * You can also use this hook to add your own extraction results from your custom parser to the ParserResult object.
      */
-    "parser:after": (args: {
-      filePath: string;
-      result: ParserResultInterface | undefined;
-    }) => void;
+    'parser:after': (args: { filePath: string; result: ParserResultInterface | undefined }) => void
     /**
      * Called after the codegen is completed
      */
-    "codegen:done": () => MaybeAsyncReturn;
+    'codegen:done': () => MaybeAsyncReturn
     /**
      * Called right before adding the design-system CSS (global, static, preflight, tokens, keyframes) to the final CSS
      * Called right before writing/injecting the final CSS (styles.css) that contains the design-system CSS and the parser CSS
      * You can use it to tweak the CSS content before it's written to disk or injected through the postcss plugin.
      */
-    "cssgen:done": (args: {
-      artifact:
-        | "global"
-        | "static"
-        | "reset"
-        | "tokens"
-        | "keyframes"
-        | "styles.css";
-      content: string;
-    }) => string | void;
+    'cssgen:done': (args: {
+      artifact: 'global' | 'static' | 'reset' | 'tokens' | 'keyframes' | 'styles.css'
+      content: string
+    }) => string | void
   }
   ```
 
@@ -6388,18 +6272,18 @@ Will now allow you to use the following syntax for token path:
 
   ```ts
   // config.strictTokens = true
-  css({ display: "flex" }); // OK, didn't throw
-  css({ display: "block" }); // OK, didn't throw
-  css({ display: "abc" }); // ❌ would throw since 'abc' is not part of predefined values of 'display' even thought there is no config token for 'abc'
+  css({ display: 'flex' }) // OK, didn't throw
+  css({ display: 'block' }) // OK, didn't throw
+  css({ display: 'abc' }) // ❌ would throw since 'abc' is not part of predefined values of 'display' even thought there is no config token for 'abc'
   ```
 
   now:
 
   ```ts
   // config.strictTokens = true
-  css({ display: "flex" }); // OK, didn't throw
-  css({ display: "block" }); // OK, didn't throw
-  css({ display: "abc" }); // ✅ will not throw there is no config token for 'abc'
+  css({ display: 'flex' }) // OK, didn't throw
+  css({ display: 'block' }) // OK, didn't throw
+  css({ display: 'abc' }) // ✅ will not throw there is no config token for 'abc'
   ```
 
   Instead, if you want the v.19.0 behavior, you can use the new `config.strictPropertyValues` option. You can combine it
@@ -6410,79 +6294,79 @@ Will now allow you to use the following syntax for token path:
 
   ```ts
   type StrictableProps =
-    | "alignContent"
-    | "alignItems"
-    | "alignSelf"
-    | "all"
-    | "animationComposition"
-    | "animationDirection"
-    | "animationFillMode"
-    | "appearance"
-    | "backfaceVisibility"
-    | "backgroundAttachment"
-    | "backgroundClip"
-    | "borderCollapse"
-    | "border"
-    | "borderBlock"
-    | "borderBlockEnd"
-    | "borderBlockStart"
-    | "borderBottom"
-    | "borderInline"
-    | "borderInlineEnd"
-    | "borderInlineStart"
-    | "borderLeft"
-    | "borderRight"
-    | "borderTop"
-    | "borderBlockEndStyle"
-    | "borderBlockStartStyle"
-    | "borderBlockStyle"
-    | "borderBottomStyle"
-    | "borderInlineEndStyle"
-    | "borderInlineStartStyle"
-    | "borderInlineStyle"
-    | "borderLeftStyle"
-    | "borderRightStyle"
-    | "borderTopStyle"
-    | "boxDecorationBreak"
-    | "boxSizing"
-    | "breakAfter"
-    | "breakBefore"
-    | "breakInside"
-    | "captionSide"
-    | "clear"
-    | "columnFill"
-    | "columnRuleStyle"
-    | "contentVisibility"
-    | "direction"
-    | "display"
-    | "emptyCells"
-    | "flexDirection"
-    | "flexWrap"
-    | "float"
-    | "fontKerning"
-    | "forcedColorAdjust"
-    | "isolation"
-    | "lineBreak"
-    | "mixBlendMode"
-    | "objectFit"
-    | "outlineStyle"
-    | "overflow"
-    | "overflowX"
-    | "overflowY"
-    | "overflowBlock"
-    | "overflowInline"
-    | "overflowWrap"
-    | "pointerEvents"
-    | "position"
-    | "resize"
-    | "scrollBehavior"
-    | "touchAction"
-    | "transformBox"
-    | "transformStyle"
-    | "userSelect"
-    | "visibility"
-    | "wordBreak"
-    | "writingMode";
+    | 'alignContent'
+    | 'alignItems'
+    | 'alignSelf'
+    | 'all'
+    | 'animationComposition'
+    | 'animationDirection'
+    | 'animationFillMode'
+    | 'appearance'
+    | 'backfaceVisibility'
+    | 'backgroundAttachment'
+    | 'backgroundClip'
+    | 'borderCollapse'
+    | 'border'
+    | 'borderBlock'
+    | 'borderBlockEnd'
+    | 'borderBlockStart'
+    | 'borderBottom'
+    | 'borderInline'
+    | 'borderInlineEnd'
+    | 'borderInlineStart'
+    | 'borderLeft'
+    | 'borderRight'
+    | 'borderTop'
+    | 'borderBlockEndStyle'
+    | 'borderBlockStartStyle'
+    | 'borderBlockStyle'
+    | 'borderBottomStyle'
+    | 'borderInlineEndStyle'
+    | 'borderInlineStartStyle'
+    | 'borderInlineStyle'
+    | 'borderLeftStyle'
+    | 'borderRightStyle'
+    | 'borderTopStyle'
+    | 'boxDecorationBreak'
+    | 'boxSizing'
+    | 'breakAfter'
+    | 'breakBefore'
+    | 'breakInside'
+    | 'captionSide'
+    | 'clear'
+    | 'columnFill'
+    | 'columnRuleStyle'
+    | 'contentVisibility'
+    | 'direction'
+    | 'display'
+    | 'emptyCells'
+    | 'flexDirection'
+    | 'flexWrap'
+    | 'float'
+    | 'fontKerning'
+    | 'forcedColorAdjust'
+    | 'isolation'
+    | 'lineBreak'
+    | 'mixBlendMode'
+    | 'objectFit'
+    | 'outlineStyle'
+    | 'overflow'
+    | 'overflowX'
+    | 'overflowY'
+    | 'overflowBlock'
+    | 'overflowInline'
+    | 'overflowWrap'
+    | 'pointerEvents'
+    | 'position'
+    | 'resize'
+    | 'scrollBehavior'
+    | 'touchAction'
+    | 'transformBox'
+    | 'transformStyle'
+    | 'userSelect'
+    | 'visibility'
+    | 'wordBreak'
+    | 'writingMode'
   ```
 
 - Updated dependencies [657ca5da]
@@ -6553,38 +6437,38 @@ Will now allow you to use the following syntax for token path:
 
   ```ts
   const card = defineRecipe({
-    className: "card",
-    base: { color: "white" },
+    className: 'card',
+    base: { color: 'white' },
     variants: {
       size: {
-        small: { fontSize: "14px" },
-        large: { fontSize: "18px" },
+        small: { fontSize: '14px' },
+        large: { fontSize: '18px' },
       },
       visual: {
-        primary: { backgroundColor: "blue" },
-        secondary: { backgroundColor: "gray" },
+        primary: { backgroundColor: 'blue' },
+        secondary: { backgroundColor: 'gray' },
       },
     },
-  });
+  })
 
   export default defineConfig({
     // ...
     staticCss: {
       recipes: {
-        card: ["*"], // this
+        card: ['*'], // this
 
         // was equivalent to:
         card: [
           // notice how `responsive: true` was implicitly added
-          { size: ["*"], responsive: true },
-          { visual: ["*"], responsive: true },
+          { size: ['*'], responsive: true },
+          { visual: ['*'], responsive: true },
         ],
 
         //   will now correctly be equivalent to:
-        card: [{ size: ["*"] }, { visual: ["*"] }],
+        card: [{ size: ['*'] }, { visual: ['*'] }],
       },
     },
-  });
+  })
   ```
 
   Here's the diff in the generated CSS:
@@ -6731,17 +6615,17 @@ Will now allow you to use the following syntax for token path:
 
   ```ts
   css({
-    bg: "[#3B00B9]", // ✅ was okay
+    bg: '[#3B00B9]', // ✅ was okay
     _dark: {
       // ✅ was okay
-      color: "[#3B00B9]",
+      color: '[#3B00B9]',
     },
 
     // ❌ Not okay, will be fixed in this patch
     color: {
-      _dark: "[#3B00B9]",
+      _dark: '[#3B00B9]',
     },
-  });
+  })
   ```
 
 - 647f05c9: Fix a CSS generation issue with `config.strictTokens` when using the `[xxx]` escape-hatch syntax with `!` or
@@ -6749,9 +6633,9 @@ Will now allow you to use the following syntax for token path:
 
   ```ts
   css({
-    borderWidth: "[2px!]",
-    width: "[2px !important]",
-  });
+    borderWidth: '[2px!]',
+    width: '[2px !important]',
+  })
   ```
 
 - Updated dependencies [8f4ce97c]
@@ -6792,18 +6676,18 @@ Will now allow you to use the following syntax for token path:
   and suffixing with `]`, e.g. writing `[123px]` as a value will bypass the token validation.
 
   ```ts
-  import { css } from "../styled-system/css";
+  import { css } from '../styled-system/css'
 
   css({
     // @ts-expect-error TS will throw when using from strictTokens: true
-    color: "#fff",
+    color: '#fff',
     // @ts-expect-error TS will throw when using from strictTokens: true
-    width: "100px",
+    width: '100px',
 
     // ✅ but this is now allowed:
-    bgColor: "[rgb(51 155 240)]",
-    fontSize: "[12px]",
-  });
+    bgColor: '[rgb(51 155 240)]',
+    fontSize: '[12px]',
+  })
   ```
 
 ### Patch Changes
@@ -6837,49 +6721,49 @@ Will now allow you to use the following syntax for token path:
 - 105f74ce: Add a way to specify a recipe's `staticCss` options from inside a recipe config, e.g.:
 
   ```js
-  import { defineRecipe } from "@pandacss/dev";
+  import { defineRecipe } from '@pandacss/dev'
 
   const card = defineRecipe({
-    className: "card",
-    base: { color: "white" },
+    className: 'card',
+    base: { color: 'white' },
     variants: {
       size: {
-        small: { fontSize: "14px" },
-        large: { fontSize: "18px" },
+        small: { fontSize: '14px' },
+        large: { fontSize: '18px' },
       },
     },
-    staticCss: [{ size: ["*"] }],
-  });
+    staticCss: [{ size: ['*'] }],
+  })
   ```
 
   would be the equivalent of defining it inside the main config:
 
   ```js
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
     staticCss: {
       recipes: {
         card: {
-          size: ["*"],
+          size: ['*'],
         },
       },
     },
-  });
+  })
   ```
 
 - 052283c2: Fix vue `styled` factory internal class merging, for example:
 
   ```vue
   <script setup>
-  import { styled } from "../styled-system/jsx";
+  import { styled } from '../styled-system/jsx'
 
-  const StyledButton = styled("button", {
+  const StyledButton = styled('button', {
     base: {
-      bgColor: "red.300",
+      bgColor: 'red.300',
     },
-  });
+  })
   </script>
   <template>
     <StyledButton id="test" class="test">
@@ -6948,18 +6832,18 @@ Will now allow you to use the following syntax for token path:
 
   ```ts
   // config.strictTokens = true
-  css({ display: "flex" }); // OK, didn't throw
-  css({ display: "block" }); // OK, didn't throw
-  css({ display: "abc" }); // ❌ didn't throw even though 'abc' is not a valid value for 'display'
+  css({ display: 'flex' }) // OK, didn't throw
+  css({ display: 'block' }) // OK, didn't throw
+  css({ display: 'abc' }) // ❌ didn't throw even though 'abc' is not a valid value for 'display'
   ```
 
   Now:
 
   ```ts
   // config.strictTokens = true
-  css({ display: "flex" }); // OK, didn't throw
-  css({ display: "block" }); // OK, didn't throw
-  css({ display: "abc" }); // ✅ will throw since 'abc' is not a valid value for 'display'
+  css({ display: 'flex' }) // OK, didn't throw
+  css({ display: 'block' }) // OK, didn't throw
+  css({ display: 'abc' }) // ✅ will throw since 'abc' is not a valid value for 'display'
   ```
 
 - Updated dependencies [61831040]
@@ -7018,28 +6902,22 @@ Will now allow you to use the following syntax for token path:
 - b7cb2073: Add a `splitCssProps` utility exported from the {outdir}/jsx entrypoint
 
   ```tsx
-  import { splitCssProps, styled } from "../styled-system/jsx";
-  import type { HTMLStyledProps } from "../styled-system/types";
+  import { splitCssProps, styled } from '../styled-system/jsx'
+  import type { HTMLStyledProps } from '../styled-system/types'
 
-  function SplitComponent({ children, ...props }: HTMLStyledProps<"div">) {
-    const [cssProps, restProps] = splitCssProps(props);
+  function SplitComponent({ children, ...props }: HTMLStyledProps<'div'>) {
+    const [cssProps, restProps] = splitCssProps(props)
     return (
-      <styled.div
-        {...restProps}
-        className={css(
-          { display: "flex", height: "20", width: "20" },
-          cssProps,
-        )}
-      >
+      <styled.div {...restProps} className={css({ display: 'flex', height: '20', width: '20' }, cssProps)}>
         {children}
       </styled.div>
-    );
+    )
   }
 
   // Usage
 
   function App() {
-    return <SplitComponent margin="2">Click me</SplitComponent>;
+    return <SplitComponent margin="2">Click me</SplitComponent>
   }
   ```
 
@@ -7132,16 +7010,16 @@ Will now allow you to use the following syntax for token path:
   together and the styles will be merged correctly.
 
   ```jsx
-  const Box = styled("div", {
+  const Box = styled('div', {
     base: {
-      background: "red.light",
-      color: "white",
+      background: 'red.light',
+      color: 'white',
     },
-  });
+  })
 
   const ExtendedBox = styled(Box, {
-    base: { background: "red.dark" },
-  });
+    base: { background: 'red.dark' },
+  })
 
   // <ExtendedBox> will have a background of `red.dark` and a color of `white`
   ```
@@ -7154,32 +7032,32 @@ Will now allow you to use the following syntax for token path:
   - CVA or Inline CVA + Config Recipe = ❌
 
   ```jsx
-  import { button } from "../styled-system/recipes";
+  import { button } from '../styled-system/recipes'
 
-  const Button = styled("div", button);
+  const Button = styled('div', button)
 
   // ❌ This will throw an error
   const ExtendedButton = styled(Button, {
-    base: { background: "red.dark" },
-  });
+    base: { background: 'red.dark' },
+  })
   ```
 
 - fbf062c6: Added a new type to extract variants out of styled components
 
   ```tsx
-  import { StyledVariantProps } from "../styled-system/jsx";
+  import { StyledVariantProps } from '../styled-system/jsx'
 
-  const Button = styled("button", {
-    base: { color: "black" },
+  const Button = styled('button', {
+    base: { color: 'black' },
     variants: {
       state: {
-        error: { color: "red" },
-        success: { color: "green" },
+        error: { color: 'red' },
+        success: { color: 'green' },
       },
     },
-  });
+  })
 
-  type ButtonVariantProps = StyledVariantProps<typeof Button>;
+  type ButtonVariantProps = StyledVariantProps<typeof Button>
   //   ^ { state?: 'error' | 'success' | undefined }
   ```
 
@@ -7281,9 +7159,9 @@ Will now allow you to use the following syntax for token path:
 
   ```ts
   interface FactoryOptions<TProps extends Dict> {
-    dataAttr?: boolean;
-    defaultProps?: TProps;
-    shouldForwardProp?(prop: string, variantKeys: string[]): boolean;
+    dataAttr?: boolean
+    defaultProps?: TProps
+    shouldForwardProp?(prop: string, variantKeys: string[]): boolean
   }
   ```
 
@@ -7291,16 +7169,16 @@ Will now allow you to use the following syntax for token path:
     This is useful for testing and debugging.
 
   ```jsx
-  import { styled } from "../styled-system/jsx";
-  import { button } from "../styled-system/recipes";
+  import { styled } from '../styled-system/jsx'
+  import { button } from '../styled-system/recipes'
 
-  const Button = styled("button", button, { dataAttr: true });
+  const Button = styled('button', button, { dataAttr: true })
 
   const App = () => (
     <Button variant="secondary" mt="10px">
       Button
     </Button>
-  );
+  )
   // Will render something like <button data-recipe="button" class="btn btn--variant_purple mt_10px">Button</button>
   ```
 
@@ -7308,17 +7186,17 @@ Will now allow you to use the following syntax for token path:
     override the default variants or base styles of a recipe.
 
   ```jsx
-  import { styled } from "../styled-system/jsx";
-  import { button } from "../styled-system/recipes";
+  import { styled } from '../styled-system/jsx'
+  import { button } from '../styled-system/recipes'
 
-  const Button = styled("button", button, {
+  const Button = styled('button', button, {
     defaultProps: {
-      variant: "secondary",
-      px: "10px",
+      variant: 'secondary',
+      px: '10px',
     },
-  });
+  })
 
-  const App = () => <Button>Button</Button>;
+  const App = () => <Button>Button</Button>
   // Will render something like <button class="btn btn--variant_secondary px_10px">Button</button>
   ```
 
@@ -7326,20 +7204,19 @@ Will now allow you to use the following syntax for token path:
     props except recipe variants and style props are forwarded.
 
   ```jsx
-  import { styled } from "../styled-system/jsx";
-  import { button } from "../styled-system/recipes";
-  import { isCssProperty } from "../styled-system/jsx";
-  import { motion, isValidMotionProp } from "framer-motion";
+  import { styled } from '../styled-system/jsx'
+  import { button } from '../styled-system/recipes'
+  import { isCssProperty } from '../styled-system/jsx'
+  import { motion, isValidMotionProp } from 'framer-motion'
 
   const StyledMotion = styled(
     motion.div,
     {},
     {
       shouldForwardProp: (prop, variantKeys) =>
-        isValidMotionProp(prop) ||
-        (!variantKeys.includes(prop) && !isCssProperty(prop)),
+        isValidMotionProp(prop) || (!variantKeys.includes(prop) && !isCssProperty(prop)),
     },
-  );
+  )
   ```
 
   - @pandacss/types@0.15.4
@@ -7362,42 +7239,42 @@ Will now allow you to use the following syntax for token path:
 
   ```ts
   export default defineConfig({
-    outdir: "./outdir",
+    outdir: './outdir',
     importMap: {
-      css: "#panda/styled-system/css",
-      recipes: "#panda/styled-system/recipes",
-      patterns: "#panda/styled-system/patterns",
-      jsx: "#panda/styled-system/jsx",
+      css: '#panda/styled-system/css',
+      recipes: '#panda/styled-system/recipes',
+      patterns: '#panda/styled-system/patterns',
+      jsx: '#panda/styled-system/jsx',
     },
-  });
+  })
   ```
 
   Or you could also make your outdir an actual package from your monorepo:
 
   ```ts
   export default defineConfig({
-    outdir: "../packages/styled-system",
+    outdir: '../packages/styled-system',
     importMap: {
-      css: "@monorepo/styled-system",
-      recipes: "@monorepo/styled-system",
-      patterns: "@monorepo/styled-system",
-      jsx: "@monorepo/styled-system",
+      css: '@monorepo/styled-system',
+      recipes: '@monorepo/styled-system',
+      patterns: '@monorepo/styled-system',
+      jsx: '@monorepo/styled-system',
     },
-  });
+  })
   ```
 
   Working with tsconfig paths aliases is easy:
 
   ```ts
   export default defineConfig({
-    outdir: "styled-system",
+    outdir: 'styled-system',
     importMap: {
-      css: "styled-system/css",
-      recipes: "styled-system/recipes",
-      patterns: "styled-system/patterns",
-      jsx: "styled-system/jsx",
+      css: 'styled-system/css',
+      recipes: 'styled-system/recipes',
+      patterns: 'styled-system/patterns',
+      jsx: 'styled-system/jsx',
     },
-  });
+  })
   ```
 
 - 1eb31118: Automatically allow overriding config recipe compoundVariants styles within the `styled` JSX factory,
@@ -7407,22 +7284,22 @@ Will now allow you to use the following syntax for token path:
 
   ```ts file="panda.config.ts"
   const button = defineRecipe({
-    className: "btn",
-    base: { color: "green", fontSize: "16px" },
+    className: 'btn',
+    base: { color: 'green', fontSize: '16px' },
     variants: {
-      size: { small: { fontSize: "14px" } },
+      size: { small: { fontSize: '14px' } },
     },
-    compoundVariants: [{ size: "small", css: { color: "blue" } }],
-  });
+    compoundVariants: [{ size: 'small', css: { color: 'blue' } }],
+  })
   ```
 
   This would previously not merge the `color` property overrides, but now it does:
 
   ```tsx file="example.tsx"
-  import { styled } from "../styled-system/jsx";
-  import { button } from "../styled-system/recipes";
+  import { styled } from '../styled-system/jsx'
+  import { button } from '../styled-system/recipes'
 
-  const Button = styled("button", button);
+  const Button = styled('button', button)
 
   function App() {
     return (
@@ -7431,7 +7308,7 @@ Will now allow you to use the following syntax for token path:
           Click me
         </Button>
       </>
-    );
+    )
   }
   ```
 
@@ -7610,8 +7487,8 @@ Will now allow you to use the following syntax for token path:
     passed in. This is to allow the `css` function to merge the styles correctly.
 
   ```tsx
-  import { css } from "../styled-system/css";
-  css({ mx: "3", paddingTop: "4" }, { mx: "10", pt: "6" }); // => mx_10 pt_6
+  import { css } from '../styled-system/css'
+  css({ mx: '3', paddingTop: '4' }, { mx: '10', pt: '6' }) // => mx_10 pt_6
   ```
 
   > ⚠️ This approach should be preferred for merging styles over the current `cx` function, which will be reverted to
@@ -7636,29 +7513,26 @@ Will now allow you to use the following syntax for token path:
   be merged correctly.
 
   ```tsx title="src/components/Button.tsx"
-  import { css } from "../../styled-system/css";
+  import { css } from '../../styled-system/css'
 
   export const Button = ({ css: cssProp = {}, children }) => {
-    const className = css(
-      { display: "flex", alignItem: "center", color: "black" },
-      cssProp,
-    );
-    return <button className={className}>{children}</button>;
-  };
+    const className = css({ display: 'flex', alignItem: 'center', color: 'black' }, cssProp)
+    return <button className={className}>{children}</button>
+  }
   ```
 
   Then you can use the `Button` component like this:
 
   ```tsx title="src/app/page.tsx"
-  import { css } from "../../styled-system/css";
-  import { Button, Thingy } from "./Button";
+  import { css } from '../../styled-system/css'
+  import { Button, Thingy } from './Button'
 
   export default function Page() {
     return (
-      <Button css={{ color: "pink", _hover: { color: "red" } }}>
+      <Button css={{ color: 'pink', _hover: { color: 'red' } }}>
         will result in `class="d_flex items_center text_pink hover:text_red"`
       </Button>
-    );
+    )
   }
   ```
 
@@ -7670,51 +7544,51 @@ Will now allow you to use the following syntax for token path:
   **Pattern Example:**
 
   ```tsx title="src/components/Button.tsx"
-  import { hstack } from "../../styled-system/patterns";
-  import { css, cva } from "../../styled-system/css";
+  import { hstack } from '../../styled-system/patterns'
+  import { css, cva } from '../../styled-system/css'
 
   export const Button = ({ css: cssProp = {}, children }) => {
     // using the flex pattern
     const hstackProps = hstack.raw({
-      border: "1px solid",
-      _hover: { color: "blue.400" },
-    });
+      border: '1px solid',
+      _hover: { color: 'blue.400' },
+    })
 
     // merging the styles
-    const className = css(hstackProps, cssProp);
+    const className = css(hstackProps, cssProp)
 
-    return <button className={className}>{children}</button>;
-  };
+    return <button className={className}>{children}</button>
+  }
   ```
 
   **CVA Example:**
 
   ```tsx title="src/components/Button.tsx"
-  import { css, cva } from "../../styled-system/css";
+  import { css, cva } from '../../styled-system/css'
 
   const buttonRecipe = cva({
-    base: { display: "flex", fontSize: "lg" },
+    base: { display: 'flex', fontSize: 'lg' },
     variants: {
       variant: {
-        primary: { color: "white", backgroundColor: "blue.500" },
+        primary: { color: 'white', backgroundColor: 'blue.500' },
       },
     },
-  });
+  })
 
   export const Button = ({ css: cssProp = {}, children }) => {
     const className = css(
       // using the button recipe
-      buttonRecipe.raw({ variant: "primary" }),
+      buttonRecipe.raw({ variant: 'primary' }),
 
       // adding style overrides (internal)
-      { _hover: { color: "blue.400" } },
+      { _hover: { color: 'blue.400' } },
 
       // adding style overrides (external)
       cssProp,
-    );
+    )
 
-    return <button className={className}>{props.children}</button>;
-  };
+    return <button className={className}>{props.children}</button>
+  }
   ```
 
 - 36fdff89: Fix bug in generated js code for atomic slot recipe produce where `splitVariantProps` didn't work without
@@ -7761,14 +7635,7 @@ Will now allow you to use the following syntax for token path:
   Example:
 
   ```tsx
-  <h1
-    className={cx(
-      css({ mx: "3", paddingTop: "4" }),
-      css({ mx: "10", pt: "6" }),
-    )}
-  >
-    Will result in "mx_10 pt_6"
-  </h1>
+  <h1 className={cx(css({ mx: '3', paddingTop: '4' }), css({ mx: '10', pt: '6' }))}>Will result in "mx_10 pt_6"</h1>
   ```
 
 - dfb3f85f: Add missing svg props types
@@ -7813,12 +7680,12 @@ Will now allow you to use the following syntax for token path:
   **Definition**
 
   ```jsx
-  import { sva } from "styled-system/css";
+  import { sva } from 'styled-system/css'
 
   const button = sva({
-    slots: ["label", "icon"],
+    slots: ['label', 'icon'],
     base: {
-      label: { color: "red", textDecoration: "underline" },
+      label: { color: 'red', textDecoration: 'underline' },
     },
     variants: {
       rounded: {
@@ -7826,33 +7693,33 @@ Will now allow you to use the following syntax for token path:
       },
       size: {
         sm: {
-          label: { fontSize: "sm" },
-          icon: { fontSize: "sm" },
+          label: { fontSize: 'sm' },
+          icon: { fontSize: 'sm' },
         },
         lg: {
-          label: { fontSize: "lg" },
-          icon: { fontSize: "lg", color: "pink" },
+          label: { fontSize: 'lg' },
+          icon: { fontSize: 'lg', color: 'pink' },
         },
       },
     },
     defaultVariants: {
-      size: "sm",
+      size: 'sm',
     },
-  });
+  })
   ```
 
   **Usage**
 
   ```jsx
   export function App() {
-    const btnClass = button({ size: "lg", rounded: true });
+    const btnClass = button({ size: 'lg', rounded: true })
 
     return (
       <button>
         <p class={btnClass.label}> Label</p>
         <p class={btnClass.icon}> Icon</p>
       </button>
-    );
+    )
   }
   ```
 
@@ -7917,26 +7784,26 @@ Will now allow you to use the following syntax for token path:
   Update the `jsx` property to be used for advanced tracking of custom pattern components.
 
   ```jsx
-  import { Circle } from "styled-system/jsx";
+  import { Circle } from 'styled-system/jsx'
   const CustomCircle = ({ children, ...props }) => {
-    return <Circle {...props}>{children}</Circle>;
-  };
+    return <Circle {...props}>{children}</Circle>
+  }
   ```
 
   To track the `CustomCircle` component, you can now use the `jsx` property.
 
   ```js
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     patterns: {
       extend: {
         circle: {
-          jsx: ["CustomCircle"],
+          jsx: ['CustomCircle'],
         },
       },
     },
-  });
+  })
   ```
 
 ### Patch Changes
@@ -8034,17 +7901,9 @@ Will now allow you to use the following syntax for token path:
   ```tsx
   const ComponentWithMultipleRecipes = ({ variant }) => {
     return (
-      <button
-        className={cx(
-          pinkRecipe({ variant }),
-          greenRecipe({ variant }),
-          blueRecipe({ variant }),
-        )}
-      >
-        Hello
-      </button>
-    );
-  };
+      <button className={cx(pinkRecipe({ variant }), greenRecipe({ variant }), blueRecipe({ variant }))}>Hello</button>
+    )
+  }
   ```
 
   Given a `panda.config.ts` with recipes each including a common `jsx` tag name, such as:
@@ -8128,7 +7987,7 @@ Will now allow you to use the following syntax for token path:
   ```ts
   staticCss: {
     recipes: {
-      button: [{ size: ["*"], shape: ["*"] }];
+      button: [{ size: ['*'], shape: ['*'] }]
     }
   }
   ```
@@ -8138,7 +7997,7 @@ Will now allow you to use the following syntax for token path:
   ```ts
   staticCss: {
     recipes: {
-      button: ["*"];
+      button: ['*']
     }
   }
   ```
@@ -8176,8 +8035,8 @@ Will now allow you to use the following syntax for token path:
   // panda.config.ts
   export default defineConfig({
     //...
-    syntax: "template-literal",
-  });
+    syntax: 'template-literal',
+  })
   ```
 
   > For existing projects, you might need to run the `panda codegen --clean`
@@ -8209,12 +8068,12 @@ Will now allow you to use the following syntax for token path:
 - 5b344b9c: Add support for disabling shorthand props
 
   ```ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
     shorthands: false,
-  });
+  })
   ```
 
 ### Patch Changes
@@ -8334,11 +8193,11 @@ This hook is called right before writing the codegen files to disk. You can use
 export default defineConfig({
   // ...
   hooks: {
-    "codegen:prepare": ({ artifacts, changed }) => {
+    'codegen:prepare': ({ artifacts, changed }) => {
       // do something with the emitted js/d.ts files
     },
   },
-});
+})
 ```
 
 - 49c760cd: Fix issue where responsive array in css and cva doesn't generate the correct classname
@@ -8356,11 +8215,11 @@ export default defineConfig({
   ```js
   module.exports = {
     plugins: {
-      "@pandacss/dev/postcss": {
-        logfile: "./logs/panda.log",
+      '@pandacss/dev/postcss': {
+        logfile: './logs/panda.log',
       },
     },
-  };
+  }
   ```
 
 - Updated dependencies [74485ef1]
@@ -8399,24 +8258,24 @@ export default defineConfig({
     patterns: {
       hstack: {
         properties: {
-          justify: { type: "property", value: "justifyContent" },
-          gap: { type: "property", value: "gap" },
+          justify: { type: 'property', value: 'justifyContent' },
+          gap: { type: 'property', value: 'gap' },
         },
         // you can also use a token like '10'
-        defaultValues: { gap: "40px" },
+        defaultValues: { gap: '40px' },
         transform(props) {
-          const { justify, gap, ...rest } = props;
+          const { justify, gap, ...rest } = props
           return {
-            display: "flex",
-            alignItems: "center",
+            display: 'flex',
+            alignItems: 'center',
             justifyContent: justify,
             gap,
             ...rest,
-          };
+          }
         },
       },
     },
-  });
+  })
   ```
 
 ### Patch Changes
@@ -8458,54 +8317,39 @@ export default defineConfig({
      * Called when the config is resolved, after all the presets are loaded and merged.
      * This is the first hook called, you can use it to tweak the config before the context is created.
      */
-    "config:resolved": (args: { conf: LoadConfigResult }) => MaybeAsyncReturn;
+    'config:resolved': (args: { conf: LoadConfigResult }) => MaybeAsyncReturn
     /**
      * Called when the Panda context has been created and the API is ready to be used.
      */
-    "context:created": (args: {
-      ctx: ApiInterface;
-      logger: LoggerInterface;
-    }) => void;
+    'context:created': (args: { ctx: ApiInterface; logger: LoggerInterface }) => void
     /**
      * Called when the config file or one of its dependencies (imports) has changed.
      */
-    "config:change": (args: { config: UserConfig }) => MaybeAsyncReturn;
+    'config:change': (args: { config: UserConfig }) => MaybeAsyncReturn
     /**
      * Called after reading the file content but before parsing it.
      * You can use this hook to transform the file content to a tsx-friendly syntax so that Panda's parser can parse it.
      * You can also use this hook to parse the file's content on your side using a custom parser, in this case you don't have to return anything.
      */
-    "parser:before": (args: {
-      filePath: string;
-      content: string;
-    }) => string | void;
+    'parser:before': (args: { filePath: string; content: string }) => string | void
     /**
      * Called after the file styles are extracted and processed into the resulting ParserResult object.
      * You can also use this hook to add your own extraction results from your custom parser to the ParserResult object.
      */
-    "parser:after": (args: {
-      filePath: string;
-      result: ParserResultInterface | undefined;
-    }) => void;
+    'parser:after': (args: { filePath: string; result: ParserResultInterface | undefined }) => void
     /**
      * Called after the codegen is completed
      */
-    "codegen:done": () => MaybeAsyncReturn;
+    'codegen:done': () => MaybeAsyncReturn
     /**
      * Called right before adding the design-system CSS (global, static, preflight, tokens, keyframes) to the final CSS
      * Called right before writing/injecting the final CSS (styles.css) that contains the design-system CSS and the parser CSS
      * You can use it to tweak the CSS content before it's written to disk or injected through the postcss plugin.
      */
-    "cssgen:done": (args: {
-      artifact:
-        | "global"
-        | "static"
-        | "reset"
-        | "tokens"
-        | "keyframes"
-        | "styles.css";
-      content: string;
-    }) => string | void;
+    'cssgen:done': (args: {
+      artifact: 'global' | 'static' | 'reset' | 'tokens' | 'keyframes' | 'styles.css'
+      content: string
+    }) => string | void
   }
   ```
 
@@ -8653,18 +8497,18 @@ export default defineConfig({
 
   ```ts
   // config.strictTokens = true
-  css({ display: "flex" }); // OK, didn't throw
-  css({ display: "block" }); // OK, didn't throw
-  css({ display: "abc" }); // ❌ would throw since 'abc' is not part of predefined values of 'display' even thought there is no config token for 'abc'
+  css({ display: 'flex' }) // OK, didn't throw
+  css({ display: 'block' }) // OK, didn't throw
+  css({ display: 'abc' }) // ❌ would throw since 'abc' is not part of predefined values of 'display' even thought there is no config token for 'abc'
   ```
 
   now:
 
   ```ts
   // config.strictTokens = true
-  css({ display: "flex" }); // OK, didn't throw
-  css({ display: "block" }); // OK, didn't throw
-  css({ display: "abc" }); // ✅ will not throw there is no config token for 'abc'
+  css({ display: 'flex' }) // OK, didn't throw
+  css({ display: 'block' }) // OK, didn't throw
+  css({ display: 'abc' }) // ✅ will not throw there is no config token for 'abc'
   ```
 
   Instead, if you want the v.19.0 behavior, you can use the new `config.strictPropertyValues` option. You can combine it
@@ -8675,79 +8519,79 @@ export default defineConfig({
 
   ```ts
   type StrictableProps =
-    | "alignContent"
-    | "alignItems"
-    | "alignSelf"
-    | "all"
-    | "animationComposition"
-    | "animationDirection"
-    | "animationFillMode"
-    | "appearance"
-    | "backfaceVisibility"
-    | "backgroundAttachment"
-    | "backgroundClip"
-    | "borderCollapse"
-    | "border"
-    | "borderBlock"
-    | "borderBlockEnd"
-    | "borderBlockStart"
-    | "borderBottom"
-    | "borderInline"
-    | "borderInlineEnd"
-    | "borderInlineStart"
-    | "borderLeft"
-    | "borderRight"
-    | "borderTop"
-    | "borderBlockEndStyle"
-    | "borderBlockStartStyle"
-    | "borderBlockStyle"
-    | "borderBottomStyle"
-    | "borderInlineEndStyle"
-    | "borderInlineStartStyle"
-    | "borderInlineStyle"
-    | "borderLeftStyle"
-    | "borderRightStyle"
-    | "borderTopStyle"
-    | "boxDecorationBreak"
-    | "boxSizing"
-    | "breakAfter"
-    | "breakBefore"
-    | "breakInside"
-    | "captionSide"
-    | "clear"
-    | "columnFill"
-    | "columnRuleStyle"
-    | "contentVisibility"
-    | "direction"
-    | "display"
-    | "emptyCells"
-    | "flexDirection"
-    | "flexWrap"
-    | "float"
-    | "fontKerning"
-    | "forcedColorAdjust"
-    | "isolation"
-    | "lineBreak"
-    | "mixBlendMode"
-    | "objectFit"
-    | "outlineStyle"
-    | "overflow"
-    | "overflowX"
-    | "overflowY"
-    | "overflowBlock"
-    | "overflowInline"
-    | "overflowWrap"
-    | "pointerEvents"
-    | "position"
-    | "resize"
-    | "scrollBehavior"
-    | "touchAction"
-    | "transformBox"
-    | "transformStyle"
-    | "userSelect"
-    | "visibility"
-    | "wordBreak"
-    | "writingMode";
+    | 'alignContent'
+    | 'alignItems'
+    | 'alignSelf'
+    | 'all'
+    | 'animationComposition'
+    | 'animationDirection'
+    | 'animationFillMode'
+    | 'appearance'
+    | 'backfaceVisibility'
+    | 'backgroundAttachment'
+    | 'backgroundClip'
+    | 'borderCollapse'
+    | 'border'
+    | 'borderBlock'
+    | 'borderBlockEnd'
+    | 'borderBlockStart'
+    | 'borderBottom'
+    | 'borderInline'
+    | 'borderInlineEnd'
+    | 'borderInlineStart'
+    | 'borderLeft'
+    | 'borderRight'
+    | 'borderTop'
+    | 'borderBlockEndStyle'
+    | 'borderBlockStartStyle'
+    | 'borderBlockStyle'
+    | 'borderBottomStyle'
+    | 'borderInlineEndStyle'
+    | 'borderInlineStartStyle'
+    | 'borderInlineStyle'
+    | 'borderLeftStyle'
+    | 'borderRightStyle'
+    | 'borderTopStyle'
+    | 'boxDecorationBreak'
+    | 'boxSizing'
+    | 'breakAfter'
+    | 'breakBefore'
+    | 'breakInside'
+    | 'captionSide'
+    | 'clear'
+    | 'columnFill'
+    | 'columnRuleStyle'
+    | 'contentVisibility'
+    | 'direction'
+    | 'display'
+    | 'emptyCells'
+    | 'flexDirection'
+    | 'flexWrap'
+    | 'float'
+    | 'fontKerning'
+    | 'forcedColorAdjust'
+    | 'isolation'
+    | 'lineBreak'
+    | 'mixBlendMode'
+    | 'objectFit'
+    | 'outlineStyle'
+    | 'overflow'
+    | 'overflowX'
+    | 'overflowY'
+    | 'overflowBlock'
+    | 'overflowInline'
+    | 'overflowWrap'
+    | 'pointerEvents'
+    | 'position'
+    | 'resize'
+    | 'scrollBehavior'
+    | 'touchAction'
+    | 'transformBox'
+    | 'transformStyle'
+    | 'userSelect'
+    | 'visibility'
+    | 'wordBreak'
+    | 'writingMode'
   ```
 
 - Updated dependencies [657ca5da]
@@ -8818,38 +8662,38 @@ export default defineConfig({
 
   ```ts
   const card = defineRecipe({
-    className: "card",
-    base: { color: "white" },
+    className: 'card',
+    base: { color: 'white' },
     variants: {
       size: {
-        small: { fontSize: "14px" },
-        large: { fontSize: "18px" },
+        small: { fontSize: '14px' },
+        large: { fontSize: '18px' },
       },
       visual: {
-        primary: { backgroundColor: "blue" },
-        secondary: { backgroundColor: "gray" },
+        primary: { backgroundColor: 'blue' },
+        secondary: { backgroundColor: 'gray' },
       },
     },
-  });
+  })
 
   export default defineConfig({
     // ...
     staticCss: {
       recipes: {
-        card: ["*"], // this
+        card: ['*'], // this
 
         // was equivalent to:
         card: [
           // notice how `responsive: true` was implicitly added
-          { size: ["*"], responsive: true },
-          { visual: ["*"], responsive: true },
+          { size: ['*'], responsive: true },
+          { visual: ['*'], responsive: true },
         ],
 
         //   will now correctly be equivalent to:
-        card: [{ size: ["*"] }, { visual: ["*"] }],
+        card: [{ size: ['*'] }, { visual: ['*'] }],
       },
     },
-  });
+  })
   ```
 
   Here's the diff in the generated CSS:
@@ -8996,17 +8840,17 @@ export default defineConfig({
 
   ```ts
   css({
-    bg: "[#3B00B9]", // ✅ was okay
+    bg: '[#3B00B9]', // ✅ was okay
     _dark: {
       // ✅ was okay
-      color: "[#3B00B9]",
+      color: '[#3B00B9]',
     },
 
     // ❌ Not okay, will be fixed in this patch
     color: {
-      _dark: "[#3B00B9]",
+      _dark: '[#3B00B9]',
     },
-  });
+  })
   ```
 
 - 647f05c9: Fix a CSS generation issue with `config.strictTokens` when using the `[xxx]` escape-hatch syntax with `!` or
@@ -9014,9 +8858,9 @@ export default defineConfig({
 
   ```ts
   css({
-    borderWidth: "[2px!]",
-    width: "[2px !important]",
-  });
+    borderWidth: '[2px!]',
+    width: '[2px !important]',
+  })
   ```
 
 - Updated dependencies [8f4ce97c]
@@ -9057,18 +8901,18 @@ export default defineConfig({
   and suffixing with `]`, e.g. writing `[123px]` as a value will bypass the token validation.
 
   ```ts
-  import { css } from "../styled-system/css";
+  import { css } from '../styled-system/css'
 
   css({
     // @ts-expect-error TS will throw when using from strictTokens: true
-    color: "#fff",
+    color: '#fff',
     // @ts-expect-error TS will throw when using from strictTokens: true
-    width: "100px",
+    width: '100px',
 
     // ✅ but this is now allowed:
-    bgColor: "[rgb(51 155 240)]",
-    fontSize: "[12px]",
-  });
+    bgColor: '[rgb(51 155 240)]',
+    fontSize: '[12px]',
+  })
   ```
 
 ### Patch Changes
@@ -9102,49 +8946,49 @@ export default defineConfig({
 - 105f74ce: Add a way to specify a recipe's `staticCss` options from inside a recipe config, e.g.:
 
   ```js
-  import { defineRecipe } from "@pandacss/dev";
+  import { defineRecipe } from '@pandacss/dev'
 
   const card = defineRecipe({
-    className: "card",
-    base: { color: "white" },
+    className: 'card',
+    base: { color: 'white' },
     variants: {
       size: {
-        small: { fontSize: "14px" },
-        large: { fontSize: "18px" },
+        small: { fontSize: '14px' },
+        large: { fontSize: '18px' },
       },
     },
-    staticCss: [{ size: ["*"] }],
-  });
+    staticCss: [{ size: ['*'] }],
+  })
   ```
 
   would be the equivalent of defining it inside the main config:
 
   ```js
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
     staticCss: {
       recipes: {
         card: {
-          size: ["*"],
+          size: ['*'],
         },
       },
     },
-  });
+  })
   ```
 
 - 052283c2: Fix vue `styled` factory internal class merging, for example:
 
   ```vue
   <script setup>
-  import { styled } from "../styled-system/jsx";
+  import { styled } from '../styled-system/jsx'
 
-  const StyledButton = styled("button", {
+  const StyledButton = styled('button', {
     base: {
-      bgColor: "red.300",
+      bgColor: 'red.300',
     },
-  });
+  })
   </script>
   <template>
     <StyledButton id="test" class="test">
@@ -9213,18 +9057,18 @@ export default defineConfig({
 
   ```ts
   // config.strictTokens = true
-  css({ display: "flex" }); // OK, didn't throw
-  css({ display: "block" }); // OK, didn't throw
-  css({ display: "abc" }); // ❌ didn't throw even though 'abc' is not a valid value for 'display'
+  css({ display: 'flex' }) // OK, didn't throw
+  css({ display: 'block' }) // OK, didn't throw
+  css({ display: 'abc' }) // ❌ didn't throw even though 'abc' is not a valid value for 'display'
   ```
 
   Now:
 
   ```ts
   // config.strictTokens = true
-  css({ display: "flex" }); // OK, didn't throw
-  css({ display: "block" }); // OK, didn't throw
-  css({ display: "abc" }); // ✅ will throw since 'abc' is not a valid value for 'display'
+  css({ display: 'flex' }) // OK, didn't throw
+  css({ display: 'block' }) // OK, didn't throw
+  css({ display: 'abc' }) // ✅ will throw since 'abc' is not a valid value for 'display'
   ```
 
 - Updated dependencies [61831040]
@@ -9283,28 +9127,22 @@ export default defineConfig({
 - b7cb2073: Add a `splitCssProps` utility exported from the {outdir}/jsx entrypoint
 
   ```tsx
-  import { splitCssProps, styled } from "../styled-system/jsx";
-  import type { HTMLStyledProps } from "../styled-system/types";
+  import { splitCssProps, styled } from '../styled-system/jsx'
+  import type { HTMLStyledProps } from '../styled-system/types'
 
-  function SplitComponent({ children, ...props }: HTMLStyledProps<"div">) {
-    const [cssProps, restProps] = splitCssProps(props);
+  function SplitComponent({ children, ...props }: HTMLStyledProps<'div'>) {
+    const [cssProps, restProps] = splitCssProps(props)
     return (
-      <styled.div
-        {...restProps}
-        className={css(
-          { display: "flex", height: "20", width: "20" },
-          cssProps,
-        )}
-      >
+      <styled.div {...restProps} className={css({ display: 'flex', height: '20', width: '20' }, cssProps)}>
         {children}
       </styled.div>
-    );
+    )
   }
 
   // Usage
 
   function App() {
-    return <SplitComponent margin="2">Click me</SplitComponent>;
+    return <SplitComponent margin="2">Click me</SplitComponent>
   }
   ```
 
@@ -9397,16 +9235,16 @@ export default defineConfig({
   together and the styles will be merged correctly.
 
   ```jsx
-  const Box = styled("div", {
+  const Box = styled('div', {
     base: {
-      background: "red.light",
-      color: "white",
+      background: 'red.light',
+      color: 'white',
     },
-  });
+  })
 
   const ExtendedBox = styled(Box, {
-    base: { background: "red.dark" },
-  });
+    base: { background: 'red.dark' },
+  })
 
   // <ExtendedBox> will have a background of `red.dark` and a color of `white`
   ```
@@ -9419,32 +9257,32 @@ export default defineConfig({
   - CVA or Inline CVA + Config Recipe = ❌
 
   ```jsx
-  import { button } from "../styled-system/recipes";
+  import { button } from '../styled-system/recipes'
 
-  const Button = styled("div", button);
+  const Button = styled('div', button)
 
   // ❌ This will throw an error
   const ExtendedButton = styled(Button, {
-    base: { background: "red.dark" },
-  });
+    base: { background: 'red.dark' },
+  })
   ```
 
 - fbf062c6: Added a new type to extract variants out of styled components
 
   ```tsx
-  import { StyledVariantProps } from "../styled-system/jsx";
+  import { StyledVariantProps } from '../styled-system/jsx'
 
-  const Button = styled("button", {
-    base: { color: "black" },
+  const Button = styled('button', {
+    base: { color: 'black' },
     variants: {
       state: {
-        error: { color: "red" },
-        success: { color: "green" },
+        error: { color: 'red' },
+        success: { color: 'green' },
       },
     },
-  });
+  })
 
-  type ButtonVariantProps = StyledVariantProps<typeof Button>;
+  type ButtonVariantProps = StyledVariantProps<typeof Button>
   //   ^ { state?: 'error' | 'success' | undefined }
   ```
 
@@ -9546,9 +9384,9 @@ export default defineConfig({
 
   ```ts
   interface FactoryOptions<TProps extends Dict> {
-    dataAttr?: boolean;
-    defaultProps?: TProps;
-    shouldForwardProp?(prop: string, variantKeys: string[]): boolean;
+    dataAttr?: boolean
+    defaultProps?: TProps
+    shouldForwardProp?(prop: string, variantKeys: string[]): boolean
   }
   ```
 
@@ -9556,16 +9394,16 @@ export default defineConfig({
     This is useful for testing and debugging.
 
   ```jsx
-  import { styled } from "../styled-system/jsx";
-  import { button } from "../styled-system/recipes";
+  import { styled } from '../styled-system/jsx'
+  import { button } from '../styled-system/recipes'
 
-  const Button = styled("button", button, { dataAttr: true });
+  const Button = styled('button', button, { dataAttr: true })
 
   const App = () => (
     <Button variant="secondary" mt="10px">
       Button
     </Button>
-  );
+  )
   // Will render something like <button data-recipe="button" class="btn btn--variant_purple mt_10px">Button</button>
   ```
 
@@ -9573,17 +9411,17 @@ export default defineConfig({
     override the default variants or base styles of a recipe.
 
   ```jsx
-  import { styled } from "../styled-system/jsx";
-  import { button } from "../styled-system/recipes";
+  import { styled } from '../styled-system/jsx'
+  import { button } from '../styled-system/recipes'
 
-  const Button = styled("button", button, {
+  const Button = styled('button', button, {
     defaultProps: {
-      variant: "secondary",
-      px: "10px",
+      variant: 'secondary',
+      px: '10px',
     },
-  });
+  })
 
-  const App = () => <Button>Button</Button>;
+  const App = () => <Button>Button</Button>
   // Will render something like <button class="btn btn--variant_secondary px_10px">Button</button>
   ```
 
@@ -9591,20 +9429,19 @@ export default defineConfig({
     props except recipe variants and style props are forwarded.
 
   ```jsx
-  import { styled } from "../styled-system/jsx";
-  import { button } from "../styled-system/recipes";
-  import { isCssProperty } from "../styled-system/jsx";
-  import { motion, isValidMotionProp } from "framer-motion";
+  import { styled } from '../styled-system/jsx'
+  import { button } from '../styled-system/recipes'
+  import { isCssProperty } from '../styled-system/jsx'
+  import { motion, isValidMotionProp } from 'framer-motion'
 
   const StyledMotion = styled(
     motion.div,
     {},
     {
       shouldForwardProp: (prop, variantKeys) =>
-        isValidMotionProp(prop) ||
-        (!variantKeys.includes(prop) && !isCssProperty(prop)),
+        isValidMotionProp(prop) || (!variantKeys.includes(prop) && !isCssProperty(prop)),
     },
-  );
+  )
   ```
 
   - @pandacss/types@0.15.4
@@ -9627,42 +9464,42 @@ export default defineConfig({
 
   ```ts
   export default defineConfig({
-    outdir: "./outdir",
+    outdir: './outdir',
     importMap: {
-      css: "#panda/styled-system/css",
-      recipes: "#panda/styled-system/recipes",
-      patterns: "#panda/styled-system/patterns",
-      jsx: "#panda/styled-system/jsx",
+      css: '#panda/styled-system/css',
+      recipes: '#panda/styled-system/recipes',
+      patterns: '#panda/styled-system/patterns',
+      jsx: '#panda/styled-system/jsx',
     },
-  });
+  })
   ```
 
   Or you could also make your outdir an actual package from your monorepo:
 
   ```ts
   export default defineConfig({
-    outdir: "../packages/styled-system",
+    outdir: '../packages/styled-system',
     importMap: {
-      css: "@monorepo/styled-system",
-      recipes: "@monorepo/styled-system",
-      patterns: "@monorepo/styled-system",
-      jsx: "@monorepo/styled-system",
+      css: '@monorepo/styled-system',
+      recipes: '@monorepo/styled-system',
+      patterns: '@monorepo/styled-system',
+      jsx: '@monorepo/styled-system',
     },
-  });
+  })
   ```
 
   Working with tsconfig paths aliases is easy:
 
   ```ts
   export default defineConfig({
-    outdir: "styled-system",
+    outdir: 'styled-system',
     importMap: {
-      css: "styled-system/css",
-      recipes: "styled-system/recipes",
-      patterns: "styled-system/patterns",
-      jsx: "styled-system/jsx",
+      css: 'styled-system/css',
+      recipes: 'styled-system/recipes',
+      patterns: 'styled-system/patterns',
+      jsx: 'styled-system/jsx',
     },
-  });
+  })
   ```
 
 - 1eb31118: Automatically allow overriding config recipe compoundVariants styles within the `styled` JSX factory,
@@ -9672,22 +9509,22 @@ export default defineConfig({
 
   ```ts file="panda.config.ts"
   const button = defineRecipe({
-    className: "btn",
-    base: { color: "green", fontSize: "16px" },
+    className: 'btn',
+    base: { color: 'green', fontSize: '16px' },
     variants: {
-      size: { small: { fontSize: "14px" } },
+      size: { small: { fontSize: '14px' } },
     },
-    compoundVariants: [{ size: "small", css: { color: "blue" } }],
-  });
+    compoundVariants: [{ size: 'small', css: { color: 'blue' } }],
+  })
   ```
 
   This would previously not merge the `color` property overrides, but now it does:
 
   ```tsx file="example.tsx"
-  import { styled } from "../styled-system/jsx";
-  import { button } from "../styled-system/recipes";
+  import { styled } from '../styled-system/jsx'
+  import { button } from '../styled-system/recipes'
 
-  const Button = styled("button", button);
+  const Button = styled('button', button)
 
   function App() {
     return (
@@ -9696,7 +9533,7 @@ export default defineConfig({
           Click me
         </Button>
       </>
-    );
+    )
   }
   ```
 
@@ -9875,8 +9712,8 @@ export default defineConfig({
     passed in. This is to allow the `css` function to merge the styles correctly.
 
   ```tsx
-  import { css } from "../styled-system/css";
-  css({ mx: "3", paddingTop: "4" }, { mx: "10", pt: "6" }); // => mx_10 pt_6
+  import { css } from '../styled-system/css'
+  css({ mx: '3', paddingTop: '4' }, { mx: '10', pt: '6' }) // => mx_10 pt_6
   ```
 
   > ⚠️ This approach should be preferred for merging styles over the current `cx` function, which will be reverted to
@@ -9901,29 +9738,26 @@ export default defineConfig({
   be merged correctly.
 
   ```tsx title="src/components/Button.tsx"
-  import { css } from "../../styled-system/css";
+  import { css } from '../../styled-system/css'
 
   export const Button = ({ css: cssProp = {}, children }) => {
-    const className = css(
-      { display: "flex", alignItem: "center", color: "black" },
-      cssProp,
-    );
-    return <button className={className}>{children}</button>;
-  };
+    const className = css({ display: 'flex', alignItem: 'center', color: 'black' }, cssProp)
+    return <button className={className}>{children}</button>
+  }
   ```
 
   Then you can use the `Button` component like this:
 
   ```tsx title="src/app/page.tsx"
-  import { css } from "../../styled-system/css";
-  import { Button, Thingy } from "./Button";
+  import { css } from '../../styled-system/css'
+  import { Button, Thingy } from './Button'
 
   export default function Page() {
     return (
-      <Button css={{ color: "pink", _hover: { color: "red" } }}>
+      <Button css={{ color: 'pink', _hover: { color: 'red' } }}>
         will result in `class="d_flex items_center text_pink hover:text_red"`
       </Button>
-    );
+    )
   }
   ```
 
@@ -9935,51 +9769,51 @@ export default defineConfig({
   **Pattern Example:**
 
   ```tsx title="src/components/Button.tsx"
-  import { hstack } from "../../styled-system/patterns";
-  import { css, cva } from "../../styled-system/css";
+  import { hstack } from '../../styled-system/patterns'
+  import { css, cva } from '../../styled-system/css'
 
   export const Button = ({ css: cssProp = {}, children }) => {
     // using the flex pattern
     const hstackProps = hstack.raw({
-      border: "1px solid",
-      _hover: { color: "blue.400" },
-    });
+      border: '1px solid',
+      _hover: { color: 'blue.400' },
+    })
 
     // merging the styles
-    const className = css(hstackProps, cssProp);
+    const className = css(hstackProps, cssProp)
 
-    return <button className={className}>{children}</button>;
-  };
+    return <button className={className}>{children}</button>
+  }
   ```
 
   **CVA Example:**
 
   ```tsx title="src/components/Button.tsx"
-  import { css, cva } from "../../styled-system/css";
+  import { css, cva } from '../../styled-system/css'
 
   const buttonRecipe = cva({
-    base: { display: "flex", fontSize: "lg" },
+    base: { display: 'flex', fontSize: 'lg' },
     variants: {
       variant: {
-        primary: { color: "white", backgroundColor: "blue.500" },
+        primary: { color: 'white', backgroundColor: 'blue.500' },
       },
     },
-  });
+  })
 
   export const Button = ({ css: cssProp = {}, children }) => {
     const className = css(
       // using the button recipe
-      buttonRecipe.raw({ variant: "primary" }),
+      buttonRecipe.raw({ variant: 'primary' }),
 
       // adding style overrides (internal)
-      { _hover: { color: "blue.400" } },
+      { _hover: { color: 'blue.400' } },
 
       // adding style overrides (external)
       cssProp,
-    );
+    )
 
-    return <button className={className}>{props.children}</button>;
-  };
+    return <button className={className}>{props.children}</button>
+  }
   ```
 
 - 36fdff89: Fix bug in generated js code for atomic slot recipe produce where `splitVariantProps` didn't work without
@@ -10026,14 +9860,7 @@ export default defineConfig({
   Example:
 
   ```tsx
-  <h1
-    className={cx(
-      css({ mx: "3", paddingTop: "4" }),
-      css({ mx: "10", pt: "6" }),
-    )}
-  >
-    Will result in "mx_10 pt_6"
-  </h1>
+  <h1 className={cx(css({ mx: '3', paddingTop: '4' }), css({ mx: '10', pt: '6' }))}>Will result in "mx_10 pt_6"</h1>
   ```
 
 - dfb3f85f: Add missing svg props types
@@ -10078,12 +9905,12 @@ export default defineConfig({
   **Definition**
 
   ```jsx
-  import { sva } from "styled-system/css";
+  import { sva } from 'styled-system/css'
 
   const button = sva({
-    slots: ["label", "icon"],
+    slots: ['label', 'icon'],
     base: {
-      label: { color: "red", textDecoration: "underline" },
+      label: { color: 'red', textDecoration: 'underline' },
     },
     variants: {
       rounded: {
@@ -10091,33 +9918,33 @@ export default defineConfig({
       },
       size: {
         sm: {
-          label: { fontSize: "sm" },
-          icon: { fontSize: "sm" },
+          label: { fontSize: 'sm' },
+          icon: { fontSize: 'sm' },
         },
         lg: {
-          label: { fontSize: "lg" },
-          icon: { fontSize: "lg", color: "pink" },
+          label: { fontSize: 'lg' },
+          icon: { fontSize: 'lg', color: 'pink' },
         },
       },
     },
     defaultVariants: {
-      size: "sm",
+      size: 'sm',
     },
-  });
+  })
   ```
 
   **Usage**
 
   ```jsx
   export function App() {
-    const btnClass = button({ size: "lg", rounded: true });
+    const btnClass = button({ size: 'lg', rounded: true })
 
     return (
       <button>
         <p class={btnClass.label}> Label</p>
         <p class={btnClass.icon}> Icon</p>
       </button>
-    );
+    )
   }
   ```
 
@@ -10182,26 +10009,26 @@ export default defineConfig({
   Update the `jsx` property to be used for advanced tracking of custom pattern components.
 
   ```jsx
-  import { Circle } from "styled-system/jsx";
+  import { Circle } from 'styled-system/jsx'
   const CustomCircle = ({ children, ...props }) => {
-    return <Circle {...props}>{children}</Circle>;
-  };
+    return <Circle {...props}>{children}</Circle>
+  }
   ```
 
   To track the `CustomCircle` component, you can now use the `jsx` property.
 
   ```js
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     patterns: {
       extend: {
         circle: {
-          jsx: ["CustomCircle"],
+          jsx: ['CustomCircle'],
         },
       },
     },
-  });
+  })
   ```
 
 ### Patch Changes
@@ -10299,17 +10126,9 @@ export default defineConfig({
   ```tsx
   const ComponentWithMultipleRecipes = ({ variant }) => {
     return (
-      <button
-        className={cx(
-          pinkRecipe({ variant }),
-          greenRecipe({ variant }),
-          blueRecipe({ variant }),
-        )}
-      >
-        Hello
-      </button>
-    );
-  };
+      <button className={cx(pinkRecipe({ variant }), greenRecipe({ variant }), blueRecipe({ variant }))}>Hello</button>
+    )
+  }
   ```
 
   Given a `panda.config.ts` with recipes each including a common `jsx` tag name, such as:
@@ -10393,7 +10212,7 @@ export default defineConfig({
   ```ts
   staticCss: {
     recipes: {
-      button: [{ size: ["*"], shape: ["*"] }];
+      button: [{ size: ['*'], shape: ['*'] }]
     }
   }
   ```
@@ -10403,7 +10222,7 @@ export default defineConfig({
   ```ts
   staticCss: {
     recipes: {
-      button: ["*"];
+      button: ['*']
     }
   }
   ```
@@ -10441,8 +10260,8 @@ export default defineConfig({
   // panda.config.ts
   export default defineConfig({
     //...
-    syntax: "template-literal",
-  });
+    syntax: 'template-literal',
+  })
   ```
 
   > For existing projects, you might need to run the `panda codegen --clean`
@@ -10474,12 +10293,12 @@ export default defineConfig({
 - 5b344b9c: Add support for disabling shorthand props
 
   ```ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
     shorthands: false,
-  });
+  })
   ```
 
 ### Patch Changes
diff --git a/packages/is-valid-prop/CHANGELOG.md b/packages/is-valid-prop/CHANGELOG.md
index bbb0567d6..a65eb57be 100644
--- a/packages/is-valid-prop/CHANGELOG.md
+++ b/packages/is-valid-prop/CHANGELOG.md
@@ -35,12 +35,12 @@
     theme: {
       extend: {
         colors: {
-          primary: { value: "blue" },
+          primary: { value: 'blue' },
         },
         // borderWidths: {}, // ⚠️ nothing defined here
       },
     },
-  });
+  })
   ```
 
   ```ts
@@ -51,8 +51,8 @@
 
     // ✅ after this PR, TS will not throw an error anymore as you don't have any `borderWidths` tokens
     // if you add one, this will error again (as it's supposed to)
-    borderWidths: "123px",
-  });
+    borderWidths: '123px',
+  })
   ```
 
   ## Description
diff --git a/packages/logger/CHANGELOG.md b/packages/logger/CHANGELOG.md
index f0b6adbe7..a943081f6 100644
--- a/packages/logger/CHANGELOG.md
+++ b/packages/logger/CHANGELOG.md
@@ -159,11 +159,11 @@
   ```js
   module.exports = {
     plugins: {
-      "@pandacss/dev/postcss": {
-        logfile: "./logs/panda.log",
+      '@pandacss/dev/postcss': {
+        logfile: './logs/panda.log',
       },
     },
-  };
+  }
   ```
 
 - Updated dependencies [74485ef1]
diff --git a/packages/node/CHANGELOG.md b/packages/node/CHANGELOG.md
index e0d74c2b4..0a6fa0419 100644
--- a/packages/node/CHANGELOG.md
+++ b/packages/node/CHANGELOG.md
@@ -322,10 +322,10 @@
 
   ```ts
   css({
-    padding: "1px",
-    paddingTop: "3px",
-    paddingBottom: "4px",
-  });
+    padding: '1px',
+    paddingTop: '3px',
+    paddingBottom: '4px',
+  })
   ```
 
   Will now always generate the following css:
@@ -453,8 +453,8 @@
   ```ts
   export default defineConfig({
     // ...
-    dependencies: ["path/to/files/**.ts"],
-  });
+    dependencies: ['path/to/files/**.ts'],
+  })
   ```
 
   - Invoke `config:change` hook in more situations (when the `--watch` flag is passed to `panda codegen`,
@@ -506,54 +506,39 @@
      * Called when the config is resolved, after all the presets are loaded and merged.
      * This is the first hook called, you can use it to tweak the config before the context is created.
      */
-    "config:resolved": (args: { conf: LoadConfigResult }) => MaybeAsyncReturn;
+    'config:resolved': (args: { conf: LoadConfigResult }) => MaybeAsyncReturn
     /**
      * Called when the Panda context has been created and the API is ready to be used.
      */
-    "context:created": (args: {
-      ctx: ApiInterface;
-      logger: LoggerInterface;
-    }) => void;
+    'context:created': (args: { ctx: ApiInterface; logger: LoggerInterface }) => void
     /**
      * Called when the config file or one of its dependencies (imports) has changed.
      */
-    "config:change": (args: { config: UserConfig }) => MaybeAsyncReturn;
+    'config:change': (args: { config: UserConfig }) => MaybeAsyncReturn
     /**
      * Called after reading the file content but before parsing it.
      * You can use this hook to transform the file content to a tsx-friendly syntax so that Panda's parser can parse it.
      * You can also use this hook to parse the file's content on your side using a custom parser, in this case you don't have to return anything.
      */
-    "parser:before": (args: {
-      filePath: string;
-      content: string;
-    }) => string | void;
+    'parser:before': (args: { filePath: string; content: string }) => string | void
     /**
      * Called after the file styles are extracted and processed into the resulting ParserResult object.
      * You can also use this hook to add your own extraction results from your custom parser to the ParserResult object.
      */
-    "parser:after": (args: {
-      filePath: string;
-      result: ParserResultInterface | undefined;
-    }) => void;
+    'parser:after': (args: { filePath: string; result: ParserResultInterface | undefined }) => void
     /**
      * Called after the codegen is completed
      */
-    "codegen:done": () => MaybeAsyncReturn;
+    'codegen:done': () => MaybeAsyncReturn
     /**
      * Called right before adding the design-system CSS (global, static, preflight, tokens, keyframes) to the final CSS
      * Called right before writing/injecting the final CSS (styles.css) that contains the design-system CSS and the parser CSS
      * You can use it to tweak the CSS content before it's written to disk or injected through the postcss plugin.
      */
-    "cssgen:done": (args: {
-      artifact:
-        | "global"
-        | "static"
-        | "reset"
-        | "tokens"
-        | "keyframes"
-        | "styles.css";
-      content: string;
-    }) => string | void;
+    'cssgen:done': (args: {
+      artifact: 'global' | 'static' | 'reset' | 'tokens' | 'keyframes' | 'styles.css'
+      content: string
+    }) => string | void
   }
   ```
 
@@ -1171,16 +1156,16 @@
   together and the styles will be merged correctly.
 
   ```jsx
-  const Box = styled("div", {
+  const Box = styled('div', {
     base: {
-      background: "red.light",
-      color: "white",
+      background: 'red.light',
+      color: 'white',
     },
-  });
+  })
 
   const ExtendedBox = styled(Box, {
-    base: { background: "red.dark" },
-  });
+    base: { background: 'red.dark' },
+  })
 
   // <ExtendedBox> will have a background of `red.dark` and a color of `white`
   ```
@@ -1193,14 +1178,14 @@
   - CVA or Inline CVA + Config Recipe = ❌
 
   ```jsx
-  import { button } from "../styled-system/recipes";
+  import { button } from '../styled-system/recipes'
 
-  const Button = styled("div", button);
+  const Button = styled('div', button)
 
   // ❌ This will throw an error
   const ExtendedButton = styled(Button, {
-    base: { background: "red.dark" },
-  });
+    base: { background: 'red.dark' },
+  })
   ```
 
 ### Patch Changes
@@ -2004,11 +1989,11 @@ This hook is called right before writing the codegen files to disk. You can use
 export default defineConfig({
   // ...
   hooks: {
-    "codegen:prepare": ({ artifacts, changed }) => {
+    'codegen:prepare': ({ artifacts, changed }) => {
       // do something with the emitted js/d.ts files
     },
   },
-});
+})
 ```
 
 - d5977c24: - Add a `--logfile` flag to the `panda`, `panda codegen`, `panda cssgen` and `panda debug` commands.
@@ -2025,11 +2010,11 @@ export default defineConfig({
   ```js
   module.exports = {
     plugins: {
-      "@pandacss/dev/postcss": {
-        logfile: "./logs/panda.log",
+      '@pandacss/dev/postcss': {
+        logfile: './logs/panda.log',
       },
     },
-  };
+  }
   ```
 
 - Updated dependencies [0dd45b6a]
@@ -2079,8 +2064,8 @@ export default defineConfig({
   ```ts
   export default defineConfig({
     // ...
-    dependencies: ["path/to/files/**.ts"],
-  });
+    dependencies: ['path/to/files/**.ts'],
+  })
   ```
 
   - Invoke `config:change` hook in more situations (when the `--watch` flag is passed to `panda codegen`,
@@ -2132,54 +2117,39 @@ export default defineConfig({
      * Called when the config is resolved, after all the presets are loaded and merged.
      * This is the first hook called, you can use it to tweak the config before the context is created.
      */
-    "config:resolved": (args: { conf: LoadConfigResult }) => MaybeAsyncReturn;
+    'config:resolved': (args: { conf: LoadConfigResult }) => MaybeAsyncReturn
     /**
      * Called when the Panda context has been created and the API is ready to be used.
      */
-    "context:created": (args: {
-      ctx: ApiInterface;
-      logger: LoggerInterface;
-    }) => void;
+    'context:created': (args: { ctx: ApiInterface; logger: LoggerInterface }) => void
     /**
      * Called when the config file or one of its dependencies (imports) has changed.
      */
-    "config:change": (args: { config: UserConfig }) => MaybeAsyncReturn;
+    'config:change': (args: { config: UserConfig }) => MaybeAsyncReturn
     /**
      * Called after reading the file content but before parsing it.
      * You can use this hook to transform the file content to a tsx-friendly syntax so that Panda's parser can parse it.
      * You can also use this hook to parse the file's content on your side using a custom parser, in this case you don't have to return anything.
      */
-    "parser:before": (args: {
-      filePath: string;
-      content: string;
-    }) => string | void;
+    'parser:before': (args: { filePath: string; content: string }) => string | void
     /**
      * Called after the file styles are extracted and processed into the resulting ParserResult object.
      * You can also use this hook to add your own extraction results from your custom parser to the ParserResult object.
      */
-    "parser:after": (args: {
-      filePath: string;
-      result: ParserResultInterface | undefined;
-    }) => void;
+    'parser:after': (args: { filePath: string; result: ParserResultInterface | undefined }) => void
     /**
      * Called after the codegen is completed
      */
-    "codegen:done": () => MaybeAsyncReturn;
+    'codegen:done': () => MaybeAsyncReturn
     /**
      * Called right before adding the design-system CSS (global, static, preflight, tokens, keyframes) to the final CSS
      * Called right before writing/injecting the final CSS (styles.css) that contains the design-system CSS and the parser CSS
      * You can use it to tweak the CSS content before it's written to disk or injected through the postcss plugin.
      */
-    "cssgen:done": (args: {
-      artifact:
-        | "global"
-        | "static"
-        | "reset"
-        | "tokens"
-        | "keyframes"
-        | "styles.css";
-      content: string;
-    }) => string | void;
+    'cssgen:done': (args: {
+      artifact: 'global' | 'static' | 'reset' | 'tokens' | 'keyframes' | 'styles.css'
+      content: string
+    }) => string | void
   }
   ```
 
@@ -2797,16 +2767,16 @@ export default defineConfig({
   together and the styles will be merged correctly.
 
   ```jsx
-  const Box = styled("div", {
+  const Box = styled('div', {
     base: {
-      background: "red.light",
-      color: "white",
+      background: 'red.light',
+      color: 'white',
     },
-  });
+  })
 
   const ExtendedBox = styled(Box, {
-    base: { background: "red.dark" },
-  });
+    base: { background: 'red.dark' },
+  })
 
   // <ExtendedBox> will have a background of `red.dark` and a color of `white`
   ```
@@ -2819,14 +2789,14 @@ export default defineConfig({
   - CVA or Inline CVA + Config Recipe = ❌
 
   ```jsx
-  import { button } from "../styled-system/recipes";
+  import { button } from '../styled-system/recipes'
 
-  const Button = styled("div", button);
+  const Button = styled('div', button)
 
   // ❌ This will throw an error
   const ExtendedButton = styled(Button, {
-    base: { background: "red.dark" },
-  });
+    base: { background: 'red.dark' },
+  })
   ```
 
 ### Patch Changes
diff --git a/packages/parser/CHANGELOG.md b/packages/parser/CHANGELOG.md
index 8871992a4..6ac513b2d 100644
--- a/packages/parser/CHANGELOG.md
+++ b/packages/parser/CHANGELOG.md
@@ -22,7 +22,7 @@
   **Before**
 
   ```jsx
-  import { linkBox, linkOverlay } from "styled-system/patterns";
+  import { linkBox, linkOverlay } from 'styled-system/patterns'
 
   const App = () => {
     return (
@@ -32,26 +32,26 @@
           Link
         </a>
       </div>
-    );
-  };
+    )
+  }
   ```
 
   **After**
 
   ```jsx
-  import { css } from "styled-system/css";
-  import { linkOverlay } from "styled-system/patterns";
+  import { css } from 'styled-system/css'
+  import { linkOverlay } from 'styled-system/patterns'
 
   const App = () => {
     return (
-      <div className={css({ pos: "relative" })}>
+      <div className={css({ pos: 'relative' })}>
         <img src="https://via.placeholder.com/150" alt="placeholder" />
         <a href="#" className={linkOverlay()}>
           Link
         </a>
       </div>
-    );
-  };
+    )
+  }
   ```
 
 ### Patch Changes
@@ -75,28 +75,23 @@
   This makes it even easier to merge styles from multiple sources.
 
   ```tsx
-  import { Stack, styled } from "../styled-system/jsx";
+  import { Stack, styled } from '../styled-system/jsx'
 
   const HeroSection = (props) => {
     return (
-      <Stack css={[{ color: "blue.300", padding: "4" }, props.css]}>
-        <styled.div css={[{ fontSize: "2xl" }, props.hero]}>
-          Hero Section
-        </styled.div>
+      <Stack css={[{ color: 'blue.300', padding: '4' }, props.css]}>
+        <styled.div css={[{ fontSize: '2xl' }, props.hero]}>Hero Section</styled.div>
       </Stack>
-    );
-  };
+    )
+  }
 
   const App = () => {
     return (
       <>
-        <HeroSection
-          css={{ backgroundColor: "yellow.300" }}
-          hero={css.raw({ fontSize: "4xl", color: "red.300" })}
-        />
+        <HeroSection css={{ backgroundColor: 'yellow.300' }} hero={css.raw({ fontSize: '4xl', color: 'red.300' })} />
       </>
-    );
-  };
+    )
+  }
   ```
 
   should render something like:
@@ -138,21 +133,21 @@
 - 99870bb: Fix issue where setting the pattern `jsx` option with dot notation didn't work.
 
   ```jsx
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
     patterns: {
       extend: {
         grid: {
-          jsx: ["Form.Group", "Grid"],
+          jsx: ['Form.Group', 'Grid'],
         },
         stack: {
-          jsx: ["Form.Action", "Stack"],
+          jsx: ['Form.Action', 'Stack'],
         },
       },
     },
-  });
+  })
   ```
 
 - Updated dependencies [88049c5]
@@ -194,7 +189,7 @@
 - 35bd134: Fix JSX matching with recipes after introducing namespace imports
 
   ```ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
@@ -202,11 +197,11 @@
       extend: {
         slotRecipes: {
           tabs: {
-            className: "tabs",
-            slots: ["root", "list", "trigger", "content", "indicator"],
+            className: 'tabs',
+            slots: ['root', 'list', 'trigger', 'content', 'indicator'],
             base: {
               root: {
-                display: "flex",
+                display: 'flex',
                 // ...
               },
             },
@@ -214,7 +209,7 @@
         },
       },
     },
-  });
+  })
   ```
 
   ```tsx
@@ -230,8 +225,8 @@
           <Tabs.Indicator />
         </Tabs.List>
       </Tabs.Root>
-    );
-  };
+    )
+  }
   ```
 
   We introduced a bug in [v0.34.2](https://github.com/chakra-ui/panda/blob/main/CHANGELOG.md#0342---2024-03-08) where
@@ -270,13 +265,11 @@
 - c459b43: Fix extraction of JSX `styled` factory when using namespace imports
 
   ```tsx
-  import * as pandaJsx from "../styled-system/jsx";
+  import * as pandaJsx from '../styled-system/jsx'
 
   // ✅ this will work now
-  pandaJsx.styled("div", { base: { color: "red" } });
-  const App = () => (
-    <pandaJsx.styled.span color="blue">Hello</pandaJsx.styled.span>
-  );
+  pandaJsx.styled('div', { base: { color: 'red' } })
+  const App = () => <pandaJsx.styled.span color="blue">Hello</pandaJsx.styled.span>
   ```
 
 - Updated dependencies [50db354]
@@ -308,18 +301,18 @@
 - 0bf09f2: Allow using namespaced imports
 
   ```ts
-  import * as p from "styled-system/patterns";
-  import * as recipes from "styled-system/recipes";
-  import * as panda from "styled-system/css";
+  import * as p from 'styled-system/patterns'
+  import * as recipes from 'styled-system/recipes'
+  import * as panda from 'styled-system/css'
 
   // this will now be extracted
-  p.stack({ mt: "40px" });
+  p.stack({ mt: '40px' })
 
-  recipes.cardStyle({ rounded: true });
+  recipes.cardStyle({ rounded: true })
 
-  panda.css({ color: "red" });
-  panda.cva({ base: { color: "blue" } });
-  panda.sva({ base: { root: { color: "green" } } });
+  panda.css({ color: 'red' })
+  panda.cva({ base: { color: 'blue' } })
+  panda.sva({ base: { root: { color: 'green' } } })
   ```
 
 - Updated dependencies [0bf09f2]
@@ -381,25 +374,25 @@
 - 31071ba: Fix an issue for token names starting with '0'
 
   ```ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     theme: {
       tokens: {
         spacing: {
-          "025": {
-            value: "0.125rem",
+          '025': {
+            value: '0.125rem',
           },
         },
       },
     },
-  });
+  })
   ```
 
   and then using it like
 
   ```ts
-  css({ margin: "025" });
+  css({ margin: '025' })
   ```
 
   This would not generate the expected CSS because the parser would try to parse `025` as a number (`25`) instead of
@@ -410,7 +403,7 @@
   Given this config:
 
   ```ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
@@ -421,13 +414,13 @@
             bg: {
               primary: {
                 DEFAULT: {
-                  value: "{colors.red.500}",
+                  value: '{colors.red.500}',
                 },
                 base: {
-                  value: "{colors.green.500}",
+                  value: '{colors.green.500}',
                 },
                 hover: {
-                  value: "{colors.yellow.300}",
+                  value: '{colors.yellow.300}',
                 },
               },
             },
@@ -435,17 +428,17 @@
         },
       },
     },
-  });
+  })
   ```
 
   And this style usage:
 
   ```ts
-  import { css } from "styled-system/css";
+  import { css } from 'styled-system/css'
 
   css({
-    colorPalette: "bg.primary",
-  });
+    colorPalette: 'bg.primary',
+  })
   ```
 
   This is the difference in the generated css
@@ -476,11 +469,11 @@
   - Allow using multiple aliases for the same identifier for the `/css` entrypoints just like `/patterns` and `/recipes`
 
   ```ts
-  import { css } from "../styled-system/css";
-  import { css as css2 } from "../styled-system/css";
+  import { css } from '../styled-system/css'
+  import { css as css2 } from '../styled-system/css'
 
-  css({ display: "flex" });
-  css2({ flexDirection: "column" }); // this wasn't working before, now it does
+  css({ display: 'flex' })
+  css2({ flexDirection: 'column' }) // this wasn't working before, now it does
   ```
 
 - Updated dependencies [a032375]
@@ -528,10 +521,10 @@
 
   ```ts
   css({
-    padding: "1px",
-    paddingTop: "3px",
-    paddingBottom: "4px",
-  });
+    padding: '1px',
+    paddingTop: '3px',
+    paddingBottom: '4px',
+  })
   ```
 
   Will now always generate the following css:
@@ -591,17 +584,16 @@
   export default defineConfig({
     // ...
     hooks: {
-      "parser:before": ({ configure }) => {
+      'parser:before': ({ configure }) => {
         configure({
           // ignore the Select.Content entirely
-          matchTag: (tag) => tag !== "Select.Content",
+          matchTag: (tag) => tag !== 'Select.Content',
           // ...or specifically ignore the `position` property
-          matchTagProp: (tag, prop) =>
-            tag === "Select.Content" && prop !== "position",
-        });
+          matchTagProp: (tag, prop) => tag === 'Select.Content' && prop !== 'position',
+        })
       },
     },
-  });
+  })
   ```
 
 - Updated dependencies [6b829cab]
@@ -642,11 +634,11 @@
   ```js
   module.exports = {
     plugins: {
-      "@pandacss/dev/postcss": {
-        logfile: "./logs/panda.log",
+      '@pandacss/dev/postcss': {
+        logfile: './logs/panda.log',
       },
     },
-  };
+  }
   ```
 
 - Updated dependencies [0dd45b6a]
@@ -685,10 +677,10 @@
   css({
     // ✅ this is fine now, will resolve to something like
     // `@container (min-width: 56em)`
-    "@container (min-width: {sizes.4xl})": {
-      color: "green",
+    '@container (min-width: {sizes.4xl})': {
+      color: 'green',
     },
-  });
+  })
   ```
 
   Fix an issue where the curly token references would not be escaped if the token path was not found.
@@ -730,54 +722,39 @@
      * Called when the config is resolved, after all the presets are loaded and merged.
      * This is the first hook called, you can use it to tweak the config before the context is created.
      */
-    "config:resolved": (args: { conf: LoadConfigResult }) => MaybeAsyncReturn;
+    'config:resolved': (args: { conf: LoadConfigResult }) => MaybeAsyncReturn
     /**
      * Called when the Panda context has been created and the API is ready to be used.
      */
-    "context:created": (args: {
-      ctx: ApiInterface;
-      logger: LoggerInterface;
-    }) => void;
+    'context:created': (args: { ctx: ApiInterface; logger: LoggerInterface }) => void
     /**
      * Called when the config file or one of its dependencies (imports) has changed.
      */
-    "config:change": (args: { config: UserConfig }) => MaybeAsyncReturn;
+    'config:change': (args: { config: UserConfig }) => MaybeAsyncReturn
     /**
      * Called after reading the file content but before parsing it.
      * You can use this hook to transform the file content to a tsx-friendly syntax so that Panda's parser can parse it.
      * You can also use this hook to parse the file's content on your side using a custom parser, in this case you don't have to return anything.
      */
-    "parser:before": (args: {
-      filePath: string;
-      content: string;
-    }) => string | void;
+    'parser:before': (args: { filePath: string; content: string }) => string | void
     /**
      * Called after the file styles are extracted and processed into the resulting ParserResult object.
      * You can also use this hook to add your own extraction results from your custom parser to the ParserResult object.
      */
-    "parser:after": (args: {
-      filePath: string;
-      result: ParserResultInterface | undefined;
-    }) => void;
+    'parser:after': (args: { filePath: string; result: ParserResultInterface | undefined }) => void
     /**
      * Called after the codegen is completed
      */
-    "codegen:done": () => MaybeAsyncReturn;
+    'codegen:done': () => MaybeAsyncReturn
     /**
      * Called right before adding the design-system CSS (global, static, preflight, tokens, keyframes) to the final CSS
      * Called right before writing/injecting the final CSS (styles.css) that contains the design-system CSS and the parser CSS
      * You can use it to tweak the CSS content before it's written to disk or injected through the postcss plugin.
      */
-    "cssgen:done": (args: {
-      artifact:
-        | "global"
-        | "static"
-        | "reset"
-        | "tokens"
-        | "keyframes"
-        | "styles.css";
-      content: string;
-    }) => string | void;
+    'cssgen:done': (args: {
+      artifact: 'global' | 'static' | 'reset' | 'tokens' | 'keyframes' | 'styles.css'
+      content: string
+    }) => string | void
   }
   ```
 
@@ -916,8 +893,8 @@
   ```jsx
   css({
     // This didn't work, but now it does
-    base: { color: "blue" },
-  });
+    base: { color: 'blue' },
+  })
   ```
 
 - Updated dependencies [59fd291c]
@@ -961,38 +938,38 @@
 
   ```ts
   const card = defineRecipe({
-    className: "card",
-    base: { color: "white" },
+    className: 'card',
+    base: { color: 'white' },
     variants: {
       size: {
-        small: { fontSize: "14px" },
-        large: { fontSize: "18px" },
+        small: { fontSize: '14px' },
+        large: { fontSize: '18px' },
       },
       visual: {
-        primary: { backgroundColor: "blue" },
-        secondary: { backgroundColor: "gray" },
+        primary: { backgroundColor: 'blue' },
+        secondary: { backgroundColor: 'gray' },
       },
     },
-  });
+  })
 
   export default defineConfig({
     // ...
     staticCss: {
       recipes: {
-        card: ["*"], // this
+        card: ['*'], // this
 
         // was equivalent to:
         card: [
           // notice how `responsive: true` was implicitly added
-          { size: ["*"], responsive: true },
-          { visual: ["*"], responsive: true },
+          { size: ['*'], responsive: true },
+          { visual: ['*'], responsive: true },
         ],
 
         //   will now correctly be equivalent to:
-        card: [{ size: ["*"] }, { visual: ["*"] }],
+        card: [{ size: ['*'] }, { visual: ['*'] }],
       },
     },
-  });
+  })
   ```
 
   Here's the diff in the generated CSS:
@@ -1116,30 +1093,30 @@
   another file, such as when using `Ark-UI` like `import { comboboxAnatomy } from '@ark-ui/anatomy'`
 
   ```ts
-  import { sva } from "../styled-system/css";
-  import { slots } from "./slots";
+  import { sva } from '../styled-system/css'
+  import { slots } from './slots'
 
   const card = sva({
     slots, // ❌ did NOT work -> ✅ will now work as expected
     base: {
       root: {
-        p: "6",
-        m: "4",
-        w: "md",
-        boxShadow: "md",
-        borderRadius: "md",
-        _dark: { bg: "#262626", color: "white" },
+        p: '6',
+        m: '4',
+        w: 'md',
+        boxShadow: 'md',
+        borderRadius: 'md',
+        _dark: { bg: '#262626', color: 'white' },
       },
       content: {
-        textStyle: "lg",
+        textStyle: 'lg',
       },
       title: {
-        textStyle: "xl",
-        fontWeight: "semibold",
-        pb: "2",
+        textStyle: 'xl',
+        fontWeight: 'semibold',
+        pb: '2',
       },
     },
-  });
+  })
   ```
 
 - b01eb049: Fix a parser issue where we didn't handle import aliases when using a {xxx}.raw() function.
@@ -1148,15 +1125,15 @@
 
   ```ts
   // button.stories.ts
-  import { button as buttonRecipe } from "@ui/styled-system/recipes";
+  import { button as buttonRecipe } from '@ui/styled-system/recipes'
 
   export const Primary: Story = {
     // ❌ this wouldn't be parsed as a recipe because of the alias + .raw()
     //  -> ✅ it's now fixed
     args: buttonRecipe.raw({
-      color: "primary",
+      color: 'primary',
     }),
-  };
+  }
   ```
 
 - a3b6ed5f: Fix & perf improvement: skip JSX parsing when not using `config.jsxFramework` / skip tagged template literal
@@ -1178,9 +1155,9 @@
 
   ```ts
   css({
-    borderWidth: "[2px!]",
-    width: "[2px !important]",
-  });
+    borderWidth: '[2px!]',
+    width: '[2px !important]',
+  })
   ```
 
 - Updated dependencies [8f4ce97c]
@@ -1408,9 +1385,9 @@
 
   ```ts
   interface FactoryOptions<TProps extends Dict> {
-    dataAttr?: boolean;
-    defaultProps?: TProps;
-    shouldForwardProp?(prop: string, variantKeys: string[]): boolean;
+    dataAttr?: boolean
+    defaultProps?: TProps
+    shouldForwardProp?(prop: string, variantKeys: string[]): boolean
   }
   ```
 
@@ -1418,16 +1395,16 @@
     This is useful for testing and debugging.
 
   ```jsx
-  import { styled } from "../styled-system/jsx";
-  import { button } from "../styled-system/recipes";
+  import { styled } from '../styled-system/jsx'
+  import { button } from '../styled-system/recipes'
 
-  const Button = styled("button", button, { dataAttr: true });
+  const Button = styled('button', button, { dataAttr: true })
 
   const App = () => (
     <Button variant="secondary" mt="10px">
       Button
     </Button>
-  );
+  )
   // Will render something like <button data-recipe="button" class="btn btn--variant_purple mt_10px">Button</button>
   ```
 
@@ -1435,17 +1412,17 @@
     override the default variants or base styles of a recipe.
 
   ```jsx
-  import { styled } from "../styled-system/jsx";
-  import { button } from "../styled-system/recipes";
+  import { styled } from '../styled-system/jsx'
+  import { button } from '../styled-system/recipes'
 
-  const Button = styled("button", button, {
+  const Button = styled('button', button, {
     defaultProps: {
-      variant: "secondary",
-      px: "10px",
+      variant: 'secondary',
+      px: '10px',
     },
-  });
+  })
 
-  const App = () => <Button>Button</Button>;
+  const App = () => <Button>Button</Button>
   // Will render something like <button class="btn btn--variant_secondary px_10px">Button</button>
   ```
 
@@ -1453,20 +1430,19 @@
     props except recipe variants and style props are forwarded.
 
   ```jsx
-  import { styled } from "../styled-system/jsx";
-  import { button } from "../styled-system/recipes";
-  import { isCssProperty } from "../styled-system/jsx";
-  import { motion, isValidMotionProp } from "framer-motion";
+  import { styled } from '../styled-system/jsx'
+  import { button } from '../styled-system/recipes'
+  import { isCssProperty } from '../styled-system/jsx'
+  import { motion, isValidMotionProp } from 'framer-motion'
 
   const StyledMotion = styled(
     motion.div,
     {},
     {
       shouldForwardProp: (prop, variantKeys) =>
-        isValidMotionProp(prop) ||
-        (!variantKeys.includes(prop) && !isCssProperty(prop)),
+        isValidMotionProp(prop) || (!variantKeys.includes(prop) && !isCssProperty(prop)),
     },
-  );
+  )
   ```
 
 - 3a04a927: Fix static extraction of the
@@ -1566,42 +1542,42 @@
 
   ```ts
   export default defineConfig({
-    outdir: "./outdir",
+    outdir: './outdir',
     importMap: {
-      css: "#panda/styled-system/css",
-      recipes: "#panda/styled-system/recipes",
-      patterns: "#panda/styled-system/patterns",
-      jsx: "#panda/styled-system/jsx",
+      css: '#panda/styled-system/css',
+      recipes: '#panda/styled-system/recipes',
+      patterns: '#panda/styled-system/patterns',
+      jsx: '#panda/styled-system/jsx',
     },
-  });
+  })
   ```
 
   Or you could also make your outdir an actual package from your monorepo:
 
   ```ts
   export default defineConfig({
-    outdir: "../packages/styled-system",
+    outdir: '../packages/styled-system',
     importMap: {
-      css: "@monorepo/styled-system",
-      recipes: "@monorepo/styled-system",
-      patterns: "@monorepo/styled-system",
-      jsx: "@monorepo/styled-system",
+      css: '@monorepo/styled-system',
+      recipes: '@monorepo/styled-system',
+      patterns: '@monorepo/styled-system',
+      jsx: '@monorepo/styled-system',
     },
-  });
+  })
   ```
 
   Working with tsconfig paths aliases is easy:
 
   ```ts
   export default defineConfig({
-    outdir: "styled-system",
+    outdir: 'styled-system',
     importMap: {
-      css: "styled-system/css",
-      recipes: "styled-system/recipes",
-      patterns: "styled-system/patterns",
-      jsx: "styled-system/jsx",
+      css: 'styled-system/css',
+      recipes: 'styled-system/recipes',
+      patterns: 'styled-system/patterns',
+      jsx: 'styled-system/jsx',
     },
-  });
+  })
   ```
 
 - Updated dependencies [95b06bb1]
@@ -1636,20 +1612,20 @@
   so this will now work:
 
   ```ts
-  import { css } from "styled-system/css";
+  import { css } from 'styled-system/css'
 
   const paragraphSpacingStyle = css.raw({
-    "&:not(:first-child)": { marginBlockEnd: "1em" },
-  });
+    '&:not(:first-child)': { marginBlockEnd: '1em' },
+  })
 
   export const proseCss = css.raw({
-    maxWidth: "800px",
-    "& p": {
-      "&:not(:first-child)": { marginBlockStart: "1em" },
+    maxWidth: '800px',
+    '& p': {
+      '&:not(:first-child)': { marginBlockStart: '1em' },
     },
-    "& h1": paragraphSpacingStyle,
-    "& h2": paragraphSpacingStyle,
-  });
+    '& h1': paragraphSpacingStyle,
+    '& h2': paragraphSpacingStyle,
+  })
   ```
 
   & use ECMA preset for ts-evaluator: This means that no other globals than those that are defined in the ECMAScript
@@ -1657,35 +1633,35 @@
   this:
 
   ```ts
-  import { cva } from ".panda/css";
+  import { cva } from '.panda/css'
 
   const variants = () => {
     const spacingTokens = Object.entries({
-      s: "token(spacing.1)",
-      m: "token(spacing.2)",
-      l: "token(spacing.3)",
-    });
+      s: 'token(spacing.1)',
+      m: 'token(spacing.2)',
+      l: 'token(spacing.3)',
+    })
 
     const spacingProps = {
-      px: "paddingX",
-      py: "paddingY",
-    };
+      px: 'paddingX',
+      py: 'paddingY',
+    }
 
     // Generate variants programmatically
     return Object.entries(spacingProps)
       .map(([name, styleProp]) => {
         const variants = spacingTokens
           .map(([variant, token]) => ({ [variant]: { [styleProp]: token } }))
-          .reduce((_agg, kv) => ({ ..._agg, ...kv }));
+          .reduce((_agg, kv) => ({ ..._agg, ...kv }))
 
-        return { [name]: variants };
+        return { [name]: variants }
       })
-      .reduce((_agg, kv) => ({ ..._agg, ...kv }));
-  };
+      .reduce((_agg, kv) => ({ ..._agg, ...kv }))
+  }
 
   const baseStyle = cva({
     variants: variants(),
-  });
+  })
   ```
 
 - Updated dependencies [c40ae1b9]
@@ -1832,12 +1808,12 @@
   **Definition**
 
   ```jsx
-  import { sva } from "styled-system/css";
+  import { sva } from 'styled-system/css'
 
   const button = sva({
-    slots: ["label", "icon"],
+    slots: ['label', 'icon'],
     base: {
-      label: { color: "red", textDecoration: "underline" },
+      label: { color: 'red', textDecoration: 'underline' },
     },
     variants: {
       rounded: {
@@ -1845,33 +1821,33 @@
       },
       size: {
         sm: {
-          label: { fontSize: "sm" },
-          icon: { fontSize: "sm" },
+          label: { fontSize: 'sm' },
+          icon: { fontSize: 'sm' },
         },
         lg: {
-          label: { fontSize: "lg" },
-          icon: { fontSize: "lg", color: "pink" },
+          label: { fontSize: 'lg' },
+          icon: { fontSize: 'lg', color: 'pink' },
         },
       },
     },
     defaultVariants: {
-      size: "sm",
+      size: 'sm',
     },
-  });
+  })
   ```
 
   **Usage**
 
   ```jsx
   export function App() {
-    const btnClass = button({ size: "lg", rounded: true });
+    const btnClass = button({ size: 'lg', rounded: true })
 
     return (
       <button>
         <p class={btnClass.label}> Label</p>
         <p class={btnClass.icon}> Icon</p>
       </button>
-    );
+    )
   }
   ```
 
@@ -1920,26 +1896,26 @@
   Update the `jsx` property to be used for advanced tracking of custom pattern components.
 
   ```jsx
-  import { Circle } from "styled-system/jsx";
+  import { Circle } from 'styled-system/jsx'
   const CustomCircle = ({ children, ...props }) => {
-    return <Circle {...props}>{children}</Circle>;
-  };
+    return <Circle {...props}>{children}</Circle>
+  }
   ```
 
   To track the `CustomCircle` component, you can now use the `jsx` property.
 
   ```js
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     patterns: {
       extend: {
         circle: {
-          jsx: ["CustomCircle"],
+          jsx: ['CustomCircle'],
         },
       },
     },
-  });
+  })
   ```
 
 ### Patch Changes
@@ -2039,17 +2015,9 @@
   ```tsx
   const ComponentWithMultipleRecipes = ({ variant }) => {
     return (
-      <button
-        className={cx(
-          pinkRecipe({ variant }),
-          greenRecipe({ variant }),
-          blueRecipe({ variant }),
-        )}
-      >
-        Hello
-      </button>
-    );
-  };
+      <button className={cx(pinkRecipe({ variant }), greenRecipe({ variant }), blueRecipe({ variant }))}>Hello</button>
+    )
+  }
   ```
 
   Given a `panda.config.ts` with recipes each including a common `jsx` tag name, such as:
@@ -2157,8 +2125,8 @@
   // panda.config.ts
   export default defineConfig({
     //...
-    syntax: "template-literal",
-  });
+    syntax: 'template-literal',
+  })
   ```
 
   > For existing projects, you might need to run the `panda codegen --clean`
@@ -2179,10 +2147,10 @@
   ```ts
   const Input = styled.input({
     base: {
-      color: "blue.100",
-      bg: "blue.900",
+      color: 'blue.100',
+      bg: 'blue.900',
     },
-  });
+  })
   ```
 
 - Updated dependencies [60df9bd1]
diff --git a/packages/postcss/CHANGELOG.md b/packages/postcss/CHANGELOG.md
index 899092836..6ccbc138f 100644
--- a/packages/postcss/CHANGELOG.md
+++ b/packages/postcss/CHANGELOG.md
@@ -63,11 +63,11 @@
 
   module.exports = {
     plugins: {
-      "@pandacss/dev/postcss": {
+      '@pandacss/dev/postcss': {
         allow: [/node_modules\/.embroider/],
       },
     },
-  };
+  }
   ```
 
 ### Patch Changes
@@ -158,11 +158,11 @@
   ```js
   module.exports = {
     plugins: {
-      "@pandacss/dev/postcss": {
-        logfile: "./logs/panda.log",
+      '@pandacss/dev/postcss': {
+        logfile: './logs/panda.log',
       },
     },
-  };
+  }
   ```
 
 - Updated dependencies [05686b9d]
@@ -599,11 +599,11 @@
   ```js
   module.exports = {
     plugins: [
-      require("@pandacss/postcss")({
-        configPath: "./path/to/panda.config.js",
+      require('@pandacss/postcss')({
+        configPath: './path/to/panda.config.js',
       }),
     ],
-  };
+  }
   ```
 
   - @pandacss/node@0.3.2
diff --git a/packages/preset-base/CHANGELOG.md b/packages/preset-base/CHANGELOG.md
index f33e0b958..1ec7d5a32 100644
--- a/packages/preset-base/CHANGELOG.md
+++ b/packages/preset-base/CHANGELOG.md
@@ -17,7 +17,7 @@
   **Before**
 
   ```jsx
-  import { linkBox, linkOverlay } from "styled-system/patterns";
+  import { linkBox, linkOverlay } from 'styled-system/patterns'
 
   const App = () => {
     return (
@@ -27,26 +27,26 @@
           Link
         </a>
       </div>
-    );
-  };
+    )
+  }
   ```
 
   **After**
 
   ```jsx
-  import { css } from "styled-system/css";
-  import { linkOverlay } from "styled-system/patterns";
+  import { css } from 'styled-system/css'
+  import { linkOverlay } from 'styled-system/patterns'
 
   const App = () => {
     return (
-      <div className={css({ pos: "relative" })}>
+      <div className={css({ pos: 'relative' })}>
         <img src="https://via.placeholder.com/150" alt="placeholder" />
         <a href="#" className={linkOverlay()}>
           Link
         </a>
       </div>
-    );
-  };
+    )
+  }
   ```
 
 ### Patch Changes
@@ -110,9 +110,9 @@
     useful when applying negative margin to child elements.
 
   ```tsx
-  <div className={flex({ spaceX: "-1" })}>
-    <div className={circle({ size: "5", bg: "red" })} />
-    <div className={circle({ size: "5", bg: "pink" })} />
+  <div className={flex({ spaceX: '-1' })}>
+    <div className={circle({ size: '5', bg: 'red' })} />
+    <div className={circle({ size: '5', bg: 'pink' })} />
   </div>
   ```
 
@@ -124,13 +124,13 @@
   ```tsx
   <div
     className={css({
-      bgGradient: "to-r",
+      bgGradient: 'to-r',
       // from
-      gradientFrom: "red",
-      gradientFromPosition: "top left",
+      gradientFrom: 'red',
+      gradientFromPosition: 'top left',
       // to
-      gradientTo: "blue",
-      gradientToPosition: "bottom right",
+      gradientTo: 'blue',
+      gradientToPosition: 'bottom right',
     })}
   />
   ```
@@ -225,9 +225,9 @@
 
   ```ts
   css({
-    textShadow: "1px 1px 1px var(--text-shadow-color)",
-    textShadowColor: "black",
-  });
+    textShadow: '1px 1px 1px var(--text-shadow-color)',
+    textShadowColor: 'black',
+  })
   ```
 
 ### Patch Changes
@@ -279,9 +279,9 @@
 
   ```ts
   css({
-    bg: "red.300/40",
-    color: "white",
-  });
+    bg: 'red.300/40',
+    color: 'white',
+  })
   ```
 
   This will generate:
@@ -289,11 +289,7 @@
   ```css
   @layer utilities {
     .bg_red\.300\/40 {
-      --mix-background: color-mix(
-        in srgb,
-        var(--colors-red-300) 40%,
-        transparent
-      );
+      --mix-background: color-mix(in srgb, var(--colors-red-300) 40%, transparent);
       background: var(--mix-background, var(--colors-red-300));
     }
 
@@ -317,21 +313,21 @@
   export default defineConfig({
     utilities: {
       background: {
-        shorthand: "bg",
-        className: "bg",
-        values: "colors",
+        shorthand: 'bg',
+        className: 'bg',
+        values: 'colors',
         transform(value, args) {
-          const mix = args.utils.colorMix(value);
+          const mix = args.utils.colorMix(value)
           // This can happen if the value format is invalid (e.g. `bg: red.300/invalid` or `bg: red.300//10`)
-          if (mix.invalid) return { background: value };
+          if (mix.invalid) return { background: value }
 
           return {
             background: mix.value,
-          };
+          }
         },
       },
     },
-  });
+  })
   ```
 
   ***
@@ -340,21 +336,21 @@
   property:
 
   ```ts
-  import type { PropertyTransform } from "@pandacss/types";
+  import type { PropertyTransform } from '@pandacss/types'
 
   export const createColorMixTransform =
     (prop: string): PropertyTransform =>
     (value, args) => {
-      const mix = args.utils.colorMix(value);
-      if (mix.invalid) return { [prop]: value };
+      const mix = args.utils.colorMix(value)
+      if (mix.invalid) return { [prop]: value }
 
-      const cssVar = "--mix-" + prop;
+      const cssVar = '--mix-' + prop
 
       return {
         [cssVar]: mix.value,
         [prop]: `var(${cssVar}, ${mix.color})`,
-      };
-    };
+      }
+    }
   ```
 
   then the same utility transform as above can be written like this:
@@ -382,34 +378,34 @@
     // ...
     theme: {
       extend: {
-        containerNames: ["sidebar", "content"],
+        containerNames: ['sidebar', 'content'],
         containerSizes: {
-          xs: "40em",
-          sm: "60em",
-          md: "80em",
+          xs: '40em',
+          sm: '60em',
+          md: '80em',
         },
       },
     },
-  });
+  })
   ```
 
   The default container sizes in the `@pandacss/preset-panda` preset are shown below:
 
   ```ts
   export const containerSizes = {
-    xs: "320px",
-    sm: "384px",
-    md: "448px",
-    lg: "512px",
-    xl: "576px",
-    "2xl": "672px",
-    "3xl": "768px",
-    "4xl": "896px",
-    "5xl": "1024px",
-    "6xl": "1152px",
-    "7xl": "1280px",
-    "8xl": "1440px",
-  };
+    xs: '320px',
+    sm: '384px',
+    md: '448px',
+    lg: '512px',
+    xl: '576px',
+    '2xl': '672px',
+    '3xl': '768px',
+    '4xl': '896px',
+    '5xl': '1024px',
+    '6xl': '1152px',
+    '7xl': '1280px',
+    '8xl': '1440px',
+  }
   ```
 
   Then use them in your styles by referencing using `@<container-name>/<container-size>` syntax:
@@ -493,11 +489,11 @@
     patterns: {
       extend: {
         stack: {
-          defaultValues: { gap: "20px" },
+          defaultValues: { gap: '20px' },
         },
       },
     },
-  });
+  })
   ```
 
 ### Patch Changes
@@ -568,13 +564,13 @@
         // add aspect ratio tokens
         tokens: {
           aspectRatios: {
-            "1:1": "1",
-            "16:9": "16/9",
+            '1:1': '1',
+            '16:9': '16/9',
           },
         },
       },
     },
-  });
+  })
   ```
 
   Here's what the default aspect ratio tokens in the base preset looks like:
@@ -902,15 +898,15 @@
   `block` bleed to a child element, setting its value to match the parent's padding.
 
   ```tsx
-  import { css } from "../styled-system/css";
-  import { bleed } from "../styled-system/patterns";
+  import { css } from '../styled-system/css'
+  import { bleed } from '../styled-system/patterns'
 
   export function Page() {
     return (
-      <div class={css({ px: "6" })}>
-        <div class={bleed({ inline: "6" })}>Welcome</div>
+      <div class={css({ px: '6' })}>
+        <div class={bleed({ inline: '6' })}>Welcome</div>
       </div>
-    );
+    )
   }
   ```
 
@@ -919,8 +915,8 @@
   Visually hidden is a layout pattern used to hide content visually, but still make it available to screen readers.
 
   ```tsx
-  import { css } from "../styled-system/css";
-  import { visuallyHidden } from "../styled-system/patterns";
+  import { css } from '../styled-system/css'
+  import { visuallyHidden } from '../styled-system/patterns'
 
   export function Checkbox() {
     return (
@@ -930,7 +926,7 @@
         </input>
         <span>Checkbox</span>
       </label>
-    );
+    )
   }
   ```
 
@@ -982,26 +978,26 @@
   Update the `jsx` property to be used for advanced tracking of custom pattern components.
 
   ```jsx
-  import { Circle } from "styled-system/jsx";
+  import { Circle } from 'styled-system/jsx'
   const CustomCircle = ({ children, ...props }) => {
-    return <Circle {...props}>{children}</Circle>;
-  };
+    return <Circle {...props}>{children}</Circle>
+  }
   ```
 
   To track the `CustomCircle` component, you can now use the `jsx` property.
 
   ```js
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     patterns: {
       extend: {
         circle: {
-          jsx: ["CustomCircle"],
+          jsx: ['CustomCircle'],
         },
       },
     },
-  });
+  })
   ```
 
 ### Patch Changes
@@ -1025,7 +1021,7 @@
   transition property, timing function and duration. This allows you to add transitions with a single property.
 
   ```jsx
-  <div className={css({ transition: "background" })}>Content</div>
+  <div className={css({ transition: 'background' })}>Content</div>
   ```
 
   This will generate the following css:
diff --git a/packages/preset-panda/CHANGELOG.md b/packages/preset-panda/CHANGELOG.md
index 598e4b49f..15f32ea11 100644
--- a/packages/preset-panda/CHANGELOG.md
+++ b/packages/preset-panda/CHANGELOG.md
@@ -226,13 +226,13 @@
         // add aspect ratio tokens
         tokens: {
           aspectRatios: {
-            "1:1": "1",
-            "16:9": "16/9",
+            '1:1': '1',
+            '16:9': '16/9',
           },
         },
       },
     },
-  });
+  })
   ```
 
   Here's what the default aspect ratio tokens in the base preset looks like:
diff --git a/packages/shared/CHANGELOG.md b/packages/shared/CHANGELOG.md
index a8631d174..c56ccc45b 100644
--- a/packages/shared/CHANGELOG.md
+++ b/packages/shared/CHANGELOG.md
@@ -39,21 +39,21 @@
 - 99870bb: Fix issue where setting the pattern `jsx` option with dot notation didn't work.
 
   ```jsx
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
     patterns: {
       extend: {
         grid: {
-          jsx: ["Form.Group", "Grid"],
+          jsx: ['Form.Group', 'Grid'],
         },
         stack: {
-          jsx: ["Form.Action", "Stack"],
+          jsx: ['Form.Action', 'Stack'],
         },
       },
     },
-  });
+  })
   ```
 
 ## 0.37.0
@@ -105,10 +105,10 @@
 
   ```ts
   css({
-    padding: "1px",
-    paddingTop: "3px",
-    paddingBottom: "4px",
-  });
+    padding: '1px',
+    paddingTop: '3px',
+    paddingBottom: '4px',
+  })
   ```
 
   Will now always generate the following css:
@@ -236,9 +236,9 @@
 
   ```ts
   css({
-    borderWidth: "[2px!]",
-    width: "[2px !important]",
-  });
+    borderWidth: '[2px!]',
+    width: '[2px !important]',
+  })
   ```
 
 ## 0.22.0
@@ -255,18 +255,18 @@
   and suffixing with `]`, e.g. writing `[123px]` as a value will bypass the token validation.
 
   ```ts
-  import { css } from "../styled-system/css";
+  import { css } from '../styled-system/css'
 
   css({
     // @ts-expect-error TS will throw when using from strictTokens: true
-    color: "#fff",
+    color: '#fff',
     // @ts-expect-error TS will throw when using from strictTokens: true
-    width: "100px",
+    width: '100px',
 
     // ✅ but this is now allowed:
-    bgColor: "[rgb(51 155 240)]",
-    fontSize: "[12px]",
-  });
+    bgColor: '[rgb(51 155 240)]',
+    fontSize: '[12px]',
+  })
   ```
 
 ## 0.20.1
@@ -309,16 +309,16 @@
   together and the styles will be merged correctly.
 
   ```jsx
-  const Box = styled("div", {
+  const Box = styled('div', {
     base: {
-      background: "red.light",
-      color: "white",
+      background: 'red.light',
+      color: 'white',
     },
-  });
+  })
 
   const ExtendedBox = styled(Box, {
-    base: { background: "red.dark" },
-  });
+    base: { background: 'red.dark' },
+  })
 
   // <ExtendedBox> will have a background of `red.dark` and a color of `white`
   ```
@@ -331,14 +331,14 @@
   - CVA or Inline CVA + Config Recipe = ❌
 
   ```jsx
-  import { button } from "../styled-system/recipes";
+  import { button } from '../styled-system/recipes'
 
-  const Button = styled("div", button);
+  const Button = styled('div', button)
 
   // ❌ This will throw an error
   const ExtendedButton = styled(Button, {
-    base: { background: "red.dark" },
-  });
+    base: { background: 'red.dark' },
+  })
   ```
 
 ## 0.16.0
@@ -392,14 +392,7 @@
   Example:
 
   ```tsx
-  <h1
-    className={cx(
-      css({ mx: "3", paddingTop: "4" }),
-      css({ mx: "10", pt: "6" }),
-    )}
-  >
-    Will result in "mx_10 pt_6"
-  </h1>
+  <h1 className={cx(css({ mx: '3', paddingTop: '4' }), css({ mx: '10', pt: '6' }))}>Will result in "mx_10 pt_6"</h1>
   ```
 
 ## 0.11.0
@@ -418,12 +411,12 @@
   **Definition**
 
   ```jsx
-  import { sva } from "styled-system/css";
+  import { sva } from 'styled-system/css'
 
   const button = sva({
-    slots: ["label", "icon"],
+    slots: ['label', 'icon'],
     base: {
-      label: { color: "red", textDecoration: "underline" },
+      label: { color: 'red', textDecoration: 'underline' },
     },
     variants: {
       rounded: {
@@ -431,33 +424,33 @@
       },
       size: {
         sm: {
-          label: { fontSize: "sm" },
-          icon: { fontSize: "sm" },
+          label: { fontSize: 'sm' },
+          icon: { fontSize: 'sm' },
         },
         lg: {
-          label: { fontSize: "lg" },
-          icon: { fontSize: "lg", color: "pink" },
+          label: { fontSize: 'lg' },
+          icon: { fontSize: 'lg', color: 'pink' },
         },
       },
     },
     defaultVariants: {
-      size: "sm",
+      size: 'sm',
     },
-  });
+  })
   ```
 
   **Usage**
 
   ```jsx
   export function App() {
-    const btnClass = button({ size: "lg", rounded: true });
+    const btnClass = button({ size: 'lg', rounded: true })
 
     return (
       <button>
         <p class={btnClass.label}> Label</p>
         <p class={btnClass.icon}> Icon</p>
       </button>
-    );
+    )
   }
   ```
 
@@ -505,19 +498,19 @@
 
   ```ts
   const shorthands = {
-    flexDir: "flexDirection",
-  };
+    flexDir: 'flexDirection',
+  }
 
   const obj = {
-    flexDir: "row",
+    flexDir: 'row',
     flexDirection: undefined,
-  };
+  }
 
   const result = walkObject(obj, (value) => value, {
     getKey(prop) {
-      return shorthands[prop] ?? prop;
+      return shorthands[prop] ?? prop
     },
-  });
+  })
   ```
 
   This would set the `flexDirection` to `row` (using `getKey`) and then set the `flexDirection` property again, this
@@ -538,8 +531,8 @@
   // panda.config.ts
   export default defineConfig({
     //...
-    syntax: "template-literal",
-  });
+    syntax: 'template-literal',
+  })
   ```
 
   > For existing projects, you might need to run the `panda codegen --clean`
@@ -616,11 +609,11 @@ This hook is called right before writing the codegen files to disk. You can use
 export default defineConfig({
   // ...
   hooks: {
-    "codegen:prepare": ({ artifacts, changed }) => {
+    'codegen:prepare': ({ artifacts, changed }) => {
       // do something with the emitted js/d.ts files
     },
   },
-});
+})
 ```
 
 - 49c760cd: Fix issue where responsive array in css and cva doesn't generate the correct classname
@@ -706,9 +699,9 @@ export default defineConfig({
 
   ```ts
   css({
-    borderWidth: "[2px!]",
-    width: "[2px !important]",
-  });
+    borderWidth: '[2px!]',
+    width: '[2px !important]',
+  })
   ```
 
 ## 0.22.0
@@ -725,18 +718,18 @@ export default defineConfig({
   and suffixing with `]`, e.g. writing `[123px]` as a value will bypass the token validation.
 
   ```ts
-  import { css } from "../styled-system/css";
+  import { css } from '../styled-system/css'
 
   css({
     // @ts-expect-error TS will throw when using from strictTokens: true
-    color: "#fff",
+    color: '#fff',
     // @ts-expect-error TS will throw when using from strictTokens: true
-    width: "100px",
+    width: '100px',
 
     // ✅ but this is now allowed:
-    bgColor: "[rgb(51 155 240)]",
-    fontSize: "[12px]",
-  });
+    bgColor: '[rgb(51 155 240)]',
+    fontSize: '[12px]',
+  })
   ```
 
 ## 0.20.1
@@ -779,16 +772,16 @@ export default defineConfig({
   together and the styles will be merged correctly.
 
   ```jsx
-  const Box = styled("div", {
+  const Box = styled('div', {
     base: {
-      background: "red.light",
-      color: "white",
+      background: 'red.light',
+      color: 'white',
     },
-  });
+  })
 
   const ExtendedBox = styled(Box, {
-    base: { background: "red.dark" },
-  });
+    base: { background: 'red.dark' },
+  })
 
   // <ExtendedBox> will have a background of `red.dark` and a color of `white`
   ```
@@ -801,14 +794,14 @@ export default defineConfig({
   - CVA or Inline CVA + Config Recipe = ❌
 
   ```jsx
-  import { button } from "../styled-system/recipes";
+  import { button } from '../styled-system/recipes'
 
-  const Button = styled("div", button);
+  const Button = styled('div', button)
 
   // ❌ This will throw an error
   const ExtendedButton = styled(Button, {
-    base: { background: "red.dark" },
-  });
+    base: { background: 'red.dark' },
+  })
   ```
 
 ## 0.16.0
@@ -862,14 +855,7 @@ export default defineConfig({
   Example:
 
   ```tsx
-  <h1
-    className={cx(
-      css({ mx: "3", paddingTop: "4" }),
-      css({ mx: "10", pt: "6" }),
-    )}
-  >
-    Will result in "mx_10 pt_6"
-  </h1>
+  <h1 className={cx(css({ mx: '3', paddingTop: '4' }), css({ mx: '10', pt: '6' }))}>Will result in "mx_10 pt_6"</h1>
   ```
 
 ## 0.11.0
@@ -888,12 +874,12 @@ export default defineConfig({
   **Definition**
 
   ```jsx
-  import { sva } from "styled-system/css";
+  import { sva } from 'styled-system/css'
 
   const button = sva({
-    slots: ["label", "icon"],
+    slots: ['label', 'icon'],
     base: {
-      label: { color: "red", textDecoration: "underline" },
+      label: { color: 'red', textDecoration: 'underline' },
     },
     variants: {
       rounded: {
@@ -901,33 +887,33 @@ export default defineConfig({
       },
       size: {
         sm: {
-          label: { fontSize: "sm" },
-          icon: { fontSize: "sm" },
+          label: { fontSize: 'sm' },
+          icon: { fontSize: 'sm' },
         },
         lg: {
-          label: { fontSize: "lg" },
-          icon: { fontSize: "lg", color: "pink" },
+          label: { fontSize: 'lg' },
+          icon: { fontSize: 'lg', color: 'pink' },
         },
       },
     },
     defaultVariants: {
-      size: "sm",
+      size: 'sm',
     },
-  });
+  })
   ```
 
   **Usage**
 
   ```jsx
   export function App() {
-    const btnClass = button({ size: "lg", rounded: true });
+    const btnClass = button({ size: 'lg', rounded: true })
 
     return (
       <button>
         <p class={btnClass.label}> Label</p>
         <p class={btnClass.icon}> Icon</p>
       </button>
-    );
+    )
   }
   ```
 
@@ -975,19 +961,19 @@ export default defineConfig({
 
   ```ts
   const shorthands = {
-    flexDir: "flexDirection",
-  };
+    flexDir: 'flexDirection',
+  }
 
   const obj = {
-    flexDir: "row",
+    flexDir: 'row',
     flexDirection: undefined,
-  };
+  }
 
   const result = walkObject(obj, (value) => value, {
     getKey(prop) {
-      return shorthands[prop] ?? prop;
+      return shorthands[prop] ?? prop
     },
-  });
+  })
   ```
 
   This would set the `flexDirection` to `row` (using `getKey`) and then set the `flexDirection` property again, this
@@ -1008,8 +994,8 @@ export default defineConfig({
   // panda.config.ts
   export default defineConfig({
     //...
-    syntax: "template-literal",
-  });
+    syntax: 'template-literal',
+  })
   ```
 
   > For existing projects, you might need to run the `panda codegen --clean`
diff --git a/packages/studio/CHANGELOG.md b/packages/studio/CHANGELOG.md
index 95a275ac9..0e9772e8e 100644
--- a/packages/studio/CHANGELOG.md
+++ b/packages/studio/CHANGELOG.md
@@ -214,12 +214,12 @@
     theme: {
       extend: {
         colors: {
-          primary: { value: "blue" },
+          primary: { value: 'blue' },
         },
         // borderWidths: {}, // ⚠️ nothing defined here
       },
     },
-  });
+  })
   ```
 
   ```ts
@@ -230,8 +230,8 @@
 
     // ✅ after this PR, TS will not throw an error anymore as you don't have any `borderWidths` tokens
     // if you add one, this will error again (as it's supposed to)
-    borderWidths: "123px",
-  });
+    borderWidths: '123px',
+  })
   ```
 
   ## Description
@@ -286,11 +286,11 @@
 - 4576a60: Fix nested `styled` factory composition
 
   ```tsx
-  import { styled } from "../styled-system/jsx";
+  import { styled } from '../styled-system/jsx'
 
-  const BasicBox = styled("div", { base: { fontSize: "10px" } });
-  const ExtendedBox1 = styled(BasicBox, { base: { fontSize: "20px" } });
-  const ExtendedBox2 = styled(ExtendedBox1, { base: { fontSize: "30px" } });
+  const BasicBox = styled('div', { base: { fontSize: '10px' } })
+  const ExtendedBox1 = styled(BasicBox, { base: { fontSize: '20px' } })
+  const ExtendedBox2 = styled(ExtendedBox1, { base: { fontSize: '30px' } })
 
   export const App = () => {
     return (
@@ -303,8 +303,8 @@
         {/* NOW: ✅ fs_30px */}
         <ExtendedBox2>text3</ExtendedBox2>
       </>
-    );
-  };
+    )
+  }
   ```
 
   - @pandacss/astro-plugin-studio@0.34.3
@@ -683,9 +683,9 @@
 
   ```ts
   css({
-    borderWidth: "[2px!]",
-    width: "[2px !important]",
-  });
+    borderWidth: '[2px!]',
+    width: '[2px !important]',
+  })
   ```
 
 - Updated dependencies [8f4ce97c]
@@ -963,9 +963,9 @@
 
   ```ts
   interface FactoryOptions<TProps extends Dict> {
-    dataAttr?: boolean;
-    defaultProps?: TProps;
-    shouldForwardProp?(prop: string, variantKeys: string[]): boolean;
+    dataAttr?: boolean
+    defaultProps?: TProps
+    shouldForwardProp?(prop: string, variantKeys: string[]): boolean
   }
   ```
 
@@ -973,16 +973,16 @@
     This is useful for testing and debugging.
 
   ```jsx
-  import { styled } from "../styled-system/jsx";
-  import { button } from "../styled-system/recipes";
+  import { styled } from '../styled-system/jsx'
+  import { button } from '../styled-system/recipes'
 
-  const Button = styled("button", button, { dataAttr: true });
+  const Button = styled('button', button, { dataAttr: true })
 
   const App = () => (
     <Button variant="secondary" mt="10px">
       Button
     </Button>
-  );
+  )
   // Will render something like <button data-recipe="button" class="btn btn--variant_purple mt_10px">Button</button>
   ```
 
@@ -990,17 +990,17 @@
     override the default variants or base styles of a recipe.
 
   ```jsx
-  import { styled } from "../styled-system/jsx";
-  import { button } from "../styled-system/recipes";
+  import { styled } from '../styled-system/jsx'
+  import { button } from '../styled-system/recipes'
 
-  const Button = styled("button", button, {
+  const Button = styled('button', button, {
     defaultProps: {
-      variant: "secondary",
-      px: "10px",
+      variant: 'secondary',
+      px: '10px',
     },
-  });
+  })
 
-  const App = () => <Button>Button</Button>;
+  const App = () => <Button>Button</Button>
   // Will render something like <button class="btn btn--variant_secondary px_10px">Button</button>
   ```
 
@@ -1008,20 +1008,19 @@
     props except recipe variants and style props are forwarded.
 
   ```jsx
-  import { styled } from "../styled-system/jsx";
-  import { button } from "../styled-system/recipes";
-  import { isCssProperty } from "../styled-system/jsx";
-  import { motion, isValidMotionProp } from "framer-motion";
+  import { styled } from '../styled-system/jsx'
+  import { button } from '../styled-system/recipes'
+  import { isCssProperty } from '../styled-system/jsx'
+  import { motion, isValidMotionProp } from 'framer-motion'
 
   const StyledMotion = styled(
     motion.div,
     {},
     {
       shouldForwardProp: (prop, variantKeys) =>
-        isValidMotionProp(prop) ||
-        (!variantKeys.includes(prop) && !isCssProperty(prop)),
+        isValidMotionProp(prop) || (!variantKeys.includes(prop) && !isCssProperty(prop)),
     },
-  );
+  )
   ```
 
 - Updated dependencies [abd7c47a]
@@ -1043,22 +1042,22 @@
 
   ```ts file="panda.config.ts"
   const button = defineRecipe({
-    className: "btn",
-    base: { color: "green", fontSize: "16px" },
+    className: 'btn',
+    base: { color: 'green', fontSize: '16px' },
     variants: {
-      size: { small: { fontSize: "14px" } },
+      size: { small: { fontSize: '14px' } },
     },
-    compoundVariants: [{ size: "small", css: { color: "blue" } }],
-  });
+    compoundVariants: [{ size: 'small', css: { color: 'blue' } }],
+  })
   ```
 
   This would previously not merge the `color` property overrides, but now it does:
 
   ```tsx file="example.tsx"
-  import { styled } from "../styled-system/jsx";
-  import { button } from "../styled-system/recipes";
+  import { styled } from '../styled-system/jsx'
+  import { button } from '../styled-system/recipes'
 
-  const Button = styled("button", button);
+  const Button = styled('button', button)
 
   function App() {
     return (
@@ -1067,7 +1066,7 @@
           Click me
         </Button>
       </>
-    );
+    )
   }
   ```
 
@@ -1250,11 +1249,11 @@ This hook is called right before writing the codegen files to disk. You can use
 export default defineConfig({
   // ...
   hooks: {
-    "codegen:prepare": ({ artifacts, changed }) => {
+    'codegen:prepare': ({ artifacts, changed }) => {
       // do something with the emitted js/d.ts files
     },
   },
-});
+})
 ```
 
 - d5977c24: - Add a `--logfile` flag to the `panda`, `panda codegen`, `panda cssgen` and `panda debug` commands.
@@ -1271,11 +1270,11 @@ export default defineConfig({
   ```js
   module.exports = {
     plugins: {
-      "@pandacss/dev/postcss": {
-        logfile: "./logs/panda.log",
+      '@pandacss/dev/postcss': {
+        logfile: './logs/panda.log',
       },
     },
-  };
+  }
   ```
 
 - Updated dependencies [0dd45b6a]
@@ -1511,9 +1510,9 @@ export default defineConfig({
 
   ```ts
   css({
-    borderWidth: "[2px!]",
-    width: "[2px !important]",
-  });
+    borderWidth: '[2px!]',
+    width: '[2px !important]',
+  })
   ```
 
 - Updated dependencies [8f4ce97c]
@@ -1791,9 +1790,9 @@ export default defineConfig({
 
   ```ts
   interface FactoryOptions<TProps extends Dict> {
-    dataAttr?: boolean;
-    defaultProps?: TProps;
-    shouldForwardProp?(prop: string, variantKeys: string[]): boolean;
+    dataAttr?: boolean
+    defaultProps?: TProps
+    shouldForwardProp?(prop: string, variantKeys: string[]): boolean
   }
   ```
 
@@ -1801,16 +1800,16 @@ export default defineConfig({
     This is useful for testing and debugging.
 
   ```jsx
-  import { styled } from "../styled-system/jsx";
-  import { button } from "../styled-system/recipes";
+  import { styled } from '../styled-system/jsx'
+  import { button } from '../styled-system/recipes'
 
-  const Button = styled("button", button, { dataAttr: true });
+  const Button = styled('button', button, { dataAttr: true })
 
   const App = () => (
     <Button variant="secondary" mt="10px">
       Button
     </Button>
-  );
+  )
   // Will render something like <button data-recipe="button" class="btn btn--variant_purple mt_10px">Button</button>
   ```
 
@@ -1818,17 +1817,17 @@ export default defineConfig({
     override the default variants or base styles of a recipe.
 
   ```jsx
-  import { styled } from "../styled-system/jsx";
-  import { button } from "../styled-system/recipes";
+  import { styled } from '../styled-system/jsx'
+  import { button } from '../styled-system/recipes'
 
-  const Button = styled("button", button, {
+  const Button = styled('button', button, {
     defaultProps: {
-      variant: "secondary",
-      px: "10px",
+      variant: 'secondary',
+      px: '10px',
     },
-  });
+  })
 
-  const App = () => <Button>Button</Button>;
+  const App = () => <Button>Button</Button>
   // Will render something like <button class="btn btn--variant_secondary px_10px">Button</button>
   ```
 
@@ -1836,20 +1835,19 @@ export default defineConfig({
     props except recipe variants and style props are forwarded.
 
   ```jsx
-  import { styled } from "../styled-system/jsx";
-  import { button } from "../styled-system/recipes";
-  import { isCssProperty } from "../styled-system/jsx";
-  import { motion, isValidMotionProp } from "framer-motion";
+  import { styled } from '../styled-system/jsx'
+  import { button } from '../styled-system/recipes'
+  import { isCssProperty } from '../styled-system/jsx'
+  import { motion, isValidMotionProp } from 'framer-motion'
 
   const StyledMotion = styled(
     motion.div,
     {},
     {
       shouldForwardProp: (prop, variantKeys) =>
-        isValidMotionProp(prop) ||
-        (!variantKeys.includes(prop) && !isCssProperty(prop)),
+        isValidMotionProp(prop) || (!variantKeys.includes(prop) && !isCssProperty(prop)),
     },
-  );
+  )
   ```
 
 - Updated dependencies [abd7c47a]
@@ -1871,22 +1869,22 @@ export default defineConfig({
 
   ```ts file="panda.config.ts"
   const button = defineRecipe({
-    className: "btn",
-    base: { color: "green", fontSize: "16px" },
+    className: 'btn',
+    base: { color: 'green', fontSize: '16px' },
     variants: {
-      size: { small: { fontSize: "14px" } },
+      size: { small: { fontSize: '14px' } },
     },
-    compoundVariants: [{ size: "small", css: { color: "blue" } }],
-  });
+    compoundVariants: [{ size: 'small', css: { color: 'blue' } }],
+  })
   ```
 
   This would previously not merge the `color` property overrides, but now it does:
 
   ```tsx file="example.tsx"
-  import { styled } from "../styled-system/jsx";
-  import { button } from "../styled-system/recipes";
+  import { styled } from '../styled-system/jsx'
+  import { button } from '../styled-system/recipes'
 
-  const Button = styled("button", button);
+  const Button = styled('button', button)
 
   function App() {
     return (
@@ -1895,7 +1893,7 @@ export default defineConfig({
           Click me
         </Button>
       </>
-    );
+    )
   }
   ```
 
diff --git a/packages/token-dictionary/CHANGELOG.md b/packages/token-dictionary/CHANGELOG.md
index df151b1d3..cb2841b57 100644
--- a/packages/token-dictionary/CHANGELOG.md
+++ b/packages/token-dictionary/CHANGELOG.md
@@ -36,11 +36,11 @@
       ta: {
         deprecated: true,
         transform(value) {
-          return { textAlign: value };
+          return { textAlign: value }
         },
       },
     },
-  });
+  })
   ```
 
   **Deprecating a token**
@@ -50,11 +50,11 @@
     theme: {
       tokens: {
         spacing: {
-          lg: { value: "8px", deprecated: "use `8` instead" },
+          lg: { value: '8px', deprecated: 'use `8` instead' },
         },
       },
     },
-  });
+  })
   ```
 
   **Deprecating a pattern**
@@ -66,7 +66,7 @@
         deprecated: true,
       },
     },
-  });
+  })
   ```
 
   **Deprecating a recipe**
@@ -76,11 +76,11 @@
     theme: {
       recipes: {
         btn: {
-          deprecated: "will be removed in v2.0",
+          deprecated: 'will be removed in v2.0',
         },
       },
     },
-  });
+  })
   ```
 
   ### ESLint Plugin
@@ -173,7 +173,7 @@
 
   ```ts
   // panda.config.ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
@@ -182,15 +182,15 @@
       extend: {
         tokens: {
           colors: {
-            text: { value: "blue" },
+            text: { value: 'blue' },
           },
         },
         semanticTokens: {
           colors: {
             body: {
               value: {
-                base: "{colors.blue.600}",
-                _osDark: "{colors.blue.400}",
+                base: '{colors.blue.600}',
+                _osDark: '{colors.blue.400}',
               },
             },
           },
@@ -202,16 +202,16 @@
       primary: {
         tokens: {
           colors: {
-            text: { value: "red" },
+            text: { value: 'red' },
           },
         },
         semanticTokens: {
           colors: {
-            muted: { value: "{colors.red.200}" },
+            muted: { value: '{colors.red.200}' },
             body: {
               value: {
-                base: "{colors.red.600}",
-                _osDark: "{colors.red.400}",
+                base: '{colors.red.600}',
+                _osDark: '{colors.red.400}',
               },
             },
           },
@@ -220,23 +220,23 @@
       secondary: {
         tokens: {
           colors: {
-            text: { value: "blue" },
+            text: { value: 'blue' },
           },
         },
         semanticTokens: {
           colors: {
-            muted: { value: "{colors.blue.200}" },
+            muted: { value: '{colors.blue.200}' },
             body: {
               value: {
-                base: "{colors.blue.600}",
-                _osDark: "{colors.blue.400}",
+                base: '{colors.blue.600}',
+                _osDark: '{colors.blue.400}',
               },
             },
           },
         },
       },
     },
-  });
+  })
   ```
 
   ### Pregenerating themes
@@ -246,14 +246,14 @@
 
   ```ts
   // panda.config.ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
     staticCss: {
-      themes: ["primary", "secondary"],
+      themes: ['primary', 'secondary'],
     },
-  });
+  })
   ```
 
   This will generate the following CSS:
@@ -265,7 +265,7 @@
       --colors-body: var(--colors-blue-600);
     }
 
-    [data-panda-theme="primary"] {
+    [data-panda-theme='primary'] {
       --colors-text: red;
       --colors-muted: var(--colors-red-200);
       --colors-body: var(--colors-red-600);
@@ -276,7 +276,7 @@
         --colors-body: var(--colors-blue-400);
       }
 
-      [data-panda-theme="primary"] {
+      [data-panda-theme='primary'] {
         --colors-body: var(--colors-red-400);
       }
     }
@@ -307,9 +307,9 @@
   Dynamically import a theme using its name:
 
   ```ts
-  import { getTheme } from "../styled-system/themes";
+  import { getTheme } from '../styled-system/themes'
 
-  const theme = await getTheme("red");
+  const theme = await getTheme('red')
   //    ^? {
   //     name: "red";
   //     id: string;
@@ -320,10 +320,10 @@
   Inject the theme styles into the DOM:
 
   ```ts
-  import { injectTheme } from "../styled-system/themes";
+  import { injectTheme } from '../styled-system/themes'
 
-  const theme = await getTheme("red");
-  injectTheme(document.documentElement, theme); // this returns the injected style element
+  const theme = await getTheme('red')
+  injectTheme(document.documentElement, theme) // this returns the injected style element
   ```
 
   ***
@@ -332,62 +332,54 @@
 
   ```tsx
   // app/layout.tsx
-  import { Inter } from "next/font/google";
-  import { cookies } from "next/headers";
-  import { ThemeName, getTheme } from "../../styled-system/themes";
-
-  export default async function RootLayout({
-    children,
-  }: {
-    children: React.ReactNode;
-  }) {
-    const store = cookies();
-    const themeName = store.get("theme")?.value as ThemeName;
-    const theme = themeName && (await getTheme(themeName));
+  import { Inter } from 'next/font/google'
+  import { cookies } from 'next/headers'
+  import { ThemeName, getTheme } from '../../styled-system/themes'
+
+  export default async function RootLayout({ children }: { children: React.ReactNode }) {
+    const store = cookies()
+    const themeName = store.get('theme')?.value as ThemeName
+    const theme = themeName && (await getTheme(themeName))
 
     return (
       <html lang="en" data-panda-theme={themeName ? themeName : undefined}>
         {themeName && (
           <head>
-            <style
-              type="text/css"
-              id={theme.id}
-              dangerouslySetInnerHTML={{ __html: theme.css }}
-            />
+            <style type="text/css" id={theme.id} dangerouslySetInnerHTML={{ __html: theme.css }} />
           </head>
         )}
         <body>{children}</body>
       </html>
-    );
+    )
   }
 
   // app/page.tsx
-  import { getTheme, injectTheme } from "../../styled-system/themes";
+  import { getTheme, injectTheme } from '../../styled-system/themes'
 
   export default function Home() {
     return (
       <>
         <button
           onClick={async () => {
-            const current = document.documentElement.dataset.pandaTheme;
-            const next = current === "primary" ? "secondary" : "primary";
-            const theme = await getTheme(next);
-            setCookie("theme", next, 7);
-            injectTheme(document.documentElement, theme);
+            const current = document.documentElement.dataset.pandaTheme
+            const next = current === 'primary' ? 'secondary' : 'primary'
+            const theme = await getTheme(next)
+            setCookie('theme', next, 7)
+            injectTheme(document.documentElement, theme)
           }}
         >
           swap theme
         </button>
       </>
-    );
+    )
   }
 
   // Set a Cookie
   function setCookie(cName: string, cValue: any, expDays: number) {
-    let date = new Date();
-    date.setTime(date.getTime() + expDays * 24 * 60 * 60 * 1000);
-    const expires = "expires=" + date.toUTCString();
-    document.cookie = cName + "=" + cValue + "; " + expires + "; path=/";
+    let date = new Date()
+    date.setTime(date.getTime() + expDays * 24 * 60 * 60 * 1000)
+    const expires = 'expires=' + date.toUTCString()
+    document.cookie = cName + '=' + cValue + '; ' + expires + '; path=/'
   }
   ```
 
@@ -396,18 +388,18 @@
   Finally, you can create a theme contract to ensure that all themes have the same structure:
 
   ```ts
-  import { defineThemeContract } from "@pandacss/dev";
+  import { defineThemeContract } from '@pandacss/dev'
 
   const defineTheme = defineThemeContract({
     tokens: {
       colors: {
-        red: { value: "" }, // theme implementations must have a red color
+        red: { value: '' }, // theme implementations must have a red color
       },
     },
-  });
+  })
 
   defineTheme({
-    selector: ".theme-secondary",
+    selector: '.theme-secondary',
     tokens: {
       colors: {
         // ^^^^   Property 'red' is missing in type '{}' but required in type '{ red: { value: string; }; }'
@@ -416,7 +408,7 @@
         // red: { value: 'red' },
       },
     },
-  });
+  })
   ```
 
 ### Patch Changes
@@ -424,30 +416,30 @@
 - 3af3940: Fix an issue when using a semantic token with one (but not all) condition using the color opacity modifier
 
   ```ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     theme: {
       extend: {
         tokens: {
           colors: {
-            black: { value: "black" },
-            white: { value: "white" },
+            black: { value: 'black' },
+            white: { value: 'white' },
           },
         },
         semanticTokens: {
           colors: {
             fg: {
               value: {
-                base: "{colors.black/87}",
-                _dark: "{colors.white}", // <- this was causing a weird issue
+                base: '{colors.black/87}',
+                _dark: '{colors.white}', // <- this was causing a weird issue
               },
             },
           },
         },
       },
     },
-  });
+  })
   ```
 
 - Updated dependencies [861a280]
@@ -465,20 +457,20 @@
 - f2fdc48: Fix negative `semanticTokens` generation
 
   ```ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     tokens: {
       spacing: {
-        1: { value: "1rem" },
+        1: { value: '1rem' },
       },
     },
     semanticTokens: {
       spacing: {
-        lg: { value: "{spacing.1}" },
+        lg: { value: '{spacing.1}' },
       },
     },
-  });
+  })
   ```
 
   Will now correctly generate the negative value:
@@ -519,18 +511,18 @@
 - d4942e0: Fix the color opacity modifier syntax for `semanticTokens` inside of conditions
 
   ```ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     conditions: {
-      light: ".light &",
-      dark: ".dark &",
+      light: '.light &',
+      dark: '.dark &',
     },
     theme: {
       tokens: {
         colors: {
-          blue: { 500: { value: "blue" } },
-          green: { 500: { value: "green" } },
+          blue: { 500: { value: 'blue' } },
+          green: { 500: { value: 'green' } },
         },
         opacity: {
           half: { value: 0.5 },
@@ -540,15 +532,15 @@
         colors: {
           secondary: {
             value: {
-              base: "red",
-              _light: "{colors.blue.500/32}", // <-- wasn't working as expected
-              _dark: "{colors.green.500/half}",
+              base: 'red',
+              _light: '{colors.blue.500/32}', // <-- wasn't working as expected
+              _dark: '{colors.green.500/half}',
             },
           },
         },
       },
     },
-  });
+  })
   ```
 
   will now correctly generate the following CSS:
@@ -563,19 +555,11 @@
     }
 
     .light {
-      --colors-secondary: color-mix(
-        in srgb,
-        var(--colors-blue-500) 32%,
-        transparent
-      );
+      --colors-secondary: color-mix(in srgb, var(--colors-blue-500) 32%, transparent);
     }
 
     .dark {
-      --colors-secondary: color-mix(
-        in srgb,
-        var(--colors-green-500) 50%,
-        transparent
-      );
+      --colors-secondary: color-mix(in srgb, var(--colors-green-500) 50%, transparent);
     }
   }
   ```
@@ -598,16 +582,16 @@
   ```ts
   // runtime usage
 
-  import { css } from "../styled-system/css";
+  import { css } from '../styled-system/css'
 
-  css({ bg: "{colors.blue.300/70}" });
+  css({ bg: '{colors.blue.300/70}' })
   // => @layer utilities {
   //    .bg_token\(colors\.blue\.300\/70\) {
   //      background: color-mix(in srgb, var(--colors-blue-300) 70%, transparent);
   //    }
   //  }
 
-  css({ bg: "token(colors.blue.300/70)" });
+  css({ bg: 'token(colors.blue.300/70)' })
   // => @layer utilities {
   //    .bg_token\(colors\.blue\.300\/70\) {
   //      background: color-mix(in srgb, var(--colors-blue-300) 70%, transparent);
@@ -617,37 +601,33 @@
 
   ```ts
   // build-time usage
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     theme: {
       tokens: {
         colors: {
           blue: {
-            300: { value: "#00f" },
+            300: { value: '#00f' },
           },
         },
       },
       semanticTokens: {
         colors: {
           primary: {
-            value: "{colors.blue.300/70}",
+            value: '{colors.blue.300/70}',
           },
         },
       },
     },
-  });
+  })
   ```
 
   ```css
   @layer tokens {
     :where(:root, :host) {
       --colors-blue-300: #00f;
-      --colors-primary: color-mix(
-        in srgb,
-        var(--colors-blue-300) 70%,
-        transparent
-      );
+      --colors-primary: color-mix(in srgb, var(--colors-blue-300) 70%, transparent);
     }
   }
   ```
@@ -684,7 +664,7 @@
   Given this config:
 
   ```ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
@@ -695,13 +675,13 @@
             bg: {
               primary: {
                 DEFAULT: {
-                  value: "{colors.red.500}",
+                  value: '{colors.red.500}',
                 },
                 base: {
-                  value: "{colors.green.500}",
+                  value: '{colors.green.500}',
                 },
                 hover: {
-                  value: "{colors.yellow.300}",
+                  value: '{colors.yellow.300}',
                 },
               },
             },
@@ -709,17 +689,17 @@
         },
       },
     },
-  });
+  })
   ```
 
   And this style usage:
 
   ```ts
-  import { css } from "styled-system/css";
+  import { css } from 'styled-system/css'
 
   css({
-    colorPalette: "bg.primary",
-  });
+    colorPalette: 'bg.primary',
+  })
   ```
 
   This is the difference in the generated css
@@ -833,10 +813,10 @@
   css({
     // ✅ this is fine now, will resolve to something like
     // `@container (min-width: 56em)`
-    "@container (min-width: {sizes.4xl})": {
-      color: "green",
+    '@container (min-width: {sizes.4xl})': {
+      color: 'green',
     },
-  });
+  })
   ```
 
   Fix an issue where the curly token references would not be escaped if the token path was not found.
@@ -915,13 +895,13 @@
         // add aspect ratio tokens
         tokens: {
           aspectRatios: {
-            "1:1": "1",
-            "16:9": "16/9",
+            '1:1': '1',
+            '16:9': '16/9',
           },
         },
       },
     },
-  });
+  })
   ```
 
   Here's what the default aspect ratio tokens in the base preset looks like:
@@ -982,11 +962,11 @@
 - de282f60: Support token reference syntax when authoring styles object, text styles and layer styles.
 
   ```jsx
-  import { css } from "../styled-system/css";
+  import { css } from '../styled-system/css'
 
   const styles = css({
-    border: "2px solid {colors.primary}",
-  });
+    border: '2px solid {colors.primary}',
+  })
   ```
 
   This will resolve the token reference and convert it to css variables.
@@ -1006,18 +986,18 @@
   ```jsx
   const styles = css({
     // token reference syntax
-    border: "2px solid {colors.primary}",
+    border: '2px solid {colors.primary}',
     // token function syntax
-    border: "2px solid token(colors.primary)",
-  });
+    border: '2px solid token(colors.primary)',
+  })
   ```
 
   However, The `token(...)` syntax allows you to set a fallback value.
 
   ```jsx
   const styles = css({
-    border: "2px solid token(colors.primary, red)",
-  });
+    border: '2px solid token(colors.primary, red)',
+  })
   ```
 
 ### Patch Changes
@@ -1265,18 +1245,18 @@
         colors: {
           button: {
             dark: {
-              value: "navy",
+              value: 'navy',
             },
             light: {
               DEFAULT: {
-                value: "skyblue",
+                value: 'skyblue',
               },
               accent: {
                 DEFAULT: {
-                  value: "cyan",
+                  value: 'cyan',
                 },
                 secondary: {
-                  value: "blue",
+                  value: 'blue',
                 },
               },
             },
@@ -1284,50 +1264,50 @@
         },
       },
     },
-  };
+  }
   ```
 
   You can now use the root `button` color palette and its values directly:
 
   ```tsx
-  import { css } from "../styled-system/css";
+  import { css } from '../styled-system/css'
 
   export const App = () => {
     return (
       <button
         className={css({
-          colorPalette: "button",
-          color: "colorPalette.light",
-          backgroundColor: "colorPalette.dark",
+          colorPalette: 'button',
+          color: 'colorPalette.light',
+          backgroundColor: 'colorPalette.dark',
           _hover: {
-            color: "colorPalette.light.accent",
-            background: "colorPalette.light.accent.secondary",
+            color: 'colorPalette.light.accent',
+            background: 'colorPalette.light.accent.secondary',
           },
         })}
       >
         Root color palette
       </button>
-    );
-  };
+    )
+  }
   ```
 
   Or you can use any deeply nested property (e.g. `button.light.accent`) as a root color palette:
 
   ```tsx
-  import { css } from "../styled-system/css";
+  import { css } from '../styled-system/css'
 
   export const App = () => {
     return (
       <button
         className={css({
-          colorPalette: "button.light.accent",
-          color: "colorPalette.secondary",
+          colorPalette: 'button.light.accent',
+          color: 'colorPalette.secondary',
         })}
       >
         Nested color palette leaf
       </button>
-    );
-  };
+    )
+  }
   ```
 
 ### Patch Changes
@@ -1542,11 +1522,11 @@ This hook is called right before writing the codegen files to disk. You can use
 export default defineConfig({
   // ...
   hooks: {
-    "codegen:prepare": ({ artifacts, changed }) => {
+    'codegen:prepare': ({ artifacts, changed }) => {
       // do something with the emitted js/d.ts files
     },
   },
-});
+})
 ```
 
 - d5977c24: - Add a `--logfile` flag to the `panda`, `panda codegen`, `panda cssgen` and `panda debug` commands.
@@ -1563,11 +1543,11 @@ export default defineConfig({
   ```js
   module.exports = {
     plugins: {
-      "@pandacss/dev/postcss": {
-        logfile: "./logs/panda.log",
+      '@pandacss/dev/postcss': {
+        logfile: './logs/panda.log',
       },
     },
-  };
+  }
   ```
 
 - Updated dependencies [74485ef1]
@@ -1597,10 +1577,10 @@ export default defineConfig({
   css({
     // ✅ this is fine now, will resolve to something like
     // `@container (min-width: 56em)`
-    "@container (min-width: {sizes.4xl})": {
-      color: "green",
+    '@container (min-width: {sizes.4xl})': {
+      color: 'green',
     },
-  });
+  })
   ```
 
   Fix an issue where the curly token references would not be escaped if the token path was not found.
@@ -1679,13 +1659,13 @@ export default defineConfig({
         // add aspect ratio tokens
         tokens: {
           aspectRatios: {
-            "1:1": "1",
-            "16:9": "16/9",
+            '1:1': '1',
+            '16:9': '16/9',
           },
         },
       },
     },
-  });
+  })
   ```
 
   Here's what the default aspect ratio tokens in the base preset looks like:
@@ -1746,11 +1726,11 @@ export default defineConfig({
 - de282f60: Support token reference syntax when authoring styles object, text styles and layer styles.
 
   ```jsx
-  import { css } from "../styled-system/css";
+  import { css } from '../styled-system/css'
 
   const styles = css({
-    border: "2px solid {colors.primary}",
-  });
+    border: '2px solid {colors.primary}',
+  })
   ```
 
   This will resolve the token reference and convert it to css variables.
@@ -1770,18 +1750,18 @@ export default defineConfig({
   ```jsx
   const styles = css({
     // token reference syntax
-    border: "2px solid {colors.primary}",
+    border: '2px solid {colors.primary}',
     // token function syntax
-    border: "2px solid token(colors.primary)",
-  });
+    border: '2px solid token(colors.primary)',
+  })
   ```
 
   However, The `token(...)` syntax allows you to set a fallback value.
 
   ```jsx
   const styles = css({
-    border: "2px solid token(colors.primary, red)",
-  });
+    border: '2px solid token(colors.primary, red)',
+  })
   ```
 
 ### Patch Changes
@@ -2029,18 +2009,18 @@ export default defineConfig({
         colors: {
           button: {
             dark: {
-              value: "navy",
+              value: 'navy',
             },
             light: {
               DEFAULT: {
-                value: "skyblue",
+                value: 'skyblue',
               },
               accent: {
                 DEFAULT: {
-                  value: "cyan",
+                  value: 'cyan',
                 },
                 secondary: {
-                  value: "blue",
+                  value: 'blue',
                 },
               },
             },
@@ -2048,50 +2028,50 @@ export default defineConfig({
         },
       },
     },
-  };
+  }
   ```
 
   You can now use the root `button` color palette and its values directly:
 
   ```tsx
-  import { css } from "../styled-system/css";
+  import { css } from '../styled-system/css'
 
   export const App = () => {
     return (
       <button
         className={css({
-          colorPalette: "button",
-          color: "colorPalette.light",
-          backgroundColor: "colorPalette.dark",
+          colorPalette: 'button',
+          color: 'colorPalette.light',
+          backgroundColor: 'colorPalette.dark',
           _hover: {
-            color: "colorPalette.light.accent",
-            background: "colorPalette.light.accent.secondary",
+            color: 'colorPalette.light.accent',
+            background: 'colorPalette.light.accent.secondary',
           },
         })}
       >
         Root color palette
       </button>
-    );
-  };
+    )
+  }
   ```
 
   Or you can use any deeply nested property (e.g. `button.light.accent`) as a root color palette:
 
   ```tsx
-  import { css } from "../styled-system/css";
+  import { css } from '../styled-system/css'
 
   export const App = () => {
     return (
       <button
         className={css({
-          colorPalette: "button.light.accent",
-          color: "colorPalette.secondary",
+          colorPalette: 'button.light.accent',
+          color: 'colorPalette.secondary',
         })}
       >
         Nested color palette leaf
       </button>
-    );
-  };
+    )
+  }
   ```
 
 ### Patch Changes
@@ -2301,7 +2281,7 @@ Will now allow you to use the following syntax for token path:
   Given this config:
 
   ```ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
@@ -2312,13 +2292,13 @@ Will now allow you to use the following syntax for token path:
             bg: {
               primary: {
                 DEFAULT: {
-                  value: "{colors.red.500}",
+                  value: '{colors.red.500}',
                 },
                 base: {
-                  value: "{colors.green.500}",
+                  value: '{colors.green.500}',
                 },
                 hover: {
-                  value: "{colors.yellow.300}",
+                  value: '{colors.yellow.300}',
                 },
               },
             },
@@ -2326,17 +2306,17 @@ Will now allow you to use the following syntax for token path:
         },
       },
     },
-  });
+  })
   ```
 
   And this style usage:
 
   ```ts
-  import { css } from "styled-system/css";
+  import { css } from 'styled-system/css'
 
   css({
-    colorPalette: "bg.primary",
-  });
+    colorPalette: 'bg.primary',
+  })
   ```
 
   This is the difference in the generated css
@@ -2450,10 +2430,10 @@ Will now allow you to use the following syntax for token path:
   css({
     // ✅ this is fine now, will resolve to something like
     // `@container (min-width: 56em)`
-    "@container (min-width: {sizes.4xl})": {
-      color: "green",
+    '@container (min-width: {sizes.4xl})': {
+      color: 'green',
     },
-  });
+  })
   ```
 
   Fix an issue where the curly token references would not be escaped if the token path was not found.
@@ -2532,13 +2512,13 @@ Will now allow you to use the following syntax for token path:
         // add aspect ratio tokens
         tokens: {
           aspectRatios: {
-            "1:1": "1",
-            "16:9": "16/9",
+            '1:1': '1',
+            '16:9': '16/9',
           },
         },
       },
     },
-  });
+  })
   ```
 
   Here's what the default aspect ratio tokens in the base preset looks like:
@@ -2599,11 +2579,11 @@ Will now allow you to use the following syntax for token path:
 - de282f60: Support token reference syntax when authoring styles object, text styles and layer styles.
 
   ```jsx
-  import { css } from "../styled-system/css";
+  import { css } from '../styled-system/css'
 
   const styles = css({
-    border: "2px solid {colors.primary}",
-  });
+    border: '2px solid {colors.primary}',
+  })
   ```
 
   This will resolve the token reference and convert it to css variables.
@@ -2623,18 +2603,18 @@ Will now allow you to use the following syntax for token path:
   ```jsx
   const styles = css({
     // token reference syntax
-    border: "2px solid {colors.primary}",
+    border: '2px solid {colors.primary}',
     // token function syntax
-    border: "2px solid token(colors.primary)",
-  });
+    border: '2px solid token(colors.primary)',
+  })
   ```
 
   However, The `token(...)` syntax allows you to set a fallback value.
 
   ```jsx
   const styles = css({
-    border: "2px solid token(colors.primary, red)",
-  });
+    border: '2px solid token(colors.primary, red)',
+  })
   ```
 
 ### Patch Changes
@@ -2882,18 +2862,18 @@ Will now allow you to use the following syntax for token path:
         colors: {
           button: {
             dark: {
-              value: "navy",
+              value: 'navy',
             },
             light: {
               DEFAULT: {
-                value: "skyblue",
+                value: 'skyblue',
               },
               accent: {
                 DEFAULT: {
-                  value: "cyan",
+                  value: 'cyan',
                 },
                 secondary: {
-                  value: "blue",
+                  value: 'blue',
                 },
               },
             },
@@ -2901,50 +2881,50 @@ Will now allow you to use the following syntax for token path:
         },
       },
     },
-  };
+  }
   ```
 
   You can now use the root `button` color palette and its values directly:
 
   ```tsx
-  import { css } from "../styled-system/css";
+  import { css } from '../styled-system/css'
 
   export const App = () => {
     return (
       <button
         className={css({
-          colorPalette: "button",
-          color: "colorPalette.light",
-          backgroundColor: "colorPalette.dark",
+          colorPalette: 'button',
+          color: 'colorPalette.light',
+          backgroundColor: 'colorPalette.dark',
           _hover: {
-            color: "colorPalette.light.accent",
-            background: "colorPalette.light.accent.secondary",
+            color: 'colorPalette.light.accent',
+            background: 'colorPalette.light.accent.secondary',
           },
         })}
       >
         Root color palette
       </button>
-    );
-  };
+    )
+  }
   ```
 
   Or you can use any deeply nested property (e.g. `button.light.accent`) as a root color palette:
 
   ```tsx
-  import { css } from "../styled-system/css";
+  import { css } from '../styled-system/css'
 
   export const App = () => {
     return (
       <button
         className={css({
-          colorPalette: "button.light.accent",
-          color: "colorPalette.secondary",
+          colorPalette: 'button.light.accent',
+          color: 'colorPalette.secondary',
         })}
       >
         Nested color palette leaf
       </button>
-    );
-  };
+    )
+  }
   ```
 
 ### Patch Changes
@@ -3159,11 +3139,11 @@ This hook is called right before writing the codegen files to disk. You can use
 export default defineConfig({
   // ...
   hooks: {
-    "codegen:prepare": ({ artifacts, changed }) => {
+    'codegen:prepare': ({ artifacts, changed }) => {
       // do something with the emitted js/d.ts files
     },
   },
-});
+})
 ```
 
 - d5977c24: - Add a `--logfile` flag to the `panda`, `panda codegen`, `panda cssgen` and `panda debug` commands.
@@ -3180,11 +3160,11 @@ export default defineConfig({
   ```js
   module.exports = {
     plugins: {
-      "@pandacss/dev/postcss": {
-        logfile: "./logs/panda.log",
+      '@pandacss/dev/postcss': {
+        logfile: './logs/panda.log',
       },
     },
-  };
+  }
   ```
 
 - Updated dependencies [74485ef1]
@@ -3214,10 +3194,10 @@ export default defineConfig({
   css({
     // ✅ this is fine now, will resolve to something like
     // `@container (min-width: 56em)`
-    "@container (min-width: {sizes.4xl})": {
-      color: "green",
+    '@container (min-width: {sizes.4xl})': {
+      color: 'green',
     },
-  });
+  })
   ```
 
   Fix an issue where the curly token references would not be escaped if the token path was not found.
@@ -3296,13 +3276,13 @@ export default defineConfig({
         // add aspect ratio tokens
         tokens: {
           aspectRatios: {
-            "1:1": "1",
-            "16:9": "16/9",
+            '1:1': '1',
+            '16:9': '16/9',
           },
         },
       },
     },
-  });
+  })
   ```
 
   Here's what the default aspect ratio tokens in the base preset looks like:
@@ -3363,11 +3343,11 @@ export default defineConfig({
 - de282f60: Support token reference syntax when authoring styles object, text styles and layer styles.
 
   ```jsx
-  import { css } from "../styled-system/css";
+  import { css } from '../styled-system/css'
 
   const styles = css({
-    border: "2px solid {colors.primary}",
-  });
+    border: '2px solid {colors.primary}',
+  })
   ```
 
   This will resolve the token reference and convert it to css variables.
@@ -3387,18 +3367,18 @@ export default defineConfig({
   ```jsx
   const styles = css({
     // token reference syntax
-    border: "2px solid {colors.primary}",
+    border: '2px solid {colors.primary}',
     // token function syntax
-    border: "2px solid token(colors.primary)",
-  });
+    border: '2px solid token(colors.primary)',
+  })
   ```
 
   However, The `token(...)` syntax allows you to set a fallback value.
 
   ```jsx
   const styles = css({
-    border: "2px solid token(colors.primary, red)",
-  });
+    border: '2px solid token(colors.primary, red)',
+  })
   ```
 
 ### Patch Changes
@@ -3646,18 +3626,18 @@ export default defineConfig({
         colors: {
           button: {
             dark: {
-              value: "navy",
+              value: 'navy',
             },
             light: {
               DEFAULT: {
-                value: "skyblue",
+                value: 'skyblue',
               },
               accent: {
                 DEFAULT: {
-                  value: "cyan",
+                  value: 'cyan',
                 },
                 secondary: {
-                  value: "blue",
+                  value: 'blue',
                 },
               },
             },
@@ -3665,50 +3645,50 @@ export default defineConfig({
         },
       },
     },
-  };
+  }
   ```
 
   You can now use the root `button` color palette and its values directly:
 
   ```tsx
-  import { css } from "../styled-system/css";
+  import { css } from '../styled-system/css'
 
   export const App = () => {
     return (
       <button
         className={css({
-          colorPalette: "button",
-          color: "colorPalette.light",
-          backgroundColor: "colorPalette.dark",
+          colorPalette: 'button',
+          color: 'colorPalette.light',
+          backgroundColor: 'colorPalette.dark',
           _hover: {
-            color: "colorPalette.light.accent",
-            background: "colorPalette.light.accent.secondary",
+            color: 'colorPalette.light.accent',
+            background: 'colorPalette.light.accent.secondary',
           },
         })}
       >
         Root color palette
       </button>
-    );
-  };
+    )
+  }
   ```
 
   Or you can use any deeply nested property (e.g. `button.light.accent`) as a root color palette:
 
   ```tsx
-  import { css } from "../styled-system/css";
+  import { css } from '../styled-system/css'
 
   export const App = () => {
     return (
       <button
         className={css({
-          colorPalette: "button.light.accent",
-          color: "colorPalette.secondary",
+          colorPalette: 'button.light.accent',
+          color: 'colorPalette.secondary',
         })}
       >
         Nested color palette leaf
       </button>
-    );
-  };
+    )
+  }
   ```
 
 ### Patch Changes
diff --git a/packages/types/CHANGELOG.md b/packages/types/CHANGELOG.md
index 43409d999..1a57f8526 100644
--- a/packages/types/CHANGELOG.md
+++ b/packages/types/CHANGELOG.md
@@ -31,11 +31,11 @@
       ta: {
         deprecated: true,
         transform(value) {
-          return { textAlign: value };
+          return { textAlign: value }
         },
       },
     },
-  });
+  })
   ```
 
   **Deprecating a token**
@@ -45,11 +45,11 @@
     theme: {
       tokens: {
         spacing: {
-          lg: { value: "8px", deprecated: "use `8` instead" },
+          lg: { value: '8px', deprecated: 'use `8` instead' },
         },
       },
     },
-  });
+  })
   ```
 
   **Deprecating a pattern**
@@ -61,7 +61,7 @@
         deprecated: true,
       },
     },
-  });
+  })
   ```
 
   **Deprecating a recipe**
@@ -71,11 +71,11 @@
     theme: {
       recipes: {
         btn: {
-          deprecated: "will be removed in v2.0",
+          deprecated: 'will be removed in v2.0',
         },
       },
     },
-  });
+  })
   ```
 
   ### ESLint Plugin
@@ -99,28 +99,23 @@
   This makes it even easier to merge styles from multiple sources.
 
   ```tsx
-  import { Stack, styled } from "../styled-system/jsx";
+  import { Stack, styled } from '../styled-system/jsx'
 
   const HeroSection = (props) => {
     return (
-      <Stack css={[{ color: "blue.300", padding: "4" }, props.css]}>
-        <styled.div css={[{ fontSize: "2xl" }, props.hero]}>
-          Hero Section
-        </styled.div>
+      <Stack css={[{ color: 'blue.300', padding: '4' }, props.css]}>
+        <styled.div css={[{ fontSize: '2xl' }, props.hero]}>Hero Section</styled.div>
       </Stack>
-    );
-  };
+    )
+  }
 
   const App = () => {
     return (
       <>
-        <HeroSection
-          css={{ backgroundColor: "yellow.300" }}
-          hero={css.raw({ fontSize: "4xl", color: "red.300" })}
-        />
+        <HeroSection css={{ backgroundColor: 'yellow.300' }} hero={css.raw({ fontSize: '4xl', color: 'red.300' })} />
       </>
-    );
-  };
+    )
+  }
   ```
 
   should render something like:
@@ -292,9 +287,9 @@
     useful when applying negative margin to child elements.
 
   ```tsx
-  <div className={flex({ spaceX: "-1" })}>
-    <div className={circle({ size: "5", bg: "red" })} />
-    <div className={circle({ size: "5", bg: "pink" })} />
+  <div className={flex({ spaceX: '-1' })}>
+    <div className={circle({ size: '5', bg: 'red' })} />
+    <div className={circle({ size: '5', bg: 'pink' })} />
   </div>
   ```
 
@@ -306,13 +301,13 @@
   ```tsx
   <div
     className={css({
-      bgGradient: "to-r",
+      bgGradient: 'to-r',
       // from
-      gradientFrom: "red",
-      gradientFromPosition: "top left",
+      gradientFrom: 'red',
+      gradientFromPosition: 'top left',
       // to
-      gradientTo: "blue",
-      gradientToPosition: "bottom right",
+      gradientTo: 'blue',
+      gradientToPosition: 'bottom right',
     })}
   />
   ```
@@ -322,23 +317,19 @@
   It can be useful to use a component library's `styled-system` while also using your own `styled-system` in your app.
 
   ```ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
-    importMap: [
-      "@acme/styled-system",
-      "@ui-lib/styled-system",
-      "styled-system",
-    ],
-  });
+    importMap: ['@acme/styled-system', '@ui-lib/styled-system', 'styled-system'],
+  })
   ```
 
   Now you can use any of the `@acme/styled-system`, `@ui-lib/styled-system` and `styled-system` import sources:
 
   ```ts
-  import { css } from "@acme/css";
-  import { css as uiCss } from "@ui-lib/styled-system/css";
-  import { css as appCss } from "@ui-lib/styled-system/css";
+  import { css } from '@acme/css'
+  import { css as uiCss } from '@ui-lib/styled-system/css'
+  import { css as appCss } from '@ui-lib/styled-system/css'
   ```
 
 ## 0.36.1
@@ -361,7 +352,7 @@
 
   ```ts
   // panda.config.ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
@@ -370,15 +361,15 @@
       extend: {
         tokens: {
           colors: {
-            text: { value: "blue" },
+            text: { value: 'blue' },
           },
         },
         semanticTokens: {
           colors: {
             body: {
               value: {
-                base: "{colors.blue.600}",
-                _osDark: "{colors.blue.400}",
+                base: '{colors.blue.600}',
+                _osDark: '{colors.blue.400}',
               },
             },
           },
@@ -390,16 +381,16 @@
       primary: {
         tokens: {
           colors: {
-            text: { value: "red" },
+            text: { value: 'red' },
           },
         },
         semanticTokens: {
           colors: {
-            muted: { value: "{colors.red.200}" },
+            muted: { value: '{colors.red.200}' },
             body: {
               value: {
-                base: "{colors.red.600}",
-                _osDark: "{colors.red.400}",
+                base: '{colors.red.600}',
+                _osDark: '{colors.red.400}',
               },
             },
           },
@@ -408,23 +399,23 @@
       secondary: {
         tokens: {
           colors: {
-            text: { value: "blue" },
+            text: { value: 'blue' },
           },
         },
         semanticTokens: {
           colors: {
-            muted: { value: "{colors.blue.200}" },
+            muted: { value: '{colors.blue.200}' },
             body: {
               value: {
-                base: "{colors.blue.600}",
-                _osDark: "{colors.blue.400}",
+                base: '{colors.blue.600}',
+                _osDark: '{colors.blue.400}',
               },
             },
           },
         },
       },
     },
-  });
+  })
   ```
 
   ### Pregenerating themes
@@ -434,14 +425,14 @@
 
   ```ts
   // panda.config.ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
     staticCss: {
-      themes: ["primary", "secondary"],
+      themes: ['primary', 'secondary'],
     },
-  });
+  })
   ```
 
   This will generate the following CSS:
@@ -453,7 +444,7 @@
       --colors-body: var(--colors-blue-600);
     }
 
-    [data-panda-theme="primary"] {
+    [data-panda-theme='primary'] {
       --colors-text: red;
       --colors-muted: var(--colors-red-200);
       --colors-body: var(--colors-red-600);
@@ -464,7 +455,7 @@
         --colors-body: var(--colors-blue-400);
       }
 
-      [data-panda-theme="primary"] {
+      [data-panda-theme='primary'] {
         --colors-body: var(--colors-red-400);
       }
     }
@@ -495,9 +486,9 @@
   Dynamically import a theme using its name:
 
   ```ts
-  import { getTheme } from "../styled-system/themes";
+  import { getTheme } from '../styled-system/themes'
 
-  const theme = await getTheme("red");
+  const theme = await getTheme('red')
   //    ^? {
   //     name: "red";
   //     id: string;
@@ -508,10 +499,10 @@
   Inject the theme styles into the DOM:
 
   ```ts
-  import { injectTheme } from "../styled-system/themes";
+  import { injectTheme } from '../styled-system/themes'
 
-  const theme = await getTheme("red");
-  injectTheme(document.documentElement, theme); // this returns the injected style element
+  const theme = await getTheme('red')
+  injectTheme(document.documentElement, theme) // this returns the injected style element
   ```
 
   ***
@@ -520,62 +511,54 @@
 
   ```tsx
   // app/layout.tsx
-  import { Inter } from "next/font/google";
-  import { cookies } from "next/headers";
-  import { ThemeName, getTheme } from "../../styled-system/themes";
-
-  export default async function RootLayout({
-    children,
-  }: {
-    children: React.ReactNode;
-  }) {
-    const store = cookies();
-    const themeName = store.get("theme")?.value as ThemeName;
-    const theme = themeName && (await getTheme(themeName));
+  import { Inter } from 'next/font/google'
+  import { cookies } from 'next/headers'
+  import { ThemeName, getTheme } from '../../styled-system/themes'
+
+  export default async function RootLayout({ children }: { children: React.ReactNode }) {
+    const store = cookies()
+    const themeName = store.get('theme')?.value as ThemeName
+    const theme = themeName && (await getTheme(themeName))
 
     return (
       <html lang="en" data-panda-theme={themeName ? themeName : undefined}>
         {themeName && (
           <head>
-            <style
-              type="text/css"
-              id={theme.id}
-              dangerouslySetInnerHTML={{ __html: theme.css }}
-            />
+            <style type="text/css" id={theme.id} dangerouslySetInnerHTML={{ __html: theme.css }} />
           </head>
         )}
         <body>{children}</body>
       </html>
-    );
+    )
   }
 
   // app/page.tsx
-  import { getTheme, injectTheme } from "../../styled-system/themes";
+  import { getTheme, injectTheme } from '../../styled-system/themes'
 
   export default function Home() {
     return (
       <>
         <button
           onClick={async () => {
-            const current = document.documentElement.dataset.pandaTheme;
-            const next = current === "primary" ? "secondary" : "primary";
-            const theme = await getTheme(next);
-            setCookie("theme", next, 7);
-            injectTheme(document.documentElement, theme);
+            const current = document.documentElement.dataset.pandaTheme
+            const next = current === 'primary' ? 'secondary' : 'primary'
+            const theme = await getTheme(next)
+            setCookie('theme', next, 7)
+            injectTheme(document.documentElement, theme)
           }}
         >
           swap theme
         </button>
       </>
-    );
+    )
   }
 
   // Set a Cookie
   function setCookie(cName: string, cValue: any, expDays: number) {
-    let date = new Date();
-    date.setTime(date.getTime() + expDays * 24 * 60 * 60 * 1000);
-    const expires = "expires=" + date.toUTCString();
-    document.cookie = cName + "=" + cValue + "; " + expires + "; path=/";
+    let date = new Date()
+    date.setTime(date.getTime() + expDays * 24 * 60 * 60 * 1000)
+    const expires = 'expires=' + date.toUTCString()
+    document.cookie = cName + '=' + cValue + '; ' + expires + '; path=/'
   }
   ```
 
@@ -584,18 +567,18 @@
   Finally, you can create a theme contract to ensure that all themes have the same structure:
 
   ```ts
-  import { defineThemeContract } from "@pandacss/dev";
+  import { defineThemeContract } from '@pandacss/dev'
 
   const defineTheme = defineThemeContract({
     tokens: {
       colors: {
-        red: { value: "" }, // theme implementations must have a red color
+        red: { value: '' }, // theme implementations must have a red color
       },
     },
-  });
+  })
 
   defineTheme({
-    selector: ".theme-secondary",
+    selector: '.theme-secondary',
     tokens: {
       colors: {
         // ^^^^   Property 'red' is missing in type '{}' but required in type '{ red: { value: string; }; }'
@@ -604,7 +587,7 @@
         // red: { value: 'red' },
       },
     },
-  });
+  })
   ```
 
 - fabdabe: ## Changes
@@ -624,12 +607,12 @@
     theme: {
       extend: {
         colors: {
-          primary: { value: "blue" },
+          primary: { value: 'blue' },
         },
         // borderWidths: {}, // ⚠️ nothing defined here
       },
     },
-  });
+  })
   ```
 
   ```ts
@@ -640,8 +623,8 @@
 
     // ✅ after this PR, TS will not throw an error anymore as you don't have any `borderWidths` tokens
     // if you add one, this will error again (as it's supposed to)
-    borderWidths: "123px",
-  });
+    borderWidths: '123px',
+  })
   ```
 
   ## Description
@@ -668,34 +651,34 @@
   Example:
 
   ```ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
     globalVars: {
-      "--some-color": "red",
-      "--button-color": {
-        syntax: "<color>",
+      '--some-color': 'red',
+      '--button-color': {
+        syntax: '<color>',
         inherits: false,
-        initialValue: "blue",
+        initialValue: 'blue',
       },
     },
-  });
+  })
   ```
 
   > Note: Keys defined in `globalVars` will be available as a value for _every_ utilities, as they're not bound to token
   > categories.
 
   ```ts
-  import { css } from "../styled-system/css";
+  import { css } from '../styled-system/css'
 
   const className = css({
-    "--button-color": "colors.red.300",
+    '--button-color': 'colors.red.300',
     // ^^^^^^^^^^^^  will be suggested
 
-    backgroundColor: "var(--button-color)",
+    backgroundColor: 'var(--button-color)',
     //                ^^^^^^^^^^^^^^^^^^  will be suggested
-  });
+  })
   ```
 
 - 340f4f1: Fix `Expression produces a union type that is too complex to represent` with `splitCssProps` because of
@@ -713,32 +696,32 @@
   Each slot will contain a `${className}__${slotName}` class in addition to the atomic styles.
 
   ```tsx
-  import { sva } from "../styled-system/css";
+  import { sva } from '../styled-system/css'
 
   const button = sva({
-    className: "btn",
-    slots: ["root", "text"],
+    className: 'btn',
+    slots: ['root', 'text'],
     base: {
       root: {
-        bg: "blue.500",
+        bg: 'blue.500',
         _hover: {
           // v--- 🎯 this will target the `text` slot
-          "& .btn__text": {
-            color: "white",
+          '& .btn__text': {
+            color: 'white',
           },
         },
       },
     },
-  });
+  })
 
   export const App = () => {
-    const classes = button();
+    const classes = button()
     return (
       <div className={classes.root}>
         <div className={classes.text}>Click me</div>
       </div>
-    );
-  };
+    )
+  }
   ```
 
 ## 0.34.3
@@ -783,15 +766,15 @@
   class assigned.
 
   ```js
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     preflight: {
-      scope: ".my-scope",
-      level: "element", // 'element' | 'parent (default)'
+      scope: '.my-scope',
+      level: 'element', // 'element' | 'parent (default)'
     },
     // ...
-  });
+  })
   ```
 
   This will generate CSS that looks like:
@@ -821,20 +804,20 @@
   export default defaultConfig({
     conditions: {
       extend: {
-        supportHover: ["@media (hover: hover) and (pointer: fine)", "&:hover"],
+        supportHover: ['@media (hover: hover) and (pointer: fine)', '&:hover'],
       },
     },
-  });
+  })
   ```
 
   ```ts
-  import { css } from "../styled-system/css";
+  import { css } from '../styled-system/css'
 
   css({
     _supportHover: {
-      color: "red",
+      color: 'red',
     },
-  });
+  })
   ```
 
   will generate the following CSS:
@@ -911,17 +894,16 @@
   export default defineConfig({
     // ...
     hooks: {
-      "parser:before": ({ configure }) => {
+      'parser:before': ({ configure }) => {
         configure({
           // ignore the Select.Content entirely
-          matchTag: (tag) => tag !== "Select.Content",
+          matchTag: (tag) => tag !== 'Select.Content',
           // ...or specifically ignore the `position` property
-          matchTagProp: (tag, prop) =>
-            tag === "Select.Content" && prop !== "position",
-        });
+          matchTagProp: (tag, prop) => tag === 'Select.Content' && prop !== 'position',
+        })
       },
     },
-  });
+  })
   ```
 
 ## 0.30.1
@@ -937,16 +919,16 @@
   keeping the rest. Let's say we want to remove the `stack` pattern from the built-in `@pandacss/preset-base`:
 
   ```ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
     hooks: {
-      "config:resolved": ({ config, utils }) => {
-        return utils.omit(config, ["patterns.stack"]);
+      'config:resolved': ({ config, utils }) => {
+        return utils.omit(config, ['patterns.stack'])
       },
     },
-  });
+  })
   ```
 
 - ab32d1d7: Introduce 3 new hooks:
@@ -983,9 +965,9 @@
 
   ```ts
   css({
-    bg: "red.300/40",
-    color: "white",
-  });
+    bg: 'red.300/40',
+    color: 'white',
+  })
   ```
 
   This will generate:
@@ -993,11 +975,7 @@
   ```css
   @layer utilities {
     .bg_red\.300\/40 {
-      --mix-background: color-mix(
-        in srgb,
-        var(--colors-red-300) 40%,
-        transparent
-      );
+      --mix-background: color-mix(in srgb, var(--colors-red-300) 40%, transparent);
       background: var(--mix-background, var(--colors-red-300));
     }
 
@@ -1021,21 +999,21 @@
   export default defineConfig({
     utilities: {
       background: {
-        shorthand: "bg",
-        className: "bg",
-        values: "colors",
+        shorthand: 'bg',
+        className: 'bg',
+        values: 'colors',
         transform(value, args) {
-          const mix = args.utils.colorMix(value);
+          const mix = args.utils.colorMix(value)
           // This can happen if the value format is invalid (e.g. `bg: red.300/invalid` or `bg: red.300//10`)
-          if (mix.invalid) return { background: value };
+          if (mix.invalid) return { background: value }
 
           return {
             background: mix.value,
-          };
+          }
         },
       },
     },
-  });
+  })
   ```
 
   ***
@@ -1044,21 +1022,21 @@
   property:
 
   ```ts
-  import type { PropertyTransform } from "@pandacss/types";
+  import type { PropertyTransform } from '@pandacss/types'
 
   export const createColorMixTransform =
     (prop: string): PropertyTransform =>
     (value, args) => {
-      const mix = args.utils.colorMix(value);
-      if (mix.invalid) return { [prop]: value };
+      const mix = args.utils.colorMix(value)
+      if (mix.invalid) return { [prop]: value }
 
-      const cssVar = "--mix-" + prop;
+      const cssVar = '--mix-' + prop
 
       return {
         [cssVar]: mix.value,
         [prop]: `var(${cssVar}, ${mix.color})`,
-      };
-    };
+      }
+    }
   ```
 
   then the same utility transform as above can be written like this:
@@ -1086,34 +1064,34 @@
     // ...
     theme: {
       extend: {
-        containerNames: ["sidebar", "content"],
+        containerNames: ['sidebar', 'content'],
         containerSizes: {
-          xs: "40em",
-          sm: "60em",
-          md: "80em",
+          xs: '40em',
+          sm: '60em',
+          md: '80em',
         },
       },
     },
-  });
+  })
   ```
 
   The default container sizes in the `@pandacss/preset-panda` preset are shown below:
 
   ```ts
   export const containerSizes = {
-    xs: "320px",
-    sm: "384px",
-    md: "448px",
-    lg: "512px",
-    xl: "576px",
-    "2xl": "672px",
-    "3xl": "768px",
-    "4xl": "896px",
-    "5xl": "1024px",
-    "6xl": "1152px",
-    "7xl": "1280px",
-    "8xl": "1440px",
-  };
+    xs: '320px',
+    sm: '384px',
+    md: '448px',
+    lg: '512px',
+    xl: '576px',
+    '2xl': '672px',
+    '3xl': '768px',
+    '4xl': '896px',
+    '5xl': '1024px',
+    '6xl': '1152px',
+    '7xl': '1280px',
+    '8xl': '1440px',
+  }
   ```
 
   Then use them in your styles by referencing using `@<container-name>/<container-size>` syntax:
@@ -1198,8 +1176,8 @@
   ```ts
   export default defineConfig({
     // ...
-    dependencies: ["path/to/files/**.ts"],
-  });
+    dependencies: ['path/to/files/**.ts'],
+  })
   ```
 
   - Invoke `config:change` hook in more situations (when the `--watch` flag is passed to `panda codegen`,
@@ -1232,54 +1210,39 @@
      * Called when the config is resolved, after all the presets are loaded and merged.
      * This is the first hook called, you can use it to tweak the config before the context is created.
      */
-    "config:resolved": (args: { conf: LoadConfigResult }) => MaybeAsyncReturn;
+    'config:resolved': (args: { conf: LoadConfigResult }) => MaybeAsyncReturn
     /**
      * Called when the Panda context has been created and the API is ready to be used.
      */
-    "context:created": (args: {
-      ctx: ApiInterface;
-      logger: LoggerInterface;
-    }) => void;
+    'context:created': (args: { ctx: ApiInterface; logger: LoggerInterface }) => void
     /**
      * Called when the config file or one of its dependencies (imports) has changed.
      */
-    "config:change": (args: { config: UserConfig }) => MaybeAsyncReturn;
+    'config:change': (args: { config: UserConfig }) => MaybeAsyncReturn
     /**
      * Called after reading the file content but before parsing it.
      * You can use this hook to transform the file content to a tsx-friendly syntax so that Panda's parser can parse it.
      * You can also use this hook to parse the file's content on your side using a custom parser, in this case you don't have to return anything.
      */
-    "parser:before": (args: {
-      filePath: string;
-      content: string;
-    }) => string | void;
+    'parser:before': (args: { filePath: string; content: string }) => string | void
     /**
      * Called after the file styles are extracted and processed into the resulting ParserResult object.
      * You can also use this hook to add your own extraction results from your custom parser to the ParserResult object.
      */
-    "parser:after": (args: {
-      filePath: string;
-      result: ParserResultInterface | undefined;
-    }) => void;
+    'parser:after': (args: { filePath: string; result: ParserResultInterface | undefined }) => void
     /**
      * Called after the codegen is completed
      */
-    "codegen:done": () => MaybeAsyncReturn;
+    'codegen:done': () => MaybeAsyncReturn
     /**
      * Called right before adding the design-system CSS (global, static, preflight, tokens, keyframes) to the final CSS
      * Called right before writing/injecting the final CSS (styles.css) that contains the design-system CSS and the parser CSS
      * You can use it to tweak the CSS content before it's written to disk or injected through the postcss plugin.
      */
-    "cssgen:done": (args: {
-      artifact:
-        | "global"
-        | "static"
-        | "reset"
-        | "tokens"
-        | "keyframes"
-        | "styles.css";
-      content: string;
-    }) => string | void;
+    'cssgen:done': (args: {
+      artifact: 'global' | 'static' | 'reset' | 'tokens' | 'keyframes' | 'styles.css'
+      content: string
+    }) => string | void
   }
   ```
 
@@ -1359,38 +1322,38 @@
 
   ```ts
   const card = defineRecipe({
-    className: "card",
-    base: { color: "white" },
+    className: 'card',
+    base: { color: 'white' },
     variants: {
       size: {
-        small: { fontSize: "14px" },
-        large: { fontSize: "18px" },
+        small: { fontSize: '14px' },
+        large: { fontSize: '18px' },
       },
       visual: {
-        primary: { backgroundColor: "blue" },
-        secondary: { backgroundColor: "gray" },
+        primary: { backgroundColor: 'blue' },
+        secondary: { backgroundColor: 'gray' },
       },
     },
-  });
+  })
 
   export default defineConfig({
     // ...
     staticCss: {
       recipes: {
-        card: ["*"], // this
+        card: ['*'], // this
 
         // was equivalent to:
         card: [
           // notice how `responsive: true` was implicitly added
-          { size: ["*"], responsive: true },
-          { visual: ["*"], responsive: true },
+          { size: ['*'], responsive: true },
+          { visual: ['*'], responsive: true },
         ],
 
         //   will now correctly be equivalent to:
-        card: [{ size: ["*"] }, { visual: ["*"] }],
+        card: [{ size: ['*'] }, { visual: ['*'] }],
       },
     },
-  });
+  })
   ```
 
   Here's the diff in the generated CSS:
@@ -1542,36 +1505,36 @@
 - 105f74ce: Add a way to specify a recipe's `staticCss` options from inside a recipe config, e.g.:
 
   ```js
-  import { defineRecipe } from "@pandacss/dev";
+  import { defineRecipe } from '@pandacss/dev'
 
   const card = defineRecipe({
-    className: "card",
-    base: { color: "white" },
+    className: 'card',
+    base: { color: 'white' },
     variants: {
       size: {
-        small: { fontSize: "14px" },
-        large: { fontSize: "18px" },
+        small: { fontSize: '14px' },
+        large: { fontSize: '18px' },
       },
     },
-    staticCss: [{ size: ["*"] }],
-  });
+    staticCss: [{ size: ['*'] }],
+  })
   ```
 
   would be the equivalent of defining it inside the main config:
 
   ```js
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
     staticCss: {
       recipes: {
         card: {
-          size: ["*"],
+          size: ['*'],
         },
       },
     },
-  });
+  })
   ```
 
 ## 0.20.1
@@ -1589,10 +1552,10 @@
     staticCss: {
       recipes: {
         // generate all button styles and variants
-        button: ["*"],
+        button: ['*'],
       },
     },
-  });
+  })
 
   export default defineConfig({
     presets: [presetWithStaticCss],
@@ -1600,11 +1563,11 @@
       extend: {
         recipes: {
           // extend and pre-generate all sizes for card
-          card: [{ size: ["small", "medium", "large"] }],
+          card: [{ size: ['small', 'medium', 'large'] }],
         },
       },
     },
-  });
+  })
   ```
 
 ### Patch Changes
@@ -1674,42 +1637,42 @@
 
   ```ts
   export default defineConfig({
-    outdir: "./outdir",
+    outdir: './outdir',
     importMap: {
-      css: "#panda/styled-system/css",
-      recipes: "#panda/styled-system/recipes",
-      patterns: "#panda/styled-system/patterns",
-      jsx: "#panda/styled-system/jsx",
+      css: '#panda/styled-system/css',
+      recipes: '#panda/styled-system/recipes',
+      patterns: '#panda/styled-system/patterns',
+      jsx: '#panda/styled-system/jsx',
     },
-  });
+  })
   ```
 
   Or you could also make your outdir an actual package from your monorepo:
 
   ```ts
   export default defineConfig({
-    outdir: "../packages/styled-system",
+    outdir: '../packages/styled-system',
     importMap: {
-      css: "@monorepo/styled-system",
-      recipes: "@monorepo/styled-system",
-      patterns: "@monorepo/styled-system",
-      jsx: "@monorepo/styled-system",
+      css: '@monorepo/styled-system',
+      recipes: '@monorepo/styled-system',
+      patterns: '@monorepo/styled-system',
+      jsx: '@monorepo/styled-system',
     },
-  });
+  })
   ```
 
   Working with tsconfig paths aliases is easy:
 
   ```ts
   export default defineConfig({
-    outdir: "styled-system",
+    outdir: 'styled-system',
     importMap: {
-      css: "styled-system/css",
-      recipes: "styled-system/recipes",
-      patterns: "styled-system/patterns",
-      jsx: "styled-system/jsx",
+      css: 'styled-system/css',
+      recipes: 'styled-system/recipes',
+      patterns: 'styled-system/patterns',
+      jsx: 'styled-system/jsx',
     },
-  });
+  })
   ```
 
 - 58743bc4: - Fix `ExtendableUtilityConfig` typings after a regression in 0.15.2 (due to
@@ -1783,12 +1746,12 @@
   **Definition**
 
   ```jsx
-  import { sva } from "styled-system/css";
+  import { sva } from 'styled-system/css'
 
   const button = sva({
-    slots: ["label", "icon"],
+    slots: ['label', 'icon'],
     base: {
-      label: { color: "red", textDecoration: "underline" },
+      label: { color: 'red', textDecoration: 'underline' },
     },
     variants: {
       rounded: {
@@ -1796,33 +1759,33 @@
       },
       size: {
         sm: {
-          label: { fontSize: "sm" },
-          icon: { fontSize: "sm" },
+          label: { fontSize: 'sm' },
+          icon: { fontSize: 'sm' },
         },
         lg: {
-          label: { fontSize: "lg" },
-          icon: { fontSize: "lg", color: "pink" },
+          label: { fontSize: 'lg' },
+          icon: { fontSize: 'lg', color: 'pink' },
         },
       },
     },
     defaultVariants: {
-      size: "sm",
+      size: 'sm',
     },
-  });
+  })
   ```
 
   **Usage**
 
   ```jsx
   export function App() {
-    const btnClass = button({ size: "lg", rounded: true });
+    const btnClass = button({ size: 'lg', rounded: true })
 
     return (
       <button>
         <p class={btnClass.label}> Label</p>
         <p class={btnClass.icon}> Icon</p>
       </button>
-    );
+    )
   }
   ```
 
@@ -1873,26 +1836,26 @@
   Update the `jsx` property to be used for advanced tracking of custom pattern components.
 
   ```jsx
-  import { Circle } from "styled-system/jsx";
+  import { Circle } from 'styled-system/jsx'
   const CustomCircle = ({ children, ...props }) => {
-    return <Circle {...props}>{children}</Circle>;
-  };
+    return <Circle {...props}>{children}</Circle>
+  }
   ```
 
   To track the `CustomCircle` component, you can now use the `jsx` property.
 
   ```js
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     patterns: {
       extend: {
         circle: {
-          jsx: ["CustomCircle"],
+          jsx: ['CustomCircle'],
         },
       },
     },
-  });
+  })
   ```
 
 ## 0.8.0
@@ -1921,7 +1884,7 @@
   ```ts
   staticCss: {
     recipes: {
-      button: [{ size: ["*"], shape: ["*"] }];
+      button: [{ size: ['*'], shape: ['*'] }]
     }
   }
   ```
@@ -1931,7 +1894,7 @@
   ```ts
   staticCss: {
     recipes: {
-      button: ["*"];
+      button: ['*']
     }
   }
   ```
@@ -1955,8 +1918,8 @@
   // panda.config.ts
   export default defineConfig({
     //...
-    syntax: "template-literal",
-  });
+    syntax: 'template-literal',
+  })
   ```
 
   > For existing projects, you might need to run the `panda codegen --clean`
@@ -1977,12 +1940,12 @@
 - 5b344b9c: Add support for disabling shorthand props
 
   ```ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
     shorthands: false,
-  });
+  })
   ```
 
 ### Patch Changes
@@ -2055,11 +2018,11 @@ This hook is called right before writing the codegen files to disk. You can use
 export default defineConfig({
   // ...
   hooks: {
-    "codegen:prepare": ({ artifacts, changed }) => {
+    'codegen:prepare': ({ artifacts, changed }) => {
       // do something with the emitted js/d.ts files
     },
   },
-});
+})
 ```
 
 - d5977c24: - Add a `--logfile` flag to the `panda`, `panda codegen`, `panda cssgen` and `panda debug` commands.
@@ -2076,11 +2039,11 @@ export default defineConfig({
   ```js
   module.exports = {
     plugins: {
-      "@pandacss/dev/postcss": {
-        logfile: "./logs/panda.log",
+      '@pandacss/dev/postcss': {
+        logfile: './logs/panda.log',
       },
     },
-  };
+  }
   ```
 
 ## 0.29.1
@@ -2099,9 +2062,9 @@ export default defineConfig({
 
   ```ts
   css({
-    bg: "red.300/40",
-    color: "white",
-  });
+    bg: 'red.300/40',
+    color: 'white',
+  })
   ```
 
   This will generate:
@@ -2109,11 +2072,7 @@ export default defineConfig({
   ```css
   @layer utilities {
     .bg_red\.300\/40 {
-      --mix-background: color-mix(
-        in srgb,
-        var(--colors-red-300) 40%,
-        transparent
-      );
+      --mix-background: color-mix(in srgb, var(--colors-red-300) 40%, transparent);
       background: var(--mix-background, var(--colors-red-300));
     }
 
@@ -2137,21 +2096,21 @@ export default defineConfig({
   export default defineConfig({
     utilities: {
       background: {
-        shorthand: "bg",
-        className: "bg",
-        values: "colors",
+        shorthand: 'bg',
+        className: 'bg',
+        values: 'colors',
         transform(value, args) {
-          const mix = args.utils.colorMix(value);
+          const mix = args.utils.colorMix(value)
           // This can happen if the value format is invalid (e.g. `bg: red.300/invalid` or `bg: red.300//10`)
-          if (mix.invalid) return { background: value };
+          if (mix.invalid) return { background: value }
 
           return {
             background: mix.value,
-          };
+          }
         },
       },
     },
-  });
+  })
   ```
 
   ***
@@ -2160,21 +2119,21 @@ export default defineConfig({
   property:
 
   ```ts
-  import type { PropertyTransform } from "@pandacss/types";
+  import type { PropertyTransform } from '@pandacss/types'
 
   export const createColorMixTransform =
     (prop: string): PropertyTransform =>
     (value, args) => {
-      const mix = args.utils.colorMix(value);
-      if (mix.invalid) return { [prop]: value };
+      const mix = args.utils.colorMix(value)
+      if (mix.invalid) return { [prop]: value }
 
-      const cssVar = "--mix-" + prop;
+      const cssVar = '--mix-' + prop
 
       return {
         [cssVar]: mix.value,
         [prop]: `var(${cssVar}, ${mix.color})`,
-      };
-    };
+      }
+    }
   ```
 
   then the same utility transform as above can be written like this:
@@ -2202,34 +2161,34 @@ export default defineConfig({
     // ...
     theme: {
       extend: {
-        containerNames: ["sidebar", "content"],
+        containerNames: ['sidebar', 'content'],
         containerSizes: {
-          xs: "40em",
-          sm: "60em",
-          md: "80em",
+          xs: '40em',
+          sm: '60em',
+          md: '80em',
         },
       },
     },
-  });
+  })
   ```
 
   The default container sizes in the `@pandacss/preset-panda` preset are shown below:
 
   ```ts
   export const containerSizes = {
-    xs: "320px",
-    sm: "384px",
-    md: "448px",
-    lg: "512px",
-    xl: "576px",
-    "2xl": "672px",
-    "3xl": "768px",
-    "4xl": "896px",
-    "5xl": "1024px",
-    "6xl": "1152px",
-    "7xl": "1280px",
-    "8xl": "1440px",
-  };
+    xs: '320px',
+    sm: '384px',
+    md: '448px',
+    lg: '512px',
+    xl: '576px',
+    '2xl': '672px',
+    '3xl': '768px',
+    '4xl': '896px',
+    '5xl': '1024px',
+    '6xl': '1152px',
+    '7xl': '1280px',
+    '8xl': '1440px',
+  }
   ```
 
   Then use them in your styles by referencing using `@<container-name>/<container-size>` syntax:
@@ -2314,8 +2273,8 @@ export default defineConfig({
   ```ts
   export default defineConfig({
     // ...
-    dependencies: ["path/to/files/**.ts"],
-  });
+    dependencies: ['path/to/files/**.ts'],
+  })
   ```
 
   - Invoke `config:change` hook in more situations (when the `--watch` flag is passed to `panda codegen`,
@@ -2348,54 +2307,39 @@ export default defineConfig({
      * Called when the config is resolved, after all the presets are loaded and merged.
      * This is the first hook called, you can use it to tweak the config before the context is created.
      */
-    "config:resolved": (args: { conf: LoadConfigResult }) => MaybeAsyncReturn;
+    'config:resolved': (args: { conf: LoadConfigResult }) => MaybeAsyncReturn
     /**
      * Called when the Panda context has been created and the API is ready to be used.
      */
-    "context:created": (args: {
-      ctx: ApiInterface;
-      logger: LoggerInterface;
-    }) => void;
+    'context:created': (args: { ctx: ApiInterface; logger: LoggerInterface }) => void
     /**
      * Called when the config file or one of its dependencies (imports) has changed.
      */
-    "config:change": (args: { config: UserConfig }) => MaybeAsyncReturn;
+    'config:change': (args: { config: UserConfig }) => MaybeAsyncReturn
     /**
      * Called after reading the file content but before parsing it.
      * You can use this hook to transform the file content to a tsx-friendly syntax so that Panda's parser can parse it.
      * You can also use this hook to parse the file's content on your side using a custom parser, in this case you don't have to return anything.
      */
-    "parser:before": (args: {
-      filePath: string;
-      content: string;
-    }) => string | void;
+    'parser:before': (args: { filePath: string; content: string }) => string | void
     /**
      * Called after the file styles are extracted and processed into the resulting ParserResult object.
      * You can also use this hook to add your own extraction results from your custom parser to the ParserResult object.
      */
-    "parser:after": (args: {
-      filePath: string;
-      result: ParserResultInterface | undefined;
-    }) => void;
+    'parser:after': (args: { filePath: string; result: ParserResultInterface | undefined }) => void
     /**
      * Called after the codegen is completed
      */
-    "codegen:done": () => MaybeAsyncReturn;
+    'codegen:done': () => MaybeAsyncReturn
     /**
      * Called right before adding the design-system CSS (global, static, preflight, tokens, keyframes) to the final CSS
      * Called right before writing/injecting the final CSS (styles.css) that contains the design-system CSS and the parser CSS
      * You can use it to tweak the CSS content before it's written to disk or injected through the postcss plugin.
      */
-    "cssgen:done": (args: {
-      artifact:
-        | "global"
-        | "static"
-        | "reset"
-        | "tokens"
-        | "keyframes"
-        | "styles.css";
-      content: string;
-    }) => string | void;
+    'cssgen:done': (args: {
+      artifact: 'global' | 'static' | 'reset' | 'tokens' | 'keyframes' | 'styles.css'
+      content: string
+    }) => string | void
   }
   ```
 
@@ -2475,38 +2419,38 @@ export default defineConfig({
 
   ```ts
   const card = defineRecipe({
-    className: "card",
-    base: { color: "white" },
+    className: 'card',
+    base: { color: 'white' },
     variants: {
       size: {
-        small: { fontSize: "14px" },
-        large: { fontSize: "18px" },
+        small: { fontSize: '14px' },
+        large: { fontSize: '18px' },
       },
       visual: {
-        primary: { backgroundColor: "blue" },
-        secondary: { backgroundColor: "gray" },
+        primary: { backgroundColor: 'blue' },
+        secondary: { backgroundColor: 'gray' },
       },
     },
-  });
+  })
 
   export default defineConfig({
     // ...
     staticCss: {
       recipes: {
-        card: ["*"], // this
+        card: ['*'], // this
 
         // was equivalent to:
         card: [
           // notice how `responsive: true` was implicitly added
-          { size: ["*"], responsive: true },
-          { visual: ["*"], responsive: true },
+          { size: ['*'], responsive: true },
+          { visual: ['*'], responsive: true },
         ],
 
         //   will now correctly be equivalent to:
-        card: [{ size: ["*"] }, { visual: ["*"] }],
+        card: [{ size: ['*'] }, { visual: ['*'] }],
       },
     },
-  });
+  })
   ```
 
   Here's the diff in the generated CSS:
@@ -2658,36 +2602,36 @@ export default defineConfig({
 - 105f74ce: Add a way to specify a recipe's `staticCss` options from inside a recipe config, e.g.:
 
   ```js
-  import { defineRecipe } from "@pandacss/dev";
+  import { defineRecipe } from '@pandacss/dev'
 
   const card = defineRecipe({
-    className: "card",
-    base: { color: "white" },
+    className: 'card',
+    base: { color: 'white' },
     variants: {
       size: {
-        small: { fontSize: "14px" },
-        large: { fontSize: "18px" },
+        small: { fontSize: '14px' },
+        large: { fontSize: '18px' },
       },
     },
-    staticCss: [{ size: ["*"] }],
-  });
+    staticCss: [{ size: ['*'] }],
+  })
   ```
 
   would be the equivalent of defining it inside the main config:
 
   ```js
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
     staticCss: {
       recipes: {
         card: {
-          size: ["*"],
+          size: ['*'],
         },
       },
     },
-  });
+  })
   ```
 
 ## 0.20.1
@@ -2705,10 +2649,10 @@ export default defineConfig({
     staticCss: {
       recipes: {
         // generate all button styles and variants
-        button: ["*"],
+        button: ['*'],
       },
     },
-  });
+  })
 
   export default defineConfig({
     presets: [presetWithStaticCss],
@@ -2716,11 +2660,11 @@ export default defineConfig({
       extend: {
         recipes: {
           // extend and pre-generate all sizes for card
-          card: [{ size: ["small", "medium", "large"] }],
+          card: [{ size: ['small', 'medium', 'large'] }],
         },
       },
     },
-  });
+  })
   ```
 
 ### Patch Changes
@@ -2790,42 +2734,42 @@ export default defineConfig({
 
   ```ts
   export default defineConfig({
-    outdir: "./outdir",
+    outdir: './outdir',
     importMap: {
-      css: "#panda/styled-system/css",
-      recipes: "#panda/styled-system/recipes",
-      patterns: "#panda/styled-system/patterns",
-      jsx: "#panda/styled-system/jsx",
+      css: '#panda/styled-system/css',
+      recipes: '#panda/styled-system/recipes',
+      patterns: '#panda/styled-system/patterns',
+      jsx: '#panda/styled-system/jsx',
     },
-  });
+  })
   ```
 
   Or you could also make your outdir an actual package from your monorepo:
 
   ```ts
   export default defineConfig({
-    outdir: "../packages/styled-system",
+    outdir: '../packages/styled-system',
     importMap: {
-      css: "@monorepo/styled-system",
-      recipes: "@monorepo/styled-system",
-      patterns: "@monorepo/styled-system",
-      jsx: "@monorepo/styled-system",
+      css: '@monorepo/styled-system',
+      recipes: '@monorepo/styled-system',
+      patterns: '@monorepo/styled-system',
+      jsx: '@monorepo/styled-system',
     },
-  });
+  })
   ```
 
   Working with tsconfig paths aliases is easy:
 
   ```ts
   export default defineConfig({
-    outdir: "styled-system",
+    outdir: 'styled-system',
     importMap: {
-      css: "styled-system/css",
-      recipes: "styled-system/recipes",
-      patterns: "styled-system/patterns",
-      jsx: "styled-system/jsx",
+      css: 'styled-system/css',
+      recipes: 'styled-system/recipes',
+      patterns: 'styled-system/patterns',
+      jsx: 'styled-system/jsx',
     },
-  });
+  })
   ```
 
 - 58743bc4: - Fix `ExtendableUtilityConfig` typings after a regression in 0.15.2 (due to
@@ -2899,12 +2843,12 @@ export default defineConfig({
   **Definition**
 
   ```jsx
-  import { sva } from "styled-system/css";
+  import { sva } from 'styled-system/css'
 
   const button = sva({
-    slots: ["label", "icon"],
+    slots: ['label', 'icon'],
     base: {
-      label: { color: "red", textDecoration: "underline" },
+      label: { color: 'red', textDecoration: 'underline' },
     },
     variants: {
       rounded: {
@@ -2912,33 +2856,33 @@ export default defineConfig({
       },
       size: {
         sm: {
-          label: { fontSize: "sm" },
-          icon: { fontSize: "sm" },
+          label: { fontSize: 'sm' },
+          icon: { fontSize: 'sm' },
         },
         lg: {
-          label: { fontSize: "lg" },
-          icon: { fontSize: "lg", color: "pink" },
+          label: { fontSize: 'lg' },
+          icon: { fontSize: 'lg', color: 'pink' },
         },
       },
     },
     defaultVariants: {
-      size: "sm",
+      size: 'sm',
     },
-  });
+  })
   ```
 
   **Usage**
 
   ```jsx
   export function App() {
-    const btnClass = button({ size: "lg", rounded: true });
+    const btnClass = button({ size: 'lg', rounded: true })
 
     return (
       <button>
         <p class={btnClass.label}> Label</p>
         <p class={btnClass.icon}> Icon</p>
       </button>
-    );
+    )
   }
   ```
 
@@ -2989,26 +2933,26 @@ export default defineConfig({
   Update the `jsx` property to be used for advanced tracking of custom pattern components.
 
   ```jsx
-  import { Circle } from "styled-system/jsx";
+  import { Circle } from 'styled-system/jsx'
   const CustomCircle = ({ children, ...props }) => {
-    return <Circle {...props}>{children}</Circle>;
-  };
+    return <Circle {...props}>{children}</Circle>
+  }
   ```
 
   To track the `CustomCircle` component, you can now use the `jsx` property.
 
   ```js
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     patterns: {
       extend: {
         circle: {
-          jsx: ["CustomCircle"],
+          jsx: ['CustomCircle'],
         },
       },
     },
-  });
+  })
   ```
 
 ## 0.8.0
@@ -3037,7 +2981,7 @@ export default defineConfig({
   ```ts
   staticCss: {
     recipes: {
-      button: [{ size: ["*"], shape: ["*"] }];
+      button: [{ size: ['*'], shape: ['*'] }]
     }
   }
   ```
@@ -3047,7 +2991,7 @@ export default defineConfig({
   ```ts
   staticCss: {
     recipes: {
-      button: ["*"];
+      button: ['*']
     }
   }
   ```
@@ -3071,8 +3015,8 @@ export default defineConfig({
   // panda.config.ts
   export default defineConfig({
     //...
-    syntax: "template-literal",
-  });
+    syntax: 'template-literal',
+  })
   ```
 
   > For existing projects, you might need to run the `panda codegen --clean`
@@ -3093,12 +3037,12 @@ export default defineConfig({
 - 5b344b9c: Add support for disabling shorthand props
 
   ```ts
-  import { defineConfig } from "@pandacss/dev";
+  import { defineConfig } from '@pandacss/dev'
 
   export default defineConfig({
     // ...
     shorthands: false,
-  });
+  })
   ```
 
 ### Patch Changes