@pandacss/generator 0.16.0 → 0.17.1

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) => {
@@ -268,6 +268,14 @@ function generateResetCss(ctx, scope = "") {
     background-image: none;
   }
 
+  ${selector}button,
+  ${selector}input,
+  ${selector}optgroup,
+  ${selector}select,
+  ${selector}textarea {
+    color: inherit;
+  }
+
   ${selector}button,
   ${selector}select {
     text-transform: none;
@@ -487,12 +495,25 @@ function getDeepestNode(node) {
 function cleanupSelectors(css2, varSelector) {
   const root = postcss2.parse(css2);
   root.walkRules((rule) => {
+    const selectors = [];
     rule.selectors.forEach((selector) => {
-      const res = selector.split(varSelector).filter(Boolean);
-      if (res.length === 0)
-        return;
-      rule.selector = res.join(varSelector);
+      selectors.push(selector.trim());
     });
+    const ruleSelector = selectors.join(", ");
+    if (ruleSelector === varSelector) {
+      return;
+    }
+    const trimmedSelector = selectors.join(",");
+    if (trimmedSelector === varSelector) {
+      return;
+    }
+    const selectorsWithoutVarRoot = selectors.map((selector) => {
+      const res = selector.split(varSelector).filter(Boolean);
+      return res.join("");
+    }).filter(Boolean);
+    if (selectorsWithoutVarRoot.length === 0)
+      return;
+    rule.selector = selectorsWithoutVarRoot.join(", ");
   });
   return root.toString();
 }
@@ -606,11 +627,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`
@@ -665,14 +682,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)
@@ -695,18 +712,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)}\`
@@ -714,14 +728,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) {
@@ -732,9 +746,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))
     `
   };
 }
@@ -744,11 +758,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) }
@@ -762,6 +784,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))
       }
@@ -780,6 +815,7 @@ function generateCvaFn(ctx) {
         variantKeys,
         raw: resolve,
         config,
+        merge,
         splitVariantProps,
       })
     }
@@ -854,7 +890,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 objects = sources.filter(Boolean);\n  return objects.reduce((prev, obj) => {\n    Object.keys(obj).forEach((key) => {\n      const prevValue = prev[key];\n      const value = obj[key];\n      if (isObject(prevValue) && isObject(value)) {\n        prev[key] = mergeProps(prevValue, value);\n      } else {\n        prev[key] = value;\n      }\n    });\n    return prev;\n  }, {});\n}\n\n// src/walk-object.ts\nvar isNotNullish = (element) => element != null;\nfunction walkObject(target, predicate, options = {}) {\n  const { stop, getKey } = options;\n  function inner(value, path = []) {\n    if (isObject(value) || Array.isArray(value)) {\n      const result = {};\n      for (const [prop, child] of Object.entries(value)) {\n        const key = getKey?.(prop) ?? prop;\n        const childPath = [...path, key];\n        if (stop?.(value, childPath)) {\n          return predicate(value, path);\n        }\n        const next = inner(child, childPath);\n        if (isNotNullish(next)) {\n          result[key] = next;\n        }\n      }\n      return result;\n    }\n    return predicate(value, path);\n  }\n  return inner(target);\n}\nfunction mapObject(obj, fn) {\n  if (!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
@@ -922,11 +958,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;
@@ -943,7 +1020,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")}
@@ -953,7 +1030,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) {
@@ -968,7 +1045,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}> {}
 
@@ -982,7 +1059,7 @@ function generatePattern(ctx) {
           `}
 
      `,
-      js: outdent10`
+      js: outdent11`
     ${ctx.file.import(helperImports.join(", "), "../helpers")}
     ${ctx.file.import("css", "../css/index")}
 
@@ -1001,8 +1078,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) {
@@ -1016,11 +1093,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) => {
@@ -1067,6 +1144,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 [
@@ -1074,9 +1175,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")}
 
@@ -1104,9 +1205,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 ?? {}
@@ -1122,6 +1223,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)
           },
@@ -1131,10 +1235,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) => {
@@ -1171,10 +1274,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")}
 
@@ -1211,7 +1314,7 @@ function generateSvaFn(ctx) {
       })
     }
     `,
-    dts: outdent12`
+    dts: outdent13`
     ${ctx.file.importType("SlotRecipeCreatorFn", "../types/recipe")}
 
     export declare const sva: SlotRecipeCreatorFn
@@ -1220,7 +1323,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();
@@ -1231,7 +1334,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) {
@@ -1244,7 +1347,7 @@ function generateTokenJs(ctx) {
 
   token.var = tokenVar
   `,
-    dts: outdent13`
+    dts: outdent14`
   ${ctx.file.importType("Token", "./tokens")}
 
   export declare const token: {
@@ -1258,49 +1361,54 @@ 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)
 
       const forwardFn = options.shouldForwardProp || defaultShouldForwardProp
       const shouldForwardProp = (prop) => forwardFn(prop, cvaFn.variantKeys)
-      
+
       const defaultProps = Object.assign(
         options.dataAttr && configOrCva.__name__ ? { 'data-recipe': configOrCva.__name__ } : {},
         options.defaultProps,
       )
 
       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)
