@pandacss/generator 0.30.1 → 0.31.0

package/dist/index.js

@@ -375,7 +375,7 @@ function generateCvaFn(ctx) {
 
     export declare const cva: RecipeCreatorFn
 
-    ${ctx.file.exportType("RecipeVariantProps", "../types/recipe")}
+    ${ctx.file.exportType("RecipeVariant, RecipeVariantProps", "../types/recipe")}
     `
   };
 }
@@ -420,7 +420,7 @@ var astish_mjs_default = {
 
 // 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/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/important.ts\nvar importantRegex = /\\s*!(important)?/i;\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/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/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, child) ?? prop;\n        const childPath = [...path, key];\n        if (stop?.(value, childPath)) {\n          return predicate(value, path);\n        }\n        const next = inner(child, childPath);\n        if (isNotNullish(next)) {\n          result[key] = next;\n        }\n      }\n      return result;\n    }\n    return predicate(value, path);\n  }\n  return inner(target);\n}\nfunction mapObject(obj, fn) {\n  if (Array.isArray(obj))\n    return obj.map((value) => fn(value));\n  if (!isObject(obj))\n    return fn(obj);\n  return walkObject(obj, (value) => fn(value));\n}\n\n// src/normalize-style-object.ts\nfunction toResponsiveObject(values, breakpoints) {\n  return values.reduce((acc, current, index) => {\n    const key = breakpoints[index];\n    if (current != null) {\n      acc[key] = current;\n    }\n    return acc;\n  }, {});\n}\nfunction normalizeStyleObject(styles, context, shorthand = true) {\n  const { utility, conditions } = context;\n  const { hasShorthand, resolveShorthand } = utility;\n  return walkObject(\n    styles,\n    (value) => {\n      return Array.isArray(value) ? toResponsiveObject(value, conditions.breakpoints.keys) : value;\n    },\n    {\n      stop: (value) => Array.isArray(value),\n      getKey: shorthand ? (prop) => hasShorthand ? resolveShorthand(prop) : prop : void 0\n    }\n  );\n}\n\n// src/classname.ts\nvar fallbackCondition = {\n  shift: (v) => v,\n  finalize: (v) => v,\n  breakpoints: { keys: [] }\n};\nvar sanitize = (value) => typeof value === "string" ? value.replaceAll(/[\\n\\s]+/g, " ") : value;\nfunction createCss(context) {\n  const { utility, hash, conditions: conds = fallbackCondition } = context;\n  const formatClassName = (str) => [utility.prefix, str].filter(Boolean).join("-");\n  const hashFn = (conditions, className) => {\n    let result;\n    if (hash) {\n      const baseArray = [...conds.finalize(conditions), className];\n      result = formatClassName(utility.toHash(baseArray, toHash));\n    } else {\n      const baseArray = [...conds.finalize(conditions), formatClassName(className)];\n      result = baseArray.join(":");\n    }\n    return result;\n  };\n  return memo((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) => normalizeStyleObject(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: memo(mergeCss), assignCss };\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/is-css-function.ts\nvar fns = ["min", "max", "clamp", "calc"];\nvar fnRegExp = new RegExp(`^(${fns.join("|")})\\\\(.*\\\\)`);\nvar isCssFunction = (v) => typeof v === "string" && fnRegExp.test(v);\n\n// src/is-css-unit.ts\nvar lengthUnits = "cm,mm,Q,in,pc,pt,px,em,ex,ch,rem,lh,rlh,vw,vh,vmin,vmax,vb,vi,svw,svh,lvw,lvh,dvw,dvh,cqw,cqh,cqi,cqb,cqmin,cqmax,%";\nvar lengthUnitsPattern = `(?:${lengthUnits.split(",").join("|")})`;\nvar lengthRegExp = new RegExp(`^[+-]?[0-9]*.?[0-9]+(?:[eE][+-]?[0-9]+)?${lengthUnitsPattern}$`);\nvar isCssUnit = (v) => typeof v === "string" && lengthRegExp.test(v);\n\n// src/is-css-var.ts\nvar isCssVar = (v) => typeof v === "string" && /^var\\(--.+\\)$/.test(v);\n\n// src/pattern-fns.ts\nvar patternFns = {\n  map: mapObject,\n  isCssFunction,\n  isCssVar,\n  isCssUnit\n};\nvar getPatternStyles = (pattern, styles) => {\n  if (!pattern.defaultValues)\n    return styles;\n  const defaults = typeof pattern.defaultValues === "function" ? pattern.defaultValues(styles) : pattern.defaultValues;\n  return Object.assign({}, defaults, compact(styles));\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  getPatternStyles,\n  getSlotCompoundVariant,\n  getSlotRecipes,\n  hypenateProperty,\n  isBaseCondition,\n  isObject,\n  mapObject,\n  memo,\n  mergeProps,\n  patternFns,\n  splitProps,\n  toHash,\n  uniq,\n  walkObject,\n  withoutSpace\n};\n'
+  content: '// src/assert.ts\nfunction isObject(value) {\n  return typeof value === "object" && value != null && !Array.isArray(value);\n}\n\n// src/compact.ts\nfunction compact(value) {\n  return Object.fromEntries(Object.entries(value ?? {}).filter(([_, value2]) => value2 !== void 0));\n}\n\n// src/condition.ts\nvar isBaseCondition = (v) => v === "base";\nfunction filterBaseConditions(c) {\n  return c.slice().filter((v) => !isBaseCondition(v));\n}\n\n// src/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/important.ts\nvar importantRegex = /\\s*!(important)?/i;\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/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/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, child) ?? prop;\n        const childPath = [...path, key];\n        if (stop?.(value, childPath)) {\n          return predicate(value, path);\n        }\n        const next = inner(child, childPath);\n        if (isNotNullish(next)) {\n          result[key] = next;\n        }\n      }\n      return result;\n    }\n    return predicate(value, path);\n  }\n  return inner(target);\n}\nfunction mapObject(obj, fn) {\n  if (Array.isArray(obj))\n    return obj.map((value) => fn(value));\n  if (!isObject(obj))\n    return fn(obj);\n  return walkObject(obj, (value) => fn(value));\n}\n\n// src/normalize-style-object.ts\nfunction toResponsiveObject(values, breakpoints) {\n  return values.reduce((acc, current, index) => {\n    const key = breakpoints[index];\n    if (current != null) {\n      acc[key] = current;\n    }\n    return acc;\n  }, {});\n}\nfunction normalizeStyleObject(styles, context, shorthand = true) {\n  const { utility, conditions } = context;\n  const { hasShorthand, resolveShorthand } = utility;\n  return walkObject(\n    styles,\n    (value) => {\n      return Array.isArray(value) ? toResponsiveObject(value, conditions.breakpoints.keys) : value;\n    },\n    {\n      stop: (value) => Array.isArray(value),\n      getKey: shorthand ? (prop) => hasShorthand ? resolveShorthand(prop) : prop : void 0\n    }\n  );\n}\n\n// src/classname.ts\nvar fallbackCondition = {\n  shift: (v) => v,\n  finalize: (v) => v,\n  breakpoints: { keys: [] }\n};\nvar sanitize = (value) => typeof value === "string" ? value.replaceAll(/[\\n\\s]+/g, " ") : value;\nfunction createCss(context) {\n  const { utility, hash, conditions: conds = fallbackCondition } = context;\n  const formatClassName = (str) => [utility.prefix, str].filter(Boolean).join("-");\n  const hashFn = (conditions, className) => {\n    let result;\n    if (hash) {\n      const baseArray = [...conds.finalize(conditions), className];\n      result = formatClassName(utility.toHash(baseArray, toHash));\n    } else {\n      const baseArray = [...conds.finalize(conditions), formatClassName(className)];\n      result = baseArray.join(":");\n    }\n    return result;\n  };\n  return memo(({ base, ...styles } = {}) => {\n    const styleObject = Object.assign(styles, base);\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) => normalizeStyleObject(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: memo(mergeCss), assignCss };\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/is-css-function.ts\nvar fns = ["min", "max", "clamp", "calc"];\nvar fnRegExp = new RegExp(`^(${fns.join("|")})\\\\(.*\\\\)`);\nvar isCssFunction = (v) => typeof v === "string" && fnRegExp.test(v);\n\n// src/is-css-unit.ts\nvar lengthUnits = "cm,mm,Q,in,pc,pt,px,em,ex,ch,rem,lh,rlh,vw,vh,vmin,vmax,vb,vi,svw,svh,lvw,lvh,dvw,dvh,cqw,cqh,cqi,cqb,cqmin,cqmax,%";\nvar lengthUnitsPattern = `(?:${lengthUnits.split(",").join("|")})`;\nvar lengthRegExp = new RegExp(`^[+-]?[0-9]*.?[0-9]+(?:[eE][+-]?[0-9]+)?${lengthUnitsPattern}$`);\nvar isCssUnit = (v) => typeof v === "string" && lengthRegExp.test(v);\n\n// src/is-css-var.ts\nvar isCssVar = (v) => typeof v === "string" && /^var\\(--.+\\)$/.test(v);\n\n// src/pattern-fns.ts\nvar patternFns = {\n  map: mapObject,\n  isCssFunction,\n  isCssVar,\n  isCssUnit\n};\nvar getPatternStyles = (pattern, styles) => {\n  if (!pattern.defaultValues)\n    return styles;\n  const defaults = typeof pattern.defaultValues === "function" ? pattern.defaultValues(styles) : pattern.defaultValues;\n  return Object.assign({}, defaults, compact(styles));\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  getPatternStyles,\n  getSlotCompoundVariant,\n  getSlotRecipes,\n  hypenateProperty,\n  isBaseCondition,\n  isObject,\n  mapObject,\n  memo,\n  mergeProps,\n  patternFns,\n  splitProps,\n  toHash,\n  uniq,\n  walkObject,\n  withoutSpace\n};\n'
 };
 
 // src/artifacts/generated/normalize-html.mjs.json
@@ -936,11 +936,12 @@ function generatePreactJsxFactory(ctx) {
         options.defaultProps,
       )
 
+      const __cvaFn__ = composeCvaFn(Dynamic.__cva__, cvaFn)
+      const __shouldForwardProps__ = composeShouldForwardProps(Dynamic, shouldForwardProp)
+
       const ${componentName} = /* @__PURE__ */ forwardRef(function ${componentName}(props, ref) {
         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])
 
@@ -974,7 +975,7 @@ function generatePreactJsxFactory(ctx) {
       const name = getDisplayName(Dynamic)
 
       ${componentName}.displayName = \`${factoryName}.\${name}\`
-      ${componentName}.__cva__ = cvaFn
+      ${componentName}.__cva__ = __cvaFn__
       ${componentName}.__base__ = Dynamic
       ${componentName}.__shouldForwardProps__ = shouldForwardProp
 
@@ -1261,12 +1262,12 @@ function generateQwikJsxFactory(ctx) {
         options.defaultProps,
       )
 
+      const __cvaFn__ = composeCvaFn(Dynamic.__cva__, cvaFn)
+      const __shouldForwardProps__ = composeShouldForwardProps(Dynamic, shouldForwardProp)
+
       const ${componentName} = function ${componentName}(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 [htmlProps, forwardedProps, variantProps, styleProps, elementProps] =
@@ -1299,7 +1300,7 @@ function generateQwikJsxFactory(ctx) {
       const name = getDisplayName(Dynamic)
 
       ${componentName}.displayName = \`${factoryName}.\${name}\`
-      ${componentName}.__cva__ = cvaFn
+      ${componentName}.__cva__ = __cvaFn__
       ${componentName}.__base__ = Dynamic
       ${componentName}.__shouldForwardProps__ = shouldForwardProp
 
@@ -1593,12 +1594,12 @@ function generateReactJsxFactory(ctx) {
         options.defaultProps,
       )
 
+      const __cvaFn__ = composeCvaFn(Dynamic.__cva__, cvaFn)
+      const __shouldForwardProps__ = composeShouldForwardProps(Dynamic, shouldForwardProp)
+
       const ${componentName} = /* @__PURE__ */ forwardRef(function ${componentName}(props, ref) {
         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 [htmlProps, forwardedProps, variantProps, styleProps, elementProps] = useMemo(() => {
@@ -1631,7 +1632,7 @@ function generateReactJsxFactory(ctx) {
       const name = getDisplayName(Dynamic)
 
       ${componentName}.displayName = \`${factoryName}.\${name}\`
-      ${componentName}.__cva__ = cvaFn
+      ${componentName}.__cva__ = __cvaFn__
       ${componentName}.__base__ = Dynamic
       ${componentName}.__shouldForwardProps__ = shouldForwardProp
 
@@ -1903,63 +1904,87 @@ function generateSolidJsxFactory(ctx) {
   const { componentName, factoryName } = ctx.jsx;
   return {
     js: import_outdent29.outdent`
-    import { Dynamic } from 'solid-js/web'
     import { createMemo, mergeProps, splitProps } from 'solid-js'
-    import { createComponent } from 'solid-js/web'
+    import { Dynamic, createComponent } from 'solid-js/web'
+    ${ctx.file.import("css, cx, cva", "../css/index")}
+    ${ctx.file.import("normalizeHTMLProps", "../helpers")}
     ${ctx.file.import(
-      "defaultShouldForwardProp, composeShouldForwardProps, composeCvaFn, getDisplayName",
+      "composeCvaFn, composeShouldForwardProps, defaultShouldForwardProp, getDisplayName",
       "./factory-helper"
     )}
     ${ctx.file.import("isCssProperty", "./is-valid-prop")}
-    ${ctx.file.import("css, cx, cva", "../css/index")}
-    ${ctx.file.import("normalizeHTMLProps", "../helpers")}
 
     function styledFn(element, configOrCva = {}, options = {}) {
-      const cvaFn = configOrCva.__cva__ || configOrCva.__recipe__ ? configOrCva : cva(configOrCva)
+      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,
+        options.dataAttr && configOrCva.__name__
+          ? { 'data-recipe': configOrCva.__name__ }
+          : {},
+        options.defaultProps
+      )
+
+      const __cvaFn__ = composeCvaFn(element.__cva__, cvaFn)
+      const __shouldForwardProps__ = composeShouldForwardProps(
+        element,
+        shouldForwardProp
       )
 
       const ${componentName} = (props) => {
-        const mergedProps = mergeProps({ as: element.__base__ || element }, defaultProps, props)
+        const mergedProps = mergeProps(
+          { as: element.__base__ || element },
+          defaultProps,
+          props
+        )
 
-        const __cvaFn__ = composeCvaFn(Dynamic.__cva__, cvaFn)
-        const __shouldForwardProps__ = composeShouldForwardProps(Dynamic, shouldForwardProp)
+        const [localProps, restProps] = splitProps(mergedProps, [
+          'as',
+          'class',
+          'className',
+        ])
 
-        const forwardedKeys = createMemo(() =>
-          Object.keys(props).filter((prop) => !normalizeHTMLProps.keys.includes(prop) && shouldForwardProp(prop)),
-        )
+        const [htmlProps, aProps] = splitProps(restProps, normalizeHTMLProps.keys)
 
-        const [localProps, htmlProps, forwardedProps, restProps] = splitProps(
-          mergedProps,
-          ['as', 'class', 'className'],
-          normalizeHTMLProps.keys,
-          forwardedKeys()
-        )
+        const forwardedKeys = createMemo(() => {
+          const keys = Object.keys(aProps)
+          return keys.filter((prop) => __shouldForwardProps__(prop))
+        })
 
-        const cssPropertyKeys = createMemo(() => Object.keys(restProps).filter((prop) => isCssProperty(prop)))
+        const [forwardedProps, variantProps, bProps] = splitProps(aProps, forwardedKeys(), __cvaFn__.variantKeys)
 
-        const [variantProps, styleProps, elementProps] = splitProps(
-          restProps,
-          __cvaFn__.variantKeys,
-          cssPropertyKeys(),
-        )
+        const cssPropKeys = createMemo(() => {
+          const keys = Object.keys(bProps)
+          return keys.filter((prop) => isCssProperty(prop))
+        })
+
+        const [styleProps, elementProps] = splitProps(bProps, cssPropKeys())
 
         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)
-          return cx(css(cvaStyles, propStyles, cssStyles), localProps.class, localProps.className)
+          return cx(
+            css(cvaStyles, propStyles, cssStyles),
+            localProps.class,
+            localProps.className
+          )
         }
 
         const classes = configOrCva.__recipe__ ? recipeClass : cvaClass
