@pandacss/generator 0.22.0 → 0.23.0

package/dist/index.d.mts

@@ -1,6 +1,7 @@
 import * as _pandacss_types from '@pandacss/types';
 import { UserConfig, PatternConfig, Dict, ArtifactFilters, ConfigResultWithHooks, RequiredBy, StudioOptions, HashOptions, PrefixOptions, Theme, CascadeLayers, TSConfig, ArtifactId, ParserResultType } from '@pandacss/types';
 import { Utility, Recipes, Conditions, Layers, Stylesheet, RecipeContext, RecipeNode } from '@pandacss/core';
+import { mapObject } from '@pandacss/shared';
 import { TokenDictionary } from '@pandacss/token-dictionary';
 
 declare class FileEngine {
@@ -108,7 +109,15 @@ declare class Context {
     createLayers(layers: CascadeLayers): Layers;
     setupCompositions(theme: Theme): void;
     setupProperties(): void;
-    private get baseSheetContext();
+    get baseSheetContext(): {
+        conditions: Conditions;
+        layers: Layers;
+        utility: Utility;
+        helpers: {
+            map: typeof mapObject;
+        };
+        hash: boolean | undefined;
+    };
     createSheet(): Stylesheet;
     createRecipes(theme: Theme, context: RecipeContext): Recipes;
 }
@@ -175,6 +184,7 @@ interface ParserJsxOptions {
 interface ParserOptions {
     importMap: ParserImportMap;
     jsx: ParserJsxOptions;
+    isTemplateLiteralSyntax: boolean;
     patternKeys: Context['patterns']['keys'];
     recipeKeys: Context['recipes']['keys'];
     getRecipesByJsxName: Context['recipes']['filter'];

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 import * as _pandacss_types from '@pandacss/types';
 import { UserConfig, PatternConfig, Dict, ArtifactFilters, ConfigResultWithHooks, RequiredBy, StudioOptions, HashOptions, PrefixOptions, Theme, CascadeLayers, TSConfig, ArtifactId, ParserResultType } from '@pandacss/types';
 import { Utility, Recipes, Conditions, Layers, Stylesheet, RecipeContext, RecipeNode } from '@pandacss/core';
+import { mapObject } from '@pandacss/shared';
 import { TokenDictionary } from '@pandacss/token-dictionary';
 
 declare class FileEngine {
@@ -108,7 +109,15 @@ declare class Context {
     createLayers(layers: CascadeLayers): Layers;
     setupCompositions(theme: Theme): void;
     setupProperties(): void;
-    private get baseSheetContext();
+    get baseSheetContext(): {
+        conditions: Conditions;
+        layers: Layers;
+        utility: Utility;
+        helpers: {
+            map: typeof mapObject;
+        };
+        hash: boolean | undefined;
+    };
     createSheet(): Stylesheet;
     createRecipes(theme: Theme, context: RecipeContext): Recipes;
 }
@@ -175,6 +184,7 @@ interface ParserJsxOptions {
 interface ParserOptions {
     importMap: ParserImportMap;
     jsx: ParserJsxOptions;
+    isTemplateLiteralSyntax: boolean;
     patternKeys: Context['patterns']['keys'];
     recipeKeys: Context['recipes']['keys'];
     getRecipesByJsxName: Context['recipes']['filter'];

package/dist/index.js

@@ -132,7 +132,7 @@ var getMessages = (ctx) => ({
 });
 
 // src/generator.ts
-var import_ts_pattern11 = require("ts-pattern");
+var import_ts_pattern12 = require("ts-pattern");
 
 // src/artifacts/setup-artifacts.ts
 var import_outdent44 = __toESM(require("outdent"));
@@ -509,7 +509,7 @@ var import_outdent8 = require("outdent");
 
 // src/artifacts/generated/helpers.mjs.json
 var helpers_mjs_default = {
-  content: '// src/assert.ts\nfunction isObject(value) {\n  return typeof value === "object" && value != null && !Array.isArray(value);\n}\n\n// src/compact.ts\nfunction compact(value) {\n  return Object.fromEntries(Object.entries(value ?? {}).filter(([_, value2]) => value2 !== void 0));\n}\n\n// src/condition.ts\nvar isBaseCondition = (v) => v === "base";\nfunction filterBaseConditions(c) {\n  return c.slice().filter((v) => !isBaseCondition(v));\n}\n\n// src/css-important.ts\nvar importantRegex = /!(important)?$/;\nfunction isImportant(value) {\n  return typeof value === "string" ? importantRegex.test(value) : false;\n}\nfunction withoutImportant(value) {\n  return typeof value === "string" ? value.replace(importantRegex, "").trim() : value;\n}\nfunction withoutSpace(str) {\n  return typeof str === "string" ? str.replaceAll(" ", "_") : str;\n}\n\n// src/hash.ts\nfunction toChar(code) {\n  return String.fromCharCode(code + (code > 25 ? 39 : 97));\n}\nfunction toName(code) {\n  let name = "";\n  let x;\n  for (x = Math.abs(code); x > 52; x = x / 52 | 0)\n    name = toChar(x % 52) + name;\n  return toChar(x % 52) + name;\n}\nfunction toPhash(h, x) {\n  let i = x.length;\n  while (i)\n    h = h * 33 ^ x.charCodeAt(--i);\n  return h;\n}\nfunction toHash(value) {\n  return toName(toPhash(5381, value) >>> 0);\n}\n\n// src/merge-props.ts\nfunction mergeProps(...sources) {\n  const objects = sources.filter(Boolean);\n  return objects.reduce((prev, obj) => {\n    Object.keys(obj).forEach((key) => {\n      const prevValue = prev[key];\n      const value = obj[key];\n      if (isObject(prevValue) && isObject(value)) {\n        prev[key] = mergeProps(prevValue, value);\n      } else {\n        prev[key] = value;\n      }\n    });\n    return prev;\n  }, {});\n}\n\n// src/walk-object.ts\nvar isNotNullish = (element) => element != null;\nfunction walkObject(target, predicate, options = {}) {\n  const { stop, getKey } = options;\n  function inner(value, path = []) {\n    if (isObject(value) || Array.isArray(value)) {\n      const result = {};\n      for (const [prop, child] of Object.entries(value)) {\n        const key = getKey?.(prop) ?? prop;\n        const childPath = [...path, key];\n        if (stop?.(value, childPath)) {\n          return predicate(value, path);\n        }\n        const next = inner(child, childPath);\n        if (isNotNullish(next)) {\n          result[key] = next;\n        }\n      }\n      return result;\n    }\n    return predicate(value, path);\n  }\n  return inner(target);\n}\nfunction mapObject(obj, fn) {\n  if (Array.isArray(obj))\n    return obj.map((value) => fn(value));\n  if (!isObject(obj))\n    return fn(obj);\n  return walkObject(obj, (value) => fn(value));\n}\n\n// src/normalize-style-object.ts\nfunction toResponsiveObject(values, breakpoints) {\n  return values.reduce((acc, current, index) => {\n    const key = breakpoints[index];\n    if (current != null) {\n      acc[key] = current;\n    }\n    return acc;\n  }, {});\n}\nfunction normalizeShorthand(styles, context) {\n  const { hasShorthand, resolveShorthand } = context.utility;\n  return walkObject(styles, (v) => v, {\n    getKey: (prop) => {\n      return hasShorthand ? resolveShorthand(prop) : prop;\n    }\n  });\n}\nfunction normalizeStyleObject(styles, context, shorthand = true) {\n  const { utility, conditions } = context;\n  const { hasShorthand, resolveShorthand } = utility;\n  return walkObject(\n    styles,\n    (value) => {\n      return Array.isArray(value) ? toResponsiveObject(value, conditions.breakpoints.keys) : value;\n    },\n    {\n      stop: (value) => Array.isArray(value),\n      getKey: shorthand ? (prop) => hasShorthand ? resolveShorthand(prop) : prop : void 0\n    }\n  );\n}\n\n// src/classname.ts\nvar fallbackCondition = {\n  shift: (v) => v,\n  finalize: (v) => v,\n  breakpoints: { keys: [] }\n};\nvar sanitize = (value) => typeof value === "string" ? value.replaceAll(/[\\n\\s]+/g, " ") : value;\nfunction createCss(context) {\n  const { utility, hash, conditions: conds = fallbackCondition } = context;\n  const formatClassName = (str) => [utility.prefix, str].filter(Boolean).join("-");\n  const hashFn = (conditions, className) => {\n    let result;\n    if (hash) {\n      const baseArray = [...conds.finalize(conditions), className];\n      result = formatClassName(toHash(baseArray.join(":")));\n    } else {\n      const baseArray = [...conds.finalize(conditions), formatClassName(className)];\n      result = baseArray.join(":");\n    }\n    return result;\n  };\n  return (styleObject = {}) => {\n    const normalizedObject = normalizeStyleObject(styleObject, context);\n    const classNames = /* @__PURE__ */ new Set();\n    walkObject(normalizedObject, (value, paths) => {\n      const important = isImportant(value);\n      if (value == null)\n        return;\n      const [prop, ...allConditions] = conds.shift(paths);\n      const conditions = filterBaseConditions(allConditions);\n      const transformed = utility.transform(prop, withoutImportant(sanitize(value)));\n      let className = hashFn(conditions, transformed.className);\n      if (important)\n        className = `${className}!`;\n      classNames.add(className);\n    });\n    return Array.from(classNames).join(" ");\n  };\n}\nfunction compactStyles(...styles) {\n  return styles.filter((style) => isObject(style) && Object.keys(compact(style)).length > 0);\n}\nfunction createMergeCss(context) {\n  function resolve(styles) {\n    const allStyles = compactStyles(...styles);\n    if (allStyles.length === 1)\n      return allStyles;\n    return allStyles.map((style) => normalizeShorthand(style, context));\n  }\n  function mergeCss(...styles) {\n    return mergeProps(...resolve(styles));\n  }\n  function assignCss(...styles) {\n    return Object.assign({}, ...resolve(styles));\n  }\n  return { mergeCss, assignCss };\n}\n\n// src/memo.ts\nvar memo = (fn) => {\n  const cache = /* @__PURE__ */ new Map();\n  const get = (...args) => {\n    const key = JSON.stringify(args);\n    if (cache.has(key)) {\n      return cache.get(key);\n    }\n    const result = fn(...args);\n    cache.set(key, result);\n    return result;\n  };\n  return get;\n};\n\n// src/hypenate-property.ts\nvar wordRegex = /([A-Z])/g;\nvar msRegex = /^ms-/;\nvar hypenateProperty = memo((property) => {\n  if (property.startsWith("--"))\n    return property;\n  return property.replace(wordRegex, "-$1").replace(msRegex, "-ms-").toLowerCase();\n});\n\n// src/slot.ts\nvar getSlotRecipes = (recipe = {}) => {\n  const init = (slot) => ({\n    className: [recipe.className, slot].filter(Boolean).join("__"),\n    base: recipe.base?.[slot] ?? {},\n    variants: {},\n    defaultVariants: recipe.defaultVariants ?? {},\n    compoundVariants: recipe.compoundVariants ? getSlotCompoundVariant(recipe.compoundVariants, slot) : []\n  });\n  const slots = recipe.slots ?? [];\n  const recipeParts = slots.map((slot) => [slot, init(slot)]);\n  for (const [variantsKey, variantsSpec] of Object.entries(recipe.variants ?? {})) {\n    for (const [variantKey, variantSpec] of Object.entries(variantsSpec)) {\n      recipeParts.forEach(([slot, slotRecipe]) => {\n        slotRecipe.variants[variantsKey] ??= {};\n        slotRecipe.variants[variantsKey][variantKey] = variantSpec[slot] ?? {};\n      });\n    }\n  }\n  return Object.fromEntries(recipeParts);\n};\nvar getSlotCompoundVariant = (compoundVariants, slotName) => compoundVariants.filter((compoundVariant) => compoundVariant.css[slotName]).map((compoundVariant) => ({ ...compoundVariant, css: compoundVariant.css[slotName] }));\n\n// src/split-props.ts\nfunction splitProps(props, ...keys) {\n  const descriptors = Object.getOwnPropertyDescriptors(props);\n  const dKeys = Object.keys(descriptors);\n  const split = (k) => {\n    const clone = {};\n    for (let i = 0; i < k.length; i++) {\n      const key = k[i];\n      if (descriptors[key]) {\n        Object.defineProperty(clone, key, descriptors[key]);\n        delete descriptors[key];\n      }\n    }\n    return clone;\n  };\n  const fn = (key) => split(Array.isArray(key) ? key : dKeys.filter(key));\n  return keys.map(fn).concat(split(dKeys));\n}\n\n// src/uniq.ts\nvar uniq = (...items) => items.filter(Boolean).reduce((acc, item) => Array.from(/* @__PURE__ */ new Set([...acc, ...item])), []);\nexport {\n  compact,\n  createCss,\n  createMergeCss,\n  filterBaseConditions,\n  getSlotCompoundVariant,\n  getSlotRecipes,\n  hypenateProperty,\n  isBaseCondition,\n  isObject,\n  mapObject,\n  memo,\n  mergeProps,\n  splitProps,\n  toHash,\n  uniq,\n  walkObject,\n  withoutSpace\n};\n'
+  content: '// src/assert.ts\nfunction isObject(value) {\n  return typeof value === "object" && value != null && !Array.isArray(value);\n}\n\n// src/compact.ts\nfunction compact(value) {\n  return Object.fromEntries(Object.entries(value ?? {}).filter(([_, value2]) => value2 !== void 0));\n}\n\n// src/condition.ts\nvar isBaseCondition = (v) => v === "base";\nfunction filterBaseConditions(c) {\n  return c.slice().filter((v) => !isBaseCondition(v));\n}\n\n// src/css-important.ts\nvar importantRegex = /!(important)?/;\nfunction isImportant(value) {\n  return typeof value === "string" ? importantRegex.test(value) : false;\n}\nfunction withoutImportant(value) {\n  return typeof value === "string" ? value.replace(importantRegex, "").trim() : value;\n}\nfunction withoutSpace(str) {\n  return typeof str === "string" ? str.replaceAll(" ", "_") : str;\n}\n\n// src/hash.ts\nfunction toChar(code) {\n  return String.fromCharCode(code + (code > 25 ? 39 : 97));\n}\nfunction toName(code) {\n  let name = "";\n  let x;\n  for (x = Math.abs(code); x > 52; x = x / 52 | 0)\n    name = toChar(x % 52) + name;\n  return toChar(x % 52) + name;\n}\nfunction toPhash(h, x) {\n  let i = x.length;\n  while (i)\n    h = h * 33 ^ x.charCodeAt(--i);\n  return h;\n}\nfunction toHash(value) {\n  return toName(toPhash(5381, value) >>> 0);\n}\n\n// src/merge-props.ts\nfunction mergeProps(...sources) {\n  const objects = sources.filter(Boolean);\n  return objects.reduce((prev, obj) => {\n    Object.keys(obj).forEach((key) => {\n      const prevValue = prev[key];\n      const value = obj[key];\n      if (isObject(prevValue) && isObject(value)) {\n        prev[key] = mergeProps(prevValue, value);\n      } else {\n        prev[key] = value;\n      }\n    });\n    return prev;\n  }, {});\n}\n\n// src/walk-object.ts\nvar isNotNullish = (element) => element != null;\nfunction walkObject(target, predicate, options = {}) {\n  const { stop, getKey } = options;\n  function inner(value, path = []) {\n    if (isObject(value) || Array.isArray(value)) {\n      const result = {};\n      for (const [prop, child] of Object.entries(value)) {\n        const key = getKey?.(prop) ?? prop;\n        const childPath = [...path, key];\n        if (stop?.(value, childPath)) {\n          return predicate(value, path);\n        }\n        const next = inner(child, childPath);\n        if (isNotNullish(next)) {\n          result[key] = next;\n        }\n      }\n      return result;\n    }\n    return predicate(value, path);\n  }\n  return inner(target);\n}\nfunction mapObject(obj, fn) {\n  if (Array.isArray(obj))\n    return obj.map((value) => fn(value));\n  if (!isObject(obj))\n    return fn(obj);\n  return walkObject(obj, (value) => fn(value));\n}\n\n// src/normalize-style-object.ts\nfunction toResponsiveObject(values, breakpoints) {\n  return values.reduce((acc, current, index) => {\n    const key = breakpoints[index];\n    if (current != null) {\n      acc[key] = current;\n    }\n    return acc;\n  }, {});\n}\nfunction normalizeShorthand(styles, context) {\n  const { hasShorthand, resolveShorthand } = context.utility;\n  return walkObject(styles, (v) => v, {\n    getKey: (prop) => {\n      return hasShorthand ? resolveShorthand(prop) : prop;\n    }\n  });\n}\nfunction normalizeStyleObject(styles, context, shorthand = true) {\n  const { utility, conditions } = context;\n  const { hasShorthand, resolveShorthand } = utility;\n  return walkObject(\n    styles,\n    (value) => {\n      return Array.isArray(value) ? toResponsiveObject(value, conditions.breakpoints.keys) : value;\n    },\n    {\n      stop: (value) => Array.isArray(value),\n      getKey: shorthand ? (prop) => hasShorthand ? resolveShorthand(prop) : prop : void 0\n    }\n  );\n}\n\n// src/classname.ts\nvar fallbackCondition = {\n  shift: (v) => v,\n  finalize: (v) => v,\n  breakpoints: { keys: [] }\n};\nvar sanitize = (value) => typeof value === "string" ? value.replaceAll(/[\\n\\s]+/g, " ") : value;\nfunction createCss(context) {\n  const { utility, hash, conditions: conds = fallbackCondition } = context;\n  const formatClassName = (str) => [utility.prefix, str].filter(Boolean).join("-");\n  const hashFn = (conditions, className) => {\n    let result;\n    if (hash) {\n      const baseArray = [...conds.finalize(conditions), className];\n      result = formatClassName(toHash(baseArray.join(":")));\n    } else {\n      const baseArray = [...conds.finalize(conditions), formatClassName(className)];\n      result = baseArray.join(":");\n    }\n    return result;\n  };\n  return (styleObject = {}) => {\n    const normalizedObject = normalizeStyleObject(styleObject, context);\n    const classNames = /* @__PURE__ */ new Set();\n    walkObject(normalizedObject, (value, paths) => {\n      const important = isImportant(value);\n      if (value == null)\n        return;\n      const [prop, ...allConditions] = conds.shift(paths);\n      const conditions = filterBaseConditions(allConditions);\n      const transformed = utility.transform(prop, withoutImportant(sanitize(value)));\n      let className = hashFn(conditions, transformed.className);\n      if (important)\n        className = `${className}!`;\n      classNames.add(className);\n    });\n    return Array.from(classNames).join(" ");\n  };\n}\nfunction compactStyles(...styles) {\n  return styles.filter((style) => isObject(style) && Object.keys(compact(style)).length > 0);\n}\nfunction createMergeCss(context) {\n  function resolve(styles) {\n    const allStyles = compactStyles(...styles);\n    if (allStyles.length === 1)\n      return allStyles;\n    return allStyles.map((style) => normalizeShorthand(style, context));\n  }\n  function mergeCss(...styles) {\n    return mergeProps(...resolve(styles));\n  }\n  function assignCss(...styles) {\n    return Object.assign({}, ...resolve(styles));\n  }\n  return { mergeCss, assignCss };\n}\n\n// src/memo.ts\nvar memo = (fn) => {\n  const cache = /* @__PURE__ */ new Map();\n  const get = (...args) => {\n    const key = JSON.stringify(args);\n    if (cache.has(key)) {\n      return cache.get(key);\n    }\n    const result = fn(...args);\n    cache.set(key, result);\n    return result;\n  };\n  return get;\n};\n\n// src/hypenate-property.ts\nvar wordRegex = /([A-Z])/g;\nvar msRegex = /^ms-/;\nvar hypenateProperty = memo((property) => {\n  if (property.startsWith("--"))\n    return property;\n  return property.replace(wordRegex, "-$1").replace(msRegex, "-ms-").toLowerCase();\n});\n\n// src/slot.ts\nvar getSlotRecipes = (recipe = {}) => {\n  const init = (slot) => ({\n    className: [recipe.className, slot].filter(Boolean).join("__"),\n    base: recipe.base?.[slot] ?? {},\n    variants: {},\n    defaultVariants: recipe.defaultVariants ?? {},\n    compoundVariants: recipe.compoundVariants ? getSlotCompoundVariant(recipe.compoundVariants, slot) : []\n  });\n  const slots = recipe.slots ?? [];\n  const recipeParts = slots.map((slot) => [slot, init(slot)]);\n  for (const [variantsKey, variantsSpec] of Object.entries(recipe.variants ?? {})) {\n    for (const [variantKey, variantSpec] of Object.entries(variantsSpec)) {\n      recipeParts.forEach(([slot, slotRecipe]) => {\n        slotRecipe.variants[variantsKey] ??= {};\n        slotRecipe.variants[variantsKey][variantKey] = variantSpec[slot] ?? {};\n      });\n    }\n  }\n  return Object.fromEntries(recipeParts);\n};\nvar getSlotCompoundVariant = (compoundVariants, slotName) => compoundVariants.filter((compoundVariant) => compoundVariant.css[slotName]).map((compoundVariant) => ({ ...compoundVariant, css: compoundVariant.css[slotName] }));\n\n// src/split-props.ts\nfunction splitProps(props, ...keys) {\n  const descriptors = Object.getOwnPropertyDescriptors(props);\n  const dKeys = Object.keys(descriptors);\n  const split = (k) => {\n    const clone = {};\n    for (let i = 0; i < k.length; i++) {\n      const key = k[i];\n      if (descriptors[key]) {\n        Object.defineProperty(clone, key, descriptors[key]);\n        delete descriptors[key];\n      }\n    }\n    return clone;\n  };\n  const fn = (key) => split(Array.isArray(key) ? key : dKeys.filter(key));\n  return keys.map(fn).concat(split(dKeys));\n}\n\n// src/uniq.ts\nvar uniq = (...items) => items.filter(Boolean).reduce((acc, item) => Array.from(/* @__PURE__ */ new Set([...acc, ...item])), []);\nexport {\n  compact,\n  createCss,\n  createMergeCss,\n  filterBaseConditions,\n  getSlotCompoundVariant,\n  getSlotRecipes,\n  hypenateProperty,\n  isBaseCondition,\n  isObject,\n  mapObject,\n  memo,\n  mergeProps,\n  splitProps,\n  toHash,\n  uniq,\n  walkObject,\n  withoutSpace\n};\n'
 };
 
 // src/artifacts/generated/astish.mjs.json
@@ -1092,7 +1092,7 @@ function generatePreactJsxFactory(ctx) {
 var import_outdent16 = require("outdent");
 var import_ts_pattern5 = require("ts-pattern");
 function generatePreactJsxPattern(ctx, filters) {
-  const { typeName, factoryName } = ctx.jsx;
+  const { typeName, factoryName, styleProps: jsxStyleProps2 } = ctx.jsx;
   const details = ctx.patterns.filterDetails(filters);
   return details.map((pattern) => {
     const { upperName, styleFnName, dashName, jsxName, props, blocklistType } = pattern;
@@ -1102,23 +1102,44 @@ function generatePreactJsxPattern(ctx, filters) {
       js: import_outdent16.outdent`
       import { h } from 'preact'
       import { forwardRef } from 'preact/compat'
-      ${ctx.file.import(factoryName, "./factory")}
+      ${ctx.file.import("mergeCss", "../css/css")}
+      ${ctx.file.import("splitProps", "../helpers")}
       ${ctx.file.import(styleFnName, `../patterns/${dashName}`)}
+      ${ctx.file.import(factoryName, "./factory")}
 
       export const ${jsxName} = /* @__PURE__ */ forwardRef(function ${jsxName}(props, ref) {
-        ${(0, import_ts_pattern5.match)(props.length).with(
-        0,
+        ${(0, import_ts_pattern5.match)(jsxStyleProps2).with(
+        "none",
         () => import_outdent16.outdent`
-          const styleProps = ${styleFnName}()
-          return h(${factoryName}.${jsxElement}, { ref, ...styleProps, ...props })
+          const [patternProps, restProps] = splitProps(props, ${JSON.stringify(props)})
+          
+          const styleProps = ${styleFnName}(patternProps)
+          const Comp = ${factoryName}("${jsxElement}", { base: styleProps })
+          
+          return h(Comp, { ref, ...restProps })
           `
-      ).otherwise(
+      ).with(
+        "minimal",
         () => import_outdent16.outdent`
-          const { ${props.join(", ")}, ...restProps } = props
-          const styleProps = ${styleFnName}({${props.join(", ")}})
-          return h(${factoryName}.${jsxElement}, { ref, ...styleProps, ...restProps })
+          const [patternProps, restProps] = splitProps(props, ${JSON.stringify(props)})
+          
+          const styleProps = ${styleFnName}(patternProps)
+          const cssProps = { css: mergeCss(styleProps, props.css) }
+          const mergedProps = { ref, ...restProps, ...cssProps }
+          
+          return h(${factoryName}.${jsxElement}, mergedProps)
           `
-      )}
+      ).with(
+        "all",
+        () => import_outdent16.outdent`
+          const [patternProps, restProps] = splitProps(props, ${JSON.stringify(props)})
+          
+          const styleProps = ${styleFnName}(patternProps)
+          const mergedProps = { ref, ...styleProps, ...restProps }
+          
+          return h(${factoryName}.${jsxElement}, mergedProps)
+          `
+      ).exhaustive()}
       })
       `,
       dts: import_outdent16.outdent`
@@ -1397,7 +1418,7 @@ function generateQwikJsxFactory(ctx) {
 var import_outdent21 = require("outdent");
 var import_ts_pattern6 = require("ts-pattern");
 function generateQwikJsxPattern(ctx, filters) {
-  const { typeName, factoryName } = ctx.jsx;
+  const { typeName, factoryName, styleProps: jsxStyleProps2 } = ctx.jsx;
   const details = ctx.patterns.filterDetails(filters);
   return details.map((pattern) => {
     const { upperName, styleFnName, dashName, jsxName, props, blocklistType } = pattern;
@@ -1406,23 +1427,44 @@ function generateQwikJsxPattern(ctx, filters) {
       name: dashName,
       js: import_outdent21.outdent`
       import { h } from '@builder.io/qwik'
-      ${ctx.file.import(factoryName, "./factory")}
+      ${ctx.file.import("mergeCss", "../css/css")}
+      ${ctx.file.import("splitProps", "../helpers")}
       ${ctx.file.import(styleFnName, `../patterns/${dashName}`)}
+      ${ctx.file.import(factoryName, "./factory")}
 
-      export const ${jsxName} = function ${jsxName}(props) {
-        ${(0, import_ts_pattern6.match)(props.length).with(
-        0,
+      export const ${jsxName} = /* @__PURE__ */ function ${jsxName}(props) {
+        ${(0, import_ts_pattern6.match)(jsxStyleProps2).with(
+        "none",
+        () => import_outdent21.outdent`
+          const [patternProps, restProps] = splitProps(props, ${JSON.stringify(props)})
+          
+          const styleProps = ${styleFnName}(patternProps)
+          const Comp = ${factoryName}("${jsxElement}", { base: styleProps })
+          
+          return h(Comp, restProps)
+          `
+      ).with(
+        "minimal",
         () => import_outdent21.outdent`
-        const styleProps = ${styleFnName}()
-        return h(${factoryName}.${jsxElement}, { ...styleProps, ...props })
+          const [patternProps, restProps] = splitProps(props, ${JSON.stringify(props)})
+          
+          const styleProps = ${styleFnName}(patternProps)
+          const cssProps = { css: mergeCss(styleProps, props.css) }
+          const mergedProps = { ...restProps, ...cssProps }
+
+          return h(${factoryName}.${jsxElement}, mergedProps)
           `
-      ).otherwise(
+      ).with(
+        "all",
         () => import_outdent21.outdent`
-        const { ${props.join(", ")}, ...restProps } = props
-        const styleProps = ${styleFnName}({${props.join(", ")}})
-        return h(${factoryName}.${jsxElement}, { ...styleProps, ...restProps })
+          const [patternProps, restProps] = splitProps(props, ${JSON.stringify(props)})
+          
+          const styleProps = ${styleFnName}(patternProps)
+          const mergedProps = { ...styleProps, ...restProps }
+          
+          return h(${factoryName}.${jsxElement}, mergedProps)
           `
-      )}
+      ).exhaustive()}
       }
       `,
       dts: import_outdent21.outdent`
@@ -1708,7 +1750,7 @@ function generateReactJsxFactory(ctx) {
 var import_outdent26 = require("outdent");
 var import_ts_pattern7 = require("ts-pattern");
 function generateReactJsxPattern(ctx, filters) {
-  const { typeName, factoryName } = ctx.jsx;
+  const { typeName, factoryName, styleProps: jsxStyleProps2 } = ctx.jsx;
   const details = ctx.patterns.filterDetails(filters);
   return details.map((pattern) => {
     const { upperName, styleFnName, dashName, jsxName, props, blocklistType } = pattern;
@@ -1717,24 +1759,45 @@ function generateReactJsxPattern(ctx, filters) {
       name: dashName,
       js: import_outdent26.outdent`
       import { createElement, forwardRef } from 'react'
-      ${ctx.file.import(factoryName, "./factory")}
+      ${ctx.file.import("mergeCss", "../css/css")}
+      ${ctx.file.import("splitProps", "../helpers")}
       ${ctx.file.import(styleFnName, `../patterns/${dashName}`)}
+      ${ctx.file.import(factoryName, "./factory")}
 
       export const ${jsxName} = /* @__PURE__ */ forwardRef(function ${jsxName}(props, ref) {
-        ${(0, import_ts_pattern7.match)(props.length).with(
-        0,
+        ${(0, import_ts_pattern7.match)(jsxStyleProps2).with(
+        "none",
         () => import_outdent26.outdent`
-        const styleProps = ${styleFnName}()
-        return createElement(${factoryName}.${jsxElement}, { ref, ...styleProps, ...props })
+          const [patternProps, restProps] = splitProps(props, ${JSON.stringify(props)})
+          
+          const styleProps = ${styleFnName}(patternProps)
+          const Comp = ${factoryName}("${jsxElement}", { base: styleProps })
+          
+          return createElement(Comp, { ref, ...restProps })
+          `
+      ).with(
+        "minimal",
+        () => import_outdent26.outdent`
+          const [patternProps, restProps] = splitProps(props, ${JSON.stringify(props)})
+          
+          const styleProps = ${styleFnName}(patternProps)
+          const cssProps = { css: mergeCss(styleProps, props.css) }
+          const mergedProps = { ref, ...restProps, ...cssProps }
+
+          return createElement(${factoryName}.${jsxElement}, mergedProps)
           `
-      ).otherwise(
+      ).with(
+        "all",
         () => import_outdent26.outdent`
-        const { ${props.join(", ")}, ...restProps } = props
-        const styleProps = ${styleFnName}({${props.join(", ")}})
-        return createElement(${factoryName}.${jsxElement}, { ref, ...styleProps, ...restProps })
+          const [patternProps, restProps] = splitProps(props, ${JSON.stringify(props)})
+          
+          const styleProps = ${styleFnName}(patternProps)
+          const mergedProps = { ref, ...styleProps, ...restProps }
+
+          return createElement(${factoryName}.${jsxElement}, mergedProps)
           `
-      )}
-      })
+      ).exhaustive()}
+        })
       `,
       dts: import_outdent26.outdent`
       import type { FunctionComponent } from 'react'
@@ -2044,7 +2107,7 @@ function generateSolidJsxFactory(ctx) {
 var import_outdent31 = require("outdent");
 var import_ts_pattern8 = require("ts-pattern");
 function generateSolidJsxPattern(ctx, filters) {
-  const { typeName, factoryName } = ctx.jsx;
+  const { typeName, factoryName, styleProps: jsxStyleProps2 } = ctx.jsx;
   const details = ctx.patterns.filterDetails(filters);
   return details.map((pattern) => {
     const { upperName, styleFnName, dashName, jsxName, props, blocklistType } = pattern;
@@ -2052,25 +2115,47 @@ function generateSolidJsxPattern(ctx, filters) {
     return {
       name: dashName,
       js: import_outdent31.outdent`
-    import { splitProps, mergeProps } from 'solid-js'
+    import { createMemo, mergeProps, splitProps } from 'solid-js'
     import { createComponent } from 'solid-js/web'
-    ${ctx.file.import(factoryName, "./factory")}
+    ${ctx.file.import("mergeCss", "../css/css")}
     ${ctx.file.import(styleFnName, `../patterns/${dashName}`)}
+    ${ctx.file.import(factoryName, "./factory")}
 
-    export function ${jsxName}(props) {
-      ${(0, import_ts_pattern8.match)(props.length).with(
-        0,
+    export const ${jsxName} = /* @__PURE__ */ function ${jsxName}(props) {
+      ${(0, import_ts_pattern8.match)(jsxStyleProps2).with(
+        "none",
         () => import_outdent31.outdent`
-          const styleProps = ${styleFnName}()
-          return createComponent(${factoryName}.${jsxElement}, mergeProps(styleProps, props))
+        const [patternProps, restProps] = splitProps(props, ${JSON.stringify(props)})
+        
+        const styleProps = ${styleFnName}(patternProps)
+        const Comp = ${factoryName}("${jsxElement}", { base: styleProps })
+        
+        return createComponent(Comp, restProps)
         `
-      ).otherwise(
+      ).with(
+        "minimal",
         () => import_outdent31.outdent`
-          const [patternProps, restProps] = splitProps(props, [${props.map((v) => JSON.stringify(v)).join(", ")}]);
+        const [patternProps, restProps] = splitProps(props, ${JSON.stringify(props)})
+        
+        const cssProps = createMemo(() => {
           const styleProps = ${styleFnName}(patternProps)
-          return createComponent(${factoryName}.${jsxElement}, mergeProps(styleProps, restProps))
+          return { css: mergeCss(styleProps, props.css) }
+        })
+        const mergedProps = mergeProps(restProps, cssProps)
+
+        return createComponent(${factoryName}.${jsxElement}, mergedProps)
+        `
+      ).with(
+        "all",
+        () => import_outdent31.outdent`
+        const [patternProps, restProps] = splitProps(props, ${JSON.stringify(props)})
+        
+        const styleProps = ${styleFnName}(patternProps)        
+        const mergedProps = mergeProps(styleProps, restProps)
+        
+        return createComponent(${factoryName}.${jsxElement}, mergedProps)
         `
-      )}
+      ).exhaustive()}
     }
     `,
       dts: import_outdent31.outdent`
@@ -2297,7 +2382,7 @@ function generateVueJsxFactory(ctx) {
           const combinedProps = computed(() => Object.assign({}, defaultProps, attrs))
 
           const splittedProps = computed(() => {
-            return splitProps(combinedProps.value, normalizeHTMLProps.keys, shouldForwardProp, __cvaFn__.variantKeys, isCssProperty)
+            return splitProps(combinedProps.value, normalizeHTMLProps.keys, __shouldForwardProps__, __cvaFn__.variantKeys, isCssProperty)
           })
 
           const recipeClass = computed(() => {
@@ -2425,30 +2510,62 @@ function generateVueJsxStringLiteralFactory(ctx) {
 
 // src/artifacts/vue-jsx/pattern.ts
 var import_outdent37 = require("outdent");
+var import_ts_pattern9 = require("ts-pattern");
 function generateVueJsxPattern(ctx, filters) {
-  const { typeName, factoryName } = ctx.jsx;
+  const { typeName, factoryName, styleProps: jsxStyleProps2 } = ctx.jsx;
   const details = ctx.patterns.filterDetails(filters);
   return details.map((pattern) => {
     const { upperName, styleFnName, dashName, jsxName, props, blocklistType } = pattern;
     const { description, jsxElement = "div" } = pattern.config;
-    const propList = props.map((v) => JSON.stringify(v)).join(", ");
     return {
       name: dashName,
       js: import_outdent37.outdent`
     import { defineComponent, h, computed } from 'vue'
-    ${ctx.file.import(factoryName, "./factory")}
+    ${ctx.file.import("mergeCss", "../css/css")}
     ${ctx.file.import(styleFnName, `../patterns/${dashName}`)}
+    ${ctx.file.import(factoryName, "./factory")}
 
-    export const ${jsxName} = defineComponent({
+    export const ${jsxName} = /* @__PURE__ */ defineComponent({
         name: '${jsxName}',
         inheritAttrs: false,
-        props: [${propList}],
+        props: ${JSON.stringify(props)},
         setup(props, { attrs, slots }) {
+          ${(0, import_ts_pattern9.match)(jsxStyleProps2).with(
+        "none",
+        () => import_outdent37.outdent`
+            const Comp = computed(() => {
+              const styleProps = ${styleFnName}(props)
+              return ${factoryName}("${jsxElement}", { base: styleProps })
+            })
+            
+            return () => {
+              return h(Comp.value, attrs, slots)
+            }
+            `
+      ).with(
+        "minimal",
+        () => import_outdent37.outdent`            
+            const cssProps = computed(() => {
+              const styleProps = ${styleFnName}(props)
+              return { css: mergeCss(styleProps, attrs.css) }
+            })
+            
+            return () => {
+              const mergedProps = { ...attrs, ...cssProps.value }
+              return h(${factoryName}.${jsxElement}, mergedProps, slots)
+            }
+            `
+      ).with(
+        "all",
+        () => import_outdent37.outdent`            
             const styleProps = computed(() => ${styleFnName}(props))
+            
             return () => {
-                const computedProps = { ...styleProps.value, ...attrs }
-                return h(${factoryName}.${jsxElement}, computedProps, slots)
+              const mergedProps = { ...styleProps.value, ...attrs }
+              return h(${factoryName}.${jsxElement}, mergedProps, slots)
             }
+            `
+      ).exhaustive()}
         }
     })
     `,
@@ -2695,7 +2812,7 @@ var composition_d_ts_default = {
 
 // src/artifacts/generated/recipe.d.ts.json
 var recipe_d_ts_default = {
-  content: "import type { RecipeRule } from './static-css'\nimport type { SystemStyleObject, DistributiveOmit, Pretty } from './system-types'\n\ntype StringToBoolean<T> = T extends 'true' | 'false' ? boolean : T\n\nexport type RecipeVariantRecord = Record<any, Record<any, SystemStyleObject>>\n\nexport type RecipeSelection<T extends RecipeVariantRecord> = keyof any extends keyof T\n  ? {}\n  : {\n      [K in keyof T]?: StringToBoolean<keyof T[K]> | undefined\n    }\n\nexport type RecipeVariantFn<T extends RecipeVariantRecord> = (props?: RecipeSelection<T>) => string\n\nexport type RecipeVariantProps<\n  T extends RecipeVariantFn<RecipeVariantRecord> | SlotRecipeVariantFn<string, SlotRecipeVariantRecord<string>>,\n> = Pretty<Parameters<T>[0]>\n\ntype RecipeVariantMap<T extends RecipeVariantRecord> = {\n  [K in keyof T]: Array<keyof T[K]>\n}\n\n/* -----------------------------------------------------------------------------\n * Recipe / Standard\n * -----------------------------------------------------------------------------*/\n\nexport interface RecipeRuntimeFn<T extends RecipeVariantRecord> extends RecipeVariantFn<T> {\n  __type: RecipeSelection<T>\n  variantKeys: (keyof T)[]\n  variantMap: RecipeVariantMap<T>\n  raw: (props?: RecipeSelection<T>) => SystemStyleObject\n  config: RecipeConfig<T>\n  splitVariantProps<Props extends RecipeSelection<T>>(\n    props: Props,\n  ): [RecipeSelection<T>, Pretty<DistributiveOmit<Props, keyof T>>]\n}\n\ntype OneOrMore<T> = T | Array<T>\n\nexport type RecipeCompoundSelection<T> = {\n  [K in keyof T]?: OneOrMore<StringToBoolean<keyof T[K]>> | undefined\n}\n\nexport type RecipeCompoundVariant<T> = T & {\n  css: SystemStyleObject\n}\n\nexport interface RecipeDefinition<T extends RecipeVariantRecord> {\n  /**\n   * The base styles of the recipe.\n   */\n  base?: SystemStyleObject\n  /**\n   * The multi-variant styles of the recipe.\n   */\n  variants?: T\n  /**\n   * The default variants of the recipe.\n   */\n  defaultVariants?: RecipeSelection<T>\n  /**\n   * The styles to apply when a combination of variants is selected.\n   */\n  compoundVariants?: Pretty<RecipeCompoundVariant<RecipeCompoundSelection<T>>>[]\n  /**\n   * Variants to pre-generate, will be include in the final `config.staticCss`\n   */\n  staticCss?: RecipeRule[]\n}\n\nexport type RecipeCreatorFn = <T extends RecipeVariantRecord>(config: RecipeDefinition<T>) => RecipeRuntimeFn<T>\n\ninterface RecipeConfigMeta {\n  /**\n   * The name of the recipe.\n   */\n  className: string\n  /**\n   * The description of the recipe. This will be used in the JSDoc comment.\n   */\n  description?: string\n  /**\n   * The jsx elements to track for this recipe. Can be string or Regexp.\n   *\n   * @default capitalize(recipe.name)\n   * @example ['Button', 'Link', /Button$/]\n   */\n  jsx?: Array<string | RegExp>\n}\n\nexport interface RecipeConfig<T extends RecipeVariantRecord = RecipeVariantRecord>\n  extends RecipeDefinition<T>,\n    RecipeConfigMeta {}\n\n/* -----------------------------------------------------------------------------\n * Recipe / Slot\n * -----------------------------------------------------------------------------*/\n\ntype SlotRecord<S extends string, T> = Partial<Record<S, T>>\n\nexport type SlotRecipeVariantRecord<S extends string> = Record<any, Record<any, SlotRecord<S, SystemStyleObject>>>\n\nexport type SlotRecipeVariantFn<S extends string, T extends RecipeVariantRecord> = (\n  props?: RecipeSelection<T>,\n) => SlotRecord<S, string>\n\nexport interface SlotRecipeRuntimeFn<S extends string, T extends SlotRecipeVariantRecord<S>>\n  extends SlotRecipeVariantFn<S, T> {\n  raw: (props?: RecipeSelection<T>) => Record<S, SystemStyleObject>\n  variantKeys: (keyof T)[]\n  variantMap: RecipeVariantMap<T>\n  splitVariantProps<Props extends RecipeSelection<T>>(props: Props): [RecipeSelection<T>, Pretty<Omit<Props, keyof T>>]\n}\n\nexport type SlotRecipeCompoundVariant<S extends string, T> = T & {\n  css: SlotRecord<S, SystemStyleObject>\n}\n\nexport interface SlotRecipeDefinition<S extends string, T extends SlotRecipeVariantRecord<S>> {\n  /**\n   * The parts/slots of the recipe.\n   */\n  slots: S[] | Readonly<S[]>\n  /**\n   * The base styles of the recipe.\n   */\n  base?: SlotRecord<S, SystemStyleObject>\n  /**\n   * The multi-variant styles of the recipe.\n   */\n  variants?: T\n  /**\n   * The default variants of the recipe.\n   */\n  defaultVariants?: RecipeSelection<T>\n  /**\n   * The styles to apply when a combination of variants is selected.\n   */\n  compoundVariants?: Pretty<SlotRecipeCompoundVariant<S, RecipeCompoundSelection<T>>>[]\n}\n\nexport type SlotRecipeCreatorFn = <S extends string, T extends SlotRecipeVariantRecord<S>>(\n  config: SlotRecipeDefinition<S, T>,\n) => SlotRecipeRuntimeFn<S, T>\n\nexport type SlotRecipeConfig<\n  S extends string = string,\n  T extends SlotRecipeVariantRecord<S> = SlotRecipeVariantRecord<S>,\n> = SlotRecipeDefinition<S, T> & RecipeConfigMeta\n"
+  content: "import type { RecipeRule } from './static-css'\nimport type { SystemStyleObject, DistributiveOmit, Pretty } from './system-types'\n\ntype StringToBoolean<T> = T extends 'true' | 'false' ? boolean : T\n\nexport type RecipeVariantRecord = Record<any, Record<any, SystemStyleObject>>\n\nexport type RecipeSelection<T extends RecipeVariantRecord> = keyof any extends keyof T\n  ? {}\n  : {\n      [K in keyof T]?: StringToBoolean<keyof T[K]> | undefined\n    }\n\nexport type RecipeVariantFn<T extends RecipeVariantRecord> = (props?: RecipeSelection<T>) => string\n\nexport type RecipeVariantProps<\n  T extends RecipeVariantFn<RecipeVariantRecord> | SlotRecipeVariantFn<string, SlotRecipeVariantRecord<string>>,\n> = Pretty<Parameters<T>[0]>\n\ntype RecipeVariantMap<T extends RecipeVariantRecord> = {\n  [K in keyof T]: Array<keyof T[K]>\n}\n\n/* -----------------------------------------------------------------------------\n * Recipe / Standard\n * -----------------------------------------------------------------------------*/\n\nexport interface RecipeRuntimeFn<T extends RecipeVariantRecord> extends RecipeVariantFn<T> {\n  __type: RecipeSelection<T>\n  variantKeys: (keyof T)[]\n  variantMap: RecipeVariantMap<T>\n  raw: (props?: RecipeSelection<T>) => SystemStyleObject\n  config: RecipeConfig<T>\n  splitVariantProps<Props extends RecipeSelection<T>>(\n    props: Props,\n  ): [RecipeSelection<T>, Pretty<DistributiveOmit<Props, keyof T>>]\n}\n\ntype OneOrMore<T> = T | Array<T>\n\nexport type RecipeCompoundSelection<T> = {\n  [K in keyof T]?: OneOrMore<StringToBoolean<keyof T[K]>> | undefined\n}\n\nexport type RecipeCompoundVariant<T> = T & {\n  css: SystemStyleObject\n}\n\nexport interface RecipeDefinition<T extends RecipeVariantRecord> {\n  /**\n   * The base styles of the recipe.\n   */\n  base?: SystemStyleObject\n  /**\n   * The multi-variant styles of the recipe.\n   */\n  variants?: T\n  /**\n   * The default variants of the recipe.\n   */\n  defaultVariants?: RecipeSelection<T>\n  /**\n   * The styles to apply when a combination of variants is selected.\n   */\n  compoundVariants?: Pretty<RecipeCompoundVariant<RecipeCompoundSelection<T>>>[]\n  /**\n   * Variants to pre-generate, will be include in the final `config.staticCss`\n   */\n  staticCss?: RecipeRule[]\n}\n\nexport type RecipeCreatorFn = <T extends RecipeVariantRecord>(config: RecipeDefinition<T>) => RecipeRuntimeFn<T>\n\ninterface RecipeConfigMeta {\n  /**\n   * The name of the recipe.\n   */\n  className: string\n  /**\n   * The description of the recipe. This will be used in the JSDoc comment.\n   */\n  description?: string\n  /**\n   * The jsx elements to track for this recipe. Can be string or Regexp.\n   *\n   * @default capitalize(recipe.name)\n   * @example ['Button', 'Link', /Button$/]\n   */\n  jsx?: Array<string | RegExp>\n}\n\nexport interface RecipeConfig<T extends RecipeVariantRecord = RecipeVariantRecord>\n  extends RecipeDefinition<T>,\n    RecipeConfigMeta {}\n\n/* -----------------------------------------------------------------------------\n * Recipe / Slot\n * -----------------------------------------------------------------------------*/\n\ntype SlotRecord<S extends string, T> = Partial<Record<S, T>>\n\nexport type SlotRecipeVariantRecord<S extends string> = Record<any, Record<any, SlotRecord<S, SystemStyleObject>>>\n\nexport type SlotRecipeVariantFn<S extends string, T extends RecipeVariantRecord> = (\n  props?: RecipeSelection<T>,\n) => SlotRecord<S, string>\n\nexport interface SlotRecipeRuntimeFn<S extends string, T extends SlotRecipeVariantRecord<S>>\n  extends SlotRecipeVariantFn<S, T> {\n  raw: (props?: RecipeSelection<T>) => Record<S, SystemStyleObject>\n  variantKeys: (keyof T)[]\n  variantMap: RecipeVariantMap<T>\n  splitVariantProps<Props extends RecipeSelection<T>>(props: Props): [RecipeSelection<T>, Pretty<Omit<Props, keyof T>>]\n}\n\nexport type SlotRecipeCompoundVariant<S extends string, T> = T & {\n  css: SlotRecord<S, SystemStyleObject>\n}\n\nexport interface SlotRecipeDefinition<S extends string, T extends SlotRecipeVariantRecord<S>> {\n  /**\n   * The parts/slots of the recipe.\n   */\n  slots: S[] | Readonly<S[]>\n  /**\n   * The base styles of the recipe.\n   */\n  base?: SlotRecord<S, SystemStyleObject>\n  /**\n   * The multi-variant styles of the recipe.\n   */\n  variants?: T\n  /**\n   * The default variants of the recipe.\n   */\n  defaultVariants?: RecipeSelection<T>\n  /**\n   * The styles to apply when a combination of variants is selected.\n   */\n  compoundVariants?: Pretty<SlotRecipeCompoundVariant<S, RecipeCompoundSelection<T>>>[]\n  /**\n   * Variants to pre-generate, will be include in the final `config.staticCss`\n   */\n  staticCss?: RecipeRule[]\n}\n\nexport type SlotRecipeCreatorFn = <S extends string, T extends SlotRecipeVariantRecord<S>>(\n  config: SlotRecipeDefinition<S, T>,\n) => SlotRecipeRuntimeFn<S, T>\n\nexport type SlotRecipeConfig<\n  S extends string = string,\n  T extends SlotRecipeVariantRecord<S> = SlotRecipeVariantRecord<S>,\n> = SlotRecipeDefinition<S, T> & RecipeConfigMeta\n"
 };
 
 // src/artifacts/generated/pattern.d.ts.json
@@ -2719,7 +2836,7 @@ var static_css_d_ts_default = {
 };
 
 // src/artifacts/types/generated.ts
-var import_ts_pattern9 = require("ts-pattern");
+var import_ts_pattern10 = require("ts-pattern");
 function getGeneratedTypes(ctx) {
   const rewriteImports = (code) => code.replace(/import\s+type\s+\{([^}]+)\}\s+from\s+['"]([^'"]+)['"]/g, ctx.file.importType("$1", "$2"));
   return {
@@ -2737,7 +2854,7 @@ function getGeneratedSystemTypes(ctx) {
   const rewriteImports = (code) => code.replace(/import\s+type\s+\{([^}]+)\}\s+from\s+['"]([^'"]+)['"]/g, ctx.file.importType("$1", "$2"));
   return {
     system: rewriteImports(
-      (0, import_ts_pattern9.match)(ctx.jsx.styleProps).with("all", () => system_types_d_ts_default.content).with(
+      (0, import_ts_pattern10.match)(ctx.jsx.styleProps).with("all", () => system_types_d_ts_default.content).with(
         "minimal",
         () => system_types_d_ts_default.content.replace("WithHTMLProps<T>,", "T,").replace(jsxStyleProps, "export type JsxStyleProps = WithCss")
       ).with(
@@ -2828,21 +2945,22 @@ function generatePropTypes(ctx) {
   ${strictTokens ? `
   type FilterString<T> = T extends \`\${infer _}\` ? T : never;
   type WithArbitraryValue<T> = T | \`[\${string}]\`
+  type PropOrCondition<T> = ConditionalValue<WithArbitraryValue<T>>;
 
   type PropertyTypeValue<T extends string> = T extends keyof PropertyTypes
-    ? ConditionalValue<FilterString<PropertyTypes[T]>>
+    ? PropOrCondition<FilterString<PropertyTypes[T]>>
     : never;
 
   type CssPropertyValue<T extends string> = T extends keyof CssProperties
-    ? ConditionalValue<FilterString<CssProperties[T]>>
+    ? PropOrCondition<FilterString<CssProperties[T]>>
     : never;
 
-  export type PropertyValue<T extends string> = WithArbitraryValue<T extends keyof PropertyTypes
+  export type PropertyValue<T extends string> = T extends keyof PropertyTypes
     ? PropertyTypeValue<T>
     : T extends keyof CssProperties
       ? CssPropertyValue<T>
-      : ConditionalValue<string | number>
-    >` : `
+      : PropOrCondition<string | number>
+    ` : `
 
   type PropertyTypeValue<T extends string> = T extends keyof PropertyTypes
     ? ConditionalValue<PropertyTypes[T] | CssValue<T> | (string & {})>
@@ -3424,7 +3542,7 @@ function generateKeyframeCss(ctx) {
 
 // src/artifacts/css/parser-css.ts
 var import_logger2 = require("@pandacss/logger");
-var import_ts_pattern10 = require("ts-pattern");
+var import_ts_pattern11 = require("ts-pattern");
 var generateParserCss = (ctx, result) => {
   const { patterns, recipes } = ctx;
   result.css.forEach((css2) => {
@@ -3453,7 +3571,7 @@ var generateParserCss = (ctx, result) => {
         const recipeConfig = recipes.getConfig(recipeName);
         if (!recipeConfig)
           continue;
-        (0, import_ts_pattern10.match)(recipe).with({ type: "jsx-recipe" }, () => {
+        (0, import_ts_pattern11.match)(recipe).with({ type: "jsx-recipe" }, () => {
           recipe.data.forEach((data) => {
             const [recipeProps, styleProps] = recipes.splitProps(recipeName, data);
             ctx.stylesheet.processStyleProps(filterProps(ctx, styleProps));
@@ -3472,7 +3590,7 @@ var generateParserCss = (ctx, result) => {
   result.pattern.forEach((patternSet, name) => {
     try {
       for (const pattern of patternSet) {
-        (0, import_ts_pattern10.match)(pattern).with({ type: "jsx-pattern", name: import_ts_pattern10.P.string }, ({ name: jsxName }) => {
+        (0, import_ts_pattern11.match)(pattern).with({ type: "jsx-pattern", name: import_ts_pattern11.P.string }, ({ name: jsxName }) => {
           pattern.data.forEach((data) => {
             const fnName = patterns.find(jsxName);
             const styleProps = patterns.transform(fnName, data);
@@ -4137,7 +4255,7 @@ var Context = class {
     return new import_core5.Utility({
       prefix: this.prefix.className,
       tokens: this.tokens,
-      config: this.isTemplateLiteralSyntax ? {} : config.utilities,
+      config: this.isTemplateLiteralSyntax ? {} : Object.assign({}, config.utilities),
       separator: config.separator,
       shorthands: config.shorthands,
       strictTokens: config.strictTokens
@@ -4216,6 +4334,7 @@ var getParserOptions = (ctx) => {
       isStyleProp: isValidProperty,
       nodes: [...patterns.details, ...recipes.details]
     },
+    isTemplateLiteralSyntax: ctx.isTemplateLiteralSyntax,
     patternKeys: patterns.keys,
     recipeKeys: recipes.keys,
     getRecipesByJsxName: recipes.filter,
@@ -4238,7 +4357,7 @@ var Generator = class extends Context {
     return generateArtifacts(this, ids);
   }
   appendCss(type) {
-    (0, import_ts_pattern11.match)(type).with("preflight", () => generateResetCss(this)).with("tokens", () => generateTokenCss(this)).with("static", () => generateStaticCss(this)).with("global", () => generateGlobalCss(this)).with("keyframes", () => generateKeyframeCss(this)).otherwise(() => {
+    (0, import_ts_pattern12.match)(type).with("preflight", () => generateResetCss(this)).with("tokens", () => generateTokenCss(this)).with("static", () => generateStaticCss(this)).with("global", () => generateGlobalCss(this)).with("keyframes", () => generateKeyframeCss(this)).otherwise(() => {
       throw new Error(`Unknown css artifact type <${type}>`);
     });
   }

package/dist/index.mjs

@@ -101,7 +101,7 @@ var getMessages = (ctx) => ({
 });
 
 // src/generator.ts
-import { match as match11 } from "ts-pattern";
+import { match as match12 } from "ts-pattern";
 
 // src/artifacts/setup-artifacts.ts
 import outdent44 from "outdent";
@@ -478,7 +478,7 @@ import { outdent as outdent8 } from "outdent";
 
 // src/artifacts/generated/helpers.mjs.json
 var helpers_mjs_default = {
-  content: '// src/assert.ts\nfunction isObject(value) {\n  return typeof value === "object" && value != null && !Array.isArray(value);\n}\n\n// src/compact.ts\nfunction compact(value) {\n  return Object.fromEntries(Object.entries(value ?? {}).filter(([_, value2]) => value2 !== void 0));\n}\n\n// src/condition.ts\nvar isBaseCondition = (v) => v === "base";\nfunction filterBaseConditions(c) {\n  return c.slice().filter((v) => !isBaseCondition(v));\n}\n\n// src/css-important.ts\nvar importantRegex = /!(important)?$/;\nfunction isImportant(value) {\n  return typeof value === "string" ? importantRegex.test(value) : false;\n}\nfunction withoutImportant(value) {\n  return typeof value === "string" ? value.replace(importantRegex, "").trim() : value;\n}\nfunction withoutSpace(str) {\n  return typeof str === "string" ? str.replaceAll(" ", "_") : str;\n}\n\n// src/hash.ts\nfunction toChar(code) {\n  return String.fromCharCode(code + (code > 25 ? 39 : 97));\n}\nfunction toName(code) {\n  let name = "";\n  let x;\n  for (x = Math.abs(code); x > 52; x = x / 52 | 0)\n    name = toChar(x % 52) + name;\n  return toChar(x % 52) + name;\n}\nfunction toPhash(h, x) {\n  let i = x.length;\n  while (i)\n    h = h * 33 ^ x.charCodeAt(--i);\n  return h;\n}\nfunction toHash(value) {\n  return toName(toPhash(5381, value) >>> 0);\n}\n\n// src/merge-props.ts\nfunction mergeProps(...sources) {\n  const objects = sources.filter(Boolean);\n  return objects.reduce((prev, obj) => {\n    Object.keys(obj).forEach((key) => {\n      const prevValue = prev[key];\n      const value = obj[key];\n      if (isObject(prevValue) && isObject(value)) {\n        prev[key] = mergeProps(prevValue, value);\n      } else {\n        prev[key] = value;\n      }\n    });\n    return prev;\n  }, {});\n}\n\n// src/walk-object.ts\nvar isNotNullish = (element) => element != null;\nfunction walkObject(target, predicate, options = {}) {\n  const { stop, getKey } = options;\n  function inner(value, path = []) {\n    if (isObject(value) || Array.isArray(value)) {\n      const result = {};\n      for (const [prop, child] of Object.entries(value)) {\n        const key = getKey?.(prop) ?? prop;\n        const childPath = [...path, key];\n        if (stop?.(value, childPath)) {\n          return predicate(value, path);\n        }\n        const next = inner(child, childPath);\n        if (isNotNullish(next)) {\n          result[key] = next;\n        }\n      }\n      return result;\n    }\n    return predicate(value, path);\n  }\n  return inner(target);\n}\nfunction mapObject(obj, fn) {\n  if (Array.isArray(obj))\n    return obj.map((value) => fn(value));\n  if (!isObject(obj))\n    return fn(obj);\n  return walkObject(obj, (value) => fn(value));\n}\n\n// src/normalize-style-object.ts\nfunction toResponsiveObject(values, breakpoints) {\n  return values.reduce((acc, current, index) => {\n    const key = breakpoints[index];\n    if (current != null) {\n      acc[key] = current;\n    }\n    return acc;\n  }, {});\n}\nfunction normalizeShorthand(styles, context) {\n  const { hasShorthand, resolveShorthand } = context.utility;\n  return walkObject(styles, (v) => v, {\n    getKey: (prop) => {\n      return hasShorthand ? resolveShorthand(prop) : prop;\n    }\n  });\n}\nfunction normalizeStyleObject(styles, context, shorthand = true) {\n  const { utility, conditions } = context;\n  const { hasShorthand, resolveShorthand } = utility;\n  return walkObject(\n    styles,\n    (value) => {\n      return Array.isArray(value) ? toResponsiveObject(value, conditions.breakpoints.keys) : value;\n    },\n    {\n      stop: (value) => Array.isArray(value),\n      getKey: shorthand ? (prop) => hasShorthand ? resolveShorthand(prop) : prop : void 0\n    }\n  );\n}\n\n// src/classname.ts\nvar fallbackCondition = {\n  shift: (v) => v,\n  finalize: (v) => v,\n  breakpoints: { keys: [] }\n};\nvar sanitize = (value) => typeof value === "string" ? value.replaceAll(/[\\n\\s]+/g, " ") : value;\nfunction createCss(context) {\n  const { utility, hash, conditions: conds = fallbackCondition } = context;\n  const formatClassName = (str) => [utility.prefix, str].filter(Boolean).join("-");\n  const hashFn = (conditions, className) => {\n    let result;\n    if (hash) {\n      const baseArray = [...conds.finalize(conditions), className];\n      result = formatClassName(toHash(baseArray.join(":")));\n    } else {\n      const baseArray = [...conds.finalize(conditions), formatClassName(className)];\n      result = baseArray.join(":");\n    }\n    return result;\n  };\n  return (styleObject = {}) => {\n    const normalizedObject = normalizeStyleObject(styleObject, context);\n    const classNames = /* @__PURE__ */ new Set();\n    walkObject(normalizedObject, (value, paths) => {\n      const important = isImportant(value);\n      if (value == null)\n        return;\n      const [prop, ...allConditions] = conds.shift(paths);\n      const conditions = filterBaseConditions(allConditions);\n      const transformed = utility.transform(prop, withoutImportant(sanitize(value)));\n      let className = hashFn(conditions, transformed.className);\n      if (important)\n        className = `${className}!`;\n      classNames.add(className);\n    });\n    return Array.from(classNames).join(" ");\n  };\n}\nfunction compactStyles(...styles) {\n  return styles.filter((style) => isObject(style) && Object.keys(compact(style)).length > 0);\n}\nfunction createMergeCss(context) {\n  function resolve(styles) {\n    const allStyles = compactStyles(...styles);\n    if (allStyles.length === 1)\n      return allStyles;\n    return allStyles.map((style) => normalizeShorthand(style, context));\n  }\n  function mergeCss(...styles) {\n    return mergeProps(...resolve(styles));\n  }\n  function assignCss(...styles) {\n    return Object.assign({}, ...resolve(styles));\n  }\n  return { mergeCss, assignCss };\n}\n\n// src/memo.ts\nvar memo = (fn) => {\n  const cache = /* @__PURE__ */ new Map();\n  const get = (...args) => {\n    const key = JSON.stringify(args);\n    if (cache.has(key)) {\n      return cache.get(key);\n    }\n    const result = fn(...args);\n    cache.set(key, result);\n    return result;\n  };\n  return get;\n};\n\n// src/hypenate-property.ts\nvar wordRegex = /([A-Z])/g;\nvar msRegex = /^ms-/;\nvar hypenateProperty = memo((property) => {\n  if (property.startsWith("--"))\n    return property;\n  return property.replace(wordRegex, "-$1").replace(msRegex, "-ms-").toLowerCase();\n});\n\n// src/slot.ts\nvar getSlotRecipes = (recipe = {}) => {\n  const init = (slot) => ({\n    className: [recipe.className, slot].filter(Boolean).join("__"),\n    base: recipe.base?.[slot] ?? {},\n    variants: {},\n    defaultVariants: recipe.defaultVariants ?? {},\n    compoundVariants: recipe.compoundVariants ? getSlotCompoundVariant(recipe.compoundVariants, slot) : []\n  });\n  const slots = recipe.slots ?? [];\n  const recipeParts = slots.map((slot) => [slot, init(slot)]);\n  for (const [variantsKey, variantsSpec] of Object.entries(recipe.variants ?? {})) {\n    for (const [variantKey, variantSpec] of Object.entries(variantsSpec)) {\n      recipeParts.forEach(([slot, slotRecipe]) => {\n        slotRecipe.variants[variantsKey] ??= {};\n        slotRecipe.variants[variantsKey][variantKey] = variantSpec[slot] ?? {};\n      });\n    }\n  }\n  return Object.fromEntries(recipeParts);\n};\nvar getSlotCompoundVariant = (compoundVariants, slotName) => compoundVariants.filter((compoundVariant) => compoundVariant.css[slotName]).map((compoundVariant) => ({ ...compoundVariant, css: compoundVariant.css[slotName] }));\n\n// src/split-props.ts\nfunction splitProps(props, ...keys) {\n  const descriptors = Object.getOwnPropertyDescriptors(props);\n  const dKeys = Object.keys(descriptors);\n  const split = (k) => {\n    const clone = {};\n    for (let i = 0; i < k.length; i++) {\n      const key = k[i];\n      if (descriptors[key]) {\n        Object.defineProperty(clone, key, descriptors[key]);\n        delete descriptors[key];\n      }\n    }\n    return clone;\n  };\n  const fn = (key) => split(Array.isArray(key) ? key : dKeys.filter(key));\n  return keys.map(fn).concat(split(dKeys));\n}\n\n// src/uniq.ts\nvar uniq = (...items) => items.filter(Boolean).reduce((acc, item) => Array.from(/* @__PURE__ */ new Set([...acc, ...item])), []);\nexport {\n  compact,\n  createCss,\n  createMergeCss,\n  filterBaseConditions,\n  getSlotCompoundVariant,\n  getSlotRecipes,\n  hypenateProperty,\n  isBaseCondition,\n  isObject,\n  mapObject,\n  memo,\n  mergeProps,\n  splitProps,\n  toHash,\n  uniq,\n  walkObject,\n  withoutSpace\n};\n'
+  content: '// src/assert.ts\nfunction isObject(value) {\n  return typeof value === "object" && value != null && !Array.isArray(value);\n}\n\n// src/compact.ts\nfunction compact(value) {\n  return Object.fromEntries(Object.entries(value ?? {}).filter(([_, value2]) => value2 !== void 0));\n}\n\n// src/condition.ts\nvar isBaseCondition = (v) => v === "base";\nfunction filterBaseConditions(c) {\n  return c.slice().filter((v) => !isBaseCondition(v));\n}\n\n// src/css-important.ts\nvar importantRegex = /!(important)?/;\nfunction isImportant(value) {\n  return typeof value === "string" ? importantRegex.test(value) : false;\n}\nfunction withoutImportant(value) {\n  return typeof value === "string" ? value.replace(importantRegex, "").trim() : value;\n}\nfunction withoutSpace(str) {\n  return typeof str === "string" ? str.replaceAll(" ", "_") : str;\n}\n\n// src/hash.ts\nfunction toChar(code) {\n  return String.fromCharCode(code + (code > 25 ? 39 : 97));\n}\nfunction toName(code) {\n  let name = "";\n  let x;\n  for (x = Math.abs(code); x > 52; x = x / 52 | 0)\n    name = toChar(x % 52) + name;\n  return toChar(x % 52) + name;\n}\nfunction toPhash(h, x) {\n  let i = x.length;\n  while (i)\n    h = h * 33 ^ x.charCodeAt(--i);\n  return h;\n}\nfunction toHash(value) {\n  return toName(toPhash(5381, value) >>> 0);\n}\n\n// src/merge-props.ts\nfunction mergeProps(...sources) {\n  const objects = sources.filter(Boolean);\n  return objects.reduce((prev, obj) => {\n    Object.keys(obj).forEach((key) => {\n      const prevValue = prev[key];\n      const value = obj[key];\n      if (isObject(prevValue) && isObject(value)) {\n        prev[key] = mergeProps(prevValue, value);\n      } else {\n        prev[key] = value;\n      }\n    });\n    return prev;\n  }, {});\n}\n\n// src/walk-object.ts\nvar isNotNullish = (element) => element != null;\nfunction walkObject(target, predicate, options = {}) {\n  const { stop, getKey } = options;\n  function inner(value, path = []) {\n    if (isObject(value) || Array.isArray(value)) {\n      const result = {};\n      for (const [prop, child] of Object.entries(value)) {\n        const key = getKey?.(prop) ?? prop;\n        const childPath = [...path, key];\n        if (stop?.(value, childPath)) {\n          return predicate(value, path);\n        }\n        const next = inner(child, childPath);\n        if (isNotNullish(next)) {\n          result[key] = next;\n        }\n      }\n      return result;\n    }\n    return predicate(value, path);\n  }\n  return inner(target);\n}\nfunction mapObject(obj, fn) {\n  if (Array.isArray(obj))\n    return obj.map((value) => fn(value));\n  if (!isObject(obj))\n    return fn(obj);\n  return walkObject(obj, (value) => fn(value));\n}\n\n// src/normalize-style-object.ts\nfunction toResponsiveObject(values, breakpoints) {\n  return values.reduce((acc, current, index) => {\n    const key = breakpoints[index];\n    if (current != null) {\n      acc[key] = current;\n    }\n    return acc;\n  }, {});\n}\nfunction normalizeShorthand(styles, context) {\n  const { hasShorthand, resolveShorthand } = context.utility;\n  return walkObject(styles, (v) => v, {\n    getKey: (prop) => {\n      return hasShorthand ? resolveShorthand(prop) : prop;\n    }\n  });\n}\nfunction normalizeStyleObject(styles, context, shorthand = true) {\n  const { utility, conditions } = context;\n  const { hasShorthand, resolveShorthand } = utility;\n  return walkObject(\n    styles,\n    (value) => {\n      return Array.isArray(value) ? toResponsiveObject(value, conditions.breakpoints.keys) : value;\n    },\n    {\n      stop: (value) => Array.isArray(value),\n      getKey: shorthand ? (prop) => hasShorthand ? resolveShorthand(prop) : prop : void 0\n    }\n  );\n}\n\n// src/classname.ts\nvar fallbackCondition = {\n  shift: (v) => v,\n  finalize: (v) => v,\n  breakpoints: { keys: [] }\n};\nvar sanitize = (value) => typeof value === "string" ? value.replaceAll(/[\\n\\s]+/g, " ") : value;\nfunction createCss(context) {\n  const { utility, hash, conditions: conds = fallbackCondition } = context;\n  const formatClassName = (str) => [utility.prefix, str].filter(Boolean).join("-");\n  const hashFn = (conditions, className) => {\n    let result;\n    if (hash) {\n      const baseArray = [...conds.finalize(conditions), className];\n      result = formatClassName(toHash(baseArray.join(":")));\n    } else {\n      const baseArray = [...conds.finalize(conditions), formatClassName(className)];\n      result = baseArray.join(":");\n    }\n    return result;\n  };\n  return (styleObject = {}) => {\n    const normalizedObject = normalizeStyleObject(styleObject, context);\n    const classNames = /* @__PURE__ */ new Set();\n    walkObject(normalizedObject, (value, paths) => {\n      const important = isImportant(value);\n      if (value == null)\n        return;\n      const [prop, ...allConditions] = conds.shift(paths);\n      const conditions = filterBaseConditions(allConditions);\n      const transformed = utility.transform(prop, withoutImportant(sanitize(value)));\n      let className = hashFn(conditions, transformed.className);\n      if (important)\n        className = `${className}!`;\n      classNames.add(className);\n    });\n    return Array.from(classNames).join(" ");\n  };\n}\nfunction compactStyles(...styles) {\n  return styles.filter((style) => isObject(style) && Object.keys(compact(style)).length > 0);\n}\nfunction createMergeCss(context) {\n  function resolve(styles) {\n    const allStyles = compactStyles(...styles);\n    if (allStyles.length === 1)\n      return allStyles;\n    return allStyles.map((style) => normalizeShorthand(style, context));\n  }\n  function mergeCss(...styles) {\n    return mergeProps(...resolve(styles));\n  }\n  function assignCss(...styles) {\n    return Object.assign({}, ...resolve(styles));\n  }\n  return { mergeCss, assignCss };\n}\n\n// src/memo.ts\nvar memo = (fn) => {\n  const cache = /* @__PURE__ */ new Map();\n  const get = (...args) => {\n    const key = JSON.stringify(args);\n    if (cache.has(key)) {\n      return cache.get(key);\n    }\n    const result = fn(...args);\n    cache.set(key, result);\n    return result;\n  };\n  return get;\n};\n\n// src/hypenate-property.ts\nvar wordRegex = /([A-Z])/g;\nvar msRegex = /^ms-/;\nvar hypenateProperty = memo((property) => {\n  if (property.startsWith("--"))\n    return property;\n  return property.replace(wordRegex, "-$1").replace(msRegex, "-ms-").toLowerCase();\n});\n\n// src/slot.ts\nvar getSlotRecipes = (recipe = {}) => {\n  const init = (slot) => ({\n    className: [recipe.className, slot].filter(Boolean).join("__"),\n    base: recipe.base?.[slot] ?? {},\n    variants: {},\n    defaultVariants: recipe.defaultVariants ?? {},\n    compoundVariants: recipe.compoundVariants ? getSlotCompoundVariant(recipe.compoundVariants, slot) : []\n  });\n  const slots = recipe.slots ?? [];\n  const recipeParts = slots.map((slot) => [slot, init(slot)]);\n  for (const [variantsKey, variantsSpec] of Object.entries(recipe.variants ?? {})) {\n    for (const [variantKey, variantSpec] of Object.entries(variantsSpec)) {\n      recipeParts.forEach(([slot, slotRecipe]) => {\n        slotRecipe.variants[variantsKey] ??= {};\n        slotRecipe.variants[variantsKey][variantKey] = variantSpec[slot] ?? {};\n      });\n    }\n  }\n  return Object.fromEntries(recipeParts);\n};\nvar getSlotCompoundVariant = (compoundVariants, slotName) => compoundVariants.filter((compoundVariant) => compoundVariant.css[slotName]).map((compoundVariant) => ({ ...compoundVariant, css: compoundVariant.css[slotName] }));\n\n// src/split-props.ts\nfunction splitProps(props, ...keys) {\n  const descriptors = Object.getOwnPropertyDescriptors(props);\n  const dKeys = Object.keys(descriptors);\n  const split = (k) => {\n    const clone = {};\n    for (let i = 0; i < k.length; i++) {\n      const key = k[i];\n      if (descriptors[key]) {\n        Object.defineProperty(clone, key, descriptors[key]);\n        delete descriptors[key];\n      }\n    }\n    return clone;\n  };\n  const fn = (key) => split(Array.isArray(key) ? key : dKeys.filter(key));\n  return keys.map(fn).concat(split(dKeys));\n}\n\n// src/uniq.ts\nvar uniq = (...items) => items.filter(Boolean).reduce((acc, item) => Array.from(/* @__PURE__ */ new Set([...acc, ...item])), []);\nexport {\n  compact,\n  createCss,\n  createMergeCss,\n  filterBaseConditions,\n  getSlotCompoundVariant,\n  getSlotRecipes,\n  hypenateProperty,\n  isBaseCondition,\n  isObject,\n  mapObject,\n  memo,\n  mergeProps,\n  splitProps,\n  toHash,\n  uniq,\n  walkObject,\n  withoutSpace\n};\n'
 };
 
 // src/artifacts/generated/astish.mjs.json
@@ -1061,7 +1061,7 @@ function generatePreactJsxFactory(ctx) {
 import { outdent as outdent16 } from "outdent";
 import { match as match5 } from "ts-pattern";
 function generatePreactJsxPattern(ctx, filters) {
-  const { typeName, factoryName } = ctx.jsx;
+  const { typeName, factoryName, styleProps: jsxStyleProps2 } = ctx.jsx;
   const details = ctx.patterns.filterDetails(filters);
   return details.map((pattern) => {
     const { upperName, styleFnName, dashName, jsxName, props, blocklistType } = pattern;
@@ -1071,23 +1071,44 @@ function generatePreactJsxPattern(ctx, filters) {
       js: outdent16`
       import { h } from 'preact'
       import { forwardRef } from 'preact/compat'
-      ${ctx.file.import(factoryName, "./factory")}
+      ${ctx.file.import("mergeCss", "../css/css")}
+      ${ctx.file.import("splitProps", "../helpers")}
       ${ctx.file.import(styleFnName, `../patterns/${dashName}`)}
+      ${ctx.file.import(factoryName, "./factory")}
 
       export const ${jsxName} = /* @__PURE__ */ forwardRef(function ${jsxName}(props, ref) {
-        ${match5(props.length).with(
-        0,
+        ${match5(jsxStyleProps2).with(
+        "none",
         () => outdent16`
-          const styleProps = ${styleFnName}()
-          return h(${factoryName}.${jsxElement}, { ref, ...styleProps, ...props })
+          const [patternProps, restProps] = splitProps(props, ${JSON.stringify(props)})
+          
+          const styleProps = ${styleFnName}(patternProps)
+          const Comp = ${factoryName}("${jsxElement}", { base: styleProps })
+          
+          return h(Comp, { ref, ...restProps })
+          `
+      ).with(
+        "minimal",
+        () => outdent16`
+          const [patternProps, restProps] = splitProps(props, ${JSON.stringify(props)})
+          
+          const styleProps = ${styleFnName}(patternProps)
+          const cssProps = { css: mergeCss(styleProps, props.css) }
+          const mergedProps = { ref, ...restProps, ...cssProps }
+          
+          return h(${factoryName}.${jsxElement}, mergedProps)
           `
-      ).otherwise(
+      ).with(
+        "all",
         () => outdent16`
-          const { ${props.join(", ")}, ...restProps } = props
-          const styleProps = ${styleFnName}({${props.join(", ")}})
-          return h(${factoryName}.${jsxElement}, { ref, ...styleProps, ...restProps })
+          const [patternProps, restProps] = splitProps(props, ${JSON.stringify(props)})
+          
+          const styleProps = ${styleFnName}(patternProps)
+          const mergedProps = { ref, ...styleProps, ...restProps }
+          
+          return h(${factoryName}.${jsxElement}, mergedProps)
           `
-      )}
+      ).exhaustive()}
       })
       `,
       dts: outdent16`
@@ -1366,7 +1387,7 @@ function generateQwikJsxFactory(ctx) {
 import { outdent as outdent21 } from "outdent";
 import { match as match6 } from "ts-pattern";
 function generateQwikJsxPattern(ctx, filters) {
-  const { typeName, factoryName } = ctx.jsx;
+  const { typeName, factoryName, styleProps: jsxStyleProps2 } = ctx.jsx;
   const details = ctx.patterns.filterDetails(filters);
   return details.map((pattern) => {
     const { upperName, styleFnName, dashName, jsxName, props, blocklistType } = pattern;
@@ -1375,23 +1396,44 @@ function generateQwikJsxPattern(ctx, filters) {
       name: dashName,
       js: outdent21`
       import { h } from '@builder.io/qwik'
-      ${ctx.file.import(factoryName, "./factory")}
+      ${ctx.file.import("mergeCss", "../css/css")}
+      ${ctx.file.import("splitProps", "../helpers")}
       ${ctx.file.import(styleFnName, `../patterns/${dashName}`)}
+      ${ctx.file.import(factoryName, "./factory")}
 
-      export const ${jsxName} = function ${jsxName}(props) {
-        ${match6(props.length).with(
-        0,
+      export const ${jsxName} = /* @__PURE__ */ function ${jsxName}(props) {
+        ${match6(jsxStyleProps2).with(
+        "none",
+        () => outdent21`
+          const [patternProps, restProps] = splitProps(props, ${JSON.stringify(props)})
+          
+          const styleProps = ${styleFnName}(patternProps)
+          const Comp = ${factoryName}("${jsxElement}", { base: styleProps })
+          
+          return h(Comp, restProps)
+          `
+      ).with(
+        "minimal",
         () => outdent21`
-        const styleProps = ${styleFnName}()
-        return h(${factoryName}.${jsxElement}, { ...styleProps, ...props })
+          const [patternProps, restProps] = splitProps(props, ${JSON.stringify(props)})
+          
+          const styleProps = ${styleFnName}(patternProps)
+          const cssProps = { css: mergeCss(styleProps, props.css) }
+          const mergedProps = { ...restProps, ...cssProps }
+
+          return h(${factoryName}.${jsxElement}, mergedProps)
           `
-      ).otherwise(
+      ).with(
+        "all",
         () => outdent21`
-        const { ${props.join(", ")}, ...restProps } = props
-        const styleProps = ${styleFnName}({${props.join(", ")}})
-        return h(${factoryName}.${jsxElement}, { ...styleProps, ...restProps })
+          const [patternProps, restProps] = splitProps(props, ${JSON.stringify(props)})
+          
+          const styleProps = ${styleFnName}(patternProps)
+          const mergedProps = { ...styleProps, ...restProps }
+          
+          return h(${factoryName}.${jsxElement}, mergedProps)
           `
-      )}
+      ).exhaustive()}
       }
       `,
       dts: outdent21`
@@ -1677,7 +1719,7 @@ function generateReactJsxFactory(ctx) {
 import { outdent as outdent26 } from "outdent";
 import { match as match7 } from "ts-pattern";
 function generateReactJsxPattern(ctx, filters) {
-  const { typeName, factoryName } = ctx.jsx;
+  const { typeName, factoryName, styleProps: jsxStyleProps2 } = ctx.jsx;
   const details = ctx.patterns.filterDetails(filters);
   return details.map((pattern) => {
     const { upperName, styleFnName, dashName, jsxName, props, blocklistType } = pattern;
@@ -1686,24 +1728,45 @@ function generateReactJsxPattern(ctx, filters) {
       name: dashName,
       js: outdent26`
       import { createElement, forwardRef } from 'react'
-      ${ctx.file.import(factoryName, "./factory")}
+      ${ctx.file.import("mergeCss", "../css/css")}
+      ${ctx.file.import("splitProps", "../helpers")}
       ${ctx.file.import(styleFnName, `../patterns/${dashName}`)}
+      ${ctx.file.import(factoryName, "./factory")}
 
       export const ${jsxName} = /* @__PURE__ */ forwardRef(function ${jsxName}(props, ref) {
-        ${match7(props.length).with(
-        0,
+        ${match7(jsxStyleProps2).with(
+        "none",
+        () => outdent26`
+          const [patternProps, restProps] = splitProps(props, ${JSON.stringify(props)})
+          
+          const styleProps = ${styleFnName}(patternProps)
+          const Comp = ${factoryName}("${jsxElement}", { base: styleProps })
+          
+          return createElement(Comp, { ref, ...restProps })
+          `
+      ).with(
+        "minimal",
         () => outdent26`
-        const styleProps = ${styleFnName}()
-        return createElement(${factoryName}.${jsxElement}, { ref, ...styleProps, ...props })
+          const [patternProps, restProps] = splitProps(props, ${JSON.stringify(props)})
+          
+          const styleProps = ${styleFnName}(patternProps)
+          const cssProps = { css: mergeCss(styleProps, props.css) }
+          const mergedProps = { ref, ...restProps, ...cssProps }
+
+          return createElement(${factoryName}.${jsxElement}, mergedProps)
           `
-      ).otherwise(
+      ).with(
+        "all",
         () => outdent26`
-        const { ${props.join(", ")}, ...restProps } = props
-        const styleProps = ${styleFnName}({${props.join(", ")}})
-        return createElement(${factoryName}.${jsxElement}, { ref, ...styleProps, ...restProps })
+          const [patternProps, restProps] = splitProps(props, ${JSON.stringify(props)})
+          
+          const styleProps = ${styleFnName}(patternProps)
+          const mergedProps = { ref, ...styleProps, ...restProps }
+
+          return createElement(${factoryName}.${jsxElement}, mergedProps)
           `
-      )}
-      })
+      ).exhaustive()}
+        })
       `,
       dts: outdent26`
       import type { FunctionComponent } from 'react'
@@ -2013,7 +2076,7 @@ function generateSolidJsxFactory(ctx) {
 import { outdent as outdent31 } from "outdent";
 import { match as match8 } from "ts-pattern";
 function generateSolidJsxPattern(ctx, filters) {
-  const { typeName, factoryName } = ctx.jsx;
+  const { typeName, factoryName, styleProps: jsxStyleProps2 } = ctx.jsx;
   const details = ctx.patterns.filterDetails(filters);
   return details.map((pattern) => {
     const { upperName, styleFnName, dashName, jsxName, props, blocklistType } = pattern;
@@ -2021,25 +2084,47 @@ function generateSolidJsxPattern(ctx, filters) {
     return {
       name: dashName,
       js: outdent31`
-    import { splitProps, mergeProps } from 'solid-js'
+    import { createMemo, mergeProps, splitProps } from 'solid-js'
     import { createComponent } from 'solid-js/web'
-    ${ctx.file.import(factoryName, "./factory")}
+    ${ctx.file.import("mergeCss", "../css/css")}
     ${ctx.file.import(styleFnName, `../patterns/${dashName}`)}
+    ${ctx.file.import(factoryName, "./factory")}
 
-    export function ${jsxName}(props) {
-      ${match8(props.length).with(
-        0,
+    export const ${jsxName} = /* @__PURE__ */ function ${jsxName}(props) {
+      ${match8(jsxStyleProps2).with(
+        "none",
         () => outdent31`
-          const styleProps = ${styleFnName}()
-          return createComponent(${factoryName}.${jsxElement}, mergeProps(styleProps, props))
+        const [patternProps, restProps] = splitProps(props, ${JSON.stringify(props)})
+        
+        const styleProps = ${styleFnName}(patternProps)
+        const Comp = ${factoryName}("${jsxElement}", { base: styleProps })
+        
+        return createComponent(Comp, restProps)
         `
-      ).otherwise(
+      ).with(
+        "minimal",
         () => outdent31`
-          const [patternProps, restProps] = splitProps(props, [${props.map((v) => JSON.stringify(v)).join(", ")}]);
+        const [patternProps, restProps] = splitProps(props, ${JSON.stringify(props)})
+        
+        const cssProps = createMemo(() => {
           const styleProps = ${styleFnName}(patternProps)
-          return createComponent(${factoryName}.${jsxElement}, mergeProps(styleProps, restProps))
+          return { css: mergeCss(styleProps, props.css) }
+        })
+        const mergedProps = mergeProps(restProps, cssProps)
+
+        return createComponent(${factoryName}.${jsxElement}, mergedProps)
+        `
+      ).with(
+        "all",
+        () => outdent31`
+        const [patternProps, restProps] = splitProps(props, ${JSON.stringify(props)})
+        
+        const styleProps = ${styleFnName}(patternProps)        
+        const mergedProps = mergeProps(styleProps, restProps)
+        
+        return createComponent(${factoryName}.${jsxElement}, mergedProps)
         `
-      )}
+      ).exhaustive()}
     }
     `,
       dts: outdent31`
@@ -2266,7 +2351,7 @@ function generateVueJsxFactory(ctx) {
           const combinedProps = computed(() => Object.assign({}, defaultProps, attrs))
 
           const splittedProps = computed(() => {
-            return splitProps(combinedProps.value, normalizeHTMLProps.keys, shouldForwardProp, __cvaFn__.variantKeys, isCssProperty)
+            return splitProps(combinedProps.value, normalizeHTMLProps.keys, __shouldForwardProps__, __cvaFn__.variantKeys, isCssProperty)
           })
 
           const recipeClass = computed(() => {
@@ -2394,30 +2479,62 @@ function generateVueJsxStringLiteralFactory(ctx) {
 
 // src/artifacts/vue-jsx/pattern.ts
 import { outdent as outdent37 } from "outdent";
+import { match as match9 } from "ts-pattern";
 function generateVueJsxPattern(ctx, filters) {
-  const { typeName, factoryName } = ctx.jsx;
+  const { typeName, factoryName, styleProps: jsxStyleProps2 } = ctx.jsx;
   const details = ctx.patterns.filterDetails(filters);
   return details.map((pattern) => {
     const { upperName, styleFnName, dashName, jsxName, props, blocklistType } = pattern;
     const { description, jsxElement = "div" } = pattern.config;
-    const propList = props.map((v) => JSON.stringify(v)).join(", ");
     return {
       name: dashName,
       js: outdent37`
     import { defineComponent, h, computed } from 'vue'
-    ${ctx.file.import(factoryName, "./factory")}
+    ${ctx.file.import("mergeCss", "../css/css")}
     ${ctx.file.import(styleFnName, `../patterns/${dashName}`)}
+    ${ctx.file.import(factoryName, "./factory")}
 
-    export const ${jsxName} = defineComponent({
+    export const ${jsxName} = /* @__PURE__ */ defineComponent({
         name: '${jsxName}',
         inheritAttrs: false,
-        props: [${propList}],
+        props: ${JSON.stringify(props)},
         setup(props, { attrs, slots }) {
+          ${match9(jsxStyleProps2).with(
+        "none",
+        () => outdent37`
+            const Comp = computed(() => {
+              const styleProps = ${styleFnName}(props)
+              return ${factoryName}("${jsxElement}", { base: styleProps })
+            })
+            
+            return () => {
+              return h(Comp.value, attrs, slots)
+            }
+            `
+      ).with(
+        "minimal",
+        () => outdent37`            
+            const cssProps = computed(() => {
+              const styleProps = ${styleFnName}(props)
+              return { css: mergeCss(styleProps, attrs.css) }
+            })
+            
+            return () => {
+              const mergedProps = { ...attrs, ...cssProps.value }
+              return h(${factoryName}.${jsxElement}, mergedProps, slots)
+            }
+            `
+      ).with(
+        "all",
+        () => outdent37`            
             const styleProps = computed(() => ${styleFnName}(props))
+            
             return () => {
-                const computedProps = { ...styleProps.value, ...attrs }
-                return h(${factoryName}.${jsxElement}, computedProps, slots)
+              const mergedProps = { ...styleProps.value, ...attrs }
+              return h(${factoryName}.${jsxElement}, mergedProps, slots)
             }
+            `
+      ).exhaustive()}
         }
     })
     `,
@@ -2664,7 +2781,7 @@ var composition_d_ts_default = {
 
 // src/artifacts/generated/recipe.d.ts.json
 var recipe_d_ts_default = {
-  content: "import type { RecipeRule } from './static-css'\nimport type { SystemStyleObject, DistributiveOmit, Pretty } from './system-types'\n\ntype StringToBoolean<T> = T extends 'true' | 'false' ? boolean : T\n\nexport type RecipeVariantRecord = Record<any, Record<any, SystemStyleObject>>\n\nexport type RecipeSelection<T extends RecipeVariantRecord> = keyof any extends keyof T\n  ? {}\n  : {\n      [K in keyof T]?: StringToBoolean<keyof T[K]> | undefined\n    }\n\nexport type RecipeVariantFn<T extends RecipeVariantRecord> = (props?: RecipeSelection<T>) => string\n\nexport type RecipeVariantProps<\n  T extends RecipeVariantFn<RecipeVariantRecord> | SlotRecipeVariantFn<string, SlotRecipeVariantRecord<string>>,\n> = Pretty<Parameters<T>[0]>\n\ntype RecipeVariantMap<T extends RecipeVariantRecord> = {\n  [K in keyof T]: Array<keyof T[K]>\n}\n\n/* -----------------------------------------------------------------------------\n * Recipe / Standard\n * -----------------------------------------------------------------------------*/\n\nexport interface RecipeRuntimeFn<T extends RecipeVariantRecord> extends RecipeVariantFn<T> {\n  __type: RecipeSelection<T>\n  variantKeys: (keyof T)[]\n  variantMap: RecipeVariantMap<T>\n  raw: (props?: RecipeSelection<T>) => SystemStyleObject\n  config: RecipeConfig<T>\n  splitVariantProps<Props extends RecipeSelection<T>>(\n    props: Props,\n  ): [RecipeSelection<T>, Pretty<DistributiveOmit<Props, keyof T>>]\n}\n\ntype OneOrMore<T> = T | Array<T>\n\nexport type RecipeCompoundSelection<T> = {\n  [K in keyof T]?: OneOrMore<StringToBoolean<keyof T[K]>> | undefined\n}\n\nexport type RecipeCompoundVariant<T> = T & {\n  css: SystemStyleObject\n}\n\nexport interface RecipeDefinition<T extends RecipeVariantRecord> {\n  /**\n   * The base styles of the recipe.\n   */\n  base?: SystemStyleObject\n  /**\n   * The multi-variant styles of the recipe.\n   */\n  variants?: T\n  /**\n   * The default variants of the recipe.\n   */\n  defaultVariants?: RecipeSelection<T>\n  /**\n   * The styles to apply when a combination of variants is selected.\n   */\n  compoundVariants?: Pretty<RecipeCompoundVariant<RecipeCompoundSelection<T>>>[]\n  /**\n   * Variants to pre-generate, will be include in the final `config.staticCss`\n   */\n  staticCss?: RecipeRule[]\n}\n\nexport type RecipeCreatorFn = <T extends RecipeVariantRecord>(config: RecipeDefinition<T>) => RecipeRuntimeFn<T>\n\ninterface RecipeConfigMeta {\n  /**\n   * The name of the recipe.\n   */\n  className: string\n  /**\n   * The description of the recipe. This will be used in the JSDoc comment.\n   */\n  description?: string\n  /**\n   * The jsx elements to track for this recipe. Can be string or Regexp.\n   *\n   * @default capitalize(recipe.name)\n   * @example ['Button', 'Link', /Button$/]\n   */\n  jsx?: Array<string | RegExp>\n}\n\nexport interface RecipeConfig<T extends RecipeVariantRecord = RecipeVariantRecord>\n  extends RecipeDefinition<T>,\n    RecipeConfigMeta {}\n\n/* -----------------------------------------------------------------------------\n * Recipe / Slot\n * -----------------------------------------------------------------------------*/\n\ntype SlotRecord<S extends string, T> = Partial<Record<S, T>>\n\nexport type SlotRecipeVariantRecord<S extends string> = Record<any, Record<any, SlotRecord<S, SystemStyleObject>>>\n\nexport type SlotRecipeVariantFn<S extends string, T extends RecipeVariantRecord> = (\n  props?: RecipeSelection<T>,\n) => SlotRecord<S, string>\n\nexport interface SlotRecipeRuntimeFn<S extends string, T extends SlotRecipeVariantRecord<S>>\n  extends SlotRecipeVariantFn<S, T> {\n  raw: (props?: RecipeSelection<T>) => Record<S, SystemStyleObject>\n  variantKeys: (keyof T)[]\n  variantMap: RecipeVariantMap<T>\n  splitVariantProps<Props extends RecipeSelection<T>>(props: Props): [RecipeSelection<T>, Pretty<Omit<Props, keyof T>>]\n}\n\nexport type SlotRecipeCompoundVariant<S extends string, T> = T & {\n  css: SlotRecord<S, SystemStyleObject>\n}\n\nexport interface SlotRecipeDefinition<S extends string, T extends SlotRecipeVariantRecord<S>> {\n  /**\n   * The parts/slots of the recipe.\n   */\n  slots: S[] | Readonly<S[]>\n  /**\n   * The base styles of the recipe.\n   */\n  base?: SlotRecord<S, SystemStyleObject>\n  /**\n   * The multi-variant styles of the recipe.\n   */\n  variants?: T\n  /**\n   * The default variants of the recipe.\n   */\n  defaultVariants?: RecipeSelection<T>\n  /**\n   * The styles to apply when a combination of variants is selected.\n   */\n  compoundVariants?: Pretty<SlotRecipeCompoundVariant<S, RecipeCompoundSelection<T>>>[]\n}\n\nexport type SlotRecipeCreatorFn = <S extends string, T extends SlotRecipeVariantRecord<S>>(\n  config: SlotRecipeDefinition<S, T>,\n) => SlotRecipeRuntimeFn<S, T>\n\nexport type SlotRecipeConfig<\n  S extends string = string,\n  T extends SlotRecipeVariantRecord<S> = SlotRecipeVariantRecord<S>,\n> = SlotRecipeDefinition<S, T> & RecipeConfigMeta\n"
+  content: "import type { RecipeRule } from './static-css'\nimport type { SystemStyleObject, DistributiveOmit, Pretty } from './system-types'\n\ntype StringToBoolean<T> = T extends 'true' | 'false' ? boolean : T\n\nexport type RecipeVariantRecord = Record<any, Record<any, SystemStyleObject>>\n\nexport type RecipeSelection<T extends RecipeVariantRecord> = keyof any extends keyof T\n  ? {}\n  : {\n      [K in keyof T]?: StringToBoolean<keyof T[K]> | undefined\n    }\n\nexport type RecipeVariantFn<T extends RecipeVariantRecord> = (props?: RecipeSelection<T>) => string\n\nexport type RecipeVariantProps<\n  T extends RecipeVariantFn<RecipeVariantRecord> | SlotRecipeVariantFn<string, SlotRecipeVariantRecord<string>>,\n> = Pretty<Parameters<T>[0]>\n\ntype RecipeVariantMap<T extends RecipeVariantRecord> = {\n  [K in keyof T]: Array<keyof T[K]>\n}\n\n/* -----------------------------------------------------------------------------\n * Recipe / Standard\n * -----------------------------------------------------------------------------*/\n\nexport interface RecipeRuntimeFn<T extends RecipeVariantRecord> extends RecipeVariantFn<T> {\n  __type: RecipeSelection<T>\n  variantKeys: (keyof T)[]\n  variantMap: RecipeVariantMap<T>\n  raw: (props?: RecipeSelection<T>) => SystemStyleObject\n  config: RecipeConfig<T>\n  splitVariantProps<Props extends RecipeSelection<T>>(\n    props: Props,\n  ): [RecipeSelection<T>, Pretty<DistributiveOmit<Props, keyof T>>]\n}\n\ntype OneOrMore<T> = T | Array<T>\n\nexport type RecipeCompoundSelection<T> = {\n  [K in keyof T]?: OneOrMore<StringToBoolean<keyof T[K]>> | undefined\n}\n\nexport type RecipeCompoundVariant<T> = T & {\n  css: SystemStyleObject\n}\n\nexport interface RecipeDefinition<T extends RecipeVariantRecord> {\n  /**\n   * The base styles of the recipe.\n   */\n  base?: SystemStyleObject\n  /**\n   * The multi-variant styles of the recipe.\n   */\n  variants?: T\n  /**\n   * The default variants of the recipe.\n   */\n  defaultVariants?: RecipeSelection<T>\n  /**\n   * The styles to apply when a combination of variants is selected.\n   */\n  compoundVariants?: Pretty<RecipeCompoundVariant<RecipeCompoundSelection<T>>>[]\n  /**\n   * Variants to pre-generate, will be include in the final `config.staticCss`\n   */\n  staticCss?: RecipeRule[]\n}\n\nexport type RecipeCreatorFn = <T extends RecipeVariantRecord>(config: RecipeDefinition<T>) => RecipeRuntimeFn<T>\n\ninterface RecipeConfigMeta {\n  /**\n   * The name of the recipe.\n   */\n  className: string\n  /**\n   * The description of the recipe. This will be used in the JSDoc comment.\n   */\n  description?: string\n  /**\n   * The jsx elements to track for this recipe. Can be string or Regexp.\n   *\n   * @default capitalize(recipe.name)\n   * @example ['Button', 'Link', /Button$/]\n   */\n  jsx?: Array<string | RegExp>\n}\n\nexport interface RecipeConfig<T extends RecipeVariantRecord = RecipeVariantRecord>\n  extends RecipeDefinition<T>,\n    RecipeConfigMeta {}\n\n/* -----------------------------------------------------------------------------\n * Recipe / Slot\n * -----------------------------------------------------------------------------*/\n\ntype SlotRecord<S extends string, T> = Partial<Record<S, T>>\n\nexport type SlotRecipeVariantRecord<S extends string> = Record<any, Record<any, SlotRecord<S, SystemStyleObject>>>\n\nexport type SlotRecipeVariantFn<S extends string, T extends RecipeVariantRecord> = (\n  props?: RecipeSelection<T>,\n) => SlotRecord<S, string>\n\nexport interface SlotRecipeRuntimeFn<S extends string, T extends SlotRecipeVariantRecord<S>>\n  extends SlotRecipeVariantFn<S, T> {\n  raw: (props?: RecipeSelection<T>) => Record<S, SystemStyleObject>\n  variantKeys: (keyof T)[]\n  variantMap: RecipeVariantMap<T>\n  splitVariantProps<Props extends RecipeSelection<T>>(props: Props): [RecipeSelection<T>, Pretty<Omit<Props, keyof T>>]\n}\n\nexport type SlotRecipeCompoundVariant<S extends string, T> = T & {\n  css: SlotRecord<S, SystemStyleObject>\n}\n\nexport interface SlotRecipeDefinition<S extends string, T extends SlotRecipeVariantRecord<S>> {\n  /**\n   * The parts/slots of the recipe.\n   */\n  slots: S[] | Readonly<S[]>\n  /**\n   * The base styles of the recipe.\n   */\n  base?: SlotRecord<S, SystemStyleObject>\n  /**\n   * The multi-variant styles of the recipe.\n   */\n  variants?: T\n  /**\n   * The default variants of the recipe.\n   */\n  defaultVariants?: RecipeSelection<T>\n  /**\n   * The styles to apply when a combination of variants is selected.\n   */\n  compoundVariants?: Pretty<SlotRecipeCompoundVariant<S, RecipeCompoundSelection<T>>>[]\n  /**\n   * Variants to pre-generate, will be include in the final `config.staticCss`\n   */\n  staticCss?: RecipeRule[]\n}\n\nexport type SlotRecipeCreatorFn = <S extends string, T extends SlotRecipeVariantRecord<S>>(\n  config: SlotRecipeDefinition<S, T>,\n) => SlotRecipeRuntimeFn<S, T>\n\nexport type SlotRecipeConfig<\n  S extends string = string,\n  T extends SlotRecipeVariantRecord<S> = SlotRecipeVariantRecord<S>,\n> = SlotRecipeDefinition<S, T> & RecipeConfigMeta\n"
 };
 
 // src/artifacts/generated/pattern.d.ts.json
@@ -2688,7 +2805,7 @@ var static_css_d_ts_default = {
 };
 
 // src/artifacts/types/generated.ts
-import { match as match9 } from "ts-pattern";
+import { match as match10 } from "ts-pattern";
 function getGeneratedTypes(ctx) {
   const rewriteImports = (code) => code.replace(/import\s+type\s+\{([^}]+)\}\s+from\s+['"]([^'"]+)['"]/g, ctx.file.importType("$1", "$2"));
   return {
@@ -2706,7 +2823,7 @@ function getGeneratedSystemTypes(ctx) {
   const rewriteImports = (code) => code.replace(/import\s+type\s+\{([^}]+)\}\s+from\s+['"]([^'"]+)['"]/g, ctx.file.importType("$1", "$2"));
   return {
     system: rewriteImports(
-      match9(ctx.jsx.styleProps).with("all", () => system_types_d_ts_default.content).with(
+      match10(ctx.jsx.styleProps).with("all", () => system_types_d_ts_default.content).with(
         "minimal",
         () => system_types_d_ts_default.content.replace("WithHTMLProps<T>,", "T,").replace(jsxStyleProps, "export type JsxStyleProps = WithCss")
       ).with(
@@ -2797,21 +2914,22 @@ function generatePropTypes(ctx) {
   ${strictTokens ? `
   type FilterString<T> = T extends \`\${infer _}\` ? T : never;
   type WithArbitraryValue<T> = T | \`[\${string}]\`
+  type PropOrCondition<T> = ConditionalValue<WithArbitraryValue<T>>;
 
   type PropertyTypeValue<T extends string> = T extends keyof PropertyTypes
-    ? ConditionalValue<FilterString<PropertyTypes[T]>>
+    ? PropOrCondition<FilterString<PropertyTypes[T]>>
     : never;
 
   type CssPropertyValue<T extends string> = T extends keyof CssProperties
-    ? ConditionalValue<FilterString<CssProperties[T]>>
+    ? PropOrCondition<FilterString<CssProperties[T]>>
     : never;
 
-  export type PropertyValue<T extends string> = WithArbitraryValue<T extends keyof PropertyTypes
+  export type PropertyValue<T extends string> = T extends keyof PropertyTypes
     ? PropertyTypeValue<T>
     : T extends keyof CssProperties
       ? CssPropertyValue<T>
-      : ConditionalValue<string | number>
-    >` : `
+      : PropOrCondition<string | number>
+    ` : `
 
   type PropertyTypeValue<T extends string> = T extends keyof PropertyTypes
     ? ConditionalValue<PropertyTypes[T] | CssValue<T> | (string & {})>
@@ -3393,7 +3511,7 @@ function generateKeyframeCss(ctx) {
 
 // src/artifacts/css/parser-css.ts
 import { logger } from "@pandacss/logger";
-import { P, match as match10 } from "ts-pattern";
+import { P, match as match11 } from "ts-pattern";
 var generateParserCss = (ctx, result) => {
   const { patterns, recipes } = ctx;
   result.css.forEach((css2) => {
@@ -3422,7 +3540,7 @@ var generateParserCss = (ctx, result) => {
         const recipeConfig = recipes.getConfig(recipeName);
         if (!recipeConfig)
           continue;
-        match10(recipe).with({ type: "jsx-recipe" }, () => {
+        match11(recipe).with({ type: "jsx-recipe" }, () => {
           recipe.data.forEach((data) => {
             const [recipeProps, styleProps] = recipes.splitProps(recipeName, data);
             ctx.stylesheet.processStyleProps(filterProps(ctx, styleProps));
@@ -3441,7 +3559,7 @@ var generateParserCss = (ctx, result) => {
   result.pattern.forEach((patternSet, name) => {
     try {
       for (const pattern of patternSet) {
-        match10(pattern).with({ type: "jsx-pattern", name: P.string }, ({ name: jsxName }) => {
+        match11(pattern).with({ type: "jsx-pattern", name: P.string }, ({ name: jsxName }) => {
           pattern.data.forEach((data) => {
             const fnName = patterns.find(jsxName);
             const styleProps = patterns.transform(fnName, data);
@@ -4113,7 +4231,7 @@ var Context = class {
     return new Utility({
       prefix: this.prefix.className,
       tokens: this.tokens,
-      config: this.isTemplateLiteralSyntax ? {} : config.utilities,
+      config: this.isTemplateLiteralSyntax ? {} : Object.assign({}, config.utilities),
       separator: config.separator,
       shorthands: config.shorthands,
       strictTokens: config.strictTokens
@@ -4192,6 +4310,7 @@ var getParserOptions = (ctx) => {
       isStyleProp: isValidProperty,
       nodes: [...patterns.details, ...recipes.details]
     },
+    isTemplateLiteralSyntax: ctx.isTemplateLiteralSyntax,
     patternKeys: patterns.keys,
     recipeKeys: recipes.keys,
     getRecipesByJsxName: recipes.filter,
@@ -4214,7 +4333,7 @@ var Generator = class extends Context {
     return generateArtifacts(this, ids);
   }
   appendCss(type) {
-    match11(type).with("preflight", () => generateResetCss(this)).with("tokens", () => generateTokenCss(this)).with("static", () => generateStaticCss(this)).with("global", () => generateGlobalCss(this)).with("keyframes", () => generateKeyframeCss(this)).otherwise(() => {
+    match12(type).with("preflight", () => generateResetCss(this)).with("tokens", () => generateTokenCss(this)).with("static", () => generateStaticCss(this)).with("global", () => generateGlobalCss(this)).with("keyframes", () => generateKeyframeCss(this)).otherwise(() => {
       throw new Error(`Unknown css artifact type <${type}>`);
     });
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/generator",
-  "version": "0.22.0",
+  "version": "0.23.0",
   "description": "The css generator for css panda",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -32,17 +32,16 @@
     "pluralize": "8.0.0",
     "postcss": "^8.4.31",
     "ts-pattern": "5.0.5",
-    "@pandacss/core": "0.22.0",
-    "@pandacss/is-valid-prop": "0.22.0",
-    "@pandacss/logger": "0.22.0",
-    "@pandacss/shared": "0.22.0",
-    "@pandacss/token-dictionary": "0.22.0",
-    "@pandacss/types": "0.22.0"
+    "@pandacss/core": "0.23.0",
+    "@pandacss/is-valid-prop": "0.23.0",
+    "@pandacss/logger": "0.23.0",
+    "@pandacss/shared": "0.23.0",
+    "@pandacss/token-dictionary": "0.23.0",
+    "@pandacss/types": "0.23.0"
   },
   "devDependencies": {
     "@types/pluralize": "0.0.33",
-    "hookable": "5.5.3",
-    "@pandacss/fixture": "0.22.0"
+    "hookable": "5.5.3"
   },
   "scripts": {
     "build": "tsup src/index.ts --format=esm,cjs --dts",