+        const [htmlProps, forwardedProps, variantProps, styleProps, elementProps] = useMemo(() => {
+          return splitProps(combinedProps, normalizeHTMLProps.keys, __shouldForwardProps__, __cvaFn__.variantKeys, isCssProperty)
         }, [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)
         }
 
@@ -1316,8 +1424,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}
     }
 
@@ -1343,8 +1456,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) => {
@@ -1352,21 +1465,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 })
@@ -1374,7 +1487,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")}
@@ -1390,72 +1503,92 @@ 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 } = ctx.jsx;
+  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>
 
-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
 
 export type ${typeName}<T extends ElementType> = JsxHTMLProps<ComponentProps<T>, JsxStyleProps>
+
+export type ${variantName}<T extends ${componentName}<any, any>> = T extends ${componentName}<any, infer Props> ? Props : never
   `
   };
 }
 
 // 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,
@@ -1464,8 +1597,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}
       }
     }
@@ -1492,31 +1629,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
 
@@ -1526,46 +1667,53 @@ 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)
 
       const forwardFn = options.shouldForwardProp || defaultShouldForwardProp
       const shouldForwardProp = (prop) => forwardFn(prop, cvaFn.variantKeys)
-      
+
       const defaultProps = Object.assign(
         options.dataAttr && configOrCva.__name__ ? { 'data-recipe': configOrCva.__name__ } : {},
         options.defaultProps,
       )
 
       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 [htmlProps, forwardedProps, variantProps, styleProps, elementProps] =
+          splitProps(combinedProps, normalizeHTMLProps.keys, __shouldForwardProps__, __cvaFn__.variantKeys, isCssProperty)
 
         const { css: cssStyles, ...propStyles } = styleProps
 
         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)
         }
 
@@ -1580,8 +1728,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}
     }
 
@@ -1608,8 +1761,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) => {
@@ -1617,20 +1770,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 })
@@ -1638,7 +1791,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")}
@@ -1654,20 +1807,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 } = ctx.jsx;
+  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]
@@ -1675,13 +1831,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
@@ -1689,48 +1849,65 @@ 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
 
 export type ${typeName}<T extends ElementType> = Assign<ComponentProps<T>, JsxStyleProps>
+
+export type ${variantName}<T extends ${componentName}<any, any>> = T extends ${componentName}<any, infer Props> ? Props : never
   `
   };
 }
 
 // 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}
         }
     }
@@ -1758,18 +1935,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]
@@ -1777,17 +1954,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
 
@@ -1797,47 +1978,52 @@ 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)
 
       const forwardFn = options.shouldForwardProp || defaultShouldForwardProp
       const shouldForwardProp = (prop) => forwardFn(prop, cvaFn.variantKeys)
-      
+
       const defaultProps = Object.assign(
         options.dataAttr && configOrCva.__name__ ? { 'data-recipe': configOrCva.__name__ } : {},
         options.defaultProps,
       )
 
       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)
+        const [htmlProps, forwardedProps, variantProps, styleProps, elementProps] = useMemo(() => {
+          return splitProps(combinedProps, normalizeHTMLProps.keys, __shouldForwardProps__, __cvaFn__.variantKeys, isCssProperty)
         }, [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)
         }
 
@@ -1853,8 +2039,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}
     }
 
@@ -1881,8 +2072,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) => {
@@ -1890,20 +2081,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 })
@@ -1911,7 +2102,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")}
@@ -1927,20 +2118,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 } = ctx.jsx;
+  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>>
@@ -1951,7 +2147,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
@@ -1961,49 +2159,66 @@ 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
 
 export type ${typeName}<T extends ElementType> = JsxHTMLProps<ComponentProps<T>, JsxStyleProps>
+
+export type ${variantName}<T extends ${componentName}<any, any>> = T extends ${componentName}<any, infer Props> ? Props : never
   `
   };
 }
 
 // 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}
       }
     }
@@ -2031,19 +2246,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>>
@@ -2054,11 +2271,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
 
@@ -2068,53 +2287,61 @@ 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)
 
       const forwardFn = options.shouldForwardProp || defaultShouldForwardProp
       const shouldForwardProp = (prop) => forwardFn(prop, cvaFn.variantKeys)
-      
+
       const defaultProps = Object.assign(
         options.dataAttr && configOrCva.__name__ ? { 'data-recipe': configOrCva.__name__ } : {},
         options.defaultProps,
       )
 
-      return function ${componentName}(props) {
-        const mergedProps = mergeProps({ as: element }, defaultProps, props)
-        const forwardedKeys = createMemo(() => Object.keys(props).filter(shouldForwardProp))
+      const ${componentName} = (props) => {
+        const mergedProps = mergeProps({ as: element.__base__ || element }, defaultProps, props)
+
+        const __cvaFn__ = composeCvaFn(Dynamic.__cva__, cvaFn)
+        const __shouldForwardProps__ = composeShouldForwardProps(Dynamic, shouldForwardProp)
 
-        const [localProps, forwardedProps, variantProps, styleProps, htmlProps, elementProps] = splitProps(
+        const forwardedKeys = createMemo(() =>
+          Object.keys(props).filter((prop) => !normalizeHTMLProps.keys.includes(prop) && shouldForwardProp(prop)),
+        )
+
+        const [localProps, htmlProps, forwardedProps, variantProps, styleProps, elementProps] = splitProps(
           mergedProps,
           ['as', 'class', 'className'],
+          normalizeHTMLProps.keys,
           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)
         }
 
@@ -2141,6 +2368,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() {
@@ -2165,8 +2401,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) => {
@@ -2174,21 +2410,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))
@@ -2196,7 +2432,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")}
@@ -2212,31 +2448,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 } = ctx.jsx;
+  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
@@ -2244,41 +2487,51 @@ 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
 
 export type ${typeName}<T extends ElementType> = JsxHTMLProps<ComponentProps<T>, JsxStyleProps>
+
+export type ${variantName}<T extends ${componentName}<any, any>> = T extends ${componentName}<any, infer Props> ? Props : never
   `
   };
 }
 
 // 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(
