chore: rename css-panda to pandacss/dev

Author: segunadebayo

.changeset/gold-horses-pull.md

@@ -1,7 +1,7 @@
 ---
 '@pandacss/config': patch
 '@pandacss/types': patch
-'css-panda': patch
+'@pandacss/dev': patch
 ---
 
 Add `definePreset` method

.changeset/thirty-chairs-sin.md

@@ -1,6 +1,6 @@
 ---
 '@pandacss/parser': patch
-'css-panda': patch
+'@pandacss/dev': patch
 '@pandacss/config': patch
 '@pandacss/core': patch
 '@pandacss/presets': patch

README.md

@@ -23,7 +23,7 @@ The universal design system solution for the web
 ## Getting Started
 
 ```sh
-yarn install css-panda
+yarn install @pandacss/dev
 ```
 
 To scaffold the panda config and postcss

docs/concepts/atomic-styles.mdx

@@ -8,7 +8,7 @@ The `css` function is used to write atomic styles. It accepts a style object of
 and returns a string.
 
 ```js
-import { css } from './design-system/css'
+import { css } from './styled-system/css'
 
 const btnClass = css({
   backgroundColor: 'gainsboro',

docs/creating-a-preset.mdx

@@ -9,7 +9,7 @@ By default, any configuration you add in your own `panda.config.js` file is smar
 You can specify a preset in your `panda.config.js` file by using the `presets` option:
 
 ```js
-import { defineConfig } from 'css-panda'
+import { defineConfig } from '@pandacss/dev'
 
 export default defineConfig({
   presets: ['@acmecorp/panda-preset'],
@@ -19,7 +19,7 @@ export default defineConfig({
 # Creating a preset
 
 ```js
-import { defineConfig } from 'css-panda'
+import { defineConfig } from '@pandacss/dev'
 
 export default defineConfig({
   utilities: {

docs/getting-started/astro.mdx

@@ -8,7 +8,7 @@ Vite, and Parcel.
 Install panda and create your `panda.config.ts` file.
 
 ```bash
-npm install -g @panda-css/cli
+npm install -g @pandacss/dev
 npx panda init
 ```
 
@@ -18,7 +18,7 @@ Add panda integration to your `astro.config.mjs` file.
 
 ```js
 import { defineConfig } from 'astro/config'
-import pandacss from '@pandacss/cli/astro'
+import pandacss from '@pandacss/dev/astro'
 
 export default defineConfig({
   // ...
@@ -29,15 +29,15 @@ export default defineConfig({
 ## Configure the content
 
 ```js {3}
-import { defineConfig } from 'css-panda'
+import { defineConfig } from '@pandacss/dev'
 
 export default defineConfig({
   preflight: true,
-  presets: ['css-panda/presets'],
+  presets: ['@pandacss/dev/presets'],
   // define the content to scan 👇🏻
   include: ['./src/**/*.{tsx,jsx}', './pages/**/*.{jsx,tsx}'],
   exclude: [],
-  outdir: 'design-system',
+  outdir: 'styled-system',
 })
 ```
 
@@ -60,7 +60,7 @@ npm run dev
 Use the generated style utilities in your code and panda will extract them to the generated CSS file.
 
 ```jsx
-import { css } from './design-system/css'
+import { css } from './styled-system/css'
 
 export function App() {
   return <div className={css({ bg: 'red.400' })} />

docs/getting-started/cli.mdx

@@ -5,22 +5,22 @@ The simplest and fastest way to use Panda is with the Panda CLI tool.
 ## Install Panda
 
 ```bash
-npm install -g @panda-css/cli
+npm install -g @pandacss/dev
 npx panda init
 ```
 
 ## Configure the content
 
 ```js {3}
-import { defineConfig } from 'css-panda'
+import { defineConfig } from '@pandacss/dev'
 
 export default defineConfig({
   preflight: true,
-  presets: ['css-panda/presets'],
+  presets: ['@pandacss/dev/presets'],
   // define the content to scan 👇🏻
   include: ['./src/**/*.{tsx,jsx}', './pages/**/*.{jsx,tsx}'],
   exclude: [],
-  outdir: 'design-system',
+  outdir: 'styled-system',
 })
 ```
 
@@ -47,7 +47,7 @@ panda --watch
 Use the generated style utilities in your code and panda will extract them to the generated CSS file.
 
 ```jsx
-import { css } from './design-system/css'
+import { css } from './styled-system/css'
 
 export function App() {
   return <div className={css({ bg: 'red.400' })} />

docs/getting-started/postcss.mdx

@@ -8,7 +8,7 @@ Vite, and Parcel.
 Install panda and create your `panda.config.ts` file.
 
 ```bash
-npm install -g @panda-css/cli postcss autoprefixer
+npm install -g @pandacss/dev postcss autoprefixer
 npx panda init --postcss
 ```
 
@@ -20,23 +20,23 @@ Add panda and autoprefixer to your `postcss.config.cjs` file, or wherever PostCS
 module.exports = {
   plugins: {
     autoprefixer: {},
-    '@pandacss/cli/postcss': {},
+    '@pandacss/dev/postcss': {},
   },
 }
 ```
 
 ## Configure the content
 
 ```js {3}
-import { defineConfig } from 'css-panda'
+import { defineConfig } from '@pandacss/dev'
 
 export default defineConfig({
   preflight: true,
-  presets: ['css-panda/presets'],
+  presets: ['@pandacss/dev/presets'],
   // define the content to scan 👇🏻
   include: ['./src/**/*.{tsx,jsx}', './pages/**/*.{jsx,tsx}'],
   exclude: [],
-  outdir: 'design-system',
+  outdir: 'styled-system',
 })
 ```
 
@@ -59,7 +59,7 @@ npm run dev
 Use the generated style utilities in your code and panda will extract them to the generated CSS file.
 
 ```jsx
-import { css } from './design-system/css'
+import { css } from './styled-system/css'
 
 export function App() {
   return <div className={css({ bg: 'red.400' })} />

docs/recipe/01-introduction.mdx

@@ -17,7 +17,7 @@ Here's an example button recipe
 
 ```jsx
 // recipes/button.tsx
-import { defineRecipe } from 'css-panda'
+import { defineRecipe } from '@pandacss/dev'
 
 const buttonRecipe = defineRecipe({
   ...

docs/recipe/02-config-recipe.mdx

@@ -18,7 +18,7 @@ The config recipe takes the following properties:
 To define a config recipe, import the `defineRecipe` helper function
 
 ```jsx
-import { defineRecipe } from 'css-panda'
+import { defineRecipe } from '@pandacss/dev'
 
 export const buttonRecipe = defineRecipe({
   name: 'button',
@@ -53,13 +53,13 @@ export const buttonRecipe = defineRecipe({
 To add the recipe to the config, you’d need to add it to the `theme.recipes` object.
 
 ```jsx
-import { defineConfig } from 'css-panda'
+import { defineConfig } from '@pandacss/dev'
 import { buttonRecipe } from './recipes/button'
 
 export default defineConfig({
   include: ['src/**/*.tsx'],
   outdir: 'panda',
-  presets: ['css-panda/presets'],
+  presets: ['@pandacss/dev/presets'],
   jsxFramework: 'solid',
   theme: {
     recipes: {