@pandacss/node 0.0.0-dev-20221124070053 → 0.0.0-dev-20221124124535

package/dist/index.mjs

@@ -70,7 +70,7 @@ async function writeFileChunk(ctx, file) {
 // src/generators/index.ts
 import { readFileSync as readFileSync3 } from "fs";
 import { lookItUpSync } from "look-it-up";
-import outdent19 from "outdent";
+import outdent22 from "outdent";
 import { dirname as dirname2 } from "path";
 
 // src/generators/conditions.ts
@@ -332,27 +332,90 @@ function generatePreactJsxFactory(ctx) {
   };
 }
 
+// src/generators/jsx/preact-layout-grid.ts
+import { outdent as outdent7 } from "outdent";
+function generatePreactLayoutGrid() {
+  return {
+    dts: outdent7`
+    import { FunctionComponent } from 'preact'
+
+    export type LayoutGridProps = {
+        count?: number
+        gutter?: string
+        maxWidth?: string
+        margin?: string
+    }
+
+    export declare const LayoutGrid: FunctionComponent<LayoutGridProps>
+    `,
+    js: outdent7`
+    export function LayoutGrid(props) {
+        const { count = 12, margin, gutter = '24px', maxWidth } = props
+        const hasMaxWidth = maxWidth != null;
+        return (
+          <div
+            style={{
+              display: 'grid',
+              gap: gutter,
+              gridTemplateColumns: \`repeat(\${count}, 1fr)\`,
+              height: '100%',
+              width: '100%',
+              position: 'absolute',
+              inset: '0',
+              pointerEvents: 'none',
+              maxWidth: hasMaxWidth ? maxWidth : 'initial',
+              marginInline: hasMaxWidth ? 'auto' : undefined,
+              paddingInline: !hasMaxWidth ? margin : undefined,
+            }}
+          >
+            {Array.from({ length: count }).map((_, i) => (
+              <span
+                key={i}
+                style={{
+                  display: 'flex',
+                  background: 'rgba(255, 0, 0, 0.1)',
+                  height: '100%',
+                }}
+              />
+            ))}
+          </div>
+        );
+      }
+    `
+  };
+}
+
 // src/generators/jsx/preact-pattern.ts
 import { capitalize as capitalize2, dashCase } from "@pandacss/shared";
