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

package/dist/index.js

@@ -115,7 +115,7 @@ async function writeFileChunk(ctx, file) {
 // src/generators/index.ts
 var import_fs2 = require("fs");
 var import_look_it_up = require("look-it-up");
-var import_outdent19 = __toESM(require("outdent"));
+var import_outdent22 = __toESM(require("outdent"));
 var import_path2 = require("path");
 
 // src/generators/conditions.ts
@@ -377,27 +377,90 @@ function generatePreactJsxFactory(ctx) {
   };
 }
 
+// src/generators/jsx/preact-layout-grid.ts
+var import_outdent7 = require("outdent");
+function generatePreactLayoutGrid() {
+  return {
+    dts: import_outdent7.outdent`
+    import { FunctionComponent } from 'preact'
+
+    export type LayoutGridProps = {
+        count?: number
+        gutter?: string
+        maxWidth?: string
+        margin?: string
+    }
+
+    export declare const LayoutGrid: FunctionComponent<LayoutGridProps>
+    `,
+    js: import_outdent7.outdent`
+    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
 var import_shared3 = require("@pandacss/shared");
-var import_outdent7 = require("outdent");
+var import_outdent8 = require("outdent");
+var import_ts_pattern = require("ts-pattern");
 function generate(name, pattern, jsxFactory) {
   const upperName = (0, import_shared3.capitalize)(name);
   const jsxName = pattern.jsx ?? upperName;
   const keys = Object.keys(pattern.properties ?? {});
   return {
     name: (0, import_shared3.dashCase)(name),
-    js: import_outdent7.outdent`
+    js: import_outdent8.outdent`
     import { forwardRef } from 'preact/compat'
     import { ${jsxFactory} } from './factory'
     import { config } from '../patterns/${(0, import_shared3.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} />
+      ${(0, import_ts_pattern.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: import_outdent7.outdent`
+    dts: import_outdent8.outdent`
     import { ComponentProps, JSX, ComponentChildren } from 'preact';
     import { ${upperName}Options } from '../patterns/${(0, import_shared3.dashCase)(name)}'
     import { JSXStyleProperties, Assign } from '../types'
@@ -410,7 +473,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    
     `
@@ -424,12 +487,12 @@ function generatePreactJsxPattern(ctx) {
 
 // src/generators/jsx/react-jsx.ts
 var import_shared4 = require("@pandacss/shared");
-var import_outdent8 = require("outdent");
+var import_outdent9 = require("outdent");
 function generateReactJsxFactory(ctx) {
   const name = ctx.jsxFactory;
   const upperName = (0, import_shared4.capitalize)(name);
   return {
-    dts: import_outdent8.outdent`
+    dts: import_outdent9.outdent`
     import type { ComponentProps } from "react"
     import type { JSXStyleProperties } from "../types"
     
@@ -443,7 +506,7 @@ function generateReactJsxFactory(ctx) {
 
     export declare const ${name}: JSXFactory
     `,
-    js: import_outdent8.outdent`
+    js: import_outdent9.outdent`
     import { forwardRef } from 'react'
     import { isCssProperty } from './is-valid-prop'
     import { css } from '../css'
@@ -504,27 +567,91 @@ function generateReactJsxFactory(ctx) {
   };
 }
 
+// src/generators/jsx/react-layout-grid.ts
+var import_outdent10 = require("outdent");
+function generateReactLayoutGrid() {
+  return {
+    dts: import_outdent10.outdent`
+    import type { FunctionComponent } from 'react'
+
+    export type LayoutGridProps = {
+        count?: number
+        gutter?: string
+        maxWidth?: string
+        margin?: string
+    }
+
+    export declare const LayoutGrid: FunctionComponent<LayoutGridProps>
+    `,
+    js: import_outdent10.outdent`
+    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
 var import_shared5 = require("@pandacss/shared");
-var import_outdent9 = require("outdent");
+var import_outdent11 = require("outdent");
+var import_ts_pattern2 = require("ts-pattern");
 function generate2(name, pattern, jsxFactory) {
   const upperName = (0, import_shared5.capitalize)(name);
   const jsxName = pattern.jsx ?? upperName;
   const keys = Object.keys(pattern.properties ?? {});
   return {
     name: (0, import_shared5.dashCase)(name),
-    js: import_outdent9.outdent`
+    js: import_outdent11.outdent`
     import { forwardRef } from 'react'
     import { ${jsxFactory} } from './factory'
     import { config } from '../patterns/${(0, import_shared5.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} />
+      ${(0, import_ts_pattern2.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: import_outdent9.outdent`
+    dts: import_outdent11.outdent`
     import { ComponentProps, ElementType, PropsWithChildren } from 'react'
     import { ${upperName}Options } from '../patterns/${(0, import_shared5.dashCase)(name)}'
     import { JSXStyleProperties, Assign } from '../types'
@@ -534,7 +661,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    
     `
@@ -548,12 +675,12 @@ function generateReactJsxPattern(ctx) {
 
 // src/generators/jsx/solid-jsx.ts
 var import_shared6 = require("@pandacss/shared");
-var import_outdent10 = require("outdent");
+var import_outdent12 = require("outdent");
 function generateSolidJsxFactory(ctx) {
   const name = ctx.jsxFactory;
   const upperName = (0, import_shared6.capitalize)(name);
   return {
-    dts: import_outdent10.outdent`
+    dts: import_outdent12.outdent`
     import type { JSX } from 'solid-js'
     import type { JSXStyleProperties, Assign} from '../types'
     
@@ -567,7 +694,7 @@ function generateSolidJsxFactory(ctx) {
 
     export declare const ${name}: JSXFactory
     `,
-    js: import_outdent10.outdent`
+    js: import_outdent12.outdent`
     import { Dynamic } from 'solid-js/web';
     import { mergeProps, splitProps } from 'solid-js';
     import { allCssProperties } from './is-valid-prop'
@@ -615,27 +742,88 @@ function generateSolidJsxFactory(ctx) {
   };
 }
 
+// src/generators/jsx/solid-layout-grid.ts
+var import_outdent13 = require("outdent");
+function generateSolidLayoutGrid() {
+  return {
+    dts: import_outdent13.outdent`
+    export type LayoutGridProps = {
+        count?: number
+        gutter?: string
+        maxWidth?: string
+        margin?: string
+    }
+
+    export declare const LayoutGrid: React.FC<LayoutGridProps>
+    `,
+    js: import_outdent13.outdent`
+    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
 var import_shared7 = require("@pandacss/shared");
-var import_outdent11 = require("outdent");
+var import_outdent14 = require("outdent");
+var import_ts_pattern3 = require("ts-pattern");
 function generate3(name, pattern, jsxFactory) {
   const upperName = (0, import_shared7.capitalize)(name);
   const jsxName = pattern.jsx ?? upperName;
   const keys = Object.keys(pattern.properties ?? {});
   return {
     name: (0, import_shared7.dashCase)(name),
-    js: import_outdent11.outdent`
+    js: import_outdent14.outdent`
     import { splitProps } from 'solid-js'
     import { ${jsxFactory} } from './factory'
     import { config } from '../patterns/${(0, import_shared7.dashCase)(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} />
+      ${(0, import_ts_pattern3.match)(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: import_outdent11.outdent`
+    dts: import_outdent14.outdent`
     import { ComponentProps, JSX } from 'solid-js'
     import { ${upperName}Options } from '../patterns/${(0, import_shared7.dashCase)(name)}'
     import { Assign, JSXStyleProperties } from '../types'
@@ -646,7 +834,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    
     `
@@ -675,17 +863,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
 var import_shared8 = require("@pandacss/shared");
-var import_outdent12 = require("outdent");
+var import_outdent15 = require("outdent");
 var import_telejson = require("telejson");
-var import_ts_pattern = require("ts-pattern");
+var import_ts_pattern4 = require("ts-pattern");
 function generate4(name, pattern) {
   const { properties, transform, strict } = pattern;
   return {
     name: (0, import_shared8.dashCase)(name),
-    dts: import_outdent12.outdent`
+    dts: import_outdent15.outdent`
     import { SystemStyleObject, ConditionalValue } from "../types"
     import { Properties } from "../types/csstype"
     import { Tokens } from "../types/token"
@@ -693,7 +889,7 @@ function generate4(name, pattern) {
     export type ${(0, import_shared8.capitalize)(name)}Options = {
        ${Object.keys(properties ?? {}).map((key) => {
       const value = properties[key];
-      return (0, import_ts_pattern.match)(value).with({ type: "property" }, (value2) => {
+      return (0, import_ts_pattern4.match)(value).with({ type: "property" }, (value2) => {
         return `${key}?: SystemStyleObject["${value2.value}"]`;
       }).with({ type: "token" }, (value2) => {
         if (value2.property) {
@@ -708,13 +904,13 @@ function generate4(name, pattern) {
     }).join("\n	")}
     }
 
-    ${strict ? import_outdent12.outdent`export declare function ${name}(options: ${(0, import_shared8.capitalize)(name)}Options): string` : import_outdent12.outdent`
+    ${strict ? import_outdent15.outdent`export declare function ${name}(options: ${(0, import_shared8.capitalize)(name)}Options): string` : import_outdent15.outdent`
         type Merge<T> = Omit<SystemStyleObject, keyof T> & T
         export declare function ${name}(options: Merge<${(0, import_shared8.capitalize)(name)}Options>): string
         `}
 
    `,
-    js: import_outdent12.outdent`
+    js: import_outdent15.outdent`
   import { mapObject } from "../helpers"
   import { css } from "../css"
 
@@ -731,10 +927,10 @@ function generatePattern(ctx) {
 }
 
 // src/generators/prop-types.ts
-var import_outdent13 = require("outdent");
+var import_outdent16 = require("outdent");
 function generatePropTypes(utility) {
   const result = [
-    import_outdent13.outdent`
+    import_outdent16.outdent`
     import { Properties as CSSProperties } from "./csstype"
 
     type BasePropTypes  = {`
@@ -762,14 +958,14 @@ function generatePropTypes(utility) {
 
 // src/generators/recipe.ts
 var import_shared9 = require("@pandacss/shared");
-var import_outdent14 = require("outdent");
+var import_outdent17 = require("outdent");
 function generateRecipes(ctx) {
   const { recipes = {}, hash, hasRecipes, utility } = ctx;
   const { separator } = utility;
   if (!hasRecipes)
     return;
   const js = [
-    import_outdent14.outdent`
+    import_outdent17.outdent`
    import { createCss, withoutSpace } from "../helpers"
 
    const createRecipe = (name) => {
@@ -793,10 +989,10 @@ function generateRecipes(ctx) {
   ];
   const dts = [""];
   Object.values(recipes).forEach((recipe) => {
-    js.push(import_outdent14.outdent`
+    js.push(import_outdent17.outdent`
     export const ${recipe.name} = createRecipe('${recipe.name}')
     `);
-    dts.push(import_outdent14.outdent`
+    dts.push(import_outdent17.outdent`
     import { ConditionalValue } from "../types"
 
     export type ${(0, import_shared9.capitalize)(recipe.name)}Value = {
@@ -811,8 +1007,8 @@ function generateRecipes(ctx) {
     `);
   });
   return {
-    js: import_outdent14.outdent.string(js.join("\n\n")),
-    dts: import_outdent14.outdent.string(dts.join("\n\n"))
+    js: import_outdent17.outdent.string(js.join("\n\n")),
+    dts: import_outdent17.outdent.string(dts.join("\n\n"))
   };
 }
 
@@ -919,14 +1115,14 @@ function generateReset() {
 
 // src/generators/token-css.ts
 var import_core2 = require("@pandacss/core");
-var import_outdent15 = require("outdent");
-var import_ts_pattern2 = require("ts-pattern");
+var import_outdent18 = require("outdent");
+var import_ts_pattern5 = require("ts-pattern");
 function generateKeyframes(keyframes) {
   if (keyframes) {
     return (0, import_core2.toKeyframeCss)(keyframes);
   }
 }
-var getConditionMessage = (value) => import_outdent15.outdent`
+var getConditionMessage = (value) => import_outdent18.outdent`
 It seems you provided an invalid condition for semantic tokens.
 
 - You provided: \`${value}\`
@@ -947,7 +1143,7 @@ function generateTokenCss(ctx, varRoot) {
       results.push(css3);
     } else {
       const cond = conditions.normalize(key);
-      const css3 = (0, import_ts_pattern2.match)(cond).with({ type: "parent-nesting" }, (cond2) => {
+      const css3 = (0, import_ts_pattern5.match)(cond).with({ type: "parent-nesting" }, (cond2) => {
         const selector = cond2.value.replace(/\s&/g, "");
         const { css: css4 } = (0, import_core2.toCss)(varsObj);
         return `${selector} {
@@ -961,7 +1157,7 @@ function generateTokenCss(ctx, varRoot) {
  ${css4}; 
  } 
  }`;
-      }).with(import_ts_pattern2.P.nullish, () => {
+      }).with(import_ts_pattern5.P.nullish, () => {
       }).otherwise((cond2) => {
         if (cond2) {
           throw new Error(getConditionMessage(cond2.raw));
@@ -981,7 +1177,7 @@ function generateTokenCss(ctx, varRoot) {
 
 // src/generators/token-dts.ts
 var import_shared10 = require("@pandacss/shared");
-var import_outdent16 = require("outdent");
+var import_outdent19 = require("outdent");
 var import_pluralize = require("pluralize");
 function generateTokenDts(dict) {
   const set = /* @__PURE__ */ new Set();
@@ -999,11 +1195,11 @@ function generateTokenDts(dict) {
   }
   interfaceSet.add("}");
   set.add(Array.from(interfaceSet).join("\n"));
-  return import_outdent16.outdent.string(Array.from(set).join("\n\n"));
+  return import_outdent19.outdent.string(Array.from(set).join("\n\n"));
 }
 
 // src/generators/token-js.ts
-var import_outdent17 = __toESM(require("outdent"));
+var import_outdent20 = __toESM(require("outdent"));
 function generateTokenJs(dict) {
   const map = /* @__PURE__ */ new Map();
   dict.allTokens.forEach((token) => {
@@ -1013,7 +1209,7 @@ function generateTokenJs(dict) {
   });
   const obj = Object.fromEntries(map);
   return {
-    js: import_outdent17.default`
+    js: import_outdent20.default`
   const tokens = ${JSON.stringify(obj, null, 2)}
   
   function getToken(path) {
@@ -1026,7 +1222,7 @@ function generateTokenJs(dict) {
     return variable
   }
   `,
-    dts: import_outdent17.default`
+    dts: import_outdent20.default`
   import { Token } from "../types/token"
   export declare function getToken(path: Token): string
   export declare function getTokenVar(path: Token): string
@@ -1036,7 +1232,7 @@ function generateTokenJs(dict) {
 
 // src/generators/types.ts
 var import_fs_extra = require("fs-extra");
-var import_outdent18 = __toESM(require("outdent"));
+var import_outdent21 = __toESM(require("outdent"));
 function getType(file) {
   const filepath = getEntrypoint("@pandacss/types", { dev: file });
   return (0, import_fs_extra.readFileSync)(filepath, "utf8");
@@ -1046,7 +1242,7 @@ function generateCssType(ctx) {
   return {
     cssType: getType("csstype.d.ts"),
     pandaCssType: getType("system-types.d.ts"),
-    publicType: import_outdent18.default`
+    publicType: import_outdent21.default`
     import * as System from './system-types'
     import { PropTypes } from './prop-type'
     import { Conditions } from './conditions'
@@ -1167,7 +1363,7 @@ function setupPatterns(ctx) {
   if (!files) {
     return { files: [] };
   }
-  const indexCode = import_outdent19.default.string(files.map((file) => `export * from './${file.name}'`).join("\n"));
+  const indexCode = import_outdent22.default.string(files.map((file) => `export * from './${file.name}'`).join("\n"));
   return {
     dir: ctx.paths.pattern,
     files: [
@@ -1184,15 +1380,19 @@ function setupJsx(ctx) {
   const isValidProp = generateisValidProp(ctx);
   const factory = generateJsxFactory(ctx);
   const patterns = generateJsxPatterns(ctx);
-  const indexCode = import_outdent19.default`
+  const layoutGrid = generateLayoutGrid(ctx);
+  const indexCode = import_outdent22.default`
   export * from './factory'
-  ${import_outdent19.default.string(patterns.map((file) => `export * from './${file.name}'`).join("\n"))}
+  export * from './layout-grid'
+  ${import_outdent22.default.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 },
@@ -1202,7 +1402,7 @@ function setupJsx(ctx) {
   };
 }
 function setupCssIndex(ctx) {
-  const code = import_outdent19.default`
+  const code = import_outdent22.default`
   export * from './css'
   export * from './cx'
   export * from './global-css'
@@ -1223,7 +1423,7 @@ function setupReset(ctx) {
   return { files: [{ file: "reset.css", code }] };
 }
 function setupGitIgnore(ctx) {
-  const txt = import_outdent19.default`## CSS Panda
+  const txt = import_outdent22.default`## CSS Panda
   ${ctx.outdir}
   `;
   const file = (0, import_look_it_up.lookItUpSync)(".gitignore");
@@ -1262,30 +1462,30 @@ function generateSystem(ctx) {
 
 // src/messages.ts
 var import_logger3 = require("@pandacss/logger");
-var import_outdent20 = require("outdent");
+var import_outdent23 = require("outdent");
 var tick = import_logger3.colors.green().bold("\u2714\uFE0F");
 function artifactsGeneratedMessage(ctx) {
   return [
-    import_outdent20.outdent`
+    import_outdent23.outdent`
       ${tick} ${(0, import_logger3.quote)(ctx.outdir, "/css")}: the css function to author styles
     `,
-    ctx.hasTokens && import_outdent20.outdent`
+    ctx.hasTokens && import_outdent23.outdent`
       ${tick} ${(0, import_logger3.quote)(ctx.outdir, "/tokens")}: the css variables and js function to query your tokens
     `,
-    ctx.hasPattern && import_outdent20.outdent`
+    ctx.hasPattern && import_outdent23.outdent`
       ${tick} ${(0, import_logger3.quote)(ctx.outdir, "/patterns")}: functions to implement common css patterns
     `,
-    ctx.hasRecipes && import_outdent20.outdent`
+    ctx.hasRecipes && import_outdent23.outdent`
       ${tick} ${(0, import_logger3.quote)(ctx.outdir, "/recipes")}: functions to create multi-variant styles
     `,
-    ctx.jsxFramework && import_outdent20.outdent`
+    ctx.jsxFramework && import_outdent23.outdent`
       ${tick} ${(0, import_logger3.quote)(ctx.outdir, "/jsx")}: style prop powered elements for ${ctx.jsxFramework}
     `,
     "\n"
   ].filter(Boolean).join("\n");
 }
 function configExistsMessage(cmd) {
-  return import_outdent20.outdent`
+  return import_outdent23.outdent`
       \n
       It looks like you already have panda created\`.
       
@@ -1294,7 +1494,7 @@ function configExistsMessage(cmd) {
       `;
 }
 function thankYouMessage() {
-  return import_outdent20.outdent`
+  return import_outdent23.outdent`
 
   🚀 Thanks for choosing ${import_logger3.colors.cyan("Panda")} to write your css.
 
@@ -1306,7 +1506,7 @@ var randomWords = ["Sweet", "Divine", "Pandalicious", "Super"];
 var pickRandom = (arr) => arr[Math.floor(Math.random() * arr.length)];
 function scaffoldCompleteMessage() {
   return import_logger3.logger.box(
-    import_outdent20.outdent`
+    import_outdent23.outdent`
 
   ${import_logger3.colors.bold().cyan("Next steps:")}
   
@@ -1932,7 +2132,7 @@ async function generate5(config, configPath) {
 var import_logger8 = require("@pandacss/logger");
 var import_fs_extra4 = require("fs-extra");
 var import_look_it_up3 = require("look-it-up");
-var import_outdent21 = require("outdent");
+var import_outdent24 = require("outdent");
 var import_path7 = require("path");
 var import_preferred_pm2 = __toESM(require("preferred-pm"));
 async function setupConfig(cwd, { force }) {
@@ -1946,7 +2146,7 @@ async function setupConfig(cwd, { force }) {
   if (!force && configFile) {
     import_logger8.logger.warn("config exists", configExistsMessage(cmd));
   } else {
-    const content = import_outdent21.outdent`
+    const content = import_outdent24.outdent`
        import { defineConfig } from "css-panda"
 
        export default defineConfig({
@@ -1972,7 +2172,7 @@ async function setupConfig(cwd, { force }) {
 }
 async function setupPostcss(cwd) {
   import_logger8.logger.info({ type: "init", msg: `creating postcss config file: ${(0, import_logger8.quote)("postcss.config.cjs")}` });
-  const content = import_outdent21.outdent`
+  const content = import_outdent24.outdent`
   module.exports = {
     plugins: {
       'css-panda/postcss': {},