diff --git a/.gitignore b/.gitignore
index 9ad8bdb78..b3a894e0f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -43,5 +43,3 @@ dist
 
 
 .turbo
-.astro
-styled-system
\ No newline at end of file
diff --git a/bun.lockb b/bun.lockb
index 24f70e22b..fa9769694 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/components/react/package.json b/components/react/package.json
index fb481f9e4..dab5d0f01 100644
--- a/components/react/package.json
+++ b/components/react/package.json
@@ -3,29 +3,29 @@
   "type": "module",
   "private": true,
   "scripts": {
-    "prepare": "panda codegen --silent",
     "dev": "bun run storybook",
     "lint": "biome lint ./src",
     "storybook": "storybook dev -p 6006",
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@ark-ui/react": "5.6.0",
-    "@pandacss/dev": "0.48.0",
+    "@ark-ui/react": "5.7.0",
+    "@pandacss/dev": "0.53.4",
     "@park-ui/panda-preset": "workspace:*",
-    "@storybook/addon-a11y": "8.4.6",
-    "@storybook/addon-essentials": "8.4.6",
-    "@storybook/addon-themes": "8.4.6",
-    "@storybook/react-vite": "8.4.6",
-    "@storybook/react": "8.4.6",
-    "@types/react": "18.3.12",
-    "@types/react-dom": "18.3.1",
-    "@vitejs/plugin-react": "4.3.4",
-    "lucide-react": "0.462.0",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
-    "storybook": "8.4.6",
-    "typescript": "5.7.2",
+    "@storybook/addon-a11y": "8.6.12",
+    "@storybook/addon-essentials": "8.6.12",
+    "@storybook/addon-themes": "8.6.12",
+    "@storybook/react-vite": "8.6.12",
+    "@storybook/react": "8.6.12",
+    "@types/react-dom": "19.1.2",
+    "@types/react": "19.1.2",
+    "@vitejs/plugin-react": "4.4.1",
+    "lucide-react": "0.503.0",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "storybook": "8.6.12",
+    "styled-system": "workspace:*",
+    "typescript": "5.8.3",
     "vite": "6.0.1",
     "vite-tsconfig-paths": "5.1.3"
   }
diff --git a/components/react/panda.config.ts b/components/react/panda.config.ts
index 7500c0f89..8ee0625a3 100644
--- a/components/react/panda.config.ts
+++ b/components/react/panda.config.ts
@@ -1,12 +1,15 @@
 import { defineConfig } from '@pandacss/dev'
 import { createPreset } from '@park-ui/panda-preset'
-import amber from '@park-ui/panda-preset/colors/amber'
-import sand from '@park-ui/panda-preset/colors/sand'
+import neutral from '@park-ui/panda-preset/colors/neutral'
 
 export default defineConfig({
   preflight: true,
-  presets: [createPreset({ accentColor: amber, grayColor: sand, radius: 'sm' })],
-  include: ['./src/**/*.{js,jsx,ts,tsx,vue}'],
-  jsxFramework: 'react', // or solid or vue
-  outdir: 'styled-system',
+  include: ['./src/**/*.{js,jsx,ts,tsx}'],
+  exclude: [],
+  importMap: 'styled-system',
+  jsxFramework: 'react',
+  presets: [
+    '@pandacss/preset-panda',
+    createPreset({ accentColor: neutral, grayColor: neutral, radius: 'sm' }),
+  ],
 })
