@pandacss/generator 0.0.0-dev-20230505185444 → 0.0.0-dev-20230506210137

package/dist/index.js

@@ -127,7 +127,7 @@ var getMessages = (ctx) => ({
 var import_lil_fp4 = require("lil-fp");
 
 // src/artifacts/index.ts
-var import_outdent30 = __toESM(require("outdent"));
+var import_outdent25 = __toESM(require("outdent"));
 
 // src/artifacts/css/keyframe-css.ts
 var import_core = require("@pandacss/core");
@@ -152,45 +152,9 @@ function generateKeyframeCss(ctx) {
   return rule.toString();
 }
 
-// src/artifacts/css/layout-grid-css.ts
-var import_outdent2 = require("outdent");
-var css = String.raw;
-var layoutGrid = css`
-  .panda-layout-grid {
-    display: grid;
-    gap: var(--gutter);
-    grid-template-columns: repeat(var(--count), 1fr);
-    height: 100%;
-    width: 100%;
-    position: absolute;
-    inset: 0;
-    pointer-events: none;
-    max-width: var(--max-width);
-    margin-inline: var(--margin-x);
-    padding-inline: var(--padding-x);
-  }
-  .panda-layout-grid__item {
-    display: flex;
-    --color: rgba(255, 0, 0, 0.1);
-    height: 100%;
-  }
-  .panda-layout-grid__item[data-variant='bg'] {
-    background: var(--color);
-  }
-  .panda-layout-grid__item[data-variant='outline'] {
-    border-inline: 1px solid var(--color);
-  }
-`;
-function generateLayoutGridCss() {
-  return import_outdent2.outdent`
-  @layer base {
-      ${layoutGrid}
-  }`;
-}
-
 // src/artifacts/css/reset-css.ts
-var css2 = String.raw;
-var reset = css2`
+var css = String.raw;
+var reset = css`
   * {
     margin: 0;
   }
@@ -309,11 +273,11 @@ function generateTokenCss(ctx) {
     if (Object.keys(varsObj).length === 0)
       continue;
     if (key === "base") {
-      const { css: css4 } = (0, import_core2.toCss)({ [root]: varsObj });
-      results.push(css4);
+      const { css: css3 } = (0, import_core2.toCss)({ [root]: varsObj });
+      results.push(css3);
     } else {
       const keys = key.split(":");
-      const { css: css4 } = (0, import_core2.toCss)(varsObj);
+      const { css: css3 } = (0, import_core2.toCss)(varsObj);
       const mapped = keys.map((key2) => conditions.get(key2)).filter(Boolean).map((condition) => {
         const parent = (0, import_core2.extractParentSelectors)(condition);
         return parent ? `&${parent}` : condition;
@@ -321,13 +285,13 @@ function generateTokenCss(ctx) {
       const rule = getDeepestRule(root, mapped);
       if (!rule)
         continue;
-      getDeepestNode(rule)?.append(css4);
+      getDeepestNode(rule)?.append(css3);
       results.push((0, import_core2.expandNestedCss)(rule.toString()));
     }
   }
-  const css3 = results.join("\n\n");
+  const css2 = results.join("\n\n");
   return `@layer tokens {
-    ${(0, import_core2.prettifyCss)(cleanupSelectors(css3, root))}
+    ${(0, import_core2.prettifyCss)(cleanupSelectors(css2, root))}
   }
   `;
 }
@@ -351,8 +315,8 @@ function getDeepestNode(node) {
   }
   return node;
 }
-function cleanupSelectors(css3, varSelector) {
-  const root = import_postcss2.default.parse(css3);
+function cleanupSelectors(css2, varSelector) {
+  const root = import_postcss2.default.parse(css2);
   root.walkRules((rule) => {
     rule.selectors.forEach((selector) => {
       const res = selector.split(varSelector).filter(Boolean);
@@ -365,11 +329,11 @@ function cleanupSelectors(css3, varSelector) {
 }
 
 // src/artifacts/js/conditions.ts
-var import_outdent3 = __toESM(require("outdent"));
+var import_outdent2 = __toESM(require("outdent"));
 function generateConditions(ctx) {
   const keys = Object.keys(ctx.conditions.values).concat("base");
   return {
-    js: import_outdent3.default`
+    js: import_outdent2.default`
     ${ctx.file.import("withoutSpace", "../helpers")}
 
     const conditions = new Set([${keys.map((key) => JSON.stringify(key))}])
@@ -404,7 +368,7 @@ function generateConditions(ctx) {
         })
       }
       `,
-    dts: import_outdent3.default`
+    dts: import_outdent2.default`
     import type { AnySelector, Selectors } from './selectors'
 
     export type Conditions = {
@@ -435,7 +399,7 @@ function generateConditions(ctx) {
 }
 
 // src/artifacts/js/css-fn.ts
-var import_outdent4 = require("outdent");
+var import_outdent3 = require("outdent");
 var stringify = (v) => JSON.stringify(Object.fromEntries(v), null, 2);
 function generateCssFn(ctx) {
   const {
@@ -445,11 +409,11 @@ function generateCssFn(ctx) {
   } = ctx;
   const { separator } = utility;
   return {
-    dts: import_outdent4.outdent`
+    dts: import_outdent3.outdent`
     import type { SystemStyleObject } from '../types'
     export declare function css(styles: SystemStyleObject): string
     `,
-    js: import_outdent4.outdent`
+    js: import_outdent3.outdent`
     ${ctx.file.import("createCss, createMergeCss, hypenateProperty, withoutSpace", "../helpers")}
     ${ctx.file.import("sortConditions, finalizeConditions", "./conditions")}
 
@@ -493,10 +457,10 @@ function generateCssFn(ctx) {
 }
 
 // src/artifacts/js/cva.ts
-var import_outdent5 = require("outdent");
+var import_outdent4 = require("outdent");
 function generateCvaFn(ctx) {
   return {
-    js: import_outdent5.outdent`
+    js: import_outdent4.outdent`
     ${ctx.file.import("compact", "../helpers")}
     ${ctx.file.import("css, mergeCss", "./css")}
 
@@ -554,7 +518,7 @@ function generateCvaFn(ctx) {
     }    
 
     `,
-    dts: import_outdent5.outdent`
+    dts: import_outdent4.outdent`
     import type { RecipeCreatorFn } from '../types/recipe'
 
     export declare const cva: RecipeCreatorFn
@@ -566,10 +530,10 @@ function generateCvaFn(ctx) {
 }
 
 // src/artifacts/js/cx.ts
-var import_outdent6 = __toESM(require("outdent"));
+var import_outdent5 = __toESM(require("outdent"));
 function generateCx() {
   return {
-    js: import_outdent6.default`
+    js: import_outdent5.default`
     function cx() {
       let str = '',
         i = 0,
@@ -586,7 +550,7 @@ function generateCx() {
    
     export { cx }
   `,
-    dts: import_outdent6.default`
+    dts: import_outdent5.default`
        type Argument = string | boolean | null | undefined
 
        /** Conditionally join classNames into a single string */
@@ -596,7 +560,7 @@ function generateCx() {
 }
 
 // src/artifacts/js/helpers.ts
-var import_outdent7 = require("outdent");
+var import_outdent6 = require("outdent");
 
 // src/artifacts/generated/helpers.mjs.json
 var helpers_mjs_default = {
@@ -606,7 +570,7 @@ var helpers_mjs_default = {
 // src/artifacts/js/helpers.ts
 function generateHelpers() {
   return {
-    js: import_outdent7.outdent`
+    js: import_outdent6.outdent`
   ${helpers_mjs_default.content}
 
   export function __spreadValues(a, b){
@@ -640,7 +604,7 @@ function generateisValidProp(ctx) {
 // src/artifacts/js/pattern.ts
 var import_shared = require("@pandacss/shared");
 var import_javascript_stringify = require("javascript-stringify");
-var import_outdent8 = require("outdent");
+var import_outdent7 = require("outdent");
 var import_ts_pattern = require("ts-pattern");
 function generatePattern(ctx) {
   if (ctx.patterns.isEmpty())
@@ -658,7 +622,7 @@ function generatePattern(ctx) {
     }
     return {
       name: dashName,
-      dts: import_outdent8.outdent`
+      dts: import_outdent7.outdent`
       import type { SystemStyleObject, ConditionalValue } from '../types'
       import type { PropertyValue } from '../types/prop-type'
       import type { Properties } from '../types/csstype'
@@ -682,7 +646,7 @@ function generatePattern(ctx) {
       }).join("\n	")}
       }
 
-      ${strict ? import_outdent8.outdent`export declare function ${name}(options: ${upperName}Properties): string` : import_outdent8.outdent`
+      ${strict ? import_outdent7.outdent`export declare function ${name}(options: ${upperName}Properties): string` : import_outdent7.outdent`
 
           type ${upperName}Options = ${upperName}Properties & Omit<SystemStyleObject, keyof ${upperName}Properties ${blocklistType}>
 
@@ -691,7 +655,7 @@ function generatePattern(ctx) {
           `}
 
      `,
-      js: import_outdent8.outdent`
+      js: import_outdent7.outdent`
     ${ctx.file.import(helperImports.join(", "), "../helpers")}
     ${ctx.file.import("css", "../css/index")}
 
@@ -708,7 +672,7 @@ transform`)}
 
 // src/artifacts/js/recipe.ts
 var import_shared2 = require("@pandacss/shared");
-var import_outdent9 = require("outdent");
+var import_outdent8 = require("outdent");
 var stringify3 = (value) => JSON.stringify(value, null, 2);
 function generateRecipes(ctx) {
   const {
@@ -721,7 +685,7 @@ function generateRecipes(ctx) {
   const createRecipeFn = {
     name: "create-recipe",
     dts: "",
-    js: import_outdent9.outdent`
+    js: import_outdent8.outdent`
    ${ctx.file.import("css", "../css/css")}
    ${ctx.file.import("assertCompoundVariant, getCompoundVariantCss", "../css/cva")}
    ${ctx.file.import("cx", "../css/cx")}
@@ -768,7 +732,7 @@ function generateRecipes(ctx) {
       const { name, description, defaultVariants, compoundVariants } = config;
       return {
         name: dashName,
-        js: import_outdent9.outdent`
+        js: import_outdent8.outdent`
         ${ctx.file.import("splitProps", "../helpers")}
         ${ctx.file.import("createRecipe", "./create-recipe")}
 
@@ -781,7 +745,7 @@ function generateRecipes(ctx) {
         const variantKeys = ${stringify3(Object.keys(variantKeyMap))}
         ${name}.splitVariantProps = (props) => splitProps(props, variantKeys)
         `,
-        dts: import_outdent9.outdent`
+        dts: import_outdent8.outdent`
         import type { ConditionalValue } from '../types'
         import type { Pretty } from '../types/helpers'
 
@@ -812,7 +776,7 @@ function generateRecipes(ctx) {
 }
 
 // src/artifacts/js/token.ts
-var import_outdent10 = __toESM(require("outdent"));
+var import_outdent9 = __toESM(require("outdent"));
 function generateTokenJs(ctx) {
   const { tokens } = ctx;
   const map = /* @__PURE__ */ new Map();
@@ -823,7 +787,7 @@ function generateTokenJs(ctx) {
   });
   const obj = Object.fromEntries(map);
   return {
-    js: import_outdent10.default`
+    js: import_outdent9.default`
   const tokens = ${JSON.stringify(obj, null, 2)}
 
   export function token(path, fallback) {
@@ -836,7 +800,7 @@ function generateTokenJs(ctx) {
 
   token.var = tokenVar
   `,
-    dts: import_outdent10.default`
+    dts: import_outdent9.default`
   import type { Token } from '../types/tokens'
 
   export declare const token: {
@@ -848,11 +812,11 @@ function generateTokenJs(ctx) {
 }
 
 // src/artifacts/preact-jsx/jsx.ts
-var import_outdent11 = require("outdent");
+var import_outdent10 = require("outdent");
 function generatePreactJsxFactory(ctx) {
   const { factoryName, componentName } = ctx.jsx;
   return {
-    js: import_outdent11.outdent`
+    js: import_outdent10.outdent`
     import { h } from 'preact'
     import { forwardRef } from 'preact/compat'
     import { useMemo } from 'preact/hooks'
@@ -910,53 +874,8 @@ function generatePreactJsxFactory(ctx) {
   };
 }
 
-// src/artifacts/preact-jsx/layout-grid.ts
-var import_outdent12 = require("outdent");
-function generatePreactLayoutGrid() {
-  return {
-    dts: import_outdent12.outdent`
-    import { FunctionComponent } from 'preact'
-
-    export type LayoutGridProps = {
-      count?: number
-      gutter?: string
-      maxWidth?: string
-      margin?: string
-      outline?: boolean
-    }
-
-    export declare const LayoutGrid: FunctionComponent<LayoutGridProps>
-    `,
-    js: import_outdent12.outdent`
-    import { h } from 'preact'
-
-    export function LayoutGrid(props) {
-      const { count = 12, margin, gutter = '24px', maxWidth, outline } = props
-      const hasMaxWidth = maxWidth != null
-      return h('div', {
-        className: 'panda-layout-grid',
-        style: {
-          '--gutter': gutter,
-          '--count': count,
-          '--max-width': hasMaxWidth ? maxWidth : 'initial',
-          '--margin-x': hasMaxWidth ? 'auto' : undefined,
-          '--padding-x': !hasMaxWidth ? margin : undefined,
-        },
-        children: Array.from({ length: count }).map((_, i) =>
-        h('span', {
-            'data-variant': outline ? 'outline' : 'bg',
-            key: i,
-            className: 'panda-layout-grid__item',
-          }),
-        ),
-      });
-    }
-    `
-  };
-}
-
 // src/artifacts/preact-jsx/pattern.ts
-var import_outdent13 = require("outdent");
+var import_outdent11 = require("outdent");
 var import_ts_pattern2 = require("ts-pattern");
 function generatePreactJsxPattern(ctx) {
   const { typeName, factoryName } = ctx.jsx;
@@ -965,7 +884,7 @@ function generatePreactJsxPattern(ctx) {
     const { description, jsxElement = "div" } = pattern.config;
     return {
       name: dashName,
-      js: import_outdent13.outdent`
+      js: import_outdent11.outdent`
       import { h } from 'preact'
       import { forwardRef } from 'preact/compat'
       ${ctx.file.import(factoryName, "./factory")}
@@ -974,11 +893,11 @@ function generatePreactJsxPattern(ctx) {
       export const ${jsxName} = forwardRef(function ${jsxName}(props, ref) {
         ${(0, import_ts_pattern2.match)(props.length).with(
         0,
-        () => import_outdent13.outdent`
+        () => import_outdent11.outdent`
             return h(${factoryName}.${jsxElement}, { ref, ...props })
           `
       ).otherwise(
-        () => import_outdent13.outdent`
+        () => import_outdent11.outdent`
           const { ${props.join(", ")}, ...restProps } = props
           const styleProps = ${styleFnName}({${props.join(", ")}})
           return h(${factoryName}.${jsxElement}, { ref, ...styleProps, ...restProps })
@@ -986,7 +905,7 @@ function generatePreactJsxPattern(ctx) {
       )}
       })    
       `,
-      dts: import_outdent13.outdent`
+      dts: import_outdent11.outdent`
       import type { FunctionComponent } from 'preact'
       import type { ${upperName}Properties } from '../patterns/${dashName}'
       import type { ${typeName} } from '../types/jsx'
@@ -1001,15 +920,15 @@ function generatePreactJsxPattern(ctx) {
 }
 
 // src/artifacts/preact-jsx/types.ts
-var import_outdent14 = require("outdent");
+var import_outdent12 = require("outdent");
 function generatePreactJsxTypes(ctx) {
   const { factoryName, componentName, upperName, typeName } = ctx.jsx;
   return {
-    jsxFactory: import_outdent14.outdent`
+    jsxFactory: import_outdent12.outdent`
 import type { ${upperName} } from '../types/jsx'
 export declare const ${factoryName}: ${upperName}
     `,
-    jsxType: import_outdent14.outdent`
+    jsxType: import_outdent12.outdent`
 import type { JSX, ComponentProps } from 'preact'
 import type { JsxStyleProps, JsxHTMLProps } from './system-types'
 import type { RecipeDefinition, RecipeRuntimeFn, RecipeSelection, RecipeVariantRecord } from './recipe'
@@ -1033,11 +952,11 @@ export type ${typeName}<T extends ElementType> = JsxHTMLProps<ComponentProps<T>,
 }
 
 // src/artifacts/react-jsx/jsx.ts
-var import_outdent15 = require("outdent");
+var import_outdent13 = require("outdent");
 function generateReactJsxFactory(ctx) {
   const { factoryName, componentName } = ctx.jsx;
   return {
-    js: import_outdent15.outdent`
+    js: import_outdent13.outdent`
     import { createElement, forwardRef, useMemo } from 'react'
     ${ctx.file.import("css, cx, cva, assignCss", "../css/index")}
     ${ctx.file.import("splitProps, normalizeHTMLProps", "../helpers")}
@@ -1094,53 +1013,8 @@ function generateReactJsxFactory(ctx) {
   };
 }
 
-// src/artifacts/react-jsx/layout-grid.ts
-var import_outdent16 = require("outdent");
-function generateReactLayoutGrid() {
-  return {
-    dts: import_outdent16.outdent`
-    import type { FunctionComponent } from 'react'
-
-    export type LayoutGridProps = {
-      count?: number
-      gutter?: string
-      maxWidth?: string
-      margin?: string
-      outline?: boolean
-    }
-
-    export declare const LayoutGrid: FunctionComponent<LayoutGridProps>
-    `,
-    js: import_outdent16.outdent`
-    import { createElement } from 'react'
-
-    export function LayoutGrid(props) {
-      const { count = 12, margin, gutter = '24px', maxWidth, outline } = props
-      const hasMaxWidth = maxWidth != null
-      return createElement('div', {
-        className: 'panda-layout-grid',
-        style: {
-          '--gutter': gutter,
-          '--count': count,
-          '--max-width': hasMaxWidth ? maxWidth : 'initial',
-          '--margin-x': hasMaxWidth ? 'auto' : undefined,
-          '--padding-x': !hasMaxWidth ? margin : undefined,
-        },
-        children: Array.from({ length: count }).map((_, i) =>
-          createElement('span', {
-            'data-variant': outline ? 'outline' : 'bg',
-            key: i,
-            className: 'panda-layout-grid__item',
-          }),
-        ),
-      })
-    }
-    `
-  };
-}
-
 // src/artifacts/react-jsx/pattern.ts
-var import_outdent17 = require("outdent");
+var import_outdent14 = require("outdent");
 var import_ts_pattern3 = require("ts-pattern");
 function generateReactJsxPattern(ctx) {
   const { typeName, factoryName } = ctx.jsx;
@@ -1149,7 +1023,7 @@ function generateReactJsxPattern(ctx) {
     const { description, jsxElement = "div" } = pattern.config;
     return {
       name: dashName,
-      js: import_outdent17.outdent`
+      js: import_outdent14.outdent`
       import { createElement, forwardRef } from 'react'
       ${ctx.file.import(factoryName, "./factory")}
       ${ctx.file.import(styleFnName, `../patterns/${dashName}`)}
@@ -1157,11 +1031,11 @@ function generateReactJsxPattern(ctx) {
       export const ${jsxName} = forwardRef(function ${jsxName}(props, ref) {
         ${(0, import_ts_pattern3.match)(props.length).with(
         0,
-        () => import_outdent17.outdent`
+        () => import_outdent14.outdent`
         return createElement(${factoryName}.${jsxElement}, { ref, ...props })
           `
       ).otherwise(
-        () => import_outdent17.outdent`
+        () => import_outdent14.outdent`
         const { ${props.join(", ")}, ...restProps } = props
         const styleProps = ${styleFnName}({${props.join(", ")}})
         return createElement(${factoryName}.${jsxElement}, { ref, ...styleProps, ...restProps })
@@ -1169,7 +1043,7 @@ function generateReactJsxPattern(ctx) {
       )}
       })    
       `,
-      dts: import_outdent17.outdent`
+      dts: import_outdent14.outdent`
       import type { FunctionComponent } from 'react'
       import type { ${upperName}Properties } from '../patterns/${dashName}'
       import type { ${typeName} } from '../types/jsx'
@@ -1184,15 +1058,15 @@ function generateReactJsxPattern(ctx) {
 }
 
 // src/artifacts/react-jsx/types.ts
-var import_outdent18 = require("outdent");
+var import_outdent15 = require("outdent");
 function generateReactJsxTypes(ctx) {
   const { factoryName, componentName, upperName, typeName } = ctx.jsx;
   return {
-    jsxFactory: import_outdent18.outdent`
+    jsxFactory: import_outdent15.outdent`
 import { ${upperName} } from '../types/jsx'
 export declare const ${factoryName}: ${upperName}
     `,
-    jsxType: import_outdent18.outdent`
+    jsxType: import_outdent15.outdent`
 import type { ElementType, ComponentProps } from 'react'
 import type { JsxStyleProps, JsxHTMLProps } from './system-types'
 import type { RecipeDefinition, RecipeRuntimeFn, RecipeSelection, RecipeVariantRecord } from './recipe'
@@ -1214,11 +1088,11 @@ export type ${typeName}<T extends ElementType> = JsxHTMLProps<ComponentProps<T>,
 }
 
 // src/artifacts/solid-jsx/jsx.ts
-var import_outdent19 = require("outdent");
+var import_outdent16 = require("outdent");
 function generateSolidJsxFactory(ctx) {
   const { componentName, factoryName } = ctx.jsx;
   return {
-    js: import_outdent19.outdent`
+    js: import_outdent16.outdent`
     import { Dynamic } from 'solid-js/web'
     import { mergeProps, splitProps } from 'solid-js'
     import { createComponent } from 'solid-js/web'
@@ -1286,59 +1160,8 @@ function generateSolidJsxFactory(ctx) {
   };
 }
 
-// src/artifacts/solid-jsx/layout-grid.ts
-var import_outdent20 = require("outdent");
-function generateSolidLayoutGrid() {
-  return {
-    dts: import_outdent20.outdent`
-    import type { ParentProps } from 'solid-js'
-    
-    export type LayoutGridProps = {
-      count?: number
-      gutter?: string
-      maxWidth?: string
-      margin?: string
-      outline?: boolean
-    }
-
-    export declare const LayoutGrid: ParentProps<LayoutGridProps>
-    `,
-    js: import_outdent20.outdent`
-    import { createComponent, For } from 'solid-js/web'
-
-    export function LayoutGrid(props) {
-      const { count = 12, margin, gutter = '24px', maxWidth, outline } = props
-      const hasMaxWidth = maxWidth != null
-      return createComponent('div', {
-        className: 'panda-layout-grid',
-        style: {
-          '--gutter': gutter,
-          '--count': count,
-          '--max-width': hasMaxWidth ? maxWidth : 'initial',
-          '--margin-x': hasMaxWidth ? 'auto' : undefined,
-          '--padding-x': !hasMaxWidth ? margin : undefined,
-        },
-        get children() {
-          return createComponent(For, {
-            get each() {
-              return Array.from({ length: count })
-            },
-            children: () =>
-              createComponent('span', {
-                'data-variant': outline ? 'outline' : 'bg',
-                className: 'panda-layout-grid__item',
-              }),
-          })
-        },
-      })
-    }
-    
-    `
-  };
-}
-
 // src/artifacts/solid-jsx/pattern.ts
-var import_outdent21 = require("outdent");
+var import_outdent17 = require("outdent");
 var import_ts_pattern4 = require("ts-pattern");
 function generateSolidJsxPattern(ctx) {
   const { typeName, factoryName } = ctx.jsx;
@@ -1347,7 +1170,7 @@ function generateSolidJsxPattern(ctx) {
     const { description, jsxElement = "div" } = pattern.config;
     return {
       name: dashName,
-      js: import_outdent21.outdent`
+      js: import_outdent17.outdent`
     import { splitProps, mergeProps } from 'solid-js'
     import { createComponent } from 'solid-js/web'
     ${ctx.file.import(factoryName, "./factory")}
@@ -1356,11 +1179,11 @@ function generateSolidJsxPattern(ctx) {
     export function ${jsxName}(props) {
       ${(0, import_ts_pattern4.match)(props.length).with(
         0,
-        () => import_outdent21.outdent`
+        () => import_outdent17.outdent`
           return createComponent(${factoryName}.${jsxElement}, props)
         `
       ).otherwise(
-        () => import_outdent21.outdent`
+        () => import_outdent17.outdent`
           const [patternProps, restProps] = splitProps(props, [${props.map((v) => JSON.stringify(v)).join(", ")}]);
           const styleProps = ${styleFnName}(patternProps)
           return createComponent(${factoryName}.${jsxElement}, mergeProps(styleProps, restProps))
@@ -1368,7 +1191,7 @@ function generateSolidJsxPattern(ctx) {
       )}
     }
     `,
-      dts: import_outdent21.outdent`
+      dts: import_outdent17.outdent`
     import { Component } from 'solid-js'
     import { ${upperName}Properties } from '../patterns/${dashName}'
     import { ${typeName} } from '../types/jsx'
@@ -1383,15 +1206,15 @@ function generateSolidJsxPattern(ctx) {
 }
 
 // src/artifacts/solid-jsx/types.ts
-var import_outdent22 = require("outdent");
+var import_outdent18 = require("outdent");
 function generateSolidJsxTypes(ctx) {
   const { factoryName, componentName, upperName, typeName } = ctx.jsx;
   return {
-    jsxFactory: import_outdent22.outdent`
+    jsxFactory: import_outdent18.outdent`
 import type { ${upperName} } from '../types/jsx'
 export declare const ${factoryName}: ${upperName}
     `,
-    jsxType: import_outdent22.outdent`
+    jsxType: import_outdent18.outdent`
 import type { JSX, ComponentProps, Component } from 'solid-js'
 import type { JsxStyleProps, JsxHTMLProps } from './system-types'
 import type { RecipeDefinition, RecipeRuntimeFn, RecipeSelection, RecipeVariantRecord } from './recipe'
@@ -1415,11 +1238,11 @@ export type ${typeName}<T extends ElementType> = JsxHTMLProps<ComponentProps<T>,
 }
 
 // src/artifacts/vue-jsx/jsx.ts
-var import_outdent23 = require("outdent");
+var import_outdent19 = require("outdent");
 function generateVueJsxFactory(ctx) {
   const { factoryName } = ctx.jsx;
   return {
-    js: import_outdent23.outdent`
+    js: import_outdent19.outdent`
     import { defineComponent, h, computed } from 'vue'
     ${ctx.file.import("css, cx, cva, assignCss", "../css/index")}
     ${ctx.file.import("splitProps, normalizeHTMLProps", "../helpers")}
@@ -1483,87 +1306,16 @@ function generateVueJsxFactory(ctx) {
   };
 }
 
-// src/artifacts/vue-jsx/layout-grid.ts
-var import_outdent24 = require("outdent");
-function generateVueLayoutGrid() {
-  return {
-    dts: import_outdent24.outdent`
-    import type { FunctionalComponent } from 'vue'
-    
-    export type LayoutGridProps = {
-      count?: number
-      gutter?: string
-      maxWidth?: string
-      margin?: string
-      outline?: boolean
-    }
-
-    export declare const LayoutGrid: FunctionalComponent<LayoutGridProps>
-    `,
-    js: import_outdent24.outdent`
-    import { h, computed, defineComponent } from 'vue'
-
-    export const LayoutGrid = defineComponent({
-        name: 'LayoutGrid',
-        props: {
-            count: {
-            type: Number,
-            default: 12,
-            },
-            margin: String,
-            gutter: {
-            type: String,
-            default: '24px',
-            },
-            maxWidth: String,
-            outline: Boolean,
-        },
-        setup(props) {
-            const hasMaxWidthRef = computed(() => props.maxWidth != null)
-            const variantRef = computed(() => (props.outline ? 'outline' : 'default'))
-            return () => {
-            const { count, margin, gutter, maxWidth } = props
-            const hasMaxWidth = hasMaxWidthRef.value
-            const variant = variantRef.value
-        
-            return h(
-                'div',
-                {
-                class: 'panda-layout-grid',
-                style: {
-                    '--gutter': gutter,
-                    '--count': count,
-                    '--max-width': hasMaxWidth ? maxWidth : 'initial',
-                    '--margin-x': hasMaxWidth ? 'auto' : undefined,
-                    '--padding-x': !hasMaxWidth ? margin : undefined,
-                },
-                },
-                Array.from({ length: count }, (_, i) => {
-                return h('span', {
-                    'data-variant': variant,
-                    key: i,
-                    class: 'panda-layout-grid__item',
-                })
-                }),
-            )
-            }
-        },
-      })      
-    
-    `
-  };
-}
-
 // src/artifacts/vue-jsx/types.ts
-var import_outdent25 = require("outdent");
+var import_outdent20 = require("outdent");
 function generateVueJsxTypes(ctx) {
   const { factoryName, componentName, upperName, typeName } = ctx.jsx;
   return {
-    jsxFactory: import_outdent25.outdent`
+    jsxFactory: import_outdent20.outdent`
 import { ${upperName} } from '../types/jsx'
 export declare const ${factoryName}: ${upperName}
     `,
-    jsxType: import_outdent25.outdent`
+    jsxType: import_outdent20.outdent`
 import type { Component, FunctionalComponent } from 'vue'
 import type { JsxStyleProps, JsxHTMLProps } from './system-types'
 import type { RecipeDefinition, RecipeRuntimeFn, RecipeSelection, RecipeVariantRecord } from './recipe'
@@ -1742,17 +1494,6 @@ function generateJsxPatterns(ctx) {
     return [];
   return patternMap[ctx.jsx.framework](ctx);
 }
-var layoutGridMap = {
-  react: generateReactLayoutGrid,
-  preact: generatePreactLayoutGrid,
-  solid: generateSolidLayoutGrid,
-  vue: generateVueLayoutGrid
-};
-function generateLayoutGrid(ctx) {
-  if (!ctx.jsx.framework)
-    return;
-  return layoutGridMap[ctx.jsx.framework]();
-}
 
 // src/artifacts/pkg-json.ts
 function generatePackageJson(ctx) {
@@ -1843,9 +1584,9 @@ function getGeneratedTypes() {
 }
 
 // src/artifacts/types/main.ts
-var import_outdent26 = require("outdent");
+var import_outdent21 = require("outdent");
 var generateTypesEntry = () => ({
-  global: import_outdent26.outdent`
+  global: import_outdent21.outdent`
     import { AnyRecipeConfig, RecipeVariantRecord, RecipeConfig } from './recipe'
     import { Parts } from './parts'
     import { AnyPatternConfig, PatternConfig } from './pattern'
@@ -1861,19 +1602,19 @@ var generateTypesEntry = () => ({
       export function defineParts<T extends Parts>(parts: T): (config: Partial<Record<keyof T, SystemStyleObject>>) => Partial<Record<keyof T, SystemStyleObject>>;
     }
     `,
-  index: import_outdent26.outdent`
+  index: import_outdent21.outdent`
     import './global'
     export { ConditionalValue } from './conditions'
     export { GlobalStyleObject, JsxStyleProps, SystemStyleObject } from './system-types'
 
     `,
-  helpers: import_outdent26.outdent`
+  helpers: import_outdent21.outdent`
   export type Pretty<T> = T extends infer U ? { [K in keyof U]: U[K] } : never
   `
 });
 
 // src/artifacts/types/prop-types.ts
-var import_outdent27 = require("outdent");
+var import_outdent22 = require("outdent");
 function generatePropTypes(ctx) {
   const {
     config: { strictTokens },
@@ -1881,7 +1622,7 @@ function generatePropTypes(ctx) {
   } = ctx;
   const strictText = `${strictTokens ? "" : " | CssValue<T>"}`;
   const result = [
-    import_outdent27.outdent`
+    import_outdent22.outdent`
     import type { ConditionalValue } from './conditions';
     import type { CssProperties } from './system-types'
     import type { Tokens } from './tokens'
@@ -1904,7 +1645,7 @@ function generatePropTypes(ctx) {
     result.push(`	${key}: Shorthand<${JSON.stringify(value)}>;`);
   });
   result.push("}");
-  return import_outdent27.outdent`
+  return import_outdent22.outdent`
   ${result.join("\n")}
 
   export type PropertyValue<T extends string> = T extends keyof PropertyTypes
@@ -1917,10 +1658,10 @@ function generatePropTypes(ctx) {
 
 // src/artifacts/types/style-props.ts
 var import_is_valid_prop = require("@pandacss/is-valid-prop");
-var import_outdent28 = __toESM(require("outdent"));
+var import_outdent23 = __toESM(require("outdent"));
 function generateStyleProps(ctx) {
   const props = new Set(import_is_valid_prop.allCssProperties.concat(ctx.utility.keys()));
-  return import_outdent28.default`
+  return import_outdent23.default`
     import { ConditionalValue } from './conditions'
     import { PropertyValue } from './prop-type'
     import { Token } from './tokens'
@@ -1937,7 +1678,7 @@ function generateStyleProps(ctx) {
 
 // src/artifacts/types/token-types.ts
 var import_shared3 = require("@pandacss/shared");
-var import_outdent29 = require("outdent");
+var import_outdent24 = require("outdent");
 var import_pluralize = __toESM(require("pluralize"));
 var categories = [
   "zIndex",
@@ -1979,7 +1720,7 @@ function generateTokenTypes(ctx) {
   result.add("} & { [token: string]: never }");
   set.add(Array.from(result).join("\n"));
   set.add(`export type TokenCategory = ${(0, import_shared3.unionType)(categories)}`);
-  return import_outdent29.outdent.string(Array.from(set).join("\n\n"));
+  return import_outdent24.outdent.string(Array.from(set).join("\n\n"));
 }
 
 // src/artifacts/css/global-css.ts
@@ -2038,8 +1779,8 @@ var generateStaticCss = (ctx) => {
     // @ts-ignore
     getRecipeKeys: (recipe) => recipes.details[recipe]
   });
-  results.css.forEach((css3) => {
-    sheet.processAtomic(css3);
+  results.css.forEach((css2) => {
+    sheet.processAtomic(css2);
   });
   results.recipes.forEach((result) => {
     Object.entries(result).forEach(([name, value]) => {
@@ -2070,11 +1811,11 @@ function setupDesignTokens(ctx) {
   if (ctx.tokens.isEmpty)
     return;
   const code = generateTokenJs(ctx);
-  const css3 = generateTokenCss(ctx);
+  const css2 = generateTokenCss(ctx);
   return {
     dir: ctx.paths.token,
     files: [
-      { file: "index.css", code: css3 },
+      { file: "index.css", code: css2 },
       { file: "index.d.ts", code: code.dts },
       { file: ctx.file.ext("index"), code: code.js }
     ]
@@ -2144,8 +1885,8 @@ function setupRecipes(ctx) {
     return;
   const indexFiles = files.filter((file) => !file.name.includes("create-recipe"));
   const index = {
-    js: import_outdent30.default.string(indexFiles.map((file) => ctx.file.export(`./${file.name}`)).join("\n")),
-    dts: import_outdent30.default.string(indexFiles.map((file) => `export * from './${file.name}'`).join("\n"))
+    js: import_outdent25.default.string(indexFiles.map((file) => ctx.file.export(`./${file.name}`)).join("\n")),
+    dts: import_outdent25.default.string(indexFiles.map((file) => `export * from './${file.name}'`).join("\n"))
   };
   return {
     dir: ctx.paths.recipe,
@@ -2162,8 +1903,8 @@ function setupPatterns(ctx) {
   if (!files)
     return;
   const index = {
-    js: import_outdent30.default.string(files.map((file) => ctx.file.export(`./${file.name}`)).join("\n")),
-    dts: import_outdent30.default.string(files.map((file) => `export * from './${file.name}'`).join("\n"))
+    js: import_outdent25.default.string(files.map((file) => ctx.file.export(`./${file.name}`)).join("\n")),
+    dts: import_outdent25.default.string(files.map((file) => `export * from './${file.name}'`).join("\n"))
   };
   return {
     dir: ctx.paths.pattern,
@@ -2182,17 +1923,14 @@ function setupJsx(ctx) {
   const types = generateJsxTypes(ctx);
   const factory = generateJsxFactory(ctx);
   const patterns = generateJsxPatterns(ctx);
-  const layoutGrid2 = generateLayoutGrid(ctx);
   const index = {
-    js: import_outdent30.default`
+    js: import_outdent25.default`
   ${ctx.file.export("./factory")}
-  ${ctx.file.export("./layout-grid")}
-  ${import_outdent30.default.string(patterns.map((file) => ctx.file.export(`./${file.name}`)).join("\n"))}
+  ${import_outdent25.default.string(patterns.map((file) => ctx.file.export(`./${file.name}`)).join("\n"))}
   `,
-    dts: import_outdent30.default`
+    dts: import_outdent25.default`
   export * from './factory'
-  export * from './layout-grid'
-  ${import_outdent30.default.string(patterns.map((file) => `export * from './${file.name}'`).join("\n"))}
+  ${import_outdent25.default.string(patterns.map((file) => `export * from './${file.name}'`).join("\n"))}
   export type { ${ctx.jsx.typeName} } from '../types/jsx'
     `
   };
@@ -2201,8 +1939,6 @@ function setupJsx(ctx) {
     files: [
       ...patterns.map((file) => ({ file: ctx.file.ext(file.name), code: file.js })),
       ...patterns.map((file) => ({ file: `${file.name}.d.ts`, code: file.dts })),
-      { file: ctx.file.ext("layout-grid"), code: layoutGrid2?.js },
-      { file: "layout-grid.d.ts", code: layoutGrid2?.dts },
       { file: ctx.file.ext("is-valid-prop"), code: isValidProp.js },
       { file: "factory.d.ts", code: types.jsxFactory },
       { file: ctx.file.ext("factory"), code: factory?.js },
@@ -2213,12 +1949,12 @@ function setupJsx(ctx) {
 }
 function setupCssIndex(ctx) {
   const index = {
-    js: import_outdent30.default`
+    js: import_outdent25.default`
   ${ctx.file.export("./css")}
   ${ctx.file.export("./cx")}
   ${ctx.file.export("./cva")}
  `,
-    dts: import_outdent30.default`
+    dts: import_outdent25.default`
   export * from './css'
   export * from './cx'
   export * from './cva'
@@ -2238,10 +1974,6 @@ function setupResetCss(ctx) {
   const code = generateResetCss();
   return { files: [{ file: "reset.css", code }] };
 }
-function setupLayoutGridCss() {
-  const code = generateLayoutGridCss();
-  return { files: [{ file: "layout-grid.css", code }] };
-}
 function setupGlobalCss(ctx) {
   const code = generateGlobalCss(ctx);
   return { files: [{ file: "global.css", code }] };
@@ -2272,7 +2004,6 @@ var generateArtifacts = (ctx) => () => [
   setupGlobalCss(ctx),
   setupStaticCss(ctx),
   setupResetCss(ctx),
-  setupLayoutGridCss(),
   setupPackageJson(ctx)
 ].filter(Boolean);
 
@@ -2282,7 +2013,6 @@ var generateFlattenedCss = (ctx) => (options) => {
   const { theme: { keyframes } = {}, preflight, minify, staticCss } = ctx.config;
   const unresolved = [
     "@layer reset, base, tokens, recipes, utilities;",
-    "@import './layout-grid.css';",
     "@import './global.css';",
     staticCss && "@import './static.css';",
     preflight && "@import './reset.css';",
@@ -2291,7 +2021,6 @@ var generateFlattenedCss = (ctx) => (options) => {
   ].filter(Boolean).join("\n\n");
   const sheet = ctx.createSheet({
     content: resolve ? [
-      generateLayoutGridCss(),
       generateGlobalCss(ctx),
       generateStaticCss(ctx),
       generateResetCss(),
@@ -2311,8 +2040,8 @@ var flattenStyles = (data) => Object.assign({}, data, { css: void 0 }, data.css
 var generateParserCss = (ctx) => (result) => (0, import_func.pipe)(
   { ...ctx, sheet: ctx.createSheet(), result },
   (0, import_func.tap)(({ sheet, result: result2, patterns, recipes }) => {
-    result2.css.forEach((css3) => {
-      css3.data.forEach((data) => {
+    result2.css.forEach((css2) => {
+      css2.data.forEach((data) => {
         sheet.processAtomic(data);
       });
     });