@pandacss/generator 0.0.0-dev-20230703201107 → 0.0.0-dev-20230704200435

package/dist/index.js

@@ -130,7 +130,7 @@ var getMessages = (ctx) => ({
 
 // src/artifacts/index.ts
 var import_shared4 = require("@pandacss/shared");
-var import_outdent41 = __toESM(require("outdent"));
+var import_outdent42 = __toESM(require("outdent"));
 
 // src/artifacts/css/global-css.ts
 var generateGlobalCss = (ctx) => {
@@ -852,6 +852,7 @@ var is_valid_prop_mjs_default = {
 };
 
 // src/artifacts/js/is-valid-prop.ts
+var import_outdent9 = require("outdent");
 function generateisValidProp(ctx) {
   if (ctx.isTemplateLiteralSyntax)
     return;
@@ -861,14 +862,19 @@ function generateisValidProp(ctx) {
     `var userGenerated = [${ctx.properties.map((key) => JSON.stringify(key)).join(",")}]`
   );
   return {
-    js: content
+    js: content,
+    dts: import_outdent9.outdent`
+    declare const isCssProperty: (value: string) => boolean;
+
+    export { isCssProperty };
+    `
   };
 }
 
 // src/artifacts/js/pattern.ts
 var import_shared = require("@pandacss/shared");
 var import_javascript_stringify = require("javascript-stringify");
-var import_outdent9 = require("outdent");
+var import_outdent10 = require("outdent");
 var import_ts_pattern = require("ts-pattern");
 function generatePattern(ctx) {
   if (ctx.patterns.isEmpty())
@@ -886,7 +892,7 @@ function generatePattern(ctx) {
     }
     return {
       name: dashName,
-      dts: import_outdent9.outdent`
+      dts: import_outdent10.outdent`
       import type { SystemStyleObject, ConditionalValue } from '../types'
       import type { PropertyValue } from '../types/prop-type'
       import type { Properties } from '../types/csstype'
@@ -910,7 +916,7 @@ function generatePattern(ctx) {
       }).join("\n	")}
       }
 
-      ${strict ? import_outdent9.outdent`export declare function ${name}(options: ${upperName}Properties): string` : import_outdent9.outdent`
+      ${strict ? import_outdent10.outdent`export declare function ${name}(options: ${upperName}Properties): string` : import_outdent10.outdent`
 
           type ${upperName}Options = ${upperName}Properties & Omit<SystemStyleObject, keyof ${upperName}Properties ${blocklistType}>
 
@@ -919,7 +925,7 @@ function generatePattern(ctx) {
           `}
 
      `,
-      js: import_outdent9.outdent`
+      js: import_outdent10.outdent`
     ${ctx.file.import(helperImports.join(", "), "../helpers")}
     ${ctx.file.import("css", "../css/index")}
 
@@ -936,7 +942,7 @@ transform`)}
 
 // src/artifacts/js/recipe.ts
 var import_shared2 = require("@pandacss/shared");
-var import_outdent10 = require("outdent");
+var import_outdent11 = require("outdent");
 var stringify3 = (value) => JSON.stringify(value, null, 2);
 var isBooleanValue = (value) => value === "true" || value === "false";
 function generateRecipes(ctx) {
@@ -950,7 +956,7 @@ function generateRecipes(ctx) {
   const createRecipeFn = {
     name: "create-recipe",
     dts: "",
-    js: import_outdent10.outdent`
+    js: import_outdent11.outdent`
    ${ctx.file.import("css", "../css/css")}
    ${ctx.file.import("assertCompoundVariant, getCompoundVariantCss", "../css/cva")}
    ${ctx.file.import("cx", "../css/cx")}
@@ -997,7 +1003,7 @@ function generateRecipes(ctx) {
       const { name, description, defaultVariants, compoundVariants } = config;
       return {
         name: dashName,
-        js: import_outdent10.outdent`
+        js: import_outdent11.outdent`
         ${ctx.file.import("splitProps", "../helpers")}
         ${ctx.file.import("createRecipe", "./create-recipe")}
 
@@ -1018,7 +1024,7 @@ function generateRecipes(ctx) {
           splitVariantProps,
         })
         `,
-        dts: import_outdent10.outdent`
+        dts: import_outdent11.outdent`
         import type { ConditionalValue } from '../types'
         import type { Pretty } from '../types/helpers'
 
@@ -1056,7 +1062,7 @@ function generateRecipes(ctx) {
 }
 
 // src/artifacts/js/token.ts
-var import_outdent11 = __toESM(require("outdent"));
+var import_outdent12 = __toESM(require("outdent"));
 function generateTokenJs(ctx) {
   const { tokens } = ctx;
   const map = /* @__PURE__ */ new Map();
@@ -1067,7 +1073,7 @@ function generateTokenJs(ctx) {
   });
   const obj = Object.fromEntries(map);
   return {
-    js: import_outdent11.default`
+    js: import_outdent12.default`
   const tokens = ${JSON.stringify(obj, null, 2)}
 
   export function token(path, fallback) {
@@ -1080,7 +1086,7 @@ function generateTokenJs(ctx) {
 
   token.var = tokenVar
   `,
-    dts: import_outdent11.default`
+    dts: import_outdent12.default`
   import type { Token } from './tokens'
 
   export declare const token: {
@@ -1094,11 +1100,11 @@ function generateTokenJs(ctx) {
 }
 
 // src/artifacts/preact-jsx/jsx.ts
-var import_outdent12 = require("outdent");
+var import_outdent13 = require("outdent");
 function generatePreactJsxFactory(ctx) {
   const { factoryName, componentName } = ctx.jsx;
   return {
-    js: import_outdent12.outdent`
+    js: import_outdent13.outdent`
     import { h } from 'preact'
     import { forwardRef } from 'preact/compat'
     import { useMemo } from 'preact/hooks'
@@ -1165,7 +1171,7 @@ function generatePreactJsxFactory(ctx) {
 }
 
 // src/artifacts/preact-jsx/pattern.ts
-var import_outdent13 = require("outdent");
+var import_outdent14 = require("outdent");
 var import_ts_pattern2 = require("ts-pattern");
 function generatePreactJsxPattern(ctx) {
   const { typeName, factoryName } = ctx.jsx;
@@ -1174,7 +1180,7 @@ function generatePreactJsxPattern(ctx) {
     const { description, jsxElement = "div" } = pattern.config;
     return {
       name: dashName,
-      js: import_outdent13.outdent`
+      js: import_outdent14.outdent`
       import { h } from 'preact'
       import { forwardRef } from 'preact/compat'
       ${ctx.file.import(factoryName, "./factory")}
@@ -1183,12 +1189,12 @@ function generatePreactJsxPattern(ctx) {
       export const ${jsxName} = forwardRef(function ${jsxName}(props, ref) {
         ${(0, import_ts_pattern2.match)(props.length).with(
         0,
-        () => import_outdent13.outdent`
+        () => import_outdent14.outdent`
           const styleProps = ${styleFnName}()
           return h(${factoryName}.${jsxElement}, { ref, ...styleProps, ...props })
           `
       ).otherwise(
-        () => import_outdent13.outdent`
+        () => import_outdent14.outdent`
           const { ${props.join(", ")}, ...restProps } = props
           const styleProps = ${styleFnName}({${props.join(", ")}})
           return h(${factoryName}.${jsxElement}, { ref, ...styleProps, ...restProps })
@@ -1196,7 +1202,7 @@ function generatePreactJsxPattern(ctx) {
       )}
       })    
       `,
-      dts: import_outdent13.outdent`
+      dts: import_outdent14.outdent`
       import type { FunctionComponent } from 'preact'
       import type { ${upperName}Properties } from '../patterns/${dashName}'
       import type { ${typeName} } from '../types/jsx'
@@ -1211,15 +1217,15 @@ function generatePreactJsxPattern(ctx) {
 }
 
 // src/artifacts/preact-jsx/types.ts
-var import_outdent14 = require("outdent");
+var import_outdent15 = require("outdent");
 function generatePreactJsxTypes(ctx) {
   const { factoryName, componentName, upperName, typeName } = ctx.jsx;
   return {
-    jsxFactory: import_outdent14.outdent`
+    jsxFactory: import_outdent15.outdent`
 import type { ${upperName} } from '../types/jsx'
 export declare const ${factoryName}: ${upperName}
     `,
-    jsxType: import_outdent14.outdent`
+    jsxType: import_outdent15.outdent`
 import type { ComponentProps, JSX } from 'preact'
 import type { Assign, JsxStyleProps, JsxHTMLProps } from './system-types'
 import type { RecipeDefinition, RecipeSelection, RecipeVariantRecord } from './recipe'
@@ -1254,11 +1260,11 @@ export type ${typeName}<T extends ElementType> = JsxHTMLProps<ComponentProps<T>,
 }
 
 // src/artifacts/preact-jsx/jsx.string-literal.ts
-var import_outdent15 = require("outdent");
+var import_outdent16 = require("outdent");
 function generatePreactJsxStringLiteralFactory(ctx) {
   const { factoryName, componentName } = ctx.jsx;
   return {
-    js: import_outdent15.outdent`
+    js: import_outdent16.outdent`
     import { h } from 'preact'
     import { forwardRef } from 'preact/compat'
     ${ctx.file.import("css, cx", "../css/index")}
@@ -1304,15 +1310,15 @@ function generatePreactJsxStringLiteralFactory(ctx) {
 }
 
 // src/artifacts/preact-jsx/types.string-literal.ts
-var import_outdent16 = require("outdent");
+var import_outdent17 = require("outdent");
 function generatePreactJsxStringLiteralTypes(ctx) {
   const { factoryName, componentName, upperName, typeName } = ctx.jsx;
   return {
-    jsxFactory: import_outdent16.outdent`
+    jsxFactory: import_outdent17.outdent`
 import type { ${upperName} } from '../types/jsx'
 export declare const ${factoryName}: ${upperName}
     `,
-    jsxType: import_outdent16.outdent`
+    jsxType: import_outdent17.outdent`
 import type { ComponentProps, JSX } from 'preact'
 
 type ElementType = keyof JSX.IntrinsicElements
@@ -1338,11 +1344,11 @@ export type ${typeName}<T extends ElementType> = ComponentProps<T>
 }
 
 // src/artifacts/qwik-jsx/jsx.ts
-var import_outdent17 = require("outdent");
+var import_outdent18 = require("outdent");
 function generateQwikJsxFactory(ctx) {
   const { factoryName, componentName } = ctx.jsx;
   return {
-    js: import_outdent17.outdent`
+    js: import_outdent18.outdent`
     import { h } from '@builder.io/qwik'
     ${ctx.file.import("css, cx, cva, assignCss", "../css/index")}
     ${ctx.file.import("splitProps, normalizeHTMLProps", "../helpers")}
@@ -1406,7 +1412,7 @@ function generateQwikJsxFactory(ctx) {
 }
 
 // src/artifacts/qwik-jsx/pattern.ts
-var import_outdent18 = require("outdent");
+var import_outdent19 = require("outdent");
 var import_ts_pattern3 = require("ts-pattern");
 function generateQwikJsxPattern(ctx) {
   const { typeName, factoryName } = ctx.jsx;
@@ -1415,7 +1421,7 @@ function generateQwikJsxPattern(ctx) {
     const { description, jsxElement = "div" } = pattern.config;
     return {
       name: dashName,
-      js: import_outdent18.outdent`
+      js: import_outdent19.outdent`
       import { h } from '@builder.io/qwik'
       ${ctx.file.import(factoryName, "./factory")}
       ${ctx.file.import(styleFnName, `../patterns/${dashName}`)}
@@ -1423,12 +1429,12 @@ function generateQwikJsxPattern(ctx) {
       export const ${jsxName} = function ${jsxName}(props) {
         ${(0, import_ts_pattern3.match)(props.length).with(
         0,
-        () => import_outdent18.outdent`
+        () => import_outdent19.outdent`
         const styleProps = ${styleFnName}()
         return h(${factoryName}.${jsxElement}, { ...styleProps, ...props })
           `
       ).otherwise(
-        () => import_outdent18.outdent`
+        () => import_outdent19.outdent`
         const { ${props.join(", ")}, ...restProps } = props
         const styleProps = ${styleFnName}({${props.join(", ")}})
         return h(${factoryName}.${jsxElement}, { ...styleProps, ...restProps })
@@ -1436,7 +1442,7 @@ function generateQwikJsxPattern(ctx) {
       )}
       }
       `,
-      dts: import_outdent18.outdent`
+      dts: import_outdent19.outdent`
       import type { FunctionComponent } from '@builder.io/qwik'
       import type { ${upperName}Properties } from '../patterns/${dashName}'
       import type { ${typeName} } from '../types/jsx'
@@ -1455,15 +1461,15 @@ function generateQwikJsxPattern(ctx) {
 }
 
 // src/artifacts/qwik-jsx/types.ts
-var import_outdent19 = require("outdent");
+var import_outdent20 = require("outdent");
 function generateQwikJsxTypes(ctx) {
   const { factoryName, componentName, upperName, typeName } = ctx.jsx;
   return {
-    jsxFactory: import_outdent19.outdent`
+    jsxFactory: import_outdent20.outdent`
 import { ${upperName} } from '../types/jsx'
 export declare const ${factoryName}: ${upperName}
     `,
-    jsxType: import_outdent19.outdent`
+    jsxType: import_outdent20.outdent`
 import type { FunctionComponent, QwikIntrinsicElements } from '@builder.io/qwik'
 import type { Assign as _Assign, JsxStyleProps, PatchedHTMLProps } from './system-types'
 import type { RecipeDefinition, RecipeSelection, RecipeVariantRecord } from './recipe'
@@ -1517,11 +1523,11 @@ export type ${typeName}<T extends ElementType> = Assign<ComponentProps<T>, JsxSt
 }
 
 // src/artifacts/qwik-jsx/jsx.string-literal.ts
-var import_outdent20 = require("outdent");
+var import_outdent21 = require("outdent");
 function generateQwikJsxStringLiteralFactory(ctx) {
   const { factoryName, componentName } = ctx.jsx;
   return {
-    js: import_outdent20.outdent`
+    js: import_outdent21.outdent`
     import { h } from '@builder.io/qwik'
     ${ctx.file.import("css, cx", "../css/index")}
     
@@ -1566,15 +1572,15 @@ function generateQwikJsxStringLiteralFactory(ctx) {
 }
 
 // src/artifacts/qwik-jsx/types.string-literal.ts
-var import_outdent21 = require("outdent");
+var import_outdent22 = require("outdent");
 function generateQwikJsxStringLiteralTypes(ctx) {
   const { factoryName, componentName, upperName, typeName } = ctx.jsx;
   return {
-    jsxFactory: import_outdent21.outdent`
+    jsxFactory: import_outdent22.outdent`
 import { ${upperName} } from '../types/jsx'
 export declare const ${factoryName}: ${upperName}
     `,
-    jsxType: import_outdent21.outdent`
+    jsxType: import_outdent22.outdent`
 import type { FunctionComponent, QwikIntrinsicElements } from '@builder.io/qwik'
 
 type ElementType = keyof QwikIntrinsicElements | FunctionComponent<any>
@@ -1605,11 +1611,11 @@ export type ${typeName}<T extends ElementType> = ComponentProps<T>
 }
 
 // src/artifacts/react-jsx/jsx.ts
-var import_outdent22 = require("outdent");
+var import_outdent23 = require("outdent");
 function generateReactJsxFactory(ctx) {
   const { factoryName, componentName } = ctx.jsx;
   return {
-    js: import_outdent22.outdent`
+    js: import_outdent23.outdent`
     import { createElement, forwardRef, useMemo } from 'react'
     ${ctx.file.import("css, cx, cva, assignCss", "../css/index")}
     ${ctx.file.import("splitProps, normalizeHTMLProps", "../helpers")}
@@ -1675,7 +1681,7 @@ function generateReactJsxFactory(ctx) {
 }
 
 // src/artifacts/react-jsx/pattern.ts
-var import_outdent23 = require("outdent");
+var import_outdent24 = require("outdent");
 var import_ts_pattern4 = require("ts-pattern");
 function generateReactJsxPattern(ctx) {
   const { typeName, factoryName } = ctx.jsx;
@@ -1684,7 +1690,7 @@ function generateReactJsxPattern(ctx) {
     const { description, jsxElement = "div" } = pattern.config;
     return {
       name: dashName,
-      js: import_outdent23.outdent`
+      js: import_outdent24.outdent`
       import { createElement, forwardRef } from 'react'
       ${ctx.file.import(factoryName, "./factory")}
       ${ctx.file.import(styleFnName, `../patterns/${dashName}`)}
@@ -1692,12 +1698,12 @@ function generateReactJsxPattern(ctx) {
       export const ${jsxName} = forwardRef(function ${jsxName}(props, ref) {
         ${(0, import_ts_pattern4.match)(props.length).with(
         0,
-        () => import_outdent23.outdent`
+        () => import_outdent24.outdent`
         const styleProps = ${styleFnName}()
         return createElement(${factoryName}.${jsxElement}, { ref, ...styleProps, ...props })
           `
       ).otherwise(
-        () => import_outdent23.outdent`
+        () => import_outdent24.outdent`
         const { ${props.join(", ")}, ...restProps } = props
         const styleProps = ${styleFnName}({${props.join(", ")}})
         return createElement(${factoryName}.${jsxElement}, { ref, ...styleProps, ...restProps })
@@ -1705,7 +1711,7 @@ function generateReactJsxPattern(ctx) {
       )}
       })    
       `,
-      dts: import_outdent23.outdent`
+      dts: import_outdent24.outdent`
       import type { FunctionComponent } from 'react'
       import type { ${upperName}Properties } from '../patterns/${dashName}'
       import type { ${typeName} } from '../types/jsx'
@@ -1720,15 +1726,15 @@ function generateReactJsxPattern(ctx) {
 }
 
 // src/artifacts/react-jsx/types.ts
-var import_outdent24 = require("outdent");
+var import_outdent25 = require("outdent");
 function generateReactJsxTypes(ctx) {
   const { factoryName, componentName, upperName, typeName } = ctx.jsx;
   return {
-    jsxFactory: import_outdent24.outdent`
+    jsxFactory: import_outdent25.outdent`
 import { ${upperName} } from '../types/jsx'
 export declare const ${factoryName}: ${upperName}
     `,
-    jsxType: import_outdent24.outdent`
+    jsxType: import_outdent25.outdent`
 import type { ComponentProps, ElementType } from 'react'
 import type { Assign, JsxStyleProps, JsxHTMLProps } from './system-types'
 import type { RecipeDefinition, RecipeSelection, RecipeVariantRecord } from './recipe'
@@ -1761,11 +1767,11 @@ export type ${typeName}<T extends ElementType> = JsxHTMLProps<ComponentProps<T>,
 }
 
 // src/artifacts/react-jsx/jsx.string-literal.ts
-var import_outdent25 = require("outdent");
+var import_outdent26 = require("outdent");
 function generateReactJsxStringLiteralFactory(ctx) {
   const { factoryName, componentName } = ctx.jsx;
   return {
-    js: import_outdent25.outdent`
+    js: import_outdent26.outdent`
     import { createElement, forwardRef } from 'react'
     ${ctx.file.import("css, cx", "../css/index")}
     
@@ -1811,15 +1817,15 @@ function generateReactJsxStringLiteralFactory(ctx) {
 }
 
 // src/artifacts/react-jsx/types.string-literal.ts
-var import_outdent26 = require("outdent");
+var import_outdent27 = require("outdent");
 function generateReactJsxStringLiteralTypes(ctx) {
   const { factoryName, componentName, upperName, typeName } = ctx.jsx;
   return {
-    jsxFactory: import_outdent26.outdent`
+    jsxFactory: import_outdent27.outdent`
 import { ${upperName} } from '../types/jsx'
 export declare const ${factoryName}: ${upperName}
     `,
-    jsxType: import_outdent26.outdent`
+    jsxType: import_outdent27.outdent`
 import type { ComponentProps, ElementType } from 'react'
 
 type Dict = Record<string, unknown>
@@ -1843,11 +1849,11 @@ export type ${typeName}<T extends ElementType> = ComponentProps<T>
 }
 
 // src/artifacts/solid-jsx/jsx.ts
-var import_outdent27 = require("outdent");
+var import_outdent28 = require("outdent");
 function generateSolidJsxFactory(ctx) {
   const { componentName, factoryName } = ctx.jsx;
   return {
-    js: import_outdent27.outdent`
+    js: import_outdent28.outdent`
     import { Dynamic } from 'solid-js/web'
     import { mergeProps, splitProps } from 'solid-js'
     import { createComponent } from 'solid-js/web'
@@ -1924,7 +1930,7 @@ function generateSolidJsxFactory(ctx) {
 }
 
 // src/artifacts/solid-jsx/pattern.ts
-var import_outdent28 = require("outdent");
+var import_outdent29 = require("outdent");
 var import_ts_pattern5 = require("ts-pattern");
 function generateSolidJsxPattern(ctx) {
   const { typeName, factoryName } = ctx.jsx;
@@ -1933,7 +1939,7 @@ function generateSolidJsxPattern(ctx) {
     const { description, jsxElement = "div" } = pattern.config;
     return {
       name: dashName,
-      js: import_outdent28.outdent`
+      js: import_outdent29.outdent`
     import { splitProps, mergeProps } from 'solid-js'
     import { createComponent } from 'solid-js/web'
     ${ctx.file.import(factoryName, "./factory")}
@@ -1942,12 +1948,12 @@ function generateSolidJsxPattern(ctx) {
     export function ${jsxName}(props) {
       ${(0, import_ts_pattern5.match)(props.length).with(
         0,
-        () => import_outdent28.outdent`
+        () => import_outdent29.outdent`
           const styleProps = ${styleFnName}()
           return createComponent(${factoryName}.${jsxElement}, mergeProps(styleProps, props))
         `
       ).otherwise(
-        () => import_outdent28.outdent`
+        () => import_outdent29.outdent`
           const [patternProps, restProps] = splitProps(props, [${props.map((v) => JSON.stringify(v)).join(", ")}]);
           const styleProps = ${styleFnName}(patternProps)
           return createComponent(${factoryName}.${jsxElement}, mergeProps(styleProps, restProps))
@@ -1955,7 +1961,7 @@ function generateSolidJsxPattern(ctx) {
       )}
     }
     `,
-      dts: import_outdent28.outdent`
+      dts: import_outdent29.outdent`
     import { Component } from 'solid-js'
     import { ${upperName}Properties } from '../patterns/${dashName}'
     import { ${typeName} } from '../types/jsx'
@@ -1970,15 +1976,15 @@ function generateSolidJsxPattern(ctx) {
 }
 
 // src/artifacts/solid-jsx/types.ts
-var import_outdent29 = require("outdent");
+var import_outdent30 = require("outdent");
 function generateSolidJsxTypes(ctx) {
   const { factoryName, componentName, upperName, typeName } = ctx.jsx;
   return {
-    jsxFactory: import_outdent29.outdent`
+    jsxFactory: import_outdent30.outdent`
 import type { ${upperName} } from '../types/jsx'
 export declare const ${factoryName}: ${upperName}
     `,
-    jsxType: import_outdent29.outdent`
+    jsxType: import_outdent30.outdent`
 import type { ComponentProps, Component, JSX } from 'solid-js'
 import type { Assign, JsxStyleProps, JsxHTMLProps } from './system-types'
 import type { RecipeDefinition, RecipeSelection, RecipeVariantRecord } from './recipe'
@@ -2013,11 +2019,11 @@ export type ${typeName}<T extends ElementType> = JsxHTMLProps<ComponentProps<T>,
 }
 
 // src/artifacts/solid-jsx/jsx.string-literal.ts
-var import_outdent30 = require("outdent");
+var import_outdent31 = require("outdent");
 function generateSolidJsxStringLiteralFactory(ctx) {
   const { componentName, factoryName } = ctx.jsx;
   return {
-    js: import_outdent30.outdent`
+    js: import_outdent31.outdent`
 import { mergeProps, splitProps } from 'solid-js'
 import { Dynamic, createComponent } from 'solid-js/web'
 ${ctx.file.import("css, cx", "../css/index")}
@@ -2069,15 +2075,15 @@ export const ${factoryName} = createJsxFactory()
 }
 
 // src/artifacts/solid-jsx/types.string-literal.ts
-var import_outdent31 = require("outdent");
+var import_outdent32 = require("outdent");
 function generateSolidJsxStringLiteralTypes(ctx) {
   const { factoryName, componentName, upperName, typeName } = ctx.jsx;
   return {
-    jsxFactory: import_outdent31.outdent`
+    jsxFactory: import_outdent32.outdent`
 import type { ${upperName} } from '../types/jsx'
 export declare const ${factoryName}: ${upperName}
     `,
-    jsxType: import_outdent31.outdent`
+    jsxType: import_outdent32.outdent`
 import type { Component, ComponentProps, JSX } from 'solid-js'
 
 type Dict = Record<string, unknown>
@@ -2103,11 +2109,11 @@ export type ${typeName}<T extends ElementType> = ComponentProps<T>
 }
 
 // src/artifacts/vue-jsx/jsx.ts
-var import_outdent32 = require("outdent");
+var import_outdent33 = require("outdent");
 function generateVueJsxFactory(ctx) {
   const { factoryName } = ctx.jsx;
   return {
-    js: import_outdent32.outdent`
+    js: import_outdent33.outdent`
     import { defineComponent, h, computed } from 'vue'
     ${ctx.file.import("css, cx, cva, assignCss", "../css/index")}
     ${ctx.file.import("splitProps, normalizeHTMLProps", "../helpers")}
@@ -2181,11 +2187,11 @@ function generateVueJsxFactory(ctx) {
 }
 
 // src/artifacts/vue-jsx/jsx.string-literal.ts
-var import_outdent33 = require("outdent");
+var import_outdent34 = require("outdent");
 function generateVueJsxStringLiteralFactory(ctx) {
   const { factoryName } = ctx.jsx;
   return {
-    js: import_outdent33.outdent`
+    js: import_outdent34.outdent`
     import { defineComponent, h, computed } from 'vue'
     ${ctx.file.import("css, cx", "../css/index")}
     
@@ -2235,7 +2241,7 @@ function generateVueJsxStringLiteralFactory(ctx) {
 }
 
 // src/artifacts/vue-jsx/pattern.ts
-var import_outdent34 = require("outdent");
+var import_outdent35 = require("outdent");
 function generateVueJsxPattern(ctx) {
   const { typeName, factoryName } = ctx.jsx;
   return ctx.patterns.details.map((pattern) => {
@@ -2244,7 +2250,7 @@ function generateVueJsxPattern(ctx) {
     const propList = props.map((v) => JSON.stringify(v)).join(", ");
     return {
       name: dashName,
-      js: import_outdent34.outdent`
+      js: import_outdent35.outdent`
     import { defineComponent, h, computed } from 'vue'
     ${ctx.file.import(factoryName, "./factory")}
     ${ctx.file.import(styleFnName, `../patterns/${dashName}`)}
@@ -2262,7 +2268,7 @@ function generateVueJsxPattern(ctx) {
         }
     })
     `,
-      dts: import_outdent34.outdent`
+      dts: import_outdent35.outdent`
     import { FunctionalComponent } from 'vue'
     import { ${upperName}Properties } from '../patterns/${dashName}'
     import { ${typeName} } from '../types/jsx'
@@ -2277,15 +2283,15 @@ function generateVueJsxPattern(ctx) {
 }
 
 // src/artifacts/vue-jsx/types.ts
-var import_outdent35 = require("outdent");
+var import_outdent36 = require("outdent");
 function generateVueJsxTypes(ctx) {
   const { factoryName, componentName, upperName, typeName } = ctx.jsx;
   return {
-    jsxFactory: import_outdent35.outdent`
+    jsxFactory: import_outdent36.outdent`
 import { ${upperName} } from '../types/jsx'
 export declare const ${factoryName}: ${upperName}
     `,
-    jsxType: import_outdent35.outdent`
+    jsxType: import_outdent36.outdent`
 import type { Component, FunctionalComponent } from 'vue'
 import type { Assign, JsxStyleProps, JsxHTMLProps } from './system-types'
 import type { RecipeDefinition, RecipeSelection, RecipeVariantRecord } from './recipe'
@@ -2442,15 +2448,15 @@ type IntrinsicElement =
 }
 
 // src/artifacts/vue-jsx/types.string-literal.ts
-var import_outdent36 = require("outdent");
+var import_outdent37 = require("outdent");
 function generateVueJsxStringLiteralTypes(ctx) {
   const { factoryName, componentName, upperName, typeName } = ctx.jsx;
   return {
-    jsxFactory: import_outdent36.outdent`
+    jsxFactory: import_outdent37.outdent`
 import { ${upperName} } from '../types/jsx'
 export declare const ${factoryName}: ${upperName}
     `,
-    jsxType: import_outdent36.outdent`
+    jsxType: import_outdent37.outdent`
 import type { Component, FunctionalComponent } from 'vue'
 
 type IntrinsicElement =
@@ -2741,9 +2747,9 @@ function getGeneratedTypes() {
 }
 
 // src/artifacts/types/main.ts
-var import_outdent37 = require("outdent");
+var import_outdent38 = require("outdent");
 var generateTypesEntry = () => ({
-  global: import_outdent37.outdent`
+  global: import_outdent38.outdent`
     import type { RecipeVariantRecord, RecipeConfig } from './recipe'
     import type { Parts } from './parts'
     import type { PatternConfig } from './pattern'
@@ -2760,19 +2766,19 @@ var generateTypesEntry = () => ({
       export function defineParts<T extends Parts>(parts: T): (config: Partial<Record<keyof T, SystemStyleObject>>) => Partial<Record<keyof T, SystemStyleObject>>;
     }
     `,
-  index: import_outdent37.outdent`
+  index: import_outdent38.outdent`
     import './global'
     export type { ConditionalValue } from './conditions'
     export type { GlobalStyleObject, JsxStyleProps, SystemStyleObject } from './system-types'
 
     `,
-  helpers: import_outdent37.outdent`
+  helpers: import_outdent38.outdent`
   export type Pretty<T> = T extends infer U ? { [K in keyof U]: U[K] } : never
   `
 });
 
 // src/artifacts/types/prop-types.ts
-var import_outdent38 = require("outdent");
+var import_outdent39 = require("outdent");
 function generatePropTypes(ctx) {
   const {
     config: { strictTokens },
@@ -2780,7 +2786,7 @@ function generatePropTypes(ctx) {
   } = ctx;
   const strictText = `${strictTokens ? "" : " | CssValue<T>"}`;
   const result = [
-    import_outdent38.outdent`
+    import_outdent39.outdent`
     import type { ConditionalValue } from './conditions';
     import type { CssProperties } from './system-types'
     import type { Tokens } from '../tokens'
@@ -2803,7 +2809,7 @@ function generatePropTypes(ctx) {
     result.push(`	${key}: Shorthand<${JSON.stringify(value)}>;`);
   });
   result.push("}");
-  return import_outdent38.outdent`
+  return import_outdent39.outdent`
   ${result.join("\n")}
 
   export type PropertyValue<T extends string> = T extends keyof PropertyTypes
@@ -2816,10 +2822,10 @@ function generatePropTypes(ctx) {
 
 // src/artifacts/types/style-props.ts
 var import_is_valid_prop = require("@pandacss/is-valid-prop");
-var import_outdent39 = __toESM(require("outdent"));
+var import_outdent40 = __toESM(require("outdent"));
 function generateStyleProps(ctx) {
   const props = new Set(import_is_valid_prop.allCssProperties.concat(ctx.utility.keys()));
-  return import_outdent39.default`
+  return import_outdent40.default`
     import type { ConditionalValue } from './conditions'
     import type { PropertyValue } from './prop-type'
     import type { Token } from '../tokens'
@@ -2836,7 +2842,7 @@ function generateStyleProps(ctx) {
 
 // src/artifacts/types/token-types.ts
 var import_shared3 = require("@pandacss/shared");
-var import_outdent40 = require("outdent");
+var import_outdent41 = require("outdent");
 var import_pluralize = __toESM(require("pluralize"));
 var categories = [
   "zIndex",
@@ -2881,7 +2887,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_outdent40.outdent.string(Array.from(set).join("\n\n"));
+  return import_outdent41.outdent.string(Array.from(set).join("\n\n"));
 }
 
 // src/artifacts/index.ts
@@ -2978,8 +2984,8 @@ function setupRecipes(ctx) {
     return;
   const indexFiles = files.filter((file) => !file.name.includes("create-recipe"));
   const index = {
-    js: import_outdent41.default.string(indexFiles.map((file) => ctx.file.export(`./${file.name}`)).join("\n")),
-    dts: import_outdent41.default.string(indexFiles.map((file) => `export * from './${file.name}'`).join("\n"))
+    js: import_outdent42.default.string(indexFiles.map((file) => ctx.file.export(`./${file.name}`)).join("\n")),
+    dts: import_outdent42.default.string(indexFiles.map((file) => `export * from './${file.name}'`).join("\n"))
   };
   return {
     dir: ctx.paths.recipe,
@@ -2998,8 +3004,8 @@ function setupPatterns(ctx) {
   if (!files)
     return;
   const index = {
-    js: import_outdent41.default.string(files.map((file) => ctx.file.export(`./${file.name}`)).join("\n")),
-    dts: import_outdent41.default.string(files.map((file) => `export * from './${file.name}'`).join("\n"))
+    js: import_outdent42.default.string(files.map((file) => ctx.file.export(`./${file.name}`)).join("\n")),
+    dts: import_outdent42.default.string(files.map((file) => `export * from './${file.name}'`).join("\n"))
   };
   return {
     dir: ctx.paths.pattern,
@@ -3019,13 +3025,15 @@ function setupJsx(ctx) {
   const factory = generateJsxFactory(ctx);
   const patterns = generateJsxPatterns(ctx);
   const index = {
-    js: import_outdent41.default`
+    js: import_outdent42.default`
   ${ctx.file.export("./factory")}
-  ${import_outdent41.default.string(patterns.map((file) => ctx.file.export(`./${file.name}`)).join("\n"))}
+  ${isValidProp?.js ? ctx.file.export("./is-valid-prop") : ""}
+  ${import_outdent42.default.string(patterns.map((file) => ctx.file.export(`./${file.name}`)).join("\n"))}
   `,
-    dts: import_outdent41.default`
+    dts: import_outdent42.default`
   export * from './factory'
-  ${import_outdent41.default.string(patterns.map((file) => `export * from './${file.name}'`).join("\n"))}
+  ${isValidProp?.dts ? `export * from './is-valid-prop'` : ""}
+  ${import_outdent42.default.string(patterns.map((file) => `export * from './${file.name}'`).join("\n"))}
   export type { ${ctx.jsx.typeName} } from '../types/jsx'
     `
   };
@@ -3035,6 +3043,7 @@ function setupJsx(ctx) {
       ...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("is-valid-prop"), code: isValidProp?.js },
+      { file: "is-valid-prop.d.ts", code: isValidProp?.dts },
       { file: "factory.d.ts", code: types.jsxFactory },
       { file: ctx.file.ext("factory"), code: factory?.js },
       { file: "index.d.ts", code: index.dts },
@@ -3044,12 +3053,12 @@ function setupJsx(ctx) {
 }
 function setupCssIndex(ctx) {
   const index = {
-    js: import_outdent41.default`
+    js: import_outdent42.default`
   ${ctx.file.export("./css")}
   ${ctx.file.export("./cx")}
   ${ctx.isTemplateLiteralSyntax ? "" : ctx.file.export("./cva")}
  `,
-    dts: import_outdent41.default`
+    dts: import_outdent42.default`
   export * from './css'
   export * from './cx'
   ${ctx.isTemplateLiteralSyntax ? "" : `export * from './cva'`}
@@ -3147,7 +3156,6 @@ var generateFlattenedCss = (ctx) => (options) => {
 var import_logger2 = require("@pandacss/logger");
 var import_func = require("lil-fp/func");
 var import_ts_pattern6 = require("ts-pattern");
-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 }) => {
@@ -3163,7 +3171,7 @@ var generateParserCss = (ctx) => (result) => (0, import_func.pipe)(
     });
     result2.jsx.forEach((jsx) => {
       jsx.data.forEach((data) => {
-        sheet.processAtomic(flattenStyles(data));
+        sheet.processStyleProps(data);
       });
     });
     result2.recipe.forEach((recipeSet, name) => {
@@ -3174,8 +3182,8 @@ var generateParserCss = (ctx) => (result) => (0, import_func.pipe)(
             continue;
           (0, import_ts_pattern6.match)(recipe).with({ type: "jsx-recipe", name: import_ts_pattern6.P.string }, ({ name: name2 }) => {
             recipe.data.forEach((data) => {
-              const [recipeProps, styleProps] = recipes.splitProps(name2, flattenStyles(data));
-              sheet.processAtomic(styleProps);
+              const [recipeProps, styleProps] = recipes.splitProps(name2, data);
+              sheet.processStyleProps(styleProps);
               sheet.processRecipe(recipeConfig, recipeProps);
             });
           }).otherwise(() => {
@@ -3194,8 +3202,8 @@ var generateParserCss = (ctx) => (result) => (0, import_func.pipe)(
           (0, import_ts_pattern6.match)(pattern).with({ type: "jsx-pattern", name: import_ts_pattern6.P.string }, ({ name: name2 }) => {
             pattern.data.forEach((data) => {
               const fnName = patterns.getFnName(name2);
-              const styleProps = patterns.transform(fnName, flattenStyles(data));
-              sheet.processAtomic(styleProps);
+              const styleProps = patterns.transform(fnName, data);
+              sheet.processStyleProps(styleProps);
             });
           }).otherwise(() => {
             pattern.data.forEach((data) => {