@@ -2287,13 +2540,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}
   }
 }
 
@@ -2319,31 +2580,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
 
@@ -2353,60 +2618,65 @@ 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)
-      
+
       const forwardFn = options.shouldForwardProp || defaultShouldForwardProp
       const shouldForwardProp = (prop) => forwardFn(prop, cvaFn.variantKeys)
-      
+
       const defaultProps = Object.assign(
         options.dataAttr && configOrCva.__name__ ? { 'data-recipe': configOrCva.__name__ } : {},
         options.defaultProps,
       )
-        
-      const name = (typeof Dynamic === 'string' ? Dynamic : Dynamic.displayName || Dynamic.name) || 'Component'
 
-      return defineComponent({
+      const name = getDisplayName(Dynamic)
+
+      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, normalizeHTMLProps.keys, shouldForwardProp, __cvaFn__.variantKeys, isCssProperty)
           })
 
           const recipeClass = computed(() => {
-            const [_forwardedProps, variantProps, styleProps, _htmlProps, _elementProps] = splittedProps.value
+            const [_htmlProps, _forwardedProps, variantProps, styleProps, _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 [_htmlProps, _forwardedProps, variantProps, styleProps, _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)
           })
 
           const classes = configOrCva.__recipe__ ? recipeClass : cvaClass
 
           return () => {
-            const [forwardedProps, _variantProps, _styleProps, htmlProps, elementProps] = splittedProps.value
+            const [htmlProps, forwardedProps, _variantProps, _styleProps, elementProps] = splittedProps.value
             return h(
               props.as,
               {
@@ -2420,6 +2690,13 @@ function generateVueJsxFactory(ctx) {
           }
         },
       })
+
+      ${componentName}.displayName = \`${factoryName}.\${name}\`
+      ${componentName}.__cva__ = cvaFn
+      ${componentName}.__base__ = Dynamic
+      ${componentName}.__shouldForwardProps__ = shouldForwardProp
+
+      return ${componentName}
     }
 
     function createJsxFactory() {
@@ -2440,25 +2717,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,
@@ -2471,6 +2753,11 @@ function generateVueJsxStringLiteralFactory(ctx) {
           }
         },
       })
+
+      ${componentName}.__styles__ = styles
+      ${componentName}.__base__ = element
+
+      return ${componentName}
     }
   }
 
@@ -2496,7 +2783,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) => {
@@ -2505,7 +2792,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}`)}
@@ -2523,7 +2810,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")}
@@ -2539,23 +2826,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 } = ctx.jsx;
+  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"
+    )}
 
-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]
@@ -2563,13 +2854,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
@@ -2577,39 +2870,48 @@ 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
 
 export type ${typeName}<T extends ElementType> = JsxHTMLProps<ComponentProps<T>, JsxStyleProps>