diff --git a/components/solid/package.json b/components/solid/package.json
index d413d083e..a5e9fec0c 100644
--- a/components/solid/package.json
+++ b/components/solid/package.json
@@ -3,7 +3,6 @@
   "type": "module",
   "private": true,
   "scripts": {
-    "prepare": "panda codegen --silent",
     "dev": "bun run storybook",
     "lint": "biome lint ./src",
     "storybook": "storybook dev -p 6006",
@@ -11,7 +10,7 @@
   },
   "dependencies": {
     "@ark-ui/solid": "5.6.0",
-    "@pandacss/dev": "0.48.0",
+    "@pandacss/dev": "0.53.4",
     "@park-ui/panda-preset": "workspace:*",
     "@storybook/addon-a11y": "8.4.6",
     "@storybook/addon-essentials": "8.4.6",
@@ -23,7 +22,7 @@
     "storybook": "8.4.6",
     "storybook-solidjs": "1.0.0-beta.6",
     "storybook-solidjs-vite": "1.0.0-beta.6",
-    "typescript": "5.7.2",
+    "typescript": "5.8.3",
     "vite": "6.0.1",
     "vite-plugin-solid": "2.11.0",
     "vite-tsconfig-paths": "5.1.3"
diff --git a/components/vue/package.json b/components/vue/package.json
index 57aac6530..5e34254d6 100644
--- a/components/vue/package.json
+++ b/components/vue/package.json
@@ -3,7 +3,6 @@
   "type": "module",
   "private": true,
   "scripts": {
-    "prepare": "panda codegen --silent",
     "dev": "bun run storybook",
     "format": "prettier --write './src/**/*.vue'",
     "storybook": "histoire dev",
@@ -12,14 +11,14 @@
   "dependencies": {
     "@ark-ui/vue": "5.6.0",
     "@histoire/plugin-vue": "0.17.17",
-    "@pandacss/dev": "0.48.0",
+    "@pandacss/dev": "0.53.4",
     "@park-ui/panda-preset": "workspace:*",
     "@vitejs/plugin-vue": "5.2.1",
     "@vitejs/plugin-vue-jsx": "4.1.1",
     "histoire": "0.17.17",
     "lucide-vue-next": "0.462.0",
     "prettier": "3.4.1",
-    "typescript": "5.7.2",
+    "typescript": "5.8.3",
     "vite": "6.0.1",
     "vite-tsconfig-paths": "5.1.3",
     "vue": "3.5.13"
diff --git a/package.json b/package.json
index 0181c9495..f1b8a460b 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
   "dependencies": {
     "@biomejs/biome": "1.9.4",
     "@types/bun": "1.2.10",
+    "caniuse-lite": "1.0.30001715",
     "lefthook": "1.11.11",
     "turbo": "2.5.1",
     "typescript": "5.8.3",
@@ -30,5 +31,8 @@
     "vercel-submodules": "1.0.10"
   },
   "packageManager": "bun@1.2.10",
-  "trustedDependencies": ["@park-ui/website"]
+  "trustedDependencies": ["@park-ui/website"],
+  "overrides": {
+    "@pandacss/dev": "0.53.4"
+  }
 }
diff --git a/packages/cli/package.json b/packages/cli/package.json
index d23074463..3c470cca4 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -25,7 +25,7 @@
     "@types/node": "22.10.1",
     "@types/yargs": "17.0.33",
     "release-it": "17.10.0",
-    "typescript": "5.7.2"
+    "typescript": "5.8.3"
   },
   "peerDependencies": {
     "typescript": "^5.0.0"
diff --git a/packages/panda/.release-it.json b/packages/preset/.release-it.json
similarity index 100%
rename from packages/panda/.release-it.json
rename to packages/preset/.release-it.json
diff --git a/packages/panda/CHANGELOG.md b/packages/preset/CHANGELOG.md
similarity index 100%
rename from packages/panda/CHANGELOG.md
rename to packages/preset/CHANGELOG.md
diff --git a/packages/panda/package.json b/packages/preset/package.json
similarity index 98%
rename from packages/panda/package.json
rename to packages/preset/package.json
index 59b685455..846afb98b 100644
--- a/packages/panda/package.json
+++ b/packages/preset/package.json
@@ -30,7 +30,7 @@
     "effect": "3.10.19"
   },
   "devDependencies": {
-    "@pandacss/dev": "0.48.0",
+    "@pandacss/dev": "0.53.4",
     "@release-it/keep-a-changelog": "5.0.0",
     "clean-package": "2.2.0",
     "release-it": "17.10.0",
diff --git a/packages/panda/src/colors/amber.ts b/packages/preset/src/colors/amber.ts
similarity index 100%
rename from packages/panda/src/colors/amber.ts
rename to packages/preset/src/colors/amber.ts
diff --git a/packages/panda/src/colors/blue.ts b/packages/preset/src/colors/blue.ts
similarity index 100%
rename from packages/panda/src/colors/blue.ts
rename to packages/preset/src/colors/blue.ts
diff --git a/packages/panda/src/colors/bronze.ts b/packages/preset/src/colors/bronze.ts
similarity index 100%
rename from packages/panda/src/colors/bronze.ts
rename to packages/preset/src/colors/bronze.ts
diff --git a/packages/panda/src/colors/brown.ts b/packages/preset/src/colors/brown.ts
similarity index 100%
rename from packages/panda/src/colors/brown.ts
rename to packages/preset/src/colors/brown.ts
diff --git a/packages/panda/src/colors/crimson.ts b/packages/preset/src/colors/crimson.ts
similarity index 100%
rename from packages/panda/src/colors/crimson.ts
rename to packages/preset/src/colors/crimson.ts
diff --git a/packages/panda/src/colors/cyan.ts b/packages/preset/src/colors/cyan.ts
similarity index 100%
rename from packages/panda/src/colors/cyan.ts
rename to packages/preset/src/colors/cyan.ts
diff --git a/packages/panda/src/colors/gold.ts b/packages/preset/src/colors/gold.ts
similarity index 100%
rename from packages/panda/src/colors/gold.ts
rename to packages/preset/src/colors/gold.ts
diff --git a/packages/panda/src/colors/grass.ts b/packages/preset/src/colors/grass.ts
similarity index 100%
rename from packages/panda/src/colors/grass.ts
rename to packages/preset/src/colors/grass.ts
diff --git a/packages/panda/src/colors/green.ts b/packages/preset/src/colors/green.ts
similarity index 100%
rename from packages/panda/src/colors/green.ts
rename to packages/preset/src/colors/green.ts
diff --git a/packages/panda/src/colors/indigo.ts b/packages/preset/src/colors/indigo.ts
similarity index 100%
rename from packages/panda/src/colors/indigo.ts
rename to packages/preset/src/colors/indigo.ts
diff --git a/packages/panda/src/colors/iris.ts b/packages/preset/src/colors/iris.ts
similarity index 100%
rename from packages/panda/src/colors/iris.ts
rename to packages/preset/src/colors/iris.ts
diff --git a/packages/panda/src/colors/jade.ts b/packages/preset/src/colors/jade.ts
similarity index 100%
rename from packages/panda/src/colors/jade.ts
rename to packages/preset/src/colors/jade.ts
diff --git a/packages/panda/src/colors/lime.ts b/packages/preset/src/colors/lime.ts
similarity index 100%
rename from packages/panda/src/colors/lime.ts
rename to packages/preset/src/colors/lime.ts
diff --git a/packages/panda/src/colors/mauve.ts b/packages/preset/src/colors/mauve.ts
similarity index 100%
rename from packages/panda/src/colors/mauve.ts
rename to packages/preset/src/colors/mauve.ts
diff --git a/packages/panda/src/colors/mint.ts b/packages/preset/src/colors/mint.ts
similarity index 100%
rename from packages/panda/src/colors/mint.ts
rename to packages/preset/src/colors/mint.ts
diff --git a/packages/panda/src/colors/neutral.ts b/packages/preset/src/colors/neutral.ts
similarity index 100%
rename from packages/panda/src/colors/neutral.ts
rename to packages/preset/src/colors/neutral.ts
diff --git a/packages/panda/src/colors/olive.ts b/packages/preset/src/colors/olive.ts
similarity index 100%
rename from packages/panda/src/colors/olive.ts
rename to packages/preset/src/colors/olive.ts
diff --git a/packages/panda/src/colors/orange.ts b/packages/preset/src/colors/orange.ts
similarity index 100%
rename from packages/panda/src/colors/orange.ts
rename to packages/preset/src/colors/orange.ts
diff --git a/packages/panda/src/colors/pink.ts b/packages/preset/src/colors/pink.ts
similarity index 100%
rename from packages/panda/src/colors/pink.ts
rename to packages/preset/src/colors/pink.ts
diff --git a/packages/panda/src/colors/plum.ts b/packages/preset/src/colors/plum.ts
similarity index 100%
rename from packages/panda/src/colors/plum.ts
rename to packages/preset/src/colors/plum.ts
diff --git a/packages/panda/src/colors/purple.ts b/packages/preset/src/colors/purple.ts
similarity index 100%
rename from packages/panda/src/colors/purple.ts
rename to packages/preset/src/colors/purple.ts
diff --git a/packages/panda/src/colors/red.ts b/packages/preset/src/colors/red.ts
similarity index 100%
rename from packages/panda/src/colors/red.ts
rename to packages/preset/src/colors/red.ts
diff --git a/packages/panda/src/colors/ruby.ts b/packages/preset/src/colors/ruby.ts
similarity index 100%
rename from packages/panda/src/colors/ruby.ts
rename to packages/preset/src/colors/ruby.ts
diff --git a/packages/panda/src/colors/sage.ts b/packages/preset/src/colors/sage.ts
similarity index 100%
rename from packages/panda/src/colors/sage.ts
rename to packages/preset/src/colors/sage.ts
diff --git a/packages/panda/src/colors/sand.ts b/packages/preset/src/colors/sand.ts
similarity index 100%
rename from packages/panda/src/colors/sand.ts
rename to packages/preset/src/colors/sand.ts
diff --git a/packages/panda/src/colors/sky.ts b/packages/preset/src/colors/sky.ts
similarity index 100%
rename from packages/panda/src/colors/sky.ts
rename to packages/preset/src/colors/sky.ts
diff --git a/packages/panda/src/colors/slate.ts b/packages/preset/src/colors/slate.ts
similarity index 100%
rename from packages/panda/src/colors/slate.ts
rename to packages/preset/src/colors/slate.ts
diff --git a/packages/panda/src/colors/teal.ts b/packages/preset/src/colors/teal.ts
similarity index 100%
rename from packages/panda/src/colors/teal.ts
rename to packages/preset/src/colors/teal.ts
diff --git a/packages/panda/src/colors/tomato.ts b/packages/preset/src/colors/tomato.ts
similarity index 100%
rename from packages/panda/src/colors/tomato.ts
rename to packages/preset/src/colors/tomato.ts
diff --git a/packages/panda/src/colors/violet.ts b/packages/preset/src/colors/violet.ts
similarity index 100%
rename from packages/panda/src/colors/violet.ts
rename to packages/preset/src/colors/violet.ts
diff --git a/packages/panda/src/colors/yellow.ts b/packages/preset/src/colors/yellow.ts
similarity index 100%
rename from packages/panda/src/colors/yellow.ts
rename to packages/preset/src/colors/yellow.ts
diff --git a/packages/panda/src/create-preset.ts b/packages/preset/src/create-preset.ts
similarity index 74%
rename from packages/panda/src/create-preset.ts
rename to packages/preset/src/create-preset.ts
index d22fb2c97..3ef2ebb61 100644
--- a/packages/panda/src/create-preset.ts
+++ b/packages/preset/src/create-preset.ts
@@ -1,4 +1,4 @@
-import { type SemanticTokens, definePreset } from '@pandacss/dev'
+import { type SemanticTokens, Tokens, definePreset } from '@pandacss/dev'
 import red from './colors/red'
 import type { PresetOptions } from './options'
 import { breakpoints } from './theme/breakpoints'
@@ -12,11 +12,21 @@ import { tokens } from './theme/tokens'
 import { createRadii } from './utils/create-radii'
 
 export const createPreset = (options: PresetOptions) => {
-  const { accentColor, grayColor, radius } = options
+  const { accentColor, grayColor, radius, additionalColors = [] } = options
 
   const standardizeGrayTokens = (tokens: SemanticTokens['colors']) =>
     JSON.parse(JSON.stringify(tokens).replace(new RegExp(grayColor.name, 'g'), 'gray'))
 
+  const addlColorTokens = additionalColors.reduce((acc, color) => {
+    acc[color.name] = color.tokens
+    return acc
+  }, {} as {[name:string]: Tokens['colors']})
+
+  const addlColorSemanticTokens = additionalColors.reduce((acc, color) => {
+    acc[color.name] = color.semanticTokens
+    return acc
+  }, {} as {[name:string]: SemanticTokens['colors']})
+
   return definePreset({
     name: '@park-ui/panda-preset',
     presets: ['@pandacss/preset-base'],
@@ -39,6 +49,7 @@ export const createPreset = (options: PresetOptions) => {
           colors: {
             ...tokens.colors,
             red: red.tokens,
+            ...addlColorTokens,
             gray: grayColor.tokens ?? {},
             [accentColor.name]: accentColor.tokens,
           },
@@ -48,6 +59,7 @@ export const createPreset = (options: PresetOptions) => {
           colors: {
             ...semanticTokens.colors,
             red: red.semanticTokens,
+            ...addlColorSemanticTokens,
             gray: standardizeGrayTokens(grayColor.semanticTokens),
             [accentColor.name]: accentColor.semanticTokens,
           },
diff --git a/packages/panda/src/index.ts b/packages/preset/src/index.ts
similarity index 100%
rename from packages/panda/src/index.ts
rename to packages/preset/src/index.ts
diff --git a/packages/panda/src/options.ts b/packages/preset/src/options.ts
similarity index 96%
rename from packages/panda/src/options.ts
rename to packages/preset/src/options.ts
index 2957bb524..5eb027de4 100644
--- a/packages/panda/src/options.ts
+++ b/packages/preset/src/options.ts
@@ -10,6 +10,7 @@ export interface PresetOptions {
   accentColor: ColorPalette
   grayColor: ColorPalette
   radius: Radius
+  additionalColors?: ColorPalette[]
 }
 
 export type AccentColor = (typeof accentColors)[number]
diff --git a/packages/panda/src/theme/breakpoints.ts b/packages/preset/src/theme/breakpoints.ts
similarity index 100%
rename from packages/panda/src/theme/breakpoints.ts
rename to packages/preset/src/theme/breakpoints.ts
diff --git a/packages/panda/src/theme/conditions.ts b/packages/preset/src/theme/conditions.ts
similarity index 100%
rename from packages/panda/src/theme/conditions.ts
rename to packages/preset/src/theme/conditions.ts
diff --git a/packages/panda/src/theme/global-css.ts b/packages/preset/src/theme/global-css.ts
similarity index 100%
rename from packages/panda/src/theme/global-css.ts
rename to packages/preset/src/theme/global-css.ts
diff --git a/packages/panda/src/theme/keyframes.ts b/packages/preset/src/theme/keyframes.ts
similarity index 100%
rename from packages/panda/src/theme/keyframes.ts
rename to packages/preset/src/theme/keyframes.ts
diff --git a/packages/panda/src/theme/recipes/accordion.ts b/packages/preset/src/theme/recipes/accordion.ts
similarity index 100%
rename from packages/panda/src/theme/recipes/accordion.ts
rename to packages/preset/src/theme/recipes/accordion.ts
diff --git a/packages/panda/src/theme/recipes/alert.ts b/packages/preset/src/theme/recipes/alert.ts
similarity index 100%
rename from packages/panda/src/theme/recipes/alert.ts
rename to packages/preset/src/theme/recipes/alert.ts
diff --git a/packages/panda/src/theme/recipes/avatar.ts b/packages/preset/src/theme/recipes/avatar.ts
similarity index 100%
rename from packages/panda/src/theme/recipes/avatar.ts
rename to packages/preset/src/theme/recipes/avatar.ts
diff --git a/packages/panda/src/theme/recipes/badge.ts b/packages/preset/src/theme/recipes/badge.ts
similarity index 100%
rename from packages/panda/src/theme/recipes/badge.ts
rename to packages/preset/src/theme/recipes/badge.ts
diff --git a/packages/panda/src/theme/recipes/button.ts b/packages/preset/src/theme/recipes/button.ts
similarity index 100%
rename from packages/panda/src/theme/recipes/button.ts
rename to packages/preset/src/theme/recipes/button.ts
diff --git a/packages/panda/src/theme/recipes/card.ts b/packages/preset/src/theme/recipes/card.ts
similarity index 100%
rename from packages/panda/src/theme/recipes/card.ts
rename to packages/preset/src/theme/recipes/card.ts
diff --git a/packages/panda/src/theme/recipes/carousel.ts b/packages/preset/src/theme/recipes/carousel.ts
similarity index 100%
rename from packages/panda/src/theme/recipes/carousel.ts
rename to packages/preset/src/theme/recipes/carousel.ts
diff --git a/packages/panda/src/theme/recipes/checkbox.ts b/packages/preset/src/theme/recipes/checkbox.ts
similarity index 100%
rename from packages/panda/src/theme/recipes/checkbox.ts
rename to packages/preset/src/theme/recipes/checkbox.ts
diff --git a/packages/panda/src/theme/recipes/clipboard.ts b/packages/preset/src/theme/recipes/clipboard.ts
similarity index 100%
rename from packages/panda/src/theme/recipes/clipboard.ts
rename to packages/preset/src/theme/recipes/clipboard.ts
diff --git a/packages/panda/src/theme/recipes/code.ts b/packages/preset/src/theme/recipes/code.ts
similarity index 100%
rename from packages/panda/src/theme/recipes/code.ts
rename to packages/preset/src/theme/recipes/code.ts
diff --git a/packages/panda/src/theme/recipes/collapsible.ts b/packages/preset/src/theme/recipes/collapsible.ts
similarity index 100%
rename from packages/panda/src/theme/recipes/collapsible.ts
rename to packages/preset/src/theme/recipes/collapsible.ts
diff --git a/packages/panda/src/theme/recipes/color-picker.ts b/packages/preset/src/theme/recipes/color-picker.ts
similarity index 100%
rename from packages/panda/src/theme/recipes/color-picker.ts
rename to packages/preset/src/theme/recipes/color-picker.ts
diff --git a/packages/panda/src/theme/recipes/combobox.ts b/packages/preset/src/theme/recipes/combobox.ts
similarity index 100%
rename from packages/panda/src/theme/recipes/combobox.ts
rename to packages/preset/src/theme/recipes/combobox.ts
diff --git a/packages/panda/src/theme/recipes/date-picker.ts b/packages/preset/src/theme/recipes/date-picker.ts
similarity index 100%
rename from packages/panda/src/theme/recipes/date-picker.ts
rename to packages/preset/src/theme/recipes/date-picker.ts
diff --git a/packages/panda/src/theme/recipes/dialog.ts b/packages/preset/src/theme/recipes/dialog.ts
similarity index 100%
rename from packages/panda/src/theme/recipes/dialog.ts
rename to packages/preset/src/theme/recipes/dialog.ts
diff --git a/packages/panda/src/theme/recipes/drawer.ts b/packages/preset/src/theme/recipes/drawer.ts
similarity index 100%
rename from packages/panda/src/theme/recipes/drawer.ts
rename to packages/preset/src/theme/recipes/drawer.ts
diff --git a/packages/panda/src/theme/recipes/editable.ts b/packages/preset/src/theme/recipes/editable.ts
similarity index 100%
rename from packages/panda/src/theme/recipes/editable.ts
rename to packages/preset/src/theme/recipes/editable.ts
diff --git a/packages/panda/src/theme/recipes/field.ts b/packages/preset/src/theme/recipes/field.ts
similarity index 100%
rename from packages/panda/src/theme/recipes/field.ts
rename to packages/preset/src/theme/recipes/field.ts
diff --git a/packages/panda/src/theme/recipes/fieldset.ts b/packages/preset/src/theme/recipes/fieldset.ts
similarity index 100%
rename from packages/panda/src/theme/recipes/fieldset.ts
rename to packages/preset/src/theme/recipes/fieldset.ts
diff --git a/packages/panda/src/theme/recipes/file-upload.ts b/packages/preset/src/theme/recipes/file-upload.ts
similarity index 100%
rename from packages/panda/src/theme/recipes/file-upload.ts
rename to packages/preset/src/theme/recipes/file-upload.ts
diff --git a/packages/panda/src/theme/recipes/form-label.ts b/packages/preset/src/theme/recipes/form-label.ts
similarity index 100%
rename from packages/panda/src/theme/recipes/form-label.ts
rename to packages/preset/src/theme/recipes/form-label.ts
diff --git a/packages/panda/src/theme/recipes/hover-card.ts b/packages/preset/src/theme/recipes/hover-card.ts
similarity index 100%
rename from packages/panda/src/theme/recipes/hover-card.ts
rename to packages/preset/src/theme/recipes/hover-card.ts
diff --git a/packages/panda/src/theme/recipes/icon.ts b/packages/preset/src/theme/recipes/icon.ts
similarity index 100%
rename from packages/panda/src/theme/recipes/icon.ts
rename to packages/preset/src/theme/recipes/icon.ts
diff --git a/packages/panda/src/theme/recipes/index.ts b/packages/preset/src/theme/recipes/index.ts
similarity index 100%
rename from packages/panda/src/theme/recipes/index.ts
rename to packages/preset/src/theme/recipes/index.ts
diff --git a/packages/panda/src/theme/recipes/input.ts b/packages/preset/src/theme/recipes/input.ts
similarity index 100%
rename from packages/panda/src/theme/recipes/input.ts
rename to packages/preset/src/theme/recipes/input.ts
diff --git a/packages/panda/src/theme/recipes/kbd.ts b/packages/preset/src/theme/recipes/kbd.ts
similarity index 100%
rename from packages/panda/src/theme/recipes/kbd.ts
rename to packages/preset/src/theme/recipes/kbd.ts
diff --git a/packages/panda/src/theme/recipes/link.ts b/packages/preset/src/theme/recipes/link.ts
similarity index 100%
rename from packages/panda/src/theme/recipes/link.ts
rename to packages/preset/src/theme/recipes/link.ts
diff --git a/packages/panda/src/theme/recipes/menu.ts b/packages/preset/src/theme/recipes/menu.ts
similarity index 100%
rename from packages/panda/src/theme/recipes/menu.ts
rename to packages/preset/src/theme/recipes/menu.ts
diff --git a/packages/panda/src/theme/recipes/number-input.ts b/packages/preset/src/theme/recipes/number-input.ts
similarity index 100%
rename from packages/panda/src/theme/recipes/number-input.ts
rename to packages/preset/src/theme/recipes/number-input.ts
diff --git a/packages/panda/src/theme/recipes/pagination.ts b/packages/preset/src/theme/recipes/pagination.ts
similarity index 100%
rename from packages/panda/src/theme/recipes/pagination.ts
rename to packages/preset/src/theme/recipes/pagination.ts
diff --git a/packages/panda/src/theme/recipes/pin-input.ts b/packages/preset/src/theme/recipes/pin-input.ts
similarity index 100%
rename from packages/panda/src/theme/recipes/pin-input.ts
rename to packages/preset/src/theme/recipes/pin-input.ts
diff --git a/packages/panda/src/theme/recipes/popover.ts b/packages/preset/src/theme/recipes/popover.ts
similarity index 100%
rename from packages/panda/src/theme/recipes/popover.ts
rename to packages/preset/src/theme/recipes/popover.ts
diff --git a/packages/panda/src/theme/recipes/progress.ts b/packages/preset/src/theme/recipes/progress.ts
similarity index 100%
rename from packages/panda/src/theme/recipes/progress.ts
rename to packages/preset/src/theme/recipes/progress.ts
diff --git a/packages/panda/src/theme/recipes/qr-code.ts b/packages/preset/src/theme/recipes/qr-code.ts
similarity index 100%
rename from packages/panda/src/theme/recipes/qr-code.ts
rename to packages/preset/src/theme/recipes/qr-code.ts
diff --git a/packages/panda/src/theme/recipes/radio-button-group.ts b/packages/preset/src/theme/recipes/radio-button-group.ts
similarity index 100%
rename from packages/panda/src/theme/recipes/radio-button-group.ts
rename to packages/preset/src/theme/recipes/radio-button-group.ts
diff --git a/packages/panda/src/theme/recipes/radio-group.ts b/packages/preset/src/theme/recipes/radio-group.ts
similarity index 100%
rename from packages/panda/src/theme/recipes/radio-group.ts
rename to packages/preset/src/theme/recipes/radio-group.ts
diff --git a/packages/panda/src/theme/recipes/rating-group.ts b/packages/preset/src/theme/recipes/rating-group.ts
similarity index 100%
rename from packages/panda/src/theme/recipes/rating-group.ts
rename to packages/preset/src/theme/recipes/rating-group.ts
diff --git a/packages/panda/src/theme/recipes/segment-group.ts b/packages/preset/src/theme/recipes/segment-group.ts
similarity index 100%
rename from packages/panda/src/theme/recipes/segment-group.ts
rename to packages/preset/src/theme/recipes/segment-group.ts
diff --git a/packages/panda/src/theme/recipes/select.ts b/packages/preset/src/theme/recipes/select.ts
similarity index 100%
rename from packages/panda/src/theme/recipes/select.ts
rename to packages/preset/src/theme/recipes/select.ts
diff --git a/packages/panda/src/theme/recipes/signature-pad.ts b/packages/preset/src/theme/recipes/signature-pad.ts
similarity index 100%
rename from packages/panda/src/theme/recipes/signature-pad.ts
rename to packages/preset/src/theme/recipes/signature-pad.ts
diff --git a/packages/panda/src/theme/recipes/skeleton.ts b/packages/preset/src/theme/recipes/skeleton.ts
similarity index 100%
rename from packages/panda/src/theme/recipes/skeleton.ts
rename to packages/preset/src/theme/recipes/skeleton.ts
diff --git a/packages/panda/src/theme/recipes/slider.ts b/packages/preset/src/theme/recipes/slider.ts
similarity index 100%
rename from packages/panda/src/theme/recipes/slider.ts
rename to packages/preset/src/theme/recipes/slider.ts
diff --git a/packages/panda/src/theme/recipes/spinner.ts b/packages/preset/src/theme/recipes/spinner.ts
similarity index 100%
rename from packages/panda/src/theme/recipes/spinner.ts
rename to packages/preset/src/theme/recipes/spinner.ts
diff --git a/packages/panda/src/theme/recipes/splitter.ts b/packages/preset/src/theme/recipes/splitter.ts
similarity index 100%
rename from packages/panda/src/theme/recipes/splitter.ts
rename to packages/preset/src/theme/recipes/splitter.ts
diff --git a/packages/panda/src/theme/recipes/switch.ts b/packages/preset/src/theme/recipes/switch.ts
similarity index 100%
rename from packages/panda/src/theme/recipes/switch.ts
rename to packages/preset/src/theme/recipes/switch.ts
diff --git a/packages/panda/src/theme/recipes/table.ts b/packages/preset/src/theme/recipes/table.ts
similarity index 100%
rename from packages/panda/src/theme/recipes/table.ts
rename to packages/preset/src/theme/recipes/table.ts
diff --git a/packages/panda/src/theme/recipes/tabs.ts b/packages/preset/src/theme/recipes/tabs.ts
similarity index 100%
rename from packages/panda/src/theme/recipes/tabs.ts
rename to packages/preset/src/theme/recipes/tabs.ts
diff --git a/packages/panda/src/theme/recipes/tags-input.ts b/packages/preset/src/theme/recipes/tags-input.ts
similarity index 100%
rename from packages/panda/src/theme/recipes/tags-input.ts
rename to packages/preset/src/theme/recipes/tags-input.ts
diff --git a/packages/panda/src/theme/recipes/text.ts b/packages/preset/src/theme/recipes/text.ts
similarity index 100%
rename from packages/panda/src/theme/recipes/text.ts
rename to packages/preset/src/theme/recipes/text.ts
diff --git a/packages/panda/src/theme/recipes/textarea.ts b/packages/preset/src/theme/recipes/textarea.ts
similarity index 100%
rename from packages/panda/src/theme/recipes/textarea.ts
rename to packages/preset/src/theme/recipes/textarea.ts
diff --git a/packages/panda/src/theme/recipes/toast.ts b/packages/preset/src/theme/recipes/toast.ts
similarity index 100%
rename from packages/panda/src/theme/recipes/toast.ts
rename to packages/preset/src/theme/recipes/toast.ts
diff --git a/packages/panda/src/theme/recipes/toggle-group.ts b/packages/preset/src/theme/recipes/toggle-group.ts
similarity index 100%
rename from packages/panda/src/theme/recipes/toggle-group.ts
rename to packages/preset/src/theme/recipes/toggle-group.ts
diff --git a/packages/panda/src/theme/recipes/tooltip.ts b/packages/preset/src/theme/recipes/tooltip.ts
similarity index 100%
rename from packages/panda/src/theme/recipes/tooltip.ts
rename to packages/preset/src/theme/recipes/tooltip.ts
diff --git a/packages/panda/src/theme/recipes/tree-view.ts b/packages/preset/src/theme/recipes/tree-view.ts
similarity index 100%
rename from packages/panda/src/theme/recipes/tree-view.ts
rename to packages/preset/src/theme/recipes/tree-view.ts
diff --git a/packages/panda/src/theme/semantic-tokens/colors.ts b/packages/preset/src/theme/semantic-tokens/colors.ts
similarity index 100%
rename from packages/panda/src/theme/semantic-tokens/colors.ts
rename to packages/preset/src/theme/semantic-tokens/colors.ts
diff --git a/packages/panda/src/theme/semantic-tokens/index.ts b/packages/preset/src/theme/semantic-tokens/index.ts
similarity index 100%
rename from packages/panda/src/theme/semantic-tokens/index.ts
rename to packages/preset/src/theme/semantic-tokens/index.ts
diff --git a/packages/panda/src/theme/semantic-tokens/radii.ts b/packages/preset/src/theme/semantic-tokens/radii.ts
similarity index 100%
rename from packages/panda/src/theme/semantic-tokens/radii.ts
rename to packages/preset/src/theme/semantic-tokens/radii.ts
diff --git a/packages/panda/src/theme/semantic-tokens/shadows.ts b/packages/preset/src/theme/semantic-tokens/shadows.ts
similarity index 100%
rename from packages/panda/src/theme/semantic-tokens/shadows.ts
rename to packages/preset/src/theme/semantic-tokens/shadows.ts
diff --git a/packages/panda/src/theme/text-styles.ts b/packages/preset/src/theme/text-styles.ts
similarity index 100%
rename from packages/panda/src/theme/text-styles.ts
rename to packages/preset/src/theme/text-styles.ts
diff --git a/packages/panda/src/theme/tokens/animations.ts b/packages/preset/src/theme/tokens/animations.ts
similarity index 100%
rename from packages/panda/src/theme/tokens/animations.ts
rename to packages/preset/src/theme/tokens/animations.ts
diff --git a/packages/panda/src/theme/tokens/blurs.ts b/packages/preset/src/theme/tokens/blurs.ts
similarity index 100%
rename from packages/panda/src/theme/tokens/blurs.ts
rename to packages/preset/src/theme/tokens/blurs.ts
diff --git a/packages/panda/src/theme/tokens/borders.ts b/packages/preset/src/theme/tokens/borders.ts
similarity index 100%
rename from packages/panda/src/theme/tokens/borders.ts
rename to packages/preset/src/theme/tokens/borders.ts
diff --git a/packages/panda/src/theme/tokens/colors.ts b/packages/preset/src/theme/tokens/colors.ts
similarity index 100%
rename from packages/panda/src/theme/tokens/colors.ts
rename to packages/preset/src/theme/tokens/colors.ts
diff --git a/packages/panda/src/theme/tokens/durations.ts b/packages/preset/src/theme/tokens/durations.ts
similarity index 100%
rename from packages/panda/src/theme/tokens/durations.ts
rename to packages/preset/src/theme/tokens/durations.ts
diff --git a/packages/panda/src/theme/tokens/easings.ts b/packages/preset/src/theme/tokens/easings.ts
similarity index 100%
rename from packages/panda/src/theme/tokens/easings.ts
rename to packages/preset/src/theme/tokens/easings.ts
diff --git a/packages/panda/src/theme/tokens/index.ts b/packages/preset/src/theme/tokens/index.ts
similarity index 100%
rename from packages/panda/src/theme/tokens/index.ts
rename to packages/preset/src/theme/tokens/index.ts
diff --git a/packages/panda/src/theme/tokens/radii.ts b/packages/preset/src/theme/tokens/radii.ts
similarity index 100%
rename from packages/panda/src/theme/tokens/radii.ts
rename to packages/preset/src/theme/tokens/radii.ts
diff --git a/packages/panda/src/theme/tokens/sizes.ts b/packages/preset/src/theme/tokens/sizes.ts
similarity index 100%
rename from packages/panda/src/theme/tokens/sizes.ts
rename to packages/preset/src/theme/tokens/sizes.ts
diff --git a/packages/panda/src/theme/tokens/spacing.ts b/packages/preset/src/theme/tokens/spacing.ts
similarity index 100%
rename from packages/panda/src/theme/tokens/spacing.ts
rename to packages/preset/src/theme/tokens/spacing.ts
diff --git a/packages/panda/src/theme/tokens/typography.ts b/packages/preset/src/theme/tokens/typography.ts
similarity index 100%
rename from packages/panda/src/theme/tokens/typography.ts
rename to packages/preset/src/theme/tokens/typography.ts
diff --git a/packages/panda/src/theme/tokens/z-index.ts b/packages/preset/src/theme/tokens/z-index.ts
similarity index 100%
rename from packages/panda/src/theme/tokens/z-index.ts
rename to packages/preset/src/theme/tokens/z-index.ts
diff --git a/packages/panda/src/utils/create-radii.ts b/packages/preset/src/utils/create-radii.ts
similarity index 100%
rename from packages/panda/src/utils/create-radii.ts
rename to packages/preset/src/utils/create-radii.ts
diff --git a/packages/panda/src/utils/create-variables.ts b/packages/preset/src/utils/create-variables.ts
similarity index 100%
rename from packages/panda/src/utils/create-variables.ts
rename to packages/preset/src/utils/create-variables.ts
diff --git a/packages/panda/src/utils/index.ts b/packages/preset/src/utils/index.ts
similarity index 100%
rename from packages/panda/src/utils/index.ts
rename to packages/preset/src/utils/index.ts
diff --git a/packages/panda/tsconfig.json b/packages/preset/tsconfig.json
similarity index 100%
rename from packages/panda/tsconfig.json
rename to packages/preset/tsconfig.json
diff --git a/packages/styled-system/package.json b/packages/styled-system/package.json
new file mode 100644
index 000000000..c0eaea51b
--- /dev/null
+++ b/packages/styled-system/package.json
@@ -0,0 +1,43 @@
+{
+  "name": "styled-system",
+  "private": true,
+  "scripts": {
+    "prepare": "panda codegen --clean"
+  },
+  "dependencies": {
+    "@pandacss/dev": "0.53.4",
+    "@park-ui/panda-preset": "workspace:*"
+  },
+  "exports": {
+    "./css": {
+      "types": "./dist/css/index.d.ts",
+      "require": "./dist/css/index.mjs",
+      "import": "./dist/css/index.mjs"
+    },
+    "./tokens": {
+      "types": "./dist/tokens/index.d.ts",
+      "require": "./dist/tokens/index.mjs",
+      "import": "./dist/tokens/index.mjs"
+    },
+    "./types": {
+      "types": "./dist/types/index.d.ts",
+      "require": "./dist/types/index.mjs",
+      "import": "./dist/types/index.mjs"
+    },
+    "./patterns": {
+      "types": "./dist/patterns/index.d.ts",
+      "require": "./dist/patterns/index.mjs",
+      "import": "./dist/patterns/index.mjs"
+    },
+    "./recipes": {
+      "types": "./dist/recipes/index.d.ts",
+      "require": "./dist/recipes/index.mjs",
+      "import": "./dist/recipes/index.mjs"
+    },
+    "./jsx": {
+      "types": "./dist/jsx/index.d.ts",
+      "require": "./dist/jsx/index.mjs",
+      "import": "./dist/jsx/index.mjs"
+    }
+  }
+}
diff --git a/packages/styled-system/panda.config.ts b/packages/styled-system/panda.config.ts
new file mode 100644
index 000000000..b93af33eb
--- /dev/null
+++ b/packages/styled-system/panda.config.ts
@@ -0,0 +1,17 @@
+import { defineConfig } from '@pandacss/dev'
+import { createPreset } from '@park-ui/panda-preset'
+import neutral from '@park-ui/panda-preset/colors/neutral'
+
+export default defineConfig({
+  presets: [
+    '@pandacss/preset-panda',
+    createPreset({ accentColor: neutral, grayColor: neutral, radius: 'sm' }),
+  ],
+  preflight: true,
+  include: ['./src/**/*.{js,jsx,ts,tsx}'],
+  outdir: 'dist',
+  jsxFramework: 'react',
+  staticCss: {
+    recipes: '*',
+  },
+})
diff --git a/scripts/package.json b/scripts/package.json
index 4bc1f6ed5..77c7ee83e 100644
--- a/scripts/package.json
+++ b/scripts/package.json
@@ -9,7 +9,7 @@
     "recipes": "bun run src/generators/recipes.ts",
     "postrecipes": "bun biome format --write ../website/public/registry/latest/recipes",
     "colors": "bun run src/generators/colors.ts",
-    "postcolors": "bun biome format --write ../packages/panda/src/colors"
+    "postcolors": "bun biome format --write ../packages/preset/src/colors"
   },
   "dependencies": {
     "@radix-ui/colors": "3.0.0",
diff --git a/scripts/src/generators/colors.ts b/scripts/src/generators/colors.ts
index 575625388..7aa9ed1de 100644
--- a/scripts/src/generators/colors.ts
+++ b/scripts/src/generators/colors.ts
@@ -12,7 +12,7 @@ const main = () => {
       const semanticTokens = defineSemanticTokens(color)
 
       fs.writeFileSync(
-        join(process.cwd(), '../packages/panda/src/colors', `${color}.ts`),
+        join(process.cwd(), '../packages/preset/src/colors', `${color}.ts`),
         `import { defineTokens, defineSemanticTokens } from '@pandacss/dev'
 
       const tokens = defineTokens.colors(${JSON.stringify(tokens, null, 0)})
diff --git a/scripts/src/generators/recipes.ts b/scripts/src/generators/recipes.ts
index 84a87b394..1c452b40d 100644
--- a/scripts/src/generators/recipes.ts
+++ b/scripts/src/generators/recipes.ts
@@ -7,7 +7,7 @@ import { globby } from 'globby'
  * Reads all the recipes from the theme and generates a JSON file for each recipe.
  */
 const programm = pipe(
-  Effect.promise(() => globby(['../packages/panda/src/theme/recipes/*.ts'])),
+  Effect.promise(() => globby(['../packages/preset/src/theme/recipes/*.ts'])),
   Effect.flatMap((recipes) =>
     Effect.forEach(recipes, (recipe) =>
       pipe(
diff --git a/templates/react/next-js/package.json b/templates/react/next-js/package.json
index 4b8a50872..646ed6117 100644
--- a/templates/react/next-js/package.json
+++ b/templates/react/next-js/package.json
@@ -9,21 +9,21 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@ark-ui/react": "5.6.0",
-    "@icons-pack/react-simple-icons": "10.0.0",
-    "lucide-react": "0.452.0",
+    "@ark-ui/react": "5.7.0",
+    "@icons-pack/react-simple-icons": "12.7.0",
+    "lucide-react": "0.503.0",
     "next": "14.2.15",
-    "react": "18.3.1",
-    "react-dom": "18.3.1"
+    "react": "19.1.0",
+    "react-dom": "19.1.0"
   },
   "devDependencies": {
-    "@pandacss/dev": "0.46.1",
-    "@park-ui/panda-preset": "0.42.0",
+    "@pandacss/dev": "0.53.4",
+    "@park-ui/panda-preset": "0.43.1",
     "@types/node": "22.7.5",
-    "@types/react": "18.3.11",
-    "@types/react-dom": "18.3.1",
+    "@types/react": "19.1.2",
+    "@types/react-dom": "19.1.2",
     "eslint": "9.12.0",
     "eslint-config-next": "14.2.15",
-    "typescript": "5.6.3"
+    "typescript": "5.8.3"
   }
 }
diff --git a/templates/solid/solid-start/package.json b/templates/solid/solid-start/package.json
index 05d0c316b..e16f0a65f 100644
--- a/templates/solid/solid-start/package.json
+++ b/templates/solid/solid-start/package.json
@@ -21,9 +21,9 @@
     "vinxi": "0.4.3"
   },
   "devDependencies": {
-    "@pandacss/dev": "0.46.1",
-    "@park-ui/panda-preset": "0.42.0",
-    "typescript": "5.6.3",
+    "@pandacss/dev": "0.53.4",
+    "@park-ui/panda-preset": "0.43.1",
+    "typescript": "5.8.3",
     "vite-tsconfig-paths": "5.0.1"
   }
 }
diff --git a/templates/vue/nuxt/package.json b/templates/vue/nuxt/package.json
index 2a879d012..185963027 100644
--- a/templates/vue/nuxt/package.json
+++ b/templates/vue/nuxt/package.json
@@ -12,8 +12,8 @@
   },
   "dependencies": {
     "@ark-ui/vue": "5.6.0",
-    "@pandacss/dev": "0.46.1",
-    "@park-ui/panda-preset": "0.42.0",
+    "@pandacss/dev": "0.53.4",
+    "@park-ui/panda-preset": "0.43.1",
     "@nuxt/kit": "3.13.2",
     "nuxt": "3.13.2",
     "vue": "3.5.12"
diff --git a/website/next.config.mjs b/website/next.config.mjs
index 9ca8b9f72..b446b499b 100644
--- a/website/next.config.mjs
+++ b/website/next.config.mjs
@@ -8,7 +8,7 @@ const nextConfig = {
       '../components/react/src/demos/*',
       '../components/solid/src/demos/*',
       '../components/vue/src/demos/*',
-      '../packages/panda/src/theme/recipes/*',
+      '../packages/preset/src/theme/recipes/*',
     ],
   },
   async redirects() {
diff --git a/website/package.json b/website/package.json
index 913add570..4151ff936 100644
--- a/website/package.json
+++ b/website/package.json
@@ -4,7 +4,7 @@
   "type": "module",
   "sideEffects": false,
   "scripts": {
-    "prepare": "panda codegen && prisma generate",
+    "prepare": "prisma generate",
     "dev": "next dev",
     "lint": "biome lint ./src",
     "build": "next build",
@@ -16,7 +16,7 @@
     "db:reset": "prisma db push --force-reset"
   },
   "dependencies": {
-    "@ark-ui/react": "5.6.0",
+    "@ark-ui/react": "5.7.0",
     "@auth/prisma-adapter": "2.7.4",
     "@biomejs/biome": "1.9.4",
     "@effect/platform": "0.69.28",
@@ -26,28 +26,29 @@
     "@prisma/client": "6.0.0",
     "@types/file-saver": "2.0.7",
     "@types/node": "22.10.1",
-    "@types/react": "18.3.12",
-    "@types/react-dom": "18.3.1",
+    "@types/react": "19.1.2",
+    "@types/react-dom": "19.1.2",
     "@uidotdev/usehooks": "2.4.1",
     "effect": "3.10.19",
     "file-saver": "2.0.5",
     "globby": "14.0.2",
     "jszip": "3.10.1",
     "lucide-react": "0.462.0",
-    "next": "15.0.3",
+    "next": "15.3.1",
     "next-auth": "5.0.0-beta.25",
     "next-themes": "0.4.3",
     "pandacss-preset-typography": "0.1.6",
     "prisma": "6.0.0",
     "re-resizable": "6.10.1",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
     "react-frame-component": "5.2.7",
     "react-runner": "1.0.5",
     "rehype-autolink-headings": "7.1.0",
     "rehype-slug": "6.0.0",
     "shiki": "1.24.0",
-    "typescript": "5.7.2",
+    "styled-system": "workspace:*",
+    "typescript": "5.8.3",
     "usehooks-ts": "3.1.0",
     "velite": "0.2.1",
     "zustand": "5.0.1"
diff --git a/website/panda.config.ts b/website/panda.config.ts
index 87ef7df26..409bcb8a4 100644
--- a/website/panda.config.ts
+++ b/website/panda.config.ts
@@ -31,7 +31,6 @@ import teal from '@park-ui/panda-preset/colors/teal'
 import tomato from '@park-ui/panda-preset/colors/tomato'
 import violet from '@park-ui/panda-preset/colors/violet'
 import yellow from '@park-ui/panda-preset/colors/yellow'
-
 import typographyPreset from 'pandacss-preset-typography'
 
 export default defineConfig({
@@ -47,11 +46,12 @@ export default defineConfig({
       },
     }),
   ],
+  importMap: 'styled-system',
+  outdir: '../packages/styled-system/dist',
   preflight: true,
   jsxFramework: 'react',
   include: ['./src/components/**/*.{ts,tsx,js,jsx}', './src/app/**/*.{ts,tsx,js,jsx}'],
   exclude: [],
-  outdir: 'styled-system',
   patterns: {
     extend: {
       container: {
@@ -214,43 +214,6 @@ export default defineConfig({
           l3: { value: '{radii.md}' },
         },
       },
-      slotRecipes: {
-        layout: {
-          className: 'layout',
-          slots: ['aside', 'main'],
-          base: {
-            aside: {
-              bg: {
-                base: 'gray.2',
-                _dark: '#0e0e0e',
-              },
-              borderRightWidth: '1px',
-              position: 'fixed',
-              top: '0',
-              bottom: '0',
-              display: { base: 'none', md: 'block' },
-              ps: 'max(32px, calc((100vw - (1440px - 64px)) / 2))',
-              pe: '8',
-              minWidth: '272px',
-              overflow: 'auto',
-              width: {
-                base: '272px',
-                lg: 'calc((100vw - (1440px - 64px)) / 2 + 272px - 32px)',
-              },
-              zIndex: 'overlay',
-            },
-            main: {
-              minWidth: '0',
-              flex: '1',
-              ps: {
-                base: '0',
-                md: 'max(calc((100vw - 1440px) / 2 + 272px), 272px)',
-              },
-              pe: 'calc((100vw - 1440px) / 2)',
-            },
-          },
-        },
-      },
     },
   },
 })
diff --git a/website/src/app/docs/layout.tsx b/website/src/app/docs/layout.tsx
index 766ee55dc..c972f0178 100644
--- a/website/src/app/docs/layout.tsx
+++ b/website/src/app/docs/layout.tsx
@@ -1,11 +1,47 @@
 import type { PropsWithChildren } from 'react'
+import { sva } from 'styled-system/css'
 import { Flex } from 'styled-system/jsx'
-import { layout } from 'styled-system/recipes'
 import { DocsNavbar } from '~/components/navigation/docs/docs-navbar'
 import { DocsSidebar } from '~/components/navigation/docs/docs-sidebar'
 import { SidebarContainer } from '~/components/navigation/sidebar-container'
 import { getSidebarGroups } from '~/lib/docs'
 
+const layout = sva({
+  className: 'layout',
+  slots: ['aside', 'main'],
+  base: {
+    aside: {
+      bg: {
+        base: 'gray.2',
+        _dark: '#0e0e0e',
+      },
+      borderRightWidth: '1px',
+      position: 'fixed',
+      top: '0',
+      bottom: '0',
+      display: { base: 'none', md: 'block' },
+      ps: 'max(32px, calc((100vw - (1440px - 64px)) / 2))',
+      pe: '8',
+      minWidth: '272px',
+      overflow: 'auto',
+      width: {
+        base: '272px',
+        lg: 'calc((100vw - (1440px - 64px)) / 2 + 272px - 32px)',
+      },
+      zIndex: 'overlay',
+    },
+    main: {
+      minWidth: '0',
+      flex: '1',
+      ps: {
+        base: '0',
+        md: 'max(calc((100vw - 1440px) / 2 + 272px), 272px)',
+      },
+      pe: 'calc((100vw - 1440px) / 2)',
+    },
+  },
+})
+
 const styles = layout()
 
 export default function Layout(props: PropsWithChildren) {
diff --git a/website/src/components/docs/recipe.tsx b/website/src/components/docs/recipe.tsx
index bb5863f02..e068c37f3 100644
--- a/website/src/components/docs/recipe.tsx
+++ b/website/src/components/docs/recipe.tsx
@@ -8,7 +8,7 @@ import { highlight } from '~/lib/shiki'
 
 export const Recipe = async () => {
   const { component } = getServerContext()
-  const path = join(process.cwd(), `../packages/panda/src/theme/recipes/${component}.ts`)
+  const path = join(process.cwd(), `../packages/preset/src/theme/recipes/${component}.ts`)
 
   const programm = pipe(
     Effect.tryPromise({
diff --git a/website/src/components/theming/color-palette.tsx b/website/src/components/theming/color-palette.tsx
index bad92c7f1..9746c3633 100644
--- a/website/src/components/theming/color-palette.tsx
+++ b/website/src/components/theming/color-palette.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { AccentColor, GrayColor } from '@park-ui/panda-preset'
 import { Box, Grid, Stack } from 'styled-system/jsx'
-import { token } from 'styled-system/tokens/index.mjs'
+import { token } from 'styled-system/tokens'
 import { Text } from '~/components/ui/text'
 import { useTheme } from '~/lib/use-theme'
 
@@ -24,6 +24,7 @@ export const ColorPalette = (props: Props) => {
             boxShadow="xs"
             aspectRatio={1}
             style={{
+              // @ts-ignore
               background: token.var(`colors.${color ?? accentColor}.${shade}`),
             }}
           />
diff --git a/website/velite.config.ts b/website/velite.config.ts
index 4ab81d949..5eb40d75e 100644
--- a/website/velite.config.ts
+++ b/website/velite.config.ts
@@ -7,7 +7,7 @@ import { defineCollection, defineConfig, s } from 'velite'
 
 const pages = defineCollection({
   name: 'Pages',
-  pattern: ['pages/**/*.mdx', '../../../packages/panda/CHANGELOG.md'],
+  pattern: ['pages/**/*.mdx', '../../../packages/preset/CHANGELOG.md'],
   schema: s
     .object({
       id: s.string(),