-import { outdent as outdent7 } from "outdent";
+import { outdent as outdent8 } from "outdent";
+import { match } from "ts-pattern";
 function generate(name, pattern, jsxFactory) {
   const upperName = capitalize2(name);
   const jsxName = pattern.jsx ?? upperName;
   const keys = Object.keys(pattern.properties ?? {});
   return {
     name: dashCase(name),
-    js: outdent7`
+    js: outdent8`
     import { forwardRef } from 'preact/compat'
     import { ${jsxFactory} } from './factory'
     import { config } from '../patterns/${dashCase(name)}'
 
     export const ${jsxName} = forwardRef(function ${jsxName}(props, ref) {
-      const { ${keys.join(", ")}, ...restProps } = props
-      const styleProps = config.transform({${keys.join(", ")}})
-      return <${jsxFactory}.div ref={ref} {...styleProps} {...restProps} />
+      ${match(keys.length).with(
+      0,
+      () => `
+          return <${jsxFactory}.div ref={ref} {...props} />
+        `
+    ).otherwise(
+      () => `
+        const { ${keys.join(", ")}, ...restProps } = props
+        const styleProps = config.transform({${keys.join(", ")}})
+        return <${jsxFactory}.div ref={ref} {...styleProps} {...restProps} />
+        `
+    )}
     })    
     `,
-    dts: outdent7`
+    dts: outdent8`
     import { ComponentProps, JSX, ComponentChildren } from 'preact';
     import { ${upperName}Options } from '../patterns/${dashCase(name)}'
     import { JSXStyleProperties, Assign } from '../types'
@@ -365,7 +428,7 @@ function generate(name, pattern, jsxFactory) {
     type Polymorphic<C extends ElementType = 'div', P = {}> = JSXStyleProperties &
       Assign<Omit<PropsOf<C>, 'color'>, P & { as?: C }>
 
-    type ${jsxName}Props<C extends ElementType> = Polymorphic<C, ${upperName}Options>
+    type ${jsxName}Props<C extends ElementType = 'div'> = Polymorphic<C, ${upperName}Options>
     
     export declare function ${jsxName}<V extends ElementType>(props: ${jsxName}Props<V>): JSX.Element    
     `
@@ -379,12 +442,12 @@ function generatePreactJsxPattern(ctx) {
 
 // src/generators/jsx/react-jsx.ts
 import { capitalize as capitalize3 } from "@pandacss/shared";
-import { outdent as outdent8 } from "outdent";
+import { outdent as outdent9 } from "outdent";
 function generateReactJsxFactory(ctx) {
   const name = ctx.jsxFactory;
   const upperName = capitalize3(name);
   return {
-    dts: outdent8`
+    dts: outdent9`
     import type { ComponentProps } from "react"
     import type { JSXStyleProperties } from "../types"
     
@@ -398,7 +461,7 @@ function generateReactJsxFactory(ctx) {
 
     export declare const ${name}: JSXFactory
     `,
-    js: outdent8`
+    js: outdent9`
     import { forwardRef } from 'react'
     import { isCssProperty } from './is-valid-prop'
     import { css } from '../css'
@@ -459,27 +522,91 @@ function generateReactJsxFactory(ctx) {
   };
 }
 
+// src/generators/jsx/react-layout-grid.ts
+import { outdent as outdent10 } from "outdent";
+function generateReactLayoutGrid() {
+  return {
+    dts: outdent10`
+    import type { FunctionComponent } from 'react'
+
+    export type LayoutGridProps = {
+        count?: number
+        gutter?: string
+        maxWidth?: string
+        margin?: string
+    }
+
+    export declare const LayoutGrid: FunctionComponent<LayoutGridProps>
+    `,
+    js: outdent10`
+    export function LayoutGrid(props) {
+        const { count = 12, margin, gutter = '24px', maxWidth } = props
+        const hasMaxWidth = maxWidth != null;
+        return (
+          <div
+            style={{
+              display: 'grid',
+              gap: gutter,
+              gridTemplateColumns: \`repeat(\${count}, 1fr)\`,
+              height: '100%',
+              width: '100%',
+              position: 'absolute',
+              inset: '0',
+              pointerEvents: 'none',
+              maxWidth: hasMaxWidth ? maxWidth : 'initial',
+              marginInline: hasMaxWidth ? 'auto' : undefined,
+              paddingInline: !hasMaxWidth ? margin : undefined,
+            }}
+          >
+            {Array.from({ length: count }).map((_, i) => (
+              <span
+                key={i}
+                style={{
+                  display: 'flex',
+                  background: 'rgba(255, 0, 0, 0.1)',
+                  height: '100%',
+                }}
+              />
+            ))}
+          </div>
+        );
+      }
+    `
+  };
+}
+
 // src/generators/jsx/react-pattern.ts
 import { capitalize as capitalize4, dashCase as dashCase2 } from "@pandacss/shared";
-import { outdent as outdent9 } from "outdent";
+import { outdent as outdent11 } from "outdent";
+import { match as match2 } from "ts-pattern";
 function generate2(name, pattern, jsxFactory) {
   const upperName = capitalize4(name);
   const jsxName = pattern.jsx ?? upperName;
   const keys = Object.keys(pattern.properties ?? {});
   return {
     name: dashCase2(name),
-    js: outdent9`
+    js: outdent11`
     import { forwardRef } from 'react'
     import { ${jsxFactory} } from './factory'
     import { config } from '../patterns/${dashCase2(name)}'
 
     export const ${jsxName} = forwardRef(function ${jsxName}(props, ref) {
-      const { ${keys.join(", ")}, ...restProps } = props
-      const styleProps = config.transform({${keys.join(", ")}})
-      return <${jsxFactory}.div ref={ref} {...styleProps} {...restProps} />
+      ${match2(keys.length).with(
+      0,
+      () => `
+          return <${jsxFactory}.div ref={ref} {...props} />
+        `
+    ).otherwise(
+      () => `
+        const { ${keys.join(", ")}, ...restProps } = props
+        const styleProps = config.transform({${keys.join(", ")}})
+        return <${jsxFactory}.div ref={ref} {...styleProps} {...restProps} />
+        `
+    )}
+        
     })    
     `,
-    dts: outdent9`
+    dts: outdent11`
     import { ComponentProps, ElementType, PropsWithChildren } from 'react'
     import { ${upperName}Options } from '../patterns/${dashCase2(name)}'
     import { JSXStyleProperties, Assign } from '../types'
@@ -489,7 +616,7 @@ function generate2(name, pattern, jsxFactory) {
     type Polymorphic<C extends ElementType = 'div', P = {}> = JSXStyleProperties &
       Assign<Omit<PropsOf<C>, 'color'>, P & { as?: C }>
 
-    export type ${jsxName}Props<C extends ElementType> = Polymorphic<C, ${upperName}Options>
+    export type ${jsxName}Props<C extends ElementType = 'div'> = Polymorphic<C, ${upperName}Options>
     
     export declare function ${jsxName}<V extends ElementType>(props: ${jsxName}Props<V>): JSX.Element    
     `
@@ -503,12 +630,12 @@ function generateReactJsxPattern(ctx) {
 
 // src/generators/jsx/solid-jsx.ts
 import { capitalize as capitalize5 } from "@pandacss/shared";
-import { outdent as outdent10 } from "outdent";
+import { outdent as outdent12 } from "outdent";
 function generateSolidJsxFactory(ctx) {
   const name = ctx.jsxFactory;
   const upperName = capitalize5(name);
   return {
-    dts: outdent10`
+    dts: outdent12`
     import type { JSX } from 'solid-js'
     import type { JSXStyleProperties, Assign} from '../types'
     
@@ -522,7 +649,7 @@ function generateSolidJsxFactory(ctx) {
 
     export declare const ${name}: JSXFactory
     `,
-    js: outdent10`
+    js: outdent12`
     import { Dynamic } from 'solid-js/web';
     import { mergeProps, splitProps } from 'solid-js';
     import { allCssProperties } from './is-valid-prop'
@@ -570,27 +697,88 @@ function generateSolidJsxFactory(ctx) {
   };
 }
 
+// src/generators/jsx/solid-layout-grid.ts
+import { outdent as outdent13 } from "outdent";
+function generateSolidLayoutGrid() {
+  return {
+    dts: outdent13`
+    export type LayoutGridProps = {
+        count?: number
+        gutter?: string
+        maxWidth?: string
+        margin?: string
+    }
+
+    export declare const LayoutGrid: React.FC<LayoutGridProps>
+    `,
+    js: outdent13`
+    export function LayoutGrid(props) {
+        const { count = 12, margin, gutter = '24px', maxWidth } = props
+        const hasMaxWidth = maxWidth != null;
+        return (
+          <div
+            style={{
+              display: 'grid',
+              gap: gutter,
+              'grid-template-columns': \`repeat(\${count}, 1fr)\`,
+              height: '100%',
+              width: '100%',
+              position: 'absolute',
+              inset: '0',
+              'pointer-events': 'none',
+              'max-width': hasMaxWidth ? maxWidth : 'initial',
+              'margin-inline': hasMaxWidth ? 'auto' : undefined,
+              'padding-inline': !hasMaxWidth ? margin : undefined,
+            }}
+          >
+            {Array.from({ length: count }).map((_, i) => (
+              <span
+                key={i}
+                style={{
+                  display: 'flex',
+                  background: 'rgba(255, 0, 0, 0.1)',
+                  height: '100%',
+                }}
+              />
+            ))}
+          </div>
+        );
+      }
+    `
+  };
+}
+
 // src/generators/jsx/solid-pattern.ts
 import { capitalize as capitalize6, dashCase as dashCase3 } from "@pandacss/shared";
-import { outdent as outdent11 } from "outdent";
+import { outdent as outdent14 } from "outdent";
+import { match as match3 } from "ts-pattern";
 function generate3(name, pattern, jsxFactory) {
   const upperName = capitalize6(name);
   const jsxName = pattern.jsx ?? upperName;
   const keys = Object.keys(pattern.properties ?? {});
   return {
     name: dashCase3(name),
-    js: outdent11`
+    js: outdent14`
     import { splitProps } from 'solid-js'
     import { ${jsxFactory} } from './factory'
     import { config } from '../patterns/${dashCase3(name)}'
 
     export function ${jsxName}(props) {
-      const [patternProps, restProps] = splitProps(props, [${keys.map((v) => JSON.stringify(v)).join(", ")}]);
-      const styleProps = config.transform(patternProps)
-      return <${jsxFactory}.div {...styleProps} {...restProps} />
+      ${match3(keys.length).with(
+      0,
+      () => `
+          return <${jsxFactory}.div {...props} />
+        `
+    ).otherwise(
+      () => `
+          const [patternProps, restProps] = splitProps(props, [${keys.map((v) => JSON.stringify(v)).join(", ")}]);
+          const styleProps = config.transform(patternProps)
+          return <${jsxFactory}.div {...styleProps} {...restProps} />
+        `
+    )}
     }
     `,
-    dts: outdent11`
+    dts: outdent14`
     import { ComponentProps, JSX } from 'solid-js'
     import { ${upperName}Options } from '../patterns/${dashCase3(name)}'
     import { Assign, JSXStyleProperties } from '../types'
@@ -601,7 +789,7 @@ function generate3(name, pattern, jsxFactory) {
     type Polymorphic<C extends ElementType = 'div', P = {}> = JSXStyleProperties &
       Assign<Omit<PropsOf<C>, 'color'>, P & { as?: C }>
 
-    export type ${jsxName}Props<C extends ElementType> = Polymorphic<C, ${upperName}Options>
+    export type ${jsxName}Props<C extends ElementType = 'div'> = Polymorphic<C, ${upperName}Options>
     
     export declare function ${jsxName}<V extends ElementType>(props: ${jsxName}Props<V>): JSX.Element    
     `
@@ -630,17 +818,25 @@ var patternMap = {
 function generateJsxPatterns(ctx) {
   return patternMap[ctx.jsxFramework](ctx);
 }
+var layoutGridMap = {
+  react: generateReactLayoutGrid,
+  preact: generatePreactLayoutGrid,
+  solid: generateSolidLayoutGrid
+};
+function generateLayoutGrid(ctx) {
+  return layoutGridMap[ctx.jsxFramework]();
+}
 
 // src/generators/pattern.ts
 import { capitalize as capitalize7, dashCase as dashCase4, unionType as unionType2 } from "@pandacss/shared";
-import { outdent as outdent12 } from "outdent";
+import { outdent as outdent15 } from "outdent";
 import { stringify as stringify2 } from "telejson";
-import { match } from "ts-pattern";
+import { match as match4 } from "ts-pattern";
 function generate4(name, pattern) {
   const { properties, transform, strict } = pattern;
   return {
     name: dashCase4(name),
-    dts: outdent12`
+    dts: outdent15`
     import { SystemStyleObject, ConditionalValue } from "../types"
     import { Properties } from "../types/csstype"
     import { Tokens } from "../types/token"
@@ -648,7 +844,7 @@ function generate4(name, pattern) {
     export type ${capitalize7(name)}Options = {
        ${Object.keys(properties ?? {}).map((key) => {
       const value = properties[key];
-      return match(value).with({ type: "property" }, (value2) => {
+      return match4(value).with({ type: "property" }, (value2) => {
         return `${key}?: SystemStyleObject["${value2.value}"]`;
       }).with({ type: "token" }, (value2) => {
         if (value2.property) {
@@ -663,13 +859,13 @@ function generate4(name, pattern) {
     }).join("\n	")}
     }
 
-    ${strict ? outdent12`export declare function ${name}(options: ${capitalize7(name)}Options): string` : outdent12`
+    ${strict ? outdent15`export declare function ${name}(options: ${capitalize7(name)}Options): string` : outdent15`
         type Merge<T> = Omit<SystemStyleObject, keyof T> & T
         export declare function ${name}(options: Merge<${capitalize7(name)}Options>): string
         `}
 
    `,
-    js: outdent12`
+    js: outdent15`
   import { mapObject } from "../helpers"
   import { css } from "../css"
 
@@ -686,10 +882,10 @@ function generatePattern(ctx) {
 }
 
 // src/generators/prop-types.ts
-import { outdent as outdent13 } from "outdent";
+import { outdent as outdent16 } from "outdent";
 function generatePropTypes(utility) {
   const result = [
-    outdent13`
+    outdent16`
     import { Properties as CSSProperties } from "./csstype"
 
     type BasePropTypes  = {`
@@ -717,14 +913,14 @@ function generatePropTypes(utility) {
 
 // src/generators/recipe.ts
 import { capitalize as capitalize8, unionType as unionType3 } from "@pandacss/shared";
-import { outdent as outdent14 } from "outdent";
+import { outdent as outdent17 } from "outdent";
 function generateRecipes(ctx) {
   const { recipes = {}, hash, hasRecipes, utility } = ctx;
   const { separator } = utility;
   if (!hasRecipes)
     return;
   const js = [
-    outdent14`
+    outdent17`
    import { createCss, withoutSpace } from "../helpers"
 
    const createRecipe = (name) => {
@@ -748,10 +944,10 @@ function generateRecipes(ctx) {
   ];
   const dts = [""];
   Object.values(recipes).forEach((recipe) => {
-    js.push(outdent14`
+    js.push(outdent17`
     export const ${recipe.name} = createRecipe('${recipe.name}')
     `);
-    dts.push(outdent14`
+    dts.push(outdent17`
     import { ConditionalValue } from "../types"
 
     export type ${capitalize8(recipe.name)}Value = {
@@ -766,8 +962,8 @@ function generateRecipes(ctx) {
     `);
   });
   return {
-    js: outdent14.string(js.join("\n\n")),
-    dts: outdent14.string(dts.join("\n\n"))
+    js: outdent17.string(js.join("\n\n")),
+    dts: outdent17.string(dts.join("\n\n"))
   };
 }
 
@@ -874,14 +1070,14 @@ function generateReset() {
 
 // src/generators/token-css.ts
 import { toCss, toKeyframeCss } from "@pandacss/core";
-import { outdent as outdent15 } from "outdent";
-import { match as match2, P } from "ts-pattern";
+import { outdent as outdent18 } from "outdent";
+import { match as match5, P } from "ts-pattern";
 function generateKeyframes(keyframes) {
   if (keyframes) {
     return toKeyframeCss(keyframes);
   }
 }
-var getConditionMessage = (value) => outdent15`
+var getConditionMessage = (value) => outdent18`
 It seems you provided an invalid condition for semantic tokens.
 
 - You provided: \`${value}\`
@@ -902,7 +1098,7 @@ function generateTokenCss(ctx, varRoot) {
       results.push(css3);
     } else {
       const cond = conditions.normalize(key);
-      const css3 = match2(cond).with({ type: "parent-nesting" }, (cond2) => {
+      const css3 = match5(cond).with({ type: "parent-nesting" }, (cond2) => {
         const selector = cond2.value.replace(/\s&/g, "");
         const { css: css4 } = toCss(varsObj);
         return `${selector} {
@@ -936,7 +1132,7 @@ function generateTokenCss(ctx, varRoot) {
 
 // src/generators/token-dts.ts
 import { unionType as unionType4, capitalize as capitalize9 } from "@pandacss/shared";
-import { outdent as outdent16 } from "outdent";
+import { outdent as outdent19 } from "outdent";
 import { singular } from "pluralize";
 function generateTokenDts(dict) {
   const set = /* @__PURE__ */ new Set();
@@ -954,11 +1150,11 @@ function generateTokenDts(dict) {
   }
   interfaceSet.add("}");
   set.add(Array.from(interfaceSet).join("\n"));
-  return outdent16.string(Array.from(set).join("\n\n"));
+  return outdent19.string(Array.from(set).join("\n\n"));
 }
 
 // src/generators/token-js.ts
-import outdent17 from "outdent";
+import outdent20 from "outdent";
 function generateTokenJs(dict) {
   const map = /* @__PURE__ */ new Map();
   dict.allTokens.forEach((token) => {
@@ -968,7 +1164,7 @@ function generateTokenJs(dict) {
   });
   const obj = Object.fromEntries(map);
   return {
-    js: outdent17`
+    js: outdent20`
   const tokens = ${JSON.stringify(obj, null, 2)}
   
   function getToken(path) {
@@ -981,7 +1177,7 @@ function generateTokenJs(dict) {
     return variable
   }
   `,
-    dts: outdent17`
+    dts: outdent20`
   import { Token } from "../types/token"
   export declare function getToken(path: Token): string
   export declare function getTokenVar(path: Token): string
@@ -991,7 +1187,7 @@ function generateTokenJs(dict) {
 
 // src/generators/types.ts
 import { readFileSync as readFileSync2 } from "fs-extra";
-import outdent18 from "outdent";
+import outdent21 from "outdent";
 function getType(file) {
   const filepath = getEntrypoint("@pandacss/types", { dev: file });
   return readFileSync2(filepath, "utf8");
@@ -1001,7 +1197,7 @@ function generateCssType(ctx) {
   return {
     cssType: getType("csstype.d.ts"),
     pandaCssType: getType("system-types.d.ts"),
-    publicType: outdent18`
+    publicType: outdent21`
     import * as System from './system-types'
     import { PropTypes } from './prop-type'
     import { Conditions } from './conditions'
@@ -1122,7 +1318,7 @@ function setupPatterns(ctx) {
   if (!files) {
     return { files: [] };
   }
-  const indexCode = outdent19.string(files.map((file) => `export * from './${file.name}'`).join("\n"));
+  const indexCode = outdent22.string(files.map((file) => `export * from './${file.name}'`).join("\n"));
   return {
     dir: ctx.paths.pattern,
     files: [
@@ -1139,15 +1335,19 @@ function setupJsx(ctx) {
   const isValidProp = generateisValidProp(ctx);
   const factory = generateJsxFactory(ctx);
   const patterns = generateJsxPatterns(ctx);
-  const indexCode = outdent19`
+  const layoutGrid = generateLayoutGrid(ctx);
+  const indexCode = outdent22`
   export * from './factory'
-  ${outdent19.string(patterns.map((file) => `export * from './${file.name}'`).join("\n"))}
+  export * from './layout-grid'
+  ${outdent22.string(patterns.map((file) => `export * from './${file.name}'`).join("\n"))}
 `;
   return {
     dir: ctx.paths.jsx,
     files: [
       ...patterns.map((file) => ({ file: `${file.name}.jsx`, code: file.js })),
       ...patterns.map((file) => ({ file: `${file.name}.d.ts`, code: file.dts })),
+      { file: "layout-grid.jsx", code: layoutGrid.js },
+      { file: "layout-grid.d.ts", code: layoutGrid.dts },
       { file: "is-valid-prop.js", code: isValidProp.js },
       { file: "factory.d.ts", code: factory.dts },
       { file: "factory.jsx", code: factory.js },
@@ -1157,7 +1357,7 @@ function setupJsx(ctx) {
   };
 }
 function setupCssIndex(ctx) {
-  const code = outdent19`
+  const code = outdent22`
   export * from './css'
   export * from './cx'
   export * from './global-css'
@@ -1178,7 +1378,7 @@ function setupReset(ctx) {
   return { files: [{ file: "reset.css", code }] };
 }
 function setupGitIgnore(ctx) {
-  const txt = outdent19`## CSS Panda
+  const txt = outdent22`## CSS Panda
   ${ctx.outdir}
   `;
   const file = lookItUpSync(".gitignore");
@@ -1217,30 +1417,30 @@ function generateSystem(ctx) {
 
 // src/messages.ts
 import { colors, logger as logger3, quote as quote2 } from "@pandacss/logger";
-import { outdent as outdent20 } from "outdent";
+import { outdent as outdent23 } from "outdent";
 var tick = colors.green().bold("\u2714\uFE0F");
 function artifactsGeneratedMessage(ctx) {
   return [
-    outdent20`
+    outdent23`
       ${tick} ${quote2(ctx.outdir, "/css")}: the css function to author styles
     `,
-    ctx.hasTokens && outdent20`
+    ctx.hasTokens && outdent23`
       ${tick} ${quote2(ctx.outdir, "/tokens")}: the css variables and js function to query your tokens
     `,
-    ctx.hasPattern && outdent20`
+    ctx.hasPattern && outdent23`
       ${tick} ${quote2(ctx.outdir, "/patterns")}: functions to implement common css patterns
     `,
-    ctx.hasRecipes && outdent20`
+    ctx.hasRecipes && outdent23`
       ${tick} ${quote2(ctx.outdir, "/recipes")}: functions to create multi-variant styles
     `,
-    ctx.jsxFramework && outdent20`
+    ctx.jsxFramework && outdent23`
       ${tick} ${quote2(ctx.outdir, "/jsx")}: style prop powered elements for ${ctx.jsxFramework}
     `,
     "\n"
   ].filter(Boolean).join("\n");
 }
 function configExistsMessage(cmd) {
-  return outdent20`
+  return outdent23`
       \n
       It looks like you already have panda created\`.
       
@@ -1249,7 +1449,7 @@ function configExistsMessage(cmd) {
       `;
 }
 function thankYouMessage() {
-  return outdent20`
+  return outdent23`
 
   🚀 Thanks for choosing ${colors.cyan("Panda")} to write your css.
 
@@ -1261,7 +1461,7 @@ var randomWords = ["Sweet", "Divine", "Pandalicious", "Super"];
 var pickRandom = (arr) => arr[Math.floor(Math.random() * arr.length)];
 function scaffoldCompleteMessage() {
   return logger3.box(
-    outdent20`
+    outdent23`
 
   ${colors.bold().cyan("Next steps:")}
   
@@ -1893,7 +2093,7 @@ async function generate5(config, configPath) {
 import { logger as logger8, quote as quote3 } from "@pandacss/logger";
 import { writeFile as writeFile2 } from "fs-extra";
 import { lookItUpSync as lookItUpSync3 } from "look-it-up";
-import { outdent as outdent21 } from "outdent";
+import { outdent as outdent24 } from "outdent";
 import { join as join4 } from "path";
 import getPackageManager2 from "preferred-pm";
 async function setupConfig(cwd, { force }) {
@@ -1907,7 +2107,7 @@ async function setupConfig(cwd, { force }) {
   if (!force && configFile) {
     logger8.warn("config exists", configExistsMessage(cmd));
   } else {
-    const content = outdent21`
+    const content = outdent24`
        import { defineConfig } from "css-panda"
 
        export default defineConfig({
@@ -1933,7 +2133,7 @@ async function setupConfig(cwd, { force }) {
 }
 async function setupPostcss(cwd) {
   logger8.info({ type: "init", msg: `creating postcss config file: ${quote3("postcss.config.cjs")}` });
-  const content = outdent21`
+  const content = outdent24`
   module.exports = {
     plugins: {
       'css-panda/postcss': {},