+
+export type ${variantName}<T extends ${componentName}<any, any>> = T extends ${componentName}<any, infer Props> ? Props : never
   `
   };
 }
 
 // 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]
@@ -2617,14 +2919,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
 
@@ -2741,12 +3045,12 @@ 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
 var composition_d_ts_default = {
-  content: "import type { CompositionStyleObject } from './system-types'\n\ninterface Recursive<T> {\n  [key: string]: Recursive<T> | T\n}\n\nexport interface Token<Value = any> {\n  value: Value\n  description?: string\n}\n\n/* -----------------------------------------------------------------------------\n * Text styles\n * -----------------------------------------------------------------------------*/\n\ntype TextStyleProperty =\n  | 'fontSize'\n  | 'fontSizeAdjust'\n  | 'fontVariationSettings'\n  | 'fontVariantPosition'\n  | 'fontVariantCaps'\n  | 'fontVariantNumeric'\n  | 'fontVariantAlternates'\n  | 'fontVariantLigatures'\n  | 'fontFamily'\n  | 'fontWeight'\n  | 'fontSynthesis'\n  | 'fontStyle'\n  | 'fontVariant'\n  | 'lineHeight'\n  | 'letterSpacing'\n  | 'textDecoration'\n  | 'textTransform'\n  | 'textIndent'\n  | 'textDecorationColor'\n  | 'textDecorationLine'\n  | 'textDecorationStyle'\n  | 'textEmphasisColor'\n  | 'textEmphasisPosition'\n  | 'textEmphasisStyle'\n  | 'hyphenateCharacter'\n  | 'textOrientation'\n  | 'textOverflow'\n  | 'textRendering'\n\nexport type TextStyle = CompositionStyleObject<TextStyleProperty>\n\nexport type TextStyles = Recursive<Token<TextStyle>>\n\n/* -----------------------------------------------------------------------------\n * Layer styles\n * -----------------------------------------------------------------------------*/\n\ntype Placement =\n  | 'Top'\n  | 'Right'\n  | 'Bottom'\n  | 'Left'\n  | 'Inline'\n  | 'Block'\n  | 'InlineStart'\n  | 'InlineEnd'\n  | 'BlockStart'\n  | 'BlockEnd'\n\ntype Radius =\n  | `Top${'Right' | 'Left'}`\n  | `Bottom${'Right' | 'Left'}`\n  | `Start${'Start' | 'End'}`\n  | `End${'Start' | 'End'}`\n\ntype LayerStyleProperty =\n  | 'background'\n  | 'backgroundColor'\n  | 'backgroundImage'\n  | 'borderRadius'\n  | 'border'\n  | 'borderWidth'\n  | 'borderColor'\n  | 'borderStyle'\n  | 'boxShadow'\n  | 'filter'\n  | 'backdropFilter'\n  | 'transform'\n  | 'color'\n  | 'opacity'\n  | 'backgroundBlendMode'\n  | 'backgroundAttachment'\n  | 'backgroundClip'\n  | 'backgroundOrigin'\n  | 'backgroundPosition'\n  | 'backgroundRepeat'\n  | 'backgroundSize'\n  | `border${Placement}`\n  | `border${Placement}Width`\n  | 'borderRadius'\n  | `border${Radius}Radius`\n  | `border${Placement}Color`\n  | `border${Placement}Style`\n  | 'padding'\n  | `padding${Placement}`\n\nexport type LayerStyle = CompositionStyleObject<LayerStyleProperty>\n\nexport type LayerStyles = Recursive<Token<LayerStyle>>\n\nexport interface CompositionStyles {\n  textStyles: TextStyles\n  layerStyles: LayerStyles\n}\n"
+  content: "import type { CompositionStyleObject } from './system-types'\nimport type { Token } from '../tokens'\n\ninterface Recursive<T> {\n  [key: string]: Recursive<T> | T\n}\n\n/* -----------------------------------------------------------------------------\n * Text styles\n * -----------------------------------------------------------------------------*/\n\ntype TextStyleProperty =\n  | 'fontSize'\n  | 'fontSizeAdjust'\n  | 'fontVariationSettings'\n  | 'fontVariantPosition'\n  | 'fontVariantCaps'\n  | 'fontVariantNumeric'\n  | 'fontVariantAlternates'\n  | 'fontVariantLigatures'\n  | 'fontFamily'\n  | 'fontWeight'\n  | 'fontSynthesis'\n  | 'fontStyle'\n  | 'fontVariant'\n  | 'lineHeight'\n  | 'letterSpacing'\n  | 'textDecoration'\n  | 'textTransform'\n  | 'textIndent'\n  | 'textDecorationColor'\n  | 'textDecorationLine'\n  | 'textDecorationStyle'\n  | 'textEmphasisColor'\n  | 'textEmphasisPosition'\n  | 'textEmphasisStyle'\n  | 'hyphenateCharacter'\n  | 'textOrientation'\n  | 'textOverflow'\n  | 'textRendering'\n\nexport type TextStyle = CompositionStyleObject<TextStyleProperty>\n\nexport type TextStyles = Recursive<Token<TextStyle>>\n\n/* -----------------------------------------------------------------------------\n * Layer styles\n * -----------------------------------------------------------------------------*/\n\ntype Placement =\n  | 'Top'\n  | 'Right'\n  | 'Bottom'\n  | 'Left'\n  | 'Inline'\n  | 'Block'\n  | 'InlineStart'\n  | 'InlineEnd'\n  | 'BlockStart'\n  | 'BlockEnd'\n\ntype Radius =\n  | `Top${'Right' | 'Left'}`\n  | `Bottom${'Right' | 'Left'}`\n  | `Start${'Start' | 'End'}`\n  | `End${'Start' | 'End'}`\n\ntype LayerStyleProperty =\n  | 'background'\n  | 'backgroundColor'\n  | 'backgroundImage'\n  | 'borderRadius'\n  | 'border'\n  | 'borderWidth'\n  | 'borderColor'\n  | 'borderStyle'\n  | 'boxShadow'\n  | 'filter'\n  | 'backdropFilter'\n  | 'transform'\n  | 'color'\n  | 'opacity'\n  | 'backgroundBlendMode'\n  | 'backgroundAttachment'\n  | 'backgroundClip'\n  | 'backgroundOrigin'\n  | 'backgroundPosition'\n  | 'backgroundRepeat'\n  | 'backgroundSize'\n  | `border${Placement}`\n  | `border${Placement}Width`\n  | 'borderRadius'\n  | `border${Radius}Radius`\n  | `border${Placement}Color`\n  | `border${Placement}Style`\n  | 'padding'\n  | `padding${Placement}`\n\nexport type LayerStyle = CompositionStyleObject<LayerStyleProperty>\n\nexport type LayerStyles = Recursive<Token<LayerStyle>>\n\nexport interface CompositionStyles {\n  textStyles: TextStyles\n  layerStyles: LayerStyles\n}\n"
 };
 
 // src/artifacts/generated/recipe.d.ts.json
@@ -2756,12 +3060,12 @@ var recipe_d_ts_default = {
 
 // src/artifacts/generated/pattern.d.ts.json
 var pattern_d_ts_default = {
-  content: "import type { CssProperty, SystemStyleObject } from './system-types'\nimport type { TokenCategory } from '../tokens'\n\ntype Primitive = string | number | boolean | null | undefined\ntype LiteralUnion<T, K extends Primitive = string> = T | (K & Record<never, never>)\n\nexport type PatternProperty =\n  | { type: 'property'; value: CssProperty }\n  | { type: 'enum'; value: string[] }\n  | { type: 'token'; value: TokenCategory; property?: CssProperty }\n  | { type: 'string' | 'boolean' | 'number' }\n\nexport interface PatternHelpers {\n  map: (value: any, fn: (value: string) => string | undefined) => any\n}\n\nexport type PatternProperties = Record<string, PatternProperty>\n\ntype Props<T> = Record<LiteralUnion<keyof T>, any>\n\nexport interface PatternConfig<T extends PatternProperties = PatternProperties> {\n  /**\n   * The description of the pattern. This will be used in the JSDoc comment.\n   */\n  description?: string\n  /**\n   * The JSX element rendered by the pattern\n   * @default 'div'\n   */\n  jsxElement?: string\n  /**\n   * The properties of the pattern.\n   */\n  properties?: T\n  /**\n   * The css object this pattern will generate.\n   */\n  transform?: (props: Props<T>, helpers: PatternHelpers) => SystemStyleObject\n  /**\n   * The jsx element name this pattern will generate.\n   */\n  jsxName?: string\n  /**\n   * The jsx elements to track for this pattern. Can be string or Regexp.\n   *\n   * @default capitalize(pattern.name)\n   * @example ['Button', 'Link', /Button$/]\n   */\n  jsx?: Array<string | RegExp>\n  /**\n   * Whether to only generate types for the specified properties.\n   * This will disallow css properties\n   */\n  strict?: boolean\n  /**\n   * @experimental\n   * Disallow certain css properties for this pattern\n   */\n  blocklist?: LiteralUnion<CssProperty>[]\n}\n"
+  content: "import type { CssProperty, SystemStyleObject } from './system-types'\nimport type { TokenCategory } from '../tokens'\n\ntype Primitive = string | number | boolean | null | undefined\ntype LiteralUnion<T, K extends Primitive = string> = T | (K & Record<never, never>)\n\nexport type PatternProperty =\n  | { type: 'property'; value: CssProperty }\n  | { type: 'enum'; value: string[] }\n  | { type: 'token'; value: TokenCategory; property?: CssProperty }\n  | { type: 'string' | 'boolean' | 'number' }\n\nexport interface PatternHelpers {\n  map: (value: any, fn: (value: string) => string | undefined) => any\n}\n\nexport interface PatternProperties {\n  [key: string]: PatternProperty\n}\n\ntype Props<T> = Record<LiteralUnion<keyof T>, any>\n\nexport interface PatternConfig<T extends PatternProperties = PatternProperties> {\n  /**\n   * The description of the pattern. This will be used in the JSDoc comment.\n   */\n  description?: string\n  /**\n   * The JSX element rendered by the pattern\n   * @default 'div'\n   */\n  jsxElement?: string\n  /**\n   * The properties of the pattern.\n   */\n  properties?: T\n  /**\n   * The css object this pattern will generate.\n   */\n  transform?: (props: Props<T>, helpers: PatternHelpers) => SystemStyleObject\n  /**\n   * The jsx element name this pattern will generate.\n   */\n  jsxName?: string\n  /**\n   * The jsx elements to track for this pattern. Can be string or Regexp.\n   *\n   * @default capitalize(pattern.name)\n   * @example ['Button', 'Link', /Button$/]\n   */\n  jsx?: Array<string | RegExp>\n  /**\n   * Whether to only generate types for the specified properties.\n   * This will disallow css properties\n   */\n  strict?: boolean\n  /**\n   * @experimental\n   * Disallow certain css properties for this pattern\n   */\n  blocklist?: LiteralUnion<CssProperty>[]\n}\n"
 };
 
 // src/artifacts/generated/parts.d.ts.json
 var parts_d_ts_default = {
-  content: "export interface Part {\n  selector: string\n}\n\nexport type Parts = Record<string, Part>\n"
+  content: "export interface Part {\n  selector: string\n}\n\nexport interface Parts {\n  [key: string]: Part\n}\n"
 };
 
 // src/artifacts/generated/selectors.d.ts.json
@@ -2770,7 +3074,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"));
@@ -2782,15 +3086,32 @@ 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("WithHTMLProps<T>,", "T,").replace(jsxStyleProps, "export type JsxStyleProps = WithCss")
+      ).with(
+        "none",
+        () => system_types_d_ts_default.content.replace("WithHTMLProps<T>,", "T,").replace(jsxStyleProps, "export type JsxStyleProps = {}")
+      ).exhaustive()
     )
   };
 }
 
 // src/artifacts/types/main.ts
-import { outdent as outdent39 } from "outdent";
-var generateTypesEntry = (ctx) => ({
-  global: outdent39`
+import { outdent as outdent40 } from "outdent";
+var generateTypesEntry = (ctx, isJsxRequired) => {
+  const indexExports = [
+    // 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'`
+    `import '${ctx.file.extDts("./global")}'`,
+    ctx.file.exportTypeStar("./conditions"),
+    ctx.file.exportTypeStar("./pattern"),
+    ctx.file.exportTypeStar("./recipe"),
+    ctx.file.exportTypeStar("./system-types"),
+    isJsxRequired && ctx.file.exportTypeStar("./jsx"),
+    ctx.file.exportTypeStar("./style-props")
+  ].filter(Boolean);
+  return {
+    global: outdent40`
     // @ts-nocheck
     import type * as Panda from '@pandacss/dev'
     ${ctx.file.importType("RecipeVariantRecord, RecipeConfig, SlotRecipeVariantRecord, SlotRecipeConfig", "./recipe")}
@@ -2810,24 +3131,17 @@ var generateTypesEntry = (ctx) => ({
       export function defineParts<T extends Parts>(parts: T): (config: Partial<Record<keyof T, SystemStyleObject>>) => Partial<Record<keyof T, SystemStyleObject>>
     }
     `,
-  // 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`
-    import '${ctx.file.extDts("./global")}'
-    ${ctx.file.exportTypeStar("./conditions")}
-    ${ctx.file.exportTypeStar("./pattern")}
-    ${ctx.file.exportTypeStar("./recipe")}
-    ${ctx.file.exportTypeStar("./system-types")}
-    ${ctx.file.exportTypeStar("./jsx")}
-    ${ctx.file.exportTypeStar("./style-props")}
-
+    index: outdent40`
+    ${indexExports.join("\n")}
     `,
-  helpers: outdent39`
-  export type Pretty<T> = T extends infer U ? { [K in keyof U]: U[K] } : never
-  `
-});
+    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 },
@@ -2835,7 +3149,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")}
@@ -2858,7 +3172,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
@@ -2871,10 +3185,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")}
@@ -2891,7 +3205,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",
@@ -2942,7 +3256,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
@@ -2978,7 +3292,7 @@ function setupTypes(ctx) {
   const gen = getGeneratedTypes(ctx);
   const conditions = generateConditions(ctx);
   const jsx = generateJsxTypes(ctx);
-  const entry = generateTypesEntry(ctx);
+  const entry = generateTypesEntry(ctx, jsx != null);
   return {
     dir: ctx.paths.types,
     files: [
@@ -2988,7 +3302,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 },
@@ -3051,8 +3364,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,
@@ -3071,8 +3384,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,
@@ -3091,18 +3404,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")}
     `
@@ -3114,6 +3428,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 },
@@ -3123,13 +3438,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")}
@@ -3191,6 +3506,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}`;
@@ -3229,85 +3546,81 @@ 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";
-var generateParserCss = (ctx) => (result) => pipe(
-  { ...ctx, sheet: ctx.createSheet(), result },
-  tap(({ sheet, result: result2, patterns, recipes }) => {
-    result2.css.forEach((css2) => {
-      css2.data.forEach((data) => {
-        sheet.processAtomic(data);
-      });
+import { P, match as match10 } from "ts-pattern";
+var generateParserCss = (ctx) => (result) => {
+  const { patterns, recipes } = ctx;
+  const sheet = ctx.createSheet();
+  result.css.forEach((css2) => {
+    css2.data.forEach((data) => {
+      sheet.processAtomic(data);
     });
-    result2.cva.forEach((cva) => {
-      cva.data.forEach((data) => {
-        sheet.processAtomicRecipe(data);
-      });
+  });
+  result.cva.forEach((cva) => {
+    cva.data.forEach((data) => {
+      sheet.processAtomicRecipe(data);
     });
-    result2.sva.forEach((sva) => {
-      sva.data.forEach((data) => {
-        sheet.processAtomicSlotRecipe(data);
-      });
+  });
+  result.sva.forEach((sva) => {
+    sva.data.forEach((data) => {
+      sheet.processAtomicSlotRecipe(data);
     });
-    result2.jsx.forEach((jsx) => {
-      jsx.data.forEach((data) => {
-        sheet.processStyleProps(filterProps(ctx, data));
-      });
+  });
+  result.jsx.forEach((jsx) => {
+    jsx.data.forEach((data) => {
+      sheet.processStyleProps(filterProps(ctx, data));
     });
-    result2.recipe.forEach((recipeSet, recipeName) => {
-      try {
-        for (const recipe of recipeSet) {
-          const recipeConfig = recipes.getConfig(recipeName);
-          if (!recipeConfig)
-            continue;
-          match9(recipe).with({ type: "jsx-recipe" }, () => {
-            recipe.data.forEach((data) => {
-              const [recipeProps, styleProps] = recipes.splitProps(recipeName, data);
-              sheet.processStyleProps(filterProps(ctx, styleProps));
-              sheet.processRecipe(recipeName, recipeConfig, recipeProps);
-            });
-          }).otherwise(() => {
-            recipe.data.forEach((data) => {
-              sheet.processRecipe(recipeName, recipeConfig, data);
-            });
+  });
+  result.recipe.forEach((recipeSet, recipeName) => {
+    try {
+      for (const recipe of recipeSet) {
+        const recipeConfig = recipes.getConfig(recipeName);
+        if (!recipeConfig)
+          continue;
+        match10(recipe).with({ type: "jsx-recipe" }, () => {
+          recipe.data.forEach((data) => {
+            const [recipeProps, styleProps] = recipes.splitProps(recipeName, data);
+            sheet.processStyleProps(filterProps(ctx, styleProps));
+            sheet.processRecipe(recipeName, recipeConfig, recipeProps);
           });
-        }
-      } catch (error) {
-        logger.error("serializer:recipe", error);
+        }).otherwise(() => {
+          recipe.data.forEach((data) => {
+            sheet.processRecipe(recipeName, recipeConfig, data);
+          });
+        });
       }
-    });
-    result2.pattern.forEach((patternSet, name) => {
-      try {
-        for (const pattern of patternSet) {
-          match9(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);
-              sheet.processStyleProps(filterProps(ctx, styleProps));
-            });
-          }).otherwise(() => {
-            pattern.data.forEach((data) => {
-              const styleProps = patterns.transform(name, data);
-              sheet.processAtomic(styleProps);
-            });
+    } catch (error) {
+      logger.error("serializer:recipe", error);
+    }
+  });
+  result.pattern.forEach((patternSet, name) => {
+    try {
+      for (const pattern of patternSet) {
+        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);
+            sheet.processStyleProps(filterProps(ctx, styleProps));
           });
-        }
-      } catch (error) {
-        logger.error("serializer:pattern", error);
+        }).otherwise(() => {
+          pattern.data.forEach((data) => {
+            const styleProps = patterns.transform(name, data);
+            sheet.processAtomic(styleProps);
+          });
+        });
       }
-    });
-  }),
-  tryCatch(
-    ({ sheet, result: result2, config: { minify, optimize } }) => {
-      const css2 = !result2.isEmpty() ? sheet.toCss({ minify, optimize }) : void 0;
-      void ctx.hooks.callHook("parser:css", result2.filePath ?? "", css2);
-      return css2;
-    },
-    (err) => {
-      logger.error("serializer:css", "Failed to serialize CSS: " + err);
+    } catch (error) {
+      logger.error("serializer:pattern", error);
     }
-  )
-);
+  });
+  try {
+    const { minify, optimize } = ctx.config;
+    const css2 = !result.isEmpty() ? sheet.toCss({ minify, optimize }) : void 0;
+    void ctx.hooks.callHook("parser:css", result.filePath ?? "", css2);
+    return css2;
+  } catch (err) {
+    logger.error("serializer:css", "Failed to serialize CSS: " + err);
+  }
+};
 var filterProps = (ctx, props) => {
   const clone = {};
   for (const [key, value] of Object.entries(props)) {
@@ -3362,7 +3675,7 @@ var getBaseEngine = (conf) => {
     strictTokens: config.strictTokens
   });
   const conditions = new Conditions({
-    conditions: isTemplateLiteralSyntax ? {} : config.conditions,
+    conditions: config.conditions,
     breakpoints: config.theme?.breakpoints
   });
   const { textStyles, layerStyles } = theme;
@@ -3438,6 +3751,7 @@ var getJsxEngine = (config) => {
     factoryName: jsxFactory,
     upperName: capitalize2(jsxFactory),
     typeName: `HTML${capitalize2(jsxFactory)}Props`,
+    variantName: `${capitalize2(jsxFactory)}VariantProps`,
     componentName: `${capitalize2(jsxFactory)}Component`,
     framework: jsxFramework,
     styleProps: jsxStyleProps2 ?? "all"
@@ -3507,45 +3821,84 @@ var getPatternEngine = (config) => {
   };
 };
 
+// src/engines/file.ts
+var getFileEngine = (config) => {
+  const { forceConsistentTypeExtension, outExtension } = config;
+  return {
+    ext(file) {
+      return `${file}.${outExtension}`;
+    },
+    extDts(file) {
+      const dts = outExtension === "mjs" && forceConsistentTypeExtension ? "d.mts" : "d.ts";
+      return `${file}.${dts}`;
+    },
+    __extDts(file) {
+      return forceConsistentTypeExtension ? this.extDts(file) : file;
+    },
+    import(mod, file) {
+      return `import { ${mod} } from '${this.ext(file)}';`;
+    },
+    importType(mod, file) {
+      return `import type { ${mod} } from '${this.__extDts(file)}';`;
+    },
+    exportType(mod, file) {
+      return `export type { ${mod} } from '${this.__extDts(file)}';`;
+    },
+    exportStar(file) {
+      return `export * from '${this.ext(file)}';`;
+    },
+    exportTypeStar(file) {
+      return `export * from '${this.__extDts(file)}';`;
+    },
+    isTypeFile(file) {
+      return file.endsWith(".d.ts") || file.endsWith(".d.mts");
+    }
+  };
+};
+
 // src/engines/index.ts
 var getEngine = (conf) => {
   const { config } = conf;
-  const { forceConsistentTypeExtension, outExtension } = config;
   return {
     ...getBaseEngine(conf),
     patterns: getPatternEngine(config),
     jsx: getJsxEngine(config),
     paths: getPathEngine(config),
-    file: {
-      ext(file) {
-        return `${file}.${outExtension}`;
-      },
-      extDts(file) {
-        const dts = outExtension === "mjs" && forceConsistentTypeExtension ? "d.mts" : "d.ts";
-        return `${file}.${dts}`;
-      },
-      __extDts(file) {
-        return forceConsistentTypeExtension ? this.extDts(file) : file;
-      },
-      import(mod, file) {
-        return `import { ${mod} } from '${this.ext(file)}';`;
-      },
-      importType(mod, file) {
-        return `import type { ${mod} } from '${this.__extDts(file)}';`;
-      },
-      exportType(mod, file) {
-        return `export type { ${mod} } from '${this.__extDts(file)}';`;
-      },
-      exportStar(file) {
-        return `export * from '${this.ext(file)}';`;
-      },
-      exportTypeStar(file) {
-        return `export * from '${this.__extDts(file)}';`;
-      },
-      isTypeFile(file) {
-        return file.endsWith(".d.ts") || file.endsWith(".d.mts");
-      }
-    }
+    file: getFileEngine(config)
+  };
+};
+
+// src/parser-options.ts
+var getImportMap = (outdir, configImportMap) => {
+  const { css: css2, recipes, patterns, jsx } = configImportMap ?? {};
+  return {
+    css: css2 ? [css2] : [outdir, "css"],
+    recipe: recipes ? [recipes] : [outdir, "recipes"],
+    pattern: patterns ? [patterns] : [outdir, "patterns"],
+    jsx: jsx ? [jsx] : [outdir, "jsx"]
+  };
+};
+var getParserOptions = (ctx) => {
+  const { config, jsx, isValidProperty, patterns, recipes, tsconfig, tsOptions } = ctx;
+  const compilerOptions = tsconfig?.compilerOptions ?? {};
+  const baseUrl = compilerOptions.baseUrl ?? "";
+  const cwd = config.cwd;
+  const relativeBaseUrl = baseUrl !== cwd ? baseUrl.replace(cwd, "").slice(1) : cwd;
+  return {
+    importMap: getImportMap(config.outdir.replace(relativeBaseUrl, ""), config.importMap),
+    jsx: {
+      framework: jsx.framework,
+      factory: jsx.factoryName,
+      styleProps: jsx.styleProps,
+      isStyleProp: isValidProperty,
+      nodes: [...patterns.details, ...recipes.details]
+    },
+    patternKeys: patterns.keys,
+    recipeKeys: recipes.keys,
+    getRecipesByJsxName: recipes.filter,
+    getPatternsByJsxName: patterns.filter,
+    compilerOptions,
+    tsOptions
   };
 };
 
@@ -3570,19 +3923,9 @@ var defaults = (conf) => ({
     }
   }
 });
-var getImportMap = (outdir, configImportMap) => ({
-  css: configImportMap?.css ? [configImportMap.css] : [outdir, "css"],
-  recipe: configImportMap?.recipes ? [configImportMap.recipes] : [outdir, "recipes"],
-  pattern: configImportMap?.patterns ? [configImportMap.patterns] : [outdir, "patterns"],
-  jsx: configImportMap?.jsx ? [configImportMap.jsx] : [outdir, "jsx"]
-});
 var createGenerator = (conf) => {
   const ctx = getEngine(defaults(conf));
-  const { config, jsx, isValidProperty, patterns, recipes } = ctx;
-  const compilerOptions = conf.tsconfig?.compilerOptions ?? {};
-  const baseUrl = compilerOptions.baseUrl ?? "";
-  const cwd = conf.config.cwd;
-  const relativeBaseUrl = baseUrl !== cwd ? baseUrl.replace(cwd, "").slice(1) : cwd;
+  const parserOptions = getParserOptions(ctx);
   return {
     ...ctx,
     getArtifacts: generateArtifacts(ctx),
@@ -3597,22 +3940,7 @@ var createGenerator = (conf) => {
     getParserCss: generateParserCss(ctx),
     //
     messages: getMessages(ctx),
-    parserOptions: {
-      importMap: getImportMap(config.outdir.replace(relativeBaseUrl, ""), config.importMap),
-      jsx: {
-        framework: jsx.framework,
-        factory: jsx.factoryName,
-        styleProps: jsx.styleProps,
-        isStyleProp: isValidProperty,
-        nodes: [...patterns.details, ...recipes.details]
-      },
-      patternKeys: patterns.keys,
-      recipeKeys: recipes.keys,
-      getRecipesByJsxName: recipes.filter,
-      getPatternsByJsxName: patterns.filter,
-      compilerOptions,
-      tsOptions: conf.tsOptions
-    }
+    parserOptions
   };
 };
 export {