@@ -1970,26 +1995,21 @@ function generateSolidJsxFactory(ctx) {
 
         return createComponent(
           Dynamic,
-          mergeProps(
-            forwardedProps,
-            elementProps,
-            normalizeHTMLProps(htmlProps),
-            {
-              get component() {
-                return localProps.as
-              },
-              get class() {
-                return classes()
-              }
+          mergeProps(forwardedProps, elementProps, normalizeHTMLProps(htmlProps), {
+            get component() {
+              return localProps.as
             },
-          )
+            get class() {
+              return classes()
+            },
+          })
         )
       }
 
       const name = getDisplayName(element)
 
       ${componentName}.displayName = \`${factoryName}.\${name}\`
-      ${componentName}.__cva__ = cvaFn
+      ${componentName}.__cva__ = __cvaFn__
       ${componentName}.__base__ = element
       ${componentName}.__shouldForwardProps__ = shouldForwardProp
 
@@ -2284,15 +2304,17 @@ function generateVueJsxFactory(ctx) {
       )
 
       const name = getDisplayName(Dynamic)
+      const __cvaFn__ = composeCvaFn(Dynamic.__cva__, cvaFn)
+      const __shouldForwardProps__ = composeShouldForwardProps(Dynamic, shouldForwardProp)
 
       const ${componentName} = defineComponent({
         name: \`${factoryName}.\${name}\`,
         inheritAttrs: false,
-        props: { as: { type: [String, Object], default: Dynamic.__base__ || Dynamic } },
-        setup(props, { slots, attrs }) {
-          const __cvaFn__ = composeCvaFn(Dynamic.__cva__, cvaFn)
-          const __shouldForwardProps__ = composeShouldForwardProps(Dynamic, shouldForwardProp)
-
+        props: {
+          modelValue: null,
+          as: { type: [String, Object], default: Dynamic.__base__ || Dynamic }
+        },
+        setup(props, { slots, attrs, emit }) {
           const combinedProps = computed(() => Object.assign({}, defaultProps, attrs))
 
           const splittedProps = computed(() => {
@@ -2315,43 +2337,68 @@ function generateVueJsxFactory(ctx) {
 
           const classes = configOrCva.__recipe__ ? recipeClass : cvaClass
 
+          const vModelProps = computed(() => {
+            const result = {};
+
+            if (
+              props.as === 'input' &&
+              (props.type === 'checkbox' || props.type === 'radio')
+            ) {
+              result.checked = props.modelValue;
+              result.onChange = (event) => {
+                const checked = !event.currentTarget.checked;
+                emit('change', checked, event);
+                emit('update:modelValue', checked, event);
+              };
+            } else if (
+              props.as === 'input' ||
+              props.as === 'textarea' ||
+              props.as === 'select'
+            ) {
+              result.value = props.modelValue;
+              result.onInput = (event) => {
+                const value = event.currentTarget.value;
+                emit('input', value, event);
+                emit('update:modelValue', value, event);
+              };
+            }
+
+            return result;
+          });
+
           return () => {
             const [htmlProps, forwardedProps, _variantProps, _styleProps, elementProps] = splittedProps.value
+
             return h(
               props.as,
               {
                 ...forwardedProps,
                 ...elementProps,
                 ...normalizeHTMLProps(htmlProps),
+                ...vModelProps.value,
                 class: classes.value,
               },
-              slots.default && slots.default(),
+              slots,
             )
           }
         },
       })
 
       ${componentName}.displayName = \`${factoryName}.\${name}\`
-      ${componentName}.__cva__ = cvaFn
+      ${componentName}.__cva__ = __cvaFn__
       ${componentName}.__base__ = Dynamic
       ${componentName}.__shouldForwardProps__ = shouldForwardProp
 
       return ${componentName}
     }
 
-    function createJsxFactory() {
-      return new Proxy(styledFn, {
-        apply(_, __, args) {
-          return styledFn(...args)
-        },
-        get(_, el) {
-         return styledFn(el)
-        },
-      })
-    }
+    const tags = 'a, abbr, address, area, article, aside, audio, b, base, bdi, bdo, big, blockquote, body, br, button, canvas, caption, cite, code, col, colgroup, data, datalist, dd, del, details, dfn, dialog, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, head, header, hgroup, hr, html, i, iframe, img, input, ins, kbd, keygen, label, legend, li, link, main, map, mark, marquee, menu, menuitem, meta, meter, nav, noscript, object, ol, optgroup, option, output, p, param, picture, pre, progress, q, rp, rt, ruby, s, samp, script, section, select, small, source, span, strong, style, sub, summary, sup, table, tbody, td, textarea, tfoot, th, thead, time, title, tr, track, u, ul, var, video, wbr, circle, clipPath, defs, ellipse, foreignObject, g, image, line, linearGradient, mask, path, pattern, polygon, polyline, radialGradient, rect, stop, svg, text, tspan';
 
-    export const ${factoryName} = /* @__PURE__ */ createJsxFactory()
+    export const ${factoryName} = /* @__PURE__ */ styledFn.bind();
 
+    tags.split(', ').forEach((tag) => {
+      styled[tag] = styled(tag);
+    });
     `
   };
 }
