@pandacss/generator 0.0.0-dev-20231020171339 → 0.0.0-dev-20231020173315

package/dist/index.mjs

@@ -99,7 +99,7 @@ var getMessages = (ctx) => ({
 
 // src/artifacts/index.ts
 import { isObject } from "@pandacss/shared";
-import outdent43 from "outdent";
+import outdent44 from "outdent";
 
 // src/artifacts/css/global-css.ts
 var generateGlobalCss = (ctx) => {
@@ -619,11 +619,7 @@ function generateStringLiteralConditions(ctx) {
 // src/artifacts/js/css-fn.ts
 import { outdent as outdent4 } from "outdent";
 function generateCssFn(ctx) {
-  const {
-    utility,
-    config: { hash, prefix },
-    conditions
-  } = ctx;
+  const { utility, hash, prefix, conditions } = ctx;
   const { separator, getPropShorthands } = utility;
   return {
     dts: outdent4`
@@ -678,14 +674,14 @@ function generateCssFn(ctx) {
     `}
 
     const context = {
-      ${hash ? "hash: true," : ""}
+      ${hash.className ? "hash: true," : ""}
       conditions: {
         shift: sortConditions,
         finalize: finalizeConditions,
         breakpoints: { keys: ${JSON.stringify(conditions.breakpoints.keys)} }
       },
       utility: {
-        ${prefix ? "prefix: " + JSON.stringify(prefix) + "," : ""}
+        ${prefix.className ? "prefix: " + JSON.stringify(prefix.className) + "," : ""}
         transform: ${utility.hasShorthand ? `(prop, value) => {
               const key = resolveShorthand(prop)
               const propKey = classNameByProp.get(key) || hypenateProperty(key)
@@ -708,18 +704,15 @@ function generateCssFn(ctx) {
 // src/artifacts/js/css-fn.string-literal.ts
 import { outdent as outdent5 } from "outdent";
 function generateStringLiteralCssFn(ctx) {
-  const {
-    utility,
-    config: { hash, prefix }
-  } = ctx;
+  const { utility, hash, prefix } = ctx;
   const { separator } = utility;
   return {
     dts: outdent5`
     export declare function css(template: { raw: readonly string[] | ArrayLike<string> }): string
     `,
     js: outdent5`
-    ${ctx.file.import("astish, createCss, withoutSpace", "../helpers")}
-    ${ctx.file.import("sortConditions, finalizeConditions", "./conditions")}
+    ${ctx.file.import("astish, createCss, isObject, mergeProps, withoutSpace", "../helpers")}
+    ${ctx.file.import("finalizeConditions, sortConditions", "./conditions")}
 
     function transform(prop, value) {
       const className = \`$\{prop}${separator}$\{withoutSpace(value)}\`
@@ -727,14 +720,14 @@ function generateStringLiteralCssFn(ctx) {
     }
 
     const context = {
-      hash: ${hash ? "true" : "false"},
+      hash: ${hash.className ? "true" : "false"},
       conditions: {
         shift: sortConditions,
         finalize: finalizeConditions,
         breakpoints: { keys: [] },
       },
       utility: {
-        prefix: ${prefix ? JSON.stringify(prefix) : void 0},
+        prefix: ${prefix.className ? JSON.stringify(prefix.className) : void 0},
         transform,
         hasShorthand: false,
         resolveShorthand(prop) {
@@ -745,9 +738,9 @@ function generateStringLiteralCssFn(ctx) {
 
     const cssFn = createCss(context)
 
-    export const css = (str) => {
-      return cssFn(astish(str[0]))
-    }
+    const fn = (style) => (isObject(style) ? style : astish(style[0]))
+    export const css = (...styles) => cssFn(mergeProps(...styles.filter(Boolean).map(fn)))
+    css.raw = (...styles) => mergeProps(...styles.filter(Boolean).map(fn))
     `
   };
 }
@@ -757,11 +750,19 @@ import { outdent as outdent6 } from "outdent";
 function generateCvaFn(ctx) {
   return {
     js: outdent6`
-    ${ctx.file.import("compact, splitProps", "../helpers")}
+    ${ctx.file.import("compact, mergeProps, splitProps, uniq", "../helpers")}
     ${ctx.file.import("css, mergeCss", "./css")}
 
+    const defaults = (conf) => ({
+      base: {},
+      variants: {},
+      defaultVariants: {},
+      compoundVariants: [],
+      ...conf,
+    })
+
     export function cva(config) {
-      const { base = {}, variants = {}, defaultVariants = {}, compoundVariants = [] } = config
+      const { base, variants, defaultVariants, compoundVariants } = defaults(config)
 
       function resolve(props = {}) {
         const computedVariants = { ...defaultVariants, ...compact(props) }
@@ -775,6 +776,19 @@ function generateCvaFn(ctx) {
         return mergeCss(variantCss, compoundVariantCss)
       }
 
+      function merge(cvaConfig) {
+        const override = defaults(cvaConfig)
+        const variantKeys = uniq(override.variantKeys, Object.keys(variants))
+        return cva({
+          base: mergeCss(base, override.base),
+          variants: Object.fromEntries(
+            variantKeys.map((key) => [key, mergeCss(variants[key], override.variants[key])]),
+          ),
+          defaultVariants: mergeProps(defaultVariants, override.defaultVariants),
+          compoundVariants: [...compoundVariants, ...override.compoundVariants],
+        })
+      }
+
       function cvaFn(props) {
         return css(resolve(props))
       }
@@ -793,6 +807,7 @@ function generateCvaFn(ctx) {
         variantKeys,
         raw: resolve,
         config,
+        merge,
         splitVariantProps,
       })
     }
@@ -867,7 +882,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 result = {};\n  for (const source of sources) {\n    for (const [key, value] of Object.entries(source)) {\n      if (isObject(value)) {\n        result[key] = mergeProps(result[key] || {}, value);\n      } else {\n        result[key] = value;\n      }\n    }\n  }\n  return result;\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 (!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) {\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: (prop) => {\n        return hasShorthand ? resolveShorthand(prop) : prop;\n      }\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}\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  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 __sources = sources.filter(Boolean);\n  const result = {};\n  for (const source of __sources) {\n    for (const [key, value] of Object.entries(source)) {\n      if (isObject(value)) {\n        result[key] = mergeProps(result[key] || {}, value);\n      } else {\n        result[key] = value;\n      }\n    }\n  }\n  return result;\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 (!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) {\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: (prop) => {\n        return hasShorthand ? resolveShorthand(prop) : prop;\n      }\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
@@ -935,11 +950,52 @@ function generateIsValidProp(ctx) {
   };
 }
 
+// src/artifacts/js/jsx-helper.ts
+import { outdent as outdent10 } from "outdent";
+import { match as match2 } from "ts-pattern";
+function generatedJsxHelpers(ctx) {
+  return {
+    js: match2(ctx.isTemplateLiteralSyntax).with(
+      true,
+      () => outdent10`
+      export const getDisplayName = (Component) => {
+        if (typeof Component === 'string') return Component
+        return Component?.displayName || Component?.name || 'Component'
+      }`
+    ).otherwise(
+      () => outdent10`
+    ${ctx.file.import("isCssProperty", "./is-valid-prop")}
+
+    export const defaultShouldForwardProp = (prop, variantKeys) => !variantKeys.includes(prop) && !isCssProperty(prop)
+
+    export const composeShouldForwardProps = (tag, shouldForwardProp) =>
+      tag.__shouldForwardProps__ && shouldForwardProp
+        ? (propName) => tag.__shouldForwardProps__(propName) && shouldForwardProp(propName)
+        : shouldForwardProp
+
+    export const composeCvaFn = (cvaA, cvaB) => {
+      if (cvaA && !cvaB) return cvaA
+      if (!cvaA && cvaB) return cvaB
+      if ((cvaA.__cva__ && cvaB.__cva__) || (cvaA.__recipe__ && cvaB.__recipe__)) return cvaA.merge(cvaB.config)
+      const error = new TypeError('Cannot merge cva with recipe. Please use either cva or recipe.')
+      TypeError.captureStackTrace?.(error)
+      throw error
+    }
+
+    export const getDisplayName = (Component) => {
+      if (typeof Component === 'string') return Component
+      return Component?.displayName || Component?.name || 'Component'
+    }
+  `
+    )
+  };
+}
+
 // src/artifacts/js/pattern.ts
 import { unionType } from "@pandacss/shared";
 import { stringify } from "javascript-stringify";
-import { outdent as outdent10 } from "outdent";
-import { match as match2 } from "ts-pattern";
+import { outdent as outdent11 } from "outdent";
+import { match as match3 } from "ts-pattern";
 function generatePattern(ctx) {
   if (ctx.patterns.isEmpty())
     return;
@@ -956,7 +1012,7 @@ function generatePattern(ctx) {
     }
     return {
       name: dashName,
-      dts: outdent10`
+      dts: outdent11`
       ${ctx.file.importType("SystemStyleObject, ConditionalValue", "../types/index")}
       ${ctx.file.importType("Properties", "../types/csstype")}
       ${ctx.file.importType("PropertyValue", "../types/prop-type")}
@@ -966,7 +1022,7 @@ function generatePattern(ctx) {
       export interface ${upperName}Properties {
          ${Object.keys(properties ?? {}).map((key) => {
         const value = properties[key];
-        return match2(value).with({ type: "property" }, (value2) => {
+        return match3(value).with({ type: "property" }, (value2) => {
           return `${key}?: PropertyValue<'${value2.value}'>`;
         }).with({ type: "token" }, (value2) => {
           if (value2.property) {
@@ -981,7 +1037,7 @@ function generatePattern(ctx) {
       }).join("\n	")}
       }
 
-      ${strict ? outdent10`export declare function ${baseName}(styles: ${upperName}Properties): string` : outdent10`
+      ${strict ? outdent11`export declare function ${baseName}(styles: ${upperName}Properties): string` : outdent11`
 
           interface ${upperName}Styles extends ${upperName}Properties, DistributiveOmit<SystemStyleObject, keyof ${upperName}Properties ${blocklistType}> {}
 
@@ -995,7 +1051,7 @@ function generatePattern(ctx) {
           `}
 
      `,
-      js: outdent10`
+      js: outdent11`
     ${ctx.file.import(helperImports.join(", "), "../helpers")}
     ${ctx.file.import("css", "../css/index")}
 
@@ -1014,8 +1070,8 @@ transform`)}
 // src/artifacts/js/recipe.ts
 import { isSlotRecipe } from "@pandacss/core";
 import { unionType as unionType2 } from "@pandacss/shared";
-import { outdent as outdent11 } from "outdent";
-import { match as match3 } from "ts-pattern";
+import { outdent as outdent12 } from "outdent";
+import { match as match4 } from "ts-pattern";
 var stringify2 = (value) => JSON.stringify(value, null, 2);
 var isBooleanValue = (value) => value === "true" || value === "false";
 function generateRecipes(ctx) {
@@ -1029,11 +1085,11 @@ function generateRecipes(ctx) {
   const createRecipeFn = {
     name: "create-recipe",
     dts: "",
-    js: outdent11`
+    js: outdent12`
    ${ctx.file.import("css", "../css/css")}
    ${ctx.file.import("assertCompoundVariant, getCompoundVariantCss", "../css/cva")}
    ${ctx.file.import("cx", "../css/cx")}
-   ${ctx.file.import("compact, createCss, withoutSpace", "../helpers")}
+   ${ctx.file.import("compact, createCss, splitProps, uniq, withoutSpace", "../helpers")}
 
    export const createRecipe = (name, defaultVariants, compoundVariants) => {
     const getRecipeStyles = (variants) => {
@@ -1080,6 +1136,30 @@ function generateRecipes(ctx) {
         },
       })
    }
+
+   export const mergeRecipes = (recipeA, recipeB) => {
+    if (recipeA && !recipeB) return recipeA
+    if (!recipeA && recipeB) return recipeB
+
+    const recipeFn = (...args) => cx(recipeA(...args), recipeB(...args))
+    const variantKeys = uniq(recipeA.variantKeys, recipeB.variantKeys)
+    const variantMap = variantKeys.reduce((acc, key) => {
+      acc[key] = uniq(recipeA.variantMap[key], recipeB.variantMap[key])
+      return acc
+    }, {})
+  
+    return Object.assign(recipeFn, {
+      __recipe__: true,
+      __name__: \`$\{recipeA.__name__} \${recipeB.__name__}\`,
+      raw: (props) => props,
+      variantKeys,
+      variantMap,
+      splitVariantProps(props) {
+        return splitProps(props, variantKeys)
+      },
+    })
+    }
+  }
   `
   };
   return [
@@ -1087,9 +1167,9 @@ function generateRecipes(ctx) {
     ...ctx.recipes.details.map((recipe) => {
       const { baseName, config, upperName, variantKeyMap, dashName } = recipe;
       const { description, defaultVariants, compoundVariants } = config;
-      const jsCode = match3(config).when(
+      const jsCode = match4(config).when(
         isSlotRecipe,
-        (config2) => outdent11`
+        (config2) => outdent12`
         ${ctx.file.import("splitProps, getSlotCompoundVariant", "../helpers")}
         ${ctx.file.import("createRecipe", "./create-recipe")}
 
@@ -1117,9 +1197,9 @@ function generateRecipes(ctx) {
         })
         `
       ).otherwise(
-        (config2) => outdent11`
+        (config2) => outdent12`
         ${ctx.file.import("splitProps", "../helpers")}
-        ${ctx.file.import("createRecipe", "./create-recipe")}
+        ${ctx.file.import("createRecipe, mergeRecipes", "./create-recipe")}
 
         const ${baseName}Fn = /* @__PURE__ */ createRecipe('${config2.className}', ${stringify2(
           defaultVariants ?? {}
@@ -1135,6 +1215,9 @@ function generateRecipes(ctx) {
           raw: (props) => props,
           variantKeys: ${baseName}VariantKeys,
           variantMap: ${baseName}VariantMap,
+          merge(recipe) {
+            return mergeRecipes(this, recipe)
+          },
           splitVariantProps(props) {
             return splitProps(props, ${baseName}VariantKeys)
           },
@@ -1144,10 +1227,9 @@ function generateRecipes(ctx) {
       return {
         name: dashName,
         js: jsCode,
-        dts: outdent11`
+        dts: outdent12`
         ${ctx.file.importType("ConditionalValue", "../types/index")}
-        ${ctx.file.importType("Pretty", "../types/helpers")}
-        ${ctx.file.importType("DistributiveOmit", "../types/system-types")}
+        ${ctx.file.importType("DistributiveOmit, Pretty", "../types/system-types")}
 
         interface ${upperName}Variant {
           ${Object.keys(variantKeyMap).map((key) => {
@@ -1184,10 +1266,10 @@ function generateRecipes(ctx) {
 }
 
 // src/artifacts/js/sva.ts
-import { outdent as outdent12 } from "outdent";
+import { outdent as outdent13 } from "outdent";
 function generateSvaFn(ctx) {
   return {
-    js: outdent12`
+    js: outdent13`
     ${ctx.file.import("getSlotRecipes, splitProps", "../helpers")}
     ${ctx.file.import("cva", "./cva")}
 
@@ -1224,7 +1306,7 @@ function generateSvaFn(ctx) {
       })
     }
     `,
-    dts: outdent12`
+    dts: outdent13`
     ${ctx.file.importType("SlotRecipeCreatorFn", "../types/recipe")}
 
     export declare const sva: SlotRecipeCreatorFn
@@ -1233,7 +1315,7 @@ function generateSvaFn(ctx) {
 }
 
 // src/artifacts/js/token.ts
-import outdent13 from "outdent";
+import outdent14 from "outdent";
 function generateTokenJs(ctx) {
   const { tokens } = ctx;
   const map = /* @__PURE__ */ new Map();
@@ -1244,7 +1326,7 @@ function generateTokenJs(ctx) {
   });
   const obj = Object.fromEntries(map);
   return {
-    js: outdent13`
+    js: outdent14`
   const tokens = ${JSON.stringify(obj, null, 2)}
 
   export function token(path, fallback) {
@@ -1257,7 +1339,7 @@ function generateTokenJs(ctx) {
 
   token.var = tokenVar
   `,
-    dts: outdent13`
+    dts: outdent14`
   ${ctx.file.importType("Token", "./tokens")}
 
   export declare const token: {
@@ -1271,19 +1353,21 @@ function generateTokenJs(ctx) {
 }
 
 // src/artifacts/preact-jsx/jsx.ts
-import { outdent as outdent14 } from "outdent";
+import { outdent as outdent15 } from "outdent";
 function generatePreactJsxFactory(ctx) {
   const { factoryName, componentName } = ctx.jsx;
   return {
-    js: outdent14`
+    js: outdent15`
     import { h } from 'preact'
     import { forwardRef } from 'preact/compat'
     import { useMemo } from 'preact/hooks'
+    ${ctx.file.import(
+      "defaultShouldForwardProp, composeShouldForwardProps, composeCvaFn, getDisplayName",
+      "./factory-helper"
+    )}
+    ${ctx.file.import("isCssProperty", "./is-valid-prop")}
     ${ctx.file.import("css, cx, cva", "../css/index")}
     ${ctx.file.import("splitProps, normalizeHTMLProps", "../helpers")}
-    ${ctx.file.import("isCssProperty", "./is-valid-prop")}
-
-    const defaultShouldForwardProp = (prop, variantKeys) => !variantKeys.includes(prop) && !isCssProperty(prop)
 
     function styledFn(Dynamic, configOrCva = {}, options = {}) {
       const cvaFn = configOrCva.__cva__ || configOrCva.__recipe__ ? configOrCva : cva(configOrCva)
@@ -1297,23 +1381,26 @@ function generatePreactJsxFactory(ctx) {
       )
 
       const ${componentName} = /* @__PURE__ */ forwardRef(function ${componentName}(props, ref) {
-        const { as: Element = Dynamic, children, ...restProps } = props
+        const { as: Element = Dynamic.__base__ || Dynamic, children, ...restProps } = props
+
+        const __cvaFn__ = composeCvaFn(Dynamic.__cva__, cvaFn)
+        const __shouldForwardProps__ = composeShouldForwardProps(Dynamic, shouldForwardProp)
 
         const combinedProps = useMemo(() => Object.assign({}, defaultProps, restProps), [restProps])
 
         const [forwardedProps, variantProps, styleProps, htmlProps, elementProps] = useMemo(() => {
-          return splitProps(combinedProps, shouldForwardProp, cvaFn.variantKeys, isCssProperty, normalizeHTMLProps.keys)
+          return splitProps(combinedProps, __shouldForwardProps__, __cvaFn__.variantKeys, isCssProperty, normalizeHTMLProps.keys)
         }, [combinedProps])
 
         function recipeClass() {
           const { css: cssStyles, ...propStyles } = styleProps
-          const compoundVariantStyles = cvaFn.__getCompoundVariantCss__?.(variantProps);
-          return cx(cvaFn(variantProps, false), css(compoundVariantStyles, propStyles, cssStyles), combinedProps.class, combinedProps.className)
+          const compoundVariantStyles = __cvaFn__.__getCompoundVariantCss__?.(variantProps)
+          return cx(__cvaFn__(variantProps, false), css(compoundVariantStyles, propStyles, cssStyles), combinedProps.class, combinedProps.className)
         }
 
         function cvaClass() {
           const { css: cssStyles, ...propStyles } = styleProps
-          const cvaStyles = cvaFn.raw(variantProps)
+          const cvaStyles = __cvaFn__.raw(variantProps)
           return cx(css(cvaStyles, propStyles, cssStyles), combinedProps.class, combinedProps.className)
         }
 
@@ -1329,8 +1416,13 @@ function generatePreactJsxFactory(ctx) {
         })
       })
 
-      const name = (typeof Dynamic === 'string' ? Dynamic : Dynamic.displayName || Dynamic.name) || 'Component'
+      const name = getDisplayName(Dynamic)
+      
       ${componentName}.displayName = \`${factoryName}.\${name}\`
+      ${componentName}.__cva__ = cvaFn
+      ${componentName}.__base__ = Dynamic
+      ${componentName}.__shouldForwardProps__ = shouldForwardProp
+      
       return ${componentName}
     }
 
@@ -1356,8 +1448,8 @@ function generatePreactJsxFactory(ctx) {
 }
 
 // src/artifacts/preact-jsx/pattern.ts
-import { outdent as outdent15 } from "outdent";
-import { match as match4 } from "ts-pattern";
+import { outdent as outdent16 } from "outdent";
+import { match as match5 } from "ts-pattern";
 function generatePreactJsxPattern(ctx) {
   const { typeName, factoryName } = ctx.jsx;
   return ctx.patterns.details.map((pattern) => {
@@ -1365,21 +1457,21 @@ function generatePreactJsxPattern(ctx) {
     const { description, jsxElement = "div" } = pattern.config;
     return {
       name: dashName,
-      js: outdent15`
+      js: outdent16`
       import { h } from 'preact'
       import { forwardRef } from 'preact/compat'
       ${ctx.file.import(factoryName, "./factory")}
       ${ctx.file.import(styleFnName, `../patterns/${dashName}`)}
 
       export const ${jsxName} = /* @__PURE__ */ forwardRef(function ${jsxName}(props, ref) {
-        ${match4(props.length).with(
+        ${match5(props.length).with(
         0,
-        () => outdent15`
+        () => outdent16`
           const styleProps = ${styleFnName}()
           return h(${factoryName}.${jsxElement}, { ref, ...styleProps, ...props })
           `
       ).otherwise(
-        () => outdent15`
+        () => outdent16`
           const { ${props.join(", ")}, ...restProps } = props
           const styleProps = ${styleFnName}({${props.join(", ")}})
           return h(${factoryName}.${jsxElement}, { ref, ...styleProps, ...restProps })
@@ -1387,7 +1479,7 @@ function generatePreactJsxPattern(ctx) {
       )}
       })
       `,
-      dts: outdent15`
+      dts: outdent16`
       import type { FunctionComponent } from 'preact'
       ${ctx.file.importType(`${upperName}Properties`, `../patterns/${dashName}`)}
       ${ctx.file.importType("DistributiveOmit", "../types/system-types")}
@@ -1403,48 +1495,61 @@ function generatePreactJsxPattern(ctx) {
 }
 
 // src/artifacts/preact-jsx/types.ts
-import { outdent as outdent16 } from "outdent";
+import { outdent as outdent17 } from "outdent";
 function generatePreactJsxTypes(ctx) {
   const { factoryName, componentName, upperName, typeName, variantName } = ctx.jsx;
   return {
-    jsxFactory: outdent16`
+    jsxFactory: outdent17`
 import type { ${upperName} } from '../types/jsx'
 export declare const ${factoryName}: ${upperName}
     `,
-    jsxType: outdent16`
+    jsxType: outdent17`
 import type { ComponentProps, JSX } from 'preact'
-${ctx.file.importType("Assign, JsxStyleProps, JsxHTMLProps", "./system-types")}
 ${ctx.file.importType("RecipeDefinition, RecipeSelection, RecipeVariantRecord", "./recipe")}
+${ctx.file.importType(
+      "Assign, DistributiveOmit, DistributiveUnion, JsxHTMLProps, JsxStyleProps, Pretty",
+      "./system-types"
+    )}
 
-type ElementType = keyof JSX.IntrinsicElements
+export type ElementType = JSX.ElementType
 
-type Dict = Record<string, unknown>
+interface Dict {
+  [k: string]: unknown
+}
 
 export interface ${componentName}<T extends ElementType, P extends Dict = {}> {
   (props: JsxHTMLProps<ComponentProps<T>, P> & JsxStyleProps): JSX.Element
   displayName?: string
 }
 
-interface RecipeFn { __type: any }
+interface RecipeFn {
+  __type: any
+}
 
-interface JsxFactoryOptions<TProps extends Dict> {
+export interface JsxFactoryOptions<TProps extends Dict> {
   dataAttr?: boolean
   defaultProps?: TProps
   shouldForwardProp?(prop: string, variantKeys: string[]): boolean
 }
 
-export type JsxRecipeProps<T extends ElementType, P extends Dict> = JsxHTMLProps<ComponentProps<T>, P>;
+export type JsxRecipeProps<T extends ElementType, P extends Dict> = JsxHTMLProps<ComponentProps<T>, P>
+
+export type JsxElement<T extends ElementType, P> = T extends ${componentName}<infer A, infer B>
+  ? ${componentName}<A, Pretty<DistributiveUnion<P, B>>>
+  : ${componentName}<T, P>
 
-interface JsxFactory {
+export interface JsxFactory {
   <T extends ElementType>(component: T): ${componentName}<T, {}>
-  <T extends ElementType, P extends RecipeVariantRecord>(component: T, recipe: RecipeDefinition<P>, options?: JsxFactoryOptions<JsxRecipeProps<T, RecipeSelection<P>>>): ${componentName}<
+  <T extends ElementType, P extends RecipeVariantRecord>(component: T, recipe: RecipeDefinition<P>, options?: JsxFactoryOptions<JsxRecipeProps<T, RecipeSelection<P>>>): JsxElement<
     T,
     RecipeSelection<P>
   >
-  <T extends ElementType, P extends RecipeFn>(component: T, recipeFn: P, options?: JsxFactoryOptions<JsxRecipeProps<T, P['__type']>>): ${componentName}<T, P['__type']>
+  <T extends ElementType, P extends RecipeFn>(component: T, recipeFn: P, options?: JsxFactoryOptions<JsxRecipeProps<T, P['__type']>>): JsxElement<T, P['__type']>
 }
 
-type JsxElements = { [K in keyof JSX.IntrinsicElements]: ${componentName}<K, {}> }
+export type JsxElements = {
+  [K in keyof JSX.IntrinsicElements]: ${componentName}<K, {}>
+}
 
 export type ${upperName} = JsxFactory & JsxElements
 
@@ -1456,21 +1561,26 @@ export type ${variantName}<T extends ${componentName}<any, any>> = T extends ${c
 }
 
 // src/artifacts/preact-jsx/jsx.string-literal.ts
-import { outdent as outdent17 } from "outdent";
+import { outdent as outdent18 } from "outdent";
 function generatePreactJsxStringLiteralFactory(ctx) {
   const { factoryName, componentName } = ctx.jsx;
   return {
-    js: outdent17`
+    js: outdent18`
     import { h } from 'preact'
     import { forwardRef } from 'preact/compat'
+    ${ctx.file.import("getDisplayName", "./factory-helper")}
     ${ctx.file.import("css, cx", "../css/index")}
 
     function createStyledFn(Dynamic) {
       return function styledFn(template) {
-        const baseClassName = css(template)
+        const styles = css.raw(template)
+
         const ${componentName} = /* @__PURE__ */ forwardRef(function ${componentName}(props, ref) {
-          const { as: Element = Dynamic, ...elementProps } = props
-          const classes = () => cx(baseClassName, elementProps.className)
+          const { as: Element = Dynamic.__base__ || Dynamic, ...elementProps } = props
+         
+          function classes() {
+            return cx(css(Dynamic.__styles__, styles), elementProps.className)
+          }
 
           return h(Element, {
             ref,
@@ -1479,8 +1589,12 @@ function generatePreactJsxStringLiteralFactory(ctx) {
           })
         })
 
-        const name = (typeof Dynamic === 'string' ? Dynamic : Dynamic.displayName || Dynamic.name) || 'Component'
+        const name = getDisplayName(Dynamic)
+        
         ${componentName}.displayName = \`${factoryName}.\${name}\`
+        ${componentName}.__styles__ = styles
+        ${componentName}.__base__ = Dynamic
+
         return ${componentName}
       }
     }
@@ -1507,31 +1621,35 @@ function generatePreactJsxStringLiteralFactory(ctx) {
 }
 
 // src/artifacts/preact-jsx/types.string-literal.ts
-import { outdent as outdent18 } from "outdent";
+import { outdent as outdent19 } from "outdent";
 function generatePreactJsxStringLiteralTypes(ctx) {
   const { factoryName, componentName, upperName, typeName } = ctx.jsx;
   return {
-    jsxFactory: outdent18`
+    jsxFactory: outdent19`
 ${ctx.file.importType(upperName, "../types/jsx")}
 export declare const ${factoryName}: ${upperName}
     `,
-    jsxType: outdent18`
+    jsxType: outdent19`
 import type { ComponentProps, JSX } from 'preact'
 
-type ElementType = keyof JSX.IntrinsicElements
+export type ElementType = JSX.ElementType
 
-type Dict = Record<string, unknown>
+interface Dict {
+  [k: string]: unknown
+}
 
 export type ${componentName}<T extends ElementType> = {
   (args: { raw: readonly string[] | ArrayLike<string> }): (props: ComponentProps<T>) => JSX.Element
   displayName?: string
 }
 
-interface JsxFactory {
+export interface JsxFactory {
   <T extends ElementType>(component: T): ${componentName}<T>
 }
 
-type JsxElements = { [K in keyof JSX.IntrinsicElements]: ${componentName}<K> }
+export type JsxElements = {
+  [K in keyof JSX.IntrinsicElements]: ${componentName}<K>
+}
 
 export type ${upperName} = JsxFactory & JsxElements
 
@@ -1541,18 +1659,20 @@ export type ${typeName}<T extends ElementType> = ComponentProps<T>
 }
 
 // src/artifacts/qwik-jsx/jsx.ts
-import { outdent as outdent19 } from "outdent";
+import { outdent as outdent20 } from "outdent";
 function generateQwikJsxFactory(ctx) {
   const { factoryName, componentName } = ctx.jsx;
   return {
-    js: outdent19`
+    js: outdent20`
     import { h } from '@builder.io/qwik'
+    ${ctx.file.import(
+      "defaultShouldForwardProp, composeShouldForwardProps, composeCvaFn, getDisplayName",
+      "./factory-helper"
+    )}
+    ${ctx.file.import("isCssProperty", "./is-valid-prop")}
     ${ctx.file.import("css, cx, cva", "../css/index")}
     ${ctx.file.import("splitProps, normalizeHTMLProps", "../helpers")}
-    ${ctx.file.import("isCssProperty", "./is-valid-prop")}
 
-    const defaultShouldForwardProp = (prop, variantKeys) => !variantKeys.includes(prop) && !isCssProperty(prop)
-          
     function styledFn(Dynamic, configOrCva = {}, options = {}) {
       const cvaFn = configOrCva.__cva__ || configOrCva.__recipe__ ? configOrCva : cva(configOrCva)
 
@@ -1565,22 +1685,25 @@ function generateQwikJsxFactory(ctx) {
       )
 
       const ${componentName} = function ${componentName}(props) {
-        const { as: Element = Dynamic, children, className, ...restProps } = props
+        const { as: Element = Dynamic.__base__ || Dynamic, children, className, ...restProps } = props
+
+        const __cvaFn__ = composeCvaFn(Dynamic.__cva__, cvaFn)
+        const __shouldForwardProps__ = composeShouldForwardProps(Dynamic, shouldForwardProp)
 
         const combinedProps = Object.assign({}, defaultProps, restProps)
         
         const [forwardedProps, variantProps, styleProps, htmlProps, elementProps] =
-          splitProps(combinedProps, shouldForwardProp, cvaFn.variantKeys, isCssProperty, normalizeHTMLProps.keys)
-
-        const { css: cssStyles, ...propStyles } = styleProps
+          splitProps(combinedProps, __shouldForwardProps__, __cvaFn__.variantKeys, isCssProperty, normalizeHTMLProps.keys)
 
         function recipeClass() {
-          const compoundVariantStyles = cvaFn.__getCompoundVariantCss__?.(variantProps);
-          return cx(cvaFn(variantProps, false), css(compoundVariantStyles, propStyles, cssStyles), combinedProps.class, className)
+          const { css: cssStyles, ...propStyles } = styleProps
+          const compoundVariantStyles = __cvaFn__.__getCompoundVariantCss__?.(variantProps);
+          return cx(__cvaFn__(variantProps, false), css(compoundVariantStyles, propStyles, cssStyles), combinedProps.class, className)
         }
-
+        
         function cvaClass() {
-          const cvaStyles = cvaFn.raw(variantProps)
+          const { css: cssStyles, ...propStyles } = styleProps
+          const cvaStyles = __cvaFn__.raw(variantProps)
           return cx(css(cvaStyles, propStyles, cssStyles), combinedProps.class, className)
         }
 
@@ -1595,8 +1718,13 @@ function generateQwikJsxFactory(ctx) {
         })
       }
 
-      const name = (typeof Dynamic === 'string' ? Dynamic : Dynamic.displayName || Dynamic.name) || 'Component'
+      const name = getDisplayName(Dynamic)
+      
       ${componentName}.displayName = \`${factoryName}.\${name}\`
+      ${componentName}.__cva__ = cvaFn
+      ${componentName}.__base__ = Dynamic
+      ${componentName}.__shouldForwardProps__ = shouldForwardProp
+      
       return ${componentName}
     }
 
@@ -1623,8 +1751,8 @@ function generateQwikJsxFactory(ctx) {
 }
 
 // src/artifacts/qwik-jsx/pattern.ts
-import { outdent as outdent20 } from "outdent";
-import { match as match5 } from "ts-pattern";
+import { outdent as outdent21 } from "outdent";
+import { match as match6 } from "ts-pattern";
 function generateQwikJsxPattern(ctx) {
   const { typeName, factoryName } = ctx.jsx;
   return ctx.patterns.details.map((pattern) => {
@@ -1632,20 +1760,20 @@ function generateQwikJsxPattern(ctx) {
     const { description, jsxElement = "div" } = pattern.config;
     return {
       name: dashName,
-      js: outdent20`
+      js: outdent21`
       import { h } from '@builder.io/qwik'
       ${ctx.file.import(factoryName, "./factory")}
       ${ctx.file.import(styleFnName, `../patterns/${dashName}`)}
 
       export const ${jsxName} = function ${jsxName}(props) {
-        ${match5(props.length).with(
+        ${match6(props.length).with(
         0,
-        () => outdent20`
+        () => outdent21`
         const styleProps = ${styleFnName}()
         return h(${factoryName}.${jsxElement}, { ...styleProps, ...props })
           `
       ).otherwise(
-        () => outdent20`
+        () => outdent21`
         const { ${props.join(", ")}, ...restProps } = props
         const styleProps = ${styleFnName}({${props.join(", ")}})
         return h(${factoryName}.${jsxElement}, { ...styleProps, ...restProps })
@@ -1653,7 +1781,7 @@ function generateQwikJsxPattern(ctx) {
       )}
       }
       `,
-      dts: outdent20`
+      dts: outdent21`
       import type { Component } from '@builder.io/qwik'
       ${ctx.file.importType(`${upperName}Properties`, `../patterns/${dashName}`)}
       ${ctx.file.importType(typeName, "../types/jsx")}
@@ -1669,20 +1797,23 @@ function generateQwikJsxPattern(ctx) {
 }
 
 // src/artifacts/qwik-jsx/types.ts
-import { outdent as outdent21 } from "outdent";
+import { outdent as outdent22 } from "outdent";
 function generateQwikJsxTypes(ctx) {
   const { factoryName, componentName, upperName, typeName, variantName } = ctx.jsx;
   return {
-    jsxFactory: outdent21`
+    jsxFactory: outdent22`
 ${ctx.file.importType(upperName, "../types/jsx")}
 export declare const ${factoryName}: ${upperName}
     `,
-    jsxType: outdent21`
+    jsxType: outdent22`
 import type { Component, QwikIntrinsicElements } from '@builder.io/qwik'
-import type { Assign, JsxStyleProps, PatchedHTMLProps } from './system-types'
-import type { RecipeDefinition, RecipeSelection, RecipeVariantRecord } from './recipe'
+${ctx.file.importType("RecipeDefinition, RecipeSelection, RecipeVariantRecord", "./recipe")}
+${ctx.file.importType(
+      "Assign, DistributiveOmit, DistributiveUnion, JsxStyleProps, PatchedHTMLProps, Pretty",
+      "./system-types"
+    )}
 
-type ElementType = keyof QwikIntrinsicElements | Component<any>
+export type ElementType = keyof QwikIntrinsicElements | Component<any>
 
 export type ComponentProps<T extends ElementType> = T extends keyof QwikIntrinsicElements
   ? QwikIntrinsicElements[T]
@@ -1690,13 +1821,17 @@ export type ComponentProps<T extends ElementType> = T extends keyof QwikIntrinsi
   ? P
   : never
 
-type Dict = Record<string, unknown>
+interface Dict {
+  [k: string]: unknown
+}
 
 export interface ${componentName}<T extends ElementType, P extends Dict = {}> extends Component<Assign<ComponentProps<T>, Assign<PatchedHTMLProps, Assign<JsxStyleProps, P>>>> {}
 
-interface RecipeFn { __type: any }
+interface RecipeFn {
+  __type: any
+}
 
-interface JsxFactoryOptions<TProps extends Dict> {
+export interface JsxFactoryOptions<TProps extends Dict> {
   dataAttr?: boolean
   defaultProps?: TProps
   shouldForwardProp?(prop: string, variantKeys: string[]): boolean
@@ -1704,16 +1839,22 @@ interface JsxFactoryOptions<TProps extends Dict> {
 
 export type JsxRecipeProps<T extends ElementType, P extends Dict> = JsxHTMLProps<ComponentProps<T>, P>;
 
-interface JsxFactory {
+export type JsxElement<T extends ElementType, P> = T extends ${componentName}<infer A, infer B>
+  ? ${componentName}<A, Pretty<DistributiveUnion<P, B>>>
+  : ${componentName}<T, P>
+
+export interface JsxFactory {
   <T extends ElementType>(component: T): ${componentName}<T, {}>
-  <T extends ElementType, P extends RecipeVariantRecord>(component: T, recipe: RecipeDefinition<P>, options?: JsxFactoryOptions<JsxRecipeProps<T, RecipeSelection<P>>>): ${componentName}<
+  <T extends ElementType, P extends RecipeVariantRecord>(component: T, recipe: RecipeDefinition<P>, options?: JsxFactoryOptions<JsxRecipeProps<T, RecipeSelection<P>>>): JsxElement<
     T,
     RecipeSelection<P>
   >
-  <T extends ElementType, P extends RecipeFn>(component: T, recipeFn: P, options?: JsxFactoryOptions<JsxRecipeProps<T, P['__type']>>): ${componentName}<T, P['__type']>
+  <T extends ElementType, P extends RecipeFn>(component: T, recipeFn: P, options?: JsxFactoryOptions<JsxRecipeProps<T, P['__type']>>): JsxElement<T, P['__type']>
 }
 
-type JsxElements = { [K in keyof QwikIntrinsicElements]: ${componentName}<K, {}> }
+export type JsxElements = {
+  [K in keyof QwikIntrinsicElements]: ${componentName}<K, {}>
+}
 
 export type ${upperName} = JsxFactory & JsxElements
 
@@ -1725,29 +1866,38 @@ export type ${variantName}<T extends ${componentName}<any, any>> = T extends ${c
 }
 
 // src/artifacts/qwik-jsx/jsx.string-literal.ts
-import { outdent as outdent22 } from "outdent";
+import { outdent as outdent23 } from "outdent";
 function generateQwikJsxStringLiteralFactory(ctx) {
   const { factoryName, componentName } = ctx.jsx;
   return {
-    js: outdent22`
+    js: outdent23`
     import { h } from '@builder.io/qwik'
+    ${ctx.file.import("getDisplayName", "./factory-helper")}
     ${ctx.file.import("css, cx", "../css/index")}
 
     function createStyledFn(Dynamic) {
       return function styledFn(template) {
-          const baseClassName = css(template)
-          const ${componentName} = function ${componentName}(props) {
-              const { as: Element = Dynamic, ...elementProps } = props
-              const classes = () => cx(baseClassName, elementProps.className)
-
-              return h(Element, {
-                  ...elementProps,
-                  className: classes(),
-              })
+          const styles = css.raw(template)
+          
+          const ${componentName} = (props) => {
+            const { as: Element = Dynamic.__base__ || Dynamic, ...elementProps } = props
+            
+            function classes() {
+              return cx(css(Dynamic.__styles__, styles), elementProps.className)
+            }
+
+            return h(Element, {
+              ...elementProps,
+              className: classes(),
+            })
           }
 
-          const name = (typeof Dynamic === 'string' ? Dynamic : Dynamic.displayName || Dynamic.name) || 'Component'
+          const name = getDisplayName(Dynamic)
+        
           ${componentName}.displayName = \`${factoryName}.\${name}\`
+          ${componentName}.__styles__ = styles
+          ${componentName}.__base__ = Dynamic
+  
           return ${componentName}
         }
     }
@@ -1775,18 +1925,18 @@ function generateQwikJsxStringLiteralFactory(ctx) {
 }
 
 // src/artifacts/qwik-jsx/types.string-literal.ts
-import { outdent as outdent23 } from "outdent";
+import { outdent as outdent24 } from "outdent";
 function generateQwikJsxStringLiteralTypes(ctx) {
   const { factoryName, componentName, upperName, typeName } = ctx.jsx;
   return {
-    jsxFactory: outdent23`
+    jsxFactory: outdent24`
 ${ctx.file.importType(upperName, "../types/jsx")}
 export declare const ${factoryName}: ${upperName}
     `,
-    jsxType: outdent23`
+    jsxType: outdent24`
 import type { Component, QwikIntrinsicElements } from '@builder.io/qwik'
 
-type ElementType = keyof QwikIntrinsicElements | Component<any>
+export type ElementType = keyof QwikIntrinsicElements | Component<any>
 
 export type ComponentProps<T extends ElementType> = T extends keyof QwikIntrinsicElements
   ? QwikIntrinsicElements[T]
@@ -1794,17 +1944,21 @@ export type ComponentProps<T extends ElementType> = T extends keyof QwikIntrinsi
   ? P
   : never
 
-type Dict = Record<string, unknown>
+interface Dict {
+  [k: string]: unknown
+}
 
 export type ${componentName}<T extends ElementType> = {
   (args: { raw: readonly string[] | ArrayLike<string> }): (props: ComponentProps<T>) => JSX.Element
 }
 
-interface JsxFactory {
+export interface JsxFactory {
   <T extends ElementType>(component: T): ${componentName}<T>
 }
 
-type JsxElements = { [K in keyof QwikIntrinsicElements]: ${componentName}<K> }
+export type JsxElements = {
+  [K in keyof QwikIntrinsicElements]: ${componentName}<K>
+}
 
 export type ${upperName} = JsxFactory & JsxElements
 
@@ -1814,18 +1968,20 @@ export type ${typeName}<T extends ElementType> = ComponentProps<T>
 }
 
 // src/artifacts/react-jsx/jsx.ts
-import { outdent as outdent24 } from "outdent";
+import { outdent as outdent25 } from "outdent";
 function generateReactJsxFactory(ctx) {
   const { factoryName, componentName } = ctx.jsx;
   return {
-    js: outdent24`
+    js: outdent25`
     import { createElement, forwardRef, useMemo } from 'react'
     ${ctx.file.import("css, cx, cva", "../css/index")}
+    ${ctx.file.import(
+      "defaultShouldForwardProp, composeShouldForwardProps, composeCvaFn, getDisplayName",
+      "./factory-helper"
+    )}
     ${ctx.file.import("splitProps, normalizeHTMLProps", "../helpers")}
     ${ctx.file.import("isCssProperty", "./is-valid-prop")}
 
-    const defaultShouldForwardProp = (prop, variantKeys) => !variantKeys.includes(prop) && !isCssProperty(prop)
-    
     function styledFn(Dynamic, configOrCva = {}, options = {}) {
       const cvaFn = configOrCva.__cva__ || configOrCva.__recipe__ ? configOrCva : cva(configOrCva)
 
@@ -1838,23 +1994,26 @@ function generateReactJsxFactory(ctx) {
       )
 
       const ${componentName} = /* @__PURE__ */ forwardRef(function ${componentName}(props, ref) {
-        const { as: Element = Dynamic, children, ...restProps } = props
+        const { as: Element = Dynamic.__base__ || Dynamic, children, ...restProps } = props
+        
+        const __cvaFn__ = composeCvaFn(Dynamic.__cva__, cvaFn)
+        const __shouldForwardProps__ = composeShouldForwardProps(Dynamic, shouldForwardProp)
 
         const combinedProps = useMemo(() => Object.assign({}, defaultProps, restProps), [restProps])
 
         const [forwardedProps, variantProps, styleProps, htmlProps, elementProps] = useMemo(() => {
-          return splitProps(combinedProps, shouldForwardProp, cvaFn.variantKeys, isCssProperty, normalizeHTMLProps.keys)
+          return splitProps(combinedProps, __shouldForwardProps__, __cvaFn__.variantKeys, isCssProperty, normalizeHTMLProps.keys)
         }, [combinedProps])
 
         function recipeClass() {
           const { css: cssStyles, ...propStyles } = styleProps
-          const compoundVariantStyles = cvaFn.__getCompoundVariantCss__?.(variantProps);
-          return cx(cvaFn(variantProps, false), css(compoundVariantStyles, propStyles, cssStyles), combinedProps.className)
+          const compoundVariantStyles = __cvaFn__.__getCompoundVariantCss__?.(variantProps)
+          return cx(__cvaFn__(variantProps, false), css(compoundVariantStyles, propStyles, cssStyles), combinedProps.className)
         }
 
         function cvaClass() {
           const { css: cssStyles, ...propStyles } = styleProps
-          const cvaStyles = cvaFn.raw(variantProps)
+          const cvaStyles = __cvaFn__.raw(variantProps)
           return cx(css(cvaStyles, propStyles, cssStyles), combinedProps.className)
         }
 
@@ -1870,8 +2029,13 @@ function generateReactJsxFactory(ctx) {
         })
       })
 
-      const name = (typeof Dynamic === 'string' ? Dynamic : Dynamic.displayName || Dynamic.name) || 'Component'
+      const name = getDisplayName(Dynamic)
+      
       ${componentName}.displayName = \`${factoryName}.\${name}\`
+      ${componentName}.__cva__ = cvaFn
+      ${componentName}.__base__ = Dynamic
+      ${componentName}.__shouldForwardProps__ = shouldForwardProp
+      
       return ${componentName}
     }
 
@@ -1898,8 +2062,8 @@ function generateReactJsxFactory(ctx) {
 }
 
 // src/artifacts/react-jsx/pattern.ts
-import { outdent as outdent25 } from "outdent";
-import { match as match6 } from "ts-pattern";
+import { outdent as outdent26 } from "outdent";
+import { match as match7 } from "ts-pattern";
 function generateReactJsxPattern(ctx) {
   const { typeName, factoryName } = ctx.jsx;
   return ctx.patterns.details.map((pattern) => {
@@ -1907,20 +2071,20 @@ function generateReactJsxPattern(ctx) {
     const { description, jsxElement = "div" } = pattern.config;
     return {
       name: dashName,
-      js: outdent25`
+      js: outdent26`
       import { createElement, forwardRef } from 'react'
       ${ctx.file.import(factoryName, "./factory")}
       ${ctx.file.import(styleFnName, `../patterns/${dashName}`)}
 
       export const ${jsxName} = /* @__PURE__ */ forwardRef(function ${jsxName}(props, ref) {
-        ${match6(props.length).with(
+        ${match7(props.length).with(
         0,
-        () => outdent25`
+        () => outdent26`
         const styleProps = ${styleFnName}()
         return createElement(${factoryName}.${jsxElement}, { ref, ...styleProps, ...props })
           `
       ).otherwise(
-        () => outdent25`
+        () => outdent26`
         const { ${props.join(", ")}, ...restProps } = props
         const styleProps = ${styleFnName}({${props.join(", ")}})
         return createElement(${factoryName}.${jsxElement}, { ref, ...styleProps, ...restProps })
@@ -1928,7 +2092,7 @@ function generateReactJsxPattern(ctx) {
       )}
       })
       `,
-      dts: outdent25`
+      dts: outdent26`
       import type { FunctionComponent } from 'react'
       ${ctx.file.importType(`${upperName}Properties`, `../patterns/${dashName}`)}
       ${ctx.file.importType(typeName, "../types/jsx")}
@@ -1944,20 +2108,25 @@ function generateReactJsxPattern(ctx) {
 }
 
 // src/artifacts/react-jsx/types.ts
-import { outdent as outdent26 } from "outdent";
+import { outdent as outdent27 } from "outdent";
 function generateReactJsxTypes(ctx) {
   const { factoryName, componentName, upperName, typeName, variantName } = ctx.jsx;
   return {
-    jsxFactory: outdent26`
+    jsxFactory: outdent27`
 ${ctx.file.importType(upperName, "../types/jsx")}
 export declare const ${factoryName}: ${upperName}
     `,
-    jsxType: outdent26`
+    jsxType: outdent27`
 import type { ComponentPropsWithoutRef, ElementType, ElementRef, Ref } from 'react'
-${ctx.file.importType("Assign, DistributiveOmit, JsxHTMLProps, JsxStyleProps", "./system-types")}
 ${ctx.file.importType("RecipeDefinition, RecipeSelection, RecipeVariantRecord", "./recipe")}
+${ctx.file.importType(
+      "Assign, DistributiveOmit, DistributiveUnion, JsxHTMLProps, JsxStyleProps, Pretty",
+      "./system-types"
+    )}
 
-type Dict = Record<string, unknown>
+interface Dict {
+  [k: string]: unknown
+}
 
 export type ComponentProps<T extends ElementType> = DistributiveOmit<ComponentPropsWithoutRef<T>, 'ref'> & {
   ref?: Ref<ElementRef<T>>
@@ -1968,7 +2137,9 @@ export interface ${componentName}<T extends ElementType, P extends Dict = {}> {
   displayName?: string
 }
 
-interface RecipeFn { __type: any }
+interface RecipeFn {
+  __type: any
+}
 
 interface JsxFactoryOptions<TProps extends Dict> {
   dataAttr?: boolean
@@ -1978,16 +2149,22 @@ interface JsxFactoryOptions<TProps extends Dict> {
 
 export type JsxRecipeProps<T extends ElementType, P extends Dict> = JsxHTMLProps<ComponentProps<T>, P>;
 
-interface JsxFactory {
+export type JsxElement<T extends ElementType, P> = T extends ${componentName}<infer A, infer B>
+  ? ${componentName}<A, Pretty<DistributiveUnion<P, B>>>
+  : ${componentName}<T, P>
+
+export interface JsxFactory {
   <T extends ElementType>(component: T): ${componentName}<T, {}>
-  <T extends ElementType, P extends RecipeVariantRecord>(component: T, recipe: RecipeDefinition<P>, options?: JsxFactoryOptions<JsxRecipeProps<T, RecipeSelection<P>>>): ${componentName}<
+  <T extends ElementType, P extends RecipeVariantRecord>(component: T, recipe: RecipeDefinition<P>, options?: JsxFactoryOptions<JsxRecipeProps<T, RecipeSelection<P>>>): JsxElement<
     T,
     RecipeSelection<P>
   >
-  <T extends ElementType, P extends RecipeFn>(component: T, recipeFn: P, options?: JsxFactoryOptions<JsxRecipeProps<T, P['__type']>>): ${componentName}<T, P['__type']>
+  <T extends ElementType, P extends RecipeFn>(component: T, recipeFn: P, options?: JsxFactoryOptions<JsxRecipeProps<T, P['__type']>>): JsxElement<T, P['__type']>
 }
 
-type JsxElements = { [K in keyof JSX.IntrinsicElements]: ${componentName}<K, {}> }
+export type JsxElements = {
+  [K in keyof JSX.IntrinsicElements]: ${componentName}<K, {}>
+}
 
 export type ${upperName} = JsxFactory & JsxElements
 
@@ -1999,30 +2176,39 @@ export type ${variantName}<T extends ${componentName}<any, any>> = T extends ${c
 }
 
 // src/artifacts/react-jsx/jsx.string-literal.ts
-import { outdent as outdent27 } from "outdent";
+import { outdent as outdent28 } from "outdent";
 function generateReactJsxStringLiteralFactory(ctx) {
   const { factoryName, componentName } = ctx.jsx;
   return {
-    js: outdent27`
+    js: outdent28`
     import { createElement, forwardRef } from 'react'
+    ${ctx.file.import("getDisplayName", "./factory-helper")}
     ${ctx.file.import("css, cx", "../css/index")}
 
     function createStyledFn(Dynamic) {
       return function styledFn(template) {
-        const baseClassName = css(template)
+        const styles = css.raw(template)
+
         const ${componentName} = /* @__PURE__ */ forwardRef(function ${componentName}(props, ref) {
-            const { as: Element = Dynamic, ...elementProps } = props
-            const classes = () => cx(baseClassName, elementProps.className)
+          const { as: Element = Dynamic.__base__ || Dynamic, ...elementProps } = props
+          
+          function classes() {
+            return cx(css(Dynamic.__styles__, styles), elementProps.className)
+          }
 
-            return createElement(Element, {
-                ref,
-                ...elementProps,
-                className: classes(),
-            })
+          return createElement(Element, {
+              ref,
+              ...elementProps,
+              className: classes(),
+          })
         })
 
-        const name = (typeof Dynamic === 'string' ? Dynamic : Dynamic.displayName || Dynamic.name) || 'Component'
+        const name = getDisplayName(Dynamic)
+        
         ${componentName}.displayName = \`${factoryName}.\${name}\`
+        ${componentName}.__styles__ = styles
+        ${componentName}.__base__ = Dynamic
+        
         return ${componentName}
       }
     }
@@ -2050,19 +2236,21 @@ function generateReactJsxStringLiteralFactory(ctx) {
 }
 
 // src/artifacts/react-jsx/types.string-literal.ts
-import { outdent as outdent28 } from "outdent";
+import { outdent as outdent29 } from "outdent";
 function generateReactJsxStringLiteralTypes(ctx) {
   const { factoryName, componentName, upperName, typeName } = ctx.jsx;
   return {
-    jsxFactory: outdent28`
+    jsxFactory: outdent29`
 ${ctx.file.importType(upperName, "../types/jsx")}
 export declare const ${factoryName}: ${upperName}
     `,
-    jsxType: outdent28`
+    jsxType: outdent29`
 import type { ComponentPropsWithoutRef, ElementType, ElementRef, Ref } from 'react'
 ${ctx.file.importType("DistributiveOmit", "../types/system-types")}
 
-type Dict = Record<string, unknown>
+interface Dict {
+  [k: string]: unknown
+}
 
 export type ComponentProps<T extends ElementType> = DistributiveOmit<ComponentPropsWithoutRef<T>, 'ref'> & {
   ref?: Ref<ElementRef<T>>
@@ -2073,11 +2261,13 @@ export type ${componentName}<T extends ElementType> = {
   displayName?: string
 }
 
-interface JsxFactory {
+export interface JsxFactory {
   <T extends ElementType>(component: T): ${componentName}<T>
 }
 
-type JsxElements = { [K in keyof JSX.IntrinsicElements]: ${componentName}<K> }
+export type JsxElements = {
+  [K in keyof JSX.IntrinsicElements]: ${componentName}<K>
+}
 
 export type ${upperName} = JsxFactory & JsxElements
 
@@ -2087,19 +2277,21 @@ export type ${typeName}<T extends ElementType> = ComponentProps<T>
 }
 
 // src/artifacts/solid-jsx/jsx.ts
-import { outdent as outdent29 } from "outdent";
+import { outdent as outdent30 } from "outdent";
 function generateSolidJsxFactory(ctx) {
   const { componentName, factoryName } = ctx.jsx;
   return {
-    js: outdent29`
+    js: outdent30`
     import { Dynamic } from 'solid-js/web'
     import { createMemo, mergeProps, splitProps } from 'solid-js'
     import { createComponent } from 'solid-js/web'
+    ${ctx.file.import(
+      "defaultShouldForwardProp, composeShouldForwardProps, composeCvaFn, getDisplayName",
+      "./factory-helper"
+    )}
+    ${ctx.file.import("isCssProperty, allCssProperties", "./is-valid-prop")}
     ${ctx.file.import("css, cx, cva", "../css/index")}
     ${ctx.file.import("normalizeHTMLProps", "../helpers")}
-    ${ctx.file.import("isCssProperty, allCssProperties", "./is-valid-prop")}
-    
-    const defaultShouldForwardProp = (prop, variantKeys) => !variantKeys.includes(prop) && !isCssProperty(prop)
     
     function styledFn(element, configOrCva = {}, options = {}) {
       const cvaFn = configOrCva.__cva__ || configOrCva.__recipe__ ? configOrCva : cva(configOrCva)
@@ -2112,28 +2304,32 @@ function generateSolidJsxFactory(ctx) {
         options.defaultProps,
       )
 
-      return function ${componentName}(props) {
-        const mergedProps = mergeProps({ as: element }, defaultProps, props)
+      const ${componentName} = (props) => {
+        const mergedProps = mergeProps({ as: element.__base__ || element }, defaultProps, props)
+        
+        const __cvaFn__ = composeCvaFn(Dynamic.__cva__, cvaFn)
+        const __shouldForwardProps__ = composeShouldForwardProps(Dynamic, shouldForwardProp)
+        
         const forwardedKeys = createMemo(() => Object.keys(props).filter(shouldForwardProp))
 
         const [localProps, forwardedProps, variantProps, styleProps, htmlProps, elementProps] = splitProps(
           mergedProps,
           ['as', 'class', 'className'],
           forwardedKeys(),
-          cvaFn.variantKeys,
+          __cvaFn__.variantKeys,
           allCssProperties,
           normalizeHTMLProps.keys
         )
 
         function recipeClass() {
           const { css: cssStyles, ...propStyles } = styleProps
-          const compoundVariantStyles = cvaFn.__getCompoundVariantCss__?.(variantProps);
-          return cx(cvaFn(variantProps, false), css(compoundVariantStyles, propStyles, cssStyles), localProps.class, localProps.className)
+          const compoundVariantStyles = __cvaFn__.__getCompoundVariantCss__?.(variantProps);
+          return cx(__cvaFn__(variantProps, false), css(compoundVariantStyles, propStyles, cssStyles), localProps.class, localProps.className)
         }
 
         function cvaClass() {
           const { css: cssStyles, ...propStyles } = styleProps
-          const cvaStyles = cvaFn.raw(variantProps)
+          const cvaStyles = __cvaFn__.raw(variantProps)
           return cx(css(cvaStyles, propStyles, cssStyles), localProps.class, localProps.className)
         }
 
@@ -2160,6 +2356,15 @@ function generateSolidJsxFactory(ctx) {
           )
         )
       }
+
+      const name = getDisplayName(element)
+
+      ${componentName}.displayName = \`${factoryName}.\${name}\`
+      ${componentName}.__cva__ = cvaFn
+      ${componentName}.__base__ = element
+      ${componentName}.__shouldForwardProps__ = shouldForwardProp
+      
+      return ${componentName}
     }
 
     function createJsxFactory() {
@@ -2184,8 +2389,8 @@ function generateSolidJsxFactory(ctx) {
 }
 
 // src/artifacts/solid-jsx/pattern.ts
-import { outdent as outdent30 } from "outdent";
-import { match as match7 } from "ts-pattern";
+import { outdent as outdent31 } from "outdent";
+import { match as match8 } from "ts-pattern";
 function generateSolidJsxPattern(ctx) {
   const { typeName, factoryName } = ctx.jsx;
   return ctx.patterns.details.map((pattern) => {
@@ -2193,21 +2398,21 @@ function generateSolidJsxPattern(ctx) {
     const { description, jsxElement = "div" } = pattern.config;
     return {
       name: dashName,
-      js: outdent30`
+      js: outdent31`
     import { splitProps, mergeProps } from 'solid-js'
     import { createComponent } from 'solid-js/web'
     ${ctx.file.import(factoryName, "./factory")}
     ${ctx.file.import(styleFnName, `../patterns/${dashName}`)}
 
     export function ${jsxName}(props) {
-      ${match7(props.length).with(
+      ${match8(props.length).with(
         0,
-        () => outdent30`
+        () => outdent31`
           const styleProps = ${styleFnName}()
           return createComponent(${factoryName}.${jsxElement}, mergeProps(styleProps, props))
         `
       ).otherwise(
-        () => outdent30`
+        () => outdent31`
           const [patternProps, restProps] = splitProps(props, [${props.map((v) => JSON.stringify(v)).join(", ")}]);
           const styleProps = ${styleFnName}(patternProps)
           return createComponent(${factoryName}.${jsxElement}, mergeProps(styleProps, restProps))
@@ -2215,7 +2420,7 @@ function generateSolidJsxPattern(ctx) {
       )}
     }
     `,
-      dts: outdent30`
+      dts: outdent31`
     import type { Component } from 'solid-js'
     ${ctx.file.importType(`${upperName}Properties`, `../patterns/${dashName}`)}
     ${ctx.file.importType(typeName, "../types/jsx")}
@@ -2231,31 +2436,38 @@ function generateSolidJsxPattern(ctx) {
 }
 
 // src/artifacts/solid-jsx/types.ts
-import { outdent as outdent31 } from "outdent";
+import { outdent as outdent32 } from "outdent";
 function generateSolidJsxTypes(ctx) {
   const { factoryName, componentName, upperName, typeName, variantName } = ctx.jsx;
   return {
-    jsxFactory: outdent31`
+    jsxFactory: outdent32`
 ${ctx.file.importType(upperName, "../types/jsx")}
 export declare const ${factoryName}: ${upperName}
     `,
-    jsxType: outdent31`
+    jsxType: outdent32`
 import type { ComponentProps, Component, JSX } from 'solid-js'
-${ctx.file.importType("Assign, JsxStyleProps, JsxHTMLProps", "./system-types")}
 ${ctx.file.importType("RecipeDefinition, RecipeSelection, RecipeVariantRecord", "./recipe")}
+${ctx.file.importType(
+      "Assign, DistributiveOmit, DistributiveUnion, JsxHTMLProps, JsxStyleProps, Pretty",
+      "./system-types"
+    )}
 
-type Dict = Record<string, unknown>
+interface Dict {
+  [k: string]: unknown
+}
 
-type ElementType<P = any> = keyof JSX.IntrinsicElements | Component<P>
+export type ElementType<P = any> = keyof JSX.IntrinsicElements | Component<P>
 
 export interface ${componentName}<T extends ElementType, P extends Dict = {}> {
   (props: JsxHTMLProps<ComponentProps<T>, Assign<JsxStyleProps, P>>): JSX.Element
   displayName?: string
 }
 
-interface RecipeFn { __type: any }
+interface RecipeFn {
+  __type: any
+}
 
-interface JsxFactoryOptions<TProps extends Dict> {
+export interface JsxFactoryOptions<TProps extends Dict> {
   dataAttr?: boolean
   defaultProps?: TProps
   shouldForwardProp?(prop: string, variantKeys: string[]): boolean
@@ -2263,16 +2475,22 @@ interface JsxFactoryOptions<TProps extends Dict> {
 
 export type JsxRecipeProps<T extends ElementType, P extends Dict> = JsxHTMLProps<ComponentProps<T>, P>;
 
-interface JsxFactory {
+export type JsxElement<T extends ElementType, P> = T extends ${componentName}<infer A, infer B>
+  ? ${componentName}<A, Pretty<DistributiveUnion<P, B>>>
+  : ${componentName}<T, P>
+
+export interface JsxFactory {
   <T extends ElementType>(component: T): ${componentName}<T, {}>
-  <T extends ElementType, P extends RecipeVariantRecord>(component: T, recipe: RecipeDefinition<P>, options?: JsxFactoryOptions<JsxRecipeProps<T, RecipeSelection<P>>>): ${componentName}<
+  <T extends ElementType, P extends RecipeVariantRecord>(component: T, recipe: RecipeDefinition<P>, options?: JsxFactoryOptions<JsxRecipeProps<T, RecipeSelection<P>>>): JsxElement<
     T,
     RecipeSelection<P>
   >
-  <T extends ElementType, P extends RecipeFn>(component: T, recipeFn: P, options?: JsxFactoryOptions<JsxRecipeProps<T, P['__type']>>): ${componentName}<T, P['__type']>
+  <T extends ElementType, P extends RecipeFn>(component: T, recipeFn: P, options?: JsxFactoryOptions<JsxRecipeProps<T, P['__type']>>): JsxElement<T, P['__type']>
 }
 
-type JsxElements = { [K in keyof JSX.IntrinsicElements]: ${componentName}<K, {}> }
+export type JsxElements = {
+  [K in keyof JSX.IntrinsicElements]: ${componentName}<K, {}>
+}
 
 export type ${upperName} = JsxFactory & JsxElements
 
@@ -2284,22 +2502,24 @@ export type ${variantName}<T extends ${componentName}<any, any>> = T extends ${c
 }
 
 // src/artifacts/solid-jsx/jsx.string-literal.ts
-import { outdent as outdent32 } from "outdent";
+import { outdent as outdent33 } from "outdent";
 function generateSolidJsxStringLiteralFactory(ctx) {
   const { componentName, factoryName } = ctx.jsx;
   return {
-    js: outdent32`
+    js: outdent33`
 import { mergeProps, splitProps } from 'solid-js'
 import { Dynamic, createComponent } from 'solid-js/web'
+${ctx.file.import("getDisplayName", "./factory-helper")}
 ${ctx.file.import("css, cx", "../css/index")}
 
 function createStyled(element) {
   return function styledFn(template) {
-    const baseClassName = css(template)
-    return function ${componentName}(props) {
-      const mergedProps = mergeProps({ as: element }, props)
-      const [localProps, elementProps] = splitProps(mergedProps, ['as', 'class'])
+    const styles = css.raw(template)
 
+    const ${componentName} = (props) => {
+      const mergedProps = mergeProps({ as: element.__base__ || element }, props)
+      const [localProps, elementProps] = splitProps(mergedProps, ['as', 'class'])
+      
       return createComponent(
         Dynamic,
         mergeProps(
@@ -2308,13 +2528,21 @@ function createStyled(element) {
               return localProps.as
             },
             get class() {
-              return cx(baseClassName, localProps.class)
+              return cx(css(element.__styles__, styles), localProps.class)
             },
           },
           elementProps,
         ),
       )
     }
+
+    const name = getDisplayName(element)
+
+    ${componentName}.displayName = \`${factoryName}.\${name}\`
+    ${componentName}.__styles__ = styles
+    ${componentName}.__base__ = element
+
+    return ${componentName}
   }
 }
 
@@ -2340,31 +2568,35 @@ export const ${factoryName} = /* @__PURE__ */ createJsxFactory()
 }
 
 // src/artifacts/solid-jsx/types.string-literal.ts
-import { outdent as outdent33 } from "outdent";
+import { outdent as outdent34 } from "outdent";
 function generateSolidJsxStringLiteralTypes(ctx) {
   const { factoryName, componentName, upperName, typeName } = ctx.jsx;
   return {
-    jsxFactory: outdent33`
+    jsxFactory: outdent34`
 ${ctx.file.importType(upperName, "../types/jsx")}
 export declare const ${factoryName}: ${upperName}
     `,
-    jsxType: outdent33`
+    jsxType: outdent34`
 import type { Component, ComponentProps, JSX } from 'solid-js'
 
-type Dict = Record<string, unknown>
+interface Dict {
+  [k: string]: unknown
+}
 
-type ElementType<P = any> = keyof JSX.IntrinsicElements | Component<P>
+export type ElementType<P = any> = keyof JSX.IntrinsicElements | Component<P>
 
 export type ${componentName}<T extends ElementType> = {
     (args: { raw: readonly string[] | ArrayLike<string> }): (props: ComponentProps<T>) => JSX.Element
     displayName?: string
 }
 
-interface JsxFactory {
+export interface JsxFactory {
     <T extends ElementType>(component: T): ${componentName}<T>
 }
 
-type JsxElements = { [K in keyof JSX.IntrinsicElements]: ${componentName}<K> }
+export type JsxElements = {
+  [K in keyof JSX.IntrinsicElements]: ${componentName}<K>
+}
 
 export type ${upperName} = JsxFactory & JsxElements
 
@@ -2374,18 +2606,20 @@ export type ${typeName}<T extends ElementType> = ComponentProps<T>
 }
 
 // src/artifacts/vue-jsx/jsx.ts
-import { outdent as outdent34 } from "outdent";
+import { outdent as outdent35 } from "outdent";
 function generateVueJsxFactory(ctx) {
-  const { factoryName } = ctx.jsx;
+  const { factoryName, componentName } = ctx.jsx;
   return {
-    js: outdent34`
+    js: outdent35`
     import { defineComponent, h, computed } from 'vue'
+    ${ctx.file.import(
+      "defaultShouldForwardProp, composeShouldForwardProps, composeCvaFn, getDisplayName",
+      "./factory-helper"
+    )}
+    ${ctx.file.import("isCssProperty", "./is-valid-prop")}
     ${ctx.file.import("css, cx, cva", "../css/index")}
     ${ctx.file.import("splitProps, normalizeHTMLProps", "../helpers")}
-    ${ctx.file.import("isCssProperty", "./is-valid-prop")}
 
-    const defaultShouldForwardProp = (prop, variantKeys) => !variantKeys.includes(prop) && !isCssProperty(prop)
-          
     function styledFn(Dynamic, configOrCva = {}, options = {}) {
       const cvaFn = configOrCva.__cva__ || configOrCva.__recipe__ ? configOrCva : cva(configOrCva)
       
@@ -2397,30 +2631,33 @@ function generateVueJsxFactory(ctx) {
         options.defaultProps,
       )
         
-      const name = (typeof Dynamic === 'string' ? Dynamic : Dynamic.displayName || Dynamic.name) || 'Component'
+      const name = getDisplayName(Dynamic)
 
-      return defineComponent({
+      const ${componentName} = defineComponent({
         name: \`${factoryName}.\${name}\`,
         inheritAttrs: false,
-        props: { as: { type: [String, Object], default: Dynamic } },
+        props: { as: { type: [String, Object], default: Dynamic.__base__ || Dynamic } },
         setup(props, { slots, attrs }) {
+          const __cvaFn__ = composeCvaFn(Dynamic.__cva__, cvaFn)
+          const __shouldForwardProps__ = composeShouldForwardProps(Dynamic, shouldForwardProp)
+          
           const combinedProps = computed(() => Object.assign({}, defaultProps, attrs))
           
           const splittedProps = computed(() => {
-            return splitProps(combinedProps.value, shouldForwardProp, cvaFn.variantKeys, isCssProperty, normalizeHTMLProps.keys)
+            return splitProps(combinedProps.value, shouldForwardProp, __cvaFn__.variantKeys, isCssProperty, normalizeHTMLProps.keys)
           })
 
           const recipeClass = computed(() => {
             const [_forwardedProps, variantProps, styleProps, _htmlProps, _elementProps] = splittedProps.value
             const { css: cssStyles, ...propStyles } = styleProps
-            const compoundVariantStyles = cvaFn.__getCompoundVariantCss__?.(variantProps);
-            return cx(cvaFn(variantProps, false), css(compoundVariantStyles, propStyles, cssStyles), combinedProps.value.className)
+            const compoundVariantStyles = __cvaFn__.__getCompoundVariantCss__?.(variantProps);
+            return cx(__cvaFn__(variantProps, false), css(compoundVariantStyles, propStyles, cssStyles), combinedProps.value.className)
           })
 
           const cvaClass = computed(() => {
             const [_forwardedProps, variantProps, styleProps, _htmlProps, _elementProps] = splittedProps.value
             const { css: cssStyles, ...propStyles } = styleProps
-            const cvaStyles = cvaFn.raw(variantProps)
+            const cvaStyles = __cvaFn__.raw(variantProps)
             return cx(css(cvaStyles, propStyles, cssStyles), combinedProps.value.className)
           })
 
@@ -2441,6 +2678,13 @@ function generateVueJsxFactory(ctx) {
           }
         },
       })
+
+      ${componentName}.displayName = \`${factoryName}.\${name}\`
+      ${componentName}.__cva__ = cvaFn
+      ${componentName}.__base__ = Dynamic
+      ${componentName}.__shouldForwardProps__ = shouldForwardProp
+      
+      return ${componentName}
     }
 
     function createJsxFactory() {
@@ -2461,25 +2705,30 @@ function generateVueJsxFactory(ctx) {
 }
 
 // src/artifacts/vue-jsx/jsx.string-literal.ts
-import { outdent as outdent35 } from "outdent";
+import { outdent as outdent36 } from "outdent";
 function generateVueJsxStringLiteralFactory(ctx) {
-  const { factoryName } = ctx.jsx;
+  const { componentName, factoryName } = ctx.jsx;
   return {
-    js: outdent35`
+    js: outdent36`
     import { defineComponent, h, computed } from 'vue'
+    ${ctx.file.import("getDisplayName", "./factory-helper")}
     ${ctx.file.import("css, cx", "../css/index")}
 
   function createStyled(Dynamic) {
-    const name = (typeof Dynamic === 'string' ? Dynamic : Dynamic.displayName || Dynamic.name) || 'Component'
+    const name = getDisplayName(Dynamic)
 
     function styledFn(template) {
-      const baseClassName = css(template)
-      return defineComponent({
+      const styles = css.raw(template)
+      
+      const ${componentName} = defineComponent({
         name: \`${factoryName}.\${name}\`,
         inheritAttrs: false,
         props: { as: { type: [String, Object], default: Dynamic } },
         setup(props, { slots, attrs }) {
-          const classes = computed(() => cx(baseClassName, elementProps.className))
+          const classes = computed(() => {
+            return cx(css(Dynamic.__styles__, styles), elementProps.className)
+          })
+          
           return () => {
             return h(
               props.as,
@@ -2492,6 +2741,11 @@ function generateVueJsxStringLiteralFactory(ctx) {
           }
         },
       })
+
+      ${componentName}.__styles__ = styles
+      ${componentName}.__base__ = element
+
+      return ${componentName}
     }
   }
 
@@ -2517,7 +2771,7 @@ function generateVueJsxStringLiteralFactory(ctx) {
 }
 
 // src/artifacts/vue-jsx/pattern.ts
-import { outdent as outdent36 } from "outdent";
+import { outdent as outdent37 } from "outdent";
 function generateVueJsxPattern(ctx) {
   const { typeName, factoryName } = ctx.jsx;
   return ctx.patterns.details.map((pattern) => {
@@ -2526,7 +2780,7 @@ function generateVueJsxPattern(ctx) {
     const propList = props.map((v) => JSON.stringify(v)).join(", ");
     return {
       name: dashName,
-      js: outdent36`
+      js: outdent37`
     import { defineComponent, h, computed } from 'vue'
     ${ctx.file.import(factoryName, "./factory")}
     ${ctx.file.import(styleFnName, `../patterns/${dashName}`)}
@@ -2544,7 +2798,7 @@ function generateVueJsxPattern(ctx) {
         }
     })
     `,
-      dts: outdent36`
+      dts: outdent37`
     import type { FunctionalComponent } from 'vue'
     ${ctx.file.importType(`${upperName}Properties`, `../patterns/${dashName}`)}
     ${ctx.file.importType(typeName, "../types/jsx")}
@@ -2560,23 +2814,27 @@ function generateVueJsxPattern(ctx) {
 }
 
 // src/artifacts/vue-jsx/types.ts
-import { outdent as outdent37 } from "outdent";
+import { outdent as outdent38 } from "outdent";
 function generateVueJsxTypes(ctx) {
   const { factoryName, componentName, upperName, typeName, variantName } = ctx.jsx;
   return {
-    jsxFactory: outdent37`
+    jsxFactory: outdent38`
 ${ctx.file.importType(upperName, "../types/jsx")}
 
 export declare const ${factoryName}: ${upperName}
     `,
-    jsxType: outdent37`
+    jsxType: outdent38`
 import type { Component, FunctionalComponent, NativeElements } from 'vue'
 
 ${ctx.file.importType("RecipeDefinition, RecipeSelection, RecipeVariantRecord", "./recipe")}
-${ctx.file.importType("Assign, JsxStyleProps, JsxHTMLProps", "./system-types")}
+${ctx.file.importType(
+      "Assign, DistributiveOmit, DistributiveUnion, JsxHTMLProps, JsxStyleProps, Pretty",
+      "./system-types"
+    )}
+
+export type IntrinsicElement = keyof NativeElements
 
-type IntrinsicElement = keyof NativeElements
-type ElementType = IntrinsicElement | Component
+export type ElementType = IntrinsicElement | Component
 
 export type ComponentProps<T extends ElementType> = T extends IntrinsicElement
   ? NativeElements[T]
@@ -2584,13 +2842,15 @@ export type ComponentProps<T extends ElementType> = T extends IntrinsicElement
   ? Props
   : never
 
-  interface ${componentName}<T extends ElementType, P extends Dict = {}> extends FunctionalComponent<
-JsxHTMLProps<ComponentProps<T>, Assign<JsxStyleProps, P>>
+export interface ${componentName}<T extends ElementType, P extends Dict = {}> extends FunctionalComponent<
+  JsxHTMLProps<ComponentProps<T>, Assign<JsxStyleProps, P>>
 > {}
 
-interface RecipeFn { __type: any }
+interface RecipeFn {
+  __type: any
+}
 
-interface JsxFactoryOptions<TProps extends Dict> {
+export interface JsxFactoryOptions<TProps extends Dict> {
   dataAttr?: boolean
   defaultProps?: TProps
   shouldForwardProp?(prop: string, variantKeys: string[]): boolean
@@ -2598,16 +2858,22 @@ interface JsxFactoryOptions<TProps extends Dict> {
 
 export type JsxRecipeProps<T extends ElementType, P extends RecipeFn> = JsxHTMLProps<ComponentProps<T>, Assign<JsxStyleProps, P['__type']>>;
 
-interface JsxFactory {
+export type JsxElement<T extends ElementType, P> = T extends ${componentName}<infer A, infer B>
+  ? ${componentName}<A, Pretty<DistributiveUnion<P, B>>>
+  : ${componentName}<T, P>
+
+export interface JsxFactory {
   <T extends ElementType>(component: T): ${componentName}<T, {}>
-  <T extends ElementType, P extends RecipeVariantRecord>(component: T, recipe: RecipeDefinition<P>, options?: JsxFactoryOptions<JsxRecipeProps<T, RecipeSelection<P>>>): ${componentName}<
+  <T extends ElementType, P extends RecipeVariantRecord>(component: T, recipe: RecipeDefinition<P>, options?: JsxFactoryOptions<JsxRecipeProps<T, RecipeSelection<P>>>): JsxElement<
     T,
     RecipeSelection<P>
   >
-  <T extends ElementType, P extends RecipeFn>(component: T, recipeFn: P, options?: JsxFactoryOptions<JsxRecipeProps<T, P['__type']>> ): ${componentName}<T, P['__type']>
+  <T extends ElementType, P extends RecipeFn>(component: T, recipeFn: P, options?: JsxFactoryOptions<JsxRecipeProps<T, P['__type']>> ): JsxElement<T, P['__type']>
 }
 
-type JsxElements = { [K in IntrinsicElement]: ${componentName}<K, {}> }
+export type JsxElements = {
+  [K in IntrinsicElement]: ${componentName}<K, {}>
+}
 
 export type ${upperName} = JsxFactory & JsxElements
 
@@ -2619,20 +2885,21 @@ export type ${variantName}<T extends ${componentName}<any, any>> = T extends ${c
 }
 
 // src/artifacts/vue-jsx/types.string-literal.ts
-import { outdent as outdent38 } from "outdent";
+import { outdent as outdent39 } from "outdent";
 function generateVueJsxStringLiteralTypes(ctx) {
   const { factoryName, componentName, upperName, typeName } = ctx.jsx;
   return {
-    jsxFactory: outdent38`
+    jsxFactory: outdent39`
 ${ctx.file.importType(upperName, "../types/jsx")}
 
 export declare const ${factoryName}: ${upperName}
     `,
-    jsxType: outdent38`
+    jsxType: outdent39`
 import type { Component, FunctionalComponent, NativeElements } from 'vue'
 
-type IntrinsicElement = keyof NativeElements
-type ElementType = IntrinsicElement | Component
+export type IntrinsicElement = keyof NativeElements
+
+export type ElementType = IntrinsicElement | Component
 
 export type ComponentProps<T extends ElementType> = T extends IntrinsicElement
   ? NativeElements[T]
@@ -2640,14 +2907,16 @@ export type ComponentProps<T extends ElementType> = T extends IntrinsicElement
   ? Props
   : never
 
-type ${componentName}<T extends ElementType> = FunctionalComponent<ComponentProps<T>>
+export type ${componentName}<T extends ElementType> = FunctionalComponent<ComponentProps<T>>
 >
 
-interface JsxFactory {
+export interface JsxFactory {
   <T extends ElementType>(component: T): ${componentName}<T>
 }
 
-type JsxElements = { [K in IntrinsicElement]: ${componentName}<K> }
+export type JsxElements = {
+  [K in IntrinsicElement]: ${componentName}<K>
+}
 
 export type ${upperName} = JsxFactory & JsxElements
 
@@ -2764,7 +3033,7 @@ var csstype_d_ts_default = {
 
 // src/artifacts/generated/system-types.d.ts.json
 var system_types_d_ts_default = {
-  content: "import type { ConditionalValue, Conditions, Nested } from './conditions'\nimport type { PropertiesFallback } from './csstype'\nimport type { SystemProperties, CssVarProperties } from './style-props'\n\ntype String = string & {}\ntype Number = number & {}\n\n/* -----------------------------------------------------------------------------\n * Native css properties\n * -----------------------------------------------------------------------------*/\n\nexport type CssProperty = keyof PropertiesFallback\n\nexport interface CssProperties extends PropertiesFallback<String | Number>, CssVarProperties {}\n\nexport interface CssKeyframes {\n  [name: string]: {\n    [time: string]: CssProperties\n  }\n}\n\n/* -----------------------------------------------------------------------------\n * Conditional css properties\n * -----------------------------------------------------------------------------*/\n\ntype MinimalNested<P> = {\n  [K in keyof Conditions]?: Nested<P>\n}\n\ninterface GenericProperties {\n  [key: string]: ConditionalValue<String | Number | boolean>\n}\n\n/* -----------------------------------------------------------------------------\n * Native css props\n * -----------------------------------------------------------------------------*/\n\nexport type NestedCssProperties = Nested<CssProperties>\n\nexport type SystemStyleObject = Nested<SystemProperties & CssVarProperties>\n\nexport interface GlobalStyleObject {\n  [selector: string]: SystemStyleObject\n}\nexport interface ExtendableGlobalStyleObject {\n  [selector: string]: SystemStyleObject | undefined\n  extend?: GlobalStyleObject | undefined\n}\n\nexport type CompositionStyleObject<Property extends string> = Nested<{\n  [K in Property]?: K extends keyof SystemStyleObject ? SystemStyleObject[K] : unknown\n}>\n\n/* -----------------------------------------------------------------------------\n * Jsx style props\n * -----------------------------------------------------------------------------*/\ninterface WithCss {\n  css?: SystemStyleObject\n}\ntype StyleProps = SystemProperties & MinimalNested<SystemStyleObject>\n\nexport type JsxStyleProps = StyleProps & WithCss\n\nexport type DistributiveOmit<T, K extends keyof any> = T extends unknown ? Omit<T, K> : never\n\nexport type Assign<T, U> = {\n  [K in keyof T]: K extends keyof U ? U[K] : T[K]\n} & U\n\nexport interface PatchedHTMLProps {\n  htmlWidth?: string | number\n  htmlHeight?: string | number\n  htmlTranslate?: 'yes' | 'no' | undefined\n  htmlContent?: string\n}\n\nexport type OmittedHTMLProps = 'color' | 'translate' | 'transition' | 'width' | 'height' | 'content'\n\ntype WithHTMLProps<T> = DistributiveOmit<T, OmittedHTMLProps> & PatchedHTMLProps\n\nexport type JsxHTMLProps<T extends Record<string, any>, P extends Record<string, any> = {}> = Assign<\n  WithHTMLProps<T>,\n  P\n>\n"
+  content: "import type { ConditionalValue, Conditions, Nested } from './conditions'\nimport type { PropertiesFallback } from './csstype'\nimport type { SystemProperties, CssVarProperties } from './style-props'\n\ntype String = string & {}\ntype Number = number & {}\n\nexport type Pretty<T> = { [K in keyof T]: T[K] } & {}\n\nexport type DistributiveOmit<T, K extends keyof any> = T extends unknown ? Omit<T, K> : never\n\nexport type DistributiveUnion<T, U> = {\n  [K in keyof T]: K extends keyof U ? U[K] | T[K] : T[K]\n} & DistributiveOmit<U, keyof T>\n\nexport type Assign<T, U> = {\n  [K in keyof T]: K extends keyof U ? U[K] : T[K]\n} & U\n\n/* -----------------------------------------------------------------------------\n * Native css properties\n * -----------------------------------------------------------------------------*/\n\nexport type CssProperty = keyof PropertiesFallback\n\nexport interface CssProperties extends PropertiesFallback<String | Number>, CssVarProperties {}\n\nexport interface CssKeyframes {\n  [name: string]: {\n    [time: string]: CssProperties\n  }\n}\n\n/* -----------------------------------------------------------------------------\n * Conditional css properties\n * -----------------------------------------------------------------------------*/\n\ntype MinimalNested<P> = {\n  [K in keyof Conditions]?: Nested<P>\n}\n\ninterface GenericProperties {\n  [key: string]: ConditionalValue<String | Number | boolean>\n}\n\n/* -----------------------------------------------------------------------------\n * Native css props\n * -----------------------------------------------------------------------------*/\n\nexport type NestedCssProperties = Nested<CssProperties>\n\nexport type SystemStyleObject = Nested<SystemProperties & CssVarProperties>\n\nexport interface GlobalStyleObject {\n  [selector: string]: SystemStyleObject\n}\nexport interface ExtendableGlobalStyleObject {\n  [selector: string]: SystemStyleObject | undefined\n  extend?: GlobalStyleObject | undefined\n}\n\nexport type CompositionStyleObject<Property extends string> = Nested<{\n  [K in Property]?: K extends keyof SystemStyleObject ? SystemStyleObject[K] : unknown\n}>\n\n/* -----------------------------------------------------------------------------\n * Jsx style props\n * -----------------------------------------------------------------------------*/\ninterface WithCss {\n  css?: SystemStyleObject\n}\ntype StyleProps = SystemProperties & MinimalNested<SystemStyleObject>\n\nexport type JsxStyleProps = StyleProps & WithCss\n\nexport interface PatchedHTMLProps {\n  htmlWidth?: string | number\n  htmlHeight?: string | number\n  htmlTranslate?: 'yes' | 'no' | undefined\n  htmlContent?: string\n}\n\nexport type OmittedHTMLProps = 'color' | 'translate' | 'transition' | 'width' | 'height' | 'content'\n\ntype WithHTMLProps<T> = DistributiveOmit<T, OmittedHTMLProps> & PatchedHTMLProps\n\nexport type JsxHTMLProps<T extends Record<string, any>, P extends Record<string, any> = {}> = Assign<\n  WithHTMLProps<T>,\n  P\n>\n"
 };
 
 // src/artifacts/generated/composition.d.ts.json
@@ -2793,7 +3062,7 @@ var selectors_d_ts_default = {
 };
 
 // src/artifacts/types/generated.ts
-import { match as match8 } from "ts-pattern";
+import { match as match9 } from "ts-pattern";
 var jsxStyleProps = "export type JsxStyleProps = StyleProps & WithCss";
 function getGeneratedTypes(ctx) {
   const rewriteImports = (code) => code.replace(/import\s+type\s+\{([^}]+)\}\s+from\s+['"]([^'"]+)['"]/g, ctx.file.importType("$1", "$2"));
@@ -2805,15 +3074,15 @@ function getGeneratedTypes(ctx) {
     composition: rewriteImports(composition_d_ts_default.content),
     selectors: rewriteImports(selectors_d_ts_default.content),
     system: rewriteImports(
-      match8(ctx.jsx.styleProps).with("all", () => system_types_d_ts_default.content).with("minimal", () => system_types_d_ts_default.content.replace(jsxStyleProps, "export type JsxStyleProps = WithCss")).with("none", () => system_types_d_ts_default.content.replace(jsxStyleProps, "export type JsxStyleProps = {}")).exhaustive()
+      match9(ctx.jsx.styleProps).with("all", () => system_types_d_ts_default.content).with("minimal", () => system_types_d_ts_default.content.replace(jsxStyleProps, "export type JsxStyleProps = WithCss")).with("none", () => system_types_d_ts_default.content.replace(jsxStyleProps, "export type JsxStyleProps = {}")).exhaustive()
     )
   };
 }
 
 // src/artifacts/types/main.ts
-import { outdent as outdent39 } from "outdent";
+import { outdent as outdent40 } from "outdent";
 var generateTypesEntry = (ctx) => ({
-  global: outdent39`
+  global: outdent40`
     // @ts-nocheck
     import type * as Panda from '@pandacss/dev'
     ${ctx.file.importType("RecipeVariantRecord, RecipeConfig, SlotRecipeVariantRecord, SlotRecipeConfig", "./recipe")}
@@ -2834,7 +3103,7 @@ var generateTypesEntry = (ctx) => ({
     }
     `,
   // We need to export types used in the global.d.ts here to avoid TS errors such as `The inferred type of 'xxx' cannot be named without a reference to 'yyy'`
-  index: outdent39`
+  index: outdent40`
     import '${ctx.file.extDts("./global")}'
     ${ctx.file.exportTypeStar("./conditions")}
     ${ctx.file.exportTypeStar("./pattern")}
@@ -2844,13 +3113,13 @@ var generateTypesEntry = (ctx) => ({
     ${ctx.file.exportTypeStar("./style-props")}
 
     `,
-  helpers: outdent39`
+  helpers: outdent40`
   export type Pretty<T> = T extends infer U ? { [K in keyof U]: U[K] } : never
   `
 });
 
 // src/artifacts/types/prop-types.ts
-import { outdent as outdent40 } from "outdent";
+import { outdent as outdent41 } from "outdent";
 function generatePropTypes(ctx) {
   const {
     config: { strictTokens },
@@ -2858,7 +3127,7 @@ function generatePropTypes(ctx) {
   } = ctx;
   const strictText = `${strictTokens ? "" : " | CssValue<T>"}`;
   const result = [
-    outdent40`
+    outdent41`
     ${ctx.file.importType("ConditionalValue", "./conditions")}
     ${ctx.file.importType("CssProperties", "./system-types")}
     ${ctx.file.importType("Tokens", "../tokens/index")}
@@ -2881,7 +3150,7 @@ function generatePropTypes(ctx) {
     result.push(`	${key}: Shorthand<${JSON.stringify(value)}>;`);
   });
   result.push("}");
-  return outdent40`
+  return outdent41`
   ${result.join("\n")}
 
   export type PropertyValue<T extends string> = T extends keyof PropertyTypes
@@ -2894,10 +3163,10 @@ function generatePropTypes(ctx) {
 
 // src/artifacts/types/style-props.ts
 import { allCssProperties } from "@pandacss/is-valid-prop";
-import outdent41 from "outdent";
+import outdent42 from "outdent";
 function generateStyleProps(ctx) {
   const props = new Set(allCssProperties.concat(ctx.utility.keys()).filter(Boolean));
-  return outdent41`
+  return outdent42`
     ${ctx.file.importType("ConditionalValue", "./conditions")}
     ${ctx.file.importType("PropertyValue", "./prop-type")}
     ${ctx.file.importType("Token", "../tokens/index")}
@@ -2914,7 +3183,7 @@ function generateStyleProps(ctx) {
 
 // src/artifacts/types/token-types.ts
 import { capitalize, unionType as unionType3 } from "@pandacss/shared";
-import { outdent as outdent42 } from "outdent";
+import { outdent as outdent43 } from "outdent";
 import pluralize from "pluralize";
 var categories = [
   "zIndex",
@@ -2965,7 +3234,7 @@ function generateTokenTypes(ctx) {
   result.add("} & { [token: string]: never }");
   set.add(Array.from(result).join("\n"));
   set.add(`export type TokenCategory = ${unionType3(categories)}`);
-  return outdent42.string(Array.from(set).join("\n\n"));
+  return outdent43.string(Array.from(set).join("\n\n"));
 }
 
 // src/artifacts/index.ts
@@ -3011,7 +3280,6 @@ function setupTypes(ctx) {
       { file: ctx.file.extDts("selectors"), code: gen.selectors },
       { file: ctx.file.extDts("composition"), code: gen.composition },
       { file: ctx.file.extDts("global"), code: entry.global },
-      { file: ctx.file.extDts("helpers"), code: entry.helpers },
       { file: ctx.file.extDts("recipe"), code: gen.recipe },
       { file: ctx.file.extDts("pattern"), code: gen.pattern },
       { file: ctx.file.extDts("parts"), code: gen.parts },
@@ -3074,8 +3342,8 @@ function setupRecipes(ctx) {
     return;
   const indexFiles = files.filter((file) => !file.name.includes("create-recipe"));
   const index = {
-    js: outdent43.string(indexFiles.map((file) => ctx.file.exportStar(`./${file.name}`)).join("\n")),
-    dts: outdent43.string(indexFiles.map((file) => ctx.file.exportTypeStar(`./${file.name}`)).join("\n"))
+    js: outdent44.string(indexFiles.map((file) => ctx.file.exportStar(`./${file.name}`)).join("\n")),
+    dts: outdent44.string(indexFiles.map((file) => ctx.file.exportTypeStar(`./${file.name}`)).join("\n"))
   };
   return {
     dir: ctx.paths.recipe,
@@ -3094,8 +3362,8 @@ function setupPatterns(ctx) {
   if (!files)
     return;
   const index = {
-    js: outdent43.string(files.map((file) => ctx.file.exportStar(`./${file.name}`)).join("\n")),
-    dts: outdent43.string(files.map((file) => ctx.file.exportTypeStar(`./${file.name}`)).join("\n"))
+    js: outdent44.string(files.map((file) => ctx.file.exportStar(`./${file.name}`)).join("\n")),
+    dts: outdent44.string(files.map((file) => ctx.file.exportTypeStar(`./${file.name}`)).join("\n"))
   };
   return {
     dir: ctx.paths.pattern,
@@ -3114,18 +3382,19 @@ function setupJsx(ctx) {
   const types = generateJsxTypes(ctx);
   const factory = generateJsxFactory(ctx);
   const patterns = generateJsxPatterns(ctx);
+  const helpers3 = generatedJsxHelpers(ctx);
   const index = {
-    js: outdent43`
+    js: outdent44`
   ${ctx.file.exportStar("./factory")}
   ${isValidProp?.js ? ctx.file.exportStar("./is-valid-prop") : ""}
-  ${outdent43.string(patterns.map((file) => ctx.file.exportStar(`./${file.name}`)).join("\n"))}
+  ${outdent44.string(patterns.map((file) => ctx.file.exportStar(`./${file.name}`)).join("\n"))}
   `,
-    dts: outdent43`
+    dts: outdent44`
   ${ctx.file.exportTypeStar("./factory")}
 
   ${isValidProp?.dts ? ctx.file.exportTypeStar("./is-valid-prop") : ""}
 
-  ${outdent43.string(patterns.map((file) => ctx.file.exportTypeStar(`./${file.name}`)).join("\n"))}
+  ${outdent44.string(patterns.map((file) => ctx.file.exportTypeStar(`./${file.name}`)).join("\n"))}
 
   ${ctx.file.exportType([ctx.jsx.typeName, ctx.jsx.componentName].join(", "), "../types/jsx")}
     `
@@ -3137,6 +3406,7 @@ function setupJsx(ctx) {
       ...patterns.map((file) => ({ file: ctx.file.extDts(file.name), code: file.dts })),
       { file: ctx.file.ext("is-valid-prop"), code: isValidProp?.js },
       { file: ctx.file.extDts("is-valid-prop"), code: isValidProp?.dts },
+      { file: ctx.file.ext("factory-helper"), code: helpers3.js },
       { file: ctx.file.ext("factory"), code: factory?.js },
       { file: ctx.file.extDts("factory"), code: types.jsxFactory },
       { file: ctx.file.ext("index"), code: index.js },
@@ -3146,13 +3416,13 @@ function setupJsx(ctx) {
 }
 function setupCssIndex(ctx) {
   const index = {
-    js: outdent43`
+    js: outdent44`
   ${ctx.file.exportStar("./css")}
   ${ctx.file.exportStar("./cx")}
   ${ctx.isTemplateLiteralSyntax ? "" : ctx.file.exportStar("./cva")}
   ${ctx.isTemplateLiteralSyntax ? "" : ctx.file.exportStar("./sva")}
  `,
-    dts: outdent43`
+    dts: outdent44`
   ${ctx.file.exportTypeStar("./css")}
   ${ctx.file.exportTypeStar("./cx")}
   ${ctx.isTemplateLiteralSyntax ? "" : ctx.file.exportTypeStar("./cva")}
@@ -3214,6 +3484,8 @@ var generateArtifacts = (ctx) => () => {
   ].filter(Boolean).map((artifact) => {
     const files = artifact?.files ?? [];
     files.forEach((file) => {
+      if (!file)
+        return;
       if (ctx.file.isTypeFile(file.file)) {
         file.code = `/* eslint-disable */
 ${file.code}`;
@@ -3253,7 +3525,7 @@ var generateFlattenedCss = (ctx) => (options) => {
 // src/artifacts/css/parser-css.ts
 import { logger } from "@pandacss/logger";
 import { pipe, tap, tryCatch } from "lil-fp/func";
-import { P, match as match9 } from "ts-pattern";
+import { P, match as match10 } from "ts-pattern";
 var generateParserCss = (ctx) => (result) => pipe(
   { ...ctx, sheet: ctx.createSheet(), result },
   tap(({ sheet, result: result2, patterns, recipes }) => {
@@ -3283,7 +3555,7 @@ var generateParserCss = (ctx) => (result) => pipe(
           const recipeConfig = recipes.getConfig(recipeName);
           if (!recipeConfig)
             continue;
-          match9(recipe).with({ type: "jsx-recipe" }, () => {
+          match10(recipe).with({ type: "jsx-recipe" }, () => {
             recipe.data.forEach((data) => {
               const [recipeProps, styleProps] = recipes.splitProps(recipeName, data);
               sheet.processStyleProps(filterProps(ctx, styleProps));
@@ -3302,7 +3574,7 @@ var generateParserCss = (ctx) => (result) => pipe(
     result2.pattern.forEach((patternSet, name) => {
       try {
         for (const pattern of patternSet) {
-          match9(pattern).with({ type: "jsx-pattern", name: P.string }, ({ name: jsxName }) => {
+          match10(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);