@@ -2375,11 +2422,43 @@ function generateVueJsxStringLiteralFactory(ctx) {
       const ${componentName} = defineComponent({
         name: \`${factoryName}.\${name}\`,
         inheritAttrs: false,
-        props: { as: { type: [String, Object], default: Dynamic } },
-        setup(props, { slots, attrs }) {
+        props: {
+          modelValue: null,
+          as: { type: [String, Object], default: Dynamic }
+        },
+        setup(props, { slots, attrs, emit }) {
           const classes = computed(() => {
             return cx(css(Dynamic.__styles__, styles), elementProps.className)
           })
+
+          const vModelProps = computed(() => {
+            const result = {};
+    
+            if (
+              props.as === 'input' &&
+              (props.type === 'checkbox' || props.type === 'radio')
+            ) {
+              result.checked = props.modelValue;
+              result.onChange = (event) => {
+                const checked = !event.currentTarget.checked;
+                emit('change', checked, event);
+                emit('update:modelValue', checked, event);
+              };
+            } else if (
+              props.as === 'input' ||
+              props.as === 'textarea' ||
+              props.as === 'select'
+            ) {
+              result.value = props.modelValue;
+              result.onInput = (event) => {
+                const value = event.currentTarget.value;
+                emit('input', value, event);
+                emit('update:modelValue', value, event);
+              };
+            }
+    
+            return result;
+          });
           
           return () => {
             return h(
@@ -2387,8 +2466,9 @@ function generateVueJsxStringLiteralFactory(ctx) {
               {
                 class: classes.value,
                 ...elementProps,
+                ...vModelProps.value,
               },
-              slots.default && slots.default(),
+             slots
             )
           }
         },
@@ -2401,23 +2481,13 @@ function generateVueJsxStringLiteralFactory(ctx) {
     }
   }
 
-    function createJsxFactory() {
-      const cache = new Map()
+  const tags = 'a, abbr, address, area, article, aside, audio, b, base, bdi, bdo, big, blockquote, body, br, button, canvas, caption, cite, code, col, colgroup, data, datalist, dd, del, details, dfn, dialog, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, head, header, hgroup, hr, html, i, iframe, img, input, ins, kbd, keygen, label, legend, li, link, main, map, mark, marquee, menu, menuitem, meta, meter, nav, noscript, object, ol, optgroup, option, output, p, param, picture, pre, progress, q, rp, rt, ruby, s, samp, script, section, select, small, source, span, strong, style, sub, summary, sup, table, tbody, td, textarea, tfoot, th, thead, time, title, tr, track, u, ul, var, video, wbr, circle, clipPath, defs, ellipse, foreignObject, g, image, line, linearGradient, mask, path, pattern, polygon, polyline, radialGradient, rect, stop, svg, text, tspan';
 
-      return new Proxy(createStyled, {
-        apply(_, __, args) {
-          return createStyled(...args)
-        },
-        get(_, el) {
-          if (!cache.has(el)) {
-            cache.set(el, createStyled(el))
-          }
-          return cache.get(el)
-        },
-      })
-    }
+  export const ${factoryName} = /* @__PURE__ */ styledFn.bind();
 
-    export const ${factoryName} = /* @__PURE__ */ createJsxFactory()
+  tags.split(', ').forEach((tag) => {
+    styled[tag] = styled(tag);
+  });
     `
   };
 }
@@ -2734,7 +2804,7 @@ var pattern_d_ts_default = {
 
 // src/artifacts/generated/recipe.d.ts.json
 var recipe_d_ts_default = {
-  content: "import type { RecipeRule } from './static-css'\nimport type { SystemStyleObject, DistributiveOmit, Pretty } from './system-types'\n\ntype StringToBoolean<T> = T extends 'true' | 'false' ? boolean : T\n\nexport type RecipeVariantRecord = Record<any, Record<any, SystemStyleObject>>\n\nexport type RecipeSelection<T extends RecipeVariantRecord> = keyof any extends keyof T\n  ? {}\n  : {\n      [K in keyof T]?: StringToBoolean<keyof T[K]> | undefined\n    }\n\nexport type RecipeVariantFn<T extends RecipeVariantRecord> = (props?: RecipeSelection<T>) => string\n\nexport type RecipeVariantProps<\n  T extends RecipeVariantFn<RecipeVariantRecord> | SlotRecipeVariantFn<string, SlotRecipeVariantRecord<string>>,\n> = Pretty<Parameters<T>[0]>\n\ntype RecipeVariantMap<T extends RecipeVariantRecord> = {\n  [K in keyof T]: Array<keyof T[K]>\n}\n\n/* -----------------------------------------------------------------------------\n * Recipe / Standard\n * -----------------------------------------------------------------------------*/\n\nexport interface RecipeRuntimeFn<T extends RecipeVariantRecord> extends RecipeVariantFn<T> {\n  __type: RecipeSelection<T>\n  variantKeys: (keyof T)[]\n  variantMap: RecipeVariantMap<T>\n  raw: (props?: RecipeSelection<T>) => SystemStyleObject\n  config: RecipeConfig<T>\n  splitVariantProps<Props extends RecipeSelection<T>>(\n    props: Props,\n  ): [RecipeSelection<T>, Pretty<DistributiveOmit<Props, keyof T>>]\n}\n\ntype OneOrMore<T> = T | Array<T>\n\nexport type RecipeCompoundSelection<T> = {\n  [K in keyof T]?: OneOrMore<StringToBoolean<keyof T[K]>> | undefined\n}\n\nexport type RecipeCompoundVariant<T> = T & {\n  css: SystemStyleObject\n}\n\nexport interface RecipeDefinition<T extends RecipeVariantRecord = RecipeVariantRecord> {\n  /**\n   * The base styles of the recipe.\n   */\n  base?: SystemStyleObject\n  /**\n   * The multi-variant styles of the recipe.\n   */\n  variants?: T\n  /**\n   * The default variants of the recipe.\n   */\n  defaultVariants?: RecipeSelection<T>\n  /**\n   * The styles to apply when a combination of variants is selected.\n   */\n  compoundVariants?: Pretty<RecipeCompoundVariant<RecipeCompoundSelection<T>>>[]\n  /**\n   * Variants to pre-generate, will be include in the final `config.staticCss`\n   */\n  staticCss?: RecipeRule[]\n}\n\nexport type RecipeCreatorFn = <T extends RecipeVariantRecord>(config: RecipeDefinition<T>) => RecipeRuntimeFn<T>\n\ninterface RecipeConfigMeta {\n  /**\n   * The name of the recipe.\n   */\n  className: string\n  /**\n   * The description of the recipe. This will be used in the JSDoc comment.\n   */\n  description?: string\n  /**\n   * The jsx elements to track for this recipe. Can be string or Regexp.\n   *\n   * @default capitalize(recipe.name)\n   * @example ['Button', 'Link', /Button$/]\n   */\n  jsx?: Array<string | RegExp>\n}\n\nexport interface RecipeConfig<T extends RecipeVariantRecord = RecipeVariantRecord>\n  extends RecipeDefinition<T>,\n    RecipeConfigMeta {}\n\n/* -----------------------------------------------------------------------------\n * Recipe / Slot\n * -----------------------------------------------------------------------------*/\n\ntype SlotRecord<S extends string, T> = Partial<Record<S, T>>\n\nexport type SlotRecipeVariantRecord<S extends string> = Record<any, Record<any, SlotRecord<S, SystemStyleObject>>>\n\nexport type SlotRecipeVariantFn<S extends string, T extends RecipeVariantRecord> = (\n  props?: RecipeSelection<T>,\n) => SlotRecord<S, string>\n\nexport interface SlotRecipeRuntimeFn<S extends string, T extends SlotRecipeVariantRecord<S>>\n  extends SlotRecipeVariantFn<S, T> {\n  raw: (props?: RecipeSelection<T>) => Record<S, SystemStyleObject>\n  variantKeys: (keyof T)[]\n  variantMap: RecipeVariantMap<T>\n  splitVariantProps<Props extends RecipeSelection<T>>(props: Props): [RecipeSelection<T>, Pretty<Omit<Props, keyof T>>]\n}\n\nexport type SlotRecipeCompoundVariant<S extends string, T> = T & {\n  css: SlotRecord<S, SystemStyleObject>\n}\n\nexport interface SlotRecipeDefinition<\n  S extends string = string,\n  T extends SlotRecipeVariantRecord<S> = SlotRecipeVariantRecord<S>,\n> {\n  /**\n   * The parts/slots of the recipe.\n   */\n  slots: S[] | Readonly<S[]>\n  /**\n   * The base styles of the recipe.\n   */\n  base?: SlotRecord<S, SystemStyleObject>\n  /**\n   * The multi-variant styles of the recipe.\n   */\n  variants?: T\n  /**\n   * The default variants of the recipe.\n   */\n  defaultVariants?: RecipeSelection<T>\n  /**\n   * The styles to apply when a combination of variants is selected.\n   */\n  compoundVariants?: Pretty<SlotRecipeCompoundVariant<S, RecipeCompoundSelection<T>>>[]\n  /**\n   * Variants to pre-generate, will be include in the final `config.staticCss`\n   */\n  staticCss?: RecipeRule[]\n}\n\nexport type SlotRecipeCreatorFn = <S extends string, T extends SlotRecipeVariantRecord<S>>(\n  config: SlotRecipeDefinition<S, T>,\n) => SlotRecipeRuntimeFn<S, T>\n\nexport type SlotRecipeConfig<\n  S extends string = string,\n  T extends SlotRecipeVariantRecord<S> = SlotRecipeVariantRecord<S>,\n> = SlotRecipeDefinition<S, T> & RecipeConfigMeta\n"
+  content: "import type { RecipeRule } from './static-css'\nimport type { SystemStyleObject, DistributiveOmit, Pretty } from './system-types'\n\ntype StringToBoolean<T> = T extends 'true' | 'false' ? boolean : T\n\nexport type RecipeVariantRecord = Record<any, Record<any, SystemStyleObject>>\n\nexport type RecipeSelection<T extends RecipeVariantRecord> = keyof any extends keyof T\n  ? {}\n  : {\n      [K in keyof T]?: StringToBoolean<keyof T[K]> | undefined\n    }\n\nexport type RecipeVariantFn<T extends RecipeVariantRecord> = (props?: RecipeSelection<T>) => string\n\n/**\n * Extract the variant as optional props from a `cva` function.\n * Intended to be used with a JSX component, prefer `RecipeVariant` for a more strict type.\n */\nexport type RecipeVariantProps<\n  T extends RecipeVariantFn<RecipeVariantRecord> | SlotRecipeVariantFn<string, SlotRecipeVariantRecord<string>>,\n> = Pretty<Parameters<T>[0]>\n\n/**\n * Extract the variants from a `cva` function.\n */\nexport type RecipeVariant<\n  T extends RecipeVariantFn<RecipeVariantRecord> | SlotRecipeVariantFn<string, SlotRecipeVariantRecord<string>>,\n> = Exclude<Pretty<Required<RecipeVariantProps<T>>>, undefined>\n\ntype RecipeVariantMap<T extends RecipeVariantRecord> = {\n  [K in keyof T]: Array<keyof T[K]>\n}\n\n/* -----------------------------------------------------------------------------\n * Recipe / Standard\n * -----------------------------------------------------------------------------*/\n\nexport interface RecipeRuntimeFn<T extends RecipeVariantRecord> extends RecipeVariantFn<T> {\n  __type: RecipeSelection<T>\n  variantKeys: (keyof T)[]\n  variantMap: RecipeVariantMap<T>\n  raw: (props?: RecipeSelection<T>) => SystemStyleObject\n  config: RecipeConfig<T>\n  splitVariantProps<Props extends RecipeSelection<T>>(\n    props: Props,\n  ): [RecipeSelection<T>, Pretty<DistributiveOmit<Props, keyof T>>]\n}\n\ntype OneOrMore<T> = T | Array<T>\n\nexport type RecipeCompoundSelection<T> = {\n  [K in keyof T]?: OneOrMore<StringToBoolean<keyof T[K]>> | undefined\n}\n\nexport type RecipeCompoundVariant<T> = T & {\n  css: SystemStyleObject\n}\n\nexport interface RecipeDefinition<T extends RecipeVariantRecord = RecipeVariantRecord> {\n  /**\n   * The base styles of the recipe.\n   */\n  base?: SystemStyleObject\n  /**\n   * The multi-variant styles of the recipe.\n   */\n  variants?: T\n  /**\n   * The default variants of the recipe.\n   */\n  defaultVariants?: RecipeSelection<T>\n  /**\n   * The styles to apply when a combination of variants is selected.\n   */\n  compoundVariants?: Pretty<RecipeCompoundVariant<RecipeCompoundSelection<T>>>[]\n  /**\n   * Variants to pre-generate, will be include in the final `config.staticCss`\n   */\n  staticCss?: RecipeRule[]\n}\n\nexport type RecipeCreatorFn = <T extends RecipeVariantRecord>(config: RecipeDefinition<T>) => RecipeRuntimeFn<T>\n\ninterface RecipeConfigMeta {\n  /**\n   * The name of the recipe.\n   */\n  className: string\n  /**\n   * The description of the recipe. This will be used in the JSDoc comment.\n   */\n  description?: string\n  /**\n   * The jsx elements to track for this recipe. Can be string or Regexp.\n   *\n   * @default capitalize(recipe.name)\n   * @example ['Button', 'Link', /Button$/]\n   */\n  jsx?: Array<string | RegExp>\n}\n\nexport interface RecipeConfig<T extends RecipeVariantRecord = RecipeVariantRecord>\n  extends RecipeDefinition<T>,\n    RecipeConfigMeta {}\n\n/* -----------------------------------------------------------------------------\n * Recipe / Slot\n * -----------------------------------------------------------------------------*/\n\ntype SlotRecord<S extends string, T> = Partial<Record<S, T>>\n\nexport type SlotRecipeVariantRecord<S extends string> = Record<any, Record<any, SlotRecord<S, SystemStyleObject>>>\n\nexport type SlotRecipeVariantFn<S extends string, T extends RecipeVariantRecord> = (\n  props?: RecipeSelection<T>,\n) => SlotRecord<S, string>\n\nexport interface SlotRecipeRuntimeFn<S extends string, T extends SlotRecipeVariantRecord<S>>\n  extends SlotRecipeVariantFn<S, T> {\n  raw: (props?: RecipeSelection<T>) => Record<S, SystemStyleObject>\n  variantKeys: (keyof T)[]\n  variantMap: RecipeVariantMap<T>\n  splitVariantProps<Props extends RecipeSelection<T>>(props: Props): [RecipeSelection<T>, Pretty<Omit<Props, keyof T>>]\n}\n\nexport type SlotRecipeCompoundVariant<S extends string, T> = T & {\n  css: SlotRecord<S, SystemStyleObject>\n}\n\nexport interface SlotRecipeDefinition<\n  S extends string = string,\n  T extends SlotRecipeVariantRecord<S> = SlotRecipeVariantRecord<S>,\n> {\n  /**\n   * The parts/slots of the recipe.\n   */\n  slots: S[] | Readonly<S[]>\n  /**\n   * The base styles of the recipe.\n   */\n  base?: SlotRecord<S, SystemStyleObject>\n  /**\n   * The multi-variant styles of the recipe.\n   */\n  variants?: T\n  /**\n   * The default variants of the recipe.\n   */\n  defaultVariants?: RecipeSelection<T>\n  /**\n   * The styles to apply when a combination of variants is selected.\n   */\n  compoundVariants?: Pretty<SlotRecipeCompoundVariant<S, RecipeCompoundSelection<T>>>[]\n  /**\n   * Variants to pre-generate, will be include in the final `config.staticCss`\n   */\n  staticCss?: RecipeRule[]\n}\n\nexport type SlotRecipeCreatorFn = <S extends string, T extends SlotRecipeVariantRecord<S>>(\n  config: SlotRecipeDefinition<S, T>,\n) => SlotRecipeRuntimeFn<S, T>\n\nexport type SlotRecipeConfig<\n  S extends string = string,\n  T extends SlotRecipeVariantRecord<S> = SlotRecipeVariantRecord<S>,\n> = SlotRecipeDefinition<S, T> & RecipeConfigMeta\n"
 };
 
 // src/artifacts/generated/selectors.d.ts.json
@@ -3560,7 +3630,7 @@ function generateResetCss(ctx, sheet) {
       borderColor: "var(--global-color-border, currentColor)"
     },
     hr: { height: "0px", color: "inherit", borderTopWidth: "1px" },
-    body: { height: "100%", lineHeight: "inherit" },
+    body: { height: "100%" },
     img: { borderStyle: "none" },
     "img,  svg,  video,  canvas,  audio,  iframe,  embed,  object": {
       display: "block",

package/dist/index.mjs

@@ -339,7 +339,7 @@ function generateCvaFn(ctx) {
 
     export declare const cva: RecipeCreatorFn
 
-    ${ctx.file.exportType("RecipeVariantProps", "../types/recipe")}
+    ${ctx.file.exportType("RecipeVariant, RecipeVariantProps", "../types/recipe")}
     `
   };
 }
@@ -384,7 +384,7 @@ var astish_mjs_default = {
 
 // 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/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/important.ts\nvar importantRegex = /\\s*!(important)?/i;\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/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/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, child) ?? prop;\n        const childPath = [...path, key];\n        if (stop?.(value, childPath)) {\n          return predicate(value, path);\n        }\n        const next = inner(child, childPath);\n        if (isNotNullish(next)) {\n          result[key] = next;\n        }\n      }\n      return result;\n    }\n    return predicate(value, path);\n  }\n  return inner(target);\n}\nfunction mapObject(obj, fn) {\n  if (Array.isArray(obj))\n    return obj.map((value) => fn(value));\n  if (!isObject(obj))\n    return fn(obj);\n  return walkObject(obj, (value) => fn(value));\n}\n\n// src/normalize-style-object.ts\nfunction toResponsiveObject(values, breakpoints) {\n  return values.reduce((acc, current, index) => {\n    const key = breakpoints[index];\n    if (current != null) {\n      acc[key] = current;\n    }\n    return acc;\n  }, {});\n}\nfunction normalizeStyleObject(styles, context, shorthand = true) {\n  const { utility, conditions } = context;\n  const { hasShorthand, resolveShorthand } = utility;\n  return walkObject(\n    styles,\n    (value) => {\n      return Array.isArray(value) ? toResponsiveObject(value, conditions.breakpoints.keys) : value;\n    },\n    {\n      stop: (value) => Array.isArray(value),\n      getKey: shorthand ? (prop) => hasShorthand ? resolveShorthand(prop) : prop : void 0\n    }\n  );\n}\n\n// src/classname.ts\nvar fallbackCondition = {\n  shift: (v) => v,\n  finalize: (v) => v,\n  breakpoints: { keys: [] }\n};\nvar sanitize = (value) => typeof value === "string" ? value.replaceAll(/[\\n\\s]+/g, " ") : value;\nfunction createCss(context) {\n  const { utility, hash, conditions: conds = fallbackCondition } = context;\n  const formatClassName = (str) => [utility.prefix, str].filter(Boolean).join("-");\n  const hashFn = (conditions, className) => {\n    let result;\n    if (hash) {\n      const baseArray = [...conds.finalize(conditions), className];\n      result = formatClassName(utility.toHash(baseArray, toHash));\n    } else {\n      const baseArray = [...conds.finalize(conditions), formatClassName(className)];\n      result = baseArray.join(":");\n    }\n    return result;\n  };\n  return memo((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) => normalizeStyleObject(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: memo(mergeCss), assignCss };\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/is-css-function.ts\nvar fns = ["min", "max", "clamp", "calc"];\nvar fnRegExp = new RegExp(`^(${fns.join("|")})\\\\(.*\\\\)`);\nvar isCssFunction = (v) => typeof v === "string" && fnRegExp.test(v);\n\n// src/is-css-unit.ts\nvar lengthUnits = "cm,mm,Q,in,pc,pt,px,em,ex,ch,rem,lh,rlh,vw,vh,vmin,vmax,vb,vi,svw,svh,lvw,lvh,dvw,dvh,cqw,cqh,cqi,cqb,cqmin,cqmax,%";\nvar lengthUnitsPattern = `(?:${lengthUnits.split(",").join("|")})`;\nvar lengthRegExp = new RegExp(`^[+-]?[0-9]*.?[0-9]+(?:[eE][+-]?[0-9]+)?${lengthUnitsPattern}$`);\nvar isCssUnit = (v) => typeof v === "string" && lengthRegExp.test(v);\n\n// src/is-css-var.ts\nvar isCssVar = (v) => typeof v === "string" && /^var\\(--.+\\)$/.test(v);\n\n// src/pattern-fns.ts\nvar patternFns = {\n  map: mapObject,\n  isCssFunction,\n  isCssVar,\n  isCssUnit\n};\nvar getPatternStyles = (pattern, styles) => {\n  if (!pattern.defaultValues)\n    return styles;\n  const defaults = typeof pattern.defaultValues === "function" ? pattern.defaultValues(styles) : pattern.defaultValues;\n  return Object.assign({}, defaults, compact(styles));\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  getPatternStyles,\n  getSlotCompoundVariant,\n  getSlotRecipes,\n  hypenateProperty,\n  isBaseCondition,\n  isObject,\n  mapObject,\n  memo,\n  mergeProps,\n  patternFns,\n  splitProps,\n  toHash,\n  uniq,\n  walkObject,\n  withoutSpace\n};\n'
+  content: '// src/assert.ts\nfunction isObject(value) {\n  return typeof value === "object" && value != null && !Array.isArray(value);\n}\n\n// src/compact.ts\nfunction compact(value) {\n  return Object.fromEntries(Object.entries(value ?? {}).filter(([_, value2]) => value2 !== void 0));\n}\n\n// src/condition.ts\nvar isBaseCondition = (v) => v === "base";\nfunction filterBaseConditions(c) {\n  return c.slice().filter((v) => !isBaseCondition(v));\n}\n\n// src/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/important.ts\nvar importantRegex = /\\s*!(important)?/i;\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/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/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, child) ?? prop;\n        const childPath = [...path, key];\n        if (stop?.(value, childPath)) {\n          return predicate(value, path);\n        }\n        const next = inner(child, childPath);\n        if (isNotNullish(next)) {\n          result[key] = next;\n        }\n      }\n      return result;\n    }\n    return predicate(value, path);\n  }\n  return inner(target);\n}\nfunction mapObject(obj, fn) {\n  if (Array.isArray(obj))\n    return obj.map((value) => fn(value));\n  if (!isObject(obj))\n    return fn(obj);\n  return walkObject(obj, (value) => fn(value));\n}\n\n// src/normalize-style-object.ts\nfunction toResponsiveObject(values, breakpoints) {\n  return values.reduce((acc, current, index) => {\n    const key = breakpoints[index];\n    if (current != null) {\n      acc[key] = current;\n    }\n    return acc;\n  }, {});\n}\nfunction normalizeStyleObject(styles, context, shorthand = true) {\n  const { utility, conditions } = context;\n  const { hasShorthand, resolveShorthand } = utility;\n  return walkObject(\n    styles,\n    (value) => {\n      return Array.isArray(value) ? toResponsiveObject(value, conditions.breakpoints.keys) : value;\n    },\n    {\n      stop: (value) => Array.isArray(value),\n      getKey: shorthand ? (prop) => hasShorthand ? resolveShorthand(prop) : prop : void 0\n    }\n  );\n}\n\n// src/classname.ts\nvar fallbackCondition = {\n  shift: (v) => v,\n  finalize: (v) => v,\n  breakpoints: { keys: [] }\n};\nvar sanitize = (value) => typeof value === "string" ? value.replaceAll(/[\\n\\s]+/g, " ") : value;\nfunction createCss(context) {\n  const { utility, hash, conditions: conds = fallbackCondition } = context;\n  const formatClassName = (str) => [utility.prefix, str].filter(Boolean).join("-");\n  const hashFn = (conditions, className) => {\n    let result;\n    if (hash) {\n      const baseArray = [...conds.finalize(conditions), className];\n      result = formatClassName(utility.toHash(baseArray, toHash));\n    } else {\n      const baseArray = [...conds.finalize(conditions), formatClassName(className)];\n      result = baseArray.join(":");\n    }\n    return result;\n  };\n  return memo(({ base, ...styles } = {}) => {\n    const styleObject = Object.assign(styles, base);\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) => normalizeStyleObject(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: memo(mergeCss), assignCss };\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/is-css-function.ts\nvar fns = ["min", "max", "clamp", "calc"];\nvar fnRegExp = new RegExp(`^(${fns.join("|")})\\\\(.*\\\\)`);\nvar isCssFunction = (v) => typeof v === "string" && fnRegExp.test(v);\n\n// src/is-css-unit.ts\nvar lengthUnits = "cm,mm,Q,in,pc,pt,px,em,ex,ch,rem,lh,rlh,vw,vh,vmin,vmax,vb,vi,svw,svh,lvw,lvh,dvw,dvh,cqw,cqh,cqi,cqb,cqmin,cqmax,%";\nvar lengthUnitsPattern = `(?:${lengthUnits.split(",").join("|")})`;\nvar lengthRegExp = new RegExp(`^[+-]?[0-9]*.?[0-9]+(?:[eE][+-]?[0-9]+)?${lengthUnitsPattern}$`);\nvar isCssUnit = (v) => typeof v === "string" && lengthRegExp.test(v);\n\n// src/is-css-var.ts\nvar isCssVar = (v) => typeof v === "string" && /^var\\(--.+\\)$/.test(v);\n\n// src/pattern-fns.ts\nvar patternFns = {\n  map: mapObject,\n  isCssFunction,\n  isCssVar,\n  isCssUnit\n};\nvar getPatternStyles = (pattern, styles) => {\n  if (!pattern.defaultValues)\n    return styles;\n  const defaults = typeof pattern.defaultValues === "function" ? pattern.defaultValues(styles) : pattern.defaultValues;\n  return Object.assign({}, defaults, compact(styles));\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  getPatternStyles,\n  getSlotCompoundVariant,\n  getSlotRecipes,\n  hypenateProperty,\n  isBaseCondition,\n  isObject,\n  mapObject,\n  memo,\n  mergeProps,\n  patternFns,\n  splitProps,\n  toHash,\n  uniq,\n  walkObject,\n  withoutSpace\n};\n'
 };
 
 // src/artifacts/generated/normalize-html.mjs.json
@@ -900,11 +900,12 @@ function generatePreactJsxFactory(ctx) {
         options.defaultProps,
       )
 
+      const __cvaFn__ = composeCvaFn(Dynamic.__cva__, cvaFn)
+      const __shouldForwardProps__ = composeShouldForwardProps(Dynamic, shouldForwardProp)
+
       const ${componentName} = /* @__PURE__ */ forwardRef(function ${componentName}(props, ref) {
         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])
 
@@ -938,7 +939,7 @@ function generatePreactJsxFactory(ctx) {
       const name = getDisplayName(Dynamic)
 
       ${componentName}.displayName = \`${factoryName}.\${name}\`
-      ${componentName}.__cva__ = cvaFn
+      ${componentName}.__cva__ = __cvaFn__
       ${componentName}.__base__ = Dynamic
       ${componentName}.__shouldForwardProps__ = shouldForwardProp
 
@@ -1225,12 +1226,12 @@ function generateQwikJsxFactory(ctx) {
         options.defaultProps,
       )
 
+      const __cvaFn__ = composeCvaFn(Dynamic.__cva__, cvaFn)
+      const __shouldForwardProps__ = composeShouldForwardProps(Dynamic, shouldForwardProp)
+
       const ${componentName} = function ${componentName}(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 [htmlProps, forwardedProps, variantProps, styleProps, elementProps] =
@@ -1263,7 +1264,7 @@ function generateQwikJsxFactory(ctx) {
       const name = getDisplayName(Dynamic)
 
       ${componentName}.displayName = \`${factoryName}.\${name}\`
-      ${componentName}.__cva__ = cvaFn
+      ${componentName}.__cva__ = __cvaFn__
       ${componentName}.__base__ = Dynamic
       ${componentName}.__shouldForwardProps__ = shouldForwardProp
 
@@ -1557,12 +1558,12 @@ function generateReactJsxFactory(ctx) {
         options.defaultProps,
       )
 
+      const __cvaFn__ = composeCvaFn(Dynamic.__cva__, cvaFn)
+      const __shouldForwardProps__ = composeShouldForwardProps(Dynamic, shouldForwardProp)
+
       const ${componentName} = /* @__PURE__ */ forwardRef(function ${componentName}(props, ref) {
         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 [htmlProps, forwardedProps, variantProps, styleProps, elementProps] = useMemo(() => {
@@ -1595,7 +1596,7 @@ function generateReactJsxFactory(ctx) {
       const name = getDisplayName(Dynamic)
 
       ${componentName}.displayName = \`${factoryName}.\${name}\`
-      ${componentName}.__cva__ = cvaFn
+      ${componentName}.__cva__ = __cvaFn__
       ${componentName}.__base__ = Dynamic
       ${componentName}.__shouldForwardProps__ = shouldForwardProp
 
@@ -1867,63 +1868,87 @@ function generateSolidJsxFactory(ctx) {
   const { componentName, factoryName } = ctx.jsx;
   return {
     js: outdent29`
-    import { Dynamic } from 'solid-js/web'
     import { createMemo, mergeProps, splitProps } from 'solid-js'
-    import { createComponent } from 'solid-js/web'
+    import { Dynamic, createComponent } from 'solid-js/web'
+    ${ctx.file.import("css, cx, cva", "../css/index")}
+    ${ctx.file.import("normalizeHTMLProps", "../helpers")}
     ${ctx.file.import(
-      "defaultShouldForwardProp, composeShouldForwardProps, composeCvaFn, getDisplayName",
+      "composeCvaFn, composeShouldForwardProps, defaultShouldForwardProp, getDisplayName",
       "./factory-helper"
     )}
     ${ctx.file.import("isCssProperty", "./is-valid-prop")}
-    ${ctx.file.import("css, cx, cva", "../css/index")}
-    ${ctx.file.import("normalizeHTMLProps", "../helpers")}
 
     function styledFn(element, configOrCva = {}, options = {}) {
-      const cvaFn = configOrCva.__cva__ || configOrCva.__recipe__ ? configOrCva : cva(configOrCva)
+      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,
+        options.dataAttr && configOrCva.__name__
+          ? { 'data-recipe': configOrCva.__name__ }
+          : {},
+        options.defaultProps
+      )
+
+      const __cvaFn__ = composeCvaFn(element.__cva__, cvaFn)
+      const __shouldForwardProps__ = composeShouldForwardProps(
+        element,
+        shouldForwardProp
       )
 
       const ${componentName} = (props) => {
-        const mergedProps = mergeProps({ as: element.__base__ || element }, defaultProps, props)
+        const mergedProps = mergeProps(
+          { as: element.__base__ || element },
+          defaultProps,
+          props
+        )
 
-        const __cvaFn__ = composeCvaFn(Dynamic.__cva__, cvaFn)
-        const __shouldForwardProps__ = composeShouldForwardProps(Dynamic, shouldForwardProp)
+        const [localProps, restProps] = splitProps(mergedProps, [
+          'as',
+          'class',
+          'className',
+        ])
 
-        const forwardedKeys = createMemo(() =>
-          Object.keys(props).filter((prop) => !normalizeHTMLProps.keys.includes(prop) && shouldForwardProp(prop)),
-        )
+        const [htmlProps, aProps] = splitProps(restProps, normalizeHTMLProps.keys)
 
-        const [localProps, htmlProps, forwardedProps, restProps] = splitProps(
-          mergedProps,
-          ['as', 'class', 'className'],
-          normalizeHTMLProps.keys,
-          forwardedKeys()
-        )
+        const forwardedKeys = createMemo(() => {
+          const keys = Object.keys(aProps)
+          return keys.filter((prop) => __shouldForwardProps__(prop))
+        })
 
-        const cssPropertyKeys = createMemo(() => Object.keys(restProps).filter((prop) => isCssProperty(prop)))
+        const [forwardedProps, variantProps, bProps] = splitProps(aProps, forwardedKeys(), __cvaFn__.variantKeys)
 
-        const [variantProps, styleProps, elementProps] = splitProps(
-          restProps,
-          __cvaFn__.variantKeys,
-          cssPropertyKeys(),
-        )
+        const cssPropKeys = createMemo(() => {
+          const keys = Object.keys(bProps)
+          return keys.filter((prop) => isCssProperty(prop))
+        })
+
+        const [styleProps, elementProps] = splitProps(bProps, cssPropKeys())
 
         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)
-          return cx(css(cvaStyles, propStyles, cssStyles), localProps.class, localProps.className)
+          return cx(
+            css(cvaStyles, propStyles, cssStyles),
+            localProps.class,
+            localProps.className
+          )
         }
 
         const classes = configOrCva.__recipe__ ? recipeClass : cvaClass
@@ -1934,26 +1959,21 @@ function generateSolidJsxFactory(ctx) {
 
         return createComponent(
           Dynamic,
-          mergeProps(
-            forwardedProps,
-            elementProps,
-            normalizeHTMLProps(htmlProps),
-            {
-              get component() {
-                return localProps.as
-              },
-              get class() {
-                return classes()
-              }
+          mergeProps(forwardedProps, elementProps, normalizeHTMLProps(htmlProps), {
+            get component() {
+              return localProps.as
             },
-          )
+            get class() {
+              return classes()
+            },
+          })
         )
       }
 
       const name = getDisplayName(element)
 
       ${componentName}.displayName = \`${factoryName}.\${name}\`
-      ${componentName}.__cva__ = cvaFn
+      ${componentName}.__cva__ = __cvaFn__
       ${componentName}.__base__ = element
       ${componentName}.__shouldForwardProps__ = shouldForwardProp
 
@@ -2248,15 +2268,17 @@ function generateVueJsxFactory(ctx) {
       )
 
       const name = getDisplayName(Dynamic)
+      const __cvaFn__ = composeCvaFn(Dynamic.__cva__, cvaFn)
+      const __shouldForwardProps__ = composeShouldForwardProps(Dynamic, shouldForwardProp)
 
       const ${componentName} = defineComponent({
         name: \`${factoryName}.\${name}\`,
         inheritAttrs: false,
-        props: { as: { type: [String, Object], default: Dynamic.__base__ || Dynamic } },
-        setup(props, { slots, attrs }) {
-          const __cvaFn__ = composeCvaFn(Dynamic.__cva__, cvaFn)
-          const __shouldForwardProps__ = composeShouldForwardProps(Dynamic, shouldForwardProp)
-
+        props: {
+          modelValue: null,
+          as: { type: [String, Object], default: Dynamic.__base__ || Dynamic }
+        },
+        setup(props, { slots, attrs, emit }) {
           const combinedProps = computed(() => Object.assign({}, defaultProps, attrs))
 
           const splittedProps = computed(() => {
@@ -2279,43 +2301,68 @@ function generateVueJsxFactory(ctx) {
 
           const classes = configOrCva.__recipe__ ? recipeClass : cvaClass
 
+          const vModelProps = computed(() => {
+            const result = {};
+
+            if (
+              props.as === 'input' &&
+              (props.type === 'checkbox' || props.type === 'radio')
+            ) {
+              result.checked = props.modelValue;
+              result.onChange = (event) => {
+                const checked = !event.currentTarget.checked;
+                emit('change', checked, event);
+                emit('update:modelValue', checked, event);
+              };
+            } else if (
+              props.as === 'input' ||
+              props.as === 'textarea' ||
+              props.as === 'select'
+            ) {
+              result.value = props.modelValue;
+              result.onInput = (event) => {
+                const value = event.currentTarget.value;
+                emit('input', value, event);
+                emit('update:modelValue', value, event);
+              };
+            }
+
+            return result;
+          });
+
           return () => {
             const [htmlProps, forwardedProps, _variantProps, _styleProps, elementProps] = splittedProps.value
+
             return h(
               props.as,
               {
                 ...forwardedProps,
                 ...elementProps,
                 ...normalizeHTMLProps(htmlProps),
+                ...vModelProps.value,
                 class: classes.value,
               },
-              slots.default && slots.default(),
+              slots,
             )
           }
         },
       })
 
       ${componentName}.displayName = \`${factoryName}.\${name}\`
-      ${componentName}.__cva__ = cvaFn
+      ${componentName}.__cva__ = __cvaFn__
       ${componentName}.__base__ = Dynamic
       ${componentName}.__shouldForwardProps__ = shouldForwardProp
 
       return ${componentName}
     }
 
-    function createJsxFactory() {
-      return new Proxy(styledFn, {
-        apply(_, __, args) {
-          return styledFn(...args)
-        },
-        get(_, el) {
-         return styledFn(el)
-        },
-      })
-    }
+    const tags = 'a, abbr, address, area, article, aside, audio, b, base, bdi, bdo, big, blockquote, body, br, button, canvas, caption, cite, code, col, colgroup, data, datalist, dd, del, details, dfn, dialog, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, head, header, hgroup, hr, html, i, iframe, img, input, ins, kbd, keygen, label, legend, li, link, main, map, mark, marquee, menu, menuitem, meta, meter, nav, noscript, object, ol, optgroup, option, output, p, param, picture, pre, progress, q, rp, rt, ruby, s, samp, script, section, select, small, source, span, strong, style, sub, summary, sup, table, tbody, td, textarea, tfoot, th, thead, time, title, tr, track, u, ul, var, video, wbr, circle, clipPath, defs, ellipse, foreignObject, g, image, line, linearGradient, mask, path, pattern, polygon, polyline, radialGradient, rect, stop, svg, text, tspan';
 
-    export const ${factoryName} = /* @__PURE__ */ createJsxFactory()
+    export const ${factoryName} = /* @__PURE__ */ styledFn.bind();
 
+    tags.split(', ').forEach((tag) => {
+      styled[tag] = styled(tag);
+    });
     `
   };
 }
@@ -2339,11 +2386,43 @@ function generateVueJsxStringLiteralFactory(ctx) {
       const ${componentName} = defineComponent({
         name: \`${factoryName}.\${name}\`,
         inheritAttrs: false,
-        props: { as: { type: [String, Object], default: Dynamic } },
-        setup(props, { slots, attrs }) {
+        props: {
+          modelValue: null,
+          as: { type: [String, Object], default: Dynamic }
+        },
+        setup(props, { slots, attrs, emit }) {
           const classes = computed(() => {
             return cx(css(Dynamic.__styles__, styles), elementProps.className)
           })
+
+          const vModelProps = computed(() => {
+            const result = {};
+    
+            if (
+              props.as === 'input' &&
+              (props.type === 'checkbox' || props.type === 'radio')
+            ) {
+              result.checked = props.modelValue;
+              result.onChange = (event) => {
+                const checked = !event.currentTarget.checked;
+                emit('change', checked, event);
+                emit('update:modelValue', checked, event);
+              };
+            } else if (
+              props.as === 'input' ||
+              props.as === 'textarea' ||
+              props.as === 'select'
+            ) {
+              result.value = props.modelValue;
+              result.onInput = (event) => {
+                const value = event.currentTarget.value;
+                emit('input', value, event);
+                emit('update:modelValue', value, event);
+              };
+            }
+    
+            return result;
+          });
           
           return () => {
             return h(
@@ -2351,8 +2430,9 @@ function generateVueJsxStringLiteralFactory(ctx) {
               {
                 class: classes.value,
                 ...elementProps,
+                ...vModelProps.value,
               },
-              slots.default && slots.default(),
+             slots
             )
           }
         },
@@ -2365,23 +2445,13 @@ function generateVueJsxStringLiteralFactory(ctx) {
     }
   }
 
-    function createJsxFactory() {
-      const cache = new Map()
+  const tags = 'a, abbr, address, area, article, aside, audio, b, base, bdi, bdo, big, blockquote, body, br, button, canvas, caption, cite, code, col, colgroup, data, datalist, dd, del, details, dfn, dialog, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, head, header, hgroup, hr, html, i, iframe, img, input, ins, kbd, keygen, label, legend, li, link, main, map, mark, marquee, menu, menuitem, meta, meter, nav, noscript, object, ol, optgroup, option, output, p, param, picture, pre, progress, q, rp, rt, ruby, s, samp, script, section, select, small, source, span, strong, style, sub, summary, sup, table, tbody, td, textarea, tfoot, th, thead, time, title, tr, track, u, ul, var, video, wbr, circle, clipPath, defs, ellipse, foreignObject, g, image, line, linearGradient, mask, path, pattern, polygon, polyline, radialGradient, rect, stop, svg, text, tspan';
 
-      return new Proxy(createStyled, {
-        apply(_, __, args) {
-          return createStyled(...args)
-        },
-        get(_, el) {
-          if (!cache.has(el)) {
-            cache.set(el, createStyled(el))
-          }
-          return cache.get(el)
-        },
-      })
-    }
+  export const ${factoryName} = /* @__PURE__ */ styledFn.bind();
 
-    export const ${factoryName} = /* @__PURE__ */ createJsxFactory()
+  tags.split(', ').forEach((tag) => {
+    styled[tag] = styled(tag);
+  });
     `
   };
 }
@@ -2698,7 +2768,7 @@ var pattern_d_ts_default = {
 
 // src/artifacts/generated/recipe.d.ts.json
 var recipe_d_ts_default = {
-  content: "import type { RecipeRule } from './static-css'\nimport type { SystemStyleObject, DistributiveOmit, Pretty } from './system-types'\n\ntype StringToBoolean<T> = T extends 'true' | 'false' ? boolean : T\n\nexport type RecipeVariantRecord = Record<any, Record<any, SystemStyleObject>>\n\nexport type RecipeSelection<T extends RecipeVariantRecord> = keyof any extends keyof T\n  ? {}\n  : {\n      [K in keyof T]?: StringToBoolean<keyof T[K]> | undefined\n    }\n\nexport type RecipeVariantFn<T extends RecipeVariantRecord> = (props?: RecipeSelection<T>) => string\n\nexport type RecipeVariantProps<\n  T extends RecipeVariantFn<RecipeVariantRecord> | SlotRecipeVariantFn<string, SlotRecipeVariantRecord<string>>,\n> = Pretty<Parameters<T>[0]>\n\ntype RecipeVariantMap<T extends RecipeVariantRecord> = {\n  [K in keyof T]: Array<keyof T[K]>\n}\n\n/* -----------------------------------------------------------------------------\n * Recipe / Standard\n * -----------------------------------------------------------------------------*/\n\nexport interface RecipeRuntimeFn<T extends RecipeVariantRecord> extends RecipeVariantFn<T> {\n  __type: RecipeSelection<T>\n  variantKeys: (keyof T)[]\n  variantMap: RecipeVariantMap<T>\n  raw: (props?: RecipeSelection<T>) => SystemStyleObject\n  config: RecipeConfig<T>\n  splitVariantProps<Props extends RecipeSelection<T>>(\n    props: Props,\n  ): [RecipeSelection<T>, Pretty<DistributiveOmit<Props, keyof T>>]\n}\n\ntype OneOrMore<T> = T | Array<T>\n\nexport type RecipeCompoundSelection<T> = {\n  [K in keyof T]?: OneOrMore<StringToBoolean<keyof T[K]>> | undefined\n}\n\nexport type RecipeCompoundVariant<T> = T & {\n  css: SystemStyleObject\n}\n\nexport interface RecipeDefinition<T extends RecipeVariantRecord = RecipeVariantRecord> {\n  /**\n   * The base styles of the recipe.\n   */\n  base?: SystemStyleObject\n  /**\n   * The multi-variant styles of the recipe.\n   */\n  variants?: T\n  /**\n   * The default variants of the recipe.\n   */\n  defaultVariants?: RecipeSelection<T>\n  /**\n   * The styles to apply when a combination of variants is selected.\n   */\n  compoundVariants?: Pretty<RecipeCompoundVariant<RecipeCompoundSelection<T>>>[]\n  /**\n   * Variants to pre-generate, will be include in the final `config.staticCss`\n   */\n  staticCss?: RecipeRule[]\n}\n\nexport type RecipeCreatorFn = <T extends RecipeVariantRecord>(config: RecipeDefinition<T>) => RecipeRuntimeFn<T>\n\ninterface RecipeConfigMeta {\n  /**\n   * The name of the recipe.\n   */\n  className: string\n  /**\n   * The description of the recipe. This will be used in the JSDoc comment.\n   */\n  description?: string\n  /**\n   * The jsx elements to track for this recipe. Can be string or Regexp.\n   *\n   * @default capitalize(recipe.name)\n   * @example ['Button', 'Link', /Button$/]\n   */\n  jsx?: Array<string | RegExp>\n}\n\nexport interface RecipeConfig<T extends RecipeVariantRecord = RecipeVariantRecord>\n  extends RecipeDefinition<T>,\n    RecipeConfigMeta {}\n\n/* -----------------------------------------------------------------------------\n * Recipe / Slot\n * -----------------------------------------------------------------------------*/\n\ntype SlotRecord<S extends string, T> = Partial<Record<S, T>>\n\nexport type SlotRecipeVariantRecord<S extends string> = Record<any, Record<any, SlotRecord<S, SystemStyleObject>>>\n\nexport type SlotRecipeVariantFn<S extends string, T extends RecipeVariantRecord> = (\n  props?: RecipeSelection<T>,\n) => SlotRecord<S, string>\n\nexport interface SlotRecipeRuntimeFn<S extends string, T extends SlotRecipeVariantRecord<S>>\n  extends SlotRecipeVariantFn<S, T> {\n  raw: (props?: RecipeSelection<T>) => Record<S, SystemStyleObject>\n  variantKeys: (keyof T)[]\n  variantMap: RecipeVariantMap<T>\n  splitVariantProps<Props extends RecipeSelection<T>>(props: Props): [RecipeSelection<T>, Pretty<Omit<Props, keyof T>>]\n}\n\nexport type SlotRecipeCompoundVariant<S extends string, T> = T & {\n  css: SlotRecord<S, SystemStyleObject>\n}\n\nexport interface SlotRecipeDefinition<\n  S extends string = string,\n  T extends SlotRecipeVariantRecord<S> = SlotRecipeVariantRecord<S>,\n> {\n  /**\n   * The parts/slots of the recipe.\n   */\n  slots: S[] | Readonly<S[]>\n  /**\n   * The base styles of the recipe.\n   */\n  base?: SlotRecord<S, SystemStyleObject>\n  /**\n   * The multi-variant styles of the recipe.\n   */\n  variants?: T\n  /**\n   * The default variants of the recipe.\n   */\n  defaultVariants?: RecipeSelection<T>\n  /**\n   * The styles to apply when a combination of variants is selected.\n   */\n  compoundVariants?: Pretty<SlotRecipeCompoundVariant<S, RecipeCompoundSelection<T>>>[]\n  /**\n   * Variants to pre-generate, will be include in the final `config.staticCss`\n   */\n  staticCss?: RecipeRule[]\n}\n\nexport type SlotRecipeCreatorFn = <S extends string, T extends SlotRecipeVariantRecord<S>>(\n  config: SlotRecipeDefinition<S, T>,\n) => SlotRecipeRuntimeFn<S, T>\n\nexport type SlotRecipeConfig<\n  S extends string = string,\n  T extends SlotRecipeVariantRecord<S> = SlotRecipeVariantRecord<S>,\n> = SlotRecipeDefinition<S, T> & RecipeConfigMeta\n"
+  content: "import type { RecipeRule } from './static-css'\nimport type { SystemStyleObject, DistributiveOmit, Pretty } from './system-types'\n\ntype StringToBoolean<T> = T extends 'true' | 'false' ? boolean : T\n\nexport type RecipeVariantRecord = Record<any, Record<any, SystemStyleObject>>\n\nexport type RecipeSelection<T extends RecipeVariantRecord> = keyof any extends keyof T\n  ? {}\n  : {\n      [K in keyof T]?: StringToBoolean<keyof T[K]> | undefined\n    }\n\nexport type RecipeVariantFn<T extends RecipeVariantRecord> = (props?: RecipeSelection<T>) => string\n\n/**\n * Extract the variant as optional props from a `cva` function.\n * Intended to be used with a JSX component, prefer `RecipeVariant` for a more strict type.\n */\nexport type RecipeVariantProps<\n  T extends RecipeVariantFn<RecipeVariantRecord> | SlotRecipeVariantFn<string, SlotRecipeVariantRecord<string>>,\n> = Pretty<Parameters<T>[0]>\n\n/**\n * Extract the variants from a `cva` function.\n */\nexport type RecipeVariant<\n  T extends RecipeVariantFn<RecipeVariantRecord> | SlotRecipeVariantFn<string, SlotRecipeVariantRecord<string>>,\n> = Exclude<Pretty<Required<RecipeVariantProps<T>>>, undefined>\n\ntype RecipeVariantMap<T extends RecipeVariantRecord> = {\n  [K in keyof T]: Array<keyof T[K]>\n}\n\n/* -----------------------------------------------------------------------------\n * Recipe / Standard\n * -----------------------------------------------------------------------------*/\n\nexport interface RecipeRuntimeFn<T extends RecipeVariantRecord> extends RecipeVariantFn<T> {\n  __type: RecipeSelection<T>\n  variantKeys: (keyof T)[]\n  variantMap: RecipeVariantMap<T>\n  raw: (props?: RecipeSelection<T>) => SystemStyleObject\n  config: RecipeConfig<T>\n  splitVariantProps<Props extends RecipeSelection<T>>(\n    props: Props,\n  ): [RecipeSelection<T>, Pretty<DistributiveOmit<Props, keyof T>>]\n}\n\ntype OneOrMore<T> = T | Array<T>\n\nexport type RecipeCompoundSelection<T> = {\n  [K in keyof T]?: OneOrMore<StringToBoolean<keyof T[K]>> | undefined\n}\n\nexport type RecipeCompoundVariant<T> = T & {\n  css: SystemStyleObject\n}\n\nexport interface RecipeDefinition<T extends RecipeVariantRecord = RecipeVariantRecord> {\n  /**\n   * The base styles of the recipe.\n   */\n  base?: SystemStyleObject\n  /**\n   * The multi-variant styles of the recipe.\n   */\n  variants?: T\n  /**\n   * The default variants of the recipe.\n   */\n  defaultVariants?: RecipeSelection<T>\n  /**\n   * The styles to apply when a combination of variants is selected.\n   */\n  compoundVariants?: Pretty<RecipeCompoundVariant<RecipeCompoundSelection<T>>>[]\n  /**\n   * Variants to pre-generate, will be include in the final `config.staticCss`\n   */\n  staticCss?: RecipeRule[]\n}\n\nexport type RecipeCreatorFn = <T extends RecipeVariantRecord>(config: RecipeDefinition<T>) => RecipeRuntimeFn<T>\n\ninterface RecipeConfigMeta {\n  /**\n   * The name of the recipe.\n   */\n  className: string\n  /**\n   * The description of the recipe. This will be used in the JSDoc comment.\n   */\n  description?: string\n  /**\n   * The jsx elements to track for this recipe. Can be string or Regexp.\n   *\n   * @default capitalize(recipe.name)\n   * @example ['Button', 'Link', /Button$/]\n   */\n  jsx?: Array<string | RegExp>\n}\n\nexport interface RecipeConfig<T extends RecipeVariantRecord = RecipeVariantRecord>\n  extends RecipeDefinition<T>,\n    RecipeConfigMeta {}\n\n/* -----------------------------------------------------------------------------\n * Recipe / Slot\n * -----------------------------------------------------------------------------*/\n\ntype SlotRecord<S extends string, T> = Partial<Record<S, T>>\n\nexport type SlotRecipeVariantRecord<S extends string> = Record<any, Record<any, SlotRecord<S, SystemStyleObject>>>\n\nexport type SlotRecipeVariantFn<S extends string, T extends RecipeVariantRecord> = (\n  props?: RecipeSelection<T>,\n) => SlotRecord<S, string>\n\nexport interface SlotRecipeRuntimeFn<S extends string, T extends SlotRecipeVariantRecord<S>>\n  extends SlotRecipeVariantFn<S, T> {\n  raw: (props?: RecipeSelection<T>) => Record<S, SystemStyleObject>\n  variantKeys: (keyof T)[]\n  variantMap: RecipeVariantMap<T>\n  splitVariantProps<Props extends RecipeSelection<T>>(props: Props): [RecipeSelection<T>, Pretty<Omit<Props, keyof T>>]\n}\n\nexport type SlotRecipeCompoundVariant<S extends string, T> = T & {\n  css: SlotRecord<S, SystemStyleObject>\n}\n\nexport interface SlotRecipeDefinition<\n  S extends string = string,\n  T extends SlotRecipeVariantRecord<S> = SlotRecipeVariantRecord<S>,\n> {\n  /**\n   * The parts/slots of the recipe.\n   */\n  slots: S[] | Readonly<S[]>\n  /**\n   * The base styles of the recipe.\n   */\n  base?: SlotRecord<S, SystemStyleObject>\n  /**\n   * The multi-variant styles of the recipe.\n   */\n  variants?: T\n  /**\n   * The default variants of the recipe.\n   */\n  defaultVariants?: RecipeSelection<T>\n  /**\n   * The styles to apply when a combination of variants is selected.\n   */\n  compoundVariants?: Pretty<SlotRecipeCompoundVariant<S, RecipeCompoundSelection<T>>>[]\n  /**\n   * Variants to pre-generate, will be include in the final `config.staticCss`\n   */\n  staticCss?: RecipeRule[]\n}\n\nexport type SlotRecipeCreatorFn = <S extends string, T extends SlotRecipeVariantRecord<S>>(\n  config: SlotRecipeDefinition<S, T>,\n) => SlotRecipeRuntimeFn<S, T>\n\nexport type SlotRecipeConfig<\n  S extends string = string,\n  T extends SlotRecipeVariantRecord<S> = SlotRecipeVariantRecord<S>,\n> = SlotRecipeDefinition<S, T> & RecipeConfigMeta\n"
 };
 
 // src/artifacts/generated/selectors.d.ts.json
@@ -3524,7 +3594,7 @@ function generateResetCss(ctx, sheet) {
       borderColor: "var(--global-color-border, currentColor)"
     },
     hr: { height: "0px", color: "inherit", borderTopWidth: "1px" },
-    body: { height: "100%", lineHeight: "inherit" },
+    body: { height: "100%" },
     img: { borderStyle: "none" },
     "img,  svg,  video,  canvas,  audio,  iframe,  embed,  object": {
       display: "block",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/generator",
-  "version": "0.30.1",
+  "version": "0.31.0",
   "description": "The css generator for css panda",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -37,12 +37,12 @@
     "pluralize": "8.0.0",
     "postcss": "^8.4.31",
     "ts-pattern": "5.0.5",
-    "@pandacss/core": "0.30.1",
-    "@pandacss/is-valid-prop": "^0.30.1",
-    "@pandacss/logger": "0.30.1",
-    "@pandacss/shared": "0.30.1",
-    "@pandacss/token-dictionary": "0.30.1",
-    "@pandacss/types": "0.30.1"
+    "@pandacss/core": "0.31.0",
+    "@pandacss/is-valid-prop": "^0.31.0",
+    "@pandacss/logger": "0.31.0",
+    "@pandacss/shared": "0.31.0",
+    "@pandacss/token-dictionary": "0.31.0",
+    "@pandacss/types": "0.31.0"
   },
   "devDependencies": {
     "@types/pluralize": "0.0.33"